@ibiz-template/mob-vue3-components 0.7.41-alpha.19 → 0.7.41-alpha.20

package/es/common/split/split.mjs

@@ -0,0 +1,187 @@
+import { defineComponent, createVNode, resolveComponent, ref, computed, nextTick, watch, onMounted, onBeforeUnmount } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './split.css';
+
+"use strict";
+const IBizSplit = /* @__PURE__ */ defineComponent({
+  name: "IBizSplit",
+  props: {
+    modelValue: {
+      type: [Number, String],
+      default: 0.5
+    },
+    mode: {
+      validator: (value) => {
+        return ["horizontal", "vertical"].includes(value);
+      },
+      default: "horizontal"
+    },
+    min: {
+      type: [Number, String],
+      default: "30px"
+    },
+    max: {
+      type: [Number, String],
+      default: "30px"
+    }
+  },
+  emits: ["update:modelValue", "on-move-start", "on-moving", "on-move-end"],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("split");
+    const outerWrapper = ref(null);
+    const offset = ref(0);
+    const oldOffset = ref(0);
+    const isMoving = ref(false);
+    const computedMin = ref(0);
+    const computedMax = ref(0);
+    const currentValue = ref(0.5);
+    const initOffset = ref(0);
+    const wrapperClasses = computed(() => [ns.b("wrapper"), ns.is("no-select", isMoving.value)]);
+    const paneClasses = computed(() => [ns.b("pane"), isMoving.value ? ns.bm("pane", "moving") : ""]);
+    const isHorizontal = computed(() => props.mode === "horizontal");
+    const anotherOffset = computed(() => 100 - offset.value);
+    const valueIsPx = computed(() => typeof props.modelValue === "string");
+    const offsetSize = computed(() => isHorizontal.value ? "offsetWidth" : "offsetHeight");
+    const px2percent = (numerator, denominator) => {
+      return parseFloat(numerator) / parseFloat(denominator);
+    };
+    const getComputedThresholdValue = (type) => {
+      const size = outerWrapper.value[offsetSize.value];
+      if (valueIsPx.value) {
+        return typeof props[type] === "string" ? props[type] : size * props[type];
+      }
+      return typeof props[type] === "string" ? px2percent(props[type], size) : props[type];
+    };
+    const getMax = (value1, value2) => {
+      if (valueIsPx.value)
+        return `${Math.max(parseFloat(value1), parseFloat(value2))}px`;
+      return Math.max(value1, value2);
+    };
+    const getAnotherOffset = (value) => {
+      let res = 0;
+      if (valueIsPx.value)
+        res = `${outerWrapper.value[offsetSize.value] - parseFloat(value)}px`;
+      else
+        res = 1 - value;
+      return res;
+    };
+    const handleMove = (e) => {
+      if (!isMoving.value)
+        return false;
+      const pageOffset = isHorizontal.value ? e.pageX : e.pageY;
+      const moveOffset = pageOffset - initOffset.value;
+      const outerWidth = outerWrapper.value[offsetSize.value];
+      let value = valueIsPx.value ? `${parseFloat(oldOffset.value) + moveOffset}px` : px2percent(outerWidth * oldOffset.value + moveOffset, outerWidth);
+      const anotherValue = getAnotherOffset(value);
+      if (parseFloat(value) <= parseFloat(computedMin.value)) {
+        value = getMax(value, computedMin.value);
+      }
+      if (parseFloat(anotherValue) <= parseFloat(computedMax.value)) {
+        value = getAnotherOffset(getMax(anotherValue, computedMax.value));
+      }
+      emit("update:modelValue", value);
+      emit("on-moving", e);
+    };
+    const handleUp = () => {
+      isMoving.value = false;
+      emit("on-move-end");
+    };
+    const handleMousedown = (e) => {
+      initOffset.value = isHorizontal.value ? e.pageX : e.pageY;
+      oldOffset.value = props.modelValue;
+      isMoving.value = true;
+      emit("on-move-start");
+    };
+    const computeOffset = () => {
+      nextTick(() => {
+        computedMin.value = getComputedThresholdValue("min");
+        computedMax.value = getComputedThresholdValue("max");
+        offset.value = (valueIsPx.value ? px2percent(props.modelValue, outerWrapper.value[offsetSize.value]) : props.modelValue) * 1e4 / 100;
+      });
+    };
+    watch(() => props.modelValue, (val) => {
+      if (val !== currentValue.value) {
+        currentValue.value = val;
+        computeOffset();
+      }
+    });
+    onMounted(() => {
+      nextTick(() => {
+        computeOffset();
+      });
+      document.addEventListener("pointermove", handleMove);
+      document.addEventListener("pointerup", handleUp);
+      document.addEventListener("pointercancel", handleUp);
+      window.addEventListener("resize", computeOffset);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", computeOffset);
+      document.removeEventListener("pointermove", handleMove);
+      document.removeEventListener("pointerup", handleUp);
+      document.removeEventListener("pointercancel", handleUp);
+    });
+    return {
+      ns,
+      outerWrapper,
+      offset,
+      wrapperClasses,
+      paneClasses,
+      isHorizontal,
+      anotherOffset,
+      handleMousedown
+    };
+  },
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    return createVNode("div", {
+      "class": this.wrapperClasses,
+      "ref": "outerWrapper"
+    }, [this.isHorizontal ? createVNode("div", {
+      "class": this.ns.m("horizontal")
+    }, [createVNode("div", {
+      "style": {
+        width: `${this.offset}%`
+      },
+      "class": [this.paneClasses, this.ns.bm("pane", "left")]
+    }, [(_b = (_a = this.$slots).left) == null ? void 0 : _b.call(_a)]), createVNode("div", {
+      "style": {
+        left: `${this.offset}%`
+      },
+      "class": this.ns.b("trigger-con"),
+      "tabindex": 0,
+      "onPointerdown": (e) => this.handleMousedown(e)
+    }, [((_d = (_c = this.$slots).trigger) == null ? void 0 : _d.call(_c)) || createVNode(resolveComponent("iBizSplitTrigger"), {
+      "mode": "vertical"
+    }, null)]), createVNode("div", {
+      "style": {
+        width: `${this.anotherOffset}%`
+      },
+      "class": [this.paneClasses, this.ns.bm("pane", "right")]
+    }, [(_f = (_e = this.$slots).right) == null ? void 0 : _f.call(_e)])]) : createVNode("div", {
+      "class": this.ns.m("vertical")
+    }, [createVNode("div", {
+      "style": {
+        bottom: `${this.anotherOffset}%`
+      },
+      "class": [this.paneClasses, this.ns.bm("pane", "top")]
+    }, [(_h = (_g = this.$slots).top) == null ? void 0 : _h.call(_g)]), createVNode("div", {
+      "style": {
+        top: `${this.offset}%`
+      },
+      "class": this.ns.b("trigger-con"),
+      "tabindex": 0,
+      "onPointerdown": (e) => this.handleMousedown(e)
+    }, [((_j = (_i = this.$slots).trigger) == null ? void 0 : _j.call(_i)) || createVNode(resolveComponent("iBizSplitTrigger"), {
+      "mode": "horizontal"
+    }, null)]), createVNode("div", {
+      "style": {
+        top: `${this.offset}%`
+      },
+      "class": [this.paneClasses, this.ns.bm("pane", "bottom")]
+    }, [(_l = (_k = this.$slots).bottom) == null ? void 0 : _l.call(_k)])])]);
+  }
+});
+
+export { IBizSplit };

