@rettangoli/ui 0.1.2-rc3 → 0.1.2-rc30

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

@@ -57,7 +57,7 @@ const startListening = (contentContainer, deps) => {
   }
 };
 
-export const handleOnMount = (deps) => {
+export const handleBeforeMount = (deps) => {
   const { attrs } = deps;
   requestAnimationFrame(() => {
     const targetElement = document.getElementById(attrs['target-id'])

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

@@ -0,0 +1,99 @@
+export const handleBeforeMount = (deps) => {
+  const { store, props } = deps;
+
+  if (props.value !== undefined || props.defaultValue !== undefined) {
+    store.setValue(props.value || props.defaultValue || '');
+  }
+}
+
+export const handleOnUpdate = (changes, deps) => {
+  const { oldProps, newProps} = changes
+  const { store, props, render } = deps;
+
+  if (oldProps.defaultValue !== newProps.defaultValue) {
+    store.setValue(props.defaultValue || '');
+  }
+
+  render();
+}
+
+export const handleTextClick = (e, deps) => {
+  const { store, render, getRefIds, attrs } = deps;
+
+  const value = store.selectValue();
+  store.setTempValue(value)
+
+  store.openPopover({
+    position: {
+      x: e.currentTarget.getBoundingClientRect().left,
+      y: e.currentTarget.getBoundingClientRect().bottom,
+    }
+  });
+
+  const { input } = getRefIds();
+  input.elm.value = value;
+  render();
+
+  if (attrs['auto-focus']) {
+    setTimeout(() => {
+      input.elm.focus();
+    }, 50)
+  }
+}
+
+export const handlePopoverClose = (e, deps) => {
+  const { store, render } = deps;
+  store.closePopover();
+  render();
+}
+
+export const handleInputChange = (e, deps) => {
+  const { store, render, dispatchEvent } = deps;
+  const value = e.detail.value;
+
+  store.setTempValue(value);
+
+  dispatchEvent(new CustomEvent('temp-input-change', {
+    detail: { value },
+    bubbles: true
+  }));
+
+  render();
+}
+
+export const handleSubmitClick = (e, deps) => {
+  const { store, render, dispatchEvent, getRefIds } = deps;
+  const { input } = getRefIds()
+  const value = input.elm.value;
+
+  store.setValue(value)
+  store.closePopover();
+
+  dispatchEvent(new CustomEvent('input-change', {
+    detail: { value },
+    bubbles: true
+  }));
+
+  render();
+}
+
+export const handleInputKeydown = (e, deps) => {
+  const { store, render, dispatchEvent, getRefIds } = deps;
+
+  if (e.key === 'Enter') {
+    const { input } = getRefIds()
+    const value = input.elm.value;
+
+    store.closePopover();
+    // Dispatch custom event
+    dispatchEvent(new CustomEvent('input-change', {
+      detail: { value },
+      bubbles: true
+    }));
+
+    render();
+  } else if (e.key === 'Escape') {
+    store.closePopover();
+    render();
+  }
+}