@rettangoli/ui 1.0.6 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.0.6",
+  "version": "1.0.9",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
@@ -19,7 +19,8 @@
   "module": "./src/index.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/yuusoft-org/rettangoli.git"
+    "url": "https://github.com/yuusoft-org/rettangoli",
+    "directory": "packages/rettangoli-ui"
   },
   "author": {
     "name": "Luciano Hanyon Wu",
@@ -36,7 +37,7 @@
     "build": "rtgl fe build -o ./.generated/fe-entry.js && bun run esbuild.js && bun run esbuild-dev.js && npm run copy:css",
     "prepack": "npm run build",
     "vt:generate": "bun run build:dev && rtgl vt generate",
-    "vt:docker": "bun run build:dev && bash -lc 'IMAGE=\"han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc27\"; docker pull \"$IMAGE\" >/dev/null 2>&1 || IMAGE=\"han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc26\"; docker run --rm --user $(id -u):$(id -g) -v \"$PWD:/app\" -w /app \"$IMAGE\" rtgl vt screenshot'",
+    "vt:docker": "bun run build:dev && bash -lc 'IMAGE=\"han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.5\"; docker pull \"$IMAGE\" >/dev/null 2>&1 || IMAGE=\"han4wluc/rtgl:playwright-v1.57.0-rtgl-v1.0.0-rc27\"; docker run --rm --user $(id -u):$(id -g) -v \"$PWD:/app\" -w /app \"$IMAGE\" rtgl vt screenshot'",
     "vt:report": "bun run vt:docker && rtgl vt report",
     "vt:accept": "rtgl vt accept",
     "serve": "bunx serve .rettangoli/vt/_site"
@@ -61,12 +62,7 @@
   },
   "homepage": "https://github.com/yuusoft-org/rettangoli#readme",
   "dependencies": {
-    "@floating-ui/dom": "^1.6.13",
-    "@rettangoli/fe": "1.0.3",
-    "commander": "^13.1.0",
-    "jempl": "1.0.0",
-    "js-yaml": "^4.1.0",
-    "liquidjs": "^10.21.0",
-    "snabbdom": "^3.6.2"
+    "@rettangoli/fe": "1.0.4",
+    "jempl": "1.0.1"
   }
 }

package/src/components/card/card.schema.yaml

@@ -0,0 +1,15 @@
+componentName: rtgl-card
+propsSchema:
+  type: object
+  properties:
+    head:
+      type: string
+    desc:
+      type: string
+    size:
+      type: string
+      enum: [sm, md, lg]
+events: []
+methods:
+  type: object
+  properties: {}

package/src/components/card/card.store.js

@@ -0,0 +1,87 @@
+const blacklistedProps = [
+  'id',
+  'class',
+  'style',
+  'slot',
+  'head',
+  'desc',
+  'size',
+  'd',
+  'ah',
+  'av',
+  'wrap',
+  'noWrap',
+  'g',
+  'gh',
+  'gv',
+  'p',
+  'pt',
+  'pr',
+  'pb',
+  'pl',
+  'pv',
+  'ph',
+  'bw',
+  'bwt',
+  'bwr',
+  'bwb',
+  'bwl',
+  'bc',
+  'br',
+  'shadow',
+  'bgc',
+  'href',
+  'newTab',
+  'rel',
+  'cur',
+  'sv',
+  'sh',
+  'overflow',
+];
+
+const sizePresets = {
+  sm: {
+    cardAttrString: 'p=md sm-p=sm g=md sm-g=sm',
+    headerAttrString: 'g=xs',
+    headingSize: 'lg',
+    subheadingSize: 'sm',
+  },
+  md: {
+    cardAttrString: 'p=lg md-p=md sm-p=md g=lg md-g=md sm-g=md',
+    headerAttrString: 'g=sm',
+    headingSize: 'h4',
+    subheadingSize: 'sm',
+  },
+  lg: {
+    cardAttrString: 'p=xl lg-p=lg md-p=md sm-p=md g=lg md-g=md sm-g=md',
+    headerAttrString: 'g=sm',
+    headingSize: 'h3',
+    subheadingSize: 'md',
+  },
+};
+
+const stringifyProps = (props = {}) => {
+  return Object.entries(props)
+    .filter(([key]) => !blacklistedProps.includes(key))
+    .map(([key, value]) => `${key}=${value}`)
+    .join(' ');
+};
+
+export const createInitialState = () => Object.freeze({});
+
+export const selectViewData = ({ props = {} }) => {
+  const size = sizePresets[props.size] ? props.size : 'md';
+  const preset = sizePresets[size];
+
+  return {
+    containerAttrString: stringifyProps(props),
+    cardAttrString: preset.cardAttrString,
+    headerAttrString: preset.headerAttrString,
+    headingSize: preset.headingSize,
+    subheadingSize: preset.subheadingSize,
+    head: props.head || '',
+    desc: props.desc || '',
+    hasHeader: !!(props.head || props.desc),
+    size,
+  };
+};

