@rettangoli/ui 0.1.2-rc3 → 0.1.2-rc31

package/src/components/form/form.store.js

@@ -1,45 +1,199 @@
+import { parseAndRender } from "jempl";
+
+const encode = (input) => {
+  function escapeHtml(text) {
+    const map = {
+      '&': '&',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;'
+    };
+    return text.replace(/[&<>"']/g, char => map[char]);
+  }
+  if (input === undefined || input === null) {
+    return ""
+  }
+  return `"${escapeHtml(String(input))}"`;
+}
+
+function pick(obj, keys) {
+  return keys.reduce((acc, key) => {
+    if (key in obj) acc[key] = obj[key];
+    return acc;
+  }, {});
+}
+
 export const INITIAL_STATE = Object.freeze({
-  formValues: {}
+  formValues: {},
+  tooltipState: {
+    open: false,
+    x: 0,
+    y: 0,
+    content: ''
+  },
 });
 
-const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
+// Lodash-like utility functions for nested property access
+const get = (obj, path, defaultValue = undefined) => {
+  if (!path) {
+    return;
+  }
+  const keys = path.split(/[\[\].]/).filter((key) => key !== "");
+  let current = obj;
+
+  for (const key of keys) {
+    if (current === null || current === undefined || !(key in current)) {
+      return defaultValue;
+    }
+    current = current[key];
+  }
+  return current;
+};
+
+const set = (obj, path, value) => {
+  const keys = path.split(/[\[\].]/).filter((key) => key !== "");
+
+  // If path contains array notation, delete the original flat key
+  if (path.includes("[") && path in obj) {
+    delete obj[path];
+  }
+
+  let current = obj;
+
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    if (
+      !(key in current) ||
+      typeof current[key] !== "object" ||
+      current[key] === null
+    ) {
+      // Check if next key is a number to create array
+      const nextKey = keys[i + 1];
+      const isArrayIndex = /^\d+$/.test(nextKey);
+      current[key] = isArrayIndex ? [] : {};
+    }
+    current = current[key];
+  }
+
+  current[keys[keys.length - 1]] = value;
+  return obj;
+};
+
+const blacklistedAttrs = ["id", "class", "style", "slot"];
 
 const stringifyAttrs = (attrs) => {
-  return Object.entries(attrs).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
-}
+  return Object.entries(attrs)
+    .filter(([key]) => !blacklistedAttrs.includes(key))
+    .map(([key, value]) => `${key}=${value}`)
+    .join(" ");
+};
+
+export const selectForm = ({ state, props }) => {
+  const { form } = props;
+  const { context } = props;
+
+  if (context) {
+    return parseAndRender(form, context);
+  }
+
+  return form;
+};
+
 
 export const toViewData = ({ state, props, attrs }) => {
   const containerAttrString = stringifyAttrs(attrs);
+  const defaultValues = props.defaultValues || {};
+
+  const form = selectForm({ state, props });
+  const fields = structuredClone(form.fields || []);
+  fields.forEach((field) => {
+    // Use formValues from state if available, otherwise fall back to defaultValues from props
+    const defaultValue = get(state.formValues, field.name) ?? get(defaultValues, field.name)
+    if (["popover-input", "select", "read-only-text"].includes(field.inputType)) {
+      field.defaultValue = defaultValue
+    } else {
+      field.defaultValue = encode(defaultValue);
+    }
+
+    if (["inputText"].includes(field.inputType)) {
+      field.placeholder = encode(field.placeholder)
+    }
+
+    if (field.inputType === "image") {
+      const src = field.src;
+      // Only set imageSrc if src exists and is not empty
+      field.imageSrc = src && src.trim() ? src : null;
+      // Set placeholder text
+      field.placeholderText = field.placeholder || "No Image";
+    }
+    if (field.inputType === "waveform") {
+      const waveformData = field.waveformData;
+      // Only set waveformData if it exists
+      field.waveformData = waveformData || null;
+      // Set placeholder text
+      field.placeholderText = field.placeholder || "No Waveform";
+    }
+  });
+
   return {
+    key: attrs?.key,
     containerAttrString,
-    title: props.form?.title || '',
-    description: props?.form?.description || '',
-    fields: props?.form?.fields || [],
+    title: form?.title || "",
+    description: form?.description || "",
+    fields: fields,
     actions: props?.form?.actions || {
-      buttons: []
+      buttons: [],
     },
-    // TODO fix default values
     formValues: state.formValues,
+    tooltipState: state.tooltipState,
   };
-}
+};
 
 export const selectState = ({ state }) => {
   return state;
-}
+};
 
