@web-atoms/web-controls 2.1.98 → 2.1.102

package/src/basic/AtomRepeater.tsx

@@ -71,7 +71,7 @@ export function askSuggestion<T>(
                         itemRenderer={itemRenderer}
                         visibilityFilter={Bind.oneWay(() => match(this.search))}
                         eventItemClick={(e) => {
-                            this.viewModel.close(e.detail);
+                            this.close(e.detail);
                         }}
                         items={items}/>
                 </div>
@@ -267,8 +267,12 @@ export default class AtomRepeater extends AtomControl {
         if (this.initialValue !== undefined) {
             return this.initialValue;
         }
+        const sp = this.selectedItem;
+        if (sp === undefined) {
+            return sp;
+        }
         const vp = this.valuePath ?? SameObjectValue;
-        return vp(this.selectedItem);
+        return vp(sp);
     }
 
     public set value(v) {
@@ -587,6 +591,9 @@ function onElementClick(e: Event) {
         if (si) {
             index = si.indexOf(item);
             if (index === -1) {
+                if (!this.allowMultipleSelection) {
+                    si.clear();
+                }
                 si.add(item);
             } else {
                 si.removeAt(index);

package/src/basic/Calendar.tsx

@@ -0,0 +1,270 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import Colors from "@web-atoms/core/dist/core/Colors";
+import WatchProperty from "@web-atoms/core/dist/core/WatchProperty";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import StyleRule from "@web-atoms/core/dist/style/StyleRule";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import DateTime from "@web-atoms/date-time/dist/DateTime";
+import AtomRepeater from "./AtomRepeater";
+import ComboBox from "./ComboBox";
+
+const start = DateTime.now;
+
+const getWeekDays = (locale, type: "short" | "long") => {
+    const baseDate = new Date(Date.UTC(2017, 0, 2)); // just a Monday
+    const weekDays = [];
+    for (let i = 0; i < 7; i++) {
+        weekDays.push(baseDate.toLocaleDateString(locale, { weekday: type }));
+        baseDate.setDate(baseDate.getDate() + 1);
+    }
+    return weekDays;
+};
+
+const getMonths = (locale, type: "short" | "long") => {
+    const baseDate = new Date(Date.UTC(2017, 0, 2)); // just a Monday
+    const weekDays = [];
+    for (let i = 0; i < 12; i++) {
+        weekDays.push(baseDate.toLocaleDateString(locale, { month: type }));
+        baseDate.setMonth(i + 1);
+    }
+    return weekDays;
+};
+
+export const weekdays = {
+
+    short: getWeekDays(navigator.language, "short"),
+    long: getWeekDays(navigator.language, "long"),
+};
+
+export const months = {
+    short: getMonths(navigator.language, "short"),
+    long: getMonths(navigator.language, "long")
+};
+
+const monthItems = months.long.map((x, i) => ({
+    label: x,
+    value: i
+}));
+
+const css = CSS(StyleRule()
+    .display("inline-grid")
+    .gridTemplateRows("auto auto auto")
+    .gridTemplateColumns("auto auto auto auto")
+    .child(StyleRule(".fa-solid")
+        .padding(5)
+        .paddingLeft(10)
+        .paddingRight(10)
+        .cursor("pointer")
+        .hoverColor(Colors.blueViolet)
+    )
+    .child(StyleRule(".week")
+        .gridColumnStart("1")
+        .gridColumnEnd("span 4")
+        .gridRowStart("2")
+        .display("inline-grid")
+        .gridTemplateColumns("1fr 1fr 1fr 1fr 1fr 1fr 1fr")
+        .gap(0)
+        .child(StyleRule("*")
+            .fontSize("smaller")
+            .padding("5")
+            .paddingLeft("10")
+            .paddingRight("10")
+            .cursor("default")
+            .alignSelf("center")
+            .justifySelf("center")
+        )
+    )
+    .child(StyleRule(".dates")
+        .gridColumnStart("1")
+        .gridColumnEnd("span 4")
+        .gridRowStart("3")
+        .display("inline-grid")
+        .gap(0)
+        .child(StyleRule("[data-item-index]")
+            .alignSelf("stretch")
+            .justifySelf("stretch")
+            .padding(7)
+            .cursor("pointer")
+            .textAlign("center")
+            .hoverBackgroundColor(Colors.lightGray.withAlphaPercent(0.5))
+            .and(StyleRule("[data-selected-item=true]")
+                .backgroundColor(Colors.blueViolet)
+                .color(Colors.white)
+            )
+            .and(StyleRule("[data-is-today=true]")
+                .backgroundColor(Colors.lightGreen)
+            )
+            .and(StyleRule("[data-is-weekend=true]")
+                .backgroundColor(Colors.lightGray.withAlphaPercent(0.3))
+            )
+            .and(StyleRule("[data-is-other-month=true]")
+                .opacity("0.5")
+            )
+        )
+    )
+);
+
+export interface ICalendarDate {
+    label: string;
+    type: string;
+    value: DateTime;
+    isToday: boolean;
+    isOtherMonth: boolean;
+    isWeekend: boolean;
+    row: number;
+    column: number;
+    disabled: boolean;
+}
+
+export default class Calendar extends AtomRepeater {
+
+    @BindableProperty
+    public year: number;
+
+    @BindableProperty
+    public month: number;
+
+    @BindableProperty
+    public yearStart: number;
+
+    @BindableProperty
+    public yearEnd: number;
+
+    public enableFunc: (item: ICalendarDate) => boolean;
+
+    public dateRenderer: (item: ICalendarDate) => XNode;
+
+    @WatchProperty
+    public get dates() {
+        const year = this.year;
+        const month = this.month;
+        if (month === undefined) {
+            return [];
+        }
+        const today = DateTime.today;
+        let startDate = new DateTime(year, month, 1);
+        while (startDate.dayOfWeek !== 1) {
+            startDate = startDate.add(-1);
+        }
+        const a = [];
+        const y = startDate.year;
+        const m = startDate.month;
+        const ef = this.enableFunc;
+        for (let index = 0; index < 42; index++) {
+            const cd = startDate.add(index);
+            var item = {
+                label: cd.day + "",
+                row: Math.floor(index / 7),
+                column: index % 7,
+                type: null,
+                value: cd,
+                isToday: cd.equals(today),
+                isOtherMonth: month !== cd.month,
+                isWeekend: (cd.dayOfWeek === 0 || cd.dayOfWeek === 6),
+                disabled: false
+            };
+            if (ef) {
+                item.disabled = !(ef(item));
+            }
+            a.push(item);
+        }
+        return a;
+    }
+
+    @WatchProperty
+    public get years() {
+        const years = [];
+        const s = start.year + this.yearStart;
+        const e = start.year + this.yearEnd;
+        for (let index = s; index < e; index++) {
+            years.push({
+                label: index.toString(),
+                value: index
+            });
+        }
+        return years;
+    }
+
+    public onPropertyChanged(name: keyof Calendar): void {
+        super.onPropertyChanged(name);
+        switch (name) {
+            case "enableFunc":
+            case "dateRenderer":
+                this.updateItems();
+                break;
+        }
+    }
+
+    public next() {
+        if (this.month === 11) {
+            this.year++;
+            this.month = 0;
+            return;
+        }
+        this.month++;
+    }
+
+    public prev() {
+        if (this.month === 0) {
+            this.year--;
+            this.month = 11;
+            return;
+        }
+        this.month--;
+    }
+
+    protected preCreate(): void {
+        const now = new Date();
+        this.selectedItems = [];
+        this.valuePath = (i) => i.value;
+        this.yearStart = -10;
+        this.yearEnd = 10;
+        this.year = now.getFullYear();
+        this.month = now.getMonth();
+        this.render(<div
+            class={css}
+            items={Bind.oneWay(() => this.dates)}>
+                <i
+                    event-click={() => this.prev()}
+                    class="fa-solid fa-angle-left"
+                    title="Previous Month"/>
+                <ComboBox
+                    items={monthItems}
+                    value={Bind.twoWays(() => this.month)} />
+                <ComboBox
+                    items={this.years}
+                    value={Bind.twoWays(() => this.year)}/>
+                <i
+                    event-click={() => this.next()}
+                    class="fa-solid fa-angle-right"
+                    title="Next Month"/>
+                <div class="week"/>
+                <div class="dates"/>
+            </div>);
+        this.itemsPresenter = this.element.lastElementChild;
+        const week = this.element.lastElementChild.previousElementSibling;
+        let w = 1;
+        for (const iterator of weekdays.short) {
+            const text = document.createElement("span");
+            text.textContent = iterator;
+            week.appendChild(text);
+            text.style.gridColumnStart = `${w++}`;
+        }
+        this.dateRenderer = (item) => <div text={item.label}/>;
+        this.itemRenderer = (item: ICalendarDate) => {
+            const d = this.dateRenderer(item);
+            const a = d.attributes ??= {};
+            if (!a["data-click-event"]) {
+                a["data-click-event"] = "itemSelect";
+            }
+            a["data-is-today"] = item.isToday;
+            a["data-is-other-month"] = item.isOtherMonth;
+            a["data-is-weekend"] = item.isWeekend;
+            a.styleGridColumnStart = (item.column + 1);
+            a.styleGridRowStart = (item.row + 1);
+            return d;
+        };
+    }
+
+}

package/src/basic/ComboBox.tsx

@@ -11,13 +11,14 @@ export default class ComboBox extends AtomRepeater {
 
     constructor(app, e) {
         super(app, e ?? document.createElement("select"));
+        this.selectedItems = [];
     }
 
     public updateItems(container?: HTMLElement): void {
-        super.updateItems(container);
         if (this.isChanging) {
             return;
         }
+        super.updateItems(container);
         const selectedItems = this.selectedItems;
         if (!selectedItems) {
             return;
@@ -31,6 +32,14 @@ export default class ComboBox extends AtomRepeater {
         this.isChanging = false;
     }
 
+    protected updateClasses(): void {
+        if (this.isChanging) {
+            return;
+        }
+        super.updateClasses();
+        this.updateItems();
+    }
+
     protected preCreate(): void {
         super.preCreate();
         this.labelPath = (item) => item?.label ?? item.toString();

package/src/basic/Form.tsx

@@ -22,12 +22,14 @@ export interface ISubmitButton {
 
 export interface ISubmitAction extends IElement {
     action: "submit";
-    eventClick: any;
+    eventClick?: any;
+    "event-click"?: any;
 }
 
 export interface ICancelAction extends IElement{
     action: "cancel";
     eventClick?: any;
+    "event-click"?: any;
 }
 
 export type IFormAction = ISubmitAction | ICancelAction;
@@ -42,11 +44,19 @@ export function FormAction(
     {
         action = "submit",
         eventClick,
+        "event-click": eventClick2,
         ... a
     }: IFormAction, node: XNode) {
     const attributes = node.attributes ??= {};
     attributes["data-wa-form-action"] = action;
-    if (action === "submit") {
+    const e = attributes["event-click"] || attributes["eventClick"]
+    if (e) {
+        attributes["event-submit"] = e;
+        delete attributes["event-click"];
+        delete attributes.eventClick;
+    }
+    eventClick ??= eventClick2;
+    if (action === "submit" && eventClick) {
         attributes.eventSubmit = eventClick;
     }
     node.attributes = { ... a, ... attributes};

package/src/html-editor/commands/AddImage.tsx

@@ -27,7 +27,7 @@ class ImageDialog extends PopupWindow {
             </FormField>
             <div class="command-bar">
                 <button
-                    eventClick={() => this.viewModel.close(this.createImage())}
+                    eventClick={() => this.close(this.createImage())}
                     text="Add"/>
             </div>
         </div>);

package/src/html-editor/commands/AddLink.tsx

@@ -61,7 +61,7 @@ class LinkDialog extends PopupWindow {
             <div class="command-bar">
                 <button
                     text="Add"
-                    eventClick={Bind.event(() => this.viewModel.close(this.toLink(this.link)))} />
+                    eventClick={Bind.event(() => this.close(this.toLink(this.link)))} />
             </div>
         </div>);
     }

package/src/html-editor/commands/Source.tsx

@@ -28,7 +28,7 @@ async function showDialog(s: AtomHtmlEditor, e: Event): Promise<string> {
                 <textarea value={Bind.twoWaysImmediate(() => this.source)}/>
                 <div class="command-bar">
                     <button
-                        eventClick={Bind.event(() => this.viewModel.close(this.source))}
+                        eventClick={Bind.event(() => this.close(this.source))}
                         text="Save"/>
                 </div>
             </div>);