@oiij/naive-ui 0.0.1 → 0.0.3

package/dist/composables/useNaiveForm.d.ts

@@ -0,0 +1,36 @@
+import * as vue1 from "vue";
+import { FormInst, FormItemRule, FormRules } from "naive-ui";
+import * as async_validator11 from "async-validator";
+
+//#region src/composables/useNaiveForm.d.ts
+interface ClearRules {
+  string?: string | null;
+  number?: number | null;
+  boolean?: boolean | null;
+}
+type FormType = Record<string, unknown>;
+type NaiveFormRules<T extends FormType> = Partial<Record<keyof T, FormRules | FormItemRule | FormItemRule[]>> | undefined;
+interface NaiveFormOptions<T extends FormType> {
+  rules?: NaiveFormRules<T>;
+  clearRules?: ClearRules;
+}
+declare function useNaiveForm<T extends FormType>(value: T, options?: NaiveFormOptions<T>): {
+  formRef: vue1.Ref<FormInst | undefined, FormInst | undefined>;
+  formValue: vue1.Reactive<T> extends infer T_1 ? T_1 extends vue1.Reactive<T> ? T_1 extends (() => infer R) ? Readonly<vue1.Ref<R, R>> : T_1 extends vue1.Ref<any, any> ? T_1 : vue1.Ref<vue1.UnwrapRef<T_1>, vue1.UnwrapRef<T_1>> : never : never;
+  rules: NaiveFormRules<T>;
+  formProps: {
+    ref: vue1.Ref<FormInst | undefined, FormInst | undefined>;
+    model: vue1.Reactive<T>;
+    rules: NaiveFormRules<T>;
+  };
+  validate: () => Promise<{
+    warnings: async_validator11.ValidateError[][] | undefined;
+  }> | undefined;
+  resetValidation: () => void;
+  resetForm: () => void;
+  reset: () => void;
+  clear: () => void;
+};
+type NaiveFormReturns = ReturnType<typeof useNaiveForm>;
+//#endregion
+export { NaiveFormOptions, NaiveFormReturns, NaiveFormRules, useNaiveForm };

package/dist/composables/useNaiveForm.js

@@ -0,0 +1,60 @@
+import { reactive, ref, toRef } from "vue";
+
+//#region src/composables/useNaiveForm.ts
+function clearObjectValues(obj, rules) {
+	const { string: _string = "", number: _number = null, boolean: _boolean = false } = rules ?? {};
+	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], rules);
+		return obj;
+	}
+	if (typeof obj === "string") return _string;
+	if (typeof obj === "number") return _number;
+	if (typeof obj === "boolean") return _boolean;
+	return obj;
+}
+function useNaiveForm(value, options) {
+	const { rules, clearRules } = options ?? {};
+	const formValue = reactive(structuredClone(value));
+	const formRules = rules;
+	const formRef = ref();
+	const formProps = {
+		ref: formRef,
+		model: formValue,
+		rules: formRules
+	};
+	function validate() {
+		return formRef.value?.validate();
+	}
+	function resetValidation() {
+		formRef.value?.restoreValidation();
+	}
+	function clear() {
+		clearObjectValues(formValue, clearRules);
+	}
+	function resetForm() {
+		clear();
+		Object.assign(formValue, structuredClone(value));
+	}
+	function reset() {
+		resetValidation();
+		resetForm();
+	}
+	return {
+		formRef,
+		formValue: toRef(formValue),
+		rules: formRules,
+		formProps,
+		validate,
+		resetValidation,
+		resetForm,
+		reset,
+		clear
+	};
+}
+
+//#endregion
+export { useNaiveForm };

package/dist/composables/useNaiveTheme.cjs

