@witchcraft/ui 0.4.0 → 0.4.1

package/dist/runtime/components/WPopup/WPopup.vue

@@ -0,0 +1,115 @@
+<template>
+<DialogRoot
+	v-bind="rootProps"
+	v-model:open="modelValue"
+>
+	<DialogTrigger
+		v-if="$slots.button"
+		as-child
+	>
+		<slot name="button"/>
+	</DialogTrigger>
+
+	<DialogPortal :to="to">
+		<DialogOverlay
+			as-child
+		>
+			<slot
+				name="backdrop"
+				class="popup--backdrop absolute inset-0 bg-black/50"
+			>
+				<div
+					class="popup--backdrop absolute inset-0 bg-black/50"
+				/>
+			</slot>
+		</DialogOverlay>
+
+		<DialogContent
+			v-bind="{ ...contentProps, class: void 0 }"
+			:class="twMerge(`
+				popup--content
+				z-100
+				focus:outline-none
+				fixed
+				top-1/2
+				left-1/2
+				-translate-x-1/2
+				-translate-y-1/2
+				animate-contentShow
+				max-w-[100dvw]
+				max-h-[100dvh]
+				overflow-auto
+				scrollbar-hidden
+				p-5
+			`, contentProps?.class)"
+		>
+			<div
+				:class="twMerge(`
+					popup--content-inner
+					flex
+					flex-col
+					bg-neutral-100
+					dark:bg-neutral-800
+					rounded-md
+					flex
+					flex-col
+					gap-3
+					p-2
+				`)"
+			>
+				<slot name="popup">
+					<slot name="title">
+						<DialogTitle
+							v-if="title"
+							class="text-lg font-bold"
+						>
+							{{ title }}
+						</DialogTitle>
+					</slot>
+					<slot name="description">
+						<DialogDescription v-if="description">
+							{{ description }}
+						</DialogDescription>
+					</slot>
+					<slot name="extra"/>
+				</slot>
+				<DialogClose as-child>
+					<slot name="close">
+						<WButton
+							class="justify-self-end"
+							@click="modelValue = false"
+						>
+							Close
+						</WButton>
+					</slot>
+				</DialogClose>
+			</div>
+		</DialogContent>
+	</DialogPortal>
+</DialogRoot>
+</template>
+
+<script setup>
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger
+} from "reka-ui";
+import { twMerge } from "../../utils/twMerge.js";
+import WButton from "../WButton/WButton.vue";
+defineOptions({ name: "WPopup", inheritAttrs: false });
+defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  backdropClass: { type: String, required: false },
+  contentProps: { type: Object, required: false },
+  rootProps: { type: Object, required: false },
+  to: { type: String, required: false, default: "#root" }
+});
+const modelValue = defineModel({ type: Boolean, ...{ default: false } });
+</script>

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

@@ -0,0 +1,51 @@
+import type { DialogContentEmits, DialogContentProps, DialogRootEmits, DialogRootProps } from "reka-ui";
+import type { EmitsToProps, HTMLAttributes } from "vue";
+import type { TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    backdropClass?: string;
+    /** Overrides reka-ui's DialogContentProps */
+    contentProps?: DialogContentProps & EmitsToProps<DialogContentEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    /** Overrides reka-ui's DialogRootProps */
+    rootProps?: DialogRootProps & EmitsToProps<DialogRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    /** Overrides teleport target. */
+    to?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_14: {}, __VLS_28: {
+    class: string;
+}, __VLS_36: {}, __VLS_38: {}, __VLS_46: {}, __VLS_54: {}, __VLS_62: {};
+type __VLS_Slots = {} & {
+    button?: (props: typeof __VLS_14) => any;
+} & {
+    backdrop?: (props: typeof __VLS_28) => any;
+} & {
+    popup?: (props: typeof __VLS_36) => any;
+} & {
+    title?: (props: typeof __VLS_38) => any;
+} & {
+    description?: (props: typeof __VLS_46) => any;
+} & {
+    extra?: (props: typeof __VLS_54) => any;
+} & {
+    close?: (props: typeof __VLS_62) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    to: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/{LibProgressBar/LibProgressBar.d.vue.ts → WProgressBar/WProgressBar.d.vue.ts}

@@ -1,6 +1,7 @@
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
 import type { HTMLAttributes } from "vue";
-type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
+import type { TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = /** @vue-ignore */ Omit<HTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp & {
+    label?: string;
     /** A number from 0-100. It is auto-clamped. */
     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. */
@@ -17,23 +18,19 @@ type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
      */
     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, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    disabled: boolean;
-    readonly: boolean;
-    border: boolean;
-    unstyle: boolean;
+declare var __VLS_13: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     autohideOnComplete: number;
     keepSpaceWhenHidden: boolean;
     clamp: [start: number, end: number];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-} & {
-    default?: (props: {}) => any;
-}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/WProgressBar/WProgressBar.vue

@@ -0,0 +1,150 @@
+<template>
+<Transition>
+	<div
+		v-if="currentVisibility !== 'hidden'"
+		:class="twMerge(`
+			progress-bar
+			w-[200px]
+			whitespace-nowrap
+			overflow-x-scroll
+			scrollbar-hidden
+			rounded-sm
+			flex
+			relative
+			text-sm
+			min-w-[50px]
+			after:shadow-inner
+			after:shadow-black/50
+			after:content-[\'\']
+			after:absolute
+			after:inset-0
+			after:pointer-events-none
+			after:z-2
+			after:transition-all
+			before:content-[\'\']
+			before:shadow-inner
+			before:shadow-black/50
+			before:rounded-sm
+			before:bg-bars-gradient
+			before:animate-slideBgInf
+			before:[background-size:15px_15px]
+			before:absolute
+			before:w-[var(--progress)]
+			before:top-0 before:bottom-0 before:left-0
+			before:transition-all
+			before:z-1
+			before:duration-500
+		`, currentVisibility === 'pseudo' && `
+			after:opacity-0
+			before:opacity-0
+		`, $attrs.class)"
+		:data-value="progress"
+		role="progressbar"
+		:aria-valuenow="clampNumber(progress, clamp[0] ?? 0, clamp[1] ?? 100)"
+		:aria-valuemin="clamp[0] ?? 0"
+		:aria-valuemax="clamp[1] ?? 100"
+		:aria-label="label"
+		v-bind="{ ...$attrs, class: void 0 }"
+		:style="`--progress: ${clampNumber(progress, clamp[0] ?? 0, clamp[1] ?? 100)}%;`"
+	>
+		<div
+			class="progress-bar--label-wrapper relative flex-1 z-3"
+			aria-hidden="true"
+		>
+			<span class="before:content-vertical-holder"/>
+
+			<Transition v-if="currentVisibility === 'visible'">
+				<slot>
+					<div
+						class="
+						progress-bar--bottom-label
+						text-black
+						dark:text-white
+						absolute
+						inset-0
+						flex
+						justify-center
+						px-2
+					"
+					>
+						<div class="truncate">
+							{{ label ?? "" }}
+						</div>
+					</div>
+				</slot>
+			</Transition>
+			<Transition v-if="currentVisibility === 'visible'">
+				<slot>
+					<div
+						class="
+						progress-bar--top-label
+						pointer-events-none
+						absolute
+						inset-0
+						flex
+						justify-center
+						transition-all
+						duration-500
+						text-white
+						[clip-path:inset(0_calc(100%-var(--progress))_0_0)]
+						px-2
+					"
+					>
+						<div class="truncate">
+							{{ label ?? "" }}
+						</div>
+					</div>
+				</slot>
+			</Transition>
+		</div>
+	</div>
+</Transition>
+</template>
+
+<script setup>
+import { clampNumber } from "@alanscodelog/utils/clampNumber";
+import { unreachable } from "@alanscodelog/utils/unreachable";
+import { ref, useAttrs, watch } from "vue";
+import { twMerge } from "../../utils/twMerge.js";
+defineOptions({
+  name: "WProgressBar",
+  inheritAttrs: false
+});
+const $attrs = useAttrs();
+const props = defineProps({
+  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 currentVisibility = ref("visible");
+let lastVisibility = null;
+function updateVisibility(immediate = false, onCleanup) {
+  const isComplete = props.progress >= 100 || props.progress < 0;
+  const shouldHide = props.autohideOnComplete > -1 && isComplete;
+  if (!shouldHide) {
+    lastVisibility = null;
+    currentVisibility.value = "visible";
+    return;
+  }
+  const newVisibility = props.keepSpaceWhenHidden ? "pseudo" : "hidden";
+  if (immediate) {
+    currentVisibility.value = newVisibility;
+    lastVisibility = newVisibility;
+  } else if (lastVisibility !== newVisibility) {
+    lastVisibility = newVisibility;
+    const timeout = setTimeout(() => {
+      currentVisibility.value = newVisibility;
+    }, props.autohideOnComplete);
+    if (!onCleanup) unreachable();
+    onCleanup(() => clearTimeout(timeout));
+  }
+}
+updateVisibility(true);
+watch([
+  () => [props.progress, props.keepSpaceWhenHidden, props.autohideOnComplete]
+], (_new, _old, onCleanup) => {
+  updateVisibility(false, onCleanup);
+});
+</script>

package/dist/runtime/components/{LibProgressBar/LibProgressBar.vue.d.ts → WProgressBar/WProgressBar.vue.d.ts}

@@ -1,6 +1,7 @@
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
 import type { HTMLAttributes } from "vue";
-type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
+import type { TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = /** @vue-ignore */ Omit<HTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp & {
+    label?: string;
     /** A number from 0-100. It is auto-clamped. */
     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. */
@@ -17,23 +18,19 @@ type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
      */
     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, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    disabled: boolean;
-    readonly: boolean;
-    border: boolean;
-    unstyle: boolean;
+declare var __VLS_13: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     autohideOnComplete: number;
     keepSpaceWhenHidden: boolean;
     clamp: [start: number, end: number];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-} & {
-    default?: (props: {}) => any;
-}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/{LibRecorder/LibRecorder.d.vue.ts → WRecorder/WRecorder.d.vue.ts}

@@ -1,6 +1,6 @@
-import { type HTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
-type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
+import type { HTMLAttributes } from "vue";
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = /** @vue-ignore */ Omit<HTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp & BaseInteractiveProps & {
     border?: boolean;
     /** A value to display while recording, if none given the i18n `recorder.recording` key is used. */
     recordingValue?: string;
@@ -19,54 +19,39 @@ type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
         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 & {
+type __VLS_ModelProps = {
     /**
      * Puts the element into recording mode if true. See {@link props.recorder}.
      */
-    recording?: boolean;
+    "recording"?: boolean;
     /** The final value of the recorder. For intermediate values while recording, pass a recorder and set an appropriate recording value. */
     modelValue: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, 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: {
+    "recorder:pointerdown": (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<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    "onUpdate:recording"?: ((value: boolean) => any) | undefined;
     "onRecorder:blur"?: (($event: FocusEvent) => any) | undefined;
-    "onRecorder:click"?: ((args_0: {
+    "onRecorder:pointerdown"?: ((args_0: {
         event: MouseEvent | KeyboardEvent;
         indicator: HTMLElement;
         input: HTMLInputElement;
     }) => any) | undefined;
     "onFocus:parent"?: (() => any) | undefined;
+    "onUpdate:recording"?: ((value: boolean) => any) | undefined;
 }>, {
-    id: string;
-    disabled: boolean;
-    readonly: boolean;
     border: boolean;
-    unstyle: boolean;
     recordingTitle: string;
     recorder: Record<string, any>;
     binders: {
@@ -74,4 +59,5 @@ declare const _default: import("vue").DefineComponent<Props & {
         unbind: (el: HTMLElement) => void;
     };
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/{LibRecorder/LibRecorder.vue → WRecorder/WRecorder.vue}

@@ -4,9 +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
+  `
+			recorder
 			flex items-center
 			gap-2
 			px-2
@@ -31,38 +31,48 @@
 		`,
   $attrs.class
 )"
-	:aria-disabled="disabled"
 	:aria-readonly="readonly"
 	:tabindex="disabled ? -1 : 0"
 	:title="recording ? recordingTitle : tempValue"
 	contenteditable="false"
+	v-bind="{ ...$attrs, class: void 0 }"
+	role="button"
+	:aria-pressed="recording"
+	:aria-disabled="disabled"
 	ref="recorderEl"
-	v-bind="{ ...ariaLabel, ...$attrs, class: void 0 }"
 	@blur="handleBlurRecorder($event)"
-	@click="handleClickRecorder($event)"
-	@keydown.space.prevent="handleClickRecorder($event, true)"
+	@keydown.space.prevent.capture="handlePointerdownRecorder($event, true)"
 >
-	<!-- :aria-description="recording ? recordingTitle : ''" -->
+	<span
+		class="sr-only"
+		aria-live="polite"
+	>
+		{{ recording ? recordingTitle || t("recorder.recording") : "" }}
+	</span>
 	<div
 		:class="twMerge(
-  `recorder--indicator
-				inline-block
-				bg-red-700
-				rounded-full
-				w-[1em]
-				h-[1em]
-				shrink-0
-				hover:bg-red-500
-			`,
+  `
+			recorder--indicator
+			inline-block
+			bg-red-700
+			rounded-full
+			w-[1em]
+			h-[1em]
+			shrink-0
+		`,
   recording && `
 				animate-blinkInf
 				bg-red-500
 			`,
   (disabled || readonly) && `
 				bg-neutral-500
+			`,
+  !(disabled || readonly) && `
+				hover:bg-red-500
 			`
 )"
 		ref="recorderIndicatorEl"
+		@pointerdown.capture.prevent="handlePointerdownRecorder($event)"
 	/>
 	<div class="recorder--value before:content-vertical-holder truncate">
 		{{ recording ? recordingValue ?? t("recorder.recording") : tempValue }}
@@ -72,25 +82,21 @@
 
 <script setup>
 import { keys } from "@alanscodelog/utils/keys";
-import { computed, onBeforeUnmount, onMounted, ref, watch, watchPostEffect } from "vue";
-import { useAriaLabel } from "../../composables/useAriaLabel.js";
+import { computed, onBeforeUnmount, onMounted, ref, useAttrs, watch, watchPostEffect } from "vue";
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
 import { twMerge } from "../../utils/twMerge.js";
-import { getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "LibRecorder",
+  name: "WRecorder",
   inheritAttrs: false
 });
 const t = useInjectedI18n();
-const emits = defineEmits(["recorder:blur", "recorder:click", "focus:parent"]);
-const fallbackId = getFallbackId();
+const emits = defineEmits(["recorder:blur", "recorder:pointerdown", "focus:parent"]);
+const $attrs = useAttrs();
 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 },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
   border: { type: Boolean, required: false, default: true },
-  unstyle: { type: Boolean, required: false, default: false },
-  label: { type: String, required: false },
+  unstyle: { type: Boolean, required: false },
   recordingValue: { type: String, required: false },
   recordingTitle: { type: String, required: false, default: "" },
   recorder: { type: null, required: false, default: void 0 },
@@ -102,7 +108,7 @@ 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], () => {
+watch([() => props.binders, () => props.recorder], () => {
   if (recording.value) {
     throw new Error("Component was not designed to allow swapping out of binders/recorders while recording");
   }
@@ -110,7 +116,6 @@ watch([() => props.binders, () => props.binders], () => {
 watch(modelValue, () => {
   tempValue.value = modelValue.value;
 });
-const ariaLabel = useAriaLabel(props);
 const boundListeners = {};
 let isBound = false;
 const unbindListeners = () => {
@@ -128,7 +133,7 @@ const unbindListeners = () => {
 };
 const bindListeners = () => {
   if (!props.recorder && !props.binders) {
-    throw new Error("Record is true but no recorder or binders props was passed");
+    throw new Error("Recording 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.");
@@ -173,7 +178,7 @@ const handleBlurRecorder = (e) => {
     emits("recorder:blur", e);
   }
 };
-const handleClickRecorder = (e, isSpaceKey = false) => {
+const handlePointerdownRecorder = (e, isSpaceKey = false) => {
   if (!canEdit.value) return;
   if (!recording.value) {
     recorderEl.value?.focus();
@@ -182,11 +187,7 @@ const handleClickRecorder = (e, isSpaceKey = false) => {
     if (isSpaceKey) {
       return;
     }
-    emits("recorder:click", { event: e, indicator: recorderIndicatorEl.value, input: recorderEl.value });
+    emits("recorder:pointerdown", { event: e, indicator: recorderIndicatorEl.value, input: recorderEl.value });
   }
 };
 </script>
-
-<script>
-
-</script>