@uibit/number-increment 0.1.0 → 0.2.0

package/dist/frameworks/angular/index.ts

@@ -1,80 +1,89 @@
-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/number-increment';
 import type { NumberIncrement as HTMLElementClass } from '@uibit/number-increment';
-
 @Component({
-  selector: 'uibit-number-increment',
-  template: '<ng-content></ng-content>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  host: {
-    '(void)': 'void.emit($event)'
-  }
+    selector: 'uibit-number-increment',
+    template: '<ng-content></ng-content>',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    host: {
+        '(void)': 'void.emit($event)'
+    }
 })
 export class NgxNumberIncrement {
-  constructor(private el: ElementRef<HTMLElementClass>) {
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.value = this.value();
-      }
+    constructor(private el: ElementRef<HTMLElementClass>){
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.value = this.value();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.from = this.from();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.duration = this.duration();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.decimals = this.decimals();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.options = this.options();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.formatter = this.formatter();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.easing = this.easing();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.threshold = this.threshold();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.repeat = this.repeat();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.locale = this.locale();
+            }
+        });
+    }
+    readonly value = model<number>(0);
+    readonly from = input<number, any>(0, {
+        transform: numberAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.from = this.from();
-      }
+    readonly duration = input<number, any>(1800, {
+        transform: numberAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.duration = this.duration();
-      }
+    readonly decimals = input<number, any>(0, {
+        transform: numberAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.decimals = this.decimals();
-      }
+    readonly options = input<Intl.NumberFormatOptions | undefined>(undefined);
+    readonly formatter = input<(value: number) => string | undefined, any>(undefined, {
+        transform: numberAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.locale = this.locale();
-      }
+    readonly easing = input<'ease-out' | 'ease-in-out' | 'linear'>('ease-out');
+    readonly threshold = input<number, any>(0.2, {
+        transform: numberAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.options = this.options();
-      }
+    readonly repeat = input<boolean, any>(false, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.formatter = this.formatter();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.easing = this.easing();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.threshold = this.threshold();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.repeat = this.repeat();
-      }
-    });
-  }
-
-  readonly value = input<number, any>(0, { transform: numberAttribute });
-  readonly from = input<number, any>(0, { transform: numberAttribute });
-  readonly duration = input<number, any>(1800, { transform: numberAttribute });
-  readonly decimals = input<number, any>(0, { transform: numberAttribute });
-  readonly locale = input<string, any>('');
-  readonly options = input<Intl.NumberFormatOptions | undefined, any>(undefined);
-  readonly formatter = input<(value: number) => string | undefined, any>(0, { transform: numberAttribute });
-  readonly easing = input<'ease-out' | 'ease-in-out' | 'linear', any>('ease-out');
-  readonly threshold = input<number, any>(0.2, { transform: numberAttribute });
-  readonly repeat = input<boolean, any>(false, { transform: booleanAttribute });
-
-  readonly void = output<CustomEvent<any>>();
+    readonly locale = input<string>('');
+    readonly void = output<CustomEvent<any>>();
 }

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

@@ -4,7 +4,19 @@ import '@uibit/number-increment';
 declare global {
   namespace astroHTML.JSX {
     interface IntrinsicElements {
-      'uibit-number-increment': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+      'uibit-number-increment': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes & {
+      value?: number;
+      from?: number;
+      duration?: number;
+      decimals?: number;
+      options?: Intl.NumberFormatOptions | undefined;
+      formatter?: (value: number) => string | undefined;
+      easing?: 'ease-out' | 'ease-in-out' | 'linear';
+      threshold?: number;
+      repeat?: boolean;
+      locale?: string;
+      "on:void"?: (event: Event) => void;
+      };
     }
   }
 }

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

@@ -10,12 +10,14 @@ declare module 'preact' {
       from?: number;
       duration?: number;
       decimals?: number;
-      locale?: string;
       options?: Intl.NumberFormatOptions | undefined;
       formatter?: (value: number) => string | undefined;
       easing?: 'ease-out' | 'ease-in-out' | 'linear';
       threshold?: number;
       repeat?: boolean;
+      locale?: string;
+      onVoid?: (event: Event) => void;
+      "on:void"?: (event: Event) => void;
       };
     }
   }

package/dist/frameworks/react/index.ts

