@v1nt1248/3nclient-lib 0.3.28 → 0.3.29

package/dist/ui3n-plugins.js

@@ -1,5 +1,5 @@
 import { B as e, n as t, r as n, t as r } from "./chunks/plugins-keys-jqAZ5D94.js";
-import { t as i } from "./chunks/ui3n-notification-DlDM-u-R.js";
+import { t as i } from "./chunks/ui3n-notification-Dr_3Td9N.js";
 import { createApp as a, markRaw as o, ref as s } from "vue";
 import "pinia";
 import c from "mitt";

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.3.28",
+  "version": "0.3.29",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

package/src/components/index.ts

@@ -6,20 +6,26 @@ import type { Ui3nButtonProps, Ui3nButtonEmits } from './ui3n-button/types';
 import Ui3nChip from './ui3n-chip/ui3n-chip.vue';
 import type { Ui3nChipProps, Ui3nChipEmits, Ui3nChipSlots } from './ui3n-chip/types';
 import Ui3nDropFiles from './ui3n-drop-files/ui3n-drop-files.vue';
-import type { Ui3nDropFilesProps, Ui3nDropFilesEmits, Ui3nDropFilesSlots } from './ui3n-drop-files/types';
+import type {
+  Ui3nDropFilesProps,
+  Ui3nDropFilesEmits,
+  Ui3nDropFilesSlots,
+  Ui3nDropFilesExpose,
+} from './ui3n-drop-files/types';
 import Ui3nEmoji from './ui3n-emoji/ui3n-emoji.vue';
 import type { Ui3nEmojiProps, Ui3nEmojiEmits } from './ui3n-emoji/types';
 import Ui3nInput from './ui3n-input/ui3n-input.vue';
 import type { Ui3nInputProps, Ui3nInputEmits, Ui3nInputSlots, Ui3nInputExpose } from './ui3n-input/types';
 import Ui3nInputFile from './ui3n-input-file/ui3n-input-file.vue';
-import type { Ui3nInputFileProps, Ui3nInputFileEmits } from './ui3n-input-file/types';
+import type { Ui3nInputFileProps, Ui3nInputFileEmits, Ui3nInputFileExpose } from './ui3n-input-file/types';
 import Ui3nText from './ui3n-text/ui3n-text.vue';
-import type { Ui3nTextProps, Ui3nTextEmits } from './ui3n-text/types';
+import type { Ui3nTextProps, Ui3nTextEmits, Ui3nTextExpose } from './ui3n-text/types';
 import Ui3nCheckbox from './ui3n-checkbox/ui3n-checkbox.vue';
 import type {
   Ui3nCheckboxProps,
   Ui3nCheckboxEmits,
   Ui3nCheckboxSlots,
+  Ui3nCheckboxExpose,
   Ui3nCheckboxValue,
 } from './ui3n-checkbox/types';
 import Ui3nNotification from './ui3n-notification/ui3n-notification.vue';
@@ -51,7 +57,7 @@ import type {
   Ui3nDialogEvent,
 } from './ui3n-dialog/types';
 import Ui3nMenu from './ui3n-menu/ui3n-menu.vue';
-import type { Ui3nMenuProps, Ui3nMenuEmits, Ui3nMenuSlots } from './ui3n-menu/types';
+import type { Ui3nMenuProps, Ui3nMenuEmits, Ui3nMenuSlots, Ui3nMenuExpose } from './ui3n-menu/types';
 import Ui3nList from './ui3n-list/ui3n-list.vue';
 import type { Ui3nListProps, Ui3nListEmits, Ui3nListSlots } from './ui3n-list/types';
 import Ui3nVirtualScroll from './ui3n-virtual-scroll/ui3n-virtual-scroll.vue';
@@ -69,7 +75,7 @@ import type {
   Ui3nBreadcrumbsProps,
 } from './ui3n-breadcrumbs/types';
 import Ui3nSwitch from './ui3n-switch/ui3n-switch.vue';
-import type { Ui3nSwitchProps, Ui3nSwitchEmits, Ui3nSwitchSlots } from './ui3n-switch/types';
+import type { Ui3nSwitchProps, Ui3nSwitchEmits, Ui3nSwitchSlots, Ui3nSwitchExpose } from './ui3n-switch/types';
 import Ui3nStepLineBar from './ui3n-step-line-bar/ui3n-step-line-bar.vue';
 import type { Ui3nStepLineBarProps } from './ui3n-step-line-bar/types';
 import Ui3nProgressLinear from './ui3n-progress/ui3n-progress-linear.vue';
