@rettangoli/ui 0.1.30 → 0.1.32-rc1

package/src/primitives/view.js

@@ -4,13 +4,17 @@ import {
   convertObjectToCssString,
   styleMapKeys,
   permutateBreakpoints,
+  overlayLinkStyles,
+  syncLinkOverlay,
+  createResponsiveStyleBuckets,
+  responsiveStyleSizes,
+  applyDimensionToStyleBucket,
 } from "../common.js";
 import flexDirectionStyles from "../styles/flexDirectionStyles.js";
 import cursorStyles from "../styles/cursorStyles.js";
 import scrollStyle from "../styles/scrollStyles.js";
 import stylesGenerator from "../styles/viewStyles.js";
 import marginStyles from "../styles/marginStyles.js";
-import flexChildStyles from "../styles/flexChildStyles.js";
 import anchorStyles from "../styles/anchorStyles.js";
 
 // Internal implementation without uhtml
@@ -35,31 +39,14 @@ class RettangoliViewElement extends HTMLElement {
           border-color: var(--border);
         }
 
-        :host([fw="w"]) {
-          flex-wrap: wrap;
-        }
 
-        ${flexChildStyles}
         ${scrollStyle}
         ${flexDirectionStyles}
         ${marginStyles}
         ${cursorStyles}
         ${stylesGenerator}
         ${anchorStyles}
