npm - w-component-vue - Versions diffs - 2.3.21 → 2.3.23 - Mend

w-component-vue 2.3.21 → 2.3.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1238) hide show

package/docs/examples/w-list-check_enableQuery_querySepLineColor_querySepLineWidth.html ADDED Viewed

@@ -0,0 +1,384 @@
+<!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.6.14/dist/vuetify.min.css"
+        rel="stylesheet"
+    />
+    <script
+        src="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/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@7.2.96/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.20/res/data/dataAAPL.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataUSD2EUR.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataTemperature.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataHousePriceArea.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataFlare.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataRain.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/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.3.23/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: #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;
+    padding: 10px 0px 60px 0px;
+  }
+  @media screen and (min-width: 1000px) {
+    /* 寬版 */
+    .bk {
+      display: inline-block;
+      margin: 0px 80px 0px 0px;
+    }
+  }
+    </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-list-check</span>
+        </div>
+        <div class="bk">
+            <div
+                class="item"
+            >enableQuery &amp; querySepLineColor &amp; querySepLineWidth</div>
+            <div style="display:inline-block; border:1px dashed #ddd;">
+                <w-list-check
+                    style="height:400px; width:250px;"
+                    :items="WListCheck.itemsObj"
+                    v-model="WListCheck.itemsObjChecks"
+                    :enable-query="true"
+                    :query-sep-line-color="'#dde'"
+                    :query-sep-line-width="3"
+                ></w-list-check>
+            </div>
+        </div>
+    </v-app>
+    <script>
+  //install
+  Vue.use(window["w-component-vue"]);
+  //initialize
+  new Vue({
+    el: "#app",
+    vuetify: new Vuetify(),
+    data: function() {
+      return {
+        WListCheck: {
+          itemsString: [
+            "Real-Time",
+            "Audience",
+            "Conversions",
+            "Management",
+            "Settings",
+            "Actions"
+          ],
+          itemsStringChecks: ["Audience", "Actions"],
+          itemsObj: [
+            {
+              text: "Real-Time",
+              icon: "mdi-stack-overflow",
+              type: "Default"
+            },
+            {
+              text: "Audience",
+              icon: "mdi-book-music-outline",
+              type: "Default"
+            },
+            {
+              text: "Conversions",
+              icon: "mdi-charity",
+              type: "Default"
+            },
+            {
+              text: "Management",
+              icon: "mdi-lightbulb-group-outline",
+              type: "Default"
+            },
+            {
+              text: "Settings",
+              icon: "mdi-message-cog-outline",
+              type: "Primary"
+            },
+            {
+              text: "Actions",
+              icon: "mdi-gesture-double-tap",
+              type: "Primary"
+            }
+          ],
+          itemsObjCheck: {
+            text: "Audience",
+            icon: "mdi-book-music-outline",
+            type: "Default"
+          },
+          itemsObjChecks: [
+            {
+              text: "Audience",
+              icon: "mdi-book-music-outline",
+              type: "Default"
+            },
+            {
+              text: "Actions",
+              icon: "mdi-gesture-double-tap",
+              type: "Primary"
+            }
+          ],
+          itemsObjLarge: [
+            {
+              text: "Real-Time-1",
+              icon: "mdi-stack-overflow"
+            },
+            {
+              text: "Audience-1",
+              icon: "mdi-book-music-outline"
+            },
+            {
+              text: "Conversions-1",
+              icon: "mdi-charity"
+            },
+            {
+              text: "Management-1",
+              icon: "mdi-lightbulb-group-outline"
+            },
+            {
+              text: "Settings-1",
+              icon: "mdi-message-cog-outline"
+            },
+            {
+              text: "Actions-1",
+              icon: "mdi-gesture-double-tap"
+            },
+            {
+              text: "Real-Time-2",
+              icon: "mdi-stack-overflow"
+            },
+            {
+              text: "Audience-2",
+              icon: "mdi-book-music-outline"
+            },
+            {
+              text: "Conversions-2",
+              icon: "mdi-charity"
+            },
+            {
+              text: "Management-2",
+              icon: "mdi-lightbulb-group-outline"
+            },
+            {
+              text: "Settings-2",
+              icon: "mdi-message-cog-outline"
+            },
+            {
+              text: "Actions-2",
+              icon: "mdi-gesture-double-tap"
+            }
+          ],
+          itemsObjLargeChecks: [
+            {
+              text: "Real-Time-1",
+              icon: "mdi-stack-overflow"
+            },
+            {
+              text: "Management-1",
+              icon: "mdi-lightbulb-group-outline"
+            }
+          ],
+          itemsObjForKey: [
+            {
+              name: "Real-Time",
+              path: "mdi-stack-overflow"
+            },
+            {
+              name: "Audience",
+              path: "mdi-book-music-outline"
+            },
+            {
+              name: "Conversions",
+              path: "mdi-charity"
+            },
+            {
+              name: "Management",
+              path: "mdi-lightbulb-group-outline"
+            },
+            {
+              name: "Settings",
+              path: "mdi-message-cog-outline"
+            },
+            {
+              name: "Actions",
+              path: "mdi-gesture-double-tap"
+            }
+          ],
+          itemsObjForKeyChecks: [
+            {
+              text: "Audience",
+              icon: "mdi-book-music-outline"
+            },
+            {
+              text: "Actions",
+              icon: "mdi-gesture-double-tap"
+            }
+          ],
+          itemsObjForNoEditable: [
+            {
+              text: "Real-Time",
+              icon: "mdi-stack-overflow",
+              type: "Default",
+              editable: true
+            },
+            {
+              text: "Audience",
+              icon: "mdi-book-music-outline",
+              type: "Default",
+              editable: true
+            },
+            {
+              text: "Conversions",
+              icon: "mdi-charity",
+              type: "Default",
+              editable: false
+            },
+            {
+              text: "Management",
+              icon: "mdi-lightbulb-group-outline",
+              type: "Default",
+              editable: true
+            },
+            {
+              text: "Settings",
+              icon: "mdi-message-cog-outline",
+              type: "Primary",
+              editable: false
+            },
+            {
+              text: "Actions",
+              icon: "mdi-gesture-double-tap",
+              type: "Primary",
+              editable: true
+            }
+          ],
+          itemsObjForNoEditableChecks: [
+            {
+              text: "Audience",
+              icon: "mdi-book-music-outline",
+              type: "Default",
+              editable: true
+            },
+            {
+              text: "Actions",
+              icon: "mdi-gesture-double-tap",
+              type: "Primary",
+              editable: true
+            }
+          ]
+        },
+        actions: []
+      };
+    },
+    mounted: function() {
+      return {};
+    },
+    computed: {},
+    methods: {}
+  });
+    </script>
+</body>
+</html>