30 lines
745 B
Vue
30 lines
745 B
Vue
<template>
|
|
<div class="space-y-1.5">
|
|
<label v-if="label" :for="id" class="block text-sm font-medium text-muted">
|
|
{{ label }}
|
|
</label>
|
|
<input
|
|
:id="id"
|
|
v-model="model"
|
|
class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none transition placeholder:text-[var(--color-placeholder)] focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
|
|
:class="ltr ? 'text-left' : ''"
|
|
v-bind="$attrs"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineOptions({ inheritAttrs: false });
|
|
|
|
const model = defineModel<string>({ default: '' });
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
label?: string;
|
|
id?: string;
|
|
ltr?: boolean;
|
|
}>(),
|
|
{ ltr: false },
|
|
);
|
|
</script>
|