@rettangoli/ui 0.1.31 → 1.0.0-rc1

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

@@ -1,331 +1,40 @@
-elementName: rtgl-form
-
-viewDataSchema:
-  type: object
-
-propsSchema:
-  type: object
-  properties:
-    defaultValues:
-      type: object
-    context:
-      type: object
-    form:
-      type: object
-      properties:
-        title:
-          type: string
-        description:
-          type: string
-        fields:
-          type: array
-          items:
-            anyOf:
-              - type: object
-                properties:
-                  name:
-                    type: string
-                  label:
-                    type: string
-                  description:
-                    type: string
-                  inputType:
-                    const: inputText
-                  placeholder:
-                    type: string
-                  testId:
-                    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: select
-                  placeholder:
-                    type: string
-                  noClear:
-                    type: boolean
-                  addOption:
-                    type: object
-                    properties:
-                      label:
-                        type: string
-                  options:
-                    type: array
-                    items:
-                      type: object
-                      properties:
-                        label:
-                          type: string
-                        value:
-                          type: any
-                      required:
-                        - label
-                        - value
-                  testId:
-                    type: string
-                  tooltip:
-                    type: object
-                    properties:
-                      content:
-                        type: string
-                required:
-                  - name
-                  - label
-                  - inputType
-                  - options
-                additionalProperties: false
-              - type: object
-                properties:
-                  name:
-                    type: string
-                  label:
-                    type: string
-                  description:
-                    type: string
-                  inputType:
-                    const: colorPicker
-                  value:
-                    type: string
-                  testId:
-                    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: slider
-                  min:
-                    type: number
-                  max:
-                    type: number
-                  step:
-                    type: number
-                  value:
-                    type: number
-                  testId:
-                    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: slider-input
-                  min:
-                    type: number
-                  max:
-                    type: number
-                  step:
-                    type: number
-                  value:
-                    type: number
-                  testId:
-                    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: image
-                  width:
-                    type: number
-                  height:
-                    type: number
-                  placeholder:
-                    type: string
-                  testId:
-                    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
-                  testId:
-                    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: popover-input
-                  placeholder:
-                    type: string
-                  testId:
-                    type: string
-                  tooltip:
-                    type: object
-                    properties:
-                      content:
-                        type: string
-                required:
-                  - name
-                  - label
-                  - inputType
-                additionalProperties: false
-        actions:
-          type: object
-          properties:
-            buttons:
-              type: array
-              items:
-                type: object
-                properties:
-                  id:
-                    type: string
-                  content:
-                    type: string
-                  testId:
-                    type: string
-                required:
-                  - id
-                  - content
-
 refs:
-  form-container:
+  formContainer:
     eventListeners:
       keydown:
         handler: handleKeyDown
-  action-*:
+  action*:
     eventListeners:
       click:
         handler: handleActionClick
-  tooltip-icon-*:
+  tooltipIcon*:
     eventListeners:
       mouseenter:
         handler: handleTooltipMouseEnter
       mouseleave:
         handler: handleTooltipMouseLeave
-  field-*:
+  field*:
     eventListeners:
-      input-change:
+      value-input:
         handler: handleInputChange
-      textarea-change:
+      value-change:
         handler: handleInputChange
-      select-change:
-        handler: handleSelectChange
-      add-option-selected:
+      add-option-click:
         handler: handleSelectAddOption
-      colorpicker-change:
-        handler: handleColorPickerChange
-      slider-change:
-        handler: handleSliderChange
-      slider-input-value-change:
-        handler: handleSliderInputChange
-  image-*:
+  image*:
     eventListeners:
       click:
         handler: handleImageClick
       contextmenu:
         handler: handleImageClick
-  waveform-*:
+  waveform*:
     eventListeners:
       click:
         handler: handleWaveformClick
       contextmenu:
         handler: handleWaveformClick
-
-events:
-  form-change: {}
-  extra-event: {}
-  action-click: {}
-
 template:
-  - rtgl-view#form-container w=f p=md g=lg ${containerAttrString}:
+  - rtgl-view#formContainer w=f p=md g=lg ${containerAttrString}:
       - rtgl-view g=sm w=f:
           - $if title:
               - rtgl-text s=lg: ${title}
@@ -340,41 +49,41 @@ template:
                               - $if field.label:
                                   - rtgl-text: ${field.label}
                               - $if field.label && field.tooltip:
-                                  - rtgl-svg#tooltip-icon-${field.name} svg="info" wh=16 c=mu-fg cur=help ml=xs:
+                                  - rtgl-svg#tooltipIcon${i} data-field-name=${field.name} svg="info" wh=16 c=mu-fg cur=help ml=xs: null
                           - $if field.description:
                               - 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" || field.inputType == 'input-text':
-                      - rtgl-input#field-${field.name} w=f min=${field.min} max=${field.max} step=${field.step} data-testid=${field.testId}:
+                  - $if field.inputType == "input-text":
+                      - rtgl-input#field${i} data-field-name=${field.name} w=f min=${field.min} max=${field.max} step=${field.step} data-testid=${field.testId}: null
                   - $if field.inputType == "input-number":
-                      - rtgl-input-number#field-${field.name} w=f data-testid=${field.testId}:
+                      - rtgl-input-number#field${i} data-field-name=${field.name} w=f data-testid=${field.testId}: null
                   - $if field.inputType == "input-textarea":
-                      - rtgl-textarea#field-${field.name} w=f rows=${field.rows} w=f data-testid=${field.testId}:
+                      - rtgl-textarea#field${i} data-field-name=${field.name} w=f rows=${field.rows} data-testid=${field.testId}: null
                   - $if field.inputType == "popover-input":
-                      - rtgl-popover-input#field-${field.name} label="${field.label}" data-testid=${field.testId}:
+                      - rtgl-popover-input#field${i} data-field-name=${field.name} label="${field.label}" data-testid=${field.testId}: null
                   - $if field.inputType == "select":
-                      - rtgl-select#field-${field.name} key=${key} w=f .options=fields[${i}].options ?no-clear=fields[${i}].noClear .addOption=fields[${i}].addOption .selectedValue=#{field.selectedValue} .placeholder=#{field.placeholder} data-testid=${field.testId}:
-                  - $if field.inputType == "colorPicker":
-                      - rtgl-color-picker#field-${field.name} key=${key} data-testid=${field.testId}:
+                      - rtgl-select#field${i} data-field-name=${field.name} key=${key} w=f :options=fields[${i}].options ?no-clear=fields[${i}].noClear :addOption=fields[${i}].addOption :selectedValue=#{field.selectedValue} :placeholder=#{field.placeholder} data-testid=${field.testId}: null
+                  - $if field.inputType == "color-picker":
+                      - rtgl-color-picker#field${i} data-field-name=${field.name} key=${key} data-testid=${field.testId}: null
                   - $if field.inputType == "slider":
-                      - rtgl-slider#field-${field.name} key=${key} w=f min=${field.min} max=${field.max} step=${field.step} data-testid=${field.testId}:
+                      - rtgl-slider#field${i} data-field-name=${field.name} key=${key} w=f min=${field.min} max=${field.max} step=${field.step} data-testid=${field.testId}: null
                   - $if field.inputType == "slider-input":
-                      - rtgl-slider-input#field-${field.name} w=f min=${field.min} max=${field.max} step=${field.step} data-testid=${field.testId}:
+                      - rtgl-slider-input#field${i} data-field-name=${field.name} w=f min=${field.min} max=${field.max} step=${field.step} data-testid=${field.testId}: null
                   - $if field.inputType == "image" && field.imageSrc:
-                      - rtgl-image#image-${field.name} src=${field.imageSrc} w=${field.width} h=${field.height} cur=p data-testid=${field.testId}:
+                      - rtgl-image#image${i} data-field-name=${field.name} src=${field.imageSrc} w=${field.width} h=${field.height} cur=pointer data-testid=${field.testId}: null
                   - $if field.inputType == "image" && !field.imageSrc:
-                      - rtgl-view#field-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md data-testid=${field.testId}:
+                      - rtgl-view#image${i} data-field-name=${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=pointer p=md data-testid=${field.testId}:
                           - rtgl-text c=mu-fg ta=c: ${field.placeholderText}
                   - $if field.inputType == "waveform" && field.waveformData:
-                      - rtgl-waveform#field-${field.name} .waveformData=fields[${i}].waveformData w=${field.width} h=${field.height} cur=p data-testid=${field.testId}:
+                      - rtgl-waveform#waveform${i} data-field-name=${field.name} :waveformData=fields[${i}].waveformData w=${field.width} h=${field.height} cur=pointer data-testid=${field.testId}: null
                   - $if field.inputType == "waveform" && !field.waveformData:
-                      - rtgl-view#field-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md data-testid=${field.testId}:
+                      - rtgl-view#waveform${i} data-field-name=${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=pointer p=md data-testid=${field.testId}:
                           - rtgl-text c=mu-fg ta=c: ${field.placeholder}
                   - $if field.inputType == "slot":
-                      - 'slot#field-${field.slotName} name=${field.slot} style="display: contents;"':
+                      - 'slot#fieldSlot${i} data-field-name=${field.name} name=${field.slot} style="display: contents;"': null
       - 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} data-testid=${button.testId}: ${button.content}
-      - rtgl-tooltip ?open=${tooltipState.open} x=${tooltipState.x} y=${tooltipState.y} placement="top" content="${tooltipState.content}":
+                  - rtgl-button#action${i} data-action-id=${button.id} data-testid=${button.testId}: ${button.content}
+      - rtgl-tooltip ?open=${tooltipState.open} x=${tooltipState.x} y=${tooltipState.y} place="t" content="${tooltipState.content}": null

package/src/components/globalUi/globalUi.handlers.js

@@ -102,7 +102,7 @@ export const showConfirm = async (deps, payload) => {
  * @param {Array<Object>} payload.items - Array of dropdown menu items (required)
  * @param {number} payload.x - X coordinate position (required)
  * @param {number} payload.y - Y coordinate position (required)
- * @param {string} [payload.placement] - Dropdown menu placement (default: "bottom-start")
+ * @param {string} [payload.place] - Dropdown menu place token (default: "bs")
  * @returns {Promise<Object|null>} Promise that resolves with clicked item info or null if closed without selection
  * @returns {Object} [result.index] - Index of the clicked item
  * @returns {Object} [result.item] - The clicked item object
@@ -148,4 +148,4 @@ export const closeAll = (deps) => {
     store.closeAll();
     render();
   }
-};
+};

package/src/components/globalUi/globalUi.schema.yaml

@@ -0,0 +1,8 @@
+componentName: rtgl-global-ui
+propsSchema:
+  type: object
+  properties: {}
+events: []
+methods:
+  type: object
+  properties: {}

package/src/components/globalUi/globalUi.store.js

@@ -13,11 +13,11 @@ export const createInitialState = () => Object.freeze({
     items: [],
     x: 0,
     y: 0,
-    placement: "bottom-start",
+    place: "bs",
   },
 });
 
