w-component-vue 2.2.81 → 2.2.83

package/docs/vuetifyColor.mjs.html

@@ -147,7 +147,7 @@ export default color2hex
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Tue May 02 2023 16:14:31 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.2</a> on Tue May 02 2023 22:41:55 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-component-vue",
-  "version": "2.2.81",
+  "version": "2.2.83",
   "main": "dist/w-component-vue.umd.js",
   "dependencies": {
     "@mdi/js": "^7.2.96",

package/src/AppZoneWDialog.vue

@@ -8,7 +8,7 @@
         <div style="padding:0px;">
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'slot content'"
@@ -46,7 +46,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'icon (fontawesome)'"
@@ -85,7 +85,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'title'"
@@ -123,7 +123,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'headerBackgroundColor'"
@@ -162,7 +162,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'titleColor & headerIconColor & headerBackgroundColor'"
@@ -203,7 +203,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'headerShadow (no shadow)'"
@@ -242,7 +242,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'headerShadowStyle'"
@@ -281,7 +281,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'headerBtns'"
@@ -321,7 +321,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'slot header-left & header-right'"
@@ -377,7 +377,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'saveBtnTooltip & closeBtnTooltip'"
@@ -417,7 +417,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'hasSaveBtn, no save button'"
@@ -456,7 +456,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'hasSaveBtn and hasCloseBtn, no save and close button'"
@@ -496,7 +496,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'closeWithInterceptor'"
@@ -535,7 +535,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'contentTextColor & contentBackgroundColor'"
@@ -575,7 +575,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'maxWidth, for narrow width'"
@@ -614,7 +614,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'fullscreen'"
@@ -658,7 +658,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'panelBorderRadius'"
@@ -697,7 +697,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'panelShadow (no shadow)'"
@@ -736,7 +736,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'panelShadowStyle'"
@@ -775,7 +775,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'scrollable'"
@@ -816,7 +816,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'separate for slot content'"
@@ -861,7 +861,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'table in slot content'"
@@ -1018,7 +1018,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'isModal (not persistent)'"
@@ -1057,7 +1057,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'dialogZIndex'"

package/src/AppZoneWDrawer.vue

@@ -457,6 +457,12 @@
                 >
 
                     <template v-slot:drawer>
+                        <!-- <div style="text-align:right;">
+                            <w-button-circle
+                                :icon="'fas fa-clipboard-check'"
+                                :tooltip="'test abc def'"
+                            ></w-button-circle>
+                        </div> -->
                         <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                         <w-list-vertical
                             style="height:100%; background:#fff;"
@@ -572,6 +578,12 @@
                 >
 
                     <template v-slot:drawer>
+                        <!-- <div style="text-align:left;">
+                            <w-button-circle
+                                :icon="'fas fa-clipboard-check'"
+                                :tooltip="'test abc def'"
+                            ></w-button-circle>
+                        </div> -->
                         <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                         <w-list-vertical
                             style="height:100%; background:#fff;"
@@ -758,6 +770,7 @@
 import demolink from './components/demolink.vue'
 import WListVertical from './components/WListVertical.vue'
 import WDrawer from './components/WDrawer.vue'
+// import WButtonCircle from './components/WButtonCircle.vue'
 
 
 export default {
@@ -765,6 +778,7 @@ export default {
         demolink,
         WListVertical,
         WDrawer,
+        // WButtonCircle,
     },
     props: {
     },

package/src/components/WConfirm.vue

@@ -1,5 +1,6 @@
 <template>
     <WDialog
+        :minWidth="minWidth"
         :maxWidth="maxWidth"
         :headerShadow="false"
         :show.sync="showTrans"
@@ -124,6 +125,7 @@ import WDialog from './WDialog.vue'
  * @vue-prop {String} [headerBackgroundColor='grey lighten-5'] 輸入上方區塊背景顏色字串，預設'grey lighten-5'
  * @vue-prop {String} [contentBackgroundColor='white'] 輸入內容區塊背景顏色字串，預設'white'
  * @vue-prop {String} [footerBackgroundColor='grey lighten-5'] 輸入下方區塊背景顏色字串，預設'grey lighten-5'
+ * @vue-prop {Number} [minWidth=200] 輸入彈窗最小寬度數值，單位為px，預設200，當裝置寬度小於彈窗最小寬度時則使用裝置寬度
  * @vue-prop {Number} [maxWidth=500] 輸入彈窗最大寬度，單位為px，預設500
  */
 export default {
@@ -221,6 +223,10 @@ export default {
             type: String,
             default: 'grey lighten-5',
         },
+        minWidth: {
+            type: Number,
+            default: 200,
+        },
         maxWidth: {
             type: Number,
             default: 500,

package/src/components/WDrawer.vue

@@ -67,7 +67,7 @@
 
                         <div
                             class="ts"
-                            :style="`width:${useDrawerWidthTrans}px; height:100%; display:flex;`"
+                            :style="`width:${useDrawerWidthTrans}px; height:100%; display:flex; position:relative;`"
                         >
 
                             <div :style="`padding-left:${useDrawerBarSize/2}px;`" v-if="dragDrawerWidth && !isAtLeft"></div>
@@ -87,6 +87,16 @@
 
                             <div :style="`padding-left:${useDrawerBarSize/2}px;`" v-if="dragDrawerWidth && isAtLeft"></div>
 
+                            <!-- 拖曳寬度bar, 須放置於drawer內, 才能避免drawer內有position顯示之dom(例如tooltip)被拖曳寬度bar遮蔽 -->
+                            <!-- 延遲至抽屜出現後才通過opacity=1顯示, 否則於浮動模式時會在外側陰影層馬上看到拖曳寬度bar, 使用者體驗不佳 -->
+                            <div
+                                ref="divBar"
+                                :style="`position:${useOverlayPosition}; z-index:${useDrawerZIndex+2}; top:0px; ${isAtLeft?'left':'right'}:${useDrawerWidthTrans-useDrawerBarWidth/2}px; width:${useDrawerBarWidth}px; height:100%; border-left:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; border-right:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; opacity:${showOverlay5DragDrawerBar?1:0}; cursor:col-resize; user-select:none;`"
+                                v-show="valueTrans && dragDrawerWidth"
+                            >
+                                <div :style="`width:${useDrawerBarSize}px; height:100%; background:${useDrawerBarColor};`"></div>
+                            </div>
+
                         </div>
 
                     </div>
@@ -95,16 +105,6 @@
 
             </div>
 
-            <!-- 拖曳寬度bar, z-index需大於drawer區, 否則多層drawer開啟拖曳寬度bar時會被遮蔽 -->
-            <!-- 延遲至抽屜出現後才通過opacity=1顯示, 否則於浮動模式時會在外側陰影層馬上看到拖曳寬度bar, 使用者體驗不佳 -->
-            <div
-                ref="divBar"
-                :style="`position:${useOverlayPosition}; z-index:${useDrawerZIndex+3}; top:0px; ${isAtLeft?'left':'right'}:${useDrawerWidthTrans-useDrawerBarWidth/2}px; width:${useDrawerBarWidth}px; height:100%; border-left:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; border-right:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; opacity:${showOverlay5DragDrawerBar?1:0}; cursor:col-resize; user-select:none;`"
-                v-show="valueTrans && dragDrawerWidth"
-            >
-                <div :style="`width:${useDrawerBarSize}px; height:100%; background:${useDrawerBarColor};`"></div>
-            </div>
-
         </div>
 
     </div>
@@ -130,7 +130,7 @@ import color2hex from '../js/vuetifyColor.mjs'
  * @vue-prop {Number} [drawerWidthMin=null] 輸入使用拖曳抽屜寬度分隔條(dragDrawerWidth=true)時，拖曳抽屜寬度分隔條最小值數字，預設null
  * @vue-prop {Number} [drawerWidthMax=null] 輸入使用拖曳抽屜寬度分隔條(dragDrawerWidth=true)時，拖曳抽屜寬度分隔條最大值數字，預設null
  * @vue-prop {Boolean} [afloat=false] 輸入是否為浮動顯示布林值，設為true時浮在內容區上故不壓縮內容區寬度，預設false
- * @vue-prop {Boolean} [afloatByFix=false] 輸入浮動顯示時是否使用fixed使能具有滿版配置布林值，預設false
+ * @vue-prop {Boolean} [afloatByFix=false] 輸入浮動顯示時是否使用fixed布林值，若為true使用'fixed'反之使用'absolute'，預設false
  * @vue-prop {Number} [overlayOpacity=0.45] 輸入浮動顯示時抽屜外側陰影層之透明度數字，預設0.45
  * @vue-prop {String} [overlayColor='grey darken-2'] 輸入浮動顯示時抽屜外側陰影層背景顏色字串，預設'grey darken-2'
  * @vue-prop {Number} [drawerZIndex=1000] 輸入浮動顯示時抽屜使用z-index數字，預設1000

package/src/components/WTooltip.vue

@@ -17,28 +17,24 @@
 
         </div>
 
-        <!-- 需外層使用position包覆隔離, 因popper會對外層產生影響(添加class) -->
-        <!--   -->
-        <div :style="`position:fixed; left:0; top:0; z-index:${cmpZIndex};`">
-            <!-- style不給予position因會被popper洗掉改用translate定位 -->
-            <!-- 若使用minWidth, 會使popupjs重算給予minWidth用以自動撐開彈窗寬度失效, 若於其內slot外添加div給予minWidth, 亦會使popupjs給予minWidth機制失效, 待研究 -->
+        <!-- 不能給予position因會被popupjs洗掉, 但可給z-index, 且popupjs會改用transform:translate定位 -->
+        <!-- 若使用minWidth, 會使popupjs重算給予minWidth用以自動撐開彈窗寬度失效, 若於其內slot外添加div給予minWidth, 亦會使popupjs給予minWidth機制失效, 待研究 -->
+        <div
+            ref="divContent"
+            class="WPopup-Content"
+            :style="`z-index:${cmpZIndex};`"
+            v-show="valueTrans"
+            v-domresize
+            @domresize="updatePopper"
+        >
             <div
-                ref="divContent"
-                class="WPopup-Content"
-                :style="`z-index:${cmpZIndex+1};`"
-                v-show="valueTrans"
-                v-domresize
-                @domresize="updatePopper"
+                :style="`${contentStyle} ${usePadding} ${useTextFontSize} color:${useTextColor}; background:${useBackgroundColor}; ${useMinWidth} ${useMaxWidth} ${useBorderRadius} ${useShadow}`"
+                v-if="valueTrans"
             >
-                <div
-                    :style="`${contentStyle} ${usePadding} ${useTextFontSize} color:${useTextColor}; background:${useBackgroundColor}; ${useMinWidth} ${useMaxWidth} ${useBorderRadius} ${useShadow}`"
-                    v-if="valueTrans"
-                >
-                    <slot
-                        name="content"
-                        :funHide="()=>{updateValue(false)}"
-                    ></slot>
-                </div>
+                <slot
+                    name="content"
+                    :funHide="()=>{updateValue(false)}"
+                ></slot>
             </div>
         </div>
 
@@ -638,7 +634,7 @@ export default {
 
             //@popperjs/core 2.x
             let opt = {
-                strategy: 'fixed', //需使用fixed, 否則popup彈窗會盡量基於trigger寬度而盡量窄化
+                strategy: 'absolute', //盡量使用absolute而不用fixesd, 避免跟其他組件處於不同stacking context, 統一用absolute避免後續衍生問題
                 placement: vo.placement,
                 modifiers: [
                     // preventOverflow,