npm - w-component-vue - Versions diffs - 2.2.35 → 2.2.36 - Mend

w-component-vue 2.2.35 → 2.2.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (955) hide show

package/docs/components_WExplorer.vue.html DELETED Viewed

@@ -1,1120 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <title>components/WExplorer.vue - Documentation</title>
-    <script src="scripts/prettify/prettify.js"></script>
-    <script src="scripts/prettify/lang-css.js"></script>
-    <!--[if lt IE 9]>
-      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
-    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
-    <script src="scripts/nav.js" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-</head>
-<body>
-<input type="checkbox" id="nav-trigger" class="nav-trigger" />
-<label for="nav-trigger" class="navicon-button x">
-  <div class="navicon"></div>
-</label>
-<label for="nav-trigger" class="overlay"></label>
-<nav >
-    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-WAggridVueDyn.html">WAggridVueDyn</a></li><li><a href="module-WBadge.html">WBadge</a></li><li><a href="module-WButtonChip.html">WButtonChip</a></li><li><a href="module-WButtonCircle.html">WButtonCircle</a></li><li><a href="module-WCheckbox.html">WCheckbox</a></li><li><a href="module-WCkeditorVueDyn.html">WCkeditorVueDyn</a></li><li><a href="module-WConfirm.html">WConfirm</a></li><li><a href="module-WDialog.html">WDialog</a></li><li><a href="module-WDrawer.html">WDrawer</a></li><li><a href="module-WDropfiles.html">WDropfiles</a></li><li><a href="module-WDynamicList.html">WDynamicList</a></li><li><a href="module-WEchartsVueDyn.html">WEchartsVueDyn</a></li><li><a href="module-WExplorer.html">WExplorer</a></li><li><a href="module-WGroupCheck.html">WGroupCheck</a></li><li><a href="module-WGroupDragdrop.html">WGroupDragdrop</a></li><li><a href="module-WGroupRadio.html">WGroupRadio</a></li><li><a href="module-WGroupTags.html">WGroupTags</a></li><li><a href="module-WHighchartsBitmapDyn.html">WHighchartsBitmapDyn</a></li><li><a href="module-WHighchartsVueDyn.html">WHighchartsVueDyn</a></li><li><a href="module-WHighstockVueDyn.html">WHighstockVueDyn</a></li><li><a href="module-WIcon.html">WIcon</a></li><li><a href="module-WIconLoading.html">WIconLoading</a></li><li><a href="module-WIconSvg.html">WIconSvg</a></li><li><a href="module-WImageCascadingDyn.html">WImageCascadingDyn</a></li><li><a href="module-WImageViewerDyn.html">WImageViewerDyn</a></li><li><a href="module-WJsonView.html">WJsonView</a></li><li><a href="module-WLeafletVueDyn.html">WLeafletVueDyn</a></li><li><a href="module-WListExpand.html">WListExpand</a></li><li><a href="module-WListExpandItem.html">WListExpandItem</a></li><li><a href="module-WListHorizontal.html">WListHorizontal</a></li><li><a href="module-WListItem.html">WListItem</a></li><li><a href="module-WListVertical.html">WListVertical</a></li><li><a href="module-WPanelAvatar.html">WPanelAvatar</a></li><li><a href="module-WPanelBulge.html">WPanelBulge</a></li><li><a href="module-WPanelDivideHorizontal.html">WPanelDivideHorizontal</a></li><li><a href="module-WPanelDivideVertical.html">WPanelDivideVertical</a></li><li><a href="module-WPanelScrolly.html">WPanelScrolly</a></li><li><a href="module-WPanelScrollyCore.html">WPanelScrollyCore</a></li><li><a href="module-WPanelStripe.html">WPanelStripe</a></li><li><a href="module-WPopup.html">WPopup</a></li><li><a href="module-WPopupEditText.html">WPopupEditText</a></li><li><a href="module-WProgressBar.html">WProgressBar</a></li><li><a href="module-WProgressCircle.html">WProgressCircle</a></li><li><a href="module-WQuillVueDyn.html">WQuillVueDyn</a></li><li><a href="module-WShellBottomLine.html">WShellBottomLine</a></li><li><a href="module-WShellEllipse.html">WShellEllipse</a></li><li><a href="module-WShellMaterial.html">WShellMaterial</a></li><li><a href="module-WSwitch.html">WSwitch</a></li><li><a href="module-WTableDyn.html">WTableDyn</a></li><li><a href="module-WText.html">WText</a></li><li><a href="module-WTextarea.html">WTextarea</a></li><li><a href="module-WTextCore.html">WTextCore</a></li><li><a href="module-WTextInt.html">WTextInt</a></li><li><a href="module-WTextIntCore.html">WTextIntCore</a></li><li><a href="module-WTextSelect.html">WTextSelect</a></li><li><a href="module-WTextSuggest.html">WTextSuggest</a></li><li><a href="module-WTextSuggestCore.html">WTextSuggestCore</a></li><li><a href="module-WTimeday.html">WTimeday</a></li><li><a href="module-WTimedayCore.html">WTimedayCore</a></li><li><a href="module-WTimedayRange.html">WTimedayRange</a></li><li><a href="module-WTimedayRangeCore.html">WTimedayRangeCore</a></li><li><a href="module-WTimeminute.html">WTimeminute</a></li><li><a href="module-WTimeminuteCore.html">WTimeminuteCore</a></li><li><a href="module-WTimeminuteRange.html">WTimeminuteRange</a></li><li><a href="module-WTimeminuteRangeCore.html">WTimeminuteRangeCore</a></li><li><a href="module-WTinymceVueDyn.html">WTinymceVueDyn</a></li><li><a href="module-WTree.html">WTree</a></li><li><a href="module-WTreeIconCheckbox.html">WTreeIconCheckbox</a></li><li><a href="module-WTreeIconToggle.html">WTreeIconToggle</a></li></ul><h3>Global</h3><ul><li><a href="global.html#binarySearch">binarySearch</a></li><li><a href="global.html#color2hex">color2hex</a></li><li><a href="global.html#getHCDataGrouping">getHCDataGrouping</a></li><li><a href="global.html#getHCDateFmt">getHCDateFmt</a></li><li><a href="global.html#getHCGlobal">getHCGlobal</a></li><li><a href="global.html#getHCMarker">getHCMarker</a></li><li><a href="global.html#getHCUnits">getHCUnits</a></li><li><a href="global.html#iniHCMarkers">iniHCMarkers</a></li></ul>
-</nav>
-<div id="main">
-    <h1 class="page-title">components/WExplorer.vue</h1>
-    <section>
-        <article>
-            <pre class="prettyprint source linenums"><code>&lt;template>
-    &lt;div
-        style=""
-        :changeShowTree="changeShowTree"
-        :changeItems="changeItems"
-        v-domresize
-        @domresize="resizePanel"
-    >
-        &lt;WDrawer
-            :style="`width:${panelWidth}px; height:${panelHeight}px;`"
-            :afloat="treeAfloat"
-            :drawerWidth.sync="treeWidth"
-            :drawerWidthMin="treeWidthMin"
-            :drawerWidthMax="treeWidthMax"
-            :dragDrawerWidth="true"
-            :drawerBarColor="treeDrawerBarColor"
-            :drawerBarSize="treeDrawerBarSize"
-            :value="showTreeTrans"
-            @input="emitShowTree"
-        >
-            &lt;template v-slot:drawer="props">
-                &lt;!-- tree高度是使用viewHeightMax為動態高度, 故外部封裝一層給予背景色 -->
-                &lt;div :style="`height:100%; background:${effTreeBackgroundColor};`">
-                    &lt;WTree
-                        ref="wt"
-                        :style="`width:${props.width}px; min-width:${props.width}px;`"
-                        :viewHeightMax="panelHeight"
-                        :defItemHeight="treeDefItemHeight"
-                        :defaultDisplayLevel="treeDefaultDisplayLevel"
-                        :data="treeItemsFolder"
-                        :activable="true"
-                        :itemActive.sync="folderItemActive"
-                        :paddingStyle="treePaddingStyle"
-                        :indent="treeIndent"
-                        :iconSize="toggleTreeIconSize"
-                        :iconToggleColor="toggleTreeIconColor"
-                        :iconToggleBackgroundColor="toggleTreeIconBackgroundColor"
-                        :iconToggleBackgroundColorHover="toggleTreeIconBackgroundColorHover"
-                        :itemTextColor="treeItemTextColor"
-                        :itemTextColorHover="treeItemTextColorHover"
-                        :itemTextColorActive="treeItemTextColorActive"
-                        :itemBackgroundColor="treeItemBackgroundColor"
-                        :itemBackgroundColorHover="treeItemBackgroundColorHover"
-                        :itemBackgroundColorActive="treeItemBackgroundColorActive"
-                        :itemRippleColor="treeItemRippleColor"
-                        _render="render"
-                    >
-                        &lt;template v-slot:item="props">
-                            &lt;div
-                                :style="`display:flex; min-height:${treeDefItemHeight}px;`"
-                                @click="ckTreeFolder(props)"
-                            >
-                                &lt;div :style="`height:${treeDefItemHeight}px; padding-right:4px; display:flex; align-items:center;`">
-                                    &lt;WIcon
-                                        :icon="treeFolderIcon"
-                                        :color="getTreeFolderIconColor(props)"
-                                        :size="treeFolderIconSize"
-                                    >&lt;/WIcon>
-                                &lt;/div>
-                                &lt;!-- 文字一般、hover與active顏色可由tree組件由item殼設定提供, 故slot內可不用自行封裝取得文字顏色功能 -->
-                                &lt;div :style="`min-height:${treeDefItemHeight}px; line-height:${treeDefItemHeight}px; ${useTreeItemTextFontSize}`">
-                                    {{props.data.text}}
-                                &lt;/div>
-                            &lt;/div>
-                        &lt;/template>
-                    &lt;/WTree>
-                &lt;/div>
-            &lt;/template>
-            &lt;template v-slot:content="props">
-                &lt;!-- 較多組件時初始化偵測高度會較慢, 連帶造成高度超過容器, 故使用overflow:hidden避免顯示捲軸 -->
-                &lt;div :style="`height:100%; overflow:hidden;`">
-                    &lt;div
-                        :style="`width:${props.width}px; min-width:${props.width}px; border-bottom:${lineBetweenPathAndListWidth}px solid ${effLineBetweenPathAndListColor}; background:${effPathBackgroundColor};`"
-                        v-domresize
-                        @domresize="resizePath"
-                    >
-                        &lt;div :style="`display:flex; align-items:flex-start;`">
-                            &lt;div :style="`min-height:${btnDisplayTreeIconSize+8}px; padding:0px 2px 0px 5px; display:flex; align-items:center;`">
-                                &lt;!-- 切換顯隱tree按鈕 -->
-                                &lt;WButtonCircle
-                                    :paddingStyle="{h:2,v:2}"
-                                    :icon="showTreeTrans?btnDisplayTreeIconHide:btnDisplayTreeIconShow"
-                                    :iconSize="btnDisplayTreeIconSize"
-                                    :iconColor="btnDisplayTreeIconColor"
-                                    :iconColorHover="btnDisplayTreeIconColorHover"
-                                    :iconColorFocus="btnDisplayTreeIconColorFocus"
-                                    :backgroundColor="btnDisplayTreeBackgroundColor"
-                                    :backgroundColorHover="btnDisplayTreeBackgroundColorHover"
-                                    :backgroundColorFocus="btnDisplayTreeBackgroundColorFocus"
-                                    :shadow="false"
-                                    @click="emitShowTree(!showTreeTrans)"
-                                >&lt;/WButtonCircle>
-                            &lt;/div>
-                            &lt;div
-                                :style="`min-height:${btnDisplayTreeIconSize+8}px; padding-left:4px; color:${effPathBtnTextColor}; ${usePathBtnTextFontSize} display:flex; align-items:center;`"
-                                v-if="parentInfors.length===0"
-                            >
-                                {{noSelectedText}}
-                            &lt;/div>
-                            &lt;div :style="`display:flex; flex-wrap:wrap;`">
-                                &lt;div
-                                    :style="`min-height:${btnDisplayTreeIconSize+8}px;`"
-                                    :key="'kpi-'+kpi"
-                                    v-for="(pi,kpi) in parentInfors"
-                                >
-                                    &lt;!-- 因path區域預設有底線故-1px -->
-                                    &lt;div :style="`min-height:${btnDisplayTreeIconSize+8}px; display:flex; align-items:center;`">
-                                        &lt;WIcon
-                                            :icon="pathSepIcon"
-                                            :color="pathSepIconColor"
-                                            :size="pathSepIconSize"
-                                        >&lt;/WIcon>
-                                        &lt;!-- 因會重刷path故textColorActive與backgroundColorActive會被清除, 也就不須提供外部設定 -->
-                                        &lt;WButtonChip
-                                            :paddingStyle="{h:6,v:0}"
-                                            :borderWidth="{}"
-                                            :borderRadius="4"
-                                            :shadow="false"
-                                            :text="pi.name"
-                                            :textColor="pathBtnTextColor"
-                                            :textColorHover="pathBtnTextColorHover"
-                                            _textColorActive="pathBtnTextColorActive"
-                                            :textFontSize="pathBtnTextFontSize"
-                                            _icon="pathSepIcon"
-                                            _iconColor="pathSepIconColor"
-                                            _iconSize="pathSepIconSize"
-                                            :backgroundColor="pathBtnBackgroundColor"
-                                            :backgroundColorHover="pathBtnBackgroundColorHover"
-                                            _backgroundColorActive="pathBtnBackgroundColorActive"
-                                            @click="ckPathFolder(pi)"
-                                        >
-                                        &lt;/WButtonChip>
-                                    &lt;/div>
-                                &lt;/div>
-                            &lt;/div>
-                        &lt;/div>
-                    &lt;/div>
-                    &lt;div
-                        :style="`height:${listHeight}px; background:${effListBackgroundColor};`"
-                    >
-                        &lt;WListVertical
-                            :style="`width:${props.width}px; min-width:${props.width}px; height:${listHeight}px;`"
-                            :items="folderItems"
-                            :itemActive.sync="fileItemActive"
-                            :itemClickable="true"
-                            :itemCursorPointer="false"
-                            :paddingStyle="listPaddingStyle"
-                            :itemBackgroundColor="listItemBackgroundColor"
-                            :itemBackgroundColorHover="listItemBackgroundColorHover"
-                            :itemBackgroundColorActive="listItemBackgroundColorActive"
-                            :itemTextColor="listItemTextColor"
-                            :itemTextColorHover="listItemTextColorHover"
-                            :itemTextColorActive="listItemTextColorActive"
-                            :itemIconSize="listItemIconSize"
-                            _itemIconColor="listItemIconColor"
-                            _itemIconColorHover="listItemIconColorHover"
-                            _itemIconColorActive="listItemIconColorActive"
-                            :itemRippleColor="listItemRippleColor"
-                            _click="ckListItem"
-                            v-if="folderItems.length>0"
-                        >
-                            &lt;template v-slot:header>
-                                &lt;slot
-                                    name="list-head"
-                                >
-                                &lt;/slot>
-                            &lt;/template>
-                            &lt;template v-slot:item="props">
-                                &lt;div :style="`position:relative; min-height:${listDefItemHeight}px; line-height:${listDefItemHeight}px;`">
-                                    &lt;!-- 由slot外側提供預設字型設定, 而字型顏色設定由更外側WListVertical組件提供 -->
-                                    &lt;div :style="`${useListItemTextFontSize}`">
-                                        &lt;slot
-                                            name="list-item"
-                                            :item="{
-                                                ...props.item,
-                                                iconColor:getListItemIconColor(props),
-                                                iconSize:listItemIconSize,
-                                            }"
-                                            :funClickListItem="()=>{ckListItem(props)}"
-                                        >
-                                            &lt;div :style="`display:flex;`">
-                                                &lt;div
-                                                    :style="`height:${listDefItemHeight}px; padding-right:4px; display:flex; align-items:center; cursor:pointer;`"
-                                                    @click="ckListItem(props)"
-                                                >
-                                                    &lt;WIcon
-                                                        :icon="props.item.icon"
-                                                        :color="getListItemIconColor(props)"
-                                                        :size="listItemIconSize"
-                                                    >&lt;/WIcon>
-                                                &lt;/div>
-                                                &lt;div
-                                                    :style="`${useListItemTextFontSize} cursor:pointer; user-select:none;`"
-                                                    @click="ckListItem(props)"
-                                                >
-                                                    {{props.item.text}}
-                                                &lt;/div>
-                                            &lt;/div>
-                                        &lt;/slot>
-                                    &lt;/div>
-                                    &lt;div :style="`position:absolute; top:0px; right:0px; _width:100%; height:100%;`">
-                                        &lt;slot
-                                            name="list-item-cover"
-                                            :item="props.item"
-                                        >
-                                        &lt;/slot>
-                                    &lt;/div>
-                                    &lt;slot
-                                        name="list-item-pkg"
-                                        :item="props.item"
-                                    >
-                                    &lt;/slot>
-                                &lt;/div>
-                            &lt;/template>
-                            &lt;template v-slot:footer>
-                                &lt;slot
-                                    name="list-foot"
-                                >
-                                &lt;/slot>
-                            &lt;/template>
-                        &lt;/WListVertical>
-                    &lt;/div>
-                &lt;/div>
-            &lt;/template>
-        &lt;/WDrawer>
-    &lt;/div>
-&lt;/template>
-&lt;script>
-import { mdiFolder, mdiFileOutline, mdiChevronRight, mdiArrowLeftBoldHexagonOutline, mdiArrowRightBoldHexagonOutline } from '@mdi/js'
-import get from 'lodash/get'
-import map from 'lodash/map'
-import isbol from 'wsemi/src/isbol.mjs'
-import replace from 'wsemi/src/replace.mjs'
-import filepathToTree from 'wsemi/src/filepathToTree.mjs'
-import color2hex from '../js/vuetifyColor.mjs'
-import domResize from '../js/domResize.mjs'
-import WIcon from './WIcon.vue'
-import WTree from './WTree.vue'
-import WListVertical from './WListVertical.vue'
-import WDrawer from './WDrawer.vue'
-import WButtonChip from './WButtonChip.vue'
-import WButtonCircle from './WButtonCircle.vue'
-/**
- *
- *
- */
-export default {
-    directives: {
-        domresize: domResize(),
-    },
-    components: {
-        WIcon,
-        WTree,
-        WListVertical,
-        WDrawer,
-        WButtonChip,
-        WButtonCircle,
-    },
-    props: {
-        //  * @vue-prop {Array} [items=[]] 輸入項目物件陣列，預設[]
-        //  * @vue-prop {Number} [treeWidthMin=null] 輸入使用拖曳抽屜寬度分隔條(dragDrawerWidth=true)時，拖曳抽屜寬度分隔條最小值數字，預設null
-        //  * @vue-prop {Number} [treeWidthMax=null] 輸入使用拖曳抽屜寬度分隔條(dragDrawerWidth=true)時，拖曳抽屜寬度分隔條最大值數字，預設null
-        items: {
-            type: Array,
-            default: () => [],
-        },
-        treeWidthMin: {
-            type: Number,
-            default: null,
-        },
-        treeWidthMax: {
-            type: Number,
-            default: null,
-        },
-        //  * @vue-prop {Boolean} [showTree=false] 輸入是否顯示樹狀資料夾布林值，預設false
-        //  * @vue-prop {Boolean} [treeAfloat=false] 輸入是否樹狀資料夾為浮動顯示布林值，設為true時浮在內容區上故不壓縮內容區寬度，預設false
-        //  * @vue-prop {Number} [treeDefItemHeight=30] 輸入樹狀資料夾之按需顯示時各項目預設最小高度(min-height)值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設30
-        //  * @vue-prop {Number} [treeDefaultDisplayLevel=null] 輸入樹狀資料夾之初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null
-        //  * @vue-prop {Object} [treePaddingStyle={v:0,h:0}] 輸入樹狀資料夾之內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:0}
-        //  * @vue-prop {Number} [treeIndent=0.7] 輸入樹狀資料夾之縮排比率數字，若使用1就是1倍的圖標寬度(24px)+2*separation(3px)，預設0.7
-        //  * @vue-prop {Number} [toggleTreeIconSize=24] 輸入樹狀資料夾之顯隱icon按鈕高度數字，單位為px，預設24
-        //  * @vue-prop {String} [toggleTreeIconColor='grey'] 輸入樹狀資料夾之顯隱icon按鈕顏色字串，預設'grey'
-        //  * @vue-prop {String} [toggleTreeIconBackgroundColor='transparent'] 輸入樹狀資料夾之顯隱icon按鈕背景顏色字串，預設'transparent'
-        //  * @vue-prop {String} [toggleTreeIconBackgroundColorHover='rgba(128,128,128,0.15)'] 輸入滑鼠移入時樹狀資料夾之顯隱icon按鈕背景顏色字串，預設'rgba(128,128,128,0.15)'
-        //  * @vue-prop {String} [treeItemTextColor='#444'] 輸入樹狀資料夾之文字顏色字串，預設'#444'
-        //  * @vue-prop {String} [treeItemTextColorHover='#222'] 輸入滑鼠移入時樹狀資料夾之文字顏色字串，預設'#222'
-        //  * @vue-prop {String} [treeItemTextColorActive='#000'] 輸入主動模式時樹狀資料夾之文字顏色字串，預設'#000'
-        //  * @vue-prop {String} [treeFolderIcon=mdiFolder] 輸入樹狀資料夾之資料夾圖標字串，預設mdiFolder
-        //  * @vue-prop {Number} [treeFolderIconSize=20] 輸入樹狀資料夾之資料夾圖標之尺寸數字，單位px，預設20
-        //  * @vue-prop {String} [treeFolderIconColor='#888'] 輸入樹狀資料夾之資料夾圖標顏色字串，預設'#888'
-        //  * @vue-prop {String} [treeFolderIconColorHover='#777'] 輸入滑鼠移入時樹狀資料夾之資料夾圖標顏色字串，預設'#777'
-        //  * @vue-prop {String} [treeFolderIconColorActive='#666'] 輸入主動模式時樹狀資料夾之資料夾圖標顏色字串，預設'#666'
-        //  * @vue-prop {String} [treeItemBackgroundColor='transparent'] 輸入樹狀資料夾之項目區背景顏色字串，預設'transparent'
-        //  * @vue-prop {String} [treeItemBackgroundColorHover='rgba(200,200,200,0.2)'] 輸入滑鼠移入時樹狀資料夾之項目區背景顏色字串，預設'rgba(200,200,200,0.2)'
-        //  * @vue-prop {String} [treeItemBackgroundColorActive='rgba(100,100,100,0.2)'] 輸入主動模式時樹狀資料夾之項目區背景顏色字串，預設'rgba(100,100,100,0.2)'
-        //  * @vue-prop {String} [treeItemRippleColor='rgba(200,200,200,0.4)'] 輸入樹狀資料夾之項目區ripple效果顏色字串，預設'rgba(200,200,200,0.4)'
-        //  * @vue-prop {String} [treeBackgroundColor='#fff'] 輸入樹狀資料夾背景顏色字串，預設'#fff'
-        showTree: {
-            type: Boolean,
-            default: true,
-        },
-        treeAfloat: {
-            type: Boolean,
-            default: false,
-        },
-        treeDefItemHeight: {
-            type: Number,
-            default: 30,
-        },
-        treeDefaultDisplayLevel: {
-            type: Number,
-            default: null,
-        },
-        treePaddingStyle: {
-            type: Object,
-            default: () => {
-                return {
-                    v: 0,
-                    h: 0,
-                }
-            },
-        },
-        treeIndent: {
-            type: Number,
-            default: 0.7,
-        },
-        toggleTreeIconSize: {
-            type: Number,
-            default: 24,
-        },
-        toggleTreeIconColor: {
-            type: String,
-            default: 'grey',
-        },
-        toggleTreeIconBackgroundColor: {
-            type: String,
-            default: 'transparent',
-        },
-        toggleTreeIconBackgroundColorHover: {
-            type: String,
-            default: 'rgba(128,128,128,0.15)',
-        },
-        treeItemTextFontSize: {
-            type: String,
-            default: '0.85rem',
-        },
-        treeItemTextColor: {
-            type: String,
-            default: '#444',
-        },
-        treeItemTextColorHover: {
-            type: String,
-            default: '#222',
-        },
-        treeItemTextColorActive: {
-            type: String,
-            default: '#000',
-        },
-        treeFolderIcon: {
-            type: String,
-            default: mdiFolder,
-        },
-        treeFolderIconSize: {
-            type: Number,
-            default: 20,
-        },
-        treeFolderIconColor: {
-            type: String,
-            default: '#888',
-        },
-        treeFolderIconColorHover: {
-            type: String,
-            default: '#777',
-        },
-        treeFolderIconColorActive: {
-            type: String,
-            default: '#666',
-        },
-        treeItemBackgroundColor: {
-            type: String,
-            default: 'transparent',
-        },
-        treeItemBackgroundColorHover: {
-            type: String,
-            default: 'rgba(200,200,200,0.2)',
-        },
-        treeItemBackgroundColorActive: {
-            type: String,
-            default: 'rgba(100,100,100,0.2)',
-        },
-        treeItemRippleColor: {
-            type: String,
-            default: 'rgba(200,200,200,0.4)',
-        },
-        treeBackgroundColor: {
-            type: String,
-            default: '#fff',
-        },
-        //  * @vue-prop {Number} [treeDrawerBarSize=2] 輸入樹狀資料夾抽屜之分隔條尺寸數字，為分隔條寬度，單位為px，預設2
-        //  * @vue-prop {String} [treeDrawerBarColor='#ddd'] 輸入樹狀資料夾抽屜之分隔條顏色字串，預設'#ddd'
-        treeDrawerBarSize: {
-            type: Number,
-            default: 2,
-        },
-        treeDrawerBarColor: {
-            type: String,
-            default: '#ddd',
-        },
-        //  * @vue-prop {Number} [lineBetweenPathAndListWidth=1] 輸入路徑區與清單區之間分隔線寬度，單位為px，預設1
-        //  * @vue-prop {String} [lineBetweenPathAndListColor='#ddd'] 輸入路徑區與清單區之間分隔線顏色字串，預設'#ddd'
-        lineBetweenPathAndListWidth: {
-            type: Number,
-            default: 1,
-        },
-        lineBetweenPathAndListColor: {
-            type: String,
-            default: '#ddd',
-        },
-        //  * @vue-prop {Number} [listDefItemHeight=30] 輸入清單區按需顯示時各項目預設最小高度(min-height)值，單位為px，預設30
-        //  * @vue-prop {Object} [listPaddingStyle={v:0,h:6}] 輸入清單區項目之內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:6}
-        //  * @vue-prop {String} [listItemBackgroundColor='transparent'] 輸入清單區項目之背景顏色字串，預設'transparent'
-        //  * @vue-prop {String} [listItemBackgroundColorHover='rgba(200,200,200,0.2)'] 輸入滑鼠移入時清單區項目之背景顏色字串，預設'rgba(200,200,200,0.2)'
-        //  * @vue-prop {String} [listItemBackgroundColorActive='rgba(100,100,100,0.2)'] 輸入主動模式時清單區項目之背景顏色字串，預設'rgba(100,100,100,0.2)'
-        //  * @vue-prop {String} [listItemTextFontSize='0.85rem'] 輸入清單區項目之文字字型大小字串，預設'0.85rem'
-        //  * @vue-prop {String} [listItemTextColor='#444'] 輸入清單區項目之文字顏色字串，預設'#444'
-        //  * @vue-prop {String} [listItemTextColorHover='#222'] 輸入滑鼠移入時清單區項目之文字顏色字串，預設'#222'
-        //  * @vue-prop {String} [listItemTextColorActive='#000'] 輸入主動模式時清單區項目之文字顏色字串，預設'#000'
-        //  * @vue-prop {String} [listFolderIcon=mdiFolder] 輸入清單區項目之資料夾圖標字串，預設mdiFolder
-        //  * @vue-prop {String} [listFileIcon=mdiFileOutline] 輸入清單區項目之檔案圖標字串，預設mdiFileOutline
-        //  * @vue-prop {Number} [listItemIconSize=22] 輸入清單區項目之圖標尺寸數字，單位px，預設22
-        //  * @vue-prop {String} [listItemIconColor='#888'] 輸入清單區項目之圖標顏色字串，預設'#888'
-        //  * @vue-prop {String} [listItemIconColorHover='#777'] 輸入滑鼠移入時清單區項目之圖標顏色字串，預設'#777'
-        //  * @vue-prop {String} [listItemIconColorActive='#666'] 輸入主動模式時清單區項目之圖標顏色字串，預設'#666'
-        //  * @vue-prop {String} [listItemRippleColor='rgba(255,255,255,0.4)'] 輸入清單區項目之ripple效果顏色字串，預設'rgba(255,255,255,0.4)'
-        //  * @vue-prop {String} [listBackgroundColor='#fff'] 輸入清單區背景顏色字串，預設'#fff'
-        listDefItemHeight: {
-            type: Number,
-            default: 30,
-        },
-        listPaddingStyle: {
-            type: Object,
-            default: () => {
-                return {
-                    v: 0,
-                    h: 6,
-                }
-            },
-        },
-        listItemBackgroundColor: {
-            type: String,
-            default: 'transparent',
-        },
-        listItemBackgroundColorHover: {
-            type: String,
-            default: 'rgba(200,200,200,0.2)',
-        },
-        listItemBackgroundColorActive: {
-            type: String,
-            default: 'rgba(100,100,100,0.2)',
-        },
-        listItemTextFontSize: {
-            type: String,
-            default: '0.85rem',
-        },
-        listItemTextColor: {
-            type: String,
-            default: '#444',
-        },
-        listItemTextColorHover: {
-            type: String,
-            default: '#222',
-        },
-        listItemTextColorActive: {
-            type: String,
-            default: '#000',
-        },
-        listFolderIcon: {
-            type: String,
-            default: mdiFolder,
-        },
-        listFileIcon: {
-            type: String,
-            default: mdiFileOutline,
-        },
-        listItemIconSize: {
-            type: Number,
-            default: 22,
-        },
-        listItemIconColor: {
-            type: String,
-            default: '#888',
-        },
-        listItemIconColorHover: {
-            type: String,
-            default: '#777',
-        },
-        listItemIconColorActive: {
-            type: String,
-            default: '#666',
-        },
-        listItemRippleColor: {
-            type: String,
-            default: 'rgba(255,255,255,0.4)',
-        },
-        listBackgroundColor: {
-            type: String,
-            default: '#fff',
-        },
-        //  * @vue-prop {String} [btnDisplayTreeIconShow=mdiArrowRightBoldHexagonOutline] 輸入顯示tree按鈕圖標字串，預設mdiArrowRightBoldHexagonOutline
-        //  * @vue-prop {String} [btnDisplayTreeIconShow=mdiArrowLeftBoldHexagonOutline] 輸入隱藏tree按鈕圖標字串，預設mdiArrowLeftBoldHexagonOutline
-        //  * @vue-prop {Number} [btnDisplayTreeIconSize=20] 輸入顯隱tree按鈕圖標之尺寸數字，單位px，預設20
-        //  * @vue-prop {String} [btnDisplayTreeIconColor='grey darken-1'] 輸入顯隱tree按鈕圖標顏色字串，預設'grey darken-1'
-        //  * @vue-prop {String} [btnDisplayTreeIconColorHover='grey darken-2'] 輸入滑鼠移入時顯隱tree按鈕圖標顏色字串，預設'grey darken-2'
-        //  * @vue-prop {String} [btnDisplayTreeIconColorFocus='grey darken-3'] 輸入取得焦點時顯隱tree按鈕圖標顏色字串，預設'grey darken-3'
-        //  * @vue-prop {String} [btnDisplayTreeBackgroundColor='transparent'] 輸入顯隱tree按鈕背景顏色字串，預設'transparent'
-        //  * @vue-prop {String} [btnDisplayTreeBackgroundColorHover='rgb(236,236,236)'] 輸入滑鼠移入時顯隱tree按鈕背景顏色字串，預設'rgb(236,236,236)'
-        //  * @vue-prop {String} [btnDisplayTreeBackgroundColorFocus='rgb(230,230,230)'] 輸入主動模式時顯隱tree按鈕背景顏色字串，預設'rgb(230,230,230)'
-        btnDisplayTreeIconShow: {
-            type: String,
-            default: mdiArrowRightBoldHexagonOutline,
-        },
-        btnDisplayTreeIconHide: {
-            type: String,
-            default: mdiArrowLeftBoldHexagonOutline,
-        },
-        btnDisplayTreeIconSize: {
-            type: Number,
-            default: 20,
-        },
-        btnDisplayTreeIconColor: {
-            type: String,
-            default: 'grey darken-1',
-        },
-        btnDisplayTreeIconColorHover: {
-            type: String,
-            default: 'grey darken-2',
-        },
-        btnDisplayTreeIconColorFocus: {
-            type: String,
-            default: 'grey darken-3',
-        },
-        btnDisplayTreeBackgroundColor: {
-            type: String,
-            default: 'transparent',
-        },
-        btnDisplayTreeBackgroundColorHover: {
-            type: String,
-            default: 'rgb(236,236,236)',
-        },
-        btnDisplayTreeBackgroundColorFocus: {
-            type: String,
-            default: 'rgb(230,230,230)',
-        },
-        //  * @vue-prop {String} [pathBtnTextColor='#444'] 輸入路徑區按鈕之文字顏色字串，預設'#444'
-        //  * @vue-prop {String} [pathBtnTextColorHover='#222'] 輸入滑鼠移入時路徑區按鈕之文字顏色字串，預設'#222'
-        //  * @vue-prop {String} [pathBtnTextFontSize='0.85rem'] 輸入路徑區按鈕之文字字型大小字串，預設'0.85rem'
-        //  * @vue-prop {String} [pathBtnBackgroundColor='transparent'] 輸入路徑區按鈕之背景顏色字串，預設'transparent'
-        //  * @vue-prop {String} [pathBtnBackgroundColorHover='rgb(236,236,236)'] 輸入滑鼠移入時路徑區按鈕之背景顏色字串，預設'rgb(236,236,236)'
-        //  * @vue-prop {String} [pathSepIcon=mdiChevronRight] 輸入路徑區分隔符號之圖標字串，預設mdiChevronRight
-        //  * @vue-prop {String} [pathSepIconColor='#888'] 輸入路徑區分隔符號之圖標顏色字串，預設'#888'
-        //  * @vue-prop {Number} [pathSepIconSize=18] 輸入路徑區分隔符號之圖標尺寸數字，單位px，預設18
-        //  * @vue-prop {String} [pathBackgroundColor='transparent'] 輸入路徑區背景顏色字串，預設'#fff'
-        pathBtnTextColor: {
-            type: String,
-            default: '#444',
-        },
-        pathBtnTextColorHover: {
-            type: String,
-            default: '#222',
-        },
-        pathBtnTextFontSize: {
-            type: String,
-            default: '0.85rem',
-        },
-        pathBtnBackgroundColor: {
-            type: String,
-            default: 'transparent',
-        },
-        pathBtnBackgroundColorHover: {
-            type: String,
-            default: 'rgb(236,236,236)',
-        },
-        pathSepIcon: {
-            type: String,
-            default: mdiChevronRight,
-        },
-        pathSepIconColor: {
-            type: String,
-            default: '#888',
-        },
-        pathSepIconSize: {
-            type: Number,
-            default: 18,
-        },
-        pathBackgroundColor: {
-            type: String,
-            default: '#fff',
-        },
-        //  * @vue-prop {String} [noSelectedText='No selected folder'] 輸入尚未選擇資料夾字串，預設'No selected folder'
-        noSelectedText: {
-            type: String,
-            default: 'No selected folder',
-        },
-    },
-    data: function() {
-        return {
-            panelWidth: 0,
-            panelHeight: 0,
-            pathHeight: 0,
-            showTreeTrans: true,
-            treeWidth: 200,
-            folderItemActive: null,
-            folderItems: [],
-            fileItemActive: null,
-            treeItemsFolder: null,
-            treeItems: null,
-            kpPath: null,
-            parentInfors: [],
-        }
-    },
-    computed: {
-        changeShowTree: function() {
-            // console.log('changeShowTree')
-            let vo = this
-            vo.showTreeTrans = vo.showTree
-            return ''
-        },
-        changeItems: function() {
-            // console.log('changeItems')
-            let vo = this
-            let r = filepathToTree(vo.items)
-            vo.treeItemsFolder = r.treeItemsFolder
-            vo.treeItems = r.treeItems
-            vo.kpPath = r.kpPath
-            return ''
-        },
-        effTreeBackgroundColor: function() {
-            let vo = this
-            return color2hex(vo.treeBackgroundColor)
-        },
-        effListBackgroundColor: function() {
-            let vo = this
-            return color2hex(vo.listBackgroundColor)
-        },
-        effPathBackgroundColor: function() {
-            let vo = this
-            return color2hex(vo.pathBackgroundColor)
-        },
-        effLineBetweenPathAndListColor: function() {
-            let vo = this
-            return color2hex(vo.lineBetweenPathAndListColor)
-        },
-        effTreeFolderIconColor: function() {
-            let vo = this
-            return color2hex(vo.treeFolderIconColor)
-        },
-        effTreeFolderIconColorHover: function() {
-            let vo = this
-            return color2hex(vo.treeFolderIconColorHover)
-        },
-        effTreeFolderIconColorActive: function() {
-            let vo = this
-            return color2hex(vo.treeFolderIconColorActive)
-        },
-        useTreeItemTextFontSize: function() {
-            let vo = this
-            let s = vo.treeItemTextFontSize
-            s = replace(s, ';', '')
-            return `font-size:${s};`
-        },
-        useListItemTextFontSize: function() {
-            let vo = this
-            let s = vo.listItemTextFontSize
-            s = replace(s, ';', '')
-            return `font-size:${s};`
-        },
-        effListItemIconColor: function() {
-            let vo = this
-            return color2hex(vo.listItemIconColor)
-        },
-        effListItemIconColorHover: function() {
-            let vo = this
-            return color2hex(vo.listItemIconColorHover)
-        },
-        effListItemIconColorActive: function() {
-            let vo = this
-            return color2hex(vo.listItemIconColorActive)
-        },
-        usePathBtnTextFontSize: function() {
-            let vo = this
-            let s = vo.pathBtnTextFontSize
-            s = replace(s, ';', '')
-            return `font-size:${s};`
-        },
-        listHeight: function() {
-            let vo = this
-            return vo.panelHeight - vo.pathHeight
-        },
-        effPathBtnTextColor: function() {
-            let vo = this
-            return color2hex(vo.pathBtnTextColor)
-        },
-    },
-    methods: {
-        resizePanel: function(msg) {
-            // console.log('methods resizePanel', msg)
-            let vo = this
-            //update
-            vo.panelWidth = msg.snew.offsetWidth
-            vo.panelHeight = msg.snew.offsetHeight
-        },
-        resizePath: function(msg) {
-            // console.log('methods resizePath', msg)
-            let vo = this
-            //update
-            // vo.pathWidth = msg.snew.offsetWidth
-            vo.pathHeight = msg.snew.offsetHeight
-        },
-        emitShowTree: function(b) {
-            // console.log('methods emitShowTree', b)
-            let vo = this
-            //update
-            vo.showTreeTrans = b
-            //emit
-            vo.$emit('update:showTree', b)
-        },
-        getTreeFolderIconColor: function(props) {
-            // console.log('methods getTreeFolderIconColor', props)
-            let vo = this
-            //isHover
-            let isHover = get(props, 'isHover')
-            if (!isbol(isHover)) {
-                isHover = false
-            }
-            // console.log('isHover', isHover)
-            //isActive
-            let isActive = get(props, 'isActive')
-            if (!isbol(isActive)) {
-                isActive = false
-            }
-            // console.log('isActive', isActive)
-            if (isActive) {
-                return vo.effTreeFolderIconColorActive
-            }
-            else if (isHover) {
-                return vo.effTreeFolderIconColorHover
-            }
-            return vo.effTreeFolderIconColor
-        },
-        getListItemIconColor: function(props) {
-            // console.log('methods getListItemIconColor', props)
-            let vo = this
-            //isHover
-            let isHover = get(props, 'isHover')
-            if (!isbol(isHover)) {
-                isHover = false
-            }
-            // console.log('isHover', isHover)
-            //isActive
-            let isActive = get(props, 'isActive')
-            if (!isbol(isActive)) {
-                isActive = false
-            }
-            // console.log('isActive', isActive)
-            if (isActive) {
-                return vo.effListItemIconColorActive
-            }
-            else if (isHover) {
-                return vo.effListItemIconColorHover
-            }
-            return vo.effListItemIconColor
-        },
-        listFolder: function(children) {
-            // console.log('methods listFolder', children)
-            let vo = this
-            //重建物件陣列
-            let rs = map(children, (v) => {
-                let text = ''
-                let icon = ''
-                if (v._type === 'folder') {
-                    text = v.text
-                    icon = vo.listFolderIcon
-                }
-                else {
-                    text = v.text
-                    icon = vo.listFileIcon
-                }
-                return {
-                    text,
-                    icon,
-                    data: v,
-                }
-            })
-            // console.log('rs', rs)
-            //save
-            vo.folderItems = rs
-        },
-        displayFolderById: function(id) {
-            // console.log('methods displayFolderById', id)
-            let vo = this
-            //pt
-            let pt = vo.kpPath[id]
-            // console.log('vo.kpPath', vo.kpPath)
-            // console.log('id', id, 'pt', pt)
-            //self
-            let self = get(vo.treeItems, pt)
-            // console.log('self', self)
-            //chpt
-            let chpt = `${pt}.children`
-            //children
-            let children = get(vo.treeItems, chpt)
-            // console.log('children', children)
-            //listFolder
-            vo.listFolder(children)
-            //parentInfors
-            let parentInfors = get(self, 'parentInfors', [])
-            //save
-            vo.parentInfors = parentInfors
-        },
-        ckTreeFolder: function(props) {
-            // console.log('methods ckTreeFolder', props)
-            let vo = this
-            //item
-            let item = get(props, 'data', null)
-            // console.log('item', item)
-            //id
-            let id = get(props, 'data.id', '')
-            // console.log('id', id)
-            //displayFolderById
-            vo.displayFolderById(id)
-            //emit
-            vo.$emit('click-folder', { from: 'tree', item })
-            vo.$emit('click', { type: 'folder', from: 'tree', item })
-            //clear
-            vo.$nextTick(() => {
-                vo.folderItemActive = null
-                vo.fileItemActive = null
-            })
-        },
-        ckListItem: function(props) {
-            // console.log('methods ckListItem', props)
-            let vo = this
-            //item
-            let item = get(props, 'item.data', null)
-            // console.log('item', item)
-            //id
-            let id = get(props, 'item.data.id', '')
-            // console.log('id', id)
-            //_type
-            let _type = get(props, 'item.data._type', '')
-            //click folder
-            if (_type === 'folder') {
-                //displayFolderById
-                vo.displayFolderById(id)
-                //emit
-                vo.$emit('click-folder', { from: 'list', item })
-                vo.$emit('click', { type: 'folder', from: 'list', item })
-                //clear, 因點擊之滑鼠放開會造成切換list內容後觸發對新項目的點擊, 故得要使用setTimeout給予更長延遲後才清除
-                setTimeout(() => {
-                    vo.folderItemActive = null
-                    vo.fileItemActive = null
-                }, 300)
-            }
-            else {
-                //emit
-                vo.$emit('click-file', { from: 'list', item })
-                vo.$emit('click', { type: 'file', from: 'list', item })
-            }
-        },
-        ckPathFolder: function(item) {
-            // console.log('methods ckPathFolder', item)
-            let vo = this
-            //id
-            let id = get(item, 'id', '')
-            // console.log('id', id)
-            //displayFolderById
-            vo.displayFolderById(id)
-            //emit
-            vo.$emit('click-folder', { from: 'path', item })
-            vo.$emit('click', { type: 'folder', from: 'path', item })
-            //clear
-            vo.$nextTick(() => {
-                vo.folderItemActive = null
-                vo.fileItemActive = null
-            })
-        },
-        toggleTreeFoldersByFun: function(cb) {
-            // console.log('methods toggleTreeFoldersByFun', cb)
-            let vo = this
-            return vo.$refs.wt.toggleItemsByFun(cb)
-        },
-        toggleTreeFoldersAll: function(toUnfolding) {
-            // console.log('methods toggleTreeFoldersAll', toUnfolding)
-            let vo = this
-            return vo.$refs.wt.toggleItemsAll(toUnfolding)
-        },
-    },
-}
-&lt;/script>
-&lt;style scoped>
-&lt;/style>
-</code></pre>
-        </article>
-    </section>
-</div>
-<br class="clear">
-<footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sat Aug 13 2022 23:59:28 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
-</footer>
-<script>prettyPrint();</script>
-<script src="scripts/polyfill.js"></script>
-<script src="scripts/linenumber.js"></script>
-</body>
-</html>