mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-16 04:58:12 +01:00
Compare commits
2 Commits
v2.21.0
...
issue-1987
| Author | SHA1 | Date | |
|---|---|---|---|
|
3aaf2f99bf | ||
|
|
c0e4a4fe5e |
15
.github/ISSUE_TEMPLATE/bug-v3.yml
vendored
15
.github/ISSUE_TEMPLATE/bug-v3.yml
vendored
@@ -5,8 +5,8 @@ body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
> [!IMPORTANT]
|
||||
> As Nuxt UI v3 is currently in alpha, we recommend thorough testing before using it in production environments. We're actively working on stabilization and welcome feedback from early adopters to improve the library.
|
||||
> [!IMPORTANT]
|
||||
> As Nuxt UI v3 is currently in alpha, we recommend thorough testing before using it in production environments. We're actively working on stabilization and welcome feedback from early adopters to improve the library.
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
@@ -29,20 +29,11 @@ body:
|
||||
- Build Modules: `-`
|
||||
validations:
|
||||
required: true
|
||||
- type: dropdown
|
||||
id: package
|
||||
attributes:
|
||||
label: Is this bug related to Nuxt or Vue?
|
||||
options:
|
||||
- Nuxt
|
||||
- Vue
|
||||
validations:
|
||||
required: true
|
||||
- type: input
|
||||
id: version
|
||||
attributes:
|
||||
label: Version
|
||||
placeholder: v3.0.0-alpha.x
|
||||
placeholder: v3.0.0-alpha.5
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
|
||||
2
.github/ISSUE_TEMPLATE/feature-request.yml
vendored
2
.github/ISSUE_TEMPLATE/feature-request.yml
vendored
@@ -12,7 +12,7 @@ body:
|
||||
label: For what version of Nuxt UI are you suggesting this?
|
||||
options:
|
||||
- v2.x
|
||||
- v3.0.0-alpha.x
|
||||
- v3-alpha
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
|
||||
2
.github/ISSUE_TEMPLATE/question.yml
vendored
2
.github/ISSUE_TEMPLATE/question.yml
vendored
@@ -12,7 +12,7 @@ body:
|
||||
label: For what version of Nuxt UI are you asking this question?
|
||||
options:
|
||||
- v2.x
|
||||
- v3.0.0-alpha.x
|
||||
- v3-alpha
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
|
||||
45
CHANGELOG.md
45
CHANGELOG.md
@@ -1,50 +1,5 @@
|
||||
# Changelog
|
||||
|
||||
## [2.21.0](https://github.com/nuxt/ui/compare/v2.20.0...v2.21.0) (2025-01-14)
|
||||
|
||||
### Features
|
||||
|
||||
* **module:** handle `tailwindMerge` config from `app.config` ([#2902](https://github.com/nuxt/ui/issues/2902)) ([ea15e21](https://github.com/nuxt/ui/commit/ea15e21cdcba00e21302415829113e8c6def8a6e))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **Table:** `v-model` causing first column missing ([#2890](https://github.com/nuxt/ui/issues/2890)) ([d573fb6](https://github.com/nuxt/ui/commit/d573fb636f7f749ce95b93c5fb1ae2a053eeeeb0))
|
||||
* **Table:** remove `[@select](https://github.com/select)` event on checkbox ([#3042](https://github.com/nuxt/ui/issues/3042)) ([d9d4f19](https://github.com/nuxt/ui/commit/d9d4f1915aac586ae1abf3ebe67ca9aff65b9be0))
|
||||
* **tailwind:** use mjs template ([#2945](https://github.com/nuxt/ui/issues/2945)) ([8cf9f27](https://github.com/nuxt/ui/commit/8cf9f27d537bad5ffe4e136f52ff71548a451c5f))
|
||||
|
||||
## [2.20.0](https://github.com/nuxt/ui/compare/v2.19.2...v2.20.0) (2024-12-09)
|
||||
|
||||
### ⚠ BREAKING CHANGES
|
||||
|
||||
* **Form:** resolve async validation in yup & issue directly mutate state (#2701)
|
||||
|
||||
### Features
|
||||
|
||||
* **Accordion:** add `close` event ([#2750](https://github.com/nuxt/ui/issues/2750)) ([419a24f](https://github.com/nuxt/ui/commit/419a24f7034cefda2c6669f3c26742552e500f63))
|
||||
* **Badge:** handle `icon` prop ([#2594](https://github.com/nuxt/ui/issues/2594)) ([0d1a76e](https://github.com/nuxt/ui/commit/0d1a76e3c69e08534abb295b96548e67cfbea00c))
|
||||
* **InputMenu/SelectMenu:** add support for `dot notation` in `by` prop ([#2607](https://github.com/nuxt/ui/issues/2607)) ([53df9d9](https://github.com/nuxt/ui/commit/53df9d9a8cd6850803bdafc7ef6efe4e7404d334))
|
||||
* **Link:** allow partial query match for `activeClass` ([#2663](https://github.com/nuxt/ui/issues/2663)) ([03e24f4](https://github.com/nuxt/ui/commit/03e24f45836bdddd94b30cbaecc2288a78b56b0b))
|
||||
* **Notification:** add `pauseTimeoutOnHover` prop ([#2661](https://github.com/nuxt/ui/issues/2661)) ([11b8c3d](https://github.com/nuxt/ui/commit/11b8c3d9db1ec62b1c3557703c7ab5c99cb42df5))
|
||||
* **Table:** add contextmenu handling to table rows ([#2283](https://github.com/nuxt/ui/issues/2283)) ([c9e6256](https://github.com/nuxt/ui/commit/c9e6256e7f2c06da8bfda13700f56f6994e76eab))
|
||||
* **Table:** add custom `[@select](https://github.com/select):all` event ([#2581](https://github.com/nuxt/ui/issues/2581)) ([ac323c4](https://github.com/nuxt/ui/commit/ac323c4cccd930f2cd8c1f54b325bd509acd40bf))
|
||||
* **Table:** allow dynamically render `checkbox` ([#2549](https://github.com/nuxt/ui/issues/2549)) ([d6daf46](https://github.com/nuxt/ui/commit/d6daf466ace42b828151c45b18cd47179e85d66d))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **AvatarGroup/ButtonGroup/MeterGroup:** allow deeply partial `ui` config ([#2542](https://github.com/nuxt/ui/issues/2542)) ([bf58086](https://github.com/nuxt/ui/commit/bf580863af11d6a1a4c6c6774b44ec37b082e933))
|
||||
* **Carousel:** wrong `ui` type with `strategy` ([07ef771](https://github.com/nuxt/ui/commit/07ef771b17c72e275508a273371454a5e8a62257))
|
||||
* **components:** replace `as const` with correct type in config ([#2652](https://github.com/nuxt/ui/issues/2652)) ([51c8b8e](https://github.com/nuxt/ui/commit/51c8b8e3e59d7eceff72625650a199fcf7c6feca))
|
||||
* **date-picker:** undefined `dayIndex` ([#2545](https://github.com/nuxt/ui/issues/2545)) ([ce955d2](https://github.com/nuxt/ui/commit/ce955d24f1dfd222e87ce88428c0612c3f13cd50))
|
||||
* **Form:** resolve async validation in yup & issue directly mutate state ([#2701](https://github.com/nuxt/ui/issues/2701)) ([f3632dd](https://github.com/nuxt/ui/commit/f3632ddee511f0fccb24d4fc37403421e84ffdae))
|
||||
* **Form:** use parsed value from `joi` instead of original state ([#2587](https://github.com/nuxt/ui/issues/2587)) ([acecff4](https://github.com/nuxt/ui/commit/acecff40ec0156e45b4934c5d10c4dfa7c135f8e))
|
||||
* **InputMenu/SelectMenu:** use `by` prop to compare objects & support dot notation in `value-attribute` ([#2566](https://github.com/nuxt/ui/issues/2566)) ([7154254](https://github.com/nuxt/ui/commit/7154254ac22830f651ec200f7f3af2f5577f2de0))
|
||||
* **Link:** `exactQuery` prop type ([#2781](https://github.com/nuxt/ui/issues/2781)) ([4cde571](https://github.com/nuxt/ui/commit/4cde571e387775a9b12759f6f8c99117c84cbcff))
|
||||
* **Notification:** element renders even when no `notification` is present ([#2561](https://github.com/nuxt/ui/issues/2561)) ([d4e408c](https://github.com/nuxt/ui/commit/d4e408cfd8e2ef26021519f2f30f57e9120e1939))
|
||||
* **Table:** data outdated when rows change ([#2600](https://github.com/nuxt/ui/issues/2600)) ([b23f2de](https://github.com/nuxt/ui/commit/b23f2decfc9607555a315d0d087d0a042f03a938))
|
||||
* **Table:** missing type on props `loadingState` ([#2551](https://github.com/nuxt/ui/issues/2551)) ([6e66990](https://github.com/nuxt/ui/commit/6e66990372ef6bd7c109a64c753d9b50e96a450b))
|
||||
* **Table:** prevent `onClick` while blocking element ([#2592](https://github.com/nuxt/ui/issues/2592)) ([9703786](https://github.com/nuxt/ui/commit/97037864b39749db228fa5f51981f19e4a9c29dd))
|
||||
* **types:** improve `DeepPartial` type for App Config ([#2621](https://github.com/nuxt/ui/issues/2621)) ([976b03f](https://github.com/nuxt/ui/commit/976b03f241ef9626a6338685e43c844a8b3953fd))
|
||||
|
||||
## [2.19.2](https://github.com/nuxt/ui/compare/v2.19.1...v2.19.2) (2024-11-05)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
[](https://ui.nuxt.com)
|
||||
[](https://ui.nuxt.com)
|
||||
|
||||
# Nuxt UI
|
||||
|
||||
@@ -20,7 +20,7 @@ Its goal is to provide everything related to UI when building a Nuxt app. This i
|
||||
- Keyboard shortcuts
|
||||
- Bundled icons
|
||||
- Fully typed
|
||||
- [Figma Kit](https://www.figma.com/community/file/1436401057300493073)
|
||||
- [Figma Kit](https://www.figma.com/community/file/1288455405058138934)
|
||||
|
||||
Read more on [ui.nuxt.com](https://ui.nuxt.com)
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div>
|
||||
<NuxtLoadingIndicator />
|
||||
|
||||
<!-- <Banner v-if="!$route.path.startsWith('/examples')" /> -->
|
||||
<Banner v-if="!$route.path.startsWith('/examples')" />
|
||||
|
||||
<Header v-if="!$route.path.startsWith('/examples')" :links="links" />
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
const id = 'nuxt-ui-banner-3'
|
||||
const to = '/pro/pricing'
|
||||
const id = 'nuxt-ui-banner-2'
|
||||
const to = 'https://ui3.nuxt.dev'
|
||||
|
||||
const hideBanner = () => {
|
||||
localStorage.setItem(id, 'true')
|
||||
@@ -28,8 +28,9 @@ if (import.meta.server) {
|
||||
<NuxtLink
|
||||
v-if="to"
|
||||
:to="to"
|
||||
target="_blank"
|
||||
class="focus:outline-none"
|
||||
aria-label="20% off on all Nuxt UI Pro products for Black Friday week"
|
||||
aria-label="Nuxt UI Pro pricing"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span class="absolute inset-0 " aria-hidden="true" />
|
||||
@@ -39,19 +40,19 @@ if (import.meta.server) {
|
||||
<div class="lg:flex-1 hidden lg:flex items-center" />
|
||||
|
||||
<p class="text-sm font-medium text-white dark:text-gray-900 truncate">
|
||||
<UIcon name="i-ri-discount-percent-fill" class="size-5 align-top flex-shrink-0 pointer-events-none mr-2" />
|
||||
<span class="font-bold">Black Friday Week</span>: <UBadge label="20% off" color="white" class="ring-0 font-semibold" /> on all Nuxt UI Pro products from <span class="font-semibold">Nov 25</span> to <span class="font-semibold">Dec 2</span>!
|
||||
<UIcon name="i-heroicons-rocket-launch" class="w-5 h-5 align-top flex-shrink-0 pointer-events-none mr-2" />
|
||||
<span class="font-semibold">Nuxt UI v3-alpha</span> has been released!
|
||||
</p>
|
||||
|
||||
<!-- <UButton
|
||||
:to="to"
|
||||
<UButton
|
||||
to="https://ui3.nuxt.dev"
|
||||
target="_blank"
|
||||
label="Buy now"
|
||||
label="Try it out"
|
||||
color="black"
|
||||
variant="solid"
|
||||
size="2xs"
|
||||
trailing-icon="i-heroicons-arrow-right-20-solid"
|
||||
/> -->
|
||||
/>
|
||||
|
||||
<div class="flex items-center justify-end lg:flex-1">
|
||||
<button
|
||||
|
||||
@@ -30,7 +30,7 @@ const { $ui } = useNuxtApp()
|
||||
const links = [{
|
||||
icon: 'i-simple-icons-figma',
|
||||
label: 'Figma Kit',
|
||||
to: 'https://www.figma.com/community/file/1436401057300493073',
|
||||
to: 'https://www.figma.com/community/file/1288455405058138934',
|
||||
target: '_blank'
|
||||
}, {
|
||||
label: 'Playground',
|
||||
|
||||
@@ -10,34 +10,12 @@
|
||||
}"
|
||||
>
|
||||
<template #left>
|
||||
<NuxtLink to="/" class="flex items-end gap-2 text-xl text-gray-900 dark:text-white min-w-0 shrink-0" aria-label="Nuxt UI">
|
||||
<NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-gray-900 dark:text-white min-w-0" aria-label="Nuxt UI">
|
||||
<LogoPro v-if="$route.path.startsWith('/pro')" class="w-auto h-6 shrink-0" />
|
||||
<Logo v-else class="w-auto h-6 shrink-0" />
|
||||
</NuxtLink>
|
||||
|
||||
<UDropdown
|
||||
:items="[[{ label: $route.path.startsWith('/pro') ? `v${pkg.version.split('-')[0]}` : `v${config.version}`, class: 'text-primary-500 dark:text-primary-400' }, { label: 'v3.0.0-alpha.x', to: 'https://ui3.nuxt.dev' }]]"
|
||||
:popper="{ strategy: 'absolute', offsetDistance: 11, placement: 'bottom-start' }"
|
||||
:ui="{
|
||||
background: 'dark:bg-gray-900',
|
||||
ring: 'dark:ring-gray-800',
|
||||
width: 'w-auto',
|
||||
item: {
|
||||
padding: 'p-1',
|
||||
size: 'text-xs',
|
||||
active: 'dark:bg-gray-800/50'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<UButton
|
||||
:label="$route.path.startsWith('/pro') ? `v${pkg.version.split('-')[0]}` : `v${config.version}`"
|
||||
trailing-icon="i-lucide-chevron-down"
|
||||
variant="outline"
|
||||
size="2xs"
|
||||
truncate
|
||||
class="-mb-[6px] font-semibold rounded-full truncate ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 dark:bg-primary-400/10 hover:bg-primary-500/15 dark:hover:bg-primary-400/15 transition-colors"
|
||||
/>
|
||||
</UDropdown>
|
||||
<UBadge :label="$route.path.startsWith('/pro') ? `v${pkg.version.split('-')[0]}` : `v${config.version}`" variant="subtle" size="xs" class="-mb-[2px] rounded font-semibold truncate hidden sm:inline-flex" />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
@@ -47,10 +25,10 @@
|
||||
<UContentSearchButton :label="null" />
|
||||
</UTooltip>
|
||||
|
||||
<UColorModeButton class="hidden lg:inline-flex" />
|
||||
<UColorModeButton />
|
||||
|
||||
<UButton
|
||||
to="https://github.com/nuxt/ui/tree/dev"
|
||||
to="https://github.com/nuxt/ui"
|
||||
target="_blank"
|
||||
icon="i-simple-icons-github"
|
||||
aria-label="GitHub"
|
||||
|
||||
@@ -45,7 +45,7 @@ const ui = {
|
||||
inactive: 'text-gray-400 dark:text-gray-500'
|
||||
},
|
||||
avatar: {
|
||||
size: '2xs'
|
||||
size: '2xs' as const
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
// Columns
|
||||
const columns = [{
|
||||
key: 'select',
|
||||
class: 'w-2'
|
||||
}, {
|
||||
key: 'id',
|
||||
label: '#',
|
||||
sortable: true
|
||||
@@ -23,7 +20,6 @@ const columns = [{
|
||||
|
||||
const selectedColumns = ref(columns)
|
||||
const columnsTable = computed(() => columns.filter(column => selectedColumns.value.includes(column)))
|
||||
const excludeSelectColumn = computed(() => columns.filter(v => v.key !== 'select'))
|
||||
|
||||
// Selected Rows
|
||||
const selectedRows = ref([])
|
||||
@@ -157,7 +153,7 @@ const { data: todos, status } = await useLazyAsyncData<{
|
||||
</UButton>
|
||||
</UDropdown>
|
||||
|
||||
<USelectMenu v-model="selectedColumns" :options="excludeSelectColumn" multiple>
|
||||
<USelectMenu v-model="selectedColumns" :options="columns" multiple>
|
||||
<UButton
|
||||
icon="i-heroicons-view-columns"
|
||||
color="gray"
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const people = [{
|
||||
id: 1,
|
||||
name: 'Lindsay Walton',
|
||||
title: 'Front-end Developer',
|
||||
email: 'lindsay.walton@example.com',
|
||||
role: 'Member'
|
||||
}, {
|
||||
id: 2,
|
||||
name: 'Courtney Henry',
|
||||
title: 'Designer',
|
||||
email: 'courtney.henry@example.com',
|
||||
role: 'Admin'
|
||||
}, {
|
||||
id: 3,
|
||||
name: 'Tom Cook',
|
||||
title: 'Director of Product',
|
||||
email: 'tom.cook@example.com',
|
||||
role: 'Member'
|
||||
}, {
|
||||
id: 4,
|
||||
name: 'Whitney Francis',
|
||||
title: 'Copywriter',
|
||||
email: 'whitney.francis@example.com',
|
||||
role: 'Admin'
|
||||
}, {
|
||||
id: 5,
|
||||
name: 'Leonard Krasner',
|
||||
title: 'Senior Designer',
|
||||
email: 'leonard.krasner@example.com',
|
||||
role: 'Owner'
|
||||
}, {
|
||||
id: 6,
|
||||
name: 'Floyd Miles',
|
||||
title: 'Principal Designer',
|
||||
email: 'floyd.miles@example.com',
|
||||
role: 'Member'
|
||||
}]
|
||||
|
||||
const selected = ref([people[1]])
|
||||
|
||||
const columns = [{
|
||||
key: 'id',
|
||||
label: 'ID'
|
||||
}, {
|
||||
key: 'name',
|
||||
label: 'User name'
|
||||
}, {
|
||||
key: 'title',
|
||||
label: 'Job position'
|
||||
}, {
|
||||
key: 'email',
|
||||
label: 'Email'
|
||||
}, {
|
||||
key: 'role'
|
||||
}, {
|
||||
key: 'select',
|
||||
class: 'w-2'
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTable v-model="selected" :rows="people" :columns="columns" />
|
||||
</template>
|
||||
@@ -16,7 +16,7 @@ Its goal is to provide everything related to UI when building a Nuxt app. This i
|
||||
- Keyboard shortcuts
|
||||
- Bundled icons
|
||||
- Fully typed
|
||||
- [Figma Kit](https://www.figma.com/community/file/1436401057300493073)
|
||||
- [Figma Kit](https://www.figma.com/community/file/1288455405058138934)
|
||||
|
||||
## Credits
|
||||
|
||||
|
||||
@@ -221,52 +221,6 @@ export default defineAppConfig({
|
||||
})
|
||||
```
|
||||
|
||||
### Extend Tailwind Merge
|
||||
|
||||
Tailwind Merge is a library that allows you to efficiently merge Tailwind CSS classes. It is used by this module to merge the classes from the `ui` prop, the `class` attribute, and the default classes.
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb" to="https://github.com/dcastil/tailwind-merge" target="_blank"}
|
||||
Learn more about Tailwind Merge.
|
||||
::
|
||||
|
||||
By default, Tailwind Merge doesn't handle custom Tailwind CSS configuration like custom colors, spacing, or other utilities you may have defined. You'll need to extend it to handle your custom configuration.
|
||||
|
||||
You can extend Tailwind Merge by using the `tailwindMerge` option in your `app.config.ts`:
|
||||
|
||||
::code-group
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
tailwindMerge: {
|
||||
extend: {
|
||||
theme: {
|
||||
spacing: ['sm', 'md', 'lg', 'xl', '2xl']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
```ts [tailwind.config.ts]
|
||||
import type { Config } from 'tailwindcss'
|
||||
|
||||
export default <Partial<Config>>{
|
||||
theme: {
|
||||
extend: {
|
||||
spacing: {
|
||||
sm: '0.5rem',
|
||||
md: '1rem',
|
||||
lg: '1.5rem',
|
||||
xl: '2rem',
|
||||
'2xl': '2.5rem'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
::
|
||||
|
||||
## Dark mode
|
||||
|
||||
All the components are styled with dark mode in mind.
|
||||
|
||||
@@ -141,74 +141,6 @@ Badge
|
||||
You can customize the whole [preset](#preset) by using the `ui` prop.
|
||||
::
|
||||
|
||||
### Icon
|
||||
|
||||
Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
|
||||
|
||||
Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
icon: 'i-heroicons-rocket-launch'
|
||||
size: 'sm'
|
||||
color: 'primary'
|
||||
variant: 'solid'
|
||||
label: Badge
|
||||
trailing: false
|
||||
options:
|
||||
- name: variant
|
||||
restriction: only
|
||||
values:
|
||||
- solid
|
||||
excludedProps:
|
||||
- icon
|
||||
- label
|
||||
---
|
||||
::
|
||||
|
||||
## Slots
|
||||
|
||||
### `leading`
|
||||
|
||||
Use the `#leading` slot to set the content of the leading icon.
|
||||
|
||||
::component-card
|
||||
---
|
||||
slots:
|
||||
leading: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" />
|
||||
baseProps:
|
||||
color: 'gray'
|
||||
props:
|
||||
label: Badge
|
||||
color: 'gray'
|
||||
excludedProps:
|
||||
- color
|
||||
---
|
||||
|
||||
#leading
|
||||
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs"}
|
||||
::
|
||||
|
||||
### `trailing`
|
||||
|
||||
Use the `#trailing` slot to set the content of the trailing icon.
|
||||
|
||||
::component-card
|
||||
---
|
||||
slots:
|
||||
trailing: <UIcon name="i-heroicons-rocket-launch" class="w-4 h-4" />
|
||||
props:
|
||||
label: Badge
|
||||
color: 'gray'
|
||||
excludedProps:
|
||||
- color
|
||||
---
|
||||
|
||||
#trailing
|
||||
:u-icon{name="i-heroicons-rocket-launch" class="w-4 h-4"}
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
@@ -142,7 +142,7 @@ props:
|
||||
|
||||
### Loading
|
||||
|
||||
Use the `loading` prop to show a loading icon in the Input.
|
||||
Use the `loading` prop to show a loading icon and disable the Input.
|
||||
|
||||
Use the `loading-icon` prop to set a different icon or change it globally in `ui.input.default.loadingIcon`. Defaults to `i-heroicons-arrow-path-20-solid`.
|
||||
|
||||
|
||||
@@ -14,7 +14,6 @@ The Link component is a wrapper around [`<NuxtLink>`](https://nuxt.com/docs/api/
|
||||
- `inactive-class` prop to set a class when the link is inactive, `active-class` is used when active.
|
||||
- `exact` prop to style with `active-class` when the link is active and the route is exactly the same as the current route.
|
||||
- `exact-query` and `exact-hash` props to style with `active-class` when the link is active and the query or hash is exactly the same as the current query or hash.
|
||||
- use `exact-query="partial"` to style with `active-class` when the link is active and the query partially match the current query.
|
||||
|
||||
The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link) guide.
|
||||
|
||||
|
||||
@@ -137,9 +137,9 @@ excludedProps:
|
||||
|
||||
### Timeout
|
||||
|
||||
Use the `timeout` prop to configure how long the Notification will remain. The default value is `5000`, set it to `0` to disable the timeout. The `pauseTimeoutOnHover` prop (`true` by default) controls whether hovering the notification should pause the timeout.
|
||||
Use the `timeout` prop to configure how long the Notification will remain. The default value is `5000`, set it to `0` to disable the timeout.
|
||||
|
||||
You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused if `pauseTimeoutOnHover` is enabled; otherwise, it won't stop.
|
||||
You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused.
|
||||
|
||||
::component-card
|
||||
---
|
||||
@@ -149,7 +149,6 @@ baseProps:
|
||||
description: 'This is a notification.'
|
||||
props:
|
||||
timeout: 60000
|
||||
pauseTimeoutOnHover: true
|
||||
---
|
||||
::
|
||||
|
||||
|
||||
@@ -62,7 +62,7 @@ extraClass: 'overflow-hidden'
|
||||
padding: false
|
||||
component: 'table-example-columns-selectable'
|
||||
componentProps:
|
||||
class: 'flex-1 flex-col overflow-hidden min-h-[230px]'
|
||||
class: 'flex-1 flex-col overflow-hidden'
|
||||
---
|
||||
::
|
||||
|
||||
@@ -285,68 +285,9 @@ componentProps:
|
||||
---
|
||||
::
|
||||
|
||||
|
||||
#### Event Selectable
|
||||
The `UTable` component provides two key events for handling row selection:
|
||||
|
||||
##### ***@select:all***
|
||||
The `@select:all` event is emitted when the header checkbox in a selectable table is toggled. This event returns a boolean value indicating whether all rows are selected (true) or deselected (false).
|
||||
|
||||
##### ***@update:modelValue***
|
||||
The `@update:modelValue` event is emitted whenever the selection state changes, including both individual row selection and bulk selection. This event returns an array containing the currently selected rows.
|
||||
|
||||
Here's how to implement both events:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const selected = ref([])
|
||||
|
||||
const onHandleSelectAll = (isSelected: boolean) => {
|
||||
console.log('All rows selected:', isSelected)
|
||||
}
|
||||
|
||||
const onUpdateSelection = (selectedRows: any[]) => {
|
||||
console.log('Currently selected rows:', selectedRows)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTable
|
||||
v-model="selected"
|
||||
:rows="people"
|
||||
@select:all="onHandleSelectAll"
|
||||
@update:modelValue="onUpdateSelection"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
#### Single Select Mode
|
||||
Control how the select function allows only one row to be selected at a time.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<!-- Allow only one row to be selectable at a time -->
|
||||
<UTable :single-select="true" />
|
||||
</template>
|
||||
```
|
||||
|
||||
#### Checkbox Placement
|
||||
You can customize the checkbox column position by using the `select` key in the `columns` configuration.
|
||||
|
||||
::component-example{class="grid"}
|
||||
---
|
||||
extraClass: 'overflow-hidden'
|
||||
padding: false
|
||||
component: 'table-example-dynamically-render-selectable'
|
||||
componentProps:
|
||||
class: 'flex-1'
|
||||
---
|
||||
::
|
||||
|
||||
### Contextmenu
|
||||
|
||||
Use the `contextmenu` listener on your Table to make the rows right-clickable. The function will receive the original event as the first argument and the row as the second argument.
|
||||
Use the `contextmenu` listener on your Table to make the rows righ-clickable. The function will receive the original event as the first argument and the row as the second argument.
|
||||
|
||||
You can use this to open a [ContextMenu](/components/context-menu) for that row.
|
||||
|
||||
@@ -452,6 +393,7 @@ Controls whether multiple rows can be expanded simultaneously in the table.
|
||||
<!-- Or simply -->
|
||||
<UTable />
|
||||
</template>
|
||||
|
||||
```
|
||||
|
||||
#### Disable Row Expansion
|
||||
@@ -592,82 +534,6 @@ componentProps:
|
||||
---
|
||||
::
|
||||
|
||||
### `select-header`
|
||||
This slot allows you to customize the checkbox appearance in the table header for selecting all rows at once while using feature [Selectable](#selectable).
|
||||
|
||||
#### Usage
|
||||
```vue
|
||||
<template>
|
||||
<UTable v-model="selectable">
|
||||
<template #select-header="{ checked, change, indeterminate }">
|
||||
<!-- Place your custom component here -->
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
```
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Description |
|
||||
|------|------|-------------|
|
||||
| `checked` | `Boolean` | Indicates if all rows are selected |
|
||||
| `change` | `Function` | Function to handle selection state changes. Must receive a boolean value (true/false) |
|
||||
| `indeterminate` | `Boolean` | Indicates partial selection (when some rows are selected) |
|
||||
|
||||
#### Example
|
||||
```vue
|
||||
<template>
|
||||
<UTable>
|
||||
<!-- Header checkbox customization -->
|
||||
<template #select-header="{ indeterminate, checked, change }">
|
||||
<input
|
||||
type="checkbox"
|
||||
:indeterminate="indeterminate"
|
||||
:checked="checked"
|
||||
@change="e => change(e.target.checked)"
|
||||
/>
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
```
|
||||
|
||||
### `select-data`
|
||||
This slot allows you to customize the checkbox appearance for each row in the table while using feature [Selectable](#selectable).
|
||||
|
||||
#### Usage
|
||||
```vue
|
||||
<template>
|
||||
<UTable v-model="selectable">
|
||||
<template #select-data="{ checked, change }">
|
||||
<!-- Place your custom component here -->
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
```
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Description |
|
||||
|------|------|-------------|
|
||||
| `checked` | `Boolean` | Indicates if the current row is selected |
|
||||
| `change` | `Function` | Function to handle selection state changes. Must receive a boolean value (true/false) |
|
||||
|
||||
#### Example
|
||||
```vue
|
||||
<template>
|
||||
<UTable>
|
||||
<!-- Row checkbox customization -->
|
||||
<template #select-data="{ checked, change }">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="checked"
|
||||
@change="e => change(e.target.checked)"
|
||||
/>
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
```
|
||||
|
||||
### `expand-action`
|
||||
|
||||
The `#expand-action` slot allows you to customize the expansion control interface for expandable table rows. This feature provides a flexible way to implement custom expand/collapse functionality while maintaining access to essential row data and state.
|
||||
|
||||
@@ -27,7 +27,8 @@ export default defineNuxtConfig({
|
||||
'@nuxtjs/plausible',
|
||||
'@vueuse/nuxt',
|
||||
'nuxt-component-meta',
|
||||
'nuxt-cloudflare-analytics'
|
||||
'nuxt-cloudflare-analytics',
|
||||
'modules/content-examples-code'
|
||||
],
|
||||
|
||||
site: {
|
||||
|
||||
@@ -3,29 +3,28 @@
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@iconify-json/heroicons": "^1.2.2",
|
||||
"@iconify-json/lucide": "^1.2.23",
|
||||
"@iconify-json/simple-icons": "^1.2.19",
|
||||
"@iconify-json/vscode-icons": "^1.2.10",
|
||||
"@iconify-json/heroicons": "^1.2.1",
|
||||
"@iconify-json/simple-icons": "^1.2.11",
|
||||
"@iconify-json/vscode-icons": "^1.2.2",
|
||||
"@nuxt/content": "^2.13.4",
|
||||
"@nuxt/fonts": "^0.10.3",
|
||||
"@nuxt/image": "^1.9.0",
|
||||
"@nuxt/fonts": "^0.10.2",
|
||||
"@nuxt/image": "^1.8.1",
|
||||
"@nuxt/ui": "latest",
|
||||
"@nuxt/ui-pro": "^1.6.0",
|
||||
"@nuxtjs/plausible": "^1.2.0",
|
||||
"@octokit/rest": "^21.1.0",
|
||||
"@vueuse/nuxt": "^12.4.0",
|
||||
"@nuxt/ui-pro": "^1.5.0",
|
||||
"@nuxtjs/plausible": "^1.0.3",
|
||||
"@octokit/rest": "^21.0.2",
|
||||
"@vueuse/nuxt": "^11.2.0",
|
||||
"date-fns": "^4.1.0",
|
||||
"joi": "^17.13.3",
|
||||
"nuxt": "^3.15.1",
|
||||
"nuxt": "^3.14.159",
|
||||
"nuxt-cloudflare-analytics": "^1.0.8",
|
||||
"nuxt-component-meta": "^0.9.0",
|
||||
"nuxt-og-image": "^4.0.2",
|
||||
"prettier": "^3.4.2",
|
||||
"nuxt-og-image": "^3.0.8",
|
||||
"prettier": "^3.3.3",
|
||||
"ufo": "^1.5.4",
|
||||
"v-calendar": "^3.1.2",
|
||||
"valibot": "^0.42.1",
|
||||
"yup": "^1.6.1",
|
||||
"zod": "^3.24.1"
|
||||
"yup": "^1.4.0",
|
||||
"zod": "^3.23.8"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -98,7 +98,7 @@ const communityLinks = computed(() => [{
|
||||
const resourcesLinks = [{
|
||||
icon: 'i-simple-icons-figma',
|
||||
label: 'Figma Kit',
|
||||
to: 'https://www.figma.com/community/file/1436401057300493073',
|
||||
to: 'https://www.figma.com/community/file/1288455405058138934',
|
||||
target: '_blank'
|
||||
}, {
|
||||
label: 'Playground',
|
||||
|
||||
53
package.json
53
package.json
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "@nuxt/ui",
|
||||
"description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
|
||||
"version": "2.21.0",
|
||||
"packageManager": "pnpm@9.15.3",
|
||||
"version": "2.19.2",
|
||||
"packageManager": "pnpm@9.12.3",
|
||||
"repository": "nuxt/ui",
|
||||
"homepage": "https://ui.nuxt.com",
|
||||
"type": "module",
|
||||
@@ -34,55 +34,52 @@
|
||||
"dependencies": {
|
||||
"@headlessui/tailwindcss": "^0.2.1",
|
||||
"@headlessui/vue": "^1.7.23",
|
||||
"@iconify-json/heroicons": "^1.2.2",
|
||||
"@nuxt/icon": "^1.10.3",
|
||||
"@nuxt/kit": "^3.15.1",
|
||||
"@iconify-json/heroicons": "^1.2.1",
|
||||
"@nuxt/icon": "^1.6.1",
|
||||
"@nuxt/kit": "^3.14.159",
|
||||
"@nuxtjs/color-mode": "^3.5.2",
|
||||
"@nuxtjs/tailwindcss": "^6.13.1",
|
||||
"@nuxtjs/tailwindcss": "^6.12.2",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@tailwindcss/aspect-ratio": "^0.4.2",
|
||||
"@tailwindcss/container-queries": "^0.1.1",
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@vueuse/core": "^12.4.0",
|
||||
"@vueuse/integrations": "^12.4.0",
|
||||
"@vueuse/math": "^12.4.0",
|
||||
"@tailwindcss/forms": "^0.5.9",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"@vueuse/core": "^11.2.0",
|
||||
"@vueuse/integrations": "^11.2.0",
|
||||
"@vueuse/math": "^11.2.0",
|
||||
"defu": "^6.1.4",
|
||||
"fuse.js": "^7.0.0",
|
||||
"ohash": "^1.1.4",
|
||||
"pathe": "^2.0.1",
|
||||
"pathe": "^1.1.2",
|
||||
"scule": "^1.3.0",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"tailwindcss": "^3.4.17"
|
||||
"tailwind-merge": "^2.5.4",
|
||||
"tailwindcss": "^3.4.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/eslint-config": "^0.7.5",
|
||||
"@nuxt/eslint-config": "^0.6.1",
|
||||
"@nuxt/module-builder": "^0.8.4",
|
||||
"@nuxt/test-utils": "^3.15.4",
|
||||
"@release-it/conventional-changelog": "^10.0.0",
|
||||
"@nuxt/test-utils": "^3.14.4",
|
||||
"@release-it/conventional-changelog": "^9.0.2",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"eslint": "^9.18.0",
|
||||
"eslint": "^9.14.0",
|
||||
"happy-dom": "^14.12.3",
|
||||
"joi": "^17.13.3",
|
||||
"nuxt": "^3.15.1",
|
||||
"release-it": "^18.1.1",
|
||||
"nuxt": "^3.14.159",
|
||||
"release-it": "^17.10.0",
|
||||
"superstruct": "^2.0.2",
|
||||
"typescript": "^5.6.3",
|
||||
"unbuild": "^2.0.0",
|
||||
"valibot": "^0.42.1",
|
||||
"valibot30": "npm:valibot@0.30.0",
|
||||
"valibot31": "npm:valibot@0.31.0",
|
||||
"vitest": "^2.1.8",
|
||||
"vitest": "^2.1.4",
|
||||
"vitest-environment-nuxt": "^1.0.1",
|
||||
"vue-tsc": "^2.1.10",
|
||||
"yup": "^1.6.1",
|
||||
"zod": "^3.24.1"
|
||||
"yup": "^1.4.0",
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"resolutions": {
|
||||
"@nuxt/ui": "workspace:*",
|
||||
"@nuxt/content": "2.13.2",
|
||||
"@nuxtjs/mdc": "0.9.0",
|
||||
"chokidar": "3.6.0",
|
||||
"vue-tsc": "2.1.10",
|
||||
"typescript": "5.6.3"
|
||||
"@nuxtjs/mdc": "0.9.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,6 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/ui": "latest",
|
||||
"nuxt": "^3.15.1"
|
||||
"nuxt": "^3.14.159"
|
||||
}
|
||||
}
|
||||
|
||||
6694
pnpm-lock.yaml
generated
6694
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,5 @@
|
||||
import { createRequire } from 'node:module'
|
||||
import { defineNuxtModule, installModule, addComponentsDir, addImportsDir, createResolver, addPlugin } from '@nuxt/kit'
|
||||
import type { ConfigExtension, DefaultClassGroupIds, DefaultThemeGroupIds } from 'tailwind-merge'
|
||||
import { name, version } from '../package.json'
|
||||
import createTemplates from './templates'
|
||||
import type * as config from './runtime/ui.config'
|
||||
@@ -21,7 +20,6 @@ type UI = {
|
||||
gray?: string
|
||||
colors?: string[]
|
||||
strategy?: Strategy
|
||||
tailwindMerge?: ConfigExtension<DefaultClassGroupIds, DefaultThemeGroupIds>
|
||||
[key: string]: any
|
||||
} & DeepPartial<typeof config, string | number | boolean>
|
||||
|
||||
|
||||
@@ -8,27 +8,28 @@
|
||||
</slot>
|
||||
<thead :class="ui.thead">
|
||||
<tr :class="ui.tr.base">
|
||||
<th v-if="modelValue" scope="col" :class="ui.checkbox.padding">
|
||||
<UCheckbox
|
||||
:model-value="isAllRowChecked"
|
||||
:indeterminate="indeterminate"
|
||||
v-bind="ui.default.checkbox"
|
||||
aria-label="Select all"
|
||||
@change="onChange"
|
||||
/>
|
||||
</th>
|
||||
|
||||
<th v-if="expand" scope="col" :class="ui.tr.base">
|
||||
<span class="sr-only">Expand</span>
|
||||
</th>
|
||||
|
||||
<th
|
||||
v-for="(column, index) in columns"
|
||||
:key="index"
|
||||
scope="col"
|
||||
:class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.key === 'select' && ui.checkbox.padding, column.class]"
|
||||
:class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]"
|
||||
:aria-sort="getAriaSort(column)"
|
||||
>
|
||||
<slot v-if="!singleSelect && modelValue && column.key === 'select'" name="select-header" :indeterminate="indeterminate" :checked="isAllRowChecked" :change="onChange">
|
||||
<UCheckbox
|
||||
:model-value="isAllRowChecked"
|
||||
:indeterminate="indeterminate"
|
||||
v-bind="ui.default.checkbox"
|
||||
aria-label="Select all"
|
||||
@change="onChange"
|
||||
/>
|
||||
</slot>
|
||||
|
||||
<slot v-else :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
|
||||
<slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
|
||||
<UButton
|
||||
v-if="column.sortable"
|
||||
v-bind="{ ...(ui.default.sortButton || {}), ...sortButton }"
|
||||
@@ -76,7 +77,16 @@
|
||||
|
||||
<template v-else>
|
||||
<template v-for="(row, index) in rows" :key="index">
|
||||
<tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, isExpanded(row) && ui.tr.expanded, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)" @contextmenu="(event) => onContextmenu(event, row)">
|
||||
<tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, isExpanded(row) && ui.tr.expanded, ($attrs.onSelect || $attrs.onContextmenu) && ui.tr.active, row?.class]" @click="() => onSelect(row)" @contextmenu="(event) => onContextmenu(event, row)">
|
||||
<td v-if="modelValue" :class="ui.checkbox.padding">
|
||||
<UCheckbox
|
||||
:model-value="isSelected(row)"
|
||||
v-bind="ui.default.checkbox"
|
||||
aria-label="Select row"
|
||||
@change="onChangeCheckbox($event, row)"
|
||||
@click.capture.stop="() => onSelect(row)"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
v-if="expand"
|
||||
:class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]"
|
||||
@@ -92,25 +102,8 @@
|
||||
@click.capture.stop="toggleOpened(row)"
|
||||
/>
|
||||
</td>
|
||||
<td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, column?.rowClass, row[column.key]?.class, column.key === 'select' && ui.checkbox.padding]">
|
||||
<slot v-if="modelValue && column.key === 'select' " name="select-data" :checked="isSelected(row)" :change="(ev: boolean) => onChangeCheckbox(ev, row)">
|
||||
<UCheckbox
|
||||
:model-value="isSelected(row)"
|
||||
v-bind="ui.default.checkbox"
|
||||
aria-label="Select row"
|
||||
@change="onChangeCheckbox($event, row)"
|
||||
/>
|
||||
</slot>
|
||||
|
||||
<slot
|
||||
v-else
|
||||
:key="retriggerSlot"
|
||||
:name="`${column.key}-data`"
|
||||
:column="column"
|
||||
:row="row"
|
||||
:index="index"
|
||||
:get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)"
|
||||
>
|
||||
<td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, column?.rowClass, row[column.key]?.class]">
|
||||
<slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
|
||||
{{ getRowData(row, column.key) }}
|
||||
</slot>
|
||||
</td>
|
||||
@@ -132,18 +125,17 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref, toRaw, toRef, watch } from 'vue'
|
||||
import { computed, defineComponent, toRaw, toRef } from 'vue'
|
||||
import type { PropType, AriaAttributes } from 'vue'
|
||||
import { upperFirst } from 'scule'
|
||||
import { defu } from 'defu'
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { isEqual } from 'ohash'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import UButton from '../elements/Button.vue'
|
||||
import UProgress from '../elements/Progress.vue'
|
||||
import UCheckbox from '../forms/Checkbox.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { get, mergeConfig } from '../../utils'
|
||||
import { mergeConfig, get } from '../../utils'
|
||||
import type { TableRow, TableColumn, Strategy, Button, ProgressColor, ProgressAnimation, DeepPartial, Expanded } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
@@ -152,7 +144,7 @@ import { table } from '#ui/ui.config'
|
||||
const config = mergeConfig<typeof table>(appConfig.ui.strategy, appConfig.ui.table, table)
|
||||
|
||||
function defaultComparator<T>(a: T, z: T): boolean {
|
||||
return isEqual(a, z)
|
||||
return JSON.stringify(a) === JSON.stringify(z)
|
||||
}
|
||||
|
||||
function defaultSort(a: any, b: any, direction: 'asc' | 'desc') {
|
||||
@@ -167,14 +159,6 @@ function defaultSort(a: any, b: any, direction: 'asc' | 'desc') {
|
||||
}
|
||||
}
|
||||
|
||||
function getStringifiedSet(arr: TableRow[]) {
|
||||
return new Set(arr.map(item => JSON.stringify(item)))
|
||||
}
|
||||
|
||||
function accessor<T extends Record<string, any>>(key: string) {
|
||||
return (obj: T) => get(obj, key)
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UIcon,
|
||||
@@ -237,7 +221,7 @@ export default defineComponent({
|
||||
default: false
|
||||
},
|
||||
loadingState: {
|
||||
type: Object as PropType<{ icon: string, label: string } | null>,
|
||||
type: Object as PropType<{ icon: string, label: string }>,
|
||||
default: () => config.default.loadingState
|
||||
},
|
||||
emptyState: {
|
||||
@@ -263,40 +247,13 @@ export default defineComponent({
|
||||
multipleExpand: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
singleSelect: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue', 'update:sort', 'update:expand', 'select:all'],
|
||||
emits: ['update:modelValue', 'update:sort', 'update:expand'],
|
||||
setup(props, { emit, attrs: $attrs }) {
|
||||
const { ui, attrs } = useUI('table', toRef(props, 'ui'), config, toRef(props, 'class'))
|
||||
|
||||
const columns = computed(() => {
|
||||
const defaultColumns = props.columns ?? (
|
||||
Object.keys(props.rows[0]).map(key => ({
|
||||
key,
|
||||
label: upperFirst(key),
|
||||
sortable: false,
|
||||
class: undefined,
|
||||
sort: defaultSort
|
||||
}))
|
||||
) as TableColumn[]
|
||||
|
||||
const hasColumnSelect = defaultColumns.find(v => v.key === 'select')
|
||||
|
||||
if (hasColumnSelect || !props.modelValue) {
|
||||
return defaultColumns
|
||||
}
|
||||
|
||||
return [{
|
||||
key: 'select',
|
||||
sortable: false,
|
||||
class: undefined,
|
||||
sort: defaultSort
|
||||
}, ...defaultColumns]
|
||||
})
|
||||
const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map(key => ({ key, label: upperFirst(key), sortable: false, class: undefined, sort: defaultSort }) as TableColumn))
|
||||
|
||||
const sort = useVModel(props, 'sort', emit, { passive: true, defaultValue: defu({}, props.sort, { column: null, direction: 'asc' }) })
|
||||
const expand = useVModel(props, 'expand', emit, {
|
||||
@@ -307,8 +264,6 @@ export default defineComponent({
|
||||
})
|
||||
})
|
||||
|
||||
const retriggerSlot = ref(null)
|
||||
|
||||
const savedSort = { column: sort.value.column, direction: null }
|
||||
|
||||
const rows = computed(() => {
|
||||
@@ -337,6 +292,8 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
|
||||
const getStringifiedSet = (arr: TableRow[]) => new Set(arr.map(item => JSON.stringify(item)))
|
||||
|
||||
const totalRows = computed(() => props.rows.length)
|
||||
|
||||
const countCheckedRow = computed(() => {
|
||||
@@ -371,6 +328,10 @@ export default defineComponent({
|
||||
return props.by(a, z)
|
||||
}
|
||||
|
||||
function accessor<T extends Record<string, any>>(key: string) {
|
||||
return (obj: T) => get(obj, key)
|
||||
}
|
||||
|
||||
function isSelected(row: TableRow) {
|
||||
if (!props.modelValue) {
|
||||
return false
|
||||
@@ -394,11 +355,6 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
function onSelect(row: TableRow) {
|
||||
const selection = window.getSelection()
|
||||
if (selection && selection.toString().length > 0) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!$attrs.onSelect) {
|
||||
return
|
||||
}
|
||||
@@ -437,14 +393,14 @@ export default defineComponent({
|
||||
} else {
|
||||
selected.value = []
|
||||
}
|
||||
emit('select:all', checked)
|
||||
}
|
||||
|
||||
function onChangeCheckbox(checked: boolean, row: TableRow) {
|
||||
if (checked) {
|
||||
selected.value = props.singleSelect ? [row] : [...selected.value, row]
|
||||
selected.value.push(row)
|
||||
} else {
|
||||
selected.value = selected.value.filter(value => !compare(toRaw(value), toRaw(row)))
|
||||
const index = selected.value.findIndex(item => compare(item, row))
|
||||
selected.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -483,12 +439,6 @@ export default defineComponent({
|
||||
return undefined
|
||||
}
|
||||
|
||||
watch(rows, () => {
|
||||
retriggerSlot.value = new Date()
|
||||
}, {
|
||||
deep: true
|
||||
})
|
||||
|
||||
return {
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
ui,
|
||||
@@ -515,8 +465,7 @@ export default defineComponent({
|
||||
getRowData,
|
||||
toggleOpened,
|
||||
getAriaSort,
|
||||
isExpanded,
|
||||
retriggerSlot
|
||||
isExpanded
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -126,7 +126,7 @@ export default defineComponent({
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['open', 'close'],
|
||||
emits: ['open'],
|
||||
setup(props, { emit }) {
|
||||
const { ui, attrs } = useUI('accordion', toRef(props, 'ui'), config, toRef(props, 'class'))
|
||||
|
||||
@@ -142,8 +142,6 @@ export default defineComponent({
|
||||
|
||||
if (!isOpenBefore && isOpenAfter) {
|
||||
emit('open', index)
|
||||
} else if (isOpenBefore && !isOpenAfter) {
|
||||
emit('close', index)
|
||||
}
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
@@ -42,13 +42,13 @@
|
||||
<script lang="ts">
|
||||
import { computed, toRef, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import UAvatar from '../elements/Avatar.vue'
|
||||
import UButton from '../elements/Button.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import type { Avatar, Button, AlertColor, AlertVariant, AlertAction, Strategy, DeepPartial } from '../../types/index'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
import { alert } from '#ui/ui.config'
|
||||
|
||||
@@ -23,10 +23,10 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, toRef, watch } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import type { AvatarSize, AvatarChipColor, AvatarChipPosition, Strategy, DeepPartial } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { getSlotsChildren, mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig, getSlotsChildren } from '../../utils'
|
||||
import type { AvatarSize, DeepPartial, Strategy } from '../../types/index'
|
||||
import UAvatar from './Avatar.vue'
|
||||
// @ts-expect-error
|
||||
|
||||
@@ -1,28 +1,15 @@
|
||||
<template>
|
||||
<span :class="badgeClass" v-bind="attrs">
|
||||
<slot name="leading">
|
||||
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
|
||||
</slot>
|
||||
|
||||
<slot>
|
||||
<span v-if="label">
|
||||
{{ label }}
|
||||
</span>
|
||||
</slot>
|
||||
|
||||
<slot name="trailing">
|
||||
<UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
|
||||
</slot>
|
||||
<slot>{{ label }}</slot>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, toRef, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import { useInjectButtonGroup } from '../../composables/useButtonGroup'
|
||||
import type { BadgeColor, BadgeSize, BadgeVariant, DeepPartial, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
@@ -32,9 +19,6 @@ import { badge } from '#ui/ui.config'
|
||||
const config = mergeConfig<typeof badge>(appConfig.ui.strategy, appConfig.ui.badge, badge)
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
UIcon
|
||||
},
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
size: {
|
||||
@@ -65,26 +49,6 @@ export default defineComponent({
|
||||
type: [String, Number],
|
||||
default: null
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
leadingIcon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
trailingIcon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
trailing: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
leading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
class: {
|
||||
type: [String, Object, Array] as PropType<any>,
|
||||
default: () => ''
|
||||
@@ -99,14 +63,6 @@ export default defineComponent({
|
||||
|
||||
const { size, rounded } = useInjectButtonGroup({ ui, props })
|
||||
|
||||
const isLeading = computed(() => {
|
||||
return (props.icon && props.leading) || (props.icon && !props.trailing) || !props.trailing || props.leadingIcon
|
||||
})
|
||||
|
||||
const isTrailing = computed(() => {
|
||||
return (props.icon && props.trailing) || props.trailing || props.trailingIcon
|
||||
})
|
||||
|
||||
const badgeClass = computed(() => {
|
||||
const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
|
||||
|
||||
@@ -115,42 +71,13 @@ export default defineComponent({
|
||||
ui.value.font,
|
||||
rounded.value,
|
||||
ui.value.size[size.value],
|
||||
ui.value.gap[size.value],
|
||||
variant?.replaceAll('{color}', props.color)
|
||||
), props.class)
|
||||
})
|
||||
|
||||
const leadingIconName = computed(() => {
|
||||
return props.leadingIcon || props.icon
|
||||
})
|
||||
|
||||
const trailingIconName = computed(() => {
|
||||
return props.trailingIcon || props.icon
|
||||
})
|
||||
|
||||
const leadingIconClass = computed(() => {
|
||||
return twJoin(
|
||||
ui.value.icon.base,
|
||||
ui.value.icon.size[size.value]
|
||||
)
|
||||
})
|
||||
|
||||
const trailingIconClass = computed(() => {
|
||||
return twJoin(
|
||||
ui.value.icon.base,
|
||||
ui.value.icon.size[size.value]
|
||||
)
|
||||
})
|
||||
|
||||
return {
|
||||
attrs,
|
||||
isLeading,
|
||||
isTrailing,
|
||||
badgeClass,
|
||||
leadingIconName,
|
||||
trailingIconName,
|
||||
leadingIconClass,
|
||||
trailingIconClass
|
||||
badgeClass
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -19,11 +19,11 @@
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, toRef } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import ULink from '../elements/Link.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { getNuxtLinkProps, mergeConfig, nuxtLinkProps, twMerge } from '../../utils'
|
||||
import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from '../../utils'
|
||||
import { useInjectButtonGroup } from '../../composables/useButtonGroup'
|
||||
import type { ButtonColor, ButtonSize, ButtonVariant, DeepPartial, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { h, computed, toRef, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { getSlotsChildren, mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig, getSlotsChildren } from '../../utils'
|
||||
import { useProvideButtonGroup } from '../../composables/useButtonGroup'
|
||||
import type { ButtonSize, DeepPartial, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
|
||||
@@ -58,8 +58,9 @@
|
||||
<script lang="ts">
|
||||
import { ref, toRef, computed, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
import { useScroll, useResizeObserver, useElementSize } from '@vueuse/core'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import UButton from '../elements/Button.vue'
|
||||
import type { Strategy, Button, DeepPartial } from '../../types/index'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
@@ -105,7 +106,7 @@ export default defineComponent({
|
||||
default: () => ''
|
||||
},
|
||||
ui: {
|
||||
type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
|
||||
type: Object as PropType<DeepPartial<typeof config & { strategy?: Strategy }>>,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
|
||||
@@ -60,13 +60,13 @@ import { defineComponent, ref, computed, watch, toRef, onMounted, resolveCompone
|
||||
import type { PropType } from 'vue'
|
||||
import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem, provideUseId } from '@headlessui/vue'
|
||||
import { defu } from 'defu'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import UAvatar from '../elements/Avatar.vue'
|
||||
import UKbd from '../elements/Kbd.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { usePopper } from '../../composables/usePopper'
|
||||
import { getNuxtLinkProps, mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig, getNuxtLinkProps } from '../../utils'
|
||||
import type { DeepPartial, DropdownItem, PopperOptions, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
<script lang="ts">
|
||||
import { toRef, defineComponent, computed } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import type { DeepPartial, KbdSize, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -32,8 +32,8 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { isEqual, diff } from 'ohash'
|
||||
import { type PropType, defineComponent } from 'vue'
|
||||
import { isEqual } from 'ohash'
|
||||
import { defineComponent } from 'vue'
|
||||
import { nuxtLinkProps } from '../../utils'
|
||||
|
||||
export default defineComponent({
|
||||
@@ -61,7 +61,7 @@ export default defineComponent({
|
||||
default: false
|
||||
},
|
||||
exactQuery: {
|
||||
type: [Boolean, String] as PropType<boolean | 'partial'>,
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
exactHash: {
|
||||
@@ -74,21 +74,9 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
function isPartiallyEqual(item1, item2) {
|
||||
const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
|
||||
if (q.type === 'added') {
|
||||
filtered.push(q.key)
|
||||
}
|
||||
return filtered
|
||||
}, [])
|
||||
return isEqual(item1, item2, { excludeKeys: key => diffedKeys.includes(key) })
|
||||
}
|
||||
|
||||
function resolveLinkClass(route, $route, { isActive, isExactActive }: { isActive: boolean, isExactActive: boolean }) {
|
||||
if (props.exactQuery === 'partial') {
|
||||
if (!isPartiallyEqual(route.query, $route.query)) return props.inactiveClass
|
||||
} else if (props.exactQuery === true) {
|
||||
if (!isEqual(route.query, $route.query)) return props.inactiveClass
|
||||
if (props.exactQuery && !isEqual(route.query, $route.query)) {
|
||||
return props.inactiveClass
|
||||
}
|
||||
if (props.exactHash && route.hash !== $route.hash) {
|
||||
return props.inactiveClass
|
||||
|
||||
@@ -3,7 +3,7 @@ import type { ComputedRef, VNode, SlotsType, PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { getSlotsChildren, mergeConfig } from '../../utils'
|
||||
import { mergeConfig, getSlotsChildren } from '../../utils'
|
||||
import type { DeepPartial, Strategy, MeterSize } from '../../types/index'
|
||||
import type Meter from './Meter.vue'
|
||||
// @ts-expect-error
|
||||
|
||||
@@ -32,10 +32,10 @@
|
||||
<script lang="ts">
|
||||
import { computed, toRef, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { useFormGroup } from '../../composables/useFormGroup'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import type { DeepPartial, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -60,8 +60,6 @@ export default defineComponent({
|
||||
const formId = useId()
|
||||
const bus = useEventBus<FormEvent>(`form-${formId}`)
|
||||
|
||||
const parsedValue = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
bus.on(async (event) => {
|
||||
if (event.type !== 'submit' && props.validateOn?.includes(event.type)) {
|
||||
@@ -89,7 +87,7 @@ export default defineComponent({
|
||||
if (errors) {
|
||||
errs = errs.concat(errors)
|
||||
} else {
|
||||
parsedValue.value = result
|
||||
Object.assign(props.state, result)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -132,7 +130,7 @@ export default defineComponent({
|
||||
if (props.validateOn?.includes('submit')) {
|
||||
await validate()
|
||||
}
|
||||
event.data = props.schema ? parsedValue.value : props.state
|
||||
event.data = props.state
|
||||
emit('submit', event)
|
||||
} catch (error) {
|
||||
if (!(error instanceof FormException)) {
|
||||
@@ -254,10 +252,10 @@ async function validateJoiSchema(
|
||||
schema: JoiSchema
|
||||
): Promise<ValidateReturnSchema<typeof state>> {
|
||||
try {
|
||||
const result = await schema.validateAsync(state, { abortEarly: false })
|
||||
await schema.validateAsync(state, { abortEarly: false })
|
||||
return {
|
||||
errors: null,
|
||||
result
|
||||
result: state
|
||||
}
|
||||
} catch (error) {
|
||||
if (isJoiError(error)) {
|
||||
@@ -323,7 +321,7 @@ async function validateYupSchema(
|
||||
schema: YupObjectSchema<any>
|
||||
): Promise<ValidateReturnSchema<typeof state>> {
|
||||
try {
|
||||
const result = await schema.validate(state, { abortEarly: false })
|
||||
const result = schema.validateSync(state, { abortEarly: false })
|
||||
return {
|
||||
errors: null,
|
||||
result
|
||||
|
||||
@@ -33,12 +33,12 @@
|
||||
<script lang="ts">
|
||||
import { ref, computed, toRef, onMounted, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import { defu } from 'defu'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { useFormGroup } from '../../composables/useFormGroup'
|
||||
import { looseToNumber, mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig, looseToNumber } from '../../utils'
|
||||
import { useInjectButtonGroup } from '../../composables/useButtonGroup'
|
||||
import type { InputSize, InputColor, InputVariant, Strategy, DeepPartial } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
v-slot="{ active, selected, disabled: optionDisabled }"
|
||||
:key="index"
|
||||
as="template"
|
||||
:value="valueAttribute ? accessor(option, valueAttribute) : option"
|
||||
:value="valueAttribute ? option[valueAttribute] : option"
|
||||
:disabled="option.disabled"
|
||||
>
|
||||
<li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, selected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
|
||||
@@ -103,14 +103,13 @@ import {
|
||||
} from '@headlessui/vue'
|
||||
import { computedAsync, useDebounceFn } from '@vueuse/core'
|
||||
import { defu } from 'defu'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { isEqual } from 'ohash'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import UAvatar from '../elements/Avatar.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { usePopper } from '../../composables/usePopper'
|
||||
import { useFormGroup } from '../../composables/useFormGroup'
|
||||
import { get, mergeConfig, twMerge } from '../../utils'
|
||||
import { get, mergeConfig } from '../../utils'
|
||||
import { useInjectButtonGroup } from '../../composables/useButtonGroup'
|
||||
import type { InputSize, InputColor, InputVariant, PopperOptions, Strategy, DeepPartial } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
@@ -293,24 +292,6 @@ export default defineComponent({
|
||||
|
||||
const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value)
|
||||
|
||||
const by = computed(() => {
|
||||
if (!props.by) return undefined
|
||||
|
||||
if (typeof props.by === 'function') {
|
||||
return props.by
|
||||
}
|
||||
|
||||
const key = props.by
|
||||
const hasDot = key.indexOf('.')
|
||||
if (hasDot > 0) {
|
||||
return (a: any, z: any) => {
|
||||
return accessor(a, key) === accessor(z, key)
|
||||
}
|
||||
}
|
||||
|
||||
return key
|
||||
})
|
||||
|
||||
const internalQuery = ref('')
|
||||
const query = computed({
|
||||
get() {
|
||||
@@ -323,30 +304,12 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
const label = computed(() => {
|
||||
if (!props.modelValue) return null
|
||||
|
||||
function getValue(value: any) {
|
||||
if (props.valueAttribute) {
|
||||
return accessor(value, props.valueAttribute)
|
||||
}
|
||||
|
||||
return value
|
||||
}
|
||||
|
||||
function compareValues(value1: any, value2: any) {
|
||||
if (by.value && typeof by.value !== 'function' && typeof value1 === 'object' && typeof value2 === 'object') {
|
||||
return isEqual(value1[props.by], value2[props.by])
|
||||
}
|
||||
return isEqual(value1, value2)
|
||||
if (!props.modelValue) {
|
||||
return
|
||||
}
|
||||
|
||||
if (props.valueAttribute) {
|
||||
const option = options.value.find((option) => {
|
||||
const optionValue = getValue(option)
|
||||
|
||||
return compareValues(optionValue, props.modelValue)
|
||||
})
|
||||
|
||||
const option = options.value.find(option => option[props.valueAttribute] === props.modelValue)
|
||||
return option ? accessor(option, props.optionAttribute) : null
|
||||
} else {
|
||||
return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : accessor(props.modelValue as Record<string, any>, props.optionAttribute)
|
||||
@@ -523,9 +486,7 @@ export default defineComponent({
|
||||
query,
|
||||
accessor,
|
||||
onUpdate,
|
||||
onQueryChange,
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
by
|
||||
onQueryChange
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -31,10 +31,10 @@
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, inject, toRef } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { useFormGroup } from '../../composables/useFormGroup'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import type { DeepPartial, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -34,7 +34,7 @@ import { computed, defineComponent, provide, toRef } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { useFormGroup } from '../../composables/useFormGroup'
|
||||
import { get, mergeConfig } from '../../utils'
|
||||
import { mergeConfig, get } from '../../utils'
|
||||
import type { DeepPartial, Strategy } from '../../types/index'
|
||||
import URadio from './Radio.vue'
|
||||
// @ts-expect-error
|
||||
|
||||
@@ -22,10 +22,10 @@
|
||||
<script lang="ts">
|
||||
import { computed, toRef, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { useFormGroup } from '../../composables/useFormGroup'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import type { RangeSize, RangeColor, Strategy, DeepPartial } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -55,11 +55,11 @@
|
||||
<script lang="ts">
|
||||
import { computed, toRef, defineComponent } from 'vue'
|
||||
import type { PropType, ComputedRef } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { useFormGroup } from '../../composables/useFormGroup'
|
||||
import { get, mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig, get } from '../../utils'
|
||||
import { useInjectButtonGroup } from '../../composables/useButtonGroup'
|
||||
import type { SelectSize, SelectColor, SelectVariant, Strategy, DeepPartial } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
v-slot="{ active, selected: optionSelected, disabled: optionDisabled }"
|
||||
:key="index"
|
||||
as="template"
|
||||
:value="valueAttribute ? accessor(option, valueAttribute) : option"
|
||||
:value="valueAttribute ? option[valueAttribute] : option"
|
||||
:disabled="option.disabled"
|
||||
>
|
||||
<li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, optionSelected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
|
||||
@@ -139,14 +139,13 @@ import {
|
||||
} from '@headlessui/vue'
|
||||
import { computedAsync, useDebounceFn } from '@vueuse/core'
|
||||
import { defu } from 'defu'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { isEqual } from 'ohash'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import UAvatar from '../elements/Avatar.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { usePopper } from '../../composables/usePopper'
|
||||
import { useFormGroup } from '../../composables/useFormGroup'
|
||||
import { get, mergeConfig, twMerge } from '../../utils'
|
||||
import { get, mergeConfig } from '../../utils'
|
||||
import { useInjectButtonGroup } from '../../composables/useButtonGroup'
|
||||
import type { SelectSize, SelectColor, SelectVariant, PopperOptions, Strategy, DeepPartial } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
@@ -348,24 +347,6 @@ export default defineComponent({
|
||||
|
||||
const [trigger, container] = usePopper(popper.value)
|
||||
|
||||
const by = computed(() => {
|
||||
if (!props.by) return undefined
|
||||
|
||||
if (typeof props.by === 'function') {
|
||||
return props.by
|
||||
}
|
||||
|
||||
const key = props.by
|
||||
const hasDot = key.indexOf('.')
|
||||
if (hasDot > 0) {
|
||||
return (a: any, z: any) => {
|
||||
return accessor(a, key) === accessor(z, key)
|
||||
}
|
||||
}
|
||||
|
||||
return key
|
||||
})
|
||||
|
||||
const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
|
||||
const { emitFormBlur, emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config)
|
||||
|
||||
@@ -383,49 +364,39 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
const selected = computed(() => {
|
||||
function compareValues(value1: any, value2: any) {
|
||||
if (by.value && typeof by.value !== 'function' && typeof value1 === 'object' && typeof value2 === 'object') {
|
||||
return isEqual(value1[by.value], value2[by.value])
|
||||
}
|
||||
return isEqual(value1, value2)
|
||||
}
|
||||
|
||||
function getValue(value: any) {
|
||||
if (props.valueAttribute) {
|
||||
return accessor(value, props.valueAttribute)
|
||||
}
|
||||
|
||||
return value
|
||||
}
|
||||
|
||||
if (props.multiple) {
|
||||
const modelValue = props.modelValue
|
||||
if (!Array.isArray(modelValue) || !modelValue.length) {
|
||||
if (!Array.isArray(props.modelValue) || !props.modelValue.length) {
|
||||
return []
|
||||
}
|
||||
|
||||
return options.value.filter((option) => {
|
||||
const optionValue = getValue(option)
|
||||
return modelValue.some(value => compareValues(value, optionValue))
|
||||
})
|
||||
if (props.valueAttribute) {
|
||||
return options.value.filter(option => (props.modelValue as any[]).includes(option[props.valueAttribute]))
|
||||
}
|
||||
return options.value.filter(option => (props.modelValue as any[]).includes(option))
|
||||
}
|
||||
|
||||
return options.value.find((option) => {
|
||||
const optionValue = getValue(option)
|
||||
return compareValues(optionValue, toRaw(props.modelValue))
|
||||
}) ?? props.modelValue
|
||||
if (props.valueAttribute) {
|
||||
return options.value.find(option => option[props.valueAttribute] === props.modelValue)
|
||||
}
|
||||
return options.value.find(option => option === props.modelValue)
|
||||
})
|
||||
|
||||
const label = computed(() => {
|
||||
if (!props.modelValue) return null
|
||||
|
||||
if (Array.isArray(props.modelValue) && props.modelValue.length) {
|
||||
return `${props.modelValue.length} selected`
|
||||
} else if (['string', 'number'].includes(typeof props.modelValue)) {
|
||||
return props.valueAttribute ? accessor(selected.value, props.optionAttribute) : props.modelValue
|
||||
if (props.multiple) {
|
||||
if (Array.isArray(props.modelValue) && props.modelValue.length) {
|
||||
return `${selected.value.length} selected`
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
} else if (props.modelValue !== undefined && props.modelValue !== null) {
|
||||
if (props.valueAttribute) {
|
||||
return accessor(selected.value, props.optionAttribute) ?? null
|
||||
} else {
|
||||
return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : accessor(props.modelValue as Record<string, any>, props.optionAttribute)
|
||||
}
|
||||
}
|
||||
|
||||
return accessor(props.modelValue as Record<string, any>, props.optionAttribute)
|
||||
return null
|
||||
})
|
||||
|
||||
const selectClass = computed(() => {
|
||||
@@ -470,9 +441,9 @@ export default defineComponent({
|
||||
|
||||
const leadingWrapperIconClass = computed(() => {
|
||||
return twJoin(
|
||||
ui.value.icon.leading.wrapper,
|
||||
ui.value.icon.leading.pointer,
|
||||
ui.value.icon.leading.padding[size.value]
|
||||
uiMenu.value.icon.leading.wrapper,
|
||||
uiMenu.value.icon.leading.pointer,
|
||||
uiMenu.value.icon.leading.padding[size.value]
|
||||
)
|
||||
})
|
||||
|
||||
@@ -487,9 +458,9 @@ export default defineComponent({
|
||||
|
||||
const trailingWrapperIconClass = computed(() => {
|
||||
return twJoin(
|
||||
ui.value.icon.trailing.wrapper,
|
||||
ui.value.icon.trailing.pointer,
|
||||
ui.value.icon.trailing.padding[size.value]
|
||||
uiMenu.value.icon.trailing.wrapper,
|
||||
uiMenu.value.icon.trailing.pointer,
|
||||
uiMenu.value.icon.trailing.padding[size.value]
|
||||
)
|
||||
})
|
||||
|
||||
@@ -626,9 +597,7 @@ export default defineComponent({
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
query,
|
||||
onUpdate,
|
||||
onQueryChange,
|
||||
// eslint-disable-next-line vue/no-dupe-keys
|
||||
by
|
||||
onQueryChange
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -23,11 +23,11 @@
|
||||
<script lang="ts">
|
||||
import { ref, computed, toRef, watch, onMounted, nextTick, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import { defu } from 'defu'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { useFormGroup } from '../../composables/useFormGroup'
|
||||
import { looseToNumber, mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig, looseToNumber } from '../../utils'
|
||||
import type { TextareaSize, TextareaColor, TextareaVariant, Strategy, DeepPartial } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -33,11 +33,11 @@
|
||||
import { computed, toRef, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { Switch as HSwitch, provideUseId } from '@headlessui/vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { useFormGroup } from '../../composables/useFormGroup'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import type { ToggleSize, ToggleColor, Strategy, DeepPartial } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -19,9 +19,9 @@
|
||||
<script lang="ts">
|
||||
import { computed, toRef, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import type { DeepPartial, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
<script lang="ts">
|
||||
import { computed, toRef, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import type { DeepPartial, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -21,11 +21,11 @@
|
||||
<script lang="ts">
|
||||
import { toRef, computed, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import UAvatar from '../elements/Avatar.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import type { Avatar, DeepPartial, DividerSize, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
<script lang="ts">
|
||||
import { computed, toRef, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import type { DeepPartial, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -36,11 +36,11 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRef } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import ULink from '../elements/Link.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { getULinkProps, mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig, getULinkProps } from '../../utils'
|
||||
import type { BreadcrumbLink, DeepPartial, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -54,13 +54,13 @@
|
||||
<script lang="ts">
|
||||
import { toRef, defineComponent, computed } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import UAvatar from '../elements/Avatar.vue'
|
||||
import UBadge from '../elements/Badge.vue'
|
||||
import ULink from '../elements/Link.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { getULinkProps, mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig, getULinkProps } from '../../utils'
|
||||
import type { DeepPartial, HorizontalNavigationLink, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -55,14 +55,14 @@
|
||||
<script lang="ts">
|
||||
import { toRef, defineComponent, computed } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import UAvatar from '../elements/Avatar.vue'
|
||||
import UBadge from '../elements/Badge.vue'
|
||||
import ULink from '../elements/Link.vue'
|
||||
import UDivider from '../layout/Divider.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { getULinkProps, mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig, getULinkProps } from '../../utils'
|
||||
import type { VerticalNavigationLink, Strategy, DeepPartial } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -18,10 +18,10 @@ import type { PropType, Ref } from 'vue'
|
||||
import { defu } from 'defu'
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
import type { VirtualElement } from '@popperjs/core'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { usePopper } from '../../composables/usePopper'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import type { DeepPartial, PopperOptions, Strategy } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
@@ -45,13 +45,13 @@
|
||||
<script lang="ts">
|
||||
import { ref, computed, toRef, onMounted, onUnmounted, watch, watchEffect, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import UIcon from '../elements/Icon.vue'
|
||||
import UAvatar from '../elements/Avatar.vue'
|
||||
import UButton from '../elements/Button.vue'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { useTimer } from '../../composables/useTimer'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import type { Avatar, Button, NotificationColor, NotificationAction, Strategy, DeepPartial } from '../../types/index'
|
||||
// @ts-expect-error
|
||||
import appConfig from '#build/app.config'
|
||||
@@ -117,10 +117,6 @@ export default defineComponent({
|
||||
ui: {
|
||||
type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
|
||||
default: () => ({})
|
||||
},
|
||||
pauseTimeoutOnHover: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
emits: ['close'],
|
||||
@@ -161,13 +157,13 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
function onMouseover() {
|
||||
if (props.pauseTimeoutOnHover && timer) {
|
||||
if (timer) {
|
||||
timer.pause()
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseleave() {
|
||||
if (props.pauseTimeoutOnHover && timer) {
|
||||
if (timer) {
|
||||
timer.resume()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="notifications.length" :class="wrapperClass" role="region" v-bind="attrs">
|
||||
<div :class="ui.container">
|
||||
<div :class="wrapperClass" role="region" v-bind="attrs">
|
||||
<div v-if="notifications.length" :class="ui.container">
|
||||
<div v-for="notification of notifications" :key="notification.id">
|
||||
<UNotification
|
||||
v-bind="notification"
|
||||
@@ -22,10 +22,10 @@
|
||||
<script lang="ts">
|
||||
import { computed, toRef, defineComponent } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import { twJoin } from 'tailwind-merge'
|
||||
import { twMerge, twJoin } from 'tailwind-merge'
|
||||
import { useUI } from '../../composables/useUI'
|
||||
import { useToast } from '../../composables/useToast'
|
||||
import { mergeConfig, twMerge } from '../../utils'
|
||||
import { mergeConfig } from '../../utils'
|
||||
import type { DeepPartial, Notification, Strategy } from '../../types/index'
|
||||
import UNotification from './Notification.vue'
|
||||
import { useState } from '#imports'
|
||||
|
||||
3
src/runtime/types/checkbox.d.ts
vendored
3
src/runtime/types/checkbox.d.ts
vendored
@@ -1,3 +0,0 @@
|
||||
import type colors from '#ui-colors'
|
||||
|
||||
export type CheckboxColor = typeof colors[number]
|
||||
2
src/runtime/types/divider.d.ts
vendored
2
src/runtime/types/divider.d.ts
vendored
@@ -1,3 +1,3 @@
|
||||
import type { divider } from '../ui.config'
|
||||
import type { divider } from '#ui/ui.config'
|
||||
|
||||
export type DividerSize = keyof typeof divider.border.size.horizontal | keyof typeof divider.border.size.vertical
|
||||
|
||||
@@ -4,7 +4,6 @@ export * from './avatar'
|
||||
export * from './badge'
|
||||
export * from './breadcrumb'
|
||||
export * from './button'
|
||||
export * from './checkbox'
|
||||
export * from './chip'
|
||||
export * from './clipboard'
|
||||
export * from './command-palette'
|
||||
|
||||
2
src/runtime/types/link.d.ts
vendored
2
src/runtime/types/link.d.ts
vendored
@@ -6,7 +6,7 @@ export interface Link extends NuxtLinkProps {
|
||||
disabled?: boolean
|
||||
active?: boolean
|
||||
exact?: boolean
|
||||
exactQuery?: boolean | 'partial'
|
||||
exactQuery?: boolean
|
||||
exactHash?: boolean
|
||||
inactiveClass?: string
|
||||
}
|
||||
|
||||
2
src/runtime/types/utils.d.ts
vendored
2
src/runtime/types/utils.d.ts
vendored
@@ -7,7 +7,7 @@ export interface TightMap<O = any> {
|
||||
export type DeepPartial<T, O = any> = {
|
||||
[P in keyof T]?: T[P] extends object
|
||||
? DeepPartial<T[P], O>
|
||||
: T[P] extends string ? string : T[P];
|
||||
: T[P];
|
||||
} & {
|
||||
[key: string]: O | TightMap<O>
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import type { ButtonColor, ButtonSize, ButtonVariant, CheckboxColor, ProgressAnimation, ProgressColor } from '../../types'
|
||||
|
||||
export default {
|
||||
wrapper: 'relative overflow-x-auto',
|
||||
base: 'min-w-full table-fixed',
|
||||
@@ -53,23 +51,23 @@ export default {
|
||||
icon: 'i-heroicons-arrows-up-down-20-solid',
|
||||
trailing: true,
|
||||
square: true,
|
||||
color: 'gray' as ButtonColor,
|
||||
variant: 'ghost' as ButtonVariant,
|
||||
color: 'gray' as const,
|
||||
variant: 'ghost' as const,
|
||||
class: '-m-1.5'
|
||||
},
|
||||
expandButton: {
|
||||
icon: 'i-heroicons-chevron-down',
|
||||
color: 'gray' as ButtonColor,
|
||||
variant: 'ghost' as ButtonVariant,
|
||||
size: 'xs' as ButtonSize,
|
||||
color: 'gray' as const,
|
||||
variant: 'ghost' as const,
|
||||
size: 'xs' as const,
|
||||
class: '-my-1.5 align-middle'
|
||||
},
|
||||
checkbox: {
|
||||
color: 'primary' as CheckboxColor
|
||||
color: 'primary' as const
|
||||
},
|
||||
progress: {
|
||||
color: 'primary' as ProgressColor,
|
||||
animation: 'carousel' as ProgressAnimation
|
||||
color: 'primary' as const,
|
||||
animation: 'carousel' as const
|
||||
},
|
||||
loadingState: {
|
||||
icon: 'i-heroicons-arrow-path-20-solid',
|
||||
|
||||
@@ -16,7 +16,7 @@ export default {
|
||||
openIcon: 'i-heroicons-chevron-down-20-solid',
|
||||
closeIcon: '',
|
||||
class: 'mb-1.5 w-full',
|
||||
variant: 'soft',
|
||||
variant: 'soft' as const,
|
||||
truncate: true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import type { AvatarSize, ButtonColor, ButtonSize, ButtonVariant } from '../../types'
|
||||
|
||||
export default {
|
||||
wrapper: 'w-full relative overflow-hidden',
|
||||
inner: 'w-0 flex-1',
|
||||
@@ -15,7 +13,7 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
base: 'flex-shrink-0 self-center',
|
||||
size: 'md' as AvatarSize
|
||||
size: 'md' as const
|
||||
},
|
||||
color: {
|
||||
white: {
|
||||
@@ -34,9 +32,9 @@ export default {
|
||||
icon: null,
|
||||
closeButton: null,
|
||||
actionButton: {
|
||||
size: 'xs' as ButtonSize,
|
||||
color: 'primary' as ButtonColor,
|
||||
variant: 'link' as ButtonVariant
|
||||
size: 'xs' as const,
|
||||
color: 'primary' as const,
|
||||
variant: 'link' as const
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,12 +8,6 @@ export default {
|
||||
md: 'text-sm px-2 py-1',
|
||||
lg: 'text-sm px-2.5 py-1.5'
|
||||
},
|
||||
gap: {
|
||||
xs: 'gap-0.5',
|
||||
sm: 'gap-1',
|
||||
md: 'gap-1',
|
||||
lg: 'gap-1.5'
|
||||
},
|
||||
color: {
|
||||
white: {
|
||||
solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900'
|
||||
@@ -31,15 +25,6 @@ export default {
|
||||
soft: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400',
|
||||
subtle: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25'
|
||||
},
|
||||
icon: {
|
||||
base: 'flex-shrink-0',
|
||||
size: {
|
||||
xs: 'h-4 w-4',
|
||||
sm: 'h-4 w-4',
|
||||
md: 'h-5 w-5',
|
||||
lg: 'h-5 w-5'
|
||||
}
|
||||
},
|
||||
default: {
|
||||
size: 'sm',
|
||||
variant: 'solid',
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import type { ButtonColor } from '../../types'
|
||||
|
||||
export default {
|
||||
wrapper: 'relative',
|
||||
container: 'relative w-full flex overflow-x-auto snap-x snap-mandatory scroll-smooth',
|
||||
@@ -15,12 +13,12 @@ export default {
|
||||
},
|
||||
default: {
|
||||
prevButton: {
|
||||
color: 'black' as ButtonColor,
|
||||
color: 'black' as const,
|
||||
class: 'rtl:[&_span:first-child]:rotate-180 absolute start-4 top-1/2 transform -translate-y-1/2 rounded-full',
|
||||
icon: 'i-heroicons-chevron-left-20-solid'
|
||||
},
|
||||
nextButton: {
|
||||
color: 'black' as ButtonColor,
|
||||
color: 'black' as const,
|
||||
class: 'rtl:[&_span:last-child]:rotate-180 absolute end-4 top-1/2 transform -translate-y-1/2 rounded-full',
|
||||
icon: 'i-heroicons-chevron-right-20-solid'
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import type { AvatarSize } from '../../types'
|
||||
import { arrow } from '../popper'
|
||||
|
||||
export default {
|
||||
@@ -29,7 +28,7 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
base: 'flex-shrink-0',
|
||||
size: '2xs' as AvatarSize
|
||||
size: '2xs' as const
|
||||
},
|
||||
label: 'truncate',
|
||||
shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto'
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import type { AvatarSize } from '../../types'
|
||||
import { arrow } from '../popper'
|
||||
|
||||
export default {
|
||||
@@ -37,7 +36,7 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
base: 'flex-shrink-0',
|
||||
size: '2xs' as AvatarSize
|
||||
size: '2xs' as const
|
||||
},
|
||||
chip: {
|
||||
base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { arrow } from '../popper'
|
||||
import inputMenu from './inputMenu'
|
||||
import input from './input'
|
||||
|
||||
export default {
|
||||
...inputMenu,
|
||||
select: 'inline-flex items-center text-left cursor-default',
|
||||
select: 'inline-flex items-center text-left cursor-default [&:disabled_*]:pointer-events-none',
|
||||
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 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',
|
||||
@@ -20,6 +21,18 @@ export default {
|
||||
popper: {
|
||||
placement: 'bottom-end'
|
||||
},
|
||||
icon: {
|
||||
...input.icon,
|
||||
leading: {
|
||||
...input.icon.leading,
|
||||
pointer: 'pointer-events-auto'
|
||||
},
|
||||
trailing: {
|
||||
...input.icon.trailing,
|
||||
pointer: 'pointer-events-auto'
|
||||
}
|
||||
|
||||
},
|
||||
default: {
|
||||
selectedIcon: 'i-heroicons-check-20-solid',
|
||||
clearSearchOnClose: false,
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import type { AvatarSize } from '../../types'
|
||||
|
||||
export default {
|
||||
wrapper: {
|
||||
base: 'flex items-center align-center text-center',
|
||||
@@ -44,11 +42,11 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
base: 'flex-shrink-0',
|
||||
size: '2xs' as AvatarSize
|
||||
size: '2xs' as const
|
||||
},
|
||||
label: 'text-sm',
|
||||
default: {
|
||||
size: '2xs',
|
||||
type: 'solid'
|
||||
size: '2xs' as const,
|
||||
type: 'solid' as const
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import type { AvatarSize } from '../../types'
|
||||
|
||||
export default {
|
||||
wrapper: 'flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800',
|
||||
container: 'relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2',
|
||||
@@ -48,7 +46,7 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
base: 'flex-shrink-0',
|
||||
size: '2xs' as AvatarSize
|
||||
size: '2xs' as const
|
||||
},
|
||||
chip: {
|
||||
base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import type { AvatarSize, BadgeColor, BadgeSize, BadgeVariant } from '../../types'
|
||||
|
||||
export default {
|
||||
wrapper: 'relative w-full flex items-center justify-between',
|
||||
container: 'flex items-center min-w-0',
|
||||
@@ -17,12 +15,12 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
base: 'flex-shrink-0',
|
||||
size: '2xs' as AvatarSize
|
||||
size: '2xs' as const
|
||||
},
|
||||
badge: {
|
||||
base: 'flex-shrink-0 ms-auto relative rounded',
|
||||
color: 'gray' as BadgeColor,
|
||||
variant: 'solid' as BadgeVariant,
|
||||
size: 'xs' as BadgeSize
|
||||
color: 'gray' as const,
|
||||
variant: 'solid' as const,
|
||||
size: 'xs' as const
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import type { ButtonColor } from '../../types'
|
||||
|
||||
export default {
|
||||
wrapper: 'flex items-center -space-x-px',
|
||||
base: '',
|
||||
@@ -7,28 +5,28 @@ export default {
|
||||
default: {
|
||||
size: 'sm',
|
||||
activeButton: {
|
||||
color: 'primary' as ButtonColor
|
||||
color: 'primary' as const
|
||||
},
|
||||
inactiveButton: {
|
||||
color: 'white' as ButtonColor
|
||||
color: 'white' as const
|
||||
},
|
||||
firstButton: {
|
||||
color: 'white' as ButtonColor,
|
||||
color: 'white' as const,
|
||||
class: 'rtl:[&_span:first-child]:rotate-180',
|
||||
icon: 'i-heroicons-chevron-double-left-20-solid'
|
||||
},
|
||||
lastButton: {
|
||||
color: 'white' as ButtonColor,
|
||||
color: 'white' as const,
|
||||
class: 'rtl:[&_span:last-child]:rotate-180',
|
||||
icon: 'i-heroicons-chevron-double-right-20-solid'
|
||||
},
|
||||
prevButton: {
|
||||
color: 'white' as ButtonColor,
|
||||
color: 'white' as const,
|
||||
class: 'rtl:[&_span:first-child]:rotate-180',
|
||||
icon: 'i-heroicons-chevron-left-20-solid'
|
||||
},
|
||||
nextButton: {
|
||||
color: 'white' as ButtonColor,
|
||||
color: 'white' as const,
|
||||
class: 'rtl:[&_span:last-child]:rotate-180',
|
||||
icon: 'i-heroicons-chevron-right-20-solid'
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import type { AvatarSize, BadgeColor, BadgeSize, BadgeVariant } from '../../types'
|
||||
|
||||
export default {
|
||||
wrapper: 'relative',
|
||||
base: 'group relative flex items-center gap-1.5 focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
|
||||
@@ -19,13 +17,13 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
base: 'flex-shrink-0',
|
||||
size: '2xs' as AvatarSize
|
||||
size: '2xs' as const
|
||||
},
|
||||
badge: {
|
||||
base: 'flex-shrink-0 ms-auto relative rounded',
|
||||
color: 'gray' as BadgeColor,
|
||||
variant: 'solid' as BadgeVariant,
|
||||
size: 'xs' as BadgeSize
|
||||
color: 'gray' as const,
|
||||
variant: 'solid' as const,
|
||||
size: 'xs' as const
|
||||
},
|
||||
divider: {
|
||||
wrapper: {
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import type { AvatarSize, ButtonColor, ButtonSize, ButtonVariant } from '../../types'
|
||||
|
||||
export default {
|
||||
wrapper: 'w-full pointer-events-auto',
|
||||
container: 'relative overflow-hidden',
|
||||
@@ -19,7 +17,7 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
base: 'flex-shrink-0 self-center',
|
||||
size: 'md' as AvatarSize
|
||||
size: 'md' as const
|
||||
},
|
||||
progress: {
|
||||
base: 'absolute bottom-0 end-0 start-0 h-1',
|
||||
@@ -40,13 +38,13 @@ export default {
|
||||
timeout: 5000,
|
||||
closeButton: {
|
||||
icon: 'i-heroicons-x-mark-20-solid',
|
||||
color: 'gray' as ButtonColor,
|
||||
variant: 'link' as ButtonVariant,
|
||||
color: 'gray' as const,
|
||||
variant: 'link' as const,
|
||||
padded: false
|
||||
},
|
||||
actionButton: {
|
||||
size: 'xs' as ButtonSize,
|
||||
color: 'white' as ButtonColor
|
||||
size: 'xs' as const,
|
||||
color: 'white' as const
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
import { defu, createDefu } from 'defu'
|
||||
import { extendTailwindMerge } from 'tailwind-merge'
|
||||
import type { Strategy } from '../types/index'
|
||||
// @ts-ignore
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
export const twMerge = extendTailwindMerge<string, string>(defu({
|
||||
const customTwMerge = extendTailwindMerge<string, string>({
|
||||
extend: {
|
||||
classGroups: {
|
||||
icons: [(classPart: string) => classPart.startsWith('i-')]
|
||||
}
|
||||
}
|
||||
}, appConfig.ui?.tailwindMerge))
|
||||
})
|
||||
|
||||
const defuTwMerge = createDefu((obj, key, value, namespace) => {
|
||||
if (namespace === 'default' || namespace.startsWith('default.')) {
|
||||
@@ -30,7 +28,7 @@ const defuTwMerge = createDefu((obj, key, value, namespace) => {
|
||||
}
|
||||
if (typeof obj[key] === 'string' && typeof value === 'string' && obj[key] && value) {
|
||||
// @ts-ignore
|
||||
obj[key] = twMerge(obj[key], value)
|
||||
obj[key] = customTwMerge(obj[key], value)
|
||||
return true
|
||||
}
|
||||
})
|
||||
|
||||
@@ -30,26 +30,21 @@ export default function installTailwind(
|
||||
|
||||
// 2. add config template
|
||||
const configTemplate = addTemplate({
|
||||
filename: 'nuxtui-tailwind.config.mjs',
|
||||
filename: 'nuxtui-tailwind.config.cjs',
|
||||
write: true,
|
||||
getContents: ({ nuxt }) => `
|
||||
import { defaultExtractor as createDefaultExtractor } from "tailwindcss/lib/lib/defaultExtractor.js";
|
||||
import { customSafelistExtractor, generateSafelist } from ${JSON.stringify(resolve(runtimeDir, 'utils', 'colors'))};
|
||||
import formsPlugin from "@tailwindcss/forms";
|
||||
import aspectRatio from "@tailwindcss/aspect-ratio";
|
||||
import typography from "@tailwindcss/typography";
|
||||
import containerQueries from "@tailwindcss/container-queries";
|
||||
import headlessUi from "@headlessui/tailwindcss";
|
||||
const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor.js')
|
||||
const { customSafelistExtractor, generateSafelist } = require(${JSON.stringify(resolve(runtimeDir, 'utils', 'colors'))})
|
||||
|
||||
const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } });
|
||||
const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
|
||||
|
||||
export default {
|
||||
module.exports = {
|
||||
plugins: [
|
||||
formsPlugin({ strategy: 'class' }),
|
||||
aspectRatio,
|
||||
typography,
|
||||
containerQueries,
|
||||
headlessUi
|
||||
require('@tailwindcss/forms')({ strategy: 'class' }),
|
||||
require('@tailwindcss/aspect-ratio'),
|
||||
require('@tailwindcss/typography'),
|
||||
require('@tailwindcss/container-queries'),
|
||||
require('@headlessui/tailwindcss')
|
||||
],
|
||||
content: {
|
||||
files: [
|
||||
|
||||
Reference in New Issue
Block a user