@uibit/effect-trigger 0.1.0 → 0.2.0

package/dist/frameworks/angular/index.ts

@@ -1,87 +1,98 @@
-import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, booleanAttribute, numberAttribute } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ElementRef, model, input, effect, output, booleanAttribute, numberAttribute } from '@angular/core';
 import '@uibit/effect-trigger';
 import type { EffectTrigger as HTMLElementClass } from '@uibit/effect-trigger';
 import type { EffectTriggerType, EffectBehaviorType } from '@uibit/effect-trigger';
-
 @Component({
-  selector: 'uibit-effect-trigger',
-  template: '<ng-content></ng-content>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  host: {
-    '(uibit-particle-create)': 'uibitParticleCreate.emit($event)'
-  }
+    selector: 'uibit-effect-trigger',
+    template: '<ng-content></ng-content>',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    host: {
+        '(uibit-particle-create)': 'uibitParticleCreate.emit($event); trigger.set($event.detail?.trigger !== undefined ? $event.detail.trigger : $event.target.trigger)'
+    }
 })
 export class NgxEffectTrigger {
-  constructor(private el: ElementRef<HTMLElementClass>) {
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.trigger = this.trigger();
-      }
+    constructor(private el: ElementRef<HTMLElementClass>){
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.trigger = this.trigger();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.behavior = this.behavior();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.density = this.density();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.velocity = this.velocity();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.randomize = this.randomize();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.stagger = this.stagger();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.scaleRange = this.scaleRange();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.rotationRange = this.rotationRange();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.keyframes = this.keyframes();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.targetSelector = this.targetSelector();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.destinationSelector = this.destinationSelector();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.locale = this.locale();
+            }
+        });
+    }
+    readonly trigger = model<EffectTriggerType>('click');
+    readonly behavior = input<EffectBehaviorType>('float-displace');
+    readonly density = input<number, any>(1, {
+        transform: numberAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.behavior = this.behavior();
-      }
+    readonly velocity = input<string>('1s');
+    readonly randomize = input<boolean, any>(false, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.density = this.density();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.velocity = this.velocity();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.randomize = this.randomize();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.stagger = this.stagger();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.scaleRange = this.scaleRange();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.rotationRange = this.rotationRange();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.keyframes = this.keyframes();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.targetSelector = this.targetSelector();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.destinationSelector = this.destinationSelector();
-      }
-    });
-  }
-
-  readonly trigger = input<EffectTriggerType, any>('click');
-  readonly behavior = input<EffectBehaviorType, any>('float-displace');
-  readonly density = input<number, any>(1, { transform: numberAttribute });
-  readonly velocity = input<string, any>('1s');
-  readonly randomize = input<boolean, any>(false, { transform: booleanAttribute });
-  readonly stagger = input<string, any>('0ms');
-  readonly scaleRange = input<string, any>('0.5,1.5');
-  readonly rotationRange = input<string, any>('-180,180');
-  readonly keyframes = input<string | undefined, any>('');
-  readonly targetSelector = input<string | undefined, any>('');
-  readonly destinationSelector = input<string | undefined, any>('');
-
-  readonly uibitParticleCreate = output<CustomEvent<{ particle: HTMLElement, index: number, trigger: string }>>();
+    readonly stagger = input<string>('0ms');
+    readonly scaleRange = input<string>('0.5,1.5');
+    readonly rotationRange = input<string>('-180,180');
+    readonly keyframes = input<string | undefined>(undefined);
+    readonly targetSelector = input<string | undefined>(undefined);
+    readonly destinationSelector = input<string | undefined>(undefined);
+    readonly locale = input<string>('');
+    readonly uibitParticleCreate = output<CustomEvent<{
+        particle: HTMLElement;
+        index: number;
+        trigger: string;
+    }>>();
 }

package/dist/frameworks/astro/index.d.ts

@@ -1,10 +1,25 @@
 import type { EffectTrigger as HTMLElementClass } from '@uibit/effect-trigger';
 import '@uibit/effect-trigger';
