@v1nt1248/3nclient-lib 0.3.8 → 0.3.11

package/src/components/ui3n-drop-files/types.ts

@@ -1,17 +1,48 @@
 import { VNode } from 'vue';
 
+/**
+ * Drop files component properties
+ */
 export interface Ui3nDropFilesProps {
+  /**
+   * Drop files title
+   */
   title?: string;
+  /**
+   * Drop files text
+   */
   text?: string;
+  /**
+   * Additional text
+   */
   additionalText?: string;
+  /**
+   * Whether to permanently display the component
+   * @default false
+   */
   permanentDisplay?: boolean;
 }
 
+/**
+ * Drop files component emits
+ */
 export interface Ui3nDropFilesEmits {
+  /**
+   * Called when files are selected
+   */
   (e: 'select', fileList: FileList): void;
 }
 
+/**
+ * Drop files component slots
+ */
 export interface Ui3nDropFilesSlots {
+  /**
+   * Default slot
+   */
   default: () => VNode;
+  /**
+   * Additional text slot
+   */
   'additional-text': () => VNode;
 }

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

@@ -1,43 +1,145 @@
 import type { Nullable } from '@/types';
 
+/**
+ * Properties of the Ui3nContentEditable component
+ */
 export interface Ui3nContentEditableProps {
+  /**
+   * Current value of the editable content
+   */
   modelValue: string;
+  /**
+   * Placeholder text
+   */
   placeholder?: string;
+  /**
+   * Maximum length of the text
+   */
   maxLength?: number;
+  /**
+   * Component disabled flag
+   */
   disabled?: boolean;
+  /**
+   * Flag for automatic selection of all text on focus
+   */
   selectAllOnFocus?: boolean;
+  /**
+   * Multiline mode flag
+   */
   isMultiline?: boolean;
+  /**
+   * Flag to prevent empty values
+   */
   disallowEmptyValue?: boolean;
+  /**
+   * Debounce delay in milliseconds
+   */
   debounceDelay?: number;
 }
 
+/**
+ * Events of the Ui3nContentEditable component
+ */
 export interface Ui3nContentEditableEmits {
+  /**
+   * Component initialization event
+   */
   (event: 'init', value: HTMLElement): void;
+  /**
+   * Model value update event
+   */
   (event: 'update:modelValue', value: Nullable<string>): void;
+  /**
+   * Input event
+   */
   (event: 'input', value: Nullable<string>): void;
+  /**
+   * Value change event
+   */
   (event: 'change', value: Nullable<string>): void;
+  /**
+   * Click event
+   */
   (event: 'click', value: MouseEvent): void;
+  /**
+   * Keydown event
+   */
   (event: 'keydown', value: KeyboardEvent): void;
+  /**
+   * Focusin event
+   */
   (event: 'focusin', value: FocusEvent): void;
+  /**
+   * Focusout event
+   */
   (event: 'focusout', value: FocusEvent): void;
 }
 
+/**
+ * Properties of the Ui3nEditable component
+ */
 export interface Ui3nEditableProps {
+  /**
+   * Current value of the editable content
+   */
   modelValue: string;
+  /**
+   * Placeholder text
+   */
   placeholder?: string;
+  /**
+   * Maximum length of the text
+   */
   maxLength?: number;
+  /**
+   * Maximum width of the component
+   */
   maxWidth?: string | number;
+  /**
+   * Tooltip width
+   */
   tooltipWidth?: number;
+  /**
+   * Component disabled flag
+   */
   disabled?: boolean;
+  /**
+   * Flag for automatic selection of all text on focus
+   */
   selectAllOnFocus?: boolean;
+  /**
+   * Flag to prevent empty values
+   */
   disallowEmptyValue?: boolean;
 }
 
