@ibiz-template/vue3-components 0.4.8-dev.0 → 0.4.8

package/es/common/rawitem/rawitem.mjs

@@ -0,0 +1,251 @@
+import { ref, watch, resolveComponent, createVNode, createTextVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { createUUID } from 'qx-util';
+import './rawitem.css';
+
+"use strict";
+const IBizRawItem = /* @__PURE__ */ defineComponent({
+  name: "IBizRawItem",
+  props: {
+    type: {
+      type: String,
+      required: false
+    },
+    content: {
+      type: [String, Object, Number]
+    },
+    rawItem: {
+      type: Object,
+      required: false
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("rawitem");
+    let rawItem = null;
+    let contentType = "";
+    if (props.rawItem) {
+      rawItem = props.rawItem.rawItem;
+      contentType = rawItem.contentType;
+    }
+    const rawItemType = ref(props.type || contentType || "");
+    const rawItemContent = ref("");
+    let sysImage = null;
+    if (contentType === "IMAGE") {
+      sysImage = rawItem.sysImage;
+    }
+    if (contentType === "RAW" || contentType === "HTML") {
+      if (contentType === "RAW") {
+        rawItemType.value = "TEXT";
+        rawItemContent.value = rawItem.caption;
+      } else {
+        rawItemContent.value = rawItem.content;
+      }
+    } else if (["VIDEO", "DIVIDER", "INFO", "WARNING", "ERROR"].includes(contentType)) {
+    } else if (contentType === "IMAGE" && sysImage) {
+      rawItemContent.value = sysImage;
+    }
+    const isImg = (imgUrl) => {
+      const reg = /^https?:|^http?:|(\.png|\.svg|\.jpg|\.png|\.gif|\.psd|\.tif|\.bmp|\.jpeg)/;
+      return reg.test(imgUrl);
+    };
+    const playerParams = ref({
+      id: createUUID(),
+      path: "",
+      mute: true,
+      autoplay: true,
+      replay: false,
+      showcontrols: true
+    });
+    const dividerParams = ref({
+      contentPosition: "center",
+      html: ""
+    });
+    const alertParams = ref({
+      type: "info",
+      title: "",
+      closeabled: true,
+      showIcon: false
+    });
+    const rawItemText = ref("");
+    const convertValue = () => {
+      if (rawItemType.value === "IMAGE") {
+        if (typeof props.content === "string") {
+          if (isImg(props.content)) {
+            rawItemContent.value = {
+              imagePath: props.content
+            };
+          } else {
+            rawItemContent.value = {
+              cssClass: props.content
+            };
+          }
+        }
+      }
+      if (["TEXT", "HEADING1", "HEADING2", "HEADING3", "HEADING4", "HEADING5", "HEADING6", "PARAGRAPH", "HTML", "RAW"].includes(rawItemType.value)) {
+        rawItemText.value = rawItemContent.value;
+        if (typeof rawItemText.value === "string") {
+          rawItemText.value = rawItemText.value.replaceAll("&lt;", "<");
+          rawItemText.value = rawItemText.value.replaceAll("&gt;", ">");
+          rawItemText.value = rawItemText.value.replaceAll("&amp;nbsp;", " ");
+          rawItemText.value = rawItemText.value.replaceAll("&nbsp;", " ");
+        }
+      }
+      if (["VIDEO", "DIVIDER", "INFO", "WARNING", "ERROR"].includes(rawItemType.value)) {
+        if (rawItemContent.value) {
+          let rawConfig = {};
+          try {
+            if (typeof rawItemContent.value === "string") {
+              const func = new Function(`return (${rawItemContent.value});`);
+              rawConfig = func();
+              switch (rawItemType.value) {
+                case "VIDEO":
+                  Object.assign(playerParams.value, rawConfig);
+                  break;
+                case "DIVIDER":
+                  Object.assign(dividerParams.value, rawConfig);
+                  break;
+                case "INFO":
+                case "WARNING":
+                case "ERROR":
+                  alertParams.value.type = rawItemType.value.toLocaleLowerCase();
+                  Object.assign(alertParams.value, rawConfig);
+                  break;
+                default:
+                  break;
+              }
+            }
+          } catch (e) {
+            ibiz.log.error(`${rawItemType.value}\u7C7B\u578B\u81EA\u5B9A\u4E49\u53C2\u6570\u914D\u7F6E\u9519\u8BEF`);
+          }
+        }
+      }
+    };
+    convertValue();
+    watch(() => props.content, (newVal, oldVal) => {
+      if (newVal !== oldVal) {
+        rawItemContent.value = newVal;
+        convertValue();
+      }
+    }, {
+      immediate: true
+    });
+    return {
+      ns,
+      rawItemText,
+      playerParams,
+      dividerParams,
+      alertParams,
+      rawItemType,
+      rawItemContent
+    };
+  },
+  render() {
+    const renderContent = () => {
+      if (this.rawItemType === "IMAGE") {
+        return createVNode(resolveComponent("i-biz-icon"), {
+          "class": [this.ns.e("image")],
+          "icon": this.rawItemContent
+        }, null);
+      }
+      if (this.rawItemType === "TEXT" || this.rawItemType === "RAW") {
+        return createVNode("span", {
+          "class": this.ns.e("text")
+        }, [this.rawItemText]);
+      }
+      if (this.rawItemType === "HEADING1") {
+        return createVNode("h1", {
+          "class": this.ns.e("h1")
+        }, [this.rawItemText]);
+      }
+      if (this.rawItemType === "HEADING2") {
+        return createVNode("h2", {
+          "class": this.ns.e("h2")
+        }, [this.rawItemText]);
+      }
+      if (this.rawItemType === "HEADING3") {
+        return createVNode("h3", {
+          "class": this.ns.e("h3")
+        }, [this.rawItemText]);
+      }
+      if (this.rawItemType === "HEADING4") {
+        return createVNode("h4", {
+          "class": this.ns.e("h4")
+        }, [this.rawItemText]);
+      }
+      if (this.rawItemType === "HEADING5") {
+        return createVNode("h5", {
+          "class": this.ns.e("h5")
+        }, [this.rawItemText]);
+      }
+      if (this.rawItemType === "HEADING6") {
+        return createVNode("h6", {
+          "class": this.ns.e("h6")
+        }, [this.rawItemText]);
+      }
+      if (this.rawItemType === "PARAGRAPH") {
+        return createVNode("p", {
+          "class": this.ns.e("paragraph")
+        }, [this.rawItemText]);
+      }
+      if (this.rawItemType === "HTML") {
+        return createVNode("div", {
+          "class": this.ns.e("paragraph"),
+          "innerHTML": this.rawItemText
+        }, null);
+      }
+      if (this.rawItemType === "VIDEO") {
+        return createVNode("div", {
+          "class": this.ns.e("video")
+        }, [createVNode("video", {
+          "id": this.playerParams.id,
+          "src": this.playerParams.path,
+          "autoplay": this.playerParams.autoplay,
+          "controls": this.playerParams.showcontrols,
+          "loop": this.playerParams.replay,
+          "muted": this.playerParams.mute
+        }, [createVNode("source", {
+          "src": this.playerParams.path,
+          "type": "video/mp4"
+        }, null), createVNode("source", {
+          "src": this.playerParams.path,
+          "type": "video/ogg"
+        }, null), createVNode("source", {
+          "src": this.playerParams.path,
+          "type": "video/webm"
+        }, null), createTextVNode("\u4F60\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301video\u6807\u7B7E")])]);
+      }
+      if (this.rawItemType === "DIVIDER") {
+        return createVNode(resolveComponent("el-divider"), {
+          "content-position": this.dividerParams.contentPosition
+        }, {
+          default: () => [createVNode("span", {
+            "innerHTML": this.dividerParams.html
+          }, null)]
+        });
+      }
+      if (this.rawItemType === "INFO" || this.rawItemType === "WARNING" || this.rawItemType === "ERROR") {
+        return createVNode(resolveComponent("el-alert"), {
+          "title": this.alertParams.title,
+          "type": this.alertParams.type,
+          "show-icon": this.alertParams.showIcon,
+          "closable": this.alertParams.closeabled
+        }, null);
+      }
+      if (this.rawItemType === "MARKDOWN") {
+        return createVNode(resolveComponent("iBizMarkDown"), {
+          "value": this.content,
+          "disabled": true
+        }, null);
+      }
+      if (["PLACEHOLDER"].includes(this.rawItemType)) {
+        return null;
+      }
+      return null;
+    };
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [renderContent()]);
+  }
+});
+
+export { IBizRawItem };

package/es/common/row/row.css

@@ -0,0 +1 @@
+.ibiz-row--flex{display:flex;flex-flow:column nowrap}.ibiz-row--grid{align-items:flex-start}

package/es/common/row/row.mjs

@@ -0,0 +1,47 @@
+import { isVNode, createVNode, resolveComponent, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './row.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const IBizRow = /* @__PURE__ */ defineComponent({
+  name: "IBizRow",
+  props: {
+    layout: Object
+  },
+  setup() {
+    const ns = useNamespace("row");
+    return {
+      ns
+    };
+  },
+  render() {
+    var _a, _b, _c;
+    const defaultSlot = (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a);
+    if (((_c = this.layout) == null ? void 0 : _c.layout) === "FLEX") {
+      const {
+        dir,
+        align,
+        valign
+      } = this.layout;
+      const _dir = dir;
+      return createVNode("div", {
+        "class": [this.ns.b(), this.ns.m("flex"), this.ns.m(_dir)],
+        "style": {
+          flexDirection: _dir,
+          justifyContent: align,
+          alignItems: valign
+        }
+      }, [defaultSlot]);
+    }
+    return createVNode(resolveComponent("el-row"), {
+      "class": [this.ns.b(), this.ns.m("grid")]
+    }, _isSlot(defaultSlot) ? defaultSlot : {
+      default: () => [defaultSlot]
+    });
+  }
+});
+
+export { IBizRow };

package/es/common/sort-bar/sort-bar.css

@@ -0,0 +1 @@
+.ibiz-sort-bar{--ibiz-sort-bar-icon-color:var(--ibiz-color-disabled-text);--ibiz-sort-bar-border-radius:var(--ibiz-border-radius-small);display:flex;align-items:center;justify-content:flex-start;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base)}.ibiz-sort-bar-item{padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);margin-right:-1px;font-size:var(--ibiz-font-size-regular);line-height:1;color:var(--ibiz-color-text-2);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--ibiz-color-bg-1);border:1px solid var(--ibiz-color-border)}.ibiz-sort-bar-item:first-child{border-top-left-radius:var(--ibiz-sort-bar-border-radius);border-bottom-left-radius:var(--ibiz-sort-bar-border-radius)}.ibiz-sort-bar-item:last-child{border-top-right-radius:var(--ibiz-sort-bar-border-radius);border-bottom-right-radius:var(--ibiz-sort-bar-border-radius)}.ibiz-sort-bar-item--asc .ibiz-sort-bar-icon-wrapper__icon-asc{border-bottom-color:var(--ibiz-color-primary)}.ibiz-sort-bar-item--desc .ibiz-sort-bar-icon-wrapper__icon-desc{border-top-color:var(--ibiz-color-primary)}.ibiz-sort-bar-icon-wrapper{position:relative;display:inline-block;width:10px;height:14px;margin-left:var(--ibiz-spacing-tight);vertical-align:middle}.ibiz-sort-bar-icon-wrapper__icon-asc{position:absolute;top:-5px;left:0;width:0;height:0;border:solid 5px transparent;border-bottom-color:var(--ibiz-sort-bar-icon-color)}.ibiz-sort-bar-icon-wrapper__icon-desc{position:absolute;bottom:-3px;left:0;width:0;height:0;border:solid 5px transparent;border-top-color:var(--ibiz-sort-bar-icon-color)}