package/src/components/card/card.view.yaml

@@ -0,0 +1,18 @@
+styles:
+  :host:
+    display: block
+  slot:
+    display: block
+    min-width: 0
+  .rtgl-card-body:
+    min-width: 0
+template:
+  - 'rtgl-view class="rtgl-card" d=v w=f bgc=bg bw=xs bc=bo br=xl shadow=sm ${cardAttrString} ${containerAttrString}':
+      - $if hasHeader:
+          - 'rtgl-view class="rtgl-card-header" d=v w=f ${headerAttrString}':
+              - $if head:
+                  - rtgl-text class="rtgl-card-heading" s=${headingSize} w=f: ${head}
+              - $if desc:
+                  - rtgl-text class="rtgl-card-desc" s=${subheadingSize} c=mu-fg w=f: ${desc}
+      - div class=rtgl-card-body:
+          - slot: null

package/src/primitives/view.js

@@ -19,6 +19,15 @@ import stylesGenerator from "../styles/viewStyles.js";
 import marginStyles from "../styles/marginStyles.js";
 import anchorStyles from "../styles/anchorStyles.js";
 
+const normalizeRawCssValue = (value) => {
+  if (value === undefined || value === null) {
+    return null;
+  }
+
+  const normalizedValue = `${value}`.trim();
+  return normalizedValue.length > 0 ? normalizedValue : null;
+};
+
 // Internal implementation without uhtml
 class RettangoliViewElement extends HTMLElement {
   static styleSheet = null;
@@ -80,6 +89,10 @@ class RettangoliViewElement extends HTMLElement {
         "w",
         "h",
         "ar",
+        "bgi",
+        "bgs",
+        "bgp",
+        "bgr",
         "hide",
         "show",
         "sh",
@@ -141,6 +154,18 @@ class RettangoliViewElement extends HTMLElement {
       const aspectRatio = normalizeAspectRatio(
         this.getAttribute(addSizePrefix("ar")),
       );
+      const backgroundImage = normalizeRawCssValue(
+        this.getAttribute(addSizePrefix("bgi")),
+      );
+      const backgroundSize = normalizeRawCssValue(
+        this.getAttribute(addSizePrefix("bgs")),
+      );
+      const backgroundPosition = normalizeRawCssValue(
+        this.getAttribute(addSizePrefix("bgp")),
+      );
+      const backgroundRepeat = normalizeRawCssValue(
+        this.getAttribute(addSizePrefix("bgr")),
+      );
 
       if (zIndex !== null) {
         this._styles[size]["z-index"] = zIndex;
@@ -154,6 +179,22 @@ class RettangoliViewElement extends HTMLElement {
         this._styles[size]["aspect-ratio"] = aspectRatio;
       }
 
+      if (backgroundImage !== null) {
+        this._styles[size]["background-image"] = backgroundImage;
+      }
+
+      if (backgroundSize !== null) {
+        this._styles[size]["background-size"] = backgroundSize;
+      }
+
+      if (backgroundPosition !== null) {
+        this._styles[size]["background-position"] = backgroundPosition;
+      }
+
+      if (backgroundRepeat !== null) {
+        this._styles[size]["background-repeat"] = backgroundRepeat;
+      }
+
       applyDimensionToStyleBucket({
         styleBucket: this._styles[size],
         axis: "width",