@@ -0,0 +1,165 @@
+import React, { useRef, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
+import type { NumberIncrement as HTMLElementClass } from '@uibit/number-increment';
+import '@uibit/number-increment';
+const useTypeOfLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export interface NumberIncrementProps extends Omit<React.HTMLAttributes<HTMLElementClass>, 'value' | 'from' | 'duration' | 'decimals' | 'options' | 'formatter' | 'easing' | 'threshold' | 'repeat' | 'locale' | 'onVoid'> {
+    children?: React.ReactNode;
+    value?: number;
+    from?: number;
+    duration?: number;
+    decimals?: number;
+    options?: Intl.NumberFormatOptions | undefined;
+    formatter?: (value: number) => string | undefined;
+    easing?: 'ease-out' | 'ease-in-out' | 'linear';
+    threshold?: number;
+    repeat?: boolean;
+    locale?: string;
+    onVoid?: (event: Event) => void;
+}
+export const NumberIncrement = ({ ref, children, ...props }: NumberIncrementProps & {
+    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.value !== undefined) {
+            (element as any).value = props.value;
+        }
+    }, [
+        props.value
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.from !== undefined) {
+            (element as any).from = props.from;
+        }
+    }, [
+        props.from
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.duration !== undefined) {
+            (element as any).duration = props.duration;
+        }
+    }, [
+        props.duration
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.decimals !== undefined) {
+            (element as any).decimals = props.decimals;
+        }
+    }, [
+        props.decimals
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.options !== undefined) {
+            (element as any).options = props.options;
+        }
+    }, [
+        props.options
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.formatter !== undefined) {
+            (element as any).formatter = props.formatter;
+        }
+    }, [
+        props.formatter
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.easing !== undefined) {
+            (element as any).easing = props.easing;
+        }
+    }, [
+        props.easing
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.threshold !== undefined) {
+            (element as any).threshold = props.threshold;
+        }
+    }, [
+        props.threshold
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.repeat !== undefined) {
+            (element as any).repeat = props.repeat;
+        }
+    }, [
+        props.repeat
+    ]);
+    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.onVoid) {
+                propsRef.current.onVoid(event as any);
+            }
+        };
+        element.addEventListener('void', handleEvent);
+        return ()=>{
+            element.removeEventListener('void', handleEvent);
+        };
+    }, []);
+    const domProps = {
+        ...props
+    };
+    const customPropNames = [
+        'value',
+        'from',
+        'duration',
+        'decimals',
+        'options',
+        'formatter',
+        'easing',
+        'threshold',
+        'repeat',
+        'locale',
+        'onVoid'
+    ];
+    for (const key of customPropNames){
+        delete (domProps as any)[key];
+    }
+    return React.createElement('uibit-number-increment', {
+        ref: innerRef,
+        ...domProps
+    }, children);
+};
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'uibit-number-increment': React.ClassAttributes<HTMLElementClass> & React.HTMLAttributes<HTMLElementClass> & {
+                    children?: React.ReactNode;
+                    class?: string;
+                    value?: number;
+                    from?: number;
+                    duration?: number;
+                    decimals?: number;
+                    options?: Intl.NumberFormatOptions | undefined;
+                    formatter?: (value: number) => string | undefined;
+                    easing?: 'ease-out' | 'ease-in-out' | 'linear';
+                    threshold?: number;
+                    repeat?: boolean;
+                    locale?: string;
+                    onVoid?: (event: CustomEvent<any>) => void;
+                };
+            }
+        }
+    }
+}

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

@@ -10,13 +10,13 @@ declare module 'solid-js' {
       from?: number;
       duration?: number;
       decimals?: number;
-      locale?: string;
       options?: Intl.NumberFormatOptions | undefined;
       formatter?: (value: number) => string | undefined;
       easing?: 'ease-out' | 'ease-in-out' | 'linear';
       threshold?: number;
       repeat?: boolean;
-      "on:void"?: (event: CustomEvent) => void;
+      locale?: string;
+      "on:void"?: (event: Event) => void;
       };
     }
   }

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

@@ -9,12 +9,14 @@ declare module '@stencil/core' {
     from?: number;
     duration?: number;
     decimals?: number;
-    locale?: string;
     options?: Intl.NumberFormatOptions | undefined;
     formatter?: (value: number) => string | undefined;
     easing?: 'ease-out' | 'ease-in-out' | 'linear';
     threshold?: number;
     repeat?: boolean;
+    locale?: string;
+    onVoid?: (event: Event) => void;
+    "on:void"?: (event: Event) => void;
       };
     }
   }

package/dist/frameworks/svelte/index.svelte

@@ -1,72 +1,122 @@
 <script lang="ts">
   import '@uibit/number-increment';
   import type { NumberIncrement as HTMLElementClass } from '@uibit/number-increment';
