@movk/nuxt 1.1.1 → 1.2.0

package/dist/runtime/composables/useTheme.js

@@ -1,56 +1,42 @@
 import { useAppConfig, useColorMode, useSiteConfig } from "#imports";
-import { omit } from "@movk/core";
+import { themeIcons } from "../utils/theme.js";
+import { omit, kebabCase } from "@movk/core";
+import { useLocalStorage } from "@vueuse/core";
 import colors from "tailwindcss/colors";
 import { computed } from "vue";
-import { themeIcons } from "../utils/theme.js";
 export function useTheme() {
   const appConfig = useAppConfig();
   const colorMode = useColorMode();
   const site = useSiteConfig();
-  const neutralColors = ["slate", "gray", "zinc", "neutral", "stone"];
+  const name = kebabCase(site.name);
+  const radius = useLocalStorage(`${name}-ui-radius`, 0.25);
+  const font = useLocalStorage(`${name}-ui-font`, "Alibaba PuHuiTi");
+  const _iconSet = useLocalStorage(`${name}-ui-icons`, "lucide");
+  const blackAsPrimary = useLocalStorage(`${name}-ui-black-as-primary`, false);
+  const neutralColors = ["slate", "gray", "zinc", "neutral", "stone", "taupe", "mauve", "mist", "olive"];
   const neutral = computed({
     get() {
       return appConfig.ui.colors.neutral;
     },
     set(option) {
       appConfig.ui.colors.neutral = option;
-      window.localStorage.setItem(`${site.name}-ui-neutral`, appConfig.ui.colors.neutral);
+      window.localStorage.setItem(`${name}-ui-neutral`, appConfig.ui.colors.neutral);
     }
   });
   const colorsToOmit = ["inherit", "current", "transparent", "black", "white", ...neutralColors];
-  const primaryColors = Object.keys(omit(colors, [...colorsToOmit]));
+  const primaryColors = Object.keys(omit(colors, colorsToOmit));
   const primary = computed({
     get() {
       return appConfig.ui.colors.primary;
     },
     set(option) {
       appConfig.ui.colors.primary = option;
-      window.localStorage.setItem(`${site.name}-ui-primary`, appConfig.ui.colors.primary);
-      setBlackAsPrimary(false);
+      window.localStorage.setItem(`${name}-ui-primary`, appConfig.ui.colors.primary);
+      blackAsPrimary.value = false;
     }
   });
   const radiuses = [0, 0.125, 0.25, 0.375, 0.5];
-  const radius = computed({
-    get() {
-      return appConfig.theme.radius;
-    },
-    set(option) {
-      appConfig.theme.radius = option;
-      window.localStorage.setItem(`${site.name}-ui-radius`, String(appConfig.theme.radius));
-    }
-  });
-  const fonts = ["Public Sans", "DM Sans", "Geist", "Inter", "Poppins", "Outfit", "Raleway"];
-  const font = computed({
-    get() {
-      return appConfig.theme.font;
-    },
-    set(option) {
-      appConfig.theme.font = option;
-      if (appConfig.theme.font) {
-        window.localStorage.setItem(`${site.name}-ui-font`, appConfig.theme.font);
-      }
-    }
-  });
+  const fonts = ["Alibaba PuHuiTi", "Public Sans", "DM Sans", "Geist", "Inter", "Poppins", "Outfit", "Raleway"];
   const icons = [{
     label: "Lucide",
     icon: "i-lucide-feather",
@@ -66,21 +52,18 @@ export function useTheme() {
   }];
   const icon = computed({
     get() {
-      return appConfig.theme.icons;
+      return _iconSet.value;
     },
     set(option) {
-      appConfig.theme.icons = option;
+      _iconSet.value = option;
       appConfig.ui.icons = themeIcons[option];
-      if (appConfig.theme.icons) {
-        window.localStorage.setItem(`${site.name}-ui-icons`, appConfig.theme.icons);
-      }
     }
   });
-  const modes = [
+  const modes = computed(() => [
     { label: "light", icon: appConfig.ui.icons.light },
     { label: "dark", icon: appConfig.ui.icons.dark },
     { label: "system", icon: appConfig.ui.icons.system }
-  ];
+  ]);
   const mode = computed({
     get() {
       return colorMode.value;
@@ -89,80 +72,93 @@ export function useTheme() {
       colorMode.preference = option;
     }
   });
-  function setBlackAsPrimary(value) {
-    appConfig.theme.blackAsPrimary = value;
-    window.localStorage.setItem(`${site.name}-ui-black-as-primary`, String(value));
-  }
+  const radiusStyle = computed(() => `:root { --ui-radius: ${radius.value}rem; }`);
+  const blackAsPrimaryStyle = computed(() => blackAsPrimary.value ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ":root {}");
+  const fontStyle = computed(() => `:root { --font-sans: '${font.value}', sans-serif; }`);
+  const link = computed(() => {
+    const name2 = font.value;
+    if (name2 === "Alibaba PuHuiTi" || !fonts.includes(name2)) return [];
+    return [{
+      rel: "stylesheet",
+      href: `https://fonts.googleapis.com/css2?family=${encodeURIComponent(name2)}:wght@400;500;600;700&display=swap`,
+      id: `font-${kebabCase(name2)}`
+    }];
+  });
+  const style = [
+    { innerHTML: radiusStyle, id: `${name}-ui-radius`, tagPriority: -2 },
+    { innerHTML: blackAsPrimaryStyle, id: `${name}-ui-black-as-primary`, tagPriority: -2 },
+    { innerHTML: fontStyle, id: `${name}-ui-font`, tagPriority: -2 }
+  ];
   const hasCSSChanges = computed(() => {
-    return appConfig.theme.radius !== 0.25 || appConfig.theme.blackAsPrimary || appConfig.theme.font !== "Public Sans" || appConfig.theme.icons !== "lucide";
+    return radius.value !== 0.25 || blackAsPrimary.value || font.value !== "Alibaba PuHuiTi";
   });
   const hasAppConfigChanges = computed(() => {
-    return appConfig.ui.colors.primary !== "green" || appConfig.ui.colors.neutral !== "slate";
+    return appConfig.ui.colors.primary !== "sky" || appConfig.ui.colors.neutral !== "slate" || _iconSet.value !== "lucide";
   });
   function exportCSS() {
     const lines = [
       '@import "tailwindcss";',
       '@import "@nuxt/ui";'
     ];
-    if (appConfig.theme.font !== "Public Sans") {
-      lines.push("", "@theme {", `  --font-sans: '${appConfig.theme.font}', sans-serif;`, "}");
+    if (font.value !== "Alibaba PuHuiTi") {
+      lines.push("", "@theme {", `  --font-sans: '${font.value}', sans-serif;`, "}");
     }
     const rootLines = [];
-    if (appConfig.theme.radius !== 0.25) {
-      rootLines.push(`  --ui-radius: ${appConfig.theme.radius}rem;`);
+    if (radius.value !== 0.25) {
+      rootLines.push(`  --ui-radius: ${radius.value}rem;`);
     }
-    if (appConfig.theme.blackAsPrimary) {
+    if (blackAsPrimary.value) {
       rootLines.push("  --ui-primary: black;");
     }
     if (rootLines.length) {
       lines.push("", ":root {", ...rootLines, "}");
     }
-    if (appConfig.theme.blackAsPrimary) {
-      lines.push("", ".dark {", "  --ui-primary: white;", "}");
+    const darkLines = [];
+    if (blackAsPrimary.value) {
+      darkLines.push("  --ui-primary: white;");
+    }
+    if (darkLines.length) {
+      lines.push("", ".dark {", ...darkLines, "}");
     }
     return lines.join("\n");
   }
   function exportAppConfig() {
     const config = {};
-    if (appConfig.ui.colors.primary !== "green" || appConfig.ui.colors.neutral !== "slate") {
-      config.ui = { colors: {} };
-      if (appConfig.ui.colors.primary !== "green") {
-        config.ui.colors.primary = appConfig.ui.colors.primary;
-      }
-      if (appConfig.ui.colors.neutral !== "slate") {
-        config.ui.colors.neutral = appConfig.ui.colors.neutral;
-      }
+    const defaultColors = { primary: "sky", secondary: "blue", success: "green", info: "blue", warning: "yellow", error: "red", neutral: "slate" };
+    const colorEntries = Object.entries(defaultColors).filter(([key, def]) => appConfig.ui.colors[key] !== def);
+    if (colorEntries.length) {
+      config.ui = { colors: Object.fromEntries(colorEntries.map(([key]) => [key, appConfig.ui.colors[key]])) };
     }
-    if (appConfig.theme.icons !== "lucide") {
-      const iconSet = appConfig.theme.icons;
-      const icons2 = themeIcons[iconSet];
+    if (_iconSet.value !== "lucide") {
+      const iconMapping = themeIcons[_iconSet.value];
       config.ui = config.ui || {};
-      config.ui.icons = icons2;
+      config.ui.icons = iconMapping;
     }
     const configString = JSON.stringify(config, null, 2).replace(/"([^"]+)":/g, "$1:").replace(/"/g, "'");
     return `export default defineAppConfig(${configString})`;
   }
   function resetTheme() {
-    appConfig.ui.colors.primary = "green";
-    window.localStorage.removeItem(`${site.name}-ui-primary`);
+    appConfig.ui.colors.primary = "sky";
+    window.localStorage.removeItem(`${name}-ui-primary`);
     appConfig.ui.colors.neutral = "slate";
-    window.localStorage.removeItem(`${site.name}-ui-neutral`);
-    appConfig.theme.radius = 0.25;
-    window.localStorage.removeItem(`${site.name}-ui-radius`);
-    appConfig.theme.font = "Public Sans";
-    window.localStorage.removeItem(`${site.name}-ui-font`);
-    appConfig.theme.icons = "lucide";
+    window.localStorage.removeItem(`${name}-ui-neutral`);
+    radius.value = 0.25;
+    font.value = "Alibaba PuHuiTi";
+    _iconSet.value = "lucide";
     appConfig.ui.icons = themeIcons.lucide;
-    window.localStorage.removeItem(`${site.name}-ui-icons`);
-    appConfig.theme.blackAsPrimary = false;
-    window.localStorage.removeItem(`${site.name}-ui-black-as-primary`);
+    blackAsPrimary.value = false;
+    window.localStorage.removeItem(`${name}-ui-ai-theme`);
+    window.localStorage.removeItem(`${name}-ui-custom-colors`);
+    window.localStorage.removeItem(`${name}-ui-css-variables`);
   }
   return {
+    style,
+    link,
     neutralColors,
     neutral,
     primaryColors,
     primary,
-    setBlackAsPrimary,
+    blackAsPrimary,
     radiuses,
     radius,
     fonts,

package/dist/runtime/composables/useUploadWithProgress.d.ts

@@ -33,7 +33,7 @@ export interface UploadWithProgressOptions {
  * })
  * ```
  */
-export declare function useUploadWithProgress<T = unknown>(): {
+export declare function useUploadWithProgress(): {
     /** 上传进度 (0-100) */
     progress: any;
     /** 是否正在上传 */
@@ -44,7 +44,7 @@ export declare function useUploadWithProgress<T = unknown>(): {
     error: any;
     /** 执行上传 */
     upload: (url: string, files: File | File[], options?: UploadWithProgressOptions) => Promise<{
-        data: ApiResponse<T> | null;
+        data: ApiResponse | null;
         error: Error | null;
     }>;
     /** 中止上传 */

package/dist/runtime/composables/useUploadWithProgress.js

@@ -1,13 +1,14 @@
-import { ref, useNuxtApp } from "#imports";
+import { ref, useRuntimeConfig } from "#imports";
 import {
   showToast,
   isBusinessSuccess,
   extractMessage,
   extractToastMessage,
-  getAuthHeaders
+  getAuthHeaders,
+  resolveEndpointConfig
 } from "../utils/api-utils.js";
 export function useUploadWithProgress() {
-  const { $api } = useNuxtApp();
+  const publicConfig = useRuntimeConfig().public.movkApi;
   const progress = ref(0);
   const uploading = ref(false);
   const data = ref(null);
@@ -21,9 +22,8 @@ export function useUploadWithProgress() {
   };
   const upload = async (url, files, options = {}) => {
     const { fieldName = "file", fields = {}, headers = {}, toast, endpoint, onSuccess, onError } = options;
-    const apiInstance = endpoint ? $api.use(endpoint) : $api;
-    const config = apiInstance.getConfig();
-    const fullUrl = `${config.baseURL || ""}${url}`;
+    const config = resolveEndpointConfig(publicConfig, endpoint);
+    const fullUrl = `${config.baseURL}${url}`;
     const formData = new FormData();
     const fileArray = Array.isArray(files) ? files : [files];
     fileArray.forEach((file) => formData.append(fieldName, file));
@@ -33,6 +33,7 @@ export function useUploadWithProgress() {
     data.value = null;
     error.value = null;
     return new Promise((resolve) => {
+      const authHeaders = getAuthHeaders(config);
       const xhr = new XMLHttpRequest();
       currentXhr = xhr;
       xhr.upload.addEventListener("progress", (e) => {
@@ -93,7 +94,6 @@ export function useUploadWithProgress() {
         resolve({ data: null, error: error.value });
       });
       xhr.open("POST", fullUrl);
-      const authHeaders = getAuthHeaders(config);
       Object.entries({ ...headers, ...authHeaders }).forEach(([key, value]) => {
         xhr.setRequestHeader(key, value);
       });

package/dist/runtime/constants/api-defaults.d.ts

@@ -0,0 +1,9 @@
+import type { ApiResponseConfig, ApiAuthConfig, ApiToastConfig } from '../types/api.js';
+export declare const DEFAULT_RESPONSE_CONFIG: ApiResponseConfig;
+export declare const DEFAULT_AUTH_CONFIG: ApiAuthConfig;
+export declare const DEFAULT_TOAST_CONFIG: ApiToastConfig;
+export declare const DEFAULT_ENDPOINT: {
+    default: {
+        baseURL: string;
+    };
+};

package/dist/runtime/constants/api-defaults.js

@@ -0,0 +1,32 @@
+export const DEFAULT_RESPONSE_CONFIG = {
+  successCodes: [200, 0],
+  codeKey: "code",
+  messageKey: "message",
+  dataKey: "data"
+};
+export const DEFAULT_AUTH_CONFIG = {
+  enabled: false,
+  tokenSource: "session",
+  sessionTokenPath: "token",
+  tokenType: "Bearer",
+  headerName: "Authorization",
+  unauthorized: {
+    redirect: true,
+    clearSession: true,
+    loginPath: "/login"
+  }
+};
+export const DEFAULT_TOAST_CONFIG = {
+  enabled: true,
+  success: {
+    show: true,
+    color: "success",
+    duration: 3e3
+  },
+  error: {
+    show: true,
+    color: "error",
+    duration: 3e3
+  }
+};
+export const DEFAULT_ENDPOINT = { default: { baseURL: "/api" } };

package/dist/runtime/constants/auto-form.d.ts

@@ -14,5 +14,3 @@ export declare const AUTOFORM_PATTERNS: {
     /** 事件属性检测正则，匹配 onClick、onChange 等 Vue/React 事件命名模式 */
     readonly EVENT_PROP: RegExp;
 };
-/** zod 克隆方法 */
-export declare const CLONE_METHODS: readonly ["meta", "max", "min", "length", "regex", "startsWith", "endsWith", "includes", "uppercase", "lowercase", "optional", "nullable", "nullish", "describe", "refine", "superRefine", "check", "transform", "default", "mime", "readonly", "exclude", "extract"];

package/dist/runtime/constants/auto-form.js

@@ -14,28 +14,3 @@ export const AUTOFORM_PATTERNS = {
   /** 事件属性检测正则，匹配 onClick、onChange 等 Vue/React 事件命名模式 */
   EVENT_PROP: /^on[A-Z]/
 };
-export const CLONE_METHODS = [
-  "meta",
-  "max",
-  "min",
-  "length",
-  "regex",
-  "startsWith",
-  "endsWith",
-  "includes",
-  "uppercase",
-  "lowercase",
-  "optional",
-  "nullable",
-  "nullish",
-  "describe",
-  "refine",
-  "superRefine",
-  "check",
-  "transform",
-  "default",
-  "mime",
-  "readonly",
-  "exclude",
-  "extract"
-];

package/dist/runtime/constants/grid-cols.d.ts

@@ -0,0 +1,7 @@
+declare const BREAKPOINTS: readonly ["sm", "md", "lg", "xl"];
+type Breakpoint = (typeof BREAKPOINTS)[number];
+type ColsConfig = Partial<Record<Breakpoint, number>>;
+export declare const GRID_COL_SAFELIST: string[];
+export declare function resolveMaxCols(cols: number | ColsConfig): number;
+export declare function resolveGridClasses(cols: number | ColsConfig, gap: string): string;
+export {};

package/dist/runtime/constants/grid-cols.js

@@ -0,0 +1,44 @@
+const BREAKPOINTS = ["sm", "md", "lg", "xl"];
+export const GRID_COL_SAFELIST = [
+  "grid-cols-1",
+  "grid-cols-2",
+  "grid-cols-3",
+  "grid-cols-4",
+  "grid-cols-5",
+  "grid-cols-6",
+  "sm:grid-cols-1",
+  "sm:grid-cols-2",
+  "sm:grid-cols-3",
+  "sm:grid-cols-4",
+  "sm:grid-cols-5",
+  "sm:grid-cols-6",
+  "md:grid-cols-1",
+  "md:grid-cols-2",
+  "md:grid-cols-3",
+  "md:grid-cols-4",
+  "md:grid-cols-5",
+  "md:grid-cols-6",
+  "lg:grid-cols-1",
+  "lg:grid-cols-2",
+  "lg:grid-cols-3",
+  "lg:grid-cols-4",
+  "lg:grid-cols-5",
+  "lg:grid-cols-6",
+  "xl:grid-cols-1",
+  "xl:grid-cols-2",
+  "xl:grid-cols-3",
+  "xl:grid-cols-4",
+  "xl:grid-cols-5",
+  "xl:grid-cols-6"
+];
+export function resolveMaxCols(cols) {
+  if (typeof cols === "number") return cols;
+  return Math.max(...BREAKPOINTS.map((bp) => cols[bp] ?? 1));
+}
+export function resolveGridClasses(cols, gap) {
+  if (typeof cols === "number") {
+    return `grid ${gap} grid-cols-${cols}`;
+  }
+  const bpClasses = BREAKPOINTS.filter((bp) => cols[bp] != null).map((bp) => `${bp}:grid-cols-${cols[bp]}`);
+  return ["grid", gap, "grid-cols-1", ...bpClasses].join(" ");
+}