@nr1e/qwik-ui 0.0.42 → 0.0.44
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/theme-selector.qwik.cjs +107 -0
- package/lib/components/theme-selector.qwik.mjs +107 -0
- package/lib/components/time-zone-selector.qwik.cjs +130 -0
- package/lib/components/time-zone-selector.qwik.mjs +130 -0
- package/lib/index.qwik.cjs +7 -0
- package/lib/index.qwik.mjs +8 -1
- package/lib-types/components/theme-selector.d.ts +15 -0
- package/lib-types/components/time-zone-selector.d.ts +5 -0
- package/lib-types/index.d.ts +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,107 @@
|
|
|
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 qwikIcons = require("@nr1e/qwik-icons");
|
|
6
|
+
function capitalizeFirstLetter(input) {
|
|
7
|
+
return input.charAt(0).toUpperCase() + input.slice(1);
|
|
8
|
+
}
|
|
9
|
+
function themeToName(theme) {
|
|
10
|
+
return theme.split("-").map(capitalizeFirstLetter).join(" ");
|
|
11
|
+
}
|
|
12
|
+
const THEMES = [
|
|
13
|
+
"auto",
|
|
14
|
+
"light",
|
|
15
|
+
"dark",
|
|
16
|
+
"abyss",
|
|
17
|
+
"acid",
|
|
18
|
+
"aqua",
|
|
19
|
+
"autumn",
|
|
20
|
+
"black",
|
|
21
|
+
"bumblebee",
|
|
22
|
+
"business",
|
|
23
|
+
"caramellatte",
|
|
24
|
+
"cmyk",
|
|
25
|
+
"coffee",
|
|
26
|
+
"corporate",
|
|
27
|
+
"cupcake",
|
|
28
|
+
"cyberpunk",
|
|
29
|
+
"dim",
|
|
30
|
+
"dracula",
|
|
31
|
+
"emerald",
|
|
32
|
+
"fantasy",
|
|
33
|
+
"forest",
|
|
34
|
+
"garden",
|
|
35
|
+
"halloween",
|
|
36
|
+
"lemonade",
|
|
37
|
+
"lofi",
|
|
38
|
+
"luxury",
|
|
39
|
+
"night",
|
|
40
|
+
"nord",
|
|
41
|
+
"pastel",
|
|
42
|
+
"retro",
|
|
43
|
+
"silk",
|
|
44
|
+
"sunset",
|
|
45
|
+
"synthwave",
|
|
46
|
+
"valentine",
|
|
47
|
+
"wireframe",
|
|
48
|
+
"winter"
|
|
49
|
+
];
|
|
50
|
+
const ThemeSelector = qwik.component$((props) => {
|
|
51
|
+
const currentTheme = qwik.useSignal("auto");
|
|
52
|
+
qwik.useVisibleTask$(() => {
|
|
53
|
+
const savedTheme = localStorage.getItem("theme");
|
|
54
|
+
currentTheme.value = savedTheme ?? "auto";
|
|
55
|
+
});
|
|
56
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
57
|
+
class: "dropdown",
|
|
58
|
+
children: [
|
|
59
|
+
/* @__PURE__ */ jsxRuntime.jsxs("button", {
|
|
60
|
+
role: "button",
|
|
61
|
+
tabIndex: 0,
|
|
62
|
+
class: "btn m-1",
|
|
63
|
+
children: [
|
|
64
|
+
themeToName(currentTheme.value),
|
|
65
|
+
/* @__PURE__ */ jsxRuntime.jsx(qwikIcons.MdiChevronDown, {
|
|
66
|
+
size: 16,
|
|
67
|
+
class: "fill-current opacity-60"
|
|
68
|
+
})
|
|
69
|
+
]
|
|
70
|
+
}),
|
|
71
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
72
|
+
tabIndex: 0,
|
|
73
|
+
class: "dropdown-content card bg-base-100 z-1 shadow-md",
|
|
74
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
75
|
+
class: "card-body rounded-box z-1",
|
|
76
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
77
|
+
class: "grid min-w-50 grid-cols-1 gap-2 p-2 sm:min-w-100 sm:grid-cols-2 lg:min-w-150 lg:grid-cols-3",
|
|
78
|
+
children: (props?.themes ?? THEMES).map((theme) => /* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
79
|
+
type: "radio",
|
|
80
|
+
name: "theme-dropdown",
|
|
81
|
+
class: "theme-controller btn btn-sm btn-ghost justify-start",
|
|
82
|
+
"aria-label": themeToName(theme),
|
|
83
|
+
value: theme,
|
|
84
|
+
checked: theme === currentTheme.value,
|
|
85
|
+
onChange$: () => {
|
|
86
|
+
currentTheme.value = theme;
|
|
87
|
+
if (theme === "auto") {
|
|
88
|
+
document.documentElement.removeAttribute("data-theme");
|
|
89
|
+
localStorage.removeItem("theme");
|
|
90
|
+
} else {
|
|
91
|
+
localStorage.setItem("theme", theme);
|
|
92
|
+
}
|
|
93
|
+
const activeElement = document.activeElement;
|
|
94
|
+
if (activeElement) {
|
|
95
|
+
activeElement.blur();
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}, theme))
|
|
99
|
+
})
|
|
100
|
+
})
|
|
101
|
+
})
|
|
102
|
+
]
|
|
103
|
+
});
|
|
104
|
+
});
|
|
105
|
+
exports.THEMES = THEMES;
|
|
106
|
+
exports.ThemeSelector = ThemeSelector;
|
|
107
|
+
exports.themeToName = themeToName;
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
|
|
2
|
+
import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
|
|
3
|
+
import { MdiChevronDown } from "@nr1e/qwik-icons";
|
|
4
|
+
function capitalizeFirstLetter(input) {
|
|
5
|
+
return input.charAt(0).toUpperCase() + input.slice(1);
|
|
6
|
+
}
|
|
7
|
+
function themeToName(theme) {
|
|
8
|
+
return theme.split("-").map(capitalizeFirstLetter).join(" ");
|
|
9
|
+
}
|
|
10
|
+
const THEMES = [
|
|
11
|
+
"auto",
|
|
12
|
+
"light",
|
|
13
|
+
"dark",
|
|
14
|
+
"abyss",
|
|
15
|
+
"acid",
|
|
16
|
+
"aqua",
|
|
17
|
+
"autumn",
|
|
18
|
+
"black",
|
|
19
|
+
"bumblebee",
|
|
20
|
+
"business",
|
|
21
|
+
"caramellatte",
|
|
22
|
+
"cmyk",
|
|
23
|
+
"coffee",
|
|
24
|
+
"corporate",
|
|
25
|
+
"cupcake",
|
|
26
|
+
"cyberpunk",
|
|
27
|
+
"dim",
|
|
28
|
+
"dracula",
|
|
29
|
+
"emerald",
|
|
30
|
+
"fantasy",
|
|
31
|
+
"forest",
|
|
32
|
+
"garden",
|
|
33
|
+
"halloween",
|
|
34
|
+
"lemonade",
|
|
35
|
+
"lofi",
|
|
36
|
+
"luxury",
|
|
37
|
+
"night",
|
|
38
|
+
"nord",
|
|
39
|
+
"pastel",
|
|
40
|
+
"retro",
|
|
41
|
+
"silk",
|
|
42
|
+
"sunset",
|
|
43
|
+
"synthwave",
|
|
44
|
+
"valentine",
|
|
45
|
+
"wireframe",
|
|
46
|
+
"winter"
|
|
47
|
+
];
|
|
48
|
+
const ThemeSelector = component$((props) => {
|
|
49
|
+
const currentTheme = useSignal("auto");
|
|
50
|
+
useVisibleTask$(() => {
|
|
51
|
+
const savedTheme = localStorage.getItem("theme");
|
|
52
|
+
currentTheme.value = savedTheme ?? "auto";
|
|
53
|
+
});
|
|
54
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
55
|
+
class: "dropdown",
|
|
56
|
+
children: [
|
|
57
|
+
/* @__PURE__ */ jsxs("button", {
|
|
58
|
+
role: "button",
|
|
59
|
+
tabIndex: 0,
|
|
60
|
+
class: "btn m-1",
|
|
61
|
+
children: [
|
|
62
|
+
themeToName(currentTheme.value),
|
|
63
|
+
/* @__PURE__ */ jsx(MdiChevronDown, {
|
|
64
|
+
size: 16,
|
|
65
|
+
class: "fill-current opacity-60"
|
|
66
|
+
})
|
|
67
|
+
]
|
|
68
|
+
}),
|
|
69
|
+
/* @__PURE__ */ jsx("div", {
|
|
70
|
+
tabIndex: 0,
|
|
71
|
+
class: "dropdown-content card bg-base-100 z-1 shadow-md",
|
|
72
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
73
|
+
class: "card-body rounded-box z-1",
|
|
74
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
75
|
+
class: "grid min-w-50 grid-cols-1 gap-2 p-2 sm:min-w-100 sm:grid-cols-2 lg:min-w-150 lg:grid-cols-3",
|
|
76
|
+
children: (props?.themes ?? THEMES).map((theme) => /* @__PURE__ */ jsx("input", {
|
|
77
|
+
type: "radio",
|
|
78
|
+
name: "theme-dropdown",
|
|
79
|
+
class: "theme-controller btn btn-sm btn-ghost justify-start",
|
|
80
|
+
"aria-label": themeToName(theme),
|
|
81
|
+
value: theme,
|
|
82
|
+
checked: theme === currentTheme.value,
|
|
83
|
+
onChange$: () => {
|
|
84
|
+
currentTheme.value = theme;
|
|
85
|
+
if (theme === "auto") {
|
|
86
|
+
document.documentElement.removeAttribute("data-theme");
|
|
87
|
+
localStorage.removeItem("theme");
|
|
88
|
+
} else {
|
|
89
|
+
localStorage.setItem("theme", theme);
|
|
90
|
+
}
|
|
91
|
+
const activeElement = document.activeElement;
|
|
92
|
+
if (activeElement) {
|
|
93
|
+
activeElement.blur();
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}, theme))
|
|
97
|
+
})
|
|
98
|
+
})
|
|
99
|
+
})
|
|
100
|
+
]
|
|
101
|
+
});
|
|
102
|
+
});
|
|
103
|
+
export {
|
|
104
|
+
THEMES,
|
|
105
|
+
ThemeSelector,
|
|
106
|
+
themeToName
|
|
107
|
+
};
|
|
@@ -0,0 +1,130 @@
|
|
|
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 qwikIcons = require("@nr1e/qwik-icons");
|
|
6
|
+
function timeZoneToName(timezone) {
|
|
7
|
+
if (timezone === "auto") {
|
|
8
|
+
return "Auto (Browser)";
|
|
9
|
+
}
|
|
10
|
+
const parts = timezone.split("/");
|
|
11
|
+
if (parts.length === 2) {
|
|
12
|
+
return `${parts[0]}/${parts[1].replace(/_/g, " ")}`;
|
|
13
|
+
}
|
|
14
|
+
return timezone.replace(/_/g, " ");
|
|
15
|
+
}
|
|
16
|
+
const TIMEZONES = [
|
|
17
|
+
"auto",
|
|
18
|
+
// US & Canada
|
|
19
|
+
"America/New_York",
|
|
20
|
+
"America/Chicago",
|
|
21
|
+
"America/Denver",
|
|
22
|
+
"America/Los_Angeles",
|
|
23
|
+
"America/Anchorage",
|
|
24
|
+
"Pacific/Honolulu",
|
|
25
|
+
"America/Phoenix",
|
|
26
|
+
"America/Toronto",
|
|
27
|
+
"America/Vancouver",
|
|
28
|
+
// Latin America
|
|
29
|
+
"America/Mexico_City",
|
|
30
|
+
"America/Bogota",
|
|
31
|
+
"America/Lima",
|
|
32
|
+
"America/Santiago",
|
|
33
|
+
"America/Buenos_Aires",
|
|
34
|
+
"America/Sao_Paulo",
|
|
35
|
+
// Europe
|
|
36
|
+
"Europe/London",
|
|
37
|
+
"Europe/Paris",
|
|
38
|
+
"Europe/Berlin",
|
|
39
|
+
"Europe/Rome",
|
|
40
|
+
"Europe/Madrid",
|
|
41
|
+
"Europe/Amsterdam",
|
|
42
|
+
"Europe/Brussels",
|
|
43
|
+
"Europe/Vienna",
|
|
44
|
+
"Europe/Stockholm",
|
|
45
|
+
"Europe/Warsaw",
|
|
46
|
+
"Europe/Athens",
|
|
47
|
+
"Europe/Moscow",
|
|
48
|
+
"Europe/Istanbul",
|
|
49
|
+
// Asia
|
|
50
|
+
"Asia/Dubai",
|
|
51
|
+
"Asia/Kolkata",
|
|
52
|
+
"Asia/Singapore",
|
|
53
|
+
"Asia/Hong_Kong",
|
|
54
|
+
"Asia/Shanghai",
|
|
55
|
+
"Asia/Tokyo",
|
|
56
|
+
"Asia/Seoul",
|
|
57
|
+
"Asia/Bangkok",
|
|
58
|
+
"Asia/Jakarta",
|
|
59
|
+
"Asia/Manila",
|
|
60
|
+
// Africa
|
|
61
|
+
"Africa/Cairo",
|
|
62
|
+
"Africa/Johannesburg",
|
|
63
|
+
"Africa/Lagos",
|
|
64
|
+
"Africa/Nairobi",
|
|
65
|
+
// Australia & Pacific
|
|
66
|
+
"Australia/Sydney",
|
|
67
|
+
"Australia/Melbourne",
|
|
68
|
+
"Australia/Brisbane",
|
|
69
|
+
"Australia/Perth",
|
|
70
|
+
"Pacific/Auckland",
|
|
71
|
+
"Pacific/Fiji",
|
|
72
|
+
// Other
|
|
73
|
+
"UTC"
|
|
74
|
+
];
|
|
75
|
+
const TimeZoneSelector = qwik.component$((props) => {
|
|
76
|
+
const currentTimeZone = qwik.useSignal("auto");
|
|
77
|
+
qwik.useVisibleTask$(() => {
|
|
78
|
+
const savedTimeZone = localStorage.getItem("timezone");
|
|
79
|
+
currentTimeZone.value = savedTimeZone ?? "auto";
|
|
80
|
+
});
|
|
81
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
82
|
+
class: "dropdown",
|
|
83
|
+
children: [
|
|
84
|
+
/* @__PURE__ */ jsxRuntime.jsxs("button", {
|
|
85
|
+
role: "button",
|
|
86
|
+
tabIndex: 0,
|
|
87
|
+
class: "btn m-1",
|
|
88
|
+
children: [
|
|
89
|
+
timeZoneToName(currentTimeZone.value),
|
|
90
|
+
/* @__PURE__ */ jsxRuntime.jsx(qwikIcons.MdiChevronDown, {
|
|
91
|
+
size: 16,
|
|
92
|
+
class: "fill-current opacity-60"
|
|
93
|
+
})
|
|
94
|
+
]
|
|
95
|
+
}),
|
|
96
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
97
|
+
tabIndex: 0,
|
|
98
|
+
class: "dropdown-content card bg-base-100 z-1 shadow-md",
|
|
99
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
100
|
+
class: "card-body rounded-box z-1",
|
|
101
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
102
|
+
class: "grid min-w-50 grid-cols-1 gap-2 p-2 sm:min-w-100 sm:grid-cols-2 lg:min-w-150 lg:grid-cols-3",
|
|
103
|
+
children: (props?.timeZones ?? TIMEZONES).map((timezone) => /* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
104
|
+
type: "radio",
|
|
105
|
+
name: "timezone-dropdown",
|
|
106
|
+
class: "btn btn-sm btn-ghost justify-start",
|
|
107
|
+
"aria-label": timeZoneToName(timezone),
|
|
108
|
+
value: timezone,
|
|
109
|
+
checked: timezone === currentTimeZone.value,
|
|
110
|
+
onChange$: () => {
|
|
111
|
+
currentTimeZone.value = timezone;
|
|
112
|
+
if (timezone === "auto") {
|
|
113
|
+
localStorage.removeItem("timezone");
|
|
114
|
+
} else {
|
|
115
|
+
localStorage.setItem("timezone", timezone);
|
|
116
|
+
}
|
|
117
|
+
const activeElement = document.activeElement;
|
|
118
|
+
if (activeElement) {
|
|
119
|
+
activeElement.blur();
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}, timezone))
|
|
123
|
+
})
|
|
124
|
+
})
|
|
125
|
+
})
|
|
126
|
+
]
|
|
127
|
+
});
|
|
128
|
+
});
|
|
129
|
+
exports.TimeZoneSelector = TimeZoneSelector;
|
|
130
|
+
exports.timeZoneToName = timeZoneToName;
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
|
|
2
|
+
import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
|
|
3
|
+
import { MdiChevronDown } from "@nr1e/qwik-icons";
|
|
4
|
+
function timeZoneToName(timezone) {
|
|
5
|
+
if (timezone === "auto") {
|
|
6
|
+
return "Auto (Browser)";
|
|
7
|
+
}
|
|
8
|
+
const parts = timezone.split("/");
|
|
9
|
+
if (parts.length === 2) {
|
|
10
|
+
return `${parts[0]}/${parts[1].replace(/_/g, " ")}`;
|
|
11
|
+
}
|
|
12
|
+
return timezone.replace(/_/g, " ");
|
|
13
|
+
}
|
|
14
|
+
const TIMEZONES = [
|
|
15
|
+
"auto",
|
|
16
|
+
// US & Canada
|
|
17
|
+
"America/New_York",
|
|
18
|
+
"America/Chicago",
|
|
19
|
+
"America/Denver",
|
|
20
|
+
"America/Los_Angeles",
|
|
21
|
+
"America/Anchorage",
|
|
22
|
+
"Pacific/Honolulu",
|
|
23
|
+
"America/Phoenix",
|
|
24
|
+
"America/Toronto",
|
|
25
|
+
"America/Vancouver",
|
|
26
|
+
// Latin America
|
|
27
|
+
"America/Mexico_City",
|
|
28
|
+
"America/Bogota",
|
|
29
|
+
"America/Lima",
|
|
30
|
+
"America/Santiago",
|
|
31
|
+
"America/Buenos_Aires",
|
|
32
|
+
"America/Sao_Paulo",
|
|
33
|
+
// Europe
|
|
34
|
+
"Europe/London",
|
|
35
|
+
"Europe/Paris",
|
|
36
|
+
"Europe/Berlin",
|
|
37
|
+
"Europe/Rome",
|
|
38
|
+
"Europe/Madrid",
|
|
39
|
+
"Europe/Amsterdam",
|
|
40
|
+
"Europe/Brussels",
|
|
41
|
+
"Europe/Vienna",
|
|
42
|
+
"Europe/Stockholm",
|
|
43
|
+
"Europe/Warsaw",
|
|
44
|
+
"Europe/Athens",
|
|
45
|
+
"Europe/Moscow",
|
|
46
|
+
"Europe/Istanbul",
|
|
47
|
+
// Asia
|
|
48
|
+
"Asia/Dubai",
|
|
49
|
+
"Asia/Kolkata",
|
|
50
|
+
"Asia/Singapore",
|
|
51
|
+
"Asia/Hong_Kong",
|
|
52
|
+
"Asia/Shanghai",
|
|
53
|
+
"Asia/Tokyo",
|
|
54
|
+
"Asia/Seoul",
|
|
55
|
+
"Asia/Bangkok",
|
|
56
|
+
"Asia/Jakarta",
|
|
57
|
+
"Asia/Manila",
|
|
58
|
+
// Africa
|
|
59
|
+
"Africa/Cairo",
|
|
60
|
+
"Africa/Johannesburg",
|
|
61
|
+
"Africa/Lagos",
|
|
62
|
+
"Africa/Nairobi",
|
|
63
|
+
// Australia & Pacific
|
|
64
|
+
"Australia/Sydney",
|
|
65
|
+
"Australia/Melbourne",
|
|
66
|
+
"Australia/Brisbane",
|
|
67
|
+
"Australia/Perth",
|
|
68
|
+
"Pacific/Auckland",
|
|
69
|
+
"Pacific/Fiji",
|
|
70
|
+
// Other
|
|
71
|
+
"UTC"
|
|
72
|
+
];
|
|
73
|
+
const TimeZoneSelector = component$((props) => {
|
|
74
|
+
const currentTimeZone = useSignal("auto");
|
|
75
|
+
useVisibleTask$(() => {
|
|
76
|
+
const savedTimeZone = localStorage.getItem("timezone");
|
|
77
|
+
currentTimeZone.value = savedTimeZone ?? "auto";
|
|
78
|
+
});
|
|
79
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
80
|
+
class: "dropdown",
|
|
81
|
+
children: [
|
|
82
|
+
/* @__PURE__ */ jsxs("button", {
|
|
83
|
+
role: "button",
|
|
84
|
+
tabIndex: 0,
|
|
85
|
+
class: "btn m-1",
|
|
86
|
+
children: [
|
|
87
|
+
timeZoneToName(currentTimeZone.value),
|
|
88
|
+
/* @__PURE__ */ jsx(MdiChevronDown, {
|
|
89
|
+
size: 16,
|
|
90
|
+
class: "fill-current opacity-60"
|
|
91
|
+
})
|
|
92
|
+
]
|
|
93
|
+
}),
|
|
94
|
+
/* @__PURE__ */ jsx("div", {
|
|
95
|
+
tabIndex: 0,
|
|
96
|
+
class: "dropdown-content card bg-base-100 z-1 shadow-md",
|
|
97
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
98
|
+
class: "card-body rounded-box z-1",
|
|
99
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
100
|
+
class: "grid min-w-50 grid-cols-1 gap-2 p-2 sm:min-w-100 sm:grid-cols-2 lg:min-w-150 lg:grid-cols-3",
|
|
101
|
+
children: (props?.timeZones ?? TIMEZONES).map((timezone) => /* @__PURE__ */ jsx("input", {
|
|
102
|
+
type: "radio",
|
|
103
|
+
name: "timezone-dropdown",
|
|
104
|
+
class: "btn btn-sm btn-ghost justify-start",
|
|
105
|
+
"aria-label": timeZoneToName(timezone),
|
|
106
|
+
value: timezone,
|
|
107
|
+
checked: timezone === currentTimeZone.value,
|
|
108
|
+
onChange$: () => {
|
|
109
|
+
currentTimeZone.value = timezone;
|
|
110
|
+
if (timezone === "auto") {
|
|
111
|
+
localStorage.removeItem("timezone");
|
|
112
|
+
} else {
|
|
113
|
+
localStorage.setItem("timezone", timezone);
|
|
114
|
+
}
|
|
115
|
+
const activeElement = document.activeElement;
|
|
116
|
+
if (activeElement) {
|
|
117
|
+
activeElement.blur();
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}, timezone))
|
|
121
|
+
})
|
|
122
|
+
})
|
|
123
|
+
})
|
|
124
|
+
]
|
|
125
|
+
});
|
|
126
|
+
});
|
|
127
|
+
export {
|
|
128
|
+
TimeZoneSelector,
|
|
129
|
+
timeZoneToName
|
|
130
|
+
};
|
package/lib/index.qwik.cjs
CHANGED
|
@@ -17,6 +17,8 @@ const microsoftSignInButton = require("./components/microsoft-sign-in-button.qwi
|
|
|
17
17
|
const paceBar = require("./components/pace-bar.qwik.cjs");
|
|
18
18
|
const selectField = require("./components/select-field.qwik.cjs");
|
|
19
19
|
const textField = require("./components/text-field.qwik.cjs");
|
|
20
|
+
const themeSelector = require("./components/theme-selector.qwik.cjs");
|
|
21
|
+
const timeZoneSelector = require("./components/time-zone-selector.qwik.cjs");
|
|
20
22
|
const universalLayout = require("./components/universal-layout.qwik.cjs");
|
|
21
23
|
exports.AddButton = addButton.AddButton;
|
|
22
24
|
exports.AlertError = alertError.AlertError;
|
|
@@ -46,4 +48,9 @@ exports.MicrosoftSignInButton = microsoftSignInButton.MicrosoftSignInButton;
|
|
|
46
48
|
exports.PaceBar = paceBar.PaceBar;
|
|
47
49
|
exports.SelectField = selectField.SelectField;
|
|
48
50
|
exports.TextField = textField.TextField;
|
|
51
|
+
exports.THEMES = themeSelector.THEMES;
|
|
52
|
+
exports.ThemeSelector = themeSelector.ThemeSelector;
|
|
53
|
+
exports.themeToName = themeSelector.themeToName;
|
|
54
|
+
exports.TimeZoneSelector = timeZoneSelector.TimeZoneSelector;
|
|
55
|
+
exports.timeZoneToName = timeZoneSelector.timeZoneToName;
|
|
49
56
|
exports.UniversalLayout = universalLayout.UniversalLayout;
|
package/lib/index.qwik.mjs
CHANGED
|
@@ -15,6 +15,8 @@ import { MicrosoftSignInButton } from "./components/microsoft-sign-in-button.qwi
|
|
|
15
15
|
import { PaceBar } from "./components/pace-bar.qwik.mjs";
|
|
16
16
|
import { SelectField } from "./components/select-field.qwik.mjs";
|
|
17
17
|
import { TextField } from "./components/text-field.qwik.mjs";
|
|
18
|
+
import { THEMES, ThemeSelector, themeToName } from "./components/theme-selector.qwik.mjs";
|
|
19
|
+
import { TimeZoneSelector, timeZoneToName } from "./components/time-zone-selector.qwik.mjs";
|
|
18
20
|
import { UniversalLayout } from "./components/universal-layout.qwik.mjs";
|
|
19
21
|
export {
|
|
20
22
|
AddButton,
|
|
@@ -44,6 +46,11 @@ export {
|
|
|
44
46
|
PaceBar,
|
|
45
47
|
SelectField,
|
|
46
48
|
Submenu,
|
|
49
|
+
THEMES,
|
|
47
50
|
TextField,
|
|
48
|
-
|
|
51
|
+
ThemeSelector,
|
|
52
|
+
TimeZoneSelector,
|
|
53
|
+
UniversalLayout,
|
|
54
|
+
themeToName,
|
|
55
|
+
timeZoneToName
|
|
49
56
|
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare function themeToName(theme: string): string;
|
|
2
|
+
export declare const THEMES: string[];
|
|
3
|
+
/**
|
|
4
|
+
* Properties for ThemeSelector.
|
|
5
|
+
*/
|
|
6
|
+
export interface ThemeSelectorProps {
|
|
7
|
+
/**
|
|
8
|
+
* List of themes to show in the dropdown. Default is all themes.
|
|
9
|
+
*/
|
|
10
|
+
themes?: string[];
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* ThemeSelector drop down component. This will save theme selection to localStorage under 'theme'.
|
|
14
|
+
*/
|
|
15
|
+
export declare const ThemeSelector: import("@builder.io/qwik").Component<ThemeSelectorProps | undefined>;
|
package/lib-types/index.d.ts
CHANGED
|
@@ -15,4 +15,6 @@ export * from './components/microsoft-sign-in-button';
|
|
|
15
15
|
export * from './components/pace-bar';
|
|
16
16
|
export * from './components/select-field';
|
|
17
17
|
export * from './components/text-field';
|
|
18
|
+
export * from './components/theme-selector';
|
|
19
|
+
export * from './components/time-zone-selector';
|
|
18
20
|
export * from './components/universal-layout';
|