Skip to content

Commit 4265765

Browse files
farfromrefugfarfromrefug
committed
Merge branch 'master' of github.com:nativescript-community/nativescript-collectionview
2 parents 49a8c8f + 6c1b437 commit 4265765

File tree

14 files changed

+254
-50
lines changed

14 files changed

+254
-50
lines changed

‎CHANGELOG.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,17 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
## [5.1.4](https://github.com/@nativescript-community/ui-collectionview/compare/v5.1.3...v5.1.4) (2023-04-28)
7+
8+
9+
### Bug Fixes
10+
11+
* crash if items were not objects ([44ac472](https://github.com/@nativescript-community/ui-collectionview/commit/44ac4728c07579495425fc6ce64f554952683280))
12+
13+
14+
15+
16+
617
## [5.1.3](https://github.com/@nativescript-community/ui-collectionview/compare/v5.1.2...v5.1.3) (2023-04-26)
718

819

‎README.md‎

Lines changed: 58 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,14 @@
5757
* [Usage in Angular](#usage-in-angular)
5858
* [Simple Example](#simple-example-1)
5959
* [Templates Example](#templates-example-1)
60-
* [Usage in Vue](#usage-in-vue)
60+
* [Usage in Vue 3](#usage-in-vue-3)
6161
* [Simple Example](#simple-example-2)
62-
* [Usage in Svelte](#usage-in-svelte)
62+
* [Usage in Vue 2](#usage-in-vue-2)
6363
* [Simple Example](#simple-example-3)
64-
* [Usage in React](#usage-in-react)
64+
* [Usage in Svelte](#usage-in-svelte)
6565
* [Simple Example](#simple-example-4)
66+
* [Usage in React](#usage-in-react)
67+
* [Simple Example](#simple-example-5)
6668
* [Demos](#demos)
6769
* [Demos and Development](#demos-and-development)
6870
* [Repo Setup](#repo-setup)
@@ -283,12 +285,62 @@ If you want to use multiple item templates, you can do that very similarly to ho
283285
For a more complete example, look in the `demo-ng` directory.
284286

285287

286-
[](#usage-in-vue)
288+
[](#usage-in-vue-3)
289+
290+
291+
[](#usage-in-vue-3)
292+
293+
## Usage in Vue 3
294+
295+
Register the plugin in your `app.ts`.
296+
297+
```ts
298+
import CollectionView from '@nativescript-community/ui-collectionview/vue3';
299+
300+
const app = createApp(YourComponent);
301+
app.use(CollectionView);
302+
app.start();
303+
```
304+
305+
### Simple Example
306+
In your component, add the following to make a simple array of objects.
307+
308+
```html
309+
<script setup lang="ts">
310+
import { ObservableArray } from '@nativescript/core';
311+
import { ref } from "nativescript-vue";
312+
313+
const itemList = ref(new ObservableArray([
314+
{ name: 'TURQUOISE', color: '#1abc9c' },
315+
{ name: 'EMERALD', color: '#2ecc71' },
316+
{ name: 'PETER RIVER', color: '#3498db' },
317+
{ name: 'AMETHYST', color: '#9b59b6' },
318+
{ name: 'WET ASPHALT', color: '#34495e' }
319+
]));
320+
</script>
321+
```
322+
323+
Then add the following XML to your component.
324+
325+
```xml
326+
<CollectionView :items="itemList" colWidth="50%" rowHeight="100">
327+
<template #default="{ item }">
328+
<StackLayout :backgroundColor="item.color" >
329+
<Label :text="item.name"/>
330+
</StackLayout>
331+
</template>
332+
</CollectionView>
333+
```
334+
335+
For a more complete example, look in the `demo-vue3` and [demo-snippets/vue3](https://github.com/nativescript-community/ui-collectionview/tree/master/demo-snippets/vue3) directory.
336+
337+
338+
[](#usage-in-vue-2)
287339

288340

289-
[](#usage-in-vue)
341+
[](#usage-in-vue-2)
290342

291-
## Usage in Vue
343+
## Usage in Vue 2
292344

293345
Register the plugin in your `app.ts`.
294346

‎docs/index.html‎

Lines changed: 34 additions & 10 deletions
Large diffs are not rendered by default.

‎lerna.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "5.1.3",
2+
"version": "5.1.4",
33
"packages": [
44
"packages/*"
55
],

‎packages/collectionview/CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
## [5.1.4](https://github.com/nativescript-community/ui-collectionview/compare/v5.1.3...v5.1.4) (2023-04-28)
7+
8+
**Note:** Version bump only for package @nativescript-community/ui-collectionview
9+
10+
11+
12+
13+
614
## [5.1.3](https://github.com/nativescript-community/ui-collectionview/compare/v5.1.2...v5.1.3) (2023-04-26)
715

816
**Note:** Version bump only for package @nativescript-community/ui-collectionview

‎packages/collectionview/README.md‎

Lines changed: 54 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,14 @@
5252
* [Usage in Angular](#usage-in-angular)
5353
* [Simple Example](#simple-example-1)
5454
* [Templates Example](#templates-example-1)
55-
* [Usage in Vue](#usage-in-vue)
55+
* [Usage in Vue 3](#usage-in-vue-3)
5656
* [Simple Example](#simple-example-2)
57-
* [Usage in Svelte](#usage-in-svelte)
57+
* [Usage in Vue 2](#usage-in-vue-2)
5858
* [Simple Example](#simple-example-3)
59-
* [Usage in React](#usage-in-react)
59+
* [Usage in Svelte](#usage-in-svelte)
6060
* [Simple Example](#simple-example-4)
61+
* [Usage in React](#usage-in-react)
62+
* [Simple Example](#simple-example-5)
6163
* [Demos](#demos)
6264
* [Demos and Development](#demos-and-development)
6365
* [Repo Setup](#repo-setup)
@@ -266,9 +268,56 @@ If you want to use multiple item templates, you can do that very similarly to ho
266268
For a more complete example, look in the `demo-ng` directory.
267269

268270

269-
[](#usage-in-vue)
271+
[](#usage-in-vue-3)
272+
273+
## Usage in Vue 3
274+
275+
Register the plugin in your `app.ts`.
276+
277+
```ts
278+
import CollectionView from '@nativescript-community/ui-collectionview/vue3';
279+
280+
const app = createApp(YourComponent);
281+
app.use(CollectionView);
282+
app.start();
283+
```
284+
285+
### Simple Example
286+
In your component, add the following to make a simple array of objects.
287+
288+
```html
289+
<script setup lang="ts">
290+
import { ObservableArray } from '@nativescript/core';
291+
import { ref } from "nativescript-vue";
292+
293+
const itemList = ref(new ObservableArray([
294+
{ name: 'TURQUOISE', color: '#1abc9c' },
295+
{ name: 'EMERALD', color: '#2ecc71' },
296+
{ name: 'PETER RIVER', color: '#3498db' },
297+
{ name: 'AMETHYST', color: '#9b59b6' },
298+
{ name: 'WET ASPHALT', color: '#34495e' }
299+
]));
300+
</script>
301+
```
302+
303+
Then add the following XML to your component.
304+
305+
```xml
306+
<CollectionView :items="itemList" colWidth="50%" rowHeight="100">
307+
<template #default="{ item }">
308+
<StackLayout :backgroundColor="item.color" >
309+
<Label :text="item.name"/>
310+
</StackLayout>
311+
</template>
312+
</CollectionView>
313+
```
314+
315+
For a more complete example, look in the `demo-vue3` and [demo-snippets/vue3](https://github.com/nativescript-community/ui-collectionview/tree/master/demo-snippets/vue3) directory.
316+
317+
318+
[](#usage-in-vue-2)
270319

271-
## Usage in Vue
320+
## Usage in Vue 2
272321

273322
Register the plugin in your `app.ts`.
274323

‎packages/collectionview/blueprint.md‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,51 @@ If you want to use multiple item templates, you can do that very similarly to ho
191191

192192
For a more complete example, look in the `demo-ng` directory.
193193

194-
## Usage in Vue
194+
## Usage in Vue 3
195+
196+
Register the plugin in your `app.ts`.
197+
198+
```ts
199+
import CollectionView from '@nativescript-community/ui-collectionview/vue3';
200+
201+
const app = createApp(YourComponent);
202+
app.use(CollectionView);
203+
app.start();
204+
```
205+
206+
### Simple Example
207+
In your component, add the following to make a simple array of objects.
208+
209+
```html
210+
<script setup lang="ts">
211+
import { ObservableArray } from '@nativescript/core';
212+
import { ref } from "nativescript-vue";
213+
214+
const itemList = ref(new ObservableArray([
215+
{ name: 'TURQUOISE', color: '#1abc9c' },
216+
{ name: 'EMERALD', color: '#2ecc71' },
217+
{ name: 'PETER RIVER', color: '#3498db' },
218+
{ name: 'AMETHYST', color: '#9b59b6' },
219+
{ name: 'WET ASPHALT', color: '#34495e' }
220+
]));
221+
</script>
222+
```
223+
224+
Then add the following XML to your component.
225+
226+
```xml
227+
<CollectionView :items="itemList" colWidth="50%" rowHeight="100">
228+
<template #default="{ item }">
229+
<StackLayout :backgroundColor="item.color" >
230+
<Label :text="item.name"/>
231+
</StackLayout>
232+
</template>
233+
</CollectionView>
234+
```
235+
236+
For a more complete example, look in the `demo-vue3` and [demo-snippets/vue3](https://github.com/nativescript-community/ui-collectionview/tree/master/demo-snippets/vue3) directory.
237+
238+
## Usage in Vue 2
195239

196240
Register the plugin in your `app.ts`.
197241

‎packages/collectionview/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@nativescript-community/ui-collectionview",
3-
"version": "5.1.3",
3+
"version": "5.1.4",
44
"description": "Allows you to easily add a collection view (grid list view) to your projects. Supports vertical and horizontal modes, templating, and more.",
55
"main": "./index",
66
"sideEffects": false,

‎packages/swipemenu/CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
## [5.1.4](https://github.com/nativescript-community/ui-collectionview/compare/v5.1.3...v5.1.4) (2023-04-28)
7+
8+
**Note:** Version bump only for package @nativescript-community/ui-collectionview-swipemenu
9+
10+
11+
12+
13+
614
## [5.1.3](https://github.com/nativescript-community/ui-collectionview/compare/v5.1.2...v5.1.3) (2023-04-26)
715

816
**Note:** Version bump only for package @nativescript-community/ui-collectionview-swipemenu

‎packages/swipemenu/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@nativescript-community/ui-collectionview-swipemenu",
3-
"version": "5.1.3",
3+
"version": "5.1.4",
44
"description": "A NativeScript CollectionView SwipeMenu Plugin.",
55
"main": "./index",
66
"sideEffects": false,
@@ -40,7 +40,7 @@
4040
"homepage": "https://github.com/nativescript-community/ui-collectionview#readme",
4141
"dependencies": {
4242
"@nativescript-community/class-mixins": "^1.0.0",
43-
"@nativescript-community/ui-collectionview": "^5.1.3",
43+
"@nativescript-community/ui-collectionview": "^5.1.4",
4444
"@nativescript-community/ui-drawer": "^0.1.13"
4545
}
4646
}

0 commit comments

Comments
 (0)