package/es/common/split-trigger/split-trigger.css

@@ -0,0 +1 @@
+.ibiz-split-trigger{--ibiz-split-trigger-trigger-bar-background:var(--ibiz-color-border);--ibiz-split-trigger-trigger-width:6px;--ibiz-split-trigger-trigger-bar-width:4px;--ibiz-split-trigger-trigger-bar-offset:calc(var(trigger-width) - var(trigger-bar-width) / 2);--ibiz-split-trigger-trigger-bar-interval:3px;--ibiz-split-trigger-trigger-bar-weight:1px;--ibiz-split-trigger-trigger-bar-con-height:calc(var(trigger-bar-weight) + var(trigger-bar-interval) * 8);border:1px solid var(--ibiz-color-border)}.ibiz-split-trigger--vertical{width:var(--ibiz-split-trigger-trigger-width);height:100%;cursor:col-resize;border-top:none;border-bottom:none}.ibiz-split-trigger--vertical .ibiz-split-trigger-bar{float:left;width:var(--ibiz-split-trigger-trigger-bar-width);height:1px;margin-top:var(--ibiz-split-trigger-trigger-bar-interval);background:var(--ibiz-split-trigger-trigger-bar-background)}.ibiz-split-trigger--horizontal{width:100%;height:var(--ibiz-split-trigger-trigger-width);cursor:row-resize;border-right:none;border-left:none}.ibiz-split-trigger--horizontal .ibiz-split-trigger-bar{float:left;width:1px;height:var(--ibiz-split-trigger-trigger-bar-width);margin-right:var(--ibiz-split-trigger-trigger-bar-interval);background:var(--ibiz-split-trigger-trigger-bar-background)}.ibiz-split-trigger-bar-con{position:absolute;overflow:hidden}.ibiz-split-trigger-bar-con--vertical{top:50%;left:var(--ibiz-split-trigger-trigger-bar-offset);height:var(--ibiz-split-trigger-trigger-bar-con-height);transform:translate(0,-50%)}.ibiz-split-trigger-bar-con--horizontal{top:var(--ibiz-split-trigger-trigger-bar-offset);left:50%;width:var(--ibiz-split-trigger-trigger-bar-con-height);transform:translate(-50%,0)}

