@rettangoli/ui 0.1.2-rc2 → 0.1.2-rc20

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
@@ -32,13 +34,13 @@ propsSchema:
                   placeholder:
                     type: string
                 required:
-                  - id
+                  - name
                   - label
                   - inputType
                 additionalProperties: false
               - type: object
                 properties:
-                  id:
+                  name:
                     type: string
                   label:
                     type: string
@@ -64,14 +66,14 @@ propsSchema:
                         - label
                         - value
                 required:
-                  - id
+                  - name
                   - label
                   - inputType
                   - options
                 additionalProperties: false
               - type: object
                 properties:
-                  id:
+                  name:
                     type: string
                   label:
                     type: string
@@ -82,13 +84,13 @@ propsSchema:
                   value:
                     type: string
                 required:
-                  - id
+                  - name
                   - label
                   - inputType
                 additionalProperties: false
               - type: object
                 properties:
-                  id:
+                  name:
                     type: string
                   label:
                     type: string
@@ -105,7 +107,76 @@ propsSchema:
                   value:
                     type: number
                 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
+                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
+                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
+                required:
+                  - name
                   - label
                   - inputType
                 additionalProperties: false
@@ -146,30 +217,67 @@ 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: {}
 
 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 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 == "read-only-text":
+                      - rtgl-text s=sm: ${field.defaultValue}
+                  - $if field.inputType == "inputText":
+                      - rtgl-input#input-${field.name} 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} w=f .options=fields[${i}].options .placeholder=fields[${i}].placeholder .selectedValue=fields[${i}].defaultValue:
+                  - $if field.inputType == "colorPicker":
+                      - rtgl-color-picker#colorpicker-${field.name} value=${field.defaultValue}:
+                  - $if field.inputType == "slider":
+                      - rtgl-slider#slider-${field.name} 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} 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}
+      - 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}

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();
+  }
+}

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

@@ -0,0 +1,48 @@
+export const INITIAL_STATE = Object.freeze({
+  isOpen: false,
+  position: {
+    x: 0,
+    y: 0,
+  },
+  value: '',
+  tempValue: '',
+});
+
+export const toViewData = ({ attrs, state, props }) => {
+  // Use state's current value if it has been modified, otherwise use props
+  const value = state.value || '-';
+
+  return {
+    isOpen: state.isOpen,
+    position: state.position,
+    value: value ?? '-',
+    tempValue: state.tempValue,
+    placeholder: props.placeholder ?? '',
+    label: attrs.label,
+  };
+}
+
+export const setTempValue = (state, value) => {
+  state.tempValue = value;
+}
+
+export const openPopover = (state, payload) => {
+  const { position } = payload;
+  state.position = position;
+  state.isOpen = true;
+  // Reset the current value to match the display value when opening
+  state.hasUnsavedChanges = false;
+}
+
+export const closePopover = (state) => {
+  state.isOpen = false;
+  state.tempValue = '';
+}
+
+export const setValue = (state, value) => {
+  state.value = value;
+}
+
+export const selectValue = ({ state }) => {
+  return state.value;
+}

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

@@ -0,0 +1,55 @@
+elementName: rtgl-popover-input
+
+viewDataSchema:
+  type: object
+
+attrsSchema:
+  type: object
+  properties:
+    auto-focus:
+      type: boolean
+
+propsSchema:
+  type: object
+  properties:
+    value:
+      type: string
+    defaultValue:
+      type: string
+    placeholder:
+      type: string
+    onChange:
+      type: function
+
+refs:
+  text-display:
+    eventListeners:
+      click:
+        handler: handleTextClick
+  popover:
+    eventListeners:
+      close:
+        handler: handlePopoverClose
+  input:
+    eventListeners:
+      input-change:
+        handler: handleInputChange
+      keydown:
+        handler: handleInputKeydown
+  submit:
+    eventListeners:
+      click:
+        handler: handleSubmitClick
+
+events:
+  input-change: {}
+
+template:
+  - rtgl-view#text-display w=f cur=p:
+    - 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-text: ${label}
+      - rtgl-input#input w=f placeholder=${placeholder}:
+      - rtgl-view w=f ah=e:
+        - rtgl-button#submit: Submit

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

@@ -1,14 +1,11 @@
 
-export const handleOnMount = (deps) => {
+export const handleBeforeMount = (deps) => {
   const { store, props, render } = deps;
   
   if (props.selectedValue !== null && props.selectedValue !== undefined && props.options) {
     const selectedOption = props.options.find(opt => opt.value === props.selectedValue);
     if (selectedOption) {
-      store.update((state) => {
-        state.selectedValue = selectedOption.value;
-        state.selectedLabel = selectedOption.label;
-      });
+      store.updateSelectOption(selectedOption);
       render();
     }
   }

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

@@ -31,7 +31,7 @@ refs:
         handler: handleButtonClick
   popover:
     eventListeners:
-      click-overlay:
+      close:
         handler: handleClickOptionsPopoverOverlay
   option-*:
     eventListeners:
@@ -43,8 +43,8 @@ events: {}
 template:
   - rtgl-button#select-button v=ol:
     - ${selectedLabel}
-  - rtgl-popover#popover .isOpen=isOpen .position=position:
-    - rtgl-view wh=300 g=xs slot=content bgc=background br=md:
+  - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y}:
+    - rtgl-view wh=300 g=xs slot=content bgc=background br=md sv=true:
       - $for option, i in options:
         - rtgl-view#option-${i} w=f h-bgc=ac ph=lg pv=md cur=p br=md bgc=${option.bgc}:
           - rtgl-text: ${option.label}

package/src/components/sidebar/sidebar.view.yaml

@@ -174,7 +174,7 @@ template:
               $else:
                 - rtgl-view mt=md h=1 bgc=mu-bg:
           $else:
-            - rtgl-view#item-${item.id} ${item.hrefAttr} h=${itemHeight} av=c ${itemAlignAttr} ph=${itemPadding} w=${itemWidth} h-bgc=${item.itemHoverBgc} br=lg bgc=${item.itemBgc} cur=p title="${item.title}":
+            - rtgl-view#item-${item.id} ${item.hrefAttr} h=${itemHeight} av=c ${itemAlignAttr} ph=${itemPadding} w=${itemWidth} h-bgc=${item.itemHoverBgc} br=lg bgc=${item.itemBgc} cur=p:
               - $if item.icon:
                   - $if showLabels:
                       - rtgl-view d=h ah=${itemContentAlign} g=sm:

package/src/components/sliderInput/sliderInput.handlers.js

@@ -0,0 +1,24 @@
+export const handleBeforeMount = (deps) => {
+  const { store, attrs } = deps;
+  store.setValue(attrs.defaultValue || 0);
+} 
+
+export const handleValueChange = (e, deps) => {
+  const { store, render, dispatchEvent } = deps;
+  const newValue = Number(e.detail.value);
+
+  store.setValue(newValue);
+  
+  // Re-render to sync slider and input
+  render();
+  
+  // Dispatch event for external listeners
+  dispatchEvent(
+    new CustomEvent("slider-input-value-change", {
+      detail: {
+        value: newValue,
+      },
+      bubbles: true,
+    }),
+  );
+};

package/src/components/sliderInput/sliderInput.store.js

@@ -0,0 +1,17 @@
+export const INITIAL_STATE = Object.freeze({
+  value: 0
+});
+
+export const toViewData = ({ state, attrs }) => {
+  return {
+    value: state.value,
+    w: attrs.w || '',
+    min: attrs.min || 0,
+    max: attrs.max || 100,
+    step: attrs.step || 1
+  };
+}
+
+export const setValue = (state, newValue) => {
+  state.value = newValue;
+}

package/src/components/sliderInput/sliderInput.view.yaml

@@ -0,0 +1,42 @@
+elementName: rtgl-slider-input
+
+viewDataSchema:
+  type: object
+
+attrsSchema:
+  type: object
+  properties:
+    defaultValue:
+      type: string
+      default: '0'
+    w:
+      type: string
+      default: ''
+    min:
+      type: string
+      default: '0'
+    max:
+      type: string
+      default: '100'
+    step:
+      type: string
+      default: '1'
+
+refs:
+  input:
+    eventListeners:
+      input-change:
+        handler: handleValueChange
+  slider:
+    eventListeners:
+      slider-change:
+        handler: handleValueChange
+
+events:
+  form-change: {}
+
+template:
+  - rtgl-view d=h av=c g=md w=${w}:
+    - rtgl-slider#slider w=f type=range min=${min} max=${max} step=${step} value=${value}:
+    - rtgl-view w=84:
+      - rtgl-input#input w=f type=number min=${min} max=${max} step=${step} value=${value}:

package/src/components/table/table.handlers.js

@@ -1,4 +1,4 @@
-export const handleOnMount = (deps) => {
+export const handleBeforeMount = (deps) => {
   // No special initialization needed for basic table
 };
 

package/src/components/tabs/tabs.handlers.js

@@ -0,0 +1,10 @@
+export const handleClickItem = (e, deps) => {
+  const { dispatchEvent } = deps;
+  const id = e.currentTarget.dataset.id;
+  
+  dispatchEvent(new CustomEvent('item-click', {
+    detail: {
+      id
+    }
+  }));
+}

package/src/components/tabs/tabs.store.js

@@ -0,0 +1,29 @@
+export const INITIAL_STATE = Object.freeze({});
+
+const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
+
+const stringifyAttrs = (attrs) => {
+  return Object.entries(attrs).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
+}
+
+export const toViewData = ({ state, props, attrs }) => {
+  const containerAttrString = stringifyAttrs(attrs);
+
+  const items = props.items || [];
+  const selectedTab = attrs['selected-tab'];
+
+  // Mark selected tab with styling
+  const itemsWithSelection = items.map(item => ({
+    ...item,
+    isSelected: item.id === selectedTab,
+    bgColor: item.id === selectedTab ? 'ac' : '',
+    borderColor: item.id === selectedTab ? '' : 'tr',
+    textColor: item.id === selectedTab ? '' : 'mu-fg'
+  }));
+
+  return {
+    containerAttrString,
+    items: itemsWithSelection,
+    selectedTab
+  };
+}

package/src/components/tabs/tabs.view.yaml

@@ -0,0 +1,64 @@
+elementName: rtgl-tabs
+
+viewDataSchema:
+  type: object
+  properties:
+    containerAttrString:
+      type: string
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          id:
+            type: string
+          isSelected:
+            type: boolean
+          bgColor:
+            type: string
+          textColor:
+            type: string
+          borderColor:
+            type: string
+    selectedTab:
+      type: string
+
+propsSchema:
+  type: object
+  properties:
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          id:
+            type: string
+
+attrsSchema:
+  type: object
+  properties:
+    selected-tab:
+      type: string
+
+refs:
+  tab-*:
+    eventListeners:
+      click:
+        handler: handleClickItem
+
+events:
+  item-click:
+    type: object
+    properties:
+      id:
+        type: string
+
+template:
+  - rtgl-view d=h g=sm bgc=mu p=sm br=lg ${containerAttrString}:
+    - $for item in items:
+        - rtgl-view#tab-${item.id} data-id=${item.id} cur=p bgc=${item.bgColor} bw=xs bc=${item.borderColor} pv=md ph=lg br=lg:
+          - rtgl-text s=sm c=${item.textColor}: "${item.label}"