@movk/nuxt 1.1.0 → 1.1.1

package/README.md

@@ -2,6 +2,9 @@
 
 > `@movk/nuxt` 是一个为 Nuxt 4 设计的模块化工程套件，提供 Schema 驱动的自动表单生成、API 集成系统、独立 UI 组件和通用工具函数。
 
+[![Install MCP in Cursor](https://nuxt.mhaibaraai.cn/mcp/badge.svg)](https://nuxt.mhaibaraai.cn/mcp/deeplink)
+[![Install MCP in VS Code](https://nuxt.mhaibaraai.cn/mcp/badge.svg?ide=vscode)](https://nuxt.mhaibaraai.cn/mcp/deeplink?ide=vscode)
+
 [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
 [![Nuxt](https://img.shields.io/badge/Nuxt-4-00DC82.svg)](https://nuxt.com/)
 [![npm version][npm-version-src]][npm-version-href]

package/dist/module.d.mts

@@ -26,6 +26,7 @@ declare module 'nuxt/schema' {
             radius: number;
             blackAsPrimary: boolean;
             font: string;
+            icons: string;
         };
     }
 }

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@movk/nuxt",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "configKey": "movk",
   "compatibility": {
     "nuxt": ">=4.2.0"

package/dist/module.mjs

@@ -5,13 +5,14 @@ import defu from 'defu';
 export * from '../dist/runtime/types/index.js';
 
 const name = "@movk/nuxt";
-const version = "1.1.0";
+const version = "1.1.1";
 
 function setupTheme(nuxt, resolve) {
   nuxt.options.appConfig.theme = defu(nuxt.options.appConfig.theme || {}, {
     radius: 0.25,
     blackAsPrimary: false,
-    font: "Public Sans"
+    font: "Public Sans",
+    icons: "lucide"
   });
   nuxt.options.app.head.meta = nuxt.options.app.head.meta || [];
   nuxt.options.app.head.meta.push(

package/dist/runtime/components/theme-picker/ThemePicker.vue

@@ -19,6 +19,8 @@ const {
   radius,
   fonts,
   font,
+  icon,
+  icons,
   modes,
   mode,
   hasCSSChanges,
@@ -165,6 +167,35 @@ const {
         </div>
       </fieldset>
 
+      <fieldset>
+        <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
+          Icons
+
+          <UButton
+            to="https://ui.nuxt.com/docs/getting-started/integrations/icons"
+            size="xs"
+            color="neutral"
+            variant="link"
+            target="_blank"
+            icon="i-lucide-circle-help"
+            class="p-0 -my-0.5"
+            :ui="{ leadingIcon: 'size-3' }"
+          />
+        </legend>
+
+        <div class="-mx-2">
+          <USelect
+            v-model="icon"
+            size="sm"
+            color="neutral"
+            :icon="icons.find((i) => i.value === icon)?.icon"
+            :items="icons"
+            class="w-full ring-default rounded-sm hover:bg-elevated/50 capitalize text-[11px] data-[state=open]:bg-elevated/50"
+            :ui="{ item: 'capitalize text-[11px]', trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+          />
+        </div>
+      </fieldset>
+
       <fieldset>
         <legend class="text-[11px] leading-none font-semibold mb-2 select-none flex items-center gap-1">
           Color Mode

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

@@ -8,6 +8,12 @@ export declare function useTheme(): {
     radius: import("vue").WritableComputedRef<any, any>;
     fonts: string[];
     font: import("vue").WritableComputedRef<any, any>;
+    icon: import("vue").WritableComputedRef<any, any>;
+    icons: {
+        label: string;
+        icon: string;
+        value: string;
+    }[];
     modes: {
         label: string;
         icon: any;

package/dist/runtime/composables/useTheme.js

@@ -2,6 +2,7 @@ import { useAppConfig, useColorMode, useSiteConfig } from "#imports";
 import { omit } from "@movk/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();
@@ -50,6 +51,31 @@ export function useTheme() {
       }
     }
   });
+  const icons = [{
+    label: "Lucide",
+    icon: "i-lucide-feather",
+    value: "lucide"
+  }, {
+    label: "Phosphor",
+    icon: "i-ph-phosphor-logo",
+    value: "phosphor"
+  }, {
+    label: "Tabler",
+    icon: "i-tabler-brand-tabler",
+    value: "tabler"
+  }];
+  const icon = computed({
+    get() {
+      return appConfig.theme.icons;
+    },
+    set(option) {
+      appConfig.theme.icons = option;
+      appConfig.ui.icons = themeIcons[option];
+      if (appConfig.theme.icons) {
+        window.localStorage.setItem(`${site.name}-ui-icons`, appConfig.theme.icons);
+      }
+    }
+  });
   const modes = [
     { label: "light", icon: appConfig.ui.icons.light },
     { label: "dark", icon: appConfig.ui.icons.dark },
@@ -68,7 +94,7 @@ export function useTheme() {
     window.localStorage.setItem(`${site.name}-ui-black-as-primary`, String(value));
   }
   const hasCSSChanges = computed(() => {
-    return appConfig.theme.radius !== 0.25 || appConfig.theme.blackAsPrimary || appConfig.theme.font !== "Public Sans";
+    return appConfig.theme.radius !== 0.25 || appConfig.theme.blackAsPrimary || appConfig.theme.font !== "Public Sans" || appConfig.theme.icons !== "lucide";
   });
   const hasAppConfigChanges = computed(() => {
     return appConfig.ui.colors.primary !== "green" || appConfig.ui.colors.neutral !== "slate";
@@ -107,6 +133,12 @@ export function useTheme() {
         config.ui.colors.neutral = appConfig.ui.colors.neutral;
       }
     }
+    if (appConfig.theme.icons !== "lucide") {
+      const iconSet = appConfig.theme.icons;
+      const icons2 = themeIcons[iconSet];
+      config.ui = config.ui || {};
+      config.ui.icons = icons2;
+    }
     const configString = JSON.stringify(config, null, 2).replace(/"([^"]+)":/g, "$1:").replace(/"/g, "'");
     return `export default defineAppConfig(${configString})`;
   }
@@ -119,6 +151,9 @@ export function useTheme() {
     window.localStorage.removeItem(`${site.name}-ui-radius`);
     appConfig.theme.font = "Public Sans";
     window.localStorage.removeItem(`${site.name}-ui-font`);
+    appConfig.theme.icons = "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`);
   }
@@ -132,6 +167,8 @@ export function useTheme() {
     radius,
     fonts,
     font,
+    icon,
+    icons,
     modes,
     mode,
     hasCSSChanges,

package/dist/runtime/plugins/theme.js

@@ -1,4 +1,5 @@
-import { defineNuxtPlugin, useAppConfig, useHead, useSiteConfig } from "#imports";
+import { defineNuxtPlugin, onNuxtReady, useAppConfig, useHead, useSiteConfig } from "#imports";
+import { themeIcons } from "../utils/theme.js";
 export default defineNuxtPlugin({
   enforce: "post",
   setup() {
@@ -32,6 +33,16 @@ export default defineNuxtPlugin({
       updateBlackAsPrimary();
       updateFont();
     }
+    onNuxtReady(() => {
+      function updateIcons() {
+        const icons = localStorage.getItem(`${site.name}-ui-icons`);
+        if (icons) {
+          appConfig.theme.icons = icons;
+          appConfig.ui.icons = themeIcons[icons];
+        }
+      }
+      updateIcons();
+    });
     if (import.meta.server) {
       useHead({
         script: [{

package/dist/runtime/utils/theme.d.ts

@@ -0,0 +1,135 @@
+export declare const themeIcons: {
+    lucide: {
+        arrowDown: string;
+        arrowLeft: string;
+        arrowRight: string;
+        arrowUp: string;
+        caution: string;
+        check: string;
+        chevronDoubleLeft: string;
+        chevronDoubleRight: string;
+        chevronDown: string;
+        chevronLeft: string;
+        chevronRight: string;
+        chevronUp: string;
+        close: string;
+        copy: string;
+        copyCheck: string;
+        dark: string;
+        drag: string;
+        ellipsis: string;
+        error: string;
+        external: string;
+        eye: string;
+        eyeOff: string;
+        file: string;
+        folder: string;
+        folderOpen: string;
+        hash: string;
+        info: string;
+        light: string;
+        loading: string;
+        menu: string;
+        minus: string;
+        panelClose: string;
+        panelOpen: string;
+        plus: string;
+        reload: string;
+        search: string;
+        stop: string;
+        success: string;
+        system: string;
+        tip: string;
+        upload: string;
+        warning: string;
+    };
+    phosphor: {
+        arrowDown: string;
+        arrowLeft: string;
+        arrowRight: string;
+        arrowUp: string;
+        caution: string;
+        check: string;
+        chevronDoubleLeft: string;
+        chevronDoubleRight: string;
+        chevronDown: string;
+        chevronLeft: string;
+        chevronRight: string;
+        chevronUp: string;
+        close: string;
+        copy: string;
+        copyCheck: string;
+        dark: string;
+        drag: string;
+        ellipsis: string;
+        error: string;
+        external: string;
+        eye: string;
+        eyeOff: string;
+        file: string;
+        folder: string;
+        folderOpen: string;
+        hash: string;
+        info: string;
+        light: string;
+        loading: string;
+        menu: string;
+        minus: string;
+        panelClose: string;
+        panelOpen: string;
+        plus: string;
+        reload: string;
+        search: string;
+        stop: string;
+        success: string;
+        system: string;
+        tip: string;
+        upload: string;
+        warning: string;
+    };
+    tabler: {
+        arrowDown: string;
+        arrowLeft: string;
+        arrowRight: string;
+        arrowUp: string;
+        caution: string;
+        check: string;
+        chevronDoubleLeft: string;
+        chevronDoubleRight: string;
+        chevronDown: string;
+        chevronLeft: string;
+        chevronRight: string;
+        chevronUp: string;
+        close: string;
+        copy: string;
+        copyCheck: string;
+        dark: string;
+        drag: string;
+        ellipsis: string;
+        error: string;
+        external: string;
+        eye: string;
+        eyeOff: string;
+        file: string;
+        folder: string;
+        folderOpen: string;
+        hash: string;
+        info: string;
+        light: string;
+        loading: string;
+        menu: string;
+        minus: string;
+        panelClose: string;
+        panelOpen: string;
+        plus: string;
+        reload: string;
+        search: string;
+        stop: string;
+        success: string;
+        system: string;
+        tip: string;
+        upload: string;
+        warning: string;
+    };
+};
+export type ThemeIcons = keyof typeof themeIcons;

package/dist/runtime/utils/theme.js

@@ -0,0 +1,134 @@
+export const themeIcons = {
+  lucide: {
+    arrowDown: "i-lucide-arrow-down",
+    arrowLeft: "i-lucide-arrow-left",
+    arrowRight: "i-lucide-arrow-right",
+    arrowUp: "i-lucide-arrow-up",
+    caution: "i-lucide-circle-alert",
+    check: "i-lucide-check",
+    chevronDoubleLeft: "i-lucide-chevrons-left",
+    chevronDoubleRight: "i-lucide-chevrons-right",
+    chevronDown: "i-lucide-chevron-down",
+    chevronLeft: "i-lucide-chevron-left",
+    chevronRight: "i-lucide-chevron-right",
+    chevronUp: "i-lucide-chevron-up",
+    close: "i-lucide-x",
+    copy: "i-lucide-copy",
+    copyCheck: "i-lucide-copy-check",
+    dark: "i-lucide-moon",
+    drag: "i-lucide-grip-vertical",
+    ellipsis: "i-lucide-ellipsis",
+    error: "i-lucide-circle-x",
+    external: "i-lucide-arrow-up-right",
+    eye: "i-lucide-eye",
+    eyeOff: "i-lucide-eye-off",
+    file: "i-lucide-file",
+    folder: "i-lucide-folder",
+    folderOpen: "i-lucide-folder-open",
+    hash: "i-lucide-hash",
+    info: "i-lucide-info",
+    light: "i-lucide-sun",
+    loading: "i-lucide-loader-circle",
+    menu: "i-lucide-menu",
+    minus: "i-lucide-minus",
+    panelClose: "i-lucide-panel-left-close",
+    panelOpen: "i-lucide-panel-left-open",
+    plus: "i-lucide-plus",
+    reload: "i-lucide-rotate-ccw",
+    search: "i-lucide-search",
+    stop: "i-lucide-square",
+    success: "i-lucide-circle-check",
+    system: "i-lucide-monitor",
+    tip: "i-lucide-lightbulb",
+    upload: "i-lucide-upload",
+    warning: "i-lucide-triangle-alert"
+  },
+  phosphor: {
+    arrowDown: "i-ph-arrow-down",
+    arrowLeft: "i-ph-arrow-left",
+    arrowRight: "i-ph-arrow-right",
+    arrowUp: "i-ph-arrow-up",
+    caution: "i-ph-warning-circle",
+    check: "i-ph-check",
+    chevronDoubleLeft: "i-ph-caret-double-left",
+    chevronDoubleRight: "i-ph-caret-double-right",
+    chevronDown: "i-ph-caret-down",
+    chevronLeft: "i-ph-caret-left",
+    chevronRight: "i-ph-caret-right",
+    chevronUp: "i-ph-caret-up",
+    close: "i-ph-x",
+    copy: "i-ph-copy",
+    copyCheck: "i-ph-check-circle",
+    dark: "i-ph-moon",
+    drag: "i-ph-dots-six-vertical",
+    ellipsis: "i-ph-dots-three",
+    error: "i-ph-x-circle",
+    external: "i-ph-arrow-up-right",
+    eye: "i-ph-eye",
+    eyeOff: "i-ph-eye-slash",
+    file: "i-ph-file",
+    folder: "i-ph-folder",
+    folderOpen: "i-ph-folder-open",
+    hash: "i-ph-hash",
+    info: "i-ph-info",
+    light: "i-ph-sun",
+    loading: "i-ph-circle-notch",
+    menu: "i-ph-list",
+    minus: "i-ph-minus",
+    panelClose: "i-ph-caret-left",
+    panelOpen: "i-ph-caret-right",
+    plus: "i-ph-plus",
+    reload: "i-ph-arrow-counter-clockwise",
+    search: "i-ph-magnifying-glass",
+    stop: "i-ph-square",
+    success: "i-ph-check-circle",
+    system: "i-ph-monitor",
+    tip: "i-ph-lightbulb",
+    upload: "i-ph-upload",
+    warning: "i-ph-warning"
+  },
+  tabler: {
+    arrowDown: "i-tabler-arrow-down",
+    arrowLeft: "i-tabler-arrow-left",
+    arrowRight: "i-tabler-arrow-right",
+    arrowUp: "i-tabler-arrow-up",
+    caution: "i-tabler-alert-square-rounded",
+    check: "i-tabler-check",
+    chevronDoubleLeft: "i-tabler-chevrons-left",
+    chevronDoubleRight: "i-tabler-chevrons-right",
+    chevronDown: "i-tabler-chevron-down",
+    chevronLeft: "i-tabler-chevron-left",
+    chevronRight: "i-tabler-chevron-right",
+    chevronUp: "i-tabler-chevron-up",
+    close: "i-tabler-x",
+    copy: "i-tabler-copy",
+    copyCheck: "i-tabler-copy-check",
+    dark: "i-tabler-moon",
+    drag: "i-tabler-grip-vertical",
+    ellipsis: "i-tabler-dots",
+    error: "i-tabler-square-rounded-x",
+    external: "i-tabler-external-link",
+    eye: "i-tabler-eye",
+    eyeOff: "i-tabler-eye-off",
+    file: "i-tabler-file",
+    folder: "i-tabler-folder",
+    folderOpen: "i-tabler-folder-open",
+    hash: "i-tabler-hash",
+    info: "i-tabler-info-square-rounded",
+    light: "i-tabler-sun",
+    loading: "i-tabler-loader-2",
+    menu: "i-tabler-menu",
+    minus: "i-tabler-minus",
+    panelClose: "i-tabler-layout-sidebar-left-collapse",
+    panelOpen: "i-tabler-layout-sidebar-left-expand",
+    plus: "i-tabler-plus",
+    reload: "i-tabler-reload",
+    search: "i-tabler-search",
+    stop: "i-tabler-player-stop",
+    success: "i-tabler-square-rounded-check",
+    system: "i-tabler-device-desktop",
+    tip: "i-tabler-bulb",
+    upload: "i-tabler-upload",
+    warning: "i-tabler-alert-triangle"
+  }
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@movk/nuxt",
   "type": "module",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "packageManager": "pnpm@10.28.0",
   "description": "Modular engineering suite for Nuxt 4 with schema-driven forms, API integration, UI components and composables",
   "author": "YiXuan <mhaibaraai@gmail.com>",
@@ -66,6 +66,8 @@
   },
   "dependencies": {
     "@iconify-json/lucide": "^1.2.86",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/tabler": "^1.2.26",
     "@internationalized/date": "^3.10.1",
     "@movk/core": "^1.1.0",
     "@nuxt/image": "^2.0.0",