@ibiz-template/mob-vue3-components 0.7.41-alpha.19-lts.1 → 0.7.41-alpha.21

package/lib/control/toolbar/float-toolbar/float-toolbar.css

@@ -0,0 +1 @@
+.ibiz-float-toolbar{--ibiz-float-toolbar-color-item-bg:var(--ibiz-color-bg-1);--ibiz-float-toolbar-color-box-shadow:var(--ibiz-shadow-elevated);--ibiz-float-toolbar-color-disabled-text:var(--ibiz-control-toolbar-color-disabled-text);--ibiz-float-toolbar-color-disabled-bg:var(--ibiz-control-toolbar-color-disabled-bg);--ibiz-float-toolbar-width-wrapper-max-width:calc(100vw - (var(--ibiz-height-control-large) + var(--ibiz-spacing-tight)));--ibiz-float-toolbar-width-item-min-width:var(--ibiz-height-control-large);--ibiz-float-toolbar-height-item:var(--ibiz-height-control-large);--ibiz-float-toolbar-spacing-wrapper-gap:var(--ibiz-spacing-tight);--ibiz-float-toolbar-spacing-item-padding:var(--ibiz-spacing-tight);--ibiz-float-toolbar-radius-item-circle:var(--ibiz-float-toolbar-height-item);--ibiz-float-toolbar-font-item-font-size:var(--ibiz-font-size-header-6);width:auto;height:auto}.ibiz-float-toolbar__wrapper{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:var(--ibiz-float-toolbar-spacing-wrapper-gap);align-items:center;max-width:var(--ibiz-float-toolbar-width-wrapper-max-width)}.ibiz-float-toolbar__modal{position:fixed;top:0;left:0;z-index:1;width:100vw;height:100vh}.ibiz-float-toolbar__item{display:flex;align-items:center;justify-content:center;min-width:var(--ibiz-float-toolbar-width-item-min-width);height:var(--ibiz-float-toolbar-height-item);padding:var(--ibiz-float-toolbar-spacing-item-padding);font-size:var(--ibiz-float-toolbar-font-item-font-size);white-space:nowrap;background-color:var(--ibiz-float-toolbar-color-item-bg);border-radius:var(--ibiz-float-toolbar-radius-item-circle);box-shadow:var(--ibiz-float-toolbar-color-box-shadow)}.ibiz-float-toolbar__item.is-disabled{color:var(--ibiz-float-toolbar-color-disabled-text);background-color:var(--ibiz-float-toolbar-color-disabled-bg)}.ibiz-float-toolbar.is-vertical .ibiz-float-toolbar__wrapper{flex-direction:column}

package/lib/control/toolbar/toolbar-group-list/toolbar-group-list.cjs

@@ -0,0 +1,79 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var toolbarRenderUtil = require('../toolbar-render-util.cjs');
+require('./toolbar-group-list.css');
+
+"use strict";
+const ToolbarGroupList = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizToolbarGroupList",
+  props: {
+    modal: {
+      type: Object
+    },
+    groupItems: {
+      type: Array,
+      required: true
+    },
+    buttonsState: {
+      type: Object,
+      required: true
+    },
+    counterData: {
+      type: Object
+    },
+    isGroupExtractMode: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("toolbar-group-list");
+    const {
+      btnType,
+      renderToolbarItemContent
+    } = toolbarRenderUtil.useToolBarItemRender(ns, {
+      counterData: props.counterData
+    });
+    const {
+      handleItemClick
+    } = toolbarRenderUtil.useToolbarGroupModalHandler({
+      modal: props.modal,
+      counterData: props.counterData,
+      buttonsState: props.buttonsState
+    });
+    return {
+      ns,
+      handleItemClick,
+      btnType,
+      renderToolbarItemContent
+    };
+  },
+  render() {
+    var _a;
+    return vue.createVNode("div", {
+      "class": [this.ns.b()]
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("wrapper")
+    }, [(_a = this.groupItems) == null ? void 0 : _a.map((_item) => {
+      var _a2;
+      const itemId = _item.id;
+      const visible = (_a2 = this.buttonsState[itemId]) == null ? void 0 : _a2.visible;
+      let disabled = this.buttonsState[itemId].disabled;
+      const toolbarItem = _item;
+      if (toolbarItem.itemType === "ITEMS")
+        disabled = false;
+      if (!visible)
+        return;
+      return vue.createVNode("div", {
+        "class": [this.ns.e("item"), this.ns.is("disabled", disabled)],
+        "onClick": (_e) => !disabled && this.handleItemClick(_item, _e, this.isGroupExtractMode)
+      }, [vue.createVNode("div", {
+        "class": this.ns.em("item", "wrapper")
+      }, [this.renderToolbarItemContent(_item)])]);
+    })])]);
+  }
+});
+
+exports.ToolbarGroupList = ToolbarGroupList;

package/lib/control/toolbar/toolbar-group-list/toolbar-group-list.css

