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

chore: format files

Browse Source
This commit is contained in:
rev4324 2023-08-29 22:35:58 +02:00
parent edbdeca603
commit 9d2d9d2449
16 changed files with 240 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/www/src/lib/registry/default/examples/AlertDemo.vue
View File

@ -1,12 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'; import { Terminal } from 'lucide-vue-next'
import { Terminal } from 'lucide-vue-next'; import { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'
</script> </script>
<template> <template>
<Alert> <Alert>
<Terminal class="h-4 w-4" /> <Terminal class="h-4 w-4" />
<AlertTitle aria-label="test">Heads up!</AlertTitle> <AlertTitle aria-label="test">
Heads up!
</AlertTitle>
<AlertDescription> <AlertDescription>
You can add components to your app using the cli. You can add components to your app using the cli.
</AlertDescription> </AlertDescription>

171
apps/www/src/lib/registry/default/examples/DropdownMenuDemo.vue
View File

@ -1,8 +1,4 @@
<script setup lang="ts"> <script setup lang="ts">
import { Button } from "@/registry/default/ui/button";
import { DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,
DropdownMenuItem, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuPortal, DropdownMenuSubContent, DropdownMenu
} from "@/registry/default/ui/dropdown-menu";
import { import {
Cloud, Cloud,
CreditCard, CreditCard,
@ -18,93 +14,100 @@ import {
User, User,
UserPlus, UserPlus,
Users, Users,
} from "lucide-vue-next" } from 'lucide-vue-next'
import { Button } from '@/registry/default/ui/button'
import {
DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel,
DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger,
} from '@/registry/default/ui/dropdown-menu'
</script> </script>
<template> <template>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger as-child>
<Button variant="outline">Open Dropdown Menu</Button> <Button variant="outline">
</DropdownMenuTrigger> Open Dropdown Menu
<DropdownMenuContent class="w-56"> </Button>
<DropdownMenuLabel>My Account</DropdownMenuLabel> </DropdownMenuTrigger>
<DropdownMenuSeparator /> <DropdownMenuContent class="w-56">
<DropdownMenuGroup> <DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem> <DropdownMenuSeparator />
<User class="mr-2 h-4 w-4" /> <DropdownMenuGroup>
<span>Profile</span>
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCard class="mr-2 h-4 w-4" />
<span>Billing</span>
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<Settings class="mr-2 h-4 w-4" />
<span>Settings</span>
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<Keyboard class="mr-2 h-4 w-4" />
<span>Keyboard shortcuts</span>
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<Users class="mr-2 h-4 w-4" />
<span>Team</span>
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<UserPlus class="mr-2 h-4 w-4" />
<span>Invite users</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<Mail class="mr-2 h-4 w-4" />
<span>Email</span>
</DropdownMenuItem>
<DropdownMenuItem>
<MessageSquare class="mr-2 h-4 w-4" />
<span>Message</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<PlusCircle class="mr-2 h-4 w-4" />
<span>More...</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuItem>
<Plus class="mr-2 h-4 w-4" />
<span>New Team</span>
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem> <DropdownMenuItem>
<Github class="mr-2 h-4 w-4" /> <User class="mr-2 h-4 w-4" />
<span>GitHub</span> <span>Profile</span>
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<LifeBuoy class="mr-2 h-4 w-4" /> <CreditCard class="mr-2 h-4 w-4" />
<span>Support</span> <span>Billing</span>
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem disabled>
<Cloud class="mr-2 h-4 w-4" />
<span>API</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem> <DropdownMenuItem>
<LogOut class="mr-2 h-4 w-4" /> <Settings class="mr-2 h-4 w-4" />
<span>Log out</span> <span>Settings</span>
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut> <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> <DropdownMenuItem>
</DropdownMenu> <Keyboard class="mr-2 h-4 w-4" />
<span>Keyboard shortcuts</span>
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<Users class="mr-2 h-4 w-4" />
<span>Team</span>
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<UserPlus class="mr-2 h-4 w-4" />
<span>Invite users</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<Mail class="mr-2 h-4 w-4" />
<span>Email</span>
</DropdownMenuItem>
<DropdownMenuItem>
<MessageSquare class="mr-2 h-4 w-4" />
<span>Message</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<PlusCircle class="mr-2 h-4 w-4" />
<span>More...</span>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuItem>
<Plus class="mr-2 h-4 w-4" />
<span>New Team</span>
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Github class="mr-2 h-4 w-4" />
<span>GitHub</span>
</DropdownMenuItem>
<DropdownMenuItem>
<LifeBuoy class="mr-2 h-4 w-4" />
<span>Support</span>
</DropdownMenuItem>
<DropdownMenuItem disabled>
<Cloud class="mr-2 h-4 w-4" />
<span>API</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<LogOut class="mr-2 h-4 w-4" />
<span>Log out</span>
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</template> </template>

28
apps/www/src/lib/registry/default/ui/alert/Alert.vue
View File

@ -1,7 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { cva, type VariantProps } from "class-variance-authority"; import { type VariantProps, cva } from 'class-variance-authority'
import { computed, useAttrs } from 'vue'
import { cn } from '@/utils' import { cn } from '@/utils'
import { computed, useAttrs } from "vue";
defineOptions({
name: 'Alert',
inheritAttrs: false,
})
withDefaults(defineProps<{
variant?: AlertVariantProps['variant']
}>(), {
variant: 'default',
})
const alertVariants = cva( const alertVariants = cva(
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
@ -21,23 +32,12 @@ const alertVariants = cva(
type AlertVariantProps = VariantProps<typeof alertVariants> type AlertVariantProps = VariantProps<typeof alertVariants>
withDefaults(defineProps<{
variant?: AlertVariantProps['variant']
}>(), {
variant: 'default'
})
defineOptions({
name: 'Alert',
inheritAttrs: false,
})
const allAttrs = useAttrs() const allAttrs = useAttrs()
const attrs = computed(() => { const attrs = computed(() => {
const { class: className, ...rest } = allAttrs const { class: className, ...rest } = allAttrs
return { return {
className, className,
rest: rest rest,
} }
}) })
</script> </script>

6
apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/utils'; import { computed, useAttrs } from 'vue'
import { computed, useAttrs } from 'vue'; import { cn } from '@/utils'
defineOptions({ defineOptions({
name: 'AlertDescription', name: 'AlertDescription',
@ -12,7 +12,7 @@ const attrs = computed(() => {
const { class: className, ...rest } = allAttrs const { class: className, ...rest } = allAttrs
return { return {
className, className,
rest: rest rest,
} }
}) })
</script> </script>

6
apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { cn } from '@/utils'; import { computed, useAttrs } from 'vue'
import { computed, useAttrs } from 'vue'; import { cn } from '@/utils'
defineOptions({ defineOptions({
name: 'AlertTitle', name: 'AlertTitle',
@ -12,7 +12,7 @@ const attrs = computed(() => {
const { class: className, ...rest } = allAttrs const { class: className, ...rest } = allAttrs
return { return {
className, className,
rest: rest rest,
} }
}) })
</script> </script>

8
apps/www/src/lib/registry/default/ui/alert/index.ts
View File

@ -1,9 +1,9 @@
import Alert from './Alert.vue'; import Alert from './Alert.vue'
import AlertTitle from './AlertTitle.vue'; import AlertTitle from './AlertTitle.vue'
import AlertDescription from './AlertDescription.vue'; import AlertDescription from './AlertDescription.vue'
export { export {
Alert, Alert,
AlertTitle, AlertTitle,
AlertDescription AlertDescription,
} }

34
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
View File

@ -1,25 +1,26 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, useAttrs } from 'vue'; import { computed, useAttrs } from 'vue'
import { DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive, type DropdownMenuCheckboxItemProps, type DropdownMenuCheckboxItemEmits, import {
DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive } from 'radix-vue'; type DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive, type DropdownMenuCheckboxItemProps,
import { cn, useEmitAsProps } from '@/utils'; DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive,
import { CheckIcon } from 'lucide-vue-next'; } from 'radix-vue'
import { CheckIcon } from 'lucide-vue-next'
const props = defineProps<DropdownMenuCheckboxItemProps>(); import { cn, useEmitAsProps } from '@/utils'
const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
const emitsAsProps = useEmitAsProps(emits);
defineOptions({ defineOptions({
name: 'DropdownMenuCheckboxItem', name: 'DropdownMenuCheckboxItem',
inheritAttrs: false, inheritAttrs: false,
}); })
const props = defineProps<DropdownMenuCheckboxItemProps>()
const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
const emitsAsProps = useEmitAsProps(emits)
const allAttrs = useAttrs() const allAttrs = useAttrs()
const attrs = computed(() => { const attrs = computed(() => {
const { class: className, ...rest } = allAttrs const { class: className, ...rest } = allAttrs
return { return {
className, className,
rest: rest rest,
} }
}) })
</script> </script>
@ -31,12 +32,13 @@ const attrs = computed(() => {
attrs.className ?? '', attrs.className ?? '',
)" )"
:checked="checked" :checked="checked"
v-bind="{ ...attrs.rest, ...props, ...emitsAsProps }"> v-bind="{ ...attrs.rest, ...props, ...emitsAsProps }"
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicatorPrimitive> <DropdownMenuItemIndicatorPrimitive>
<CheckIcon class="h-4 w-4" /> <CheckIcon class="h-4 w-4" />
</DropdownMenuItemIndicatorPrimitive> </DropdownMenuItemIndicatorPrimitive>
</span> </span>
<slot /> <slot />
</DropdownMenuCheckboxItemPrimitive> </DropdownMenuCheckboxItemPrimitive>
</template> </template>

28
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
View File

@ -1,26 +1,25 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, useAttrs } from 'vue'; import { computed, useAttrs } from 'vue'
import { DropdownMenuContent as DropdownMenuContentPrimitive, type DropdownMenuContentProps, type DropdownMenuContentEmits } from 'radix-vue'; import { type DropdownMenuContentEmits, DropdownMenuContent as DropdownMenuContentPrimitive, type DropdownMenuContentProps } from 'radix-vue'
import { cn, useEmitAsProps } from '@/utils'; import { cn, useEmitAsProps } from '@/utils'
import { DropdownMenuPortal } from '@/registry/default/ui/dropdown-menu'; import { DropdownMenuPortal } from '@/registry/default/ui/dropdown-menu'
const props = withDefaults(defineProps<DropdownMenuContentProps>(), {
sideOffset: 4,
});
const emits = defineEmits<DropdownMenuContentEmits>();
const emitsAsProps = useEmitAsProps(emits);
defineOptions({ defineOptions({
name: 'DropdownMenuContent', name: 'DropdownMenuContent',
inheritAttrs: false, inheritAttrs: false,
}); })
const props = withDefaults(defineProps<DropdownMenuContentProps>(), {
sideOffset: 4,
})
const emits = defineEmits<DropdownMenuContentEmits>()
const emitsAsProps = useEmitAsProps(emits)
const allAttrs = useAttrs() const allAttrs = useAttrs()
const attrs = computed(() => { const attrs = computed(() => {
const { class: className, ...rest } = allAttrs const { class: className, ...rest } = allAttrs
return { return {
className, className,
rest: rest rest,
} }
}) })
</script> </script>
@ -30,10 +29,11 @@ const attrs = computed(() => {
<DropdownMenuContentPrimitive <DropdownMenuContentPrimitive
:class="cn( :class="cn(
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md', 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
attrs.className ?? '', attrs.className ?? '',
)" )"
v-bind="{ ...attrs.rest, ...props, ...emitsAsProps }"> v-bind="{ ...attrs.rest, ...props, ...emitsAsProps }"
>
<slot /> <slot />
</DropdownMenuContentPrimitive> </DropdownMenuContentPrimitive>
</DropdownMenuPortal> </DropdownMenuPortal>

24
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuItem.vue
View File

@ -1,25 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, useAttrs } from 'vue'; import { computed, useAttrs } from 'vue'
import { DropdownMenuItem as DropdownMenuItemPrimitive, type DropdownMenuItemProps, type DropdownMenuItemEmits } from 'radix-vue'; import { type DropdownMenuItemEmits, DropdownMenuItem as DropdownMenuItemPrimitive, type DropdownMenuItemProps } from 'radix-vue'
import { cn, useEmitAsProps } from '@/utils'; import { cn, useEmitAsProps } from '@/utils'
const props = defineProps<DropdownMenuItemProps & {
inset?: boolean
}>();
const emits = defineEmits<DropdownMenuItemEmits>();
const emitsAsProps = useEmitAsProps(emits);
defineOptions({ defineOptions({
name: 'DropdownMenuItem', name: 'DropdownMenuItem',
inheritAttrs: false, inheritAttrs: false,
}); })
const props = defineProps<DropdownMenuItemProps & {
inset?: boolean
}>()
const emits = defineEmits<DropdownMenuItemEmits>()
const emitsAsProps = useEmitAsProps(emits)
const allAttrs = useAttrs() const allAttrs = useAttrs()
const attrs = computed(() => { const attrs = computed(() => {
const { class: className, ...rest } = allAttrs const { class: className, ...rest } = allAttrs
return { return {
className, className,
rest: rest rest,
} }
}) })
</script> </script>
@ -31,7 +30,8 @@ const attrs = computed(() => {
inset && 'pl-8', inset && 'pl-8',
attrs.className ?? '', attrs.className ?? '',
)" )"
v-bind="{ ...attrs.rest, ...props, ...emitsAsProps }"> v-bind="{ ...attrs.rest, ...props, ...emitsAsProps }"
>
<slot /> <slot />
</DropdownMenuItemPrimitive> </DropdownMenuItemPrimitive>
</template> </template>

21
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuLabel.vue
View File

@ -1,23 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, useAttrs } from 'vue'; import { computed, useAttrs } from 'vue'
import { DropdownMenuLabel as DropdownMenuLabelPrimitive, type DropdownMenuLabelProps } from 'radix-vue'; import { DropdownMenuLabel as DropdownMenuLabelPrimitive, type DropdownMenuLabelProps } from 'radix-vue'
import { cn } from '@/utils'; import { cn } from '@/utils'
const props = defineProps<DropdownMenuLabelProps & {
inset?: boolean
}>();
defineOptions({ defineOptions({
name: 'DropdownMenuLabel', name: 'DropdownMenuLabel',
inheritAttrs: false, inheritAttrs: false,
}); })
const props = defineProps<DropdownMenuLabelProps & {
inset?: boolean
}>()
const allAttrs = useAttrs() const allAttrs = useAttrs()
const attrs = computed(() => { const attrs = computed(() => {
const { class: className, ...rest } = allAttrs const { class: className, ...rest } = allAttrs
return { return {
className, className,
rest: rest rest,
} }
}) })
</script> </script>
@ -29,7 +29,8 @@ const attrs = computed(() => {
inset && 'pl-8', inset && 'pl-8',
attrs.className ?? '', attrs.className ?? '',
)" )"
v-bind="{ ...attrs.rest, ...props }"> v-bind="{ ...attrs.rest, ...props }"
>
<slot /> <slot />
</DropdownMenuLabelPrimitive> </DropdownMenuLabelPrimitive>
</template> </template>

34
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
View File

@ -1,25 +1,26 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, useAttrs } from 'vue'; import { computed, useAttrs } from 'vue'
import { DropdownMenuRadioItem as DropdownMenuRadioItemPrimitive, type DropdownMenuRadioItemProps, type DropdownMenuRadioItemEmits, import {
DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive } from 'radix-vue'; DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive, type DropdownMenuRadioItemEmits, DropdownMenuRadioItem as DropdownMenuRadioItemPrimitive,
import { cn, useEmitAsProps } from '@/utils'; type DropdownMenuRadioItemProps,
import { CircleIcon } from 'lucide-vue-next'; } from 'radix-vue'
import { CircleIcon } from 'lucide-vue-next'
const props = defineProps<DropdownMenuRadioItemProps>(); import { cn, useEmitAsProps } from '@/utils'
const emits = defineEmits<DropdownMenuRadioItemEmits>();
const emitsAsProps = useEmitAsProps(emits);
defineOptions({ defineOptions({
name: 'DropdownMenuRadioItem', name: 'DropdownMenuRadioItem',
inheritAttrs: false, inheritAttrs: false,
}); })
const props = defineProps<DropdownMenuRadioItemProps>()
const emits = defineEmits<DropdownMenuRadioItemEmits>()
const emitsAsProps = useEmitAsProps(emits)
const allAttrs = useAttrs() const allAttrs = useAttrs()
const attrs = computed(() => { const attrs = computed(() => {
const { class: className, ...rest } = allAttrs const { class: className, ...rest } = allAttrs
return { return {
className, className,
rest: rest rest,
} }
}) })
</script> </script>
@ -30,12 +31,13 @@ const attrs = computed(() => {
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
attrs.className ?? '', attrs.className ?? '',
)" )"
v-bind="{ ...attrs.rest, ...props, ...emitsAsProps }"> v-bind="{ ...attrs.rest, ...props, ...emitsAsProps }"
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuItemIndicatorPrimitive> <DropdownMenuItemIndicatorPrimitive>
<CircleIcon class="h-4 w-4 fill-current" /> <CircleIcon class="h-4 w-4 fill-current" />
</DropdownMenuItemIndicatorPrimitive> </DropdownMenuItemIndicatorPrimitive>
</span> </span>
<slot /> <slot />
</DropdownMenuRadioItemPrimitive> </DropdownMenuRadioItemPrimitive>
</template> </template>

17
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSeparator.vue
View File

@ -1,21 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, useAttrs } from 'vue'; import { computed, useAttrs } from 'vue'
import { DropdownMenuSeparator as DropdownMenuSeparatorPrimitive, type DropdownMenuSeparatorProps } from 'radix-vue'; import { DropdownMenuSeparator as DropdownMenuSeparatorPrimitive, type DropdownMenuSeparatorProps } from 'radix-vue'
import { cn } from '@/utils'; import { cn } from '@/utils'
const props = defineProps<DropdownMenuSeparatorProps>();
defineOptions({ defineOptions({
name: 'DropdownMenuSeparator', name: 'DropdownMenuSeparator',
inheritAttrs: false, inheritAttrs: false,
}); })
const props = defineProps<DropdownMenuSeparatorProps>()
const allAttrs = useAttrs() const allAttrs = useAttrs()
const attrs = computed(() => { const attrs = computed(() => {
const { class: className, ...rest } = allAttrs const { class: className, ...rest } = allAttrs
return { return {
className, className,
rest: rest rest,
} }
}) })
</script> </script>
@ -26,7 +26,8 @@ const attrs = computed(() => {
'mx-1 my-1 h-px bg-muted', 'mx-1 my-1 h-px bg-muted',
attrs.className ?? '', attrs.className ?? '',
)" )"
v-bind="{ ...attrs.rest, ...props }"> v-bind="{ ...attrs.rest, ...props }"
>
<slot /> <slot />
</DropdownMenuSeparatorPrimitive> </DropdownMenuSeparatorPrimitive>
</template> </template>

11
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuShortcut.vue
View File

@ -1,18 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, useAttrs } from 'vue'; import { computed, useAttrs } from 'vue'
import { cn } from '@/utils'; import { cn } from '@/utils'
defineOptions({ defineOptions({
name: 'DropdownMenuShortcut', name: 'DropdownMenuShortcut',
inheritAttrs: false, inheritAttrs: false,
}); })
const allAttrs = useAttrs() const allAttrs = useAttrs()
const attrs = computed(() => { const attrs = computed(() => {
const { class: className, ...rest } = allAttrs const { class: className, ...rest } = allAttrs
return { return {
className, className,
rest: rest rest,
} }
}) })
</script> </script>
@ -23,7 +23,8 @@ const attrs = computed(() => {
'ml-auto text-xs tracking-widest opacity-60', 'ml-auto text-xs tracking-widest opacity-60',
attrs.className ?? '', attrs.className ?? '',
)" )"
v-bind="{ ...attrs.rest }"> v-bind="{ ...attrs.rest }"
>
<slot /> <slot />
</span> </span>
</template> </template>

20
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
View File

@ -1,23 +1,22 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, useAttrs } from 'vue'; import { computed, useAttrs } from 'vue'
import { DropdownMenuSubContent as DropdownMenuSubContentPrimitive, type DropdownMenuSubContentProps, type DropdownMenuSubContentEmits } from 'radix-vue'; import { type DropdownMenuSubContentEmits, DropdownMenuSubContent as DropdownMenuSubContentPrimitive, type DropdownMenuSubContentProps } from 'radix-vue'
import { cn, useEmitAsProps } from '@/utils'; import { cn, useEmitAsProps } from '@/utils'
const props = defineProps<DropdownMenuSubContentProps>();
const emits = defineEmits<DropdownMenuSubContentEmits>();
const emitsAsProps = useEmitAsProps(emits);
defineOptions({ defineOptions({
name: 'DropdownMenuSubContent', name: 'DropdownMenuSubContent',
inheritAttrs: false, inheritAttrs: false,
}); })
const props = defineProps<DropdownMenuSubContentProps>()
const emits = defineEmits<DropdownMenuSubContentEmits>()
const emitsAsProps = useEmitAsProps(emits)
const allAttrs = useAttrs() const allAttrs = useAttrs()
const attrs = computed(() => { const attrs = computed(() => {
const { class: className, ...rest } = allAttrs const { class: className, ...rest } = allAttrs
return { return {
className, className,
rest: rest rest,
} }
}) })
</script> </script>
@ -28,7 +27,8 @@ const attrs = computed(() => {
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
attrs.className ?? '', attrs.className ?? '',
)" )"
v-bind="{ ...attrs.rest, ...props, ...emitsAsProps }"> v-bind="{ ...attrs.rest, ...props, ...emitsAsProps }"
>
<slot /> <slot />
</DropdownMenuSubContentPrimitive> </DropdownMenuSubContentPrimitive>
</template> </template>

23
apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubTrigger.vue
View File

@ -1,24 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, useAttrs } from 'vue'; import { computed, useAttrs } from 'vue'
import { DropdownMenuSubTrigger as DropdownMenuSubTriggerPrimitive, type DropdownMenuSubTriggerProps } from 'radix-vue'; import { DropdownMenuSubTrigger as DropdownMenuSubTriggerPrimitive, type DropdownMenuSubTriggerProps } from 'radix-vue'
import { cn } from '@/utils'; import { ChevronRight } from 'lucide-vue-next'
import { ChevronRight } from 'lucide-vue-next'; import { cn } from '@/utils'
const props = defineProps<DropdownMenuSubTriggerProps & {
inset?: boolean;
}>();
defineOptions({ defineOptions({
name: 'DropdownMenuSubTrigger', name: 'DropdownMenuSubTrigger',
inheritAttrs: false, inheritAttrs: false,
}); })
const props = defineProps<DropdownMenuSubTriggerProps & {
inset?: boolean
}>()
const allAttrs = useAttrs() const allAttrs = useAttrs()
const attrs = computed(() => { const attrs = computed(() => {
const { class: className, ...rest } = allAttrs const { class: className, ...rest } = allAttrs
return { return {
className, className,
rest: rest rest,
} }
}) })
</script> </script>
@ -30,7 +30,8 @@ const attrs = computed(() => {
inset && 'pl-8', inset && 'pl-8',
attrs.className ?? '', attrs.className ?? '',
)" )"
v-bind="{ ...attrs.rest, ...props }"> v-bind="{ ...attrs.rest, ...props }"
>
<slot /> <slot />
<ChevronRight class="ml-auto w-4 h-4" /> <ChevronRight class="ml-auto w-4 h-4" />
</DropdownMenuSubTriggerPrimitive> </DropdownMenuSubTriggerPrimitive>

26
apps/www/src/lib/registry/default/ui/dropdown-menu/index.ts
View File

@ -1,20 +1,20 @@
import { import {
DropdownMenuRoot as DropdownMenuRootPrimitive,
DropdownMenuTrigger as DropdownMenuTriggerPrimitive,
DropdownMenuGroup as DropdownMenuGroupPrimitive, DropdownMenuGroup as DropdownMenuGroupPrimitive,
DropdownMenuPortal as DropdownMenuPortalPrimitive, DropdownMenuPortal as DropdownMenuPortalPrimitive,
DropdownMenuSub as DropdownMenuSubPrimitive,
DropdownMenuRadioGroup as DropdownMenuRadioGroupPrimitive, DropdownMenuRadioGroup as DropdownMenuRadioGroupPrimitive,
} from "radix-vue" DropdownMenuRoot as DropdownMenuRootPrimitive,
import DropdownMenuSubTrigger from "./DropdownMenuSubTrigger.vue" DropdownMenuSub as DropdownMenuSubPrimitive,
import DropdownMenuSubContent from "./DropdownMenuSubContent.vue" DropdownMenuTrigger as DropdownMenuTriggerPrimitive,
import DropdownMenuContent from "./DropdownMenuContent.vue" } from 'radix-vue'
import DropdownMenuItem from "./DropdownMenuItem.vue" import DropdownMenuSubTrigger from './DropdownMenuSubTrigger.vue'
import DropdownMenuCheckboxItem from "./DropdownMenuCheckboxItem.vue" import DropdownMenuSubContent from './DropdownMenuSubContent.vue'
import DropdownMenuRadioItem from "./DropdownMenuRadioItem.vue" import DropdownMenuContent from './DropdownMenuContent.vue'
import DropdownMenuLabel from "./DropdownMenuLabel.vue" import DropdownMenuItem from './DropdownMenuItem.vue'
import DropdownMenuSeparator from "./DropdownMenuSeparator.vue" import DropdownMenuCheckboxItem from './DropdownMenuCheckboxItem.vue'
import DropdownMenuShortcut from "./DropdownMenuShortcut.vue" import DropdownMenuRadioItem from './DropdownMenuRadioItem.vue'
import DropdownMenuLabel from './DropdownMenuLabel.vue'
import DropdownMenuSeparator from './DropdownMenuSeparator.vue'
import DropdownMenuShortcut from './DropdownMenuShortcut.vue'
const DropdownMenu = DropdownMenuRootPrimitive const DropdownMenu = DropdownMenuRootPrimitive
const DropdownMenuTrigger = DropdownMenuTriggerPrimitive const DropdownMenuTrigger = DropdownMenuTriggerPrimitive