@superleapai/flow-ui 1.0.0

package/components/enumeration.js

@@ -0,0 +1,213 @@
+/**
+ * Enumeration Component (vanilla JS)
+ * Design-system enumeration: N clickable items that toggle between enabled/disabled icon by count.
+ * Ref: React Enumeration with cva variants (default, error, warning, success, borderless, inline).
+ */
+
+(function (global) {
+  "use strict";
+
+  var BASE_CLASS =
+    "flex items-center border rounded-4 text-typography-primary-text gap-4 !text-reg-13";
+
+  var VARIANTS = {
+    default:
+      "border-border-primary bg-fill-quarternary-fill-white hover:border-primary-base focus-within:border-primary-base",
+    error:
+      "border-error-base bg-fill-quarternary-fill-white hover:border-error-base focus-within:border-error-base",
+    warning:
+      "border-warning-base bg-fill-quarternary-fill-white hover:border-warning-base focus-within:border-warning-base",
+    success:
+      "border-success-base bg-fill-quarternary-fill-white hover:border-success-base focus-within:border-success-base",
+    borderless:
+      "border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
+    inline:
+      "border-none shadow-none rounded-0 bg-fill-quarternary-fill-white",
+  };
+
+  var SIZES = {
+    default: "px-12 py-6",
+    large: "px-12 py-8",
+    small: "px-12 py-4",
+  };
+
+  var DISABLED_CLASS =
+    "pointer-events-none !cursor-not-allowed opacity-50";
+  var READONLY_CLASS = "pointer-events-none";
+
+  var ITEM_BASE_CLASS =
+    "flex items-center justify-center text-primary-base hover:cursor-pointer";
+
+  var ITEM_ICON_SIZES = {
+    default: "size-16",
+    large: "size-20",
+    small: "size-12",
+  };
+
+  /** Default icons when user does not pass enabledIcon/disabledIcon (e.g. star rating) */
+  var DEFAULT_ENABLED_ICON = '<span class="text-primary-base">★</span>';
+  var DEFAULT_DISABLED_ICON = '<span class="text-typography-quaternary-text">☆</span>';
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  function setContent(el, content) {
+    if (content == null) return;
+    el.innerHTML = "";
+    if (typeof content === "string") {
+      el.insertAdjacentHTML("beforeend", content);
+    } else if (content instanceof HTMLElement) {
+      el.appendChild(content);
+    } else if (content instanceof Node) {
+      el.appendChild(content.cloneNode(true));
+    }
+  }
+
+  /**
+   * Create an enumeration component
+   * @param {Object} config
+   * @param {number} config.totalElements - Number of items (1..totalElements)
+   * @param {string|HTMLElement} config.enabledIcon - Icon shown when item index <= count
+   * @param {string|HTMLElement} config.disabledIcon - Icon shown when item index > count
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'success' | 'borderless' | 'inline'
+   * @param {string} [config.size] - 'default' | 'large' | 'small'
+   * @param {string} [config.iconSize] - 'default' | 'large' | 'small' (per-item icon size)
+   * @param {number} [config.defaultValue] - Initial count (0 to totalElements)
+   * @param {boolean} [config.disabled]
+   * @param {boolean} [config.readOnly]
+   * @param {string} [config.className] - extra Tailwind/classes on container
+   * @param {Function} [config.onValueChange] - (count: number) => void
+   * @param {HTMLElement|string} [config.children] - optional content after items (node or HTML string)
+   * @returns {HTMLDivElement}
+   */
+  function create(config) {
+    var opts = config || {};
+    var totalElements = Math.max(0, parseInt(opts.totalElements, 10) || 0);
+    var enabledIcon = opts.enabledIcon != null ? opts.enabledIcon : DEFAULT_ENABLED_ICON;
+    var disabledIcon = opts.disabledIcon != null ? opts.disabledIcon : DEFAULT_DISABLED_ICON;
+    var variant = opts.variant || "default";
+    var size = opts.size || "default";
+    var iconSize = opts.iconSize || "default";
+    var defaultValue = opts.defaultValue;
+    var disabled = opts.disabled === true;
+    var readOnly = opts.readOnly === true;
+    var className = opts.className || "";
+    var onValueChange = opts.onValueChange;
+    var children = opts.children;
+
+    var wrapper = document.createElement("div");
+    wrapper.className = join(
+      BASE_CLASS,
+      VARIANTS[variant] != null ? VARIANTS[variant] : VARIANTS.default,
+      SIZES[size] != null ? SIZES[size] : SIZES.default,
+      disabled ? DISABLED_CLASS : "",
+      readOnly ? READONLY_CLASS : "",
+      className
+    );
+    wrapper.setAttribute("data-enumeration-variant", variant);
+
+    var count =
+      defaultValue != null
+        ? Math.min(totalElements, Math.max(0, parseInt(defaultValue, 10) || 0))
+        : 0;
+
+    var itemIconClass = join(
+      ITEM_BASE_CLASS,
+      ITEM_ICON_SIZES[iconSize] != null
+        ? ITEM_ICON_SIZES[iconSize]
+        : ITEM_ICON_SIZES.default
+    );
+
+    var itemElements = [];
+
+    function updateItems() {
+      for (var i = 0; i < itemElements.length; i++) {
+        var itemEl = itemElements[i];
+        var value = i + 1;
+        var active = value <= count;
+        setContent(itemEl, active ? enabledIcon : disabledIcon);
+        itemEl.setAttribute("aria-pressed", active ? "true" : "false");
+      }
+    }
+
+    for (var i = 0; i < totalElements; i++) {
+      var value = i + 1;
+      var item = document.createElement("div");
+      item.className = itemIconClass;
+      item.setAttribute("role", "button");
+      item.setAttribute("tabindex", disabled || readOnly ? "-1" : "0");
+      item.setAttribute("aria-pressed", value <= count ? "true" : "false");
+      item.setAttribute("aria-label", "Set value to " + value);
+      setContent(item, value <= count ? enabledIcon : disabledIcon);
+      itemElements.push(item);
+
+      if (!disabled && !readOnly) {
+        (function (val) {
+          item.addEventListener("click", function () {
+            var newCount = count === val ? 0 : val;
+            count = newCount;
+            updateItems();
+            if (typeof onValueChange === "function") {
+              onValueChange(newCount);
+            }
+          });
+          item.addEventListener("keydown", function (e) {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              item.click();
+            }
+          });
+        })(value);
+      }
+
+      wrapper.appendChild(item);
+    }
+
+    if (children != null) {
+      if (typeof children === "string") {
+        var childWrap = document.createElement("span");
+        childWrap.innerHTML = children;
+        wrapper.appendChild(childWrap);
+      } else if (children instanceof HTMLElement || children instanceof Node) {
+        wrapper.appendChild(children);
+      }
+    }
+
+    return wrapper;
+  }
+
+  /**
+   * Get Tailwind class string for enumeration container (for use with custom elements)
+   * @param {Object} options - { variant, size, disabled, readOnly }
+   * @returns {string}
+   */
+  function getEnumerationClasses(options) {
+    var o = options || {};
+    var variant = o.variant || "default";
+    var size = o.size || "default";
+    var disabled = o.disabled === true;
+    var readOnly = o.readOnly === true;
+    return join(
+      BASE_CLASS,
+      VARIANTS[variant] != null ? VARIANTS[variant] : VARIANTS.default,
+      SIZES[size] != null ? SIZES[size] : SIZES.default,
+      disabled ? DISABLED_CLASS : "",
+      readOnly ? READONLY_CLASS : ""
+    );
+  }
+
+  var Enumeration = {
+    create: create,
+    getEnumerationClasses: getEnumerationClasses,
+    VARIANTS: VARIANTS,
+    SIZES: SIZES,
+    ITEM_ICON_SIZES: ITEM_ICON_SIZES,
+  };
+
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = Enumeration;
+  } else {
+    global.Enumeration = Enumeration;
+  }
+})(typeof window !== "undefined" ? window : this);