package/es/common/split-trigger/split-trigger.mjs

@@ -0,0 +1,36 @@
+import { defineComponent, createVNode, computed } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './split-trigger.css';
+
+"use strict";
+const IBizSplitTrigger = /* @__PURE__ */ defineComponent({
+  name: "IBizSplitTrigger",
+  props: {
+    mode: String
+  },
+  setup(prop) {
+    const ns = useNamespace("split-trigger");
+    const isVertical = computed(() => prop.mode === "vertical");
+    const classes = computed(() => [ns.b(), isVertical.value ? ns.m("vertical") : ns.m("horizontal")]);
+    const barConClasses = computed(() => [ns.b("bar-con"), isVertical.value ? ns.bm("bar-con", "vertical") : ns.bm("bar-con", "horizontal")]);
+    const items = Array(8).fill(0);
+    return {
+      ns,
+      classes,
+      barConClasses,
+      items
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.classes
+    }, [createVNode("div", {
+      "class": this.barConClasses
+    }, [this.items.map((_item, i) => createVNode("i", {
+      "class": this.ns.b("bar"),
+      "key": `trigger-${i}`
+    }, null))])]);
+  }
+});
+
+export { IBizSplitTrigger };

package/es/common/tab-layout/tab-default-layout/tab-default-layout.css

@@ -0,0 +1 @@
+.ibiz-tab-default-layout{--ibiz-tab-default-layout-color-border:var(--ibiz-color-border);--ibiz-tab-default-layout-height:3.125rem;--ibiz-tab-default-layout-font-tab-font-size:var(--ibiz-tab-layout-font-tab-font-size)}.ibiz-tab-default-layout__tab-item{font-size:var(--ibiz-tab-default-layout-font-tab-font-size)}.ibiz-tab-default-layout.is-top .van-tabs--line .van-tabs__wrap{height:var(--ibiz-tab-default-layout-height)}.ibiz-tab-default-layout.is-top .van-tab__text{overflow:unset}.ibiz-tab-default-layout.is-bottom .van-tabbar{height:var(--ibiz-tab-default-layout-height);border-top:1px solid var(--ibiz-tab-default-layout-color-border)}.ibiz-tab-default-layout.is-bottom .van-tabs__line{display:none}

package/es/common/tab-layout/tab-default-layout/tab-default-layout.mjs

