@witchcraft/ui 0.1.3 → 0.2.1-beta.1

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

@@ -0,0 +1,46 @@
+import { type HTMLAttributes } from "vue";
+import { type LinkableByIdProps, type TailwindClassProp, type PopupProps } from "../shared/props.js.js";
+import type { IPopupReference, PopupPositioner } from "../../types/index.js.js";
+type RealProps = LinkableByIdProps & PopupProps;
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
+    modelValue?: boolean;
+}, {
+    recompute: (force?: boolean) => void;
+    setReference: (el: IPopupReference | null) => void;
+    setBackground: (el: IPopupReference | null) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<Props & {
+    modelValue?: boolean;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    canClose: boolean;
+    useDialogForBackdrop: false;
+    useBackdrop: boolean;
+    preferredHorizontal: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | PopupPositioner;
+    preferredVertical: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | PopupPositioner;
+    avoidRepositioning: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    button?: (props: {
+        extractEl: (_: any) => any;
+    }) => any;
+} & {
+    popup?: (props: {
+        position: any;
+        extractEl: (_: any) => any;
+    }) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibProgressBar/LibProgressBar.vue

@@ -35,17 +35,17 @@
 			before:transition-all
 			before:z-1
 			before:duration-500
-		`,psuedoHide && `
+		`, psuedoHide && `
 			after:opacity-0
 			before:opacity-0
-		`, ($attrs as any).class)"
+		`, $attrs.class)"
 		:data-value="progress"
 		:title="label"
 		role="progressbar"
 		:aria-valuenow="clampVal(progress, clamp[0] ?? 0, clamp[1] ?? 100)"
 		:aria-valuemin="clamp[0] ?? 0"
 		:aria-valuemax="clamp[1] ?? 100"
-		v-bind="{...$attrs, class:undefined}"
+		v-bind="{ ...$attrs, class: void 0 }"
 		:style="`--progress: ${clampVal(progress, clamp[0] ?? 0, clamp[1] ?? 100)}%;`"
 	>
 		<div class="procgress-bar--label-wrapper relative flex-1">
@@ -93,101 +93,75 @@
 	</div>
 </Transition>
 </template>
-<script setup  lang="ts">
-import { type HTMLAttributes,type PropType, ref, watch } from "vue"
-
-import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults,getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
-
-// TODO move to utils
-const clampVal = (n: number, min: number, max: number) => Math.min(Math.max(n, min), max)
 
+<script setup>
+import { ref, watch } from "vue";
+import { twMerge } from "../../utils/twMerge.js";
+import { getFallbackId } from "../shared/props.js";
+const clampVal = (n, min, max) => Math.min(Math.max(n, min), max);
 defineOptions({
-	name: "lib-progress-bar",
-	inheritAttrs: false,
-})
-const fallbackId = getFallbackId()
-const props = withDefaults(defineProps<Props>(), {
-	autohideOnComplete: -1,
-	keepSpaceWhenHidden: false,
-	clamp: () => [0, 100],
-	...baseInteractivePropsDefaults
-})
-const hide = ref<boolean>(false)
-const psuedoHide = ref<boolean>(false)
-let timeout: number
-let type: number
+  name: "lib-progress-bar",
+  inheritAttrs: false
+});
+const fallbackId = getFallbackId();
+const props = defineProps({
+  id: { type: String, required: false },
+  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 },
+  label: { type: String, required: false },
+  progress: { type: Number, required: true },
+  autohideOnComplete: { type: Number, required: false, default: -1 },
+  keepSpaceWhenHidden: { type: Boolean, required: false, default: false },
+  clamp: { type: Array, required: false, default: () => [0, 100] }
+});
+const hide = ref(false);
+const psuedoHide = ref(false);
+let timeout;
+let type;
 if (props.autohideOnComplete > -1 && (props.progress >= 100 || props.progress < 0)) {
-	if (props.keepSpaceWhenHidden) {
-		hide.value = false
-		psuedoHide.value = true
-	} else {
-		hide.value = true
-		psuedoHide.value = false
-	}
+  if (props.keepSpaceWhenHidden) {
+    hide.value = false;
+    psuedoHide.value = true;
+  } else {
+    hide.value = true;
+    psuedoHide.value = false;
+  }
 }
