@witchcraft/ui 0.2.1-beta.3 → 0.2.1

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

@@ -1,6 +1,6 @@
 <template>
 <lib-button
-	v-bind="{...$attrs, class:undefined}"
+	v-bind="{ ...$attrs, class: undefined }"
 	:class="!($attrs as any).unstyle && twMerge(`
 			dark-mode-switcher
 			rounded-full
@@ -19,15 +19,19 @@
 			<component :is="darkModeState==='dark' ? IFaSolidMoon : darkModeState==='light' ? IPhSunBold : IFa6SolidCircleHalfStroke"/>
 		</icon>
 	</template>
-	<template #default v-if="showLabel">
+	<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>
-import { type ButtonHTMLAttributes,onMounted,useAttrs, watch } from "vue"
+import { type ButtonHTMLAttributes, onMounted, useAttrs, watch } from "vue"
 
 import IFaSolidMoon from "~icons/fa-solid/moon"
 import IFa6SolidCircleHalfStroke from "~icons/fa6-solid/circle-half-stroke"
@@ -40,7 +44,6 @@ import Icon from "../Icon/Icon.vue"
 import LibButton from "../LibButton/LibButton.vue"
 import type { TailwindClassProp } from "../shared/props.js"
 
-
 const t = useInjectedI18n()
 
 const emit = defineEmits<{
@@ -53,14 +56,12 @@ const $attrs = useAttrs()
 
 withDefaults(defineProps<Props>(), { showLabel: true })
 
-
 const {
 	darkMode,
 	cycleDarkMode,
-	darkModeState,
+	darkModeState
 } = useInjectedDarkMode()
 
-
 watch(darkMode, value => emit("update:darkMode", value))
 watch(darkModeState, value => emit("update:darkModeState", value))
 
@@ -68,9 +69,10 @@ onMounted(() => {
 	emit("update:darkMode", darkMode.value)
 })
 </script>
+
 <script lang="ts">
 export default {
-	name: "lib-dark-mode-switcher"
+	name: "LibDarkModeSwitcher"
 }
 type RealProps = {
 	showLabel?: boolean
@@ -79,7 +81,7 @@ type RealProps = {
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<ButtonHTMLAttributes,"class" | "color" | "disabled">
+	Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled">
 	& TailwindClassProp
 	& {
 		disabled?: boolean

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

@@ -1,10 +1,9 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { CalendarDate,fromDate, getLocalTimeZone, toTimeZone } from "@internationalized/date"
+import { CalendarDate, fromDate, getLocalTimeZone, toTimeZone } from "@internationalized/date"
 import type { Meta, StoryObj } from "@storybook/vue3"
-import { computed,ref } from "vue"
+import { computed, ref } from "vue"
 
 import { createNoonUtcDate } from "../../helpers/createNoonUtcDate.js"
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
 function html(strings: TemplateStringsArray, ...values: any[]): string {
@@ -16,21 +15,20 @@ const singleMeta: Meta<typeof components.LibDatePicker> = {
 	args: {
 		// @ts-expect-error custom prop just for story
 		slot: "",
-		timeZone: getLocalTimeZone(),
+		timeZone: getLocalTimeZone()
 	}
 }
 
 export default singleMeta
 type Story = StoryObj<typeof components.LibDatePicker>
 
-
 function toUTC(m: Date, timeZone: string) {
 	return toTimeZone(fromDate(m, timeZone), "UTC").toAbsoluteString()
 }
 export const Primary: Story = {
 	render: (args: any) => ({
 		components: {
-			...components,
+			...components
 		},
 		setup: () => {
 			const modelValue = ref(args.modelValue)
@@ -41,10 +39,11 @@ export const Primary: Story = {
 				return m instanceof Date
 					? toUTC(m, z)
 					: typeof m === "object"
-					? `Start: ${m.start ? toUTC(m.start,	z) : "undefined"}, End: ${m.end ? toUTC(m.end,	z) : "undefined"}`
-					: "undefined"
+						? `Start: ${m.start ? toUTC(m.start,	z) : "undefined"}, End: ${m.end ? toUTC(m.end,	z) : "undefined"}`
+						: "undefined"
 			})
-			return { args, getLocalTimeZone, modelValue, timeZone, debugUtcDate } },
+			return { args, getLocalTimeZone, modelValue, timeZone, debugUtcDate }
+		},
 		template: `
 			<div>Date: {{modelValue ?? "undefined"}}</div>
 			<div>Date UTC: {{debugUtcDate}}</div>
@@ -62,15 +61,15 @@ export const Primary: Story = {
 					${args.slot}
 				</LibDatePicker>
 			</div>
-		`,
-	}),
+		`
+	})
 }
 
 export const DateRange: Story = {
 	...Primary,
 	args: {
-		modelValue: { start: undefined, end: undefined },
-	},
+		modelValue: { start: undefined, end: undefined }
+	}
 }
 
 export const IconTriggerFirst: Story = {
@@ -78,7 +77,7 @@ export const IconTriggerFirst: Story = {
 	args: {
 		...Primary.args,
 		class: "[&_.trigger]:order-first"
-	},
+	}
 }
 
 export const BottomSlot: Story = {
@@ -102,7 +101,7 @@ export const DateWithTime: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		showTime: true,
+		showTime: true
 	}
 }
 export const WithDifferentFallbackDate: Story = {

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

@@ -5,7 +5,7 @@ import { computed, useAttrs } from "vue"
 import LibRangeDatePicker from "./LibRangeDatePicker.vue"
 import LibSingleDatePicker from "./LibSingleDatePicker.vue"
 
-import type { RangeDate,SingleDate } from "../../types/index.js"
+import type { RangeDate, SingleDate } from "../../types/index.js"
 import { getFallbackId } from "../shared/props.js"
 
 const attrs = useAttrs()
@@ -34,7 +34,6 @@ const fallbackId = getFallbackId()
  */
 const date = defineModel<SingleDate | RangeDate>({ required: true })
 const isRange = computed(() => date.value !== undefined && !(date.value instanceof Date))
-
 </script>
 
 <template>

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

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { CalendarDate, type DateValue, getLocalTimeZone, ZonedDateTime } from "@internationalized/date"
+import type { CalendarDate, DateValue, ZonedDateTime } from "@internationalized/date"
+import { getLocalTimeZone } 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 { 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 { convertDateWithFallback, getNow, toEmittableDate } from "./helpers.js"
 
 import IRadixIconsCalendar from "~icons/radix-icons/calendar"
 import IRadixIconsChevronLeft from "~icons/radix-icons/chevron-left"
@@ -16,6 +17,7 @@ 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<{
@@ -33,7 +35,6 @@ const props = withDefaults(defineProps<{
 
 const date = defineModel<RangeDate>({ required: true })
 
-
 let justSet = false
 
 const tempDate = ref<{
@@ -71,7 +72,6 @@ watch(() => props.timeZone, () => {
 	updateTempDate()
 })
 
-
 const interval = setInterval(() => {
 	// update suggested date if none is set
 	if (!date.value.start) updateTempDate(["start"])
@@ -83,8 +83,6 @@ onBeforeUnmount(() => {
 })
 
 const locale = useInjectedLocale().timeLocale
-
-
 </script>
 
 <template>
@@ -106,7 +104,8 @@ const locale = useInjectedLocale().timeLocale
 		`, (attrs as any).class)"
 	>
 		<div class="date-range-picker--segments-input flex items-center flex-1 overflow-scroll scrollbar-hidden whitespace-nowrap">
-			<div :class="twMerge(`
+			<div
+				:class="twMerge(`
 				date-range-picker--start-segment
 				flex
 				items-center
@@ -153,7 +152,8 @@ const locale = useInjectedLocale().timeLocale
 			<div class="date-range-picker--range-separator text-center px-1">
 				–
 			</div>
-			<div :class="twMerge(`
+			<div
+				:class="twMerge(`
 				date-range-picker--end-segment
 				flex
 				items-center
@@ -219,13 +219,12 @@ const locale = useInjectedLocale().timeLocale
 	</DateRangePickerField>
 
 	<!-- 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"
+		:portal="{ to: '#root' }"
 		class="
 			date-range-picker--content
 			z-100
@@ -343,7 +342,8 @@ const locale = useInjectedLocale().timeLocale
 					:key="month.value.toString()"
 				>
 					<DateRangePickerGridHead class="date-range-picker--grid-head">
-						<DateRangePickerGridRow class="
+						<DateRangePickerGridRow
+							class="
 							date-range-picker--grid-row
 							mb-1
 							flex
@@ -430,7 +430,7 @@ const locale = useInjectedLocale().timeLocale
 					</DateRangePickerGridBody>
 				</DateRangePickerGrid>
 			</div>
-			<slot v-bind="{tempValue: tempDate}"/>
+			<slot v-bind="{ tempValue: tempDate }"/>
 		</DateRangePickerCalendar>
 	</DateRangePickerContent>
 </DateRangePickerRoot>

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

@@ -3,7 +3,7 @@ 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 "reka-ui"
 import { onBeforeUnmount, ref, toRaw, useAttrs, watch } from "vue"
 
-import { convertDateWithFallback, getNow,toEmittableDate } from "./helpers.js"
+import { convertDateWithFallback, getNow, toEmittableDate } from "./helpers.js"
 
 import IRadixIconsCalendar from "~icons/radix-icons/calendar"
 import IRadixIconsChevronLeft from "~icons/radix-icons/chevron-left"
@@ -69,7 +69,6 @@ const interval = setInterval(() => {
 onBeforeUnmount(() => {
 	clearInterval(interval)
 })
-
 </script>
 
 <template>
@@ -92,7 +91,8 @@ onBeforeUnmount(() => {
 			(attrs as any).class)
 		"
 	>
-		<div :class="twMerge(`
+		<div
+			:class="twMerge(`
 			date-picker--segment
 			flex
 			items-center
@@ -157,13 +157,12 @@ onBeforeUnmount(() => {
 			</Icon>
 		</DatePickerTrigger>
 	</DatePickerField>
-	<!-- @vue-expect-error to exists-->
 	<DatePickerContent
 		:side-offset="4"
 		:avoid-collisions="true"
 		:prioritize-position="true"
 		side="bottom"
-		to="#root"
+		:portal="{ to: '#root' }"
 		class="
 			date-picker--content
 			z-100
@@ -196,7 +195,8 @@ onBeforeUnmount(() => {
 				max-w-[calc(1.2em*4+var(--spacing)*8+14ch)]
 			"
 		>
-			<DatePickerHeader class="
+			<DatePickerHeader
+				class="
 				date-picker--header
 				flex
 				items-center
@@ -294,7 +294,8 @@ onBeforeUnmount(() => {
 					:key="month.value.toString()"
 				>
 					<DatePickerGridHead class="date-picker--grid-head">
-						<DatePickerGridRow class="
+						<DatePickerGridRow
+							class="
 							date-picker--grid-row
 							mb-1
 							flex
@@ -381,7 +382,7 @@ onBeforeUnmount(() => {
 					</DatePickerGridBody>
 				</DatePickerGrid>
 			</div>
-			<slot v-bind="{tempValue: tempDate}"/>
+			<slot v-bind="{ tempValue: tempDate }"/>
 		</DatePickerCalendar>
 	</DatePickerContent>
 </DatePickerRoot>

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

@@ -3,9 +3,11 @@ import { getLocalTimeZone } from "@internationalized/date"
 
 import { getTimeZoneList } from "../../helpers/getTimeZoneList.js"
 import LibInputDeprecated from "../LibInputDeprecated/LibInputDeprecated.vue"
+
 const timeZone = defineModel<string>({ default: getLocalTimeZone() })
 const label = defineModel<string>("label", { default: "Time Zone" })
 </script>
+
 <template>
 <LibInputDeprecated
 	:restrict-to-suggestions="true"
@@ -24,4 +26,3 @@ const label = defineModel<string>("label", { default: "Time Zone" })
 	</template>
 </LibInputDeprecated>
 </template>
-

package/src/runtime/components/LibDatePicker/helpers.ts

@@ -40,7 +40,6 @@ export function toEmittableDate(date: ZonedDateTime | CalendarDate): Date {
 		: toZoned(toCalendarDateTime(date, new Time(12, 0, 0)), "UTC").toDate()
 }
 
-
 /**
  * @internal
  *
@@ -52,4 +51,3 @@ export function getNow(opts: { withTime: boolean }): ZonedDateTime | CalendarDat
 	}
 	return today(getLocalTimeZone())
 }
-

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

@@ -4,45 +4,42 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 
 import LibDebug from "./LibDebug.vue"
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof LibDebug> = {
 	component: LibDebug,
 	title: "Components/Debug",
 	args: {
-		value: { any: ["any", { value: "any" }]},
-	},
+		value: { any: ["any", { value: "any" }] }
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof LibDebug>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components,
 		setup: () => ({ args }),
 		template: `
 			<lib-debug v-bind="args" />
-		`,
-	}),
+		`
+	})
 }
 export const WithCustomTab: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		value: { any: ["any", { value: "any" }]},
-		tab: 2,
-	},
+		value: { any: ["any", { value: "any" }] },
+		tab: 2
+	}
 }
 export const NoValue: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		value: undefined,
-	},
+		value: undefined
+	}
 }
 export const StringWithWhitespace: Story = {
 	...Primary,
@@ -52,7 +49,6 @@ export const StringWithWhitespace: Story = {
 	 		Manually
 	 			Indented
 	 				String
-	 	`,
-	},
+	 	`
+	}
 }
-

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

@@ -1,5 +1,6 @@
 <template>
-<div class="debug--wrapper
+<div
+	class="debug--wrapper
 		text-fg
 		dark:text-bg
 		flex
@@ -13,11 +14,15 @@
 >
 	<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()">
+		<LibButton
+			class="debug--copy-button w-min-content"
+			@click="copy()"
+		>
 			<icon><i-fa6-regular-copy/></icon>
 		</LibButton>
 	</div>
-	<pre v-if="value"
+	<pre
+		v-if="value"
 		:class="`
 			debug--value
 			[tab-size:${tab}]
@@ -28,9 +33,8 @@
 </div>
 </template>
 
-
 <script setup lang="ts">
-import { type PropType, useSlots } from "vue"
+import { useSlots } from "vue"
 
 import IFa6RegularCopy from "~icons/fa-regular/copy"
 
@@ -41,7 +45,7 @@ const $slots = useSlots()
 
 const props = withDefaults(defineProps<{
 	/** The value to debug, can be anything. */
-	// eslint-disable-next-line vue/no-restricted-props
+
 	value?: any
 	/** Sets the tab size in css. Defaults to 3. */
 	tab?: number
@@ -49,7 +53,7 @@ const props = withDefaults(defineProps<{
 }>(), {
 	tab: 3,
 	title: "Debug",
-	value: undefined,
+	value: undefined
 })
 
 const getStringValue = (value: any): string => value === undefined
@@ -75,8 +79,8 @@ const copy = (): void => {
 		const text = props.value
 			? getStringValue(props.value)
 			: $slots.default?.()?.[0]?.children
-			? findText([...$slots.default()[0]!.children as any[]])
-			: undefined
+				? 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`.")
@@ -88,7 +92,6 @@ const copy = (): void => {
 </script>
 
 <script lang="ts">
-
 /**
  * Simple debug component for displaying objects and strings with whitespace.
  *
@@ -97,7 +100,7 @@ const copy = (): void => {
  * The value can be undefined, it will just display undefined.
  */
 export default {
-	name: "lib-debug",
+	name: "LibDebug"
 	// https://v3.vuejs.org/guide/typescript-support.html#annotating-props
 }
 </script>

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

@@ -1,7 +1,8 @@
 <template>
 <DevOnly>
 	<slot v-if="doShow && $attrs?.['as-child'] !== undefined"/>
-	<div v-else-if="doShow"
+	<div
+		v-else-if="doShow"
 		:class="twMerge(`
 			dev-only
 			border
@@ -13,17 +14,19 @@
 		`,
 			($attrs.class as string)
 		)"
-		v-bind="{...$attrs, class: undefined}"
+		v-bind="{ ...$attrs, class: undefined }"
 	>
 		<slot/>
 	</div>
 </DevOnly>
 </template>
+
 <script lang="ts" setup>
 import { computed, inject, ref, useAttrs } from "vue"
 
 import { showDevOnlyInjectionKey } from "../../composables/useShowDevOnlyKey.js"
 import { twMerge } from "../../utils/twMerge.js"
+
 const $attrs = useAttrs()
 
 const props = withDefaults(defineProps<{
@@ -34,10 +37,10 @@ const props = withDefaults(defineProps<{
 
 const injectedShow = inject(showDevOnlyInjectionKey, ref(false))
 const doShow = computed(() => props.show || injectedShow.value)
-
 </script>
+
 <script lang="ts">
-interface Props {
+export interface Props {
 	show?: boolean
 }
 
@@ -45,6 +48,7 @@ interface Props {
 // This should be enough to bypass the type lint error.
 declare module "vue" {
 	export interface GlobalComponents {
+		// eslint-disable-next-line @typescript-eslint/naming-convention
 		DevOnly: any
 	}
 }

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

@@ -4,22 +4,19 @@ import { ref } from "vue"
 
 import LibFileInput from "./LibFileInput.vue"
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof LibFileInput> = {
 	component: LibFileInput,
 	title: "Components/FileInput",
 	args: {
 
-	},
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof LibFileInput>
 
-
 export const SingleFile: Story = {
 	render: args => ({
 		components,
@@ -32,16 +29,16 @@ export const SingleFile: Story = {
 		},
 		template: `
 			<lib-file-input v-bind="{...args}" @errors="errorHandler"></lib-file-input>
-		`,
-	}),
+		`
+	})
 }
 
 export const MultipleFile: Story = {
 	...SingleFile,
 	args: {
 		...SingleFile.args,
-		multiple: true,
-	},
+		multiple: true
+	}
 }
 
 export const AnyFormat: Story = {
@@ -49,16 +46,16 @@ export const AnyFormat: Story = {
 	args: {
 		...SingleFile.args,
 		multiple: true,
-		formats: [],
-	},
+		formats: []
+	}
 }
 
 export const Compact: Story = {
 	...SingleFile,
 	args: {
 		...SingleFile.args,
-		compact: true,
-	},
+		compact: true
+	}
 }
 
 export const ErrorHandling: Story = {
@@ -68,12 +65,12 @@ export const ErrorHandling: Story = {
 			const errors = ref([])
 			const errorHandler = (e: any) => errors.value = e
 			return {
-				args, errors, errorHandler,
+				args, errors, errorHandler
 			}
 		},
 		template: `
 			<lib-debug :title="'Errors'">{{errors}}</lib-debug>
 			<lib-file-input v-bind="{...args}"  @errors="errorHandler"></lib-file-input>
-		`,
-	}),
+		`
+	})
 }