@witchcraft/ui 0.0.1 → 0.1.1

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

@@ -1,76 +1,83 @@
-<script setup lang="ts">
-import { type DateValue, getLocalTimeZone } from "@internationalized/date"
-import { DatePickerArrow, DatePickerCalendar, DatePickerCell, DatePickerCellTrigger, DatePickerContent, DatePickerField, DatePickerGrid, DatePickerGridBody, DatePickerGridHead, DatePickerGridRow, DatePickerHeadCell, DatePickerHeader, DatePickerHeading, DatePickerInput, DatePickerNext, DatePickerPrev, DatePickerRoot, DatePickerTrigger } 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 { SingleDate } 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 locale = useInjectedLocale().timeLocale
-
-const date = defineModel<SingleDate>({ required: true })
-const tempDate = ref(convertDateWithFallback(date.value, props))
-watch(() => props.timeZone, () => {
-	tempDate.value = convertDateWithFallback(date.value, props)
-})
-
+<script setup>
+import { getLocalTimeZone } from "@internationalized/date";
+import { DatePickerArrow, DatePickerCalendar, DatePickerCell, DatePickerCellTrigger, DatePickerContent, DatePickerField, DatePickerGrid, DatePickerGridBody, DatePickerGridHead, DatePickerGridRow, DatePickerHeadCell, DatePickerHeader, DatePickerHeading, DatePickerInput, DatePickerNext, DatePickerPrev, DatePickerRoot, DatePickerTrigger } 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 locale = useInjectedLocale().timeLocale;
+const date = defineModel({ type: null, ...{ required: true } });
+let justSet = false;
+const tempDate = ref();
+function updateTempDate() {
+  tempDate.value = convertDateWithFallback(date.value, props);
+}
+updateTempDate();
+watch(date, () => {
+  if (!justSet) {
+    updateTempDate();
+  } else {
+    justSet = false;
+  }
+});
 watch(tempDate, () => {
-	date.value = toEmittableDate(toRaw(tempDate.value as any))
-})
-
+  justSet = true;
+  date.value = toEmittableDate(toRaw(tempDate.value));
+});
+watch(() => props.timeZone, () => {
+  updateTempDate();
+});
 const interval = setInterval(() => {
-	if (!date.value) {
-		// update suggested date if none is set
-		tempDate.value = convertDateWithFallback(date.value, props)
-	}
-}, props.updateInterval)
-
+  if (!date.value) {
+    updateTempDate();
+  }
+}, props.updateInterval);
 onBeforeUnmount(() => {
-	clearInterval(interval)
-})
-
+  clearInterval(interval);
+});
 </script>
 
 <template>
 <DatePickerRoot
 	:id="id"
 	:locale="locale"
-	class="root"
-	v-model="tempDate as DateValue"
+	class="date-picker--root"
+	v-model="tempDate"
 >
 	<DatePickerField
 		v-slot="{ segments }"
