contactstudiocstools 1.0.224

package/dist/runtime/components/Molecule.DropdownDDI.vue

@@ -0,0 +1,333 @@
+<template>
+  <div class="w-18">
+    <!-- banner -->
+    <figure
+      class="cursor-pointer"
+      :dropdown-trigger="dropdownID"
+    >
+      <span
+        class="fi mx-1"
+        :class="`fi-${selected.icon}`"
+      />
+      ({{ selected.ddi }})
+      <span class="bi-caret-down-fill text-[11px] text-secondary" />
+    </figure>
+    <!-- dropdown -->
+    <AtomDropdownSearchable
+      v-model="search"
+      :dropdown="dropdownID"
+      class="fixed"
+    >
+      <!-- items -->
+      <div class="max-h-36 overflow-y-auto scrollbar">
+        <li
+          v-for="({ icon, ddi, name }, i) in ddisFiltered"
+          :key="i"
+          class="list"
+          @click="selectDDI({ icon, ddi, name })"
+        >
+          <div class="item">
+            <span
+              class="fi mr-2"
+              :class="`fi-${icon}`"
+            />
+            {{ name }}
+            ({{ ddi }})
+          </div>
+        </li>
+      </div>
+    </AtomDropdownSearchable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from "vue";
+import { randomID, IDDI, IDDIs } from "./types";
+
+// props
+interface IProps {
+  modelValue: IDDI;
+}
+const props = defineProps<IProps>();
+
+// computed
+const ddisFiltered = computed<IDDIs>(() => {
+  if (!search.value.trim()) return ddis;
+
+  return ddis.filter(({ ddi, name }) => {
+    const ddiMatched = !!ddi.match(new RegExp(search.value, "i"));
+    const nameMatched = !!name.match(new RegExp(search.value, "i"));
+
+    return ddiMatched || nameMatched;
+  });
+});
+
+// data
+const dropdownID = ref<string>(randomID());
+const search = ref<string>("");
+const selected = reactive<IDDI>(props.modelValue);
+const ddis = reactive<IDDIs>([
+  { icon: "af", ddi: "+93", name: "Afeganistão" },
+  { icon: "za", ddi: "+27", name: "África do Sul" },
+  { icon: "al", ddi: "+355", name: "Albânia" },
+  { icon: "de", ddi: "+49", name: "Alemanha" },
+  { icon: "ad", ddi: "+376", name: "Andorra" },
+  { icon: "ao", ddi: "+244", name: "Angola" },
+  { icon: "ai", ddi: "+1", name: "Anguilla" },
+  { icon: "ag", ddi: "+1", name: "Antígua e Barbuda" },
+  { icon: "nl", ddi: "+599", name: "Antilhas Holandesas" },
+  { icon: "sa", ddi: "+966", name: "Arábia Saudita" },
+  { icon: "dz", ddi: "+213", name: "Argélia" },
+  { icon: "ar", ddi: "+54", name: "Argentina" },
+  { icon: "am", ddi: "+374", name: "Armênia" },
+  { icon: "aw", ddi: "+297", name: "Aruba" },
+  { icon: "ac", ddi: "+247", name: "Ascensão" },
+  { icon: "au", ddi: "+61", name: "Austrália" },
+  { icon: "at", ddi: "+43", name: "Áustria" },
+  { icon: "az", ddi: "+994", name: "Azerbaijão" },
+  { icon: "bs", ddi: "+1", name: "Bahamas" },
+  { icon: "bd", ddi: "+880", name: "Bangladesh" },
+  { icon: "bb", ddi: "+1", name: "Barbados" },
+  { icon: "bh", ddi: "+973", name: "Bahrein" },
+  { icon: "be", ddi: "+32", name: "Bélgica" },
+  { icon: "bz", ddi: "+501", name: "Belize" },
+  { icon: "bj", ddi: "+229", name: "Benim" },
+  { icon: "bm", ddi: "+1", name: "Bermudas" },
+  { icon: "by", ddi: "+375", name: "Bielorrússia" },
+  { icon: "bo", ddi: "+591", name: "Bolívia" },
+  { icon: "ba", ddi: "+387", name: "Bósnia e Herzegovina" },
+  { icon: "bw", ddi: "+267", name: "Botswana" },
+  { icon: "br", ddi: "+55", name: "Brasil" },
+  { icon: "bn", ddi: "+673", name: "Brunei" },
+  { icon: "bg", ddi: "+359", name: "Bulgária" },
+  { icon: "bf", ddi: "+226", name: "Burkina Faso" },
+  { icon: "bi", ddi: "+257", name: "Burundi" },
+  { icon: "bt", ddi: "+975", name: "Butão" },
+  { icon: "cv", ddi: "+238", name: "Cabo Verde" },
+  { icon: "cm", ddi: "+237", name: "Camarões" },
+  { icon: "kh", ddi: "+855", name: "Camboja" },
+  { icon: "ca", ddi: "+1", name: "Canadá" },
+  { icon: "kz", ddi: "+7", name: "Cazaquistão" },
+  { icon: "td", ddi: "+237", name: "Chade" },
+  { icon: "cl", ddi: "+56", name: "Chile" },
+  { icon: "cn", ddi: "+86", name: "República Popular da China" },
+  { icon: "cy", ddi: "+357", name: "Chipre" },
+  { icon: "co", ddi: "+57", name: "Colômbia" },
+  { icon: "km", ddi: "+269", name: "Comores" },
+  { icon: "cg", ddi: "+242", name: "Congo-Brazzaville" },
+  { icon: "cd", ddi: "+243", name: "Congo-Kinshasa" },
+  { icon: "kp", ddi: "+850", name: "Coreia do Norte" },
+  { icon: "kr", ddi: "+82", name: "Coreia do Sul" },
+  { icon: "ci", ddi: "+225", name: "Costa do Marfim" },
+  { icon: "cr", ddi: "+506", name: "Costa Rica" },
+  { icon: "hr", ddi: "+385", name: "Croácia" },
+  { icon: "cu", ddi: "+53", name: "Cuba" },
+  { icon: "dk", ddi: "+45", name: "Dinamarca" },
+  { icon: "dj", ddi: "+253", name: "Djibuti" },
+  { icon: "do", ddi: "+1", name: "Dominica" },
+  { icon: "eg", ddi: "+20", name: "Egipto" },
+  { icon: "sv", ddi: "+503", name: "El Salvador" },
+  { icon: "ae", ddi: "+971", name: "Emirados Árabes Unidos" },
+  { icon: "ec", ddi: "+593", name: "Equador" },
+  { icon: "er", ddi: "+291", name: "Eritreia" },
+  { icon: "sk", ddi: "+421", name: "Eslováquia" },
+  { icon: "si", ddi: "+386", name: "Eslovénia" },
+  { icon: "es", ddi: "+34", name: "Espanha" },
+  { icon: "us", ddi: "+1", name: "Estados Unidos" },
+  { icon: "ee", ddi: "+372", name: "Estónia" },
+  { icon: "sz", ddi: "+268", name: "Essuatíni" },
+  { icon: "et", ddi: "+251", name: "Etiópia" },
+  { icon: "fj", ddi: "+679", name: "Fiji" },
+  { icon: "ph", ddi: "+63", name: "Filipinas" },
+  { icon: "fi", ddi: "+358", name: "Finlândia" },
+  { icon: "fr", ddi: "+33", name: "França" },
+  { icon: "ga", ddi: "+241", name: "Gabão" },
+  { icon: "gm", ddi: "+220", name: "Gâmbia" },
+  { icon: "gh", ddi: "+233", name: "Gana" },
+  { icon: "ge", ddi: "+995", name: "Geórgia" },
+  { icon: "gi", ddi: "+350", name: "Gibraltar" },
+  { icon: "gd", ddi: "+1", name: "Granada" },
+  { icon: "gr", ddi: "+30", name: "Grécia" },
+  { icon: "gl", ddi: "+299", name: "Groenlândia" },
+  { icon: "gp", ddi: "+590", name: "Guadalupe" },
+  { icon: "gu", ddi: "+671", name: "Guam" },
+  { icon: "gt", ddi: "+502", name: "Guatemala" },
+  { icon: "gy", ddi: "+592", name: "Guiana" },
+  { icon: "gf", ddi: "+594", name: "Guiana Francesa" },
+  { icon: "gn", ddi: "+224", name: "Guiné" },
+  { icon: "gw", ddi: "+245", name: "Guiné-Bissau" },
+  { icon: "gq", ddi: "+240", name: "Guiné Equatorial" },
+  { icon: "ht", ddi: "+509", name: "Haiti" },
+  { icon: "hn", ddi: "+504", name: "Honduras" },
+  { icon: "hk", ddi: "+852", name: "Hong Kong" },
+  { icon: "hu", ddi: "+36", name: "Hungria" },
+  { icon: "ye", ddi: "+967", name: "Iêmen" },
+  { icon: "ky", ddi: "+1", name: "Ilhas Cayman" },
+  { icon: "cx", ddi: "+672", name: "Ilha Christmas" },
+  { icon: "cc", ddi: "+672", name: "Ilhas Cocos" },
+  { icon: "ck", ddi: "+682", name: "Ilhas Cook" },
+  { icon: "fo", ddi: "+298", name: "Ilhas Féroe" },
+  { icon: "hm", ddi: "+672", name: "Ilha Heard e Ilhas McDonald" },
+  { icon: "mv", ddi: "+960", name: "Maldivas" },
+  { icon: "fk", ddi: "+500", name: "Ilhas Malvinas" },
+  { icon: "mp", ddi: "+1", name: "Ilhas Marianas do Norte" },
+  { icon: "mh", ddi: "+692", name: "Ilhas Marshall" },
+  { icon: "nf", ddi: "+672", name: "Ilha Norfolk" },
+  { icon: "sb", ddi: "+677", name: "Ilhas Salomão" },
+  { icon: "vi", ddi: "+1", name: "Ilhas Virgens Americanas" },
+  { icon: "vg", ddi: "+1", name: "Ilhas Virgens Britânicas" },
+  { icon: "in", ddi: "+91", name: "Índia" },
+  { icon: "id", ddi: "+62", name: "Indonésia" },
+  { icon: "ir", ddi: "+98", name: "Irã" },
+  { icon: "iq", ddi: "+964", name: "Iraque" },
+  { icon: "ie", ddi: "+353", name: "Irlanda" },
+  { icon: "is", ddi: "+354", name: "Islândia" },
+  { icon: "il", ddi: "+972", name: " Israel" },
+  { icon: "it", ddi: "+39", name: "Itália" },
+  { icon: "jm", ddi: "+1", name: "Jamaica" },
+  { icon: "jp", ddi: "+81", name: "Japão" },
+  { icon: "jo", ddi: "+962", name: "Jordânia" },
+  { icon: "ki", ddi: "+686", name: "Kiribati" },
+  { icon: "xk", ddi: "+383", name: "Kosovo" },
+  { icon: "kw", ddi: "+965", name: "Kuwait" },
+  { icon: "la", ddi: "+856", name: "Laos" },
+  { icon: "ls", ddi: "+266", name: "Lesoto" },
+  { icon: "lv", ddi: "+371", name: "Letônia" },
+  { icon: "lb", ddi: "+961", name: "Líbano" },
+  { icon: "lr", ddi: "+231", name: "Libéria" },
+  { icon: "ly", ddi: "+218", name: "Líbia" },
+  { icon: "li", ddi: "+423", name: "Liechtenstein" },
+  { icon: "lt", ddi: "+370", name: "Lituânia" },
+  { icon: "lu", ddi: "+352", name: "Luxemburgo" },
+  { icon: "mo", ddi: "+853", name: "Macau" },
+  { icon: "mk", ddi: "+389", name: "República da Macedônia" },
+  { icon: "mg", ddi: "+261", name: "Madagascar" },
+  { icon: "my", ddi: "+60", name: "Malásia" },
+  { icon: "mw", ddi: "+265", name: "Malawi" },
+  { icon: "ml", ddi: "+223", name: "Mali" },
+  { icon: "mt", ddi: "+356", name: "Malta" },
+  { icon: "ma", ddi: "+212", name: "Marrocos" },
+  { icon: "mq", ddi: "+596", name: "Martinica" },
+  { icon: "mu", ddi: "+230", name: "Maurícia" },
+  { icon: "mr", ddi: "+222", name: "Mauritânia" },
+  { icon: "yt", ddi: "+269", name: "Mayotte" },
+  { icon: "mx", ddi: "+52", name: "México" },
+  { icon: "fm", ddi: "+691", name: "Estados Federados da Micronésia" },
+  { icon: "mz", ddi: "+258", name: "Moçambique" },
+  { icon: "md", ddi: "+373", name: "Moldávia" },
+  { icon: "mc", ddi: "+377", name: "Mônaco" },
+  { icon: "mn", ddi: "+976", name: "Mongólia" },
+  { icon: "me", ddi: "+382", name: "Montenegro" },
+  { icon: "ms", ddi: "+1", name: "Montserrat" },
+  { icon: "mm", ddi: "+95", name: "Myanmar" },
+  { icon: "na", ddi: "+264", name: "Namíbia" },
+  { icon: "nr", ddi: "+674", name: "Nauru" },
+  { icon: "np", ddi: "+977", name: "Nepal" },
+  { icon: "ni", ddi: "+505", name: "Nicarágua" },
+  { icon: "ne", ddi: "+227", name: "Níger" },
+  { icon: "ng", ddi: "+234", name: "Nigéria" },
+  { icon: "nu", ddi: "+683", name: "Niue" },
+  { icon: "no", ddi: "+47", name: "Noruega" },
+  { icon: "nc", ddi: "+687", name: "Nova Caledônia" },
+  { icon: "nz", ddi: "+64", name: "Nova Zelândia" },
+  { icon: "om", ddi: "+968", name: "Omã" },
+  { icon: "nl", ddi: "+31", name: "Países Baixos" },
+  { icon: "pw", ddi: "+680", name: "Palau" },
+  { icon: "ps", ddi: "+970", name: "Palestina" },
+  { icon: "pa", ddi: "+507", name: "Panamá" },
+  { icon: "pg", ddi: "+675", name: "Papua-Nova Guiné" },
+  { icon: "pk", ddi: "+92", name: "Paquistão" },
+  { icon: "py", ddi: "+595", name: "Paraguai" },
+  { icon: "pe", ddi: "+51", name: "Peru" },
+  { icon: "pf", ddi: "+689", name: "Polinésia Francesa" },
+  { icon: "pl", ddi: "+48", name: "Polônia" },
+  { icon: "pr", ddi: "+1", name: "Porto Rico" },
+  { icon: "pt", ddi: "+351", name: "Portugal" },
+  { icon: "qa", ddi: "+974", name: "Qatar" },
+  { icon: "ke", ddi: "+254", name: "Quênia" },
+  { icon: "kg", ddi: "+996", name: "Quirguistão" },
+  { icon: "gb", ddi: "+44", name: "Reino Unido" },
+  { icon: "cf", ddi: "+236", name: "República Centro-Africana" },
+  { icon: "do", ddi: "+1", name: "República Dominicana" },
+  { icon: "cz", ddi: "+420", name: "República Tcheca" },
+  { icon: "re", ddi: "+262", name: "Reunião" },
+  { icon: "ro", ddi: "+40", name: "Romênia" },
+  { icon: "rw", ddi: "+250", name: "Ruanda" },
+  { icon: "ru", ddi: "+7", name: "Rússia" },
+  { icon: "eh", ddi: "+212", name: "Saara Ocidental" },
+  { icon: "ws", ddi: "+685", name: "Samoa" },
+  { icon: "as", ddi: "+1", name: "Samoa Americana" },
+  { icon: "sh", ddi: "+290", name: "Santa Helena (território)" },
+  { icon: "lc", ddi: "+1", name: "Santa Lúcia" },
+  { icon: "kn", ddi: "+1", name: "São Cristóvão e Nevis" },
+  { icon: "sm", ddi: "+378", name: "São Marinho" },
+  { icon: "pm", ddi: "+508", name: "Saint-Pierre e Miquelon" },
+  { icon: "st", ddi: "+239", name: "São Tomé e Príncipe" },
+  { icon: "vc", ddi: "+1", name: "São Vicente e Granadinas" },
+  { icon: "sc", ddi: "+248", name: "Seicheles" },
+  { icon: "sn", ddi: "+221", name: "Senegal" },
+  { icon: "sl", ddi: "+232", name: "Serra Leoa" },
+  { icon: "rs", ddi: "+381", name: "Sérvia" },
+  { icon: "sg", ddi: "+65", name: "Singapura" },
+  { icon: "sy", ddi: "+963", name: "Síria" },
+  { icon: "so", ddi: "+252", name: "Somália" },
+  { icon: "lk", ddi: "+94", name: "Sri Lanka" },
+  { icon: "sd", ddi: "+249", name: "Sudão" },
+  { icon: "ss", ddi: "+211", name: "Sudão do Sul" },
+  { icon: "se", ddi: "+46", name: "Suécia" },
+  { icon: "ch", ddi: "+41", name: "Suíça" },
+  { icon: "sr", ddi: "+597", name: "Suriname" },
+  { icon: "tj", ddi: "+992", name: "Tadjiquistão" },
+  { icon: "th", ddi: "+66", name: "Tailândia" },
+  { icon: "cn", ddi: "+886", name: "República da China" },
+  { icon: "tz", ddi: "+255", name: "Tanzânia" },
+  { icon: "io", ddi: "+246", name: "Território Britânico do Oceano Índico" },
+  { icon: "tl", ddi: "+670", name: "Timor-Leste" },
+  { icon: "tg", ddi: "+228", name: "Togo" },
+  { icon: "tk", ddi: "+690", name: "Tokelau" },
+  { icon: "to", ddi: "+676", name: "Tonga" },
+  { icon: "tt", ddi: "+1", name: "Trinidad e Tobago" },
+  { icon: "tn", ddi: "+216", name: "Tunísia" },
+  { icon: "tc", ddi: "+1", name: "Turcas e Caicos" },
+  { icon: "tm", ddi: "+993", name: "Turquemenistão" },
+  { icon: "tr", ddi: "+90", name: "Turquia" },
+  { icon: "tv", ddi: "+688", name: "Tuvalu" },
+  { icon: "ua", ddi: "+380", name: "Ucrânia" },
+  { icon: "ug", ddi: "+256", name: "Uganda" },
+  { icon: "uy", ddi: "+598", name: "Uruguai" },
+  { icon: "uz", ddi: "+998", name: "Uzbequistão" },
+  { icon: "vu", ddi: "+678", name: "Vanuatu" },
+  { icon: "va", ddi: "+379", name: "Vaticano" },
+  { icon: "ve", ddi: "+58", name: "Venezuela" },
+  { icon: "vn", ddi: "+84", name: "Vietnã" },
+  { icon: "wf", ddi: "+681", name: "Wallis e Futuna" },
+  { icon: "zm", ddi: "+260", name: "Zâmbia" },
+  { icon: "zw", ddi: "+263", name: "Zimbábue" },
+]);
+
+// methods
+async function set(ddi: string) {
+  const found = ddis.find((DDI) => {
+    return DDI.ddi.includes(`+${ddi}`);
+  });
+
+  if (!found) return;
+
+  Object.assign(selected, found);
+}
+async function selectDDI(ddi: IDDI) {
+  Object.assign(selected, ddi);
+  search.value = "";
+  document.body.click();
+  emit("update:modelValue", selected);
+  // emit("change");
+}
+
+// emits
+const emit = defineEmits(["update:modelValue", "change"]);
+
+// expose
+defineExpose({ set });
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Molecule.FieldGroup.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    :class="{ error }"
+    :message="getMessageByState"
+    class="field-group"
+    @blur.capture="validateAndSetState"
+  >
+    <div class="input-group">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from "vue";
+import { IRules } from "./types";
+
+// props
+interface IProps {
+  rules?: IRules;
+}
+const props = defineProps<IProps>();
+
+// computed
+const getMessageByState = computed<string>(() => {
+  if (error.value) return message.value;
+
+  return "";
+});
+
+// data
+const message = ref<string>("");
+const error = ref<boolean>(false);
+
+// methods
+function validateAndSetState(): boolean {
+  const valid = validate();
+  error.value = !valid;
+  return valid;
+}
+function validate(): boolean {
+  if (!props.rules) return true;
+
+  for (const rule of props.rules) {
+    const result = rule();
+
+    if (typeof result === "string") {
+      message.value = result;
+      return false;
+    }
+
+    if (!result) {
+      message.value = "";
+      return false;
+    }
+  }
+
+  return true;
+}
+
+// mounted
+onMounted(() => {
+  validateAndSetState();
+});
+
+// watch
+watch(() => props.rules, validateAndSetState, { deep: true });
+
+// expose
+defineExpose({ validateAndSetState });
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Molecule.FieldSelectMultiple.vue