-export const selectFormValues = ({ state }) => {
-  return state.formValues;
-}
+export const selectFormValues = ({ state, props }) => {
+  const form = selectForm({ state, props });
 
-export const setState = (state) => {
-  // do doSomething
-}
+  return pick(
+    state.formValues,
+    form.fields.map((field) => field.name),
+  );
+};
+
+export const getFormFieldValue = ({ state }, name) => {
+  return get(state.formValues, name);
+};
 
-export const setDefaultValues = (state, defaultValues) => {
+export const setFormValues = (state, defaultValues) => {
   state.formValues = defaultValues || {};
-}
+};
 
-export const setFormFieldValue = (state, { fieldName, value }) => {
-  state.formValues[fieldName] = value;
-}
+export const setFormFieldValue = (state, { name, value, props }) => {
+  set(state.formValues, name, value);
+  // remove non visible values
+  const form = selectForm({ state, props });
+  const formValues = pick(
+    state.formValues,
+    form.fields.map((field) => field.name),
+  );
+  state.formValues = formValues;
+};
 
+export const showTooltip = (state, { x, y, content }) => {
+  state.tooltipState = {
+    open: true,
+    x: x,
+    y: y,
+    content: content
+  };
+};
+
+export const hideTooltip = (state) => {
+  state.tooltipState = {
+    ...state.tooltipState,
+    open: false
+  };
+};

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

@@ -8,6 +8,8 @@ propsSchema:
   properties:
     defaultValues:
       type: object
+    context:
+      type: object
     form:
       type: object
       properties:
@@ -21,7 +23,7 @@ propsSchema:
             anyOf:
               - type: object
                 properties:
-                  id:
+                  name:
                     type: string
                   label:
                     type: string
@@ -31,14 +33,19 @@ propsSchema:
                     const: inputText
                   placeholder:
                     type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
-                  - id
+                  - name
                   - label
                   - inputType
                 additionalProperties: false
               - type: object
                 properties:
-                  id:
+                  name:
                     type: string
                   label:
                     type: string
@@ -48,30 +55,39 @@ propsSchema:
                     const: select
                   placeholder:
                     type: string
+                  noClear:
+                    type: boolean
+                  addOption:
+                    type: object
+                    properties:
+                      label:
+                        type: string
                   options:
                     type: array
                     items:
                       type: object
                       properties:
-                        id:
-                          type: string
                         label:
                           type: string
                         value:
                           type: any
                       required:
-                        - id
                         - label
                         - value
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
-                  - id
+                  - name
                   - label
                   - inputType
                   - options
                 additionalProperties: false
               - type: object
                 properties:
-                  id:
+                  name:
                     type: string
                   label:
                     type: string
@@ -81,14 +97,19 @@ propsSchema:
                     const: colorPicker
                   value:
                     type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
-                  - id
+                  - name
                   - label
                   - inputType
                 additionalProperties: false
               - type: object
                 properties:
-                  id:
+                  name:
                     type: string
                   label:
                     type: string
@@ -104,8 +125,119 @@ propsSchema:
                     type: number
                   value:
                     type: number
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
                 required:
-                  - id
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: slider-input
+                  min:
+                    type: number
+                  max:
+                    type: number
+                  step:
+                    type: number
+                  value:
+                    type: number
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: image
+                  width:
+                    type: number
+                  height:
+                    type: number
+                  placeholder:
+                    type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: waveform
+                  width:
+                    type: number
+                  height:
+                    type: number
+                  placeholder:
+                    type: string
+                  defaultValue:
+                    type: object
+                  waveformData:
+                    type: object
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: popover-input
+                  placeholder:
+                    type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
                   - label
                   - inputType
                 additionalProperties: false
@@ -130,6 +262,12 @@ refs:
     eventListeners:
       click:
         handler: handleActionClick
+  tooltip-icon-*:
+    eventListeners:
+      mouseenter:
+        handler: handleTooltipMouseEnter
+      mouseleave:
+        handler: handleTooltipMouseLeave
   input-*:
     eventListeners:
       input-change:
@@ -138,6 +276,8 @@ refs:
     eventListeners:
       select-change:
         handler: handleSelectChange
+      add-option-selected:
+        handler: handleSelectAddOption
   colorpicker-*:
     eventListeners:
       colorpicker-change:
@@ -146,30 +286,74 @@ refs:
     eventListeners:
       slider-change:
         handler: handleSliderChange
+  slider-input-*:
+    eventListeners:
+      slider-input-value-change:
+        handler: handleSliderInputChange
+  image-*:
+    eventListeners:
+      click:
+        handler: handleImageClick
+      contextmenu:
+        handler: handleImageClick
+  waveform-*:
+    eventListeners:
+      click:
+        handler: handleWaveformClick
+      contextmenu:
+        handler: handleWaveformClick
+  popover-input-*:
+    eventListeners:
+      input-change:
+        handler: handlePopoverInputChange
 
 events:
   form-change: {}