package/es/common/sort-bar/sort-bar.mjs

@@ -0,0 +1,57 @@
+import { createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './sort-bar.css';
+
+"use strict";
+const IBizSortBar = /* @__PURE__ */ defineComponent({
+  name: "IBizSortBar",
+  props: {
+    sortItems: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: {
+    SortChange: (_item, _order) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("sort-bar");
+    const onItemClick = (item) => {
+      if (item.order === "asc") {
+        item.order = "desc";
+      } else if (item.order === "desc") {
+        item.order = void 0;
+      } else {
+        props.sortItems.forEach((x) => {
+          x.order = void 0;
+        });
+        item.order = "asc";
+      }
+      emit("SortChange", item, item.order);
+    };
+    return {
+      ns,
+      onItemClick
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [this.sortItems.length > 0 && this.sortItems.map((item) => {
+      return createVNode("div", {
+        "onClick": () => this.onItemClick(item),
+        "class": [this.ns.b("item"), item.order === "asc" ? this.ns.bm("item", "asc") : "", item.order === "desc" ? this.ns.bm("item", "desc") : ""]
+      }, [item.caption, createVNode("div", {
+        "class": this.ns.b("icon-wrapper")
+      }, [createVNode("i", {
+        "class": this.ns.be("icon-wrapper", "icon-asc")
+      }, null), createVNode("i", {
+        "class": this.ns.be("icon-wrapper", "icon-desc")
+      }, null)])]);
+    })]);
+  }
+});
+
+export { IBizSortBar };

package/es/common/split/split.css

@@ -0,0 +1 @@
+.ibiz-split-wrapper{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--horizontal .ibiz-split-trigger-con{top:50%;width:0;height:100%}.ibiz-split--horizontal .ibiz-split-pane--right{padding-left:6px}.ibiz-split--vertical .ibiz-split-trigger-con{left:50%;width:100%;height:0}.ibiz-split--vertical .ibiz-split-pane--bottom{padding-top:6px}.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;transform:translate(-50%,-50%)}

package/es/common/split/split.mjs

@@ -0,0 +1,185 @@
+import { ref, computed, nextTick, watch, onMounted, onBeforeUnmount, createVNode, resolveComponent, defineComponent } 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) => {
+      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));
+      }
+      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");
+        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();
+      });
+      window.addEventListener("resize", computeOffset);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", computeOffset);
+    });
+    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": {
+        right: `${this.anotherOffset}%`
+      },
+      "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"),
+      "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": {
+        left: `${this.offset}%`
+      },
+      "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"),
+      "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: `${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{border:1px solid var(--ibiz-color-border)}.ibiz-split-trigger--vertical{width:6px;height:100%;cursor:col-resize;border-top:none;border-bottom:none}.ibiz-split-trigger--vertical .ibiz-split-trigger-bar{float:left;width:4px;height:1px;margin-top:3px;background:var(--ibiz-color-border)}.ibiz-split-trigger--horizontal{width:100%;height:6px;cursor:row-resize;border-right:none;border-left:none}.ibiz-split-trigger--horizontal .ibiz-split-trigger-bar{float:left;width:1px;height:4px;margin-right:3px;background:var(--ibiz-color-border)}.ibiz-split-trigger-bar-con{position:absolute;overflow:hidden}.ibiz-split-trigger-bar-con--vertical{top:50%;left:1px;height:32px;transform:translate(0,-50%)}.ibiz-split-trigger-bar-con--horizontal{top:1px;left:50%;width:32px;transform:translate(-50%,0)}

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

