73 lines
1.7 KiB
Vue
73 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
definePageMeta({
|
|
title: 'Vue Form',
|
|
icon: 'mdi-checkbox-blank-off-outline',
|
|
drawerIndex: 0,
|
|
})
|
|
|
|
const data = ref({})
|
|
const humanName = ref({})
|
|
const onChange = () => {
|
|
humanName.value = parseName(data.value.nama)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ma-4">
|
|
<Vueform v-model="data" @change="onChange" sync>
|
|
<TextElement
|
|
name="nama"
|
|
placeholder="Nama Lengkap"
|
|
:rules="['required', 'min:3', 'max:100']"
|
|
/>
|
|
<StaticElement name="parsed-name" size="sm">
|
|
<div class="d-flex flex-row">
|
|
<v-chip
|
|
v-for="prefix in humanName.prefix"
|
|
size="x-small"
|
|
class="mr-1 bg-indigo-lighten-3"
|
|
>{{ prefix }}</v-chip
|
|
><v-chip
|
|
v-for="given in humanName.given"
|
|
size="x-small"
|
|
class="mr-1 bg-blue-darken-3"
|
|
>{{ given }}</v-chip
|
|
>
|
|
<v-chip
|
|
v-show="humanName.family"
|
|
size="x-small"
|
|
class="mr-1 bg-blue"
|
|
>{{ humanName.family }}</v-chip
|
|
>
|
|
<v-chip
|
|
v-for="suffix in humanName.suffix"
|
|
size="x-small"
|
|
class="mr-1 bg-indigo-lighten-3"
|
|
>{{ suffix }}</v-chip
|
|
>
|
|
</div>
|
|
</StaticElement>
|
|
<RadiogroupElement
|
|
name="gender"
|
|
view="tabs"
|
|
label="Jenis Kelamin"
|
|
:items="[
|
|
{
|
|
value: 'male',
|
|
label: '♂️ Laki-laki',
|
|
},
|
|
{
|
|
value: 'female',
|
|
label: '♀️ Perempuan',
|
|
},
|
|
]"
|
|
default="unknown"
|
|
/>
|
|
</Vueform>
|
|
</div>
|
|
<span>{{ data }}</span>
|
|
<span>{{ humanName }}</span>
|
|
</template>
|