@ctzy-web-client/plugin-component-vue 1.0.9 → 1.0.11

package/lib/pct-filter-panel/pct-filter-panel-item.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var webBaseClientVue = require('@ctzy-web-client/web-base-client-vue');
+var useFilterPanelItem = require('./use-filter-panel-item.js');
+var _pluginVue_exportHelper = require('../_virtual/_plugin-vue_export-helper.js');
+
+const __default__ = vue.defineComponent({
+  name: "BwaPctFilterPanelItem"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    prop: {
+      type: String
+    },
+    close: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["close"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = webBaseClientVue.useNamespace("pctfilterpanel");
+    const { value, column, allowClose, closeHandle, showTitle, filterPanelLineNum } = useFilterPanelItem.useFilterPanelItem(props);
+    const data = vue.reactive({ value });
+    vue.provide(
+      webBaseClientVue.filterPanelItemKey,
+      vue.reactive({
+        column
+      })
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(vue.unref(ns).b("item")),
+        style: vue.normalizeStyle({ "width": vue.unref(filterPanelLineNum) ? (100 / vue.unref(filterPanelLineNum)).toFixed(2) + "%" : vue.unref(showTitle) ? "25%" : "20%" })
+      }, [
+        vue.renderSlot(_ctx.$slots, "default", { data }),
+        vue.unref(allowClose) ? (vue.openBlock(), vue.createElementBlock("i", {
+          key: 0,
+          class: vue.normalizeClass(["ptp-icon", "ptp-close", vue.unref(ns).be("item", "close")]),
+          onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(closeHandle) && vue.unref(closeHandle)(...args))
+        }, null, 2)) : vue.createCommentVNode("v-if", true)
+      ], 6);
+    };
+  }
+});
+var PctFilterPanelItem = /* @__PURE__ */ _pluginVue_exportHelper["default"](_sfc_main, [["__file", "pct-filter-panel-item.vue"]]);
+
+exports["default"] = PctFilterPanelItem;

package/lib/pct-filter-panel/pct-filter-panel.js

