@weitutech/by-components-v3 1.1.11 → 1.1.12

package/dist/by-component-v3.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, onMounted, watch, resolveComponent, createElementBlock, openBlock, createVNode, createElementVNode, mergeProps, Fragment, renderList, normalizeClass, toDisplayString, createTextVNode, useSlots, toRefs, computed, createBlock, createCommentVNode, unref, nextTick, isVNode, reactive, inject, provide, h as h$1, onUnmounted, TransitionGroup, Teleport, onActivated, onDeactivated, onBeforeUnmount, getCurrentInstance, readonly, getCurrentScope, onScopeDispose, isRef, warn as warn$1, renderSlot, Transition, withCtx, withDirectives, normalizeStyle, vShow, shallowReactive, resolveDynamicComponent, withModifiers, render, createApp } from "vue";
+import { defineComponent, ref, onMounted, watch, resolveComponent, createElementBlock, openBlock, createVNode, createElementVNode, mergeProps, Fragment, renderList, normalizeClass, toDisplayString, createTextVNode, useSlots, toRefs, computed, createBlock, createCommentVNode, unref, nextTick, isVNode, reactive, inject, provide, h as h$1, onUnmounted, TransitionGroup, Teleport, onActivated, onDeactivated, onBeforeUnmount, getCurrentInstance, readonly, getCurrentScope, onScopeDispose, isRef, warn as warn$1, renderSlot, Transition, withCtx, withDirectives, normalizeStyle, vShow, shallowReactive, resolveDynamicComponent, withModifiers, render, createSlots, createApp } from "vue";
 function cloneDeep(obj) {
   if (obj === null || typeof obj !== "object") {
     return obj;
@@ -4011,10 +4011,10 @@ hooks$a.HTML5_FMT = {
   MONTH: "YYYY-MM"
   // <input type="month" />
 };
-const _hoisted_1$3 = { class: "b-picker wrapper" };
-const _hoisted_2$1 = { class: "btn" };
-const _hoisted_3$1 = ["onClick"];
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = { class: "b-picker wrapper" };
+const _hoisted_2$2 = { class: "btn" };
+const _hoisted_3$2 = ["onClick"];
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "datePicker",
   props: {
     modelValue: { default: () => [] },
@@ -4111,18 +4111,18 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       const _component_el_date_picker = resolveComponent("el-date-picker");
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
         createVNode(_component_el_date_picker, mergeProps({ style: { "width": "70%" } }, props, {
           modelValue: props.modelValue,
           "onUpdate:modelValue": handleChange
         }), null, 16, ["modelValue"]),
-        createElementVNode("div", _hoisted_2$1, [
+        createElementVNode("div", _hoisted_2$2, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(shortcuts.value, (item) => {
             return openBlock(), createElementBlock("span", {
               key: item.key,
               class: normalizeClass(["item", { item_active: item.key === active.value }]),
               onClick: ($event) => handleClick(item)
-            }, toDisplayString(item.label), 11, _hoisted_3$1);
+            }, toDisplayString(item.label), 11, _hoisted_3$2);
           }), 128))
         ])
       ]);
@@ -4136,9 +4136,9 @@ const _export_sfc$1 = (sfc, props) => {
   }
   return target;
 };