@@ -0,0 +1,77 @@
+import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { useLayoutRender, layoutEmits, layoutProps } from '../tab-layout-util.mjs';
+import './tab-default-layout.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const TabDefaultLayout = /* @__PURE__ */ defineComponent({
+  name: "IBizTabDefaultLayout",
+  props: layoutProps,
+  emits: layoutEmits,
+  setup(_props, {
+    emit
+  }) {
+    const ns = useNamespace("tab-default-layout");
+    const {
+      onTabChange
+    } = useLayoutRender(emit);
+    return {
+      ns,
+      onTabChange
+    };
+  },
+  render() {
+    let _slot;
+    let content = createVNode(resolveComponent("van-tabs"), {
+      "active": this.activeName,
+      "onChange": this.onTabChange
+    }, _isSlot(_slot = this.tabPages.map((tab) => {
+      if (tab.isHidden)
+        return;
+      return createVNode(resolveComponent("van-tab"), {
+        "name": tab.id
+      }, {
+        title: () => createVNode(resolveComponent("iBizInfoItem"), {
+          "class": this.ns.e("tab-item"),
+          "label": tab.text,
+          "icon": tab.icon,
+          "badge": tab.counter
+        }, null)
+      });
+    })) ? _slot : {
+      default: () => [_slot]
+    });
+    if (this.layoutMode === "bottom") {
+      let _slot2;
+      content = createVNode(resolveComponent("van-tabbar"), {
+        "fixed": false,
+        "modelValue": this.activeName,
+        "onChange": this.onTabChange
+      }, _isSlot(_slot2 = this.tabPages.map((tab) => {
+        if (tab.isHidden)
+          return;
+        return createVNode(resolveComponent("van-tabbar-item"), {
+          "name": tab.id
+        }, {
+          default: () => createVNode(resolveComponent("iBizInfoItem"), {
+            "class": this.ns.e("tab-item"),
+            "label": tab.text,
+            "icon": tab.icon,
+            "badge": tab.counter,
+            "layoutMode": "vertical"
+          }, null)
+        });
+      })) ? _slot2 : {
+        default: () => [_slot2]
+      });
+    }
+    return createVNode("div", {
+      "class": [this.ns.b(), this.ns.is(this.layoutMode, !!this.layoutMode)]
+    }, [content]);
+  }
+});
+
+export { TabDefaultLayout };

package/es/common/tab-layout/tab-dropdown/tab-dropdown-list-content.css

@@ -0,0 +1 @@
+.ibiz-tab-dropdown-list-content{--ibiz-tab-dropdown-list-content-color-item-text:var(--ibiz-tab-dropdown-color-text);--ibiz-tab-dropdown-list-content-color-item-text-active:var(--ibiz-tab-dropdown-color-text-active);--ibiz-tab-dropdown-list-content-color-wrapper-bg:var(--ibiz-color-bg-1);--ibiz-tab-dropdown-list-content-width:5.625rem;--ibiz-tab-dropdown-list-content-height-item:var(--ibiz-height-control-default);--ibiz-tab-dropdown-list-content-spacing-wrapper-padding:var(--ibiz-spacing-extra-tight) 0;--ibiz-tab-dropdown-list-content-spacing-item-padding:0 var(--ibiz-spacing-tight);--ibiz-tab-dropdown-list-content-radius-circle:var(--ibiz-border-radius-medium);--ibiz-tab-dropdown-list-content-font-item-font-size:var(--ibiz-tab-dropdown-font-size);--ibiz-tab-dropdown-list-content-right-offset:var(--ibiz-spacing-tight);--ibiz-tab-dropdown-list-content-box-shadow:var(--ibiz-shadow-elevated);width:var(--ibiz-tab-dropdown-list-content-width);padding-right:var(--ibiz-tab-dropdown-list-content-right-offset)}.ibiz-tab-dropdown-list-content__wrapper{position:relative;z-index:2;display:flex;flex-direction:column;padding:var(--ibiz-tab-dropdown-list-content-spacing-wrapper-padding);background-color:var(--ibiz-tab-dropdown-list-content-color-wrapper-bg);border-radius:var(--ibiz-tab-dropdown-list-content-radius-circle);box-shadow:var(--ibiz-shadow-elevated)}.ibiz-tab-dropdown-list-content__item{padding:var(--ibiz-tab-dropdown-list-content-spacing-item-padding);font-size:var(--ibiz-tab-dropdown-list-content-font-item-font-size);color:var(--ibiz-tab-dropdown-list-content-color-item-text);white-space:nowrap}.ibiz-tab-dropdown-list-content__item .ibiz-info-item{width:100%;min-height:var(--ibiz-tab-dropdown-list-content-height-item)}.ibiz-tab-dropdown-list-content__item .ibiz-info-item__label{overflow:hidden;text-overflow:ellipsis}.ibiz-tab-dropdown-list-content__item.is-active{color:var(--ibiz-tab-dropdown-list-content-color-item-text-active)}.ibiz-tab-dropdown-list-content__modal{position:fixed;top:0;left:0;z-index:1;width:100vw;height:100vh}