-  
-  let {
-    value = undefined,
-      from = undefined,
-      duration = undefined,
-      decimals = undefined,
-      locale = undefined,
-      options = undefined,
-      formatter = undefined,
-      easing = undefined,
-      threshold = undefined,
-      repeat = undefined,
-      children
+
+let {
+    value = $bindable(),
+    from = $bindable(),
+    duration = $bindable(),
+    decimals = $bindable(),
+    options = $bindable(),
+    formatter = $bindable(),
+    easing = $bindable(),
+    threshold = $bindable(),
+    repeat = $bindable(),
+    locale = $bindable(),
+    children,
+    ...restProps
   } = $props<{
-    children?: any;
+    children?: import('svelte').Snippet;
     value?: number;
     from?: number;
     duration?: number;
     decimals?: number;
-    locale?: string;
     options?: Intl.NumberFormatOptions | undefined;
     formatter?: (value: number) => string | undefined;
     easing?: 'ease-out' | 'ease-in-out' | 'linear';
     threshold?: number;
     repeat?: boolean;
-  
+    locale?: string;
+
+    [key: string]: any;
   }>();
-  
-  let elementRef: HTMLElementClass | null = $state(null);
-  
-  $effect(() => {
-    if (elementRef && value !== undefined) {
+
+let elementRef: HTMLElementClass | null = $state(null);
+
+$effect(() => {
+    if (elementRef && value !== undefined && elementRef.value !== value) {
       elementRef.value = value;
     }
-    if (elementRef && from !== undefined) {
+    if (elementRef && from !== undefined && elementRef.from !== from) {
       elementRef.from = from;
     }
-    if (elementRef && duration !== undefined) {
+    if (elementRef && duration !== undefined && elementRef.duration !== duration) {
       elementRef.duration = duration;
     }
-    if (elementRef && decimals !== undefined) {
+    if (elementRef && decimals !== undefined && elementRef.decimals !== decimals) {
       elementRef.decimals = decimals;
     }
-    if (elementRef && locale !== undefined) {
-      elementRef.locale = locale;
-    }
-    if (elementRef && options !== undefined) {
+    if (elementRef && options !== undefined && elementRef.options !== options) {
       elementRef.options = options;
     }
-    if (elementRef && formatter !== undefined) {
+    if (elementRef && formatter !== undefined && elementRef.formatter !== formatter) {
       elementRef.formatter = formatter;
     }
-    if (elementRef && easing !== undefined) {
+    if (elementRef && easing !== undefined && elementRef.easing !== easing) {
       elementRef.easing = easing;
     }
-    if (elementRef && threshold !== undefined) {
+    if (elementRef && threshold !== undefined && elementRef.threshold !== threshold) {
       elementRef.threshold = threshold;
     }
-    if (elementRef && repeat !== undefined) {
+    if (elementRef && repeat !== undefined && elementRef.repeat !== repeat) {
       elementRef.repeat = repeat;
     }
+    if (elementRef && locale !== undefined && elementRef.locale !== locale) {
+      elementRef.locale = locale;
+    }
+  });
+
+$effect(() => {
+    const element = elementRef;
+    if (!element) return;
+
+    const handleEvent = () => {
+      if (value !== element.value) {
+        value = element.value as any;
+      }
+      if (from !== element.from) {
+        from = element.from as any;
+      }
+      if (duration !== element.duration) {
+        duration = element.duration as any;
+      }
+      if (decimals !== element.decimals) {
+        decimals = element.decimals as any;
+      }
+      if (options !== element.options) {
+        options = element.options as any;
+      }
+      if (formatter !== element.formatter) {
+        formatter = element.formatter as any;
+      }
+      if (easing !== element.easing) {
+        easing = element.easing as any;
+      }
+      if (threshold !== element.threshold) {
+        threshold = element.threshold as any;
+      }
+      if (repeat !== element.repeat) {
+        repeat = element.repeat as any;
+      }
+      if (locale !== element.locale) {
+        locale = element.locale as any;
+      }
+    };
+
+    const events = ['change', 'input', 'void'];
+    for (const event of events) {
+      element.addEventListener(event, handleEvent);
+    }
+    return () => {
+      for (const event of events) {
+        element.removeEventListener(event, handleEvent);
+      }
+    };
   });
-  
+
 </script>
 
-<uibit-number-increment bind:this={elementRef} {...$$restProps}>
+<uibit-number-increment bind:this={elementRef} {...restProps}>
 
   {#if children}
     {@render children()}