@peektravel/app-utilities 0.5.2 → 0.5.4

package/dist/ui/index.d.cts

@@ -858,7 +858,9 @@ interface OdyCheckboxOption {
  * indeterminate when some are, and toggling it selects/clears every child.
  *
  * Attributes:
- * - `options` — JSON array, e.g. `options='[{"label":"A","value":"a"}]'`.
+ * - `options` — JSON array, e.g. `options='[{"label":"A","value":"a"}]'`. Also
+ *   a settable JS property ({@link options}): `el.options = [...]` mirrors
+ *   `<ody-dropdown-*>` and writes the JSON attribute.
  * - `value` — comma-separated selected values (also a JS array property,
  *   {@link value}).
  * - `select-all-label` — when present, renders the parent select-all row.
@@ -875,6 +877,13 @@ declare class OdyCheckboxGroup extends OdyElement {
     set value(next: string[]);
     /** Parsed `options`; malformed JSON yields an empty list. */
     get options(): OdyCheckboxOption[];
+    /**
+     * Accepts an array of `{ label, value }` and stores it as the JSON `options`
+     * attribute. Mirrors `<ody-dropdown-*>` so `el.options = [...]` works across
+     * the data-driven elements. `options` is observed, so this triggers a
+     * re-render via `attributeChangedCallback`.
+     */
+    set options(next: OdyCheckboxOption[]);
     protected render(): void;
 }
 

package/dist/ui/index.d.ts

@@ -858,7 +858,9 @@ interface OdyCheckboxOption {
  * indeterminate when some are, and toggling it selects/clears every child.
  *
  * Attributes:
- * - `options` — JSON array, e.g. `options='[{"label":"A","value":"a"}]'`.
+ * - `options` — JSON array, e.g. `options='[{"label":"A","value":"a"}]'`. Also
+ *   a settable JS property ({@link options}): `el.options = [...]` mirrors
+ *   `<ody-dropdown-*>` and writes the JSON attribute.
  * - `value` — comma-separated selected values (also a JS array property,
  *   {@link value}).
  * - `select-all-label` — when present, renders the parent select-all row.
@@ -875,6 +877,13 @@ declare class OdyCheckboxGroup extends OdyElement {
     set value(next: string[]);
     /** Parsed `options`; malformed JSON yields an empty list. */
     get options(): OdyCheckboxOption[];
+    /**
+     * Accepts an array of `{ label, value }` and stores it as the JSON `options`
+     * attribute. Mirrors `<ody-dropdown-*>` so `el.options = [...]` works across
+     * the data-driven elements. `options` is observed, so this triggers a
+     * re-render via `attributeChangedCallback`.
+     */
+    set options(next: OdyCheckboxOption[]);
     protected render(): void;
 }
 

package/dist/ui/index.js

@@ -160,9 +160,43 @@ function classes(...parts) {
 function reflectControlValue(control, value) {
   if (control && control.value !== value) control.value = value;
 }
+function attrNameFor(propName) {
+  return propName.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function reflectToAttribute(el, attr, value) {
+  if (value === null || value === void 0 || value === false) {
+    el.removeAttribute(attr);
+  } else if (value === true) {
+    el.setAttribute(attr, "");
+  } else if (typeof value === "object") {
+    el.setAttribute(attr, JSON.stringify(value));
+  } else {
+    el.setAttribute(attr, String(value));
+  }
+}
+function addReactSafeSetters(ctor) {
+  const observed = new Set(
+    ctor.observedAttributes ?? []
+  );
+  let proto = ctor.prototype;
+  while (proto && proto !== OdyElement.prototype && proto !== HTMLElement.prototype && proto !== Object.prototype) {
+    for (const [name, desc] of Object.entries(Object.getOwnPropertyDescriptors(proto))) {
+      if (typeof desc.get !== "function" || desc.set) continue;
+      const attr = attrNameFor(name);
+      const set = observed.has(attr) ? function reflectingSetter(value) {
+        reflectToAttribute(this, attr, value);
+      } : function ignoringSetter() {
+      };
+      Object.defineProperty(proto, name, { ...desc, set });
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+}
 function define(tag, ctor) {
   if (typeof customElements === "undefined") return;
-  if (!customElements.get(tag)) customElements.define(tag, ctor);
+  if (customElements.get(tag)) return;
+  addReactSafeSetters(ctor);
+  customElements.define(tag, ctor);
 }
 
 // src/ui/icons-data.ts
@@ -1958,6 +1992,15 @@ var OdyCheckboxGroup = class extends OdyElement {
   get options() {
     return parseOptions2(this.attr("options"));
   }
+  /**
+   * Accepts an array of `{ label, value }` and stores it as the JSON `options`
+   * attribute. Mirrors `<ody-dropdown-*>` so `el.options = [...]` works across
+   * the data-driven elements. `options` is observed, so this triggers a
+   * re-render via `attributeChangedCallback`.
+   */
+  set options(next) {
+    this.setAttribute("options", JSON.stringify(Array.isArray(next) ? next : []));
+  }
   render() {
     const size = this.attr("size", "small");
     const isDisabled = this.flag("disabled");