@@ -0,0 +1,255 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var webBaseClientVue = require('@ctzy-web-client/web-base-client-vue');
+var useFilterPanel = require('./use-filter-panel.js');
+var pctFilterPanelItem = require('./pct-filter-panel-item.js');
+var _pluginVue_exportHelper = require('../_virtual/_plugin-vue_export-helper.js');
+
+const __default__ = vue.defineComponent({
+  name: "BwaPctFilterPanel"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    dataTable: {
+      type: Object
+    },
+    showSearch: {
+      type: Boolean,
+      default: false
+    },
+    showFieldOptions: {
+      type: Boolean,
+      default: true
+    },
+    searchAttr: {
+      type: String,
+      default: "search"
+    },
+    searchPlaceholder: {
+      type: String,
+      default: ""
+    },
+    searchFields: {
+      type: Array,
+      default: () => []
+    },
+    showTitle: {
+      type: Boolean,
+      default: false
+    },
+    searchTitle: {
+      type: String,
+      default: "\u6807\u9898\u540D\u79F0"
+    },
+    filterPanelLineNum: {
+      type: Number
+    }
+  },
+  emits: ["reset", "filter"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = webBaseClientVue.useNamespace("pctfilterpanel");
+    const {
+      dataTable,
+      filterPanel,
+      currentFilterColumns,
+      selectedColumnAttrNames,
+      closableColumns,
+      searchParams,
+      handleFieldSearch,
+      searchValue,
+      isChange,
+      handleReset,
+      handleSearch
+    } = useFilterPanel.useFilterPanel(props, { emit });
+    console.log(currentFilterColumns);
+    vue.watch(
+      filterPanel,
+      (filterPanel2, _, onCleanup) => {
+        filterPanel2.existComponent = true;
+        onCleanup(() => {
+          filterPanel2.existComponent = false;
+        });
+      },
+      { immediate: true }
+    );
+    vue.provide(
+      webBaseClientVue.filterPanelKey,
+      vue.reactive({
+        dataTable,
+        filterPanel,
+        currentFilterColumns,
+        showTitle: props.showTitle,
+        filterPanelLineNum: props.filterPanelLineNum
+      })
+    );
+    return (_ctx, _cache) => {
+      const _component_BwaPctMultipleMenuCondition = vue.resolveComponent("BwaPctMultipleMenuCondition");
+      const _component_BwaPctInputCondition = vue.resolveComponent("BwaPctInputCondition");
+      const _component_BwaPctDateRangeCondition = vue.resolveComponent("BwaPctDateRangeCondition");
+      const _component_ElInput = vue.resolveComponent("ElInput");
+      const _component_ElButton = vue.resolveComponent("ElButton");
+      const _component_ElCheckbox = vue.resolveComponent("ElCheckbox");
+      const _component_BwaAdvanceOption = vue.resolveComponent("BwaAdvanceOption");
+      const _component_BwaAdvanceSelect = vue.resolveComponent("BwaAdvanceSelect");
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(vue.unref(ns).b())
+      }, [
+        vue.renderSlot(_ctx.$slots, "default", {}, () => [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(currentFilterColumns), (column) => {
+            return vue.renderSlot(_ctx.$slots, `condition-${column.attrName}`, {
+              key: column.attrName,
+              attrName: column.attrName
+            }, () => [
+              vue.createVNode(pctFilterPanelItem["default"], {
+                prop: column.fullAttrName
+              }, {
+                default: vue.withCtx(({ data }) => {
+                  var _a, _b;
+                  return [
+                    !column.component || column.component === "BwaMultipleMenuCondition" || column.component === "BwaSingleMenuCondition" ? (vue.openBlock(), vue.createBlock(_component_BwaPctMultipleMenuCondition, {
+                      key: 0,
+                      modelValue: data.value,
+                      "onUpdate:modelValue": ($event) => data.value = $event,
+                      column,
+                      multiple: column.component !== "BwaSingleMenuCondition",
+                      showTitle: props.showTitle,
+                      showSearch: (_a = column.componentProps) == null ? void 0 : _a.showSearch,
+                      options: ((_b = column.componentProps) == null ? void 0 : _b.options) || []
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "column", "multiple", "showTitle", "showSearch", "options"])) : vue.createCommentVNode("v-if", true),
+                    column.component === "BwaInputCondition" ? (vue.openBlock(), vue.createBlock(_component_BwaPctInputCondition, {
+                      key: 1,
+                      modelValue: data.value,
+                      "onUpdate:modelValue": ($event) => data.value = $event,
+                      column,
+                      showTitle: props.showTitle
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "column", "showTitle"])) : vue.createCommentVNode("v-if", true),
+                    column.component === "BwaDateRangeCondition" ? (vue.openBlock(), vue.createBlock(_component_BwaPctDateRangeCondition, {
+                      key: 2,
+                      modelValue: data.value,
+                      "onUpdate:modelValue": ($event) => data.value = $event,
+                      showTitle: props.showTitle
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "showTitle"])) : vue.createCommentVNode("v-if", true)
+                  ];
+                }),
+                _: 2
+              }, 1032, ["prop"])
+            ]);
+          }), 128))
+        ]),
+        __props.showSearch ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          style: vue.normalizeStyle([{ "display": "flex", "align-items": "center", "padding-right": "20px", "box-sizing": "border-box" }, {
+            "width": props.filterPanelLineNum ? (100 / props.filterPanelLineNum).toFixed(2) + "%" : props.showTitle ? "25%" : "20%"
+          }])
+        }, [
+          __props.showTitle ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(vue.unref(ns).e("title")),
+            style: { "padding-right": "8px" }
+          }, vue.toDisplayString(__props.searchTitle), 3)) : vue.createCommentVNode("v-if", true),
+          vue.createVNode(_component_ElInput, {
+            "prefix-icon": "Search",
+            size: "small",
+            clearable: "",
+            modelValue: vue.unref(searchValue),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(searchValue) ? searchValue.value = $event : null),
+            placeholder: __props.searchPlaceholder,
+            class: vue.normalizeClass(vue.unref(ns).e("search"))
+          }, null, 8, ["modelValue", "placeholder", "class"])
+        ], 4)) : vue.createCommentVNode("v-if", true),
+        __props.showFieldOptions ? (vue.openBlock(), vue.createBlock(pctFilterPanelItem["default"], {
+          key: 1,
+          style: { "width": "auto", "padding-right": "16px" }
+        }, {
+          default: vue.withCtx(() => [
+            __props.showFieldOptions ? (vue.openBlock(), vue.createBlock(_component_BwaAdvanceSelect, {
+              key: 0,
+              modelValue: vue.unref(selectedColumnAttrNames),
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(selectedColumnAttrNames) ? selectedColumnAttrNames.value = $event : null),
+              "show-selectIcon": false,
+              onSearch: vue.unref(handleFieldSearch),
+              class: vue.normalizeClass(vue.unref(ns).e("options")),
+              source: "pct"
+            }, {
+              "reference-content": vue.withCtx(() => [
+                vue.createVNode(_component_ElButton, {
+                  size: "small",
+                  class: vue.normalizeClass(vue.unref(ns).e("filterBut"))
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(vue.unref(ns).be("filter", "plus"))
+                    }, null, 2),
+                    vue.createElementVNode("span", {
+                      class: vue.normalizeClass(vue.unref(ns).be("filter", "label"))
+                    }, " \u7B5B\u9009 ", 2)
+                  ]),
+                  _: 1
+                }, 8, ["class"])
+              ]),
+              default: vue.withCtx(() => [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(closableColumns), (column) => {
+                  return vue.openBlock(), vue.createBlock(_component_BwaAdvanceOption, {
+                    value: column.fullAttrName,
+                    label: column.title,
+                    key: column.fullAttrName,
+                    class: vue.normalizeClass(vue.unref(ns).be("filter", "option"))
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(_component_ElCheckbox, {
+                        onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+                        }, ["prevent"])),
+                        modelValue: vue.unref(selectedColumnAttrNames).includes(column.fullAttrName),
+                        class: vue.normalizeClass(vue.unref(ns).be("filter", "checkbox"))
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(vue.toDisplayString(column.title), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["modelValue", "class"]),
+                      vue.createElementVNode("span", {
+                        class: vue.normalizeClass(vue.unref(ns).be("filter", "title"))
+                      }, vue.toDisplayString(column.componentTitle), 3)
+                    ]),
+                    _: 2
+                  }, 1032, ["value", "label", "class"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue", "onSearch", "class"])) : vue.createCommentVNode("v-if", true)
+          ]),
+          _: 1
+        })) : vue.createCommentVNode("v-if", true),
+        vue.createVNode(_component_ElButton, {
+          size: "small",
+          type: "primary",
+          class: vue.normalizeClass(vue.unref(ns).e("reset")),
+          onClick: vue.unref(handleSearch)
+        }, {
+          default: vue.withCtx(() => [
+            vue.createTextVNode(" \u67E5\u8BE2 ")
+          ]),
+          _: 1
+        }, 8, ["class", "onClick"]),
+        vue.createVNode(_component_ElButton, {
+          size: "small",
+          class: vue.normalizeClass(vue.unref(ns).e("reset")),
+          onClick: vue.unref(handleReset)
+        }, {
+          default: vue.withCtx(() => [
+            vue.createTextVNode(" \u91CD\u7F6E ")
+          ]),
+          _: 1
+        }, 8, ["class", "onClick"]),
+        vue.renderSlot(_ctx.$slots, "button")
+      ], 2);
+    };
+  }
+});
+var PctFilterPanel = /* @__PURE__ */ _pluginVue_exportHelper["default"](_sfc_main, [["__file", "pct-filter-panel.vue"]]);
+
+exports["default"] = PctFilterPanel;

