cynx-lib 1.3.80 → 1.3.82

package/vue/components/Select.vue

@@ -1,713 +1,713 @@
-<script setup lang="ts">
-import {
-  ref,
-  computed,
-  watch,
-  onMounted,
-  onBeforeUnmount,
-  nextTick,
-  useSlots,
-} from "vue";
-import { ChevronDown, Check, X, Plus } from "lucide-vue-next";
-
-export interface SelectOption {
-  value: string | number;
-  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;
-}
-
-const SIZES: Record<
-  string,
-  {
-    height: number;
-    fontSize: number;
-    paddingH: number;
-    searchHeight: number;
-    searchFont: number;
-    itemMinHeight: number;
-    itemPadding: string;
-  }
-> = {
-  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<{
-    options?: SelectOption[];
-    modelValue?: any;
-    value?: any;
-    placeholder?: string;
-    disabled?: boolean;
-    multi?: boolean;
-    multiple?: boolean;
-    searchable?: boolean;
-    clearable?: boolean;
-    size?: "xs" | "sm" | "md" | "lg";
-    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;
-  }>(),
-  {
-    options: () => [],
-    modelValue: undefined,
-    value: undefined,
-    placeholder: "Select...",
-    disabled: false,
-    multi: false,
-    multiple: false,
-    searchable: false,
-    clearable: false,
-    size: "md",
-    style: () => ({}),
-    rounded: false,
-    showCount: false,
-    searchMode: "includes",
-    filterOption: undefined,
-    creatable: false,
-    createLabel: undefined,
-  }
-);
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: any): void;
-  (e: "change", value: any): void;
-  (e: "clear"): void;
-  (e: "visible-change", visible: boolean): void;
-}>();
-
-const slots = useSlots();
-const open = ref(false);
-const hovered = 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 inputRef = ref<HTMLInputElement | null>(null);
-
-ensureStyles();
-
-const s = computed(() => SIZES[props.size] || SIZES.md);
-
-const currentVal = computed(() => {
-  return props.modelValue !== undefined ? props.modelValue : props.value;
-});
-
-const isMulti = computed(() => Boolean(props.multi || props.multiple));
-
-const selectedValues = computed<any[]>(() => {
-  const v = currentVal.value;
-  if (isMulti.value) {
-    return Array.isArray(v) ? v : [];
-  }
-  return v !== undefined && v !== null && v !== "" ? [v] : [];
-});
-
-function getLabel(optVal: any) {
-  const opt = props.options.find((o) => o.value === optVal);
-  return opt ? (opt.displayLabel || opt.label) : optVal;
-}
-
-function isSelected(optVal: any) {
-  const v = currentVal.value;
-  return isMulti.value ? (Array.isArray(v) && v.includes(optVal)) : v === optVal;
-}
-
-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`;
-    }
-    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 = () => {
-  if (!wrapRef.value) return;
-  const r = wrapRef.value.getBoundingClientRect();
-  const dropEl = dropRef.value;
-  const dropHeight = dropEl ? dropEl.offsetHeight : 220;
-  const spaceBelow = window.innerHeight - r.bottom;
-  const spaceAbove = r.top;
-
-  // 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(220, availableSpace - (isSearchActive ? 46 : 14))
-  );
-
-  let top: number;
-  if (openUp) {
-    top = Math.max(8, r.top - (dropEl ? dropEl.offsetHeight : dropHeight) - 4);
-  } else {
-    top = Math.min(window.innerHeight - 40, r.bottom + 4);
-  }
-
-  let left = r.left;
-  const width = r.width;
-  if (left + width > window.innerWidth - 8) {
-    left = Math.max(8, window.innerWidth - width - 8);
-  }
-
-  pos.value = {
-    top,
-    left,
-    width,
-    openUp,
-    maxHeight: calculatedMaxHeight,
-  };
-};
-
-const handleWindowClick = (e: MouseEvent) => {
-  if (!open.value) return;
-  const target = e.target as Node;
-  const inTrigger = wrapRef.value && wrapRef.value.contains(target);
-  const inDrop = dropRef.value && dropRef.value.contains(target);
-  if (!inTrigger && !inDrop) {
-    open.value = false;
-    emit("visible-change", false);
-  }
-};
-
-watch(open, (isOpen) => {
-  if (isOpen) {
-    calcPosition();
-    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);
-  }
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("scroll", calcPosition, true);
-  window.removeEventListener("resize", calcPosition);
-  document.removeEventListener("mousedown", handleWindowClick, true);
-});
-
-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));
-    }
-
-    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;
-  });
-});
-
-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 (isMulti.value) {
-    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);
-    open.value = false;
-    emit("visible-change", false);
-  }
-}
-
-function removeTag(e: MouseEvent, valToRemove: any) {
-  e.stopPropagation();
-  const arr = Array.isArray(currentVal.value) ? currentVal.value : [];
-  const next = arr.filter((v: any) => v !== valToRemove);
-  emit("update:modelValue", next);
-  emit("change", next);
-}
-
-function handleClear(e: MouseEvent) {
-  e.stopPropagation();
-  const next = isMulti.value ? [] : "";
-  emit("update:modelValue", next);
-  emit("change", next);
-  emit("clear");
-}
-
-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 = "";
-    }
-  }
-}
-</script>
-
-<template>
-  <div
-    ref="wrapRef"
-    :style="{
-      position: 'relative',
-      width: '100%',
-      boxSizing: 'border-box',
-      fontFamily: 'var(--f,var(--sans, inherit))',
-      opacity: disabled ? 0.5 : 1,
-      pointerEvents: disabled ? 'none' : undefined,
-      ...style,
-    }"
-  >
-    <div
-      :style="{
-        width: '100%',
-        boxSizing: 'border-box',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        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(--bd,var(--border, #d7d8e0))'}`,
-        borderRadius: radiusVal,
-        cursor: 'pointer',
-        fontFamily: 'var(--f,var(--sans,inherit))',
-        fontSize: `${s.fontSize}px`,
-        lineHeight: 1.2,
-        color: 'var(--t,var(--primary-text, #0f172a))',
-        outline: 'none',
-        transition: 'border-color var(--tr,.15s), box-shadow var(--tr,.15s)',
-        boxShadow: open
-          ? 'var(--pd, rgba(18,103,93,.12)), var(--shadow, 0 1px 3px rgba(20,22,41,.1))'
-          : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
-      }"
-      @mouseenter="hovered = true"
-      @mouseleave="hovered = false"
-      @click="handleOpen"
-    >
-      <slot v-if="slots.prefix" name="prefix" />
-
-      <div
-        style="
-          flex: 1;
-          min-width: 0;
-          display: flex;
-          align-items: center;
-        "
-      >
-        <slot
-          v-if="slots.label && selectedValues.length > 0"
-          name="label"
-          :value="isMulti ? selectedValues : selectedValues[0]"
-        />
-
-        <template v-else-if="isMulti && selectedValues.length > 0">
-          <span
-            v-if="showCount"
-            style="
-              font-weight: 500;
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              color: var(--t,var(--primary-text, #0f172a));
-            "
-          >
-            {{
-              typeof showCount === "function"
-                ? showCount(selectedValues.length)
-                : selectedValues.length === 1
-                ? getLabel(selectedValues[0])
-                : `Выбрано: ${selectedValues.length}`
-            }}
-          </span>
-          <div
-            v-else
-            style="
-              display: flex;
-              flex-wrap: wrap;
-              gap: 4px;
-              flex: 1;
-              min-width: 0;
-            "
-          >
-            <span
-              v-for="v in selectedValues"
-              :key="v"
-              :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">
-                {{ getLabel(v) }}
-              </span>
-              <X
-                :size="11"
-                style="cursor: pointer; flex-shrink: 0; opacity: 0.5"
-                @mousedown="removeTag($event, v)"
-              />
-            </span>
-          </div>
-        </template>
-
-        <span
-          v-else-if="!multi && selectedValues.length > 0"
-          style="
-            font-weight: 400;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          "
-        >
-          {{ getLabel(selectedValues[0]) || "&nbsp;" }}
-        </span>
-
-        <span
-          v-else
-          style="
-            color: var(--t3,var(--grey-3, #cbd5e1));
-            font-weight: 400;
-          "
-        >
-          {{ placeholder }}
-        </span>
-      </div>
-
-      <div style="display: flex; align-items: center; gap: 4px; flex-shrink: 0">
-        <slot v-if="slots.suffix" name="suffix" />
-
-        <span
-          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, #64748b);
-            padding: 0 2px;
-            flex-shrink: 0;
-            border-radius: var(--radxs, 4px);
-          "
-          @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
-          v-else
-          :size="12"
-          :style="{
-            flexShrink: 0,
-            color: 'var(--t3,var(--grey-3, #cbd5e1))',
-            transition: 'transform .2s ease',
-            transform: open ? 'rotate(180deg)' : undefined,
-          }"
-        />
-      </div>
-    </div>
-
-    <!-- Teleport dropdown to body -->
-    <Teleport to="body">
-      <div
-        v-if="open"
-        ref="dropRef"
-        :style="{
-          position: 'fixed',
-          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(--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',
-        }"
-      >
-        <slot v-if="slots.header" name="header" />
-
-        <!-- Search input if searchable or creatable -->
-        <div
-          v-if="searchable || creatable"
-          style="padding: 3px"
-        >
-          <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: '1px solid var(--bd,var(--border, #d7d8e0))',
-              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>
-
-        <div
-          :style="{
-            maxHeight: `${pos.maxHeight || 200}px`,
-            overflowY: 'auto',
-          }"
-        >
-          <!-- Creatable option row -->
-          <div
-            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 = '';
-              }
-            "
-          >
-            <Plus :size="12" style="flex-shrink: 0" />
-            <span
-              style="
-                flex: 1;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-              "
-            >
-              {{
-                typeof createLabel === "function"
-                  ? createLabel(query.trim())
-                  : `Ввести: "${query.trim()}"`
-              }}
-            </span>
-          </div>
-
-          <!-- Empty state -->
-          <div
-            v-if="filtered.length === 0 && (!creatable || !query.trim())"
-            style="
-              padding: 10px 8px;
-              text-align: center;
-              color: var(--t3,var(--grey-3, #cbd5e1));
-              font-size: 11px;
-            "
-          >
-            Ничего не найдено
-          </div>
-
-          <!-- Option items -->
-          <div
-            v-for="opt in filtered"
-            :key="opt.value"
-            :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: opt.disabled ? 'not-allowed' : 'pointer',
-              color: isSelected(opt.value)
-                ? 'var(--accent, #f99e2c)'
-                : 'var(--t,var(--primary-text, #0f172a))',
-              fontSize: `${s.searchFont}px`,
-              fontWeight: 400,
-              transition: 'background .1s',
-              userSelect: 'none',
-              opacity: opt.disabled ? 0.4 : 1,
-              pointerEvents: opt.disabled ? 'none' : undefined,
-            }"
-            @mouseenter="
-              (e) => {
-                if (!opt.disabled)
-                  (e.currentTarget as HTMLElement).style.background = 'var(--grey-1, #f5f5f8)';
-              }
-            "
-            @mouseleave="
-              (e) => {
-                if (!opt.disabled)
-                  (e.currentTarget as HTMLElement).style.background = 'transparent';
-              }
-            "
-            @mousedown.prevent.stop="
-              () => {
-                if (!opt.disabled) toggleOption(opt.value);
-              }
-            "
-          >
-            <slot
-              v-if="slots.option"
-              name="option"
-              :option="opt"
-              :selected="isSelected(opt.value)"
-            />
-            <span
-              v-else
-              style="
-                flex: 1;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                min-height: 1em;
-              "
-            >
-              {{ opt.displayLabel || opt.label || "&nbsp;" }}
-            </span>
-
-            <Check
-              v-if="isSelected(opt.value)"
-              :size="13"
-              style="flex-shrink: 0; color: var(--accent, #f99e2c)"
-            />
-          </div>
-        </div>
-
-        <slot v-if="slots.footer" name="footer" />
-      </div>
-    </Teleport>
-  </div>
-</template>
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  useSlots,
+} from "vue";
+import { ChevronDown, Check, X, Plus } from "lucide-vue-next";
+
+export interface SelectOption {
+  value: string | number;
+  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;
+}
+
+const SIZES: Record<
+  string,
+  {
+    height: number;
+    fontSize: number;
+    paddingH: number;
+    searchHeight: number;
+    searchFont: number;
+    itemMinHeight: number;
+    itemPadding: string;
+  }
+> = {
+  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<{
+    options?: SelectOption[];
+    modelValue?: any;
+    value?: any;
+    placeholder?: string;
+    disabled?: boolean;
+    multi?: boolean;
+    multiple?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    size?: "xs" | "sm" | "md" | "lg";
+    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;
+  }>(),
+  {
+    options: () => [],
+    modelValue: undefined,
+    value: undefined,
+    placeholder: "Select...",
+    disabled: false,
+    multi: false,
+    multiple: false,
+    searchable: false,
+    clearable: false,
+    size: "md",
+    style: () => ({}),
+    rounded: false,
+    showCount: false,
+    searchMode: "includes",
+    filterOption: undefined,
+    creatable: false,
+    createLabel: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: any): void;
+  (e: "change", value: any): void;
+  (e: "clear"): void;
+  (e: "visible-change", visible: boolean): void;
+}>();
+
+const slots = useSlots();
+const open = ref(false);
+const hovered = 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 inputRef = ref<HTMLInputElement | null>(null);
+
+ensureStyles();
+
+const s = computed(() => SIZES[props.size] || SIZES.md);
+
+const currentVal = computed(() => {
+  return props.modelValue !== undefined ? props.modelValue : props.value;
+});
+
+const isMulti = computed(() => Boolean(props.multi || props.multiple));
+
+const selectedValues = computed<any[]>(() => {
+  const v = currentVal.value;
+  if (isMulti.value) {
+    return Array.isArray(v) ? v : [];
+  }
+  return v !== undefined && v !== null && v !== "" ? [v] : [];
+});
+
+function getLabel(optVal: any) {
+  const opt = props.options.find((o) => o.value === optVal);
+  return opt ? (opt.displayLabel || opt.label) : optVal;
+}
+
+function isSelected(optVal: any) {
+  const v = currentVal.value;
+  return isMulti.value ? (Array.isArray(v) && v.includes(optVal)) : v === optVal;
+}
+
+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`;
+    }
+    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 = () => {
+  if (!wrapRef.value) return;
+  const r = wrapRef.value.getBoundingClientRect();
+  const dropEl = dropRef.value;
+  const dropHeight = dropEl ? dropEl.offsetHeight : 220;
+  const spaceBelow = window.innerHeight - r.bottom;
+  const spaceAbove = r.top;
+
+  // 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(220, availableSpace - (isSearchActive ? 46 : 14))
+  );
+
+  let top: number;
+  if (openUp) {
+    top = Math.max(8, r.top - (dropEl ? dropEl.offsetHeight : dropHeight) - 4);
+  } else {
+    top = Math.min(window.innerHeight - 40, r.bottom + 4);
+  }
+
+  let left = r.left;
+  const width = r.width;
+  if (left + width > window.innerWidth - 8) {
+    left = Math.max(8, window.innerWidth - width - 8);
+  }
+
+  pos.value = {
+    top,
+    left,
+    width,
+    openUp,
+    maxHeight: calculatedMaxHeight,
+  };
+};
+
+const handleWindowClick = (e: MouseEvent) => {
+  if (!open.value) return;
+  const target = e.target as Node;
+  const inTrigger = wrapRef.value && wrapRef.value.contains(target);
+  const inDrop = dropRef.value && dropRef.value.contains(target);
+  if (!inTrigger && !inDrop) {
+    open.value = false;
+    emit("visible-change", false);
+  }
+};
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    calcPosition();
+    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);
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", calcPosition, true);
+  window.removeEventListener("resize", calcPosition);
+  document.removeEventListener("mousedown", handleWindowClick, true);
+});
+
+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));
+    }
+
+    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;
+  });
+});
+
+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 (isMulti.value) {
+    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);
+    open.value = false;
+    emit("visible-change", false);
+  }
+}
+
+function removeTag(e: MouseEvent, valToRemove: any) {
+  e.stopPropagation();
+  const arr = Array.isArray(currentVal.value) ? currentVal.value : [];
+  const next = arr.filter((v: any) => v !== valToRemove);
+  emit("update:modelValue", next);
+  emit("change", next);
+}
+
+function handleClear(e: MouseEvent) {
+  e.stopPropagation();
+  const next = isMulti.value ? [] : "";
+  emit("update:modelValue", next);
+  emit("change", next);
+  emit("clear");
+}
+
+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 = "";
+    }
+  }
+}
+</script>
+
+<template>
+  <div
+    ref="wrapRef"
+    :style="{
+      position: 'relative',
+      width: '100%',
+      boxSizing: 'border-box',
+      fontFamily: 'var(--f,var(--sans, inherit))',
+      opacity: disabled ? 0.5 : 1,
+      pointerEvents: disabled ? 'none' : undefined,
+      ...style,
+    }"
+  >
+    <div
+      :style="{
+        width: '100%',
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        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(--bd,var(--border, #d7d8e0))'}`,
+        borderRadius: radiusVal,
+        cursor: 'pointer',
+        fontFamily: 'var(--f,var(--sans,inherit))',
+        fontSize: `${s.fontSize}px`,
+        lineHeight: 1.2,
+        color: 'var(--t,var(--primary-text, #0f172a))',
+        outline: 'none',
+        transition: 'border-color var(--tr,.15s), box-shadow var(--tr,.15s)',
+        boxShadow: open
+          ? 'var(--pd, rgba(18,103,93,.12)), var(--shadow, 0 1px 3px rgba(20,22,41,.1))'
+          : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
+      }"
+      @mouseenter="hovered = true"
+      @mouseleave="hovered = false"
+      @click="handleOpen"
+    >
+      <slot v-if="slots.prefix" name="prefix" />
+
+      <div
+        style="
+          flex: 1;
+          min-width: 0;
+          display: flex;
+          align-items: center;
+        "
+      >
+        <slot
+          v-if="slots.label && selectedValues.length > 0"
+          name="label"
+          :value="isMulti ? selectedValues : selectedValues[0]"
+        />
+
+        <template v-else-if="isMulti && selectedValues.length > 0">
+          <span
+            v-if="showCount"
+            style="
+              font-weight: 500;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              color: var(--t,var(--primary-text, #0f172a));
+            "
+          >
+            {{
+              typeof showCount === "function"
+                ? showCount(selectedValues.length)
+                : selectedValues.length === 1
+                ? getLabel(selectedValues[0])
+                : `Выбрано: ${selectedValues.length}`
+            }}
+          </span>
+          <div
+            v-else
+            style="
+              display: flex;
+              flex-wrap: wrap;
+              gap: 4px;
+              flex: 1;
+              min-width: 0;
+            "
+          >
+            <span
+              v-for="v in selectedValues"
+              :key="v"
+              :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">
+                {{ getLabel(v) }}
+              </span>
+              <X
+                :size="11"
+                style="cursor: pointer; flex-shrink: 0; opacity: 0.5"
+                @mousedown="removeTag($event, v)"
+              />
+            </span>
+          </div>
+        </template>
+
+        <span
+          v-else-if="!multi && selectedValues.length > 0"
+          style="
+            font-weight: 400;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          "
+        >
+          {{ getLabel(selectedValues[0]) || "&nbsp;" }}
+        </span>
+
+        <span
+          v-else
+          style="
+            color: var(--t3,var(--grey-3, #cbd5e1));
+            font-weight: 400;
+          "
+        >
+          {{ placeholder }}
+        </span>
+      </div>
+
+      <div style="display: flex; align-items: center; gap: 4px; flex-shrink: 0">
+        <slot v-if="slots.suffix" name="suffix" />
+
+        <span
+          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, #64748b);
+            padding: 0 2px;
+            flex-shrink: 0;
+            border-radius: var(--radxs, 4px);
+          "
+          @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
+          v-else
+          :size="12"
+          :style="{
+            flexShrink: 0,
+            color: 'var(--t3,var(--grey-3, #cbd5e1))',
+            transition: 'transform .2s ease',
+            transform: open ? 'rotate(180deg)' : undefined,
+          }"
+        />
+      </div>
+    </div>
+
+    <!-- Teleport dropdown to body -->
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="dropRef"
+        :style="{
+          position: 'fixed',
+          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(--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',
+        }"
+      >
+        <slot v-if="slots.header" name="header" />
+
+        <!-- Search input if searchable or creatable -->
+        <div
+          v-if="searchable || creatable"
+          style="padding: 3px"
+        >
+          <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: '1px solid var(--bd,var(--border, #d7d8e0))',
+              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>
+
+        <div
+          :style="{
+            maxHeight: `${pos.maxHeight || 200}px`,
+            overflowY: 'auto',
+          }"
+        >
+          <!-- Creatable option row -->
+          <div
+            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 = '';
+              }
+            "
+          >
+            <Plus :size="12" style="flex-shrink: 0" />
+            <span
+              style="
+                flex: 1;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              "
+            >
+              {{
+                typeof createLabel === "function"
+                  ? createLabel(query.trim())
+                  : `Ввести: "${query.trim()}"`
+              }}
+            </span>
+          </div>
+
+          <!-- Empty state -->
+          <div
+            v-if="filtered.length === 0 && (!creatable || !query.trim())"
+            style="
+              padding: 10px 8px;
+              text-align: center;
+              color: var(--t3,var(--grey-3, #cbd5e1));
+              font-size: 11px;
+            "
+          >
+            Ничего не найдено
+          </div>
+
+          <!-- Option items -->
+          <div
+            v-for="opt in filtered"
+            :key="opt.value"
+            :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: opt.disabled ? 'not-allowed' : 'pointer',
+              color: isSelected(opt.value)
+                ? 'var(--accent, #f99e2c)'
+                : 'var(--t,var(--primary-text, #0f172a))',
+              fontSize: `${s.searchFont}px`,
+              fontWeight: 400,
+              transition: 'background .1s',
+              userSelect: 'none',
+              opacity: opt.disabled ? 0.4 : 1,
+              pointerEvents: opt.disabled ? 'none' : undefined,
+            }"
+            @mouseenter="
+              (e) => {
+                if (!opt.disabled)
+                  (e.currentTarget as HTMLElement).style.background = 'var(--grey-1, #f5f5f8)';
+              }
+            "
+            @mouseleave="
+              (e) => {
+                if (!opt.disabled)
+                  (e.currentTarget as HTMLElement).style.background = 'transparent';
+              }
+            "
+            @mousedown.prevent.stop="
+              () => {
+                if (!opt.disabled) toggleOption(opt.value);
+              }
+            "
+          >
+            <slot
+              v-if="slots.option"
+              name="option"
+              :option="opt"
+              :selected="isSelected(opt.value)"
+            />
+            <span
+              v-else
+              style="
+                flex: 1;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                min-height: 1em;
+              "
+            >
+              {{ opt.displayLabel || opt.label || "&nbsp;" }}
+            </span>
+
+            <Check
+              v-if="isSelected(opt.value)"
+              :size="13"
+              style="flex-shrink: 0; color: var(--accent, #f99e2c)"
+            />
+          </div>
+        </div>
+
+        <slot v-if="slots.footer" name="footer" />
+      </div>
+    </Teleport>
+  </div>
+</template>