Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into chore/update-root-deps-and-antfu-eslint-config

Browse Source
This commit is contained in:
Sadegh Barati 2024-02-15 22:13:24 +03:30
commit dd2204c4c7
36 changed files with 2217 additions and 1658 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/www/.vitepress/theme/config/docs.ts
View File

@ -326,6 +326,12 @@ export const docsConfig: DocsConfig = {
href: '/docs/components/tabs',
items: [],
},
{
title: 'Tags Input',
href: '/docs/components/tags-input',
label: 'New',
items: [],
},
{
title: 'Textarea',
href: '/docs/components/textarea',

3299
apps/www/__registry__/index.ts
View File

File diff suppressed because it is too large Load Diff

2
apps/www/package.json
View File

@ -32,7 +32,7 @@
"embla-carousel-autoplay": "^8.0.0-rc22",
"embla-carousel-vue": "^8.0.0-rc22",
"lucide-vue-next": "^0.276.0",
"radix-vue": "^1.4.1",
"radix-vue": "^1.4.6",
"tailwindcss-animate": "^1.0.7",
"v-calendar": "^3.1.2",
"vee-validate": "4.12.5",

4
apps/www/src/content/docs/components/input.md
View File

@ -63,6 +63,10 @@ import { Input } from '@/components/ui/input'
<ComponentPreview name="InputWithButton" class="max-w-xs" />
### With Icon
<ComponentPreview name="InputWithIcon" class="max-w-xs" />
### Form
<ComponentPreview name="InputForm" />

21
apps/www/src/content/docs/components/tags-input.md Normal file
View File

@ -0,0 +1,21 @@
---
title: Tags Input
description: Tag inputs render tags inside an input, followed by an actual text input.
source: apps/www/src/lib/registry/default/ui/tags-input
primitive: https://www.radix-vue.com/components/tags-input.html
---
<ComponentPreview name="TagsInputDemo" />
## Installation
```bash
npx shadcn-vue@latest add tags-input
```
## Usage
### Tags with Combobox
<ComponentPreview name="TagsInputComboboxDemo" />

3
apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
View File

@ -84,7 +84,8 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
v-for="option in options"
:key="option.value"
:value="option"
@select="() => {
@select="(e) => {
console.log(e.detail.value)
const isSelected = selectedValues.has(option.value)
if (isSelected) {
selectedValues.delete(option.value)

13
apps/www/src/lib/registry/default/example/InputWithIcon.vue Normal file
View File

@ -0,0 +1,13 @@
<script setup lang="ts">
import { MagnifyingGlassIcon } from '@radix-icons/vue'
import { Input } from '@/lib/registry/default/ui/input'
</script>
<template>
<div class="relative w-full max-w-sm items-center">
<Input id="search" type="text" placeholder="Search..." class="pl-10" />
<span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
<MagnifyingGlassIcon class="size-6 text-muted-foreground" />
</span>
</div>
</template>

65
apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue Normal file
View File

@ -0,0 +1,65 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command'
import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
const frameworks = [
{ value: 'next.js', label: 'Next.js' },
{ value: 'sveltekit', label: 'SvelteKit' },
{ value: 'nuxt.js', label: 'Nuxt.js' },
{ value: 'remix', label: 'Remix' },
{ value: 'astro', label: 'Astro' },
]
const modelValue = ref<string[]>([])
const open = ref(false)
const searchTerm = ref('')
const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))
</script>
<template>
<TagsInput class="px-0 gap-0 w-80" :model-value="modelValue">
<div class="flex gap-2 flex-wrap items-center px-3">
<TagsInputItem v-for="item in modelValue" :key="item" :value="item">
<TagsInputItemText />
<TagsInputItemDelete />
</TagsInputItem>
</div>
<ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm" class="w-full">
<ComboboxAnchor as-child>
<ComboboxInput placeholder="Framework..." as-child>
<TagsInputInput class="w-full px-3" :class="modelValue.length > 0 ? 'mt-2' : ''" @keydown.enter.prevent />
</ComboboxInput>
</ComboboxAnchor>
<ComboboxPortal>
<CommandList
position="popper"
class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
>
<CommandEmpty />
<CommandGroup>
<CommandItem
v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label"
@select.prevent="(ev) => {
if (typeof ev.detail.value === 'string') {
searchTerm = ''
modelValue.push(ev.detail.value)
}
if (filteredFrameworks.length === 0) {
open = false
}
}"
>
{{ framework.label }}
</CommandItem>
</CommandGroup>
</CommandList>
</ComboboxPortal>
</ComboboxRoot>
</TagsInput>
</template>

17
apps/www/src/lib/registry/default/example/TagsInputDemo.vue Normal file
View File

