@v1nt1248/3nclient-lib 0.2.83 → 0.2.84

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.2.83",
+  "version": "0.2.84",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -37,7 +37,7 @@
     "build:components": "LIB_NAME=lib vite build",
     "build:plugins": "LIB_NAME=plugins vite build",
     "build:utils": "LIB_NAME=utils vite build",
-    "build": "pnpm clean:dist && pnpm build:plugins && pnpm build:utils && pnpm build:components && pnpm copy:css",
+    "build": "pnpm clean:dist && vue-tsc --noEmit && pnpm build:plugins && pnpm build:utils && pnpm build:components && pnpm copy:css",
     "pack": "pnpm build && npm pack && cp *.tgz ./dist && rm *.tgz",
     "preview": "vite preview",
     "stylelint": "stylelint --config .stylelint.config.cjs 'src/**/*.{vue,scss,css}'",
@@ -61,7 +61,7 @@
   },
   "peerDependencies": {
     "pinia": "3.0.4",
-    "vue": "3.5.27"
+    "vue": "3.5.28"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
@@ -72,9 +72,9 @@
     "@typescript-eslint/eslint-plugin": "8.50.0",
     "@typescript-eslint/parser": "8.50.0",
     "@vitejs/plugin-vue": "6.0.3",
-    "@vue/compiler-core": "3.5.27",
+    "@vue/compiler-core": "3.5.28",
     "@vue/eslint-config-typescript": "14.6.0",
-    "@vue/runtime-core": "3.5.27",
+    "@vue/runtime-core": "3.5.28",
     "@vuedx/typescript-plugin-vue": "0.7.6",
     "eslint": "9.39.2",
     "eslint-config-prettier": "10.1.8",
@@ -101,11 +101,11 @@
     "vite": "7.3.1",
     "vite-plugin-css-injected-by-js": "3.5.2",
     "vite-plugin-dts": "4.5.4",
-    "vite-plugin-vue-devtools": "8.0.5",
+    "vite-plugin-vue-devtools": "8.0.6",
     "vitepress": "1.6.4",
-    "vue": "3.5.27",
+    "vue": "3.5.28",
     "vue-eslint-parser": "10.2.0",
-    "vue-tsc": "3.2.3"
+    "vue-tsc": "3.2.4"
   },
   "packageManager": "pnpm@10.26.0",
   "pnpm": {

package/src/components/index.ts

@@ -16,7 +16,12 @@ import type { Ui3nInputFileProps, Ui3nInputFileEmits } from './ui3n-input-file/t
 import Ui3nText from './ui3n-text/ui3n-text.vue';
 import type { Ui3nTextProps, Ui3nTextEmits } from './ui3n-text/types';
 import Ui3nCheckbox from './ui3n-checkbox/ui3n-checkbox.vue';
-import type { Ui3nCheckboxProps, Ui3nCheckboxEmits, Ui3nCheckboxSlots, Ui3nCheckboxValue } from './ui3n-checkbox/types';
+import type {
+  Ui3nCheckboxProps,
+  Ui3nCheckboxEmits,
+  Ui3nCheckboxSlots,
+  Ui3nCheckboxValue,
+} from './ui3n-checkbox/types';
 import Ui3nNotification from './ui3n-notification/ui3n-notification.vue';
 import Ui3nTableSortIcon from './ui3n-table/ui3n-table-sort-icon.vue';
 import Ui3nTable from './ui3n-table/ui3n-table.vue';
@@ -41,7 +46,7 @@ import Ui3nDialog from './ui3n-dialog/ui3n-dialog.vue';
 import type {
   Ui3nDialogComponentProps,
   Ui3nDialogComponentEmits,
-  Ui3nDialogProps,
+  Ui3nDialogComponentSlots,
   Ui3nDialogEvent,
 } from './ui3n-dialog/types';
 import Ui3nMenu from './ui3n-menu/ui3n-menu.vue';
@@ -70,7 +75,12 @@ import Ui3nProgressLinear from './ui3n-progress/ui3n-progress-linear.vue';
 import Ui3nProgressCircular from './ui3n-progress/ui3n-progress-circular.vue';
 import type { Ui3nProgressCircularProps, Ui3nProgressLinearProps } from './ui3n-progress/types';
 import Ui3nTooltip from './ui3n-tooltip/ui3n-tooltip.vue';
-import type { Ui3nTooltipEmits, Ui3nTooltipProps, Ui3nTooltipSlots, Ui3nTooltipPlacement } from './ui3n-tooltip/types';
+import type {
+  Ui3nTooltipEmits,
+  Ui3nTooltipProps,
+  Ui3nTooltipSlots,
+  Ui3nTooltipPlacement,
+} from './ui3n-tooltip/types';
 import Ui3nRadio from './ui3n-radio-group/ui3n-radio.vue';
 import Ui3nRadioGroup from './ui3n-radio-group/ui3n-radio-group.vue';
 import type {
@@ -147,7 +157,7 @@ export {
   Ui3nDialog,
   Ui3nDialogComponentProps,
   Ui3nDialogComponentEmits,
-  Ui3nDialogProps,
+  Ui3nDialogComponentSlots,
   Ui3nDialogEvent,
   Ui3nMenu,
   Ui3nMenuProps,

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

@@ -1,9 +1,9 @@
-import type { Component } from 'vue';
-import type { ExtractComponentProps, Ui3nIconField } from '@/types';
+import type { VNode } from 'vue';
+import type { Ui3nIconField } from '@/types';
 
-export type Ui3nDialogEvent = 'open' | 'before-close' | 'close' | 'confirm' | 'cancel' | 'click-overlay';
+export type Ui3nDialogEvent = 'close' | 'confirm' | 'cancel' | 'click-overlay';
 
-export interface Ui3nDialogProps<V> {
+export interface Ui3nDialogComponentProps<V> {
   id?: string;
   title?: string;
   icon?: string | Ui3nIconField;
@@ -15,9 +15,6 @@ export interface Ui3nDialogProps<V> {
   contentCssStyle?: Record<string, string>;
   confirmButton?: boolean;
   cancelButton?: boolean;
-  onClose?: (data?: V) => void;
-  onConfirm?: (data: V) => void;
-  onCancel?: (data: V) => void;
   confirmButtonText?: string;
   cancelButtonText?: string;
   confirmButtonColor?: string;
@@ -26,19 +23,16 @@ export interface Ui3nDialogProps<V> {
   cancelButtonBackground?: string;
   closeOnClickOverlay?: boolean;
   closeOnEsc?: boolean;
+  data?: V | null | Event | undefined;
+  isValid?: boolean;
 }
 
-export interface Ui3nDialogComponentProps<T extends Component, V> {
-  component: T;
-  componentProps?: ExtractComponentProps<T>;
-  dialogProps?: Ui3nDialogProps<V>;
+export interface Ui3nDialogComponentEmits<V> {
+  (event: 'action', value: { event: Ui3nDialogEvent; data?: V | null | Event | undefined }): void;
 }
 
-export interface Ui3nDialogComponentEmits<V> {
-  (ev: 'open', value?: V): void;
-  (ev: 'before-close', value?: V): void;
-  (ev: 'close', value?: V): void;
-  (ev: 'confirm', value?: V): void;
-  (ev: 'cancel', value?: V): void;
-  (ev: 'click-overlay', value?: V): void;
+export interface Ui3nDialogComponentSlots {
+  header?: () => VNode;
+  body: () => VNode;
+  actions?: () => VNode;
 }

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

@@ -1,42 +1,31 @@
-<script lang="ts" setup generic="T extends Component, V">
-  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, V>>();
+  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 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<V | null>(null);
-  const isValid = ref(true);
-  const dialogOverlayElement = ref<HTMLElement | null>(null);
-  const dialogElement = ref<HTMLDivElement | null>(null);
+  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: V) {
-    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>