@operato/input 7.0.60 → 7.0.78
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 +18 -0
- package/dist/src/ox-input-data.d.ts +1 -3
- package/dist/src/ox-input-data.js +9 -7
- package/dist/src/ox-input-data.js.map +1 -1
- package/dist/src/ox-input-hashtags.d.ts +1 -0
- package/dist/src/ox-input-hashtags.js +23 -23
- package/dist/src/ox-input-hashtags.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/ox-input-data.ts +9 -8
- package/src/ox-input-hashtags.ts +24 -23
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
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
|
+
### [7.0.78](https://github.com/hatiolab/operato/compare/v7.0.77...v7.0.78) (2024-08-31)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* for hashtags related components ([7785990](https://github.com/hatiolab/operato/commit/77859908ff01bd858456079f545d3909b59f3521))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### [7.0.67](https://github.com/hatiolab/operato/compare/v7.0.66...v7.0.67) (2024-08-26)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* remove eval from ox-input-data ([0584304](https://github.com/hatiolab/operato/commit/05843042e24a5ddc8abea9b7819c797d5aa44c20))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
### [7.0.60](https://github.com/hatiolab/operato/compare/v7.0.59...v7.0.60) (2024-08-21)
|
|
7
25
|
|
|
8
26
|
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
-
*/
|
|
4
1
|
import { __decorate } from "tslib";
|
|
5
2
|
import './ox-input-code';
|
|
6
3
|
import { css, html } from 'lit';
|
|
@@ -8,6 +5,7 @@ import { customElement } from 'lit/decorators.js';
|
|
|
8
5
|
import { live } from 'lit/directives/live.js';
|
|
9
6
|
import { OxFormField } from './ox-form-field.js';
|
|
10
7
|
import { isEqual } from 'lodash-es';
|
|
8
|
+
import 'ses';
|
|
11
9
|
/**
|
|
12
10
|
WEB Component for code-mirror based data editor.
|
|
13
11
|
|
|
@@ -128,11 +126,14 @@ let OxInputData = class OxInputData extends OxFormField {
|
|
|
128
126
|
}
|
|
129
127
|
break;
|
|
130
128
|
case 'object':
|
|
131
|
-
|
|
129
|
+
const compartment = new Compartment();
|
|
130
|
+
value = compartment.evaluate(`(${value})`);
|
|
132
131
|
break;
|
|
133
132
|
}
|
|
134
133
|
}
|
|
135
|
-
catch (e) {
|
|
134
|
+
catch (e) {
|
|
135
|
+
console.error('Error parsing value:', e);
|
|
136
|
+
}
|
|
136
137
|
if (isEqual(this.value, value)) {
|
|
137
138
|
return;
|
|
138
139
|
}
|
|
@@ -156,12 +157,13 @@ let OxInputData = class OxInputData extends OxFormField {
|
|
|
156
157
|
}
|
|
157
158
|
break;
|
|
158
159
|
case 'object':
|
|
159
|
-
|
|
160
|
+
const compartment = new Compartment();
|
|
161
|
+
value = compartment.evaluate(`(${value})`);
|
|
160
162
|
break;
|
|
161
163
|
}
|
|
162
164
|
}
|
|
163
165
|
catch (e) {
|
|
164
|
-
console.
|
|
166
|
+
console.error('Error setting data type:', e);
|
|
165
167
|
}
|
|
166
168
|
if (isEqual(this.value, value)) {
|
|
167
169
|
this.requestUpdate();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"ox-input-data.js","sourceRoot":"","sources":["../../src/ox-input-data.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-input-code'\n\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputCode } from './ox-input-code.js'\nimport { isEqual } from 'lodash-es'\nimport 'ses'\n\n/**\nWEB Component for code-mirror based data editor.\n\nExample:\n\n <ox-input-data value=${text}>\n </ox-input-data>\n*/\n@customElement('ox-input-data')\nexport class OxInputData extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n\n div.datatype {\n display: flex;\n align-items: center;\n margin-bottom: var(--spacing-small);\n padding: var(--spacing-small);\n background-color: var(--md-sys-color-primary-container);\n border: 1px solid var(--md-sys-color-primary-fixed-dim);\n border-radius: var(--md-sys-shape-corner-small);\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-on-primary-container);\n }\n\n div.datatype md-icon {\n margin-left: auto;\n color: var(--md-sys-color-primary);\n cursor: pointer;\n }\n div.datatype label {\n margin-right: var(--spacing-small);\n }\n\n ox-input-code {\n flex: 1;\n max-width: 260px;\n overflow: auto;\n }\n `\n ]\n\n render() {\n const valueType = typeof this.value\n\n return html`\n <div class=\"datatype\">\n <input\n id=\"string\"\n type=\"radio\"\n name=\"data-type\"\n data-value=\"string\"\n .checked=${live(valueType == 'string')}\n @click=${() => this._setDataType('string')}\n ?disabled=${this.disabled}\n />\n <label for=\"string\">string</label>\n\n <input\n id=\"number\"\n type=\"radio\"\n name=\"data-type\"\n data-value=\"number\"\n .checked=${live(valueType == 'number')}\n @click=${() => this._setDataType('number')}\n ?disabled=${this.disabled}\n />\n <label for=\"number\">number</label>\n\n <input\n id=\"object\"\n type=\"radio\"\n name=\"data-type\"\n data-value=\"object\"\n .checked=${live(valueType == 'object')}\n @click=${() => this._setDataType('object')}\n ?disabled=${this.disabled}\n />\n <label for=\"object\">object</label>\n\n <md-icon @click=${() => this._clearData()} title=\"delete\">delete_forever</md-icon>\n </div>\n\n <ox-input-code\n .value=${this._getStringData(this.value)}\n language=\"text\"\n editor\n ?disabled=${this.disabled}\n @change=${(e: CustomEvent) => {\n e.stopPropagation()\n this._setDataTypeAndValue(valueType, (e.target as any).value)\n }}\n >\n </ox-input-code>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', e => {\n e.stopPropagation()\n\n const target = e.target as OxInputCode\n if (target.hasAttribute('editor')) {\n if (this.value === undefined && target.value == '') {\n return\n }\n this.value = target.value\n }\n })\n }\n\n _setDataTypeAndValue(type: string | undefined | null, value: any) {\n /* value must be a string */\n try {\n switch (type) {\n case 'number':\n if (!isNaN(Number(value))) {\n value = Number(value)\n }\n break\n case 'object':\n const compartment = new Compartment()\n value = compartment.evaluate(`(${value})`)\n break\n }\n } catch (e) {\n console.error('Error parsing value:', e)\n }\n\n if (isEqual(this.value, value)) {\n return\n }\n\n this.value = value\n\n this.requestUpdate()\n this._onAfterValueChange()\n }\n\n _setDataType(type: string | undefined | null) {\n if (typeof this.value == type) {\n return\n }\n\n var value = this.value\n\n try {\n switch (type) {\n case 'string':\n value = this._getStringData(value)\n break\n case 'number':\n if (!isNaN(value)) {\n value = Number(value)\n }\n break\n case 'object':\n const compartment = new Compartment()\n value = compartment.evaluate(`(${value})`)\n break\n }\n } catch (e) {\n console.error('Error setting data type:', e)\n }\n\n if (isEqual(this.value, value)) {\n this.requestUpdate()\n return\n }\n\n this.value = value\n\n this.requestUpdate()\n this._onAfterValueChange()\n }\n\n _clearData() {\n this.value = undefined\n this._onAfterValueChange()\n }\n\n _getStringData(data: any) {\n const type = typeof data\n\n switch (type) {\n case 'object':\n return JSON.stringify(data, null, 1)\n case 'undefined':\n return ''\n default:\n return String(data) || ''\n }\n }\n\n async _onAfterValueChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
|
|
@@ -10,6 +10,7 @@ export declare class OxInputHashtags extends OxFormField {
|
|
|
10
10
|
errors?: string | null;
|
|
11
11
|
render(): import("lit-html").TemplateResult<1>;
|
|
12
12
|
private onInputKeyup;
|
|
13
|
+
private onBlur;
|
|
13
14
|
setHashtags(): Promise<void>;
|
|
14
15
|
initErrors(): void;
|
|
15
16
|
validate(newtag: string): string | undefined;
|
|
@@ -16,47 +16,38 @@ let OxInputHashtags = class OxInputHashtags extends OxFormField {
|
|
|
16
16
|
}
|
|
17
17
|
static { this.styles = css `
|
|
18
18
|
#editor {
|
|
19
|
-
display:
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
--hashtag-background: var(--md-sys-color-container);
|
|
23
|
-
--hashtag-background-hover: var(--md-sys-color-on-container);
|
|
24
|
-
--hashtag-closer-padding: 0 2px 0 4px;
|
|
25
|
-
--hashtag-input-padding: 2px;
|
|
19
|
+
display: flex;
|
|
20
|
+
gap: var(--spacing-medium);
|
|
21
|
+
align-items: center;
|
|
26
22
|
}
|
|
27
23
|
|
|
28
24
|
.tags {
|
|
29
|
-
display:
|
|
25
|
+
display: flex;
|
|
26
|
+
gap: var(--spacing-medium);
|
|
27
|
+
align-items: center;
|
|
30
28
|
}
|
|
31
29
|
|
|
32
30
|
.tag {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
display: flex;
|
|
32
|
+
gap: var(--spacing-small);
|
|
33
|
+
|
|
36
34
|
font: var(--input-font);
|
|
37
|
-
color: var(--md-sys-color-on-primary-container);
|
|
38
35
|
cursor: pointer;
|
|
39
36
|
}
|
|
40
37
|
|
|
41
38
|
.tag:hover {
|
|
42
|
-
|
|
43
|
-
color: var(--md-sys-color-primary-container) !important;
|
|
39
|
+
font-weight: bold;
|
|
44
40
|
}
|
|
45
41
|
|
|
46
42
|
.closer {
|
|
47
43
|
opacity: 0.3;
|
|
48
|
-
padding: var(--hashtag-closer-padding);
|
|
49
|
-
text-transform: uppercase;
|
|
50
|
-
color: var(--md-sys-color-on-primary-container);
|
|
51
44
|
}
|
|
52
45
|
.tag:hover .closer {
|
|
53
|
-
opacity: 0.
|
|
54
|
-
color: var(--md-sys-color-primary-container);
|
|
46
|
+
opacity: 0.3;
|
|
55
47
|
}
|
|
56
48
|
|
|
57
49
|
.input {
|
|
58
50
|
display: inline-block;
|
|
59
|
-
color: var(--md-sys-color-on-primary-container);
|
|
60
51
|
}
|
|
61
52
|
|
|
62
53
|
.input::before {
|
|
@@ -72,7 +63,6 @@ let OxInputHashtags = class OxInputHashtags extends OxFormField {
|
|
|
72
63
|
vertical-align: middle;
|
|
73
64
|
-webkit-appearance: none;
|
|
74
65
|
-webkit-text-size-adjust: none;
|
|
75
|
-
padding: var(--hashtag-input-padding);
|
|
76
66
|
border: 0;
|
|
77
67
|
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
|
78
68
|
outline: none;
|
|
@@ -81,7 +71,7 @@ let OxInputHashtags = class OxInputHashtags extends OxFormField {
|
|
|
81
71
|
|
|
82
72
|
input:focus {
|
|
83
73
|
outline: none;
|
|
84
|
-
border-bottom: 1px solid var(--md-sys-color-
|
|
74
|
+
border-bottom: 1px solid var(--md-sys-color-primary);
|
|
85
75
|
}
|
|
86
76
|
|
|
87
77
|
.error {
|
|
@@ -103,7 +93,13 @@ let OxInputHashtags = class OxInputHashtags extends OxFormField {
|
|
|
103
93
|
</div>
|
|
104
94
|
|
|
105
95
|
<div class="input">
|
|
106
|
-
<input
|
|
96
|
+
<input
|
|
97
|
+
type="text"
|
|
98
|
+
@keyup=${this.onInputKeyup}
|
|
99
|
+
@blur=${this.onBlur}
|
|
100
|
+
placeholder="태그입력"
|
|
101
|
+
?disabled=${this.disabled}
|
|
102
|
+
/>
|
|
107
103
|
</div>
|
|
108
104
|
</div>
|
|
109
105
|
|
|
@@ -122,6 +118,10 @@ let OxInputHashtags = class OxInputHashtags extends OxFormField {
|
|
|
122
118
|
this.errors = this.validate(tag);
|
|
123
119
|
}
|
|
124
120
|
}
|
|
121
|
+
onBlur() {
|
|
122
|
+
const tag = this.input.value.trim();
|
|
123
|
+
this.addHashtag(tag);
|
|
124
|
+
}
|
|
125
125
|
async setHashtags() {
|
|
126
126
|
this.input.focus();
|
|
127
127
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-hashtags.js","sourceRoot":"","sources":["../../src/ox-input-hashtags.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAIzC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAAzC;;
|
|
1
|
+
{"version":3,"file":"ox-input-hashtags.js","sourceRoot":"","sources":["../../src/ox-input-hashtags.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@localized()\n@customElement('ox-input-hashtags')\nexport class OxInputHashtags extends OxFormField {\n static styles = css`\n #editor {\n display: flex;\n gap: var(--spacing-medium);\n align-items: center;\n }\n\n .tags {\n display: flex;\n gap: var(--spacing-medium);\n align-items: center;\n }\n\n .tag {\n display: flex;\n gap: var(--spacing-small);\n\n font: var(--input-font);\n cursor: pointer;\n }\n\n .tag:hover {\n font-weight: bold;\n }\n\n .closer {\n opacity: 0.3;\n }\n .tag:hover .closer {\n opacity: 0.3;\n }\n\n .input {\n display: inline-block;\n }\n\n .input::before {\n display: inline;\n position: relative;\n opacity: 0.5;\n top: -1px;\n content: '#';\n vertical-align: middle;\n }\n\n input {\n vertical-align: middle;\n -webkit-appearance: none;\n -webkit-text-size-adjust: none;\n border: 0;\n border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n outline: none;\n font-weight: bold;\n }\n\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--md-sys-color-primary);\n }\n\n .error {\n margin: var(--spacing-small);\n color: var(--md-sys-color-error);\n font: var(--input-font);\n text-align: left;\n }\n `\n\n @property({ type: Array }) value: string[] = []\n @property({ type: String }) placeholder: string = 'tag'\n @query('input') input!: HTMLInputElement\n\n @state() errors?: string | null\n\n render() {\n return html`\n <div id=\"editor\" @click=${this.setHashtags}>\n <div class=\"tags\">\n ${repeat(\n this.value,\n tag => tag,\n (tag, index) => html`\n <span class=\"tag\"\n >#${tag} <span @click=${() => !this.disabled && this.removeHashtag(index)} class=\"closer\">x</span></span\n >\n `\n )}\n </div>\n\n <div class=\"input\">\n <input\n type=\"text\"\n @keyup=${this.onInputKeyup}\n @blur=${this.onBlur}\n placeholder=\"태그입력\"\n ?disabled=${this.disabled}\n />\n </div>\n </div>\n\n ${when(this.errors, () => html`<p class=\"error\">${this.errors}</p>`)}\n `\n }\n\n private onInputKeyup(e: KeyboardEvent) {\n e.stopPropagation()\n\n const tag = this.input.value.trim()\n\n switch (e.key) {\n case 'Enter':\n case 'Spacebar':\n this.addHashtag(tag)\n break\n default:\n this.errors = this.validate(tag)\n }\n }\n\n private onBlur() {\n const tag = this.input.value.trim()\n this.addHashtag(tag)\n }\n\n async setHashtags() {\n this.input.focus()\n }\n\n initErrors() {\n this.errors = null\n }\n\n validate(newtag: string) {\n if (this.value.some(tag => tag === newtag)) {\n return msg('tag duplicated')\n }\n\n const regex = /[~!@#$%^&*()+|<>?:{},.=\"':;/-]/\n if (regex.test(newtag)) {\n return msg('special characters not allowed')\n }\n }\n\n async addHashtag(tag: string) {\n if (!tag) {\n this.initErrors()\n this.input.focus()\n return\n }\n\n this.errors = this.validate(tag)\n if (this.errors) {\n this.input.focus()\n return\n }\n\n this.value = [...this.value, tag]\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n this.errors = null\n this.input.value = ''\n this.input.focus()\n }\n\n removeHashtag(idx: number) {\n this.value.splice(idx, 1)\n this.value = [...this.value]\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|