w-component-vue 2.1.57

package/src/components/WButtonCircle.vue

@@ -0,0 +1,459 @@
+<template>
+    <div
+        style="display:inline-block; vertical-align:middle; outline:none; user-select:none;"
+        :role="editable?role:''"
+        :changeLoading="changeLoading"
+    >
+
+        <v-tooltip
+            bottom
+            transition="slide-y-transition"
+            :disabled="!tooltip"
+        >
+
+            <template v-slot:activator="{ on }">
+
+                <!-- v-tooltip下第1層dom會無法拖曳, 點擊事件於這層觸發, 且組件內tabindex不能重複, 故本層設定為0 -->
+                <div
+                    v-on="on"
+                    :style="`position:relative; transition:all 0.3s; border-radius:50%; ${usePadding} background:${useBackgroundColor}; ${editable?'cursor:pointer;':''} outline:none; user-select:none; box-shadow:${useShadow};`"
+                    tabindex="0"
+                    @mouseenter="hoverTrans=true;$emit('mouseenter',$event)"
+                    @mouseleave="hoverTrans=false;$emit('mouseleave',$event)"
+                    @focus="focusTrans=true"
+                    @blur="focusTrans=false"
+                    @keyup.enter="clickBtn($event)"
+                    @click="ripple($event);clickBtn($event)"
+                >
+
+                    <div style="display:flex; align-items:center; justify-content:center;">
+
+                        <WIcon
+                            :icon="icon"
+                            :color="useIconColor"
+                            :size="iconSize"
+                            v-if="!loadingTrans"
+                        ></WIcon>
+
+                        <WIconLoading
+                            :name="'cir-rotate'"
+                            :color="effLoadingColor"
+                            :size="iconSize"
+                            v-if="loadingTrans"
+                        ></WIconLoading>
+
+                    </div>
+
+                    <div
+                        style="position:absolute; left:0; right:0; top:0; bottom:0;"
+                        v-if="!editable"
+                    >
+                        <div :style="`border-radius:50%; overflow:hidden; width:100%; height:100%;`">
+                            <div :style="`background:${effDisabledColor}; height:100%;`">
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+
+            </template>
+
+            <span>{{tooltip}}</span>
+
+        </v-tooltip>
+
+    </div>
+</template>
+
+<script>
+import map from 'lodash/map'
+import join from 'lodash/join'
+import isnum from 'wsemi/src/isnum.mjs'
+import isestr from 'wsemi/src/isestr.mjs'
+import cdbl from 'wsemi/src/cdbl.mjs'
+import replace from 'wsemi/src/replace.mjs'
+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/vuetifyColor.mjs'
+import parseSpace from '../js/parseSpace.mjs'
+import WIcon from './WIcon.vue'
+import WIconLoading from './WIconLoading.vue'
+
+
+/**
+ * @vue-prop {String} [tooltip=''] 輸入提示文字字串，預設''
+ * @vue-prop {String} [icon=''] 輸入圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設''
+ * @vue-prop {Number} [iconSize=22] 輸入圖標大小，單位為px，預設22
+ * @vue-prop {String} [iconColor='grey darken-1'] 輸入按鈕圖標顏色字串，預設'grey darken-1'
+ * @vue-prop {String} [iconColorHover='grey darken-2'] 輸入滑鼠移入時按鈕圖標顏色字串，預設'grey darken-2'
+ * @vue-prop {String} [iconColorFocus='grey darken-3'] 輸入取得焦點時按鈕圖標顏色字串，預設'grey darken-3'
+ * @vue-prop {String} [backgroundColor='rgb(241,241,241)'] 輸入按鈕背景顏色字串，預設'rgb(241,241,241)'
+ * @vue-prop {String} [backgroundColorHover='rgb(236,236,236)'] 輸入滑鼠移入時按鈕背景顏色字串，預設'rgb(236,236,236)'
+ * @vue-prop {String} [backgroundColorFocus='rgb(230,230,230)'] 輸入取得焦點時按鈕背景顏色字串，預設'rgb(230,230,230)'
+ * @vue-prop {String} [rippleColor='rgba(255, 255, 255, 0.5)'] 輸入ripple效果顏色字串，預設'rgba(255, 255, 255, 0.5)'
+ * @vue-prop {Object} [paddingStyle={v:4,h:4}] 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:4,h:4}
+ * @vue-prop {Boolean} [shadow=true] 輸入是否為陰影模式，預設true
+ * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
+ * @vue-prop {Boolean} [loading=false] 輸入是否為載入模式，預設false
+ * @vue-prop {String} [loadingColor='grey darken-2'] 輸入載入圖標顏色字串，預設'grey darken-2'
+ * @vue-prop {Boolean} [promiseUnlock=false] 輸入是否點擊後自動設定為loading為true並需使用promise解鎖布林值，預設false
+ * @vue-prop {String} [role='button'] 輸入角色字串，預設'button'
+ * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
+ * @vue-prop {String} [disabledColor='rgba(255,255,255,0.5)'] 輸入非編輯模式時遮罩顏色字串，預設'rgba(255,255,255,0.5)'
+ */
+export default {
+    components: {
+        WIcon,
+        WIconLoading,
+    },
+    props: {
+        tooltip: {
+            type: String,
+            default: '',
+        },
+        icon: {
+            type: String,
+            default: '',
+        },
+        iconSize: {
+            type: Number,
+            default: 22,
+        },
+        iconColor: {
+            type: String,
+            default: 'grey darken-1',
+        },
+        iconColorHover: {
+            type: String,
+            default: 'grey darken-2',
+        },
+        iconColorFocus: {
+            type: String,
+            default: 'grey darken-3',
+        },
+        backgroundColor: {
+            type: String,
+            default: 'rgb(241,241,241)',
+        },
+        backgroundColorHover: {
+            type: String,
+            default: 'rgb(236,236,236)',
+        },
+        backgroundColorFocus: {
+            type: String,
+            default: 'rgb(230,230,230)',
+        },
+        shadow: {
+            type: Boolean,
+            default: true,
+        },
+        shadowStyle: {
+            type: String,
+            // default: '0 12px 20px -10px {backgroundColorAlpha=0.28}, 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px {backgroundColorAlpha=0.2}',
+            //使用黑色短陰影比較符合button形象
+            default: '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
+        },
+        rippleColor: {
+            type: String,
+            default: 'rgba(255, 255, 255, 0.5)',
+        },
+        paddingStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    v: 4,
+                    h: 4,
+                }
+            },
+        },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+        loadingColor: {
+            type: String,
+            default: 'grey darken-2',
+        },
+        promiseUnlock: {
+            type: Boolean,
+            default: false,
+        },
+        role: {
+            type: String,
+            default: 'button',
+        },
+        editable: {
+            type: Boolean,
+            default: true,
+        },
+        disabledColor: {
+            type: String,
+            default: 'rgba(255,255,255,0.5)',
+        },
+    },
+    data: function() {
+        return {
+            loadingTrans: false,
+            hoverTrans: false,
+            focusTrans: false,
+        }
+    },
+    mounted: function() {
+    },
+    computed: {
+
+        changeLoading: function() {
+            //console.log('computed changeLoading')
+
+            let vo = this
+
+            //save
+            vo.loadingTrans = vo.loading
+
+            return ''
+        },
+
+        effIconColor: function() {
+            let vo = this
+            return color2hex(vo.iconColor)
+        },
+
+        effIconColorHover: function() {
+            let vo = this
+            return color2hex(vo.iconColorHover)
+        },
+
+        effIconColorFocus: function() {
+            let vo = this
+            return color2hex(vo.iconColorFocus)
+        },
+
+        useIconColor: function() {
+            let vo = this
+            let r
+            if (vo.loadingTrans) {
+                return vo.effIconColor
+            }
+            r = vo.focusTrans ? vo.effIconColorFocus : vo.hoverTrans ? vo.effIconColorHover : vo.effIconColor
+            if (!vo.editable) {
+                // r = vo.focusTrans ? vo.effIconColorFocus : vo.effIconColor
+                r = vo.effIconColor
+            }
+            return r
+        },
+
+        effBackgroundColor: function() {
+            let vo = this
+            return color2hex(vo.backgroundColor)
+        },
+
+        effBackgroundColorHover: function() {
+            let vo = this
+            return color2hex(vo.backgroundColorHover)
+        },
+
+        effBackgroundColorFocus: function() {
+            let vo = this
+            return color2hex(vo.backgroundColorFocus)
+        },
+
+        useBackgroundColor: function() {
+            let vo = this
+            let r
+            if (vo.loadingTrans) {
+                return vo.effBackgroundColor
+            }
+            r = vo.focusTrans ? vo.effBackgroundColorFocus : vo.hoverTrans ? vo.effBackgroundColorHover : vo.effBackgroundColor
+            if (!vo.editable) {
+                r = vo.focusTrans ? vo.effBackgroundColorFocus : vo.effBackgroundColor
+            }
+            return r
+        },
+
+        effRippleColor: function() {
+            let vo = this
+            return color2hex(vo.rippleColor)
+        },
+
+        effLoadingColor: function() {
+            let vo = this
+            return color2hex(vo.loadingColor)
+        },
+
+        effDisabledColor: function() {
+            let vo = this
+            return color2hex(vo.disabledColor)
+        },
+
+        usePadding: function() {
+            //console.log('computed usePadding')
+
+            let vo = this
+
+            //parseSpace
+            let cs = parseSpace(vo.paddingStyle, { ext: { left: vo.shiftLeft, right: vo.shiftRight } })
+
+            //padding
+            let padding = `padding:${cs};`
+
+            return padding
+        },
+
+        useShadow: function() {
+            let vo = this
+
+            function genShadow(c, alpha) {
+                let r = color2hex(c)
+                let rgba = oc.toRgba(r)
+                rgba.a = alpha
+                let s = oc.toRgbaString(rgba)
+                return s
+            }
+
+            function repColor(tmp, tar, color) {
+                tmp = replace(tmp, '}', '{')
+                let s = sep(tmp, '{')
+                s = map(s, (v) => {
+                    if (v.indexOf(tar) >= 0) {
+                        let ss = sep(v, '=')
+                        let alpha = ss[1]
+                        if (isnum(alpha)) {
+                            alpha = cdbl(alpha)
+                        }
+                        else {
+                            alpha = 0.2
+                        }
+                        return genShadow(color, alpha)
+                    }
+                    return v
+                })
+                return join(s, '')
+            }
+
+            // //shadowActive
+            // if (vo.active && vo.shadowActive) {
+            //     if (isestr(vo.shadowActiveStyle)) {
+            //         return repColor(vo.shadowActiveStyle, 'backgroundColorActiveAlpha', vo.backgroundColorActive)
+            //     }
+            //     return ''
+            // }
+
+            //shadow
+            if (vo.shadow) {
+                if (isestr(vo.shadowStyle)) {
+                    return repColor(vo.shadowStyle, 'backgroundColorAlpha', vo.backgroundColor)
+                }
+                return ''
+            }
+
+            return ''
+        },
+
+    },
+    methods: {
+
+        ripple: function(e) {
+            // console.log('methods ripple', e)
+
+            let vo = this
+
+            //check
+            if (!vo.editable) {
+                return
+            }
+            if (vo.loadingTrans) {
+                return
+            }
+
+            //nextTick
+            vo.$nextTick(() => {
+
+                //domRipple
+                domRipple(e.currentTarget, e, {
+                    color: vo.effRippleColor,
+                    timeDuration: 500,
+                })
+
+            })
+
+        },
+
+        clickBtn: function (ev) {
+            //console.log('methods clickBtn', ev)
+
+            let vo = this
+
+            //check
+            if (!vo.editable) {
+                return
+            }
+            if (vo.loadingTrans) {
+                return
+            }
+
+            //promiseUnlock
+            if (!vo.promiseUnlock) {
+
+                //$nextTick
+                vo.$nextTick(() => {
+
+                    //emit
+                    vo.$emit('click')
+
+                })
+
+            }
+            else {
+
+                //loadingTrans
+                vo.loadingTrans = true
+
+                //$nextTick
+                vo.$nextTick(() => {
+
+                    //emit
+                    vo.$emit('update:loading', vo.loadingTrans)
+
+                })
+
+                //pm
+                let pm = genPm()
+
+                //$nextTick
+                vo.$nextTick(() => {
+
+                    //emit
+                    vo.$emit('click', { pm })
+
+                })
+
+                //pm finally
+                pm
+                    .catch()
+                    .finally(() => {
+
+                        //loadingTrans
+                        vo.loadingTrans = false
+
+                        //$nextTick
+                        vo.$nextTick(() => {
+
+                            //emit
+                            vo.$emit('update:loading', vo.loadingTrans)
+
+                        })
+
+                    })
+
+            }
+
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WCheckbox.vue

@@ -0,0 +1,154 @@
+<template>
+    <div
+        :style="`display:inline-block; ${editable?'cursor:pointer;':''}`"
+        :changeParam="changeParam"
+        @click="toogleValue"
+    >
+        <WIcon
+            :icon="checkedIcon"
+            :color="editable?checkedIconColor:checkedIconColorDisabled"
+            :size="iconSize"
+            v-if="b"
+        ></WIcon>
+        <WIcon
+            :icon="uncheckedIcon"
+            :color="editable?uncheckedIconColor:uncheckedIconColorDisabled"
+            :size="iconSize"
+            v-else
+        ></WIcon>
+    </div>
+</template>
+
+<script>
+import { mdiCheckboxMarked, mdiCheckboxBlankOutline } from '@mdi/js/mdi.js'
+import isbol from 'wsemi/src/isbol.mjs'
+import WIcon from './WIcon.vue'
+
+
+/**
+ * @vue-prop {Boolean|String} [value=false] 輸入是否狀態的布林值或字串，可接受true或false，或是'y'或'n'，預設false
+ * @vue-prop {Number} [iconSize=24] 輸入圖標大小，單位為px，預設24
+ * @vue-prop {String} [checkedIcon=mdiCheckboxMarked] 輸入有效(true|'y')圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCheckboxMarked
+ * @vue-prop {String} [checkedIconColor='blue darken-3'] 輸入可編輯時，有效(true|'y')圖標顏色字串，預設'blue darken-3'
+ * @@vue-prop {String} [checkedIconColorDisabled='grey'] 輸入不可編輯時，有效(true|'y')圖標顏色字串，預設'grey'
+ * @vue-prop {String} [uncheckedIcon=mdiCheckboxBlankOutline] 輸入無效(false|'n')圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCheckboxBlankOutline
+ * @vue-prop {String} [uncheckedIconColor='blue darken-3'] 輸入可編輯時，無效(false|'n')圖標顏色字串，預設'blue darken-3'
+ * @@vue-prop {String} [uncheckedIconColorDisabled='grey'] 輸入不可編輯時，無效(false|'n')圖標顏色字串，預設'grey'
+ * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
+ */
+export default {
+    components: {
+        WIcon,
+    },
+    props: {
+        value: {
+            type: [Boolean, String],
+            default: false,
+        },
+        iconSize: {
+            type: Number,
+            default: 24,
+        },
+        checkedIcon: {
+            type: String,
+            default: mdiCheckboxMarked,
+        },
+        checkedIconColor: {
+            type: String,
+            default: 'blue darken-3',
+        },
+        checkedIconColorDisabled: {
+            type: String,
+            default: 'grey',
+        },
+        uncheckedIcon: {
+            type: String,
+            default: mdiCheckboxBlankOutline,
+        },
+        uncheckedIconColor: {
+            type: String,
+            default: 'blue darken-3',
+        },
+        uncheckedIconColorDisabled: {
+            type: String,
+            default: 'grey',
+        },
+        editable: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data: function() {
+        return {
+            b: false,
+        }
+    },
+    computed: {
+
+        changeParam: function () {
+            //console.log('computed changeParam')
+
+            let vo = this
+
+            //value for trigger
+            let value = vo.value
+
+            //b
+            if (isbol(value)) {
+                vo.b = value
+            }
+            else {
+                vo.b = (value === 'y')
+            }
+
+            return ''
+        },
+
+    },
+    methods: {
+
+        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)) {
+                value = false
+                if (b) {
+                    value = true
+                }
+            }
+            else {
+                value = 'n'
+                if (b) {
+                    value = 'y'
+                }
+            }
+
+            //nextTick
+            vo.$nextTick(() => {
+
+                //emit
+                vo.$emit('input', value)
+
+            })
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WCkeditorVueDyn.vue

@@ -0,0 +1,86 @@
+<template>
+    <component ref="$self" :is="cmpName" :settings="settings" :height="height" :editable="editable" :value="value" @input="(v)=>{$emit('input',v)}"></component>
+    <!-- ref=$self為供外部存取組件之用 -->
+</template>
+
+<script>
+import importResources from 'wsemi/src/importResources.mjs'
+import WIconLoading from './WIconLoading.vue'
+import getVue from '../js/getVue.mjs'
+
+
+/**
+ * @vue-prop {Array} [pathItems=['詳見原始碼']] 輸入ckeditor、ckeditor5-vue與w-ckeditor-vue組件js檔案位置字串陣列，預設詳見原始碼處props->pathItems->default
+ * @vue-prop {String} [value=''] 輸入富文本字串，預設為''
+ * @vue-prop {Object} [settings={}] 輸入ckeditor設定物件，預設值為{}，內部預設值詳見w-ckeditor-vue原始碼
+ * @vue-prop {Number} [height=250] 輸入高度數字，單位為px，預設為250
+ * @vue-prop {Boolean} [editable=true] 輸入是否允許編輯，預設true
+ */
+export default {
+    components: {
+        WIconLoading,
+    },
+    props: {
+        pathItems: {
+            type: Array,
+            default: () => [
+                'https://cdn.jsdelivr.net/npm/w-ckeditor-vue@1.0.24/dist/ckeditor.js',
+                'https://cdn.jsdelivr.net/npm/w-ckeditor-vue@1.0.24/dist/w-ckeditor-vue.umd.js',
+            ],
+        },
+        value: {
+            type: String,
+            default: '',
+        },
+        settings: {
+            type: Object,
+            default: () => {},
+        },
+        height: {
+            type: Number,
+            default: 250,
+        },
+        editable: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data: function() {
+        return {
+            cmpName: 'WIconLoading',
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //importResources
+        importResources(vo.pathItems)
+            .then((res) => {
+                //console.log('res', res)
+                if (res !== 'loaded') {
+
+                    //cmp
+                    let cmp = window['w-ckeditor-vue']
+                    if (cmp.default) {
+                        cmp = cmp.default
+                    }
+
+                    //use
+                    getVue().component('w-ckeditor-vue', cmp)
+
+                }
+                vo.cmpName = 'w-ckeditor-vue'
+            })
+
+    },
+    computed: {
+    },
+    methods: {
+    },
+}
+</script>
+
+<style scoped>
+</style>