@witchcraft/ui 0.1.0 → 0.1.1

package/dist/runtime/components/LibColorPicker/LibColorPicker.vue.d.ts

@@ -0,0 +1,61 @@
+import type { HsvaColor, RgbaColor } from "../../types/index.js.js";
+import { type LabelProps, type LinkableByIdProps } from "../shared/props.js.js";
+type __VLS_Props = LabelProps & LinkableByIdProps & {
+    allowAlpha?: boolean;
+    /**
+     * The precision of the rgba string representation of the color. Defaults to 3. Extra trailing zeros are removed for a prettier number.
+     *
+     * Does not affect the number saved unless the user manually edits the color.
+     *
+     * Ignored if `customRepresentation` is set.
+     */
+    stringPrecision?: number;
+    /** Allows overriding the string representation of the color. Useful for using a different representation than rgba (e.g. hex). The fromStringToHsva part is rarely needed as the colorjs.io library can normally parse the color. Returning undefined signals an error. */
+    customRepresentation?: {
+        fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
+        fromStringToHsva?: (string: string) => HsvaColor | undefined;
+    };
+    border?: boolean;
+    /** Modify what the user copies to the clipboard. */
+    copyTransform?: (val: HsvaColor, stringVal: string) => any;
+    valid?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: RgbaColor;
+    "tempValue"?: RgbaColor | undefined;
+};
+declare var __VLS_1: {}, __VLS_27: {};
+type __VLS_Slots = {} & {
+    input?: (props: typeof __VLS_1) => any;
+} & {
+    buttons?: (props: typeof __VLS_27) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: RgbaColor) => any;
+    "update:tempValue": (value: RgbaColor | undefined) => any;
+} & {
+    cancel: () => any;
+    save: (val: RgbaColor) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onSave?: ((val: RgbaColor) => any) | undefined;
+    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
+}>, {
+    border: boolean;
+    valid: boolean;
+    allowAlpha: boolean;
+    stringPrecision: number;
+    customRepresentation: {
+        fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
+        fromStringToHsva?: (string: string) => HsvaColor | undefined;
+    };
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
+}, {}, {}, {}, 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/LibDarkModeSwitcher/LibDarkModeSwitcher.vue

@@ -1,26 +1,27 @@
 <template>
 <lib-button
-	v-bind="{...$attrs, class:undefined}"
-	:class="!($attrs as any).unstyle && twMerge(`
+	v-bind="{ ...$attrs, class: void 0 }"
+	:class="!$attrs.unstyle && twMerge(
+  `
 			dark-mode-switcher
 			rounded-full
 			after:rounded-full
 		`,
-		($attrs as any)?.class
-	)"
+  $attrs?.class
+)"
 	:title="`${t('dark-mode-switcher.title')}${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'"
+			v-if="darkModeState === 'dark'"
 			class="w-[1em] flex items-center content-vertical-holder"
 		>
 			<i-fa-solid-moon/>
 		</icon>
 		<icon
-			v-else-if="darkModeState==='light'"
+			v-else-if="darkModeState === 'light'"
 			class="w-[1em] content-vertical-holder"
 		>
 			<i-ph-sun-bold/>
@@ -39,60 +40,34 @@
 	</template>
 </lib-button>
 </template>
-<script lang="ts" setup>
-import { type ButtonHTMLAttributes,onMounted,useAttrs, watch } from "vue"
-
-import { useInjectedDarkMode } from "../../composables/useInjectedDarkMode.js"
-import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
-import { twMerge } from "../../utils/twMerge.js"
-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<{
-	/** Emits whether dark mode should be enabled. */
-	(e: "update:darkMode", value: boolean): void
-	/** Emits the change, but as a state string (dark, light, system) */
-	(e: "update:darkModeState", value: "dark" | "light" | "system"): void
-}>()
-const $attrs = useAttrs()
-
-// eslint-disable-next-line no-use-before-define
-withDefaults(defineProps<Props>(), { showLabel: true })
-
 
+<script setup>
+import { onMounted, useAttrs, watch } from "vue";
+import { useInjectedDarkMode } from "../../composables/useInjectedDarkMode.js";
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
+import { twMerge } from "../../utils/twMerge.js";
+import Icon from "../Icon/Icon.vue";
+import LibButton from "../LibButton/LibButton.vue";
+const t = useInjectedI18n();
+const emit = defineEmits(["update:darkMode", "update:darkModeState"]);
+const $attrs = useAttrs();
+defineProps({
+  showLabel: { type: Boolean, required: false, default: true }
+});
 const {
-	darkMode,
-	cycleDarkMode,
-	darkModeState,
-} = useInjectedDarkMode()
-
-watch(darkMode, value => emit("update:darkMode", value))
-watch(darkModeState, value => emit("update:darkModeState", value))
-
+  darkMode,
+  cycleDarkMode,
+  darkModeState
+} = useInjectedDarkMode();
+watch(darkMode, (value) => emit("update:darkMode", value));
+watch(darkModeState, (value) => emit("update:darkModeState", value));
 onMounted(() => {
-	emit("update:darkMode", darkMode.value)
-})
+  emit("update:darkMode", darkMode.value);
+});
 </script>
