@v1nt1248/3nclient-lib 0.1.74 → 0.1.76

package/package.json

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

package/src/components/types/index.ts

@@ -7,3 +7,9 @@ export type ExtractComponentProps<TComponent> = TComponent extends new () => {
   : never;
 
 export type Nullable<T> = T | null;
+
+export type Ui3nIconField = {
+  icon: string;
+  size?: string | number;
+  color?: string;
+};

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

@@ -1,11 +1,12 @@
 import type { Component } from 'vue';
-import type { ExtractComponentProps } from '../types/index';
+import type { ExtractComponentProps, Ui3nIconField } from '../types/index';
 
 export type Ui3nDialogEvent = 'open' | 'before-close' | 'close' | 'confirm' | 'cancel' | 'click-overlay';
 
 export interface Ui3nDialogProps {
   id?: string;
   title?: string;
+  icon?: string | Ui3nIconField;
   width?: string | number;
   draggable?: boolean;
   cssClass?: string[];

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

@@ -2,6 +2,7 @@
   import { type Component, computed, nextTick, onMounted, ref } from 'vue';
   import omit from 'lodash/omit';
   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 '@/components/types';
   import { determineWindowWidth } from './util';
@@ -55,6 +56,26 @@
     }),
   }));
 
+  const iconData = computed(() => {
+    if (!props.dialogProps?.icon) return null;
+
+    if (typeof props.dialogProps.icon === 'string') {
+      return {
+        icon: props.dialogProps.icon,
+        width: 14,
+        height: 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)',
+    };
+  });
+
   function selectData(value: unknown) {
     data.value = value;
     if (
@@ -219,6 +240,12 @@
         :class="$style.title"
         @click.stop
       >
+        <ui3n-icon
+          v-if="iconData"
+          v-bind="iconData"
+          :class="$style.icon"
+        />
+
         <span>{{ currentDialogProps.title }}</span>
       </div>
 
@@ -299,7 +326,7 @@
 
   .dialog {
     --dialog-border-radius: 8px;
-    --dialog-title-padding: 16px 32px 16px 16px;
+    --dialog-title-padding: 0 32px 0 16px;
     --dialog-title-font-size: 14px;
     --dialog-actions-padding: 16px;
     --dialog-confirm-button-color: var(--color-text-button-primary-default);
@@ -330,13 +357,25 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
+    column-gap: var(--spacing-s);
     padding: var(--dialog-title-padding);
-    font-size: var(--dialog-title-font-size);
-    font-weight: 600;
-    line-height: 1.2;
-    color: var(--color-text-control-primary-default);
     border-bottom: 1px solid var(--color-border-block-primary-default);
-    @include mixins.text-overflow-ellipsis();
+
+    span {
+      display: block;
+      position: relative;
+      height: var(--dialog-title-font-size);
+      flex-grow: 1;
+      font-size: var(--dialog-title-font-size);
+      font-weight: 600;
+      color: var(--color-text-control-primary-default);
+      @include mixins.text-overflow-ellipsis();
+    }
+
+    .icon {
+      position: relative;
+      top: -1px;
+    }
   }
 
   .dragHandleIcon {