contactstudiocstools 1.0.224

package/dist/runtime/components/Atom.DraggableWindow.vue

@@ -0,0 +1,102 @@
+<template>
+  <div
+    v-if="visible"
+    class="draggable absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col overflow-hidden scrollbar z-50 shadow-lg rounded-md !bg-white dark:!bg-slate-900 chatbg"
+  >
+    <header class="dragzone flex flex-col sticky top-0 z-10 bg-slate-700">
+      <ul class="tabs pl-2 mt-3 whitespace-nowrap">
+        <li class="tab active bg-white dark:bg-slate-800 normal-case">
+          Histórico de Conversas
+        </li>
+        <li class="tab flex-1 justify-end">
+          <i
+            class="bi-x-lg text-error text-sm leading-3 px-2 pb-2"
+            @click="hide"
+          />
+        </li>
+      </ul>
+    </header>
+    <article
+      class="p-2 h-full overflow-auto scrollbar z-10 border dark:border-slate-800"
+    >
+      <div class="flex justify-center">
+        <span
+          class="text-center text- my-3 badge badge-outline-secondary w-fit bg-white dark:bg-slate-900"
+        >{{ title }}</span>
+      </div>
+      <slot />
+    </article>
+    <footer class="dragzone cursor-pointer w-full h-12 bg-slate-700 z-10" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+// data
+const visible = ref<boolean>(false);
+const title = ref<string>("");
+
+// methods
+function show(text: string = "") {
+  visible.value = true;
+  title.value = text;
+
+  setTimeout(() => {
+    const draggable = document.querySelector(".draggable");
+    for (const dragzone of document.querySelectorAll(".dragzone")) {
+      dragElement(draggable, dragzone);
+    }
+  }, 500);
+}
+function hide() {
+  visible.value = false;
+}
+
+const dragElement = (element: any, dragzone: any) => {
+  let pos1 = 0,
+    pos2 = 0,
+    pos3 = 0,
+    pos4 = 0;
+  const dragMouseUp = () => {
+    document.onmouseup = null;
+    document.onmousemove = null;
+  };
+
+  const dragMouseMove = (event: any) => {
+    event.preventDefault();
+    pos1 = pos3 - event.clientX;
+    pos2 = pos4 - event.clientY;
+    pos3 = event.clientX;
+    pos4 = event.clientY;
+    element.style.top = `${element.offsetTop - pos2}px`;
+    element.style.left = `${element.offsetLeft - pos1}px`;
+  };
+
+  const dragMouseDown = (event: any) => {
+    event.preventDefault();
+
+    pos3 = event.clientX;
+    pos4 = event.clientY;
+
+    document.onmouseup = dragMouseUp;
+    document.onmousemove = dragMouseMove;
+  };
+
+  dragzone.onmousedown = dragMouseDown;
+};
+
+// expose
+defineExpose({ show, hide });
+</script>
+
+<style scoped>
+.chatbg::after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background: url(../public/chatbg.png);
+  background-size: cover;
+}
+</style>

package/dist/runtime/components/Atom.Dropdown.vue

@@ -0,0 +1,9 @@
+<template>
+  <ul class="dropdown text-black">
+    <slot />
+  </ul>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

package/dist/runtime/components/Atom.DropdownSearchable.vue

@@ -0,0 +1,25 @@
+<template>
+  <ul class="dropdown">
+    <form class="field-group mb-2">
+      <input
+        :value="modelValue"
+        type="search"
+        placeholder="Pesquise"
+        class="input bg-slate-100 dark:bg-slate-700"
+        @input=" $emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      >
+    </form>
+    <slot />
+  </ul>
+</template>
+
+<script setup lang="ts">
+interface IProps {
+  modelValue?: string;
+}
+defineProps<IProps>();
+
+defineEmits(["update:modelValue"]);
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Atom.Fetch.vue

@@ -0,0 +1,46 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+import { useFetch, UseFetchOptions, useNuxtApp } from "#app"
+
+// props
+interface IProps {
+  url: string
+  success: Function
+  options?: UseFetchOptions<any>
+  error?: Function
+  finally?: Function
+}
+const props = defineProps<IProps>()
+
+// app
+const { $emit } = useNuxtApp()
+
+await new Promise(resolve=>setTimeout(resolve, 2000))
+
+async function load(): Promise<void> {
+  const { data, error, refresh } = await useFetch(props.url, props.options)
+
+  if (error.value && props.error) {
+    if (error.value.statusCode === 401) {
+      $emit("auth:logout")
+      return
+    }
+
+    props.error({ error: error.value, refresh })
+    return
+  }
+
+  props.success(data.value)
+
+  if (props.finally) {
+    props.finally({ data: data.value, error: error.value, refresh })
+  }
+}
+
+await load()
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Atom.Field.vue

