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

chore: update

Browse Source
This commit is contained in:
Sadegh Barati 2024-02-07 18:39:38 +03:30
parent c5bae2b84a
commit 47a149fff5
2 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue' import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
import { CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command' import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command'
import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input' import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
const frameworks = [ const frameworks = [
@ -20,30 +20,37 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
</script> </script>
<template> <template>
<TagsInput :model-value="modelValue"> <TagsInput class="px-0 gap-0" :model-value="modelValue">
<TagsInputItem v-for="item in modelValue" :key="item" :value="item"> <div class="flex gap-2 flex-wrap items-center px-3">
<TagsInputItemText /> <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
<TagsInputItemDelete /> <TagsInputItemText />
</TagsInputItem> <TagsInputItemDelete />
</TagsInputItem>
</div>
<ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm"> <ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm" class="w-full">
<ComboboxAnchor> <ComboboxAnchor as-child>
<ComboboxInput placeholder="Framework..." as-child> <ComboboxInput placeholder="Framework..." as-child>
<TagsInputInput @keydown.enter.prevent /> <TagsInputInput class="w-full px-3" :class="modelValue.length > 0 ? 'mt-2' : ''" @keydown.enter.prevent />
</ComboboxInput> </ComboboxInput>
</ComboboxAnchor> </ComboboxAnchor>
<ComboboxPortal> <ComboboxPortal>
<CommandList :position="'popper'" class="w-48 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"> <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> <CommandGroup>
<CommandItem <CommandItem
v-for="framework in filteredFrameworks" v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label"
:key="framework.value"
:value="framework.label"
@select.prevent="(ev) => { @select.prevent="(ev) => {
if (typeof ev.detail.value === 'string') { if (typeof ev.detail.value === 'string') {
searchTerm = '' searchTerm = ''
modelValue.push(ev.detail.value) modelValue.push(ev.detail.value)
}
if (filteredFrameworks.length === 0) {
open = false open = false
} }
}" }"

33
apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue' import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
import { CommandGroup, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command' 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' import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
const frameworks = [ const frameworks = [
@ -20,30 +20,37 @@ const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.val
</script> </script>
<template> <template>
<TagsInput :model-value="modelValue"> <TagsInput class="px-0 gap-0" :model-value="modelValue">
<TagsInputItem v-for="item in modelValue" :key="item" :value="item"> <div class="flex gap-2 flex-wrap items-center px-3">
<TagsInputItemText /> <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
<TagsInputItemDelete /> <TagsInputItemText />
</TagsInputItem> <TagsInputItemDelete />
</TagsInputItem>
</div>
<ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm"> <ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm" class="w-full">
<ComboboxAnchor> <ComboboxAnchor as-child>
<ComboboxInput placeholder="Framework..." as-child> <ComboboxInput placeholder="Framework..." as-child>
<TagsInputInput @keydown.enter.prevent /> <TagsInputInput class="w-full px-3" :class="modelValue.length > 0 ? 'mt-2' : ''" @keydown.enter.prevent />
</ComboboxInput> </ComboboxInput>
</ComboboxAnchor> </ComboboxAnchor>
<ComboboxPortal> <ComboboxPortal>
<CommandList :position="'popper'" class="w-48 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"> <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> <CommandGroup>
<CommandItem <CommandItem
v-for="framework in filteredFrameworks" v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label"
:key="framework.value"
:value="framework.label"
@select.prevent="(ev) => { @select.prevent="(ev) => {
if (typeof ev.detail.value === 'string') { if (typeof ev.detail.value === 'string') {
searchTerm = '' searchTerm = ''
modelValue.push(ev.detail.value) modelValue.push(ev.detail.value)
}
if (filteredFrameworks.length === 0) {
open = false open = false
} }
}" }"