@yh-ui/nuxt 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present YH-UI Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,140 @@
+# @yh-ui/nuxt
+
+YH-UI 的 Nuxt 模块，提供开箱即用的 SSR 支持和组件自动导入。
+
+## 特性
+
+✅ **完整的 SSR 支持** - 解决了 Hydration Mismatch 问题  
+✅ **组件自动导入** - 无需手动注册组件  
+✅ **Composables 自动导入** - 直接使用 `useNamespace`、`useId` 等  
+✅ **样式自动注入** - 自动加载主题样式  
+✅ **TypeScript 支持** - 完整的类型提示  
+✅ **Nuxt 3 & 4 兼容** - 支持最新的 Nuxt 4.x
+
+## 安装
+
+```bash
+pnpm add @yh-ui/nuxt
+```
+
+## 快速开始
+
+### 1. 注册模块
+
+在 `nuxt.config.ts` 中添加模块：
+
+```typescript
+export default defineNuxtConfig({
+  modules: [
+    '@yh-ui/nuxt'
+  ],
+  
+  // 可选配置
+  yhUI: {
+    importStyle: true  // 是否自动导入样式，默认为 true
+  }
+})
+```
+
+### 2. 直接使用组件
+
+组件会自动导入，无需手动注册：
+
+```vue
+<template>
+  <div>
+    <YhButton type="primary">Click Me</YhButton>
+    <YhInput v-model="value" placeholder="Enter text" />
+  </div>
+</template>
+
+<script setup>
+const value = ref('')
+</script>
+```
+
+### 3. 使用 Composables
+
+Hooks 也会自动导入：
+
+```vue
+<script setup>
+// 直接使用，无需导入
+const ns = useNamespace('my-component')
+const id = useId()
+const { nextZIndex } = useZIndex()
+</script>
+```
+
+### 4. 使用全局方法
+
+```vue
+<script setup>
+// Message 和 Notification 自动导入
+const showMessage = () => {
+  YhMessage.success('操作成功！')
+}
+
+const showNotification = () => {
+  YhNotification({
+    title: '提示',
+    message: '这是一条通知消息'
+  })
+}
+</script>
+```
+
+## SSR 注意事项
+
+本模块已经处理了以下 SSR 相关问题：
+
+1. **ID 生成** - 使用 Vue 3.5 原生 `useId()`，确保服务端和客户端生成的 ID 一致
+2. **Z-Index 管理** - 通过 provide/inject 为每个请求提供独立的计数器
+3. **DOM 访问** - 所有 DOM 操作都已经用 `isClient` 保护
+
+## 自动导入的组件
+
+以下组件可以直接使用，无需导入：
+
+- `YhButton`
+- `YhInput` / `YhInputNumber` / `YhInputTag`
+- `YhCheckbox` / `YhCheckboxGroup`
+- `YhRadio` / `YhRadioGroup` / `YhRadioButton`
+- `YhSelect` / `YhOption`
+- `YhCascader` / `YhCascaderPanel`
+- `YhSwitch` / `YhRate` / `YhSlider`
+- `YhTimeSelect` / `YhTransfer` / `YhTreeSelect`
+- `YhForm` / `YhFormItem` / `YhFormSchema`
+- `YhRow` / `YhCol`
+- `YhCard` / `YhBadge` / `YhDivider` / `YhTag`
+- `YhIcon`
+- `YhConfigProvider`
+
+## 自动导入的 Composables
+
+- `useNamespace` - BEM 类名生成
+- `useId` - 唯一 ID 生成
+- `useZIndex` - Z-Index 管理
+- `useLocale` - 国际化
+- `useFormItem` - 表单项集成
+- `useGlobalNamespace` - 全局命名空间
+
+## 配置选项
+
+| 选项 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `importStyle` | `boolean` | `true` | 是否自动导入样式文件 |
+
+## 兼容性
+
+- Nuxt: `^3.0.0` 或 `^4.0.0-rc.1`
+- Vue: `^3.5.0`
+- Node.js: `>=18.0.0`
+
+## 示例项目
+
+查看 [playground](../../playground-nuxt) 目录获取完整示例。
+
+## License
+
+MIT

