@rettangoli/ui 0.1.1 → 0.1.2-rc2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.1",
+  "version": "0.1.2-rc2",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
@@ -22,8 +22,12 @@
   },
   "license": "MIT",
   "scripts": {
-    "build:dev": "bun run ../rettangoli-cli/cli.js fe build && bun run esbuild-dev.js",
-    "build": "bun run ../rettangoli-cli/cli.js fe build && bun run esbuild.js"
+    "build:dev": "rtgl fe build && bun run esbuild-dev.js",
+    "build": "rtgl fe build && bun run esbuild.js",
+    "vt:generate": "rtgl fe build && bun run esbuild-dev.js && rtgl vt generate --skip-screenshots",
+    "vt:report": "bun run build:dev && rtgl vt generate && rtgl vt report",
+    "vt:accept": "rtgl vt accept",
+    "serve": "bunx serve .rettangoli/vt/_site"
   },
   "devDependencies": {
     "esbuild": "^0.20.0",
@@ -47,7 +51,7 @@
     "commander": "^13.1.0",
     "js-yaml": "^4.1.0",
     "liquidjs": "^10.21.0",
-    "@rettangoli/fe": "0.0.6",
+    "@rettangoli/fe": "0.0.7-rc4",
     "snabbdom": "^3.6.2"
   }
 }

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

@@ -3,6 +3,18 @@ export const handleOnMount = (deps) => {
   store.setDefaultValues(props.defaultValues);
 };
 
+const dispatchFormChange = (fieldName, fieldValue, formValues, dispatchEvent) => {
+  dispatchEvent(
+    new CustomEvent("form-change", {
+      detail: {
+        fieldName,
+        fieldValue,
+        formValues,
+      },
+    }),
+  );
+};
+
 export const handleActionClick = (e, deps) => {
   const { store, dispatchEvent } = deps;
   const id = e.currentTarget.id.replace("action-", "");
@@ -17,7 +29,7 @@ export const handleActionClick = (e, deps) => {
 };
 
 export const handleInputChange = (e, deps) => {
-  const { store } = deps;
+  const { store, dispatchEvent } = deps;
   const id = e.currentTarget.id.replace("input-", "");
   // TODO fix double event
   if (id && e.detail.value !== undefined) {
@@ -26,38 +38,42 @@ export const handleInputChange = (e, deps) => {
       fieldName: id,
       value: e.detail.value,
     });
+    dispatchFormChange(id, e.detail.value, store.selectFormValues(), dispatchEvent);
   }
 };
 
 export const handleSelectChange = (e, deps) => {
-  const { store } = deps;
+  const { store, dispatchEvent } = deps;
   const id = e.currentTarget.id.replace("select-", "");
   if (id && e.detail.selectedValue !== undefined) {
     store.setFormFieldValue({
       fieldName: id,
       value: e.detail.selectedValue,
     });
+    dispatchFormChange(id, e.detail.selectedValue, store.selectFormValues(), dispatchEvent);
   }
 };
 
 export const handleColorPickerChange = (e, deps) => {
-  const { store } = deps;
+  const { store, dispatchEvent } = deps;
   const id = e.currentTarget.id.replace("colorpicker-", "");
   if (id && e.detail.value !== undefined) {
     store.setFormFieldValue({
       fieldName: id,
       value: e.detail.value,
     });
+    dispatchFormChange(id, e.detail.value, store.selectFormValues(), dispatchEvent);
   }
 };
 
 export const handleSliderChange = (e, deps) => {
-  const { store } = deps;
+  const { store, dispatchEvent } = deps;
   const id = e.currentTarget.id.replace("slider-", "");
   if (id && e.detail.value !== undefined) {
     store.setFormFieldValue({
       fieldName: id,
       value: e.detail.value,
     });
+    dispatchFormChange(id, e.detail.value, store.selectFormValues(), dispatchEvent);
   }
 };

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

@@ -132,7 +132,7 @@ refs:
         handler: handleActionClick
   input-*:
     eventListeners:
-      input-keydown:
+      input-change:
         handler: handleInputChange
   select-*:
     eventListeners:
@@ -147,7 +147,8 @@ refs:
       slider-change:
         handler: handleSliderChange
 
-events: {}
+events:
+  form-change: {}
 
 template:
   - rtgl-view w=f h=f p=md g=lg ${containerAttrString}:

package/src/primitives/input.js

@@ -38,8 +38,8 @@ class RettangoliInputElement extends HTMLElement {
           font-weight: var(--xs-font-weight);
           line-height: var(--xs-line-height);
           letter-spacing: var(--xs-letter-spacing);
-          padding-left: var(--spacing-sm);
-          padding-right: var(--spacing-sm);
+          padding-left: var(--spacing-md);
+          padding-right: var(--spacing-md);
           height: 24px;
         }
         input:focus {
@@ -78,7 +78,7 @@ class RettangoliInputElement extends HTMLElement {
     this.shadow.appendChild(this._inputElement);
 
     // Bind event handler
-    this._inputElement.addEventListener('keydown', this._onChange);
+    this._inputElement.addEventListener('input', this._onChange);
   }
 
   static get observedAttributes() {
@@ -106,7 +106,7 @@ class RettangoliInputElement extends HTMLElement {
   }
 
   _onChange = (event) => {
-    this.dispatchEvent(new CustomEvent('input-keydown', {
+    this.dispatchEvent(new CustomEvent('input-change', {
       detail: {
         value: this._inputElement.value,
       },

package/src/common/BaseElement.js

@@ -1,182 +0,0 @@
-/**
- * Subscribes to all observables and returns a functionthat will unsubscribe
- * from all observables when called
- * @param {*} observables
- * @returns
- */
-const subscribeAll = (observables) => {
-  // Subscribe to all observables and store the subscription objects
-  const subscriptions = observables.map((observable) => observable.subscribe());
-
-  // Return a function that will unsubscribe from all observables when called
-  return () => {
-    for (const subscription of subscriptions) {
-      if (subscription && typeof subscription.unsubscribe === "function") {
-        subscription.unsubscribe();
-      }
-    }
-  };
-};
-
-/**
- * Creates a base web component element to be used in environments
- * where the output is strings such as server side rendering environments
- * @param {Object} param
- * @param {Function} param.render - The render function to be used in the element. compliant with uhtml.render
- * @returns
- */
-export const createSsrBaseElement = ({ render }) => {
-
-  class CSSStyleSheet {
-    _css = "";
-
-    get css() {
-      return this._css;
-    }
-
-    replaceSync(css) {
-      this._css = css;
-    }
-  }
-  class SsrRenderTarget {
-    innerHTML = "";
-    adoptedStyleSheets = [];
-    write(html) {
-      this.innerHTML = html;
-    }
-  }
-  class BaseBaseSsrElement {
-    renderTarget = new SsrRenderTarget();
-
-    constructor() {
-      const styleSheet = new CSSStyleSheet();
-      styleSheet.replaceSync(`:host { display: contents; }`);
-      this.renderTarget.adoptedStyleSheets = [styleSheet];
-    }
-  }
-  return class BaseSsrElement extends createGenericBaseElement({
-    BaseElement: BaseBaseSsrElement,
-    render,
-    skipOnMount: true,
-  }) {};
-};
-
-/**
- * Creates a base web component element to be used in web browser environments
- * @param {Object} param
- * @param {Function} param.render - The render function to be used in the element. compliant with uhtml.render
- * @returns
- */
-export const createWebComponentBaseElement = ({ render, styleSheet }) => {
-  let actualStyleSheet;
-
-  if (styleSheet) {
-    actualStyleSheet = styleSheet;
-  } else {
-    actualStyleSheet = new CSSStyleSheet();
-    actualStyleSheet.replaceSync(`:host { display: contents; }`);
-  }
-
-  return class BaseWebComponentElement extends createGenericBaseElement({
-    BaseElement: HTMLElement,
-    render,
-    skipOnMount: false,
-  }) {
-    static get observedAttributes() {
-      return ["key"];
-    }
-
-    constructor() {
-      super();
-      this.renderTarget = this.attachShadow({ mode: "closed" });
-    }
-
-    connectedCallback() {
-      this.renderTarget.adoptedStyleSheets = [actualStyleSheet];
-      this.baseOnMount();
-    }
-
-    disconnectedCallback() {
-      this.baseOnUnmount();
-    }
-
-    attributeChangedCallback() {
-      setTimeout(() => {
-        this.reRender();
-      }, 0);
-    }
-  };
-};
-
-/**
- * Creates a base web component element to be used in environments
- * where the output is strings such as server side rendering environments
- * @param {Object} param
- * @param {Object} param.BaseElement - The base element to be used in the element.
- * @param {Function} param.render - The render function to be used in the element. compliant with uhtml.render
- * @param {Boolean} param.skipOnMount - Whether to skip the onMount callback. Default is false.
- * @returns 
- */
-export const createGenericBaseElement = ({ BaseElement, render, skipOnMount = false }) => {
-  class GenericBaseElement extends BaseElement {
-
-    _renderKey = 0;
-    _unmountCallback;
-    // renderTarget;
-    disableFirstAutomatedRender = false;
-
-    get renderKey() {
-      return String(this._renderKey);
-    }
-
-    baseOnMount = () => {
-      if (!skipOnMount && this.onMount) {
-        this._unmountCallback = this.onMount();
-      }
-
-      if (!this.disableFirstAutomatedRender) {
-        this.reRender();
-      }
-
-      if (this.attachedObservables) {
-        if (Array.isArray(this.attachedObservables)) {
-          this.unsubscribe = subscribeAll(this.attachedObservables);
-        } else {
-          this.unsubscribe = subscribeAll(this.attachedObservables());
-        }
-      } else if (this.subscriptions) {
-        this.unsubscribe = subscribeAll(this.subscriptions);
-      }
-    };
-
-    baseOnUnmount = () => {
-      if (this._unmountCallback) {
-        this._unmountCallback();
-      }
-      if (this.onUnmount) {
-        this.onUnmount();
-      }
-      if (this.unsubscribe) {
-        this.unsubscribe();
-      }
-    };
-
-    /**
-     * @deprecated
-     * @see reRender
-     */
-    triggerRender = () => {
-      this.reRender();
-    };
-
-    /**
-     * ReRenders the component
-     */
-    reRender = () => {
-      this._renderKey++;
-      render(this.renderTarget, this.render());
-    };
-  }
-
-  return GenericBaseElement;
-};

package/src/lib/uhtml.js

@@ -1,9 +0,0 @@
-/**
- * Skipped minification because the original files appears to be already minified.
- * Original file: /npm/uhtml@4.7.0/keyed.js
- *
- * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
- */
-const{isArray:e}=Array,{getPrototypeOf:t,getOwnPropertyDescriptor:n}=Object,r=[],s=()=>document.createRange(),l=(e,t,n)=>(e.set(t,n),n),i=(e,t)=>t.reduceRight(o,e),o=(e,t)=>e.childNodes[t],{setPrototypeOf:c}=Object;let a;var u=(e,t,n)=>(a||(a=s()),n?a.setStartAfter(e):a.setStartBefore(e),a.setEndAfter(t),a.deleteContents(),e);const h=({firstChild:e,lastChild:t},n)=>u(e,t,n);let d=!1;const f=(e,t)=>d&&11===e.nodeType?1/t<0?t?h(e,!0):e.lastChild:t?e.valueOf():e.firstChild:e,p=e=>document.createComment(e);class g extends((e=>{function t(e){return c(e,new.target.prototype)}return t.prototype=e.prototype,t})(DocumentFragment)){#e=p("<>");#t=p("</>");#n=r;constructor(e){super(e),this.replaceChildren(this.#e,...e.childNodes,this.#t),d=!0}get firstChild(){return this.#e}get lastChild(){return this.#t}get parentNode(){return this.#e.parentNode}remove(){h(this,!1)}replaceWith(e){h(this,!0).replaceWith(e)}valueOf(){const{parentNode:e}=this;if(e===this)this.#n===r&&(this.#n=[...this.childNodes]);else{if(e){let{firstChild:e,lastChild:t}=this;for(this.#n=[e];e!==t;)this.#n.push(e=e.nextSibling)}this.replaceChildren(...this.#n)}return this}}const m=(e,t,n)=>e.setAttribute(t,n),b=(e,t)=>e.removeAttribute(t);let v;const C=(t,n,r)=>{r=r.slice(1),v||(v=new WeakMap);const s=v.get(t)||l(v,t,{});let i=s[r];return i&&i[0]&&t.removeEventListener(r,...i),i=e(n)?n:[n,!1],s[r]=i,i[0]&&t.addEventListener(r,...i),n},w=(e,t)=>{const{t:n,n:r}=e;let s=!1;switch(typeof t){case"object":if(null!==t){(r||n).replaceWith(e.n=t.valueOf());break}case"undefined":s=!0;default:n.data=s?"":t,r&&(e.n=null,r.replaceWith(n))}return t},x=(e,t,n)=>e[n]=t,$=(e,t,n)=>x(e,t,n.slice(1)),y=(e,t,n)=>null==t?(b(e,n),t):x(e,t,n),N=(e,t)=>("function"==typeof t?t(e):t.current=e,t),O=(e,t,n)=>(null==t?b(e,n):m(e,n,t),t),k=(e,t,n)=>(e.toggleAttribute(n.slice(1),t),t),A=(e,t,n)=>{const{length:s}=t;if(e.data=`[${s}]`,s)return((e,t,n,r,s)=>{const l=n.length;let i=t.length,o=l,c=0,a=0,u=null;for(;c<i||a<o;)if(i===c){const t=o<l?a?r(n[a-1],-0).nextSibling:r(n[o],0):s;for(;a<o;)e.insertBefore(r(n[a++],1),t)}else if(o===a)for(;c<i;)u&&u.has(t[c])||e.removeChild(r(t[c],-1)),c++;else if(t[c]===n[a])c++,a++;else if(t[i-1]===n[o-1])i--,o--;else if(t[c]===n[o-1]&&n[a]===t[i-1]){const s=r(t[--i],-0).nextSibling;e.insertBefore(r(n[a++],1),r(t[c++],-0).nextSibling),e.insertBefore(r(n[--o],1),s),t[i]=n[o]}else{if(!u){u=new Map;let e=a;for(;e<o;)u.set(n[e],e++)}if(u.has(t[c])){const s=u.get(t[c]);if(a<s&&s<o){let l=c,h=1;for(;++l<i&&l<o&&u.get(t[l])===s+h;)h++;if(h>s-a){const l=r(t[c],0);for(;a<s;)e.insertBefore(r(n[a++],1),l)}else e.replaceChild(r(n[a++],1),r(t[c++],-1))}else c++}else e.removeChild(r(t[c++],-1))}return n})(e.parentNode,n,t,f,e);switch(n.length){case 1:n[0].remove();case 0:break;default:u(f(n[0],0),f(n.at(-1),-0),!1)}return r},M=new Map([["aria",(e,t)=>{for(const n in t){const r=t[n],s="role"===n?n:`aria-${n}`;null==r?b(e,s):m(e,s,r)}return t}],["class",(e,t)=>y(e,t,null==t?"class":"className")],["data",(e,t)=>{const{dataset:n}=e;for(const e in t)null==t[e]?delete n[e]:n[e]=t[e];return t}],["ref",N],["style",(e,t)=>null==t?y(e,t,"style"):x(e.style,t,"cssText")]]),W=(e,r,s)=>{switch(r[0]){case".":return $;case"?":return k;case"@":return C;default:return s||"ownerSVGElement"in e?"ref"===r?N:O:M.get(r)||(r in e?r.startsWith("on")?x:((e,r)=>{let s;do{s=n(e,r)}while(!s&&(e=t(e)));return s})(e,r)?.set?y:O:O)}},S=(e,t)=>(e.textContent=null==t?"":t,t),E=(e,t,n)=>({a:e,b:t,c:n}),T=()=>E(null,null,r);var B=e=>(t,n)=>{const{a:s,b:l,c:o}=e(t,n),c=document.importNode(s,!0);let a=r;if(l!==r){a=[];for(let e,t,n=0;n<l.length;n++){const{a:s,b:o,c:p}=l[n],g=s===t?e:e=i(c,t=s);a[n]=(u=o,h=g,d=p,f=o===A?[]:o===w?T():null,{v:r,u:u,t:h,n:d,c:f})}}var u,h,d,f;return((e,t)=>({b:e,c:t}))(o?c.firstChild:new g(c),a)};const D=/^(?:plaintext|script|style|textarea|title|xmp)$/i,j=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,L=/<([a-zA-Z0-9]+[a-zA-Z0-9:._-]*)([^>]*?)(\/?)>/g,P=/([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g,z=/[\x01\x02]/g;let F,R,Z=document.createElement("template");var G=(e,t)=>{if(t)return F||(F=document.createElementNS("http://www.w3.org/2000/svg","svg"),R=s(),R.selectNodeContents(F)),R.createContextualFragment(e);Z.innerHTML=e;const{content:n}=Z;return Z=Z.cloneNode(!1),n};const H=e=>{const t=[];let n;for(;n=e.parentNode;)t.push(t.indexOf.call(n.childNodes,e)),e=n;return t},V=()=>document.createTextNode(""),_=(t,n,s)=>{const i=G(((e,t,n)=>{let r=0;return e.join("
").trim().replace(L,((e,t,r,s)=>`<${t}${r.replace(P,"=$2$1").trimEnd()}${s?n||j.test(t)?" /":`></${t}`:""}>`)).replace(z,(e=>"
"===e?`\x3c!--${t+r++}--\x3e`:t+r++))})(t,I,s),s),{length:o}=t;let c=r;if(o>1){const t=[],r=document.createTreeWalker(i,129);let l=0,a=`${I}${l++}`;for(c=[];l<o;){const i=r.nextNode();if(8===i.nodeType){if(i.data===a){const r=e(n[l-1])?A:w;r===w&&t.push(i),c.push(E(H(i),r,null)),a=`${I}${l++}`}}else{let e;for(;i.hasAttribute(a);){e||(e=H(i));const t=i.getAttribute(a);c.push(E(e,W(i,t,s),t)),b(i,a),a=`${I}${l++}`}!s&&D.test(i.localName)&&i.textContent.trim()===`\x3c!--${a}--\x3e`&&(c.push(E(e||H(i),S,null)),a=`${I}${l++}`)}}for(l=0;l<t.length;l++)t[l].replaceWith(V())}const{childNodes:a}=i;let{length:u}=a;return u<1?(u=1,i.appendChild(V())):1===u&&1!==o&&1!==a[0].nodeType&&(u=0),l(q,t,E(i,c,1===u))},q=new WeakMap,I="isµ";var J=e=>(t,n)=>q.get(t)||_(t,n,e);const K=B(J(!1)),Q=B(J(!0)),U=(e,{s:t,t:n,v:r})=>{if(e.a!==n){const{b:s,c:l}=(t?Q:K)(n,r);e.a=n,e.b=s,e.c=l}for(let{c:t}=e,n=0;n<t.length;n++){const e=r[n],s=t[n];switch(s.u){case A:s.v=A(s.t,X(s.c,e),s.v);break;case w:const t=e instanceof Y?U(s.c||(s.c=T()),e):(s.c=null,e);t!==s.v&&(s.v=w(s,t));break;default:e!==s.v&&(s.v=s.u(s.t,e,s.n,s.v))}}return e.b},X=(e,t)=>{let n=0,{length:r}=t;for(r<e.length&&e.splice(r);n<r;n++){const r=t[n];r instanceof Y?t[n]=U(e[n]||(e[n]=T()),r):e[n]=null}return t};class Y{constructor(e,t,n){this.s=e,this.t=t,this.v=n}toDOM(e=T()){return U(e,this)}}
-/*! (c) Andrea Giammarchi - MIT */const ee=e=>(t,...n)=>new Y(e,t,n),te=ee(!1),ne=ee(!0),re=new WeakMap;var se=(e,t)=>((e,t)=>{const n=re.get(e)||l(re,e,T()),{b:r}=n,s="function"==typeof t?t():t,i=s instanceof Y?s.toDOM(n):s;return r!==i&&e.replaceChildren((n.b=i).valueOf()),e})(e,t)
-/*! (c) Andrea Giammarchi - MIT */;const le=new WeakMap,ie=e=>(t,n)=>{const r=le.get(t)||l(le,t,new Map);return r.get(n)||l(r,n,function(t,...n){return new Y(e,t,n).toDOM(this)}.bind(T()))},oe=ie(!1),ce=ie(!0);export{Y as Hole,M as attr,te as html,oe as htmlFor,se as render,ne as svg,ce as svgFor};