mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-15 12:39:35 +01:00
Compare commits
3 Commits
pr/1945
...
feat/custo
| Author | SHA1 | Date | |
|---|---|---|---|
|
259a43930c | ||
|
|
b7ab65b0c9 | ||
|
|
18a1c17d98 |
4
.github/workflows/stale.yml
vendored
4
.github/workflows/stale.yml
vendored
@@ -33,5 +33,5 @@ jobs:
|
||||
Thank you for your understanding and support!
|
||||
|
||||
— Nuxt UI Team
|
||||
exempt-issue-labels: 'feature,announcement,release,reka-ui,upstream'
|
||||
operations-per-run: 300
|
||||
exempt-issue-labels: 'feature,announcement'
|
||||
operations-per-run: 300
|
||||
@@ -35,7 +35,7 @@ ${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
|
||||
import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
|
||||
${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
|
||||
|
||||
type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'${pro ? `, '${key}'` : ''}>
|
||||
type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
|
||||
|
||||
export interface ${upperName}Props {
|
||||
/**
|
||||
@@ -80,7 +80,7 @@ ${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
|
||||
import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
|
||||
${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
|
||||
|
||||
type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'${pro ? `, '${key}'` : ''}>
|
||||
type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
|
||||
|
||||
export interface ${upperName}Props extends Pick<${upperName}RootProps> {
|
||||
class?: any
|
||||
|
||||
@@ -53,7 +53,7 @@ provide('navigation', mappedNavigation)
|
||||
<NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />
|
||||
|
||||
<template v-if="!route.path.startsWith('/examples')">
|
||||
<Banner />
|
||||
<!-- <Banner /> -->
|
||||
|
||||
<Header :links="links" />
|
||||
</template>
|
||||
|
||||
@@ -1,19 +1,15 @@
|
||||
<template>
|
||||
<UBanner
|
||||
id="nuxtlabs-join-vercel"
|
||||
title="NuxtLabs is joining Vercel"
|
||||
icon="i-simple-icons-vercel"
|
||||
to="https://nuxtlabs.com/?utm_source=nuxt-ui&utm_medium=banner&utm_campaign=nuxtlabs-vercel"
|
||||
target="_blank"
|
||||
id="ui3-launch"
|
||||
title="Nuxt UI v3 is officially released!"
|
||||
icon="i-lucide-rocket"
|
||||
:actions="[
|
||||
{
|
||||
label: 'Discover Nuxt UI Pro',
|
||||
to: '/pro/pricing',
|
||||
trailingIcon: 'i-lucide-arrow-right'
|
||||
}
|
||||
]"
|
||||
close
|
||||
:actions="[{
|
||||
label: 'Read the announcement',
|
||||
color: 'neutral',
|
||||
variant: 'outline',
|
||||
trailingIcon: 'i-lucide-arrow-right',
|
||||
to: 'https://nuxtlabs.com/?utm_source=nuxt-ui&utm_medium=banner&utm_campaign=nuxtlabs-vercel',
|
||||
target: '_blank',
|
||||
class: 'ring-0'
|
||||
}]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -34,7 +34,7 @@ const meta = await fetchComponentMeta(name as any)
|
||||
</ProseCode>
|
||||
</ProseTd>
|
||||
<ProseTd>
|
||||
<HighlightInlineType v-if="slot.type" :type="slot.type.replace(/ui:\s*\{[^}]*\}/g, 'ui: {}')" />
|
||||
<HighlightInlineType v-if="slot.type" :type="slot.type" />
|
||||
|
||||
<MDC v-if="slot.description" :value="slot.description" class="text-toned mt-1" :cache-key="`${kebabCase(route.path)}-${slot.name}-description`" />
|
||||
</ProseTd>
|
||||
|
||||
@@ -14,8 +14,8 @@ const items = [
|
||||
v-slot="{ item }"
|
||||
orientation="vertical"
|
||||
:items="items"
|
||||
:ui="{ container: 'h-[336px]' }"
|
||||
class="w-full max-w-xs mx-auto"
|
||||
:ui="{ container: 'h-[336px]' }"
|
||||
>
|
||||
<img :src="item" width="320" height="320" class="rounded-lg">
|
||||
</UCarousel>
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const groups = [
|
||||
{
|
||||
id: 'actions',
|
||||
items: [
|
||||
{
|
||||
label: 'Add new file',
|
||||
suffix: 'Create a new file in the current directory',
|
||||
icon: 'i-lucide-file-plus',
|
||||
kbds: ['meta', 'N']
|
||||
},
|
||||
{
|
||||
label: 'Add new folder',
|
||||
suffix: 'Create a new folder in the current directory',
|
||||
icon: 'i-lucide-folder-plus',
|
||||
kbds: ['meta', 'F']
|
||||
},
|
||||
{
|
||||
label: 'Search files',
|
||||
suffix: 'Search across all files in the project',
|
||||
icon: 'i-lucide-search',
|
||||
kbds: ['meta', 'P']
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
suffix: 'Open application settings',
|
||||
icon: 'i-lucide-settings',
|
||||
kbds: ['meta', ',']
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'recent',
|
||||
label: 'Recent',
|
||||
items: [
|
||||
{
|
||||
label: 'project.vue',
|
||||
suffix: 'components/',
|
||||
icon: 'i-vscode-icons-file-type-vue'
|
||||
},
|
||||
{
|
||||
label: 'readme.md',
|
||||
suffix: 'docs/',
|
||||
icon: 'i-vscode-icons-file-type-markdown'
|
||||
},
|
||||
{
|
||||
label: 'package.json',
|
||||
suffix: 'root/',
|
||||
icon: 'i-vscode-icons-file-type-node'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCommandPalette :groups="groups" class="flex-1 h-80">
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
|
||||
<div class="flex items-center gap-1">
|
||||
<UButton color="neutral" variant="ghost" label="Open Command" class="text-dimmed" size="xs">
|
||||
<template #trailing>
|
||||
<UKbd value="enter" />
|
||||
</template>
|
||||
</UButton>
|
||||
<USeparator orientation="vertical" class="h-4" />
|
||||
<UButton color="neutral" variant="ghost" label="Actions" class="text-dimmed" size="xs">
|
||||
<template #trailing>
|
||||
<UKbd value="meta" />
|
||||
<UKbd value="k" />
|
||||
</template>
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UCommandPalette>
|
||||
</template>
|
||||
@@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<UDrawer :ui="{ content: 'h-full', overlay: 'bg-inverted/30' }">
|
||||
<UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
|
||||
|
||||
<template #footer>
|
||||
<UDrawer nested :ui="{ content: 'h-full', overlay: 'bg-inverted/30' }">
|
||||
<UButton color="neutral" variant="outline" label="Open nested" />
|
||||
|
||||
<template #content>
|
||||
<Placeholder class="flex-1 m-4" />
|
||||
</template>
|
||||
</UDrawer>
|
||||
</template>
|
||||
</UDrawer>
|
||||
</template>
|
||||
@@ -1,31 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
|
||||
key: 'typicode-users-email',
|
||||
transform: (data: { id: number, name: string, email: string }[]) => {
|
||||
return data?.map(user => ({
|
||||
label: user.name,
|
||||
value: String(user.id),
|
||||
email: user.email,
|
||||
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
|
||||
}))
|
||||
},
|
||||
lazy: true
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UInputMenu
|
||||
:items="users"
|
||||
icon="i-lucide-user"
|
||||
placeholder="Select user"
|
||||
:ui="{ content: 'min-w-fit' }"
|
||||
>
|
||||
<template #item-label="{ item }">
|
||||
{{ item.label }}
|
||||
|
||||
<span class="text-muted">
|
||||
{{ item.email }}
|
||||
</span>
|
||||
</template>
|
||||
</UInputMenu>
|
||||
</template>
|
||||
@@ -35,7 +35,6 @@ const items = ref([
|
||||
}
|
||||
}
|
||||
] satisfies InputMenuItem[])
|
||||
|
||||
const value = ref(items.value[0])
|
||||
</script>
|
||||
|
||||
|
||||
@@ -40,9 +40,9 @@ const text = computed(() => {
|
||||
placeholder="Password"
|
||||
:color="color"
|
||||
:type="show ? 'text' : 'password'"
|
||||
:ui="{ trailing: 'pe-1' }"
|
||||
:aria-invalid="score < 4"
|
||||
aria-describedby="password-strength"
|
||||
:ui="{ trailing: 'pe-1' }"
|
||||
class="w-full"
|
||||
>
|
||||
<template #trailing>
|
||||
|
||||
@@ -24,10 +24,3 @@ const password = ref('')
|
||||
</template>
|
||||
</UInput>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* Hide the password reveal button in Edge */
|
||||
::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -62,13 +62,13 @@ const items = [
|
||||
<template>
|
||||
<UNavigationMenu
|
||||
:items="items"
|
||||
class="w-full justify-center"
|
||||
:ui="{
|
||||
viewport: 'sm:w-(--reka-navigation-menu-viewport-width)',
|
||||
content: 'sm:w-auto',
|
||||
childList: 'sm:w-96',
|
||||
childLinkDescription: 'text-balance line-clamp-2'
|
||||
}"
|
||||
class="w-full justify-center"
|
||||
>
|
||||
<template #docs-content="{ item }">
|
||||
<ul class="grid gap-2 p-4 lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]">
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
|
||||
key: 'typicode-users-email',
|
||||
transform: (data: { id: number, name: string, email: string }[]) => {
|
||||
return data?.map(user => ({
|
||||
label: user.name,
|
||||
value: String(user.id),
|
||||
email: user.email,
|
||||
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
|
||||
}))
|
||||
},
|
||||
lazy: true
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<USelectMenu
|
||||
:items="users"
|
||||
icon="i-lucide-user"
|
||||
placeholder="Select user"
|
||||
:ui="{ content: 'min-w-fit' }"
|
||||
class="w-48"
|
||||
>
|
||||
<template #item-label="{ item }">
|
||||
{{ item.label }}
|
||||
|
||||
<span class="text-muted">
|
||||
{{ item.email }}
|
||||
</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
@@ -35,7 +35,6 @@ const items = ref([
|
||||
}
|
||||
}
|
||||
] satisfies SelectMenuItem[])
|
||||
|
||||
const value = ref(items.value[0])
|
||||
</script>
|
||||
|
||||
|
||||
@@ -24,7 +24,6 @@ const items = ref([
|
||||
}
|
||||
}
|
||||
] satisfies SelectMenuItem[])
|
||||
|
||||
const value = ref(items.value[0])
|
||||
</script>
|
||||
|
||||
|
||||
@@ -23,7 +23,6 @@ const items = ref([
|
||||
icon: 'i-lucide-circle-check'
|
||||
}
|
||||
] satisfies SelectMenuItem[])
|
||||
|
||||
const value = ref(items.value[0])
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const value = ref<string>()
|
||||
|
||||
const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
|
||||
key: 'typicode-users-email',
|
||||
transform: (data: { id: number, name: string, email: string }[]) => {
|
||||
return data?.map(user => ({
|
||||
label: user.name,
|
||||
email: user.email,
|
||||
value: String(user.id),
|
||||
avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
|
||||
}))
|
||||
},
|
||||
lazy: true
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<USelect
|
||||
v-model="value"
|
||||
:items="users"
|
||||
placeholder="Select user"
|
||||
value-key="value"
|
||||
:ui="{ content: 'min-w-fit' }"
|
||||
class="w-48"
|
||||
>
|
||||
<template #item-label="{ item }">
|
||||
{{ item.label }}
|
||||
|
||||
<span class="text-muted">
|
||||
{{ item.email }}
|
||||
</span>
|
||||
</template>
|
||||
</USelect>
|
||||
</template>
|
||||
@@ -24,8 +24,8 @@ function getUserAvatar(value: string) {
|
||||
:loading="status === 'pending'"
|
||||
icon="i-lucide-user"
|
||||
placeholder="Select user"
|
||||
value-key="value"
|
||||
class="w-48"
|
||||
value-key="value"
|
||||
>
|
||||
<template #leading="{ modelValue, ui }">
|
||||
<UAvatar
|
||||
|
||||
@@ -35,7 +35,6 @@ const items = ref([
|
||||
}
|
||||
}
|
||||
] satisfies SelectItem[])
|
||||
|
||||
const value = ref(items.value[0]?.value)
|
||||
|
||||
const avatar = computed(() => items.value.find(item => item.value === value.value)?.avatar)
|
||||
|
||||
@@ -23,7 +23,6 @@ const items = ref([
|
||||
icon: 'i-lucide-circle-check'
|
||||
}
|
||||
] satisfies SelectItem[])
|
||||
|
||||
const value = ref(items.value[0]?.value)
|
||||
|
||||
const icon = computed(() => items.value.find(item => item.value === value.value)?.icon)
|
||||
|
||||
@@ -26,7 +26,7 @@ const state = reactive({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTabs :items="items" variant="link" :ui="{ trigger: 'grow' }" class="gap-4 w-full">
|
||||
<UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'grow' }">
|
||||
<template #account="{ item }">
|
||||
<p class="text-muted mb-4">
|
||||
{{ item.description }}
|
||||
|
||||
@@ -27,8 +27,8 @@ const items: TimelineItem[] = [{
|
||||
<template>
|
||||
<UTimeline
|
||||
:items="items"
|
||||
:default-value="2"
|
||||
:ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] even:text-right' }"
|
||||
:default-value="2"
|
||||
class="translate-x-[calc(50%-1rem)]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -42,11 +42,11 @@ const items = [{
|
||||
<UTimeline
|
||||
:items="items"
|
||||
size="xs"
|
||||
class="w-96"
|
||||
:ui="{
|
||||
date: 'float-end ms-1',
|
||||
description: 'px-3 py-2 ring ring-default mt-2 rounded-md text-default'
|
||||
}"
|
||||
class="w-96"
|
||||
>
|
||||
<template #title="{ item }">
|
||||
<span>{{ item.username }}</span>
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const toast = useToast()
|
||||
|
||||
function showToast() {
|
||||
toast.add({
|
||||
title: 'Uh oh! Something went wrong.',
|
||||
description: 'There was a problem with your request.',
|
||||
icon: 'i-lucide-wifi',
|
||||
progress: false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
|
||||
</template>
|
||||
@@ -7,12 +7,12 @@ const appConfig = useAppConfig()
|
||||
<UFormField
|
||||
label="toaster.duration"
|
||||
size="sm"
|
||||
class="inline-flex ring ring-accented rounded-sm"
|
||||
:ui="{
|
||||
wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
|
||||
label: 'text-muted px-2 py-1.5',
|
||||
container: 'mt-0'
|
||||
}"
|
||||
class="inline-flex ring ring-accented rounded-sm"
|
||||
>
|
||||
<UInput
|
||||
v-model="appConfig.toaster.duration"
|
||||
|
||||
@@ -7,12 +7,12 @@ const appConfig = useAppConfig()
|
||||
<UFormField
|
||||
label="toaster.expand"
|
||||
size="sm"
|
||||
class="inline-flex ring ring-accented rounded-sm"
|
||||
:ui="{
|
||||
wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
|
||||
label: 'text-muted px-2 py-1.5',
|
||||
container: 'mt-0'
|
||||
}"
|
||||
class="inline-flex ring ring-accented rounded-sm"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="appConfig.toaster.expand"
|
||||
|
||||
@@ -10,12 +10,12 @@ const appConfig = useAppConfig()
|
||||
<UFormField
|
||||
label="toaster.position"
|
||||
size="sm"
|
||||
class="inline-flex ring ring-accented rounded-sm"
|
||||
:ui="{
|
||||
wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
|
||||
label: 'text-muted px-2 py-1.5',
|
||||
container: 'mt-0'
|
||||
}"
|
||||
class="inline-flex ring ring-accented rounded-sm"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="appConfig.toaster.position"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { onMounted, watch } from 'vue'
|
||||
import FaviconSvg from '../../public/icon.svg?raw'
|
||||
import FaviconSvg from 'public/icon.svg?raw'
|
||||
|
||||
export function useFaviconFromTheme() {
|
||||
const colorMode = useColorMode()
|
||||
|
||||
@@ -59,7 +59,7 @@ provide('navigation', mappedNavigation)
|
||||
<UApp>
|
||||
<NuxtLoadingIndicator color="#FFF" />
|
||||
|
||||
<Banner />
|
||||
<!-- <Banner /> -->
|
||||
|
||||
<Header :links="links" />
|
||||
|
||||
|
||||
@@ -5,17 +5,6 @@ pricing:
|
||||
title: Upgrade to Nuxt UI [Pro]{class="text-primary"}.
|
||||
description: On top of 40+ open source components from Nuxt UI, Pro gives you access to 50+ premium Vue components to create beautiful & responsive Nuxt applications in minutes. It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.
|
||||
freePlan:
|
||||
description: "**NuxtLabs is joining Vercel** :tada: As part of this transition, Nuxt UI is becoming even more accessible.<br><br> **In September, we're launching Nuxt UI v4**: a free, open-source library that unifies Nuxt UI and Nuxt UI Pro, offering 100+ components and a complete free Figma Kit for everyone."
|
||||
orientation: horizontal
|
||||
button:
|
||||
label: Read the announcement
|
||||
to: 'https://nuxtlabs.com/?utm_source=nuxt-ui&utm_medium=banner&utm_campaign=nuxtlabs-vercel'
|
||||
target: _blank
|
||||
color: 'neutral'
|
||||
trailingIcon: 'i-lucide-arrow-right'
|
||||
ui:
|
||||
trailingIcon: 'ms-0'
|
||||
devPlan:
|
||||
title: Free in development
|
||||
description: Try Nuxt UI Pro for free in development, no credit card required. Upgrade when ready to deploy.
|
||||
orientation: horizontal
|
||||
@@ -24,9 +13,6 @@ pricing:
|
||||
to: '/getting-started/installation/pro/nuxt'
|
||||
color: 'neutral'
|
||||
variant: 'subtle'
|
||||
trailingIcon: 'i-lucide-arrow-right'
|
||||
ui:
|
||||
trailingIcon: 'ms-0'
|
||||
figma:
|
||||
title: Figma Kit Pro
|
||||
description: Get all Nuxt UI Pro components in a Figma kit to design your next application before coding. Everything you need, from wire-framing to high-fidelity web integration.
|
||||
|
||||
@@ -34,19 +34,10 @@ useSeoMeta({
|
||||
<div class="flex flex-col bg-default gap-8 lg:gap-0">
|
||||
<UPricingPlan
|
||||
v-bind="page.pricing.freePlan"
|
||||
class="lg:rounded-none ring-primary/15 ring-inset -mb-px bg-primary/5 z-[1]"
|
||||
:ui="{ description: 'mt-0 text-primary' }"
|
||||
>
|
||||
<template #description>
|
||||
<MDC :value="page.pricing.freePlan.description" unwrap="p" />
|
||||
</template>
|
||||
</UPricingPlan>
|
||||
|
||||
<UPricingPlan
|
||||
v-bind="page.pricing.devPlan"
|
||||
class="lg:rounded-none ring-inset -mb-px"
|
||||
variant="naked"
|
||||
class="lg:rounded-none border-x border-default border-t border-b lg:border-b-0"
|
||||
/>
|
||||
<UPricingPlans compact class="-space-x-px">
|
||||
<UPricingPlans compact>
|
||||
<UPricingPlan
|
||||
v-for="(plan, index) in page.pricing.plans"
|
||||
:key="index"
|
||||
@@ -56,17 +47,18 @@ useSeoMeta({
|
||||
:discount="plan.discount"
|
||||
:billing-period="plan.billing_period"
|
||||
:billing-cycle="plan.billing_cycle"
|
||||
:variant="plan.highlight ? 'subtle' : 'outline'"
|
||||
class="lg:rounded-none ring-inset -mb-px"
|
||||
:variant="plan.highlight ? 'soft' : 'outline'"
|
||||
:class="['lg:rounded-none', { 'border-2 lg:border lg:border-x-0 border-primary lg:border-default': plan.highlight }]"
|
||||
:features="plan.features"
|
||||
:button="plan.button"
|
||||
/>
|
||||
</UPricingPlans>
|
||||
<UPricingPlan
|
||||
v-bind="page.pricing.figma"
|
||||
variant="naked"
|
||||
:billing-period="page.pricing.figma.billing_period"
|
||||
:billing-cycle="page.pricing.figma.billing_cycle"
|
||||
class="lg:rounded-none ring-inset -mb-px"
|
||||
class="lg:rounded-none border lg:border-y-0 border-default"
|
||||
>
|
||||
<template #features>
|
||||
<li v-for="(feature, index) in page.pricing.figma.features" :key="index" class="flex items-center gap-2 min-w-0">
|
||||
|
||||
@@ -225,27 +225,6 @@ export default defineNuxtConfig({
|
||||
This option adds the `transition-colors` class on components with hover or active states.
|
||||
::
|
||||
|
||||
### `theme.defaultVariants` :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
Use the `theme.defaultVariants` option to override the default `color` and `size` variants for components.
|
||||
|
||||
- Default: `{ color: 'primary', size: 'md' }`{lang="ts-type"}
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui'],
|
||||
css: ['~/assets/css/main.css'],
|
||||
ui: {
|
||||
theme: {
|
||||
defaultVariants: {
|
||||
color: 'neutral',
|
||||
size: 'sm'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Continuous Releases
|
||||
|
||||
Nuxt UI uses [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.
|
||||
|
||||
@@ -333,32 +333,6 @@ export default defineConfig({
|
||||
This option adds the `transition-colors` class on components with hover or active states.
|
||||
::
|
||||
|
||||
### `theme.defaultVariants` :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
Use the `theme.defaultVariants` option to override the default `color` and `size` variants for components.
|
||||
|
||||
- Default: `{ color: 'primary', size: 'md' }`{lang="ts-type"}
|
||||
|
||||
```ts [vite.config.ts]
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import ui from '@nuxt/ui/vite'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
ui({
|
||||
theme: {
|
||||
defaultVariants: {
|
||||
color: 'neutral',
|
||||
size: 'sm'
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
### `inertia`
|
||||
|
||||
Use the `inertia` option to enable compatibility with [Inertia.js](https://inertiajs.com/).
|
||||
|
||||
@@ -536,33 +536,6 @@ import { ModalExampleComponent } from '#components'
|
||||
</script>
|
||||
```
|
||||
|
||||
### Changed form validation
|
||||
|
||||
- The error object property for targeting form fields has been renamed from `path` to `name`:
|
||||
|
||||
```diff
|
||||
<script setup lang="ts">
|
||||
const validate = (state: any): FormError[] => {
|
||||
const errors = []
|
||||
if (!state.email) {
|
||||
errors.push({
|
||||
- path: 'email',
|
||||
+ name: 'email',
|
||||
message: 'Required'
|
||||
})
|
||||
}
|
||||
if (!state.password) {
|
||||
errors.push({
|
||||
- path: 'password',
|
||||
+ name: 'password',
|
||||
message: 'Required'
|
||||
})
|
||||
}
|
||||
return errors
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
::warning
|
||||
|
||||
@@ -87,7 +87,7 @@ Read more about this in the `@nuxt/icon` documentation.
|
||||
|
||||
You can use local SVG files to create a custom Iconify collection.
|
||||
|
||||
For example, place your icons' SVG files under a folder of your choice, for example, `./app/assets/icons`:
|
||||
For example, place your icons' SVG files under a folder of your choice, for example, `./assets/icons`:
|
||||
|
||||
```bash
|
||||
assets/icons
|
||||
@@ -104,7 +104,7 @@ export default defineNuxtConfig({
|
||||
icon: {
|
||||
customCollections: [{
|
||||
prefix: 'custom',
|
||||
dir: './app/assets/icons'
|
||||
dir: './assets/icons'
|
||||
}]
|
||||
}
|
||||
})
|
||||
|
||||
@@ -877,20 +877,6 @@ props:
|
||||
This can be useful when using the CommandPalette inside a [`Modal`](/components/modal) for example.
|
||||
::
|
||||
|
||||
### With footer slot :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
Use the `#footer` slot to add custom content at the bottom of the CommandPalette, such as keyboard shortcuts help or additional actions.
|
||||
|
||||
::component-example
|
||||
---
|
||||
collapse: true
|
||||
name: 'command-palette-footer-slot-example'
|
||||
class: '!p-0'
|
||||
props:
|
||||
autofocus: false
|
||||
---
|
||||
::
|
||||
|
||||
### With custom slot
|
||||
|
||||
Use the `slot` property to customize a specific item or group.
|
||||
|
||||
@@ -328,17 +328,6 @@ name: 'drawer-responsive-example'
|
||||
---
|
||||
::
|
||||
|
||||
### Nested drawers :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
You can nest drawers within each other by using the `nested` prop.
|
||||
|
||||
::component-example
|
||||
---
|
||||
prettier: true
|
||||
name: 'drawer-nested-example'
|
||||
---
|
||||
::
|
||||
|
||||
### With footer slot
|
||||
|
||||
Use the `#footer` slot to add content after the Drawer's body.
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
title: FileUpload
|
||||
description: ''
|
||||
links:
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/FileUpload.vue
|
||||
navigation.badge: Soon
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
## Examples
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
:component-props
|
||||
|
||||
### Slots
|
||||
|
||||
:component-slots
|
||||
|
||||
### Emits
|
||||
|
||||
:component-emits
|
||||
|
||||
## Theme
|
||||
|
||||
:component-theme
|
||||
@@ -757,33 +757,6 @@ name: 'input-menu-filter-fields-example'
|
||||
---
|
||||
::
|
||||
|
||||
### With full content width
|
||||
|
||||
You can expand the content to the full width of its items by using the `ui.content` key.
|
||||
|
||||
::component-example
|
||||
---
|
||||
name: 'input-menu-content-width-example'
|
||||
collapse: true
|
||||
---
|
||||
::
|
||||
|
||||
::tip
|
||||
You can also change the content width globally in your `app.config.ts`:
|
||||
|
||||
```
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
inputMenu: {
|
||||
slots: {
|
||||
content: 'min-w-fit'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
### As a CountryPicker
|
||||
|
||||
This example demonstrates using the InputMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.
|
||||
|
||||
@@ -62,19 +62,6 @@ items:
|
||||
---
|
||||
::
|
||||
|
||||
### Color :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
Use the `color` prop to change the color of the Kbd.
|
||||
|
||||
::component-code
|
||||
---
|
||||
props:
|
||||
color: neutral
|
||||
slots:
|
||||
default: K
|
||||
---
|
||||
::
|
||||
|
||||
### Variant
|
||||
|
||||
Use the `variant` prop to change the variant of the Kbd.
|
||||
@@ -82,7 +69,6 @@ Use the `variant` prop to change the variant of the Kbd.
|
||||
::component-code
|
||||
---
|
||||
props:
|
||||
color: neutral
|
||||
variant: solid
|
||||
slots:
|
||||
default: K
|
||||
|
||||
@@ -790,33 +790,6 @@ name: 'select-menu-filter-fields-example'
|
||||
---
|
||||
::
|
||||
|
||||
### With full content width
|
||||
|
||||
You can expand the content to the full width of its items by using the `ui.content` key.
|
||||
|
||||
::component-example
|
||||
---
|
||||
name: 'select-menu-content-width-example'
|
||||
collapse: true
|
||||
---
|
||||
::
|
||||
|
||||
::tip
|
||||
You can also change the content width globally in your `app.config.ts`:
|
||||
|
||||
```
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
selectMenu: {
|
||||
slots: {
|
||||
content: 'min-w-fit'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
### As a CountryPicker
|
||||
|
||||
This example demonstrates using the SelectMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.
|
||||
@@ -828,8 +801,6 @@ name: 'select-menu-countries-example'
|
||||
---
|
||||
::
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@@ -695,33 +695,6 @@ collapse: true
|
||||
---
|
||||
::
|
||||
|
||||
### With full content width
|
||||
|
||||
You can expand the content to the full width of its items by using the `ui.content` key.
|
||||
|
||||
::component-example
|
||||
---
|
||||
name: 'select-content-width-example'
|
||||
collapse: true
|
||||
---
|
||||
::
|
||||
|
||||
::tip
|
||||
You can also change the content width globally in your `app.config.ts`:
|
||||
|
||||
```
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
select: {
|
||||
slots: {
|
||||
content: 'min-w-fit'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@@ -83,9 +83,6 @@ Use the `columns` prop as an array of [ColumnDef](https://tanstack.com/table/lat
|
||||
- `class`:
|
||||
- `td`: [The classes to apply to the `td` element.]{class="text-muted"}
|
||||
- `th`: [The classes to apply to the `th` element.]{class="text-muted"}
|
||||
- `style`:
|
||||
- `td`: [The style to apply to the `td` element.]{class="text-muted"}
|
||||
- `th`: [The style to apply to the `th` element.]{class="text-muted"}
|
||||
|
||||
In order to render components or other HTML elements, you will need to use the Vue [`h` function](https://vuejs.org/api/render-function.html#h) inside the `header` and `cell` props. This is different from other components that use slots but allows for more flexibility.
|
||||
|
||||
@@ -115,8 +112,6 @@ Use the `meta` prop as an object ([TableMeta](https://tanstack.com/table/latest/
|
||||
|
||||
- `class`:
|
||||
- `tr`: [The classes to apply to the `tr` element.]{class="text-muted"}
|
||||
- `style`:
|
||||
- `tr`: [The style to apply to the `tr` element.]{class="text-muted"}
|
||||
|
||||
### Loading
|
||||
|
||||
|
||||
@@ -19,13 +19,12 @@ Use the `items` prop as an array of objects with the following properties:
|
||||
- `label?: string`{lang="ts-type"}
|
||||
- `icon?: string`{lang="ts-type"}
|
||||
- `avatar?: AvatarProps`{lang="ts-type"}
|
||||
- `badge?: string | number | BadgeProps`{lang="ts-type"}
|
||||
- `content?: string`{lang="ts-type"}
|
||||
- `value?: string | number`{lang="ts-type"}
|
||||
- `disabled?: boolean`{lang="ts-type"}
|
||||
- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
|
||||
- `class?: any`{lang="ts-type"}
|
||||
- `ui?: { trigger?: ClassNameValue, leadingIcon?: ClassNameValue, leadingAvatar?: ClassNameValue, leadingAvatarSize?: ClassNameValue, label?: ClassNameValue, trailingBadge?: ClassNameValue, trailingBadgeSize?: ClassNameValue, content?: ClassNameValue }`{lang="ts-type"}
|
||||
- `ui?: { trigger?: ClassNameValue, leadingIcon?: ClassNameValue, leadingAvatar?: ClassNameValue, label?: ClassNameValue, content?: ClassNameValue }`{lang="ts-type"}
|
||||
|
||||
::component-code
|
||||
---
|
||||
|
||||
@@ -107,7 +107,7 @@ name: 'toast-color-example'
|
||||
|
||||
### Close
|
||||
|
||||
Pass a `close` field to customize or hide the close [Button](/components/button) (with `false` value).
|
||||
Pass a `close` field to customize or hide the close button (with `false` value).
|
||||
|
||||
::component-example
|
||||
---
|
||||
@@ -143,7 +143,7 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl
|
||||
|
||||
### Actions
|
||||
|
||||
Pass an `actions` field to add some [Button](/components/button) actions to the Toast.
|
||||
Pass an `actions` field to add some [Button](/components/button) actions to the Alert.
|
||||
|
||||
::component-example
|
||||
---
|
||||
@@ -155,23 +155,9 @@ name: 'toast-actions-example'
|
||||
---
|
||||
::
|
||||
|
||||
### Progress :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
Pass a `progress` field to customize or hide the [Progress](/components/progress) bar (with `false` value).
|
||||
|
||||
::tip
|
||||
The Progress bar inherits the Toast color by default, but you can override it using the `progress.color` field.
|
||||
::
|
||||
|
||||
::component-example
|
||||
---
|
||||
name: 'toast-progress-example'
|
||||
---
|
||||
::
|
||||
|
||||
### Orientation
|
||||
|
||||
Pass an `orientation` field to the `toast.add` method to change the orientation of the Toast.
|
||||
Use the `orientation` prop to change the orientation of the Toast.
|
||||
|
||||
::component-example
|
||||
---
|
||||
|
||||
@@ -143,6 +143,10 @@ export default defineNuxtConfig({
|
||||
'/releases': { redirect: 'https://github.com/nuxt/ui/releases', prerender: false }
|
||||
},
|
||||
|
||||
future: {
|
||||
compatibilityVersion: 4
|
||||
},
|
||||
|
||||
compatibilityDate: '2024-07-09',
|
||||
|
||||
nitro: {
|
||||
|
||||
@@ -11,26 +11,26 @@
|
||||
"dependencies": {
|
||||
"@ai-sdk/vue": "^1.2.12",
|
||||
"@iconify-json/logos": "^1.2.4",
|
||||
"@iconify-json/lucide": "^1.2.57",
|
||||
"@iconify-json/simple-icons": "^1.2.44",
|
||||
"@iconify-json/lucide": "^1.2.56",
|
||||
"@iconify-json/simple-icons": "^1.2.42",
|
||||
"@iconify-json/vscode-icons": "^1.2.23",
|
||||
"@nuxt/content": "^3.6.3",
|
||||
"@nuxt/image": "^1.10.0",
|
||||
"@nuxt/ui": "workspace:*",
|
||||
"@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@17684e4",
|
||||
"@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@22fdc5e",
|
||||
"@nuxthub/core": "^0.9.0",
|
||||
"@nuxtjs/plausible": "^1.2.0",
|
||||
"@octokit/rest": "^22.0.0",
|
||||
"@rollup/plugin-yaml": "^4.1.2",
|
||||
"@vueuse/integrations": "^13.5.0",
|
||||
"@vueuse/nuxt": "^13.5.0",
|
||||
"ai": "^4.3.19",
|
||||
"ai": "^4.3.16",
|
||||
"better-sqlite3": "^12.2.0",
|
||||
"capture-website": "^4.2.0",
|
||||
"joi": "^17.13.3",
|
||||
"maska": "^3.2.0",
|
||||
"motion-v": "^1.5.0",
|
||||
"nuxt": "^4.0.1",
|
||||
"nuxt": "^3.17.6",
|
||||
"nuxt-component-meta": "^0.12.1",
|
||||
"nuxt-llms": "^0.1.3",
|
||||
"nuxt-og-image": "^5.1.9",
|
||||
@@ -40,11 +40,11 @@
|
||||
"superstruct": "^2.0.2",
|
||||
"ufo": "^1.6.1",
|
||||
"valibot": "^1.1.0",
|
||||
"workers-ai-provider": "^0.7.2",
|
||||
"workers-ai-provider": "^0.7.1",
|
||||
"yup": "^1.6.1",
|
||||
"zod": "^4.0.5"
|
||||
"zod": "^3.25.75"
|
||||
},
|
||||
"devDependencies": {
|
||||
"wrangler": "^4.25.0"
|
||||
"wrangler": "^4.23.0"
|
||||
}
|
||||
}
|
||||
|
||||
16
package.json
16
package.json
@@ -2,7 +2,7 @@
|
||||
"name": "@nuxt/ui",
|
||||
"description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
|
||||
"version": "3.2.0",
|
||||
"packageManager": "pnpm@10.13.1",
|
||||
"packageManager": "pnpm@10.12.4",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/nuxt/ui.git"
|
||||
@@ -116,8 +116,8 @@
|
||||
"@internationalized/number": "^3.6.3",
|
||||
"@nuxt/fonts": "^0.11.4",
|
||||
"@nuxt/icon": "^1.15.0",
|
||||
"@nuxt/kit": "^4.0.1",
|
||||
"@nuxt/schema": "^4.0.1",
|
||||
"@nuxt/kit": "^3.17.6",
|
||||
"@nuxt/schema": "^3.17.6",
|
||||
"@nuxtjs/color-mode": "^3.5.2",
|
||||
"@standard-schema/spec": "^1.0.0",
|
||||
"@tailwindcss/postcss": "^4.1.11",
|
||||
@@ -155,16 +155,16 @@
|
||||
"vue-component-type-helpers": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/eslint-config": "^1.6.0",
|
||||
"@nuxt/eslint-config": "^1.5.2",
|
||||
"@nuxt/module-builder": "^1.0.1",
|
||||
"@nuxt/test-utils": "^3.19.2",
|
||||
"@release-it/conventional-changelog": "^10.0.1",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"embla-carousel": "^8.6.0",
|
||||
"eslint": "^9.31.0",
|
||||
"eslint": "^9.30.1",
|
||||
"happy-dom": "^18.0.1",
|
||||
"nuxt": "^4.0.1",
|
||||
"release-it": "^19.0.4",
|
||||
"nuxt": "^3.17.6",
|
||||
"release-it": "^19.0.3",
|
||||
"vitest": "^3.2.4",
|
||||
"vitest-environment-nuxt": "^1.0.1",
|
||||
"vue-tsc": "^3.0.1"
|
||||
@@ -177,7 +177,7 @@
|
||||
"valibot": "^1.0.0",
|
||||
"vue-router": "^4.5.0",
|
||||
"yup": "^1.6.0",
|
||||
"zod": "^3.24.0 || ^4.0.0"
|
||||
"zod": "^3.24.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@inertiajs/vue3": {
|
||||
|
||||
@@ -13,12 +13,12 @@
|
||||
"@nuxt/ui": "workspace:*",
|
||||
"vue": "^3.5.17",
|
||||
"vue-router": "^4.5.1",
|
||||
"zod": "^4.0.5"
|
||||
"zod": "^3.25.75"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.0",
|
||||
"@vitejs/plugin-vue": "^5.2.4",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^7.0.5",
|
||||
"vite": "^6.3.5",
|
||||
"vue-tsc": "^3.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -35,7 +35,6 @@ const components = [
|
||||
'command-palette',
|
||||
'drawer',
|
||||
'dropdown-menu',
|
||||
'file-upload',
|
||||
'form',
|
||||
'form-field',
|
||||
'input',
|
||||
|
||||
@@ -35,7 +35,6 @@ const components = [
|
||||
'command-palette',
|
||||
'drawer',
|
||||
'dropdown-menu',
|
||||
'file-upload',
|
||||
'form',
|
||||
'form-field',
|
||||
'input',
|
||||
|
||||
@@ -1,16 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
const colorHex = ref('#9C27B0')
|
||||
|
||||
function handleColorChange(event: Event) {
|
||||
colorHex.value = (event.target as HTMLInputElement).value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span :style="{ backgroundColor: colorHex }" class="inline-flex w-5 h-5 rounded" />
|
||||
<UInput :model-value="colorHex" @change="handleColorChange" />
|
||||
<code class="font-mono">{{ colorHex }}</code>
|
||||
</div>
|
||||
<USeparator />
|
||||
<div class="flex justify-between gap-2">
|
||||
@@ -25,6 +21,6 @@ function handleColorChange(event: Event) {
|
||||
</UButton>
|
||||
</div>
|
||||
<USeparator />
|
||||
<UColorPicker v-model="colorHex" />
|
||||
<UColorPicker v-model="colorHex" @update:model-value="() => console.log('model update')" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -10,8 +10,9 @@ const open = ref(false)
|
||||
const searchTerm = ref('')
|
||||
// const searchTermDebounced = refDebounced(searchTerm, 200)
|
||||
const selected = ref([])
|
||||
const commandPalette = useTemplateRef('commandPalette')
|
||||
|
||||
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
|
||||
const { data: _users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
|
||||
// params: { q: searchTermDebounced },
|
||||
transform: (data: User[]) => {
|
||||
return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
|
||||
@@ -22,10 +23,6 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
|
||||
const loading = ref(false)
|
||||
|
||||
const groups = computed(() => [{
|
||||
id: 'users',
|
||||
label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
|
||||
items: users.value || []
|
||||
}, {
|
||||
id: 'actions',
|
||||
items: [{
|
||||
label: 'Add new file',
|
||||
@@ -74,6 +71,12 @@ const groups = computed(() => [{
|
||||
toast.add({ title: 'Label added!' })
|
||||
},
|
||||
kbds: ['meta', 'L']
|
||||
}, {
|
||||
label: 'Set Wallpaper',
|
||||
suffix: 'Choose from beautiful wallpaper collection.',
|
||||
icon: 'i-lucide-image',
|
||||
view: 'wallpaper',
|
||||
placeholder: 'Search wallpapers...'
|
||||
}, {
|
||||
label: 'More actions',
|
||||
placeholder: 'Search actions...',
|
||||
@@ -140,6 +143,116 @@ const labels = [{
|
||||
}]
|
||||
const label = ref()
|
||||
|
||||
const wallpapers = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'red_distortion_1',
|
||||
gradient: 'from-red-500 via-orange-500 to-pink-500',
|
||||
category: 'Abstract',
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'blue_distortion_1',
|
||||
gradient: 'from-blue-600 via-purple-600 to-indigo-600',
|
||||
category: 'Abstract',
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'mono_dark_distortion_1',
|
||||
gradient: 'from-gray-900 via-gray-700 to-gray-800',
|
||||
category: 'Monochrome',
|
||||
featured: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'chromatic_dark_1',
|
||||
gradient: 'from-emerald-600 via-teal-600 to-cyan-600',
|
||||
category: 'Chromatic',
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'red_distortion_2',
|
||||
gradient: 'from-rose-600 via-red-600 to-orange-600',
|
||||
category: 'Abstract',
|
||||
featured: false
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'purple_cosmic_1',
|
||||
gradient: 'from-violet-700 via-purple-700 to-fuchsia-700',
|
||||
category: 'Cosmic',
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: 'golden_sunset_1',
|
||||
gradient: 'from-yellow-500 via-orange-500 to-red-500',
|
||||
category: 'Nature',
|
||||
featured: false
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: 'ocean_deep_1',
|
||||
gradient: 'from-blue-800 via-blue-900 to-indigo-900',
|
||||
category: 'Nature',
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: 'mono_light_distortion_1',
|
||||
gradient: 'from-gray-200 via-gray-300 to-gray-400',
|
||||
category: 'Monochrome',
|
||||
featured: false
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: 'green_matrix_1',
|
||||
gradient: 'from-green-800 via-emerald-700 to-teal-700',
|
||||
category: 'Chromatic',
|
||||
featured: false
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: 'pink_dreams_1',
|
||||
gradient: 'from-pink-500 via-rose-500 to-purple-500',
|
||||
category: 'Abstract',
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: 'midnight_blue_1',
|
||||
gradient: 'from-slate-900 via-blue-900 to-indigo-900',
|
||||
category: 'Nature',
|
||||
featured: false
|
||||
}
|
||||
]
|
||||
|
||||
const filteredWallpapers = computed(() => {
|
||||
let filtered = wallpapers
|
||||
|
||||
// Filter by search term
|
||||
if (searchTerm.value.trim()) {
|
||||
const search = searchTerm.value.toLowerCase()
|
||||
filtered = filtered.filter(w =>
|
||||
w.name.toLowerCase().includes(search)
|
||||
|| w.category.toLowerCase().includes(search)
|
||||
)
|
||||
}
|
||||
|
||||
return filtered
|
||||
})
|
||||
|
||||
function setWallpaper(wallpaper: any) {
|
||||
toast.add({
|
||||
title: `Wallpaper set to ${wallpaper.name}!`,
|
||||
description: 'Your desktop wallpaper has been updated.',
|
||||
icon: 'i-lucide-image'
|
||||
})
|
||||
}
|
||||
|
||||
// function onSelect(item: typeof groups.value[number]['items'][number]) {
|
||||
function onSelect(item: any) {
|
||||
console.log('Selected', item)
|
||||
@@ -147,6 +260,12 @@ function onSelect(item: any) {
|
||||
|
||||
defineShortcuts({
|
||||
meta_k: () => open.value = !open.value,
|
||||
meta_shift_a: {
|
||||
usingInput: true,
|
||||
handler: () => {
|
||||
commandPalette.value?.openView('askAI')
|
||||
}
|
||||
},
|
||||
...extractShortcuts(groups.value)
|
||||
})
|
||||
</script>
|
||||
@@ -154,6 +273,7 @@ defineShortcuts({
|
||||
<template>
|
||||
<DefineTemplate>
|
||||
<UCommandPalette
|
||||
ref="commandPalette"
|
||||
v-model="selected"
|
||||
v-model:search-term="searchTerm"
|
||||
:loading="status === 'pending'"
|
||||
@@ -167,25 +287,49 @@ defineShortcuts({
|
||||
class="sm:max-h-80"
|
||||
@update:model-value="onSelect"
|
||||
>
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
|
||||
<div class="flex items-center gap-1">
|
||||
<UButton color="neutral" variant="ghost" label="Open Command" class="text-dimmed" size="xs">
|
||||
<template #trailing>
|
||||
<UKbd value="enter" />
|
||||
</template>
|
||||
</UButton>
|
||||
<USeparator orientation="vertical" class="h-4" />
|
||||
<UButton color="neutral" variant="ghost" label="Actions" class="text-dimmed" size="xs">
|
||||
<template #trailing>
|
||||
<UKbd value="meta" />
|
||||
<UKbd value="k" />
|
||||
</template>
|
||||
</UButton>
|
||||
<template #wallpaper>
|
||||
<div class="flex-1 overflow-y-auto p-6">
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<div
|
||||
v-for="wallpaper in filteredWallpapers"
|
||||
:key="wallpaper.id"
|
||||
class="group relative cursor-pointer"
|
||||
@click="setWallpaper(wallpaper)"
|
||||
>
|
||||
<div
|
||||
class="aspect-video rounded-lg bg-gradient-to-br shadow-lg ring-1 ring-black/5"
|
||||
:class="wallpaper.gradient"
|
||||
/>
|
||||
<div class="mt-2 px-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<h3 class="text-sm font-medium text-highlighted truncate">
|
||||
{{ wallpaper.name }}
|
||||
</h3>
|
||||
<UChip
|
||||
v-if="wallpaper.featured"
|
||||
label="★"
|
||||
size="xs"
|
||||
color="primary"
|
||||
class="shrink-0"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-xs text-dimmed">
|
||||
{{ wallpaper.category }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #askAI>
|
||||
<div class="flex flex-col items-center justify-center gap-4 p-6">
|
||||
<UIcon name="i-lucide-sparkles" class="size-8 text-primary" />
|
||||
<span class="text-lg font-semibold text-highlighted">
|
||||
Ask me anything...
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</UCommandPalette>
|
||||
</DefineTemplate>
|
||||
|
||||
|
||||
@@ -28,20 +28,6 @@ const inset = ref(false)
|
||||
</template>
|
||||
</UDrawer>
|
||||
|
||||
<UDrawer title="Drawer with nested" :inset="inset" :ui="{ content: 'h-full' }" should-scale-background>
|
||||
<UButton color="neutral" variant="outline" label="Open nested" />
|
||||
|
||||
<template #footer>
|
||||
<UDrawer :inset="inset" nested :ui="{ content: 'h-full' }">
|
||||
<UButton color="neutral" variant="outline" label="Open nested" />
|
||||
|
||||
<template #content>
|
||||
<Placeholder class="flex-1 m-4" />
|
||||
</template>
|
||||
</UDrawer>
|
||||
</template>
|
||||
</UDrawer>
|
||||
|
||||
<UDrawer title="Drawer with bottom direction" direction="bottom" :inset="inset">
|
||||
<UButton color="neutral" variant="outline" label="Open on bottom" />
|
||||
|
||||
|
||||
@@ -1,126 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import * as z from 'zod'
|
||||
import type { FormSubmitEvent } from '@nuxt/ui'
|
||||
import theme from '#build/ui/file-upload'
|
||||
|
||||
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
|
||||
|
||||
const size = ref<keyof typeof theme.variants.size>('md')
|
||||
|
||||
const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
|
||||
const MIN_DIMENSIONS = { width: 200, height: 200 }
|
||||
const MAX_DIMENSIONS = { width: 4096, height: 4096 }
|
||||
const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
|
||||
|
||||
const formatBytes = (bytes: number, decimals = 2) => {
|
||||
if (bytes === 0) return '0 Bytes'
|
||||
const k = 1024
|
||||
const dm = decimals < 0 ? 0 : decimals
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
const schema = z.object({
|
||||
avatar: z
|
||||
.instanceof(File, {
|
||||
message: 'Please select an image file.'
|
||||
})
|
||||
.refine(file => file.size <= MAX_FILE_SIZE, {
|
||||
message: `The image is too large. Please choose an image smaller than ${formatBytes(MAX_FILE_SIZE)}.`
|
||||
})
|
||||
.refine(file => ACCEPTED_IMAGE_TYPES.includes(file.type), {
|
||||
message: 'Please upload a valid image file (JPEG, PNG, or WebP).'
|
||||
})
|
||||
.refine(
|
||||
file =>
|
||||
new Promise((resolve) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
const img = new Image()
|
||||
img.onload = () => {
|
||||
const meetsDimensions
|
||||
= img.width >= MIN_DIMENSIONS.width
|
||||
&& img.height >= MIN_DIMENSIONS.height
|
||||
&& img.width <= MAX_DIMENSIONS.width
|
||||
&& img.height <= MAX_DIMENSIONS.height
|
||||
resolve(meetsDimensions)
|
||||
}
|
||||
img.src = e.target?.result as string
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}),
|
||||
{
|
||||
message: `The image dimensions are invalid. Please upload an image between ${MIN_DIMENSIONS.width}x${MIN_DIMENSIONS.height} and ${MAX_DIMENSIONS.width}x${MAX_DIMENSIONS.height} pixels.`
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
type schema = z.output<typeof schema>
|
||||
|
||||
const state = reactive<Partial<schema>>({
|
||||
avatar: undefined
|
||||
})
|
||||
|
||||
const value = ref<File[]>([new File(['foo'], 'file1.txt', { type: 'text/plain' })])
|
||||
|
||||
const upload = useUpload('/api/blob', { method: 'PUT' })
|
||||
|
||||
function createObjectUrl(file: File): string {
|
||||
return URL.createObjectURL(file)
|
||||
}
|
||||
|
||||
async function onSubmit(event: FormSubmitEvent<schema>) {
|
||||
const res = await upload(event.data.avatar)
|
||||
|
||||
console.log(res)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col items-center gap-8">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<USelect v-model="size" :items="sizes" />
|
||||
</div>
|
||||
|
||||
<UForm :schema="schema" :state="state" class="space-y-4 w-80" @submit="onSubmit">
|
||||
<UFormField name="avatar" label="Avatar" description="JPG, GIF or PNG. 1MB Max." :size="size">
|
||||
<UFileUpload v-slot="{ open, remove }" v-model="state.avatar" accept="image/*">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<UAvatar size="lg" :src="state.avatar ? createObjectUrl(state.avatar) : undefined" icon="i-lucide-image" />
|
||||
|
||||
<UButton :label="state.avatar ? 'Change image' : 'Upload image'" color="neutral" @click="open()" />
|
||||
</div>
|
||||
|
||||
<p v-if="state.avatar" class="text-xs text-muted mt-1.5">
|
||||
{{ state.avatar.name }}
|
||||
|
||||
<UButton
|
||||
label="Remove"
|
||||
color="error"
|
||||
variant="link"
|
||||
size="xs"
|
||||
class="p-0"
|
||||
@click="remove()"
|
||||
/>
|
||||
</p>
|
||||
</UFileUpload>
|
||||
</UFormField>
|
||||
|
||||
<UButton label="Submit" type="submit" />
|
||||
</UForm>
|
||||
|
||||
<UFileUpload
|
||||
v-model="value"
|
||||
label="Drop your image here"
|
||||
description="SVG, PNG, JPG or GIF (max. 2MB)"
|
||||
class="w-full"
|
||||
multiple
|
||||
:size="size"
|
||||
>
|
||||
<template #files-bottom="{ remove }">
|
||||
<UButton label="Remove all" @click="remove()" />
|
||||
</template>
|
||||
</UFileUpload>
|
||||
</div>
|
||||
</template>
|
||||
@@ -3,16 +3,20 @@ import theme from '#build/ui/kbd'
|
||||
import { kbdKeysMap } from '@nuxt/ui/composables/useKbd.js'
|
||||
|
||||
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
|
||||
const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
|
||||
const colors = Object.keys(theme.variants.color) as Array<keyof typeof theme.variants.color>
|
||||
|
||||
const kbdKeys = Object.keys(kbdKeysMap)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div v-for="color in colors" :key="color" class="flex items-center gap-1 ms-[-22px]">
|
||||
<UKbd v-for="variant in variants" :key="`${color}-${variant}`" value="meta" :variant="variant" :color="color" />
|
||||
<div class="flex items-center gap-1">
|
||||
<UKbd value="meta" />
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<UKbd value="meta" variant="subtle" />
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<UKbd value="meta" variant="solid" />
|
||||
</div>
|
||||
<div class="flex items-center gap-1 ms-[-220px]">
|
||||
<UKbd v-for="(kdbKey, index) in kbdKeys" :key="index" :value="kdbKey" />
|
||||
|
||||
@@ -25,8 +25,7 @@ const items = [{
|
||||
label: 'Tab3',
|
||||
icon: 'i-lucide-bell',
|
||||
content: 'Finally, this is the content for Tab3',
|
||||
slot: 'custom' as const,
|
||||
badge: '300'
|
||||
slot: 'custom' as const
|
||||
}]
|
||||
</script>
|
||||
|
||||
|
||||
@@ -10,12 +10,12 @@ export default defineNuxtConfig({
|
||||
|
||||
css: ['~/assets/css/main.css'],
|
||||
|
||||
compatibilityDate: '2024-07-09',
|
||||
|
||||
hub: {
|
||||
blob: true
|
||||
future: {
|
||||
compatibilityVersion: 4
|
||||
},
|
||||
|
||||
compatibilityDate: '2024-07-09',
|
||||
|
||||
vite: {
|
||||
optimizeDeps: {
|
||||
// prevents reloading page when navigating between components
|
||||
|
||||
@@ -9,13 +9,13 @@
|
||||
"typecheck": "nuxt typecheck"
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify-json/lucide": "^1.2.57",
|
||||
"@iconify-json/simple-icons": "^1.2.44",
|
||||
"@iconify-json/lucide": "^1.2.56",
|
||||
"@iconify-json/simple-icons": "^1.2.42",
|
||||
"@internationalized/date": "^3.8.2",
|
||||
"@nuxt/ui": "workspace:*",
|
||||
"@nuxthub/core": "^0.9.0",
|
||||
"nuxt": "^4.0.1",
|
||||
"zod": "^4.0.5"
|
||||
"nuxt": "^3.17.6",
|
||||
"zod": "^3.25.75"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.8.3",
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
export default eventHandler(async (event) => {
|
||||
return hubBlob().handleUpload(event, {
|
||||
formKey: 'files', // read file or files form the `formKey` field of request body (body should be a `FormData` object)
|
||||
multiple: true, // when `true`, the `formKey` field will be an array of `Blob` objects
|
||||
ensure: {
|
||||
types: ['image/jpeg', 'image/png'] // allowed types of the file
|
||||
},
|
||||
put: {
|
||||
addRandomSuffix: true
|
||||
}
|
||||
})
|
||||
})
|
||||
3179
pnpm-lock.yaml
generated
3179
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -6,9 +6,6 @@ import { name, version } from '../package.json'
|
||||
|
||||
export type * from './runtime/types'
|
||||
|
||||
type Color = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | (string & {})
|
||||
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {})
|
||||
|
||||
export interface ModuleOptions {
|
||||
/**
|
||||
* Prefix for components
|
||||
@@ -41,7 +38,7 @@ export interface ModuleOptions {
|
||||
* @defaultValue `['primary', 'secondary', 'success', 'info', 'warning', 'error']`
|
||||
* @link https://ui.nuxt.com/getting-started/installation/nuxt#themecolors
|
||||
*/
|
||||
colors?: Color[]
|
||||
colors?: string[]
|
||||
|
||||
/**
|
||||
* Enable or disable transitions on components
|
||||
@@ -49,20 +46,6 @@ export interface ModuleOptions {
|
||||
* @link https://ui.nuxt.com/getting-started/installation/nuxt#themetransitions
|
||||
*/
|
||||
transitions?: boolean
|
||||
|
||||
defaultVariants?: {
|
||||
/**
|
||||
* The default color variant to use for components
|
||||
* @defaultValue `'primary'`
|
||||
*/
|
||||
color?: Color
|
||||
|
||||
/**
|
||||
* The default size variant to use for components
|
||||
* @defaultValue `'md'`
|
||||
*/
|
||||
size?: Size
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -102,7 +85,7 @@ export default defineNuxtModule<ModuleOptions>({
|
||||
|
||||
async function registerModule(name: string, key: string, options: Record<string, any>) {
|
||||
if (!hasNuxtModule(name)) {
|
||||
await installModule(name, defu((nuxt.options as any)[key], options))
|
||||
await installModule(name, options)
|
||||
} else {
|
||||
(nuxt.options as any)[key] = defu((nuxt.options as any)[key], options)
|
||||
}
|
||||
|
||||
@@ -57,7 +57,7 @@ export interface AlertProps {
|
||||
}
|
||||
|
||||
export interface AlertEmits {
|
||||
'update:open': [value: boolean]
|
||||
(e: 'update:open', value: boolean): void
|
||||
}
|
||||
|
||||
export interface AlertSlots {
|
||||
|
||||
@@ -256,7 +256,6 @@ const scrollSnaps = ref<number[]>([])
|
||||
function onInit(api: EmblaCarouselType) {
|
||||
scrollSnaps.value = api?.scrollSnapList() || []
|
||||
}
|
||||
|
||||
function onSelect(api: EmblaCarouselType) {
|
||||
canScrollNext.value = api?.canScrollNext() || false
|
||||
canScrollPrev.value = api?.canScrollPrev() || false
|
||||
@@ -301,7 +300,8 @@ defineExpose({
|
||||
<div
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
v-bind="dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
:class="ui.item({ class: [props.ui?.item, isCarouselItem(item) && item.ui?.item, isCarouselItem(item) && item.class] })"
|
||||
>
|
||||
<slot :item="item" :index="index" />
|
||||
@@ -333,13 +333,10 @@ defineExpose({
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="dots" role="tablist" :aria-label="t('carousel.dots')" :class="ui.dots({ class: props.ui?.dots })">
|
||||
<div v-if="dots" :class="ui.dots({ class: props.ui?.dots })">
|
||||
<template v-for="(_, index) in scrollSnaps" :key="index">
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
:aria-label="t('carousel.goto', { slide: index + 1 })"
|
||||
:aria-selected="selectedIndex === index"
|
||||
:class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
|
||||
:data-state="selectedIndex === index ? 'active' : undefined"
|
||||
@click="scrollTo(index)"
|
||||
|
||||
@@ -35,7 +35,7 @@ export interface ChipProps {
|
||||
}
|
||||
|
||||
export interface ChipEmits {
|
||||
'update:show': [payload: boolean]
|
||||
(e: 'update:show', payload: boolean): void
|
||||
}
|
||||
|
||||
export interface ChipSlots {
|
||||
|
||||
@@ -31,7 +31,7 @@ function HSVtoHSL(hsv: HSVColor): HSLObject {
|
||||
return {
|
||||
H: hsv.h,
|
||||
S: x === 0 || x === 200 ? 0 : Math.round(hsv.s * hsv.v / (x <= 100 ? x : 200 - x)),
|
||||
L: x / 2
|
||||
L: Math.round(x / 2)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -102,6 +102,7 @@ const pickedColor = computed<HSVColor>({
|
||||
},
|
||||
set(value) {
|
||||
const color = new ColorTranslator(HSVtoHSL(value), {
|
||||
decimals: 2,
|
||||
labUnit: 'percent',
|
||||
cmykUnit: 'percent',
|
||||
cmykFunction: 'cmyk'
|
||||
|
||||
@@ -31,6 +31,11 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
|
||||
*/
|
||||
placeholder?: string
|
||||
children?: CommandPaletteItem[]
|
||||
/**
|
||||
* Custom view to display instead of children items.
|
||||
* When defined, clicking this item will show the custom view.
|
||||
*/
|
||||
view?: string
|
||||
onSelect?(e?: Event): void
|
||||
class?: any
|
||||
ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>
|
||||
@@ -147,14 +152,13 @@ type SlotProps<T> = (props: { item: T, index: number }) => any
|
||||
|
||||
export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
|
||||
'empty'(props: { searchTerm?: string }): any
|
||||
'footer'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
|
||||
'back'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
|
||||
'close'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
|
||||
'item': SlotProps<T>
|
||||
'item-leading': SlotProps<T>
|
||||
'item-label': SlotProps<T>
|
||||
'item-trailing': SlotProps<T>
|
||||
} & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>
|
||||
} & Record<string, SlotProps<G>> & Record<string, SlotProps<T>> & Record<string, (props: { current: any, searchTerm: string, navigateBack: () => void, close: () => void }) => any>
|
||||
|
||||
</script>
|
||||
|
||||
@@ -209,12 +213,17 @@ const fuse = computed(() => defu({}, props.fuse, {
|
||||
matchAllWhenSearchEmpty: true
|
||||
}))
|
||||
|
||||
const history = ref<(CommandPaletteGroup & { placeholder?: string })[]>([])
|
||||
const history = ref<(CommandPaletteGroup & { placeholder?: string, view?: string })[]>([])
|
||||
|
||||
const placeholder = computed(() => history.value[history.value.length - 1]?.placeholder || props.placeholder || t('commandPalette.placeholder'))
|
||||
|
||||
const groups = computed(() => history.value?.length ? [history.value[history.value.length - 1] as G] : props.groups)
|
||||
|
||||
const currentView = computed(() => {
|
||||
const current = history.value[history.value.length - 1]
|
||||
return current?.view ? current : null
|
||||
})
|
||||
|
||||
const items = computed(() => groups.value?.filter((group) => {
|
||||
if (!group.id) {
|
||||
console.warn(`[@nuxt/ui] CommandPalette group is missing an \`id\` property`)
|
||||
@@ -280,8 +289,33 @@ const filteredGroups = computed(() => {
|
||||
|
||||
const listboxRootRef = useTemplateRef('listboxRootRef')
|
||||
|
||||
// Exposed methods for programmatic control
|
||||
function openView(viewName: string) {
|
||||
history.value.push({
|
||||
id: `view-${viewName}`,
|
||||
label: viewName,
|
||||
view: viewName,
|
||||
items: []
|
||||
} as any)
|
||||
|
||||
searchTerm.value = ''
|
||||
listboxRootRef.value?.highlightFirstItem()
|
||||
}
|
||||
|
||||
function closeView() {
|
||||
if (history.value.length > 0) {
|
||||
navigateBack()
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openView,
|
||||
closeView,
|
||||
navigateBack
|
||||
})
|
||||
|
||||
function navigate(item: T) {
|
||||
if (!item.children?.length) {
|
||||
if (!item.children?.length && !item.view) {
|
||||
return
|
||||
}
|
||||
|
||||
@@ -290,7 +324,8 @@ function navigate(item: T) {
|
||||
label: item.label,
|
||||
slot: item.slot,
|
||||
placeholder: item.placeholder,
|
||||
items: item.children
|
||||
view: item.view,
|
||||
items: item.children || []
|
||||
} as any)
|
||||
|
||||
searchTerm.value = ''
|
||||
@@ -317,7 +352,7 @@ function onBackspace() {
|
||||
}
|
||||
|
||||
function onSelect(e: Event, item: T) {
|
||||
if (item.children?.length) {
|
||||
if (item.children?.length || item.view) {
|
||||
e.preventDefault()
|
||||
|
||||
navigate(item)
|
||||
@@ -372,7 +407,17 @@ function onSelect(e: Event, item: T) {
|
||||
</ListboxFilter>
|
||||
|
||||
<ListboxContent :class="ui.content({ class: props.ui?.content })">
|
||||
<div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
|
||||
<div v-if="currentView" :class="ui.viewport({ class: props.ui?.viewport })">
|
||||
<slot
|
||||
:name="currentView.view"
|
||||
:current="currentView"
|
||||
:search-term="searchTerm"
|
||||
:navigate-back="navigateBack"
|
||||
:close="closeView"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
|
||||
<ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
|
||||
<ListboxGroupLabel v-if="get(group, props.labelKey as string)" :class="ui.label({ class: props.ui?.label })">
|
||||
{{ get(group, props.labelKey as string) }}
|
||||
@@ -416,7 +461,7 @@ function onSelect(e: Event, item: T) {
|
||||
<span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
|
||||
<slot :name="((item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
|
||||
<UIcon
|
||||
v-if="item.children && item.children.length > 0"
|
||||
v-if="(item.children && item.children.length > 0) || item.view"
|
||||
:name="trailingIcon || appConfig.ui.icons.chevronRight"
|
||||
:class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
|
||||
/>
|
||||
@@ -445,9 +490,5 @@ function onSelect(e: Event, item: T) {
|
||||
</slot>
|
||||
</div>
|
||||
</ListboxContent>
|
||||
|
||||
<div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
|
||||
<slot name="footer" :ui="ui" />
|
||||
</div>
|
||||
</ListboxRoot>
|
||||
</template>
|
||||
|
||||
@@ -37,11 +37,6 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
|
||||
* @defaultValue true
|
||||
*/
|
||||
portal?: boolean | string | HTMLElement
|
||||
/**
|
||||
* Whether the drawer is nested in another drawer.
|
||||
* @defaultValue false
|
||||
*/
|
||||
nested?: boolean
|
||||
class?: any
|
||||
ui?: Drawer['slots']
|
||||
}
|
||||
@@ -62,7 +57,7 @@ export interface DrawerSlots {
|
||||
<script setup lang="ts">
|
||||
import { computed, toRef } from 'vue'
|
||||
import { VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
|
||||
import { DrawerRoot, DrawerRootNested, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
|
||||
import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
|
||||
import { reactivePick } from '@vueuse/core'
|
||||
import { useAppConfig } from '#imports'
|
||||
import { usePortal } from '../composables/usePortal'
|
||||
@@ -95,7 +90,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="nested ? DrawerRootNested : DrawerRoot" v-bind="rootProps">
|
||||
<DrawerRoot v-bind="rootProps">
|
||||
<DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
|
||||
<slot />
|
||||
</DrawerTrigger>
|
||||
@@ -149,5 +144,5 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
|
||||
</slot>
|
||||
</DrawerContent>
|
||||
</DrawerPortal>
|
||||
</component>
|
||||
</DrawerRoot>
|
||||
</template>
|
||||
|
||||
@@ -1,289 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { AppConfig } from '@nuxt/schema'
|
||||
import type { UseFileDialogReturn } from '@vueuse/core'
|
||||
import theme from '#build/ui/file-upload'
|
||||
import type { ButtonProps } from '../types'
|
||||
import type { ComponentConfig } from '../types/utils'
|
||||
|
||||
type FileUpload = ComponentConfig<typeof theme, AppConfig, 'fileUpload'>
|
||||
|
||||
export interface FileUploadProps<M extends boolean = false> {
|
||||
/**
|
||||
* The element or component this component should render as.
|
||||
* @defaultValue 'div'
|
||||
*/
|
||||
as?: any
|
||||
id?: string
|
||||
name?: string
|
||||
/**
|
||||
* The icon to display.
|
||||
* @defaultValue appConfig.ui.icons.upload
|
||||
* @IconifyIcon
|
||||
*/
|
||||
icon?: string
|
||||
label?: string
|
||||
description?: string
|
||||
actions?: ButtonProps[]
|
||||
/**
|
||||
* @defaultValue 'primary'
|
||||
*/
|
||||
color?: FileUpload['variants']['color']
|
||||
/**
|
||||
* @defaultValue 'md'
|
||||
*/
|
||||
size?: FileUpload['variants']['size']
|
||||
/** Highlight the ring color like a focus state. */
|
||||
highlight?: boolean
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
multiple?: M & boolean
|
||||
/**
|
||||
* Specifies the allowed file types for the input. Provide a comma-separated list of MIME types or file extensions (e.g., "image/png,application/pdf,.jpg").
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
|
||||
* @defaultValue '*'
|
||||
*/
|
||||
accept?: string
|
||||
/**
|
||||
* Reset the file input when the dialog is opened.
|
||||
* @defaultValue false
|
||||
*/
|
||||
reset?: boolean
|
||||
/**
|
||||
* Create a zone that allows the user to drop files onto it.
|
||||
* @defaultValue true
|
||||
*/
|
||||
dropzone?: boolean
|
||||
/**
|
||||
* The icon to display for the file.
|
||||
* @defaultValue appConfig.ui.icons.file
|
||||
* @IconifyIcon
|
||||
*/
|
||||
fileIcon?: string
|
||||
class?: any
|
||||
ui?: FileUpload['slots']
|
||||
}
|
||||
|
||||
export interface FileUploadEmits<M extends boolean = false> {
|
||||
(e: 'update:modelValue', value: M extends true ? File[] : File | null): void
|
||||
(e: 'change', event: Event): void
|
||||
}
|
||||
|
||||
export interface FileUploadSlots<M extends boolean = false> {
|
||||
'default'(props: {
|
||||
open: UseFileDialogReturn['open']
|
||||
remove: (index?: number) => void
|
||||
}): any
|
||||
'leading'(props?: {}): any
|
||||
'label'(props?: {}): any
|
||||
'description'(props?: {}): any
|
||||
'actions'(props?: {}): any
|
||||
'files'(props: { files: M extends true ? File[] : File | null }): any
|
||||
'files-top'(props: { remove: (index?: number) => void }): any
|
||||
'files-bottom'(props: { remove: (index?: number) => void }): any
|
||||
'file'(props: { file: File, index: number }): any
|
||||
'file-leading'(props: { file: File, index: number }): any
|
||||
'file-name'(props: { file: File, index: number }): any
|
||||
'file-size'(props: { file: File, index: number }): any
|
||||
'file-trailing'(props: { file: File, index: number }): any
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts" generic="M extends boolean = false">
|
||||
import { ref, computed } from 'vue'
|
||||
import { Primitive } from 'reka-ui'
|
||||
import { useAppConfig } from '#imports'
|
||||
import { useFormField } from '../composables/useFormField'
|
||||
import { useFileUpload } from '../composables/useFileUpload'
|
||||
import { tv } from '../utils/tv'
|
||||
import UAvatar from './Avatar.vue'
|
||||
import UButton from './Button.vue'
|
||||
import UIcon from './Icon.vue'
|
||||
|
||||
defineOptions({ inheritAttrs: false })
|
||||
|
||||
const props = withDefaults(defineProps<FileUploadProps<M>>(), {
|
||||
accept: '*',
|
||||
multiple: false as never,
|
||||
reset: false,
|
||||
dropzone: true
|
||||
})
|
||||
const emits = defineEmits<FileUploadEmits<M>>()
|
||||
const slots = defineSlots<FileUploadSlots<M>>()
|
||||
|
||||
const modelValue = defineModel<(M extends true ? File[] : File) | null>()
|
||||
|
||||
const appConfig = useAppConfig() as FileUpload['AppConfig']
|
||||
|
||||
const inputRef = ref<HTMLInputElement>()
|
||||
const dropzoneRef = ref<HTMLDivElement>()
|
||||
|
||||
const { isDragging, open } = useFileUpload({
|
||||
accept: props.accept,
|
||||
reset: props.reset,
|
||||
multiple: props.multiple,
|
||||
dropzone: props.dropzone,
|
||||
dropzoneRef,
|
||||
inputRef,
|
||||
onUpdate
|
||||
})
|
||||
const { emitFormInput, emitFormChange, id, name, disabled, ariaAttrs } = useFormField<FileUploadProps>(props, { deferInputValidation: true })
|
||||
|
||||
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.fileUpload || {}) })({
|
||||
dropzone: props.dropzone,
|
||||
color: props.color,
|
||||
size: props.size,
|
||||
highlight: props.highlight
|
||||
}))
|
||||
|
||||
function createObjectUrl(file: File): string {
|
||||
return URL.createObjectURL(file)
|
||||
}
|
||||
|
||||
function formatFileSize(bytes: number): string {
|
||||
if (bytes === 0) {
|
||||
return '0B'
|
||||
}
|
||||
|
||||
const k = 1024
|
||||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
|
||||
const size = bytes / Math.pow(k, i)
|
||||
const formattedSize = i === 0 ? size.toString() : size.toFixed(2)
|
||||
|
||||
return `${formattedSize}${sizes[i]}`
|
||||
}
|
||||
|
||||
function onUpdate(files: File[], reset = false) {
|
||||
if (props.multiple) {
|
||||
if (reset) {
|
||||
modelValue.value = files as (M extends true ? File[] : File) | null
|
||||
} else {
|
||||
const existingFiles = (modelValue.value as File[]) || []
|
||||
modelValue.value = [...existingFiles, ...(files || [])] as (M extends true ? File[] : File) | null
|
||||
}
|
||||
} else {
|
||||
modelValue.value = files?.[0] as (M extends true ? File[] : File) | null
|
||||
}
|
||||
|
||||
// @ts-expect-error - 'target' does not exist in type 'EventInit'
|
||||
const event = new Event('change', { target: { value: modelValue.value } })
|
||||
emits('change', event)
|
||||
emitFormChange()
|
||||
emitFormInput()
|
||||
}
|
||||
|
||||
function remove(index?: number) {
|
||||
if (!modelValue.value) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!props.multiple || index === undefined) {
|
||||
onUpdate([], true)
|
||||
return
|
||||
}
|
||||
|
||||
const files = [...modelValue.value as File[]]
|
||||
files.splice(index, 1)
|
||||
|
||||
onUpdate(files, true)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
inputRef
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
|
||||
<slot :open="open" :remove="remove">
|
||||
<div
|
||||
ref="dropzoneRef"
|
||||
role="button"
|
||||
:data-dragging="isDragging"
|
||||
:class="ui.base({ class: props.ui?.base })"
|
||||
tabindex="0"
|
||||
@click="open()"
|
||||
>
|
||||
<div :class="ui.wrapper({ class: props.ui?.wrapper })">
|
||||
<div :class="ui.leading({ class: props.ui?.leading })">
|
||||
<slot name="leading">
|
||||
<UIcon :name="icon || appConfig.ui.icons.upload" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div v-if="label || !!slots.label" :class="ui.label({ class: props.ui?.label })">
|
||||
<slot name="label">
|
||||
{{ label }}
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
|
||||
<slot name="description">
|
||||
{{ description }}
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div v-if="actions?.length || !!slots.actions" :class="ui.actions({ class: props.ui?.actions })">
|
||||
<slot name="actions">
|
||||
<UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="modelValue" :class="ui.files({ class: props.ui?.files })">
|
||||
<slot name="files-top" :remove="remove" />
|
||||
|
||||
<slot name="files" :files="modelValue">
|
||||
<div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="(file as File).name" :class="ui.file({ class: props.ui?.file })">
|
||||
<slot name="file" :file="file" :index="index">
|
||||
<slot name="file-leading" :file="file" :index="index">
|
||||
<UAvatar :src="createObjectUrl(file)" :icon="fileIcon || appConfig.ui.icons.file" :size="props.size" :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })" />
|
||||
</slot>
|
||||
|
||||
<div :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">
|
||||
<span :class="ui.fileName({ class: props.ui?.fileName })">
|
||||
<slot name="file-name" :file="file" :index="index">
|
||||
{{ (file as File).name }}
|
||||
</slot>
|
||||
</span>
|
||||
|
||||
<span :class="ui.fileSize({ class: props.ui?.fileSize })">
|
||||
<slot name="file-size" :file="file" :index="index">
|
||||
{{ formatFileSize((file as File).size) }}
|
||||
</slot>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<slot name="file-trailing" :file="file" :index="index">
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="link"
|
||||
:size="size"
|
||||
:trailing-icon="appConfig.ui.icons.close"
|
||||
:class="ui.fileTrailing({ class: props.ui?.fileTrailing })"
|
||||
@click="remove(index)"
|
||||
/>
|
||||
</slot>
|
||||
</slot>
|
||||
</div>
|
||||
</slot>
|
||||
|
||||
<slot name="files-bottom" :remove="remove" />
|
||||
</div>
|
||||
</slot>
|
||||
|
||||
<input
|
||||
:id="id"
|
||||
ref="inputRef"
|
||||
type="file"
|
||||
:name="name"
|
||||
:accept="accept"
|
||||
:multiple="(multiple as boolean)"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
v-bind="{ ...$attrs, ...ariaAttrs }"
|
||||
hidden
|
||||
>
|
||||
</Primitive>
|
||||
</template>
|
||||
@@ -53,8 +53,8 @@ export interface FormProps<S extends FormSchema, T extends boolean = true> {
|
||||
}
|
||||
|
||||
export interface FormEmits<S extends FormSchema, T extends boolean = true> {
|
||||
submit: [payload: FormSubmitEvent<FormData<S, T>>]
|
||||
error: [payload: FormErrorEvent]
|
||||
(e: 'submit', payload: FormSubmitEvent<FormData<S, T>>): void
|
||||
(e: 'error', payload: FormErrorEvent): void
|
||||
}
|
||||
|
||||
export interface FormSlots {
|
||||
|
||||
@@ -18,7 +18,7 @@ export interface FormFieldProps {
|
||||
label?: string
|
||||
description?: string
|
||||
help?: string
|
||||
error?: boolean | string
|
||||
error?: string | boolean
|
||||
hint?: string
|
||||
/**
|
||||
* @defaultValue 'md'
|
||||
@@ -41,8 +41,8 @@ export interface FormFieldSlots {
|
||||
hint(props: { hint?: string }): any
|
||||
description(props: { description?: string }): any
|
||||
help(props: { help?: string }): any
|
||||
error(props: { error?: boolean | string }): any
|
||||
default(props: { error?: boolean | string }): any
|
||||
error(props: { error?: string | boolean }): any
|
||||
default(props: { error?: string | boolean }): any
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -121,7 +121,7 @@ provide(formFieldInjectionKey, computed(() => ({
|
||||
{{ error }}
|
||||
</slot>
|
||||
</div>
|
||||
<div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" :class="ui.help({ class: props.ui?.help })">
|
||||
<div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
|
||||
<slot name="help" :help="help">
|
||||
{{ help }}
|
||||
</slot>
|
||||
|
||||
@@ -52,9 +52,9 @@ export interface InputProps<T extends AcceptableValue = AcceptableValue> extends
|
||||
}
|
||||
|
||||
export interface InputEmits<T extends AcceptableValue = AcceptableValue> {
|
||||
'update:modelValue': [payload: T]
|
||||
'blur': [event: FocusEvent]
|
||||
'change': [event: Event]
|
||||
(e: 'update:modelValue', payload: T): void
|
||||
(e: 'blur', event: FocusEvent): void
|
||||
(e: 'change', event: Event): void
|
||||
}
|
||||
|
||||
export interface InputSlots {
|
||||
|
||||
@@ -128,16 +128,15 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
|
||||
}
|
||||
|
||||
export type InputMenuEmits<A extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<A> | undefined, M extends boolean> = Pick<ComboboxRootEmits, 'update:open'> & {
|
||||
'change': [payload: Event]
|
||||
'blur': [payload: FocusEvent]
|
||||
'focus': [payload: FocusEvent]
|
||||
'create': [item: string]
|
||||
change: [payload: Event]
|
||||
blur: [payload: FocusEvent]
|
||||
focus: [payload: FocusEvent]
|
||||
create: [item: string]
|
||||
/** Event handler when highlighted element changes. */
|
||||
'highlight': [payload: {
|
||||
highlight: [payload: {
|
||||
ref: HTMLElement
|
||||
value: GetModelValue<A, VK, M>
|
||||
} | undefined]
|
||||
'remove-tag': [item: GetModelValue<A, VK, M>]
|
||||
} & GetModelValueEmits<A, VK, M>
|
||||
|
||||
type SlotProps<T extends InputMenuItem> = (props: { item: T, index: number }) => any
|
||||
@@ -172,7 +171,7 @@ export interface InputMenuSlots<
|
||||
</script>
|
||||
|
||||
<script setup lang="ts" generic="T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
|
||||
import { computed, ref, toRef, onMounted, toRaw, nextTick } from 'vue'
|
||||
import { computed, ref, toRef, onMounted, toRaw } from 'vue'
|
||||
import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from 'reka-ui'
|
||||
import { defu } from 'defu'
|
||||
import { isEqual } from 'ohash/utils'
|
||||
@@ -234,7 +233,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputMenu ||
|
||||
}))
|
||||
|
||||
function displayValue(value: T): string {
|
||||
const item = items.value.find(item => compare(typeof item === 'object' && props.valueKey ? get(item as Record<string, any>, props.valueKey as string) : item, value))
|
||||
if (!props.valueKey) {
|
||||
return value && (typeof value === 'object' ? get(value, props.labelKey as string) : value)
|
||||
}
|
||||
|
||||
const item = items.value.find(item => compare(typeof item === 'object' ? get(item as Record<string, any>, props.valueKey as string) : item, value))
|
||||
return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
|
||||
}
|
||||
|
||||
@@ -255,12 +258,8 @@ const filteredGroups = computed(() => {
|
||||
|
||||
const fields = Array.isArray(props.filterFields) ? props.filterFields : [props.labelKey] as string[]
|
||||
|
||||
return groups.value.map(items => items.filter((item) => {
|
||||
if (item === undefined || item === null) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (typeof item !== 'object') {
|
||||
return groups.value.map(group => group.filter((item) => {
|
||||
if (typeof item !== 'object' || item === null) {
|
||||
return contains(String(item), searchTerm.value)
|
||||
}
|
||||
|
||||
@@ -268,10 +267,7 @@ const filteredGroups = computed(() => {
|
||||
return true
|
||||
}
|
||||
|
||||
return fields.some((field) => {
|
||||
const value = get(item, field)
|
||||
return value !== undefined && value !== null && contains(String(value), searchTerm.value)
|
||||
})
|
||||
return fields.some(field => contains(get(item, field), searchTerm.value))
|
||||
})).filter(group => group.filter(item =>
|
||||
!isInputItem(item) || (!item.type || !['label', 'separator'].includes(item.type))
|
||||
).length > 0)
|
||||
@@ -302,10 +298,6 @@ function autoFocus() {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
searchTerm.value = ''
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
autoFocus()
|
||||
}, props.autofocusDelay)
|
||||
@@ -367,7 +359,6 @@ function onRemoveTag(event: any) {
|
||||
const modelValue = props.modelValue as GetModelValue<T, VK, true>
|
||||
const filteredValue = modelValue.filter(value => !isEqual(value, event))
|
||||
emits('update:modelValue', filteredValue as GetModelValue<T, VK, M>)
|
||||
emits('remove-tag', event)
|
||||
onUpdate(filteredValue)
|
||||
}
|
||||
}
|
||||
@@ -441,7 +432,7 @@ defineExpose({
|
||||
<TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
|
||||
<TagsInputItemText :class="ui.tagsItemText({ class: [props.ui?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">
|
||||
<slot name="tags-item-text" :item="(item as NestedItem<T>)" :index="index">
|
||||
{{ displayValue(item as T) ?? item }}
|
||||
{{ displayValue(item as T) }}
|
||||
</slot>
|
||||
</TagsInputItemText>
|
||||
|
||||
|
||||
@@ -63,9 +63,9 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
|
||||
}
|
||||
|
||||
export interface InputNumberEmits {
|
||||
'update:modelValue': [payload: number]
|
||||
'blur': [event: FocusEvent]
|
||||
'change': [payload: Event]
|
||||
(e: 'update:modelValue', payload: number): void
|
||||
(e: 'blur', event: FocusEvent): void
|
||||
(e: 'change', payload: Event): void
|
||||
}
|
||||
|
||||
export interface InputNumberSlots {
|
||||
|
||||
@@ -13,10 +13,6 @@ export interface KbdProps {
|
||||
*/
|
||||
as?: any
|
||||
value?: KbdKey | string
|
||||
/**
|
||||
* @defaultValue 'neutral'
|
||||
*/
|
||||
color?: Kbd['variants']['color']
|
||||
/**
|
||||
* @defaultValue 'outline'
|
||||
*/
|
||||
@@ -52,7 +48,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.kbd || {}) }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive :as="as" :class="ui({ class: props.class, color: props.color, variant: props.variant, size: props.size })">
|
||||
<Primitive :as="as" :class="ui({ variant, size, class: props.class })">
|
||||
<slot>
|
||||
{{ getKbdKey(value) }}
|
||||
</slot>
|
||||
|
||||
@@ -177,8 +177,6 @@ import UBadge from './Badge.vue'
|
||||
import UPopover from './Popover.vue'
|
||||
import UTooltip from './Tooltip.vue'
|
||||
|
||||
defineOptions({ inheritAttrs: false })
|
||||
|
||||
const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
|
||||
orientation: 'horizontal',
|
||||
contentOrientation: 'horizontal',
|
||||
@@ -394,7 +392,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
|
||||
</component>
|
||||
</DefineItemTemplate>
|
||||
|
||||
<NavigationMenuRoot v-bind="{ ...rootProps, ...$attrs }" :data-collapsed="collapsed" :class="ui.root({ class: [props.ui?.root, props.class] })">
|
||||
<NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.ui?.root, props.class] })">
|
||||
<slot name="list-leading" />
|
||||
|
||||
<template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
|
||||
|
||||
@@ -70,9 +70,7 @@ export type RadioGroupEmits = RadioGroupRootEmits & {
|
||||
change: [payload: Event]
|
||||
}
|
||||
|
||||
type NormalizeItem<T extends RadioGroupItem> = Exclude<T & { id: string }, RadioGroupValue>
|
||||
|
||||
type SlotProps<T extends RadioGroupItem> = (props: { item: NormalizeItem<T>, modelValue?: RadioGroupValue }) => any
|
||||
type SlotProps<T extends RadioGroupItem> = (props: { item: T & { id: string }, modelValue?: RadioGroupValue }) => any
|
||||
|
||||
export interface RadioGroupSlots<T extends RadioGroupItem = RadioGroupItem> {
|
||||
legend(props?: {}): any
|
||||
@@ -116,21 +114,21 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.radioGroup |
|
||||
indicator: props.indicator
|
||||
}))
|
||||
|
||||
function normalizeItem(item: T): NormalizeItem<T> {
|
||||
function normalizeItem(item: any) {
|
||||
if (item === null) {
|
||||
return {
|
||||
id: `${id}:null`,
|
||||
value: undefined,
|
||||
label: undefined
|
||||
} as NormalizeItem<T>
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof item === 'string' || typeof item === 'number' || typeof item === 'bigint') {
|
||||
if (typeof item === 'string' || typeof item === 'number') {
|
||||
return {
|
||||
id: `${id}:${item}`,
|
||||
value: String(item),
|
||||
label: String(item)
|
||||
} as NormalizeItem<T>
|
||||
}
|
||||
}
|
||||
|
||||
const value = get(item, props.valueKey as string)
|
||||
@@ -138,7 +136,7 @@ function normalizeItem(item: T): NormalizeItem<T> {
|
||||
const description = get(item, props.descriptionKey as string)
|
||||
|
||||
return {
|
||||
...(item as NormalizeItem<T>),
|
||||
...item,
|
||||
value,
|
||||
label,
|
||||
description,
|
||||
|
||||
@@ -234,7 +234,11 @@ function displayValue(value: GetItemValue<T, VK> | GetItemValue<T, VK>[]): strin
|
||||
return values?.length ? values.join(', ') : undefined
|
||||
}
|
||||
|
||||
const item = items.value.find(item => compare(typeof item === 'object' && props.valueKey ? get(item as Record<string, any>, props.valueKey as string) : item, value))
|
||||
if (!props.valueKey) {
|
||||
return value && (typeof value === 'object' ? get(value, props.labelKey as string) : value)
|
||||
}
|
||||
|
||||
const item = items.value.find(item => compare(typeof item === 'object' ? get(item as Record<string, any>, props.valueKey as string) : item, value))
|
||||
return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
|
||||
}
|
||||
|
||||
@@ -256,11 +260,7 @@ const filteredGroups = computed(() => {
|
||||
const fields = Array.isArray(props.filterFields) ? props.filterFields : [props.labelKey] as string[]
|
||||
|
||||
return groups.value.map(items => items.filter((item) => {
|
||||
if (item === undefined || item === null) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (typeof item !== 'object') {
|
||||
if (typeof item !== 'object' || item === null) {
|
||||
return contains(String(item), searchTerm.value)
|
||||
}
|
||||
|
||||
@@ -268,10 +268,7 @@ const filteredGroups = computed(() => {
|
||||
return true
|
||||
}
|
||||
|
||||
return fields.some((field) => {
|
||||
const value = get(item, field)
|
||||
return value !== undefined && value !== null && contains(String(value), searchTerm.value)
|
||||
})
|
||||
return fields.some(field => contains(get(item, field), searchTerm.value))
|
||||
})).filter(group => group.filter(item =>
|
||||
!isSelectItem(item) || (!item.type || !['label', 'separator'].includes(item.type))
|
||||
).length > 0)
|
||||
|
||||
@@ -39,8 +39,8 @@ export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' |
|
||||
}
|
||||
|
||||
export interface SliderEmits<T extends number | number[] = number | number[]> {
|
||||
'update:modelValue': [payload: T]
|
||||
'change': [payload: Event]
|
||||
(e: 'update:modelValue', payload: T): void
|
||||
(e: 'change', payload: Event): void
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -45,26 +45,12 @@ declare module '@tanstack/table-core' {
|
||||
th?: string | ((cell: Header<TData, TValue>) => string)
|
||||
td?: string | ((cell: Cell<TData, TValue>) => string)
|
||||
}
|
||||
style?: {
|
||||
th?: string | Record<string, string> | ((cell: Header<TData, TValue>) => string | Record<string, string>)
|
||||
td?: string | Record<string, string> | ((cell: Cell<TData, TValue>) => string | Record<string, string>)
|
||||
}
|
||||
colspan?: {
|
||||
td?: string | ((cell: Cell<TData, TValue>) => string)
|
||||
}
|
||||
rowspan?: {
|
||||
td?: string | ((cell: Cell<TData, TValue>) => string)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
interface TableMeta<TData> {
|
||||
class?: {
|
||||
tr?: string | ((row: Row<TData>) => string)
|
||||
}
|
||||
style?: {
|
||||
tr?: string | Record<string, string> | ((row: Row<TData>) => string | Record<string, string>)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -383,14 +369,6 @@ function onRowContextmenu(e: Event, row: TableRow<T>) {
|
||||
}
|
||||
}
|
||||
|
||||
function resolveValue<T, A = undefined>(prop: T | ((arg: A) => T), arg?: A): T | undefined {
|
||||
if (typeof prop === 'function') {
|
||||
// @ts-expect-error: TS can't know if prop is a function here
|
||||
return prop(arg)
|
||||
}
|
||||
return prop
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.data, () => {
|
||||
data.value = props.data ? [...props.data] : []
|
||||
@@ -420,11 +398,10 @@ defineExpose({
|
||||
:data-pinned="header.column.getIsPinned()"
|
||||
:scope="header.colSpan > 1 ? 'colgroup' : 'col'"
|
||||
:colspan="header.colSpan > 1 ? header.colSpan : undefined"
|
||||
:rowspan="header.rowSpan > 1 ? header.rowSpan : undefined"
|
||||
:class="ui.th({
|
||||
class: [
|
||||
props.ui?.th,
|
||||
resolveValue(header.column.columnDef.meta?.class?.th, header)
|
||||
typeof header.column.columnDef.meta?.class?.th === 'function' ? header.column.columnDef.meta.class.th(header) : header.column.columnDef.meta?.class?.th
|
||||
],
|
||||
pinned: !!header.column.getIsPinned()
|
||||
})"
|
||||
@@ -452,10 +429,9 @@ defineExpose({
|
||||
:class="ui.tr({
|
||||
class: [
|
||||
props.ui?.tr,
|
||||
resolveValue(tableApi.options.meta?.class?.tr, row)
|
||||
typeof tableApi.options.meta?.class?.tr === 'function' ? tableApi.options.meta.class.tr(row) : tableApi.options.meta?.class?.tr
|
||||
]
|
||||
})"
|
||||
:style="resolveValue(tableApi.options.meta?.style?.tr, row)"
|
||||
@click="onRowSelect($event, row)"
|
||||
@pointerenter="onRowHover($event, row)"
|
||||
@pointerleave="onRowHover($event, null)"
|
||||
@@ -465,16 +441,13 @@ defineExpose({
|
||||
v-for="cell in row.getVisibleCells()"
|
||||
:key="cell.id"
|
||||
:data-pinned="cell.column.getIsPinned()"
|
||||
:colspan="resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)"
|
||||
:rowspan="resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)"
|
||||
:class="ui.td({
|
||||
class: [
|
||||
props.ui?.td,
|
||||
resolveValue(cell.column.columnDef.meta?.class?.td, cell)
|
||||
typeof cell.column.columnDef.meta?.class?.td === 'function' ? cell.column.columnDef.meta.class.td(cell) : cell.column.columnDef.meta?.class?.td
|
||||
],
|
||||
pinned: !!cell.column.getIsPinned()
|
||||
})"
|
||||
:style="resolveValue(cell.column.columnDef.meta?.style?.td, cell)"
|
||||
>
|
||||
<slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
|
||||
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
|
||||
@@ -515,15 +488,13 @@ defineExpose({
|
||||
:key="header.id"
|
||||
:data-pinned="header.column.getIsPinned()"
|
||||
:colspan="header.colSpan > 1 ? header.colSpan : undefined"
|
||||
:rowspan="header.rowSpan > 1 ? header.rowSpan : undefined"
|
||||
:class="ui.th({
|
||||
class: [
|
||||
props.ui?.th,
|
||||
resolveValue(header.column.columnDef.meta?.class?.th, header)
|
||||
typeof header.column.columnDef.meta?.class?.th === 'function' ? header.column.columnDef.meta.class.th(header) : header.column.columnDef.meta?.class?.th
|
||||
],
|
||||
pinned: !!header.column.getIsPinned()
|
||||
})"
|
||||
:style="resolveValue(header.column.columnDef.meta?.style?.th, header)"
|
||||
>
|
||||
<slot :name="`${header.id}-footer`" v-bind="header.getContext()">
|
||||
<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.footer" :props="header.getContext()" />
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import type { TabsRootProps, TabsRootEmits } from 'reka-ui'
|
||||
import type { AppConfig } from '@nuxt/schema'
|
||||
import theme from '#build/ui/tabs'
|
||||
import type { AvatarProps, BadgeProps } from '../types'
|
||||
import type { AvatarProps } from '../types'
|
||||
import type { DynamicSlots, ComponentConfig } from '../types/utils'
|
||||
|
||||
type Tabs = ComponentConfig<typeof theme, AppConfig, 'tabs'>
|
||||
@@ -15,18 +15,13 @@ export interface TabsItem {
|
||||
*/
|
||||
icon?: string
|
||||
avatar?: AvatarProps
|
||||
/**
|
||||
* Display a badge on the item.
|
||||
* `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
|
||||
*/
|
||||
badge?: string | number | BadgeProps
|
||||
slot?: string
|
||||
content?: string
|
||||
/** A unique value for the tab item. Defaults to the index. */
|
||||
value?: string | number
|
||||
disabled?: boolean
|
||||
class?: any
|
||||
ui?: Pick<Tabs['slots'], 'trigger' | 'leadingIcon' | 'leadingAvatar' | 'leadingAvatarSize' | 'label' | 'trailingBadge' | 'trailingBadgeSize' | 'content'>
|
||||
ui?: Pick<Tabs['slots'], 'trigger' | 'leadingIcon' | 'leadingAvatar' | 'label' | 'content'>
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
@@ -139,23 +134,14 @@ defineExpose({
|
||||
>
|
||||
<slot name="leading" :item="item" :index="index">
|
||||
<UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
|
||||
<UAvatar v-else-if="item.avatar" :size="((item.ui?.leadingAvatarSize || props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
|
||||
<UAvatar v-else-if="item.avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
|
||||
</slot>
|
||||
|
||||
<span v-if="get(item, props.labelKey as string) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
|
||||
<slot :item="item" :index="index">{{ get(item, props.labelKey as string) }}</slot>
|
||||
</span>
|
||||
|
||||
<slot name="trailing" :item="item" :index="index">
|
||||
<UBadge
|
||||
v-if="item.badge"
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
:size="((item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()) as BadgeProps['size'])"
|
||||
v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
|
||||
:class="ui.trailingBadge({ class: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
|
||||
/>
|
||||
</slot>
|
||||
<slot name="trailing" :item="item" :index="index" />
|
||||
</TabsTrigger>
|
||||
|
||||
<slot name="list-trailing" />
|
||||
|
||||
@@ -55,9 +55,9 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
|
||||
}
|
||||
|
||||
export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
|
||||
'update:modelValue': [payload: T]
|
||||
'blur': [event: FocusEvent]
|
||||
'change': [event: Event]
|
||||
(e: 'update:modelValue', payload: T): void
|
||||
(e: 'blur', event: FocusEvent): void
|
||||
(e: 'change', event: Event): void
|
||||
}
|
||||
|
||||
export interface TextareaSlots {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import type { ToastRootProps, ToastRootEmits } from 'reka-ui'
|
||||
import type { AppConfig } from '@nuxt/schema'
|
||||
import theme from '#build/ui/toast'
|
||||
import type { AvatarProps, ButtonProps, ProgressProps } from '../types'
|
||||
import type { AvatarProps, ButtonProps } from '../types'
|
||||
import type { StringOrVNode, ComponentConfig } from '../types/utils'
|
||||
|
||||
type Toast = ComponentConfig<typeof theme, AppConfig, 'toast'>
|
||||
@@ -29,6 +29,18 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
|
||||
* @defaultValue 'vertical'
|
||||
*/
|
||||
orientation?: Toast['variants']['orientation']
|
||||
/**
|
||||
* Whether to show the progress bar.
|
||||
* @defaultValue true
|
||||
*/
|
||||
progress?: boolean
|
||||
/**
|
||||
* Display a list of actions:
|
||||
* - under the title and description when orientation is `vertical`
|
||||
* - next to the close button when orientation is `horizontal`
|
||||
* `{ size: 'xs' }`{lang="ts-type"}
|
||||
*/
|
||||
actions?: ButtonProps[]
|
||||
/**
|
||||
* Display a close button to dismiss the toast.
|
||||
* `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
|
||||
@@ -41,19 +53,6 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
|
||||
* @IconifyIcon
|
||||
*/
|
||||
closeIcon?: string
|
||||
/**
|
||||
* Display a list of actions:
|
||||
* - under the title and description when orientation is `vertical`
|
||||
* - next to the close button when orientation is `horizontal`
|
||||
* `{ size: 'xs' }`{lang="ts-type"}
|
||||
*/
|
||||
actions?: ButtonProps[]
|
||||
/**
|
||||
* Display a progress bar showing the toast's remaining duration.
|
||||
* `{ size: 'sm' }`{lang="ts-type"}
|
||||
* @defaultValue true
|
||||
*/
|
||||
progress?: boolean | Pick<ProgressProps, 'color'>
|
||||
class?: any
|
||||
ui?: Toast['slots']
|
||||
}
|
||||
@@ -79,11 +78,10 @@ import { tv } from '../utils/tv'
|
||||
import UIcon from './Icon.vue'
|
||||
import UAvatar from './Avatar.vue'
|
||||
import UButton from './Button.vue'
|
||||
import UProgress from './Progress.vue'
|
||||
|
||||
const props = withDefaults(defineProps<ToastProps>(), {
|
||||
orientation: 'vertical',
|
||||
close: true,
|
||||
orientation: 'vertical',
|
||||
progress: true
|
||||
})
|
||||
const emits = defineEmits<ToastEmits>()
|
||||
@@ -121,7 +119,7 @@ defineExpose({
|
||||
<template>
|
||||
<ToastRoot
|
||||
ref="el"
|
||||
v-slot="{ remaining, duration, open }"
|
||||
v-slot="{ remaining, duration }"
|
||||
v-bind="rootProps"
|
||||
:data-orientation="orientation"
|
||||
:class="ui.root({ class: [props.ui?.root, props.class] })"
|
||||
@@ -186,13 +184,6 @@ defineExpose({
|
||||
</ToastClose>
|
||||
</div>
|
||||
|
||||
<UProgress
|
||||
v-if="progress && open && remaining > 0 && duration"
|
||||
:model-value="remaining / duration * 100"
|
||||
:color="color"
|
||||
v-bind="(typeof progress === 'object' ? progress as Partial<ProgressProps> : {})"
|
||||
size="sm"
|
||||
:class="ui.progress({ class: props.ui?.progress })"
|
||||
/>
|
||||
<div v-if="progress && remaining > 0 && duration" :class="ui.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }" />
|
||||
</ToastRoot>
|
||||
</template>
|
||||
|
||||
@@ -107,8 +107,6 @@ import { get } from '../utils'
|
||||
import { tv } from '../utils/tv'
|
||||
import UIcon from './Icon.vue'
|
||||
|
||||
defineOptions({ inheritAttrs: false })
|
||||
|
||||
const props = withDefaults(defineProps<TreeProps<T, VK, M>>(), {
|
||||
labelKey: 'label' as never,
|
||||
valueKey: 'value' as never
|
||||
@@ -163,7 +161,7 @@ const defaultExpanded = computed(() =>
|
||||
@toggle="item.onToggle"
|
||||
@select="item.onSelect"
|
||||
>
|
||||
<button type="button" :disabled="item.disabled || disabled" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })">
|
||||
<button :disabled="item.disabled || disabled" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })">
|
||||
<slot :name="((item.slot || 'item') as keyof TreeSlots<T>)" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="(item as Extract<NestedItem<T>, { slot: string; }>)">
|
||||
<slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof TreeSlots<T>)" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="(item as Extract<NestedItem<T>, { slot: string; }>)">
|
||||
<UIcon
|
||||
@@ -201,7 +199,7 @@ const defaultExpanded = computed(() =>
|
||||
</DefineTreeTemplate>
|
||||
|
||||
<TreeRoot
|
||||
v-bind="{ ...(rootProps as unknown as TreeRootProps<NestedItem<T>>), ...$attrs }"
|
||||
v-bind="(rootProps as unknown as TreeRootProps<NestedItem<T>>)"
|
||||
:class="ui.root({ class: [props.ui?.root, props.class] })"
|
||||
:get-key="getItemValue"
|
||||
:default-expanded="defaultExpanded"
|
||||
|
||||
@@ -122,7 +122,7 @@ export function defineShortcuts(config: MaybeRef<ShortcutsConfig>, options: Shor
|
||||
|
||||
if (shortcut.enabled) {
|
||||
e.preventDefault()
|
||||
shortcut.handler(e)
|
||||
shortcut.handler()
|
||||
}
|
||||
clearChainedInput()
|
||||
return
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
import type { Ref } from 'vue'
|
||||
import { computed, unref } from 'vue'
|
||||
import { useFileDialog, useDropZone } from '@vueuse/core'
|
||||
import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/core'
|
||||
|
||||
export interface UseFileUploadOptions {
|
||||
/**
|
||||
* Specifies the allowed file types. Provide a comma-separated list of MIME types or file extensions.
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
|
||||
* @defaultValue '*'
|
||||
*/
|
||||
accept?: MaybeRef<string>
|
||||
reset?: boolean
|
||||
multiple?: boolean
|
||||
dropzone?: boolean
|
||||
dropzoneRef: MaybeRefOrGetter<HTMLElement | null | undefined>
|
||||
inputRef: Ref<HTMLInputElement | undefined>
|
||||
onUpdate: (files: File[]) => void
|
||||
}
|
||||
|
||||
function parseAcceptToDataTypes(accept: string): string[] | undefined {
|
||||
if (!accept || accept === '*') {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const types = accept
|
||||
.split(',')
|
||||
.map(type => type.trim())
|
||||
.filter((type) => {
|
||||
return !type.startsWith('.')
|
||||
})
|
||||
|
||||
return types.length > 0 ? types : undefined
|
||||
}
|
||||
|
||||
export function useFileUpload(options: UseFileUploadOptions) {
|
||||
const {
|
||||
accept = '*',
|
||||
reset = false,
|
||||
multiple = false,
|
||||
dropzone = true,
|
||||
dropzoneRef,
|
||||
inputRef,
|
||||
onUpdate
|
||||
} = options
|
||||
|
||||
const dataTypes = computed(() => parseAcceptToDataTypes(unref(accept)))
|
||||
|
||||
const onDrop = (files: FileList | File[] | null) => {
|
||||
if (!files || files.length === 0) {
|
||||
return
|
||||
}
|
||||
if (files instanceof FileList) {
|
||||
files = Array.from(files)
|
||||
}
|
||||
if (files.length > 1 && !multiple) {
|
||||
files = [files[0]!]
|
||||
}
|
||||
onUpdate(files)
|
||||
}
|
||||
|
||||
const { isOverDropZone: isDragging } = dropzone
|
||||
? useDropZone(dropzoneRef, { dataTypes: dataTypes.value, onDrop })
|
||||
: { isOverDropZone: false }
|
||||
const { onChange, open } = useFileDialog({
|
||||
accept: unref(accept),
|
||||
multiple,
|
||||
input: unref(inputRef),
|
||||
reset
|
||||
})
|
||||
|
||||
onChange(fileList => onDrop(fileList))
|
||||
|
||||
return {
|
||||
isDragging,
|
||||
open
|
||||
}
|
||||
}
|
||||
@@ -89,15 +89,10 @@ export function useFormField<T>(props?: Props<T>, opts?: { bind?: boolean, defer
|
||||
.filter(type => formField?.value?.[type])
|
||||
.map(type => `${formField?.value.ariaId}-${type}`) || []
|
||||
|
||||
const attrs: Record<string, any> = {
|
||||
return {
|
||||
'aria-describedby': descriptiveAttrs.join(' '),
|
||||
'aria-invalid': !!formField?.value.error
|
||||
}
|
||||
|
||||
if (descriptiveAttrs.length > 0) {
|
||||
attrs['aria-describedby'] = descriptiveAttrs.join(' ')
|
||||
}
|
||||
|
||||
return attrs
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -71,7 +71,7 @@ function _useOverlay() {
|
||||
isMounted: !!defaultOpen,
|
||||
destroyOnClose: !!destroyOnClose,
|
||||
originalProps: props || {},
|
||||
props: { ...props }
|
||||
props: { ...(props || {}) }
|
||||
})
|
||||
|
||||
overlays.push(options)
|
||||
@@ -87,11 +87,11 @@ function _useOverlay() {
|
||||
const open = <T extends Component>(id: symbol, props?: ComponentProps<T>): OpenedOverlay<T> => {
|
||||
const overlay = getOverlay(id)
|
||||
|
||||
// If props are provided, merge them with the original props, otherwise use the original props
|
||||
// If props are provided, update the overlay's props
|
||||
if (props) {
|
||||
overlay.props = { ...overlay.originalProps, ...props }
|
||||
patch(overlay.id, props)
|
||||
} else {
|
||||
overlay.props = { ...overlay.originalProps }
|
||||
patch(overlay.id, overlay.originalProps)
|
||||
}
|
||||
|
||||
overlay.isOpen = true
|
||||
@@ -135,7 +135,7 @@ function _useOverlay() {
|
||||
const patch = <T extends Component>(id: symbol, props: Partial<ComponentProps<T>>): void => {
|
||||
const overlay = getOverlay(id)
|
||||
|
||||
overlay.props = { ...overlay.props, ...props }
|
||||
overlay.props = { ...props }
|
||||
}
|
||||
|
||||
const getOverlay = (id: symbol): Overlay => {
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { ref, onScopeDispose } from 'vue'
|
||||
import type { Ref, Plugin as VuePlugin } from 'vue'
|
||||
import { createHooks } from 'hookable'
|
||||
import { usePage } from '@inertiajs/vue3'
|
||||
import { useColorMode as useColorModeVueUse } from '@vueuse/core'
|
||||
|
||||
import appConfig from '#build/app.config'
|
||||
import type { NuxtApp } from '#app'
|
||||
import { useColorMode as useColorModeVueUse } from '@vueuse/core'
|
||||
import { usePage } from '@inertiajs/vue3'
|
||||
|
||||
export { useHead } from '@unhead/vue'
|
||||
|
||||
@@ -15,7 +16,6 @@ export { useLocale } from '../composables/useLocale'
|
||||
|
||||
export const useRoute = () => {
|
||||
const page = usePage()
|
||||
|
||||
return {
|
||||
fullPath: page.url
|
||||
}
|
||||
@@ -25,10 +25,6 @@ export const useRouter = () => {
|
||||
|
||||
}
|
||||
|
||||
export const clearError = () => {
|
||||
|
||||
}
|
||||
|
||||
export const useColorMode = () => {
|
||||
if (!appConfig.colorMode) {
|
||||
return {
|
||||
|
||||
@@ -40,8 +40,7 @@ export default defineLocale<Messages>({
|
||||
carousel: {
|
||||
prev: 'السابق',
|
||||
next: 'التالي',
|
||||
dots: 'اختر الشريحة المراد عرضها',
|
||||
goto: 'الذهاب إلى شريحة {slide}'
|
||||
goto: 'الذهاب إلي شريحة {slide}'
|
||||
},
|
||||
modal: {
|
||||
close: 'إغلاق'
|
||||
|
||||
@@ -39,7 +39,6 @@ export default defineLocale<Messages>({
|
||||
carousel: {
|
||||
prev: 'Əvvəlki',
|
||||
next: 'Növbəti',
|
||||
dots: 'Göstərmək üçün slayd seçin',
|
||||
goto: 'Slayd {slide} keç'
|
||||
},
|
||||
modal: {
|
||||
|
||||
@@ -39,7 +39,6 @@ export default defineLocale<Messages>({
|
||||
carousel: {
|
||||
prev: 'Назад',
|
||||
next: 'Напред',
|
||||
dots: 'Изберете слайд за показване',
|
||||
goto: 'Отидете на слайд {slide}'
|
||||
},
|
||||
modal: {
|
||||
|
||||
@@ -39,7 +39,6 @@ export default defineLocale<Messages>({
|
||||
carousel: {
|
||||
prev: 'পূর্ববর্তী',
|
||||
next: 'পরবর্তী',
|
||||
dots: 'প্রদর্শনের জন্য স্লাইড নির্বাচন করুন',
|
||||
goto: 'স্লাইড {slide} এ যান'
|
||||
},
|
||||
modal: {
|
||||
|
||||
@@ -39,7 +39,6 @@ export default defineLocale<Messages>({
|
||||
carousel: {
|
||||
prev: 'Anterior',
|
||||
next: 'Següent',
|
||||
dots: 'Tria la diapositiva a mostrar',
|
||||
goto: 'Anar a la diapositiva {slide}'
|
||||
},
|
||||
modal: {
|
||||
|
||||
@@ -38,9 +38,8 @@ export default defineLocale<Messages>({
|
||||
close: 'داخستن'
|
||||
},
|
||||
carousel: {
|
||||
prev: 'پێشووی',
|
||||
prev: 'پێشوو',
|
||||
next: 'داهاتوو',
|
||||
dots: 'سلایدێک هەڵبژێرە بۆ پیشاندان',
|
||||
goto: 'بڕۆ بۆ سلایدی {slide}'
|
||||
},
|
||||
modal: {
|
||||
|
||||
@@ -39,7 +39,6 @@ export default defineLocale<Messages>({
|
||||
carousel: {
|
||||
prev: 'Předchozí',
|
||||
next: 'Další',
|
||||
dots: 'Vyberte snímek k zobrazení',
|
||||
goto: 'Přejít na {slide}'
|
||||
},
|
||||
modal: {
|
||||
|
||||
@@ -39,7 +39,6 @@ export default defineLocale<Messages>({
|
||||
carousel: {
|
||||
prev: 'Forrige',
|
||||
next: 'Næste',
|
||||
dots: 'Vælg dias til visning',
|
||||
goto: 'Gå til slide {slide}'
|
||||
},
|
||||
modal: {
|
||||
|
||||
@@ -39,7 +39,6 @@ export default defineLocale<Messages>({
|
||||
carousel: {
|
||||
prev: 'Zurück',
|
||||
next: 'Weiter',
|
||||
dots: 'Folie zur Anzeige auswählen',
|
||||
goto: 'Gehe zu {slide}'
|
||||
},
|
||||
modal: {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user