@spectric/ui 0.0.23 → 0.0.25
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/dist/components/query_bar/QueryBar.d.ts +2 -0
- package/dist/components/query_bar/querylanguage/kuery/index.d.ts +2 -1
- package/dist/components/query_bar/querylanguage/outputTypes/toHTML.d.ts +15 -0
- package/dist/custom-elements.json +2 -2
- package/dist/index.d.ts +4 -0
- package/dist/index.es.js +2140 -1992
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +159 -153
- package/dist/index.umd.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/input.ts +2 -1
- package/src/components/query_bar/QueryBar.css +47 -0
- package/src/components/query_bar/QueryBar.ts +21 -8
- package/src/components/query_bar/querylanguage/kuery/ast/_generated_/kuery.js +7 -3
- package/src/components/query_bar/querylanguage/kuery/ast/kuery.peg +7 -3
- package/src/components/query_bar/querylanguage/kuery/index.ts +11 -8
- package/src/components/query_bar/querylanguage/outputTypes/toHTML.ts +201 -0
- package/src/components/table/table.css +2 -1
- package/src/components/table/table.ts +31 -10
- package/src/stories/fixtures/ExampleContent.ts +144 -87
|
@@ -1,108 +1,130 @@
|
|
|
1
|
-
|
|
2
|
-
import { filterByColumn, tablecolumns, tabledata, TestData } from "./data";
|
|
1
|
+
import { filterByColumn, getTableColumns, tabledata, TestData } from "./data";
|
|
3
2
|
import { ExampleBits } from "./Bits";
|
|
4
3
|
import { FieldTypes, SpectricQuery } from "../../components/query_bar/QueryBar";
|
|
5
4
|
|
|
6
|
-
import { html, LitElement } from
|
|
5
|
+
import { html, LitElement } from "lit";
|
|
7
6
|
|
|
8
|
-
import { customElement, property, query, state } from
|
|
9
|
-
import "./lorumipsum"
|
|
7
|
+
import { customElement, property, query, state } from "lit/decorators.js";
|
|
8
|
+
import "./lorumipsum";
|
|
10
9
|
import { PaginationProps } from "../../components/pagination";
|
|
11
10
|
import { FilterEvent } from "../../components/table/cell";
|
|
12
11
|
import { TableDataOptions, SpectricTableElement } from "../../components/table";
|
|
12
|
+
const tablecolumns = getTableColumns();
|
|
13
13
|
type Props = {
|
|
14
|
-
frameWidth: number
|
|
15
|
-
}
|
|
16
|
-
@customElement(
|
|
17
|
-
export class SpectricStorybookExampleContent
|
|
14
|
+
frameWidth: number;
|
|
15
|
+
};
|
|
16
|
+
@customElement("spectric-storybook-example-content")
|
|
17
|
+
export class SpectricStorybookExampleContent
|
|
18
|
+
extends LitElement
|
|
19
|
+
implements Props
|
|
20
|
+
{
|
|
18
21
|
protected createRenderRoot(): HTMLElement | DocumentFragment {
|
|
19
|
-
return this
|
|
22
|
+
return this;
|
|
20
23
|
}
|
|
21
24
|
@property({ type: Number, reflect: true })
|
|
22
25
|
frameWidth: number = 10;
|
|
23
26
|
|
|
24
27
|
@query("spectric-query")
|
|
25
|
-
query!: SpectricQuery
|
|
28
|
+
query!: SpectricQuery;
|
|
26
29
|
|
|
27
|
-
private dataSorter =
|
|
30
|
+
private dataSorter =
|
|
31
|
+
SpectricTableElement.getDefaultDataSorterAndPaginatior<TestData>(tabledata);
|
|
28
32
|
@state()
|
|
29
33
|
dialogOpen: boolean = false;
|
|
30
34
|
get tableData() {
|
|
31
|
-
return this.dataSorter(this)
|
|
35
|
+
return this.dataSorter(this);
|
|
32
36
|
}
|
|
33
37
|
|
|
34
|
-
columns = tablecolumns
|
|
38
|
+
columns = tablecolumns;
|
|
35
39
|
pagination: PaginationProps = {
|
|
36
40
|
page: 1,
|
|
37
41
|
pageSize: 3,
|
|
38
42
|
size: "xsmall",
|
|
39
43
|
totalItems: tabledata.length,
|
|
40
|
-
}
|
|
44
|
+
};
|
|
41
45
|
_handleFilter = (e: CustomEvent<FilterEvent<any>>) => {
|
|
42
|
-
let include = e.detail.include ? "" : "not "
|
|
46
|
+
let include = e.detail.include ? "" : "not ";
|
|
43
47
|
if (e.detail.column.key && e.detail.value) {
|
|
44
48
|
if (this.query.value.trim() !== "") {
|
|
45
|
-
this.query.value = `${this.query.value} and ${include}${e.detail.column.key}: '${e.detail.value}'
|
|
49
|
+
this.query.value = `${this.query.value} and ${include}${e.detail.column.key}: '${e.detail.value}'`;
|
|
46
50
|
} else {
|
|
47
|
-
this.query.value = `${include}${e.detail.column.key}: '${e.detail.value}'
|
|
51
|
+
this.query.value = `${include}${e.detail.column.key}: '${e.detail.value}'`;
|
|
48
52
|
}
|
|
49
53
|
}
|
|
50
|
-
}
|
|
54
|
+
};
|
|
51
55
|
_handlePaginationChange = (e: CustomEvent<TableDataOptions<TestData>>) => {
|
|
52
|
-
let { pagination, columns } = e.detail
|
|
53
|
-
this.pagination = { ...this.pagination, ...pagination }
|
|
54
|
-
this.columns = columns
|
|
55
|
-
this.requestUpdate()
|
|
56
|
-
}
|
|
56
|
+
let { pagination, columns } = e.detail;
|
|
57
|
+
this.pagination = { ...this.pagination, ...pagination };
|
|
58
|
+
this.columns = columns;
|
|
59
|
+
this.requestUpdate();
|
|
60
|
+
};
|
|
57
61
|
render() {
|
|
58
62
|
return html`
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
63
|
+
<spectric-dialog
|
|
64
|
+
?open=${this.dialogOpen}
|
|
65
|
+
title="Are you sure you want to delete?"
|
|
66
|
+
?dismissable=${true}
|
|
67
|
+
@close=${() => {
|
|
68
|
+
this.dialogOpen = false;
|
|
69
|
+
}}
|
|
70
|
+
>
|
|
71
|
+
<lorum-ipsum></lorum-ipsum>
|
|
72
|
+
<lorum-ipsum></lorum-ipsum>
|
|
73
|
+
<lorum-ipsum></lorum-ipsum>
|
|
74
|
+
<lorum-ipsum></lorum-ipsum>
|
|
75
|
+
<lorum-ipsum></lorum-ipsum>
|
|
76
|
+
<lorum-ipsum></lorum-ipsum>
|
|
77
|
+
<lorum-ipsum></lorum-ipsum>
|
|
70
78
|
<div slot="footer" style="display:flex;justify-content: space-around;">
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
79
|
+
<spectric-button
|
|
80
|
+
danger
|
|
81
|
+
@click=${() => {
|
|
82
|
+
this.dialogOpen = false;
|
|
83
|
+
setTimeout(() => alert("deleted"), 300);
|
|
84
|
+
}}
|
|
85
|
+
>Delete</spectric-button
|
|
86
|
+
><spectric-button
|
|
87
|
+
variant="text"
|
|
88
|
+
@click=${() => {
|
|
89
|
+
this.dialogOpen = false;
|
|
90
|
+
}}
|
|
91
|
+
>Cancel</spectric-button
|
|
92
|
+
>
|
|
93
|
+
</div>
|
|
78
94
|
</spectric-dialog>
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
95
|
+
<h2>Pages in Spectric UI</h2>
|
|
96
|
+
<p>
|
|
97
|
+
We recommend building UIs with a
|
|
98
|
+
<a
|
|
99
|
+
href="https://componentdriven.org"
|
|
100
|
+
target="_blank"
|
|
101
|
+
rel="noopener noreferrer"
|
|
102
|
+
>
|
|
103
|
+
<strong>component-driven</strong> </a
|
|
104
|
+
>process starting with atomic components and ending with pages.
|
|
105
|
+
</p>
|
|
106
|
+
<spectric-panel>
|
|
107
|
+
Query
|
|
88
108
|
<spectric-query
|
|
89
|
-
.fields=${[
|
|
109
|
+
.fields=${[
|
|
110
|
+
{ name: "modulations", type: "string" },
|
|
111
|
+
{ name: "signal", type: "string" },
|
|
112
|
+
] as FieldTypes[]}
|
|
90
113
|
.getValuesForField=${filterByColumn}
|
|
91
|
-
@change=${(e: CustomEvent<any>) => {
|
|
92
|
-
}}
|
|
114
|
+
@change=${(e: CustomEvent<any>) => {}}
|
|
93
115
|
outputLanguage=${"toDSL"}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
<spectric-table
|
|
116
|
+
>
|
|
117
|
+
</spectric-query>
|
|
118
|
+
<spectric-table
|
|
98
119
|
style="height:200px;"
|
|
99
|
-
.data=${this.tableData}
|
|
100
|
-
.columns=${tablecolumns}
|
|
120
|
+
.data=${this.tableData}
|
|
121
|
+
.columns=${tablecolumns}
|
|
101
122
|
@filter=${this._handleFilter}
|
|
102
123
|
@change=${this._handlePaginationChange}
|
|
103
|
-
.pagination=${this.pagination}
|
|
124
|
+
.pagination=${this.pagination}
|
|
125
|
+
></spectric-table>
|
|
104
126
|
<spectric-panel style="display:flex">
|
|
105
|
-
|
|
127
|
+
<spectric-bit-display
|
|
106
128
|
frameWidth=${this.frameWidth}
|
|
107
129
|
scale=${2}
|
|
108
130
|
.arrayBuffer=${ExampleBits.buffer}
|
|
@@ -111,35 +133,70 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
|
|
|
111
133
|
>
|
|
112
134
|
</spectric-bit-display>
|
|
113
135
|
<spectric-splitview id="splitview-1">
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
136
|
+
<div style="flex-grow:1">
|
|
137
|
+
<h4>Main Settings here</h4>
|
|
138
|
+
<spectric-input
|
|
139
|
+
variant="number"
|
|
140
|
+
.value=${this.frameWidth}
|
|
141
|
+
@change=${(e) => (this.frameWidth = e.target.value)}
|
|
142
|
+
placeholder="frameWidth"
|
|
143
|
+
helpertext="Adjust the framewidth"
|
|
144
|
+
label="Frame Width"
|
|
145
|
+
>
|
|
146
|
+
Input label
|
|
147
|
+
</spectric-input>
|
|
148
|
+
<spectric-button size="small">Submit</spectric-button
|
|
149
|
+
><spectric-button size="small" variant="secondary"
|
|
150
|
+
>Continue</spectric-button
|
|
151
|
+
><spectric-button size="small" variant="text"
|
|
152
|
+
>Cancel</spectric-button
|
|
153
|
+
>
|
|
154
|
+
</div>
|
|
155
|
+
<spectric-panel>
|
|
156
|
+
<h4>OtherSettings here</h4>
|
|
157
|
+
|
|
158
|
+
<spectric-input
|
|
159
|
+
variant="number"
|
|
160
|
+
.value=${this.frameWidth}
|
|
161
|
+
@change=${(e) => (this.frameWidth = e.target.value)}
|
|
162
|
+
placeholder="frameWidth"
|
|
163
|
+
helpertext="Adjust the framewidth"
|
|
164
|
+
label="Frame Width"
|
|
165
|
+
style="flex-grow:1"
|
|
166
|
+
>
|
|
167
|
+
Input label
|
|
168
|
+
</spectric-input>
|
|
169
|
+
<spectric-button size="small">Submit</spectric-button
|
|
170
|
+
><spectric-button size="small" variant="secondary"
|
|
171
|
+
>Continue</spectric-button
|
|
172
|
+
><spectric-button size="small" variant="text"
|
|
173
|
+
>Cancel</spectric-button
|
|
174
|
+
>
|
|
175
|
+
</spectric-panel>
|
|
129
176
|
</spectric-splitview>
|
|
130
|
-
|
|
177
|
+
<spectric-calendar></spectric-calendar>
|
|
131
178
|
</spectric-panel>
|
|
132
179
|
<div style="display:flex">
|
|
133
180
|
<span style="flex-grow:1"></span>
|
|
134
181
|
<spectric-input variant="color" .value=${"#00FF00"}></spectric-input>
|
|
135
|
-
<spectric-button
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
182
|
+
<spectric-button
|
|
183
|
+
size="small"
|
|
184
|
+
danger
|
|
185
|
+
@click=${() => {
|
|
186
|
+
this.dialogOpen = true;
|
|
187
|
+
this.requestUpdate();
|
|
188
|
+
}}
|
|
189
|
+
>Delete (show modal)</spectric-button
|
|
190
|
+
>
|
|
191
|
+
<spectric-button size="small" danger variant="secondary"
|
|
192
|
+
>Override</spectric-button
|
|
193
|
+
>
|
|
194
|
+
<spectric-button size="small" danger variant="text"
|
|
195
|
+
>Disable</spectric-button
|
|
196
|
+
>
|
|
141
197
|
<spectric-button size="small" variant="text">test</spectric-button>
|
|
142
|
-
|
|
143
|
-
|
|
198
|
+
</div></spectric-panel
|
|
199
|
+
>
|
|
200
|
+
`;
|
|
144
201
|
}
|
|
145
|
-
}
|
|
202
|
+
}
|