npm - @exmg/exm-search - Versions diffs - 1.0.0 - Mend

@exmg/exm-search 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md +60 -0
package/index.d.ts +3 -0
package/index.js +4 -0
package/package.json +44 -0
package/src/exm-search-base.d.ts +21 -0
package/src/exm-search-base.js +117 -0
package/src/exm-search.d.ts +10 -0
package/src/exm-search.js +13 -0
package/src/styles/exm-search-css.d.ts +2 -0
package/src/styles/exm-search-css.js +4 -0
package/src/styles/exm-search.scss +179 -0

package/README.md ADDED Viewed

@@ -0,0 +1,60 @@
+# `<exm-search>` [![Published on npm](https://img.shields.io/npm/v/@exmg/exm-search.svg)](https://www.npmjs.com/package/@exmg/exm-search)
+# exm-search
+Exmg search provides an search input in material 3 style
+## Installation
+```sh
+npm install @exmg/exm-search
+```
+## Example Usage
+```html
+<exm-search placeHolder="Filter table.." @search-value-change="${() => console.log('update')}"></exm-search>
+```
+## API
+### Properties/Attributes
+| Name          | Type      | Default  | Description                                     |
+| ------------- | --------- | -------- | ----------------------------------------------- |
+| `bubbles`     | `boolean` | _false_  | Whether or not the change events need to bubble |
+| `placeHolder` | `string`  | `Search` | Default value for placeholder                   |
+## Styles
+| Custom property                       | Description            | Default                                      |
+| ------------------------------------- | ---------------------- | -------------------------------------------- |
+| `--exm-search-outline-color`          | outline color          | `--md-outlined-field-hover-outline-width`;   |
+| `--exm-search-outline-width`          | outline width          | `1px`;                                       |
+| `--exm-search-container-shape`        | container shape        | `4px`;                                       |
+| `--exm-search-focus-input-text-color` | focus input text color | `--md-sys-color-on-surface`;                 |
+| `--exm-search-focus-label-text-color` | focus label text color | `--md-sys-color-primary`;                    |
+| `--exm-search-focus-icon-color`       | focus icon color       | `--md-sys-color-on-surface-variant`;         |
+| `--exm-search-focus-outline-color`    | focus outline color    | `--md-sys-color-primary`;                    |
+| `--exm-search-focus-outline-width`    | focus outline width    | `1px`;                                       |
+| `--exm-search-hover-input-text-color` | hover input text color | `--md-sys-color-on-surface`;                 |
+| `--exm-search-hover-label-text-color` | hover label text color | `--md-sys-color-on-surface`;                 |
+| `--exm-search-hover-outline-color`    | hover outline color    | `--md-sys-color-on-surface`                  |
+| `--exm-search-input-text-color`       | input text color       | `--md-sys-color-on-surface`;                 |
+| `--exm-search-input-text-font`        | input text font        | `--md-sys-typescale-body-large-font`;        |
+| `--exm-search-input-text-line-height` | input text line height | `--md-sys-typescale-body-large-line-height`; |
+| `--exm-search-input-text-size`        | input text size        | `--md-sys-typescale-body-large-size`;        |
+| `--exm-search-input-text-weight`      | input text weight      | `--md-sys-typescale-body-large-weight`;      |
+| `--exm-search-label-text-color`       | label text color       | `md-sys-color-on-surface-variant`;           |
+| `--exm-search-label-text-font`        | label text font        | `--md-sys-typescale-body-large-font`;        |
+| `--exm-search-label-text-line-height` | label line height      | `--md-sys-typescale-body-large-line-height`; |
+| `--exm-search-label-text-size`        | label text size        | `--md-sys-typescale-body-large-size`;        |
+| `--exm-search-label-text-weight`      | label weight           | `--md-sys-typescale-body-large-weight`;      |
+| `--exm-search-icon-color`             | icon color             | `--md-sys-color-on-surface-variant`;         |
+| `--exm-search-icon-size`              | icon size              | `24px`;                                      |
+| `--exm-search-outline-color`          | outline color          | `--md-sys-color-outline`;                    |
+| `--exm-search-outline-width`          | outline color width    | `1px`;                                       |
+## Additional references
+- [Demo](https://exmg.github.io/exmachina-web-components/demo/?el=exm-search)

package/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { ExmgSearch } from './src/exm-search.js';
+export { ExmgSearchBase } from './src/exm-search-base.js';
+export { style as exmgSearchStyles } from './src/styles/exm-search-css.js';

package/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+export { ExmgSearch } from './src/exm-search.js';
+export { ExmgSearchBase } from './src/exm-search-base.js';
+export { style as exmgSearchStyles } from './src/styles/exm-search-css.js';
+//# sourceMappingURL=index.js.map

package/package.json ADDED Viewed

@@ -0,0 +1,44 @@
+{
+  "name": "@exmg/exm-search",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./exm-search.js": "./src/exm-search.js"
+  },
+  "dependencies": {
+    "@exmg/lit-base": "^2.0.1",
+    "@material/web": "^1.3.0",
+    "lit": "^3.0.0",
+    "tslib": "^2.6.2"
+  },
+  "devDependencies": {
+    "@exmg/lit-cli": "1.1.13"
+  },
+  "keywords": [
+    "web-components",
+    "lit",
+    "search"
+  ],
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "homepage": "https://github.com/exmg/exmachina-web-components",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:exmg/exm-web-components.git",
+    "directory": "packages/exm-search"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build:styles": "exmg-lit-cli sass -f \"./**/*.scss\""
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0907b55c89325d59902b98a64c352bf6e1fc81ff"
+}