package/lib/pct-filter-panel/use-filter-panel-item.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var webBaseClientVue = require('@ctzy-web-client/web-base-client-vue');
+
+const useFilterPanelItem = (props) => {
+  const filterPanelContext = vue.inject(webBaseClientVue.filterPanelKey);
+  const showTitle = vue.computed(() => filterPanelContext.showTitle);
+  const filterPanelLineNum = vue.computed(() => filterPanelContext.filterPanelLineNum);
+  const filterPanel = vue.computed(() => filterPanelContext.filterPanel);
+  const column = vue.computed(() => {
+    if (!vue.unref(filterPanel)) {
+      return null;
+    }
+    return vue.unref(filterPanel).getColumn(props.prop);
+  });
+  const value = vue.computed({
+    get: () => {
+      if (!vue.unref(column)) {
+        return null;
+      }
+      return vue.unref(filterPanel).getFilterParam(vue.unref(column));
+    },
+    set: (v) => {
+      if (!vue.unref(column)) {
+        return;
+      }
+      vue.unref(filterPanel).setFilterParam(vue.unref(column), v, false);
+    }
+  });
+  const allowClose = vue.computed(() => {
+    var _a;
+    return props.close || !!((_a = vue.unref(column)) == null ? void 0 : _a.closable);
+  });
+  const closeHandle = () => {
+    if (!vue.unref(column)) {
+      return;
+    }
+    vue.unref(filterPanel).closeColumn(vue.unref(column));
+    vue.unref(filterPanel).dataTable.refresh();
+  };
+  vue.onMounted(() => {
+    vue.unref(filterPanel).changeOriginFilterParams();
+  });
+  vue.onBeforeUnmount(() => {
+    vue.unref(filterPanel).changeOriginFilterParams();
+  });
+  return {
+    value,
+    column,
+    allowClose,
+    closeHandle,
+    showTitle,
+    filterPanelLineNum
+  };
+};
+
+exports.useFilterPanelItem = useFilterPanelItem;

