@v1nt1248/3nclient-lib 0.1.37 → 0.1.39

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -57,7 +57,7 @@
     "mitt": "3.0.1",
     "sanitize-html": "2.13.1",
     "tslib": "2.8.0",
-    "vuedraggable": "^4.1.0"
+    "vuedraggable": "4.1.0"
   },
   "peerDependencies": {
     "pinia": "2.2.4",

package/src/components/types/index.ts

@@ -1,7 +1,9 @@
+import { VNodeProps, AllowedComponentProps } from 'vue';
+
 export type ExtractComponentProps<TComponent> = TComponent extends new () => {
   $props: infer P;
 }
-  ? P
+  ? Omit<P, keyof VNodeProps | keyof AllowedComponentProps>
   : never;
 
 export type Nullable<T> = T | null;

package/src/components/ui3n-breadcrumbs/ui3n-breadcrumb.vue

@@ -77,6 +77,7 @@ const onClick = (ev: Event) => {
   font-size: var(--ui3n-breadcrumb-font-size);
   line-height: 1.25;
   color: var(--ui3n-breadcrumb-color-default);
+  padding-right: var(--spacing-xs);
 
   &:hover {
     cursor: pointer;
@@ -88,6 +89,10 @@ const onClick = (ev: Event) => {
   }
 }
 
+.ui3nBreadcrumbSeparator {
+  padding-left: var(--spacing-xs);
+}
+
 .ui3nBreadcrumbDisabled {
   cursor: default;
   pointer-events: none;

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

@@ -1,11 +1,14 @@
 import type { Component } from 'vue';
+import type { ExtractComponentProps } from '../types/index';
 
 export type Ui3nDialogEvent = 'open' | 'before-close' | 'close' | 'confirm' | 'cancel' | 'click-overlay';
 
 export interface Ui3nDialogProps {
+  id?: string;
   teleport?: string;
   title?: string;
   width?: string | number;
+  draggable?: boolean;
   cssClass?: string[];
   cssStyle?: Record<string, string>;
   contentCssClass?: string[];
@@ -13,8 +16,8 @@ export interface Ui3nDialogProps {
   confirmButton?: boolean;
   cancelButton?: boolean;
   onClose?: () => void;
-  onConfirm?: (data: any) => void;
-  onCancel?: (data: any) => void;
+  onConfirm?: (data: unknown) => void;
+  onCancel?: (data: unknown) => void;
   confirmButtonText?: string;
   cancelButtonText?: string;
   confirmButtonColor?: string;
@@ -24,17 +27,17 @@ export interface Ui3nDialogProps {
   closeOnClickOverlay?: boolean;
 }
 
-export interface Ui3nDialogComponentProps<T extends Component, P extends Record<string, unknown>> {
+export interface Ui3nDialogComponentProps<T extends Component> {
   component: T;
-  componentProps?: P;
+  componentProps?: ExtractComponentProps<T>;
   dialogProps?: Ui3nDialogProps;
 }
 
 export interface Ui3nDialogComponentEmits {
-  (ev: 'open', value?: any): void;
-  (ev: 'before-close', value?: any): void;
-  (ev: 'close', value?: any): void;
-  (ev: 'confirm', value?: any): void;
-  (ev: 'cancel', value?: any): void;
-  (ev: 'click-overlay', value?: any): void;
+  (ev: 'open', value?: unknown): void;
+  (ev: 'before-close', value?: unknown): void;
+  (ev: 'close', value?: unknown): void;
+  (ev: 'confirm', value?: unknown): void;
+  (ev: 'cancel', value?: unknown): void;
+  (ev: 'click-overlay', value?: unknown): void;
 }

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

@@ -1,61 +1,62 @@
-<script lang="ts" setup generic="T extends Component, P extends Record<string, unknown>">
-/* eslint-disable @typescript-eslint/no-explicit-any */
+<script lang="ts" setup generic="T extends Component">
 import { type Component, computed, nextTick, onMounted, ref } from 'vue';
 import Ui3nButton from '../ui3n-button/ui3n-button.vue';
-import type { Ui3nDialogEvent, Ui3nDialogProps, Ui3nDialogComponentProps, Ui3nDialogComponentEmits } from './types';
+import type { Ui3nDialogEvent, Ui3nDialogComponentProps, Ui3nDialogComponentEmits } from './types';
+import { ExtractComponentProps } from '@/components/types';
 
-const props = defineProps<Ui3nDialogComponentProps<T, P>>();
+const props = defineProps<Ui3nDialogComponentProps<T>>();
 const emits = defineEmits<Ui3nDialogComponentEmits>();
 
+const currentDialogProps = computed(() => ({
+  teleport: props.dialogProps?.teleport || 'body',
+  title: props.dialogProps?.title || '',
+  width: props.dialogProps?.width || 380,
+  cssClass: props.dialogProps?.cssClass || [],
+  cssStyle: props.dialogProps?.cssStyle || {},
+  contentCssClass: props.dialogProps?.contentCssClass || [],
+  contentCssStyle: props.dialogProps?.contentCssStyle || {},
+  confirmButton: props.dialogProps?.confirmButton || true,
+  cancelButton: props.dialogProps?.cancelButton || true,
+  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 || true,
+}));
+
 const show = ref(true);
-const data = ref(null);
+const data = ref<unknown>(null);
 const isValid = ref(true);
+const dialogOverlayElement = ref<HTMLElement | null>(null);
 const dialogElement = ref<HTMLDivElement | null>(null);
+const isMousedown = ref(false);
+const dragData = ref({
+  initialLeft: 0,
+  initialTop: 0,
+  left: 0,
+  top: 0,
+  shiftX: 0,
+  shiftY: 0,
+});
 
-const dialogProps = computed<Required<Omit<Ui3nDialogProps, 'onClose' | 'onConfirm' | 'onCancel'>>>(() => ({
-  teleport: props.dialogProps?.teleport ?? 'body',
-  title: props.dialogProps?.title ?? '',
-  width: props.dialogProps?.width ?? 380,
-  cssClass: props.dialogProps?.cssClass ?? [],
-  cssStyle: props.dialogProps?.cssStyle ?? {},
-  contentCssClass: props.dialogProps?.contentCssClass ?? [],
-  contentCssStyle: props.dialogProps?.contentCssStyle ?? {},
-  confirmButton: props.dialogProps?.confirmButton ?? true,
-  cancelButton: props.dialogProps?.confirmButton ?? true,
-  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 ?? true,
+const cssStyle = computed(() => ({
+  ...currentDialogProps.value.cssStyle,
+  width: `${currentDialogProps.value.width}px`,
+  ...(props.dialogProps?.draggable && {
+    left: `${dragData.value.left}px`,
+    top: `${dragData.value.top}px`,
+  }),
 }));
-const cssStyle = computed(() => ({ width: `${dialogProps.value.width}px`, ...dialogProps.value.cssStyle }));
-
-onMounted(() => {
-  if (dialogElement.value) {
-    dialogElement.value.style.setProperty('--dialog-confirm-button-color', dialogProps.value.confirmButtonColor!);
-    dialogElement.value.style.setProperty('--dialog-cancel-button-color', dialogProps.value.cancelButtonColor!);
-    dialogElement.value.style.setProperty(
-      '--dialog-confirm-background-color',
-      dialogProps.value.confirmButtonBackground!,
-    );
-    dialogElement.value.style.setProperty(
-      '--dialog-cancel-background-color',
-      dialogProps.value.cancelButtonBackground!,
-    );
-  }
-
-  if (dialogElement.value) {
-    nextTick(() => {
-      dialogElement.value!.focus();
-    });
-  }
-});
 
-function selectData(value: any) {
+function selectData(value: unknown) {
   data.value = value;
-  if (!dialogProps.value.confirmButton && !dialogProps.value.cancelButton && props.dialogProps?.onConfirm) {
+  if (
+    !currentDialogProps.value.confirmButton &&
+    !currentDialogProps.value.cancelButton &&
+    props.dialogProps?.onConfirm
+  ) {
     props.dialogProps?.onConfirm(data.value);
     closeDialog();
   }
@@ -81,7 +82,7 @@ function closeDialog(arg?: { ev?: Event; withAction?: boolean }) {
 function startEmit(event: Ui3nDialogEvent, ev?: Event) {
   if (event === 'click-overlay') {
     emits(event);
-    dialogProps.value.closeOnClickOverlay && closeDialog({ ev });
+    currentDialogProps.value.closeOnClickOverlay && closeDialog({ ev });
     return;
   }
 
@@ -109,28 +110,95 @@ function handleEvent(event: Event, eventName: Ui3nDialogEvent) {
   event.preventDefault();
   startEmit(eventName);
 }
+
+/* drag */
+function onDragstart() {
+  return false;
+}
+
+function onMouseup() {
+  isMousedown.value = false;
+  dragData.value.shiftX = 0;
+  dragData.value.shiftY = 0;
+  return false;
+}
+
+function onMousedown(ev: MouseEvent) {
+  isMousedown.value = true;
+  const dialogElementRect = dialogElement.value!.getBoundingClientRect();
+  dragData.value.shiftX = ev.clientX - dialogElementRect.left;
+  dragData.value.shiftY = ev.clientY - dialogElementRect.top;
+}
+
+function onMousemove(ev: MouseEvent) {
+  if (!isMousedown.value) {
+    return;
+  }
+  dragData.value.left = ev.clientX - dragData.value.shiftX - dragData.value.initialLeft;
+  dragData.value.top = ev.clientY - dragData.value.shiftY - dragData.value.initialTop;
+}
+
+onMounted(() => {
+  if (dialogElement.value) {
+    dialogElement.value.style.setProperty(
+      '--dialog-confirm-button-color',
+      currentDialogProps.value.confirmButtonColor!,
+    );
+    dialogElement.value.style.setProperty(
+      '--dialog-cancel-button-color',
+      currentDialogProps.value.cancelButtonColor!,
+    );
+    dialogElement.value.style.setProperty(
+      '--dialog-confirm-background-color',
+      currentDialogProps.value.confirmButtonBackground!,
+    );
+    dialogElement.value.style.setProperty(
+      '--dialog-cancel-background-color',
+      currentDialogProps.value.cancelButtonBackground!,
+    );
+
+    nextTick(() => {
+      dialogElement.value!.focus();
+
+      setTimeout(() => {
+        const dialogClientRect = dialogElement.value!.getBoundingClientRect();
+        dragData.value.initialLeft = dialogClientRect.left;
+        dragData.value.initialTop = dialogClientRect.top;
+      }, 100);
+    });
+  }
+});
 </script>
 
 <template>
   <div
     v-if="show"
+    ref="dialogOverlayElement"
     :class="$style.overlay"
     @click="startEmit('click-overlay', $event)"
   >
     <div
+      :id="dialogProps?.id"
       ref="dialogElement"
       tabindex="1"
-      :class="[$style.dialog, ...dialogProps.cssClass]"
+      :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.esc.stop="startEmit('cancel')"
       @keydown.enter.stop="isValid && startEmit('confirm')"
     >
       <div
-        v-if="dialogProps.title"
+        v-if="currentDialogProps.title"
         :class="$style.title"
         @click.stop
       >
-        <span>{{ dialogProps.title }}</span>
+        <span>{{ currentDialogProps.title }}</span>
       </div>
 
       <ui3n-button
@@ -146,14 +214,14 @@ function handleEvent(event: Event, eventName: Ui3nDialogEvent) {
 
       <div
         v-if="component"
-        :class="[$style.content, ...dialogProps.contentCssClass]"
-        :style="dialogProps.contentCssStyle"
+        :class="[$style.content, ...currentDialogProps.contentCssClass!]"
+        :style="currentDialogProps.contentCssStyle"
         @click.stop
       >
         <!-- @vue-ignore  -->
         <component
           :is="component"
-          v-bind="componentProps as Object"
+          v-bind="componentProps as ExtractComponentProps<T>"
           @select="selectData"
           @validate="validate"
           @close="closeDialog({ ev: $event })"
@@ -163,28 +231,31 @@ function handleEvent(event: Event, eventName: Ui3nDialogEvent) {
       </div>
 
       <div
-        v-if="dialogProps.confirmButton || dialogProps.cancelButton"
-        :class="[$style.actions, dialogProps.confirmButton && dialogProps.cancelButton && $style.bothBtns]"
+        v-if="currentDialogProps.confirmButton || currentDialogProps.cancelButton"
+        :class="[
+          $style.actions,
+          currentDialogProps.confirmButton && currentDialogProps.cancelButton && $style.bothBtns
+        ]"
         @click.stop
       >
         <ui3n-button
-          v-if="dialogProps.cancelButton"
+          v-if="currentDialogProps.cancelButton"
           type="secondary"
-          :color="dialogProps.cancelButtonBackground"
-          :text-color="dialogProps.cancelButtonColor"
+          :color="currentDialogProps.cancelButtonBackground"
+          :text-color="currentDialogProps.cancelButtonColor"
           @click="handleEvent($event, 'cancel')"
         >
-          {{ dialogProps.cancelButtonText }}
+          {{ currentDialogProps.cancelButtonText }}
         </ui3n-button>
 
         <ui3n-button
-          v-if="dialogProps.confirmButton"
-          :color="dialogProps.confirmButtonBackground"
-          :text-color="dialogProps.confirmButtonColor"
+          v-if="currentDialogProps.confirmButton"
+          :color="currentDialogProps.confirmButtonBackground"
+          :text-color="currentDialogProps.confirmButtonColor"
           :disabled="!isValid"
           @click="handleEvent($event, 'confirm')"
         >
-          {{ dialogProps.confirmButtonText }}
+          {{ currentDialogProps.confirmButtonText }}
         </ui3n-button>
       </div>
     </div>
@@ -224,6 +295,10 @@ function handleEvent(event: Event, eventName: Ui3nDialogEvent) {
   outline: none;
 
   @include mixins.elevation();
+
+  &.draggable {
+    cursor: move;
+  }
 }
 
 .title {
@@ -242,6 +317,12 @@ function handleEvent(event: Event, eventName: Ui3nDialogEvent) {
   @include mixins.text-overflow-ellipsis();
 }
 
+.dragHandleIcon {
+  position: absolute;
+  left: 0;
+  top: 16px;
+}
+
 .closeBtn {
   position: absolute;
   right: 4px;