Skip to content

Commit 53be3d6

Browse files
niposchniposch
committed
fixed shadcn-vue and added range-calendar for demo
1 parent fa15391 commit 53be3d6

22 files changed

+546
-158
lines changed

Diff for: ‎@/components/ui/button/Button.vue

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script setup lang="ts">
2+
import type { HTMLAttributes } from 'vue'
3+
import { cn } from '@/lib/utils'
4+
import { Primitive, type PrimitiveProps } from 'radix-vue'
5+
import { type ButtonVariants, buttonVariants } from '.'
6+
7+
interface Props extends PrimitiveProps {
8+
variant?: ButtonVariants['variant']
9+
size?: ButtonVariants['size']
10+
class?: HTMLAttributes['class']
11+
}
12+
13+
const props = withDefaults(defineProps<Props>(), {
14+
as: 'button',
15+
})
16+
</script>
17+
18+
<template>
19+
<Primitive
20+
:as="as"
21+
:as-child="asChild"
22+
:class="cn(buttonVariants({ variant, size }), props.class)"
23+
>
24+
<slot />
25+
</Primitive>
26+
</template>

Diff for: ‎@/components/ui/button/index.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { cva, type VariantProps } from 'class-variance-authority'
2+
3+
export { default as Button } from './Button.vue'
4+
5+
export const buttonVariants = cva(
6+
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
7+
{
8+
variants: {
9+
variant: {
10+
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
11+
destructive:
12+
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
13+
outline:
14+
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
15+
secondary:
16+
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
17+
ghost: 'hover:bg-accent hover:text-accent-foreground',
18+
link: 'text-primary underline-offset-4 hover:underline',
19+
},
20+
size: {
21+
default: 'h-10 px-4 py-2',
22+
xs: 'h-7 rounded px-2',
23+
sm: 'h-9 rounded-md px-3',
24+
lg: 'h-11 rounded-md px-8',
25+
icon: 'h-10 w-10',
26+
},
27+
},
28+
defaultVariants: {
29+
variant: 'default',
30+
size: 'default',
31+
},
32+
},
33+
)
34+
35+
export type ButtonVariants = VariantProps<typeof buttonVariants>

