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

package/es/pct-filter-panel/pct-filter-panel.mjs

@@ -0,0 +1,251 @@
+import { defineComponent, watch, provide, reactive, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot, Fragment, renderList, createVNode, withCtx, createBlock, createCommentVNode, normalizeStyle, toDisplayString, isRef, createElementVNode, withModifiers, createTextVNode } from 'vue';
+import { useNamespace, filterPanelKey } from '@ctzy-web-client/web-base-client-vue';
+import { useFilterPanel } from './use-filter-panel.mjs';
+import PctFilterPanelItem from './pct-filter-panel-item.mjs';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.mjs';
+
+const __default__ = 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 = useNamespace("pctfilterpanel");
+    const {
+      dataTable,
+      filterPanel,
+      currentFilterColumns,
+      selectedColumnAttrNames,
+      closableColumns,
+      searchParams,
+      handleFieldSearch,
+      searchValue,
+      isChange,
+      handleReset,
+      handleSearch
+    } = useFilterPanel(props, { emit });
+    console.log(currentFilterColumns);
+    watch(
+      filterPanel,
+      (filterPanel2, _, onCleanup) => {
+        filterPanel2.existComponent = true;
+        onCleanup(() => {
+          filterPanel2.existComponent = false;
+        });
+      },
+      { immediate: true }
+    );
+    provide(
+      filterPanelKey,
+      reactive({
+        dataTable,
+        filterPanel,
+        currentFilterColumns,
+        showTitle: props.showTitle,
+        filterPanelLineNum: props.filterPanelLineNum
+      })
+    );
+    return (_ctx, _cache) => {
+      const _component_BwaPctMultipleMenuCondition = resolveComponent("BwaPctMultipleMenuCondition");
+      const _component_BwaPctInputCondition = resolveComponent("BwaPctInputCondition");
+      const _component_BwaPctDateRangeCondition = resolveComponent("BwaPctDateRangeCondition");
+      const _component_ElInput = resolveComponent("ElInput");
+      const _component_ElButton = resolveComponent("ElButton");
+      const _component_ElCheckbox = resolveComponent("ElCheckbox");
+      const _component_BwaAdvanceOption = resolveComponent("BwaAdvanceOption");
+      const _component_BwaAdvanceSelect = resolveComponent("BwaAdvanceSelect");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(ns).b())
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(currentFilterColumns), (column) => {
+            return renderSlot(_ctx.$slots, `condition-${column.attrName}`, {
+              key: column.attrName,
+              attrName: column.attrName
+            }, () => [
+              createVNode(PctFilterPanelItem, {
+                prop: column.fullAttrName
+              }, {
+                default: withCtx(({ data }) => {
+                  var _a, _b;
+                  return [
+                    !column.component || column.component === "BwaMultipleMenuCondition" || column.component === "BwaSingleMenuCondition" ? (openBlock(), 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"])) : createCommentVNode("v-if", true),
+                    column.component === "BwaInputCondition" ? (openBlock(), 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"])) : createCommentVNode("v-if", true),
+                    column.component === "BwaDateRangeCondition" ? (openBlock(), createBlock(_component_BwaPctDateRangeCondition, {
+                      key: 2,
+                      modelValue: data.value,
+                      "onUpdate:modelValue": ($event) => data.value = $event,
+                      showTitle: props.showTitle
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "showTitle"])) : createCommentVNode("v-if", true)
+                  ];
+                }),
+                _: 2
+              }, 1032, ["prop"])
+            ]);
+          }), 128))
+        ]),
+        __props.showSearch ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          style: 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 ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(unref(ns).e("title")),
+            style: { "padding-right": "8px" }
+          }, toDisplayString(__props.searchTitle), 3)) : createCommentVNode("v-if", true),
+          createVNode(_component_ElInput, {
+            "prefix-icon": "Search",
+            size: "small",
+            clearable: "",
+            modelValue: unref(searchValue),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(searchValue) ? searchValue.value = $event : null),
+            placeholder: __props.searchPlaceholder,
+            class: normalizeClass(unref(ns).e("search"))
+          }, null, 8, ["modelValue", "placeholder", "class"])
+        ], 4)) : createCommentVNode("v-if", true),
+        __props.showFieldOptions ? (openBlock(), createBlock(PctFilterPanelItem, {
+          key: 1,
+          style: { "width": "auto", "padding-right": "16px" }
+        }, {
+          default: withCtx(() => [
+            __props.showFieldOptions ? (openBlock(), createBlock(_component_BwaAdvanceSelect, {
+              key: 0,
+              modelValue: unref(selectedColumnAttrNames),
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(selectedColumnAttrNames) ? selectedColumnAttrNames.value = $event : null),
+              "show-selectIcon": false,
+              onSearch: unref(handleFieldSearch),
+              class: normalizeClass(unref(ns).e("options")),
+              source: "pct"
+            }, {
+              "reference-content": withCtx(() => [
+                createVNode(_component_ElButton, {
+                  size: "small",
+                  class: normalizeClass(unref(ns).e("filterBut"))
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", {
+                      class: normalizeClass(unref(ns).be("filter", "plus"))
+                    }, null, 2),
+                    createElementVNode("span", {
+                      class: normalizeClass(unref(ns).be("filter", "label"))
+                    }, " \u7B5B\u9009 ", 2)
+                  ]),
+                  _: 1
+                }, 8, ["class"])
+              ]),
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(closableColumns), (column) => {
+                  return openBlock(), createBlock(_component_BwaAdvanceOption, {
+                    value: column.fullAttrName,
+                    label: column.title,
+                    key: column.fullAttrName,
+                    class: normalizeClass(unref(ns).be("filter", "option"))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_component_ElCheckbox, {
+                        onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+                        }, ["prevent"])),
+                        modelValue: unref(selectedColumnAttrNames).includes(column.fullAttrName),
+                        class: normalizeClass(unref(ns).be("filter", "checkbox"))
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(column.title), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["modelValue", "class"]),
+                      createElementVNode("span", {
+                        class: normalizeClass(unref(ns).be("filter", "title"))
+                      }, toDisplayString(column.componentTitle), 3)
+                    ]),
+                    _: 2
+                  }, 1032, ["value", "label", "class"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue", "onSearch", "class"])) : createCommentVNode("v-if", true)
+          ]),
+          _: 1
+        })) : createCommentVNode("v-if", true),
+        createVNode(_component_ElButton, {
+          size: "small",
+          type: "primary",
+          class: normalizeClass(unref(ns).e("reset")),
+          onClick: unref(handleSearch)
+        }, {
+          default: withCtx(() => [
+            createTextVNode(" \u67E5\u8BE2 ")
+          ]),
+          _: 1
+        }, 8, ["class", "onClick"]),
+        createVNode(_component_ElButton, {
+          size: "small",
+          class: normalizeClass(unref(ns).e("reset")),
+          onClick: unref(handleReset)
+        }, {
+          default: withCtx(() => [
+            createTextVNode(" \u91CD\u7F6E ")
+          ]),
+          _: 1
+        }, 8, ["class", "onClick"]),
+        renderSlot(_ctx.$slots, "button")
+      ], 2);
+    };
+  }
+});
+var PctFilterPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "pct-filter-panel.vue"]]);
+
+export { PctFilterPanel as default };

