w-web-perm 1.0.82 → 1.0.83

package/dist/w-web-perm.umd.js

@@ -1,5 +1,5 @@
 /*!
- * w-web-perm v1.0.82
+ * w-web-perm v1.0.83
  * (c) 2018-2021 yuda-lyu(semisphere)
  * Released under the MIT License.
  */

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 Mon Sep 14 2026 15:08:40 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 Mon Sep 14 2026 20:15:18 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 Mon Sep 14 2026 15:08:40 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 Mon Sep 14 2026 20:15:18 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 Mon Sep 14 2026 15:08:40 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 Mon Sep 14 2026 20:15:18 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 Mon Sep 14 2026 15:08:40 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 Mon Sep 14 2026 20:15:18 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 Mon Sep 14 2026 15:08:40 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 Mon Sep 14 2026 20:15:18 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 Mon Sep 14 2026 15:08:40 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 Mon Sep 14 2026 20:15:18 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "w-web-perm",
-  "version": "1.0.82",
+  "version": "1.0.83",
   "main": "dist/w-web-perm.umd.js",
   "dependencies": {
     "json5": "^2.2.3",
     "w-aggrid-vue": "^2.0.86",
-    "w-component-vue": "^2.5.14",
+    "w-component-vue": "^2.5.15",
     "w-data-collector": "^1.0.37",
     "w-echarts-vue": "^1.0.11",
     "w-serv-hapi": "^1.0.88",

package/src/components/LayoutContentStaInfor.vue

@@ -36,10 +36,46 @@
                                         <input id="staShowTotal" type="checkbox" v-model="showTotal" @change="updateChartsDebounce" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500">
                                         <label for="staShowTotal" class="ml-2 text-sm font-medium text-gray-900">{{$t('staTotal')}}</label>
                                     </div>
-                                    <select v-model="timeInterval" @change="changeTimeInterval" class="border rounded px-2 py-1 text-sm">
-                                        <option value="hr">{{$t('staTimeHr')}}</option>
-                                        <option value="day">{{$t('staTimeDay')}}</option>
-                                    </select>
+                                    <!-- 時間分組下拉改自製 WTextSelect 取代原生 <select>(全域 §10.6-3: 原生下拉彈出清單之選中/hover 色由 OS 決定, CSS 不可控, 與本頁主題不一致; 同 w-web-sso LayoutContentStaInfor / w-web-api LayoutContentStats, 三專案統一).
+                                         色票沿用本頁既有 Tailwind 類別實值: 邊線 border #e5e7eb、底 bg-white #ffffff、文字同鄰接勾選框標籤 text-gray-900 #111827、
+                                         項目 hover 底 gray-100 #f3f4f6、焦點邊線同勾選框 focus:ring-blue-500 #3b82f6、展開圖標同副標 text-gray-500 #6b7280、圓角 rounded 4; 字級 text-sm 0.875rem; 內距同原 px-2 py-1.
+                                         寬度依當前語系最長選項文字計算(computed timeIntervalSelWidth, 同原生 select 依最長選項定寬, §10.6-5); id 供 e2e 定位, labelContent 供 e2e 定位 teleport 至 body 之清單.
+                                         清單對齊(§10.6-6): w-component-vue 2.5.14 實測(tmp/probe-stasel.mjs, 2026-09-14)清單左緣錨定「觸發區文字左緣」(外框左緣 + 邊框 1 + 內距 8), 故 placementDistX=-9 把清單左緣拉回外框左緣,
+                                         再以項目左內距 9 使項目文字與觸發區文字左緣貼齊(同 w-web-api 之 -9; sso 之 0 為其自量, 兩者差異未究). 清單寬固定同觸發區. -->
+                                    <WTextSelect
+                                        id="staTimeIntervalSel"
+                                        :style="`width:${timeIntervalSelWidth}px;`"
+                                        :items="timeIntervalOptions"
+                                        :value="timeInterval"
+                                        :shadow="false"
+                                        :borderRadius="4"
+                                        :paddingStyle="{ v: 4, h: 8 }"
+                                        :backgroundColor="'#ffffff'"
+                                        :backgroundColorHover="'#ffffff'"
+                                        :backgroundColorFocus="'#ffffff'"
+                                        :borderColor="'#e5e7eb'"
+                                        :borderColorHover="'#e5e7eb'"
+                                        :borderColorFocus="'#3b82f6'"
+                                        :textColor="'#111827'"
+                                        :textFontSize="'0.875rem'"
+                                        :itemTextFontSize="'0.875rem'"
+                                        :itemTextColor="'#111827'"
+                                        :itemTextColorHover="'#111827'"
+                                        :itemBackgroundColor="'#ffffff'"
+                                        :itemBackgroundColorHover="'#f3f4f6'"
+                                        :itemPaddingStyle="{ v: 6, h: 9 }"
+                                        :placementDistX="-9"
+                                        :autoFitMinWidth="false"
+                                        :autoFitMaxWidth="false"
+                                        :minWidth="timeIntervalSelWidth"
+                                        :maxWidth="timeIntervalSelWidth"
+                                        :expansionIconColor="'#6b7280'"
+                                        :labelContent="'staTimeIntervalSel'"
+                                        @input="onInputTimeInterval"
+                                    >
+                                        <template v-slot:select="props">{{getTimeIntervalText(props.item)}}</template>
+                                        <template v-slot:item="props">{{getTimeIntervalText(props.item)}}</template>
+                                    </WTextSelect>
                                 </div>
 
                             </div>
@@ -148,10 +184,16 @@ import sortBy from 'lodash-es/sortBy.js'
 import reverse from 'lodash-es/reverse.js'
 import debounce from 'wsemi/src/debounce.mjs'
 import isearr from 'wsemi/src/isearr.mjs'
+import isestr from 'wsemi/src/isestr.mjs'
 import WEchartsVue from 'w-echarts-vue/src/components/WEchartsVue.vue'
 import { mdiChartBoxOutline, mdiTableLarge } from '@mdi/js/mdi.js'
 import WIcon from 'w-component-vue/src/components/WIcon.vue'
 import WIconLoading from 'w-component-vue/src/components/WIconLoading.vue'
+import WTextSelect from 'w-component-vue/src/components/WTextSelect.vue'
+
+
+//時間分組下拉之結構寬度(px): 左右內距 8+8、左右邊框 1+1、展開圖標 18、圖標與文字間隙 2 (同 w-web-sso LayoutContentStaInfor / w-web-api LayoutContentStats 之 SEL_STRUCT_WIDTH)
+let SEL_STRUCT_WIDTH = 8 + 8 + 1 + 1 + 18 + 2
 
 
 export default {
@@ -159,6 +201,7 @@ export default {
         WEchartsVue,
         WIcon,
         WIconLoading,
+        WTextSelect,
     },
     props: {
         drawer: {
@@ -183,6 +226,8 @@ export default {
 
             timeLength: 7,
             timeInterval: 'hr',
+            timeIntervalOptions: ['hr', 'day'], //時間分組下拉之選項鍵, 顯示文字經 getTimeIntervalText 走 i18n(staTimeHr / staTimeDay)
+            fontSel: '', //時間分組下拉觸發區之實際字型(mounted 自 computed style 取得), 供 timeIntervalSelWidth 量文字實寬
 
             showTotal: false,
 
@@ -199,6 +244,11 @@ export default {
 
         let vo = this
 
+        //時間分組下拉觸發區字型: 字級 0.875rem(同原 text-sm)× 根字級, 字族/字重承襲本頁; 供 timeIntervalSelWidth 以 canvas 量最長選項文字實寬(同 sso)
+        let cs = getComputedStyle(vo.$el)
+        let rootPx = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
+        vo.fontSel = `${cs.fontWeight} ${rootPx * 0.875}px ${cs.fontFamily}`
+
         //errMsg
         vo.errMsg = ''
 
@@ -212,6 +262,20 @@ export default {
     },
     computed: {
 
+        //時間分組下拉觸發區寬度(全域 §10.6-5: 固定尺寸須計算): 當前語系「最長選項文字」實寬(canvas measureText, 字型同觸發區)+ 結構寬 SEL_STRUCT_WIDTH;
+        //語系切換即重算($t 為響應式). why 不寫死: 原生 select 依最長選項自動定寬, 自製下拉須重現, 否則另一語系右側大片留白.
+        timeIntervalSelWidth: function() {
+            let vo = this
+            let texts = vo.timeIntervalOptions.map((k) => vo.getTimeIntervalText(k))
+            let wText = 0
+            if (isestr(vo.fontSel)) {
+                let c = document.createElement('canvas').getContext('2d')
+                c.font = vo.fontSel
+                wText = Math.max(...texts.map((t) => c.measureText(t).width))
+            }
+            return Math.ceil(wText + SEL_STRUCT_WIDTH)
+        },
+
         lang: function() {
             let vo = this
             return get(vo, `$store.state.lang`, '')
@@ -435,6 +499,20 @@ export default {
             return num.toLocaleString()
         },
 
+        getTimeIntervalText: function(k) {
+            let vo = this
+            return k === 'day' ? vo.$t('staTimeDay') : vo.$t('staTimeHr')
+        },
+
+        onInputTimeInterval: function(v) {
+            let vo = this
+            if (v === vo.timeInterval) {
+                return //重選同值不重取
+            }
+            vo.timeInterval = v
+            vo.changeTimeInterval()
+        },
+
         changeTimeInterval: function() {
             let vo = this
 

package/tableTags-web-perm.json

@@ -1 +1 @@
-{"grups":"2026-09-14T15:09:21+08:00|WlPNEm","pemis":"2026-09-14T15:08:53+08:00|hfOSVy","targets":"2026-09-14T15:08:53+08:00|B018QW","users":"2026-09-14T15:08:53+08:00|ijcR8Z"}
+{"grups":"2026-09-14T20:16:24+08:00|0BKvMO","pemis":"2026-09-14T20:16:24+08:00|cIqWD1","targets":"2026-09-14T20:16:24+08:00|qPAT0o","users":"2026-09-14T20:16:24+08:00|zhkupi"}

package/dist/css/app.894b904b.css

@@ -1 +0,0 @@
-.bg-gray-100[data-v-a21eb034]{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-50[data-v-a21eb034]{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-white[data-v-a21eb034]{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.border[data-v-a21eb034]{border-width:1px}.border-collapse[data-v-a21eb034]{border-collapse:collapse}.border-solid[data-v-a21eb034]{border-style:solid}.border-gray-200[data-v-a21eb034]{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300[data-v-a21eb034]{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.flex[data-v-a21eb034]{display:-webkit-box;display:-ms-flexbox;display:flex}.focus\:ring-blue-500[data-v-a21eb034]:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.font-medium[data-v-a21eb034]{font-weight:500}.font-semibold[data-v-a21eb034]{font-weight:600}.h-4[data-v-a21eb034]{height:1rem}.hover\:bg-gray-50[data-v-a21eb034]:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.items-center[data-v-a21eb034]{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.justify-end[data-v-a21eb034]{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mb-8[data-v-a21eb034]{margin-bottom:2rem}.ml-2[data-v-a21eb034]{margin-left:.5rem}.mr-2[data-v-a21eb034]{margin-right:.5rem}.mt-2[data-v-a21eb034]{margin-top:.5rem}.overflow-x-auto[data-v-a21eb034]{overflow-x:auto}.p-5[data-v-a21eb034]{padding:1.25rem}.pb-2[data-v-a21eb034]{padding-bottom:.5rem}.px-2[data-v-a21eb034]{padding-left:.5rem;padding-right:.5rem}.px-6[data-v-a21eb034]{padding-left:1.5rem;padding-right:1.5rem}.py-1[data-v-a21eb034]{padding-top:.25rem;padding-bottom:.25rem}.py-3[data-v-a21eb034]{padding-top:.75rem;padding-bottom:.75rem}.py-4[data-v-a21eb034]{padding-top:1rem;padding-bottom:1rem}.relative[data-v-a21eb034]{position:relative}.rounded[data-v-a21eb034]{border-radius:.25rem}.rounded-lg[data-v-a21eb034]{border-radius:.5rem}.shadow-md[data-v-a21eb034]{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.space-x-4[data-v-a21eb034]>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-8[data-v-a21eb034]>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.text-blue-600[data-v-a21eb034]{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-gray-500[data-v-a21eb034]{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-700[data-v-a21eb034]{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-900[data-v-a21eb034]{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-left[data-v-a21eb034]{text-align:left}.text-lg[data-v-a21eb034]{font-size:1.125rem;line-height:1.75rem}.text-purple-600[data-v-a21eb034]{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.text-sm[data-v-a21eb034]{font-size:.875rem;line-height:1.25rem}.text-xs[data-v-a21eb034]{font-size:.75rem;line-height:1rem}.transition-colors[data-v-a21eb034]{-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-duration:.15s;transition-duration:.15s}.w-4[data-v-a21eb034]{width:1rem}.w-full[data-v-a21eb034]{width:100%}.staCtrl[data-v-a21eb034]{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:12px;padding:8px 0}.staCtrlRight[data-v-a21eb034],.staCtrl[data-v-a21eb034]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.staCtrlRight[data-v-a21eb034]{-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:16px}body,html{font-family:微軟正黑體,Microsoft JhengHei,MicrosoftJhengHeiRegular,Avenir,Helvetica,Arial,sans-serif;overflow-y:hidden}a,button,div,input,p,pre,span,textarea{font-family:inherit}.fade-enter-active{-webkit-animation:go 1s;animation:go 1s}.fade-leave-active{-webkit-animation:back 1s;animation:back 1s}@-webkit-keyframes go{0%{opacity:0}to{opacity:1}}@keyframes go{0%{opacity:0}to{opacity:1}}@-webkit-keyframes back{0%{opacity:1}to{opacity:0}}@keyframes back{0%{opacity:1}to{opacity:0}}