w-web-perm 1.0.84 → 1.0.85

package/docs/WWebPerm.html

@@ -1045,7 +1045,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Wed Sep 16 2026 15:00:43 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Thu Sep 17 2026 11:38:22 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/global.html

@@ -597,7 +597,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Wed Sep 16 2026 15:00:43 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Thu Sep 17 2026 11:38:22 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/index.html

@@ -71,7 +71,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Wed Sep 16 2026 15:00:43 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Thu Sep 17 2026 11:38:22 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/server_WWebPerm.mjs.html

@@ -1221,7 +1221,7 @@ export default WWebPerm
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Wed Sep 16 2026 15:00:43 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Thu Sep 17 2026 11:38:22 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/server_procCore.mjs.html

@@ -298,7 +298,7 @@ export default proc
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Wed Sep 16 2026 15:00:43 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Thu Sep 17 2026 11:38:22 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/src_fetchJson.mjs.html

@@ -100,7 +100,7 @@ export default fetchJson
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Wed Sep 16 2026 15:00:43 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Thu Sep 17 2026 11:38:22 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "w-web-perm",
-  "version": "1.0.84",
+  "version": "1.0.85",
   "main": "dist/w-web-perm.umd.js",
   "dependencies": {
     "json5": "^2.2.3",
-    "w-aggrid-vue": "^2.0.87",
+    "w-aggrid-vue": "^2.0.88",
     "w-component-vue": "^2.5.15",
     "w-data-collector": "^1.0.37",
     "w-echarts-vue": "^1.0.11",

package/server/procLang.mjs

@@ -262,9 +262,9 @@ let kpLang = {
         eng: `Use users`,
         cht: `管控所屬使用者`,
     },
-    belongGrups: {
+    belongGrups: { //與 belongUsers(管控所屬使用者)同類之反向參照欄, 中文補「管控」以對稱(2026-09-16 業主指正)
         eng: `Use groups`,
-        cht: `所屬權限群組`,
+        cht: `管控所屬權限群組`,
     },
     //目前無引用,保留供日後使用(見 spec/設計要點與取捨.md ADR-014)
     // belongPemis: {
@@ -279,6 +279,14 @@ let kpLang = {
         eng: `Use permissions`,
         cht: `所屬權限名稱`,
     },
+    chipsShowAll: { //關聯 chip 列表(RelationChips)之「展開全部」鈕提示
+        eng: `Show all`,
+        cht: `展開全部`,
+    },
+    chipsPopupTitle: { //關聯 chip 列表之展開浮層標題, {title} 為欄名(belongGrupsNames/belongPemisNames), {n} 為數量
+        eng: `{title} ({n} in total)`,
+        cht: `{title}：共 {n} 項`,
+    },
 
     isAdmin: {
         eng: `Administrator`,
@@ -507,8 +515,8 @@ let kpLang = {
         eng: `Permission groups`,
         cht: `展示所屬權限群組`,
     },
-    pemiBlngRnderNoGrup: {
-        eng: `No users`,
+    pemiBlngRnderNoGrup: { //權限頁 belongGrups 欄之空狀態; eng 原誤植為 `No users`(與本欄語意不符, 2026-09-16 雙獨立審計查出), 隨 A3 同欄改字一併訂正
+        eng: `No permission groups`,
         cht: `無所屬權限群組`,
     },
     pemiBlngRnderGrups: {

package/src/components/LayoutContentGrups.vue

@@ -311,8 +311,8 @@ export default {
                 'name',
                 'description',
                 'from',
-                'belongUsers',
                 'cpemis',
+                'belongUsers',
                 'userId',
                 'timeCreate',
                 'userIdUpdate',
@@ -322,8 +322,8 @@ export default {
                 'name',
                 'description',
                 'from',
-                'belongUsers',
                 'cpemis',
+                'belongUsers',
                 'userId',
                 'timeCreate',
                 'userIdUpdate',
@@ -333,8 +333,8 @@ export default {
                 'name',
                 'description',
                 // 'from',
-                'belongUsers',
                 'cpemis',
+                'belongUsers',
                 // 'userId',
                 // 'timeCreate',
                 // 'userIdUpdate',
@@ -799,8 +799,8 @@ export default {
             let cmp = get(vo, '$refs.rftable')
             // console.log('cmp', cmp)
 
-            //showKeys
-            cmp.showKeys(vo.tabKeysShow)
+            //showKeys, applyOrder:false 僅切換顯示與隱藏、維持目前欄序; 理由同 LayoutContentUsers 該處註解
+            cmp.showKeys(vo.tabKeysShow, { applyOrder: false })
             // console.log('tabKeysShow', vo.tabKeysShow)
 
         },

package/src/components/LayoutContentPemis.vue

@@ -311,8 +311,8 @@ export default {
                 'name',
                 'description',
                 'from',
-                'belongGrups',
                 'crules',
+                'belongGrups',
                 'userId',
                 'timeCreate',
                 'userIdUpdate',
@@ -322,8 +322,8 @@ export default {
                 'name',
                 'description',
                 'from',
-                'belongGrups',
                 'crules',
+                'belongGrups',
                 'userId',
                 'timeCreate',
                 'userIdUpdate',
@@ -333,8 +333,8 @@ export default {
                 'name',
                 'description',
                 // 'from',
-                'belongGrups',
                 'crules',
+                'belongGrups',
                 // 'userId',
                 // 'timeCreate',
                 // 'userIdUpdate',
@@ -799,8 +799,8 @@ export default {
             let cmp = get(vo, '$refs.rftable')
             // console.log('cmp', cmp)
 
-            //showKeys
-            cmp.showKeys(vo.tabKeysShow)
+            //showKeys, applyOrder:false 僅切換顯示與隱藏、維持目前欄序; 理由同 LayoutContentUsers 該處註解
+            cmp.showKeys(vo.tabKeysShow, { applyOrder: false })
             // console.log('tabKeysShow', vo.tabKeysShow)
 
         },

package/src/components/LayoutContentTargets.vue

@@ -678,8 +678,8 @@ export default {
             let cmp = get(vo, '$refs.rftable')
             // console.log('cmp', cmp)
 
-            //showKeys
-            cmp.showKeys(vo.tabKeysShow)
+            //showKeys, applyOrder:false 僅切換顯示與隱藏、維持目前欄序; 理由同 LayoutContentUsers 該處註解
+            cmp.showKeys(vo.tabKeysShow, { applyOrder: false })
             // console.log('tabKeysShow', vo.tabKeysShow)
 
         },

package/src/components/LayoutContentUsers.vue

@@ -804,8 +804,10 @@ export default {
             let cmp = get(vo, '$refs.rftable')
             // console.log('cmp', cmp)
 
-            //showKeys
-            cmp.showKeys(vo.tabKeysShow)
+            //showKeys, applyOrder:false 僅切換顯示與隱藏、維持目前欄序(w-aggrid-vue 2.0.88 起提供)
+            //  why: tabKeysShow 為 WInputCheckbox 之 v-model, 重新勾選之項一律被 push 到陣列尾端(WInputCheckbox.vue:379-381),
+            //  若沿用預設 applyOrder:true, 欄序會跟著點擊序走, 使用者隱藏再顯示某欄即跑到最右; 初始欄序由 opt.keys 決定, 本函式只在勾選時呼叫, 故不受影響
+            cmp.showKeys(vo.tabKeysShow, { applyOrder: false })
             // console.log('tabKeysShow', vo.tabKeysShow)
 
         },

package/src/components/ModeSelectChip.vue

@@ -0,0 +1,182 @@
+<template>
+    <div
+        ref="frame"
+        :style="useFrameStyle"
+        @mouseenter="hovered=true"
+        @mouseleave="hovered=false"
+        @click="clickFrame"
+    >
+        <WTextSuggestCore
+            ref="core"
+            style="width:100%;"
+            :mode="'select'"
+            :items="items"
+            :value="value"
+            :textFontSize="'12px'"
+            :textColor="useTextColor"
+            :itemTextFontSize="'12px'"
+            :itemPaddingStyle="{v:6,h:6}"
+            :expansionIcon="editable?undefined:''"
+            :expansionIconSize="14"
+            :expansionIconColor="useIconColor"
+            :minWidth="width"
+            :placementDistX="placementDistX"
+            :labelContent="labelContent"
+            :editable="editable"
+            :showPanel="opened"
+            @update:showPanel="(v)=>{opened=v}"
+            @input="(item)=>{$emit('input',item)}"
+        ></WTextSuggestCore>
+    </div>
+</template>
+
+<script>
+import WTextSuggestCore from 'w-component-vue/src/components/WTextSuggestCore.vue'
+
+
+//合併模式(OR/AND)控制項: 自繪單層外框 + WTextSuggestCore(觸發文字、隨開合旋轉之箭頭、Teleport 至 body 之選項清單, 清單屬性 wtlp 為 labelContent)
+//  - 為何不再用 WTextSelect: WTextSelect 之外框由 WShellEllipse 以「單一圓角值」繪製 1px 邊框, 無法只圓左側兩角;
+//    舊版改以外層 border-radius + overflow:hidden 裁切一個方角邊框, 實測四角往內 2px 皆為底色(缺角)且下邊框被整條裁掉
+//    (2026-09-17, tmp/probe-redesign-before.mjs)。現改由本元件之單一 div 直接畫邊框與圓角, 不再有任何裁切層。
+//  - 獨立使用(VeCgrups/VeCpemis 之「合併…模式」欄): attached=false, 四角圓角 4px
+//  - 嵌於本項 chip 之左段(RelationChip): attached=true, 只圓左側兩角, 右邊框為與名稱段之分隔色
+//  - 尺寸: 寬 56 = 最長項 'AND' 於 12px 之墨跡 27 + 左內距 5 + 箭頭 14 + 右內距 3 + 邊框 1×2 + 餘裕 5 (固定寬使 OR/AND 切換時不跳動);
+//          高 22 = line-height 20 + 上下邊框 1×2, 於 27px 儲存格內須由呼叫端以 flex 置中(上下各 2.5)
+//  - 狀態: hover 或清單開啟中 → 加深色; 唯讀(editable=false) → 整體透明度 0.6、無箭頭、無手指游標、點擊不展開(唯讀時箭頭是空承諾)
+//  - 可點範圍: 內核之點擊觸發只綁在文字區(WTooltip 之 divTrigger), 外框內距與邊框原為死區; 有手指游標就須整顆可點(全域 §10.6-4),
+//    故外框 click 若不在觸發區內即自行開啟清單
+//  - 清單對齊(全域 §10.6-6): 清單左緣錨定觸發文字左緣(外框 + 邊框 1 + 左內距 5), placementDistX=-6 使清單左緣退回外框左緣;
+//    項目文字左緣由 itemPaddingStyle.h=6(邊框 1 + 內距 5)決定, 與觸發區文字左緣貼齊
+export default {
+    components: {
+        WTextSuggestCore,
+    },
+    props: {
+        value: {
+            type: String,
+            default: 'OR',
+        },
+        editable: {
+            type: Boolean,
+            default: true,
+        },
+        highlight: { //true 為本項(醒目色, 與 chip 醒目態同色), false 為一般(白底灰邊)
+            type: Boolean,
+            default: false,
+        },
+        attached: { //true 為嵌於 chip 左段(只圓左側兩角)
+            type: Boolean,
+            default: false,
+        },
+        width: {
+            type: Number,
+            default: 56,
+        },
+        placementDistX: { //清單浮層錨定於觸發文字, 往左退回內距 5 與邊框 1 使清單左緣對齊控制項外框左緣
+            type: Number,
+            default: -6,
+        },
+        labelContent: {
+            type: String,
+            default: 'modeSelect',
+        },
+    },
+    data: function() {
+        return {
+            items: ['OR', 'AND'],
+            hovered: false,
+            opened: false,
+        }
+    },
+    computed: {
+
+        active: function() {
+            let vo = this
+            return vo.editable && (vo.hovered || vo.opened)
+        },
+
+        useTextColor: function() {
+            let vo = this
+            return vo.highlight ? '#fff' : '#555'
+        },
+
+        useIconColor: function() {
+            let vo = this
+            return vo.highlight ? '#fff' : '#777'
+        },
+
+        useBackgroundColor: function() {
+            let vo = this
+            if (vo.highlight) {
+                return vo.active ? '#ac2451' : '#be295a' //同色系加深, 不翻轉
+            }
+            return vo.active ? '#f5f5f5' : '#fff'
+        },
+
+        useBorderColor: function() {
+            let vo = this
+            if (vo.highlight) {
+                return vo.active ? '#9e2149' : '#ac2451'
+            }
+            return vo.active ? '#888' : '#aaa'
+        },
+
+        useBorderRightColor: function() { //嵌於 chip 時右邊框為與名稱段之分隔線, 與 RelationChip 唯讀模式段之分隔色一致
+            let vo = this
+            if (vo.attached && vo.highlight) {
+                return '#9e2149'
+            }
+            return vo.useBorderColor
+        },
+
+        useFrameStyle: function() {
+            let vo = this
+            return [
+                'display:inline-flex;',
+                'align-items:center;',
+                'box-sizing:border-box;',
+                `width:${vo.width}px;`,
+                'height:22px;',
+                'line-height:20px;',
+                'padding:0 3px 0 5px;',
+                `border:1px solid ${vo.useBorderColor};`,
+                `border-right-color:${vo.useBorderRightColor};`,
+                `border-radius:${vo.attached ? '4px 0 0 4px' : '4px'};`,
+                `background:${vo.useBackgroundColor};`,
+                `opacity:${vo.editable ? 1 : 0.6};`,
+                `cursor:${vo.editable ? 'pointer' : 'default'};`,
+                'transition:background-color 0.3s, border-color 0.3s;',
+                'vertical-align:middle;',
+                'white-space:nowrap;',
+            ].join(' ')
+        },
+
+    },
+    methods: {
+
+        clickFrame: function(e) {
+            let vo = this
+
+            //check
+            if (!vo.editable || vo.opened) {
+                return
+            }
+
+            //點在觸發區(文字與箭頭)內者由內核自行開啟, 此處只補外框內距與邊框之死區
+            let core = vo.$refs.core
+            let elCore = core && core.$el
+            if (elCore && elCore.contains(e.target)) {
+                return
+            }
+
+            //open
+            vo.opened = true
+
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/RelationChip.vue

@@ -0,0 +1,114 @@
+<template>
+    <div
+        :style="`display:inline-flex; align-items:stretch; height:22px; min-width:0; max-width:100%; line-height:20px; font-size:12px; vertical-align:middle; white-space:nowrap;`"
+        :title="name"
+    >
+
+        <!-- 模式段: 本項且可編輯時為下拉控制項, 其餘為純文字 -->
+        <ModeSelectChip
+            style="flex:0 0 auto;"
+            :value="mode"
+            :editable="true"
+            :highlight="true"
+            :attached="true"
+            :labelContent="labelContent"
+            @input="(item)=>{$emit('input',item)}"
+            v-if="modeEditable"
+        ></ModeSelectChip>
+        <div
+            :style="`flex:0 0 auto; box-sizing:border-box; height:22px; padding:0 5px; border-radius:4px 0 0 4px; border:1px solid ${useModeBorderColor}; border-right-color:${useModeBorderRightColor}; background:${useModeBackgroundColor}; color:${useTextColor};`"
+            v-else
+        >
+            {{ mode }}
+        </div>
+
+        <!-- 名稱段: 超長名稱以省略號截斷, 全名放於 title; 空間不足時由名稱段收縮讓位(模式段永遠完整, 本項之下拉永遠點得到) -->
+        <div
+            :style="`flex:0 1 auto; min-width:0; box-sizing:border-box; height:22px; padding:0 5px; border-radius:0 4px 4px 0; border:1px solid ${useNameBorderColor}; border-left:none; background:${useNameBackgroundColor}; color:${useTextColor}; max-width:${nameMaxWidth}px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;`"
+        >
+            {{ name }}
+        </div>
+
+    </div>
+</template>
+
+<script>
+import ModeSelectChip from './ModeSelectChip.vue'
+
+
+//單顆關聯 chip: [模式段 | 名稱段], 整顆高 22px、方角 4px、字 12px
+//  - isCurrent=true 為本項(該列與對話框當前對象之關係), 醒目色; 其餘為白底灰邊之一般色
+//  - editable=true 且 isCurrent=true 時, 模式段即 ModeSelectChip(chip 即下拉); 其他 chip 之模式段只顯示不可改
+export default {
+    components: {
+        ModeSelectChip,
+    },
+    props: {
+        name: {
+            type: String,
+            default: '',
+        },
+        mode: {
+            type: String,
+            default: 'OR',
+        },
+        isCurrent: {
+            type: Boolean,
+            default: false,
+        },
+        editable: {
+            type: Boolean,
+            default: false,
+        },
+        nameMaxWidth: {
+            type: Number,
+            default: 240,
+        },
+        labelContent: {
+            type: String,
+            default: 'modeSelect',
+        },
+    },
+    computed: {
+
+        modeEditable: function() {
+            let vo = this
+            return vo.editable && vo.isCurrent
+        },
+
+        useTextColor: function() {
+            let vo = this
+            return vo.isCurrent ? '#fff' : '#555'
+        },
+
+        useModeBackgroundColor: function() {
+            let vo = this
+            return vo.isCurrent ? '#be295a' : '#fff'
+        },
+
+        useModeBorderColor: function() {
+            let vo = this
+            return vo.isCurrent ? '#ac2451' : '#aaa'
+        },
+
+        useModeBorderRightColor: function() {
+            let vo = this
+            return vo.isCurrent ? '#9e2149' : '#aaa'
+        },
+
+        useNameBackgroundColor: function() {
+            let vo = this
+            return vo.isCurrent ? '#d22f64' : '#eee'
+        },
+
+        useNameBorderColor: function() {
+            let vo = this
+            return vo.isCurrent ? '#ac2451' : '#aaa'
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>