package/es/pct-filter-panel/use-filter-panel-item.mjs

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

package/es/pct-filter-panel/use-filter-panel.mjs

@@ -0,0 +1,127 @@
+import { useProp } from 'element-plus';
+import { useService, useEventDispatcher, useValue } from '@ctzy-web-client/web-base-client-vue';
+import { computed, unref, watch, nextTick, onBeforeUnmount, getCurrentInstance } from 'vue';
+import { Observable } from 'rxjs';
+import { dataModelDB } from '../utils/db.mjs';
+
+const useFilterPanel = (props, context) => {
+  var _a;
+  const dataTable = useProp("dataTable");
+  const filterPanel = computed(() => unref(dataTable).filterPanel);
+  const filterPanelTable = dataModelDB.filterPanel;
+  const currentFilterColumns = computed(() => unref(filterPanel).getAppliedColumns());
+  const userService = useService("UserService");
+  const _userID = ((_a = userService == null ? void 0 : userService.userInfo) == null ? void 0 : _a.id) || "0";
+  const searchParams = computed(() => unref(filterPanel)._filterParams);
+  const selectedColumnAttrNames = computed({
+    get: () => unref(filterPanel).getSelectedColumnAttrNames(),
+    set: (v) => {
+      const oldSelectedColumnAttrNames = selectedColumnAttrNames.value;
+      unref(filterPanel).setSelectedColumnAttrNames(v);
+      if (unref(filterPanel).ready) {
+        const existsOldAttrNames = oldSelectedColumnAttrNames.filter((attrName) => v.includes(attrName));
+        if (existsOldAttrNames.length < oldSelectedColumnAttrNames.length) {
+          unref(dataTable).refresh();
+        }
+      }
+    }
+  });
+  const closableColumns = computed(() => unref(filterPanel).getSearchClosableColumns());
+  const searchValue = computed({
+    get: () => unref(filterPanel).getSearchValue(),
+    set: (v) => unref(filterPanel).setSeachValue(v, false)
+  });
+  const isChange = computed(() => unref(filterPanel).isChange());
+  watch(useProp("searchAttr"), (searchAttr) => {
+    unref(filterPanel).setSearchAttr(searchAttr);
+  }, {
+    immediate: true
+  });
+  watch(useProp("searchFields"), (searchFields) => {
+    unref(filterPanel).setSearchFields(searchFields);
+  }, {
+    immediate: true
+  });
+  const handleFieldSearch = (value) => {
+    unref(filterPanel).fieldSearchValue = value;
+  };
+  const handleReset = () => {
+    unref(filterPanel).resetFilterParams();
+    context.emit("reset");
+  };
+  const handleSearch = () => {
+    dataTable.value.load();
+  };
+  useEventDispatcher(filterPanel, "params-change", () => {
+    const _filterPanel = unref(filterPanel);
+    context.emit("filter", {
+      ..._filterPanel.getFilterParams(),
+      [_filterPanel.getSearchAttr()]: _filterPanel.getSearchValue()
+    });
+  });
+  const appName = useValue("AppName");
+  const selectedColumnChangeSubscription = new Observable((observer) => useEventDispatcher(filterPanel, "selected-column-change", observer.next.bind(observer))).subscribe(async () => {
+    var _a2;
+    const _appName = unref(appName);
+    const _tableName = 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 = 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([unref(appName), unref(dataTable).name, _userID]).toArray((res) => {
+      var _a2, _b;
+      selectedColumnAttrNames.value = (_b = (_a2 = res[0]) == null ? void 0 : _a2.order) != null ? _b : [];
+      nextTick(() => {
+        unref(filterPanel).ready = true;
+        unref(filterPanel).changeOriginFilterParams();
+        unref(filterPanel).changeOriginSearchValue();
+      });
+    });
+  };
+  if (!unref(filterPanel).isInited) {
+    useEventDispatcher(filterPanel, "initCompleted", loadFilterPanelItemOrder);
+  } else {
+    loadFilterPanelItemOrder();
+  }
+  onBeforeUnmount(() => {
+    selectedColumnChangeSubscription.unsubscribe();
+  });
+  const columns = computed(() => unref(filterPanel).getColumns());
+  const instance = getCurrentInstance();
+  return {
+    dataTable,
+    filterPanel,
+    currentFilterColumns,
+    searchParams,
+    selectedColumnAttrNames,
+    closableColumns,
+    handleFieldSearch,
+    searchValue,
+    isChange,
+    handleReset,
+    handleSearch
+  };
+};
+
+export { useFilterPanel };

package/es/plugins.mjs

@@ -0,0 +1,5 @@
+import { BwaContextmenu } from './contextmenu/index.mjs';
+
+var plugins = [BwaContextmenu];
+
+export { plugins as default };

package/es/progress/index.mjs

@@ -0,0 +1,10 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import Progress from './progress.mjs';
+import ProgressItem from './progress-item.mjs';
+
+const BwaProgress = withInstall(Progress, {
+  ProgressItem
+});
+const BwaProgressItem = withInstall(ProgressItem);
+
+export { BwaProgress, BwaProgressItem, BwaProgress as default };

package/es/progress/progress-item.mjs

@@ -0,0 +1,68 @@
+import { defineComponent, toRefs, ref, inject, computed, unref, useAttrs, watch, nextTick, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, normalizeStyle } from 'vue';
+import { Observable, delayWhen, from, map, combineLatest } from 'rxjs';
+import { useNamespace, progressKey } from '@ctzy-web-client/web-base-client-vue';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.mjs';
+
+const __default__ = 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 } = toRefs(props);
+    const ns = useNamespace("progress-item");
+    const progressItemEl = ref(null);
+    const progress = inject(progressKey);
+    const percent = computed(() => unref(width) / progress.max * 100 + "%");
+    const attrs = useAttrs();
+    const id = progress.nextID();
+    const colorObservable = new Observable(
+      (observer) => watch(
+        computed(() => attrs.style["--bwa-progress-item-color"]),
+        observer.next.bind(observer),
+        { immediate: true }
+      )
+    ).pipe(delayWhen(() => from(nextTick())));
+    const widthObservable = new Observable(
+      (observer) => watch(width, observer.next.bind(observer), { immediate: true })
+    ).pipe(map((width2) => parseInt(width2) || 0));
+    const labelObservable = new Observable(
+      (observer) => watch(label, observer.next.bind(observer), { immediate: true })
+    ).pipe();
+    const progressItemObservable = 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);
+      }
+    });
+    onBeforeUnmount(subscription.unsubscribe.bind(subscription));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(unref(ns).b()),
+        style: normalizeStyle({ width: unref(percent) }),
+        ref_key: "progressItemEl",
+        ref: progressItemEl
+      }, null, 6);
+    };
+  }
+});
+var ProgressItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "progress-item.vue"]]);
+
+export { ProgressItem as default };

