@web-atoms/web-controls 2.1.3 → 2.1.7

package/dist/form/AtomField.js

@@ -45,7 +45,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
             return (this.helpText || this.helpLink) ? true : false;
         }
         onPropertyChanged(name) {
-            var _a, _b;
+            var _a;
             switch (name) {
                 case "error":
                     AtomBinder_1.AtomBinder.refreshValue(this, "hasError");
@@ -60,21 +60,27 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
                         return;
                     }
                     this.removeAllChildren(this.contentPresenter);
-                    const e = (_b = (_a = this.content) === null || _a === void 0 ? void 0 : _a.element) !== null && _b !== void 0 ? _b : this.content;
-                    if (!e) {
+                    const content = this.content;
+                    if (!content) {
                         return;
                     }
-                    if (typeof e === "string") {
-                        this.contentPresenter.appendChild(document.createTextNode(e));
-                        return;
-                    }
-                    this.contentPresenter.appendChild(e);
-                    const input = e.tagName === "INPUT" ? e : e.getElementsByTagName("input")[0];
-                    if (input) {
-                        if (!input.id) {
-                            input.id = `__ID__formElementInput${inputID++}`;
+                    for (const iterator of content) {
+                        const e = (_a = iterator === null || iterator === void 0 ? void 0 : iterator.element) !== null && _a !== void 0 ? _a : iterator;
+                        if (!e) {
+                            continue;
+                        }
+                        if (typeof e === "string") {
+                            this.contentPresenter.appendChild(document.createTextNode(e));
+                            return;
+                        }
+                        this.contentPresenter.appendChild(e);
+                        const input = e.tagName === "INPUT" ? e : e.getElementsByTagName("input")[0];
+                        if (input) {
+                            if (!input.id) {
+                                input.id = `__ID__formElementInput${inputID++}`;
+                            }
+                            this.htmlFor = input.id;
                         }
-                        this.htmlFor = input.id;
                     }
                     break;
             }
@@ -167,9 +173,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         BindableProperty_1.BindableProperty,
         __metadata("design:type", Object)
     ], AtomFieldControl.prototype, "htmlFor", void 0);
-    function AtomField({ label, error, helpText, helpLink, helpIcon, required, visible = true, fieldClass = null, baseClass: controlClass = AtomFieldControl }, child) {
-        const ControlClass = controlClass;
-        return XNode_1.default.create(ControlClass, { label: label, error: error, helpIcon: helpIcon, helpLink: helpLink, helpText: helpText, required: required, visible: visible, fieldClass: fieldClass, content: child });
+    function AtomField(attributes, ...children) {
+        var _a, _b, _c;
+        const ControlClass = (_a = attributes.baseClass) !== null && _a !== void 0 ? _a : AtomFieldControl;
+        (_b = attributes.visible) !== null && _b !== void 0 ? _b : (attributes.visible = true);
+        (_c = attributes.fieldClass) !== null && _c !== void 0 ? _c : (attributes.fieldClass = null);
+        return XNode_1.default.create(ControlClass, Object.assign({}, attributes, { content: children }));
     }
     exports.default = AtomField;
 });

package/dist/form/AtomField.js.map

