ISMAIL MASSERAN
1772 lines
64 KiB
Vue
1772 lines
64 KiB
Vue
<script lang="ts" setup>
|
|
import {
|
|
DatePickerRoot,
|
|
DatePickerLabel,
|
|
DatePickerControl,
|
|
DatePickerInput,
|
|
DatePickerTrigger,
|
|
DatePickerClearTrigger,
|
|
DatePickerPositioner,
|
|
DatePickerContent,
|
|
DatePickerYearSelect,
|
|
DatePickerMonthSelect,
|
|
DatePickerView,
|
|
DatePickerContext,
|
|
DatePickerViewControl,
|
|
DatePickerPresetTrigger,
|
|
DatePickerPrevTrigger,
|
|
DatePickerViewTrigger,
|
|
DatePickerNextTrigger,
|
|
DatePickerRangeText,
|
|
DatePickerTable,
|
|
DatePickerTableHead,
|
|
DatePickerTableRow,
|
|
DatePickerTableHeader,
|
|
DatePickerTableBody,
|
|
DatePickerTableCell,
|
|
DatePickerTableCellTrigger,
|
|
} from "@/components/ui/datepicker";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Box } from "@/components/ui/box";
|
|
import {
|
|
Preview,
|
|
SectionTitle,
|
|
SectionContent,
|
|
InstallPackage,
|
|
PreviewCode,
|
|
} from "@/components/docs";
|
|
</script>
|
|
|
|
<template>
|
|
<div id="preview" class="-mt-20">
|
|
<Preview>
|
|
<template #preview>
|
|
<DatePickerRoot class="w-84">
|
|
<DatePickerLabel>Basic</DatePickerLabel>
|
|
<DatePickerControl>
|
|
<DatePickerInput />
|
|
<DatePickerTrigger />
|
|
<DatePickerClearTrigger>Clear</DatePickerClearTrigger>
|
|
</DatePickerControl>
|
|
<Teleport to="body">
|
|
<DatePickerPositioner>
|
|
<DatePickerContent>
|
|
<DatePickerYearSelect />
|
|
<DatePickerMonthSelect />
|
|
<DatePickerView view="day">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableHead>
|
|
<DatePickerTableRow>
|
|
<DatePickerTableHeader v-for="(weekDay, id) in datePicker?.weekDays" :key="id">
|
|
{{ weekDay.short }}
|
|
</DatePickerTableHeader>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableHead>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(week, id) in datePicker?.weeks" :key="id">
|
|
<DatePickerTableCell v-for="(day, id) in week" :key="id" :value="day">
|
|
<DatePickerTableCellTrigger>
|
|
{{ day.day }}
|
|
</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
<DatePickerView view="month">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(months, id) in datePicker?.getMonthsGrid({
|
|
columns: 4,
|
|
format: 'short',
|
|
})" :key="id">
|
|
<DatePickerTableCell v-for="(month, id) in months" :key="id" :value="month.value">
|
|
<DatePickerTableCellTrigger>{{
|
|
month.label
|
|
}}</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
<DatePickerView view="year">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(years, id) in datePicker?.getYearsGrid({
|
|
columns: 4,
|
|
})" :key="id">
|
|
<DatePickerTableCell v-for="(year, id) in years" :key="id" :value="year.value">
|
|
<DatePickerTableCellTrigger>{{
|
|
year.label
|
|
}}</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
</DatePickerContent>
|
|
</DatePickerPositioner>
|
|
</Teleport>
|
|
</DatePickerRoot>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<DatePickerRoot class="w-84">
|
|
<DatePickerLabel>Basic</DatePickerLabel>
|
|
<DatePickerControl>
|
|
<DatePickerInput />
|
|
<DatePickerTrigger />
|
|
<DatePickerClearTrigger>Clear</DatePickerClearTrigger>
|
|
</DatePickerControl>
|
|
<Teleport to="body">
|
|
<DatePickerPositioner>
|
|
<DatePickerContent>
|
|
<DatePickerYearSelect />
|
|
<DatePickerMonthSelect />
|
|
<DatePickerView view="day">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableHead>
|
|
<DatePickerTableRow>
|
|
<DatePickerTableHeader v-for="(weekDay, id) in datePicker?.weekDays" :key="id">
|
|
\{\{ weekDay.short \}\}
|
|
</DatePickerTableHeader>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableHead>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(week, id) in datePicker?.weeks" :key="id">
|
|
<DatePickerTableCell v-for="(day, id) in week" :key="id" :value="day">
|
|
<DatePickerTableCellTrigger>
|
|
\{\{ day.day \}\}
|
|
</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
<DatePickerView view="month">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(months, id) in datePicker?.getMonthsGrid({
|
|
columns: 4,
|
|
format: 'short',
|
|
})" :key="id">
|
|
<DatePickerTableCell v-for="(month, id) in months" :key="id" :value="month.value">
|
|
<DatePickerTableCellTrigger>\{\{
|
|
month.label
|
|
\}\}</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
<DatePickerView view="year">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(years, id) in datePicker?.getYearsGrid({
|
|
columns: 4,
|
|
})" :key="id">
|
|
<DatePickerTableCell v-for="(year, id) in years" :key="id" :value="year.value">
|
|
<DatePickerTableCellTrigger>\{\{
|
|
year.label
|
|
\}\}</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
</DatePickerContent>
|
|
</DatePickerPositioner>
|
|
</Teleport>
|
|
</DatePickerRoot>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
</div>
|
|
<div id="installation">
|
|
<SectionTitle>Installation</SectionTitle>
|
|
<SectionContent>Install the following dependencies:</SectionContent>
|
|
<InstallPackage>add @zag-js/vue @zag-js/datepicker</InstallPackage>
|
|
<SectionContent>
|
|
Copy and paste the following code into your project.
|
|
</SectionContent>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerRoot.vue">
|
|
{{`
|
|
<script lang="ts" setup>
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerRoot } from "@mykopkb/core/styles/datepicker.styles";
|
|
import { provide, computed } from "vue";
|
|
import * as datepicker from "@zag-js/date-picker";
|
|
import type { Props } from "@zag-js/date-picker";
|
|
import { useMachine, normalizeProps } from "@zag-js/vue";
|
|
import { Slot } from "@/components/ui/slot";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
open = undefined,
|
|
...props
|
|
} = defineProps<
|
|
Partial<Props> & {
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}
|
|
>();
|
|
|
|
const service = useMachine(datepicker.machine, {
|
|
...props,
|
|
open,
|
|
id: crypto.randomUUID(),
|
|
});
|
|
|
|
const api = computed(() => datepicker.connect(service, normalizeProps));
|
|
|
|
provide("datepickerApi", api);
|
|
</script>
|
|
|
|
<template>
|
|
<Slot :class="cn(datePickerRoot, className)" v-bind="{ ...props, ...$attrs, ...api.getRootProps() }">
|
|
<slot v-if="asChild" />
|
|
<div v-else>
|
|
<slot />
|
|
</div>
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerLabel.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerLabel } from "@mykopkb/core/styles/datepicker.styles";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Slot } from "@/components/ui/slot";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot v-bind="{ ...props, ...$attrs, ...api?.getLabelProps() }">
|
|
<slot v-if="asChild" />
|
|
<Label v-else :class="cn(datePickerLabel, className)">
|
|
<slot />
|
|
</Label>
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerControl.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerControl } from "@mykopkb/core/styles/datepicker.styles";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot :class="cn(datePickerControl, className)" v-bind="{ ...props, ...$attrs, ...api?.getControlProps() }">
|
|
<slot v-if="asChild" />
|
|
<div v-else>
|
|
<slot />
|
|
</div>
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerInput.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerInput } from "@mykopkb/core/styles/datepicker.styles";
|
|
import { Input } from "@/components/ui/input";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot v-bind="{ ...props, ...$attrs, ...api?.getInputProps() }">
|
|
<slot v-if="asChild" />
|
|
<Input v-else :class="cn(datePickerInput, className)" />
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerTrigger.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerTrigger } from "@mykopkb/core/styles/datepicker.styles";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Calendar } from "@lucide/vue";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot v-bind="{ ...props, ...$attrs, ...api?.getTriggerProps() }">
|
|
<Button variant="ghost" v-if="!asChild" :class="cn(datePickerTrigger, className)">
|
|
<Calendar v-if="!$slots.default" />
|
|
<slot v-else />
|
|
</Button>
|
|
<slot v-else />
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerClearTrigger.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerClearTrigger } from "@mykopkb/core/styles/datepicker.styles";
|
|
import { Button } from "@/components/ui/button";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
import { X } from "@lucide/vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot v-bind="{ ...props, ...$attrs, ...api?.getClearTriggerProps() }">
|
|
<Button variant="ghost" v-if="!asChild" :class="cn(datePickerClearTrigger, className)">
|
|
<X v-if="!$slots.default" />
|
|
<slot v-else />
|
|
</Button>
|
|
<slot v-else />
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerPositioner.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerPositioner } from "@mykopkb/core/styles/datepicker.styles";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<Slot :class="cn(datePickerPositioner, className)"
|
|
v-bind="{ ...props, ...$attrs, ...api?.getPositionerProps() }">
|
|
<slot v-if="asChild" />
|
|
<div v-else>
|
|
<slot />
|
|
</div>
|
|
</Slot>
|
|
</Teleport>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerContent.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerContent } from "@mykopkb/core/styles/datepicker.styles";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { Box } from "@/components/ui/box";
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot v-bind="{ ...props, ...$attrs, ...api?.getContentProps() }">
|
|
<slot v-if="asChild" />
|
|
<Box v-else raised="single" :class="cn(datePickerContent, className)">
|
|
<div>
|
|
<slot />
|
|
</div>
|
|
</Box>
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerYearSelect.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
|
|
import { datePickerYearSelect } from "@mykopkb/core/styles/datepicker.styles";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<NativeSelect :class="cn(datePickerYearSelect, className)"
|
|
v-bind="{ ...props, ...$attrs, ...api?.getYearSelectProps() }">
|
|
<NativeSelectOption v-for="(year, i) in api?.getYears()" :key="i" :value="year.value">
|
|
\{\{ year.label \}\}
|
|
</NativeSelectOption>
|
|
</NativeSelect>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerMonthSelect.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerMonthSelect } from "@mykopkb/core/styles/datepicker.styles";
|
|
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<NativeSelect :class="cn(datePickerMonthSelect, className)"
|
|
v-bind="{ ...props, ...$attrs, ...api?.getMonthSelectProps() }">
|
|
<NativeSelectOption v-for="(month, i) in api?.getMonths()" :key="i" :value="month.value">
|
|
\{\{ month.label \}\}
|
|
</NativeSelectOption>
|
|
</NativeSelect>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerView.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerView } from "@mykopkb/core/styles/datepicker.styles";
|
|
import type { Api, ViewProps } from "@zag-js/date-picker";
|
|
import { provide, inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<
|
|
ViewProps & {
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}
|
|
>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
|
|
provide("datepickerView", props);
|
|
</script>
|
|
|
|
<template>
|
|
<Slot :class="cn(datePickerView, className)" v-bind="{ ...props, ...$attrs, ...api?.getViewProps(props) }">
|
|
<slot v-if="asChild" />
|
|
<div v-else>
|
|
<slot />
|
|
</div>
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerViewControl.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerViewControl } from "@mykopkb/core/styles/datepicker.styles";
|
|
import type { Api, ViewProps } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<
|
|
ViewProps & {
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}
|
|
>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot :class="cn(datePickerViewControl, className)"
|
|
v-bind="{ ...props, ...$attrs, ...api?.getViewControlProps(props) }">
|
|
<slot v-if="asChild" />
|
|
<div v-else>
|
|
<slot />
|
|
</div>
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerPresetTrigger.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerPresetTrigger } from "@mykopkb/core/styles/datepicker.styles";
|
|
import { Button } from "@/components/ui/button";
|
|
import type { Api, PresetTriggerProps } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
import { Slot } from "@/components/ui/slot";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<
|
|
PresetTriggerProps & {
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}
|
|
>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot v-bind="{ ...props, ...$attrs, ...api?.getPresetTriggerProps(props) }">
|
|
<Button variant="ghost" v-if="!asChild" :class="cn(datePickerPresetTrigger, className)">
|
|
<slot />
|
|
</Button>
|
|
<slot v-else />
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerPrevTrigger.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerPrevTrigger } from "@mykopkb/core/styles/datepicker.styles";
|
|
import { MoveLeft } from "@lucide/vue";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot v-bind="{ ...props, ...$attrs, ...api?.getPrevTriggerProps() }">
|
|
<button v-if="!asChild" :class="cn(datePickerPrevTrigger, className)">
|
|
<MoveLeft v-if="!$slots.default" />
|
|
<slot v-else />
|
|
</button>
|
|
<slot v-else />
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerViewTrigger.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerViewTrigger } from "@mykopkb/core/styles/datepicker.styles";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot :class="cn(datePickerViewTrigger, className)"
|
|
v-bind="{ ...props, ...$attrs, ...api?.getViewTriggerProps(props) }">
|
|
<button v-if="!asChild" :class="cn(datePickerViewTrigger, className)">
|
|
<slot />
|
|
</button>
|
|
<slot v-else />
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerNextTrigger.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerNextTrigger } from "@mykopkb/core/styles/datepicker.styles";
|
|
import { MoveRight } from "@lucide/vue";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot v-bind="{ ...props, ...$attrs, ...api?.getNextTriggerProps() }">
|
|
<button v-if="!asChild" :class="cn(datePickerNextTrigger, className)">
|
|
<MoveRight v-if="!$slots.default" />
|
|
<slot v-else />
|
|
</button>
|
|
<slot v-else />
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerRangeText.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerRangeText } from "@mykopkb/core/styles/datepicker.styles";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const { class: className, ...props } = defineProps<{
|
|
class?: string;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="cn(datePickerRangeText, className)" v-bind="{ ...props, ...$attrs, ...api?.getRangeTextProps() }">
|
|
\{\{ api?.visibleRangeText.start \}\}
|
|
</div>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerTable.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerTable } from "@mykopkb/core/styles/datepicker.styles";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot :class="cn(datePickerTable, className)" v-bind="{ ...props, ...$attrs, ...api?.getTableProps() }">
|
|
<slot v-if="asChild" />
|
|
<table v-else>
|
|
<slot />
|
|
</table>
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerTableHead.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerTableHead } from "@mykopkb/core/styles/datepicker.styles";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot :class="cn(datePickerTableHead, className)" v-bind="{ ...props, ...$attrs, ...api?.getTableHeadProps() }">
|
|
<slot v-if="asChild" />
|
|
<thead v-else>
|
|
<slot />
|
|
</thead>
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerTableRow.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerTableRow } from "@mykopkb/core/styles/datepicker.styles";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot :class="cn(datePickerTableRow, className)" v-bind="{ ...props, ...$attrs, ...api?.getTableRowProps() }">
|
|
<slot v-if="asChild" />
|
|
<tr v-else>
|
|
<slot />
|
|
</tr>
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerTableHeader.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerTableHeader } from "@mykopkb/core/styles/datepicker.styles";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot :class="cn(datePickerTableHeader, className)"
|
|
v-bind="{ ...props, ...$attrs, ...api?.getTableHeaderProps() }">
|
|
<slot v-if="asChild" />
|
|
<th v-else>
|
|
<slot />
|
|
</th>
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerTableBody.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerTableBody } from "@mykopkb/core/styles/datepicker.styles";
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<Slot :class="cn(datePickerTableBody, className)" v-bind="{ ...props, ...$attrs, ...api?.getTableHeadProps() }">
|
|
<slot v-if="asChild" />
|
|
<tbody v-else>
|
|
<slot />
|
|
</tbody>
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerTableCell.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerTableCell } from "@mykopkb/core/styles/datepicker.styles";
|
|
import type {
|
|
Api,
|
|
ViewProps,
|
|
DayTableCellProps,
|
|
TableCellProps,
|
|
} from "@zag-js/date-picker";
|
|
import { provide, inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<
|
|
(DayTableCellProps | TableCellProps) & {
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}
|
|
>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
const viewContext = inject<ViewProps>("datepickerView");
|
|
|
|
provide("datepickerCell", props);
|
|
</script>
|
|
|
|
<template>
|
|
<Slot :class="cn(datePickerTableCell, className)" v-bind="{ ...props, ...$attrs, ...(viewContext?.view === 'day'
|
|
? api?.getDayTableCellProps(props as DayTableCellProps)
|
|
: viewContext?.view === 'month'
|
|
? api?.getMonthTableCellProps(props as TableCellProps)
|
|
: viewContext?.view === 'year'
|
|
? api?.getYearTableCellProps(props as TableCellProps)
|
|
: undefined) }">
|
|
<slot v-if="asChild" />
|
|
<td v-else>
|
|
<slot />
|
|
</td>
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerTableCellTrigger.vue">
|
|
{{ `
|
|
<script lang="ts" setup>
|
|
import { Slot } from "@/components/ui/slot";
|
|
import { cn } from "@mykopkb/core/utils/cn";
|
|
import { datePickerTableCellTrigger } from "@mykopkb/core/styles/datepicker.styles";
|
|
import type {
|
|
Api,
|
|
ViewProps,
|
|
DayTableCellProps,
|
|
TableCellProps,
|
|
} from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const {
|
|
class: className,
|
|
asChild = false,
|
|
...props
|
|
} = defineProps<{
|
|
class?: string;
|
|
asChild?: boolean;
|
|
}>();
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
const viewContext = inject<ViewProps>("datepickerView");
|
|
const cellContext = inject<DayTableCellProps | TableCellProps>(
|
|
"datepickerCell"
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<Slot :class="cn(datePickerTableCellTrigger, className)" v-bind="{ ...props, ...$attrs, ...(viewContext?.view === 'day'
|
|
? api?.getDayTableCellTriggerProps(cellContext as DayTableCellProps)
|
|
: viewContext?.view === 'month'
|
|
? api?.getMonthTableCellTriggerProps(cellContext as TableCellProps)
|
|
: viewContext?.view === 'year'
|
|
? api?.getYearTableCellTriggerProps(cellContext as TableCellProps)
|
|
: undefined) }">
|
|
<slot v-if="asChild" />
|
|
<div v-else>
|
|
<slot />
|
|
</div>
|
|
</Slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/DatePickerContext.vue">
|
|
{{ `
|
|
<script setup lang="ts">
|
|
import type { Api } from "@zag-js/date-picker";
|
|
import { inject } from "vue";
|
|
|
|
const api = inject<Api>("datepickerApi");
|
|
</script>
|
|
|
|
<template>
|
|
<slot :datePicker="api"></slot>
|
|
</template>
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode title="components/ui/datepicker/index.ts">
|
|
{{ `
|
|
export { default as DatePickerRoot } from "./DatePickerRoot.vue";
|
|
export { default as DatePickerLabel } from "./DatePickerLabel.vue";
|
|
export { default as DatePickerControl } from "./DatePickerControl.vue";
|
|
export { default as DatePickerInput } from "./DatePickerInput.vue";
|
|
export { default as DatePickerTrigger } from "./DatePickerTrigger.vue";
|
|
export { default as DatePickerClearTrigger } from "./DatePickerClearTrigger.vue";
|
|
export { default as DatePickerPositioner } from "./DatePickerPositioner.vue";
|
|
export { default as DatePickerContent } from "./DatePickerContent.vue";
|
|
export { default as DatePickerYearSelect } from "./DatePickerYearSelect.vue";
|
|
export { default as DatePickerMonthSelect } from "./DatePickerMonthSelect.vue";
|
|
export { default as DatePickerView } from "./DatePickerView.vue";
|
|
export { default as DatePickerViewControl } from "./DatePickerViewControl.vue";
|
|
export { default as DatePickerPresetTrigger } from "./DatePickerPresetTrigger.vue";
|
|
export { default as DatePickerPrevTrigger } from "./DatePickerPrevTrigger.vue";
|
|
export { default as DatePickerViewTrigger } from "./DatePickerViewTrigger.vue";
|
|
export { default as DatePickerNextTrigger } from "./DatePickerNextTrigger.vue";
|
|
export { default as DatePickerRangeText } from "./DatePickerRangeText.vue";
|
|
export { default as DatePickerTable } from "./DatePickerTable.vue";
|
|
export { default as DatePickerTableHead } from "./DatePickerTableHead.vue";
|
|
export { default as DatePickerTableRow } from "./DatePickerTableRow.vue";
|
|
export { default as DatePickerTableHeader } from "./DatePickerTableHeader.vue";
|
|
export { default as DatePickerTableBody } from "./DatePickerTableBody.vue";
|
|
export { default as DatePickerTableCell } from "./DatePickerTableCell.vue";
|
|
export { default as DatePickerTableCellTrigger } from "./DatePickerTableCellTrigger.vue";
|
|
export { default as DatePickerContext } from "./DatePickerContext.vue";
|
|
` }}
|
|
</PreviewCode>
|
|
<SectionContent>
|
|
Update the import paths to match your project setup.
|
|
</SectionContent>
|
|
</div>
|
|
<div id="usage">
|
|
<SectionTitle>Usage</SectionTitle>
|
|
<PreviewCode>
|
|
{{ `
|
|
import {
|
|
DatePickerRoot,
|
|
DatePickerLabel,
|
|
DatePickerControl,
|
|
DatePickerInput,
|
|
DatePickerTrigger,
|
|
DatePickerClearTrigger,
|
|
DatePickerPositioner,
|
|
DatePickerContent,
|
|
DatePickerYearSelect,
|
|
DatePickerMonthSelect,
|
|
DatePickerView,
|
|
DatePickerContext,
|
|
DatePickerViewControl,
|
|
DatePickerPresetTrigger,
|
|
DatePickerPrevTrigger,
|
|
DatePickerViewTrigger,
|
|
DatePickerNextTrigger,
|
|
DatePickerRangeText,
|
|
DatePickerTable,
|
|
DatePickerTableHead,
|
|
DatePickerTableRow,
|
|
DatePickerTableHeader,
|
|
DatePickerTableBody,
|
|
DatePickerTableCell,
|
|
DatePickerTableCellTrigger,
|
|
} from "@/components/ui/datepicker";
|
|
` }}
|
|
</PreviewCode>
|
|
<PreviewCode>
|
|
{{ `
|
|
<DatePickerRoot class="w-84">
|
|
<DatePickerLabel>Basic</DatePickerLabel>
|
|
<DatePickerControl>
|
|
<DatePickerInput />
|
|
<DatePickerTrigger />
|
|
<DatePickerClearTrigger>Clear</DatePickerClearTrigger>
|
|
</DatePickerControl>
|
|
<Teleport to="body">
|
|
<DatePickerPositioner>
|
|
<DatePickerContent>
|
|
<DatePickerYearSelect />
|
|
<DatePickerMonthSelect />
|
|
<DatePickerView view="day">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableHead>
|
|
<DatePickerTableRow>
|
|
<DatePickerTableHeader v-for="(weekDay, id) in datePicker?.weekDays" :key="id">
|
|
\{\{ weekDay.short \}\}
|
|
</DatePickerTableHeader>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableHead>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(week, id) in datePicker?.weeks" :key="id">
|
|
<DatePickerTableCell v-for="(day, id) in week" :key="id" :value="day">
|
|
<DatePickerTableCellTrigger>
|
|
\{\{ day.day \}\}
|
|
</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
<DatePickerView view="month">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(months, id) in datePicker?.getMonthsGrid({
|
|
columns: 4,
|
|
format: 'short',
|
|
})" :key="id">
|
|
<DatePickerTableCell v-for="(month, id) in months" :key="id" :value="month.value">
|
|
<DatePickerTableCellTrigger>\{\{
|
|
month.label
|
|
\}\}</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
<DatePickerView view="year">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(years, id) in datePicker?.getYearsGrid({
|
|
columns: 4,
|
|
})" :key="id">
|
|
<DatePickerTableCell v-for="(year, id) in years" :key="id" :value="year.value">
|
|
<DatePickerTableCellTrigger>\{\{
|
|
year.label
|
|
\}\}</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
</DatePickerContent>
|
|
</DatePickerPositioner>
|
|
</Teleport>
|
|
</DatePickerRoot>
|
|
` }}
|
|
</PreviewCode>
|
|
</div>
|
|
<div id="variants">
|
|
<SectionTitle>Variants</SectionTitle>
|
|
<SectionContent>A collection of components you can use.</SectionContent>
|
|
<Preview>
|
|
<template #preview>
|
|
<DatePickerRoot selection-mode="range" class="w-140">
|
|
<DatePickerLabel>Range Selection</DatePickerLabel>
|
|
<DatePickerControl>
|
|
<DatePickerInput :index="0" />
|
|
<DatePickerInput :index="1" />
|
|
<DatePickerTrigger />
|
|
<DatePickerClearTrigger>Clear</DatePickerClearTrigger>
|
|
</DatePickerControl>
|
|
<div class="flex gap-1">
|
|
<DatePickerPresetTrigger value="thisWeek" as-child>
|
|
<Badge>This Week</Badge>
|
|
</DatePickerPresetTrigger>
|
|
<DatePickerPresetTrigger value="lastWeek" as-child>
|
|
<Badge>Last Week</Badge>
|
|
</DatePickerPresetTrigger>
|
|
<DatePickerPresetTrigger value="thisMonth" as-child>
|
|
<Badge>This Month</Badge>
|
|
</DatePickerPresetTrigger>
|
|
</div>
|
|
<DatePickerPositioner>
|
|
<DatePickerContent>
|
|
<DatePickerYearSelect />
|
|
<DatePickerMonthSelect />
|
|
<DatePickerView view="day">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableHead>
|
|
<DatePickerTableRow>
|
|
<DatePickerTableHeader v-for="(weekDay, id) in datePicker?.weekDays" :key="id">
|
|
{{ weekDay.short }}
|
|
</DatePickerTableHeader>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableHead>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(week, id) in datePicker?.weeks" :key="id">
|
|
<DatePickerTableCell v-for="(day, id) in week" :key="id" :value="day">
|
|
<DatePickerTableCellTrigger>
|
|
{{ day.day }}
|
|
</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
<DatePickerView view="month">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(months, id) in datePicker?.getMonthsGrid({
|
|
columns: 4,
|
|
format: 'short',
|
|
})" :key="id">
|
|
<DatePickerTableCell v-for="(month, id) in months" :key="id" :value="month.value">
|
|
<DatePickerTableCellTrigger>{{
|
|
month.label
|
|
}}</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
<DatePickerView view="year">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(years, id) in datePicker?.getYearsGrid({
|
|
columns: 4,
|
|
})" :key="id">
|
|
<DatePickerTableCell v-for="(year, id) in years" :key="id" :value="year.value">
|
|
<DatePickerTableCellTrigger>{{
|
|
year.label
|
|
}}</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
</DatePickerContent>
|
|
</DatePickerPositioner>
|
|
</DatePickerRoot>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<DatePickerRoot selection-mode="range" class="w-140">
|
|
<DatePickerLabel>Range Selection</DatePickerLabel>
|
|
<DatePickerControl>
|
|
<DatePickerInput :index="0" />
|
|
<DatePickerInput :index="1" />
|
|
<DatePickerTrigger />
|
|
<DatePickerClearTrigger>Clear</DatePickerClearTrigger>
|
|
</DatePickerControl>
|
|
<div class="flex gap-1">
|
|
<DatePickerPresetTrigger value="thisWeek" as-child>
|
|
<Badge>This Week</Badge>
|
|
</DatePickerPresetTrigger>
|
|
<DatePickerPresetTrigger value="lastWeek" as-child>
|
|
<Badge>Last Week</Badge>
|
|
</DatePickerPresetTrigger>
|
|
<DatePickerPresetTrigger value="thisMonth" as-child>
|
|
<Badge>This Month</Badge>
|
|
</DatePickerPresetTrigger>
|
|
</div>
|
|
<DatePickerPositioner>
|
|
<DatePickerContent>
|
|
<DatePickerYearSelect />
|
|
<DatePickerMonthSelect />
|
|
<DatePickerView view="day">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableHead>
|
|
<DatePickerTableRow>
|
|
<DatePickerTableHeader v-for="(weekDay, id) in datePicker?.weekDays" :key="id">
|
|
\{\{ weekDay.short \}\}
|
|
</DatePickerTableHeader>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableHead>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(week, id) in datePicker?.weeks" :key="id">
|
|
<DatePickerTableCell v-for="(day, id) in week" :key="id" :value="day">
|
|
<DatePickerTableCellTrigger>
|
|
\{\{ day.day \}\}
|
|
</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
<DatePickerView view="month">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(months, id) in datePicker?.getMonthsGrid({
|
|
columns: 4,
|
|
format: 'short',
|
|
})" :key="id">
|
|
<DatePickerTableCell v-for="(month, id) in months" :key="id" :value="month.value">
|
|
<DatePickerTableCellTrigger>\{\{
|
|
month.label
|
|
\}\}</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
<DatePickerView view="year">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(years, id) in datePicker?.getYearsGrid({
|
|
columns: 4,
|
|
})" :key="id">
|
|
<DatePickerTableCell v-for="(year, id) in years" :key="id" :value="year.value">
|
|
<DatePickerTableCellTrigger>\{\{
|
|
year.label
|
|
\}\}</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
</DatePickerContent>
|
|
</DatePickerPositioner>
|
|
</DatePickerRoot>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
<Preview>
|
|
<template #preview>
|
|
<DatePickerRoot :num-of-months="2" class="w-84">
|
|
<DatePickerLabel>Multiple Months</DatePickerLabel>
|
|
<DatePickerControl>
|
|
<DatePickerInput :index="0" />
|
|
<DatePickerTrigger />
|
|
<DatePickerClearTrigger>Clear</DatePickerClearTrigger>
|
|
</DatePickerControl>
|
|
<DatePickerPositioner>
|
|
<DatePickerContent>
|
|
<DatePickerYearSelect />
|
|
<DatePickerMonthSelect />
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerRangeText />
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerView view="day" class="flex-row">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerTable>
|
|
<DatePickerTableHead>
|
|
<DatePickerTableRow>
|
|
<DatePickerTableHeader v-for="(weekDay, id) in datePicker?.weekDays" :key="id">
|
|
{{ weekDay.short }}
|
|
</DatePickerTableHeader>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableHead>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(week, id) in datePicker?.weeks" :key="id">
|
|
<DatePickerTableCell v-for="(day, id) in week" :key="id" :value="day">
|
|
<DatePickerTableCellTrigger>
|
|
{{ day.day }}
|
|
</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerTable>
|
|
<DatePickerTableHead>
|
|
<DatePickerTableRow>
|
|
<DatePickerTableHeader v-for="(weekDay, id) in datePicker?.weekDays" :key="id">
|
|
{{ weekDay.short }}
|
|
</DatePickerTableHeader>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableHead>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(week, id) in datePicker?.getOffset({
|
|
months: 1,
|
|
}).weeks" :key="id">
|
|
<DatePickerTableCell v-for="(day, id) in week" :key="id" :value="day" :visible-range="datePicker?.getOffset({ months: 1 }).visibleRange
|
|
">
|
|
<DatePickerTableCellTrigger>
|
|
{{ day.day }}
|
|
</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
</DatePickerContent>
|
|
</DatePickerPositioner>
|
|
</DatePickerRoot>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<DatePickerRoot :num-of-months="2" class="w-84">
|
|
<DatePickerLabel>Multiple Months</DatePickerLabel>
|
|
<DatePickerControl>
|
|
<DatePickerInput :index="0" />
|
|
<DatePickerTrigger />
|
|
<DatePickerClearTrigger>Clear</DatePickerClearTrigger>
|
|
</DatePickerControl>
|
|
<DatePickerPositioner>
|
|
<DatePickerContent>
|
|
<DatePickerYearSelect />
|
|
<DatePickerMonthSelect />
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerRangeText />
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerView view="day" class="flex-row">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerTable>
|
|
<DatePickerTableHead>
|
|
<DatePickerTableRow>
|
|
<DatePickerTableHeader v-for="(weekDay, id) in datePicker?.weekDays" :key="id">
|
|
\{\{ weekDay.short \}\}
|
|
</DatePickerTableHeader>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableHead>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(week, id) in datePicker?.weeks" :key="id">
|
|
<DatePickerTableCell v-for="(day, id) in week" :key="id" :value="day">
|
|
<DatePickerTableCellTrigger>
|
|
\{\{ day.day \}\}
|
|
</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerTable>
|
|
<DatePickerTableHead>
|
|
<DatePickerTableRow>
|
|
<DatePickerTableHeader v-for="(weekDay, id) in datePicker?.weekDays" :key="id">
|
|
\{\{ weekDay.short \}\}
|
|
</DatePickerTableHeader>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableHead>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(week, id) in datePicker?.getOffset({
|
|
months: 1,
|
|
}).weeks" :key="id">
|
|
<DatePickerTableCell v-for="(day, id) in week" :key="id" :value="day" :visible-range="
|
|
datePicker?.getOffset({ months: 1 }).visibleRange
|
|
">
|
|
<DatePickerTableCellTrigger>
|
|
\{\{ day.day \}\}
|
|
</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
</DatePickerContent>
|
|
</DatePickerPositioner>
|
|
</DatePickerRoot>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
<Preview>
|
|
<template #preview>
|
|
<DatePickerRoot open>
|
|
<DatePickerInput class="w-84 mx-auto" />
|
|
<Box raised="single" class="mx-auto">
|
|
<DatePickerView view="day">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableHead>
|
|
<DatePickerTableRow>
|
|
<DatePickerTableHeader v-for="(weekDay, id) in datePicker?.weekDays" :key="id">
|
|
{{ weekDay.short }}
|
|
</DatePickerTableHeader>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableHead>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(week, id) in datePicker?.weeks" :key="id">
|
|
<DatePickerTableCell v-for="(day, id) in week" :key="id" :value="day">
|
|
<DatePickerTableCellTrigger>
|
|
{{ day.day }}
|
|
</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
<DatePickerView view="month">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(months, id) in datePicker?.getMonthsGrid({
|
|
columns: 4,
|
|
format: 'short',
|
|
})" :key="id">
|
|
<DatePickerTableCell v-for="(month, id) in months" :key="id" :value="month.value">
|
|
<DatePickerTableCellTrigger>{{
|
|
month.label
|
|
}}</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
<DatePickerView view="year">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(years, id) in datePicker?.getYearsGrid({
|
|
columns: 4,
|
|
})" :key="id">
|
|
<DatePickerTableCell v-for="(year, id) in years" :key="id" :value="year.value">
|
|
<DatePickerTableCellTrigger>{{
|
|
year.label
|
|
}}</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
</Box>
|
|
</DatePickerRoot>
|
|
</template>
|
|
<template #code>
|
|
<PreviewCode>
|
|
{{ `
|
|
<DatePickerRoot open>
|
|
<DatePickerInput class="w-84 mx-auto" />
|
|
<Box raised="single" class="mx-auto">
|
|
<DatePickerView view="day">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableHead>
|
|
<DatePickerTableRow>
|
|
<DatePickerTableHeader v-for="(weekDay, id) in datePicker?.weekDays" :key="id">
|
|
\{\{ weekDay.short \}\}
|
|
</DatePickerTableHeader>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableHead>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(week, id) in datePicker?.weeks" :key="id">
|
|
<DatePickerTableCell v-for="(day, id) in week" :key="id" :value="day">
|
|
<DatePickerTableCellTrigger>
|
|
\{\{ day.day \}\}
|
|
</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
<DatePickerView view="month">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(months, id) in datePicker?.getMonthsGrid({
|
|
columns: 4,
|
|
format: 'short',
|
|
})" :key="id">
|
|
<DatePickerTableCell v-for="(month, id) in months" :key="id" :value="month.value">
|
|
<DatePickerTableCellTrigger>\{\{
|
|
month.label
|
|
\}\}</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
<DatePickerView view="year">
|
|
<DatePickerContext v-slot="{ datePicker }">
|
|
<DatePickerViewControl>
|
|
<DatePickerPrevTrigger />
|
|
<DatePickerViewTrigger>
|
|
<DatePickerRangeText />
|
|
</DatePickerViewTrigger>
|
|
<DatePickerNextTrigger />
|
|
</DatePickerViewControl>
|
|
<DatePickerTable>
|
|
<DatePickerTableBody>
|
|
<DatePickerTableRow v-for="(years, id) in datePicker?.getYearsGrid({
|
|
columns: 4,
|
|
})" :key="id">
|
|
<DatePickerTableCell v-for="(year, id) in years" :key="id" :value="year.value">
|
|
<DatePickerTableCellTrigger>\{\{
|
|
year.label
|
|
\}\}</DatePickerTableCellTrigger>
|
|
</DatePickerTableCell>
|
|
</DatePickerTableRow>
|
|
</DatePickerTableBody>
|
|
</DatePickerTable>
|
|
</DatePickerContext>
|
|
</DatePickerView>
|
|
</Box>
|
|
</DatePickerRoot>
|
|
` }}
|
|
</PreviewCode>
|
|
</template>
|
|
</Preview>
|
|
</div>
|
|
</template>
|