reke-ui 0.1.2 → 0.2.1
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/README.md +21 -0
- package/cli/install-skills.mjs +169 -0
- package/custom-elements.json +272 -28
- package/dist/__type-checks__/no-lit-in-public-types.d.ts +2 -0
- package/dist/__type-checks__/no-lit-in-public-types.d.ts.map +1 -0
- package/dist/_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js +9 -0
- package/dist/components/reke-alert/reke-alert.d.ts.map +1 -1
- package/dist/components/reke-alert/reke-alert.js +32 -40
- package/dist/components/reke-alert/reke-alert.styles.js +7 -10
- package/dist/components/reke-badge/reke-badge.js +26 -40
- package/dist/components/reke-badge/reke-badge.styles.js +7 -10
- package/dist/components/reke-button/reke-button.d.ts.map +1 -1
- package/dist/components/reke-button/reke-button.js +41 -52
- package/dist/components/reke-button/reke-button.styles.js +7 -10
- package/dist/components/reke-card/reke-card.d.ts.map +1 -1
- package/dist/components/reke-card/reke-card.js +38 -58
- package/dist/components/reke-card/reke-card.styles.js +7 -10
- package/dist/components/reke-checkbox/reke-checkbox.js +40 -47
- package/dist/components/reke-checkbox/reke-checkbox.styles.d.ts.map +1 -1
- package/dist/components/reke-checkbox/reke-checkbox.styles.js +7 -9
- package/dist/components/reke-chip/reke-chip.d.ts.map +1 -1
- package/dist/components/reke-chip/reke-chip.js +42 -50
- package/dist/components/reke-chip/reke-chip.styles.d.ts.map +1 -1
- package/dist/components/reke-chip/reke-chip.styles.js +16 -13
- package/dist/components/reke-date-range/reke-date-range.d.ts.map +1 -1
- package/dist/components/reke-date-range/reke-date-range.js +240 -260
- package/dist/components/reke-date-range/reke-date-range.styles.d.ts.map +1 -1
- package/dist/components/reke-date-range/reke-date-range.styles.js +29 -16
- package/dist/components/reke-dialog/reke-dialog.d.ts.map +1 -1
- package/dist/components/reke-dialog/reke-dialog.js +52 -65
- package/dist/components/reke-dialog/reke-dialog.styles.d.ts.map +1 -1
- package/dist/components/reke-dialog/reke-dialog.styles.js +8 -10
- package/dist/components/reke-file-upload/reke-file-upload.d.ts.map +1 -1
- package/dist/components/reke-file-upload/reke-file-upload.js +62 -86
- package/dist/components/reke-file-upload/reke-file-upload.styles.js +7 -10
- package/dist/components/reke-input/reke-input.js +42 -61
- package/dist/components/reke-input/reke-input.styles.d.ts.map +1 -1
- package/dist/components/reke-input/reke-input.styles.js +8 -10
- package/dist/components/reke-select/reke-select.d.ts.map +1 -1
- package/dist/components/reke-select/reke-select.js +66 -89
- package/dist/components/reke-select/reke-select.styles.d.ts.map +1 -1
- package/dist/components/reke-select/reke-select.styles.js +9 -11
- package/dist/components/reke-table/reke-table.d.ts +134 -23
- package/dist/components/reke-table/reke-table.d.ts.map +1 -1
- package/dist/components/reke-table/reke-table.js +242 -143
- package/dist/components/reke-table/reke-table.styles.d.ts.map +1 -1
- package/dist/components/reke-table/reke-table.styles.js +67 -9
- package/dist/components/reke-textarea/reke-textarea.js +42 -61
- package/dist/components/reke-textarea/reke-textarea.styles.js +6 -9
- package/dist/components/reke-toast/reke-toast.d.ts.map +1 -1
- package/dist/components/reke-toast/reke-toast.js +50 -68
- package/dist/components/reke-toast/reke-toast.styles.d.ts.map +1 -1
- package/dist/components/reke-toast/reke-toast.styles.js +13 -12
- package/dist/components/reke-toggle/reke-toggle.js +36 -43
- package/dist/components/reke-toggle/reke-toggle.styles.js +7 -10
- package/dist/components/reke-tooltip/reke-tooltip.js +31 -47
- package/dist/components/reke-tooltip/reke-tooltip.styles.js +6 -9
- package/dist/index.d.ts +23 -23
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +15 -33
- package/dist/react-bridge/table.d.ts +58 -0
- package/dist/react-bridge/table.d.ts.map +1 -0
- package/dist/react-bridge/table.js +115 -0
- package/dist/react.d.ts +12 -26
- package/dist/react.d.ts.map +1 -1
- package/dist/react.js +110 -146
- package/dist/shared/base-element.js +13 -15
- package/dist/shared/tailwind-styles.js +6 -6
- package/dist/shared/tailwind.js +4 -0
- package/dist/tokens/reke-tokens.css +47 -0
- package/package.json +40 -20
- package/dist/shared/tailwind.css.js +0 -4
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { tailwindStyles as
|
|
2
|
-
import { css as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
e`
|
|
1
|
+
import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
|
|
2
|
+
import { css as t } from "lit";
|
|
3
|
+
//#region src/components/reke-date-range/reke-date-range.styles.ts
|
|
4
|
+
var n = [e, t`
|
|
6
5
|
:host {
|
|
7
6
|
display: inline-block;
|
|
8
7
|
position: relative;
|
|
@@ -20,7 +19,7 @@ const t = [
|
|
|
20
19
|
display: block;
|
|
21
20
|
margin-bottom: 6px;
|
|
22
21
|
font-size: 12px;
|
|
23
|
-
color: var(--reke-color-text-ghost, #
|
|
22
|
+
color: var(--reke-color-text-ghost, #7A7A7A);
|
|
24
23
|
transition: color 0.15s ease;
|
|
25
24
|
}
|
|
26
25
|
|
|
@@ -48,7 +47,7 @@ const t = [
|
|
|
48
47
|
}
|
|
49
48
|
|
|
50
49
|
.trigger:hover {
|
|
51
|
-
border-color: var(--reke-color-
|
|
50
|
+
border-color: var(--reke-color-border-hover, #3A3A3A);
|
|
52
51
|
}
|
|
53
52
|
|
|
54
53
|
.trigger--open {
|
|
@@ -165,7 +164,7 @@ const t = [
|
|
|
165
164
|
border: none;
|
|
166
165
|
border-radius: var(--reke-radius, 4px);
|
|
167
166
|
background: transparent;
|
|
168
|
-
color: var(--reke-color-text-
|
|
167
|
+
color: var(--reke-color-text-ghost, #7A7A7A);
|
|
169
168
|
cursor: pointer;
|
|
170
169
|
font-family: inherit;
|
|
171
170
|
}
|
|
@@ -175,6 +174,11 @@ const t = [
|
|
|
175
174
|
background: color-mix(in srgb, var(--reke-color-surface, #1A1A1A) 75%, var(--reke-color-border, #252525));
|
|
176
175
|
}
|
|
177
176
|
|
|
177
|
+
.calendar__nav-btn:focus-visible {
|
|
178
|
+
outline: 2px solid var(--reke-color-primary, #22C55E);
|
|
179
|
+
outline-offset: 2px;
|
|
180
|
+
}
|
|
181
|
+
|
|
178
182
|
.calendar__nav-btn svg {
|
|
179
183
|
width: 14px;
|
|
180
184
|
height: 14px;
|
|
@@ -197,7 +201,7 @@ const t = [
|
|
|
197
201
|
text-align: center;
|
|
198
202
|
font-size: 9px;
|
|
199
203
|
font-weight: 600;
|
|
200
|
-
color: var(--reke-color-text-
|
|
204
|
+
color: var(--reke-color-text-label, #8A8A8A);
|
|
201
205
|
padding: 4px 0;
|
|
202
206
|
text-transform: uppercase;
|
|
203
207
|
}
|
|
@@ -230,8 +234,13 @@ const t = [
|
|
|
230
234
|
background: color-mix(in srgb, var(--reke-color-surface, #1A1A1A) 70%, var(--reke-color-border, #252525));
|
|
231
235
|
}
|
|
232
236
|
|
|
237
|
+
.calendar__day:focus-visible {
|
|
238
|
+
outline: 2px solid var(--reke-color-primary, #22C55E);
|
|
239
|
+
outline-offset: -2px;
|
|
240
|
+
}
|
|
241
|
+
|
|
233
242
|
.calendar__day--other {
|
|
234
|
-
color: var(--reke-color-text-
|
|
243
|
+
color: var(--reke-color-text-ghost, #7A7A7A);
|
|
235
244
|
}
|
|
236
245
|
|
|
237
246
|
.calendar__day--today {
|
|
@@ -307,16 +316,20 @@ const t = [
|
|
|
307
316
|
text-decoration: underline;
|
|
308
317
|
}
|
|
309
318
|
|
|
319
|
+
.calendar__action--today:focus-visible,
|
|
320
|
+
.calendar__action--clear:focus-visible {
|
|
321
|
+
outline: 2px solid var(--reke-color-primary, #22C55E);
|
|
322
|
+
outline-offset: 2px;
|
|
323
|
+
}
|
|
324
|
+
|
|
310
325
|
.calendar__action--clear {
|
|
311
|
-
color: var(--reke-color-text-
|
|
326
|
+
color: var(--reke-color-text-label, #8A8A8A);
|
|
312
327
|
font-weight: 400;
|
|
313
328
|
}
|
|
314
329
|
|
|
315
330
|
.calendar__action--clear:hover {
|
|
316
331
|
color: var(--reke-color-text, #E5E5E5);
|
|
317
332
|
}
|
|
318
|
-
`
|
|
319
|
-
|
|
320
|
-
export {
|
|
321
|
-
t as styles
|
|
322
|
-
};
|
|
333
|
+
`];
|
|
334
|
+
//#endregion
|
|
335
|
+
export { n as styles };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reke-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/reke-dialog/reke-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC/C,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9C;;;;;;;;;;;;;;GAcG;AACH,qBACa,UAAW,SAAQ,WAAW;IACzC,OAAgB,MAAM,4BAAU;IAGhC,IAAI,UAAS;IAGb,OAAO,SAAM;IAGb,OAAO,EAAE,aAAa,CAAW;IAEjC,kEAAkE;IAElE,QAAQ,EAAE,cAAc,CAAW;IAEnC,OAAO,CAAC,cAAc,CAIpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAK7B,IAAI;IAIJ,KAAK;IAKI,MAAM;
|
|
1
|
+
{"version":3,"file":"reke-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/reke-dialog/reke-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC/C,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9C;;;;;;;;;;;;;;GAcG;AACH,qBACa,UAAW,SAAQ,WAAW;IACzC,OAAgB,MAAM,4BAAU;IAGhC,IAAI,UAAS;IAGb,OAAO,SAAM;IAGb,OAAO,EAAE,aAAa,CAAW;IAEjC,kEAAkE;IAElE,QAAQ,EAAE,cAAc,CAAW;IAEnC,OAAO,CAAC,cAAc,CAIpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAK7B,IAAI;IAIJ,KAAK;IAKI,MAAM;CAoDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|
|
@@ -1,52 +1,52 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<div class=${
|
|
1
|
+
import { RekeElement as e } from "../../shared/base-element.js";
|
|
2
|
+
import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
|
|
3
|
+
import { styles as n } from "./reke-dialog.styles.js";
|
|
4
|
+
import { html as r, nothing as i } from "lit";
|
|
5
|
+
import { customElement as a, property as o } from "lit/decorators.js";
|
|
6
|
+
import { classMap as s } from "lit/directives/class-map.js";
|
|
7
|
+
//#region src/components/reke-dialog/reke-dialog.ts
|
|
8
|
+
var c = class extends e {
|
|
9
|
+
constructor(...e) {
|
|
10
|
+
super(...e), this.open = !1, this.heading = "", this.variant = "modal", this.position = "right", this._handleKeydown = (e) => {
|
|
11
|
+
e.key === "Escape" && this.open && this.close();
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
static {
|
|
15
|
+
this.styles = n;
|
|
16
|
+
}
|
|
17
|
+
connectedCallback() {
|
|
18
|
+
super.connectedCallback(), document.addEventListener("keydown", this._handleKeydown);
|
|
19
|
+
}
|
|
20
|
+
disconnectedCallback() {
|
|
21
|
+
super.disconnectedCallback(), document.removeEventListener("keydown", this._handleKeydown);
|
|
22
|
+
}
|
|
23
|
+
show() {
|
|
24
|
+
this.open = !0;
|
|
25
|
+
}
|
|
26
|
+
close() {
|
|
27
|
+
this.open = !1, this.emit("reke-close");
|
|
28
|
+
}
|
|
29
|
+
render() {
|
|
30
|
+
if (!this.open) return i;
|
|
31
|
+
let e = this.variant === "drawer", t = {
|
|
32
|
+
backdrop: !0,
|
|
33
|
+
"backdrop--drawer": e,
|
|
34
|
+
[`backdrop--${this.position}`]: e
|
|
35
|
+
}, n = {
|
|
36
|
+
dialog: !e,
|
|
37
|
+
drawer: e,
|
|
38
|
+
[`drawer--${this.position}`]: e
|
|
39
|
+
};
|
|
40
|
+
return r`
|
|
41
|
+
<div class=${s(t)} @click=${this.close}>
|
|
42
42
|
<div
|
|
43
|
-
class=${
|
|
43
|
+
class=${s(n)}
|
|
44
44
|
role="dialog"
|
|
45
45
|
aria-modal="true"
|
|
46
46
|
aria-label=${this.heading}
|
|
47
|
-
@click=${(
|
|
47
|
+
@click=${(e) => e.stopPropagation()}
|
|
48
48
|
>
|
|
49
|
-
${this.heading ?
|
|
49
|
+
${this.heading ? r`
|
|
50
50
|
<div class="dialog-header">
|
|
51
51
|
<h2 class="dialog-title">${this.heading}</h2>
|
|
52
52
|
<button
|
|
@@ -57,7 +57,7 @@ let o = class extends v {
|
|
|
57
57
|
×
|
|
58
58
|
</button>
|
|
59
59
|
</div>
|
|
60
|
-
` :
|
|
60
|
+
` : i}
|
|
61
61
|
<div class="dialog-body">
|
|
62
62
|
<slot></slot>
|
|
63
63
|
</div>
|
|
@@ -67,24 +67,11 @@ let o = class extends v {
|
|
|
67
67
|
</div>
|
|
68
68
|
</div>
|
|
69
69
|
`;
|
|
70
|
-
|
|
71
|
-
};
|
|
72
|
-
o.styles = u;
|
|
73
|
-
a([
|
|
74
|
-
l({ type: Boolean, reflect: !0 })
|
|
75
|
-
], o.prototype, "open", 2);
|
|
76
|
-
a([
|
|
77
|
-
l()
|
|
78
|
-
], o.prototype, "heading", 2);
|
|
79
|
-
a([
|
|
80
|
-
l({ reflect: !0 })
|
|
81
|
-
], o.prototype, "variant", 2);
|
|
82
|
-
a([
|
|
83
|
-
l({ reflect: !0 })
|
|
84
|
-
], o.prototype, "position", 2);
|
|
85
|
-
o = a([
|
|
86
|
-
m("reke-dialog")
|
|
87
|
-
], o);
|
|
88
|
-
export {
|
|
89
|
-
o as RekeDialog
|
|
70
|
+
}
|
|
90
71
|
};
|
|
72
|
+
t([o({
|
|
73
|
+
type: Boolean,
|
|
74
|
+
reflect: !0
|
|
75
|
+
})], c.prototype, "open", void 0), t([o()], c.prototype, "heading", void 0), t([o({ reflect: !0 })], c.prototype, "variant", void 0), t([o({ reflect: !0 })], c.prototype, "position", void 0), c = t([a("reke-dialog")], c);
|
|
76
|
+
//#endregion
|
|
77
|
+
export { c as RekeDialog };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reke-dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-dialog/reke-dialog.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"reke-dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-dialog/reke-dialog.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAiIlB,CAAC"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
|
|
2
|
-
import { css as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
o`
|
|
2
|
+
import { css as t } from "lit";
|
|
3
|
+
//#region src/components/reke-dialog/reke-dialog.styles.ts
|
|
4
|
+
var n = [e, t`
|
|
6
5
|
:host {
|
|
7
6
|
display: block;
|
|
8
7
|
}
|
|
@@ -13,6 +12,7 @@ const i = [
|
|
|
13
12
|
position: fixed;
|
|
14
13
|
inset: 0;
|
|
15
14
|
background: rgba(0, 0, 0, 0.6);
|
|
15
|
+
backdrop-filter: blur(2px);
|
|
16
16
|
display: flex;
|
|
17
17
|
align-items: center;
|
|
18
18
|
justify-content: center;
|
|
@@ -36,7 +36,7 @@ const i = [
|
|
|
36
36
|
.dialog {
|
|
37
37
|
background: var(--reke-color-bg, #0f0f10);
|
|
38
38
|
border: 1px solid var(--reke-color-border, #252525);
|
|
39
|
-
border-radius:
|
|
39
|
+
border-radius: 6px;
|
|
40
40
|
min-width: 400px;
|
|
41
41
|
max-width: 560px;
|
|
42
42
|
width: 100%;
|
|
@@ -127,8 +127,6 @@ const i = [
|
|
|
127
127
|
gap: 8px;
|
|
128
128
|
flex-shrink: 0;
|
|
129
129
|
}
|
|
130
|
-
`
|
|
131
|
-
|
|
132
|
-
export {
|
|
133
|
-
i as styles
|
|
134
|
-
};
|
|
130
|
+
`];
|
|
131
|
+
//#endregion
|
|
132
|
+
export { n as styles };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reke-file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/reke-file-upload/reke-file-upload.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D;;;;;;;;;;;;;;;GAeG;AACH,qBACa,cAAe,SAAQ,WAAW;IAC7C,OAAgB,MAAM,4BAAU;IAEhC,kEAAkE;IAElE,MAAM,SAAM;IAGZ,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,YAAY,SAAM;IAElB,oCAAoC;IAEpC,OAAO,UAAS;IAGhB,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,SAAS,CAAM;IAGvB,OAAO,CAAC,MAAM,CAAoB;IAElC,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,iBAAiB;IAQzB,gDAAgD;IAChD,KAAK;IAMI,MAAM;
|
|
1
|
+
{"version":3,"file":"reke-file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/reke-file-upload/reke-file-upload.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D;;;;;;;;;;;;;;;GAeG;AACH,qBACa,cAAe,SAAQ,WAAW;IAC7C,OAAgB,MAAM,4BAAU;IAEhC,kEAAkE;IAElE,MAAM,SAAM;IAGZ,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,YAAY,SAAM;IAElB,oCAAoC;IAEpC,OAAO,UAAS;IAGhB,OAAO,CAAC,SAAS,CAAS;IAG1B,OAAO,CAAC,SAAS,CAAM;IAGvB,OAAO,CAAC,MAAM,CAAoB;IAElC,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,iBAAiB;IAQzB,gDAAgD;IAChD,KAAK;IAMI,MAAM;CAmDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
|
|
@@ -1,50 +1,48 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
const e = {
|
|
39
|
-
dropzone: !0,
|
|
40
|
-
"dropzone--dragging": this._dragging,
|
|
41
|
-
"dropzone--error": this.error,
|
|
42
|
-
"dropzone--compact": this.compact
|
|
43
|
-
};
|
|
44
|
-
return o`
|
|
1
|
+
import { RekeElement as e } from "../../shared/base-element.js";
|
|
2
|
+
import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
|
|
3
|
+
import { styles as n } from "./reke-file-upload.styles.js";
|
|
4
|
+
import { html as r, nothing as i } from "lit";
|
|
5
|
+
import { customElement as a, property as o, query as s, state as c } from "lit/decorators.js";
|
|
6
|
+
import { classMap as l } from "lit/directives/class-map.js";
|
|
7
|
+
//#region src/components/reke-file-upload/reke-file-upload.ts
|
|
8
|
+
var u = class extends e {
|
|
9
|
+
constructor(...e) {
|
|
10
|
+
super(...e), this.accept = "", this.hint = "", this.disabled = !1, this.error = !1, this.errorMessage = "", this.compact = !1, this._dragging = !1, this._fileName = "";
|
|
11
|
+
}
|
|
12
|
+
static {
|
|
13
|
+
this.styles = n;
|
|
14
|
+
}
|
|
15
|
+
handleClick() {
|
|
16
|
+
this.disabled || this._input.click();
|
|
17
|
+
}
|
|
18
|
+
handleDragOver(e) {
|
|
19
|
+
e.preventDefault(), e.stopPropagation(), this.disabled || (this._dragging = !0);
|
|
20
|
+
}
|
|
21
|
+
handleDragLeave(e) {
|
|
22
|
+
e.preventDefault(), e.stopPropagation(), this._dragging = !1;
|
|
23
|
+
}
|
|
24
|
+
handleDrop(e) {
|
|
25
|
+
if (e.preventDefault(), e.stopPropagation(), this._dragging = !1, this.disabled) return;
|
|
26
|
+
let t = e.dataTransfer?.files[0];
|
|
27
|
+
t && (this._fileName = t.name, this.emit("reke-file-select", { file: t }));
|
|
28
|
+
}
|
|
29
|
+
handleInputChange() {
|
|
30
|
+
let e = this._input.files?.[0];
|
|
31
|
+
e && (this._fileName = e.name, this.emit("reke-file-select", { file: e }));
|
|
32
|
+
}
|
|
33
|
+
clear() {
|
|
34
|
+
this._fileName = "", this._input && (this._input.value = ""), this.emit("reke-file-clear");
|
|
35
|
+
}
|
|
36
|
+
render() {
|
|
37
|
+
return r`
|
|
45
38
|
<div
|
|
46
39
|
part="dropzone"
|
|
47
|
-
class=${
|
|
40
|
+
class=${l({
|
|
41
|
+
dropzone: !0,
|
|
42
|
+
"dropzone--dragging": this._dragging,
|
|
43
|
+
"dropzone--error": this.error,
|
|
44
|
+
"dropzone--compact": this.compact
|
|
45
|
+
})}
|
|
48
46
|
@click=${this.handleClick}
|
|
49
47
|
@dragover=${this.handleDragOver}
|
|
50
48
|
@dragleave=${this.handleDragLeave}
|
|
@@ -52,57 +50,35 @@ let r = class extends u {
|
|
|
52
50
|
role="button"
|
|
53
51
|
tabindex="0"
|
|
54
52
|
aria-label="Upload file"
|
|
55
|
-
@keydown=${(
|
|
56
|
-
|
|
57
|
-
|
|
53
|
+
@keydown=${(e) => {
|
|
54
|
+
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());
|
|
55
|
+
}}
|
|
58
56
|
>
|
|
59
57
|
<div class="icon" aria-hidden="true">↑</div>
|
|
60
58
|
<div class="text">
|
|
61
|
-
${this._fileName ?
|
|
59
|
+
${this._fileName ? r`<span class="text__file">${this._fileName}</span>` : r`<span class="text__primary">
|
|
62
60
|
${this._dragging ? "drop file here" : "drag or select file"}
|
|
63
61
|
</span>`}
|
|
64
|
-
${this.error && this.errorMessage ?
|
|
62
|
+
${this.error && this.errorMessage ? r`<span class="text__error">${this.errorMessage}</span>` : this.hint ? r`<span class="text__secondary">${this.hint}</span>` : i}
|
|
65
63
|
</div>
|
|
66
64
|
</div>
|
|
67
65
|
<input
|
|
68
66
|
type="file"
|
|
69
|
-
accept=${this.accept ||
|
|
67
|
+
accept=${this.accept || i}
|
|
70
68
|
@change=${this.handleInputChange}
|
|
71
69
|
/>
|
|
72
70
|
`;
|
|
73
|
-
|
|
74
|
-
};
|
|
75
|
-
r.styles = _;
|
|
76
|
-
i([
|
|
77
|
-
s()
|
|
78
|
-
], r.prototype, "accept", 2);
|
|
79
|
-
i([
|
|
80
|
-
s()
|
|
81
|
-
], r.prototype, "hint", 2);
|
|
82
|
-
i([
|
|
83
|
-
s({ type: Boolean, reflect: !0 })
|
|
84
|
-
], r.prototype, "disabled", 2);
|
|
85
|
-
i([
|
|
86
|
-
s({ type: Boolean, reflect: !0 })
|
|
87
|
-
], r.prototype, "error", 2);
|
|
88
|
-
i([
|
|
89
|
-
s({ attribute: "error-message" })
|
|
90
|
-
], r.prototype, "errorMessage", 2);
|
|
91
|
-
i([
|
|
92
|
-
s({ type: Boolean, reflect: !0 })
|
|
93
|
-
], r.prototype, "compact", 2);
|
|
94
|
-
i([
|
|
95
|
-
c()
|
|
96
|
-
], r.prototype, "_dragging", 2);
|
|
97
|
-
i([
|
|
98
|
-
c()
|
|
99
|
-
], r.prototype, "_fileName", 2);
|
|
100
|
-
i([
|
|
101
|
-
f('input[type="file"]')
|
|
102
|
-
], r.prototype, "_input", 2);
|
|
103
|
-
r = i([
|
|
104
|
-
g("reke-file-upload")
|
|
105
|
-
], r);
|
|
106
|
-
export {
|
|
107
|
-
r as RekeFileUpload
|
|
71
|
+
}
|
|
108
72
|
};
|
|
73
|
+
t([o()], u.prototype, "accept", void 0), t([o()], u.prototype, "hint", void 0), t([o({
|
|
74
|
+
type: Boolean,
|
|
75
|
+
reflect: !0
|
|
76
|
+
})], u.prototype, "disabled", void 0), t([o({
|
|
77
|
+
type: Boolean,
|
|
78
|
+
reflect: !0
|
|
79
|
+
})], u.prototype, "error", void 0), t([o({ attribute: "error-message" })], u.prototype, "errorMessage", void 0), t([o({
|
|
80
|
+
type: Boolean,
|
|
81
|
+
reflect: !0
|
|
82
|
+
})], u.prototype, "compact", void 0), t([c()], u.prototype, "_dragging", void 0), t([c()], u.prototype, "_fileName", void 0), t([s("input[type=\"file\"]")], u.prototype, "_input", void 0), u = t([a("reke-file-upload")], u);
|
|
83
|
+
//#endregion
|
|
84
|
+
export { u as RekeFileUpload };
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
|
|
2
|
-
import { css as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
r`
|
|
2
|
+
import { css as t } from "lit";
|
|
3
|
+
//#region src/components/reke-file-upload/reke-file-upload.styles.ts
|
|
4
|
+
var n = [e, t`
|
|
6
5
|
:host {
|
|
7
6
|
display: block;
|
|
8
7
|
}
|
|
@@ -81,7 +80,7 @@ const a = [
|
|
|
81
80
|
.text__secondary {
|
|
82
81
|
font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
|
|
83
82
|
font-size: var(--reke-font-size-2xs, 11px);
|
|
84
|
-
color: var(--reke-color-text-
|
|
83
|
+
color: var(--reke-color-text-ghost, #7A7A7A);
|
|
85
84
|
}
|
|
86
85
|
|
|
87
86
|
.text__file {
|
|
@@ -100,8 +99,6 @@ const a = [
|
|
|
100
99
|
input[type='file'] {
|
|
101
100
|
display: none;
|
|
102
101
|
}
|
|
103
|
-
`
|
|
104
|
-
|
|
105
|
-
export {
|
|
106
|
-
a as styles
|
|
107
|
-
};
|
|
102
|
+
`];
|
|
103
|
+
//#endregion
|
|
104
|
+
export { n as styles };
|
|
@@ -1,73 +1,54 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
${this.label ?
|
|
1
|
+
import { RekeElement as e } from "../../shared/base-element.js";
|
|
2
|
+
import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
|
|
3
|
+
import { styles as n } from "./reke-input.styles.js";
|
|
4
|
+
import { html as r, nothing as i } from "lit";
|
|
5
|
+
import { customElement as a, property as o } from "lit/decorators.js";
|
|
6
|
+
import { classMap as s } from "lit/directives/class-map.js";
|
|
7
|
+
//#region src/components/reke-input/reke-input.ts
|
|
8
|
+
var c = class extends e {
|
|
9
|
+
constructor(...e) {
|
|
10
|
+
super(...e), this.value = "", this.placeholder = "", this.type = "text", this.size = "md", this.disabled = !1, this.error = !1, this.label = "";
|
|
11
|
+
}
|
|
12
|
+
static {
|
|
13
|
+
this.styles = n;
|
|
14
|
+
}
|
|
15
|
+
handleInput(e) {
|
|
16
|
+
let t = e.target;
|
|
17
|
+
this.value = t.value, this.emit("reke-input", { value: this.value });
|
|
18
|
+
}
|
|
19
|
+
handleChange() {
|
|
20
|
+
this.emit("reke-change", { value: this.value });
|
|
21
|
+
}
|
|
22
|
+
render() {
|
|
23
|
+
let e = {
|
|
24
|
+
input: !0,
|
|
25
|
+
[`input--${this.size}`]: !0,
|
|
26
|
+
"input--error": this.error
|
|
27
|
+
};
|
|
28
|
+
return r`
|
|
29
|
+
${this.label ? r`<label class="label">${this.label}</label>` : i}
|
|
30
30
|
<input
|
|
31
31
|
part="input"
|
|
32
|
-
class=${
|
|
32
|
+
class=${s(e)}
|
|
33
33
|
type=${this.type}
|
|
34
34
|
.value=${this.value}
|
|
35
|
-
placeholder=${this.placeholder ||
|
|
35
|
+
placeholder=${this.placeholder || i}
|
|
36
36
|
?disabled=${this.disabled}
|
|
37
37
|
aria-disabled=${this.disabled}
|
|
38
38
|
aria-invalid=${this.error}
|
|
39
|
-
aria-label=${this.label ||
|
|
39
|
+
aria-label=${this.label || i}
|
|
40
40
|
@input=${this.handleInput}
|
|
41
41
|
@change=${this.handleChange}
|
|
42
42
|
/>
|
|
43
43
|
`;
|
|
44
|
-
|
|
45
|
-
};
|
|
46
|
-
e.styles = b;
|
|
47
|
-
t([
|
|
48
|
-
l()
|
|
49
|
-
], e.prototype, "value", 2);
|
|
50
|
-
t([
|
|
51
|
-
l()
|
|
52
|
-
], e.prototype, "placeholder", 2);
|
|
53
|
-
t([
|
|
54
|
-
l()
|
|
55
|
-
], e.prototype, "type", 2);
|
|
56
|
-
t([
|
|
57
|
-
l({ reflect: !0 })
|
|
58
|
-
], e.prototype, "size", 2);
|
|
59
|
-
t([
|
|
60
|
-
l({ type: Boolean, reflect: !0 })
|
|
61
|
-
], e.prototype, "disabled", 2);
|
|
62
|
-
t([
|
|
63
|
-
l({ type: Boolean, reflect: !0 })
|
|
64
|
-
], e.prototype, "error", 2);
|
|
65
|
-
t([
|
|
66
|
-
l()
|
|
67
|
-
], e.prototype, "label", 2);
|
|
68
|
-
e = t([
|
|
69
|
-
d("reke-input")
|
|
70
|
-
], e);
|
|
71
|
-
export {
|
|
72
|
-
e as RekeInput
|
|
44
|
+
}
|
|
73
45
|
};
|
|
46
|
+
t([o()], c.prototype, "value", void 0), t([o()], c.prototype, "placeholder", void 0), t([o()], c.prototype, "type", void 0), t([o({ reflect: !0 })], c.prototype, "size", void 0), t([o({
|
|
47
|
+
type: Boolean,
|
|
48
|
+
reflect: !0
|
|
49
|
+
})], c.prototype, "disabled", void 0), t([o({
|
|
50
|
+
type: Boolean,
|
|
51
|
+
reflect: !0
|
|
52
|
+
})], c.prototype, "error", void 0), t([o()], c.prototype, "label", void 0), c = t([a("reke-input")], c);
|
|
53
|
+
//#endregion
|
|
54
|
+
export { c as RekeInput };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reke-input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-input/reke-input.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"reke-input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-input/reke-input.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BA2ElB,CAAC"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
|
|
2
|
-
import { css as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
r`
|
|
2
|
+
import { css as t } from "lit";
|
|
3
|
+
//#region src/components/reke-input/reke-input.styles.ts
|
|
4
|
+
var n = [e, t`
|
|
6
5
|
:host {
|
|
7
6
|
display: inline-block;
|
|
8
7
|
}
|
|
@@ -23,7 +22,8 @@ const s = [
|
|
|
23
22
|
.input {
|
|
24
23
|
display: block;
|
|
25
24
|
width: 100%;
|
|
26
|
-
background-color
|
|
25
|
+
background: var(--reke-color-input-bg, var(--reke-color-surface, #1A1A1A));
|
|
26
|
+
box-shadow: var(--reke-shadow-input, none);
|
|
27
27
|
color: var(--reke-color-text, #E5E5E5);
|
|
28
28
|
border: 1px solid var(--reke-color-border, #252525);
|
|
29
29
|
border-radius: var(--reke-radius, 4px);
|
|
@@ -73,8 +73,6 @@ const s = [
|
|
|
73
73
|
padding: var(--reke-space-md, 16px) var(--reke-space-lg, 20px);
|
|
74
74
|
font-size: var(--reke-font-size-md, 14px);
|
|
75
75
|
}
|
|
76
|
-
`
|
|
77
|
-
|
|
78
|
-
export {
|
|
79
|
-
s as styles
|
|
80
|
-
};
|
|
76
|
+
`];
|
|
77
|
+
//#endregion
|
|
78
|
+
export { n as styles };
|