@witchcraft/ui 0.0.1 → 0.1.1

package/dist/runtime/components/LibDatePicker/LibRangeDatePicker.vue

@@ -1,89 +1,82 @@
-<script setup lang="ts">
-import { type DateValue, getLocalTimeZone } from "@internationalized/date"
-import type { DateRange } from "radix-vue"
-import { DateRangePickerArrow, DateRangePickerCalendar, DateRangePickerCell, DateRangePickerCellTrigger, DateRangePickerContent, DateRangePickerField, DateRangePickerGrid, DateRangePickerGridBody, DateRangePickerGridHead, DateRangePickerGridRow, DateRangePickerHeadCell,DateRangePickerHeader, DateRangePickerHeading, DateRangePickerInput, DateRangePickerNext, DateRangePickerPrev, DateRangePickerRoot, DateRangePickerTrigger } from "radix-vue"
-import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue"
-
-import { convertDateWithFallback, getNow,toEmittableDate } from "./helpers.js"
-
-import { useInjectedLocale } from "../../composables/useInjectedLocale.js"
-import type { RangeDate } from "../../types/index.js"
-import { twMerge } from "../../utils/twMerge.js"
-import Icon from "../Icon/Icon.vue"
-const attrs = useAttrs()
-
-const props = withDefaults(defineProps<{
-	useTime?: boolean
-	id: string
-	fallbackDate?: Date
-	timeZone?: string
-	updateInterval?: number
-}>(), {
-	timeZone: getLocalTimeZone(),
-	useTime: false,
-	fallbackDate: _ => getNow({ withTime: _.useTime ?? false }).toDate(_.timeZone ?? getLocalTimeZone()),
-	updateInterval: 10000
-})
-
-const date = defineModel<RangeDate>({ required: true })
-
-
-const tempDate = ref({
-	start: convertDateWithFallback(date.value?.start, props),
-	end: convertDateWithFallback(date.value?.end, props)
-})
+<script setup>
+import { CalendarDate, getLocalTimeZone, ZonedDateTime } from "@internationalized/date";
+import { DateRangePickerArrow, DateRangePickerCalendar, DateRangePickerCell, DateRangePickerCellTrigger, DateRangePickerContent, DateRangePickerField, DateRangePickerGrid, DateRangePickerGridBody, DateRangePickerGridHead, DateRangePickerGridRow, DateRangePickerHeadCell, DateRangePickerHeader, DateRangePickerHeading, DateRangePickerInput, DateRangePickerNext, DateRangePickerPrev, DateRangePickerRoot, DateRangePickerTrigger } from "reka-ui";
+import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue";
+import { convertDateWithFallback, getNow, toEmittableDate } from "./helpers.js";
+import { useInjectedLocale } from "../../composables/useInjectedLocale.js";
+import { twMerge } from "../../utils/twMerge.js";
+import Icon from "../Icon/Icon.vue";
+const attrs = useAttrs();
+const props = defineProps({
+  useTime: { type: Boolean, required: false, default: false },
+  id: { type: String, required: true },
+  fallbackDate: { type: Date, required: false, default: (_) => getNow({ withTime: _.useTime ?? false }).toDate(_.timeZone ?? getLocalTimeZone()) },
+  timeZone: { type: String, required: false, default: getLocalTimeZone() },
+  updateInterval: { type: Number, required: false, default: 1e4 }
+});
+const date = defineModel({ type: Object, ...{ required: true } });
+let justSet = false;
+const tempDate = ref({});
+function updateTempDate(keys = ["start", "end"]) {
+  const newValue = { ...tempDate.value };
+  for (const key of keys) {
+    newValue[key] = convertDateWithFallback(date.value?.[key], props);
+  }
+  tempDate.value = newValue;
+}
+watch([() => date.value.start, () => date.value.end], () => {
+  if (!justSet) {
+    updateTempDate();
+  } else {
+    justSet = false;
+  }
+});
+watch(tempDate, () => {
+  if (!tempDate.value.start || !tempDate.value.end) return;
+  justSet = true;
+  date.value = {
+    start: tempDate.value.start ? toEmittableDate(toRaw(tempDate.value.start)) : void 0,
+    end: tempDate.value.end ? toEmittableDate(toRaw(tempDate.value.end)) : void 0
+  };
+});
 watch(() => props.timeZone, () => {
-	tempDate.value = {
-		start: convertDateWithFallback(date.value?.start, props),
-		end: convertDateWithFallback(date.value?.end, props)
-	}
-})
-
+  updateTempDate();
+});
 const interval = setInterval(() => {
-	if (!date.value.start) {
-		// update suggested date if none is set
-		tempDate.value.start = convertDateWithFallback(date.value.start, props)
-	}
-	if (!date.value.end) {
-		// update suggested date if none is set
-		tempDate.value.end = convertDateWithFallback(date.value.end, props)
-	}
-}, props.updateInterval)
-
+  if (!date.value.start) updateTempDate(["start"]);
+  if (!date.value.end) updateTempDate(["end"]);
+}, props.updateInterval);
 onBeforeUnmount(() => {
-	clearInterval(interval)
-})
-
-const locale = useInjectedLocale().timeLocale
-
-watch(tempDate, () => {
-	date.value = {
-		start: tempDate.value.start ? toEmittableDate(toRaw(tempDate.value.start) as any) : undefined,
-		end: tempDate.value.end ? toEmittableDate(toRaw(tempDate.value.end) as any) : undefined
-	}
-})
+  clearInterval(interval);
+});
+const locale = useInjectedLocale().timeLocale;
 </script>
 
 <template>
 <DateRangePickerRoot
 	:id="id"
 	:locale="locale"
