npm - w-component-vue - Versions diffs - 2.1.80 → 2.1.83 - Mend

w-component-vue 2.1.80 → 2.1.83

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 (870) hide show

package/docs/examples/w-panel-chart_downloadPicture_downloadPictureBtnIconColor_downloadPictureBtnIconColorHover_downloadPictureBtnIconColorFocus.html DELETED Viewed

@@ -1,330 +0,0 @@
-<!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.80/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-panel-chart</span>
-        </div>
-        <div class="bk">
-            <div
-                class="item"
-            >downloadPicture &amp; downloadPictureBtnIconColor &amp; downloadPictureBtnIconColorHover &amp; downloadPictureBtnIconColorFocus &amp; downloadPictureBtnBackgroundColor &amp; downloadPictureBtnBackgroundColorHover &amp; downloadPictureBtnBackgroundColorFocus</div>
-            <w-panel-chart
-                :download-picture="true"
-                :download-picture-btn-icon-color="'#f48'"
-                :download-picture-btn-icon-color-hover="'#f26'"
-                :download-picture-btn-icon-color-focus="'#f26'"
-                :download-picture-btn-background-color="'rgba(255,200,200,0.3)'"
-                :download-picture-btn-background-color-hover="'rgba(255,200,200,0.5)'"
-                :download-picture-btn-background-color-focus="'rgba(255,200,200,0.5)'"
-                :options="WPanelChart.options1"
-            ></w-panel-chart>
-        </div>
-    </v-app>
-    <script>
-  //install
-  Vue.use(window["w-component-vue"]);
-  //initialize
-  new Vue({
-    el: "#app",
-    vuetify: new Vuetify(),
-    data: function() {
-      let df = function(d) {
-        let date = [];
-        let data = [];
-        for (let i = 0; i < d.length; i++) {
-          let v = d[i];
-          let now = new Date(v[0]);
-          let t = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join(
-            "-"
-          );
-          date.push(t);
-          data.push(v[1]);
-        }
-        return {
-          date: date,
-          data: data
-        };
-      };
-      let rDataAAPL = df(window.dataAAPL);
-      return {
-        WPanelChart: {
-          options1: {
-            chart: {
-              animation: false //關閉動畫
-            },
-            plotOptions: {
-              series: {
-                animation: false //關閉動畫
-              }
-            },
-            title: {
-              text: "AAPL Stock Price"
-            },
-            xAxis: {
-              type: "datetime"
-            },
-            yAxis: {
-              title: {
-                text: "Price"
-              }
-            },
-            tooltip: {
-              headerFormat:
-                '<div style="font-size:8pt;">{point.x:%Y/%m/%d %H:%M}</div><br/>',
-              pointFormat: " Price: <b>{point.y}</b>"
-            },
-            series: [
-              {
-                name: "AAPL",
-                data: window.dataAAPL,
-                tooltip: {
-                  valueDecimals: 2
-                }
-              }
-            ]
-          },
-          options2: {
-            // rangeSelector: {
-            //     enabled: true,
-            //     selected: 1
-            // },
-            title: {
-              text: "AAPL Stock Price"
-            },
-            xAxis: {
-              type: "datetime"
-            },
-            yAxis: {
-              title: {
-                text: "Price"
-              }
-            },
-            series: [
-              {
-                name: "AAPL",
-                data: window.dataAAPL,
-                tooltip: {
-                  valueDecimals: 2
-                }
-              }
-            ]
-          },
-          options3: {
-            tooltip: {
-              trigger: "axis",
-              position: function(pt) {
-                return [pt[0], "10%"];
-              }
-            },
-            title: {
-              left: "center",
-              text: "AAPL Stock Price"
-            },
-            toolbox: {
-              feature: {
-                dataZoom: {
-                  yAxisIndex: "none",
-                  title: {
-                    zoom: "Zoom",
-                    back: "Zoom Reset"
-                  }
-                },
-                restore: {
-                  title: "Restore"
-                },
-                saveAsImage: {
-                  title: "Download"
-                }
-              }
-            },
-            xAxis: {
-              type: "category",
-              boundaryGap: false,
-              data: rDataAAPL.date
-            },
-            yAxis: {
-              type: "value",
-              boundaryGap: [0, "100%"]
-            },
-            dataZoom: [
-              {
-                type: "inside",
-                start: 0,
-                end: 100
-              },
-              {
-                start: 0,
-                end: 10,
-                handleIcon:
-                  "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
-                handleSize: "80%",
-                handleStyle: {
-                  color: "#fff",
-                  shadowBlur: 3,
-                  shadowColor: "rgba(0, 0, 0, 0.6)",
-                  shadowOffsetX: 2,
-                  shadowOffsetY: 2
-                }
-              }
-            ],
-            series: [
-              {
-                name: "Price",
-                type: "line",
-                itemStyle: {
-                  color: "rgba(20, 20, 200, 0.5)"
-                },
-                data: rDataAAPL.data
-              }
-            ]
-          }
-        },
-        actions: []
-      };
-    },
-    mounted: function() {
-      return {};
-    },
-    computed: {},
-    methods: {}
-  });
-    </script>
-</body>
-</html>