package/dist/module.cjs

@@ -0,0 +1,204 @@
+'use strict';
+
+const crypto = require('node:crypto');
+const kit = require('@nuxt/kit');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const crypto__default = /*#__PURE__*/_interopDefaultCompat(crypto);
+
+if (typeof crypto__default.hash !== "function") {
+  crypto__default.hash = (algorithm, data, outputEncoding = "hex") => {
+    return crypto__default.createHash(algorithm).update(data).digest(outputEncoding);
+  };
+}
+const yhNuxtModule = kit.defineNuxtModule({
+  meta: {
+    name: "@yh-ui/nuxt",
+    configKey: "yhUI",
+    compatibility: {
+      nuxt: "^3.11.0 || ^4.0.0-rc.1"
+    }
+  },
+  defaults: {
+    importStyle: true,
+    buildTranspile: true,
+    prefix: "Yh",
+    ssrOptimization: {
+      componentCache: true
+    }
+  },
+  setup(options, nuxt) {
+    const { resolve } = kit.createResolver((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('module.cjs', document.baseURI).href)));
+    kit.addPlugin(resolve("./runtime/plugin"));
+    if (options.importStyle) {
+      nuxt.options.css.push("@yh-ui/theme/src/styles/index.scss");
+    }
+    if (options.buildTranspile) {
+      nuxt.options.build.transpile = nuxt.options.build.transpile || [];
+      const transpileList = ["@yh-ui/components", "@yh-ui/hooks", "@yh-ui/utils", "@yh-ui/theme"];
+      transpileList.forEach((pkg) => {
+        if (!nuxt.options.build.transpile.includes(pkg)) {
+          nuxt.options.build.transpile.push(pkg);
+        }
+      });
+    }
+    const components = [
+      "Button",
+      "Input",
+      "InputNumber",
+      "InputTag",
+      "Autocomplete",
+      "Checkbox",
+      "CheckboxGroup",
+      "Radio",
+      "RadioGroup",
+      "RadioButton",
+      "Switch",
+      "Rate",
+      "Select",
+      "Option",
+      "Cascader",
+      "CascaderPanel",
+      "Slider",
+      "TimePicker",
+      "TimeSelect",
+      "DatePicker",
+      "Transfer",
+      "TransferPanel",
+      "TreeSelect",
+      "Divider",
+      "Badge",
+      "Card",
+      "Marquee",
+      "Row",
+      "Col",
+      "ConfigProvider",
+      "Form",
+      "FormItem",
+      "FormSchema",
+      "Tag",
+      "Icon",
+      "ColorPicker",
+      "Breadcrumb",
+      "BreadcrumbItem",
+      "BackTop",
+      "Alert",
+      "Skeleton",
+      "SkeletonItem",
+      "Progress",
+      "Tooltip",
+      "Popconfirm",
+      "Popover",
+      "Dialog",
+      "Drawer",
+      "Watermark",
+      "Upload",
+      "Spin",
+      "Pagination",
+      "Image",
+      "ImageViewer",
+      "Descriptions",
+      "DescriptionsItem",
+      "Tabs",
+      "TabPane",
+      "Steps",
+      "Step",
+      "Affix",
+      "InfiniteScroll",
+      "Dropdown",
+      "DropdownItem",
+      "DropdownMenu",
+      "Menu",
+      "MenuItem",
+      "MenuItemGroup",
+      "SubMenu",
+      "Waterfall",
+      "Tree",
+      "TreeNode",
+      "Calendar",
+      "Countdown",
+      "Table",
+      "TableColumn",
+      // 新增组件
+      "Space",
+      "Avatar",
+      "Empty",
+      // Typography
+      "TypographyTitle",
+      "TypographyText",
+      "TypographyParagraph",
+      "TypographyLink",
+      // Container
+      "Container",
+      "Header",
+      "Aside",
+      "Main",
+      "Footer",
+      // Result
+      "Result",
+      // Grid
+      "Grid",
+      "GridItem",
+      // Mention
+      "Mention"
+    ];
+    components.forEach((name) => {
+      kit.addComponent({
+        name: `${options.prefix}${name}`,
+        export: `Yh${name}`,
+        filePath: "@yh-ui/components"
+      });
+    });
+    const hooks = [
+      "useNamespace",
+      "useZIndex",
+      "useLocale",
+      "useFormItem",
+      "createZIndexCounter",
+      "useGlobalNamespace",
+      "useId",
+      "useVirtualScroll",
+      "useCache",
+      "useEventListener",
+      "useScrollLock",
+      "useClickOutside",
+      "useConfig"
+    ];
+    hooks.forEach((name) => {
+      kit.addImports({
+        name,
+        as: name,
+        from: "@yh-ui/hooks"
+      });
+    });
+    const globalMethods = [
+      "YhMessage",
+      "YhNotification",
+      "YhMessageBox",
+      "YhDialogMethod",
+      "YhLoading"
+    ];
+    globalMethods.forEach((name) => {
+      kit.addImports({
+        name,
+        as: name,
+        from: "@yh-ui/components"
+      });
+    });
+    kit.extendViteConfig((config) => {
+      config.optimizeDeps ||= {};
+      config.optimizeDeps.include ||= [];
+      const include = config.optimizeDeps.include;
+      const dependencies = ["@yh-ui/components", "@yh-ui/hooks", "@yh-ui/utils", "dayjs"];
+      dependencies.forEach((dep) => {
+        if (!include.includes(dep)) {
+          include.push(dep);
+        }
+      });
+    });
+  }
+});
+
+module.exports = yhNuxtModule;

