vue-wiguet-chatweb 0.1.28 → 0.1.29

package/src/components/ODialog/IPropsDialog.ts

@@ -1,4 +1,4 @@
-import { IPropsSidebar } from './IPropsSidebar';
-
-
-export interface IPropsDialog extends IPropsSidebar {}
+import { IPropsSidebar } from './IPropsSidebar';
+
+
+export interface IPropsDialog extends IPropsSidebar {}

package/src/components/ODialog/IPropsSidebar.ts

@@ -1,13 +1,13 @@
-export interface IPropsSidebar {
-  modelValue?: boolean;
-  title?: string;
-  // isLoading?: boolean;
-  // hideActions?: boolean;
-  // hideHeader?: boolean;
-  // acceptFn?: () => Promise<boolean>;
-  // beforeAcceptFn?: () => Promise<boolean>;
-  // disable?: boolean;
-
-  // solo para v-bind
-  'onUpdate:modelValue'?: (args: IPropsSidebar['modelValue'])=> void
-}
+export interface IPropsSidebar {
+  modelValue?: boolean;
+  title?: string;
+  // isLoading?: boolean;
+  // hideActions?: boolean;
+  // hideHeader?: boolean;
+  // acceptFn?: () => Promise<boolean>;
+  // beforeAcceptFn?: () => Promise<boolean>;
+  // disable?: boolean;
+
+  // solo para v-bind
+  'onUpdate:modelValue'?: (args: IPropsSidebar['modelValue'])=> void
+}

package/src/components/ODialog/ODialog.vue

