Skip to content

Commit 66d1394

Browse files
tnyleatnylea
committed
putting files back from inside the ui folder
1 parent dd8399b commit 66d1394

9 files changed

+153
-120
lines changed

‎resources/js/components/ui/navigation-menu/NavigationMenu.vue

+22-14
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,33 @@
11
<script setup lang="ts">
2-
import { cn } from '@/lib/utils';
3-
import { NavigationMenuRoot, useForwardPropsEmits, type NavigationMenuRootEmits, type NavigationMenuRootProps } from 'radix-vue';
4-
import { computed, type HTMLAttributes } from 'vue';
5-
import NavigationMenuViewport from './NavigationMenuViewport.vue';
2+
import { cn } from '@/lib/utils'
3+
import {
4+
NavigationMenuRoot,
5+
type NavigationMenuRootEmits,
6+
type NavigationMenuRootProps,
7+
useForwardPropsEmits,
8+
} from 'radix-vue'
9+
import { computed, type HTMLAttributes } from 'vue'
10+
import NavigationMenuViewport from './NavigationMenuViewport.vue'
611
7-
const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>();
12+
const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
813
9-
const emits = defineEmits<NavigationMenuRootEmits>();
14+
const emits = defineEmits<NavigationMenuRootEmits>()
1015
1116
const delegatedProps = computed(() => {
12-
const { class: _, ...delegated } = props;
17+
const { class: _, ...delegated } = props
1318
14-
return delegated;
15-
});
19+
return delegated
20+
})
1621
17-
const forwarded = useForwardPropsEmits(delegatedProps, emits);
22+
const forwarded = useForwardPropsEmits(delegatedProps, emits)
1823
</script>
1924

2025
<template>
21-
<NavigationMenuRoot v-bind="forwarded" :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)">
22-
<slot />
23-
<NavigationMenuViewport />
24-
</NavigationMenuRoot>
26+
<NavigationMenuRoot
27+
v-bind="forwarded"
28+
:class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
29+
>
30+
<slot />
31+
<NavigationMenuViewport />
32+
</NavigationMenuRoot>
2533
</template>

‎resources/js/components/ui/navigation-menu/NavigationMenuContent.vue

+23-20
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
11
<script setup lang="ts">
2-
import { cn } from '@/lib/utils';
3-
import { NavigationMenuContent, useForwardPropsEmits, type NavigationMenuContentEmits, type NavigationMenuContentProps } from 'radix-vue';
4-
import { computed, type HTMLAttributes } from 'vue';
2+
import { cn } from '@/lib/utils'
3+
import {
4+
NavigationMenuContent,
5+
type NavigationMenuContentEmits,
6+
type NavigationMenuContentProps,
7+
useForwardPropsEmits,
8+
} from 'radix-vue'
9+
import { computed, type HTMLAttributes } from 'vue'
510
6-
const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>();
11+
const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
712
8-
const emits = defineEmits<NavigationMenuContentEmits>();
13+
const emits = defineEmits<NavigationMenuContentEmits>()
914
1015
const delegatedProps = computed(() => {
11-
const { class: _, ...delegated } = props;
16+
const { class: _, ...delegated } = props
1217
13-
return delegated;
14-
});
18+
return delegated
19+
})
1520
16-
const forwarded = useForwardPropsEmits(delegatedProps, emits);
21+
const forwarded = useForwardPropsEmits(delegatedProps, emits)
1722
</script>
1823

1924
<template>
20-
<NavigationMenuContent
21-
v-bind="forwarded"
22-
:class="
23-
cn(
24-
'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
25-
props.class,
26-
)
27-
"
28-
>
29-
<slot />
30-
</NavigationMenuContent>
25+
<NavigationMenuContent
26+
v-bind="forwarded"
27+
:class="cn(
28+
'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
29+
props.class,
30+
)"
31+
>
32+
<slot />
33+
</NavigationMenuContent>
3134
</template>

‎resources/js/components/ui/navigation-menu/NavigationMenuIndicator.vue