@@ -0,0 +1,19 @@
+<template>
+  <label class="field-group">
+    <div class="input-group">
+      <select
+        type="text"
+        class="input"
+      />
+      <div class="addon !border-none !p-0 !rounded-r-md">
+        <button class="h-full btn btn-solid-primary rounded-l-none max-h-none">
+          Adicionar
+        </button>
+      </div>
+    </div>
+  </label>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

package/dist/runtime/components/Molecule.File.vue

@@ -0,0 +1,84 @@
+<template>
+  <div :disabled="isLoading">
+    <!-- field -->
+    <label
+      :class="getStatus"
+      class="field-group"
+    >
+      <!-- file -->
+      <div
+        class="input flex items-center cursor-pointer"
+        @click="view"
+      >
+        <!-- info -->
+        <p class="cursor-pointer">
+          <span v-text="getName" />
+          <b v-text="getExtension" />
+        </p>
+
+        <div
+          v-if="isLoading"
+          class="spin primary ml-2"
+        />
+      </div>
+
+      <!-- actions -->
+      <div
+        ref="DropdownActionsRef"
+        :disabled="!actions"
+        :dropdown-trigger="dropdownID"
+        class="addon cursor-pointer"
+      >
+        <i class="bi-three-dots-vertical" />
+      </div>
+    </label>
+
+    <AtomDropdown
+      :dropdown="dropdownID"
+      class="!p-1"
+    >
+      <slot />
+    </AtomDropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { EFieldStatus, IFieldHints, randomID } from "./types";
+
+interface IProps {
+  file: File;
+  hints?: IFieldHints;
+  status?: EFieldStatus;
+  actions?: boolean;
+}
+const props = defineProps<IProps>();
+
+// computed
+const getStatus = computed<EFieldStatus>(() => {
+  if (!props.status) return EFieldStatus.none;
+  return props.status;
+});
+const isLoading = computed<boolean>(() => {
+  return getStatus.value === EFieldStatus.loading;
+});
+const getName = computed(() => {
+  const parts = props.file.name.split(".");
+  parts.pop();
+  return parts.join(".");
+});
+const getExtension = computed(() => {
+  const parts = props.file.name.split(".");
+  return `.${parts[parts.length - 1]}`;
+});
+
+// data
+const dropdownID = ref<string>(randomID());
+
+// methods
+function view(): void {
+  window.open(window.URL.createObjectURL(props.file));
+}
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Molecule.SelectTreeSearchable.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="field-group">
+    <div class="input-group">
+      <AtomSelectTreeField
+        :nodes="nodesSelecteds"
+        :dropdown-trigger="dropdownID"
+        @delete="del"
+      />
+
+      <div class="addon !border-none !p-0 !rounded-r-md">
+        <button
+          :disabled="!isLastLevel"
+          class="h-full btn btn-solid-primary rounded-l-none max-h-none"
+          @click="add"
+        >
+          Adicionar
+        </button>
+      </div>
+    </div>
+
+    <div v-show="!isLastLevel">
+      <AtomDropdownSearchable
+        v-model="search"
+        :dropdown="dropdownID"
+        static
+      >
+        <li class="label !text-amber-500 flex">
+          <span
+            class="w-full"
+            v-text="getLabelByLevel"
+          />
+          <i class="bi-exclamation-triangle-fill" />
+        </li>
+
+        <li
+          v-for="(node, i) in getLastNodesFiltered"
+          :key="i"
+          class="item flex !leading-3"
+          @click="push(node)"
+        >
+          <span
+            class="!w-full"
+            v-text="node.label"
+          />
+          <i class="bi-chevron-right ml-3" />
+        </li>
+      </AtomDropdownSearchable>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from "vue";
+import { ISelectTree, INodes, INode, sleep } from "./types";
+import { randomID } from "./types";
+
+// props
+interface IProps {
+  selectTree: ISelectTree;
+}
+const props = defineProps<IProps>();
+
+// emits
+interface IEmits {
+  (e: "add", nodes: INodes): void;
+}
+const emit = defineEmits<IEmits>();
+
+// computed
+const getLabelByLevel = computed<string>(() => {
+  const labels = props.selectTree.labels;
+
+  if (isLastLevel.value) {
+    return `Selecione: ${labels.slice(-1)}`;
+  }
+
+  return `Selecione: ${labels[getLevel.value]}`;
+});
+const getLastNodes = computed<INodes | []>(() => {
+  if (nodesSelectedsIsEmpty.value) return props.selectTree.nodes;
+
+  return nodesSelecteds.slice(-1)[0].children ?? [];
+});
+const getLastNodesFiltered = computed<INodes | []>(() => {
+  if (!search.value.trim()) return getLastNodes.value;
+
+  return getLastNodes.value.filter(
+    ({ label }) => !!label.match(new RegExp(search.value, "i"))
+  );
+});
+const isLastLevel = computed<boolean>(() => {
+  return props.selectTree.labels.length === getLevel.value;
+});
+const nodesSelectedsIsEmpty = computed<boolean>(() => !nodesSelecteds.length);
+const getLevel = computed<number>(() => nodesSelecteds.length);
+
+// data
+const dropdownID = ref<string>(randomID());
+const search = ref<string>("");
+const nodesSelecteds = reactive<INodes>([]);
+
+// methods
+function add(): void {
+  emit("add", [...nodesSelecteds]);
+  reset();
+}
+async function push(nodeSelected: INode): Promise<void> {
+  await sleep(0);
+
+  if (isLastLevel.value) {
+    nodesSelecteds.pop();
+  }
+
+  nodesSelecteds.push(nodeSelected);
+
+  search.value = "";
+}
+function del(node: INode): void {
+  nodesSelecteds.length = nodesSelecteds.indexOf(node);
+}
+function reset(): void {
+  nodesSelecteds.length = 0;
+}
+</script>
+
+<style scoped></style>