package/es/progress/progress.mjs

@@ -0,0 +1,74 @@
+import { defineComponent, toRefs, provide, reactive, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeClass, createElementBlock, Fragment, renderList, normalizeStyle, toDisplayString, renderSlot, createCommentVNode } from 'vue';
+import { ElTooltip } from 'element-plus';
+import { useNamespace, progressKey } from '@ctzy-web-client/web-base-client-vue';
+import { useProgressState, useProgress } from './use-progress.mjs';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.mjs';
+
+const __default__ = 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 } = toRefs(props);
+    const ns = useNamespace("progress");
+    const states = useProgressState(props);
+    const { percent, handleProgressItemCreate, handleProgressItemDestroy, nextID } = useProgress(props, states);
+    provide(
+      progressKey,
+      reactive({ max, handleProgressItemCreate, handleProgressItemDestroy, nextID })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElTooltip), {
+        placement: "bottom-start",
+        effect: "light",
+        "append-to": ".bwa-application"
+      }, {
+        content: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass(unref(ns).be("info", "wrapper"))
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(states).progressItemList, (item) => {
+              return openBlock(), createElementBlock("div", {
+                key: item.id,
+                class: normalizeClass(unref(ns).be("item", "info")),
+                style: normalizeStyle({ "--bwa-progress-item-dot-color": item.color })
+              }, [
+                createElementVNode("span", {
+                  class: normalizeClass(unref(ns).be("item", "label"))
+                }, toDisplayString(item.label), 3),
+                createElementVNode("span", {
+                  class: normalizeClass(unref(ns).be("item", "value"))
+                }, toDisplayString(item.width), 3)
+              ], 6);
+            }), 128))
+          ], 2)
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass(unref(ns).b())
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(unref(ns).e("inner")),
+              style: normalizeStyle({ "--bwa-progress-width": unref(max) })
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 6),
+            __props.showLabel ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(unref(ns).e("percent")),
+              style: normalizeStyle({ "--bwa-progress-label-width": __props.labelWidth })
+            }, toDisplayString(unref(percent)) + "% ", 7)) : createCommentVNode("v-if", true)
+          ], 2)
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+var Progress = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "progress.vue"]]);
+
+export { Progress as default };

