w-component-vue 2.1.77 → 2.1.78

package/docs/module-WTextSuggest.html

@@ -464,7 +464,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextSuggestCore.html

@@ -368,7 +368,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextarea.html

@@ -218,7 +218,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeday.html

@@ -332,7 +332,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayCore.html

@@ -230,7 +230,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayRange.html

@@ -338,7 +338,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayRangeCore.html

@@ -242,7 +242,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminute.html

@@ -368,7 +368,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteCore.html

@@ -272,7 +272,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRange.html

@@ -380,7 +380,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRangeCore.html

@@ -284,7 +284,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTinymceVueDyn.html

@@ -224,7 +224,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTree.html

@@ -566,7 +566,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconCheckbox.html

@@ -242,7 +242,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconToggle.html

@@ -218,7 +218,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/vuetifyColor.mjs.html

@@ -144,7 +144,7 @@ export default color2hex
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Mon Feb 28 2022 16:15:26 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-component-vue",
-  "version": "2.1.77",
+  "version": "2.1.78",
   "author": "yuda-lyu(semisphere)",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/AppZoneWCheckbox.vue

@@ -126,8 +126,8 @@
 
                 <w-checkbox
                     :editable="false"
-                    :checkedIconColorDisabled="'#FF8A65'"
-                    :uncheckedIconColorDisabled="'#FF8A65'"
+                    :checkedIconColorDisabled="'#ff8a65'"
+                    :uncheckedIconColorDisabled="'#ff8a65'"
                     v-model="WCheckbox.valueBol"
                 ></w-checkbox>
             </div>

package/src/AppZoneWSwitch.vue

@@ -14,7 +14,9 @@
                     :casename="'default'"
                 ></demolink>
 
-                <w-switch v-model="WSwitch.valueBol"></w-switch>
+                <w-switch
+                    v-model="WSwitch.valueBol"
+                ></w-switch>
             </div>
 
 
@@ -24,19 +26,66 @@
                     :casename="'use string (y or n)'"
                 ></demolink>
 
-                <w-switch v-model="WSwitch.valueYN"></w-switch>
+                <w-switch
+                    v-model="WSwitch.valueYN"
+                ></w-switch>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-switch'"
+                    :casename="'text'"
+                ></demolink>
+
+                <w-switch
+                    :text="'顯示文字(text)'"
+                    v-model="WSwitch.valueBol"
+                ></w-switch>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-switch'"
+                    :casename="'text & textColor & textColorHover'"
+                ></demolink>
+
+                <w-switch
+                    :text="'顯示文字(text)'"
+                    :textColor="'#24c'"
+                    :textColorHover="'#68c'"
+                    v-model="WSwitch.valueBol"
+                ></w-switch>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-switch'"
+                    :casename="'switchSize & textFontSize'"
+                ></demolink>
+
+                <w-switch
+                    :text="'顯示文字(text)'"
+                    :switchSize="18"
+                    :textFontSize="'0.7rem'"
+                    v-model="WSwitch.valueBol"
+                ></w-switch>
             </div>
 
 
             <div class="bk">
                 <demolink
                     :kbname="'w-switch'"
-                    :casename="'text & color'"
+                    :casename="'checkedSwitchColor & checkedSwitchColorHover & uncheckedSwitchColor & uncheckedSwitchColorHover'"
                 ></demolink>
 
                 <w-switch
-                    :text="'是否開啟分享'"
-                    :color="'teal accent-3'"
+                    :checkedSwitchColor="'#f6a'"
+                    :checkedSwitchColorHover="'#f26'"
+                    :uncheckedSwitchColor="'#ccc'"
+                    :uncheckedSwitchColorHover="'#cccccc'"
                     v-model="WSwitch.valueBol"
                 ></w-switch>
             </div>
@@ -48,7 +97,25 @@
                     :casename="'not editable'"
                 ></demolink>
 
-                <w-switch :editable="false" v-model="WSwitch.valueBol"></w-switch>
+                <w-switch
+                    :editable="false"
+                    v-model="WSwitch.valueBol"
+                ></w-switch>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-switch'"
+                    :casename="'not editable & checkedSwitchColorDisabled & uncheckedSwitchColorDisabled'"
+                ></demolink>
+
+                <w-switch
+                    :editable="false"
+                    :checkedSwitchColorDisabled="'#ff8a65'"
+                    :uncheckedSwitchColorDisabled="'#ffbca6'"
+                    v-model="WSwitch.valueBol"
+                ></w-switch>
             </div>
 
 

