@witchcraft/ui 0.2.1-beta.3 → 0.2.2

package/src/runtime/components/LibCheckbox/LibCheckbox.vue

@@ -60,37 +60,36 @@
 			:disabled="disabled"
 			ref="inputEl"
 			v-model="$value"
-			v-bind="{...$.attrs, class: undefined}"
+			v-bind="{ ...$.attrs, class: undefined }"
 		>
 		<slot/> {{ label }}
 	</label>
 </div>
 </template>
+
 <script setup  lang="ts">
-import { type HTMLAttributes, type InputHTMLAttributes,ref, useSlots } from "vue"
+import { type HTMLAttributes, type InputHTMLAttributes, ref } from "vue"
 
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
 import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js"
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
+import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
 
 defineOptions({
-	name: "lib-checkbox",
-	inheritAttrs: false,
+	name: "LibCheckbox",
+	inheritAttrs: false
 })
 
 const $ = useDivideAttrs(["label", "wrapper"])
-const $slots = useSlots()
 /* todo multi states */
 
 const fallbackId = getFallbackId()
 const props = withDefaults(defineProps<Props>(), {
-	unstyle: false, disabled: false, readonly: false, border: true,
+	unstyle: false, disabled: false, readonly: false, border: true
 })
 
-
-const emits = defineEmits<{
-	/* User presses enter.*/
+/* const emits =  */defineEmits<{
+	/* User presses enter. */
 	(e: "submit", val: boolean): void
 }>()
 
@@ -102,20 +101,19 @@ usePreHydrationValue(props.id ?? fallbackId, $value)
 </script>
 
 <script lang="ts">
-
-type WrapperTypes = Partial<WrapperProps<"label",HTMLAttributes, {
+type WrapperTypes = Partial<WrapperProps<"label", HTMLAttributes, {
 	/** Tailwind classes. */
 	class?: string
 }>>
 
-type RealProps =
+type RealProps
 
-	& LinkableByIdProps
-	& LabelProps
-	& BaseInteractiveProps
-	& {
-		unstyle?: boolean
-	}
+	= & LinkableByIdProps
+		& LabelProps
+		& BaseInteractiveProps
+		& {
+			unstyle?: boolean
+		}
 
 interface Props
 	extends

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

@@ -4,22 +4,19 @@ import { ref } from "vue"
 
 import LibColorInput from "./LibColorInput.vue"
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof LibColorInput> = {
 	component: LibColorInput,
 	title: "Components/ColorInput",
 	args: {
-		
-	},
+
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof LibColorInput>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -33,9 +30,9 @@ export const Primary: Story = {
 					outline: false,
 					color,
 					allowAlpha: true,
-					...args,
+					...args
 				},
-				handleChange,
+				handleChange
 			}
 		},
 		template: `
@@ -55,15 +52,13 @@ export const Primary: Story = {
 				>
 				</lib-color-Input>
 			</div>
-		`,
-	}),
+		`
+	})
 }
 
-
 export const DoesNotAllowAlpha: Story = {
 	...Primary,
 	args: {
-		allowAlpha: false,
-	},
+		allowAlpha: false
+	}
 }
-

package/src/runtime/components/LibColorInput/LibColorInput.vue

@@ -4,7 +4,7 @@
 	v-model="showPopup"
 	@close="$tempValue = undefined;emit('cancel')"
 >
-	<template #button="{extractEl}">
+	<template #button="{ extractEl }">
 		<!-- <div -->
 		<!-- 		class=" -->
 		<!-- 	flex -->
@@ -13,7 +13,7 @@
 		<!-- 				 " -->
 		<!-- 	v-extract-root-el="extractEl" -->
 		<!-- > -->
-			
+
 		<!--  -->
 		<lib-button
 			:id="id ?? fallbackId"
@@ -31,28 +31,31 @@
 			)"
 			:aria-label="t('color-input.aria-and-title-prefix') + stringColor"
 			:title="t('color-input.aria-and-title-prefix') + stringColor"
-			v-bind="{...$attrs, class: undefined}"
+			v-bind="{ ...$attrs, class: undefined }"
 			v-extract-root-el="extractEl"
 			@click="togglePopup"
 		>
 			<template #label>
-				<div class="
+				<div
+					class="
 					color-input--swatch-wrapper
 					flex
 					w-full
 				"
 				>
-					<slot v-bind="{stringColor, classes:swatchClasses}">
-						<div :class="swatchClasses"
+					<slot v-bind="{ stringColor, classes: swatchClasses }">
+						<div
+							:class="swatchClasses"
 							:style="`background:${stringColor}`"
 						/>
 					</slot>
 					<slot
 						v-if="$tempValue"
-						v-bind="{tempStringColor, classes:swatchClasses}"
+						v-bind="{ tempStringColor, classes: swatchClasses }"
 						name="temp"
 					>
-						<div :class="swatchClasses"
+						<div
+							:class="swatchClasses"
 							:style="`background:${tempStringColor}`"
 						/>
 					</slot>
@@ -60,9 +63,13 @@
 			</template>
 		</lib-button>
 	</template>
-	<template #popup="{extractEl}">
-		<div class="color-input--popup-wrapper p-5" v-extract-root-el="extractEl">
-			<lib-color-picker v-if="showPopup"
+	<template #popup="{ extractEl }">
+		<div
+			class="color-input--popup-wrapper p-5"
+			v-extract-root-el="extractEl"
+		>
+			<lib-color-picker
+				v-if="showPopup"
 				:id="id ?? fallbackId"
 				:allow-alpha="allowAlpha"
 				:custom-representation="customRepresentation"
@@ -79,7 +86,7 @@
 
 <script setup lang="ts">
 import Color from "colorjs.io"
-import { type ButtonHTMLAttributes,computed, type PropType, ref, useAttrs } from "vue"
+import { type ButtonHTMLAttributes, computed, ref, useAttrs } from "vue"
 
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
 import { vExtractRootEl } from "../../directives/vExtractRootEl.js"
@@ -90,9 +97,8 @@ import LibColorPicker from "../LibColorPicker/LibColorPicker.vue"
 import LibPopup from "../LibPopup/LibPopup.vue"
 import { getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
 
-
 defineOptions({
-	name: "lib-color-input",
+	name: "LibColorInput"
 })
 
 const swatchClasses = `
@@ -111,19 +117,18 @@ const swatchClasses = `
 const fallbackId = getFallbackId()
 
 const t = useInjectedI18n()
-const props = withDefaults(defineProps<Props>(), {
+/* const props =  */withDefaults(defineProps<Props>(), {
 	allowAlpha: true,
 	border: true,
 	copyTransform: (_val: HsvaColor, stringVal: string) => stringVal,
 	stringPrecision: 3,
-	customRepresentation: undefined,
+	customRepresentation: undefined
 })
 const emit = defineEmits<{
 	(e: "save"): void
 	(e: "cancel"): void
 }>()
 
-
 function save() {
 	$value.value = internalTempValue.value
 	showPopup.value = false
@@ -137,63 +142,62 @@ function cancel() {
 }
 
 const $attrs = useAttrs()
- 
+
 const $value = defineModel<RgbaColor>({ required: false, default: () => ({ r: 0, g: 0, b: 0 }) })
 const $tempValue = defineModel<RgbaColor | undefined>("tempValue", { required: false, default: () => (undefined) })
 
 const stringColor = computed(() => new Color("srgb", [
 	$value.value.r / 255,
 	$value.value.g / 255,
-	$value.value.b / 255,
-], $value.value.a ?? 1,).toString())
+	$value.value.b / 255
+], $value.value.a ?? 1).toString())
 
-const tempStringColor = computed(() => $tempValue.value ? new Color("srgb", [
-	$tempValue.value.r / 255,
-	$tempValue.value.g / 255,
-	$tempValue.value.b / 255,
-], $tempValue.value.a ?? 1,).toString() : "")
+const tempStringColor = computed(() => $tempValue.value
+	? new Color("srgb", [
+			$tempValue.value.r / 255,
+			$tempValue.value.g / 255,
+			$tempValue.value.b / 255
+		], $tempValue.value.a ?? 1).toString()
+	: "")
 
 const internalTempValue = ref({ ...$value.value })
 
 const showPopup = ref(false)
 
-
 const togglePopup = (): void => {
 	if (showPopup.value) {
 		$value.value = internalTempValue.value
 	}
 	showPopup.value = !showPopup.value
 }
-
 </script>
 
 <script lang="ts">
-
-type RealProps =
-& LabelProps
-& LinkableByIdProps
-& {
-	allowAlpha?: boolean
-	border?: boolean
-	/** See ColorPicker.copyTransform */
-	copyTransform?: (val: HsvaColor, stringVal: string) => any
-	/** See ColorPicker.allowAlpha */
-	stringPrecision?: number
-	/** See ColorPicker.customRepresentation */
-	customRepresentation?: {
-		fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string
-	}
-}
+type RealProps
+	= & LabelProps
+		& LinkableByIdProps
+		& {
+			allowAlpha?: boolean
+			border?: boolean
+			/** See ColorPicker.copyTransform */
+			copyTransform?: (val: HsvaColor, stringVal: string) => any
+			/** See ColorPicker.allowAlpha */
+			stringPrecision?: number
+			/** See ColorPicker.customRepresentation */
+			customRepresentation?: {
+				fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string
+			}
+		}
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<ButtonHTMLAttributes,"class">
+	Partial<Omit<ButtonHTMLAttributes, "class">
 	& TailwindClassProp
 	& {
 		// why is this not already a part of button?
+		// eslint-disable-next-line @typescript-eslint/naming-convention
 		"aria-label": string
 	}>,
 	RealProps
 {}
 </script>
-

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

@@ -5,22 +5,19 @@ import { ref } from "vue"
 
 import LibColorPicker from "./LibColorPicker.vue"
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof LibColorPicker> = {
 	component: LibColorPicker,
 	title: "Components/ColorPicker",
 	args: {
-		
-	},
+
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof LibColorPicker>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -35,9 +32,9 @@ export const Primary: Story = {
 					outline: false,
 					color,
 					allowAlpha: true,
-					...args,
+					...args
 				},
-				handleChange,
+				handleChange
 			}
 		},
 		template: `
