73 lines
2.1 KiB
Vue
73 lines
2.1 KiB
Vue
<template>
|
|
<ListElement name="telecom">
|
|
<template #default="{ index }">
|
|
<ObjectElement :name="index">
|
|
<SelectElement name="system" :items="[
|
|
{
|
|
value: 'phone',
|
|
label: '📞',
|
|
},
|
|
{
|
|
value: 'email',
|
|
label: '📧',
|
|
},
|
|
{
|
|
value: 'url',
|
|
label: '🌐',
|
|
},
|
|
]" :search="true" :native="false" input-type="search" autocomplete="off" :can-deselect="false"
|
|
:can-clear="false" default="phone" :columns="{
|
|
default: {
|
|
container: 2,
|
|
},
|
|
sm: {
|
|
container: 1,
|
|
},
|
|
}" :caret="false" />
|
|
<SelectElement name="use" :items="[
|
|
{
|
|
value: 'home',
|
|
label: '🏠',
|
|
},
|
|
{
|
|
value: 'mobile',
|
|
label: '📱',
|
|
},
|
|
{
|
|
value: 'work',
|
|
label: '🏢',
|
|
},
|
|
]" :search="true" :native="false" input-type="search" autocomplete="off" :columns="{
|
|
default: {
|
|
container: 2,
|
|
},
|
|
sm: {
|
|
container: 1,
|
|
},
|
|
}" :caret="false" :can-deselect="false" :can-clear="false" default="home" />
|
|
<GroupElement name="value" :columns="{
|
|
default: {
|
|
container: 8,
|
|
},
|
|
sm: {
|
|
container: 10,
|
|
},
|
|
}">
|
|
<PhoneElement name="phone" :allow-incomplete="true" :unmask="true" default="+62"
|
|
:conditions="[['telecom.*.system', 'in', ['phone']]]" />
|
|
<TextElement name="email" input-type="email" :rules="['nullable', 'email']" placeholder="eg. example@mail.com"
|
|
:conditions="[['telecom.*.system', 'in', ['email']]]" />
|
|
<TextElement name="url" input-type="url" :rules="['nullable', 'url']" placeholder="eg. http(s)://domain.com"
|
|
:floating="false" :conditions="[['telecom.*.system', 'in', ['url']]]" />
|
|
</GroupElement>
|
|
</ObjectElement>
|
|
</template>
|
|
</ListElement>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
|
|
</script>
|
|
|
|
<style></style>
|