+  extra-event: {}
+  action-click: {}
 
 template:
-  - rtgl-view w=f h=f p=md g=lg ${containerAttrString}:
-    - rtgl-view g=sm w=f:
-      - rtgl-text s=lg: ${title}
-      - rtgl-text c=mu-fg: ${description}
-    - rtgl-view g=lg w=f:
-      - $for field, i in fields:
-        - rtgl-view g=md w=f:
-            - rtgl-view g=sm:
-              - rtgl-text: ${field.label}
-              - rtgl-text s=sm c=mu-fg: ${field.description}
-            - $if field.inputType == "inputText":
-                - rtgl-input#input-${field.id} w=f placeholder=${field.placeholder}:
-            - $if field.inputType == "select":
-                - rtgl-select#select-${field.id} w=f .options=fields[${i}].options .placeholder=fields[${i}].placeholder .selectedValue=formValues[field.id]:
-            - $if field.inputType == "colorPicker":
-                - rtgl-color-picker#colorpicker-${field.id} value=${field.value}:
-            - $if field.inputType == "slider":
-                - rtgl-slider#slider-${field.id} min=${field.min} max=${field.max} step=${field.step} value=${field.value}: 
-    - rtgl-view g=sm w=f:
-      - $for button, i in actions.buttons:
-        - rtgl-view d=h ah=e g=sm w=f:
-          - rtgl-button#action-${button.id}: ${button.content}
+  - rtgl-view w=f p=md g=lg ${containerAttrString}:
+      - rtgl-view g=sm w=f:
+          - rtgl-text s=lg: ${title}
+          - rtgl-text c=mu-fg: ${description}
+      - rtgl-view g=lg w=f:
+          - $for field, i in fields:
+              - rtgl-view g=md w=f:
+                  - rtgl-view g=sm:
+                      - rtgl-view d=h g=md av=c:
+                          - rtgl-text: ${field.label}
+                          - $if field.tooltip:
+                              - rtgl-svg#tooltip-icon-${field.name} svg="info" wh=16 c=mu-fg cur=help ml=xs:
+                      - rtgl-text s=sm c=mu-fg: ${field.description}
+                  - $if field.inputType == "read-only-text":
+                      - rtgl-text s=sm: ${field.defaultValue}
+                  - $if field.inputType == "inputText":
+                      - rtgl-input#input-${field.name} key=${key} w=f placeholder=${field.placeholder} value=${field.defaultValue}:
+                  - $if field.inputType == "popover-input":
+                      - rtgl-popover-input#popover-input-${field.name} label="${field.label}" .defaultValue=fields[${i}].defaultValue:
+                  - $if field.inputType == "select":
+                      - rtgl-select#select-${field.name} key=${key} w=f .options=fields[${i}].options .placeholder=fields[${i}].placeholder .selectedValue=fields[${i}].defaultValue ?no-clear=fields[${i}].noClear .addOption=fields[${i}].addOption:
+                  - $if field.inputType == "colorPicker":
+                      - rtgl-color-picker#colorpicker-${field.name} key=${key} value=${field.defaultValue}:
+                  - $if field.inputType == "slider":
+                      - rtgl-slider#slider-${field.name} key=${key} w=f min=${field.min} max=${field.max} step=${field.step} value=${field.defaultValue}:
+                  - $if field.inputType == "slider-input":
+                      - rtgl-slider-input#slider-input-${field.name} key=${key} w=f min=${field.min} max=${field.max} step=${field.step} defaultValue=${field.defaultValue}:
+                  - $if field.inputType == "image" && field.imageSrc:
+                      - rtgl-image#image-${field.name} src=${field.imageSrc} w=${field.width} h=${field.height} cur=p:
+                  - $if field.inputType == "image" && !field.imageSrc:
+                      - rtgl-view#image-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md:
+                          - rtgl-text c=mu-fg ta=c: ${field.placeholderText}
+                  - $if field.inputType == "waveform" && field.waveformData:
+                      - rtgl-waveform#waveform-${field.name} .waveformData=fields[${i}].waveformData w=${field.width} h=${field.height} cur=p:
+                  - $if field.inputType == "waveform" && !field.waveformData:
+                      - rtgl-view#waveform-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md:
+                          - rtgl-text c=mu-fg ta=c: ${field.placeholder}
+                  - $if field.inputType == "slot":
+                      - 'slot#slot-${field.slotName} name=${field.slot} style="display: contents;"':
+      - rtgl-view g=sm w=f:
+          - rtgl-view d=h ah=e g=sm w=f:
+              - $for button, i in actions.buttons:
+                  - rtgl-button#action-${button.id}: ${button.content}
+      - rtgl-tooltip ?open=${tooltipState.open} x=${tooltipState.x} y=${tooltipState.y} placement="top" content="${tooltipState.content}":

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

