@rettangoli/ui 0.1.31 → 0.1.32-rc1

package/src/components/select/select.store.js

@@ -2,7 +2,7 @@ import { deepEqual } from '../../common.js';
 
 // Attributes that should not be passed through to the container
 // These are either handled internally or have special meaning
-const blacklistedAttrs = [
+const blacklistedProps = [
   "id",
   "class",
   "style",
@@ -10,15 +10,15 @@ const blacklistedAttrs = [
   // Select-specific props that are handled separately
   "placeholder",
   "selectedValue",
-  "selected-value",
   "onChange",
-  "on-change",
-  "options"
+  "options",
+  "noClear",
+  "addOption",
 ];
 
-const stringifyAttrs = (attrs) => {
-  return Object.entries(attrs || {})
-    .filter(([key]) => !blacklistedAttrs.includes(key))
+const stringifyProps = (props = {}) => {
+  return Object.entries(props)
+    .filter(([key]) => !blacklistedProps.includes(key))
     .map(([key, value]) => `${key}=${value}`)
     .join(" ");
 };
@@ -34,15 +34,15 @@ export const createInitialState = () => Object.freeze({
   hoveredAddOption: false,
 });
 
-export const selectViewData = ({ state, props, attrs }) => {
+export const selectViewData = ({ state, props }) => {
   // Generate container attribute string
-  const containerAttrString = stringifyAttrs(attrs);
+  const containerAttrString = stringifyProps(props);
 
   // Use state's selected value if available, otherwise use props.selectedValue
   const currentValue = state.selectedValue !== null ? state.selectedValue : props.selectedValue;
 
   // Calculate display label from value
-  let displayLabel = props.placeholder || attrs.placeholder || 'Select an option';
+  let displayLabel = props.placeholder || "Select an option";
   let isPlaceholderLabel = true;
 
   const options = props.options || [];
@@ -72,22 +72,22 @@ export const selectViewData = ({ state, props, attrs }) => {
     selectedLabel: displayLabel,
     selectedLabelColor: isPlaceholderLabel ? "mu-fg" : "fg",
     hasValue: currentValue !== null && currentValue !== undefined,
-    showClear: !attrs['no-clear'] && !props['no-clear'] && (currentValue !== null && currentValue !== undefined),
+    showClear: !props.noClear && (currentValue !== null && currentValue !== undefined),
     showAddOption: !!props.addOption,
-    addOptionLabel: props.addOption?.label ? `+ ${props.addOption.label}` : '+ Add',
-    addOptionBgc: state.hoveredAddOption ? 'ac' : ''
+    addOptionLabel: props.addOption?.label ? `+ ${props.addOption.label}` : "+ Add",
+    addOptionBgc: state.hoveredAddOption ? "ac" : "",
   };
-}
+};
 
 export const selectState = ({ state }) => {
   return state;
-}
+};
 
 export const selectSelectedValue = ({ state }) => {
   return state.selectedValue;
-}
+};
 
-export const openOptionsPopover = (state, payload) => {
+export const openOptionsPopover = ({ state }, payload = {}) => {
   const { position, selectedIndex } = payload;
   state.position = position;
   state.isOpen = true;
@@ -95,36 +95,35 @@ export const openOptionsPopover = (state, payload) => {
   if (selectedIndex !== undefined && selectedIndex !== null) {
     state.hoveredOptionId = selectedIndex;
   }
-}
+};
 
-export const closeOptionsPopover = (state) => {
+export const closeOptionsPopover = ({ state }) => {
   state.isOpen = false;
-}
+};
 
-export const updateSelectedValue = (state, payload) => {
+export const updateSelectedValue = ({ state }, payload = {}) => {
   state.selectedValue = payload.value;
   state.isOpen = false;
-}
+};
 
-export const resetSelection = (state) => {
+export const resetSelection = ({ state }) => {
   state.selectedValue = undefined;
-}
+};
 
-export const setHoveredOption = (state, optionId) => {
-  state.hoveredOptionId = optionId;
-}
+export const setHoveredOption = ({ state }, payload = {}) => {
+  state.hoveredOptionId = payload.optionId;
+};
 
-export const clearHoveredOption = (state) => {
+export const clearHoveredOption = ({ state }) => {
   state.hoveredOptionId = null;
-}
+};
 
-export const clearSelectedValue = (state) => {
+export const clearSelectedValue = ({ state }) => {
   state.selectedValue = undefined;
-}
-
-export const setHoveredAddOption = (state, isHovered) => {
-  state.hoveredAddOption = isHovered;
-}
+};
 
+export const setHoveredAddOption = ({ state }, payload = {}) => {
+  state.hoveredAddOption = !!payload.isHovered;
+};
 
 

package/src/components/select/select.view.yaml

@@ -1,48 +1,9 @@
-elementName: rtgl-select
-
-viewDataSchema:
-  type: object
-
-attrsSchema:
-  type: object
-  properties:
-    placeholder:
-      type: string
-
-propsSchema:
-  type: object
-  properties:
-    placeholder:
-      type: string
-    options:
-      type: array
-      items:
-        type: object
-        properties:
-          label:
-            type: string
-          value:
-            type: any
-          testId:
-            type: string
-    selectedValue:
-      type: any
-    onChange:
-      type: function
-    no-clear:
-      type: boolean
-    addOption:
-      type: object
-      properties:
-        label:
-          type: string
-
 refs:
-  select-button:
+  selectButton:
     eventListeners:
       click:
         handler: handleButtonClick
-  clear-button:
+  clearButton:
     eventListeners:
       click:
         handler: handleClearClick
@@ -50,7 +11,7 @@ refs:
     eventListeners:
       close:
         handler: handleClickOptionsPopoverOverlay
-  option-*:
+  option*:
     eventListeners:
       click:
         handler: handleOptionClick
@@ -58,7 +19,7 @@ refs:
         handler: handleOptionMouseEnter
       mouseleave:
         handler: handleOptionMouseLeave
-  option-add:
+  optionAdd:
     eventListeners:
       click:
         handler: handleAddOptionClick
@@ -66,23 +27,19 @@ refs:
         handler: handleAddOptionMouseEnter
       mouseleave:
         handler: handleAddOptionMouseLeave
-
-events: {}
-
 template:
-  - rtgl-button#select-button v=ol ${containerAttrString} data-testid="select-button":
+  - rtgl-button#selectButton v=ol ${containerAttrString} data-testid="select-button":
       - rtgl-view d=h av=c w=f:
-          - rtgl-text c=${selectedLabelColor} ellipsis: ${selectedLabel}
-          - rtgl-view mh=md flex=1:
+          - rtgl-text w=1fg c=${selectedLabelColor} ellipsis: ${selectedLabel}
           - $if showClear:
-              - rtgl-svg#clear-button mr=md svg=x wh=16 c=mu-fg cur=p data-testid="select-clear-button":
-          - rtgl-svg svg=chevronDown wh=16 c=mu-fg:
-  - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} placement=right-start:
-      - rtgl-view wh=300 g=xs slot=content bgc=background br=md sv=true:
+              - rtgl-svg#clearButton ml=md svg=x wh=16 c=mu-fg cur=pointer data-testid="select-clear-button": null
+          - rtgl-svg ml=md svg=chevronDown wh=16 c=mu-fg: null
+  - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} place=rs:
+      - rtgl-view wh=300 g=xs slot=content bgc=mu br=md sv=true:
           - $for option, i in options:
