@fluixi/web-components 0.0.0-stage → 1.0.0-alpha.100

package/dist/form.cjs

@@ -0,0 +1,145 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/form.ts
+var form_exports = {};
+__export(form_exports, {
+  FormAssociated: () => FormAssociated
+});
+module.exports = __toCommonJS(form_exports);
+var import_signal = require("@fluixi/reactive/signal");
+function FormAssociated(Base) {
+  var _formDisabled, _flags, _message, _anchor, _custom, _FormAssociatedElement_instances, applyValidity_fn;
+  const _FormAssociatedElement = class _FormAssociatedElement extends Base {
+    constructor() {
+      super(...arguments);
+      __privateAdd(this, _FormAssociatedElement_instances);
+      __privateAdd(this, _formDisabled, (0, import_signal.signal)(false));
+      /** The last validity the subclass set, kept so a custom message can be laid over it and lifted. */
+      __privateAdd(this, _flags, {});
+      __privateAdd(this, _message, "");
+      __privateAdd(this, _anchor);
+      __privateAdd(this, _custom, "");
+    }
+    /** The form this control belongs to, like `input.form`. */
+    get form() {
+      return this.internals.form;
+    }
+    /** The `<label>`s that name this control. */
+    get labels() {
+      return this.internals.labels;
+    }
+    /** The key the value is submitted under: the `name` attribute, as on an input. */
+    get name() {
+      return this.getAttribute("name") ?? "";
+    }
+    set name(value) {
+      this.setAttribute("name", value);
+    }
+    get validity() {
+      return this.internals.validity;
+    }
+    get validationMessage() {
+      return this.internals.validationMessage;
+    }
+    get willValidate() {
+      return this.internals.willValidate;
+    }
+    checkValidity() {
+      return this.internals.checkValidity();
+    }
+    reportValidity() {
+      return this.internals.reportValidity();
+    }
+    /** As on an input: a non-empty message makes the control invalid until it is cleared. */
+    setCustomValidity(message) {
+      __privateSet(this, _custom, message);
+      __privateMethod(this, _FormAssociatedElement_instances, applyValidity_fn).call(this);
+    }
+    /**
+     * Whether a disabled `<fieldset>` or form covers this control. Reactive: read it in a
+     * binding and the control follows. A disabled control is also left out of `FormData`.
+     */
+    get formDisabled() {
+      return __privateGet(this, _formDisabled).call(this);
+    }
+    /** What the form submits for this control. `null` submits nothing. */
+    setFormValue(value, state) {
+      this.internals.setFormValue(value, state);
+    }
+    /**
+     * The control's own validity: `{ valueMissing: true }` and a message, or `{}` when valid.
+     * `anchor` is the inner element the browser points its bubble at.
+     */
+    setValidity(flags, message = "", anchor) {
+      __privateSet(this, _flags, flags);
+      __privateSet(this, _message, message);
+      __privateSet(this, _anchor, anchor);
+      __privateMethod(this, _FormAssociatedElement_instances, applyValidity_fn).call(this);
+    }
+    /** Put the value back to what the page wrote. Called when the form resets. */
+    resetValue() {
+    }
+    /** Take back a value the browser saved, on back/forward navigation or autofill. */
+    restoreValue(_state, _mode) {
+    }
+    formAssociatedCallback(form) {
+      up(_FormAssociatedElement).formAssociatedCallback?.call(this, form);
+    }
+    formDisabledCallback(disabled) {
+      up(_FormAssociatedElement).formDisabledCallback?.call(this, disabled);
+      __privateGet(this, _formDisabled).set(disabled);
+    }
+    formResetCallback() {
+      up(_FormAssociatedElement).formResetCallback?.call(this);
+      this.setCustomValidity("");
+      this.resetValue();
+    }
+    formStateRestoreCallback(state, mode) {
+      up(_FormAssociatedElement).formStateRestoreCallback?.call(this, state, mode);
+      this.restoreValue(state, mode);
+    }
+  };
+  _formDisabled = new WeakMap();
+  _flags = new WeakMap();
+  _message = new WeakMap();
+  _anchor = new WeakMap();
+  _custom = new WeakMap();
+  _FormAssociatedElement_instances = new WeakSet();
+  applyValidity_fn = function() {
+    if (typeof this.internals.setValidity !== "function") return;
+    if (__privateGet(this, _custom)) this.internals.setValidity({ ...__privateGet(this, _flags), customError: true }, __privateGet(this, _custom), __privateGet(this, _anchor));
+    else if (Object.values(__privateGet(this, _flags)).some(Boolean)) this.internals.setValidity(__privateGet(this, _flags), __privateGet(this, _message), __privateGet(this, _anchor));
+    else this.internals.setValidity({});
+  };
+  _FormAssociatedElement.formAssociated = true;
+  let FormAssociatedElement = _FormAssociatedElement;
+  return FormAssociatedElement;
+}
+function up(cls) {
+  return Object.getPrototypeOf(cls.prototype);
+}

