w-component-vue 2.3.69 → 2.3.70

package/src/AppZoneWTextarea.vue

@@ -332,6 +332,33 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-textarea'"
+                    :casename="'border & textFontSize'"
+                ></demolink>
+
+                <w-textarea
+                    style="width:350px;"
+                    :shadow="false"
+                    :bottomLineBorderColor="'transparent'"
+                    :bottomLineBorderColorHover="'transparent'"
+                    :bottomLineBorderColorFocus="'transparent'"
+                    :paddingStyle="{v:5,h:8}"
+                    :iconShiftOuter="0"
+                    :iconShiftInner="0"
+                    :borderColor="'blue lighten-2'"
+                    :borderColorHover="'blue'"
+                    :borderColorFocus="'blue darken-2'"
+                    :backgroundColor="'white'"
+                    :backgroundColorHover="'rgba(237, 247, 255, 1)'"
+                    :backgroundColorFocus="'blue lighten-5'"
+                    :textFontSize="'0.85rem'"
+                    v-model="WTextarea.text"
+                ></w-textarea>
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-textarea'"

package/src/components/WBadge.vue

@@ -29,7 +29,7 @@
 <script>
 import get from 'lodash-es/get'
 import replace from 'wsemi/src/replace.mjs'
-import color2hex from '../js/color2hex.mjs'
+import convertColor from '../js/convertColor.mjs'
 import domResize from '../js/domResize.mjs'
 
 
@@ -130,17 +130,17 @@ export default {
 
         useTextColor: function() {
             let vo = this
-            return color2hex(vo.textColor)
+            return convertColor(vo.textColor)
         },
 
         useBackgroundColor: function() {
             let vo = this
-            return color2hex(vo.backgroundColor)
+            return convertColor(vo.backgroundColor)
         },
 
         useBorderColor: function() {
             let vo = this
-            return color2hex(vo.borderColor)
+            return convertColor(vo.borderColor)
         },
 
     },

package/src/components/WButtonChip.vue

@@ -149,7 +149,7 @@ import sep from 'wsemi/src/sep.mjs'
 import genPm from 'wsemi/src/genPm.mjs'
 import oc from 'wsemi/src/color.mjs'
 import domCancelEvent from 'wsemi/src/domCancelEvent.mjs'
-import color2hex from '../js/color2hex.mjs'
+import convertColor from '../js/convertColor.mjs'
 import parseSpace from '../js/parseSpace.mjs'
 import domRipple from '../js/domRipple.mjs'
 import WIcon from './WIcon.vue'