package/es/common/tab-layout/tab-dropdown/tab-dropdown-list-content.mjs

@@ -0,0 +1,64 @@
+import { defineComponent, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { layoutProps } from '../tab-layout-util.mjs';
+import './tab-dropdown-list-content.css';
+
+"use strict";
+const TabDropdownListContent = /* @__PURE__ */ defineComponent({
+  name: "IBizTabDropdownListContent",
+  props: {
+    modal: {
+      type: Object
+    },
+    ...layoutProps
+  },
+  setup(props) {
+    const ns = useNamespace("tab-dropdown-list-content");
+    const handleItemClick = (activeName) => {
+      var _a;
+      (_a = props.modal) == null ? void 0 : _a.dismiss({
+        ok: true,
+        data: [{
+          activeName
+        }]
+      });
+    };
+    const handleClose = () => {
+      var _a;
+      (_a = props.modal) == null ? void 0 : _a.dismiss();
+    };
+    const handleClick = (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    };
+    return {
+      ns,
+      handleClick,
+      handleClose,
+      handleItemClick
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": [this.ns.b()],
+      "onClick": this.handleClick
+    }, [createVNode("div", {
+      "class": this.ns.e("modal"),
+      "onClick": this.handleClose
+    }, null), createVNode("div", {
+      "class": this.ns.e("wrapper")
+    }, [this.tabPages.map((tab) => {
+      if (tab.isHidden)
+        return;
+      return createVNode("div", {
+        "class": [this.ns.e("item"), this.ns.is("active", tab.id === this.activeName)],
+        "onClick": () => this.handleItemClick(tab.id)
+      }, [createVNode(resolveComponent("iBizInfoItem"), {
+        "label": tab.text,
+        "icon": tab.icon
+      }, null)]);
+    })])]);
+  }
+});
+
+export { TabDropdownListContent };

package/es/common/tab-layout/tab-dropdown/tab-dropdown.css

@@ -0,0 +1 @@
+.ibiz-tab-dropdown{--ibiz-tab-dropdown-color-text:var(--ibiz-tab-layout-color-tab-text);--ibiz-tab-dropdown-color-text-active:var(--ibiz-tab-layout-color-tab-text-active);--ibiz-tab-dropdown-width-min-width:2.5rem;--ibiz-tab-dropdown-width-max-width:5rem;--ibiz-tab-dropdown-spacing-padding:var(--ibiz-spacing-tight);--ibiz-tab-dropdown-font-size:var(--ibiz-tab-layout-font-tab-font-size)}.ibiz-tab-dropdown__list-modal{--ibiz-tab-dropdown-color-text:var(--ibiz-tab-layout-color-tab-text);--ibiz-tab-dropdown-color-text-active:var(--ibiz-tab-layout-color-tab-text-active);--ibiz-tab-dropdown-width-min-width:2.5rem;--ibiz-tab-dropdown-width-max-width:5rem;--ibiz-tab-dropdown-spacing-padding:var(--ibiz-spacing-tight);--ibiz-tab-dropdown-font-size:var(--ibiz-tab-layout-font-tab-font-size);background-color:unset;border:unset;box-shadow:unset}.ibiz-tab-dropdown.ibiz-float-button{--ibiz-float-button-width:auto;--ibiz-float-button-font-text-font-size:var(--ibiz-tab-dropdown-font-size);--ibiz-float-button-spacing-right-padding:var(--ibiz-tab-dropdown-spacing-padding);min-width:var(--ibiz-tab-dropdown-width-min-width);max-width:var(--ibiz-tab-dropdown-width-max-width)}.ibiz-tab-dropdown.ibiz-float-button .ibiz-info-item{width:100%}.ibiz-tab-dropdown.ibiz-float-button .ibiz-info-item__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

