@spectric/ui 0.0.22 → 0.0.24
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/components/table/table.d.ts +9 -0
- package/dist/custom-elements.json +2 -2
- package/dist/index.d.ts +4 -0
- package/dist/index.es.js +2084 -1988
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +151 -138
- package/dist/index.umd.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/input.css +5 -0
- package/src/components/input.ts +1 -2
- package/src/components/query_bar/QueryBar.css +43 -0
- package/src/components/query_bar/QueryBar.ts +21 -8
- package/src/components/query_bar/querylanguage/kuery/index.ts +11 -8
- package/src/components/query_bar/querylanguage/outputTypes/toHTML.ts +126 -0
- package/src/components/table/cell.ts +21 -8
- package/src/components/table/table.css +9 -3
- package/src/components/table/table.ts +14 -0
- package/src/stories/fixtures/ExampleContent.ts +144 -87
- package/src/stories/fixtures/data.ts +40 -7
- package/src/stories/table.stories.ts +8 -8
|
@@ -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
|
+
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import { html, svg } from "lit";
|
|
1
2
|
import { ColumnSettings } from "../../components/table";
|
|
3
|
+
import { unsafeSVG } from "lit/directives/unsafe-svg.js";
|
|
2
4
|
|
|
3
5
|
export const modulations = [
|
|
4
6
|
"AM",
|
|
@@ -214,10 +216,41 @@ export const tabledata: TestData[] = [
|
|
|
214
216
|
years: 100,
|
|
215
217
|
},
|
|
216
218
|
];
|
|
217
|
-
export const
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
219
|
+
export const getTableColumns = () => {
|
|
220
|
+
const tablecolumns: ColumnSettings<TestData>[] = [
|
|
221
|
+
{ title: "Company", key: "company", width: 200 },
|
|
222
|
+
{ title: "Name", key: "name", sortable: true },
|
|
223
|
+
{
|
|
224
|
+
title: "Contact",
|
|
225
|
+
key: "contact",
|
|
226
|
+
cellActions: [
|
|
227
|
+
{
|
|
228
|
+
tooltip: "Call",
|
|
229
|
+
onClick: (row, _column) => {
|
|
230
|
+
alert(`Calling ${row.name} at ${row.contact}`);
|
|
231
|
+
},
|
|
232
|
+
icon: html`<svg
|
|
233
|
+
width="16px"
|
|
234
|
+
height="16px"
|
|
235
|
+
viewBox="0 0 24 24"
|
|
236
|
+
fill="none"
|
|
237
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
238
|
+
>
|
|
239
|
+
<g>
|
|
240
|
+
<path
|
|
241
|
+
d="M14.05 6C15.0268 6.19057 15.9244 6.66826 16.6281 7.37194C17.3318 8.07561 17.8095 8.97326 18 9.95M14.05 2C16.0793 2.22544 17.9716 3.13417 19.4163 4.57701C20.8609 6.01984 21.7721 7.91101 22 9.94M18.5 21C9.93959 21 3 14.0604 3 5.5C3 5.11378 3.01413 4.73086 3.04189 4.35173C3.07375 3.91662 3.08968 3.69907 3.2037 3.50103C3.29814 3.33701 3.4655 3.18146 3.63598 3.09925C3.84181 3 4.08188 3 4.56201 3H7.37932C7.78308 3 7.98496 3 8.15802 3.06645C8.31089 3.12515 8.44701 3.22049 8.55442 3.3441C8.67601 3.48403 8.745 3.67376 8.88299 4.05321L10.0491 7.26005C10.2096 7.70153 10.2899 7.92227 10.2763 8.1317C10.2643 8.31637 10.2012 8.49408 10.0942 8.64506C9.97286 8.81628 9.77145 8.93713 9.36863 9.17882L8 10C9.2019 12.6489 11.3501 14.7999 14 16L14.8212 14.6314C15.0629 14.2285 15.1837 14.0271 15.3549 13.9058C15.5059 13.7988 15.6836 13.7357 15.8683 13.7237C16.0777 13.7101 16.2985 13.7904 16.74 13.9509L19.9468 15.117C20.3262 15.255 20.516 15.324 20.6559 15.4456C20.7795 15.553 20.8749 15.6891 20.9335 15.842C21 16.015 21 16.2169 21 16.6207V19.438C21 19.9181 21 20.1582 20.9007 20.364C20.8185 20.5345 20.663 20.7019 20.499 20.7963C20.3009 20.9103 20.0834 20.9262 19.6483 20.9581C19.2691 20.9859 18.8862 21 18.5 21Z"
|
|
242
|
+
stroke="#000000"
|
|
243
|
+
stroke-width="2"
|
|
244
|
+
stroke-linecap="round"
|
|
245
|
+
stroke-linejoin="round"
|
|
246
|
+
></path>
|
|
247
|
+
</g>
|
|
248
|
+
</svg>`,
|
|
249
|
+
},
|
|
250
|
+
],
|
|
251
|
+
},
|
|
252
|
+
{ title: "Country", key: "location.country", filterable: true },
|
|
253
|
+
{ title: "Years Employed", key: "years", sortable: true },
|
|
254
|
+
];
|
|
255
|
+
return tablecolumns;
|
|
256
|
+
};
|
|
@@ -15,7 +15,7 @@ import {
|
|
|
15
15
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
16
16
|
import { useArgs } from "@storybook/client-api";
|
|
17
17
|
import { FilterEvent, rowGetValue } from "../components/table/cell";
|
|
18
|
-
import {
|
|
18
|
+
import { getTableColumns, tabledata } from "./fixtures/data";
|
|
19
19
|
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
20
20
|
const data = JSON.parse(
|
|
21
21
|
JSON.stringify([
|
|
@@ -45,7 +45,7 @@ const data = JSON.parse(
|
|
|
45
45
|
...tabledata,
|
|
46
46
|
])
|
|
47
47
|
);
|
|
48
|
-
|
|
48
|
+
|
|
49
49
|
const getData =
|
|
50
50
|
SpectricTableElement.getDefaultDataSorterAndPaginatior<(typeof tabledata)[0]>(
|
|
51
51
|
data
|
|
@@ -101,7 +101,7 @@ const meta = {
|
|
|
101
101
|
size: "xsmall",
|
|
102
102
|
totalItems: data.length,
|
|
103
103
|
},
|
|
104
|
-
columns:
|
|
104
|
+
columns: getTableColumns(),
|
|
105
105
|
select: TableSelectOptions.none,
|
|
106
106
|
},
|
|
107
107
|
} satisfies Meta<Props<(typeof tabledata)[0]>>;
|
|
@@ -118,7 +118,7 @@ export const Basic: Story = {
|
|
|
118
118
|
size: "xsmall",
|
|
119
119
|
totalItems: data.length,
|
|
120
120
|
},
|
|
121
|
-
columns:
|
|
121
|
+
columns: getTableColumns(),
|
|
122
122
|
},
|
|
123
123
|
};
|
|
124
124
|
|
|
@@ -126,21 +126,21 @@ export const Basic: Story = {
|
|
|
126
126
|
export const NoPagination: Story = {
|
|
127
127
|
args: {
|
|
128
128
|
pagination: undefined,
|
|
129
|
-
columns:
|
|
129
|
+
columns: getTableColumns(),
|
|
130
130
|
},
|
|
131
131
|
};
|
|
132
132
|
|
|
133
133
|
export const MultiSelect: Story = {
|
|
134
134
|
args: {
|
|
135
135
|
select: "multi",
|
|
136
|
-
columns:
|
|
136
|
+
columns: getTableColumns(),
|
|
137
137
|
},
|
|
138
138
|
};
|
|
139
139
|
|
|
140
140
|
export const SingleSelect: Story = {
|
|
141
141
|
args: {
|
|
142
142
|
select: "single",
|
|
143
|
-
columns:
|
|
143
|
+
columns: getTableColumns(),
|
|
144
144
|
},
|
|
145
145
|
};
|
|
146
146
|
|
|
@@ -150,7 +150,7 @@ export const SingleSelect: Story = {
|
|
|
150
150
|
export const MultiColumnSort: Story = {
|
|
151
151
|
args: {
|
|
152
152
|
sort: "multi",
|
|
153
|
-
columns:
|
|
153
|
+
columns: getTableColumns(),
|
|
154
154
|
pagination: { pageSize: 20, page: 1 },
|
|
155
155
|
},
|
|
156
156
|
};
|