@ -0,0 +1,17 @@
<script setup lang="ts">
import { ref } from 'vue'
import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
const modelValue = ref(['Apple', 'Banana'])
</script>
<template>
<TagsInput v-model="modelValue">
<TagsInputItem v-for="item in modelValue" :key="item" :value="item">
<TagsInputItemText />
<TagsInputItemDelete />
</TagsInputItem>
<TagsInputInput placeholder="Fruits..." />
</TagsInput>
</template>

10
apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
View File

@ -147,16 +147,10 @@ const vCalendarSlots = computed(() => {
@apply mt-4;
}
.calendar .vc-weekdays {
@apply flex;
@apply justify-items-center;
}
.calendar .vc-weekday {
@apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];
}
.calendar .vc-weekday-1 {
@apply pr-3;
}
.calendar .vc-weekday-7 {
@apply pl-3;
@apply text-muted-foreground rounded-md font-normal text-[0.8rem];
}
.calendar .vc-weeks {
@apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;

22
apps/www/src/lib/registry/default/ui/tags-input/TagsInput.vue Normal file
View File

@ -0,0 +1,22 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<TagsInputRootEmits>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>
<template>
<TagsInputRoot v-bind="forwarded" :class="cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)">
<slot />
</TagsInputRoot>
</template>

19
apps/www/src/lib/registry/default/ui/tags-input/TagsInputInput.vue Normal file
View File

@ -0,0 +1,19 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
</template>

22
apps/www/src/lib/registry/default/ui/tags-input/TagsInputItem.vue Normal file
View File

@ -0,0 +1,22 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<TagsInputItem v-bind="forwardedProps" :class="cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
<slot />
</TagsInputItem>
</template>

24
apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue Normal file
View File

@ -0,0 +1,24 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'
import { X } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
<slot>
<X class="w-4 h-4" />
</slot>
</TagsInputItemDelete>
</template>

19
apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemText.vue Normal file
View File

@ -0,0 +1,19 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<TagsInputItemText v-bind="forwardedProps" :class="cn('py-1 px-2 text-sm rounded bg-transparent', props.class)" />
</template>

5
apps/www/src/lib/registry/default/ui/tags-input/index.ts Normal file
View File

@ -0,0 +1,5 @@
export { default as TagsInput } from './TagsInput.vue'
export { default as TagsInputInput } from './TagsInputInput.vue'
export { default as TagsInputItem } from './TagsInputItem.vue'
export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
export { default as TagsInputItemText } from './TagsInputItemText.vue'

13
apps/www/src/lib/registry/new-york/example/InputWithIcon.vue Normal file
View File

@ -0,0 +1,13 @@
<script setup lang="ts">
import { MagnifyingGlassIcon } from '@radix-icons/vue'
import { Input } from '@/lib/registry/new-york/ui/input'
</script>
<template>
<div class="relative w-full max-w-sm items-center">
<Input id="search" type="text" placeholder="Search..." class="pl-10" />
<span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
<MagnifyingGlassIcon class="size-6 text-muted-foreground" />
</span>
</div>
</template>

65
apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue Normal file
View File

@ -0,0 +1,65 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
const frameworks = [
{ value: 'next.js', label: 'Next.js' },
{ value: 'sveltekit', label: 'SvelteKit' },
{ value: 'nuxt.js', label: 'Nuxt.js' },
{ value: 'remix', label: 'Remix' },
{ value: 'astro', label: 'Astro' },
]
const modelValue = ref<string[]>([])
const open = ref(false)
const searchTerm = ref('')
const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))
</script>
<template>
<TagsInput class="px-0 gap-0 w-80" :model-value="modelValue">
<div class="flex gap-2 flex-wrap items-center px-3">
<TagsInputItem v-for="item in modelValue" :key="item" :value="item">
<TagsInputItemText />
<TagsInputItemDelete />
</TagsInputItem>
</div>
<ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm" class="w-full">
<ComboboxAnchor as-child>
<ComboboxInput placeholder="Framework..." as-child>
<TagsInputInput class="w-full px-3" :class="modelValue.length > 0 ? 'mt-2' : ''" @keydown.enter.prevent />
</ComboboxInput>
</ComboboxAnchor>
<ComboboxPortal>
<CommandList
position="popper"
class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
>
<CommandEmpty />
<CommandGroup>
<CommandItem
v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label"
@select.prevent="(ev) => {
if (typeof ev.detail.value === 'string') {
searchTerm = ''
modelValue.push(ev.detail.value)
}
if (filteredFrameworks.length === 0) {
open = false
}
}"
>
{{ framework.label }}
</CommandItem>
</CommandGroup>
</CommandList>
</ComboboxPortal>
</ComboboxRoot>
</TagsInput>
</template>

17
apps/www/src/lib/registry/new-york/example/TagsInputDemo.vue Normal file
View File

