@vueless/nuxt 0.0.9-beta.0 → 0.0.9-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +13 -22
  2. package/dist/README.md +13 -22
  3. package/dist/module.json +1 -1
  4. package/dist/package.json +3 -3
  5. package/dist/runtime/plugin.js +21 -2
  6. package/package.json +3 -3
package/README.md CHANGED
@@ -1,39 +1,30 @@
1
1
  # Vueless Nuxt Module
2
2
 
3
- [![npm version][npm-version-src]][npm-version-href]
4
- [![npm downloads][npm-downloads-src]][npm-downloads-href]
5
- [![License][license-src]][license-href]
6
- [![Nuxt][nuxt-src]][nuxt-href]
7
-
8
3
  ## Quick Setup
9
4
 
10
- 1. Add `@vueless/nuxt` dependency to your project.
5
+ 1. Install Vueless Nuxt Module to your project.
11
6
 
12
7
  ```bash
13
8
  npm i @vueless/nuxt
9
+ npx vueless init
14
10
  ```
15
11
 
16
- 2. Add `@vueless/nuxt` to the `modules` section of `nuxt.config.{ts,js}`
12
+ 2. Register `@vueless/nuxt` into the Nuxt config modules section in `nuxt.config.{ts,js}`
17
13
 
18
14
  ```js
19
- {
15
+ export default defineNuxtConfig({
20
16
  modules: [
21
17
  '@vueless/nuxt'
22
- ]
23
- }
18
+ ],
19
+ ...
20
+ })
24
21
  ```
25
22
 
