@web-atoms/web-controls 2.6.2 → 2.6.3

package/src/data-grid/GridTemplate.ts

@@ -1,83 +0,0 @@
-import { App } from "@web-atoms/core/dist/App.js";
-import { AtomWatcher } from "@web-atoms/core/dist/core/AtomWatcher.js";
-import { IClassOf, IDisposable } from "@web-atoms/core/dist/core/types.js";
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import AtomColumn from "./AtomColumn.js";
-
-interface IDataGrid {
-    columns: AtomColumn[];
-}
-
-export default function GridTemplate(
-    owner: IDataGrid, templatePath: string, elementName: string): IClassOf<AtomControl> {
-
-    return class AtomGridTemplate extends AtomControl {
-
-        public dataGrid: IDataGrid;
-
-        private columnDisposable: IDisposable;
-
-        private row: AtomControl[];
-
-        private lastCreateRowId = null;
-
-        constructor(app: App, e: HTMLElement = document.createElement("tr")) {
-            super(app, e);
-        }
-
-        public preCreate(): void {
-            this.dataGrid = owner;
-            this.row = null;
-            this.data = null;
-            this.bind(this.element,
-                "none",
-                [["this", "data"], ["this", "dataGrid", "columns"]], false,
-                (data, columns) => this.updateRow(data, columns), this);
-        }
-
-        private updateRow(data: any, columns: AtomColumn[]): any {
-            if (this.columnDisposable) {
-                this.columnDisposable.dispose();
-                this.columnDisposable = null;
-            }
-            if (!columns) {
-                return;
-            }
-            this.columnDisposable = this.disposables.add(columns.watch(() => {
-                this.deferCreateRow(data, columns);
-            }));
-            this.createRow(data, columns);
-            return 1;
-        }
-
-        private deferCreateRow(data, columns) {
-            if (this.lastCreateRowId) {
-                clearTimeout(this.lastCreateRowId);
-                this.lastCreateRowId = null;
-            }
-            this.lastCreateRowId = setTimeout(() => this.createRow(data, columns), 100);
-        }
-
-        private createRow(data: any, columns: AtomColumn[]): void {
-            if (this.row) {
-                for (const iterator of this.row) {
-                    const e = iterator.element;
-                    if (e) {
-                        iterator.dispose();
-                        e.remove();
-                    }
-                }
-                this.row = null;
-            }
-
-            this.row = columns.map((x) => {
-                const c = new (x[templatePath])(this.app, document.createElement(elementName));
-                c.data = data;
-                this.append(c);
-                return c;
-            });
-        }
-
-    };
-
-}

package/src/data-pager/AtomDataPager.tsx

@@ -1,107 +0,0 @@
-import Bind from "@web-atoms/core/dist/core/Bind.js";
-import Colors from "@web-atoms/core/dist/core/Colors.js";
-import XNode from "@web-atoms/core/dist/core/XNode.js";
-import { AtomViewModel, Watch } from "@web-atoms/core/dist/view-model/AtomViewModel.js";
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import { AtomItemsControl } from "@web-atoms/core/dist/web/controls/AtomItemsControl.js";
-import { AtomStyle } from "@web-atoms/core/dist/web/styles/AtomStyle.js";
-import { IStyleDeclaration } from "@web-atoms/core/dist/web/styles/IStyleDeclaration.js";
-
-export class AtomDataPagerViewModel extends AtomViewModel {
-
-    public owner: AtomDataPager;
-
-    @Watch
-    public get pages() {
-        const r = [];
-        const size = this.owner.size;
-        if (size <= 0) {
-            return r;
-        }
-        const total = Math.ceil(this.owner.total / size);
-        let current = this.owner.current;
-        if (current === null) {
-            current = 0;
-            this.owner.current = 0;
-        }
-        if (current >= total) {
-            current = total - 1;
-        }
-        const start = Math.max(0, current <= 2
-            ? 0
-            : (current + 5 > total ? (total - 5) : current - 3));
-        const max = Math.min(start + 5, total);
-        for (let index = start; index < max; index++) {
-            r.push({
-                label: `${index + 1}`,
-                value: index
-            });
-        }
-        return r;
-    }
-
-}
-
-export class AtomDataPagerStyle extends AtomStyle {
-    public get root(): IStyleDeclaration {
-        return {
-            subclasses: {
-                " button": {
-                    margin: "5px"
-                },
-                " button.selected": {
-                    margin: "5px",
-                    backgroundColor: Colors.blue,
-                    color: Colors.white
-                }
-            }
-        };
-    }
-}
-
-export default class AtomDataPager extends AtomControl {
-
-    public total: number;
-
-    public size: number;
-
-    public current: number;
-
-    declare public localViewModel: AtomDataPagerViewModel;
-
-    public create() {
-        this.defaultControlStyle = AtomDataPagerStyle;
-        this.current = 0;
-        this.size = 0;
-        this.total = 0;
-        this.localViewModel = this.resolve(AtomDataPagerViewModel, "owner");
-        this.render(<div
-            styleClass={this.controlStyle.name}
-            // styleDisplay={Bind.oneWay(() => this.total > this.size ? "" : "none")}
-            >
-            <button
-                eventClick={Bind.event(() => this.current = 0)}
-                text="First"/>
-            <AtomItemsControl
-                for="span"
-                items={Bind.oneWay(() => this.localViewModel.pages)}>
-                <AtomItemsControl.itemTemplate>
-                    <button
-                        styleClass={Bind.oneWay((x) => ({
-                            item: 1,
-                            selected: x.data.value === this.current
-                        }) )}
-                        eventClick={Bind.event((x) => this.current = x.data.value )}
-                        text={Bind.oneTime((x) => x.data.label)}
-                        />
-                </AtomItemsControl.itemTemplate>
-            </AtomItemsControl>
-            <button
-                eventClick={Bind.event(() => this.current = this.total > 0
-                    ? Math.floor(this.total / this.size)
-                    : 0)}
-                text="Last"/>
-        </div>);
-    }
-
-}

