w-component-vue 2.3.69 → 2.3.70

package/src/components/WColorSelectPanel.vue

@@ -0,0 +1,123 @@
+<template>
+    <div
+        :style="`display:inline-block; background:${useBackgroundColor};`"
+        :changeValue="changeValue"
+        :changeType="changeType"
+    >
+
+        <div :style="`padding:${space}px;`">
+
+            <div
+                style="display:flex;"
+                v-show="typeTrans==='LUMP'"
+            >
+                <WColorSelectPanelBlock
+                    :size="size"
+                    :spaceGray="5"
+                    :spaceAlpha="8"
+                    :value="valueTrans"
+                    @input="(v)=>{updateColor(v,'block')}"
+
+                ></WColorSelectPanelBlock>
+            </div>
+
+            <div
+                style="display:flex;"
+                v-show="typeTrans==='HSVA'"
+            >
+                <WColorSelectPanelHsva
+                    _size="size*0.8875"
+                    :size="size"
+                    :space="10"
+                    :value="valueTrans"
+                    @input="(v)=>{updateColor(v,'hsva')}"
+                ></WColorSelectPanelHsva>
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import convertColor from '../js/convertColor.mjs'
+import WColorSelectPanelBlock from './WColorSelectPanelBlock.vue'
+import WColorSelectPanelHsva from './WColorSelectPanelHsva.vue'
+
+
+/**
+ * @vue-prop {String} [value='#FFFFFF'] 輸入顏色字串，預設'#FFFFFF'
+ * @vue-prop {String} [type='LUMP'] 輸入選擇顏色方式字串，可選'LUMP'、'HSVA'，預設'LUMP'
+ * @vue-prop {Number} [size=200] 輸入尺寸數字，代表組件基礎寬度與將自動計算高度，單位px，預設200
+ * @vue-prop {Number} [space=10] 輸入子組件間距數字，單位px，預設10
+ * @vue-prop {String} [backgroundColor='transparent'] 輸入背景顏色字串，預設'transparent'
+ *
+ */
+export default {
+    components: {
+        WColorSelectPanelBlock,
+        WColorSelectPanelHsva,
+    },
+    props: {
+        value: {
+            type: String,
+            default: '#FFFFFF',
+        },
+        type: {
+            type: String,
+            default: 'LUMP',
+        },
+        size: {
+            type: Number,
+            default: 200,
+        },
+        space: {
+            type: Number,
+            default: 10,
+        },
+        backgroundColor: {
+            type: String,
+            default: 'transparent',
+        },
+    },
+    data: function() {
+        return {
+            valueTrans: '#fff',
+            typeTrans: 'LUMP',
+        }
+    },
+    computed: {
+
+        changeValue: function() {
+            let vo = this
+            vo.valueTrans = convertColor(vo.value)
+            return ''
+        },
+
+        changeType: function() {
+            let vo = this
+            vo.typeTrans = vo.type
+            return ''
+        },
+
+        useBackgroundColor: function() {
+            let vo = this
+            return convertColor(vo.backgroundColor)
+        },
+
+    },
+    methods: {
+
+        updateColor: function(c, from) {
+            // console.log('updateColor', c, from)
+            let vo = this
+            vo.valueTrans = c
+            vo.$emit('input', c)
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WColorSelectPanelBlock.vue

@@ -0,0 +1,155 @@
+<template>
+    <div
+        :style="`display:inline-block; width:${width}px; height:${height}px;`"
+        :changeValue="changeValue"
+    >
+
+        <div style="display:flex;">
+            <WColorPickHexagonGray
+                :size="size"
+                :space="spaceGray"
+                :value="colorPure"
+                @input="(v)=>{colorPure=v;updateColor(colorPure,colorAlpha,'hexagonGray')}"
+            ></WColorPickHexagonGray>
+        </div>
+
+        <div :style="`height:${spaceAlpha}px;`"></div>
+
+        <div style="display:flex;">
+            <WColorPickAlpha
+                :width="alphaWidth"
+                :height="alphaHeight"
+                :cursorSize="7"
+                :value="colorAlpha"
+                :color="colorPure"
+                @input="(v)=>{colorAlpha=v;updateColor(colorPure,colorAlpha,'alpha')}"
+            ></WColorPickAlpha>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import oc from 'wsemi/src/color.mjs'
+import convertColor from '../js/convertColor.mjs'
+import WColorPickHexagonGray from './WColorPickHexagonGray.vue'
+import WColorPickAlpha from './WColorPickAlpha.vue'
+
+
+/**
+ * @vue-prop {String} [value='#FFFFFF'] 輸入顏色字串，預設'#FFFFFF'
+ * @vue-prop {Number} [size=200] 輸入尺寸數字，代表組件基礎寬度與將自動計算高度，單位px，預設200
+ * @vue-prop {Number} [spaceGray=5] 輸入六角型選色區與灰階選色區之間距數字，單位px，預設5
+ * @vue-prop {Number} [spaceAlpha=8] 輸入灰階選色區與選透明度區之間距數字，單位px，預設8
+ */
+export default {
+    components: {
+        WColorPickHexagonGray,
+        WColorPickAlpha,
+    },
+    props: {
+        value: {
+            type: String,
+            default: '#FFFFFF',
+        },
+        size: {
+            type: Number,
+            default: 200,
+        },
+        spaceGray: {
+            type: Number,
+            default: 5,
+        },
+        spaceAlpha: {
+            type: Number,
+            default: 8,
+        },
+    },
+    data: function() {
+        return {
+
+            colorPure: '#fff',
+            colorAlpha: 1,
+
+            pick: null,
+
+        }
+    },
+    computed: {
+
+        changeValue: function() {
+            let vo = this
+
+            let color = convertColor(vo.value)
+
+            let t = oc.toRgba(color)
+            // console.log('t', t)
+
+            let c = {
+                r: t.r,
+                g: t.g,
+                b: t.b,
+            }
+            let colorPure = oc.toRgbString(c)
+            // console.log('colorPure', colorPure)
+
+            //colorAlpha
+            let colorAlpha = t.a
+            // console.log('colorAlpha', colorAlpha)
+
+            //save
+            vo.colorPure = colorPure
+            vo.colorAlpha = colorAlpha
+
+            return ''
+        },
+
+        hexagonGrayWidth: function() {
+            let vo = this
+            return vo.size
+        },
+
+        hexagonGrayHeight: function() {
+            let vo = this
+            return vo.hexagonGrayWidth + vo.spaceGray
+        },
+
+        alphaWidth: function() {
+            let vo = this
+            return vo.size
+        },
+
+        alphaHeight: function() {
+            let vo = this
+            return vo.alphaWidth / 10
+        },
+
+        width: function() {
+            let vo = this
+            return vo.size
+        },
+
+        height: function() {
+            let vo = this
+            return vo.hexagonGrayHeight + vo.spaceAlpha + vo.alphaHeight
+        },
+
+    },
+    methods: {
+
+        updateColor: function(c, a, from) {
+            // console.log('updateColor', c, a, from)
+            let vo = this
+            let t = oc.toRgba(c)
+            t.a = a
+            let color = oc.toRgbaString(t)
+            // console.log('color', color)
+            vo.$emit('input', color)
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WColorSelectPanelHsva.vue

@@ -0,0 +1,236 @@
+<template>
+    <div
+        :style="`display:inline-block; width:${width}px; height:${height}px;`"
+        :changeParams="changeParams"
+    >
+
+        <div style="display:flex;">
+            <WColorPickHsv
+                :width="hsvWidth"
+                :height="hsvHeight"
+                :cursorSize="14"
+                :color="colorHue"
+                v-model="colorPure"
+                @input="(v)=>{updateColor(v,'hsv')}"
+            ></WColorPickHsv>
+        </div>
+
+        <div :style="`height:${space}px;`"></div>
+
+        <div style="display:flex;">
+            <WColorPickHue
+                :width="hueWidth"
+                :height="hueHeight"
+                :cursorSize="7"
+                v-model="colorHue"
+                @input="(v)=>{updateColor(v,'hue')}"
+            ></WColorPickHue>
+        </div>
+
+        <div :style="`height:${space}px;`"></div>
+
+        <div style="display:flex;">
+            <WColorPickAlpha
+                :width="alphaWidth"
+                :height="alphaHeight"
+                :colorNum="10"
+                :color="colorPure"
+                v-model="colorAlpha"
+                @input="(v)=>{updateColor(v,'alpha')}"
+            ></WColorPickAlpha>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import oc from 'wsemi/src/color.mjs'
+import convertColor from '../js/convertColor.mjs'
+import WColorPickHsv from './WColorPickHsv.vue'
+import WColorPickHue from './WColorPickHue.vue'
+import WColorPickAlpha from './WColorPickAlpha.vue'
+
+
+/**
+ * @vue-prop {String} [value='#FFFFFF'] 輸入顏色字串，預設'#FFFFFF'
+ * @vue-prop {Number} [size=200] 輸入尺寸數字，代表組件基礎寬度與將自動計算高度，單位px，預設200
+ * @vue-prop {Number} [space=10] 輸入HSV選色區、HUE選色區、選透明度區之間距數字，單位px，預設10
+ */
+export default {
+    components: {
+        WColorPickHsv,
+        WColorPickHue,
+        WColorPickAlpha,
+    },
+    props: {
+        value: {
+            type: String,
+            default: '#FFFFFF',
+        },
+        size: {
+            type: Number,
+            default: 200,
+        },
+        space: {
+            type: Number,
+            default: 10,
+        },
+    },
+    data: function() {
+        return {
+
+            lock: false,
+
+            valueTrans: null,
+
+            colorHue: '#f00',
+            colorPure: '#fff',
+            colorAlpha: 1,
+
+        }
+    },
+    computed: {
+
+        changeParams: function() {
+            let vo = this
+
+            //check, value一樣就不處理
+            if (vo.value === vo.valueTrans) {
+                return
+            }
+
+            //check
+            if (vo.lock) {
+                return
+            }
+
+            //lock, 因變更colorHue會觸發WColorPickHsv的emit, 此會導致反算value, 又因rgb與hsv有反算誤差, 故會導致變更value時因誤差又馬上須更新value問題, 此處用上鎖機制避免同樣value反算
+            vo.lock = true
+
+            // console.log('vo.value', vo.value)
+            vo.valueTrans = convertColor(vo.value)
+            // console.log('vo.valueTrans', vo.valueTrans)
+
+            let t = oc.toHsva(vo.value)
+            // console.log('t', t)
+
+            let colorHue = '#f00'
+            if (true) {
+                let tt = {
+                    h: t.h,
+                    s: 1,
+                    v: 1,
+                }
+                colorHue = oc.toHexString(tt)
+            }
+            // console.log('colorHue', colorHue)
+
+            let colorPure = '#fff'
+            if (true) {
+                let tt = {
+                    h: t.h,
+                    s: t.s,
+                    v: t.v,
+                }
+                colorPure = oc.toHexString(tt)
+            }
+            // console.log('colorPure', colorPure)
+
+            let colorAlpha = 1
+            if (true) {
+                colorAlpha = t.a
+            }
+            // console.log('colorAlpha', colorAlpha)
+
+            //save
+            vo.colorHue = colorHue
+            vo.colorPure = colorPure
+            vo.colorAlpha = colorAlpha
+
+            return ''
+        },
+
+        hsvWidth: function() {
+            let vo = this
+            return vo.size
+        },
+
+        hsvHeight: function() {
+            let vo = this
+            return vo.hsvWidth
+        },
+
+        hueWidth: function() {
+            let vo = this
+            return vo.size
+        },
+
+        hueHeight: function() {
+            let vo = this
+            return vo.hueWidth / 10
+        },
+
+        alphaWidth: function() {
+            let vo = this
+            return vo.size
+        },
+
+        alphaHeight: function() {
+            let vo = this
+            return vo.alphaWidth / 10
+        },
+
+        width: function() {
+            let vo = this
+            return vo.size
+        },
+
+        height: function() {
+            let vo = this
+            return vo.hsvHeight + vo.space + vo.hueHeight + vo.space + vo.alphaHeight
+        },
+
+    },
+    methods: {
+
+        updateColor: function(v, from) {
+            // console.log('updateColor', v, from)
+
+            let vo = this
+
+            //unlock
+            if (vo.lock && from === 'hsv') {
+                vo.lock = false
+                return
+            }
+
+            let t = oc.toHsva(vo.colorHue)
+            // console.log('t', vo.colorHue, t)
+
+            let p = oc.toHsva(vo.colorPure)
+            // console.log('p', vo.colorPure, p)
+
+            let c = {
+                h: t.h,
+                s: p.s,
+                v: p.v,
+                a: vo.colorAlpha,
+            }
+            // console.log('c1', c)
+            c = oc.toRgbaString(c)
+            // console.log('c2', c)
+
+            //save
+            vo.valueTrans = c
+
+            //emit
+            vo.$emit('input', c)
+
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WComponentVue.vue

@@ -7,6 +7,17 @@ import WButtonChip from './WButtonChip.vue'
 import WButtonCircle from './WButtonCircle.vue'
 import WCheckbox from './WCheckbox.vue'
 import WCkeditorVueDyn from './WCkeditorVueDyn.vue'
+import WColorPickAlpha from './WColorPickAlpha.vue'
+import WColorPickHexagon from './WColorPickHexagon.vue'
+import WColorPickHexagonGray from './WColorPickHexagonGray.vue'
+import WColorPickHsv from './WColorPickHsv.vue'
+import WColorPickHue from './WColorPickHue.vue'
+import WColorPickStripe from './WColorPickStripe.vue'
+import WColorSelect from './WColorSelect.vue'
+import WColorSelectInput from './WColorSelectInput.vue'
+import WColorSelectPanel from './WColorSelectPanel.vue'
+import WColorSelectPanelBlock from './WColorSelectPanelBlock.vue'
+import WColorSelectPanelHsva from './WColorSelectPanelHsva.vue'
 import WConfirm from './WConfirm.vue'
 import WDialog from './WDialog.vue'
 import WDrawer from './WDrawer.vue'
@@ -94,6 +105,17 @@ let WComponentVue = {
         Vue.component('w-button-circle', WButtonCircle)
         Vue.component('w-checkbox', WCheckbox)
         Vue.component('w-ckeditor-vue-dyn', WCkeditorVueDyn)
+        Vue.component('w-color-pick-alpha', WColorPickAlpha)
+        Vue.component('w-color-pick-hexagon', WColorPickHexagon)
+        Vue.component('w-color-pick-hexagon-gray', WColorPickHexagonGray)
+        Vue.component('w-color-pick-hsv', WColorPickHsv)
+        Vue.component('w-color-pick-hue', WColorPickHue)
+        Vue.component('w-color-pick-stripe', WColorPickStripe)
+        Vue.component('w-color-select', WColorSelect)
+        Vue.component('w-color-select-input', WColorSelectInput)
+        Vue.component('w-color-select-panel', WColorSelectPanel)
+        Vue.component('w-color-select-panel-block', WColorSelectPanelBlock)
+        Vue.component('w-color-select-panel-hsva', WColorSelectPanelHsva)
         Vue.component('w-confirm', WConfirm)
         Vue.component('w-dialog', WDialog)
         Vue.component('w-drawer', WDrawer)

package/src/components/WConfirm.vue

@@ -88,7 +88,7 @@
 
 <script>
 import { mdiAlert, mdiCheckboxMarkedCircle, mdiCloseCircle } from '@mdi/js'
-import color2hex from '../js/color2hex.mjs'
+import convertColor from '../js/convertColor.mjs'
 import WButtonChip from './WButtonChip.vue'
 import WIcon from './WIcon.vue'
 import WDialog from './WDialog.vue'
@@ -254,10 +254,10 @@ export default {
 
             let s = {}
             s['padding'] = '15px 20px'
-            s['background-color'] = color2hex(vo.headerBackgroundColor)
+            s['background-color'] = convertColor(vo.headerBackgroundColor)
             s['border-bottom'] = '1px solid #ddd'
             s['font-size'] = '1.2rem'
-            s['color'] = color2hex(vo.titleColor)
+            s['color'] = convertColor(vo.titleColor)
             return s
         },
 
@@ -268,11 +268,11 @@ export default {
 
             let s = {}
             s['padding'] = '20px 15px'
-            s['background-color'] = color2hex(vo.contentBackgroundColor)
+            s['background-color'] = convertColor(vo.contentBackgroundColor)
             s['display'] = 'table'
             s['width'] = '100%'
             //s['align-items'] = 'center'
-            s['color'] = color2hex(vo.contentColor)
+            s['color'] = convertColor(vo.contentColor)
             s['overflow-y'] = 'auto'
             return s
         },
@@ -284,7 +284,7 @@ export default {
 
             let s = {}
             s['padding'] = '15px'
-            s['background-color'] = color2hex(vo.footerBackgroundColor)
+            s['background-color'] = convertColor(vo.footerBackgroundColor)
             s['border-top'] = '1px solid #ddd'
             s['text-align'] = 'right'
             return s

package/src/components/WDialog.vue

@@ -293,7 +293,7 @@ import genID from 'wsemi/src/genID.mjs'
 import genPm from 'wsemi/src/genPm.mjs'
 import replace from 'wsemi/src/replace.mjs'
 import domIsClientXYIn from 'wsemi/src/domIsClientXYIn.mjs'
-import color2hex from '../js/color2hex.mjs'
+import convertColor from '../js/convertColor.mjs'
 import domResize from '../js/domResize.mjs'
 import domZIndex from '../js/domZIndex.mjs'
 import WButtonCircle from './WButtonCircle.vue'
@@ -609,7 +609,7 @@ export default {
 
         useOverlayColor: function() {
             let vo = this
-            return color2hex(vo.overlayColor)
+            return convertColor(vo.overlayColor)
         },
 
         usePanelShadowStyle: function() {
@@ -630,12 +630,12 @@ export default {
 
         useTitleColor: function () {
             let vo = this
-            return color2hex(vo.titleColor)
+            return convertColor(vo.titleColor)
         },
 
         useHeaderBackgroundColor: function() {
             let vo = this
-            return color2hex(vo.headerBackgroundColor)
+            return convertColor(vo.headerBackgroundColor)
         },
 
         useHeaderShadowStyle: function() {
@@ -649,12 +649,12 @@ export default {
 
         useContentTextColor: function () {
             let vo = this
-            return color2hex(vo.contentTextColor)
+            return convertColor(vo.contentTextColor)
         },
 
         useContentBackgroundColor: function () {
             let vo = this
-            return color2hex(vo.contentBackgroundColor)
+            return convertColor(vo.contentBackgroundColor)
         },
 
     },

package/src/components/WDrawer.vue

@@ -124,7 +124,7 @@ import domIsClientXYIn from 'wsemi/src/domIsClientXYIn.mjs'
 import domGetWindowSize from 'wsemi/src/domGetWindowSize.mjs'
 import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
 import domResize from '../js/domResize.mjs'
-import color2hex from '../js/color2hex.mjs'
+import convertColor from '../js/convertColor.mjs'
 
 
 /**
@@ -390,7 +390,7 @@ export default {
             if (!this.afloatTrans) {
                 return 'transparent'
             }
-            return color2hex(this.overlayColor)
+            return convertColor(this.overlayColor)
         },
 
         useOverlayPosition: function() {
@@ -441,11 +441,11 @@ export default {
         },
 
         useDrawerBarColor: function() {
-            return color2hex(this.drawerBarColor)
+            return convertColor(this.drawerBarColor)
         },
 
         useDrawerBarBorderColor: function() {
-            return color2hex(this.drawerBarBorderColor)
+            return convertColor(this.drawerBarBorderColor)
         },
 
     },