@uibit/hotspot 0.1.1 → 0.2.0

package/dist/frameworks/angular/index.ts

@@ -2,44 +2,43 @@ import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output,
 import '@uibit/hotspot';
 import type { Hotspot as HTMLElementClass } from '@uibit/hotspot';
 import type { HotspotItem } from '@uibit/hotspot';
-
 @Component({
-  selector: 'uibit-hotspot',
-  template: '<ng-content></ng-content>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  host: {
-    '(hotspot-click)': 'hotspotClick.emit($event)'
-  }
+    selector: 'uibit-hotspot',
+    template: '<ng-content></ng-content>',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    host: {
+        '(hotspot-click)': 'hotspotClick.emit($event)'
+    }
 })
 export class NgxHotspot {
-  constructor(private el: ElementRef<HTMLElementClass>) {
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.hotspots = this.hotspots();
-      }
+    constructor(private el: ElementRef<HTMLElementClass>){
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.hotspots = this.hotspots();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.interactive = this.interactive();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.trigger = this.trigger();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.locale = this.locale();
+            }
+        });
+    }
+    readonly hotspots = input<HotspotItem[]>([]);
+    readonly interactive = input<boolean, any>(true, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.interactive = this.interactive();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.trigger = this.trigger();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.locale = this.locale();
-      }
-    });
-  }
-
-  readonly hotspots = input<HotspotItem[], any>([]);
-  readonly interactive = input<boolean, any>(true, { transform: booleanAttribute });
-  readonly trigger = input<'click' | 'hover', any>('click');
-  readonly locale = input<string, any>('');
-
-  readonly hotspotClick = output<CustomEvent<HotspotItem>>();
+    readonly trigger = input<'click' | 'hover'>('click');
+    readonly locale = input<string>('');
+    readonly hotspotClick = output<CustomEvent<HotspotItem>>();
 }

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

@@ -1,10 +1,17 @@
 import type { Hotspot as HTMLElementClass } from '@uibit/hotspot';
 import '@uibit/hotspot';
+import type { HotspotItem } from '@uibit/hotspot';
 
 declare global {
   namespace astroHTML.JSX {
     interface IntrinsicElements {
-      'uibit-hotspot': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+      'uibit-hotspot': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes & {
+      hotspots?: HotspotItem[];
+      interactive?: boolean;
+      trigger?: 'click' | 'hover';
+      locale?: string;
+      "on:hotspot-click"?: (event: CustomEvent<HotspotItem>) => void;
+      };
     }
   }
 }

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

@@ -11,6 +11,8 @@ declare module 'preact' {
       interactive?: boolean;
       trigger?: 'click' | 'hover';
       locale?: string;
+      onHotspotClick?: (event: CustomEvent<HotspotItem>) => void;
+      "on:hotspot-click"?: (event: CustomEvent<HotspotItem>) => void;
       };
     }
   }

package/dist/frameworks/react/index.ts

@@ -0,0 +1,100 @@
+import React, { useRef, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
+import type { Hotspot as HTMLElementClass } from '@uibit/hotspot';
+import '@uibit/hotspot';
+import type { HotspotItem } from '@uibit/hotspot';
+const useTypeOfLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export interface HotspotProps extends Omit<React.HTMLAttributes<HTMLElementClass>, 'hotspots' | 'interactive' | 'trigger' | 'locale' | 'onHotspotClick'> {
+    children?: React.ReactNode;
+    hotspots?: HotspotItem[] | string;
+    interactive?: boolean;
+    trigger?: 'click' | 'hover';
+    locale?: string;
+    onHotspotClick?: (event: CustomEvent<HotspotItem>) => void;
+}
+export const Hotspot = ({ ref, children, ...props }: HotspotProps & {
+    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.hotspots !== undefined) {
+            (element as any).hotspots = props.hotspots;
+        }
+    }, [
+        props.hotspots
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.interactive !== undefined) {
+            (element as any).interactive = props.interactive;
+        }
+    }, [
+        props.interactive
+    ]);
+    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.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.onHotspotClick) {
+                propsRef.current.onHotspotClick(event as any);
+            }
+        };
+        element.addEventListener('hotspot-click', handleEvent);
+        return ()=>{
+            element.removeEventListener('hotspot-click', handleEvent);
+        };
+    }, []);
+    const domProps = {
+        ...props
+    };
+    const customPropNames = [
+        'hotspots',
+        'interactive',
+        'trigger',
+        'locale',
+        'onHotspotClick'
+    ];
+    for (const key of customPropNames){
+        delete (domProps as any)[key];
+    }
+    return React.createElement('uibit-hotspot', {
+        ref: innerRef,
+        ...domProps
+    }, children);
+};
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'uibit-hotspot': React.ClassAttributes<HTMLElementClass> & React.HTMLAttributes<HTMLElementClass> & {
+                    children?: React.ReactNode;
+                    class?: string;
+                    hotspots?: HotspotItem[] | string;
+                    interactive?: boolean;
+                    trigger?: 'click' | 'hover';
+                    locale?: string;
+                    onHotspotClick?: (event: CustomEvent<HotspotItem>) => void;
+                };
+            }
+        }
+    }
+}

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