26
- That's it! You can now use `@vueless/nuxt` in your Nuxt app ✨
27
-
28
- <!-- Badges -->
29
- [npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
30
- [npm-version-href]: https://npmjs.com/package/my-module
23
+ 3. Import Tailwind CSS and Vueless at the top of the main CSS file.
31
24
 
32
- [npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
33
- [npm-downloads-href]: https://npmjs.com/package/my-module
34
-
35
- [license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
36
- [license-href]: https://npmjs.com/package/my-module
25
+ ```scss
26
+ @import "tailwindcss";
27
+ @import "vueless";
28
+ ```
37
29
 
38
- [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
39
- [nuxt-href]: https://nuxt.com
30
+ That's it! You can now use Vueless in your Nuxt app ✨
package/dist/README.md CHANGED
@@ -1,39 +1,30 @@
1
1
  # Vueless Nuxt Module
2
2
 
3
- [![npm version][npm-version-src]][npm-version-href]
4
- [![npm downloads][npm-downloads-src]][npm-downloads-href]
5
- [![License][license-src]][license-href]
6
- [![Nuxt][nuxt-src]][nuxt-href]
7
-
8
3
  ## Quick Setup
9
4
 
10
- 1. Add `@vueless/nuxt` dependency to your project.
5
+ 1. Install Vueless Nuxt Module to your project.
11
6
 
12
7
  ```bash
13
8
  npm i @vueless/nuxt
9
+ npx vueless init
14
10
  ```
15
11
 
16
- 2. Add `@vueless/nuxt` to the `modules` section of `nuxt.config.{ts,js}`
12
+ 2. Register `@vueless/nuxt` into the Nuxt config modules section in `nuxt.config.{ts,js}`
17
13
 
18
14
  ```js
19
- {
15
+ export default defineNuxtConfig({
20
16
  modules: [
21
17
  '@vueless/nuxt'
22
- ]
23
- }
18
+ ],
19
+ ...
20
+ })
24
21
  ```
25
22
 
26
- That's it! You can now use `@vueless/nuxt` in your Nuxt app ✨
27
-
28
- <!-- Badges -->
29
- [npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
30
- [npm-version-href]: https://npmjs.com/package/my-module
23
+ 3. Import Tailwind CSS and Vueless at the top of the main CSS file.
31
24
 
32
- [npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
33
- [npm-downloads-href]: https://npmjs.com/package/my-module
34
-
35
- [license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
36
- [license-href]: https://npmjs.com/package/my-module
25
+ ```scss
26
+ @import "tailwindcss";
27
+ @import "vueless";
28
+ ```
37
29
 
38
- [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
39
- [nuxt-href]: https://nuxt.com
30
+ That's it! You can now use Vueless in your Nuxt app ✨
package/dist/module.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "compatibility": {
5
5
  "nuxt": ">=3.13.0"
6
6
  },
7
- "version": "0.0.9-beta.0",
7
+ "version": "0.0.9-beta.10",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "0.8.4",
10
10
  "unbuild": "2.0.0"
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vueless/nuxt",
3
- "version": "0.0.9-beta.0",
3
+ "version": "0.0.9-beta.10",
4
4
  "license": "MIT",
5
5
  "description": "Nuxt Styleless UI Component Library, powered by Tailwind CSS.",
6
6
  "keywords": [
@@ -58,10 +58,10 @@
58
58
  "@nuxt/kit": "^3.13.1",
59
59
  "@tailwindcss/vite": "^4.0.14",
60
60
  "tailwindcss": "^4.0.14",
61
- "vueless": "^0.0.825-beta.4"
61
+ "vueless": "^0.0.825-beta.55"
62
62
  },
63
63
  "devDependencies": {
64
- "@material-symbols/svg-500": "^0.25.0",
64
+ "@material-symbols/svg-500": "^0.29.1",
65
65
  "@nuxt/devtools": "^1.4.1",
66
66
  "@nuxt/eslint-config": "^0.5.7",
67
67
  "@nuxt/module-builder": "^0.8.4",
package/dist/runtime/plugin.js CHANGED
@@ -1,16 +1,35 @@
1
1
  import { createVueless, setTheme } from "vueless";
2
+ import { COLOR_MODE_KEY, AUTO_MODE_KEY, LIGHT_MODE_SELECTOR, DARK_MODE_SELECTOR, PRIMARY_COLOR_KEY, NEUTRAL_COLOR_KEY, ROUNDING_KEY } from "vueless/constants";
3
+ import { ColorMode } from "vueless/types";
2
4
  import vClickOutside from "vueless/directives/clickOutside/vClickOutside";
3
5
  import vTooltip from "vueless/directives/tooltip/vTooltip";
4
6
  import { defineNuxtPlugin } from "#app";
7
+ function parseCookies(cookieHeader) {
8
+ if (!cookieHeader) return {};
9
+ return cookieHeader.split(";").reduce((acc, cookie) => {
10
+ const [key, value] = cookie.trim().split("=");
11
+ if (key) acc[key] = value;
12
+ return acc;
13
+ }, {});
14
+ }
5
15
  export default defineNuxtPlugin((_nuxtApp) => {
6
16
  const vueless = createVueless();
7
17
  _nuxtApp.vueApp.use(vueless, []);
8
18
  _nuxtApp.vueApp.directive("clickOutside", vClickOutside);
9
19
  _nuxtApp.vueApp.directive("tooltip", vTooltip);
10
20
  if (import.meta.server) {
11
- const themeRootVariables = setTheme();
21
+ const event = _nuxtApp.ssrContext?.event;
22
+ const cookies = parseCookies(event?.node.req.headers.cookie);
23
+ const primary = cookies?.[PRIMARY_COLOR_KEY];
24
+ const neutral = cookies?.[NEUTRAL_COLOR_KEY];
25
+ const rounding = cookies?.[ROUNDING_KEY];
26
+ const colorMode = cookies?.[COLOR_MODE_KEY];
27
+ const isCachedAutoMode = Boolean(Number(cookies?.[AUTO_MODE_KEY]));
28
+ const themeRootVariables = setTheme({ primary, neutral, rounding, colorMode }, isCachedAutoMode);
29
+ const colorModeClass = colorMode === ColorMode.Dark ? DARK_MODE_SELECTOR : LIGHT_MODE_SELECTOR;
12
30
  _nuxtApp.ssrContext?.head.push({
13
- style: [{ innerHTML: themeRootVariables }]
31
+ style: [{ innerHTML: themeRootVariables }],
32
+ htmlAttrs: { class: colorModeClass }
14
33
  });
15
34
  }
16
35
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vueless/nuxt",
3
- "version": "0.0.9-beta.0",
3
+ "version": "0.0.9-beta.10",
4
4
  "license": "MIT",
5
5
  "description": "Nuxt Styleless UI Component Library, powered by Tailwind CSS.",
6
6
  "keywords": [
@@ -58,10 +58,10 @@
58
58
  "@nuxt/kit": "^3.13.1",
59
59
  "@tailwindcss/vite": "^4.0.14",
60
60
  "tailwindcss": "^4.0.14",
61
- "vueless": "^0.0.825-beta.4"
61
+ "vueless": "^0.0.825-beta.55"
62
62
  },
63
63
  "devDependencies": {
64
- "@material-symbols/svg-500": "^0.25.0",
64
+ "@material-symbols/svg-500": "^0.29.1",
65
65
  "@nuxt/devtools": "^1.4.1",
66
66
  "@nuxt/eslint-config": "^0.5.7",
67
67
  "@nuxt/module-builder": "^0.8.4",