w-component-vue 2.3.36 → 2.3.38

package/docs/module-WTimeminuteRangeCore.html

@@ -371,7 +371,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sat Sep 23 2023 18:18:29 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Wed Oct 11 2023 20:49:22 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTinymceVueDyn.html

@@ -251,7 +251,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sat Sep 23 2023 18:18:29 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Wed Oct 11 2023 20:49:22 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTooltip.html

@@ -431,7 +431,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sat Sep 23 2023 18:18:29 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Wed Oct 11 2023 20:49:22 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTree.html

@@ -1487,7 +1487,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sat Sep 23 2023 18:18:29 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Wed Oct 11 2023 20:49:22 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconCheckbox.html

@@ -299,7 +299,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sat Sep 23 2023 18:18:29 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Wed Oct 11 2023 20:49:22 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconToggle.html

@@ -275,7 +275,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sat Sep 23 2023 18:18:29 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Wed Oct 11 2023 20:49:22 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/vuetifyColor.mjs.html

@@ -147,7 +147,7 @@ export default color2hex
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sat Sep 23 2023 18:18:29 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Wed Oct 11 2023 20:49:22 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "w-component-vue",
-  "version": "2.3.36",
+  "version": "2.3.38",
   "main": "dist/w-component-vue.umd.js",
   "dependencies": {
     "@mdi/js": "^7.2.96",
     "lodash": "^4.17.21",
-    "wsemi": "^1.7.34"
+    "wsemi": "^1.7.38"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^5.0.8",

package/public/index.html

@@ -19,13 +19,14 @@
         <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 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
@@ -35,6 +36,7 @@
             window.dataFlare=dataFlare
             window.dataRain=dataRain
             window.dataRainClip=dataRainClip
+            window.dataCivilSoilCodeIcon=dataCivilSoilCodeIcon
         </script>
 
     </head>

package/src/AppZoneWImageCascadingDyn.vue

@@ -126,21 +126,21 @@ export default {
             'WImageCascadingDyn': {
                 'opt1': {
                     images: [
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/food/001.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/food/002.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/food/003.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/food/004.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/food/005.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/food/006.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/food/007.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/food/008.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/food/009.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/food/010.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/food/011.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/food/012.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/food/013.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/food/014.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/food/015.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/food/001.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/food/002.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/food/003.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/food/004.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/food/005.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/food/006.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/food/007.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/food/008.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/food/009.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/food/010.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/food/011.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/food/012.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/food/013.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/food/014.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/food/015.jpg',
                     ],
                     imageStyle: { },
                     opt: {},

package/src/AppZoneWImageViewerDyn.vue

@@ -70,10 +70,10 @@ export default {
             'WImageViewerDyn': {
                 'opt1': {
                     images: [
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/001.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/002.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/003.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/004.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/001.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/002.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/003.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/004.jpg',
                     ],
                     imageStyle: {
                         maxWidth: '300px',
@@ -83,10 +83,10 @@ export default {
                 },
                 'opt2': {
                     images: [
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/005.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/006.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/007.jpg',
-                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/008.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/005.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/006.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/007.jpg',
+                        'https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/008.jpg',
                     ],
                     imageStyle: {
                         maxWidth: '300px',

package/src/AppZoneWPanelDivideHorizontal.vue

@@ -209,12 +209,12 @@
                     >
                         <template v-slot:left="props">
                             <div :style="`overflow-y:auto; height:${props.height}px; overflow:hidden;`">
-                                <img style="position:absolute; top:0; left:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/001.jpg" />
+                                <img style="position:absolute; top:0; left:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/001.jpg" />
                             </div>
                         </template>
                         <template v-slot:right="props">
                             <div :style="`overflow-y:auto; height:${props.height}px; overflow:hidden;`">
-                                <img style="position:absolute; top:0; right:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/001-gray.jpg" />
+                                <img style="position:absolute; top:0; right:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/001-gray.jpg" />
                             </div>
                         </template>
                     </w-panel-divide-horizontal>
@@ -237,12 +237,12 @@
                     >
                         <template v-slot:left="props">
                             <div :style="`overflow-y:auto; height:${props.height}px; overflow:hidden;`">
-                                <img style="position:absolute; top:0; left:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/001.jpg" />
+                                <img style="position:absolute; top:0; left:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/001.jpg" />
                             </div>
                         </template>
                         <template v-slot:right="props">
                             <div :style="`overflow-y:auto; height:${props.height}px; overflow:hidden;`">
-                                <img style="position:absolute; top:0; right:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/001-gray.jpg" />
+                                <img style="position:absolute; top:0; right:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/001-gray.jpg" />
                             </div>
                         </template>
                     </w-panel-divide-horizontal>

package/src/AppZoneWPanelDivideVertical.vue

@@ -209,12 +209,12 @@
                     >
                         <template v-slot:top="props">
                             <div :style="`position:relative; height:${props.height}px; overflow:hidden;`">
-                                <img style="position:absolute; top:0; left:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/001.jpg" />
+                                <img style="position:absolute; top:0; left:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/001.jpg" />
                             </div>
                         </template>
                         <template v-slot:bottom="props">
                             <div :style="`position:relative; height:${props.height}px; overflow:hidden;`">
-                                <img style="position:absolute; bottom:-200px; left:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/001-gray.jpg" />
+                                <img style="position:absolute; bottom:-200px; left:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/001-gray.jpg" />
                             </div>
                         </template>
                     </w-panel-divide-vertical>
@@ -237,12 +237,12 @@
                     >
                         <template v-slot:top="props">
                             <div :style="`position:relative; height:${props.height}px; overflow:hidden;`">
-                                <img style="position:absolute; top:0; left:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/001.jpg" />
+                                <img style="position:absolute; top:0; left:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/001.jpg" />
                             </div>
                         </template>
                         <template v-slot:bottom="props">
                             <div :style="`position:relative; height:${props.height}px; overflow:hidden;`">
-                                <img style="position:absolute; bottom:-200px; left:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/img/view/001-gray.jpg" />
+                                <img style="position:absolute; bottom:-200px; left:0; width:800px; height:600px; user-select:none; user-drag:none;" src="https://cdn.jsdelivr.net/npm/w-demores@1.0.22/res/img/view/001-gray.jpg" />
                             </div>
                         </template>
                     </w-panel-divide-vertical>

package/src/AppZoneWSegmentsVertical.vue

@@ -36,6 +36,30 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-segments-vertical'"
+                    :casename="'title & titleColor & titleFontSize & titleShift & width & paddingStyle'"
+                ></demolink>
+
+                <w-segments-vertical
+                    :items="WSegmentsVertical.items"
+                    :width="270"
+                    :paddingStyle="{
+                        top: 10,
+                        right: 0,
+                        bottom: 10,
+                        left: 70,
+                    }"
+                    :title="'Timeline'"
+                    :titleColor="'#666'"
+                    :titleFontSize="'1.2rem'"
+                    :titleShift="-58"
+                ></w-segments-vertical>
+
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-segments-vertical'"
@@ -310,6 +334,144 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-segments-vertical'"
+                    :casename="'slot support-left & width & paddingStyle & segmentBackgroundType & funSegmentBackgroundImage & segmentBorderColor & tickSize & segmentSize & axisColor & tickColor & keyValueStart & keyValueEnd & keyText & alignEnd & textShift & title'"
+                ></demolink>
+
+                <w-segments-vertical
+                    :items="WSegmentsVertical.itemLayers"
+                    :width="310"
+                    :paddingStyle="{
+                        top: 10,
+                        right: 0,
+                        bottom: 10,
+                        left: 95,
+                    }"
+                    :tickSize="30"
+                    :segmentSize="50"
+                    :segmentBackgroundType="'image'"
+                    :funSegmentBackgroundImage="getSegmentBackgroundIcon"
+                    :segmentBorderColor="{v:'transparent',h:'#444'}"
+                    :axisColor="'transparent'"
+                    :tickColor="'#444'"
+                    :keyValueStart="'depthStart'"
+                    :keyValueEnd="'depthEnd'"
+                    :keyText="'description'"
+                    :alignEnd="'left'"
+                    :textShift="35"
+                    :title="'Depth(m)'"
+                >
+                    <template v-slot:support-left="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>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-segments-vertical'"
+                    :casename="'slot support-right & width & paddingStyle & segmentBackgroundType & funSegmentBackgroundImage & segmentBorderColor & tickSize & segmentSize & axisColor & tickColor & keyValueStart & keyValueEnd & keyText & alignEnd & textShift & title'"
+                ></demolink>
+
+                <w-segments-vertical
+                    :items="WSegmentsVertical.itemLayers"
+                    :width="340"
+                    :paddingStyle="{
+                        top: 10,
+                        right: 0,
+                        bottom: 10,
+                        left: 80,
+                    }"
+                    :tickSize="30"
+                    :segmentSize="50"
+                    :segmentBackgroundType="'image'"
+                    :funSegmentBackgroundImage="getSegmentBackgroundIcon"
+                    :segmentBorderColor="{v:'transparent',h:'#444'}"
+                    :axisColor="'transparent'"
+                    :tickColor="'#444'"
+                    :keyValueStart="'depthStart'"
+                    :keyValueEnd="'depthEnd'"
+                    :keyText="'description'"
+                    :alignEnd="'left'"
+                    :textShift="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>
+
+
         </div>
 
 
@@ -492,6 +654,17 @@ export default {
                         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': [
             ],
@@ -509,6 +682,13 @@ export default {
             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 = {

package/src/components/WLeafletVueDyn.vue

@@ -10,7 +10,6 @@ import getVue from '../js/getVue.mjs'
 
 
 /**
- * @vue-prop {Array} [pathItems=['詳見原始碼']] 輸入ag-grid與w-aggrid-vue組件js檔案位置字串陣列，預設詳見原始碼處props->pathItems->default
  * @vue-prop {Object} opt 輸入資料設定物件
  * @vue-prop {Array} [opt.center=[23.5, 121.1]] 輸入地圖顯示中點陣列，陣列為WGS84[緯度,經度]，預設[23.5, 121.1]
  * @vue-prop {Number} [opt.zoom=7] 輸入地圖顯示層級整數，預設7
@@ -31,10 +30,12 @@ import getVue from '../js/getVue.mjs'
  * @vue-prop {String} [opt.panelZoom.position='bottomleft'] 輸入縮放按鈕區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'bottomleft'
  * @vue-prop {Boolean} [opt.panelItems.show=true] 輸入圖層顯隱切換區是否顯示布林值，預設true
  * @vue-prop {String} [opt.panelItems.position='topleft'] 輸入圖層顯隱切換區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'topleft'
+ * @vue-prop {Number} [opt.panelItems.width=null] 輸入圖層顯隱切換區寬度數字，單位px，預設null
  * @vue-prop {Number} [opt.panelItems.maxWidth=null] 輸入圖層顯隱切換區最大寬度數字，單位px，預設null
  * @vue-prop {Number} [opt.panelItems.maxHeight=null] 輸入圖層顯隱切換區最大高度數字，單位px，預設null
  * @vue-prop {Boolean} [opt.panelLegends.show=true] 輸入圖例區是否顯示布林值，預設true
  * @vue-prop {String} [opt.panelLegends.position='bottomright'] 輸入圖例區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'bottomright'
+ * @vue-prop {Number} [opt.panelLegends.width=null] 輸入圖例區寬度數字，單位px，預設null
  * @vue-prop {Number} [opt.panelLegends.maxWidth=null] 輸入圖例區最大寬度數字，單位px，預設null
  * @vue-prop {Number} [opt.panelLegends.maxHeight=null] 輸入圖例區最大高度數字，單位px，預設null
  * @vue-prop {Array} [opt.pointSets=[]] 輸入點集合陣列，各元素為物件，預設[]
@@ -45,10 +46,11 @@ import getVue from '../js/getVue.mjs'
  * @vue-prop {Array} [opt.pointSets[i].iconSize=[24,40]] 輸入第i個點集合的顯示圖標尺寸陣列，使用[寬,高]，長寬單位px，預設[24,40]
  * @vue-prop {Array} [opt.pointSets[i].iconAnchor=[iconSize[0]/2,iconSize[1]]] 輸入第i個點集合的顯示圖標的實際定位位置陣列，由圖標左上角代表實際定位點起算，往左移動為+x，往上移動為+y，x與y單位px，需給予[x,y]，預設[iconSize[0]/2,iconSize[1]]
  * @vue-prop {Array} [opt.pointSets[i].popupAnchor=[0,-iconSize[1]/1.5]] 輸入第i個點集合的顯示popup或tooltip時的指向位置陣列，由實際定位點起算，往右移動為+x，往下移動為+y，x與y單位px，需給予[x,y]，預設[0,-iconSize[1]/1.5]
- * @vue-prop {Array} [opt.pointSets[i].points=[]] 輸入第i個點集合的各點陣列，各元素為物件或為緯經度(注意非經緯度)陣列，也就是[{p1},{p2},...]或是[[p1lat,p1lng],[p2lat,p2lng],...]，預設為[]
+ * @vue-prop {Boolean} [opt.pointSets[i].visible=true] 輸入第i個點集合的是否顯示布林值，預設為true
+ * @vue-prop {Array} [opt.pointSets[i].points=[]] 輸入第i個點集合的各點數據陣列，各元素為物件或為緯經度陣列，也就是[{p1},{p2},...]或是[[p1lat,p1lng],[p2lat,p2lng],...]，預設為[]
  * @vue-prop {String} [opt.pointSets[i].points[j].title=''] 輸入第i個點集合的第j個點的標題字串，預設為''
  * @vue-prop {String} [opt.pointSets[i].points[j].msg=''] 輸入第i個點集合的第j個點的說明字串，預設為''
- * @vue-prop {Array} [opt.pointSets[i].points[j].latLng=[]] 輸入第i個點集合的第j個點的緯經度(注意非經緯度)座標陣列，也就是給予[lat,lng]，預設[]
+ * @vue-prop {Array} [opt.pointSets[i].points[j].latLng=[]] 輸入第i個點集合的第j個點的緯經度座標陣列，也就是給予[lat,lng]，預設[]
  * @vue-prop {String} [opt.pointSets[i].points[j].iconSrc=詳見程式碼] 輸入第i個點集合的第j個點的顯示圖標來源字串，可使用base64格式或網址，預設為google map的點圖標，值詳見程式碼
  * @vue-prop {Array} [opt.pointSets[i].points[j].iconSize=[24,40]] 輸入第i個點集合的第j個點的顯示圖標尺寸陣列，使用[寬,高]，長寬單位px，預設[24,40]
  * @vue-prop {Array} [opt.pointSets[i].points[j].iconAnchor=[iconSize[0]/2,iconSize[1]]] 輸入第i個點集合的第j個點的顯示圖標的實際定位位置陣列，由圖標左上角代表實際定位點起算，往左移動為+x，往上移動為+y，x與y單位px，需給予[x,y]，預設[iconSize[0]/2,iconSize[1]]
@@ -72,27 +74,58 @@ import getVue from '../js/getVue.mjs'
  * @vue-prop {Number} [opt.polygonSets[i].lineWidthHover=3] 輸入滑鼠移入時第i個多邊形集合的框線寬度數字，預設為3
  * @vue-prop {String} [opt.polygonSets[i].fillColor='rgba(0,150,255,0.25)'] 輸入第i個多邊形集合的填充顏色字串，預設為'rgba(0,150,255,0.25)'
  * @vue-prop {String} [opt.polygonSets[i].fillColorHover='rgba(0,150,255,0.25)'] 輸入滑鼠移入時第i個多邊形集合的填充顏色字串，預設為'rgba(0,150,255,0.25)'
+ * @vue-prop {Array} [opt.polygonSets[i].latLngs=[]] 輸入第i個多邊形集合的數據陣列，可使用polygon或multiPolygon，各點座標為緯經度，預設[]
  * @vue-prop {Function} [opt.defPolygonSetsClick=function(){}] 輸入全域多邊形集合的click呼叫函數，可給予函數接收點擊事件，預設為function(){}
  * @vue-prop {Function} [opt.polygonSets[i].click=function(){}] 輸入第i個多邊形集合的click呼叫函數，預設為function(){}
  * @vue-prop {Function} [opt.defPolygonSetsPopup=function(){}] 輸入全域多邊形集合的popup內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
  * @vue-prop {Function} [opt.polygonSets[i].popup=function(){}] 輸入第i個多邊形集合的popup內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
  * @vue-prop {Function} [opt.defPolygonSetsTooltip=function(){}] 輸入全域多邊形集合的tooltip內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
  * @vue-prop {Function} [opt.polygonSets[i].tooltip=function(){}] 輸入第i個多邊形集合的tooltip內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Boolean} [opt.polygonSets[i].visible=true] 輸入第i個多邊形集合的是否顯示布林值，預設為true
+ * @vue-prop {Array} [opt.geojsonSets=[]] 輸入geojson集合陣列，各元素為物件，預設[]
+ * @vue-prop {String} [opt.geojsonSets[i].title=''] 輸入第i個geojson集合的標題字串，預設為''
+ * @vue-prop {String} [opt.geojsonSets[i].msg=''] 輸入第i個geojson集合的說明字串，預設為''
+ * @vue-prop {Number} [opt.geojsonSets[i].order=null] 輸入第i個geojson集合的排序用數字，預設null
+ * @vue-prop {String} [opt.geojsonSets[i].lineColor='rgba(0,150,255,1)'] 輸入第i個geojson集合的框線顏色字串，預設為'rgba(0,150,255,1)'
+ * @vue-prop {String} [opt.geojsonSets[i].lineColorHover='rgba(0,150,255,1)'] 輸入滑鼠移入時第i個geojson集合的框線顏色字串，預設為'rgba(0,150,255,1)'
+ * @vue-prop {Number} [opt.geojsonSets[i].lineWidth=3] 輸入第i個geojson集合的框線寬度數字，預設為3
+ * @vue-prop {Number} [opt.geojsonSets[i].lineWidthHover=3] 輸入滑鼠移入時第i個geojson集合的框線寬度數字，預設為3
+ * @vue-prop {String} [opt.geojsonSets[i].fillColor='rgba(0,150,255,0.25)'] 輸入第i個geojson集合的填充顏色字串，預設為'rgba(0,150,255,0.25)'
+ * @vue-prop {String} [opt.geojsonSets[i].fillColorHover='rgba(0,150,255,0.25)'] 輸入滑鼠移入時第i個geojson集合的填充顏色字串，預設為'rgba(0,150,255,0.25)'
+ * @vue-prop {Object} [opt.geojsonSets[i].geojson={}] 輸入第i個geojson集合的數據物件，各點座標為緯經度，預設{}
+ * @vue-prop {Function} [opt.defGeojsonSetsClick=function(){}] 輸入全域geojson集合的click呼叫函數，可給予函數接收點擊事件，預設為function(){}
+ * @vue-prop {Function} [opt.geojsonSets[i].click=function(){}] 輸入第i個geojson集合的click呼叫函數，預設為function(){}
+ * @vue-prop {Function} [opt.defGeojsonSetsPopup=function(){}] 輸入全域geojson集合的popup內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.geojsonSets[i].popup=function(){}] 輸入第i個geojson集合的popup內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.defGeojsonSetsTooltip=function(){}] 輸入全域geojson集合的tooltip內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.geojsonSets[i].tooltip=function(){}] 輸入第i個geojson集合的tooltip內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Boolean} [opt.geojsonSets[i].visible=true] 輸入第i個geojson集合的是否顯示布林值，預設為true
  * @vue-prop {Array} [opt.contourSets=[]] 輸入等值線集合陣列，各元素為物件，預設[]
  * @vue-prop {Number} [opt.contourSets[i].order=null] 輸入第i個等值線集合的排序用數字，預設null
  * @vue-prop {Object} [opt.contourSets[i].gradient=詳見程式碼] 輸入第i個等值線集合的色階(color map)設定物件，鍵範圍0至1，值為對應之顏色，於各鍵之間則採用內插取色，預設值詳見程式碼
+ * @vue-prop {Function} [opt.contourSets[i].getColor=null] 輸入第i個等值線集合的顏色函數，預設null
+ * @vue-prop {String} [opt.contourSets[i].lineColor=''] 輸入第i個等值線集合的框線顏色字串，若不輸入則預設為gradient內插所得顏色，預設為''
+ * @vue-prop {String} [opt.contourSets[i].lineColorHover=''] 輸入滑鼠移入時第i個等值線集合的框線顏色字串，若不輸入則預設為gradient內插所得顏色，預設為''
+ * @vue-prop {Number} [opt.contourSets[i].lineWidth=1] 輸入第i個等值線集合的框線寬度數字，預設為1
+ * @vue-prop {Number} [opt.contourSets[i].lineWidthHover=3] 輸入滑鼠移入時第i個等值線集合的框線寬度數字，預設為3
+ * @vue-prop {Number} [opt.contourSets[i].fillOpacity=0.2] 輸入第i個等值線集合的填充透明度數字，預設為0.2
+ * @vue-prop {Number} [opt.contourSets[i].fillOpacityHover=0.5] 輸入滑鼠移入時第i個等值線集合的填充透明度數字，預設為0.5
  * @vue-prop {Boolean} [opt.contourSets[i].changeStyleWhenHover=true] 輸入第i個等值線集合的是否使用滑鼠移入時切換style效果布林值，預設true
  * @vue-prop {Number} [opt.contourSets[i].legendNumDig=null] 輸入第i個等值線集合的對圖例內數字取小數位數，null代表不取，預設null
- * @vue-prop {Function} [opt.contourSets[i].legendTextFormater=null] 輸入第i個等值線集合的對圖例內各色階的內容產生函數，可基於傳入資料回傳顯示文字或html內容，null代表不取，預設null
+ * @vue-prop {Function} [opt.contourSets[i].legendTextFormater=null] 輸入第i個等值線集合的對圖例內各色階的文字內容產生函數，可基於傳入資料回傳顯示文字或html內容，null代表不取，預設null
+ * @vue-prop {Function} [opt.contourSets[i].legendTextExtra=null] 輸入第i個等值線集合的對圖例內各色階的文字提供額外文字函數，預設null
  * @vue-prop {Array} [opt.contourSets[i].polygonClipOuter=[]] 輸入第i個等值線集合的剔除以外之多邊形(polygon，深度為2，例如[[p1lat,p1lng],[p2lat,p2lng],...])陣列，預設[]
  * @vue-prop {Array} [opt.contourSets[i].polygonsClipInner=[]] 輸入第i個等值線集合的剔除以內之複數多邊形(multi-polygon，深度為3，例如[[[p1lat,p1lng]],[[p2lat,p2lng]],...])陣列，預設[]
  * @vue-prop {Array} [opt.contourSets[i].polygonsContainInner=[]] 輸入第i個等值線集合的保留以內之複數多邊形(multi-polygon，深度為3，例如[[[p1lat,p1lng]],[[p2lat,p2lng]],...])陣列，預設[]
+ * @vue-prop {Array} [opt.contourSets[i].thresholds=[]] 輸入第i個等值線集合的用等值線門檻值陣列，給予非有效陣列則使用自動計算各線門檻值，預設[]
+ * @vue-prop {Array} [opt.contourSets[i].points=[]] 輸入第i個等值線集合的數據陣列，各點座標為緯經度，並自動基於三角網格技術計算等值線，預設[]
  * @vue-prop {Function} [opt.defContourSetsClick=function(){}] 輸入全域等值線集合的click呼叫函數，可給予函數接收點擊事件，預設為function(){}
- * @vue-prop {Function} [opt.ContourSets[i].click=function(){}] 輸入第i個等值線集合的click呼叫函數，預設為function(){}
+ * @vue-prop {Function} [opt.contourSets[i].click=function(){}] 輸入第i個等值線集合的click呼叫函數，預設為function(){}
  * @vue-prop {Function} [opt.defContourSetsPopup=function(){}] 輸入全域等值線集合的popup內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
- * @vue-prop {Function} [opt.ContourSets[i].popup=function(){}] 輸入第i個等值線集合的popup內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.contourSets[i].popup=function(){}] 輸入第i個等值線集合的popup內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
  * @vue-prop {Function} [opt.defContourSetsTooltip=function(){}] 輸入全域等值線集合的tooltip內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
- * @vue-prop {Function} [opt.ContourSets[i].tooltip=function(){}] 輸入第i個等值線集合的tooltip內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.contourSets[i].tooltip=function(){}] 輸入第i個等值線集合的tooltip內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Boolean} [opt.contourSets[i].visible=true] 輸入第i個等值線集合的是否顯示布林值，預設為true
  */
 export default {
     components: {
@@ -103,7 +136,7 @@ export default {
             type: Array,
             default: () => [
                 //現在w-leaflet-vue已依賴w-component-vue故為循環引用, 但使用dyn則為脫勾, 故仍需人工更新此處版本
-                'https://cdn.jsdelivr.net/npm/w-leaflet-vue@1.0.38/dist/w-leaflet-vue.umd.js',
+                'https://cdn.jsdelivr.net/npm/w-leaflet-vue@1.0.39/dist/w-leaflet-vue.umd.js',
             ],
         },
         opt: {

package/src/components/WListCheck.vue

@@ -773,7 +773,7 @@ export default {
                     kpCheck[k] = false
                 })
                 kpCheck[kLast] = true
-                console.log('kpCheck(single)', kpCheck)
+                // console.log('kpCheck(single)', kpCheck)
             }
 
             //itemsTrans