package/dist/module.d.cts

@@ -0,0 +1,50 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * Whether to automatically import styles.
+     * If true, it will import `@yh-ui/theme/src/styles/index.scss`.
+     * @default true
+     */
+    importStyle?: boolean;
+    /**
+     * Whether to transpile dependencies.
+     * @default true
+     */
+    buildTranspile?: boolean;
+    /**
+     * Prefix for components.
+     * @default 'Yh'
+     */
+    prefix?: string;
+    /**
+     * SSR optimization configurations.
+     */
+    ssrOptimization?: {
+        /**
+         * Whether to enable component cache hints.
+         * @default true
+         */
+        componentCache?: boolean;
+    };
+}
+declare const yhNuxtModule: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+declare module '@nuxt/schema' {
+    interface NuxtConfig {
+        yhUI?: ModuleOptions;
+    }
+    interface NuxtOptions {
+        yhUI?: ModuleOptions;
+    }
+}
+declare module 'nuxt/schema' {
+    interface NuxtConfig {
+        yhUI?: ModuleOptions;
+    }
+    interface NuxtOptions {
+        yhUI?: ModuleOptions;
+    }
+}
+
+export = yhNuxtModule;
+export type { ModuleOptions };

package/dist/module.d.mts

@@ -0,0 +1,50 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * Whether to automatically import styles.
+     * If true, it will import `@yh-ui/theme/src/styles/index.scss`.
+     * @default true
+     */
+    importStyle?: boolean;
+    /**
+     * Whether to transpile dependencies.
+     * @default true
+     */
+    buildTranspile?: boolean;
+    /**
+     * Prefix for components.
+     * @default 'Yh'
+     */
+    prefix?: string;
+    /**
+     * SSR optimization configurations.
+     */
+    ssrOptimization?: {
+        /**
+         * Whether to enable component cache hints.
+         * @default true
+         */
+        componentCache?: boolean;
+    };
+}
+declare const yhNuxtModule: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+declare module '@nuxt/schema' {
+    interface NuxtConfig {
+        yhUI?: ModuleOptions;
+    }
+    interface NuxtOptions {
+        yhUI?: ModuleOptions;
+    }
+}
+declare module 'nuxt/schema' {
+    interface NuxtConfig {
+        yhUI?: ModuleOptions;
+    }
+    interface NuxtOptions {
+        yhUI?: ModuleOptions;
+    }
+}
+
+export { yhNuxtModule as default };
+export type { ModuleOptions };