package/es/common/tab-layout/tab-dropdown/tab-dropdown.mjs

@@ -0,0 +1,80 @@
+import { defineComponent, createVNode, resolveComponent, ref, computed, h } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { useLayoutRender, layoutEmits, layoutProps } from '../tab-layout-util.mjs';
+import { TabDropdownListContent } from './tab-dropdown-list-content.mjs';
+import './tab-dropdown.css';
+
+"use strict";
+const TabDropdown = /* @__PURE__ */ defineComponent({
+  name: "IBizTabDropdown",
+  props: layoutProps,
+  emits: layoutEmits,
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("tab-dropdown");
+    const tabDropdownRef = ref();
+    const activeTab = computed(() => {
+      return props.tabPages.find((tab) => tab.id === props.activeName);
+    });
+    const {
+      onTabChange
+    } = useLayoutRender(emit);
+    let floatOverlay;
+    const onFloatBtnClick = async (_event, _currentTarget) => {
+      var _a, _b;
+      if (floatOverlay) {
+        floatOverlay.dismiss();
+        floatOverlay = void 0;
+        return;
+      }
+      floatOverlay = ibiz.overlay.createPopover((modal) => {
+        return h(TabDropdownListContent, {
+          modal,
+          tabPages: props.tabPages,
+          activeName: props.activeName,
+          layoutMode: props.layoutMode
+        });
+      }, {}, {
+        width: "auto",
+        height: "auto",
+        noArrow: true,
+        autoClose: true,
+        placement: "bottom-end",
+        modalClass: `${ns.e("list-modal")}`,
+        appendTo: (_a = tabDropdownRef.value) == null ? void 0 : _a.$el
+      });
+      floatOverlay.present(_currentTarget);
+      const res = await floatOverlay.onWillDismiss();
+      const activeKey = (_b = res == null ? void 0 : res.data[0]) == null ? void 0 : _b.activeName;
+      if (activeKey) {
+        onTabChange(activeKey);
+      }
+      floatOverlay = void 0;
+    };
+    return {
+      ns,
+      tabDropdownRef,
+      activeTab,
+      onFloatBtnClick
+    };
+  },
+  render() {
+    return createVNode(resolveComponent("iBizFloatButton"), {
+      "ref": "tabDropdownRef",
+      "class": this.ns.b(),
+      "align": "RIGHTSTART",
+      "onClick": this.onFloatBtnClick
+    }, {
+      default: () => {
+        var _a, _b;
+        return [createVNode(resolveComponent("iBizInfoItem"), {
+          "label": (_a = this.activeTab) == null ? void 0 : _a.text,
+          "icon": (_b = this.activeTab) == null ? void 0 : _b.icon
+        }, null)];
+      }
+    });
+  }
+});
+
+export { TabDropdown };

package/es/common/tab-layout/tab-flow-layout/tab-flow-layout.css

@@ -0,0 +1 @@
+.ibiz-tab-flow-layout{--ibiz-tab-flow-layout-color-group-header-text:var(--ibiz-tab-layout-color-tab-text);--ibiz-tab-flow-layout-color-group-header-bg:var(--ibiz-color-bg-0);--ibiz-tab-flow-layout-color-group-noheader-bg:var(--ibiz-color-bg-0);--ibiz-tab-flow-layout-height-group-header-content-min-height:var(--ibiz-height-control-default);--ibiz-tab-flow-layout-spacing-group-header-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-tab-flow-layout-spacing-group-header-ph-padding:var(--ibiz-spacing-tight);--ibiz-tab-flow-layout-font-group-header-font-size:var(--ibiz-tab-layout-font-tab-font-size)}.ibiz-tab-flow-layout__group-header{padding:var(--ibiz-tab-flow-layout-spacing-group-header-padding);font-size:var(--ibiz-tab-flow-layout-font-group-header-font-size);color:var(--ibiz-tab-flow-layout-color-group-header-text);background-color:var(--ibiz-tab-flow-layout-color-group-header-bg)}.ibiz-tab-flow-layout__group-header--content{min-height:var(--ibiz-tab-flow-layout-height-group-header-content-min-height)}.ibiz-tab-flow-layout .van-index-anchor{padding:0}.ibiz-tab-flow-layout.is-flow_noheader .ibiz-tab-flow-layout__group-header-ph{padding:var(--ibiz-tab-flow-layout-spacing-group-header-ph-padding);background-color:var(--ibiz-tab-flow-layout-color-group-noheader-bg)}