package/src/date-field/AtomDateField.tsx

@@ -1,85 +0,0 @@
-import Bind from "@web-atoms/core/dist/core/Bind.js";
-import {BindableProperty} from "@web-atoms/core/dist/core/BindableProperty.js";
-import XNode from "@web-atoms/core/dist/core/XNode.js";
-import AtomPopupButton from "../buttons/AtomPopupButton.js";
-import AtomCalendar from "../calendar/AtomCalendar.js";
-import SRCalendar from "../calendar/res/SRCalendar.js";
-
-const shortDate = {
-	year: "numeric",
-	month: "short",
-	day: "numeric"
-};
-
-export default class AtomDateField extends AtomPopupButton {
-
-	public static itemTemplate = XNode.prepare("itemTemplate", true, true);
-
-	public selectedDate: Date ;
-
-	public yearStart: any ;
-
-	public yearEnd: any ;
-
-	public enableFunc: any ;
-
-	public currentMonth: any ;
-
-	public itemTemplate: any ;
-
-	public placeholder: string;
-
-	public labelFunc: any;
-
-	public locale: any;
-
-	public localeOptions: any;
-
-	protected srCalendar: SRCalendar;
-
-	public create(): void {
-
-		const srCalendar = this.app.resolve(SRCalendar);
-
-		this.selectedDate = null;
-		this.yearStart = -10;
-		this.yearEnd = 10;
-		this.enableFunc = null;
-		this.labelFunc = null;
-		this.locale = "en-US";
-		this.localeOptions = shortDate;
-		this.placeholder = "Select Date";
-		this.render(
-		<div
-			text={Bind.oneWay(() => this.selectedDate
-				? (this.labelFunc
-					? this.labelFunc(this.selectedDate)
-					: (this.selectedDate.toLocaleDateString
-						? this.selectedDate.toLocaleDateString(this.locale, this.localeOptions)
-						: srCalendar.toShortDate(this.selectedDate)))
-				: this.placeholder)}
-			eventResult={Bind.event((s, e) => this.selectedDate = e.detail)}>
-			<AtomPopupButton.page>
-				<AtomCalendar
-					selectedDate={Bind.twoWays(() => this.selectedDate)}
-					yearStart={Bind.oneWay(() => this.yearStart)}
-					yearEnd={Bind.oneWay(() => this.yearEnd)}
-					enableFunc={Bind.oneWay(() => this.enableFunc)}
-					itemTemplate={Bind.oneWay(() => this.itemTemplate || undefined)}
-					eventDateClicked={Bind.event((s, e) => s.viewModel.close(e.detail.value))}>
-				</AtomCalendar>
-			</AtomPopupButton.page>
-		</div>
-		);
-	}
-
-	public preCreate() {
-		super.preCreate();
-		this.selectedDate = null;
-		this.yearStart = null;
-		this.yearEnd = null;
-		this.enableFunc = null;
-		this.currentMonth = null;
-		this.itemTemplate = null;
-	}
-}

package/src/dev/DevHost.tsx

