cynx-lib 1.3.52 → 1.3.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.52",
+  "version": "1.3.53",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/vue/components/Select.vue

@@ -8,12 +8,18 @@ import {
   nextTick,
   useSlots,
 } from "vue";
-import { ChevronDown, Check, X, Search } from "lucide-vue-next";
+import { ChevronDown, Check, X, Plus } from "lucide-vue-next";
 
 export interface SelectOption {
   value: string | number;
-  label: string;
+  label?: string | number;
+  name?: string | number;
+  search?: string | number;
+  employee_id?: string | number;
+  code?: string | number;
+  title?: string | number;
   disabled?: boolean;
+  displayLabel?: string | number;
   [key: string]: any;
 }
 
@@ -29,78 +35,63 @@ const SIZES: Record<
     itemPadding: string;
   }
 > = {
-  xs: {
-    height: 24,
-    fontSize: 11,
-    paddingH: 6,
-    searchHeight: 22,
-    searchFont: 10.5,
-    itemMinHeight: 20,
-    itemPadding: "3px 6px",
-  },
-  sm: {
-    height: 28,
-    fontSize: 11.5,
-    paddingH: 8,
-    searchHeight: 26,
-    searchFont: 11.5,
-    itemMinHeight: 24,
-    itemPadding: "4px 8px",
-  },
-  md: {
-    height: 32,
-    fontSize: 13,
-    paddingH: 10,
-    searchHeight: 30,
-    searchFont: 12.5,
-    itemMinHeight: 28,
-    itemPadding: "6px 10px",
-  },
-  lg: {
-    height: 36,
-    fontSize: 14,
-    paddingH: 14,
-    searchHeight: 34,
-    searchFont: 13,
-    itemMinHeight: 32,
-    itemPadding: "8px 12px",
-  },
+  xs: { height: 24, fontSize: 11, paddingH: 6, searchHeight: 22, searchFont: 10.5, itemMinHeight: 18, itemPadding: "3px 5px" },
+  sm: { height: 28, fontSize: 11.5, paddingH: 8, searchHeight: 26, searchFont: 11.5, itemMinHeight: 22, itemPadding: "4.5px 7px" },
+  md: { height: 32, fontSize: 13, paddingH: 10, searchHeight: 32, searchFont: 12.5, itemMinHeight: 28, itemPadding: "8px 10px" },
+  lg: { height: 36, fontSize: 14, paddingH: 14, searchHeight: 34, searchFont: 13, itemMinHeight: 32, itemPadding: "9px 12px" },
 };
 
+const KEYFRAMES = `
+@keyframes selFadeInDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
+@keyframes selFadeInUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
+`;
+const _id = "cynx-select-styles";
+
+function ensureStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(_id)) return;
+  const tag = document.createElement("style");
+  tag.id = _id;
+  tag.textContent = KEYFRAMES;
+  document.head.appendChild(tag);
+}
+
 const props = withDefaults(
   defineProps<{
-    modelValue?: string | number | (string | number)[];
     options?: SelectOption[];
+    modelValue?: any;
+    value?: any;
     placeholder?: string;
     disabled?: boolean;
     multi?: boolean;
     searchable?: boolean;
     clearable?: boolean;
-    selectAll?: boolean;
-    selectAllText?: string;
     size?: "xs" | "sm" | "md" | "lg";
-    showCount?: boolean | ((count: number) => string);
-    rounded?: boolean | string | number;
-    searchMode?: "includes" | "starts_with";
-    className?: string;
     style?: Record<string, any>;
+    rounded?: boolean | string | number;
+    showCount?: boolean | ((count: number) => string);
+    searchMode?: "includes" | "starts_with" | "word_start";
+    filterOption?: (option: SelectOption, query: string) => boolean;
+    creatable?: boolean;
+    createLabel?: (query: string) => string;
   }>(),
   {
-    modelValue: undefined,
     options: () => [],
+    modelValue: undefined,
+    value: undefined,
     placeholder: "Select...",
     disabled: false,
     multi: false,
     searchable: false,
     clearable: false,
-    selectAll: false,
-    selectAllText: "All Select",
     size: "md",
-    showCount: false,
+    style: () => ({}),
     rounded: false,
+    showCount: false,
     searchMode: "includes",
-    className: "",
-    style: () => ({}),
+    filterOption: undefined,
+    creatable: false,
+    createLabel: undefined,
   }
 );
 
@@ -114,60 +105,57 @@ const emit = defineEmits<{
 const slots = useSlots();
 const open = ref(false);
 const query = ref("");
+const pos = ref({ top: 0, left: 0, width: 0, openUp: false, maxHeight: 200 });
 const wrapRef = ref<HTMLElement | null>(null);
 const dropRef = ref<HTMLElement | null>(null);
-const searchInputRef = ref<HTMLInputElement | null>(null);
-
-const pos = ref({
-  top: 0,
-  left: 0,
-  width: 0,
-  openUp: false,
-  maxHeight: 220,
-});
+const inputRef = ref<HTMLInputElement | null>(null);
+
+ensureStyles();
 
 const s = computed(() => SIZES[props.size] || SIZES.md);
 
-const selectedValues = computed<(string | number)[]>(() => {
+const currentVal = computed(() => {
+  return props.modelValue !== undefined ? props.modelValue : props.value;
+});
+
+const selectedValues = computed<any[]>(() => {
+  const v = currentVal.value;
   if (props.multi) {
-    if (Array.isArray(props.modelValue)) return props.modelValue;
-    if (props.modelValue !== undefined && props.modelValue !== null && props.modelValue !== "") {
-      return [props.modelValue as string | number];
-    }
-    return [];
-  }
-  if (props.modelValue !== undefined && props.modelValue !== null && props.modelValue !== "") {
-    return [props.modelValue as string | number];
+    return Array.isArray(v) ? v : [];
   }
-  return [];
+  return v !== undefined && v !== null && v !== "" ? [v] : [];
 });
 
-const selectedOptions = computed<SelectOption[]>(() => {
-  return selectedValues.value
-    .map((v) => props.options.find((o) => String(o.value) === String(v)))
-    .filter((o): o is SelectOption => Boolean(o));
-});
+function getLabel(optVal: any) {
+  const opt = props.options.find((o) => o.value === optVal);
+  return opt ? (opt.displayLabel || opt.label) : optVal;
+}
 
-const isAllSelected = computed(() => {
-  if (!props.options.length) return false;
-  const enabledOptions = props.options.filter((o) => !o.disabled);
-  if (!enabledOptions.length) return false;
-  return enabledOptions.every((o) =>
-    selectedValues.value.some((v) => String(v) === String(o.value))
-  );
-});
+function isSelected(optVal: any) {
+  const v = currentVal.value;
+  return props.multi ? (Array.isArray(v) && v.includes(optVal)) : v === optVal;
+}
 
-const filteredOptions = computed<SelectOption[]>(() => {
-  if (!query.value) return props.options;
-  const q = query.value.toLowerCase().trim();
-  return props.options.filter((o) => {
-    const label = String(o.label ?? "").toLowerCase();
-    const val = String(o.value ?? "").toLowerCase();
-    if (props.searchMode === "starts_with") {
-      return label.startsWith(q) || val.startsWith(q);
+const radiusVal = computed(() => {
+  const curSize = s.value;
+  if (props.rounded) {
+    if (typeof props.rounded === "string") {
+      return props.rounded.endsWith("px") ||
+        props.rounded.endsWith("rem") ||
+        props.rounded.startsWith("var")
+        ? props.rounded
+        : `${props.rounded}px`;
     }
-    return label.includes(q) || val.includes(q);
-  });
+    if (typeof props.rounded === "number") {
+      return `${props.rounded}px`;
+    }
+    return "6px";
+  }
+  return curSize.height <= 26
+    ? "4px"
+    : curSize.height <= 28
+    ? "6px"
+    : "var(--rmd,var(--rads, 8px))";
 });
 
 const calcPosition = () => {
@@ -178,13 +166,15 @@ const calcPosition = () => {
   const spaceBelow = window.innerHeight - r.bottom;
   const spaceAbove = r.top;
 
-  const openUp =
-    spaceBelow < Math.min(dropHeight, 220) + 12 && spaceAbove > spaceBelow;
+  // If not enough space below (< dropHeight + 10) and more space above, open up
+  const openUp = spaceBelow < Math.min(dropHeight, 220) + 12 && spaceAbove > spaceBelow;
 
+  // Dynamic max-height for inner list to prevent overflow
   const availableSpace = openUp ? spaceAbove - 16 : spaceBelow - 16;
+  const isSearchActive = props.searchable || props.creatable;
   const calculatedMaxHeight = Math.max(
     90,
-    Math.min(240, availableSpace - (props.searchable || props.selectAll ? 48 : 12))
+    Math.min(220, availableSpace - (isSearchActive ? 46 : 14))
   );
 
   let top: number;
@@ -215,166 +205,148 @@ const handleWindowClick = (e: MouseEvent) => {
   const inTrigger = wrapRef.value && wrapRef.value.contains(target);
   const inDrop = dropRef.value && dropRef.value.contains(target);
   if (!inTrigger && !inDrop) {
-    closeDropdown();
+    open.value = false;
+    emit("visible-change", false);
   }
 };
 
-const openDropdown = () => {
-  if (props.disabled) return;
-  open.value = true;
-  calcPosition();
-  emit("visible-change", true);
-  nextTick(() => {
+watch(open, (isOpen) => {
+  if (isOpen) {
     calcPosition();
-    if (props.searchable && searchInputRef.value) {
-      searchInputRef.value.focus();
-    }
-  });
-};
+    window.addEventListener("scroll", calcPosition, true);
+    window.addEventListener("resize", calcPosition);
+    document.addEventListener("mousedown", handleWindowClick, true);
+    nextTick(() => {
+      calcPosition();
+      if ((props.searchable || props.creatable) && inputRef.value) {
+        inputRef.value.focus();
+      }
+    });
+  } else {
+    query.value = "";
+    window.removeEventListener("scroll", calcPosition, true);
+    window.removeEventListener("resize", calcPosition);
+    document.removeEventListener("mousedown", handleWindowClick, true);
+  }
+});
 
-const closeDropdown = () => {
-  open.value = false;
-  query.value = "";
-  emit("visible-change", false);
-};
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", calcPosition, true);
+  window.removeEventListener("resize", calcPosition);
+  document.removeEventListener("mousedown", handleWindowClick, true);
+});
 
-const toggleOpen = () => {
-  if (open.value) {
-    closeDropdown();
-  } else {
-    openDropdown();
+const filtered = computed(() => {
+  if (!query.value) return props.options;
+  const q = query.value.toLowerCase().trim();
+  if (typeof props.filterOption === "function") {
+    return props.options.filter((o) => props.filterOption!(o, q));
   }
-};
+  const isStartsWith = props.searchMode === "starts_with" || props.searchMode === "word_start";
+  return props.options.filter((o) => {
+    const targets: string[] = [];
+    if (o.label != null) targets.push(String(o.label));
+    if (o.name != null && o.name !== o.label) targets.push(String(o.name));
+    if (o.search != null) targets.push(String(o.search));
+    if (o.employee_id != null) targets.push(String(o.employee_id));
+    if (o.code != null) targets.push(String(o.code));
+    if (o.title != null) targets.push(String(o.title));
+    if (targets.length === 0 && o.value != null) {
+      targets.push(String(o.value));
+    }
 
-const isOptionSelected = (optVal: string | number) => {
-  return selectedValues.value.some((v) => String(v) === String(optVal));
-};
+    for (const t of targets) {
+      const str = t.toLowerCase().trim();
+      if (isStartsWith) {
+        if (str.startsWith(q)) return true;
+        const words = str.split(/[\s\-.,()\/_:]+/);
+        if (words.some((w) => w.startsWith(q))) return true;
+      } else {
+        if (str.includes(q)) return true;
+      }
+    }
+    return false;
+  });
+});
 
-const toggleOption = (optVal: string | number) => {
+function handleOpen() {
+  if (props.disabled) return;
+  if (!open.value && wrapRef.value) {
+    calcPosition();
+  }
+  open.value = !open.value;
+  emit("visible-change", open.value);
+}
+
+function toggleOption(optVal: any) {
   if (props.multi) {
-    const current = [...selectedValues.value];
-    const index = current.findIndex((v) => String(v) === String(optVal));
-    let next: (string | number)[];
-    if (index >= 0) {
-      next = current.filter((_, i) => i !== index);
-    } else {
-      next = [...current, optVal];
-    }
+    const arr = Array.isArray(currentVal.value) ? currentVal.value : [];
+    const next = arr.includes(optVal)
+      ? arr.filter((v: any) => v !== optVal)
+      : [...arr, optVal];
     emit("update:modelValue", next);
     emit("change", next);
   } else {
     emit("update:modelValue", optVal);
     emit("change", optVal);
-    closeDropdown();
-  }
-};
-
-const toggleSelectAll = () => {
-  if (!props.multi) return;
-  if (isAllSelected.value) {
-    emit("update:modelValue", []);
-    emit("change", []);
-  } else {
-    const allVals = props.options
-      .filter((o) => !o.disabled)
-      .map((o) => o.value);
-    emit("update:modelValue", allVals);
-    emit("change", allVals);
+    open.value = false;
+    emit("visible-change", false);
   }
-};
+}
 
-const removeTag = (e: MouseEvent, val: string | number) => {
+function removeTag(e: MouseEvent, valToRemove: any) {
   e.stopPropagation();
-  const next = selectedValues.value.filter((v) => String(v) !== String(val));
+  const arr = Array.isArray(currentVal.value) ? currentVal.value : [];
+  const next = arr.filter((v: any) => v !== valToRemove);
   emit("update:modelValue", next);
   emit("change", next);
-};
+}
 
-const handleClear = (e: MouseEvent) => {
+function handleClear(e: MouseEvent) {
   e.stopPropagation();
   const next = props.multi ? [] : "";
   emit("update:modelValue", next);
   emit("change", next);
   emit("clear");
-};
-
-const getOptionLabel = (val: string | number) => {
-  const opt = props.options.find((o) => String(o.value) === String(val));
-  return opt ? opt.label : String(val);
-};
-
-const displaySummaryText = computed(() => {
-  if (!selectedValues.value.length) return "";
-  if (typeof props.showCount === "function") {
-    return props.showCount(selectedValues.value.length);
-  }
-  if (props.showCount) {
-    if (selectedValues.value.length === 1) {
-      return getOptionLabel(selectedValues.value[0]);
-    }
-    if (isAllSelected.value) {
-      return `All Selected (${selectedValues.value.length})`;
-    }
-    return `Selected (${selectedValues.value.length})`;
-  }
-  return "";
-});
-
-watch(open, (isOpen) => {
-  if (isOpen) {
-    window.addEventListener("scroll", calcPosition, true);
-    window.addEventListener("resize", calcPosition);
-    document.addEventListener("mousedown", handleWindowClick, true);
-  } else {
-    window.removeEventListener("scroll", calcPosition, true);
-    window.removeEventListener("resize", calcPosition);
-    document.removeEventListener("mousedown", handleWindowClick, true);
-  }
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("scroll", calcPosition, true);
-  window.removeEventListener("resize", calcPosition);
-  document.removeEventListener("mousedown", handleWindowClick, true);
-});
+}
 
-const radiusStyle = computed(() => {
-  if (props.rounded) {
-    if (typeof props.rounded === "string") {
-      return props.rounded.endsWith("px") ||
-        props.rounded.endsWith("rem") ||
-        props.rounded.startsWith("var")
-        ? props.rounded
-        : `${props.rounded}px`;
+function handleInputKeyDown(e: KeyboardEvent) {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    e.stopPropagation();
+    const trimmed = query.value.trim();
+    if (!trimmed) return;
+    const exact = filtered.value.find(
+      (o) => String(o.label || o.value || "").toLowerCase() === trimmed.toLowerCase()
+    );
+    if (exact && !exact.disabled) {
+      toggleOption(exact.value);
+      query.value = "";
+    } else if (props.creatable) {
+      toggleOption(trimmed);
+      query.value = "";
+    } else if (filtered.value.length > 0 && !filtered.value[0].disabled) {
+      toggleOption(filtered.value[0].value);
+      query.value = "";
     }
-    if (typeof props.rounded === "number") return `${props.rounded}px`;
-    return "6px";
   }
-  return s.value.height <= 26
-    ? "4px"
-    : s.value.height <= 28
-    ? "6px"
-    : "var(--rads, 8px)";
-});
+}
 </script>
 
 <template>
   <div
     ref="wrapRef"
-    class="cynx-select-root"
-    :class="className"
     :style="{
       position: 'relative',
       width: '100%',
       boxSizing: 'border-box',
+      fontFamily: 'var(--f,var(--sans, inherit))',
       opacity: disabled ? 0.5 : 1,
       pointerEvents: disabled ? 'none' : undefined,
       ...style,
     }"
   >
-    <!-- Select Trigger -->
     <div
-      class="cynx-select-trigger"
       :style="{
         width: '100%',
         boxSizing: 'border-box',
@@ -384,56 +356,56 @@ const radiusStyle = computed(() => {
         gap: '4px',
         padding: `0 ${s.paddingH}px`,
         height: `${s.height}px`,
-        background: 'var(--sf, var(--surface, #ffffff))',
-        border: `1px solid ${open ? 'var(--accent, #12675D)' : 'var(--border, #e2e8f0)'}`,
-        borderRadius: radiusStyle,
+        background: 'var(--sf,var(--surface, #ffffff))',
+        border: `1px solid ${open ? 'var(--accent, #f99e2c)' : 'var(--bd2,var(--border, #e2e8f0))'}`,
+        borderRadius: radiusVal,
         cursor: 'pointer',
+        fontFamily: 'var(--f,var(--sans,inherit))',
         fontSize: `${s.fontSize}px`,
         lineHeight: 1.2,
-        color: 'var(--primary-text, #0f172a)',
+        color: 'var(--t,var(--primary-text, #0f172a))',
         outline: 'none',
-        transition: 'border-color 0.15s, box-shadow 0.15s',
+        transition: 'border-color var(--tr,.15s), box-shadow var(--tr,.15s)',
         boxShadow: open
-          ? '0 0 0 2px rgba(18, 103, 93, 0.15)'
-          : 'var(--shadow, 0 1px 2px rgba(0, 0, 0, 0.04))',
+          ? 'var(--infd, rgba(37,99,235,.1))'
+          : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
       }"
-      @click="toggleOpen"
+      @click="handleOpen"
     >
-      <!-- Prefix Slot -->
-      <slot name="prefix" />
+      <slot v-if="slots.prefix" name="prefix" />
 
-      <!-- Content / Label Area -->
       <div
         style="
           flex: 1;
           min-width: 0;
           display: flex;
           align-items: center;
-          overflow: hidden;
         "
       >
-        <!-- Custom Label Slot -->
         <slot
           v-if="slots.label && selectedValues.length > 0"
           name="label"
           :value="multi ? selectedValues : selectedValues[0]"
-          :selected-options="selectedOptions"
-          :selected-option="selectedOptions[0]"
         />
 
-        <!-- Multi Select Tags / Summary -->
         <template v-else-if="multi && selectedValues.length > 0">
           <span
-            v-if="displaySummaryText"
+            v-if="showCount"
             style="
               font-weight: 500;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
-              color: var(--primary-text, #0f172a);
+              color: var(--t,var(--primary-text, #0f172a));
             "
           >
-            {{ displaySummaryText }}
+            {{
+              typeof showCount === "function"
+                ? showCount(selectedValues.length)
+                : selectedValues.length === 1
+                ? getLabel(selectedValues[0])
+                : `Выбрано: ${selectedValues.length}`
+            }}
           </span>
           <div
             v-else
@@ -448,34 +420,34 @@ const radiusStyle = computed(() => {
             <span
               v-for="v in selectedValues"
               :key="v"
-              style="
-                display: inline-flex;
-                align-items: center;
-                gap: 4px;
-                padding: 1px 6px;
-                background: rgba(18, 103, 93, 0.1);
-                border: 1px solid var(--accent, #12675D);
-                border-radius: 4px;
-                font-size: 11px;
-                font-weight: 600;
-                color: var(--accent, #12675D);
-                white-space: nowrap;
-                max-width: 140px;
-              "
+              :style="{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '4px',
+                padding: '2px 6px',
+                background: 'var(--pd,var(--accent-bg, rgba(249,158,44,.1)))',
+                border: '1px solid var(--accent, #f99e2c)',
+                borderRadius: '4px',
+                fontSize: '11px',
+                fontWeight: 600,
+                color: 'var(--accent, #f99e2c)',
+                whiteSpace: 'nowrap',
+                maxWidth: '140px',
+                opacity: 0.85,
+              }"
             >
               <span style="overflow: hidden; text-overflow: ellipsis">
-                {{ getOptionLabel(v) }}
+                {{ getLabel(v) }}
               </span>
               <X
                 :size="11"
-                style="cursor: pointer; flex-shrink: 0; opacity: 0.6"
+                style="cursor: pointer; flex-shrink: 0; opacity: 0.5"
                 @mousedown="removeTag($event, v)"
               />
             </span>
           </div>
         </template>
 
-        <!-- Single Select Value -->
         <span
           v-else-if="!multi && selectedValues.length > 0"
           style="
@@ -483,236 +455,215 @@ const radiusStyle = computed(() => {
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            color: var(--primary-text, #0f172a);
           "
         >
-          {{ getOptionLabel(selectedValues[0]) }}
+          {{ getLabel(selectedValues[0]) || "&nbsp;" }}
         </span>
 
-        <!-- Placeholder -->
         <span
           v-else
           style="
-            color: var(--grey-3, #94a3b8);
+            color: var(--t3,var(--grey-3, #cbd5e1));
             font-weight: 400;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
           "
         >
           {{ placeholder }}
         </span>
       </div>
 
-      <!-- Suffix / Clear / Chevron -->
       <div style="display: flex; align-items: center; gap: 4px; flex-shrink: 0">
-        <slot name="suffix" />
+        <slot v-if="slots.suffix" name="suffix" />
 
         <span
-          v-if="clearable && selectedValues.length > 0 && !disabled"
+          v-if="
+            selectedValues.length > 0 &&
+            selectedValues[0] !== '' &&
+            selectedValues[0] !== null &&
+            clearable
+          "
+          title="Сбросить выбор"
           style="
             display: inline-flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
-            color: var(--muted, #94a3b8);
+            color: var(--muted, #64748b);
             padding: 0 2px;
-            transition: color 0.15s;
+            flex-shrink: 0;
+            border-radius: var(--radxs, 4px);
           "
-          title="Clear selection"
+          @mouseenter="($event.currentTarget as HTMLElement).style.color = 'var(--danger, #ef4444)'"
+          @mouseleave="($event.currentTarget as HTMLElement).style.color = 'var(--muted, #64748b)'"
           @click="handleClear"
         >
           <X :size="12" />
         </span>
 
         <ChevronDown
-          :size="13"
+          v-else
+          :size="12"
           :style="{
             flexShrink: 0,
-            color: 'var(--grey-3, #94a3b8)',
-            transition: 'transform 0.2s ease',
+            color: 'var(--t3,var(--grey-3, #cbd5e1))',
+            transition: 'transform .2s ease',
             transform: open ? 'rotate(180deg)' : undefined,
           }"
         />
       </div>
     </div>
 
-    <!-- Dropdown Menu Teleported to Body -->
+    <!-- Teleport dropdown to body -->
     <Teleport to="body">
       <div
         v-if="open"
         ref="dropRef"
-        class="cynx-select-dropdown"
         :style="{
           position: 'fixed',
-          zIndex: 9999,
+          zIndex: 9000,
           top: `${pos.top}px`,
           left: `${pos.left}px`,
           width: `${pos.width}px`,
           boxSizing: 'border-box',
-          background: 'var(--sf, var(--surface, #ffffff))',
-          border: '1px solid var(--border, #e2e8f0)',
-          borderRadius: radiusStyle,
-          boxShadow: 'var(--shadow, 0 4px 12px rgba(0, 0, 0, 0.08))',
-          padding: '4px',
+          background: 'var(--sf,var(--surface, #ffffff))',
+          border: '1px solid var(--bd,var(--border, #e2e8f0))',
+          borderRadius: radiusVal,
+          boxShadow: 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
+          padding: '3px',
+          animation: `${pos.openUp ? 'selFadeInUp' : 'selFadeInDown'} .15s ease`,
           overflow: 'hidden',
-          fontFamily: 'inherit',
         }"
       >
-        <!-- Custom Header Slot -->
-        <slot name="header" />
+        <slot v-if="slots.header" name="header" />
 
-        <!-- Built-in Search & Select All Controls -->
+        <!-- Search input if searchable or creatable -->
         <div
-          v-if="searchable || (multi && selectAll)"
-          style="
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-            padding: 2px 2px 6px 2px;
-            border-bottom: 1px solid var(--border, #f1f5f9);
-            margin-bottom: 4px;
-          "
+          v-if="searchable || creatable"
+          style="padding: 3px"
         >
-          <!-- Search Input -->
-          <div
-            v-if="searchable"
-            style="
-              position: relative;
-              display: flex;
-              align-items: center;
-              width: 100%;
-            "
-          >
-            <Search
-              :size="12"
-              style="
-                position: absolute;
-                left: 8px;
-                color: var(--grey-3, #94a3b8);
-                pointer-events: none;
-              "
-            />
-            <input
-              ref="searchInputRef"
-              v-model="query"
-              type="text"
-              placeholder="Search..."
-              style="
-                width: 100%;
-                box-sizing: border-box;
-                padding: 4px 8px 4px 26px;
-                height: 28px;
-                background: var(--grey-1, #f8fafc);
-                border: 1px solid var(--border, #e2e8f0);
-                border-radius: 6px;
-                font-size: 12px;
-                line-height: 1;
-                color: var(--primary-text, #0f172a);
-                outline: none;
-                transition: border-color 0.15s;
-              "
-              @keydown.stop
-              @mousedown.stop
-            />
-          </div>
+          <input
+            ref="inputRef"
+            v-model="query"
+            type="text"
+            :placeholder="creatable ? 'Поиск или ввод текста...' : 'Поиск...'"
+            :style="{
+              width: '100%',
+              boxSizing: 'border-box',
+              padding: s.height <= 26 ? '2px 5px' : s.height <= 28 ? '3px 6px' : '7px 10px',
+              height: `${s.searchHeight}px`,
+              background: 'var(--sf2,var(--grey-1, #f5f5f8))',
+              border: '1.5px solid var(--bd2,var(--border, #e2e8f0))',
+              borderRadius: s.height <= 26 ? '3px' : s.height <= 28 ? '4px' : 'var(--rmd,var(--rads, 8px))',
+              fontFamily: 'var(--f,var(--sans, inherit))',
+              fontSize: `${s.searchFont}px`,
+              lineHeight: 1,
+              color: 'var(--t,var(--primary-text, #0f172a))',
+              outline: 'none',
+              transition: 'border-color var(--tr,.15s), box-shadow var(--tr,.15s)',
+            }"
+            @keydown="handleInputKeyDown"
+            @mousedown.stop
+          />
+        </div>
 
-          <!-- Select All Toggle -->
+        <div
+          :style="{
+            maxHeight: `${pos.maxHeight || 200}px`,
+            overflowY: 'auto',
+          }"
+        >
+          <!-- Creatable option row -->
           <div
-            v-if="multi && selectAll && options.length > 0"
-            style="
-              display: flex;
-              align-items: center;
-              gap: 6px;
-              padding: 4px 6px;
-              border-radius: 4px;
-              cursor: pointer;
-              user-select: none;
-              font-size: 12px;
-              font-weight: 600;
-              color: var(--primary-text, #0f172a);
+            v-if="
+              creatable &&
+              query.trim() &&
+              !options.some(
+                (o) => String(o.label || o.value || '').toLowerCase() === query.trim().toLowerCase()
+              )
+            "
+            :style="{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '6px',
+              minHeight: `${s.itemMinHeight}px`,
+              padding: s.itemPadding,
+              borderRadius: s.height <= 26 ? '3px' : s.height <= 28 ? '4px' : 'var(--rmd,var(--rads, 8px))',
+              cursor: 'pointer',
+              color: 'var(--accent, #f99e2c)',
+              background: 'var(--pd,var(--accent-bg, rgba(249,158,44,.08)))',
+              fontSize: `${s.searchFont}px`,
+              fontWeight: 600,
+              marginBottom: filtered.length > 0 ? '3px' : '0px',
+              userSelect: 'none',
+            }"
+            @mousedown.prevent.stop="
+              () => {
+                toggleOption(query.trim());
+                query = '';
+              }
             "
-            @mousedown.prevent.stop="toggleSelectAll"
           >
+            <Plus :size="12" style="flex-shrink: 0" />
             <span
               style="
-                width: 14px;
-                height: 14px;
-                border-radius: 3px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                transition: all 0.15s;
+                flex: 1;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
               "
-              :style="{
-                border: `1.5px solid ${isAllSelected ? 'var(--accent, #12675D)' : 'var(--border, #cbd5e1)'}`,
-                background: isAllSelected ? 'var(--accent, #12675D)' : 'transparent',
-              }"
             >
-              <Check v-if="isAllSelected" :size="10" color="#ffffff" />
+              {{
+                typeof createLabel === "function"
+                  ? createLabel(query.trim())
+                  : `Ввести: "${query.trim()}"`
+              }}
             </span>
-            <span>{{ selectAllText }}</span>
           </div>
-        </div>
 
-        <!-- Options List -->
-        <div
-          :style="{
-            maxHeight: `${pos.maxHeight}px`,
-            overflowY: 'auto',
-          }"
-        >
+          <!-- Empty state -->
           <div
-            v-if="filteredOptions.length === 0"
+            v-if="filtered.length === 0 && (!creatable || !query.trim())"
             style="
               padding: 10px 8px;
               text-align: center;
-              color: var(--grey-3, #94a3b8);
-              font-size: 12px;
+              color: var(--t3,var(--grey-3, #cbd5e1));
+              font-size: 11px;
             "
           >
-            No items found
+            Ничего не найдено
           </div>
 
+          <!-- Option items -->
           <div
-            v-for="opt in filteredOptions"
+            v-for="opt in filtered"
             :key="opt.value"
             :style="{
               display: 'flex',
               alignItems: 'center',
-              justifyContent: 'space-between',
               gap: '6px',
               minHeight: `${s.itemMinHeight}px`,
               padding: s.itemPadding,
-              borderRadius: '4px',
+              borderRadius: s.height <= 26 ? '3px' : s.height <= 28 ? '4px' : 'var(--rmd,var(--rads, 8px))',
               cursor: opt.disabled ? 'not-allowed' : 'pointer',
-              color: isOptionSelected(opt.value)
-                ? 'var(--accent, #12675D)'
-                : 'var(--primary-text, #0f172a)',
-              background: isOptionSelected(opt.value)
-                ? 'rgba(18, 103, 93, 0.08)'
-                : 'transparent',
+              color: isSelected(opt.value)
+                ? 'var(--accent, #f99e2c)'
+                : 'var(--t,var(--primary-text, #0f172a))',
               fontSize: `${s.searchFont}px`,
-              fontWeight: isOptionSelected(opt.value) ? 500 : 400,
-              transition: 'background 0.1s',
+              fontWeight: 400,
+              transition: 'background .1s',
               userSelect: 'none',
               opacity: opt.disabled ? 0.4 : 1,
               pointerEvents: opt.disabled ? 'none' : undefined,
             }"
             @mouseenter="
               (e) => {
-                if (!opt.disabled && !isOptionSelected(opt.value)) {
-                  (e.currentTarget as HTMLElement).style.background =
-                    'var(--grey-1, #f8fafc)';
-                }
+                if (!opt.disabled)
+                  (e.currentTarget as HTMLElement).style.background = 'var(--grey-1, #f5f5f8)';
               }
             "
             @mouseleave="
               (e) => {
-                if (!opt.disabled && !isOptionSelected(opt.value)) {
-                  (e.currentTarget as HTMLElement).style.background =
-                    'transparent';
-                }
+                if (!opt.disabled)
+                  (e.currentTarget as HTMLElement).style.background = 'transparent';
               }
             "
             @mousedown.prevent.stop="
@@ -721,34 +672,34 @@ const radiusStyle = computed(() => {
               }
             "
           >
-            <!-- Option Content Slot or Default -->
             <slot
+              v-if="slots.option"
               name="option"
               :option="opt"
-              :selected="isOptionSelected(opt.value)"
+              :selected="isSelected(opt.value)"
+            />
+            <span
+              v-else
+              style="
+                flex: 1;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                min-height: 1em;
+              "
             >
-              <span
-                style="
-                  flex: 1;
-                  white-space: nowrap;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                "
-              >
-                {{ opt.label }}
-              </span>
-            </slot>
+              {{ opt.displayLabel || opt.label || "&nbsp;" }}
+            </span>
 
             <Check
-              v-if="isOptionSelected(opt.value)"
+              v-if="isSelected(opt.value)"
               :size="13"
-              style="flex-shrink: 0; color: var(--accent, #12675D)"
+              style="flex-shrink: 0; color: var(--accent, #f99e2c)"
             />
           </div>
         </div>
 
-        <!-- Custom Footer Slot -->
-        <slot name="footer" />
+        <slot v-if="slots.footer" name="footer" />
       </div>
     </Teleport>
   </div>