@v1nt1248/3nclient-lib 0.1.36 → 0.1.38

package/package.json

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

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

@@ -7,7 +7,7 @@ export interface Ui3nInputProps {
   autofocus?: boolean;
   icon?: string;
   iconColor?: string;
-  rules?: Array<(v: string) => any>;
+  rules?: Array<(v: unknown) => boolean | string>;
   displayStateMode?: 'error' | 'success';
   displayStateWithIcon?: boolean;
   displayStateMessage?: string;
@@ -21,13 +21,16 @@ export interface Ui3nInputEmits {
   (event: 'blur', value: Event): void;
   (event: 'clear'): void;
   (event: 'change', value: string): void;
-  (event: 'enter', value: {
-    value: string;
-    altKey: boolean;
-    ctrlKey: boolean;
-    shiftKey: boolean;
-    metaKey: boolean;
-  }): void;
+  (
+    event: 'enter',
+    value: {
+      value: string;
+      altKey: boolean;
+      ctrlKey: boolean;
+      shiftKey: boolean;
+      metaKey: boolean;
+    },
+  ): void;
   (event: 'escape', value: Event): void;
   (event: 'update:modelValue', value: string): void;
   (event: 'update:valid', value: boolean): void;

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

@@ -12,6 +12,7 @@ const $css = useCssModule();
 
 const inputElement = ref<HTMLInputElement | null>(null);
 const text = ref<string>('');
+const isDirty = ref(false);
 const isFocused = ref(false);
 const errorMessage = ref('');
 
@@ -24,7 +25,7 @@ const cssIconColor = computed(() => {
 });
 
 const isValid = computed(() => {
-  if (!text.value) {
+  if (!isDirty.value) {
     return true;
   }
 
@@ -37,7 +38,7 @@ const mainCssClasses = computed(() => {
   props.icon && val.push($css.withIcon);
   props.clearable && text.value && val.push($css.clearable);
   props.disabled && val.push($css.disabled);
-  (!!errorMessage.value || props.displayStateMode === 'error') && val.push($css.error);
+  ((!!errorMessage.value && !isValid.value) || props.displayStateMode === 'error') && val.push($css.error);
   props.displayStateMode === 'success' && val.push($css.success);
 
   return val;
@@ -52,9 +53,9 @@ const iconCssClasses = computed(() => {
 
 const messageCssClasses = computed(() => {
   const val = [$css.ui3nInputFieldMessage];
-  (errorMessage.value || (props.displayStateMode === 'error' && !!props.displayStateMessage))
-  && val.push($css.ui3nInputErrorMessage);
- props.displayStateMode === 'success' && props.displayStateMessage && val.push($css.ui3nInputSuccessMessage);
+  (errorMessage.value || (props.displayStateMode === 'error' && !!props.displayStateMessage)) &&
+  val.push($css.ui3nInputErrorMessage);
+  props.displayStateMode === 'success' && props.displayStateMessage && val.push($css.ui3nInputSuccessMessage);
 
   return val;
 });
@@ -80,6 +81,7 @@ function onChange(event: Event) {
 function onInput(ev: Event) {
   const value = (ev.target as HTMLInputElement).value;
   text.value = value;
+  isDirty.value = true;
   validate(value);
   emits('update:modelValue', value);
   emits('input', value);
@@ -88,13 +90,15 @@ function onInput(ev: Event) {
 function onEnterKeydown(event: KeyboardEvent) {
   const { altKey, ctrlKey, metaKey, shiftKey, target } = event;
   const value = (target as HTMLInputElement).value;
+  isDirty.value = true;
   validate(value);
   emits('update:modelValue', value);
-  emits('enter', { value , altKey, ctrlKey, metaKey, shiftKey });
+  emits('enter', { value, altKey, ctrlKey, metaKey, shiftKey });
 }
 
 function onEscapeKeydown(event: KeyboardEvent) {
   const value = (event.target as HTMLInputElement).value;
+  isDirty.value = true;
   validate(value);
   emits('update:modelValue', value);
   emits('escape', event);
@@ -102,6 +106,7 @@ function onEscapeKeydown(event: KeyboardEvent) {
 
 function clearValue() {
   text.value = '';
+  isDirty.value = false;
   validate('');
   emits('update:modelValue', '');
   emits('input', '');
@@ -123,6 +128,12 @@ function validate(text: string) {
   }
 }
 
+defineExpose({
+  isDirty,
+  isFocused,
+  clearValue,
+})
+
 onMounted(() => {
   if (props.autofocus && inputElement.value) {
     inputElement.value.focus();
@@ -142,7 +153,9 @@ watch(
 
 watch(
   () => isValid.value,
-  val => emits('update:valid', val),
+  val => {
+    emits('update:valid', val);
+  },
   { immediate: true },
 );
 </script>
@@ -152,7 +165,10 @@ watch(
     ref="wrapperElement"
     :class="mainCssClasses"
   >
-    <label v-if="label" :class="$style.ui3nInputLabel">
+    <label
+      v-if="label"
+      :class="$style.ui3nInputLabel"
+    >
       {{ label }}
     </label>
 
@@ -170,7 +186,7 @@ watch(
       @focusin="onFocus"
       @focusout="onBlur"
       @change="onChange"
-    >
+    />
 
     <ui3n-icon
       v-if="icon"
@@ -202,7 +218,7 @@ watch(
     />
 
     <div
-      v-if="errorMessage || displayStateMessage"
+      v-if="(isDirty && errorMessage) || (displayStateMode && displayStateMessage)"
       :class="messageCssClasses"
     >
       {{ errorMessage || displayStateMessage }}
@@ -314,7 +330,7 @@ watch(
   }
 
   &.ui3nInputSuccessMessage {
-    color: var(--success-content-default)
+    color: var(--success-content-default);
   }
 }