package/dist/form.d.ts

@@ -0,0 +1,33 @@
+import type { ElementBase } from './element.js';
+type Base = ElementBase;
+/**
+ * What `FormAssociated` adds, public and protected. Declared apart from the class because a
+ * function returning a class with protected members cannot be written to a declaration file.
+ */
+export declare abstract class FormAssociatedMembers {
+    static formAssociated: boolean;
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get name(): string;
+    set name(value: string);
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    protected get formDisabled(): boolean;
+    protected setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    protected setValidity(flags: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
+    protected resetValue(): void;
+    protected restoreValue(state: string | File | FormData | null, mode: 'restore' | 'autocomplete'): void;
+    formAssociatedCallback(form: HTMLFormElement | null): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null, mode: 'restore' | 'autocomplete'): void;
+}
+export declare function FormAssociated<B extends Base>(Base: B): B & (abstract new (...args: any[]) => FormAssociatedMembers) & {
+    formAssociated: boolean;
+};
+export {};
+//# sourceMappingURL=form.d.ts.map

package/dist/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../src/form.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,KAAK,IAAI,GAAG,WAAW,CAAC;AASxB;;;GAGG;AACH,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,qBAAqB;IACjD,MAAM,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/B,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAAC;IACnC,IAAI,MAAM,IAAI,QAAQ,CAAC;IACvB,IAAI,IAAI,IAAI,MAAM,CAAC;IACnB,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE;IACxB,IAAI,QAAQ,IAAI,aAAa,CAAC;IAC9B,IAAI,iBAAiB,IAAI,MAAM,CAAC;IAChC,IAAI,YAAY,IAAI,OAAO,CAAC;IAC5B,aAAa,IAAI,OAAO;IACxB,cAAc,IAAI,OAAO;IACzB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IACxC,SAAS,KAAK,YAAY,IAAI,OAAO,CAAC;IACtC,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,EAAE,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI;IAC7G,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,kBAAkB,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI;IAC9F,SAAS,CAAC,UAAU,IAAI,IAAI;IAC5B,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,EAAE,IAAI,EAAE,SAAS,GAAG,cAAc,GAAG,IAAI;IACtG,sBAAsB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI;IAC1D,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAC7C,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,EAAE,IAAI,EAAE,SAAS,GAAG,cAAc,GAAG,IAAI;CACzG;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,IAAI,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,qBAAqB,CAAC,GAAG;IAAE,cAAc,EAAE,OAAO,CAAA;CAAE,CAkHlJ"}

package/dist/form.js