@@ -0,0 +1,43 @@
+<template>
+  <component
+    :is="getComponentByType()"
+    :field="field"
+  />
+</template>
+
+<script setup lang="ts">
+import { resolveComponent } from "vue";
+import { EFieldTypes, IField } from "./types";
+
+// props
+interface IProps {
+  type?: EFieldTypes;
+  field?: IField
+}
+const props = defineProps<IProps>();
+
+// method
+function getComponentByType() {
+  if (props.type === EFieldTypes.date) {
+    return resolveComponent("AtomFieldDate");
+  }
+  if (props.type === EFieldTypes.text) {
+    return resolveComponent("AtomFieldText");
+  }
+  if (props.type === EFieldTypes.phone) {
+    return resolveComponent("AtomFieldPhone");
+  }
+  if (props.type === EFieldTypes.number) {
+    return resolveComponent("AtomFieldNumber");
+  }
+  if (props.type === EFieldTypes.textarea) {
+    return resolveComponent("AtomFieldTextarea");
+  }
+  if (props.type === EFieldTypes.select) {
+    return resolveComponent("AtomFieldSelect");
+  }
+  return resolveComponent("AtomFieldText");
+}
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Atom.FieldDate.vue

@@ -0,0 +1,19 @@
+<template>
+  <input
+    :value="modelValue"
+    type="date"
+    class="input w-1"
+    @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+  >
+</template>
+
+<script setup lang="ts">
+interface IProps {
+  modelValue?: string;
+}
+defineProps<IProps>();
+
+defineEmits(["update:modelValue"]);
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Atom.FieldNumber.vue

@@ -0,0 +1,19 @@
+<template>
+  <input
+    :value="modelValue"
+    type="number w-1"
+    class="input"
+    @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+  >
+</template>
+
+<script setup lang="ts">
+interface IProps {
+  modelValue?: string;
+}
+defineProps<IProps>();
+
+defineEmits(["update:modelValue"]);
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Atom.FieldPhone.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="input-group">
+    <MoleculeDropdownDDI
+      ref="MoleculeDropdownDDIRef"
+      v-model="ddi"
+      class="addon"
+      :disabled="field?.disabled || loading"
+    />
+    <input
+      v-model="phone"
+      :disabled="field?.disabled || loading"
+      type="tel"
+      class="input w-1"
+      @blur="verifyNumberHasDDI"
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from "vue";
+import { getDDI, IField, IDDI, getDefaultDDI, sleep } from "./types";
+import { useNuxtApp } from "#app";
+import MoleculeDropdownDDI from "./Molecule.DropdownDDI.vue";
+
+// props
+interface IProps {
+  modelValue?: any;
+  field?: IField;
+}
+const props = defineProps<IProps>();
+
+// mounted
+onMounted(setByNumber);
+
+// data
+const { $listen } = useNuxtApp();
+const MoleculeDropdownDDIRef = ref<InstanceType<
+  typeof MoleculeDropdownDDI
+> | null>(null);
+const loading = ref<boolean>(false);
+const ddi = reactive<IDDI>(getDefaultDDI());
+const phone = ref<string>(props.modelValue);
+
+// methods
+async function setByNumber() {
+  if (!/^[+][0-9]{9,}$/.test(phone.value)) return;
+
+  try {
+    loading.value = true;
+    const { DDI, national_number } = await getDDI(phone.value);
+
+    MoleculeDropdownDDIRef.value?.set(DDI);
+    phone.value = national_number;
+    updatePhone();
+  } finally {
+    loading.value = false;
+  }
+}
+function updatePhone() {
+  emit("update:modelValue", getPhoneWithDDI());
+}
+function getPhoneWithDDI() {
+  return `${ddi.ddi}${phone.value}`;
+}
+async function verifyNumberHasDDI() {
+  if(!phone.value) return
+
+  if (phone.value[0]?.includes("+")) {
+    await setByNumber();
+  }
+
+  updatePhone();
+}
+
+watch(() => ddi.ddi, updatePhone);
+
+// emits
+const emit = defineEmits(["update:modelValue"]);
+$listen("form:append", async () => {
+  await sleep(0);
+  phone.value = props.modelValue;
+  verifyNumberHasDDI();
+});
+</script>
+
+<style scoped>
+.input-phone {
+  width: 100%;
+  height: 100%;
+  outline: none;
+}
+</style>

