@witchcraft/ui 0.0.1 → 0.1.1

package/src/runtime/components/LibColorPicker/utils/truncate.ts

@@ -0,0 +1,6 @@
+export function truncate(val: number, precision: number): string {
+	const str = val.toFixed(precision)
+	const float = parseFloat(str) // removes trailing zeros
+	return float.toString()
+}
+

package/src/runtime/components/LibDarkModeSwitcher/LibDarkModeSwitcher.stories.ts

@@ -45,7 +45,7 @@ export const WithoutLabel: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		autoLabel: false,
+		showLabel: false,
 	},
 }
 

package/src/runtime/components/LibDarkModeSwitcher/LibDarkModeSwitcher.vue

@@ -2,38 +2,41 @@
 <lib-button
 	v-bind="{...$attrs, class:undefined}"
 	:class="!($attrs as any).unstyle && twMerge(`
+			dark-mode-switcher
 			rounded-full
 			after:rounded-full
 		`,
 		($attrs as any)?.class
 	)"
 	:title="`${t('dark-mode-switcher.title')}${t(`dark-mode-switcher.${darkModeState}`)}`"
-	:label="showLabel
-		? t(`dark-mode-switcher.${darkModeState}`)
-		: ''
-	"
 	@click="cycleDarkMode"
 >
+	<!-- content-vertical-holder will keep the icon the height of a text line regardless of the svg used -->
 	<template #icon>
 		<icon
 			v-if="darkModeState==='dark'"
-			class="w-[1em] flex items-center"
+			class="w-[1em] flex items-center content-vertical-holder"
 		>
 			<i-fa-solid-moon/>
 		</icon>
 		<icon
 			v-else-if="darkModeState==='light'"
-			class="w-[1em]"
+			class="w-[1em] content-vertical-holder"
 		>
 			<i-ph-sun-bold/>
 		</icon>
 		<icon
 			v-else
-			class="w-[1em]"
+			class="w-[1em] content-vertical-holder"
 		>
 			<i-fa6-solid-circle-half-stroke/>
 		</icon>
 	</template>
+	<template #default v-if="showLabel">
+		<div class="dark-mode-switcher--label pr-[2px]">
+			{{ t(`dark-mode-switcher.${darkModeState}`) }}
+		</div>
+	</template>
 </lib-button>
 </template>
 <script lang="ts" setup>
@@ -56,8 +59,7 @@ const emit = defineEmits<{
 }>()
 const $attrs = useAttrs()
 
-// eslint-disable-next-line no-use-before-define
-withDefaults(defineProps<Props>(), { })
+withDefaults(defineProps<Props>(), { showLabel: true })
 
 
 const {

package/src/runtime/components/LibDatePicker/LibDatePicker.vue

@@ -38,30 +38,17 @@ const isRange = computed(() => date.value !== undefined && !(date.value instance
 </script>
 
 <template>
-<LibSingleDatePicker
-	v-if="!isRange"
-	v-bind="attrs"
-	:id="id ?? fallbackId"
-	:use-time="showTime"
-	:time-zone="timeZone"
-	:fallback-date="fallbackDate"
-	v-model="date as SingleDate"
->
-	<template #default="slotProps">
-		<slot v-bind="slotProps"/>
-	</template>
-</LibSingleDatePicker>
-<LibRangeDatePicker
-	v-else
+<component
 	:id="id ?? fallbackId"
 	v-bind="attrs"
 	:use-time="showTime"
 	:time-zone="timeZone"
 	:fallback-date="fallbackDate"
-	v-model="date as RangeDate"
+	:is="isRange ? LibRangeDatePicker : LibSingleDatePicker"
+	v-model="date as any"
 >
 	<template #default="slotProps">
 		<slot v-bind="slotProps"/>
 	</template>
-</LibRangeDatePicker>
+</component>
 </template>

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

@@ -1,7 +1,7 @@
 <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 { CalendarDate, type DateValue, getLocalTimeZone, ZonedDateTime } from "@internationalized/date"
+import type { DateRange } from "reka-ui"
+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"
@@ -28,26 +28,48 @@ const props = withDefaults(defineProps<{
 const date = defineModel<RangeDate>({ required: true })
 
 
-const tempDate = ref({
-	start: convertDateWithFallback(date.value?.start, props),
-	end: convertDateWithFallback(date.value?.end, props)
+let justSet = false
+
+const tempDate = ref<{
+	start?: CalendarDate | ZonedDateTime
+	end?: CalendarDate | ZonedDateTime
+}>({})
+function updateTempDate(keys: ("start" | "end")[] = ["start", "end"]) {
+	const newValue = { ...tempDate.value }
+	for (const key of keys) {
+		newValue[key] = convertDateWithFallback(date.value?.[key], props)
+	}
+	// the WHOLE object must be updated due to how the reka date picker works
+	tempDate.value = newValue
+}
+
+// to avoid too deep of a watch
+watch([() => date.value.start, () => date.value.end], () => {
+	if (!justSet) {
+		updateTempDate()
+	} else {
+		justSet = false
+	}
 })
-watch(() => props.timeZone, () => {
-	tempDate.value = {
-		start: convertDateWithFallback(date.value?.start, props),
-		end: convertDateWithFallback(date.value?.end, props)
+
+watch(tempDate, () => {
+	if (!tempDate.value.start || !tempDate.value.end) return
+	justSet = true
+	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
 	}
 })
 
+watch(() => props.timeZone, () => {
+	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)
-	}
+	// update suggested date if none is set
+	if (!date.value.start) updateTempDate(["start"])
+	if (!date.value.end) updateTempDate(["end"])
 }, props.updateInterval)
 
 onBeforeUnmount(() => {
@@ -56,25 +78,20 @@ onBeforeUnmount(() => {
 
 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
-	}
-})
+
 </script>
 
 <template>
 <DateRangePickerRoot
 	:id="id"
 	:locale="locale"
-	class="root"
+	class="date-range-picker--root"
 	v-model="tempDate as DateRange"
 >
 	<DateRangePickerField
 		v-slot="{ segments }"
 		:class="twMerge(`
