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

package/lib/common/rawitem/rawitem.cjs

@@ -44,7 +44,7 @@ const IBizRawItem = /* @__PURE__ */ vue.defineComponent({
         rawItemContent.value = rawItem.content;
       }
     } else if (["VIDEO", "DIVIDER", "INFO", "WARNING", "ERROR"].includes(contentType)) {
-      rawItemContent.value = props.content || rawItem.rawContent;
+      rawItemContent.value = props.content || (rawItem == null ? void 0 : rawItem.rawContent) || (rawItem == null ? void 0 : rawItem.rawItemParams);
     } else if (contentType === "IMAGE" && sysImage) {
       rawItemContent.value = sysImage;
     }
@@ -64,15 +64,35 @@ const IBizRawItem = /* @__PURE__ */ vue.defineComponent({
       contentPosition: "center",
       html: ""
     });
+    const messageTypeIcon = {
+      WARNING: "warning-o",
+      ERROR: "close",
+      INFO: "info-o"
+    };
     const alertParams = vue.ref({
-      type: "info",
       title: "",
-      closeabled: true,
-      showIcon: false,
+      closeabled: false,
+      showIcon: true,
       class: "",
+      wrapable: true,
+      // 是否多行展示
       "left-icon": ""
     });
     const rawItemText = vue.ref("");
