w-component-vue 2.5.21 → 2.5.22

package/src/AppZoneWPanelScale.vue

@@ -171,6 +171,49 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-panel-scale'"
+                    :casename="'for text'"
+                ></demolink>
+
+                <div v-if="!useGlobalSlider">
+                    <input type="range" style="width:200px;" min="0.5" max="1.5" step="0.05" :value="WPanelScale.scale" @input="WPanelScale.scale=Number($event.target.value)" />
+                </div>
+
+                <div style="color:#f26; font-size:0.8rem;">
+                    * 內容以自身寬度排版後再縮放, 縮放時文字不會重新換行, 需換行時請於內容指定寬度
+                </div>
+
+                <div style="display:inline-block; padding:10px; border:1px dashed #999;">
+                    <w-panel-scale
+                        :scale="WPanelScale.scale"
+                    >
+
+                        <div style="font-size:0.85rem;">
+                            未指定寬度之文字以單行排版, 縮放時不會重新換行
+                        </div>
+
+                    </w-panel-scale>
+                </div>
+
+                <br>
+
+                <div style="display:inline-block; padding:10px; border:1px dashed #999;">
+                    <w-panel-scale
+                        :scale="WPanelScale.scale"
+                    >
+
+                        <div style="width:240px; font-size:0.85rem;">
+                            指定寬度240px之段落會於寬度內換行, 改變縮放比例時各行內容維持不變, 僅整體等比例縮放
+                        </div>
+
+                    </w-panel-scale>
+                </div>
+
+            </div>
+
+
         </div>
 
 

package/src/components/WBadge.vue

@@ -11,7 +11,12 @@
 
                 <slot></slot>
 
-                <div :style="`position:absolute; top:0px; right:${shiftX}px; transform:translateX(${translateX}%) translateY(-50%);`">
+                <!-- 偵測徽章尺寸: 徽章於絕對定位層內, 其尺寸變化(如文字變長)不會改變根元素尺寸 -->
+                <div
+                    :style="`position:absolute; top:0px; right:${shiftX}px; transform:translateX(${translateX}%) translateY(-50%);`"
+                    v-domresize
+                    @domresize="resizeBadge"
+                >
                     <span
                         ref="badge"
                         :style="`padding:0px 6px; border-radius:${borderRadius}px; border-width:${borderWidth}px; border-style:solid; border-color:${useBorderColor}; white-space:nowrap; ${useTextFontSize} color:${useTextColor}; background:${useBackgroundColor};`"
@@ -27,7 +32,7 @@
 </template>
 
 <script>
-import get from 'lodash-es/get.js'
+import get from 'lodash-es/get.js'
 import replace from 'wsemi/src/replace.mjs'
 import convertColor from '../js/convertColor.mjs'
 import domResize from '../js/domResize.mjs'
@@ -90,6 +95,20 @@ export default {
             shiftX: 0,
         }
     },
