w-component-vue 2.1.71 → 2.1.74

package/docs/module-WTreeIconToggle.html

@@ -27,7 +27,7 @@
 
 <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-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-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-WListVertical.html">WListVertical</a></li><li><a href="module-WListVerticalItem.html">WListVerticalItem</a></li><li><a href="module-WPanelBulge.html">WPanelBulge</a></li><li><a href="module-WPanelChart.html">WPanelChart</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>
+    <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-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-WListVertical.html">WListVertical</a></li><li><a href="module-WListVerticalItem.html">WListVerticalItem</a></li><li><a href="module-WPanelBulge.html">WPanelBulge</a></li><li><a href="module-WPanelChart.html">WPanelChart</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">
@@ -218,7 +218,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Fri Feb 18 2022 22:57:45 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 3.6.7</a> on Fri Feb 25 2022 16:05:26 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/vuetifyColor.mjs.html

@@ -27,7 +27,7 @@
 
 <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-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-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-WListVertical.html">WListVertical</a></li><li><a href="module-WListVerticalItem.html">WListVerticalItem</a></li><li><a href="module-WPanelBulge.html">WPanelBulge</a></li><li><a href="module-WPanelChart.html">WPanelChart</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>
+    <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-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-WListVertical.html">WListVertical</a></li><li><a href="module-WListVerticalItem.html">WListVerticalItem</a></li><li><a href="module-WPanelBulge.html">WPanelBulge</a></li><li><a href="module-WPanelChart.html">WPanelChart</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">
@@ -144,7 +144,7 @@ export default color2hex
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Fri Feb 18 2022 22:57:45 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 3.6.7</a> on Fri Feb 25 2022 16:05:26 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.1.71",
+  "version": "2.1.74",
   "author": "yuda-lyu(semisphere)",
   "scripts": {
     "serve": "vue-cli-service serve",

package/public/index.html

@@ -12,7 +12,7 @@
         <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" rel="stylesheet">
 
         <!-- mdi font -->
-        <link _href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css" rel="stylesheet">
+        <link _href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css" rel="stylesheet">
 
         <!-- google font -->
         <link _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">

package/src/App.vue

@@ -183,6 +183,11 @@
             ></AppZoneWPopupEditText>
 
 
+            <AppZoneWDrawer
+                v-if="useCmpName==='WDrawer'"
+            ></AppZoneWDrawer>
+
+
             <AppZoneWGroupTags
                 v-if="useCmpName==='WGroupTags'"
             ></AppZoneWGroupTags>
@@ -358,6 +363,7 @@ import AppZoneWDialog from './AppZoneWDialog.vue'
 import AppZoneWConfirm from './AppZoneWConfirm.vue'
 import AppZoneWPopup from './AppZoneWPopup.vue'
 import AppZoneWPopupEditText from './AppZoneWPopupEditText.vue'
+import AppZoneWDrawer from './AppZoneWDrawer.vue'
 import AppZoneWButtonChip from './AppZoneWButtonChip.vue'
 import AppZoneWButtonCircle from './AppZoneWButtonCircle.vue'
 import AppZoneWProgressBar from './AppZoneWProgressBar.vue'
@@ -412,6 +418,7 @@ export default {
         AppZoneWConfirm,
         AppZoneWPopup,
         AppZoneWPopupEditText,
+        AppZoneWDrawer,
         AppZoneWButtonChip,
         AppZoneWButtonCircle,
         AppZoneWProgressBar,
@@ -542,6 +549,7 @@ export default {
                         { name: 'WConfirm' },
                         { name: 'WPopup' },
                         { name: 'WPopupEditText' },
+                        { name: 'WDrawer' },
                     ]
                 },
                 {

package/src/AppZoneWDrawer.vue

@@ -0,0 +1,343 @@
+<template>
+    <div>
+
+
+        <div class="head1"><span style="cursor:pointer;" title="open for copy link to view component" onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-drawer</span></div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'default'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow1=!WDrawer.bShow1">Show({{WDrawer.bShow1}})</v-btn>
+                </div>
+
+                <w-drawer
+                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
+                    v-model="WDrawer.bShow1"
+                >
+
+                    <template v-slot:drawer>
+                        <v-list style="padding:0px; background:transparent; height:100%; border-right:1px solid #ddd;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'drawerWidth'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow2=!WDrawer.bShow2">Show({{WDrawer.bShow2}})</v-btn>
+                </div>
+
+                <w-drawer
+                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
+                    v-model="WDrawer.bShow2"
+                    :drawerWidth="300"
+                >
+
+                    <template v-slot:drawer>
+                        <v-list style="padding:0px; background:transparent; height:100%; border-right:1px solid #ddd;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'mode'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow3=!WDrawer.bShow3">Show({{WDrawer.bShow3}})</v-btn>
+                </div>
+
+                <w-drawer
+                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
+                    v-model="WDrawer.bShow3"
+                    :mode="'from-right'"
+                >
+
+                    <template v-slot:drawer>
+                        <v-list style="padding:0px; background:transparent; height:100%; border-left:1px solid #ddd;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'afloat'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow4=!WDrawer.bShow4">Show({{WDrawer.bShow4}})</v-btn>
+                </div>
+
+                <w-drawer
+                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
+                    v-model="WDrawer.bShow4"
+                    :afloat="true"
+                >
+
+                    <template v-slot:drawer>
+                        <v-list style="padding:0px; background:transparent;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'afloat & overlayOpacity'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow5=!WDrawer.bShow5">Show({{WDrawer.bShow5}})</v-btn>
+                </div>
+
+                <w-drawer
+                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
+                    v-model="WDrawer.bShow5"
+                    :afloat="true"
+                    :overlayOpacity="0.1"
+                >
+
+                    <template v-slot:drawer>
+                        <v-list style="padding:0px; background:transparent; height:100%; border-right:1px solid #ddd;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'afloat & mode'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow6=!WDrawer.bShow6">Show({{WDrawer.bShow6}})</v-btn>
+                </div>
+
+                <w-drawer
+                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
+                    v-model="WDrawer.bShow6"
+                    :afloat="true"
+                    :mode="'from-right'"
+                >
+
+                    <template v-slot:drawer>
+                        <v-list style="padding:0px; background:transparent;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'afloat & afloatByFix'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow7=!WDrawer.bShow7">Show({{WDrawer.bShow7}})</v-btn>
+                </div>
+
+                <w-drawer
+                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
+                    v-model="WDrawer.bShow7"
+                    :afloat="true"
+                    :afloatByFix="true"
+                >
+
+                    <template v-slot:drawer>
+                        <v-list style="padding:0px; background:transparent;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-drawer'"
+                    :casename="'afloat & afloatByFix & mode'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <v-btn depressed small elevation="2" @click="WDrawer.bShow8=!WDrawer.bShow8">Show({{WDrawer.bShow8}})</v-btn>
+                </div>
+
+                <w-drawer
+                    style="width:500px; height:400px; border:1px solid #ddd; _box-sizing:content-box;"
+                    v-model="WDrawer.bShow8"
+                    :afloat="true"
+                    :afloatByFix="true"
+                    :mode="'from-right'"
+                >
+
+                    <template v-slot:drawer>
+                        <v-list style="padding:0px; background:transparent;"><v-list-item style="min-height:inherit; padding:10px;" :key="kitem" @click="function(){}" v-for="(item,kitem) in WDrawer.listItems"><div style="display:flex; align-items:center;"><div style="padding-right:10px; width:35px; text-align:center;"><v-icon>{{item.icon}}</v-icon></div><div>{{item.text}}</div></div></v-list-item></v-list>
+                    </template>
+
+                    <template v-slot:content>
+                        <div style="height:100%; overflow-y:auto;">
+                            <div style="padding:10px; font-size:1.2rem;">{{WDrawer.title}}</div>
+                            <div style="padding:0px 10px 10px 10px; font-size:0.9rem;">{{WDrawer.content}}</div>
+                        </div>
+                    </template>
+
+                </w-drawer>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WDrawer from './components/WDrawer.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WDrawer,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            'WDrawer': {
+                'title': 'Article Title',
+                'content': 'Here is a article content, texts are from Vuetify. There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application\'s compiled size. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.',
+                'listItems': [
+                    {
+                        text: 'Interpreting',
+                        icon: 'fas fa-american-sign-language-interpreting',
+                    },
+                    {
+                        text: 'Search',
+                        icon: 'fas fa-search',
+                    },
+                    {
+                        text: 'Binoculars',
+                        icon: 'fas fa-binoculars',
+                    },
+                    {
+                        text: 'Building',
+                        icon: 'fa-regular fa-building',
+                    },
+                    {
+                        text: 'Tachometer-alt',
+                        icon: 'fas fa-tachometer-alt',
+                    },
+                    {
+                        text: 'Chess-king',
+                        icon: 'fas fa-chess-king',
+                    },
+
+                ],
+                'bShow1': false,
+                'bShow2': false,
+                'bShow3': false,
+                'bShow4': false,
+                'bShow5': false,
+                'bShow6': false,
+                'bShow7': false,
+                'bShow8': false,
+            },
+            'actions': [
+                {
+
+                }
+            ],
+        }
+    },
+    methods: {
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/AppZoneWListVertical.vue

@@ -330,7 +330,6 @@
 import { mdiStackOverflow, mdiBookMusicOutline, mdiCharity, mdiLightbulbGroupOutline, mdiMessageCogOutline, mdiGestureDoubleTap, mdiPencilOutline, mdiLightbulbOnOutline } from '@mdi/js/mdi.js'
 import demolink from './components/demolink.vue'
 import WButtonCircle from './components/WButtonCircle.vue'
-import WIcon from './components/WIcon.vue'
 import WListVertical from './components/WListVertical.vue'
 
 
@@ -338,7 +337,6 @@ export default {
     components: {
         demolink,
         WButtonCircle,
-        WIcon,
         WListVertical,
     },
     props: {

package/src/components/WComponentVue.vue

@@ -8,6 +8,7 @@ import WCheckbox from './WCheckbox.vue'
 import WCkeditorVueDyn from './WCkeditorVueDyn.vue'
 import WConfirm from './WConfirm.vue'
 import WDialog from './WDialog.vue'
+import WDrawer from './WDrawer.vue'
 import WDropfiles from './WDropfiles.vue'
 import WDynamicList from './WDynamicList.vue'
 import WEchartsVueDyn from './WEchartsVueDyn.vue'
@@ -77,6 +78,7 @@ let WComponentVue = {
         Vue.component('w-ckeditor-vue-dyn', WCkeditorVueDyn)
         Vue.component('w-confirm', WConfirm)
         Vue.component('w-dialog', WDialog)
+        Vue.component('w-drawer', WDrawer)
         Vue.component('w-dropfiles', WDropfiles)
         Vue.component('w-dynamic-list', WDynamicList)
         Vue.component('w-echarts-vue-dyn', WEchartsVueDyn)