package/es/common/tab-layout/tab-flow-layout/tab-flow-layout.mjs

@@ -0,0 +1,56 @@
+import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { layoutEmits, layoutProps } from '../tab-layout-util.mjs';
+import './tab-flow-layout.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const TabFlowLayout = /* @__PURE__ */ defineComponent({
+  name: "IBizTabFlowLayout",
+  props: layoutProps,
+  emits: layoutEmits,
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("tab-flow-layout");
+    return {
+      ns
+    };
+  },
+  render() {
+    let _slot;
+    const indexList = this.tabPages.map((_tab) => _tab.text);
+    return createVNode(resolveComponent("van-index-bar"), {
+      "class": [this.ns.b(), this.ns.is(this.layoutMode, !!this.layoutMode)],
+      "sticky": false,
+      "index-list": indexList
+    }, _isSlot(_slot = this.tabPages.map((tab) => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": this.ns.e("group")
+      }, [createVNode(resolveComponent("van-index-anchor"), {
+        "index": tab.text
+      }, {
+        default: () => [this.layoutMode === "flow_noheader" ? createVNode("div", {
+          "class": this.ns.e("group-header-ph")
+        }, null) : createVNode("div", {
+          "class": this.ns.e("group-header")
+        }, [createVNode(resolveComponent("iBizInfoItem"), {
+          "class": this.ns.em("group-header", "content"),
+          "label": tab.text,
+          "icon": tab.icon,
+          "badgeFloat": false,
+          "badge": tab.counter
+        }, null)])]
+      }), createVNode("div", {
+        "class": this.ns.e("group-content")
+      }, [(_b = (_a = this.$slots).groupContent) == null ? void 0 : _b.call(_a, tab)])]);
+    })) ? _slot : {
+      default: () => [_slot]
+    });
+  }
+});
+
+export { TabFlowLayout };

package/es/common/tab-layout/tab-layout-util.mjs

@@ -0,0 +1,34 @@
+"use strict";
+const layoutProps = {
+  // 分页绘制数据集合
+  tabPages: {
+    type: Array,
+    default: () => []
+  },
+  // 分页标识激活名称
+  activeName: {
+    type: String,
+    default: ""
+  },
+  // 布局模式
+  layoutMode: {
+    type: String,
+    default: "top"
+  }
+};
+const layoutEmits = {
+  /**
+   * @description 分页标识变更事件
+   */
+  tabChange: (_tabTag) => true
+};
+function useLayoutRender(emit) {
+  const onTabChange = (_tabTag) => {
+    emit("tabChange", _tabTag);
+  };
+  return {
+    onTabChange
+  };
+}
+
+export { layoutEmits, layoutProps, useLayoutRender };

package/es/common/tab-layout/tab-layout.css

@@ -0,0 +1 @@
+.ibiz-tab-layout{--ibiz-tab-layout-color-tab-text:var(--ibiz-color-text-0);--ibiz-tab-layout-color-tab-text-active:var(--ibiz-color-primary);--ibiz-tab-layout-font-tab-font-size:var(--ibiz-font-size-regular);width:100%;height:100%}

package/es/common/tab-layout/tab-layout.mjs

