@v1nt1248/3nclient-lib 0.3.8 → 0.3.11

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

@@ -1,42 +1,42 @@
 <script lang="ts" setup>
-import { computed, getCurrentInstance, useCssModule } from 'vue';
-import type { Ui3nBreadcrumbEmits, Ui3nBreadcrumbProps, Ui3nBreadcrumbSlots } from './types';
-
-const props = withDefaults(defineProps<Ui3nBreadcrumbProps>(), {
-  separator: undefined,
-  isActive: false,
-  disabled: false,
-});
-const emits = defineEmits<Ui3nBreadcrumbEmits>();
-defineSlots<Ui3nBreadcrumbSlots>();
-
-const $css = useCssModule();
-
-const separatorValue = computed(() => {
-  if (props.separator) {
-    return props.separator;
-  }
+  import { computed, getCurrentInstance, useCssModule } from 'vue';
+  import type { Ui3nBreadcrumbEmits, Ui3nBreadcrumbProps, Ui3nBreadcrumbSlots } from './types';
+
+  const props = withDefaults(defineProps<Ui3nBreadcrumbProps>(), {
+    separator: undefined,
+    isActive: false,
+    disabled: false,
+  });
+  const emits = defineEmits<Ui3nBreadcrumbEmits>();
+  defineSlots<Ui3nBreadcrumbSlots>();
+
+  const $css = useCssModule();
+
+  const separatorValue = computed(() => {
+    if (props.separator) {
+      return props.separator;
+    }
 
-  const instance = getCurrentInstance();
-  return instance?.parent?.props.separator || '/';
-});
+    const instance = getCurrentInstance();
+    return instance?.parent?.props.separator || '/';
+  });
 
-const parentDisabled = computed(() => {
-  const instance = getCurrentInstance();
-  return instance?.parent?.props.disabled || false;
-});
+  const parentDisabled = computed(() => {
+    const instance = getCurrentInstance();
+    return instance?.parent?.props.disabled || false;
+  });
 
-const cssClasses = computed(() => {
-  const val = [$css.ui3nBreadcrumb];
-  props.isActive && val.push($css.ui3nBreadcrumbActive);
-  (props.disabled || parentDisabled.value) && val.push($css.ui3nBreadcrumbDisabled);
+  const cssClasses = computed(() => {
+    const val = [$css.ui3nBreadcrumb];
+    props.isActive && val.push($css.ui3nBreadcrumbActive);
+    (props.disabled || parentDisabled.value) && val.push($css.ui3nBreadcrumbDisabled);
 
-  return val;
-});
+    return val;
+  });
 
-const onClick = (ev: Event) => {
-  emits('click', ev);
-};
+  function onClick(ev: Event) {
+    emits('click', ev);
+  }
 </script>
 
 <template>
@@ -57,44 +57,44 @@ const onClick = (ev: Event) => {
 </template>
 
 <style lang="scss" module>
-.ui3nBreadcrumb {
-  --ui3n-breadcrumb-font-size: var(--spacing-m);
-  --ui3n-breadcrumb-color-default: var(--color-text-block-primary-default);
-  --ui3n-breadcrumb-color-selected: var(--color-text-block-accent-default);
-
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.separator {
-  display: flex;
-  align-items: center;
-  margin: 0 var(--spacing-s);
-}
-
-.ui3nBreadcrumbActive {
-  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;
-    color: var(--ui3n-breadcrumb-color-selected);
-
-    .ui3nBreadcrumbSeparator {
-      color: var(--ui3n-breadcrumb-color-default);
+  .ui3nBreadcrumb {
+    --ui3n-breadcrumb-font-size: var(--spacing-m);
+    --ui3n-breadcrumb-color-default: var(--color-text-block-primary-default);
+    --ui3n-breadcrumb-color-selected: var(--color-text-block-accent-default);
+
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .separator {
+    display: flex;
+    align-items: center;
+    margin: 0 var(--spacing-s);
+  }
+
+  .ui3nBreadcrumbActive {
+    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;
+      color: var(--ui3n-breadcrumb-color-selected);
+
+      .ui3nBreadcrumbSeparator {
+        color: var(--ui3n-breadcrumb-color-default);
+      }
     }
   }
-}
 
-.ui3nBreadcrumbSeparator {
-  padding-left: var(--spacing-xs);
-}
+  .ui3nBreadcrumbSeparator {
+    padding-left: var(--spacing-xs);
+  }
 
-.ui3nBreadcrumbDisabled {
-  cursor: default;
-  pointer-events: none;
-}
+  .ui3nBreadcrumbDisabled {
+    cursor: default;
+    pointer-events: none;
+  }
 </style>

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