@@ -1,189 +0,0 @@
-import Bind from "@web-atoms/core/dist/core/Bind"
-import XNode from "@web-atoms/core/dist/core/XNode"
-import { BaseService, Get, Query } from "@web-atoms/core/dist/services/http/RestService.js";
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-import styled from "@web-atoms/core/dist/style/styled.js";
-import InjectProperty from "@web-atoms/core/dist/core/InjectProperty.js";
-
-import "@web-atoms/data-styles/data-styles";
-import { CancelToken } from "@web-atoms/core/dist/core/types.js";
-import Action from "@web-atoms/core/dist/view-model/Action.js";
-import DISingleton from "@web-atoms/core/dist/di/DISingleton.js";
-import AtomRepeater from "../basic/AtomRepeater.js";
-import ToggleButtonBar from "../basic/ToggleButtonBar.js";
-
-import "./Devhost.global.css";
-
-	const css = "dev-host-local";
-
-const fileTypes = () => [
-	{ label: "Packed", value: "packed"},
-	{ label: "All", value: "all"}
-];
-
-const designModes = () => [
-	{ label: "Design", value: true },
-	{ label: "Live", value: false }
-];
-
-const replaceSrc = (src: string): string => {
-    src = src.split("\\").join("/");
-    const tokens = src.split("/");
-    if (tokens[0] === "src") {
-        tokens[0] = "dist";
-    }
-    return tokens.join("/");
-}
-
-const toAbsoluteUrl = (file: IFilePath, designMode?: boolean) => {
-	let url = `/_view/${replaceSrc(file.dir)}/${file.name}`;
-	if (designMode) {
-		if (url.indexOf("?") === -1) {
-			url += "?";
-		}
-		url += "&designMode=true";
-	}
-	return `${location.protocol}//${location.host}${url}`;
-};
-
-@DISingleton({})
-export class FileService extends BaseService {
-
-    public async getModules(search: string, packed: boolean, cancelToken: CancelToken) {
-        const result = await this.getRemoteModules(search, packed, cancelToken);
-        return result.files;
-    }
-
-    @Get("/flat-modules")
-    private getRemoteModules(
-        @Query("search") search: string,
-        @Query("packed") packed: boolean,
-        ct?: CancelToken): Promise<IFilePathResult> {
-        return null;
-    }
-
-}
-
-export default class AppHost extends AtomControl {
-
-	public search: string = "";
-
-	public designMode = false;
-
-	public fileType = "packed";
-
-	@InjectProperty
-	private fileService: FileService;
-
-	public async init() {
-
-		this.render(
-		<div
-			class={css}>
-			<header
-				data-layout="row"
-				data-padding="auto"
-				class="header">
-				<input
-					type="search"
-					value={Bind.twoWaysImmediate(() => this.search)}
-					placeholder="Search...">
-				</input>
-
-				<span>Mode</span>
-				<ToggleButtonBar
-					items={designModes()}
-					value={Bind.twoWays(() => this.designMode)}
-					/>
-
-				<ToggleButtonBar
-					items={fileTypes()}
-					value={Bind.twoWays(() => this.fileType)}
-					/>
-			</header>
-			<div>
-				<AtomRepeater
-					class="grid"
-					items={Bind.oneWayAsync((x, e, cancelToken) =>
-						this.getModules(this.search, this.fileType === "packed", cancelToken))}
-					for="table"
-					itemRenderer={(item: IFilePath) => <tr
-						template="itemTemplate">
-						<td>
-							<div
-								text={item.name}
-								title={item.dir}
-								style="font-weight: 500;">
-							</div>
-							<div
-								style="font-size: small;"
-								text={item.dir}>
-							</div>
-						</td>
-						<td>
-							<a
-								data-layout="accent-button"
-								data-text-decoration="none"
-								href={Bind.source(item, (x) => toAbsoluteUrl(x.source, this.designMode))}
-								target="_blank"
-								text="Open">
-							</a>
-							<i
-								class="fas fa-copy"
-								title="Copy Url"
-								style="margin: 5px; cursor: pointer;"
-								data-click-event="copy-url"
-								eventClick={() => this.copyUrl(toAbsoluteUrl(item, this.designMode))}>
-							</i>
-						</td>
-					</tr> } />
-			</div>
-		</div>
-		);
-	}
-
-	async getModules(search: string, packed: boolean, cancelToken: CancelToken) {
-		const result = await this.fileService.getModules(search, packed, cancelToken);
-		if (!result.length && packed) {
-			this.fileType = "all";
-		}
-		return result;
-	}
-
-	protected preCreate(): void {
-		super.preCreate();
-		(this.app).installStyleSheet({
-            href: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css",
-            integrity: "sha256-HtsXJanqjKTc8vVQjO4YMhiqFoXkfBsjBWcX91T1jr8=",
-            crossOrigin: "anonymous"
-        });
-		this.runAfterInit(() => this.app.runAsync(() => this.init()));
-	}
-
-    @Action({ success: "Copied successfully"})
-	protected async copyUrl(url: string) {
-        await navigator.clipboard.writeText(url);
-	}
-}
-export interface IFilePath {
-
-    name: string;
-    base: string;
-    dir: string;
-    ext: string;
-    root: string;
-    url: string;
-    hostUrl?: string;
-    package?: string;
-    visible: boolean;
-    packed?: boolean;
-    module?: string;
-
-}
-
-export interface IFilePathResult {
-
-    files: IFilePath[];
-
-}
-