package/lib/pct-filter-panel/use-filter-panel.js

@@ -0,0 +1,131 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ElementPlus = require('element-plus');
+var webBaseClientVue = require('@ctzy-web-client/web-base-client-vue');
+var vue = require('vue');
+var rxjs = require('rxjs');
+var db = require('../utils/db.js');
+
+const useFilterPanel = (props, context) => {
+  var _a;
+  const dataTable = ElementPlus.useProp("dataTable");
+  const filterPanel = vue.computed(() => vue.unref(dataTable).filterPanel);
+  const filterPanelTable = db.dataModelDB.filterPanel;
+  const currentFilterColumns = vue.computed(() => vue.unref(filterPanel).getAppliedColumns());
+  const userService = webBaseClientVue.useService("UserService");
+  const _userID = ((_a = userService == null ? void 0 : userService.userInfo) == null ? void 0 : _a.id) || "0";
+  const searchParams = vue.computed(() => vue.unref(filterPanel)._filterParams);
+  const selectedColumnAttrNames = vue.computed({
+    get: () => vue.unref(filterPanel).getSelectedColumnAttrNames(),
+    set: (v) => {
+      const oldSelectedColumnAttrNames = selectedColumnAttrNames.value;
+      vue.unref(filterPanel).setSelectedColumnAttrNames(v);
+      if (vue.unref(filterPanel).ready) {
+        const existsOldAttrNames = oldSelectedColumnAttrNames.filter((attrName) => v.includes(attrName));
+        if (existsOldAttrNames.length < oldSelectedColumnAttrNames.length) {
+          vue.unref(dataTable).refresh();
+        }
+      }
+    }
+  });
+  const closableColumns = vue.computed(() => vue.unref(filterPanel).getSearchClosableColumns());
+  const searchValue = vue.computed({
+    get: () => vue.unref(filterPanel).getSearchValue(),
+    set: (v) => vue.unref(filterPanel).setSeachValue(v, false)
+  });
+  const isChange = vue.computed(() => vue.unref(filterPanel).isChange());
+  vue.watch(ElementPlus.useProp("searchAttr"), (searchAttr) => {
+    vue.unref(filterPanel).setSearchAttr(searchAttr);
+  }, {
+    immediate: true
+  });
+  vue.watch(ElementPlus.useProp("searchFields"), (searchFields) => {
+    vue.unref(filterPanel).setSearchFields(searchFields);
+  }, {
+    immediate: true
+  });
+  const handleFieldSearch = (value) => {
+    vue.unref(filterPanel).fieldSearchValue = value;
+  };
+  const handleReset = () => {
+    vue.unref(filterPanel).resetFilterParams();
+    context.emit("reset");
+  };
+  const handleSearch = () => {
+    dataTable.value.load();
+  };
+  webBaseClientVue.useEventDispatcher(filterPanel, "params-change", () => {
+    const _filterPanel = vue.unref(filterPanel);
+    context.emit("filter", {
+      ..._filterPanel.getFilterParams(),
+      [_filterPanel.getSearchAttr()]: _filterPanel.getSearchValue()
+    });
+  });
+  const appName = webBaseClientVue.useValue("AppName");
+  const selectedColumnChangeSubscription = new rxjs.Observable((observer) => webBaseClientVue.useEventDispatcher(filterPanel, "selected-column-change", observer.next.bind(observer))).subscribe(async () => {
+    var _a2;
+    const _appName = vue.unref(appName);
+    const _tableName = vue.unref(dataTable).name;
+    let result = await filterPanelTable.where("[app+tableName+userID]").equals([_appName, _tableName, _userID]).toArray();
+    let filterPanelOrder = result.length ? (_a2 = result[0].order) != null ? _a2 : [] : [];
+    const attrNames = vue.unref(filterPanel).getSelectedColumnAttrNames();
+    attrNames.sort((a1, a2) => {
+      const index1 = filterPanelOrder.indexOf(a1);
+      const index2 = filterPanelOrder.indexOf(a2);
+      if (index1 === -1 && index2 === -1) {
+        return 1;
+      }
+      if (index1 === -1) {
+        return 1;
+      }
+      if (index2 === -1) {
+        return -1;
+      }
+      return index1 - index2;
+    });
+    filterPanelTable.put({
+      app: _appName,
+      tableName: _tableName,
+      userID: _userID,
+      order: attrNames
+    });
+  });
+  const loadFilterPanelItemOrder = () => {
+    filterPanelTable.where("[app+tableName+userID]").equals([vue.unref(appName), vue.unref(dataTable).name, _userID]).toArray((res) => {
+      var _a2, _b;
+      selectedColumnAttrNames.value = (_b = (_a2 = res[0]) == null ? void 0 : _a2.order) != null ? _b : [];
+      vue.nextTick(() => {
+        vue.unref(filterPanel).ready = true;
+        vue.unref(filterPanel).changeOriginFilterParams();
+        vue.unref(filterPanel).changeOriginSearchValue();
+      });
+    });
+  };
+  if (!vue.unref(filterPanel).isInited) {
+    webBaseClientVue.useEventDispatcher(filterPanel, "initCompleted", loadFilterPanelItemOrder);
+  } else {
+    loadFilterPanelItemOrder();
+  }
+  vue.onBeforeUnmount(() => {
+    selectedColumnChangeSubscription.unsubscribe();
+  });
+  const columns = vue.computed(() => vue.unref(filterPanel).getColumns());
+  const instance = vue.getCurrentInstance();
+  return {
+    dataTable,
+    filterPanel,
+    currentFilterColumns,
+    searchParams,
+    selectedColumnAttrNames,
+    closableColumns,
+    handleFieldSearch,
+    searchValue,
+    isChange,
+    handleReset,
+    handleSearch
+  };
+};
+
+exports.useFilterPanel = useFilterPanel;

