@nr1e/qwik-ui 0.0.26 → 0.0.27
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/lib/components/dialog.qwik.cjs +30 -16
- package/lib/components/dialog.qwik.mjs +31 -17
- package/lib/qwik-icons/lib/components/icons/spinners-6-dots-rotate.qwik.qwik.cjs +72 -0
- package/lib/qwik-icons/lib/components/icons/spinners-6-dots-rotate.qwik.qwik.mjs +72 -0
- package/lib-types/components/dialog.d.ts +1 -0
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
|
|
4
4
|
const qwik = require("@builder.io/qwik");
|
|
5
5
|
const mdiClose_qwik = require("../qwik-icons/lib/components/icons/mdi-close.qwik.qwik.cjs");
|
|
6
|
+
const spinners6DotsRotate_qwik = require("../qwik-icons/lib/components/icons/spinners-6-dots-rotate.qwik.qwik.cjs");
|
|
6
7
|
const alertError = require("./alert-error.qwik.cjs");
|
|
7
8
|
const alertInfo = require("./alert-info.qwik.cjs");
|
|
8
9
|
const alertWarning = require("./alert-warning.qwik.cjs");
|
|
@@ -54,24 +55,37 @@ const Dialog = qwik.component$((props) => {
|
|
|
54
55
|
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
55
56
|
class: "py-4",
|
|
56
57
|
children: [
|
|
57
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}),
|
|
64
|
-
props.warningMessage && /* @__PURE__ */ jsxRuntime.jsx(alertWarning.AlertWarning, {
|
|
65
|
-
message: props.warningMessage
|
|
66
|
-
}),
|
|
67
|
-
props.errorMessage && /* @__PURE__ */ jsxRuntime.jsx(alertError.AlertError, {
|
|
68
|
-
message: props.errorMessage
|
|
69
|
-
}),
|
|
70
|
-
props.successMessage && /* @__PURE__ */ jsxRuntime.jsx(alertSuccess.AlertSuccess, {
|
|
71
|
-
message: props.successMessage
|
|
58
|
+
props.loading && props.loading.value && /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
59
|
+
class: "flex justify-center",
|
|
60
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
61
|
+
class: "opacity-20",
|
|
62
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(spinners6DotsRotate_qwik.Spinners6DotsRotate, {
|
|
63
|
+
size: 64
|
|
72
64
|
})
|
|
65
|
+
})
|
|
66
|
+
}),
|
|
67
|
+
(!props.loading || !props.loading.value) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
68
|
+
children: [
|
|
69
|
+
/* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}),
|
|
70
|
+
props.errorMessage || props.infoMessage || props.successMessage || props.warningMessage ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
71
|
+
class: "mt-3 space-y-2",
|
|
72
|
+
children: [
|
|
73
|
+
props.infoMessage && /* @__PURE__ */ jsxRuntime.jsx(alertInfo.AlertInfo, {
|
|
74
|
+
message: props.infoMessage
|
|
75
|
+
}),
|
|
76
|
+
props.warningMessage && /* @__PURE__ */ jsxRuntime.jsx(alertWarning.AlertWarning, {
|
|
77
|
+
message: props.warningMessage
|
|
78
|
+
}),
|
|
79
|
+
props.errorMessage && /* @__PURE__ */ jsxRuntime.jsx(alertError.AlertError, {
|
|
80
|
+
message: props.errorMessage
|
|
81
|
+
}),
|
|
82
|
+
props.successMessage && /* @__PURE__ */ jsxRuntime.jsx(alertSuccess.AlertSuccess, {
|
|
83
|
+
message: props.successMessage
|
|
84
|
+
})
|
|
85
|
+
]
|
|
86
|
+
}) : ""
|
|
73
87
|
]
|
|
74
|
-
})
|
|
88
|
+
})
|
|
75
89
|
]
|
|
76
90
|
}),
|
|
77
91
|
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
|
|
1
|
+
import { jsx, jsxs, Fragment } from "@builder.io/qwik/jsx-runtime";
|
|
2
2
|
import { component$, useSignal, useTask$, useOnDocument, $, Slot } from "@builder.io/qwik";
|
|
3
3
|
import { MdiClose } from "../qwik-icons/lib/components/icons/mdi-close.qwik.qwik.mjs";
|
|
4
|
+
import { Spinners6DotsRotate } from "../qwik-icons/lib/components/icons/spinners-6-dots-rotate.qwik.qwik.mjs";
|
|
4
5
|
import { AlertError } from "./alert-error.qwik.mjs";
|
|
5
6
|
import { AlertInfo } from "./alert-info.qwik.mjs";
|
|
6
7
|
import { AlertWarning } from "./alert-warning.qwik.mjs";
|
|
@@ -52,24 +53,37 @@ const Dialog = component$((props) => {
|
|
|
52
53
|
/* @__PURE__ */ jsxs("div", {
|
|
53
54
|
class: "py-4",
|
|
54
55
|
children: [
|
|
55
|
-
/* @__PURE__ */ jsx(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}),
|
|
62
|
-
props.warningMessage && /* @__PURE__ */ jsx(AlertWarning, {
|
|
63
|
-
message: props.warningMessage
|
|
64
|
-
}),
|
|
65
|
-
props.errorMessage && /* @__PURE__ */ jsx(AlertError, {
|
|
66
|
-
message: props.errorMessage
|
|
67
|
-
}),
|
|
68
|
-
props.successMessage && /* @__PURE__ */ jsx(AlertSuccess, {
|
|
69
|
-
message: props.successMessage
|
|
56
|
+
props.loading && props.loading.value && /* @__PURE__ */ jsx("div", {
|
|
57
|
+
class: "flex justify-center",
|
|
58
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
59
|
+
class: "opacity-20",
|
|
60
|
+
children: /* @__PURE__ */ jsx(Spinners6DotsRotate, {
|
|
61
|
+
size: 64
|
|
70
62
|
})
|
|
63
|
+
})
|
|
64
|
+
}),
|
|
65
|
+
(!props.loading || !props.loading.value) && /* @__PURE__ */ jsxs(Fragment, {
|
|
66
|
+
children: [
|
|
67
|
+
/* @__PURE__ */ jsx(Slot, {}),
|
|
68
|
+
props.errorMessage || props.infoMessage || props.successMessage || props.warningMessage ? /* @__PURE__ */ jsxs("div", {
|
|
69
|
+
class: "mt-3 space-y-2",
|
|
70
|
+
children: [
|
|
71
|
+
props.infoMessage && /* @__PURE__ */ jsx(AlertInfo, {
|
|
72
|
+
message: props.infoMessage
|
|
73
|
+
}),
|
|
74
|
+
props.warningMessage && /* @__PURE__ */ jsx(AlertWarning, {
|
|
75
|
+
message: props.warningMessage
|
|
76
|
+
}),
|
|
77
|
+
props.errorMessage && /* @__PURE__ */ jsx(AlertError, {
|
|
78
|
+
message: props.errorMessage
|
|
79
|
+
}),
|
|
80
|
+
props.successMessage && /* @__PURE__ */ jsx(AlertSuccess, {
|
|
81
|
+
message: props.successMessage
|
|
82
|
+
})
|
|
83
|
+
]
|
|
84
|
+
}) : ""
|
|
71
85
|
]
|
|
72
|
-
})
|
|
86
|
+
})
|
|
73
87
|
]
|
|
74
88
|
}),
|
|
75
89
|
/* @__PURE__ */ jsx("div", {
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
|
|
4
|
+
const qwik = require("@builder.io/qwik");
|
|
5
|
+
const svg_qwik = require("../svg.qwik.qwik.cjs");
|
|
6
|
+
const Spinners6DotsRotate = qwik.component$((props) => {
|
|
7
|
+
return /* @__PURE__ */ jsxRuntime.jsx(svg_qwik.Svg, {
|
|
8
|
+
...props,
|
|
9
|
+
viewBox: "0 0 24 24",
|
|
10
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("g", {
|
|
11
|
+
children: [
|
|
12
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", {
|
|
13
|
+
cx: "12",
|
|
14
|
+
cy: "2.5",
|
|
15
|
+
r: "1.5",
|
|
16
|
+
fill: "currentColor",
|
|
17
|
+
opacity: "0.14"
|
|
18
|
+
}),
|
|
19
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", {
|
|
20
|
+
cx: "16.75",
|
|
21
|
+
cy: "3.77",
|
|
22
|
+
r: "1.5",
|
|
23
|
+
fill: "currentColor",
|
|
24
|
+
opacity: "0.29"
|
|
25
|
+
}),
|
|
26
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", {
|
|
27
|
+
cx: "20.23",
|
|
28
|
+
cy: "7.25",
|
|
29
|
+
r: "1.5",
|
|
30
|
+
fill: "currentColor",
|
|
31
|
+
opacity: "0.43"
|
|
32
|
+
}),
|
|
33
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", {
|
|
34
|
+
cx: "21.5",
|
|
35
|
+
cy: "12",
|
|
36
|
+
r: "1.5",
|
|
37
|
+
fill: "currentColor",
|
|
38
|
+
opacity: "0.57"
|
|
39
|
+
}),
|
|
40
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", {
|
|
41
|
+
cx: "20.23",
|
|
42
|
+
cy: "16.75",
|
|
43
|
+
r: "1.5",
|
|
44
|
+
fill: "currentColor",
|
|
45
|
+
opacity: "0.71"
|
|
46
|
+
}),
|
|
47
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", {
|
|
48
|
+
cx: "16.75",
|
|
49
|
+
cy: "20.23",
|
|
50
|
+
r: "1.5",
|
|
51
|
+
fill: "currentColor",
|
|
52
|
+
opacity: "0.86"
|
|
53
|
+
}),
|
|
54
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", {
|
|
55
|
+
cx: "12",
|
|
56
|
+
cy: "21.5",
|
|
57
|
+
r: "1.5",
|
|
58
|
+
fill: "currentColor"
|
|
59
|
+
}),
|
|
60
|
+
/* @__PURE__ */ jsxRuntime.jsx("animateTransform", {
|
|
61
|
+
attributeName: "transform",
|
|
62
|
+
calcMode: "discrete",
|
|
63
|
+
dur: "0.75s",
|
|
64
|
+
repeatCount: "indefinite",
|
|
65
|
+
type: "rotate",
|
|
66
|
+
values: "0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"
|
|
67
|
+
})
|
|
68
|
+
]
|
|
69
|
+
})
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
exports.Spinners6DotsRotate = Spinners6DotsRotate;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
|
|
2
|
+
import { component$ } from "@builder.io/qwik";
|
|
3
|
+
import { Svg } from "../svg.qwik.qwik.mjs";
|
|
4
|
+
const Spinners6DotsRotate = component$((props) => {
|
|
5
|
+
return /* @__PURE__ */ jsx(Svg, {
|
|
6
|
+
...props,
|
|
7
|
+
viewBox: "0 0 24 24",
|
|
8
|
+
children: /* @__PURE__ */ jsxs("g", {
|
|
9
|
+
children: [
|
|
10
|
+
/* @__PURE__ */ jsx("circle", {
|
|
11
|
+
cx: "12",
|
|
12
|
+
cy: "2.5",
|
|
13
|
+
r: "1.5",
|
|
14
|
+
fill: "currentColor",
|
|
15
|
+
opacity: "0.14"
|
|
16
|
+
}),
|
|
17
|
+
/* @__PURE__ */ jsx("circle", {
|
|
18
|
+
cx: "16.75",
|
|
19
|
+
cy: "3.77",
|
|
20
|
+
r: "1.5",
|
|
21
|
+
fill: "currentColor",
|
|
22
|
+
opacity: "0.29"
|
|
23
|
+
}),
|
|
24
|
+
/* @__PURE__ */ jsx("circle", {
|
|
25
|
+
cx: "20.23",
|
|
26
|
+
cy: "7.25",
|
|
27
|
+
r: "1.5",
|
|
28
|
+
fill: "currentColor",
|
|
29
|
+
opacity: "0.43"
|
|
30
|
+
}),
|
|
31
|
+
/* @__PURE__ */ jsx("circle", {
|
|
32
|
+
cx: "21.5",
|
|
33
|
+
cy: "12",
|
|
34
|
+
r: "1.5",
|
|
35
|
+
fill: "currentColor",
|
|
36
|
+
opacity: "0.57"
|
|
37
|
+
}),
|
|
38
|
+
/* @__PURE__ */ jsx("circle", {
|
|
39
|
+
cx: "20.23",
|
|
40
|
+
cy: "16.75",
|
|
41
|
+
r: "1.5",
|
|
42
|
+
fill: "currentColor",
|
|
43
|
+
opacity: "0.71"
|
|
44
|
+
}),
|
|
45
|
+
/* @__PURE__ */ jsx("circle", {
|
|
46
|
+
cx: "16.75",
|
|
47
|
+
cy: "20.23",
|
|
48
|
+
r: "1.5",
|
|
49
|
+
fill: "currentColor",
|
|
50
|
+
opacity: "0.86"
|
|
51
|
+
}),
|
|
52
|
+
/* @__PURE__ */ jsx("circle", {
|
|
53
|
+
cx: "12",
|
|
54
|
+
cy: "21.5",
|
|
55
|
+
r: "1.5",
|
|
56
|
+
fill: "currentColor"
|
|
57
|
+
}),
|
|
58
|
+
/* @__PURE__ */ jsx("animateTransform", {
|
|
59
|
+
attributeName: "transform",
|
|
60
|
+
calcMode: "discrete",
|
|
61
|
+
dur: "0.75s",
|
|
62
|
+
repeatCount: "indefinite",
|
|
63
|
+
type: "rotate",
|
|
64
|
+
values: "0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"
|
|
65
|
+
})
|
|
66
|
+
]
|
|
67
|
+
})
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
export {
|
|
71
|
+
Spinners6DotsRotate
|
|
72
|
+
};
|
|
@@ -11,5 +11,6 @@ export interface DialogProps {
|
|
|
11
11
|
warningMessage?: string;
|
|
12
12
|
onClose$?: QRL<(e: HTMLDialogElement) => void>;
|
|
13
13
|
onOpen$?: QRL<(e: HTMLDialogElement) => void>;
|
|
14
|
+
loading?: Signal<boolean>;
|
|
14
15
|
}
|
|
15
16
|
export declare const Dialog: import("@builder.io/qwik").Component<DialogProps>;
|