eck-autocomplete - npm Package Compare versions

Comparing version 0.0.11 to 0.1.0

eck-autocomplete-option-component/eck-autocomplete-option-component.d.ts

 import { BaseComponent } from '../utils/baseComponent';
 import type { CustomElement } from '../utils/custom-element';
 export interface EckAutocompleteOptionSelectEvent {
+    /**
+     * Optionally provided by the user via the `value` property.
+     */
     value: unknown;
+    /**
+     * Either the label that the user optionally provided via the `label` attribute
+     * or otherwise the `innerHTML` of this option.
+     */
     label: string;
@@ -6,0 +13,0 @@ }

min/eck-autocomplete-option-component/eck-autocomplete-option-component.js

@@ -1,3 +0,3 @@
-var s="<slot></slot>";var l=`
-:host{display:block;box-sizing:border-box;padding:5px;color:#000}:host(:hover),:host([highlighted]){background-color:#b3e5fc;cursor:pointer}`;var o=class extends HTMLElement{injectCSS(t){let e=document.createElement("template");e.innerHTML=`<style>${t}</style>`,this.shadowRoot.appendChild(e.content.cloneNode(!0))}};var i=document.createElement("template");i.innerHTML=`<style>${l}</style>${s}`;var c=class extends o{value;t;static get observedAttributes(){return["label"]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(i.content.cloneNode(!0))}attributeChangedCallback(t,e,n){t==="label"&&(this.t=n||void 0)}connectedCallback(){this.shadowRoot.host.addEventListener("mousedown",t=>{t.preventDefault()}),this.shadowRoot.host.addEventListener("click",()=>{this.fireSelectionEvent()})}highlight(t,e){this.shadowRoot.host.toggleAttribute("highlighted",t),t&&this.shadowRoot.dispatchEvent(new CustomEvent("eck-autocomplete-option-highlighted",{composed:!0,detail:{value:this.value,label:this.e(),o:e}}))}fireSelectionEvent(){this.shadowRoot.dispatchEvent(new CustomEvent("eck-autocomplete-option-selected",{composed:!0,bubbles:!0,detail:{value:this.value,label:this.e()}}))}e(){return this.t!==void 0?this.t:this.shadowRoot.host.innerHTML}};export{c as EckAutocompleteOption};
+var s="<slot></slot>";var i=`
+:host{display:block;box-sizing:border-box;padding:5px;color:#000}:host(:hover),:host([highlighted]){background-color:#b3e5fc;cursor:pointer}`;var o=class extends HTMLElement{injectCSS(t){let e=document.createElement("template");e.innerHTML=`<style>${t}</style>`,this.shadowRoot.appendChild(e.content.cloneNode(!0))}};var l=document.createElement("template");l.innerHTML=`<style>${i}</style>${s}`;var c=class extends o{value;t;static get observedAttributes(){return["label"]}constructor(){super();this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(l.content.cloneNode(!0))}attributeChangedCallback(t,e,n){t==="label"&&(this.t=n||void 0)}connectedCallback(){this.shadowRoot.host.addEventListener("mousedown",t=>{t.preventDefault()}),this.shadowRoot.host.addEventListener("click",()=>{this.fireSelectionEvent()})}highlight(t,e){this.shadowRoot.host.toggleAttribute("highlighted",t),t&&this.shadowRoot.dispatchEvent(new CustomEvent("eck-autocomplete-option-highlighted",{composed:!0,detail:{value:this.value,label:this.e(),o:e}}))}fireSelectionEvent(){this.shadowRoot.dispatchEvent(new CustomEvent("eck-autocomplete-option-selected",{composed:!0,bubbles:!0,detail:{value:this.value,label:this.e()}}))}e(){return this.t!==void 0?this.t:this.shadowRoot.host.innerHTML}};export{c as EckAutocompleteOption};
 //# sourceMappingURL=eck-autocomplete-option-component.js.map

