chore: update examples

Author: hawkeye64

demo/quasar.conf.js

@@ -51,7 +51,8 @@ module.exports = function (ctx) {
         'QTabs',
         'QTab',
         'QTabPanels',
-        'QTabPanel'
+        'QTabPanel',
+        'QTooltip'
       ],
 
       directives: [

demo/src/components/IconCard.vue

@@ -21,6 +21,7 @@
         :selectedColor="selectedColor"
         :selectedBackground-color="selectedBackgroundColor"
         :font-size="fontSize"
+        :pagination.sync="pagination"
         style="height: 300px;"
       />
     </q-card-section>
@@ -34,7 +35,7 @@ export default {
   data () {
     return {
       value: '',
-      name: '',
+      name: 'material-icons',
       filter: '',
       iconSets: [
         { label: 'Eva Icons', value: 'eva-icons' },
@@ -57,7 +58,8 @@ export default {
     fontSize: {
       type: String,
       default: 'inherit'
-    }
+    },
+    pagination: Object
   },
 
   mounted () {

demo/src/components/examples/Color.vue

@@ -39,7 +39,8 @@
       icon-set="material-icons"
       color="green-8"
       background-color="yellow-8"
-      style="height: 400px;"
+      :pagination.sync="pagination"
+      style="height: 220px;"
     />
 
   </div>
@@ -55,7 +56,11 @@ export default {
       tab: 'template',
       template: template,
       script: script,
-      value: ''
+      value: '',
+      pagination: {
+        itemsPerPage: 60,
+        page: 0
+      }
     }
   }
 }

demo/src/components/examples/CustomIconSet.vue

@@ -40,7 +40,7 @@
     <q-icon-picker
       v-model="value"
       :icons="icons"
-      style="height: 400px;"
+      style="height: 100px;"
     />
 
   </div>
@@ -64,7 +64,11 @@ export default {
         { name: 'eva-camera' },
         { name: 'mdi-camera' },
         { name: 'ti-camera' }
-      ]
+      ],
+      pagination: {
+        itemsPerPage: 60,
+        page: 0
+      }
     }
   }
 }

demo/src/components/examples/Default.vue

@@ -36,7 +36,8 @@
     <q-icon-picker
       v-model="value"
       icon-set="material-icons"
-      style="height: 400px;"
+      :pagination.sync="pagination"
+      style="height: 220px;"
     />
 
   </div>
@@ -52,7 +53,11 @@ export default {
       tab: 'template',
       template: template,
       script: script,
-      value: ''
+      value: '',
+      pagination: {
+        itemsPerPage: 60,
+        page: 0
+      }
     }
   }
 }

demo/src/components/examples/Filter.vue

@@ -39,7 +39,8 @@
       v-model="value"
       icon-set="material-icons"
       :filter="filter"
-      style="height: 400px;"
+      :pagination.sync="pagination"
+      style="height: 220px;"
     />
 
   </div>
@@ -56,7 +57,11 @@ export default {
       template: template,
       script: script,
       value: '',
-      filter: ''
+      filter: '',
+      pagination: {
+        itemsPerPage: 60,
+        page: 0
+      }
     }
   }
 }

demo/src/components/examples/SelectedColor.vue

@@ -39,7 +39,8 @@
       icon-set="material-icons"
       selected-color="green-8"
       selected-background-color="yellow-8"
-      style="height: 400px;"
+      :pagination.sync="pagination"
+      style="height: 220px;"
     />
 
   </div>
@@ -55,7 +56,11 @@ export default {
       tab: 'template',
       template: template,
       script: script,
-      value: ''
+      value: '',
+      pagination: {
+        itemsPerPage: 60,
+        page: 0
+      }
     }
   }
 }

demo/src/components/examples/Size.vue

@@ -37,7 +37,8 @@
       v-model="value"
       icon-set="material-icons"
       font-size="30px"
-      style="height: 400px;"
+      :pagination.sync="pagination"
+      style="height: 360px;"
     />
 
   </div>
@@ -53,7 +54,11 @@ export default {
       tab: 'template',
       template: template,
       script: script,
-      value: ''
+      value: '',
+      pagination: {
+        itemsPerPage: 32,
+        page: 0
+      }
     }
   }
 }

demo/src/components/examples/Tooltips.vue

@@ -38,7 +38,8 @@
       v-model="value"
       icon-set="material-icons"
       tooltips
-      style="height: 400px;"
+      :pagination.sync="pagination"
+      style="height: 220px;"
     />
 
   </div>
@@ -54,7 +55,11 @@ export default {
       tab: 'template',
       template: template,
       script: script,
-      value: ''
+      value: '',
+      pagination: {
+        itemsPerPage: 60,
+        page: 0
+      }
     }
   }
 }

demo/src/components/examples/UsingIconSlot.vue

@@ -36,14 +36,16 @@
     <q-icon-picker
       v-model="value"
       icon-set="material-icons"
+      :pagination.sync="pagination"
       style="height: 400px;"
     >
       <template #icon="name">
         <q-btn
           :label="name"
           :icon="name"
           no-caps
-          class="q-ma-xs"
+          align="left"
+          class="q-ma-xs full-width"
         />
       </template>
     </q-icon-picker>
@@ -61,7 +63,11 @@ export default {
       tab: 'template',
       template: template,
       script: script,
-      value: ''
+      value: '',
+      pagination: {
+        itemsPerPage: 8,
+        page: 0
+      }
     }
   }
 }