@web-atoms/web-controls 2.4.85 → 2.4.86

package/src/basic/DateField.tsx

@@ -4,11 +4,11 @@ import XNode from "@web-atoms/core/dist/core/XNode";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import DateTime from "@web-atoms/date-time/dist/DateTime";
 import Calendar, { ICalendarDate } from "./Calendar";
-import InlinePopup, { InlinePopupButton } from "./InlinePopup";
 import TimeEditor from "./TimeEditor";
 import TimeSpan from "@web-atoms/date-time/dist/TimeSpan";
 
 import "./styles/date-field.global.css";
+import AtomPopover from "./elements/AtomPopover";
 
 function hours() {
     return [
@@ -103,7 +103,7 @@ export default class DateField extends AtomControl {
                 });
 
         const owner = this;
-        class CalendarPopup extends InlinePopup {
+        class CalendarPopup extends AtomPopover {
 
             public owner: DateField;
 
@@ -111,16 +111,15 @@ export default class DateField extends AtomControl {
 
             public time: TimeSpan;
 
-            protected create(): void {
+            init() {
                 this.owner = owner;
                 this.type = "AM";
                 const now = DateTime.from(owner.value ?? DateTime.today.addHours(owner.hour || 0).addMinutes(owner.minute || 0));
                 this.time = new TimeSpan(0, now.hour, now.minute);
-                super.create();
                 const yearStart = typeof this.owner.yearStart === "number" ? this.owner.yearStart : -10;
                 const yearEnd = typeof this.owner.yearEnd === "number" ? this.owner.yearEnd : 10;
                 const year = typeof this.owner.year === "number" ? this.owner.year : now.year;
-                this.render(<div class="calendar-popup">
+                this.renderer = <div class="calendar-popup">
                     <Calendar
                         yearStart={yearStart}
                         yearEnd={yearEnd}
@@ -155,13 +154,13 @@ export default class DateField extends AtomControl {
                             e.stopPropagation();
                             this.save(DateTime.today.asJSDate);
                         }}/>
-                </div>);
+                </div>;
 
-                this.runAfterInit(() => {
-                    if (this.element) {
-                        (this.element as HTMLElement).scrollIntoView();
-                    }
-                });
+                // this.runAfterInit(() => {
+                //     if (this.element) {
+                //         (this.element as HTMLElement).scrollIntoView();
+                //     }
+                // });
             }
 
             private save(d?: Date) {
@@ -179,12 +178,12 @@ export default class DateField extends AtomControl {
             }
         }
 
-        this.render(<InlinePopupButton
+        this.render(<div
             data-layout="flex"
             data-date-field="date-field"
-            text={Bind.oneWay(() => this.format?.(this.value, this.enableTime) || this.prompt)}>
-            <CalendarPopup/>
-        </InlinePopupButton>);
+            text={Bind.oneWay(() => this.format?.(this.value, this.enableTime) || this.prompt)}
+            event-click={() => CalendarPopup.show(this)}>
+        </div>);
     }
 
 }

package/src/basic/InlinePopup.tsx

@@ -105,7 +105,7 @@ export default class InlinePopup extends AtomControl {
         container._logicalParent = targetElement;
 
         // @ts-ignore
-        control.render(<div> {node} </div>, container, control);
+        control.render(<div> <atom-popup-container>{node}</atom-popup-container> </div>, container, control);
 
         targetElement.insertAdjacentElement("beforeend", container);
 
@@ -296,6 +296,8 @@ export function InlinePopupButton(
 
     alignment ||= anchorRight ? "bottomRight" : "bottomLeft";
 
+    console.warn(`Deprecated, use AtomPopover instead`);
+
     if(!a["data-layout"]) {
         if (icon && text) {
             a["data-layout"] = "icon-button";

package/src/basic/InlinePopupButton.tsx

@@ -0,0 +1,111 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import type { IAnchorPopover } from "./elements/AtomPopover";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import { App } from "@web-atoms/core/dist/App";
+import AtomPopover from "./elements/AtomPopover";
+
+export type PopupFactory = (data) => XNode;
+
+export interface IPopupButton extends IAnchorPopover {
+    icon?: string;
+    text?: string;
+    label?: string;
+    popup?: PopupFactory;
+    [k: string]: any;
+}
+
+
+
+export default function InlinePopupButton( { icon, text, label, popup, ... a }: IPopupButton, ... nodes: XNode[]) {
+    if(!a["anchor-right"]) {
+        a["anchor-left"] = "parent-right";
+    }
+    if (!a["anchor-bottom"]) {
+        a["anchor-top"] = "parent-top";
+    }
+    a["data-atom-popup-button"] = "popup-button";
+    if (!popup) {
+        const copy = nodes;
+        const div = <div>{ ... copy }</div>;
+        popup = () => div;
+        nodes = [];
+    }
+    a["popupFctory"] = popup;
+
+    if(!a["data-layout"]) {
+        if (icon && text) {
+            a["data-layout"] = "icon-button";
+        } else {
+            a["data-layout"] = "button";
+        }
+    }
+
+    return <button data-inline-popup-button="inline-popup-button" data-atom-popup-button="1" { ... a}>
+        {icon && <i class={icon}/>}
+        {text && <span text={text}/>}
+        {label && <label text={text}/>}
+        { ... nodes }
+    </button>;
+}
+
+document.body.addEventListener("click", (e) => {
+    let start = e.target as HTMLElement;
+    while(start) {
+        if(start.hasAttribute("data-atom-popup-button")) {
+            break;
+        }
+        start = start.parentElement as HTMLElement;
+    }
+
+    if (!start) {
+        return;
+    }
+
+    const pf = start["popupFctory"] as PopupFactory;
+    if (!pf) {
+        return;
+    }
+
+    const control = AtomControl.from(start) as any;
+    const app = control.app as App;
+    const target = start;
+    const element = control.element;
+
+    const dataFactory = () => {
+
+        let itemIndex;
+
+        let data;
+
+
+        if (control.items && control.itemRenderer) {
+            // this is atom repeater
+            while (start && start !== element) {
+                itemIndex ??= start.getAttribute("data-item-index");
+                if (itemIndex) {
+                    data = control.items[~~itemIndex];
+                    break;
+                }
+                start = start.parentElement;
+            }
+        }
+
+        if (!data) {
+            data = new Proxy(target, {
+                get(t, p, receiver) {
+                    let s = target;
+                    while (s) {
+                        const v = s.dataset[p as string];
+                        if (v !== void 0) {
+                            return v;
+                        }
+                        s = s.parentElement;
+                    }
+                },
+            });
+        }
+        return data;
+    };
+
+    AtomPopover.create(start, { nodeFactory: (data) => pf(data), dataFactory });
+})

package/src/basic/PopupButton.tsx

@@ -1,7 +1,7 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import { IInlinePopupButtonOptions, InlinePopupButton } from "./InlinePopup";
 
 import "./styles/popup-button.global.css";
+import InlinePopupButton from "./InlinePopupButton";
 
 export interface IMenuItem {
     label?: string;
@@ -41,11 +41,12 @@ export function MenuItem({
     </div>;
 }
 
+
+
+
 export default InlinePopupButton;
 
-export function PopupActionButton(a: IInlinePopupButtonOptions, ... nodes: XNode[]) {
-    a.anchorRight = true;
-    a["data-alignment"] ??= "bottom-right";
+export function PopupActionButton(a, ... nodes: XNode[]) {
     return InlinePopupButton(a, ... nodes);
 }
 

package/src/basic/Tooltip.tsx

@@ -1,12 +1,14 @@
 import { CancelToken } from "@web-atoms/core/dist/core/types";
-import XNode from "@web-atoms/core/dist/core/XNode";
+import XNode, { xnodeSymbol } from "@web-atoms/core/dist/core/XNode";
 import { AtomControl, ElementValueSetters } from "@web-atoms/core/dist/web/controls/AtomControl";
 import { getParentRepeaterItem } from "./AtomRepeater";
-import InlinePopup from "./InlinePopup";
 
 import "./styles/tooltip.global.css";
+import AtomPopover from "./elements/AtomPopover";
 
-const tooltips = new Map<HTMLElement, [{control: any, tooltip: CancelToken}, typeof InlinePopup]>();
+type toolTipInfo = [{control: any, tooltip: CancelToken}, typeof AtomPopover];
+
+const tooltips = new Map<HTMLElement, toolTipInfo>();
 
 ElementValueSetters.tooltip = (control: AtomControl, e: HTMLElement, value: any) => {
     tooltips.set(e, [{ control, tooltip: undefined }, value]);
@@ -34,64 +36,36 @@ document.body.addEventListener("pointerleave", (ev) => {
     }, 250);
 }, true);
 
-export default class Tooltip extends InlinePopup {
+export default abstract class Tooltip extends AtomPopover {
 
-    public static showTooltip(start: HTMLElement) {
-        while (start) {
-            const item = tooltips.get(start);
-            if (!item) {
-                start = start.parentElement;
+    public static showTooltip(target: HTMLElement) {
+        let item: toolTipInfo;
+        while(target) {
+            item = tooltips.get(target);
+            if(!item) {
+                target = target.parentElement;
                 continue;
             }
-            const [host, node] = item;
-            if (!host.tooltip) {
-                host.tooltip = new CancelToken();
-                const reset = () => delete host.tooltip;
-
-                // find associated data/item
-                let data = getParentRepeaterItem(start);
-                if (data) {
-                    data = data[2];
-                }
-
-                class TooltipControl extends node {
-
-                    private enterEventDisposable;
-
-                    protected preCreate(): void {
-                        this.element._logicalParent = start;
-                        if (data) {
-                            this.data = data;
-                        }
-                        const { element } = this;
-                        // tooltips.set(element, [{ tooltip: this, control: null }, node]);
-                        this.enterEventDisposable = this.bindEvent(element, "mouseenter", () => {
-                            setTimeout(() => {
-                                tooltips.set(element, [{ tooltip: host.tooltip, control: null}, null]);
-                                delete host.tooltip;
-                                this.enterEventDisposable.dispose();
-                            }, 10);
-                        });
-                        this.registerDisposable({
-                            dispose: () => {
-                                tooltips.delete(element);
-                            }
-                        });
-                    }
-                }
 
-                TooltipControl.show(
-                    start,
-                    XNode.create(TooltipControl as any, {}),
-                    {
-                        cancelToken: host.tooltip,
-                        alignment: "topRight"
-                    }
-                    ).then(reset, reset) ;
-            }
             break;
         }
 
+        if (!item) {
+            return;
+        }
+
+        const [host, node] = item;
+
+        host.tooltip = node.create(target, {
+            dataFactory: () => {
+                let data = getParentRepeaterItem(target);
+                if (!data) {
+                    return AtomControl.from(target).data;
+                }
+                data = data[2];
+                return data;
+            }
+        });
     }
 
     // public static show(start: HTMLElement) {

package/src/basic/elements/AtomPopover.css

@@ -0,0 +1,14 @@
+atom-pop-over {
+    position: relative;
+    &::part(container) {
+        display: block;
+        position: fixed;
+        border-radius: 5px;
+        padding: 5px;
+        box-shadow: rgba(50, 50, 105, 0.5) 0px 4px 6px 4px, rgba(0, 0, 0, 0.5) 0px 1px 1px 0px;
+        border: solid 1px rgba(0, 0, 0, 0.05);
+        z-index: 5000;
+        background-color: var(--popup-background-color, var(--default-background-color, canvas));
+        color: var(--popup-text-color, canvasText);
+    }
+}