perf: #164 Smaller component prefix ("q-" instead of "quasar-")

This lowers the footprint of Apps too, besides being more faster to type.

dev/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="quasar-app">
+  <div id="q-app">
     <router-view></router-view>
   </div>
 </template>

dev/components/components/collapsible.vue

@@ -2,64 +2,64 @@
   <div>
     <div class="layout-padding" style="max-width: 600px;">
       <div class="list">
-        <quasar-collapsible icon="explore" label="First">
+        <q-collapsible icon="explore" label="First">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="perm_identity" label="Second">
+        </q-collapsible>
+        <q-collapsible icon="perm_identity" label="Second">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="shopping_cart" label="Third">
+        </q-collapsible>
+        <q-collapsible icon="shopping_cart" label="Third">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
+        </q-collapsible>
       </div>
 
       <p class="caption">With Item Delimiters</p>
       <div class="list item-delimiter">
-        <quasar-collapsible icon="explore" label="First">
+        <q-collapsible icon="explore" label="First">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="perm_identity" label="Second">
+        </q-collapsible>
+        <q-collapsible icon="perm_identity" label="Second">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="shopping_cart" label="Third">
+        </q-collapsible>
+        <q-collapsible icon="shopping_cart" label="Third">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
+        </q-collapsible>
       </div>
 
       <p class="caption">Preselected/Opened Collapsible</p>
       <div class="list item-delimiter">
-        <quasar-collapsible icon="explore" label="First">
+        <q-collapsible icon="explore" label="First">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="perm_identity" label="Second" opened>
+        </q-collapsible>
+        <q-collapsible icon="perm_identity" label="Second" opened>
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="shopping_cart" label="Third">
+        </q-collapsible>
+        <q-collapsible icon="shopping_cart" label="Third">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
+        </q-collapsible>
       </div>
 
       <p class="caption">Ubiquity. Using Cards as content.</p>
       <div class="list item-delimiter">
-        <quasar-collapsible icon="explore" label="First Card">
+        <q-collapsible icon="explore" label="First Card">
           <div class="card bg-primary text-white">
             <div class="card-title">
               Card Title
@@ -68,16 +68,16 @@
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             </div>
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="perm_identity" label="Second Card">
+        </q-collapsible>
+        <q-collapsible icon="perm_identity" label="Second Card">
           <div class="card">
             <img src="~assets/mountains.jpg">
             <div class="card-content">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             </div>
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="shopping_cart" label="Third Card">
+        </q-collapsible>
+        <q-collapsible icon="shopping_cart" label="Third Card">
           <div class="card">
             <div class="card-media">
               <img src="~assets/map.png">
@@ -120,7 +120,7 @@
               </button>
             </div>
           </div>
-        </quasar-collapsible>
+        </q-collapsible>
       </div>
     </div>
   </div>

dev/components/components/context-menu.vue

@@ -30,7 +30,7 @@
       </p>
     </div>
 
-    <quasar-context-menu ref="context">
+    <q-context-menu ref="context">
       <div class="list highlight" style="min-width: 150px; max-height: 300px;">
         <div
           class="item item-link two-lines item-delimiter"
@@ -43,7 +43,7 @@
           </div>
         </div>
       </div>
-    </quasar-context-menu>
+    </q-context-menu>
   </div>
 </template>
 

dev/components/components/fab.vue

@@ -9,25 +9,25 @@
       </p>
 
       <div class="column items-center" style="margin-top: 100px; margin-bottom: 100px;">
-        <quasar-fab classNames="purple" icon="keyboard_arrow_up" direction="up">
-          <quasar-small-fab class="white" @click.native="toast('mail')">mail</quasar-small-fab>
-          <quasar-small-fab class="white" @click.native="toast('alarm')">alarm</quasar-small-fab>
-        </quasar-fab>
+        <q-fab classNames="purple" icon="keyboard_arrow_up" direction="up">
+          <q-small-fab class="white" @click.native="toast('mail')">mail</q-small-fab>
+          <q-small-fab class="white" @click.native="toast('alarm')">alarm</q-small-fab>
+        </q-fab>
 
-        <quasar-fab icon="keyboard_arrow_left" direction="left">
-          <quasar-small-fab class="white" @click.native="toast('mail')">mail</quasar-small-fab>
-          <quasar-small-fab class="white" @click.native="toast('alarm')">alarm</quasar-small-fab>
-        </quasar-fab>
+        <q-fab icon="keyboard_arrow_left" direction="left">
+          <q-small-fab class="white" @click.native="toast('mail')">mail</q-small-fab>
+          <q-small-fab class="white" @click.native="toast('alarm')">alarm</q-small-fab>
+        </q-fab>
 