package/src/exm-search-base.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { ExmgElement } from '@exmg/lit-base';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/focus/md-focus-ring.js';
+export declare class ExmgSearchBase extends ExmgElement {
+    bubbles: boolean;
+    _hasFocus: boolean;
+    filterValue?: string | null;
+    placeHolder: string;
+    search?: HTMLInputElement;
+    constructor();
+    protected fire<T>(eventName: string, detail?: T, bubbles?: boolean): void;
+    focus(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    _getValue(): string;
+    _notifyChange(): void;
+    _handleClear(e: CustomEvent): void;
+    _handleKeyUp(e: KeyboardEvent): void;
+    _handleInputBlur(): void;
+    updated(changedProperties: Map<string, any>): void;
+}

package/src/exm-search-base.js ADDED Viewed

@@ -0,0 +1,117 @@
+import { __decorate } from "tslib";
+import { ExmgElement } from '@exmg/lit-base';
+import { html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/focus/md-focus-ring.js';
+export class ExmgSearchBase extends ExmgElement {
+    constructor() {
+        super();
+        this.bubbles = false;
+        this._hasFocus = true;
+        this.placeHolder = 'Search';
+        // Set default tabindex to 0
+        const tabindex = this.getAttribute('tabindex');
+        this.setAttribute('tabindex', tabindex || '0');
+        // Add focus event listener to focus input
+        this.addEventListener('focus', () => {
+            this.focus();
+        });
+    }
+    fire(eventName, detail, bubbles) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            bubbles: bubbles || this.bubbles,
+            composed: true,
+            detail,
+        }));
+    }
+    focus() {
+        this._hasFocus = true;
+    }
+    render() {
+        const classMapValues = {
+            search: true,
+            hasFocus: this._hasFocus,
+        };
+        return html `
+      <div class=${classMap(classMapValues)}>
+        <div class="mode-input">
+          <md-focus-ring for="searchInput" inward></md-focus-ring>
+          <md-icon class="search">search</md-icon>
+          <input
+            id="searchInput"
+            placeholder=${this.placeHolder}
+            value=${this.filterValue ? this.filterValue : ''}
+            onfocus="let value = this.value; this.value = null; this.value = value"
+            @keyup=${this._handleKeyUp}
+            @blur=${this._handleInputBlur}
+          />
+          ${this.filterValue
+            ? html `
+                <md-icon-button class="clear" @click=${this._handleClear}><md-icon>clear</md-icon></md-icon-button>
+              `
+            : nothing}
+        </div>
+        <div class="mode-default" @click=${() => (this._hasFocus = true)}>
+          <md-icon class="search">search</md-icon>
+          <span class="interactive-content">${this._getValue()}</span>
+          ${this.filterValue
+            ? html `
+                <md-icon-button class="clear" @click=${this._handleClear}><md-icon>clear</md-icon></md-icon-button>
+              `
+            : nothing}
+        </div>
+      </div>
+    `;
+    }
+    _getValue() {
+        return this.filterValue || this.placeHolder;
+    }
+    _notifyChange() {
+        this.fire('search-value-change', { value: this.filterValue }, this.bubbles);
+    }
+    _handleClear(e) {
+        e.preventDefault();
+        this.filterValue = null;
+        if (this.search) {
+            this.search.value = '';
+        }
+        this._notifyChange();
+    }
+    _handleKeyUp(e) {
+        const input = e.target;
+        if (this.filterValue !== input.value) {
+            this.filterValue = input.value;
+            this._notifyChange();
+        }
+        if (e.key === 'Escape') {
+            this._hasFocus = false;
+        }
+    }
+    _handleInputBlur() {
+        this._hasFocus = false;
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('_hasFocus')) {
+            // after _hasFocus changed to true, focus the input
+            if (this._hasFocus) {
+                this.shadowRoot.querySelector('#searchInput').focus();
+            }
+        }
+    }
+}
+__decorate([
+    state()
+], ExmgSearchBase.prototype, "_hasFocus", void 0);
+__decorate([
+    property({ type: String })
+], ExmgSearchBase.prototype, "filterValue", void 0);
+__decorate([
+    property({ type: String })
+], ExmgSearchBase.prototype, "placeHolder", void 0);
+__decorate([
+    query('#searchInput')
+], ExmgSearchBase.prototype, "search", void 0);
+//# sourceMappingURL=exm-search-base.js.map

