@v1nt1248/3nclient-lib 0.1.67 → 0.1.69

package/package.json

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

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

@@ -5,7 +5,6 @@ export type Ui3nDialogEvent = 'open' | 'before-close' | 'close' | 'confirm' | 'c
 
 export interface Ui3nDialogProps {
   id?: string;
-  teleport?: string;
   title?: string;
   width?: string | number;
   draggable?: boolean;
@@ -25,6 +24,7 @@ export interface Ui3nDialogProps {
   confirmButtonBackground?: string;
   cancelButtonBackground?: string;
   closeOnClickOverlay?: boolean;
+  closeOnEsc?: boolean;
 }
 
 export interface Ui3nDialogComponentProps<T extends Component> {

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

@@ -10,7 +10,6 @@
   const emits = defineEmits<Ui3nDialogComponentEmits>();
 
   const currentDialogProps = computed(() => ({
-    teleport: props.dialogProps?.teleport || 'body',
     title: props.dialogProps?.title || '',
     cssClass: props.dialogProps?.cssClass || [],
     cssStyle: props.dialogProps?.cssStyle || {},
@@ -85,6 +84,16 @@
     }
   }
 
+  function onKeydown(event: KeyboardEvent) {
+    const { code } = event;
+    console.log('onKeydown: ', code, props.dialogProps?.closeOnEsc);
+    if (code === 'Escape' && props.dialogProps?.closeOnEsc) {
+      event.preventDefault();
+      event.stopPropagation();
+      startEmit('cancel');
+    }
+  }
+
   function startEmit(event: Ui3nDialogEvent, ev?: Event) {
     if (event === 'click-overlay') {
       emits(event);
@@ -195,11 +204,15 @@
       :style="cssStyle"
       v-on="
         dialogProps?.draggable
-          ? { dragstart: onDragstart, mousedown: onMousedown, mouseup: onMouseup, mousemove: onMousemove }
-          : {}
+          ? {
+            dragstart: onDragstart,
+            mousedown: onMousedown,
+            mouseup: onMouseup,
+            mousemove: onMousemove,
+            keydown: onKeydown
+        }
+          : { keydown: onKeydown }
       "
-      @keydown.esc.stop="startEmit('cancel')"
-      @keydown.enter.stop="isValid && startEmit('confirm')"
     >
       <div
         v-if="currentDialogProps.title"

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

@@ -1,71 +1,75 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import { autoUpdate, flip, useFloating, offset, shift } from '@floating-ui/vue';
-import { default as vClickOutside } from '../../directives/ui3n-click-outside';
-import type { Ui3nMenuEmits, Ui3nMenuProps, Ui3nMenuSlots } from './types';
+  import { ref, watch } from 'vue';
+  import { autoUpdate, flip, useFloating, offset, shift } from '@floating-ui/vue';
+  import { default as vClickOutside } from '../../directives/ui3n-click-outside';
+  import type { Ui3nMenuEmits, Ui3nMenuProps, Ui3nMenuSlots } from './types';
 
-const props = withDefaults(defineProps<Ui3nMenuProps>(), {
-  positionStrategy: 'absolute',
-  offsetX: 0,
-  offsetY: 0,
-  closeOnClick: true,
-  closeOnClickOutside: true,
-  disabled: false,
-});
-const emits = defineEmits<Ui3nMenuEmits>();
-defineSlots<Ui3nMenuSlots>();
+  const props = withDefaults(defineProps<Ui3nMenuProps>(), {
+    positionStrategy: 'absolute',
+    offsetX: 0,
+    offsetY: 0,
+    closeOnClick: true,
+    closeOnClickOutside: true,
+    disabled: false,
+  });
+  const emits = defineEmits<Ui3nMenuEmits>();
+  defineSlots<Ui3nMenuSlots>();
 
-const menuElement = ref<HTMLDivElement | null>(null);
-const menuTriggerElement = ref<HTMLDivElement | null>(null);
-const menuContentElement = ref<HTMLDivElement | null>(null);
-const isShow = ref(false);
+  const menuElement = ref<HTMLDivElement | null>(null);
+  const menuTriggerElement = ref<HTMLDivElement | null>(null);
+  const menuContentElement = ref<HTMLDivElement | null>(null);
+  const isShow = ref(false);
 
-const { floatingStyles, isPositioned } = useFloating(
-  menuTriggerElement,
-  menuContentElement,
-  {
-    placement: 'bottom-start',
-    strategy: props.positionStrategy,
-    middleware: [
-      offset({
-        mainAxis: props.offsetY,
-        crossAxis: props.offsetX + 2,
-      }),
-      flip({
-        fallbackAxisSideDirection: 'end',
-        flipAlignment: false,
-        fallbackPlacements: ['bottom-end'],
-      }),
-      shift(),
-    ],
-    whileElementsMounted: props.positionStrategy === 'fixed' ? autoUpdate : undefined,
-  },
-);
+  const { floatingStyles, isPositioned } = useFloating(
+    menuTriggerElement,
+    menuContentElement,
+    {
+      placement: 'bottom-start',
+      strategy: props.positionStrategy,
+      middleware: [
+        offset({
+          mainAxis: props.offsetY,
+          crossAxis: props.offsetX + 2,
+        }),
+        flip({
+          fallbackAxisSideDirection: 'end',
+          flipAlignment: false,
+          fallbackPlacements: ['bottom-end'],
+        }),
+        shift(),
+      ],
+      whileElementsMounted: props.positionStrategy === 'fixed' ? autoUpdate : undefined,
+    },
+  );
 
-function toggleMenu() {
-  isShow.value = !isShow.value;
-  isShow.value ? emits('open') : emits('close');
-}
+  function toggleMenu() {
+    if (props.disabled) {
+      return;
+    }
 
-function onContentClick() {
-  isShow.value = false;
-  emits('close');
-}
+    isShow.value = !isShow.value;
+    isShow.value ? emits('open') : emits('close');
+  }
 
-function onClickOutside() {
-  emits('click-outside');
-  if (props.closeOnClickOutside) {
+  function onContentClick() {
     isShow.value = false;
     emits('close');
   }
-}
 
-watch(
-  isPositioned,
-  (val) => {
-    val ? emits('opened') : emits('closed');
-  },
-);
+  function onClickOutside() {
+    emits('click-outside');
+    if (props.closeOnClickOutside) {
+      isShow.value = false;
+      emits('close');
+    }
+  }
+
+  watch(
+    isPositioned,
+    val => {
+      val ? emits('opened') : emits('closed');
+    },
+  );
 </script>
 
 <template>
@@ -92,26 +96,26 @@ watch(
 </template>
 
 <style lang="scss" module>
-@use '../../assets/styles/mixins' as mixins;
+  @use '../../assets/styles/mixins' as mixins;
 
-.ui3nMenu {
-  --ui3n-menu-content-bg: var(--color-bg-control-secondary-default);
+  .ui3nMenu {
+    --ui3n-menu-content-bg: var(--color-bg-control-secondary-default);
 
-  position: relative;
-  max-width: max-content;
-  overflow: visible;
-}
+    position: relative;
+    max-width: max-content;
+    overflow: visible;
+  }
 
-.ui3nMenuTrigger {
-  position: relative;
-  max-width: max-content;
-}
+  .ui3nMenuTrigger {
+    position: relative;
+    max-width: max-content;
+  }
 
-.ui3nMenuContent {
-  position: absolute;
-  border-radius: 4px;
-  background-color: var(--ui3n-menu-content-bg);
-  z-index: 1000;
-  @include mixins.elevation(3);
-}
+  .ui3nMenuContent {
+    position: absolute;
+    border-radius: 4px;
+    background-color: var(--ui3n-menu-content-bg);
+    z-index: 1000;
+    @include mixins.elevation(3);
+  }
 </style>

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

@@ -43,12 +43,12 @@ export interface Ui3nTableProps<T extends Ui3nTableBodyBaseItem> {
 
 export interface Ui3nTableEmits<T extends Ui3nTableBodyBaseItem> {
   (ev: 'change:sort', val: Ui3nTableSort<T>): void;
-
   (ev: 'select:row', val: T[]): void;
 }
 
-export type Ui3nTableNoDataSlot = {
+export type Ui3nTableOtherSlots = {
   'no-data': () => VNode;
+  'unused-place': () => VNode;
 };
 
 export type Ui3nTableGroupActionsSlot<T extends Ui3nTableBodyBaseItem> = {
@@ -86,7 +86,7 @@ export type Ui3nTableBodyRowCellSlot<T extends Ui3nTableBodyBaseItem, K extends
   [p in `row-cell-${K}`]: (scope: Ui3nTableBodyRowCellSlotScope<T, K>) => VNode;
 };
 
-export type Ui3nTableSlots<T extends Ui3nTableBodyBaseItem, K extends string & keyof T> = Ui3nTableNoDataSlot &
+export type Ui3nTableSlots<T extends Ui3nTableBodyBaseItem, K extends string & keyof T> = Ui3nTableOtherSlots &
   Ui3nTableGroupActionsSlot<T> &
   Ui3nTableHeaderCellSlot<T, K> &
   Ui3nTableBodyRowSlot<T> &

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

@@ -105,7 +105,7 @@
       </template>
     </div>
 
-    <!-- table body -->
+    <!-- table: body -->
     <div :class="$style.body">
       <template v-if="config?.showNoDataMessage && !size(body.content)">
         <slot name="no-data">
@@ -177,6 +177,11 @@
         </template>
       </template>
     </div>
+
+    <!-- table: unused space-->
+    <div :class="$style.unusedPlace">
+      <slot name="unused-place" />
+    </div>
   </div>
 </template>
 
@@ -200,6 +205,10 @@
     height: 100%;
     background-color: transparent;
     overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
   }
 
   .header {
@@ -360,4 +369,8 @@
     font-weight: 600;
     color: var(--ui3n-table-nodata-color);
   }
+
+  .unusedPlace {
+    flex-grow: 1;
+  }
 </style>