@witchcraft/ui 0.0.1 → 0.1.1

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

@@ -1,6 +1,6 @@
 <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 { 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"
@@ -28,19 +28,35 @@ const props = withDefaults(defineProps<{
 const locale = useInjectedLocale().timeLocale
 
 const date = defineModel<SingleDate>({ required: true })
-const tempDate = ref(convertDateWithFallback(date.value, props))
-watch(() => props.timeZone, () => {
+
+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, () => {
+	justSet = true
 	date.value = toEmittableDate(toRaw(tempDate.value as any))
 })
 
+watch(() => props.timeZone, () => {
+	updateTempDate()
+})
+
 const interval = setInterval(() => {
 	if (!date.value) {
 		// update suggested date if none is set
-		tempDate.value = convertDateWithFallback(date.value, props)
+		updateTempDate()
 	}
 }, props.updateInterval)
 
@@ -54,13 +70,13 @@ onBeforeUnmount(() => {
 <DatePickerRoot
 	:id="id"
 	:locale="locale"
-	class="root"
+	class="date-picker--root"
 	v-model="tempDate as DateValue"
 >
 	<DatePickerField
 		v-slot="{ segments }"
 		:class="twMerge(`
-			container
+			date-picker--field
 			flex items-center justify-between
 			select-none
 			data-[invalid]:border-red-500
@@ -70,7 +86,15 @@ onBeforeUnmount(() => {
 			(attrs as any).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 === undefined && 'text-neutral-400')"
+		>
 			<template
 				v-for="item in segments"
 				:key="item.part"
@@ -78,7 +102,7 @@ onBeforeUnmount(() => {
 				<DatePickerInput
 					v-if="item.part === 'literal'"
 					:part="item.part"
-					class="input-literal"
+					class="date-picker--segment-literal"
 				>
 					{{ item.value }}
 				</DatePickerInput>
@@ -86,7 +110,7 @@ onBeforeUnmount(() => {
 					v-else
 					:part="item.part"
 					class="
-						input
+						date-range-picker--segment-input
 						focus-outline-hidden
 						border
 						border-transparent
@@ -95,6 +119,7 @@ onBeforeUnmount(() => {
 				>
 					<div
 						class="
+							date-picker--segment-value
 							group-focus:z-[2]
 							group-focus:bg-accent-500/50
 							group-focus:rounded-xs
@@ -109,7 +134,7 @@ onBeforeUnmount(() => {
 
 		<DatePickerTrigger
 			class="
-				trigger
+				date-picker--trigger
 				px-1
 				focus-outline
 				rounded-tr-sm
@@ -126,47 +151,64 @@ 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
-						"
+						date-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">
@@ -175,15 +217,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 +236,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,15 +253,16 @@ onBeforeUnmount(() => {
 				</DatePickerNext>
 				<DatePickerNext
 					class="
-							inline-flex
-							items-center
-							cursor-pointer
-							active:scale-125
-							justify-center
-							rounded-sm
-							outlined
-							px-1
-						"
+						date-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">
@@ -227,25 +272,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 +310,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,39 +332,43 @@ 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>

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

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

package/src/runtime/components/LibDebug/LibDebug.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="lib-debug
+<div class="debug--wrapper
 		text-fg
 		dark:text-bg
 		flex
@@ -11,14 +11,15 @@
 		overflow-auto
 	"
 >
-	<div class="flex justify-between">
-		<span class="font-bold">{{ title }}</span>
-		<LibButton class="w-min-content" @click="copy()">
+	<div class="debug--header flex justify-between">
+		<span class="debug--title font-bold">{{ title }}</span>
+		<LibButton class="debug--copy-button w-min-content" @click="copy()">
 			<icon><i-fa6-regular-copy/></icon>
 		</LibButton>
 	</div>
 	<pre v-if="value"
 		:class="`
+			debug--value
 			[tab-size:${tab}]
 		`
 		"
@@ -69,7 +70,16 @@ const findText = (children: any[]): string => {
 }
 const copy = (): void => {
 	if (navigator.clipboard) {
-		const text = props.value ? getStringValue(props.value) : findText([...$slots.default!()![0].children as any[]])
+		const text = props.value
+			? getStringValue(props.value)
+			: $slots.default?.()?.[0]?.children
+			? findText([...$slots.default()[0]!.children as any[]])
+			: undefined
+		if (text === undefined) {
+			// eslint-disable-next-line no-console
+			console.warn("Cannot copy text, can't generate string value from `getStringValue` or `the default slot`.")
+			return
+		}
 		navigator.clipboard.writeText(text).catch(() => { })
 	}
 }

package/src/runtime/components/LibDevOnly/LibDevOnly.vue

@@ -2,9 +2,8 @@
 <DevOnly>
 	<slot v-if="doShow && $attrs?.['as-child'] !== undefined"/>
 	<div v-else-if="doShow"
-
-
 		:class="twMerge(`
+			dev-only
 			border
 			border-dashed
 			border-red-500
@@ -40,7 +39,6 @@ const doShow = computed(() => props.show || injectedShow.value)
 <script lang="ts">
 interface Props {
 	show?: boolean
-	asChild?: boolean
 }
 
 // Not sure why nuxt's types aren't correctly getting detected

package/src/runtime/components/LibFileInput/LibFileInput.vue

@@ -1,7 +1,6 @@
 <template>
 <!-- todo aria errors -->
-<div :class="twMerge(
-		`file-input
+<div :class="twMerge(`file-input
 		justify-center
 		border-2
 		border-dashed
@@ -9,15 +8,16 @@
 		focus-outline-within
 		transition-[border-color,box-shadow]
 		ease-out`,
-		compact && `rounded-sm`,
-		!compact && `flex w-full flex-col items-center gap-2 rounded-xl  p-2 `,
-		errors.length > 0 && errorFlashing && `border-danger-400`,
-		( $.wrapperAttrs as any ).class
+	compact && `rounded-sm`,
+	!compact && `flex w-full flex-col items-center gap-2 rounded-xl  p-2 `,
+	errors.length > 0 && errorFlashing && `border-danger-400`,
+	( $.wrapperAttrs as any ).class
 	)"
 	v-bind="{...$.wrapperAttrs, class:undefined}"
 >
-	<div :class="twMerge(
-		`relative justify-center`,
+	<div :class="twMerge( `
+		file-input--wrapper
+		relative justify-center`,
 		compact && `flex gap-2`,
 		!compact && `input-wrapper
 		flex flex-col items-center
@@ -26,9 +26,14 @@
 	>
 		<label
 			:for="id ?? fallbackId"
-			:class="twMerge(
-				`pointer-events-none flex gap-1 items-center whitespace-nowrap`
-			)"
+			:class="twMerge( `
+				file-input--label
+				pointer-events-none
+				flex
+				gap-1
+				items-center
+				whitespace-nowrap
+			`)"
 		>
 			<slot v-if="compact || multiple || files.length === 0" name="icon">
 				<icon><i-fa6-solid-arrow-up-from-bracket/></icon>
@@ -45,22 +50,29 @@
 					)
 				}}
 			</slot>
-			<span v-if="compact && multiple">{{ ` (${files.length})` }}</span>
+			<span
+				v-if="compact && multiple"
+				class="file-input--label-count"
+			>
+				{{ ` (${files.length})` }}
+			</span>
 		</label>
-		<label v-if="!compact && formats?.length > 0" class="flex flex-col items-center text-sm">
+		<label v-if="!compact && formats?.length > 0" class="file-input--formats-label flex flex-col items-center text-sm">
 			<slot name="formats">{{ t("file-input.accepted-formats") }}: </slot>
-			<div class="">
+			<div class="file-input--formats-list">
 				{{ extensions.join(", ") }}
 			</div>
 		</label>
 		<input
 			:id="id ?? fallbackId"
-			:class="twMerge(
-				`absolute inset-0
-				z-0
-				cursor-pointer
-				text-[0]
-				opacity-0
+			:class="twMerge(`
+					file-input--input
+					absolute
+					inset-0
+					z-0
+					cursor-pointer
+					text-[0]
+					opacity-0
 				`,
 				($.inputAttrs as any)?.class
 			)"
@@ -75,7 +87,7 @@
 		<!--  click event allows event to fire even if the user picks the same file -->
 	</div>
 	<div v-if="!compact && files.length > 0"
-		:class="twMerge(`previews
+		:class="twMerge(`file-input--previews
 			flex items-stretch justify-center gap-2 flex-wrap
 			`,
 			multiple && `
@@ -84,8 +96,8 @@
 			($.previewsAttrs as any)?.class
 		)"
 	>
-		<div class="flex-1"/>
-		<div class="preview
+		<div class="file-input--preview-spacer flex-1"/>
+		<div class="file-input--preview-wrapper
 				z-1
 				relative
 				flex
@@ -101,7 +113,7 @@
 			v-for="entry of files"
 			:key="entry.file.name"
 		>
-			<div class="flex flex-initial basis-full justify-start">
+			<div class="file-input--remove-button flex flex-initial basis-full justify-start">
 				<lib-button
 					:border="false"
 					:aria-label="`Remove file ${entry.file.name}`"
@@ -111,9 +123,9 @@
 				</lib-button>
 			</div>
 
-			<div class="flex flex-initial basis-full justify-center">
+			<div class="file-input--preview flex flex-initial basis-full justify-center">
 				<div v-if="entry.isImg"
-					class="image
+					class="file-input--preview-image
 					bg-transparency-squares flex
 					h-[80px]   flex-wrap items-center
 					justify-center
@@ -122,7 +134,7 @@
 					<img class="max-h-full w-auto" :src="getSrc(entry.file)">
 				</div>
 				<div v-if="!entry.isImg"
-					class="no-image
+					class="file-input--preview-no-image
 					flex h-[80px]
 					flex-1 basis-full flex-wrap items-center justify-center
 					"
@@ -130,7 +142,21 @@
 					<icon><i-fa6-regular-file class="text-4xl opacity-50"/></icon>
 				</div>
 			</div>
-			<div class="filename min-w-0 flex-1 basis-0 truncate break-all rounded-sm p-1 text-sm" :title="entry.file.name">{{ entry.file.name }}</div>
+			<div class="
+				file-input--preview-filename
+				min-w-0
+				flex-1
+				basis-0
+				truncate
+				break-all
+				rounded-sm
+				p-1
+				text-sm
+			"
+				:title="entry.file.name"
+			>
+				{{ entry.file.name }}
+			</div>
 		</div>
 
 		<div class="flex-1"/>
@@ -181,7 +207,6 @@ const emits = defineEmits<{
 }>()
 
 const fallbackId = getFallbackId()
-// eslint-disable-next-line no-use-before-define
 const props = withDefaults(defineProps<Props>(), {
 	multiple: false,
 	formats: () => ["image/*", ".jpeg", ".jpg", ".png"],