w-web-perm 1.0.83 → 1.0.85

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/src_components_ModeSelectChip.vue.new.diff

@@ -0,0 +1,124 @@
+--- /dev/null	2026-09-15 21:52:30.000000000 +0800
++++ "./w-web-perm�\232��\231\204�\207�\226\231/src/components/ModeSelectChip.vue"	2026-09-15 21:52:29.942414300 +0800
+@@ -0,0 +1,121 @@
++<template>
++    <div
++        :style="`display:inline-block; vertical-align:middle; line-height:20px; border-radius:${attached?'4px 0 0 4px':'4px'}; overflow:hidden;`"
++    >
++        <WTextSelect
++            :style="`width:${width}px;`"
++            :items="items"
++            :value="value"
++            :editable="editable"
++            :paddingStyle="{v:0,h:5}"
++            :borderRadius="0"
++            :shadow="false"
++            :textFontSize="'12px'"
++            :textColor="useTextColor"
++            :backgroundColor="useBackgroundColor"
++            :backgroundColorHover="useBackgroundColorHover"
++            :backgroundColorFocus="useBackgroundColorHover"
++            :borderColor="useBorderColor"
++            :borderColorHover="useBorderColorHover"
++            :borderColorFocus="useBorderColorHover"
++            :showExpansionIcon="editable"
++            :expansionIconSize="14"
++            :expansionIconColor="useIconColor"
++            :itemPaddingStyle="{v:6,h:10}"
++            :itemTextFontSize="'12px'"
++            :minWidth="width"
++            :placementDistX="placementDistX"
++            :labelContent="labelContent"
++            @input="(item)=>{$emit('input',item)}"
++        ></WTextSelect>
++    </div>
++</template>
++
++<script>
++import WTextSelect from 'w-component-vue/src/components/WTextSelect.vue'
++
++
++//合併模式(OR/AND)控制項, 外觀為關聯 chip 之模式段(方角 4px、高 22px、字 12px), 內核仍為 WTextSelect(選項清單 Teleport 至 body, 屬性 wtlp 為 labelContent)
++//  - 獨立使用(VeCgrups/VeCpemis 之「合併…模式」欄): attached=false, 四角圓角
++//  - 嵌於本項 chip 之左段(VeGrupBlngUsers/VePemiBlngGrups): attached=true, 只有左側圓角, 右側與名稱段相接
++//  - 尺寸: 寬 56 = 最長項 'AND' 於 12px 之墨跡 27 + 左右內距 5×2 + 展開箭頭 14 + 箭頭前間隙 2 + 邊框 1×2 (取整), 固定寬使 OR/AND 切換時不跳動;
++//          高 22 = line-height 20 + 上下邊框 1×2, 落在 ag-grid balham 之 27px 儲存格內不被裁切
++//  - 唯讀(editable=false): 沿用 WShellEllipse 之透明度 0.6 與無手指游標, 並不渲染展開箭頭
++//  - 清單浮層: minWidth 給整顆寬度使清單不窄於控制項(WPopup 之 autoFitMinWidth 只量觸發文字區, 會比外框窄), placementDistX 使清單左緣對齊外框左緣
++export default {
++    components: {
++        WTextSelect,
++    },
++    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'],
++        }
++    },
++    computed: {
++
++        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
++            return vo.highlight ? '#be295a' : '#fff'
++        },
++
++        useBackgroundColorHover: function() { //同色系加深, 不翻轉
++            let vo = this
++            return vo.highlight ? '#ac2451' : '#f5f5f5'
++        },
++
++        useBorderColor: function() {
++            let vo = this
++            return vo.highlight ? '#ac2451' : '#aaa'
++        },
++
++        useBorderColorHover: function() {
++            let vo = this
++            return vo.highlight ? '#9e2149' : '#888'
++        },
++
++    },
++}
++</script>
++
++<style scoped>
++</style>

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/src_components_RelationChip.vue.new.diff