@@ -11,7 +11,7 @@ declare module 'solid-js' {
       interactive?: boolean;
       trigger?: 'click' | 'hover';
       locale?: string;
-      "on:hotspot-click"?: (event: CustomEvent) => void;
+      "on:hotspot-click"?: (event: CustomEvent<HotspotItem>) => void;
       };
     }
   }

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

@@ -10,6 +10,8 @@ declare module '@stencil/core' {
     interactive?: boolean;
     trigger?: 'click' | 'hover';
     locale?: string;
+    onHotspotClick?: (event: CustomEvent<HotspotItem>) => void;
+    "on:hotspot-click"?: (event: CustomEvent<HotspotItem>) => void;
       };
     }
   }

package/dist/frameworks/svelte/index.svelte

@@ -2,43 +2,75 @@
   import '@uibit/hotspot';
   import type { Hotspot as HTMLElementClass } from '@uibit/hotspot';
   import type { HotspotItem } from '@uibit/hotspot';
-  
-  let {
-    hotspots = undefined,
-      interactive = undefined,
-      trigger = undefined,
-      locale = undefined,
-      popover-{id} = undefined,
-      children
+
+let {
+    hotspots = $bindable(),
+    interactive = $bindable(),
+    trigger = $bindable(),
+    locale = $bindable(),
+    popover-{id} = undefined,
+    children,
+    ...restProps
   } = $props<{
-    children?: any;
+    children?: import('svelte').Snippet;
     hotspots?: HotspotItem[];
     interactive?: boolean;
     trigger?: 'click' | 'hover';
     locale?: string;
     popover-{id}?: import('svelte').Snippet;
+    [key: string]: any;
   }>();
-  
-  let elementRef: HTMLElementClass | null = $state(null);
-  
-  $effect(() => {
-    if (elementRef && hotspots !== undefined) {
+
+let elementRef: HTMLElementClass | null = $state(null);
+
+$effect(() => {
+    if (elementRef && hotspots !== undefined && elementRef.hotspots !== hotspots) {
       elementRef.hotspots = hotspots;
     }
-    if (elementRef && interactive !== undefined) {
+    if (elementRef && interactive !== undefined && elementRef.interactive !== interactive) {
       elementRef.interactive = interactive;
     }
-    if (elementRef && trigger !== undefined) {
+    if (elementRef && trigger !== undefined && elementRef.trigger !== trigger) {
       elementRef.trigger = trigger;
     }
-    if (elementRef && locale !== undefined) {
+    if (elementRef && locale !== undefined && elementRef.locale !== locale) {
       elementRef.locale = locale;
     }
   });
-  
+
+$effect(() => {
+    const element = elementRef;
+    if (!element) return;
+
+    const handleEvent = () => {
+      if (hotspots !== element.hotspots) {
+        hotspots = element.hotspots as any;
+      }
+      if (interactive !== element.interactive) {
+        interactive = element.interactive as any;
+      }
+      if (trigger !== element.trigger) {
+        trigger = element.trigger as any;
+      }
+      if (locale !== element.locale) {
+        locale = element.locale as any;
+      }
+    };
+
+    const events = ['change', 'input', 'hotspot-click'];
+    for (const event of events) {
+      element.addEventListener(event, handleEvent);
+    }
+    return () => {
+      for (const event of events) {
+        element.removeEventListener(event, handleEvent);
+      }
+    };
+  });
+
 </script>
 
-<uibit-hotspot bind:this={elementRef} {...$$restProps}>
+<uibit-hotspot bind:this={elementRef} {...restProps}>
   {#if popover-{id}}
     <div slot="popover-{id}">
       {@render popover-{id}()}

package/dist/frameworks/vue/index.ts

@@ -1,28 +1,98 @@
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, ref, watch } from 'vue';
 import type { Hotspot as HTMLElementClass } from '@uibit/hotspot';
 import '@uibit/hotspot';
 import type { HotspotItem } from '@uibit/hotspot';
-
 export const Hotspot = defineComponent({
-  name: 'Hotspot',
-  props: {
-    hotspots: { type: [String, Number, Boolean, Array, Object] as any },
-    interactive: { type: [String, Number, Boolean, Array, Object] as any },
-    trigger: { type: [String, Number, Boolean, Array, Object] as any },
-    locale: { type: [String, Number, Boolean, Array, Object] as any }
-  },
-  emits: ['hotspot-click'],
-  setup(props, { slots, emit }) {
-    return () => {
-      const eventListeners: Record<string, any> = {};
-      eventListeners['onHotspot-click'] = (event: Event) => {
-        emit('hotspot-click', event);
-      };
-
-      return h('uibit-hotspot', {
-        ...props,
-        ...eventListeners
-      }, slots.default?.());
-    };
-  }
+    name: 'Hotspot',
+    props: {
+        hotspots: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        interactive: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        trigger: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        locale: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        }
+    },
+    emits: [
+        'hotspot-click'
+    ],
+    setup (props, { slots, emit }) {
+        const elementRef = ref<HTMLElementClass | null>(null);
+        if (false) {
+            watch(()=>props.modelValue, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+            watch(()=>props.value, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+        }
+        watch(()=>props.hotspots, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).hotspots = newVal;
+            }
+        });
+        watch(()=>props.interactive, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).interactive = newVal;
+            }
+        });
+        watch(()=>props.trigger, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).trigger = newVal;
+            }
+        });
+        watch(()=>props.locale, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).locale = newVal;
+            }
+        });
+        return ()=>{
+            const eventListeners: Record<string, any> = {};
+            eventListeners['onHotspot-click'] = (event: Event)=>{
+                emit('hotspot-click', event);
+            };
+            const mergedProps = {
+                ...props,
+                ...eventListeners,
+                ref: elementRef
+            };
+            if (false && props.modelValue !== undefined) {
+                (mergedProps as any).value = props.modelValue;
+            }
+            return h('uibit-hotspot', mergedProps, slots.default?.());
+        };
+    }
 });

