78 lines
2.4 KiB
Vue
78 lines
2.4 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)
|
|
}
|
|
</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>
|