npm - w-component-vue - Versions diffs - 2.3.35 → 2.3.37 - Mend

w-component-vue 2.3.35 → 2.3.37

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

package/docs/examples/w-segments-vertical_slot support-right_width_paddingStyle_segmentBackgroundType.html ADDED Viewed

@@ -0,0 +1,498 @@
+<!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.22/res/data/dataAAPL.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataUSD2EUR.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataTemperature.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataHousePriceArea.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataFlare.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataRain.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataRainClip.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataCivilSoilCodeIcon.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;
+  window.dataCivilSoilCodeIcon = dataCivilSoilCodeIcon;
+    </script>
+    <!-- w-component-vue -->
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.37/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-segments-vertical</span>
+        </div>
+        <div class="bk">
+            <div
+                class="item"
+            >slot support-right &amp; width &amp; paddingStyle &amp; segmentBackgroundType &amp; funSegmentBackgroundImage &amp; segmentBorderColor &amp; tickSize &amp; segmentSize &amp; axisColor &amp; tickColor &amp; keyValueStart &amp; keyValueEnd &amp; keyText &amp; alignEnd &amp; textShift &amp; title</div>
+            <w-segments-vertical
+                :items="WSegmentsVertical.itemLayers"
+                :width="340"
+                :padding-style="{
+                        top: 10,
+                        right: 0,
+                        bottom: 10,
+                        left: 80,
+                    }"
+                :tick-size="30"
+                :segment-size="50"
+                :segment-background-type="'image'"
+                :fun-segment-background-image="getSegmentBackgroundIcon"
+                :segment-border-color="{v:'transparent',h:'#444'}"
+                :axis-color="'transparent'"
+                :tick-color="'#444'"
+                :key-value-start="'depthStart'"
+                :key-value-end="'depthEnd'"
+                :key-text="'description'"
+                :align-end="'left'"
+                :text-shift="80"
+                :title="'Depth(m)'"
+            >
+                <template v-slot:support-right="props">
+                    <div
+                        :style="`padding-top:${props.convertValueToY(2.6)}px;`"
+                    >
+                        <!-- anchor line, 圖標與數值寬度38px -->
+                        <div style="_width:38px; _border-top:1px solid #f26;">
+                            <!-- wl vertical center line, 圖標與數值垂直中線距左側19px -->
+                            <div style="padding-left:19px;">
+                                <div style="position:relative;">
+                                    <!-- water level text -->
+                                    <div
+                                        style="position:absolute; top:-30px; left:1px; transform:translateX(-50%);"
+                                    >
+                                        <div
+                                            style="white-space:nowrap; transform-origin:center; transform:scale(0.6);"
+                                        >GL 2.6m</div>
+                                    </div>
+                                    <!-- water level icon -->
+                                    <div
+                                        style="position:absolute; top:-15px; left:0px; transform:translateX(-50%);"
+                                    >
+                                        <svg
+                                            width="14"
+                                            height="12"
+                                            viewBox="0 0 14 12"
+                                        >
+                                            <polygon
+                                                points="2,0 12,0 7,9"
+                                                style="fill:rgba(0,0,0,0);stroke:#000;stroke-width:1"
+                                            />
+                                            <line
+                                                x1="0"
+                                                y1="9"
+                                                x2="14"
+                                                y2="9"
+                                                style="stroke:#000;stroke-width:1"
+                                            />
+                                            <line
+                                                x1="4"
+                                                y1="11"
+                                                x2="11"
+                                                y2="11"
+                                                style="stroke:#000;stroke-width:1"
+                                            />
+                                        </svg>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </w-segments-vertical>
+        </div>
+    </v-app>
+    <script>
+  //install
+  Vue.use(window["w-component-vue"]);
+  //initialize
+  new Vue({
+    el: "#app",
+    vuetify: new Vuetify(),
+    data: function() {
+      return {
+        WSegmentsVertical: {
+          items: [
+            {
+              valueStart: 1979,
+              valueEnd: 1985,
+              text: "Myriel",
+              type: "Audience",
+              icon: "mdi-stack-overflow"
+            },
+            {
+              valueStart: 1986,
+              valueEnd: 1992,
+              text: "Napoleon",
+              type: "Audience",
+              icon: "mdi-book-music-outline"
+            },
+            {
+              valueStart: 1995,
+              valueEnd: 2000,
+              text: "MlleBaptistine",
+              type: "Conversions",
+              icon: "mdi-charity"
+            },
+            {
+              valueStart: 2001,
+              valueEnd: 2007,
+              text: "MmeMagloire",
+              type: "Management",
+              icon: "mdi-lightbulb-group-outline"
+            },
+            {
+              valueStart: 2009,
+              valueEnd: 2012,
+              text: "CountessDeLo",
+              type: "Conversions",
+              icon: "mdi-message-cog-outline"
+            },
+            {
+              valueStart: 2013,
+              valueEnd: 2015,
+              text: "Geborand",
+              type: "Actions",
+              icon: "mdi-gesture-double-tap"
+            },
+            {
+              valueStart: 2017,
+              valueEnd: 2018,
+              text: "Champtercier",
+              type: "Actions",
+              icon: "mdi-pencil-outline"
+            },
+            {
+              valueStart: 2018,
+              valueEnd: 2020,
+              text: "Cravatte",
+              type: "Management",
+              icon: "mdi-lightbulb-on-outline"
+            }
+          ],
+          itemsConti: [
+            {
+              valueStart: 1979,
+              valueEnd: 1985,
+              text: "Myriel",
+              type: "Audience",
+              icon: "mdi-stack-overflow"
+            },
+            {
+              valueStart: 1985,
+              valueEnd: 1992,
+              text: "Napoleon",
+              type: "Audience",
+              icon: "mdi-book-music-outline"
+            },
+            {
+              valueStart: 1992,
+              valueEnd: 2000,
+              text: "MlleBaptistine",
+              type: "Conversions",
+              icon: "mdi-charity"
+            },
+            {
+              valueStart: 2000,
+              valueEnd: 2007,
+              text: "MmeMagloire",
+              type: "Management",
+              icon: "mdi-lightbulb-group-outline"
+            },
+            {
+              valueStart: 2007,
+              valueEnd: 2012,
+              text: "CountessDeLo",
+              type: "Conversions",
+              icon: "mdi-message-cog-outline"
+            },
+            {
+              valueStart: 2012,
+              valueEnd: 2015,
+              text: "Geborand",
+              type: "Actions",
+              icon: "mdi-gesture-double-tap"
+            },
+            {
+              valueStart: 2015,
+              valueEnd: 2018,
+              text: "Champtercier",
+              type: "Actions",
+              icon: "mdi-pencil-outline"
+            },
+            {
+              valueStart: 2018,
+              valueEnd: 2020,
+              text: "Cravatte",
+              type: "Management",
+              icon: "mdi-lightbulb-on-outline"
+            }
+          ],
+          itemsDepth: [
+            {
+              depthStart: 0,
+              depthEnd: 0.6,
+              kind: "Sand"
+            },
+            {
+              depthStart: 1,
+              depthEnd: 1.4,
+              kind: "Clay"
+            },
+            {
+              depthStart: 1.6,
+              depthEnd: 2.4,
+              kind: "Silt"
+            },
+            {
+              depthStart: 2.7,
+              depthEnd: 3.2,
+              kind: "Sand"
+            },
+            {
+              depthStart: 3.5,
+              depthEnd: 4.7,
+              kind: "Clay"
+            },
+            {
+              depthStart: 5,
+              depthEnd: 5.3,
+              kind: "Silt"
+            },
+            {
+              depthStart: 5.6,
+              depthEnd: 6,
+              kind: "Sand"
+            },
+            {
+              depthStart: 6.7,
+              depthEnd: 7.2,
+              kind: "Clay"
+            }
+          ],
+          itemLayers: [
+            {
+              depthStart: 0,
+              depthEnd: 2.3,
+              code: "106",
+              description: "Gray Clay"
+            },
+            {
+              depthStart: 2.3,
+              depthEnd: 5.3,
+              code: "106",
+              description: "Brownish Yellow Clay"
+            },
+            {
+              depthStart: 5.3,
+              depthEnd: 9.2,
+              code: "224",
+              description: "Gray Medium Sand"
+            },
+            {
+              depthStart: 9.2,
+              depthEnd: 14.4,
+              code: "106",
+              description: "Grayish Brown Clay"
+            },
+            {
+              depthStart: 14.4,
+              depthEnd: 32.4,
+              code: "106",
+              description: "Gray Clay"
+            },
+            {
+              depthStart: 32.4,
+              depthEnd: 37.1,
+              code: "106",
+              description: "Gray Clay with Fine Sand"
+            },
+            {
+              depthStart: 37.1,
+              depthEnd: 41.2,
+              code: "106",
+              description: "Gray Clay"
+            },
+            {
+              depthStart: 41.2,
+              depthEnd: 45.1,
+              code: "225",
+              description: "Gray Fine Sand"
+            },
+            {
+              depthStart: 45.1,
+              depthEnd: 46.7,
+              code: "106",
+              description: "Gray Clay"
+            }
+          ]
+        },
+        actions: []
+      };
+    },
+    mounted: function() {
+      return {};
+    },
+    computed: {},
+    methods: {
+      getSegmentBackgroundColor: function(item) {
+        // console.log('getSegmentBackgroundColor', item)
+        let kp = {
+          Audience: "#ffb13e",
+          Conversions: "#a2cf70",
+          Management: "#4ac2fd",
+          Actions: "#9f77ff"
+        };
+        let c = kp[item.type];
+        return c;
+      },
+      getSegmentBackgroundIcon: function(item) {
+        // console.log('getSegmentBackgroundIcon', item)
+        let kp = window.dataCivilSoilCodeIcon;
+        let bgicon = kp[item.code];
+        // console.log('bgicon', bgicon)
+        return bgicon;
+      },
+      getSegmentBorderColor: function(item) {
+        // console.log('getSegmentBorderColor', item)
+        let kp = {
+          Audience: "#FF9800",
+          Conversions: "#8BC34A",
+          Management: "#039BE5",
+          Actions: "#651FFF"
+        };
+        let c = kp[item.type];
+        return c;
+      },
+      clickText: function(msg) {
+        console.log("clickText", msg);
+      },
+      clickSegment: function(msg) {
+        console.log("clickSegment", msg);
+      }
+    }
+  });
+    </script>
+</body>
+</html>

