Merge pull request #79 from becem-gharbi/v2

V2
becem-gharbi · Aug 19, 2024 · 067347f · 067347f
2 parents ce7c316 + ee53e2c
commit 067347f
Show file tree

Hide file tree

Showing 50 changed files with 2,559 additions and 2,243 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,126 @@
 # Changelog
 
 
+## v2.0.0-beta.4
+
+[compare changes](https://github.com/becem-gharbi/nuxt-naiveui/compare/v2.0.0-beta.3...v2.0.0-beta.4)
+
+### 🚀 Enhancements
+
+- Add `generateTailwindColorThemes` utility to generate color themes ([3f291b0](https://github.com/becem-gharbi/nuxt-naiveui/commit/3f291b0))
+
+### 🩹 Fixes
+
+- **useNaiveForm:** Restore validation on `reset` ([3014659](https://github.com/becem-gharbi/nuxt-naiveui/commit/3014659))
+
+### 📖 Documentation
+
+- **NaiveConfig:** Update theme customization ([3db65c8](https://github.com/becem-gharbi/nuxt-naiveui/commit/3db65c8))
+
+### 🏡 Chore
+
+- **playground:** Add `show` page ([1ac0279](https://github.com/becem-gharbi/nuxt-naiveui/commit/1ac0279))
+- ⚠️ Rename `generateColorThemes` to `generateAntdColorThemes` ([c5c848d](https://github.com/becem-gharbi/nuxt-naiveui/commit/c5c848d))
+- **playground:** Use tailwind color themes ([ee29308](https://github.com/becem-gharbi/nuxt-naiveui/commit/ee29308))
+- **playground:** Add `form` page ([4b83a74](https://github.com/becem-gharbi/nuxt-naiveui/commit/4b83a74))
+- **playground:** Revert app.config changes ([684ff77](https://github.com/becem-gharbi/nuxt-naiveui/commit/684ff77))
+
+#### ⚠️ Breaking Changes
+
+- ⚠️ Rename `generateColorThemes` to `generateAntdColorThemes` ([c5c848d](https://github.com/becem-gharbi/nuxt-naiveui/commit/c5c848d))
+
+### ❤️ Contributors
+
+- Becem-gharbi <becem.gharbi@live.com>
+
+## v2.0.0-beta.3
+
+[compare changes](https://github.com/becem-gharbi/nuxt-naiveui/compare/v2.0.0-beta.2...v2.0.0-beta.3)
+
+### 💅 Refactors
+
+- **NaiveIcon:** No significant change ([3495f90](https://github.com/becem-gharbi/nuxt-naiveui/commit/3495f90))
+
+### ❤️ Contributors
+
+- Becem-gharbi <becem.gharbi@live.com>
+
+## v2.0.0-beta.2
+
+[compare changes](https://github.com/becem-gharbi/nuxt-naiveui/compare/v2.0.0-beta.0...v2.0.0-beta.2)
+
+### 🩹 Fixes
+
+- **NaiveIcon:** Fix ssr loading on Netlify ([b554666](https://github.com/becem-gharbi/nuxt-naiveui/commit/b554666))
+
+### 💅 Refactors
+
+- **NaiveIcon:** Change key of `callOnce` ([4365b48](https://github.com/becem-gharbi/nuxt-naiveui/commit/4365b48))
+
+### 🏡 Chore
+
+- Bump version ([fe7dbbf](https://github.com/becem-gharbi/nuxt-naiveui/commit/fe7dbbf))
+
+### ❤️ Contributors
+
+- Becem-gharbi <becem.gharbi@live.com>
+
+## v2.0.0-beta.0
+
+[compare changes](https://github.com/becem-gharbi/nuxt-naiveui/compare/v1.14.0...v2.0.0-beta.0)
+
+### 🚀 Enhancements
+
+- **NaiveConfig:** Enable `reactive themeConfig` ([e353a1c](https://github.com/becem-gharbi/nuxt-naiveui/commit/e353a1c))
+- Allow compatibility with `nuxt` v4 ([d1b7eab](https://github.com/becem-gharbi/nuxt-naiveui/commit/d1b7eab))
+
+### 🔥 Performance
+
+- **NaiveIcon:** Remove extra imports ([e64c847](https://github.com/becem-gharbi/nuxt-naiveui/commit/e64c847))
+
+### 🩹 Fixes
+
+- Resolve `public` directory relative to `rootDir` ([edc0919](https://github.com/becem-gharbi/nuxt-naiveui/commit/edc0919))
+
+### 📖 Documentation
+
+- List contributors ([9d88da4](https://github.com/becem-gharbi/nuxt-naiveui/commit/9d88da4))
+- Fix github link ([ce7c316](https://github.com/becem-gharbi/nuxt-naiveui/commit/ce7c316))
+- **NaiveConfig:** Remove dynamic imports of default themes ([e6c1263](https://github.com/becem-gharbi/nuxt-naiveui/commit/e6c1263))
+
+### 🌊 Types
+
+- Fix typecheck in development ([72c83e6](https://github.com/becem-gharbi/nuxt-naiveui/commit/72c83e6))
+- **NaiveConfig:** Assert `appConfig` type ([fdeaba4](https://github.com/becem-gharbi/nuxt-naiveui/commit/fdeaba4))
+- Solve typecheck issues ([7096a44](https://github.com/becem-gharbi/nuxt-naiveui/commit/7096a44))
+
+### 🏡 Chore
+
+- ⚠️ Remove `themeConfig` from `runtimeConfig` ([84d354d](https://github.com/becem-gharbi/nuxt-naiveui/commit/84d354d))
+- **NaiveConfig:** ⚠️ Remove `themeConfig` prop ([c2a61ba](https://github.com/becem-gharbi/nuxt-naiveui/commit/c2a61ba))
+- ⚠️ Remove `path` from `MenuLinkRoute` and `TabbarRoute` ([fff716b](https://github.com/becem-gharbi/nuxt-naiveui/commit/fff716b))
+- **playground:** Upgrade to `nuxt` v4 ([aeb6c35](https://github.com/becem-gharbi/nuxt-naiveui/commit/aeb6c35))
+- **styles:** ⚠️ Rename `mobileOrTablet` and `notMobileOrTablet` classes ([ba00bbe](https://github.com/becem-gharbi/nuxt-naiveui/commit/ba00bbe))
+- Prepare v2 beta release ([2c2e87b](https://github.com/becem-gharbi/nuxt-naiveui/commit/2c2e87b))
+- ⚠️ Rename `@bg-dev/nuxt-naiveui/utils` to `#naive-utils` ([5c98da9](https://github.com/becem-gharbi/nuxt-naiveui/commit/5c98da9))
+
+### ✅ Tests
+
+- Add `icon` test suite ([e46e443](https://github.com/becem-gharbi/nuxt-naiveui/commit/e46e443))
+
+#### ⚠️ Breaking Changes
+
+- ⚠️ Remove `themeConfig` from `runtimeConfig` ([84d354d](https://github.com/becem-gharbi/nuxt-naiveui/commit/84d354d))
+- **NaiveConfig:** ⚠️ Remove `themeConfig` prop ([c2a61ba](https://github.com/becem-gharbi/nuxt-naiveui/commit/c2a61ba))
+- ⚠️ Remove `path` from `MenuLinkRoute` and `TabbarRoute` ([fff716b](https://github.com/becem-gharbi/nuxt-naiveui/commit/fff716b))
+- **styles:** ⚠️ Rename `mobileOrTablet` and `notMobileOrTablet` classes ([ba00bbe](https://github.com/becem-gharbi/nuxt-naiveui/commit/ba00bbe))
+- ⚠️ Rename `@bg-dev/nuxt-naiveui/utils` to `#naive-utils` ([5c98da9](https://github.com/becem-gharbi/nuxt-naiveui/commit/5c98da9))
+
+### ❤️ Contributors
+
+- Becem-gharbi <becem.gharbi@live.com>
+- Becem <becem.gharbi@live.com>
+
 ## v1.14.0
 
 [compare changes](https://github.com/becem-gharbi/nuxt-naiveui/compare/v1.13.3...v1.14.0)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -48,6 +48,13 @@ export default defineConfig({
  text: 'Tailwind CSS',
  link: 'tailwind-css',
  },
+ {
+ text: 'Upgrades',
+ base: '/upgrades',
+ items: [
+ { text: 'v2', link: '/v2' },
+ ],
+ },
  ],
 
  socialLinks: [

diff --git a/docs/components/naive-config.md b/docs/components/naive-config.md
@@ -2,7 +2,7 @@
 
 This component is intended for theme configuration and reactivity, plus setting up global styles via `body` tag. The configuration part is handled via `n-config-provider` naive-ui component through which the theme is overwritten based on current color mode and device type.
 
-`naive-config` accepts configuration via the `naiveui.themeConfig` property in `app.config` file.
+`naive-config` accepts configuration via the `naiveui.themeConfig` config option.
 
 ```ts
 interface ThemeConfig {
@@ -14,7 +14,7 @@ interface ThemeConfig {
 }
 ```
 
-On setup, the `themeConfig` is merged with built-in default themes. These [defaults](https://github.com/becem-gharbi/nuxt-naiveui/tree/main/src/runtime/theme) are loaded dynamically based on the current color mode and device type. To disable a default theme, `defaults` property can be set to `false`.
+On setup, the `themeConfig` is merged with built-in default [themes](https://github.com/becem-gharbi/nuxt-naiveui/tree/main/src/runtime/themes). To disable a default theme, `defaults` property can be set to `false`.
 
 The common theme properties are shared globally via the `useThemeVars` naive-ui composable.
 
@@ -24,15 +24,15 @@ Naive UI generates CSS using JS [(reference)](https://www.npmjs.com/package/css-
 
 ### Customization
 
-To automatically generate color themes without granular customization, it's recommended to use the `generateColorThemes` utility.
+To automatically generate color themes without granular customization, it's recommended to use the `generateTailwindColorThemes` utility based on Tailwind CSS [default color palette](https://tailwindcss.com/docs/customizing-colors) or the `generateAntdColorThemes` utility based on Ant Design [color palette generator](https://ant.design/docs/spec/colors#palette-generation-tool).
 
-```ts [app.config.ts]
-import { generateColorThemes } from "@bg-dev/nuxt-naiveui/utils";
+```ts [nuxt.config.ts]
+import { generateTailwindColorThemes } from "@bg-dev/nuxt-naiveui/utils";
 
-export default defineAppConfig({
+export default defineNuxtConfig({
  naiveui: {
  themeConfig: {
- ...generateColorThemes({ primary: "#722ed1" }),
+ ...generateTailwindColorThemes(),
  },
  },
 });

diff --git a/docs/composables/useNaiveDevice.md b/docs/composables/useNaiveDevice.md
@@ -5,4 +5,4 @@ It can be helpful to lazy load components based on the device type to minimize p
 
 The exposed properties are `isMobileOrTablet` and `isMobile`.
 
-In the case of pre-rendering, it's recommended to be aware of hydration mismatch issues. In such a case, it's recommended to use these global CSS classes `mobileOrTablet` and `notMobileOrTablet` for responsive behavior.
+In the case of pre-rendering, it's recommended to be aware of hydration mismatch issues. In such a case, it's recommended to use these global CSS classes `naive-mobile-or-tablet` and `naive-not-mobile-or-tablet` for responsive behavior.
diff --git a/docs/tailwind-css.md b/docs/tailwind-css.md
@@ -4,55 +4,38 @@ The module provides friendly TailwindCSS integration by resolving potential styl
 
 #### Theme
 
-::: code-group
-
 ```ts [nuxt.config.ts]
-tailwindcss: {
- exposeConfig: {
- write: true,
- }
-}
-```
+import colors from "tailwindcss/colors";
 
-```ts [app.config.ts]
-import { _colors, _fontFamily } from "#tailwind-config/theme.mjs";
-
-export default defineAppConfig({
+export default defineNuxtConfig({
  naiveui: {
  themeConfig: {
- shared: {
- common: {
- fontFamily: _fontFamily.sans.join(", "),
- },
- },
  light: {
  common: {
- primaryColor: _colors.blue[600],
- primaryColorHover: _colors.blue[500],
- primaryColorPressed: _colors.blue[700],
+ primaryColor: colors.blue[600],
+ primaryColorHover: colors.blue[500],
+ primaryColorPressed: colors.blue[700],
  },
  },
  dark: {
  common: {
- primaryColor: _colors.blue[500],
- primaryColorHover: _colors.blue[400],
- primaryColorPressed: _colors.blue[600],
+ primaryColor: colors.blue[500],
+ primaryColorHover: colors.blue[400],
+ primaryColorPressed: colors.blue[600],
  },
  },
  },
  },
 });
 ```
 
-:::
-
 #### ColorMode
 
 ```ts [tailwind.config.ts]
 // tailwind.config.ts
 import type { Config } from "tailwindcss";
 
-export default<Config>{
+export default <Config>{
  darkMode: "class",
 };
 ```
diff --git a/docs/upgrades/v2.md b/docs/upgrades/v2.md
@@ -0,0 +1,14 @@
+# Upgrade to V2
+
+### ✨ New features
+
+- Ensure compatibility with Nuxt v4 - [source](https://github.com/becem-gharbi/nuxt-naiveui/commit/d1b7eab).
+- Add `generateTailwindColorThemes` utility to generate color themes - [source](https://github.com/becem-gharbi/nuxt-naiveui/commit/3f291b0).
+
+### ⚠️ Breaking changes
+
+- Rename the utility `generateColorThemes` to `generateAntdColorThemes` - [source](https://github.com/becem-gharbi/nuxt-naiveui/commit/c5c848d).
+- Remove `themeConfig` prop of `NaiveConfig` component - [source](https://github.com/becem-gharbi/nuxt-naiveui/commit/c2a61ba).
+- Remove `path` property of `MenuLinkRoute` and `TabbarRoute`, use `to` instead - [source](https://github.com/becem-gharbi/nuxt-naiveui/commit/fff716b).
+- Rename the CSS classes `mobileOrTablet` and `notMobileOrTablet` to `naive-mobile-or-tablet` and `naive-not-mobile-or-tablet` - [source](https://github.com/becem-gharbi/nuxt-naiveui/commit/ba00bbe).
+- Disallow theme configuration via `app.config` file - [source](https://github.com/becem-gharbi/nuxt-naiveui/pull/78).
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@bg-dev/nuxt-naiveui",
- "version": "1.14.0",
+ "version": "2.0.0-beta.4",
  "description": "Unofficial Naive UI module for Nuxt",
  "homepage": "https://nuxt-naiveui.bg.tn",
  "author": "Becem Gharbi",
@@ -19,7 +19,7 @@
  },
  "./utils": {
  "types": "./dist/runtime/utils/index.d.ts",
- "import": "./dist/runtime/utils/index.mjs"
+ "import": "./dist/runtime/utils/index.js"
  }
  },
  "main": "./dist/module.cjs",
@@ -40,40 +40,40 @@
  "typecheck": "nuxi typecheck",
  "prepack": "nuxt-module-build",
  "release:pre": "npm run typecheck && npm run lint && npm run prepack",
- "release": "npm run release:pre && npm run test:prod && changelogen --release && npm publish && git push --follow-tags",
+ "release": "npm run release:pre && npm run test:prod && changelogen --r 2.0.0-beta.4 --publishTag v2 --release && npm publish && git push --follow-tags",
  "docs:dev": "vitepress dev docs",
  "docs:build": "vitepress build docs",
  "docs:preview": "vitepress preview docs"
  },
  "dependencies": {
- "@ant-design/colors": "^7.0.2",
+ "@ant-design/colors": "^7.1.0",
  "@iconify/vue": "^4.1.2",
- "@nuxt/kit": "^3.12.2",
+ "@nuxt/kit": "^3.12.4",
  "defu": "^6.1.4",
  "js-cookie": "^3.0.5",
- "naive-ui": "^2.38.2"
+ "naive-ui": "^2.39.0"
  },
  "devDependencies": {
  "@nuxt/eslint-config": "^0.3.13",
- "@nuxt/module-builder": "^0.5.5",
- "@nuxt/schema": "^3.12.2",
- "@nuxtjs/tailwindcss": "^6.12.0",
- "@playwright/test": "^1.44.1",
+ "@nuxt/module-builder": "^0.8.1",
+ "@nuxt/schema": "^3.12.4",
+ "@nuxtjs/tailwindcss": "^6.12.1",
+ "@playwright/test": "^1.45.3",
  "@types/js-cookie": "^3.0.6",
- "@types/node": "^20.14.2",
+ "@types/node": "^20.14.12",
  "changelogen": "^0.5.5",
  "cross-env": "^7.0.3",
- "eslint": "^9.5.0",
- "nuxt": "^3.12.2",
- "typescript": "^5.4.5",
- "vitepress": "^1.2.3"
+ "eslint": "^9.7.0",
+ "nuxt": "^3.12.4",
+ "typescript": "^5.5.4",
+ "vitepress": "^1.3.1"
  },
  "repository": {
  "url": "git+https://github.com/becem-gharbi/nuxt-naiveui.git"
  },
  "publishConfig": {
  "access": "public",
- "tag": "latest"
+ "tag": "next"
  },
  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
-}
+}
diff --git a/playground/app.config.ts b/playground/app.config.ts
diff --git a/playground/app.vue → playground/app/app.vue b/playground/app.vue → playground/app/app.vue