-const CustomDatePicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$7, [["__scopeId", "data-v-3d5f0e97"]]);
-const _hoisted_1$2 = { class: "drawer_query_btn b-fold-search" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const CustomDatePicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["__scopeId", "data-v-3d5f0e97"]]);
+const _hoisted_1$3 = { class: "drawer_query_btn b-fold-search" };
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "foldSearch",
   props: {
     unfold: { type: Boolean, default: false }
@@ -4163,7 +4163,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       emit("change", show.value);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
         createElementVNode("div", { onClick: drawer2 }, [
           show.value == true ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             _cache[0] || (_cache[0] = createElementVNode("span", { style: { "color": "#3aa1ff", "vertical-align": "middle" } }, "收起", -1)),
@@ -4187,7 +4187,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const FoldSearch = /* @__PURE__ */ _export_sfc$1(_sfc_main$6, [["__scopeId", "data-v-04f92519"]]);
+const FoldSearch = /* @__PURE__ */ _export_sfc$1(_sfc_main$7, [["__scopeId", "data-v-04f92519"]]);
 /*! Element Plus Icons Vue v2.3.1 */
 var circle_close_filled_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
   name: "CircleCloseFilled",
@@ -4304,7 +4304,7 @@ var warning_filled_default = warning_filled_vue_vue_type_script_setup_true_lang_
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...{
     name: "ByForm"
   },
@@ -4808,12 +4808,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ZshForm = /* @__PURE__ */ _export_sfc$1(_sfc_main$5, [["__scopeId", "data-v-0cc3ecb8"]]);
-const _hoisted_1$1 = {
+const ZshForm = /* @__PURE__ */ _export_sfc$1(_sfc_main$6, [["__scopeId", "data-v-0cc3ecb8"]]);
+const _hoisted_1$2 = {
   id: "pager",
   class: "pager fixed bottom-0 right-0 w-full flex justify-center items-center z-50"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "base-pager",
   props: {
     pageSize: { default: 25 },
@@ -4851,7 +4851,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_el_pagination = resolveComponent("el-pagination");
-      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
         createVNode(_component_el_pagination, {
           layout: "total, prev, pager, next,sizes, jumper",
           total: _ctx.total,
@@ -4865,7 +4865,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const BasePager = /* @__PURE__ */ _export_sfc$1(_sfc_main$4, [["__scopeId", "data-v-4b6faf2c"]]);
+const BasePager = /* @__PURE__ */ _export_sfc$1(_sfc_main$5, [["__scopeId", "data-v-4b6faf2c"]]);
 const coreVersion = "4.1.5";
 const VxeCore = {
   coreVersion,
@@ -37662,7 +37662,7 @@ const __default__$2 = defineComponent({
   name: "ElIcon",
   inheritAttrs: false
 });
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   ...__default__$2,
   props: iconProps,
   setup(__props) {
@@ -37687,7 +37687,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Icon$1 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "icon.vue"]]);
+var Icon$1 = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__file", "icon.vue"]]);
 const ElIcon = withInstall(Icon$1);
 const iconPropType = definePropType([
   String,
@@ -37743,7 +37743,7 @@ const badgeProps = buildProps({
 const __default__$1 = defineComponent({
   name: "ElBadge"
 });
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   props: badgeProps,
   setup(__props, { expose }) {
@@ -37805,7 +37805,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Badge$1 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "badge.vue"]]);
+var Badge$1 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "badge.vue"]]);
 const ElBadge = withInstall(Badge$1);
 const configProviderProps = buildProps({
   a11y: {
@@ -37965,7 +37965,7 @@ const getOffsetOrSpace = (id, offset2) => {
 const __default__ = defineComponent({
   name: "ElMessage"
 });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: messageProps,
   emits: messageEmits,
@@ -38106,7 +38106,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var MessageConstructor = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "message.vue"]]);
+var MessageConstructor = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "message.vue"]]);
 let seed = 1;
 const normalizeOptions = (params) => {
   const options = !params || isString$1(params) || isVNode(params) || isFunction$1(params) ? { message: params } : params;
@@ -39842,20 +39842,20 @@ const deepClone = (target) => {
   }
   return result;
 };
-const _hoisted_1 = { id: "custom_column" };
-const _hoisted_2 = { class: "el-dialog-box" };
-const _hoisted_3 = { class: "left_box" };
-const _hoisted_4 = {
+const _hoisted_1$1 = { id: "custom_column" };
+const _hoisted_2$1 = { class: "el-dialog-box" };
+const _hoisted_3$1 = { class: "left_box" };
+const _hoisted_4$1 = {
   class: "row",
   style: { "padding-right": "20px" }
 };
-const _hoisted_5 = { class: "cell" };
-const _hoisted_6 = { class: "left_box_body" };
-const _hoisted_7 = { class: "left_nav" };
-const _hoisted_8 = ["onClick"];
-const _hoisted_9 = { class: "left_menu" };
-const _hoisted_10 = { class: "checkbox_title" };
-const _hoisted_11 = { class: "right_box" };
+const _hoisted_5$1 = { class: "cell" };
+const _hoisted_6$1 = { class: "left_box_body" };
+const _hoisted_7$1 = { class: "left_nav" };
+const _hoisted_8$1 = ["onClick"];
+const _hoisted_9$1 = { class: "left_menu" };
+const _hoisted_10$1 = { class: "checkbox_title" };
+const _hoisted_11$1 = { class: "right_box" };
 const _hoisted_12 = { class: "drag_box" };
 const _hoisted_13 = { class: "drag_text_box" };
 const _hoisted_14 = { class: "drag_title" };
@@ -39873,7 +39873,7 @@ const _hoisted_21 = { class: "drag_li_text" };
 const _hoisted_22 = ["onClick"];
 const _hoisted_23 = ["onClick"];
 const _hoisted_24 = { class: "footer" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...{
     name: "CustomColumn"
   },
@@ -40156,7 +40156,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const _component_el_tooltip = resolveComponent("el-tooltip");
       const _component_el_icon = resolveComponent("el-icon");
       const _component_el_dialog = resolveComponent("el-dialog");
-      return openBlock(), createElementBlock("div", _hoisted_1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
         createVNode(_component_el_dialog, {
           "close-on-click-modal": false,
           modelValue: dialogVisible.value,
@@ -40189,11 +40189,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ])
           ]),
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_2, [
-              createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", _hoisted_2$1, [
+              createElementVNode("div", _hoisted_3$1, [
                 _cache[3] || (_cache[3] = createElementVNode("div", { class: "box_title" }, "数据指标", -1)),
-                createElementVNode("div", _hoisted_4, [
-                  createElementVNode("div", _hoisted_5, [
+                createElementVNode("div", _hoisted_4$1, [
+                  createElementVNode("div", _hoisted_5$1, [
                     createVNode(_component_el_input, {
                       modelValue: search.value,
                       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
@@ -40212,26 +40212,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     __: [2]
                   })
                 ]),
-                createElementVNode("div", _hoisted_6, [
-                  createElementVNode("div", _hoisted_7, [
+                createElementVNode("div", _hoisted_6$1, [
+                  createElementVNode("div", _hoisted_7$1, [
                     createElementVNode("ul", null, [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(checkBoxMenuBySearch.value, (item, index) => {
                         return openBlock(), createElementBlock("li", {
                           key: index,
                           class: normalizeClass({ active: activeId.value === index }),
                           onClick: ($event) => setHighlight(index)
-                        }, toDisplayString(item.label), 11, _hoisted_8);
+                        }, toDisplayString(item.label), 11, _hoisted_8$1);
                       }), 128))
                     ])
                   ]),
-                  createElementVNode("div", _hoisted_9, [
+                  createElementVNode("div", _hoisted_9$1, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(checkBoxMenuBySearch.value, (item, index) => {
                       return openBlock(), createElementBlock("div", {
                         key: index,
                         ref_for: true,
                         ref: (el) => tagItems.value[index] = el
                       }, [
-                        createElementVNode("div", _hoisted_10, toDisplayString(item.label), 1),
+                        createElementVNode("div", _hoisted_10$1, toDisplayString(item.label), 1),
                         createVNode(_component_el_row, null, {
                           default: withCtx(() => [
                             (openBlock(true), createElementBlock(Fragment, null, renderList(item.data, (each, idx) => {
@@ -40265,7 +40265,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ])
                 ])
               ]),
-              createElementVNode("div", _hoisted_11, [
+              createElementVNode("div", _hoisted_11$1, [
                 createElementVNode("div", _hoisted_12, [
                   createVNode(_component_el_row, null, {
                     default: withCtx(() => [
@@ -40415,7 +40415,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CustomColumn = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__scopeId", "data-v-9bcdfbf0"]]);
+const CustomColumn = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["__scopeId", "data-v-9bcdfbf0"]]);
 const isCachedTableColumns = (name) => {
   if (!name) return false;
   return !!localStorage.getItem(name);
@@ -40539,6 +40539,10 @@ const ByTable = /* @__PURE__ */ defineComponent({
     autoHeight: {
       type: Boolean,
       default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["pageChange", "setColumns", "setGroupColumn", ...events],
@@ -40558,6 +40562,7 @@ const ByTable = /* @__PURE__ */ defineComponent({
       setHasCache();
       return {
         border: true,
+        round: true,
         // 'visible' 值在 v4 版本中已经不再支持 (true:显示省略号； false：不显示省略号，自动撑高)
         showOverflow: !props.autoHeight,
         ...props.gridOptions.autoHeight ? {
@@ -40567,9 +40572,9 @@ const ByTable = /* @__PURE__ */ defineComponent({
           height: 720
         },
         align: "center",
-        copyFields: [],
-        emptyText: "暂无数据",
-        loading: false,
+        copyFields: props.gridOptions.copyFields || [],
+        emptyText: props.gridOptions.emptyText || "暂无数据",
+        loading: props.loading,
         loadingConfig: {
           text: "加载中..."
         },
@@ -40792,6 +40797,363 @@ const ByTable = /* @__PURE__ */ defineComponent({
     };
   }
 });
+var ToolBarItemType = /* @__PURE__ */ ((ToolBarItemType2) => {
+  ToolBarItemType2["Text"] = "text";
+  ToolBarItemType2["Button"] = "button";
+  ToolBarItemType2["RadioGroup"] = "radio-group";
+  ToolBarItemType2["Select"] = "select";
+  ToolBarItemType2["Input"] = "input";
+  return ToolBarItemType2;
+})(ToolBarItemType || {});
+const _hoisted_1 = { class: "by-tool-bar" };
+const _hoisted_2 = { class: "by-tool-bar__left" };
+const _hoisted_3 = {
+  key: 0,
+  style: { "display": "none" }
+};
+const _hoisted_4 = {
+  key: 1,
+  style: { "display": "none" }
+};
+const _hoisted_5 = { key: 2 };
+const _hoisted_6 = { key: 3 };
+const _hoisted_7 = { class: "by-tool-bar__right" };
+const _hoisted_8 = {
+  key: 0,
+  style: { "display": "none" }
+};
+const _hoisted_9 = {
+  key: 1,
+  style: { "display": "none" }
+};
+const _hoisted_10 = { key: 2 };
+const _hoisted_11 = { key: 3 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ByToolBar",
+  props: {
+    items: { default: () => [] }
+  },
+  emits: ["action"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const loadedOptions = ref({});
+    const valueTracker = ref({});
+    const itemsWithAsyncOptions = computed(() => {
+      return props.items.map((item) => {
+        let newItem = addDefaultProps(item);
+        if (item.type === ToolBarItemType.Select && item.name && loadedOptions.value[item.name]) {
+          newItem = {
+            ...newItem,
+            props: {
+              ...newItem.props,
+              loading: loadedOptions.value[item.name].loading
+            },
+            asyncOptions: loadedOptions.value[item.name].options
+          };
+        }
+        return newItem;
+      });
+    });
+    const leftItemsComputed = computed(() => {
+      return itemsWithAsyncOptions.value.filter((item) => item.position !== "right" && !item.hidden);
+    });
+    const rightItemsComputed = computed(() => {
+      return itemsWithAsyncOptions.value.filter((item) => item.position === "right" && !item.hidden);
+    });
+    const addDefaultProps = (item) => {
+      var _a2;
+      let newItem = { ...item };
+      if (((_a2 = item.props) == null ? void 0 : _a2.value) !== void 0) {
+        console.log(`[ByToolBar] 原始 ${item.name} value:`, item.props.value);
+      }
+      const needsSize = [ToolBarItemType.Button, ToolBarItemType.Select, ToolBarItemType.Input, ToolBarItemType.RadioGroup];
+      if (needsSize.includes(item.type)) {
+        if (item.props) {
+          newItem = {
+            ...item,
+            props: {
+              size: "default",
+              ...item.props
+              // 确保原始属性（包括 value）不被覆盖
+            }
+          };
+        } else {
+          newItem = {
+            ...item,
+            props: {
+              size: "default"
+            }
+          };
+        }
+      }
+      if (item.type === ToolBarItemType.Text) {
+        const defaultTextStyle = {
+          fontSize: "16px",
+          color: "#333333"
+        };
+        if (item.props) {
+          newItem = {
+            ...item,
+            props: {
+              ...defaultTextStyle,
+              ...item.props
+              // 确保原始属性不被覆盖
+            }
+          };
+        } else {
+          newItem = {
+            ...item,
+            props: defaultTextStyle
+          };
+        }
+      }
+      return newItem;
+    };
+    const loadSelectOptions = () => {
+      props.items.forEach((item) => {
+        var _a2;
+        if (item.type === ToolBarItemType.Select && item.props && typeof item.props.loadOptions === "function") {
+          const { name } = item;
+          if (!name) {
+            console.error("[ByToolBar] 下拉框使用异步加载loadOptions时，必须设置name属性.");
+            return;
+          }
+          if ((_a2 = loadedOptions.value[name]) == null ? void 0 : _a2.loaded) return;
+          loadedOptions.value[name] = { loading: true, options: [], loaded: false };
+          item.props.loadOptions().then((options) => {
+            loadedOptions.value[name].options = options;
+            loadedOptions.value[name].loaded = true;
+          }).finally(() => {
+            loadedOptions.value[name].loading = false;
+          });
+        }
+      });
+    };
+    const getComponentType = (item) => {
+      const map2 = {
+        [ToolBarItemType.Text]: "span",
+        [ToolBarItemType.Button]: "el-button",
+        [ToolBarItemType.RadioGroup]: "el-radio-group",
+        [ToolBarItemType.Select]: "el-select",
+        [ToolBarItemType.Input]: "el-input"
+      };
+      return map2[item.type] || "div";
+    };
+    const getComponentProps = (item) => {
+      if (!item.props) return {};
+      const otherProps = { ...item.props };
+      delete otherProps.value;
+      return otherProps;
+    };
+    const getComponentStyle = (item) => {
+      var _a2, _b, _c, _d;
+      const style = {};
+      switch (item.type) {
+        case ToolBarItemType.Text:
+          style.maxWidth = "300px";
+          style.overflow = "hidden";
+          style.textOverflow = "ellipsis";
+          style.whiteSpace = "nowrap";
+          if (item.props) {
+            if ((_a2 = item.props) == null ? void 0 : _a2.fontSize) {
+              style.fontSize = item.props.fontSize;
+            }
+            if ((_b = item.props) == null ? void 0 : _b.color) {
+              style.color = item.props.color;
+            }
+            if ((_c = item.props) == null ? void 0 : _c.maxWidth) {
+              style.maxWidth = item.props.maxWidth;
+            }
+            if ((_d = item.props) == null ? void 0 : _d.width) {
+              style.width = item.props.width;
+            }
+          }
+          break;
+        case ToolBarItemType.Input:
+        case ToolBarItemType.Select:
+          style.maxWidth = "200px";
+          break;
+        case ToolBarItemType.Button:
+        case ToolBarItemType.RadioGroup:
+          style.maxWidth = "400px";
+          break;
+      }
+      return style;
+    };
+    const handleEvent = (eventType, item, payload) => {
+      if (eventType === "update:model-value" || eventType === "input" || eventType === "change") {
+        if (item.props) {
+          item.props.value = payload;
+          const origin = props.items.find((i) => i.name === item.name);
+          if (origin && origin.props) {
+            origin.props.value = payload;
+          }
+          if (item.name) {
+            valueTracker.value[item.name] = payload;
+          }
+        }
+      }
+      emit("action", { type: eventType, item, payload });
+    };
+    watch(
+      () => props.items,
+      () => {
+        nextTick(() => {
+          loadSelectOptions();
+          props.items.forEach((item) => {
+            var _a2;
+            if (item.name && ((_a2 = item.props) == null ? void 0 : _a2.value) !== void 0) {
+              valueTracker.value[item.name] = item.props.value;
+            }
+          });
+        });
+      },
+      { immediate: true, deep: true }
+    );
+    return (_ctx, _cache) => {
+      const _component_el_icon = resolveComponent("el-icon");
+      const _component_el_option = resolveComponent("el-option");
+      const _component_el_radio_button = resolveComponent("el-radio-button");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(leftItemsComputed.value, (item, idx) => {
+            var _a2;
+            return openBlock(), createElementBlock(Fragment, {
+              key: "left-" + idx
+            }, [
+              !item.slot && !item.hidden ? (openBlock(), createBlock(resolveDynamicComponent(getComponentType(item)), mergeProps({
+                key: 0,
+                ref_for: true
+              }, getComponentProps(item), {
+                disabled: item.disabled,
+                style: getComponentStyle(item),
+                "model-value": valueTracker.value.hasOwnProperty(item.name) ? valueTracker.value[item.name] : (_a2 = item.props) == null ? void 0 : _a2.value,
+                onClick: (e) => handleEvent("click", item, e),
+                onInput: (val) => handleEvent("input", item, val),
+                onChange: (val) => handleEvent("change", item, val),
+                "onUpdate:modelValue": (val) => handleEvent("update:model-value", item, val)
+              }), createSlots({
+                default: withCtx(() => {
+                  var _a3, _b, _c;
+                  return [
+                    item.type === unref(ToolBarItemType).Select || item.type === unref(ToolBarItemType).Input || item.type === unref(ToolBarItemType).RadioGroup ? (openBlock(), createElementBlock("div", _hoisted_3, "调试: " + toDisplayString(item.name) + " = " + toDisplayString((_a3 = item.props) == null ? void 0 : _a3.value), 1)) : createCommentVNode("", true),
+                    item.type === unref(ToolBarItemType).Select || item.type === unref(ToolBarItemType).Input || item.type === unref(ToolBarItemType).RadioGroup ? (openBlock(), createElementBlock("div", _hoisted_4, "实际值: " + toDisplayString(item.name) + " model-value = " + toDisplayString((_b = item.props) == null ? void 0 : _b.value), 1)) : createCommentVNode("", true),
+                    item.type === unref(ToolBarItemType).Button && item.label ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(item.label), 1)) : createCommentVNode("", true),
+                    item.type === unref(ToolBarItemType).Text ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(item.label) + toDisplayString(item.props && (item.props.children || item.props.innerHTML)), 1)) : createCommentVNode("", true),
+                    item.type === unref(ToolBarItemType).Select ? (openBlock(true), createElementBlock(Fragment, { key: 4 }, renderList(item.asyncOptions || ((_c = item.props) == null ? void 0 : _c.options) || [], (opt) => {
+                      return openBlock(), createBlock(_component_el_option, {
+                        key: opt.value,
+                        label: opt.label,
+                        value: opt.value
+                      }, null, 8, ["label", "value"]);
+                    }), 128)) : createCommentVNode("", true),
+                    item.type === unref(ToolBarItemType).RadioGroup ? (openBlock(true), createElementBlock(Fragment, { key: 5 }, renderList(item.radios || [], (opt) => {
+                      return openBlock(), createBlock(_component_el_radio_button, {
+                        key: opt.value,
+                        label: opt.value
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(opt.label), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["label"]);
+                    }), 128)) : createCommentVNode("", true)
+                  ];
+                }),
+                _: 2
+              }, [
+                item.type === unref(ToolBarItemType).Button && item.props && item.props.icon ? {
+                  name: "icon",
+                  fn: withCtx(() => [
+                    createVNode(_component_el_icon, null, {
+                      default: withCtx(() => [
+                        (openBlock(), createBlock(resolveDynamicComponent(item.props.icon)))
+                      ]),
+                      _: 2
+                    }, 1024)
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1040, ["disabled", "style", "model-value", "onClick", "onInput", "onChange", "onUpdate:modelValue"])) : !item.hidden ? (openBlock(), createElementBlock("div", {
+                key: "left-slot-" + idx
+              }, [
+                renderSlot(_ctx.$slots, item.slot)
+              ])) : createCommentVNode("", true)
+            ], 64);
+          }), 128))
+        ]),
+        createElementVNode("div", _hoisted_7, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(rightItemsComputed.value, (item, idx) => {
+            var _a2;
+            return openBlock(), createElementBlock(Fragment, {
+              key: "right-" + idx
+            }, [
+              !item.slot && !item.hidden ? (openBlock(), createBlock(resolveDynamicComponent(getComponentType(item)), mergeProps({
+                key: 0,
+                ref_for: true
+              }, getComponentProps(item), {
+                disabled: item.disabled,
+                style: getComponentStyle(item),
+                "model-value": valueTracker.value.hasOwnProperty(item.name) ? valueTracker.value[item.name] : (_a2 = item.props) == null ? void 0 : _a2.value,
+                onClick: (e) => handleEvent("click", item, e),
+                onInput: (val) => handleEvent("input", item, val),
+                onChange: (val) => handleEvent("change", item, val),
+                "onUpdate:modelValue": (val) => handleEvent("update:model-value", item, val)
+              }), createSlots({
+                default: withCtx(() => {
+                  var _a3, _b, _c;
+                  return [
+                    item.type === unref(ToolBarItemType).Select || item.type === unref(ToolBarItemType).Input || item.type === unref(ToolBarItemType).RadioGroup ? (openBlock(), createElementBlock("div", _hoisted_8, "调试: " + toDisplayString(item.name) + " = " + toDisplayString((_a3 = item.props) == null ? void 0 : _a3.value), 1)) : createCommentVNode("", true),
+                    item.type === unref(ToolBarItemType).Select || item.type === unref(ToolBarItemType).Input || item.type === unref(ToolBarItemType).RadioGroup ? (openBlock(), createElementBlock("div", _hoisted_9, "实际值: " + toDisplayString(item.name) + " model-value = " + toDisplayString((_b = item.props) == null ? void 0 : _b.value), 1)) : createCommentVNode("", true),
+                    item.type === unref(ToolBarItemType).Button && item.label ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(item.label), 1)) : createCommentVNode("", true),
+                    item.type === unref(ToolBarItemType).Text ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(item.label) + toDisplayString(item.props && (item.props.children || item.props.innerHTML)), 1)) : createCommentVNode("", true),
+                    item.type === unref(ToolBarItemType).Select ? (openBlock(true), createElementBlock(Fragment, { key: 4 }, renderList(item.asyncOptions || ((_c = item.props) == null ? void 0 : _c.options) || [], (opt) => {
+                      return openBlock(), createBlock(_component_el_option, {
+                        key: opt.value,
+                        label: opt.label,
+                        value: opt.value
+                      }, null, 8, ["label", "value"]);
+                    }), 128)) : createCommentVNode("", true),
+                    item.type === unref(ToolBarItemType).RadioGroup ? (openBlock(true), createElementBlock(Fragment, { key: 5 }, renderList(item.radios || [], (opt) => {
+                      return openBlock(), createBlock(_component_el_radio_button, {
+                        key: opt.value,
+                        label: opt.value
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(opt.label), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["label"]);
+                    }), 128)) : createCommentVNode("", true)
+                  ];
+                }),
+                _: 2
+              }, [
+                item.type === unref(ToolBarItemType).Button && item.props && item.props.icon ? {
+                  name: "icon",
+                  fn: withCtx(() => [
+                    createVNode(_component_el_icon, null, {
+                      default: withCtx(() => [
+                        (openBlock(), createBlock(resolveDynamicComponent(item.props.icon)))
+                      ]),
+                      _: 2
+                    }, 1024)
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1040, ["disabled", "style", "model-value", "onClick", "onInput", "onChange", "onUpdate:modelValue"])) : !item.hidden ? (openBlock(), createElementBlock("div", {
+                key: "right-slot-" + idx
+              }, [
+                renderSlot(_ctx.$slots, item.slot)
+              ])) : createCommentVNode("", true)
+            ], 64);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+});
 const zhCN = {
   vxe: {
     base: {
@@ -80921,7 +81283,8 @@ const VxeUIExport = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
 const components = {
   ByForm: ZshForm,
   ByPager: BasePager,
-  ByTable
+  ByTable,
+  ByToolBar: _sfc_main
 };
 const install = (app) => {
   app.use(VxeUIExport);
@@ -80934,6 +81297,7 @@ const ByComponentsV3 = {
   install
 };
 export {
+  ToolBarItemType,
   components,
   ByComponentsV3 as default
 };