cedro 0.1.9 → 0.1.10

package/src/ui/select.ui.tsx

@@ -0,0 +1,143 @@
+import "./styles/select.css";
+import { IconButton } from "./IconButton.ui";
+import { Menu } from "./menu.ui";
+import { Widget } from "./widget.ui";
+import { SelectItem } from "../types/select.item.type";
+import { normalizeWidget, WidgetProps } from "./widget.builder";
+import { UID } from "../core/uid";
+
+export class Select extends Widget {
+    menu: Menu;
+    text: string;
+    title: string;
+
+    items: SelectItem[];
+
+    selectedItem: SelectItem | null;
+
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "div", parent);
+        this.menu = new Menu(this.id + ".menu", this.id, null);
+        this.text = "";
+        this.title = "";
+        this.addClass("WUISelect");
+        this.items = [];
+        this.selectedItem = null;
+        this.subscribe({
+            event: "click",
+            then: () => {
+                this.menu.clearOptions();
+                this.items.forEach((item) => {
+                    this.menu.addOption(item.id, item.icon, item.label);
+                });
+
+                this.menu.wakeUp();
+
+                if (this.getBody().clientWidth > this.menu.getBody().clientWidth) {
+                    this.menu.setW(this.getBody().clientWidth);
+                    this.menu.resize();
+                }
+            },
+        });
+
+        this.menu.subscribe({
+            event: "option-clicked",
+            then: (_e, clickedOption) => {
+                const option = clickedOption as IconButton;
+
+                const fintOption = this.items.find((item) => item.id === option.id);
+
+                if (fintOption) {
+                    this.selectedItem = fintOption;
+                }
+
+                const selectedText = this.selectedItem?.label;
+                if (selectedText) {
+                    this.setValue(selectedText);
+                } else {
+                    this.setValue("");
+                }
+            },
+        });
+    }
+
+    public setValue(value: string) {
+        this.text = value;
+    }
+
+    public setTitle(title: string) {
+        this.title = title;
+    }
+
+    addItem(id: string, label: string, icon: string) {
+        this.items.push(new SelectItem(id, label, icon));
+    }
+}
+
+export type WSelectProps = WidgetProps & {
+    title?: string;
+    value?: string;
+    children: any;
+};
+
+export type WSelectItemProps = {
+    id: string;
+    label?: string | null;
+    icon?: string | null;
+};
+
+export const WSelect = (props: WSelectProps) => {
+    if (!props.id) {
+        props.id = "Select." + UID();
+    }
+
+    return normalizeWidget(
+        <div id={props.id} w-select w-title={props.title} w-value={props.value}>
+            {props.children}
+        </div>,
+        props
+    );
+};
+
+export const WSelectItem = (props: WSelectItemProps) => {
+    return <div w-select-item id={props.id} w-label={props.label} w-icon={props.icon}></div>;
+};
+
+export function createSelect(id: string, content: any, parent: Widget | null = null): Select {
+    let newSelect = new Select(id, parent);
+
+    const dataTitle = content.getAttribute("w-title");
+    const dataValue = content.getAttribute("w-value");
+    const dataWidth = content.getAttribute("w-width");
+    const dataHeight = content.getAttribute("w-height");
+
+    if (dataTitle) {
+        newSelect.setTitle(dataTitle);
+    }
+
+    if (dataValue) {
+        newSelect.setValue(dataValue);
+    }
+
+    if (dataWidth) {
+        newSelect.setInitialW(dataWidth);
+    }
+
+    if (dataHeight) {
+        newSelect.setInitialH(dataHeight);
+    }
+
+    content.childNodes.forEach((menuItem: HTMLElement, index: number) => {
+        if (menuItem.getAttribute("w-select-item") !== null) {
+            const itemId = menuItem.getAttribute("id");
+            const itemLabel = menuItem.getAttribute("w-label");
+            const itemIcon = menuItem.getAttribute("w-icon");
+
+            if (itemId !== null) {
+                newSelect.addItem(itemId, itemLabel || "Unnamed" + index, itemIcon || "");
+            }
+        }
+    });
+
+    return newSelect;
+}

package/src/ui/styles/button.css

@@ -2,7 +2,8 @@
 /*************************************TEXT*******************************/
 /************************************************************************/
 