package/src/components/WSwitch.vue

@@ -1,45 +1,106 @@
 <template>
     <div
-        style="display:inline-block;"
+        :style="`display:inline-block; ${editable?'cursor:pointer;':''}`"
         :changeParam="changeParam"
+        @click="toogleValue"
+        @mouseenter="hoverTrans=true;$emit('mouseenter',$event)"
+        @mouseleave="hoverTrans=false;$emit('mouseleave',$event)"
     >
 
-        <v-switch
-            style="margin:0px; padding:0px;"
-            hide-details
-            :label="text"
-            :color="color"
-            :disabled="!editable"
-            v-model="b"
-            @change="toogleValue"
-        ></v-switch>
+        <div style="display:flex; align-items:center;">
+
+            <!-- 用padding:2px 0px與height+4撐開至預設高度24px -->
+            <div :style="`padding:2px 0px; height:${4+Math.max(heightCir,heightBar)}px;`">
+                <div :style="`position:relative; padding-top:${(heightCir-heightBar)/2}px;`">
+
+                    <div class="ts" :style="`width:${widthBar}px; height:${heightBar}px; border-radius:8px; opacity:0.6; background:${useSwitchColor};`">
+                    </div>
+
+                    <div class="ts bs" :style="`position:absolute; top:0px; left:${ b ? widthBar-widthCir : 0 }px; width:${widthCir}px; height:${heightCir}px; border-radius:50%; background:${useSwitchColor};`">
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="ts" :style="`text-transform:none; padding-left:5px; color:${useTextColor}; ${useTextFontSize}`" v-if="text!==''">
+                {{text}}
+            </div>
+
+        </div>
 
     </div>
 </template>
 
 <script>
 import isbol from 'wsemi/src/isbol.mjs'
