@web-atoms/web-controls 2.1.97 → 2.1.101

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,162 @@
+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 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 1fr")
+    .gridTemplateColumns("auto 1fr 1fr auto")
+    .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;
+}
+
+export default class Calendar extends AtomRepeater {
+
+    @BindableProperty
+    public year: number;
+
+    @BindableProperty
+    public month: number;
+
+    public dateRenderer: (item: ICalendarDate) => XNode;
+
+    @WatchProperty
+    public get dates() {
+        const year = this.year;
+        const month = this.month ?? 0;
+        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;
+        for (let index = 0; index < 42; index++) {
+            const cd = startDate.add(index);
+            a.push({
+                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)
+            });
+        }
+        return a;
+    }
+
+    protected preCreate(): void {
+        const now = new Date();
+        this.selectedItems = [];
+        this.year = now.getFullYear();
+        this.month = now.getMonth();
+        this.render(<div
+            class={css}
+            items={Bind.oneWay(() => this.dates)}>
+                <i class="fa-solid fa-angle-left"/>
+                <ComboBox items={monthItems} value={Bind.twoWays(() => this.month)} />
+                <ComboBox/>
+                <i class="fa-solid fa-angle-right"/>
+                <div class="dates"/>
+            </div>);
+        this.itemsPresenter = this.element.lastElementChild;
+        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

@@ -6,9 +6,12 @@ import FormField from "./FormField";
 import IElement from "./IElement";
 
 const css = CSS(StyleRule()
-    .verticalFlexLayout({})
+    .verticalFlexLayout({ alignItems: "stretch" })
     .displayNone(" .field-error:empty")
     .displayNone(":not([data-wa-show-errors=yes]) .field-error:not(:empty)")
+    .child(StyleRule("button")
+        .alignSelf("flex-start")
+    )
 , "*[data-wa-form=wa-form]");
 
 export interface ISubmitButton {

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