-<script lang="ts">
-export default {
-	name: "lib-dark-mode-switcher"
-}
-type RealProps = {
-	showLabel?: boolean
-}
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<ButtonHTMLAttributes,"class" | "color" | "disabled">
-	& TailwindClassProp
-	& {
-		disabled?: boolean
-		unstyle?: boolean
-	}>,
-	RealProps
-{ }
+<script>
+export default {
+  name: "lib-dark-mode-switcher"
+};
 </script>

package/dist/runtime/components/LibDarkModeSwitcher/LibDarkModeSwitcher.vue.d.ts

@@ -0,0 +1,22 @@
+import { type ButtonHTMLAttributes } from "vue";
+import type { TailwindClassProp } from "../shared/props.js.js";
+declare const _default: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:darkMode": (value: boolean) => any;
+    "update:darkModeState": (value: "system" | "dark" | "light") => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:darkMode"?: ((value: boolean) => any) | undefined;
+    "onUpdate:darkModeState"?: ((value: "system" | "dark" | "light") => any) | undefined;
+}>, {
+    showLabel: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+type RealProps = {
+    showLabel?: boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled"> & TailwindClassProp & {
+    disabled?: boolean;
+    unstyle?: boolean;
+}>, RealProps {
+}

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

@@ -1,40 +1,19 @@
-<script setup lang="ts">
-import { getLocalTimeZone } from "@internationalized/date"
-import { computed, useAttrs } from "vue"
-
-import LibRangeDatePicker from "./LibRangeDatePicker.vue"
-import LibSingleDatePicker from "./LibSingleDatePicker.vue"
-
-import type { RangeDate,SingleDate } from "../../types/index.js"
-import { getFallbackId } from "../shared/props.js"
-
-const attrs = useAttrs()
-
-withDefaults(defineProps<{
-	showTime?: boolean
-	id?: string
-	/** The fallback suggested date when the modelValue is undefined (it will not update modelValue, it only serves as a suggestions and is used internally in the temporary value). If ignoring the time element, you should probably use the {@link createNoonTodayUtc} function (`createNonTodayUtc().toDate(())`) in the helpers, otherwise `new Date()` (the default) will do. */
-	fallbackDate?: Date
-	/** The local user's timezone, defaults to @internationalized/date's getLocalTimeZone(). */
-	timeZone?: string
-}>(), {
-	showTime: false,
-	id: undefined,
-	fallbackDate: () => new Date(),
-	timeZone: getLocalTimeZone()
-})
-const fallbackId = getFallbackId()
-
-/**
- * modelValue can be undefined or an object with start/end undefined, but it must be passed, otherwise we can't tell the difference between a single date and a range date.
- *
- * In the case of an undefined date, the current date at NOON UTC will be used to avoid the date changing.
- *
- * The @internationalized/date library's fromDate function is used internally to convert the date given (should be UTC) to the local time zone. It's converted back via it's toDate function.
- */
-const date = defineModel<SingleDate | RangeDate>({ required: true })
-const isRange = computed(() => date.value !== undefined && !(date.value instanceof Date))
-
+<script setup>
+import { getLocalTimeZone } from "@internationalized/date";
+import { computed, useAttrs } from "vue";
+import LibRangeDatePicker from "./LibRangeDatePicker.vue";
+import LibSingleDatePicker from "./LibSingleDatePicker.vue";
+import { getFallbackId } from "../shared/props.js";
+const attrs = useAttrs();
+defineProps({
+  showTime: { type: Boolean, required: false, default: false },
+  id: { type: String, required: false, default: void 0 },
+  fallbackDate: { type: Date, required: false, default: () => /* @__PURE__ */ new Date() },
+  timeZone: { type: String, required: false, default: getLocalTimeZone() }
+});
+const fallbackId = getFallbackId();
+const date = defineModel({ type: null, ...{ required: true } });
+const isRange = computed(() => date.value !== void 0 && !(date.value instanceof Date));
 </script>
 
 <template>
@@ -45,7 +24,7 @@ const isRange = computed(() => date.value !== undefined && !(date.value instance
 	:time-zone="timeZone"
 	:fallback-date="fallbackDate"
 	:is="isRange ? LibRangeDatePicker : LibSingleDatePicker"
-	v-model="date as any"
+	v-model="date"
 >
 	<template #default="slotProps">
 		<slot v-bind="slotProps"/>

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

@@ -0,0 +1,40 @@
+import type { RangeDate, SingleDate } from "../../types/index.js.js";
+type __VLS_Props = {
+    showTime?: boolean;
+    id?: string;
+    /** The fallback suggested date when the modelValue is undefined (it will not update modelValue, it only serves as a suggestions and is used internally in the temporary value). If ignoring the time element, you should probably use the {@link createNoonTodayUtc} function (`createNonTodayUtc().toDate(())`) in the helpers, otherwise `new Date()` (the default) will do. */
+    fallbackDate?: Date;
+    /** The local user's timezone, defaults to @internationalized/date's getLocalTimeZone(). */
+    timeZone?: string;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    /**
+     * modelValue can be undefined or an object with start/end undefined, but it must be passed, otherwise we can't tell the difference between a single date and a range date.
+     *
+     * In the case of an undefined date, the current date at NOON UTC will be used to avoid the date changing.
+     *
+     * The @internationalized/date library's fromDate function is used internally to convert the date given (should be UTC) to the local time zone. It's converted back via it's toDate function.
+     */
+    modelValue: SingleDate | RangeDate;
+};
+declare var __VLS_8: any;
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SingleDate | RangeDate) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SingleDate | RangeDate) => any) | undefined;
+}>, {
+    id: string;
+    fallbackDate: Date;
+    timeZone: string;
+    showTime: boolean;
+}, {}, {}, {}, 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/LibRangeDatePicker.vue

