@operato/input 2.0.0-beta.17 → 2.0.0-beta.19
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-table-column-config.d.ts +1 -2
- package/dist/src/ox-input-table-column-config.js +51 -24
- package/dist/src/ox-input-table-column-config.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/ox-input-table-column-config.ts +52 -25
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
|
+
## [2.0.0-beta.19](https://github.com/hatiolab/operato/compare/v2.0.0-beta.18...v2.0.0-beta.19) (2024-06-11)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :rocket: New Features
|
|
10
|
+
|
|
11
|
+
* gantt chart ([3daba7f](https://github.com/hatiolab/operato/commit/3daba7fbd8c270dc01c72b8d6602de75b370d59e))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [2.0.0-beta.18](https://github.com/hatiolab/operato/compare/v2.0.0-beta.17...v2.0.0-beta.18) (2024-06-11)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :rocket: New Features
|
|
19
|
+
|
|
20
|
+
* ox-input-table-column-config ([39be540](https://github.com/hatiolab/operato/commit/39be54054e210f6ce5d55499dffe78f4426d0d76))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## [2.0.0-beta.17](https://github.com/hatiolab/operato/compare/v2.0.0-beta.16...v2.0.0-beta.17) (2024-06-11)
|
|
7
25
|
|
|
8
26
|
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { OxFormField } from './ox-form-field';
|
|
2
|
-
import '@material/web/checkbox/checkbox.js';
|
|
3
2
|
import '@material/web/icon/icon.js';
|
|
4
3
|
export interface ColumnConfig {
|
|
5
4
|
name: string;
|
|
6
5
|
label: string;
|
|
7
6
|
visible: boolean;
|
|
8
|
-
width:
|
|
7
|
+
width: number;
|
|
9
8
|
order: number;
|
|
10
9
|
}
|
|
11
10
|
export declare class OxInputTableColumnConfig extends OxFormField {
|
|
@@ -2,7 +2,6 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { css, html } from 'lit';
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
4
|
import { OxFormField } from './ox-form-field';
|
|
5
|
-
import '@material/web/checkbox/checkbox.js';
|
|
6
5
|
import '@material/web/icon/icon.js';
|
|
7
6
|
let OxInputTableColumnConfig = class OxInputTableColumnConfig extends OxFormField {
|
|
8
7
|
constructor() {
|
|
@@ -15,30 +14,48 @@ let OxInputTableColumnConfig = class OxInputTableColumnConfig extends OxFormFiel
|
|
|
15
14
|
display: block;
|
|
16
15
|
padding: 4px;
|
|
17
16
|
border: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));
|
|
18
|
-
background-color: var(--ox-input-table-column-config-background-color,
|
|
17
|
+
background-color: var(--ox-input-table-column-config-background-color, var(--md-sys-color-surface));
|
|
18
|
+
color: var(--ox-input-table-column-config-color, var(--md-sys-color-on-surface));
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
table {
|
|
22
22
|
width: auto;
|
|
23
23
|
border-collapse: collapse;
|
|
24
24
|
font-size: 12px;
|
|
25
|
+
border: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
tr {
|
|
29
|
+
border-bottom: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));
|
|
25
30
|
}
|
|
26
31
|
|
|
27
32
|
th,
|
|
28
33
|
td {
|
|
29
|
-
|
|
30
|
-
padding: 0;
|
|
34
|
+
padding: 0 var(--spacing-small, 2px);
|
|
31
35
|
text-align: left;
|
|
32
36
|
}
|
|
33
37
|
|
|
34
38
|
th {
|
|
39
|
+
text-transform: capitalize;
|
|
40
|
+
text-align: center;
|
|
35
41
|
background-color: var(
|
|
36
42
|
--ox-input-table-column-config-header-background-color,
|
|
37
43
|
var(--md-sys-color-secondary-container)
|
|
38
44
|
);
|
|
45
|
+
color: var(--ox-input-table-column-config-header-background-color, var(--md-sys-color-on-secondary-container));
|
|
39
46
|
white-space: nowrap;
|
|
40
47
|
}
|
|
41
48
|
|
|
49
|
+
th *,
|
|
50
|
+
td * {
|
|
51
|
+
vertical-align: middle;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
td[width] {
|
|
55
|
+
width: 60px;
|
|
56
|
+
text-align: right;
|
|
57
|
+
}
|
|
58
|
+
|
|
42
59
|
input {
|
|
43
60
|
font-size: 12px;
|
|
44
61
|
padding: 0;
|
|
@@ -46,25 +63,28 @@ let OxInputTableColumnConfig = class OxInputTableColumnConfig extends OxFormFiel
|
|
|
46
63
|
border: none;
|
|
47
64
|
width: 100%;
|
|
48
65
|
box-sizing: border-box;
|
|
66
|
+
outline: none;
|
|
67
|
+
background-color: var(--ox-input-table-column-config-input-background-color, var(--md-sys-color-surface));
|
|
68
|
+
color: var(--ox-input-table-column-config-input-color, var(--md-sys-color-on-surface));
|
|
49
69
|
}
|
|
50
70
|
|
|
51
|
-
|
|
71
|
+
input[type='number'] {
|
|
72
|
+
text-align: right;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
md-icon {
|
|
52
76
|
cursor: pointer;
|
|
53
|
-
display: inline-flex;
|
|
54
|
-
align-items: center;
|
|
55
|
-
justify-content: center;
|
|
56
77
|
padding: 0;
|
|
57
78
|
margin: 0;
|
|
58
79
|
border: none;
|
|
59
80
|
background: none;
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
height: 24px;
|
|
63
|
-
box-sizing: border-box;
|
|
81
|
+
|
|
82
|
+
--md-icon-size: 16px;
|
|
64
83
|
}
|
|
65
84
|
|
|
66
|
-
|
|
85
|
+
md-icon[disabled] {
|
|
67
86
|
cursor: not-allowed;
|
|
87
|
+
color: var(--ox-input-table-column-config-disabled-color, var(--md-sys-color-surface-variant, #ccc));
|
|
68
88
|
}
|
|
69
89
|
`
|
|
70
90
|
]; }
|
|
@@ -74,27 +94,34 @@ let OxInputTableColumnConfig = class OxInputTableColumnConfig extends OxFormFiel
|
|
|
74
94
|
<thead>
|
|
75
95
|
<tr>
|
|
76
96
|
<th></th>
|
|
77
|
-
<th>
|
|
78
|
-
<th>
|
|
79
|
-
<th>
|
|
80
|
-
<th
|
|
97
|
+
<th>name</th>
|
|
98
|
+
<th>label</th>
|
|
99
|
+
<th>width</th>
|
|
100
|
+
<th></th>
|
|
81
101
|
</tr>
|
|
82
102
|
</thead>
|
|
83
103
|
<tbody>
|
|
84
104
|
${this.value.map((col, index) => html `
|
|
85
105
|
<tr name=${col.name}>
|
|
86
106
|
<td>
|
|
87
|
-
<
|
|
88
|
-
|
|
107
|
+
<input
|
|
108
|
+
type="checkbox"
|
|
109
|
+
.checked=${col.visible}
|
|
110
|
+
@change=${(e) => this._updateVisibility(e, index)}
|
|
111
|
+
/>
|
|
89
112
|
</td>
|
|
90
|
-
<td>${col.name}</td>
|
|
113
|
+
<td name>${col.name}</td>
|
|
91
114
|
<td>
|
|
92
115
|
<input type="text" .value=${col.label} @input=${(e) => this._updateLabel(e, index)} />
|
|
93
116
|
</td>
|
|
94
|
-
<td>
|
|
95
|
-
<input
|
|
117
|
+
<td width>
|
|
118
|
+
<input
|
|
119
|
+
type="number"
|
|
120
|
+
.value=${String(col.width)}
|
|
121
|
+
@input=${(e) => this._updateWidth(e, index)}
|
|
122
|
+
/>
|
|
96
123
|
</td>
|
|
97
|
-
<td>
|
|
124
|
+
<td buttons>
|
|
98
125
|
<md-icon class="icon-button" @click=${() => this._moveUp(index)} ?disabled=${index === 0}>
|
|
99
126
|
arrow_upward
|
|
100
127
|
</md-icon>
|
|
@@ -126,7 +153,7 @@ let OxInputTableColumnConfig = class OxInputTableColumnConfig extends OxFormFiel
|
|
|
126
153
|
}
|
|
127
154
|
_updateWidth(event, index) {
|
|
128
155
|
const target = event.target;
|
|
129
|
-
this.value[index].width = target.
|
|
156
|
+
this.value[index].width = target.valueAsNumber;
|
|
130
157
|
this.requestUpdate();
|
|
131
158
|
this._notifyChange();
|
|
132
159
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-table-column-config.js","sourceRoot":"","sources":["../../src/ox-input-table-column-config.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,
|
|
1
|
+
{"version":3,"file":"ox-input-table-column-config.js","sourceRoot":"","sources":["../../src/ox-input-table-column-config.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { OxFormField } from './ox-form-field'\nimport '@material/web/icon/icon.js'\n\nexport interface ColumnConfig {\n name: string\n label: string\n visible: boolean\n width: number\n order: number\n}\n\n@customElement('ox-input-table-column-config')\nexport class OxInputTableColumnConfig extends OxFormField {\n static styles = [\n css`\n :host {\n display: block;\n padding: 4px;\n border: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));\n background-color: var(--ox-input-table-column-config-background-color, var(--md-sys-color-surface));\n color: var(--ox-input-table-column-config-color, var(--md-sys-color-on-surface));\n }\n\n table {\n width: auto;\n border-collapse: collapse;\n font-size: 12px;\n border: 0;\n }\n\n tr {\n border-bottom: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));\n }\n\n th,\n td {\n padding: 0 var(--spacing-small, 2px);\n text-align: left;\n }\n\n th {\n text-transform: capitalize;\n text-align: center;\n background-color: var(\n --ox-input-table-column-config-header-background-color,\n var(--md-sys-color-secondary-container)\n );\n color: var(--ox-input-table-column-config-header-background-color, var(--md-sys-color-on-secondary-container));\n white-space: nowrap;\n }\n\n th *,\n td * {\n vertical-align: middle;\n }\n\n td[width] {\n width: 60px;\n text-align: right;\n }\n\n input {\n font-size: 12px;\n padding: 0;\n margin: 0;\n border: none;\n width: 100%;\n box-sizing: border-box;\n outline: none;\n background-color: var(--ox-input-table-column-config-input-background-color, var(--md-sys-color-surface));\n color: var(--ox-input-table-column-config-input-color, var(--md-sys-color-on-surface));\n }\n\n input[type='number'] {\n text-align: right;\n }\n\n md-icon {\n cursor: pointer;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n\n --md-icon-size: 16px;\n }\n\n md-icon[disabled] {\n cursor: not-allowed;\n color: var(--ox-input-table-column-config-disabled-color, var(--md-sys-color-surface-variant, #ccc));\n }\n `\n ]\n\n @property({ type: Array }) value: ColumnConfig[] = []\n\n render() {\n return html`\n <table>\n <thead>\n <tr>\n <th></th>\n <th>name</th>\n <th>label</th>\n <th>width</th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n ${this.value.map(\n (col, index) => html`\n <tr name=${col.name}>\n <td>\n <input\n type=\"checkbox\"\n .checked=${col.visible}\n @change=${(e: Event) => this._updateVisibility(e, index)}\n />\n </td>\n <td name>${col.name}</td>\n <td>\n <input type=\"text\" .value=${col.label} @input=${(e: Event) => this._updateLabel(e, index)} />\n </td>\n <td width>\n <input\n type=\"number\"\n .value=${String(col.width)}\n @input=${(e: Event) => this._updateWidth(e, index)}\n />\n </td>\n <td buttons>\n <md-icon class=\"icon-button\" @click=${() => this._moveUp(index)} ?disabled=${index === 0}>\n arrow_upward\n </md-icon>\n <md-icon\n class=\"icon-button\"\n @click=${() => this._moveDown(index)}\n ?disabled=${index === this.value.length - 1}\n >\n arrow_downward\n </md-icon>\n </td>\n </tr>\n `\n )}\n </tbody>\n </table>\n `\n }\n\n private _updateVisibility(event: Event, index: number) {\n const target = event.target as HTMLInputElement\n this.value[index].visible = target.checked\n this.requestUpdate()\n this._notifyChange()\n }\n\n private _updateLabel(event: Event, index: number) {\n const target = event.target as HTMLInputElement\n this.value[index].label = target.value\n this.requestUpdate()\n this._notifyChange()\n }\n\n private _updateWidth(event: Event, index: number) {\n const target = event.target as HTMLInputElement\n this.value[index].width = target.valueAsNumber\n this.requestUpdate()\n this._notifyChange()\n }\n\n private _moveUp(index: number) {\n if (index === 0) return\n const temp = this.value[index]\n this.value[index] = this.value[index - 1]\n this.value[index - 1] = temp\n this._updateOrder()\n this.requestUpdate()\n this._notifyChange()\n }\n\n private _moveDown(index: number) {\n if (index === this.value.length - 1) return\n const temp = this.value[index]\n this.value[index] = this.value[index + 1]\n this.value[index + 1] = temp\n this._updateOrder()\n this.requestUpdate()\n this._notifyChange()\n }\n\n private _updateOrder() {\n this.value = this.value.map((col, index) => ({\n ...col,\n order: index + 1\n }))\n }\n\n private _notifyChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value,\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
|