vue-wiguet-chatweb 0.1.23 → 0.1.25

package/src/components/ODialog/ODialog.vue

@@ -0,0 +1,85 @@
+<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);
+  }
+}
+</style>

package/src/components/Widget.vue

@@ -53,6 +53,24 @@
         @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>
 
@@ -65,7 +83,7 @@ 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