@rettangoli/ui 0.1.30 → 0.1.32-rc1

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

@@ -1,125 +1,9 @@
-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
-        testId:
-          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
-          testId:
-            type: string
-
 refs:
-  header-image:
+  headerImage:
     eventListeners:
       click:
         handler: handleHeaderClick
-  header-label:
+  headerLabel:
     eventListeners:
       click:
         handler: handleHeaderClick
@@ -127,68 +11,89 @@ refs:
     eventListeners:
       click:
         handler: handleHeaderClick
-  item-*:
+  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.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}": null
+          $elif header.image.path:
+            - rtgl-view#headerImage cur=pointer:
+                - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}": null
+          $else:
+            - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}": null
     - $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}"
-
+        - $if header.labelHref:
+            - rtgl-text href=${header.labelHref} s=lg: ${header.label}
+          $elif header.labelPath:
+            - rtgl-view#headerLabel cur=pointer:
+                - rtgl-text s=lg: ${header.label}
+          $else:
+            - rtgl-text s=lg: ${header.label}
 template:
   - rtgl-view h=f w=${sidebarWidth} bwr=xs ah=${ah} ${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 data-testid=${header.testId}:
-              - *headerContent
-
-    - rtgl-view w=f ph=${headerPadding} pb=lg g=xs ah=${ah}:
-      - $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 data-testid=${item.testId}:
-              - $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}"
+      - rtgl-view ph=${headerPadding} pv=lg:
+          - $if header.href:
+              - rtgl-view href=${header.href} d=h av=c ah=${headerAlign} g=lg w=${headerWidth}:
+                  - - $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}": null
+                          $elif header.image.path:
+                            - rtgl-view#headerImage cur=pointer:
+                                - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}": null
+                          $else:
+                            - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}": null
+                    - $if header.label && showLabels:
+                        - $if header.labelHref:
+                            - rtgl-text href=${header.labelHref} s=lg: ${header.label}
+                          $elif header.labelPath:
+                            - rtgl-view#headerLabel cur=pointer:
+                                - rtgl-text s=lg: ${header.label}
+                          $else:
+                            - rtgl-text s=lg: ${header.label}
+            $else:
+              - rtgl-view#header d=h av=c ah=${headerAlign} g=lg w=${headerWidth} cur=pointer data-testid=${header.testId}:
+                  - - $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}": null
+                          $elif header.image.path:
+                            - rtgl-view#headerImage cur=pointer:
+                                - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}": null
+                          $else:
+                            - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}": null
+                    - $if header.label && showLabels:
+                        - $if header.labelHref:
+                            - rtgl-text href=${header.labelHref} s=lg: ${header.label}
+                          $elif header.labelPath:
+                            - rtgl-view#headerLabel cur=pointer:
+                                - rtgl-text s=lg: ${header.label}
+                          $else:
+                            - rtgl-text s=lg: ${header.label}
+      - rtgl-view w=f ph=${headerPadding} pb=lg g=xs ah=${ah}:
+          - $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-svg wh=${iconSize} svg=${item.icon} c=fg:
+                      - rtgl-view mt=md h=1 bgc=mu: null
                 $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()}"
+                  - rtgl-view#item${i} data-item-id=${item.id} ${item.hrefAttr} h=${itemHeight} av=c ${itemAlignAttr} ph=${itemPadding} w=${itemWidth} h-bgc=${item.itemHoverBgc} br=lg bgc=${item.itemBgc} cur=pointer data-testid=${item.testId}:
+                      - $if item.icon:
+                          - $if showLabels:
+                              - rtgl-view d=h ah=${itemContentAlign} g=sm:
+                                  - rtgl-svg wh=16 svg=${item.icon} c=fg: null
+                                  - rtgl-text s=sm: ${item.title}
+                            $else:
+                              - rtgl-svg wh=${iconSize} svg=${item.icon} c=fg: null
+                        $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/components/sliderInput/sliderInput.handlers.js

