chore: demo

Author: farfromrefug

demo-snippets/vue/SimpleGrid.vue

@@ -3,11 +3,12 @@
         <ActionBar>
             <Label text="Simple Grid" />
             <ActionItem @tap="refresh" ios.systemIcon="16" ios.position="right" text="refresh" />
+            <ActionItem @tap="test" ios.systemIcon="12" ios.position="right" text="test" />
         </ActionBar>
 
         <GridLayout>
             <CollectionView
-                
+                    :width="collectionViewWidth"
                 :items="itemList"
                 @itemTap="onItemTap"
                 @loadMoreItems="onLoadMoreItems"
@@ -82,7 +83,8 @@ export default {
             { index: 19, name: 'ASBESTOS', color: '#7f8c8d' }
         ]);
         return {
-            itemList: items
+            itemList: items,
+            collectionViewWidth:"100%"
         };
     },
     methods: {
@@ -305,6 +307,9 @@ export default {
         onItemTap({ index, item }) {
             console.log(`EVENT TRIGGERED: Tapped on ${index} ${item.name}`);
         },
+        test(){
+            this.collectionViewWidth = this.collectionViewWidth == "100%" ? "50%" : "100%"
+        },
         refresh() {
             this.itemList = ([
         { index: 0, name: 'TURQUOISE', color: '#1abc9c' },

demo-snippets/vue/install.ts

@@ -1,8 +1,10 @@
 import Vue from 'nativescript-vue';
+import {Trace} from '@nativescript/core';
 
 import CollectionView from '@nativescript-community/ui-collectionview/vue';
 import SwipeMenuPlugin from '@nativescript-community/ui-collectionview-swipemenu/vue';
 import install from '@nativescript-community/ui-collectionview-waterfall';
+import { CollectionViewTraceCategory } from '@nativescript-community/ui-collectionview';
 
 import SimpleGrid from './SimpleGrid.vue';
 import HorizontalGrid from './HorizontalGrid.vue';
@@ -18,6 +20,9 @@ export function installPlugin() {
     install();
 }
 
+Trace.addCategories(CollectionViewTraceCategory)
+Trace.enable()
+
 export const demos = [
     { name: 'Simple Grid', path: 'simple-grid', component: SimpleGrid },
     { name: 'Horizontal Grid', path: 'horizontal-grid', component: HorizontalGrid },