Merge remote-tracking branch 'upstream' into fix/issue/62
This commit is contained in:
Dunqing
commit
5cee81b417
42
.github/workflows/publish.yaml
vendored
42
.github/workflows/publish.yaml
vendored
|
|
@ -11,14 +11,37 @@ on:
|
|||
- dev
|
||||
paths:
|
||||
- 'apps/www/**'
|
||||
# Triggers the workflow on pull request event, but only for pull request opened or pull request labeled with "🚀request-deploy" (from forked repo)
|
||||
# pull_request is not allowed to use secrets, so we use pull_request_target instead (in forked repos)
|
||||
pull_request_target:
|
||||
types:
|
||||
# When a created pull request from forked repo, it will be comment 'Should deploy to add label'
|
||||
- opened
|
||||
# When a labeled '🚀request-deploy' pull request from forked repo, it will be deploy to Cloudflare Pages
|
||||
- labeled
|
||||
|
||||
permissions:
|
||||
# default contents: read & write (in forked repos, only read)
|
||||
contents: write
|
||||
# default deployments: read & write (in forked repos, only read)
|
||||
deployments: write
|
||||
# default pull-requests: read & write (in forked repos, only read)
|
||||
pull-requests: write
|
||||
|
||||
jobs:
|
||||
publish:
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: read
|
||||
deployments: write
|
||||
name: Publish to Cloudflare Pages
|
||||
if: ${{
|
||||
github.event_name == 'push' ||
|
||||
github.event_name == 'workflow_dispatch' ||
|
||||
github.event_name == 'pull_request' ||
|
||||
(github.event_name == 'pull_request_target' &&
|
||||
github.event.action == 'labeled' &&
|
||||
github.event.pull_request.head.repo.fork == true &&
|
||||
contains(github.event.label.name, '🚀request-deploy'))
|
||||
}}
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
|
|
@ -70,3 +93,16 @@ jobs:
|
|||
# Optional: Change the working directory
|
||||
workingDirectory: apps/www
|
||||
wranglerVersion: '3'
|
||||
|
||||
- name: Remove label
|
||||
if: ${{ github.event_name == 'pull_request_target' && contains(github.event.label.name, '🚀request-deploy') }}
|
||||
uses: actions/github-script@v6
|
||||
with:
|
||||
github-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
script: |
|
||||
github.rest.issues.removeLabel({
|
||||
issue_number: context.issue.number,
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
name: ['🚀request-deploy']
|
||||
})
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default
|
|||
import { useConfigStore } from '@/stores/config'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
defineOptions({
|
||||
inheritAttrs: false,
|
||||
})
|
||||
|
||||
withDefaults(defineProps<{
|
||||
name: string
|
||||
align?: 'center' | 'start' | 'end'
|
||||
sfcTsCode?: string
|
||||
|
|
@ -54,7 +58,7 @@ const { style } = useConfigStore()
|
|||
'items-end': align === 'end',
|
||||
})"
|
||||
>
|
||||
<ComponentLoader :key="style" :name="name" />
|
||||
<ComponentLoader v-bind="$attrs" :key="style" :name="name" />
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="code">
|
||||
|
|
|
|||
|
|
@ -16,12 +16,12 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
|
|||
<template>
|
||||
<PageHeader class="page-header pb-8">
|
||||
<a
|
||||
href="/docs/changelog"
|
||||
href="/docs/components/form"
|
||||
class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
|
||||
>
|
||||
🚧 <Separator class="mx-2 h-4" orientation="vertical" />
|
||||
<span class="sm:hidden">WIP</span>
|
||||
<span class="hidden sm:inline">WIP
|
||||
🎉 <Separator class="mx-2 h-4" orientation="vertical" />
|
||||
<span class="sm:hidden">New form & pagination component</span>
|
||||
<span class="hidden sm:inline">New form & pagination component
|
||||
</span>
|
||||
<!-- <ArrowRightIcon class="ml-1 h-4 w-4" /> -->
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -14,13 +14,13 @@ import { cn } from '@/lib/utils'
|
|||
<div class="container relative">
|
||||
<PageHeader class="page-header pb-8">
|
||||
<a
|
||||
href="/docs/changelog"
|
||||
href="/docs/components/form"
|
||||
class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
|
||||
>
|
||||
🎉 <Separator class="mx-2 h-4" orientation="vertical" />
|
||||
<span class="sm:hidden">Style, a new CLI and more.</span>
|
||||
<span class="sm:hidden">New form & pagination component</span>
|
||||
<span class="hidden sm:inline">
|
||||
Introducing Style, a new CLI and more.
|
||||
New form & pagination component
|
||||
</span>
|
||||
<ArrowRightIcon class="ml-1 h-4 w-4" />
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -576,7 +576,27 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/default/example/TypographyTable.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/TypographyTable.vue'],
|
||||
},
|
||||
|
||||
ActivityGoal: {
|
||||
name: 'ActivityGoal',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'card', 'themes', 'config'],
|
||||
component: () => import('../src/lib/registry/default/example/Cards/ActivityGoal.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/ActivityGoal.vue'],
|
||||
},
|
||||
DataTable: {
|
||||
name: 'DataTable',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'card', 'utils'],
|
||||
component: () => import('../src/lib/registry/default/example/Cards/DataTable.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/DataTable.vue'],
|
||||
},
|
||||
Metric: {
|
||||
name: 'Metric',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['card', 'config'],
|
||||
component: () => import('../src/lib/registry/default/example/Cards/Metric.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/default/example/Metric.vue'],
|
||||
},
|
||||
},
|
||||
'new-york': {
|
||||
AccordionDemo: {
|
||||
|
|
@ -1153,5 +1173,26 @@ export const Index = {
|
|||
component: () => import('../src/lib/registry/new-york/example/TypographyTable.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/TypographyTable.vue'],
|
||||
},
|
||||
ActivityGoal: {
|
||||
name: 'ActivityGoal',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'card', 'themes', 'config'],
|
||||
component: () => import('../src/lib/registry/new-york/example/Cards/ActivityGoal.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/ActivityGoal.vue'],
|
||||
},
|
||||
DataTable: {
|
||||
name: 'DataTable',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'card', 'utils'],
|
||||
component: () => import('../src/lib/registry/new-york/example/Cards/DataTable.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/DataTable.vue'],
|
||||
},
|
||||
Metric: {
|
||||
name: 'Metric',
|
||||
type: 'components:example',
|
||||
registryDependencies: ['card', 'config'],
|
||||
component: () => import('../src/lib/registry/new-york/example/Cards/Metric.vue').then(m => m.default),
|
||||
files: ['../src/lib/registry/new-york/example/Metric.vue'],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,21 +16,21 @@
|
|||
"@morev/vue-transitions": "^2.3.6",
|
||||
"@radix-icons/vue": "^1.0.0",
|
||||
"@stackblitz/sdk": "^1.9.0",
|
||||
"@tanstack/vue-table": "^8.10.3",
|
||||
"@unovis/ts": "^1.2.1",
|
||||
"@unovis/vue": "1.3.0-alpha.3",
|
||||
"@vee-validate/zod": "^4.11.7",
|
||||
"@vueuse/core": "^10.4.1",
|
||||
"@tanstack/vue-table": "^8.10.7",
|
||||
"@unovis/ts": "^1.2.2",
|
||||
"@unovis/vue": "1.3.0-beta.3",
|
||||
"@vee-validate/zod": "^4.11.8",
|
||||
"@vueuse/core": "^10.5.0",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.0.0",
|
||||
"codesandbox": "^2.2.3",
|
||||
"date-fns": "^2.30.0",
|
||||
"lucide-vue-next": "^0.276.0",
|
||||
"radix-vue": "^0.4.1",
|
||||
"radix-vue": "^1.0.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"v-calendar": "^3.1.0",
|
||||
"vee-validate": "4.11.7",
|
||||
"vue": "^3.3.4",
|
||||
"v-calendar": "^3.1.2",
|
||||
"vee-validate": "4.11.8",
|
||||
"vue": "^3.3.6",
|
||||
"vue-wrap-balancer": "^1.1.3",
|
||||
"zod": "^3.22.4"
|
||||
},
|
||||
|
|
@ -39,22 +39,23 @@
|
|||
"@iconify-json/tabler": "^1.1.89",
|
||||
"@iconify/json": "^2.2.108",
|
||||
"@iconify/vue": "^4.1.1",
|
||||
"@types/lodash.template": "^4.5.1",
|
||||
"@types/node": "^20.6.0",
|
||||
"@types/lodash.template": "^4.5.2",
|
||||
"@types/node": "^20.8.7",
|
||||
"@vitejs/plugin-vue": "^4.4.0",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.2",
|
||||
"@vue/compiler-core": "^3.3.4",
|
||||
"@vue/compiler-dom": "^3.3.4",
|
||||
"@vue/compiler-core": "^3.3.6",
|
||||
"@vue/compiler-dom": "^3.3.6",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"lodash.template": "^4.5.0",
|
||||
"rimraf": "^5.0.1",
|
||||
"radix-vue": "^1.0.0",
|
||||
"rimraf": "^5.0.5",
|
||||
"tailwind-merge": "^1.14.0",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"tsx": "^3.13.0",
|
||||
"tsx": "^3.14.0",
|
||||
"typescript": "^5.2.2",
|
||||
"unplugin-icons": "^0.17.0",
|
||||
"vite": "^4.4.11",
|
||||
"vitepress": "^1.0.0-rc.20",
|
||||
"vue-tsc": "^1.8.15"
|
||||
"unplugin-icons": "^0.17.1",
|
||||
"vite": "^4.5.0",
|
||||
"vitepress": "^1.0.0-rc.23",
|
||||
"vue-tsc": "^1.8.20"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ primitive: https://www.radix-vue.com/components/accordion.html
|
|||
---
|
||||
|
||||
|
||||
<ComponentPreview name="AccordionDemo" class="[&_.accordion]:sm:max-w-[70%]" />
|
||||
<ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" />
|
||||
|
||||
## Installation
|
||||
|
||||
|
|
|
|||
|
|
@ -96,9 +96,9 @@ const value = ref({})
|
|||
|
||||
<ComponentPreview name="ComboboxPopover" />
|
||||
|
||||
<!-- ### Dropdown menu
|
||||
### Dropdown menu
|
||||
|
||||
<ComponentPreview name="ComboboxDropdownMenu" /> -->
|
||||
<ComponentPreview name="ComboboxDropdownMenu" />
|
||||
|
||||
### Form
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,7 +4,7 @@ description: Displays a form input field or a component that looks like an input
|
|||
---
|
||||
|
||||
|
||||
<ComponentPreview name="InputDemo" class="[&_input]:max-w-xs" />
|
||||
<ComponentPreview name="InputDemo" class="max-w-xs" />
|
||||
|
||||
## Installation
|
||||
|
||||
|
|
@ -45,23 +45,23 @@ import { Input } from '@/components/ui/input'
|
|||
|
||||
### Default
|
||||
|
||||
<ComponentPreview name="InputDemo" class="[&_input]:max-w-xs" />
|
||||
<ComponentPreview name="InputDemo" class="max-w-xs" />
|
||||
|
||||
### File
|
||||
|
||||
<ComponentPreview name="InputFile" class="[&_input]:max-w-xs" />
|
||||
<ComponentPreview name="InputFile" class="max-w-xs" />
|
||||
|
||||
### Disabled
|
||||
|
||||
<ComponentPreview name="InputDisabled" class="[&_input]:max-w-xs" />
|
||||
<ComponentPreview name="InputDisabled" class="max-w-xs" />
|
||||
|
||||
### With Label
|
||||
|
||||
<ComponentPreview name="InputWithLabel" class="[&_input]:max-w-xs" />
|
||||
<ComponentPreview name="InputWithLabel" class="max-w-xs" />
|
||||
|
||||
### With Button
|
||||
|
||||
<ComponentPreview name="InputWithButton" class="[&_input]:max-w-xs" />
|
||||
<ComponentPreview name="InputWithButton" class="max-w-xs" />
|
||||
|
||||
### Form
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ import { Textarea } from '@/components/ui/textarea'
|
|||
|
||||
### With Label
|
||||
|
||||
<ComponentPreview name="TextareaWithLabel" className="[&_div.grid]:w-full" />
|
||||
<ComponentPreview name="TextareaWithLabel" />
|
||||
|
||||
### With Text
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
|
|||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-[200px] p-0">
|
||||
<Command v-model="value" :filter-function="filterFunction">
|
||||
<Command :filter-function="filterFunction">
|
||||
<CommandInput placeholder="Search framework..." />
|
||||
<CommandEmpty>No framework found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
|
|
@ -53,7 +53,10 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
|
|||
v-for="framework in frameworks"
|
||||
:key="framework.value"
|
||||
:value="framework"
|
||||
@select="open = false"
|
||||
@select="(ev) => {
|
||||
value = ev.detail.value as typeof framework
|
||||
open = false
|
||||
}"
|
||||
>
|
||||
<Check
|
||||
:class="cn(
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const open = ref(false)
|
|||
</span>
|
||||
<span class="text-muted-foreground">Create a new project</span>
|
||||
</p>
|
||||
<DropdownMenu :open="open">
|
||||
<DropdownMenu v-model:open="open">
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="ghost" size="sm">
|
||||
<MoreHorizontal />
|
||||
|
|
@ -83,8 +83,8 @@ const open = ref(false)
|
|||
v-for="label in labels"
|
||||
:key="label"
|
||||
:value="label"
|
||||
@select="(value) => {
|
||||
labelRef = value as string
|
||||
@select="(ev) => {
|
||||
labelRef = ev.detail.value as string
|
||||
open = false
|
||||
}"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ import {
|
|||
</ContextMenuCheckboxItem>
|
||||
<ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuRadioGroup value="pedro">
|
||||
<ContextMenuRadioGroup model-value="pedro">
|
||||
<ContextMenuLabel inset>
|
||||
People
|
||||
</ContextMenuLabel>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import { Label } from '@/lib/registry/default/ui/label'
|
|||
Edit Profile
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent class="sm:max-w-[425px]" @escape-key-down.prevent>
|
||||
<DialogContent class="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit profile</DialogTitle>
|
||||
<DialogDescription>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const emits = defineEmits<AccordionRootEmits>()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }" class="accordion">
|
||||
<AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
|
||||
<slot />
|
||||
</AccordionRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useEmitAsProps } from 'radix-vue'
|
||||
import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
|
||||
const props = defineProps<AlertDialogProps>()
|
||||
const emits = defineEmits<AlertDialogEmits>()
|
||||
|
||||
const emitsAsProps = useEmitAsProps(emits)
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AlertDialogRoot v-bind="{ ...props, ...emitsAsProps }">
|
||||
<AlertDialogRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</AlertDialogRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
|
||||
import { CheckboxIndicator, CheckboxRoot, useEmitAsProps } from 'radix-vue'
|
||||
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
import { Check } from 'lucide-vue-next'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<CheckboxRootProps>()
|
||||
const emits = defineEmits<CheckboxRootEmits>()
|
||||
|
||||
const emitsAsProps = useEmitAsProps(emits)
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CheckboxRoot
|
||||
v-bind="{ ...props, ...emitsAsProps }"
|
||||
v-bind="forwarded"
|
||||
:class="
|
||||
cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
|
||||
$attrs.class ?? '')"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const props = defineProps<CollapsibleContentProps>()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<CollapsibleContent v-bind="props">
|
||||
<CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
|
||||
<slot />
|
||||
</CollapsibleContent>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
|
||||
import { ComboboxRoot, useEmitAsProps } from 'radix-vue'
|
||||
import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<ComboboxRootProps>()
|
||||
const emits = defineEmits<ComboboxRootEmits>()
|
||||
|
||||
const emitsAsProps = useEmitAsProps(emits)
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ComboboxRoot
|
||||
v-bind="{ ...props, ...emitsAsProps }"
|
||||
v-bind="forwarded"
|
||||
:open="true"
|
||||
:model-value="''"
|
||||
:class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')"
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ const emitsAsProps = useEmitAsProps(emits)
|
|||
<ComboboxItem
|
||||
v-bind="{ ...props, ...emitsAsProps }"
|
||||
:class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')"
|
||||
@select.prevent
|
||||
>
|
||||
<slot />
|
||||
</ComboboxItem>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { ContextMenuRoot, useEmitAsProps } from 'radix-vue'
|
||||
import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
|
||||
|
||||
const props = defineProps<ContextMenuRootProps>()
|
||||
const emits = defineEmits<ContextMenuRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextMenuRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
|
||||
<ContextMenuRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</ContextMenuRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,18 +3,17 @@ import {
|
|||
ContextMenuRadioGroup,
|
||||
type ContextMenuRadioGroupEmits,
|
||||
type ContextMenuRadioGroupProps,
|
||||
useForwardPropsEmits,
|
||||
} from 'radix-vue'
|
||||
|
||||
const props = defineProps<ContextMenuRadioGroupProps>()
|
||||
|
||||
const emits = defineEmits<ContextMenuRadioGroupEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextMenuRadioGroup
|
||||
v-bind="props"
|
||||
@update:model-value="emits('update:modelValue', $event)"
|
||||
>
|
||||
<ContextMenuRadioGroup v-bind="forwarded">
|
||||
<slot />
|
||||
</ContextMenuRadioGroup>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,18 +4,20 @@ import {
|
|||
ContextMenuRadioItem,
|
||||
type ContextMenuRadioItemEmits,
|
||||
type ContextMenuRadioItemProps,
|
||||
useEmitAsProps,
|
||||
useForwardPropsEmits,
|
||||
} from 'radix-vue'
|
||||
import { Circle } from 'lucide-vue-next'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
|
||||
const emits = defineEmits<ContextMenuRadioItemEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextMenuRadioItem
|
||||
v-bind="{ ...props, ...useEmitAsProps(emits) }"
|
||||
v-bind="forwarded"
|
||||
:class="[
|
||||
cn(
|
||||
'relative flex 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',
|
||||
|
|
|
|||
|
|
@ -3,15 +3,17 @@ import {
|
|||
ContextMenuSub,
|
||||
type ContextMenuSubEmits,
|
||||
type ContextMenuSubProps,
|
||||
useForwardPropsEmits,
|
||||
} from 'radix-vue'
|
||||
|
||||
const props = defineProps<ContextMenuSubProps>()
|
||||
|
||||
const emits = defineEmits<ContextMenuSubEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextMenuSub v-bind="props" @update:open="emits('update:open', $event)">
|
||||
<ContextMenuSub v-bind="forwarded">
|
||||
<slot />
|
||||
</ContextMenuSub>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps } from 'radix-vue'
|
||||
import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'
|
||||
|
||||
const props = defineProps<DropdownMenuRootProps>()
|
||||
const emits = defineEmits<DropdownMenuRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DropdownMenuRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
|
||||
<DropdownMenuRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</DropdownMenuRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,15 +3,17 @@ import {
|
|||
DropdownMenuSub,
|
||||
type DropdownMenuSubEmits,
|
||||
type DropdownMenuSubProps,
|
||||
useForwardPropsEmits,
|
||||
} from 'radix-vue'
|
||||
|
||||
const props = defineProps<DropdownMenuSubProps>()
|
||||
|
||||
const emits = defineEmits<DropdownMenuSubEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DropdownMenuSub v-bind="props" @update:open="emits('update:open', $event)">
|
||||
<DropdownMenuSub v-bind="forwarded">
|
||||
<slot />
|
||||
</DropdownMenuSub>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { HoverCardRoot, type HoverCardRootProps } from 'radix-vue'
|
||||
import { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'
|
||||
|
||||
const props = defineProps<HoverCardRootProps>()
|
||||
const forwarded = useForwardProps(props)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HoverCardRoot v-bind="props">
|
||||
<HoverCardRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</HoverCardRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
MenubarSub,
|
||||
type MenubarSubEmits,
|
||||
} from 'radix-vue'
|
||||
import { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'
|
||||
|
||||
interface MenubarSubRootProps {
|
||||
defaultOpen?: boolean
|
||||
|
|
@ -10,12 +7,13 @@ interface MenubarSubRootProps {
|
|||
}
|
||||
|
||||
const props = defineProps<MenubarSubRootProps>()
|
||||
|
||||
const emits = defineEmits<MenubarSubEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MenubarSub v-bind="props" @update:open="emits('update:open', $event)">
|
||||
<MenubarSub v-bind="forwarded">
|
||||
<slot />
|
||||
</MenubarSub>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'
|
||||
import { ChevronRight } from 'lucide-vue-next'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()
|
||||
|
|
@ -17,5 +18,6 @@ const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: st
|
|||
]"
|
||||
>
|
||||
<slot />
|
||||
<ChevronRight class="ml-auto h-4 w-4" />
|
||||
</MenubarSubTrigger>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { PopoverRoot, useEmitAsProps } from 'radix-vue'
|
||||
import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
|
||||
|
||||
const props = defineProps<PopoverRootProps>()
|
||||
const emits = defineEmits<PopoverRootEmits>()
|
||||
|
||||
const emitsAsProps = useEmitAsProps(emits)
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PopoverRoot v-bind="{ ...props, ...emitsAsProps }">
|
||||
<PopoverRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</PopoverRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useEmitAsProps } from 'radix-vue'
|
||||
import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<RadioGroupRootProps & { class?: string }>()
|
||||
|
||||
const emits = defineEmits<RadioGroupRootEmits>()
|
||||
|
||||
const emitsAsProps = useEmitAsProps(emits)
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="{ ...props, ...emitsAsProps }">
|
||||
<RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="forwarded">
|
||||
<slot />
|
||||
</RadioGroupRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
|
||||
import { SelectRoot, useEmitAsProps } from 'radix-vue'
|
||||
import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
|
||||
const props = defineProps<SelectRootProps>()
|
||||
const emits = defineEmits<SelectRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SelectRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
|
||||
<SelectRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</SelectRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,24 +4,26 @@ import {
|
|||
type SwitchRootEmits,
|
||||
type SwitchRootProps,
|
||||
SwitchThumb,
|
||||
useForwardPropsEmits,
|
||||
} from 'radix-vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<SwitchRootProps & { class?: string }>()
|
||||
|
||||
const emits = defineEmits<SwitchRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
console.log(props, forwarded)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SwitchRoot
|
||||
v-bind="props"
|
||||
v-bind="forwarded"
|
||||
:class="
|
||||
cn(
|
||||
'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
@update:checked="emits('update:checked', $event)"
|
||||
>
|
||||
<SwitchThumb
|
||||
:class="
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import type { ToggleEmits, ToggleProps } from 'radix-vue'
|
||||
import { Toggle, useEmitAsProps } from 'radix-vue'
|
||||
import { Toggle, useForwardPropsEmits } from 'radix-vue'
|
||||
import type { VariantProps } from 'class-variance-authority'
|
||||
import { computed } from 'vue'
|
||||
import { toggleVariants } from '.'
|
||||
|
|
@ -23,11 +23,13 @@ const toggleProps = computed(() => {
|
|||
const { variant, size, ...otherProps } = props
|
||||
return otherProps
|
||||
})
|
||||
|
||||
const forwarded = useForwardPropsEmits(toggleProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle
|
||||
v-bind="{ ...toggleProps, ...useEmitAsProps(emits) }"
|
||||
v-bind="forwarded"
|
||||
:class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
|
||||
>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useEmitAsProps } from 'radix-vue'
|
||||
import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'
|
||||
|
||||
const props = defineProps<TooltipRootProps>()
|
||||
const emits = defineEmits<TooltipRootEmits>()
|
||||
|
||||
const emitsAsProps = useEmitAsProps(emits)
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TooltipRoot v-bind="{ ...props, ...emitsAsProps }">
|
||||
<TooltipRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</TooltipRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { Check, Plus, Send } from 'lucide-vue-next'
|
||||
import { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import {
|
||||
Card,
|
||||
|
|
@ -89,7 +89,7 @@ const selectedUsers = ref<User[]>([])
|
|||
class="rounded-full p-2.5 flex items-center justify-center"
|
||||
@click="open = true"
|
||||
>
|
||||
<Plus class="w-4 h-4" />
|
||||
<PlusIcon class="w-4 h-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent :side-offset="10">
|
||||
|
|
@ -125,7 +125,7 @@ const selectedUsers = ref<User[]>([])
|
|||
>
|
||||
<Input v-model="input" placeholder="Type a message..." class="flex-1" />
|
||||
<Button class="p-2.5 flex items-center justify-center" :disabled="inputLength === 0">
|
||||
<Send class="w-4 h-4" />
|
||||
<PaperPlaneIcon class="w-4 h-4" />
|
||||
<span class="sr-only">Send</span>
|
||||
</Button>
|
||||
</form>
|
||||
|
|
@ -176,7 +176,7 @@ const selectedUsers = ref<User[]>([])
|
|||
{{ user.email }}
|
||||
</p>
|
||||
</div>
|
||||
<Check v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" />
|
||||
<CheckIcon v-if="selectedUsers.includes(user)" class="ml-auto flex h-5 w-5 text-primary" />
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
|
|
|
|||
|
|
@ -53,7 +53,10 @@ const filterFunction = (list: typeof frameworks, search: string) => list.filter(
|
|||
v-for="framework in frameworks"
|
||||
:key="framework.value"
|
||||
:value="framework"
|
||||
@select="open = false"
|
||||
@select="(ev) => {
|
||||
value = ev.detail.value as typeof framework
|
||||
open = false
|
||||
}"
|
||||
>
|
||||
{{ framework.label }}
|
||||
<CheckIcon
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const open = ref(false)
|
|||
</span>
|
||||
<span class="text-muted-foreground">Create a new project</span>
|
||||
</p>
|
||||
<DropdownMenu :open="open">
|
||||
<DropdownMenu v-model:open="open">
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="ghost" size="sm">
|
||||
<DotsHorizontalIcon />
|
||||
|
|
@ -80,8 +80,8 @@ const open = ref(false)
|
|||
v-for="label in labels"
|
||||
:key="label"
|
||||
:value="label"
|
||||
@select="(value) => {
|
||||
labelRef = value as string
|
||||
@select="(ev) => {
|
||||
labelRef = ev.detail.value as string
|
||||
open = false
|
||||
}"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
Calculator,
|
||||
Calendar,
|
||||
CreditCard,
|
||||
Settings,
|
||||
Smile,
|
||||
User,
|
||||
} from 'lucide-vue-next'
|
||||
CalendarIcon,
|
||||
EnvelopeClosedIcon,
|
||||
FaceIcon,
|
||||
GearIcon,
|
||||
PersonIcon,
|
||||
RocketIcon,
|
||||
} from '@radix-icons/vue'
|
||||
|
||||
import {
|
||||
Command,
|
||||
|
|
@ -27,32 +27,32 @@ import {
|
|||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
<CommandGroup heading="Suggestions">
|
||||
<CommandItem value="Calendar">
|
||||
<Calendar class="mr-2 h-4 w-4" />
|
||||
<CalendarIcon class="mr-2 h-4 w-4" />
|
||||
<span>Calendar</span>
|
||||
</CommandItem>
|
||||
<CommandItem value="Search Emoji">
|
||||
<Smile class="mr-2 h-4 w-4" />
|
||||
<FaceIcon class="mr-2 h-4 w-4" />
|
||||
<span>Search Emoji</span>
|
||||
</CommandItem>
|
||||
<CommandItem value="Calculator">
|
||||
<Calculator class="mr-2 h-4 w-4" />
|
||||
<span>Calculator</span>
|
||||
<CommandItem value="Launch">
|
||||
<RocketIcon class="mr-2 h-4 w-4" />
|
||||
<span>Launch</span>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
<CommandGroup heading="Settings">
|
||||
<CommandItem value="Profile">
|
||||
<User class="mr-2 h-4 w-4" />
|
||||
<PersonIcon class="mr-2 h-4 w-4" />
|
||||
<span>Profile</span>
|
||||
<CommandShortcut>⌘P</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem value="Billing">
|
||||
<CreditCard class="mr-2 h-4 w-4" />
|
||||
<span>Billing</span>
|
||||
<CommandItem value="Mail">
|
||||
<EnvelopeClosedIcon class="mr-2 h-4 w-4" />
|
||||
<span>Mail</span>
|
||||
<CommandShortcut>⌘B</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem value="Settings">
|
||||
<Settings class="mr-2 h-4 w-4" />
|
||||
<GearIcon class="mr-2 h-4 w-4" />
|
||||
<span>Settings</span>
|
||||
<CommandShortcut>⌘S</CommandShortcut>
|
||||
</CommandItem>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ import {
|
|||
</ContextMenuCheckboxItem>
|
||||
<ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuRadioGroup value="pedro">
|
||||
<ContextMenuRadioGroup model-value="pedro">
|
||||
<ContextMenuLabel inset>
|
||||
People
|
||||
</ContextMenuLabel>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { addDays, format } from 'date-fns'
|
||||
import { Calendar as CalendarIcon } from 'lucide-vue-next'
|
||||
import { CalendarIcon } from '@radix-icons/vue'
|
||||
|
||||
import { ref } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
|
|||
Edit Profile
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent class="sm:max-w-[425px]" @escape-key-down.prevent>
|
||||
<DialogContent class="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit profile</DialogTitle>
|
||||
<DialogDescription>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const emits = defineEmits<AccordionRootEmits>()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }" class="accordion">
|
||||
<AccordionRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
|
||||
<slot />
|
||||
</AccordionRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useEmitAsProps } from 'radix-vue'
|
||||
import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
|
||||
const props = defineProps<AlertDialogProps>()
|
||||
const emits = defineEmits<AlertDialogEmits>()
|
||||
|
||||
const emitsAsProps = useEmitAsProps(emits)
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AlertDialogRoot v-bind="{ ...props, ...emitsAsProps }">
|
||||
<AlertDialogRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</AlertDialogRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { useVModel } from '@vueuse/core'
|
||||
import type { Calendar } from 'v-calendar'
|
||||
import { DatePicker } from 'v-calendar'
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'
|
||||
import { computed, nextTick, onMounted, ref } from 'vue'
|
||||
import { buttonVariants } from '../button'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
|
@ -55,10 +55,10 @@ onMounted(async () => {
|
|||
<div class="relative">
|
||||
<div class="absolute top-3 flex justify-between w-full px-4">
|
||||
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
|
||||
<ChevronLeft class="w-4 h-4" />
|
||||
<ChevronLeftIcon class="w-4 h-4" />
|
||||
</button>
|
||||
<button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
|
||||
<ChevronRight class="w-4 h-4" />
|
||||
<ChevronRightIcon class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
|
||||
import { CheckboxIndicator, CheckboxRoot, useEmitAsProps } from 'radix-vue'
|
||||
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
import { CheckIcon } from '@radix-icons/vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<CheckboxRootProps>()
|
||||
const emits = defineEmits<CheckboxRootEmits>()
|
||||
|
||||
const emitsAsProps = useEmitAsProps(emits)
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CheckboxRoot
|
||||
v-bind="{ ...props, ...emitsAsProps }"
|
||||
v-bind="forwarded"
|
||||
:class="
|
||||
cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
|
||||
$attrs.class ?? '')"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const props = defineProps<CollapsibleContentProps>()
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<CollapsibleContent v-bind="props">
|
||||
<CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
|
||||
<slot />
|
||||
</CollapsibleContent>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
|
||||
import { ComboboxRoot, useEmitAsProps } from 'radix-vue'
|
||||
import { ComboboxRoot, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<ComboboxRootProps>()
|
||||
const emits = defineEmits<ComboboxRootEmits>()
|
||||
|
||||
const emitsAsProps = useEmitAsProps(emits)
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ComboboxRoot
|
||||
v-bind="{ ...props, ...emitsAsProps }"
|
||||
v-bind="forwarded"
|
||||
:open="true"
|
||||
:class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { Search } from 'lucide-vue-next'
|
||||
import { MagnifyingGlassIcon } from '@radix-icons/vue'
|
||||
import { ComboboxInput, type ComboboxInputProps } from 'radix-vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ export default {
|
|||
|
||||
<template>
|
||||
<div class="flex items-center border-b px-3" cmdk-input-wrapper>
|
||||
<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
<MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
<ComboboxInput
|
||||
v-bind="{ ...props, ...$attrs }"
|
||||
auto-focus
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ const emitsAsProps = useEmitAsProps(emits)
|
|||
<ComboboxItem
|
||||
v-bind="{ ...props, ...emitsAsProps }"
|
||||
:class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')"
|
||||
@select.prevent
|
||||
>
|
||||
<slot />
|
||||
</ComboboxItem>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { ContextMenuRoot, useEmitAsProps } from 'radix-vue'
|
||||
import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
|
||||
|
||||
const props = defineProps<ContextMenuRootProps>()
|
||||
const emits = defineEmits<ContextMenuRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextMenuRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
|
||||
<ContextMenuRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</ContextMenuRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,18 +3,17 @@ import {
|
|||
ContextMenuRadioGroup,
|
||||
type ContextMenuRadioGroupEmits,
|
||||
type ContextMenuRadioGroupProps,
|
||||
useForwardPropsEmits,
|
||||
} from 'radix-vue'
|
||||
|
||||
const props = defineProps<ContextMenuRadioGroupProps>()
|
||||
|
||||
const emits = defineEmits<ContextMenuRadioGroupEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextMenuRadioGroup
|
||||
v-bind="props"
|
||||
@update:model-value="emits('update:modelValue', $event)"
|
||||
>
|
||||
<ContextMenuRadioGroup v-bind="forwarded">
|
||||
<slot />
|
||||
</ContextMenuRadioGroup>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,18 +4,20 @@ import {
|
|||
ContextMenuRadioItem,
|
||||
type ContextMenuRadioItemEmits,
|
||||
type ContextMenuRadioItemProps,
|
||||
useEmitAsProps,
|
||||
useForwardPropsEmits,
|
||||
} from 'radix-vue'
|
||||
import { DotFilledIcon } from '@radix-icons/vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<ContextMenuRadioItemProps & { class?: string }>()
|
||||
const emits = defineEmits<ContextMenuRadioItemEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextMenuRadioItem
|
||||
v-bind="{ ...props, ...useEmitAsProps(emits) }"
|
||||
v-bind="forwarded"
|
||||
:class="[
|
||||
cn(
|
||||
'relative flex 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',
|
||||
|
|
|
|||
|
|
@ -3,15 +3,17 @@ import {
|
|||
ContextMenuSub,
|
||||
type ContextMenuSubEmits,
|
||||
type ContextMenuSubProps,
|
||||
useForwardPropsEmits,
|
||||
} from 'radix-vue'
|
||||
|
||||
const props = defineProps<ContextMenuSubProps>()
|
||||
|
||||
const emits = defineEmits<ContextMenuSubEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextMenuSub v-bind="props" @update:open="emits('update:open', $event)">
|
||||
<ContextMenuSub v-bind="forwarded">
|
||||
<slot />
|
||||
</ContextMenuSub>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {
|
|||
ContextMenuSubTrigger,
|
||||
type ContextMenuSubTriggerProps,
|
||||
} from 'radix-vue'
|
||||
import { ChevronRight } from 'lucide-vue-next'
|
||||
import { ChevronRightIcon } from '@radix-icons/vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()
|
||||
|
|
@ -21,6 +21,6 @@ const props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?:
|
|||
]"
|
||||
>
|
||||
<slot />
|
||||
<ChevronRight class="ml-auto h-4 w-4" />
|
||||
<ChevronRightIcon class="ml-auto h-4 w-4" />
|
||||
</ContextMenuSubTrigger>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps } from 'radix-vue'
|
||||
import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'
|
||||
|
||||
const props = defineProps<DropdownMenuRootProps>()
|
||||
const emits = defineEmits<DropdownMenuRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DropdownMenuRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
|
||||
<DropdownMenuRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</DropdownMenuRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,15 +3,17 @@ import {
|
|||
DropdownMenuSub,
|
||||
type DropdownMenuSubEmits,
|
||||
type DropdownMenuSubProps,
|
||||
useForwardPropsEmits,
|
||||
} from 'radix-vue'
|
||||
|
||||
const props = defineProps<DropdownMenuSubProps>()
|
||||
|
||||
const emits = defineEmits<DropdownMenuSubEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DropdownMenuSub v-bind="props" @update:open="emits('update:open', $event)">
|
||||
<DropdownMenuSub v-bind="forwarded">
|
||||
<slot />
|
||||
</DropdownMenuSub>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { HoverCardRoot, type HoverCardRootProps } from 'radix-vue'
|
||||
import { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'
|
||||
|
||||
const props = defineProps<HoverCardRootProps>()
|
||||
const forwarded = useForwardProps(props)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HoverCardRoot v-bind="props">
|
||||
<HoverCardRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</HoverCardRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import {
|
|||
MenubarContent,
|
||||
type MenubarContentProps,
|
||||
MenubarPortal,
|
||||
useForwardProps,
|
||||
} from 'radix-vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
|
|
@ -14,17 +15,13 @@ const props = withDefaults(
|
|||
sideOffset: 8,
|
||||
},
|
||||
)
|
||||
const forwarded = useForwardProps(props)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MenubarPortal>
|
||||
<MenubarContent
|
||||
:loop="props.loop"
|
||||
:as-child="props.asChild"
|
||||
:side-offset="props.sideOffset"
|
||||
:side="props.side"
|
||||
:align="props.align"
|
||||
:align-offset="props.alignOffset"
|
||||
v-bind="forwarded"
|
||||
:class="
|
||||
cn(
|
||||
'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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',
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
MenubarSub,
|
||||
type MenubarSubEmits,
|
||||
} from 'radix-vue'
|
||||
import { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'
|
||||
|
||||
interface MenubarSubRootProps {
|
||||
defaultOpen?: boolean
|
||||
|
|
@ -10,12 +7,13 @@ interface MenubarSubRootProps {
|
|||
}
|
||||
|
||||
const props = defineProps<MenubarSubRootProps>()
|
||||
|
||||
const emits = defineEmits<MenubarSubEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MenubarSub v-bind="props" @update:open="emits('update:open', $event)">
|
||||
<MenubarSub v-bind="forwarded">
|
||||
<slot />
|
||||
</MenubarSub>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'
|
||||
import { ChevronRightIcon } from '@radix-icons/vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()
|
||||
|
|
@ -17,5 +18,6 @@ const props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: st
|
|||
]"
|
||||
>
|
||||
<slot />
|
||||
<ChevronRightIcon class="ml-auto h-4 w-4" />
|
||||
</MenubarSubTrigger>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { PopoverRoot, useEmitAsProps } from 'radix-vue'
|
||||
import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
|
||||
|
||||
const props = defineProps<PopoverRootProps>()
|
||||
const emits = defineEmits<PopoverRootEmits>()
|
||||
|
||||
const emitsAsProps = useEmitAsProps(emits)
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PopoverRoot v-bind="{ ...props, ...emitsAsProps }">
|
||||
<PopoverRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</PopoverRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useEmitAsProps } from 'radix-vue'
|
||||
import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<RadioGroupRootProps & { class?: string }>()
|
||||
const emits = defineEmits<RadioGroupRootEmits>()
|
||||
|
||||
const emitsAsProps = useEmitAsProps(emits)
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="{ ...props, ...emitsAsProps }">
|
||||
<RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="forwarded">
|
||||
<slot />
|
||||
</RadioGroupRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
|
||||
import { SelectRoot, useEmitAsProps } from 'radix-vue'
|
||||
import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
|
||||
const props = defineProps<SelectRootProps>()
|
||||
const emits = defineEmits<SelectRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SelectRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
|
||||
<SelectRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</SelectRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -4,24 +4,25 @@ import {
|
|||
type SwitchRootEmits,
|
||||
type SwitchRootProps,
|
||||
SwitchThumb,
|
||||
useForwardPropsEmits,
|
||||
} from 'radix-vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<SwitchRootProps & { class?: string }>()
|
||||
|
||||
const emits = defineEmits<SwitchRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SwitchRoot
|
||||
v-bind="props"
|
||||
v-bind="forwarded"
|
||||
:class="
|
||||
cn(
|
||||
'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
|
||||
props.class,
|
||||
)
|
||||
"
|
||||
@update:checked="emits('update:checked', $event)"
|
||||
>
|
||||
<SwitchThumb
|
||||
:class="
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import type { ToggleEmits, ToggleProps } from 'radix-vue'
|
||||
import { Toggle, useEmitAsProps } from 'radix-vue'
|
||||
import { Toggle, useForwardPropsEmits } from 'radix-vue'
|
||||
import type { VariantProps } from 'class-variance-authority'
|
||||
import { computed } from 'vue'
|
||||
import { toggleVariants } from '.'
|
||||
|
|
@ -23,11 +23,13 @@ const toggleProps = computed(() => {
|
|||
const { variant, size, ...otherProps } = props
|
||||
return otherProps
|
||||
})
|
||||
|
||||
const forwarded = useForwardPropsEmits(toggleProps, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Toggle
|
||||
v-bind="{ ...toggleProps, ...useEmitAsProps(emits) }"
|
||||
v-bind="forwarded"
|
||||
:class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
|
||||
>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useEmitAsProps } from 'radix-vue'
|
||||
import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'
|
||||
|
||||
const props = defineProps<TooltipRootProps>()
|
||||
const emits = defineEmits<TooltipRootEmits>()
|
||||
|
||||
const forwarded = useForwardPropsEmits(props, emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TooltipRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
|
||||
<TooltipRoot v-bind="forwarded">
|
||||
<slot />
|
||||
</TooltipRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Accordion.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n AccordionRoot,\n type AccordionRootEmits,\n type AccordionRootProps,\n useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n</script>\n\n<template>\n <AccordionRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\" class=\"accordion\">\n <slot />\n </AccordionRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n AccordionRoot,\n type AccordionRootEmits,\n type AccordionRootProps,\n useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n</script>\n\n<template>\n <AccordionRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </AccordionRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AccordionContent.vue",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "AlertDialog.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <AlertDialogRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </AlertDialogRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <AlertDialogRoot v-bind=\"forwarded\">\n <slot />\n </AlertDialogRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AlertDialogAction.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Checkbox.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useEmitAsProps } from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <CheckboxRoot\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"\n cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n $attrs.class ?? '')\"\n >\n <CheckboxIndicator class=\"flex items-center justify-center text-current\">\n <Check class=\"h-4 w-4\" />\n </CheckboxIndicator>\n </CheckboxRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <CheckboxRoot\n v-bind=\"forwarded\"\n :class=\"\n cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n $attrs.class ?? '')\"\n >\n <CheckboxIndicator class=\"flex items-center justify-center text-current\">\n <Check class=\"h-4 w-4\" />\n </CheckboxIndicator>\n </CheckboxRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
},
|
||||
{
|
||||
"name": "CollapsibleContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n <CollapsibleContent v-bind=\"props\">\n <slot />\n </CollapsibleContent>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n <slot />\n </CollapsibleContent>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CollapsibleTrigger.vue",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Command.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxRoot\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :open=\"true\"\n :model-value=\"''\"\n :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ComboboxRoot\n v-bind=\"forwarded\"\n :open=\"true\"\n :model-value=\"''\"\n :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CommandDialog.vue",
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
},
|
||||
{
|
||||
"name": "CommandItem.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemProps>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxItem\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxItem>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemProps>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxItem\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')\"\n @select.prevent\n >\n <slot />\n </ComboboxItem>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CommandList.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "ContextMenu.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot, useEmitAsProps } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n</script>\n\n<template>\n <ContextMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </ContextMenuRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRoot v-bind=\"forwarded\">\n <slot />\n </ContextMenuRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "ContextMenuCheckboxItem.vue",
|
||||
|
|
@ -37,11 +37,11 @@
|
|||
},
|
||||
{
|
||||
"name": "ContextMenuRadioGroup.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuRadioGroup,\n type ContextMenuRadioGroupEmits,\n type ContextMenuRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\n\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n</script>\n\n<template>\n <ContextMenuRadioGroup\n v-bind=\"props\"\n @update:model-value=\"emits('update:modelValue', $event)\"\n >\n <slot />\n </ContextMenuRadioGroup>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuRadioGroup,\n type ContextMenuRadioGroupEmits,\n type ContextMenuRadioGroupProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRadioGroup v-bind=\"forwarded\">\n <slot />\n </ContextMenuRadioGroup>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "ContextMenuRadioItem.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuItemIndicator,\n ContextMenuRadioItem,\n type ContextMenuRadioItemEmits,\n type ContextMenuRadioItemProps,\n useEmitAsProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n</script>\n\n<template>\n <ContextMenuRadioItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"[\n cn(\n 'relative flex 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 <ContextMenuItemIndicator>\n <Circle class=\"h-2 w-2 fill-current\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuRadioItem>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuItemIndicator,\n ContextMenuRadioItem,\n type ContextMenuRadioItemEmits,\n type ContextMenuRadioItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRadioItem\n v-bind=\"forwarded\"\n :class=\"[\n cn(\n 'relative flex 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 <ContextMenuItemIndicator>\n <Circle class=\"h-2 w-2 fill-current\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuRadioItem>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "ContextMenuSeparator.vue",
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
},
|
||||
{
|
||||
"name": "ContextMenuSub.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSub,\n type ContextMenuSubEmits,\n type ContextMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\n\nconst emits = defineEmits<ContextMenuSubEmits>()\n</script>\n\n<template>\n <ContextMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </ContextMenuSub>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSub,\n type ContextMenuSubEmits,\n type ContextMenuSubProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuSub v-bind=\"forwarded\">\n <slot />\n </ContextMenuSub>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "ContextMenuSubContent.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "DropdownMenu.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n</script>\n\n<template>\n <DropdownMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </DropdownMenuRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuRoot v-bind=\"forwarded\">\n <slot />\n </DropdownMenuRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "DropdownMenuCheckboxItem.vue",
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
},
|
||||
{
|
||||
"name": "DropdownMenuSub.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSub,\n type DropdownMenuSubEmits,\n type DropdownMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\n\nconst emits = defineEmits<DropdownMenuSubEmits>()\n</script>\n\n<template>\n <DropdownMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </DropdownMenuSub>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSub,\n type DropdownMenuSubEmits,\n type DropdownMenuSubProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuSub v-bind=\"forwarded\">\n <slot />\n </DropdownMenuSub>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "DropdownMenuSubContent.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "HoverCard.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"props\">\n <slot />\n </HoverCardRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"forwarded\">\n <slot />\n </HoverCardRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "HoverCardContent.vue",
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
},
|
||||
{
|
||||
"name": "MenubarSub.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarSub,\n type MenubarSubEmits,\n} from 'radix-vue'\n\ninterface MenubarSubRootProps {\n defaultOpen?: boolean\n open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\n\nconst emits = defineEmits<MenubarSubEmits>()\n</script>\n\n<template>\n <MenubarSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </MenubarSub>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'\n\ninterface MenubarSubRootProps {\n defaultOpen?: boolean\n open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <MenubarSub v-bind=\"forwarded\">\n <slot />\n </MenubarSub>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "MenubarSubContent.vue",
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
},
|
||||
{
|
||||
"name": "MenubarSubTrigger.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n </MenubarSubTrigger>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n <ChevronRight class=\"ml-auto h-4 w-4\" />\n </MenubarSubTrigger>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "MenubarTrigger.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Popover.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { PopoverRoot, useEmitAsProps } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <PopoverRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </PopoverRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { PopoverRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <PopoverRoot v-bind=\"forwarded\">\n <slot />\n </PopoverRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "PopoverContent.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "RadioGroup.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\n\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </RadioGroupRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"forwarded\">\n <slot />\n </RadioGroupRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "RadioGroupItem.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Select.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n</script>\n\n<template>\n <SelectRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </SelectRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SelectRoot v-bind=\"forwarded\">\n <slot />\n </SelectRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SelectContent.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Switch.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n SwitchRoot,\n type SwitchRootEmits,\n type SwitchRootProps,\n SwitchThumb,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"props\"\n :class=\"\n cn(\n 'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n props.class,\n )\n \"\n @update:checked=\"emits('update:checked', $event)\"\n >\n <SwitchThumb\n :class=\"\n cn(\n 'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',\n )\n \"\n />\n </SwitchRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n SwitchRoot,\n type SwitchRootEmits,\n type SwitchRootProps,\n SwitchThumb,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\nconsole.log(props, forwarded)\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n props.class,\n )\n \"\n >\n <SwitchThumb\n :class=\"\n cn(\n 'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',\n )\n \"\n />\n </SwitchRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Toggle.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useEmitAsProps } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n</script>\n\n<template>\n <Toggle\n v-bind=\"{ ...toggleProps, ...useEmitAsProps(emits) }\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n <Toggle\n v-bind=\"forwarded\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Tooltip.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <TooltipRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </TooltipRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <TooltipRoot v-bind=\"forwarded\">\n <slot />\n </TooltipRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TooltipContent.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Accordion.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n AccordionRoot,\n type AccordionRootEmits,\n type AccordionRootProps,\n useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n</script>\n\n<template>\n <AccordionRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\" class=\"accordion\">\n <slot />\n </AccordionRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n AccordionRoot,\n type AccordionRootEmits,\n type AccordionRootProps,\n useEmitAsProps,\n} from 'radix-vue'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n</script>\n\n<template>\n <AccordionRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </AccordionRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AccordionContent.vue",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "AlertDialog.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <AlertDialogRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </AlertDialogRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <AlertDialogRoot v-bind=\"forwarded\">\n <slot />\n </AlertDialogRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "AlertDialogAction.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Calendar.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '../button'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps< {\n modelValue?: string | number | Date | Partial<{\n start: Date\n end: Date\n }>\n modelModifiers?: object\n columns?: number\n type?: 'single' | 'range'\n}>(), {\n type: 'single',\n columns: 1,\n})\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n if (!calendarRef.value)\n return\n\n if (direction === 'prev')\n calendarRef.value.movePrev()\n else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n await nextTick()\n if (modelValue.value instanceof Date && calendarRef.value)\n calendarRef.value.focusDate(modelValue.value)\n})\n</script>\n\n<template>\n <div class=\"relative\">\n <div class=\"absolute top-3 flex justify-between w-full px-4\">\n <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n <ChevronLeft class=\"w-4 h-4\" />\n </button>\n <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n <ChevronRight class=\"w-4 h-4\" />\n </button>\n </div>\n\n <DatePicker\n ref=\"datePicker\"\n v-bind=\"$attrs\"\n v-model=\"modelValue\"\n :model-modifiers=\"modelModifiers\"\n class=\"calendar\"\n trim-weeks\n :transition=\"'none'\"\n :columns=\"columns\"\n />\n </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n @apply grid gap-4;\n}\n.calendar .vc-title {\n @apply text-sm font-medium pointer-events-none;\n}\n.calendar .vc-pane-header-wrapper {\n @apply hidden;\n}\n.calendar .vc-weeks {\n @apply mt-4;\n}\n.calendar .vc-weekdays {\n @apply flex;\n}\n.calendar .vc-weekday {\n @apply text-muted-foreground rounded-md w-8 font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day-content {\n @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-8 w-8 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n @apply bg-accent text-accent-foreground;\n}\n</style>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport { computed, nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '../button'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps< {\n modelValue?: string | number | Date | Partial<{\n start: Date\n end: Date\n }>\n modelModifiers?: object\n columns?: number\n type?: 'single' | 'range'\n}>(), {\n type: 'single',\n columns: 1,\n})\nconst emits = defineEmits<{\n (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n if (!calendarRef.value)\n return\n\n if (direction === 'prev')\n calendarRef.value.movePrev()\n else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n await nextTick()\n if (modelValue.value instanceof Date && calendarRef.value)\n calendarRef.value.focusDate(modelValue.value)\n})\n</script>\n\n<template>\n <div class=\"relative\">\n <div class=\"absolute top-3 flex justify-between w-full px-4\">\n <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n <ChevronLeftIcon class=\"w-4 h-4\" />\n </button>\n <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n <ChevronRightIcon class=\"w-4 h-4\" />\n </button>\n </div>\n\n <DatePicker\n ref=\"datePicker\"\n v-bind=\"$attrs\"\n v-model=\"modelValue\"\n :model-modifiers=\"modelModifiers\"\n class=\"calendar\"\n trim-weeks\n :transition=\"'none'\"\n :columns=\"columns\"\n />\n </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n @apply grid gap-4;\n}\n.calendar .vc-title {\n @apply text-sm font-medium pointer-events-none;\n}\n.calendar .vc-pane-header-wrapper {\n @apply hidden;\n}\n.calendar .vc-weeks {\n @apply mt-4;\n}\n.calendar .vc-weekdays {\n @apply flex;\n}\n.calendar .vc-weekday {\n @apply text-muted-foreground rounded-md w-8 font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day-content {\n @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-8 w-8 font-normal aria-selected:opacity-100 select-none;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n @apply bg-accent text-accent-foreground;\n}\n</style>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Checkbox.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useEmitAsProps } from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <CheckboxRoot\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"\n cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n $attrs.class ?? '')\"\n >\n <CheckboxIndicator class=\"flex items-center justify-center text-current\">\n <CheckIcon class=\"h-4 w-4\" />\n </CheckboxIndicator>\n </CheckboxRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <CheckboxRoot\n v-bind=\"forwarded\"\n :class=\"\n cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n $attrs.class ?? '')\"\n >\n <CheckboxIndicator class=\"flex items-center justify-center text-current\">\n <CheckIcon class=\"h-4 w-4\" />\n </CheckboxIndicator>\n </CheckboxRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
},
|
||||
{
|
||||
"name": "CollapsibleContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n <CollapsibleContent v-bind=\"props\">\n <slot />\n </CollapsibleContent>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n <CollapsibleContent v-bind=\"props\" class=\"overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n <slot />\n </CollapsibleContent>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CollapsibleTrigger.vue",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Command.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxRoot\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :open=\"true\"\n :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ComboboxRoot\n v-bind=\"forwarded\"\n :open=\"true\"\n :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CommandDialog.vue",
|
||||
|
|
@ -26,11 +26,11 @@
|
|||
},
|
||||
{
|
||||
"name": "CommandInput.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxInputProps>()\n</script>\n\n<script lang=\"ts\">\nexport default {\n inheritAttrs: false,\n}\n</script>\n\n<template>\n <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n <ComboboxInput\n v-bind=\"{ ...props, ...$attrs }\"\n auto-focus\n :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\"\n />\n </div>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxInputProps>()\n</script>\n\n<script lang=\"ts\">\nexport default {\n inheritAttrs: false,\n}\n</script>\n\n<template>\n <div class=\"flex items-center border-b px-3\" cmdk-input-wrapper>\n <MagnifyingGlassIcon class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n <ComboboxInput\n v-bind=\"{ ...props, ...$attrs }\"\n auto-focus\n :class=\"cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\"\n />\n </div>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CommandItem.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemProps>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxItem\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')\"\n >\n <slot />\n </ComboboxItem>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxItemProps>()\nconst emits = defineEmits<ComboboxItemEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <ComboboxItem\n v-bind=\"{ ...props, ...emitsAsProps }\"\n :class=\"cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', $attrs.class ?? '')\"\n @select.prevent\n >\n <slot />\n </ComboboxItem>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "CommandList.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "ContextMenu.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot, useEmitAsProps } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n</script>\n\n<template>\n <ContextMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </ContextMenuRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRoot v-bind=\"forwarded\">\n <slot />\n </ContextMenuRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "ContextMenuCheckboxItem.vue",
|
||||
|
|
@ -37,11 +37,11 @@
|
|||
},
|
||||
{
|
||||
"name": "ContextMenuRadioGroup.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuRadioGroup,\n type ContextMenuRadioGroupEmits,\n type ContextMenuRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\n\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n</script>\n\n<template>\n <ContextMenuRadioGroup\n v-bind=\"props\"\n @update:model-value=\"emits('update:modelValue', $event)\"\n >\n <slot />\n </ContextMenuRadioGroup>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuRadioGroup,\n type ContextMenuRadioGroupEmits,\n type ContextMenuRadioGroupProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRadioGroup v-bind=\"forwarded\">\n <slot />\n </ContextMenuRadioGroup>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "ContextMenuRadioItem.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuItemIndicator,\n ContextMenuRadioItem,\n type ContextMenuRadioItemEmits,\n type ContextMenuRadioItemProps,\n useEmitAsProps,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n</script>\n\n<template>\n <ContextMenuRadioItem\n v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n :class=\"[\n cn(\n 'relative flex 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 <ContextMenuItemIndicator>\n <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuRadioItem>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuItemIndicator,\n ContextMenuRadioItem,\n type ContextMenuRadioItemEmits,\n type ContextMenuRadioItemProps,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuRadioItem\n v-bind=\"forwarded\"\n :class=\"[\n cn(\n 'relative flex 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 <ContextMenuItemIndicator>\n <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n </ContextMenuItemIndicator>\n </span>\n <slot />\n </ContextMenuRadioItem>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "ContextMenuSeparator.vue",
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
},
|
||||
{
|
||||
"name": "ContextMenuSub.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSub,\n type ContextMenuSubEmits,\n type ContextMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\n\nconst emits = defineEmits<ContextMenuSubEmits>()\n</script>\n\n<template>\n <ContextMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </ContextMenuSub>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSub,\n type ContextMenuSubEmits,\n type ContextMenuSubProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\nconst emits = defineEmits<ContextMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <ContextMenuSub v-bind=\"forwarded\">\n <slot />\n </ContextMenuSub>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "ContextMenuSubContent.vue",
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
},
|
||||
{
|
||||
"name": "ContextMenuSubTrigger.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSubTrigger,\n type ContextMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n <ContextMenuSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n <ChevronRight class=\"ml-auto h-4 w-4\" />\n </ContextMenuSubTrigger>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n ContextMenuSubTrigger,\n type ContextMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n <ContextMenuSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n </ContextMenuSubTrigger>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "ContextMenuTrigger.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "DropdownMenu.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n</script>\n\n<template>\n <DropdownMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </DropdownMenuRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuRoot v-bind=\"forwarded\">\n <slot />\n </DropdownMenuRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "DropdownMenuCheckboxItem.vue",
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
},
|
||||
{
|
||||
"name": "DropdownMenuSub.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSub,\n type DropdownMenuSubEmits,\n type DropdownMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\n\nconst emits = defineEmits<DropdownMenuSubEmits>()\n</script>\n\n<template>\n <DropdownMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </DropdownMenuSub>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenuSub,\n type DropdownMenuSubEmits,\n type DropdownMenuSubProps,\n useForwardPropsEmits,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\nconst emits = defineEmits<DropdownMenuSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <DropdownMenuSub v-bind=\"forwarded\">\n <slot />\n </DropdownMenuSub>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "DropdownMenuSubContent.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "HoverCard.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"props\">\n <slot />\n </HoverCardRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps, useForwardProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <HoverCardRoot v-bind=\"forwarded\">\n <slot />\n </HoverCardRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "HoverCardContent.vue",
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
},
|
||||
{
|
||||
"name": "MenubarContent.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarContent,\n type MenubarContentProps,\n MenubarPortal,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<MenubarContentProps & { class?: string }>(),\n {\n align: 'start',\n alignOffset: -4,\n sideOffset: 8,\n },\n)\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarContent\n :loop=\"props.loop\"\n :as-child=\"props.asChild\"\n :side-offset=\"props.sideOffset\"\n :side=\"props.side\"\n :align=\"props.align\"\n :align-offset=\"props.alignOffset\"\n :class=\"\n cn(\n 'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarContent>\n </MenubarPortal>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarContent,\n type MenubarContentProps,\n MenubarPortal,\n useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n defineProps<MenubarContentProps & { class?: string }>(),\n {\n align: 'start',\n alignOffset: -4,\n sideOffset: 8,\n },\n)\nconst forwarded = useForwardProps(props)\n</script>\n\n<template>\n <MenubarPortal>\n <MenubarContent\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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',\n props.class,\n )\n \"\n >\n <slot />\n </MenubarContent>\n </MenubarPortal>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "MenubarGroup.vue",
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
},
|
||||
{
|
||||
"name": "MenubarSub.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n MenubarSub,\n type MenubarSubEmits,\n} from 'radix-vue'\n\ninterface MenubarSubRootProps {\n defaultOpen?: boolean\n open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\n\nconst emits = defineEmits<MenubarSubEmits>()\n</script>\n\n<template>\n <MenubarSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n <slot />\n </MenubarSub>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'\n\ninterface MenubarSubRootProps {\n defaultOpen?: boolean\n open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\nconst emits = defineEmits<MenubarSubEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <MenubarSub v-bind=\"forwarded\">\n <slot />\n </MenubarSub>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "MenubarSubContent.vue",
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
},
|
||||
{
|
||||
"name": "MenubarSubTrigger.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n </MenubarSubTrigger>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n <MenubarSubTrigger\n v-bind=\"props\"\n :class=\"[\n cn(\n 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n inset && 'pl-8',\n props.class,\n ),\n ]\"\n >\n <slot />\n <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n </MenubarSubTrigger>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "MenubarTrigger.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Popover.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { PopoverRoot, useEmitAsProps } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <PopoverRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </PopoverRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { PopoverRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\nconst emits = defineEmits<PopoverRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <PopoverRoot v-bind=\"forwarded\">\n <slot />\n </PopoverRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "PopoverContent.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "RadioGroup.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useEmitAsProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"{ ...props, ...emitsAsProps }\">\n <slot />\n </RadioGroupRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\nconst emits = defineEmits<RadioGroupRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\" v-bind=\"forwarded\">\n <slot />\n </RadioGroupRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "RadioGroupItem.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Select.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n</script>\n\n<template>\n <SelectRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </SelectRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SelectRoot v-bind=\"forwarded\">\n <slot />\n </SelectRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "SelectContent.vue",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Switch.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n SwitchRoot,\n type SwitchRootEmits,\n type SwitchRootProps,\n SwitchThumb,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"props\"\n :class=\"\n cn(\n 'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n props.class,\n )\n \"\n @update:checked=\"emits('update:checked', $event)\"\n >\n <SwitchThumb\n :class=\"\n cn(\n 'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',\n )\n \"\n />\n </SwitchRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport {\n SwitchRoot,\n type SwitchRootEmits,\n type SwitchRootProps,\n SwitchThumb,\n useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\nconst emits = defineEmits<SwitchRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"forwarded\"\n :class=\"\n cn(\n 'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n props.class,\n )\n \"\n >\n <SwitchThumb\n :class=\"\n cn(\n 'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',\n )\n \"\n />\n </SwitchRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Toggle.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useEmitAsProps } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n</script>\n\n<template>\n <Toggle\n v-bind=\"{ ...toggleProps, ...useEmitAsProps(emits) }\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n variant?: ToggleVariantProps['variant']\n size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n variant: 'default',\n size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n // eslint-disable-next-line unused-imports/no-unused-vars\n const { variant, size, ...otherProps } = props\n return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n <Toggle\n v-bind=\"forwarded\"\n :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n >\n <slot />\n </Toggle>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "index.ts",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"files": [
|
||||
{
|
||||
"name": "Tooltip.vue",
|
||||
"content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useEmitAsProps } from 'radix-vue'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n</script>\n\n<template>\n <TooltipRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n <slot />\n </TooltipRoot>\n</template>\n"
|
||||
"content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n <TooltipRoot v-bind=\"forwarded\">\n <slot />\n </TooltipRoot>\n</template>\n"
|
||||
},
|
||||
{
|
||||
"name": "TooltipContent.vue",
|
||||
|
|
|
|||
12
package.json
12
package.json
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"name": "shadcn-vue",
|
||||
"version": "0.6.1",
|
||||
"version": "0.7.0",
|
||||
"private": true,
|
||||
"packageManager": "pnpm@8.8.0",
|
||||
"packageManager": "pnpm@8.9.2",
|
||||
"license": "MIT",
|
||||
"repository": "radix-vue/shadcn-vue",
|
||||
"workspaces": [
|
||||
|
|
@ -32,13 +32,13 @@
|
|||
"@antfu/eslint-config": "^0.43.1",
|
||||
"@commitlint/cli": "^17.7.1",
|
||||
"@commitlint/config-conventional": "^17.7.0",
|
||||
"eslint": "^8.50.0",
|
||||
"eslint": "^8.52.0",
|
||||
"lint-staged": "^14.0.1",
|
||||
"pnpm": "^8.8.0",
|
||||
"pnpm": "^8.9.2",
|
||||
"simple-git-hooks": "^2.9.0",
|
||||
"taze": "^0.11.3",
|
||||
"taze": "^0.11.4",
|
||||
"typescript": "^5.2.2",
|
||||
"vitest": "^0.34.4"
|
||||
"vitest": "^0.34.6"
|
||||
},
|
||||
"commitlint": {
|
||||
"extends": [
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user