@@ -88,28 +94,32 @@ import type {
   Ui3nRadioEmits,
   Ui3nRadioProps,
   Ui3nRadioSlots,
+  Ui3nRadioExpose,
   Ui3nRadioGroupEmits,
   Ui3nRadioGroupProps,
   Ui3nRadioGroupSlots,
+  Ui3nRadioGroupExpose,
   Ui3nRadioValue,
 } from './ui3n-radio-group/types';
 import Ui3nEditable from './ui3n-editable/ui3n-editable.vue';
-import type { Ui3nEditableProps, Ui3nEditableEmits } from './ui3n-editable/types';
+import type { Ui3nEditableProps, Ui3nEditableEmits, Ui3nEditableExpose } from './ui3n-editable/types';
 import Ui3nAutocomplete from './ui3n-autocomplete/ui3n-autocomplete.vue';
 import type {
   Ui3nAutocompleteProps,
   Ui3nAutocompleteEmits,
   Ui3nAutocompleteSlots,
+  Ui3nAutocompleteExpose,
   Ui3nAutocompleteOptionBase,
 } from './ui3n-autocomplete/types';
 import Ui3nSlider from './ui3n-slider/ui3n-slider.vue';
-import type { UI3nSliderProps, UI3nSliderEmits } from './ui3n-slider/types';
+import type { UI3nSliderProps, UI3nSliderEmits, UI3nSliderExpose } from './ui3n-slider/types';
 import Ui3nSelector from './ui3n-selector/ui3n-selector.vue';
 import type {
   Ui3nSelectorOptionBase,
   Ui3nSelectorProps,
   Ui3nSelectorEmits,
   Ui3nSelectorSlots,
+  Ui3nSelectorExpose,
   Ui3nSelectorItemDisplayingFunction,
 } from './ui3n-selector/types';
 import Ui3nMobileMenu from './ui3n-mobile-menu/ui3n-mobile-menu.vue';