package/dist/hotspot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hotspot.d.ts","sourceRoot":"","sources":["../src/hotspot.ts"],"names":[],"mappings":"AACA,OAAO,EAA2C,YAAY,EAAE,MAAM,aAAa,CAAC;AAGpF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oEA+BoE;AACpE,qBACa,OAAQ,SAAQ,YAAY;IACvC,MAAM,CAAC,MAAM,0BAAU;IAEvB,wHAAwH;IAC7F,QAAQ,EAAE,WAAW,EAAE,CAAM;IACxD,0EAA0E;IAC7C,WAAW,UAAQ;IAChD,gDAAgD;IACpB,OAAO,EAAE,OAAO,GAAG,OAAO,CAAW;IAExD,OAAO,CAAC,eAAe,CAAuB;IAEvD,OAAO,CAAC,YAAY,CAAC,CAAS;IAE9B,iBAAiB,SAIhB;IAED,oBAAoB,SAKnB;IAED,OAAO,CAAC,qBAAqB,CAI3B;IAEF,OAAO,CAAC,mBAAmB,CAMzB;IAEF,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,uBAAuB;IAM/B,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,cAAc;IAItB,MAAM,oCA+DL;CACF;eAEc,OAAO"}
+{"version":3,"file":"hotspot.d.ts","sourceRoot":"","sources":["../src/hotspot.ts"],"names":[],"mappings":"AACA,OAAO,EAA2C,YAAY,EAAE,MAAM,aAAa,CAAC;AAGpF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oEA+BoE;AACpE,qBACa,OAAQ,SAAQ,YAAY;IACvC,MAAM,CAAC,MAAM,0BAAU;IAEvB,wHAAwH;IAexH,QAAQ,EAAE,WAAW,EAAE,CAAM;IAC7B,0EAA0E;IAC7C,WAAW,UAAQ;IAChD,gDAAgD;IACpB,OAAO,EAAE,OAAO,GAAG,OAAO,CAAW;IAExD,OAAO,CAAC,eAAe,CAAuB;IAEvD,OAAO,CAAC,YAAY,CAAC,CAAS;IAE9B,iBAAiB,SAIhB;IAED,oBAAoB,SAKnB;IAED,OAAO,CAAC,qBAAqB,CAI3B;IAEF,OAAO,CAAC,mBAAmB,CAMzB;IAEF,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,uBAAuB;IAM/B,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,cAAc;IAItB,MAAM,oCA+DL;CACF;eAEc,OAAO"}

