sigpro-ui/components/_core.js

// _core.js
import { $, watch } from 'sigpro';

export const ui = (base, extras = '') => {
  if (!extras) return base;
  const extraClasses = extras
    .split(' ')
    .map(part => part.trim())
    .filter(Boolean)
    .map(part => part.startsWith(base + '-') ? part : `${base}-${part}`)
    .join(' ');
  return `${base} ${extraClasses}`.trim();
};

export const get = val => typeof val === "function" ? val() : val;

export const filterBy = (items, query, field = 'label') => {
  const q = String(query).toLowerCase();
  if (!q) return get(items);
  return get(items).filter(item => {
    const text = typeof item === 'string' ? item : item[field];
    return String(text).toLowerCase().includes(q);
  });
};

export const listKey = (items, isOpen) => {
  const cursor = $(-1);
  
  watch([items, isOpen], () => {
    if (!get(isOpen)) cursor(-1);
  });
  
  const onKey = (e, select) => {
    const list = get(items);
    if (!list.length) return;
    
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      isOpen(true);
      cursor(Math.min(cursor() + 1, list.length - 1));
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      cursor(Math.max(cursor() - 1, 0));
    } else if (e.key === 'Enter' && cursor() >= 0) {
      e.preventDefault();
      select(list[cursor()]);
    } else if (e.key === 'Escape') {
      isOpen(false);
    }
  };
  
  return { cursor, onKey };
};

export const cls = (...classes) => classes.filter(Boolean).join(' ').trim();

export const getBy = (item, field = 'label') => {
  return typeof item === 'string' ? item : item[field];
};

export const isFunc = f => typeof f === "function";