Skip to content

Commit

Permalink
feat(anu-nuxt): better support and config (jd-solanki#108)
Browse files Browse the repository at this point in the history
  • Loading branch information
cpreston321 committed Jan 2, 2023
1 parent 65d555d commit 46a05b4
Show file tree
Hide file tree
Showing 12 changed files with 8,007 additions and 5,838 deletions.
19 changes: 13 additions & 6 deletions docs/guide/getting-started/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -182,17 +182,17 @@ You can also follow 脌 la carte fashion if you don't want to register all the co

## Nuxt

1. instead of installing `anu-vue` package, install `@anu-vue/nuxt`.
1. Instead of installing `anu-vue` package, install `@anu-vue/nuxt`.

```bash
# pnpm
pnpm add @anu-vue/nuxt @anu-vue/preset-theme-default && pnpm add -D @unocss/nuxt
pnpm add @anu-vue/nuxt && pnpm add -D @unocss/nuxt

# yarn
yarn add @anu-vue/nuxt @anu-vue/preset-theme-default && yarn add -D @unocss/nuxt
yarn add @anu-vue/nuxt && yarn add -D @unocss/nuxt

# npm
npm install @anu-vue/nuxt @anu-vue/preset-theme-default && npm install -D @unocss/nuxt
npm install @anu-vue/nuxt && npm install -D @unocss/nuxt
```

2. Add Anu & UnoCSS in nuxt modules
Expand All @@ -202,11 +202,18 @@ You can also follow 脌 la carte fashion if you don't want to register all the co

export default defineNuxtConfig({
modules: ['@anu-vue/nuxt', '@unocss/nuxt'],
css: ['@anu-vue/preset-theme-default/dist/style.css'],
})
```

3. Add UnoCSS config file `uno.config.js` as shown in step 2 of [usage](#usage) section.
3. Add UnoCSS config file `uno.config.ts` with this configuration

```ts
import { defineConfig } from 'unocss'

export default defineConfig({
include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],
})
```

It's done, Let's try button component 馃コ

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"private": true,
"scripts": {
"dev": "pnpm --filter @anu-vue/preset-theme-default stub && pnpm --filter anu-vue dev",
"build": "pnpm -r --filter=./packages/* run build",
"build": "pnpm --filter anu-vue build && pnpm -r --filter=!anu-vue --filter=@anu-vue/preset-* --filter=./packages/* build",
"docs:dev": "pnpm --filter @anu-vue/documentation dev",
"docs:build": "pnpm --filter anu-vue build && pnpm --filter @anu-vue/preset-theme-default build && pnpm --filter @anu-vue/documentation build",
"clean": "rimraf packages/anu-vue/dist && rimraf packages/anu-vue/component-meta && rimraf packages/anu-nuxt/dist && rimraf packages/anu-nuxt/playground/.nuxt && rimraf packages/preset-theme-default/dist",
Expand Down
9 changes: 4 additions & 5 deletions packages/anu-nuxt/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,23 +33,22 @@
"dist"
],
"scripts": {
"build": "pnpm dev:prepare && pnpm gen-imports && pnpm nuxt-module-build",
"build": "pnpm dev:prepare && nuxt-module-build",
"dev": "pnpm dev:prepare && nuxi dev playground",
"dev:build": "nuxi build playground",
"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
"gen-imports": "na tsx ../../scripts/update-nuxt.ts",
"prepublishOnly": "npm run build"
},
"dependencies": {
"@css-render/vue3-ssr": "^0.15.12",
"@nuxt/kit": "^3.0.0",
"@iconify-json/bx": "latest",
"anu-vue": "workspace:*",
"defu": "^6.1.1"
"@anu-vue/preset-theme-default": "workspace:*"
},
"devDependencies": {
"@nuxt/module-builder": "^0.2.1",
"@nuxt/schema": "^3.0.0",
"@unocss/nuxt": "^0.46.5",
"@unocss/nuxt": "^0.48.0",
"nuxt": "^3.0.0"
}
}
1 change: 0 additions & 1 deletion packages/anu-nuxt/playground/nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,4 @@ import anu from '..'

export default defineNuxtConfig({
modules: [anu, '@unocss/nuxt'],
css: ['@anu-vue/preset-theme-default/dist/style.scss'],
})
9 changes: 1 addition & 8 deletions packages/anu-nuxt/playground/package.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
{
"private": true,
"name": "my-module-playground",
"devDependencies": {
"@iconify-json/bx": "^1.1.5",
"@unocss/nuxt": "^0.46.5"
},
"dependencies": {
"@anu-vue/preset-theme-default": "workspace:*"
}
"name": "my-module-playground"
}
62 changes: 57 additions & 5 deletions packages/anu-nuxt/playground/pages/index.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,63 @@
<script setup lang="ts">
import { ref } from 'vue'
const isDialogShown = ref(false)
</script>

<template>
<div class="max-w-2xl mx-auto space-y-10">
<div class="max-w-2xl mx-auto space-y-10 my-8">
<ATypography
class="text-2xl font-bold"
title="Anu Playground"
/>
<div class="grid-row items-center grid-cols-[auto_1fr_auto]">
<!-- 馃憠 PayPal -->
<AAvatar
icon="i-bx-dollar"
color="success"
class="rounded-lg text-[1.25rem]"
/>
<ATypography
title="PayPal"
subtitle="last payment"
class="text-sm"
/>
<ATypography
:text="['+$789', 'text-success']"
class="text-sm font-semibold place-self-end"
/>

<!-- 馃憠 Credit card -->
<AAvatar
icon="i-bx-credit-card"
color="danger"
class="rounded-lg text-[1.25rem]"
/>
<ATypography
title="Credit card"
subtitle="ordered books"
class="text-sm"
/>
<ATypography
:text="['-$13.6', 'text-danger']"
class="text-sm font-semibold place-self-end"
/>

<!-- 馃憠 Server storage -->
<AAvatar
icon="i-bx-server"
color="warning"
class="rounded-lg text-[1.25rem]"
/>
<ATypography
title="Server storage"
subtitle="90% storage used"
class="text-sm"
/>
<ATypography
:text="['4 minutes ago', 'text-warning']"
class="text-sm font-semibold place-self-end"
/>
</div>

<div class="grid-row">
<AAlert>
Fruitcake I love liquorice apple pie croissant.
Expand Down Expand Up @@ -44,7 +96,7 @@ const isDialogShown = ref(false)
/>

<!-- Image -->
<AAvatar src="/images/demo/portrait-1.jpg" />
<AAvatar src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" />
</div>

<div class="flex items-center flex-wrap gap-8">
Expand All @@ -66,7 +118,7 @@ const isDialogShown = ref(false)
offset-x="16"
offset-y="16"
>
<AAvatar src="/images/demo/portrait-1.jpg" />
<AAvatar src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" />
</ABadge>
</div>

Expand Down
21 changes: 0 additions & 21 deletions packages/anu-nuxt/playground/unocss.config.ts
Original file line number Diff line number Diff line change
@@ -1,26 +1,5 @@
import { presetThemeDefault } from '@anu-vue/preset-theme-default'
import type { UnocssNuxtOptions } from '@unocss/nuxt'
import presetIcons from '@unocss/preset-icons'
import presetUno from '@unocss/preset-uno'
import { presetAnu } from 'anu-vue'

export default <UnocssNuxtOptions>{
preflight: false,
presets: [
presetUno(),
presetIcons({
scale: 1.2,
extraProperties: {
'height': '1.5em',
'flex-shrink': '0',
'display': 'inline-block',
},
}),

// anu-vue presets
presetAnu(),
presetThemeDefault(),
],
include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'],

}
152 changes: 78 additions & 74 deletions packages/anu-nuxt/src/module.ts
Original file line number Diff line number Diff line change
@@ -1,101 +1,105 @@
/* eslint-disable @typescript-eslint/no-use-before-define */
import { presetThemeDefault } from '@anu-vue/preset-theme-default'
import {
addComponent,
addImportsSources,
addPlugin,
createResolver,
defineNuxtModule
addPlugin,
createResolver,
defineNuxtModule,
} from '@nuxt/kit'
import presetIcons from '@unocss/preset-icons'
import presetUno from '@unocss/preset-uno'
import { presetAnu, presetIconExtraProperties } from 'anu-vue'

import { name, version } from '../package.json'

export interface ModuleOptions {}
const configKey = 'anu'

/** Nuxt Module Options */
interface PresetThemeOptions {

/**
* Import Anu Preset Theme with either CSS or SASS
* You can either import CSS which doesn't require any additional setup
* or SASS which requires you to install `sass` dependencies.
*
* @default 'css'
*/
style?: 'css' | 'sass'
}

export interface ModuleOptions {

/**
* Import Anu Preset Theme Default | Source npm pkg: `@anu-vue/preset-theme-default`
* When enabled, it will automatically set up the default presets for Anu and Uno.
* We recommend to enable this option to get the best experience.
*
* @default true
*/
presetTheme?: PresetThemeOptions | boolean
}

export default defineNuxtModule<ModuleOptions>({
defaults: {
presetTheme: true,
},
meta: {
name,
version,
configKey: 'anuVue',
configKey,
compatibility: {
nuxt: '^3.0.0',
},
},
setup(moduleOptions, nuxt) {
setup(opts, nuxt) {
const { resolve } = createResolver(import.meta.url)

nuxt.options.css.push('anu-vue/dist/style.css')

if (opts.presetTheme === true || typeof opts.presetTheme === 'object') {
nuxt.options.unocss = nuxt.options.unocss || {}

const ext = typeof opts.presetTheme === 'object' ? opts.presetTheme.style : 'css'
nuxt.options.css.push(`@anu-vue/preset-theme-default/dist/style.${ext}`)

const iconPreset = !!nuxt.options.unocss?.icons || true
nuxt.options.unocss.preflight = false

// Add default presets for Anu into the unocss options.
nuxt.options.unocss.presets = [
// @ts-expect-error - We know that is a valid preset
presetUno(),

// @ts-expect-error - We know that is a valid preset
presetAnu(),

// @ts-expect-error - We know that is a valid preset
presetThemeDefault(),
...(nuxt.options.unocss.presets || []),
]

// If icon preset is enabled via `unocss.icons` option, add it to the presets.
// Default to `true` if `unocss.icons` is not defined.
if (iconPreset) {
// Icon Preset Anu by default
const presetIcon = presetIcons(typeof iconPreset === 'object'
? iconPreset
: {
scale: 1.2,
extraProperties: presetIconExtraProperties,
},
)

// @ts-expect-error - We know that is a valid preset
nuxt.options.unocss.presets?.push(presetIcon)
}
}

nuxt.hook('prepare:types', ({ tsConfig, references }) => {
tsConfig.compilerOptions!.types.push('anu-vue/volar')
references.push({
path: resolve(nuxt.options.buildDir, 'types/anu-vue.d.ts'),
types: 'anu-vue/volar',
})
})

addPlugin({ src: resolve('./runtime/plugin') })

// Add auto-imported components
anuComponentNames.map(name =>
addComponent({
name,
export: name,
filePath: 'anu-vue',
}),
)

addImportsSources([
{
from: 'anu-vue',
imports: anuComposables,
},
])
},
})

const anuComponentNames = [
'AAlert',
'AAvatar',
'ABadge',
'ABaseInput',
'ABtn',
'ACard',
'ACheckbox',
'AChip',
'ADataTable',
'ADialog',
'ADrawer',
'AInput',
'AList',
'AListItem',
'AMenu',
'ARadio',
'ARating',
'ASelect',
'ASwitch',
'ATable',
'ATextarea',
'ATypography',
]

const anuComposables = [
'useConfigurable',
'useDOMScrollLock',
'useGroupModel',
'useInternalBooleanState',
'useLayer',
'useSearch',
'useSort',
'useSpacing',
'useTeleport',
// 'useProps',
]

declare module '@nuxt/schema' {
interface ConfigSchema {
runtimeConfig: {
public?: {
anu?: ModuleOptions
}
}
}
}
Loading

0 comments on commit 46a05b4

Please sign in to comment.