@@ -1,84 +1,55 @@
-<script setup lang="ts">
-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"
-
-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 })
-
-
-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
+<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;
 }
-
-// to avoid too deep of a watch
 watch([() => date.value.start, () => date.value.end], () => {
-	if (!justSet) {
-		updateTempDate()
-	} else {
-		justSet = false
-	}
-})
-
+  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) as any) : undefined,
-		end: tempDate.value.end ? toEmittableDate(toRaw(tempDate.value.end) as any) : undefined
-	}
-})
-
+  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, () => {
-	updateTempDate()
-})
-
-
+  updateTempDate();
+});
 const interval = setInterval(() => {
-	// update suggested date if none is set
-	if (!date.value.start) updateTempDate(["start"])
-	if (!date.value.end) updateTempDate(["end"])
-}, props.updateInterval)
-
+  if (!date.value.start) updateTempDate(["start"]);
+  if (!date.value.end) updateTempDate(["end"]);
+}, props.updateInterval);
 onBeforeUnmount(() => {
-	clearInterval(interval)
-})
-
-const locale = useInjectedLocale().timeLocale
-
-
+  clearInterval(interval);
+});
+const locale = useInjectedLocale().timeLocale;
 </script>
 
 <template>
@@ -86,7 +57,7 @@ const locale = useInjectedLocale().timeLocale
 	:id="id"
 	:locale="locale"
 	class="date-range-picker--root"
-	v-model="tempDate as DateRange"
+	v-model="tempDate"
 >
 	<DateRangePickerField
 		v-slot="{ segments }"
@@ -97,14 +68,14 @@ const locale = useInjectedLocale().timeLocale
 			data-[invalid]:border-red-500
 			metadata-input-border
 			rounded-sm
-		`, (attrs as any).class)"
+		`, attrs.class)"
 	>
 		<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')"
+			`, date.start === void 0 && 'text-neutral-400')"
 			>
 				<template
 					v-for="item in segments.start"
@@ -151,7 +122,7 @@ const locale = useInjectedLocale().timeLocale
 				date-range-picker--end-segment
 				flex
 				items-center
-			`, date.end === undefined && 'text-neutral-400')"
+			`, date.end === void 0 && 'text-neutral-400')"
 			>
 				<template
 					v-for="item in segments.end"
@@ -258,7 +229,7 @@ const locale = useInjectedLocale().timeLocale
 						outlined
 						px-1
 					"
-					:prev-page="(date: DateValue) => date.subtract({ years: 1 })"
+					:prev-page="(date2) => date2.subtract({ years: 1 })"
 				>
 					<Icon class="scale-150">
 						<i-radix-icons-double-arrow-left/>
@@ -312,7 +283,7 @@ const locale = useInjectedLocale().timeLocale
 						outlined
 						px-1
 					"
-					:next-page="(date: DateValue) => date.add({ years: 1 })"
+					:next-page="(date2) => date2.add({ years: 1 })"
 				>
 					<Icon class="scale-150">
 						<i-radix-icons-double-arrow-right/>
@@ -424,7 +395,7 @@ const locale = useInjectedLocale().timeLocale
 					</DateRangePickerGridBody>
 				</DateRangePickerGrid>
 			</div>
-			<slot v-bind="{tempValue: tempDate}"/>
+			<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;
+    };
+};