@@ -1,85 +1,107 @@
-<template>
-  <div v-if="props.modelValue" class="dialog-overlay" @click="closeDialog">
-    <div class="dialog-content" @click.stop>
-      <div class="header-widget">
-        <h4 class="title-chat">{{ title }}</h4>
-        <button @click="() => closeDialog()" class="btn-close">
-          <IconClose class="pointer" />
-        </button>
-      </div>
-
-      <div>
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import IconClose from '../IconClose.vue'
-import { IPropsDialog } from './IPropsDialog';
-
-const props = defineProps<IPropsDialog>()
-
-const emit = defineEmits(['update:modelValue']);
-
-const closeDialog = () => {
-  emit("update:modelValue", false);
-};
-</script>
-
-<style scoped>
-.dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  opacity: 0;
-  animation: fadeIn 0.3s forwards;
-}
-
-.dialog-content {
-  background-color: white;
-  padding: 15px;
-  border-radius: 8px;
-  text-align: center;
-  animation: slideIn 0.3s ease-out forwards;
-}
-
-@keyframes fadeIn {
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes slideIn {
-  from {
-    transform: translateY(-50px);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-.dialog-overlay.v-enter-active,
-.dialog-overlay.v-leave-active {
-  transition: opacity 0.3s;
-}
-
-.btn-close {
-  padding: 0;
-  background-color: transparent;
-  border: none;
-  display: flex;
-  align-items: center;
-  border-radius: 50%;
-  &:hover {
-    background-color: rgba(202, 202, 202, 0.534);
-  }
-}
+<template>
+  <Teleport v-if="isReadyTeleport" to="#dialogs">
+    <div v-if="props.modelValue" class="dialog-overlay" @click="closeDialog">
+    <div class="dialog-content" @click.stop>
+      <div class="header-widget">
+        <h4 class="title-chat">{{ title }}</h4>
+        <button @click="() => closeDialog()" class="btn-close">
+          <IconClose class="pointer" />
+        </button>
+      </div>
+
+      <div>
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import IconClose from '../IconClose.vue'
+import { IPropsDialog } from './IPropsDialog';
+
+const props = defineProps<IPropsDialog>()
+
+const emit = defineEmits(['update:modelValue']);
+
+const isReadyTeleport = ref(false);
+
+
+const closeDialog = () => {
+  emit("update:modelValue", false);
+};
+
+onMounted(() => {
+  const app = document.getElementById("app")
+
+  if(!app) throw new Error('app is required')
+
+  let dialogContainer = document.getElementById("dialogs");
+
+  if (!dialogContainer) {
+    dialogContainer = document.createElement("div");
+    dialogContainer.id = "dialogs";
+    dialogContainer.classList.add('widget-component')
+    app.appendChild(dialogContainer);
+    isReadyTeleport.value = true
+  }
+});
+</script>
+
+<style scoped>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  animation: fadeIn 0.3s forwards;
+}
+
+.dialog-content {
+  background-color: white;
+  padding: 15px;
+  border-radius: 8px;
+  text-align: center;
+  animation: slideIn 0.3s ease-out forwards;
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-50px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.dialog-overlay.v-enter-active,
+.dialog-overlay.v-leave-active {
+  transition: opacity 0.3s;
+}
+
+.btn-close {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  display: flex;
+  align-items: center;
+  border-radius: 50%;
+  &:hover {
+    background-color: rgba(202, 202, 202, 0.534);
+  }
+}
 </style>

package/src/components/Widget.vue

@@ -1,205 +1,187 @@
-<template>
-  <div
-    class="widget-css-reset widget-container"
-    :class="isDarkMode ? 'chat-dark-mode' : ''"
-  >
-    <div
-      id="chat-circle"
-      class="widget-container"
-      v-if="props.tokenAuth.length > 10"
-      v-show="!isChatBoxVisible"
-    >   
-      <div class="container-buttons-chat" :class="{'active': toggleButtonsChats}">
-        <a href="javascript:;"  class="button whatsapp" @click="go(MeansCommunication.WHATSAPP)">
-          <IconWhatsApp />
-        </a>
-
-        <a href="javascript:;"  class="button telegram" @click="go(MeansCommunication.TELEGRAM)">
-          <IconTelegram />
-        </a>
-
-        <a 
-          href="javascript:;"
-          class="button webchat"
-          title="Debe estar autenticado"
-          :class="{'disabled': props.tokenAuth.length < 10 }"
-          @click="toggleButtonsChats && props.tokenAuth.length > 10 && toggleChat()"
-        >
-          <IconChat />
-        </a>
-      </div>
-    
-      <div class="new-message-badge" v-if="newMessages" >
-        {{ newMessages > 9 ? "9+" : newMessages }}
-      </div>
-      <a href="javascript:;" @click="props.tokenAuth.length > 10 && toggleChat()">
-        <IconWidget />
-      </a>
-    </div>
-
-    <div class="chat-box" v-show="isChatBoxVisible">
-      <Chat
-        v-if="tokenAuth"
-        :visible="isChatBoxVisible"
-        :titlePrincipal="titlePrincipal"
-        :toggleChat="toggleChat"
-        :tokenAuth="tokenAuth"
-        :user="user"
-        @show-toast="(data) => emit('show-toast', data)"
-        @show-confirm="(data) => emit('show-confirm', data)"
-        @clear-new-messages="newMessages = 0"
-        @new-message="() => newMessages++"
-        @not-viewed-total="(val) => (newMessages = val)"
-        @on-qualifying="(args)=> emit('onQualifying', args)"
-      />
-    </div>
-
-    <Button label="Show" @click="visible = true" />
-
-<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
-    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
-    <div class="flex items-center gap-4 mb-4">
-        <label for="username" class="font-semibold w-24">Username</label>
-        <InputText id="username" class="flex-auto" autocomplete="off" />
-    </div>
-    <div class="flex items-center gap-4 mb-8">
-        <label for="email" class="font-semibold w-24">Email</label>
-        <InputText id="email" class="flex-auto" autocomplete="off" />
-    </div>
-    <div class="flex justify-end gap-2">
-        <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
-        <Button type="button" label="Save" @click="visible = false"></Button>
-    </div>
-</Dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType, ref } from "vue";
-import Chat from "./Chat.vue";
-import IconWidget from "./IconWidget.vue";
-import IconTelegram from "./IconTelegram.vue";
-import IconWhatsApp from "./IconWhatsApp.vue";
-import IconChat from "./IconChat.vue";
-
-const emit = defineEmits(["show-toast", "show-confirm", "onQualifying"]);
-const visible = ref(true);
-const enum MeansCommunication{
-  WHATSAPP,
-  TELEGRAM
-}
-
-function go(means: MeansCommunication) {
-  const cellphoneNumbers = window.VITE_CELLPHONE_NUMBERS?.split(',') ?? [];
-  
-  if (cellphoneNumbers.length === 0) {
-    console.warn('not found cellphone numbers')
-    return
-  }
-
-  toggleButtonsChats.value = false;
-
-  const index = Math.floor(Math.random() * cellphoneNumbers.length)
-  
-  if(MeansCommunication['WHATSAPP'] === means) {
-    window.open('https://wa.me/'+ cellphoneNumbers[index], 'WhatsApp', 'noopener')
-    return;
-  }
-
-  window.open('https://t.me/+' + cellphoneNumbers[index], 'Telegram', 'noopener')
-}
-
-const isChatBoxVisible = ref(false);
-const newMessages = ref(0);
-const toggleButtonsChats = ref(false);
-
-const toggleChat = () => {
-  isChatBoxVisible.value = !isChatBoxVisible.value;
-};
-
-const props = defineProps({
-  tokenAuth: { type: String, required: true },
-  titlePrincipal: { type: String },
-  user: {
-    type: Object as PropType<{
-      nombreCompleto: string;
-      ci: string;
-      msPersonaId: number;
-    }>,
-    required: true,
-  },
-  isDarkMode: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
-<style>
-@import url(../style.css);
-</style>
-
-<style scoped>
-
-.disabled {
-  color: currentColor;
-  cursor: not-allowed !important;
-  opacity: 0.4 !important;
-  text-decoration: none;
-}
-
-.container-buttons-chat { 
-  position: relative;
-  right: -1.8rem;
-}
-.button {
-  position: absolute;
-  width: 2.5rem;
-  height: 2.5rem;
-
-  opacity: 0;
-  box-shadow: 0px 1px 3px 1px #c0c0c0;
-  border-radius: 100%;
-  border: 1px solid white;
-  background-color: white;
-  overflow: hidden;
-  cursor: pointer;
-  transition: transform 0.5s ease, opacity 0.3s ease;
-  z-index: -1;
-}
-
-.container-buttons-chat.active > a {
-  z-index: 1;
-  opacity: 1;
-}
-
-.container-buttons-chat.active .whatsapp {
-  transform: translateY(-150px); /* Subir más arriba */
-}
-
-.container-buttons-chat.active .telegram {
-  transform: translateY(-100px); /* Subir más arriba */
-}
-
-.container-buttons-chat.active .webchat {
-  transform: translateY(-50px); /* Subir más arriba */
-}
-
-.widget-container {
-  position: relative;
-}
-.new-message-badge {
-  position: absolute;
-  background-color: red;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  font-family: "Roboto", sans-serif;
-  align-items: center;
-  font-weight: 500;
-  justify-content: center;
-  border-radius: 50%;
-  right: -2px;
-  top: -4px;
-  z-index: 2;
-}
-</style>
+<template>
+  <div
+    class="widget-component widget-css-reset widget-container"
+    :class="isDarkMode ? 'chat-dark-mode' : ''"
+  >
+    <div
+      id="chat-circle"
+      class="widget-container"
+      v-if="props.tokenAuth.length > 10"
+      v-show="!isChatBoxVisible"
+    >   
+      <div class="container-buttons-chat" :class="{'active': toggleButtonsChats}">
+        <a href="javascript:;"  class="button whatsapp" @click="go(MeansCommunication.WHATSAPP)">
+          <IconWhatsApp />
+        </a>
+
+        <a href="javascript:;"  class="button telegram" @click="go(MeansCommunication.TELEGRAM)">
+          <IconTelegram />
+        </a>
+
+        <a 
+          href="javascript:;"
+          class="button webchat"
+          title="Debe estar autenticado"
+          :class="{'disabled': props.tokenAuth.length < 10 }"
+          @click="toggleButtonsChats && props.tokenAuth.length > 10 && toggleChat()"
+        >
+          <IconChat />
+        </a>
+      </div>
+    
+      <div class="new-message-badge" v-if="newMessages" >
+        {{ newMessages > 9 ? "9+" : newMessages }}
+      </div>
+      <a href="javascript:;" @click="props.tokenAuth.length > 10 && toggleChat()">
+        <IconWidget />
+      </a>
+    </div>
+
+    <div class="chat-box" v-show="isChatBoxVisible">
+      <Chat
+        v-if="tokenAuth"
+        :visible="isChatBoxVisible"
+        :titlePrincipal="titlePrincipal"
+        :toggleChat="toggleChat"
+        :tokenAuth="tokenAuth"
+        :user="user"
+        @show-toast="(data) => emit('show-toast', data)"
+        @show-confirm="(data) => emit('show-confirm', data)"
+        @clear-new-messages="newMessages = 0"
+        @new-message="() => newMessages++"
+        @not-viewed-total="(val) => (newMessages = val)"
+        @on-qualifying="(args)=> emit('onQualifying', args)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref } from "vue";
+import Chat from "./Chat.vue";
+import IconWidget from "./IconWidget.vue";
+import IconTelegram from "./IconTelegram.vue";
+import IconWhatsApp from "./IconWhatsApp.vue";
+import IconChat from "./IconChat.vue";
+
+const emit = defineEmits(["show-toast", "show-confirm", "onQualifying"]);
+const visible = ref(true);
+const enum MeansCommunication{
+  WHATSAPP,
+  TELEGRAM
+}
+
+function go(means: MeansCommunication) {
+  const cellphoneNumbers = window.VITE_CELLPHONE_NUMBERS?.split(',') ?? [];
+  
+  if (cellphoneNumbers.length === 0) {
+    console.warn('not found cellphone numbers')
+    return
+  }
+
+  toggleButtonsChats.value = false;
+
+  const index = Math.floor(Math.random() * cellphoneNumbers.length)
+  
+  if(MeansCommunication['WHATSAPP'] === means) {
+    window.open('https://wa.me/'+ cellphoneNumbers[index], 'WhatsApp', 'noopener')
+    return;
+  }
+
+  window.open('https://t.me/+' + cellphoneNumbers[index], 'Telegram', 'noopener')
+}
+
+const isChatBoxVisible = ref(false);
+const newMessages = ref(0);
+const toggleButtonsChats = ref(false);
+
+const toggleChat = () => {
+  isChatBoxVisible.value = !isChatBoxVisible.value;
+};
+
+const props = defineProps({
+  tokenAuth: { type: String, required: true },
+  titlePrincipal: { type: String },
+  user: {
+    type: Object as PropType<{
+      nombreCompleto: string;
+      ci: string;
+      msPersonaId: number;
+    }>,
+    required: true,
+  },
+  isDarkMode: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+<style>
+@import url(../style.css);
+</style>
+
+<style scoped>
+
+.disabled {
+  color: currentColor;
+  cursor: not-allowed !important;
+  opacity: 0.4 !important;
+  text-decoration: none;
+}
+
+.container-buttons-chat { 
+  position: relative;
+  right: -1.8rem;
+}
+.button {
+  position: absolute;
+  width: 2.5rem;
+  height: 2.5rem;
+
+  opacity: 0;
+  box-shadow: 0px 1px 3px 1px #c0c0c0;
+  border-radius: 100%;
+  border: 1px solid white;
+  background-color: white;
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform 0.5s ease, opacity 0.3s ease;
+  z-index: -1;
+}
+
+.container-buttons-chat.active > a {
+  z-index: 1;
+  opacity: 1;
+}
+
+.container-buttons-chat.active .whatsapp {
+  transform: translateY(-150px); /* Subir más arriba */
+}
+
+.container-buttons-chat.active .telegram {
+  transform: translateY(-100px); /* Subir más arriba */
+}
+
+.container-buttons-chat.active .webchat {
+  transform: translateY(-50px); /* Subir más arriba */
+}
+
+.widget-container {
+  position: relative;
+}
+.new-message-badge {
+  position: absolute;
+  background-color: red;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  font-family: "Roboto", sans-serif;
+  align-items: center;
+  font-weight: 500;
+  justify-content: center;
+  border-radius: 50%;
+  right: -2px;
+  top: -4px;
+  z-index: 2;
+}
+</style>

package/src/components/__tests__/Chat.spec.ts

@@ -1,6 +1,6 @@
-import { expect, it } from 'vitest'
-import Chat from '../Chat.vue'
-
-it('definido', () => {
-  expect(Chat).toBeDefined()
+import { expect, it } from 'vitest'
+import Chat from '../Chat.vue'
+
+it('definido', () => {
+  expect(Chat).toBeDefined()
 })

package/src/components/__tests__/ChatMessage.spec.ts

@@ -1,6 +1,6 @@
-import { expect, it } from 'vitest'
-import ChatMessage from '../ChatMessage.vue'
-
-it('definido', () => {
-  expect(ChatMessage).toBeDefined()
+import { expect, it } from 'vitest'
+import ChatMessage from '../ChatMessage.vue'
+
+it('definido', () => {
+  expect(ChatMessage).toBeDefined()
 })