w-component-vue 2.1.74 → 2.1.77

package/docs/examples/w-dialog_scrollable.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 {
@@ -222,7 +222,7 @@
           ],
           title: "Popup Dialog",
           text1: "Article Title",
-          text2: "Here is a article content, texts are from Vuetify.",
+          text2: "Here is an article content, texts are from Vuetify.",
           text3:
             "Vuetify is a progressive framework that attempts to push web development to the next level. In order to best accomplish this task, some sacrifices had to be made in terms of support for older versions of Internet Explorer. This is not an exhaustive list of compatible browsers, but the main targeted ones.",
           text4:

package/docs/examples/w-dialog_separate for slot content.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 {
@@ -226,7 +226,7 @@
           ],
           title: "Popup Dialog",
           text1: "Article Title",
-          text2: "Here is a article content, texts are from Vuetify.",
+          text2: "Here is an article content, texts are from Vuetify.",
           text3:
             "Vuetify is a progressive framework that attempts to push web development to the next level. In order to best accomplish this task, some sacrifices had to be made in terms of support for older versions of Internet Explorer. This is not an exhaustive list of compatible browsers, but the main targeted ones.",
           text4:

package/docs/examples/w-dialog_slot content.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 {
@@ -221,7 +221,7 @@
           ],
           title: "Popup Dialog",
           text1: "Article Title",
-          text2: "Here is a article content, texts are from Vuetify.",
+          text2: "Here is an article content, texts are from Vuetify.",
           text3:
             "Vuetify is a progressive framework that attempts to push web development to the next level. In order to best accomplish this task, some sacrifices had to be made in terms of support for older versions of Internet Explorer. This is not an exhaustive list of compatible browsers, but the main targeted ones.",
           text4:

package/docs/examples/w-dialog_slot header-left_header-right.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 {
@@ -243,7 +243,7 @@
           ],
           title: "Popup Dialog",
           text1: "Article Title",
-          text2: "Here is a article content, texts are from Vuetify.",
+          text2: "Here is an article content, texts are from Vuetify.",
           text3:
             "Vuetify is a progressive framework that attempts to push web development to the next level. In order to best accomplish this task, some sacrifices had to be made in terms of support for older versions of Internet Explorer. This is not an exhaustive list of compatible browsers, but the main targeted ones.",
           text4:

package/docs/examples/w-dialog_table in slot content.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 {
@@ -288,7 +288,7 @@
           ],
           title: "Popup Dialog",
           text1: "Article Title",
-          text2: "Here is a article content, texts are from Vuetify.",
+          text2: "Here is an article content, texts are from Vuetify.",
           text3:
             "Vuetify is a progressive framework that attempts to push web development to the next level. In order to best accomplish this task, some sacrifices had to be made in terms of support for older versions of Internet Explorer. This is not an exhaustive list of compatible browsers, but the main targeted ones.",
           text4:

package/docs/examples/w-dialog_title.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 {
@@ -221,7 +221,7 @@
           ],
           title: "Popup Dialog",
           text1: "Article Title",
-          text2: "Here is a article content, texts are from Vuetify.",
+          text2: "Here is an article content, texts are from Vuetify.",
           text3:
             "Vuetify is a progressive framework that attempts to push web development to the next level. In order to best accomplish this task, some sacrifices had to be made in terms of support for older versions of Internet Explorer. This is not an exhaustive list of compatible browsers, but the main targeted ones.",
           text4:

package/docs/examples/w-drawer_afloat.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,33 +146,21 @@
                     depressed
                     small
                     elevation="2"
-                    @click="WDrawer.bShow4=!WDrawer.bShow4"
-                >Show({{WDrawer.bShow4}})</v-btn>
+                    @click="WDrawer.bShow5=!WDrawer.bShow5"
+                >Show({{WDrawer.bShow5}})</v-btn>
             </div>
 
             <w-drawer
-                style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
-                v-model="WDrawer.bShow4"
+                style="width:500px; height:400px; border:1px solid #ddd;"
+                v-model="WDrawer.bShow5"
                 :afloat="true"
             >
                 <template v-slot:drawer>
-                    <v-list style="padding:0px; background:transparent;">
-                        <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>
@@ -202,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",
@@ -227,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_afloat_afloatByFix.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,34 +146,22 @@
                     depressed
                     small
                     elevation="2"
-                    @click="WDrawer.bShow7=!WDrawer.bShow7"
-                >Show({{WDrawer.bShow7}})</v-btn>
+                    @click="WDrawer.bShow8=!WDrawer.bShow8"
+                >Show({{WDrawer.bShow8}})</v-btn>
             </div>
 
             <w-drawer
-                style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
-                v-model="WDrawer.bShow7"
+                style="width:500px; height:400px; border:1px solid #ddd;"
+                v-model="WDrawer.bShow8"
                 :afloat="true"
                 :afloat-by-fix="true"
             >
                 <template v-slot:drawer>
-                    <v-list style="padding:0px; background:transparent;">
-                        <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>
@@ -203,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",
@@ -228,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_afloat_afloatByFix_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,23 @@
                     depressed
                     small
                     elevation="2"
-                    @click="WDrawer.bShow8=!WDrawer.bShow8"
-                >Show({{WDrawer.bShow8}})</v-btn>
+                    @click="WDrawer.bShow9=!WDrawer.bShow9"
+                >Show({{WDrawer.bShow9}})</v-btn>
             </div>
 
             <w-drawer
-                style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
-                v-model="WDrawer.bShow8"
+                style="width:500px; height:400px; border:1px solid #ddd;"
+                v-model="WDrawer.bShow9"
                 :afloat="true"
                 :afloat-by-fix="true"
                 :mode="'from-right'"
             >
                 <template v-slot:drawer>
-                    <v-list style="padding:0px; background:transparent;">
-                        <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>
@@ -204,7 +192,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 +217,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_afloat_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,34 +146,22 @@
                     depressed
                     small
                     elevation="2"
-                    @click="WDrawer.bShow6=!WDrawer.bShow6"
-                >Show({{WDrawer.bShow6}})</v-btn>
+                    @click="WDrawer.bShow7=!WDrawer.bShow7"
+                >Show({{WDrawer.bShow7}})</v-btn>
             </div>
 
             <w-drawer
-                style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
-                v-model="WDrawer.bShow6"
+                style="width:500px; height:400px; border:1px solid #ddd;"
+                v-model="WDrawer.bShow7"
                 :afloat="true"
                 :mode="'from-right'"
             >
                 <template v-slot:drawer>
-                    <v-list style="padding:0px; background:transparent;">
-                        <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>
@@ -203,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",
@@ -228,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: [{}]
       };