+import type { EffectTriggerType, EffectBehaviorType } from '@uibit/effect-trigger';
 
 declare global {
   namespace astroHTML.JSX {
     interface IntrinsicElements {
-      'uibit-effect-trigger': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+      'uibit-effect-trigger': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes & {
+      trigger?: EffectTriggerType;
+      behavior?: EffectBehaviorType;
+      density?: number;
+      velocity?: string;
+      randomize?: boolean;
+      stagger?: string;
+      scaleRange?: string;
+      rotationRange?: string;
+      keyframes?: string | undefined;
+      targetSelector?: string | undefined;
+      destinationSelector?: string | undefined;
+      locale?: string;
+      "on:uibit-particle-create"?: (event: CustomEvent<{ particle: HTMLElement, index: number, trigger: string }>) => void;
+      };
     }
   }
 }

package/dist/frameworks/preact/index.d.ts

@@ -18,6 +18,9 @@ declare module 'preact' {
       keyframes?: string | undefined;
       targetSelector?: string | undefined;
       destinationSelector?: string | undefined;
+      locale?: string;
+      onUibitParticleCreate?: (event: CustomEvent<{ particle: HTMLElement, index: number, trigger: string }>) => void;
+      "on:uibit-particle-create"?: (event: CustomEvent<{ particle: HTMLElement, index: number, trigger: string }>) => void;
       };
     }
   }

package/dist/frameworks/react/index.ts

@@ -0,0 +1,196 @@
+import React, { useRef, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
+import type { EffectTrigger as HTMLElementClass } from '@uibit/effect-trigger';
+import '@uibit/effect-trigger';
+import type { EffectTriggerType, EffectBehaviorType } from '@uibit/effect-trigger';
+const useTypeOfLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export interface EffectTriggerProps extends Omit<React.HTMLAttributes<HTMLElementClass>, 'trigger' | 'behavior' | 'density' | 'velocity' | 'randomize' | 'stagger' | 'scaleRange' | 'rotationRange' | 'keyframes' | 'targetSelector' | 'destinationSelector' | 'locale' | 'onUibitParticleCreate'> {
+    children?: React.ReactNode;
+    trigger?: EffectTriggerType;
+    behavior?: EffectBehaviorType;
+    density?: number;
+    velocity?: string;
+    randomize?: boolean;
+    stagger?: string;
+    scaleRange?: string;
+    rotationRange?: string;
+    keyframes?: string | undefined;
+    targetSelector?: string | undefined;
+    destinationSelector?: string | undefined;
+    locale?: string;
+    onUibitParticleCreate?: (event: CustomEvent<{
+        particle: HTMLElement;
+        index: number;
+        trigger: string;
+    }>) => void;
+}
+export const EffectTrigger = ({ ref, children, ...props }: EffectTriggerProps & {
+    ref?: React.Ref<HTMLElementClass>;
+})=>{
+    const innerRef = useRef<HTMLElementClass>(null);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    useImperativeHandle(ref, ()=>innerRef.current!);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.trigger !== undefined) {
+            (element as any).trigger = props.trigger;
+        }
+    }, [
+        props.trigger
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.behavior !== undefined) {
+            (element as any).behavior = props.behavior;
+        }
+    }, [
+        props.behavior
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.density !== undefined) {
+            (element as any).density = props.density;
+        }
+    }, [
+        props.density
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.velocity !== undefined) {
+            (element as any).velocity = props.velocity;
+        }
+    }, [
+        props.velocity
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.randomize !== undefined) {
+            (element as any).randomize = props.randomize;
+        }
+    }, [
+        props.randomize
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.stagger !== undefined) {
+            (element as any).stagger = props.stagger;
+        }
+    }, [
+        props.stagger
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.scaleRange !== undefined) {
+            (element as any).scaleRange = props.scaleRange;
+        }
+    }, [
+        props.scaleRange
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.rotationRange !== undefined) {
+            (element as any).rotationRange = props.rotationRange;
+        }
+    }, [
+        props.rotationRange
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.keyframes !== undefined) {
+            (element as any).keyframes = props.keyframes;
+        }
+    }, [
+        props.keyframes
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.targetSelector !== undefined) {
+            (element as any).targetSelector = props.targetSelector;
+        }
+    }, [
+        props.targetSelector
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.destinationSelector !== undefined) {
+            (element as any).destinationSelector = props.destinationSelector;
+        }
+    }, [
+        props.destinationSelector
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.locale !== undefined) {
+            (element as any).locale = props.locale;
+        }
+    }, [
+        props.locale
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (!element) return;
+        const handleEvent = (event: Event)=>{
+            if (propsRef.current.onUibitParticleCreate) {
+                propsRef.current.onUibitParticleCreate(event as any);
+            }
+        };
+        element.addEventListener('uibit-particle-create', handleEvent);
+        return ()=>{
+            element.removeEventListener('uibit-particle-create', handleEvent);
+        };
+    }, []);
+    const domProps = {
+        ...props
+    };
+    const customPropNames = [
+        'trigger',
+        'behavior',
+        'density',
+        'velocity',
+        'randomize',
+        'stagger',
+        'scaleRange',
+        'rotationRange',
+        'keyframes',
+        'targetSelector',
+        'destinationSelector',
+        'locale',
+        'onUibitParticleCreate'
+    ];
+    for (const key of customPropNames){
+        delete (domProps as any)[key];
+    }
+    return React.createElement('uibit-effect-trigger', {
+        ref: innerRef,
+        ...domProps
+    }, children);
+};
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'uibit-effect-trigger': React.ClassAttributes<HTMLElementClass> & React.HTMLAttributes<HTMLElementClass> & {
+                    children?: React.ReactNode;
+                    class?: string;
+                    trigger?: EffectTriggerType;
+                    behavior?: EffectBehaviorType;
+                    density?: number;
+                    velocity?: string;
+                    randomize?: boolean;
+                    stagger?: string;
+                    scaleRange?: string;
+                    rotationRange?: string;
+                    keyframes?: string | undefined;
+                    targetSelector?: string | undefined;
+                    destinationSelector?: string | undefined;
+                    locale?: string;
+                    onUibitParticleCreate?: (event: CustomEvent<{
+                        particle: HTMLElement;
+                        index: number;
+                        trigger: string;
+                    }>) => void;
+                };
+            }
+        }
+    }
+}

