v-dict 1.0.1 → 1.0.4

package/README.md

@@ -0,0 +1,140 @@
+<!--
+ * @Date: 2024-01-12 02:58:43
+ * @Author: fangruiyi
+ * @LastEditors: fangruiyi
+ * @Description:
+-->
+
+# Vue3 Dict Manager
+
+## Installation
+
+```sh
+npm i v-dict
+```
+
+## Examples
+
+### dict.ts
+
+```ts
+import { createDictManager, defineDictData } from 'v-dict'
+
+export const dm = createDictManager({
+  // method to fetch remote dict
+  fetch: (code) =>
+    Promise.resolve([
+      { label: 'xx', value: 'xx' },
+      { label: 'xx', value: 'xx' }
+    ]),
+  // extra attr
+  extra: ({ loadPromise, load, list, map, E }) => {
+    return {
+      getLabel: (value: string) => map[value]?.label
+    }
+  }
+})
+
+// same api for local dict or remote dict
+// local
+export const useStatusDict = dm.defineDict('STATUS', {
+  data: defineDictData({
+    ENABLED: {
+      label: 'Enabled',
+      // extra attr
+      color: 'green'
+    },
+    DISABLED: {
+      label: 'Disabled',
+      color: 'red'
+    }
+  })
+})
+// remote
+export const useRemoteStatusDict = dm.defineDict('REMOTE_STATUS', {
+  remote: true,
+  // overwrite dm fetch
+  fetch: (code) =>
+   // code = 'REMOTE_STATUS'
+    Promise.resolve([
+      { label: 'Enabled', value: 'ENABLED', color: 'green' },
+      { label: 'Disabled', value: 'DISABLED' color: 'red' }
+    ]),
+  // merge dm extra
+  extra: ({ loadPromise, load, list, map, E }) => {
+    return {
+      getItem: (value: string) => map[value]
+    }
+  }
+})
+
+```
+
+### xx.vue
+
+```vue
+<template>
+  <div>
+    {{ statusDict.E }}
+    {{ statusDict.map }}
+    {{ statusDict.list }}
+    {{ statusDict.getLabel(E.ENABLED) }}
+    {{ statusDict.getItem(E.DISABLED) }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRemoteStatusDict } from './dict'
+import { onMounted } from 'vue'
+
+const statusDict = useRemoteStatusDict({
+  // Data sharing by default, independent data source when clone is true
+  clone: true,
+  // Whether the remote dictionary loads data immediately
+  immediate: false
+}) // statusDict is reactive!!!
+
+const { E, map, list } = statusDict
+
+/* 
+E: {
+  ENABLED: ENABLED,
+  DISABLED: DISABLED
+}
+
+map: {
+  ENABLED: {
+    label: 'Enabled',
+    value: 'ENABLED',
+    color: 'green'
+  },
+  DISABLED: {
+    label: 'Disabled',
+    value: 'DISABLED',
+    color: 'red'
+  }
+}
+
+list: [
+  {
+    label: 'Enabled',
+    value: 'ENABLED',
+    color: 'green'
+  },
+  {
+    label: 'Disabled',
+    value: 'DISABLED',
+    color: 'red'
+  }
+]
+*/
+
+onMounted(async () => {
+  await statusDict.load()
+
+  await statusDict.loadPromise // immediate = true, using loadPromise to wait load
+  // do after dict load
+  console.log(statusDict.list)
+})
+</script>
+```

package/dist/index.cjs

