@web-atoms/web-controls 2.4.84 → 2.4.86

package/src/basic/AtomChips.tsx

@@ -6,10 +6,10 @@ import XNode from "@web-atoms/core/dist/core/XNode";
 import AtomRepeater, { Match, MatchTrue } from "./AtomRepeater";
 import type { IChip } from "./Chip";
 export { default as Chip } from "./Chip";
-import InlinePopup from "./InlinePopup";
 
 import "./styles/chips.global.css";
 import "./styles/item-suggestion.global.css";
+import AtomPopover from "./elements/AtomPopover";
 
 function getChips(target: HTMLElement): AtomChips {
     let start = target;
@@ -51,17 +51,18 @@ function askSuggestionPopup<T>(
     suggestionFilter: (item) => boolean,
     cancelToken: CancelToken): Promise<T> {
 
-    class Suggestions extends InlinePopup {
+    class Suggestions extends AtomPopover {
 
         private opener: AtomChips;
 
-        protected create(): void {
+        init() {
+            // this.popover.setAttribute("cancel-on-blur", "0");
             this.opener = opener;
-            this.render(<div data-suggestion-popup="suggestion-popup">
+            this.renderer = <div data-suggestion-popup="suggestion-popup">
                 <div class="items">
                     <AtomRepeater
                         class="presenter"
-                        selectedItem={Bind.oneWay(() => this.opener.anchorItem)}
+                        selectedItem={Bind.source(opener, (x) => x.source.anchorItem)}
                         itemRenderer={itemRenderer}
                         eventDeleteSuggestion={(e) => opener.element.dispatchEvent(e) }
                         visibilityFilter={suggestionFilter ?? MatchTrue}
@@ -71,13 +72,13 @@ function askSuggestionPopup<T>(
                             e.stopPropagation();
                             this.close(e.detail);
                         }}
-                        items={Bind.oneWay(() => this.opener.suggestions)}/>
+                        items={Bind.source(opener, (x) => x.source.suggestions)}/>
                 </div>
-            </div>);
+            </div>;
         }
     }
 
-    return Suggestions.showControl(host, { cancelToken, alignment: "auto" });
+    return Suggestions.show(host, { "anchor-top": "parent-bottom", "anchor-left": "parent-left", cancelToken });
 }
 
 export function Suggestion(

package/src/basic/AtomRepeater.tsx

@@ -1,4 +1,3 @@
-import { App } from "@web-atoms/core/dist/App";
 import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
 import Bind from "@web-atoms/core/dist/core/Bind";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
@@ -10,7 +9,6 @@ import WatchProperty from "@web-atoms/core/dist/core/WatchProperty";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import { IDialogOptions, PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
-import InlinePopup from "./InlinePopup";
 import MergeNode from "./MergeNode";
 import ItemPath from "./ItemPath";
 
@@ -19,6 +17,7 @@ import "./styles/suggestion-popup.global.css";
 import "./styles/repeater.global.css";
 import { ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI";
 import DataAttributes from "../DataAttributes";
+import AtomPopover from "./elements/AtomPopover";
 
 export interface IItemPair<ParentItem = any, ChildItem = any> {
     parent: ParentItem;
@@ -154,93 +153,46 @@ export function askSuggestion<T>(
  * @returns selected item
  */
 export function askSuggestionPopup<T>(
-    opener: HTMLElement | AtomControl,
+    opener: AtomRepeater & { search: string },
     items: T[],
     itemRenderer: (item: T, index: number, repeater: AtomRepeater) => XNode,
     match: Match<T>,
     selectedItem: T): Promise<T> {
 
-    const updateSearch = "search" in opener;
     const itemsInOpener = "items" in opener;
 
-    class Suggestions extends InlinePopup {
+    class Suggestions extends AtomPopover {
 
-        public anchorItem: T;
+        anchorItem = null;
 
-        public anchorIndex: number;
+        anchorIndex = null;
 
-        @BindableProperty
-        public search: string;
-
-        private opener: any;
-
-        private get items() {
-            return itemsInOpener ? this.opener.items : items;
-        }
-
-        public onPropertyChanged(name: string): void {
-            if (updateSearch && name === "search") {
-                (opener as any).search = this.search;
-            }
-            super.onPropertyChanged(name);
-        }
-
-        protected create(): void {
-            this.anchorItem = selectedItem;
-            this.opener = opener;
-            if (this.opener.search) {
-                this.search = this.opener.search;
-            }
-            if (selectedItem) {
-                this.anchorIndex = items.indexOf(selectedItem);
-            }
+        init() {
             const disableSearch = (opener as any).disableSearch;
-            if (itemsInOpener) {
-                this.render(<div data-suggestion-popup="suggestion-popup">
-                    {!disableSearch && <input
-                        type="search"
-                        value={Bind.twoWaysImmediate(() => this.search)}
-                        eventKeydown={(e) => this.onKey(e)}
-                        autofocus={true}/>}
-                    <div class="items">
-                        <AtomRepeater
-                            class="presenter"
-                            selectedItem={Bind.oneWay(() => this.anchorItem)}
-                            itemRenderer={itemRenderer}
-                            visibilityFilter={Bind.oneWay(() => match(this.search))}
-                            eventItemClick={(e) => {
-                                this.anchorItem = e.detail;
-                                setTimeout(() =>
-                                    this.close(e.detail), 100);
-                            }}
-                            items={Bind.oneWay(() => this.opener.items)}/>
-                    </div>
-                </div>);
-                return;
-            }
-            this.render(<div data-suggestion-popup="suggestion-popup">
+            this.renderer = <div data-suggestion-popup="suggestion-popup">
                 {!disableSearch && <input
                     type="search"
-                    value={Bind.twoWaysImmediate(() => this.search)}
+                    value={Bind.sourceTwoWays(opener, (x) => x.source.search)}
                     eventKeydown={(e) => this.onKey(e)}
-                    autofocus={true}/> }
+                    autofocus={true}/>}
                 <div class="items">
                     <AtomRepeater
                         class="presenter"
-                        selectedItem={Bind.oneWay(() => this.anchorItem)}
+                        selectedItem={Bind.source(this, (x) => x.source.anchorItem)}
                         itemRenderer={itemRenderer}
-                        visibilityFilter={Bind.oneWay(() => match(this.search))}
-                        scrollToSelection={true}
+                        visibilityFilter={Bind.source(opener, (x) => match(x.source.search))}
                         eventItemClick={(e) => {
-                            this.close(e.detail);
+                            this.anchorItem = e.detail;
+                            setTimeout(() =>
+                                this.close(e.detail), 100);
                         }}
-                        items={items}/>
+                        items={Bind.source(opener, (x) => x.source.items)}/>
                 </div>
-            </div>);
+            </div>;
         }
 
         protected onKey(e: KeyboardEvent) {
-            const suggested = match ? this.items?.filter(match(this.search)) : this.items;
+            const suggested = match ? opener.items?.filter(match(opener.search)) : opener.items;
             switch (e.key) {
                 case "Enter":
                     // selection mode...
@@ -251,7 +203,7 @@ export function askSuggestionPopup<T>(
                     this.anchorIndex = 0;
                     this.close(anchorItem);
                     this.anchorItem = null;
-                    this.search = "";
+                    opener.search = "";
                     break;
                 case "ArrowDown":
                     if (suggested) {
@@ -280,7 +232,7 @@ export function askSuggestionPopup<T>(
         }
     }
 
-    return Suggestions.showControl<T>(opener);
+    return Suggestions.show(opener.element, { });
 
 }
 

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);
+    }
+}