rettangoli-ui 0.1.0-rc2 → 0.1.0-rc4

package/src/components/sidebar/sidebar.store.js

@@ -0,0 +1,139 @@
+export const INITIAL_STATE = Object.freeze({});
+
+const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
+
+const stringifyAttrs = (attrs) => {
+  return Object.entries(attrs).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
+}
+
+function flattenItems(items, selectedItemId = null) {
+  let result = [];
+
+  for (const item of items) {
+    const itemId = item.id || item.href || item.path;
+    const isSelected = selectedItemId === itemId;
+    
+    // Add the parent item if it's not just a group label
+    result.push({
+      id: itemId,
+      title: item.title,
+      href: item.href,
+      type: item.type || 'item',
+      icon: item.icon,
+      hrefAttr: item.href ? `href=${item.href}` : '',
+      isSelected,
+      itemBgc: isSelected ? 'ac' : 'bg',
+      itemHoverBgc: isSelected ? 'ac' : 'mu',
+    });
+
+    // Add child items if they exist
+    if (item.items && Array.isArray(item.items)) {
+      for (const subItem of item.items) {
+        const subItemId = subItem.id || subItem.href || subItem.path;
+        const isSubSelected = selectedItemId === subItemId;
+        
+        result.push({
+          id: subItemId,
+          title: subItem.title,
+          href: subItem.href,
+          type: subItem.type || 'item',
+          icon: subItem.icon,
+          hrefAttr: subItem.href ? `href=${subItem.href}` : '',
+          isSelected: isSubSelected,
+          itemBgc: isSubSelected ? 'ac' : 'bg',
+          itemHoverBgc: isSubSelected ? 'ac' : 'mu',
+        });
+      }
+    }
+  }
+
+  return result;
+}
+
+export const toViewData = ({ state, props, attrs }) => {
+  const attrsHeader = attrs.header ? JSON.parse(decodeURIComponent(attrs.header)) : props.header;
+  const attrsItems = attrs.items ? JSON.parse(decodeURIComponent(attrs.items)) : props.items;
+  const selectedItemId = attrs.selectedItemId || props.selectedItemId;
+
+  const containerAttrString = stringifyAttrs(attrs);
+  const mode = attrs.mode || 'full';
+  const header = attrsHeader || {
+    label: '',
+    path: '',
+    image: {
+      src: '',
+      alt: '',
+      width: 0,
+      height: 0,
+    },
+  };
+
+  const items = attrsItems ? flattenItems(attrsItems, selectedItemId) : [];
+
+  // Computed values based on mode
+  const sidebarWidth = mode === 'full' ? 272 : 64;
+  const headerAlign = mode === 'full' ? 'fs' : 'c';
+  const itemAlign = mode === 'full' ? 'fs' : 'c';
+  const headerPadding = mode === 'full' ? 'lg' : 'sm';
+  const itemPadding = mode === 'full' ? 'md' : 'sm';
+  const itemHeight = mode === 'shrunk-lg' ? 48 : 40;
+  const iconSize = mode === 'shrunk-lg' ? 28 : 20;
+  const firstLetterSize = mode === 'shrunk-lg' ? 'md' : 'sm';
+  const showLabels = mode === 'full';
+  const showGroupLabels = mode === 'full';
+  
+  // For items with icons in full mode, we need left alignment within the container
+  // but the container itself should use flex-start alignment
+  const itemContentAlign = mode === 'full' ? 'fs' : 'c';
+  
+  // Item container alignment - only set for shrunk modes, leave default for full mode
+  const itemAlignAttr = mode === 'full' ? '' : `ah=${itemAlign}`;
+  
+  // Item width - for shrunk modes, make it square to constrain the highlight
+  const itemWidth = mode === 'full' ? 'f' : itemHeight;
+  
+  // Header width - should match item width for alignment
+  const headerWidth = itemWidth;
+
+  return {
+    containerAttrString,
+    mode,
+    header,
+    items,
+    sidebarWidth,
+    headerAlign,
+    itemAlign,
+    headerPadding,
+    itemPadding,
+    itemHeight,
+    iconSize,
+    firstLetterSize,
+    showLabels,
+    showGroupLabels,
+    itemContentAlign,
+    itemAlignAttr,
+    itemWidth,
+    headerWidth,
+    selectedItemId
+  };
+}
+
+export const selectHeader = ({ state, props, attrs }) => {
+  const attrsHeader = attrs.header ? JSON.parse(decodeURIComponent(attrs.header)) : props.header;
+  return attrsHeader;
+}
+
+export const selectActiveItem = ({ state, props }) => {
+  const items = props.items ? flattenItems(props.items) : [];
+  return items.find(item => item.active);
+}
+
+export const selectItem = ({ state, props, attrs }, id) => {
+  const attrsItems = attrs.items ? JSON.parse(decodeURIComponent(attrs.items)) : props.items;
+  const items = attrsItems ? flattenItems(attrsItems) : [];
+  return items.find(item => item.id === id);
+}
+
+export const setState = (state) => {
+  // State management if needed
+}

