@rettangoli/ui 1.6.1 → 1.7.0

package/package.json

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

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

@@ -71,6 +71,14 @@ const updateFieldAttributes = ({
         }
       }
 
+      if (field.type === "tag-select" && ref.store?.updateSelectedValues) {
+        const value = get(formValues, field.name);
+        ref.store.updateSelectedValues({ values: Array.isArray(value) ? value : [] });
+        if (typeof ref.render === "function") {
+          ref.render();
+        }
+      }
+
       if (field.type === "checkbox") {
         const value = get(formValues, field.name);
         if (value) {

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

@@ -60,8 +60,13 @@ const syncFieldValueAttribute = ({ ref, fieldType, value, forceRefresh = false }
 
 const syncChoiceFieldState = ({ ref, value }) => {
   if (!ref) return;
-  if (!ref?.store?.updateSelectedValue) return;
-  ref.store.updateSelectedValue({ value });
+  if (ref?.store?.updateSelectedValues) {
+    ref.store.updateSelectedValues({ values: Array.isArray(value) ? value : [] });
+  } else if (ref?.store?.updateSelectedValue) {
+    ref.store.updateSelectedValue({ value });
+  } else {
+    return;
+  }
   if (typeof ref.render === "function") {
     ref.render();
   }
@@ -93,7 +98,7 @@ const syncChoiceRefsFromValues = ({ root, values = {} }) => {
   if (!root || typeof root.querySelectorAll !== "function") return;
 
   const choiceRefs = root.querySelectorAll(
-    "rtgl-select[data-field-name], rtgl-segmented-control[data-field-name]",
+    "rtgl-select[data-field-name], rtgl-tag-select[data-field-name], rtgl-segmented-control[data-field-name]",
   );
   choiceRefs.forEach((ref) => {
     const fieldName = ref.dataset?.fieldName;
@@ -142,7 +147,7 @@ export const setValues = function (payload = {}) {
         forceRefresh: true,
       });
 
-      if (typeof ref?.tagName === "string" && ref.tagName.toUpperCase() === "RTGL-SELECT") {
+      if (["select", "tag-select", "segmented-control"].includes(field.type)) {
         syncChoiceFieldState({ ref, value });
       }
 

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

@@ -284,6 +284,7 @@ export const validateField = (field, value) => {
       value === undefined ||
       value === null ||
       value === "" ||
+      (Array.isArray(value) && value.length === 0) ||
       (typeof value === "boolean" && value === false);
     // For numbers, 0 is a valid value
     const isEmptyNumber = field.type === "input-number" && value === null;
@@ -404,6 +405,8 @@ export const getDefaultValue = (field) => {
     case "select":
     case "segmented-control":
       return null;
+    case "tag-select":
+      return [];
     case "checkbox":
       return false;
     case "color-picker":
@@ -507,9 +510,10 @@ export const selectViewData = ({ state, props }) => {
       field._inputType = field.inputType || "text";
     }
 
-    if (field.type === "select" || field.type === "segmented-control") {
+    if (field.type === "select" || field.type === "tag-select" || field.type === "segmented-control") {
       const val = get(state.formValues, field.name);
       field._selectedValue = val !== undefined ? val : null;
+      field._selectedValues = Array.isArray(val) ? val : [];
       field.placeholder = field.placeholder || "";
       // clearable defaults to true; noClear is the inverse
       field.noClear = field.clearable === false;

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 == "tag-select":
+                          - rtgl-tag-select#field${field._idx} data-field-name=${field.name} w=f :options=${field.options} :selectedValues=${field._selectedValues} :placeholder=${field.placeholder} :addOption=${field.addOption} ?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":

package/src/components/tagSelect/tagSelect.handlers.js

@@ -0,0 +1,192 @@
+const getOptionType = (option = {}) => {
+  if (option.type === "section") {
+    return "section";
+  }
+
+  if (option.type === "separator") {
+    return "separator";
+  }
+
+  return "item";
+};
+
+const normalizeSelectedValues = (selectedValues) => {
+  if (!Array.isArray(selectedValues)) {
+    return [];
+  }
+
+  return [...selectedValues];
+};
+
+const resolveCurrentValues = ({ store, props }) => {
+  if (store.selectHasSelectedValues()) {
+    return store.selectSelectedValues();
+  }
+
+  return normalizeSelectedValues(props.selectedValues);
+};
+
+const emitValueChange = ({
+  dispatchEvent,
+  value,
+  operation,
+  changedValue,
+  label,
+  index,
+  item,
+}) => {
+  dispatchEvent(
+    new CustomEvent("value-change", {
+      detail: {
+        value,
+        operation,
+        changedValue,
+        label,
+        index,
+        item,
+      },
+      bubbles: true,
+    }),
+  );
+};
+
+export const handleBeforeMount = (deps) => {
+  const { store, props, render } = deps;
+
+  if (props.selectedValues !== undefined) {
+    store.updateSelectedValues({ values: props.selectedValues });
+    render();
+  }
+};
+
+export const handleOnUpdate = (deps, payload) => {
+  const { oldProps, newProps } = payload;
+  const { store, render } = deps;
+  let shouldRender = false;
+
+  if (!!newProps?.disabled && !oldProps?.disabled) {
+    store.closeOptionsPopover({});
+    shouldRender = true;
+  }
+
+  if (oldProps.selectedValues !== newProps.selectedValues) {
+    store.updateSelectedValues({ values: newProps.selectedValues, syncDraft: true });
+    shouldRender = true;
+  }
+
+  if (oldProps.options !== newProps.options) {
+    shouldRender = true;
+  }
+
+  if (shouldRender) {
+    render();
+  }
+};
+
+export const handleTriggerClick = (deps, payload) => {
+  const { store, render, refs, props } = deps;
+  if (props.disabled) return;
+
+  const event = payload._event;
+  event.stopPropagation();
+
+  const trigger = refs.trigger;
+  const rect = trigger.getBoundingClientRect();
+  const currentValues = resolveCurrentValues({ store, props });
+
+  store.openOptionsPopover({
+    position: {
+      x: Math.round(rect.left),
+      y: Math.round(rect.bottom + 12),
+      w: Math.max(Math.round(rect.width), 240),
+    },
+    values: currentValues,
+  });
+  render();
+};
+
+export const handleTriggerKeyDown = (deps, payload) => {
+  const event = payload._event;
+  if (event.key !== "Enter" && event.key !== " ") {
+    return;
+  }
+
+  event.preventDefault();
+  handleTriggerClick(deps, payload);
+};
+
+export const handlePopoverClose = (deps) => {
+  const { store, render } = deps;
+  store.closeOptionsPopover({});
+  render();
+};
+
+export const handleOptionClick = (deps, payload) => {
+  const { render, 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];
+
+  if (!option || getOptionType(option) !== "item") {
+    return;
+  }
+
+  store.toggleDraftSelectedValue({ value: option.value });
+  render();
+};
+
+export const handleOptionKeyDown = (deps, payload) => {
+  const event = payload._event;
+  if (event.key !== "Enter" && event.key !== " ") {
+    return;
+  }
+
+  event.preventDefault();
+  handleOptionClick(deps, payload);
+};
+
+export const handleSubmitClick = (deps, payload) => {
+  const { store, props, render, dispatchEvent } = deps;
+  if (props.disabled) return;
+
+  const event = payload._event;
+  event.stopPropagation();
+
+  const nextValues = store.selectDraftSelectedValues();
+
+  store.commitDraftSelectedValues({});
+
+  if (props.onChange && typeof props.onChange === "function") {
+    props.onChange(nextValues);
+  }
+
+  emitValueChange({
+    dispatchEvent,
+    value: nextValues,
+    operation: "set",
+    changedValue: undefined,
+    label: undefined,
+    index: null,
+    item: undefined,
+  });
+
+  render();
+};
+
+export const handleAddOptionClick = (deps, payload) => {
+  const { props, dispatchEvent } = deps;
+  if (props.disabled) return;
+
+  const event = payload._event;
+  event.stopPropagation();
+
+  dispatchEvent(new CustomEvent("add-option-click", {
+    bubbles: true,
+    composed: true,
+  }));
+};

package/src/components/tagSelect/tagSelect.methods.js

@@ -0,0 +1,32 @@
+const resolvePopoverPosition = (trigger) => {
+  if (!trigger || typeof trigger.getBoundingClientRect !== "function") {
+    return null;
+  }
+
+  const rect = trigger.getBoundingClientRect();
+  return {
+    x: Math.round(rect.left),
+    y: Math.round(rect.bottom + 12),
+    w: Math.max(Math.round(rect.width), 240),
+  };
+};
+
+export const refreshPopover = function () {
+  const state = this.store?.getState?.();
+
+  if (state?.isOpen) {
+    const position = resolvePopoverPosition(this.refs?.trigger);
+    const draftValues = this.store?.selectDraftSelectedValues?.() || [];
+
+    if (position) {
+      this.store.openOptionsPopover({
+        position,
+        values: draftValues,
+      });
+    }
+  }
+
+  if (typeof this.render === "function") {
+    this.render();
+  }
+};

package/src/components/tagSelect/tagSelect.schema.yaml

@@ -0,0 +1,51 @@
+componentName: rtgl-tag-select
+propsSchema:
+  type: object
+  properties:
+    placeholder:
+      type: string
+    options:
+      type: array
+      items:
+        type: object
+        properties:
+          type:
+            type: string
+            enum:
+              - section
+              - item
+              - separator
+          label:
+            type: string
+          value:
+            type: any
+          icon:
+            type: string
+          shortcut:
+            type: string
+          suffixText:
+            type: string
+          testId:
+            type: string
+    selectedValues:
+      type: array
+      items:
+        type: any
+    onChange:
+      type: function
+    addOption:
+      type: object
+      properties:
+        label:
+          type: string
+    disabled:
+      type: boolean
+    w:
+      type: string
+events:
+  value-change: {}
+  add-option-click: {}
+methods:
+  type: object
+  properties:
+    refreshPopover: {}

package/src/components/tagSelect/tagSelect.store.js

@@ -0,0 +1,335 @@
+import { deepEqual } from "../../common.js";
+
+const blacklistedProps = [
+  "id",
+  "class",
+  "style",
+  "slot",
+  "placeholder",
+  "options",
+  "selectedValues",
+  "onChange",
+  "addOption",
+  "disabled",
+];
+
+const stringifyProps = (props = {}) => {
+  return Object.entries(props)
+    .filter(([key]) => !blacklistedProps.includes(key))
+    .map(([key, value]) => `${key}=${value}`)
+    .join(" ");
+};
+
+const hasOwnProp = (object, key) => Object.prototype.hasOwnProperty.call(object || {}, key);
+
+const getOptionType = (option = {}) => {
+  if (option.type === "section") {
+    return "section";
+  }
+
+  if (option.type === "separator") {
+    return "separator";
+  }
+
+  return "item";
+};
+
+const isSelectableOption = (option = {}) => getOptionType(option) === "item";
+
+const getOptionIcon = (option = {}) => {
+  return typeof option.icon === "string" && option.icon.length > 0 ? option.icon : "";
+};
+
+const getOptionSuffixText = (option = {}) => {
+  if (typeof option.shortcut === "string" && option.shortcut.length > 0) {
+    return option.shortcut;
+  }
+
+  if (typeof option.suffixText === "string" && option.suffixText.length > 0) {
+    return option.suffixText;
+  }
+
+  return "";
+};
+
+const normalizeSelectedValues = (selectedValues) => {
+  if (!Array.isArray(selectedValues)) {
+    return [];
+  }
+
+  return [...selectedValues];
+};
+
+const sameValueArray = (left = [], right = []) => {
+  if (left.length !== right.length) {
+    return false;
+  }
+
+  return left.every((value, index) => deepEqual(value, right[index]));
+};
+
+const stringifyKeyPart = (value) => {
+  if (value === undefined) {
+    return "undefined";
+  }
+
+  if (value === null) {
+    return "null";
+  }
+
+  if (typeof value === "string") {
+    return value;
+  }
+
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+};
+
+const isSelectedValue = (selectedValues = [], candidate) => {
+  return selectedValues.some((value) => deepEqual(value, candidate));
+};
+
+const getCurrentValues = ({ state, props }) => {
+  if (state.hasSelectedValues) {
+    return normalizeSelectedValues(state.selectedValues);
+  }
+
+  return normalizeSelectedValues(props.selectedValues);
+};
+
+const getDraftValues = ({ state, props }) => {
+  if (state.isOpen) {
+    return normalizeSelectedValues(state.draftSelectedValues);
+  }
+
+  return getCurrentValues({ state, props });
+};
+
+const stringifyFallbackLabel = (value) => {
+  if (value === undefined || value === null) {
+    return "";
+  }
+
+  return String(value);
+};
+
+const findMatchingOption = (options = [], value) => {
+  return options.find((option) => isSelectableOption(option) && deepEqual(option.value, value));
+};
+
+const buildTagStyle = ({ isSelected = true, isAddChip = false } = {}) => {
+  const baseStyle = [
+    "--tag-border-radius: var(--border-radius-md)",
+    "--muted-foreground: var(--foreground)",
+  ];
+
+  if (isAddChip || !isSelected) {
+    baseStyle.push("--muted: color-mix(in srgb, var(--muted) 82%, var(--background) 18%)");
+  }
+
+  return `${baseStyle.join("; ")};`;
+};
+
+const buildPopoverSignature = (options = []) => {
+  if (!Array.isArray(options) || options.length === 0) {
+    return "empty";
+  }
+
+  return options.map((option, index) => {
+    const type = getOptionType(option);
+
+    if (type === "section") {
+      return `section:${index}:${option.label || ""}`;
+    }
+
+    if (type === "separator") {
+      return `separator:${index}`;
+    }
+
+    return `item:${index}:${option.label || ""}:${stringifyKeyPart(option.value)}`;
+  }).join("|");
+};
+
+const buildPopoverKey = (options = []) => {
+  const signature = buildPopoverSignature(options);
+  let hash = 0;
+
+  for (let index = 0; index < signature.length; index += 1) {
+    hash = ((hash << 5) - hash + signature.charCodeAt(index)) >>> 0;
+  }
+
+  return `tagSelectPopover${hash}`;
+};
+
+const normalizeOption = ({
+  option = {},
+  index,
+  selectedValues = [],
+  hasIconColumn = false,
+}) => {
+  const type = getOptionType(option);
+  const isSection = type === "section";
+  const isSeparator = type === "separator";
+  const isItem = type === "item";
+
+  if (isSection || isSeparator) {
+    return {
+      ...option,
+      index,
+      type,
+      isSection,
+      isSeparator,
+      isItem,
+    };
+  }
+
+  const isSelected = isSelectedValue(selectedValues, option.value);
+  const icon = getOptionIcon(option);
+  const baseSuffixText = getOptionSuffixText(option);
+  const suffixText = isSelected ? (baseSuffixText || "Added") : baseSuffixText;
+
+  return {
+    ...option,
+    index,
+    type,
+    isSection,
+    isSeparator,
+    isItem,
+    isSelected,
+    hasIconSlot: hasIconColumn,
+    icon,
+    hasIcon: icon.length > 0,
+    cursor: "pointer",
+    tagStyle: buildTagStyle({ isSelected }),
+    suffixText,
+    hasSuffixText: suffixText.length > 0,
+  };
+};
+
+export const createInitialState = () =>
+  Object.freeze({
+    isOpen: false,
+    position: {
+      x: 0,
+      y: 0,
+      w: 240,
+    },
+    selectedValues: [],
+    draftSelectedValues: [],
+    hasSelectedValues: false,
+  });
+
+export const selectViewData = ({ state, props }) => {
+  const containerAttrString = stringifyProps(props);
+  const isDisabled = !!props.disabled;
+  const currentValues = getCurrentValues({ state, props });
+  const draftValues = getDraftValues({ state, props });
+  const options = Array.isArray(props.options) ? props.options : [];
+  const hasIconColumn = options.some((option) => isSelectableOption(option) && hasOwnProp(option, "icon"));
+  const normalizedOptions = options.map((option, index) =>
+    normalizeOption({
+      option,
+      index,
+      selectedValues: draftValues,
+      hasIconColumn,
+    }),
+  );
+
+  const selectedTags = currentValues.map((value, selectionIndex) => {
+    const matchedOption = findMatchingOption(options, value);
+    const icon = matchedOption ? getOptionIcon(matchedOption) : "";
+
+    return {
+      value,
+      selectionIndex,
+      label: matchedOption?.label || stringifyFallbackLabel(value),
+      icon,
+      hasIcon: icon.length > 0,
+      testId: `tag-select-tag-${selectionIndex}`,
+    };
+  });
+
+  const hasSelectableOptions = normalizedOptions.some((option) => option.isItem);
+  const hasDraftChanges = !sameValueArray(currentValues, draftValues);
+
+  return {
+    containerAttrString,
+    isDisabled,
+    isOpen: state.isOpen,
+    position: state.position,
+    options: normalizedOptions,
+    hasSelectableOptions,
+    popoverKey: buildPopoverKey(options),
+    placeholder: props.placeholder || "Add tag",
+    selectedTags,
+    hasSelectedTags: selectedTags.length > 0,
+    triggerTagStyle: buildTagStyle({ isSelected: true }),
+    placeholderTagStyle: buildTagStyle({ isAddChip: true }),
+    triggerCursor: isDisabled ? "not-allowed" : "pointer",
+    triggerTabIndex: isDisabled ? -1 : 0,
+    showAddOption: true,
+    addOptionLabel: props.addOption?.label || "Add tag",
+    hasDraftChanges,
+    submitDisabled: isDisabled || !hasDraftChanges,
+    submitLabel: "Save",
+  };
+};
+
+export const selectSelectedValues = ({ state }) => {
+  return normalizeSelectedValues(state.selectedValues);
+};
+
+export const selectHasSelectedValues = ({ state }) => {
+  return !!state.hasSelectedValues;
+};
+
+export const selectDraftSelectedValues = ({ state }) => {
+  return normalizeSelectedValues(state.draftSelectedValues);
+};
+
+export const openOptionsPopover = ({ state }, payload = {}) => {
+  const { position, values } = payload;
+  state.position = {
+    ...state.position,
+    ...(position || {}),
+  };
+  state.draftSelectedValues = normalizeSelectedValues(values);
+  state.isOpen = true;
+};
+
+export const closeOptionsPopover = ({ state }) => {
+  state.isOpen = false;
+  state.draftSelectedValues = [];
+};
+
+export const updateSelectedValues = ({ state }, payload = {}) => {
+  const values = normalizeSelectedValues(payload.values);
+  state.selectedValues = values;
+  state.hasSelectedValues = true;
+  if (payload.syncDraft || !state.isOpen) {
+    state.draftSelectedValues = [...values];
+  }
+};
+
+export const toggleDraftSelectedValue = ({ state }, payload = {}) => {
+  const draftValues = normalizeSelectedValues(state.draftSelectedValues);
+  const value = payload.value;
+  const existingIndex = draftValues.findIndex((currentValue) => deepEqual(currentValue, value));
+
+  if (existingIndex >= 0) {
+    state.draftSelectedValues = draftValues.filter((_, index) => index !== existingIndex);
+    return;
+  }
+
+  state.draftSelectedValues = [...draftValues, value];
+};
+
+export const commitDraftSelectedValues = ({ state }) => {
+  state.selectedValues = normalizeSelectedValues(state.draftSelectedValues);
+  state.hasSelectedValues = true;
+  state.isOpen = false;
+  state.draftSelectedValues = [];
+};