adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-17 20:52:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

move rangecalendar, popover and daterangepicker to ui package

Browse Source
This commit is contained in:
Gregor Vostrak
2025-12-02 17:46:58 +01:00
parent 7a51fca2f9
commit 814d539fb0
27 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
resources/js/packages/ui/src/range-calendar/RangeCalendar.vue Normal file
View File

@@ -0,0 +1,73 @@
<script lang="ts" setup>
import { cn } from '@/lib/utils';
import {
RangeCalendarRoot,
type RangeCalendarRootEmits,
type RangeCalendarRootProps,
useForwardPropsEmits,
} from 'reka-ui';
import { computed, type HTMLAttributes } from 'vue';
import {
RangeCalendarCell,
RangeCalendarCellTrigger,
RangeCalendarGrid,
RangeCalendarGridBody,
RangeCalendarGridHead,
RangeCalendarGridRow,
RangeCalendarHeadCell,
RangeCalendarHeader,
RangeCalendarHeading,
RangeCalendarNextButton,
RangeCalendarPrevButton,
} from '.';
const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>();
const emits = defineEmits<RangeCalendarRootEmits>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
return delegated;
});
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<RangeCalendarRoot
v-slot="{ grid, weekDays }"
:class="cn('p-3', props.class)"
v-bind="forwarded">
<RangeCalendarHeader>
<RangeCalendarPrevButton />
<RangeCalendarHeading />
<RangeCalendarNextButton />
</RangeCalendarHeader>
<div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
<RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
<RangeCalendarGridHead>
<RangeCalendarGridRow>
<RangeCalendarHeadCell v-for="day in weekDays" :key="day">
{{ day }}
</RangeCalendarHeadCell>
</RangeCalendarGridRow>
</RangeCalendarGridHead>
<RangeCalendarGridBody>
<RangeCalendarGridRow
v-for="(weekDates, index) in month.rows"
:key="`weekDate-${index}`"
class="mt-2 w-full">
<RangeCalendarCell
v-for="weekDate in weekDates"
:key="weekDate.toString()"
:date="weekDate">
<RangeCalendarCellTrigger :day="weekDate" :month="month.value" />
</RangeCalendarCell>
</RangeCalendarGridRow>
</RangeCalendarGridBody>
</RangeCalendarGrid>
</div>
</RangeCalendarRoot>
</template>

28
resources/js/packages/ui/src/range-calendar/RangeCalendarCell.vue Normal file
View File

@@ -0,0 +1,28 @@
<script lang="ts" setup>
import { cn } from '@/lib/utils';
import { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'reka-ui';
import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
return delegated;
});
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<RangeCalendarCell
:class="
cn(
'relative 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
)
"
v-bind="forwardedProps">
<slot />
</RangeCalendarCell>
</template>

44
resources/js/packages/ui/src/range-calendar/RangeCalendarCellTrigger.vue Normal file
View File

@@ -0,0 +1,44 @@
<script lang="ts" setup>
import { cn, buttonVariants } from '@/packages/ui/src';
import {
RangeCalendarCellTrigger,
type RangeCalendarCellTriggerProps,
useForwardProps,
} from 'reka-ui';
import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
return delegated;
});
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<RangeCalendarCellTrigger
:class="
cn(
buttonVariants({ variant: 'ghost' }),
'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',
'[&[data-today]:not([data-selected])]:border-accent [&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:text-accent-foreground',
// Selection Start
'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',
// Selection End
'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',
// Outside months
'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
// Disabled
'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
// Unavailable
'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
props.class
)
"
v-bind="forwardedProps">
<slot />
</RangeCalendarCellTrigger>
</template>

23
resources/js/packages/ui/src/range-calendar/RangeCalendarGrid.vue Normal file
View File

@@ -0,0 +1,23 @@
<script lang="ts" setup>
import { cn } from '@/lib/utils';
import { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'reka-ui';
import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
return delegated;
});
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<RangeCalendarGrid
:class="cn('w-full border-collapse space-y-1', props.class)"
v-bind="forwardedProps">
<slot />
</RangeCalendarGrid>
</template>

11
resources/js/packages/ui/src/range-calendar/RangeCalendarGridBody.vue Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts" setup>
import { RangeCalendarGridBody, type RangeCalendarGridBodyProps } from 'reka-ui';
const props = defineProps<RangeCalendarGridBodyProps>();
</script>
<template>
<RangeCalendarGridBody v-bind="props">
<slot />
</RangeCalendarGridBody>
</template>