package/dist/module.d.ts

@@ -0,0 +1,50 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * Whether to automatically import styles.
+     * If true, it will import `@yh-ui/theme/src/styles/index.scss`.
+     * @default true
+     */
+    importStyle?: boolean;
+    /**
+     * Whether to transpile dependencies.
+     * @default true
+     */
+    buildTranspile?: boolean;
+    /**
+     * Prefix for components.
+     * @default 'Yh'
+     */
+    prefix?: string;
+    /**
+     * SSR optimization configurations.
+     */
+    ssrOptimization?: {
+        /**
+         * Whether to enable component cache hints.
+         * @default true
+         */
+        componentCache?: boolean;
+    };
+}
+declare const yhNuxtModule: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+declare module '@nuxt/schema' {
+    interface NuxtConfig {
+        yhUI?: ModuleOptions;
+    }
+    interface NuxtOptions {
+        yhUI?: ModuleOptions;
+    }
+}
+declare module 'nuxt/schema' {
+    interface NuxtConfig {
+        yhUI?: ModuleOptions;
+    }
+    interface NuxtOptions {
+        yhUI?: ModuleOptions;
+    }
+}
+
+export = yhNuxtModule;
+export type { ModuleOptions };

package/dist/module.mjs

@@ -0,0 +1,197 @@
+import crypto from 'node:crypto';
+import { defineNuxtModule, createResolver, addPlugin, addComponent, addImports, extendViteConfig } from '@nuxt/kit';
+
+if (typeof crypto.hash !== "function") {
+  crypto.hash = (algorithm, data, outputEncoding = "hex") => {
+    return crypto.createHash(algorithm).update(data).digest(outputEncoding);
+  };
+}
+const yhNuxtModule = defineNuxtModule({
+  meta: {
+    name: "@yh-ui/nuxt",
+    configKey: "yhUI",
+    compatibility: {
+      nuxt: "^3.11.0 || ^4.0.0-rc.1"
+    }
+  },
+  defaults: {
+    importStyle: true,
+    buildTranspile: true,
+    prefix: "Yh",
+    ssrOptimization: {
+      componentCache: true
+    }
+  },
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    addPlugin(resolve("./runtime/plugin"));
+    if (options.importStyle) {
+      nuxt.options.css.push("@yh-ui/theme/src/styles/index.scss");
+    }
+    if (options.buildTranspile) {
+      nuxt.options.build.transpile = nuxt.options.build.transpile || [];
+      const transpileList = ["@yh-ui/components", "@yh-ui/hooks", "@yh-ui/utils", "@yh-ui/theme"];
+      transpileList.forEach((pkg) => {
+        if (!nuxt.options.build.transpile.includes(pkg)) {
+          nuxt.options.build.transpile.push(pkg);
+        }
+      });
+    }
+    const components = [
+      "Button",
+      "Input",
+      "InputNumber",
+      "InputTag",
+      "Autocomplete",
+      "Checkbox",
+      "CheckboxGroup",
+      "Radio",
+      "RadioGroup",
+      "RadioButton",
+      "Switch",
+      "Rate",
+      "Select",
+      "Option",
+      "Cascader",
+      "CascaderPanel",
+      "Slider",
+      "TimePicker",
+      "TimeSelect",
+      "DatePicker",
+      "Transfer",
+      "TransferPanel",
+      "TreeSelect",
+      "Divider",
+      "Badge",
+      "Card",
+      "Marquee",
+      "Row",
+      "Col",
+      "ConfigProvider",
+      "Form",
+      "FormItem",
+      "FormSchema",
+      "Tag",
+      "Icon",
+      "ColorPicker",
+      "Breadcrumb",
+      "BreadcrumbItem",
+      "BackTop",
+      "Alert",
+      "Skeleton",
+      "SkeletonItem",
+      "Progress",
+      "Tooltip",
+      "Popconfirm",
+      "Popover",
+      "Dialog",
+      "Drawer",
+      "Watermark",
+      "Upload",
+      "Spin",
+      "Pagination",
+      "Image",
+      "ImageViewer",
+      "Descriptions",
+      "DescriptionsItem",
+      "Tabs",
+      "TabPane",
+      "Steps",
+      "Step",
+      "Affix",
+      "InfiniteScroll",
+      "Dropdown",
+      "DropdownItem",
+      "DropdownMenu",
+      "Menu",
+      "MenuItem",
+      "MenuItemGroup",
+      "SubMenu",
+      "Waterfall",
+      "Tree",
+      "TreeNode",
+      "Calendar",
+      "Countdown",
+      "Table",
+      "TableColumn",
+      // 新增组件
+      "Space",
+      "Avatar",
+      "Empty",
+      // Typography
+      "TypographyTitle",
+      "TypographyText",
+      "TypographyParagraph",
+      "TypographyLink",
+      // Container
+      "Container",
+      "Header",
+      "Aside",
+      "Main",
+      "Footer",
+      // Result
+      "Result",
+      // Grid
+      "Grid",
+      "GridItem",
+      // Mention
+      "Mention"
+    ];
+    components.forEach((name) => {
+      addComponent({
+        name: `${options.prefix}${name}`,
+        export: `Yh${name}`,
+        filePath: "@yh-ui/components"
+      });
+    });
+    const hooks = [
+      "useNamespace",
+      "useZIndex",
+      "useLocale",
+      "useFormItem",
+      "createZIndexCounter",
+      "useGlobalNamespace",
+      "useId",
+      "useVirtualScroll",
+      "useCache",
+      "useEventListener",
+      "useScrollLock",
+      "useClickOutside",
+      "useConfig"
+    ];
+    hooks.forEach((name) => {
+      addImports({
+        name,
+        as: name,
+        from: "@yh-ui/hooks"
+      });
+    });
+    const globalMethods = [
+      "YhMessage",
+      "YhNotification",
+      "YhMessageBox",
+      "YhDialogMethod",
+      "YhLoading"
+    ];
+    globalMethods.forEach((name) => {
+      addImports({
+        name,
+        as: name,
+        from: "@yh-ui/components"
+      });
+    });
+    extendViteConfig((config) => {
+      config.optimizeDeps ||= {};
+      config.optimizeDeps.include ||= [];
+      const include = config.optimizeDeps.include;
+      const dependencies = ["@yh-ui/components", "@yh-ui/hooks", "@yh-ui/utils", "dayjs"];
+      dependencies.forEach((dep) => {
+        if (!include.includes(dep)) {
+          include.push(dep);
+        }
+      });
+    });
+  }
+});
+
+export { yhNuxtModule as default };

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@yh-ui/nuxt",
+  "version": "0.1.0",
+  "description": "Nuxt module for YH-UI",
+  "type": "module",
+  "main": "./dist/module.cjs",
+  "module": "./dist/module.mjs",
+  "types": "./dist/module.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/module.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@nuxt/kit": "^3.11.0 || ^4.0.0",
+    "@yh-ui/components": "0.1.0",
+    "@yh-ui/theme": "0.1.0"
+  },
+  "devDependencies": {
+    "@nuxt/schema": "^3.11.0 || ^4.0.0",
+    "nuxt": "^3.11.0 || ^4.0.0-rc.1",
+    "vue": "^3.5.0"
+  },
+  "peerDependencies": {
+    "nuxt": "^3.11.0 || ^4.0.0-rc.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/1079161148/yh-ui.git",
+    "directory": "packages/nuxt"
+  },
+  "keywords": [
+    "yh-ui",
+    "nuxt",
+    "module"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub"
+  }
+}