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

package/es/common/action-toolbar/action-toolbar.mjs

@@ -1,4 +1,4 @@
-import { isVNode, ref, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, ref, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './action-toolbar.css';
 import { showTitle } from '@ibiz-template/core';
@@ -38,10 +38,11 @@ const IBizActionToolbar = /* @__PURE__ */ defineComponent({
   setup(props, {
     emit
   }) {
+    var _a;
     const ns = useNamespace("action-toolbar");
     const dropdownRef = ref();
     const popoverVisible = ref(false);
-    props.actionDetails.forEach((detail) => {
+    (_a = props.actionDetails) == null ? void 0 : _a.forEach((detail) => {
       if (detail.capLanguageRes && detail.capLanguageRes.lanResTag) {
         detail.caption = ibiz.i18n.t(detail.capLanguageRes.lanResTag, detail.caption);
       }
@@ -90,6 +91,7 @@ const IBizActionToolbar = /* @__PURE__ */ defineComponent({
     };
   },
   render() {
+    var _a;
     const details = this.actionDetails || [];
     const renderDivider = (isExpand) => {
       return createVNode(resolveComponent("el-divider"), {
@@ -100,7 +102,8 @@ const IBizActionToolbar = /* @__PURE__ */ defineComponent({
     };
     const renderActions = (items, isExpand = true) => {
       return items.map((detail) => {
-        if (this.actionsState[detail.id].visible) {
+        var _a2;
+        if ((_a2 = this.actionsState[detail.id]) == null ? void 0 : _a2.visible) {
           return [detail.addSeparator && renderDivider(isExpand), createVNode(resolveComponent("el-button"), {
             "text": true,
             "size": "small",
@@ -160,7 +163,7 @@ const IBizActionToolbar = /* @__PURE__ */ defineComponent({
         default: () => [_slot]
       })];
     };
-    if (!this.actionsState.visible) {
+    if (!((_a = this.actionsState) == null ? void 0 : _a.visible)) {
       return;
     }
     if (this.mode === "buttons") {

package/es/common/anchor-container/anchor-bar-list/anchor-bar-list.css

@@ -0,0 +1 @@
+.ibiz-anchor-bar-list{--ibiz-anchor-bar-item-height:32px;--ibiz-anchor-bar-selected-icon-width:4px;position:relative}.ibiz-anchor-bar-list__item{height:var(--ibiz-anchor-bar-item-height);padding-left:var(--ibiz-spacing-base);overflow:hidden;font-size:var(--ibiz-font-size-header-6);line-height:var(--ibiz-anchor-bar-item-height);color:var(--ibiz-color-text-3);text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.ibiz-anchor-bar-list__item--title{display:block;width:100%;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ibiz-anchor-bar-list__item.is-selected{position:relative;font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-bold);color:var(--ibiz-color-primary-active)}.ibiz-anchor-bar-list__item.is-selected::after{position:absolute;top:0;left:0;width:var(--ibiz-anchor-bar-selected-icon-width);height:100%;content:"";background-color:var(--ibiz-color-primary);border-radius:calc(var(--ibiz-anchor-bar-selected-icon-width)/ 2)}.ibiz-anchor-bar-list__item:hover{color:var(--ibiz-color-primary-hover)}.ibiz-anchor-bar-list::before{position:absolute;top:0;left:0;width:var(--ibiz-anchor-bar-selected-icon-width);height:100%;content:"";background-color:var(--ibiz-color-fill-0)}.ibiz-anchor-bar-list.is-usermode{display:flex;align-items:center;width:100%;height:100%}.ibiz-anchor-bar-list.is-usermode .ibiz-anchor-bar-list__item{display:flex;flex:1;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;font-size:var(--ibiz-font-size-header-6);color:var(--ibiz-color-text-3);cursor:pointer}.ibiz-anchor-bar-list.is-usermode .ibiz-anchor-bar-list__item--title{display:block;width:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.ibiz-anchor-bar-list.is-usermode .ibiz-anchor-bar-list__item.is-selected{position:relative;font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-bold);color:var(--ibiz-color-primary-active)}.ibiz-anchor-bar-list.is-usermode .ibiz-anchor-bar-list__item.is-selected::after{position:absolute;top:unset;bottom:0;left:0;width:100%;height:var(--ibiz-anchor-bar-selected-icon-width);content:"";background-color:var(--ibiz-color-primary);border-radius:calc(var(--ibiz-anchor-bar-selected-icon-width)/ 2)}.ibiz-anchor-bar-list.is-usermode .ibiz-anchor-bar-list__item:hover{color:var(--ibiz-color-primary-hover)}.ibiz-anchor-bar-list.is-usermode::before{position:absolute;top:unset;bottom:0;left:0;width:100%;height:var(--ibiz-anchor-bar-selected-icon-width);content:"";background-color:var(--ibiz-color-fill-0)}

package/es/common/anchor-container/anchor-bar-list/anchor-bar-list.d.ts

@@ -0,0 +1,66 @@
+import './anchor-bar-list.scss';
+export declare const IBizAnchorBarList: import("vue").DefineComponent<{
+    anchorList: {
+        type: {
+            (arrayLength: number): IData[];
+            (...items: IData[]): IData[];
+            new (arrayLength: number): IData[];
+            new (...items: IData[]): IData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: never[];
+    };
+    navBarStyle: {
+        type: StringConstructor;
+    };
+    navBarPos: {
+        type: StringConstructor;
+    };
+    selected: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    renderAnchorDefaultStyle: () => JSX.Element[];
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "select"[], "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    anchorList: {
+        type: {
+            (arrayLength: number): IData[];
+            (...items: IData[]): IData[];
+            new (arrayLength: number): IData[];
+            new (...items: IData[]): IData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: never[];
+    };
+    navBarStyle: {
+        type: StringConstructor;
+    };
+    navBarPos: {
+        type: StringConstructor;
+    };
+    selected: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    onSelect?: ((...args: any[]) => any) | undefined;
+}, {
+    anchorList: IData[];
+    selected: string;
+}, {}>;

package/es/common/anchor-container/anchor-bar-list/anchor-bar-list.mjs

@@ -0,0 +1,69 @@
+import { defineComponent, ref, createVNode, watch } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './anchor-bar-list.css';
+
+"use strict";
+const IBizAnchorBarList = /* @__PURE__ */ defineComponent({
+  name: "IBizAnchorBarList",
+  props: {
+    anchorList: {
+      type: Array,
+      default: []
+    },
+    navBarStyle: {
+      type: String
+    },
+    navBarPos: {
+      type: String
+    },
+    selected: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["select"],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("anchor-bar-list");
+    const select = ref("");
+    const onSelect = (key) => {
+      emit("select", key);
+    };
+    const renderAnchorDefaultStyle = () => {
+      var _a, _b;
+      if (!select.value) {
+        select.value = (_b = (_a = props.anchorList) == null ? void 0 : _a[0]) == null ? void 0 : _b.id;
+      }
+      return props.anchorList.map((item) => {
+        return createVNode("div", {
+          "class": [ns.e("item"), ns.is("selected", select.value === item.id)],
+          "title": item.title,
+          "onClick": () => onSelect(item.id)
+        }, [createVNode("div", {
+          "class": ns.em("item", "title")
+        }, [item.title])]);
+      });
+    };
+    watch(() => props.selected, (newVal) => {
+      select.value = newVal;
+    }, {
+      immediate: true
+    });
+    return {
+      ns,
+      renderAnchorDefaultStyle
+    };
+  },
+  render() {
+    let content = null;
+    if (this.navBarStyle === "DEFAULT" || !this.navBarStyle) {
+      content = this.renderAnchorDefaultStyle();
+    }
+    return createVNode("div", {
+      "class": [this.ns.b(), this.ns.is("usermode", this.navBarPos === "USER" || this.navBarPos === "USER2")]
+    }, [content]);
+  }
+});
+
+export { IBizAnchorBarList };

package/es/common/anchor-container/anchor-container.css

@@ -0,0 +1 @@
+.ibiz-anchor-container{--ibiz-anchor-container-default-width:200px;--ibiz-anchor-container-min-height:60px;display:flex;gap:var(--ibiz-spacing-tight);width:100%;height:100%;padding:var(--ibiz-spacing-tight)}.ibiz-anchor-container__content{width:100%;height:100%;overflow:auto}.ibiz-anchor-container__content .no-slider{overflow:auto}.ibiz-anchor-container__content .no-slider::-webkit-scrollbar{background-color:transparent}.ibiz-anchor-container__content .no-slider::-webkit-scrollbar-thumb{background-color:transparent}.ibiz-anchor-container__content .no-slider::-webkit-scrollbar-track{background-color:transparent}.ibiz-anchor-container.is-broadside .ibiz-anchor-container__anchor{width:var(--ibiz-anchor-container-default-width);margin:var(--ibiz-spacing-base) var(--ibiz-spacing-tight);overflow:auto}.ibiz-anchor-container.is-topleft .ibiz-anchor-container__anchor{align-self:start}.ibiz-anchor-container.is-topright{flex-direction:row-reverse}.ibiz-anchor-container.is-topright .ibiz-anchor-container__anchor{align-self:start}.ibiz-anchor-container.is-middleleft .ibiz-anchor-container__anchor{align-self:center}.ibiz-anchor-container.is-middleright{flex-direction:row-reverse}.ibiz-anchor-container.is-middleright .ibiz-anchor-container__anchor{align-self:center}.ibiz-anchor-container.is-bottomleft .ibiz-anchor-container__anchor{align-self:end}.ibiz-anchor-container.is-bottomright{flex-direction:row-reverse}.ibiz-anchor-container.is-bottomright .ibiz-anchor-container__anchor{align-self:end}.ibiz-anchor-container.is-usermode{flex-direction:column}.ibiz-anchor-container.is-usermode .ibiz-anchor-container__anchor{display:flex;align-items:center;width:100%;min-height:var(--ibiz-anchor-container-min-height);padding:0 var(--ibiz-spacing-base);overflow:auto}.ibiz-anchor-container.is-user2{flex-direction:column-reverse}

package/es/common/anchor-container/anchor-container.d.ts

@@ -0,0 +1,103 @@
+import { PropType, Ref } from 'vue';
+import './anchor-container.scss';
+export interface navBarConfig {
+    /**
+     * 导航栏位置
+     *
+     * @type {string}
+     * @memberof navBarConfig
+     */
+    navBarPos: string;
+    /**
+     * 导航栏样式表
+     *
+     * @type {string}
+     * @memberof navBarConfig
+     */
+    navBarSysCss: string;
+    /**
+     * 导航栏宽
+     *
+     * @type {number}
+     * @memberof navBarConfig
+     */
+    navBarWidth: number;
+    /**
+     * 导航栏样式
+     *
+     * @type {string}
+     * @memberof navBarConfig
+     */
+    navBarStyle: string;
+    /**
+     *导航栏高
+     *
+     * @type {number}
+     * @memberof navBarConfig
+     */
+    navbarHeight: number;
+}
+export declare const IBizAnchorContainer: import("vue").DefineComponent<{
+    anchorList: {
+        type: {
+            (arrayLength: number): IData[];
+            (...items: IData[]): IData[];
+            new (arrayLength: number): IData[];
+            new (...items: IData[]): IData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: never[];
+    };
+    anchorTargetEle: {
+        type: PropType<IData>;
+        required: true;
+    };
+    navBarConfig: {
+        type: PropType<navBarConfig>;
+        default: () => void;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    selected: Ref<string>;
+    navBarPos: string;
+    navBarStyle: string;
+    navBarSysCss: string;
+    style: () => IData;
+    onSelect: (key: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    anchorList: {
+        type: {
+            (arrayLength: number): IData[];
+            (...items: IData[]): IData[];
+            new (arrayLength: number): IData[];
+            new (...items: IData[]): IData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: never[];
+    };
+    anchorTargetEle: {
+        type: PropType<IData>;
+        required: true;
+    };
+    navBarConfig: {
+        type: PropType<navBarConfig>;
+        default: () => void;
+    };
+}>>, {
+    anchorList: IData[];
+    navBarConfig: navBarConfig;
+}, {}>;

package/es/common/anchor-container/anchor-container.mjs

@@ -0,0 +1,155 @@
+import { defineComponent, ref, watch, onUnmounted, createVNode } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { IBizAnchorBarList } from './anchor-bar-list/anchor-bar-list.mjs';
+import './anchor-container.css';
+
+"use strict";
+const IBizAnchorContainer = /* @__PURE__ */ defineComponent({
+  name: "IBizAnchorContainer",
+  components: {
+    IBizAnchorBarList
+  },
+  props: {
+    // 锚点列表，项值格式为{id:xx,text:xx}
+    anchorList: {
+      type: Array,
+      default: []
+    },
+    // 锚点目标元素
+    anchorTargetEle: {
+      type: Object,
+      required: true
+    },
+    // 锚点导航栏配置
+    navBarConfig: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("anchor-container");
+    const timer = ref();
+    const isClick = ref(false);
+    const selected = ref("");
+    const {
+      navBarPos = "USER",
+      navBarSysCss,
+      navBarWidth,
+      navBarStyle,
+      navbarHeight
+    } = props.navBarConfig;
+    const onSelect = (key) => {
+      clearInterval(timer.value);
+      const el = document.querySelector("#".concat(key));
+      isClick.value = true;
+      selected.value = key;
+      if (el) {
+        el.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+        timer.value = setTimeout(() => {
+          isClick.value = false;
+        }, 1e3);
+      }
+    };
+    const handleScroll = () => {
+      if (isClick.value)
+        return;
+      let closestDistance = Infinity;
+      let tempSelect = "";
+      for (let i = 0; i < props.anchorList.length; i++) {
+        const childElement = document.querySelector("#".concat(props.anchorList[i].id));
+        if (childElement) {
+          const rect = childElement.getBoundingClientRect();
+          const parentRect = props.anchorTargetEle.$el.getBoundingClientRect();
+          const relativeTop = rect.top - parentRect.top;
+          const isInView = rect.bottom > parentRect.top && rect.top < parentRect.bottom;
+          if (isInView && relativeTop >= 0 && relativeTop < closestDistance) {
+            closestDistance = relativeTop;
+            tempSelect = props.anchorList[i].id;
+          }
+        }
+      }
+      selected.value = tempSelect;
+    };
+    const style = () => {
+      const tempStyle = {};
+      if (navBarWidth) {
+        if (navBarWidth === 1) {
+          Object.assign(tempStyle, {
+            width: "auto"
+          });
+        } else {
+          Object.assign(tempStyle, {
+            width: "".concat(navBarWidth, "px"),
+            minWidth: "".concat(navBarWidth, "px"),
+            maxWidth: "".concat(navBarWidth, "px")
+          });
+        }
+      }
+      if (navbarHeight) {
+        if (navbarHeight === 1) {
+          Object.assign(tempStyle, {
+            height: "auto"
+          });
+        } else {
+          Object.assign(tempStyle, {
+            height: "".concat(navbarHeight, "px"),
+            minHeight: "".concat(navbarHeight, "px")
+          });
+        }
+      }
+      return tempStyle;
+    };
+    const target = watch(() => {
+      if (props.anchorTargetEle && props.anchorTargetEle.$el) {
+        return props.anchorTargetEle.$el;
+      }
+      return null;
+    }, (newVal) => {
+      if (newVal) {
+        newVal.addEventListener("scroll", handleScroll);
+        newVal.classList.add("no-slider");
+        target();
+      }
+    }, {
+      immediate: true
+    });
+    onUnmounted(() => {
+      var _a, _b;
+      if ((_a = props.anchorTargetEle) == null ? void 0 : _a.$el) {
+        ((_b = props.anchorTargetEle) == null ? void 0 : _b.$el).removeEventListener("scroll", handleScroll);
+      }
+    });
+    return {
+      ns,
+      selected,
+      navBarPos,
+      navBarStyle,
+      navBarSysCss,
+      style,
+      onSelect
+    };
+  },
+  render() {
+    var _a, _b;
+    return createVNode("div", {
+      "class": [this.ns.b(), this.ns.is("".concat(this.navBarPos.toLowerCase()), true), this.ns.is("broadside", this.navBarPos !== "USER" && this.navBarPos !== "USER2"), this.ns.is("usermode", this.navBarPos === "USER" || this.navBarPos === "USER2"), this.ns.b("".concat(this.navBarStyle || "default").toLowerCase())]
+    }, [createVNode("div", {
+      "class": [this.ns.e("anchor"), this.navBarSysCss],
+      "style": this.style()
+    }, [createVNode(IBizAnchorBarList, {
+      "anchorList": this.anchorList,
+      "navBarStyle": this.navBarStyle,
+      "navBarPos": this.navBarPos,
+      "selected": this.selected,
+      "onSelect": this.onSelect
+    }, null)]), createVNode("div", {
+      "class": this.ns.e("content")
+    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)])]);
+  }
+});
+
+export { IBizAnchorContainer };

package/es/common/button-list/button-list.css

@@ -0,0 +1 @@
+.ibiz-button-list{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular)}.ibiz-button-list__button-content{display:flex;align-items:center}.ibiz-button-list__button-content--icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-button-list-icon-size);height:var(--ibiz-button-list-icon-size);font-size:var(--ibiz-button-list-icon-size);margin-right:var(--ibiz-button-list-icon-margin)}.ibiz-button-list__dropdown{width:100%;height:100%}.ibiz-button-list__dropdown .ibiz-icon{margin-right:0}.ibiz-button-list__dropdown .ibiz-icon+.ibiz-button-list__button-content--caption{margin-left:var(--ibiz-button-list-icon-margin)}.ibiz-button-list__dropdown .el-button-group{width:100%;display:flex;height:100%;border-radius:var(--ibiz-border-radius-small)}.ibiz-button-list__dropdown .el-button-group .el-button:first-child{flex-grow:1}.ibiz-button-list__dropdown .el-button-group .el-button:last-child{flex-shrink:0}.ibiz-button-list__dropdown--style2 .el-button{--el-button-active-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;--el-button-hover-bg-color:transparent}.ibiz-button-list__dropdown--style2 .el-button-group .ibiz-button-list__item{padding-right:0}.ibiz-button-list__dropdown--style2 .el-button-group .el-button{color:var(--ibiz-color-text-2)}.ibiz-button-list__dropdown--style2 .el-button-group:hover .el-button{color:var(--ibiz-color-primary)}.ibiz-button-list--itemx .ibiz-button-list__more-button{padding-left:0;padding-right:0;width:32px}.ibiz-button-list__dropdown-popper{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular)}.ibiz-button-list__dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu .el-dropdown-menu__item{padding:var(--ibiz-spacing-none)}.ibiz-button-list__dropdown-popper .el-button{--el-button-active-bg-color:transparent;--el-button-hover-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;width:100%;display:block;text-align:left;border-radius:0;padding:var(--ibiz-button-list-popover-button-padding);margin:var(--ibiz-button-list-popover-button-margin);font-size:var(--ibiz-button-list-popover-button-font-size)}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item:hover{background-color:var(--ibiz-color-bg-0)}.ibiz-button-list__dropdown-popper--style2 .el-button{color:var(--ibiz-color-text-2)}

package/es/common/button-list/button-list.d.ts

@@ -0,0 +1,45 @@
+import { PropType } from 'vue';
+import { IDEFormButtonList, IPanelButtonList } from '@ibiz/model-core';
+import { IButtonContainerState } from '@ibiz-template/runtime';
+import './button-list.scss';
+/**
+ * 面板按钮组和表单按钮组的基础组件
+ */
+export declare const IBizButtonList: import("vue").DefineComponent<{
+    model: {
+        type: PropType<IPanelButtonList | IDEFormButtonList>;
+        required: true;
+    };
+    buttonsState: {
+        type: PropType<IButtonContainerState>;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    buttonStyle: import("vue").ComputedRef<any>;
+    renderDropdown: () => JSX.Element;
+    renderActions: () => JSX.Element;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (_e: MouseEvent, _actionId: string) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    model: {
+        type: PropType<IPanelButtonList | IDEFormButtonList>;
+        required: true;
+    };
+    buttonsState: {
+        type: PropType<IButtonContainerState>;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClick?: ((_e: MouseEvent, _actionId: string) => any) | undefined;
+}, {
+    disabled: boolean;
+}, {}>;

package/es/common/button-list/button-list.mjs

@@ -0,0 +1,165 @@
+import { isVNode, defineComponent, ref, computed, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './button-list.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const IBizButtonList = /* @__PURE__ */ defineComponent({
+  name: "IBizButtonList",
+  props: {
+    model: {
+      type: Object,
+      required: true
+    },
+    buttonsState: {
+      type: Object,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: {
+    click: (_e, _actionId) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("button-list");
+    const dropdown = ref();
+    const {
+      uiactionGroup,
+      actionGroupExtractMode
+    } = props.model;
+    const firstIndex = computed(() => {
+      var _a;
+      const index = (_a = uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.findIndex((item) => props.buttonsState[item.id].visible);
+      return index === void 0 ? -1 : index;
+    });
+    const buttonStyle = computed(() => {
+      const {
+        itemStyle,
+        detailStyle
+      } = props.model;
+      return itemStyle || detailStyle || "DEFAULT";
+    });
+    const trigger = computed(() => {
+      return actionGroupExtractMode === "ITEMX" && buttonStyle.value === "STYLE2" ? "hover" : "click";
+    });
+    const handleClick = (e, item) => {
+      var _a, _b;
+      e.stopPropagation();
+      (_b = (_a = dropdown.value) == null ? void 0 : _a.handleClose) == null ? void 0 : _b.call(_a);
+      emit("click", e, item.uiactionId);
+    };
+    const handleMoreClick = (e, item) => {
+      if (trigger.value === "hover") {
+        emit("click", e, item.uiactionId);
+      }
+    };
+    const renderButton = (item, disabled = false) => {
+      var _a, _b;
+      if (props.buttonsState[item.id].visible) {
+        return createVNode(resolveComponent("el-button"), {
+          "class": [ns.e("item"), ns.em("item", "".concat((_a = item.id) == null ? void 0 : _a.toLowerCase())), "".concat(((_b = item.sysCss) == null ? void 0 : _b.cssName) || "")],
+          "title": item.tooltip || item.caption,
+          "disabled": props.buttonsState[item.id].disabled || disabled,
+          "onClick": (event) => handleClick(event, item)
+        }, {
+          default: () => [createVNode("div", {
+            "class": ns.e("button-content")
+          }, [item.showIcon && createVNode(resolveComponent("iBizIcon"), {
+            "icon": item.sysImage,
+            "class": ns.em("button-content", "icon")
+          }, null), item.showCaption && createVNode("span", {
+            "class": ns.em("button-content", "caption")
+          }, [item.caption])])]
+        });
+      }
+      return null;
+    };
+    const renderActions = () => {
+      var _a;
+      return createVNode("div", {
+        "class": ns.e("content")
+      }, [(_a = uiactionGroup == null ? void 0 : uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.map((item) => renderButton(item))]);
+    };
+    const renderDropdown = () => {
+      const {
+        id,
+        caption,
+        sysImage
+      } = props.model;
+      return createVNode(resolveComponent("el-dropdown"), {
+        "ref": dropdown,
+        "trigger": trigger.value,
+        "class": [ns.e("dropdown"), ns.em("dropdown", "".concat(buttonStyle.value.toLowerCase()))],
+        "popper-class": [ns.e("dropdown-popper"), ns.em("dropdown-popper", "".concat(buttonStyle.value.toLowerCase())), ns.em("dropdown-popper", "".concat(id == null ? void 0 : id.toLowerCase()))],
+        "popper-options": {
+          modifiers: [{
+            name: "offset",
+            options: {
+              offset: [0, 4]
+            }
+          }]
+        }
+      }, {
+        default: () => {
+          const item = uiactionGroup.uiactionGroupDetails[firstIndex.value];
+          return createVNode(resolveComponent("el-button-group"), null, {
+            default: () => [actionGroupExtractMode === "ITEMX" && item && renderButton(item, props.disabled), (actionGroupExtractMode !== "ITEMX" || item) && createVNode(resolveComponent("el-button"), {
+              "disabled": props.disabled,
+              "class": ns.e("more-button"),
+              "title": actionGroupExtractMode !== "ITEMX" ? caption || ibiz.i18n.t("app.more") : ibiz.i18n.t("app.more"),
+              "onClick": (event) => handleMoreClick(event, item)
+            }, {
+              default: () => [createVNode("div", {
+                "class": ns.e("button-content")
+              }, [actionGroupExtractMode === "ITEMS" ? [createVNode(resolveComponent("iBizIcon"), {
+                "class": ns.em("button-content", "icon"),
+                "icon": sysImage
+              }, null), caption ? createVNode("span", {
+                "class": ns.em("button-content", "caption")
+              }, [caption]) : null] : createVNode("ion-icon", {
+                "name": "chevron-down-outline",
+                "class": ns.em("button-content", "more")
+              }, null)])]
+            })]
+          });
+        },
+        dropdown: () => createVNode(resolveComponent("el-dropdown-menu"), null, {
+          default: () => {
+            var _a;
+            return [(_a = uiactionGroup.uiactionGroupDetails) == null ? void 0 : _a.map((item, index) => {
+              if (props.buttonsState[item.id].visible && (actionGroupExtractMode !== "ITEMX" || index !== firstIndex.value)) {
+                let _slot;
+                return createVNode(resolveComponent("el-dropdown-item"), null, _isSlot(_slot = renderButton(item)) ? _slot : {
+                  default: () => [_slot]
+                });
+              }
+              return null;
+            })];
+          }
+        })
+      });
+    };
+    return {
+      ns,
+      buttonStyle,
+      renderDropdown,
+      renderActions
+    };
+  },
+  render() {
+    var _a;
+    return createVNode("div", {
+      "class": [this.ns.b(), this.ns.m(this.model.id), this.ns.m(this.buttonStyle.toLowerCase()), this.ns.m((_a = this.model.actionGroupExtractMode) == null ? void 0 : _a.toLowerCase())],
+      "style": this.model.cssStyle
+    }, [this.model.actionGroupExtractMode === "ITEM" ? this.renderActions() : this.renderDropdown()]);
+  }
+});
+
+export { IBizButtonList };

package/es/common/carousel/carousel.mjs

@@ -1,4 +1,4 @@
-import { isVNode, ref, watch, createVNode, resolveComponent, defineComponent } from 'vue';
+import { isVNode, defineComponent, ref, watch, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './carousel.css';