+14-19
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,24 @@
11
<script setup lang="ts">
2-
import { cn } from '@/lib/utils';
3-
import { NavigationMenuIndicator, useForwardProps, type NavigationMenuIndicatorProps } from 'radix-vue';
4-
import { computed, type HTMLAttributes } from 'vue';
2+
import { cn } from '@/lib/utils'
3+
import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'
4+
import { computed, type HTMLAttributes } from 'vue'
55
6-
const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>();
6+
const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
77
88
const delegatedProps = computed(() => {
9-
const { class: _, ...delegated } = props;
9+
const { class: _, ...delegated } = props
1010
11-
return delegated;
12-
});
11+
return delegated
12+
})
1313
14-
const forwardedProps = useForwardProps(delegatedProps);
14+
const forwardedProps = useForwardProps(delegatedProps)
1515
</script>
1616

1717
<template>
18-
<NavigationMenuIndicator
19-
v-bind="forwardedProps"
20-
:class="
21-
cn(
22-
'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
23-
props.class,
24-
)
25-
"
26-
>
27-
<div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
28-
</NavigationMenuIndicator>
18+
<NavigationMenuIndicator
19+
v-bind="forwardedProps"
20+
:class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
21+
>
22+
<div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
23+
</NavigationMenuIndicator>
2924
</template>

‎resources/js/components/ui/navigation-menu/NavigationMenuItem.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script setup lang="ts">
2-
import { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue';
2+
import { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue'
33
4-
const props = defineProps<NavigationMenuItemProps>();
4+
const props = defineProps<NavigationMenuItemProps>()
55
</script>
66

77
<template>
8-
<NavigationMenuItem v-bind="props">
9-
<slot />
10-
</NavigationMenuItem>
8+
<NavigationMenuItem v-bind="props">
9+
<slot />
10+
</NavigationMenuItem>
1111
</template>

‎resources/js/components/ui/navigation-menu/NavigationMenuLink.vue

+12-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
<script setup lang="ts">
2-
import { NavigationMenuLink, useForwardPropsEmits, type NavigationMenuLinkEmits, type NavigationMenuLinkProps } from 'radix-vue';
2+
import {
3+
NavigationMenuLink,
4+
type NavigationMenuLinkEmits,
5+
type NavigationMenuLinkProps,
6+
useForwardPropsEmits,
7+
} from 'radix-vue'
38
4-
const props = defineProps<NavigationMenuLinkProps>();
5-
const emits = defineEmits<NavigationMenuLinkEmits>();
9+
const props = defineProps<NavigationMenuLinkProps>()
10+
const emits = defineEmits<NavigationMenuLinkEmits>()
611
7-
const forwarded = useForwardPropsEmits(props, emits);
12+
const forwarded = useForwardPropsEmits(props, emits)
813
</script>
914

1015
<template>
11-
<NavigationMenuLink v-bind="forwarded">
12-
<slot />
13-
</NavigationMenuLink>
16+
<NavigationMenuLink v-bind="forwarded">
17+
<slot />
18+
</NavigationMenuLink>
1419
</template>

‎resources/js/components/ui/navigation-menu/NavigationMenuList.vue

+19-11
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,29 @@
11
<script setup lang="ts">
2-
import { cn } from '@/lib/utils';
3-
import { NavigationMenuList, useForwardProps, type NavigationMenuListProps } from 'radix-vue';
4-
import { computed, type HTMLAttributes } from 'vue';
2+
import { cn } from '@/lib/utils'
3+
import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'
4+
import { computed, type HTMLAttributes } from 'vue'
55
6-
const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>();
6+
const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
77
88
const delegatedProps = computed(() => {
9-
const { class: _, ...delegated } = props;
9+
const { class: _, ...delegated } = props
1010
11-
return delegated;
12-
});
11+
return delegated
12+
})
1313
14-
const forwardedProps = useForwardProps(delegatedProps);
14+
const forwardedProps = useForwardProps(delegatedProps)
1515
</script>
1616

1717
<template>
18-
<NavigationMenuList v-bind="forwardedProps" :class="cn('group flex flex-1 list-none items-center justify-center gap-x-1', props.class)">
19-
<slot />
20-
</NavigationMenuList>
18+
<NavigationMenuList
19+
v-bind="forwardedProps"
20+
:class="
21+
cn(
22+
'group flex flex-1 list-none items-center justify-center gap-x-1',
23+
props.class,
24+
)
25+
"
26+
>
27+
<slot />
28+
</NavigationMenuList>
2129
</template>

‎resources/js/components/ui/navigation-menu/NavigationMenuTrigger.vue