-              - rtgl-view#option-${i} w=f ph=lg pv=md cur=p br=md bgc=${option.bgc} data-testid=${option.testId}:
+              - rtgl-view#option${i} w=f ph=lg pv=md cur=pointer br=md bgc=${option.bgc} data-testid=${option.testId}:
                   - rtgl-text: ${option.label}
           - $if showAddOption:
-              - rtgl-view w=f bw=xs bc=mu-bg bt=sm:
-              - rtgl-view#option-add w=f ph=lg pv=md cur=p br=md bgc=${addOptionBgc} data-testid="select-add-option":
+              - rtgl-view w=f bw=xs bc=mu bwt=sm: null
+              - rtgl-view#optionAdd w=f ph=lg pv=md cur=pointer br=md bgc=${addOptionBgc} data-testid="select-add-option":
                   - rtgl-text c=ac: ${addOptionLabel}

package/src/components/sidebar/sidebar.handlers.js

@@ -6,15 +6,15 @@ export const handleHeaderClick = (deps, payload) => {
 
   const header = store.selectHeader();
 
-  if (event.currentTarget.id === 'header-label') {
+  if (event.currentTarget.id === 'headerLabel') {
     path = header.labelPath;
-  } else if (event.currentTarget.id === 'header-image') {
+  } else if (event.currentTarget.id === 'headerImage') {
     path = header.image.path;
   } else if (event.currentTarget.id === 'header') {
     path = header.path;
   }
 
-  dispatchEvent(new CustomEvent('headerClick', {
+  dispatchEvent(new CustomEvent('header-click', {
     detail: {
       path
     },
@@ -26,9 +26,9 @@ export const handleHeaderClick = (deps, payload) => {
 export const handleItemClick = (deps, payload) => {
   const { store, dispatchEvent } = deps;
   const event = payload._event;
-  const id = event.currentTarget.id.replace('item-', '');
+  const id = event.currentTarget.dataset.itemId || event.currentTarget.id.slice('item'.length);
   const item = store.selectItem(id);
-  dispatchEvent(new CustomEvent('itemClick', {
+  dispatchEvent(new CustomEvent('item-click', {
     detail: {
       item,
     },

package/src/components/sidebar/sidebar.schema.yaml

@@ -0,0 +1,57 @@
+componentName: rtgl-sidebar
+propsSchema:
+  type: object
+  properties:
+    mode:
+      type: string
+    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
+events:
+  header-click:
+    type: object
+    properties:
+      path:
+        type: string
+  item-click:
+    type: object
+    properties:
+      item:
+        type: object
+methods:
+  type: object
+  properties: {}

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

@@ -1,11 +1,33 @@
 export const createInitialState = () => Object.freeze({});
 
-const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
+const blacklistedAttrs = ['id', 'class', 'style', 'slot', 'header', 'items', 'selectedItemId', 'mode'];
 
-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 parseMaybeEncodedJson = (value) => {
+  if (value === undefined || value === null) {
+    return undefined;
+  }
+  if (typeof value === "object") {
+    return value;
+  }
+  if (typeof value !== "string") {
+    return undefined;
+  }
+
+  try {
+    return JSON.parse(decodeURIComponent(value));
+  } catch {
+    try {
+      return JSON.parse(value);
+    } catch {
+      return undefined;
+    }
+  }
+};
+
 function flattenItems(items, selectedItemId = null) {
   let result = [];
 
@@ -50,14 +72,14 @@ function flattenItems(items, selectedItemId = null) {
   return result;
 }
 
-export const selectViewData = ({ 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;
+export const selectViewData = ({ props }) => {
+  const resolvedHeader = parseMaybeEncodedJson(props.header) || props.header;
+  const resolvedItems = parseMaybeEncodedJson(props.items) || props.items;
+  const selectedItemId = props.selectedItemId;
 
-  const containerAttrString = stringifyAttrs(attrs);
-  const mode = attrs.mode || 'full';
-  const header = attrsHeader || {
+  const containerAttrString = stringifyAttrs(props);
+  const mode = props.mode || 'full';
+  const header = resolvedHeader || {
     label: '',
     path: '',
     image: {
@@ -68,7 +90,7 @@ export const selectViewData = ({ state, props, attrs }) => {
     },
   };
 
-  const items = attrsItems ? flattenItems(attrsItems, selectedItemId) : [];
+  const items = resolvedItems ? flattenItems(resolvedItems, selectedItemId) : [];
 
   // Computed values based on mode
   const sidebarWidth = mode === 'full' ? 272 : 64;
@@ -121,22 +143,22 @@ export const selectViewData = ({ state, props, attrs }) => {
   };
 }
 
-export const selectHeader = ({ state, props, attrs }) => {
-  const attrsHeader = attrs.header ? JSON.parse(decodeURIComponent(attrs.header)) : props.header;
-  return attrsHeader;
-}
+export const selectHeader = ({ props }) => {
+  return parseMaybeEncodedJson(props.header) || props.header;
+};
 
 export const selectActiveItem = ({ state, props }) => {
-  const items = props.items ? flattenItems(props.items) : [];
+  const resolvedItems = parseMaybeEncodedJson(props.items) || props.items;
+  const items = resolvedItems ? flattenItems(resolvedItems) : [];
   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) : [];
+export const selectItem = ({ props }, id) => {
+  const resolvedItems = parseMaybeEncodedJson(props.items) || props.items;
+  const items = resolvedItems ? flattenItems(resolvedItems) : [];
   return items.find(item => item.id === id);
-}
+};
 
-export const setState = (state) => {
+export const setState = ({ state }) => {
   // State management if needed
-}
+};