@witchcraft/ui 0.1.1 → 0.1.3

package/dist/runtime/components/LibCheckbox/LibCheckbox.vue

@@ -1,35 +1,32 @@
 <template>
 <div
-	:class="twMerge(
-  `
+	:class="twMerge(`
 		checkbox--wrapper
 		flex
 		items-center
 		gap-1
 	`,
-  $.wrapperAttrs?.class
-)"
-	v-bind="{ ...$.wrapperAttrs, class: void 0 }"
+		($.wrapperAttrs as any)?.class
+	)"
+	v-bind="{ ...$.wrapperAttrs, class: undefined }"
 	ref="el"
 >
 	<slot name="left"/>
 	<label
-		:class="twMerge(
-  `
+		:class="twMerge(`
 			checkbox--label
 			flex
 			items-center
 			gap-1
 		`,
-  $.labelAttrs?.class
-)"
-		v-bind="{ ...$.labelAttrs, class: void 0 }"
+			($.labelAttrs as any)?.class
+		)"
+		v-bind="{ ...$.labelAttrs, class: undefined }"
 		:for="id ?? fallbackId"
 	>
 		<input
 			:id="id ?? fallbackId"
-			:class="!$attrs.unstyle && twMerge(
-  `
+			:class="!($attrs as any).unstyle && twMerge(`
 				checkbox
 				focus-outline-no-offset
 				m-0
@@ -56,54 +53,83 @@
 				checked:after:bg-accent-700
 				disabled:border-neutral-500
 				disabled:checked:after:bg-neutral-700
-			`,
-  !disabled && `cursor-pointer`,
-  $.attrs.class
-)"
+			`, !disabled && `cursor-pointer`,
+				($.attrs as any).class
+			)"
 			type="checkbox"
 			:disabled="disabled"
 			ref="inputEl"
 			v-model="$value"
-			v-bind="{ ...$.attrs, class: void 0 }"
+			v-bind="{...$.attrs, class: undefined}"
 		>
 		<slot/> {{ label }}
 	</label>
 </div>
 </template>
+<script setup  lang="ts">
+import { keys } from "@alanscodelog/utils/keys.js"
+import { omit } from "@alanscodelog/utils/omit.js"
+import { pick } from "@alanscodelog/utils/pick.js"
+import type { MakeRequired } from "@alanscodelog/utils/types"
+import { computed, type HTMLAttributes, type InputHTMLAttributes,type PropType, ref, useAttrs, useSlots } from "vue"
+
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
+import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js"
+import { twMerge } from "../../utils/twMerge.js"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
 
-<script setup>
-import { keys } from "@alanscodelog/utils/keys.js";
-import { omit } from "@alanscodelog/utils/omit.js";
-import { pick } from "@alanscodelog/utils/pick.js";
-import { computed, ref, useAttrs, useSlots } from "vue";
-import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
-import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js";
-import { twMerge } from "../../utils/twMerge.js";
-import { baseInteractivePropsDefaults, getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "lib-checkbox",
-  inheritAttrs: false
-});
-const $ = useDivideAttrs(["label", "wrapper"]);
-const $slots = useSlots();
-const fallbackId = getFallbackId();
-const props = defineProps(/* @__PURE__ */ _mergeDefaults({
-  id: { type: String, required: false },
-  label: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  readonly: { type: Boolean, required: false },
-  border: { type: Boolean, required: false },
-  unstyle: { type: Boolean, required: false }
-}, {
-  ...baseInteractivePropsDefaults
-}));
-const emits = defineEmits(["submit"]);
-const el = ref(null);
-const inputEl = ref(null);
-const $value = defineModel("modelValue", { type: Boolean, ...{ default: false } });
-usePreHydrationValue(props.id ?? fallbackId, $value);
+	name: "lib-checkbox",
+	inheritAttrs: false,
+})
+
+const $ = useDivideAttrs(["label", "wrapper"])
+const $slots = useSlots()
+/* todo multi states */
+
+const fallbackId = getFallbackId()
+const props = withDefaults(defineProps<Props>(), {
+	...baseInteractivePropsDefaults,
+})
+
+
+const emits = defineEmits<{
+	/* User presses enter.*/
+	(e: "submit", val: boolean): void
+}>()
+
+const el = ref<null | HTMLElement>(null)
+const inputEl = ref<null | HTMLElement>(null)
+const $value = defineModel<boolean>("modelValue", { default: false })
+
+usePreHydrationValue(props.id ?? fallbackId, $value)
 </script>
 
-<script>
+<script lang="ts">
+
+type WrapperTypes = Partial<WrapperProps<"label",HTMLAttributes, {
+	/** Tailwind classes. */
+	class?: string
+}>>
+
+type RealProps =
+
+	& LinkableByIdProps
+	& LabelProps
+	& BaseInteractiveProps
+	& {
+		unstyle?: boolean
+	}
 
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<
+		InputHTMLAttributes,
+		"class" | "readonly" | "disabled" | "onSumbit"
+	> & TailwindClassProp>,
+	/** @vue-ignore */
+	WrapperTypes,
+	RealProps
+{}
 </script>

package/dist/runtime/components/LibColorInput/LibColorInput.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import LibColorInput from "./LibColorInput.vue.js";
+declare const meta: Meta<typeof LibColorInput>;
+export default meta;
+type Story = StoryObj<typeof LibColorInput>;
+export declare const Primary: Story;
+export declare const DoesNotAllowAlpha: Story;

package/dist/runtime/components/LibColorInput/LibColorInput.stories.js

@@ -0,0 +1,58 @@
+import { ref } from "vue";
+import LibColorInput from "./LibColorInput.vue";
+import * as components from "../index.js";
+const meta = {
+  component: LibColorInput,
+  title: "Components/ColorInput",
+  args: {}
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components,
+    setup: () => {
+      const color = ref({
+        r: 0,
+        g: 0,
+        b: 0
+        /* , a: 0.5 */
+      });
+      const handleChange = (e) => {
+        color.value = { ...e };
+      };
+      return {
+        args: {
+          outline: false,
+          color,
+          allowAlpha: true,
+          ...args
+        },
+        handleChange
+      };
+    },
+    template: `
+			<lib-color-Input
+				:allowAlpha="args.allowAlpha"
+				:modelValue="args.color.value"
+				@update:modelValue="handleChange"
+			>
+ 			</lib-color-Input>
+			Stretched:
+			<div class="flex-1 flex">
+				<lib-color-Input
+					class="flex-1"
+					:allowAlpha="args.allowAlpha"
+					:modelValue="args.color.value"
+					@update:modelValue="handleChange"
+				>
+				</lib-color-Input>
+			</div>
+		`
+  })
+};
+export const DoesNotAllowAlpha = {
+  ...Primary,
+  args: {
+    allowAlpha: false
+  }
+};

package/dist/runtime/components/LibColorInput/LibColorInput.vue

@@ -2,10 +2,9 @@
 <lib-popup
 	class="color-input--popup"
 	v-model="showPopup"
-	@close="$tempValue = void 0;
-  emit('cancel')"
+	@close="$tempValue = undefined;emit('cancel')"
 >
-	<template #button="{ extractEl }">
+	<template #button="{extractEl}">
 		<!-- <div -->
 		<!-- 		class=" -->
 		<!-- 	flex -->
@@ -18,8 +17,7 @@
 		<!--  -->
 		<lib-button
 			:id="id ?? fallbackId"
-			:class="twMerge(
-  `
+			:class="twMerge(`
 				p-0
 				color-input--button
 				flex flex-nowrap
@@ -29,11 +27,11 @@
 				[&_.button--label]:gap-0
 				after:hidden
 			`,
-  $attrs.class
-)"
+				($attrs as any).class
+			)"
 			:aria-label="t('color-input.aria-and-title-prefix') + stringColor"
 			:title="t('color-input.aria-and-title-prefix') + stringColor"
-			v-bind="{ ...$attrs, class: void 0 }"
+			v-bind="{...$attrs, class: undefined}"
 			v-extract-root-el="extractEl"
 			@click="togglePopup"
 		>
@@ -44,14 +42,14 @@
 					w-full
 				"
 				>
-					<slot v-bind="{ stringColor, classes: 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"
@@ -62,7 +60,7 @@
 			</template>
 		</lib-button>
 	</template>
-	<template #popup="{ extractEl }">
+	<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"
@@ -79,19 +77,24 @@
 </lib-popup>
 </template>
 
-<script setup>
-import Color from "colorjs.io";
-import { computed, ref, useAttrs } from "vue";
-import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
-import { vExtractRootEl } from "../../directives/vExtractRootEl.js";
-import { twMerge } from "../../utils/twMerge.js";
-import LibButton from "../LibButton/LibButton.vue";
-import LibColorPicker from "../LibColorPicker/LibColorPicker.vue";
-import LibPopup from "../LibPopup/LibPopup.vue";
-import { getFallbackId } from "../shared/props.js";
+<script setup lang="ts">
+import Color from "colorjs.io"
+import { type ButtonHTMLAttributes,computed, type PropType, ref, useAttrs } from "vue"
+
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
+import { vExtractRootEl } from "../../directives/vExtractRootEl.js"
+import type { HsvaColor, RgbaColor } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+import LibButton from "../LibButton/LibButton.vue"
+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: "lib-color-input",
+})
+
 const swatchClasses = `
 	color-input--swatch
 	after:content-vertical-holder
@@ -103,53 +106,94 @@ const swatchClasses = `
 	before:inset-0
 	before:bg-transparency-squares
 	before:z-[-1]
-`;
-const fallbackId = getFallbackId();
-const t = useInjectedI18n();
-const props = defineProps({
-  label: { type: String, required: false },
-  id: { type: String, required: false },
-  allowAlpha: { type: Boolean, required: false, default: true },
-  border: { type: Boolean, required: false, default: true },
-  copyTransform: { type: Function, required: false, default: (_val, stringVal) => stringVal },
-  stringPrecision: { type: Number, required: false, default: 3 },
-  customRepresentation: { type: Object, required: false, default: void 0 }
-});
-const emit = defineEmits(["save", "cancel"]);
+`
+
+const fallbackId = getFallbackId()
+
+const t = useInjectedI18n()
+const props = withDefaults(defineProps<Props>(), {
+	allowAlpha: true,
+	border: true,
+	copyTransform: (_val: HsvaColor, stringVal: string) => stringVal,
+	stringPrecision: 3,
+	customRepresentation: undefined,
+})
+const emit = defineEmits<{
+	(e: "save"): void
+	(e: "cancel"): void
+}>()
+
+
 function save() {
-  $value.value = internalTempValue.value;
-  showPopup.value = false;
-  $tempValue.value = void 0;
-  emit("save");
+	$value.value = internalTempValue.value
+	showPopup.value = false
+	$tempValue.value = undefined
+	emit("save")
 }
 function cancel() {
-  showPopup.value = false;
-  $tempValue.value = void 0;
-  emit("cancel");
+	showPopup.value = false
+	$tempValue.value = undefined
+	emit("cancel")
 }
-const $attrs = useAttrs();
-const $value = defineModel({ type: Object, ...{ required: false, default: () => ({ r: 0, g: 0, b: 0 }) } });
-const $tempValue = defineModel("tempValue", { type: null, ...{ required: false, default: () => void 0 } });
+
+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.r / 255,
+	$value.value.g / 255,
+	$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 internalTempValue = ref({ ...$value.value });
-const showPopup = ref(false);
-const togglePopup = () => {
-  if (showPopup.value) {
-    $value.value = internalTempValue.value;
-  }
-  showPopup.value = !showPopup.value;
-};
+	$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>
+<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
+	}
+}
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<ButtonHTMLAttributes,"class">
+	& TailwindClassProp
+	& {
+		// why is this not already a part of button?
+		"aria-label": string
+	}>,
+	RealProps
+{}
 </script>
+

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import LibColorPicker from "./LibColorPicker.vue.js";
+declare const meta: Meta<typeof LibColorPicker>;
+export default meta;
+type Story = StoryObj<typeof LibColorPicker>;
+export declare const Primary: Story;
+export declare const DoesNotAllowAlpha: Story;
+export declare const WithExistingValue: Story;
+export declare const CustomStringRepresentation: Story;

package/dist/runtime/components/LibColorPicker/LibColorPicker.stories.js

@@ -0,0 +1,68 @@
+import Color from "colorjs.io";
+import { ref } from "vue";
+import LibColorPicker from "./LibColorPicker.vue";
+import * as components from "../index.js";
+const meta = {
+  component: LibColorPicker,
+  title: "Components/ColorPicker",
+  args: {}
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components,
+    setup: () => {
+      const color = ref({ r: 0, g: 0, b: 0, ...args.modelValue });
+      delete args.modelValue;
+      const handleChange = (e) => {
+        color.value = { ...e };
+      };
+      return {
+        args: {
+          outline: false,
+          color,
+          allowAlpha: true,
+          ...args
+        },
+        handleChange
+      };
+    },
+    template: `
+			<lib-root :outline="args.outline">
+	 		{{args.color}}
+	 		<lib-color-picker
+	 			:modelValue="args.color.value"
+				v-bind="args"
+	 			@update:modelValue="handleChange"
+	 		>
+	 		</lib-color-picker>
+	 		</lib-root>
+		`
+  })
+};
+export const DoesNotAllowAlpha = {
+  ...Primary,
+  args: {
+    allowAlpha: false
+  }
+};
+export const WithExistingValue = {
+  ...Primary,
+  args: {
+    modelValue: { r: 255, g: 0, b: 0 }
+  }
+};
+export const CustomStringRepresentation = {
+  ...Primary,
+  args: {
+    allowAlpha: false,
+    customRepresentation: {
+      fromHsvaToString: (hsva, includeAlpha) => new Color(
+        "hsv",
+        [hsva.h, hsva.s, hsva.v],
+        includeAlpha ? hsva.a : 1
+        // this takes care of the correct hex format
+      ).toString({ format: "hex" })
+    }
+  }
+};