package/dist/runtime/components/Atom.FieldSelect.vue

@@ -0,0 +1,28 @@
+<template>
+  <select
+    :value="modelValue"
+    class="input w-1"
+    @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+  >
+    <option
+      v-for="({ label, value }, i) in field?.options"
+      :key="i"
+      :value="value"
+      v-text="label"
+    />
+  </select>
+</template>
+
+<script setup lang="ts">
+import type { IField } from "./types";
+
+interface IProps {
+  field: IField;
+  modelValue?: string;
+}
+
+defineProps<IProps>();
+
+defineEmits(["update:modelValue"]);
+</script>
+<style scoped></style>

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

@@ -0,0 +1,49 @@
+<template>
+  <label class="input max-h-none flex cursor-pointer justify-between">
+    <span
+      v-if="optionsIsEmpty"
+      class="pl-2"
+    >Selecione</span>
+
+    <div class="flex flex-wrap">
+      <span
+        v-for="(option, i) in options"
+        :key="i"
+        class="badge badge-soft-secondary mx-1 my-1  text-sm leading-3"
+        @click="del(option)"
+      >
+        <span v-text="option.label" />
+        <i class="bi-x-circle-fill text-red-500 ml-2" />
+      </span>
+    </div>
+
+    <i class="bi-chevron-down ml-4" />
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { IFieldSelectOption, IFieldSelectOptions } from "./types";
+
+// props
+interface IProps {
+  options: IFieldSelectOptions;
+}
+const props = defineProps<IProps>();
+
+// emits
+interface IEmits {
+  (e: "delete", option: IFieldSelectOption): void;
+}
+const emit = defineEmits<IEmits>();
+
+// computed
+const optionsIsEmpty = computed<boolean>(() => !props.options.length);
+
+// methods
+function del(option: IFieldSelectOption): void {
+  emit("delete", option);
+}
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Atom.FieldText.vue

