@witchcraft/ui 0.1.3 → 0.2.1-beta.1

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

@@ -0,0 +1,77 @@
+import { type HTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+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 {
+}
+declare const _default: import("vue").DefineComponent<Props & {
+    /**
+     * Puts the element into recording mode if true. See {@link props.recorder}.
+     */
+    recording?: boolean;
+    /** The final value of the recorder. For intermediate values while recording, pass a recorder and set an appropriate recording value. */
+    modelValue: string;
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    "update:recording": (value: boolean) => any;
+} & {
+    "recorder:blur": ($event: FocusEvent) => any;
+    "recorder:click": (args_0: {
+        event: MouseEvent | KeyboardEvent;
+        indicator: HTMLElement;
+        input: HTMLInputElement;
+    }) => any;
+    "focus:parent": () => any;
+}, string, import("vue").PublicProps, Readonly<Props & {
+    /**
+     * Puts the element into recording mode if true. See {@link props.recorder}.
+     */
+    recording?: boolean;
+    /** The final value of the recorder. For intermediate values while recording, pass a recorder and set an appropriate recording value. */
+    modelValue: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:recording"?: ((value: boolean) => any) | undefined;
+    "onRecorder:blur"?: (($event: FocusEvent) => any) | undefined;
+    "onRecorder:click"?: ((args_0: {
+        event: MouseEvent | KeyboardEvent;
+        indicator: HTMLElement;
+        input: HTMLInputElement;
+    }) => any) | undefined;
+    "onFocus:parent"?: (() => any) | undefined;
+}>, {
+    id: string;
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+    recordingTitle: string;
+    recorder: Record<string, any>;
+    binders: {
+        bind: (el: HTMLElement) => void;
+        unbind: (el: HTMLElement) => void;
+    };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -2,138 +2,112 @@
 <div :id="id"
 	tabindex="-1"
 	:class="twMerge(
-		(showOutline ? 'group outlined outlined-visible' : '[&_*]:outline-hidden'),
-		darkMode && ' dark',
-		($attrs['wrapperAttrs'] as any)?.class
-	)"
-	v-bind="{ ...($attrs['wrapperAttrs']), attrs:undefined, class: undefined }"
+  showOutline ? 'group outlined outlined-visible' : '[&_*]:outline-hidden',
+  darkMode && ' dark',
+  $attrs['wrapperAttrs']?.class
+)"
+	v-bind="{ ...$attrs['wrapperAttrs'], attrs: void 0, class: void 0 }"
 	: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: undefined, wrapperAttrs: undefined }"
-		:class="twMerge( `
+		v-bind="{ ...$attrs.attrs, class: void 0, wrapperAttrs: void 0 }"
+		: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 as any).attrs?.class)"
+  $attrs.attrs?.class
+)"
 	>
 		<TestControls v-if="testWrapperMode" :show-outline="showOutline"/>
-		<Notifications v-if="useNotifications && isClientSide"/>
+		<!-- @vue-expect-error data-allow-mismatch is for vue/nuxt to allow the hydration mismatch-->
+		<Notifications v-if="useNotifications && isClientSide" data-allow-mismatch/>
 		<slot/>
 	</div>
 </div>
 </template>
 
-<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?.(_)
+<script setup>
+import { unreachable } from "@alanscodelog/utils/unreachable";
+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?.(_);
 }
-
 if (props.useNotifications) {
-	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 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 = () => {
+  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/LibRoot/LibRoot.vue.d.ts

@@ -0,0 +1,41 @@
+import { type Theme } from "metamorphosis";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js.js";
+type __VLS_Props = {
+    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;
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    darkMode: import("../../composables/useDarkMode.js.js").DarkModeState & import("../../composables/useDarkMode.js.js").DarkModeCommands;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    theme: Theme;
+    id: string;
+    useBuiltinTranslations: boolean;
+    isClientSide: boolean;
+    outline: boolean;
+    forceOutline: boolean;
+    testWrapperMode: boolean;
+    getRef: (el: HTMLElement | null) => void;
+    useNotifications: boolean;
+    notificationHandler: NotificationHandler;
+}, {}, {}, {}, 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/LibSimpleInput/LibSimpleInput.vue

@@ -1,7 +1,8 @@
 <template>
 <input
 	:id="id ?? fallbackId"
-	:class="twMerge(`
+	:class="twMerge(
+  `
 			simple-input
 			flex-1
 			grow-[999999]
@@ -27,24 +28,24 @@
 			dark:disabled:bg-neutral-950
 			dark:disabled:text-neutral-500
 		`,
-		type === `text` && `
+  type === `text` && `
 			min-w-[10ch]
 			w-full
 		`,
-		type === `number` && `
+  type === `number` && `
 			w-12
 			placeholder:text-transparent
 			appearance-none
 			pr-0
 		`,
-		border && `
+  border && `
 			border
 			border-neutral-500
 			focus:border-accent-500
 			disabled:border-neutral-400
 			dark:disabled:border-neutral-600
 		`,
-		!valid && `
+  !valid && `
 			placeholder:text-danger-700
 			border-danger-700
 			focus:border-danger-700
@@ -54,8 +55,8 @@
 			dark:placeholder:text-danger-700
 			dark:border-danger-600
 		`,
-		($attrs as any)?.class
-	)"
+  $attrs?.class
+)"
 	:data-border="border"
 	:data-invalid="!valid"
 	:type="type"
@@ -63,83 +64,47 @@
 	:disabled="disabled"
 	:readonly="readonly"
 	v-model="modelValue"
-	v-bind="{...$attrs, class:undefined, ...ariaLabel}"
+	v-bind="{ ...$attrs, class: void 0, ...ariaLabel }"
 	@keydown="handleKeydown"
-	@input="emit('input', $event as InputEvent)"
+	@input="emit('input', $event)"
 >
 </template>
 
-
-<script lang="ts" setup generic="T">
-import { type InputHTMLAttributes, useAttrs } from "vue"
-
-import { useAriaLabel } from "../../composables/useAriaLabel.js"
-import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js"
-import { hasModifiers } from "../../helpers/hasModifiers.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 { useAttrs } from "vue";
+import { useAriaLabel } from "../../composables/useAriaLabel.js";
+import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js";
+import { hasModifiers } from "../../helpers/hasModifiers.js";
+import { twMerge } from "../../utils/twMerge.js";
+import { getFallbackId } from "../shared/props.js";
 defineOptions({
-	name: "lib-simple-input",
-	inheritAttrs: false,
-})
-
-const fallbackId = getFallbackId()
-
-const props = withDefaults(defineProps<Props>(), {
-	id: "",
-	placeholder: "",
-	valid: true,
-	label: "",
-	type: undefined,
-	...baseInteractivePropsDefaults
-})
-
-const modelValue = defineModel<T>({ required: true })
-
-const emit = defineEmits<{
-	/* User presses enter.*/
-	(e: "submit", val: T): void
-	(e: "input", val: InputEvent): void
-}>()
-const $attrs = useAttrs()
-const ariaLabel = useAriaLabel(props, fallbackId)
-
-function handleKeydown(e: KeyboardEvent) {
-	if (e.key === "Enter" && !hasModifiers(e)) {
-		emit("submit", modelValue.value)
-	}
+  name: "lib-simple-input",
+  inheritAttrs: false
+});
+const fallbackId = getFallbackId();
+const props = defineProps({
+  id: { type: String, required: false, default: "" },
+  label: { type: String, required: false, default: "" },
+  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  border: { type: Boolean, required: false, default: true },
+  unstyle: { type: Boolean, required: false, default: false },
+  placeholder: { type: null, required: false, default: "" },
+  type: { type: null, required: false, default: void 0 },
+  valid: { type: Boolean, required: false, default: true }
+});
+const modelValue = defineModel({ type: null, ...{ required: true } });
+const emit = defineEmits(["submit", "input"]);
+const $attrs = useAttrs();
+const ariaLabel = useAriaLabel(props, fallbackId);
+function handleKeydown(e) {
+  if (e.key === "Enter" && !hasModifiers(e)) {
+    emit("submit", modelValue.value);
+  }
 }
-usePreHydrationValue(props.id ?? fallbackId, modelValue)
-
+usePreHydrationValue(props.id ?? fallbackId, modelValue);
 </script>
 
-<script lang="ts">
-
-type RealProps =
-	& LinkableByIdProps
-	& LabelProps
-	& BaseInteractiveProps
-	& {
-		placeholder?: InputHTMLAttributes["placeholder"]
-		disabled?: InputHTMLAttributes["disabled"]
-		id?: InputHTMLAttributes["id"]
-		type?: InputHTMLAttributes["type"]
-		valid?: boolean
-	}
+<script>
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<
-		InputHTMLAttributes,
-		| "class"
-		| "readonly"
-		| "disabled"
-		| "onSubmit"
-		| "onInput"
-	> & TailwindClassProp>,
-	RealProps
-{}
 </script>

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

@@ -0,0 +1,35 @@
+import { type InputHTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
+    placeholder?: InputHTMLAttributes["placeholder"];
+    disabled?: InputHTMLAttributes["disabled"];
+    id?: InputHTMLAttributes["id"];
+    type?: InputHTMLAttributes["type"];
+    valid?: boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSubmit" | "onInput"> & TailwindClassProp>, RealProps {
+}
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onInput?: ((val: InputEvent) => any) | undefined;
+        readonly onSubmit?: ((val: T) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onInput" | "onSubmit" | "onUpdate:modelValue"> & (Props & {
+        modelValue: T;
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {
+        (e: "submit", val: T): void;
+        (e: "input", val: InputEvent): void;
+    } & ((evt: "update:modelValue", value: T) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};