@referralgps/selectra 1.0.0

package/src-alpine/sifter.js

@@ -0,0 +1,270 @@
+/**
+ * Sifter - A library for textually searching arrays and hashes of objects.
+ * Designed specifically for autocomplete. Supports diacritics, smart scoring,
+ * multi-field sorting, and nested properties.
+ *
+ * Originally by Brian Reavis, modernized as ES module.
+ */
+
+const DIACRITICS = {
+  a: '[aḀḁĂăÂâǍǎȺⱥȦȧẠạÄäÀàÁáĀāÃãÅåąĄÃąĄ]',
+  b: '[b␢βΒB฿𐌁ᛒ]',
+  c: '[cĆćĈĉČčĊċC̄c̄ÇçḈḉȻȼƇƈɕᴄＣｃ]',
+  d: '[dĎďḊḋḐḑḌḍḒḓḎḏĐđD̦d̦ƉɖƊɗƋƌᵭᶁᶑȡᴅＤｄð]',
+  e: '[eÉéÈèÊêḘḙĚěĔĕẼẽḚḛẺẻĖėËëĒēȨȩĘęᶒɆɇȄȅẾếỀềỄễỂểḜḝḖḗḔḕȆȇẸẹỆệⱸᴇＥｅɘǝƏƐε]',
+  f: '[fƑƒḞḟ]',
+  g: '[gɢ₲ǤǥĜĝĞğĢģƓɠĠġ]',
+  h: '[hĤĥĦħḨḩẖẖḤḥḢḣɦʰǶƕ]',
+  i: '[iÍíÌìĬĭÎîǏǐÏïḮḯĨĩĮįĪīỈỉȈȉȊȋỊịḬḭƗɨɨ̆ᵻᶖİiIıɪＩｉ]',
+  j: '[jȷĴĵɈɉʝɟʲ]',
+  k: '[kƘƙꝀꝁḰḱǨǩḲḳḴḵκϰ₭]',
+  l: '[lŁłĽľĻļĹĺḶḷḸḹḼḽḺḻĿŀȽƚⱠⱡⱢɫɬᶅɭȴʟＬｌ]',
+  n: '[nŃńǸǹŇňÑñṄṅŅņṆṇṊṋṈṉN̈n̈ƝɲȠƞᵰᶇɳȵɴＮｎŊŋ]',
+  o: '[oØøÖöÓóÒòÔôǑǒŐőŎŏȮȯỌọƟɵƠơỎỏŌōÕõǪǫȌȍՕօ]',
+  p: '[pṔṕṖṗⱣᵽƤƥᵱ]',
+  q: '[qꝖꝗʠɊɋꝘꝙq̃]',
+  r: '[rŔŕɌɍŘřŖŗṘṙȐȑȒȓṚṛⱤɽ]',
+  s: '[sŚśṠṡṢṣꞨꞩŜŝŠšŞşȘșS̈s̈]',
+  t: '[tŤťṪṫŢţṬṭƮʈȚțṰṱṮṯƬƭ]',
+  u: '[uŬŭɄʉỤụÜüÚúÙùÛûǓǔŰűŬŭƯưỦủŪūŨũŲųȔȕ∪]',
+  v: '[vṼṽṾṿƲʋꝞꝟⱱʋ]',
+  w: '[wẂẃẀẁŴŵẄẅẆẇẈẉ]',
+  x: '[xẌẍẊẋχ]',
+  y: '[yÝýỲỳŶŷŸÿỸỹẎẏỴỵɎɏƳƴ]',
+  z: '[zŹźẐẑŽžŻżẒẓẔẕƵƶ]',
+};
+
+const asciifold = (() => {
+  const lookup = {};
+  let i18nChars = '';
+  for (const k in DIACRITICS) {
+    const chunk = DIACRITICS[k].substring(2, DIACRITICS[k].length - 1);
+    i18nChars += chunk;
+    for (let i = 0; i < chunk.length; i++) {
+      lookup[chunk.charAt(i)] = k;
+    }
+  }
+  const regexp = new RegExp('[' + i18nChars + ']', 'g');
+  return (str) =>
+    str
+      .replace(regexp, (ch) => lookup[ch] || '')
+      .toLowerCase();
+})();
+
+function escapeRegex(str) {
+  return (str + '').replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
+}
+
+function getAttr(obj, name, nesting) {
+  if (!obj || !name) return undefined;
+  if (!nesting) return obj[name];
+  const names = name.split('.');
+  let current = obj;
+  while (names.length && current) {
+    current = current[names.shift()];
+  }
+  return current;
+}
+
+function cmp(a, b) {
+  if (typeof a === 'number' && typeof b === 'number') {
+    return a > b ? 1 : a < b ? -1 : 0;
+  }
+  a = asciifold(String(a || ''));
+  b = asciifold(String(b || ''));
+  if (a > b) return 1;
+  if (b > a) return -1;
+  return 0;
+}
+
+export default class Sifter {
+  constructor(items, settings = {}) {
+    this.items = items;
+    this.settings = { diacritics: true, ...settings };
+  }
+
+  tokenize(query, respectWordBoundaries) {
+    query = String(query || '').toLowerCase().trim();
+    if (!query.length) return [];
+
+    const tokens = [];
+    const words = query.split(/\s+/);
+
+    for (const word of words) {
+      let regex = escapeRegex(word);
+      if (this.settings.diacritics) {
+        for (const letter in DIACRITICS) {
+          regex = regex.replace(new RegExp(letter, 'g'), DIACRITICS[letter]);
+        }
+      }
+      if (respectWordBoundaries) regex = '\\b' + regex;
+      tokens.push({ string: word, regex: new RegExp(regex, 'i') });
+    }
+
+    return tokens;
+  }
+
+  getScoreFunction(search, options) {
+    search = this.prepareSearch(search, options);
+    const { tokens } = search;
+    const { fields } = search.options;
+    const tokenCount = tokens.length;
+    const { nesting } = search.options;
+
+    const scoreValue = (value, token) => {
+      if (!value) return 0;
+      value = String(value || '');
+      const pos = value.search(token.regex);
+      if (pos === -1) return 0;
+      let score = token.string.length / value.length;
+      if (pos === 0) score += 0.5;
+      return score;
+    };
+
+    const fieldCount = fields.length;
+    const scoreObject =
+      fieldCount === 0
+        ? () => 0
+        : fieldCount === 1
+          ? (token, data) => scoreValue(getAttr(data, fields[0], nesting), token)
+          : (token, data) => {
+              let sum = 0;
+              for (let i = 0; i < fieldCount; i++) {
+                sum += scoreValue(getAttr(data, fields[i], nesting), token);
+              }
+              return sum / fieldCount;
+            };
+
+    if (!tokenCount) return () => 0;
+    if (tokenCount === 1) return (data) => scoreObject(tokens[0], data);
+
+    if (search.options.conjunction === 'and') {
+      return (data) => {
+        let sum = 0;
+        for (let i = 0; i < tokenCount; i++) {
+          const score = scoreObject(tokens[i], data);
+          if (score <= 0) return 0;
+          sum += score;
+        }
+        return sum / tokenCount;
+      };
+    }
+
+    return (data) => {
+      let sum = 0;
+      for (let i = 0; i < tokenCount; i++) {
+        sum += scoreObject(tokens[i], data);
+      }
+      return sum / tokenCount;
+    };
+  }
+
+  getSortFunction(search, options) {
+    search = this.prepareSearch(search, options);
+    const sort = (!search.query && options.sort_empty) || options.sort;
+
+    const getField = (name, result) => {
+      if (name === '$score') return result.score;
+      return getAttr(this.items[result.id], name, options.nesting);
+    };
+
+    const fields = [];
+    if (sort) {
+      for (const s of sort) {
+        if (search.query || s.field !== '$score') {
+          fields.push(s);
+        }
+      }
+    }
+
+    if (search.query) {
+      let implicitScore = true;
+      for (const f of fields) {
+        if (f.field === '$score') {
+          implicitScore = false;
+          break;
+        }
+      }
+      if (implicitScore) fields.unshift({ field: '$score', direction: 'desc' });
+    } else {
+      const idx = fields.findIndex((f) => f.field === '$score');
+      if (idx !== -1) fields.splice(idx, 1);
+    }
+
+    const multipliers = fields.map((f) => (f.direction === 'desc' ? -1 : 1));
+    const fieldCount = fields.length;
+
+    if (!fieldCount) return null;
+    if (fieldCount === 1) {
+      const field = fields[0].field;
+      const mult = multipliers[0];
+      return (a, b) => mult * cmp(getField(field, a), getField(field, b));
+    }
+
+    return (a, b) => {
+      for (let i = 0; i < fieldCount; i++) {
+        const result = multipliers[i] * cmp(getField(fields[i].field, a), getField(fields[i].field, b));
+        if (result) return result;
+      }
+      return 0;
+    };
+  }
+
+  prepareSearch(query, options) {
+    if (typeof query === 'object') return query;
+    options = { ...options };
+
+    if (options.fields && !Array.isArray(options.fields)) options.fields = [options.fields];
+    if (options.sort && !Array.isArray(options.sort)) options.sort = [options.sort];
+    if (options.sort_empty && !Array.isArray(options.sort_empty))
+      options.sort_empty = [options.sort_empty];
+
+    return {
+      options,
+      query: String(query || '').toLowerCase(),
+      tokens: this.tokenize(query, options.respect_word_boundaries),
+      total: 0,
+      items: [],
+    };
+  }
+
+  search(query, options) {
+    const search = this.prepareSearch(query, options);
+    const opts = search.options;
+    const q = search.query;
+
+    const fnScore = opts.score || this.getScoreFunction(search);
+
+    const items = this.items;
+    if (q.length) {
+      const iterate = Array.isArray(items)
+        ? (cb) => items.forEach((item, i) => cb(item, i))
+        : (cb) => Object.keys(items).forEach((key) => cb(items[key], key));
+
+      iterate((item, id) => {
+        const score = fnScore(item);
+        if (opts.filter === false || score > 0) {
+          search.items.push({ score, id });
+        }
+      });
+    } else {
+      const iterate = Array.isArray(items)
+        ? (cb) => items.forEach((item, i) => cb(item, i))
+        : (cb) => Object.keys(items).forEach((key) => cb(items[key], key));
+
+      iterate((item, id) => {
+        search.items.push({ score: 1, id });
+      });
+    }
+
+    const fnSort = this.getSortFunction(search, opts);
+    if (fnSort) search.items.sort(fnSort);
+
+    search.total = search.items.length;
+    if (typeof opts.limit === 'number') {
+      search.items = search.items.slice(0, opts.limit);
+    }
+
+    return search;
+  }
+}

package/src-alpine/styles/selectra.css

@@ -0,0 +1,277 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+ * Selectra - Tailwind CSS Component Styles
+ *
+ * These styles use @apply to create component classes that work
+ * with dynamically generated markup. Override with Tailwind utilities.
+ */
+
+@layer components {
+  /* ── Wrapper ─────────────────────────────────────────── */
+  .selectra-control {
+    @apply relative w-full text-sm;
+  }
+
+  .selectra-control.is-disabled {
+    @apply opacity-50 pointer-events-none;
+  }
+
+  /* ── Input Wrapper ───────────────────────────────────── */
+  .selectra-input {
+    @apply relative flex flex-wrap items-center gap-1
+           w-full min-h-[38px] px-3 py-1.5
+           bg-white border border-gray-300 rounded-lg
+           cursor-text transition-all duration-150
+           text-gray-900;
+  }
+
+  .selectra-input:hover {
+    @apply border-gray-400;
+  }
+
+  .selectra-input.is-focused {
+    @apply border-blue-500 ring-2 ring-blue-500/20 outline-none;
+  }
+
+  .selectra-input.is-invalid {
+    @apply border-red-500 ring-2 ring-red-500/20;
+  }
+
+  .selectra-input.is-locked {
+    @apply bg-gray-50 cursor-default;
+  }
+
+  .selectra-input.is-single {
+    @apply cursor-pointer pr-8;
+  }
+
+  .selectra-input.is-single.has-items .selectra-search {
+    @apply absolute inset-0 px-3 py-1.5;
+  }
+
+  /* ── Search Input ────────────────────────────────────── */
+  .selectra-search {
+    @apply flex-1 min-w-[60px] bg-transparent
+           outline-none border-none p-0 m-0
+           text-gray-900 placeholder-gray-400;
+  }
+
+  .selectra-search:focus {
+    @apply outline-none ring-0;
+  }
+
+  .selectra-input.is-single .selectra-search {
+    @apply min-w-0 w-full;
+  }
+
+  /* ── Selected Items (Tags) ───────────────────────────── */
+  .selectra-item {
+    @apply inline-flex items-center gap-1
+           px-2 py-0.5 rounded-md
+           bg-blue-50 text-blue-700 border border-blue-200
+           text-sm leading-snug
+           animate-fade-in;
+  }
+
+  .selectra-item .selectra-item-remove {
+    @apply inline-flex items-center justify-center
+           w-4 h-4 rounded-full
+           text-blue-400 hover:text-blue-600
+           hover:bg-blue-100
+           cursor-pointer transition-colors duration-100
+           -mr-0.5 ml-0.5;
+  }
+
+  /* Single select display */
+  .selectra-single-value {
+    @apply truncate text-gray-900;
+  }
+
+  /* ── Dropdown Arrow ──────────────────────────────────── */
+  .selectra-arrow {
+    @apply absolute right-2.5 top-1/2 -translate-y-1/2
+           w-4 h-4 text-gray-400
+           pointer-events-none transition-transform duration-200;
+  }
+
+  .selectra-arrow.is-open {
+    @apply rotate-180;
+  }
+
+  /* ── Dropdown ────────────────────────────────────────── */
+  .selectra-dropdown {
+    @apply absolute z-50 w-full mt-1
+           bg-white border border-gray-200 rounded-lg
+           shadow-lg overflow-hidden
+           animate-dropdown-in;
+  }
+
+  .selectra-dropdown.is-top {
+    @apply bottom-full top-auto mb-1 mt-0;
+  }
+
+  .selectra-dropdown-content {
+    @apply max-h-60 overflow-y-auto overscroll-contain
+           py-1;
+  }
+
+  /* ── Dropdown Option ─────────────────────────────────── */
+  .selectra-option {
+    @apply px-3 py-2 cursor-pointer
+           text-gray-700 transition-colors duration-75
+           leading-snug;
+  }
+
+  .selectra-option:hover,
+  .selectra-option.is-active {
+    @apply bg-blue-500 text-white;
+  }
+
+  .selectra-option.is-active .highlight {
+    @apply text-white;
+  }
+
+  .selectra-option.is-disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  .selectra-option.is-selected {
+    @apply bg-blue-50 text-blue-700;
+  }
+
+  .selectra-option.is-selected.is-active {
+    @apply bg-blue-500 text-white;
+  }
+
+  /* ── Option Create ───────────────────────────────────── */
+  .selectra-option-create {
+    @apply px-3 py-2 cursor-pointer
+           text-gray-500 transition-colors duration-75
+           border-t border-gray-100;
+  }
+
+  .selectra-option-create:hover,
+  .selectra-option-create.is-active {
+    @apply bg-blue-500 text-white;
+  }
+
+  /* ── No Results ──────────────────────────────────────── */
+  .selectra-no-results {
+    @apply px-3 py-3 text-center text-gray-400 text-sm;
+  }
+
+  /* ── Loading ─────────────────────────────────────────── */
+  .selectra-loading {
+    @apply px-3 py-3 text-center text-gray-400 text-sm
+           flex items-center justify-center gap-2;
+  }
+
+  .selectra-spinner {
+    @apply w-4 h-4 border-2 border-gray-300
+           border-t-blue-500 rounded-full animate-spin;
+  }
+
+  /* ── Optgroup ────────────────────────────────────────── */
+  .selectra-optgroup-header {
+    @apply px-3 py-1.5 text-xs font-semibold
+           text-gray-500 uppercase tracking-wider
+           bg-gray-50 border-b border-gray-100;
+  }
+
+  .selectra-optgroup + .selectra-optgroup {
+    @apply border-t border-gray-100;
+  }
+
+  /* ── Dropdown Header (plugin) ────────────────────────── */
+  .selectra-dropdown-header {
+    @apply flex items-center justify-between
+           px-3 py-2 bg-gray-50
+           border-b border-gray-200
+           text-sm font-medium text-gray-700;
+  }
+
+  .selectra-dropdown-header .close-btn {
+    @apply w-5 h-5 flex items-center justify-center
+           rounded text-gray-400 hover:text-gray-600
+           hover:bg-gray-200 cursor-pointer transition-colors;
+  }
+
+  /* ── Clear Button (plugin) ───────────────────────────── */
+  .selectra-clear-button {
+    @apply absolute right-7 top-1/2 -translate-y-1/2
+           w-5 h-5 flex items-center justify-center
+           rounded-full text-gray-400 hover:text-gray-600
+           hover:bg-gray-100 cursor-pointer transition-colors
+           z-10;
+  }
+
+  .selectra-input.is-single .selectra-clear-button {
+    @apply right-8;
+  }
+
+  /* ── Tag Limit Badge (plugin) ────────────────────────── */
+  .selectra-tag-limit-badge {
+    @apply inline-flex items-center justify-center
+           px-2 py-0.5 rounded-full
+           bg-gray-100 text-gray-500
+           text-xs font-medium;
+  }
+
+  /* ── Highlight ───────────────────────────────────────── */
+  .highlight {
+    @apply font-semibold text-inherit;
+  }
+}
+
+/* ── Animations ──────────────────────────────────────────── */
+@layer utilities {
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes dropdown-in {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .animate-fade-in {
+    animation: fade-in 0.15s ease-out;
+  }
+
+  .animate-dropdown-in {
+    animation: dropdown-in 0.15s ease-out;
+  }
+}
+
+/* ── Scrollbar Styling ───────────────────────────────────── */
+.selectra-dropdown-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.selectra-dropdown-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.selectra-dropdown-content::-webkit-scrollbar-thumb {
+  @apply bg-gray-200 rounded-full;
+}
+
+.selectra-dropdown-content::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-300;
+}