cynx-lib 1.3.50 → 1.3.52

package/vue/components/Select.vue

@@ -0,0 +1,755 @@
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  useSlots,
+} from "vue";
+import { ChevronDown, Check, X, Search } from "lucide-vue-next";
+
+export interface SelectOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+  [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: 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",
+  },
+};
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number | (string | number)[];
+    options?: SelectOption[];
+    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>;
+  }>(),
+  {
+    modelValue: undefined,
+    options: () => [],
+    placeholder: "Select...",
+    disabled: false,
+    multi: false,
+    searchable: false,
+    clearable: false,
+    selectAll: false,
+    selectAllText: "All Select",
+    size: "md",
+    showCount: false,
+    rounded: false,
+    searchMode: "includes",
+    className: "",
+    style: () => ({}),
+  }
+);
+
+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 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 s = computed(() => SIZES[props.size] || SIZES.md);
+
+const selectedValues = computed<(string | number)[]>(() => {
+  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 [];
+});
+
+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));
+});
+
+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))
+  );
+});
+
+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);
+    }
+    return label.includes(q) || val.includes(q);
+  });
+});
+
+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;
+
+  const openUp =
+    spaceBelow < Math.min(dropHeight, 220) + 12 && spaceAbove > spaceBelow;
+
+  const availableSpace = openUp ? spaceAbove - 16 : spaceBelow - 16;
+  const calculatedMaxHeight = Math.max(
+    90,
+    Math.min(240, availableSpace - (props.searchable || props.selectAll ? 48 : 12))
+  );
+
+  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) {
+    closeDropdown();
+  }
+};
+
+const openDropdown = () => {
+  if (props.disabled) return;
+  open.value = true;
+  calcPosition();
+  emit("visible-change", true);
+  nextTick(() => {
+    calcPosition();
+    if (props.searchable && searchInputRef.value) {
+      searchInputRef.value.focus();
+    }
+  });
+};
+
+const closeDropdown = () => {
+  open.value = false;
+  query.value = "";
+  emit("visible-change", false);
+};
+
+const toggleOpen = () => {
+  if (open.value) {
+    closeDropdown();
+  } else {
+    openDropdown();
+  }
+};
+
+const isOptionSelected = (optVal: string | number) => {
+  return selectedValues.value.some((v) => String(v) === String(optVal));
+};
+
+const toggleOption = (optVal: string | number) => {
+  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];
+    }
+    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);
+  }
+};
+
+const removeTag = (e: MouseEvent, val: string | number) => {
+  e.stopPropagation();
+  const next = selectedValues.value.filter((v) => String(v) !== String(val));
+  emit("update:modelValue", next);
+  emit("change", next);
+};
+
+const 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`;
+    }
+    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',
+      opacity: disabled ? 0.5 : 1,
+      pointerEvents: disabled ? 'none' : undefined,
+      ...style,
+    }"
+  >
+    <!-- Select Trigger -->
+    <div
+      class="cynx-select-trigger"
+      :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(--border, #e2e8f0)'}`,
+        borderRadius: radiusStyle,
+        cursor: 'pointer',
+        fontSize: `${s.fontSize}px`,
+        lineHeight: 1.2,
+        color: 'var(--primary-text, #0f172a)',
+        outline: 'none',
+        transition: 'border-color 0.15s, box-shadow 0.15s',
+        boxShadow: open
+          ? '0 0 0 2px rgba(18, 103, 93, 0.15)'
+          : 'var(--shadow, 0 1px 2px rgba(0, 0, 0, 0.04))',
+      }"
+      @click="toggleOpen"
+    >
+      <!-- Prefix Slot -->
+      <slot 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"
+            style="
+              font-weight: 500;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              color: var(--primary-text, #0f172a);
+            "
+          >
+            {{ displaySummaryText }}
+          </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;
+                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;
+              "
+            >
+              <span style="overflow: hidden; text-overflow: ellipsis">
+                {{ getOptionLabel(v) }}
+              </span>
+              <X
+                :size="11"
+                style="cursor: pointer; flex-shrink: 0; opacity: 0.6"
+                @mousedown="removeTag($event, v)"
+              />
+            </span>
+          </div>
+        </template>
+
+        <!-- Single Select Value -->
+        <span
+          v-else-if="!multi && selectedValues.length > 0"
+          style="
+            font-weight: 400;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: var(--primary-text, #0f172a);
+          "
+        >
+          {{ getOptionLabel(selectedValues[0]) }}
+        </span>
+
+        <!-- Placeholder -->
+        <span
+          v-else
+          style="
+            color: var(--grey-3, #94a3b8);
+            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" />
+
+        <span
+          v-if="clearable && selectedValues.length > 0 && !disabled"
+          style="
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: var(--muted, #94a3b8);
+            padding: 0 2px;
+            transition: color 0.15s;
+          "
+          title="Clear selection"
+          @click="handleClear"
+        >
+          <X :size="12" />
+        </span>
+
+        <ChevronDown
+          :size="13"
+          :style="{
+            flexShrink: 0,
+            color: 'var(--grey-3, #94a3b8)',
+            transition: 'transform 0.2s ease',
+            transform: open ? 'rotate(180deg)' : undefined,
+          }"
+        />
+      </div>
+    </div>
+
+    <!-- Dropdown Menu Teleported to Body -->
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="dropRef"
+        class="cynx-select-dropdown"
+        :style="{
+          position: 'fixed',
+          zIndex: 9999,
+          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',
+          overflow: 'hidden',
+          fontFamily: 'inherit',
+        }"
+      >
+        <!-- Custom Header Slot -->
+        <slot name="header" />
+
+        <!-- Built-in Search & Select All Controls -->
+        <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;
+          "
+        >
+          <!-- 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>
+
+          <!-- Select All Toggle -->
+          <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);
+            "
+            @mousedown.prevent.stop="toggleSelectAll"
+          >
+            <span
+              style="
+                width: 14px;
+                height: 14px;
+                border-radius: 3px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.15s;
+              "
+              :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" />
+            </span>
+            <span>{{ selectAllText }}</span>
+          </div>
+        </div>
+
+        <!-- Options List -->
+        <div
+          :style="{
+            maxHeight: `${pos.maxHeight}px`,
+            overflowY: 'auto',
+          }"
+        >
+          <div
+            v-if="filteredOptions.length === 0"
+            style="
+              padding: 10px 8px;
+              text-align: center;
+              color: var(--grey-3, #94a3b8);
+              font-size: 12px;
+            "
+          >
+            No items found
+          </div>
+
+          <div
+            v-for="opt in filteredOptions"
+            :key="opt.value"
+            :style="{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: '6px',
+              minHeight: `${s.itemMinHeight}px`,
+              padding: s.itemPadding,
+              borderRadius: '4px',
+              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',
+              fontSize: `${s.searchFont}px`,
+              fontWeight: isOptionSelected(opt.value) ? 500 : 400,
+              transition: 'background 0.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)';
+                }
+              }
+            "
+            @mouseleave="
+              (e) => {
+                if (!opt.disabled && !isOptionSelected(opt.value)) {
+                  (e.currentTarget as HTMLElement).style.background =
+                    'transparent';
+                }
+              }
+            "
+            @mousedown.prevent.stop="
+              () => {
+                if (!opt.disabled) toggleOption(opt.value);
+              }
+            "
+          >
+            <!-- Option Content Slot or Default -->
+            <slot
+              name="option"
+              :option="opt"
+              :selected="isOptionSelected(opt.value)"
+            >
+              <span
+                style="
+                  flex: 1;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                "
+              >
+                {{ opt.label }}
+              </span>
+            </slot>
+
+            <Check
+              v-if="isOptionSelected(opt.value)"
+              :size="13"
+              style="flex-shrink: 0; color: var(--accent, #12675D)"
+            />
+          </div>
+        </div>
+
+        <!-- Custom Footer Slot -->
+        <slot name="footer" />
+      </div>
+    </Teleport>
+  </div>
+</template>