package/docs/examples/w-segments-vertical_slot text.html CHANGED Viewed

@@ -53,25 +53,28 @@
     <!-- data -->
     <script
-        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataAAPL.js"
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataAAPL.js"
     ></script>
     <script
-        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataUSD2EUR.js"
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataUSD2EUR.js"
     ></script>
     <script
-        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataTemperature.js"
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataTemperature.js"
     ></script>
     <script
-        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataHousePriceArea.js"
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataHousePriceArea.js"
     ></script>
     <script
-        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataFlare.js"
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataFlare.js"
     ></script>
     <script
-        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataRain.js"
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataRain.js"
     ></script>
     <script
-        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataRainClip.js"
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataRainClip.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/data/dataCivilSoilCodeIcon.js"
     ></script>
     <script>
   //save in window
@@ -82,10 +85,11 @@
   window.dataFlare = dataFlare;
   window.dataRain = dataRain;
   window.dataRainClip = dataRainClip;
+  window.dataCivilSoilCodeIcon = dataCivilSoilCodeIcon;
     </script>
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.35/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.37/dist/w-component-vue.umd.js"></script>
     <style>
   .v-application--wrap {
@@ -326,6 +330,62 @@
               depthEnd: 7.2,
               kind: "Clay"
             }
