@v1nt1248/3nclient-lib 0.1.76 → 0.1.78

package/dist/ui3n-plugins.js

@@ -3662,7 +3662,7 @@ const Wh = ["id"], Oh = /* @__PURE__ */ ZI({
       ], 2)) : JA("", !0);
     };
   }
-}), mh = "_overlay_mv0s5_1", Xh = "_dialog_mv0s5_11", jh = "_draggable_mv0s5_30", vh = "_title_mv0s5_34", Ph = "_icon_mv0s5_58", zh = "_dragHandleIcon_mv0s5_63", _h = "_closeBtn_mv0s5_69", $h = "_content_mv0s5_76", AU = "_actions_mv0s5_81", IU = "_bothBtns_mv0s5_89", QU = {
+}), mh = "_overlay_zorcd_1", Xh = "_dialog_zorcd_11", jh = "_draggable_zorcd_30", vh = "_title_zorcd_34", Ph = "_icon_zorcd_58", zh = "_dragHandleIcon_zorcd_62", _h = "_closeBtn_zorcd_68", $h = "_content_zorcd_75", AU = "_actions_zorcd_80", IU = "_bothBtns_zorcd_88", QU = {
   overlay: mh,
   dialog: Xh,
   draggable: jh,

package/package.json

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

package/src/components/index.ts

@@ -83,6 +83,13 @@ import type {
 } from './ui3n-radio-group/types';
 import Ui3nEditable from './ui3n-editable/ui3n-editable.vue';
 import type { Ui3nEditableProps, Ui3nEditableEmits } from './ui3n-editable/types';
+import Ui3nAutocomplete from './ui3n-autocomplete/ui3n-autocomplete.vue';
+import type {
+  Ui3nAutocompleteProps,
+  Ui3nAutocompleteEmits,
+  Ui3nAutocompleteSlots,
+  Ui3nAutocompleteOptionBase,
+} from './ui3n-autocomplete/types';
 
 export {
   Ui3nIcon,
@@ -188,4 +195,9 @@ export {
   Ui3nEditable,
   Ui3nEditableProps,
   Ui3nEditableEmits,
+  Ui3nAutocomplete,
+  Ui3nAutocompleteProps,
+  Ui3nAutocompleteEmits,
+  Ui3nAutocompleteSlots,
+  Ui3nAutocompleteOptionBase,
 };

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

@@ -0,0 +1,40 @@
+import { VNode } from 'vue';
+
+export interface Ui3nAutocompleteOptionBase {
+  id: string;
+  name?: string;
+}
+
+export type Ui3nAutocompleteValue<T extends Ui3nAutocompleteOptionBase> = {
+  [Property in keyof T]: T[Property];
+};
+
+export interface Ui3nAutocompleteProps<T extends Ui3nAutocompleteOptionBase> {
+  chips?: boolean;
+  clearOnSelect?: boolean;
+  customFilter?: (value: T, query: string) => boolean;
+  disabled?: boolean;
+  filterKeys?: string[];
+  hideSelected?: boolean;
+  items: T[];
+  itemTitle?: keyof T;
+  itemValue?: keyof T;
+  modelValue: T[] | Array<T[keyof T]>;
+  multiple?: boolean;
+  noDataText?: string;
+  placeholder?: string;
+  returnObject?: boolean;
+}
+
+export interface Ui3nAutocompleteEmits<T extends Ui3nAutocompleteOptionBase> {
+  (event: 'update:modelValue', value: T[] | Array<T[keyof T]>): void;
+  (event: 'update:search', value: string): void;
+  (event: 'update:focused', value: boolean): void;
+}
+
+export interface Ui3nAutocompleteSlots<T extends Ui3nAutocompleteOptionBase> {
+  item: (props: { item: T; index: number; query?: string }) => VNode;
+  chip: (props: { item: T | T[keyof T]; index: number }) => VNode;
+  noDataText: () => VNode;
+  selection: (props: { value: T[] | Array<T[keyof T]> }) => VNode;
+}

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

@@ -0,0 +1,390 @@
+<!--
+ 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';
+  import isEmpty from 'lodash/isEmpty';
+  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 type { Nullable } from '@/components/types';
+  import {
+    Ui3nAutocompleteOptionBase,
+    Ui3nAutocompleteProps,
+    Ui3nAutocompleteEmits,
+    Ui3nAutocompleteSlots,
+  } from './types';
+
+  const vUi3nHtml = Ui3nHtml;
+
+  const props = withDefaults(defineProps<Ui3nAutocompleteProps<T>>(), {
+    clearOnSelect: false,
+    filterKeys: () => [],
+    filterMode: 'every',
+    hideSelected: false,
+    items: () => [],
+    itemTitle: 'name',
+    itemValue: 'id',
+  });
+  const emits = defineEmits<Ui3nAutocompleteEmits<T>>();
+  defineSlots<Ui3nAutocompleteSlots<T>>();
+
+  const componentId = `auto-${getRandomId(4)}`;
+
+  const query = ref('');
+  const isMenuOpen = ref(false);
+  const activatorEl = ref<Nullable<HTMLDivElement>>(null);
+  const inputEl = ref<Nullable<HTMLInputElement>>(null);
+  const menuBodyEl = ref<Nullable<HTMLDivElement>>(null);
+  const activeItemsIndex = ref<Nullable<number>>(null);
+
+  const ids = computed(() => props.returnObject
+    ? (props.modelValue as T[]).map(item => item.id)
+    : (props.modelValue as Array<T[keyof T]>));
+
+  const displayValue = computed(() => {
+    if (props.chips) return '';
+
+    if (props.returnObject) {
+      return (props.modelValue as T[]).map(v => v[props.itemTitle] || '?').join(', ');
+    }
+
+    return props.modelValue.join(', ');
+  });
+
+  const filteredItems = computed(() => {
+    if (props.customFilter) {
+      return props.items
+        .filter(item => props.customFilter!(item, query.value))
+        .filter(item => {
+          if (!props.hideSelected) return true;
+
+          return props.returnObject
+            ? !(ids.value as string[]).includes(item.id as string)
+            : !(ids.value as Array<T[keyof T]>).includes(item as T[keyof T]);
+        });
+    }
+
+    return props.items
+      .filter(item => (item[props.itemTitle] as string).toLowerCase().includes(query.value.toLowerCase()))
+      .filter(item => {
+        if (!props.hideSelected) return true;
+
+        return props.returnObject
+          ? !(ids.value as string[]).includes(item.id as string)
+          : !(ids.value as Array<T[keyof T]>).includes(item as T[keyof T]);
+      });
+  });
+
+  function onInput() {
+    emits('update:search', query.value);
+  }
+
+  function onBlur() {
+    emits('update:focused', false)
+    activeItemsIndex.value = null;
+    query.value = '';
+  }
+
+  function onItemClick(item: T) {
+    if (props.disabled) return;
+
+    if (!props.multiple) {
+      const newValue = props.returnObject ? [item] : [item[props.itemValue]];
+      emits('update:modelValue', newValue);
+      return;
+    }
+
+    const updatedValue = cloneDeep(props.modelValue);
+    const index = props.returnObject
+      ? (props.modelValue as T[]).findIndex(v => v.id === item.id)
+      : props.modelValue.findIndex(v => v === item[props.itemValue]);
+
+    if (index > -1) {
+      updatedValue.splice(index, 1);
+    } else {
+      // @ts-ignore
+      updatedValue.push(props.returnObject ? item : item[props.itemValue]);
+    }
+    emits('update:modelValue', updatedValue);
+
+    props.clearOnSelect && (query.value = '');
+  }
+
+  function onChipClose(item: T | T[keyof T]) {
+    if (props.disabled) return;
+
+    const index = props.returnObject
+      ? (props.modelValue as T[]).findIndex(v => v.id === (item as T).id)
+      : (props.modelValue as Array<T[keyof T]>).findIndex(v => v === item);
+    const updatedModelValue = cloneDeep(props.modelValue);
+    updatedModelValue.splice(index, 1);
+    emits('update:modelValue', updatedModelValue);
+  }
+
+  function handlePressingDownKey() {
+    if (activeItemsIndex.value === null) {
+      activeItemsIndex.value = 0;
+      menuBodyEl.value && menuBodyEl.value.focus();
+      return;
+    }
+
+    if (activeItemsIndex.value >= 0 && activeItemsIndex.value < size(filteredItems.value) - 1) {
+      activeItemsIndex.value += 1;
+    }
+  }
+
+  function handlePressingUpKey() {
+    if (activeItemsIndex.value === null) {
+      activeItemsIndex.value = size(filteredItems.value) - 1;
+      menuBodyEl.value && menuBodyEl.value.focus();
+      return;
+    }
+
+    if (activeItemsIndex.value > 0 && activeItemsIndex.value < size(filteredItems.value)) {
+      activeItemsIndex.value -= 1;
+    }
+  }
+
+  function handlePressingEscOrTabKeys() {
+    emits('update:focused', false)
+    isMenuOpen.value = false;
+    activeItemsIndex.value = null;
+    query.value = '';
+    inputEl.value && inputEl.value.blur();
+    activatorEl.value && activatorEl.value.blur();
+  }
+
+  function handlePressingEnterKey() {
+    if (activeItemsIndex.value === null) {
+      isMenuOpen.value = true;
+      activeItemsIndex.value = 0;
+      menuBodyEl.value && menuBodyEl.value.focus();
+      return;
+    }
+
+    const item = filteredItems.value[activeItemsIndex.value!];
+    onItemClick(item);
+    activeItemsIndex.value = null;
+  }
+
+  function onKeydown(event: KeyboardEvent, key: 'down' | 'up' | 'esc' | 'enter' | 'tab') {
+    if (isEmpty(filteredItems.value)) return;
+
+    switch (key) {
+      case 'down':
+        event.preventDefault();
+        event.stopPropagation();
+        handlePressingDownKey();
+        break;
+      case 'up':
+        event.preventDefault();
+        event.stopPropagation();
+        handlePressingUpKey();
+        break;
+      case 'esc':
+      case 'tab':
+        handlePressingEscOrTabKeys();
+        break;
+      case 'enter':
+        event.preventDefault();
+        event.stopPropagation();
+        handlePressingEnterKey();
+        break;
+    }
+  }
+
+  watch(
+    () => size(filteredItems.value),
+    (val, oVal) => {
+      if (val !== oVal) {
+        activeItemsIndex.value = null;
+      }
+    },
+  );
+</script>
+
+<template>
+  <div :class="$style.ui3nAutocomplete">
+    <ui3n-menu v-model="isMenuOpen" :offset-x="2" :offset-y="4" :disabled="disabled">
+      <div ref="activatorEl" :class="$style.trigger">
+        <template v-if="chips">
+          <template v-for="(item, index) in modelValue" :key="item.id">
+            <slot name="chip" :item="item" :index="index">
+              <ui3n-chip
+                round
+                closeable
+                @close="onChipClose(item)"
+              >
+                {{ returnObject ? (item as T)[props.itemTitle] : item }}
+              </ui3n-chip>
+            </slot>
+          </template>
+        </template>
+
+        <template v-else>
+          <div :class="$style.displayValue">{{ displayValue }}</div>
+        </template>
+
+        <input
+          ref="inputEl"
+          v-model="query"
+          type="text"
+          :class="$style.input"
+          :disabled="disabled"
+          @input="onInput"
+          @focusin="emits('update:focused', true)"
+          @focusout="onBlur"
+          @keydown.down="onKeydown($event, 'down')"
+          @keydown.up="onKeydown($event, 'up')"
+          @keydown.esc="onKeydown($event, 'esc')"
+          @keydown.enter="onKeydown($event, 'enter')"
+          @keydown.tab="onKeydown($event, 'tab')"
+        />
+      </div>
+
+      <template #menu>
+        <div ref="menuBodyEl" :class="$style.body">
+          <template v-if="size(filteredItems)">
+            <template v-for="(item, index) in filteredItems" :key="item.id">
+              <div
+                :id="`${componentId}-${index}`"
+                :class="[
+                  $style.item,
+                  activeItemsIndex === index && $style.itemSelected,
+                  disabled && $style.itemDisabled
+                ]"
+                @click.stop.prevent="onItemClick(item)"
+              >
+                <slot name="item" :item="item" :index="index" :query="query">
+                  <span v-ui3n-html="markSearch(item[props.itemTitle] as string, query)" />
+                </slot>
+              </div>
+            </template>
+          </template>
+
+          <div v-if="!size(filteredItems) && noDataText" :class="$style.noData">
+            <slot name="noDataText">
+              {{ noDataText }}
+            </slot>
+          </div>
+        </div>
+      </template>
+    </ui3n-menu>
+  </div>
+</template>
+
+<style lang="scss" module>
+  .ui3nAutocomplete {
+    --autocomplete-min-height: var(--spacing-ml);
+
+    position: relative;
+    width: 100%;
+    min-height: var(--autocomplete-min-height);
+
+    :global(.match-search) {
+      font-weight: 600;
+      color: var(--color-text-control-accent-default) !important;
+    }
+  }
+
+  .trigger {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
+  }
+
+  .displayValue {
+    font-size: var(--font-12);
+    line-height: var(--autocomplete-min-height);
+    font-weight: 400;
+    color: var(--color-text-control-primary-default);
+  }
+
+  .input {
+    border-radius: var(--spacing-xs);
+    padding: 0 var(--spacing-s);
+    flex-grow: 1;
+    height: var(--autocomplete-min-height);
+    font-size: var(--font-12);
+    line-height: var(--font-16);
+    font-weight: 400;
+    color: var(--color-text-control-primary-default);
+    border: none;
+    outline: none;
+
+    &::placeholder {
+      color: var(--color-text-control-secondary-default);
+    }
+
+    &:hover,
+    &:focus {
+      height: calc(var(--autocomplete-min-height) - 2px);
+      border: 1px solid var(--color-border-control-accent-focused);
+    }
+  }
+
+  .body {
+    position: relative;
+    background-color: var(--color-bg-control-secondary-default);
+    padding: var(--spacing-xs);
+  }
+
+  .item {
+    display: flex;
+    min-height: var(--spacing-l);
+    justify-content: flex-start;
+    align-items: center;
+    padding: var(--spacing-xs) var(--spacing-s);
+    font-size: var(--font-13);
+    line-height: var(--font-16);
+    font-weight: 500;
+    color: var(--color-text-control-primary-default);
+    border-radius: var(--spacing-xs);
+    user-select: none;
+    cursor: pointer;
+
+    &.itemSelected,
+    &:hover {
+      background-color: var(--color-bg-control-primary-hover);
+      color: var(--color-text-control-accent-default);
+    }
+
+    &.itemDisabled {
+      opacity: 0.7;
+      pointer-events: none;
+    }
+  }
+
+  .noData {
+    display: flex;
+    min-height: var(--spacing-l);
+    justify-content: flex-start;
+    align-items: center;
+    padding: var(--spacing-xs) var(--spacing-s);
+    font-size: var(--font-13);
+    line-height: var(--font-16);
+    font-weight: 500;
+    color: var(--color-text-control-primary-default);
+    border-radius: var(--spacing-xs);
+  }
+</style>

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

@@ -42,6 +42,10 @@ const mainCssClasses = computed(() => {
 
   return val;
 });
+
+function onClick() {
+  emits('close');
+}
 </script>
 
 <template>
@@ -62,7 +66,7 @@ const mainCssClasses = computed(() => {
       color="transparent"
       icon="round-close"
       icon-color="var(--color-icon-control-primary-default)"
-      @click="emits('close')"
+      @click.stop.prevent="onClick"
     />
   </div>
 </template>

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

@@ -374,7 +374,6 @@
 
     .icon {
       position: relative;
-      top: -1px;
     }
   }
 

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

@@ -1,6 +1,7 @@
 import { VNode } from 'vue';
 
 export interface Ui3nMenuProps {
+  modelValue?: boolean;
   positionStrategy?: 'absolute' | 'fixed';
   offsetX?: number;
   offsetY?: number;
@@ -15,6 +16,7 @@ export interface Ui3nMenuEmits {
   (ev: 'close'): void;
   (ev: 'closed'): void;
   (ev: 'click-outside'): void;
+  (ev: 'update:modelValue', value: boolean): void;
 }
 
 export interface Ui3nMenuSlots {

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

@@ -49,11 +49,13 @@
 
     isShow.value = !isShow.value;
     isShow.value ? emits('open') : emits('close');
+    emits('update:modelValue', isShow.value);
   }
 
   function onContentClick() {
     isShow.value = false;
     emits('close');
+    emits('update:modelValue', isShow.value);
   }
 
   function onClickOutside() {
@@ -61,6 +63,7 @@
     if (props.closeOnClickOutside) {
       isShow.value = false;
       emits('close');
+      emits('update:modelValue', isShow.value);
     }
   }
 
@@ -70,13 +73,22 @@
       val ? emits('opened') : emits('closed');
     },
   );
+
+  watch(
+    () => props.modelValue,
+    val => {
+      if (isShow.value !== val) {
+        isShow.value = val;
+      }
+    }, { immediate: true },
+  );
 </script>
 
 <template>
   <div ref="menuElement" :class="$style.ui3nMenu">
     <div
       ref="menuTriggerElement"
-      :class="$style.ui3nMenuTrigger"
+      :class="[$style.ui3nMenuTrigger, disabled && $style.ui3nMenuTriggerDisabled]"
       @click.stop="toggleMenu"
     >
       <slot />
@@ -109,6 +121,11 @@
   .ui3nMenuTrigger {
     position: relative;
     max-width: max-content;
+
+    &.ui3nMenuTriggerDisabled {
+      pointer-events: none;
+      cursor: default;
+    }
   }
 
   .ui3nMenuContent {