@ -0,0 +1,17 @@
<script setup lang="ts">
import { ref } from 'vue'
import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
const modelValue = ref(['Apple', 'Banana'])
</script>
<template>
<TagsInput v-model="modelValue">
<TagsInputItem v-for="item in modelValue" :key="item" :value="item">
<TagsInputItemText />
<TagsInputItemDelete />
</TagsInputItem>
<TagsInputInput placeholder="Fruits..." />
</TagsInput>
</template>

10
apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
View File

@ -148,16 +148,10 @@ const vCalendarSlots = computed(() => {
@apply mt-4;
}
.calendar .vc-weekdays {
@apply flex;
@apply justify-items-center;
}
.calendar .vc-weekday {
@apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];
}
.calendar .vc-weekday-1 {
@apply pr-3;
}
.calendar .vc-weekday-7 {
@apply pl-3;
@apply text-muted-foreground rounded-md font-normal text-[0.8rem];
}
.calendar .vc-weeks {
@apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;

22
apps/www/src/lib/registry/new-york/ui/tags-input/TagsInput.vue Normal file
View File

@ -0,0 +1,22 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<TagsInputRootEmits>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>
<template>
<TagsInputRoot v-bind="forwarded" :class="cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)">
<slot />
</TagsInputRoot>
</template>

19
apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputInput.vue Normal file
View File

@ -0,0 +1,19 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
</template>

22
apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItem.vue Normal file
View File

@ -0,0 +1,22 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<TagsInputItem v-bind="forwardedProps" :class="cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
<slot />
</TagsInputItem>
</template>

24
apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue Normal file
View File

@ -0,0 +1,24 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'
import { Cross2Icon } from '@radix-icons/vue'
import { cn } from '@/lib/utils'
const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
<slot>
<Cross2Icon class="w-4 h-4" />
</slot>
</TagsInputItemDelete>
</template>

19
apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemText.vue Normal file
View File

@ -0,0 +1,19 @@
<script setup lang="ts">
import { type HTMLAttributes, computed } from 'vue'
import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
import { cn } from '@/lib/utils'
const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props
return delegated
})
const forwardedProps = useForwardProps(delegatedProps)
</script>
<template>
<TagsInputItemText v-bind="forwardedProps" :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)" />
</template>

5
apps/www/src/lib/registry/new-york/ui/tags-input/index.ts Normal file
View File

@ -0,0 +1,5 @@
export { default as TagsInput } from './TagsInput.vue'
export { default as TagsInputInput } from './TagsInputInput.vue'
export { default as TagsInputItem } from './TagsInputItem.vue'
export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
export { default as TagsInputItemText } from './TagsInputItemText.vue'

16
apps/www/src/public/registry/index.json
View File