+import replace from 'wsemi/src/replace.mjs'
+import color2hex from '../js/vuetifyColor.mjs'
 
 
 /**
- * @vue-prop {String} [text=''] 輸入文字字串，預設''
  * @vue-prop {Boolean|String} [value=false] 輸入是否狀態的布林值或字串，可接受true或false，或是'y'或'n'，預設false
- * @vue-prop {String} [color='pink accent-3'] 輸入切換開關開啟狀態(yes或true)的顏色字串，預設'pink accent-3'
+ * @vue-prop {String} [text=''] 輸入文字字串，預設''
+ * @vue-prop {String} [textColor='black'] 輸入文字顏色字串，預設'black'
+ * @vue-prop {String} [textColorHover='grey darken-3'] 輸入滑鼠移入時文字顏色字串，預設'grey darken-3'
+ * @vue-prop {String} [textFontSize='0.85rem'] 輸入文字字型大小字串，預設'0.85rem'
+ * @vue-prop {Number} [switchSize=24] 輸入切換器大小，單位為px，預設24
+ * @vue-prop {String} [checkedSwitchColor='blue darken-3'] 輸入可編輯時，有效(true|'y')切換器顏色字串，預設'blue darken-3'
+ * @vue-prop {String} [checkedSwitchColorHover='blue darken-2'] 輸入滑鼠移入時可編輯時，有效(true|'y')切換器顏色字串，預設'blue darken-2'
+ * @@vue-prop {String} [checkedSwitchColorDisabled='grey'] 輸入不可編輯時，有效(true|'y')切換器顏色字串，預設'grey'
+ * @vue-prop {String} [uncheckedSwitchColor='#8ad'] 輸入可編輯時，無效(false|'n')切換器顏色字串，預設'#8ad'
+ * @vue-prop {String} [uncheckedSwitchColorHover='#9bd'] 輸入滑鼠移入時可編輯時，無效(false|'n')切換器顏色字串，預設'#9bd'
+ * @@vue-prop {String} [uncheckedSwitchColorDisabled='#bbb'] 輸入不可編輯時，無效(false|'n')切換器顏色字串，預設'#bbb'
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  */
 export default {
     props: {
+        value: {
+            type: [Boolean, String],
+            default: false,
+        },
         text: {
             type: String,
             default: '',
         },
-        value: {
-            type: [Boolean, String],
-            default: false,
+        textColor: {
+            type: String,
+            default: 'black',
+        },
+        textColorHover: {
+            type: String,
+            default: 'grey darken-3',
+        },
+        textFontSize: {
+            type: String,
+            default: '0.85rem',
+        },
+        switchSize: {
+            type: Number,
+            default: 24,
+        },
+        checkedSwitchColor: {
+            type: String,
+            default: 'blue darken-3',
+        },
+        checkedSwitchColorHover: {
+            type: String,
+            default: 'blue darken-2',
+        },
+        checkedSwitchColorDisabled: {
+            type: String,
+            default: 'grey',
+        },
+        uncheckedSwitchColor: {
+            type: String,
+            default: '#8ad',
+        },
+        uncheckedSwitchColorHover: {
+            type: String,
+            default: '#9bd',
         },
-        color: {
+        uncheckedSwitchColorDisabled: {
             type: String,
-            default: 'pink accent-3',
+            default: '#bbb',
         },
         editable: {
             type: Boolean,
@@ -48,11 +109,15 @@ export default {
     },
     data: function() {
         return {
+
+            hoverTrans: false,
+
+            dh: 4,
+
             b: false,
+
         }
     },
-    mounted: function() {
-    },
     computed: {
 
         changeParam: function () {
@@ -74,14 +139,121 @@ export default {
             return ''
         },
 
+        heightCir: function() { // heightCir: 20,
+            let vo = this
+            return vo.switchSize - vo.dh
+        },
+
+        widthCir: function() { // widthCir: 20,
+            let vo = this
+            return vo.heightCir
+        },
+
+        heightBar: function() { // heightBar: 14,
+            let vo = this
+            return vo.switchSize / 24 * 14
+        },
+
+        widthBar: function() { // widthBar: 36,
+            let vo = this
+            return vo.switchSize / 24 * 36
+        },
+
+        effTextColor: function() {
+            let vo = this
+            return color2hex(vo.textColor)
+        },
+
+        effTextColorHover: function() {
+            let vo = this
+            return color2hex(vo.textColorHover)
+        },
+
+        useTextColor: function() {
+            let vo = this
+            let r
+            if (!vo.editable) {
+                return vo.effTextColor
+            }
+            r = vo.hoverTrans ? vo.effTextColorHover : vo.effTextColor
+            return r
+        },
+
+        useTextFontSize: function() {
+            let vo = this
+            let s = vo.textFontSize
+            s = replace(s, ';', '')
+            return `font-size:${s};`
+        },
+
+        effCheckedSwitchColor: function() {
+            let vo = this
+            return color2hex(vo.checkedSwitchColor)
+        },
+
+        effCheckedSwitchColorHover: function() {
+            let vo = this
+            return color2hex(vo.checkedSwitchColorHover)
+        },
+
+        effCheckedSwitchColorDisabled: function() {
+            let vo = this
+            return color2hex(vo.checkedSwitchColorDisabled)
+        },
+
+        useCheckedSwitchColor: function() {
+            let vo = this
+            if (!vo.editable) {
+                return vo.effCheckedSwitchColorDisabled
+            }
+            return vo.hoverTrans ? vo.effCheckedSwitchColorHover : vo.effCheckedSwitchColor
+        },
+
+        effUncheckedSwitchColor: function() {
+            let vo = this
+            return color2hex(vo.uncheckedSwitchColor)
+        },
+
+        effUncheckedSwitchColorHover: function() {
+            let vo = this
+            return color2hex(vo.uncheckedSwitchColorHover)
+        },
+
+        effUncheckedSwitchColorDisabled: function() {
+            let vo = this
+            return color2hex(vo.uncheckedSwitchColorDisabled)
+        },
+
+        useUncheckedSwitchColor: function() {
+            let vo = this
+            if (!vo.editable) {
+                return vo.effUncheckedSwitchColorDisabled
+            }
+            return vo.hoverTrans ? vo.effUncheckedSwitchColorHover : vo.effUncheckedSwitchColor
+        },
+
+        useSwitchColor: function() {
+            let vo = this
+            return vo.b ? vo.useCheckedSwitchColor : vo.useUncheckedSwitchColor
+        },
+
     },
     methods: {
 
-        toogleValue: function (b) {
-            //console.log('methods toogleValue', b)
+        toogleValue: function () {
+            // console.log('methods toogleValue')
 
             let vo = this
 
+            //check
+            if (!vo.editable) {
+                return
+            }
+
+            //toogle
+            let b = vo.b
+            b = !b
+
             //value
             let value = null
             if (isbol(vo.value)) {
@@ -97,7 +269,7 @@ export default {
                 }
             }
 
-            //$nextTick
+            //nextTick
             vo.$nextTick(() => {
 
                 //emit
@@ -112,4 +284,10 @@ export default {
 </script>
 
 <style scoped>
+.ts {
+    transition:all 0.3s;
+}
+.bs {
+    box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
+}
 </style>