package/dist/hotspot.js

@@ -134,7 +134,7 @@ let Hotspot = class Hotspot extends UIBitElement {
         return html `
       <div part="container" class="hotspot-container">
         <slot></slot>
-        ${this.hotspots.map((spot, index) => {
+        ${(this.hotspots || []).map((spot, index) => {
             const spotId = spot.id || String(index);
             const isOpened = this.activeHotspotId === spotId;
             const yVal = typeof spot.y === 'number' ? spot.y : parseFloat(String(spot.y || '0'));
@@ -193,7 +193,22 @@ let Hotspot = class Hotspot extends UIBitElement {
     }
 };
 __decorate([
-    property({ type: Array })
+    property({
+        type: Array,
+        converter: {
+            fromAttribute: (value) => {
+                if (!value)
+                    return [];
+                try {
+                    return JSON.parse(value);
+                }
+                catch {
+                    return [];
+                }
+            },
+            toAttribute: (value) => JSON.stringify(value),
+        },
+    })
 ], Hotspot.prototype, "hotspots", void 0);
 __decorate([
     property({ type: Boolean })

package/dist/hotspot.js.map

@@ -1 +1 @@
-{"version":3,"file":"hotspot.js","sourceRoot":"","sources":["../src/hotspot.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"hotspot.js","sourceRoot":"","sources":["../src/hotspot.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uibit/hotspot",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Interactive hotspot annotations for images. Display contextual tooltip cards on click or hover with custom content overlays and animations.",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,7 +11,7 @@
       "import": "./dist/index.js"
     },
     "./custom-elements.json": "./custom-elements.json",
-    "./react": "./dist/frameworks/react/index.d.ts",
+    "./react": "./dist/frameworks/react/index.ts",
     "./vue": "./dist/frameworks/vue/index.ts",
     "./svelte": "./dist/frameworks/svelte/index.svelte",
     "./angular": "./dist/frameworks/angular/index.ts",
@@ -51,7 +51,7 @@
     "@types/node": "^20.19.43",
     "lit": "^3.3.3",
     "typescript": "7.0.2",
-    "@uibit/codegen": "0.1.0"
+    "@uibit/codegen": "0.2.0"
   },
   "peerDependencies": {
     "lit": "^3.0.0",

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

@@ -1,22 +0,0 @@
-import type { HTMLAttributes, ClassAttributes } from 'react';
-import type { Hotspot as HTMLElementClass } from '@uibit/hotspot';
-import '@uibit/hotspot';
-import type { HotspotItem } from '@uibit/hotspot';
-
-declare global {
-  namespace React {
-    namespace JSX {
-      interface IntrinsicElements {
-        'uibit-hotspot': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
-          children?: React.ReactNode;
-          class?: string;
-      hotspots?: HotspotItem[];
-      interactive?: boolean;
-      trigger?: 'click' | 'hover';
-      locale?: string;
-      onHotspotClick?: (event: any) => void;
-        };
-      }
-    }
-  }
-}