LibreOne/components/ThemedInput.vue at 3e28341ecff9dc459b2523b42c059d25def24fe4 · LibreTexts/LibreOne · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<template>
  <Checkbox
    v-if="type === 'checkbox'"
    v-bind="$attrs"
    :id="id"
    :name="id"
    :label="label"
    :model-value="(modelValue as boolean)"
    :required="required"
    @update:model-value="$emit('update:modelValue', $event)"
  />
  <Input
    v-else
    v-bind="$attrs"
    :name="id"
    :label="label"
    :placeholder="placeholder"
    :helper-text="instructions"
    :model-value="(modelValue as string)"
    :type="type"
    :required="required"
    @update:model-value="$emit('update:modelValue', $event)"
  />
</template>

<script lang="ts" setup>
import { Input, Checkbox } from '@libretexts/davis-vue';
defineEmits(['update:modelValue']);
withDefaults(
  defineProps<{
    id: string;
    label?: string;
    placeholder?: string;
    instructions?: string;
    modelValue?: string | boolean;
    type?: string;
    required?: boolean;
  }>(),
  {
    id: '',
    label: '',
    placeholder: '',
    instructions: '',
    modelValue: '',
    type: 'text',
    required: false,
  },
);
</script>