@supersoniks/concorde 1.1.9 → 1.1.12
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/core/components/functional/configuration/configuration.d.ts +5 -0
- package/core/components/functional/configuration/configuration.js +21 -0
- package/core/components/functional/date/date.js +3 -2
- package/core/components/functional/fetch/fetch.d.ts +32 -11
- package/core/components/functional/fetch/fetch.js +28 -12
- package/core/components/functional/functional.d.ts +1 -0
- package/core/components/functional/functional.js +1 -0
- package/core/components/functional/list/list.d.ts +15 -7
- package/core/components/functional/list/list.js +50 -20
- package/core/components/functional/sonic-scope/sonic-scope.d.ts +5 -0
- package/core/components/functional/sonic-scope/sonic-scope.js +20 -0
- package/core/components/functional/states/states.js +0 -2
- package/core/components/functional/submit/submit.d.ts +2 -0
- package/core/components/functional/submit/submit.js +23 -8
- package/core/components/ui/alert/alert.js +4 -5
- package/core/components/ui/badge/badge.js +0 -1
- package/core/components/ui/button/button.d.ts +11 -3
- package/core/components/ui/button/button.js +20 -17
- package/core/components/ui/card/card-footer.d.ts +5 -0
- package/core/components/ui/card/card-footer.js +27 -0
- package/core/components/ui/card/card-header-descripton.d.ts +5 -0
- package/core/components/ui/card/card-header-descripton.js +33 -0
- package/core/components/ui/card/card-header.d.ts +8 -0
- package/core/components/ui/card/card-header.js +67 -0
- package/core/components/ui/card/card-main.d.ts +5 -0
- package/core/components/ui/card/card-main.js +29 -0
- package/core/components/ui/card/card.d.ts +12 -0
- package/core/components/ui/card/card.js +90 -0
- package/core/components/ui/form/checkbox/checkbox.d.ts +4 -4
- package/core/components/ui/form/checkbox/checkbox.js +3 -4
- package/core/components/ui/form/css/form-control.js +2 -0
- package/core/components/ui/form/fieldset/fieldset.js +1 -1
- package/core/components/ui/form/fieldset/legend-description.d.ts +5 -0
- package/core/components/ui/form/fieldset/legend-description.js +35 -0
- package/core/components/ui/form/fieldset/legend.d.ts +4 -5
- package/core/components/ui/form/fieldset/legend.js +21 -25
- package/core/components/ui/form/input/input.d.ts +3 -3
- package/core/components/ui/form/input/input.js +3 -3
- package/core/components/ui/form/textarea/textarea.d.ts +2 -2
- package/core/components/ui/form/textarea/textarea.js +2 -2
- package/core/components/ui/icon/icon.d.ts +16 -4
- package/core/components/ui/icon/icon.js +52 -6
- package/core/components/ui/icon/icons.d.ts +3 -2
- package/core/components/ui/icon/icons.js +78 -7
- package/core/components/ui/icon/icons.json +1 -1
- package/core/components/ui/link/link.d.ts +10 -1
- package/core/components/ui/link/link.js +21 -2
- package/core/components/ui/menu/menu.d.ts +11 -5
- package/core/components/ui/menu/menu.js +81 -35
- package/core/components/ui/pop/pop.js +5 -2
- package/core/components/ui/progress/progress.d.ts +9 -0
- package/core/components/ui/progress/progress.js +138 -0
- package/core/components/ui/table/table-caption.d.ts +5 -0
- package/core/components/ui/table/table-caption.js +24 -0
- package/core/components/ui/table/table-tbody.d.ts +5 -0
- package/core/components/ui/table/table-tbody.js +37 -0
- package/core/components/ui/table/table-td.d.ts +7 -0
- package/core/components/ui/table/table-td.js +45 -0
- package/core/components/ui/table/table-tfoot.d.ts +5 -0
- package/core/components/ui/table/table-tfoot.js +23 -0
- package/core/components/ui/table/table-th.d.ts +6 -0
- package/core/components/ui/table/table-th.js +43 -0
- package/core/components/ui/table/table-thead.d.ts +5 -0
- package/core/components/ui/table/table-thead.js +24 -0
- package/core/components/ui/table/table-tr.d.ts +5 -0
- package/core/components/ui/table/table-tr.js +24 -0
- package/core/components/ui/table/table.d.ts +16 -0
- package/core/components/ui/table/table.js +88 -0
- package/core/components/ui/tabs/tabs.d.ts +1 -0
- package/core/components/ui/tabs/tabs.js +7 -3
- package/core/components/ui/theme/theme-collection/core-variables.js +1 -1
- package/core/components/ui/theme/theme-collection/dark.js +3 -2
- package/core/components/ui/theme/theme-collection/light.js +1 -0
- package/core/components/ui/tooltip/tooltip.d.ts +1 -1
- package/core/components/ui/tooltip/tooltip.js +4 -4
- package/core/components/ui/ui.d.ts +3 -3
- package/core/components/ui/ui.js +5 -3
- package/core/mixins/Fetcher.d.ts +11 -9
- package/core/mixins/Fetcher.js +22 -4
- package/core/mixins/FormCheckable.d.ts +2 -2
- package/core/mixins/FormInput.d.ts +2 -2
- package/core/mixins/Subscriber.d.ts +2 -2
- package/core/mixins/Subscriber.js +0 -15
- package/core/utils/Electron.d.ts +3 -0
- package/core/utils/Electron.js +8 -0
- package/core/utils/LocationHandler.d.ts +2 -1
- package/core/utils/LocationHandler.js +25 -2
- package/core/utils/Objects.d.ts +2 -1
- package/core/utils/Objects.js +8 -2
- package/core/utils/PublisherProxy.mjs +42 -12
- package/core/utils/api.js +1 -1
- package/package.json +40 -1
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
export declare class Progress extends LitElement {
|
|
3
|
+
static styles: import("lit").CSSResult[];
|
|
4
|
+
value?: number;
|
|
5
|
+
max: number;
|
|
6
|
+
type: "default" | "primary" | "warning" | "danger" | "success" | "info";
|
|
7
|
+
size: "xs" | "sm" | "md" | "lg" | "xl";
|
|
8
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
9
|
+
}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, LitElement, css } from "lit";
|
|
8
|
+
import { customElement, property } from "lit/decorators.js";
|
|
9
|
+
import { ifDefined } from "lit/directives/if-defined.js";
|
|
10
|
+
let Progress = class Progress extends LitElement {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
this.max = 100;
|
|
14
|
+
this.type = "default";
|
|
15
|
+
this.size = "md";
|
|
16
|
+
}
|
|
17
|
+
render() {
|
|
18
|
+
return html `
|
|
19
|
+
<progress value=${ifDefined(this.value)} max=${this.max}></progress>
|
|
20
|
+
<slot></slot>
|
|
21
|
+
`;
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
Progress.styles = [
|
|
25
|
+
css `
|
|
26
|
+
|
|
27
|
+
:host {
|
|
28
|
+
--sc-progress-bg: var(--sc-input-bg, var(--sc-base-100, #f5f5f5));
|
|
29
|
+
--sc-progress-color: var(--sc-base-content, #1f2937);
|
|
30
|
+
--sc-progress-height: .6rem;
|
|
31
|
+
--sc-progress-fs: 1rem;
|
|
32
|
+
--sc-progress-fw: 500;
|
|
33
|
+
--sc-progress-rounded: var(--sc-rounded-lg);
|
|
34
|
+
font-weight:var(--sc-progress-fw);
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-wrap: wrap;
|
|
37
|
+
line-height: 1.2;
|
|
38
|
+
font-size:var(--sc-progress-fs);
|
|
39
|
+
color:var(--sc-progress-color);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
progress {
|
|
43
|
+
position: relative;
|
|
44
|
+
width: 100%;
|
|
45
|
+
-webkit-appearance: none;
|
|
46
|
+
appearance: none;
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
height: var(--sc-progress-height);
|
|
49
|
+
border-radius: var(--sc-progress-rounded);
|
|
50
|
+
background-color: var(--sc-progress-bg);
|
|
51
|
+
color: var(--sc-progress-color);
|
|
52
|
+
border:none;
|
|
53
|
+
}
|
|
54
|
+
progress::-moz-progress-bar {
|
|
55
|
+
background-color: var(--sc-progress-color);
|
|
56
|
+
border-radius: var(--sc-progress-rounded);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
progress::-webkit-progress-bar {
|
|
60
|
+
background-color: var(--sc-progress-bg);
|
|
61
|
+
}
|
|
62
|
+
progress::-webkit-progress-value {
|
|
63
|
+
background-color: var(--sc-progress-color);
|
|
64
|
+
border-radius: var(--sc-progress-rounded);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
progress:indeterminate:after {
|
|
68
|
+
background-color: var(--sc-progress-color);
|
|
69
|
+
content: "";
|
|
70
|
+
position: absolute;
|
|
71
|
+
top: 0;
|
|
72
|
+
bottom: 0;
|
|
73
|
+
left: -40%;
|
|
74
|
+
width: 33.333333%;
|
|
75
|
+
border-radius: var(--sc-progress-rounded);
|
|
76
|
+
animation: progress-loading 3s infinite ease-in-out;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@keyframes progress-loading {
|
|
80
|
+
50% {
|
|
81
|
+
left: 107%;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* COLOR TYPES */
|
|
86
|
+
:host([type="warning"]) {
|
|
87
|
+
--sc-progress-color: var(--sc-warning);
|
|
88
|
+
}
|
|
89
|
+
:host([type="danger"]) {
|
|
90
|
+
--sc-progress-color: var(--sc-danger);
|
|
91
|
+
}
|
|
92
|
+
:host([type="info"]) {
|
|
93
|
+
--sc-progress-color: var(--sc-info);
|
|
94
|
+
}
|
|
95
|
+
:host([type="success"]) {
|
|
96
|
+
--sc-progress-color: var(--sc-success);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* SIZES */
|
|
100
|
+
:host([size="xs"]) {
|
|
101
|
+
--sc-progress-height:.25rem;
|
|
102
|
+
--sc-progress-fs: 0.68rem;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
:host([size="sm"]) {
|
|
106
|
+
--sc-progress-height:.4rem;
|
|
107
|
+
--sc-progress-fs: 0.85rem;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
:host([size="lg"]) {
|
|
111
|
+
--sc-progress-height:1rem;
|
|
112
|
+
--sc-progress-fs: 1.25rem;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
:host([size="xl"]) {
|
|
116
|
+
--sc-progress-height:1.5rem;
|
|
117
|
+
--sc-progress-fs: 1.5rem;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
`
|
|
122
|
+
];
|
|
123
|
+
__decorate([
|
|
124
|
+
property({ type: Number })
|
|
125
|
+
], Progress.prototype, "value", void 0);
|
|
126
|
+
__decorate([
|
|
127
|
+
property({ type: Number })
|
|
128
|
+
], Progress.prototype, "max", void 0);
|
|
129
|
+
__decorate([
|
|
130
|
+
property({ type: String, reflect: true })
|
|
131
|
+
], Progress.prototype, "type", void 0);
|
|
132
|
+
__decorate([
|
|
133
|
+
property({ type: String, reflect: true })
|
|
134
|
+
], Progress.prototype, "size", void 0);
|
|
135
|
+
Progress = __decorate([
|
|
136
|
+
customElement("sonic-progress")
|
|
137
|
+
], Progress);
|
|
138
|
+
export { Progress };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, LitElement, css } from "lit";
|
|
8
|
+
import { customElement } from "lit/decorators.js";
|
|
9
|
+
let TableCaption = class TableCaption extends LitElement {
|
|
10
|
+
render() {
|
|
11
|
+
return html `<slot></slot>`;
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
TableCaption.styles = [
|
|
15
|
+
css `
|
|
16
|
+
:host {
|
|
17
|
+
display: table-caption;
|
|
18
|
+
}
|
|
19
|
+
`
|
|
20
|
+
];
|
|
21
|
+
TableCaption = __decorate([
|
|
22
|
+
customElement("sonic-caption")
|
|
23
|
+
], TableCaption);
|
|
24
|
+
export { TableCaption };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, LitElement, css } from "lit";
|
|
8
|
+
import { customElement } from "lit/decorators.js";
|
|
9
|
+
let TableTbody = class TableTbody extends LitElement {
|
|
10
|
+
render() {
|
|
11
|
+
return html `<tbody><slot></slot></tbody>`;
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
TableTbody.styles = [
|
|
15
|
+
css `
|
|
16
|
+
:host {
|
|
17
|
+
display: contents;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
::slotted(sonic-tr:nth-child(odd)){
|
|
21
|
+
background:var(--sc-base-50);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
::slotted(sonic-tr:hover) {
|
|
25
|
+
background:var(--sc-base-100);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
::slotted(sonic-tr:not(:last-child)){
|
|
29
|
+
border-bottom:var(--sc-form-border-width) solid var(--sc-base-200) !important;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
`
|
|
33
|
+
];
|
|
34
|
+
TableTbody = __decorate([
|
|
35
|
+
customElement("sonic-tbody")
|
|
36
|
+
], TableTbody);
|
|
37
|
+
export { TableTbody };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, LitElement, css } from "lit";
|
|
8
|
+
import { customElement, property } from "lit/decorators.js";
|
|
9
|
+
import { ifDefined } from "lit/directives/if-defined.js";
|
|
10
|
+
let TableTd = class TableTd extends LitElement {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
this.colSpan = null;
|
|
14
|
+
this.rowSpan = null;
|
|
15
|
+
}
|
|
16
|
+
render() {
|
|
17
|
+
return html `<td
|
|
18
|
+
colspan=${ifDefined(this.colSpan)}
|
|
19
|
+
rowspan=${ifDefined(this.rowSpan)}
|
|
20
|
+
part="td"
|
|
21
|
+
><slot></slot></td>`;
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
TableTd.styles = [
|
|
25
|
+
css `
|
|
26
|
+
:host {
|
|
27
|
+
display: contents;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
td {
|
|
31
|
+
text-transform:var(--sc-th-tt);
|
|
32
|
+
text-align:inherit;
|
|
33
|
+
padding:.3em .5em;
|
|
34
|
+
}`
|
|
35
|
+
];
|
|
36
|
+
__decorate([
|
|
37
|
+
property({ type: Number })
|
|
38
|
+
], TableTd.prototype, "colSpan", void 0);
|
|
39
|
+
__decorate([
|
|
40
|
+
property({ type: Number })
|
|
41
|
+
], TableTd.prototype, "rowSpan", void 0);
|
|
42
|
+
TableTd = __decorate([
|
|
43
|
+
customElement("sonic-td")
|
|
44
|
+
], TableTd);
|
|
45
|
+
export { TableTd };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, LitElement, css } from "lit";
|
|
8
|
+
import { customElement } from "lit/decorators.js";
|
|
9
|
+
let TableTfoot = class TableTfoot extends LitElement {
|
|
10
|
+
render() {
|
|
11
|
+
return html `<tfoot><slot></slot></tfoot>`;
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
TableTfoot.styles = [
|
|
15
|
+
css `
|
|
16
|
+
:host {
|
|
17
|
+
display: contents;
|
|
18
|
+
}`
|
|
19
|
+
];
|
|
20
|
+
TableTfoot = __decorate([
|
|
21
|
+
customElement("sonic-tfoot")
|
|
22
|
+
], TableTfoot);
|
|
23
|
+
export { TableTfoot };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, LitElement, css } from "lit";
|
|
8
|
+
import { customElement, property } from "lit/decorators.js";
|
|
9
|
+
import { styleMap } from "lit/directives/style-map.js";
|
|
10
|
+
let TableTh = class TableTh extends LitElement {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
this.align = "left";
|
|
14
|
+
}
|
|
15
|
+
render() {
|
|
16
|
+
const styles = {
|
|
17
|
+
textAlign: this.align,
|
|
18
|
+
};
|
|
19
|
+
return html `<th part="th" style=${styleMap(styles)} ><slot></slot></th>
|
|
20
|
+
`;
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
TableTh.styles = [
|
|
24
|
+
css `
|
|
25
|
+
:host {
|
|
26
|
+
display: contents;
|
|
27
|
+
--sc-th-tt:uppercase;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
th {
|
|
31
|
+
text-transform:var(--sc-th-tt);
|
|
32
|
+
text-align:inherit;
|
|
33
|
+
padding:.3em .5em;
|
|
34
|
+
}
|
|
35
|
+
`
|
|
36
|
+
];
|
|
37
|
+
__decorate([
|
|
38
|
+
property({ type: String, reflect: true })
|
|
39
|
+
], TableTh.prototype, "align", void 0);
|
|
40
|
+
TableTh = __decorate([
|
|
41
|
+
customElement("sonic-th")
|
|
42
|
+
], TableTh);
|
|
43
|
+
export { TableTh };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, LitElement, css } from "lit";
|
|
8
|
+
import { customElement } from "lit/decorators.js";
|
|
9
|
+
let TableThead = class TableThead extends LitElement {
|
|
10
|
+
render() {
|
|
11
|
+
return html `<slot></slot>`;
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
TableThead.styles = [
|
|
15
|
+
css `
|
|
16
|
+
:host {
|
|
17
|
+
display: table-row-group;
|
|
18
|
+
}
|
|
19
|
+
`
|
|
20
|
+
];
|
|
21
|
+
TableThead = __decorate([
|
|
22
|
+
customElement("sonic-thead")
|
|
23
|
+
], TableThead);
|
|
24
|
+
export { TableThead };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, LitElement, css } from "lit";
|
|
8
|
+
import { customElement } from "lit/decorators.js";
|
|
9
|
+
let TableTr = class TableTr extends LitElement {
|
|
10
|
+
render() {
|
|
11
|
+
return html `<slot></slot>`;
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
TableTr.styles = [
|
|
15
|
+
css `
|
|
16
|
+
:host {
|
|
17
|
+
display: table-row;
|
|
18
|
+
}
|
|
19
|
+
`
|
|
20
|
+
];
|
|
21
|
+
TableTr = __decorate([
|
|
22
|
+
customElement("sonic-tr")
|
|
23
|
+
], TableTr);
|
|
24
|
+
export { TableTr };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
import "./table-tr.ts";
|
|
3
|
+
import "./table-th.ts";
|
|
4
|
+
import "./table-td.ts";
|
|
5
|
+
import "./table-thead.ts";
|
|
6
|
+
import "./table-tbody.ts";
|
|
7
|
+
import "./table-tfoot.ts";
|
|
8
|
+
import "./table-caption.ts";
|
|
9
|
+
export declare class Table extends LitElement {
|
|
10
|
+
static styles: import("lit").CSSResult[];
|
|
11
|
+
size: "xs" | "sm" | "md" | "lg" | "xl";
|
|
12
|
+
striped: boolean;
|
|
13
|
+
sticky: boolean;
|
|
14
|
+
hover: boolean;
|
|
15
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
16
|
+
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, LitElement, css } from "lit";
|
|
8
|
+
import { customElement, property } from "lit/decorators.js";
|
|
9
|
+
import "./table-tr.ts";
|
|
10
|
+
import "./table-th.ts";
|
|
11
|
+
import "./table-td.ts";
|
|
12
|
+
import "./table-thead.ts";
|
|
13
|
+
import "./table-tbody.ts";
|
|
14
|
+
import "./table-tfoot.ts";
|
|
15
|
+
import "./table-caption.ts";
|
|
16
|
+
let Table = class Table extends LitElement {
|
|
17
|
+
constructor() {
|
|
18
|
+
super(...arguments);
|
|
19
|
+
this.size = "md";
|
|
20
|
+
this.striped = false;
|
|
21
|
+
this.sticky = false;
|
|
22
|
+
this.hover = false;
|
|
23
|
+
}
|
|
24
|
+
render() {
|
|
25
|
+
return html `
|
|
26
|
+
<div class="table-container">
|
|
27
|
+
<div class="table" ?striped=${this.striped} ?hover=${this.hover} ?sticky=${this.sticky}>
|
|
28
|
+
<slot></slot>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
`;
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
Table.styles = [
|
|
35
|
+
css `
|
|
36
|
+
:host {
|
|
37
|
+
--sc-table-fw: var(--sc-font-weight-base);
|
|
38
|
+
--sc-table-fst: var(--sc-font-style-base);
|
|
39
|
+
--sc-table-fs: 1rem;
|
|
40
|
+
--sc-table-th-fw: bold;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.table-container {
|
|
44
|
+
overflow-x: auto;
|
|
45
|
+
-webkit-overflow-scrolling: touch;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.table {
|
|
49
|
+
width: 100%;
|
|
50
|
+
font-size: var(--sc-table-fs);
|
|
51
|
+
display: table;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/*SIZE*/
|
|
55
|
+
:host([size="2xs"]) {
|
|
56
|
+
--sc-table-fs: 0.6rem;
|
|
57
|
+
}
|
|
58
|
+
:host([size="xs"]) {
|
|
59
|
+
--sc-table-fs: 0.75rem;
|
|
60
|
+
}
|
|
61
|
+
:host([size="sm"]) {
|
|
62
|
+
--sc-table-fs: 0.85rem;
|
|
63
|
+
}
|
|
64
|
+
:host([size="lg"]) {
|
|
65
|
+
--sc-table-fs: 1.2rem;
|
|
66
|
+
}
|
|
67
|
+
:host([size="xl"]) {
|
|
68
|
+
--sc-table-fs: 1.5rem;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
`,
|
|
72
|
+
];
|
|
73
|
+
__decorate([
|
|
74
|
+
property({ type: String, reflect: true })
|
|
75
|
+
], Table.prototype, "size", void 0);
|
|
76
|
+
__decorate([
|
|
77
|
+
property({ type: Boolean, reflect: true })
|
|
78
|
+
], Table.prototype, "striped", void 0);
|
|
79
|
+
__decorate([
|
|
80
|
+
property({ type: Boolean, reflect: true })
|
|
81
|
+
], Table.prototype, "sticky", void 0);
|
|
82
|
+
__decorate([
|
|
83
|
+
property({ type: Boolean, reflect: true })
|
|
84
|
+
], Table.prototype, "hover", void 0);
|
|
85
|
+
Table = __decorate([
|
|
86
|
+
customElement("sonic-table")
|
|
87
|
+
], Table);
|
|
88
|
+
export { Table };
|
|
@@ -5,6 +5,7 @@ export declare class Tabs extends LitElement {
|
|
|
5
5
|
size: "md" | "xs" | "sm" | "lg";
|
|
6
6
|
direction: "" | "row" | "column";
|
|
7
7
|
icon: boolean;
|
|
8
|
+
moreShape: "square" | "circle";
|
|
8
9
|
menu: HTMLElement;
|
|
9
10
|
_resizeController: ResizeController;
|
|
10
11
|
updated(_changedProperties: PropertyValues): void;
|
|
@@ -14,6 +14,7 @@ let Tabs = class Tabs extends LitElement {
|
|
|
14
14
|
this.size = "md";
|
|
15
15
|
this.direction = "column";
|
|
16
16
|
this.icon = false;
|
|
17
|
+
this.moreShape = "circle";
|
|
17
18
|
this._resizeController = new ResizeController(this, {});
|
|
18
19
|
}
|
|
19
20
|
updated(_changedProperties) {
|
|
@@ -62,9 +63,9 @@ let Tabs = class Tabs extends LitElement {
|
|
|
62
63
|
return html `<menu part="tabs"
|
|
63
64
|
><slot></slot>
|
|
64
65
|
<sonic-pop class="flex" >
|
|
65
|
-
<sonic-
|
|
66
|
+
<sonic-menu-item shape="square">
|
|
66
67
|
<sonic-icon prefix="iconoir" class="my-auto" size="xl" name="more-vert"></sonic-icon>
|
|
67
|
-
</sonic-
|
|
68
|
+
</sonic-menu-item>
|
|
68
69
|
<sonic-menu slot="content"></sonic-menu>
|
|
69
70
|
<sonic-pop>
|
|
70
71
|
</menu>`;
|
|
@@ -111,8 +112,11 @@ __decorate([
|
|
|
111
112
|
property({ type: String, reflect: true })
|
|
112
113
|
], Tabs.prototype, "direction", void 0);
|
|
113
114
|
__decorate([
|
|
114
|
-
property({ type: Boolean
|
|
115
|
+
property({ type: Boolean })
|
|
115
116
|
], Tabs.prototype, "icon", void 0);
|
|
117
|
+
__decorate([
|
|
118
|
+
property({ type: String })
|
|
119
|
+
], Tabs.prototype, "moreShape", void 0);
|
|
116
120
|
__decorate([
|
|
117
121
|
query("menu")
|
|
118
122
|
], Tabs.prototype, "menu", void 0);
|
|
@@ -7,7 +7,7 @@ export const coreVariables = css `
|
|
|
7
7
|
--sc-font-family-base: "Inter var", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
8
8
|
"Helvetica Neue", Arial, sans-serif;
|
|
9
9
|
--sc-font-weight-base: 400;
|
|
10
|
-
--sc-font-style-base:
|
|
10
|
+
--sc-font-style-base: normal;
|
|
11
11
|
|
|
12
12
|
--sc-headings-font-family: var(--sc-font-family-base);
|
|
13
13
|
--sc-headings-font-style: var(--sc-font-family-base);
|
|
@@ -12,8 +12,9 @@ const darkCss = css `
|
|
|
12
12
|
--sc-warning-content: var(--sc-dark-warning-content, #382800);
|
|
13
13
|
--sc-success-content: var(--sc-dark-success-content, #003320);
|
|
14
14
|
|
|
15
|
-
--sc-base: var(--sc-dark-base, #
|
|
16
|
-
--sc-base-
|
|
15
|
+
--sc-base: var(--sc-dark-base, #1d2634);
|
|
16
|
+
--sc-base-50: var(--sc-dark-base-50, #1f2937);
|
|
17
|
+
--sc-base-100: var(--sc-dark-base-100, #252C36);
|
|
17
18
|
--sc-base-200: var(--sc-dark-base-200, #2c3543);
|
|
18
19
|
--sc-base-300: var(--sc-dark-base-300, #38414e);
|
|
19
20
|
--sc-base-400: var(--sc-dark-base-400, #515964);
|
|
@@ -9,13 +9,13 @@ import { customElement, property } from "lit/decorators.js";
|
|
|
9
9
|
let Tooltip = class Tooltip extends LitElement {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments);
|
|
12
|
-
this.
|
|
12
|
+
this.label = "";
|
|
13
13
|
this.disabled = false;
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
let disabledClass = this.disabled || this.
|
|
16
|
+
let disabledClass = this.disabled || this.label == "" ? "disabled" : "";
|
|
17
17
|
return html `<div
|
|
18
|
-
data-tooltip-text="${this.
|
|
18
|
+
data-tooltip-text="${this.label.trim().replace(" ", " ")}"
|
|
19
19
|
class="tooltip ${disabledClass}"
|
|
20
20
|
>
|
|
21
21
|
<slot></slot>
|
|
@@ -58,7 +58,7 @@ Tooltip.styles = [
|
|
|
58
58
|
];
|
|
59
59
|
__decorate([
|
|
60
60
|
property({ type: String })
|
|
61
|
-
], Tooltip.prototype, "
|
|
61
|
+
], Tooltip.prototype, "label", void 0);
|
|
62
62
|
__decorate([
|
|
63
63
|
property({ type: Boolean })
|
|
64
64
|
], Tooltip.prototype, "disabled", void 0);
|
|
@@ -2,6 +2,7 @@ import "./theme/theme";
|
|
|
2
2
|
import "./badge/badge";
|
|
3
3
|
import "./button/button";
|
|
4
4
|
import "./link/link";
|
|
5
|
+
import "./progress/progress";
|
|
5
6
|
import "./form/input/input";
|
|
6
7
|
import "./form/checkbox/checkbox";
|
|
7
8
|
import "./form/radio/radio";
|
|
@@ -16,12 +17,11 @@ import "./image/image";
|
|
|
16
17
|
import "./loader/loader";
|
|
17
18
|
import "./taxonomy/taxonomy";
|
|
18
19
|
import "./menu/menu";
|
|
19
|
-
import "./menu/menu-item";
|
|
20
|
-
import "./tabs/tabs";
|
|
21
|
-
import "./tabs/tab";
|
|
22
20
|
import "./modal/modal";
|
|
23
21
|
import "./alert/alert";
|
|
24
22
|
import "./toast/toast";
|
|
25
23
|
import "./tooltip/tooltip";
|
|
26
24
|
import "./pop/pop";
|
|
27
25
|
import "./divider/divider";
|
|
26
|
+
import "./card/card";
|
|
27
|
+
import "./table/table";
|