-        <quasar-fab classNames="secondary push" icon="keyboard_arrow_right" direction="right">
-          <quasar-small-fab class="primary" @click.native="toast('mail')">mail</quasar-small-fab>
-          <quasar-small-fab class="white" @click.native="toast('alarm')">alarm</quasar-small-fab>
-        </quasar-fab>
+        <q-fab classNames="secondary push" icon="keyboard_arrow_right" direction="right">
+          <q-small-fab class="primary" @click.native="toast('mail')">mail</q-small-fab>
+          <q-small-fab class="white" @click.native="toast('alarm')">alarm</q-small-fab>
+        </q-fab>
 
-        <quasar-fab classNames="tertiary glossy" icon="keyboard_arrow_down" direction="down">
-          <quasar-small-fab class="white" @click.native="toast('mail')">mail</quasar-small-fab>
-          <quasar-small-fab class="white" @click.native="toast('alarm')">alarm</quasar-small-fab>
-        </quasar-fab>
+        <q-fab classNames="tertiary glossy" icon="keyboard_arrow_down" direction="down">
+          <q-small-fab class="white" @click.native="toast('mail')">mail</q-small-fab>
+          <q-small-fab class="white" @click.native="toast('alarm')">alarm</q-small-fab>
+        </q-fab>
       </div>
 
       <p class="caption" style="margin-bottom: 100px;">
@@ -37,17 +37,17 @@
         You can close it by clicking/tapping on the whitey backdrop.
       </p>
 
-      <quasar-fab
+      <q-fab
         class="absolute-bottom-right"
         @click="alert()"
         classNames="primary"
         active-icon="alarm"
         direction="up"
         style="right: 18px; bottom: 18px;"
       >
-        <quasar-small-fab class="purple" @click.native="toast('mail')">mail</quasar-small-fab>
-        <quasar-small-fab class="secondary" @click.native="toast('alarm')">alarm</quasar-small-fab>
-      </quasar-fab>
+        <q-small-fab class="purple" @click.native="toast('mail')">mail</q-small-fab>
+        <q-small-fab class="secondary" @click.native="toast('alarm')">alarm</q-small-fab>
+      </q-fab>
     </div>
   </div>
 </template>

dev/components/components/image-gallery.vue

@@ -2,10 +2,10 @@
   <div>
     <div class="layout-padding">
       <h5>Gallery</h5>
-      <quasar-gallery :src="gallery"></quasar-gallery>
+      <q-gallery :src="gallery"></q-gallery>
 
       <h5>Gallery Slider</h5>
-      <quasar-gallery-slider :src="slider"></quasar-gallery>
+      <q-gallery-slider :src="slider"></q-gallery>
     </div>
   </div>
 </template>

dev/components/components/infinite-scroll.vue

@@ -4,7 +4,7 @@
       <p class="caption">Scroll down to see it in action.</p>
 
       <br>
-      <quasar-infinite-scroll :handler="refresher">
+      <q-infinite-scroll :handler="refresher">
         <p v-for="(item, index) in items" class="caption">
           <span class="label bg-secondary text-white shadow-1">
             {{ index + 1 }}
@@ -15,7 +15,7 @@
         <div class="row justify-center" style="margin-bottom: 50px;">
           <spinner name="dots" slot="message" :size="40"></spinner>
         </div>
-      </quasar-infinite-scroll>
+      </q-infinite-scroll>
     </div>
   </div>
 </template>

dev/components/components/modal.vue

@@ -22,13 +22,13 @@
       </div>
     </div>
 
-    <quasar-modal ref="basicModal" :content-css="{padding: '50px', minWidth: '50vw'}">
+    <q-modal ref="basicModal" :content-css="{padding: '50px', minWidth: '50vw'}">
       <h4>Basic Modal</h4>
       <p v-for="n in 25">Scroll down to close</p>
       <button class="primary" @click="$refs.basicModal.close()">Close</button>
-    </quasar-modal>
+    </q-modal>
 
-    <quasar-modal
+    <q-modal
       ref="eventsModal"
       @open="notify('open')"
       @escape-key="notify('escape-key')"
@@ -38,27 +38,27 @@
       <h4>Modal with Events</h4>
       <p v-for="n in 25">Scroll down to close</p>
       <button class="primary" @click="$refs.eventsModal.close()">Close</button>
-    </quasar-modal>
+    </q-modal>
 