@@ -1 +1 @@
-{"version":3,"file":"AtomField.js","sourceRoot":"","sources":["../../src/form/AtomField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AtomField.js","sourceRoot":"","sources":["../../src/form/AtomField.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-atoms/web-controls",
-  "version": "2.1.3",
+  "version": "2.1.7",
   "description": "HTML controls for web atoms core",
   "main": "index.js",
   "scripts": {

package/src/basic/Button.tsx

@@ -0,0 +1,97 @@
+import Colors from "@web-atoms/core/dist/core/Colors";
+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";
+
+export interface IButton {
+    id?: string;
+    icon?: string;
+    text?: string;
+    eventClick?: any;
+    href?: string;
+    target?: string;
+    title?: string;
+    styleDisplay?: string;
+    class?: string;
+    isVisible?: any;
+    subClass?: string;
+}
+
+const css = CSS(
+    StyleRule()
+    .padding(8)
+    .marginLeft(3)
+    .marginRight(3)
+    .roundBorderFull()
+    .display("inline-block")
+    .height(40)
+    .minWidth(40)
+    .defaultBoxShadow()
+    .cursor("pointer")
+    .backgroundColor(Colors.transparent)
+    .hoverBackgroundColor(Colors.lightGreen)
+    .and(StyleRule(".pressed")
+        .backgroundColor(Colors.lightSteelBlue)
+    )
+    .child(StyleRule("label.label")
+        .display("flex")
+        .alignItems("center")
+        .gap("5px")
+        .child(StyleRule(".fad")
+            .fontSize(18)
+            .width("100%")
+            .color(Colors.purple.withAlphaPercent(0.5))
+            .cursor("pointer")
+            .and(StyleRule(".red")
+                .color(Colors.red)
+            )
+        )
+        .child(StyleRule("span")
+            .whiteSpace("nowrap")
+        )
+    )
+);
+
+export default function Button({
+    id,
+    icon,
+    text,
+    eventClick,
+    href,
+    target,
+    title,
+    styleDisplay,
+    class: className,
+    subClass
+}: IButton) {
+
+    const cn = className ?? ( subClass
+        ? subClass + " " + css
+        : css
+    );
+
+    if (href) {
+
+        if (text) {
+            return <a id={id}
+                class={cn}
+                target={target}
+                title={title}
+                styleDisplay={styleDisplay}
+                >
+                <label class="label">
+                    <i class={icon}/>
+                    { text && <span text={text}/> }
+                </label>
+            </a>;
+        }
+    }
+    return <button id={id} class={cn} eventClick={eventClick} title={title} styleDisplay={styleDisplay}>
+            <label class="label">
+                <i class={icon}/>
+                { text && <span text={text}/> }
+            </label>
+        </button>;
+}
+
+Button.className = css;

package/src/basic/Checkbox.tsx

@@ -0,0 +1,48 @@
+import Colors from "@web-atoms/core/dist/core/Colors";
+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";
+
+const css = CSS(
+    StyleRule("check-box")
+    .display("inline-block")
+    .child(
+        StyleRule("label")
+        .display("flex")
+        .paddingLeft(5)
+        .paddingRight(5)
+        .child(
+
+            StyleRule("input[type=checkbox]")
+            .borderRadius(3)
+            .margin(0)
+            .padding(0)
+            .alignSelf("center")
+        )
+        .child(
+            StyleRule("span")
+            .alignSelf("center")
+            .whiteSpace("nowrap")
+            .marginLeft(5)
+            .flexStretch()
+
+        ))
+);
+
+export default function Checkbox({
+    checked,
+    text
+}: {
+    checked: any,
+    text: string
+}) {
+    return <div class={css}>
+        <label>
+            <input
+                type="checkbox"
+                checked={checked}/>
+            <span
+                text={text}></span>
+        </label>
+    </div>;
+}

package/src/basic/IElement.ts

@@ -0,0 +1,10 @@
+export default interface IElement {
+    subClass?: string;
+    icon?: string;
+    class?: string;
+    title?: string;
+    eventClick?: string;
+    href?: string;
+    text?: string;
+    styleDisplay?: any;
+}

package/src/basic/Input.tsx

@@ -0,0 +1,30 @@
+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";
+
+const css = CSS(
+    StyleRule("input")
+    .display("inline-block")
+    .child(
+        StyleRule("input[type=input]")
+        .margin(0)
+        .padding(5)
+        .height(25)
+        .marginRight(5)
+        .outline("none")
+        .alignSelf("center")
+    )
+);
+
+export default function Input({
+    value,
+    placeholder
+}:{
+    value:string,
+    placeholder: string
+}){
+    return <div class={css}>
+           <input type="input"
+           placeholder={placeholder} />
+    </div>;
+}

package/src/basic/Panel.tsx

@@ -0,0 +1,43 @@
+import Colors from "@web-atoms/core/dist/core/Colors";
+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";
+
+export interface IPanelAttributes {
+    header?: string;
+    class?: string;
+}
+
+const css = CSS(StyleRule("panel")
+    .display("inline-block")
+    .padding(5)
+    .margin(3)
+    .borderRadius(9999)
+    .defaultBoxShadow()
+    .child(StyleRule(".header")
+        .backgroundColor(Colors.lightGray)
+        .borderRadius(5)
+        .padding(5)
+    ));
+
+export default function Panel(
+    {
+        header,
+        class: className
+    }: IPanelAttributes,
+    ... children: any[]) {
+
+    className = className ? css + " " + className : css;
+
+    if (header) {
+        return <div class={className}>
+            <label class="header">{header}</label>
+            { ... children }
+        </div>;
+    }
+
+    return <div class={className}>
+        { ... children }
+    </div>;
+
+}

package/src/basic/PopupButton.tsx

@@ -0,0 +1,146 @@
+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 { IDisposable } from "@web-atoms/core/dist/core/types";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import StyleRule from "@web-atoms/core/dist/style/StyleRule";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import { AtomItemsControl } from "@web-atoms/core/dist/web/controls/AtomItemsControl";
+import PopupService from "@web-atoms/core/dist/web/services/PopupService";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import combineClasses from "./combineClasses";
+import Button from "./Button";
+import IElement from "./IElement";
+
+const menuCss = CSS(StyleRule()
+    .child(StyleRule(".menu")
+        .padding(5)
+        .margin(3)
+        .borderRadius(5)
+        .cursor("pointer")
+        .hoverBackgroundColor(Colors.lightGreen)
+    )
+);
+
+export interface IMenuItem {
+    label?: string;
+    icon?: string;
+    eventClick?: any;
+    href?: string;
+    target?: string;
+    [key: string]: any;
+}
+
+export function MenuItem({
+    label,
+    icon,
+    eventClick,
+    href,
+    target,
+    ... others
+}: IMenuItem) {
+
+    if (label) {
+        return <div class="menu" eventClick={eventClick} { ... others }>
+            <i class={icon}/>
+        </div>;
+    }
+    return <div class="menu" eventClick={eventClick} { ... others }>
+        <i class={icon}/>
+    </div>;
+}
+
+export class MenuItemTemplate extends AtomControl {
+
+    public data: IMenuItem;
+
+    public create() {
+        this.render(<div
+            class="menu"
+            eventClick={Bind.event(() => this.app.runAsync(() => this.data.eventClick()))}
+            >
+            <i
+                styleDisplay={Bind.oneWay(() => this.data.icon ? "" : "none")}
+                class={Bind.oneWay(() => this.data.icon)}/>
+            <span
+                styleDisplay={Bind.oneWay(() => this.data.label ? "" : "none")}
+                text={Bind.oneWay(() => this.data.label)}></span>
+        </div>);
+    }
+}
+
+class PopupMenuButton extends AtomControl {
+
+    @BindableProperty
+    public subClass: string;
+
+    @BindableProperty
+    public icon: string;
+
+    @BindableProperty
+    public text: string;
+
+    @BindableProperty
+    public menus: IMenuItem[];
+
+    private popup: IDisposable;
+
+    constructor(app, e) {
+        super(app, e ?? document.createElement("button"));
+    }
+
+    public preCreate() {
+        super.preCreate();
+        this.popup = null;
+        this.text = null;
+        this.icon = null;
+        this.subClass = null;
+        this.render(<button
+            class={Bind.oneWay(() => combineClasses(Button.className, this.popup ? "pressed" : null, this.subClass))}
+            eventClick={Bind.event(() => this.openPopup())}>
+            <label class="label">
+                <i class={Bind.oneWay(() => this.icon)}/>
+                <span
+                    styleDisplay={Bind.oneWay(() => this.text ? "" : "none")}
+                    text={Bind.oneWay(() => this.text)}/>
+            </label>
+        </button>);
+    }
+
+    private openPopup() {
+        if (this.popup) {
+            this.popup.dispose();
+            return;
+        }
+
+        const menus = this.menus;
+
+        class Popup extends AtomControl {
+            protected create(): void {
+                this.render(<div class={menuCss}>
+                    { ... menus}
+                </div>);
+            }
+        }
+        const items = new Popup(this.app, document.createElement("div"));
+        items.registerDisposable({
+            dispose: () => {
+                this.popup = null;
+            }
+        });
+        items.bindEvent(items.element, "click", () => {
+            setTimeout(() => {
+            this.openPopup();
+            }, 100);
+        });
+        const popupService = this.app.resolve(PopupService);
+        this.popup = popupService.show(this.element, items);
+    }
+}
+
+export default function PopupButton( props: IElement,  ... menus: IMenuItem[]) {
+    return <PopupMenuButton
+        { ... props }
+        menus={menus}
+        />;
+}

package/src/basic/Switch.tsx

@@ -0,0 +1,110 @@
+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";
+
+/**
+ * Original source = https://www.htmllion.com/css3-toggle-switch-button.html
+ */
+
+const css = CSS(StyleRule()
+	.position("relative")
+	.display("inline-block")
+	.verticalAlign("top")
+	.width(70)
+	.height(30)
+	.padding(3)
+	.margin("0 10px 10px 0")
+	.background("linear-gradient(to bottom, #eeeeee, #FFFFFF 25px)" as any)
+	.backgroundImage("-webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px)")
+	.borderRadius(18)
+	.boxShadow("inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05)")
+	.cursor("pointer")
+	.boxSizing("content-box")
+	.child(StyleRule(".switch-input")
+		.absolutePosition({ top: 0, left: 0})
+		.opacity(0 as any)
+		.boxSizing("content-box")
+	)
+	.child(StyleRule(".switch-label")
+		.position("relative")
+		.display("block")
+		.height("inherit")
+		.fontSize(10)
+		.textTransform("uppercase")
+		.backgroundColor("#eceeef")
+		.borderRadius("inherit")
+		.boxShadow("inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15)")
+		.boxSizing("content-box")
+		.and(StyleRule(":before, .switch-label:after")
+			.position("absolute")
+			.top("50%")
+			.marginTop("-.5em")
+			.lineHeight("1")
+			.webkitTransition("inherit")
+			.transition("inherit")
+			.boxSizing("content-box")
+		)
+		.and(StyleRule(":before")
+			.content("attr(data-off)" as any)
+			.right(11)
+			.color("#aaaaaa")
+			.textShadow("0 1px rgba(255, 255, 255, 0.5)")
+		)
+		.and(StyleRule(":after")
+			.content("attr(data-on)" as any)
+			.left(11)
+			.color("#FFFFFF")
+			.textShadow("0 1px rgba(0, 0, 0, 0.2)")
+			.opacity("0")
+		)
+	)
+	.child(StyleRule(".switch-input:checked ~ .switch-label")
+		.backgroundColor("#E1B42B")
+		.boxShadow("inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2)")
+	)
+	.child(StyleRule(".switch-input:checked ~ .switch-label:before")
+		.opacity("0")
+	)
+	.child(StyleRule(".switch-input:checked ~ .switch-label:after")
+		.opacity("1")
+	)
+	.child(StyleRule(".switch-handle")
+		.absolutePosition({top: 4, left: 4, width: 28, height: 28})
+		.background("linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0)" as any)
+		.borderRadius("100%")
+		.boxShadow("1px 1px 5px rgba(0, 0, 0, 0.2)")
+		.and(StyleRule(":before")
+			.content("")
+			.absolutePosition({ top: "50%", left: "50%", width: 12, height: 12 })
+			.background("linear-gradient(to bottom, #eeeeee, #FFFFFF)" as any)
+			.borderRadius(6)
+			.boxShadow("inset 0 1px rgba(0, 0, 0, 0.02)")
+		)
+	)
+	.child(StyleRule(".switch-input:checked ~ .switch-handle")
+		.left(44)
+		.boxShadow("-1px 1px 5px rgba(0, 0, 0, 0.2)")
+	)
+	.child(StyleRule(".switch-label, .switch-handle")
+		.transition("All 0.3s ease")
+	)
+);
+
+export interface ISwitch {
+	checked;
+	onLabel?: string;
+	offLabel?: string;
+}
+
+export default function Switch({
+	checked,
+	onLabel,
+	offLabel
+}: ISwitch) {
+
+    return <label class={css}>
+	    <input class="switch-input" type="checkbox" checked={checked} />
+	    <span class="switch-label" data-on={onLabel ?? "On"} data-off={offLabel ?? "Off"}></span>
+	    <span class="switch-handle"></span>
+    </label>;
+}

package/src/basic/combineClasses.ts

@@ -0,0 +1,3 @@
+export default function combineClasses(... names: string[]) {
+    return names.filter((n) => n).join(" ");
+}

package/src/form/AtomField.tsx

@@ -71,21 +71,27 @@ class AtomFieldControl extends AtomControl {
                     return;
                 }
                 this.removeAllChildren(this.contentPresenter);
-                const e = this.content?.element ?? this.content as HTMLElement;
-                if (!e) {
+                const content = this.content;
+                if (!content) {
                     return;
                 }
-                if (typeof e === "string") {
-                    this.contentPresenter.appendChild(document.createTextNode(e));
-                    return;
-                }
-                this.contentPresenter.appendChild(e);
-                const input = e.tagName === "INPUT" ? e : e.getElementsByTagName("input")[0];
-                if (input) {
-                    if (!input.id) {
-                        input.id = `__ID__formElementInput${inputID++}`;
+                for (const iterator of content) {
+                    const e = iterator?.element ?? iterator as HTMLElement;
+                    if (!e) {
+                        continue;
+                    }
+                    if (typeof e === "string") {
+                        this.contentPresenter.appendChild(document.createTextNode(e));
+                        return;
+                    }
+                    this.contentPresenter.appendChild(e);
+                    const input = e.tagName === "INPUT" ? e : e.getElementsByTagName("input")[0];
+                    if (input) {
+                        if (!input.id) {
+                            input.id = `__ID__formElementInput${inputID++}`;
+                        }
+                        this.htmlFor = input.id;
                     }
-                    this.htmlFor = input.id;
                 }
                 break;
         }
@@ -157,29 +163,15 @@ export interface IFieldAttributes {
     visible?;
     fieldClass?;
     baseClass?: IClassOf<AtomFieldControl>;
+    [key: string]: any;
 }
 
-export default function AtomField({
-    label,
-    error,
-    helpText,
-    helpLink,
-    helpIcon,
-    required,
-    visible = true,
-    fieldClass = null,
-    baseClass: controlClass = AtomFieldControl
-}: IFieldAttributes,              child: XNode) {
-    const ControlClass = controlClass;
+export default function AtomField( attributes: IFieldAttributes, ... children: XNode[]) {
+    const ControlClass = attributes.baseClass ?? AtomFieldControl;
+    attributes.visible ??= true;
+    attributes.fieldClass ??= null;
     return <ControlClass
-        label={label}
-        error={error}
-        helpIcon={helpIcon}
-        helpLink={helpLink}
-        helpText={helpText}
-        required={required}
-        visible={visible}
-        fieldClass={fieldClass}
-        content={child}
+        { ... attributes}
+        content={children}
         />;
 }