vue-wiguet-chatweb 0.1.22 → 0.1.24

package/src/components/ODialog/IPropsSidebar.ts

@@ -0,0 +1,17 @@
+import type { DrawerProps } from "primevue/drawer";
+
+export interface IPropsSidebar {
+  modelValue: boolean;
+  dismissable?: boolean;
+  position?: DrawerProps['position'];
+  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

@@ -0,0 +1,82 @@
+<template>
+  <Dialog
+    :visible="propsComponent.modelValue"
+    :dismissable
+    :position
+    @update:visible="(val: boolean) => emit('update:modelValue', val)"
+    class="!w-auto min-w-[20rem] dark:!bg-[var(--theme-background-secondary)]"
+  >
+    <template #container>
+      <LoadingComponent v-if="propsComponent.isLoading || isWorking" />
+      <SidebarHeader v-if="!propsComponent.hideHeader" :title :closeFn="() => emit('update:modelValue', false)" />
+      
+      <!-- <Divider class="!m-0 !p-0" /> -->
+
+      <div class="overflow-y-auto m-4 h-full max-h-full">
+        <slot></slot>
+      </div>
+
+      <footer v-if="!hideActions" class="flex sm:justify-between gap-16 items-center mx-5 py-5">
+        <Button
+          label="Cancelar"
+          severity="secondary"
+          class="w-full h-[40px] !rounded-2xl pr-5 sm:max-w-48"
+          icon="pi pi-times"
+          outlined
+          @click="() => emit('update:modelValue', false)"
+        ></Button>
+        <Button
+          label="Aceptar"
+          :disabled="disable || isLoading"
+          icon="pi pi-check"
+          aria-label="save"
+          class="w-full h-[40px] !rounded-2xl pr-5 sm:max-w-48"
+          @click="onAccept"
+        ></Button>
+      </footer>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import Dialog from 'primevue/dialog';
+import { IPropsDialog } from './IPropsDialog';
+import LoadingComponent from '../LoadingComponent.vue';
+import SidebarHeader from '../sidebar/SidebarHeader.vue';
+import { computed, ref } from 'vue';
+import Button from 'primevue/button';
+
+const propsComponent = withDefaults(defineProps<IPropsDialog>(), {
+  beforeAcceptFn: async () => true
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [visible: boolean];
+  accept: [void];
+}>();
+
+const isWorking = ref(false);
+const isLoading = computed(() => {
+  return isWorking.value || propsComponent.disable || propsComponent.isLoading;
+});
+
+async function onAccept() {
+  if (!propsComponent.acceptFn) {
+    emit('accept');
+    return;
+  }
+
+  const isPassed = await propsComponent.beforeAcceptFn();
+
+  if(!isPassed) return;
+
+  isWorking.value = true;
+  const result = await propsComponent.acceptFn?.();
+  isWorking.value = false;
+
+  if(!result) return
+  
+  emit('accept')
+  emit('update:modelValue', false);
+}
+</script>

package/src/components/sidebar/SidebarHeader.vue

@@ -0,0 +1,40 @@
+<template>
+  <header class="flex justify-between items-center border-b-2 p-2 pl-4 pb-0">
+    <slot name="content">
+      <span class="text-gray-500 dark:text-gray-200 text-xl font-roboto font-medium">
+        {{ props.title }}
+      </span>
+    </slot>
+    <Button
+      icon="pi pi-times"
+      severity="secondary"
+      text
+      rounded
+      aria-label="Cancel"
+      @click="props.closeFn"
+    >
+      <template #icon>
+        <IconClose />
+      </template>
+    </Button>
+  </header>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button';
+import IconClose from '../IconClose.vue';
+import { PropType } from 'vue';
+
+const props = defineProps({
+  closeFn: {
+    type: Function as PropType<(event: Event) => void>,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: false,
+  },
+});
+</script>
+
+<style scoped></style>