refactor: changes all instance of unplugin-icons to radix-icons
This commit is contained in:
parent
88c159dc82
commit
66c51ab339
|
|
@ -13,6 +13,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@morev/vue-transitions": "^2.3.6",
|
"@morev/vue-transitions": "^2.3.6",
|
||||||
|
"@radix-icons/vue": "^1.0.0",
|
||||||
"@tanstack/vue-table": "^8.9.9",
|
"@tanstack/vue-table": "^8.9.9",
|
||||||
"@unovis/ts": "^1.2.1",
|
"@unovis/ts": "^1.2.1",
|
||||||
"@unovis/vue": "1.3.0-alpha.3",
|
"@unovis/vue": "1.3.0-alpha.3",
|
||||||
|
|
|
||||||
|
|
@ -14,9 +14,8 @@ import {
|
||||||
useVueTable,
|
useVueTable,
|
||||||
} from '@tanstack/vue-table'
|
} from '@tanstack/vue-table'
|
||||||
import { h, ref } from 'vue'
|
import { h, ref } from 'vue'
|
||||||
|
import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
|
||||||
import DropdownAction from '../DataTableDemoColumn.vue'
|
import DropdownAction from '../DataTableDemoColumn.vue'
|
||||||
import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
|
|
||||||
import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
|
|
||||||
|
|
||||||
import { Button } from '@/lib/registry/default/ui/button'
|
import { Button } from '@/lib/registry/default/ui/button'
|
||||||
import { Checkbox } from '@/lib/registry/default/ui/checkbox'
|
import { Checkbox } from '@/lib/registry/default/ui/checkbox'
|
||||||
|
|
@ -105,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
|
||||||
return h(Button, {
|
return h(Button, {
|
||||||
variant: 'ghost',
|
variant: 'ghost',
|
||||||
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
|
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
|
||||||
}, ['Email', h(RadixIconsCaretSort, { class: 'ml-2 h-4 w-4' })])
|
}, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
|
||||||
},
|
},
|
||||||
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
|
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
|
||||||
},
|
},
|
||||||
|
|
@ -180,7 +179,7 @@ const table = useVueTable({
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger as-child>
|
<DropdownMenuTrigger as-child>
|
||||||
<Button variant="outline" class="ml-auto">
|
<Button variant="outline" class="ml-auto">
|
||||||
Columns <RadixIconsChevronDown class="ml-2 h-4 w-4" />
|
Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="end">
|
<DropdownMenuContent align="end">
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@ import {
|
||||||
type MenubarCheckboxItemProps,
|
type MenubarCheckboxItemProps,
|
||||||
MenubarItemIndicator,
|
MenubarItemIndicator,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
|
import { Check } from 'lucide-vue-next'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import RadixIconsCheck from '~icons/radix-icons/check'
|
|
||||||
|
|
||||||
const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()
|
const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()
|
||||||
|
|
||||||
|
|
@ -28,7 +28,7 @@ const emit = defineEmits<MenubarCheckboxItemEmits>()
|
||||||
<MenubarItemIndicator
|
<MenubarItemIndicator
|
||||||
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
|
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
|
||||||
>
|
>
|
||||||
<RadixIconsCheck class="w-4 h-4" />
|
<Check class="w-4 h-4" />
|
||||||
</MenubarItemIndicator>
|
</MenubarItemIndicator>
|
||||||
<slot />
|
<slot />
|
||||||
</MenubarCheckboxItem>
|
</MenubarCheckboxItem>
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@ import {
|
||||||
type MenubarRadioItemEmits,
|
type MenubarRadioItemEmits,
|
||||||
type MenubarRadioItemProps,
|
type MenubarRadioItemProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
|
import { Circle } from 'lucide-vue-next'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import RiCheckboxBlankCircleFill from '~icons/ri/checkbox-blank-circle-fill'
|
|
||||||
|
|
||||||
const props = defineProps<MenubarRadioItemProps & { class?: string }>()
|
const props = defineProps<MenubarRadioItemProps & { class?: string }>()
|
||||||
|
|
||||||
|
|
@ -27,7 +27,7 @@ const emits = defineEmits<MenubarRadioItemEmits>()
|
||||||
<MenubarItemIndicator
|
<MenubarItemIndicator
|
||||||
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
|
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
|
||||||
>
|
>
|
||||||
<RiCheckboxBlankCircleFill class="h-2 w-2 fill-curren" />
|
<Circle class="h-2 w-2 fill-curren" />
|
||||||
</MenubarItemIndicator>
|
</MenubarItemIndicator>
|
||||||
|
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,8 @@ import {
|
||||||
RadioGroupItem,
|
RadioGroupItem,
|
||||||
type RadioGroupItemProps,
|
type RadioGroupItemProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
|
import { Circle } from 'lucide-vue-next'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import RiCheckboxBlankCircleFill from '~icons/ri/checkbox-blank-circle-fill'
|
|
||||||
|
|
||||||
const props = defineProps<RadioGroupItemProps & { class?: string }>()
|
const props = defineProps<RadioGroupItemProps & { class?: string }>()
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -23,7 +23,7 @@ const props = defineProps<RadioGroupItemProps & { class?: string }>()
|
||||||
<RadioGroupIndicator
|
<RadioGroupIndicator
|
||||||
:class="cn('flex items-center justify-center', props.class)"
|
:class="cn('flex items-center justify-center', props.class)"
|
||||||
>
|
>
|
||||||
<RiCheckboxBlankCircleFill class="w-2.5 h-2.5 text-foreground" />
|
<Circle class="w-2.5 h-2.5 text-foreground" />
|
||||||
</RadioGroupIndicator>
|
</RadioGroupIndicator>
|
||||||
</RadioGroupItem>
|
</RadioGroupItem>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@ import {
|
||||||
type SelectItemProps,
|
type SelectItemProps,
|
||||||
SelectItemText,
|
SelectItemText,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
|
import { Check } from 'lucide-vue-next'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import RadixIconsCheck from '~icons/radix-icons/check'
|
|
||||||
|
|
||||||
const props = defineProps<SelectItemProps & { class?: string }>()
|
const props = defineProps<SelectItemProps & { class?: string }>()
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -23,7 +23,7 @@ const props = defineProps<SelectItemProps & { class?: string }>()
|
||||||
>
|
>
|
||||||
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
<SelectItemIndicator>
|
<SelectItemIndicator>
|
||||||
<RadixIconsCheck class="h-4 w-4" />
|
<Check class="h-4 w-4" />
|
||||||
</SelectItemIndicator>
|
</SelectItemIndicator>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import RadixIconsRocket from '~icons/radix-icons/rocket'
|
import { RocketIcon } from '@radix-icons/vue'
|
||||||
import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
|
import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Alert>
|
<Alert>
|
||||||
<RadixIconsRocket class="h-4 w-4" />
|
<RocketIcon class="h-4 w-4" />
|
||||||
<AlertTitle>Heads up!</AlertTitle>
|
<AlertTitle>Heads up!</AlertTitle>
|
||||||
<AlertDescription>
|
<AlertDescription>
|
||||||
You can add components to your app using the cli.
|
You can add components to your app using the cli.
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import RadixIconsBell from '~icons/radix-icons/bell'
|
import { BellIcon, CheckIcon } from '@radix-icons/vue'
|
||||||
import RadixIconsCheck from '~icons/radix-icons/check'
|
|
||||||
|
|
||||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
|
|
@ -38,7 +36,7 @@ const notifications = [
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent class="grid gap-4">
|
<CardContent class="grid gap-4">
|
||||||
<div class=" flex items-center space-x-4 rounded-md border p-4">
|
<div class=" flex items-center space-x-4 rounded-md border p-4">
|
||||||
<RadixIconsBell />
|
<BellIcon />
|
||||||
<div class="flex-1 space-y-1">
|
<div class="flex-1 space-y-1">
|
||||||
<p class="text-sm font-medium leading-none">
|
<p class="text-sm font-medium leading-none">
|
||||||
Push Notifications
|
Push Notifications
|
||||||
|
|
@ -68,7 +66,7 @@ const notifications = [
|
||||||
</CardContent>
|
</CardContent>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
<Button class="w-full">
|
<Button class="w-full">
|
||||||
<RadixIconsCheck class="mr-2 h-4 w-4" /> Mark all as read
|
<CheckIcon class="mr-2 h-4 w-4" /> Mark all as read
|
||||||
</Button>
|
</Button>
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { VisStackedBar, VisXYContainer } from '@unovis/vue'
|
import { VisStackedBar, VisXYContainer } from '@unovis/vue'
|
||||||
import Minus from '~icons/radix-icons/minus'
|
import { MinusIcon, PlusIcon } from '@radix-icons/vue'
|
||||||
import Plus from '~icons/radix-icons/plus'
|
|
||||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
|
@ -54,7 +53,7 @@ const data = [
|
||||||
:disabled="goal <= 200"
|
:disabled="goal <= 200"
|
||||||
@click="goal -= 10"
|
@click="goal -= 10"
|
||||||
>
|
>
|
||||||
<Minus class="h-4 w-4" />
|
<MinusIcon class="h-4 w-4" />
|
||||||
<span class="sr-only">Decrease</span>
|
<span class="sr-only">Decrease</span>
|
||||||
</Button>
|
</Button>
|
||||||
<div class="flex-1 text-center">
|
<div class="flex-1 text-center">
|
||||||
|
|
@ -72,7 +71,7 @@ const data = [
|
||||||
:disabled="goal >= 400"
|
:disabled="goal >= 400"
|
||||||
@click="goal += 10 "
|
@click="goal += 10 "
|
||||||
>
|
>
|
||||||
<Plus class="h-4 w-4" />
|
<PlusIcon class="h-4 w-4" />
|
||||||
<span class="sr-only">Increase</span>
|
<span class="sr-only">Increase</span>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -14,9 +14,8 @@ import {
|
||||||
useVueTable,
|
useVueTable,
|
||||||
} from '@tanstack/vue-table'
|
} from '@tanstack/vue-table'
|
||||||
import { h, ref } from 'vue'
|
import { h, ref } from 'vue'
|
||||||
|
import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
|
||||||
import DropdownAction from '../DataTableDemoColumn.vue'
|
import DropdownAction from '../DataTableDemoColumn.vue'
|
||||||
import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
|
|
||||||
import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
|
|
||||||
|
|
||||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
|
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
|
||||||
|
|
@ -105,7 +104,7 @@ const columns: ColumnDef<Payment>[] = [
|
||||||
return h(Button, {
|
return h(Button, {
|
||||||
variant: 'ghost',
|
variant: 'ghost',
|
||||||
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
|
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
|
||||||
}, ['Email', h(RadixIconsCaretSort, { class: 'ml-2 h-4 w-4' })])
|
}, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
|
||||||
},
|
},
|
||||||
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
|
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
|
||||||
},
|
},
|
||||||
|
|
@ -180,7 +179,7 @@ const table = useVueTable({
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger as-child>
|
<DropdownMenuTrigger as-child>
|
||||||
<Button variant="outline" class="ml-auto">
|
<Button variant="outline" class="ml-auto">
|
||||||
Columns <RadixIconsChevronDown class="ml-2 h-4 w-4" />
|
Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="end">
|
<DropdownMenuContent align="end">
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
|
import { CaretSortIcon } from '@radix-icons/vue'
|
||||||
|
|
||||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
import {
|
import {
|
||||||
|
|
@ -23,7 +23,7 @@ const isOpen = ref(false)
|
||||||
</h4>
|
</h4>
|
||||||
<CollapsibleTrigger as-child>
|
<CollapsibleTrigger as-child>
|
||||||
<Button variant="ghost" size="sm" class="w-9 p-0">
|
<Button variant="ghost" size="sm" class="w-9 p-0">
|
||||||
<RadixIconsCaretSort class="h-4 w-4" />
|
<CaretSortIcon class="h-4 w-4" />
|
||||||
<span class="sr-only">Toggle</span>
|
<span class="sr-only">Toggle</span>
|
||||||
</Button>
|
</Button>
|
||||||
</CollapsibleTrigger>
|
</CollapsibleTrigger>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import Check from '~icons/radix-icons/check'
|
import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
|
||||||
import CaretSort from '~icons/radix-icons/caret-sort'
|
|
||||||
|
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import { Button } from '@/lib/registry/default/ui/button'
|
import { Button } from '@/lib/registry/default/ui/button'
|
||||||
|
|
@ -42,7 +41,7 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
|
||||||
class="w-[200px] justify-between"
|
class="w-[200px] justify-between"
|
||||||
>
|
>
|
||||||
{{ value ? value.label : 'Select framework...' }}
|
{{ value ? value.label : 'Select framework...' }}
|
||||||
<CaretSort class="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
<CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent class="w-[200px] p-0">
|
<PopoverContent class="w-[200px] p-0">
|
||||||
|
|
@ -57,7 +56,7 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
|
||||||
@select="open = false"
|
@select="open = false"
|
||||||
>
|
>
|
||||||
{{ framework.label }}
|
{{ framework.label }}
|
||||||
<Check
|
<CheckIcon
|
||||||
:class="cn(
|
:class="cn(
|
||||||
'ml-auto h-4 w-4',
|
'ml-auto h-4 w-4',
|
||||||
value?.value === framework.value ? 'opacity-100' : 'opacity-0',
|
value?.value === framework.value ? 'opacity-100' : 'opacity-0',
|
||||||
|
|
|
||||||
|
|
@ -14,9 +14,8 @@ import {
|
||||||
useVueTable,
|
useVueTable,
|
||||||
} from '@tanstack/vue-table'
|
} from '@tanstack/vue-table'
|
||||||
import { h, ref } from 'vue'
|
import { h, ref } from 'vue'
|
||||||
|
import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
|
||||||
import DropdownAction from './DataTableDemoColumn.vue'
|
import DropdownAction from './DataTableDemoColumn.vue'
|
||||||
import RadixIconsCaretSort from '~icons/radix-icons/caret-sort'
|
|
||||||
import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
|
|
||||||
|
|
||||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
|
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
|
||||||
|
|
@ -104,7 +103,7 @@ const columns: ColumnDef<Payment>[] = [
|
||||||
return h(Button, {
|
return h(Button, {
|
||||||
variant: 'ghost',
|
variant: 'ghost',
|
||||||
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
|
onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
|
||||||
}, ['Email', h(RadixIconsCaretSort, { class: 'ml-2 h-4 w-4' })])
|
}, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
|
||||||
},
|
},
|
||||||
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
|
cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
|
||||||
},
|
},
|
||||||
|
|
@ -173,7 +172,7 @@ const table = useVueTable({
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger as-child>
|
<DropdownMenuTrigger as-child>
|
||||||
<Button variant="outline" class="ml-auto">
|
<Button variant="outline" class="ml-auto">
|
||||||
Columns <RadixIconsChevronDown class="ml-2 h-4 w-4" />
|
Columns <ChevronDownIcon class="ml-2 h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="end">
|
<DropdownMenuContent align="end">
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import RadixIconsDotsHorizontal from '~icons/radix-icons/dots-horizontal'
|
import { DotsHorizontalIcon } from '@radix-icons/vue'
|
||||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
|
||||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
|
||||||
|
|
@ -19,7 +19,7 @@ function copy(id: string) {
|
||||||
<DropdownMenuTrigger as-child>
|
<DropdownMenuTrigger as-child>
|
||||||
<Button variant="ghost" class="h-8 w-8 p-0">
|
<Button variant="ghost" class="h-8 w-8 p-0">
|
||||||
<span class="sr-only">Open menu</span>
|
<span class="sr-only">Open menu</span>
|
||||||
<RadixIconsDotsHorizontal class="h-4 w-4" />
|
<DotsHorizontalIcon class="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="end">
|
<DropdownMenuContent align="end">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { format } from 'date-fns'
|
import { format } from 'date-fns'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import RadixIconsCalendar from '~icons/radix-icons/calendar'
|
import { CalendarIcon } from '@radix-icons/vue'
|
||||||
|
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
|
@ -25,7 +25,7 @@ const date = ref<Date>()
|
||||||
!date && 'text-muted-foreground',
|
!date && 'text-muted-foreground',
|
||||||
)"
|
)"
|
||||||
>
|
>
|
||||||
<RadixIconsCalendar class="mr-2 h-4 w-4" />
|
<CalendarIcon class="mr-2 h-4 w-4" />
|
||||||
<span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
|
<span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { addDays, format } from 'date-fns'
|
import { addDays, format } from 'date-fns'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import RadixIconsCalendar from '~icons/radix-icons/calendar'
|
import { CalendarIcon } from '@radix-icons/vue'
|
||||||
|
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
|
@ -30,7 +30,7 @@ const date = ref({
|
||||||
!date && 'text-muted-foreground',
|
!date && 'text-muted-foreground',
|
||||||
)"
|
)"
|
||||||
>
|
>
|
||||||
<RadixIconsCalendar class="mr-2 h-4 w-4" />
|
<CalendarIcon class="mr-2 h-4 w-4" />
|
||||||
|
|
||||||
<span>
|
<span>
|
||||||
{{ date.start ? (
|
{{ date.start ? (
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import RadixIconsCalendar from '~icons/radix-icons/calendar'
|
import { CalendarIcon } from '@radix-icons/vue'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Avatar,
|
Avatar,
|
||||||
|
|
@ -35,7 +35,7 @@ import {
|
||||||
Progressive JavaScript framework for building modern web interfaces.
|
Progressive JavaScript framework for building modern web interfaces.
|
||||||
</p>
|
</p>
|
||||||
<div class="flex items-center pt-2">
|
<div class="flex items-center pt-2">
|
||||||
<RadixIconsCalendar class="mr-2 h-4 w-4 opacity-70" />
|
<CalendarIcon class="mr-2 h-4 w-4 opacity-70" />
|
||||||
<span class="text-xs text-muted-foreground">
|
<span class="text-xs text-muted-foreground">
|
||||||
Joined January 2014
|
Joined January 2014
|
||||||
</span>
|
</span>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import RadixIconsFontBold from '~icons/radix-icons/font-bold'
|
import { FontBoldIcon } from '@radix-icons/vue'
|
||||||
|
|
||||||
import { Toggle } from '@/lib/registry/new-york/ui/toggle'
|
import { Toggle } from '@/lib/registry/new-york/ui/toggle'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Toggle aria-label="Toggle italic">
|
<Toggle aria-label="Toggle italic">
|
||||||
<RadixIconsFontBold class="h-4 w-4" />
|
<FontBoldIcon class="h-4 w-4" />
|
||||||
</Toggle>
|
</Toggle>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import {
|
||||||
AccordionTrigger,
|
AccordionTrigger,
|
||||||
type AccordionTriggerProps,
|
type AccordionTriggerProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
|
import { ChevronDownIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<AccordionTriggerProps & { class?: string }>()
|
const props = defineProps<AccordionTriggerProps & { class?: string }>()
|
||||||
|
|
@ -22,7 +22,7 @@ const props = defineProps<AccordionTriggerProps & { class?: string }>()
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<RadixIconsChevronDown
|
<ChevronDownIcon
|
||||||
class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
|
class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
|
||||||
/>
|
/>
|
||||||
</AccordionTrigger>
|
</AccordionTrigger>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
|
import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
|
||||||
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
|
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
|
||||||
import RadixIconsCheck from '~icons/radix-icons/check'
|
import { CheckIcon } from '@radix-icons/vue'
|
||||||
import { cn, useEmitAsProps } from '@/lib/utils'
|
import { cn, useEmitAsProps } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<CheckboxRootProps>()
|
const props = defineProps<CheckboxRootProps>()
|
||||||
|
|
@ -18,7 +18,7 @@ const emitsAsProps = useEmitAsProps(emits)
|
||||||
$attrs.class ?? '')"
|
$attrs.class ?? '')"
|
||||||
>
|
>
|
||||||
<CheckboxIndicator class="flex items-center justify-center text-current">
|
<CheckboxIndicator class="flex items-center justify-center text-current">
|
||||||
<RadixIconsCheck class="h-4 w-4" />
|
<CheckIcon class="h-4 w-4" />
|
||||||
</CheckboxIndicator>
|
</CheckboxIndicator>
|
||||||
</CheckboxRoot>
|
</CheckboxRoot>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import {
|
||||||
type ContextMenuCheckboxItemProps,
|
type ContextMenuCheckboxItemProps,
|
||||||
ContextMenuItemIndicator,
|
ContextMenuItemIndicator,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import RadixIconsCheck from '~icons/radix-icons/check'
|
import { CheckIcon } from '@radix-icons/vue'
|
||||||
import { cn, useEmitAsProps } from '@/lib/utils'
|
import { cn, useEmitAsProps } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()
|
const props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()
|
||||||
|
|
@ -26,7 +26,7 @@ const emits = defineEmits<ContextMenuCheckboxItemEmits>()
|
||||||
<ContextMenuItemIndicator
|
<ContextMenuItemIndicator
|
||||||
class="absolute left-1.5 inline-flex w-4 h-4 items-center justify-center"
|
class="absolute left-1.5 inline-flex w-4 h-4 items-center justify-center"
|
||||||
>
|
>
|
||||||
<RadixIconsCheck class="h-4 w-4" />
|
<CheckIcon class="h-4 w-4" />
|
||||||
</ContextMenuItemIndicator>
|
</ContextMenuItemIndicator>
|
||||||
</span>
|
</span>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import {
|
||||||
type ContextMenuRadioItemEmits,
|
type ContextMenuRadioItemEmits,
|
||||||
type ContextMenuRadioItemProps,
|
type ContextMenuRadioItemProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import RadixIconsDotFilled from '~icons/radix-icons/dot-filled'
|
import { DotFilledIcon } from '@radix-icons/vue'
|
||||||
import { cn, useEmitAsProps } from '@/lib/utils'
|
import { cn, useEmitAsProps } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
|
const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
|
||||||
|
|
@ -24,7 +24,7 @@ const emits = defineEmits<ContextMenuRadioItemEmits>()
|
||||||
>
|
>
|
||||||
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
<ContextMenuItemIndicator>
|
<ContextMenuItemIndicator>
|
||||||
<RadixIconsDotFilled class="h-4 w-4 fill-current" />
|
<DotFilledIcon class="h-4 w-4 fill-current" />
|
||||||
</ContextMenuItemIndicator>
|
</ContextMenuItemIndicator>
|
||||||
</span>
|
</span>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ import {
|
||||||
DialogOverlay,
|
DialogOverlay,
|
||||||
DialogPortal,
|
DialogPortal,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import RadixIconsCross2 from '~icons/radix-icons/cross-2'
|
import { Cross2Icon } from '@radix-icons/vue'
|
||||||
import { cn, useEmitAsProps } from '@/lib/utils'
|
import { cn, useEmitAsProps } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<DialogContentProps & { class?: string }>()
|
const props = defineProps<DialogContentProps & { class?: string }>()
|
||||||
|
|
@ -35,7 +35,7 @@ const emitsAsProps = useEmitAsProps(emits)
|
||||||
<DialogClose
|
<DialogClose
|
||||||
class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
|
class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
|
||||||
>
|
>
|
||||||
<RadixIconsCross2 class="w-4 h-4" />
|
<Cross2Icon class="w-4 h-4" />
|
||||||
<span class="sr-only">Close</span>
|
<span class="sr-only">Close</span>
|
||||||
</DialogClose>
|
</DialogClose>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import {
|
||||||
type DropdownMenuCheckboxItemProps,
|
type DropdownMenuCheckboxItemProps,
|
||||||
DropdownMenuItemIndicator,
|
DropdownMenuItemIndicator,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import RadixIconsCheck from '~icons/radix-icons/check'
|
import { CheckIcon } from '@radix-icons/vue'
|
||||||
import { cn, useEmitAsProps } from '@/lib/utils'
|
import { cn, useEmitAsProps } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()
|
const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()
|
||||||
|
|
@ -22,7 +22,7 @@ const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
|
||||||
>
|
>
|
||||||
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
<DropdownMenuItemIndicator>
|
<DropdownMenuItemIndicator>
|
||||||
<RadixIconsCheck class="w-4 h-4" />
|
<CheckIcon class="w-4 h-4" />
|
||||||
</DropdownMenuItemIndicator>
|
</DropdownMenuItemIndicator>
|
||||||
</span>
|
</span>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import {
|
||||||
type DropdownMenuRadioItemEmits,
|
type DropdownMenuRadioItemEmits,
|
||||||
type DropdownMenuRadioItemProps,
|
type DropdownMenuRadioItemProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import RadixIconsDotFilled from '~icons/radix-icons/dot-filled'
|
import { DotFilledIcon } from '@radix-icons/vue'
|
||||||
import { cn, useEmitAsProps } from '@/lib/utils'
|
import { cn, useEmitAsProps } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()
|
const props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()
|
||||||
|
|
@ -24,7 +24,7 @@ const emits = defineEmits<DropdownMenuRadioItemEmits>()
|
||||||
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
|
||||||
<DropdownMenuItemIndicator>
|
<DropdownMenuItemIndicator>
|
||||||
<RadixIconsDotFilled class="h-4 w-4 fill-current" />
|
<DotFilledIcon class="h-4 w-4 fill-current" />
|
||||||
</DropdownMenuItemIndicator>
|
</DropdownMenuItemIndicator>
|
||||||
</span>
|
</span>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import {
|
||||||
DropdownMenuSubTrigger,
|
DropdownMenuSubTrigger,
|
||||||
type DropdownMenuSubTriggerProps,
|
type DropdownMenuSubTriggerProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import RadixIconsChevronRight from '~icons/radix-icons/chevron-right'
|
import { ChevronRightIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
|
const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
|
||||||
|
|
@ -20,6 +20,6 @@ const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<RadixIconsChevronRight class="ml-auto h-4 w-4" />
|
<ChevronRightIcon class="ml-auto h-4 w-4" />
|
||||||
</DropdownMenuSubTrigger>
|
</DropdownMenuSubTrigger>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@ import {
|
||||||
type MenubarCheckboxItemProps,
|
type MenubarCheckboxItemProps,
|
||||||
MenubarItemIndicator,
|
MenubarItemIndicator,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
|
import { CheckIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import RadixIconsCheck from '~icons/radix-icons/check'
|
|
||||||
|
|
||||||
const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()
|
const props = defineProps<MenubarCheckboxItemProps & { class?: string }>()
|
||||||
|
|
||||||
|
|
@ -28,7 +28,7 @@ const emit = defineEmits<MenubarCheckboxItemEmits>()
|
||||||
<MenubarItemIndicator
|
<MenubarItemIndicator
|
||||||
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
|
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
|
||||||
>
|
>
|
||||||
<RadixIconsCheck class="w-4 h-4" />
|
<CheckIcon class="w-4 h-4" />
|
||||||
</MenubarItemIndicator>
|
</MenubarItemIndicator>
|
||||||
<slot />
|
<slot />
|
||||||
</MenubarCheckboxItem>
|
</MenubarCheckboxItem>
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@ import {
|
||||||
type MenubarRadioItemEmits,
|
type MenubarRadioItemEmits,
|
||||||
type MenubarRadioItemProps,
|
type MenubarRadioItemProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
|
import { DotFilledIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import RadixIconsDotFilled from '~icons/radix-icons/dot-filled'
|
|
||||||
|
|
||||||
const props = defineProps<MenubarRadioItemProps & { class?: string }>()
|
const props = defineProps<MenubarRadioItemProps & { class?: string }>()
|
||||||
|
|
||||||
|
|
@ -27,7 +27,7 @@ const emits = defineEmits<MenubarRadioItemEmits>()
|
||||||
<MenubarItemIndicator
|
<MenubarItemIndicator
|
||||||
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
|
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
|
||||||
>
|
>
|
||||||
<RadixIconsDotFilled class="h-4 w-4 fill-current" />
|
<DotFilledIcon class="h-4 w-4 fill-current" />
|
||||||
</MenubarItemIndicator>
|
</MenubarItemIndicator>
|
||||||
|
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@ import {
|
||||||
NavigationMenuTrigger,
|
NavigationMenuTrigger,
|
||||||
type NavigationMenuTriggerProps,
|
type NavigationMenuTriggerProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
|
import { ChevronDownIcon } from '@radix-icons/vue'
|
||||||
import { navigationMenuTriggerStyle } from '.'
|
import { navigationMenuTriggerStyle } from '.'
|
||||||
import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
|
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = defineProps<NavigationMenuTriggerProps & { class?: string }>()
|
const props = defineProps<NavigationMenuTriggerProps & { class?: string }>()
|
||||||
|
|
@ -16,7 +16,7 @@ const props = defineProps<NavigationMenuTriggerProps & { class?: string }>()
|
||||||
v-bind="props"
|
v-bind="props"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<RadixIconsChevronDown
|
<ChevronDownIcon
|
||||||
class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
|
class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,8 @@ import {
|
||||||
RadioGroupItem,
|
RadioGroupItem,
|
||||||
type RadioGroupItemProps,
|
type RadioGroupItemProps,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
|
import { CheckIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import RadixIconsCheck from '~icons/radix-icons/check'
|
|
||||||
|
|
||||||
const props = defineProps<RadioGroupItemProps & { class?: string }>()
|
const props = defineProps<RadioGroupItemProps & { class?: string }>()
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -23,7 +23,7 @@ const props = defineProps<RadioGroupItemProps & { class?: string }>()
|
||||||
<RadioGroupIndicator
|
<RadioGroupIndicator
|
||||||
:class="cn('flex items-center justify-center', props.class)"
|
:class="cn('flex items-center justify-center', props.class)"
|
||||||
>
|
>
|
||||||
<RadixIconsCheck class="h-3.5 w-3.5 fill-primary" />
|
<CheckIcon class="h-3.5 w-3.5 fill-primary" />
|
||||||
</RadioGroupIndicator>
|
</RadioGroupIndicator>
|
||||||
</RadioGroupItem>
|
</RadioGroupItem>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@ import {
|
||||||
type SelectItemProps,
|
type SelectItemProps,
|
||||||
SelectItemText,
|
SelectItemText,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
|
import { CheckIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
import RadixIconsCheck from '~icons/radix-icons/check'
|
|
||||||
|
|
||||||
const props = defineProps<SelectItemProps & { class?: string }>()
|
const props = defineProps<SelectItemProps & { class?: string }>()
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -23,7 +23,7 @@ const props = defineProps<SelectItemProps & { class?: string }>()
|
||||||
>
|
>
|
||||||
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
<SelectItemIndicator>
|
<SelectItemIndicator>
|
||||||
<RadixIconsCheck class="h-4 w-4" />
|
<CheckIcon class="h-4 w-4" />
|
||||||
</SelectItemIndicator>
|
</SelectItemIndicator>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'
|
import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'
|
||||||
import RadixIconsChevronDown from '~icons/radix-icons/chevron-down'
|
import { ChevronDownIcon } from '@radix-icons/vue'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
|
|
@ -27,7 +27,7 @@ const props = withDefaults(
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
<SelectIcon as-child>
|
<SelectIcon as-child>
|
||||||
<RadixIconsChevronDown class="w-4 h-4 opacity-50" />
|
<ChevronDownIcon class="w-4 h-4 opacity-50" />
|
||||||
</SelectIcon>
|
</SelectIcon>
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ import {
|
||||||
DialogPortal,
|
DialogPortal,
|
||||||
} from 'radix-vue'
|
} from 'radix-vue'
|
||||||
import { cva } from 'class-variance-authority'
|
import { cva } from 'class-variance-authority'
|
||||||
import RadixIconsCross2 from '~icons/radix-icons/cross-2'
|
import { Cross2Icon } from '@radix-icons/vue'
|
||||||
import { cn, useEmitAsProps } from '@/lib/utils'
|
import { cn, useEmitAsProps } from '@/lib/utils'
|
||||||
|
|
||||||
interface SheetContentProps extends DialogContentProps {
|
interface SheetContentProps extends DialogContentProps {
|
||||||
|
|
@ -56,7 +56,7 @@ const sheetVariants = cva(
|
||||||
<DialogClose
|
<DialogClose
|
||||||
class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
|
class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
|
||||||
>
|
>
|
||||||
<RadixIconsCross2 class="w-4 h-4 text-muted-foreground" />
|
<Cross2Icon class="w-4 h-4 text-muted-foreground" />
|
||||||
</DialogClose>
|
</DialogClose>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</DialogPortal>
|
</DialogPortal>
|
||||||
|
|
|
||||||
|
|
@ -53,6 +53,9 @@ importers:
|
||||||
'@morev/vue-transitions':
|
'@morev/vue-transitions':
|
||||||
specifier: ^2.3.6
|
specifier: ^2.3.6
|
||||||
version: 2.3.6(vue@3.3.4)
|
version: 2.3.6(vue@3.3.4)
|
||||||
|
'@radix-icons/vue':
|
||||||
|
specifier: ^1.0.0
|
||||||
|
version: 1.0.0(vue@3.3.4)
|
||||||
'@tanstack/vue-table':
|
'@tanstack/vue-table':
|
||||||
specifier: ^8.9.9
|
specifier: ^8.9.9
|
||||||
version: 8.9.9(vue@3.3.4)
|
version: 8.9.9(vue@3.3.4)
|
||||||
|
|
@ -1779,6 +1782,14 @@ packages:
|
||||||
resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
|
resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/@radix-icons/vue@1.0.0(vue@3.3.4):
|
||||||
|
resolution: {integrity: sha512-gKWWk9tTK/laDRRNe5KLLR8A0qUwx4q4+DN8Fq48hJ904u78R82ayAO3TrxbNLgyn2D0h6rRiGdLzQWj7rPcvA==}
|
||||||
|
peerDependencies:
|
||||||
|
vue: '>= 3'
|
||||||
|
dependencies:
|
||||||
|
vue: 3.3.4
|
||||||
|
dev: false
|
||||||
|
|
||||||
/@rollup/pluginutils@5.0.4:
|
/@rollup/pluginutils@5.0.4:
|
||||||
resolution: {integrity: sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==}
|
resolution: {integrity: sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==}
|
||||||
engines: {node: '>=14.0.0'}
|
engines: {node: '>=14.0.0'}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user