@v1nt1248/3nclient-lib 0.3.9 → 0.3.11

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

@@ -1,13 +1,12 @@
 <script lang="ts" setup>
-  import type { Ui3nBreadcrumbsProps } from './types';
+  import type { Ui3nBreadcrumbsProps, Ui3nBreadcrumbsSlots } from './types';
 
-  withDefaults(
-    defineProps<Ui3nBreadcrumbsProps>(),
-    {
-      separator: '/',
-      disabled: false,
-    },
-  );
+  withDefaults(defineProps<Ui3nBreadcrumbsProps>(), {
+    separator: '/',
+    disabled: false,
+  });
+
+  defineSlots<Ui3nBreadcrumbsSlots>();
 </script>
 
 <template>

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

@@ -1,23 +1,46 @@
+import type { VNode } from 'vue';
+
 export interface Ui3nButtonProps {
+  /** Button type */
   type?: 'primary' | 'secondary' | 'tertiary' | 'icon' | 'custom';
+  /** Button size */
   size?: 'regular' | 'small';
+  /** Whether to stretch the button to the full width of the parent block */
   block?: boolean;
+  /** Button text color */
   textColor?: string;
+  /** Button background color */
   color?: string;
+  /** Add a raised effect to the button */
   elevation?: boolean;
+  /** The icon displayed on the button */
   icon?: string;
+  /** Button icon size */
   iconSize?: string | number;
+  /** Button icon color */
   iconColor?: string;
+  /** Button icon position */
   iconPosition?: 'left' | 'right';
+  /** Put component in disabled mode */
   disabled?: boolean;
 }
 
 export interface Ui3nButtonEmits {
+  /** Called when the component is initialized */
   (ev: 'init', value: HTMLButtonElement): void;
+  /** Called when the button is clicked */
   (ev: 'click', value: Event): void;
+  /** Called when the Enter key is pressed */
   (ev: 'enter', value: HTMLButtonElement): void;
+  /** Called when the button has focus */
   (ev: 'focus', value: Event): void;
+  /** Called when the button loses focus. */
   (ev: 'blur', value: Event): void;
 }
 
 export type Ui3nButtonEventName = 'init' | 'click' | 'enter' | 'focus' | 'blur';
+
+export interface Ui3nButtonSlots {
+  /** Default slot */
+  default: () => VNode;
+}

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

@@ -2,20 +2,18 @@
   import { computed, onMounted, ref, watch, useCssModule } from 'vue';
   import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
   import Ui3nRipple from '../../directives/ui3n-ripple';
-  import type { Ui3nButtonEmits, Ui3nButtonProps, Ui3nButtonEventName } from './types';
+  import { Ui3nButtonEmits, Ui3nButtonProps, Ui3nButtonSlots, Ui3nButtonEventName } from './types';
 
   const vUi3nRipple = Ui3nRipple;
 
-  const props = withDefaults(
-    defineProps<Ui3nButtonProps>(),
-    {
-      type: 'primary',
-      size: 'regular',
-      iconPosition: 'right',
-      disabled: false,
-    },
-  );
+  const props = withDefaults(defineProps<Ui3nButtonProps>(), {
+    type: 'primary',
+    size: 'regular',
+    iconPosition: 'right',
+    disabled: false,
+  });
   const emits = defineEmits<Ui3nButtonEmits>();
+  defineSlots<Ui3nButtonSlots>();
 
   const $css = useCssModule();
 
@@ -49,32 +47,32 @@
       const [prevColor, prevTextColor] = prevValue;
       const [color, textColor] = newValue;
 
-      (props.type === 'custom' || props.type === 'icon')
-      && color !== prevColor
-      && buttonEl.value.style.setProperty(
-        '--ui3n-button-bg-color-custom',
-        color ?? 'var(--color-bg-button-primary-default)',
-      );
-
-      props.type === 'custom'
-      && textColor !== prevTextColor
-      && buttonEl.value.style.setProperty(
-        '--ui3n-button-text-color-custom',
-        textColor ?? 'var(--color-text-button-primary-default',
-      );
+      (props.type === 'custom' || props.type === 'icon') &&
+        color !== prevColor &&
+        buttonEl.value.style.setProperty(
+          '--ui3n-button-bg-color-custom',
+          color ?? 'var(--color-bg-button-primary-default)',
+        );
+
+      props.type === 'custom' &&
+        textColor !== prevTextColor &&
+        buttonEl.value.style.setProperty(
+          '--ui3n-button-text-color-custom',
+          textColor ?? 'var(--color-text-button-primary-default',
+        );
     },
   );
 
   onMounted(() => {
     if (!buttonEl.value) return;
 
-    (props.type === 'custom' || props.type === 'icon')
-    && props.color
-    && buttonEl.value.style.setProperty('--ui3n-button-bg-color-custom', props.color);
+    (props.type === 'custom' || props.type === 'icon') &&
+      props.color &&
+      buttonEl.value.style.setProperty('--ui3n-button-bg-color-custom', props.color);
 
-    props.type === 'custom'
-    && props.textColor
-    && buttonEl.value.style.setProperty('--ui3n-button-text-color-custom', props.textColor);
+    props.type === 'custom' &&
+      props.textColor &&
+      buttonEl.value.style.setProperty('--ui3n-button-text-color-custom', props.textColor);
 
     handleButtonEvent('init');
   });

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