@@ -0,0 +1,19 @@
+<template>
+  <input
+    :value="modelValue"
+    type="text"
+    class="input w-1"
+    @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+  >
+</template>
+
+<script setup lang="ts">
+interface IProps {
+  modelValue?: string;
+}
+defineProps<IProps>();
+
+defineEmits(["update:modelValue"]);
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Atom.FieldTextarea.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="input-group">
+    <textarea
+      :value="modelValue"
+      class="input rounded-tr-md rounded-br-md w-1"
+      @input="
+        $emit('update:modelValue', ($event.target as HTMLInputElement).value)
+      "
+    />
+
+    <!-- maxlength -->
+    <span
+      v-if="field?.maxlength"
+      class="absolute top-0 right-0 text-[11px] text-secondary"
+    >
+      {{ counter({ maxlength: field.maxlength, value: modelValue }) }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { IField } from "./types";
+
+interface IProps {
+  modelValue?: string;
+  field?: IField;
+}
+
+defineProps<IProps>();
+
+// computed
+const counter = computed<Function>(() => ({ value, maxlength }: any) => {
+  return `${value?.length ?? 0}/${maxlength}`;
+});
+
+// emits
+defineEmits(["update:modelValue"]);
+</script>
+
+<style></style>

package/dist/runtime/components/Atom.Loading.vue

@@ -0,0 +1,80 @@
+<template>
+  <section class="absolute left-0 top-0 w-full h-screen z-20 overflow-hidden">
+    <header
+      class="absolute flex items-center w-full h-16 bg-slate-800 z-10 pointer-events-none"
+    >
+      <img
+        src="../public/192x192.png"
+        class="w-8 min-w-2rem m-4"
+        alt="ContactStudio Logo"
+      >
+
+      <div>
+        <div class="w-96 h-3 bg-slate-700 rounded-full animate-pulse" />
+        <div
+          class="w-36 h-2 bg-slate-700 mt-2 rounded-full animate-pulse"
+        />
+      </div>
+    </header>
+    <nav
+      class="sidenav flex flex-col justify-between !transition-none absolute w-[60px] h-full pt-[72px] max-sm:hidden pointer-events-none"
+    >
+      <article>
+        <ul class="list sidenav-item-full">
+          <li class="item sidenav-item h-9">
+            <i
+              class="bi-exclamation-triangle-fill leading-none text-base text-warn -ml-1"
+            />
+          </li>
+        </ul>
+        <div class="divider" />
+        <ul
+          v-for="i in 3"
+          :key="i"
+          class="list sidenav-item-full mb-2"
+        >
+          <li
+            class="item sidenav-item bg-slate-200 dark:bg-slate-800 h-9 animate-pulse"
+          />
+        </ul>
+        <div class="divider" />
+        <ul class="list sidenav-item-full mb-2">
+          <li
+            class="item sidenav-item bg-slate-200 dark:bg-slate-800 h-9 animate-pulse"
+          />
+        </ul>
+      </article>
+      <aside>
+        <ul class="list sidenav-item-full mb-2">
+          <li
+            class="item sidenav-item bg-slate-200 dark:bg-slate-800 h-9 animate-pulse"
+          />
+        </ul>
+        <div class="divider" />
+        <ul class="list sidenav-item-full mb-2">
+          <li class="item sidenav-item">
+            <i
+              class="bi-box-arrow-in-left text-lg leading-none mr-5 text-error"
+            />
+          </li>
+        </ul>
+      </aside>
+    </nav>
+    <article class="absolute w-full h-screen p-24 max-sm:px-10 pointer-events-none">
+      <aside class="bg-slate-200 dark:bg-slate-800 w-full h-24 rounded-lg animate-pulse" />
+
+      <div
+        class="mt-8 flex max-sm:flex-wrap w-full gap-8"
+        style="height: calc(100vh - 300px);"
+      >
+        <aside class="bg-slate-200 dark:bg-slate-800 w-full sm:w-1/4 h-1/4 rounded-lg animate-pulse" />
+        <aside class="bg-slate-200 dark:bg-slate-800 w-full sm:w-2/4 h-1/2 rounded-lg animate-pulse" />
+        <aside class="bg-slate-200 dark:bg-slate-800 w-full sm:w-1/4 h-1/3 rounded-lg animate-pulse" />
+      </div>
+    </article>
+  </section>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

package/dist/runtime/components/Atom.Notification.vue

@@ -0,0 +1,48 @@
+<template>
+  <div />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useNuxtApp, useRuntimeConfig } from "#app";
+
+// data
+const { BASE_URL } = useRuntimeConfig().public;
+const { $listen } = useNuxtApp();
+
+// mounted
+onMounted(async () => {
+  const filename = process.dev ? "dev-sw.js" : "sw.js";
+  sw.value = await navigator.serviceWorker.register(`${BASE_URL}/${filename}`);
+});
+
+// data
+const sw = ref<ServiceWorkerRegistration | null>(null);
+
+// methods
+async function show({ title, message, image }: any): Promise<void> {
+  if (!("serviceWorker" in navigator) || !("PushManager" in window)) {
+    console.error("Browser does not support notifications");
+    return;
+  }
+
+  if (!sw.value) return;
+
+  const permission = await Notification.requestPermission();
+
+  if (permission !== "granted") return;
+
+  sw.value.showNotification(title, {
+    body: message,
+    icon: image ?? `${BASE_URL}/192x192.png`,
+    vibrate: [200, 100, 200],
+  });
+}
+
+// emits
+$listen("notification:show", ({ title, message, image }: any) => {
+  show({ title, message, image });
+});
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Atom.Ringtone.vue

@@ -0,0 +1,23 @@
+<template>
+  <div />
+</template>
+
+<script setup lang="ts">
+import sound from "../public/ringtone.mp3";
+import { useNuxtApp } from "#app";
+
+const { $listen } = useNuxtApp();
+
+$listen("ringtone:play", (tone?: string) => {
+  const audio = new Audio(tone ?? sound);
+  audio.oncanplaythrough = () => {
+    audio.play().catch(() => {
+      window.addEventListener("click", () => {
+        audio.play();
+      }, { once: true });
+    });
+  };
+});
+</script>
+
+<style scoped></style>