w-component-vue 2.1.74 → 2.1.77

package/docs/examples/w-drawer_afloat_overlayOpacity.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.74/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.77/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -146,36 +146,22 @@
                     depressed
                     small
                     elevation="2"
-                    @click="WDrawer.bShow5=!WDrawer.bShow5"
-                >Show({{WDrawer.bShow5}})</v-btn>
+                    @click="WDrawer.bShow6=!WDrawer.bShow6"
+                >Show({{WDrawer.bShow6}})</v-btn>
             </div>
 
             <w-drawer
-                style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
-                v-model="WDrawer.bShow5"
+                style="width:500px; height:400px; border:1px solid #ddd;"
+                v-model="WDrawer.bShow6"
                 :afloat="true"
                 :overlay-opacity="0.1"
             >
                 <template v-slot:drawer>
-                    <v-list
-                        style="padding:0px; background:transparent; height:100%; border-right:1px solid #ddd;"
-                    >
-                        <v-list-item
-                            style="min-height:inherit; padding:10px;"
-                            :key="kitem"
-                            @click="function(){}"
-                            v-for="(item,kitem) in WDrawer.listItems"
-                        >
-                            <div style="display:flex; align-items:center;">
-                                <div
-                                    style="padding-right:10px; width:35px; text-align:center;"
-                                >
-                                    <v-icon>{{item.icon}}</v-icon>
-                                </div>
-                                <div>{{item.text}}</div>
-                            </div>
-                        </v-list-item>
-                    </v-list>
+                    <w-list-vertical
+                        style="height:100%;"
+                        :items="WDrawer.listItems"
+                        :item-active.sync="WDrawer.listItemActive"
+                    ></w-list-vertical>
                 </template>
 
                 <template v-slot:content>
@@ -205,7 +191,7 @@
         WDrawer: {
           title: "Article Title",
           content:
-            "Here is a article content, texts are from Vuetify. There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application's compiled size. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.",
+            "Here is an article content, texts are from Vuetify. There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application's compiled size. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.",
           listItems: [
             {
               text: "Interpreting",
@@ -230,16 +216,61 @@
             {
               text: "Chess-king",
               icon: "fas fa-chess-king"
+            },
+
+            {
+              text: "Calendar",
+              icon: "fas fa-calendar-alt"
+            },
+            {
+              text: "chart",
+              icon: "fas fa-chart-bar"
+            },
+            {
+              text: "Cloud-meatball",
+              icon: "fas fa-cloud-meatball"
+            },
+            {
+              text: "Cubes",
+              icon: "fas fa-cubes"
+            },
+            {
+              text: "Dungeon",
+              icon: "fas fa-dungeon"
+            }
+          ],
+          listPkgs: [
+            {
+              text: "Balance",
+              icon: "fas fa-balance-scale"
+            },
+            {
+              text: "Connection",
+              icon: "fas fa-bezier-curve"
+            },
+            {
+              text: "Issue",
+              icon: "fa-box-tissue"
             }
           ],
+          listItemActive: {
+            text: "Search",
+            icon: "fas fa-search"
+          },
+          listPkgActive: {
+            text: "Balance",
+            icon: "fas fa-balance-scale"
+          },
           bShow1: false,
           bShow2: false,
-          bShow3: false,
+          bShow3a: false,
+          bShow3b: false,
           bShow4: false,
           bShow5: false,
           bShow6: false,
           bShow7: false,
-          bShow8: false
+          bShow8: false,
+          bShow9: false
         },
         actions: [{}]
       };

package/docs/examples/w-drawer_default.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.74/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.77/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -151,29 +151,15 @@
             </div>
 
             <w-drawer
-                style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
+                style="width:500px; height:400px; border:1px solid #ddd;"
                 v-model="WDrawer.bShow1"
             >
                 <template v-slot:drawer>
-                    <v-list
-                        style="padding:0px; background:transparent; height:100%; border-right:1px solid #ddd;"
-                    >
-                        <v-list-item
-                            style="min-height:inherit; padding:10px;"
-                            :key="kitem"
-                            @click="function(){}"
-                            v-for="(item,kitem) in WDrawer.listItems"
-                        >
-                            <div style="display:flex; align-items:center;">
-                                <div
-                                    style="padding-right:10px; width:35px; text-align:center;"
-                                >
-                                    <v-icon>{{item.icon}}</v-icon>
-                                </div>
-                                <div>{{item.text}}</div>
-                            </div>
-                        </v-list-item>
-                    </v-list>
+                    <w-list-vertical
+                        style="height:100%; border-right:1px solid #ddd;"
+                        :items="WDrawer.listItems"
+                        :item-active.sync="WDrawer.listItemActive"
+                    ></w-list-vertical>
                 </template>
 
                 <template v-slot:content>
@@ -203,7 +189,7 @@
         WDrawer: {
           title: "Article Title",
           content:
-            "Here is a article content, texts are from Vuetify. There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application's compiled size. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.",
+            "Here is an article content, texts are from Vuetify. There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application's compiled size. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.",
           listItems: [
             {
               text: "Interpreting",
@@ -228,16 +214,61 @@
             {
               text: "Chess-king",
               icon: "fas fa-chess-king"
+            },
+
+            {
+              text: "Calendar",
+              icon: "fas fa-calendar-alt"
+            },
+            {
+              text: "chart",
+              icon: "fas fa-chart-bar"
+            },
+            {
+              text: "Cloud-meatball",
+              icon: "fas fa-cloud-meatball"
+            },
+            {
+              text: "Cubes",
+              icon: "fas fa-cubes"
+            },
+            {
+              text: "Dungeon",
+              icon: "fas fa-dungeon"
+            }
+          ],
+          listPkgs: [
+            {
+              text: "Balance",
+              icon: "fas fa-balance-scale"
+            },
+            {
+              text: "Connection",
+              icon: "fas fa-bezier-curve"
+            },
+            {
+              text: "Issue",
+              icon: "fa-box-tissue"
             }
           ],
+          listItemActive: {
+            text: "Search",
+            icon: "fas fa-search"
+          },
+          listPkgActive: {
+            text: "Balance",
+            icon: "fas fa-balance-scale"
+          },
           bShow1: false,
           bShow2: false,
-          bShow3: false,
+          bShow3a: false,
+          bShow3b: false,
           bShow4: false,
           bShow5: false,
           bShow6: false,
           bShow7: false,
-          bShow8: false
+          bShow8: false,
+          bShow9: false
         },
         actions: [{}]
       };

package/docs/examples/w-drawer_drawerWidth.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.74/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.77/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -151,30 +151,16 @@
             </div>
 
             <w-drawer
-                style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
+                style="width:500px; height:400px; border:1px solid #ddd;"
                 v-model="WDrawer.bShow2"
                 :drawer-width="300"
             >
                 <template v-slot:drawer>
-                    <v-list
-                        style="padding:0px; background:transparent; height:100%; border-right:1px solid #ddd;"
-                    >
-                        <v-list-item
-                            style="min-height:inherit; padding:10px;"
-                            :key="kitem"
-                            @click="function(){}"
-                            v-for="(item,kitem) in WDrawer.listItems"
-                        >
-                            <div style="display:flex; align-items:center;">
-                                <div
-                                    style="padding-right:10px; width:35px; text-align:center;"
-                                >
-                                    <v-icon>{{item.icon}}</v-icon>
-                                </div>
-                                <div>{{item.text}}</div>
-                            </div>
-                        </v-list-item>
-                    </v-list>
+                    <w-list-vertical
+                        style="height:100%; border-right:1px solid #ddd;"
+                        :items="WDrawer.listItems"
+                        :item-active.sync="WDrawer.listItemActive"
+                    ></w-list-vertical>
                 </template>
 
                 <template v-slot:content>