@@ -150,6 +160,7 @@ export {
   Ui3nDropFilesProps,
   Ui3nDropFilesEmits,
   Ui3nDropFilesSlots,
+  Ui3nDropFilesExpose,
   Ui3nEmoji,
   Ui3nEmojiProps,
   Ui3nEmojiEmits,
@@ -161,13 +172,16 @@ export {
   Ui3nInputFile,
   Ui3nInputFileProps,
   Ui3nInputFileEmits,
+  Ui3nInputFileExpose,
   Ui3nText,
   Ui3nTextProps,
   Ui3nTextEmits,
+  Ui3nTextExpose,
   Ui3nCheckbox,
   Ui3nCheckboxProps,
   Ui3nCheckboxEmits,
   Ui3nCheckboxSlots,
+  Ui3nCheckboxExpose,
   Ui3nCheckboxValue,
   Ui3nNotification,
   Ui3nTableSortIcon,
@@ -197,6 +211,7 @@ export {
   Ui3nMenuProps,
   Ui3nMenuEmits,
   Ui3nMenuSlots,
+  Ui3nMenuExpose,
   Ui3nList,
   Ui3nListProps,
   Ui3nListEmits,
@@ -220,6 +235,7 @@ export {
   Ui3nSwitchProps,
   Ui3nSwitchEmits,
   Ui3nSwitchSlots,
+  Ui3nSwitchExpose,
   Ui3nStepLineBar,
   Ui3nStepLineBarProps,
   Ui3nProgressLinear,
@@ -237,24 +253,30 @@ export {
   Ui3nRadioEmits,
   Ui3nRadioProps,
   Ui3nRadioSlots,
+  Ui3nRadioExpose,
   Ui3nRadioGroupEmits,
   Ui3nRadioGroupProps,
   Ui3nRadioGroupSlots,
+  Ui3nRadioGroupExpose,
   Ui3nEditable,
   Ui3nEditableProps,
   Ui3nEditableEmits,
+  Ui3nEditableExpose,
   Ui3nAutocomplete,
   Ui3nAutocompleteProps,
   Ui3nAutocompleteEmits,
   Ui3nAutocompleteSlots,
+  Ui3nAutocompleteExpose,
   Ui3nAutocompleteOptionBase,
   Ui3nSlider,
   UI3nSliderProps,
   UI3nSliderEmits,
+  UI3nSliderExpose,
   Ui3nSelector,
   Ui3nSelectorProps,
   Ui3nSelectorEmits,
   Ui3nSelectorSlots,
+  Ui3nSelectorExpose,
   Ui3nSelectorOptionBase,
   Ui3nSelectorItemDisplayingFunction,
   Ui3nMobileMenu,

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

@@ -25,6 +25,10 @@ export type Ui3nAutocompleteValue<T extends Ui3nAutocompleteOptionBase> = {
  * Autocomplete component properties
  */
 export interface Ui3nAutocompleteProps<T extends Ui3nAutocompleteOptionBase> {
+  /**
+   * HTML name attribute for form submission
+   */
+  name?: string;
   /**
    * Whether to show chips
    * @default false
@@ -131,7 +135,7 @@ export interface Ui3nAutocompleteSlots<T extends Ui3nAutocompleteOptionBase> {
   /**
    * Chip slot
    */
-  chip: (props: { item: T | T[keyof T]; index: number }) => VNode;
+  chip: (props: { item: T | T[keyof T]; index: number; isHighlighted: boolean }) => VNode;
   /**
    * No data text slot
    */
@@ -141,3 +145,7 @@ export interface Ui3nAutocompleteSlots<T extends Ui3nAutocompleteOptionBase> {
    */
   selection: (props: { value: T[] | Array<T[keyof T]> }) => VNode;
 }
+
+export interface Ui3nAutocompleteExpose {
+  clear: () => void;
+}

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

@@ -1,19 +1,3 @@
-<!--
- Copyright (C) 2025 3NSoft Inc.
-
- This program is free software: you can redistribute it and/or modify it under
- the terms of the GNU General Public License as published by the Free Software
- Foundation, either version 3 of the License, or (at your option) any later
- version.
-
- This program is distributed in the hope that it will be useful, but
- WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
- See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- this program. If not, see <http://www.gnu.org/licenses/>.
--->
 <script setup lang="ts" generic="T extends Ui3nAutocompleteOptionBase">
   import { computed, ref, watch } from 'vue';
   import cloneDeep from 'lodash/cloneDeep';
@@ -21,14 +5,15 @@
   import size from 'lodash/size';
   import Ui3nChip from '../ui3n-chip/ui3n-chip.vue';
   import Ui3nMenu from '../ui3n-menu/ui3n-menu.vue';
-  import Ui3nHtml from '@/directives/ui3n-html';
-  import { markSearch, getRandomId } from '@/utils';
+  import Ui3nHtml from '../../directives/ui3n-html';
+  import { markSearch, getRandomId } from '../../utils';
   import type { Nullable } from '@/types';
-  import {
+  import type {
     Ui3nAutocompleteOptionBase,
     Ui3nAutocompleteProps,
     Ui3nAutocompleteEmits,
     Ui3nAutocompleteSlots,
+    Ui3nAutocompleteExpose,
   } from './types';
 
   const vUi3nHtml = Ui3nHtml;
@@ -52,6 +37,7 @@
   const inputEl = ref<Nullable<HTMLInputElement>>(null);
   const menuBodyEl = ref<Nullable<HTMLDivElement>>(null);
   const activeItemsIndex = ref<Nullable<number>>(null);
+  const isLastChipHighlighted = ref(false);
   const isNewValueValid = ref(true);
 
   const ids = computed(() =>
@@ -93,12 +79,14 @@
   });
 
   function onInput() {
+    isLastChipHighlighted.value = false;
     emits('update:search', query.value);
   }
 
   function onBlur() {
     emits('update:focused', false);
     activeItemsIndex.value = null;
+    isLastChipHighlighted.value = false;
 
     setTimeout(() => {
       isMenuOpen.value = false;
@@ -206,30 +194,80 @@
     }
   }
 
-  function onKeydown(event: KeyboardEvent, key: 'down' | 'up' | 'esc' | 'enter' | 'tab') {
+  function handleBackspaceKey() {
+    if (props.disabled || query.value !== '' || isEmpty(props.modelValue)) {
+      return;
+    }
+
+    if (!isLastChipHighlighted.value) {
+      isLastChipHighlighted.value = true;
+      return;
+    }
+
+    const updatedModelValue = cloneDeep(props.modelValue);
+    updatedModelValue.pop();
+    emits('update:modelValue', updatedModelValue);
+
+    isLastChipHighlighted.value = false;
+  }
+
+  function onKeydown(event: KeyboardEvent, key: 'down' | 'up' | 'esc' | 'enter' | 'tab' | 'backspace') {
     switch (key) {
-      case 'down':
+      case 'down': {
         event.preventDefault();
         event.stopPropagation();
         handlePressingDownKey();
         break;
-      case 'up':
+      }
+
+      case 'up': {
         event.preventDefault();
         event.stopPropagation();
         handlePressingUpKey();
         break;
+      }
+
       case 'esc':
       case 'tab':
         handlePressingEscOrTabKeys();
         break;
-      case 'enter':
+
+      case 'enter': {
         event.preventDefault();
         event.stopPropagation();
         handlePressingEnterKey();
         break;
+      }
+
+      case 'backspace':
+        handleBackspaceKey();
+        break;
     }
   }
 
+  function clear() {
+    query.value = '';
+    isMenuOpen.value = false;
+    activeItemsIndex.value = null;
+    isNewValueValid.value = true;
+
+    emits('update:modelValue', [] as unknown as T[] & Array<T[keyof T]>);
+    emits('update:search', '');
+  }
+
+  defineExpose<Ui3nAutocompleteExpose>({
+    clear,
+  });
+
+  watch(
+    () => props.name,
+    newName => {
+      if (!newName) {
+        clear();
+      }
+    },
+  );
+
   watch(
     () => size(filteredItems.value),
     (val, oVal) => {
@@ -246,6 +284,42 @@
 
 <template>
   <div :class="$style.ui3nAutocomplete">
+    <!-- 'hidden inputs' block for setting of 'name' attr when used in a form -->
+    <fieldset
+      v-if="name && !isEmpty(modelValue)"
+      :class="$style.hiddenBlock"
+    >
+      <template v-if="!multiple">
+        <input
+          type="hidden"
+          :name="name"
+          :value="returnObject ? JSON.stringify(modelValue) : modelValue"
+        />
+      </template>
+
+      <template v-else>
+        <template v-if="!returnObject">
+          <input
+            v-for="(val, index) in modelValue as Array<T[keyof T]>"
+            :key="`${name}-flat-${index}`"
+            type="hidden"
+            :name="`${name}[]`"
+            :value="val"
+          />
+        </template>
+
+        <template v-else>
+          <input
+            v-for="(item, index) in modelValue as T[]"
+            :key="item.id || `${name}-obj-${index}`"
+            type="hidden"
+            :name="`${name}[]`"
+            :value="JSON.stringify(item)"
+          />
+        </template>
+      </template>
+    </fieldset>
+
     <ui3n-menu
       v-model="isMenuOpen"
       :offset-x="2"
@@ -258,19 +332,31 @@
         ref="activatorEl"
         :class="$style.trigger"
       >
-        <template v-if="chips">
+        <transition-group
+          v-if="chips"
+          name="chipAnim"
+          tag="div"
+          :class="$style.chipsContainer"
+        >
           <!-- @vue-ignore -->
-          <template
+          <div
             v-for="(item, index) in modelValue"
-            :key="item.id"
+            :key="item.id || index"
+            :class="$style.chipWrapper"
           >
             <slot
               name="chip"
               :item="item"
               :index="index"
+              :is-highlighted="index === size(modelValue) - 1 && isLastChipHighlighted"
             >
               <ui3n-chip
                 height="32"
+                :color="
+                  index === size(modelValue) - 1 && isLastChipHighlighted
+                    ? 'var(--color-bg-control-primary-hover)'
+                    : undefined
+                "
                 round
                 closeable
                 @close="onChipClose(item)"
@@ -278,8 +364,8 @@
                 {{ returnObject ? (item as T)[props.itemTitle] : item }}
               </ui3n-chip>
             </slot>
-          </template>
-        </template>
+          </div>
+        </transition-group>
 
         <template v-else>
           <div :class="$style.displayValue">
@@ -302,6 +388,7 @@
           @keydown.esc="onKeydown($event, 'esc')"
           @keydown.enter="onKeydown($event, 'enter')"
           @keydown.tab="onKeydown($event, 'tab')"
+          @keydown.delete="onKeydown($event, 'backspace')"
         />
       </div>
 
@@ -356,11 +443,16 @@
 
 <style lang="scss" module>
   .ui3nAutocomplete {
-    --autocomplete-min-height: var(--spacing-l);
+    --ui3n-autocomplete-min-height: 32px;
+    --ui3n-autocomplete-font-size: 12px;
+    --ui3n-autocomplete-item-font-size: 13px;
+    --ui3n-autocomplete-padding-inline: 8px;
+    --ui3n-autocomplete-padding-block: 4px;
+    --ui3n-autocomplete-border-radius: 4px;
 
     position: relative;
     width: 100%;
-    min-height: var(--autocomplete-min-height);
+    min-height: var(--ui3n-autocomplete-min-height);
 
     :global(.match-search) {
       font-weight: 600;
@@ -368,29 +460,36 @@
     }
   }
 
+  .hiddenBlock {
+    display: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
   .trigger {
     display: flex;
     width: 100%;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: flex-start;
-    gap: var(--spacing-xs);
+    gap: 4px;
   }
 
   .displayValue {
-    font-size: var(--font-12);
-    line-height: var(--autocomplete-min-height);
+    font-size: var(--ui3n-autocomplete-font-size);
+    line-height: var(--ui3n-autocomplete-min-height);
     font-weight: 400;
     color: var(--color-text-control-primary-default);
   }
 
   .input {
-    border-radius: var(--spacing-xs);
-    padding: 0 var(--spacing-s);
+    border-radius: var(--ui3n-autocomplete-border-radius);
+    padding: 0 var(--ui3n-autocomplete-padding-inline);
     flex-grow: 1;
-    height: var(--autocomplete-min-height);
-    font-size: var(--font-12);
-    line-height: var(--autocomplete-min-height);
+    height: var(--ui3n-autocomplete-min-height);
+    font-size: var(--ui3n-autocomplete-font-size);
+    line-height: var(--ui3n-autocomplete-min-height);
     font-weight: 400;
     color: var(--color-text-control-primary-default);
     background-color: transparent;
@@ -407,8 +506,8 @@
     }
 
     &.inputWithError {
-      height: calc(var(--autocomplete-min-height) - 2px);
-      padding: 0 calc(var(--spacing-s) - 1px);
+      height: calc(var(--ui3n-autocomplete-min-height) - 2px);
+      padding: 0 calc(var(--ui3n-autocomplete-padding-inline) - 1px);
       border: 1px solid var(--error-content-default);
     }
   }
@@ -416,20 +515,20 @@
   .body {
     position: relative;
     background-color: var(--color-bg-block-primary-default);
-    padding: var(--spacing-xs);
+    padding: 4px;
   }
 
   .item {
     display: flex;
-    min-height: var(--spacing-l);
+    min-height: var(--ui3n-autocomplete-min-height);
     justify-content: flex-start;
     align-items: center;
-    padding: var(--spacing-xs) var(--spacing-s);
-    font-size: var(--font-13);
-    line-height: var(--font-16);
+    padding: var(--ui3n-autocomplete-padding-block) var(--ui3n-autocomplete-padding-inline);
+    font-size: var(--ui3n-autocomplete-item-font-size);
+    line-height: 1.23;
     font-weight: 500;
     color: var(--color-text-control-primary-default);
-    border-radius: var(--spacing-xs);
+    border-radius: var(--ui3n-autocomplete-border-radius);
     user-select: none;
     cursor: pointer;
 
@@ -452,14 +551,46 @@
 
   .noData {
     display: flex;
-    min-height: var(--spacing-l);
+    min-height: var(--ui3n-autocomplete-min-height);
     justify-content: flex-start;
     align-items: center;
-    padding: var(--spacing-xs) var(--spacing-s);
-    font-size: var(--font-13);
-    line-height: var(--font-16);
+    padding: var(--ui3n-autocomplete-padding-block) var(--ui3n-autocomplete-padding-inline);
+    font-size: var(--ui3n-autocomplete-item-font-size);
+    line-height: 1.23;
     font-weight: 500;
     color: var(--color-text-control-primary-default);
-    border-radius: var(--spacing-xs);
+    border-radius: var(--ui3n-autocomplete-border-radius);
+  }
+
+  .chipsContainer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: flex-start;
+  }
+
+  .chipWrapper {
+    display: inline-flex;
+  }
+
+  :global {
+    .chipAnim-enter-from,
+    .chipAnim-leave-to {
+      opacity: 0;
+      transform: scale(0.85);
+    }
+
+    .chipAnim-enter-active,
+    .chipAnim-leave-active {
+      transition: all 0.2s ease;
+    }
+
+    .chipAnim-move {
+      transition: transform 0.2s ease;
+    }
+
+    .chipAnim-leave-active {
+      position: absolute !important;
+    }
   }
 </style>

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

@@ -1,6 +1,10 @@
 import type { VNode } from 'vue';
 
 export interface Ui3nBadgeSimpleProps {
+  /**
+   * Root element id
+   */
+  id?: string;
   /** For simple display as a circle */
   dot?: boolean;
   /** Text displayed inside the circle */
@@ -11,7 +15,13 @@ export interface Ui3nBadgeSimpleProps {
   textColor?: string;
 }
 
+export interface Ui3nBadgeSimpleEmits {
+  (event: 'change:size', val: { width: number; height: number }): void;
+}
+
 export interface Ui3nBadgeProps {
+  /** Root element  id*/
+  id?: string;
   /** For simple display as a circle */
   dot?: boolean;
   /** Text displayed inside the circle */