@dooboostore/simple-web-component 1.0.43 → 1.0.45

package/src/decorators/applyClass.ts

@@ -7,6 +7,73 @@ export const CLASS_METADATA_KEY = Symbol.for('simple-web-component:class');
 
 export type ClassAction = 'set' | 'update' | 'add' | 'remove' | 'toggle';
 
+/**
+ * Resolve selector to string or elements
+ * Handles function-based selectors and returns elements if applicable
+ */
+const resolveSelector = (selector: ClassSelector, inst: any, win: Window): string | HTMLElement[] => {
+  if (typeof selector === 'function') {
+    const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+    const result = selector(inst, hostSet);
+    
+    if (result instanceof win.Element) {
+      return [result as HTMLElement];
+    }
+    if (result instanceof win.NodeList) {
+      return Array.from(result) as HTMLElement[];
+    }
+    if (Array.isArray(result)) {
+      return result as HTMLElement[];
+    }
+    if (result === null) {
+      return [];
+    }
+    return result as string;
+  }
+  return selector as string;
+};
+
+/**
+ * Get target elements from selector
+ */
+const getTargetElements = (selector: ClassSelector, inst: any, win: Window, root: string): HTMLElement[] => {
+  const resolved = resolveSelector(selector, inst, win);
+  
+  if (Array.isArray(resolved)) {
+    return resolved;
+  }
+
+  const stringSelector = resolved as string;
+  const targetEls: HTMLElement[] = [];
+  const host = inst as unknown as HTMLElement;
+  const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+
+  const applyRoot = (t: any) => {
+    if (!t || !(t instanceof win.HTMLElement)) return;
+    targetEls.push(t);
+  };
+
+  if (stringSelector === '$this' || !stringSelector) applyRoot(host);
+  else if (stringSelector === '$host') applyRoot(hostSet.$host);
+  else if (stringSelector === '$parentHost') applyRoot(hostSet.$parentHost);
+  else if (stringSelector === '$appHost') applyRoot(hostSet.$appHost);
+  else if (stringSelector === '$firstHost') applyRoot(hostSet.$firstHost);
+  else if (stringSelector === '$lastHost') applyRoot(hostSet.$lastHost);
+  else if (stringSelector === '$firstAppHost') applyRoot(hostSet.$firstAppHost);
+  else if (stringSelector === '$lastAppHost') applyRoot(hostSet.$lastAppHost);
+  else if (stringSelector === '$hosts') hostSet.$hosts.forEach(applyRoot);
+  else if (stringSelector === '$appHosts') hostSet.$appHosts.forEach(applyRoot);
+  else {
+    const targetRoot = root === 'auto' ? (host.shadowRoot || host) : (root === 'shadow' ? host.shadowRoot : host);
+    if (targetRoot) {
+      const found = targetRoot.querySelectorAll(stringSelector);
+      if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+    }
+  }
+
+  return targetEls;
+};
+
 export interface ClassApplyOptions extends SwcQueryOptions {
   filter?: (target: HTMLElement, value: any, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
   /**
@@ -17,15 +84,17 @@ export interface ClassApplyOptions extends SwcQueryOptions {
   valueKey?: symbol | string;
 }
 
+export type ClassSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+
 export interface ClassApplyMetadata {
   propertyKey: string | symbol;
-  selector: string;
+  selector: ClassSelector;
   action: ClassAction;
   options: ClassApplyOptions;
 }
 
 function createClassDecorator(action: ClassAction) {
-  return (selector: string, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}): MethodDecorator => {
+  return (selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}): MethodDecorator => {
     return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
       const constructor = target.constructor;
       let metaList = ReflectUtils.getOwnMetadata(CLASS_METADATA_KEY, constructor) as Map<string | symbol, ClassApplyMetadata>;
@@ -72,30 +141,7 @@ function createClassDecorator(action: ClassAction) {
             const host = this as unknown as HTMLElement;
             const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
             const r = finalOptions.root || 'auto';
-            const targetEls: HTMLElement[] = [];
-
-            const applyRoot = (t: any) => {
-              if (!t || !(t instanceof win.HTMLElement)) return;
-              targetEls.push(t);
-            };
-
-            if (selector === '$this' || !selector) applyRoot(host);
-            else if (selector === '$host') applyRoot(hostSet.$host);
-            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 {
-              const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
-              if (targetRoot) {
-                  const found = targetRoot.querySelectorAll(selector);
-                  if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
-              }
-            }
+            const targetEls = getTargetElements(selector, this, win, r);
 
             targetEls.forEach(targetEl => {
               if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, {currentThis: this, helper: hostSet})) {
@@ -163,25 +209,99 @@ function createClassDecorator(action: ClassAction) {
   };
 }
 
-export function applyClass(selector: string, action: ClassAction = 'update', options: ClassApplyOptions = {}): MethodDecorator {
-  return createClassDecorator(action)(selector, options);
+export function applyClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function applyClass(selector: ClassSelector, action?: ClassAction, options?: ClassApplyOptions): MethodDecorator;
+export function applyClass(selectorOrTarget?: any, actionOrPropertyKey?: any, optionsOrDescriptor?: any): any {
+  // Bare decorator: @applyClass
+  if (optionsOrDescriptor !== undefined && (typeof actionOrPropertyKey === 'string' || typeof actionOrPropertyKey === 'symbol')) {
+    return createClassDecorator('update')('$this', {})(selectorOrTarget as Object, actionOrPropertyKey, optionsOrDescriptor as PropertyDescriptor);
+  }
+  // With selector
+  if (typeof selectorOrTarget === 'string') {
+    const action = (typeof actionOrPropertyKey === 'string' ? actionOrPropertyKey : 'update') as ClassAction;
+    const options = (typeof actionOrPropertyKey === 'object' ? actionOrPropertyKey : optionsOrDescriptor) as ClassApplyOptions | undefined;
+    return createClassDecorator(action)(selectorOrTarget, options);
+  }
+  // Without selector (defaults to $this)
+  const action = (typeof selectorOrTarget === 'string' ? selectorOrTarget : 'update') as ClassAction;
+  const options = (typeof selectorOrTarget === 'object' ? selectorOrTarget : actionOrPropertyKey) as ClassApplyOptions | undefined;
+  return createClassDecorator(action)('$this', options);
 }
 
-export const setClass = (selector: string, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('set')(selector, classMapOrOptions, options);
-export const updateClass = (selector: string, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('update')(selector, classMapOrOptions, options);
-export const addClass = (selector: string, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('add')(selector, classMapOrOptions, options);
-export const removeClass = (selector: string, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('remove')(selector, classMapOrOptions, options);
-export const toggleClass = (selector: string, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('toggle')(selector, classMapOrOptions, options);
+export function setClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function setClass(selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
+export function setClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?: any, optionsOrDescriptor?: any): any {
+  // Bare decorator: @setClass
+  if (optionsOrDescriptor !== undefined && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
+    return createClassDecorator('set')('$this', {})(selectorOrTarget as Object, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as PropertyDescriptor);
+  }
+  // With selector
+  if (typeof selectorOrTarget === 'string') {
+    return createClassDecorator('set')(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as ClassApplyOptions);
+  }
+  // Without selector (defaults to $this)
+  return createClassDecorator('set')('$this', selectorOrTarget as ClassApplyOptions);
+}
 
-// This versions
-export function applyClassThis(action: ClassAction = 'update', options: ClassApplyOptions = {}): MethodDecorator {
-  return createClassDecorator(action)('$this', options);
+export function updateClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function updateClass(selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
+export function updateClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?: any, optionsOrDescriptor?: any): any {
+  // Bare decorator: @updateClass
+  if (optionsOrDescriptor !== undefined && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
+    return createClassDecorator('update')('$this', {})(selectorOrTarget as Object, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as PropertyDescriptor);
+  }
+  // With selector
+  if (typeof selectorOrTarget === 'string') {
+    return createClassDecorator('update')(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as ClassApplyOptions);
+  }
+  // Without selector (defaults to $this)
+  return createClassDecorator('update')('$this', selectorOrTarget as ClassApplyOptions);
+}
+
+export function addClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function addClass(selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
+export function addClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?: any, optionsOrDescriptor?: any): any {
+  // Bare decorator: @addClass
+  if (optionsOrDescriptor !== undefined && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
+    return createClassDecorator('add')('$this', {})(selectorOrTarget as Object, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as PropertyDescriptor);
+  }
+  // With selector
+  if (typeof selectorOrTarget === 'string') {
+    return createClassDecorator('add')(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as ClassApplyOptions);
+  }
+  // Without selector (defaults to $this)
+  return createClassDecorator('add')('$this', selectorOrTarget as ClassApplyOptions);
+}
+
+export function removeClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function removeClass(selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
+export function removeClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?: any, optionsOrDescriptor?: any): any {
+  // Bare decorator: @removeClass
+  if (optionsOrDescriptor !== undefined && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
+    return createClassDecorator('remove')('$this', {})(selectorOrTarget as Object, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as PropertyDescriptor);
+  }
+  // With selector
+  if (typeof selectorOrTarget === 'string') {
+    return createClassDecorator('remove')(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as ClassApplyOptions);
+  }
+  // Without selector (defaults to $this)
+  return createClassDecorator('remove')('$this', selectorOrTarget as ClassApplyOptions);
+}
+
+export function toggleClass(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function toggleClass(selector: ClassSelector, classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options?: ClassApplyOptions): MethodDecorator;
+export function toggleClass(selectorOrTarget?: any, classMapOrOptionsOrPropertyKey?: any, optionsOrDescriptor?: any): any {
+  // Bare decorator: @toggleClass
+  if (optionsOrDescriptor !== undefined && (typeof classMapOrOptionsOrPropertyKey === 'string' || typeof classMapOrOptionsOrPropertyKey === 'symbol')) {
+    return createClassDecorator('toggle')('$this', {})(selectorOrTarget as Object, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as PropertyDescriptor);
+  }
+  // With selector
+  if (typeof selectorOrTarget === 'string') {
+    return createClassDecorator('toggle')(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor as ClassApplyOptions);
+  }
+  // Without selector (defaults to $this)
+  return createClassDecorator('toggle')('$this', selectorOrTarget as ClassApplyOptions);
 }
-export const setClassThis = (classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('set')('$this', classMapOrOptions, options);
-export const updateClassThis = (classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('update')('$this', classMapOrOptions, options);
-export const addClassThis = (classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('add')('$this', classMapOrOptions, options);
-export const removeClassThis = (classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('remove')('$this', classMapOrOptions, options);
-export const toggleClassThis = (classMapOrOptions?: string | { [className: string]: (el: HTMLElement, value: any, helper: HelperHostSet & { $this: any }) => boolean } | ClassApplyOptions, options: ClassApplyOptions = {}) => createClassDecorator('toggle')('$this', classMapOrOptions, options);
 
 export const findAllClassMetadata = (target: any): Map<string | symbol, ClassApplyMetadata> => {
   const result = new Map<string | symbol, ClassApplyMetadata>();