+          ],
+          itemLayers: [
+            {
+              depthStart: 0,
+              depthEnd: 2.3,
+              code: "106",
+              description: "Gray Clay"
+            },
+            {
+              depthStart: 2.3,
+              depthEnd: 5.3,
+              code: "106",
+              description: "Brownish Yellow Clay"
+            },
+            {
+              depthStart: 5.3,
+              depthEnd: 9.2,
+              code: "224",
+              description: "Gray Medium Sand"
+            },
+            {
+              depthStart: 9.2,
+              depthEnd: 14.4,
+              code: "106",
+              description: "Grayish Brown Clay"
+            },
+            {
+              depthStart: 14.4,
+              depthEnd: 32.4,
+              code: "106",
+              description: "Gray Clay"
+            },
+            {
+              depthStart: 32.4,
+              depthEnd: 37.1,
+              code: "106",
+              description: "Gray Clay with Fine Sand"
+            },
+            {
+              depthStart: 37.1,
+              depthEnd: 41.2,
+              code: "106",
+              description: "Gray Clay"
+            },
+            {
+              depthStart: 41.2,
+              depthEnd: 45.1,
+              code: "225",
+              description: "Gray Fine Sand"
+            },
+            {
+              depthStart: 45.1,
+              depthEnd: 46.7,
+              code: "106",
+              description: "Gray Clay"
+            }
           ]
         },
         actions: []
@@ -347,6 +407,13 @@
         let c = kp[item.type];
         return c;
       },
+      getSegmentBackgroundIcon: function(item) {
+        // console.log('getSegmentBackgroundIcon', item)
+        let kp = window.dataCivilSoilCodeIcon;
+        let bgicon = kp[item.code];
+        // console.log('bgicon', bgicon)
+        return bgicon;
+      },
       getSegmentBorderColor: function(item) {
         // console.log('getSegmentBorderColor', item)
         let kp = {