+    const getParamsValue = (key) => {
+      let value;
+      const params = rawItem == null ? void 0 : rawItem.rawItemParams;
+      if (!params) {
+        ibiz.log.error(`\u672A\u914D\u7F6E\u89C6\u9891\u64AD\u653E\u53C2\u6570:${key}}`);
+        return void 0;
+      }
+      params.forEach((item) => {
+        if (item.key === key) {
+          value = item.value;
+        }
+      });
+      return value;
+    };
     const convertValue = () => {
       if (rawItemType.value === "IMAGE") {
         if (typeof props.content === "string") {
@@ -104,11 +124,32 @@ const IBizRawItem = /* @__PURE__ */ vue.defineComponent({
           let rawConfig = {};
           try {
             if (typeof rawItemContent.value === "string") {
+              if (["INFO", "WARNING", "ERROR"].includes(rawItemType.value)) {
+                alertParams.value.class = rawItemType.value.toLocaleLowerCase();
+                alertParams.value.title = rawItemContent.value;
+                alertParams.value["left-icon"] = messageTypeIcon[rawItemType.value];
+              }
               const func = new Function(`return (${rawItemContent.value});`);
               rawConfig = func();
               switch (rawItemType.value) {
                 case "VIDEO":
                   Object.assign(playerParams.value, rawConfig);
+                  if (rawItem == null ? void 0 : rawItem.rawItemParams) {
+                    const tempConfig = {
+                      path: getParamsValue("path"),
+                      autoplay: getParamsValue("autoplay"),
+                      mute: getParamsValue("mute"),
+                      replay: getParamsValue("replay"),
+                      showcontrols: getParamsValue("showcontrols")
+                    };
+                    Object.keys(tempConfig).forEach((key) => {
+                      if (tempConfig[key] !== void 0) {
+                        Object.assign(playerParams.value, {
+                          [key]: tempConfig[key]
+                        });
+                      }
+                    });
+                  }
                   break;
                 case "DIVIDER":
                   Object.assign(dividerParams.value, rawConfig);
@@ -116,17 +157,19 @@ const IBizRawItem = /* @__PURE__ */ vue.defineComponent({
                 case "INFO":
                 case "WARNING":
                 case "ERROR":
-                  alertParams.value.class = rawItemType.value.toLocaleLowerCase();
-                  if (rawItemType.value === "ERROR") {
-                    alertParams.value["left-icon"] = "close";
-                  } else {
-                    alertParams.value["left-icon"] = rawItemType.value.toLocaleLowerCase();
-                  }
                   Object.assign(alertParams.value, rawConfig);
                   break;
                 default:
                   break;
               }
+            } else if (rawItemType.value === "VIDEO") {
+              Object.assign(playerParams.value, {
+                path: getParamsValue("path"),
+                autoplay: getParamsValue("autoplay"),
+                mute: getParamsValue("mute"),
+                replay: getParamsValue("replay"),
+                showcontrols: getParamsValue("showcontrols")
+              });
             }
           } catch (e) {
             ibiz.log.error(ibiz.i18n.t("component.rawItem.errorConfig", {
@@ -156,6 +199,7 @@ const IBizRawItem = /* @__PURE__ */ vue.defineComponent({
     };
   },
   render() {
+    var _a;
     const renderContent = () => {
       if (this.rawItemType === "IMAGE") {
         return vue.createVNode(vue.resolveComponent("i-biz-icon"), {
@@ -249,6 +293,8 @@ const IBizRawItem = /* @__PURE__ */ vue.defineComponent({
           "text": this.alertParams.title,
           "show-icon": this.alertParams.showIcon,
           "class": this.alertParams.class,
+          "type": this.rawItemType.toLowerCase(),
+          "wrapable": this.alertParams.wrapable,
           "left-icon": this.alertParams.showIcon ? this.alertParams["left-icon"] : "",
           "mode": this.alertParams.closeabled ? "closeable" : ""
         }, {
@@ -267,7 +313,7 @@ const IBizRawItem = /* @__PURE__ */ vue.defineComponent({
       return null;
     };
     return vue.createVNode("div", {
-      "class": this.ns.b()
+      "class": [this.ns.b(), this.ns.m((_a = this.rawItemType) == null ? void 0 : _a.toLocaleLowerCase())]
     }, [renderContent()]);
   }
 });

package/lib/common/rawitem/rawitem.css

@@ -1 +1 @@
-.ibiz-rawitem{width:100%;height:100%;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-editor-default-text-color)}.ibiz-rawitem .ibiz-icon{width:100%;height:100%}.ibiz-rawitem .van-notice-bar.info{--van-notice-bar-text-color:var(--ibiz-color-primary);--van-notice-bar-background:var(--ibiz-color-primary-light-default)}.ibiz-rawitem .van-notice-bar.warning{--van-notice-bar-text-color:var(--ibiz-color-warning)}.ibiz-rawitem .van-notice-bar.error{--van-notice-bar-text-color:var(--ibiz-color-danger);--van-notice-bar-background:var(--ibiz-color-danger-light-default)}
+.ibiz-rawitem{--ibiz-rawitem-color-rawitem-color:var(--ibiz-editor-default-text-color);--ibiz-rawitem-font-rawitem-fontSize:var(--ibiz-editor-default-font-size);--ibiz-rawitem-spacing-view-message-padding:var(--ibiz-view-message-padding);width:100%;height:100%;font-size:var(--ibiz-rawitem-font-rawitem-fontSize);color:var(--ibiz-rawitem-color-rawitem-color)}.ibiz-rawitem__video video{width:100%}.ibiz-rawitem .ibiz-icon{width:100%;height:100%}.ibiz-rawitem.ibiz-rawitem--error,.ibiz-rawitem.ibiz-rawitem--info,.ibiz-rawitem.ibiz-rawitem--warning{padding:var(--ibiz-rawitem-spacing-view-message-padding)}

package/lib/common/split/split.cjs

@@ -0,0 +1,189 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./split.css');
+
+"use strict";
+const IBizSplit = /* @__PURE__ */ vue.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 = vue3Util.useNamespace("split");
+    const outerWrapper = vue.ref(null);
+    const offset = vue.ref(0);
+    const oldOffset = vue.ref(0);
+    const isMoving = vue.ref(false);
+    const computedMin = vue.ref(0);
+    const computedMax = vue.ref(0);
+    const currentValue = vue.ref(0.5);
+    const initOffset = vue.ref(0);
+    const wrapperClasses = vue.computed(() => [ns.b("wrapper"), ns.is("no-select", isMoving.value)]);
+    const paneClasses = vue.computed(() => [ns.b("pane"), isMoving.value ? ns.bm("pane", "moving") : ""]);
+    const isHorizontal = vue.computed(() => props.mode === "horizontal");
+    const anotherOffset = vue.computed(() => 100 - offset.value);
+    const valueIsPx = vue.computed(() => typeof props.modelValue === "string");
+    const offsetSize = vue.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 = () => {
+      vue.nextTick(() => {
+        computedMin.value = getComputedThresholdValue("min");
+        computedMax.value = getComputedThresholdValue("max");
+        offset.value = (valueIsPx.value ? px2percent(props.modelValue, outerWrapper.value[offsetSize.value]) : props.modelValue) * 1e4 / 100;
+      });
+    };
+    vue.watch(() => props.modelValue, (val) => {
+      if (val !== currentValue.value) {
+        currentValue.value = val;
+        computeOffset();
+      }
+    });
+    vue.onMounted(() => {
+      vue.nextTick(() => {
+        computeOffset();
+      });
+      document.addEventListener("pointermove", handleMove);
+      document.addEventListener("pointerup", handleUp);
+      document.addEventListener("pointercancel", handleUp);
+      window.addEventListener("resize", computeOffset);
+    });
+    vue.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 vue.createVNode("div", {
+      "class": this.wrapperClasses,
+      "ref": "outerWrapper"
+    }, [this.isHorizontal ? vue.createVNode("div", {
+      "class": this.ns.m("horizontal")
+    }, [vue.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)]), vue.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)) || vue.createVNode(vue.resolveComponent("iBizSplitTrigger"), {
+      "mode": "vertical"
+    }, null)]), vue.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)])]) : vue.createVNode("div", {
+      "class": this.ns.m("vertical")
+    }, [vue.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)]), vue.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)) || vue.createVNode(vue.resolveComponent("iBizSplitTrigger"), {
+      "mode": "horizontal"
+    }, null)]), vue.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)])])]);
+  }
+});
+
+exports.IBizSplit = IBizSplit;