@@ -0,0 +1,36 @@
+import { computed, createVNode, defineComponent } 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/view-message/view-message.mjs

@@ -0,0 +1,47 @@
+import { resolveComponent, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+
+"use strict";
+const ViewMessage = /* @__PURE__ */ defineComponent({
+  name: "ViewMessage",
+  props: {
+    messages: {
+      type: Array
+    }
+  },
+  setup() {
+    const ns = useNamespace("view-message");
+    const getType = (messageType) => {
+      switch (messageType) {
+        case "WARN":
+          return "warning";
+        case "ERROR":
+          return "error";
+        default:
+          return "info";
+      }
+    };
+    return {
+      ns,
+      getType
+    };
+  },
+  render() {
+    var _a, _b;
+    if (!((_a = this.messages) == null ? void 0 : _a.length)) {
+      return null;
+    }
+    return createVNode("div", {
+      "class": [this.ns.b()]
+    }, [(_b = this.messages) == null ? void 0 : _b.map((message) => {
+      return createVNode(resolveComponent("el-alert"), {
+        "type": this.getType(message.messageType),
+        "title": message.title,
+        "description": message.message,
+        "closable": message.removeMode !== 0
+      }, null);
+    })]);
+  }
+});
+
+export { ViewMessage };

package/es/control/app-menu/app-menu.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ibiz-control-appmenu{position:relative;width:100%;height:100%;--ibiz-control-appmenu-collapse-item-hover-color:var(--ibiz-color-primary);--ibiz-control-appmenu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-icon-width:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-height:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-margin:0 10px 0 0;--ibiz-control-appmenu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-text-1);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:40px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-horizontal-height:32px;--ibiz-control-appmenu-item-horizontal-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base);--ibiz-control-appmenu-item-horizontal-padding-right:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-horizontal-popup-height:40px}.ibiz-control-appmenu>.el-menu{height:100%;padding:0 var(--ibiz-spacing-tight);overflow-y:auto;border-right:0}.ibiz-control-appmenu .el-sub-menu .el-sub-menu__icon-arrow{right:14px;width:12px}.ibiz-control-appmenu .el-sub-menu .el-menu-item{padding:calc(var(--ibiz-control-appmenu-item-padding) * .875) calc(var(--ibiz-control-appmenu-item-padding) * 2.5)}.ibiz-control-appmenu .el-menu--vertical{width:100%}.ibiz-control-appmenu .el-menu--vertical .el-menu-item,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;--el-menu-base-level-padding:var(--ibiz-control-appmenu-item-padding);width:100%;height:var(--ibiz-control-appmenu-item-height);font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-color);white-space:nowrap;border-radius:var(--ibiz-control-appmenu-item-border-radius)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item.is-active,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-selected-color)!important;background-color:var(--ibiz-control-appmenu-item-selected-bg-color)}.ibiz-control-appmenu .el-menu--vertical .el-menu-item:hover,.ibiz-control-appmenu .el-menu--vertical .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-hover-color);background-color:var(--ibiz-control-appmenu-item-hover-bg-color)}.ibiz-control-appmenu .el-menu--horizontal{gap:16px;align-items:center;height:100%;background-color:transparent;border-bottom:none}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title{height:var(--ibiz-control-appmenu-item-horizontal-height);padding:var(--ibiz-control-appmenu-item-horizontal-padding);font-size:var(--ibiz-control-appmenu-item-horizontal-font-size);line-height:var(--ibiz-control-appmenu-item-horizontal-height);color:var(--ibiz-control-appmenu-item-horizontal-color);white-space:nowrap;border:none;border-radius:var(--ibiz-control-appmenu-item-horizontal-border-radius)}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item.is-active,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-horizontal-color)!important;background-color:transparent}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item:hover,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-horizontal-hover-color);background-color:var(--ibiz-control-appmenu-item-horizontal-hover-bg-color)}.ibiz-control-appmenu .el-menu--horizontal .el-menu-item .el-sub-menu__icon-arrow,.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title .el-sub-menu__icon-arrow{position:absolute;top:50%;right:16px}.ibiz-control-appmenu .el-menu--horizontal .el-sub-menu__title{padding-right:var(--ibiz-control-appmenu-item-horizontal-padding-right)}.ibiz-control-appmenu .el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:transparent}.ibiz-control-appmenu .el-menu--horizontal>.el-sub-menu:hover .el-sub-menu__title{color:var(--ibiz-control-appmenu-item-horizontal-hover-color);background-color:var(--ibiz-control-appmenu-item-horizontal-hover-bg-color)}.ibiz-control-appmenu .el-menu--horizontal::-webkit-scrollbar-thumb{background-color:var(--ibiz-color-white)}.ibiz-control-appmenu__icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-control-appmenu-icon-width);height:var(--ibiz-control-appmenu-icon-height);margin:var(--ibiz-control-appmenu-icon-margin)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__icon{margin:0}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu__item{display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:var(--ibiz-spacing-tight)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-tooltip{width:100%}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu{display:block}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu>.el-sub-menu__title{display:flex;align-items:center;justify-content:center;display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:var(--ibiz-spacing-tight);white-space:nowrap;cursor:pointer}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-submenu .ibiz-control-appmenu-submenu__item{padding:0}.ibiz-control-appmenu.is-show-collapse>.el-menu{height:calc(100% - var(--ibiz-control-appmenu-collapse-height))}.ibiz-control-appmenu .ibiz-control-appmenu__counter{position:absolute;top:50%;right:5px;height:20px;padding:0 6px;line-height:initial;color:#fff;background-color:#f56c6c;border-radius:10px;transform:translateY(-50%)}.el-menu--popup-container{--ibiz-control-appmenu-collapse-item-hover-color:var(--ibiz-color-primary);--ibiz-control-appmenu-collapse-item-padding:var(--ibiz-spacing-base);--ibiz-control-appmenu-icon-width:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-height:var(--ibiz-width-icon-large);--ibiz-control-appmenu-icon-margin:0 10px 0 0;--ibiz-control-appmenu-collapse-height:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-selected-color:var(--ibiz-color-text-1);--ibiz-control-appmenu-item-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-hover-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-padding:var(--ibiz-spacing-base-tight);--ibiz-control-appmenu-item-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-height:40px;--ibiz-control-appmenu-item-color:var(--ibiz-color-text-0);--ibiz-control-appmenu-item-horizontal-selected-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-selected-bg-color:var(--ibiz-color-primary-active);--ibiz-control-appmenu-item-horizontal-hover-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-hover-bg-color:var(--ibiz-color-primary-hover);--ibiz-control-appmenu-item-horizontal-color:var(--ibiz-color-white);--ibiz-control-appmenu-item-horizontal-font-size:var(--ibiz-font-size-header-6);--ibiz-control-appmenu-item-horizontal-height:32px;--ibiz-control-appmenu-item-horizontal-border-radius:var(--ibiz-border-radius-small);--ibiz-control-appmenu-item-horizontal-padding:0 var(--ibiz-spacing-base);--ibiz-control-appmenu-item-horizontal-padding-right:var(--ibiz-spacing-super-loose);--ibiz-control-appmenu-item-horizontal-popup-height:40px;border:none;box-shadow:var(--ibiz-shadow-elevated)}.el-menu--popup-container .el-menu--popup{padding:var(--ibiz-spacing-extra-tight);background-color:var(--ibiz-color-primary)}.el-menu--popup-container .el-menu--popup .el-menu-item,.el-menu--popup-container .el-menu--popup .el-sub-menu__title{display:flex;align-items:center;justify-content:flex-start;width:100%;height:var(--ibiz-control-appmenu-item-horizontal-popup-height);font-size:var(--ibiz-control-appmenu-item-font-size);color:var(--ibiz-control-appmenu-item-horizontal-color);white-space:nowrap;border-radius:var(--ibiz-control-appmenu-item-horizontal-border-radius)}.el-menu--popup-container .el-menu--popup .el-menu-item.is-active,.el-menu--popup-container .el-menu--popup .el-sub-menu__title.is-active{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:transparent}.el-menu--popup-container .el-menu--popup .el-menu-item:hover,.el-menu--popup-container .el-menu--popup .el-sub-menu__title:hover{color:var(--ibiz-control-appmenu-item-horizontal-selected-color);background-color:var(--ibiz-control-appmenu-item-hover-bg-color)}.el-menu--popup-container .el-menu--popup .el-menu-item .el-icon,.el-menu--popup-container .el-menu--popup .el-sub-menu__title .el-icon{display:none}.ibiz-control-appmenu .ibiz-control-appmenu-collapse-icon{position:absolute;right:var(--ibiz-spacing-base-tight);bottom:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-header-5);cursor:pointer}.ibiz-control-appmenu .ibiz-control-appmenu-collapse-icon.is-collapse{transform:rotate(180deg)}.ibiz-control-appmenu.is-collapse .ibiz-control-appmenu-collapse-icon{right:0;width:100%;text-align:center}