+24-14
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,34 @@
11
<script setup lang="ts">
2-
import { cn } from '@/lib/utils';
3-
import { ChevronDown } from 'lucide-vue-next';
4-
import { NavigationMenuTrigger, useForwardProps, type NavigationMenuTriggerProps } from 'radix-vue';
5-
import { computed, type HTMLAttributes } from 'vue';
6-
import { navigationMenuTriggerStyle } from '.';
2+
import { cn } from '@/lib/utils'
3+
import { ChevronDown } from 'lucide-vue-next'
4+
import {
5+
NavigationMenuTrigger,
6+
type NavigationMenuTriggerProps,
7+
useForwardProps,
8+
} from 'radix-vue'
9+
import { computed, type HTMLAttributes } from 'vue'
10+
import { navigationMenuTriggerStyle } from '.'
711
8-
const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>();
12+
const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
913
1014
const delegatedProps = computed(() => {
11-
const { class: _, ...delegated } = props;
15+
const { class: _, ...delegated } = props
1216
13-
return delegated;
14-
});
17+
return delegated
18+
})
1519
16-
const forwardedProps = useForwardProps(delegatedProps);
20+
const forwardedProps = useForwardProps(delegatedProps)
1721
</script>
1822

1923
<template>
20-
<NavigationMenuTrigger v-bind="forwardedProps" :class="cn(navigationMenuTriggerStyle(), 'group', props.class)">
21-
<slot />
22-
<ChevronDown class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" aria-hidden="true" />
23-
</NavigationMenuTrigger>
24+
<NavigationMenuTrigger
25+
v-bind="forwardedProps"
26+
:class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
27+
>
28+
<slot />
29+
<ChevronDown
30+
class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
31+
aria-hidden="true"
32+
/>
33+
</NavigationMenuTrigger>
2434
</template>

‎resources/js/components/ui/navigation-menu/NavigationMenuViewport.vue

+23-19
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,33 @@
11
<script setup lang="ts">
2-
import { cn } from '@/lib/utils';
3-
import { NavigationMenuViewport, useForwardProps, type NavigationMenuViewportProps } from 'radix-vue';
4-
import { computed, type HTMLAttributes } from 'vue';
2+
import { cn } from '@/lib/utils'
3+
import {
4+
NavigationMenuViewport,
5+
type NavigationMenuViewportProps,
6+
useForwardProps,
7+
} from 'radix-vue'
8+
import { computed, type HTMLAttributes } from 'vue'
59
6-
const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>();
10+
const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
711
812
const delegatedProps = computed(() => {
9-
const { class: _, ...delegated } = props;
13+
const { class: _, ...delegated } = props
1014
11-
return delegated;
12-
});
15+
return delegated
16+
})
1317
14-
const forwardedProps = useForwardProps(delegatedProps);
18+
const forwardedProps = useForwardProps(delegatedProps)
1519
</script>
1620

1721
<template>
18-
<div class="absolute left-0 top-full flex justify-center">
19-
<NavigationMenuViewport
20-
v-bind="forwardedProps"
21-
:class="
22-
cn(
23-
'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
24-
props.class,
25-
)
26-
"
27-
/>
28-
</div>
22+
<div class="absolute left-0 top-full flex justify-center">
23+
<NavigationMenuViewport
24+
v-bind="forwardedProps"
25+
:class="
26+
cn(
27+
'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
28+
props.class,
29+
)
30+
"
31+
/>
32+
</div>
2933
</template>

‎resources/js/components/ui/navigation-menu/index.ts

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { cva } from 'class-variance-authority';
1+
import { cva } from 'class-variance-authority'
22

3-
export { default as NavigationMenu } from './NavigationMenu.vue';
4-
export { default as NavigationMenuContent } from './NavigationMenuContent.vue';
5-
export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue';
6-
export { default as NavigationMenuItem } from './NavigationMenuItem.vue';
7-
export { default as NavigationMenuLink } from './NavigationMenuLink.vue';
8-
export { default as NavigationMenuList } from './NavigationMenuList.vue';
9-
export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue';
10-
export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue';
3+
export { default as NavigationMenu } from './NavigationMenu.vue'
4+
export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
5+
export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue'
6+
export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
7+
export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
8+
export { default as NavigationMenuList } from './NavigationMenuList.vue'
9+
export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
10+
export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'
1111

1212
export const navigationMenuTriggerStyle = cva(
13-
'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
14-
);
13+
'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
14+
)

0 commit comments

Comments
 (0)