-			container
+			date-range-picker--field
 			flex items-center justify-between
 			select-none
 			data-[invalid]:border-red-500
@@ -82,8 +99,13 @@ watch(tempDate, () => {
 			rounded-sm
 		`, (attrs as any).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 === undefined && 'text-neutral-400')"
+			>
 				<template
 					v-for="item in segments.start"
 					:key="item.part"
@@ -92,7 +114,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 +123,7 @@ watch(tempDate, () => {
 						type="start"
 						:part="item.part"
 						class="
-						input
+						date-range-picker--segment-input
 						focus-outline-hidden
 						border
 						border-transparent
@@ -110,6 +132,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 +144,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 === undefined && 'text-neutral-400')"
+			>
 				<template
 					v-for="item in segments.end"
 					:key="item.part"
@@ -133,7 +161,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 +170,7 @@ watch(tempDate, () => {
 						type="end"
 						:part="item.part"
 						class="
-						input
+						date-range-picker--segment-input
 						focus-outline-hidden
 						border
 						border-transparent
@@ -151,6 +179,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 +194,7 @@ watch(tempDate, () => {
 		</div>
 		<DateRangePickerTrigger
 			class="
-				trigger
+				date-range-picker--trigger
 				px-1
 				focus-outline
 				rounded-tr-sm
@@ -183,45 +212,52 @@ 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
-						"
+						date-range-picker--year-prev
+						inline-flex
+						items-center
+						cursor-pointer
+						active:scale-125
+						justify-center
+						rounded-sm
+						outlined
+						px-1
+					"
 					:prev-page="(date: DateValue) => date.subtract({ years: 1 })"
 				>
 					<Icon class="scale-150">
@@ -230,6 +266,7 @@ watch(tempDate, () => {
 				</DateRangePickerPrev>
 				<DateRangePickerPrev
 					class="
+							date-range-picker--prev
 							inline-flex
 							items-center
 							cursor-pointer
@@ -245,18 +282,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,15 +302,16 @@ watch(tempDate, () => {
 				</DateRangePickerNext>
 				<DateRangePickerNext
 					class="
-							inline-flex
-							items-center
-							cursor-pointer
-							active:scale-125
-							justify-center
-							rounded-sm
-							outlined
-							px-1
-						"
+						date-range-picker--year-next
+						inline-flex
+						items-center
+						cursor-pointer
+						active:scale-125
+						justify-center
+						rounded-sm
+						outlined
+						px-1
+					"
 					:next-page="(date: DateValue) => date.add({ years: 1 })"
 				>
 					<Icon class="scale-150">
@@ -282,25 +321,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 +359,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,39 +381,43 @@ 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>
@@ -363,7 +425,6 @@ watch(tempDate, () => {
 				</DateRangePickerGrid>
 			</div>
 			<slot v-bind="{tempValue: tempDate}"/>
-			<slot/>
 		</DateRangePickerCalendar>
 	</DateRangePickerContent>
 </DateRangePickerRoot>