-	class="root"
-	v-model="tempDate as DateRange"
+	class="date-range-picker--root"
+	v-model="tempDate"
 >
 	<DateRangePickerField
 		v-slot="{ segments }"
 		:class="twMerge(`
-			container
+			date-range-picker--field
 			flex items-center justify-between
 			select-none
 			data-[invalid]:border-red-500
 			metadata-input-border
 			rounded-sm
-		`, (attrs as any).class)"
+		`, attrs.class)"
 	>
-		<div class="segments flex items-center flex-1 overflow-scroll scrollbar-hidden whitespace-nowrap">
-			<div :class="twMerge(`start-segment flex items-center`, date.start === undefined && 'text-neutral-400')">
+		<div class="date-range-picker--segments-input flex items-center flex-1 overflow-scroll scrollbar-hidden whitespace-nowrap">
+			<div :class="twMerge(`
+				date-range-picker--start-segment
+				flex
+				items-center
+			`, date.start === void 0 && 'text-neutral-400')"
+			>
 				<template
 					v-for="item in segments.start"
 					:key="item.part"
@@ -92,7 +85,7 @@ watch(tempDate, () => {
 						v-if="item.part === 'literal'"
 						:part="item.part"
 						type="start"
-						class="input-literal"
+						class="date-range-picker--segment-literal"
 					>
 						{{ item.value }}
 					</DateRangePickerInput>
@@ -101,7 +94,7 @@ watch(tempDate, () => {
 						type="start"
 						:part="item.part"
 						class="
-						input
+						date-range-picker--segment-input
 						focus-outline-hidden
 						border
 						border-transparent
@@ -110,6 +103,7 @@ watch(tempDate, () => {
 					>
 						<div
 							class="
+							date-range-picker--segment-value
 							group-focus:z-[2]
 							group-focus:bg-accent-500/50
 							group-focus:rounded-xs
@@ -121,10 +115,15 @@ watch(tempDate, () => {
 					</DateRangePickerInput>
 				</template>
 			</div>
-			<div class="range-separator text-center px-1">
+			<div class="date-range-picker--range-separator text-center px-1">
 				–
 			</div>
-			<div :class="twMerge(`end-segment flex items-center`, date.end === undefined && 'text-neutral-400')">
+			<div :class="twMerge(`
+				date-range-picker--end-segment
+				flex
+				items-center
+			`, date.end === void 0 && 'text-neutral-400')"
+			>
 				<template
 					v-for="item in segments.end"
 					:key="item.part"
@@ -133,7 +132,7 @@ watch(tempDate, () => {
 						v-if="item.part === 'literal'"
 						:part="item.part"
 						type="end"
-						class="input-literal"
+						class="date-range-picker--segment-literal"
 					>
 						{{ item.value }}
 					</DateRangePickerInput>
@@ -142,7 +141,7 @@ watch(tempDate, () => {
 						type="end"
 						:part="item.part"
 						class="
-						input
+						date-range-picker--segment-input
 						focus-outline-hidden
 						border
 						border-transparent
@@ -151,6 +150,7 @@ watch(tempDate, () => {
 					>
 						<div
 							class="
+								date-range-picker--segment-value
 								group-focus:z-[2]
 								group-focus:bg-accent-500/50
 								group-focus:rounded-xs
@@ -165,7 +165,7 @@ watch(tempDate, () => {
 		</div>
 		<DateRangePickerTrigger
 			class="
-				trigger
+				date-range-picker--trigger
 				px-1
 				focus-outline
 				rounded-tr-sm
@@ -183,46 +183,53 @@ watch(tempDate, () => {
 		</DateRangePickerTrigger>
 	</DateRangePickerField>
 
-	<!-- @vue-expect-error to exists -->
+	<!-- side=bottom makes months easier to click through -->
+	<!-- @vue-expect-error to exists-->
 	<DateRangePickerContent
 		:side-offset="4"
+		:avoid-collisions="true"
+		:prioritize-position="true"
+		side="bottom"
 		to="#root"
 		class="
-				mx-2
-				rounded-sm
-				bg-bg
-				dark:bg-neutral-800
-				border
-				border-neutral-300
-				dark:border-neutral-700
-				shadow-lg
-				will-change-[transform,opacity]
-				data-[state=open]:data-[side=top]:animate-slideDownAndFade
-				data-[state=open]:data-[side=right]:animate-slideLeftAndFade
-				data-[state=open]:data-[side=bottom]:animate-slideUpAndFade
-				data-[state=open]:data-[side=left]:animate-slideRightAndFade
-				text-fg
-				dark:text-neutral-200
-			"
+			date-range-picker--content
+			z-100
+			mx-2
+			rounded-sm
+			bg-bg
+			dark:bg-neutral-800
+			border
+			border-neutral-300
+			dark:border-neutral-700
+			shadow-lg
+			will-change-[transform,opacity]
+			data-[state=open]:data-[side=top]:animate-slideDownAndFade
+			data-[state=open]:data-[side=right]:animate-slideLeftAndFade
+			data-[state=open]:data-[side=bottom]:animate-slideUpAndFade
+			data-[state=open]:data-[side=left]:animate-slideRightAndFade
+			text-fg
+			dark:text-neutral-200
+		"
 	>
-		<DateRangePickerArrow class="fill-neutral-500"/>
+		<DateRangePickerArrow class="date-range-picker--arrow fill-neutral-500"/>
 		<DateRangePickerCalendar
 			v-slot="{ weekDays, grid }"
-			class="p-2 flex flex-col"
+			class="date-range-picker--calendar p-2 flex flex-col"
 		>
-			<DateRangePickerHeader class="flex items-center justify-between">
+			<DateRangePickerHeader class="date-range-picker--header flex items-center justify-between">
 				<DateRangePickerPrev
 					class="
-							inline-flex
-							items-center
-							cursor-pointer
-							active:scale-125
-							justify-center
-							rounded-sm
-							outlined
-							px-1
-						"
-					:prev-page="(date: DateValue) => date.subtract({ years: 1 })"
+						date-range-picker--year-prev
+						inline-flex
+						items-center
+						cursor-pointer
+						active:scale-125
+						justify-center
+						rounded-sm
+						outlined
+						px-1
+					"
+					:prev-page="(date2) => date2.subtract({ years: 1 })"
 				>
 					<Icon class="scale-150">
 						<i-radix-icons-double-arrow-left/>
@@ -230,6 +237,7 @@ watch(tempDate, () => {
 				</DateRangePickerPrev>
 				<DateRangePickerPrev
 					class="
+							date-range-picker--prev
 							inline-flex
 							items-center
 							cursor-pointer
@@ -245,18 +253,19 @@ watch(tempDate, () => {
 					</Icon>
 				</DateRangePickerPrev>
 
-				<DateRangePickerHeading class="min-w-[14ch] text-center"/>
+				<DateRangePickerHeading class="date-range-picker--heading min-w-[14ch] text-center"/>
 				<DateRangePickerNext
 					class="
-							inline-flex
-							items-center
-							cursor-pointer
-							active:scale-125
-							justify-center
-							rounded-sm
-							outlined
-							px-1
-						"
+						date-range-picker--next
+						inline-flex
+						items-center
+						cursor-pointer
+						active:scale-125
+						justify-center
+						rounded-sm
+						outlined
+						px-1
+					"
 				>
 					<Icon class="scale-150">
 						<i-radix-icons-chevron-right/>
@@ -264,16 +273,17 @@ watch(tempDate, () => {
 				</DateRangePickerNext>
 				<DateRangePickerNext
 					class="
-							inline-flex
-							items-center
-							cursor-pointer
-							active:scale-125
-							justify-center
-							rounded-sm
-							outlined
-							px-1
-						"
-					:next-page="(date: DateValue) => date.add({ years: 1 })"
+						date-range-picker--year-next
+						inline-flex
+						items-center
+						cursor-pointer
+						active:scale-125
+						justify-center
+						rounded-sm
+						outlined
+						px-1
+					"
+					:next-page="(date2) => date2.add({ years: 1 })"
 				>
 					<Icon class="scale-150">
 						<i-radix-icons-double-arrow-right/>
@@ -282,25 +292,37 @@ watch(tempDate, () => {
 			</DateRangePickerHeader>
 			<div
 				class="
-						flex
-						flex-col
-						pt-4
-					"
+					date-range-picker--grid-wrapper
+					flex
+					flex-col
+					pt-4
+				"
 			>
 				<DateRangePickerGrid
-					class="border-collapse select-none"
+					class="
+						date-range-picker--grid
+						border-collapse
+						select-none
+					"
 					v-for="month in grid"
 					:key="month.value.toString()"
 				>
-					<DateRangePickerGridHead>
-						<DateRangePickerGridRow class="mb-1 flex justify-between">
+					<DateRangePickerGridHead class="date-range-picker--grid-head">
+						<DateRangePickerGridRow class="
+							date-range-picker--grid-row
+							mb-1
+							flex
+							justify-between
+						"
+						>
 							<DateRangePickerHeadCell
 								class="
-										w-6
-										rounded-md
-										text-xs
-										text-accent-500
-									"
+									date-range-picker--head-cell
+									w-6
+									rounded-md
+									text-xs
+									text-accent-500
+								"
 								v-for="day in weekDays"
 								:key="day"
 							>
@@ -308,14 +330,21 @@ watch(tempDate, () => {
 							</DateRangePickerHeadCell>
 						</DateRangePickerGridRow>
 					</DateRangePickerGridHead>
-					<DateRangePickerGridBody>
+					<DateRangePickerGridBody class="date-range-picker--grid-body">
 						<DateRangePickerGridRow
-							class="flex w-full justify-between my-1"
+							class="
+								date-range-picker--grid-row
+								flex
+								w-full
+								justify-between
+								my-1
+							"
 							v-for="(weekDates, index) in month.rows"
 							:key="`weekDate-${index}`"
 						>
 							<DateRangePickerCell
 								:date="weekDate"
+								class="date-range-picker--cell"
 								v-for="weekDate in weekDates"
 								:key="weekDate.toString()"
 							>
@@ -323,47 +352,50 @@ watch(tempDate, () => {
 									:day="weekDate"
 									:month="month.value"
 									class="
-											relative
-											flex
-											items-center
-											justify-center
-											whitespace-nowrap
-											rounded-sm
-											border
-											border-transparent
-											bg-transparent
-											text-sm
-											w-6
-											h-6
-											focus:shadow
-											focus-outline
-											hover:border-accent-500
-											data-[selected]:bg-accent-700
-											data-[selected]:shadow
-											data-[disabled]:text-neutral-500
-											data-[selected]:text-white
-											data-[unavailable]:pointer-events-none
-											data-[unavailable]:text-neutral-500
-											data-[unavailable]:line-through
-											before:absolute
-											before:bottom-[1px]
-											before:hidden
-											before:rounded-full
-											before:w-4
-											before:h-[2px]
-											before:bg-white
-											data-[today]:before:block
-											data-[today]:before:bg-accent-500
-											data-[selected]:before:bg-white
-										"
+										date-range-picker--cell-trigger
+										relative
+										flex
+										items-center
+										justify-center
+										whitespace-nowrap
+										rounded-sm
+										border
+										border-transparent
+										bg-transparent
+										text-sm
+										w-6
+										h-6
+										focus:shadow
+										focus-outline
+										hover:border-accent-500
+										data-[selected]:bg-accent-500
+										dark:data-[selected]:bg-accent-500/80
+										data-[selected]:shadow
+										data-[disabled]:text-neutral-500
+										data-[selected]:text-white
+										data-[unavailable]:pointer-events-none
+										data-[unavailable]:text-neutral-500
+										data-[unavailable]:line-through
+										data-[outside-view]:text-neutral-500
+										before:absolute
+										before:bottom-[1px]
+										before:hidden
+										before:rounded-full
+										before:w-4
+										before:h-[2px]
+										before:bg-white
+										data-[today]:before:block
+										data-[today]:before:bg-accent-700
+										dark:data-[today]:before:bg-accent-300
+										data-[selected]:before:bg-white
+									"
 								/>
 							</DateRangePickerCell>
 						</DateRangePickerGridRow>
 					</DateRangePickerGridBody>
 				</DateRangePickerGrid>
 			</div>
-			<slot v-bind="{tempValue: tempDate}"/>
-			<slot/>
+			<slot v-bind="{ tempValue: tempDate }"/>
 		</DateRangePickerCalendar>
 	</DateRangePickerContent>
 </DateRangePickerRoot>

package/dist/runtime/components/LibDatePicker/LibRangeDatePicker.vue.d.ts

@@ -0,0 +1,34 @@
+import type { RangeDate } from "../../types/index.js.js";
+type __VLS_Props = {
+    useTime?: boolean;
+    id: string;
+    fallbackDate?: Date;
+    timeZone?: string;
+    updateInterval?: number;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue: RangeDate;
+};
+declare var __VLS_167: {
+    tempValue: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_167) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: RangeDate) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: RangeDate) => any) | undefined;
+}>, {
+    fallbackDate: Date;
+    timeZone: string;
+    useTime: boolean;
+    updateInterval: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};