w-web-perm 1.0.85 → 1.0.86

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/src/components/ModeSelectChip.vue

@@ -1,121 +0,0 @@
-<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

@@ -1,113 +0,0 @@
-<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

@@ -1,149 +0,0 @@
-<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>