package/src/exm-search.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import '@material/web/progress/circular-progress.js';
+import { ExmgSearchBase } from './exm-search-base.js';
+export declare class ExmgSearch extends ExmgSearchBase {
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-search': ExmgSearch;
+    }
+}

package/src/exm-search.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators/custom-element.js';
+import '@material/web/progress/circular-progress.js';
+import { ExmgSearchBase } from './exm-search-base.js';
+import { style } from './styles/exm-search-css.js';
+let ExmgSearch = class ExmgSearch extends ExmgSearchBase {
+};
+ExmgSearch.styles = [style];
+ExmgSearch = __decorate([
+    customElement('exm-search')
+], ExmgSearch);
+export { ExmgSearch };
+//# sourceMappingURL=exm-search.js.map

package/src/styles/exm-search-css.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare const style: import("lit").CSSResult;
2	+ export default style;

package/src/styles/exm-search-css.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `:host{display:block;--_hover-outline-color: var(--exm-search-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-width: var(--exm-search-outline-width, 1px);--_outline-color: var(--exm-search-outline-color, var(--md-outlined-field-hover-outline-width, 1px));--_container-shape: var(--exm-search-container-shape, 4px);--_focus-input-text-color: var(--exm-search-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--exm-search-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-icon-color: var(--exm-search-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--exm-search-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--exm-search-focus-outline-width, 1px);--_hover-input-text-color: var(--exm-search-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--exm-search-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-icon-color: var(--exm-search-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--exm-search-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_input-text-color: var(--exm-search-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_input-text-font: var( --exm-search-input-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)) );--_input-text-line-height: var( --exm-search-input-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem) );--_input-text-size: var(--exm-search-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_input-text-weight: var( --exm-search-input-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)) );--_label-text-color: var(--exm-search-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var( --exm-search-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)) );--_label-text-line-height: var( --exm-search-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem) );--_label-text-size: var(--exm-search-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var( --exm-search-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)) );--_icon-color: var(--exm-search-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_icon-size: var(--exm-search-icon-size, 24px);--_outline-color: var(--exm-search-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--exm-search-outline-width, 1px);--md-focus-ring-shape: var(--_container-shape);color:var(--_label-text-color);background-color:var(--md-sys-color-surface-container-low);border-radius:var(--_container-shape);border-width:var(--_outline-width);border-color:var(--_outline-color);border-style:solid}:host(:hover){border-color:var(--_hover-outline-color);color:var(--_hover-label-text-color)}:host(:focus){border-color:var(--_focus-outline-color);color:var(--_focus-label-text-color);border-width:var(--_focus-outline-width)}:host>div{display:flex;flex-direction:row;justify-content:center;align-items:center;height:48px}h2{max-width:936px;width:100%;margin:20px auto}input{width:100%;caret-color:var(--md-sys-color-on-surface);color:var(--md-sys-color-on-surface)}:host(:hover) input{color:var(--_hover-input-text-color)}:host(:focus) input{color:var(--_focus-input-text-color)}md-icon{fill:var(--_icon-color)}md-icon.search{margin:0 .5rem 0 1rem}:host(:hover) md-icon{fill:var(--_hover-icon-color)}:host(:focus) md-icon{fill:var(--_focus-icon-color)}md-icon-button.clear{margin-right:.5rem;min-width:40px}:host>div>svg{margin-right:10px}span.interactive-content{white-space:nowrap;overflow:hidden;font-size:var(--_label-text-size);text-overflow:ellipsis;letter-spacing:.005em;box-sizing:border-box;line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);cursor:text;flex:1}.search{display:absolute;background:none}.search>div{width:100%;position:relative;align-items:center}.search input{font-size:var(--_label-text-size);height:inherit;padding:2px;border:0px;width:100%;letter-spacing:.005em;line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);outline:none;background:none;box-sizing:border-box}.mode-default{display:flex}.mode-input{display:none;height:inherit}.search.hasFocus .mode-default{display:none}.search.hasFocus .mode-input{display:flex}`;
+export default style;
+//# sourceMappingURL=exm-search-css.js.map

package/src/styles/exm-search.scss ADDED Viewed

