46 lines
2.1 KiB
Vue
46 lines
2.1 KiB
Vue
<script setup>
|
|
const parsedName = ref({})
|
|
const onChange = (newValue, oldValue, el$) => {
|
|
const i = parseInt(el$.$parent.$parent.path.split('.')[1])
|
|
parsedName.value[i] = parseName(el$.$parent.$parent.children$.text.value)
|
|
el$.$parent.$parent.children$.prefix.update(parsedName.value[i].prefix)
|
|
el$.$parent.$parent.children$.given.update(parsedName.value[i].given)
|
|
el$.$parent.$parent.children$.family.update(parsedName.value[i].family)
|
|
el$.$parent.$parent.children$.suffix.update(parsedName.value[i].suffix)
|
|
console.log(el$.$parent.$parent.children$.text.value)
|
|
}
|
|
</script>
|
|
<template>
|
|
<ListElement name="name" :controls="{
|
|
add: true,
|
|
remove: false,
|
|
}" :rules="['min:1']" :min="1" :max="1" :initial="1">
|
|
<template #default="{ index }">
|
|
<ObjectElement :name="index" :columns="{
|
|
sm: {
|
|
container: 12,
|
|
},
|
|
}">
|
|
<TextElement @change="onChange" name="text" placeholder="Nama Lengkap" />
|
|
<HiddenElement name="prefix" :meta="true" />
|
|
<HiddenElement name="given" :meta="true" />
|
|
<HiddenElement name="family" :meta="true" />
|
|
<HiddenElement name="suffix" :meta="true" />
|
|
<!-- <FormLibParsedName :name="parsedName" :path="'address.0'" /> -->
|
|
<StaticElement name="parsed-name" size="m">
|
|
<div v-if="parsedName[index]" class="d-flex flex-row">
|
|
<v-chip v-for="(prefix, index) in parsedName[index].prefix" :key="`prefix-${index}`" size="x-small"
|
|
class="mr-1 bg-indigo-lighten-3">{{ prefix }}</v-chip>
|
|
<v-chip v-for="(given, index) in parsedName[index].given" :key="`given-${index}`" size="x-small"
|
|
class="mr-1 bg-blue-darken-3">{{ given }}</v-chip>
|
|
<v-chip v-show="parsedName[index].family" size="x-small" class="mr-1 bg-blue">{{ parsedName[index].family
|
|
}}</v-chip>
|
|
<v-chip v-for="(suffix, index) in parsedName[index].suffix" :key="`suffix-${index}`" size="x-small"
|
|
class="mr-1 bg-indigo-lighten-3">{{ suffix }}</v-chip>
|
|
</div>
|
|
</StaticElement>
|
|
</ObjectElement>
|
|
</template>
|
|
</ListElement>
|
|
</template>
|