-
 watch([
-	() => props.progress,
-	() => props.keepSpaceWhenHidden,
-	() => props.autohideOnComplete,
+  () => props.progress,
+  () => props.keepSpaceWhenHidden,
+  () => props.autohideOnComplete
 ], () => {
-	if (props.autohideOnComplete > -1 && (props.progress >= 100 || props.progress < 0)) {
-		if (props.keepSpaceWhenHidden) {
-			if (type === 1) return
-			clearTimeout(timeout)
-			type = 1
-			timeout = setTimeout(() => {
-				type = 0
-				hide.value = false
-				psuedoHide.value = true
-			}, props.autohideOnComplete) as any
-		} else {
-			if (type === 2) return
-			clearTimeout(timeout)
-			type = 2
-			timeout = setTimeout(() => {
-				type = 0
-				hide.value = true
-				psuedoHide.value = false
-			}, props.autohideOnComplete) as any
-		}
-	} else {
-		clearTimeout(timeout)
-		hide.value = false
-		psuedoHide.value = false
-	}
-}, { immediate: false })
-
+  if (props.autohideOnComplete > -1 && (props.progress >= 100 || props.progress < 0)) {
+    if (props.keepSpaceWhenHidden) {
+      if (type === 1) return;
+      clearTimeout(timeout);
+      type = 1;
+      timeout = setTimeout(() => {
+        type = 0;
+        hide.value = false;
+        psuedoHide.value = true;
+      }, props.autohideOnComplete);
+    } else {
+      if (type === 2) return;
+      clearTimeout(timeout);
+      type = 2;
+      timeout = setTimeout(() => {
+        type = 0;
+        hide.value = true;
+        psuedoHide.value = false;
+      }, props.autohideOnComplete);
+    }
+  } else {
+    clearTimeout(timeout);
+    hide.value = false;
+    psuedoHide.value = false;
+  }
+}, { immediate: false });
 </script>
-<script lang="ts">
-
-type RealProps =
-& LinkableByIdProps
-& BaseInteractiveProps
-& LabelProps
-& {
-	progress: number
-	/** Will auto hide after this given time if progress is 100% or more or less than 0% until progress is set to something else. Disabled (-1) by default. */
-	autohideOnComplete?: number
-	/**
-		* Do not actually hide the element, just leave an unstyled div,
-		* so the whole layout doesn't change on completion when autohideOnComplete is set.
-		*/
-	keepSpaceWhenHidden?: boolean
-	/**
-		* By default the progress bar is visually clamped to 0-100, even if the value might be something else.
-		* You can change what it's clamped to here, to for example,
-		* show at least a small sliver of the progress bar when it's still 0.
-		*/
-	clamp?: [start:number, end:number]
-}
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
-	RealProps
-{ }
+<script>
 
 </script>

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

@@ -0,0 +1,41 @@
+import { type HTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
+    progress: number;
+    /** Will auto hide after this given time if progress is 100% or more or less than 0% until progress is set to something else. Disabled (-1) by default. */
+    autohideOnComplete?: number;
+    /**
+        * Do not actually hide the element, just leave an unstyled div,
+        * so the whole layout doesn't change on completion when autohideOnComplete is set.
+        */
+    keepSpaceWhenHidden?: boolean;
+    /**
+        * By default the progress bar is visually clamped to 0-100, even if the value might be something else.
+        * You can change what it's clamped to here, to for example,
+        * show at least a small sliver of the progress bar when it's still 0.
+        */
+    clamp?: [start: number, end: number];
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+    autohideOnComplete: number;
+    keepSpaceWhenHidden: boolean;
+    clamp: [start: number, end: number];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -4,8 +4,9 @@
 	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
@@ -13,37 +14,38 @@
 			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 as any).class)"
+		`,
+  $attrs.class
+)"
 	:aria-disabled="disabled"
 	:aria-readonly="readonly"
 	:tabindex="disabled ? -1 : 0"
 	:title="recording ? recordingTitle : tempValue"
 	contenteditable="false"
 	ref="recorderEl"
-	v-bind="{...ariaLabel, ...$attrs, class:undefined}"
+	v-bind="{ ...ariaLabel, ...$attrs, class: void 0 }"
 	@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
@@ -52,191 +54,139 @@
 				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";
+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 { getFallbackId } from "../shared/props.js";
 defineOptions({
-	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)
-
+  name: "lib-recorder",
+  inheritAttrs: false
+});
+const t = useInjectedI18n();
+const emits = defineEmits(["recorder:blur", "recorder:click", "focus:parent"]);
+const fallbackId = getFallbackId();
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  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 },
+  label: { type: String, required: false },
+  recordingValue: { type: String, required: false },
+  recordingTitle: { type: String, required: false, default: "" },
+  recorder: { type: null, required: false, default: void 0 },
+  binders: { type: null, required: false, default: void 0 }
+});
+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);
 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: 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)
-	}
-}
-
+  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);
+  }
+};
 watchPostEffect(() => {
-	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")
-		}
-	}
-})
-
+  if (!canEdit.value) {
+    unbindListeners();
+    recording.value = false;
+    return;
+  }
+  if (recording.value) {
+    bindListeners();
+  } else {
+    if ((props.recorder || props.binders) && isBound) {
+      unbindListeners();
+      emits("focus:parent");
+    }
+  }
+});
 onBeforeUnmount(() => {
-	unbindListeners()
-})
+  unbindListeners();
+});
 onMounted(() => {
-	if (recording.value) {
-		bindListeners()
-	}
-})
-
-const handleBlurRecorder = (e: FocusEvent): void => {
-	if (!canEdit.value) return
-	if (props.recorder || props.binders) {
-		emits("recorder:blur", e)
-	}
-}
-
-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 })
-	}
-}
-
+  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>
-<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>
+
 </script>