@rettangoli/ui 0.1.20 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",

package/src/components/form/form.handlers.js

@@ -8,7 +8,7 @@ const updateAttributes = ({ form, defaultValues = {}, refs }) => {
       return;
     }
 
-    if (['inputText', 'colorPicker', 'slider', 'slider-input', 'popover-input'].includes(field.inputType)) {
+    if (['input-textarea', 'inputText', 'input-text', 'input-number', 'colorPicker', 'slider', 'slider-input', 'popover-input'].includes(field.inputType)) {
       const defaultValue = defaultValues[field.name];
       if (defaultValue === undefined || defaultValue === null) {
         ref.removeAttribute('value')
@@ -16,7 +16,7 @@ const updateAttributes = ({ form, defaultValues = {}, refs }) => {
         ref.setAttribute('value', defaultValue)
       }
     }
-    if (field.inputType === 'inputText' && field.placeholder) {
+    if (['inputText', 'input-text', 'input-textarea'].includes(field.inputType) && field.placeholder) {
       const currentPlaceholder = ref.getAttribute('placeholder')
       if (currentPlaceholder !== field.placeholder) {
         if (field.placeholder === undefined || field.placeholder === null) {
@@ -26,27 +26,6 @@ const updateAttributes = ({ form, defaultValues = {}, refs }) => {
         }
       }
     }
-    if (field.inputType === 'select' && field.placeholder) {
-      if (ref.placeholder !== field.placeholder) {
-        ref.placeholder = field.placeholder;
-      }
-    }
-    if (field.inputType === 'select') {
-      if (field.placeholder !== ref.getAttribute('placeholder')) {
-        if (field.placeholder !== undefined) {
-          ref.setAttribute('placeholder', field.placeholder)
-        } else {
-          ref.removeAttribute('placeholder');
-        }
-        ref.render();
-      }
-
-      const defaultValue = defaultValues[field.name]
-      if (defaultValue !== ref.selectedValue) {
-        ref.selectedValue = defaultValue;
-        ref.render();
-      }
-    }
   })
 }
 
@@ -108,14 +87,15 @@ export const handleInputChange = (deps, payload) => {
   const event = payload._event;
   let name = event.currentTarget.id.replace("field-", "");
   if (name && event.detail.value !== undefined) {
+    const value = event.detail.value
     store.setFormFieldValue({
       name: name,
-      value: event.detail.value,
+      value,
       props,
     });
     dispatchFormChange(
       name,
-      event.detail.value,
+      value,
       store.selectFormValues(),
       dispatchEvent,
     );

package/src/components/form/form.store.js

@@ -113,6 +113,12 @@ export const selectViewData = ({ state, props, attrs }) => {
     if (["read-only-text"].includes(field.inputType)) {
       field.defaultValue = defaultValue
     }
+    if (["select"].includes(field.inputType)) {
+      const defaultValues = props?.defaultValues;
+      if (defaultValues && defaultValues[field.name] !== undefined) {
+        field.selectedValue = defaultValues[field.name];
+      }
+    }
     if (field.inputType === "image") {
       const src = field.src;
       // Only set imageSrc if src exists and is not empty

package/src/components/form/form.view.yaml

@@ -303,25 +303,34 @@ events:
 template:
   - rtgl-view w=f p=md g=lg ${containerAttrString}:
       - rtgl-view g=sm w=f:
-          - rtgl-text s=lg: ${title}
-          - rtgl-text c=mu-fg: ${description}
+          - $if title:
+              - rtgl-text s=lg: ${title}
+          - $if description:
+              - rtgl-text c=mu-fg: ${description}
       - rtgl-view g=lg w=f:
           - $for field, i in fields:
               - rtgl-view g=md w=f:
-                  - rtgl-view g=sm:
-                      - rtgl-view d=h g=md av=c:
-                          - rtgl-text: ${field.label}
-                          - $if field.tooltip:
-                              - rtgl-svg#tooltip-icon-${field.name} svg="info" wh=16 c=mu-fg cur=help ml=xs:
-                      - rtgl-text s=sm c=mu-fg: ${field.description}
+                  - $if field.label || field.description:
+                      - rtgl-view g=sm:
+                          - rtgl-view d=h g=md av=c:
+                              - $if field.label:
+                                  - rtgl-text: ${field.label}
+                              - $if field.label && field.tooltip:
+                                  - rtgl-svg#tooltip-icon-${field.name} svg="info" wh=16 c=mu-fg cur=help ml=xs:
+                          - $if field.description:
+                              - rtgl-text s=sm c=mu-fg: ${field.description}
                   - $if field.inputType == "read-only-text":
                       - rtgl-text s=sm: ${field.defaultValue}
-                  - $if field.inputType == "inputText":
-                      - rtgl-input#field-${field.name} w=f:
+                  - $if field.inputType == "inputText" || field.inputType == 'input-text':
+                      - rtgl-input#field-${field.name} w=f min=${field.min} max=${field.max} step=${field.step}:
+                  - $if field.inputType == "input-number":
+                      - rtgl-input-number#field-${field.name} w=f:
+                  - $if field.inputType == "input-textarea":
+                      - rtgl-textarea#field-${field.name} w=f rows=${field.rows} w=f:
                   - $if field.inputType == "popover-input":
                       - rtgl-popover-input#field-${field.name} label="${field.label}":
                   - $if field.inputType == "select":
-                      - rtgl-select#field-${field.name} key=${key} w=f .options=fields[${i}].options ?no-clear=fields[${i}].noClear .addOption=fields[${i}].addOption:
+                      - rtgl-select#field-${field.name} key=${key} w=f .options=fields[${i}].options ?no-clear=fields[${i}].noClear .addOption=fields[${i}].addOption .selectedValue=#{field.selectedValue} .placeholder=#{field.placeholder}:
                   - $if field.inputType == "colorPicker":
                       - rtgl-color-picker#field-${field.name} key=${key}:
                   - $if field.inputType == "slider":

package/src/components/select/select.store.js

@@ -42,7 +42,7 @@ export const selectViewData = ({ state, props, attrs }) => {
   const currentValue = state.selectedValue !== null ? state.selectedValue : props.selectedValue;
 
   // Calculate display label from value
-  let displayLabel = attrs.placeholder || 'Select an option';
+  let displayLabel = props.placeholder || attrs.placeholder || 'Select an option';
   let isPlaceholderLabel = true;
 
   const options = props.options || [];

package/src/components/select/select.view.yaml

@@ -12,6 +12,8 @@ attrsSchema:
 propsSchema:
   type: object
   properties:
+    placeholder:
+      type: string
     options:
       type: array
       items:

package/src/entry-iife-layout.js

@@ -4,6 +4,7 @@ import RettangoliText from './primitives/text.js';
 import RettangoliImage from './primitives/image.js';
 import RettangoliSvg from './primitives/svg.js';
 import RettangoliInput from './primitives/input.js';
+import RettangoliInputNumber from './primitives/input-number.js';
 import RettangoliTextArea from './primitives/textarea.js';
 import RettangoliDialog from './primitives/dialog.js';
 
@@ -14,5 +15,6 @@ customElements.define("rtgl-text", RettangoliText({}));
 customElements.define("rtgl-image", RettangoliImage({}));
 customElements.define("rtgl-svg", RettangoliSvg({}));
 customElements.define("rtgl-input", RettangoliInput({}));
+customElements.define("rtgl-input-number", RettangoliInputNumber({}));
 customElements.define("rtgl-textarea", RettangoliTextArea({}));
 customElements.define("rtgl-dialog", RettangoliDialog({}));

package/src/entry-iife-ui.js

@@ -4,6 +4,7 @@ import RettangoliText from './primitives/text.js';
 import RettangoliImage from './primitives/image.js';
 import RettangoliSvg from './primitives/svg.js';
 import RettangoliInput from './primitives/input.js';
+import RettangoliInputNumber from './primitives/input-number.js';
 import RettangoliTextArea from './primitives/textarea.js';
 import RettangoliColorPicker from './primitives/colorPicker.js';
 import RettangoliSlider from './primitives/slider.js';
@@ -16,6 +17,7 @@ customElements.define("rtgl-text", RettangoliText({}));
 customElements.define("rtgl-image", RettangoliImage({}));
 customElements.define("rtgl-svg", RettangoliSvg({}));
 customElements.define("rtgl-input", RettangoliInput({}));
+customElements.define("rtgl-input-number", RettangoliInputNumber({}));
 customElements.define("rtgl-textarea", RettangoliTextArea({}));
 customElements.define("rtgl-color-picker", RettangoliColorPicker({}));
 customElements.define("rtgl-slider", RettangoliSlider({}));

package/src/index.js

@@ -4,6 +4,7 @@ import RettangoliText from './primitives/text.js';
 import RettangoliImage from './primitives/image.js';
 import RettangoliSvg from './primitives/svg.js';
 import RettangoliInput from './primitives/input.js';
+import RettangoliInputNumber from './primitives/input-number.js';
 import RettangoliTextArea from './primitives/textarea.js';
 import RettangoliDialog from './primitives/dialog.js';
 import RettangoliPopover from './primitives/popover.js';
@@ -16,6 +17,7 @@ export {
     RettangoliImage,
     RettangoliSvg,
     RettangoliInput,
+    RettangoliInputNumber,
     RettangoliTextArea,
     RettangoliDialog,
     RettangoliPopover,

package/src/primitives/input-number.js

@@ -0,0 +1,288 @@
+import {
+  css,
+  dimensionWithUnit,
+  convertObjectToCssString,
+  styleMapKeys,
+  permutateBreakpoints,
+} from "../common.js";
+import cursorStyles from "../styles/cursorStyles.js";
+import marginStyles from "../styles/marginStyles.js";
+
+// Internal implementation without uhtml
+class RettangoliInputNumberElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliInputNumberElement.styleSheet) {
+      RettangoliInputNumberElement.styleSheet = new CSSStyleSheet();
+      RettangoliInputNumberElement.styleSheet.replaceSync(css`
+        :host {
+          display: contents;
+        }
+        input {
+          background-color: var(--background);
+          font-size: var(--sm-font-size);
+          font-weight: var(--sm-font-weight);
+          line-height: var(--sm-line-height);
+          letter-spacing: var(--sm-letter-spacing);
+          border: 1px solid var(--ring);
+          border-radius: var(--border-radius-lg);
+          padding-left: var(--spacing-md);
+          padding-right: var(--spacing-md);
+          height: 32px;
+          color: var(--foreground);
+          outline: none;
+        }
+        :host([s="sm"]) input {
+          font-size: var(--xs-font-size);
+          font-weight: var(--xs-font-weight);
+          line-height: var(--xs-line-height);
+          letter-spacing: var(--xs-letter-spacing);
+          padding-left: var(--spacing-md);
+          padding-right: var(--spacing-md);
+          height: 24px;
+        }
+        input:focus {
+          border-color: var(--foreground);
+        }
+        input:disabled {
+          cursor: not-allowed;
+        }
+        ${marginStyles}
+        ${cursorStyles}
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliInputNumberElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow.adoptedStyleSheets = [RettangoliInputNumberElement.styleSheet];
+
+    // Initialize style tracking properties
+    this._styles = {
+      default: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+    };
+    this._lastStyleString = "";
+
+    // Create initial DOM structure
+    this._inputElement = document.createElement('input');
+    this._styleElement = document.createElement('style');
+
+    this.shadow.appendChild(this._styleElement);
+    this.shadow.appendChild(this._inputElement);
+
+    // Bind event handler
+    this._inputElement.addEventListener('input', this._onChange);
+  }
+
+  static get observedAttributes() {
+    return [
+      "key",
+      "type",
+      "placeholder",
+      "disabled",
+      "value",
+      "step",
+      "min",
+      "max",
+      "s",
+      ...permutateBreakpoints([
+        ...styleMapKeys,
+        "wh",
+        "w",
+        "h",
+        "hide",
+        "show",
+        "op",
+        "z",
+      ])
+    ];
+  }
+
+  get value() {
+    return this._inputElement.value;
+  }
+
+  set value(newValue) {
+    this._inputElement.value = newValue;
+  }
+
+  focus() {
+    this._inputElement.focus();
+  }
+
+  _onChange = (event) => {
+    const inputValue = this._inputElement.value;
+    let numericValue = parseFloat(inputValue);
+
+    // Only process if the value is a valid number (not NaN)
+    if (!isNaN(numericValue)) {
+      // Enforce minimum value if set
+      const minAttr = this.getAttribute("min");
+      if (minAttr !== null) {
+        const minValue = parseFloat(minAttr);
+        if (!isNaN(minValue) && numericValue < minValue) {
+          numericValue = minValue;
+          this._inputElement.value = minValue.toString();
+        }
+      }
+
+      // Enforce maximum value if set
+      const maxAttr = this.getAttribute("max");
+      if (maxAttr !== null) {
+        const maxValue = parseFloat(maxAttr);
+        if (!isNaN(maxValue) && numericValue > maxValue) {
+          numericValue = maxValue;
+          this._inputElement.value = maxValue.toString();
+        }
+      }
+
+      this.dispatchEvent(new CustomEvent('input-change', {
+        detail: {
+          value: numericValue,
+        },
+      }));
+    }
+  };
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'value') {
+      requestAnimationFrame((() => {
+        const value = this.getAttribute("value");
+        this._inputElement.value = value ?? "";
+      }))
+    }
+
+    if (name === 'placeholder') {
+      requestAnimationFrame((() => {
+        const placeholder = this.getAttribute("placeholder");
+        if (placeholder === undefined || placeholder === 'null') {
+          this._inputElement.removeAttribute('placeholder');
+        } else {
+          this._inputElement.setAttribute('placeholder', placeholder ?? "");
+        }
+      }))
+    }
+
+    // Handle input-specific attributes first
+    if (["type", "disabled", "step", "min", "max", "s"].includes(name)) {
+      this._updateInputAttributes();
+      return;
+    }
+
+    // Reset styles for fresh calculation
+    this._styles = {
+      default: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+    };
+
+    ["default", "sm", "md", "lg", "xl"].forEach((size) => {
+      const addSizePrefix = (tag) => {
+        return `${size === "default" ? "" : `${size}-`}${tag}`;
+      };
+
+      const wh = this.getAttribute(addSizePrefix("wh"));
+      const width = dimensionWithUnit(
+        wh === null ? this.getAttribute(addSizePrefix("w")) : wh,
+      );
+      const height = dimensionWithUnit(
+        wh === null ? this.getAttribute(addSizePrefix("h")) : wh,
+      );
+      const opacity = this.getAttribute(addSizePrefix("op"));
+      const zIndex = this.getAttribute(addSizePrefix("z"));
+
+      if (zIndex !== null) {
+        this._styles[size]["z-index"] = zIndex;
+      }
+
+      if (opacity !== null) {
+        this._styles[size].opacity = opacity;
+      }
+
+      if (width === "f") {
+        this._styles[size].width = "var(--width-stretch)";
+      } else if (width !== undefined) {
+        this._styles[size].width = width;
+        this._styles[size]["min-width"] = width;
+        this._styles[size]["max-width"] = width;
+      }
+
+      if (height === "f") {
+        this._styles[size].height = "100%";
+      } else if (height !== undefined) {
+        this._styles[size].height = height;
+        this._styles[size]["min-height"] = height;
+        this._styles[size]["max-height"] = height;
+      }
+
+      if (this.hasAttribute(addSizePrefix("hide"))) {
+        this._styles[size].display = "none !important";
+      }
+
+      if (this.hasAttribute(addSizePrefix("show"))) {
+        this._styles[size].display = "block !important";
+      }
+    });
+
+    // Update styles only if changed - targeting input element
+    const newStyleString = convertObjectToCssString(this._styles, 'input');
+    if (newStyleString !== this._lastStyleString) {
+      this._styleElement.textContent = newStyleString;
+      this._lastStyleString = newStyleString;
+    }
+  }
+
+  _updateInputAttributes() {
+    const type = this.getAttribute("type") || "number";
+    const step = this.getAttribute("step");
+    const min = this.getAttribute("min");
+    const max = this.getAttribute("max");
+    const isDisabled = this.hasAttribute('disabled');
+
+    this._inputElement.setAttribute("type", type);
+
+    if (step !== null) {
+      this._inputElement.setAttribute("step", step);
+    } else {
+      this._inputElement.removeAttribute("step");
+    }
+
+    if (min !== null) {
+      this._inputElement.setAttribute("min", min);
+    } else {
+      this._inputElement.removeAttribute("min");
+    }
+
+    if (max !== null) {
+      this._inputElement.setAttribute("max", max);
+    } else {
+      this._inputElement.removeAttribute("max");
+    }
+
+    if (isDisabled) {
+      this._inputElement.setAttribute("disabled", "");
+    } else {
+      this._inputElement.removeAttribute("disabled");
+    }
+  }
+
+  connectedCallback() {
+    this._updateInputAttributes();
+  }
+}
+
+// Export factory function to maintain API compatibility
+export default ({ render, html }) => {
+  // Note: render and html parameters are accepted but not used
+  // This maintains backward compatibility with existing code
+  return RettangoliInputNumberElement;
+};

package/src/primitives/textarea.js

@@ -1,4 +1,10 @@
-import { css, dimensionWithUnit } from "../common.js";
+import {
+  css,
+  dimensionWithUnit,
+  convertObjectToCssString,
+  styleMapKeys,
+  permutateBreakpoints,
+} from "../common.js";
 import cursorStyles from "../styles/cursorStyles.js";
 import marginStyles from "../styles/marginStyles.js";
 
@@ -43,10 +49,23 @@ class RettangoliTextAreaElement extends HTMLElement {
     RettangoliTextAreaElement.initializeStyleSheet();
     this.shadow = this.attachShadow({ mode: "closed" });
     this.shadow.adoptedStyleSheets = [RettangoliTextAreaElement.styleSheet];
-    
+
+    // Initialize style tracking properties
+    this._styles = {
+      default: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+    };
+    this._lastStyleString = "";
+
     // Create initial DOM structure
     this._textareaElement = document.createElement('textarea');
     this._textareaElement.setAttribute('type', 'text');
+    this._styleElement = document.createElement('style');
+
+    this.shadow.appendChild(this._styleElement);
     this.shadow.appendChild(this._textareaElement);
 
     // Bind event handler
@@ -62,7 +81,26 @@ class RettangoliTextAreaElement extends HTMLElement {
   };
 
   static get observedAttributes() {
-    return ["key", "w", "ellipsis", "cols", "rows", "placeholder", "value"];
+    return [
+      "key",
+      "type",
+      "placeholder",
+      "disabled",
+      "value",
+      "cols",
+      "rows",
+      "ellipsis",
+      ...permutateBreakpoints([
+        ...styleMapKeys,
+        "wh",
+        "w",
+        "h",
+        "hide",
+        "show",
+        "op",
+        "z",
+      ])
+    ];
   }
 
   get value() {
@@ -78,22 +116,99 @@ class RettangoliTextAreaElement extends HTMLElement {
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
-    // Handle key attribute change - reset value
-    if (name === "key" && oldValue !== newValue) {
-      requestAnimationFrame(() => {
+    if (name === 'value') {
+      requestAnimationFrame((() => {
         const value = this.getAttribute("value");
         this._textareaElement.value = value ?? "";
-      });
+      }))
+    }
+
+    if (name === 'placeholder') {
+      requestAnimationFrame((() => {
+        const placeholder = this.getAttribute("placeholder");
+        if (placeholder === undefined || placeholder === 'null') {
+          this._textareaElement.removeAttribute('placeholder');
+        } else {
+          this._textareaElement.setAttribute('placeholder', placeholder ?? "");
+        }
+      }))
+    }
+
+    // Handle textarea-specific attributes first
+    if (["cols", "rows", "disabled"].includes(name)) {
+      this._updateTextareaAttributes();
       return;
     }
-    this._updateTextareaAttributes();
+
+    // Reset styles for fresh calculation
+    this._styles = {
+      default: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+    };
+
+    ["default", "sm", "md", "lg", "xl"].forEach((size) => {
+      const addSizePrefix = (tag) => {
+        return `${size === "default" ? "" : `${size}-`}${tag}`;
+      };
+
+      const wh = this.getAttribute(addSizePrefix("wh"));
+      const width = dimensionWithUnit(
+        wh === null ? this.getAttribute(addSizePrefix("w")) : wh,
+      );
+      const height = dimensionWithUnit(
+        wh === null ? this.getAttribute(addSizePrefix("h")) : wh,
+      );
+      const opacity = this.getAttribute(addSizePrefix("op"));
+      const zIndex = this.getAttribute(addSizePrefix("z"));
+
+      if (zIndex !== null) {
+        this._styles[size]["z-index"] = zIndex;
+      }
+
+      if (opacity !== null) {
+        this._styles[size].opacity = opacity;
+      }
+
+      if (width === "f") {
+        this._styles[size].width = "var(--width-stretch)";
+      } else if (width !== undefined) {
+        this._styles[size].width = width;
+        this._styles[size]["min-width"] = width;
+        this._styles[size]["max-width"] = width;
+      }
+
+      if (height === "f") {
+        this._styles[size].height = "100%";
+      } else if (height !== undefined) {
+        this._styles[size].height = height;
+        this._styles[size]["min-height"] = height;
+        this._styles[size]["max-height"] = height;
+      }
+
+      if (this.hasAttribute(addSizePrefix("hide"))) {
+        this._styles[size].display = "none !important";
+      }
+
+      if (this.hasAttribute(addSizePrefix("show"))) {
+        this._styles[size].display = "block !important";
+      }
+    });
+
+    // Update styles only if changed - targeting textarea element
+    const newStyleString = convertObjectToCssString(this._styles, 'textarea');
+    if (newStyleString !== this._lastStyleString) {
+      this._styleElement.textContent = newStyleString;
+      this._lastStyleString = newStyleString;
+    }
   }
 
   _updateTextareaAttributes() {
     const cols = this.getAttribute("cols");
     const rows = this.getAttribute("rows");
-    const placeholder = this.getAttribute("placeholder");
-    const value = this.getAttribute("value");
+    const isDisabled = this.hasAttribute('disabled');
 
     if (cols !== null) {
       this._textareaElement.setAttribute("cols", cols);
@@ -107,14 +222,10 @@ class RettangoliTextAreaElement extends HTMLElement {
       this._textareaElement.removeAttribute("rows");
     }
 
-    if (placeholder !== null) {
-      this._textareaElement.setAttribute("placeholder", placeholder);
+    if (isDisabled) {
+      this._textareaElement.setAttribute("disabled", "");
     } else {
-      this._textareaElement.removeAttribute("placeholder");
-    }
-
-    if (value !== null) {
-      this._textareaElement.value = value;
+      this._textareaElement.removeAttribute("disabled");
     }
   }
 }