@clusterenvision/ui-framework 1.0.0

package/dist/chunk-SZQNIMYI.cjs

@@ -0,0 +1,592 @@
+'use strict';
+
+// src/lib/dom.ts
+var DOM_CONFIG = {
+  /** Enable debug logging */
+  DEBUG: false};
+function setDebugMode(enabled) {
+  DOM_CONFIG.DEBUG = enabled;
+}
+function log(message, ...args) {
+  if (DOM_CONFIG.DEBUG) {
+    console.log(`[DOM] ${message}`, ...args);
+  }
+}
+function safeQuerySelector(selector, context = document) {
+  try {
+    const found = context.querySelector(selector);
+    return found instanceof HTMLElement ? found : null;
+  } catch (error) {
+    log(`Invalid selector: ${selector}`, error);
+    return null;
+  }
+}
+function safeQuerySelectorAll(selector, context = document) {
+  try {
+    return Array.from(context.querySelectorAll(selector)).filter(
+      (node) => node instanceof HTMLElement
+    );
+  } catch (error) {
+    log(`Invalid selector: ${selector}`, error);
+    return [];
+  }
+}
+var DOMElementImpl = class _DOMElementImpl {
+  el;
+  constructor(element) {
+    this.el = element;
+  }
+  // Class manipulation
+  addClass(...classes) {
+    this.el?.classList.add(...classes.filter(Boolean));
+    return this;
+  }
+  removeClass(...classes) {
+    this.el?.classList.remove(...classes.filter(Boolean));
+    return this;
+  }
+  toggleClass(className, force) {
+    if (force === void 0) {
+      this.el?.classList.toggle(className);
+    } else {
+      this.el?.classList.toggle(className, force);
+    }
+    return this;
+  }
+  hasClass(className) {
+    return this.el?.classList.contains(className) ?? false;
+  }
+  attr(name, value) {
+    if (value === void 0) {
+      return this.el?.getAttribute(name) ?? null;
+    }
+    this.el?.setAttribute(name, String(value));
+    return this;
+  }
+  removeAttr(name) {
+    this.el?.removeAttribute(name);
+    return this;
+  }
+  data(key, value) {
+    const dataKey = `data-${key}`;
+    if (value === void 0) {
+      return this.el?.getAttribute(dataKey) ?? null;
+    }
+    this.el?.setAttribute(dataKey, String(value));
+    return this;
+  }
+  html(content) {
+    if (content === void 0) {
+      return this.el?.innerHTML ?? "";
+    }
+    if (this.el) this.el.innerHTML = content;
+    return this;
+  }
+  text(content) {
+    if (content === void 0) {
+      return this.el?.textContent ?? "";
+    }
+    if (this.el) this.el.textContent = content;
+    return this;
+  }
+  val(value) {
+    if (!(this.el instanceof HTMLInputElement || this.el instanceof HTMLTextAreaElement || this.el instanceof HTMLSelectElement)) {
+      return "";
+    }
+    if (value === void 0) {
+      return this.el.value;
+    }
+    this.el.value = value;
+    return this;
+  }
+  // Events
+  on(event, handler, options) {
+    this.el?.addEventListener(event, handler, options);
+    return this;
+  }
+  off(event, handler) {
+    this.el?.removeEventListener(event, handler);
+    return this;
+  }
+  once(event, handler) {
+    this.el?.addEventListener(event, handler, { once: true });
+    return this;
+  }
+  trigger(event, detail) {
+    if (this.el) {
+      const customEvent = new CustomEvent(event, { detail, bubbles: true, cancelable: true });
+      this.el.dispatchEvent(customEvent);
+    }
+    return this;
+  }
+  // DOM manipulation
+  append(content) {
+    const el = this.el;
+    if (!el) return this;
+    if (typeof content === "string") {
+      el.insertAdjacentHTML("beforeend", content);
+    } else if (Array.isArray(content)) {
+      content.forEach((node) => el.appendChild(node));
+    } else {
+      el.appendChild(content);
+    }
+    return this;
+  }
+  prepend(content) {
+    const el = this.el;
+    if (!el) return this;
+    if (typeof content === "string") {
+      el.insertAdjacentHTML("afterbegin", content);
+    } else if (Array.isArray(content)) {
+      content.reverse().forEach((node) => el.insertBefore(node, el.firstChild));
+    } else {
+      el.insertBefore(content, el.firstChild);
+    }
+    return this;
+  }
+  before(content) {
+    if (!this.el) return this;
+    if (typeof content === "string") {
+      this.el.insertAdjacentHTML("beforebegin", content);
+    } else {
+      this.el.parentElement?.insertBefore(content, this.el);
+    }
+    return this;
+  }
+  after(content) {
+    if (!this.el) return this;
+    if (typeof content === "string") {
+      this.el.insertAdjacentHTML("afterend", content);
+    } else {
+      this.el.parentElement?.insertBefore(content, this.el.nextSibling);
+    }
+    return this;
+  }
+  remove() {
+    this.el?.remove();
+  }
+  empty() {
+    if (this.el) this.el.innerHTML = "";
+    return this;
+  }
+  replace(newContent) {
+    if (!this.el) return;
+    if (typeof newContent === "string") {
+      this.el.outerHTML = newContent;
+    } else {
+      this.el.parentElement?.replaceChild(newContent, this.el);
+    }
+  }
+  // Traversal
+  parent() {
+    const el = this.el;
+    return new _DOMElementImpl(el ? el.parentElement : null);
+  }
+  children() {
+    const el = this.el;
+    return el ? Array.from(el.children).filter((child) => child instanceof HTMLElement) : [];
+  }
+  siblings() {
+    const el = this.el;
+    if (!el?.parentElement) return [];
+    return Array.from(el.parentElement.children).filter((child) => child !== el);
+  }
+  find(selector) {
+    const el = this.el;
+    if (!el) return new _DOMElementImpl(null);
+    const found = el.querySelector(selector);
+    return new _DOMElementImpl(found instanceof HTMLElement ? found : null);
+  }
+  findAll(selector) {
+    const el = this.el;
+    return el ? Array.from(el.querySelectorAll(selector)).filter((node) => node instanceof HTMLElement) : [];
+  }
+  closest(selector) {
+    const el = this.el;
+    if (!el) return new _DOMElementImpl(null);
+    const found = el.closest(selector);
+    return new _DOMElementImpl(found instanceof HTMLElement ? found : null);
+  }
+  next() {
+    const el = this.el?.nextElementSibling;
+    return new _DOMElementImpl(el instanceof HTMLElement ? el : null);
+  }
+  prev() {
+    const el = this.el?.previousElementSibling;
+    return new _DOMElementImpl(el instanceof HTMLElement ? el : null);
+  }
+  css(propertyOrProperties, value) {
+    const el = this.el;
+    if (!el) return typeof propertyOrProperties === "string" ? "" : this;
+    if (typeof propertyOrProperties === "string") {
+      if (value === void 0) {
+        return window.getComputedStyle(el).getPropertyValue(propertyOrProperties);
+      }
+      el.style.setProperty(propertyOrProperties, String(value));
+      return this;
+    }
+    Object.entries(propertyOrProperties).forEach(([prop, val]) => {
+      el.style.setProperty(prop, String(val));
+    });
+    return this;
+  }
+  show() {
+    if (this.el) this.el.style.display = "";
+    return this;
+  }
+  hide() {
+    if (this.el) this.el.style.display = "none";
+    return this;
+  }
+  toggle(force) {
+    if (!this.el) return this;
+    const shouldShow = force ?? this.isHidden();
+    return shouldShow ? this.show() : this.hide();
+  }
+  // Dimensions
+  width() {
+    return this.el?.offsetWidth ?? 0;
+  }
+  height() {
+    return this.el?.offsetHeight ?? 0;
+  }
+  offset() {
+    if (!this.el) return { top: 0, left: 0 };
+    const rect = this.el.getBoundingClientRect();
+    return {
+      top: rect.top + window.scrollY,
+      left: rect.left + window.scrollX
+    };
+  }
+  scrollTop(value) {
+    if (!this.el) return value === void 0 ? 0 : this;
+    if (value === void 0) {
+      return this.el.scrollTop;
+    }
+    this.el.scrollTop = value;
+    return this;
+  }
+  // State
+  isVisible() {
+    if (!this.el) return false;
+    return this.el.offsetParent !== null && window.getComputedStyle(this.el).display !== "none";
+  }
+  isHidden() {
+    return !this.isVisible();
+  }
+  exists() {
+    return this.el !== null;
+  }
+  // Focus
+  focus() {
+    this.el?.focus();
+    return this;
+  }
+  blur() {
+    this.el?.blur();
+    return this;
+  }
+};
+function $(selector) {
+  if (!selector) return new DOMElementImpl(null);
+  if (typeof selector === "string") {
+    return new DOMElementImpl(safeQuerySelector(selector));
+  }
+  return new DOMElementImpl(selector);
+}
+function $$(selector) {
+  return safeQuerySelectorAll(selector);
+}
+function $id(id) {
+  return new DOMElementImpl(document.getElementById(id));
+}
+function create(tag, options) {
+  const el = document.createElement(tag);
+  if (!options) return el;
+  if (options.className) el.className = options.className;
+  if (options.classes) {
+    const validClasses = options.classes.filter(Boolean);
+    if (validClasses.length > 0) {
+      el.classList.add(...validClasses);
+    }
+  }
+  if (options.id) el.id = options.id;
+  if (options.text !== void 0) el.textContent = options.text;
+  if (options.html !== void 0) {
+    log(`Setting innerHTML on ${tag} element`);
+    el.innerHTML = options.html;
+  }
+  if (options.attrs) {
+    Object.entries(options.attrs).forEach(([key, value]) => {
+      el.setAttribute(key, String(value));
+    });
+  }
+  if (options.data) {
+    Object.entries(options.data).forEach(([key, value]) => {
+      el.setAttribute(`data-${key}`, String(value));
+    });
+  }
+  if (options.styles) {
+    Object.entries(options.styles).forEach(([key, value]) => {
+      el.style.setProperty(key, String(value));
+    });
+  }
+  if (options.on) {
+    Object.entries(options.on).forEach(([event, handler]) => {
+      el.addEventListener(event, handler);
+    });
+  }
+  if (options.children) {
+    options.children.forEach((child) => {
+      if (typeof child === "string") {
+        el.appendChild(document.createTextNode(child));
+        return;
+      }
+      el.appendChild(child);
+    });
+  }
+  return el;
+}
+function fragment(html) {
+  const template = document.createElement("template");
+  template.innerHTML = html.trim();
+  return template.content;
+}
+function delegate(event, selector, handler, root = document) {
+  const delegatedHandler = (e) => {
+    const origin = e.target;
+    if (!(origin instanceof Element)) {
+      return;
+    }
+    const target = origin.closest(selector);
+    if (target instanceof HTMLElement) {
+      handler(e, target);
+    }
+  };
+  root.addEventListener(event, delegatedHandler);
+  log(`Delegated ${event} on ${selector}`);
+  return () => {
+    root.removeEventListener(event, delegatedHandler);
+    log(`Removed delegation for ${event} on ${selector}`);
+  };
+}
+function ready(callback) {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", callback);
+  } else {
+    callback();
+  }
+}
+function clone(element, deep = true) {
+  return element.cloneNode(deep);
+}
+function matches(element, selector) {
+  return element.matches(selector);
+}
+var dataStore = /* @__PURE__ */ new WeakMap();
+function elementData(element, key, value) {
+  if (value === void 0) {
+    const store2 = dataStore.get(element);
+    return store2?.[key];
+  }
+  let store = dataStore.get(element);
+  if (!store) {
+    store = {};
+    dataStore.set(element, store);
+  }
+  store[key] = value;
+}
+function serializeForm(form) {
+  const formData = new FormData(form);
+  const data = {};
+  formData.forEach((value, key) => {
+    data[key] = value instanceof File ? value.name : value;
+  });
+  return data;
+}
+var ARRAY_KEY = /^([^\[]+)\[([^\]]*)\]$/;
+function getFormValues(form) {
+  const formData = new FormData(form);
+  const result = {};
+  formData.forEach((value, key) => {
+    const arrayMatch = ARRAY_KEY.exec(key);
+    if (arrayMatch) {
+      const [, name, index] = arrayMatch;
+      const existing = result[name];
+      const list = Array.isArray(existing) ? existing : [];
+      if (!Array.isArray(existing)) {
+        result[name] = list;
+      }
+      if (index) {
+        list[Number.parseInt(index, 10)] = value;
+      } else {
+        list.push(value);
+      }
+      return;
+    }
+    result[key] = value;
+  });
+  return result;
+}
+function debounce(func, wait) {
+  let timeout = null;
+  return function(...args) {
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
+function throttle(func, limit) {
+  let inThrottle = false;
+  return function(...args) {
+    if (!inThrottle) {
+      func.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => {
+        inThrottle = false;
+      }, limit);
+    }
+  };
+}
+function waitForElement(selector, timeout = 5e3) {
+  return new Promise((resolve, reject) => {
+    const element = document.querySelector(selector);
+    if (element instanceof HTMLElement) {
+      resolve(element);
+      return;
+    }
+    const observer = new MutationObserver(() => {
+      const observed = document.querySelector(selector);
+      if (observed instanceof HTMLElement) {
+        observer.disconnect();
+        clearTimeout(timeoutId);
+        resolve(observed);
+      }
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    const timeoutId = setTimeout(() => {
+      observer.disconnect();
+      reject(new Error(`Element "${selector}" not found within ${String(timeout)}ms`));
+    }, timeout);
+  });
+}
+function onVisible(element, callback, options) {
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        callback(entry);
+      }
+    });
+  }, options);
+  observer.observe(element);
+  return () => {
+    observer.disconnect();
+  };
+}
+function animate(element, properties, duration = 300, easing = "ease") {
+  return new Promise((resolve) => {
+    const originalTransition = element.style.transition;
+    element.style.transition = `all ${String(duration)}ms ${easing}`;
+    Object.entries(properties).forEach(([prop, value]) => {
+      element.style.setProperty(prop, value);
+    });
+    setTimeout(() => {
+      element.style.transition = originalTransition;
+      resolve();
+    }, duration);
+  });
+}
+function fadeIn(element, duration = 300) {
+  element.style.opacity = "0";
+  element.style.display = "";
+  return animate(element, { opacity: "1" }, duration);
+}
+function fadeOut(element, duration = 300) {
+  return animate(element, { opacity: "0" }, duration).then(() => {
+    element.style.display = "none";
+  });
+}
+function slideDown(element, duration = 300) {
+  element.style.display = "block";
+  const height = element.scrollHeight;
+  element.style.height = "0";
+  element.style.overflow = "hidden";
+  return animate(element, { height: `${String(height)}px` }, duration).then(() => {
+    element.style.height = "";
+    element.style.overflow = "";
+  });
+}
+function slideUp(element, duration = 300) {
+  const height = element.scrollHeight;
+  element.style.height = `${String(height)}px`;
+  element.style.overflow = "hidden";
+  return animate(element, { height: "0" }, duration).then(() => {
+    element.style.display = "none";
+    element.style.height = "";
+    element.style.overflow = "";
+  });
+}
+var DOMApi = {
+  // Version
+  version: "2.0.0",
+  // Core selectors
+  $,
+  $$,
+  $id,
+  // Element creation
+  create,
+  fragment,
+  // Event handling
+  delegate,
+  ready,
+  // Utilities
+  clone,
+  matches,
+  elementData,
+  // Form helpers
+  serializeForm,
+  getFormValues,
+  // Performance
+  debounce,
+  throttle,
+  // Async utilities
+  waitForElement,
+  onVisible,
+  // Animations
+  animate,
+  fadeIn,
+  fadeOut,
+  slideDown,
+  slideUp,
+  // Configuration
+  setDebugMode
+};
+var dom_default = DOMApi;
+
+exports.$ = $;
+exports.$$ = $$;
+exports.$id = $id;
+exports.animate = animate;
+exports.clone = clone;
+exports.create = create;
+exports.debounce = debounce;
+exports.delegate = delegate;
+exports.dom_default = dom_default;
+exports.elementData = elementData;
+exports.fadeIn = fadeIn;
+exports.fadeOut = fadeOut;
+exports.fragment = fragment;
+exports.getFormValues = getFormValues;
+exports.matches = matches;
+exports.onVisible = onVisible;
+exports.ready = ready;
+exports.serializeForm = serializeForm;
+exports.setDebugMode = setDebugMode;
+exports.slideDown = slideDown;
+exports.slideUp = slideUp;
+exports.throttle = throttle;
+exports.waitForElement = waitForElement;
+//# sourceMappingURL=chunk-SZQNIMYI.cjs.map
+//# sourceMappingURL=chunk-SZQNIMYI.cjs.map