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">
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>
<template>
<Alert>
<Terminal class="h-4 w-4" />
<AlertTitle aria-label="test">Heads up!</AlertTitle>
<AlertTitle aria-label="test">
Heads up!
</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>

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

@ -1,8 +1,4 @@
<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 {
Cloud,
CreditCard,
@ -18,93 +14,100 @@ import {
User,
UserPlus,
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>
<template>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">Open Dropdown Menu</Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-56">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<User class="mr-2 h-4 w-4" />
<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 />
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="outline">
Open Dropdown Menu
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-56">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<Github class="mr-2 h-4 w-4" />
<span>GitHub</span>
<User class="mr-2 h-4 w-4" />
<span>Profile</span>
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<LifeBuoy class="mr-2 h-4 w-4" />
<span>Support</span>
<CreditCard class="mr-2 h-4 w-4" />
<span>Billing</span>
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
</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>
<Settings class="mr-2 h-4 w-4" />
<span>Settings</span>
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<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>
<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>

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

@ -1,7 +1,18 @@
<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 { computed, useAttrs } from "vue";
defineOptions({
name: 'Alert',
inheritAttrs: false,
})
withDefaults(defineProps<{
variant?: AlertVariantProps['variant']
}>(), {
variant: 'default',
})
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',
@ -21,27 +32,16 @@ const alertVariants = cva(
type AlertVariantProps = VariantProps<typeof alertVariants>
withDefaults(defineProps<{
variant?: AlertVariantProps['variant']
}>(), {
variant: 'default'
})
defineOptions({
name: 'Alert',
inheritAttrs: false,
})
const allAttrs = useAttrs()
const attrs = computed(() => {
const { class: className, ...rest } = allAttrs
return {
className,
rest: rest
rest,
}
})
</script>
<template>
<div role="alert" v-bind="attrs.rest" :class="cn(alertVariants({ variant }), attrs.className ?? '')">
<slot />

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

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

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

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

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

@ -1,9 +1,9 @@
import Alert from './Alert.vue';
import AlertTitle from './AlertTitle.vue';
import AlertDescription from './AlertDescription.vue';
import Alert from './Alert.vue'
import AlertTitle from './AlertTitle.vue'
import AlertDescription from './AlertDescription.vue'
export {
Alert,
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">
import { computed, useAttrs } from 'vue';
import { DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive, type DropdownMenuCheckboxItemProps, type DropdownMenuCheckboxItemEmits,
DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive } from 'radix-vue';
import { cn, useEmitAsProps } from '@/utils';
import { CheckIcon } from 'lucide-vue-next';
const props = defineProps<DropdownMenuCheckboxItemProps>();
const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
const emitsAsProps = useEmitAsProps(emits);
import { computed, useAttrs } from 'vue'
import {
type DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive, type DropdownMenuCheckboxItemProps,
DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive,
} from 'radix-vue'
import { CheckIcon } from 'lucide-vue-next'
import { cn, useEmitAsProps } from '@/utils'
defineOptions({
name: 'DropdownMenuCheckboxItem',
inheritAttrs: false,
});
})
const props = defineProps<DropdownMenuCheckboxItemProps>()
const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
const emitsAsProps = useEmitAsProps(emits)
const allAttrs = useAttrs()
const attrs = computed(() => {
const { class: className, ...rest } = allAttrs
return {
className,
rest: rest
rest,
}
})
</script>
@ -31,12 +32,13 @@ const attrs = computed(() => {
attrs.className ?? '',
)"
: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">
<DropdownMenuItemIndicatorPrimitive>
<CheckIcon class="h-4 w-4" />
</DropdownMenuItemIndicatorPrimitive>
</span>
<DropdownMenuItemIndicatorPrimitive>
<CheckIcon class="h-4 w-4" />
</DropdownMenuItemIndicatorPrimitive>
</span>
<slot />
</DropdownMenuCheckboxItemPrimitive>
</template>

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

@ -1,26 +1,25 @@
<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { DropdownMenuContent as DropdownMenuContentPrimitive, type DropdownMenuContentProps, type DropdownMenuContentEmits } from 'radix-vue';
import { cn, useEmitAsProps } from '@/utils';
import { DropdownMenuPortal } from '@/registry/default/ui/dropdown-menu';
const props = withDefaults(defineProps<DropdownMenuContentProps>(), {
sideOffset: 4,
});
const emits = defineEmits<DropdownMenuContentEmits>();
const emitsAsProps = useEmitAsProps(emits);
import { computed, useAttrs } from 'vue'
import { type DropdownMenuContentEmits, DropdownMenuContent as DropdownMenuContentPrimitive, type DropdownMenuContentProps } from 'radix-vue'
import { cn, useEmitAsProps } from '@/utils'
import { DropdownMenuPortal } from '@/registry/default/ui/dropdown-menu'
defineOptions({
name: 'DropdownMenuContent',
inheritAttrs: false,
});
})
const props = withDefaults(defineProps<DropdownMenuContentProps>(), {
sideOffset: 4,
})
const emits = defineEmits<DropdownMenuContentEmits>()
const emitsAsProps = useEmitAsProps(emits)
const allAttrs = useAttrs()
const attrs = computed(() => {
const { class: className, ...rest } = allAttrs
return {
className,
rest: rest
rest,
}
})
</script>
@ -30,10 +29,11 @@ const attrs = computed(() => {
<DropdownMenuContentPrimitive
:class="cn(
'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 ?? '',
)"
v-bind="{ ...attrs.rest, ...props, ...emitsAsProps }">
v-bind="{ ...attrs.rest, ...props, ...emitsAsProps }"
>
<slot />
</DropdownMenuContentPrimitive>
</DropdownMenuPortal>

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

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

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

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

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

@ -1,25 +1,26 @@
<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { DropdownMenuRadioItem as DropdownMenuRadioItemPrimitive, type DropdownMenuRadioItemProps, type DropdownMenuRadioItemEmits,
DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive } from 'radix-vue';
import { cn, useEmitAsProps } from '@/utils';
import { CircleIcon } from 'lucide-vue-next';
const props = defineProps<DropdownMenuRadioItemProps>();
const emits = defineEmits<DropdownMenuRadioItemEmits>();
const emitsAsProps = useEmitAsProps(emits);
import { computed, useAttrs } from 'vue'
import {
DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive, type DropdownMenuRadioItemEmits, DropdownMenuRadioItem as DropdownMenuRadioItemPrimitive,
type DropdownMenuRadioItemProps,
} from 'radix-vue'
import { CircleIcon } from 'lucide-vue-next'
import { cn, useEmitAsProps } from '@/utils'
defineOptions({
name: 'DropdownMenuRadioItem',
inheritAttrs: false,
});
})
const props = defineProps<DropdownMenuRadioItemProps>()
const emits = defineEmits<DropdownMenuRadioItemEmits>()
const emitsAsProps = useEmitAsProps(emits)
const allAttrs = useAttrs()
const attrs = computed(() => {
const { class: className, ...rest } = allAttrs
return {
className,
rest: rest
rest,
}
})
</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',
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">
<DropdownMenuItemIndicatorPrimitive>
<CircleIcon class="h-4 w-4 fill-current" />
</DropdownMenuItemIndicatorPrimitive>
</span>
<DropdownMenuItemIndicatorPrimitive>
<CircleIcon class="h-4 w-4 fill-current" />
</DropdownMenuItemIndicatorPrimitive>
</span>
<slot />
</DropdownMenuRadioItemPrimitive>
</template>

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

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

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

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

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