-    <quasar-modal ref="layoutModal" :content-css="{minWidth: '80vw', minHeight: '80vh'}">
-      <quasar-layout>
+    <q-modal ref="layoutModal" :content-css="{minWidth: '80vw', minHeight: '80vh'}">
+      <q-layout>
         <div slot="header" class="toolbar">
           <button @click="$refs.layoutModal.close()">
             <i>keyboard_arrow_left</i>
           </button>
-          <quasar-toolbar-title :padding="1">
+          <q-toolbar-title :padding="1">
             Header
-          </quasar-toolbar-title>
+          </q-toolbar-title>
         </div>
 
         <div slot="header" class="toolbar primary">
-          <quasar-search class="primary"></quasar-search>
+          <q-search class="primary"></q-search>
         </div>
 
         <div slot="footer" class="toolbar">
-          <quasar-toolbar-title :padding="1">
+          <q-toolbar-title :padding="1">
             Footer
-          </quasar-toolbar-title>
+          </q-toolbar-title>
         </div>
 
         <div class="layout-view">
@@ -68,19 +68,19 @@
             <p class="caption" v-for="n in 15">This is a Modal presenting a Layout.</p>
           </div>
         </div>
-      </quasar-layout>
-    </quasar-modal>
+      </q-layout>
+    </q-modal>
 
-    <quasar-modal ref="minimizedModal" class="minimized" :content-css="{padding: '50px'}">
+    <q-modal ref="minimizedModal" class="minimized" :content-css="{padding: '50px'}">
       <h4>Minimized Modal</h4>
       <p>This one has backdrop on small screens too.</p>
       <button class="tertiary" @click="$refs.basicModal.close()">Close Me</button>
-    </quasar-modal>
+    </q-modal>
 
-    <quasar-modal ref="maximizedModal" class="maximized" :content-css="{padding: '50px'}">
+    <q-modal ref="maximizedModal" class="maximized" :content-css="{padding: '50px'}">
       <h4>Maximized Modal</h4><p>This one is maximized on bigger screens too.</p>
       <button class="tertiary" @click="$refs.maximizedModal.close()">Close Me</button>
-    </quasar-modal>
+    </q-modal>
   </div>
 </template>
 

dev/components/components/pagination.vue

@@ -13,10 +13,10 @@
         then hit <ENTER>
       </p>
 
-      <quasar-pagination v-model="page" :max="17"></quasar-pagination>
+      <q-pagination v-model="page" :max="17"></q-pagination>
 
       <p class="caption">Disabled State</p>
-      <quasar-pagination v-model="page" :max="17" disable></quasar-pagination>
+      <q-pagination v-model="page" :max="17" disable></q-pagination>
     </div>
   </div>
 </template>

dev/components/components/parallax.vue

@@ -9,37 +9,37 @@
       <p v-for="n in 7" class="par-text">{{loremipsum}}</p>
     </div>
 
-    <quasar-parallax :src="'statics/parallax1.jpg'" :height="200">
+    <q-parallax :src="'statics/parallax1.jpg'" :height="200">
       <div slot="loading">Loading...</div>
       <h1>Parallax  Title</h1>
-    </quasar-parallax>
+    </q-parallax>
 
     <div class="layout-padding">
       <p v-for="n in 7" class="par-text">{{loremipsum}}</p>
     </div>
 
-    <quasar-parallax :src="'statics/parallax2.jpg'">
+    <q-parallax :src="'statics/parallax2.jpg'">
       <div slot="loading">Loading...</div>
       <h1>Bridge</h1>
-    </quasar-parallax>
+    </q-parallax>
 
     <div class="layout-padding">
       <p v-for="n in 7" class="par-text">{{loremipsum}}</p>
     </div>
 
-    <quasar-parallax :src="'statics/parallax1.jpg'">
+    <q-parallax :src="'statics/parallax1.jpg'">
       <div slot="loading">Loading...</div>
       <h1>Title</h1>
-    </quasar-parallax>
+    </q-parallax>
 
     <div class="layout-padding">
       <p v-for="n in 7" class="par-text">{{loremipsum}}</p>
     </div>
 
-    <quasar-parallax :src="'statics/mountains.jpg'" :height="200">
+    <q-parallax :src="'statics/mountains.jpg'" :height="200">
       <div slot="loading">Loading...</div>
       <h1>Mountains</h1>
-    </quasar-parallax>
+    </q-parallax>
 
     <div class="layout-padding">
       <p v-for="n in 7" class="par-text">{{loremipsum}}</p>