cynx-lib 1.3.51 → 1.3.53

package/vue/components/Select.vue

@@ -0,0 +1,706 @@
+<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;
+    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,
+    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 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 selectedValues = computed<any[]>(() => {
+  const v = currentVal.value;
+  if (props.multi) {
+    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 props.multi ? (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 (props.multi) {
+    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 = props.multi ? [] : "";
+  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, #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(--t,var(--primary-text, #0f172a))',
+        outline: 'none',
+        transition: 'border-color var(--tr,.15s), box-shadow var(--tr,.15s)',
+        boxShadow: open
+          ? 'var(--infd, rgba(37,99,235,.1))'
+          : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
+      }"
+      @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="multi ? selectedValues : selectedValues[0]"
+        />
+
+        <template v-else-if="multi && 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: '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>
+
+        <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>