@ibiz-template/mob-vue3-components 0.7.41-alpha.23 → 0.7.41-alpha.24

package/es/control/toolbar/toolbar-render-util.mjs

@@ -1,9 +1,9 @@
-import { isVNode, createVNode, resolveComponent, h, onBeforeMount, ref, computed } from 'vue';
+import { isVNode, createVNode, resolveComponent, h, onBeforeUnmount, ref, computed } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import '../../util/index.mjs';
 import { ToolbarGroupList } from './toolbar-group-list/toolbar-group-list.mjs';
 import { FloatToolbar } from './float-toolbar/float-toolbar.mjs';
-import { convertBtnType } from '../../util/button-util/button-util.mjs';
+import { convertBtnType, calcPopoverPlacement } from '../../util/button-util/button-util.mjs';
 
 "use strict";
 function _isSlot(s) {
@@ -61,8 +61,23 @@ function useToolbarGroupModalHandler(opts) {
     buttonsState,
     modal,
     counterData,
+    groupShowMode,
+    direction = "vertical",
     modalCloseCallback
   } = opts;
+  let groupModalOverlay;
+  const handleCurOverlayClose = () => {
+    groupModalOverlay == null ? void 0 : groupModalOverlay.dismiss();
+  };
+  const handleModalClose = () => {
+    handleCurOverlayClose();
+    modal == null ? void 0 : modal.dismiss({
+      ok: false,
+      params: {
+        isModalAllClose: true
+      }
+    });
+  };
   const getGroupItems = (item, isGroupExtractMode) => {
     var _a;
     let items = item.detoolbarItems;
@@ -81,6 +96,7 @@ function useToolbarGroupModalHandler(opts) {
     return items || [];
   };
   const handleActionItemClick = (item, event, isGroupExtractMode) => {
+    handleCurOverlayClose();
     modal == null ? void 0 : modal.dismiss({
       ok: true,
       data: [{
@@ -90,18 +106,38 @@ function useToolbarGroupModalHandler(opts) {
       }]
     });
   };
-  let groupModalOverlay;
-  const handleGroupItemClick = async (_item, _event, _isGroupExtractMode = false) => {
-    var _a;
-    const groupItems = getGroupItems(_item, _isGroupExtractMode);
-    if (!groupItems.length)
-      return;
-    groupModalOverlay = ibiz.overlay.createDrawer((_modal) => {
+  const openPopover = (_event, _groupItems, _isGroupExtractMode) => {
+    const placement = calcPopoverPlacement(ns, _event.currentTarget, _groupItems.length, direction, {
+      width: "150px",
+      // 3rem为弹框内分组每项的高度
+      height: "3rem"
+    });
+    const overlay = ibiz.overlay.createPopover((_modal) => {
+      return h(ToolbarGroupList, {
+        modal: _modal,
+        groupItems: _groupItems,
+        counterData,
+        buttonsState,
+        groupShowMode,
+        isGroupExtractMode: _isGroupExtractMode
+      });
+    }, {}, {
+      width: 150,
+      height: "auto",
+      modalClass: "".concat(ns.b("popover")),
+      placement
+    });
+    overlay.present(_event.currentTarget);
+    return overlay;
+  };
+  const openDrawer = (_groupItems, _isGroupExtractMode) => {
+    const overlay = ibiz.overlay.createDrawer((_modal) => {
       return h(ToolbarGroupList, {
         modal: _modal,
-        groupItems,
+        groupItems: _groupItems,
         counterData,
         buttonsState,
+        groupShowMode,
         isGroupExtractMode: _isGroupExtractMode
       });
     }, {}, {
@@ -109,14 +145,27 @@ function useToolbarGroupModalHandler(opts) {
       height: "auto",
       attrs: {
         position: "bottom",
-        overlayClass: "".concat(ns.b()),
+        overlayClass: "".concat(ns.b("drawer")),
         closeable: false,
         round: true
       }
     });
-    groupModalOverlay.present();
+    overlay.present();
+    return overlay;
+  };
+  const handleGroupItemClick = async (_item, _event, _isGroupExtractMode = false) => {
+    var _a, _b;
+    handleCurOverlayClose();
+    const groupItems = getGroupItems(_item, _isGroupExtractMode);
+    if (!groupItems.length)
+      return;
+    groupModalOverlay = groupShowMode === "ACTIONSHEET" ? openDrawer(groupItems, _isGroupExtractMode) : openPopover(_event, groupItems, _isGroupExtractMode);
     const res = await groupModalOverlay.onWillDismiss();
-    const item = (_a = res == null ? void 0 : res.data) == null ? void 0 : _a[0];
+    if ((_a = res == null ? void 0 : res.params) == null ? void 0 : _a.isModalAllClose) {
+      handleModalClose();
+      return;
+    }
+    const item = (_b = res == null ? void 0 : res.data) == null ? void 0 : _b[0];
     if (item) {
       const {
         action,
@@ -136,12 +185,13 @@ function useToolbarGroupModalHandler(opts) {
       handleActionItemClick(item, event, isGroupExtractMode);
     }
   };
-  onBeforeMount(() => {
-    groupModalOverlay == null ? void 0 : groupModalOverlay.dismiss();
+  onBeforeUnmount(() => {
+    handleCurOverlayClose();
   });
   return {
     handleItemClick,
-    handleGroupItemClick
+    handleGroupItemClick,
+    handleModalClose
   };
 }
 function useCustomToolBarRender(ns, props, c, modalCloseCallback) {
@@ -191,6 +241,7 @@ function useCustomToolBarRender(ns, props, c, modalCloseCallback) {
       counterData: c.state.counterData,
       placement: c.placement,
       direction: c.direction,
+      groupShowMode: c.groupShowMode,
       immediateFloat
     });
   };
@@ -223,7 +274,7 @@ function useCustomToolBarRender(ns, props, c, modalCloseCallback) {
     handleDismiss(res);
     floatToolbarOverlay.value = void 0;
   };
-  onBeforeMount(() => {
+  onBeforeUnmount(() => {
     floatToolbarOverlay.value = void 0;
   });
   const renderFloatButton = () => {

package/es/control/toolbar/toolbar.css

@@ -1 +1 @@
-.ibiz-control-toolbar{--ibiz-control-toolbar-width-icon-min-width:1em;--ibiz-control-toolbar-height-bottom-item:var(--ibiz-height-control-large);--ibiz-control-toolbar-color-disabled-text:var(--ibiz-color-disabled-text);--ibiz-control-toolbar-color-disabled-bg:var(--ibiz-color-disabled-bg);--ibiz-control-toolbar-spacing-gap:var(--ibiz-spacing-tight);--ibiz-control-toolbar-spacing-badge-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-spacing-bottom-padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-font-fontSize:var(--ibiz-font-size-regular);--ibiz-control-toolbar-font-left-fontSize:var(--ibiz-font-size-header-6);--ibiz-control-toolbar-font-right-fontSize:var(--ibiz-font-size-header-6);display:flex;flex-wrap:wrap;gap:var(--ibiz-control-toolbar-spacing-gap);height:100%}.ibiz-control-toolbar__item{display:flex;align-items:center}.ibiz-control-toolbar__group{display:flex;align-items:center}.ibiz-control-toolbar__group-itemx{display:flex;align-items:center}.ibiz-control-toolbar__group-itemx .van-button:nth-child(1){border-right-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.ibiz-control-toolbar__group-itemx .van-button:nth-child(2){border-top-left-radius:0;border-bottom-left-radius:0}.ibiz-control-toolbar .van-button__text{display:flex;align-items:center}.ibiz-control-toolbar .ibiz-control-toolbar-item{--ibiz-info-item-spacing-badge-margin:var(--ibiz-control-toolbar-spacing-badge-margin);font-size:var(--ibiz-control-toolbar-font-fontSize);white-space:nowrap}.ibiz-control-toolbar .ibiz-control-toolbar-item:not(:has(svg,img)) .ibiz-icon{width:auto;min-width:var(--ibiz-control-toolbar-width-icon-min-width)}.ibiz-control-toolbar-left .van-button{border:none}.ibiz-control-toolbar-left .ibiz-control-toolbar-item{font-size:var(--ibiz-control-toolbar-font-left-fontSize)}.ibiz-control-toolbar-right{justify-content:flex-end}.ibiz-control-toolbar-right .van-button{border:none}.ibiz-control-toolbar-right .ibiz-control-toolbar-item{font-size:var(--ibiz-control-toolbar-font-right-fontSize)}.ibiz-control-toolbar-bottom{display:flex;padding:var(--ibiz-control-toolbar-spacing-bottom-padding)}.ibiz-control-toolbar-bottom .ibiz-control-toolbar__item{flex:1}.ibiz-control-toolbar-bottom .ibiz-control-toolbar__item:nth-child(1){margin-left:0}.ibiz-control-toolbar-bottom .ibiz-control-toolbar__item .van-button{width:100%;height:var(--ibiz-control-toolbar-height-bottom-item)}.ibiz-toolbar-group-list{--ibiz-control-toolbar-width-icon-min-width:1em;--ibiz-control-toolbar-height-bottom-item:var(--ibiz-height-control-large);--ibiz-control-toolbar-color-disabled-text:var(--ibiz-color-disabled-text);--ibiz-control-toolbar-color-disabled-bg:var(--ibiz-color-disabled-bg);--ibiz-control-toolbar-spacing-gap:var(--ibiz-spacing-tight);--ibiz-control-toolbar-spacing-badge-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-spacing-bottom-padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-font-fontSize:var(--ibiz-font-size-regular);--ibiz-control-toolbar-font-left-fontSize:var(--ibiz-font-size-header-6);--ibiz-control-toolbar-font-right-fontSize:var(--ibiz-font-size-header-6)}.ibiz-control-toolbar-float-toolbar-modal.ibiz-popover{background-color:unset;border:none;box-shadow:unset}
+.ibiz-control-toolbar{--ibiz-control-toolbar-width-icon-min-width:1em;--ibiz-control-toolbar-height-bottom-item:var(--ibiz-height-control-large);--ibiz-control-toolbar-color-disabled-text:var(--ibiz-color-disabled-text);--ibiz-control-toolbar-color-disabled-bg:var(--ibiz-color-disabled-bg);--ibiz-control-toolbar-spacing-gap:var(--ibiz-spacing-tight);--ibiz-control-toolbar-spacing-badge-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-spacing-bottom-padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-font-fontSize:var(--ibiz-font-size-regular);--ibiz-control-toolbar-font-left-fontSize:var(--ibiz-font-size-header-6);--ibiz-control-toolbar-font-right-fontSize:var(--ibiz-font-size-header-6);display:flex;flex-wrap:wrap;gap:var(--ibiz-control-toolbar-spacing-gap);height:100%}.ibiz-control-toolbar__item{display:flex;align-items:center}.ibiz-control-toolbar__group{display:flex;align-items:center}.ibiz-control-toolbar__group-itemx{display:flex;align-items:center}.ibiz-control-toolbar__group-itemx .van-button:nth-child(1){border-right-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.ibiz-control-toolbar__group-itemx .van-button:nth-child(2){border-top-left-radius:0;border-bottom-left-radius:0}.ibiz-control-toolbar .van-button__text{display:flex;align-items:center}.ibiz-control-toolbar .ibiz-control-toolbar-item{--ibiz-info-item-spacing-badge-margin:var(--ibiz-control-toolbar-spacing-badge-margin);font-size:var(--ibiz-control-toolbar-font-fontSize);white-space:nowrap}.ibiz-control-toolbar .ibiz-control-toolbar-item:not(:has(svg,img)) .ibiz-icon{width:auto;min-width:var(--ibiz-control-toolbar-width-icon-min-width)}.ibiz-control-toolbar-left .van-button{border:none}.ibiz-control-toolbar-left .ibiz-control-toolbar-item{font-size:var(--ibiz-control-toolbar-font-left-fontSize)}.ibiz-control-toolbar-right{justify-content:flex-end}.ibiz-control-toolbar-right .van-button{border:none}.ibiz-control-toolbar-right .ibiz-control-toolbar-item{font-size:var(--ibiz-control-toolbar-font-right-fontSize)}.ibiz-control-toolbar-bottom{display:flex;padding:var(--ibiz-control-toolbar-spacing-bottom-padding)}.ibiz-control-toolbar-bottom .ibiz-control-toolbar__item{flex:1}.ibiz-control-toolbar-bottom .ibiz-control-toolbar__item:nth-child(1){margin-left:0}.ibiz-control-toolbar-bottom .ibiz-control-toolbar__item .van-button{width:100%;height:var(--ibiz-control-toolbar-height-bottom-item)}.ibiz-toolbar-group-list{--ibiz-control-toolbar-width-icon-min-width:1em;--ibiz-control-toolbar-height-bottom-item:var(--ibiz-height-control-large);--ibiz-control-toolbar-color-disabled-text:var(--ibiz-color-disabled-text);--ibiz-control-toolbar-color-disabled-bg:var(--ibiz-color-disabled-bg);--ibiz-control-toolbar-spacing-gap:var(--ibiz-spacing-tight);--ibiz-control-toolbar-spacing-badge-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-control-toolbar-spacing-bottom-padding:var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base);--ibiz-control-toolbar-font-fontSize:var(--ibiz-font-size-regular);--ibiz-control-toolbar-font-left-fontSize:var(--ibiz-font-size-header-6);--ibiz-control-toolbar-font-right-fontSize:var(--ibiz-font-size-header-6)}.ibiz-control-toolbar-float-toolbar-modal.ibiz-popover{background-color:unset;border:none;box-shadow:unset}.ibiz-toolbar-group-modal-popover.ibiz-popover{overflow:hidden;border:none;border-radius:var(--ibiz-border-radius-medium)}

package/es/control/toolbar/toolbar.mjs

@@ -85,6 +85,7 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
     } = useToolbarGroupModalHandler({
       buttonsState: c.state.buttonsState,
       counterData: c.state.counterData,
+      groupShowMode: c.groupShowMode,
       modalCloseCallback: handleClick.bind(this)
     });
     const {
@@ -245,6 +246,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
     const {
       state
     } = this.c;
+    if (!state.isCreated)
+      return null;
     if (this.position === "popper") {
       let _slot4;
       return createVNode(resolveComponent("iBizControlBase"), {

package/es/editor/html/quill-editor-preview/quill-editor-preview.css

@@ -1 +1 @@
-.ibiz-quill-preview{--ibiz-quill-preview-min-height:6.25rem;--ibiz-quill-preview-color-placeholder:var(--ibiz-editor-default-placeholder-color);--ibiz-quill-preview-color-btn:var(--ibiz-color-primary);--ibiz-quill-preview-font-fontSize:var(--ibiz-font-size-header-4);--ibiz-quill-preview-font-more-lineHeight:var(--ibiz-font-size-header-4);--ibiz-quill-preview-font-more-fontSize:var(--ibiz-font-size-header-4);--ibiz-quill-preview-spacing-editor-padding-top:var(--ibiz-spacing-base-tight);--ibiz-quill-preview-spacing-editor-padding-right:var(--ibiz-spacing-base);--ibiz-quill-preview-spacing-padding-right:var(--ibiz-spacing-super-loose);--ibiz-quill-preview-spacing-readonly-padding-right:var(--ibiz-spacing-base);--ibiz-quill-preview-spacing-disabled-padding-right:var(--ibiz-spacing-base);position:relative;min-height:var(--ibiz-quill-preview-min-height)}.ibiz-quill-preview__edit{position:absolute;top:var(--ibiz-quill-preview-spacing-editor-padding-top);right:var(--ibiz-quill-preview-spacing-editor-padding-right);font-size:var(--ibiz-quill-preview-font-fontSize)}.ibiz-quill-preview .ql-editor{padding-right:var(--ibiz-quill-preview-spacing-padding-right)}.ibiz-quill-preview--readonly .ql-editor{padding-right:var(--ibiz-quill-preview-spacing-readonly-padding-right)}.ibiz-quill-preview--disabled .ql-editor{padding-right:var(--ibiz-quill-preview-spacing-disabled-padding-right)}.ibiz-quill-preview__image-popup{overflow:visible;background-color:transparent}.ibiz-quill-preview .ql-editor.ql-blank{padding:0}.ibiz-quill-preview .ql-editor.ql-blank::before{left:0;font-style:normal;color:var(--ibiz-quill-preview-color-placeholder)}.ibiz-quill-preview--show-collapse.is-collapse{height:var(--ibiz-quill-preview-height-default)}.ibiz-quill-preview--show-collapse.is-collapse .ql-editor{overflow:hidden}.ibiz-quill-preview--show-collapse.is-collapse .ql-container{height:calc(100% - var(--ibiz-quill-preview-font-more-fontSize));line-height:1}.ibiz-quill-preview-collapse-btn{display:flex;align-items:center;color:var(--ibiz-quill-preview-color-btn);font-size:var(--ibiz-quill-preview-font-more-fontSize)}
+.ibiz-quill-preview{--ibiz-quill-preview-min-height:6.25rem;--ibiz-quill-preview-color-placeholder:var(--ibiz-editor-default-placeholder-color);--ibiz-quill-preview-color-btn:var(--ibiz-color-primary);--ibiz-quill-preview-font-fontSize:var(--ibiz-font-size-header-4);--ibiz-quill-preview-font-more-lineHeight:var(--ibiz-font-size-header-4);--ibiz-quill-preview-font-more-fontSize:var(--ibiz-font-size-header-4);--ibiz-quill-preview-spacing-editor-padding-top:var(--ibiz-spacing-base-tight);--ibiz-quill-preview-spacing-editor-padding-right:var(--ibiz-spacing-base);--ibiz-quill-preview-spacing-padding-right:var(--ibiz-spacing-super-loose);--ibiz-quill-preview-spacing-readonly-padding-right:var(--ibiz-spacing-base);--ibiz-quill-preview-spacing-disabled-padding-right:var(--ibiz-spacing-base);--ibiz-quill-preview-spacing-more-margin-bottom:var(--ibiz-spacing-loose);position:relative;min-height:var(--ibiz-quill-preview-min-height)}.ibiz-quill-preview__edit{position:absolute;top:var(--ibiz-quill-preview-spacing-editor-padding-top);right:var(--ibiz-quill-preview-spacing-editor-padding-right);font-size:var(--ibiz-quill-preview-font-fontSize)}.ibiz-quill-preview .ql-editor{padding-right:var(--ibiz-quill-preview-spacing-padding-right)}.ibiz-quill-preview--readonly .ql-editor{padding-right:var(--ibiz-quill-preview-spacing-readonly-padding-right)}.ibiz-quill-preview--disabled .ql-editor{padding-right:var(--ibiz-quill-preview-spacing-disabled-padding-right)}.ibiz-quill-preview__image-popup{overflow:visible;background-color:transparent}.ibiz-quill-preview .ql-editor.ql-blank{padding:0}.ibiz-quill-preview .ql-editor.ql-blank::before{left:0;font-style:normal;color:var(--ibiz-quill-preview-color-placeholder)}.ibiz-quill-preview--show-collapse.is-collapse{height:var(--ibiz-quill-preview-height-default);margin-bottom:var(--ibiz-quill-preview-spacing-more-margin-bottom)}.ibiz-quill-preview--show-collapse.is-collapse .ql-editor{overflow:hidden}.ibiz-quill-preview--show-collapse.is-collapse .ql-container{line-height:1}.ibiz-quill-preview-collapse-btn{display:flex;align-items:center;color:var(--ibiz-quill-preview-color-btn);font-size:var(--ibiz-quill-preview-font-more-fontSize)}

package/es/editor/upload/ibiz-file-upload/ibiz-file-upload.css

@@ -1 +1 @@
-.ibiz-file-upload{--ibiz-file-upload-min-height:var(--ibiz-editor-default-line-height);--ibiz-file-upload-width-icon:var(--ibiz-width-icon-large);--ibiz-file-upload-width-img:var(--ibiz-height-control-large);--ibiz-file-upload-width-remove:var(--ibiz-width-icon-large);--ibiz-file-upload-color-btn:var(--ibiz-color-text-2);--ibiz-file-upload-color-preview:var(--ibiz-color-disabled-bg);--ibiz-file-upload-spacing-preview-gap:var(--ibiz-spacing-tight);--ibiz-file-upload-spacing-preview-padding:0 var(--ibiz-spacing-tight);--ibiz-file-upload-spacing-img-padding:var(--ibiz-spacing-tight);--ibiz-file-upload-spacing-preview-text-gap:var(--ibiz-spacing-tight);--ibiz-file-upload-font-btn-fontSize:var(--ibiz-font-size-header-4);--ibiz-file-upload-font-preview-fontSize:var(--ibiz-font-size-regular);--ibiz-file-upload-font-textAlign:var(--ibiz-editor-default-text-align);--ibiz-file-upload-radius-preview:var(--ibiz-border-radius-small);--ibiz-file-upload-radius-img:var(--ibiz-border-radius-small);display:flex;flex-direction:column;width:100%}.ibiz-file-upload .van-uploader__preview{display:none}.ibiz-file-upload .van-uploader{width:100%}.ibiz-file-upload--readonly .van-uploader{display:none}.ibiz-file-upload .ibiz-file-upload-button{width:var(--ibiz-file-upload-width-icon);height:var(--ibiz-file-upload-width-icon);font-size:var(--ibiz-file-upload-font-btn-fontSize);color:var(--ibiz-file-upload-color-btn);background:0 0;border:none;border-radius:50%}.ibiz-file-upload .ibiz-file-upload-button .van-button__icon{font-size:inherit}.ibiz-file-upload .van-uploader__preview .van-uploader__file-icon{display:none}.ibiz-file-upload .van-uploader__preview .van-uploader__file-name{display:none}.ibiz-file-upload .ibiz-file-upload-preview{width:100%;margin-top:var(--ibiz-file-upload-spacing-preview-gap)}.ibiz-file-upload .ibiz-file-upload-preview-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ibiz-file-upload-spacing-preview-padding);margin-bottom:var(--ibiz-file-upload-spacing-preview-gap);background:var(--ibiz-file-upload-color-preview);border-radius:var(--ibiz-file-upload-radius-preview)}.ibiz-file-upload .ibiz-file-upload-preview-item:last-child{margin:0;border-width:0}.ibiz-file-upload .ibiz-file-upload-preview-item-img{flex-shrink:0;width:var(--ibiz-file-upload-width-img);min-width:var(--ibiz-file-upload-width-img);height:var(--ibiz-file-upload-width-img);padding:var(--ibiz-file-upload-spacing-img-padding)}.ibiz-file-upload .ibiz-file-upload-preview-item-img img{width:100%;height:100%;border-radius:var(--ibiz-file-upload-radius-img)}.ibiz-file-upload .ibiz-file-upload-preview-item-left{display:flex;flex-grow:1;align-items:center;width:calc(100% - var(--ibiz-file-upload-width-remove))}.ibiz-file-upload .ibiz-file-upload-preview-item-text{display:flex;flex:1;align-items:center;width:calc(100% - var(--ibiz-file-upload-width-img) - var(--ibiz-file-upload-width-remove));padding-left:var(--ibiz-file-upload-spacing-preview-text-gap);font-size:var(--ibiz-file-upload-font-preview-fontSize)}.ibiz-file-upload .ibiz-file-upload-preview-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-file-upload .ibiz-file-upload-preview-item-action{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;width:var(--ibiz-file-upload-width-remove);text-align:right}.ibiz-file-upload .van-uploader__wrapper{display:flex;align-items:center;min-height:var(--ibiz-file-upload-min-height)}.ibiz-file-upload .van-uploader__input-wrapper{display:flex;align-items:center;justify-content:var(--ibiz-file-upload-font-textAlign);width:100%}.ibiz-file-upload .van-uploader__input-wrapper input{right:0;left:auto;width:var(--ibiz-file-upload-width-icon)}.ibiz-file-upload.is-single .van-uploader{display:none}.ibiz-file-upload.is-single .ibiz-file-upload-preview{margin:0}.ibiz-form-item-container--top .ibiz-file-upload .van-uploader{position:absolute;top:0;right:0;width:100%}.ibiz-file-upload--readonly .ibiz-file-upload-preview{margin-top:0}.ibiz-file-upload--disabled .ibiz-file-upload-preview{margin-top:0}
+.ibiz-file-upload{--ibiz-file-upload-min-height:var(--ibiz-editor-default-line-height);--ibiz-file-upload-width-icon:var(--ibiz-width-icon-large);--ibiz-file-upload-width-img:var(--ibiz-height-control-large);--ibiz-file-upload-width-remove:var(--ibiz-width-icon-large);--ibiz-file-upload-color-btn:var(--ibiz-color-text-2);--ibiz-file-upload-color-preview:var(--ibiz-color-disabled-bg);--ibiz-file-upload-spacing-preview-gap:var(--ibiz-spacing-tight);--ibiz-file-upload-spacing-preview-padding:0 var(--ibiz-spacing-tight);--ibiz-file-upload-spacing-img-padding:var(--ibiz-spacing-tight);--ibiz-file-upload-spacing-preview-text-gap:var(--ibiz-spacing-tight);--ibiz-file-upload-font-btn-fontSize:var(--ibiz-font-size-header-4);--ibiz-file-upload-font-preview-fontSize:var(--ibiz-font-size-regular);--ibiz-file-upload-font-textAlign:var(--ibiz-editor-default-text-align);--ibiz-file-upload-radius-preview:var(--ibiz-border-radius-small);--ibiz-file-upload-radius-img:var(--ibiz-border-radius-small);display:flex;flex-direction:column;width:100%}.ibiz-file-upload .van-uploader__preview{display:none}.ibiz-file-upload .van-uploader{width:100%}.ibiz-file-upload--readonly .van-uploader{display:none}.ibiz-file-upload .ibiz-file-upload-button{width:var(--ibiz-file-upload-width-icon);height:var(--ibiz-file-upload-width-icon);font-size:var(--ibiz-file-upload-font-btn-fontSize);color:var(--ibiz-file-upload-color-btn);background:0 0;border:none;border-radius:50%}.ibiz-file-upload .ibiz-file-upload-button .van-button__icon{font-size:inherit}.ibiz-file-upload .van-uploader__preview .van-uploader__file-icon{display:none}.ibiz-file-upload .van-uploader__preview .van-uploader__file-name{display:none}.ibiz-file-upload .ibiz-file-upload-preview{width:100%;margin-top:var(--ibiz-file-upload-spacing-preview-gap)}.ibiz-file-upload .ibiz-file-upload-preview-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ibiz-file-upload-spacing-preview-padding);margin-bottom:var(--ibiz-file-upload-spacing-preview-gap);background:var(--ibiz-file-upload-color-preview);border-radius:var(--ibiz-file-upload-radius-preview)}.ibiz-file-upload .ibiz-file-upload-preview-item:last-child{margin:0;border-width:0}.ibiz-file-upload .ibiz-file-upload-preview-item-img{flex-shrink:0;width:var(--ibiz-file-upload-width-img);min-width:var(--ibiz-file-upload-width-img);height:var(--ibiz-file-upload-width-img);padding:var(--ibiz-file-upload-spacing-img-padding)}.ibiz-file-upload .ibiz-file-upload-preview-item-img img{width:100%;height:100%;border-radius:var(--ibiz-file-upload-radius-img)}.ibiz-file-upload .ibiz-file-upload-preview-item-left{display:flex;flex-grow:1;align-items:center;width:calc(100% - var(--ibiz-file-upload-width-remove))}.ibiz-file-upload .ibiz-file-upload-preview-item-text{display:flex;flex:1;align-items:center;width:calc(100% - var(--ibiz-file-upload-width-img) - var(--ibiz-file-upload-width-remove));padding-left:var(--ibiz-file-upload-spacing-preview-text-gap);font-size:var(--ibiz-file-upload-font-preview-fontSize)}.ibiz-file-upload .ibiz-file-upload-preview-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-file-upload .ibiz-file-upload-preview-item-action{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;width:var(--ibiz-file-upload-width-remove);text-align:right}.ibiz-file-upload .van-uploader__wrapper{display:flex;align-items:center;min-height:var(--ibiz-file-upload-min-height)}.ibiz-file-upload .van-uploader__input-wrapper{display:flex;align-items:center;justify-content:var(--ibiz-file-upload-font-textAlign);width:100%}.ibiz-file-upload .van-uploader__input-wrapper input{left:auto;width:var(--ibiz-file-upload-width-icon)}.ibiz-file-upload.is-single .van-uploader{display:none}.ibiz-file-upload.is-single .ibiz-file-upload-preview{margin:0}.ibiz-form-item-container--top .ibiz-file-upload .van-uploader{position:absolute;top:0;right:0;width:100%}.ibiz-file-upload--readonly .ibiz-file-upload-preview{margin-top:0}.ibiz-file-upload--disabled .ibiz-file-upload-preview{margin-top:0}

package/es/mob-app/guard/auth-guard/dyna-auth-guard.mjs

@@ -36,7 +36,7 @@ class DynaAuthGuard extends AuthGuard {
         permission
       );
       const app = await ibiz.hub.getAppAsync(ibiz.env.appId);
-      await this.initEnvironment(app);
+      await this.initEnvironment(app.model);
       await AppHooks.initedApp.call({ context, app });
       const appModel = app.model;
       ibiz.env.isMob = appModel.mobileApp === true;

package/es/util/button-util/button-util.mjs

@@ -39,11 +39,11 @@ function getTempDomRect(ns, style = {}) {
   document.body.removeChild(dom);
   return domRectList;
 }
-function calcPopoverPlacement(ns, curDom, listNum, direction = "horizontal") {
+function calcPopoverPlacement(ns, curDom, listNum, direction = "horizontal", style = {}) {
   if (!curDom)
     return direction === "horizontal" ? "right" : "bottom";
   const { innerWidth, innerHeight } = window;
-  const rect = getTempDomRect(ns);
+  const rect = getTempDomRect(ns, style);
   const { x, y, width } = curDom.getBoundingClientRect();
   const centerX = innerWidth - width - rect.width;
   const centerY = listNum ? innerHeight - listNum * rect.height : innerHeight / 2;

package/es/util/fullscreen/fullscreen-util.mjs

@@ -35,7 +35,7 @@ class FullscreenUtil {
    * @memberof FullscreenUtil
    */
   get isFullScreen() {
-    return !!this.fullscreenElement;
+    return !!this.fullscreenElement && document.fullscreenElement === this.fullscreenElement;
   }
   /**
    * 指定元素全屏

package/es/util/list-util/list-render-util.mjs

@@ -212,11 +212,11 @@ function useListRender(props, c, ns) {
     }
     return createVNode(resolveComponent("van-list"), {
       "class": [ns.e("content"), ns.is("show-under-line", controlStyle !== "EXTVIEW1")],
-      "loading": c.state.isLoading,
+      "loading": c.state.isLoading || isUpdating.value,
       "error": isLoadError.value,
       "onUpdate:error": ($event) => isLoadError.value = $event,
       "offset": 50,
-      "disabled": disabled || isUpdating.value,
+      "disabled": disabled,
       "finished": isLodeFinished.value,
       "loading-text": ibiz.i18n.t("control.common.loadMore"),
       "finished-text": finishedText,

package/es/view/download-view/download-view.mjs

@@ -1,4 +1,4 @@
-import { isVNode, defineComponent, createVNode, ref, resolveComponent } from 'vue';
+import { isVNode, defineComponent, createVNode, ref, resolveComponent, onMounted } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { useRoute } from 'vue-router';
 import './download-view.css';
@@ -84,6 +84,9 @@ const DownloadView = /* @__PURE__ */ defineComponent({
         });
       }
     };
+    onMounted(() => {
+      ibiz.util.hiddenAppLoading();
+    });
     return {
       ns,
       tooltip,

package/es/view/login-view/login-view.mjs

@@ -109,6 +109,7 @@ const LoginView = /* @__PURE__ */ defineComponent({
           }
         } catch (err) {
           ibiz.log.warn(err);
+          window.location.reload();
         }
         isAnonymous.value = false;
       }

package/es/view-engine/index-view.engine.mjs

@@ -5,10 +5,6 @@ class IndexViewEngine extends ViewEngineBase {
   get appmenu() {
     return this.view.getController("appmenu");
   }
-  async onCreated() {
-    await super.onCreated();
-    ibiz.util.hiddenAppLoading();
-  }
 }
 
 export { IndexViewEngine };

package/lib/common/fullscreen-header/fullscreen-header.css

@@ -1 +1 @@
-.ibiz-fullscreen-header{--ibiz-fullscreen-header-spacing-full-screen-spacing:var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);--ibiz-fullscreen-header-width-full-screen:100vw;--ibiz-fullscreen-header-height-full-screen:100vh;--ibiz-fullscreen-header-height-fullscreen-header:2.75rem;--ibiz-fullscreen-header-font-fullscreen-header-fontSize:var(--ibiz-font-size-header-5);--ibiz-fullscreen-header-font-fullscreen-header-fontWeight:var(--ibiz-font-weight-bold);height:var(--ibiz-fullscreen-header-height-fullscreen-header);display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;font-size:var(--ibiz-fullscreen-header-font-fullscreen-header-fontSize);font-weight:var(--ibiz-fullscreen-header-font-fullscreen-header-fontWeight)}.ibiz-fullscreen-header__close{position:absolute;right:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-header-1);height:100%;display:flex;align-items:center}.ibiz-full-screen{position:fixed;top:0;left:0;height:var(--ibiz-fullscreen-header-height-full-screen);width:var(--ibiz-fullscreen-header-width-full-screen);padding:var(--ibiz-fullscreen-header-spacing-full-screen-spacing)}
+.ibiz-fullscreen-header{--ibiz-fullscreen-header-spacing-full-screen-spacing:var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);--ibiz-fullscreen-header-width-full-screen:100vw;--ibiz-fullscreen-header-height-full-screen:100vh;--ibiz-fullscreen-header-height-fullscreen-header:2.75rem;--ibiz-fullscreen-header-font-fullscreen-header-fontSize:var(--ibiz-font-size-header-5);--ibiz-fullscreen-header-font-fullscreen-header-fontWeight:var(--ibiz-font-weight-bold);height:var(--ibiz-fullscreen-header-height-fullscreen-header);display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;font-size:var(--ibiz-fullscreen-header-font-fullscreen-header-fontSize);font-weight:var(--ibiz-fullscreen-header-font-fullscreen-header-fontWeight)}.ibiz-fullscreen-header__close{position:absolute;right:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-header-1);height:100%;display:flex;align-items:center}.ibiz-full-screen{--ibiz-fullscreen-header-spacing-full-screen-spacing:var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);--ibiz-fullscreen-header-width-full-screen:100vw;--ibiz-fullscreen-header-height-full-screen:100vh;--ibiz-fullscreen-header-height-fullscreen-header:2.75rem;--ibiz-fullscreen-header-font-fullscreen-header-fontSize:var(--ibiz-font-size-header-5);--ibiz-fullscreen-header-font-fullscreen-header-fontWeight:var(--ibiz-font-weight-bold);position:fixed;top:0;left:0;z-index:10;height:var(--ibiz-fullscreen-header-height-full-screen)!important;width:var(--ibiz-fullscreen-header-width-full-screen)!important;padding:var(--ibiz-fullscreen-header-spacing-full-screen-spacing)}

package/lib/control/app-menu/app-menu.cjs

@@ -67,7 +67,7 @@ const AppMenuControl = /* @__PURE__ */ vue.defineComponent({
       activeName.value = active;
       await c.onClickMenuItem(active, event, true, opts);
     };
-    vue.onMounted(async () => {
+    c.evt.on("onCreated", async () => {
       const allItems = c.getAllItems();
       const defaultActiveMenuItem = allItems.find((item) => {
         return item.openDefault && c.isMobMenuItemValid(item);

package/lib/control/app-menu/custom-menu-design/custom-menu-design.cjs

@@ -2,8 +2,8 @@
 
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
-var core = require('@ibiz-template/core');
-var menuRenderUtil = require('../menu-render-util.cjs');
+var menuDesignList = require('./menu-design-list/menu-design-list.cjs');
+var menuDesignTree = require('./menu-design-tree/menu-design-tree.cjs');
 require('./custom-menu-design.css');
 
 "use strict";
@@ -14,12 +14,12 @@ const MenuDesign = /* @__PURE__ */ vue.defineComponent({
       type: Object,
       required: true
     },
-    show: {
-      type: Boolean,
-      default: false
-    },
     modal: {
       type: Object
+    },
+    showMode: {
+      type: String,
+      default: "DEFALUT"
     }
   },
   emits: {
@@ -30,104 +30,48 @@ const MenuDesign = /* @__PURE__ */ vue.defineComponent({
   }) {
     const ns = vue3Util.useNamespace("menu-design");
     const c = props.controller;
-    const menuMap = vue.ref(/* @__PURE__ */ new Map());
-    const allMenuMap = /* @__PURE__ */ new Map();
-    const initData = () => {
-      [...c.state.mobMenuItems, ...c.saveConfigs].forEach((item) => {
-        if (item.id) {
-          menuMap.value.set(item.id, item);
-        }
-      });
-      core.recursiveIterate({
-        appMenuItems: c.state.mobAuthedMenuItems
-      }, (item) => {
-        if (item.id) {
-          allMenuMap.set(item.id, item);
-        }
-      }, {
-        childrenFields: ["appMenuItems"]
-      });
-    };
-    initData();
-    const getItemIcon = (item, isGroup) => {
-      if (item.sysImage)
-        return item.sysImage;
-      switch (c.model.appMenuStyle) {
-        case "ICONVIEW":
-          return !isGroup ? menuRenderUtil.getDefaultIconVal() : void 0;
-        case "LISTVIEW":
-          return;
-        default:
-          return menuRenderUtil.getDefaultIconVal();
-      }
-    };
+    const curVisibleMenuItems = vue.ref([...c.state.mobMenuItems]);
     const onClose = () => {
       var _a;
       emit("close");
       (_a = props.modal) == null ? void 0 : _a.dismiss();
-      menuMap.value.clear();
     };
     const onSave = async () => {
-      const curMenuItems = Array.from(menuMap.value.values()).map((item) => {
-        return allMenuMap.get(item.id);
-      }).filter((item) => !!item);
-      c.saveCustomMenusModel(curMenuItems);
+      c.saveCustomMenusModel(curVisibleMenuItems.value);
       onClose();
     };
-    const handleItemClick = (item, checked) => {
-      if (!item.id)
-        return;
-      if (checked) {
-        menuMap.value.delete(item.id);
-      } else {
-        menuMap.value.set(item.id, item);
-      }
-    };
-    const renderNodeItem = (_item, _level, isGroup) => {
-      const marginLeft = "calc(".concat(_level, " * var(").concat(ns.cssVarBlockName("spacing-node-item-margin-left"), "))");
-      let checked = menuMap.value.has(_item.id || "");
-      return vue.createVNode("div", {
-        "class": [ns.e("item"), ns.is("group-item", !!isGroup)],
-        "style": {
-          marginLeft
-        },
-        "onClick": () => handleItemClick(_item, checked)
-      }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
-        "class": ns.em("item", "icon"),
-        "icon": getItemIcon(_item, isGroup)
-      }, null), vue.createVNode("div", {
-        "class": ns.em("item", "caption")
-      }, [_item.caption]), vue.createVNode(vue.resolveComponent("van-checkbox"), {
-        "modelValue": checked,
-        "onUpdate:modelValue": ($event) => checked = $event,
-        "class": ns.em("item", "checkbox")
-      }, null)]);
+    const onCurVisibleMenuChange = (menuItems) => {
+      curVisibleMenuItems.value = menuItems;
     };
-    const renderNode = (_item, _level) => {
-      var _a;
-      if (_item.appMenuItems && _item.appMenuItems.length > 0) {
-        return [renderNodeItem(_item, _level, true), ...(_a = _item.appMenuItems) == null ? void 0 : _a.map((item) => {
-          return renderNode(item, _level + 1);
-        })];
+    const renderContent = () => {
+      switch (props.showMode) {
+        case "LIST":
+          return vue.createVNode(menuDesignList.MenuDesignList, {
+            "curVisibleMenuItems": curVisibleMenuItems.value,
+            "allVisibleMenuItems": c.state.mobAuthedMenuItems,
+            "onCurVisibleMenuChange": onCurVisibleMenuChange
+          }, null);
+        case "TREE":
+        default:
+          return vue.createVNode(menuDesignTree.MenuDesignTree, {
+            "curVisibleMenuItems": curVisibleMenuItems.value,
+            "allVisibleMenuItems": c.state.mobAuthedMenuItems,
+            "appMenuStyle": c.model.appMenuStyle,
+            "onCurVisibleMenuChange": onCurVisibleMenuChange
+          }, null);
       }
-      return renderNodeItem(_item, _level);
-    };
-    const renderTree = (items) => {
-      return vue.createVNode("div", {
-        "class": ns.e("tree")
-      }, [items.map((item) => renderNode(item, 0))]);
     };
     return {
       c,
       ns,
       onSave,
       onClose,
-      renderTree
+      renderContent
     };
   },
   render() {
     return vue.createVNode("div", {
-      "class": this.ns.b()
+      "class": [this.ns.b(), this.ns.is(this.showMode.toLocaleLowerCase(), true)]
     }, [vue.createVNode("div", {
       "class": this.ns.e("header")
     }, [vue.createVNode("ion-icon", {
@@ -141,7 +85,7 @@ const MenuDesign = /* @__PURE__ */ vue.defineComponent({
       "onClick": this.onSave
     }, [ibiz.i18n.t("control.appmenu.save")])]), vue.createVNode("div", {
       "class": this.ns.e("content")
-    }, [this.c.state.mobAuthedMenuItems.length ? this.renderTree(this.c.state.mobAuthedMenuItems) : vue.createVNode(vue.resolveComponent("iBizNoData"), null, null)])]);
+    }, [this.renderContent()])]);
   }
 });
 

package/lib/control/app-menu/custom-menu-design/custom-menu-design.css

@@ -1 +1 @@
-.ibiz-menu-design{--ibiz-menu-design-color-item-bg:var(--ibiz-color-bg-0);--ibiz-menu-design-color-primary-btn-text:var(--ibiz-color-primary);--ibiz-menu-design-height-item:var(--ibiz-height-control-large);--ibiz-menu-design-spacing-padding:var(--ibiz-spacing-base);--ibiz-menu-design-spacing-header-padding:0 0 var(--ibiz-spacing-tight);--ibiz-menu-design-spacing-item-padding:0 var(--ibiz-spacing-base);--ibiz-menu-design-spacing-item-margin:var(--ibiz-spacing-tight) 0;--ibiz-menu-design-spacing-item-caption-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-menu-design-spacing-item-checkbox-margin:0 0 0 var(--ibiz-spacing-extra-tight);--ibiz-menu-design-spacing-node-item-margin-left:1.25rem;--ibiz-menu-design-radius-item-circle:var(--ibiz-border-radius-medium);--ibiz-menu-design-font-header-font-size:var(--ibiz-font-size-header-5);--ibiz-menu-design-font-header-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-menu-design-font-close-icon-font-size:var(--ibiz-font-size-header-3);--ibiz-menu-design-font-item-font-size:var(--ibiz-font-size-header-6);--ibiz-menu-design-icon-item-size:var(--ibiz-font-size-header-6);display:flex;flex-direction:column;width:100%;height:100%;padding:var(--ibiz-menu-design-spacing-padding)}.ibiz-menu-design__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ibiz-menu-design-spacing-header-padding);font-size:var(--ibiz-menu-design-font-header-font-size)}.ibiz-menu-design__header--close-icon{font-size:var(--ibiz-menu-design-font-close-icon-font-size)}.ibiz-menu-design__header--caption{font-weight:var(--ibiz-menu-design-font-header-caption-font-weight)}.ibiz-menu-design__header--save{color:var(--ibiz-menu-design-color-primary-btn-text)}.ibiz-menu-design__content{flex:1;overflow-y:auto}.ibiz-menu-design__item{display:flex;align-items:center;height:var(--ibiz-menu-design-height-item);padding:var(--ibiz-menu-design-spacing-item-padding);margin:var(--ibiz-menu-design-spacing-item-margin);font-size:var(--ibiz-menu-design-font-item-font-size);background-color:var(--ibiz-menu-design-color-item-bg);border-radius:var(--ibiz-menu-design-radius-item-circle);line-height:var(--ibiz-menu-design-height-item)}.ibiz-menu-design__item--icon{display:flex;align-items:center;width:var(--ibiz-menu-design-icon-item-size)}.ibiz-menu-design__item--icon+.ibiz-menu-design__item--caption{margin:var(--ibiz-menu-design-spacing-item-caption-margin)}.ibiz-menu-design__item--caption{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-menu-design__item--checkbox{padding:var(--ibiz-menu-design-spacing-item-checkbox-margin);margin-left:auto}.ibiz-menu-design .ibiz-menu-design__item{position:relative}.ibiz-menu-design .ibiz-menu-design__item::after{position:absolute;display:block;width:100%;height:100%;left:0;top:0;content:""}
+.ibiz-menu-design{--ibiz-menu-design-color-list-bg:var(--ibiz-color-bg-0);--ibiz-menu-design-color-primary-btn-text:var(--ibiz-color-primary);--ibiz-menu-design-spacing-padding:var(--ibiz-spacing-base);--ibiz-menu-design-spacing-header-padding:0 0 var(--ibiz-spacing-tight);--ibiz-menu-design-radius-item-circle:var(--ibiz-border-radius-medium);--ibiz-menu-design-font-header-font-size:var(--ibiz-font-size-header-5);--ibiz-menu-design-font-header-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-menu-design-font-close-icon-font-size:var(--ibiz-font-size-header-3);--ibiz-menu-design-font-item-font-size:var(--ibiz-font-size-header-6);display:flex;flex-direction:column;width:100%;height:100%;padding:var(--ibiz-menu-design-spacing-padding)}.ibiz-menu-design__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ibiz-menu-design-spacing-header-padding);font-size:var(--ibiz-menu-design-font-header-font-size)}.ibiz-menu-design__header--close-icon{font-size:var(--ibiz-menu-design-font-close-icon-font-size)}.ibiz-menu-design__header--caption{font-weight:var(--ibiz-menu-design-font-header-caption-font-weight)}.ibiz-menu-design__header--save{color:var(--ibiz-menu-design-color-primary-btn-text)}.ibiz-menu-design__content{flex:1;overflow-y:auto}.ibiz-menu-design.is-list{background-color:var(--ibiz-menu-design-color-list-bg)}

package/lib/control/app-menu/custom-menu-design/menu-design-list/menu-design-list.cjs

@@ -0,0 +1,107 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var draggable = require('vuedraggable');
+require('./menu-design-list.css');
+
+"use strict";
+const MenuDesignList = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizMenuDesignList",
+  components: {
+    draggable
+  },
+  props: {
+    curVisibleMenuItems: {
+      type: Array,
+      required: true
+    },
+    allVisibleMenuItems: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: {
+    curVisibleMenuChange: (_menuItems) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("menu-design-list");
+    const curMenuItems = vue.ref([]);
+    const moreMenuItems = vue.ref([]);
+    const initData = () => {
+      curMenuItems.value = [...props.curVisibleMenuItems];
+      moreMenuItems.value = props.allVisibleMenuItems.filter((menu) => !props.curVisibleMenuItems.find((_item) => menu.id === _item.id));
+    };
+    initData();
+    const emitChange = () => {
+      emit("curVisibleMenuChange", [...curMenuItems.value]);
+    };
+    const handleRemoveOrAdd = (type, index) => {
+      if (type === "nav") {
+        const item = curMenuItems.value[index];
+        curMenuItems.value.splice(index, 1);
+        moreMenuItems.value.push(item);
+      } else {
+        const item = moreMenuItems.value[index];
+        moreMenuItems.value.splice(index, 1);
+        curMenuItems.value.push(item);
+      }
+      emitChange();
+    };
+    const renderDraggable = (type, menuItems) => {
+      return vue.createVNode(draggable, {
+        "itemKey": "id",
+        "group": "menu-design",
+        "handle": ".draggable-icon",
+        "list": menuItems,
+        "class": ns.e("draggable"),
+        "onEnd": emitChange
+      }, {
+        item: ({
+          element,
+          index
+        }) => {
+          return vue.createVNode("div", {
+            "class": ns.em("draggable", "item")
+          }, [vue.createVNode("ion-icon", {
+            "name": type === "nav" ? "remove-circle" : "add-circle",
+            "class": [ns.em("draggable", "icon"), ns.em("draggable", type === "nav" ? "remove-icon" : "add-icon"), ns.em("draggable", "prefix-icon")],
+            "onClick": () => handleRemoveOrAdd(type, index)
+          }, null), vue.createVNode("div", {
+            "class": ns.em("draggable", "item-content")
+          }, [vue.createVNode("div", {
+            "class": ns.em("draggable", "item-caption")
+          }, [vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "icon": element.sysImage,
+            "class": ns.em("draggable", "item-icon")
+          }, null), vue.createVNode("div", null, [element.caption])]), vue.createVNode("ion-icon", {
+            "name": "menu-outline",
+            "class": ["draggable-icon", ns.em("draggable", "icon"), ns.em("draggable", "suffix-icon")]
+          }, null)])]);
+        }
+      });
+    };
+    const renderMenuList = (type) => {
+      return vue.createVNode("div", {
+        "class": ns.e("group")
+      }, [vue.createVNode("div", {
+        "class": ns.em("group", "caption")
+      }, [type === "nav" ? ibiz.i18n.t("control.appmenu.bottomNav") : ibiz.i18n.t("control.appmenu.more")]), renderDraggable(type, type === "nav" ? curMenuItems.value : moreMenuItems.value)]);
+    };
+    return {
+      ns,
+      renderMenuList
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("wrapper")
+    }, [[this.renderMenuList("nav"), this.renderMenuList("more")]])]);
+  }
+});
+
+exports.MenuDesignList = MenuDesignList;

package/lib/control/app-menu/custom-menu-design/menu-design-list/menu-design-list.css

@@ -0,0 +1 @@
+.ibiz-menu-design-list{--ibiz-menu-design-list-color-group-caption:var(--ibiz-color-text-2);--ibiz-menu-design-list-color-draggable-bg:var(--ibiz-color-bg-1);--ibiz-menu-design-list-color-draggable-prefix-icon:var(--ibiz-color-danger);--ibiz-menu-design-list-color-draggable-add-icon:var(--ibiz-color-primary);--ibiz-menu-design-list-color-draggable-item-content-border:var(--ibiz-color-border);--ibiz-menu-design-list-width-draggable-item-icon:var(--van-tabbar-item-icon-size);--ibiz-menu-design-list-spacing-caption-padding:var(--ibiz-spacing-base) 0;--ibiz-menu-design-list-spacing-draggable-padding:var(--ibiz-spacing-base-tight);--ibiz-menu-design-list-spacing-draggable-item-content-padding:var(--ibiz-spacing-base-tight) 0;--ibiz-menu-design-list-spacing-draggable-prefix-icon-margin:0 var(--ibiz-spacing-tight) 0 0;--ibiz-menu-design-list-spacing-draggable-item-icon:0 var(--ibiz-spacing-tight) 0 0;--ibiz-menu-design-list-radius-draggable-circle:var(--ibiz-border-radius-medium);--ibiz-menu-design-list-font-draggable-icon:var(--ibiz-font-size-header-3);--ibiz-menu-design-list-font-draggable-item:var(--ibiz-width-icon-medium);--ibiz-menu-design-list-line-height-draggable-item-caption:1}.ibiz-menu-design-list__group--caption{padding:var(--ibiz-menu-design-list-spacing-caption-padding);color:var(--ibiz-menu-design-list-color-group-caption)}.ibiz-menu-design-list__draggable{padding:var(--ibiz-menu-design-list-spacing-draggable-padding);background-color:var(--ibiz-menu-design-list-color-draggable-bg);border-radius:var(--ibiz-menu-design-list-radius-draggable-circle)}.ibiz-menu-design-list__draggable--icon{font-size:var(--ibiz-menu-design-list-font-draggable-icon)}.ibiz-menu-design-list__draggable--icon.ibiz-menu-design-list__draggable--prefix-icon{margin:var(--ibiz-menu-design-list-spacing-draggable-prefix-icon-margin)}.ibiz-menu-design-list__draggable--icon.ibiz-menu-design-list__draggable--remove-icon{color:var(--ibiz-menu-design-list-color-draggable-prefix-icon)}.ibiz-menu-design-list__draggable--icon.ibiz-menu-design-list__draggable--add-icon{color:var(--ibiz-menu-design-list-color-draggable-add-icon)}.ibiz-menu-design-list__draggable--item{display:flex;align-items:center;width:100%;font-size:var(--ibiz-menu-design-list-font-draggable-item)}.ibiz-menu-design-list__draggable--item-content{display:flex;flex-grow:1;align-items:center;justify-content:space-between;padding:var(--ibiz-menu-design-list-spacing-draggable-item-content-padding);border-bottom:1px solid var(--ibiz-menu-design-list-color-draggable-item-content-border)}.ibiz-menu-design-list__draggable--item-caption{display:flex;align-items:center;line-height:var(--ibiz-menu-design-list-line-height-draggable-item-caption)}.ibiz-menu-design-list__draggable--item-icon{display:flex;align-items:center;width:var(--ibiz-menu-design-list-width-draggable-item-icon);margin:var(--ibiz-menu-design-list-spacing-draggable-item-icon)}