package/lib/plugins.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('./contextmenu/index.js');
+
+var plugins = [index.BwaContextmenu];
+
+exports["default"] = plugins;

package/lib/progress/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var install = require('element-plus/es/utils/vue/install');
+var progress = require('./progress.js');
+var progressItem = require('./progress-item.js');
+
+const BwaProgress = install.withInstall(progress["default"], {
+  ProgressItem: progressItem["default"]
+});
+const BwaProgressItem = install.withInstall(progressItem["default"]);
+
+exports.BwaProgress = BwaProgress;
+exports.BwaProgressItem = BwaProgressItem;
+exports["default"] = BwaProgress;

package/lib/progress/progress-item.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var rxjs = require('rxjs');
+var webBaseClientVue = require('@ctzy-web-client/web-base-client-vue');
+var _pluginVue_exportHelper = require('../_virtual/_plugin-vue_export-helper.js');
+
+const __default__ = vue.defineComponent({ name: "BwaProgressItem" });
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    width: { type: Number, default: 0 },
+    label: { type: String, required: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const { width, label } = vue.toRefs(props);
+    const ns = webBaseClientVue.useNamespace("progress-item");
+    const progressItemEl = vue.ref(null);
+    const progress = vue.inject(webBaseClientVue.progressKey);
+    const percent = vue.computed(() => vue.unref(width) / progress.max * 100 + "%");
+    const attrs = vue.useAttrs();
+    const id = progress.nextID();
+    const colorObservable = new rxjs.Observable(
+      (observer) => vue.watch(
+        vue.computed(() => attrs.style["--bwa-progress-item-color"]),
+        observer.next.bind(observer),
+        { immediate: true }
+      )
+    ).pipe(rxjs.delayWhen(() => rxjs.from(vue.nextTick())));
+    const widthObservable = new rxjs.Observable(
+      (observer) => vue.watch(width, observer.next.bind(observer), { immediate: true })
+    ).pipe(rxjs.map((width2) => parseInt(width2) || 0));
+    const labelObservable = new rxjs.Observable(
+      (observer) => vue.watch(label, observer.next.bind(observer), { immediate: true })
+    ).pipe();
+    const progressItemObservable = rxjs.combineLatest([
+      widthObservable,
+      labelObservable,
+      colorObservable
+    ]);
+    const subscription = progressItemObservable.subscribe({
+      next: ([width2, label2, color]) => {
+        progress.handleProgressItemCreate({
+          id,
+          width: width2,
+          label: label2,
+          color
+        });
+      },
+      complete: () => {
+        progress.handleProgressItemDestroy(id);
+      },
+      error: () => {
+        progress.handleProgressItemDestroy(id);
+      }
+    });
+    vue.onBeforeUnmount(subscription.unsubscribe.bind(subscription));
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(vue.unref(ns).b()),
+        style: vue.normalizeStyle({ width: vue.unref(percent) }),
+        ref_key: "progressItemEl",
+        ref: progressItemEl
+      }, null, 6);
+    };
+  }
+});
+var ProgressItem = /* @__PURE__ */ _pluginVue_exportHelper["default"](_sfc_main, [["__file", "progress-item.vue"]]);
+
+exports["default"] = ProgressItem;

