w-component-vue 2.1.73 → 2.1.76

package/docs/examples/w-dialog_scrollable.html

@@ -37,7 +37,7 @@
 
     <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
     <link
-        href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css"
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css"
         rel="stylesheet"
     />
 
@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.73/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.76/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

@@ -37,7 +37,7 @@
 
     <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
     <link
-        href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css"
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css"
         rel="stylesheet"
     />
 
@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.73/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.76/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

@@ -37,7 +37,7 @@
 
     <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
     <link
-        href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css"
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css"
         rel="stylesheet"
     />
 
@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.73/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.76/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

@@ -37,7 +37,7 @@
 
     <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
     <link
-        href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css"
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css"
         rel="stylesheet"
     />
 
@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.73/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.76/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

@@ -37,7 +37,7 @@
 
     <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
     <link
-        href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css"
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css"
         rel="stylesheet"
     />
 
@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.73/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.76/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

@@ -37,7 +37,7 @@
 
     <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
     <link
-        href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css"
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css"
         rel="stylesheet"
     />
 
@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.73/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.76/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

@@ -0,0 +1,285 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>w-component-vue</title>
+
+    <!-- @babel/polyfill -->
+    <script
+        nomodule
+        src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
+    ></script>
+
+    <!-- vue -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
+
+    <!-- extractHtml已自動添加@babel/polyfill與vue -->
+
+    <!-- vuetify -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/vuetify@2.5.1/dist/vuetify.min.css"
+        rel="stylesheet"
+    />
+    <script
+        src="https://cdn.jsdelivr.net/npm/vuetify@2.5.1/dist/vuetify.min.js"
+    ></script>
+
+    <!-- fontawesome -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css"
+        rel="stylesheet"
+    />
+
+    <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css"
+        rel="stylesheet"
+    />
+
+    <!-- google, 各組件使用mdi/js故不需引用 -->
+    <link
+        _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+        rel="stylesheet"
+    />
+    <link
+        _href="https://fonts.googleapis.com/css?family=Material+Icons"
+        rel="stylesheet"
+    />
+
+    <!-- data -->
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataAAPL.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataUSD2EUR.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataTemperature.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataHousePriceArea.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataFlare.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataRain.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.13/res/data/dataRainClip.js"
+    ></script>
+    <script>
+  //save in window
+  window.dataAAPL = dataAAPL;
+  window.dataUSD2EUR = dataUSD2EUR;
+  window.dataTemperature = dataTemperature;
+  window.dataHousePriceArea = dataHousePriceArea;
+  window.dataFlare = dataFlare;
+  window.dataRain = dataRain;
+  window.dataRainClip = dataRainClip;
+    </script>
+
+    <!-- w-component-vue -->
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.1.76/dist/w-component-vue.umd.js"></script>
+
+    <style>
+  .v-application--wrap {
+    /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
+    width: 100vw;
+    max-width: 100vw;
+    font-family: inherit;
+    background-color: #fff;
+  }
+  .item {
+    /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
+    border-left: 3px solid #ffba75;
+    margin: 5px 5px 8px 0px;
+    padding: 3px 3px 5px 10px;
+    font-size: 0.9rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .head1 {
+    margin: 0px;
+    padding: 0px 0px 20px 0px;
+    font-size: 2.5rem;
+  }
+  .bk {
+    vertical-align: top;
+    margin: 10px 0px 0px 0px;
+    padding: 0px 0px 60px 0px;
+  }
+  @media screen and (min-width: 1000px) {
+    /* 寬版 */
+    .bk {
+      display: inline-block;
+      margin: 0px 80px 0px 0px;
+    }
+    .dz {
+      width: 400px;
+    }
+  }
+    </style>
+</head>
+<body
+    style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
+>
+    <v-app id="app" style="font-family:inherit; padding:0px 30px;">
+        <div class="head1">
+            <span
+                style="cursor:pointer;"
+                title="open for copy link to view component"
+                onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
+            >w-drawer</span>
+        </div>
+        <div class="bk">
+            <div class="item">afloat</div>
+
+            <div style="padding-bottom:10px;">
+                <v-btn
+                    depressed
+                    small
+                    elevation="2"
+                    @click="WDrawer.bShow5=!WDrawer.bShow5"
+                >Show({{WDrawer.bShow5}})</v-btn>
+            </div>
+
+            <w-drawer
+                style="width:500px; height:400px; border:1px solid #ddd;"
+                v-model="WDrawer.bShow5"
+                :afloat="true"
+            >
+                <template v-slot:drawer>
+                    <w-list-vertical
+                        style="height:100%;"
+                        :items="WDrawer.listItems"
+                        :item-active.sync="WDrawer.listItemActive"
+                    ></w-list-vertical>
+                </template>
+
+                <template v-slot:content>
+                    <div style="height:100%; overflow-y:auto;">
+                        <div
+                            style="padding:10px; font-size:1.2rem;"
+                        >{{WDrawer.title}}</div>
+                        <div
+                            style="padding:0px 10px 10px 10px; font-size:0.9rem;"
+                        >{{WDrawer.content}}</div>
+                    </div>
+                </template>
+            </w-drawer>
+        </div>
+    </v-app>
+
+    <script>
+  //install
+  Vue.use(window["w-component-vue"]);
+
+  //initialize
+  new Vue({
+    el: "#app",
+    vuetify: new Vuetify(),
+    data: function() {
+      return {
+        WDrawer: {
+          title: "Article Title",
+          content:
+            "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",
+              icon: "fas fa-american-sign-language-interpreting"
+            },
+            {
+              text: "Search",
+              icon: "fas fa-search"
+            },
+            {
+              text: "Binoculars",
+              icon: "fas fa-binoculars"
+            },
+            {
+              text: "Building",
+              icon: "fa-regular fa-building"
+            },
+            {
+              text: "Tachometer-alt",
+              icon: "fas fa-tachometer-alt"
+            },
+            {
+              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,
+          bShow3a: false,
+          bShow3b: false,
+          bShow4: false,
+          bShow5: false,
+          bShow6: false,
+          bShow7: false,
+          bShow8: false,
+          bShow9: false
+        },
+        actions: [{}]
+      };
+    },
+    mounted: function() {
+      return {};
+    },
+    computed: {},
+    methods: {}
+  });
+    </script>
+</body>
+</html>