@@ -0,0 +1,116 @@
+--- /dev/null	2026-09-15 21:52:30.000000000 +0800
++++ "./w-web-perm�\232��\231\204�\207�\226\231/src/components/RelationChip.vue"	2026-09-15 21:52:29.958996500 +0800
+@@ -0,0 +1,113 @@
++<template>
++    <div
++        :style="`display:inline-flex; align-items:stretch; height:22px; line-height:20px; font-size:12px; vertical-align:middle; white-space:nowrap;`"
++        :title="name"
++    >
++
++        <!-- 模式段: 本項且可編輯時為下拉控制項, 其餘為純文字 -->
++        <ModeSelectChip
++            :value="mode"
++            :editable="true"
++            :highlight="true"
++            :attached="true"
++            :labelContent="labelContent"
++            @input="(item)=>{$emit('input',item)}"
++            v-if="modeEditable"
++        ></ModeSelectChip>
++        <div
++            :style="`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="`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>

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/src_components_RelationChips.vue.new.diff

@@ -0,0 +1,152 @@
+--- /dev/null	2026-09-15 21:52:30.000000000 +0800
++++ "./w-web-perm�\232��\231\204�\207�\226\231/src/components/RelationChips.vue"	2026-09-15 21:52:29.978398800 +0800
+@@ -0,0 +1,149 @@
++<template>
++    <span style="white-space:nowrap;">
++
++        <!-- 展開全部: 固定在最左, 不隨 chip 溢出被裁; 點擊以浮層列出全部 chip(可換行、可捲動) -->
++        <!-- WPopup(WTooltip) 之 displayType: 'block' 為 inline-block、'line' 為 block(命名與 CSS 相反), 此處須為行內元素以與其後之 chip 同列 -->
++        <template v-if="n > 0">
++            <WPopup
++                style="vertical-align:middle;"
++                :displayType="'block'"
++                :isolated="true"
++                :placement="'bottom-start'"
++                :paddingStyle="{v:8,h:10}"
++                :minWidth="320"
++                :maxWidth="560"
++                :labelContent="labelContentAll"
++            >
++                <template v-slot:trigger>
++                    <div
++                        :style="`display:inline-flex; align-items:center; box-sizing:border-box; height:22px; margin-right:4px; padding:0 6px; border:1px solid ${hoverAll?'#888':'#aaa'}; border-radius:4px; background:${hoverAll?'#f5f5f5':'#fff'}; color:${hoverAll?'#333':'#555'}; font-size:12px; line-height:20px; vertical-align:middle; cursor:pointer; user-select:none; transition:all 0.3s;`"
++                        :title="tooltipAll"
++                        @mouseenter="hoverAll=true"
++                        @mouseleave="hoverAll=false"
++                    >
++                        <WIcon
++                            :icon="mdiDotsHorizontal"
++                            :size="14"
++                            :color="hoverAll?'#333':'#555'"
++                            :colorHover="'#333'"
++                        ></WIcon>
++                        <span style="padding-left:3px;">{{ n }}</span>
++                    </div>
++                </template>
++                <template v-slot:content>
++                    <div style="font-size:12px; color:#666; padding-bottom:6px;">
++                        {{ usePopupTitle }}
++                    </div>
++                    <!-- 最大高 50vh: 於 900px 高之視窗自列位往下展開仍留得住底邊, 超過即於浮層內捲動 -->
++                    <div style="display:flex; flex-wrap:wrap; gap:4px 6px; max-height:50vh; max-width:540px; overflow:auto;">
++                        <RelationChip
++                            v-for="(item, kitem) in itemsSorted"
++                            :key="`p-${kitem}`"
++                            :name="item.name"
++                            :mode="item.mode"
++                            :isCurrent="item.enable==='y'"
++                            :editable="false"
++                            :nameMaxWidth="600"
++                        ></RelationChip>
++                    </div>
++                </template>
++            </WPopup>
++        </template>
++
++        <!-- 儲存格內之 chip: 本項永遠第 1 顆; 相鄰間距 4px; 溢出由儲存格裁切 -->
++        <RelationChip
++            v-for="(item, kitem) in itemsSorted"
++            :key="`c-${kitem}`"
++            :style="`margin-right:4px;`"
++            :name="item.name"
++            :mode="item.mode"
++            :isCurrent="item.enable==='y'"
++            :editable="editable"
++            :labelContent="labelContent"
++            @input="(item)=>{$emit('input',item)}"
++        ></RelationChip>
++
++    </span>
++</template>
++
++<script>
++import { mdiDotsHorizontal } from '@mdi/js/mdi.js'
++import get from 'lodash-es/get.js'
++import size from 'lodash-es/size.js'
++import filter from 'lodash-es/filter.js'
++import WIcon from 'w-component-vue/src/components/WIcon.vue'
++import WPopup from 'w-component-vue/src/components/WPopup.vue'
++import RelationChip from './RelationChip.vue'
++
++
++//關聯 chip 列表(供 VeGrupBlngUsers 之「所屬權限群組名稱」欄與 VePemiBlngGrups 之「所屬權限名稱」欄)
++//  - items: genItems 產生之 grups/pemis 陣列, 各項含 name、mode、enable('y' 為本項)
++//  - 顯示順序: enable='y'(本項)永遠第 1 顆, 其餘依原順序; 只改顯示, 不改儲存之 cgrups/cpemis 字串(權限合併結果與順序無關, 見 mShare.mjs 之 mergeRules)
++//  - 本項 chip 之模式段即下拉(RelationChip 之 ModeSelectChip), 變更以 input 事件回傳新模式, 由呼叫端沿用既有 showXxxToggleItemModeByName 處理
++//  - 「展開全部」鈕固定於最左, 浮層(WPopup, Teleport 至 body, 與 WDialog 共用 z-index 池故可疊於對話框上)內以 flex-wrap 列出全部 chip
++export default {
++    components: {
++        WIcon,
++        WPopup,
++        RelationChip,
++    },
++    props: {
++        items: {
++            type: Array,
++            default: () => [],
++        },
++        editable: {
++            type: Boolean,
++            default: false,
++        },
++        popupTitle: { //浮層標題所用之欄名(如「所屬權限名稱」), 與數量合成 chipsPopupTitle
++            type: String,
++            default: '',
++        },
++        tooltipAll: {
++            type: String,
++            default: '',
++        },
++        labelContent: { //本項 chip 之模式下拉浮層之 wtlp 屬性值
++            type: String,
++            default: 'modeSelect',
++        },
++        labelContentAll: { //展開全部之浮層之 wtlp 屬性值
++            type: String,
++            default: 'relationChipsAll',
++        },
++    },
++    data: function() {
++        return {
++            mdiDotsHorizontal,
++            hoverAll: false,
++        }
++    },
++    computed: {
++
++        n: function() {
++            let vo = this
++            return size(vo.items)
++        },
++
++        itemsSorted: function() {
++            let vo = this
++            let a = filter(vo.items, (v) => get(v, 'enable', '') === 'y')
++            let b = filter(vo.items, (v) => get(v, 'enable', '') !== 'y')
++            return [...a, ...b]
++        },
++
++        usePopupTitle: function() {
++            let vo = this
++            let t = vo.$t('chipsPopupTitle')
++            t = t.replace('{title}', vo.popupTitle)
++            t = t.replace('{n}', vo.n)
++            return t
++        },
++
++    },
++}
++</script>
++
++<style scoped>
++</style>

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/src_components_VeCgrups.vue.diff

@@ -0,0 +1,76 @@
+diff --git a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VeCgrups.vue "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VeCgrups.vue"
+index b51b65d..0408bc8 100644
+--- a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VeCgrups.vue
++++ "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VeCgrups.vue"
+@@ -128,19 +128,13 @@
+                         >
+                             <template v-slot:cell-render="props">
+                                 <span v-if="props.key==='name'">{{ props.value }}</span>
+-                                <WTextSelect
++                                <ModeSelectChip
+                                     v-else-if="props.key==='mode'"
+-                                    :style="`width:${modeSelectWidth}px;`"
+-                                    :items="modeItems"
+                                     :value="props.row.mode"
+-                                    :editable="isEditable"
+-                                    :paddingStyle="{v:0,h:10}"
+-                                    :shadow="false"
+-                                    :itemPaddingStyle="{v:8,h:10}"
+-                                    :placementDistX="-10"
++                                    :editable="isEditable && props.row.enable === 'y'"
+                                     :labelContent="'modeSelect'"
+                                     @input="(item)=>{showVeCgrupsToggleItemModeByName(props.row.name, item)}"
+-                                ></WTextSelect>
++                                ></ModeSelectChip>
+                                 <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="showVeCgrupsToggleItemEnableByName(props.row.name)" :disabled="!isEditable" />
+                                 <span v-else>{{ props.value }}</span>
+                             </template>
+@@ -180,7 +174,7 @@ import isestr from 'wsemi/src/isestr.mjs'
+ import WDialog from 'w-component-vue/src/components/WDialog.vue'
+ import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
+ import WAggridVue from 'w-aggrid-vue/src/components/WAggridVue.vue'
+-import WTextSelect from 'w-component-vue/src/components/WTextSelect.vue'
++import ModeSelectChip from './ModeSelectChip.vue'
+ 
+ 
+ export default {
+@@ -188,7 +182,7 @@ export default {
+         WDialog,
+         WButtonCircle,
+         WAggridVue,
+-        WTextSelect,
++        ModeSelectChip,
+     },
+     props: {
+     },
+@@ -217,10 +211,6 @@ export default {
+             isEditable: false,
+             isModified: false,
+ 
+-            //mode 欄之自製下拉(WTextSelect, 取代原生 select 以免彈出清單之 highlight 色由 OS 決定)
+-            modeItems: ['OR', 'AND'],
+-            modeSelectWidth: 72, //= 最長項 'AND' 文字實寬 + 左右內距 10×2 + 展開箭頭 18 + 邊框 1×2, 實測後定值(見 CLAUDE_experience.md)
+-
+             user: null,
+ 
+             items: [],
+@@ -410,7 +400,7 @@ export default {
+                         'enable': false,
+                     },
+                     kpHeadWidth: {
+-                        'mode': 100,
++                        'mode': 90, //ModeSelectChip 寬 56 + 儲存格內距 11×2 = 78, 留餘裕
+                         'enable': 100,
+                     },
+                     // kpRowDrag: {
+@@ -427,6 +417,10 @@ export default {
+                     kpHeadCheckBox: {
+                         'name': true,
+                     },
++                    kpHeadFocusHighlight: { //儲存格內已有自己的控制項(模式下拉、勾選框), 不再疊儲存格焦點框
++                        'mode': false,
++                        'enable': false,
++                    },
+                     rowsChange: (rs) => {
+                         // console.log('rowsChange', rs)
+                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/src_components_VeCpemis.vue.diff

@@ -0,0 +1,76 @@
+diff --git a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VeCpemis.vue "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VeCpemis.vue"
+index 7abe87e..8aac5db 100644
+--- a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VeCpemis.vue
++++ "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VeCpemis.vue"
+@@ -128,19 +128,13 @@
+                         >
+                             <template v-slot:cell-render="props">
+                                 <span v-if="props.key==='name'">{{ props.value }}</span>
+-                                <WTextSelect
++                                <ModeSelectChip
+                                     v-else-if="props.key==='mode'"
+-                                    :style="`width:${modeSelectWidth}px;`"
+-                                    :items="modeItems"
+                                     :value="props.row.mode"
+-                                    :editable="isEditable"
+-                                    :paddingStyle="{v:0,h:10}"
+-                                    :shadow="false"
+-                                    :itemPaddingStyle="{v:8,h:10}"
+-                                    :placementDistX="-10"
++                                    :editable="isEditable && props.row.enable === 'y'"
+                                     :labelContent="'modeSelect'"
+                                     @input="(item)=>{showVeCpemisToggleItemModeByName(props.row.name, item)}"
+-                                ></WTextSelect>
++                                ></ModeSelectChip>
+                                 <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="showVeCpemisToggleItemEnableByName(props.row.name)" :disabled="!isEditable" />
+                                 <span v-else>{{ props.value }}</span>
+                             </template>
+@@ -180,7 +174,7 @@ import isestr from 'wsemi/src/isestr.mjs'
+ import WDialog from 'w-component-vue/src/components/WDialog.vue'
+ import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
+ import WAggridVue from 'w-aggrid-vue/src/components/WAggridVue.vue'
+-import WTextSelect from 'w-component-vue/src/components/WTextSelect.vue'
++import ModeSelectChip from './ModeSelectChip.vue'
+ 
+ 
+ export default {
+@@ -188,7 +182,7 @@ export default {
+         WDialog,
+         WButtonCircle,
+         WAggridVue,
+-        WTextSelect,
++        ModeSelectChip,
+     },
+     props: {
+     },
+@@ -217,10 +211,6 @@ export default {
+             isEditable: false,
+             isModified: false,
+ 
+-            //mode 欄之自製下拉(WTextSelect, 取代原生 select 以免彈出清單之 highlight 色由 OS 決定)
+-            modeItems: ['OR', 'AND'],
+-            modeSelectWidth: 72, //= 最長項 'AND' 文字實寬 + 左右內距 10×2 + 展開箭頭 18 + 邊框 1×2, 實測後定值(見 CLAUDE_experience.md)
+-
+             grup: null,
+ 
+             items: [],
+@@ -410,7 +400,7 @@ export default {
+                         'enable': false,
+                     },
+                     kpHeadWidth: {
+-                        'mode': 100,
++                        'mode': 90, //ModeSelectChip 寬 56 + 儲存格內距 11×2 = 78, 留餘裕
+                         'enable': 100,
+                     },
+                     // kpRowDrag: {
+@@ -427,6 +417,10 @@ export default {
+                     kpHeadCheckBox: {
+                         'name': true,
+                     },
++                    kpHeadFocusHighlight: { //儲存格內已有自己的控制項(模式下拉、勾選框), 不再疊儲存格焦點框
++                        'mode': false,
++                        'enable': false,
++                    },
+                     rowsChange: (rs) => {
+                         // console.log('rowsChange', rs)
+                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/src_components_VeCrules.vue.diff

@@ -0,0 +1,14 @@
+diff --git a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VeCrules.vue "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VeCrules.vue"
+index a456c45..deb9b64 100644
+--- a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VeCrules.vue
++++ "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VeCrules.vue"
+@@ -402,6 +402,9 @@ export default {
+                     kpHeadCheckBox: {
+                         'id': true,
+                     },
++                    kpHeadFocusHighlight: { //儲存格內已有自己的控制項(勾選框), 不再疊儲存格焦點框, 與其餘關聯對話框一致
++                        'enable': false,
++                    },
+                     rowsChange: (rs) => {
+                         // console.log('rowsChange', rs)
+                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))