@operato/data-grist 0.2.52 → 0.3.7
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 +85 -0
- package/custom-elements.json +1311 -2838
- package/demo/index.html +72 -16
- package/dist/src/data-card/data-card-field.js +11 -2
- package/dist/src/data-card/data-card-field.js.map +1 -1
- package/dist/src/data-card/data-card-gutter-menu.d.ts +1 -1
- package/dist/src/data-card/data-card-gutter-menu.js +10 -6
- package/dist/src/data-card/data-card-gutter-menu.js.map +1 -1
- package/dist/src/data-card/data-card.js +0 -4
- package/dist/src/data-card/data-card.js.map +1 -1
- package/dist/src/data-card/event-handlers/record-card-click-handler.js +15 -15
- package/dist/src/data-card/event-handlers/record-card-click-handler.js.map +1 -1
- package/dist/src/data-card/record-card.js +9 -11
- package/dist/src/data-card/record-card.js.map +1 -1
- package/dist/src/data-grid/data-grid-header.d.ts +2 -2
- package/dist/src/data-grid/data-grid-header.js +14 -10
- package/dist/src/data-grid/data-grid-header.js.map +1 -1
- package/dist/src/data-grid/data-grid.js +0 -1
- package/dist/src/data-grid/data-grid.js.map +1 -1
- package/dist/src/data-list/data-list.js +0 -4
- package/dist/src/data-list/data-list.js.map +1 -1
- package/dist/src/data-list/event-handlers/record-partial-click-handler.js +15 -15
- package/dist/src/data-list/event-handlers/record-partial-click-handler.js.map +1 -1
- package/dist/src/filters/filter-checkbox.js +1 -0
- package/dist/src/filters/filter-checkbox.js.map +1 -1
- package/dist/src/filters/filter-input.js +1 -1
- package/dist/src/filters/filter-input.js.map +1 -1
- package/dist/src/filters/filter-range-date.js +1 -1
- package/dist/src/filters/filter-range-date.js.map +1 -1
- package/dist/src/filters/filter-range-number.js +2 -1
- package/dist/src/filters/filter-range-number.js.map +1 -1
- package/dist/src/filters/filter-select.d.ts +1 -1
- package/dist/src/filters/filter-select.js +1 -1
- package/dist/src/filters/filter-select.js.map +1 -1
- package/dist/src/filters/filters-form.d.ts +19 -0
- package/dist/src/filters/filters-form.js +99 -0
- package/dist/src/filters/filters-form.js.map +1 -0
- package/dist/src/filters/index.d.ts +1 -0
- package/dist/src/filters/index.js +1 -0
- package/dist/src/filters/index.js.map +1 -1
- package/dist/src/filters/registry.d.ts +5 -5
- package/dist/src/filters/registry.js +25 -25
- package/dist/src/filters/registry.js.map +1 -1
- package/dist/src/index.d.ts +2 -2
- package/dist/src/index.js +2 -2
- package/dist/src/index.js.map +1 -1
- package/dist/src/types.d.ts +4 -3
- package/dist/src/types.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +9 -8
- package/src/data-card/data-card-field.ts +11 -2
- package/src/data-card/data-card-gutter-menu.ts +11 -7
- package/src/data-card/data-card.ts +0 -5
- package/src/data-card/event-handlers/record-card-click-handler.ts +16 -18
- package/src/data-card/record-card.ts +9 -11
- package/src/data-grid/data-grid-header.ts +15 -10
- package/src/data-grid/data-grid.ts +0 -1
- package/src/data-list/data-list.ts +0 -5
- package/src/data-list/event-handlers/record-partial-click-handler.ts +16 -18
- package/src/filters/filter-checkbox.ts +1 -0
- package/src/filters/filter-input.ts +1 -1
- package/src/filters/filter-range-date.ts +1 -1
- package/src/filters/filter-range-number.ts +2 -1
- package/src/filters/filter-select.ts +3 -2
- package/src/filters/filters-form.ts +132 -0
- package/src/filters/index.ts +2 -0
- package/src/filters/registry.ts +26 -26
- package/src/index.ts +3 -3
- package/src/types.ts +34 -4
- package/tsconfig.json +3 -1
- package/dist/src/data-card/event-handlers/data-card-click-handler.d.ts +0 -6
- package/dist/src/data-card/event-handlers/data-card-click-handler.js +0 -16
- package/dist/src/data-card/event-handlers/data-card-click-handler.js.map +0 -1
- package/dist/src/data-card/event-handlers/data-card-dblclick-handler.d.ts +0 -6
- package/dist/src/data-card/event-handlers/data-card-dblclick-handler.js +0 -16
- package/dist/src/data-card/event-handlers/data-card-dblclick-handler.js.map +0 -1
- package/dist/src/data-list/event-handlers/data-list-click-handler.d.ts +0 -6
- package/dist/src/data-list/event-handlers/data-list-click-handler.js +0 -16
- package/dist/src/data-list/event-handlers/data-list-click-handler.js.map +0 -1
- package/dist/src/data-list/event-handlers/data-list-dblclick-handler.d.ts +0 -6
- package/dist/src/data-list/event-handlers/data-list-dblclick-handler.js +0 -16
- package/dist/src/data-list/event-handlers/data-list-dblclick-handler.js.map +0 -1
- package/dist/src/interfaces/index.d.ts +0 -2
- package/dist/src/interfaces/index.js +0 -3
- package/dist/src/interfaces/index.js.map +0 -1
- package/dist/src/interfaces/ox-grist-search-form.d.ts +0 -6
- package/dist/src/interfaces/ox-grist-search-form.js +0 -2
- package/dist/src/interfaces/ox-grist-search-form.js.map +0 -1
- package/dist/src/interfaces/ox-search-field.d.ts +0 -39
- package/dist/src/interfaces/ox-search-field.js +0 -2
- package/dist/src/interfaces/ox-search-field.js.map +0 -1
- package/dist/src/search-form/index.d.ts +0 -7
- package/dist/src/search-form/index.js +0 -8
- package/dist/src/search-form/index.js.map +0 -1
- package/dist/src/search-form/ox-basic-field.d.ts +0 -18
- package/dist/src/search-form/ox-basic-field.js +0 -75
- package/dist/src/search-form/ox-basic-field.js.map +0 -1
- package/dist/src/search-form/ox-checkbox-field.d.ts +0 -11
- package/dist/src/search-form/ox-checkbox-field.js +0 -60
- package/dist/src/search-form/ox-checkbox-field.js.map +0 -1
- package/dist/src/search-form/ox-grist-search-form.d.ts +0 -11
- package/dist/src/search-form/ox-grist-search-form.js +0 -177
- package/dist/src/search-form/ox-grist-search-form.js.map +0 -1
- package/dist/src/search-form/ox-number-field.d.ts +0 -14
- package/dist/src/search-form/ox-number-field.js +0 -112
- package/dist/src/search-form/ox-number-field.js.map +0 -1
- package/dist/src/search-form/ox-search-form.d.ts +0 -15
- package/dist/src/search-form/ox-search-form.js +0 -53
- package/dist/src/search-form/ox-search-form.js.map +0 -1
- package/dist/src/search-form/ox-select-field.d.ts +0 -21
- package/dist/src/search-form/ox-select-field.js +0 -181
- package/dist/src/search-form/ox-select-field.js.map +0 -1
- package/dist/src/search-form/ox-text-field.d.ts +0 -11
- package/dist/src/search-form/ox-text-field.js +0 -60
- package/dist/src/search-form/ox-text-field.js.map +0 -1
- package/src/data-card/event-handlers/data-card-click-handler.ts +0 -19
- package/src/data-card/event-handlers/data-card-dblclick-handler.ts +0 -19
- package/src/data-list/event-handlers/data-list-click-handler.ts +0 -19
- package/src/data-list/event-handlers/data-list-dblclick-handler.ts +0 -19
- package/src/interfaces/index.ts +0 -2
- package/src/interfaces/ox-grist-search-form.ts +0 -7
- package/src/interfaces/ox-search-field.ts +0 -52
- package/src/search-form/index.ts +0 -7
- package/src/search-form/ox-basic-field.ts +0 -86
- package/src/search-form/ox-checkbox-field.ts +0 -57
- package/src/search-form/ox-grist-search-form.ts +0 -200
- package/src/search-form/ox-number-field.ts +0 -113
- package/src/search-form/ox-search-form.ts +0 -71
- package/src/search-form/ox-select-field.ts +0 -188
- package/src/search-form/ox-text-field.ts +0 -55
- package/yarn-error.log +0 -16718
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import '@material/mwc-icon';
|
|
3
|
-
import { css, html } from 'lit';
|
|
4
|
-
import { ifDefined } from 'lit-html/directives/if-defined.js';
|
|
5
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
6
|
-
import { OXBasicField } from './ox-basic-field';
|
|
7
|
-
let OXNumberField = class OXNumberField extends OXBasicField {
|
|
8
|
-
setDefaultValue(defaultValue) {
|
|
9
|
-
this.value = defaultValue;
|
|
10
|
-
}
|
|
11
|
-
render() {
|
|
12
|
-
const { name, hidden, id, placeholder, min, max, step } = this.field;
|
|
13
|
-
return html `
|
|
14
|
-
<span class="input-wrapper" ?hidden=${hidden}>
|
|
15
|
-
<button @click=${this.decrease.bind(this)}>
|
|
16
|
-
<mwc-icon>add</mwc-icon>
|
|
17
|
-
</button>
|
|
18
|
-
<input
|
|
19
|
-
id=${ifDefined(id)}
|
|
20
|
-
name=${name}
|
|
21
|
-
type="number"
|
|
22
|
-
placeholder=${ifDefined(placeholder)}
|
|
23
|
-
min=${ifDefined(min)}
|
|
24
|
-
max=${ifDefined(max)}
|
|
25
|
-
step=${ifDefined(step)}
|
|
26
|
-
.value=${String(this.value) || ''}
|
|
27
|
-
@change=${this.onChangeHandler.bind(this)}
|
|
28
|
-
/>
|
|
29
|
-
<button @click=${this.increase.bind(this)}>
|
|
30
|
-
<mwc-icon>remove</mwc-icon>
|
|
31
|
-
</button>
|
|
32
|
-
</span>
|
|
33
|
-
`;
|
|
34
|
-
}
|
|
35
|
-
decrease() {
|
|
36
|
-
var _a;
|
|
37
|
-
let fractionDigits = 0;
|
|
38
|
-
if (this.field.step) {
|
|
39
|
-
fractionDigits = String(this.field.step).split('.')[1].length;
|
|
40
|
-
}
|
|
41
|
-
this.value = Number((((_a = this.value) !== null && _a !== void 0 ? _a : 0) - (this.field.step || 1)).toFixed(fractionDigits));
|
|
42
|
-
}
|
|
43
|
-
increase() {
|
|
44
|
-
var _a;
|
|
45
|
-
let fractionDigits = 0;
|
|
46
|
-
if (this.field.step) {
|
|
47
|
-
fractionDigits = String(this.field.step).split('.')[1].length;
|
|
48
|
-
}
|
|
49
|
-
this.value = Number((((_a = this.value) !== null && _a !== void 0 ? _a : 0) + (this.field.step || 1)).toFixed(fractionDigits));
|
|
50
|
-
}
|
|
51
|
-
onChangeHandler() {
|
|
52
|
-
if (this.input.value) {
|
|
53
|
-
this.value = Number(this.input.value);
|
|
54
|
-
}
|
|
55
|
-
else {
|
|
56
|
-
this.value = undefined;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
OXNumberField.styles = [
|
|
61
|
-
css `
|
|
62
|
-
:host {
|
|
63
|
-
display: inline-flex;
|
|
64
|
-
flex-direction: column;
|
|
65
|
-
}
|
|
66
|
-
input::-webkit-outer-spin-button,
|
|
67
|
-
input::-webkit-inner-spin-button {
|
|
68
|
-
-webkit-appearance: none;
|
|
69
|
-
margin: 0;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
span.input-wrapper {
|
|
73
|
-
display: inline-flex;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
button {
|
|
77
|
-
padding: var(--padding-narrow);
|
|
78
|
-
height: 24px;
|
|
79
|
-
background-color: var(--theme-white-color);
|
|
80
|
-
border: 1px solid rgba(var(--primary-color-rgb), 0.5);
|
|
81
|
-
border-radius: 50%;
|
|
82
|
-
opacity: 0.6;
|
|
83
|
-
cursor: pointer;
|
|
84
|
-
}
|
|
85
|
-
button mwc-icon {
|
|
86
|
-
font-size: var(--fontsize-default, 16px);
|
|
87
|
-
color: var(--primary-text-color, #476172);
|
|
88
|
-
}
|
|
89
|
-
button:hover {
|
|
90
|
-
opacity: 1;
|
|
91
|
-
}
|
|
92
|
-
input {
|
|
93
|
-
border: none;
|
|
94
|
-
outline: none;
|
|
95
|
-
padding: 4px 9px;
|
|
96
|
-
text-align: center;
|
|
97
|
-
font-size: var(--fontsize-default, 14px);
|
|
98
|
-
color: var(--primary-text-color, #476172);
|
|
99
|
-
}
|
|
100
|
-
`
|
|
101
|
-
];
|
|
102
|
-
__decorate([
|
|
103
|
-
property({ type: Object })
|
|
104
|
-
], OXNumberField.prototype, "field", void 0);
|
|
105
|
-
__decorate([
|
|
106
|
-
property({ type: Number })
|
|
107
|
-
], OXNumberField.prototype, "value", void 0);
|
|
108
|
-
OXNumberField = __decorate([
|
|
109
|
-
customElement('ox-number-field')
|
|
110
|
-
], OXNumberField);
|
|
111
|
-
export { OXNumberField };
|
|
112
|
-
//# sourceMappingURL=ox-number-field.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ox-number-field.js","sourceRoot":"","sources":["../../../src/search-form/ox-number-field.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, CSSResult, html, TemplateResult } from 'lit'\nimport { ifDefined } from 'lit-html/directives/if-defined.js'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OXNumberFieldProps } from '..'\nimport { OXBasicField } from './ox-basic-field'\n\n@customElement('ox-number-field')\nexport class OXNumberField extends OXBasicField {\n @property({ type: Object }) field!: OXNumberFieldProps\n @property({ type: Number }) value?: number\n\n setDefaultValue(defaultValue: number): void {\n this.value = defaultValue\n }\n\n static styles: CSSResult[] = [\n css`\n :host {\n display: inline-flex;\n flex-direction: column;\n }\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n span.input-wrapper {\n display: inline-flex;\n }\n\n button {\n padding: var(--padding-narrow);\n height: 24px;\n background-color: var(--theme-white-color);\n border: 1px solid rgba(var(--primary-color-rgb), 0.5);\n border-radius: 50%;\n opacity: 0.6;\n cursor: pointer;\n }\n button mwc-icon {\n font-size: var(--fontsize-default, 16px);\n color: var(--primary-text-color, #476172);\n }\n button:hover {\n opacity: 1;\n }\n input {\n border: none;\n outline: none;\n padding: 4px 9px;\n text-align: center;\n font-size: var(--fontsize-default, 14px);\n color: var(--primary-text-color, #476172);\n }\n `\n ]\n\n render(): TemplateResult {\n const { name, hidden, id, placeholder, min, max, step } = this.field\n\n return html`\n <span class=\"input-wrapper\" ?hidden=${hidden}>\n <button @click=${this.decrease.bind(this)}>\n <mwc-icon>add</mwc-icon>\n </button>\n <input\n id=${ifDefined(id)}\n name=${name}\n type=\"number\"\n placeholder=${ifDefined(placeholder)}\n min=${ifDefined(min)}\n max=${ifDefined(max)}\n step=${ifDefined(step)}\n .value=${String(this.value) || ''}\n @change=${this.onChangeHandler.bind(this)}\n />\n <button @click=${this.increase.bind(this)}>\n <mwc-icon>remove</mwc-icon>\n </button>\n </span>\n `\n }\n\n decrease(): void {\n let fractionDigits: number = 0\n if (this.field.step) {\n fractionDigits = String(this.field.step).split('.')[1].length\n }\n\n this.value = Number(((this.value ?? 0) - (this.field.step || 1)).toFixed(fractionDigits))\n }\n\n increase(): void {\n let fractionDigits: number = 0\n if (this.field.step) {\n fractionDigits = String(this.field.step).split('.')[1].length\n }\n\n this.value = Number(((this.value ?? 0) + (this.field.step || 1)).toFixed(fractionDigits))\n }\n\n private onChangeHandler(): void {\n if (this.input.value) {\n this.value = Number(this.input.value)\n } else {\n this.value = undefined\n }\n }\n}\n"]}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import './ox-text-field';
|
|
2
|
-
import './ox-checkbox-field';
|
|
3
|
-
import './ox-select-field';
|
|
4
|
-
import './ox-number-field';
|
|
5
|
-
import { LitElement, TemplateResult } from 'lit';
|
|
6
|
-
import { OXCheckboxField, OXNumberField, OXSearchFieldProps, OXSelectField, OXTextField } from '..';
|
|
7
|
-
export declare type OXSearchFieldTypes = OXTextField | OXNumberField | OXSelectField | OXCheckboxField;
|
|
8
|
-
export declare class OXSearchForm extends LitElement {
|
|
9
|
-
fields: OXSearchFieldProps[];
|
|
10
|
-
form: HTMLFormElement;
|
|
11
|
-
render(): TemplateResult;
|
|
12
|
-
get searchFields(): OXSearchFieldTypes[];
|
|
13
|
-
private renderField;
|
|
14
|
-
_submitFieldHandler(): void;
|
|
15
|
-
}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import './ox-text-field';
|
|
3
|
-
import './ox-checkbox-field';
|
|
4
|
-
import './ox-select-field';
|
|
5
|
-
import './ox-number-field';
|
|
6
|
-
import { LitElement, html } from 'lit';
|
|
7
|
-
import { customElement, property, query } from 'lit/decorators.js';
|
|
8
|
-
let OXSearchForm = class OXSearchForm extends LitElement {
|
|
9
|
-
render() {
|
|
10
|
-
return html `
|
|
11
|
-
<form @submit-field=${this._submitFieldHandler.bind(this)}>
|
|
12
|
-
<slot></slot>
|
|
13
|
-
${this.fields.map(this.renderField)}
|
|
14
|
-
</form>
|
|
15
|
-
`;
|
|
16
|
-
}
|
|
17
|
-
get searchFields() {
|
|
18
|
-
return Array.from(this.form.querySelectorAll('*'));
|
|
19
|
-
}
|
|
20
|
-
renderField(field) {
|
|
21
|
-
const { type } = field;
|
|
22
|
-
switch (type) {
|
|
23
|
-
case 'text':
|
|
24
|
-
return html `<ox-text-field .field=${field}></ox-text-field>`;
|
|
25
|
-
case 'number':
|
|
26
|
-
return html `<ox-number-field .field=${field}></ox-number-field>`;
|
|
27
|
-
case 'select':
|
|
28
|
-
return html `<ox-select-field .field=${field}></ox-select-field>`;
|
|
29
|
-
case 'checkbox':
|
|
30
|
-
return html `<ox-checkbox-field .field=${field}></ox-checkbox-field>`;
|
|
31
|
-
default:
|
|
32
|
-
return html `<ox-text-field .field=${field}></ox-text-field>`;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
_submitFieldHandler() {
|
|
36
|
-
this.dispatchEvent(new CustomEvent('submit', {
|
|
37
|
-
composed: true,
|
|
38
|
-
bubbles: true,
|
|
39
|
-
cancelable: true
|
|
40
|
-
})) && this.form.submit();
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
__decorate([
|
|
44
|
-
property({ type: Array })
|
|
45
|
-
], OXSearchForm.prototype, "fields", void 0);
|
|
46
|
-
__decorate([
|
|
47
|
-
query('form')
|
|
48
|
-
], OXSearchForm.prototype, "form", void 0);
|
|
49
|
-
OXSearchForm = __decorate([
|
|
50
|
-
customElement('ox-search-form')
|
|
51
|
-
], OXSearchForm);
|
|
52
|
-
export { OXSearchForm };
|
|
53
|
-
//# sourceMappingURL=ox-search-form.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ox-search-form.js","sourceRoot":"","sources":["../../../src/search-form/ox-search-form.ts"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAA;AACxB,OAAO,qBAAqB,CAAA;AAC5B,OAAO,mBAAmB,CAAA;AAC1B,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAYtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAY,MAAM,mBAAmB,CAAA;AAK5E,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,UAAU;IAK1C,MAAM;QACJ,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC;;UAErD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;;KAEtC,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAA;IACpD,CAAC;IAEO,WAAW,CAAC,KAAyB;QAC3C,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;QAEtB,QAAQ,IAAI,EAAE;YACZ,KAAK,MAAM;gBACT,OAAO,IAAI,CAAA,yBAAyB,KAAyB,mBAAmB,CAAA;YAElF,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAA,2BAA2B,KAA2B,qBAAqB,CAAA;YAExF,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAA,2BAA2B,KAA2B,qBAAqB,CAAA;YAExF,KAAK,UAAU;gBACb,OAAO,IAAI,CAAA,6BAA6B,KAA6B,uBAAuB,CAAA;YAE9F;gBACE,OAAO,IAAI,CAAA,yBAAyB,KAAyB,mBAAmB,CAAA;SACnF;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;SACjB,CAAC,CACH,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAA;IACzB,CAAC;CACF,CAAA;AA/C4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CAA8B;AAEzC;IAAd,KAAK,CAAC,MAAM,CAAC;0CAAuB;AAH1B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAgDxB;SAhDY,YAAY","sourcesContent":["import './ox-text-field'\nimport './ox-checkbox-field'\nimport './ox-select-field'\nimport './ox-number-field'\n\nimport { LitElement, TemplateResult, html } from 'lit'\nimport {\n OXCheckboxField,\n OXCheckboxFieldProps,\n OXNumberField,\n OXNumberFieldProps,\n OXSearchFieldProps,\n OXSelectField,\n OXSelectFieldProps,\n OXTextField,\n OXTextFieldProps\n} from '..'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nexport type OXSearchFieldTypes = OXTextField | OXNumberField | OXSelectField | OXCheckboxField\n\n@customElement('ox-search-form')\nexport class OXSearchForm extends LitElement {\n @property({ type: Array }) fields!: OXSearchFieldProps[]\n\n @query('form') form!: HTMLFormElement\n\n render(): TemplateResult {\n return html`\n <form @submit-field=${this._submitFieldHandler.bind(this)}>\n <slot></slot>\n ${this.fields.map(this.renderField)}\n </form>\n `\n }\n\n get searchFields(): OXSearchFieldTypes[] {\n return Array.from(this.form.querySelectorAll('*'))\n }\n\n private renderField(field: OXSearchFieldProps): TemplateResult {\n const { type } = field\n\n switch (type) {\n case 'text':\n return html`<ox-text-field .field=${field as OXTextFieldProps}></ox-text-field>`\n\n case 'number':\n return html`<ox-number-field .field=${field as OXNumberFieldProps}></ox-number-field>`\n\n case 'select':\n return html`<ox-select-field .field=${field as OXSelectFieldProps}></ox-select-field>`\n\n case 'checkbox':\n return html`<ox-checkbox-field .field=${field as OXCheckboxFieldProps}></ox-checkbox-field>`\n\n default:\n return html`<ox-text-field .field=${field as OXTextFieldProps}></ox-text-field>`\n }\n }\n\n _submitFieldHandler(): void {\n this.dispatchEvent(\n new CustomEvent('submit', {\n composed: true,\n bubbles: true,\n cancelable: true\n })\n ) && this.form.submit()\n }\n}\n"]}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import '@operato/popup';
|
|
2
|
-
import '@material/mwc-icon';
|
|
3
|
-
import { CSSResult, TemplateResult } from 'lit';
|
|
4
|
-
import { OXFieldOptionProps, OXSelectFieldProps } from '..';
|
|
5
|
-
import { OXBasicField } from './ox-basic-field';
|
|
6
|
-
export declare class OXSelectField extends OXBasicField {
|
|
7
|
-
field: OXSelectFieldProps;
|
|
8
|
-
checked: boolean;
|
|
9
|
-
searchCondition: string;
|
|
10
|
-
value: string;
|
|
11
|
-
static styles: CSSResult[];
|
|
12
|
-
get input(): HTMLInputElement;
|
|
13
|
-
get checkedOption(): OXFieldOptionProps;
|
|
14
|
-
get displayValue(): string;
|
|
15
|
-
get searchInput(): HTMLInputElement;
|
|
16
|
-
setDefaultValue(defaultValue: any): void;
|
|
17
|
-
render(): TemplateResult;
|
|
18
|
-
openPopup(event: MouseEvent): void;
|
|
19
|
-
onSearchInputHandler(): void;
|
|
20
|
-
onValueChange(event: Event): void;
|
|
21
|
-
}
|
|
@@ -1,181 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import '@operato/popup';
|
|
3
|
-
import '@material/mwc-icon';
|
|
4
|
-
import { css, html } from 'lit';
|
|
5
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
6
|
-
import { OXBasicField } from './ox-basic-field';
|
|
7
|
-
import { ifDefined } from 'lit-html/directives/if-defined.js';
|
|
8
|
-
let OXSelectField = class OXSelectField extends OXBasicField {
|
|
9
|
-
constructor() {
|
|
10
|
-
super(...arguments);
|
|
11
|
-
this.checked = false;
|
|
12
|
-
this.searchCondition = '';
|
|
13
|
-
this.value = '';
|
|
14
|
-
}
|
|
15
|
-
get input() {
|
|
16
|
-
const input = this.renderRoot.querySelector('input[readonly]');
|
|
17
|
-
if (!input)
|
|
18
|
-
throw new Error('Failed to find input element');
|
|
19
|
-
return input;
|
|
20
|
-
}
|
|
21
|
-
get checkedOption() {
|
|
22
|
-
if (!this.value)
|
|
23
|
-
throw new Error('Value is not defined yet');
|
|
24
|
-
const checkedOption = this.field.options.find((option) => option.value === this.value);
|
|
25
|
-
if (!checkedOption)
|
|
26
|
-
throw new Error('No checked option found');
|
|
27
|
-
return checkedOption;
|
|
28
|
-
}
|
|
29
|
-
get displayValue() {
|
|
30
|
-
try {
|
|
31
|
-
return this.checkedOption.name || this.checkedOption.value;
|
|
32
|
-
}
|
|
33
|
-
catch (e) {
|
|
34
|
-
return '';
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
get searchInput() {
|
|
38
|
-
const searchInput = this.renderRoot.querySelector('input#search-input');
|
|
39
|
-
if (!searchInput)
|
|
40
|
-
throw new Error('No search input found');
|
|
41
|
-
return searchInput;
|
|
42
|
-
}
|
|
43
|
-
setDefaultValue(defaultValue) {
|
|
44
|
-
const input = this.renderRoot.querySelector(`input[value="${defaultValue}"]`);
|
|
45
|
-
if (!input)
|
|
46
|
-
return;
|
|
47
|
-
input.checked = true;
|
|
48
|
-
const option = this.field.options.find((option) => option.value === defaultValue);
|
|
49
|
-
if (!option)
|
|
50
|
-
throw new Error('No matched option found');
|
|
51
|
-
this.value = option.name || option.value;
|
|
52
|
-
}
|
|
53
|
-
render() {
|
|
54
|
-
const { name, hidden, id, options, searchEnable = true, placeholder } = this.field;
|
|
55
|
-
return html `
|
|
56
|
-
<span class="input-wrapper" ?hidden=${hidden} @click=${this.openPopup.bind(this)}>
|
|
57
|
-
<input
|
|
58
|
-
id=${ifDefined(id)}
|
|
59
|
-
name=${name}
|
|
60
|
-
readonly
|
|
61
|
-
placeholder=${ifDefined(placeholder)}
|
|
62
|
-
.value=${this.displayValue}
|
|
63
|
-
/>
|
|
64
|
-
<mwc-icon>keyboard_arrow_down</mwc-icon>
|
|
65
|
-
</span>
|
|
66
|
-
|
|
67
|
-
<ox-popup-list id="popup-list" multiple>
|
|
68
|
-
${searchEnable
|
|
69
|
-
? html `
|
|
70
|
-
<div class="search-input-wrapper">
|
|
71
|
-
<input id="search-input" type="text" @input=${this.onSearchInputHandler.bind(this)} />
|
|
72
|
-
<mwc-icon>search</mwc-icon>
|
|
73
|
-
</div>
|
|
74
|
-
`
|
|
75
|
-
: ''}
|
|
76
|
-
${options
|
|
77
|
-
.filter((option) => option.value.indexOf(this.searchCondition) >= 0 ||
|
|
78
|
-
(option.name && (option === null || option === void 0 ? void 0 : option.name.indexOf(this.searchCondition)) >= 0))
|
|
79
|
-
.map((option) => html `
|
|
80
|
-
<label option>
|
|
81
|
-
<input
|
|
82
|
-
name=${name}
|
|
83
|
-
type="checkbox"
|
|
84
|
-
.value=${option.value}
|
|
85
|
-
@change=${this.onValueChange.bind(this)}
|
|
86
|
-
.checked=${this.value === option.value}
|
|
87
|
-
/>
|
|
88
|
-
<span>${option.name || option.value}</span>
|
|
89
|
-
</label>
|
|
90
|
-
`)}
|
|
91
|
-
</ox-popup-list>
|
|
92
|
-
`;
|
|
93
|
-
}
|
|
94
|
-
openPopup(event) {
|
|
95
|
-
const popupList = this.renderRoot.querySelector('#popup-list');
|
|
96
|
-
if (!popupList)
|
|
97
|
-
throw new Error('Failed to find popup element');
|
|
98
|
-
const offsetHeight = this.input.offsetHeight;
|
|
99
|
-
const { x, y } = this.input.getBoundingClientRect();
|
|
100
|
-
popupList.open({ left: x, top: y + offsetHeight });
|
|
101
|
-
}
|
|
102
|
-
onSearchInputHandler() {
|
|
103
|
-
this.searchCondition = this.searchInput.value;
|
|
104
|
-
}
|
|
105
|
-
onValueChange(event) {
|
|
106
|
-
if (this.value) {
|
|
107
|
-
const prevCheckedInput = this.renderRoot.querySelector(`input[value=${this.value}`);
|
|
108
|
-
if (prevCheckedInput)
|
|
109
|
-
prevCheckedInput.checked = false;
|
|
110
|
-
}
|
|
111
|
-
const checkedInput = event.currentTarget;
|
|
112
|
-
if (!checkedInput)
|
|
113
|
-
throw new Error('No checked input found');
|
|
114
|
-
if (checkedInput.value === this.value) {
|
|
115
|
-
this.value = '';
|
|
116
|
-
}
|
|
117
|
-
else {
|
|
118
|
-
const foundOption = this.field.options.find((option) => option.value === checkedInput.value);
|
|
119
|
-
if (!foundOption)
|
|
120
|
-
throw new Error('No matched option found');
|
|
121
|
-
this.value = foundOption.value;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
};
|
|
125
|
-
OXSelectField.styles = [
|
|
126
|
-
css `
|
|
127
|
-
:host > label {
|
|
128
|
-
display: inline-flex;
|
|
129
|
-
flex-direction: column;
|
|
130
|
-
font-size: var(--fontsize-default, 14px);
|
|
131
|
-
color: var(--primary-text-color, #476172);
|
|
132
|
-
}
|
|
133
|
-
.input-wrapper {
|
|
134
|
-
display: inline-flex;
|
|
135
|
-
}
|
|
136
|
-
.input-wrapper mwc-icon {
|
|
137
|
-
opacity: 0.7;
|
|
138
|
-
font-size: var(--fontsize-default, 16px);
|
|
139
|
-
color: var(--primary-text-color, #476172);
|
|
140
|
-
line-height: 2;
|
|
141
|
-
}
|
|
142
|
-
input {
|
|
143
|
-
border: none;
|
|
144
|
-
outline: none;
|
|
145
|
-
padding: 4px 9px;
|
|
146
|
-
font-size: var(--fontsize-default, 14px);
|
|
147
|
-
color: var(--primary-text-color, #476172);
|
|
148
|
-
}
|
|
149
|
-
.search-input-wrapper {
|
|
150
|
-
display: inline-flex;
|
|
151
|
-
border-bottom: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.15));
|
|
152
|
-
}
|
|
153
|
-
.search-input-wrapper mwc-icon {
|
|
154
|
-
opacity: 0.7;
|
|
155
|
-
font-size: 20px;
|
|
156
|
-
color: var(--primary-text-color, #476172);
|
|
157
|
-
}
|
|
158
|
-
label[option] {
|
|
159
|
-
display: inline-flex;
|
|
160
|
-
margin: 5px 0px;
|
|
161
|
-
gap: 5px;
|
|
162
|
-
}
|
|
163
|
-
`
|
|
164
|
-
];
|
|
165
|
-
__decorate([
|
|
166
|
-
property({ type: Object })
|
|
167
|
-
], OXSelectField.prototype, "field", void 0);
|
|
168
|
-
__decorate([
|
|
169
|
-
property({ type: Boolean })
|
|
170
|
-
], OXSelectField.prototype, "checked", void 0);
|
|
171
|
-
__decorate([
|
|
172
|
-
property({ type: String })
|
|
173
|
-
], OXSelectField.prototype, "searchCondition", void 0);
|
|
174
|
-
__decorate([
|
|
175
|
-
property({ type: String })
|
|
176
|
-
], OXSelectField.prototype, "value", void 0);
|
|
177
|
-
OXSelectField = __decorate([
|
|
178
|
-
customElement('ox-select-field')
|
|
179
|
-
], OXSelectField);
|
|
180
|
-
export { OXSelectField };
|
|
181
|
-
//# sourceMappingURL=ox-select-field.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ox-select-field.js","sourceRoot":"","sources":["../../../src/search-form/ox-select-field.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup'\nimport '@material/mwc-icon'\n\nimport { CSSResult, TemplateResult, css, html } from 'lit'\nimport { OXFieldOptionProps, OXSelectFieldProps } from '..'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OXBasicField } from './ox-basic-field'\nimport { OxPopupList } from '@operato/popup'\nimport { ifDefined } from 'lit-html/directives/if-defined.js'\n\n@customElement('ox-select-field')\nexport class OXSelectField extends OXBasicField {\n @property({ type: Object }) field!: OXSelectFieldProps\n @property({ type: Boolean }) checked: boolean = false\n @property({ type: String }) searchCondition: string = ''\n @property({ type: String }) value: string = ''\n\n static styles: CSSResult[] = [\n css`\n :host > label {\n display: inline-flex;\n flex-direction: column;\n font-size: var(--fontsize-default, 14px);\n color: var(--primary-text-color, #476172);\n }\n .input-wrapper {\n display: inline-flex;\n }\n .input-wrapper mwc-icon {\n opacity: 0.7;\n font-size: var(--fontsize-default, 16px);\n color: var(--primary-text-color, #476172);\n line-height: 2;\n }\n input {\n border: none;\n outline: none;\n padding: 4px 9px;\n font-size: var(--fontsize-default, 14px);\n color: var(--primary-text-color, #476172);\n }\n .search-input-wrapper {\n display: inline-flex;\n border-bottom: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.15));\n }\n .search-input-wrapper mwc-icon {\n opacity: 0.7;\n font-size: 20px;\n color: var(--primary-text-color, #476172);\n }\n label[option] {\n display: inline-flex;\n margin: 5px 0px;\n gap: 5px;\n }\n `\n ]\n\n get input(): HTMLInputElement {\n const input: HTMLInputElement | null = this.renderRoot.querySelector('input[readonly]')\n if (!input) throw new Error('Failed to find input element')\n\n return input\n }\n\n get checkedOption(): OXFieldOptionProps {\n if (!this.value) throw new Error('Value is not defined yet')\n\n const checkedOption: OXFieldOptionProps | undefined = this.field.options.find(\n (option: OXFieldOptionProps) => option.value === this.value\n )\n if (!checkedOption) throw new Error('No checked option found')\n\n return checkedOption\n }\n\n get displayValue(): string {\n try {\n return this.checkedOption.name || this.checkedOption.value\n } catch (e) {\n return ''\n }\n }\n\n get searchInput(): HTMLInputElement {\n const searchInput: HTMLInputElement | null = this.renderRoot.querySelector('input#search-input')\n if (!searchInput) throw new Error('No search input found')\n\n return searchInput\n }\n\n setDefaultValue(defaultValue: any): void {\n const input: HTMLInputElement | null = this.renderRoot.querySelector(`input[value=\"${defaultValue}\"]`)\n if (!input) return\n input.checked = true\n\n const option: OXFieldOptionProps | undefined = this.field.options.find(\n (option: OXFieldOptionProps) => option.value === defaultValue\n )\n if (!option) throw new Error('No matched option found')\n\n this.value = option.name || option.value\n }\n\n render(): TemplateResult {\n const { name, hidden, id, options, searchEnable = true, placeholder } = this.field\n\n return html`\n <span class=\"input-wrapper\" ?hidden=${hidden} @click=${this.openPopup.bind(this)}>\n <input\n id=${ifDefined(id)}\n name=${name}\n readonly\n placeholder=${ifDefined(placeholder)}\n .value=${this.displayValue}\n />\n <mwc-icon>keyboard_arrow_down</mwc-icon>\n </span>\n\n <ox-popup-list id=\"popup-list\" multiple>\n ${searchEnable\n ? html`\n <div class=\"search-input-wrapper\">\n <input id=\"search-input\" type=\"text\" @input=${this.onSearchInputHandler.bind(this)} />\n <mwc-icon>search</mwc-icon>\n </div>\n `\n : ''}\n ${options\n .filter(\n (option: OXFieldOptionProps) =>\n option.value.indexOf(this.searchCondition) >= 0 ||\n (option.name && option?.name.indexOf(this.searchCondition) >= 0)\n )\n .map(\n (option: OXFieldOptionProps) => html`\n <label option>\n <input\n name=${name}\n type=\"checkbox\"\n .value=${option.value}\n @change=${this.onValueChange.bind(this)}\n .checked=${this.value === option.value}\n />\n <span>${option.name || option.value}</span>\n </label>\n `\n )}\n </ox-popup-list>\n `\n }\n\n openPopup(event: MouseEvent): void {\n const popupList: OxPopupList | null = this.renderRoot.querySelector('#popup-list')\n if (!popupList) throw new Error('Failed to find popup element')\n\n const offsetHeight: number = this.input.offsetHeight\n const { x, y } = this.input.getBoundingClientRect()\n\n popupList.open({ left: x, top: y + offsetHeight })\n }\n\n onSearchInputHandler(): void {\n this.searchCondition = this.searchInput.value\n }\n\n onValueChange(event: Event): void {\n if (this.value) {\n const prevCheckedInput: HTMLInputElement | null = this.renderRoot.querySelector(`input[value=${this.value}`)\n if (prevCheckedInput) prevCheckedInput.checked = false\n }\n\n const checkedInput: HTMLInputElement | null = event.currentTarget as HTMLInputElement | null\n if (!checkedInput) throw new Error('No checked input found')\n\n if (checkedInput.value === this.value) {\n this.value = ''\n } else {\n const foundOption: OXFieldOptionProps | undefined = this.field.options.find(\n (option: OXFieldOptionProps) => option.value === checkedInput.value\n )\n if (!foundOption) throw new Error('No matched option found')\n\n this.value = foundOption.value\n }\n }\n}\n"]}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { TemplateResult } from 'lit';
|
|
2
|
-
import { OXTextFieldProps } from '..';
|
|
3
|
-
import { OXBasicField } from './ox-basic-field';
|
|
4
|
-
export declare class OXTextField extends OXBasicField {
|
|
5
|
-
field: OXTextFieldProps;
|
|
6
|
-
value: string;
|
|
7
|
-
static styles: import("lit").CSSResult[];
|
|
8
|
-
setDefaultValue(defaultValue: string): void;
|
|
9
|
-
render(): TemplateResult;
|
|
10
|
-
private onChangeHandler;
|
|
11
|
-
}
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { css, html } from 'lit';
|
|
3
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
|
-
import { OXBasicField } from './ox-basic-field';
|
|
6
|
-
let OXTextField = class OXTextField extends OXBasicField {
|
|
7
|
-
constructor() {
|
|
8
|
-
super(...arguments);
|
|
9
|
-
this.value = '';
|
|
10
|
-
}
|
|
11
|
-
setDefaultValue(defaultValue) {
|
|
12
|
-
this.value = defaultValue;
|
|
13
|
-
}
|
|
14
|
-
render() {
|
|
15
|
-
if (!this.field)
|
|
16
|
-
return html ``;
|
|
17
|
-
const { name, hidden, id, placeholder } = this.field;
|
|
18
|
-
return html `
|
|
19
|
-
<label>
|
|
20
|
-
<span class="input-wrapper" ?hidden=${hidden}>
|
|
21
|
-
<input
|
|
22
|
-
id=${ifDefined(id)}
|
|
23
|
-
name=${name}
|
|
24
|
-
type="text"
|
|
25
|
-
placeholder=${ifDefined(placeholder)}
|
|
26
|
-
.value=${this.value}
|
|
27
|
-
@input=${this.onChangeHandler.bind(this)}
|
|
28
|
-
/>
|
|
29
|
-
</span>
|
|
30
|
-
</label>
|
|
31
|
-
`;
|
|
32
|
-
}
|
|
33
|
-
onChangeHandler() {
|
|
34
|
-
this.value = this.input.value;
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
OXTextField.styles = [
|
|
38
|
-
...OXBasicField.styles,
|
|
39
|
-
css `
|
|
40
|
-
label {
|
|
41
|
-
display: inline-flex;
|
|
42
|
-
flex-direction: column;
|
|
43
|
-
}
|
|
44
|
-
span.input-wrapper {
|
|
45
|
-
display: inline-flex;
|
|
46
|
-
border-bottom: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.15));
|
|
47
|
-
}
|
|
48
|
-
`
|
|
49
|
-
];
|
|
50
|
-
__decorate([
|
|
51
|
-
property({ type: Object })
|
|
52
|
-
], OXTextField.prototype, "field", void 0);
|
|
53
|
-
__decorate([
|
|
54
|
-
property({ type: String })
|
|
55
|
-
], OXTextField.prototype, "value", void 0);
|
|
56
|
-
OXTextField = __decorate([
|
|
57
|
-
customElement('ox-text-field')
|
|
58
|
-
], OXTextField);
|
|
59
|
-
export { OXTextField };
|
|
60
|
-
//# sourceMappingURL=ox-text-field.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ox-text-field.js","sourceRoot":"","sources":["../../../src/search-form/ox-text-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGxD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAG/C,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,YAAY;IAA7C;;QAE8B,UAAK,GAAW,EAAE,CAAA;IA4ChD,CAAC;IA5BC,eAAe,CAAC,YAAoB;QAClC,IAAI,CAAC,KAAK,GAAG,YAAY,CAAA;IAC3B,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAA,EAAE,CAAA;QAE9B,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAEpD,OAAO,IAAI,CAAA;;8CAE+B,MAAM;;iBAEnC,SAAS,CAAC,EAAE,CAAC;mBACX,IAAI;;0BAEG,SAAS,CAAC,WAAW,CAAC;qBAC3B,IAAI,CAAC,KAAK;qBACV,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;;;KAI/C,CAAA;IACH,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA;IAC/B,CAAC;CACF,CAAA;AA1CQ,kBAAM,GAAG;IACd,GAAG,YAAY,CAAC,MAAM;IACtB,GAAG,CAAA;;;;;;;;;KASF;CACF,CAAA;AAf2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AAFnC,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA8CvB;SA9CY,WAAW","sourcesContent":["import { css, html, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OXTextFieldProps } from '..'\nimport { OXBasicField } from './ox-basic-field'\n\n@customElement('ox-text-field')\nexport class OXTextField extends OXBasicField {\n @property({ type: Object }) field!: OXTextFieldProps\n @property({ type: String }) value: string = ''\n\n static styles = [\n ...OXBasicField.styles,\n css`\n label {\n display: inline-flex;\n flex-direction: column;\n }\n span.input-wrapper {\n display: inline-flex;\n border-bottom: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.15));\n }\n `\n ]\n\n setDefaultValue(defaultValue: string) {\n this.value = defaultValue\n }\n\n render(): TemplateResult {\n if (!this.field) return html``\n\n const { name, hidden, id, placeholder } = this.field\n\n return html`\n <label>\n <span class=\"input-wrapper\" ?hidden=${hidden}>\n <input\n id=${ifDefined(id)}\n name=${name}\n type=\"text\"\n placeholder=${ifDefined(placeholder)}\n .value=${this.value}\n @input=${this.onChangeHandler.bind(this)}\n />\n </span>\n </label>\n `\n }\n\n private onChangeHandler(): void {\n this.value = this.input.value\n }\n}\n"]}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { DataCardField } from '../data-card-field'
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* ox-card 의 click handler
|
|
5
|
-
*
|
|
6
|
-
* - handler의 this 는 ox-card임.
|
|
7
|
-
*/
|
|
8
|
-
export function dataCardClickHandler(e: MouseEvent): void {
|
|
9
|
-
e.stopPropagation()
|
|
10
|
-
|
|
11
|
-
/* target should be 'ox-record-card' */
|
|
12
|
-
var target = e.target as DataCardField
|
|
13
|
-
var { record, rowIndex } = target
|
|
14
|
-
|
|
15
|
-
/* do rows click handler */
|
|
16
|
-
// var { click: rowsClick } = this.config.rows.handlers
|
|
17
|
-
// var columns = this.config.columns
|
|
18
|
-
// rowsClick && rowsClick(columns, this.data, null /* column */, record, rowIndex, target)
|
|
19
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { DataCardField } from '../data-card-field'
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* ox-card 의 dblclick handler
|
|
5
|
-
*
|
|
6
|
-
* - handler의 this 는 ox-card임.
|
|
7
|
-
*/
|
|
8
|
-
export function dataCardDblclickHandler(e: MouseEvent): void {
|
|
9
|
-
e.stopPropagation()
|
|
10
|
-
|
|
11
|
-
/* target should be 'ox-record-card' */
|
|
12
|
-
var target = e.target as DataCardField
|
|
13
|
-
var { record, rowIndex } = target
|
|
14
|
-
|
|
15
|
-
/* do rows dblclick handler */
|
|
16
|
-
// var { click: rowsDblclick } = this.config.rows.handlers
|
|
17
|
-
// var columns = this.config.columns
|
|
18
|
-
// rowsDblclick && rowsDblclick(columns, this.data, null /* column */, record, rowIndex, target)
|
|
19
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { DataListField } from '../data-list-field'
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* ox-list 의 click handler
|
|
5
|
-
*
|
|
6
|
-
* - handler의 this 는 ox-list임.
|
|
7
|
-
*/
|
|
8
|
-
export function dataListClickHandler(e: MouseEvent): void {
|
|
9
|
-
e.stopPropagation()
|
|
10
|
-
|
|
11
|
-
/* target should be 'record-partial' */
|
|
12
|
-
var target = e.target as DataListField
|
|
13
|
-
var { record, rowIndex } = target
|
|
14
|
-
|
|
15
|
-
/* do rows click handler */
|
|
16
|
-
// var { click: rowsClick } = this.config.rows.handlers
|
|
17
|
-
// var columns = this.config.columns
|
|
18
|
-
// rowsClick && rowsClick(columns, this.data, null /* column */, record, rowIndex, target)
|
|
19
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { DataListField } from '../data-list-field'
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* ox-list 의 dblclick handler
|
|
5
|
-
*
|
|
6
|
-
* - handler의 this 는 ox-list임.
|
|
7
|
-
*/
|
|
8
|
-
export function dataListDblclickHandler(e: MouseEvent): void {
|
|
9
|
-
e.stopPropagation()
|
|
10
|
-
|
|
11
|
-
/* target should be 'record-partial' */
|
|
12
|
-
var target = e.target as DataListField
|
|
13
|
-
var { record, rowIndex } = target
|
|
14
|
-
|
|
15
|
-
/* do rows dblclick handler */
|
|
16
|
-
// var { click: rowsDblclick } = this.config.rows.handlers
|
|
17
|
-
// var columns = this.config.columns
|
|
18
|
-
// rowsDblclick && rowsDblclick(columns, this.data, null /* column */, record, rowIndex, target)
|
|
19
|
-
}
|
package/src/interfaces/index.ts
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
export type OXSearchFieldType = 'select' | 'checkbox' | 'text' | 'number'
|
|
2
|
-
|
|
3
|
-
export interface OXFieldOptionProps {
|
|
4
|
-
name?: string
|
|
5
|
-
value: string
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export interface OXBasicFieldProps {
|
|
9
|
-
name: string
|
|
10
|
-
type?: OXSearchFieldType
|
|
11
|
-
hidden?: boolean
|
|
12
|
-
id?: string
|
|
13
|
-
placeholder?: string
|
|
14
|
-
handlers?: Record<string, (event: Event) => void>
|
|
15
|
-
defaultValue?: any
|
|
16
|
-
operator?: string
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export interface OXTextFieldProps extends OXBasicFieldProps {
|
|
20
|
-
defaultValue?: string
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export interface OXNumberFieldProps extends OXBasicFieldProps {
|
|
24
|
-
min?: number
|
|
25
|
-
max?: number
|
|
26
|
-
step: number
|
|
27
|
-
defaultValue?: number
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export interface OXObjectFieldProps extends OXBasicFieldProps {
|
|
31
|
-
field: string
|
|
32
|
-
queryName: string
|
|
33
|
-
defaultValue?: Record<string, any>
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export interface OXSelectFieldProps extends OXBasicFieldProps {
|
|
37
|
-
searchEnable?: boolean
|
|
38
|
-
options: OXFieldOptionProps[]
|
|
39
|
-
defaultValue?: any
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export interface OXCheckboxFieldProps extends OXBasicFieldProps {
|
|
43
|
-
indeterminate?: boolean
|
|
44
|
-
defaultValue?: boolean
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export type OXSearchFieldProps =
|
|
48
|
-
| OXTextFieldProps
|
|
49
|
-
| OXNumberFieldProps
|
|
50
|
-
| OXObjectFieldProps
|
|
51
|
-
| OXSelectFieldProps
|
|
52
|
-
| OXCheckboxFieldProps
|