@rettangoli/ui 0.1.31 → 1.0.0-rc1

package/src/components/navbar/navbar.view.yaml

@@ -1,74 +1,30 @@
-elementName: rtgl-navbar
-
-viewDataSchema:
-  type: object
-  properties:
-    containerAttrString:
-      type: string
-    start:
-      type: object
-      properties:
-        label:
-          type: string
-        href:
-          type: string
-        image:
-          type: object
-          properties:
-            src:
-              type: string
-        hasImage:
-          type: boolean
-        hasHref:
-          type: boolean
-
-propsSchema:
-  type: object
-  properties:
-    start:
-      type: object
-      properties:
-        label:
-          type: string
-        href:
-          type: string
-        image:
-          type: object
-          properties:
-            src:
-              type: string
-
 refs:
   start:
     eventListeners:
       click:
         handler: handleClickStart
-
-events:
-  clickStart:
-    type: object
-    properties:
-      path:
-        type: string
-
 anchors:
-  - &image
-    - rtgl-text s=lg: "${start.label}"
+  - - rtgl-text s=lg: ${start.label}
     - $if start.image && start.image.src:
-        - rtgl-image w=${start.image.width} h=${start.image.height} src=${start.image.src} alt=${start.image.alt}:
-
+        - rtgl-image w=${start.image.width} h=${start.image.height} src=${start.image.src} alt=${start.image.alt}: null
 template:
   - rtgl-view bgc=bg d=h h=48 av=c w=f ${containerAttrString}:
-    - $if start.href:
-        - a href=${start.href}:
-          - rtgl-view d=h av=c g=lg g=md:
-            - *image
-      $elif start.path:
-        - rtgl-view#start d=h av=c g=lg g=md cur=p:
-          - *image
-      $else:
-        - rtgl-view d=h av=c g=lg g=md:
-          - *image
-    - rtgl-view flex=1:
-    - rtgl-view d=h av=c g=lg:
-      - slot name=right:
+      - $if start.href:
+          - a href=${start.href}:
+              - rtgl-view d=h av=c g=md:
+                  - - rtgl-text s=lg: ${start.label}
+                    - $if start.image && start.image.src:
+                        - rtgl-image w=${start.image.width} h=${start.image.height} src=${start.image.src} alt=${start.image.alt}: null
+        $elif start.path:
+          - rtgl-view#start d=h av=c g=md cur=pointer:
+              - - rtgl-text s=lg: ${start.label}
+                - $if start.image && start.image.src:
+                    - rtgl-image w=${start.image.width} h=${start.image.height} src=${start.image.src} alt=${start.image.alt}: null
+        $else:
+          - rtgl-view d=h av=c g=md:
+              - - rtgl-text s=lg: ${start.label}
+                - $if start.image && start.image.src:
+                    - rtgl-image w=${start.image.width} h=${start.image.height} src=${start.image.src} alt=${start.image.alt}: null
+      - rtgl-view w=1fg: null
+      - rtgl-view d=h av=c g=lg:
+          - slot name=right: null

package/src/components/pageOutline/pageOutline.handlers.js

@@ -38,7 +38,7 @@ const updateToLatestCurrentId = (headingElements, offsetTop, deps) => {
   }
   
   if (currentHeadingId && currentHeadingId !== store.selectCurrentId()) {
-    store.setCurrentId(currentHeadingId);
+    store.setCurrentId({ id: currentHeadingId });
     render();
   }
 };
@@ -71,7 +71,7 @@ const startListening = (contentContainer, scrollContainer, offsetTop, deps) => {
     };
   });
   
-  store.setItems(items);
+  store.setItems({ items });
   updateToLatestCurrentId(headingElements, offsetTop, deps);
   render();
 