@@ -50,20 +47,20 @@ export const Primary: Story = {
 	 		>
 	 		</lib-color-picker>
 	 		</lib-root>
-		`,
-	}),
+		`
+	})
 }
 export const DoesNotAllowAlpha: Story = {
 	...Primary,
 	args: {
-		allowAlpha: false,
-	},
+		allowAlpha: false
+	}
 }
 export const WithExistingValue: Story = {
 	...Primary,
 	args: {
-		modelValue: { r: 255, g: 0, b: 0 },
-	},
+		modelValue: { r: 255, g: 0, b: 0 }
+	}
 }
 export const CustomStringRepresentation: Story = {
 	...Primary,
@@ -73,9 +70,8 @@ export const CustomStringRepresentation: Story = {
 			fromHsvaToString: (hsva: any, includeAlpha: boolean) => new Color(
 				"hsv",
 				[hsva.h, hsva.s, hsva.v],
-					includeAlpha ? hsva.a : 1 // this takes care of the correct hex format
-			).toString({ format: "hex" }),
-		},
-	},
+				includeAlpha ? hsva.a : 1 // this takes care of the correct hex format
+			).toString({ format: "hex" })
+		}
+	}
 }
-

package/src/runtime/components/LibColorPicker/LibColorPicker.vue

@@ -113,7 +113,8 @@
 		/>
 	</div>
 	<div class="color-picker--footer flex w-full flex-1 gap-2">
-		<div class=" color-picker--preview-wrapper
+		<div
+			class=" color-picker--preview-wrapper
 				bg-transparency-squares
 				relative
 				aspect-square
@@ -122,7 +123,8 @@
 				shadow-xs
 			"
 		>
-			<div class="
+			<div
+				class="
 					color-picker--footer--preview
 					size-full
 					rounded-full
@@ -143,7 +145,11 @@
 					@input="parseInput"
 					@blur="onBlurFixInvalidValue"
 				/>
-				<lib-button class="color-picker--copy-button" :aria-label="t('copy')" @click="copy(copyTransform?.(localColor.val, localColorString) ?? localColorString)">
+				<lib-button
+					class="color-picker--copy-button"
+					:aria-label="t('copy')"
+					@click="copy(copyTransform?.(localColor.val, localColorString) ?? localColorString)"
+				>
 					<icon><i-fa6-regular-copy/></icon>
 				</lib-button>
 			</slot>
@@ -171,11 +177,10 @@
 <script setup lang="ts">
 /* todo change to colorjsio for less dependencies */
 import { castType } from "@alanscodelog/utils/castType"
-import { clampNumber } from "@alanscodelog/utils/clampNumber"
 import { isArray } from "@alanscodelog/utils/isArray"
 import { unreachable } from "@alanscodelog/utils/unreachable"
 import Color from "colorjs.io"
-import { computed, onMounted, reactive, type Ref, ref, type UnwrapRef,useAttrs, watch } from "vue"
+import { computed, onMounted, reactive, type Ref, ref, type UnwrapRef, useAttrs, watch } from "vue"
 
 import { safeConvertToHsva } from "./utils/safeConvertToHsva.js"
 import { safeConvertToRgba } from "./utils/safeConvertToRgba.js"
@@ -187,14 +192,13 @@ import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
 import { copy } from "../../helpers/copy.js"
 import type { HsvaColor, RgbaColor } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import aria from "../Aria/Aria.vue"
 import Icon from "../Icon/Icon.vue"
 import LibButton from "../LibButton/LibButton.vue"
 import LibSimpleInput from "../LibSimpleInput/LibSimpleInput.vue"
-import { getFallbackId, type LabelProps , type LinkableByIdProps } from "../shared/props.js"
+import { getFallbackId, type LabelProps, type LinkableByIdProps } from "../shared/props.js"
 
 defineOptions({
-	name: "lib-color-picker",
+	name: "LibColorPicker"
 })
 
 const $attrs = useAttrs()
@@ -231,37 +235,36 @@ const emits = defineEmits<{
 }>()
 
 const props = withDefaults(defineProps<
-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
-}>(), {
+	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
+	}>(), {
 	allowAlpha: true,
 	border: true,
 	stringPrecision: 3,
 	copyTransform: (_val: HsvaColor, stringVal: string) => stringVal,
 	customRepresentation: undefined,
-	valid: true,
+	valid: true
 })
 
-
 const ariaDescription = t("color-picker.aria.description")
 const fallbackId = getFallbackId()
 
@@ -284,32 +287,31 @@ const config: Config = {
 	hue: {
 		el: hueSliderEl as Ref<HTMLCanvasElement>,
 		xKey: "h",
-		xSteps: 360,
+		xSteps: 360
 	},
 	alpha: {
 		el: alphaSliderEl as Ref<HTMLCanvasElement>,
 		xSteps: 1,
-		xKey: "a",
+		xKey: "a"
 	},
 	all: {
 		el: pickerEl as Ref<HTMLCanvasElement>,
 		xSteps: 100,
 		ySteps: 100,
 		xKey: "s",
-		yKey: "v",
-	},
+		yKey: "v"
+	}
 }
 
 const localColor = reactive<Record<"percent" | "val", HsvaColor>>({
 	percent: {
-		h: 0, s: 0, v: 0, a: 0,
+		h: 0, s: 0, v: 0, a: 0
 	},
 	val: {
-		h: 0, s: 0, v: 0, a: 0,
-	},
+		h: 0, s: 0, v: 0, a: 0
+	}
 })
 
-
 const asRgba = computed(() => {
 	const rgba = safeConvertToRgba(localColor.val, props.allowAlpha)
 	if (!rgba) unreachable()
@@ -347,7 +349,6 @@ function updatePicker(el: HTMLCanvasElement, hue: number): void {
 	gradientColor.addColorStop(0, `hsla(${hue} 100% 50% / 0)`)
 	gradientColor.addColorStop(1, `hsla(${hue} 100% 50% /1)`)
 
-
 	ctx.fillStyle = gradient
 	ctx.fillRect(0, 0, width, height)
 	ctx.fillStyle = gradientColor
@@ -375,7 +376,6 @@ function updateSlider(el: HTMLCanvasElement, stops: ((i: number) => string) | st
 	ctx.fillRect(0, 0, width, height)
 }
 
-
 function getVal(x: number, width: number, steps: number = 100, accuracy: number = 100, reverse = false): { val: number, percent: number } {
 	const percent = (x / width)
 	const unrounded = percent * steps
@@ -427,8 +427,8 @@ const slider = {
 				const { x, y, width, height } = e.target.getBoundingClientRect()
 				let xDiff = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0
 				let yDiff = e.key === "ArrowUp" ? -1 : e.key === "ArrowDown" ? 1 : 0
-				if (e.shiftKey) {xDiff *= 10}
-				if (e.shiftKey) {yDiff *= 10}
+				if (e.shiftKey) { xDiff *= 10 }
+				if (e.shiftKey) { yDiff *= 10 }
 				moveHandle({ clientX: x + (width / 2) + xDiff, clientY: y + (height / 2) + yDiff }, type)
 			}
 			if (e.key === "Enter") {
@@ -466,7 +466,7 @@ const slider = {
 		elDragging.value = ""
 		document.removeEventListener("pointermove", slider.pointermove)
 		document.removeEventListener("pointerup", slider.pointerup)
-	},
+	}
 }
 function updateSliders(_: HsvaColor): void {
 	if (alphaSliderEl.value) {
@@ -486,12 +486,12 @@ function updateValueAndPosition(_: HsvaColor): void {
 	localColor.percent.h = Math.round((_.h / 360) * 10000) / 100
 	localColor.percent.s = _.s
 	localColor.percent.v = 100 - _.v
-	localColor.percent.a =
-		props.allowAlpha
-		? _.a !== undefined
-			? _.a * 100
+	localColor.percent.a
+		= props.allowAlpha
+			? _.a !== undefined
+				? _.a * 100
+				: 1
 			: 1
-		: 1
 	localColor.val = { ..._, a: props.allowAlpha ? _.a : 1 }
 }
 
@@ -511,7 +511,6 @@ function save(): void {
 	emits("save", rgba)
 }
 
-
 function parseInput(e: Event): void {
 	const val = (e.target as HTMLInputElement)?.value
 	const converted = props.customRepresentation?.fromStringToHsva
@@ -523,7 +522,6 @@ function parseInput(e: Event): void {
 	}
 }
 
-
 let disableUpdateTempValue = false
 
 onMounted(() => {

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

@@ -14,11 +14,10 @@ export function safeConvertToHsva(val: string | RgbaColor, allowAlpha: boolean):
 			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),
+			a: clampNumber(allowAlpha ? color.alpha : 1, 0, 1)
 		}
 		return final
 	} catch {
 		return undefined
 	}
 }
-

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

@@ -14,10 +14,9 @@ export function safeConvertToRgba(val: string | HsvaColor, allowAlpha: boolean):
 			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),
+			a: clampNumber(allowAlpha ? color.alpha : 1, 0, 1)
 		}
 	} catch {
 		return undefined
 	}
 }
-

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

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