@itenthusiasm/custom-elements 0.0.1

package/Combobox/types/svelte.d.ts

@@ -0,0 +1,43 @@
+import type { EventHandler } from "svelte/elements";
+import type { SelectEnhancer, ComboboxField, ComboboxListbox, ComboboxOption } from "../index.js";
+
+declare module "svelte/elements" {
+  interface SvelteHTMLElements {
+    "select-enhancer": HTMLSelectEnhancerAttributes;
+    "combobox-field": HTMLComboboxFieldAttributes<ComboboxField>;
+    "combobox-listbox": HTMLAttributes<ComboboxListbox>;
+    "combobox-option": HTMLComboboxOptionAttributes;
+  }
+
+  interface HTMLSelectEnhancerAttributes extends HTMLAttributes<SelectEnhancer> {
+    comboboxtag?: SelectEnhancer["comboboxTag"] | null;
+    listboxtag?: SelectEnhancer["listboxTag"] | null;
+    optiontag?: SelectEnhancer["optionTag"] | null;
+  }
+
+  interface HTMLComboboxFieldAttributes<T extends EventTarget> extends HTMLAttributes<T> {
+    disabled?: ComboboxField["disabled"] | null;
+    filter?: ComboboxField["filter"] | null;
+    filtermethod?: ComboboxField["filterMethod"] | null;
+    form?: string | null;
+    name?: ComboboxField["name"] | null;
+    nomatchesmessage?: ComboboxField["noMatchesMessage"] | null;
+    required?: ComboboxField["required"] | null;
+    valueis?: ComboboxField["valueIs"] | null;
+    valuemissingerror?: ComboboxField["valueMissingError"] | null;
+
+    "on:filterchange"?: EventHandler<Event, T> | null;
+    onfilterchange?: EventHandler<Event, T> | null;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type -- This is required to support ComboboxField attrs
+  interface HTMLSelectAttributes
+    extends Omit<HTMLComboboxFieldAttributes<HTMLSelectElement>, "onfilterchange" | "on:filterchange"> {}
+
+  interface HTMLComboboxOptionAttributes extends HTMLAttributes<ComboboxOption> {
+    defaultSelected?: ComboboxOption["defaultSelected"] | null;
+    disabled?: ComboboxOption["disabled"] | null;
+    selected?: ComboboxOption["selected"] | null;
+    value?: ComboboxOption["value"] | null;
+  }
+}

package/Combobox/types/vue.d.ts

@@ -0,0 +1,93 @@
+import type { HTMLAttributes, PublicProps, EmitFn } from "vue";
+import type { SelectEnhancer, ComboboxField, ComboboxListbox, ComboboxOption } from "../index.js";
+
+declare module "vue" {
+  // Helper Types
+  type Booleanish = boolean | "true" | "false";
+  type VueEmitMap<T extends GlobalEventHandlersEventMap> = EmitFn<{ [K in keyof T]: (event: T[K]) => void }>;
+  interface VueGlobalHTMLAttributes extends HTMLAttributes, Omit<PublicProps, "class" | "style"> {}
+
+  /* -------------------- Select Enhancer -------------------- */
+  interface SelectEnhancerHTMLAttributes extends VueGlobalHTMLAttributes {
+    comboboxtag?: SelectEnhancer["comboboxTag"];
+    listboxtag?: SelectEnhancer["listboxTag"];
+    optiontag?: SelectEnhancer["optionTag"];
+  }
+
+  interface SelectEnhancerVueSFCType extends SelectEnhancer {
+    /** @deprecated Only for use by Vue's templating language */
+    $props: SelectEnhancerHTMLAttributes;
+
+    /** @deprecated Only for use by Vue's templating language */
+    $emit: VueEmitMap<HTMLElementEventMap>;
+  }
+
+  /* -------------------- Combobox Field -------------------- */
+  interface ComboboxFieldHTMLAttributes extends VueGlobalHTMLAttributes {
+    disabled?: Booleanish;
+    filter?: ComboboxField["filter"];
+    filtermethod?: ComboboxField["filterMethod"];
+    form?: string;
+    name?: ComboboxField["name"];
+    nomatchesmessage?: ComboboxField["noMatchesMessage"];
+    required?: Booleanish;
+    valueis?: ComboboxField["valueIs"];
+    valuemissingerror?: ComboboxField["valueMissingError"];
+    onFilterchange?: (payload: Event) => void;
+  }
+
+  interface ComboboxFieldVueSFCType extends ComboboxField {
+    /** @deprecated Only for use by Vue's templating language */
+    $props: ComboboxFieldHTMLAttributes;
+
+    /** @deprecated Only for use by Vue's templating language */
+    $emit: VueEmitMap<ComboboxFieldEvents>;
+  }
+
+  interface ComboboxFieldEvents extends HTMLElementEventMap {
+    filterchange: Event;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type -- This is required to support ComboboxField attrs
+  interface SelectHTMLAttributes extends Omit<ComboboxFieldHTMLAttributes, "onFilterchange"> {}
+
+  /* -------------------- Combobox Listbox -------------------- */
+  interface ComboboxListboxVueSFCType extends ComboboxListbox {
+    /** @deprecated Only for use by Vue's templating language */
+    $props: VueGlobalHTMLAttributes;
+
+    /** @deprecated Only for use by Vue's templating language */
+    $emit: VueEmitMap<HTMLElementEventMap>;
+  }
+
+  /* -------------------- Combobox Option -------------------- */
+  interface ComboboxOptionHTMLAttributes extends VueGlobalHTMLAttributes {
+    defaultSelected?: ComboboxOption["defaultSelected"];
+    disabled?: ComboboxOption["disabled"];
+    selected?: ComboboxOption["selected"];
+    value?: ComboboxOption["value"];
+  }
+
+  interface ComboboxOptionVueSFCType extends ComboboxOption {
+    /** @deprecated Only for use by Vue's templating language */
+    $props: ComboboxOptionHTMLAttributes;
+
+    /** @deprecated Only for use by Vue's templating language */
+    $emit: VueEmitMap<HTMLElementEventMap>;
+  }
+
+  /* -------------------- Register Elements -------------------- */
+  interface GlobalComponents {
+    "select-enhancer": new () => SelectEnhancerVueSFCType;
+    "combobox-field": new () => ComboboxFieldVueSFCType;
+    "combobox-listbox": new () => ComboboxListboxVueSFCType;
+    "combobox-option": new () => ComboboxOptionVueSFCType;
+  }
+
+  interface IntrinsicElementAttributes {
+    "select-enhancer": SelectEnhancerHTMLAttributes;
+    "combobox-field": ComboboxFieldHTMLAttributes;
+    "combobox-listbox": VueGlobalHTMLAttributes;
+    "combobox-option": ComboboxOptionHTMLAttributes;
+  }
+}

package/LICENSE

@@ -0,0 +1,16 @@
+Copyright 2023 Isaiah Thomason
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+and associated documentation files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @itenthusiasm/custom-elements
+
+Robust, accessible, and progressively-enhanceable Web Components for common developer needs.

package/index.d.ts

@@ -0,0 +1 @@
+export * from "./Combobox/index.js";

package/index.js

@@ -0,0 +1 @@
+export * from "./Combobox/index.js";

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@itenthusiasm/custom-elements",
+  "type": "module",
+  "version": "0.0.1",
+  "sideEffects": false,
+  "license": "MIT",
+  "description": "Robust, accessible, and progressively-enhanceable Web Components for common developer needs",
+  "author": "Isaiah Thomason",
+  "homepage": "https://github.com/ITenthusiasm/custom-elements#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ITenthusiasm/custom-elements.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ITenthusiasm/custom-elements/issues"
+  },
+  "keywords": [
+    "itenthusiasm",
+    "web",
+    "components",
+    "custom",
+    "elements",
+    "ui",
+    "form",
+    "combobox",
+    "html",
+    "js",
+    "framework-agnostic",
+    "progressive-enhancement"
+  ],
+  "exports": {
+    "./*.js": "./*.js",
+    "./*.d.ts": {
+      "types": "./*.d.ts"
+    },
+    "./*": "./*/index.js"
+  }
+}

package/utils/dom.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Sets the `attribute` of an `element` to the specified `value` _if_ the element's attribute
+ * did not already have that value. Used to avoid redundantly triggering `MutationObserver`s.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @param {string} value
+ * @returns {void}
+ */
+export function setAttributeFor(element: HTMLElement, attribute: string, value: string): void;

package/utils/dom.js

@@ -0,0 +1,13 @@
+/**
+ * Sets the `attribute` of an `element` to the specified `value` _if_ the element's attribute
+ * did not already have that value. Used to avoid redundantly triggering `MutationObserver`s.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @param {string} value
+ * @returns {void}
+ */
+export function setAttributeFor(element, attribute, value) {
+  if (element.getAttribute(attribute) === value) return;
+  element.setAttribute(attribute, value);
+}