-
-        :host([href]) {
-          cursor: pointer;
-          position: relative;
-        }
-
-        :host([href]) a {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          z-index: 1;
-        }
+        ${overlayLinkStyles}
       `);
     }
   }
@@ -82,10 +69,11 @@ class RettangoliViewElement extends HTMLElement {
   static get observedAttributes() {
     return [
       "href",
-      "target",
-      "op",
+      "new-tab",
+      "rel",
       ...permutateBreakpoints([
         ...styleMapKeys,
+        "op",
         "wh",
         "w",
         "h",
@@ -97,51 +85,30 @@ class RettangoliViewElement extends HTMLElement {
         "d",
         "ah",
         "av",
-        "flex",
-        "fw",
+        "wrap",
+        "no-wrap",
         "overflow"
       ]),
     ];
   }
 
-  _styles = {
-    default: {},
-    sm: {},
-    md: {},
-    lg: {},
-    xl: {},
-  };
+  _styles = createResponsiveStyleBuckets();
 
   _lastStyleString = "";
 
   _updateDOM() {
     const href = this.getAttribute("href");
-    const target = this.getAttribute("target");
-
-    // Ensure slot is always in the shadow DOM
-    if (this._slotElement.parentNode !== this.shadow) {
-      this.shadow.appendChild(this._slotElement);
-    }
-
-    if (href) {
-      if (!this._linkElement) {
-        // Create link overlay only if it doesn't exist
-        this._linkElement = document.createElement("a");
-        this.shadow.appendChild(this._linkElement);
-      }
-
-      // Update link attributes
-      this._linkElement.href = href;
-      if (target) {
-        this._linkElement.target = target;
-      } else {
-        this._linkElement.removeAttribute("target");
-      }
-    } else if (this._linkElement) {
-      // Remove link overlay
-      this.shadow.removeChild(this._linkElement);
-      this._linkElement = null;
-    }
+    const newTab = this.hasAttribute("new-tab");
+    const rel = this.getAttribute("rel");
+
+    this._linkElement = syncLinkOverlay({
+      shadowRoot: this.shadow,
+      slotElement: this._slotElement,
+      linkElement: this._linkElement,
+      href,
+      newTab,
+      rel,
+    });
   }
   
   connectedCallback() {
@@ -151,15 +118,9 @@ class RettangoliViewElement extends HTMLElement {
 
   updateStyles() {
     // Reset styles for fresh calculation
-    this._styles = {
-      default: {},
-      sm: {},
-      md: {},
-      lg: {},
-      xl: {},
-    };
-
-    ["default", "sm", "md", "lg", "xl"].forEach((size) => {
+    this._styles = createResponsiveStyleBuckets();
+
+    responsiveStyleSizes.forEach((size) => {
       const addSizePrefix = (tag) => {
         return `${size === "default" ? "" : `${size}-`}${tag}`;
       };
@@ -183,21 +144,21 @@ class RettangoliViewElement extends HTMLElement {
         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;
-      }
+      applyDimensionToStyleBucket({
+        styleBucket: this._styles[size],
+        axis: "width",
+        dimension: width,
+        fillValue: "var(--width-stretch)",
+        allowFlexGrow: true,
+      });
+
+      applyDimensionToStyleBucket({
+        styleBucket: this._styles[size],
+        axis: "height",
+        dimension: height,
+        fillValue: "100%",
+        allowFlexGrow: true,
+      });
 
       if (this.hasAttribute(addSizePrefix("hide"))) {
         this._styles[size].display = "none";
@@ -272,17 +233,15 @@ class RettangoliViewElement extends HTMLElement {
         }
       }
 
-      // Handle flex property
-      const flex = this.getAttribute(addSizePrefix("flex"));
-      if (flex !== null) {
-        this._styles[size]["flex"] = flex;
-      }
-
       // Handle flex-wrap
-      const flexWrap = this.getAttribute(addSizePrefix("fw"));
-      if (flexWrap === "w") {
+      const isWrap = this.hasAttribute(addSizePrefix("wrap"));
+      const isNoWrap = this.hasAttribute(addSizePrefix("no-wrap"));
+      if (isWrap) {
         this._styles[size]["flex-wrap"] = "wrap";
       }
+      if (isNoWrap) {
+        this._styles[size]["flex-wrap"] = "nowrap";
+      }
 
       // Handle scroll properties
       const scrollHorizontal = this.hasAttribute(addSizePrefix("sh"));
@@ -316,8 +275,8 @@ class RettangoliViewElement extends HTMLElement {
   }
   
   attributeChangedCallback(name, oldValue, newValue) {
-    // Handle href and target changes
-    if (name === "href" || name === "target") {
+    // Handle link-related changes
+    if (name === "href" || name === "new-tab" || name === "rel") {
       this._updateDOM();
       return;
     }

package/src/setup.js

@@ -1,6 +1,4 @@
-import { createWebPatch } from '@rettangoli/fe';
 import createGlobalUI from './deps/createGlobalUI';
-import { h } from 'snabbdom/build/h';
 
 const globalUI = createGlobalUI();
 
@@ -12,10 +10,6 @@ const deps = {
   components: componentDependencies,
 }
 
-const patch = createWebPatch();
-
 export {
-  h,
-  patch,
   deps,
-}
+}

package/src/styles/buttonMarginStyles.js

@@ -72,16 +72,4 @@ const styles = {
   },
 };
 
-const descendants = {
-  mt: "button",
-  mr: "button",
-  mb: "button",
-  ml: "button",
-  m: "button",
-  mh: "button",
-  mv: "button",
-  s: "button",
-  v: "button",
-};
-
-export default generateCSS(styles, descendants);
+export default generateCSS(styles, {}, ".surface");

package/src/styles/cursorStyles.js

@@ -38,11 +38,7 @@ const styles = {
         "wait": "wait",
         "zoom-in": "zoom-in",
         "zoom-out": "zoom-out",
-        
-        // Keep short aliases for common cursors
-        "p": "pointer",
-        "m": "move",
     },
 };
 
-export default generateCSS(styles);
+export default generateCSS(styles);

package/src/styles/flexDirectionStyles.js

@@ -57,17 +57,17 @@ export default css`
   }
   
   @media screen and (max-width: 640px) {
-    :host([s-d="v"]) {
+    :host([sm-d="v"]) {
       flex-direction: column;
     }
-    :host([s-d="h"]) {
+    :host([sm-d="h"]) {
       flex-direction: row;
     }
-    :host([s-d="h"][s-av="c"]) {
+    :host([sm-d="h"][sm-av="c"]) {
       align-items: center;
       align-content: center;
     }
-    :host([s-d="v"][s-av="c"]) {
+    :host([sm-d="v"][sm-av="c"]) {
       justify-content: center;
     }
   }

package/src/styles/marginStylesForTarget.js

@@ -0,0 +1,13 @@
+import { generateCSS, spacing } from "../common.js";
+
+const styles = {
+  mt: spacing,
+  mr: spacing,
+  mb: spacing,
+  ml: spacing,
+  m: spacing,
+  mh: spacing,
+  mv: spacing,
+};
+
+export default (targetSelector) => generateCSS(styles, {}, targetSelector);

package/src/styles/textColorStyles.js

@@ -2,12 +2,20 @@ import { generateCSS } from "../common.js";
 
 const styles = {
   c: {
-    "fg": "--foreground",
-    "de": "--destructive",
-    "pr-fg": "--primary-foreground",
-    "se-fg": "--secondary-foreground",
-    "mu-fg": "--muted-foreground",
-    "ac-fg": "--accent-foreground",
+    "pr": "color: var(--primary);",
+    "se": "color: var(--secondary);",
+    "de": "color: var(--destructive);",
+    "fg": "color: var(--foreground);",
+    "bg": "color: var(--background);",
+    "mu": "color: var(--muted-foreground);",
+    "ac": "color: var(--accent);",
+    "bo": "color: var(--border);",
+    "tr": "color: transparent;",
+    "pr-fg": "color: var(--primary-foreground);",
+    "se-fg": "color: var(--secondary-foreground);",
+    "de-fg": "color: var(--destructive-foreground);",
+    "mu-fg": "color: var(--muted-foreground);",
+    "ac-fg": "color: var(--accent-foreground);",
   },
 };
 

package/src/styles/textStyles.js

@@ -2,10 +2,10 @@ import { generateCSS } from "../common.js";
 
 const styles = {
   ta: {
-    s: 'start',
-    c: 'center',
-    e: 'end',
-    j: 'justify'
+    s: "text-align: start;",
+    c: "text-align: center;",
+    e: "text-align: end;",
+    j: "text-align: justify;",
   },
   s: {
     h1: `

package/src/styles/viewStyles.js

@@ -40,31 +40,31 @@ const styles = {
     abs: "absolute",
     fix: "fixed",
   },
-  cor: {
-    full: `
+  edge: {
+    f: `
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         height: 100%;
         `,
-    top: `
+    t: `
         top: 0;
         right: 0;
         left: 0;
         `,
-    right: `
+    r: `
         top: 0;
         right: 0;
         bottom: 0;
         height: 100%;
         `,
-    bottom: `
+    b: `
         right: 0;
         bottom: 0;
         left: 0;
         `,
-    left: `
+    l: `
         bottom: 0;
         left: 0;
         top: 0;

package/src/styles/viewStylesForTarget.js

@@ -0,0 +1,58 @@
+import { generateCSS, spacing } from "../common.js";
+
+const borderWidth = {
+  xs: "--border-width-xs",
+  sm: "--border-width-sm",
+  md: "--border-width-md",
+  lg: "--border-width-lg",
+  xl: "--border-width-xl",
+};
+
+const styles = {
+  bgc: {
+    pr: `background-color: var(--primary);`,
+    se: `background-color: var(--secondary);`,
+    de: `background-color: var(--destructive);`,
+    fg: `background-color: var(--foreground);`,
+    bg: `background-color: var(--background);`,
+    mu: `background-color: var(--muted);`,
+    ac: `background-color: var(--accent);`,
+    bo: `background-color: var(--border);`,
+  },
+  pos: {
+    rel: "relative",
+    abs: "absolute",
+    fix: "fixed",
+  },
+  shadow: {
+    sm: "--shadow-sm",
+    md: "--shadow-md",
+    lg: "--shadow-lg",
+  },
+  bw: borderWidth,
+  bwt: borderWidth,
+  bwr: borderWidth,
+  bwb: borderWidth,
+  bwl: borderWidth,
+  bc: {
+    pr: "--primary",
+    se: "--secondary",
+    de: "--destructive",
+    fg: "--foreground",
+    bg: "--background",
+    mu: "--muted",
+    ac: "--accent",
+    bo: "--border",
+    tr: "transparent",
+  },
+  br: {
+    xs: "--border-radius-xs",
+    sm: "--border-radius-sm",
+    md: "--border-radius-md",
+    lg: "--border-radius-lg",
+    xl: "--border-radius-xl",
+    f: "--border-radius-f",
+  },
+};
+
+export default (targetSelector) => generateCSS(styles, {}, targetSelector);

package/src/styles/flexChildStyles.js

@@ -1,43 +0,0 @@
-import { css } from '../common.js'
-
-export default css`
-:host([flex="0"]) {
-  flex: 0;
-}
-:host([flex="1"]) {
-  flex: 1;
-}
-:host([flex="2"]) {
-  flex: 2;
-}
-:host([flex="3"]) {
-  flex: 3;
-}
-:host([flex="4"]) {
-  flex: 4;
-}
-:host([flex="5"]) {
-  flex: 5;
-}
-:host([flex="6"]) {
-  flex: 6;
-}
-:host([flex="7"]) {
-  flex: 7;
-}
-:host([flex="8"]) {
-  flex: 8;
-}
-:host([flex="9"]) {
-  flex: 9;
-}
-:host([flex="10"]) {
-  flex: 10;
-}
-:host([flex="11"]) {
-  flex: 11;
-}
-:host([flex="12"]) {
-  flex: 12;
-}
-`