w-component-vue 2.1.57

package/src/components/WPanelDivideHorizontal.vue

@@ -0,0 +1,198 @@
+<template>
+    <div
+        :changeParam="changeParam"
+        v-domresize
+        @domresize="updatePanelSize"
+    >
+
+        <div
+            ref="divPanel"
+            style="position:relative; display:flex;"
+        >
+
+            <div ref="left" :style="`width:${(r)*panelWidth}px; height:${panelHeight}px;`">
+                <slot
+                    name="left"
+                    :ratio="r"
+                    :width="(r)*panelWidth"
+                    :height="panelHeight"
+                ></slot>
+            </div>
+
+            <div
+                ref="divBar"
+                :style="`position:absolute; z-index:1; left:${(r)*panelWidth-bw/2}px; width:${bw}px; height:${panelHeight}px; border-left:${barBorderSize}px solid ${barBorderColor}; border-right:${barBorderSize}px solid ${barBorderColor}; cursor:col-resize; user-select:none;`"
+            >
+                <div :style="`width:${barSize}px; height:${panelHeight}px; background-color:${barColor};`"></div>
+            </div>
+
+            <div ref="right" :style="`width:${(1-r)*panelWidth}px; height:${panelHeight}px;`">
+                <slot
+                    name="right"
+                    :ratio="1-r"
+                    :width="(1-r)*panelWidth"
+                    :height="panelHeight"
+                ></slot>
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
+import domResize from '../js/domResize.mjs'
+
+
+/**
+ * @vue-prop {Number} [ratio=0.5] 輸入分隔條位置比例數字，範圍為0~1，預設0.5
+ * @vue-prop {Number} [min=0] 輸入分隔條位置最小比例數字，範圍為0~1，需小於max，若min大於max則由min主導，預設0
+ * @vue-prop {Number} [max=1] 輸入分隔條位置最大比例數字，範圍為0~1，需大於min，若min大於max則由min主導，預設1
+ * @vue-prop {String} [barColor='#ddd'] 輸入分隔條顏色字串，預設'#ddd'
+ * @vue-prop {String} [barBorderColor='transparent'] 輸入分隔條框線顏色字串，預設'transparent'
+ * @vue-prop {Number} [barSize=2] 輸入分隔條尺寸數字，為分隔條寬度，單位為px，預設2
+ * @vue-prop {Number} [barBorderSize=3] 輸入分隔條框線寬度數字，單位為px，預設3，通常配合barBorderColor='transparent'使可拖曳區加大又不遮蔽可視區
+ */
+export default {
+    directives: {
+        domresize: domResize(),
+    },
+    props: {
+        ratio: {
+            type: Number,
+            default: 0.5, //0~1
+        },
+        min: {
+            type: Number,
+            default: 0,
+        },
+        max: {
+            type: Number,
+            default: 1,
+        },
+        barColor: {
+            type: String,
+            default: '#ddd',
+        },
+        barBorderColor: {
+            type: String,
+            default: 'transparent',
+        },
+        barSize: {
+            type: Number,
+            default: 2,
+        },
+        barBorderSize: {
+            type: Number,
+            default: 3,
+        },
+    },
+    data: function() {
+        return {
+            r: null,
+            panelWidth: 0,
+            panelHeight: 0,
+            das: null,
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //das
+        let das = domDragBarAndScroll(vo.$refs.divPanel, vo.$refs.divBar, { useTouchDragForPanel: false })
+        das.on('dragBar', vo.dragBar)
+
+        //save
+        vo.das = das
+
+    },
+    beforeDestroy: function() {
+        //console.log('beforeDestroy')
+
+        let vo = this
+
+        //clear
+        if (vo.das) {
+            vo.das.clear()
+        }
+
+    },
+    computed: {
+
+        changeParam: function() {
+            //console.log('computed changeParam')
+
+            let vo = this
+
+            //ratio
+            let r = vo.ratio
+
+            //min, max
+            r = Math.min(r, vo.max)
+            r = Math.max(r, vo.min)
+
+            //save
+            vo.r = r
+
+            return ''
+        },
+
+        bw: function() {
+            //console.log('computed changeParam')
+
+            let vo = this
+
+            return vo.barSize + vo.barBorderSize * 2
+        },
+
+    },
+    methods: {
+
+        updatePanelSize: function(msg) {
+            //console.log('methods updatePanelSize', msg)
+
+            let vo = this
+
+            //update
+            vo.panelWidth = msg.snew.offsetWidth
+            vo.panelHeight = msg.snew.offsetHeight
+
+            //emit
+            vo.$emit('resize', msg)
+
+        },
+
+        dragBar: function({ clientX }) {
+            //console.log('methods dragBar', clientX)
+
+            let vo = this
+
+            let bd = vo.$el.getBoundingClientRect()
+            let x = clientX
+            let w = vo.$el.offsetWidth
+            let r = 0
+            if (w > 0) {
+                r = (x - bd.left) / w //clientX需扣除元件的left位置
+            }
+
+            //min, max
+            r = Math.min(r, vo.max)
+            r = Math.max(r, vo.min)
+
+            //save
+            vo.r = r
+
+            //emit
+            vo.$emit('update:ratio', r)
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WPanelDivideVertical.vue

@@ -0,0 +1,198 @@
+<template>
+    <div
+        :changeParam="changeParam"
+        v-domresize
+        @domresize="updatePanelSize"
+    >
+
+        <div
+            ref="divPanel"
+            style="position:relative;"
+        >
+
+            <div ref="top" :style="`width:${panelWidth}px; height:${(r)*panelHeight}px;`">
+                <slot
+                    name="top"
+                    :ratio="r"
+                    :width="panelWidth"
+                    :height="(r)*panelHeight"
+                ></slot>
+            </div>
+
+            <div
+                ref="divBar"
+                :style="`position:absolute; z-index:1; top:${(r)*panelHeight-bw/2}px; width:${panelWidth}px; height:${barSize}px; border-top:${barBorderSize}px solid ${barBorderColor}; border-bottom:${barBorderSize}px solid ${barBorderColor}; cursor:row-resize; user-select:none;`"
+            >
+                <div :style="`width:${panelWidth}px; height:${barSize}px; background-color:${barColor};`"></div>
+            </div>
+
+            <div ref="bottom" :style="`width:${panelWidth}px; height:${(1-r)*panelHeight}px;`">
+                <slot
+                    name="bottom"
+                    :ratio="1-r"
+                    :width="panelWidth"
+                    :height="(1-r)*panelHeight"
+                ></slot>
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
+import domResize from '../js/domResize.mjs'
+
+
+/**
+ * @vue-prop {Number} [ratio=0.5] 輸入分隔條位置比例數字，範圍為0~1，預設0.5
+ * @vue-prop {Number} [min=0] 輸入分隔條位置最小比例數字，範圍為0~1，需小於max，若min大於max則由min主導，預設0
+ * @vue-prop {Number} [max=1] 輸入分隔條位置最大比例數字，範圍為0~1，需大於min，若min大於max則由min主導，預設1
+ * @vue-prop {String} [barColor='#ddd'] 輸入分隔條顏色字串，預設'#ddd'
+ * @vue-prop {String} [barBorderColor='transparent'] 輸入分隔條框線顏色字串，預設'transparent'
+ * @vue-prop {Number} [barSize=2] 輸入分隔條尺寸數字，為分隔條高度，單位為px，預設2
+ * @vue-prop {Number} [barBorderSize=3] 輸入分隔條框線寬度數字，單位為px，預設3，通常配合barBorderColor='transparent'使可拖曳區加大又不遮蔽可視區
+ */
+export default {
+    directives: {
+        domresize: domResize(),
+    },
+    props: {
+        ratio: {
+            type: Number,
+            default: 0.5, //0~1
+        },
+        min: {
+            type: Number,
+            default: 0,
+        },
+        max: {
+            type: Number,
+            default: 1,
+        },
+        barColor: {
+            type: String,
+            default: '#ddd',
+        },
+        barBorderColor: {
+            type: String,
+            default: 'transparent',
+        },
+        barSize: {
+            type: Number,
+            default: 2,
+        },
+        barBorderSize: {
+            type: Number,
+            default: 3,
+        },
+    },
+    data: function() {
+        return {
+            r: null,
+            panelWidth: 0,
+            panelHeight: 0,
+            das: null,
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //das
+        let das = domDragBarAndScroll(vo.$refs.divPanel, vo.$refs.divBar, { useTouchDragForPanel: false })
+        das.on('dragBar', vo.dragBar)
+
+        //save
+        vo.das = das
+
+    },
+    beforeDestroy: function() {
+        //console.log('beforeDestroy')
+
+        let vo = this
+
+        //clear
+        if (vo.das) {
+            vo.das.clear()
+        }
+
+    },
+    computed: {
+
+        changeParam: function() {
+            //console.log('computed changeParam')
+
+            let vo = this
+
+            //ratio
+            let r = vo.ratio
+
+            //min, max
+            r = Math.min(r, vo.max)
+            r = Math.max(r, vo.min)
+
+            //save
+            vo.r = r
+
+            return ''
+        },
+
+        bw: function() {
+            //console.log('computed changeParam')
+
+            let vo = this
+
+            return vo.barSize + vo.barBorderSize * 2
+        },
+
+    },
+    methods: {
+
+        updatePanelSize: function(msg) {
+            //console.log('methods updatePanelSize', msg)
+
+            let vo = this
+
+            //update
+            vo.panelWidth = msg.snew.offsetWidth
+            vo.panelHeight = msg.snew.offsetHeight
+
+            //emit
+            vo.$emit('resize', msg)
+
+        },
+
+        dragBar: function({ clientY }) {
+            //console.log('methods dragBar', clientY)
+
+            let vo = this
+
+            let bd = vo.$el.getBoundingClientRect()
+            let y = clientY
+            let h = vo.$el.offsetHeight
+            let r = 0
+            if (h > 0) {
+                r = (y - bd.top) / h //clientX需扣除元件的top位置
+            }
+
+            //min, max
+            r = Math.min(r, vo.max)
+            r = Math.max(r, vo.min)
+
+            //save
+            vo.r = r
+
+            //emit
+            vo.$emit('update:ratio', r)
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WPanelScale.vue

@@ -0,0 +1,114 @@
+<template>
+    <!-- 不能使用overflow:hidden會使slot內popup被切 -->
+    <div
+        :style="`display:inline-block; width:${width}px; height:${height}px; max-height:${height}px;`"
+        v-domresize
+        domresize="domresize"
+        v-dommutation
+        @dommutation="dommutation"
+    >
+        <div :style="`position:relative; width:${width}px; height:${height}px; max-height:${height}px;`">
+            <div :style="`position:absolute; left:0; top:0; width:${width}px; height:${height}px; max-height:${height}px;`">
+
+                <div :style="`transform-origin:top left; transform:scale(${scale}); width:${width}px; height:${height}px; max-height:${height}px;`">
+                    <div ref="tar" style="display:inline-block;">
+                        <slot></slot>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import get from 'lodash/get'
+import isEle from 'wsemi/src/isEle.mjs'
+import domResize from '../js/domResize.mjs'
+import domMutation from '../js/domMutation.mjs'
+
+
+export default {
+    directives: {
+        domresize: domResize(),
+        dommutation: domMutation(),
+    },
+    components: {
+    },
+    props: {
+        scale: {
+            type: Number,
+            default: 1,
+        },
+    },
+    data: function() {
+        return {
+            width: 1,
+            height: 1,
+        }
+    },
+    mounted: function() {
+        // console.log('methods mounted')
+
+        let vo = this
+
+        //fitSize, 有些slot內為靜態內容不會觸發resize或mutation, 故得於mounted初始化執行一次
+        vo.fitSize()
+
+    },
+    computed: {
+    },
+    methods: {
+
+        domresize: function(msg) {
+            // console.log('methods domresize', msg)
+
+            let vo = this
+
+            //fitSize
+            vo.fitSize()
+
+        },
+
+        dommutation: function(msg) {
+            // console.log('methods dommutation', msg)
+
+            let vo = this
+
+            //fitSize
+            vo.fitSize()
+
+        },
+
+        fitSize: function() {
+            // console.log('methods fitSize')
+
+            let vo = this
+
+            //eleTar
+            let eleTar = get(vo, `$refs.tar`)
+
+            //check
+            if (isEle(eleTar)) {
+
+                //getBoundingClientRect
+                let rect = eleTar.getBoundingClientRect()
+
+                //check
+                if (vo.width !== rect.width || vo.height !== rect.height) {
+
+                    //save
+                    vo.width = rect.width
+                    vo.height = rect.height
+
+                }
+            }
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WPanelScrolly.vue

@@ -0,0 +1,189 @@
+<template>
+    <div
+        v-domresize
+        @domresize="resizePanel"
+    >
+        <WPanelScrollyCore
+            ref="wpsc"
+            :viewHeightMax="viewHeight"
+            :contentHeight="contentHeight"
+            :scrollDelta="scrollDelta"
+            :barColor="barColor"
+            :barColorHover="barColorHover"
+            :barBackgroundColor="barBackgroundColor"
+            :barBackgroundColorHover="barBackgroundColorHover"
+            :barWidth="barWidth"
+            :barHeightMin="barHeightMin"
+            :ratio="ratio"
+            @change="scrollItems"
+        >
+            <div
+                :style="`position:absolute; top:${top}px; left:0px; width:100%;`"
+                v-domresize
+                @domresize="resizeContent"
+            >
+                <slot></slot>
+            </div>
+        </WPanelScrollyCore>
+    </div>
+</template>
+
+<script>
+import get from 'lodash/get'
+import WPanelScrollyCore from './WPanelScrollyCore.vue'
+import domResize from '../js/domResize.mjs'
+
+
+/**
+ * @vue-prop {Number} [scrollDelta=100] 輸入一次捲動高度，單位為px，預設100
+ * @vue-prop {String} [barColor='rgba(0,0,0,0.15)'] 輸入捲軸內區塊顏色字串，預設'rgba(0,0,0,0.15)'
+ * @vue-prop {String} [barColorHover='rgba(0,0,0,0.3)'] 輸入滑鼠移入時捲軸內區塊顏色字串，預設'rgba(0,0,0,0.3)'
+ * @vue-prop {String} [barBackgroundColor='transparent'] 輸入捲軸背景顏色字串，預設'transparent'
+ * @vue-prop {String} [barBackgroundColorHover='transparent'] 輸入滑鼠移入時捲軸背景顏色字串，預設'transparent'
+ * @vue-prop {Number} [barWidth=8] 輸入捲軸區寬度，單位為px，預設8
+ * @vue-prop {Number} [barHeightMin=50] 輸入捲軸內區塊最小高度，單位為px，預設50
+ * @vue-prop {Number} [ratio=0] 輸入目前捲動比例數字，預設0
+ */
+export default {
+    directives: {
+        domresize: domResize(),
+    },
+    components: {
+        WPanelScrollyCore,
+    },
+    props: {
+        scrollDelta: {
+            type: Number,
+            default: 100,
+        },
+        barOpacity: {
+            type: Number,
+            default: 0.6,
+        },
+        barOpacityHover: {
+            type: Number,
+            default: 1,
+        },
+        barColor: {
+            type: String,
+            default: 'rgba(0,0,0,0.15)',
+        },
+        barColorHover: {
+            type: String,
+            default: 'rgba(0,0,0,0.3)',
+        },
+        barBackgroundColor: {
+            type: String,
+            default: 'transparent',
+        },
+        barBackgroundColorHover: {
+            type: String,
+            default: 'transparent',
+        },
+        barWidth: {
+            type: Number,
+            default: 8,
+        },
+        barHeightMin: {
+            type: Number,
+            default: 50,
+        },
+        ratio: {
+            type: Number,
+            default: 0,
+        },
+    },
+    data: function() {
+        return {
+            top: 0, //內容區top px
+            viewHeight: 0, //外框區高度px
+            viewHeightTemp: 0, //外框區上次偵測高度px
+            contentHeight: 0, //內容區高度px
+            contentHeightTemp: 0, //內容區上次偵測高度px
+        }
+    },
+    computed: {
+    },
+    methods: {
+
+        resizePanel: function(msg) {
+            //console.log('methods resizePanel', msg)
+
+            let vo = this
+
+            //save
+            vo.viewHeight = msg.snew.offsetHeight
+
+            //triggerEvent
+            vo.triggerEvent('changeViewHeight')
+
+            // //emit, 有triggerEvent故取消emit
+            // vo.$emit('resize', { ...msg, from: 'panel' })
+
+        },
+
+        resizeContent: function(msg) {
+            //console.log('methods resizeContent', msg)
+
+            let vo = this
+
+            //save
+            vo.contentHeight = msg.snew.offsetHeight
+
+            //triggerEvent
+            vo.triggerEvent('changeContentHeight')
+
+            // //emit, 有triggerEvent故取消emit
+            // vo.$emit('resize', { ...msg, from: 'content' })
+
+        },
+
+        scrollItems: async function(e) {
+            //console.log('methods scrollItems', e)
+
+            let vo = this
+
+            //save
+            vo.top = -e.t
+
+            //emitEvent
+            vo.emitEvent('scroll', e)
+            vo.emitEvent('update:ratio', e.r)
+
+        },
+
+        emitEvent: function(name, value) {
+            //console.log('methods emitEvent', name, value)
+
+            let vo = this
+
+            //$nextTick
+            vo.$nextTick(() => {
+
+                //emit
+                vo.$emit(name, value)
+
+            })
+
+        },
+
+        triggerEvent: function(from) {
+            //console.log('methods triggerEvent', from)
+
+            let vo = this
+
+            //t
+            let t = get(vo, '$refs.wpsc.triggerEvent', null)
+            if (t) {
+                t(from)
+            }
+
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>
+