package/es/progress/use-progress.mjs

@@ -0,0 +1,46 @@
+import { reactive, computed, unref } from 'vue';
+
+let uid = 1;
+const useProgressState = (props) => reactive({
+  progressItemList: []
+});
+const useProgress = (props, states) => {
+  const max = computed(() => parseFloat(props.max));
+  const percent = computed(() => {
+    const total = states.progressItemList.reduce((result, progressItem) => result + progressItem.width, 0);
+    if (unref(max) === 0 || isNaN(unref(max))) {
+      return 0;
+    }
+    return parseInt(total / unref(max) * 100);
+  });
+  const removeProgressItem = (id) => {
+    states.progressItemList = states.progressItemList.filter((item) => item.id === id);
+  };
+  const addProgressItem = (progressItem) => {
+    const index = states.progressItemList.findIndex((item) => item.id === progressItem.id);
+    if (index !== -1) {
+    }
+    if (index === -1) {
+      states.progressItemList.push(progressItem);
+      return;
+    }
+    states.progressItemList.splice(index, 1, progressItem);
+  };
+  const handleProgressItemCreate = (progressItem) => {
+    addProgressItem(progressItem);
+  };
+  const handleProgressItemDestroy = (id) => {
+    removeProgressItem(id);
+  };
+  const nextID = () => {
+    return uid++;
+  };
+  return {
+    percent,
+    handleProgressItemCreate,
+    handleProgressItemDestroy,
+    nextID
+  };
+};
+
+export { useProgress, useProgressState };

package/es/utils/db.mjs

@@ -0,0 +1,9 @@
+import Dexie from 'dexie';
+
+const dataModelDB = new Dexie("DataModel");
+dataModelDB.version(1).stores({
+  filterPanel: "[app+tableName+userID]",
+  tableHeaderSettings: "[app+tableName+userID]"
+});
+
+export { dataModelDB };