frontend/app/components/ui/input-group/InputGroupAddon.vue
2026-01-09 21:47:12 +01:00

40 lines
1 KiB
Vue

<script setup lang="ts">
import type { HTMLAttributes } from "vue";
import { cn } from "@/lib/utils";
import type { InputGroupVariants } from ".";
import { inputGroupAddonVariants } from ".";
const props = withDefaults(
defineProps<{
align?: InputGroupVariants["align"];
class?: HTMLAttributes["class"];
}>(),
{
align: "inline-start",
},
);
function handleInputGroupAddonClick(e: MouseEvent) {
const currentTarget = e.currentTarget as HTMLElement | null;
const target = e.target as HTMLElement | null;
if (target?.closest("button")) {
return;
}
if (currentTarget?.parentElement) {
currentTarget.parentElement?.querySelector("input")?.focus();
}
}
</script>
<template>
<div
role="group"
data-slot="input-group-addon"
:data-align="props.align"
:class="cn(inputGroupAddonVariants({ align: props.align }), props.class)"
@click="handleInputGroupAddonClick"
>
<slot />
</div>
</template>