-export const setAlertConfig = (state, options) => {
+export const setAlertConfig = ({ state }, options = {}) => {
   if (!options.message) {
     throw new Error("message is required for showAlert");
   }
@@ -34,7 +34,7 @@ export const setAlertConfig = (state, options) => {
   state.isOpen = true;
 };
 
-export const setConfirmConfig = (state, options) => {
+export const setConfirmConfig = ({ state }, options = {}) => {
   if (!options.message) {
     throw new Error("message is required for showConfirm");
   }
@@ -51,7 +51,7 @@ export const setConfirmConfig = (state, options) => {
   state.isOpen = true;
 };
 
-export const setDropdownConfig = (state, options) => {
+export const setDropdownConfig = ({ state }, options = {}) => {
   if (!options.items || !Array.isArray(options.items)) {
     throw new Error("items array is required for showDropdown");
   }
@@ -60,13 +60,13 @@ export const setDropdownConfig = (state, options) => {
     items: options.items,
     x: options.x || 0,
     y: options.y || 0,
-    placement: options.placement || "bottom-start",
+    place: options.place || "bs",
   };
   state.uiType = "dropdown";
   state.isOpen = true;
 };
 
-export const closeAll = (state) => {
+export const closeAll = ({ state }) => {
   state.isOpen = false;
   state.uiType = "dialog"; // Reset to default type
 };
@@ -85,9 +85,9 @@ export const selectViewData = ({ state }) => {
       items: state.dropdownConfig?.items || [],
       x: state.dropdownConfig?.x || 0,
       y: state.dropdownConfig?.y || 0,
-      placement: state.dropdownConfig?.placement || 'bottom-start',
+      place: state.dropdownConfig?.place || 'bs',
     },
     isDialogOpen: state.isOpen && state.uiType === 'dialog',
     isDropdownOpen: state.isOpen && state.uiType === 'dropdown',
   };
-};
+};

package/src/components/globalUi/globalUi.view.yaml

@@ -1,70 +1,33 @@
-elementName: rtgl-global-ui
-
-viewDataSchema:
-  type: object
-  properties:
-    isOpen:
-      type: boolean
-    uiType:
-      type: string
-    config:
-      type: object
-      properties:
-        status:
-          type: string
-        title:
-          type: string
-        message:
-          type: string
-        confirmText:
-          type: string
-        cancelText:
-          type: string
-        mode:
-          type: string
-    dropdownConfig:
-      type: object
-      properties:
-        items:
-          type: array
-        x:
-          type: number
-        y:
-          type: number
-        placement:
-          type: string
-
 refs:
   dialog:
     eventListeners:
       close:
         handler: handleDialogClose
-  confirm-button:
+  confirmButton:
     eventListeners:
       click:
         handler: handleConfirm
-  cancel-button:
+  cancelButton:
     eventListeners:
       click:
         handler: handleCancel
-  dropdown-menu:
+  dropdownMenu:
     eventListeners:
       close:
         handler: handleDropdownClose
-      click-item:
+      item-click:
         handler: handleDropdownItemClick
-
 template:
   - rtgl-dialog#dialog ?open=${isDialogOpen} s=sm:
       - rtgl-view slot=content g=lg p=lg:
           - rtgl-view d=h g=md:
               - rtgl-view d=h ah=c av=c g=md:
-              - rtgl-view g=md:
+                  - rtgl-view g=md: null
                   - rtgl-view h=24 av=c:
-                      - rtgl-text fw=600: ${config.title}
+                      - rtgl-text s=lg: ${config.title}
                   - rtgl-text: ${config.message}
           - rtgl-view d=h g=md mt=lg w=f ah=e:
               - $if config.mode == 'confirm':
-                  - rtgl-button#cancel-button v=se: ${config.cancelText}
-              - rtgl-button#confirm-button v=pr: ${config.confirmText}
-  - rtgl-dropdown-menu#dropdown-menu ?open=${isDropdownOpen} x=${dropdownConfig.x} y=${dropdownConfig.y} placement=${dropdownConfig.placement} .items=dropdownConfig.items key=dropdown-${isDropdownOpen}:
+                  - rtgl-button#cancelButton v=se: ${config.cancelText}
+              - rtgl-button#confirmButton v=pr: ${config.confirmText}
+  - rtgl-dropdown-menu#dropdownMenu ?open=${isDropdownOpen} x=${dropdownConfig.x} y=${dropdownConfig.y} place=${dropdownConfig.place} :items=dropdownConfig.items key=dropdown-${isDropdownOpen}: null

package/src/components/navbar/navbar.handlers.js

@@ -3,7 +3,7 @@ export const handleClickStart = (deps, payload) => {
   const { dispatchEvent, store } = deps;
   const event = payload._event;
   console.log('handle click start', store.selectPath());
-  dispatchEvent(new CustomEvent('clickStart', {
+  dispatchEvent(new CustomEvent('start-click', {
     detail: {
       path: store.selectPath(),
     }

package/src/components/navbar/navbar.schema.yaml

@@ -0,0 +1,25 @@
+componentName: rtgl-navbar
+propsSchema:
+  type: object
+  properties:
+    start:
+      type: object
+      properties:
+        label:
+          type: string
+        href:
+          type: string
+        image:
+          type: object
+          properties:
+            src:
+              type: string
+events:
+  start-click:
+    type: object
+    properties:
+      path:
+        type: string
+methods:
+  type: object
+  properties: {}

package/src/components/navbar/navbar.store.js

@@ -1,20 +1,36 @@
 export const createInitialState = () => Object.freeze({});
 
-const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
+const blacklistedAttrs = ['id', 'class', 'style', 'slot', 'start'];
 
-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(' ');
 }
 
-export const selectViewData = ({ state, props, attrs }) => {
-  console.log('attrs', {
-    attrs,
-    entries: Object.entries(attrs)
-  })
+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;
+    }
+  }
+};
 
-  const attrsStart = attrs.start ? JSON.parse(decodeURIComponent(attrs.start)) : props.start;
+export const selectViewData = ({ props }) => {
+  const attrsStart = parseMaybeEncodedJson(props.start) || props.start;
 
-  const containerAttrString = stringifyAttrs(attrs);
+  const containerAttrString = stringifyAttrs(props);
   const start = attrsStart || {
     label: '',
     // href: undefined,
@@ -35,12 +51,10 @@ export const selectViewData = ({ state, props, attrs }) => {
 }
 
 export const selectPath = ({ props }) => {
-  return props.start.path;
+  return props.start?.path;
 }
 
-export const setState = (state) => {
+export const setState = ({ state }) => {
   // do doSomething
 }
 
-
-