@@ -1,15 +1,15 @@
 export const handleBeforeMount = (deps) => {
-  const { store, attrs } = deps;
-  store.setValue(attrs.value ?? 0);
+  const { store, props } = deps;
+  store.setValue({ value: props.value ?? 0 });
 }
 
 export const handleOnUpdate = (deps, payload) => {
-  const { oldAttrs, newAttrs } = payload;
+  const { oldProps, newProps } = payload;
   const { store, render } = deps;
 
-  if (oldAttrs?.value !== newAttrs?.value) {
-    const value = newAttrs?.value ?? 0;
-    store.setValue(value);
+  if (oldProps?.value !== newProps?.value) {
+    const value = newProps?.value ?? 0;
+    store.setValue({ value });
     render();
   }
 }
@@ -19,14 +19,34 @@ export const handleValueChange = (deps, payload) => {
   const event = payload._event;
   const newValue = Number(event.detail.value);
 
-  store.setValue(newValue);
+  store.setValue({ value: newValue });
 
   // Re-render to sync slider and input
   render();
 
   // Dispatch event for external listeners
   dispatchEvent(
-    new CustomEvent("slider-input-value-change", {
+    new CustomEvent("value-change", {
+      detail: {
+        value: newValue,
+      },
+      bubbles: true,
+    }),
+  );
+};
+
+export const handleValueInput = (deps, payload) => {
+  const { store, render, dispatchEvent } = deps;
+  const event = payload._event;
+  const newValue = Number(event.detail.value);
+
+  store.setValue({ value: newValue });
+
+  // Re-render to sync slider and input
+  render();
+
+  dispatchEvent(
+    new CustomEvent("value-input", {
       detail: {
         value: newValue,
       },

package/src/components/sliderInput/sliderInput.schema.yaml

@@ -0,0 +1,27 @@
+componentName: rtgl-slider-input
+propsSchema:
+  type: object
+  properties:
+    key:
+      type: string
+    value:
+      type: string
+      default: '0'
+    w:
+      type: string
+      default: ''
+    min:
+      type: string
+      default: '0'
+    max:
+      type: string
+      default: '100'
+    step:
+      type: string
+      default: '1'
+events:
+  value-input: {}
+  value-change: {}
+methods:
+  type: object
+  properties: {}

package/src/components/sliderInput/sliderInput.store.js

@@ -2,17 +2,17 @@ export const createInitialState = () => Object.freeze({
   value: 0
 });
 
-export const selectViewData = ({ state, attrs }) => {
+export const selectViewData = ({ state, props }) => {
   return {
-    key: attrs.key,
+    key: props.key,
     value: state.value,
-    w: attrs.w || '',
-    min: attrs.min || 0,
-    max: attrs.max || 100,
-    step: attrs.step || 1
+    w: props.w || '',
+    min: props.min || 0,
+    max: props.max || 100,
+    step: props.step || 1
   };
 }
 
-export const setValue = (state, newValue) => {
-  state.value = newValue;
-}
+export const setValue = ({ state }, payload = {}) => {
+  state.value = payload.value;
+}

package/src/components/sliderInput/sliderInput.view.yaml

@@ -1,43 +1,18 @@
-elementName: rtgl-slider-input
-
-viewDataSchema:
-  type: object
-
-attrsSchema:
-  type: object
-  properties:
-    value:
-      type: string
-      default: "0"
-    w:
-      type: string
-      default: ""
-    min:
-      type: string
-      default: "0"
-    max:
-      type: string
-      default: "100"
-    step:
-      type: string
-      default: "1"
-
 refs:
   input:
     eventListeners:
-      input-change:
+      value-input:
+        handler: handleValueInput
+      value-change:
         handler: handleValueChange
   slider:
     eventListeners:
-      slider-change:
+      value-change:
         handler: handleValueChange
-
-events:
-  form-change: {}
-
+      value-input:
+        handler: handleValueInput
 template:
   - rtgl-view d=h av=c g=md w=${w}:
-      - rtgl-slider#slider key=${key} w=f type=range min=${min} max=${max} step=${step} value=${value}:
+      - rtgl-slider#slider key=${key} w=f type=range min=${min} max=${max} step=${step} value=${value}: null
       - rtgl-view w=84:
-          - rtgl-input#input key=${key} w=f type=number min=${min} max=${max} step=${step} value=${value}:
-
+          - rtgl-input#input key=${key} w=f type=number min=${min} max=${max} step=${step} value=${value}: null

package/src/components/table/table.handlers.js

@@ -5,7 +5,7 @@ export const handleBeforeMount = (deps) => {
 export const handleRowClick = (deps, payload) => {
   const { dispatchEvent, props } = deps;
   const event = payload._event;
-  const rowIndex = parseInt(event.currentTarget.id.replace("row-", ""));
+  const rowIndex = parseInt(event.currentTarget.id.slice("row".length), 10);
   const rowData = props.data?.rows?.[rowIndex];
 
   if (rowData) {
@@ -23,7 +23,7 @@ export const handleRowClick = (deps, payload) => {
 export const handleHeaderClick = (deps, payload) => {
   const { store, render, dispatchEvent } = deps;
   const event = payload._event;
-  const columnKey = event.currentTarget.id.replace("header-", "");
+  const columnKey = event.currentTarget.dataset.columnKey;
   const currentSort = store.selectSortInfo();
 
   // Determine new sort direction
@@ -54,4 +54,4 @@ export const handleHeaderClick = (deps, payload) => {
       },
     }),
   );
-};
+};

package/src/components/table/table.schema.yaml

@@ -0,0 +1,27 @@
+componentName: rtgl-table
+propsSchema:
+  type: object
+  properties:
+    data:
+      type: object
+      properties:
+        columns:
+          type: array
+          items:
+            type: object
+            properties:
+              key:
+                type: string
+              label:
+                type: string
+        rows:
+          type: array
+          items:
+            type: object
+    responsive:
+      type: boolean
+      default: true
+events: {}
+methods:
+  type: object
+  properties: {}

package/src/components/table/table.store.js

@@ -3,10 +3,10 @@ export const createInitialState = () => Object.freeze({
   sortDirection: null,
 });
 
-const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
+const blacklistedAttrs = ['id', 'class', 'style', 'slot', 'data'];
 
-const stringifyAttrs = (attrs) => {
-  return Object.entries(attrs).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
+const stringifyAttrs = (props = {}) => {
+  return Object.entries(props).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
 }
 
 const getNestedValue = (obj, path) => {
@@ -23,8 +23,8 @@ const getNestedValue = (obj, path) => {
   return result;
 }
 
-export const selectViewData = ({ state, props, attrs }) => {
-  const containerAttrString = stringifyAttrs(attrs);
+export const selectViewData = ({ state, props }) => {
+  const containerAttrString = stringifyAttrs(props);
   const data = props.data || { columns: [], rows: [] };
 
   // Transform rows to create cells array for easier template access
@@ -61,12 +61,12 @@ export const selectSortInfo = ({ state }) => {
   };
 }
 
-export const setSortColumn = (state, { column, direction }) => {
+export const setSortColumn = ({ state }, { column, direction } = {}) => {
   state.sortColumn = column;
   state.sortDirection = direction;
 }
 
-export const clearSort = (state) => {
+export const clearSort = ({ state }) => {
   state.sortColumn = null;
   state.sortDirection = null;
-}
+}

package/src/components/table/table.view.yaml

@@ -1,59 +1,19 @@
-elementName: rtgl-table
-
-viewDataSchema:
-  type: object
-  properties:
-    columns:
-      type: array
-    rows:
-      type: array
-    containerAttrString:
-      type: string
-
-propsSchema:
-  type: object
-  properties:
-    data:
-      type: object
-      properties:
-        columns:
-          type: array
-          items:
-            type: object
-            properties:
-              key:
-                type: string
-              label:
-                type: string
-        rows:
-          type: array
-          items:
-            type: object
-    responsive:
-      type: boolean
-      default: true
-
 refs:
-  row-*:
+  row*:
     eventListeners:
       click:
         handler: handleRowClick
-  header-*:
+  header*:
     eventListeners:
       click:
         handler: handleHeaderClick
-
-events: {}
-
 styles:
   table:
     width: 100%
     border-collapse: collapse
     border-spacing: 0
-  
   thead:
     border-bottom: 2px solid var(--border)
-  
   th:
     padding: 12px
     text-align: left
@@ -64,40 +24,34 @@ styles:
     position: sticky
     top: 0
     z-index: 1
-  
   tbody tr:
     border-bottom: 1px solid var(--border)
-  
   tbody tr:last-child:
     border-bottom: none
-  
   td:
     padding: 12px
     color: var(--foreground)
-  
   .table-container:
     width: 100%
     height: 100%
     overflow: auto
-  
   .empty-state:
     text-align: center
     padding: 24px
     color: var(--muted-foreground)
-
 template:
   - rtgl-view.table-container ${containerAttrString}:
-    - $if rows.length > 0:
-      - table:
-        - thead:
-          - tr:
-            - $for column, i in columns:
-              - th#header-${column.key}: ${column.label}
-        - tbody:
-          - $for row, rowIndex in rows:
-            - tr#row-${row.index}:
-              - $for cell, cellIndex in row.cells:
-                - td: ${cell.value}
-      $else:
-        - rtgl-view.empty-state w=f p=xl:
-          - rtgl-text c=mu-fg: No data available
+      - $if rows.length > 0:
+          - table:
+              - thead:
+                  - tr:
+                      - $for column, i in columns:
+                          - th#header${i} data-column-key=${column.key}: ${column.label}
+              - tbody:
+                  - $for row, rowIndex in rows:
+                      - tr#row${rowIndex}:
+                          - $for cell, cellIndex in row.cells:
+                              - td: ${cell.value}
+        $else:
+          - rtgl-view.empty-state w=f p=xl:
+              - rtgl-text c=mu-fg: No data available

package/src/components/tabs/tabs.schema.yaml

@@ -0,0 +1,26 @@
+componentName: rtgl-tabs
+propsSchema:
+  type: object
+  properties:
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          id:
+            type: string
+          testId:
+            type: string
+    selectedTab:
+      type: string
+events:
+  item-click:
+    type: object
+    properties:
+      id:
+        type: string
+methods:
+  type: object
+  properties: {}