+    watch: {
+
+        badgeAlign: function() {
+            //console.log('watch badgeAlign')
+            let vo = this
+
+            //updatePadding, 對齊位置改變時徽章尺寸不變而不會觸發偵測, 待重繪更新multiplyW與shiftX後重算留白
+            vo.$nextTick(() => {
+                vo.updatePadding()
+            })
+
+        },
+
+    },
     computed: {
 
         changeBadgeAlign: function() {
@@ -151,26 +170,50 @@ export default {
 
             let vo = this
 
+            //updatePadding
+            let b = vo.updatePadding()
+            if (!b) {
+                return
+            }
+
+            //emit
+            vo.$emit('resize', msg)
+
+        },
+
+        resizeBadge: function(msg) {
+            //console.log('methods resizeBadge', msg)
+
+            let vo = this
+
+            //updatePadding, 徽章尺寸改變時僅更新留白, 對外之resize事件仍由根元素發出
+            vo.updatePadding()
+
+        },
+
+        updatePadding: function() {
+            //console.log('methods updatePadding')
+
+            let vo = this
+
             //bd
             let bd = get(vo, '$refs.badge')
             if (!bd) {
-                return
+                return false
             }
 
             //w, h
             let w = get(bd, 'offsetWidth', null)
             let h = get(bd, 'offsetHeight', null)
             if (!w || !h) {
-                return
+                return false
             }
 
             //update
             vo.paddingTop = h * 0.5
             vo.paddingRight = w * vo.multiplyW - vo.shiftX
 
-            //emit
-            vo.$emit('resize', msg)
-
+            return true
         },
 
     },

package/src/components/WColorSelect.vue

@@ -11,8 +11,6 @@
         v-model="show"
         :changeValue="changeValue"
         :changeType="changeType"
-        v-domresize
-        @domresize="resize"
         @placement-change="onPlacementChange"
     >
 
@@ -88,7 +86,6 @@
                     <div :style="`width:100%;`"></div>
 
                     <div
-                        ref="mtb"
                         :style="`display:flex; align-items:center;`"
                     >
 
@@ -109,8 +106,6 @@
                     <!-- 顏色選擇區 -->
                     <div
                         style="display:flex;"
-                        v-domresize
-                        @domresize="resizeSelectPanel"
                     >
                         <WColorSelectPanel
                             :type="typeTrans"
@@ -132,8 +127,6 @@
                     <!-- 顏色數值區 -->
                     <div
                         style="display:flex;"
-                        v-domresize
-                        @domresize="resizeSelectInput"
                     >
                         <WColorSelectInput
                             :size="Math.max(size-22,0)"
@@ -582,14 +575,10 @@ export default {
 
             loadingEyeDropper: false,
 
-            layoutType: 'horizontal',
             layoutShowScrollY: false,
             layoutMinHeight: 300,
             layoutMaxHeight: 300,
 
-            selectPanelHeight: 0,
-            selectInputHeight: 0,
-
             valueOri: null,
             valueNew: null,
             popperPlacement: null,
@@ -678,27 +667,6 @@ export default {
     },
     methods: {
 
-        resize: function(msg) {
-            // console.log('methods resize', msg)
-
-            let vo = this
-
-            //check
-            if (!vo.show) {
-                return
-            }
-
-            let w = get(msg, 'snew.windowWidth', 0)
-            // let h = get(msg, 'snew.windowHeight', 0)
-            // console.log('w', w, 'h', h, b)
-
-            //layoutType
-            let b = w >= 2 * (vo.size + 20) + 3 * vo.space //20為組件設定, 不提供外部更改故可直接給
-            vo.layoutType = b ? 'horizontal' : 'vertical'
-            // console.log('layoutType', vo.layoutType)
-
-        },
-
         resizeContent: function(msg) {
             // console.log('methods resizeContent', msg)
 
@@ -789,40 +757,6 @@ export default {
 
         },
 
-        resizeSelectPanel: function(msg) {
-            // console.log('methods resizeSelectPanel', msg)
-
-            let vo = this
-
-            //check
-            if (!vo.show) {
-                return
-            }
-
-            let h = get(msg, 'snew.clientHeight', 0)
-
-            //save
-            vo.selectPanelHeight = h
-
-        },
-
-        resizeSelectInput: function(msg) {
-            // console.log('methods resizeSelectInput', msg)
-
-            let vo = this
-
-            //check
-            if (!vo.show) {
-                return
-            }
-
-            let h = get(msg, 'snew.clientHeight', 0)
-
-            //save
-            vo.selectInputHeight = h
-
-        },
-
         openEyeDropper: function() {
             // console.log('methods openEyeDropper')
 

package/src/components/WPanelScale.vue

@@ -2,16 +2,21 @@
     <!-- 不能使用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;">
+                <!-- 縮放容器寬度用max-content: 內容以自身寬度排版後再縮放; 若給外框寬度, 會換行之內容其可用寬度會隨前次外框改變, 使排版隨縮放歷程而不同 -->
+                <div :style="`transform-origin:top left; transform:scale(${scale}); width:max-content; height:${height}px; max-height:${height}px;`">
+                    <!-- 偵測內容tar之尺寸: 根元素寬高由fitSize依tar設定, 偵測根元素時內容於無DOM變動下改變尺寸(如圖片載入)會偵測不到 -->
+                    <div
+                        ref="tar"
+                        style="display:inline-block;"
+                        v-domresize
+                        @domresize="domresize"
+                    >
                         <slot></slot>
                     </div>
                 </div>
@@ -22,7 +27,7 @@
 </template>
 
 <script>
-import get from 'lodash-es/get.js'
+import get from 'lodash-es/get.js'
 import isEle from 'wsemi/src/isEle.mjs'
 import domResize from '../js/domResize.mjs'
 import domMutation from '../js/domMutation.mjs'

package/src/components/WPanelScrollyCore.vue

@@ -35,6 +35,7 @@
                 @scroll="scrollShell"
             >
 
+                <!-- 偵測divContent尺寸: divShell高度由contentHeight設定, 內容於無DOM變動下改變高度(如圖片載入)時divShell尺寸不變而偵測不到 -->
                 <div
                     ref="divContent"
                     :style="``"
@@ -42,6 +43,8 @@
                     @dommutation="mutation"
                     v-domvisible
                     @domvisible="visible"
+                    v-domresize
+                    @domresize="resizeContent"
                 >
                     <slot></slot>
                 </div>
@@ -256,6 +259,28 @@ export default {
 
         },
 
+        resizeContent: function(msg) {
+            // console.log('methods resizeContent', msg)
+
+            let vo = this
+
+            //divContent
+            let divContent = get(vo, '$refs.divContent')
+            if (divContent) {
+
+                //check, 若為隱藏則不偵測與更新
+                if (divContent.offsetHeight !== 0 && vo.contentHeight !== divContent.offsetHeight) {
+                    // console.log('resizeContent 需更新contentHeight', divContent.offsetHeight, '<-', vo.contentHeight)
+                    vo.contentHeight = divContent.offsetHeight
+                }
+
+            }
+
+            //updateRatio
+            vo.updateRatio()
+
+        },
+
         mutation: function(msg) {
             // console.log('methods mutation', msg)
 

package/src/components/WTableDyn.vue

@@ -126,18 +126,18 @@ import WIconLoading from './WIconLoading.vue'
  * @vue-prop {String} [errorMsgFromRemoveRow='can not remove selected rows'] 輸入移除數據失敗事件訊息字串，預設'can not remove selected rows'
  * @vue-prop {String} [successMsgFromUploadData='upload data successfully'] 輸入上傳數據成功事件訊息字串，預設'upload data successfully'
  * @vue-prop {String} [errorMsgFromUploadData='can not upload data'] 輸入無法上傳數據事件訊息字串，預設'can not upload data'
- * @vue-prop {String} [errorMsgFromUploadEmptyData='no effective data'] 輸入上傳檔案中無有效數據事件訊息字串，預設'no effective data'
+ * @vue-prop {String} [errorMsgFromUploadEmptyData='no effective data'] 輸入上傳檔案中無有效數據事件訊息字串，此時不變動表格數據，預設'no effective data'
  * @vue-prop {String} [successMsgFromDownloadData='download data successfully'] 輸入下載檔案成功事件訊息字串，預設'download data successfully'
  * @vue-prop {String} [errorMsgFromDownloadData='can not download data'] 輸入無法下載檔案事件訊息字串，預設'can not download data'
  * @vue-prop {String} [errorMsgFromNoName='no data name'] 輸入未輸入數據名稱事件訊息字串，預設'no data name'
  * @vue-prop {String} [errorMsgFromNoData='no data'] 輸入未給予有效數據事件訊息字串，預設'no data'
- * @vue-prop {String} [uploadModeTitle='Choose mode of upload:'] 輸入選擇上傳模式彈窗標題字串，預設'Choose mode of upload:'
+ * @vue-prop {String} [uploadModeTitle='Choose mode of upload:'] 輸入選擇上傳模式彈窗標題字串，opt.optForUploadData.uploadMode有預先指定時不顯示此彈窗，預設'Choose mode of upload:'
  * @vue-prop {String} [uploadModeTextForReplace='Replace'] 輸入取代上傳模式文字字串，預設'Replace'
  * @vue-prop {String} [uploadModeTextForAppend='Append'] 輸入插入於最後上傳模式文字字串，預設'Append'
  * @vue-prop {String} [labelContentForUpload=null] 輸入針對上傳模式之popup彈窗teleport至body內之內容div所給予之wtlp屬性值字串，供查找使用，預設null
  * @vue-event {Array} save 指調用組件的method，無輸入，會回傳當前的name、description、rows所構成的物件
  * @vue-event {String} success 當新增數據、上傳數據、下載數據成功時觸發，回傳對應成功訊息字串
- * @vue-event {String} error 當新增數據、移除數據、上傳數據、下載數據失敗時觸發，回傳對應錯誤訊息字串
+ * @vue-event {String} error 當新增數據、移除數據、上傳數據、下載數據失敗時觸發，回傳對應錯誤訊息字串；使用者於上傳選檔視窗取消時不觸發
  * @vue-slot {Object} infor 顯示模式下資訊區之渲染slot，slot props為{ infor }，infor為{ name, description }
  * @vue-slot {Object} btns-left 選單按鈕區最左側之插入slot，slot props為{ editable }
  * @vue-slot {Object} btns-right 選單按鈕區最右側之插入slot，slot props為{ editable }
@@ -197,7 +197,7 @@ import WIconLoading from './WIconLoading.vue'
  * @vue-prop {Boolean} [opt.autoFitColumn=false] 輸入當表格尺寸變更時自動調整欄寬布林值，預設false
  * @vue-prop {String} [opt.language='en'] 輸入指定語系字串，可選'en'、'zh-tw'、'zh-cn'，預設同組件language
  * @vue-prop {Function} [opt.beforeAddRow=undefined] 輸入編輯模式新增數據前之修改新列事件，輸入newRow，輸出newRow，預設為undefined
- * @vue-prop {Object} [opt.optForUploadData={}] 輸入呼叫組件uploadData上傳檔案時用的設定物件，內部調用wsemi的getDataFromExcelFileU8Arr讀取Excel檔案，物件可給予鍵值：uploadMode代表上傳模式字串(可選'replace'、'append'，預設由彈窗選擇)，beforeUpload代表上傳前的處理數據函數，parseSheetInd代表提取Excel檔案的第幾個sheet整數(預設為0)，optForUploadData預設{}
+ * @vue-prop {Object} [opt.optForUploadData={}] 輸入呼叫組件uploadData上傳檔案時用的設定物件，內部調用wsemi的getDataFromExcelFileU8Arr讀取Excel檔案，物件可給予鍵值：uploadMode代表上傳模式字串(可選'replace'、'append'，有給予時點擊上傳按鈕不顯示模式選擇彈窗而直接開啟選檔視窗，未給予或非前述值時由彈窗選擇)，beforeUpload代表上傳前的處理數據函數(輸入讀取所得之數據陣列，回傳處理後之數據陣列或Promise，未給予時自動去除於表格各欄位之值皆為空的無效數據，處理後無數據時觸發error事件(errorMsgFromUploadEmptyData)且不變動表格數據)，parseSheetInd代表提取Excel檔案的第幾個sheet整數(預設為0)，組件不會修改此物件，optForUploadData預設{}
  * @vue-prop {Function} [opt.modifyDataWhenSave=undefined] 輸入當儲存時修改儲存數據事件，輸入rows，輸出rows，預設為undefined
  * @vue-prop {Boolean} [opt.checkNoDataWhenSave=false] 輸入當儲存時是否檢核無數據布林值，預設false
  */

package/test/unit-domResize.test.mjs

@@ -0,0 +1,237 @@
+import assert from 'assert'
+import domResize from '../src/js/domResize.mjs'
+
+
+//v-domresize指令之契約測試: 以真的指令與真的wsemi domDetect(ResizeObserver模式)驅動, 只把瀏覽器替換為假環境
+//  假ResizeObserver只記錄觀察對象, 由測試呼叫fireRO觸發回呼; 假元素之尺寸由測試直接設定
+//  瀏覽器本身之語義(開始觀察必回報、行內元素不回報等)非本檔所能驗證, 已另以真瀏覽器實測
+
+
+let sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+
+
+class Ele {
+    constructor(w, h) {
+        this.nodeType = 1
+        this.isConnected = true
+        this.attrs = {}
+        this.size(w, h)
+    }
+
+    size(w, h) {
+        this.offsetWidth = w
+        this.offsetHeight = h
+        this.clientWidth = w
+        this.clientHeight = h
+    }
+
+    setAttribute(k, v) {
+        this.attrs[k] = String(v)
+    }
+
+    getAttribute(k) {
+        return (k in this.attrs) ? this.attrs[k] : null
+    }
+}
+
+
+//mkEnv, 建立假window與document並覆蓋全域; RO與MO皆為可手動觸發之假物件
+function mkEnv() {
+    let env = { ros: [], mos: [], listeners: [] }
+
+    class RO {
+        constructor(cb) {
+            this.cb = cb
+            this.targets = new Set()
+            env.ros.push(this)
+        }
+
+        observe(t) {
+            this.targets.add(t)
+        }
+
+        unobserve(t) {
+            this.targets.delete(t)
+        }
+
+        disconnect() {
+            this.targets.clear()
+        }
+    }
+
+    class MO {
+        constructor(cb) {
+            this.cb = cb
+            env.mos.push(this)
+        }
+
+        observe() {}
+
+        disconnect() {}
+    }
+
+    globalThis.window = {
+        innerWidth: 1200,
+        innerHeight: 800,
+        ResizeObserver: RO,
+        MutationObserver: MO,
+        addEventListener: (type, fn) => {
+            env.listeners.push({ type, fn })
+        },
+        removeEventListener: (type, fn) => {
+            env.listeners = env.listeners.filter((l) => !(l.type === type && l.fn === fn))
+        },
+        getComputedStyle: () => ({ display: 'block' }),
+    }
+    globalThis.document = { documentElement: {} }
+
+    //fireRO, 瀏覽器回報ele之尺寸變化; 真瀏覽器於同一次變化會回報border-box與content-box兩個觀察器
+    env.fireRO = (ele) => {
+        for (let ro of env.ros) {
+            if (ro.targets.has(ele)) {
+                ro.cb([{ target: ele }], ro)
+            }
+        }
+    }
+
+    //resizeWindow, 視窗resize事件(元素尺寸不變)
+    env.resizeWindow = () => {
+        for (let l of env.listeners.slice()) {
+            if (l.type === 'resize') {
+                l.fn({ type: 'resize' })
+            }
+        }
+    }
+
+    return env
+}
+
+
+//mkBinding, 以Vue 2之vnode形狀建立綁定, 記錄指令轉發之domresize事件
+function mkBinding(env, ele) {
+    let d = domResize()
+    let rec = []
+    let vnode = { data: { on: { domresize: { fns: (msg) => rec.push(msg) } } } }
+    d.bind(ele, {}, vnode)
+    return { d, rec, vnode }
+}
+
+
+describe(`domResize`, function() {
+
+    after(function() {
+        delete globalThis.window
+        delete globalThis.document
+    })
+
+    it(`should forward dom events with their size and direction`, async function() {
+        let env = mkEnv()
+        let el = new Ele(300, 40)
+        let b = mkBinding(env, el)
+        env.fireRO(el)
+        await sleep(10)
+        el.size(200, 40)
+        env.fireRO(el)
+        await sleep(10)
+        assert.strict.deepStrictEqual(b.rec.map((m) => [m.from, m.snew.offsetWidth, m.smode.width]), [['dom', 300, 'larger'], ['dom', 200, 'smaller']])
+        b.d.unbind(el)
+    })
+
+    it(`should carry no direction on window events, even after a change within the tolerance`, async function() {
+        //元素變化未超過容許誤差(如拖曳分隔條之最後1px)時不發dom事件; 其後之視窗事件不代表元素尺寸變化, 不得帶出該方向,
+        //  否則依smode判斷變寬或變窄之使用端(WDrawer之autoSwitchTo*)會於不改尺寸之視窗resize時誤切換(wsemi 1.9.4有此問題, 1.9.5修正)
+        let env = mkEnv()
+        let el = new Ele(720, 400)
+        let b = mkBinding(env, el)
+        env.fireRO(el)
+        await sleep(10)
+        el.size(721, 400)
+        env.fireRO(el)
+        await sleep(10)
+        env.resizeWindow()
+        let w = b.rec.filter((m) => m.from === 'window')
+        assert.strict.deepStrictEqual(w.length, 1)
+        assert.strict.deepStrictEqual(w[0].smode, { width: '', height: '' })
+        assert.strict.deepStrictEqual([w[0].snew.offsetWidth, w[0].snew.offsetHeight], [721, 400])
+        b.d.unbind(el)
+    })
+
+    it(`should carry no direction on window events after a narrowing within the tolerance`, async function() {
+        let env = mkEnv()
+        let el = new Ele(482, 400)
+        let b = mkBinding(env, el)
+        env.fireRO(el)
+        await sleep(10)
+        el.size(481, 400)
+        env.fireRO(el)
+        await sleep(10)
+        env.resizeWindow()
+        let w = b.rec.filter((m) => m.from === 'window')
+        assert.strict.deepStrictEqual(w.map((m) => m.smode), [{ width: '', height: '' }])
+        b.d.unbind(el)
+    })
+
+    it(`should carry no direction for an axis within the tolerance when the other axis triggers a dom event`, async function() {
+        //寬先+1px(未超過容許誤差, 不發dom事件), 之後高+40px觸發dom事件: 該事件之寬方向須為空,
+        //  否則全高之抽屜遇視窗高度變化時, WDrawer之autoSwitchTo*會依殘餘之寬方向誤切換(wsemi 1.9.4有此問題, 1.9.5修正)
+        let env = mkEnv()
+        let el = new Ele(720, 400)
+        let b = mkBinding(env, el)
+        env.fireRO(el)
+        await sleep(10)
+        el.size(721, 400)
+        env.fireRO(el)
+        await sleep(10)
+        el.size(721, 440)
+        env.fireRO(el)
+        await sleep(10)
+        assert.strict.deepStrictEqual(b.rec.map((m) => [m.from, m.snew.offsetWidth, m.snew.offsetHeight, m.smode.width, m.smode.height]), [['dom', 720, 400, 'larger', 'larger'], ['dom', 721, 440, '', 'larger']])
+        b.d.unbind(el)
+    })
+
+    it(`should carry the current window size on window events`, async function() {
+        //WColorSelect以視窗事件之snew.windowWidth決定彈窗橫排或直排, 須為事件當下之視窗寬
+        let env = mkEnv()
+        let el = new Ele(300, 40)
+        let b = mkBinding(env, el)
+        env.fireRO(el)
+        await sleep(10)
+        globalThis.window.innerWidth = 420
+        env.resizeWindow()
+        globalThis.window.innerWidth = 1200
+        env.resizeWindow()
+        let w = b.rec.filter((m) => m.from === 'window')
+        assert.strict.deepStrictEqual(w.map((m) => m.snew.windowWidth), [420, 1200])
+        b.d.unbind(el)
+    })
+
+    it(`should stop forwarding after unbind`, async function() {
+        let env = mkEnv()
+        let el = new Ele(300, 40)
+        let b = mkBinding(env, el)
+        env.fireRO(el)
+        await sleep(10)
+        let n = b.rec.length
+        b.d.unbind(el)
+        el.size(400, 40)
+        env.fireRO(el)
+        env.resizeWindow()
+        await sleep(10)
+        assert.strict.deepStrictEqual([n, b.rec.length, env.listeners.length], [1, 1, 0])
+    })
+
+    it(`should do nothing when the element has no domresize listener`, async function() {
+        //使用端漏寫@而成靜態屬性domresize="domresize"(WPanelScale曾如此)時, 指令收不到處理器, 不得拋錯
+        let env = mkEnv()
+        let el = new Ele(300, 40)
+        let d = domResize()
+        d.bind(el, {}, { data: { attrs: { domresize: 'domresize' } } })
+        assert.doesNotThrow(() => {
+            env.fireRO(el)
+            env.resizeWindow()
+        })
+        await sleep(10)
+        d.unbind(el)
+    })
+
+})