@dooboostore/simple-web-component 1.0.23 → 1.0.25

package/src/decorators/classList.ts

@@ -1,172 +0,0 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { ensureInit } from './elementDefine';
-import { SwcUtils } from '../utils/Utils';
-import { SwcQueryOptions } from '../types';
-
-export const CLASS_LIST_METADATA_KEY = Symbol('simple-web-component:class-list');
-
-export type ClassListAction = 'set' | 'update' | 'add' | 'remove' | 'toggle';
-
-export interface ClassListMetadata {
-  propertyKey: string | symbol;
-  selector: string;
-  action: ClassListAction;
-  options: SwcQueryOptions;
-}
-
-function createClassListDecorator(action: ClassListAction) {
-  return (selector: string, options: SwcQueryOptions = {}): MethodDecorator => {
-    return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
-      const constructor = target.constructor;
-      let metaList = ReflectUtils.getOwnMetadata(CLASS_LIST_METADATA_KEY, constructor) as Map<string | symbol, ClassListMetadata>;
-      if (!metaList) {
-        metaList = new Map<string | symbol, ClassListMetadata>();
-        ReflectUtils.defineMetadata(CLASS_LIST_METADATA_KEY, metaList, constructor);
-      }
-      metaList.set(propertyKey, { propertyKey, selector, action, options });
-
-      const original = descriptor.value;
-      descriptor.value = async function (...args: any[]) {
-        ensureInit(this);
-        const res = await original.apply(this, args);
-        if (res !== undefined) {
-          const r = options.root || 'auto';
-          const hostSet = SwcUtils.getHostSet(this as any);
-          const targetEls: HTMLElement[] = [];
-
-          if (selector === ':host' || !selector) {
-            targetEls.push(this as any);
-          } else if (selector === ':parentHost') {
-            if (hostSet.$parentHost) targetEls.push(hostSet.$parentHost);
-          } else if (selector === ':appHost') {
-            if (hostSet.$appHost) targetEls.push(hostSet.$appHost);
-          } else {
-            if (r === 'shadow') {
-              const found = this.shadowRoot?.querySelectorAll(selector);
-              if (found) targetEls.push(...found);
-            } else if (r === 'light') {
-              const found = (this as any).querySelectorAll(selector);
-              if (found) targetEls.push(...found);
-            } else if (r === 'all') {
-              const sFound = this.shadowRoot?.querySelectorAll(selector);
-              const lFound = (this as any).querySelectorAll(selector);
-              if (sFound) targetEls.push(...sFound);
-              if (lFound) targetEls.push(...lFound);
-            } else {
-              // auto
-              const found = (this.shadowRoot || (this as any)).querySelectorAll(selector);
-              if (found) targetEls.push(...found);
-            }
-          }
-
-          targetEls.forEach(targetEl => {
-            if (action === 'set') {
-              let classes = '';
-              if (typeof res === 'object' && res !== null && !Array.isArray(res)) {
-                classes = Object.entries(res)
-                  .filter(([_, force]) => !!force)
-                  .map(([cls]) => cls)
-                  .join(' ');
-              } else {
-                classes = Array.isArray(res) ? res.join(' ') : String(res);
-              }
-              targetEl.className = classes;
-            } else if (action === 'update') {
-              if (typeof res === 'object' && res !== null && !Array.isArray(res)) {
-                Object.entries(res).forEach(([cls, force]) => {
-                  targetEl.classList.toggle(cls, !!force);
-                });
-              } else if (res !== undefined && res !== null) {
-                const classes = Array.isArray(res) ? res.map(String) : [String(res)];
-                targetEl.classList.add(...classes);
-              }
-            } else if (action === 'add') {
-              const classes = Array.isArray(res) ? res.map(String) : [String(res)];
-              targetEl.classList.add(...classes);
-            } else if (action === 'remove') {
-              const classes = Array.isArray(res) ? res.map(String) : [String(res)];
-              targetEl.classList.remove(...classes);
-            } else if (action === 'toggle') {
-              const classes = Array.isArray(res) ? res.map(String) : [String(res)];
-              classes.forEach(c => targetEl.classList.toggle(c));
-            }
-          });
-        }
-        return res;
-      };
-    };
-  };
-}
-
-/**
- * @setClassList decorator to surgically replace all classes on a target element.
- * Returns: string | string[]
- */
-export const setClassList = (selector: string, options: SwcQueryOptions = {}) => createClassListDecorator('set')(selector, options);
-
-/**
- * @updateClassList decorator to surgically update specific classes.
- * Returns: Record<string, boolean> (toggle with force) | string | string[] (add)
- */
-export const updateClassList = (selector: string, options: SwcQueryOptions = {}) => createClassListDecorator('update')(selector, options);
-
-/**
- * @addClassList decorator to surgically add classes to a target element.
- * Returns: string | string[]
- */
-export const addClassList = (selector: string, options: SwcQueryOptions = {}) => createClassListDecorator('add')(selector, options);
-
-/**
- * @removeClassList decorator to surgically remove classes from a target element.
- * Returns: string | string[]
- */
-export const removeClassList = (selector: string, options: SwcQueryOptions = {}) => createClassListDecorator('remove')(selector, options);
-
-/**
- * @toggleClassList decorator to surgically toggle classes on a target element.
- * Returns: string | string[]
- */
-export const toggleClassList = (selector: string, options: SwcQueryOptions = {}) => createClassListDecorator('toggle')(selector, options);
-
-// Host-specific versions (for :host selector)
-
-/**
- * @setClassListHost decorator to set classes on :host element.
- * Returns: string | string[]
- */
-export const setClassListHost = (options: SwcQueryOptions = {}) => createClassListDecorator('set')(':host', options);
-
-/**
- * @updateClassListHost decorator to update specific classes on :host.
- * Returns: Record<string, boolean> (toggle with force) | string | string[] (add)
- */
-export const updateClassListHost = (options: SwcQueryOptions = {}) => createClassListDecorator('update')(':host', options);
-
-/**
- * @addClassListHost decorator to add classes to :host element.
- * Returns: string | string[]
- */
-export const addClassListHost = (options: SwcQueryOptions = {}) => createClassListDecorator('add')(':host', options);
-
-/**
- * @removeClassListHost decorator to remove classes from :host element.
- * Returns: string | string[]
- */
-export const removeClassListHost = (options: SwcQueryOptions = {}) => createClassListDecorator('remove')(':host', options);
-
-/**
- * @toggleClassListHost decorator to toggle classes on :host element.
- * Returns: string | string[]
- */
-export const toggleClassListHost = (options: SwcQueryOptions = {}) => createClassListDecorator('toggle')(':host', options);
-
-export const findAllClassListMetadata = (target: any): Map<string | symbol, ClassListMetadata> => {
-  const result = new Map<string | symbol, ClassListMetadata>();
-  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, ClassListMetadata>>(CLASS_LIST_METADATA_KEY, target);
-  maps.forEach(map => {
-    if (map instanceof Map) {
-      map.forEach((v, k) => result.set(k, v));
-    }
-  });
-  return result;
-};

package/src/decorators/setAttribute.ts

@@ -1,113 +0,0 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { ensureInit, getElementConfig } from './elementDefine';
-import { SwcUtils } from '../utils/Utils';
-import { SwcQueryOptions } from '../types';
-
-export interface SetAttributeMetadata {
-  propertyKey: string | symbol;
-  selector: string;
-  name: string;
-  options: SwcQueryOptions;
-}
-
-export const SET_ATTRIBUTE_METADATA_KEY = Symbol('simple-web-component:set-attribute');
-
-/**
- * @setAttribute decorator to surgically update an attribute of a target element.
- * Usage: @setAttribute(':host', 'count')
- * Usage: @setAttribute('#child', 'disabled')
- */
-export function setAttribute(selector: string, name: string): MethodDecorator;
-export function setAttribute(selector: string, name: string, options?: SwcQueryOptions): MethodDecorator;
-export function setAttribute(selector: string, name: string, options: SwcQueryOptions = {}): MethodDecorator {
-  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
-    const constructor = target.constructor;
-    let metaList = ReflectUtils.getOwnMetadata(SET_ATTRIBUTE_METADATA_KEY, constructor) as Map<string | symbol, SetAttributeMetadata>;
-    if (!metaList) {
-      metaList = new Map<string | symbol, SetAttributeMetadata>();
-      ReflectUtils.defineMetadata(SET_ATTRIBUTE_METADATA_KEY, metaList, constructor);
-    }
-    metaList.set(propertyKey, { propertyKey, selector, name, options });
-
-    const original = descriptor.value;
-    descriptor.value = async function (...args: any[]) {
-      ensureInit(this);
-      const res = await original.apply(this, args);
-      if (res !== undefined) {
-        const hostSet = SwcUtils.getHostSet(this as any);
-        const conf = getElementConfig(this);
-        const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
-
-        const targetEls: any[] = [];
-        const r = options.root || 'auto';
-
-        const applyRoot = (t: any) => {
-          if (!t) return;
-          if (r === 'auto') {
-            targetEls.push((t as any).shadowRoot || t);
-            return;
-          }
-          if (r === 'light' || r === 'all') targetEls.push(t);
-          if ((r === 'shadow' || r === 'all') && (t as any).shadowRoot) targetEls.push((t as any).shadowRoot);
-        };
-
-        if (selector === ':window') targetEls.push(currentWin);
-        else if (selector === ':document') targetEls.push(currentWin.document as any);
-        else if (selector === ':parentHost') applyRoot(hostSet.$parentHost);
-        else if (selector === ':appHost') applyRoot(hostSet.$appHost);
-        else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);
-        else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);
-        else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost);
-        else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost);
-        else if (selector === ':hosts') hostSet.$hosts.forEach(applyRoot);
-        else if (selector === ':appHosts') hostSet.$appHosts.forEach(applyRoot);
-        else if (selector === ':host' || !selector) applyRoot(this);
-        else {
-          const roots: any[] = [];
-          if (r === 'shadow') {
-            if ((this as any).shadowRoot) roots.push((this as any).shadowRoot);
-          } else if (r === 'light') {
-            roots.push(this as any);
-          } else if (r === 'all') {
-            roots.push(this as any);
-            if ((this as any).shadowRoot) roots.push((this as any).shadowRoot);
-          } else {
-            roots.push((this as any).shadowRoot || (this as any));
-          }
-          roots.forEach(root => targetEls.push(...root.querySelectorAll(selector)));
-        }
-
-        targetEls.forEach(targetEl => {
-          if (!targetEl || typeof (targetEl as any).setAttribute !== 'function') return;
-          if (res === null) (targetEl as any).removeAttribute(name);
-          else (targetEl as any).setAttribute(name, String(res));
-        })
-      }
-      return res;
-    };
-  };
-}
-
-export const getSetAttributeMetadata = (target: any): Map<string | symbol, SetAttributeMetadata> | undefined => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(SET_ATTRIBUTE_METADATA_KEY, constructor);
-};
-
-export const findAllSetAttributeMetadata = (target: any): Map<string | symbol, SetAttributeMetadata> => {
-  const result = new Map<string | symbol, SetAttributeMetadata>();
-  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, SetAttributeMetadata>>(SET_ATTRIBUTE_METADATA_KEY, target);
-  maps.forEach(map => {
-    if (map instanceof Map) {
-      map.forEach((v, k) => result.set(k, v));
-    }
-  });
-  return result;
-};
-
-/**
- * @setAttributeHost decorator - simplified version of @setAttribute for :host selector
- * Usage: @setAttributeHost('aria-disabled')
- */
-export function setAttributeHost(name: string, options?: SwcQueryOptions): MethodDecorator {
-  return setAttribute(':host', name, options);
-}

package/src/decorators/style.ts

@@ -1,140 +0,0 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { ensureInit } from './elementDefine';
-import { SwcUtils } from '../utils/Utils';
-import { SwcQueryOptions } from '../types';
-
-export type StyleAction = 'set' | 'update' | 'remove';
-
-export interface StyleOptions extends SwcQueryOptions {
-}
-
-export interface StyleMetadata {
-  propertyKey: string | symbol;
-  selector: string;
-  action: StyleAction;
-  options: StyleOptions;
-}
-
-export const STYLE_METADATA_KEY = Symbol('simple-web-component:style');
-
-function createStyleDecorator(action: StyleAction) {
-  return (selector: string, options: StyleOptions = {}): MethodDecorator => {
-    return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
-      const constructor = target.constructor;
-      let metaList = ReflectUtils.getOwnMetadata(STYLE_METADATA_KEY, constructor) as Map<string | symbol, StyleMetadata>;
-      if (!metaList) {
-        metaList = new Map<string | symbol, StyleMetadata>();
-        ReflectUtils.defineMetadata(STYLE_METADATA_KEY, metaList, constructor);
-      }
-      metaList.set(propertyKey, { propertyKey, selector, action, options });
-
-      const original = descriptor.value;
-      descriptor.value = async function (...args: any[]) {
-        ensureInit(this);
-        const res = await original.apply(this, args);
-        if (res !== undefined) {
-          const r = options.root || 'auto';
-          const hostSet = SwcUtils.getHostSet(this as any);
-          const targetEls: HTMLElement[] = [];
-
-          if (selector === ':host' || !selector) {
-            targetEls.push(this as any);
-          } else if (selector === ':parentHost') {
-            if (hostSet.$parentHost) targetEls.push(hostSet.$parentHost);
-          } else if (selector === ':appHost') {
-            if (hostSet.$appHost) targetEls.push(hostSet.$appHost);
-          } else {
-            if (r === 'shadow') {
-              const found = this.shadowRoot?.querySelectorAll(selector);
-              if (found) targetEls.push(...found);
-            } else if (r === 'light') {
-              const found = (this as any).querySelectorAll(selector);
-              if (found) targetEls.push(...found);
-            } else if (r === 'all') {
-              const sFound = this.shadowRoot?.querySelectorAll(selector);
-              const lFound = (this as any).querySelectorAll(selector);
-              if (sFound) targetEls.push(...sFound);
-              if (lFound) targetEls.push(...lFound);
-            } else {
-              // auto
-              const found = (this.shadowRoot || (this as any)).querySelectorAll(selector);
-              if (found) targetEls.push(...found);
-            }
-          }
-
-          targetEls.forEach(targetEl => {
-            if (action === 'set') {
-              targetEl.style.cssText = '';
-              if (typeof res === 'object' && res !== null) {
-                Object.assign(targetEl.style, res);
-              } else if (typeof res === 'string') {
-                targetEl.style.cssText = res;
-              }
-            } else if (action === 'update') {
-              if (typeof res === 'object' && res !== null) {
-                Object.assign(targetEl.style, res);
-              }
-            } else if (action === 'remove') {
-              const props = Array.isArray(res) ? res : [res];
-              props.forEach(p => targetEl.style.removeProperty(String(p)));
-            }
-          });
-        }
-        return res;
-      };
-    };
-  };
-}
-
-/**
- * @setStyle decorator to surgically set styles on a target element (replaces all existing styles).
- * Usage: @setStyle('#box') getStyles() { return { color: 'red', display: 'block' }; }
- * Usage: @setStyle('#box', { root: 'shadow' }) getStyles() { return { color: 'red' }; }
- */
-export const setStyle = (selector: string, options: StyleOptions = {}) => createStyleDecorator('set')(selector, options);
-
-/**
- * @setStyleHost decorator - simplified version of @setStyle for :host selector.
- * Usage: @setStyleHost getStyles() { return { color: 'red', display: 'block' }; }
- * Usage: @setStyleHost({ root: 'shadow' }) getStyles() { return { color: 'red' }; }
- */
-export const setStyleHost = (options: StyleOptions = {}) => createStyleDecorator('set')(':host', options);
-
-/**
- * @updateStyle decorator to surgically update styles on a target element (merges with existing styles).
- * Usage: @updateStyle('#box') updateStyles() { return { color: 'blue' }; }
- * Usage: @updateStyle('#box', { root: 'shadow' }) updateStyles() { return { color: 'blue' }; }
- */
-export const updateStyle = (selector: string, options: StyleOptions = {}) => createStyleDecorator('update')(selector, options);
-
-/**
- * @updateStyleHost decorator - simplified version of @updateStyle for :host selector.
- * Usage: @updateStyleHost updateStyles() { return { color: 'blue' }; }
- * Usage: @updateStyleHost({ root: 'shadow' }) updateStyles() { return { color: 'blue' }; }
- */
-export const updateStyleHost = (options: StyleOptions = {}) => createStyleDecorator('update')(':host', options);
-
-/**
- * @removeStyle decorator to surgically remove styles from a target element.
- * Usage: @removeStyle('#box') clearStyles() { return ['color', 'display']; }
- * Usage: @removeStyle('#box', { root: 'shadow' }) clearStyles() { return ['color']; }
- */
-export const removeStyle = (selector: string, options: StyleOptions = {}) => createStyleDecorator('remove')(selector, options);
-
-/**
- * @removeStyleHost decorator - simplified version of @removeStyle for :host selector.
- * Usage: @removeStyleHost clearStyles() { return ['color', 'display']; }
- * Usage: @removeStyleHost({ root: 'shadow' }) clearStyles() { return ['color']; }
- */
-export const removeStyleHost = (options: StyleOptions = {}) => createStyleDecorator('remove')(':host', options);
-
-export const findAllStyleMetadata = (target: any): Map<string | symbol, StyleMetadata> => {
-  const result = new Map<string | symbol, StyleMetadata>();
-  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, StyleMetadata>>(STYLE_METADATA_KEY, target);
-  maps.forEach(map => {
-    if (map instanceof Map) {
-      map.forEach((v, k) => result.set(k, v));
-    }
-  });
-  return result;
-};