@@ -0,0 +1,179 @@
+:host {
+  display: block;
+  --_hover-outline-color: var(--exm-search-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));
+  --_outline-width: var(--exm-search-outline-width, 1px);
+  --_outline-color: var(--exm-search-outline-color, var(--md-outlined-field-hover-outline-width, 1px));
+  --_container-shape: var(--exm-search-container-shape, 4px);
+  --_focus-input-text-color: var(--exm-search-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));
+  --_focus-label-text-color: var(--exm-search-focus-label-text-color, var(--md-sys-color-primary, #6750a4));
+  --_focus-icon-color: var(--exm-search-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
+  --_focus-outline-color: var(--exm-search-focus-outline-color, var(--md-sys-color-primary, #6750a4));
+  --_focus-outline-width: var(--exm-search-focus-outline-width, 1px);
+  --_hover-input-text-color: var(--exm-search-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));
+  --_hover-label-text-color: var(--exm-search-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));
+  --_hover-icon-color: var(--exm-search-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
+  --_hover-outline-color: var(--exm-search-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));
+  --_input-text-color: var(--exm-search-input-text-color, var(--md-sys-color-on-surface, #1d1b20));
+  --_input-text-font: var(
+    --exm-search-input-text-font,
+    var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto))
+  );
+  --_input-text-line-height: var(
+    --exm-search-input-text-line-height,
+    var(--md-sys-typescale-body-large-line-height, 1.5rem)
+  );
+  --_input-text-size: var(--exm-search-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));
+  --_input-text-weight: var(
+    --exm-search-input-text-weight,
+    var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400))
+  );
+  --_label-text-color: var(--exm-search-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));
+  --_label-text-font: var(
+    --exm-search-label-text-font,
+    var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto))
+  );
+  --_label-text-line-height: var(
+    --exm-search-label-text-line-height,
+    var(--md-sys-typescale-body-large-line-height, 1.5rem)
+  );
+  --_label-text-size: var(--exm-search-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));
+  --_label-text-weight: var(
+    --exm-search-label-text-weight,
+    var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400))
+  );
+  --_icon-color: var(--exm-search-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
+  --_icon-size: var(--exm-search-icon-size, 24px);
+  --_outline-color: var(--exm-search-outline-color, var(--md-sys-color-outline, #79747e));
+  --_outline-width: var(--exm-search-outline-width, 1px);
+  --md-focus-ring-shape: var(--_container-shape);
+  color: var(--_label-text-color);
+  background-color: var(--md-sys-color-surface-container-low);
+  border-radius: var(--_container-shape);
+  border-width: var(--_outline-width);
+  border-color: var(--_outline-color);
+  border-style: solid;
+}
+:host(:hover) {
+  border-color: var(--_hover-outline-color);
+  color: var(--_hover-label-text-color);
+}
+:host(:focus) {
+  border-color: var(--_focus-outline-color);
+  color: var(--_focus-label-text-color);
+  border-width: var(--_focus-outline-width);
+}
+:host > div {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 48px;
+}
+h2 {
+  max-width: 936px;
+  width: 100%;
+  margin: 20px auto;
+}
+input {
+  width: 100%;
+  caret-color: var(--md-sys-color-on-surface);
+  color: var(--md-sys-color-on-surface);
+}
+:host(:hover) input {
+  color: var(--_hover-input-text-color);
+}
+:host(:focus) input {
+  color: var(--_focus-input-text-color);
+}
+md-icon {
+  fill: var(--_icon-color);
+}
+md-icon.search {
+  margin: 0 0.5rem 0 1rem;
+}
+:host(:hover) md-icon {
+  fill: var(--_hover-icon-color);
+}
+:host(:focus) md-icon {
+  fill: var(--_focus-icon-color);
+}
+md-icon-button.clear {
+  margin-right: 0.5rem;
+  min-width: 40px;
+}
+:host > div > svg {
+  margin-right: 10px;
+}
+span.interactive-content {
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: var(--_label-text-size);
+  text-overflow: ellipsis;
+  letter-spacing: 0.005em;
+  box-sizing: border-box;
+  line-height: var(--_label-text-line-height);
+  font-weight: var(--_label-text-weight);
+  cursor: text;
+  flex: 1;
+}
+.search {
+  display: absolute;
+  background: none;
+}
+.search > div {
+  width: 100%;
+  position: relative;
+  align-items: center;
+}
+.search input {
+  font-size: var(--_label-text-size);
+  height: inherit;
+  padding: 2px;
+  border: 0px;
+  width: 100%;
+  letter-spacing: 0.005em;
+  line-height: var(--_label-text-line-height);
+  font-weight: var(--_label-text-weight);
+  outline: none;
+  background: none;
+  box-sizing: border-box;
+}
+.mode-default {
+  display: flex;
+}
+.mode-input {
+  display: none;
+  height: inherit;
+}
+.search.hasFocus {
+  .mode-default {
+    display: none;
+  }
+  .mode-input {
+    display: flex;
+  }
+}