@@ -63,20 +63,20 @@ var defineDictData = (data) => data;
 function createDictManager(managerOptions = {}) {
   const { fetch: managerFetch, extra: managerExtra } = managerOptions;
   const maps = vue.reactive({});
-  const defineDict = (code, options) => {
+  const defineDict = (code, defineDictOptions) => {
     var _a;
     const {
       data = {},
       remote = false,
       fetch = managerFetch,
       extra
-    } = (_a = lodashEs.isFunction(options) ? options() : options) != null ? _a : {};
-    const managerLoadPromise = vue.shallowRef(null);
+    } = (_a = lodashEs.isFunction(defineDictOptions) ? defineDictOptions() : defineDictOptions) != null ? _a : {};
+    const managerLoadPromise = vue.shallowRef(createPromise());
     maps[code] = /* @__PURE__ */ new Map();
-    async function loadDict(ctx, mapRef) {
+    async function loadDict(options, mapRef) {
       const dataMap = toMap(lodashEs.cloneDeep(data));
       if (remote) {
-        await (fetch == null ? void 0 : fetch(code, ctx).then((res) => {
+        await (fetch == null ? void 0 : fetch(code, options).then((res) => {
           mapRef.value = toMap(res != null ? res : []);
           dataMap.forEach((value, key) => {
             if (mapRef.value.has(key)) {
@@ -91,7 +91,7 @@ function createDictManager(managerOptions = {}) {
     return (useDictOptions) => {
       useDictOptions = lodashEs.merge({ clone: false, immediate: false }, useDictOptions);
       const { clone, immediate } = useDictOptions;
-      const loadPromise = !clone ? managerLoadPromise : vue.shallowRef(null);
+      const loadPromise = !clone ? managerLoadPromise : vue.shallowRef(createPromise());
       const mapRef = !clone ? vue.toRef(maps, code) : vue.ref(/* @__PURE__ */ new Map());
       const objRef = vue.ref({});
       const listRef = vue.ref([]);
@@ -115,9 +115,9 @@ function createDictManager(managerOptions = {}) {
       } else {
         load();
       }
-      function load(ctx2) {
+      function load(options) {
         loadPromise.value = createPromise();
-        loadDict(lodashEs.merge({}, useDictOptions, ctx2), mapRef).then(() => {
+        loadDict(lodashEs.merge({}, useDictOptions, options), mapRef).then(() => {
           var _a2;
           (_a2 = loadPromise.value) == null ? void 0 : _a2.resolve();
         });
@@ -127,12 +127,12 @@ function createDictManager(managerOptions = {}) {
         map: objRef,
         list: listRef,
         E,
-        loadPromise
+        loadPromise,
+        load
       };
       const reactiveCtx = vue.reactive(ctx);
       return vue.reactive({
         ...ctx,
-        load,
         ...managerExtra == null ? void 0 : managerExtra(reactiveCtx),
         ...extra == null ? void 0 : extra(reactiveCtx)
       });

package/dist/index.js

@@ -61,20 +61,20 @@ var defineDictData = (data) => data;
 function createDictManager(managerOptions = {}) {
   const { fetch: managerFetch, extra: managerExtra } = managerOptions;
   const maps = reactive({});
-  const defineDict = (code, options) => {
+  const defineDict = (code, defineDictOptions) => {
     var _a;
     const {
       data = {},
       remote = false,
       fetch = managerFetch,
       extra
-    } = (_a = isFunction(options) ? options() : options) != null ? _a : {};
-    const managerLoadPromise = shallowRef(null);
+    } = (_a = isFunction(defineDictOptions) ? defineDictOptions() : defineDictOptions) != null ? _a : {};
+    const managerLoadPromise = shallowRef(createPromise());
     maps[code] = /* @__PURE__ */ new Map();
-    async function loadDict(ctx, mapRef) {
+    async function loadDict(options, mapRef) {
       const dataMap = toMap(cloneDeep(data));
       if (remote) {
-        await (fetch == null ? void 0 : fetch(code, ctx).then((res) => {
+        await (fetch == null ? void 0 : fetch(code, options).then((res) => {
           mapRef.value = toMap(res != null ? res : []);
           dataMap.forEach((value, key) => {
             if (mapRef.value.has(key)) {
@@ -89,7 +89,7 @@ function createDictManager(managerOptions = {}) {
     return (useDictOptions) => {
       useDictOptions = merge({ clone: false, immediate: false }, useDictOptions);
       const { clone, immediate } = useDictOptions;
-      const loadPromise = !clone ? managerLoadPromise : shallowRef(null);
+      const loadPromise = !clone ? managerLoadPromise : shallowRef(createPromise());
       const mapRef = !clone ? toRef(maps, code) : ref(/* @__PURE__ */ new Map());
       const objRef = ref({});
       const listRef = ref([]);
@@ -113,9 +113,9 @@ function createDictManager(managerOptions = {}) {
       } else {
         load();
       }
-      function load(ctx2) {
+      function load(options) {
         loadPromise.value = createPromise();
-        loadDict(merge({}, useDictOptions, ctx2), mapRef).then(() => {
+        loadDict(merge({}, useDictOptions, options), mapRef).then(() => {
           var _a2;
           (_a2 = loadPromise.value) == null ? void 0 : _a2.resolve();
         });
@@ -125,12 +125,12 @@ function createDictManager(managerOptions = {}) {
         map: objRef,
         list: listRef,
         E,
-        loadPromise
+        loadPromise,
+        load
       };
       const reactiveCtx = reactive(ctx);
       return reactive({
         ...ctx,
-        load,
         ...managerExtra == null ? void 0 : managerExtra(reactiveCtx),
         ...extra == null ? void 0 : extra(reactiveCtx)
       });

package/dist/type.d.ts

@@ -1,5 +1,5 @@
 import type { O } from 'ts-toolbelt';
-import type { Except, Simplify, ValueOf } from 'type-fest';
+import type { Simplify, ValueOf } from 'type-fest';
 import type { createPromise } from './create-promise';
 export type Recordable<T = any> = Record<string, T>;
 export type Getter<T> = () => T;
@@ -10,29 +10,33 @@ export type DictItem = {
     label: string;
     value: string;
 };
-export type DictItemRecord = Simplify<DictItem & Recordable>;
+export type DictItemRecord = {
+    label: string;
+    value: string;
+} & Recordable;
 export type DictMap = Map<string, DictItemRecord>;
-export type Fetch = (code: string, ctx: any) => Promise<DictItemRecord[]>;
+export type Fetch = (code: string, options?: any) => Promise<DictItemRecord[]>;
 export interface CreateDictManager<E extends ExtraGetter> {
     fetch?: Fetch;
     extra?: E;
 }
-export type ExtraGetter<D extends Dict<string> = Dict<string>> = (dict: Except<D, 'load'>) => Recordable;
+export type ExtraGetter<D extends Dict<string> = Dict<string>> = (dict: D) => Recordable;
 export type UseDictOptions = {
     clone?: boolean;
     immediate?: boolean;
 } & Recordable;
+type ExtractFetchOptions<F extends Fetch> = Parameters<F>[1] extends infer T ? T extends undefined ? {} : T : never;
 export interface DefineDict<Extra extends ExtraGetter> {
     <R extends boolean, F extends Fetch, D extends Recordable<Recordable>, E extends ExtraGetter>(code: string, options?: MaybeGetter<{
         remote?: R;
         fetch?: F;
         data?: D;
         extra?: E;
-    }>): (options?: UseDictOptions & GetFetchCtx<F>) => CreateDict<D, F> & ReturnType<Extra> & ReturnType<E>;
+    }>): (options?: Simplify<UseDictOptions & ExtractFetchOptions<F>>) => Simplify<CreateDict<D, F> & ReturnType<Extra> & ReturnType<E>>;
 }
-type GetFetchCtx<F extends Fetch> = Parameters<F>[1] extends undefined ? {} : Parameters<F>[1];
-type CreateDict<D extends Recordable<Recordable>, F extends Fetch> = Dict<keyof D, O.Merge<UnwrapArray<Awaited<ReturnType<F>>>, ValueOf<D>>, UseDictOptions & GetFetchCtx<F>>;
-export type Dict<Key extends PropertyKey = PropertyKey, ExtraItem extends Recordable = Recordable, Ctx = any> = {
+type CreateDict<D extends Recordable<Recordable>, F extends Fetch> = Dict<keyof D, O.Merge<UnwrapArray<Awaited<ReturnType<F>>>, ValueOf<D>>, UseDictOptions & ExtractFetchOptions<F>>;
+export type LoadPromise = ReturnType<typeof createPromise<void>>;
+export type Dict<Key extends PropertyKey = PropertyKey, ExtraItem extends Recordable = Recordable, Options = Recordable> = {
     list: Simplify<DictItem & ExtraItem>[];
     E: {
         [K in Key]: K;
@@ -40,8 +44,7 @@ export type Dict<Key extends PropertyKey = PropertyKey, ExtraItem extends Record
     map: {
         [K in Key]: Simplify<DictItem & ExtraItem>;
     } & Recordable<Simplify<DictItem & ExtraItem>>;
-    loadPromise: Promise<void>;
-    load: (ctx: Ctx) => Promise<void>;
+    loadPromise: LoadPromise;
+    load: (options?: Options) => LoadPromise;
 };
-export type LoadPromise = ReturnType<typeof createPromise<void>>;
 export {};

package/dist/util.d.ts

@@ -1,16 +1,8 @@
 import type { WritableDeep } from 'type-fest';
 import type { DictItemRecord, DictMap, Recordable } from './type';
-export declare function mapToObj(map: DictMap, obj?: Recordable<DictItemRecord>): Recordable<{
-    [x: string]: any;
-    label: string;
-    value: string;
-}>;
+export declare function mapToObj(map: DictMap, obj?: Recordable<DictItemRecord>): Recordable<DictItemRecord>;
 export declare function objToMap(obj: Recordable<DictItemRecord>): DictMap;
-export declare function mapToList(map: DictMap, list?: DictItemRecord[]): {
-    [x: string]: any;
-    label: string;
-    value: string;
-}[];
+export declare function mapToList(map: DictMap, list?: DictItemRecord[]): DictItemRecord[];
 export declare function listToMap(list: DictItemRecord[]): DictMap;
 export declare function toMap(data: Recordable<DictItemRecord> | DictItemRecord[]): DictMap;
 export declare const defineDictData: <const T extends {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "v-dict",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "type": "module",
-  "description": "vue3 dict manager",
+  "description": "Vue3 Dict Manager",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "typings": "dist/index.d.ts",