kr-elements 0.0.1-alpha.3 → 0.0.1-alpha.5

package/dist/cjs/combobox/Combobox.markup.js

@@ -30,7 +30,7 @@ class ComboboxMarkup {
         this.placeholder = this.#shadowRoot.querySelector('#placeholder');
         this.placeholder.innerText = placeholder;
         this.searchInput = this.#shadowRoot.querySelector('[part="search-input"]');
-        this.searchInput.value = this.#shadowRoot.host.getAttribute('value');
+        this.searchInput.value = this.#shadowRoot.host.getAttribute('query');
         this.searchInput.placeholder = placeholder;
         this.connected = true;
     }
@@ -170,6 +170,7 @@ class ComboboxMarkup {
   [part="options"] {
     display: flex;
     flex-direction: column;
+    justify-content: start;
     gap: 2px;
     padding-block: .5rem;
     border-radius: inherit;
@@ -202,6 +203,7 @@ class ComboboxMarkup {
   }
   
   #placeholder {
+    text-align: left;
     overflow: hidden;
   }
 

package/dist/esm/combobox/Combobox.markup.js

@@ -27,7 +27,7 @@ export class ComboboxMarkup {
         this.placeholder = this.#shadowRoot.querySelector('#placeholder');
         this.placeholder.innerText = placeholder;
         this.searchInput = this.#shadowRoot.querySelector('[part="search-input"]');
-        this.searchInput.value = this.#shadowRoot.host.getAttribute('value');
+        this.searchInput.value = this.#shadowRoot.host.getAttribute('query');
         this.searchInput.placeholder = placeholder;
         this.connected = true;
     }
@@ -167,6 +167,7 @@ export class ComboboxMarkup {
   [part="options"] {
     display: flex;
     flex-direction: column;
+    justify-content: start;
     gap: 2px;
     padding-block: .5rem;
     border-radius: inherit;
@@ -199,6 +200,7 @@ export class ComboboxMarkup {
   }
   
   #placeholder {
+    text-align: left;
     overflow: hidden;
   }
 

package/dist/types/combobox/index.d.ts

@@ -1 +1,2 @@
+/// <reference types="src/combobox/combobox.js" />
 export * from './HTML.combobox.element.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kr-elements",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.5",
   "description": "Custom elements",
   "type": "module",
   "scripts": {
@@ -25,20 +25,28 @@
     "husky": "9.1.5",
     "lint-staged": "15.2.9",
     "npm-run-all": "^4.1.5",
+    "preact": "^10.28.4",
+    "react": "^19.2.4",
+    "solid": "^0.2.1",
     "tsx": "^4.19.2",
     "typescript": "latest",
+    "vue": "^3.5.28",
     "xml-splitter": "1.2.1"
   },
   "sideEffect": false,
+  "files": [
+    "dist",
+    "src/combobox/combobox.d.ts"
+  ],
   "exports": {
     "./combobox": {
-      "types": "./dist/types/combobox/index.d.ts",
+      "types": "./dist/types/combobox/combobox.d.ts",
       "require": "./dist/cjs/combobox/index.js",
       "import": "./dist/esm/combobox/index.js"
     }
   },
   "main": "dist/cjs/combobox/index.js",
   "module": "dist/esm/combobox/index.js",
-  "types": "dist/types/combobox/index.d.ts",
+  "types": "dist/types/combobox/combobox.d.ts",
   "combobox": "dist/cjs/combobox/index.js"
 }

package/src/combobox/combobox.d.ts

@@ -0,0 +1,196 @@
+interface HTMLComboboxTagElement extends HTMLElement {}
+
+interface HTMLComboboxOptionElement extends HTMLOptionElement {
+  value: string
+  label: string
+}
+
+interface HTMLComboboxElement extends HTMLSelectElement {
+  /** The value of internal input
+   *
+   * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+  query: string;
+
+  /** List of selected options value attribute */
+  valueAsArray: string[];
+
+  /** The placeholder of internal input
+   *
+   * Internal input is visible when either "searchable" or "filterable" attribute is presented
+   *
+   * When <combo-box> is empty, this value is also shown as <combo-box> placeholder itself
+   * */
+  placeholder: string;
+
+  /** When is true, the clear-all-button is shown in the <combo-box> itself,
+   * and the clear-button is shown for each selected tag.
+   *
+   * If multiple attribute is set to "true", this is also enabled.
+   *
+   * If multiple attribute is set to "false", i.e. the <combo-box> is used as a <select>,
+   * then setting this attribute to "true" will make the clear-button of selected tag visible
+   * */
+  clearable?: boolean;
+
+  /** When is true, the internal input is shown.
+   *
+   * When user type something, available options are not filtered by this query.
+   * You have to set an "input" listener to the <combo-box> and filter options by yourself
+   *
+   * Setting both "searchable" and "filterable" make no sense, the "searchable" will have priority
+   * */
+  searchable?: boolean;
+
+  /** When is true, the internal input is shown.
+   *
+   * When user type something, available options are filtered by this query.
+   *
+   * Setting both "filterable" and "searchable" make no sense, the "searchable" will have priority
+   * */
+  filterable?: boolean;
+
+  selectedOptions: NodeListOf<HTMLComboboxOptionElement>;
+
+
+  // For standard events - let TypeScript infer correctly
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  // For your custom events
+  addEventListener<K extends keyof ComboboxEventMap>(
+    type: K,
+    listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  // Fallback
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  // Similar for removeEventListener
+  removeEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | EventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof ComboboxEventMap>(
+    type: K,
+    listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any,
+    options?: boolean | EventListenerOptions
+  ): void;
+
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions
+  ): void;
+
+
+  onchange: ((this: HTMLComboboxElement, ev: ComboboxEvent) => any) | null;
+  oninput: ((this: HTMLComboboxElement, ev: ComboboxInputEvent) => any) | null;
+  oninvalid: ((this: HTMLComboboxElement, ev: ComboboxEvent) => any) | null;
+  // onselect: ((this: HTMLComboboxElement, ev: Event) => any) | null;
+}
+
+interface ComboboxEvent extends Event {
+  readonly target: HTMLComboboxElement;
+  readonly currentTarget: HTMLComboboxElement;
+}
+
+interface ComboboxInputEvent extends InputEvent {
+  readonly target: HTMLComboboxElement;
+  readonly currentTarget: HTMLComboboxElement;
+}
+
+interface ComboboxFocusEvent extends FocusEvent {
+  readonly target: HTMLComboboxElement;
+}
+
+interface ComboboxEventMap extends HTMLElementEventMap {
+  "change": ComboboxEvent;
+  "blur": ComboboxFocusEvent;
+  "focus": ComboboxFocusEvent;
+  "focusin": ComboboxFocusEvent;
+  "focusout": ComboboxFocusEvent;
+  "input": ComboboxInputEvent;
+  "invalid": ComboboxEvent;
+  // "select": ComboboxEvent;
+  "selectionchange": ComboboxEvent;
+  "selectstart": ComboboxEvent;
+}
+
+// Add to tag name map
+declare global {
+  interface HTMLElementTagNameMap {
+    'combo-box': HTMLComboboxElement;
+    'box-option': HTMLComboboxOptionElement;
+    'box-tag': HTMLComboboxTagElement;
+  }
+}
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    'combo-box': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxElement>, HTMLComboboxElement> & {
+      /** The value of internal input
+       *
+       * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+      value?: string;
+
+      /** The value of internal input
+       *
+       * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+      query?: string;
+
+      /** When is true, the internal input is shown.
+       *
+       * When user type something, available options are filtered by this query.
+       *
+       * Setting both "filterable" and "searchable" make no sense, the "searchable" will have priority
+       * */
+      filterable?: boolean;
+
+      /** When is true, the internal input is shown.
+       *
+       * When user type something, available options are not filtered by this query.
+       * You have to set an "input" listener to the <combo-box> and filter options by yourself
+       *
+       * Setting both "searchable" and "filterable" make no sense, the "searchable" will have priority
+       * */
+      searchable?: boolean;
+
+      /** When is true, the clear-all-button is shown in the <combo-box> itself,
+       * and the clear-button is shown for each selected tag.
+       *
+       * If multiple attribute is set to "true", this is also enabled.
+       *
+       * If multiple attribute is set to "false", i.e. the <combo-box> is used as a <select>,
+       * then setting this attribute to "true" will make the clear-button of selected tag visible
+       * */
+      clearable?: boolean;
+
+      /** The placeholder of internal input
+       *
+       * Internal input is visible when either "searchable" or "filterable" attribute is presented
+       *
+       * When <combo-box> is empty, this value is also shown as <combo-box> placeholder itself
+       * */
+      placeholder?: string;
+
+
+      multiple?: boolean
+
+      // Events
+      onChange?: (event: React.SyntheticEvent<HTMLComboboxElement>) => void;
+      onInput?: (event: React.FormEvent<HTMLComboboxElement>) => void;
+      onInvalid?: (event: React.FormEvent<HTMLComboboxElement>) => void;
+
+    };
+  }
+}