package/src/utils/TemplateUtils.ts

@@ -1,92 +0,0 @@
-export interface CreateElementInfo {
-  tagName: string;
-  innerHtml?: string;
-}
-
-export namespace TemplateUtils {
-  /**
-   * Tagged template function to create a DocumentFragment from HTML string.
-   */
-  export const htmlFragment = (strings: TemplateStringsArray, ...values: any[]): DocumentFragment => {
-    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');
-    const template = document.createElement('template');
-    template.innerHTML = raw.trim();
-    return template.content;
-  };
-
-  /**
-   * Tagged template function to create a Text node from string.
-   */
-  export const textNode = (strings: TemplateStringsArray, ...values: any[]): Text => {
-    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');
-    return document.createTextNode(raw);
-  };
-
-  /**
-   * Tagged template function to create a Comment node from string.
-   */
-  export const commentNode = (strings: TemplateStringsArray, ...values: any[]): Comment => {
-    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');
-    return document.createComment(raw);
-  };
-
-  /**
-   * Generic element creator using a configuration object and attribute map.
-   */
-  export const createElement = <T extends HTMLElement>(info: CreateElementInfo, attrs: Record<string, any> = {}): T => {
-    const el = document.createElement(info.tagName) as T;
-    if (info.innerHtml !== undefined) el.innerHTML = info.innerHtml;
-    Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
-    return el;
-  };
-
-  /**
-   * Internal factory to create tagged template functions for specific HTML elements.
-   */
-  const createTagFunction = <T extends HTMLElement>(tagName: string) => {
-    return (strings: TemplateStringsArray, ...values: any[]): T => {
-      const el = document.createElement(tagName) as T;
-      el.innerHTML = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');
-      return el;
-    };
-  };
-
-  // Specific Element Factories
-  export const htmlDivElement = createTagFunction<HTMLDivElement>('div');
-  export const htmlSpanElement = createTagFunction<HTMLSpanElement>('span');
-  export const htmlButtonElement = createTagFunction<HTMLButtonElement>('button');
-  export const htmlUlElement = createTagFunction<HTMLUListElement>('ul');
-  export const htmlLiElement = createTagFunction<HTMLLIElement>('li');
-  export const htmlInputElement = createTagFunction<HTMLInputElement>('input');
-  export const htmlAElement = createTagFunction<HTMLAnchorElement>('a');
-  export const htmlPElement = createTagFunction<HTMLParagraphElement>('p');
-  export const htmlH1Element = createTagFunction<HTMLHeadingElement>('h1');
-  export const htmlH2Element = createTagFunction<HTMLHeadingElement>('h2');
-  export const htmlH3Element = createTagFunction<HTMLHeadingElement>('h3');
-  export const htmlH4Element = createTagFunction<HTMLHeadingElement>('h4');
-  export const htmlH5Element = createTagFunction<HTMLHeadingElement>('h5');
-  export const htmlH6Element = createTagFunction<HTMLHeadingElement>('h6');
-  export const htmlSectionElement = createTagFunction<HTMLElement>('section');
-  export const htmlArticleElement = createTagFunction<HTMLElement>('article');
-}
-
-export const htmlFragment = TemplateUtils.htmlFragment;
-export const textNode = TemplateUtils.textNode;
-export const commentNode = TemplateUtils.commentNode;
-export const createElement = TemplateUtils.createElement;
-export const htmlDivElement = TemplateUtils.htmlDivElement;
-export const htmlSpanElement = TemplateUtils.htmlSpanElement;
-export const htmlButtonElement = TemplateUtils.htmlButtonElement;
-export const htmlUlElement = TemplateUtils.htmlUlElement;
-export const htmlLiElement = TemplateUtils.htmlLiElement;
-export const htmlInputElement = TemplateUtils.htmlInputElement;
-export const htmlAElement = TemplateUtils.htmlAElement;
-export const htmlPElement = TemplateUtils.htmlPElement;
-export const htmlH1Element = TemplateUtils.htmlH1Element;
-export const htmlH2Element = TemplateUtils.htmlH2Element;
-export const htmlH3Element = TemplateUtils.htmlH3Element;
-export const htmlH4Element = TemplateUtils.htmlH4Element;
-export const htmlH5Element = TemplateUtils.htmlH5Element;
-export const htmlH6Element = TemplateUtils.htmlH6Element;
-export const htmlSectionElement = TemplateUtils.htmlSectionElement;
-export const htmlArticleElement = TemplateUtils.htmlArticleElement;