From 2644eebdeb0b9d56ccd6378e683f7544736a9a25 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Tue, 16 Nov 2021 15:55:42 +0100 Subject: [PATCH] chore: update --- README.md | 39 +++++++++++++++++++++++++++++++-------- build.config.ts | 3 ++- package.json | 3 --- src/index.ts | 38 +++++++++++++++----------------------- yarn.lock | 6 +++--- 5 files changed, 51 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 8a7ac11a..0fca810d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # @nuxthq/ui -Components library as a Nuxt3 module. +Components library as a Nuxt3 module using [UnoCSS](https://github.com/antfu/unocss). ## Installation @@ -8,7 +8,7 @@ Components library as a Nuxt3 module. yarn add --dev @nuxthq/ui ``` -Register the module in your `nuxt.config.js`: +Then, register the module in your `nuxt.config.js`: ```js import { defineNuxtConfig } from 'nuxt3' @@ -20,11 +20,21 @@ export default defineNuxtConfig({ }) ``` +If you want latest updates, please use `@nuxthq/ui-edge` in your `package.json`: + +```json +{ + "devDependencies": { + "@nuxthq/ui": "npm:@nuxthq/ui-edge@latest" + } +} +``` + ## Options - `primary` -Define the primary variant. Defaults to `indigo`. +Define the primary variant. Defaults to `indigo`. You can specify your own object of colors like here: **Example:** @@ -33,10 +43,23 @@ import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ buildModules: [ - '@nuxthq/ui' - ], - ui: { - primary: 'blue' - } + ['@nuxthq/ui', { primary: 'blue' }] + ] +}) +``` + +- `prefix` + +Define the prefix of the imported components. Defaults to `u`. + +**Example:** + +```js +import { defineNuxtConfig } from 'nuxt3' + +export default defineNuxtConfig({ + buildModules: [ + ['@nuxthq/ui', { prefix: 'app' }] + ] }) ``` diff --git a/build.config.ts b/build.config.ts index 6ea27f95..8791d398 100644 --- a/build.config.ts +++ b/build.config.ts @@ -5,6 +5,7 @@ export default { ], declaration: true, externals: [ - '@nuxt/kit' + '@nuxt/kit', + '@unocss/preset-uno' ] } diff --git a/package.json b/package.json index 7ed5d0f4..e97e3485 100644 --- a/package.json +++ b/package.json @@ -23,9 +23,6 @@ "dependencies": { "@unocss/core": "^0.9.3", "@unocss/nuxt": "^0.9.3", - "@unocss/preset-icons": "^0.9.3", - "@unocss/preset-uno": "^0.9.3", - "@unocss/reset": "^0.9.3", "pathe": "^0.2.0" }, "devDependencies": { diff --git a/src/index.ts b/src/index.ts index 4f45fbc4..31c49e86 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,31 +1,25 @@ import { join } from 'pathe' import { defineNuxtModule, installModule } from '@nuxt/kit' -import presetUno, { colors } from '@unocss/preset-uno' -import presetIcons from '@unocss/preset-icons' +import { colors } from '@unocss/preset-uno' export default defineNuxtModule({ + name: '@nuxthq/ui', + configKey: 'ui', async setup (_options, nuxt) { + const _prefix = _options?.prefix || 'u' const _primary = _options?.primary || 'indigo' const options = { + exclude: [/[\/\\]dist[\/\\]/, /\.(css|postcss|sass|scss|less|stylus|styl)$/], theme: { colors: { primary: typeof _primary === 'object' ? _primary : (colors && colors[_primary]) - }, - breakpoints: { - sm: '640px', - md: '768px', - lg: '1024px', - xl: '1280px', - '2xl': '1536px' } }, - presets: [ - presetUno(), - presetIcons({ - prefix: '' - }) - ], + preflight: true, + icons: { + prefix: '' + }, shortcuts: { 'bg-tw-white': 'bg-white dark:bg-gray-900', 'bg-tw-gray-50': 'bg-gray-50 dark:bg-gray-800', @@ -98,30 +92,28 @@ export default defineNuxtModule({ nuxt.hook('components:dirs', (dirs) => { dirs.push({ path: join(__dirname, 'components/elements'), - prefix: _options.prefix || 'u' + prefix: _prefix }) dirs.push({ path: join(__dirname, 'components/feedback'), - prefix: _options.prefix || 'u' + prefix: _prefix }) dirs.push({ path: join(__dirname, 'components/forms'), - prefix: _options.prefix || 'u' + prefix: _prefix }) dirs.push({ path: join(__dirname, 'components/layout'), - prefix: _options.prefix || 'u' + prefix: _prefix }) dirs.push({ path: join(__dirname, 'components/navigation'), - prefix: _options.prefix || 'u' + prefix: _prefix }) dirs.push({ path: join(__dirname, 'components/overlays'), - prefix: _options.prefix || 'u' + prefix: _prefix }) }) - - nuxt.options.css.unshift('@unocss/reset/tailwind.css') } }) diff --git a/yarn.lock b/yarn.lock index 84aa5a03..0ae59a00 100644 --- a/yarn.lock +++ b/yarn.lock @@ -871,7 +871,7 @@ dependencies: "@unocss/core" "0.9.3" -"@unocss/preset-icons@0.9.3", "@unocss/preset-icons@^0.9.3": +"@unocss/preset-icons@0.9.3": version "0.9.3" resolved "https://registry.yarnpkg.com/@unocss/preset-icons/-/preset-icons-0.9.3.tgz#1a279f6a6614fc0413883da3e491e1a9e20b0e92" integrity sha512-qnVrvEsXMP7YgTEzvHtur4TbG5lrk0s4IKdu4WRkwTI+CytOHxJZ3ApP9XdbNIwDOS3eQIyGYqU4tfFSTBzZXw== @@ -880,14 +880,14 @@ "@unocss/core" "0.9.3" local-pkg "^0.4.0" -"@unocss/preset-uno@0.9.3", "@unocss/preset-uno@^0.9.3": +"@unocss/preset-uno@0.9.3": version "0.9.3" resolved "https://registry.yarnpkg.com/@unocss/preset-uno/-/preset-uno-0.9.3.tgz#eccd125374f6e7af7182c41a05e17cf668b2c33a" integrity sha512-i6kSGhDM35YDscqsUta6qljXn6j7mE9x3odE0Tr133EI8zNY0kcz8flB4pz0tJGhP2TS5vDy2D0M0XfqJXIOfg== dependencies: "@unocss/core" "0.9.3" -"@unocss/reset@0.9.3", "@unocss/reset@^0.9.3": +"@unocss/reset@0.9.3": version "0.9.3" resolved "https://registry.yarnpkg.com/@unocss/reset/-/reset-0.9.3.tgz#e0cf9d6419a928b4c1c0f68e9336a6ebf163c418" integrity sha512-g847Lsg0GlkbBrvhtcutb/3aICWy9bO3AQm1ySDb4wOY771awh+zjJ0EmBO7Hx6tFXKqSJOc3XNsIE/rT12M6A==