@@ -204,7 +190,7 @@
         WDrawer: {
           title: "Article Title",
           content:
-            "Here is a article content, texts are from Vuetify. There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application's compiled size. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.",
+            "Here is an article content, texts are from Vuetify. There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application's compiled size. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.",
           listItems: [
             {
               text: "Interpreting",
@@ -229,16 +215,61 @@
             {
               text: "Chess-king",
               icon: "fas fa-chess-king"
+            },
+
+            {
+              text: "Calendar",
+              icon: "fas fa-calendar-alt"
+            },
+            {
+              text: "chart",
+              icon: "fas fa-chart-bar"
+            },
+            {
+              text: "Cloud-meatball",
+              icon: "fas fa-cloud-meatball"
+            },
+            {
+              text: "Cubes",
+              icon: "fas fa-cubes"
+            },
+            {
+              text: "Dungeon",
+              icon: "fas fa-dungeon"
+            }
+          ],
+          listPkgs: [
+            {
+              text: "Balance",
+              icon: "fas fa-balance-scale"
+            },
+            {
+              text: "Connection",
+              icon: "fas fa-bezier-curve"
+            },
+            {
+              text: "Issue",
+              icon: "fa-box-tissue"
             }
           ],
+          listItemActive: {
+            text: "Search",
+            icon: "fas fa-search"
+          },
+          listPkgActive: {
+            text: "Balance",
+            icon: "fas fa-balance-scale"
+          },
           bShow1: false,
           bShow2: false,
-          bShow3: false,
+          bShow3a: false,
+          bShow3b: false,
           bShow4: false,
           bShow5: false,
           bShow6: false,
           bShow7: false,
-          bShow8: false
+          bShow8: false,
+          bShow9: false
         },
         actions: [{}]
       };

package/docs/examples/w-drawer_mode.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.74/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.77/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -146,35 +146,21 @@
                     depressed
                     small
                     elevation="2"
-                    @click="WDrawer.bShow3=!WDrawer.bShow3"
-                >Show({{WDrawer.bShow3}})</v-btn>
+                    @click="WDrawer.bShow4=!WDrawer.bShow4"
+                >Show({{WDrawer.bShow4}})</v-btn>
             </div>
 
             <w-drawer
-                style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
-                v-model="WDrawer.bShow3"
+                style="width:500px; height:400px; border:1px solid #ddd;"
+                v-model="WDrawer.bShow4"
                 :mode="'from-right'"
             >
                 <template v-slot:drawer>
-                    <v-list
-                        style="padding:0px; background:transparent; height:100%; border-left:1px solid #ddd;"
-                    >
-                        <v-list-item
-                            style="min-height:inherit; padding:10px;"
-                            :key="kitem"
-                            @click="function(){}"
-                            v-for="(item,kitem) in WDrawer.listItems"
-                        >
-                            <div style="display:flex; align-items:center;">
-                                <div
-                                    style="padding-right:10px; width:35px; text-align:center;"
-                                >
-                                    <v-icon>{{item.icon}}</v-icon>
-                                </div>
-                                <div>{{item.text}}</div>
-                            </div>
-                        </v-list-item>
-                    </v-list>
+                    <w-list-vertical
+                        style="height:100%; border-left:1px solid #ddd;"
+                        :items="WDrawer.listItems"
+                        :item-active.sync="WDrawer.listItemActive"
+                    ></w-list-vertical>
                 </template>
 
                 <template v-slot:content>
@@ -204,7 +190,7 @@
         WDrawer: {
           title: "Article Title",
           content:
-            "Here is a article content, texts are from Vuetify. There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application's compiled size. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.",
+            "Here is an article content, texts are from Vuetify. There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application's compiled size. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.",
           listItems: [
             {
               text: "Interpreting",
@@ -229,16 +215,61 @@
             {
               text: "Chess-king",
               icon: "fas fa-chess-king"
+            },
+
+            {
+              text: "Calendar",
+              icon: "fas fa-calendar-alt"
+            },
+            {
+              text: "chart",
+              icon: "fas fa-chart-bar"
+            },
+            {
+              text: "Cloud-meatball",
+              icon: "fas fa-cloud-meatball"
+            },
+            {
+              text: "Cubes",
+              icon: "fas fa-cubes"
+            },
+            {
+              text: "Dungeon",
+              icon: "fas fa-dungeon"
+            }
+          ],
+          listPkgs: [
+            {
+              text: "Balance",
+              icon: "fas fa-balance-scale"
+            },
+            {
+              text: "Connection",
+              icon: "fas fa-bezier-curve"
+            },
+            {
+              text: "Issue",
+              icon: "fa-box-tissue"
             }
           ],
+          listItemActive: {
+            text: "Search",
+            icon: "fas fa-search"
+          },
+          listPkgActive: {
+            text: "Balance",
+            icon: "fas fa-balance-scale"
+          },
           bShow1: false,
           bShow2: false,
-          bShow3: false,
+          bShow3a: false,
+          bShow3b: false,
           bShow4: false,
           bShow5: false,
           bShow6: false,
           bShow7: false,
-          bShow8: false
+          bShow8: false,
+          bShow9: false
         },
         actions: [{}]
       };