package/lib/common/split/split.css

@@ -0,0 +1 @@
+.ibiz-split-wrapper{--ibiz-split-wrapper-width-trigger-width:0.375rem;position:relative;width:100%;height:100%}.ibiz-split-wrapper.is-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ibiz-split-pane{position:absolute}.ibiz-split-pane--left{top:0;bottom:0;left:0;overflow:hidden}.ibiz-split-pane--right{top:0;right:0;bottom:0;overflow:hidden}.ibiz-split-pane--top{top:0;right:0;left:0;overflow:hidden}.ibiz-split-pane--bottom{right:0;bottom:0;left:0;overflow:hidden}.ibiz-split-pane--moving{-webkit-user-select:none;-moz-user-select:none;user-select:none}.ibiz-split-trigger-con{position:absolute;z-index:10;width:var(--ibiz-split-wrapper-width-trigger-width);transform:translate(-50%,-50%);touch-action:none}.ibiz-split--horizontal{display:flex;height:100%}.ibiz-split--horizontal .ibiz-split-trigger-con{top:50%;height:100%}.ibiz-split--horizontal .ibiz-split-pane{position:unset}.ibiz-split--horizontal .ibiz-split-pane--right{padding-left:var(--ibiz-split-wrapper-width-trigger-width)}.ibiz-split--vertical .ibiz-split-trigger-con{left:50%;width:100%;height:0}.ibiz-split--vertical .ibiz-split-pane{position:absolute}.ibiz-split--vertical .ibiz-split-pane--bottom{padding-top:var(--ibiz-split-wrapper-width-trigger-width)}.ibiz-split--vertical .ibiz-split--horizontal .ibiz-split-trigger-con{top:50%;height:100%}.ibiz-split--vertical .ibiz-split--horizontal .ibiz-split-pane{position:unset}.ibiz-split--vertical .ibiz-split--horizontal .ibiz-split-pane--right{padding-left:var(--ibiz-split-wrapper-width-trigger-width)}.ibiz-split--horizontal .ibiz-split--vertical .ibiz-split-trigger-con{left:50%;width:100%;height:0}.ibiz-split--horizontal .ibiz-split--vertical .ibiz-split-pane{position:absolute}.ibiz-split--horizontal .ibiz-split--vertical .ibiz-split-pane--bottom{padding-top:var(--ibiz-split-wrapper-width-trigger-width)}

package/lib/common/split-trigger/split-trigger.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./split-trigger.css');
+
+"use strict";
+const IBizSplitTrigger = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizSplitTrigger",
+  props: {
+    mode: String
+  },
+  setup(prop) {
+    const ns = vue3Util.useNamespace("split-trigger");
+    const isVertical = vue.computed(() => prop.mode === "vertical");
+    const classes = vue.computed(() => [ns.b(), isVertical.value ? ns.m("vertical") : ns.m("horizontal")]);
+    const barConClasses = vue.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 vue.createVNode("div", {
+      "class": this.classes
+    }, [vue.createVNode("div", {
+      "class": this.barConClasses
+    }, [this.items.map((_item, i) => vue.createVNode("i", {
+      "class": this.ns.b("bar"),
+      "key": `trigger-${i}`
+    }, null))])]);
+  }
+});
+
+exports.IBizSplitTrigger = IBizSplitTrigger;

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

@@ -0,0 +1 @@
+.ibiz-split-trigger{--ibiz-split-trigger-color-trigger-bar-background:var(--ibiz-color-border);--ibiz-split-trigger-width-trigger-width:0.375rem;--ibiz-split-trigger-width-trigger-bar-width:0.25rem;--ibiz-split-trigger-height-split-trigger-bar:0.0625rem;--ibiz-split-trigger-width-split-trigger-bar:0.0625rem;--ibiz-split-trigger-trigger-bar-offset:calc(var(width-trigger-width) - var(width-trigger-bar-width) / 2);--ibiz-split-trigger-spacing-trigger-bar-interval:0.1875rem;--ibiz-split-trigger-spacing-trigger-bar-weight:0.0625rem;--ibiz-split-trigger-height-trigger-bar-con-height:calc(var(spacing-trigger-bar-weight) + var(spacing-trigger-bar-interval) * 8);--ibiz-split-trigger-border-split-trigger:0.0625rem solid var(--ibiz-color-border);border:var(--ibiz-split-trigger-border-split-trigger)}.ibiz-split-trigger--vertical{width:var(--ibiz-split-trigger-width-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-width-trigger-bar-width);height:var(--ibiz-split-trigger-height-split-trigger-bar);margin-top:var(--ibiz-split-trigger-spacing-trigger-bar-interval);background:var(--ibiz-split-trigger-color-trigger-bar-background)}.ibiz-split-trigger--horizontal{width:100%;height:var(--ibiz-split-trigger-width-trigger-width);cursor:row-resize;border-right:none;border-left:none}.ibiz-split-trigger--horizontal .ibiz-split-trigger-bar{float:left;width:var(--ibiz-split-trigger-width-split-trigger-bar);height:var(--ibiz-split-trigger-width-trigger-bar-width);margin-right:var(--ibiz-split-trigger-spacing-trigger-bar-interval);background:var(--ibiz-split-trigger-color-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-height-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-height-trigger-bar-con-height);transform:translate(-50%,0)}

