@rettangoli/ui 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",

package/src/components/form/form.methods.js

@@ -58,7 +58,7 @@ const syncFieldValueAttribute = ({ ref, fieldType, value, forceRefresh = false }
   ref.setAttribute("value", String(value));
 };
 
-const syncSelectFieldState = ({ ref, value }) => {
+const syncChoiceFieldState = ({ ref, value }) => {
   if (!ref) return;
   if (!ref?.store?.updateSelectedValue) return;
   ref.store.updateSelectedValue({ value });
@@ -89,16 +89,18 @@ const resolveRenderRoot = (instance) => {
   return instance?.shadow;
 };
 
-const syncSelectRefsFromValues = ({ root, values = {} }) => {
+const syncChoiceRefsFromValues = ({ root, values = {} }) => {
   if (!root || typeof root.querySelectorAll !== "function") return;
 
-  const selectRefs = root.querySelectorAll("rtgl-select[data-field-name]");
-  selectRefs.forEach((ref) => {
+  const choiceRefs = root.querySelectorAll(
+    "rtgl-select[data-field-name], rtgl-segmented-control[data-field-name]",
+  );
+  choiceRefs.forEach((ref) => {
     const fieldName = ref.dataset?.fieldName;
     if (!fieldName) return;
 
     const value = get(values, fieldName);
-    syncSelectFieldState({ ref, value });
+    syncChoiceFieldState({ ref, value });
   });
 };
 
@@ -141,7 +143,7 @@ export const setValues = function (payload = {}) {
       });
 
       if (typeof ref?.tagName === "string" && ref.tagName.toUpperCase() === "RTGL-SELECT") {
-        syncSelectFieldState({ ref, value });
+        syncChoiceFieldState({ ref, value });
       }
 
       if (field.type === "checkbox") {
@@ -155,7 +157,7 @@ export const setValues = function (payload = {}) {
   this.render();
   const syncSelects = () => {
     const nextState = this.store.getState();
-    syncSelectRefsFromValues({
+    syncChoiceRefsFromValues({
       root: resolveRenderRoot(this),
       values: nextState.formValues,
     });

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

@@ -402,6 +402,7 @@ export const getDefaultValue = (field) => {
     case "input-number":
       return null;
     case "select":
+    case "segmented-control":
       return null;
     case "checkbox":
       return false;
@@ -506,7 +507,7 @@ export const selectViewData = ({ state, props }) => {
       field._inputType = field.inputType || "text";
     }
 
-    if (field.type === "select") {
+    if (field.type === "select" || field.type === "segmented-control") {
       const val = get(state.formValues, field.name);
       field._selectedValue = val !== undefined ? val : null;
       field.placeholder = field.placeholder || "";

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

@@ -68,6 +68,8 @@ template:
                           - rtgl-textarea#field${field._idx} data-field-name=${field.name} w=f rows=${field.rows} placeholder=${field.placeholder} ?disabled=${field._disabled}: null
                       - $if field.type == "select":
                           - rtgl-select#field${field._idx} data-field-name=${field.name} w=f :options=${field.options} ?no-clear=${field.noClear} :selectedValue=${field._selectedValue} :placeholder=${field.placeholder} ?disabled=${field._disabled}: null
+                      - $if field.type == "segmented-control":
+                          - rtgl-segmented-control#field${field._idx} data-field-name=${field.name} w=f :options=${field.options} ?no-clear=${field.noClear} :selectedValue=${field._selectedValue} :placeholder=${field.placeholder} ?disabled=${field._disabled}: null
                       - $if field.type == "color-picker":
                           - rtgl-color-picker#field${field._idx} data-field-name=${field.name} ?disabled=${field._disabled}: null
                       - $if field.type == "slider":

package/src/components/segmentedControl/segmentedControl.handlers.js

@@ -0,0 +1,172 @@
+import { deepEqual } from "../../common.js";
+
+const emitValueChange = ({ dispatchEvent, value, label, index, item }) => {
+  dispatchEvent(
+    new CustomEvent("value-change", {
+      detail: {
+        value,
+        label,
+        index,
+        item,
+      },
+      bubbles: true,
+    }),
+  );
+};
+
+export const handleBeforeMount = (deps) => {
+  const { store, props, render } = deps;
+
+  if (
+    props.selectedValue !== null
+    && props.selectedValue !== undefined
+    && props.options
+  ) {
+    const selectedOption = props.options.find((opt) =>
+      deepEqual(opt.value, props.selectedValue),
+    );
+    if (selectedOption) {
+      store.updateSelectedValue({
+        value: selectedOption.value,
+      });
+      render();
+    }
+  }
+};
+
+export const handleOnUpdate = (deps, payload) => {
+  const { oldProps, newProps } = payload;
+  const { store, render } = deps;
+  let shouldRender = false;
+
+  if (oldProps.selectedValue !== newProps.selectedValue) {
+    store.updateSelectedValue({ value: newProps.selectedValue });
+    shouldRender = true;
+  }
+
+  if (shouldRender) {
+    render();
+  }
+};
+
+export const handleOptionClick = (deps, payload) => {
+  const { render, dispatchEvent, props, store } = deps;
+  if (props.disabled) return;
+
+  const event = payload._event;
+  event.stopPropagation();
+
+  const id = event.currentTarget.id.slice("option".length);
+  const index = Number(id);
+  const option = props.options[index];
+  const hasControlledValue = Object.prototype.hasOwnProperty.call(
+    props || {},
+    "selectedValue",
+  );
+  const currentValue = store.selectSelectedValue();
+  const hasCurrentValue = hasControlledValue ? true : store.selectHasSelectedValue();
+  const isSelected = option
+    ? hasCurrentValue && deepEqual(option.value, currentValue)
+    : false;
+
+  if (!option) {
+    return;
+  }
+
+  if (isSelected && !props.noClear) {
+    store.clearSelectedValue({});
+
+    if (props.onChange && typeof props.onChange === "function") {
+      props.onChange(undefined);
+    }
+
+    emitValueChange({
+      dispatchEvent,
+      value: undefined,
+      label: undefined,
+      index: null,
+      item: undefined,
+    });
+
+    render();
+    return;
+  }
+
+  store.updateSelectedValue({ value: option.value });
+
+  if (props.onChange && typeof props.onChange === "function") {
+    props.onChange(option.value);
+  }
+
+  emitValueChange({
+    dispatchEvent,
+    value: option.value,
+    label: option.label,
+    index,
+    item: option,
+  });
+
+  render();
+};
+
+export const handleOptionKeyDown = (deps, payload) => {
+  const event = payload._event;
+  if (event.key !== "Enter" && event.key !== " ") {
+    return;
+  }
+
+  event.preventDefault();
+  handleOptionClick(deps, payload);
+};
+
+export const handleOptionMouseEnter = (deps, payload) => {
+  const { store, render } = deps;
+  const event = payload._event;
+  const id = parseInt(event.currentTarget.id.slice("option".length), 10);
+  store.setHoveredOption({ optionId: id });
+  render();
+};
+
+export const handleOptionMouseLeave = (deps) => {
+  const { store, render } = deps;
+  store.clearHoveredOption({});
+  render();
+};
+
+export const handleAddOptionClick = (deps, payload) => {
+  if (deps.props.disabled) return;
+
+  const { render, dispatchEvent } = deps;
+  const { _event: event } = payload;
+  event.stopPropagation();
+
+  dispatchEvent(
+    new CustomEvent("add-option-click", {
+      bubbles: true,
+    }),
+  );
+
+  render();
+};
+
+export const handleAddOptionKeyDown = (deps, payload) => {
+  const event = payload._event;
+  if (event.key !== "Enter" && event.key !== " ") {
+    return;
+  }
+
+  event.preventDefault();
+  handleAddOptionClick(deps, payload);
+};
+
+export const handleAddOptionMouseEnter = (deps) => {
+  const { store, render } = deps;
+  store.setHoveredAddOption({ isHovered: true });
+  render();
+};
+
+export const handleAddOptionMouseLeave = (deps) => {
+  const { store, render } = deps;
+  store.setHoveredAddOption({ isHovered: false });
+  render();
+};

package/src/components/segmentedControl/segmentedControl.schema.yaml

@@ -0,0 +1,38 @@
+componentName: rtgl-segmented-control
+propsSchema:
+  type: object
+  properties:
+    placeholder:
+      type: string
+    options:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          value:
+            type: any
+          testId:
+            type: string
+    selectedValue:
+      type: any
+    onChange:
+      type: function
+    noClear:
+      type: boolean
+    addOption:
+      type: object
+      properties:
+        label:
+          type: string
+    disabled:
+      type: boolean
+    w:
+      type: string
+events:
+  value-change: {}
+  add-option-click: {}
+methods:
+  type: object
+  properties: {}

package/src/components/segmentedControl/segmentedControl.store.js

@@ -0,0 +1,104 @@
+import { deepEqual } from "../../common.js";
+
+const blacklistedProps = [
+  "id",
+  "class",
+  "style",
+  "slot",
+  "placeholder",
+  "selectedValue",
+  "onChange",
+  "options",
+  "noClear",
+  "addOption",
+  "disabled",
+];
+
+const stringifyProps = (props = {}) => {
+  return Object.entries(props)
+    .filter(([key]) => !blacklistedProps.includes(key))
+    .map(([key, value]) => `${key}=${value}`)
+    .join(" ");
+};
+
+export const createInitialState = () =>
+  Object.freeze({
+    selectedValue: null,
+    hasSelectedValue: false,
+    hoveredOptionId: null,
+    hoveredAddOption: false,
+  });
+
+export const selectViewData = ({ state, props }) => {
+  const containerAttrString = stringifyProps(props);
+  const isDisabled = !!props.disabled;
+  const hasControlledValue = Object.prototype.hasOwnProperty.call(
+    props || {},
+    "selectedValue",
+  );
+  const currentValue = hasControlledValue ? props.selectedValue : state.selectedValue;
+  const hasCurrentValue = hasControlledValue ? true : !!state.hasSelectedValue;
+  const options = props.options || [];
+
+  const optionsWithSelection = options.map((option, index) => {
+    const isSelected = hasCurrentValue && deepEqual(option.value, currentValue);
+    const isHovered = state.hoveredOptionId === index;
+
+    return {
+      ...option,
+      isSelected,
+      bgc: isSelected ? "ac" : (isHovered && !isDisabled ? "mu" : ""),
+      textColor: isSelected ? "ac-fg" : "fg",
+      borderLeftWidth: index === 0 ? "none" : "xs",
+      cursor: isDisabled ? "not-allowed" : "pointer",
+      tabIndex: isDisabled ? -1 : 0,
+    };
+  });
+
+  return {
+    containerAttrString,
+    isDisabled,
+    options: optionsWithSelection,
+    selectedValue: currentValue,
+    hasSelectedValue: hasCurrentValue,
+    ariaLabel: props.placeholder || "Segmented control",
+    showAddOption: !isDisabled && !!props.addOption,
+    addOptionLabel: props.addOption?.label ? `+ ${props.addOption.label}` : "+ Add",
+    addOptionBgc: state.hoveredAddOption ? "mu" : "",
+    addOptionBorderLeftWidth: options.length === 0 ? "none" : "xs",
+  };
+};
+
+export const selectState = ({ state }) => {
+  return state;
+};
+
+export const selectSelectedValue = ({ state }) => {
+  return state.selectedValue;
+};
+
+export const selectHasSelectedValue = ({ state }) => {
+  return !!state.hasSelectedValue;
+};
+
+export const updateSelectedValue = ({ state }, payload = {}) => {
+  state.selectedValue = payload.value;
+  state.hasSelectedValue = true;
+};
+
+export const clearSelectedValue = ({ state }) => {
+  state.selectedValue = undefined;
+  state.hasSelectedValue = false;
+};
+
+export const setHoveredOption = ({ state }, payload = {}) => {
+  state.hoveredOptionId = payload.optionId;
+};
+
+export const clearHoveredOption = ({ state }) => {
+  state.hoveredOptionId = null;
+};
+
+export const setHoveredAddOption = ({ state }, payload = {}) => {
+  state.hoveredAddOption = !!payload.isHovered;
+};

package/src/components/segmentedControl/segmentedControl.view.yaml

@@ -0,0 +1,29 @@
+refs:
+  option*:
+    eventListeners:
+      click:
+        handler: handleOptionClick
+      keydown:
+        handler: handleOptionKeyDown
+      mouseenter:
+        handler: handleOptionMouseEnter
+      mouseleave:
+        handler: handleOptionMouseLeave
+  optionAdd:
+    eventListeners:
+      click:
+        handler: handleAddOptionClick
+      keydown:
+        handler: handleAddOptionKeyDown
+      mouseenter:
+        handler: handleAddOptionMouseEnter
+      mouseleave:
+        handler: handleAddOptionMouseLeave
+template:
+  - 'rtgl-view d=h bw=xs bc=bo br=md bgc=bg overflow=hidden ${containerAttrString} role="group" aria-label=${ariaLabel}':
+      - $for option, i in options:
+          - 'rtgl-view#option${i} d=h av=c ah=c w=1fg ph=lg pv=md cur=${option.cursor} bgc=${option.bgc} bwl=${option.borderLeftWidth} bc=bo data-testid=${option.testId} role="button" tabindex=${option.tabIndex} aria-pressed=${option.isSelected} aria-disabled=${isDisabled}':
+              - rtgl-text s=sm c=${option.textColor} ta=c: ${option.label}
+      - $if showAddOption:
+          - 'rtgl-view#optionAdd d=h av=c ah=c w=1fg ph=lg pv=md cur=pointer bgc=${addOptionBgc} bwl=${addOptionBorderLeftWidth} bc=bo data-testid="segmented-control-add-option" role="button" tabindex=0':
+              - rtgl-text s=sm c=ac ta=c: ${addOptionLabel}