package.json

 {
   "name": "eck-autocomplete",
-  "version": "0.0.11",
+  "version": "0.1.0",
   "description": "Autocomplete web component. Suggests options for an input.",
@@ -5,0 +5,0 @@ "author": "Leon Eck",

README.md

@@ -11,4 +11,27 @@ <h1 align="center">
 
-## Usage
+## Get started
 
+### Install
+
+#### CDN
+
+```html
+<script
+  type="module"
+  src="https://unpkg.com/eck-autocomplete@0.1.0/min/eck-autocomplete.js"
+></script>
+```
+
+#### Package and import
+
+```
+npm i --save-exact eck-autocomplete
+```
+
+Importing the entry point will automatically register the custom elements.
+
+```
+import 'eck-autocomplete';
+```
+
 ### Recommended global CSS
@@ -27,21 +50,82 @@
 
-### CDN
+### Example HTML
 
 ```html
-<script
-  type="module"
-  src="https://unpkg.com/eck-autocomplete@0.0.11/min/eck-autocomplete.js"
-></script>
+<input id="input1" type="text" />
+<eck-autocomplete connected-to-id="input1">
+  <eck-autocomplete-option>One</eck-autocomplete-option>
+  <eck-autocomplete-option>Two</eck-autocomplete-option>
+  <eck-autocomplete-option>Three</eck-autocomplete-option>
+</eck-autocomplete>
 ```
 
-### Package and import
+## API
 
-```
-npm i eck-autocomplete --save-exact
-```
+### `eck-autocomplete`
 
-Import the entry point that will automatically register the custom elements if they aren't already registered.
+#### Attributes
 
+| Name                        | Type (coerced) | Description                                                                                                                                                                                   | Default |
+| --------------------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `connected-to-id`           | `string`       | ID of the HTML input that the autocomplete panel should be attached to. In case you can't provide an ID you can use the method `setInputRef` documented in the methods section of these docs. |         |
+| `highlight-first-option`    | `boolean`      | Whether the first option in the panel should be highlighted when it is opened.                                                                                                                | `false` |
+| `select-highlighted-option` | `boolean`      | Whether an options value should be transfered to the input when highlighted. When pressing ESC the value won't be saved and the input resets to the original value.                           | `true`  |
+
+#### Methods
+
+| Signature                                      | Description                                                                                                                                                                                                                           |
+| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `setInputRef(element: HTMLInputElement): void` | Can be used to programmatically set the reference to an HTML input element to which the autocomplete panel will attach to.                                                                                                            |
+| `injectCSS(css: string): void`                 | The component is encapsulated in a Shadow DOM. To style it you should use the provided custom properties. In case you absolutely have to override some CSS that can't be reached from the outside you can inject it with this method. |
+
+#### Custom Properties
+
+**TBD**
+
+### `eck-autocomplete-option`
+
+#### Attributes
+
+| Name    | Type (coerced) | Description                                                                                                                                        | Default     |
+| ------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `label` | `string`       | **Optional** string that is used to display the option in contexts that only allow strings (e.g. inputs). If not provided the `innerHtml` is used. | `undefined` |
+
+#### Properties
+
+| Name    | Type (coerced) | Description                                      | Default |
+| ------- | -------------- | ------------------------------------------------ | ------- |
+| `value` | `unknown`      | **Optional** data that is attached to an option. |         |
+
+#### Methods
+
+| Signature                      | Description                                                                                                                                                                                                                           |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `injectCSS(css: string): void` | The component is encapsulated in a Shadow DOM. To style it you should use the provided custom properties. In case you absolutely have to override some CSS that can't be reached from the outside you can inject it with this method. |
+
+#### Custom Properties
+
+**TBS**
+
+#### Events
+
+| Type                               | Bubbles | Interface for `detail` value       |
+| ---------------------------------- | ------- | ---------------------------------- |
+| `eck-autocomplete-option-selected` | `true`  | `EckAutocompleteOptionSelectEvent` |
+
+#### Interfaces
+
+##### `EckAutocompleteOptionSelectEvent`
+
+```typescript
+export interface EckAutocompleteOptionSelectEvent {
+  /**
+   * Optionally provided by the user via the `value` property.
+   */
+  value: unknown;
+  /**
+   * Either the label that the user optionally provided via the `label` attribute
+   * or otherwise the `innerHTML` of this option.
+   */
+  label: string;
+}
 ```
-import 'eck-autocomplete';
-```

utils/baseComponent.d.ts

 export declare abstract class BaseComponent extends HTMLElement {
+    /**
+     * The component is encapsulated in a Shadow DOM.
+     * To style it you should use the provided custom properties.
+     * In case you absolutely have to override some CSS that can't be reached
+     * from the outside you can inject it with this method.
+     * @param css
+     */
     injectCSS(css: string): void;
 }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

298526

increased by2.89%

Lines of code

905

increased by1.57%

Number of lines in readme file

130

increased by182.61%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes