<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>
