@v1nt1248/3nclient-lib 0.2.85 → 0.2.87

package/dist/ui3n-plugins.d.ts

@@ -8,11 +8,11 @@ declare module '../vue/dist/vue.esm-bundler.js' {
     interface ComponentCustomProperties {
         $openDialog: <V>(component: Component, props: ExtractComponentProps<Component>) => Promise<{
             event: Ui3nDialogEvent;
-            data?: V | null | Event | undefined;
+            data?: V;
         }>;
         $closeDialog: <V>(id: string, value: {
             event: Ui3nDialogEvent;
-            data?: V | null | Event | undefined;
+            data?: V;
         }) => void;
         $closeDialogs: () => void;
         dialogStack: Reactive<DialogOptions<any>[]>;
@@ -35,11 +35,11 @@ declare module 'pinia' {
         $dialogs: {
             open: <V>(component: Component, props: ExtractComponentProps<Component>) => Promise<{
                 event: Ui3nDialogEvent;
-                data?: V | null | Event | undefined;
+                data?: V;
             }>;
             close: <V>(id: string, value: {
                 event: Ui3nDialogEvent;
-                data?: V | null | Event | undefined;
+                data?: V;
             }) => void;
             closeAll: () => void;
             dialogStack: Reactive<DialogOptions<any>[]>;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.2.85",
+  "version": "0.2.87",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

package/src/components/index.ts

@@ -42,7 +42,7 @@ import type {
   Ui3nTableEmits,
   Ui3nTableExpose,
 } from './ui3n-table/types';
-import Ui3nDialogProvider from '../plugins/dialogs/ui3n-dialog-provider.vue';
+import Ui3nDialogProvider from './ui3n-dialog/ui3n-dialog-provider.vue';
 import Ui3nDialog from './ui3n-dialog/ui3n-dialog.vue';
 import type {
   Ui3nDialogComponentProps,

package/src/components/ui3n-dialog/types.ts

@@ -35,4 +35,5 @@ export interface Ui3nDialogComponentSlots {
   header?: () => VNode;
   body: () => VNode;
   actions?: () => VNode;
+  loading?: () => VNode;
 }

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

@@ -0,0 +1,52 @@
+<script lang="ts" setup generic="V extends any">
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  import { type Component, inject } from 'vue';
+  import { DIALOGS_KEY, type DialogsPlugin } from '@/plugins';
+  import type { ExtractComponentProps } from '@/types';
+  import type { Ui3nDialogComponentProps, Ui3nDialogEvent } from './types';
+
+  const { dialogStack, $closeDialog } = inject<DialogsPlugin>(DIALOGS_KEY)!
+
+  function clickOverlay(id: string, modalProps: ExtractComponentProps<Component>) {
+    if (
+      (modalProps as Ui3nDialogComponentProps<any>).closeOnClickOverlay ||
+      ((modalProps as any).dialogProps as Ui3nDialogComponentProps<any>)?.closeOnClickOverlay
+  ) {
+      $closeDialog(id, { event: 'click-overlay' });
+    }
+  }
+
+  function onAction(id: string, value: { event: Ui3nDialogEvent; data?:  V }) {
+    $closeDialog(id, value);
+  }
+</script>
+
+<template>
+  <teleport to="body">
+    <div
+      v-for="dialog in dialogStack"
+      :id="`dialog-wrapper-${dialog.id}`"
+      :key="dialog.id"
+      :class="$style['dialog-provider-overlay']"
+      @click.self.prevent="clickOverlay(dialog.id, dialog.props)"
+    >
+      <component
+        :is="dialog.component"
+        v-bind="dialog.props"
+        @action="onAction(dialog.id, $event)"
+      />
+    </div>
+  </teleport>
+</template>
+
+<style lang="scss" module>
+  .dialog-provider-overlay {
+    position: fixed;
+    z-index: 1000;
+    inset: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--shadow-close);
+  }
+</style>

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup generic="V extends any">
-  import { computed, defineProps, defineEmits, defineSlots, nextTick, onMounted, ref, withDefaults, useTemplateRef } from 'vue';
+  import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
   import omit from 'lodash/omit';
   import { determineWindowWidth } from './util';
   import type { Ui3nDialogComponentProps, Ui3nDialogComponentEmits, Ui3nDialogComponentSlots } from './types';
@@ -214,6 +214,12 @@
       <slot name="actions" />
     </div>
 
+    <div
+      v-if="$slots['loading']"
+      :class="$style.loading"
+    >
+      <slot name="loading" />
+    </div>
 
     <ui3n-button
       :class="$style.closeBtn"
@@ -231,16 +237,6 @@
 <style lang="scss" module>
   @use '../../assets/styles/mixins' as mixins;
 
-  .modal-overlay {
-    position: fixed;
-    z-index: 1000;
-    inset: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--shadow-close);
-  }
-
   .dialog {
     --ui3n-dialog-border-radius: 8px;
     --ui3n-dialog-title-height: 48px;
@@ -325,4 +321,13 @@
     align-items: center;
     gap: var(--spacing-s);
   }
+
+  .loading {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 </style>