@@ -1,22 +1,66 @@
 import { VNode } from 'vue';
 
+/**
+ * Checkbox value type
+ */
 export type Ui3nCheckboxValue = boolean | string | number;
 
+/**
+ * Checkbox component properties
+ */
 export interface Ui3nCheckboxProps {
+  /**
+   * Current checkbox value
+   */
   modelValue: Ui3nCheckboxValue;
+  /**
+   * Value when checkbox is checked
+   */
   checkedValue?: Ui3nCheckboxValue;
+  /**
+   * Value when checkbox is unchecked
+   */
   uncheckedValue?: Ui3nCheckboxValue;
+  /**
+   * Checkbox size
+   */
   size?: number | string;
+  /**
+   * Checkbox color
+   */
   color?: string;
+  /**
+   * Whether checkbox is in indeterminate state
+   * @default false
+   */
   indeterminate?: boolean;
+  /**
+   * Whether checkbox is disabled
+   * @default false
+   */
   disabled?: boolean;
 }
 
+/**
+ * Checkbox component events
+ */
 export interface Ui3nCheckboxEmits {
+  /**
+   * Emitted when checkbox value changes
+   */
   (ev: 'change', value: Ui3nCheckboxValue): void;
+  /**
+   * Emitted when model value updates
+   */
   (ev: 'update:modelValue', value: Ui3nCheckboxValue): void;
 }
 
+/**
+ * Checkbox component slots
+ */
 export interface Ui3nCheckboxSlots {
+  /**
+   * Default slot
+   */
   default: () => VNode;
 }

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

@@ -2,18 +2,15 @@
   import { computed, onMounted, watch, onBeforeMount, ref, useCssModule, useSlots } from 'vue';
   import type { Ui3nCheckboxEmits, Ui3nCheckboxProps, Ui3nCheckboxSlots, Ui3nCheckboxValue } from './types';
 
-  const props = withDefaults(
-    defineProps<Ui3nCheckboxProps>(),
-    {
-      modelValue: false,
-      checkedValue: true,
-      uncheckedValue: false,
-      size: '16',
-      color: 'var(--color-icon-control-accent-default)',
-      indeterminate: false,
-      disabled: false,
-    },
-  );
+  const props = withDefaults(defineProps<Ui3nCheckboxProps>(), {
+    modelValue: false,
+    checkedValue: true,
+    uncheckedValue: false,
+    size: '16',
+    color: 'var(--color-icon-control-accent-default)',
+    indeterminate: false,
+    disabled: false,
+  });
   const emits = defineEmits<Ui3nCheckboxEmits>();
   defineSlots<Ui3nCheckboxSlots>();
 
@@ -29,9 +26,7 @@
       return 'indeterminate';
     }
 