@ -593,6 +593,22 @@
],
"type": "components:ui"
},
{
"name": "tags-input",
"dependencies": [],
"registryDependencies": [
"utils"
],
"files": [
"ui/tags-input/TagsInput.vue",
"ui/tags-input/TagsInputInput.vue",
"ui/tags-input/TagsInputItem.vue",
"ui/tags-input/TagsInputItemDelete.vue",
"ui/tags-input/TagsInputItemText.vue",
"ui/tags-input/index.ts"
],
"type": "components:ui"
},
{
"name": "textarea",
"dependencies": [

2
apps/www/src/public/registry/styles/default/calendar.json
View File

File diff suppressed because one or more lines are too long

2
apps/www/src/public/registry/styles/default/select.json
View File

@ -19,7 +19,7 @@
},
{
"name": "SelectItem.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectItem,\n SelectItemIndicator,\n type SelectItemProps,\n SelectItemText,\n useForwardProps,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <SelectItem\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\n \"\n >\n <span class=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n <SelectItemIndicator>\n <Check class=\"h-4 w-4\" />\n </SelectItemIndicator>\n </span>\n\n <SelectItemText>\n <slot />\n </SelectItemText>\n </SelectItem>\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n SelectItem,\n SelectItemIndicator,\n type SelectItemProps,\n SelectItemText,\n useForwardProps,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <SelectItem\n v-bind=\"forwardedProps\"\n :class=\"\n cn(\n 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n props.class,\n )\n \"\n >\n <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <SelectItemIndicator>\n <Check class=\"h-4 w-4\" />\n </SelectItemIndicator>\n </span>\n\n <SelectItemText>\n <slot />\n </SelectItemText>\n </SelectItem>\n</template>\n"
},
{
"name": "SelectItemText.vue",

34
apps/www/src/public/registry/styles/default/tags-input.json Normal file
View File

@ -0,0 +1,34 @@
{
"name": "tags-input",
"dependencies": [],
"registryDependencies": [
"utils"
],
"files": [
{
"name": "TagsInput.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)\">\n <slot />\n </TagsInputRoot>\n</template>\n"
},
{
"name": "TagsInputInput.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n"
},
{
"name": "TagsInputItem.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n <slot />\n </TagsInputItem>\n</template>\n"
},
{
"name": "TagsInputItemDelete.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n <slot>\n <X class=\"w-4 h-4\" />\n </slot>\n </TagsInputItemDelete>\n</template>\n"
},
{
"name": "TagsInputItemText.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-1 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n"
},
{
"name": "index.ts",
"content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n"
}
],
"type": "components:ui"
}

2
apps/www/src/public/registry/styles/new-york/calendar.json
View File

File diff suppressed because one or more lines are too long

34
apps/www/src/public/registry/styles/new-york/tags-input.json Normal file
View File

@ -0,0 +1,34 @@
{
"name": "tags-input",
"dependencies": [],
"registryDependencies": [
"utils"
],
"files": [
{
"name": "TagsInput.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <TagsInputRoot v-bind=\"forwarded\" :class=\"cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)\">\n <slot />\n </TagsInputRoot>\n</template>\n"
},
{
"name": "TagsInputInput.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <TagsInputInput v-bind=\"forwardedProps\" :class=\"cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)\" />\n</template>\n"
},
{
"name": "TagsInputItem.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <TagsInputItem v-bind=\"forwardedProps\" :class=\"cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)\">\n <slot />\n </TagsInputItem>\n</template>\n"
},
{
"name": "TagsInputItemDelete.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <TagsInputItemDelete v-bind=\"forwardedProps\" :class=\"cn('flex rounded bg-transparent mr-1', props.class)\">\n <slot>\n <Cross2Icon class=\"w-4 h-4\" />\n </slot>\n </TagsInputItemDelete>\n</template>\n"
},
{
"name": "TagsInputItemText.vue",
"content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n const { class: _, ...delegated } = props\n\n return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n <TagsInputItemText v-bind=\"forwardedProps\" :class=\"cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)\" />\n</template>\n"
},
{
"name": "index.ts",
"content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n"
}
],
"type": "components:ui"
}

2
packages/cli/package.json
View File

@ -63,7 +63,7 @@
"node-fetch": "^3.3.2",
"ora": "^7.0.1",
"prompts": "^2.4.2",
"radix-vue": "^1.4.1",
"radix-vue": "^1.4.6",
"recast": "^0.23.4",
"rimraf": "^5.0.1",
"ts-morph": "^19.0.0",

2
packages/cli/test/fixtures/nuxt/package.json vendored
View File

@ -13,7 +13,7 @@
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"lucide-vue-next": "^0.276.0",
"radix-vue": "^1.4.1",
"radix-vue": "^1.4.6",
"tailwind-merge": "^1.14.0",
"tailwindcss-animate": "^1.0.7"
},

2
packages/module/playground/package.json
View File

@ -14,7 +14,7 @@
"embla-carousel": "8.0.0-rc19",
"embla-carousel-vue": "8.0.0-rc19",
"lucide-vue-next": "^0.276.0",
"radix-vue": "^1.4.1",
"radix-vue": "^1.4.6",
"tailwind-merge": "^2.0.0",
"tailwindcss-animate": "^1.0.7"
},

12
pnpm-lock.yaml
View File

@ -93,8 +93,8 @@ importers:
specifier: ^0.276.0
version: 0.276.0(vue@3.4.15)
radix-vue:
specifier: ^1.4.1
version: 1.4.1(vue@3.4.15)
specifier: ^1.4.6
version: 1.4.6(vue@3.4.15)
tailwindcss-animate:
specifier: ^1.0.7
version: 1.0.7(tailwindcss@3.4.1)
@ -253,8 +253,8 @@ importers:
specifier: ^2.4.2
version: 2.4.2
radix-vue:
specifier: ^1.4.1
version: 1.4.1(vue@3.4.15)
specifier: ^1.4.6
version: 1.4.6(vue@3.4.15)
recast:
specifier: ^0.23.4
version: 0.23.4
@ -10904,8 +10904,8 @@ packages:
resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
dev: false
/radix-vue@1.4.1(vue@3.4.15):
resolution: {integrity: sha512-eJsyIHDZPfIdH0iqrfTODuklPqDXfO0iNDNI1isOYIr+ejmeCjP6Yw1LA7LtDryPnjsSkqj0t04DF7eBn2wtMQ==}
/radix-vue@1.4.6(vue@3.4.15):
resolution: {integrity: sha512-PWM4A0xyQV4bu8R+DfAGGEN4zRTM0Qer5rH+gLnQjjsz0kjteZhVOS0KUkpyrKVPprWFYRNqyzpjjkcYBDrlfQ==}
dependencies:
'@floating-ui/dom': 1.6.1
'@floating-ui/vue': 1.0.6(vue@3.4.15)