@v1nt1248/3nclient-lib 0.2.82 → 0.2.84

package/src/components/ui3n-dialog/ui3n-dialog.vue

@@ -1,42 +1,31 @@
-<script lang="ts" setup generic="T extends Component">
-  import { type Component, computed, nextTick, onMounted, ref } from 'vue';
+<script lang="ts" setup generic="V extends any">
+  import { computed, defineProps, defineEmits, defineSlots, nextTick, onMounted, ref, withDefaults, useTemplateRef } from 'vue';
   import omit from 'lodash/omit';
+  import { determineWindowWidth } from './util';
+  import type { Ui3nDialogComponentProps, Ui3nDialogComponentEmits, Ui3nDialogComponentSlots } from './types';
   import Ui3nButton from '../ui3n-button/ui3n-button.vue';
   import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
-  import type { Ui3nDialogEvent, Ui3nDialogComponentProps, Ui3nDialogComponentEmits } from './types';
-  import { ExtractComponentProps } from '@/types';
-  import { determineWindowWidth } from './util';
 
-  const props = defineProps<Ui3nDialogComponentProps<T>>();
-  const emits = defineEmits<Ui3nDialogComponentEmits>();
-
-  const currentDialogProps = computed(() => ({
-    title: props.dialogProps?.title || '',
-    cssClass: props.dialogProps?.cssClass || [],
-    cssStyle: props.dialogProps?.cssStyle || {},
-    contentCssClass: props.dialogProps?.contentCssClass || [],
-    contentCssStyle: props.dialogProps?.contentCssStyle || {},
-    width: props.dialogProps?.width
-      ? props.dialogProps?.width
-      : props.dialogProps?.cssStyle?.width
-        ? props.dialogProps?.cssStyle?.width
-        : 380,
-    confirmButton: props.dialogProps?.confirmButton !== false,
-    cancelButton: props.dialogProps?.cancelButton !== false,
-    confirmButtonText: props.dialogProps?.confirmButtonText || 'Done',
-    cancelButtonText: props.dialogProps?.cancelButtonText || 'Cancel',
-    confirmButtonColor: props.dialogProps?.confirmButtonColor || 'var(--color-text-button-primary-default)',
-    cancelButtonColor: props.dialogProps?.cancelButtonColor || 'var(--color-text-button-secondary-default)',
-    confirmButtonBackground: props.dialogProps?.confirmButtonBackground || 'var(--color-bg-button-primary-default)',
-    cancelButtonBackground: props.dialogProps?.cancelButtonBackground || 'var(--color-bg-button-secondary-default)',
-    closeOnClickOverlay: props.dialogProps?.closeOnClickOverlay !== false,
-  }));
-
-  const show = ref(true);
-  const data = ref<unknown>(null);
-  const isValid = ref(true);
-  const dialogOverlayElement = ref<HTMLElement | null>(null);
-  const dialogElement = ref<HTMLDivElement | null>(null);
+  const props = withDefaults(
+    defineProps<Ui3nDialogComponentProps<V>>(), {
+      cssClass: () => [],
+      cssStyle: () => ({}),
+      contentCssClass: () => [],
+      contentCssStyle: () => ({}),
+      confirmButtonText: 'Done',
+      cancelButtonText: 'Cancel',
+      confirmButtonColor: 'var(--color-text-button-primary-default)',
+      cancelButtonColor: 'var(--color-text-button-secondary-default)',
+      confirmButtonBackground: 'var(--color-bg-button-primary-default)',
+      cancelButtonBackground: 'var(--color-bg-button-secondary-default)',
+      data: null,
+      isValid: true,
+    },
+  );
+  const emits = defineEmits<Ui3nDialogComponentEmits<V>>();
+  defineSlots<Ui3nDialogComponentSlots>();
+
+  const dialogElement = useTemplateRef('dialog-el');
   const isMousedown = ref(false);
   const dragData = ref({
     initialLeft: 0,
@@ -48,105 +37,44 @@
   });
 
   const cssStyle = computed(() => ({
-    width: determineWindowWidth({ width: currentDialogProps.value.width, style: currentDialogProps.value.cssStyle }),
-    ...omit(currentDialogProps.value.cssStyle, 'width'),
-    ...(props.dialogProps?.draggable && {
+    width: determineWindowWidth({ width: props.width, style: props.cssStyle }),
+    ...omit(props.cssStyle, 'width'),
+    ...(props.draggable && {
       left: `${dragData.value.left}px`,
       top: `${dragData.value.top}px`,
     }),
   }));
 
   const iconData = computed(() => {
-    if (!props.dialogProps?.icon) return null;
+    if (!props.icon) {
+      return null;
+    }
 
-    if (typeof props.dialogProps.icon === 'string') {
+    if (typeof props.icon === 'string') {
       return {
-        icon: props.dialogProps.icon,
-        width: 14,
-        height: 14,
+        icon: props.icon,
+        size: 14,
         color: 'var(--color-icon-control-secondary-default)',
       };
     }
 
     return {
-      icon: props.dialogProps.icon.icon,
-      width: props.dialogProps.icon.size || 14,
-      height: props.dialogProps.icon.size || 14,
-      color: props.dialogProps.icon.color || 'var(--color-icon-control-secondary-default)',
+      icon: props.icon.icon,
+      size: props.icon.size || 14,
+      color: props.icon.color || 'var(--color-icon-control-secondary-default)',
     };
   });
 
-  function selectData(value: unknown) {
-    data.value = value;
-    if (
-      !currentDialogProps.value.confirmButton &&
-      !currentDialogProps.value.cancelButton &&
-      props.dialogProps?.onConfirm
-    ) {
-      props.dialogProps?.onConfirm(data.value);
-      closeDialog();
-    }
-  }
-
-  function validate(value: boolean) {
-    isValid.value = value;
-  }
-
-  function closeDialog(arg?: { ev?: Event; withAction?: boolean }) {
-    const { ev, withAction = true } = arg || {};
-    if (ev) {
-      ev.stopImmediatePropagation();
-      ev.preventDefault();
-    }
-    show.value = false;
-    props.dialogProps?.onClose && props.dialogProps.onClose(data.value);
-    if (withAction) {
-      emits('close', data.value);
-    }
-  }
-
   function onKeydown(event: KeyboardEvent) {
     const { code } = event;
 
-    if (code === 'Escape' && props.dialogProps?.closeOnEsc) {
+    if (code === 'Escape' && props.closeOnEsc) {
       event.preventDefault();
       event.stopPropagation();
-      startEmit('cancel');
-    }
-  }
-
-  function startEmit(event: Ui3nDialogEvent, ev?: Event) {
-    if (event === 'click-overlay') {
-      emits(event);
-      currentDialogProps.value.closeOnClickOverlay && closeDialog({ ev });
-      return;
-    }
-
-    if (event === 'confirm') {
-      props.dialogProps?.onConfirm && props.dialogProps.onConfirm(data.value);
-      closeDialog();
-    }
-
-    if (event === 'cancel') {
-      props.dialogProps?.onCancel && props.dialogProps.onCancel(data.value);
-      closeDialog();
-    }
-
-    if (data.value) {
-      // @ts-ignore
-      emits(event, data.value);
-    } else {
-      // @ts-ignore
-      emits(event);
+      emits('action', { event: 'cancel', data: props.data });
     }
   }
 
-  function handleEvent(event: Event, eventName: Ui3nDialogEvent) {
-    event.stopImmediatePropagation();
-    event.preventDefault();
-    startEmit(eventName);
-  }
-
   /* drag */
   function onDragstart() {
     return false;
@@ -177,20 +105,20 @@
   onMounted(() => {
     if (dialogElement.value) {
       dialogElement.value.style.setProperty(
-        '--dialog-confirm-button-color',
-        currentDialogProps.value.confirmButtonColor!,
+        '--ui3n-dialog-confirm-button-color',
+        props.confirmButtonColor,
       );
       dialogElement.value.style.setProperty(
-        '--dialog-cancel-button-color',
-        currentDialogProps.value.cancelButtonColor!,
+        '--ui3n-dialog-cancel-button-color',
+        props.cancelButtonColor,
       );
       dialogElement.value.style.setProperty(
-        '--dialog-confirm-background-color',
-        currentDialogProps.value.confirmButtonBackground!,
+        '--ui3n-dialog-confirm-background-color',
+        props.confirmButtonBackground,
       );
       dialogElement.value.style.setProperty(
-        '--dialog-cancel-background-color',
-        currentDialogProps.value.cancelButtonBackground!,
+        '--ui3n-dialog-cancel-background-color',
+        props.cancelButtonBackground,
       );
 
       nextTick(() => {
@@ -208,163 +136,166 @@
 
 <template>
   <div
-    v-if="show"
-    ref="dialogOverlayElement"
-    :class="$style.overlay"
-    @click.self.prevent="startEmit('click-overlay', $event)"
+    :id="id"
+    ref="dialog-el"
+    tabindex="1"
+    :class="[$style.dialog, draggable && isMousedown && $style.draggable, ...cssClass]"
+    :style="cssStyle"
+    v-on="
+      draggable
+        ? {
+          dragstart: onDragstart,
+          mousedown: onMousedown,
+          mouseup: onMouseup,
+          mousemove: onMousemove,
+          keydown: onKeydown,
+        }
+        : { keydown: onKeydown }
+    "
   >
+    <!-- HEADER  -->
     <div
-      :id="dialogProps?.id"
-      ref="dialogElement"
-      tabindex="1"
-      :class="[
-        $style.dialog,
-        dialogProps?.draggable && isMousedown && $style.draggable,
-        ...currentDialogProps.cssClass!,
-      ]"
-      :style="cssStyle"
-      v-on="
-        dialogProps?.draggable
-          ? {
-            dragstart: onDragstart,
-            mousedown: onMousedown,
-            mouseup: onMouseup,
-            mousemove: onMousemove,
-            keydown: onKeydown,
-          }
-          : { keydown: onKeydown }
-      "
+      v-if="title"
+      :class="[$style.title, $style.titleDefault]"
     >
-      <div
-        v-if="currentDialogProps.title"
-        :class="$style.title"
-      >
-        <ui3n-icon
-          v-if="iconData"
-          v-bind="iconData"
-          :class="$style.icon"
-        />
+      <ui3n-icon
+        v-if="iconData"
+        v-bind="iconData"
+        :class="$style.icon"
+      />
 
-        <span>{{ currentDialogProps.title }}</span>
-      </div>
+      <span>{{ title }}</span>
+    </div>
 
-      <ui3n-button
-        :class="$style.closeBtn"
-        type="icon"
-        size="small"
-        color="transparent"
-        icon="round-close"
-        icon-size="16"
-        icon-color="var(--color-icon-control-primary-default)"
-        @click="closeDialog({ ev: $event })"
-      />
+    <div
+      v-if="$slots['header']"
+      :class="$style.title"
+    >
+      <slot name="header" />
+    </div>
+
+    <div
+      v-if="$slots['body']"
+      :class="$style.content"
+    >
+      <slot name="body" />
+    </div>
 
-      <div
-        v-if="component"
-        :class="[$style.content, ...currentDialogProps.contentCssClass!]"
-        :style="currentDialogProps.contentCssStyle"
+    <div
+      v-if="confirmButton || cancelButton"
+      :class="[$style.actions, $style.actionsDefault]"
+    >
+      <ui3n-button
+        v-if="cancelButton"
+        type="custom"
+        :color="cancelButtonBackground"
+        :text-color="cancelButtonColor"
+        @click.stop.prevent="() => emits('action', { event: 'cancel', data: props.data })"
       >
-        <!-- @vue-ignore  -->
-        <component
-          :is="component"
-          v-bind="componentProps as ExtractComponentProps<T>"
-          @select="selectData"
-          @validate="validate"
-          @close="closeDialog({ ev: $event })"
-          @confirm="startEmit('confirm')"
-          @cancel="startEmit('cancel')"
-        />
-      </div>
-
-      <div
-        v-if="currentDialogProps.confirmButton || currentDialogProps.cancelButton"
-        :class="[
-          $style.actions,
-          currentDialogProps.confirmButton && currentDialogProps.cancelButton && $style.bothBtns,
-        ]"
+        {{ cancelButtonText }}
+      </ui3n-button>
+
+      <ui3n-button
+        v-if="confirmButton"
+        type="custom"
+        :color="confirmButtonBackground"
+        :text-color="confirmButtonColor"
+        :disabled="!isValid"
+        @click.stop.prevent="() => emits('action', { event: 'confirm', data: props.data })"
       >
-        <ui3n-button
-          v-if="currentDialogProps.cancelButton"
-          type="custom"
-          :color="currentDialogProps.cancelButtonBackground"
-          :text-color="currentDialogProps.cancelButtonColor"
-          @click="handleEvent($event, 'cancel')"
-        >
-          {{ currentDialogProps.cancelButtonText }}
-        </ui3n-button>
-
-        <ui3n-button
-          v-if="currentDialogProps.confirmButton"
-          type="custom"
-          :color="currentDialogProps.confirmButtonBackground"
-          :text-color="currentDialogProps.confirmButtonColor"
-          :disabled="!isValid"
-          @click="handleEvent($event, 'confirm')"
-        >
-          {{ currentDialogProps.confirmButtonText }}
-        </ui3n-button>
-      </div>
+        {{ confirmButtonText }}
+      </ui3n-button>
     </div>
+
+    <div
+      v-if="$slots['actions']"
+      :class="$style.actions"
+    >
+      <slot name="actions" />
+    </div>
+
+
+    <ui3n-button
+      :class="$style.closeBtn"
+      type="icon"
+      size="small"
+      color="var(--color-bg-block-primary-default)"
+      icon="round-close"
+      icon-size="16"
+      icon-color="var(--color-icon-control-primary-default)"
+      @click.stop.prevent="emits('action', { event: 'close' })"
+    />
   </div>
 </template>
 
 <style lang="scss" module>
   @use '../../assets/styles/mixins' as mixins;
 
-  .overlay {
+  .modal-overlay {
     position: fixed;
     z-index: 1000;
     inset: 0;
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: var(--shadow-close);
   }
 
   .dialog {
-    --dialog-border-radius: 8px;
-    --dialog-title-height: 48px;
-    --dialog-title-padding: 0 32px 0 16px;
-    --dialog-title-font-size: 14px;
-    --dialog-actions-height: 64px;
-    --dialog-actions-padding: 16px;
-    --dialog-confirm-button-color: var(--color-text-button-primary-default);
-    --dialog-cancel-button-color: var(--color-text-button-secondary-default);
-    --dialog-confirm-background-color: var(--color-bg-button-primary-default);
-    --dialog-cancel-background-color: var(--color-bg-button-secondary-default);
+    --ui3n-dialog-border-radius: 8px;
+    --ui3n-dialog-title-height: 48px;
+    --ui3n-dialog-title-padding: 0 32px 0 16px;
+    --ui3n-dialog-title-font-size: 14px;
+    --ui3n-dialog-actions-height: 64px;
+    --ui3n-dialog-actions-padding: 16px;
+    --ui3n-dialog-confirm-button-color: var(--color-text-button-primary-default);
+    --ui3n-dialog-cancel-button-color: var(--color-text-button-secondary-default);
+    --ui3n-dialog-confirm-background-color: var(--color-bg-button-primary-default);
+    --ui3n-dialog-cancel-background-color: var(--color-bg-button-secondary-default);
 
     position: relative;
     display: flex;
     flex-direction: column;
     height: auto;
+    min-height: var(--spacing-xxl);
     max-height: 95%;
     background-color: var(--color-bg-block-primary-default);
-    border-radius: var(--dialog-border-radius);
+    border-radius: var(--ui3n-dialog-border-radius);
     outline: none;
-    @include mixins.elevation();
+    @include mixins.elevation(2);
 
     &.draggable {
       cursor: move;
     }
   }
 
+  .closeBtn {
+    position: absolute;
+    right: 4px;
+    top: 12px;
+    z-index: 5;
+  }
+
   .title {
     position: relative;
     width: 100%;
-    min-height: var(--dialog-title-height);
-    height: var(--dialog-title-height);
+    min-height: var(--ui3n-dialog-title-height);
+    height: var(--ui3n-dialog-title-height);
+  }
+
+  .titleDefault {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     column-gap: var(--spacing-s);
-    padding: var(--dialog-title-padding);
+    padding: var(--ui3n-dialog-title-padding);
     border-bottom: 1px solid var(--color-border-block-primary-default);
 
     span {
       display: block;
       position: relative;
       flex-grow: 1;
-      font-size: var(--dialog-title-font-size);
+      font-size: var(--ui3n-dialog-title-font-size);
       font-weight: 600;
       color: var(--color-text-control-primary-default);
       @include mixins.text-overflow-ellipsis();
@@ -375,36 +306,23 @@
     }
   }
 
-  .dragHandleIcon {
-    position: absolute;
-    left: 0;
-    top: 16px;
-  }
-
-  .closeBtn {
-    position: absolute;
-    right: 4px;
-    top: 12px;
-    z-index: 5;
-  }
-
   .content {
     flex-grow: 2;
     overflow-y: auto;
   }
 
   .actions {
-    padding: var(--dialog-actions-padding);
-    display: flex;
+    position: relative;
     width: 100%;
-    min-height: var(--dialog-actions-height);
-    height: var(--dialog-actions-height);
+    min-height: var(--ui3n-dialog-actions-height);
+    height: var(--ui3n-dialog-actions-height);
+  }
+
+  .actionsDefault {
+    padding: var(--ui3n-dialog-actions-padding);
+    display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: var(--spacing-s);
   }
-
-  .bothBtns {
-    margin-left: var(--spacing-s);
-  }
 </style>

package/dist/plugins/dialogs/store-dialogs.d.ts

@@ -1,10 +0,0 @@
-import { Component } from '../../../vue/dist/vue.esm-bundler.js';
-import { Ui3nDialogComponentProps } from '../../components/ui3n-dialog/types';
-import { DialogInstance } from './types';
-export declare function storeDialogs(context: any): {
-    $dialogs: {
-        open: <T extends Component>(params: Ui3nDialogComponentProps<T>) => DialogInstance | undefined;
-        close: (id: string) => void;
-        closeAll: () => void;
-    };
-};