@operato/input 9.0.24 → 9.0.26
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.
- package/CHANGELOG.md +9 -0
- package/dist/src/ox-input-search.d.ts +1 -0
- package/dist/src/ox-input-search.js +5 -0
- package/dist/src/ox-input-search.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/yarn-error.log +17084 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
### [9.0.26](https://github.com/hatiolab/operato/compare/v9.0.25...v9.0.26) (2025-08-29)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* 상단 검색바 maxLength 추가 ([6284791](https://github.com/hatiolab/operato/commit/6284791a852e502a60eff716597ebeaf23b46db6))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
### [9.0.24](https://github.com/hatiolab/operato/compare/v9.0.23...v9.0.24) (2025-08-22)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -7,6 +7,7 @@ export declare class OxInputSearch extends OxFormField {
|
|
|
7
7
|
static styles: import("lit").CSSResult[];
|
|
8
8
|
placeholder?: string;
|
|
9
9
|
selectAfterChange?: boolean;
|
|
10
|
+
maxLength?: number;
|
|
10
11
|
input: HTMLInputElement;
|
|
11
12
|
render(): import("lit-html").TemplateResult<1>;
|
|
12
13
|
firstUpdated(): void;
|
|
@@ -5,6 +5,7 @@ import { __decorate } from "tslib";
|
|
|
5
5
|
import '@material/web/icon/icon.js';
|
|
6
6
|
// import debounce from 'lodash-es/debounce.js'
|
|
7
7
|
import { css, html } from 'lit';
|
|
8
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
8
9
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
9
10
|
import { OxFormField } from './ox-form-field.js';
|
|
10
11
|
let OxInputSearch = class OxInputSearch extends OxFormField {
|
|
@@ -52,6 +53,7 @@ let OxInputSearch = class OxInputSearch extends OxFormField {
|
|
|
52
53
|
type="text"
|
|
53
54
|
.value=${this.value || ''}
|
|
54
55
|
.placeholder=${this.placeholder || ''}
|
|
56
|
+
maxlength=${ifDefined(this.maxLength)}
|
|
55
57
|
@change=${(e) => {
|
|
56
58
|
e.stopPropagation();
|
|
57
59
|
this.dispatchChangeEvent(e.target.value);
|
|
@@ -108,6 +110,9 @@ __decorate([
|
|
|
108
110
|
__decorate([
|
|
109
111
|
property({ attribute: 'select-after-change', type: Boolean })
|
|
110
112
|
], OxInputSearch.prototype, "selectAfterChange", void 0);
|
|
113
|
+
__decorate([
|
|
114
|
+
property({ type: Number, attribute: 'max-length' })
|
|
115
|
+
], OxInputSearch.prototype, "maxLength", void 0);
|
|
111
116
|
__decorate([
|
|
112
117
|
query('input')
|
|
113
118
|
], OxInputSearch.prototype, "input", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-search.js","sourceRoot":"","sources":["../../src/ox-input-search.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,+CAA+C;AAC/C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;aACrC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCF;KACF,AAnCY,CAmCZ;
|
|
1
|
+
{"version":3,"file":"ox-input-search.js","sourceRoot":"","sources":["../../src/ox-input-search.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\n// import debounce from 'lodash-es/debounce.js'\nimport { css, html } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-search')\nexport class OxInputSearch extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n position: relative;\n align-items: center;\n\n color: var(--ox-input-search-color, var(--md-sys-color-on-surface-variant));\n background-color: var(--ox-input-search-background-color, var(--md-sys-color-surface-variant));\n\n --md-icon-size: 20px;\n }\n\n [type='text'] {\n flex: 1;\n color: inherit;\n background-color: transparent;\n border: 0;\n padding: var(--input-search-padding, var(--spacing-tiny));\n padding-left: 25px;\n overflow: hidden;\n }\n\n [type='text']:focus {\n outline: none;\n }\n\n md-icon {\n position: absolute;\n }\n\n input {\n width: 100%;\n }\n `\n ]\n\n @property({ type: String }) placeholder?: string\n @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n @property({ type: Number, attribute: 'max-length' }) maxLength?: number\n\n @query('input') input!: HTMLInputElement\n\n // private dispatchChangeEventDebouncer = debounce((value: string) => this.dispatchChangeEvent(value), 100)\n\n render() {\n return html`\n <md-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</md-icon>\n <input\n type=\"text\"\n .value=${this.value || ''}\n .placeholder=${this.placeholder || ''}\n maxlength=${ifDefined(this.maxLength)}\n @change=${(e: Event) => {\n e.stopPropagation()\n this.dispatchChangeEvent((e.target as HTMLInputElement).value)\n // this.dispatchChangeEventDebouncer((e.target as HTMLInputElement).value)\n }}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n if ((e.target as HTMLInputElement).value == this.value) {\n /* Even if the value has not changed, the enter key triggers a change event. */\n e.preventDefault() /* Prevent change event from occurring twice. */\n\n this.input.dispatchEvent(\n new CustomEvent('change', {\n detail: (e.target as HTMLInputElement).value\n })\n )\n }\n }\n }}\n ?disabled=${this.disabled}\n />\n `\n }\n\n firstUpdated() {\n if (this.autofocus) {\n this.input.focus()\n }\n }\n\n dispatchChangeEvent(value: string) {\n this.value = value\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: value\n })\n )\n\n if (this.selectAfterChange) {\n requestAnimationFrame(() => {\n this.input.select()\n })\n }\n }\n\n _onClickSearch(e: Event) {\n if (this._form) {\n e.stopPropagation()\n this._form.requestSubmit()\n } else {\n this.input.dispatchEvent(\n new CustomEvent('change', {\n detail: this.input.value\n })\n )\n }\n }\n}\n"]}
|