rettangoli-ui 0.1.0-rc2 → 0.1.0-rc3

package/src/primitives/textarea.js

@@ -0,0 +1,103 @@
+import { css, dimensionWithUnit } from "../common.js";
+import cursorStyles from "../styles/cursorStyles.js";
+import marginStyles from "../styles/marginStyles.js";
+
+// Internal implementation without uhtml
+class RettangoliTextAreaElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliTextAreaElement.styleSheet) {
+      RettangoliTextAreaElement.styleSheet = new CSSStyleSheet();
+      RettangoliTextAreaElement.styleSheet.replaceSync(css`
+        :host {
+          display: contents;
+        }
+        textarea {
+          font-family: inherit;
+          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-top: var(--spacing-md);
+          padding-bottom: var(--spacing-md);
+          padding-left: var(--spacing-md);
+          padding-right: var(--spacing-md);
+          color: var(--foreground);
+          outline: none;
+        }
+        textarea:focus {
+          border-color: var(--foreground);
+        }
+        ${marginStyles}
+        ${cursorStyles}
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliTextAreaElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow.adoptedStyleSheets = [RettangoliTextAreaElement.styleSheet];
+    
+    // Create initial DOM structure
+    this._textareaElement = document.createElement('textarea');
+    this._textareaElement.setAttribute('type', 'text');
+    this.shadow.appendChild(this._textareaElement);
+  }
+
+  static get observedAttributes() {
+    return ["key", "w", "ellipsis", "cols", "rows", "placeholder"];
+  }
+
+  get value() {
+    return this._textareaElement.value;
+  }
+
+  set value(val) {
+    this._textareaElement.value = val;
+  }
+
+  connectedCallback() {
+    this._updateTextareaAttributes();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    this._updateTextareaAttributes();
+  }
+
+  _updateTextareaAttributes() {
+    const cols = this.getAttribute("cols");
+    const rows = this.getAttribute("rows");
+    const placeholder = this.getAttribute("placeholder");
+
+    if (cols !== null) {
+      this._textareaElement.setAttribute("cols", cols);
+    } else {
+      this._textareaElement.removeAttribute("cols");
+    }
+
+    if (rows !== null) {
+      this._textareaElement.setAttribute("rows", rows);
+    } else {
+      this._textareaElement.removeAttribute("rows");
+    }
+
+    if (placeholder !== null) {
+      this._textareaElement.setAttribute("placeholder", placeholder);
+    } else {
+      this._textareaElement.removeAttribute("placeholder");
+    }
+  }
+}
+
+// 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 RettangoliTextAreaElement;
+};

package/src/primitives/view.js

@@ -0,0 +1,215 @@
+import {
+  css,
+  dimensionWithUnit,
+  convertObjectToCssString,
+  styleMapKeys,
+  permutateBreakpoints,
+} 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
+class RettangoliViewElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliViewElement.styleSheet) {
+      RettangoliViewElement.styleSheet = new CSSStyleSheet();
+      RettangoliViewElement.styleSheet.replaceSync(css`
+        slot {
+          display: contents;
+        }
+        :host {
+          display: flex;
+          flex-direction: column;
+          align-self: auto;
+          align-content: flex-start;
+          border-style: solid;
+          border-width: 0;
+          box-sizing: border-box;
+          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;
+        }
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliViewElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "closed" });
+    this.shadow.adoptedStyleSheets = [RettangoliViewElement.styleSheet];
+
+    // Create initial DOM structure
+    this._styleElement = document.createElement("style");
+    this._slotElement = document.createElement("slot");
+    this._linkElement = null;
+
+    this.shadow.appendChild(this._styleElement);
+    this._updateDOM();
+  }
+
+  static get observedAttributes() {
+    return [
+      "href",
+      "target",
+      ...permutateBreakpoints([
+        ...styleMapKeys,
+        "wh",
+        "w",
+        "h",
+        "hidden",
+        "sh",
+        "sv",
+      ]),
+    ];
+  }
+
+  _styles = {
+    default: {},
+    sm: {},
+    md: {},
+    lg: {},
+    xl: {},
+  };
+
+  _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;
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    // Handle href and target changes
+    if (name === "href" || name === "target") {
+      this._updateDOM();
+      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("hidden"))) {
+        this._styles[size].display = "none !important";
+      }
+
+      if (this.hasAttribute(addSizePrefix("visible"))) {
+        this._styles[size].display = "flex !important";
+      }
+    });
+
+    // Update styles only if changed
+    const newStyleString = convertObjectToCssString(this._styles);
+    if (newStyleString !== this._lastStyleString) {
+      this._styleElement.textContent = newStyleString;
+      this._lastStyleString = newStyleString;
+    }
+  }
+}
+
+// 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 RettangoliViewElement;
+};

package/src/setup.js

@@ -0,0 +1,16 @@
+import { createWebPatch } from 'rettangoli-fe';
+import { h } from 'snabbdom/build/h';
+
+const componentDependencies = {}
+
+const deps = {
+  components: componentDependencies,
+}
+
+const patch = createWebPatch();
+
+export {
+  h,
+  patch,
+  deps,
+}

package/src/styles/anchorStyles.js

@@ -0,0 +1,13 @@
+import { css } from "../common.js";
+
+export default css`
+  a, a:link, a:visited, a:hover, a:active {
+    color: inherit;
+    text-decoration: none;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+  }
+`;

package/src/styles/buttonMarginStyles.js

@@ -0,0 +1,84 @@
+import { generateCSS, spacing } from "../common.js";
+
+const styles = {
+  mt: spacing,
+  mr: spacing,
+  mb: spacing,
+  ml: spacing,
+  m: spacing,
+  mh: spacing,
+  mv: spacing,
+  s: {
+    sm: `
+    height: 28px;
+    padding-left: 12px;
+    padding-right: 12px;
+    border-radius: 4px;
+    font-size: var(--xs-font-size);
+    font-weight: var(--xs-font-weight);
+    line-height: var(--xs-line-height);
+    letter-spacing: var(--xs-letter-spacing);
+    `,
+    md: `
+    height: 32px;
+    padding-left: 16px;
+    padding-right: 16px;
+    border-radius: 4px;
+    font-size: var(--sm-font-size);
+    font-weight: var(--sm-font-weight);
+    line-height: var(--sm-line-height);
+    letter-spacing: var(--sm-letter-spacing);
+    `,
+    lg: `
+    height: 40px;
+    padding-left: 20px;
+    padding-right: 20px;
+    border-radius: 4px;
+    font-size: var(--md-font-size);
+    font-weight: var(--md-font-weight);
+    line-height: var(--md-line-height);
+    letter-spacing: var(--md-letter-spacing);
+    `,
+  },
+  v: {
+    pr: `
+      background-color: var(--primary);
+      color: var(--primary-foreground);
+    `,
+    se: `
+      background-color: var(--secondary);
+      color: var(--secondary-foreground);
+    `,
+    de: `
+      background-color: var(--destructive);
+      color: var(--primary-foreground);
+    `,
+    ol: `
+      background-color: transparent;
+      color: var(--foreground);
+      border-width: 1px;
+    `,
+    gh: `
+      background-color: transparent;
+      color: var(--foreground);
+    `,
+    lk: `
+      background-color: transparent;
+      color: var(--foreground);
+    `,
+  },
+};
+
+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);

package/src/styles/cursorStyles.js

@@ -0,0 +1,12 @@
+import { generateCSS } from '../common.js'
+
+const styles = {
+    "cur": {
+        "p": "pointer",
+        "m": "move",
+        "grab": "grab",
+        "grabbing": "grabbing",
+    },
+};
+
+export default generateCSS(styles);

package/src/styles/flexChildStyles.js

@@ -0,0 +1,43 @@
+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;
+}
+`

package/src/styles/flexDirectionStyles.js

@@ -0,0 +1,74 @@
+import { css } from "../common.js";
+
+export default css`
+
+  :host([d="h"]) {
+    flex-direction: row;
+  }
+  :host([d="v"]) {
+    flex-direction: column;
+  }
+  :host([d="h"]:not([ah])) {
+    justify-content: flex-start;
+  }
+  :host([d="h"][ah="c"]) {
+    justify-content: center;
+  }
+  :host([d="h"][ah="e"]) {
+    justify-content: flex-end;
+  }
+  :host([d="h"]:not([av])) {
+    align-items: flex-start;
+  }
+  :host([d="h"][av="c"]) {
+    align-items: center;
+    align-content: center;
+  }
+  :host([d="h"][av="e"]) {
+    align-items: flex-end;
+    align-content: flex-end;
+  }
+  
+  /* Default/vertical direction - horizontal alignment */
+  :host(:not([d]):not([ah])),
+  :host([d="v"]:not([ah])) {
+    align-items: flex-start;
+  }
+  :host(:not([d])[ah="c"]),
+  :host([d="v"][ah="c"]) {
+    align-items: center;
+  }
+  :host(:not([d])[ah="e"]),
+  :host([d="v"][ah="e"]) {
+    align-items: flex-end;
+  }
+  
+  :host(:not([d]):not([av])),
+  :host([d="v"]:not([av])) {
+    justify-content: flex-start;
+  }
+  :host(:not([d])[av="c"]),
+  :host([d="v"][av="c"]) {
+    justify-content: center;
+  }
+  :host(:not([d])[av="e"]),
+  :host([d="v"][av="e"]) {
+    justify-content: flex-end;
+  }
+  
+  @media screen and (max-width: 640px) {
+    :host([s-d="v"]) {
+      flex-direction: column;
+    }
+    :host([s-d="h"]) {
+      flex-direction: row;
+    }
+    :host([s-d="h"][s-av="c"]) {
+      align-items: center;
+      align-content: center;
+    }
+    :host([s-d="v"][s-av="c"]) {
+      justify-content: center;
+    }
+  }
+`;

package/src/styles/marginStyles.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 generateCSS(styles)

package/src/styles/paddingSvgStyles.js

@@ -0,0 +1,120 @@
+
+import { css } from '../common.js'
+
+export default css`
+:host([pt="xs"]) svg {
+  padding-top: var(--spacing-xs);
+}
+:host([pt="sm"]) svg {
+  padding-top: var(--spacing-sm);
+}
+:host([pt="md"]) svg {
+  padding-top: var(--spacing-md);
+}
+:host([pt="lg"]) svg {
+  padding-top: var(--spacing-lg);
+}
+:host([pt="xl"]) svg {
+  padding-top: var(--spacing-xl);
+}
+:host([pr="xs"]) svg {
+  padding-right: var(--spacing-xs);
+}
+:host([pr="sm"]) svg {
+  padding-right: var(--spacing-sm);
+}
+:host([pr="md"]) svg {
+  padding-right: var(--spacing-md);
+}
+:host([pr="lg"]) svg {
+  padding-right: var(--spacing-lg);
+}
+:host([pr="xl"]) svg {
+  padding-right: var(--spacing-xl);
+}
+:host([pb="xs"]) svg {
+  padding-bottom: var(--spacing-xs);
+}
+:host([pb="sm"]) svg {
+  padding-bottom: var(--spacing-sm);
+}
+:host([pb="md"]) svg {
+  padding-bottom: var(--spacing-md);
+}
+:host([pb="lg"]) svg {
+  padding-bottom: var(--spacing-lg);
+}
+:host([pb="xl"]) svg {
+  padding-bottom: var(--spacing-xl);
+}
+:host([pl="xs"]) svg {
+  padding-left: var(--spacing-xs);
+}
+:host([pl="sm"]) svg {
+  padding-left: var(--spacing-sm);
+}
+:host([pl="md"]) svg {
+  padding-left: var(--spacing-md);
+}
+:host([pl="lg"]) svg {
+  padding-left: var(--spacing-lg);
+}
+:host([pl="xl"]) svg {
+  padding-left: var(--spacing-xl);
+}
+:host([p="xs"]) svg {
+  padding: var(--spacing-xs);
+}
+:host([p="sm"]) svg {
+  padding: var(--spacing-sm);
+}
+:host([p="md"]) svg {
+  padding: var(--spacing-md);
+}
+:host([p="lg"]) svg {
+  padding: var(--spacing-lg);
+}
+:host([p="xl"]) svg {
+  padding: var(--spacing-xl);
+}
+:host([ph="xs"]) svg {
+  padding-left: var(--spacing-xs);
+  padding-right: var(--spacing-xs);
+}
+:host([ph="sm"]) svg {
+  padding-left: var(--spacing-sm);
+  padding-right: var(--spacing-sm);
+}
+:host([ph="md"]) svg {
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+:host([ph="lg"]) svg {
+  padding-left: var(--spacing-lg);
+  padding-right: var(--spacing-lg);
+}
+:host([ph="xl"]) svg {
+  padding-left: var(--spacing-xl);
+  padding-right: var(--spacing-xl);
+}
+:host([pv="xs"]) svg {
+  padding-top: var(--spacing-xs);
+  padding-bottom: var(--spacing-xs);
+}
+:host([pv="sm"]) svg {
+  padding-top: var(--spacing-sm);
+  padding-bottom: var(--spacing-sm);
+}
+:host([pv="md"]) svg {
+  padding-top: var(--spacing-md);
+  padding-bottom: var(--spacing-md);
+}
+:host([pv="lg"]) svg {
+  padding-top: var(--spacing-lg);
+  padding-bottom: var(--spacing-lg);
+}
+:host([pv="xl"]) svg {
+  padding-top: var(--spacing-xl);
+  padding-bottom: var(--spacing-xl);
+}
+`