+/**
+ * Events of the Ui3nEditable component
+ */
 export interface Ui3nEditableEmits {
+  /**
+   * Model value update event
+   */
   (event: 'update:modelValue', value: Nullable<string>): void;
+  /**
+   * Edit mode toggle event
+   */
   (event: 'toggle:editMode', value: boolean): void;
+  /**
+   * Edit completion event
+   */
   (event: 'done'): void;
+  /**
+   * Edit cancellation event
+   */
   (event: 'cancel'): void;
+  /**
+   * Focusin event
+   */
   (event: 'focusin', value: FocusEvent): void;
+  /**
+   * Focusout event
+   */
   (event: 'focusout'): void;
 }

package/src/components/ui3n-editable/useContentEditable.ts

@@ -3,7 +3,7 @@ import debounce from 'lodash/debounce';
 import sanitizeHtml from 'sanitize-html';
 import { selectAll } from '@/utils';
 import type { Nullable } from '@/types';
-import type { Ui3nContentEditableEmits, Ui3nContentEditableProps } from '@/components/ui3n-editable/types';
+import type { Ui3nContentEditableEmits, Ui3nContentEditableProps } from './types';
 
 export function useContentEditable(props: Ui3nContentEditableProps, emits: Ui3nContentEditableEmits) {
   const el = ref<Nullable<HTMLElement>>(null);
@@ -130,7 +130,9 @@ export function useContentEditable(props: Ui3nContentEditableProps, emits: Ui3nC
   }
 
   onMounted(() => {
-    el.value && emits('init', el.value);
+    if (el.value) {
+      emits('init', el.value);
+    }
   });
 
   watch(

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

@@ -1,9 +1,22 @@
 export interface Ui3nEmojiProps {
+  /**
+   * Emoji to display
+   */
   emoji: string;
+  /**
+   * Emoji size
+   */
   size?: string | number;
+  /**
+   * Whether emoji is readonly
+   * @default false
+   */
   readonly?: boolean;
 }
 
 export interface Ui3nEmojiEmits {
+  /**
+   * Called when emoji is clicked
+   */
   (ev: 'click', value: Event): void;
 }

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

@@ -1,15 +1,25 @@
 export interface Ui3nIconProps {
+  /** Icon name */
   icon: string;
+  /** Icon title */
   title?: string;
+  /** Icon size */
   size?: string | number;
+  /** Icon width */
   width?: string | number;
+  /** Icon height */
   height?: string | number;
+  /** Icon color */
   color?: string;
+  /** Flip icon horizontally */
   horizontalFlip?: boolean;
+  /** Flip icon vertically */
   verticalFlip?: boolean;
+  /** Icon rotation in degrees */
   rotate?: number;
 }
 
 export interface Ui3nIconEmits {
+  /** Called when the icon is clicked */
   (ev: 'click', value: Event): void;
 }

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

@@ -1,29 +1,105 @@
 export interface Ui3nInputProps {
+  /**
+   * Input value
+   */
   modelValue: string;
+  /**
+   * Input label
+   */
   label?: string;
+  /**
+   * Input type
+   * @default 'text'
+   */
   type?: 'text' | 'password';
+  /**
+   * Input placeholder
+   */
   placeholder?: string;
+  /**
+   * Whether input is clearable
+   * @default false
+   */
   clearable?: boolean;
+  /**
+   * Whether input is autofocus
+   * @default false
+   */
   autofocus?: boolean;
+  /**
+   * Input icon
+   */
   icon?: string;
+  /**
+   * Input icon color
+   */
   iconColor?: string;
+  /**
+   * Validation rules
+   */
   rules?: Array<(v: unknown) => boolean | string>;
+  /**
+   * Whether to validate at startup
+   * @default false
+   */
   validateAtStartup?: boolean;
+  /**
+   * Whether to hide bottom space
+   * @default false
+   */
   hideBottomSpace?: boolean;
+  /**
+   * Display state mode
+   */
   displayStateMode?: 'error' | 'success';
+  /**
+   * Whether to display state with icon
+   * @default false
+   */
   displayStateWithIcon?: boolean;
+  /**
+   * Display state message
+   */
   displayStateMessage?: string;
+  /**
+   * Whether input is disabled
+   * @default false
+   */
   disabled?: boolean;
 }
 
 export interface Ui3nInputEmits {
+  /**
+   * Called when input is initialized
+   */
   (event: 'init', value: HTMLInputElement): void;
+  /**
+   * Called when input value changes
+   */
   (event: 'input', value: string): void;
+  /**
+   * Called when key is pressed
+   */
   (event: 'keydown', value: KeyboardEvent): void;
+  /**
+   * Called when input is focused
+   */
   (event: 'focus', value: Event): void;
+  /**
+   * Called when input loses focus
+   */
   (event: 'blur', value: Event): void;
+  /**
+   * Called when input is cleared
+   */
   (event: 'clear'): void;
+  /**
+   * Called when input value changes
+   */
   (event: 'change', value: string): void;
+  /**
+   * Called when Enter key is pressed
+   */
   (
     event: 'enter',
     value: {
@@ -34,7 +110,16 @@ export interface Ui3nInputEmits {
       metaKey: boolean;
     },
   ): void;
+  /**
+   * Called when Escape key is pressed
+   */
   (event: 'escape', value: Event): void;
+  /**
+   * Called when model value updates
+   */
   (event: 'update:modelValue', value: string): void;
+  /**
+   * Called when validation status updates
+   */
   (event: 'update:valid', value: boolean): void;
 }

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

@@ -13,6 +13,8 @@
   const isFocused = ref(false);
   const errorMessage = ref('');
 
+  const isInitialized = ref(false);
+
   const cssIconColor = computed(() => {
     if (props.disabled) {
       return 'var(--color-icon-control-primary-disabled)';
@@ -109,9 +111,12 @@
     }
 
     emits('init', inputElement.value!);
-    if (props.validateAtStartup) {
+    if (props.validateAtStartup && !isInitialized.value) {
       validate(text.value);
     }
+    if (!isInitialized.value) {
+      isInitialized.value = true;
+    }
   });
 
   watch(
@@ -119,7 +124,14 @@
     (val, oldVal) => {
       if ((val ?? '') !== (oldVal ?? '')) {
         text.value = val ?? '';
-        validate(text.value);
+
+        if ((props.validateAtStartup && !isInitialized.value) || isInitialized.value) {
+          validate(text.value);
+        }
+
+        if (!isInitialized.value) {
+          isInitialized.value = true;
+        }
       }
     },
     { immediate: true },
@@ -193,7 +205,7 @@
     />
 
     <div
-      v-if="(isDirty && errorMessage) || (displayStateMode && displayStateMessage)"
+      v-if="(text && errorMessage) || (isDirty && errorMessage) || (displayStateMode && displayStateMessage)"
       :class="[
         $style.ui3nInputFieldMessage,
         (errorMessage || (displayStateMode === 'error' && displayStateMessage)) && $style.ui3nInputErrorMessage,

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

@@ -1,14 +1,43 @@
 export interface Ui3nInputFileProps {
+  /**
+   * Selected files
+   */
   modelValue?: File[] | FileList;
+  /**
+   * Button text
+   */
   buttonText?: string;
+  /**
+   * Whether multiple files can be selected
+   * @default false
+   */
   multiple?: boolean;
+  /**
+   * Maximum number of files
+   */
   maxNumberOfFiles?: number | string;
+  /**
+   * Maximum file size in bytes
+   */
   maxFileSize?: number;
+  /**
+   * Allowed file types
+   */
   allowedFileTypes?: string;
+  /**
+   * Whether input is disabled
+   * @default false
+   */
   disabled?: boolean;
 }
 
 export interface Ui3nInputFileEmits {
+  /**
+   * Called when model value updates
+   */
   (event: 'update:modelValue', value: File[] | FileList): void;
+  /**
+   * Called when error occurs
+   */
   (event: 'error', value: string): void;
 }

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

@@ -1,18 +1,53 @@
 import { VNode } from 'vue';
 
+/**
+ * List component properties
+ */
 export interface Ui3nListProps<T> {
+  /**
+   * List title
+   */
   title?: string;
+  /**
+   * Whether to stick to top
+   * @default false
+   */
   sticky?: boolean;
+  /**
+   * List items
+   */
   items: T[];
+  /**
+   * Key field for items
+   */
   keyField?: keyof T;
+  /**
+   * Whether list is disabled
+   * @default false
+   */
   disabled?: boolean;
 }
 
+/**
+ * List component emits
+ */
 export interface Ui3nListEmits<T> {
+  /**
+   * Emitted when item is selected
+   */
   (ev: 'select', value: { value: T; index: number }): void;
 }
 
+/**
+ * List component slots
+ */
 export interface Ui3nListSlots<T> {
+  /**
+   * Title slot
+   */
   title?: () => VNode;
+  /**
+   * Item slot
+   */
   item?: ({ item, index }: { item: T; index: number }) => VNode;
 }

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

@@ -1,36 +1,125 @@
 import type { Ref, VNode } from 'vue';
 
+/**
+ * Menu component properties
+ */
 export interface Ui3nMenuProps {
+  /**
+   * Menu open state
+   */
   modelValue?: boolean;
+  /**
+   * Trigger element
+   */
   triggerElement?: HTMLElement;
+  /**
+   * Position strategy
+   * @default 'absolute'
+   */
   positionStrategy?: 'absolute' | 'fixed';
+  /**
+   * Whether to update position automatically
+   * @default true
+   */
   positionAutoupdate?: boolean;
+  /**
+   * Whether to allow flipping
+   * @default true
+   */
   allowFlip?: boolean;
+  /**
+   * Offset X
+   * @default 0
+   */
   offsetX?: number;
+  /**
+   * Offset Y
+   * @default 0
+   */
   offsetY?: number;
+  /**
+   * Content border radius
+   */
   contentBorderRadius?: number | number[];
+  /**
+   * Content styles
+   */
   contentStyles?: Record<string, string>;
+  /**
+   * Z-index
+   */
   zIndex?: number;
+  /**
+   * Whether to close on click
+   * @default true
+   */
   closeOnClick?: boolean;
+  /**
+   * Whether to close on click outside
+   * @default true
+   */
   closeOnClickOutside?: boolean;
+  /**
+   * Whether menu is disabled
+   * @default false
+   */
   disabled?: boolean;
 }
 
+/**
+ * Menu component emits
+ */
 export interface Ui3nMenuEmits {
+  /**
+   * Emitted when menu opens
+   */
   (ev: 'open'): void;
+  /**
+   * Emitted when menu is opened
+   */
   (ev: 'opened'): void;
+  /**
+   * Emitted when menu closes
+   */
   (ev: 'close'): void;
+  /**
+   * Emitted when menu is closed
+   */
   (ev: 'closed'): void;
+  /**
+   * Emitted when click outside
+   */
   (ev: 'click-outside'): void;
+  /**
+   * Emitted when model value updates
+   */
   (ev: 'update:modelValue', value: boolean): void;
 }
 
+/**
+ * Menu component slots
+ */
 export interface Ui3nMenuSlots {
+  /**
+   * Default slot
+   */
   default: () => VNode;
+  /**
+   * Menu slot
+   */
   menu?: () => VNode;
 }
 
+/**
+ * Menu component expose
+ */
 export interface Ui3nMenuExpose {
+  /**
+   * Whether menu is positioned
+   */
   isPositioned: Readonly<Ref<boolean>>;
+  /**
+   * Update position
+   */
   update: () => void;
 }

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

@@ -1,11 +1,39 @@
 export interface Ui3nNotificationProps {
+  /**
+   * Notification ID
+   */
   id?: string;
+  /**
+   * Notification type
+   */
   type?: 'success' | 'warning' | 'info' | 'error';
+  /**
+   * Notification content
+   */
   content: string;
+  /**
+   * Notification position
+   */
   position?: 'left' | 'center' | 'right';
+  /**
+   * Notification duration in milliseconds
+   */
   duration?: number;
+  /**
+   * Whether to display icon
+   * @default false
+   */
   withIcon?: boolean;
+  /**
+   * Teleport target
+   */
   teleport?: string;
+  /**
+   * Called when notification opens
+   */
   onOpen?: () => void;
+  /**
+   * Called when notification closes
+   */
   onClose?: () => void;
 }