@neovici/cosmoz-utils 5.33.0 → 5.35.0

package/dist/haunted-polymer.d.ts

@@ -51,11 +51,15 @@ export declare const hauntedPolymer: (outputPath: string | Hook, hook?: Hook) =>
         readonly offsetTop: number;
         readonly offsetWidth: number;
         outerText: string;
+        popover: string | null;
         spellcheck: boolean;
         title: string;
         translate: boolean;
         attachInternals(): ElementInternals;
         click(): void;
+        hidePopover(): void;
+        showPopover(): void;
+        togglePopover(force?: boolean | undefined): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -89,6 +93,7 @@ export declare const hauntedPolymer: (outputPath: string | Hook, hook?: Hook) =>
         closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
         closest<K_4 extends keyof MathMLElementTagNameMap>(selector: K_4): MathMLElementTagNameMap[K_4] | null;
         closest<E extends Element = Element>(selectors: string): E | null;
+        computedStyleMap(): StylePropertyMapReadOnly;
         getAttribute(qualifiedName: string): string | null;
         getAttributeNS(namespace: string | null, localName: string): string | null;
         getAttributeNames(): string[];
@@ -246,6 +251,7 @@ export declare const hauntedPolymer: (outputPath: string | Hook, hook?: Hook) =>
         querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
         replaceChildren(...nodes: (string | Node)[]): void;
         readonly assignedSlot: HTMLSlotElement | null;
+        readonly attributeStyleMap: StylePropertyMap;
         readonly style: CSSStyleDeclaration;
         contentEditable: string;
         enterKeyHint: string;
@@ -318,6 +324,7 @@ export declare const hauntedPolymer: (outputPath: string | Hook, hook?: Hook) =>
         onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
         onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
         onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;

package/dist/hooks/use-drag-items.d.ts

@@ -1,5 +1,8 @@
 export declare const applyMove: <T>(list: T[], from: number, to: number) => T[];