@@ -3,9 +3,10 @@
 /**
  * 
  * @param {*} headingElements 
+ * @param {*} offsetTop 
  * @param {*} deps 
  */
-const updateToLatestCurrentId = (headingElements, deps) => {
+const updateToLatestCurrentId = (headingElements, offsetTop, deps) => {
   const { store, render } = deps;
 
   let currentHeadingId;
@@ -14,7 +15,9 @@ const updateToLatestCurrentId = (headingElements, deps) => {
   headingElements.forEach((heading) => {
     const rect = heading.getBoundingClientRect();
     
-    if (rect.top <= 20) {
+    // A heading is "current" if it's at or above the offset line
+    // We want the heading that's closest to the offset but still above it
+    if (rect.top <= offsetTop) {
       if (rect.top > closestTopPosition) {
         closestTopPosition = rect.top;
         currentHeadingId = heading.id;
@@ -22,46 +25,83 @@ const updateToLatestCurrentId = (headingElements, deps) => {
     }
   });
   
+  // If no heading is above the threshold, select the first visible heading below it
+  if (!currentHeadingId) {
+    let lowestTop = Infinity;
+    headingElements.forEach((heading) => {
+      const rect = heading.getBoundingClientRect();
+      if (rect.top > offsetTop && rect.top < lowestTop) {
+        lowestTop = rect.top;
+        currentHeadingId = heading.id;
+      }
+    });
+  }
+  
   if (currentHeadingId && currentHeadingId !== store.selectCurrentId()) {
     store.setCurrentId(currentHeadingId);
     render();
   }
 };
 
-const startListening = (contentContainer, deps) => {
+const startListening = (contentContainer, scrollContainer, offsetTop, deps) => {
   const { store, render } = deps;
   
   // Extract headings
-  const headings = contentContainer.querySelectorAll("rtgl-text[id]");
+  const headings = contentContainer.querySelectorAll("h1[id], h2[id], h3[id], h4[id], rtgl-text[id]");
   const headingElements = Array.from(headings);
   
-  const items = headingElements.map((heading) => ({
-    id: heading.id,
-    href: `#${heading.id}`,
-    title: heading.textContent
-  }));
+  const items = headingElements.map((heading) => {
+    let level = 1;
+    const tagName = heading.tagName.toLowerCase();
+    
+    if (tagName === 'h1') level = 1;
+    else if (tagName === 'h2') level = 2;
+    else if (tagName === 'h3') level = 3;
+    else if (tagName === 'h4') level = 4;
+    else if (tagName === 'rtgl-text') {
+      // For rtgl-text, check if it has a data-level attribute or default to 1
+      level = parseInt(heading.getAttribute('data-level') || '1', 10);
+    }
+    
+    return {
+      id: heading.id,
+      href: `#${heading.id}`,
+      title: heading.textContent,
+      level: level
+    };
+  });
   
   store.setItems(items);
-  updateToLatestCurrentId(headingElements, deps);
+  updateToLatestCurrentId(headingElements, offsetTop, deps);
   render();
 
-  const boundCheckCurrentHeading = updateToLatestCurrentId.bind(this, headingElements, deps);
+  const boundCheckCurrentHeading = updateToLatestCurrentId.bind(this, headingElements, offsetTop, deps);
   
-  // Add scroll listener to the content container
-  contentContainer.addEventListener("scroll", boundCheckCurrentHeading, {
+  // Add scroll listener to the scroll container
+  scrollContainer.addEventListener("scroll", boundCheckCurrentHeading, {
     passive: true,
   });
 
   return () => {
-    contentContainer.removeEventListener("scroll", boundCheckCurrentHeading);
+    scrollContainer.removeEventListener("scroll", boundCheckCurrentHeading);
   }
 };
 
-export const handleOnMount = (deps) => {
+export const handleBeforeMount = (deps) => {
   const { attrs } = deps;
   requestAnimationFrame(() => {
-    const targetElement = document.getElementById(attrs['target-id'])
-    const stopListening = startListening(targetElement, deps)
+    const targetElement = document.getElementById(attrs['target-id']);
+    
+    // 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;
+    }
+    
+    // Get offset top - default to 100px if not specified
+    const offsetTop = parseInt(attrs['offset-top'] || '100', 10);
+    
+    const stopListening = startListening(targetElement, scrollContainer, offsetTop, deps);
     return () => {
       stopListening();
     }