npm - api-dict-select - Versions diffs - 0.1.0 - Mend

api-dict-select 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +84 -0
package/dist/index.js +214 -0
package/dist/index.umd.cjs +1 -0
package/dist/types/DictSelect.vue.d.ts +92 -0
package/dist/types/cache.d.ts +7 -0
package/dist/types/index.d.ts +10 -0
package/dist/types/types.d.ts +10 -0
package/package.json +37 -0

package/README.md ADDED Viewed

@@ -0,0 +1,84 @@
+# `api-dict-select`
+一个可复用的下拉组件。传入接口方法后自动请求选项数据，支持缓存、联动参数、`label` 回传和多选。
+## 目录说明
+```text
+packages/dict-select
+```
+这个目录已经是一个独立 npm 包骨架，后续可以单独安装依赖、打包和发布。
+## 本地开发
+```bash
+cd packages/dict-select
+npm install
+npm run build
+```
+## 发布
+发布前按需修改当前目录下 `package.json` 的包名和版本号，再执行：
+```bash
+cd packages/dict-select
+npm publish
+```
+如果要发私服：
+```bash
+npm publish --registry=http://your-registry
+```
+## 使用方式
+```ts
+import { createApp } from 'vue';
+import ElementPlus from 'element-plus';
+import DictSelect from 'api-dict-select';
+import 'element-plus/dist/index.css';
+const app = createApp(App);
+app.use(ElementPlus);
+app.use(DictSelect);
+app.mount('#app');
+```
+```vue
+<template>
+  <DictSelect
+    v-model="value"
+    :api="getOptions"
+    option-label="text"
+    option-value="code"
+    :param="{ type: 'status' }"
+  />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref();
+const getOptions = async (params: Record<string, any>) => {
+  return Promise.resolve({
+    result: {
+      list: [
+        { code: 1, text: '启用' },
+        { code: 0, text: '停用' },
+      ],
+    },
+  });
+};
+</script>
+```
+## 当前版本特点
+- 不依赖业务项目内的 `pinia store`。
+- 使用包内缓存，可直接在不同项目中复用。
+- 支持 `cacheKey`，避免同接口不同参数时缓存串数据。
+- 支持 `transform`，便于兼容不同接口返回结构。

package/dist/index.js ADDED Viewed

@@ -0,0 +1,214 @@
+import { defineComponent as z, useModel as p, ref as B, computed as U, watch as v, resolveComponent as D, openBlock as M, createBlock as L, withCtx as _, createElementBlock as G, Fragment as H, renderList as P, mergeModels as N } from "vue";
+const O = /* @__PURE__ */ new Map(), Q = () => O, W = (u) => {
+  if (u) {
+    O.delete(u);
+    return;
+  }
+  O.clear();
+}, I = /* @__PURE__ */ z({
+  __name: "DictSelect",
+  props: /* @__PURE__ */ N({
+    placeholder: { default: "全部" },
+    disabled: { type: Boolean, default: !1 },
+    optionLabel: { default: "k" },
+    optionValue: { default: "v" },
+    optionDisabledField: { default: "text" },
+    optionDisabledValue: { type: [String, Number, Boolean], default: "disable" },
+    filter: { type: Boolean, default: !1 },
+    clearable: { type: Boolean, default: !0 },
+    vModelToNumber: { type: Boolean, default: !1 },
+    vModelToString: { type: Boolean, default: !1 },
+    isBuffer: { type: Boolean, default: !0 },
+    isLabel: { type: Boolean, default: !1 },
+    api: {},
+    mock: { default: () => [] },
+    multiple: { type: Boolean, default: !1 },
+    param: { default: () => ({}) },
+    callApiIfNeeded: { type: Boolean, default: !0 },
+    cacheKey: { default: "" },
+    transform: { type: Function, default: void 0 },
+    immediate: { type: Boolean, default: !0 },
+    autoClearInvalidValue: { type: Boolean, default: !0 }
+  }, {
+    modelValue: {},
+    modelModifiers: {},
+    options: {},
+    optionsModifiers: {},
+    response: {},
+    responseModifiers: {},
+    loading: { type: Boolean },
+    loadingModifiers: {},
+    selectedOption: {},
+    selectedOptionModifiers: {}
+  }),
+  emits: /* @__PURE__ */ N(["label", "allData", "options", "loaded", "error", "onClear"], ["update:modelValue", "update:options", "update:response", "update:loading", "update:selectedOption"]),
+  setup(u, { expose: w, emit: T }) {
+    const e = u, n = p(u, "modelValue"), A = p(u, "options"), K = p(u, "response"), E = p(u, "loading"), k = p(u, "selectedOption"), o = B([]), m = B(!1), d = B(), g = Q();
+    let y = 0;
+    const c = T, C = (l) => {
+      var a, i, t;
+      return ((a = l == null ? void 0 : l.result) == null ? void 0 : a.list) || ((i = l == null ? void 0 : l.result) == null ? void 0 : i.data) || ((t = l == null ? void 0 : l.result) == null ? void 0 : t.result) || (l == null ? void 0 : l.result) || (l == null ? void 0 : l.data) || l || [];
+    }, F = () => !e.param || Object.keys(e.param).length === 0 ? !0 : Object.values(e.param).every(
+      (l) => l != null && l !== ""
+    ), S = () => {
+      var a;
+      return `${e.cacheKey || ((a = e.api) == null ? void 0 : a.name) || "dict-select"}:${JSON.stringify(e.param || {})}`;
+    }, f = () => e.multiple ? Array.isArray(n.value) ? o.value.filter(
+      (l) => n.value.includes(l[e.optionValue])
+    ) : [] : o.value.find(
+      (l) => l[e.optionValue] === n.value
+    ), s = () => {
+      A.value = o.value, K.value = d.value, E.value = m.value, k.value = f();
+    }, j = (l) => {
+      e.vModelToNumber && l.forEach((a) => {
+        a[e.optionValue] = Number(a[e.optionValue]);
+      }), e.vModelToString && l.forEach((a) => {
+        a[e.optionValue] = String(a[e.optionValue]);
+      });
+    }, J = () => {
+      if (!e.autoClearInvalidValue)
+        return;
+      if (e.multiple) {
+        if (Array.isArray(n.value) && n.value.length > 0) {
+          const a = n.value.filter(
+            (i) => o.value.some((t) => t[e.optionValue] === i)
+          );
+          a.length !== n.value.length && (n.value = a);
+        }
+        return;
+      }
+      o.value.findIndex(
+        (a) => a[e.optionValue] === n.value
+      ) === -1 && (n.value = void 0);
+    }, R = () => {
+      c("onClear");
+    }, b = (l, a, i) => {
+      o.value = l, d.value = a, j(o.value), J(), s(), c("loaded", {
+        options: o.value,
+        response: d.value,
+        fromCache: i
+      });
+    }, V = async (l = !1) => {
+      if (e.mock.length > 0) {
+        b(e.mock, e.mock, !1);
+        return;
+      }
+      if (!e.api) {
+        o.value = [], d.value = void 0, s();
+        return;
+      }
+      if (!e.callApiIfNeeded || !F()) {
+        o.value = [], d.value = void 0, s();
+        return;
+      }
+      const a = S();
+      if (!l && e.isBuffer && g.has(a)) {
+        const t = g.get(a);
+        b((t == null ? void 0 : t.options) || [], t == null ? void 0 : t.response, !0);
+        return;
+      }
+      const i = ++y;
+      m.value = !0, s();
+      try {
+        const t = await e.api(e.param);
+        if (i !== y)
+          return;
+        const r = e.transform ? e.transform(C(t), t) : C(t), x = Array.isArray(r) ? r : [];
+        e.isBuffer && g.set(a, {
+          options: x,
+          response: t
+        }), b(x, t, !1);
+      } catch (t) {
+        if (i !== y)
+          return;
+        c("error", t), o.value = [], d.value = void 0, s();
+      } finally {
+        i === y && (m.value = !1, s());
+      }
+    }, q = async (l = !0) => {
+      await V(l);
+    }, $ = () => {
+      W(S());
+    }, h = U(() => {
+      if (e.multiple) {
+        const a = f();
+        return Array.isArray(a) ? a.map((i) => i[e.optionLabel]) : [];
+      }
+      const l = f();
+      return !l || Array.isArray(l) ? "" : l[e.optionLabel] ?? "";
+    });
+    return v(
+      () => o.value,
+      () => {
+        c("options", o.value), A.value = o.value;
+      }
+    ), v(
+      () => e.mock,
+      () => {
+        if (e.mock.length > 0) {
+          b(e.mock, e.mock, !1);
+          return;
+        }
+        e.api || (o.value = [], d.value = void 0, s());
+      }
+    ), v(
+      () => e.api,
+      () => {
+        e.immediate && V();
+      },
+      { immediate: e.immediate }
+    ), v(
+      () => e.param,
+      (l, a) => {
+        JSON.stringify(l) !== JSON.stringify(a) && V();
+      },
+      { deep: !0 }
+    ), v(
+      () => [n.value, o.value],
+      () => {
+        const l = f();
+        k.value = l, e.isLabel && c(
+          "label",
+          Array.isArray(h.value) ? h.value.join(",") : h.value
+        ), c("allData", l);
+      },
+      { immediate: !0, deep: !0 }
+    ), w({
+      refresh: q,
+      clearCache: $,
+      getOptions: () => o.value,
+      getResponse: () => d.value,
+      getSelectedOption: f
+    }), (l, a) => {
+      const i = D("el-option"), t = D("el-select");
+      return M(), L(t, {
+        modelValue: n.value,
+        "onUpdate:modelValue": a[0] || (a[0] = (r) => n.value = r),
+        filterable: e.filter,
+        disabled: e.disabled,
+        placeholder: e.placeholder,
+        clearable: e.clearable,
+        multiple: e.multiple,
+        loading: m.value,
+        onClear: R
+      }, {
+        default: _(() => [
+          (M(!0), G(H, null, P(o.value, (r) => (M(), L(i, {
+            key: r[e.optionValue],
+            label: r[e.optionLabel],
+            value: r[e.optionValue],
+            disabled: r[e.optionDisabledField] === e.optionDisabledValue
+          }, null, 8, ["label", "value", "disabled"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["modelValue", "filterable", "disabled", "placeholder", "clearable", "multiple", "loading"]);
+    };
+  }
+}), X = I;
+X.install = (u) => {
+  u.component("DictSelect", I);
+};
+export {
+  I as DictSelect,
+  X as default
+};

package/dist/index.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/dist/types/DictSelect.vue.d.ts ADDED Viewed

@@ -0,0 +1,92 @@
+import type { ApiFunction, OptionItem, TransformFunction } from './types';
+type __VLS_Props = {
+    placeholder?: string;
+    disabled?: boolean;
+    optionLabel?: string;
+    optionValue?: string;
+    optionDisabledField?: string;
+    optionDisabledValue?: string | number | boolean;
+    filter?: boolean;
+    clearable?: boolean;
+    vModelToNumber?: boolean;
+    vModelToString?: boolean;
+    isBuffer?: boolean;
+    isLabel?: boolean;
+    api?: ApiFunction;
+    mock?: OptionItem[];
+    multiple?: boolean;
+    param?: Record<string, any>;
+    callApiIfNeeded?: boolean;
+    cacheKey?: string;
+    transform?: TransformFunction;
+    immediate?: boolean;
+    autoClearInvalidValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: any;
+    'options'?: OptionItem[] | undefined;
+    'response'?: any;
+    'loading'?: boolean | undefined;
+    'selectedOption'?: OptionItem | OptionItem[] | undefined;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
+    refresh: (force?: boolean) => Promise<void>;
+    clearCache: () => void;
+    getOptions: () => OptionItem[];
+    getResponse: () => any;
+    getSelectedOption: () => OptionItem | OptionItem[] | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    options: (args_0: OptionItem[]) => any;
+    label: (args_0: string) => any;
+    allData: (args_0: OptionItem | OptionItem[] | undefined) => any;
+    loaded: (args_0: {
+        options: OptionItem[];
+        response: any;
+        fromCache: boolean;
+    }) => any;
+    error: (args_0: unknown) => any;
+    onClear: () => any;
+    "update:modelValue": (value: any) => any;
+    "update:options": (value: OptionItem[] | undefined) => any;
+    "update:response": (value: any) => any;
+    "update:loading": (value: boolean | undefined) => any;
+    "update:selectedOption": (value: OptionItem | OptionItem[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onOptions?: ((args_0: OptionItem[]) => any) | undefined;
+    onLabel?: ((args_0: string) => any) | undefined;
+    onAllData?: ((args_0: OptionItem | OptionItem[] | undefined) => any) | undefined;
+    onLoaded?: ((args_0: {
+        options: OptionItem[];
+        response: any;
+        fromCache: boolean;
+    }) => any) | undefined;
+    onError?: ((args_0: unknown) => any) | undefined;
+    onOnClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:options"?: ((value: OptionItem[] | undefined) => any) | undefined;
+    "onUpdate:response"?: ((value: any) => any) | undefined;
+    "onUpdate:loading"?: ((value: boolean | undefined) => any) | undefined;
+    "onUpdate:selectedOption"?: ((value: OptionItem | OptionItem[] | undefined) => any) | undefined;
+}>, {
+    placeholder: string;
+    disabled: boolean;
+    optionLabel: string;
+    optionValue: string;
+    optionDisabledField: string;
+    optionDisabledValue: string | number | boolean;
+    filter: boolean;
+    clearable: boolean;
+    vModelToNumber: boolean;
+    vModelToString: boolean;
+    isBuffer: boolean;
+    isLabel: boolean;
+    mock: OptionItem[];
+    multiple: boolean;
+    param: Record<string, any>;
+    callApiIfNeeded: boolean;
+    cacheKey: string;
+    transform: TransformFunction;
+    immediate: boolean;
+    autoClearInvalidValue: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/cache.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export type OptionItem = Record<string, any>;
+export interface CacheEntry {
+    options: OptionItem[];
+    response: any;
+}
+export declare const getOptionCache: () => Map<string, CacheEntry>;
+export declare const clearOptionCache: (key?: string) => void;

package/dist/types/index.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import type { App } from 'vue';
+import DictSelect from './DictSelect.vue';
+import type { DictSelectExpose, OptionItem } from './types';
+type DictSelectPlugin = typeof DictSelect & {
+    install: (app: App) => void;
+};
+declare const plugin: DictSelectPlugin;
+export default plugin;
+export { DictSelect };
+export type { DictSelectExpose, OptionItem };

package/dist/types/types.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+export type OptionItem = Record<string, any>;
+export type ApiFunction = (params?: Record<string, any>) => Promise<any>;
+export type TransformFunction = (raw: any, response: any) => OptionItem[];
+export interface DictSelectExpose {
+    refresh: (force?: boolean) => Promise<void>;
+    clearCache: () => void;
+    getOptions: () => OptionItem[];
+    getResponse: () => any;
+    getSelectedOption: () => OptionItem | OptionItem[] | undefined;
+}

package/package.json ADDED Viewed

@@ -0,0 +1,37 @@
+{
+  "name": "api-dict-select",
+  "version": "0.1.0",
+  "description": "A reusable select component that loads options from an API automatically.",
+  "type": "module",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist/types",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "element-plus": "^2.7.2",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.4",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vue": "^3.5.12",
+    "vue-tsc": "^2.1.10"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}