refactor: changes all instance of unplugin-icons to radix-icons

This commit is contained in:
zernonia 2023-09-27 11:58:32 +08:00
parent 88c159dc82
commit 66c51ab339
34 changed files with 82 additions and 77 deletions

View File

@ -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",

View File

@ -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">

View File

@ -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>

View File

@ -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 />

View File

@ -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>

View File

@ -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>

View File

@ -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.

View File

@ -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>

View File

@ -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>

View File

@ -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">

View File

@ -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>

View File

@ -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',

View File

@ -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">

View File

@ -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">

View File

@ -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>

View File

@ -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 ? (

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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 />

View File

@ -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 />

View File

@ -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>

View File

@ -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 />

View File

@ -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 />

View File

@ -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>

View File

@ -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>

View File

@ -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 />

View File

@ -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"
/> />

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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'}