package/src/components/sidebar/sidebar.view.yaml

@@ -0,0 +1,190 @@
+elementName: rtgl-sidebar
+
+viewDataSchema:
+  type: object
+  properties:
+    containerAttrString:
+      type: string
+    mode:
+      type: string
+      enum: ['full', 'shrunk', 'shrunk-lg']
+      default: 'full'
+    sidebarWidth:
+      type: number
+    headerAlign:
+      type: string
+    itemAlign:
+      type: string
+    headerPadding:
+      type: string
+    itemPadding:
+      type: string
+    itemHeight:
+      type: number
+    iconSize:
+      type: number
+    firstLetterSize:
+      type: string
+    showLabels:
+      type: boolean
+    showGroupLabels:
+      type: boolean
+    itemContentAlign:
+      type: string
+    itemAlignAttr:
+      type: string
+    itemWidth:
+      type: string
+    headerWidth:
+      type: string
+    selectedItemId:
+      type: string
+    header:
+      type: object
+      properties:
+        label:
+          type: string
+        href:
+          type: string
+        image:
+          type: object
+          properties:
+            src:
+              type: string
+            width:
+              type: number
+            height:
+              type: number
+            alt:
+              type: string
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          title:
+            type: string
+          slug:
+            type: string
+          type:
+            type: string
+          active:
+            type: boolean
+          icon:
+            type: string
+
+propsSchema:
+  type: object
+  properties:
+    selectedItemId:
+      type: string
+    header:
+      type: object
+      properties:
+        label:
+          type: string
+        href:
+          type: string
+        image:
+          type: object
+          properties:
+            src:
+              type: string
+            width:
+              type: number
+            height:
+              type: number
+            alt:
+              type: string
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          title:
+            type: string
+          slug:
+            type: string
+          type:
+            type: string
+          items:
+            type: array
+
+refs:
+  header-image:
+    eventListeners:
+      click:
+        handler: handleHeaderClick
+  header-label:
+    eventListeners:
+      click:
+        handler: handleHeaderClick
+  header:
+    eventListeners:
+      click:
+        handler: handleHeaderClick
+  item-*:
+    eventListeners:
+      click:
+        handler: handleItemClick
+
+events:
+  headerClick:
+    type: object
+    properties:
+      path:
+        type: string
+
+anchors:
+  - &headerContent
+    - $if header.image && header.image.src:
+      - $if header.image.href:
+          - a href=${header.image.href}:
+            - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}":
+        $elif header.image.path:
+          - rtgl-view#header-image cur=p:
+            - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}":
+        $else:
+          - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}":
+    - $if header.label && showLabels:
+      - $if header.labelHref:
+          - rtgl-text href=${header.labelHref} s=lg: "${header.label}"
+        $elif header.labelPath:
+          - rtgl-view#header-label cur=p:
+            - rtgl-text s=lg: "${header.label}"
+        $else:
+          - rtgl-text s=lg: "${header.label}"
+
+template:
+  - rtgl-view h=f w=${sidebarWidth} bwr=xs ${containerAttrString}:
+    - rtgl-view ph=${headerPadding} pv=lg:
+      - $if header.href:
+          - rtgl-view href=${header.href} d=h av=c ah=${headerAlign} g=lg w=${headerWidth}:
+            - *headerContent
+        $else:
+            - rtgl-view#header d=h av=c ah=${headerAlign} g=lg w=${headerWidth} cur=p:
+              - *headerContent
+
+    - rtgl-view w=f ph=${headerPadding} pb=lg g=xs:
+      - $for item, i in items:
+        - $if item.type == "groupLabel":
+            - $if showGroupLabels:
+                - rtgl-view mt=md h=32 av=c ph=md:
+                  - rtgl-text s=xs c=mu-fg: "${item.title}"
+              $else:
+                - rtgl-view mt=md h=1 bgc=mu-bg:
+          $else:
+            - rtgl-view#item-${item.id} ${item.hrefAttr} h=${itemHeight} av=c ${itemAlignAttr} ph=${itemPadding} w=${itemWidth} h-bgc=${item.itemHoverBgc} br=lg bgc=${item.itemBgc} cur=p title="${item.title}":
+              - $if item.icon:
+                  - $if showLabels:
+                      - rtgl-view d=h ah=${itemContentAlign} g=sm:
+                        - rtgl-svg wh=16 svg=${item.icon} c=fg:
+                        - rtgl-text s=sm: "${item.title}"
+                    $else:
+                      - rtgl-svg wh=${iconSize} svg=${item.icon} c=fg:
+                $else:
+                  - $if showLabels:
+                      - rtgl-text s=sm: "${item.title}"
+                    $else:
+                      - rtgl-view wh=${iconSize} br=f bgc=mu av=c ah=c:
+                        - rtgl-text s=${firstLetterSize} c=fg: "${item.title.charAt(0).toUpperCase()}"

