@dooboostore/simple-web-component 1.0.44 → 1.0.45

package/src/decorators/queryAll.ts

@@ -1,29 +1,44 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { getElementConfig, ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
+import { SwcQueryOptions, HelperHostSet } from '../types';
+
+export interface QueryAllOptions extends SwcQueryOptions {
+  /**
+   * Filter function to determine whether to include the element.
+   * If it returns false, the element is skipped.
+   */
+  filter?: (target: HTMLElement, meta: { currentThis: any, helper: HelperHostSet }) => boolean;
+}
 
 export interface QueryAllMetadata {
   propertyKey: string | symbol;
-  selector: string;
-  options: SwcQueryOptions;
+  selector: string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+  options: QueryAllOptions;
 }
 
 export const QUERY_ALL_METADATA_KEY = Symbol.for('simple-web-component:query-all');
 
 export function queryAll(target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor): PropertyDescriptor | void;
-export function queryAll(selector: string, options?: SwcQueryOptions): PropertyDecorator;
-export function queryAll(options?: SwcQueryOptions): PropertyDecorator;
+export function queryAll(selector: string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null), options?: QueryAllOptions): PropertyDecorator;
+export function queryAll(options?: QueryAllOptions): PropertyDecorator;
 /**
  * @queryAll decorator to inject a list of elements into a class property.
+ * 
+ * Supports both string selectors and function-based selectors:
+ * - String selector: @queryAll('.item')
+ * - Function selector: @queryAll((currentThis, helper) => currentThis.shadowRoot?.querySelectorAll('.item'))
+ * 
+ * Supports filtering:
+ * - @queryAll('.item', { filter: (target, meta) => target.hasAttribute('active') })
  */
-export function queryAll(selectorOrTarget?: string | Object, optionsOrPropertyKey?: SwcQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+export function queryAll(selectorOrTarget?: string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null) | Object, optionsOrPropertyKey?: QueryAllOptions | string | symbol, descriptor?: PropertyDescriptor): any {
   // Bare decorator: @queryAll
   if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
     throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(optionsOrPropertyKey)})`);
   }
   // With selector
-  if (typeof selectorOrTarget === 'string') {
+  if (typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') {
     return (targetObj: Object, propertyKey: string | symbol, descriptor?: never): void => {
       if (descriptor !== undefined) {
         throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
@@ -35,78 +50,123 @@ export function queryAll(selectorOrTarget?: string | Object, optionsOrPropertyKe
         queries = [];
         ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
       }
-      queries.push({ propertyKey, selector: selectorOrTarget, options: optionsOrPropertyKey as SwcQueryOptions || {} });
+      queries.push({ propertyKey, selector: selectorOrTarget as any, options: optionsOrPropertyKey as QueryAllOptions || {} });
 
       Object.defineProperty(targetObj, propertyKey, {
         get(this: HTMLElement) {
           ensureInit(this);
-          const selector = selectorOrTarget;
-
-          const r = (optionsOrPropertyKey as SwcQueryOptions)?.root || 'auto';
-          const applyRoot = (t: any): any[] => {
-            if (!t) return [];
-            const items = Array.isArray(t) ? t : [t];
-            const results: any[] = [];
-            items.forEach(it => {
-              if (!(it instanceof HTMLElement)) {
-                results.push(it);
-                return;
-              }
-              if (r === 'auto') results.push(it.shadowRoot || it);
-              else {
-                if (r === 'light' || r === 'all') results.push(it);
-                if ((r === 'shadow' || r === 'all') && it.shadowRoot) results.push(it.shadowRoot);
-              }
-            });
-            return results;
-          };
-
-          // --- Special Selectors: HostSet ---
-          const hostSet = SwcUtils.getHostSet(this);
-          if (selector === '$hosts') return applyRoot(hostSet.$hosts);
-          if (selector === '$appHosts') return applyRoot(hostSet.$appHosts);
-          if (selector === '$host') return applyRoot(hostSet.$host);
-          if (selector === '$parentHost') return applyRoot(hostSet.$parentHost);
-          if (selector === '$appHost') return applyRoot(hostSet.$appHost);
-          if (selector === '$firstHost') return applyRoot(hostSet.$firstHost);
-          if (selector === '$lastHost') return applyRoot(hostSet.$lastHost);
-          if (selector === '$firstAppHost') return applyRoot(hostSet.$firstAppHost);
-          if (selector === '$lastAppHost') return applyRoot(hostSet.$lastAppHost);
-
-          // --- Special Selectors: Env ---
           const config = getElementConfig(this);
           const win = config?.window || window;
-          if (selector === '$window') return [win];
-          if (selector === '$document') return [win.document];
-          if (selector === '$this') return applyRoot(this);
+          const hostSet = SwcUtils.getHelperAndHostSet(win, this);
+          
+          // Resolve selector - can be string or function
+          let resolvedSelector: string;
+          let resolvedElements: HTMLElement[] = [];
+          
+          if (typeof selectorOrTarget === 'function') {
+            const result = (selectorOrTarget as any)(this, hostSet);
+            // If function returns NodeList or Element[], convert to array
+            if (result instanceof win.NodeList) {
+              resolvedElements = Array.from(result).filter(el => el instanceof win.HTMLElement) as HTMLElement[];
+            } else if (Array.isArray(result)) {
+              resolvedElements = result.filter(el => el instanceof win.HTMLElement) as HTMLElement[];
+            }
+          } else {
+            resolvedSelector = selectorOrTarget;
 
-          // --- Standard Selectors ---
-          if (r === 'shadow') return this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
-          if (r === 'light') return Array.from(this.querySelectorAll(selector));
-          if (r === 'all') {
-            const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
-            const lNodes = Array.from(this.querySelectorAll(selector));
-            return [...sNodes, ...lNodes];
+            const r = (optionsOrPropertyKey as QueryAllOptions)?.root || 'auto';
+            const applyRoot = (t: any): any[] => {
+              if (!t) return [];
+              const items = Array.isArray(t) ? t : [t];
+              const results: any[] = [];
+              items.forEach(it => {
+                if (!(it instanceof HTMLElement)) {
+                  results.push(it);
+                  return;
+                }
+                if (r === 'auto') results.push(it.shadowRoot || it);
+                else {
+                  if (r === 'light' || r === 'all') results.push(it);
+                  if ((r === 'shadow' || r === 'all') && it.shadowRoot) results.push(it.shadowRoot);
+                }
+              });
+              return results;
+            };
+
+            // --- Special Selectors: HostSet ---
+            if (resolvedSelector === '$hosts') resolvedElements = applyRoot(hostSet.$hosts).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$appHosts') resolvedElements = applyRoot(hostSet.$appHosts).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$host') resolvedElements = applyRoot(hostSet.$host).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$parentHost') resolvedElements = applyRoot(hostSet.$parentHost).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$appHost') resolvedElements = applyRoot(hostSet.$appHost).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$firstHost') resolvedElements = applyRoot(hostSet.$firstHost).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$lastHost') resolvedElements = applyRoot(hostSet.$lastHost).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$firstAppHost') resolvedElements = applyRoot(hostSet.$firstAppHost).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$lastAppHost') resolvedElements = applyRoot(hostSet.$lastAppHost).filter(el => el instanceof HTMLElement);
+            // --- Special Selectors: Env ---
+            else if (resolvedSelector === '$window') return [win];
+            else if (resolvedSelector === '$document') return [win.document];
+            else if (resolvedSelector === '$this') resolvedElements = applyRoot(this).filter(el => el instanceof HTMLElement);
+            // --- Standard Selectors ---
+            else {
+              if (r === 'shadow') resolvedElements = this.shadowRoot ? (Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) as HTMLElement[]) : [];
+              else if (r === 'light') resolvedElements = Array.from(this.querySelectorAll(resolvedSelector)) as HTMLElement[];
+              else if (r === 'all') {
+                const sNodes = this.shadowRoot ? (Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) as HTMLElement[]) : [];
+                const lNodes = Array.from(this.querySelectorAll(resolvedSelector)) as HTMLElement[];
+                resolvedElements = [...sNodes, ...lNodes];
+              }
+              else resolvedElements = (Array.from((this.shadowRoot || this).querySelectorAll(resolvedSelector)) as HTMLElement[]);
+            }
           }
-          const root = this.shadowRoot || this;
-          return Array.from(root.querySelectorAll(selector));
+
+          // Apply filter if provided
+          if ((optionsOrPropertyKey as QueryAllOptions)?.filter) {
+            resolvedElements = resolvedElements.filter(el => {
+              if (!(el instanceof win.HTMLElement)) return true;
+              return (optionsOrPropertyKey as QueryAllOptions).filter!(el, { currentThis: this, helper: hostSet });
+            });
+          }
+
+          return resolvedElements;
         },
         set(this: HTMLElement, nv: any) {
           ensureInit(this);
           if (nv === null || nv === undefined || (Array.isArray(nv) && nv.length === 0)) {
-            const selector = selectorOrTarget;
-            if (selector.startsWith('$') && selector !== '$this') return;
+            const config = getElementConfig(this);
+            const win = config?.window || window;
+            const hostSet = SwcUtils.getHelperAndHostSet(win, this);
+            
+            // Resolve selector - can be string or function
+            if (typeof selectorOrTarget === 'function') {
+              // Get elements from function and remove them
+              const result = (selectorOrTarget as any)(this, hostSet);
+              if (result instanceof win.NodeList) {
+                Array.from(result).forEach(el => {
+                  if (el instanceof win.Element) (el as Element).remove();
+                });
+              } else if (Array.isArray(result)) {
+                result.forEach(el => {
+                  if (el instanceof win.Element) (el as Element).remove();
+                });
+              }
+              return;
+            }
+            
+            const resolvedSelector = selectorOrTarget;
+            
+            if (resolvedSelector.startsWith('$') && resolvedSelector !== '$this') return;
 
             const r = (optionsOrPropertyKey as SwcQueryOptions)?.root || 'auto';
             let targets: (Element | Node)[] = [];
-            if (r === 'shadow') targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
-            else if (r === 'light') targets = Array.from(this.querySelectorAll(selector));
+            if (r === 'shadow') targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
+            else if (r === 'light') targets = Array.from(this.querySelectorAll(resolvedSelector));
             else if (r === 'all') {
-              const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
-              const lNodes = Array.from(this.querySelectorAll(selector));
+              const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
+              const lNodes = Array.from(this.querySelectorAll(resolvedSelector));
               targets = [...sNodes, ...lNodes];
             } else {
-              targets = Array.from((this.shadowRoot || this).querySelectorAll(selector));
+              targets = Array.from((this.shadowRoot || this).querySelectorAll(resolvedSelector));
             }
             targets.forEach(t => (t as Element).remove());
           }

package/src/types/window.d.ts

@@ -5,6 +5,9 @@ import {HTMLDialogElement} from "@dooboostore/dom-parser";
  */
 declare global {
   interface Window {
+    Node: typeof Node;
+    NodeList: typeof NodeList;
+    Element: typeof Element;
     HTMLElement: typeof HTMLElement;
     HTMLDivElement: typeof HTMLDivElement;
     HTMLButtonElement: typeof HTMLButtonElement;