package/dist/frameworks/solid/index.d.ts

@@ -18,7 +18,8 @@ declare module 'solid-js' {
       keyframes?: string | undefined;
       targetSelector?: string | undefined;
       destinationSelector?: string | undefined;
-      "on:uibit-particle-create"?: (event: CustomEvent) => void;
+      locale?: string;
+      "on:uibit-particle-create"?: (event: CustomEvent<{ particle: HTMLElement, index: number, trigger: string }>) => void;
       };
     }
   }

package/dist/frameworks/stencil/index.d.ts

@@ -17,6 +17,9 @@ declare module '@stencil/core' {
     keyframes?: string | undefined;
     targetSelector?: string | undefined;
     destinationSelector?: string | undefined;
+    locale?: string;
+    onUibitParticleCreate?: (event: CustomEvent<{ particle: HTMLElement, index: number, trigger: string }>) => void;
+    "on:uibit-particle-create"?: (event: CustomEvent<{ particle: HTMLElement, index: number, trigger: string }>) => void;
       };
     }
   }

package/dist/frameworks/svelte/index.svelte

@@ -2,22 +2,24 @@
   import '@uibit/effect-trigger';
   import type { EffectTrigger as HTMLElementClass } from '@uibit/effect-trigger';
   import type { EffectTriggerType, EffectBehaviorType } from '@uibit/effect-trigger';