11
resources/js/packages/ui/src/range-calendar/RangeCalendarGridHead.vue Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts" setup>
import { RangeCalendarGridHead, type RangeCalendarGridHeadProps } from 'reka-ui';
const props = defineProps<RangeCalendarGridHeadProps>();
</script>
<template>
<RangeCalendarGridHead v-bind="props">
<slot />
</RangeCalendarGridHead>
</template>

21
resources/js/packages/ui/src/range-calendar/RangeCalendarGridRow.vue Normal file
View File

@@ -0,0 +1,21 @@
<script lang="ts" setup>
import { cn } from '@/lib/utils';
import { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'reka-ui';
import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
return delegated;
});
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<RangeCalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
<slot />
</RangeCalendarGridRow>
</template>

23
resources/js/packages/ui/src/range-calendar/RangeCalendarHeadCell.vue Normal file
View File

@@ -0,0 +1,23 @@
<script lang="ts" setup>
import { cn } from '@/lib/utils';
import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'reka-ui';
import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
return delegated;
});
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<RangeCalendarHeadCell
:class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)"
v-bind="forwardedProps">
<slot />
</RangeCalendarHeadCell>
</template>

23
resources/js/packages/ui/src/range-calendar/RangeCalendarHeader.vue Normal file
View File

@@ -0,0 +1,23 @@
<script lang="ts" setup>
import { cn } from '@/lib/utils';
import { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'reka-ui';
import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
return delegated;
});
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<RangeCalendarHeader
:class="cn('relative flex w-full items-center justify-between pt-1', props.class)"
v-bind="forwardedProps">
<slot />
</RangeCalendarHeader>
</template>

30
resources/js/packages/ui/src/range-calendar/RangeCalendarHeading.vue Normal file
View File

@@ -0,0 +1,30 @@
<script lang="ts" setup>
import { cn } from '@/lib/utils';
import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'reka-ui';
import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>();
defineSlots<{
default: (props: { headingValue: string }) => unknown;
}>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
return delegated;
});
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<RangeCalendarHeading
v-slot="{ headingValue }"
:class="cn('text-sm font-medium', props.class)"
v-bind="forwardedProps">
<slot :heading-value>
{{ headingValue }}
</slot>
</RangeCalendarHeading>
</template>

32
resources/js/packages/ui/src/range-calendar/RangeCalendarNextButton.vue Normal file
View File

@@ -0,0 +1,32 @@
<script lang="ts" setup>
import { cn, buttonVariants } from '@/packages/ui/src';
import { ChevronRight } from 'lucide-vue-next';
import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui';
import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
return delegated;
});
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<RangeCalendarNext
:class="
cn(
buttonVariants({ variant: 'outline' }),
'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
props.class
)
"
v-bind="forwardedProps">
<slot>
<ChevronRight class="h-4 w-4" />
</slot>
</RangeCalendarNext>
</template>

32
resources/js/packages/ui/src/range-calendar/RangeCalendarPrevButton.vue Normal file
View File

@@ -0,0 +1,32 @@
<script lang="ts" setup>
import { cn, buttonVariants } from '@/packages/ui/src';
import { ChevronLeft } from 'lucide-vue-next';
import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui';
import { computed, type HTMLAttributes } from 'vue';
const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
return delegated;
});
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<RangeCalendarPrev
:class="
cn(
buttonVariants({ variant: 'outline' }),
'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
props.class
)
"
v-bind="forwardedProps">
<slot>
<ChevronLeft class="h-4 w-4" />
</slot>
</RangeCalendarPrev>
</template>

12
resources/js/packages/ui/src/range-calendar/index.ts Normal file
View File

@@ -0,0 +1,12 @@
export { default as RangeCalendar } from './RangeCalendar.vue';
export { default as RangeCalendarCell } from './RangeCalendarCell.vue';
export { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue';
export { default as RangeCalendarGrid } from './RangeCalendarGrid.vue';
export { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue';
export { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue';
export { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue';
export { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue';
export { default as RangeCalendarHeader } from './RangeCalendarHeader.vue';
export { default as RangeCalendarHeading } from './RangeCalendarHeading.vue';
export { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue';
export { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue';