@witchcraft/ui 0.1.1 → 0.1.3

package/dist/runtime/components/LibRecorder/LibRecorder.vue

@@ -4,9 +4,8 @@
 	contenteditable=false is because of storybook, it's shortcuts interfere when not using real input elements
 	-->
 <div
-	:id="id ?? fallbackId"
-	:class="twMerge(
-  `recorder
+	:id="id?? fallbackId"
+	:class="twMerge(`recorder
 			flex items-center
 			gap-2
 			px-2
@@ -14,38 +13,37 @@
 			focus-outline-no-offset
 			rounded-sm
 		`,
-  border && `
+		border &&`
 			border
 			border-neutral-500
 			focus:border-accent-500
 		`,
-  (disabled || readonly) && `
+
+		(disabled || readonly) && `
 			text-neutral-400
 			dark:text-neutral-600
 		`,
-  (disabled || readonly) && border && `
+		(disabled || readonly) && border && `
 			bg-neutral-50
 			dark:bg-neutral-950
 			border-neutral-400
 			dark:border-neutral-600
-		`,
-  $attrs.class
-)"
+		`
+		, ($attrs as any).class)"
 	:aria-disabled="disabled"
 	:aria-readonly="readonly"
 	:tabindex="disabled ? -1 : 0"
 	:title="recording ? recordingTitle : tempValue"
 	contenteditable="false"
 	ref="recorderEl"
-	v-bind="{ ...ariaLabel, ...$attrs, class: void 0 }"
+	v-bind="{...ariaLabel, ...$attrs, class:undefined}"
 	@blur="handleBlurRecorder($event)"
 	@click="handleClickRecorder($event)"
 	@keydown.space.prevent="handleClickRecorder($event, true)"
 >
 	<!-- :aria-description="recording ? recordingTitle : ''" -->
 	<div
-		:class="twMerge(
-  `recorder--indicator
+		:class="twMerge(`recorder--indicator
 				inline-block
 				bg-red-700
 				rounded-full
@@ -54,145 +52,191 @@
 				shrink-0
 				hover:bg-red-500
 			`,
-  recording && `
+			recording && `
 				animate-[blink_1s_infinite]
 				bg-red-500
 			`,
-  (disabled || readonly) && `
+			(disabled || readonly) && `
 				bg-neutral-500
 			`
-)"
+		)"
 		ref="recorderIndicatorEl"
 	/>
 	<div class="recorder--value before:content-vertical-holder truncate">
-		{{ recording ? recordingValue ?? t("recorder.recording") : tempValue }}
+		{{ recording
+			? recordingValue ?? t("recorder.recording")
+			: tempValue }}
 	</div>
 </div>
 </template>
+<script setup lang="ts">
+import { keys } from "@alanscodelog/utils/keys.js"
+import { computed, type HTMLAttributes ,onBeforeUnmount, onMounted, type PropType, ref, watch, watchPostEffect } from "vue"
+
+import { useAriaLabel } from "../../composables/useAriaLabel.js"
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
+import { twMerge } from "../../utils/twMerge.js"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId, type LabelProps, type LinkableByIdProps,type TailwindClassProp } from "../shared/props.js"
 
-<script setup>
-import { keys } from "@alanscodelog/utils/keys.js";
-import { computed, onBeforeUnmount, onMounted, ref, watch, watchPostEffect } from "vue";
-import { useAriaLabel } from "../../composables/useAriaLabel.js";
-import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
-import { twMerge } from "../../utils/twMerge.js";
-import { baseInteractivePropsDefaults, getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "lib-recorder",
-  inheritAttrs: false
-});
-const t = useInjectedI18n();
-const emits = defineEmits(["recorder:blur", "recorder:click", "focus:parent"]);
-const fallbackId = getFallbackId();
-const props = defineProps(/* @__PURE__ */ _mergeDefaults({
-  id: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  readonly: { type: Boolean, required: false },
-  border: { type: Boolean, required: false },
-  unstyle: { type: Boolean, required: false },
-  label: { type: String, required: false },
-  recordingValue: { type: String, required: false },
-  recordingTitle: { type: String, required: false },
-  recorder: { type: null, required: false },
-  binders: { type: null, required: false }
-}, {
-  recordingTitle: "",
-  id: void 0,
-  binders: void 0,
-  recorder: void 0,
-  ...baseInteractivePropsDefaults
-}));
-const recording = defineModel("recording", { type: Boolean, ...{ required: false, default: false } });
-const modelValue = defineModel({ type: String, ...{ required: true } });
-const recorderEl = ref(null);
-const recorderIndicatorEl = ref(null);
-const canEdit = computed(() => !props.disabled && !props.readonly);
-const tempValue = ref(modelValue.value);
+	name: "lib-recorder",
+	inheritAttrs: false,
+})
+const t = useInjectedI18n()
+
+const emits = defineEmits<{
+	/** Recorder is blurred */
+	(e: "recorder:blur", $event: FocusEvent): void
+	/** Recorder is clicked. The component's indicator and recorder elements are passed to help filter out those clicks. */
+	(e: "recorder:click", { event, indicator, input }: { event: MouseEvent | KeyboardEvent, indicator: HTMLElement, input: HTMLInputElement }): void
+	/* User presses enter. Not emitted when multiple values are used. */
+	(e: "focus:parent"): void
+}>()
+const fallbackId = getFallbackId()
+const props = withDefaults(defineProps<Props>(), {
+	recordingTitle: "",
+	id: undefined,
+	binders: undefined,
+	recorder: undefined,
+	...baseInteractivePropsDefaults
+})
+/**
+ * Puts the element into recording mode if true. See {@link props.recorder}.
+ */
+const recording = defineModel<boolean>("recording", { required: false, default: false })
+
+/** The final value of the recorder. For intermediate values while recording, pass a recorder and set an appropriate recording value. */
+const modelValue = defineModel<string>({ required: true })
+
+
+const recorderEl = ref<HTMLInputElement | null>(null)
+const recorderIndicatorEl = ref<HTMLElement | null>(null)
+const canEdit = computed(() => !props.disabled && !props.readonly)
+const tempValue = ref(modelValue.value)
+
 watch([() => props.binders, () => props.binders], () => {
-  if (recording.value) {
-    throw new Error("Component was not designed to allow swapping out of binders/recorders while recording");
-  }
-});
+	if (recording.value) {
+		throw new Error("Component was not designed to allow swapping out of binders/recorders while recording")
+	}
+})
+
 watch(modelValue, () => {
-  tempValue.value = modelValue.value;
-});
-const ariaLabel = useAriaLabel(props);
-const boundListeners = {};
-let isBound = false;
-const unbindListeners = () => {
-  if (!isBound) return;
-  isBound = false;
-  if (props.recorder) {
-    for (const key of keys(boundListeners)) {
-      recorderEl.value?.removeEventListener(key, boundListeners[key]);
-      delete boundListeners[key];
-    }
-  }
-  if (props.binders && recorderEl.value) {
-    props.binders.unbind(recorderEl.value);
-  }
-};
-const bindListeners = () => {
-  if (!props.recorder && !props.binders) {
-    throw new Error("Record is true but no recorder or binders props was passed");
-  }
-  if (props.recorder && props.binders) {
-    throw new Error("Recording is true and was passed both a recorder and a binders prop. Both cannot be used at the same time.");
-  }
-  isBound = true;
-  if (props.recorder) {
-    for (const key of keys(props.recorder)) {
-      recorderEl.value?.addEventListener(key, props.recorder[key], { passive: false });
-      boundListeners[key] = props.recorder[key];
-    }
-  }
-  if (props.binders && recorderEl.value) {
-    props.binders.bind(recorderEl.value);
-  }
-};
+	tempValue.value = modelValue.value
+})
+const ariaLabel = useAriaLabel(props)
+
+const boundListeners: Record<string, any> = {}
+let isBound = false
+
+const unbindListeners = (): void => {
+	if (!isBound) return
+	isBound = false
+	if (props.recorder) {
+		for (const key of keys(boundListeners)) {
+			recorderEl.value?.removeEventListener(key, boundListeners[key])
+			delete boundListeners[key]
+		}
+	}
+	if (props.binders && recorderEl.value) {
+		props.binders.unbind(recorderEl.value as HTMLInputElement)
+	}
+}
+const bindListeners = (): void => {
+	if (!props.recorder && !props.binders) {
+		throw new Error("Record is true but no recorder or binders props was passed")
+	}
+	if (props.recorder && props.binders) {
+		throw new Error("Recording is true and was passed both a recorder and a binders prop. Both cannot be used at the same time.")
+	}
+	isBound = true
+	if (props.recorder) {
+		for (const key of keys(props.recorder)) {
+			recorderEl.value?.addEventListener(key, props.recorder[key], { passive: false })
+			boundListeners[key] = props.recorder[key]
+		}
+	}
+	if (props.binders && recorderEl.value) {
+		props.binders.bind(recorderEl.value as HTMLInputElement)
+	}
+}
+
 watchPostEffect(() => {
-  if (!canEdit.value) {
-    unbindListeners();
-    recording.value = false;
-    return;
-  }
-  if (recording.value) {
-    bindListeners();
-  } else {
-    if ((props.recorder || props.binders) && isBound) {
-      unbindListeners();
-      emits("focus:parent");
-    }
-  }
-});
+	if (!canEdit.value) {
+		unbindListeners()
+		recording.value = false
+		return
+	}
+	if (recording.value) {
+		bindListeners()
+	} else {
+		if ((props.recorder || props.binders) && isBound) {
+			unbindListeners()
+			// if we just blur the input then we can't shift+tab backwards
+			// this way we can go forwards or backwards without actually focusing since parentEl is not focusable
+			// parentEl.value?.focus()
+			emits("focus:parent")
+		}
+	}
+})
+
 onBeforeUnmount(() => {
-  unbindListeners();
-});
+	unbindListeners()
+})
 onMounted(() => {
-  if (recording.value) {
-    bindListeners();
-  }
-});
-const handleBlurRecorder = (e) => {
-  if (!canEdit.value) return;
-  if (props.recorder || props.binders) {
-    emits("recorder:blur", e);
-  }
-};
-const handleClickRecorder = (e, isSpaceKey = false) => {
-  if (!canEdit.value) return;
-  if (!recording.value) {
-    recorderEl.value?.focus();
-  }
-  if (props.recorder || props.binders) {
-    if (isSpaceKey) {
-      return;
-    }
-    emits("recorder:click", { event: e, indicator: recorderIndicatorEl.value, input: recorderEl.value });
-  }
-};
-</script>
+	if (recording.value) {
+		bindListeners()
+	}
+})
+
+const handleBlurRecorder = (e: FocusEvent): void => {
+	if (!canEdit.value) return
+	if (props.recorder || props.binders) {
+		emits("recorder:blur", e)
+	}
+}
 
-<script>
+const handleClickRecorder = (e: MouseEvent | KeyboardEvent, isSpaceKey: boolean = false): void => {
+	if (!canEdit.value) return
+	if (!recording.value) {
+		recorderEl.value?.focus()
+	}
+	// toggle if clicking on the recording indicator, otherwise only allow starting recording, so if needed, clicks can be recorded
+	if (props.recorder || props.binders) {
+		if (isSpaceKey) { return }
+		emits("recorder:click", { event: e as MouseEvent, indicator: recorderIndicatorEl.value! as HTMLElement, input: recorderEl.value! as HTMLInputElement })
+	}
+}
+
+</script>
+<script lang="ts">
+type RealProps =
+& LinkableByIdProps
+& BaseInteractiveProps
+& LabelProps
+& {
+	border?: boolean
+	/** A value to display while recording, if none given the i18n `recorder.recording` key is used. */
+	recordingValue?: string
+	/** A title to display on the input div while recording. Is also used as the aria-description. */
+	recordingTitle?: string
+	/**
+	 * The recorder object is a series of event listeners to attach to the input div while recording is started. If you need to bind directly to the element, see the `binders` prop.
+	 *
+	 * The listeners are then unbound when recording is set to false again.
+	 *
+	 * Note that the component does not handle the setting of `recording` (unless the component is disabled), `modelValue`,  or `recordingValue` at all and has no mechanism for cancelling a recording. It is left to the recorder listeners and any `recorder:*` handlers to determine what to do.
+	 */
+	recorder?: undefined | Record<string, any>
+	/** This provides a way to manually attach/remove event listeners to/from the element. It is an alternative to the `recorder` prop, see it for more details. Both cannot be specified at the same time.*/
+	binders?: undefined | { bind: (el: HTMLElement) => void, unbind: (el: HTMLElement) => void }
+	/** The id of the element. If not provided, the id will be generated automatically. */
+	id?: string
+}
 
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	RealProps
+{ }
 </script>

package/dist/runtime/components/LibRoot/LibRoot.vue

@@ -2,36 +2,34 @@
 <div :id="id"
 	tabindex="-1"
 	:class="twMerge(
-  showOutline ? 'group outlined outlined-visible' : '[&_*]:outline-hidden',
-  darkMode && ' dark',
-  $attrs['wrapperAttrs']?.class
-)"
-	v-bind="{ ...$attrs['wrapperAttrs'], attrs: void 0, class: void 0 }"
+		(showOutline ? 'group outlined outlined-visible' : '[&_*]:outline-hidden'),
+		darkMode && ' dark',
+		($attrs['wrapperAttrs'] as any)?.class
+	)"
+	v-bind="{ ...($attrs['wrapperAttrs']), attrs:undefined, class: undefined }"
 	:ref="handleRef"
 >
 	<!-- id root is useful for teleports, so they are at the topmost level where they can still be styled -->
 	<!-- See TestControls for why the margins here -->
 	<div
 		id="root"
-		v-bind="{ ...$attrs.attrs, class: void 0, wrapperAttrs: void 0 }"
-		:class="twMerge(
-  `
+		v-bind="{ ...$attrs.attrs, class: undefined, wrapperAttrs: undefined }"
+		:class="twMerge( `
 			dark:bg-fg
 			dark:text-bg
 			bg-bg
 			text-fg
 		`,
-  testWrapperMode && `
+			testWrapperMode && `
 			px-10
 			pb-10
 		`,
-  !testWrapperMode && `
+			!testWrapperMode && `
 			min-h-dvh
 			flex
 			flex-col
 		`,
-  $attrs.attrs?.class
-)"
+			($attrs as any).attrs?.class)"
 	>
 		<TestControls v-if="testWrapperMode" :show-outline="showOutline"/>
 		<Notifications v-if="useNotifications && isClientSide"/>
@@ -40,73 +38,102 @@
 </div>
 </template>
 
-<script setup>
-import { unreachable } from "@alanscodelog/utils/unreachable.js";
-import {} from "metamorphosis";
-import { computed, onBeforeUnmount, onMounted, ref, toRaw } from "vue";
-import { useAccesibilityOutline } from "../../composables/useAccesibilityOutline.js";
-import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
-import { useNotificationHandler } from "../../composables/useNotificationHandler.js";
-import { useSetupDarkMode } from "../../composables/useSetupDarkMode.js";
-import { useSetupI18n } from "../../composables/useSetupI18n.js";
-import { useSetupLocale } from "../../composables/useSetupLocale.js";
-import { useShowDevOnlyKey } from "../../composables/useShowDevOnlyKey.js";
-import { NotificationHandler } from "../../helpers/NotificationHandler.js";
-import { theme as defaultTheme } from "../../theme.js";
-import { twMerge } from "../../utils/twMerge.js";
-import Notifications from "../LibNotifications/LibNotifications.vue";
-import TestControls from "../TestControls/TestControls.vue";
-const $attrs = useDivideAttrs(["wrapper"]);
-defineOptions({ name: "root", inheritAttrs: false, suspensible: false });
-const props = defineProps({
-  theme: { type: Object, required: false, default: void 0 },
-  outline: { type: Boolean, required: false, default: true },
-  forceOutline: { type: Boolean, required: false, default: false },
-  testWrapperMode: { type: Boolean, required: false, default: false },
-  id: { type: String, required: false, default: "app" },
-  getRef: { type: Function, required: false, default: void 0 },
-  isClientSide: { type: Boolean, required: false, default: true },
-  useBuiltinTranslations: { type: Boolean, required: false, default: true },
-  useNotifications: { type: Boolean, required: false, default: true },
-  notificationHandler: { type: Object, required: false, default: void 0 }
-});
-const el = ref(null);
-function handleRef(_) {
-  if (_ !== null && !(_ instanceof HTMLElement)) unreachable();
-  el.value = _;
-  props.getRef?.(_);
+<script setup lang="ts">
+import { unreachable } from "@alanscodelog/utils/unreachable.js"
+import { type Theme } from "metamorphosis"
+import { type ComponentPublicInstance, computed, onBeforeUnmount, onMounted, ref, toRaw } from "vue"
+
+import { useAccesibilityOutline } from "../../composables/useAccesibilityOutline.js"
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
+import { useNotificationHandler } from "../../composables/useNotificationHandler.js"
+import { useSetupDarkMode } from "../../composables/useSetupDarkMode.js"
+import { useSetupI18n } from "../../composables/useSetupI18n.js"
+import { useSetupLocale } from "../../composables/useSetupLocale.js"
+import { useShowDevOnlyKey } from "../../composables/useShowDevOnlyKey.js"
+import { NotificationHandler } from "../../helpers/NotificationHandler.js"
+import { theme as defaultTheme } from "../../theme.js"
+import { twMerge } from "../../utils/twMerge.js"
+import Notifications from "../LibNotifications/LibNotifications.vue"
+import TestControls from "../TestControls/TestControls.vue"
+
+const $attrs = useDivideAttrs(["wrapper"])
+
+defineOptions({ name: "root", inheritAttrs: false, suspensible: false })
+const props = withDefaults(defineProps<{
+	theme?: Theme
+	outline?: boolean
+	forceOutline?: boolean
+	testWrapperMode?: boolean
+	id?: string
+	/** You can set a ref to the root element by passing :getRef="_ => el = _" */
+	getRef?: (el: HTMLElement | null) => void
+	/** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
+	isClientSide?: boolean
+	useBuiltinTranslations?: boolean
+	useNotifications?: boolean
+	notificationHandler?: NotificationHandler
+}>(), {
+	theme: undefined,
+	testWrapperMode: false,
+	outline: true,
+	forceOutline: false,
+	id: "app",
+	getRef: undefined,
+	isClientSide: true,
+	useBuiltinTranslations: true,
+	useNotifications: true,
+	notificationHandler: undefined
+})
+
+const el = ref<HTMLElement | null>(null)
+
+function handleRef(_: Element | ComponentPublicInstance | null): void {
+	if (_ !== null && !(_ instanceof HTMLElement)) unreachable()
+	el.value = _
+	props.getRef?.(_)
 }
+
 if (props.useNotifications) {
-  const handler = props.notificationHandler ?? new NotificationHandler();
-  useNotificationHandler(handler, props.isClientSide);
+	const handler = props.notificationHandler ?? new NotificationHandler()
+	useNotificationHandler(handler, props.isClientSide)
+}
+
+const autoOutline = useAccesibilityOutline(el).outline
+
+const showOutline = computed(() => (props.outline && autoOutline.value) || props.forceOutline)
+
+const theme = computed(() => props.theme ?? defaultTheme)
+const themeCb = (): void => {
+	toRaw(theme.value).attach(el.value!)
 }
-const autoOutline = useAccesibilityOutline(el).outline;
-const showOutline = computed(() => props.outline && autoOutline.value || props.forceOutline);
-const theme = computed(() => props.theme ?? defaultTheme);
-const themeCb = () => {
-  toRaw(theme.value).attach(el.value);
-};
 if (props.isClientSide) {
-  onMounted(() => {
-    toRaw(theme.value).on("change", themeCb);
-    themeCb();
-  });
-  onBeforeUnmount(() => {
-    toRaw(theme.value).off("change", themeCb);
-  });
+	onMounted(() => {
+		toRaw(theme.value).on("change", themeCb)
+		themeCb()
+	})
+	onBeforeUnmount(() => {
+		toRaw(theme.value).off("change", themeCb)
+	})
 }
-const darkModeSetup = useSetupDarkMode({ isClientSide: props.isClientSide });
-const darkMode = darkModeSetup.darkMode;
-useShowDevOnlyKey();
+
+const darkModeSetup = useSetupDarkMode({ isClientSide: props.isClientSide })
+
+const darkMode = darkModeSetup.darkMode
+
+useShowDevOnlyKey()
+
 defineExpose({
-  darkMode: darkModeSetup
-});
+	darkMode: darkModeSetup,
+})
+
 if (props.useBuiltinTranslations) {
-  const { languageLocale } = useSetupLocale();
-  void useSetupI18n({
-    locale: languageLocale,
-    useBuiltinTranslations: true,
-    useDummyMessageSetWhileLoading: true
-  });
+	const { languageLocale } = useSetupLocale()
+	void useSetupI18n({
+		locale: languageLocale,
+		useBuiltinTranslations: true,
+		useDummyMessageSetWhileLoading: true,
+	})
 }
+
 </script>
+

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

@@ -0,0 +1,26 @@
+import type { StoryObj } from "@storybook/vue3";
+import * as components from "../index.js.js";
+declare const meta: {
+    component: any;
+    title: string;
+    args: {
+        modelValue: string;
+        placeholder: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof components.LibSimpleInput>;
+/** Input */
+export declare const Primary: Story;
+/** Has more reasonable min-width inside a flexbox. */
+export declare const InsideAFlexbox: Story;
+export declare const Disabled: any;
+export declare const Readonly: any;
+export declare const Invalid: any;
+/**
+ * Intended for being wrapped.
+ * Should not have any border or focus outline styles.
+ */
+export declare const Borderless: any;
+export declare const Numerical: any;
+export declare const NumericalInsideAFlexbox: any;