-  
-  let {
-    trigger = undefined,
-      behavior = undefined,
-      density = undefined,
-      velocity = undefined,
-      randomize = undefined,
-      stagger = undefined,
-      scaleRange = undefined,
-      rotationRange = undefined,
-      keyframes = undefined,
-      targetSelector = undefined,
-      destinationSelector = undefined,
-      children
+
+let {
+    trigger = $bindable(),
+    behavior = $bindable(),
+    density = $bindable(),
+    velocity = $bindable(),
+    randomize = $bindable(),
+    stagger = $bindable(),
+    scaleRange = $bindable(),
+    rotationRange = $bindable(),
+    keyframes = $bindable(),
+    targetSelector = $bindable(),
+    destinationSelector = $bindable(),
+    locale = $bindable(),
+    children,
+    ...restProps
   } = $props<{
-    children?: any;
+    children?: import('svelte').Snippet;
     trigger?: EffectTriggerType;
     behavior?: EffectBehaviorType;
     density?: number;
@@ -29,50 +31,109 @@
     keyframes?: string | undefined;
     targetSelector?: string | undefined;
     destinationSelector?: string | undefined;
-  
+    locale?: string;
+
+    [key: string]: any;
   }>();
-  
-  let elementRef: HTMLElementClass | null = $state(null);
-  
-  $effect(() => {
-    if (elementRef && trigger !== undefined) {
+
+let elementRef: HTMLElementClass | null = $state(null);
+
+$effect(() => {
+    if (elementRef && trigger !== undefined && elementRef.trigger !== trigger) {
       elementRef.trigger = trigger;
     }
-    if (elementRef && behavior !== undefined) {
+    if (elementRef && behavior !== undefined && elementRef.behavior !== behavior) {
       elementRef.behavior = behavior;
     }
-    if (elementRef && density !== undefined) {
+    if (elementRef && density !== undefined && elementRef.density !== density) {
       elementRef.density = density;
     }
-    if (elementRef && velocity !== undefined) {
+    if (elementRef && velocity !== undefined && elementRef.velocity !== velocity) {
       elementRef.velocity = velocity;
     }
-    if (elementRef && randomize !== undefined) {
+    if (elementRef && randomize !== undefined && elementRef.randomize !== randomize) {
       elementRef.randomize = randomize;
     }
-    if (elementRef && stagger !== undefined) {
+    if (elementRef && stagger !== undefined && elementRef.stagger !== stagger) {
       elementRef.stagger = stagger;
     }
-    if (elementRef && scaleRange !== undefined) {
+    if (elementRef && scaleRange !== undefined && elementRef.scaleRange !== scaleRange) {
       elementRef.scaleRange = scaleRange;
     }
-    if (elementRef && rotationRange !== undefined) {
+    if (elementRef && rotationRange !== undefined && elementRef.rotationRange !== rotationRange) {
       elementRef.rotationRange = rotationRange;
     }
-    if (elementRef && keyframes !== undefined) {
+    if (elementRef && keyframes !== undefined && elementRef.keyframes !== keyframes) {
       elementRef.keyframes = keyframes;
     }
-    if (elementRef && targetSelector !== undefined) {
+    if (elementRef && targetSelector !== undefined && elementRef.targetSelector !== targetSelector) {
       elementRef.targetSelector = targetSelector;
     }
-    if (elementRef && destinationSelector !== undefined) {
+    if (elementRef && destinationSelector !== undefined && elementRef.destinationSelector !== destinationSelector) {
       elementRef.destinationSelector = destinationSelector;
     }
+    if (elementRef && locale !== undefined && elementRef.locale !== locale) {
+      elementRef.locale = locale;
+    }
   });
-  
+
+$effect(() => {
+    const element = elementRef;
+    if (!element) return;
+
+    const handleEvent = () => {
+      if (trigger !== element.trigger) {
+        trigger = element.trigger as any;
+      }
+      if (behavior !== element.behavior) {
+        behavior = element.behavior as any;
+      }
+      if (density !== element.density) {
+        density = element.density as any;
+      }
+      if (velocity !== element.velocity) {
+        velocity = element.velocity as any;
+      }
+      if (randomize !== element.randomize) {
+        randomize = element.randomize as any;
+      }
+      if (stagger !== element.stagger) {
+        stagger = element.stagger as any;
+      }
+      if (scaleRange !== element.scaleRange) {
+        scaleRange = element.scaleRange as any;
+      }
+      if (rotationRange !== element.rotationRange) {
+        rotationRange = element.rotationRange as any;
+      }
+      if (keyframes !== element.keyframes) {
+        keyframes = element.keyframes as any;
+      }
+      if (targetSelector !== element.targetSelector) {
+        targetSelector = element.targetSelector as any;
+      }
+      if (destinationSelector !== element.destinationSelector) {
+        destinationSelector = element.destinationSelector as any;
+      }
+      if (locale !== element.locale) {
+        locale = element.locale as any;
+      }
+    };
+
+    const events = ['change', 'input', 'uibit-particle-create'];
+    for (const event of events) {
+      element.addEventListener(event, handleEvent);
+    }
+    return () => {
+      for (const event of events) {
+        element.removeEventListener(event, handleEvent);
+      }
+    };
+  });
+
 </script>
 
-<uibit-effect-trigger bind:this={elementRef} {...$$restProps}>
+<uibit-effect-trigger bind:this={elementRef} {...restProps}>
 
   {#if children}
     {@render children()}