@witchcraft/ui 0.0.1 → 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/LibColorPicker/utils/safeConvertToHsva.d.ts

@@ -0,0 +1,2 @@
+import type { HsvaColor, RgbaColor } from "../../../types/index.js.js";
+export declare function safeConvertToHsva(val: string | RgbaColor, allowAlpha: boolean): HsvaColor | undefined;

package/dist/runtime/components/LibColorPicker/utils/safeConvertToHsva.js

@@ -0,0 +1,18 @@
+import { clampNumber } from "@alanscodelog/utils/clampNumber.js";
+import Color from "colorjs.io";
+export function safeConvertToHsva(val, allowAlpha) {
+  try {
+    const color = typeof val === "string" ? new Color(val) : new Color("srgb", [val.r / 255, val.g / 255, val.b / 255], allowAlpha ? val.a : 1);
+    const hsv = color.hsv;
+    if (!hsv || hsv[1] === void 0 || hsv[2] === void 0) return void 0;
+    const final = {
+      h: clampNumber(hsv[0] ?? 0, 0, Number.MAX_SAFE_INTEGER),
+      s: clampNumber(hsv[1], 0, 100),
+      v: clampNumber(hsv[2], 0, 100),
+      a: clampNumber(allowAlpha ? color.alpha : 1, 0, 1)
+    };
+    return final;
+  } catch {
+    return void 0;
+  }
+}

package/dist/runtime/components/LibColorPicker/utils/safeConvertToRgba.d.ts

@@ -0,0 +1,2 @@
+import type { HsvaColor, RgbaColor } from "../../../types/index.js.js";
+export declare function safeConvertToRgba(val: string | HsvaColor, allowAlpha: boolean): RgbaColor | undefined;

package/dist/runtime/components/LibColorPicker/utils/safeConvertToRgba.js

@@ -0,0 +1,17 @@
+import { clampNumber } from "@alanscodelog/utils/clampNumber.js";
+import Color from "colorjs.io";
+export function safeConvertToRgba(val, allowAlpha) {
+  try {
+    const color = typeof val === "string" ? new Color(val) : new Color("hsv", [val.h, val.s, val.v], allowAlpha ? val.a : 1);
+    const rgb = color.srgb;
+    if (!rgb || rgb[0] === void 0 || rgb[1] === void 0 || rgb[2] === void 0) return void 0;
+    return {
+      r: clampNumber(rgb[0] / 1 * 255, 0, 255),
+      g: clampNumber(rgb[1] / 1 * 255, 0, 255),
+      b: clampNumber(rgb[2] / 1 * 255, 0, 255),
+      a: clampNumber(allowAlpha ? color.alpha : 1, 0, 1)
+    };
+  } catch {
+    return void 0;
+  }
+}

package/dist/runtime/components/LibColorPicker/utils/toLowPrecisionRgbaString.d.ts

@@ -0,0 +1,2 @@
+import type { RgbaColor } from "../../../main.lib.js.js";
+export declare function toLowPrecisionRgbaString(rgba: RgbaColor, withAlpha: boolean, precision: number): string;

package/dist/runtime/components/LibColorPicker/utils/toLowPrecisionRgbaString.js

@@ -0,0 +1,8 @@
+import { truncate } from "./truncate.js";
+export function toLowPrecisionRgbaString(rgba, withAlpha, precision) {
+  const r = truncate(rgba.r, precision);
+  const g = truncate(rgba.g, precision);
+  const b = truncate(rgba.b, precision);
+  const a = rgba.a !== void 0 ? truncate(rgba.a, precision) : void 0;
+  return withAlpha ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`;
+}

package/dist/runtime/components/LibColorPicker/utils/truncate.d.ts

@@ -0,0 +1 @@
+export declare function truncate(val: number, precision: number): string;

package/dist/runtime/components/LibColorPicker/utils/truncate.js

@@ -0,0 +1,5 @@
+export function truncate(val, precision) {
+  const str = val.toFixed(precision);
+  const float = parseFloat(str);
+  return float.toString();
+}

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

@@ -1,95 +1,73 @@
 <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}`)}`"
-	: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"
+			v-if="darkModeState === 'dark'"
+			class="w-[1em] flex items-center content-vertical-holder"
 		>
 			<i-fa-solid-moon/>
 		</icon>
 		<icon
-			v-else-if="darkModeState==='light'"
-			class="w-[1em]"
+			v-else-if="darkModeState === 'light'"
+			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>
-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>(), { })
-
 
+<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,67 +1,33 @@
-<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>
-<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"
 >
 	<template #default="slotProps">
 		<slot v-bind="slotProps"/>
 	</template>
-</LibRangeDatePicker>
+</component>
 </template>

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;
+    };
+};