package/docs/examples/w-panel-chart_downloadPicture_downloadPictureBtnTooltip.html DELETED Viewed

@@ -1,323 +0,0 @@
-<!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.80/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-panel-chart</span>
-        </div>
-        <div class="bk">
-            <div class="item">downloadPicture &amp; downloadPictureBtnTooltip</div>
-            <w-panel-chart
-                :download-picture="true"
-                :download-picture-btn-tooltip="'下載圖片'"
-                :options="WPanelChart.options1"
-            ></w-panel-chart>
-        </div>
-    </v-app>
-    <script>
-  //install
-  Vue.use(window["w-component-vue"]);
-  //initialize
-  new Vue({
-    el: "#app",
-    vuetify: new Vuetify(),
-    data: function() {
-      let df = function(d) {
-        let date = [];
-        let data = [];
-        for (let i = 0; i < d.length; i++) {
-          let v = d[i];
-          let now = new Date(v[0]);
-          let t = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join(
-            "-"
-          );
-          date.push(t);
-          data.push(v[1]);
-        }
-        return {
-          date: date,
-          data: data
-        };
-      };
-      let rDataAAPL = df(window.dataAAPL);
-      return {
-        WPanelChart: {
-          options1: {
-            chart: {
-              animation: false //關閉動畫
-            },
-            plotOptions: {
-              series: {
-                animation: false //關閉動畫
-              }
-            },
-            title: {
-              text: "AAPL Stock Price"
-            },
-            xAxis: {
-              type: "datetime"
-            },
-            yAxis: {
-              title: {
-                text: "Price"
-              }
-            },
-            tooltip: {
-              headerFormat:
-                '<div style="font-size:8pt;">{point.x:%Y/%m/%d %H:%M}</div><br/>',
-              pointFormat: " Price: <b>{point.y}</b>"
-            },
-            series: [
-              {
-                name: "AAPL",
-                data: window.dataAAPL,
-                tooltip: {
-                  valueDecimals: 2
-                }
-              }
-            ]
-          },
-          options2: {
-            // rangeSelector: {
-            //     enabled: true,
-            //     selected: 1
-            // },
-            title: {
-              text: "AAPL Stock Price"
-            },
-            xAxis: {
-              type: "datetime"
-            },
-            yAxis: {
-              title: {
-                text: "Price"
-              }
-            },
-            series: [
-              {
-                name: "AAPL",
-                data: window.dataAAPL,
-                tooltip: {
-                  valueDecimals: 2
-                }
-              }
-            ]
-          },
-          options3: {
-            tooltip: {
-              trigger: "axis",
-              position: function(pt) {
-                return [pt[0], "10%"];
-              }
-            },
-            title: {
-              left: "center",
-              text: "AAPL Stock Price"
-            },
-            toolbox: {
-              feature: {
-                dataZoom: {
-                  yAxisIndex: "none",
-                  title: {
-                    zoom: "Zoom",
-                    back: "Zoom Reset"
-                  }
-                },
-                restore: {
-                  title: "Restore"
-                },
-                saveAsImage: {
-                  title: "Download"
-                }
-              }
-            },
-            xAxis: {
-              type: "category",
-              boundaryGap: false,
-              data: rDataAAPL.date
-            },
-            yAxis: {
-              type: "value",
-              boundaryGap: [0, "100%"]
-            },
-            dataZoom: [
-              {
-                type: "inside",
-                start: 0,
-                end: 100
-              },
-              {
-                start: 0,
-                end: 10,
-                handleIcon:
-                  "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
-                handleSize: "80%",
-                handleStyle: {
-                  color: "#fff",
-                  shadowBlur: 3,
-                  shadowColor: "rgba(0, 0, 0, 0.6)",
-                  shadowOffsetX: 2,
-                  shadowOffsetY: 2
-                }
-              }
-            ],
-            series: [
-              {
-                name: "Price",
-                type: "line",
-                itemStyle: {
-                  color: "rgba(20, 20, 200, 0.5)"
-                },
-                data: rDataAAPL.data
-              }
-            ]
-          }
-        },
-        actions: []
-      };
-    },
-    mounted: function() {
-      return {};
-    },
-    computed: {},
-    methods: {}
-  });
-    </script>
-</body>
-</html>