@@ -0,0 +1 @@
+.ibiz-toolbar-group-list{--ibiz-toolbar-group-list-color-item-disabled-text:var(--ibiz-control-toolbar-color-disabled-text);--ibiz-toolbar-group-list-height-max-height:calc(100vh - var(--ibiz-height-control-large));--ibiz-toolbar-group-list-height-item-wrapper-min-height:var(--ibiz-height-control-default);--ibiz-toolbar-group-list-spacing-padding:var(--ibiz-spacing-tight) 0;--ibiz-toolbar-group-list-spacing-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-toolbar-group-list-spacing-item-label-margin:0 0 0 var(--ibiz-spacing-tight);--ibiz-toolbar-group-list-font-item-font-size:var(--ibiz-spacing-base);display:flex;flex-direction:column;max-height:var(--ibiz-toolbar-group-list-height-max-height);padding:var(--ibiz-toolbar-group-list-spacing-padding)}.ibiz-toolbar-group-list__wrapper{height:100%;overflow-y:auto}.ibiz-toolbar-group-list__item{padding:var(--ibiz-toolbar-group-list-spacing-item-padding);font-size:var(--ibiz-toolbar-group-list-font-item-font-size)}.ibiz-toolbar-group-list__item--wrapper{display:flex;align-items:center;min-height:var(--ibiz-toolbar-group-list-height-item-wrapper-min-height)}.ibiz-toolbar-group-list__item--wrapper .ibiz-toolbar-group-list-item{--ibiz-info-item-spacing-label-margin:var(--ibiz-toolbar-group-list-spacing-item-label-margin)}.ibiz-toolbar-group-list__item--wrapper .ibiz-toolbar-group-list-item:not(:has(.ibiz-icon))::before{display:inline-block;width:var(--ibiz-info-item-icon-size);height:var(--ibiz-info-item-icon-size);margin:var(--ibiz-info-item-spacing-label-margin);content:""}.ibiz-toolbar-group-list__item.is-disabled{color:var(--ibiz-toolbar-group-list-color-item-disabled-text);pointer-events:none}

package/lib/control/toolbar/toolbar-render-util.cjs

