obsidian-visualiser/components/TextInput.vue

15 lines
780 B
Vue

<template>
<Label class="px-4">{{ label }}
<input :placeholder="placeholder" :disabled="disabled" class="ms-3 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" :type="type" v-model="model">
</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>