@@ -0,0 +1,120 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const vue = require_rolldown_runtime.__toESM(require("vue"));
+const colord = require_rolldown_runtime.__toESM(require("colord"));
+const naive_ui = require_rolldown_runtime.__toESM(require("naive-ui"));
+
+//#region src/composables/useNaiveTheme.ts
+function getStatusColor(color = "#ff461f") {
+	return {
+		color,
+		hover: (0, colord.colord)(color).lighten(.1).toHex(),
+		pressed: (0, colord.colord)(color).darken(.1).toHex(),
+		suppl: (0, colord.colord)(color).lighten(.1).toHex()
+	};
+}
+const naiveLocaleMap = {
+	"zh-CN": {
+		name: "简体中文",
+		dateLocale: naive_ui.dateZhCN,
+		locale: naive_ui.zhCN
+	},
+	"en-US": {
+		name: "English",
+		dateLocale: naive_ui.dateEnUS,
+		locale: naive_ui.enUS
+	}
+};
+function getColors(color) {
+	const { primary, info, success, warning, error } = color;
+	return {
+		primary: getStatusColor(primary),
+		info: getStatusColor(info),
+		success: getStatusColor(success),
+		warning: getStatusColor(warning),
+		error: getStatusColor(error)
+	};
+}
+function useNaiveTheme(options) {
+	const { language, darkMode, color, globalThemeOverrides } = options ?? {};
+	const languageRef = (0, vue.ref)((0, vue.toValue)(language));
+	(0, vue.watchEffect)(() => {
+		languageRef.value = (0, vue.toValue)(language);
+	});
+	const darkModeRef = (0, vue.ref)((0, vue.toValue)(darkMode));
+	(0, vue.watchEffect)(() => {
+		darkModeRef.value = (0, vue.toValue)(darkMode);
+	});
+	const { common, Dialog,...extra } = globalThemeOverrides ?? {};
+	const colorRef = (0, vue.ref)({
+		primary: "#64748B",
+		info: "#06b6d4",
+		success: "#10b981",
+		warning: "#fbbf24",
+		error: "#f43f5e",
+		...color
+	});
+	function setColor(v) {
+		colorRef.value = v;
+	}
+	const theme = (0, vue.computed)(() => {
+		return darkModeRef?.value ? naive_ui.darkTheme : void 0;
+	});
+	const themeOverrides = (0, vue.computed)(() => {
+		const { primary, info, success, warning, error } = getColors(colorRef.value);
+		return {
+			common: {
+				bodyColor: darkModeRef?.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 = (0, vue.computed)(() => {
+		if (!languageRef?.value || !naiveLocaleMap[languageRef.value]) return naiveLocaleMap["zh-CN"].locale;
+		return naiveLocaleMap[languageRef.value].locale;
+	});
+	const dateLocale = (0, vue.computed)(() => {
+		if (!languageRef?.value || !naiveLocaleMap[languageRef.value]) return naiveLocaleMap["zh-CN"].dateLocale;
+		return naiveLocaleMap[languageRef.value].dateLocale;
+	});
+	return {
+		language: languageRef,
+		darkMode: darkModeRef,
+		theme,
+		themeOverrides,
+		locale,
+		dateLocale,
+		color: colorRef,
+		setColor
+	};
+}
+
+//#endregion
+exports.useNaiveTheme = useNaiveTheme;

package/dist/composables/useNaiveTheme.d.cts

@@ -0,0 +1,165 @@
+import { ComputedRef, Ref } from "vue";
+import { GlobalThemeOverrides, NDateLocale } from "naive-ui";
+import * as naive_ui_es_themes_interface0 from "naive-ui/es/themes/interface";
+
+//#region src/composables/useNaiveTheme.d.ts
+interface Color {
+  primary: string;
+  info: string;
+  success: string;
+  warning: string;
+  error: string;
+}
+interface NaiveThemeOptions {
+  language?: string | Ref<string>;
+  darkMode?: boolean | Ref<boolean>;
+  color?: Color;
+  globalThemeOverrides?: GlobalThemeOverrides;
+}
+declare function useNaiveTheme(options?: NaiveThemeOptions): {
+  language: Ref<string | undefined, string | undefined>;
+  darkMode: Ref<boolean | undefined, boolean | undefined>;
+  theme: ComputedRef<naive_ui_es_themes_interface0.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: 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;
+};
+type NaiveThemeReturns = ReturnType<typeof useNaiveTheme>;
+//#endregion
+export { NaiveThemeReturns, useNaiveTheme };

package/dist/composables/useNaiveTheme.d.ts

@@ -0,0 +1,165 @@
+import { ComputedRef, Ref } from "vue";
+import { GlobalThemeOverrides, NDateLocale } from "naive-ui";
+import * as naive_ui_es_themes_interface0 from "naive-ui/es/themes/interface";
+
+//#region src/composables/useNaiveTheme.d.ts
+interface Color {
+  primary: string;
+  info: string;
+  success: string;
+  warning: string;
+  error: string;
+}
+interface NaiveThemeOptions {
+  language?: string | Ref<string>;
+  darkMode?: boolean | Ref<boolean>;
+  color?: Color;
+  globalThemeOverrides?: GlobalThemeOverrides;
+}
+declare function useNaiveTheme(options?: NaiveThemeOptions): {
+  language: Ref<string | undefined, string | undefined>;
+  darkMode: Ref<boolean | undefined, boolean | undefined>;
+  theme: ComputedRef<naive_ui_es_themes_interface0.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: 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;
+};
+type NaiveThemeReturns = ReturnType<typeof useNaiveTheme>;
+//#endregion
+export { NaiveThemeReturns, useNaiveTheme };

package/dist/composables/useNaiveTheme.js

@@ -0,0 +1,119 @@
+import { computed, ref, toValue, watchEffect } from "vue";
+import { colord } from "colord";
+import { darkTheme, dateEnUS, dateZhCN, enUS, zhCN } from "naive-ui";
+
+//#region src/composables/useNaiveTheme.ts
+function getStatusColor(color = "#ff461f") {
+	return {
+		color,
+		hover: colord(color).lighten(.1).toHex(),
+		pressed: colord(color).darken(.1).toHex(),
+		suppl: colord(color).lighten(.1).toHex()
+	};
+}
+const naiveLocaleMap = {
+	"zh-CN": {
+		name: "简体中文",
+		dateLocale: dateZhCN,
+		locale: zhCN
+	},
+	"en-US": {
+		name: "English",
+		dateLocale: dateEnUS,
+		locale: enUS
+	}
+};
+function getColors(color) {
+	const { primary, info, success, warning, error } = color;
+	return {
+		primary: getStatusColor(primary),
+		info: getStatusColor(info),
+		success: getStatusColor(success),
+		warning: getStatusColor(warning),
+		error: getStatusColor(error)
+	};
+}
+function useNaiveTheme(options) {
+	const { language, darkMode, color, globalThemeOverrides } = options ?? {};
+	const languageRef = ref(toValue(language));
+	watchEffect(() => {
+		languageRef.value = toValue(language);
+	});
+	const darkModeRef = ref(toValue(darkMode));
+	watchEffect(() => {
+		darkModeRef.value = toValue(darkMode);
+	});
+	const { common, Dialog,...extra } = globalThemeOverrides ?? {};
+	const colorRef = ref({
+		primary: "#64748B",
+		info: "#06b6d4",
+		success: "#10b981",
+		warning: "#fbbf24",
+		error: "#f43f5e",
+		...color
+	});
+	function setColor(v) {
+		colorRef.value = v;
+	}
+	const theme = computed(() => {
+		return darkModeRef?.value ? darkTheme : void 0;
+	});
+	const themeOverrides = computed(() => {
+		const { primary, info, success, warning, error } = getColors(colorRef.value);
+		return {
+			common: {
+				bodyColor: darkModeRef?.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 (!languageRef?.value || !naiveLocaleMap[languageRef.value]) return naiveLocaleMap["zh-CN"].locale;
+		return naiveLocaleMap[languageRef.value].locale;
+	});
+	const dateLocale = computed(() => {
+		if (!languageRef?.value || !naiveLocaleMap[languageRef.value]) return naiveLocaleMap["zh-CN"].dateLocale;
+		return naiveLocaleMap[languageRef.value].dateLocale;
+	});
+	return {
+		language: languageRef,
+		darkMode: darkModeRef,
+		theme,
+		themeOverrides,
+		locale,
+		dateLocale,
+		color: colorRef,
+		setColor
+	};
+}
+
+//#endregion
+export { useNaiveTheme };