@ -1,23 +1,22 @@
<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { DropdownMenuSubContent as DropdownMenuSubContentPrimitive, type DropdownMenuSubContentProps, type DropdownMenuSubContentEmits } from 'radix-vue';
import { cn, useEmitAsProps } from '@/utils';
const props = defineProps<DropdownMenuSubContentProps>();
const emits = defineEmits<DropdownMenuSubContentEmits>();
const emitsAsProps = useEmitAsProps(emits);
import { computed, useAttrs } from 'vue'
import { type DropdownMenuSubContentEmits, DropdownMenuSubContent as DropdownMenuSubContentPrimitive, type DropdownMenuSubContentProps } from 'radix-vue'
import { cn, useEmitAsProps } from '@/utils'
defineOptions({
name: 'DropdownMenuSubContent',
inheritAttrs: false,
});
})
const props = defineProps<DropdownMenuSubContentProps>()
const emits = defineEmits<DropdownMenuSubContentEmits>()
const emitsAsProps = useEmitAsProps(emits)
const allAttrs = useAttrs()
const attrs = computed(() => {
const { class: className, ...rest } = allAttrs
return {
className,
rest: rest
rest,
}
})
</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',
attrs.className ?? '',
)"
v-bind="{ ...attrs.rest, ...props, ...emitsAsProps }">
v-bind="{ ...attrs.rest, ...props, ...emitsAsProps }"
>
<slot />
</DropdownMenuSubContentPrimitive>
</template>

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

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

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

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