@oiij/naive-ui 0.0.1 → 0.0.2

package/dist/index.d.ts

@@ -1,178 +1,51 @@
-import * as async_validator from 'async-validator';
-import * as vue from 'vue';
-import { Ref, ComputedRef } from 'vue';
-import { FormRules, FormItemRule, FormInst, GlobalThemeOverrides, NDateLocale } from 'naive-ui';
-import * as naive_ui_es_themes_interface from 'naive-ui/es/themes/interface';
+import { ComputedRef, Reactive, Ref } from "vue";
+import { FormInst, FormItemRule, FormRules, GlobalThemeOverrides, NDateLocale, darkTheme, enUS, zhCN } from "naive-ui";
+import { ValidateError } from "async-validator";
 
-interface NaiveFormOptions<T extends object = Record<string, any>> {
-    value?: T;
-    rules?: Partial<Record<keyof T, FormRules | FormItemRule | FormItemRule[]>>;
+//#region src/composables/useNaiveForm.d.ts
+type ExtendsType = Record<string, unknown>;
+type NaiveFormRules<T extends ExtendsType> = Partial<Record<keyof T, FormRules | FormItemRule | FormItemRule[]>> | undefined;
+interface NaiveFormOptions<T extends ExtendsType> {
+  value?: T;
+  rules?: NaiveFormRules<T>;
 }
-declare function useNaiveForm<T extends Record<string, any>>(options?: NaiveFormOptions<T>): {
-    formRef: Ref<FormInst | undefined, FormInst | undefined>;
-    formProps: {
-        model: vue.Reactive<T>;
-        rules: Partial<Record<keyof T, FormRules | FormItemRule | FormItemRule[]>> | undefined;
-    };
-    formValue: Ref<T>;
-    rules: Partial<Record<keyof T, FormRules | FormItemRule | FormItemRule[]>> | undefined;
-    validate: () => Promise<{
-        warnings: async_validator.ValidateError[][] | undefined;
-    }> | undefined;
-    resetValidation: () => void;
-    resetForm: () => void;
-    reset: () => void;
-    clear: () => void;
-};
+interface NaiveFormReturns<T extends ExtendsType> {
+  formRef: Ref<FormInst | undefined>;
+  formValue: Ref<T>;
+  rules: NaiveFormRules<T>;
+  formProps: {
+    ref: Ref<FormInst | undefined>;
+    model: Reactive<T>;
+    rules: NaiveFormRules<T>;
+  };
+  validate: () => Promise<{
+    warnings: ValidateError[][] | undefined;
+  }> | undefined;
+  resetValidation: () => void;
+  resetForm: () => void;
+  clear: () => void;
+  reset: () => void;
+}
+declare function useNaiveForm<T extends ExtendsType>(options?: NaiveFormOptions<T>): NaiveFormReturns<T>;
 
+//#endregion
+//#region src/composables/useNaiveTheme.d.ts
 interface Color {
-    primary: string;
-    info: string;
-    success: string;
-    warning: string;
-    error: string;
+  primary: string;
+  info: string;
+  success: string;
+  warning: string;
+  error: string;
+}
+interface NaiveThemeReturns {
+  theme: ComputedRef<typeof darkTheme | undefined>;
+  themeOverrides: ComputedRef<GlobalThemeOverrides>;
+  locale: ComputedRef<typeof zhCN | typeof enUS>;
+  dateLocale: ComputedRef<NDateLocale>;
+  color: Ref<Color>;
+  setColor: (v: Color) => void;
 }
-declare function useNaiveTheme(darkMode?: ComputedRef<boolean>, language?: ComputedRef<'zh-CN' | 'en-US'>, globalThemeOverrides?: GlobalThemeOverrides): {
-    theme: ComputedRef<naive_ui_es_themes_interface.BuiltInGlobalTheme | undefined>;
-    themeOverrides: ComputedRef<GlobalThemeOverrides>;
-    locale: ComputedRef<{
-        name: string;
-        global: {
-            undo: string;
-            redo: string;
-            confirm: string;
-            clear: string;
-        };
-        Popconfirm: {
-            positiveText: string;
-            negativeText: string;
-        };
-        Cascader: {
-            placeholder: string;
-            loading: string;
-            loadingRequiredMessage: (label: string) => string;
-        };
-        Time: {
-            dateFormat: string;
-            dateTimeFormat: string;
-        };
-        DatePicker: {
-            yearFormat: string;
-            monthFormat: string;
-            dayFormat: string;
-            yearTypeFormat: string;
-            monthTypeFormat: string;
-            dateFormat: string;
-            dateTimeFormat: string;
-            quarterFormat: string;
-            weekFormat: string;
-            clear: string;
-            now: string;
-            confirm: string;
-            selectTime: string;
-            selectDate: string;
-            datePlaceholder: string;
-            datetimePlaceholder: string;
-            monthPlaceholder: string;
-            yearPlaceholder: string;
-            quarterPlaceholder: string;
-            weekPlaceholder: string;
-            startDatePlaceholder: string;
-            endDatePlaceholder: string;
-            startDatetimePlaceholder: string;
-            endDatetimePlaceholder: string;
-            startMonthPlaceholder: string;
-            endMonthPlaceholder: string;
-            monthBeforeYear: boolean;
-            firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-            today: string;
-        };
-        DataTable: {
-            checkTableAll: string;
-            uncheckTableAll: string;
-            confirm: string;
-            clear: string;
-        };
-        LegacyTransfer: {
-            sourceTitle: string;
-            targetTitle: string;
-        };
-        Transfer: {
-            selectAll: string;
-            unselectAll: string;
-            clearAll: string;
-            total: (num: number) => string;
-            selected: (num: number) => string;
-        };
-        Empty: {
-            description: string;
-        };
-        Select: {
-            placeholder: string;
-        };
-        TimePicker: {
-            placeholder: string;
-            positiveText: string;
-            negativeText: string;
-            now: string;
-            clear: string;
-        };
-        Pagination: {
-            goto: string;
-            selectionSuffix: string;
-        };
-        DynamicTags: {
-            add: string;
-        };
-        Log: {
-            loading: string;
-        };
-        Input: {
-            placeholder: string;
-        };
-        InputNumber: {
-            placeholder: string;
-        };
-        DynamicInput: {
-            create: string;
-        };
-        ThemeEditor: {
-            title: string;
-            clearAllVars: string;
-            clearSearch: string;
-            filterCompName: string;
-            filterVarName: string;
-            import: string;
-            export: string;
-            restore: string;
-        };
-        Image: {
-            tipPrevious: string;
-            tipNext: string;
-            tipCounterclockwise: string;
-            tipClockwise: string;
-            tipZoomOut: string;
-            tipZoomIn: string;
-            tipDownload: string;
-            tipClose: string;
-            tipOriginalSize: string;
-        };
-    }>;
-    dateLocale: ComputedRef<NDateLocale>;
-    color: vue.Ref<{
-        primary: string;
-        info: string;
-        success: string;
-        warning: string;
-        error: string;
-    }, Color | {
-        primary: string;
-        info: string;
-        success: string;
-        warning: string;
-        error: string;
-    }>;
-    setColor: (v: Color) => void;
-};
+declare function useNaiveTheme<T extends 'zh-CN' | 'en-US'>(darkMode?: ComputedRef<boolean> | Ref<boolean>, language?: ComputedRef<T> | Ref<T>, globalThemeOverrides?: GlobalThemeOverrides): NaiveThemeReturns;
 
-export { type NaiveFormOptions, useNaiveForm, useNaiveTheme };
+//#endregion
+export { NaiveFormOptions, NaiveFormReturns, NaiveFormRules, NaiveThemeReturns, useNaiveForm, useNaiveTheme };

package/dist/index.js

@@ -1,151 +1,157 @@
-// src/useNaiveForm.ts
-import { deepClone, isObject } from "mixte";
-import { nextTick, reactive, ref, toValue } from "vue";
+import { computed, reactive, ref, toValue } from "vue";
+import { colord } from "colord";
+import { darkTheme, dateEnUS, dateZhCN, enUS, zhCN } from "naive-ui";
+
+//#region src/composables/useNaiveForm.ts
+function clearObjectValues(obj) {
+	if (Array.isArray(obj)) {
+		obj.length = 0;
+		return obj;
+	}
+	if (typeof obj === "object" && obj !== null) {
+		for (const key in obj) if (Object.prototype.hasOwnProperty.call(obj, key)) obj[key] = clearObjectValues(obj[key]);
+		return obj;
+	}
+	if (typeof obj === "string") return "";
+	if (typeof obj === "number") return 0;
+	if (typeof obj === "boolean") return false;
+	return obj;
+}
 function useNaiveForm(options) {
-  const { value, rules } = options ?? {};
-  const userFormValue = ref(value);
-  const userFormRules = rules;
-  const formRef = ref();
-  const formProps = {
-    model: reactive(toValue(userFormValue)),
-    rules: userFormRules
-  };
-  const formInitialValues = deepClone(value);
-  function validate() {
-    return formRef.value?.validate();
-  }
-  function resetValidation() {
-    formRef.value?.restoreValidation();
-  }
-  function clear() {
-    Object.keys(userFormValue.value).forEach((key) => {
-      userFormValue.value[key] = Array.isArray(userFormValue.value[key]) ? [] : isObject(userFormValue.value[key]) ? {} : null;
-    });
-  }
-  function resetForm() {
-    clear();
-    nextTick(() => {
-      Object.assign(userFormValue.value, formInitialValues);
-    });
-  }
-  function reset() {
-    resetValidation();
-    resetForm();
-  }
-  return {
-    formRef,
-    formProps,
-    formValue: userFormValue,
-    rules: userFormRules,
-    validate,
-    resetValidation,
-    resetForm,
-    reset,
-    clear
-  };
+	const { value, rules } = options ?? {};
+	const formValue = ref(structuredClone(value));
+	const formRules = rules;
+	const formRef = ref();
+	const formProps = {
+		ref: formRef,
+		model: reactive(toValue(formValue)),
+		rules: formRules
+	};
+	function validate() {
+		return formRef.value?.validate();
+	}
+	function resetValidation() {
+		formRef.value?.restoreValidation();
+	}
+	function clear() {
+		clearObjectValues(formValue.value);
+	}
+	function resetForm() {
+		clear();
+		Object.assign(formValue.value, structuredClone(value));
+	}
+	function reset() {
+		resetValidation();
+		resetForm();
+	}
+	return {
+		formRef,
+		formValue,
+		rules: formRules,
+		formProps,
+		validate,
+		resetValidation,
+		resetForm,
+		reset,
+		clear
+	};
 }
 
-// src/useNaiveTheme.ts
-import { colord } from "colord";
-import {
-  darkTheme,
-  dateEnUS,
-  dateZhCN,
-  enUS,
-  zhCN
-} from "naive-ui";
-import { computed, ref as ref2 } from "vue";
+//#endregion
+//#region src/composables/useNaiveTheme.ts
 function getStatusColor(color = "#ff461f") {
-  return {
-    color,
-    hover: colord(color).lighten(0.1).toHex(),
-    pressed: colord(color).darken(0.1).toHex(),
-    suppl: colord(color).lighten(0.1).toHex()
-  };
+	return {
+		color,
+		hover: colord(color).lighten(.1).toHex(),
+		pressed: colord(color).darken(.1).toHex(),
+		suppl: colord(color).lighten(.1).toHex()
+	};
 }
-var naiveLocaleMap = {
-  "zh-CN": {
-    name: "\u7B80\u4F53\u4E2D\u6587",
-    dateLocale: dateZhCN,
-    locale: zhCN
-  },
-  "en-US": {
-    name: "English",
-    dateLocale: dateEnUS,
-    locale: enUS
-  }
+const naiveLocaleMap = {
+	"zh-CN": {
+		name: "简体中文",
+		dateLocale: dateZhCN,
+		locale: zhCN
+	},
+	"en-US": {
+		name: "English",
+		dateLocale: dateEnUS,
+		locale: enUS
+	}
 };
 function useNaiveTheme(darkMode, language, globalThemeOverrides) {
-  const { common, Dialog, ...extra } = globalThemeOverrides || {};
-  const color = ref2({
-    primary: "#64748B",
-    info: "#06b6d4",
-    success: "#10b981",
-    warning: "#fbbf24",
-    error: "#f43f5e"
-  });
-  function setColor(v) {
-    color.value = v;
-  }
-  const theme = computed(() => {
-    return darkMode?.value ? darkTheme : void 0;
-  });
-  const themeOverrides = computed(() => {
-    return {
-      common: {
-        bodyColor: darkMode?.value ? "#1f1f1f" : "#f5f5f5",
-        primaryColor: color.value.primary,
-        primaryColorHover: getStatusColor(color.value.primary).hover,
-        primaryColorPressed: getStatusColor(color.value.primary).pressed,
-        primaryColorSuppl: getStatusColor(color.value.primary).suppl,
-        infoColor: color.value.info,
-        infoColorHover: getStatusColor(color.value.info).hover,
-        infoColorPressed: getStatusColor(color.value.info).pressed,
-        infoColorSuppl: getStatusColor(color.value.info).suppl,
-        successColor: color.value.success,
-        successColorHover: getStatusColor(color.value.success).hover,
-        successColorPressed: getStatusColor(color.value.success).pressed,
-        successColorSuppl: getStatusColor(color.value.success).suppl,
-        warningColor: color.value.warning,
-        warningColorHover: getStatusColor(color.value.warning).hover,
-        warningColorPressed: getStatusColor(color.value.warning).pressed,
-        warningColorSuppl: getStatusColor(color.value.warning).suppl,
-        errorColor: color.value.error,
-        errorColorHover: getStatusColor(color.value.error).hover,
-        errorColorPressed: getStatusColor(color.value.error).pressed,
-        errorColorSuppl: getStatusColor(color.value.error).suppl,
-        borderRadius: "6px",
-        ...common
-      },
-      Dialog: {
-        borderRadius: "12px",
-        padding: "20px",
-        closeMargin: "20px 20px 0 0",
-        ...Dialog
-      },
-      ...extra
-    };
-  });
-  const locale = computed(() => {
-    if (!language?.value || !naiveLocaleMap[language.value])
-      return naiveLocaleMap["zh-CN"].locale;
-    return naiveLocaleMap[language.value].locale;
-  });
-  const dateLocale = computed(() => {
-    if (!language?.value || !naiveLocaleMap[language.value])
-      return naiveLocaleMap["zh-CN"].dateLocale;
-    return naiveLocaleMap[language.value].dateLocale;
-  });
-  return {
-    theme,
-    themeOverrides,
-    locale,
-    dateLocale,
-    color,
-    setColor
-  };
+	const { common, Dialog,...extra } = globalThemeOverrides || {};
+	const color = ref({
+		primary: "#64748B",
+		info: "#06b6d4",
+		success: "#10b981",
+		warning: "#fbbf24",
+		error: "#f43f5e"
+	});
+	function setColor(v) {
+		color.value = v;
+	}
+	const theme = computed(() => {
+		return darkMode?.value ? darkTheme : void 0;
+	});
+	const themeOverrides = computed(() => {
+		const primary = getStatusColor(color.value.primary);
+		const info = getStatusColor(color.value.info);
+		const success = getStatusColor(color.value.success);
+		const warning = getStatusColor(color.value.warning);
+		const error = getStatusColor(color.value.error);
+		return {
+			common: {
+				bodyColor: darkMode?.value ? "#1f1f1f" : "#f5f5f5",
+				primaryColor: primary.color,
+				primaryColorHover: primary.hover,
+				primaryColorPressed: primary.pressed,
+				primaryColorSuppl: primary.suppl,
+				infoColor: info.color,
+				infoColorHover: info.hover,
+				infoColorPressed: info.pressed,
+				infoColorSuppl: info.suppl,
+				successColor: success.color,
+				successColorHover: success.hover,
+				successColorPressed: success.pressed,
+				successColorSuppl: success.suppl,
+				warningColor: warning.color,
+				warningColorHover: warning.hover,
+				warningColorPressed: warning.pressed,
+				warningColorSuppl: warning.suppl,
+				errorColor: error.color,
+				errorColorHover: error.hover,
+				errorColorPressed: error.pressed,
+				errorColorSuppl: error.suppl,
+				borderRadius: "6px",
+				...common
+			},
+			Dialog: {
+				borderRadius: "12px",
+				padding: "20px",
+				closeMargin: "20px 20px 0 0",
+				...Dialog
+			},
+			...extra
+		};
+	});
+	const locale = computed(() => {
+		if (!language?.value || !naiveLocaleMap[language.value]) return naiveLocaleMap["zh-CN"].locale;
+		return naiveLocaleMap[language.value].locale;
+	});
+	const dateLocale = computed(() => {
+		if (!language?.value || !naiveLocaleMap[language.value]) return naiveLocaleMap["zh-CN"].dateLocale;
+		return naiveLocaleMap[language.value].dateLocale;
+	});
+	return {
+		theme,
+		themeOverrides,
+		locale,
+		dateLocale,
+		color,
+		setColor
+	};
 }
-export {
-  useNaiveForm,
-  useNaiveTheme
-};
+
+//#endregion
+export { useNaiveForm, useNaiveTheme };