Skip to content

Instantly share code, notes, and snippets.

@Erefor

Erefor/DynamicInput.vue

Last active November 30, 2023 16:55
Show Gist options
  • Save Erefor/de90e1e0f0faf4dc3e36854afa363e0c to your computer and use it in GitHub Desktop.
Save Erefor/de90e1e0f0faf4dc3e36854afa363e0c to your computer and use it in GitHub Desktop.
Download ZIP
DynamicInput
Raw
DynamicInput.vue
<template>
<div :class="inputConfig?.cssClass ?? ''">
<QInput
v-if="inputConfig?.inputType === 'text' || inputConfig?.inputType === 'number' || inputConfig?.inputType === 'textarea'"
:label="inputConfig?.label ?? 'NA'"
:type="inputConfig?.inputType ?? 'text'"
:rules="inputConfig?.rules ?? []"
:model-value="modelValue"
:mask="inputConfig.mask"
@update:model-value="value = $event"
outlined
dense
>
<template
v-if="inputConfig.icon"
#prepend
>
<QIcon :name="inputConfig.icon" />
</template>
</QInput>
<QSelect
v-if="inputConfig?.inputType === 'select'"
:label="inputConfig?.label"
:options="inputConfig?.options"
:option-value="inputConfig.selectOptionValueKey"
:option-label="inputConfig.selectOptionLabelKey"
:rules="inputConfig.rules"
:model-value="modelValue"
@update:model-value="value = $event"
map-options
emit-value
outlined
dense
>
<template
v-if="inputConfig.icon"
#prepend
>
<QIcon :name="inputConfig.icon" />
</template>
</QSelect>
<QCheckbox
v-if="inputConfig?.inputType === 'checkbox'"
:label="inputConfig.label"
:class="inputConfig.cssClass"
:model-value="modelValue"
@update:model-value="value = $event"
/>
<QInput
v-if="inputConfig?.inputType === 'date'"
dense
outlined
:model-value="modelValue"
@update:model-value="value = $event"
:label="inputConfig.label ?? ''"
:rules="inputConfig.rules ?? []"
>
<template #append>
<QIcon
name="event"
class="cursor-pointer"
>
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QDate
:model-value="modelValue"
@update:model-value="value = $event"
mask="MM/DD/YYYY"
minimal
>
<div class="row items-center justify-end">
<QBtn
v-close-popup
label="Close"
color="primary"
flat
/>
</div>
</QDate>
</QPopupProxy>
</QIcon>
</template>
</QInput>
<QInput
v-if="inputConfig?.inputType === 'time'"
outlined
dense
:model-value="modelValue"
@update:model-value="value = $event"
mask="time"
:rules="inputConfig.rules ?? []"
:label="inputConfig.label ?? ''"
>
<template #append>
<QIcon
name="access_time"
class="cursor-pointer"
>
<QPopupProxy
cover
transition-show="scale"
transition-hide="scale"
>
<QTime
:model-value="modelValue"
@update:model-value="value = $event"
format24h
>
<div class="row items-center justify-end">
<QBtn
v-close-popup
label="Close"
color="primary"
flat
/>
</div>
</QTime>
</QPopupProxy>
</QIcon>
</template>
</QInput>
</div>
</template>
<script setup lang="ts">
import {QInput, QSelect, QIcon, QCheckbox, QBtn, QPopupProxy, QDate, QTime} from "quasar";
import type {GenInputType} from "../utils/types/GenInputType";
import {ref, watch} from "vue";
interface Props {
inputConfig: GenInputType;
modelValue?: string | number | undefined | null;
}
defineProps<Props>()
const emit = defineEmits(["update:modelValue"])
const value = ref<string | number | undefined | null>('')
watch(() => value.value, (val) => {
emit('update:modelValue', val)
}, {deep: true})
</script>
Raw
GenInputType.ts
export type GenInputType = {
label: string,
modelKey: string,
inputType: 'text' | 'number' | 'textarea' | 'select' | 'date' | 'time' | 'checkbox'
icon?: string,
cssClass?: string,
rules?: {(e:string): boolean|string}[]
options?: any[],
selectOptionLabelKey?: string
selectOptionValueKey?: string
mask?: string
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment