@rettangoli/ui 0.1.30 → 0.1.32-rc1

package/src/components/breadcrumb/breadcrumb.view.yaml

@@ -1,64 +1,24 @@
-elementName: rtgl-breadcrumb
-
-viewDataSchema:
-  type: object
-  properties:
-    containerAttrString:
-      type: string
-    items:
-      type: array
-      items:
-        type: object
-        properties:
-          label:
-            type: string
-          id:
-            type: string
-    separator:
-      type: string
-
-propsSchema:
-  type: object
-  properties:
-    items:
-      type: array
-      items:
-        type: object
-        properties:
-          label:
-            type: string
-          id:
-            type: string
-    separator:
-      type: string
-      default: "breadcrumb-arrow"
-
 refs:
-  item-*:
+  item*:
     eventListeners:
       click:
         handler: handleClickItem
-events:
-  item-click:
-    type: object
-    properties:
-      item:
-        type: object
-        properties:
-          label:
-            type: string
-          id:
-            type: string
-      index:
-        type: number
-
+styles:
+  a:
+    text-decoration: none
+    color: inherit
 template:
   - rtgl-view d=h av=c g=md p=sm ${containerAttrString}:
-    - $for item in items:
-        - $if item.isSeparator:
-            - rtgl-svg wh=16 svg=${separator} c=mu-fg:
-          $elif item.id:
-            - rtgl-view#item-${item.id} data-id=${item.id} cur=p:
-              - rtgl-text s=sm c=mu-fg: "${item.label}"
-          $else:
-            - rtgl-text s=sm c=mu-fg: "${item.label}"
+      - $for item, i in items:
+          - $if item.isSeparator:
+              - rtgl-svg wh=16 svg=${sep} c=mu-fg: null
+            $elif item.isEllipsis:
+              - rtgl-text s=sm c=mu-fg: ${item.label}
+            $elif item.isInteractive && item.href:
+              - a#item${i} href=${item.href} ${item.linkExtraAttrs} data-index=${item.index}:
+                  - rtgl-text s=sm c=${item.c}: ${item.label}
+            $elif item.isInteractive:
+              - rtgl-view#item${i} data-index=${item.index} cur=pointer:
+                  - rtgl-text s=sm c=${item.c}: ${item.label}
+            $else:
+              - rtgl-text s=sm c=${item.c}: ${item.label}

package/src/components/dropdownMenu/dropdownMenu.handlers.js

@@ -7,13 +7,27 @@ export const handleClosePopover = (deps, payload) => {
 export const handleClickMenuItem = (deps, payload) => {
   const { dispatchEvent, props } = deps;
   const event = payload._event;
-  const index = parseInt(event.currentTarget.id.replace('option-', ''));
+  const index = Number(event.currentTarget.dataset.index ?? event.currentTarget.id.slice('option'.length));
   const item = props.items[index];
+  const itemType = item?.type || 'item';
 
-  dispatchEvent(new CustomEvent('click-item', {
+  if (!item || itemType !== 'item' || item.disabled) {
+    event.preventDefault();
+    return;
+  }
+
+  if (!item.href) {
+    event.preventDefault();
+  }
+
+  dispatchEvent(new CustomEvent('item-click', {
     detail: {
       index,
-      item
+      item,
+      id: item.id,
+      path: item.path,
+      href: item.href,
+      trigger: event.type,
     }
   }));
 }

package/src/components/dropdownMenu/dropdownMenu.schema.yaml

@@ -0,0 +1,64 @@
+componentName: rtgl-dropdown-menu
+propsSchema:
+  type: object
+  properties:
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          type:
+            type: string
+            enum:
+              - label
+              - item
+              - separator
+          id:
+            type: string
+          path:
+            type: string
+          href:
+            type: string
+          disabled:
+            type: boolean
+          newTab:
+            type: boolean
+          rel:
+            type: string
+          testId:
+            type: string
+    open:
+      type: string
+    x:
+      type: string
+    'y':
+      type: string
+    place:
+      type: string
+    w:
+      type: string
+    h:
+      type: string
+events:
+  close:
+    type: object
+  item-click:
+    type: object
+    properties:
+      index:
+        type: number
+      item:
+        type: object
+      id:
+        type: string
+      path:
+        type: string
+      href:
+        type: string
+      trigger:
+        type: string
+methods:
+  type: object
+  properties: {}

package/src/components/dropdownMenu/dropdownMenu.store.js

@@ -2,12 +2,54 @@
 export const createInitialState = () => Object.freeze({
 });
 
-export const selectViewData = ({ props, attrs }) => {
+const escapeAttrValue = (value) => `${value}`.replace(/"/g, '"');
+
+const normalizeItems = (items) => {
+  return items.map((item, index) => {
+    const type = item.type || 'item';
+    const isSeparator = type === 'separator';
+    const isLabel = type === 'label';
+    const isItem = type === 'item';
+    const isDisabled = !!item.disabled;
+    const isInteractive = isItem && !isDisabled;
+    const c = isDisabled ? 'mu-fg' : 'fg';
+    const bgc = isDisabled ? 'mu' : 'mu';
+    const hoverBgc = isDisabled ? '' : 'ac';
+    const hasHref = typeof item.href === 'string' && item.href.length > 0;
+    const relValue = item.rel || (item.newTab ? 'noopener noreferrer' : '');
+    const linkExtraAttrs = [
+      item.newTab ? 'target="_blank"' : '',
+      relValue ? `rel="${escapeAttrValue(relValue)}"` : '',
+    ].filter(Boolean).join(' ');
+
+    return {
+      ...item,
+      index,
+      type,
+      isSeparator,
+      isLabel,
+      isItem,
+      isDisabled,
+      isInteractive,
+      hasHref,
+      linkExtraAttrs,
+      c,
+      bgc,
+      hoverBgc,
+    };
+  });
+};
+
+export const selectViewData = ({ props }) => {
+  const items = Array.isArray(props.items) ? props.items : [];
+
   return {
-    items: props.items || [],
-    open: !!attrs.open,
-    x: attrs.x,
-    y: attrs.y,
-    placement: attrs.placement
+    items: normalizeItems(items),
+    open: !!props.open,
+    x: props.x || 0,
+    y: props.y || 0,
+    w: props.w || '300',
+    h: props.h || '300',
+    place: props.place || 'bs',
   };
 }

package/src/components/dropdownMenu/dropdownMenu.view.yaml

@@ -1,58 +1,36 @@
-elementName: rtgl-dropdown-menu
-
-viewDataSchema:
-  type: object
-
-propsSchema:
-  type: object
-  properties:
-    items:
-      type: array
-      items:
-        type: object
-        properties:
-          label:
-            type: string
-          type:
-            type: string
-            enum:
-              - label
-              - item
-              - separator
-          testId:
-            type: string
-
-attrsSchema:
-  type: object
-  properties:
-    open:
-      type: string
-    x:
-      type: string
-    y:
-      type: string
-    placement:
-      type: string
-
 refs:
   popover:
     eventListeners:
       close:
         handler: handleClosePopover
-  option-*:
+  option*:
     eventListeners:
       click:
         handler: handleClickMenuItem
-
+styles:
+  a:
+    text-decoration: none
+    color: inherit
 template:
-  - rtgl-popover#popover ?open=${open} x=${x} y=${y} placement=${placement}:
-      - rtgl-view wh=300 sv g=xs slot=content bgc=background br=md:
+  - rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place}:
+      - rtgl-view w=${w} h=${h} sv g=xs slot=content bgc=bg br=md:
           - $for item, i in items:
-              - $if item.type == 'label':
+              - $if item.isLabel:
                   - rtgl-view w=f ph=lg pv=md:
                       - rtgl-text s=sm c=mu-fg: ${item.label}
-                $elif item.type == 'item':
-                  - rtgl-view#option-${i} w=f h-bgc=ac ph=lg pv=md cur=p br=md bgc=mu data-testid=${item.testId}:
-                      - rtgl-text: ${item.label}
-                $elif item.type == 'separator':
-                  - rtgl-view w=f h=1 ph=lg mv=md bgc=bo:
+                $elif item.isItem && item.isDisabled:
+                  - rtgl-view w=f ph=lg pv=md br=md bgc=${item.bgc}:
+                      - rtgl-text c=${item.c}: ${item.label}
+                $elif item.isItem && item.hasHref && item.linkExtraAttrs:
+                  - a#option${i} href=${item.href} ${item.linkExtraAttrs} data-index=${item.index} data-testid=${item.testId}:
+                      - rtgl-view w=f h-bgc=${item.hoverBgc} ph=lg pv=md cur=pointer br=md bgc=${item.bgc}:
+                          - rtgl-text c=${item.c}: ${item.label}
+                $elif item.isItem && item.hasHref:
+                  - a#option${i} href=${item.href} data-index=${item.index} data-testid=${item.testId}:
+                      - rtgl-view w=f h-bgc=${item.hoverBgc} ph=lg pv=md cur=pointer br=md bgc=${item.bgc}:
+                          - rtgl-text c=${item.c}: ${item.label}
+                $elif item.isItem:
+                  - rtgl-view#option${i} w=f h-bgc=${item.hoverBgc} ph=lg pv=md cur=pointer br=md bgc=${item.bgc} data-index=${item.index} data-testid=${item.testId}:
+                      - rtgl-text c=${item.c}: ${item.label}
+                $elif item.isSeparator:
+                  - rtgl-view w=f h=1 ph=lg mv=md bgc=bo: null

package/src/components/form/form.handlers.js

@@ -1,13 +1,13 @@
 const updateAttributes = ({ form, defaultValues = {}, refs }) => {
   const { fields = [] } = form;
-  fields.forEach((field) => {
-    const ref = refs[`field-${field.name}`]?.elm;
+  fields.forEach((field, index) => {
+    const ref = refs[`field${index}`];
 
     if (!ref) {
       return;
     }
 
-    if (['input-textarea', 'inputText', 'input-text', 'input-number', 'colorPicker', 'slider', 'slider-input', 'popover-input'].includes(field.inputType)) {
+    if (['input-textarea', 'input-text', 'input-number', 'color-picker', 'slider', 'slider-input', 'popover-input'].includes(field.inputType)) {
       const defaultValue = defaultValues[field.name];
       if (defaultValue === undefined || defaultValue === null) {
         ref.removeAttribute('value')
@@ -15,7 +15,7 @@ const updateAttributes = ({ form, defaultValues = {}, refs }) => {
         ref.setAttribute('value', defaultValue)
       }
     }
-    if (['inputText', 'input-text', 'input-textarea'].includes(field.inputType) && field.placeholder) {
+    if (['input-text', 'input-textarea'].includes(field.inputType) && field.placeholder) {
       const currentPlaceholder = ref.getAttribute('placeholder')
       if (currentPlaceholder !== field.placeholder) {
         if (field.placeholder === undefined || field.placeholder === null) {
@@ -31,16 +31,12 @@ const updateAttributes = ({ form, defaultValues = {}, refs }) => {
 const autoFocusFirstInput = (refs) => {
   // Find first focusable field
   for (const fieldKey in refs) {
-    if (fieldKey.startsWith('field-')) {
+    if (fieldKey.startsWith('field')) {
       const fieldRef = refs[fieldKey];
-      if (fieldRef && fieldRef.elm) {
-        const element = fieldRef.elm;
-
-        if (element.focus) {
-          // Currently only available for input-text and input-textarea
-          element.focus();
-          return;
-        }
+      if (fieldRef && fieldRef.focus) {
+        // Currently only available for input-text and input-textarea
+        fieldRef.focus();
+        return;
       }
     }
   }
@@ -49,18 +45,17 @@ const autoFocusFirstInput = (refs) => {
 
 export const handleBeforeMount = (deps) => {
   const { store, props } = deps;
-  store.setFormValues(props.defaultValues);
+  store.setFormValues({ formValues: props.defaultValues });
 };
 
 export const handleAfterMount = (deps) => {
-  const { props, getRefIds, render, attrs } = deps;
+  const { props, refs, render } = deps;
   const { form = {}, defaultValues } = props;
-  const refs = getRefIds();
   updateAttributes({ form, defaultValues, refs });
   render();
 
   // Auto-focus first input field if autofocus attribute is set
-  if (attrs?.autofocus) {
+  if (props?.autofocus) {
     setTimeout(() => {
       autoFocusFirstInput(refs);
     }, 50);
@@ -68,13 +63,12 @@ export const handleAfterMount = (deps) => {
 };
 
 export const handleOnUpdate = (deps, payload) => {
-  const { oldAttrs, newAttrs, newProps } = payload;
-  const { store, render, getRefIds } = deps;
+  const { oldProps, newProps } = payload;
+  const { store, render, refs } = deps;
   const { form = {}, defaultValues } = newProps;
-  if (oldAttrs?.key !== newAttrs?.key) {
-    const refs = getRefIds();
+  if (oldProps?.key !== newProps?.key) {
     updateAttributes({ form, defaultValues, refs });
-    store.setFormValues(defaultValues);
+    store.setFormValues({ formValues: defaultValues });
     render();
     return;
   }
@@ -96,7 +90,7 @@ const dispatchFormChange = (name, fieldValue, formValues, dispatchEvent) => {
 export const handleActionClick = (deps, payload) => {
   const { store, dispatchEvent } = deps;
   const event = payload._event;
-  const id = event.currentTarget.id.replace("action-", "");
+  const id = event.currentTarget.dataset.actionId || event.currentTarget.id.slice("action".length);
   dispatchEvent(
     new CustomEvent("action-click", {
       detail: {
@@ -108,15 +102,14 @@ export const handleActionClick = (deps, payload) => {
 };
 
 export const handleInputChange = (deps, payload) => {
-  const { store, dispatchEvent, props } = deps;
+  const { store, dispatchEvent } = deps;
   const event = payload._event;
-  let name = event.currentTarget.id.replace("field-", "");
-  if (name && event.detail.value !== undefined) {
+  let name = event.currentTarget.dataset.fieldName || event.currentTarget.id.slice("field".length);
+  if (name && event.detail && Object.prototype.hasOwnProperty.call(event.detail, "value")) {
     const value = event.detail.value
     store.setFormFieldValue({
       name: name,
       value,
-      props,
     });
     dispatchFormChange(
       name,
@@ -127,82 +120,6 @@ export const handleInputChange = (deps, payload) => {
   }
 };
 
-export const handleSelectChange = (deps, payload) => {
-  const { store, dispatchEvent, render, props } = deps;
-  const event = payload._event;
-  const name = event.currentTarget.id.replace("field-", "");
-  if (name) {
-    store.setFormFieldValue({
-      name: name,
-      value: event.detail.selectedValue,
-      props,
-    });
-    dispatchFormChange(
-      name,
-      event.detail.selectedValue,
-      store.selectFormValues(),
-      dispatchEvent,
-    );
-    render();
-  }
-};
-
-export const handleColorPickerChange = (deps, payload) => {
-  const { store, dispatchEvent, props } = deps;
-  const event = payload._event;
-  const name = event.currentTarget.id.replace("field-", "");
-  if (name && event.detail.value !== undefined) {
-    store.setFormFieldValue({
-      name: name,
-      value: event.detail.value,
-      props,
-    });
-    dispatchFormChange(
-      name,
-      event.detail.value,
-      store.selectFormValues(),
-      dispatchEvent,
-    );
-  }
-};
-
-export const handleSliderChange = (deps, payload) => {
-  const { store, dispatchEvent, props } = deps;
-  const event = payload._event;
-  const name = event.currentTarget.id.replace("field-", "");
-  if (name && event.detail.value !== undefined) {
-    store.setFormFieldValue({
-      name: name,
-      value: event.detail.value,
-      props,
-    });
-    dispatchFormChange(
-      name,
-      event.detail.value,
-      store.selectFormValues(),
-      dispatchEvent,
-    );
-  }
-};
-
-export const handleSliderInputChange = (deps, payload) => {
-  const { store, dispatchEvent, props } = deps;
-  const event = payload._event;
-  const name = event.currentTarget.id.replace("field-", "");
-  if (name && event.detail.value !== undefined) {
-    store.setFormFieldValue({
-      name: name,
-      value: event.detail.value,
-      props,
-    });
-    dispatchFormChange(
-      name,
-      event.detail.value,
-      store.selectFormValues(),
-      dispatchEvent,
-    );
-  }
-};
 
 export const handleImageClick = (deps, payload) => {
   const event = payload._event;
@@ -210,7 +127,7 @@ export const handleImageClick = (deps, payload) => {
     event.preventDefault();
   }
   const { dispatchEvent } = deps;
-  const name = event.currentTarget.id.replace("image-", "");
+  const name = event.currentTarget.dataset.fieldName || event.currentTarget.id.slice("image".length);
   dispatchEvent(
     new CustomEvent("extra-event", {
       detail: {
@@ -229,7 +146,7 @@ export const handleWaveformClick = (deps, payload) => {
     event.preventDefault();
   }
   const { dispatchEvent } = deps;
-  const name = event.currentTarget.id.replace("waveform-", "");
+  const name = event.currentTarget.dataset.fieldName || event.currentTarget.id.slice("waveform".length);
   dispatchEvent(
     new CustomEvent("extra-event", {
       detail: {
@@ -245,7 +162,7 @@ export const handleWaveformClick = (deps, payload) => {
 export const handleSelectAddOption = (deps, payload) => {
   const { store, dispatchEvent } = deps;
   const event = payload._event;
-  const name = event.currentTarget.id.replace("field-", "");
+  const name = event.currentTarget.dataset.fieldName || event.currentTarget.id.slice("field".length);
   dispatchEvent(
     new CustomEvent("action-click", {
       detail: {
@@ -260,7 +177,7 @@ export const handleSelectAddOption = (deps, payload) => {
 export const handleTooltipMouseEnter = (deps, payload) => {
   const { store, render, props } = deps;
   const event = payload._event;
-  const fieldName = event.currentTarget.id.replace('tooltip-icon-', '');
+  const fieldName = event.currentTarget.dataset.fieldName || event.currentTarget.id.slice('tooltipIcon'.length);
 
   // Find the field with matching name to get tooltip content
   const form = props.form;
@@ -279,7 +196,7 @@ export const handleTooltipMouseEnter = (deps, payload) => {
 
 export const handleTooltipMouseLeave = (deps) => {
   const { store, render } = deps;
-  store.hideTooltip();
+  store.hideTooltip({});
   render();
 };