@v1nt1248/3nclient-lib 0.3.6 → 0.3.8

package/dist/ui3n-components.js

@@ -18448,7 +18448,7 @@ var Js = /* @__PURE__ */ X(/* @__PURE__ */ d({
 			onClick: z((e) => i(t.id, t.props), ["self", "prevent"])
 		}, [(x(), a(E(t.component), m({ ref_for: !0 }, t.props, { onAction: (e) => o(t.id, e) }), null, 16, ["onAction"]))], 10, Ys))), 128))]));
 	}
-}), [["__cssModules", { $style: { "dialog-provider-overlay": "_dialog-provider-overlay_14p2m_1" } }]]);
+}), [["__cssModules", { $style: { "dialog-provider-overlay": "_dialog-provider-overlay_v01lr_1" } }]]);
 //#endregion
 //#region src/components/ui3n-dialog/util.ts
 function Zs({ width: e, style: t, defaultValue: n = 380 }) {
@@ -18635,16 +18635,16 @@ var Qs = ["id"], $s = /* @__PURE__ */ X(/* @__PURE__ */ d({
 		], 16, Qs));
 	}
 }), [["__cssModules", { $style: {
-	dialog: "_dialog_1n10w_1",
-	draggable: "_draggable_1n10w_23",
-	closeBtn: "_closeBtn_1n10w_27",
-	title: "_title_1n10w_34",
-	titleDefault: "_titleDefault_1n10w_41",
-	icon: "_icon_1n10w_62",
-	content: "_content_1n10w_66",
-	actions: "_actions_1n10w_71",
-	actionsDefault: "_actionsDefault_1n10w_78",
-	loading: "_loading_1n10w_86"
+	dialog: "_dialog_19xef_1",
+	draggable: "_draggable_19xef_24",
+	closeBtn: "_closeBtn_19xef_28",
+	title: "_title_19xef_35",
+	titleDefault: "_titleDefault_19xef_42",
+	icon: "_icon_19xef_63",
+	content: "_content_19xef_67",
+	actions: "_actions_19xef_72",
+	actionsDefault: "_actionsDefault_19xef_79",
+	loading: "_loading_19xef_87"
 } }]]), ec = /* @__PURE__ */ se({
 	Vue: () => e,
 	Vue2: () => void 0,

package/dist/variables.css

@@ -127,6 +127,7 @@
   --shadow-key-3: var(--black-4);
   --shadow-close: var(--black-4);
   --shadow-far: var(--black-8);
+  --shadow-back: var(--black-48);
   --global-default: var(--grey-5);
   --global-subdefault: var(--grey-10);
   --default-fill-default: var(--white-100);
@@ -293,6 +294,7 @@
   --shadow-key-3: var(--white-4);
   --shadow-close: var(--black-12);
   --shadow-far: var(--black-24);
+  --shadow-back: var(--white-48);
   --global-default: var(--blue-95);
   --global-subdefault: var(--blue-90);
   --default-fill-default: var(--blue-100);
@@ -459,6 +461,7 @@
   --shadow-key-3: var(--white-4);
   --shadow-close: var(--black-12);
   --shadow-far: var(--black-24);
+  --shadow-back: var(--white-48);
   --global-default: var(--grey-95);
   --global-subdefault: var(--grey-90);
   --default-fill-default: var(--grey-100);

package/package.json

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

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

@@ -1,7 +1,9 @@
 import type { VNode } from 'vue';
 import type { Ui3nIconField } from '@/types';
 
-export type Ui3nDialogEvent = 'close' | 'confirm' | 'cancel' | 'click-overlay';
+export type Ui3nDialogEventBase = 'close' | 'confirm' | 'cancel' | 'click-overlay';
+
+export type Ui3nDialogEvent<E extends string = never> = Ui3nDialogEventBase | E;
 
 export interface Ui3nDialogComponentProps<V> {
   id?: string;
@@ -28,8 +30,8 @@ export interface Ui3nDialogComponentProps<V> {
   isValid?: boolean;
 }
 
-export interface Ui3nDialogComponentEmits<V> {
-  (event: 'action', value: { event: Ui3nDialogEvent; data?: V }): void;
+export interface Ui3nDialogComponentEmits<V, E extends string = never> {
+  (event: 'action', value: { event: Ui3nDialogEvent<E>; data?: V }): void;
 }
 
 export interface Ui3nDialogComponentSlots {

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

@@ -1,4 +1,4 @@
-<script lang="ts" setup generic="V extends any">
+<script lang="ts" setup generic="V extends any, E extends string = never">
   /* eslint-disable @typescript-eslint/no-explicit-any */
   import { type Component, inject } from 'vue';
   import type { DialogsPlugin } from '@/plugins';
@@ -12,12 +12,12 @@
     if (
       (modalProps as Ui3nDialogComponentProps<any>).closeOnClickOverlay ||
       ((modalProps as any).dialogProps as Ui3nDialogComponentProps<any>)?.closeOnClickOverlay
-  ) {
+    ) {
       dialogs.$closeDialog(id, { event: 'click-overlay' });
     }
   }
 
-  function onAction(id: string, value: { event: Ui3nDialogEvent; data?:  V }) {
+  function onAction(id: string, value: { event: Ui3nDialogEvent<E>; data?: V }) {
     dialogs.$closeDialog(id, value);
   }
 </script>
@@ -48,6 +48,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--shadow-close);
+    background-color: oklch(25% 0 0deg / 0.75);
   }
 </style>

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

@@ -1,4 +1,4 @@
-<script lang="ts" setup generic="V extends any">
+<script lang="ts" setup generic="V extends any, E extends string = never">
   import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
   import omit from 'lodash/omit';
   import { determineWindowWidth } from './util';
@@ -6,24 +6,22 @@
   import Ui3nButton from '../ui3n-button/ui3n-button.vue';
   import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
 
-  const props = withDefaults(
-    defineProps<Ui3nDialogComponentProps<V>>(), {
-      cssClass: () => [],
-      cssStyle: () => ({}),
-      contentCssClass: () => [],
-      contentCssStyle: () => ({}),
-      confirmButton: true,
-      cancelButton: true,
-      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)',
-      isValid: true,
-    },
-  );
-  const emits = defineEmits<Ui3nDialogComponentEmits<V>>();
+  const props = withDefaults(defineProps<Ui3nDialogComponentProps<V>>(), {
+    cssClass: () => [],
+    cssStyle: () => ({}),
+    contentCssClass: () => [],
+    contentCssStyle: () => ({}),
+    confirmButton: true,
+    cancelButton: true,
+    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)',
+    isValid: true,
+  });
+  const emits = defineEmits<Ui3nDialogComponentEmits<V, E>>();
   defineSlots<Ui3nDialogComponentSlots>();
 
   const dialogElement = useTemplateRef('dialog-el');
@@ -105,22 +103,13 @@
 
   onMounted(() => {
     if (dialogElement.value) {
-      dialogElement.value.style.setProperty(
-        '--ui3n-dialog-confirm-button-color',
-        props.confirmButtonColor,
-      );
-      dialogElement.value.style.setProperty(
-        '--ui3n-dialog-cancel-button-color',
-        props.cancelButtonColor,
-      );
+      dialogElement.value.style.setProperty('--ui3n-dialog-confirm-button-color', props.confirmButtonColor);
+      dialogElement.value.style.setProperty('--ui3n-dialog-cancel-button-color', props.cancelButtonColor);
       dialogElement.value.style.setProperty(
         '--ui3n-dialog-confirm-background-color',
         props.confirmButtonBackground,
       );
-      dialogElement.value.style.setProperty(
-        '--ui3n-dialog-cancel-background-color',
-        props.cancelButtonBackground,
-      );
+      dialogElement.value.style.setProperty('--ui3n-dialog-cancel-background-color', props.cancelButtonBackground);
 
       nextTick(() => {
         dialogElement.value!.focus();
@@ -145,12 +134,12 @@
     v-on="
       draggable
         ? {
-          dragstart: onDragstart,
-          mousedown: onMousedown,
-          mouseup: onMouseup,
-          mousemove: onMousemove,
-          keydown: onKeydown,
-        }
+            dragstart: onDragstart,
+            mousedown: onMousedown,
+            mouseup: onMouseup,
+            mousemove: onMousemove,
+            keydown: onKeydown,
+          }
         : { keydown: onKeydown }
     "
   >
@@ -242,7 +231,7 @@
   @use '../../assets/styles/mixins' as mixins;
 
   .dialog {
-    --ui3n-dialog-border-radius: 8px;
+    --ui3n-dialog-border-radius: 12px;
     --ui3n-dialog-title-height: 48px;
     --ui3n-dialog-title-padding: 0 32px 0 16px;
     --ui3n-dialog-title-font-size: 14px;
@@ -260,9 +249,12 @@
     min-height: var(--spacing-xxl);
     max-height: 95%;
     background-color: var(--color-bg-block-primary-default);
+    border: 1px solid var(--color-border-block-primary-default);
     border-radius: var(--ui3n-dialog-border-radius);
     outline: none;
-    @include mixins.elevation(2);
+    box-shadow:
+      0 5px 15px -3px var(--shadow-key-2),
+      0 2px 10px -1px var(--shadow-key-3);
 
     &.draggable {
       cursor: move;