@rettangoli/ui 0.1.2-rc3 → 0.1.2-rc31

package/src/primitives/slider.js

@@ -1,5 +1,5 @@
-import { 
-  css, 
+import {
+  css,
   dimensionWithUnit,
   convertObjectToCssString,
   styleMapKeys,
@@ -22,7 +22,6 @@ class RettangoliSliderElement extends HTMLElement {
         input[type="range"] {
           -webkit-appearance: none;
           appearance: none;
-          width: 200px;
           height: 8px;
           background: var(--muted);
           border-radius: var(--border-radius-full);
@@ -79,7 +78,7 @@ class RettangoliSliderElement extends HTMLElement {
     RettangoliSliderElement.initializeStyleSheet();
     this.shadow = this.attachShadow({ mode: "closed" });
     this.shadow.adoptedStyleSheets = [RettangoliSliderElement.styleSheet];
-    
+
     // Initialize style tracking properties
     this._styles = {
       default: {},
@@ -89,12 +88,12 @@ class RettangoliSliderElement extends HTMLElement {
       xl: {},
     };
     this._lastStyleString = "";
-    
+
     // Create initial DOM structure
     this._inputElement = document.createElement('input');
     this._inputElement.type = 'range';
     this._styleElement = document.createElement('style');
-    
+
     this.shadow.appendChild(this._styleElement);
     this.shadow.appendChild(this._inputElement);
 
@@ -105,7 +104,7 @@ class RettangoliSliderElement extends HTMLElement {
 
   static get observedAttributes() {
     return [
-      "key", 
+      "key",
       "value",
       "min",
       "max",
@@ -149,6 +148,16 @@ class RettangoliSliderElement extends HTMLElement {
   };
 
   attributeChangedCallback(name, oldValue, newValue) {
+    // Handle key attribute change - reset value
+    if (name === "key" && oldValue !== newValue) {
+      requestAnimationFrame(() => {
+        const value = this.getAttribute("value");
+        const min = this.getAttribute("min") || "0";
+        this._inputElement.value = value ?? min;
+      });
+      return;
+    }
+
     // Handle input-specific attributes first
     if (["value", "min", "max", "step", "disabled"].includes(name)) {
       this._updateInputAttributes();
@@ -248,7 +257,7 @@ class RettangoliSliderElement extends HTMLElement {
     } else {
       this._inputElement.step = "1";
     }
-    
+
     if (isDisabled) {
       this._inputElement.setAttribute("disabled", "");
     } else {
@@ -266,4 +275,4 @@ export default ({ render, html }) => {
   // Note: render and html parameters are accepted but not used
   // This maintains backward compatibility with existing code
   return RettangoliSliderElement;
-};
+};

package/src/primitives/svg.js

@@ -1,6 +1,7 @@
 import { css, dimensionWithUnit } from "../common.js";
 import flexChildStyles from "../styles/flexChildStyles.js";
 import paddingSvgStyles from "../styles/paddingSvgStyles.js";
+import marginStyles from "../styles/marginStyles.js";
 import cursorStyles from "../styles/cursorStyles.js";
 import textColorStyles from "../styles/textColorStyles.js";
 
@@ -18,6 +19,7 @@ class RettangoliSvgElement extends HTMLElement {
         }
         ${textColorStyles}
         ${paddingSvgStyles}
+        ${marginStyles}
         ${flexChildStyles}
         ${cursorStyles}
       `);

package/src/primitives/textarea.js

@@ -48,10 +48,21 @@ class RettangoliTextAreaElement extends HTMLElement {
     this._textareaElement = document.createElement('textarea');
     this._textareaElement.setAttribute('type', 'text');
     this.shadow.appendChild(this._textareaElement);
+
+    // Bind event handler
+    this._textareaElement.addEventListener('input', this._onChange);
   }
 
+  _onChange = (event) => {
+    this.dispatchEvent(new CustomEvent('textarea-change', {
+      detail: {
+        value: this._textareaElement.value,
+      },
+    }));
+  };
+
   static get observedAttributes() {
-    return ["key", "w", "ellipsis", "cols", "rows", "placeholder"];
+    return ["key", "w", "ellipsis", "cols", "rows", "placeholder", "value"];
   }
 
   get value() {
@@ -67,6 +78,14 @@ class RettangoliTextAreaElement extends HTMLElement {
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
+    // Handle key attribute change - reset value
+    if (name === "key" && oldValue !== newValue) {
+      requestAnimationFrame(() => {
+        const value = this.getAttribute("value");
+        this._textareaElement.value = value ?? "";
+      });
+      return;
+    }
     this._updateTextareaAttributes();
   }
 
@@ -74,6 +93,7 @@ class RettangoliTextAreaElement extends HTMLElement {
     const cols = this.getAttribute("cols");
     const rows = this.getAttribute("rows");
     const placeholder = this.getAttribute("placeholder");
+    const value = this.getAttribute("value");
 
     if (cols !== null) {
       this._textareaElement.setAttribute("cols", cols);
@@ -92,6 +112,10 @@ class RettangoliTextAreaElement extends HTMLElement {
     } else {
       this._textareaElement.removeAttribute("placeholder");
     }
+
+    if (value !== null) {
+      this._textareaElement.value = value;
+    }
   }
 }
 

package/src/styles/cursorStyles.js

@@ -2,10 +2,46 @@ import { generateCSS } from '../common.js'
 
 const styles = {
     "cur": {
-        "p": "pointer",
-        "m": "move",
+        "alias": "alias",
+        "all-scroll": "all-scroll",
+        "auto": "auto",
+        "cell": "cell",
+        "col-resize": "col-resize",
+        "context-menu": "context-menu",
+        "copy": "copy",
+        "crosshair": "crosshair",
+        "default": "default",
+        "e-resize": "e-resize",
+        "ew-resize": "ew-resize",
         "grab": "grab",
         "grabbing": "grabbing",
+        "help": "help",
+        "move": "move",
+        "n-resize": "n-resize",
+        "ne-resize": "ne-resize",
+        "nesw-resize": "nesw-resize",
+        "ns-resize": "ns-resize",
+        "nw-resize": "nw-resize",
+        "nwse-resize": "nwse-resize",
+        "no-drop": "no-drop",
+        "none": "none",
+        "not-allowed": "not-allowed",
+        "pointer": "pointer",
+        "progress": "progress",
+        "row-resize": "row-resize",
+        "s-resize": "s-resize",
+        "se-resize": "se-resize",
+        "sw-resize": "sw-resize",
+        "text": "text",
+        "url": "url",
+        "w-resize": "w-resize",
+        "wait": "wait",
+        "zoom-in": "zoom-in",
+        "zoom-out": "zoom-out",
+        
+        // Keep short aliases for common cursors
+        "p": "pointer",
+        "m": "move",
     },
 };
 

package/src/components/dialog/dialog.handlers.js

@@ -1,5 +0,0 @@
-
-export const handleClickDialogueOverlay = (e, deps) => {
-  const { dispatchEvent } = deps;
-  dispatchEvent(new CustomEvent('close-dialogue'));
-}

package/src/components/dialog/dialog.store.js

@@ -1,25 +0,0 @@
-export const INITIAL_STATE = Object.freeze({
-  //
-});
-
-export const toViewData = ({ state, props }) => {
-  return {
-    isOpen: props.isOpen,
-    w: props.w || 600,
-    position: {
-      x: 0,
-      y: 0
-    }
-  };
-}
-
-export const selectState = ({ state }) => {
-  return state;
-}
-
-export const setState = (state) => {
-  // do doSomething
-}
-
-
-

package/src/components/dialog/dialog.view.yaml

@@ -1,44 +0,0 @@
-elementName: rtgl-dialog
-
-viewDataSchema:
-  type: object
-
-propsSchema:
-  type: object
-  properties:
-    isOpen:
-      type: boolean
-    w:
-      type: string
-
-refs:
-  dialog-overlay:
-    eventListeners:
-      click:
-        handler: handleClickDialogueOverlay
-
-events:
-  close-dialogue:
-    type: object
-    properties: {}
-
-styles:
-  # '@keyframes dialog-in':
-  #   from:
-  #     opacity: 0
-  #     transform: scale(0.95)
-  #   to:
-  #     opacity: 1
-  #     transform: scale(1)
-
-  # '#dialog-container':
-  #   animation: dialog-in 150ms cubic-bezier(0.16, 1, 0.3, 1)
-  #   transform-origin: top
-
-template:
-  - $if isOpen:
-    - rtgl-view pos=fix cor=full ah=c:
-      - 'rtgl-view#dialog-overlay pos=fix cor=full ah=c av=c bgc=bg op=0.5':
-      - rtgl-view h=10vh:
-      - rtgl-view#dialog-container z=100 bw=xs p=lg bgc=bg w=${w} br=sm:
-        - slot name=content:

package/src/components/popover/popover.handlers.js

@@ -1,5 +0,0 @@
-
-export const handleClickOverlay = (e, deps) => {
-  const { dispatchEvent } = deps;
-  dispatchEvent(new CustomEvent('click-overlay'));
-}

package/src/components/popover/popover.store.js

@@ -1,12 +0,0 @@
-export const INITIAL_STATE = Object.freeze({});
-
-export const toViewData = ({ state, props }) => {
-  return {
-    isOpen: props.isOpen,
-    position: props.position,
-  };
-}
-
-export const selectState = ({ state }) => {
-  return state;
-}

package/src/components/popover/popover.view.yaml

@@ -1,57 +0,0 @@
-elementName: rtgl-popover
-
-viewDataSchema:
-  type: object
-  properties:
-    isOpen:
-      type: boolean
-    position:
-      type: object
-      properties:
-        x:
-          type: number
-        y:
-          type: number
-    placement:
-      type: string
-
-propsSchema:
-  type: object
-  properties:
-    placement:
-      type: string
-      default: bottom
-    isOpen:
-      type: boolean
-    position:
-      type: object
-      properties:
-        x:
-          type: number
-        y:
-          type: number
-
-refs:
-  popoverOverlay:
-    eventListeners:
-      click:
-        handler: handleClickOverlay
-
-styles:
-  '@keyframes popover-in':
-    from:
-      opacity: 0
-      transform: scale(0.95)
-    to:
-      opacity: 1
-      transform: scale(1)
-
-  '#popoverContainer':
-    animation: popover-in 150ms cubic-bezier(0.16, 1, 0.3, 1)
-    transform-origin: top
-
-template:
-  - $if isOpen:
-    - rtgl-view#popoverOverlay pos=fix cor=full:
-    - 'rtgl-view#popoverContainer pos=fix style="left: ${position.x}px; top: ${position.y}px;" id=floatingElement bw=xs p=md bgc=mu':
-      - slot name=content: