@ibiz-template/vue3-components 0.7.38-alpha.12 → 0.7.38-alpha.21

package/es/common/gantt-setting/gantt-setting.d.ts

@@ -0,0 +1,53 @@
+import { PropType } from 'vue';
+import { IModal, IColumnState } from '@ibiz-template/runtime';
+import './gantt-setting.scss';
+type ListType = 'optional' | 'selected';
+export declare const IBizGanttSetting: import("vue").DefineComponent<{
+    modal: {
+        type: PropType<IModal>;
+        required: true;
+    };
+    columnStates: {
+        type: PropType<IColumnState[]>;
+        required: true;
+    };
+    mustShowColumns: {
+        type: PropType<string[]>;
+        required: true;
+        default: () => string[];
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    optionalInput: import("vue").Ref<string>;
+    selectedInput: import("vue").Ref<string>;
+    states: import("vue").Ref<{
+        key: string;
+        caption: string;
+        hidden: boolean;
+        hideMode: number;
+        uaColumn: boolean;
+        fixed?: "left" | "right" | undefined;
+        adaptive?: boolean | undefined;
+    }[]>;
+    renderSearchList: (listData?: IColumnState[], type?: ListType) => JSX.Element;
+    onClose: () => void;
+    onConfirm: () => void;
+    onResultDefault: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modal: {
+        type: PropType<IModal>;
+        required: true;
+    };
+    columnStates: {
+        type: PropType<IColumnState[]>;
+        required: true;
+    };
+    mustShowColumns: {
+        type: PropType<string[]>;
+        required: true;
+        default: () => string[];
+    };
+}>> & {}, {
+    mustShowColumns: string[];
+}, {}>;
+export {};

package/es/common/gantt-setting/gantt-setting.mjs

@@ -0,0 +1,217 @@
+import { isVNode, createVNode, defineComponent, ref, watch, resolveComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { clone } from 'ramda';
+import './gantt-setting.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const selectedIcon = () => createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "height": "1em",
+  "width": "1em",
+  "focusable": "false"
+}, [createVNode("g", {
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [createVNode("path", {
+  "d": "M6.012 11.201L1.313 6.832l-.817.879 5.54 5.15 9.304-9.163-.842-.855z"
+}, null)])]);
+const closeIcon = () => createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "height": "1em",
+  "width": "1em",
+  "focusable": "false"
+}, [createVNode("g", {
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [createVNode("path", {
+  "d": "M7.456 7.456V-.115h1.2v7.571h7.572v1.2H8.656v7.572h-1.2V8.656H-.115v-1.2h7.571z",
+  "transform": "rotate(45 8.056 8.056)"
+}, null)])]);
+const searchIcon = () => createVNode("svg", {
+  "viewBox": "0 0 16 16",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "height": "1em",
+  "width": "1em",
+  "focusable": "false"
+}, [createVNode("g", {
+  "stroke-width": "1",
+  "fill-rule": "evenodd"
+}, [createVNode("path", {
+  "d": "M6.751 12.303A5.557 5.557 0 0 1 1.2 6.751C1.2 3.691 3.69 1.2 6.751 1.2a5.558 5.558 0 0 1 5.551 5.551 5.557 5.557 0 0 1-5.551 5.552M6.751 0a6.751 6.751 0 1 0 4.309 11.949l3.855 3.855a.6.6 0 1 0 .849-.849l-3.854-3.853A6.751 6.751 0 0 0 6.751 0"
+}, null)])]);
+const IBizGanttSetting = /* @__PURE__ */ defineComponent({
+  name: "IBizGanttSetting",
+  props: {
+    modal: {
+      type: Object,
+      required: true
+    },
+    // 表格列状态数组
+    columnStates: {
+      type: Object,
+      required: true
+    },
+    // 必须显示的列
+    mustShowColumns: {
+      type: Array,
+      required: true,
+      default: () => ["sn", "name"]
+    }
+  },
+  emits: [],
+  setup(props) {
+    const ns = useNamespace("gantt-setting");
+    const optionalInput = ref("");
+    const selectedInput = ref("");
+    const states = ref([]);
+    const calcMustShowColumn = (item) => {
+      return props.mustShowColumns.some((item2) => item.key === item2);
+    };
+    const initData = () => {
+      states.value = clone(props.columnStates);
+    };
+    watch(() => props.columnStates, () => {
+      initData();
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const onListItemClose = (e, item) => {
+      e.stopPropagation();
+      Object.assign(item, {
+        hidden: !item.hidden
+      });
+    };
+    const onListItemClick = (item) => {
+      Object.assign(item, {
+        hidden: !item.hidden
+      });
+    };
+    const onClose = () => {
+      props.modal.dismiss();
+    };
+    const onConfirm = () => {
+      const modalData = {
+        ok: true,
+        data: states.value
+      };
+      props.modal.dismiss(modalData);
+    };
+    const onResultDefault = () => {
+      initData();
+    };
+    const renderLeftSearch = () => {
+      return createVNode(resolveComponent("el-input"), {
+        "placeholder": ibiz.i18n.t("app.search"),
+        "modelValue": optionalInput.value,
+        "onUpdate:modelValue": ($event) => optionalInput.value = $event,
+        "clearable": true
+      }, {
+        prefix: () => searchIcon()
+      });
+    };
+    const renderRightSearch = () => {
+      return createVNode(resolveComponent("el-input"), {
+        "placeholder": ibiz.i18n.t("app.search"),
+        "modelValue": selectedInput.value,
+        "onUpdate:modelValue": ($event) => selectedInput.value = $event,
+        "clearable": true
+      }, {
+        prefix: () => searchIcon()
+      });
+    };
+    const renderListItem = (item, type = "optional") => {
+      const caption = item.caption || "";
+      const isOptional = type === "optional";
+      const isMust = calcMustShowColumn(item);
+      if (!isOptional && item.hidden && !isMust) {
+        return null;
+      }
+      const isSelectedShow = isOptional && states.value.some((item2) => item.key === item2.key && !item.hidden);
+      return createVNode("div", {
+        "class": [ns.b("list-item"), ns.is("disabled", isMust && isOptional)],
+        "onClick": () => isOptional && !isMust && onListItemClick(item)
+      }, [createVNode("div", {
+        "class": ns.be("list-item", "caption")
+      }, [caption]), createVNode("div", {
+        "class": [ns.be("list-item", "end-icon")]
+      }, [(isSelectedShow || isOptional && isMust) && selectedIcon(), !isOptional && !isMust && createVNode("div", {
+        "class": ns.bem("list-item", "end-icon", "close"),
+        "onClick": (e) => onListItemClose(e, item)
+      }, [closeIcon()])])]);
+    };
+    const renderSearchList = (listData = [], type = "optional") => {
+      const isOptional = type === "optional";
+      const searchVal = isOptional ? optionalInput.value : selectedInput.value;
+      const values = [];
+      listData.forEach((item) => {
+        var _a;
+        return ((_a = item.caption) == null ? void 0 : _a.includes(searchVal)) && values.push(item);
+      });
+      const lengthNum = isOptional ? values.length : listData.filter((item) => !item.hidden).length;
+      const caption = isOptional ? ibiz.i18n.t("component.ganttSetting.optionalAttribute") : ibiz.i18n.t("component.ganttSetting.selectedAttribute");
+      return createVNode("div", {
+        "class": ns.b("search-list")
+      }, [createVNode("div", {
+        "class": ns.be("search-list", "caption")
+      }, ["".concat(caption, " \xB7 ").concat(lengthNum)]), createVNode("div", {
+        "class": ns.be("search-list", "content")
+      }, [createVNode("div", {
+        "class": ns.be("search-list", "search")
+      }, [isOptional ? renderLeftSearch() : renderRightSearch()]), createVNode("div", {
+        "class": ns.be("search-list", "list")
+      }, [values.map((item) => {
+        return renderListItem(item, type);
+      })])])]);
+    };
+    return {
+      ns,
+      optionalInput,
+      selectedInput,
+      states,
+      renderSearchList,
+      onClose,
+      onConfirm,
+      onResultDefault
+    };
+  },
+  render() {
+    let _slot, _slot2, _slot3;
+    return createVNode("div", {
+      "class": [this.ns.b()]
+    }, [createVNode("div", {
+      "class": [this.ns.e("header")]
+    }, [ibiz.i18n.t("component.ganttSetting.headerCaption")]), createVNode("div", {
+      "class": [this.ns.e("content")]
+    }, [createVNode("div", {
+      "class": [this.ns.em("content", "optional")]
+    }, [this.renderSearchList(this.states, "optional")]), createVNode("div", {
+      "class": [this.ns.em("content", "selected")]
+    }, [this.renderSearchList(this.states, "selected")])]), createVNode("div", {
+      "class": [this.ns.e("bottom")]
+    }, [createVNode(resolveComponent("el-button"), {
+      "type": "text",
+      "onClick": this.onResultDefault
+    }, _isSlot(_slot = ibiz.i18n.t("component.ganttSetting.resultDefault")) ? _slot : {
+      default: () => [_slot]
+    }), createVNode("div", {
+      "class": [this.ns.em("bottom", "btn-right")]
+    }, [createVNode(resolveComponent("el-button"), {
+      "type": "text",
+      "onClick": this.onClose
+    }, _isSlot(_slot2 = ibiz.i18n.t("app.cancel")) ? _slot2 : {
+      default: () => [_slot2]
+    }), createVNode(resolveComponent("el-button"), {
+      "onClick": this.onConfirm
+    }, _isSlot(_slot3 = ibiz.i18n.t("app.confirm")) ? _slot3 : {
+      default: () => [_slot3]
+    })])])]);
+  }
+});
+
+export { IBizGanttSetting };

package/es/common/grid-setting/grid-setting.css

@@ -1 +1 @@
-.ibiz-grid-setting-column-states{width:100%;max-height:500px;overflow-y:auto}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state{display:flex;align-items:center;justify-content:flex-start;width:100%;padding:var(--ibiz-spacing-extra-tight) 0;font-size:var(--ibiz-font-size-regular);cursor:pointer}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state ion-icon{display:inline-block;width:var(--ibiz-font-size-small);margin-right:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-regular)}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state .ibiz-grid-setting-drag-icon{color:var(--ibiz-color-text)}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state .ibiz-grid-setting-enable-icon{color:var(--ibiz-color-success)}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state .ibiz-grid-setting-disable-icon{display:none;color:var(--ibiz-color-danger)}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state .ibiz-grid-setting-state-caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state.is-disabled .ibiz-grid-setting-enable-icon{display:none}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state.is-disabled .ibiz-grid-setting-disable-icon{display:block}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state.is-disabled .ibiz-grid-setting-state-caption{color:var(--ibiz-color-disabled-text)}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state-ghost{background-color:var(--ibiz-color-primary-light-default);opacity:.5}.ibiz-grid-setting-set-icon{color:var(--ibiz-color-primary);cursor:pointer}
+.ibiz-grid-setting-column-states{width:100%;max-height:500px;overflow-y:auto}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state{display:flex;align-items:center;justify-content:flex-start;width:100%;padding:var(--ibiz-spacing-extra-tight) 0;font-size:var(--ibiz-font-size-regular);cursor:pointer}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state ion-icon{display:inline-block;width:var(--ibiz-font-size-small);margin-right:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-font-size-regular)}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state .ibiz-grid-setting-drag-icon{color:var(--ibiz-color-text)}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state .ibiz-grid-setting-enable-icon{color:var(--ibiz-color-success)}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state .ibiz-grid-setting-disable-icon{display:none;color:var(--ibiz-color-danger)}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state .ibiz-grid-setting-state-caption{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state.is-disabled .ibiz-grid-setting-enable-icon{display:none}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state.is-disabled .ibiz-grid-setting-disable-icon{display:block}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state.is-disabled .ibiz-grid-setting-state-caption{color:var(--ibiz-color-disabled-text)}.ibiz-grid-setting-column-states .ibiz-grid-setting-column-state-ghost{background-color:var(--ibiz-color-primary-light-default);opacity:.5}.ibiz-grid-setting-set-icon{color:var(--ibiz-color-primary);cursor:pointer}.ibiz-grid-setting__nav-icon{cursor:pointer;color:var(--ibiz-color-primary);padding-left:var(--ibiz-spacing-tight)}

package/es/common/grid-setting/grid-setting.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
-import './grid-setting.scss';
 import { GridController, IColumnState } from '@ibiz-template/runtime';
+import './grid-setting.scss';
 export declare const IBizGridSetting: import("vue").DefineComponent<{
     columnStates: {
         type: PropType<IColumnState[]>;
@@ -25,6 +25,7 @@ export declare const IBizGridSetting: import("vue").DefineComponent<{
     isDraggable: import("vue").ComputedRef<boolean>;
     handleClick: (dragColumnState: IColumnState) => void;
     onDragChange: (evt: IData) => Promise<void>;
+    onShowNavView: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     columnStates: {
         type: PropType<IColumnState[]>;

package/es/common/grid-setting/grid-setting.mjs

@@ -1,8 +1,8 @@
 import { defineComponent, computed, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
-import './grid-setting.css';
 import draggable from 'vuedraggable';
 import { showTitle } from '@ibiz-template/core';
+import './grid-setting.css';
 
 "use strict";
 const IBizGridSetting = /* @__PURE__ */ defineComponent({
@@ -49,17 +49,23 @@ const IBizGridSetting = /* @__PURE__ */ defineComponent({
         c.changeColumnStateSort(movedDragColumnState.key, newIndex, oldIndex);
       }
     };
+    const onShowNavView = () => {
+      c.state.showNavView = !c.state.showNavView;
+    };
     return {
       ns,
       c,
       dragColumnStates,
       isDraggable,
       handleClick,
-      onDragChange
+      onDragChange,
+      onShowNavView
     };
   },
   render() {
-    return createVNode(resolveComponent("el-popover"), {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(resolveComponent("el-popover"), {
       "placement": "right-start",
       "trigger": "click",
       "width": "auto"
@@ -115,7 +121,17 @@ const IBizGridSetting = /* @__PURE__ */ defineComponent({
           }
         });
       }
-    });
+    }), this.c.state.enableNavView ? !this.c.state.showNavView ? createVNode("ion-icon", {
+      "class": this.ns.e("nav-icon"),
+      "title": ibiz.i18n.t("component.controlNavigation.showNav"),
+      "name": "eye-outline",
+      "onClick": this.onShowNavView
+    }, null) : createVNode("ion-icon", {
+      "class": this.ns.e("nav-icon"),
+      "title": ibiz.i18n.t("component.controlNavigation.hiddenNav"),
+      "name": "eye-off-outline",
+      "onClick": this.onShowNavView
+    }, null) : null]);
   }
 });
 

package/es/common/index.mjs

@@ -28,6 +28,9 @@ import { IBizPqlEditor } from './pql-editor/pql-editor.mjs';
 import { IBizCustomFilterCondition } from './custom-filter-condition/custom-filter-condition.mjs';
 import { IBizAnchorContainer } from './anchor-container/anchor-container.mjs';
 import { IBizButtonList } from './button-list/button-list.mjs';
+import { IBizControlNavigation } from './control-navigation/control-navigation.mjs';
+import { IBizGanttSetting } from './gantt-setting/gantt-setting.mjs';
+import { IBizNavSplit } from './nav-split/nav-split.mjs';
 
 "use strict";
 const IBizCommonComponents = {
@@ -73,6 +76,9 @@ const IBizCommonComponents = {
     v.component(IBizCustomFilterCondition.name, IBizCustomFilterCondition);
     v.component(IBizAnchorContainer.name, IBizAnchorContainer);
     v.component(IBizButtonList.name, IBizButtonList);
+    v.component(IBizControlNavigation.name, IBizControlNavigation);
+    v.component(IBizGanttSetting.name, IBizGanttSetting);
+    v.component(IBizNavSplit.name, IBizNavSplit);
   }
 };
 

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

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

package/es/common/nav-split/nav-split.d.ts

@@ -0,0 +1,57 @@
+import { Ref } from 'vue';
+import './nav-split.scss';
+export declare const IBizNavSplit: import("vue").DefineComponent<{
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    mode: {
+        validator: (value: string) => boolean;
+        default: string;
+    };
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    outerWrapper: Ref<HTMLDivElement | null>;
+    offset: Ref<number>;
+    wrapperClasses: import("vue").ComputedRef<string[]>;
+    paneClasses: import("vue").ComputedRef<string[]>;
+    isHorizontal: import("vue").ComputedRef<boolean>;
+    anotherOffset: import("vue").ComputedRef<number>;
+    handleMousedown: (e: MouseEvent) => void;
+    handleMove: (e: MouseEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "on-move-start" | "on-moving" | "on-move-end")[], "update:modelValue" | "on-move-start" | "on-moving" | "on-move-end", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    mode: {
+        validator: (value: string) => boolean;
+        default: string;
+    };
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    max: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onOn-move-start"?: ((...args: any[]) => any) | undefined;
+    "onOn-moving"?: ((...args: any[]) => any) | undefined;
+    "onOn-move-end"?: ((...args: any[]) => any) | undefined;
+}, {
+    mode: string;
+    modelValue: string | number;
+    max: string | number;
+    min: string | number;
+}, {}>;

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

@@ -0,0 +1,209 @@
+import { defineComponent, ref, computed, nextTick, watch, onMounted, onBeforeUnmount, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './nav-split.css';
+
+"use strict";
+const IBizNavSplit = /* @__PURE__ */ defineComponent({
+  name: "IBizNavSplit",
+  props: {
+    modelValue: {
+      type: [Number, String],
+      default: 0.5
+    },
+    mode: {
+      validator: (value) => {
+        return ["horizontal", "vertical"].includes(value);
+      },
+      default: "horizontal"
+    },
+    min: {
+      type: [Number, String],
+      default: 0.2
+    },
+    max: {
+      type: [Number, String],
+      default: 0.8
+    }
+  },
+  emits: ["update:modelValue", "on-move-start", "on-moving", "on-move-end"],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("nav-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 "".concat(Math.max(parseFloat(value1), parseFloat(value2)), "px");
+      return Math.max(value1, value2);
+    };
+    const getMin = (value1, value2) => {
+      if (valueIsPx.value)
+        return "".concat(Math.min(parseFloat(value1), parseFloat(value2)), "px");
+      return Math.min(value1, value2);
+    };
+    const getAnotherOffset = (value) => {
+      let res = 0;
+      if (valueIsPx.value)
+        res = "".concat(outerWrapper.value[offsetSize.value] - parseFloat(value), "px");
+      else
+        res = 1 - value;
+      return res;
+    };
+    const handleMove = (e) => {
+      const pageOffset = isHorizontal.value ? e.pageX : e.pageY;
+      const moveOffset = pageOffset - initOffset.value;
+      const outerWidth = outerWrapper.value[offsetSize.value];
+      let value = valueIsPx.value ? "".concat(parseFloat(oldOffset.value) + moveOffset, "px") : px2percent(outerWidth * oldOffset.value + moveOffset, outerWidth);
+      const anotherValue = getAnotherOffset(value);
+      if (parseFloat(anotherValue) > parseFloat(computedMax.value)) {
+        value = getAnotherOffset(getMin(anotherValue, computedMax.value));
+      }
+      if (parseFloat(anotherValue) <= parseFloat(computedMin.value)) {
+        value = getAnotherOffset(getMax(anotherValue, computedMin.value));
+      }
+      Object.assign(e, {
+        atMin: props.modelValue === computedMin.value,
+        atMax: valueIsPx.value ? getAnotherOffset(props.modelValue) === computedMax.value : getAnotherOffset(props.modelValue).toFixed(5) === computedMax.value.toFixed(5)
+      });
+      emit("update:modelValue", value);
+      emit("on-moving", e);
+    };
+    const handleUp = () => {
+      isMoving.value = false;
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("mouseup", handleUp);
+      emit("on-move-end");
+    };
+    const handleMousedown = (e) => {
+      initOffset.value = isHorizontal.value ? e.pageX : e.pageY;
+      oldOffset.value = props.modelValue;
+      isMoving.value = true;
+      document.addEventListener("mousemove", handleMove);
+      document.addEventListener("mouseup", handleUp);
+      emit("on-move-start");
+    };
+    const computeOffset = () => {
+      nextTick(() => {
+        computedMin.value = getComputedThresholdValue("min");
+        computedMax.value = getComputedThresholdValue("max");
+        const denominator = outerWrapper.value[offsetSize.value];
+        const outerWrapperValue = parseFloat(denominator);
+        const defaultValue = (valueIsPx.value ? px2percent(props.modelValue, outerWrapperValue) : props.modelValue) * 1e4 / 100;
+        const reverseValue = defaultValue * 100 / 1e4 * outerWrapperValue;
+        const diffValue = outerWrapperValue - reverseValue;
+        const maxValue = parseFloat(computedMax.value);
+        const minValue = parseFloat(computedMin.value);
+        if (Math.round(diffValue) >= minValue && Math.round(diffValue) <= maxValue) {
+          offset.value = defaultValue;
+        } else if (Math.round(diffValue) < minValue) {
+          const leftWidth = outerWrapperValue - minValue;
+          offset.value = leftWidth / outerWrapperValue * 1e4 / 100;
+          emit("update:modelValue", "".concat(leftWidth, "px"));
+        } else {
+          const leftWidth = outerWrapperValue - maxValue;
+          offset.value = leftWidth / outerWrapperValue * 1e4 / 100;
+          emit("update:modelValue", "".concat(leftWidth, "px"));
+        }
+      });
+    };
+    watch(() => props.modelValue, (val) => {
+      console.log("props.modelValue", val);
+      if (val !== currentValue.value) {
+        currentValue.value = val;
+        computeOffset();
+      }
+    });
+    onMounted(() => {
+      nextTick(() => {
+        computeOffset();
+      });
+      window.addEventListener("resize", computeOffset);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", computeOffset);
+    });
+    return {
+      ns,
+      outerWrapper,
+      offset,
+      wrapperClasses,
+      paneClasses,
+      isHorizontal,
+      anotherOffset,
+      handleMousedown,
+      handleMove
+    };
+  },
+  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: "".concat(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: "".concat(this.offset, "%")
+      },
+      "class": this.ns.b("trigger-con"),
+      "onMousedown": (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: "".concat(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: "".concat(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: "".concat(this.offset, "%")
+      },
+      "class": this.ns.b("trigger-con"),
+      "onMousedown": (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: "".concat(this.offset, "%")
+      },
+      "class": [this.paneClasses, this.ns.bm("pane", "bottom")]
+    }, [(_l = (_k = this.$slots).bottom) == null ? void 0 : _l.call(_k)])])]);
+  }
+});
+
+export { IBizNavSplit };