arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(module)!: use tailwind-merge for app.config & move config to components & type props (#692)

Browse Source 
Co-authored-by: Pooya Parsa <pooya@pi0.io>
This commit is contained in:
Benjamin Canac
2023-09-20 18:07:51 +02:00
committed by GitHub
parent 2c98628f98
commit 34d2f57801
59 changed files with 835 additions and 882 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.github/workflows/ci-dev.yml vendored
View File

@@ -52,12 +52,12 @@ jobs:
- name: Lint
run: pnpm run lint
- name: Build
run: pnpm run build
- name: Typecheck
run: pnpm run typecheck
- name: Build
run: pnpm run build
- name: Release Edge
if: github.event_name == 'push'
run: ./scripts/release-edge.sh

6
.github/workflows/ci.yml vendored
View File

@@ -52,12 +52,12 @@ jobs:
- name: Lint
run: pnpm run lint
- name: Build
run: pnpm run build
- name: Typecheck
run: pnpm run typecheck
- name: Build
run: pnpm run build
- name: Version Check
id: check
uses: EndBug/version-check@v2

3
.nuxtrc Normal file
View File

@@ -0,0 +1,3 @@
imports.autoImport=false
typescript.includeWorkspace=true
typescript.strict=false

1
docs/.nuxtrc Normal file
View File

@@ -0,0 +1 @@
imports.autoImport=true

12
docs/components/Footer.vue
View File

@@ -24,10 +24,14 @@
</template>
<template #right>
<UButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" target="_blank" v-bind="$elements.button.secondary" />
<UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" v-bind="$elements.button.secondary" />
<UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://discord.com/channels/473401852243869706/1153996761426300948" target="_blank" v-bind="$elements.button.secondary" />
<UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" v-bind="$elements.button.secondary" />
<UButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" target="_blank" v-bind="($elements.button.secondary as any)" />
<UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" v-bind="($elements.button.secondary as any)" />
<UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://discord.com/channels/473401852243869706/1153996761426300948" target="_blank" v-bind="($elements.button.secondary as any)" />
<UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" v-bind="($elements.button.secondary as any)" />
</template>
</UFooter>
</template>
<script setup lang="ts">
// force typescript
</script>

2
docs/components/Header.vue
View File

@@ -27,7 +27,7 @@
icon="i-simple-icons-github"
aria-label="GitHub"
class="hidden lg:inline-flex"
v-bind="$elements.button.secondary"
v-bind="($elements.button.secondary as any)"
/>
</template>

6
docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
View File

@@ -27,8 +27,6 @@ const links = [{
to: 'https://github.com/smarroufin',
target: '_blank'
}]
const { ui } = useAppConfig()
</script>
<template>
@@ -36,8 +34,8 @@ const { ui } = useAppConfig()
<template #avatar="{ link }">
<UAvatar
v-if="link.avatar"
v-bind="{ size: ui.verticalNavigation.avatar.size, ...link.avatar }"
:class="[ui.verticalNavigation.avatar.base]"
v-bind="link.avatar"
size="3xs"
loading="lazy"
/>
<UIcon v-else name="i-heroicons-user-circle-20-solid" class="text-lg" />

48
docs/content/1.getting-started/3.theming.md
View File

@@ -1,5 +1,7 @@
---
description: 'Learn how to customize the look and feel of the components.'
navigation:
badge: New
---
## Overview
@@ -79,7 +81,7 @@ This can also happen when you bind a dynamic color to a component: `<UBadge :col
### `app.config.ts`
Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxt/ui/blob/dev/src/runtime/app.config.ts) file. You can override those in your own `app.config.ts`.
Components are styled with Tailwind CSS but classes are all defined in the default [ui.config.ts](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.config.ts) file. You can override those in your own `app.config.ts`.
```ts [app.config.ts]
export default defineAppConfig({
@@ -91,6 +93,25 @@ export default defineAppConfig({
})
```
Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `app.config.ts` is smartly merged with the default config. This means you don't have to rewrite everything.
You can change this behaviour by setting `strategy` to `override` in your `app.config.ts`: :u-badge{label="New" class="!rounded-full" variant="subtle"}
```ts [app.config.ts]
export default defineAppConfig({
ui: {
strategy: 'override',
button: {
color: {
white: {
solid: 'bg-white dark:bg-gray-900'
}
}
}
}
})
```
### `ui` prop
Each component has a `ui` prop that allows you to customize everything specifically.
@@ -113,25 +134,36 @@ For example, the default preset of the `FormGroup` component looks like this:
```json
{
...
"label": {
"base": "block font-medium text-gray-700 dark:text-gray-200",
...
"base": "block font-medium text-gray-700 dark:text-gray-200"
}
...
}
```
To change the font of the `label`, you only need to write:
```vue
<UFormGroup name="email" label="Email" :ui="{ label: { base: 'font-semibold' } }">
...
</UFormGroup>
<UFormGroup name="email" label="Email" :ui="{ label: { base: 'font-semibold' } }" />
```
This will smartly replace the `font-medium` by `font-semibold` and prevent any class duplication and any class priority issue.
You can change this behaviour by setting `strategy` to `override` inside the `ui` prop: :u-badge{label="New" class="!rounded-full" variant="subtle"}
```vue
<UButton
to="https://github.com/nuxt/ui"
:ui="{
strategy: 'override',
color: {
white: {
solid: 'bg-white dark:bg-gray-900'
}
}
}"
/>
```
### `class` attribute
You can also use the `class` attribute to add classes to the component.

6
docs/content/5.navigation/1.vertical-navigation.md
View File

@@ -125,8 +125,6 @@ const links = [{
to: 'https://github.com/benjamincanac',
target: '_blank'
}, ...]
const { ui } = useAppConfig()
</script>
<template>
@@ -134,8 +132,8 @@ const { ui } = useAppConfig()
<template #avatar="{ link }">
<UAvatar
v-if="link.avatar"
v-bind="{ size: ui.verticalNavigation.avatar.size, ...link.avatar }"
:class="[ui.verticalNavigation.avatar.base]"
v-bind="link.avatar"
size="3xs"
/>
<UIcon v-else name="i-heroicons-user-circle-20-solid" class="text-lg" />
</template>

4
docs/nuxt.config.ts
View File

@@ -76,10 +76,6 @@ export default defineNuxtConfig({
exposed: false
}
},
typescript: {
strict: false,
includeWorkspace: true
},
hooks: {
// Related to https://github.com/nuxt/nuxt/pull/22558
'components:extend': (components) => {

2
docs/package.json
View File

@@ -10,7 +10,7 @@
"@nuxt/content": "npm:@nuxt/content-edge@2.8.2-28246255.cae34d7",
"@nuxt/devtools": "^0.8.3",
"@nuxt/eslint-config": "^0.2.0",
"@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28246521.0e46d44",
"@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28253627.e4bd6ad",
"@nuxthq/studio": "^0.14.1",
"@nuxtjs/fontaine": "^0.4.1",
"@nuxtjs/google-fonts": "^3.0.2",

13
package.json
View File

@@ -25,8 +25,8 @@
"build:docs": "nuxi generate docs",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"typecheck": "nuxi typecheck",
"prepare": "nuxi prepare docs",
"typecheck": "vue-tsc --noEmit && nuxi typecheck docs",
"prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare docs",
"release": "release-it"
},
"dependencies": {
@@ -45,9 +45,10 @@
"@vueuse/integrations": "^10.4.1",
"@vueuse/math": "^10.4.1",
"defu": "^6.1.2",
"ohash": "^1.1.3",
"scule": "^1.0.0",
"fuse.js": "^6.6.2",
"ohash": "^1.1.3",
"pathe": "^1.1.1",
"scule": "^1.0.0",
"tailwind-merge": "^1.14.0",
"tailwindcss": "^3.3.3"
},
@@ -61,9 +62,9 @@
"release-it": "^16.1.5",
"typescript": "^5.2.2",
"unbuild": "^2.0.0",
"valibot": "^0.15.0",
"vue-tsc": "^1.8.11",
"yup": "^1.2.0",
"zod": "^3.22.2",
"valibot": "^0.15.0"
"zod": "^3.22.2"
}
}

20
pnpm-lock.yaml generated
View File

@@ -59,6 +59,9 @@ importers:
ohash:
specifier: ^1.1.3
version: 1.1.3
pathe:
specifier: ^1.1.1
version: 1.1.1
scule:
specifier: ^1.0.0
version: 1.0.0
@@ -120,7 +123,7 @@ importers:
version: 1.1.12
'@iconify-json/simple-icons':
specifier: latest
version: 1.1.70
version: 1.1.71
'@nuxt/content':
specifier: npm:@nuxt/content-edge@2.8.2-28246255.cae34d7
version: /@nuxt/content-edge@2.8.2-28246255.cae34d7(rollup@3.28.1)(vue@3.3.4)
@@ -131,8 +134,8 @@ importers:
specifier: ^0.2.0
version: 0.2.0(eslint@8.49.0)
'@nuxthq/elements':
specifier: npm:@nuxthq/elements-edge@0.0.1-28246521.0e46d44
version: /@nuxthq/elements-edge@0.0.1-28246521.0e46d44(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
specifier: npm:@nuxthq/elements-edge@0.0.1-28253627.e4bd6ad
version: /@nuxthq/elements-edge@0.0.1-28253627.e4bd6ad(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
'@nuxthq/studio':
specifier: ^0.14.1
version: 0.14.1(rollup@3.28.1)
@@ -1061,8 +1064,8 @@ packages:
dependencies:
'@iconify/types': 2.0.0
/@iconify-json/simple-icons@1.1.70:
resolution: {integrity: sha512-YZoHn180s0PELhjlMMTMVG8FxQOfP3AIn7P6KNV8xONzt/GwqMkYQ92DNYZbvSyQ4NhRajm27YkaOeSwNusr7A==}
/@iconify-json/simple-icons@1.1.71:
resolution: {integrity: sha512-3WVgJTaWBUOvq4G99v3Qs46zqnOJGNVMMlKCw+p8/gfbVz9mEAiwiqfGr+mpraotuwvUuQoJMi4SyseO8qjYDQ==}
dependencies:
'@iconify/types': 2.0.0
dev: true
@@ -1748,8 +1751,8 @@ packages:
- vue-tsc
dev: true
/@nuxthq/elements-edge@0.0.1-28246521.0e46d44(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2):
resolution: {integrity: sha512-8MU2WXawTcZFpaAOuz0WYDBR8fjblH6UTS9wlXz3qNRya15wOAH62a7VNfdy2xsE8Rlmv1DeuIVFZnIO24Rmbw==}
/@nuxthq/elements-edge@0.0.1-28253627.e4bd6ad(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2):
resolution: {integrity: sha512-y7ujX/dr4CcmY1JilTjpU++IEN5+9NrdeQseC8+OvLE3rHE0/5d9KWusa+0y+o5z3NjM3mzupSYraBWoH8/qvQ==}
dependencies:
'@nuxt/ui': 2.8.1(rollup@3.28.1)(vue@3.3.4)(webpack@5.88.2)
'@vueuse/core': 10.4.1(vue@3.3.4)
@@ -7050,6 +7053,7 @@ packages:
/jiti@1.19.3:
resolution: {integrity: sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==}
hasBin: true
dev: true
/jiti@1.20.0:
resolution: {integrity: sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==}
@@ -11191,7 +11195,7 @@ packages:
fast-glob: 3.3.1
glob-parent: 6.0.2
is-glob: 4.0.3
jiti: 1.19.3
jiti: 1.20.0
lilconfig: 2.1.0
micromatch: 4.0.5
normalize-path: 3.0.0

39
src/module.ts
View File

@@ -1,12 +1,12 @@
import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin, resolvePath } from '@nuxt/kit'
import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin } from '@nuxt/kit'
import defaultColors from 'tailwindcss/colors.js'
import { defaultExtractor as createDefaultExtractor } from 'tailwindcss/lib/lib/defaultExtractor.js'
import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons'
import { name, version } from '../package.json'
import { generateSafelist, excludeColors, customSafelistExtractor } from './colors'
import appConfig from './runtime/app.config'
type DeepPartial<T> = Partial<{ [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string } }>
import createTemplates from './templates'
import * as config from './runtime/ui.config'
import type { DeepPartial, Strategy } from './runtime/types/utils'
const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
@@ -16,13 +16,21 @@ delete defaultColors.trueGray
delete defaultColors.coolGray
delete defaultColors.blueGray
type UI = {
primary?: string
gray?: string
colors?: string[]
strategy?: Strategy
} & DeepPartial<typeof config>
declare module 'nuxt/schema' {
interface AppConfigInput {
ui?: UI
}
}
declare module '@nuxt/schema' {
interface AppConfigInput {
ui?: {
primary?: string
gray?: string
colors?: string[]
} & DeepPartial<typeof appConfig.ui>
ui?: UI
}
}
@@ -64,12 +72,9 @@ export default defineNuxtModule<ModuleOptions>({
nuxt.options.build.transpile.push(runtimeDir)
nuxt.options.build.transpile.push('@popperjs/core', '@headlessui/vue')
nuxt.options.css.push(resolve(runtimeDir, 'ui.css'))
nuxt.options.alias['#ui'] = runtimeDir
const appConfigFile = await resolvePath(resolve(runtimeDir, 'app.config'))
nuxt.hook('app:resolve', (app) => {
app.configs.push(appConfigFile)
})
nuxt.options.css.push(resolve(runtimeDir, 'ui.css'))
nuxt.hook('tailwindcss:config', function (tailwindConfig) {
const globalColors: any = {
@@ -117,10 +122,10 @@ export default defineNuxtModule<ModuleOptions>({
const colors = excludeColors(globalColors)
nuxt.options.appConfig.ui = {
...nuxt.options.appConfig.ui,
primary: 'green',
gray: 'cool',
colors
colors,
strategy: 'merge'
}
tailwindConfig.safelist = tailwindConfig.safelist || []
@@ -130,6 +135,8 @@ export default defineNuxtModule<ModuleOptions>({
tailwindConfig.plugins.push(iconsPlugin({ collections: getIconCollections(options.icons as any[]) }))
})
createTemplates(nuxt)
// Modules
await installModule('@nuxtjs/color-mode', { classSuffix: '' })

46
src/runtime/components/data/Table.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="wrapperClass" v-bind="attrs">
<div :class="ui.wrapper" v-bind="attrs">
<table :class="[ui.base, ui.divide]">
<thead :class="ui.thead">
<tr :class="ui.tr.base">
@@ -71,19 +71,17 @@ import { ref, computed, defineComponent, toRaw } from 'vue'
import type { PropType } from 'vue'
import { upperFirst } from 'scule'
import { defu } from 'defu'
import { twMerge } from 'tailwind-merge'
import { omit, get } from '../../utils/lodash'
import { defuTwMerge } from '../../utils'
import UButton from '../elements/Button.vue'
import UIcon from '../elements/Icon.vue'
import UCheckbox from '../forms/Checkbox.vue'
import type { Button } from '../../types/button'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig, omit, get } from '../../utils'
import type { Strategy, Button } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { table } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof table>(appConfig.ui.strategy, appConfig.ui.table, table)
function defaultComparator<T> (a: T, z: T): boolean {
return a === z
@@ -123,15 +121,15 @@ export default defineComponent({
},
sortButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.table.default.sortButton
default: () => config.default.sortButton as Button
},
sortAscIcon: {
type: String,
default: () => appConfig.ui.table.default.sortAscIcon
default: () => config.default.sortAscIcon
},
sortDescIcon: {
type: String,
default: () => appConfig.ui.table.default.sortDescIcon
default: () => config.default.sortDescIcon
},
loading: {
type: Boolean,
@@ -139,25 +137,20 @@ export default defineComponent({
},
loadingState: {
type: Object as PropType<{ icon: string, label: string }>,
default: () => appConfig.ui.table.default.loadingState
default: () => config.default.loadingState
},
emptyState: {
type: Object as PropType<{ icon: string, label: string }>,
default: () => appConfig.ui.table.default.emptyState
default: () => config.default.emptyState
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.table>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue'],
setup (props, { emit, attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.table>>(() => defuTwMerge({}, props.ui, appConfig.ui.table))
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
setup (props, { emit, attrs: $attrs }) {
const { ui, attrs } = useUI('table', props.ui, config, { mergeWrapper: true })
const columns = computed(() => props.columns ?? Object.keys(omit(props.rows[0] ?? {}, ['click'])).map((key) => ({ key, label: upperFirst(key), sortable: false })))
@@ -238,12 +231,12 @@ export default defineComponent({
}
function onSelect (row) {
if (!attrs.onSelect) {
if (!$attrs.onSelect) {
return
}
// @ts-ignore
attrs.onSelect(row)
$attrs.onSelect(row)
}
function selectAllRows () {
@@ -254,7 +247,7 @@ export default defineComponent({
}
// @ts-ignore
attrs.onSelect ? attrs.onSelect(row) : selected.value.push(row)
$attrs.onSelect ? $attrs.onSelect(row) : selected.value.push(row)
})
}
@@ -271,10 +264,9 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
wrapperClass,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
sort,
// eslint-disable-next-line vue/no-dupe-keys

38
src/runtime/components/elements/Accordion.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="wrapperClass">
<div :class="ui.wrapper">
<HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" :default-open="defaultOpen || item.defaultOpen">
<HDisclosureButton :ref="() => buttonRefs[index] = close" as="template" :disabled="item.disabled">
<slot :item="item" :index="index" :open="open" :close="close">
@@ -43,17 +43,19 @@
import { ref, computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel } from '@headlessui/vue'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import UButton from '../elements/Button.vue'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { mergeConfig, omit } from '../../utils'
import StateEmitter from '../../utils/StateEmitter'
import type { AccordionItem } from '../../types/accordion'
import { useAppConfig } from '#imports'
// TODO: Remove
import type { AccordionItem, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { accordion, button } from '#ui/ui.config'
const config = mergeConfig<typeof accordion>(appConfig.ui.strategy, appConfig.ui.accordion, accordion)
const configButton = mergeConfig<typeof button>(appConfig.ui.strategy, appConfig.ui.button, button)
export default defineComponent({
components: {
@@ -76,30 +78,25 @@ export default defineComponent({
},
openIcon: {
type: String,
default: () => appConfig.ui.accordion.default.openIcon
default: () => config.default.openIcon
},
closeIcon: {
type: String,
default: () => appConfig.ui.accordion.default.closeIcon
default: () => config.default.closeIcon
},
multiple: {
type: Boolean,
default: false
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.accordion>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
setup (props) {
const { ui, attrs } = useUI('accordion', props.ui, config, { mergeWrapper: true })
const ui = computed<Partial<typeof appConfig.ui.accordion>>(() => defuTwMerge({}, props.ui, appConfig.ui.accordion))
const uiButton = computed<Partial<typeof appConfig.ui.button>>(() => appConfig.ui.button)
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const uiButton = computed<Partial<typeof configButton>>(() => configButton)
const buttonRefs = ref<Function[]>([])
@@ -139,11 +136,10 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
uiButton,
wrapperClass,
attrs,
buttonRefs,
closeOthers,
omit,

46
src/runtime/components/elements/Alert.vue
View File

@@ -38,16 +38,15 @@ import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue'
import UButton from '../elements/Button.vue'
import type { Avatar } from '../../types/avatar'
import type { Button } from '../../types/button'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import type { Avatar, Button, NestedKeyOf, Strategy } from '../../types'
import { mergeConfig } from '../../utils'
// @ts-expect-error
import appConfig from '#build/app.config'
import { omit } from '../../utils/lodash'
import { alert } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof alert>(appConfig.ui.strategy, appConfig.ui.alert, alert)
export default defineComponent({
components: {
@@ -67,7 +66,7 @@ export default defineComponent({
},
icon: {
type: String,
default: () => appConfig.ui.alert.default.icon
default: () => config.default.icon
},
avatar: {
type: Object as PropType<Avatar>,
@@ -75,40 +74,37 @@ export default defineComponent({
},
closeButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.alert.default.closeButton
default: () => config.default.closeButton as Button
},
actions: {
type: Array as PropType<(Button & { click?: Function })[]>,
default: () => []
},
color: {
type: String,
default: () => appConfig.ui.alert.default.color,
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.alert.color)].includes(value)
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String,
default: () => appConfig.ui.alert.default.variant,
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
default: () => config.default.variant,
validator (value: string) {
return [
...Object.keys(appConfig.ui.alert.variant),
...Object.values(appConfig.ui.alert.color).flatMap(value => Object.keys(value))
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
].includes(value)
}
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.alert>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['close'],
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.alert>>(() => defuTwMerge({}, props.ui, appConfig.ui.alert))
setup (props) {
const { ui, attrs, attrsClass } = useUI('alert', props.ui, config)
const alertClass = computed(() => {
const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -119,13 +115,13 @@ export default defineComponent({
ui.value.shadow,
ui.value.padding,
variant?.replaceAll('{color}', props.color)
), attrs.class as string)
), attrsClass)
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
alertClass
}
}

46
src/runtime/components/elements/Avatar.vue
View File

@@ -24,13 +24,14 @@ import { defineComponent, ref, computed, watch } from 'vue'
import type { PropType } from 'vue'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { omit } from '../../utils/lodash'
// const appConfig = useAppConfig()
import { avatar } from '#ui/ui.config'
const config = mergeConfig<typeof avatar>(appConfig.ui.strategy, appConfig.ui.avatar, avatar)
export default defineComponent({
components: {
@@ -52,27 +53,27 @@ export default defineComponent({
},
icon: {
type: String,
default: () => appConfig.ui.avatar.default.icon
default: () => config.default.icon
},
size: {
type: String,
default: () => appConfig.ui.avatar.default.size,
type: String as PropType<AvatarSize>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.avatar.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
chipColor: {
type: String,
default: () => appConfig.ui.avatar.default.chipColor,
type: String as PropType<AvatarChipColor>,
default: () => config.default.chipColor,
validator (value: string) {
return ['gray', ...appConfig.ui.colors].includes(value)
}
},
chipPosition: {
type: String,
default: () => appConfig.ui.avatar.default.chipPosition,
type: String as PropType<AvatarChipPosition>,
default: () => config.default.chipPosition,
validator (value: string) {
return Object.keys(appConfig.ui.avatar.chip.position).includes(value)
return Object.keys(config.chip.position).includes(value)
}
},
chipText: {
@@ -84,15 +85,12 @@ export default defineComponent({
default: ''
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.avatar>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.avatar>>(() => defuTwMerge({}, props.ui, appConfig.ui.avatar))
setup (props) {
const { ui, attrs, attrsClass } = useUI('avatar', props.ui, config)
const url = computed(() => {
if (typeof props.src === 'boolean') {
@@ -111,7 +109,7 @@ export default defineComponent({
(error.value || !url.value) && ui.value.background,
ui.value.rounded,
ui.value.size[props.size]
), attrs.class as string)
), attrsClass)
})
const imgClass = computed(() => {
@@ -150,7 +148,9 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys
imgClass,

35
src/runtime/components/elements/AvatarGroup.ts
View File

@@ -1,24 +1,26 @@
import { h, cloneVNode, computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge, getSlotsChildren } from '../../utils'
import Avatar from './Avatar.vue'
import { useAppConfig } from '#imports'
// TODO: Remove
import UAvatar from './Avatar.vue'
import { useUI } from '../../composables/useUI'
import { mergeConfig, getSlotsChildren } from '../../utils'
import type { AvatarSize, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { avatar, avatarGroup } from '#ui/ui.config'
// const appConfig = useAppConfig()
const avatarConfig = mergeConfig<typeof avatar>(appConfig.ui.strategy, appConfig.ui.avatar, avatar)
const avatarGroupConfig = mergeConfig<typeof avatarGroup>(appConfig.ui.strategy, appConfig.ui.avatarGroup, avatarGroup)
export default defineComponent({
inheritAttrs: false,
props: {
size: {
type: String,
type: String as PropType<keyof typeof avatarConfig.size>,
default: null,
validator (value: string) {
return Object.keys(appConfig.ui.avatar.size).includes(value)
return Object.keys(avatarConfig.size).includes(value)
}
},
max: {
@@ -26,15 +28,12 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.avatarGroup>>,
default: () => ({})
type: Object as PropType<Partial<typeof avatarGroupConfig & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs, slots }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.avatarGroup>>(() => defuTwMerge({}, props.ui, appConfig.ui.avatarGroup))
setup (props, { slots }) {
const { ui, attrs } = useUI('avatarGroup', props.ui, avatarGroupConfig, { mergeWrapper: true })
const children = computed(() => getSlotsChildren(slots))
@@ -55,8 +54,8 @@ export default defineComponent({
}
if (max.value !== undefined && index === max.value) {
return h(Avatar, {
size: props.size || appConfig.ui.avatar.default.size,
return h(UAvatar, {
size: props.size || (avatarConfig.default.size as AvatarSize),
text: `+${children.value.length - max.value}`,
class: twJoin(ui.value.ring, ui.value.margin)
})
@@ -65,6 +64,6 @@ export default defineComponent({
return null
}).filter(Boolean).reverse())
return () => h('div', { class: twMerge(ui.value.wrapper, attrs.class as string), ...omit(attrs, ['class']) }, clones.value)
return () => h('div', { class: ui.value.wrapper, ...attrs.value }, clones.value)
}
})

46
src/runtime/components/elements/Badge.vue
View File

@@ -7,40 +7,41 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { NestedKeyOf, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { badge } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof badge>(appConfig.ui.strategy, appConfig.ui.badge, badge)
export default defineComponent({
inheritAttrs: false,
props: {
size: {
type: String,
default: () => appConfig.ui.badge.default.size,
type: String as PropType<keyof typeof config.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.badge.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
color: {
type: String,
default: () => appConfig.ui.badge.default.color,
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.badge.color)].includes(value)
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String,
default: () => appConfig.ui.badge.default.variant,
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
default: () => config.default.variant,
validator (value: string) {
return [
...Object.keys(appConfig.ui.badge.variant),
...Object.values(appConfig.ui.badge.color).flatMap(value => Object.keys(value))
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
].includes(value)
}
},
@@ -49,15 +50,12 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.badge>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.badge>>(() => defuTwMerge({}, props.ui, appConfig.ui.badge))
setup (props) {
const { ui, attrs, attrsClass } = useUI('badge', props.ui, config)
const badgeClass = computed(() => {
const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -68,11 +66,11 @@ export default defineComponent({
ui.value.rounded,
ui.value.size[props.size],
variant?.replaceAll('{color}', props.color)
), attrs.class as string)
), attrsClass)
})
return {
attrs: computed(() => omit(attrs, ['class'])),
attrs,
badgeClass
}
}

47
src/runtime/components/elements/Button.vue
View File

@@ -19,17 +19,17 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import ULink from '../elements/Link.vue'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { button } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof button>(appConfig.ui.strategy, appConfig.ui.button, button)
export default defineComponent({
components: {
@@ -63,26 +63,26 @@ export default defineComponent({
default: true
},
size: {
type: String,
default: () => appConfig.ui.button.default.size,
type: String as PropType<ButtonSize>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.button.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
color: {
type: String,
default: () => appConfig.ui.button.default.color,
type: String as PropType<ButtonColor>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.button.color)].includes(value)
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String,
default: () => appConfig.ui.button.default.variant,
type: String as PropType<ButtonVariant>,
default: () => config.default.variant,
validator (value: string) {
return [
...Object.keys(appConfig.ui.button.variant),
...Object.values(appConfig.ui.button.color).flatMap(value => Object.keys(value))
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
].includes(value)
}
},
@@ -92,7 +92,7 @@ export default defineComponent({
},
loadingIcon: {
type: String,
default: () => appConfig.ui.button.default.loadingIcon
default: () => config.default.loadingIcon
},
leadingIcon: {
type: String,
@@ -119,15 +119,12 @@ export default defineComponent({
default: false
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.button>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs, slots }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.button>>(() => defuTwMerge({}, props.ui, appConfig.ui.button))
setup (props, { slots }) {
const { ui, attrs, attrsClass } = useUI('button', props.ui, config)
const isLeading = computed(() => {
return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon
@@ -151,7 +148,7 @@ export default defineComponent({
props.padded && ui.value[isSquare.value ? 'square' : 'padding'][props.size],
variant?.replaceAll('{color}', props.color),
props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center'
), attrs.class as string)
), attrsClass)
})
const leadingIconName = computed(() => {
@@ -187,7 +184,7 @@ export default defineComponent({
})
return {
attrs: computed(() => omit(attrs, ['class'])),
attrs,
isLeading,
isTrailing,
isSquare,

42
src/runtime/components/elements/ButtonGroup.ts
View File

@@ -1,23 +1,24 @@
import { h, cloneVNode, computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge, getSlotsChildren } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig, getSlotsChildren } from '../../utils'
import type { ButtonSize, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { button, buttonGroup } from '#ui/ui.config'
// const appConfig = useAppConfig()
const buttonConfig = mergeConfig<typeof button>(appConfig.ui.strategy, appConfig.ui.button, button)
const buttonGroupConfig = mergeConfig<typeof buttonGroup>(appConfig.ui.strategy, appConfig.ui.buttonGroup, buttonGroup)
export default defineComponent({
inheritAttrs: false,
props: {
size: {
type: String,
type: String as PropType<ButtonSize>,
default: null,
validator (value: string) {
return Object.keys(appConfig.ui.button.size).includes(value)
return Object.keys(buttonConfig.size).includes(value)
}
},
orientation: {
@@ -28,15 +29,12 @@ export default defineComponent({
}
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.buttonGroup>>,
default: () => ({})
type: Object as PropType<Partial<typeof buttonGroupConfig & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs, slots }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.buttonGroup>>(() => defuTwMerge({}, props.ui, appConfig.ui.buttonGroup))
setup (props, { slots }) {
const { ui, attrs, attrsClass } = useUI('buttonGroup', props.ui, buttonGroupConfig)
const children = computed(() => getSlotsChildren(slots))
@@ -58,12 +56,6 @@ export default defineComponent({
const clones = computed(() => children.value.map((node, index) => {
const vProps: any = {}
if (props.orientation === 'vertical') {
ui.value.wrapper = 'flex flex-col -space-y-px'
} else {
ui.value.wrapper = 'inline-flex -space-x-px'
}
if (props.size) {
vProps.size = props.size
}
@@ -83,6 +75,14 @@ export default defineComponent({
return cloneVNode(node, vProps)
}))
return () => h('div', { class: twMerge(twJoin(ui.value.wrapper, ui.value.rounded, ui.value.shadow), attrs.class as string), ...omit(attrs, ['class']) }, clones.value)
const wrapperClass = computed(() => {
return twMerge(twJoin(
ui.value.wrapper[props.orientation],
ui.value.rounded,
ui.value.shadow
), attrsClass)
})
return () => h('div', { class: wrapperClass.value, ...attrs.value }, clones.value)
}
})

31
src/runtime/components/elements/Dropdown.vue
View File

@@ -1,5 +1,5 @@
<template>
<HMenu v-slot="{ open }" as="div" :class="wrapperClass" v-bind="attrs" @mouseleave="onMouseLeave">
<HMenu v-slot="{ open }" as="div" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
<HMenuButton
ref="trigger"
as="div"
@@ -49,22 +49,19 @@ import { defineComponent, ref, computed, onMounted } from 'vue'
import type { PropType } from 'vue'
import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem } from '@headlessui/vue'
import { defu } from 'defu'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue'
import UKbd from '../elements/Kbd.vue'
import ULink from '../elements/Link.vue'
import { useUI } from '../../composables/useUI'
import { usePopper } from '../../composables/usePopper'
import { defuTwMerge } from '../../utils'
import type { DropdownItem } from '../../types/dropdown'
import type { PopperOptions } from '../../types/popper'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig, omit } from '../../utils'
import type { DropdownItem, PopperOptions, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { dropdown } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof dropdown>(appConfig.ui.strategy, appConfig.ui.dropdown, dropdown)
export default defineComponent({
components: {
@@ -105,15 +102,12 @@ export default defineComponent({
default: 0
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.dropdown>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.dropdown>>(() => defuTwMerge({}, props.ui, appConfig.ui.dropdown))
setup (props) {
const { ui, attrs } = useUI('dropdown', props.ui, config, { mergeWrapper: true })
const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))
@@ -143,8 +137,6 @@ export default defineComponent({
return props.mode === 'hover' ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {}
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
function onMouseOver () {
if (props.mode !== 'hover' || !menuApi.value) {
return
@@ -186,13 +178,12 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
trigger,
container,
containerStyle,
wrapperClass,
onMouseOver,
onMouseLeave,
omit

31
src/runtime/components/elements/Kbd.vue
View File

@@ -7,15 +7,15 @@
<script lang="ts">
import { defineComponent, computed } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { kbd } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof kbd>(appConfig.ui.strategy, appConfig.ui.kbd, kbd)
export default defineComponent({
inheritAttrs: false,
@@ -25,22 +25,19 @@ export default defineComponent({
default: null
},
size: {
type: String,
default: () => appConfig.ui.kbd.default.size,
type: String as PropType<keyof typeof config.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.kbd.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.kbd>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.kbd>>(() => defuTwMerge({}, props.ui, appConfig.ui.kbd))
setup (props) {
const { ui, attrs, attrsClass } = useUI('kbd', props.ui, config)
const kbdClass = computed(() => {
return twMerge(twJoin(
@@ -51,13 +48,13 @@ export default defineComponent({
ui.value.font,
ui.value.background,
ui.value.ring
), attrs.class as string)
), attrsClass)
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
kbdClass
}
}

33
src/runtime/components/forms/Checkbox.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="wrapperClass">
<div :class="ui.wrapper">
<div class="flex items-center h-5">
<input
:id="name"
@@ -32,16 +32,17 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { checkbox } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof checkbox>(appConfig.ui.strategy, appConfig.ui.checkbox, checkbox)
export default defineComponent({
inheritAttrs: false,
@@ -83,8 +84,8 @@ export default defineComponent({
default: false
},
color: {
type: String,
default: () => appConfig.ui.checkbox.default.color,
type: String as PropType<typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return appConfig.ui.colors.includes(value)
}
@@ -94,16 +95,13 @@ export default defineComponent({
default: ''
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.checkbox>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'change'],
setup (props, { emit, attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.checkbox>>(() => defuTwMerge({}, props.ui, appConfig.ui.checkbox))
setup (props, { emit }) {
const { ui, attrs } = useUI('checkbox', props.ui, config, { mergeWrapper: true })
const { emitFormChange, formGroup } = useFormGroup()
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
@@ -122,8 +120,6 @@ export default defineComponent({
emitFormChange()
}
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const inputClass = computed(() => {
return twMerge(twJoin(
ui.value.base,
@@ -136,11 +132,10 @@ export default defineComponent({
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
toggle,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys
inputClass,
onChange

42
src/runtime/components/forms/FormGroup.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="wrapperClass" v-bind="attrs">
<div :class="ui.wrapper" v-bind="attrs">
<div v-if="label" :class="[ui.label.wrapper, size]">
<label :for="labelFor" :class="[ui.label.base, required ? ui.label.required : '']">{{ label }}</label>
<span v-if="hint" :class="[ui.hint]">{{ hint }}</span>
@@ -20,18 +20,16 @@
</template>
<script lang="ts">
import { computed, defineComponent, provide, inject } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import type { FormError, InjectedFormGroupValue } from '../../types/form'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { computed, defineComponent, provide, inject, ref } from 'vue'
import type { Ref, PropType } from 'vue'
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { FormError, InjectedFormGroupValue, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { formGroup } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof formGroup>(appConfig.ui.strategy, appConfig.ui.formGroup, formGroup)
let increment = 0
@@ -43,10 +41,10 @@ export default defineComponent({
default: null
},
size: {
type: String,
type: String as PropType<keyof typeof config.size>,
default: null,
validator (value: string) {
return Object.keys(appConfig.ui.formGroup.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
label: {
@@ -74,17 +72,12 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.formGroup>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.formGroup>>(() => defuTwMerge({}, props.ui, appConfig.ui.formGroup))
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
setup (props) {
const { ui, attrs } = useUI('formGroup', props.ui, config, { mergeWrapper: true })
const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
@@ -94,7 +87,7 @@ export default defineComponent({
: formErrors?.value?.find((error) => error.path === props.name)?.message
})
const size = computed(() => ui.value.size[props.size ?? appConfig.ui.input.default.size])
const size = computed(() => ui.value.size[props.size ?? config.default.size])
const labelFor = ref(`${props.name || 'lf'}-${increment = increment < 1000000 ? increment + 1 : 0}`)
provide<InjectedFormGroupValue>('form-group', {
@@ -105,11 +98,10 @@ export default defineComponent({
})
return {
labelFor,
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
wrapperClass,
attrs,
labelFor,
// eslint-disable-next-line vue/no-dupe-keys
size,
// eslint-disable-next-line vue/no-dupe-keys

58
src/runtime/components/forms/Input.vue
View File

@@ -1,7 +1,7 @@
<template>
<div :class="wrapperClass">
<div :class="ui.wrapper">
<input
:id="labelFor"
:id="id"
ref="input"
:name="name"
:value="modelValue"
@@ -34,17 +34,18 @@
<script lang="ts">
import { ref, computed, onMounted, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { NestedKeyOf, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { input } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof input>(appConfig.ui.strategy, appConfig.ui.input, input)
export default defineComponent({
components: {
@@ -90,7 +91,7 @@ export default defineComponent({
},
loadingIcon: {
type: String,
default: () => appConfig.ui.input.default.loadingIcon
default: () => config.default.loadingIcon
},
leadingIcon: {
type: String,
@@ -117,26 +118,26 @@ export default defineComponent({
default: true
},
size: {
type: String,
default: () => appConfig.ui.input.default.size,
type: String as PropType<keyof typeof config.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.input.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
color: {
type: String,
default: () => appConfig.ui.input.default.color,
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.input.color)].includes(value)
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String,
default: () => appConfig.ui.input.default.variant,
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
default: () => config.default.variant,
validator (value: string) {
return [
...Object.keys(appConfig.ui.input.variant),
...Object.values(appConfig.ui.input.color).flatMap(value => Object.keys(value))
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
].includes(value)
}
},
@@ -145,21 +146,18 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.input>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'blur'],
setup (props, { emit, attrs, slots }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.input>>(() => defuTwMerge({}, props.ui, appConfig.ui.input))
setup (props, { emit, slots }) {
const { ui, attrs } = useUI('input', props.ui, config, { mergeWrapper: true })
const { emitFormBlur, emitFormInput, formGroup } = useFormGroup(props)
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
const size = computed(() => formGroup?.size?.value ?? props.size)
const labelFor = formGroup?.labelFor
const id = formGroup?.labelFor
const input = ref<HTMLInputElement | null>(null)
@@ -185,8 +183,6 @@ export default defineComponent({
}, 100)
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const inputClass = computed(() => {
const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -261,14 +257,14 @@ export default defineComponent({
})
return {
labelFor,
attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
id,
input,
isLeading,
isTrailing,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys
inputClass,
leadingIconName,

33
src/runtime/components/forms/Radio.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="wrapperClass">
<div :class="ui.wrapper">
<div class="flex items-center h-5">
<input
:id="`${name}-${value}`"
@@ -29,16 +29,17 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { radio } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
export default defineComponent({
inheritAttrs: false,
@@ -72,8 +73,8 @@ export default defineComponent({
default: false
},
color: {
type: String,
default: () => appConfig.ui.radio.default.color,
type: String as PropType<typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return appConfig.ui.colors.includes(value)
}
@@ -83,16 +84,13 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.radio>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue'],
setup (props, { emit, attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.radio>>(() => defuTwMerge({}, props.ui, appConfig.ui.radio))
setup (props, { emit }) {
const { ui, attrs } = useUI('radio', props.ui, config, { mergeWrapper: true })
const { emitFormChange, formGroup } = useFormGroup()
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
@@ -109,8 +107,6 @@ export default defineComponent({
}
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const inputClass = computed(() => {
return twMerge(twJoin(
ui.value.base,
@@ -122,11 +118,10 @@ export default defineComponent({
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
pick,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys
inputClass
}

43
src/runtime/components/forms/Range.vue
View File

@@ -1,7 +1,7 @@
<template>
<div :class="wrapperClass">
<input
:id="labelFor"
:id="id"
ref="input"
v-model.number="value"
:name="name"
@@ -22,14 +22,17 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { range } from '#ui/ui.config'
import colors from '#ui-colors'
const config = mergeConfig<typeof range>(appConfig.ui.strategy, appConfig.ui.range, range)
export default defineComponent({
inheritAttrs: false,
@@ -63,15 +66,15 @@ export default defineComponent({
default: 1
},
size: {
type: String,
default: () => appConfig.ui.range.default.size,
type: String as PropType<keyof typeof config.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.range.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
color: {
type: String,
default: () => appConfig.ui.range.default.color,
type: String as PropType<typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return appConfig.ui.colors.includes(value)
}
@@ -81,21 +84,18 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.range>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'change'],
setup (props, { emit, attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.range>>(() => defuTwMerge({}, props.ui, appConfig.ui.range))
setup (props, { emit }) {
const { ui, attrs, attrsClass } = useUI('range', props.ui, config)
const { emitFormChange, formGroup } = useFormGroup(props)
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
const size = computed(() => formGroup?.size?.value ?? props.size)
const labelFor = formGroup?.labelFor
const id = formGroup?.labelFor
const value = computed({
get () {
@@ -115,7 +115,7 @@ export default defineComponent({
return twMerge(twJoin(
ui.value.wrapper,
ui.value.size[size.value]
), attrs.class as string)
), attrsClass)
})
const inputClass = computed(() => {
@@ -167,10 +167,11 @@ export default defineComponent({
})
return {
labelFor,
attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
id,
value,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys

61
src/runtime/components/forms/Select.vue
View File

@@ -1,7 +1,7 @@
<template>
<div :class="wrapperClass">
<div :class="ui.wrapper">
<select
:id="labelFor"
:id="id"
:name="name"
:value="modelValue"
:required="required"
@@ -56,17 +56,18 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType, ComputedRef } from 'vue'
import { get, omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig, get } from '../../utils'
import type { NestedKeyOf, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { select } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof select>(appConfig.ui.strategy, appConfig.ui.select, select)
export default defineComponent({
components: {
@@ -104,7 +105,7 @@ export default defineComponent({
},
loadingIcon: {
type: String,
default: () => appConfig.ui.input.default.loadingIcon
default: () => config.default.loadingIcon
},
leadingIcon: {
type: String,
@@ -112,7 +113,7 @@ export default defineComponent({
},
trailingIcon: {
type: String,
default: () => appConfig.ui.select.default.trailingIcon
default: () => config.default.trailingIcon
},
trailing: {
type: Boolean,
@@ -135,26 +136,26 @@ export default defineComponent({
default: () => []
},
size: {
type: String,
default: () => appConfig.ui.select.default.size,
type: String as PropType<keyof typeof config.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.select.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
color: {
type: String,
default: () => appConfig.ui.select.default.color,
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.select.color)].includes(value)
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String,
default: () => appConfig.ui.select.default.variant,
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
default: () => config.default.variant,
validator (value: string) {
return [
...Object.keys(appConfig.ui.select.variant),
...Object.values(appConfig.ui.select.color).flatMap(value => Object.keys(value))
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
].includes(value)
}
},
@@ -171,22 +172,18 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.select>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'change'],
setup (props, { emit, attrs, slots }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.select>>(() => defuTwMerge({}, props.ui, appConfig.ui.select))
setup (props, { emit, slots }) {
const { ui, attrs } = useUI('select', props.ui, config, { mergeWrapper: true })
const { emitFormChange, formGroup } = useFormGroup(props)
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
const size = computed(() => formGroup?.size?.value ?? props.size)
const labelFor = formGroup?.labelFor
const id = formGroup?.labelFor
const onInput = (event: InputEvent) => {
emit('update:modelValue', (event.target as HTMLInputElement).value)
@@ -249,8 +246,6 @@ export default defineComponent({
return foundOption[props.valueAttribute]
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const selectClass = computed(() => {
const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -324,15 +319,15 @@ export default defineComponent({
})
return {
attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
labelFor,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
id,
normalizedOptionsWithPlaceholder,
normalizedValue,
isLeading,
isTrailing,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys
selectClass,
leadingIconName,

72
src/runtime/components/forms/SelectMenu.vue
View File

@@ -8,7 +8,7 @@
:multiple="multiple"
:disabled="disabled || loading"
as="div"
:class="wrapperClass"
:class="ui.wrapper"
@update:model-value="onUpdate"
>
<input
@@ -28,7 +28,7 @@
class="inline-flex w-full"
>
<slot :open="open" :disabled="disabled" :loading="loading">
<button :id="labelFor" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
<button :id="id" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
<span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
@@ -131,20 +131,22 @@ import {
} from '@headlessui/vue'
import { computedAsync, useDebounceFn } from '@vueuse/core'
import { defu } from 'defu'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { usePopper } from '../../composables/usePopper'
import { useFormGroup } from '../../composables/useFormGroup'
import type { PopperOptions } from '../../types/popper'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { PopperOptions, NestedKeyOf, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { select, selectMenu } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof select>(appConfig.ui.strategy, appConfig.ui.select, select)
const configMenu = mergeConfig<typeof selectMenu>(appConfig.ui.strategy, appConfig.ui.selectMenu, selectMenu)
export default defineComponent({
components: {
@@ -192,7 +194,7 @@ export default defineComponent({
},
loadingIcon: {
type: String,
default: () => appConfig.ui.input.default.loadingIcon
default: () => config.default.loadingIcon
},
leadingIcon: {
type: String,
@@ -200,7 +202,7 @@ export default defineComponent({
},
trailingIcon: {
type: String,
default: () => appConfig.ui.select.default.trailingIcon
default: () => config.default.trailingIcon
},
trailing: {
type: Boolean,
@@ -216,7 +218,7 @@ export default defineComponent({
},
selectedIcon: {
type: String,
default: () => appConfig.ui.selectMenu.default.selectedIcon
default: () => configMenu.default.selectedIcon
},
disabled: {
type: Boolean,
@@ -251,26 +253,26 @@ export default defineComponent({
default: true
},
size: {
type: String,
default: () => appConfig.ui.select.default.size,
type: String as PropType<keyof typeof config.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.select.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
color: {
type: String,
default: () => appConfig.ui.select.default.color,
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.select.color)].includes(value)
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String,
default: () => appConfig.ui.select.default.variant,
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
default: () => config.default.variant,
validator (value: string) {
return [
...Object.keys(appConfig.ui.select.variant),
...Object.values(appConfig.ui.select.color).flatMap(value => Object.keys(value))
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
].includes(value)
}
},
@@ -295,21 +297,19 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.select>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
},
uiMenu: {
type: Object as PropType<Partial<typeof appConfig.ui.selectMenu>>,
default: () => ({})
type: Object as PropType<Partial<typeof configMenu & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'open', 'close', 'change'],
setup (props, { emit, attrs, slots }) {
// TODO: Remove
const appConfig = useAppConfig()
setup (props, { emit, slots }) {
const { ui, attrs } = useUI('select', props.ui, config, { mergeWrapper: true })
const ui = computed<Partial<typeof appConfig.ui.select>>(() => defuTwMerge({}, props.ui, appConfig.ui.select))
const uiMenu = computed<Partial<typeof appConfig.ui.selectMenu>>(() => defuTwMerge({}, props.uiMenu, appConfig.ui.selectMenu))
const { ui: uiMenu } = useUI('selectMenu', props.uiMenu, configMenu)
const popper = computed<PopperOptions>(() => defu({}, props.popper, uiMenu.value.popper as PopperOptions))
@@ -317,13 +317,11 @@ export default defineComponent({
const { emitFormBlur, emitFormChange, formGroup } = useFormGroup(props)
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
const size = computed(() => formGroup?.size?.value ?? props.size)
const labelFor = formGroup?.labelFor
const id = formGroup?.labelFor
const query = ref('')
const searchInput = ref<ComponentPublicInstance<HTMLElement>>()
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const selectClass = computed(() => {
const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -442,15 +440,17 @@ export default defineComponent({
}
return {
labelFor,
attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
// eslint-disable-next-line vue/no-dupe-keys
uiMenu,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
id,
trigger,
container,
isLeading,
isTrailing,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys
selectClass,
leadingIconName,

62
src/runtime/components/forms/Textarea.vue
View File

@@ -1,7 +1,7 @@
<template>
<div :class="wrapperClass">
<div :class="ui.wrapper">
<textarea
:id="labelFor"
:id="id"
ref="textarea"
:value="modelValue"
:name="name"
@@ -21,16 +21,17 @@
<script lang="ts">
import { ref, computed, watch, onMounted, nextTick, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { NestedKeyOf, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { textarea } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof textarea>(appConfig.ui.strategy, appConfig.ui.textarea, textarea)
export default defineComponent({
inheritAttrs: false,
@@ -80,26 +81,26 @@ export default defineComponent({
default: true
},
size: {
type: String,
default: () => appConfig.ui.textarea.default.size,
type: String as PropType<keyof typeof config.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.textarea.size).includes(value)
return Object.keys(config.size).includes(value)
}
},
color: {
type: String,
default: () => appConfig.ui.textarea.default.color,
type: String as PropType<keyof typeof config.color | typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.textarea.color)].includes(value)
return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value)
}
},
variant: {
type: String,
default: () => appConfig.ui.textarea.default.variant,
type: String as PropType<keyof typeof config.variant | NestedKeyOf<typeof config.color>>,
default: () => config.default.variant,
validator (value: string) {
return [
...Object.keys(appConfig.ui.textarea.variant),
...Object.values(appConfig.ui.textarea.color).flatMap(value => Object.keys(value))
...Object.keys(config.variant),
...Object.values(config.color).flatMap(value => Object.keys(value))
].includes(value)
}
},
@@ -108,23 +109,20 @@ export default defineComponent({
default: null
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.textarea>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'blur'],
setup (props, { emit, attrs }) {
const textarea = ref<HTMLTextAreaElement | null>(null)
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.textarea>>(() => defuTwMerge({}, props.ui, appConfig.ui.textarea))
setup (props, { emit }) {
const { ui, attrs } = useUI('textarea', props.ui, config, { mergeWrapper: true })
const { emitFormBlur, emitFormInput, formGroup } = useFormGroup(props)
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
const size = computed(() => formGroup?.size?.value ?? props.size)
const labelFor = formGroup?.labelFor
const id = formGroup?.labelFor
const textarea = ref<HTMLTextAreaElement | null>(null)
const autoFocus = () => {
if (props.autofocus) {
@@ -183,8 +181,6 @@ export default defineComponent({
}, 100)
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const textareaClass = computed(() => {
const variant = ui.value.color?.[color.value as string]?.[props.variant as string] || ui.value.variant[props.variant]
@@ -200,10 +196,12 @@ export default defineComponent({
})
return {
labelFor,
attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
id,
textarea,
wrapperClass,
// eslint-disable-next-line vue/no-dupe-keys
textareaClass,
onInput,

41
src/runtime/components/forms/Toggle.vue
View File

@@ -1,6 +1,6 @@
<template>
<HSwitch
:id="labelFor"
:id="id"
v-model="active"
:name="name"
:disabled="disabled"
@@ -22,17 +22,18 @@
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { Switch as HSwitch } from '@headlessui/vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import { defuTwMerge } from '../../utils'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { toggle } from '#ui/ui.config'
import colors from '#ui-colors'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof toggle>(appConfig.ui.strategy, appConfig.ui.toggle, toggle)
export default defineComponent({
components: {
@@ -59,34 +60,31 @@ export default defineComponent({
},
onIcon: {
type: String,
default: () => appConfig.ui.toggle.default.onIcon
default: () => config.default.onIcon
},
offIcon: {
type: String,
default: () => appConfig.ui.toggle.default.offIcon
default: () => config.default.offIcon
},
color: {
type: String,
default: () => appConfig.ui.toggle.default.color,
type: String as PropType<typeof colors[number]>,
default: () => config.default.color,
validator (value: string) {
return appConfig.ui.colors.includes(value)
}
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.toggle>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue'],
setup (props, { emit, attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.toggle>>(() => defuTwMerge({}, props.ui, appConfig.ui.toggle))
setup (props, { emit }) {
const { ui, attrs, attrsClass } = useUI('toggle', props.ui, config)
const { emitFormChange, formGroup } = useFormGroup(props)
const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
const labelFor = formGroup?.labelFor
const id = formGroup?.labelFor
const active = computed({
get () {
@@ -104,7 +102,7 @@ export default defineComponent({
ui.value.rounded,
ui.value.ring.replaceAll('{color}', color.value),
(active.value ? ui.value.active : ui.value.inactive).replaceAll('{color}', color.value)
), attrs.class as string)
), attrsClass)
})
const onIconClass = computed(() => {
@@ -120,10 +118,11 @@ export default defineComponent({
})
return {
labelFor,
attrs: computed(() => omit(attrs, ['class', labelFor ? 'id' : null ])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
id,
active,
switchClass,
onIconClass,

25
src/runtime/components/layout/Card.vue
View File

@@ -19,15 +19,15 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { card } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof card>(appConfig.ui.strategy, appConfig.ui.card, card)
export default defineComponent({
inheritAttrs: false,
@@ -37,15 +37,12 @@ export default defineComponent({
default: 'div'
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.card>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.card>>(() => defuTwMerge({}, props.ui, appConfig.ui.card))
setup (props) {
const { ui, attrs, attrsClass } = useUI('card', props.ui, config)
const cardClass = computed(() => {
return twMerge(twJoin(
@@ -55,13 +52,13 @@ export default defineComponent({
ui.value.ring,
ui.value.shadow,
ui.value.background
), attrs.class as string)
), attrsClass)
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
cardClass
}
}

25
src/runtime/components/layout/Container.vue
View File

@@ -7,15 +7,15 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { container } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof container>(appConfig.ui.strategy, appConfig.ui.container, container)
export default defineComponent({
inheritAttrs: false,
@@ -25,28 +25,25 @@ export default defineComponent({
default: 'div'
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.container>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.container>>(() => defuTwMerge({}, props.ui, appConfig.ui.container))
setup (props) {
const { ui, attrs, attrsClass } = useUI('container', props.ui, config)
const containerClass = computed(() => {
return twMerge(twJoin(
ui.value.base,
ui.value.padding,
ui.value.constrained
), attrs.class as string)
), attrsClass)
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
containerClass
}
}

25
src/runtime/components/layout/Skeleton.vue
View File

@@ -5,42 +5,39 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { skeleton } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof skeleton>(appConfig.ui.strategy, appConfig.ui.skeleton, skeleton)
export default defineComponent({
inheritAttrs: false,
props: {
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.skeleton>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.skeleton>>(() => defuTwMerge({}, props.ui, appConfig.ui.skeleton))
setup (props) {
const { ui, attrs, attrsClass } = useUI('skeleton', props.ui, config)
const skeletonClass = computed(() => {
return twMerge(twJoin(
ui.value.base,
ui.value.background,
ui.value.rounded
), attrs.class as string)
), attrsClass)
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
skeletonClass
}
}

44
src/runtime/components/navigation/CommandPalette.vue
View File

@@ -4,7 +4,7 @@
:model-value="modelValue"
:multiple="multiple"
:nullable="nullable"
:class="wrapperClass"
:class="ui.wrapper"
v-bind="attrs"
as="div"
@update:model-value="onSelect"
@@ -67,22 +67,20 @@ import { Combobox as HCombobox, ComboboxInput as HComboboxInput, ComboboxOptions
import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue'
import { useDebounceFn } from '@vueuse/core'
import { useFuse } from '@vueuse/integrations/useFuse'
import { twMerge, twJoin } from 'tailwind-merge'
import { omit } from '../../utils/lodash'
import { defu } from 'defu'
import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
import type { Group, Command } from '../../types/command-palette'
import { twJoin } from 'tailwind-merge'
import { defu } from 'defu'
import UIcon from '../elements/Icon.vue'
import UButton from '../elements/Button.vue'
import type { Button } from '../../types/button'
import CommandPaletteGroup from './CommandPaletteGroup.vue'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Group, Command, Button, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { commandPalette } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof commandPalette>(appConfig.ui.strategy, appConfig.ui.commandPalette, commandPalette)
export default defineComponent({
components: {
@@ -125,23 +123,23 @@ export default defineComponent({
},
icon: {
type: String,
default: () => appConfig.ui.commandPalette.default.icon
default: () => config.default.icon
},
loadingIcon: {
type: String,
default: () => appConfig.ui.commandPalette.default.loadingIcon
default: () => config.default.loadingIcon
},
selectedIcon: {
type: String,
default: () => appConfig.ui.commandPalette.default.selectedIcon
default: () => config.default.selectedIcon
},
closeButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.commandPalette.default.closeButton
default: () => config.default.closeButton as Button
},
emptyState: {
type: Object as PropType<{ icon: string, label: string, queryLabel: string }>,
default: () => appConfig.ui.commandPalette.default.emptyState
default: () => config.default.emptyState
},
placeholder: {
type: String,
@@ -172,16 +170,13 @@ export default defineComponent({
default: () => ({})
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.commandPalette>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'close'],
setup (props, { emit, attrs, expose }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.commandPalette>>(() => defuTwMerge({}, props.ui, appConfig.ui.commandPalette))
setup (props, { emit, expose }) {
const { ui, attrs } = useUI('commandPalette', props.ui, config, { mergeWrapper: true })
const query = ref('')
const comboboxInput = ref<ComponentPublicInstance<HTMLInputElement>>()
@@ -284,8 +279,6 @@ export default defineComponent({
}, 0)
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const iconName = computed(() => {
if ((props.loading || isLoading.value) && props.loadingIcon) {
return props.loadingIcon
@@ -343,14 +336,13 @@ export default defineComponent({
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
// eslint-disable-next-line vue/no-dupe-keys
groups,
comboboxInput,
query,
wrapperClass,
iconName,
iconClass,
// eslint-disable-next-line vue/no-dupe-keys

12
src/runtime/components/navigation/CommandPaletteGroup.vue
View File

@@ -76,12 +76,8 @@ import { ComboboxOption as HComboboxOption } from '@headlessui/vue'
import UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue'
import UKbd from '../elements/Kbd.vue'
import type { Group } from '../../types/command-palette'
// TODO: Remove
// @ts-expect-error
import appConfig from '#build/app.config'
// const appConfig = useAppConfig()
import type { Group } from '../../types'
import { commandPalette } from '#ui/ui.config'
export default defineComponent({
components: {
@@ -112,8 +108,8 @@ export default defineComponent({
required: true
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.commandPalette>>,
default: () => ({})
type: Object as PropType<typeof commandPalette>,
required: true
}
},
setup (props) {

46
src/runtime/components/navigation/Pagination.vue
View File

@@ -1,5 +1,5 @@
<template>
<div :class="wrapperClass" v-bind="attrs">
<div :class="ui.wrapper" v-bind="attrs">
<slot name="prev" :on-click="onClickPrev">
<UButton
v-if="prevButton"
@@ -42,17 +42,17 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import UButton from '../elements/Button.vue'
import { defuTwMerge } from '../../utils'
import type { Button } from '../../types/button'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Button, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { pagination, button } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof pagination>(appConfig.ui.strategy, appConfig.ui.pagination, pagination)
const buttonConfig = mergeConfig<typeof button>(appConfig.ui.strategy, appConfig.ui.button, button)
export default defineComponent({
components: {
@@ -80,43 +80,40 @@ export default defineComponent({
}
},
size: {
type: String,
default: () => appConfig.ui.pagination.default.size,
type: String as PropType<keyof typeof buttonConfig.size>,
default: () => config.default.size,
validator (value: string) {
return Object.keys(appConfig.ui.button.size).includes(value)
return Object.keys(buttonConfig.size).includes(value)
}
},
activeButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.pagination.default.activeButton
default: () => config.default.activeButton as Button
},
inactiveButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.pagination.default.inactiveButton
default: () => config.default.inactiveButton as Button
},
prevButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.pagination.default.prevButton
default: () => config.default.prevButton as Button
},
nextButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.pagination.default.nextButton
default: () => config.default.nextButton as Button
},
divider: {
type: String,
default: '…'
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.pagination>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue'],
setup (props, { attrs, emit }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.pagination>>(() => defuTwMerge({}, props.ui, appConfig.ui.pagination))
setup (props, { emit }) {
const { ui, attrs } = useUI('pagination', props.ui, config, { mergeWrapper: true })
const currentPage = computed({
get () {
@@ -182,8 +179,6 @@ export default defineComponent({
const canGoPrev = computed(() => currentPage.value > 1)
const canGoNext = computed(() => currentPage.value < pages.value.length)
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
function onClickPage (page: number | string) {
if (typeof page === 'string') {
return
@@ -209,15 +204,14 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
currentPage,
pages,
displayedPages,
canGoPrev,
canGoNext,
wrapperClass,
onClickPrev,
onClickNext,
onClickPage

32
src/runtime/components/navigation/Tabs.vue
View File

@@ -3,7 +3,7 @@
:vertical="orientation === 'vertical'"
:selected-index="selectedIndex"
as="div"
:class="wrapperClass"
:class="ui.wrapper"
v-bind="attrs"
@change="onChange"
>
@@ -48,20 +48,18 @@
</template>
<script lang="ts">
import { ref, computed, watch, onMounted, defineComponent } from 'vue'
import { ref, watch, onMounted, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel } from '@headlessui/vue'
import { useResizeObserver } from '@vueuse/core'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import type { TabItem } from '../../types/tabs'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { TabItem, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { tabs } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof tabs>(appConfig.ui.strategy, appConfig.ui.tabs, tabs)
export default defineComponent({
components: {
@@ -91,16 +89,13 @@ export default defineComponent({
default: () => []
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.tabs>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'change'],
setup (props, { attrs, emit }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.tabs>>(() => defuTwMerge({}, props.ui, appConfig.ui.tabs))
setup (props, { emit }) {
const { ui, attrs } = useUI('tabs', props.ui, config, { mergeWrapper: true })
const listRef = ref<HTMLElement>()
const itemRefs = ref<HTMLElement[]>([])
@@ -108,8 +103,6 @@ export default defineComponent({
const selectedIndex = ref(props.modelValue || props.defaultIndex)
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
// Methods
function calcMarkerSize (index: number) {
@@ -149,14 +142,13 @@ export default defineComponent({
onMounted(() => calcMarkerSize(selectedIndex.value))
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
listRef,
itemRefs,
markerRef,
selectedIndex,
wrapperClass,
onChange
}
}

32
src/runtime/components/navigation/VerticalNavigation.vue
View File

@@ -1,5 +1,5 @@
<template>
<nav :class="wrapperClass" v-bind="attrs">
<nav :class="ui.wrapper" v-bind="attrs">
<ULink
v-for="(link, index) of links"
v-slot="{ isActive }"
@@ -38,21 +38,19 @@
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue'
import ULink from '../elements/Link.vue'
import { defuTwMerge } from '../../utils'
import type { VerticalNavigationLink } from '../../types/vertical-navigation'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig, omit } from '../../utils'
import type { VerticalNavigationLink, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { verticalNavigation } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof verticalNavigation>(appConfig.ui.strategy, appConfig.ui.verticalNavigation, verticalNavigation)
export default defineComponent({
components: {
@@ -67,23 +65,17 @@ export default defineComponent({
default: () => []
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.verticalNavigation>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.verticalNavigation>>(() => defuTwMerge({}, props.ui, appConfig.ui.verticalNavigation))
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
setup (props) {
const { ui, attrs } = useUI('verticalNavigation', props.ui, config, { mergeWrapper: true })
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
wrapperClass,
attrs,
omit
}
}

26
src/runtime/components/overlays/ContextMenu.vue
View File

@@ -14,17 +14,16 @@ import type { PropType, Ref } from 'vue'
import { defu } from 'defu'
import { onClickOutside } from '@vueuse/core'
import type { VirtualElement } from '@popperjs/core'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import { useUI } from '../../composables/useUI'
import { usePopper } from '../../composables/usePopper'
import { defuTwMerge } from '../../utils'
import type { PopperOptions } from '../../types/popper'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { PopperOptions, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { contextMenu } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof contextMenu>(appConfig.ui.strategy, appConfig.ui.contextMenu, contextMenu)
export default defineComponent({
inheritAttrs: false,
@@ -42,16 +41,13 @@ export default defineComponent({
default: () => ({})
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.contextMenu>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'close'],
setup (props, { attrs, emit }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.contextMenu>>(() => defuTwMerge({}, props.ui, appConfig.ui.contextMenu))
setup (props, { emit }) {
const { ui, attrs, attrsClass } = useUI('contextMenu', props.ui, config)
const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
@@ -72,7 +68,7 @@ export default defineComponent({
return twMerge(twJoin(
ui.value.container,
ui.value.width
), attrs.class as string)
), attrsClass)
})
onClickOutside(container, () => {
@@ -80,9 +76,9 @@ export default defineComponent({
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
isOpen,
wrapperClass,
container

29
src/runtime/components/overlays/Modal.vue
View File

@@ -1,6 +1,6 @@
<template>
<TransitionRoot :appear="appear" :show="isOpen" as="template">
<HDialog :class="wrapperClass" v-bind="attrs" @close="(e) => !preventClose && close(e)">
<HDialog :class="ui.wrapper" v-bind="attrs" @close="(e) => !preventClose && close(e)">
<TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
<div :class="[ui.overlay.base, ui.overlay.background]" />
</TransitionChild>
@@ -32,16 +32,15 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { modal } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof modal>(appConfig.ui.strategy, appConfig.ui.modal, modal)
export default defineComponent({
components: {
@@ -77,16 +76,13 @@ export default defineComponent({
default: false
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.modal>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'close'],
setup (props, { attrs, emit }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.modal>>(() => defuTwMerge({}, props.ui, appConfig.ui.modal))
setup (props, { emit }) {
const { ui, attrs } = useUI('modal', props.ui, config, { mergeWrapper: true })
const isOpen = computed({
get () {
@@ -97,8 +93,6 @@ export default defineComponent({
}
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const transitionClass = computed(() => {
if (!props.transition) {
return {}
@@ -116,11 +110,10 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
isOpen,
wrapperClass,
transitionClass,
close
}

36
src/runtime/components/overlays/Notification.vue
View File

@@ -41,22 +41,19 @@
<script lang="ts">
import { ref, computed, onMounted, onUnmounted, watchEffect, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import UIcon from '../elements/Icon.vue'
import UAvatar from '../elements/Avatar.vue'
import UButton from '../elements/Button.vue'
import { useUI } from '../../composables/useUI'
import { useTimer } from '../../composables/useTimer'
import type { NotificationAction } from '../../types/notification'
import type { Avatar } from '../../types/avatar'
import type { Button } from '../../types/button'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { Avatar, Button, NotificationColor, NotificationAction, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { notification } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof notification>(appConfig.ui.strategy, appConfig.ui.notification, notification)
export default defineComponent({
components: {
@@ -80,7 +77,7 @@ export default defineComponent({
},
icon: {
type: String,
default: () => appConfig.ui.notification.default.icon
default: () => config.default.icon
},
avatar: {
type: Object as PropType<Avatar>,
@@ -88,7 +85,7 @@ export default defineComponent({
},
closeButton: {
type: Object as PropType<Button>,
default: () => appConfig.ui.notification.default.closeButton
default: () => config.default.closeButton as Button
},
timeout: {
type: Number,
@@ -103,23 +100,20 @@ export default defineComponent({
default: null
},
color: {
type: String,
default: () => appConfig.ui.notification.default.color,
type: String as PropType<NotificationColor>,
default: () => config.default.color,
validator (value: string) {
return ['gray', ...appConfig.ui.colors].includes(value)
}
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.notification>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['close'],
setup (props, { attrs, emit }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.notification>>(() => defuTwMerge({}, props.ui, appConfig.ui.notification))
setup (props, { emit }) {
const { ui, attrs, attrsClass } = useUI('notification', props.ui, config)
let timer: any = null
const remaining = ref(props.timeout)
@@ -130,7 +124,7 @@ export default defineComponent({
ui.value.background,
ui.value.rounded,
ui.value.shadow
), attrs.class as string)
), attrsClass)
})
const progressClass = computed(() => {
@@ -210,9 +204,9 @@ export default defineComponent({
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
wrapperClass,
progressClass,
progressStyle,

27
src/runtime/components/overlays/Notifications.vue
View File

@@ -20,18 +20,18 @@
<script lang="ts">
import { computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { omit } from '../../utils/lodash'
import { twMerge, twJoin } from 'tailwind-merge'
import UNotification from './Notification.vue'
import { useUI } from '../../composables/useUI'
import { useToast } from '../../composables/useToast'
import { defuTwMerge } from '../../utils'
import type { Notification } from '../../types/notification'
import { useState, useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { Notification, Strategy } from '../../types'
import { useState } from '#imports'
// @ts-expect-error
import appConfig from '#build/app.config'
import { notifications } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof notifications>(appConfig.ui.strategy, appConfig.ui.notifications, notifications)
export default defineComponent({
components: {
@@ -40,15 +40,12 @@ export default defineComponent({
inheritAttrs: false,
props: {
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.notifications>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.notifications>>(() => defuTwMerge({}, props.ui, appConfig.ui.notifications))
setup (props) {
const { ui, attrs, attrsClass } = useUI('notifications', props.ui, config)
const toast = useToast()
const notifications = useState<Notification[]>('notifications', () => [])
@@ -58,13 +55,13 @@ export default defineComponent({
ui.value.wrapper,
ui.value.position,
ui.value.width
), attrs.class as string)
), attrsClass)
})
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
toast,
notifications,
wrapperClass

30
src/runtime/components/overlays/Popover.vue
View File

@@ -1,5 +1,5 @@
<template>
<HPopover ref="popover" v-slot="{ open, close }" :class="wrapperClass" v-bind="attrs" @mouseleave="onMouseLeave">
<HPopover ref="popover" v-slot="{ open, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
<HPopoverButton
ref="trigger"
as="div"
@@ -29,18 +29,16 @@
import { computed, ref, onMounted, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { defu } from 'defu'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel } from '@headlessui/vue'
import { useUI } from '../../composables/useUI'
import { usePopper } from '../../composables/usePopper'
import { defuTwMerge } from '../../utils'
import type { PopperOptions } from '../../types/popper'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { PopperOptions, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { popover } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof popover>(appConfig.ui.strategy, appConfig.ui.popover, popover)
export default defineComponent({
components: {
@@ -72,15 +70,12 @@ export default defineComponent({
default: () => ({})
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.popover>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.popover>>(() => defuTwMerge({}, props.ui, appConfig.ui.popover))
setup (props) {
const { ui, attrs } = useUI('popover', props.ui, config, { mergeWrapper: true })
const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))
@@ -108,8 +103,6 @@ export default defineComponent({
return props.mode === 'hover' ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {}
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
function onMouseOver () {
if (props.mode !== 'hover' || !popoverApi.value) {
return
@@ -151,14 +144,13 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
popover,
trigger,
container,
containerStyle,
wrapperClass,
onMouseOver,
onMouseLeave
}

29
src/runtime/components/overlays/Slideover.vue
View File

@@ -1,6 +1,6 @@
<template>
<TransitionRoot as="template" :appear="appear" :show="isOpen">
<HDialog :class="[wrapperClass, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="(e) => !preventClose && close(e)">
<HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="(e) => !preventClose && close(e)">
<TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
<div :class="[ui.overlay.base, ui.overlay.background]" />
</TransitionChild>
@@ -18,15 +18,14 @@
import { computed, defineComponent } from 'vue'
import type { WritableComputedRef, PropType } from 'vue'
import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import { defuTwMerge } from '../../utils'
import { useAppConfig } from '#imports'
// TODO: Remove
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import type { Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { slideover } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof slideover>(appConfig.ui.strategy, appConfig.ui.slideover, slideover)
export default defineComponent({
components: {
@@ -63,16 +62,13 @@ export default defineComponent({
default: false
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.slideover>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
emits: ['update:modelValue', 'close'],
setup (props, { attrs, emit }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.slideover>>(() => defuTwMerge({}, props.ui, appConfig.ui.slideover))
setup (props, { emit }) {
const { ui, attrs } = useUI('slideover', props.ui, config, { mergeWrapper: true })
const isOpen: WritableComputedRef<boolean> = computed({
get () {
@@ -83,8 +79,6 @@ export default defineComponent({
}
})
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
const transitionClass = computed(() => {
if (!props.transition) {
return {}
@@ -105,11 +99,10 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
isOpen,
wrapperClass,
transitionClass,
close
}

30
src/runtime/components/overlays/Tooltip.vue
View File

@@ -1,5 +1,5 @@
<template>
<div ref="trigger" :class="wrapperClass" v-bind="attrs" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
<div ref="trigger" :class="ui.wrapper" v-bind="attrs" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
<slot :open="open">
Hover
</slot>
@@ -27,18 +27,16 @@
import { computed, ref, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { defu } from 'defu'
import { omit } from '../../utils/lodash'
import { twMerge } from 'tailwind-merge'
import UKbd from '../elements/Kbd.vue'
import { useUI } from '../../composables/useUI'
import { usePopper } from '../../composables/usePopper'
import { defuTwMerge } from '../../utils'
import type { PopperOptions } from '../../types/popper'
import { useAppConfig } from '#imports'
// TODO: Remove
import { mergeConfig } from '../../utils'
import type { PopperOptions, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
import { tooltip } from '#ui/ui.config'
// const appConfig = useAppConfig()
const config = mergeConfig<typeof tooltip>(appConfig.ui.strategy, appConfig.ui.tooltip, tooltip)
export default defineComponent({
components: {
@@ -71,15 +69,12 @@ export default defineComponent({
default: () => ({})
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.tooltip>>,
default: () => ({})
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props, { attrs }) {
// TODO: Remove
const appConfig = useAppConfig()
const ui = computed<Partial<typeof appConfig.ui.tooltip>>(() => defuTwMerge({}, props.ui, appConfig.ui.tooltip))
setup (props) {
const { ui, attrs } = useUI('tooltip', props.ui, config, { mergeWrapper: true })
const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
@@ -90,8 +85,6 @@ export default defineComponent({
let openTimeout: NodeJS.Timeout | null = null
let closeTimeout: NodeJS.Timeout | null = null
const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class as string))
// Methods
function onMouseOver () {
@@ -127,13 +120,12 @@ export default defineComponent({
}
return {
attrs: computed(() => omit(attrs, ['class'])),
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
trigger,
container,
open,
wrapperClass,
onMouseOver,
onMouseLeave
}

24
src/runtime/composables/useUI.ts Normal file
View File

@@ -0,0 +1,24 @@
import { computed, toValue, useAttrs } from 'vue'
import { useAppConfig } from '#imports'
import { mergeConfig, omit } from '../utils'
import { Strategy } from '../types'
export const useUI = <T>(key, $ui: Partial<T & { strategy: Strategy }>, $config?: T, { mergeWrapper = false }: { mergeWrapper?: boolean } = {}) => {
const $attrs = useAttrs()
const appConfig = useAppConfig()
const ui = computed(() => mergeConfig<T>(
$ui?.strategy || (appConfig.ui?.strategy as Strategy),
mergeWrapper ? { wrapper: $attrs?.class } : {},
$ui || {},
process.dev ? (appConfig.ui[key] || {}) : {},
toValue($config || {})
))
const attrs = computed(() => omit($attrs, ['class']))
return {
ui,
attrs,
attrsClass: mergeWrapper ? undefined : $attrs?.class as string
}
}

14
src/runtime/types/avatar.d.ts vendored
View File

@@ -1,9 +1,15 @@
import { avatar } from '../ui.config'
import colors from '#ui-colors'
export type AvatarSize = keyof typeof avatar.size
export type AvatarChipColor = 'gray' | typeof colors[number]
export type AvatarChipPosition = keyof typeof avatar.chip.position
export interface Avatar {
src?: string | boolean
alt?: string
text?: string
size?: string
chipColor?: string
chipVariant?: string
chipPosition?: string
size?: AvatarSize
chipColor?: AvatarChipColor
chipPosition?: AvatarChipPosition
}

13
src/runtime/types/button.d.ts vendored
View File

@@ -1,4 +1,11 @@
import type { Link } from './link'
import { button } from '../ui.config'
import type { NestedKeyOf } from '.'
import colors from '#ui-colors'
export type ButtonSize = keyof typeof button.size
export type ButtonColor = keyof typeof button.color | typeof colors[number]
export type ButtonVariant = keyof typeof button.variant | NestedKeyOf<typeof button.color>
export interface Button extends Link {
type?: string
@@ -7,9 +14,9 @@ export interface Button extends Link {
loading?: boolean
disabled?: boolean
padded?: boolean
size?: string
color?: string
variant?: string
size?: ButtonSize
color?: ButtonColor
variant?: ButtonVariant
icon?: string
loadingIcon?: string
leadingIcon?: string

2
src/runtime/types/form.d.ts vendored
View File

@@ -4,7 +4,7 @@ export interface FormError {
}
export interface Form<T> {
validate(path?: string, opts: { silent?: boolean } = { silent: false }): Promise<T>
validate(path?: string, opts: { silent?: boolean }): Promise<T>
clear(path?: string): void
errors: Ref<FormError[]>
setErrors(errs: FormError[], path?: string): void

1
src/runtime/types/index.d.ts vendored
View File

@@ -10,3 +10,4 @@ export * from './notification'
export * from './popper'
export * from './tabs'
export * from './vertical-navigation'
export * from './utils'

8
src/runtime/types/notification.d.ts vendored
View File

@@ -1,6 +1,8 @@
import type { Avatar } from './avatar'
import type { Button } from './button'
import appConfig from '#build/app.config'
import colors from '#ui-colors'
export type NotificationColor = 'gray' | typeof colors[number]
export interface NotificationAction extends Button {
click?: Function
@@ -17,6 +19,6 @@ export interface Notification {
actions?: NotificationAction[]
click?: Function
callback?: Function
color?: string
ui?: Partial<typeof appConfig.ui.notification>
color?: NotificationColor
ui?: any
}

11
src/runtime/types/utils.d.ts vendored Normal file
View File

@@ -0,0 +1,11 @@
export type Strategy = 'merge' | 'override';
export type NestedKeyOf<ObjectType extends object> = {
[Key in keyof ObjectType]: ObjectType[Key] extends object
? NestedKeyOf<ObjectType[Key]>
: Key;
}[keyof ObjectType];
export type DeepPartial<T> = Partial<{
[P in keyof T]: DeepPartial<T[P]> | { [key: string]: string };
}>;

120
src/runtime/app.config.ts → src/runtime/ui.config.ts
View File

@@ -1,6 +1,6 @@
// Data
const table = {
export const table = {
wrapper: 'relative overflow-x-auto',
base: 'min-w-full table-fixed',
divide: 'divide-y divide-gray-300 dark:divide-gray-700',
@@ -62,7 +62,7 @@ const table = {
// Elements
const avatar = {
export const avatar = {
wrapper: 'relative inline-flex items-center justify-center flex-shrink-0',
background: 'bg-gray-100 dark:bg-gray-800',
rounded: 'rounded-full',
@@ -122,13 +122,13 @@ const avatar = {
}
}
const avatarGroup = {
wrapper: 'flex flex-row-reverse justify-end',
export const avatarGroup = {
wrapper: 'inline-flex flex-row-reverse justify-end',
ring: 'ring-2 ring-white dark:ring-gray-900',
margin: '-me-1.5 first:me-0'
}
const badge = {
export const badge = {
base: 'inline-flex items-center',
rounded: 'rounded-md',
font: 'font-medium',
@@ -162,7 +162,7 @@ const badge = {
}
}
const button = {
export const button = {
base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0',
font: 'font-medium',
rounded: 'rounded-md',
@@ -239,13 +239,16 @@ const button = {
}
}
const buttonGroup = {
wrapper: 'inline-flex -space-x-px',
export const buttonGroup = {
wrapper: {
horizontal: 'inline-flex -space-x-px',
vertical: 'inline-flex flex-col -space-y-px'
},
rounded: 'rounded-md',
shadow: 'shadow-sm'
}
const dropdown = {
export const dropdown = {
wrapper: 'relative inline-flex text-left rtl:text-right',
container: 'z-20',
width: 'w-48',
@@ -291,7 +294,7 @@ const dropdown = {
}
}
const accordion = {
export const accordion = {
wrapper: 'w-full flex flex-col',
item: {
base: '',
@@ -312,7 +315,7 @@ const accordion = {
}
}
const alert = {
export const alert = {
wrapper: 'w-full relative overflow-hidden',
title: 'text-sm font-medium',
description: 'mt-1 text-sm leading-4 opacity-90',
@@ -350,7 +353,7 @@ const alert = {
}
}
const kbd = {
export const kbd = {
base: 'inline-flex items-center justify-center text-gray-900 dark:text-white',
padding: 'px-1',
size: {
@@ -369,7 +372,7 @@ const kbd = {
// Forms
const input = {
export const input = {
wrapper: 'relative',
base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
rounded: 'rounded-md',
@@ -474,7 +477,7 @@ const input = {
}
}
const formGroup = {
export const formGroup = {
wrapper: '',
label: {
wrapper: 'flex content-center items-center justify-between',
@@ -494,10 +497,13 @@ const formGroup = {
description: 'text-gray-500 dark:text-gray-400',
hint: 'text-gray-500 dark:text-gray-400',
help: 'mt-2 text-gray-500 dark:text-gray-400',
error: 'mt-2 text-red-500 dark:text-red-400'
error: 'mt-2 text-red-500 dark:text-red-400',
default: {
size: 'sm'
}
}
const textarea = {
export const textarea = {
...input,
default: {
size: 'sm',
@@ -506,7 +512,7 @@ const textarea = {
}
}
const select = {
export const select = {
...input,
placeholder: 'text-gray-900 dark:text-white',
default: {
@@ -518,7 +524,7 @@ const select = {
}
}
const selectMenu = {
export const selectMenu = {
container: 'z-20',
width: 'w-full',
height: 'max-h-60',
@@ -573,7 +579,7 @@ const selectMenu = {
}
}
const radio = {
export const radio = {
wrapper: 'relative flex items-start',
base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
color: 'text-{color}-500 dark:text-{color}-400',
@@ -588,7 +594,7 @@ const radio = {
}
}
const checkbox = {
export const checkbox = {
wrapper: 'relative flex items-start',
base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent dark:indeterminate:bg-current dark:indeterminate:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
rounded: 'rounded',
@@ -604,7 +610,7 @@ const checkbox = {
}
}
const toggle = {
export const toggle = {
base: 'relative inline-flex h-5 w-9 flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none',
rounded: 'rounded-full',
ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
@@ -629,7 +635,7 @@ const toggle = {
}
}
const range = {
export const range = {
wrapper: 'relative w-full flex items-center',
base: 'w-full absolute appearance-none cursor-pointer disabled:cursor-not-allowed disabled:bg-opacity-50 focus:outline-none peer group',
rounded: 'rounded-lg',
@@ -679,7 +685,7 @@ const range = {
// Layout
const card = {
export const card = {
base: 'overflow-hidden',
background: 'bg-white dark:bg-gray-900',
divide: 'divide-y divide-gray-200 dark:divide-gray-800',
@@ -703,13 +709,13 @@ const card = {
}
}
const container = {
export const container = {
base: 'mx-auto',
padding: 'px-4 sm:px-6 lg:px-8',
constrained: 'max-w-7xl'
}
const skeleton = {
export const skeleton = {
base: 'animate-pulse',
background: 'bg-gray-100 dark:bg-gray-800',
rounded: 'rounded-md'
@@ -717,7 +723,7 @@ const skeleton = {
// Navigation
const verticalNavigation = {
export const verticalNavigation = {
wrapper: 'relative',
base: 'group relative flex items-center gap-2 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
ring: 'focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
@@ -745,7 +751,7 @@ const verticalNavigation = {
}
}
const commandPalette = {
export const commandPalette = {
wrapper: 'flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800',
container: 'relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2',
input: {
@@ -789,7 +795,7 @@ const commandPalette = {
},
avatar: {
base: 'flex-shrink-0',
size: '3xs'
size: '3xs' as const
},
chip: {
base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
@@ -813,7 +819,7 @@ const commandPalette = {
}
}
const pagination = {
export const pagination = {
wrapper: 'flex items-center -space-x-px',
base: '',
rounded: 'first:rounded-s-md last:rounded-e-md',
@@ -838,7 +844,7 @@ const pagination = {
}
}
const tabs = {
export const tabs = {
wrapper: 'relative space-y-2',
container: 'relative w-full',
base: 'focus:outline-none',
@@ -874,7 +880,7 @@ const tabs = {
// Overlays
const modal = {
export const modal = {
wrapper: 'relative z-50',
inner: 'fixed inset-0 overflow-y-auto',
container: 'flex min-h-full items-end sm:items-center justify-center text-center',
@@ -911,7 +917,7 @@ const modal = {
}
}
const slideover = {
export const slideover = {
wrapper: 'fixed inset-0 flex z-50',
overlay: {
base: 'fixed inset-0 transition-opacity',
@@ -940,7 +946,7 @@ const slideover = {
}
}
const tooltip = {
export const tooltip = {
wrapper: 'relative inline-flex',
container: 'z-20',
width: 'max-w-xs',
@@ -965,7 +971,7 @@ const tooltip = {
}
}
const popover = {
export const popover = {
wrapper: 'relative',
container: 'z-20',
width: '',
@@ -988,7 +994,7 @@ const popover = {
}
}
const contextMenu = {
export const contextMenu = {
wrapper: 'relative',
container: 'z-20',
width: '',
@@ -1012,7 +1018,7 @@ const contextMenu = {
}
}
const notification = {
export const notification = {
wrapper: 'w-full pointer-events-auto',
container: 'relative overflow-hidden',
title: 'text-sm font-medium text-gray-900 dark:text-white',
@@ -1028,7 +1034,7 @@ const notification = {
},
avatar: {
base: 'flex-shrink-0 self-center',
size: 'md'
size: 'md' as const
},
progress: {
base: 'absolute bottom-0 end-0 start-0 h-1',
@@ -1059,47 +1065,9 @@ const notification = {
}
}
const notifications = {
export const notifications = {
wrapper: 'fixed flex flex-col justify-end z-[55]',
position: 'bottom-0 end-0',
width: 'w-full sm:w-96',
container: 'px-4 sm:px-6 py-6 space-y-3 overflow-y-auto'
}
export default {
ui: {
table,
avatar,
avatarGroup,
badge,
button,
buttonGroup,
dropdown,
kbd,
accordion,
alert,
input,
formGroup,
textarea,
select,
selectMenu,
checkbox,
radio,
toggle,
range,
card,
container,
skeleton,
verticalNavigation,
commandPalette,
pagination,
tabs,
modal,
slideover,
popover,
tooltip,
contextMenu,
notification,
notifications
}
}

31
src/runtime/utils/index.ts
View File

@@ -1,15 +1,30 @@
import { createDefu } from 'defu'
import { twMerge } from 'tailwind-merge'
import { defu, createDefu } from 'defu'
import { extendTailwindMerge } from 'tailwind-merge'
import type { Strategy } from '../types'
export const defuTwMerge = createDefu((obj, key, value) => {
if (typeof obj[key] === 'string' && typeof value === 'string' && obj[key] && value) {
const customTwMerge = extendTailwindMerge({
classGroups: {
icons: [(classPart: string) => /^i-/.test(classPart)]
}
})
const defuTwMerge = createDefu((obj, key, value, namespace) => {
if (namespace !== 'default' && typeof obj[key] === 'string' && typeof value === 'string' && obj[key] && value) {
// @ts-ignore
obj[key] = twMerge(obj[key], value)
obj[key] = customTwMerge(obj[key], value)
return true
}
})
export const hexToRgb = (hex: string) => {
export function mergeConfig<T> (strategy: Strategy, ...configs): T {
if (strategy === 'override') {
return defu({}, ...configs) as T
}
return defuTwMerge({}, ...configs) as T
}
export function hexToRgb (hex: string) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
hex = hex.replace(shorthandRegex, function (_, r, g, b) {
@@ -22,7 +37,7 @@ export const hexToRgb = (hex: string) => {
: null
}
export const getSlotsChildren = (slots: any) => {
export function getSlotsChildren (slots: any) {
let children = slots.default?.()
if (children.length) {
children = children.flatMap(c => {
@@ -40,3 +55,5 @@ export const getSlotsChildren = (slots: any) => {
}
return children
}
export * from './lodash'

21
src/templates.ts Normal file
View File

@@ -0,0 +1,21 @@
import { dirname } from 'pathe'
import { useNuxt, addTemplate } from '@nuxt/kit'
export default function createTemplates (nuxt = useNuxt()) {
const template = addTemplate({
filename: 'ui.colors.mjs',
getContents: () => `export default ${JSON.stringify(nuxt.options.appConfig.ui.colors)};`,
write: true
})
const typesTemplate = addTemplate({
filename: 'ui.colors.d.ts',
getContents: () => `declare module '#ui-colors' { const defaultExport: ${JSON.stringify(nuxt.options.appConfig.ui.colors)}; export default defaultExport; }`,
write: true
})
nuxt.options.alias['#ui-colors'] = dirname(template.dst)
nuxt.hook('prepare:types', (opts) => {
opts.references.push({ path: typesTemplate.dst })
})
}

3
tsconfig.json
View File

@@ -1,3 +1,4 @@
{
"extends": "./docs/.nuxt/tsconfig.json"
"extends": "./.nuxt/tsconfig.json",
"exclude": ["docs"]
}