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/src/components/ModeSelectChip.vue

@@ -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/src/components/RelationChip.vue

@@ -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/src/components/RelationChips.vue

@@ -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>