@v1nt1248/3nclient-lib 0.1.66 → 0.1.68

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.66",
+  "version": "0.1.68",
   "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

@@ -85,6 +85,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 +205,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-editable/ui3n-editable.vue

@@ -61,6 +61,10 @@
   }
 
   function turnOnEditMode() {
+    if (props.disabled) {
+      return;
+    }
+
     inEdit.value = true;
     initialValue.value = value.value;
 
@@ -80,6 +84,10 @@
   }
 
   function done() {
+    if (props.disabled) {
+      return;
+    }
+
     if (props.disallowEmptyValue && !isValid.value) {
       return;
     }
@@ -93,6 +101,10 @@
   }
 
   function cancel() {
+    if (props.disabled) {
+      return;
+    }
+
     if (value.value !== initialValue.value) {
       value.value = initialValue.value;
       emits('update:modelValue', value.value);
@@ -102,6 +114,10 @@
   }
 
   function onClickOutside() {
+    if (props.disabled) {
+      return;
+    }
+
     if (inEdit.value) {
       emits('focusout');
       done();
@@ -121,7 +137,7 @@
   watch(
     () => inEdit.value,
     val => {
-      emits('toggle:editMode', val);
+      !props.disabled && emits('toggle:editMode', val);
     },
   );
 </script>
@@ -129,7 +145,7 @@
 <template>
   <div
     v-ui3n-click-outside="onClickOutside"
-    :class="$style.ui3nEditable"
+    :class="[$style.ui3nEditable, disabled && $style.ui3nEditableDisabled]"
     @focusin="emits('focusin', $event);"
   >
     <template v-if="inEdit">
@@ -148,11 +164,19 @@
         @keydown.esc="cancel"
       />
 
-      <div v-ui3n-ripple :class="[$style.btn, $style.doneBtn]" @click.stop.prevent="done">
+      <div
+        v-ui3n-ripple
+        :class="[$style.btn, $style.doneBtn, disabled && $style.btnDisabled]"
+        @click.stop.prevent="done"
+      >
         <ui3n-icon icon="round-done" size="12" color="var(--color-icon-table-accent-default)" />
       </div>
 
-      <div v-ui3n-ripple :class="[$style.btn, $style.cancelBtn]" @click.stop.prevent="cancel">
+      <div
+        v-ui3n-ripple
+        :class="[$style.btn, $style.cancelBtn, disabled && $style.btnDisabled]"
+        @click.stop.prevent="cancel"
+      >
         <ui3n-icon icon="round-close" size="12" color="var(--color-icon-table-secondary-default)" />
       </div>
     </template>
@@ -192,6 +216,11 @@
     overflow: hidden;
   }
 
+  .ui3nEditableDisabled {
+    cursor: default;
+    pointer-events: none;
+  }
+
   .content {
     position: relative;
     height: var(--ui3n-editable-height);
@@ -300,4 +329,10 @@
       opacity: 1;
     }
   }
+
+  .btnDisabled {
+    cursor: default;
+    pointer-events: none;
+    opacity: 0.75;
+  }
 </style>

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>