@@ -495,17 +495,17 @@ export default {
 
         effIconColor: function() {
             let vo = this
-            return color2hex(vo.iconColor)
+            return convertColor(vo.iconColor)
         },
 
         effIconColorHover: function() {
             let vo = this
-            return color2hex(vo.iconColorHover)
+            return convertColor(vo.iconColorHover)
         },
 
         effIconColorActive: function() {
             let vo = this
-            return color2hex(vo.iconColorActive)
+            return convertColor(vo.iconColorActive)
         },
 
         hasIcon: function() {
@@ -539,32 +539,32 @@ export default {
 
         effDisabledColor: function() {
             let vo = this
-            return color2hex(vo.disabledColor)
+            return convertColor(vo.disabledColor)
         },
 
         effProgColor: function() {
             let vo = this
-            return color2hex(vo.progColor)
+            return convertColor(vo.progColor)
         },
 
         effProgBackgroundColor: function() {
             let vo = this
-            return color2hex(vo.progBackgroundColor)
+            return convertColor(vo.progBackgroundColor)
         },
 
         effTextColor: function() {
             let vo = this
-            return color2hex(vo.textColor)
+            return convertColor(vo.textColor)
         },
 
         effTextColorHover: function() {
             let vo = this
-            return color2hex(vo.textColorHover)
+            return convertColor(vo.textColorHover)
         },
 
         effTextColorActive: function() {
             let vo = this
-            return color2hex(vo.textColorActive)
+            return convertColor(vo.textColorActive)
         },
 
         useTextColor: function() {
@@ -595,17 +595,17 @@ export default {
 
         effBorderColor: function() {
             let vo = this
-            return color2hex(vo.borderColor)
+            return convertColor(vo.borderColor)
         },
 
         effBorderColorHover: function() {
             let vo = this
-            return color2hex(vo.borderColorHover)
+            return convertColor(vo.borderColorHover)
         },
 
         effBorderColorActive: function() {
             let vo = this
-            return color2hex(vo.borderColorActive)
+            return convertColor(vo.borderColorActive)
         },
 
         useBorderColor: function() {
@@ -731,17 +731,17 @@ export default {
 
         effBackgroundColor: function() {
             let vo = this
-            return color2hex(vo.backgroundColor)
+            return convertColor(vo.backgroundColor)
         },
 
         effBackgroundColorHover: function() {
             let vo = this
-            return color2hex(vo.backgroundColorHover)
+            return convertColor(vo.backgroundColorHover)
         },
 
         effBackgroundColorActive: function() {
             let vo = this
-            return color2hex(vo.backgroundColorActive)
+            return convertColor(vo.backgroundColorActive)
         },
 
         useBackgroundColor: function() {
@@ -767,7 +767,7 @@ export default {
             let vo = this
 
             function genShadow(c, alpha) {
-                let r = color2hex(c)
+                let r = convertColor(c)
                 let rgba = oc.toRgba(r)
                 rgba.a = alpha
                 let s = oc.toRgbaString(rgba)
@@ -833,7 +833,7 @@ export default {
 
         effLoadingColor: function() {
             let vo = this
-            return color2hex(vo.loadingColor)
+            return convertColor(vo.loadingColor)
         },
 
         useRipple: function() {

package/src/components/WButtonCircle.vue

@@ -86,7 +86,7 @@ import sep from 'wsemi/src/sep.mjs'
 import genPm from 'wsemi/src/genPm.mjs'
 import domRipple from 'wsemi/src/domRipple.mjs'
 import oc from 'wsemi/src/color.mjs'
-import color2hex from '../js/color2hex.mjs'
+import convertColor from '../js/convertColor.mjs'
 import parseSpace from '../js/parseSpace.mjs'
 import WIcon from './WIcon.vue'
 import WIconLoading from './WIconLoading.vue'
@@ -333,22 +333,22 @@ export default {
 
         effIconColor: function() {
             let vo = this
-            return color2hex(vo.iconColor)
+            return convertColor(vo.iconColor)
         },
 
         effIconColorHover: function() {
             let vo = this
-            return color2hex(vo.iconColorHover)
+            return convertColor(vo.iconColorHover)
         },
 
         effIconColorFocus: function() {
             let vo = this
-            return color2hex(vo.iconColorFocus)
+            return convertColor(vo.iconColorFocus)
         },
 
         effIconColorActive: function() {
             let vo = this
-            return color2hex(vo.iconColorActive)
+            return convertColor(vo.iconColorActive)
         },
 
         useIconColor: function() {
@@ -429,22 +429,22 @@ export default {
 
         effBorderColor: function() {
             let vo = this
-            return color2hex(vo.borderColor)
+            return convertColor(vo.borderColor)
         },
 
         effBorderColorHover: function() {
             let vo = this
-            return color2hex(vo.borderColorHover)
+            return convertColor(vo.borderColorHover)
         },
 
         effBorderColorFocus: function() {
             let vo = this
-            return color2hex(vo.borderColorFocus)
+            return convertColor(vo.borderColorFocus)
         },
 
         effBorderColorActive: function() {
             let vo = this
-            return color2hex(vo.borderColorActive)
+            return convertColor(vo.borderColorActive)
         },
 
         useBorderColor: function() {
@@ -470,22 +470,22 @@ export default {
 
         effBackgroundColor: function() {
             let vo = this
-            return color2hex(vo.backgroundColor)
+            return convertColor(vo.backgroundColor)
         },
 
         effBackgroundColorHover: function() {
             let vo = this
-            return color2hex(vo.backgroundColorHover)
+            return convertColor(vo.backgroundColorHover)
         },
 
         effBackgroundColorFocus: function() {
             let vo = this
-            return color2hex(vo.backgroundColorFocus)
+            return convertColor(vo.backgroundColorFocus)
         },
 
         effBackgroundColorActive: function() {
             let vo = this
-            return color2hex(vo.backgroundColorActive)
+            return convertColor(vo.backgroundColorActive)
         },
 
         useBackgroundColor: function() {
@@ -511,17 +511,17 @@ export default {
 
         effRippleColor: function() {
             let vo = this
-            return color2hex(vo.rippleColor)
+            return convertColor(vo.rippleColor)
         },
 
         effLoadingColor: function() {
             let vo = this
-            return color2hex(vo.loadingColor)
+            return convertColor(vo.loadingColor)
         },
 
         effDisabledColor: function() {
             let vo = this
-            return color2hex(vo.disabledColor)
+            return convertColor(vo.disabledColor)
         },
 
         usePadding: function() {
@@ -542,7 +542,7 @@ export default {
             let vo = this
 
             function genShadow(c, alpha) {
-                let r = color2hex(c)
+                let r = convertColor(c)
                 let rgba = oc.toRgba(r)
                 rgba.a = alpha
                 let s = oc.toRgbaString(rgba)

package/src/components/WCheckbox.vue

@@ -43,7 +43,7 @@
 import { mdiCheckboxMarked, mdiCheckboxBlankOutline } from '@mdi/js/mdi.js'
 import isbol from 'wsemi/src/isbol.mjs'
 import replace from 'wsemi/src/replace.mjs'
-import color2hex from '../js/color2hex.mjs'
+import convertColor from '../js/convertColor.mjs'
 import WIcon from './WIcon.vue'
 
 
@@ -162,12 +162,12 @@ export default {
 
         effTextColor: function() {
             let vo = this
-            return color2hex(vo.textColor)
+            return convertColor(vo.textColor)
         },
 
         effTextColorHover: function() {
             let vo = this
-            return color2hex(vo.textColorHover)
+            return convertColor(vo.textColorHover)
         },
 
         useTextColor: function() {
@@ -189,17 +189,17 @@ export default {
 
         effCheckedIconColor: function() {
             let vo = this
-            return color2hex(vo.checkedIconColor)
+            return convertColor(vo.checkedIconColor)
         },
 
         effCheckedIconColorHover: function() {
             let vo = this
-            return color2hex(vo.checkedIconColorHover)
+            return convertColor(vo.checkedIconColorHover)
         },
 
         effCheckedIconColorDisabled: function() {
             let vo = this
-            return color2hex(vo.checkedIconColorDisabled)
+            return convertColor(vo.checkedIconColorDisabled)
         },
 
         useCheckedIconColor: function() {
@@ -212,17 +212,17 @@ export default {
 
         effUncheckedIconColor: function() {
             let vo = this
-            return color2hex(vo.uncheckedIconColor)
+            return convertColor(vo.uncheckedIconColor)
         },
 
         effUncheckedIconColorHover: function() {
             let vo = this
-            return color2hex(vo.uncheckedIconColorHover)
+            return convertColor(vo.uncheckedIconColorHover)
         },
 
         effUncheckedIconColorDisabled: function() {
             let vo = this
-            return color2hex(vo.uncheckedIconColorDisabled)
+            return convertColor(vo.uncheckedIconColorDisabled)
         },
 
         useUncheckedIconColor: function() {

package/src/components/WColorPickAlpha.vue

@@ -0,0 +1,220 @@
+<template>
+    <div
+        :style="`display:inline-block;`"
+        :changeValue="changeValue"
+        :changeColor="changeColor"
+    >
+
+        <div :style="`position:relative; width:${width}px; height:${height}px;`">
+
+            <div :style="`
+                position:absolute; left:0px; top:0px;
+                width:${width}px; height:${height}px;
+                background-image: url(${aimg});
+                background-repeat:repeat;
+            `">
+                <!-- 使用svg轉base64圖片 -->
+                <svg viewBox="0 0 10 10" width="10" height="10" xmlns="http://www.w3.org/2000/svg" v-if="false">
+                    <rect x="0" y="0" width="5" height="5" fill="#ddd" />
+                    <rect x="0" y="5" width="5" height="5" fill="#fff" />
+                    <rect x="5" y="0" width="5" height="5" fill="#fff" />
+                    <rect x="5" y="5" width="5" height="5" fill="#ddd" />
+                </svg>
+            </div>
+
+            <div :style="`
+                position:absolute; left:0px; top:0px;
+                width:${width}px; height:${height}px;
+                background:linear-gradient(to left, ${colorTrans}, transparent);
+            `"></div>
+
+            <div :style="`
+                position:absolute; left:${curLocLeft-Math.floor(cursorSize/2)-1}px; top:-1px;
+                width:${cursorSize+2}px; height:${height+2}px;
+                background:transparent;
+                border:1px solid #666;
+                cursor:pointer;
+                user-select:none;
+                _pointer-events:none;
+                `"
+                @mousedown="mousedownCur"
+            ></div>
+
+            <div :style="`
+                position:absolute; left:${curLocLeft-Math.floor(cursorSize/2)}px; top:0px;
+                width:${cursorSize}px; height:${height}px;
+                background:transparent;
+                border:1px solid #fff;
+                cursor:pointer;
+                user-select:none;
+                _pointer-events:none;
+                `"
+                @mousedown="mousedownCur"
+            ></div>
+
+            <div :style="`
+                position:absolute; left:0px; top:0px;
+                width:${width}px; height:${height}px;
+                cursor:pointer;
+                user-select:none;
+                _pointer-events:none;
+                `"
+                @mousedown="mousedownCur"
+            ></div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import getImgAlpha from '../js/getImgAlpha.mjs'
+import convertColor from '../js/convertColor.mjs'
+
+
+/**
+ * @vue-prop {Number} [value=1] 輸入透明度數字，介於0至1，預設1
+ * @vue-prop {String} [color='#000000'] 輸入右側原始顏色字串，預設'#000000'
+ * @vue-prop {Number} [width=200] 輸入寬度數字，單位px，預設200
+ * @vue-prop {Number} [height=20] 輸入高度數字，單位px，預設20
+ * @vue-prop {Number} [cursorSize=7] 輸入游標寬度數字，單位px，預設7
+ */
+export default {
+    components: {
+    },
+    props: {
+        value: {
+            type: Number,
+            default: 1,
+        },
+        color: {
+            type: String,
+            default: '#000000',
+        },
+        width: {
+            type: Number,
+            default: 200,
+        },
+        height: {
+            type: Number,
+            default: 20,
+        },
+        cursorSize: {
+            type: Number,
+            default: 7,
+        },
+    },
+    data: function() {
+        return {
+            aimg: getImgAlpha(),
+
+            valueTrans: 1,
+            colorTrans: '#000',
+
+            curMousedown: false,
+            curLocLeft: 0,
+            // curLocTop: 0,
+
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //windowMousemove
+        vo.windowMousemove = (e) => {
+            // console.log('windowMousemove', e)
+            if (vo.curMousedown) {
+                vo.updateCurLocByEvent(e)
+            }
+        }
+        window.addEventListener('mousemove', vo.windowMousemove, false)
+
+        //windowMouseup
+        vo.windowMouseup = (e) => {
+            // console.log('windowMouseup')
+            vo.curMousedown = false
+        }
+        window.addEventListener('mouseup', vo.windowMouseup, false)
+
+    },
+    beforeDestroy: function() {
+        //console.log('beforeDestroy')
+
+        let vo = this
+
+        //removeEventListener
+        window.removeEventListener('mousemove', vo.windowMousemove, false)
+        window.removeEventListener('mouseup', vo.windowMouseup, false)
+
+    },
+    computed: {
+
+        changeValue: function() {
+            let vo = this
+            vo.valueTrans = vo.value
+            vo.updateCurLocByValue()
+            return ''
+        },
+
+        changeColor: function() {
+            let vo = this
+            vo.colorTrans = convertColor(vo.color)
+            return ''
+        },
+
+    },
+    methods: {
+
+        updateCurLocByEvent: function(e) {
+            let vo = this
+            let rt = vo.$el.getBoundingClientRect()
+            // console.log('rt', rt)
+            let curLocLeft = e.clientX - rt.left
+            // let curLocTop = e.clientY - rt.top
+            curLocLeft = Math.min(Math.max(curLocLeft, 0), (vo.width - 1))
+            // curLocTop = Math.min(Math.max(curLocTop, 0), vo.height)
+            vo.curLocLeft = curLocLeft
+            // vo.curLocTop = curLocTop
+            // console.log('updateCurLocByEvent curLocLeft', curLocLeft)
+            // console.log('updateCurLocByEvent curLocTop', curLocTop)
+            vo.updateAlpha()
+        },
+
+        updateCurLocByValue: function() {
+            let vo = this
+
+            let curLocLeft = vo.valueTrans * (vo.width - 1)
+
+            vo.curLocLeft = curLocLeft
+            // console.log('updateCurLocByValue curLocLeft', curLocLeft)
+
+        },
+
+        updateAlpha: function() {
+            let vo = this
+            let xmin = 0
+            let xmax = (vo.width - 1)
+            let rx = 0
+            if ((xmax - xmin - 1) > 0) {
+                rx = (vo.curLocLeft - xmin) / (xmax - xmin)
+            }
+            // console.log('rx', rx)
+            let a = rx
+            // console.log('updateAlpha', a)
+            vo.$emit('input', a)
+        },
+
+        mousedownCur: function(e) {
+            let vo = this
+            vo.curMousedown = true
+            vo.updateCurLocByEvent(e)
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>