@@ -88,22 +88,28 @@ const startListening = (contentContainer, scrollContainer, offsetTop, deps) => {
 };
 
 export const handleBeforeMount = (deps) => {
-  const { attrs } = deps;
+  const { props } = deps;
+  let stopListening = () => {};
+
   requestAnimationFrame(() => {
-    const targetElement = document.getElementById(attrs['target-id']);
+    const targetElement = document.getElementById(props.targetId);
+    if (!targetElement) {
+      return;
+    }
     
     // Get scroll container - default to window for page scroll if not specified
     let scrollContainer = window;
-    if (attrs['scroll-container-id']) {
-      scrollContainer = document.getElementById(attrs['scroll-container-id']) || window;
+    if (props.scrollContainerId) {
+      scrollContainer = document.getElementById(props.scrollContainerId) || window;
     }
     
     // Get offset top - default to 100px if not specified
-    const offsetTop = parseInt(attrs['offset-top'] || '100', 10);
+    const offsetTop = parseInt(props.offsetTop || '100', 10);
     
-    const stopListening = startListening(targetElement, scrollContainer, offsetTop, deps);
-    return () => {
-      stopListening();
-    }
+    stopListening = startListening(targetElement, scrollContainer, offsetTop, deps);
   })
+
+  return () => {
+    stopListening();
+  };
 }

package/src/components/pageOutline/pageOutline.schema.yaml

@@ -0,0 +1,16 @@
+componentName: rtgl-page-outline
+propsSchema:
+  type: object
+  properties:
+    targetId:
+      type: string
+    scrollContainerId:
+      type: string
+    offsetTop:
+      type: string
+events:
+  onItemClick:
+    type: object
+methods:
+  type: object
+  properties: {}

package/src/components/pageOutline/pageOutline.store.js

@@ -69,17 +69,16 @@ export const selectCurrentId = ({ state }) => {
   return state.currentId;
 }
 
-export const setItems = (state, items) => {
-  state.items = items;
+export const setItems = ({ state }, payload = {}) => {
+  state.items = Array.isArray(payload.items) ? payload.items : [];
 }
 
-export const setCurrentId = (state, id) => {
-  state.currentId = id;
+export const setCurrentId = ({ state }, payload = {}) => {
+  state.currentId = payload.id;
 }
 
-export const setContentContainer = (state, container) => {
-  state.contentContainer = container;
+export const setContentContainer = ({ state }, payload = {}) => {
+  state.contentContainer = payload.container;
 }
 
 
-

package/src/components/pageOutline/pageOutline.view.yaml

@@ -1,36 +1,8 @@
-elementName: rtgl-page-outline
-
-viewDataSchema:
-  type: object
-  properties:
-    items:
-      type: array
-      items:
-        type: object
-        properties:
-          slug:
-            type: string
-          title:
-            type: string
-    selectedSlug:
-      type: string
-      nullable: true
-
-propsSchema:
-  type: object
-  properties: {}
-
 refs: {}
-
-events:
-  onItemClick:
-    type: object
-
 template:
   - rtgl-view h=f w=272 pr=md:
       - rtgl-view w=f mt=xl:
           - $for item, i in items:
               - rtgl-view d=h bwl=xs bc="${item.bc}" pv=sm av=c href=${item.href} pl=md:
-                  - rtgl-view w=${item.ml}:
+                  - rtgl-view w=${item.ml}: null
                   - rtgl-text s=sm c=${item.c} h-c=fg: ${item.title}
-

package/src/components/popoverInput/popoverInput.handlers.js

@@ -1,29 +1,29 @@
 export const handleBeforeMount = (deps) => {
-  const { store, attrs } = deps;
+  const { store, props } = deps;
 
-  if (attrs.value !== undefined) {
-    store.setValue(attrs.value || '');
+  if (props.value !== undefined) {
+    store.setValue({ value: props.value || '' });
   }
 }
 
 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 ?? '';
-    store.setValue(value);
+  if (oldProps?.value !== newProps?.value) {
+    const value = newProps?.value ?? '';
+    store.setValue({ value });
   }
 
   render();
 }
 
 export const handleTextClick = (deps, payload) => {
-  const { store, render, getRefIds, attrs } = deps;
+  const { store, render, refs, props } = deps;
   const event = payload._event;
 
   const value = store.selectValue();
-  store.setTempValue(value)
+  store.setTempValue({ value })
 
   store.openPopover({
     position: {
@@ -32,20 +32,20 @@ export const handleTextClick = (deps, payload) => {
     }
   });
 
-  const { input } = getRefIds();
-  input.elm.value = value;
+  const { input } = refs;
+  input.value = value;
   render();
 
-  if (attrs['auto-focus']) {
+  if (props.autoFocus) {
     setTimeout(() => {
-      input.elm.focus();
+      input.focus();
     }, 50)
   }
 }
 
 export const handlePopoverClose = (deps, payload) => {
   const { store, render } = deps;
-  store.closePopover();
+  store.closePopover({});
   render();
 }
 
@@ -54,50 +54,50 @@ export const handleInputChange = (deps, payload) => {
   const event = payload._event;
   const value = event.detail.value;
 
-  store.setTempValue(value);
+  store.setTempValue({ value });
 
-  dispatchEvent(new CustomEvent('temp-input-change', {
+  dispatchEvent(new CustomEvent('value-input', {
     detail: { value },
-    bubbles: true
+    bubbles: true,
   }));
 
   render();
 }
 
 export const handleSubmitClick = (deps) => {
-  const { store, render, dispatchEvent, getRefIds } = deps;
-  const { input } = getRefIds()
-  const value = input.elm.value;
+  const { store, render, dispatchEvent, refs } = deps;
+  const { input } = refs
+  const value = input.value;
 
-  store.setValue(value)
-  store.closePopover();
+  store.setValue({ value });
+  store.closePopover({});
 
-  dispatchEvent(new CustomEvent('input-change', {
+  dispatchEvent(new CustomEvent('value-change', {
     detail: { value },
-    bubbles: true
+    bubbles: true,
   }));
 
   render();
 }
 
 export const handleInputKeydown = (deps, payload) => {
-  const { store, render, dispatchEvent, getRefIds } = deps;
+  const { store, render, dispatchEvent, refs } = deps;
   const event = payload._event;
 
   if (event.key === 'Enter') {
-    const { input } = getRefIds()
-    const value = input.elm.value;
+    const { input } = refs
+    const value = input.value;
 
-    store.closePopover();
+    store.closePopover({});
     // Dispatch custom event
-    dispatchEvent(new CustomEvent('input-change', {
+    dispatchEvent(new CustomEvent('value-change', {
       detail: { value },
-      bubbles: true
+      bubbles: true,
     }));
 
     render();
   } else if (event.key === 'Escape') {
-    store.closePopover();
+    store.closePopover({});
     render();
   }
 }

package/src/components/popoverInput/popoverInput.schema.yaml

@@ -0,0 +1,18 @@
+componentName: rtgl-popover-input
+propsSchema:
+  type: object
+  properties:
+    value:
+      type: string
+    placeholder:
+      type: string
+    label:
+      type: string
+    autoFocus:
+      type: boolean
+events:
+  value-input: {}
+  value-change: {}
+methods:
+  type: object
+  properties: {}

package/src/components/popoverInput/popoverInput.store.js

@@ -8,7 +8,7 @@ export const createInitialState = () => Object.freeze({
   tempValue: '',
 });
 
-export const selectViewData = ({ attrs, state }) => {
+export const selectViewData = ({ props, state }) => {
   const value = state.value || '-';
 
   return {
@@ -16,29 +16,29 @@ export const selectViewData = ({ attrs, state }) => {
     position: state.position,
     value: value,
     tempValue: state.tempValue,
-    placeholder: attrs.placeholder ?? '',
-    label: attrs.label,
+    placeholder: props.placeholder ?? '',
+    label: props.label,
   };
 }
 
-export const setTempValue = (state, value) => {
-  state.tempValue = value;
+export const setTempValue = ({ state }, payload = {}) => {
+  state.tempValue = payload.value;
 }
 
-export const openPopover = (state, payload) => {
+export const openPopover = ({ state }, payload = {}) => {
   const { position } = payload;
   state.position = position;
   state.isOpen = true;
   state.hasUnsavedChanges = false;
 }
 
-export const closePopover = (state) => {
+export const closePopover = ({ state }) => {
   state.isOpen = false;
   state.tempValue = '';
 }
 
-export const setValue = (state, value) => {
-  state.value = value;
+export const setValue = ({ state }, payload = {}) => {
+  state.value = payload.value;
 }
 
 export const selectValue = ({ state }) => {

package/src/components/popoverInput/popoverInput.view.yaml

@@ -1,18 +1,5 @@
-elementName: rtgl-popover-input
-
-viewDataSchema:
-  type: object
-
-attrsSchema:
-  type: object
-  properties:
-    value:
-      type: string
-    placeholder:
-      type: string
-
 refs:
-  text-display:
+  textDisplay:
     eventListeners:
       click:
         handler: handleTextClick
@@ -22,7 +9,7 @@ refs:
         handler: handlePopoverClose
   input:
     eventListeners:
-      input-change:
+      value-input:
         handler: handleInputChange
       keydown:
         handler: handleInputKeydown
@@ -30,16 +17,12 @@ refs:
     eventListeners:
       click:
         handler: handleSubmitClick
-
-events:
-  input-change: {}
-
 template:
-  - rtgl-view#text-display w=f cur=p:
+  - rtgl-view#textDisplay w=f cur=pointer:
       - rtgl-text: ${value}
   - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y}:
-      - rtgl-view g=md w=240 slot=content bgc=background br=md:
+      - rtgl-view g=md w=240 slot=content bgc=bg br=md:
           - rtgl-text: ${label}
-          - rtgl-input#input w=f placeholder=${placeholder}:
+          - rtgl-input#input w=f placeholder=${placeholder}: null
           - rtgl-view w=f ah=e:
               - rtgl-button#submit: Submit

package/src/components/select/select.handlers.js

@@ -15,13 +15,13 @@ export const handleBeforeMount = (deps) => {
 }
 
 export const handleOnUpdate = (deps, payload) => {
-  const { oldAttrs, newAttrs, oldProps, newProps } = payload;
+  const { oldProps, newProps } = payload;
   const { store, render } = deps;
 
   // Check if key changed
-  if (oldAttrs?.key !== newAttrs?.key && newAttrs?.key) {
+  if (oldProps?.key !== newProps?.key && newProps?.key) {
     // Clear current state using store action
-    store.resetSelection();
+    store.resetSelection({});
 
     // Re-apply the prop value if available
     const selectedValue = newProps?.selectedValue;
@@ -43,11 +43,11 @@ export const handleOnUpdate = (deps, payload) => {
 }
 
 export const handleButtonClick = (deps, payload) => {
-  const { store, render, getRefIds, props } = deps;
+  const { store, render, refs, props } = deps;
   const event = payload._event;
   event.stopPropagation();
 
-  const button = getRefIds()['select-button'].elm;
+  const button = refs.selectButton;
 
   // Get first child's bounding rectangle (since button has display: contents)
   const firstChild = button.firstElementChild;
@@ -74,7 +74,7 @@ export const handleButtonClick = (deps, payload) => {
 
 export const handleClickOptionsPopoverOverlay = (deps) => {
   const { store, render } = deps;
-  store.closeOptionsPopover();
+  store.closeOptionsPopover({});
   render();
 }
 
@@ -82,7 +82,8 @@ export const handleOptionClick = (deps, payload) => {
   const { render, dispatchEvent, props, store } = deps;
   const event = payload._event;
   event.stopPropagation();
-  const id = event.currentTarget.id.replace('option-', '');
+  const id = event.currentTarget.id.slice('option'.length);
+  const index = Number(id);
 
   const option = props.options[id];
 
@@ -94,15 +95,13 @@ export const handleOptionClick = (deps, payload) => {
     props.onChange(option.value);
   }
 
-  // Dispatch custom event for backward compatibility
-  dispatchEvent(new CustomEvent('option-selected', {
-    detail: { value: option.value, label: option.label },
-    bubbles: true
-  }));
-
-  // Also dispatch select-change event to match form's event listener pattern
-  dispatchEvent(new CustomEvent('select-change', {
-    detail: { selectedValue: option.value },
+  dispatchEvent(new CustomEvent('value-change', {
+    detail: {
+      value: option.value,
+      label: option.label,
+      index,
+      item: option,
+    },
     bubbles: true
   }));
 
@@ -112,14 +111,14 @@ export const handleOptionClick = (deps, payload) => {
 export const handleOptionMouseEnter = (deps, payload) => {
   const { store, render } = deps;
   const event = payload._event;
-  const id = parseInt(event.currentTarget.id.replace('option-', ''));
-  store.setHoveredOption(id);
+  const id = parseInt(event.currentTarget.id.slice('option'.length), 10);
+  store.setHoveredOption({ optionId: id });
   render();
 }
 
 export const handleOptionMouseLeave = (deps, payload) => {
   const { store, render } = deps;
-  store.clearHoveredOption();
+  store.clearHoveredOption({});
   render();
 }
 
@@ -130,22 +129,20 @@ export const handleClearClick = (deps, payload) => {
   event.stopPropagation();
 
   // Clear the internal state
-  store.clearSelectedValue();
+  store.clearSelectedValue({});
 
   // Call onChange if provided
   if (props.onChange && typeof props.onChange === 'function') {
     props.onChange(undefined);
   }
 
-  // Dispatch custom event for backward compatibility
-  dispatchEvent(new CustomEvent('option-selected', {
-    detail: { value: undefined, label: undefined },
-    bubbles: true
-  }));
-
-  // Also dispatch select-change event to match form's event listener pattern
-  dispatchEvent(new CustomEvent('select-change', {
-    detail: { selectedValue: undefined },
+  dispatchEvent(new CustomEvent('value-change', {
+    detail: {
+      value: undefined,
+      label: undefined,
+      index: null,
+      item: undefined,
+    },
     bubbles: true
   }));
 
@@ -157,11 +154,10 @@ export const handleAddOptionClick = (deps, payload) => {
   const { _event: event } = payload;
   event.stopPropagation();
   // Close the popover
-  store.closeOptionsPopover();
+  store.closeOptionsPopover({});
 
-  // Dispatch custom event for add option (no detail)
-  dispatchEvent(new CustomEvent('add-option-selected', {
-    bubbles: true
+  dispatchEvent(new CustomEvent('add-option-click', {
+    bubbles: true,
   }));
 
   render();
@@ -169,12 +165,12 @@ export const handleAddOptionClick = (deps, payload) => {
 
 export const handleAddOptionMouseEnter = (deps, payload) => {
   const { store, render } = deps;
-  store.setHoveredAddOption(true);
+  store.setHoveredAddOption({ isHovered: true });
   render();
 }
 
 export const handleAddOptionMouseLeave = (deps, payload) => {
   const { store, render } = deps;
-  store.setHoveredAddOption(false);
+  store.setHoveredAddOption({ isHovered: false });
   render();
 }

package/src/components/select/select.schema.yaml

@@ -0,0 +1,36 @@
+componentName: rtgl-select
+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
+    noClear:
+      type: boolean
+    addOption:
+      type: object
+      properties:
+        label:
+          type: string
+    w:
+      type: string
+events:
+  value-change: {}
+  add-option-click: {}
+methods:
+  type: object
+  properties: {}