-.WUIButton-text {
+.WUIButton-text,
+.WUIButton-text span {
     cursor: pointer;
     font-weight: 500;
     text-align: center;
@@ -14,7 +15,8 @@
         border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
-.WUIButton-text-color-primary {
+.WUIButton-text-color-primary,
+.WUIButton-text-color-primary span {
     color: var(--palette-text-primary);
     background-color: transparent;
 }
@@ -24,7 +26,13 @@
     background-color: var(--palette-primary-light);
 }
 
-.WUIButton-text-color-secondary {
+.WUIButton-text-color-primary:hover span {
+    color: var(--palette-primary-text-main);
+    background-color: transparent;
+}
+
+.WUIButton-text-color-secondary,
+.WUIButton-text-color-secondary span {
     color: var(--palette-text-primary);
     background-color: transparent;
 }
@@ -34,17 +42,29 @@
     background-color: var(--palette-secondary-light);
 }
 
-.WUIButton-text-color-error {
+.WUIButton-text-color-secondary:hover span {
+    color: var(--palette-secondary-text-light);
+    background-color: transparent;
+}
+
+.WUIButton-text-color-error,
+.WUIButton-text-color-error span {
     color: var(--palette-text-secondary);
     background-color: transparent;
 }
 
 .WUIButton-text-color-error:hover {
     color: var(--palette-text-secondary);
-    background-color: var(--palette-error-text-light);
+    background-color: var(--palette-error-light);
+}
+
+.WUIButton-text-color-error:hover span {
+    color: var(--palette-text-secondary);
+    background-color: transparent;
 }
 
-.WUIButton-text-color-warning {
+.WUIButton-text-color-warning,
+.WUIButton-text-color-warning span {
     color: var(--palette-text-secondary);
     background-color: transparent;
 }
@@ -54,7 +74,13 @@
     background-color: var(--palette-warning-light);
 }
 
-.WUIButton-text-color-info {
+.WUIButton-text-color-warning:hover span {
+    color: var(--palette-warning-text-light);
+    background-color: transparent;
+}
+
+.WUIButton-text-color-info,
+.WUIButton-text-color-info span {
     color: var(--palette-text-secondary);
     background-color: transparent;
 }
@@ -64,7 +90,13 @@
     background-color: var(--palette-info-light);
 }
 
-.WUIButton-text-color-success {
+.WUIButton-text-color-info:hover span {
+    color: var(--palette-info-text-light);
+    background-color: transparent;
+}
+
+.WUIButton-text-color-success,
+.WUIButton-text-color-success span {
     color: var(--palette-text-secondary);
     background-color: transparent;
 }
@@ -74,6 +106,11 @@
     background-color: var(--palette-success-light);
 }
 
+.WUIButton-text-color-success:hover span {
+    color: var(--palette-success-text-light);
+    background-color: transparent;
+}
+
 /****************************************************************************/
 /*************************************OUTLINED*******************************/
 /****************************************************************************/
@@ -90,69 +127,91 @@
         border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
-.WUIButton-outlined-color-primary {
+.WUIButton-outlined span {
+    cursor: pointer;
+    font-weight: 500;
+    text-align: center;
+    background-color: transparent;
+    font-size: 1rem;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.WUIButton-outlined-color-primary,
+.WUIButton-outlined-color-primary span {
     color: var(--palette-text-primary);
     background-color: var(--palette-background-default);
     border-color: var(--palette-primary-main);
 }
 
-.WUIButton-outlined-color-primary:hover {
+.WUIButton-outlined-color-primary:hover,
+.WUIButton-outlined-color-primary:hover span {
     color: var(--palette-primary-text-light);
     background-color: var(--palette-primary-light);
     border-color: var(--palette-primary-main);
 }
 
-.WUIButton-outlined-color-secondary {
+.WUIButton-outlined-color-secondary,
+.WUIButton-outlined-color-secondary span {
     color: var(--palette-text-primary);
     background-color: var(--palette-background-default);
     border-color: var(--palette-secondary-main);
 }
 
-.WUIButton-outlined-color-secondary:hover {
+.WUIButton-outlined-color-secondary:hover,
+.WUIButton-outlined-color-secondary:hover span {
     color: var(--palette-secondary-text-light);
     background-color: var(--palette-secondary-light);
 }
 
-.WUIButton-outlined-color-error {
+.WUIButton-outlined-color-error,
+.WUIButton-outlined-color-error span {
     color: var(--palette-text-secondary);
     background-color: var(--palette-background-default);
     border-color: var(--palette-error-main);
 }
 
-.WUIButton-outlined-color-error:hover {
+.WUIButton-outlined-color-error:hover,
+.WUIButton-outlined-color-error:hover span {
     color: var(--palette-error-text-light);
     background-color: var(--palette-error-light);
 }
 
-.WUIButton-outlined-color-warning {
+.WUIButton-outlined-color-warning,
+.WUIButton-outlined-color-warning span {
     color: var(--palette-text-secondary);
     background-color: var(--palette-background-default);
     border-color: var(--palette-warning-main);
 }
 
-.WUIButton-outlined-color-warning:hover {
+.WUIButton-outlined-color-warning:hover,
+.WUIButton-outlined-color-warning:hover span {
     color: var(--palette-warning-text-light);
     background-color: var(--palette-warning-light);
 }
 
-.WUIButton-outlined-color-info {
+.WUIButton-outlined-color-info,
+.WUIButton-outlined-color-info span {
     color: var(--palette-text-secondary);
     background-color: var(--palette-background-default);
     border-color: var(--palette-info-main);
 }
 
-.WUIButton-outlined-color-info:hover {
+.WUIButton-outlined-color-info:hover,
+.WUIButton-outlined-color-info:hover span {
     color: var(--palette-info-text-light);
     background-color: var(--palette-info-light);
 }
 
-.WUIButton-outlined-color-success {
+.WUIButton-outlined-color-success,
+.WUIButton-outlined-color-success span {
     color: var(--palette-text-secondary);
     background-color: var(--palette-background-default);
     border-color: var(--palette-success-main);
 }
 
-.WUIButton-outlined-color-success:hover {
+.WUIButton-outlined-color-success:hover,
+.WUIButton-outlined-color-success:hover span {
     color: var(--palette-success-text-light);
     background-color: var(--palette-success-light);
 }
@@ -173,62 +232,85 @@
         border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
-.WUIButton-contained-color-primary {
+.WUIButton-contained span {
+    cursor: pointer;
+    font-weight: 500;
+    text-align: center;
+    background-color: transparent;
+    border: none;
+    font-size: 1rem;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.WUIButton-contained-color-primary,
+.WUIButton-contained-color-primary span {
     color: var(--palette-primary-text-main);
     background-color: var(--palette-primary-main);
 }
 
-.WUIButton-contained-color-primary:hover {
+.WUIButton-contained-color-primary:hover,
+.WUIButton-contained-color-primary:hover span {
     color: var(--palette-primary-text-dark);
     background-color: var(--palette-primary-dark);
 }
 
-.WUIButton-contained-color-secondary {
+.WUIButton-contained-color-secondary,
+.WUIButton-contained-color-secondary span {
     color: var(--palette-secondary-text-main);
     background-color: var(--palette-secondary-main);
 }
 
-.WUIButton-contained-color-secondary:hover {
+.WUIButton-contained-color-secondary:hover,
+.WUIButton-contained-color-secondary:hover span {
     color: var(--palette-secondary-text-dark);
     background-color: var(--palette-secondary-dark);
 }
 
-.WUIButton-contained-color-error {
+.WUIButton-contained-color-error,
+.WUIButton-contained-color-error span {
     color: var(--palette-error-text-main);
     background-color: var(--palette-error-main);
 }
 
-.WUIButton-contained-color-error:hover {
+.WUIButton-contained-color-error:hover,
+.WUIButton-contained-color-error:hover span {
     color: var(--palette-error-text-light);
     background-color: var(--palette-error-light);
 }
 
-.WUIButton-contained-color-warning {
+.WUIButton-contained-color-warning,
+.WUIButton-contained-color-warning span {
     color: var(--palette-warning-text-main);
     background-color: var(--palette-warning-main);
 }
 
-.WUIButton-contained-color-warning:hover {
+.WUIButton-contained-color-warning:hover,
+.WUIButton-contained-color-warning:hover span {
     color: var(--palette-warning-text-light);
     background-color: var(--palette-warning-light);
 }
 
-.WUIButton-contained-color-info {
+.WUIButton-contained-color-info,
+.WUIButton-contained-color-info span {
     color: var(--palette-info-text-main);
     background-color: var(--palette-info-main);
 }
 
-.WUIButton-contained-color-info:hover {
+.WUIButton-contained-color-info:hover,
+.WUIButton-contained-color-info:hover span {
     color: var(--palette-info-text-light);
     background-color: var(--palette-info-light);
 }
 
-.WUIButton-contained-color-success {
+.WUIButton-contained-color-success,
+.WUIButton-contained-color-success span {
     color: var(--palette-success-text-main);
     background-color: var(--palette-success-main);
 }
 
-.WUIButton-contained-color-success:hover {
+.WUIButton-contained-color-success:hover,
+.WUIButton-contained-color-success:hover span {
     color: var(palette-background-default);
     background-color: var(--palette-success-light);
 }

package/src/ui/styles/buttoncolor.css

@@ -1,8 +1,8 @@
-.WUIButtonColorInput {
-    width: 100%;
-    border: none;
-    background-color: transparent;
-    height: 100%;
-    padding: 5px;
-    margin: auto;
-}
+.WUIButtonColorInput {
+    width: 100%;
+    border: none;
+    background-color: transparent;
+    height: 100%;
+    padding: 5px;
+    margin: auto;
+}

package/src/ui/styles/container.css

@@ -0,0 +1,29 @@
+.WUIPanel-outlined {
+    background-color: transparent;
+    border-left: solid 0.13rem;
+    border-top: solid 0.13rem;
+    border-bottom: solid 0.13rem;
+    border-right: solid 0.13rem;
+    border-radius: 0.25rem;
+    border-color: var(--palette-background-light);
+    overflow: hidden;
+}
+
+.WUIPanel-contained {
+    background-color: var(--palette-background-light);
+    border-left: none;
+    border-top: none;
+    border-bottom: none;
+    border-right: none;
+    border-radius: 0.25rem;
+    overflow: hidden;
+}
+
+.WUIPanel-plain {
+    background-color: transparent;
+    border-left: none;
+    border-top: none;
+    border-bottom: none;
+    border-right: none;
+    overflow: hidden;
+}

package/src/ui/styles/icon.css

@@ -0,0 +1,29 @@
+.WUI-icon-color-primary {
+    color: var(--palette-text-primary);
+    background-color: transparent;
+}
+
+.WUI-icon-color-secondary {
+    color: var(--palette-text-secondary);
+    background-color: transparent;
+}
+
+.WUI-icon-color-success {
+    color: var(--palette-success-text-main);
+    background-color: transparent;
+}
+
+.WUI-icon-color-error {
+    color: var(--palette-error-text-main);
+    background-color: transparent;
+}
+
+.WUI-icon-color-info {
+    color: var(--palette-info-text-main);
+    background-color: transparent;
+}
+
+.WUI-icon-color-warning {
+    color: var(--palette-warning-text-main);
+    background-color: transparent;
+}

package/src/ui/styles/image.css

@@ -1,19 +1,19 @@
-.WUIImageContainer {
-    position: absolute;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.WUIImageContainer img {
-    margin: auto;
-}
-
-.WUIImageFillWidth {
-    width: 100% !important;
-}
-
-.WUIImageFillHeight {
-    height: 100% !important;
-}
+.WUIImageContainer {
+    position: absolute;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.WUIImageContainer img {
+    margin: auto;
+}
+
+.WUIImageFillWidth {
+    width: 100% !important;
+}
+
+.WUIImageFillHeight {
+    height: 100% !important;
+}

package/src/ui/styles/label.css

@@ -0,0 +1,63 @@
+.WUILabel-span {
+    margin: 0px;
+    padding: 0px;
+}
+
+.WUILabel-h1 {
+    margin: 0px;
+    padding: 0px;
+}
+
+.WUILabel-h2 {
+    margin: 0px;
+    padding: 0px;
+}
+
+.WUILabel-h3 {
+    margin: 0px;
+    padding: 0px;
+}
+
+.WUILabel-h4 {
+    margin: 0px;
+    padding: 0px;
+}
+
+.WUILabel-h5 {
+    margin: 0px;
+    padding: 0px;
+}
+
+.WUILabel-h6 {
+    margin: 0px;
+    padding: 0px;
+}
+
+.WUILabel-p {
+    margin: 0px;
+    padding: 0px;
+}
+
+.WUILabel-primary {
+    color: var(--palette-text-primary);
+}
+
+.WUILabel-secondary {
+    color: var(--palette-text-secondary);
+}
+
+.WUILabel-info {
+    color: var(--palette-info-text-main);
+}
+
+.WUILabel-success {
+    color: var(--palette-success-text-main);
+}
+
+.WUILabel-error {
+    color: var(--palette-error-text-main);
+}
+
+.WUILabel-warning {
+    color: var(--palette-warning-text-main);
+}

package/src/ui/styles/loading.css

@@ -1,12 +1,12 @@
-.WUILoading {
-    background-color: var(--palette-background-default);
-    background-image: url("loading.svg");
-    background-position: center;
-    background-repeat: no-repeat;
-    position: absolute !important;
-    left: 0px;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    opacity: 0.8;
-}
+.WUILoading {
+    background-color: var(--palette-background-default);
+    background-image: url("loading.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    position: absolute !important;
+    left: 0px;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    opacity: 0.8;
+}

package/src/ui/styles/main.css

@@ -45,6 +45,11 @@ a:hover {
     display: block;
 }
 
+.WUINonFreePosition {
+    position: absolute !important;
+    overflow: hidden !important;
+}
+
 .cssCustom {
     margin-top: 10px;
     margin-bottom: 10px;

package/src/ui/styles/progressbar.css

@@ -15,5 +15,6 @@
 
 .WUIProgressBarLabel {
     position: absolute !important;
-    color: var(--palette-primary-light);
+    color: white;
+    text-shadow: -2px 0px 2px black;
 }

package/src/ui/styles/select.css

@@ -0,0 +1,13 @@
+.WUISelect {
+    position: relative;
+    outline: none;
+    /*border-collapse: collapse;*/
+    border: 2px solid var(--palette-action-disabled);
+    border-radius: 4px;
+    box-sizing: border-box;
+    font-size: 1rem;
+    padding-left: 20px;
+    z-index: 1000;
+    background-color: var(--palette-background-default);
+    color: var(--palette-text-primary);
+}