package/src/entry-iife-layout.js

@@ -0,0 +1,15 @@
+import RettangoliButton from './primitives/button.js'
+import RettangoliView from './primitives/view.js';
+import RettangoliText from './primitives/text.js';
+import RettangoliImage from './primitives/image.js';
+import RettangoliSvg from './primitives/svg.js';
+import RettangoliInput from './primitives/input.js';
+import RettangoliTextArea from './primitives/textarea.js';
+
+customElements.define("rtgl-button", RettangoliButton({}));
+customElements.define("rtgl-view", RettangoliView({}));
+customElements.define("rtgl-text", RettangoliText({}));
+customElements.define("rtgl-image", RettangoliImage({}));
+customElements.define("rtgl-svg", RettangoliSvg({}));
+customElements.define("rtgl-input", RettangoliInput({}));
+customElements.define("rtgl-textarea", RettangoliTextArea({}));

package/src/entry-iife-ui.js

@@ -0,0 +1,18 @@
+import RettangoliButton from './primitives/button.js'
+import RettangoliView from './primitives/view.js';
+import RettangoliText from './primitives/text.js';
+import RettangoliImage from './primitives/image.js';
+import RettangoliSvg from './primitives/svg.js';
+import RettangoliInput from './primitives/input.js';
+import RettangoliTextArea from './primitives/textarea.js';
+
+customElements.define("rtgl-button", RettangoliButton({}));
+customElements.define("rtgl-view", RettangoliView({}));
+customElements.define("rtgl-text", RettangoliText({}));
+customElements.define("rtgl-image", RettangoliImage({}));
+customElements.define("rtgl-svg", RettangoliSvg({}));
+customElements.define("rtgl-input", RettangoliInput({}));
+customElements.define("rtgl-textarea", RettangoliTextArea({}));
+
+// built from rettangoli cli fe
+import '../.temp/dynamicImport.js'

package/src/index.js

@@ -0,0 +1,17 @@
+import RettangoliButton from './primitives/button.js'
+import RettangoliView from './primitives/view.js';
+import RettangoliText from './primitives/text.js';
+import RettangoliImage from './primitives/image.js';
+import RettangoliSvg from './primitives/svg.js';
+import RettangoliInput from './primitives/input.js';
+import RettangoliTextArea from './primitives/textarea.js';
+
+export {
+    RettangoliButton,
+    RettangoliView,
+    RettangoliText,
+    RettangoliImage,
+    RettangoliSvg,
+    RettangoliInput,
+    RettangoliTextArea,
+}

package/src/lib/uhtml.js

@@ -0,0 +1,9 @@
+/**
+ * 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};