@@ -0,0 +1,113 @@
+/**
+ * Form controls: an element that takes part in a `<form>` the way `<input>` does.
+ *
+ * `static formAssociated = true` is what the browser checks, and `ElementInternals` does the
+ * rest: the value submitted, validity, `:disabled` from a `<fieldset>`, reset and restore. This
+ * mixin puts the native control API on the element, so page code treats it like any input
+ * (`el.form`, `el.checkValidity()`, `new FormData(form)`), and gives subclasses the protected
+ * half: `setFormValue`, `setValidity`, and hooks for reset and restore.
+ */
+import { signal } from '@fluixi/reactive/signal';
+export function FormAssociated(Base) {
+    class FormAssociatedElement extends Base {
+        static formAssociated = true;
+        #formDisabled = signal(false);
+        /** The last validity the subclass set, kept so a custom message can be laid over it and lifted. */
+        #flags = {};
+        #message = '';
+        #anchor;
+        #custom = '';
+        /** The form this control belongs to, like `input.form`. */
+        get form() {
+            return this.internals.form;
+        }
+        /** The `<label>`s that name this control. */
+        get labels() {
+            return this.internals.labels;
+        }
+        /** The key the value is submitted under: the `name` attribute, as on an input. */
+        get name() {
+            return this.getAttribute('name') ?? '';
+        }
+        set name(value) {
+            this.setAttribute('name', value);
+        }
+        get validity() {
+            return this.internals.validity;
+        }
+        get validationMessage() {
+            return this.internals.validationMessage;
+        }
+        get willValidate() {
+            return this.internals.willValidate;
+        }
+        checkValidity() {
+            return this.internals.checkValidity();
+        }
+        reportValidity() {
+            return this.internals.reportValidity();
+        }
+        /** As on an input: a non-empty message makes the control invalid until it is cleared. */
+        setCustomValidity(message) {
+            this.#custom = message;
+            this.#applyValidity();
+        }
+        /**
+         * Whether a disabled `<fieldset>` or form covers this control. Reactive: read it in a
+         * binding and the control follows. A disabled control is also left out of `FormData`.
+         */
+        get formDisabled() {
+            return this.#formDisabled();
+        }
+        /** What the form submits for this control. `null` submits nothing. */
+        setFormValue(value, state) {
+            this.internals.setFormValue(value, state);
+        }
+        /**
+         * The control's own validity: `{ valueMissing: true }` and a message, or `{}` when valid.
+         * `anchor` is the inner element the browser points its bubble at.
+         */
+        setValidity(flags, message = '', anchor) {
+            this.#flags = flags;
+            this.#message = message;
+            this.#anchor = anchor;
+            this.#applyValidity();
+        }
+        /** Put the value back to what the page wrote. Called when the form resets. */
+        resetValue() { }
+        /** Take back a value the browser saved, on back/forward navigation or autofill. */
+        restoreValue(_state, _mode) { }
+        formAssociatedCallback(form) {
+            up(FormAssociatedElement).formAssociatedCallback?.call(this, form);
+        }
+        formDisabledCallback(disabled) {
+            up(FormAssociatedElement).formDisabledCallback?.call(this, disabled);
+            this.#formDisabled.set(disabled);
+        }
+        formResetCallback() {
+            up(FormAssociatedElement).formResetCallback?.call(this);
+            this.setCustomValidity('');
+            this.resetValue();
+        }
+        formStateRestoreCallback(state, mode) {
+            up(FormAssociatedElement).formStateRestoreCallback?.call(this, state, mode);
+            this.restoreValue(state, mode);
+        }
+        #applyValidity() {
+            // Not in every environment; the value still submits without it.
+            if (typeof this.internals.setValidity !== 'function')
+                return;
+            if (this.#custom)
+                this.internals.setValidity({ ...this.#flags, customError: true }, this.#custom, this.#anchor);
+            else if (Object.values(this.#flags).some(Boolean))
+                this.internals.setValidity(this.#flags, this.#message, this.#anchor);
+            else
+                this.internals.setValidity({});
+        }
+    }
+    return FormAssociatedElement;
+}
+/** The form callbacks of whatever sits above the mixin, so a mixin under it still runs. */
+function up(cls) {
+    return Object.getPrototypeOf(cls.prototype);
+}

package/dist/form.mjs

@@ -0,0 +1,125 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/form.ts
+import { signal } from "@fluixi/reactive/signal";
+function FormAssociated(Base) {
+  var _formDisabled, _flags, _message, _anchor, _custom, _FormAssociatedElement_instances, applyValidity_fn;
+  const _FormAssociatedElement = class _FormAssociatedElement extends Base {
+    constructor() {
+      super(...arguments);
+      __privateAdd(this, _FormAssociatedElement_instances);
+      __privateAdd(this, _formDisabled, signal(false));
+      /** The last validity the subclass set, kept so a custom message can be laid over it and lifted. */
+      __privateAdd(this, _flags, {});
+      __privateAdd(this, _message, "");
+      __privateAdd(this, _anchor);
+      __privateAdd(this, _custom, "");
+    }
+    /** The form this control belongs to, like `input.form`. */
+    get form() {
+      return this.internals.form;
+    }
+    /** The `<label>`s that name this control. */
+    get labels() {
+      return this.internals.labels;
+    }
+    /** The key the value is submitted under: the `name` attribute, as on an input. */
+    get name() {
+      return this.getAttribute("name") ?? "";
+    }
+    set name(value) {
+      this.setAttribute("name", value);
+    }
+    get validity() {
+      return this.internals.validity;
+    }
+    get validationMessage() {
+      return this.internals.validationMessage;
+    }
+    get willValidate() {
+      return this.internals.willValidate;
+    }
+    checkValidity() {
+      return this.internals.checkValidity();
+    }
+    reportValidity() {
+      return this.internals.reportValidity();
+    }
+    /** As on an input: a non-empty message makes the control invalid until it is cleared. */
+    setCustomValidity(message) {
+      __privateSet(this, _custom, message);
+      __privateMethod(this, _FormAssociatedElement_instances, applyValidity_fn).call(this);
+    }
+    /**
+     * Whether a disabled `<fieldset>` or form covers this control. Reactive: read it in a
+     * binding and the control follows. A disabled control is also left out of `FormData`.
+     */
+    get formDisabled() {
+      return __privateGet(this, _formDisabled).call(this);
+    }
+    /** What the form submits for this control. `null` submits nothing. */
+    setFormValue(value, state) {
+      this.internals.setFormValue(value, state);
+    }
+    /**
+     * The control's own validity: `{ valueMissing: true }` and a message, or `{}` when valid.
+     * `anchor` is the inner element the browser points its bubble at.
+     */
+    setValidity(flags, message = "", anchor) {
+      __privateSet(this, _flags, flags);
+      __privateSet(this, _message, message);
+      __privateSet(this, _anchor, anchor);
+      __privateMethod(this, _FormAssociatedElement_instances, applyValidity_fn).call(this);
+    }
+    /** Put the value back to what the page wrote. Called when the form resets. */
+    resetValue() {
+    }
+    /** Take back a value the browser saved, on back/forward navigation or autofill. */
+    restoreValue(_state, _mode) {
+    }
+    formAssociatedCallback(form) {
+      up(_FormAssociatedElement).formAssociatedCallback?.call(this, form);
+    }
+    formDisabledCallback(disabled) {
+      up(_FormAssociatedElement).formDisabledCallback?.call(this, disabled);
+      __privateGet(this, _formDisabled).set(disabled);
+    }
+    formResetCallback() {
+      up(_FormAssociatedElement).formResetCallback?.call(this);
+      this.setCustomValidity("");
+      this.resetValue();
+    }
+    formStateRestoreCallback(state, mode) {
+      up(_FormAssociatedElement).formStateRestoreCallback?.call(this, state, mode);
+      this.restoreValue(state, mode);
+    }
+  };
+  _formDisabled = new WeakMap();
+  _flags = new WeakMap();
+  _message = new WeakMap();
+  _anchor = new WeakMap();
+  _custom = new WeakMap();
+  _FormAssociatedElement_instances = new WeakSet();
+  applyValidity_fn = function() {
+    if (typeof this.internals.setValidity !== "function") return;
+    if (__privateGet(this, _custom)) this.internals.setValidity({ ...__privateGet(this, _flags), customError: true }, __privateGet(this, _custom), __privateGet(this, _anchor));
+    else if (Object.values(__privateGet(this, _flags)).some(Boolean)) this.internals.setValidity(__privateGet(this, _flags), __privateGet(this, _message), __privateGet(this, _anchor));
+    else this.internals.setValidity({});
+  };
+  _FormAssociatedElement.formAssociated = true;
+  let FormAssociatedElement = _FormAssociatedElement;
+  return FormAssociatedElement;
+}
+function up(cls) {
+  return Object.getPrototypeOf(cls.prototype);
+}
+export {
+  FormAssociated
+};