package/lib/progress/progress.js

@@ -0,0 +1,78 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var ElementPlus = require('element-plus');
+var webBaseClientVue = require('@ctzy-web-client/web-base-client-vue');
+var useProgress = require('./use-progress.js');
+var _pluginVue_exportHelper = require('../_virtual/_plugin-vue_export-helper.js');
+
+const __default__ = vue.defineComponent({ name: "BwaProgress" });
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    max: { type: Number, default: 0 },
+    showLabel: { type: Boolean, default: true },
+    labelWidth: { type: String, default: "auto" }
+  },
+  setup(__props) {
+    const props = __props;
+    const { max } = vue.toRefs(props);
+    const ns = webBaseClientVue.useNamespace("progress");
+    const states = useProgress.useProgressState(props);
+    const { percent, handleProgressItemCreate, handleProgressItemDestroy, nextID } = useProgress.useProgress(props, states);
+    vue.provide(
+      webBaseClientVue.progressKey,
+      vue.reactive({ max, handleProgressItemCreate, handleProgressItemDestroy, nextID })
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElTooltip), {
+        placement: "bottom-start",
+        effect: "light",
+        "append-to": ".bwa-application"
+      }, {
+        content: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(vue.unref(ns).be("info", "wrapper"))
+          }, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(states).progressItemList, (item) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: item.id,
+                class: vue.normalizeClass(vue.unref(ns).be("item", "info")),
+                style: vue.normalizeStyle({ "--bwa-progress-item-dot-color": item.color })
+              }, [
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass(vue.unref(ns).be("item", "label"))
+                }, vue.toDisplayString(item.label), 3),
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass(vue.unref(ns).be("item", "value"))
+                }, vue.toDisplayString(item.width), 3)
+              ], 6);
+            }), 128))
+          ], 2)
+        ]),
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(vue.unref(ns).b())
+          }, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(ns).e("inner")),
+              style: vue.normalizeStyle({ "--bwa-progress-width": vue.unref(max) })
+            }, [
+              vue.renderSlot(_ctx.$slots, "default")
+            ], 6),
+            __props.showLabel ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass(vue.unref(ns).e("percent")),
+              style: vue.normalizeStyle({ "--bwa-progress-label-width": __props.labelWidth })
+            }, vue.toDisplayString(vue.unref(percent)) + "% ", 7)) : vue.createCommentVNode("v-if", true)
+          ], 2)
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+var Progress = /* @__PURE__ */ _pluginVue_exportHelper["default"](_sfc_main, [["__file", "progress.vue"]]);
+
+exports["default"] = Progress;