@@ -0,0 +1,238 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('../../util/index.cjs');
+var toolbarGroupList = require('./toolbar-group-list/toolbar-group-list.cjs');
+var floatToolbar = require('./float-toolbar/float-toolbar.cjs');
+var buttonUtil = require('../../util/button-util/button-util.cjs');
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+function getGroupItemxFirstIndex(details, buttonsState, index) {
+  if (index >= details.length)
+    return -1;
+  const firstItem = details[index];
+  if (firstItem) {
+    if (buttonsState[firstItem.id].visible) {
+      return index;
+    }
+    return getGroupItemxFirstIndex(details, buttonsState, index + 1);
+  }
+  return -1;
+}
+function useToolBarItemRender(ns, state) {
+  const btnType = (item) => {
+    return buttonUtil.convertBtnType(item);
+  };
+  const getToolbarItemRenderProps = (item, isGroupExtractMode) => {
+    var _a;
+    return {
+      itemModel: item,
+      key: item.id,
+      cssName: (_a = item == null ? void 0 : item.sysCss) == null ? void 0 : _a.cssName,
+      title: item.tooltip || item.caption,
+      type: btnType(item),
+      isGroupExtractMode
+    };
+  };
+  const renderToolbarItemContent = (item) => {
+    const toolbarItem = item;
+    const counterNum = state.counterData && toolbarItem.counterId ? state.counterData[toolbarItem.counterId] : null;
+    const icon = toolbarItem.showIcon && toolbarItem.sysImage ? toolbarItem.sysImage : null;
+    const label = (toolbarItem.showCaption || item.buttonType === "extra") && item.caption ? toolbarItem.caption : null;
+    return vue.createVNode(vue.resolveComponent("iBizInfoItem"), {
+      "class": ns.b("item"),
+      "icon": icon,
+      "label": label,
+      "badge": counterNum,
+      "badgeFloat": false
+    }, null);
+  };
+  return {
+    getToolbarItemRenderProps,
+    btnType,
+    renderToolbarItemContent
+  };
+}
+function useToolbarGroupModalHandler(opts) {
+  const ns = vue3Util.useNamespace("toolbar-group-modal");
+  const {
+    buttonsState,
+    modal,
+    counterData,
+    modalCloseCallback
+  } = opts;
+  const getGroupItems = (item, isGroupExtractMode) => {
+    var _a;
+    let items = item.detoolbarItems;
+    if (isGroupExtractMode) {
+      const {
+        groupExtractMode
+      } = item;
+      items = (_a = item == null ? void 0 : item.uiactionGroup) == null ? void 0 : _a.uiactionGroupDetails;
+      if (groupExtractMode === "ITEMX") {
+        if (!(items == null ? void 0 : items.length))
+          return [];
+        const firstIndex = getGroupItemxFirstIndex(items, buttonsState, 0);
+        items = items.slice(firstIndex + 1).filter((_item) => !!buttonsState[_item.id].visible);
+      }
+    }
+    return items || [];
+  };
+  const handleActionItemClick = (item, event, isGroupExtractMode) => {
+    modal == null ? void 0 : modal.dismiss({
+      ok: true,
+      data: [{
+        event,
+        action: item,
+        isGroupExtractMode
+      }]
+    });
+  };
+  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) => {
+      return vue.h(toolbarGroupList.ToolbarGroupList, {
+        modal: _modal,
+        groupItems,
+        counterData,
+        buttonsState,
+        isGroupExtractMode: _isGroupExtractMode
+      });
+    }, {}, {
+      height: "auto",
+      attrs: {
+        position: "bottom",
+        overlayClass: `${ns.b()}`,
+        closeable: false,
+        round: true
+      }
+    });
+    groupModalOverlay.present();
+    const res = await groupModalOverlay.onWillDismiss();
+    const item = (_a = res == null ? void 0 : res.data) == null ? void 0 : _a[0];
+    if (item) {
+      const {
+        action,
+        event,
+        isGroupExtractMode
+      } = item;
+      handleActionItemClick(action, event, isGroupExtractMode);
+      modalCloseCallback == null ? void 0 : modalCloseCallback(action, event, isGroupExtractMode);
+    }
+  };
+  const handleItemClick = async (item, event, isGroupExtractMode) => {
+    if (item.itemType === "ITEMS") {
+      handleGroupItemClick(item, event);
+      return;
+    }
+    if (item.itemType === "DEUIACTION" || isGroupExtractMode) {
+      handleActionItemClick(item, event, isGroupExtractMode);
+    }
+  };
+  vue.onBeforeMount(() => {
+    groupModalOverlay == null ? void 0 : groupModalOverlay.dismiss();
+  });
+  return {
+    handleItemClick,
+    handleGroupItemClick
+  };
+}
+function useCustomToolBarRender(ns, props, c, modalCloseCallback) {
+  const floatToolbarOverlay = vue.ref();
+  const modalPlacement = vue.computed(() => {
+    let placement = "";
+    switch (c.placement) {
+      case "LEFTSTART":
+      case "LEFT":
+      case "LEFTEND":
+        placement = "right";
+        break;
+      case "RIGHTSTART":
+      case "RIGHT":
+      case "RIGHTEND":
+      default:
+        placement = "left";
+        break;
+    }
+    if (c.direction === "VERTICAL") {
+      switch (c.placement) {
+        case "LEFTSTART":
+        case "LEFT":
+        case "LEFTEND":
+          placement = "right-start";
+          break;
+        case "RIGHTSTART":
+        case "RIGHT":
+        case "RIGHTEND":
+        default:
+          placement = "left-start";
+          break;
+      }
+    }
+    return placement;
+  });
+  const onFloatBtnClick = async (_event, _currentTarget) => {
+    var _a;
+    floatToolbarOverlay.value = ibiz.overlay.createPopover((modal) => {
+      return vue.h(floatToolbar.FloatToolbar, {
+        modal,
+        modelData: props.modelData,
+        buttonsState: c.state.buttonsState,
+        counterData: c.state.counterData,
+        placement: c.placement,
+        direction: c.direction
+      });
+    }, {}, {
+      width: "auto",
+      height: "auto",
+      noArrow: true,
+      placement: modalPlacement.value,
+      modalClass: `${ns.b("float-toolbar-modal")}`
+    });
+    floatToolbarOverlay.value.present(_currentTarget);
+    const res = await floatToolbarOverlay.value.onWillDismiss();
+    const item = (_a = res == null ? void 0 : res.data) == null ? void 0 : _a[0];
+    if (item) {
+      const {
+        action,
+        event
+      } = item;
+      modalCloseCallback(action, event);
+    }
+    floatToolbarOverlay.value = void 0;
+  };
+  vue.onBeforeMount(() => {
+    floatToolbarOverlay.value = void 0;
+  });
+  const renderFloatButton = () => {
+    const slot = {};
+    if (floatToolbarOverlay.value)
+      Object.assign(slot, {
+        icon: () => vue.createVNode(vue.resolveComponent("van-icon"), {
+          "name": "cross"
+        }, null)
+      });
+    return vue.createVNode(vue.resolveComponent("iBizFloatButton"), {
+      "align": c.placement,
+      "onClick": onFloatBtnClick
+    }, _isSlot(slot) ? slot : {
+      default: () => [slot]
+    });
+  };
+  return {
+    renderFloatButton
+  };
+}
+
+exports.getGroupItemxFirstIndex = getGroupItemxFirstIndex;
+exports.useCustomToolBarRender = useCustomToolBarRender;
+exports.useToolBarItemRender = useToolBarItemRender;
+exports.useToolbarGroupModalHandler = useToolbarGroupModalHandler;