package/src/dev/Devhost.global.css

@@ -1,34 +0,0 @@
-:root {
-    --accent-color: orangered;
-    --accent-text-color: white;
-}
-html, body {
-    margin: 0;
-    padding: 0;
-    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-}
-
-.dev-host-local {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    display: grid;
-    grid-template-rows: auto 1fr;
-    gap: 5px;
-
-    & > header {
-        grid-row: 1;
-    }
-    & > div {
-        grid-row: 2;
-        align-items: stretch;
-        justify-self: stretch;
-        overflow: auto;
-
-        & [data-item-index]:hover {
-            background-color: lightgreen;
-        }
-    }
-}

package/src/form/AtomField.tsx

@@ -1,130 +0,0 @@
-import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder.js";
-import Bind from "@web-atoms/core/dist/core/Bind.js";
-import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty.js";
-import { IClassOf } from "@web-atoms/core/dist/core/types.js";
-import XNode from "@web-atoms/core/dist/core/XNode.js";
-import { NavigationService } from "@web-atoms/core/dist/services/NavigationService.js";
-import { AtomContentControl } from "@web-atoms/core/dist/web/controls/AtomContentControl.js";
-import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl.js";
-export { default as HP } from "./HelpPopup.js";
-
-let inputID = 0;
-
-export default class AtomField extends AtomControl {
-
-    @BindableProperty
-    public icon: string;
-
-    @BindableProperty
-    public label: string;
-
-    @BindableProperty
-    public error: string;
-
-    @BindableProperty
-    public helpText: string;
-
-    @BindableProperty
-    public helpLink: string;
-
-    @BindableProperty
-    public helpIcon: string;
-
-    @BindableProperty
-    public required: boolean;
-
-    @BindableProperty
-    public visible: boolean;
-
-    @BindableProperty
-    public fieldClass: string;
-
-    public get hasError(): boolean {
-        return this.error ? true : false;
-    }
-
-    public get hasHelp(): boolean {
-        return (this.helpText || this.helpLink) ? true : false;
-    }
-
-    @BindableProperty
-    protected contentPresenter: any;
-
-    @BindableProperty
-    protected htmlFor: any;
-
-    public onPropertyChanged(name: keyof AtomField): void {
-        switch (name) {
-            case "helpLink":
-            case "helpText":
-                AtomBinder.refreshValue(this, "hasHelp");
-                break;
-        }
-    }
-
-    public async openHelp(): Promise<void> {
-        const n = this.app.resolve(NavigationService) as NavigationService;
-
-        if (this.helpText) {
-            await n.openPage("@web-atoms/web-controls/dist/form/HelpPopup", { message: this.helpText });
-            return;
-        }
-
-        if (this.helpLink) {
-            // if it is http, then open it inside iframe..
-            // pending
-
-            // else
-            await n.openPage(this.helpLink);
-        }
-    }
-
-    protected preCreate() {
-        this.label = null;
-        this.error = null;
-        this.helpText = null;
-        this.helpLink = null;
-        this.helpIcon = null;
-        this.required = false;
-        this.visible = true;
-        this.fieldClass = "";
-    }
-
-    protected render(node: XNode, e?: any, creator?: any): void {
-        // following line will prevent stack overflow
-        this.render = super.render;
-        super.render(<div
-            { ... node.attributes}
-			class={Bind.oneWay(() => ({
-				"form-field": 1,
-				[this.fieldClass]: this.fieldClass,
-				"has-error": this.error,
-				"field-hidden": !this.visible
-			}))}>
-			<label
-				class="label"
-				text={Bind.oneWay(() => this.label)}
-                htmlFor={Bind.oneWay(() => this.htmlFor)}/>
-			<span
-				class="required"
-				styleVisibility={Bind.oneTime(() => this.required ? "visible" : "hidden")}>*</span>
-			<div
-				class="presenter">
-                    {... node.children as any[]}
-                </div>
-			<span
-				class="error"
-				styleDisplay={Bind.oneWay(() => this.error ? "" : "none")}
-				text={Bind.oneWay(() => this.error)}></span>
-		</div>);
-
-        const first = this.element.getElementsByTagName("input")[0];
-        if (first) {
-            if (!first.id) {
-                first.id = `webAtomsFormFieldInputNumber${inputID++}`;
-            }
-            this.htmlFor = first.id;
-        }
-    }
-
-}