-		:class="twMerge(`
-			container
+		:class="
+  twMerge(
+    `
+			date-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="twMerge(`segments flex items-center overflow-scroll scrollbar-hidden whitespace-nowrapa`, date === undefined && 'text-neutral-400')">
+		<div :class="twMerge(`
+			date-picker--segment
+			flex
+			items-center
+			overflow-scroll
+			scrollbar-hidden
+			whitespace-nowrap
+		`, date === void 0 && 'text-neutral-400')"
+		>
 			<template
 				v-for="item in segments"
 				:key="item.part"
@@ -78,7 +85,7 @@ onBeforeUnmount(() => {
 				<DatePickerInput
 					v-if="item.part === 'literal'"
 					:part="item.part"
-					class="input-literal"
+					class="date-picker--segment-literal"
 				>
 					{{ item.value }}
 				</DatePickerInput>
@@ -86,7 +93,7 @@ onBeforeUnmount(() => {
 					v-else
 					:part="item.part"
 					class="
-						input
+						date-range-picker--segment-input
 						focus-outline-hidden
 						border
 						border-transparent
@@ -95,6 +102,7 @@ onBeforeUnmount(() => {
 				>
 					<div
 						class="
+							date-picker--segment-value
 							group-focus:z-[2]
 							group-focus:bg-accent-500/50
 							group-focus:rounded-xs
@@ -109,7 +117,7 @@ onBeforeUnmount(() => {
 
 		<DatePickerTrigger
 			class="
-				trigger
+				date-picker--trigger
 				px-1
 				focus-outline
 				rounded-tr-sm
@@ -126,48 +134,65 @@ onBeforeUnmount(() => {
 			</Icon>
 		</DatePickerTrigger>
 	</DatePickerField>
-
-	<!-- @vue-expect-error to exists -->
+	<!-- @vue-expect-error to exists-->
 	<DatePickerContent
 		: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-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
+		"
 	>
-		<DatePickerArrow class="fill-neutral-500"/>
+		<DatePickerArrow class="date-picker--arrow fill-neutral-500"/>
 		<!-- We set some max-width so it's not so hard to style the slot (which otherwise grows the calendar really wide. The min width is the header (4 icons + their padding + 14ch month), hence the complicated formula. -->
 		<DatePickerCalendar
 			v-slot="{ weekDays, grid }"
-			class="p-2 flex flex-col max-w-[calc(1.2em*4+var(--spacing)*8+14ch)]"
+			class="
+				date-picker--calendar
+				p-2
+				flex
+				flex-col
+				max-w-[calc(1.2em*4+var(--spacing)*8+14ch)]
+			"
 		>
-			<DatePickerHeader class="flex items-center justify-between">
+			<DatePickerHeader class="
+				date-picker--header
+				flex
+				items-center
+				justify-between
+			"
+			>
 				<DatePickerPrev
 					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-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/>
@@ -175,15 +200,16 @@ onBeforeUnmount(() => {
 				</DatePickerPrev>
 				<DatePickerPrev
 					class="
-							inline-flex
-							items-center
-							cursor-pointer
-							active:scale-125
-							justify-center
-							rounded-sm
-							outlined
-							px-1
-						"
+						date-picker--prev
+						inline-flex
+						items-center
+						cursor-pointer
+						active:scale-125
+						justify-center
+						rounded-sm
+						outlined
+						px-1
+					"
 				>
 					<Icon class="scale-150">
 						<i-radix-icons-chevron-left/>
@@ -193,15 +219,16 @@ onBeforeUnmount(() => {
 				<DatePickerHeading class="min-w-[14ch] text-center"/>
 				<DatePickerNext
 					class="
-							inline-flex
-							items-center
-							cursor-pointer
-							active:scale-125
-							justify-center
-							rounded-sm
-							outlined
-							px-1
-						"
+						date-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/>
@@ -209,16 +236,17 @@ onBeforeUnmount(() => {
 				</DatePickerNext>
 				<DatePickerNext
 					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-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/>
@@ -227,25 +255,37 @@ onBeforeUnmount(() => {
 			</DatePickerHeader>
 			<div
 				class="
-						flex
-						flex-col
-						pt-4
-					"
+					date-picker--grid-wrapper
+					flex
+					flex-col
+					pt-4
+				"
 			>
 				<DatePickerGrid
-					class="border-collapse select-none"
+					class="
+						date-picker--grid
+						border-collapse
+						select-none
+					"
 					v-for="month in grid"
 					:key="month.value.toString()"
 				>
-					<DatePickerGridHead>
-						<DatePickerGridRow class="mb-1 flex justify-between">
+					<DatePickerGridHead class="date-picker--grid-head">
+						<DatePickerGridRow class="
+							date-picker--grid-row
+							mb-1
+							flex
+							justify-between
+						"
+						>
 							<DatePickerHeadCell
 								class="
-										w-6
-										rounded-md
-										text-xs
-										text-accent-500
-									"
+									date-picker--head-cell
+									w-6
+									rounded-md
+									text-xs
+									text-accent-500
+								"
 								v-for="day in weekDays"
 								:key="day"
 							>
@@ -253,14 +293,21 @@ onBeforeUnmount(() => {
 							</DatePickerHeadCell>
 						</DatePickerGridRow>
 					</DatePickerGridHead>
-					<DatePickerGridBody>
+					<DatePickerGridBody class="date-picker--grid-body">
 						<DatePickerGridRow
-							class="flex w-full justify-between my-1"
+							class="
+								date-picker--grid-row
+								flex
+								w-full
+								justify-between
+								my-1
+							"
 							v-for="(weekDates, index) in month.rows"
 							:key="`weekDate-${index}`"
 						>
 							<DatePickerCell
 								:date="weekDate"
+								class="date-picker--cell"
 								v-for="weekDate in weekDates"
 								:key="weekDate.toString()"
 							>
@@ -268,46 +315,50 @@ onBeforeUnmount(() => {
 									: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-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
+									"
 								/>
 							</DatePickerCell>
 						</DatePickerGridRow>
 					</DatePickerGridBody>
 				</DatePickerGrid>
 			</div>
-			<slot v-bind="{tempValue: tempDate}"/>
+			<slot v-bind="{ tempValue: tempDate }"/>
 		</DatePickerCalendar>
 	</DatePickerContent>
 </DatePickerRoot>

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

@@ -0,0 +1,34 @@
+import type { SingleDate } from "../../types/index.js.js";
+type __VLS_Props = {
+    useTime?: boolean;
+    id: string;
+    fallbackDate?: Date;
+    timeZone?: string;
+    updateInterval?: number;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue: SingleDate;
+};
+declare var __VLS_157: {
+    tempValue: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_157) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SingleDate) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SingleDate) => 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;
+    };
+};

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

@@ -1,13 +1,13 @@
-<script setup lang="ts">
-import { getLocalTimeZone } from "@internationalized/date"
-
-import { getTimeZoneList } from "../../helpers/getTimeZoneList.js"
-import LibInput from "../LibInput/LibInput.vue"
-const timeZone = defineModel<string>({ default: getLocalTimeZone() })
-const label = defineModel<string>("label", { default: "Time Zone" })
+<script setup>
+import { getLocalTimeZone } from "@internationalized/date";
+import { getTimeZoneList } from "../../helpers/getTimeZoneList.js";
+import LibInputDeprecated from "../LibInputDeprecated/LibInputDeprecated.vue";
+const timeZone = defineModel({ type: String, ...{ default: getLocalTimeZone() } });
+const label = defineModel("label", { type: String, ...{ default: "Time Zone" } });
 </script>
+
 <template>
-<LibInput
+<LibInputDeprecated
 	:restrict-to-suggestions="true"
 	:suggestions="getTimeZoneList()"
 	:suggestions-filter="(_, items) => items"
@@ -22,6 +22,5 @@ const label = defineModel<string>("label", { default: "Time Zone" })
 			</span>
 		</slot>
 	</template>
-</LibInput>
+</LibInputDeprecated>
 </template>
-

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

@@ -0,0 +1,22 @@
+type __VLS_PublicProps = {
+    modelValue?: string;
+    "label"?: string;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    "update:label": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:label"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};