w-component-vue 2.1.57

package/src/components/WTreeIconCheckbox.vue

@@ -0,0 +1,170 @@
+<template>
+    <div
+        :style="`position:relative; display:inline-block; user-select:none; ${editable?'cursor:pointer;':''} outline:none;`"
+        tabindex="0"
+        @keyup.enter="emitClick"
+        @click="emitClick"
+    >
+
+        <div style="display:inline-block; height:100%; display:flex; align-items:center; justify-content:center;" v-if="mode==='unchecked'">
+            <span style="display:flex;">
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useUncheckedColor" width="24px" height="24px" viewBox="0 0 24 24">
+                    <path d="M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"></path>
+                </svg>
+            </span>
+        </div>
+
+        <div style="display:inline-block; height:100%; display:flex; align-items:center; justify-content:center;" v-if="mode==='checked'">
+            <span style="display:flex;">
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useCheckedColor" width="24px" height="24px" viewBox="0 0 24 24">
+                    <path v-if="false" d="M19,19H5V5H15V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V11H19M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"></path>
+                    <path d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"></path>
+                </svg>
+            </span>
+        </div>
+
+        <div style="display:inline-block; height:100%; display:flex; align-items:center; justify-content:center;" v-if="mode==='checkedPartially'">
+            <span style="display:flex;">
+                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useCheckedPartiallyColor" width="24px" height="24px" viewBox="0 0 24 24">
+                    <path v-if="false" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z"></path>
+                    <path d="M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"></path>
+                </svg>
+            </span>
+        </div>
+
+        <div style="position:absolute; z-index:1; left:0; top:0; bottom:0; right:0; margin:auto;">
+            <div style="height:100%; display:flex; align-items:center; justify-content:center;" v-if="!editable">
+                <div :style="`display:inline-block; width:30px; height:2px; border-top:2px solid #fff; transform:translateY(-1px) rotate(45deg);`"></div>
+            </div>
+        </div>
+
+        <div style="position:absolute; z-index:1; left:0; top:0; bottom:0; right:0; margin:auto;">
+            <div style="height:100%; display:flex; align-items:center; justify-content:center;" v-if="!editable">
+                <div :style="`display:inline-block; width:30px; height:2px; border-top:2px solid ${useDisabledColor}; transform:translateY(1px)rotate(45deg);`"></div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import color2hex from '../js/vuetifyColor.mjs'
+
+
+/**
+ * @vue-prop {String} [mode='unchecked'] 輸入勾選模式字串，可選'unchecked'、'checked'、'checkedPartially'，預設'unchecked'
+ * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
+ * @vue-prop {String} [uncheckedColor='grey darken-2'] 輸入未勾選時顏色字串，預設'grey darken-2'
+ * @vue-prop {String} [uncheckedDisabledColor='grey'] 輸入禁用時未勾選時顏色字串，預設'grey'
+ * @vue-prop {String} [checkedColor='blue darken-3'] 輸入勾選時顏色字串，預設'blue darken-3'
+ * @vue-prop {String} [checkedDisabledColor='grey'] 輸入禁用時勾選時顏色字串，預設'grey'
+ * @vue-prop {String} [checkedPartiallyColor='blue darken-3'] 輸入部份勾選時(子節點任一有勾選但非全部勾選)顏色字串，預設'blue darken-3'
+ * @vue-prop {String} [checkedPartiallyDisabledColor='grey'] 輸入禁用部份勾選時(子節點任一有勾選但非全部勾選)顏色字串，預設'grey'
+ */
+export default {
+    components: {
+    },
+    props: {
+        mode: {
+            type: String,
+            default: 'unchecked',
+        },
+        editable: {
+            type: Boolean,
+            default: true,
+        },
+        uncheckedColor: {
+            type: String,
+            default: 'grey darken-2',
+        },
+        uncheckedDisabledColor: {
+            type: String,
+            default: 'grey',
+        },
+        checkedColor: {
+            type: String,
+            default: 'blue darken-3',
+        },
+        checkedDisabledColor: {
+            type: String,
+            default: 'grey',
+        },
+        checkedPartiallyColor: {
+            type: String,
+            default: 'blue darken-3',
+        },
+        checkedPartiallyDisabledColor: {
+            type: String,
+            default: 'grey',
+        },
+    },
+    data: function() {
+        return {
+        }
+    },
+    computed: {
+
+        useDisabledColor: function() {
+            //console.log('computed useDisabledColor')
+
+            let vo = this
+
+            if (vo.mode === 'checked') {
+                return color2hex(vo.checkedDisabledColor)
+            }
+            else if (vo.mode === 'unchecked') {
+                return color2hex(vo.uncheckedDisabledColor)
+            }
+            return color2hex(vo.checkedPartiallyDisabledColor)
+        },
+
+        useUncheckedColor: function() {
+            //console.log('computed useUncheckedColor')
+
+            let vo = this
+
+            if (vo.editable) {
+                return color2hex(vo.uncheckedColor)
+            }
+            return color2hex(vo.uncheckedDisabledColor)
+        },
+
+        useCheckedColor: function() {
+            //console.log('computed useCheckedColor')
+
+            let vo = this
+
+            if (vo.editable) {
+                return color2hex(vo.checkedColor)
+            }
+            return color2hex(vo.checkedDisabledColor)
+        },
+
+        useCheckedPartiallyColor: function() {
+            //console.log('computed useCheckedPartiallyColor')
+
+            let vo = this
+
+            if (vo.editable) {
+                return color2hex(vo.checkedPartiallyColor)
+            }
+            return color2hex(vo.checkedPartiallyDisabledColor)
+        },
+
+    },
+    methods: {
+
+        emitClick: function(v) {
+            if (!this.editable) {
+                return
+            }
+            this.$emit('click', v)
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>
+

package/src/components/WTreeIconToggle.vue

@@ -0,0 +1,155 @@
+<template>
+    <div
+        style="display:inline-block; user-select:none; cursor:pointer; outline:none;"
+        tabindex="0"
+        @keyup.enter="(v)=>{$emit('click',v)}"
+        @click="(v)=>{$emit('click',v)}"
+    >
+        <div
+            class="cc"
+            style="height:100%;"
+        >
+            <div
+                :style="`transition:all 0.1s; transform:rotate(${useRotate}deg)`"
+            >
+
+                <div
+                    class="cc circle"
+                    :style="`transition: all 0.5s; background:${useIconBackgroundColor};`"
+                    @mouseenter="mouseenter"
+                    @mouseleave="mouseleave"
+                >
+                    <!-- 圖標稍微偏左1px得強制移動 -->
+                    <div
+                        class="caretRight"
+                        style="transform:translateX(1px);"
+                    >
+                        <span style="display:flex;">
+                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useIconColor" width="11px" height="11px" x="0px" y="0px" viewBox="0 0 415.346 415.346" xml:space="preserve"><g><path d="M41.712,415.346c-11.763,0-21.3-9.537-21.3-21.3V21.299C20.412,9.536,29.949,0,41.712,0l346.122,191.697 c0,0,15.975,15.975,0,31.951C371.859,239.622,41.712,415.346,41.712,415.346z"/></g></svg>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import get from 'lodash/get'
+import color2hex from '../js/vuetifyColor.mjs'
+
+
+/**
+ * @vue-prop {String} [mode='right'] 輸入圖標朝向字串，可選'right'、'bottom'、'left'、'top'，預設'right'
+ * @vue-prop {String} [iconColor='grey'] 輸入顯隱icon按鈕顏色字串，預設'grey'
+ * @vue-prop {String} [iconBackgroundColor='transparent'] 輸入顯隱icon按鈕背景顏色字串，預設'transparent'
+ * @vue-prop {String} [iconBackgroundColorHover='rgba(128,128,128,0.15)'] 輸入滑鼠移入時顯隱icon按鈕背景顏色字串，預設'rgba(128,128,128,0.15)'
+ */
+export default {
+    components: {
+    },
+    props: {
+        dir: {
+            type: String,
+            default: 'right',
+        },
+        iconColor: {
+            type: String,
+            default: 'grey',
+        },
+        iconBackgroundColor: {
+            type: String,
+            default: 'transparent',
+        },
+        iconBackgroundColorHover: {
+            type: String,
+            default: 'rgba(128,128,128,0.15)',
+        },
+    },
+    data: function() {
+        return {
+        }
+    },
+    computed: {
+
+        useRotate: function() {
+            //console.log('computed useRotate')
+
+            let vo = this
+
+            let kp = {
+                left: 180,
+                right: 0,
+                top: 270,
+                bottom: 90,
+            }
+            return get(kp, vo.dir, 0)
+        },
+
+        useIconColor: function() {
+            //console.log('computed useIconColor')
+
+            let vo = this
+
+            return color2hex(vo.iconColor)
+        },
+
+        useIconBackgroundColor: function() {
+            //console.log('computed useIconBackgroundColor')
+
+            let vo = this
+
+            return color2hex(vo.iconBackgroundColor)
+        },
+
+        useIconBackgroundColorHover: function() {
+            //console.log('computed useIconBackgroundColorHover')
+
+            let vo = this
+
+            return color2hex(vo.iconBackgroundColorHover)
+        },
+
+    },
+    methods: {
+
+        mouseenter: function(e) {
+            //console.log('mouseenter', e)
+
+            let vo = this
+
+            e.currentTarget.style.background = vo.useIconBackgroundColorHover
+
+        },
+
+        mouseleave: function(e) {
+            //console.log('mouseleave', e)
+
+            let vo = this
+
+            e.currentTarget.style.background = vo.useIconBackgroundColor
+
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+.caretRight {
+    cursor: pointer;
+    user-select: none;
+    display: inline-block;
+}
+.cc {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.circle {
+    width: 24px;
+    height: 24px;
+    border-radius: 24px;
+}
+</style>
+

package/src/components/demolink.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="item">
+        <!-- 因v-btn的icon與elevation屬性衝突, 使用elevation會導致color變成背景色, 故改由class設定按鈕陰影 -->
+
+        <div style="display:inline-block;">
+            {{casename}}
+        </div>
+
+        <v-tooltip bottom transition="slide-y-transition">
+            <template v-slot:activator="{ on }">
+                <v-btn
+                    class="bx"
+                    style="margin-left:10px;"
+                    v-on="on"
+                    x-small
+                    icon
+                    color="red darken-1"
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    :href="web"
+                >
+                    <v-icon small>{{mdiLaunch}}</v-icon>
+                </v-btn>
+            </template>
+            <span>example</span>
+        </v-tooltip>
+
+        <v-tooltip bottom transition="slide-y-transition">
+            <template v-slot:activator="{ on }">
+                <v-btn
+                    class="bx"
+                    style="margin-left:10px;"
+                    v-on="on"
+                    x-small
+                    icon
+                    color="red darken-1"
+                    target="_blank" rel="noreferrer noopener"
+                    :href="src"
+                >
+                    <v-icon small>{{mdiUnfoldMoreVertical}}</v-icon>
+                </v-btn>
+            </template>
+            <span>code</span>
+        </v-tooltip>
+
+    </div>
+</template>
+
+<script>
+import { mdiLaunch, mdiUnfoldMoreVertical } from '@mdi/js'
+import cvCasename from '../../toolg/cvCasename.mjs'
+
+
+export default {
+    props: {
+        kbname: {
+            type: String,
+        },
+        casename: {
+            type: String,
+        },
+    },
+    data: function() {
+        return {
+            mdiLaunch,
+            mdiUnfoldMoreVertical
+        }
+    },
+    mounted: function() {
+    },
+    computed: {
+
+        fn: function() {
+            let fnc = `${this.casename}`
+            return `${this.kbname}_${cvCasename(fnc)}`
+        },
+
+        web: function() {
+            return 'https://yuda-lyu.github.io/w-component-vue/examples/' + this.fn + '.html'
+        },
+
+        src: function() {
+            return 'https://github.com/yuda-lyu/w-component-vue/blob/master/docs/examples/' + this.fn + '.html'
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+.item {
+    border-left: 3px solid #ffba75;
+    margin: 5px 5px 8px 0px;
+    padding: 3px 3px 5px 10px;
+    font-size: 0.9rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+.bx {
+    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+</style>

package/src/js/binarySearch.mjs

@@ -0,0 +1,91 @@
+import size from 'lodash/size'
+import filter from 'lodash/filter'
+import maxBy from 'lodash/maxBy'
+
+
+/**
+ * 二元搜索法(Binary Search)，通過fGetValue(index)取值，求最靠近0但小於0的值，並回傳值與所在的index與所查得的數據items[index]
+ *
+ * @param {Array} items 輸入欲搜尋陣列
+ * @param {Function} fGetValue 輸入取值函數，傳入index
+ * @returns {Object} 回傳物件index，最靠近0但小於0的值、所在的index與所查得的數據items[index]
+ */
+function binarySearch(items, fGetValue) {
+    let n = size(items)
+    let iStart = 0
+    let vStart = fGetValue(iStart)
+    let iEnd = n - 1
+    let vEnd = fGetValue(iEnd)
+
+    let run = true
+    let index = null
+    while (run) {
+        let iMiddle = Math.floor((iEnd + iStart) / 2)
+        let vMiddle = fGetValue(iMiddle)
+        //console.log(`iStart=${iStart},  vStart=${vStart},  iMiddle=${iMiddle},  vMiddle=${vMiddle},  iEnd=${iEnd},  vEnd=${vEnd}`)
+
+        //check
+        if (vStart < 0 && vMiddle < 0 && vEnd < 0) {
+            index = null
+            run = false
+            break
+        }
+        else if (vStart > 0 && vMiddle > 0 && vEnd > 0) {
+            index = null
+            run = false
+            break
+        }
+        else if (vStart === 0) {
+            index = iStart
+            run = false
+            break
+        }
+        else if (vMiddle === 0) {
+            index = iMiddle
+            run = false
+            break
+        }
+        else if (vEnd === 0) {
+            index = iEnd
+            run = false
+            break
+        }
+        else if (iMiddle === iStart || iMiddle === iEnd) {
+            let rs = [{
+                i: iStart,
+                v: vStart,
+            },
+            {
+                i: iMiddle,
+                v: vMiddle,
+            },
+            {
+                i: iEnd,
+                v: vEnd,
+            }]
+            rs = filter(rs, (v) => {
+                return v.v <= 0
+            })
+            let r = maxBy(rs, 'v')
+            index = r.i
+            run = false
+            break
+        }
+
+        //update
+        if (vStart * vMiddle > 0) {
+            iStart = iMiddle
+            vStart = vMiddle
+        }
+        else {
+            iEnd = iMiddle
+            vEnd = vMiddle
+        }
+
+    }
+
+    return index
+}
+
+
+export default binarySearch

package/src/js/domDragDrop.mjs

@@ -0,0 +1,154 @@
+import get from 'lodash/get'
+import isestr from 'wsemi/src/isestr.mjs'
+import iseobj from 'wsemi/src/iseobj.mjs'
+import genID from 'wsemi/src/genID.mjs'
+import domDrag from 'wsemi/src/domDrag.mjs'
+
+
+function domDragDrop() {
+    let kbEv = {}
+
+    function emit(vnode, name, data) {
+        let handlers = (vnode.data && vnode.data.on) || (vnode.componentOptions && vnode.componentOptions.listeners)
+        if (handlers && handlers[name]) {
+            handlers[name].fns(data)
+        }
+    }
+
+    function bind(el, binding, vnode) {
+        // console.log('bind', 'el', el, 'binding', binding, 'vnode', vnode)
+
+        //id
+        let id = `r${genID()}`
+        el.setAttribute('ev-dragdrop', id)
+
+        //init
+        init(el, binding, vnode)
+
+    }
+
+    function update(el, binding, vnode) {
+        // console.log('update', 'el', el, 'binding', binding)
+
+        //clear
+        clear(el)
+
+        //init
+        init(el, binding, vnode)
+
+    }
+
+    function unbind(el) {
+        // console.log('unbind', 'el', el)
+
+        //clear
+        clear(el)
+
+        //remove attr
+        el.setAttribute('ev-dragdrop', null)
+
+    }
+
+    function init(el, binding, vnode) {
+
+        //id
+        let id = el.getAttribute('ev-dragdrop')
+
+        //eff
+        let eff = get(binding, 'value')
+        eff = iseobj(eff)
+
+        //check
+        if (!eff) {
+            return
+        }
+
+        //group
+        let group = get(binding, 'value.group')
+        if (!isestr(group)) {
+            throw new Error(`invalid group: v-domdragdrop="{group:'need to input key for group'}"`)
+        }
+
+        //params
+        let attIdentify = get(binding, 'value.attIdentify')
+        let attGroup = get(binding, 'value.attGroup')
+        let attIndex = get(binding, 'value.attIndex')
+        let previewOpacity = get(binding, 'value.previewOpacity')
+        let previewDisabledOpacity = get(binding, 'value.previewDisabledOpacity')
+        let previewBackground = get(binding, 'value.previewBackground')
+        let previewBorderWidth = get(binding, 'value.previewBorderWidth')
+        let previewBorderColor = get(binding, 'value.previewBorderColor')
+        let timeDragStartDelay = get(binding, 'value.timeDragStartDelay')
+
+        //domDrag
+        let ev = domDrag(el, { group, attIdentify, attGroup, attIndex, previewOpacity, previewDisabledOpacity, previewBackground, previewBorderWidth, previewBorderColor, timeDragStartDelay })
+        // ev.on('change', (msg) => {
+        //     console.log('change', msg)
+        // })
+        ev.on('start', (msg) => {
+            // console.log('start', msg)
+            emit(vnode, 'domdragdrop', {
+                evName: 'start',
+                ...msg,
+            })
+        })
+        ev.on('move', (msg) => {
+            // console.log('move', msg)
+            emit(vnode, 'domdragdrop', {
+                evName: 'move',
+                ...msg,
+            })
+        })
+        ev.on('enter', (msg) => {
+            // console.log('enter', msg)
+            emit(vnode, 'domdragdrop', {
+                evName: 'enter',
+                ...msg,
+            })
+        })
+        ev.on('leave', (msg) => {
+            // console.log('leave', msg)
+            emit(vnode, 'domdragdrop', {
+                evName: 'leave',
+                ...msg,
+            })
+        })
+        ev.on('drop', (msg) => {
+            // console.log('drop', msg)
+            emit(vnode, 'domdragdrop', {
+                evName: 'drop',
+                ...msg,
+            })
+        })
+
+        //save ev
+        kbEv[id] = ev
+
+    }
+
+    function clear(el) {
+
+        //id
+        let id = el.getAttribute('ev-dragdrop')
+
+        if (kbEv[id]) {
+
+            //unbind
+            kbEv[id].unbind()
+
+            //delete
+            delete kbEv[id]
+
+        }
+
+    }
+
+    return {
+        bind,
+        update,
+        unbind,
+    }
+}
+
+
+export default domDragDrop