w-component-vue 2.2.9 → 2.2.12

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-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-WListExpand.html">WListExpand</a></li><li><a href="module-WListExpandItem.html">WListExpandItem</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-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-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-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">
@@ -224,7 +224,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Fri Apr 29 2022 13:00:25 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.10</a> on Tue May 03 2022 10:53:53 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-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-WListExpand.html">WListExpand</a></li><li><a href="module-WListExpandItem.html">WListExpandItem</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-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-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-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">
@@ -144,7 +144,7 @@ export default color2hex
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Fri Apr 29 2022 13:00:25 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.10</a> on Tue May 03 2022 10:53:53 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.9",
+  "version": "2.2.12",
   "main": "dist/w-component-vue.umd.js",
   "dependencies": {
     "@mdi/js": "^6.6.96",

package/src/App.vue

@@ -203,6 +203,11 @@
             ></AppZoneWListVertical>
 
 
+            <AppZoneWListHorizontal
+                v-if="useCmpName==='WListHorizontal'"
+            ></AppZoneWListHorizontal>
+
+
             <AppZoneWListExpand
                 v-if="useCmpName==='WListExpand'"
             ></AppZoneWListExpand>
@@ -374,6 +379,7 @@ import AppZoneWAlert from './AppZoneWAlert.vue'
 import AppZoneWGroupTags from './AppZoneWGroupTags.vue'
 import AppZoneWGroupDragdrop from './AppZoneWGroupDragdrop.vue'
 import AppZoneWListVertical from './AppZoneWListVertical.vue'
+import AppZoneWListHorizontal from './AppZoneWListHorizontal.vue'
 import AppZoneWListExpand from './AppZoneWListExpand.vue'
 import AppZoneWGroupCheck from './AppZoneWGroupCheck.vue'
 import AppZoneWGroupRadio from './AppZoneWGroupRadio.vue'
@@ -429,6 +435,7 @@ export default {
         AppZoneWGroupTags,
         AppZoneWGroupDragdrop,
         AppZoneWListVertical,
+        AppZoneWListHorizontal,
         AppZoneWListExpand,
         AppZoneWGroupCheck,
         AppZoneWGroupRadio,
@@ -510,6 +517,7 @@ export default {
                 {
                     name: 'list',
                     cmps: [
+                        { name: 'WListHorizontal' },
                         { name: 'WListVertical' },
                         { name: 'WListExpand' },
                         { name: 'WDynamicList' },

package/src/AppZoneWDialog.vue

@@ -542,12 +542,12 @@
                     :casename="'fullscreen'"
                 ></demolink>
 
-                <v-btn depressed small elevation="2" @click="WDialog.bShow14=!WDialog.bShow14">Show({{WDialog.bShow14}})</v-btn>
+                <v-btn depressed small elevation="2" @click="WDialog.bShow14a=!WDialog.bShow14a">Show({{WDialog.bShow14a}})</v-btn>
 
                 <w-dialog
-                    :show.sync="WDialog.bShow14"
+                    :show.sync="WDialog.bShow14a"
                     :title="WDialog.title"
-                    :maxWidth="0"
+                    :maxWidth="WDialog.bShow14b?1000:0"
                     @resize="resizeEvent"
                     @click-save="clickSave"
                     @click-close="clickClose"
@@ -568,7 +568,9 @@
                                 {{WDialog.text4}}
                             </div>
 
-                            <v-btn depressed small elevation="2" @click="WDialog.bShow14=!WDialog.bShow14">Hide Window</v-btn>
+                            <v-btn style="margin-right:10px;" depressed small elevation="2" @click="WDialog.bShow14a=!WDialog.bShow14a">Hide Window</v-btn>
+
+                            <v-btn style="margin-right:10px;" depressed small elevation="2" @click="WDialog.bShow14b=!WDialog.bShow14b">Toggle to {{WDialog.bShow14b?'Fullscreen':'Normal Size'}}</v-btn>
 
                         </div>
                     </template>
@@ -855,7 +857,8 @@ export default {
                 'bShow11': false,
                 'bShow12': false,
                 'bShow13': false,
-                'bShow14': false,
+                'bShow14a': false,
+                'bShow14b': false,
                 'bShow15': false,
                 'bShow16': false,
                 'bShow17': false,

package/src/AppZoneWListHorizontal.vue

@@ -0,0 +1,468 @@
+<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-list-horizontal</span></div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'default'"
+                ></demolink>
+
+                <w-list-horizontal
+                    :items="WListHorizontal.itemsObj"
+                    :itemActive.sync="WListHorizontal.itemActive"
+                >
+                </w-list-horizontal>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'itemTextFontSize & itemIconSize'"
+                ></demolink>
+
+                <w-list-horizontal
+                    :items="WListHorizontal.itemsObj"
+                    :itemActive.sync="WListHorizontal.itemActive"
+                    :itemTextFontSize="'0.8rem'"
+                    :itemIconSize="20"
+                >
+                </w-list-horizontal>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'space'"
+                ></demolink>
+
+                <w-list-horizontal
+                    :items="WListHorizontal.itemsObj"
+                    :itemActive.sync="WListHorizontal.itemActive"
+                    :space="10"
+                >
+                </w-list-horizontal>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'paddingStyle'"
+                ></demolink>
+
+                <w-list-horizontal
+                    :items="WListHorizontal.itemsObj"
+                    :itemActive.sync="WListHorizontal.itemActive"
+                    :paddingStyle="{v:12,h:20}"
+                >
+                </w-list-horizontal>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'itemBorderRadius'"
+                ></demolink>
+
+                <w-list-horizontal
+                    :items="WListHorizontal.itemsObj"
+                    :itemActive.sync="WListHorizontal.itemActive"
+                    :itemBorderRadius="5"
+                >
+                </w-list-horizontal>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'keyText & keyIcon'"
+                ></demolink>
+
+                <w-list-horizontal
+                    :items="WListHorizontal.itemsObjForKey"
+                    :keyText="'name'"
+                    :keyIcon="'path'"
+                >
+                </w-list-horizontal>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'string items'"
+                ></demolink>
+
+                <w-list-horizontal
+                    :items="WListHorizontal.itemsString"
+                    :itemActive.sync="WListHorizontal.itemsStringActive"
+                >
+                </w-list-horizontal>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'no borderBottom'"
+                ></demolink>
+
+                <w-list-horizontal
+                    :items="WListHorizontal.itemsObj"
+                    :itemActive.sync="WListHorizontal.itemActive"
+                    :borderBottom="false"
+                >
+                </w-list-horizontal>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'borderBottomSize'"
+                ></demolink>
+
+                <w-list-horizontal
+                    :items="WListHorizontal.itemsObj"
+                    :itemActive.sync="WListHorizontal.itemActive"
+                    :borderBottomSize="1"
+                >
+                </w-list-horizontal>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'itemBorderRadius & space'"
+                ></demolink>
+
+                <div style="padding:15px 15px 0px 15px; background:#FFF3E0;">
+                    <w-list-horizontal
+                        :items="WListHorizontal.itemsObj"
+                        :itemActive.sync="WListHorizontal.itemActive"
+                        :itemBorderRadius="10"
+                        :space="10"
+                    >
+                    </w-list-horizontal>
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'itemBackgroundColor & itemBackgroundColorHover & itemBackgroundColorActive'"
+                ></demolink>
+
+                <w-list-horizontal
+                    :items="WListHorizontal.itemsObj"
+                    :itemActive.sync="WListHorizontal.itemActive"
+                    :itemBackgroundColor="'rgba(255, 243, 224, 0.6)'"
+                    :itemBackgroundColorHover="'rgba(255, 243, 224, 1)'"
+                    :itemBackgroundColorActive="'rgba(255, 243, 224, 0.8)'"
+                >
+                </w-list-horizontal>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'itemRippleColor'"
+                ></demolink>
+
+                <w-list-horizontal
+                    :items="WListHorizontal.itemsObj"
+                    :itemActive.sync="WListHorizontal.itemActive"
+                    :itemRippleColor="'rgba(200, 200, 200, 0.3)'"
+                >
+                </w-list-horizontal>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'itemRippleColor & borderBottomColor & itemTextColorActive & itemIconColorActive & itemBackgroundColorActive'"
+                ></demolink>
+
+                <div style="display:inline-block;">
+                    <w-list-horizontal
+                        :items="WListHorizontal.itemsObj"
+                        :itemActive.sync="WListHorizontal.itemActive"
+                        :itemRippleColor="'rgba(255, 100, 150, 0.2)'"
+                        :borderBottomColor="'#f26'"
+                        :itemTextColorActive="'#f26'"
+                        :itemIconColorActive="'#f26'"
+                        :itemBackgroundColorActive="'transparent'"
+                    >
+                    </w-list-horizontal>
+                    <div style="border-top:1px solid #ddd;"></div>
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'paddingStyle & borderBottomColor & itemRippleColor & itemTextColor & itemTextColorHover & itemTextColorActive & itemIconColor & itemIconColorHover & itemIconColorActive & itemBackgroundColor & itemBackgroundColorHover & itemBackgroundColorActive'"
+                ></demolink>
+
+                <div style="display:inline-block;">
+                    <div style="padding:15px 15px 0px 15px; background:linear-gradient(60deg,#ab47bc,#7b1fa2); box-shadow:0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(156,39,176,.6);">
+                        <w-list-horizontal
+                            :items="WListHorizontal.itemsObj"
+                            :itemActive.sync="WListHorizontal.itemActive"
+                            :paddingStyle="{v:12,h:27}"
+                            :borderBottomColor="'rgba(255, 255, 255, 0.7)'"
+                            :itemRippleColor="'rgba(255, 255, 255, 0.05)'"
+                            :itemTextColor="'white'"
+                            :itemTextColorHover="'white'"
+                            :itemTextColorActive="'white'"
+                            :itemIconColor="'white'"
+                            :itemIconColorHover="'white'"
+                            :itemIconColorActive="'white'"
+                            :itemBackgroundColor="'transparent'"
+                            :itemBackgroundColorHover="'rgba(255,255,255,0.1)'"
+                            :itemBackgroundColorActive="'rgba(255,255,255,0.2)'"
+                        >
+                        </w-list-horizontal>
+                    </div>
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'slot'"
+                ></demolink>
+
+                <w-list-horizontal
+                    :items="WListHorizontal.itemsObj"
+                    :itemActive.sync="WListHorizontal.itemActive"
+                    :itemRippleColor="'rgba(200, 200, 200, 0.3)'"
+                >
+                    <template v-slot:item="props">
+                        <div style="display:flex; align-items:center;">
+
+                            <div style="padding:8px 7px 0px 0px;">
+
+                                <w-icon
+                                    :icon="props.item.icon"
+                                    :size="32"
+                                    :color="props.item.isActive?'#FF9800':'#666'"
+                                ></w-icon>
+
+                            </div>
+
+                            <div style="">
+
+                                <w-badge
+                                    :text="props.item.ind"
+                                    :badge-align="'left'"
+                                >
+                                    <div :style="`padding:0px 11px 0px 0px; font-size:0.9rem; line-height:0.9rem; color:${props.item.isActive?'#FF9800':'#666'}`">
+                                        {{props.item.text}}
+                                    </div>
+                                </w-badge>
+
+                                <div :style="`font-size:0.7rem; line-height:0.7rem; opacity:0.7; color:${props.item.isActive?'#FF9800':'#666'}`">
+                                    {{props.item.type}}
+                                </div>
+
+                            </div>
+
+                        </div>
+                    </template>
+                </w-list-horizontal>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import { mdiStackOverflow, mdiBookMusicOutline, mdiCharity, mdiLightbulbGroupOutline, mdiMessageCogOutline, mdiGestureDoubleTap, mdiPencilOutline, mdiLightbulbOnOutline } from '@mdi/js/mdi.js'
+import demolink from './components/demolink.vue'
+import WIcon from './components/WIcon.vue'
+import WBadge from './components/WBadge.vue'
+import WListHorizontal from './components/WListHorizontal.vue'
+
+
+export default {
+    components: {
+        demolink,
+        WIcon,
+        WBadge,
+        WListHorizontal,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            mdiPencilOutline,
+            mdiLightbulbOnOutline,
+            'WListHorizontal': {
+                'itemsString': [
+                    'Real-Time',
+                    'Audience',
+                    'Conversions',
+                    'Management',
+                    'Settings',
+                    'Actions',
+                ],
+                'itemsObj': [
+                    {
+                        text: 'Real-Time',
+                        icon: mdiStackOverflow,
+                        type: 'Default',
+                    },
+                    {
+                        text: 'Audience',
+                        icon: mdiBookMusicOutline,
+                        type: 'Default',
+                    },
+                    {
+                        text: 'Conversions',
+                        icon: mdiCharity,
+                        type: 'Default',
+                    },
+                    {
+                        text: 'Management',
+                        icon: mdiLightbulbGroupOutline,
+                        type: 'Default',
+                    },
+                    {
+                        text: 'Settings',
+                        icon: mdiMessageCogOutline,
+                        type: 'Primary',
+                    },
+                    {
+                        text: 'Actions',
+                        icon: mdiGestureDoubleTap,
+                        type: 'Primary',
+                    },
+                ],
+                'itemsObjLarge': [
+                    {
+                        text: 'Real-Time-1',
+                        icon: mdiStackOverflow,
+                    },
+                    {
+                        text: 'Audience-1',
+                        icon: mdiBookMusicOutline,
+                    },
+                    {
+                        text: 'Conversions-1',
+                        icon: mdiCharity,
+                    },
+                    {
+                        text: 'Management-1',
+                        icon: mdiLightbulbGroupOutline,
+                    },
+                    {
+                        text: 'Settings-1',
+                        icon: mdiMessageCogOutline,
+                    },
+                    {
+                        text: 'Actions-1',
+                        icon: mdiGestureDoubleTap,
+                    },
+                    {
+                        text: 'Real-Time-2',
+                        icon: mdiStackOverflow,
+                    },
+                    {
+                        text: 'Audience-2',
+                        icon: mdiBookMusicOutline,
+                    },
+                    {
+                        text: 'Conversions-2',
+                        icon: mdiCharity,
+                    },
+                    {
+                        text: 'Management-2',
+                        icon: mdiLightbulbGroupOutline,
+                    },
+                    {
+                        text: 'Settings-2',
+                        icon: mdiMessageCogOutline,
+                    },
+                    {
+                        text: 'Actions-2',
+                        icon: mdiGestureDoubleTap,
+                    },
+                ],
+                'itemsObjForKey': [
+                    {
+                        name: 'Real-Time',
+                        path: mdiStackOverflow,
+                    },
+                    {
+                        name: 'Audience',
+                        path: mdiBookMusicOutline,
+                    },
+                    {
+                        name: 'Conversions',
+                        path: mdiCharity,
+                    },
+                    {
+                        name: 'Management',
+                        path: mdiLightbulbGroupOutline,
+                    },
+                    {
+                        name: 'Settings',
+                        path: mdiMessageCogOutline,
+                    },
+                    {
+                        name: 'Actions',
+                        path: mdiGestureDoubleTap,
+                    },
+                ],
+                'itemsStringActive': 'Real-Time',
+                'itemActive': {
+                    text: 'Audience',
+                    icon: mdiBookMusicOutline,
+                    type: 'Default',
+                },
+            },
+            'actions': [
+            ],
+        }
+    },
+}
+</script>
+
+<style scoped>
+</style>