Diff for: ‎@/components/ui/range-calendar/RangeCalendar.vue

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<script lang="ts" setup>
2+
import { cn } from '@/lib/utils'
3+
import { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'
4+
import { computed, type HTMLAttributes } from 'vue'
5+
import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'
6+
7+
const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()
8+
9+
const emits = defineEmits<RangeCalendarRootEmits>()
10+
11+
const delegatedProps = computed(() => {
12+
const { class: _, ...delegated } = props
13+
14+
return delegated
15+
})
16+
17+
const forwarded = useForwardPropsEmits(delegatedProps, emits)
18+
</script>
19+
20+
<template>
21+
<RangeCalendarRoot
22+
v-slot="{ grid, weekDays }"
23+
:class="cn('p-3', props.class)"
24+
v-bind="forwarded"
25+
>
26+
<RangeCalendarHeader>
27+
<RangeCalendarPrevButton />
28+
<RangeCalendarHeading />
29+
<RangeCalendarNextButton />
30+
</RangeCalendarHeader>
31+
32+
<div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
33+
<RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
34+
<RangeCalendarGridHead>
35+
<RangeCalendarGridRow>
36+
<RangeCalendarHeadCell
37+
v-for="day in weekDays" :key="day"
38+
>
39+
{{ day }}
40+
</RangeCalendarHeadCell>
41+
</RangeCalendarGridRow>
42+
</RangeCalendarGridHead>
43+
<RangeCalendarGridBody>
44+
<RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
45+
<RangeCalendarCell
46+
v-for="weekDate in weekDates"
47+
:key="weekDate.toString()"
48+
:date="weekDate"
49+
>
50+
<RangeCalendarCellTrigger
51+
:day="weekDate"
52+
:month="month.value"
53+
/>
54+
</RangeCalendarCell>
55+
</RangeCalendarGridRow>
56+
</RangeCalendarGridBody>
57+
</RangeCalendarGrid>
58+
</div>
59+
</RangeCalendarRoot>
60+
</template>

Diff for: ‎@/components/ui/range-calendar/RangeCalendarCell.vue

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script lang="ts" setup>
2+
import { cn } from '@/lib/utils'
3+
import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'
4+
import { computed, type HTMLAttributes } from 'vue'
5+
6+
const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()
7+
8+
const delegatedProps = computed(() => {
9+
const { class: _, ...delegated } = props
10+
11+
return delegated
12+
})
13+
14+
const forwardedProps = useForwardProps(delegatedProps)
15+
</script>
16+
17+
<template>
18+
<RangeCalendarCell
19+
:class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
20+
v-bind="forwardedProps"
21+
>
22+
<slot />
23+
</RangeCalendarCell>
24+
</template>

Diff for: ‎@/components/ui/range-calendar/RangeCalendarCellTrigger.vue

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script lang="ts" setup>
2+
import { buttonVariants } from '@/components/ui/button'
3+
import { cn } from '@/lib/utils'
4+
import { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'
5+
import { computed, type HTMLAttributes } from 'vue'
6+
7+
const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
8+
9+
const delegatedProps = computed(() => {
10+
const { class: _, ...delegated } = props
11+
12+
return delegated
13+
})
14+
15+
const forwardedProps = useForwardProps(delegatedProps)
16+
</script>
17+
18+
<template>
19+
<RangeCalendarCellTrigger
20+
:class="cn(
21+
buttonVariants({ variant: 'ghost' }),
22+
'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',
23+
'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
24+
// Selection Start
25+
'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
26+
// Selection End
27+
'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
28+
// Outside months
29+
'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
30+
// Disabled
31+
'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
32+
// Unavailable
33+
'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
34+
props.class,
35+
)"
36+
v-bind="forwardedProps"
37+
>
38+
<slot />
39+
</RangeCalendarCellTrigger>
40+
</template>

Diff for: ‎@/components/ui/range-calendar/RangeCalendarGrid.vue

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script lang="ts" setup>
2+
import { cn } from '@/lib/utils'
3+
import { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue'
4+
import { computed, type HTMLAttributes } from 'vue'
5+
6+
const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()
7+
8+
const delegatedProps = computed(() => {
9+
const { class: _, ...delegated } = props
10+
11+
return delegated
12+
})
13+
14+
const forwardedProps = useForwardProps(delegatedProps)
15+
</script>
16+
17+
<template>
18+
<RangeCalendarGrid
19+
:class="cn('w-full border-collapse space-y-1', props.class)"
20+
v-bind="forwardedProps"
21+
>
22+
<slot />
23+
</RangeCalendarGrid>
24+
</template>

Diff for: ‎@/components/ui/range-calendar/RangeCalendarGridBody.vue

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script lang="ts" setup>
2+
import { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'radix-vue'
3+
4+
const props = defineProps<RangeCalendarGridBodyProps>()
5+
</script>
6+
7+
<template>
8+
<RangeCalendarGridBody v-bind="props">
9+
<slot />
10+
</RangeCalendarGridBody>
11+
</template>

Diff for: ‎@/components/ui/range-calendar/RangeCalendarGridHead.vue

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script lang="ts" setup>
2+
import { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'radix-vue'
3+
4+
const props = defineProps<RangeCalendarGridHeadProps>()
5+
</script>
6+
7+
<template>
8+
<RangeCalendarGridHead v-bind="props">
9+
<slot />
10+
</RangeCalendarGridHead>
11+
</template>

Diff for: ‎@/components/ui/range-calendar/RangeCalendarGridRow.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts" setup>
2+
import { cn } from '@/lib/utils'
3+
import { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue'
4+
import { computed, type HTMLAttributes } from 'vue'
5+
6+
const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
7+
8+
const delegatedProps = computed(() => {
9+
const { class: _, ...delegated } = props
10+
11+
return delegated
12+
})
13+
14+
const forwardedProps = useForwardProps(delegatedProps)
15+
</script>
16+
17+
<template>
18+
<RangeCalendarGridRow :class="cn('flex mt-2 w-full', props.class)" v-bind="forwardedProps">
19+
<slot />
20+
</RangeCalendarGridRow>
21+
</template>

Diff for: ‎@/components/ui/range-calendar/RangeCalendarHeadCell.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts" setup>
2+
import { cn } from '@/lib/utils'
3+
import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'
4+
import { computed, type HTMLAttributes } from 'vue'
5+
6+
const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
7+
8+
const delegatedProps = computed(() => {
9+
const { class: _, ...delegated } = props
10+
11+
return delegated
12+
})
13+
14+
const forwardedProps = useForwardProps(delegatedProps)
15+
</script>
16+
17+
<template>
18+
<RangeCalendarHeadCell :class="cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
19+
<slot />
20+
</RangeCalendarHeadCell>
21+
</template>

Diff for: ‎@/components/ui/range-calendar/RangeCalendarHeader.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts" setup>
2+
import { cn } from '@/lib/utils'
3+
import { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue'
4+
import { computed, type HTMLAttributes } from 'vue'
5+
6+
const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
7+
8+
const delegatedProps = computed(() => {
9+
const { class: _, ...delegated } = props
10+
11+
return delegated
12+
})
13+
14+
const forwardedProps = useForwardProps(delegatedProps)
15+
</script>
16+
17+
<template>
18+
<RangeCalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
19+
<slot />
20+
</RangeCalendarHeader>
21+
</template>

Diff for: ‎@/components/ui/range-calendar/RangeCalendarHeading.vue

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts" setup>
2+
import { cn } from '@/lib/utils'
3+
import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'
4+
import { computed, type HTMLAttributes } from 'vue'
5+
6+
const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
7+
8+
const delegatedProps = computed(() => {
9+
const { class: _, ...delegated } = props
10+
11+
return delegated
12+
})
13+
14+
const forwardedProps = useForwardProps(delegatedProps)
15+
</script>
16+
17+
<template>
18+
<RangeCalendarHeading
19+
v-slot="{ headingValue }"
20+
:class="cn('text-sm font-medium', props.class)"
21+
v-bind="forwardedProps"
22+
>
23+
<slot :heading-value>
24+
{{ headingValue }}
25+
</slot>
26+
</RangeCalendarHeading>
27+
</template>

Diff for: ‎@/components/ui/range-calendar/RangeCalendarNextButton.vue

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script lang="ts" setup>
2+
import { buttonVariants } from '@/components/ui/button'
3+
import { cn } from '@/lib/utils'
4+
import { ChevronRight } from 'lucide-vue-next'
5+
import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'radix-vue'
6+
import { computed, type HTMLAttributes } from 'vue'
7+
8+
const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()
9+
10+
const delegatedProps = computed(() => {
11+
const { class: _, ...delegated } = props
12+
13+
return delegated
14+
})
15+
16+
const forwardedProps = useForwardProps(delegatedProps)
17+
</script>
18+
19+
<template>
20+
<RangeCalendarNext
21+
:class="cn(
22+
buttonVariants({ variant: 'outline' }),
23+
'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
24+
props.class,
25+
)"
26+
v-bind="forwardedProps"
27+
>
28+
<slot>
29+
<ChevronRight class="h-4 w-4" />
30+
</slot>
31+
</RangeCalendarNext>
32+
</template>

Diff for: ‎@/components/ui/range-calendar/RangeCalendarPrevButton.vue

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script lang="ts" setup>
2+
import { buttonVariants } from '@/components/ui/button'
3+
import { cn } from '@/lib/utils'
4+
import { ChevronLeft } from 'lucide-vue-next'
5+
import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'radix-vue'
6+
import { computed, type HTMLAttributes } from 'vue'
7+
8+
const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()
9+
10+
const delegatedProps = computed(() => {
11+
const { class: _, ...delegated } = props
12+
13+
return delegated
14+
})
15+
16+
const forwardedProps = useForwardProps(delegatedProps)
17+
</script>
18+
19+
<template>
20+
<RangeCalendarPrev
21+
:class="cn(
22+
buttonVariants({ variant: 'outline' }),
23+
'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
24+
props.class,
25+
)"
26+
v-bind="forwardedProps"
27+
>
28+
<slot>
29+
<ChevronLeft class="h-4 w-4" />
30+
</slot>
31+
</RangeCalendarPrev>
32+
</template>

0 commit comments

Comments
 (0)