package/lib/common/tab-layout/tab-default-layout/tab-default-layout.cjs

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

package/lib/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-tab-item:3.125rem;--ibiz-tab-default-layout-font-tab-fontSize:var(--ibiz-tab-layout-font-tab-font-size)}.ibiz-tab-default-layout__tab-item{font-size:var(--ibiz-tab-default-layout-font-tab-fontSize)}.ibiz-tab-default-layout.is-top .van-tabs--line .van-tabs__wrap{height:var(--ibiz-tab-default-layout-height-tab-item)}.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-tab-item);border-top:1px solid var(--ibiz-tab-default-layout-color-border)}.ibiz-tab-default-layout.is-bottom .van-tabs__line{display:none}

package/lib/common/tab-layout/tab-dropdown/tab-dropdown-list-content.cjs

@@ -0,0 +1,66 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var tabLayoutUtil = require('../tab-layout-util.cjs');
+require('./tab-dropdown-list-content.css');
+
+"use strict";
+const TabDropdownListContent = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizTabDropdownListContent",
+  props: {
+    modal: {
+      type: Object
+    },
+    ...tabLayoutUtil.layoutProps
+  },
+  setup(props) {
+    const ns = vue3Util.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 vue.createVNode("div", {
+      "class": [this.ns.b()],
+      "onClick": this.handleClick
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("modal"),
+      "onClick": this.handleClose
+    }, null), vue.createVNode("div", {
+      "class": this.ns.e("wrapper")
+    }, [this.tabPages.map((tab) => {
+      if (tab.isHidden)
+        return;
+      return vue.createVNode("div", {
+        "class": [this.ns.e("item"), this.ns.is("active", tab.id === this.activeName)],
+        "onClick": () => this.handleItemClick(tab.id)
+      }, [vue.createVNode(vue.resolveComponent("iBizInfoItem"), {
+        "label": tab.text,
+        "icon": tab.icon
+      }, null)]);
+    })])]);
+  }
+});
+
+exports.TabDropdownListContent = TabDropdownListContent;

package/lib/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-list-content: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-fontSize:var(--ibiz-tab-dropdown-font-tab-fontSize);--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-list-content);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-tab-dropdown-list-content-box-shadow)}.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-fontSize);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/lib/common/tab-layout/tab-dropdown/tab-dropdown.cjs

@@ -0,0 +1,82 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var tabLayoutUtil = require('../tab-layout-util.cjs');
+var tabDropdownListContent = require('./tab-dropdown-list-content.cjs');
+require('./tab-dropdown.css');
+
+"use strict";
+const TabDropdown = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizTabDropdown",
+  props: tabLayoutUtil.layoutProps,
+  emits: tabLayoutUtil.layoutEmits,
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("tab-dropdown");
+    const tabDropdownRef = vue.ref();
+    const activeTab = vue.computed(() => {
+      return props.tabPages.find((tab) => tab.id === props.activeName);
+    });
+    const {
+      onTabChange
+    } = tabLayoutUtil.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 vue.h(tabDropdownListContent.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 vue.createVNode(vue.resolveComponent("iBizFloatButton"), {
+      "ref": "tabDropdownRef",
+      "class": this.ns.b(),
+      "align": "RIGHTSTART",
+      "onClick": this.onFloatBtnClick
+    }, {
+      default: () => {
+        var _a, _b;
+        return [vue.createVNode(vue.resolveComponent("iBizInfoItem"), {
+          "label": (_a = this.activeTab) == null ? void 0 : _a.text,
+          "icon": (_b = this.activeTab) == null ? void 0 : _b.icon
+        }, null)];
+      }
+    });
+  }
+});
+
+exports.TabDropdown = TabDropdown;

package/lib/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-tab-fontSize:var(--ibiz-tab-layout-font-tab-fontSize)}.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-tab-fontSize:var(--ibiz-tab-layout-font-tab-fontSize);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-tab-fontSize);--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}