-export declare const useDragItems: (onMove?: ((from: number, to: number) => void) | undefined) => {
+interface Opts {
+    prefix?: string;
+}
+export declare const useDragItems: (onMove?: ((from: number, to: number) => void) | undefined, { prefix }?: Opts) => {
     onDown: (e: MouseEvent) => void;
     onDragStart: (e: DragEvent) => void;
     onDragEnter: (e: DragEvent) => void;
@@ -7,3 +10,4 @@ export declare const useDragItems: (onMove?: ((from: number, to: number) => void
     onDragLeave: (e: DragEvent) => void;
     onDrop: (e: DragEvent) => void;
 };
+export {};

package/dist/hooks/use-drag-items.js

@@ -6,10 +6,27 @@ export const applyMove = (list, from, to) => {
     newList.splice(to + (from >= to ? 0 : -1), 0, newList.splice(from, 1)[0]);
     return newList;
 };
-export const useDragItems = (onMove) => {
+const getIndexer = (prefix) => {
+    const key = ['move-index', prefix].filter(Boolean).join('-');
+    return {
+        set(dt, index) {
+            const idx = index.toString();
+            dt.setData(key, idx);
+            dt.setData('text/plain', idx);
+        },
+        get(dt) {
+            return parse(dt.getData(key));
+        },
+        has(dt) {
+            return dt.types.includes(key);
+        },
+    };
+};
+export const useDragItems = (onMove, { prefix } = {}) => {
     const meta = useMeta({
         onMove,
     });
+    const indexer = getIndexer(prefix);
     return {
         onDown: useCallback((e) => {
             if (!e.target.closest('[data-pull]')) {
@@ -24,23 +41,23 @@ export const useDragItems = (onMove) => {
             }
             meta.handle = undefined;
             const dt = e.dataTransfer;
-            const idx = index.toString();
             dt.effectAllowed = 'move';
-            dt.setData('move-index', idx);
-            dt.setData('text/plain', idx);
+            indexer.set(dt, index);
             setTimeout(() => (target.dataset.drag = ''), 0);
             target.addEventListener('dragend', (e) => delete e.target.dataset.drag, { once: true });
         }, [meta]),
         onDragEnter: useCallback((e) => {
             const ctg = e.currentTarget;
-            if (ctg !== e.target) {
+            const dt = e.dataTransfer;
+            if (ctg !== e.target || !indexer.has(dt))
                 return;
-            }
             e.preventDefault();
-            e.dataTransfer.dropEffect = 'move';
+            dt.dropEffect = 'move';
             ctg.dataset.dragover = '';
         }, []),
         onDragOver: useCallback((e) => {
+            if (!indexer.has(e.dataTransfer))
+                return;
             e.preventDefault();
             e.currentTarget.dataset.dragover = '';
         }, []),
@@ -52,9 +69,13 @@ export const useDragItems = (onMove) => {
             delete ctg.dataset.dragover;
         }, []),
         onDrop: useCallback((e) => {
-            const from = parse(e.dataTransfer.getData('move-index')) || 0;
-            const to = parse(e.currentTarget.dataset.index) || 0;
-            delete e.currentTarget.dataset.dragover;
+            const ctg = e.currentTarget;
+            const dt = e.dataTransfer;
+            delete ctg.dataset.dragover;
+            if (!indexer.has(dt))
+                return;
+            const from = indexer.get(dt) || 0;
+            const to = parse(ctg.dataset.index) || 0;
             e.preventDefault();
             meta.onMove?.(from, to);
         }, [meta]),

package/dist/hooks/use-notify-property.d.ts

@@ -1,2 +1,2 @@
-declare const notifyProperty: <K extends string, T extends HTMLElement & { [key in K]?: unknown; }>(host: T, name: K, value: T[K]) => void, useNotifyProperty: <T extends HTMLElement, K extends Extract<keyof T, string>, V extends T[K]>(name: K, value: V, deps?: unknown[]) => void;
-export { notifyProperty, useNotifyProperty };
+export declare const notifyProperty: <K extends string, T extends HTMLElement & { [key in K]?: unknown; }>(host: T, name: K, value: T[K]) => void;
+export declare const useNotifyProperty: <K extends string, V>(name: K, value: V, deps?: unknown[]) => void;

package/dist/hooks/use-notify-property.js

@@ -1,8 +1,8 @@
 import { useEffect } from 'haunted';
 import { useHost } from './use-host';
-const UPPER = /([A-Z])/gu, 
+const UPPER = /([A-Z])/gu;
 /* Emulate polymer notify props */
-notifyProperty = (host, name, value) => {
+export const notifyProperty = (host, name, value) => {
     // this is required to make polymer double-binding recognize the change
     // @see https://github.com/Polymer/polymer/blob/76c71e186ecc605294c3575dd31ac7983a8b3ae3/lib/mixins/property-effects.js#L382
     host[name] = value;
@@ -10,10 +10,10 @@ notifyProperty = (host, name, value) => {
     host.dispatchEvent(new CustomEvent(name.replace(UPPER, '-$1').toLowerCase() + '-changed', {
         detail: { value },
     }));
-}, useNotifyProperty = (name, value, deps = [value]) => {
+};
+export const useNotifyProperty = (name, value, deps = [value]) => {
     const host = useHost();
     useEffect(() => {
         notifyProperty(host, name, value);
     }, deps);
 };
-export { notifyProperty, useNotifyProperty };

package/dist/promise.js

@@ -5,7 +5,7 @@ export class ManagedPromise extends Promise {
         Object.assign(this, handles);
         callback?.(handles.resolve, handles.reject);
     }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    // eslint-disable-next-line no-empty-function
     resolve = () => { };
 }
 export const timeout$ = (ms) => new Promise((res) => setTimeout(res, ms));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-utils",
-	"version": "5.33.0",
+	"version": "5.35.0",
 	"description": "Date, money and template management functions commonly needed in Cosmoz views.",
 	"keywords": [
 		"polymer",