mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-16 04:58:12 +01:00
Compare commits
39 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
7584d72f42 | ||
|
|
6b5ddc18bd | ||
|
|
4dd92f7f36 | ||
|
|
cbc27422a4 | ||
|
|
db508b218f | ||
|
|
ad33b26729 | ||
|
|
f07968afef | ||
|
|
a8dc9b216a | ||
|
|
32474e21f7 | ||
|
|
c023fb400c | ||
|
|
4548809ee5 | ||
|
|
6b52963339 | ||
|
|
2c2ff0f473 | ||
|
|
0b762d61e7 | ||
|
|
9cbb68871c | ||
|
|
7c5b47ea72 | ||
|
7196d81b4c | ||
|
|
1cb8df869f | ||
|
|
67cc349c6c | ||
|
1f0f6181db | ||
|
|
18b6133b11 | ||
|
|
51bfb9a4e1 | ||
|
|
76e1cc84db | ||
|
|
d539f2540b | ||
|
e53cdeaf0b | ||
|
|
4d72a758fa | ||
|
|
a2e9b7da07 | ||
|
|
e408eabd8b | ||
|
|
5718dfd69a | ||
|
|
4a9b66aeb3 | ||
|
|
464ff0b703 | ||
|
|
6984989a2c | ||
|
|
2dcc11ff89 | ||
|
|
29efa99fb7 | ||
|
|
6c432028ae | ||
|
|
0270ce9251 | ||
|
|
182e3b6e8f | ||
|
|
26afa45fbf | ||
|
|
edd92d01a9 |
1
.nuxtrc
1
.nuxtrc
@@ -1,3 +1,2 @@
|
||||
imports.autoImport=false
|
||||
typescript.includeWorkspace=true
|
||||
typescript.strict=false
|
||||
|
||||
21
CHANGELOG.md
21
CHANGELOG.md
@@ -1,5 +1,26 @@
|
||||
# Changelog
|
||||
|
||||
## [2.11.1](https://github.com/nuxt/ui/compare/v2.11.0...v2.11.1) (2023-12-11)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **Breadcrumb:** handle divider in rtl ([#1049](https://github.com/nuxt/ui/issues/1049)) ([e53cdea](https://github.com/nuxt/ui/commit/e53cdeaf0b3746da76cb6a658a5f71064d97fc9a))
|
||||
* **CommandPalette:** improve performances and avoid multiple recompute ([db508b2](https://github.com/nuxt/ui/commit/db508b218f5277b2522566f790bd268eae2ee1e5))
|
||||
* **CommandPalette:** missing right padding on input with close button ([ad33b26](https://github.com/nuxt/ui/commit/ad33b26729b1bf3d21f8d480e04c197f4fbb6119))
|
||||
* **components:** move remaining classes to config ([#1039](https://github.com/nuxt/ui/issues/1039)) ([e408eab](https://github.com/nuxt/ui/commit/e408eabd8b841cdf8c71ce27c35c9675f2db8625))
|
||||
* **module:** prevent class merging on `default` children ([f07968a](https://github.com/nuxt/ui/commit/f07968afef263d38183ce6c9cd9185ef7eee0494)), closes [#1076](https://github.com/nuxt/ui/issues/1076)
|
||||
* **Notification:** handle dynamic backgrounds ([#1063](https://github.com/nuxt/ui/issues/1063)) ([1f0f618](https://github.com/nuxt/ui/commit/1f0f6181db7fa1ab45b8f7fec8df1cedccaec688))
|
||||
* **RadioGroup:** props reactivity issues ([#1065](https://github.com/nuxt/ui/issues/1065)) ([7196d81](https://github.com/nuxt/ui/commit/7196d81b4cecf1711a01bed5fed1236ab3b2398b))
|
||||
* **types:** favor `Record<string, any>>` instead of `object` ([4d72a75](https://github.com/nuxt/ui/commit/4d72a758fad5cffa09f3aaf6b3df9baf7edc2a9f))
|
||||
* **types:** improve with strict mode ([#1041](https://github.com/nuxt/ui/issues/1041)) ([4a9b66a](https://github.com/nuxt/ui/commit/4a9b66aeb32a332e2d5be7e236e5d4567044b3e2))
|
||||
* **types:** workaround for `popper` weak type ([5718dfd](https://github.com/nuxt/ui/commit/5718dfd69a7040987354485b30f7da7aee342abb)), closes [#644](https://github.com/nuxt/ui/issues/644)
|
||||
|
||||
|
||||
### Reverts
|
||||
|
||||
* Revert "chore(deps): pin `vitest`" ([6984989](https://github.com/nuxt/ui/commit/6984989a2c20fbde177d1e64ea1a7cae07f03c4d))
|
||||
|
||||
## [2.11.0](https://github.com/nuxt/ui/compare/v2.10.0...v2.11.0) (2023-11-23)
|
||||
|
||||
|
||||
|
||||
@@ -56,7 +56,7 @@ defineProps({
|
||||
<h1 class="m-0 text-[75px] font-semibold mb-2 text-white flex items-center">
|
||||
<span>{{ title }}</span>
|
||||
</h1>
|
||||
<p class="text-[32px] text-[#94a3b8] leading-tight">
|
||||
<p v-if="description" class="text-[32px] text-[#94a3b8] leading-tight">
|
||||
{{ description.slice(0, 200) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -110,6 +110,10 @@ const props = defineProps({
|
||||
componentClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
ignoreVModel: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
@@ -218,6 +222,9 @@ const code = computed(() => {
|
||||
if (value === 'undefined' || value === null) {
|
||||
continue
|
||||
}
|
||||
if (key === 'modelValue' && props.ignoreVModel) {
|
||||
continue
|
||||
}
|
||||
|
||||
code += ` ${(typeof value === 'boolean' && (value !== true || key === 'modelValue')) || typeof value === 'object' || typeof value === 'number' ? ':' : ''}${key === 'modelValue' ? 'model-value' : kebabCase(key)}${typeof value === 'boolean' && !!value && key !== 'modelValue' ? '' : `="${typeof value === 'object' ? renderObject(value) : value}"`}`
|
||||
}
|
||||
|
||||
@@ -14,9 +14,6 @@ const links = [{
|
||||
}, {
|
||||
label: 'Examples',
|
||||
to: '/getting-started/examples'
|
||||
}, {
|
||||
label: 'Roadmap',
|
||||
to: '/getting-started/roadmap'
|
||||
}]
|
||||
</script>
|
||||
|
||||
|
||||
@@ -142,18 +142,10 @@ To use the latest updates pushed on the [`dev`](https://github.com/nuxt/ui/tree/
|
||||
|
||||
Update your `package.json` to the following:
|
||||
|
||||
```json [package.json]
|
||||
{
|
||||
"devDependencies": {
|
||||
"@nuxt/ui": "npm:@nuxt/ui-edge@latest"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```diff [package.json]
|
||||
{
|
||||
"devDependencies": {
|
||||
- "@nuxt/ui": "^2.9.0"
|
||||
- "@nuxt/ui": "^2.11.0"
|
||||
+ "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -311,7 +311,7 @@ export default defineNuxtConfig({
|
||||
})
|
||||
```
|
||||
|
||||
### Custom config :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
|
||||
### Custom config
|
||||
|
||||
If you have specific needs, like using a custom icon collection, you can use the `icons` option in your `nuxt.config.ts` as an object to override the config of the [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
|
||||
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
---
|
||||
description: Display a chip indicator on any component.
|
||||
navigation:
|
||||
badge: New
|
||||
links:
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
|
||||
@@ -21,7 +21,7 @@ props:
|
||||
You won't be able to use any icon in the `name` prop here as icons are bundled using [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons), read more about this in [Theming](/getting-started/theming#icons).
|
||||
::
|
||||
|
||||
### Dynamic :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
|
||||
### Dynamic
|
||||
|
||||
You can use the `dynamic` prop to enable dynamic icon loading. This will use [`nuxt-icon`](https://github.com/nuxt-modules/icon) instead and allow you to use any icon from [Iconify](https://iconify.design/) as well as the `{collection_name}:{icon_name}` pattern.
|
||||
|
||||
|
||||
@@ -148,6 +148,21 @@ excludedProps:
|
||||
---
|
||||
::
|
||||
|
||||
### Padded
|
||||
|
||||
Use the `padded` prop to remove the padding of the Input.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
padded: false
|
||||
baseProps:
|
||||
placeholder: 'Search...'
|
||||
variant: 'none'
|
||||
class: 'w-full'
|
||||
---
|
||||
::
|
||||
|
||||
## Slots
|
||||
|
||||
### `leading`
|
||||
|
||||
@@ -132,6 +132,21 @@ props:
|
||||
---
|
||||
::
|
||||
|
||||
### Padded
|
||||
|
||||
Use the `padded` prop to remove the padding of the Textarea.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
padded: false
|
||||
baseProps:
|
||||
placeholder: 'Search...'
|
||||
variant: 'none'
|
||||
class: 'w-full'
|
||||
---
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
@@ -175,6 +175,25 @@ excludedProps:
|
||||
---
|
||||
::
|
||||
|
||||
### Padded
|
||||
|
||||
Use the `padded` prop to remove the padding of the Select.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
padded: false
|
||||
baseProps:
|
||||
placeholder: 'Search...'
|
||||
options:
|
||||
- 'United States'
|
||||
- 'Canada'
|
||||
- 'Mexico'
|
||||
variant: 'none'
|
||||
class: 'w-full'
|
||||
---
|
||||
::
|
||||
|
||||
## Slots
|
||||
|
||||
### `leading`
|
||||
|
||||
@@ -14,6 +14,8 @@ links:
|
||||
|
||||
The `SelectMenu` component renders by default a [Select](/forms/select) component and is based on the `ui.select` preset. You can use most of the `Select` props to configure the display if you don't want to override the default slot such as [color](/forms/select#style), [variant](/forms/select#style), [size](/forms/select#size), [placeholder](/forms/select#placeholder), [icon](/forms/select#icon), [disabled](/forms/select#disabled), etc.
|
||||
|
||||
You can use the `ui` prop like the `Select` component to override the default config. The `uiMenu` prop can be used to override the default menu config.
|
||||
|
||||
Like the `Select` component, you can use the `options` prop to pass an array of strings or objects.
|
||||
|
||||
::component-example
|
||||
@@ -113,7 +115,7 @@ componentProps:
|
||||
---
|
||||
::
|
||||
|
||||
#### Clear on close :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
|
||||
#### Clear on close
|
||||
|
||||
By default, the search query will be kept after the menu is closed. To clear it on close, set the `clear-search-on-close` prop.
|
||||
|
||||
@@ -238,4 +240,13 @@ An example is available in the [Create option](#create-option) section.
|
||||
|
||||
## Config
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
Use the `ui` prop to override the select config and the `uiMenu` prop to override the menu config.
|
||||
::
|
||||
|
||||
::tabs{:selectedIndex="1"}
|
||||
:component-preset{label="Select (ui)" slug="Select"}
|
||||
:component-preset{label="SelectMenu (uiMenu)"}
|
||||
::
|
||||
|
||||
:component-preset
|
||||
|
||||
@@ -26,7 +26,7 @@ props:
|
||||
---
|
||||
::
|
||||
|
||||
### Size :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
|
||||
### Size
|
||||
|
||||
Use the `size` prop to change the size of the Toggle.
|
||||
|
||||
|
||||
@@ -163,7 +163,7 @@ code: >-
|
||||
This will only work with form elements that support the `size` prop.
|
||||
::
|
||||
|
||||
### Eager Validation :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
|
||||
### Eager Validation
|
||||
|
||||
By default, validation is only triggered after the initial `blur` event. This is to prevent the form from being validated as the user is typing. You can override this behavior by setting the `eager-validation` prop to `true`
|
||||
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
description: A list of links that indicate the current page's location within a navigational hierarchy.
|
||||
navigation:
|
||||
badge: New
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -25,7 +25,7 @@ Use the `open` prop to manually control showing the panel.
|
||||
|
||||
:component-example{component="popover-example-open"}
|
||||
|
||||
### Overlay :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
|
||||
### Overlay
|
||||
|
||||
:component-example{component="popover-example-overlay"}
|
||||
|
||||
|
||||
@@ -49,7 +49,7 @@ const navigation = computed(() => {
|
||||
]
|
||||
}
|
||||
|
||||
return nav.value.filter(item => item._path !== '/dev')
|
||||
return nav.value?.filter(item => item._path !== '/dev') || []
|
||||
})
|
||||
|
||||
const links = computed(() => {
|
||||
|
||||
@@ -102,6 +102,7 @@ export default defineNuxtConfig({
|
||||
process.env.NUXT_UI_PRO_PATH ? resolve(process.env.NUXT_UI_PRO_PATH, '.docs', 'components') : '.c12'
|
||||
],
|
||||
metaFields: {
|
||||
type: false,
|
||||
props: true,
|
||||
slots: true,
|
||||
events: false,
|
||||
@@ -123,5 +124,13 @@ export default defineNuxtConfig({
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
typescript: {
|
||||
strict: false
|
||||
},
|
||||
vite: {
|
||||
optimizeDeps: {
|
||||
include: ['date-fns']
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -5,28 +5,28 @@
|
||||
"@nuxt/ui": "workspace:latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/heroicons": "^1.1.13",
|
||||
"@iconify-json/simple-icons": "^1.1.79",
|
||||
"@iconify-json/heroicons": "^1.1.15",
|
||||
"@iconify-json/simple-icons": "^1.1.82",
|
||||
"@nuxt/content": "^2.9.0",
|
||||
"@nuxt/devtools": "^1.0.3",
|
||||
"@nuxt/devtools": "^1.0.4",
|
||||
"@nuxt/eslint-config": "^0.2.0",
|
||||
"@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@0.4.2-28344234.90e73a4",
|
||||
"@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@0.5.0-28367445.03c79ba",
|
||||
"@nuxthq/studio": "^1.0.5",
|
||||
"@nuxtjs/fontaine": "^0.4.1",
|
||||
"@nuxtjs/google-fonts": "^3.0.2",
|
||||
"@nuxtjs/google-fonts": "^3.1.0",
|
||||
"@nuxtjs/mdc": "^0.2.8",
|
||||
"@nuxtjs/plausible": "^0.2.3",
|
||||
"@nuxtjs/plausible": "^0.2.4",
|
||||
"@octokit/rest": "^20.0.2",
|
||||
"@vueuse/nuxt": "^10.6.1",
|
||||
"@vueuse/nuxt": "^10.7.0",
|
||||
"date-fns": "^2.30.0",
|
||||
"eslint": "^8.54.0",
|
||||
"eslint": "^8.55.0",
|
||||
"joi": "^17.11.0",
|
||||
"nuxt": "^3.8.2",
|
||||
"nuxt-cloudflare-analytics": "^1.0.8",
|
||||
"nuxt-component-meta": "npm:nuxt-component-meta-edge@0.5.5-28315603.0a285c7",
|
||||
"nuxt-component-meta": "^0.6.0",
|
||||
"nuxt-og-image": "^2.2.4",
|
||||
"prettier": "^3.1.0",
|
||||
"typescript": "^5.3.2",
|
||||
"typescript": "^5.3.3",
|
||||
"ufo": "^1.3.2",
|
||||
"v-calendar": "^3.1.2",
|
||||
"valibot": "^0.21.0",
|
||||
|
||||
26
package.json
26
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nuxt/ui",
|
||||
"version": "2.11.0",
|
||||
"version": "2.11.1",
|
||||
"repository": "nuxt/ui",
|
||||
"homepage": "https://ui.nuxt.com",
|
||||
"license": "MIT",
|
||||
@@ -35,44 +35,42 @@
|
||||
"@egoist/tailwindcss-icons": "^1.4.0",
|
||||
"@headlessui/tailwindcss": "^0.2.0",
|
||||
"@headlessui/vue": "^1.7.16",
|
||||
"@iconify-json/heroicons": "^1.1.13",
|
||||
"@iconify-json/heroicons": "^1.1.15",
|
||||
"@nuxt/kit": "^3.8.2",
|
||||
"@nuxtjs/color-mode": "^3.3.2",
|
||||
"@nuxtjs/tailwindcss": "^6.10.0",
|
||||
"@nuxtjs/tailwindcss": "^6.10.1",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@tailwindcss/aspect-ratio": "^0.4.2",
|
||||
"@tailwindcss/container-queries": "^0.1.1",
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
"@vueuse/core": "^10.6.1",
|
||||
"@vueuse/integrations": "^10.6.1",
|
||||
"@vueuse/math": "^10.6.1",
|
||||
"@vueuse/core": "^10.7.0",
|
||||
"@vueuse/integrations": "^10.7.0",
|
||||
"@vueuse/math": "^10.7.0",
|
||||
"defu": "^6.1.3",
|
||||
"fuse.js": "^6.6.2",
|
||||
"nuxt-icon": "^0.6.6",
|
||||
"nuxt-icon": "^0.6.7",
|
||||
"ohash": "^1.1.3",
|
||||
"pathe": "^1.1.1",
|
||||
"scule": "^1.1.0",
|
||||
"scule": "^1.1.1",
|
||||
"tailwind-merge": "^1.14.0",
|
||||
"tailwindcss": "^3.3.5"
|
||||
"tailwindcss": "^3.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/eslint-config": "^0.2.0",
|
||||
"@nuxt/module-builder": "^0.5.4",
|
||||
"@release-it/conventional-changelog": "^8.0.1",
|
||||
"@testing-library/vue": "^8.0.1",
|
||||
"@vitejs/plugin-vue": "^4.5.0",
|
||||
"eslint": "^8.54.0",
|
||||
"eslint": "^8.55.0",
|
||||
"happy-dom": "^12.10.3",
|
||||
"joi": "^17.11.0",
|
||||
"nuxt": "^3.8.2",
|
||||
"nuxt-vitest": "^0.11.5",
|
||||
"release-it": "^17.0.0",
|
||||
"typescript": "^5.3.2",
|
||||
"typescript": "^5.3.3",
|
||||
"unbuild": "^2.0.0",
|
||||
"valibot": "^0.21.0",
|
||||
"vitest": "^0.33.0",
|
||||
"vue-tsc": "^1.8.22",
|
||||
"vue-tsc": "^1.8.25",
|
||||
"yup": "^1.3.2",
|
||||
"zod": "^3.22.4"
|
||||
},
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import module from '../src/module'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
module
|
||||
'../src/module'
|
||||
]
|
||||
})
|
||||
|
||||
4087
pnpm-lock.yaml
generated
4087
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -243,7 +243,7 @@ export const generateSafelist = (colors: string[], globalColors) => {
|
||||
}
|
||||
|
||||
export const customSafelistExtractor = (prefix, content: string, colors: string[], safelistColors: string[]) => {
|
||||
const classes = []
|
||||
const classes: string[] = []
|
||||
const regex = /<([A-Za-z][A-Za-z0-9]*(?:-[A-Za-z][A-Za-z0-9]*)*)\s+(?![^>]*:color\b)[^>]*\bcolor=["']([^"']+)["'][^>]*>/gs
|
||||
|
||||
const matches = content.matchAll(regex)
|
||||
|
||||
@@ -10,10 +10,15 @@ import type { DeepPartial, Strategy } from './runtime/types/utils'
|
||||
|
||||
const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
|
||||
|
||||
// @ts-ignore
|
||||
delete defaultColors.lightBlue
|
||||
// @ts-ignore
|
||||
delete defaultColors.warmGray
|
||||
// @ts-ignore
|
||||
delete defaultColors.trueGray
|
||||
// @ts-ignore
|
||||
delete defaultColors.coolGray
|
||||
// @ts-ignore
|
||||
delete defaultColors.blueGray
|
||||
|
||||
type UI = {
|
||||
@@ -79,12 +84,15 @@ export default defineNuxtModule<ModuleOptions>({
|
||||
|
||||
// @ts-ignore
|
||||
nuxt.hook('tailwindcss:config', function (tailwindConfig) {
|
||||
tailwindConfig.theme = tailwindConfig.theme || {}
|
||||
tailwindConfig.theme.extend = tailwindConfig.theme.extend || {}
|
||||
tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {}
|
||||
|
||||
const globalColors: any = {
|
||||
...(tailwindConfig.theme.colors || defaultColors),
|
||||
...tailwindConfig.theme.extend?.colors
|
||||
}
|
||||
|
||||
tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {}
|
||||
// @ts-ignore
|
||||
globalColors.primary = tailwindConfig.theme.extend.colors.primary = {
|
||||
50: 'rgb(var(--color-primary-50) / <alpha-value>)',
|
||||
@@ -132,7 +140,7 @@ export default defineNuxtModule<ModuleOptions>({
|
||||
}
|
||||
|
||||
tailwindConfig.safelist = tailwindConfig.safelist || []
|
||||
tailwindConfig.safelist.push(...generateSafelist(options.safelistColors, colors))
|
||||
tailwindConfig.safelist.push(...generateSafelist(options.safelistColors || [], colors))
|
||||
|
||||
tailwindConfig.plugins = tailwindConfig.plugins || []
|
||||
tailwindConfig.plugins.push(iconsPlugin(Array.isArray(options.icons) || options.icons === 'all' ? { collections: getIconCollections(options.icons) } : typeof options.icons === 'object' ? options.icons as IconsPluginOptions : {}))
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
|
||||
<UButton
|
||||
v-if="column.sortable"
|
||||
v-bind="{ ...ui.default.sortButton, ...sortButton }"
|
||||
v-bind="{ ...(ui.default.sortButton || {}), ...sortButton }"
|
||||
:icon="(!sort.column || sort.column !== column.key) ? (sortButton.icon || ui.default.sortButton.icon) : sort.direction === 'asc' ? sortAscIcon : sortDescIcon"
|
||||
:label="column[columnAttribute]"
|
||||
@click="onSort(column)"
|
||||
@@ -145,11 +145,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'update:sort'],
|
||||
|
||||
@@ -93,17 +93,17 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
const { ui, attrs } = useUI('accordion', toRef(props, 'ui'), config, toRef(props, 'class'))
|
||||
|
||||
const uiButton = computed<Partial<typeof configButton>>(() => configButton)
|
||||
const uiButton = computed<typeof configButton>(() => configButton)
|
||||
|
||||
const buttonRefs = ref<{ open: boolean, close: (e: EventTarget) => {} }[]>([])
|
||||
|
||||
@@ -114,7 +114,7 @@ export default defineComponent({
|
||||
|
||||
buttonRefs.value.forEach((button) => {
|
||||
if (button.open) {
|
||||
button.close(e.target)
|
||||
button.close(e.target as EventTarget)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
|
||||
<UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
|
||||
|
||||
<div class="w-0 flex-1">
|
||||
<div :class="ui.inner">
|
||||
<p :class="ui.title">
|
||||
<slot name="title" :title="title">
|
||||
{{ title }}
|
||||
@@ -17,15 +17,15 @@
|
||||
</p>
|
||||
|
||||
<div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
|
||||
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
|
||||
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="action.click" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
|
||||
<template v-if="!description && !$slots.description && actions.length">
|
||||
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
|
||||
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="action.click" />
|
||||
</template>
|
||||
|
||||
<UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="$emit('close')" />
|
||||
<UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="$emit('close')" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,7 +73,7 @@ export default defineComponent({
|
||||
},
|
||||
closeButton: {
|
||||
type: Object as PropType<Button>,
|
||||
default: () => config.default.closeButton as Button
|
||||
default: () => config.default.closeButton as unknown as Button
|
||||
},
|
||||
actions: {
|
||||
type: Array as PropType<(Button & { click?: Function })[]>,
|
||||
@@ -98,11 +98,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['close'],
|
||||
|
||||
@@ -86,11 +86,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
|
||||
@@ -29,11 +29,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof avatarGroupConfig & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof avatarGroupConfig> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props, { slots }) {
|
||||
|
||||
@@ -51,11 +51,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</slot>
|
||||
|
||||
<slot>
|
||||
<span v-if="label" :class="[truncate ? 'text-left break-all line-clamp-1' : '']">
|
||||
<span v-if="label" :class="[truncate ? ui.truncate : '']">
|
||||
{{ label }}
|
||||
</span>
|
||||
</slot>
|
||||
@@ -121,11 +121,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props, { slots }) {
|
||||
@@ -154,7 +154,7 @@ export default defineComponent({
|
||||
ui.value.gap[size.value],
|
||||
props.padded && ui.value[isSquare.value ? 'square' : 'padding'][size.value],
|
||||
variant?.replaceAll('{color}', props.color),
|
||||
props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center'
|
||||
props.block ? ui.value.block : ui.value.inline
|
||||
), props.class)
|
||||
})
|
||||
|
||||
@@ -178,7 +178,7 @@ export default defineComponent({
|
||||
return twJoin(
|
||||
ui.value.icon.base,
|
||||
ui.value.icon.size[size.value],
|
||||
props.loading && 'animate-spin'
|
||||
props.loading && ui.value.icon.loading
|
||||
)
|
||||
})
|
||||
|
||||
@@ -186,11 +186,13 @@ export default defineComponent({
|
||||
return twJoin(
|
||||
ui.value.icon.base,
|
||||
ui.value.icon.size[size.value],
|
||||
props.loading && !isLeading.value && 'animate-spin'
|
||||
props.loading && !isLeading.value && ui.value.icon.loading
|
||||
)
|
||||
})
|
||||
|
||||
return {
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
ui,
|
||||
attrs,
|
||||
isLeading,
|
||||
isTrailing,
|
||||
|
||||
@@ -32,11 +32,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof buttonGroupConfig & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof buttonGroupConfig> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props, { slots }) {
|
||||
@@ -52,20 +52,7 @@ export default defineComponent({
|
||||
), props.class)
|
||||
})
|
||||
|
||||
const rounded = computed(() => {
|
||||
const roundedMap = {
|
||||
'rounded-none': { horizontal: { start: 'rounded-s-none', end: 'rounded-e-none' }, vertical: { start: 'rounded-t-none', end: 'rounded-b-none' } },
|
||||
'rounded-sm': { horizontal: { start: 'rounded-s-sm', end: 'rounded-e-sm' }, vertical: { start: 'rounded-t-sm', end: 'rounded-b-sm' } },
|
||||
rounded: { horizontal: { start: 'rounded-s', end: 'rounded-e' }, vertical: { start: 'rounded-t', end: 'rounded-b' } },
|
||||
'rounded-md': { horizontal: { start: 'rounded-s-md', end: 'rounded-e-md' }, vertical: { start: 'rounded-t-md', end: 'rounded-b-md' } },
|
||||
'rounded-lg': { horizontal: { start: 'rounded-s-lg', end: 'rounded-e-lg' }, vertical: { start: 'rounded-t-lg', end: 'rounded-b-lg' } },
|
||||
'rounded-xl': { horizontal: { start: 'rounded-s-xl', end: 'rounded-e-xl' }, vertical: { start: 'rounded-t-xl', end: 'rounded-b-xl' } },
|
||||
'rounded-2xl': { horizontal: { start: 'rounded-s-2xl', end: 'rounded-e-2xl' }, vertical: { start: 'rounded-t-2xl', end: 'rounded-b-2xl' } },
|
||||
'rounded-3xl': { horizontal: { start: 'rounded-s-3xl', end: 'rounded-e-3xl' }, vertical: { start: 'rounded-t-3xl', end: 'rounded-b-3xl' } },
|
||||
'rounded-full': { horizontal: { start: 'rounded-s-full', end: 'rounded-e-full' }, vertical: { start: 'rounded-t-full', end: 'rounded-b-full' } }
|
||||
}
|
||||
return roundedMap[ui.value.rounded][props.orientation]
|
||||
})
|
||||
const rounded = computed(() => ui.value.orientation[ui.value.rounded][props.orientation])
|
||||
|
||||
useProvideButtonGroup({ orientation: toRef(props, 'orientation'), size: toRef(props, 'size'), ui, rounded })
|
||||
|
||||
|
||||
@@ -61,11 +61,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
ref="trigger"
|
||||
as="div"
|
||||
:disabled="disabled"
|
||||
class="inline-flex w-full"
|
||||
:class="ui.trigger"
|
||||
role="button"
|
||||
@mouseover="onMouseOver"
|
||||
>
|
||||
@@ -18,7 +18,7 @@
|
||||
<div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
|
||||
<Transition appear v-bind="ui.transition">
|
||||
<div>
|
||||
<div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
|
||||
<div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
|
||||
<HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
|
||||
<div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
|
||||
<NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])" custom>
|
||||
@@ -35,7 +35,7 @@
|
||||
<UIcon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
|
||||
<UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
|
||||
|
||||
<span class="truncate">{{ item.label }}</span>
|
||||
<span :class="ui.item.label">{{ item.label }}</span>
|
||||
|
||||
<span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
|
||||
<UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
|
||||
@@ -109,11 +109,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
|
||||
@@ -33,11 +33,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
|
||||
@@ -87,11 +87,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
|
||||
@@ -44,15 +44,15 @@ export default defineComponent({
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'i-heroicons-minus'
|
||||
default: () => meterGroupConfig.default.icon
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof meterGroupConfig & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof meterGroupConfig> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props, { slots }) {
|
||||
@@ -70,21 +70,7 @@ export default defineComponent({
|
||||
|
||||
const children = computed(() => getSlotsChildren(slots))
|
||||
|
||||
const rounded = computed(() => {
|
||||
const roundedMap = {
|
||||
'rounded-none': { left: 'rounded-s-none', right: 'rounded-e-none' },
|
||||
'rounded-sm': { left: 'rounded-s-sm', right: 'rounded-e-sm' },
|
||||
rounded: { left: 'rounded-s', right: 'rounded-e' },
|
||||
'rounded-md': { left: 'rounded-s-md', right: 'rounded-e-md' },
|
||||
'rounded-lg': { left: 'rounded-s-lg', right: 'rounded-e-lg' },
|
||||
'rounded-xl': { left: 'rounded-s-xl', right: 'rounded-e-xl' },
|
||||
'rounded-2xl': { left: 'rounded-s-2xl', right: 'rounded-e-2xl' },
|
||||
'rounded-3xl': { left: 'rounded-s-3xl', right: 'rounded-e-3xl' },
|
||||
'rounded-full': { left: 'rounded-s-full', right: 'rounded-e-full' }
|
||||
}
|
||||
|
||||
return roundedMap[ui.value.rounded]
|
||||
})
|
||||
const rounded = computed(() => ui.value.orientation[ui.value.rounded])
|
||||
|
||||
function clampPercent (value: number, min: number, max: number): number {
|
||||
if (min == max) {
|
||||
@@ -128,7 +114,7 @@ export default defineComponent({
|
||||
vProps.ui.wrapper = node.props?.ui?.wrapper || ''
|
||||
vProps.ui.wrapper += [
|
||||
node.props?.ui?.wrapper,
|
||||
props.ui?.meter?.background || ui.value.background,
|
||||
ui.value.background,
|
||||
ui.value.transition
|
||||
].filter(Boolean).join(' ')
|
||||
|
||||
@@ -153,8 +139,8 @@ export default defineComponent({
|
||||
|
||||
// @ts-expect-error
|
||||
delete(clone.children?.label)
|
||||
delete(clone.props.indicator)
|
||||
delete(clone.props.label)
|
||||
delete(clone.props?.indicator)
|
||||
delete(clone.props?.label)
|
||||
|
||||
return clone
|
||||
}))
|
||||
@@ -198,7 +184,7 @@ export default defineComponent({
|
||||
vNodeSlots[0] = slots.indicator({ percent: percent.value })
|
||||
}
|
||||
|
||||
vNodeSlots[2] = h('ol', { class: 'list-disc list-inside' }, labels.value.map((label, key) => {
|
||||
vNodeSlots[2] = h('ol', { class: ui.value.list }, labels.value.map((label, key) => {
|
||||
const labelClass = computed(() => {
|
||||
return twJoin(
|
||||
uiMeter.value.label.base,
|
||||
|
||||
@@ -39,7 +39,7 @@ export default defineComponent({
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
value: {
|
||||
type: [Number, null, undefined],
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
max: {
|
||||
@@ -73,11 +73,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
@@ -173,7 +173,7 @@ export default defineComponent({
|
||||
return classes.join(' ')
|
||||
}
|
||||
|
||||
const isIndeterminate = computed(() => [undefined, null].includes(props.value))
|
||||
const isIndeterminate = computed(() => props.value === undefined || props.value === null)
|
||||
const isSteps = computed(() => Array.isArray(props.max))
|
||||
|
||||
const realMax = computed(() => {
|
||||
@@ -191,8 +191,8 @@ export default defineComponent({
|
||||
const percent = computed(() => {
|
||||
switch (true) {
|
||||
case props.value < 0: return 0
|
||||
case props.value > realMax.value: return 100
|
||||
default: return (props.value / realMax.value) * 100
|
||||
case props.value > (realMax.value as number): return 100
|
||||
default: return (props.value / (realMax.value as number)) * 100
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div :class="ui.wrapper">
|
||||
<div class="flex items-center h-5">
|
||||
<div :class="ui.container">
|
||||
<input
|
||||
:id="inputId"
|
||||
v-model="toggle"
|
||||
@@ -11,13 +11,12 @@
|
||||
:checked="checked"
|
||||
:indeterminate="indeterminate"
|
||||
type="checkbox"
|
||||
class="form-checkbox"
|
||||
:class="inputClass"
|
||||
v-bind="attrs"
|
||||
@change="onChange"
|
||||
>
|
||||
</div>
|
||||
<div v-if="label || $slots.label" class="ms-3 flex flex-col">
|
||||
<div v-if="label || $slots.label" :class="ui.inner">
|
||||
<label :for="inputId" :class="ui.label">
|
||||
<slot name="label">{{ label }}</slot>
|
||||
<span v-if="required" :class="ui.required">*</span>
|
||||
@@ -100,11 +99,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
@@ -130,11 +129,12 @@ export default defineComponent({
|
||||
const inputClass = computed(() => {
|
||||
return twMerge(twJoin(
|
||||
ui.value.base,
|
||||
ui.value.form,
|
||||
ui.value.rounded,
|
||||
ui.value.background,
|
||||
ui.value.border,
|
||||
ui.value.ring.replaceAll('{color}', color.value),
|
||||
ui.value.color.replaceAll('{color}', color.value)
|
||||
color.value && ui.value.ring.replaceAll('{color}', color.value),
|
||||
color.value && ui.value.color.replaceAll('{color}', color.value)
|
||||
), props.inputClass)
|
||||
})
|
||||
|
||||
|
||||
@@ -247,7 +247,7 @@ async function getValibotError (
|
||||
const result = await schema._parse(state)
|
||||
if (result.issues) {
|
||||
return result.issues.map((issue) => ({
|
||||
path: issue.path.map(p => p.key).join('.'),
|
||||
path: issue.path?.map(p => p.key).join('.') || '',
|
||||
message: issue.message
|
||||
}))
|
||||
}
|
||||
|
||||
@@ -89,11 +89,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
},
|
||||
eagerValidation: {
|
||||
type: Boolean,
|
||||
|
||||
@@ -9,7 +9,6 @@
|
||||
:required="required"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled || loading"
|
||||
class="form-input"
|
||||
:class="inputClass"
|
||||
v-bind="attrs"
|
||||
@input="onInput"
|
||||
@@ -153,11 +152,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
},
|
||||
modelModifiers: {
|
||||
type: Object as PropType<{ trim?: boolean, lazy?: boolean, number?: boolean }>,
|
||||
@@ -199,13 +198,13 @@ export default defineComponent({
|
||||
emitFormInput()
|
||||
}
|
||||
|
||||
const onInput = (event: InputEvent) => {
|
||||
const onInput = (event: Event) => {
|
||||
if (!modelModifiers.value.lazy) {
|
||||
updateInput((event.target as HTMLInputElement).value)
|
||||
}
|
||||
}
|
||||
|
||||
const onChange = (event: InputEvent) => {
|
||||
const onChange = (event: Event) => {
|
||||
const value = (event.target as HTMLInputElement).value
|
||||
|
||||
if (modelModifiers.value.lazy) {
|
||||
@@ -234,6 +233,7 @@ export default defineComponent({
|
||||
|
||||
return twMerge(twJoin(
|
||||
ui.value.base,
|
||||
ui.value.form,
|
||||
rounded.value,
|
||||
ui.value.placeholder,
|
||||
ui.value.size[size.value],
|
||||
@@ -279,9 +279,9 @@ export default defineComponent({
|
||||
const leadingIconClass = computed(() => {
|
||||
return twJoin(
|
||||
ui.value.icon.base,
|
||||
appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
|
||||
color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
|
||||
ui.value.icon.size[size.value],
|
||||
props.loading && 'animate-spin'
|
||||
props.loading && ui.value.icon.loading
|
||||
)
|
||||
})
|
||||
|
||||
@@ -296,9 +296,9 @@ export default defineComponent({
|
||||
const trailingIconClass = computed(() => {
|
||||
return twJoin(
|
||||
ui.value.icon.base,
|
||||
appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
|
||||
color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
|
||||
ui.value.icon.size[size.value],
|
||||
props.loading && !isLeading.value && 'animate-spin'
|
||||
props.loading && !isLeading.value && ui.value.icon.loading
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div :class="ui.wrapper">
|
||||
<div class="flex items-center h-5">
|
||||
<div :class="ui.container">
|
||||
<input
|
||||
:id="inputId"
|
||||
v-model="pick"
|
||||
@@ -9,12 +9,11 @@
|
||||
:value="value"
|
||||
:disabled="disabled"
|
||||
type="radio"
|
||||
class="form-radio"
|
||||
:class="inputClass"
|
||||
v-bind="attrs"
|
||||
>
|
||||
</div>
|
||||
<div v-if="label || $slots.label" class="ms-3 flex flex-col">
|
||||
<div v-if="label || $slots.label" :class="ui.inner">
|
||||
<label :for="inputId" :class="ui.label">
|
||||
<slot name="label">{{ label }}</slot>
|
||||
<span v-if="required" :class="ui.required">*</span>
|
||||
@@ -90,11 +89,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
@@ -102,7 +101,7 @@ export default defineComponent({
|
||||
const { ui, attrs } = useUI('radio', toRef(props, 'ui'), config, toRef(props, 'class'))
|
||||
|
||||
const radioGroup = inject('radio-group', null)
|
||||
const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config)
|
||||
const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config)
|
||||
const inputId = ref(props.id)
|
||||
|
||||
onMounted(() => {
|
||||
@@ -128,10 +127,11 @@ export default defineComponent({
|
||||
const inputClass = computed(() => {
|
||||
return twMerge(twJoin(
|
||||
ui.value.base,
|
||||
ui.value.form,
|
||||
ui.value.background,
|
||||
ui.value.border,
|
||||
ui.value.ring.replaceAll('{color}', color.value),
|
||||
ui.value.color.replaceAll('{color}', color.value)
|
||||
color.value && ui.value.ring.replaceAll('{color}', color.value),
|
||||
color.value && ui.value.color.replaceAll('{color}', color.value)
|
||||
), props.inputClass)
|
||||
})
|
||||
|
||||
|
||||
@@ -83,15 +83,15 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
},
|
||||
uiRadio: {
|
||||
type: Object as PropType<Partial<typeof configRadio & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof configRadio> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
@@ -99,7 +99,7 @@ export default defineComponent({
|
||||
const { ui, attrs } = useUI('radioGroup', toRef(props, 'ui'), config, toRef(props, 'class'))
|
||||
const { ui: uiRadio } = useUI('radio', toRef(props, 'uiRadio'), configRadio)
|
||||
|
||||
const { emitFormChange, color, name } = useFormGroup({ ...props, isFieldset: true }, config)
|
||||
const { emitFormChange, color, name } = useFormGroup(props, config)
|
||||
provide('radio-group', { color, name })
|
||||
|
||||
const onUpdate = (value: any) => {
|
||||
|
||||
@@ -85,11 +85,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
@@ -124,7 +124,7 @@ export default defineComponent({
|
||||
ui.value.base,
|
||||
ui.value.background,
|
||||
ui.value.rounded,
|
||||
ui.value.ring.replaceAll('{color}', color.value),
|
||||
color.value && ui.value.ring.replaceAll('{color}', color.value),
|
||||
ui.value.size[size.value]
|
||||
), props.inputClass)
|
||||
})
|
||||
@@ -133,7 +133,7 @@ export default defineComponent({
|
||||
return twJoin(
|
||||
ui.value.thumb.base,
|
||||
// Intermediate class to allow thumb ring or background color (set to `current`) as it's impossible to safelist with arbitrary values
|
||||
ui.value.thumb.color.replaceAll('{color}', color.value),
|
||||
color.value && ui.value.thumb.color.replaceAll('{color}', color.value),
|
||||
ui.value.thumb.ring,
|
||||
ui.value.thumb.background,
|
||||
ui.value.thumb.size[size.value]
|
||||
@@ -153,7 +153,7 @@ export default defineComponent({
|
||||
return twJoin(
|
||||
ui.value.progress.base,
|
||||
ui.value.progress.rounded,
|
||||
ui.value.progress.background.replaceAll('{color}', color.value),
|
||||
color.value && ui.value.progress.background.replaceAll('{color}', color.value),
|
||||
ui.value.progress.size[size.value]
|
||||
)
|
||||
})
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
:value="modelValue"
|
||||
:required="required"
|
||||
:disabled="disabled || loading"
|
||||
class="form-select"
|
||||
:class="selectClass"
|
||||
v-bind="attrs"
|
||||
@input="onInput"
|
||||
@@ -173,11 +172,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
@@ -190,7 +189,7 @@ export default defineComponent({
|
||||
|
||||
const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
|
||||
|
||||
const onInput = (event: InputEvent) => {
|
||||
const onInput = (event: Event) => {
|
||||
emit('update:modelValue', (event.target as HTMLInputElement).value)
|
||||
}
|
||||
|
||||
@@ -256,6 +255,7 @@ export default defineComponent({
|
||||
|
||||
return twMerge(twJoin(
|
||||
ui.value.base,
|
||||
ui.value.form,
|
||||
rounded.value,
|
||||
ui.value.size[size.value],
|
||||
props.padded ? ui.value.padding[size.value] : 'p-0',
|
||||
@@ -300,9 +300,9 @@ export default defineComponent({
|
||||
const leadingIconClass = computed(() => {
|
||||
return twJoin(
|
||||
ui.value.icon.base,
|
||||
appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
|
||||
color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
|
||||
ui.value.icon.size[size.value],
|
||||
props.loading && 'animate-spin'
|
||||
props.loading && ui.value.icon.loading
|
||||
)
|
||||
})
|
||||
|
||||
@@ -317,9 +317,9 @@ export default defineComponent({
|
||||
const trailingIconClass = computed(() => {
|
||||
return twJoin(
|
||||
ui.value.icon.base,
|
||||
appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
|
||||
color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
|
||||
ui.value.icon.size[size.value],
|
||||
props.loading && !isLeading.value && 'animate-spin'
|
||||
props.loading && !isLeading.value && ui.value.icon.loading
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
v-if="required"
|
||||
:value="modelValue"
|
||||
:required="required"
|
||||
class="absolute inset-0 w-px opacity-0 cursor-default"
|
||||
:class="uiMenu.required"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
>
|
||||
@@ -25,7 +25,7 @@
|
||||
ref="trigger"
|
||||
as="div"
|
||||
role="button"
|
||||
class="inline-flex w-full"
|
||||
:class="uiMenu.trigger"
|
||||
>
|
||||
<slot :open="open" :disabled="disabled" :loading="loading">
|
||||
<button :id="inputId" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
|
||||
@@ -36,9 +36,9 @@
|
||||
</span>
|
||||
|
||||
<slot name="label">
|
||||
<span v-if="multiple && Array.isArray(modelValue) && modelValue.length" class="block truncate">{{ modelValue.length }} selected</span>
|
||||
<span v-else-if="!multiple && modelValue" class="block truncate">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
|
||||
<span v-else class="block truncate" :class="uiMenu.placeholder">{{ placeholder || ' ' }}</span>
|
||||
<span v-if="multiple && Array.isArray(modelValue) && modelValue.length" :class="uiMenu.label">{{ modelValue.length }} selected</span>
|
||||
<span v-else-if="!multiple && modelValue" :class="uiMenu.label">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
|
||||
<span v-else :class="uiMenu.label">{{ placeholder || ' ' }}</span>
|
||||
</slot>
|
||||
|
||||
<span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
|
||||
@@ -53,8 +53,9 @@
|
||||
<div v-if="open" ref="container" :class="[uiMenu.container, uiMenu.width]">
|
||||
<Transition appear v-bind="uiMenu.transition">
|
||||
<div>
|
||||
<div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(uiMenu.arrow)]" />
|
||||
<component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.divide, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
|
||||
<div v-if="popper.arrow" data-popper-arrow :class="Object.values(uiMenu.arrow)" />
|
||||
|
||||
<component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
|
||||
<HComboboxInput
|
||||
v-if="searchable"
|
||||
ref="searchInput"
|
||||
@@ -101,7 +102,7 @@
|
||||
<li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive]">
|
||||
<div :class="uiMenu.option.container">
|
||||
<slot name="option-create" :option="queryOption" :active="active" :selected="selected">
|
||||
<span class="block truncate">Create "{{ queryOption[optionAttribute] }}"</span>
|
||||
<span :class="uiMenu.option.create">Create "{{ queryOption[optionAttribute] }}"</span>
|
||||
</slot>
|
||||
</div>
|
||||
</li>
|
||||
@@ -305,15 +306,15 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
},
|
||||
uiMenu: {
|
||||
type: Object as PropType<Partial<typeof configMenu & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof configMenu> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'open', 'close', 'change'],
|
||||
@@ -339,15 +340,14 @@ export default defineComponent({
|
||||
|
||||
return twMerge(twJoin(
|
||||
ui.value.base,
|
||||
uiMenu.value.select,
|
||||
rounded.value,
|
||||
'text-left cursor-default',
|
||||
ui.value.size[size.value],
|
||||
ui.value.gap[size.value],
|
||||
props.padded ? ui.value.padding[size.value] : 'p-0',
|
||||
variant?.replaceAll('{color}', color.value),
|
||||
(isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
|
||||
(isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value],
|
||||
'inline-flex items-center'
|
||||
(isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
|
||||
), props.selectClass)
|
||||
})
|
||||
|
||||
@@ -386,9 +386,9 @@ export default defineComponent({
|
||||
const leadingIconClass = computed(() => {
|
||||
return twJoin(
|
||||
ui.value.icon.base,
|
||||
appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
|
||||
color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
|
||||
ui.value.icon.size[size.value],
|
||||
props.loading && 'animate-spin'
|
||||
props.loading && ui.value.icon.loading
|
||||
)
|
||||
})
|
||||
|
||||
@@ -403,9 +403,9 @@ export default defineComponent({
|
||||
const trailingIconClass = computed(() => {
|
||||
return twJoin(
|
||||
ui.value.icon.base,
|
||||
appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
|
||||
color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll('{color}', color.value),
|
||||
ui.value.icon.size[size.value],
|
||||
props.loading && !isLeading.value && 'animate-spin'
|
||||
props.loading && !isLeading.value && ui.value.icon.loading
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
@@ -9,7 +9,6 @@
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
class="form-textarea"
|
||||
:class="textareaClass"
|
||||
v-bind="attrs"
|
||||
@input="onInput"
|
||||
@@ -117,11 +116,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
},
|
||||
modelModifiers: {
|
||||
type: Object as PropType<{ trim?: boolean, lazy?: boolean, number?: boolean }>,
|
||||
@@ -180,14 +179,14 @@ export default defineComponent({
|
||||
emitFormInput()
|
||||
}
|
||||
|
||||
const onInput = (event: InputEvent) => {
|
||||
const onInput = (event: Event) => {
|
||||
autoResize()
|
||||
if (!modelModifiers.value.lazy) {
|
||||
updateInput((event.target as HTMLInputElement).value)
|
||||
}
|
||||
}
|
||||
|
||||
const onChange = (event: InputEvent) => {
|
||||
const onChange = (event: Event) => {
|
||||
const value = (event.target as HTMLInputElement).value
|
||||
|
||||
if (modelModifiers.value.lazy) {
|
||||
@@ -227,6 +226,7 @@ export default defineComponent({
|
||||
|
||||
return twMerge(twJoin(
|
||||
ui.value.base,
|
||||
ui.value.form,
|
||||
ui.value.rounded,
|
||||
ui.value.placeholder,
|
||||
ui.value.size[size.value],
|
||||
|
||||
@@ -73,10 +73,6 @@ export default defineComponent({
|
||||
return appConfig.ui.colors.includes(value)
|
||||
}
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
},
|
||||
size: {
|
||||
type: String as PropType<ToggleSize>,
|
||||
default: config.default.size,
|
||||
@@ -84,9 +80,13 @@ export default defineComponent({
|
||||
return Object.keys(config.size).includes(value)
|
||||
}
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
@@ -110,8 +110,8 @@ export default defineComponent({
|
||||
ui.value.base,
|
||||
ui.value.size[props.size],
|
||||
ui.value.rounded,
|
||||
ui.value.ring.replaceAll('{color}', color.value),
|
||||
(active.value ? ui.value.active : ui.value.inactive).replaceAll('{color}', color.value)
|
||||
color.value && ui.value.ring.replaceAll('{color}', color.value),
|
||||
color.value && (active.value ? ui.value.active : ui.value.inactive).replaceAll('{color}', color.value)
|
||||
), props.class)
|
||||
})
|
||||
|
||||
@@ -126,14 +126,14 @@ export default defineComponent({
|
||||
const onIconClass = computed(() => {
|
||||
return twJoin(
|
||||
ui.value.icon.size[props.size],
|
||||
ui.value.icon.on.replaceAll('{color}', color.value)
|
||||
color.value && ui.value.icon.on.replaceAll('{color}', color.value)
|
||||
)
|
||||
})
|
||||
|
||||
const offIconClass = computed(() => {
|
||||
return twJoin(
|
||||
ui.value.icon.size[props.size],
|
||||
ui.value.icon.off.replaceAll('{color}', color.value)
|
||||
color.value && ui.value.icon.off.replaceAll('{color}', color.value)
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
@@ -38,11 +38,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
|
||||
@@ -26,11 +26,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
|
||||
@@ -64,11 +64,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
@@ -91,17 +91,11 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
const borderClass = computed(() => {
|
||||
const typeClass = ({
|
||||
solid: 'border-solid',
|
||||
dotted: 'border-dotted',
|
||||
dashed: 'border-dashed'
|
||||
})[props.type]
|
||||
|
||||
return twJoin(
|
||||
ui.value.border.base,
|
||||
isHorizontal.value ? ui.value.border.horizontal : ui.value.border.vertical,
|
||||
isHorizontal.value ? ui.value.border.size.horizontal : ui.value.border.size.vertical,
|
||||
typeClass
|
||||
ui.value.border.type[props.type]
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
@@ -20,11 +20,11 @@ export default defineComponent({
|
||||
props: {
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
|
||||
@@ -63,11 +63,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
|
||||
@@ -14,14 +14,14 @@
|
||||
<HComboboxInput
|
||||
ref="comboboxInput"
|
||||
:value="query"
|
||||
:class="[ui.input.base, ui.input.size, ui.input.height, ui.input.padding, icon && ui.input.icon.padding]"
|
||||
:class="[ui.input.base, ui.input.size, ui.input.height, ui.input.padding, icon && ui.input.icon.padding, closeButton && ui.input.closeButton.padding]"
|
||||
:placeholder="placeholder"
|
||||
:aria-label="placeholder"
|
||||
autocomplete="off"
|
||||
@change="query = $event.target.value"
|
||||
/>
|
||||
|
||||
<UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" :class="ui.input.closeButton" @click="onClear" />
|
||||
<UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" :class="ui.input.closeButton.base" @click="onClear" />
|
||||
</div>
|
||||
|
||||
<HComboboxOptions
|
||||
@@ -135,7 +135,7 @@ export default defineComponent({
|
||||
},
|
||||
closeButton: {
|
||||
type: Object as PropType<Button>,
|
||||
default: () => config.default.closeButton as Button
|
||||
default: () => config.default.closeButton as unknown as Button
|
||||
},
|
||||
emptyState: {
|
||||
type: Object as PropType<{ icon: string, label: string, queryLabel: string }>,
|
||||
@@ -171,11 +171,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'close'],
|
||||
@@ -217,7 +217,7 @@ export default defineComponent({
|
||||
const commands: Command[] = []
|
||||
for (const group of props.groups) {
|
||||
if (!group.search) {
|
||||
commands.push(...group.commands.map(command => ({ ...command, group: group.key })))
|
||||
commands.push(...(group.commands?.map(command => ({ ...command, group: group.key })) || []))
|
||||
}
|
||||
}
|
||||
return commands
|
||||
@@ -227,46 +227,57 @@ export default defineComponent({
|
||||
|
||||
const { results } = useFuse(query, commands, options)
|
||||
|
||||
function getGroupWithCommands (group: Group, commands: Command[]) {
|
||||
if (!group) {
|
||||
return
|
||||
}
|
||||
|
||||
if (group.filter && typeof group.filter === 'function') {
|
||||
commands = group.filter(query.value, commands)
|
||||
}
|
||||
|
||||
return {
|
||||
...group,
|
||||
commands: commands.slice(0, options.value.resultLimit)
|
||||
}
|
||||
}
|
||||
|
||||
const groups = computed(() => {
|
||||
const groups: Group[] = []
|
||||
|
||||
const groupedCommands: Record<string, typeof results['value']> = {}
|
||||
for (const command of results.value) {
|
||||
groupedCommands[command.item.group] ||= []
|
||||
groupedCommands[command.item.group].push(command)
|
||||
if (!results.value) {
|
||||
return []
|
||||
}
|
||||
for (const key in groupedCommands) {
|
||||
|
||||
const groupedCommands: Record<string, Command[]> = results.value.reduce((acc, command) => {
|
||||
const { item, ...data } = command
|
||||
if (!item.group) {
|
||||
return acc
|
||||
}
|
||||
|
||||
acc[item.group] ||= []
|
||||
acc[item.group].push({ ...item, ...data })
|
||||
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
const groups: Group[] = Object.entries(groupedCommands).map(([key, commands]) => {
|
||||
const group = props.groups.find(group => group.key === key)
|
||||
|
||||
let commands = groupedCommands[key].map((result) => {
|
||||
const { item, ...data } = result
|
||||
|
||||
return {
|
||||
...item,
|
||||
...data
|
||||
} as Command
|
||||
})
|
||||
|
||||
if (group.filter && typeof group.filter === 'function') {
|
||||
commands = group.filter(query.value, commands)
|
||||
if (!group) {
|
||||
return null
|
||||
}
|
||||
|
||||
groups.push({ ...group, commands: commands.slice(0, options.value.resultLimit) })
|
||||
}
|
||||
return getGroupWithCommands(group, commands)
|
||||
}).filter(Boolean)
|
||||
|
||||
for (const group of props.groups) {
|
||||
if (group.search && searchResults.value[group.key]?.length) {
|
||||
let commands = (searchResults.value[group.key] || [])
|
||||
const searchGroups = props.groups.filter(group => !!group.search && searchResults.value[group.key]?.length).map(group => {
|
||||
const commands = (searchResults.value[group.key] || [])
|
||||
|
||||
if (group.filter && typeof group.filter === 'function') {
|
||||
commands = group.filter(query.value, commands)
|
||||
}
|
||||
return getGroupWithCommands(group, [...commands])
|
||||
})
|
||||
|
||||
groups.push({ ...group, commands: commands.slice(0, options.value.resultLimit) })
|
||||
}
|
||||
}
|
||||
|
||||
return groups
|
||||
return [
|
||||
...groups,
|
||||
...searchGroups
|
||||
]
|
||||
})
|
||||
|
||||
const debouncedSearch = useDebounceFn(async () => {
|
||||
@@ -278,6 +289,7 @@ export default defineComponent({
|
||||
isLoading.value = true
|
||||
|
||||
await Promise.all(searchableGroups.map(async (group) => {
|
||||
// @ts-ignore
|
||||
searchResults.value[group.key] = await group.search(query.value)
|
||||
}))
|
||||
|
||||
@@ -304,7 +316,7 @@ export default defineComponent({
|
||||
return twJoin(
|
||||
ui.value.input.icon.base,
|
||||
ui.value.input.icon.size,
|
||||
((props.loading || isLoading.value) && props.loadingIcon) && 'animate-spin'
|
||||
((props.loading || isLoading.value) && props.loadingIcon) && ui.value.input.icon.loading
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
:size="size"
|
||||
:disabled="!canGoFirstOrPrev"
|
||||
:class="[ui.base, ui.rounded]"
|
||||
v-bind="{ ...ui.default.firstButton, ...firstButton }"
|
||||
v-bind="{ ...(ui.default.firstButton || {}), ...firstButton }"
|
||||
:ui="{ rounded: '' }"
|
||||
aria-label="First"
|
||||
@click="onClickFirst"
|
||||
@@ -19,7 +19,7 @@
|
||||
:size="size"
|
||||
:disabled="!canGoFirstOrPrev"
|
||||
:class="[ui.base, ui.rounded]"
|
||||
v-bind="{ ...ui.default.prevButton, ...prevButton }"
|
||||
v-bind="{ ...(ui.default.prevButton || {}), ...prevButton }"
|
||||
:ui="{ rounded: '' }"
|
||||
aria-label="Prev"
|
||||
@click="onClickPrev"
|
||||
@@ -31,7 +31,7 @@
|
||||
:key="`${page}-${index}`"
|
||||
:size="size"
|
||||
:label="`${page}`"
|
||||
v-bind="page === currentPage ? { ...ui.default.activeButton, ...activeButton } : { ...ui.default.inactiveButton, ...inactiveButton }"
|
||||
v-bind="page === currentPage ? { ...(ui.default.activeButton || {}), ...activeButton } : { ...(ui.default.inactiveButton || {}), ...inactiveButton }"
|
||||
:class="[{ 'pointer-events-none': typeof page === 'string', 'z-[1]': page === currentPage }, ui.base, ui.rounded]"
|
||||
:ui="{ rounded: '' }"
|
||||
@click="() => onClickPage(page)"
|
||||
@@ -43,7 +43,7 @@
|
||||
:size="size"
|
||||
:disabled="!canGoLastOrNext"
|
||||
:class="[ui.base, ui.rounded]"
|
||||
v-bind="{ ...ui.default.nextButton, ...nextButton }"
|
||||
v-bind="{ ...(ui.default.nextButton || {}), ...nextButton }"
|
||||
:ui="{ rounded: '' }"
|
||||
aria-label="Next"
|
||||
@click="onClickNext"
|
||||
@@ -56,7 +56,7 @@
|
||||
:size="size"
|
||||
:disabled="!canGoLastOrNext"
|
||||
:class="[ui.base, ui.rounded]"
|
||||
v-bind="{ ...ui.default.lastButton, ...lastButton }"
|
||||
v-bind="{ ...(ui.default.lastButton || {}), ...lastButton }"
|
||||
:ui="{ rounded: '' }"
|
||||
aria-label="Last"
|
||||
@click="onClickLast"
|
||||
@@ -150,11 +150,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
|
||||
@@ -91,11 +91,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'change'],
|
||||
@@ -106,33 +106,37 @@ export default defineComponent({
|
||||
const itemRefs = ref<HTMLElement[]>([])
|
||||
const markerRef = ref<HTMLElement>()
|
||||
|
||||
const selectedIndex = ref(props.modelValue || props.defaultIndex)
|
||||
const selectedIndex = ref<number | undefined>(props.modelValue || props.defaultIndex)
|
||||
|
||||
// Methods
|
||||
|
||||
function calcMarkerSize (index: number) {
|
||||
function calcMarkerSize (index: number | undefined) {
|
||||
// @ts-ignore
|
||||
const tab = itemRefs.value[index]?.$el
|
||||
if (!tab) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!markerRef.value) {
|
||||
return
|
||||
}
|
||||
|
||||
markerRef.value.style.top = `${tab.offsetTop}px`
|
||||
markerRef.value.style.left = `${tab.offsetLeft}px`
|
||||
markerRef.value.style.width = `${tab.offsetWidth}px`
|
||||
markerRef.value.style.height = `${tab.offsetHeight}px`
|
||||
}
|
||||
|
||||
function onChange (index) {
|
||||
function onChange (index: number) {
|
||||
selectedIndex.value = index
|
||||
|
||||
emit('change', index)
|
||||
|
||||
if (props.modelValue !== undefined) {
|
||||
emit('update:modelValue', index)
|
||||
emit('update:modelValue', selectedIndex.value)
|
||||
}
|
||||
|
||||
calcMarkerSize(index)
|
||||
calcMarkerSize(selectedIndex.value)
|
||||
}
|
||||
|
||||
useResizeObserver(listRef, () => {
|
||||
@@ -141,7 +145,8 @@ export default defineComponent({
|
||||
|
||||
watch(() => props.modelValue, (value) => {
|
||||
selectedIndex.value = value
|
||||
calcMarkerSize(value)
|
||||
|
||||
calcMarkerSize(selectedIndex.value)
|
||||
})
|
||||
|
||||
onMounted(() => calcMarkerSize(selectedIndex.value))
|
||||
|
||||
@@ -66,11 +66,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
<div v-if="isOpen" ref="container" :class="wrapperClass" v-bind="attrs">
|
||||
<Transition appear v-bind="ui.transition">
|
||||
<div>
|
||||
<div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
|
||||
<div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
|
||||
|
||||
<div :class="[ui.base, ui.ring, ui.rounded, ui.shadow, ui.background]">
|
||||
<slot />
|
||||
</div>
|
||||
@@ -45,11 +46,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'close'],
|
||||
|
||||
@@ -14,10 +14,7 @@
|
||||
ui.background,
|
||||
ui.ring,
|
||||
ui.shadow,
|
||||
fullscreen ? 'w-screen' : ui.width,
|
||||
fullscreen ? 'h-screen' : ui.height,
|
||||
fullscreen ? 'rounded-none' : ui.rounded,
|
||||
fullscreen ? 'm-0' : ui.margin
|
||||
fullscreen ? ui.fullscreen : [ui.width, ui.height, ui.rounded, ui.margin],
|
||||
]"
|
||||
>
|
||||
<slot />
|
||||
@@ -77,11 +74,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'close'],
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<UIcon v-if="icon" :name="icon" :class="iconClass" />
|
||||
<UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
|
||||
|
||||
<div class="w-0 flex-1">
|
||||
<div :class="ui.inner">
|
||||
<p :class="ui.title">
|
||||
<slot name="title" :title="title">
|
||||
{{ title }}
|
||||
@@ -25,15 +25,15 @@
|
||||
</p>
|
||||
|
||||
<div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
|
||||
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
|
||||
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
|
||||
<template v-if="!description && !$slots.description && actions.length">
|
||||
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
|
||||
<UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
|
||||
</template>
|
||||
|
||||
<UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="onClose" />
|
||||
<UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="onClose" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="timeout" :class="progressClass" :style="progressStyle" />
|
||||
@@ -112,11 +112,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['close'],
|
||||
@@ -129,7 +129,7 @@ export default defineComponent({
|
||||
const wrapperClass = computed(() => {
|
||||
return twMerge(twJoin(
|
||||
ui.value.wrapper,
|
||||
ui.value.background,
|
||||
ui.value.background?.replaceAll('{color}', props.color),
|
||||
ui.value.rounded,
|
||||
ui.value.shadow
|
||||
), props.class)
|
||||
|
||||
@@ -43,11 +43,11 @@ export default defineComponent({
|
||||
props: {
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
ref="trigger"
|
||||
as="div"
|
||||
:disabled="disabled"
|
||||
class="inline-flex w-full"
|
||||
:class="ui.trigger"
|
||||
role="button"
|
||||
@mouseover="onMouseOver"
|
||||
>
|
||||
@@ -22,7 +22,8 @@
|
||||
<div v-if="(open !== undefined) ? open : headlessOpen" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
|
||||
<Transition appear v-bind="ui.transition">
|
||||
<div>
|
||||
<div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
|
||||
<div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
|
||||
|
||||
<HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
|
||||
<slot name="panel" :open="(open !== undefined) ? open : headlessOpen" :close="close" />
|
||||
</HPopoverPanel>
|
||||
@@ -86,11 +87,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['update:open'],
|
||||
|
||||
@@ -63,11 +63,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'close'],
|
||||
@@ -90,10 +90,10 @@ export default defineComponent({
|
||||
|
||||
return {
|
||||
...ui.value.transition,
|
||||
enterFrom: props.side === 'left' ? '-translate-x-full' : 'translate-x-full',
|
||||
enterTo: 'translate-x-0',
|
||||
leaveFrom: 'translate-x-0',
|
||||
leaveTo: props.side === 'left' ? '-translate-x-full' : 'translate-x-full'
|
||||
enterFrom: props.side === 'left' ? ui.value.translate.left : ui.value.translate.right,
|
||||
enterTo: ui.value.translate.base,
|
||||
leaveFrom: ui.value.translate.base,
|
||||
leaveTo: props.side === 'left' ? ui.value.translate.left : ui.value.translate.right
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -7,15 +7,16 @@
|
||||
<div v-if="open && !prevent" ref="container" :class="[ui.container, ui.width]">
|
||||
<Transition appear v-bind="ui.transition">
|
||||
<div>
|
||||
<div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
|
||||
<div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
|
||||
|
||||
<div :class="[ui.base, ui.background, ui.color, ui.rounded, ui.shadow, ui.ring]">
|
||||
<slot name="text">
|
||||
{{ text }}
|
||||
</slot>
|
||||
|
||||
|
||||
<span v-if="shortcuts?.length" :class="ui.shortcuts">
|
||||
<span class="mx-1 text-gray-700 dark:text-gray-200">·</span>
|
||||
<span :class="ui.middot">·</span>
|
||||
|
||||
<UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
|
||||
{{ shortcut }}
|
||||
</Ukbd>
|
||||
@@ -74,11 +75,11 @@ export default defineComponent({
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: undefined
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
|
||||
@@ -40,7 +40,7 @@ export const defineShortcuts = (config: ShortcutsConfig, options: ShortcutsOptio
|
||||
|
||||
let shortcuts: Shortcut[] = []
|
||||
|
||||
const chainedInputs = ref([])
|
||||
const chainedInputs = ref<string[]>([])
|
||||
const clearChainedInput = () => {
|
||||
chainedInputs.value.splice(0, chainedInputs.value.length)
|
||||
}
|
||||
|
||||
@@ -4,12 +4,12 @@ import type { FormEvent, FormEventType, InjectedFormGroupValue } from '../types/
|
||||
import { uid } from '../utils/uid'
|
||||
|
||||
type InputProps = {
|
||||
id?: string | null
|
||||
id?: string
|
||||
size?: string | number | symbol
|
||||
color?: string
|
||||
name?: string
|
||||
isFieldset?: boolean
|
||||
eagerValidation?: boolean
|
||||
legend?: string | null
|
||||
}
|
||||
|
||||
export const useFormGroup = (inputProps?: InputProps, config?: any) => {
|
||||
@@ -20,7 +20,8 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
|
||||
const inputId = ref(inputProps?.id)
|
||||
|
||||
onMounted(() => {
|
||||
inputId.value = inputProps?.isFieldset ? null : inputProps?.id ?? uid()
|
||||
// Remove FormGroup label bindings for RadioGroup elements to avoid label conflicts
|
||||
inputId.value = inputProps?.legend === null || inputProps.legend ? undefined : inputProps?.id ?? uid()
|
||||
|
||||
if (formGroup) {
|
||||
// Updates for="..." attribute on label if inputProps.id is provided
|
||||
@@ -41,17 +42,17 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
|
||||
}
|
||||
|
||||
function emitFormBlur () {
|
||||
emitFormEvent('blur', formGroup?.name.value)
|
||||
emitFormEvent('blur', formGroup?.name.value as string)
|
||||
blurred.value = true
|
||||
}
|
||||
|
||||
function emitFormChange () {
|
||||
emitFormEvent('change', formGroup?.name.value)
|
||||
emitFormEvent('change', formGroup?.name.value as string)
|
||||
}
|
||||
|
||||
const emitFormInput = useDebounceFn(() => {
|
||||
if (blurred.value || formGroup?.eagerValidation.value) {
|
||||
emitFormEvent('input', formGroup?.name.value)
|
||||
emitFormEvent('input', formGroup?.name.value as string)
|
||||
}
|
||||
}, 300)
|
||||
|
||||
@@ -59,7 +60,7 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
|
||||
inputId,
|
||||
name: computed(() => inputProps?.name ?? formGroup?.name.value),
|
||||
size: computed(() => {
|
||||
const formGroupSize = config.size[formGroup?.size.value] ? formGroup?.size.value : null
|
||||
const formGroupSize = config.size[formGroup?.size.value as string] ? formGroup?.size.value : null
|
||||
return inputProps?.size ?? formGroupSize ?? config?.default?.size
|
||||
}),
|
||||
color: computed(() => formGroup?.error?.value ? 'red' : inputProps?.color),
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useAppConfig } from '#imports'
|
||||
import { mergeConfig, omit, get } from '../utils'
|
||||
import type { Strategy } from '../types'
|
||||
|
||||
export const useUI = <T>(key, $ui: Ref<Partial<T & { strategy: Strategy }> | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig: boolean = false) => {
|
||||
export const useUI = <T>(key, $ui?: Ref<Partial<T> & { strategy?: Strategy } | undefined>, $config?: Ref<T> | T, $wrapperClass?: Ref<string>, withAppConfig: boolean = false) => {
|
||||
const $attrs = useAttrs()
|
||||
const appConfig = useAppConfig()
|
||||
|
||||
|
||||
2
src/runtime/types/breadcrumb.d.ts
vendored
2
src/runtime/types/breadcrumb.d.ts
vendored
@@ -4,4 +4,6 @@ export interface BreadcrumbLink extends Link {
|
||||
label: string
|
||||
icon?: string
|
||||
iconClass?: string
|
||||
// FIXME: This is a workaround for `link.to` not being resolved although it extends `NuxtLinkProps`
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
2
src/runtime/types/form.d.ts
vendored
2
src/runtime/types/form.d.ts
vendored
@@ -31,6 +31,6 @@ export interface InjectedFormGroupValue {
|
||||
inputId: Ref<string | undefined>
|
||||
name: Ref<string>
|
||||
size: Ref<string | number | symbol>
|
||||
error: Ref<string | boolean>
|
||||
error: Ref<string | boolean | undefined>
|
||||
eagerValidation: Ref<boolean>
|
||||
}
|
||||
|
||||
2
src/runtime/types/popper.d.ts
vendored
2
src/runtime/types/popper.d.ts
vendored
@@ -1,6 +1,8 @@
|
||||
import type { Placement, PositioningStrategy } from '@popperjs/core'
|
||||
|
||||
export interface PopperOptions {
|
||||
// Workaround for weak types: https://mariusschulz.com/blog/weak-type-detection-in-typescript#workarounds-for-weak-types
|
||||
[key: string]: unknown
|
||||
locked?: boolean
|
||||
overflowPadding?: number
|
||||
offsetDistance?: number
|
||||
|
||||
8
src/runtime/types/utils.d.ts
vendored
8
src/runtime/types/utils.d.ts
vendored
@@ -1,7 +1,7 @@
|
||||
export type Strategy = 'merge' | 'override'
|
||||
|
||||
export type NestedKeyOf<ObjectType extends object> = {
|
||||
[Key in keyof ObjectType]: ObjectType[Key] extends object
|
||||
export type NestedKeyOf<ObjectType extends Record<string, any>> = {
|
||||
[Key in keyof ObjectType]: ObjectType[Key] extends Record<string, any>
|
||||
? NestedKeyOf<ObjectType[Key]>
|
||||
: Key
|
||||
}[keyof ObjectType]
|
||||
@@ -20,9 +20,9 @@ type DeepKey<T, Keys extends string[]> =
|
||||
: T
|
||||
|
||||
export type ExtractDeepKey<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
|
||||
? Result extends object ? keyof Result : never
|
||||
? Result extends Record<string, any> ? keyof Result : never
|
||||
: never
|
||||
|
||||
export type ExtractDeepObject<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
|
||||
? Result extends object ? Result : never
|
||||
? Result extends Record<string, any> ? Result : never
|
||||
: never
|
||||
|
||||
@@ -43,8 +43,8 @@ export default {
|
||||
icon: 'i-heroicons-arrows-up-down-20-solid',
|
||||
trailing: true,
|
||||
square: true,
|
||||
color: 'gray',
|
||||
variant: 'ghost',
|
||||
color: 'gray' as const,
|
||||
variant: 'ghost' as const,
|
||||
class: '-m-1.5'
|
||||
},
|
||||
loadingState: {
|
||||
@@ -56,4 +56,4 @@ export default {
|
||||
label: 'No items.'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,6 +15,6 @@ export default {
|
||||
openIcon: 'i-heroicons-chevron-down-20-solid',
|
||||
closeIcon: '',
|
||||
class: 'mb-1.5 w-full',
|
||||
variant: 'soft'
|
||||
variant: 'soft' as const
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
export default {
|
||||
wrapper: 'w-full relative overflow-hidden',
|
||||
inner: 'w-0 flex-1',
|
||||
title: 'text-sm font-medium',
|
||||
description: 'mt-1 text-sm leading-4 opacity-90',
|
||||
actions: 'flex items-center gap-2 mt-3 flex-shrink-0',
|
||||
@@ -12,7 +13,7 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
base: 'flex-shrink-0 self-center',
|
||||
size: 'md'
|
||||
size: 'md' as const
|
||||
},
|
||||
color: {
|
||||
white: {
|
||||
@@ -31,9 +32,9 @@ export default {
|
||||
icon: null,
|
||||
closeButton: null,
|
||||
actionButton: {
|
||||
size: 'xs',
|
||||
color: 'primary',
|
||||
variant: 'link'
|
||||
size: 'xs' as const,
|
||||
color: 'primary' as const,
|
||||
variant: 'link' as const
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,9 @@ export default {
|
||||
base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0',
|
||||
font: 'font-medium',
|
||||
rounded: 'rounded-md',
|
||||
truncate: 'text-left break-all line-clamp-1',
|
||||
block: 'w-full flex justify-center items-center',
|
||||
inline: 'inline-flex items-center',
|
||||
size: {
|
||||
'2xs': 'text-xs',
|
||||
xs: 'text-xs',
|
||||
@@ -58,6 +61,7 @@ export default {
|
||||
},
|
||||
icon: {
|
||||
base: 'flex-shrink-0',
|
||||
loading: 'animate-spin',
|
||||
size: {
|
||||
'2xs': 'h-4 w-4',
|
||||
xs: 'h-4 w-4',
|
||||
@@ -73,4 +77,4 @@ export default {
|
||||
color: 'primary',
|
||||
loadingIcon: 'i-heroicons-arrow-path-20-solid'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,5 +4,16 @@ export default {
|
||||
vertical: 'inline-flex flex-col -space-y-px'
|
||||
},
|
||||
rounded: 'rounded-md',
|
||||
shadow: 'shadow-sm'
|
||||
}
|
||||
shadow: 'shadow-sm',
|
||||
orientation: {
|
||||
'rounded-none': { horizontal: { start: 'rounded-s-none', end: 'rounded-e-none' }, vertical: { start: 'rounded-t-none', end: 'rounded-b-none' } },
|
||||
'rounded-sm': { horizontal: { start: 'rounded-s-sm', end: 'rounded-e-sm' }, vertical: { start: 'rounded-t-sm', end: 'rounded-b-sm' } },
|
||||
rounded: { horizontal: { start: 'rounded-s', end: 'rounded-e' }, vertical: { start: 'rounded-t', end: 'rounded-b' } },
|
||||
'rounded-md': { horizontal: { start: 'rounded-s-md', end: 'rounded-e-md' }, vertical: { start: 'rounded-t-md', end: 'rounded-b-md' } },
|
||||
'rounded-lg': { horizontal: { start: 'rounded-s-lg', end: 'rounded-e-lg' }, vertical: { start: 'rounded-t-lg', end: 'rounded-b-lg' } },
|
||||
'rounded-xl': { horizontal: { start: 'rounded-s-xl', end: 'rounded-e-xl' }, vertical: { start: 'rounded-t-xl', end: 'rounded-b-xl' } },
|
||||
'rounded-2xl': { horizontal: { start: 'rounded-s-2xl', end: 'rounded-e-2xl' }, vertical: { start: 'rounded-t-2xl', end: 'rounded-b-2xl' } },
|
||||
'rounded-3xl': { horizontal: { start: 'rounded-s-3xl', end: 'rounded-e-3xl' }, vertical: { start: 'rounded-t-3xl', end: 'rounded-b-3xl' } },
|
||||
'rounded-full': { horizontal: { start: 'rounded-s-full', end: 'rounded-e-full' }, vertical: { start: 'rounded-t-full', end: 'rounded-b-full' } }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import _popperArrow from '../_popperArrow'
|
||||
import { arrow } from '../popper'
|
||||
|
||||
export default {
|
||||
wrapper: 'relative inline-flex text-left rtl:text-right',
|
||||
container: 'z-20 group',
|
||||
trigger: 'inline-flex w-full',
|
||||
width: 'w-48',
|
||||
height: '',
|
||||
background: 'bg-white dark:bg-gray-800',
|
||||
@@ -27,8 +28,9 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
base: 'flex-shrink-0',
|
||||
size: '3xs'
|
||||
size: '3xs' as const
|
||||
},
|
||||
label: 'truncate',
|
||||
shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto'
|
||||
},
|
||||
// Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
|
||||
@@ -45,8 +47,8 @@ export default {
|
||||
strategy: 'fixed'
|
||||
},
|
||||
arrow: {
|
||||
..._popperArrow,
|
||||
...arrow,
|
||||
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
|
||||
background: 'before:bg-white dark:before:bg-gray-700'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,20 @@ export default {
|
||||
transition: 'transition-all',
|
||||
rounded: 'rounded-full',
|
||||
shadow: '',
|
||||
list: 'list-disc list-inside',
|
||||
orientation: {
|
||||
'rounded-none': { left: 'rounded-s-none', right: 'rounded-e-none' },
|
||||
'rounded-sm': { left: 'rounded-s-sm', right: 'rounded-e-sm' },
|
||||
rounded: { left: 'rounded-s', right: 'rounded-e' },
|
||||
'rounded-md': { left: 'rounded-s-md', right: 'rounded-e-md' },
|
||||
'rounded-lg': { left: 'rounded-s-lg', right: 'rounded-e-lg' },
|
||||
'rounded-xl': { left: 'rounded-s-xl', right: 'rounded-e-xl' },
|
||||
'rounded-2xl': { left: 'rounded-s-2xl', right: 'rounded-e-2xl' },
|
||||
'rounded-3xl': { left: 'rounded-s-3xl', right: 'rounded-e-3xl' },
|
||||
'rounded-full': { left: 'rounded-s-full', right: 'rounded-e-full' }
|
||||
},
|
||||
default: {
|
||||
size: 'md'
|
||||
size: 'md',
|
||||
icon: 'i-heroicons-minus-20-solid'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
export default {
|
||||
wrapper: 'relative flex items-start',
|
||||
container: 'flex items-center h-5',
|
||||
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',
|
||||
form: 'form-checkbox',
|
||||
rounded: 'rounded',
|
||||
color: 'text-{color}-500 dark:text-{color}-400',
|
||||
background: 'bg-white dark:bg-gray-900',
|
||||
border: 'border border-gray-300 dark:border-gray-700',
|
||||
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',
|
||||
inner: 'ms-3 flex flex-col',
|
||||
label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
|
||||
required: 'text-sm text-red-500 dark:text-red-400',
|
||||
help: 'text-sm text-gray-500 dark:text-gray-400',
|
||||
default: {
|
||||
color: 'primary'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
export default {
|
||||
wrapper: 'relative',
|
||||
base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
|
||||
form: 'form-input',
|
||||
rounded: 'rounded-md',
|
||||
placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
|
||||
size: {
|
||||
@@ -62,6 +63,7 @@ export default {
|
||||
icon: {
|
||||
base: 'flex-shrink-0 text-gray-400 dark:text-gray-500',
|
||||
color: 'text-{color}-500 dark:text-{color}-400',
|
||||
loading: 'animate-spin',
|
||||
size: {
|
||||
'2xs': 'h-4 w-4',
|
||||
xs: 'h-4 w-4',
|
||||
@@ -101,4 +103,4 @@ export default {
|
||||
variant: 'outline',
|
||||
loadingIcon: 'i-heroicons-arrow-path-20-solid'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
export default {
|
||||
wrapper: 'relative flex items-start',
|
||||
container: 'flex items-center h-5',
|
||||
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',
|
||||
form: 'form-radio',
|
||||
color: 'text-{color}-500 dark:text-{color}-400',
|
||||
background: 'bg-white dark:bg-gray-900',
|
||||
border: 'border border-gray-300 dark:border-gray-700',
|
||||
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',
|
||||
inner: 'ms-3 flex flex-col',
|
||||
label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
|
||||
required: 'text-sm text-red-500 dark:text-red-400',
|
||||
help: 'text-sm text-gray-500 dark:text-gray-400',
|
||||
default: {
|
||||
color: 'primary'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import input from './input'
|
||||
|
||||
export default {
|
||||
...input,
|
||||
form: 'form-select',
|
||||
placeholder: 'text-gray-900 dark:text-white',
|
||||
default: {
|
||||
size: 'sm',
|
||||
@@ -10,4 +11,4 @@ export default {
|
||||
loadingIcon: 'i-heroicons-arrow-path-20-solid',
|
||||
trailingIcon: 'i-heroicons-chevron-down-20-solid'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import _popperArrow from '../_popperArrow'
|
||||
import { arrow } from '../popper'
|
||||
|
||||
export default {
|
||||
container: 'z-20 group',
|
||||
trigger: 'inline-flex w-full',
|
||||
select: 'inline-flex items-center text-left cursor-default',
|
||||
width: 'w-full',
|
||||
height: 'max-h-60',
|
||||
base: 'relative focus:outline-none overflow-y-auto scroll-py-1',
|
||||
@@ -11,6 +13,8 @@ export default {
|
||||
padding: 'p-1',
|
||||
ring: 'ring-1 ring-gray-200 dark:ring-gray-700',
|
||||
input: 'block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none',
|
||||
required: 'absolute inset-0 w-px opacity-0 cursor-default',
|
||||
label: 'block truncate',
|
||||
option: {
|
||||
base: 'cursor-default select-none relative flex items-center justify-between gap-1',
|
||||
rounded: 'rounded-md',
|
||||
@@ -23,6 +27,7 @@ export default {
|
||||
selected: 'pe-7',
|
||||
disabled: 'cursor-not-allowed opacity-50',
|
||||
empty: 'text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5',
|
||||
create: 'block truncate',
|
||||
icon: {
|
||||
base: 'flex-shrink-0 h-4 w-4',
|
||||
active: 'text-gray-900 dark:text-white',
|
||||
@@ -35,7 +40,7 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
base: 'flex-shrink-0',
|
||||
size: '3xs'
|
||||
size: '3xs' as const
|
||||
},
|
||||
chip: {
|
||||
base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
|
||||
@@ -55,8 +60,8 @@ export default {
|
||||
clearOnClose: false
|
||||
},
|
||||
arrow: {
|
||||
..._popperArrow,
|
||||
...arrow,
|
||||
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
|
||||
background: 'before:bg-white dark:before:bg-gray-700'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,9 +2,10 @@ import input from './input'
|
||||
|
||||
export default {
|
||||
...input,
|
||||
form: 'form-textarea',
|
||||
default: {
|
||||
size: 'sm',
|
||||
color: 'white',
|
||||
variant: 'outline'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,6 +16,11 @@ export default {
|
||||
size: {
|
||||
horizontal: 'border-t',
|
||||
vertical: 'border-s'
|
||||
},
|
||||
type: {
|
||||
solid: 'border-solid',
|
||||
dotted: 'border-dotted',
|
||||
dashed: 'border-dashed'
|
||||
}
|
||||
},
|
||||
icon: {
|
||||
@@ -23,7 +28,7 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
base: 'flex-shrink-0',
|
||||
size: '2xs'
|
||||
size: '2xs' as const
|
||||
},
|
||||
label: 'text-sm'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,6 +14,6 @@ export default {
|
||||
active: 'text-primary-500 dark:text-primary-400',
|
||||
inactive: ' hover:text-gray-700 dark:hover:text-gray-200',
|
||||
default: {
|
||||
divider: 'i-heroicons-chevron-right-20-solid'
|
||||
divider: 'i-heroicons-chevron-right-20-solid rtl:i-heroicons-chevron-left-20-solid'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,10 +9,14 @@ export default {
|
||||
size: 'sm:text-sm',
|
||||
icon: {
|
||||
base: 'pointer-events-none absolute start-4 text-gray-400 dark:text-gray-500',
|
||||
loading: 'animate-spin',
|
||||
size: 'h-4 w-4',
|
||||
padding: 'ps-10'
|
||||
},
|
||||
closeButton: 'absolute end-4'
|
||||
closeButton: {
|
||||
base: 'absolute end-4',
|
||||
padding: 'pe-10'
|
||||
}
|
||||
},
|
||||
emptyState: {
|
||||
wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',
|
||||
@@ -64,4 +68,4 @@ export default {
|
||||
closeButton: null,
|
||||
selectedIcon: 'i-heroicons-check-20-solid'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,30 +5,30 @@ export default {
|
||||
default: {
|
||||
size: 'sm',
|
||||
activeButton: {
|
||||
color: 'primary'
|
||||
color: 'primary' as const
|
||||
},
|
||||
inactiveButton: {
|
||||
color: 'white'
|
||||
color: 'white' as const
|
||||
},
|
||||
firstButton: {
|
||||
color: 'white',
|
||||
color: 'white' as const,
|
||||
class: 'rtl:[&_span:first-child]:rotate-180',
|
||||
icon: 'i-heroicons-chevron-double-left-20-solid'
|
||||
},
|
||||
lastButton: {
|
||||
color: 'white',
|
||||
color: 'white' as const,
|
||||
class: 'rtl:[&_span:last-child]:rotate-180',
|
||||
icon: 'i-heroicons-chevron-double-right-20-solid'
|
||||
},
|
||||
prevButton: {
|
||||
color: 'white',
|
||||
color: 'white' as const,
|
||||
class: 'rtl:[&_span:first-child]:rotate-180',
|
||||
icon: 'i-heroicons-chevron-left-20-solid'
|
||||
},
|
||||
nextButton: {
|
||||
color: 'white',
|
||||
color: 'white' as const,
|
||||
class: 'rtl:[&_span:last-child]:rotate-180',
|
||||
icon: 'i-heroicons-chevron-right-20-solid'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,11 +17,11 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
base: 'flex-shrink-0',
|
||||
size: '3xs'
|
||||
size: '3xs' as const
|
||||
},
|
||||
badge: {
|
||||
base: 'relative ms-auto inline-block py-0.5 px-2 text-xs rounded-md -me-1 -my-0.5',
|
||||
active: 'bg-white dark:bg-gray-900',
|
||||
inactive: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white group-hover:bg-white dark:group-hover:bg-gray-900'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import arrow from '../_popperArrow'
|
||||
import { arrow } from '../popper'
|
||||
|
||||
export default {
|
||||
wrapper: 'relative',
|
||||
@@ -23,4 +23,4 @@ export default {
|
||||
scroll: false
|
||||
},
|
||||
arrow
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ export default {
|
||||
container: 'flex min-h-full items-end sm:items-center justify-center text-center',
|
||||
padding: 'p-4 sm:p-0',
|
||||
margin: 'sm:my-8',
|
||||
base: 'relative text-left rtl:text-right overflow-hidden w-full flex flex-col',
|
||||
base: 'relative text-left rtl:text-right overflow-hidden flex flex-col',
|
||||
overlay: {
|
||||
base: 'fixed inset-0 transition-opacity',
|
||||
background: 'bg-gray-200/75 dark:bg-gray-800/75',
|
||||
@@ -22,8 +22,9 @@ export default {
|
||||
ring: '',
|
||||
rounded: 'rounded-lg',
|
||||
shadow: 'shadow-xl',
|
||||
width: 'sm:max-w-lg',
|
||||
width: 'w-full sm:max-w-lg',
|
||||
height: '',
|
||||
fullscreen: 'w-screen h-screen',
|
||||
// Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
|
||||
transition: {
|
||||
enter: 'ease-out duration-300',
|
||||
@@ -33,4 +34,4 @@ export default {
|
||||
leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
|
||||
leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
export default {
|
||||
wrapper: 'w-full pointer-events-auto',
|
||||
container: 'relative overflow-hidden',
|
||||
inner: 'w-0 flex-1',
|
||||
title: 'text-sm font-medium text-gray-900 dark:text-white',
|
||||
description: 'mt-1 text-sm leading-4 text-gray-500 dark:text-gray-400',
|
||||
actions: 'flex items-center gap-2 mt-3 flex-shrink-0',
|
||||
@@ -37,13 +38,13 @@ export default {
|
||||
timeout: 5000,
|
||||
closeButton: {
|
||||
icon: 'i-heroicons-x-mark-20-solid',
|
||||
color: 'gray',
|
||||
variant: 'link',
|
||||
color: 'gray' as const,
|
||||
variant: 'link' as const,
|
||||
padded: false
|
||||
},
|
||||
actionButton: {
|
||||
size: 'xs',
|
||||
color: 'white'
|
||||
size: 'xs' as const,
|
||||
color: 'white' as const
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import arrow from '../_popperArrow'
|
||||
import { arrow } from '../popper'
|
||||
|
||||
export default {
|
||||
wrapper: 'relative',
|
||||
container: 'z-50 group',
|
||||
trigger: 'inline-flex w-full',
|
||||
width: '',
|
||||
background: 'bg-white dark:bg-gray-900',
|
||||
shadow: 'shadow-lg',
|
||||
|
||||
@@ -20,9 +20,14 @@ export default {
|
||||
padding: '',
|
||||
shadow: 'shadow-xl',
|
||||
width: 'w-screen max-w-md',
|
||||
translate: {
|
||||
base: 'translate-x-0',
|
||||
left: '-translate-x-full',
|
||||
right: 'translate-x-full'
|
||||
},
|
||||
// Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
|
||||
transition: {
|
||||
enter: 'transform transition ease-in-out duration-300',
|
||||
leave: 'transform transition ease-in-out duration-200'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import arrow from '../_popperArrow'
|
||||
import { arrow } from '../popper'
|
||||
|
||||
export default {
|
||||
wrapper: 'relative inline-flex',
|
||||
@@ -11,6 +11,7 @@ export default {
|
||||
ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
|
||||
base: '[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative',
|
||||
shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5',
|
||||
middot: 'mx-1 text-gray-700 dark:text-gray-200',
|
||||
// Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
|
||||
transition: {
|
||||
enterActiveClass: 'transition ease-out duration-200',
|
||||
@@ -24,4 +25,4 @@ export default {
|
||||
strategy: 'fixed'
|
||||
},
|
||||
arrow
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
export default {
|
||||
base: 'before:w-2 before:h-2',
|
||||
export const arrow = {
|
||||
base: 'invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2',
|
||||
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-800',
|
||||
rounded: 'before:rounded-sm',
|
||||
background: 'before:bg-gray-200 dark:before:bg-gray-800',
|
||||
shadow: 'before:shadow',
|
||||
placement: 'group-data-[popper-placement*="right"]:-left-1 group-data-[popper-placement*="left"]:-right-1 group-data-[popper-placement*="top"]:-bottom-1 group-data-[popper-placement*="bottom"]:-top-1'
|
||||
}
|
||||
}
|
||||
@@ -9,7 +9,7 @@ const customTwMerge = extendTailwindMerge({
|
||||
})
|
||||
|
||||
const defuTwMerge = createDefu((obj, key, value, namespace) => {
|
||||
if (namespace !== 'default' && typeof obj[key] === 'string' && typeof value === 'string' && obj[key] && value) {
|
||||
if (namespace !== 'default' && !namespace.startsWith('default.') && typeof obj[key] === 'string' && typeof value === 'string' && obj[key] && value) {
|
||||
// @ts-ignore
|
||||
obj[key] = customTwMerge(obj[key], value)
|
||||
return true
|
||||
|
||||
@@ -5,13 +5,13 @@ import { join } from 'path'
|
||||
|
||||
// TODO: fix these anys
|
||||
async function getTailwindCSSConfig (overrides: any = {}): Promise<[any, any]> {
|
||||
overrides.modules = [ module ]
|
||||
overrides.modules = [module]
|
||||
overrides.ssr = overrides.ssr ?? false
|
||||
overrides.hooks = overrides.hooks ?? {}
|
||||
return new Promise((resolve) => {
|
||||
overrides.hooks['tailwindcss:resolvedConfig'] = async (config) => {
|
||||
resolve([config, nuxt])
|
||||
}
|
||||
overrides.hooks['tailwindcss:resolvedConfig'] = async (config: any) => {
|
||||
resolve([config, nuxt])
|
||||
}
|
||||
const nuxt = loadNuxt({
|
||||
cwd: join(process.cwd(), 'fixtures', 'empty'),
|
||||
dev: false,
|
||||
@@ -23,7 +23,7 @@ async function getTailwindCSSConfig (overrides: any = {}): Promise<[any, any]> {
|
||||
describe('nuxt', () => {
|
||||
it('should add plugins and modules to nuxt', async () => {
|
||||
const [, lnuxt] = await getTailwindCSSConfig()
|
||||
await lnuxt.then((nuxt) => {
|
||||
await lnuxt.then((nuxt: { options: { plugins: any; _requiredModules: any; appConfig: { ui: any } }; close: () => void }) => {
|
||||
expect(nuxt.options.plugins).toContainEqual(
|
||||
expect.objectContaining({
|
||||
src: expect.stringContaining('plugins/colors'),
|
||||
@@ -116,7 +116,7 @@ describe('tailwindcss config', () => {
|
||||
negate = false
|
||||
}
|
||||
|
||||
await _nuxt.then((n) => {
|
||||
await _nuxt.then((n: { close: () => void }) => {
|
||||
n.close()
|
||||
})
|
||||
})
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user