-    return val.value === props.checkedValue
-      ? 'checked'
-      : 'unchecked';
+    return val.value === props.checkedValue ? 'checked' : 'unchecked';
   });
 
   const mainCssClasses = computed(() => {
@@ -56,9 +51,9 @@
     const uncheckedValueType = typeof props.uncheckedValue;
     const valueType = typeof props.modelValue;
     if (
-      checkedValueType !== uncheckedValueType
-      || checkedValueType !== valueType
-      || uncheckedValueType !== valueType
+      checkedValueType !== uncheckedValueType ||
+      checkedValueType !== valueType ||
+      uncheckedValueType !== valueType
     ) {
       throw Error('[Ui3nCheckbox] types of "value", "checkedValue" and "uncheckedValue" are different');
     }
@@ -73,13 +68,13 @@
 
   watch(
     () => props.modelValue,
-    newValue => val.value = newValue,
+    newValue => (val.value = newValue),
     { immediate: true },
   );
 
   watch(
     () => props.indeterminate,
-    newValue => uncertain.value = newValue,
+    newValue => (uncertain.value = newValue),
     { immediate: true },
   );
 
@@ -104,9 +99,7 @@
   function change(ev: Event) {
     ev.preventDefault();
 
-    val.value = checkBoxValue.value !== 'unchecked'
-      ? props.uncheckedValue
-      : props.checkedValue;
+    val.value = checkBoxValue.value !== 'unchecked' ? props.uncheckedValue : props.checkedValue;
 
     if (uncertain.value) {
       uncertain.value = false;

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

@@ -1,20 +1,71 @@
 import { VNode } from 'vue';
 
+/**
+ * Chip component properties
+ */
 export interface Ui3nChipProps {
+  /**
+   * Chip height
+   */
   height?: number | string;
+  /**
+   * Chip maximum width
+   */
   maxWidth?: number | string;
+  /**
+   * Chip plain style
+   * @default false
+   */
   plain?: boolean;
+  /**
+   * Chip round shape
+   * @default false
+   */
   round?: boolean;
+  /**
+   * Chip closeable
+   * @default false
+   */
   closeable?: boolean;
+  /**
+   * Chip color
+   */
   color?: string;
+  /**
+   * Text size
+   */
   textSize?: number | string;
+  /**
+   * Text color
+   */
   textColor?: string;
+  /**
+   * Chip disabled state
+   * @default false
+   */
   disabled?: boolean;
 }
+
+/**
+ * Chip component emits
+ */
 export interface Ui3nChipEmits {
+  /**
+   * Called when chip is closed
+   */
   (ev: 'close'): void;
 }
+
+/**
+ * Chip component slots
+ */
 export interface Ui3nChipSlots {
+  /**
+   * Left slot
+   */
   left: (props: { size: number; color: string }) => VNode;
+  /**
+   * Default slot
+   */
   default: () => VNode;
 }

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

@@ -1,42 +1,145 @@
 import type { VNode } from 'vue';
 import type { Ui3nIconField } from '@/types';
 
+/**
+ * Dialog event base types
+ */
 export type Ui3nDialogEventBase = 'close' | 'confirm' | 'cancel' | 'click-overlay';
 
+/**
+ * Dialog event types
+ */
 export type Ui3nDialogEvent<E extends string = never> = Ui3nDialogEventBase | E;
 
+/**
+ * Dialog component properties
+ */
 export interface Ui3nDialogComponentProps<V> {
+  /**
+   * Dialog id
+   */
   id?: string;
+  /**
+   * Dialog title
+   */
   title?: string;
+  /**
+   * Dialog icon
+   */
   icon?: string | Ui3nIconField;
+  /**
+   * Dialog width
+   */
   width?: string | number;
+  /**
+   * Whether dialog is draggable
+   * @default false
+   */
   draggable?: boolean;
+  /**
+   * Whether to hide close button
+   * @default false
+   */
   hideCloseButton?: boolean;
+  /**
+   * CSS classes for dialog
+   */
   cssClass?: string[];
+  /**
+   * CSS styles for dialog
+   */
   cssStyle?: Record<string, string>;
+  /**
+   * CSS classes for content
+   */
   contentCssClass?: string[];
+  /**
+   * CSS styles for content
+   */
   contentCssStyle?: Record<string, string>;
+  /**
+   * Whether to show confirm button
+   * @default true
+   */
   confirmButton?: boolean;
+  /**
+   * Whether to show cancel button
+   * @default true
+   */
   cancelButton?: boolean;
+  /**
+   * Confirm button text
+   */
   confirmButtonText?: string;
+  /**
+   * Cancel button text
+   */
   cancelButtonText?: string;
+  /**
+   * Confirm button color
+   */
   confirmButtonColor?: string;
+  /**
+   * Cancel button color
+   */
   cancelButtonColor?: string;
+  /**
+   * Confirm button background
+   */
   confirmButtonBackground?: string;
+  /**
+   * Cancel button background
+   */
   cancelButtonBackground?: string;
+  /**
+   * Whether to close on click overlay
+   * @default true
+   */
   closeOnClickOverlay?: boolean;
+  /**
+   * Whether to close on ESC key
+   * @default true
+   */
   closeOnEsc?: boolean;
+  /**
+   * Dialog data
+   */
   data?: V;
+  /**
+   * Whether dialog is valid
+   * @default true
+   */
   isValid?: boolean;
 }
 
+/**
+ * Dialog component emits
+ */
 export interface Ui3nDialogComponentEmits<V, E extends string = never> {
+  /**
+   * Called when dialog action is performed
+   */
   (event: 'action', value: { event: Ui3nDialogEvent<E>; data?: V }): void;
 }
 
+/**
+ * Dialog component slots
+ */
 export interface Ui3nDialogComponentSlots {
+  /**
+   * Header slot
+   */
   header?: () => VNode;
+  /**
+   * Body slot
+   */
   body: () => VNode;
+  /**
+   * Actions slot
+   */
   actions?: () => VNode;
+  /**
+   * Loading slot
+   */
   loading?: () => VNode;
 }

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;
 }