19 lines
1.0 KiB
Vue
19 lines
1.0 KiB
Vue
<template>
|
|
<Label class="px-4 my-2">{{ label }}
|
|
<input :placeholder="placeholder" :disabled="disabled"
|
|
class="mx-4 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50
|
|
bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
|
|
border border-light-35 dark:border-dark-35 hover:border-light-50 dark:hover:border-dark-50 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20"
|
|
:type="type" v-model="model" :data-disabled="disabled || undefined">
|
|
</Label>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { type = 'text', label, disabled = false, placeholder } = defineProps<{
|
|
type?: 'text' | 'password' | 'email' | 'tel' | 'url'
|
|
label?: string
|
|
disabled?: boolean
|
|
placeholder?: string
|
|
}>();
|
|
const model = defineModel<string>();
|
|
</script> |