@@ -0,0 +1,60 @@
+import { isVNode, defineComponent, createVNode } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { useLayoutRender, layoutEmits, layoutProps } from './tab-layout-util.mjs';
+import { TabFlowLayout } from './tab-flow-layout/tab-flow-layout.mjs';
+import { TabSidebarLayout } from './tab-sidebar-layout/tab-sidebar-layout.mjs';
+import { TabDefaultLayout } from './tab-default-layout/tab-default-layout.mjs';
+import { TabDropdown } from './tab-dropdown/tab-dropdown.mjs';
+import './tab-layout.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const IBizTabLayout = /* @__PURE__ */ defineComponent({
+  name: "IBizTabLayout",
+  props: layoutProps,
+  emits: layoutEmits,
+  setup(_props, {
+    emit
+  }) {
+    const ns = useNamespace("tab-layout");
+    const {
+      onTabChange
+    } = useLayoutRender(emit);
+    return {
+      ns,
+      onTabChange
+    };
+  },
+  render() {
+    const attrs = {
+      tabPages: this.tabPages,
+      activeName: this.activeName,
+      layoutMode: this.layoutMode,
+      onTabChange: this.onTabChange
+    };
+    let content = createVNode(TabDefaultLayout, attrs, null);
+    if (this.layoutMode === "flow" || this.layoutMode === "flow_noheader") {
+      const slots = {};
+      if (this.$slots.groupContent)
+        Object.assign(slots, {
+          groupContent: this.$slots.groupContent
+        });
+      content = createVNode(TabFlowLayout, attrs, _isSlot(slots) ? slots : {
+        default: () => [slots]
+      });
+    }
+    if (["left", "right"].includes(this.layoutMode)) {
+      content = createVNode(TabSidebarLayout, attrs, null);
+    }
+    if (["top_dropdownlist"].includes(this.layoutMode)) {
+      content = createVNode(TabDropdown, attrs, null);
+    }
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [content]);
+  }
+});
+
+export { IBizTabLayout };

package/es/common/tab-layout/tab-sidebar-layout/tab-sidebar-layout.css

@@ -0,0 +1 @@
+.ibiz-tab-sidebar-layout{--ibiz-tab-sidebar-layout-color-bg:var(--ibiz-color-bg-0);--ibiz-tab-sidebar-layout-color-item-bg:var(--ibiz-color-bg-0);--ibiz-tab-sidebar-layout-width:5.625rem;--ibiz-tab-sidebar-layout-height:100%;--ibiz-tab-sidebar-layout-height-tab-item:var(--ibiz-height-control-default);--ibiz-tab-sidebar-layout-width-badge-min-width:1.25rem;--ibiz-tab-sidebar-layout-spacing-padding:var(--ibiz-spacing-tight) 0;--ibiz-tab-sidebar-layout-spacing-sidebar-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-tight);--ibiz-tab-sidebar-layout-font-tab-font-size:var(--ibiz-tab-layout-font-tab-font-size);width:var(--ibiz-tab-sidebar-layout-width);height:var(--ibiz-tab-sidebar-layout-height);padding:var(--ibiz-tab-sidebar-layout-spacing-padding);background-color:var(--ibiz-tab-sidebar-layout-color-bg)}.ibiz-tab-sidebar-layout__tab-item{display:flex;align-items:center;width:100%;min-height:var(--ibiz-tab-sidebar-layout-height-tab-item);font-size:var(--ibiz-tab-sidebar-layout-font-tab-font-size)}.ibiz-tab-sidebar-layout__tab-item .ibiz-info-item{display:inline-flex;max-width:100%}.ibiz-tab-sidebar-layout__tab-item .ibiz-info-item__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-tab-sidebar-layout__tab-item.is-long-label:has(.ibiz-info-item__badge){max-width:calc(100% - var(--ibiz-tab-sidebar-layout-width-badge-min-width))}.ibiz-tab-sidebar-layout .van-sidebar-item{display:flex;align-items:center;padding:var(--ibiz-tab-sidebar-layout-spacing-sidebar-item-padding);overflow:unset}.ibiz-tab-sidebar-layout .van-sidebar-item:not(.van-sidebar-item--select){background-color:var(--ibiz-tab-sidebar-layout-color-item-bg)}.ibiz-tab-sidebar-layout .van-sidebar-item.van-sidebar-item--select{background-color:var(--ibiz-tab-sidebar-layout-color-bg-active)}.ibiz-tab-sidebar-layout .van-sidebar-item__text{width:100%;height:100%}