@nr1e/qwik-ui 2.1.2 → 2.1.4

package/lib/components/theme-selector.qwik.cjs

@@ -3,11 +3,30 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const qwikIcons = require("@nr1e/qwik-icons");
-function capitalizeFirstLetter(input) {
-  return input.charAt(0).toUpperCase() + input.slice(1);
+const messages = require("../paraglide/messages.qwik.cjs");
+const runtime = require("../paraglide/runtime.qwik.cjs");
+function toParaglideLocale(locale) {
+  const baseCode = locale.split("-")[0]?.toLowerCase();
+  const validBaseCodes = [
+    ...new Set(runtime.locales.map((l) => l.split("-")[0].toLowerCase()))
+  ];
+  if (validBaseCodes.includes(baseCode)) {
+    return baseCode;
+  }
+  return "en";
 }
-function themeToName(theme) {
-  return theme.split("-").map(capitalizeFirstLetter).join(" ");
+function themeToName(theme, displayLocale) {
+  const messageKey = `theme_${theme.replace(/-/g, "_")}`;
+  const m = messages;
+  if (messageKey in m && typeof m[messageKey] === "function") {
+    if (displayLocale) {
+      return m[messageKey]({}, {
+        locale: displayLocale
+      });
+    }
+    return m[messageKey]();
+  }
+  return theme.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
 }
 const THEMES = [
   "auto",
@@ -48,10 +67,14 @@ const THEMES = [
   "winter"
 ];
 const ThemeSelector = qwik.component$((props) => {
-  const currentTheme = qwik.useSignal("auto");
+  const currentTheme = qwik.useSignal(void 0);
+  const displayLocale = qwik.useSignal("en");
+  const onValueChange = props?.onValueChange$;
   qwik.useVisibleTask$(() => {
     const savedTheme = localStorage.getItem("theme");
     currentTheme.value = savedTheme ?? "auto";
+    const savedLocale = localStorage.getItem("locale");
+    displayLocale.value = toParaglideLocale(savedLocale ?? "en");
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "dropdown",
@@ -61,7 +84,9 @@ const ThemeSelector = qwik.component$((props) => {
         tabIndex: 0,
         class: "btn m-1",
         children: [
-          themeToName(currentTheme.value),
+          currentTheme.value !== void 0 ? themeToName(currentTheme.value, displayLocale.value) : /* @__PURE__ */ jsxRuntime.jsx(qwikIcons.SpinnersBarsRotateFade, {
+            size: 18
+          }),
           /* @__PURE__ */ jsxRuntime.jsx(qwikIcons.MdiChevronDown, {
             size: 16,
             class: "fill-current opacity-60"
@@ -79,9 +104,9 @@ const ThemeSelector = qwik.component$((props) => {
               type: "radio",
               name: "theme-dropdown",
               class: "theme-controller btn btn-sm btn-ghost justify-start",
-              "aria-label": themeToName(theme),
+              "aria-label": themeToName(theme, displayLocale.value),
               value: theme,
-              checked: theme === currentTheme.value,
+              checked: theme === (currentTheme.value ?? "auto"),
               onChange$: () => {
                 currentTheme.value = theme;
                 if (theme === "auto") {
@@ -90,6 +115,9 @@ const ThemeSelector = qwik.component$((props) => {
                 } else {
                   localStorage.setItem("theme", theme);
                 }
+                if (onValueChange) {
+                  onValueChange(theme);
+                }
                 const activeElement = document.activeElement;
                 if (activeElement) {
                   activeElement.blur();

package/lib/components/theme-selector.qwik.mjs

@@ -1,11 +1,30 @@
 import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
 import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
-import { MdiChevronDown } from "@nr1e/qwik-icons";
-function capitalizeFirstLetter(input) {
-  return input.charAt(0).toUpperCase() + input.slice(1);
+import { SpinnersBarsRotateFade, MdiChevronDown } from "@nr1e/qwik-icons";
+import * as messages from "../paraglide/messages.qwik.mjs";
+import { locales } from "../paraglide/runtime.qwik.mjs";
+function toParaglideLocale(locale) {
+  const baseCode = locale.split("-")[0]?.toLowerCase();
+  const validBaseCodes = [
+    ...new Set(locales.map((l) => l.split("-")[0].toLowerCase()))
+  ];
+  if (validBaseCodes.includes(baseCode)) {
+    return baseCode;
+  }
+  return "en";
 }
-function themeToName(theme) {
-  return theme.split("-").map(capitalizeFirstLetter).join(" ");
+function themeToName(theme, displayLocale) {
+  const messageKey = `theme_${theme.replace(/-/g, "_")}`;
+  const m = messages;
+  if (messageKey in m && typeof m[messageKey] === "function") {
+    if (displayLocale) {
+      return m[messageKey]({}, {
+        locale: displayLocale
+      });
+    }
+    return m[messageKey]();
+  }
+  return theme.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
 }
 const THEMES = [
   "auto",
@@ -46,10 +65,14 @@ const THEMES = [
   "winter"
 ];
 const ThemeSelector = component$((props) => {
-  const currentTheme = useSignal("auto");
+  const currentTheme = useSignal(void 0);
+  const displayLocale = useSignal("en");
+  const onValueChange = props?.onValueChange$;
   useVisibleTask$(() => {
     const savedTheme = localStorage.getItem("theme");
     currentTheme.value = savedTheme ?? "auto";
+    const savedLocale = localStorage.getItem("locale");
+    displayLocale.value = toParaglideLocale(savedLocale ?? "en");
   });
   return /* @__PURE__ */ jsxs("div", {
     class: "dropdown",
@@ -59,7 +82,9 @@ const ThemeSelector = component$((props) => {
         tabIndex: 0,
         class: "btn m-1",
         children: [
-          themeToName(currentTheme.value),
+          currentTheme.value !== void 0 ? themeToName(currentTheme.value, displayLocale.value) : /* @__PURE__ */ jsx(SpinnersBarsRotateFade, {
+            size: 18
+          }),
           /* @__PURE__ */ jsx(MdiChevronDown, {
             size: 16,
             class: "fill-current opacity-60"
@@ -77,9 +102,9 @@ const ThemeSelector = component$((props) => {
               type: "radio",
               name: "theme-dropdown",
               class: "theme-controller btn btn-sm btn-ghost justify-start",
-              "aria-label": themeToName(theme),
+              "aria-label": themeToName(theme, displayLocale.value),
               value: theme,
-              checked: theme === currentTheme.value,
+              checked: theme === (currentTheme.value ?? "auto"),
               onChange$: () => {
                 currentTheme.value = theme;
                 if (theme === "auto") {
@@ -88,6 +113,9 @@ const ThemeSelector = component$((props) => {
                 } else {
                   localStorage.setItem("theme", theme);
                 }
+                if (onValueChange) {
+                  onValueChange(theme);
+                }
                 const activeElement = document.activeElement;
                 if (activeElement) {
                   activeElement.blur();

package/lib/components/time-zone-selector.qwik.cjs

@@ -3,7 +3,29 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const qwikIcons = require("@nr1e/qwik-icons");
-function timeZoneToName(timezone) {
+const messages = require("../paraglide/messages.qwik.cjs");
+const runtime = require("../paraglide/runtime.qwik.cjs");
+function toParaglideLocale(locale) {
+  const baseCode = locale.split("-")[0]?.toLowerCase();
+  const validBaseCodes = [
+    ...new Set(runtime.locales.map((l) => l.split("-")[0].toLowerCase()))
+  ];
+  if (validBaseCodes.includes(baseCode)) {
+    return baseCode;
+  }
+  return "en";
+}
+function timeZoneToName(timezone, displayLocale) {
+  const messageKey = `tz_${timezone.replace(/\//g, "_")}`;
+  const m = messages;
+  if (messageKey in m && typeof m[messageKey] === "function") {
+    if (displayLocale) {
+      return m[messageKey]({}, {
+        locale: displayLocale
+      });
+    }
+    return m[messageKey]();
+  }
   if (timezone === "auto") {
     return "Auto (Browser)";
   }
@@ -73,10 +95,14 @@ const TIMEZONES = [
   "UTC"
 ];
 const TimeZoneSelector = qwik.component$((props) => {
-  const currentTimeZone = qwik.useSignal("auto");
+  const currentTimeZone = qwik.useSignal(void 0);
+  const displayLocale = qwik.useSignal("en");
+  const onValueChange = props?.onValueChange$;
   qwik.useVisibleTask$(() => {
     const savedTimeZone = localStorage.getItem("timezone");
     currentTimeZone.value = savedTimeZone ?? "auto";
+    const savedLocale = localStorage.getItem("locale");
+    displayLocale.value = toParaglideLocale(savedLocale ?? "en");
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "dropdown",
@@ -86,7 +112,9 @@ const TimeZoneSelector = qwik.component$((props) => {
         tabIndex: 0,
         class: "btn m-1",
         children: [
-          timeZoneToName(currentTimeZone.value),
+          currentTimeZone.value !== void 0 ? timeZoneToName(currentTimeZone.value, displayLocale.value) : /* @__PURE__ */ jsxRuntime.jsx(qwikIcons.SpinnersBarsRotateFade, {
+            size: 18
+          }),
           /* @__PURE__ */ jsxRuntime.jsx(qwikIcons.MdiChevronDown, {
             size: 16,
             class: "fill-current opacity-60"
@@ -104,9 +132,9 @@ const TimeZoneSelector = qwik.component$((props) => {
               type: "radio",
               name: "timezone-dropdown",
               class: "btn btn-sm btn-ghost justify-start",
-              "aria-label": timeZoneToName(timezone),
+              "aria-label": timeZoneToName(timezone, displayLocale.value),
               value: timezone,
-              checked: timezone === currentTimeZone.value,
+              checked: timezone === (currentTimeZone.value ?? "auto"),
               onChange$: () => {
                 currentTimeZone.value = timezone;
                 if (timezone === "auto") {
@@ -114,6 +142,9 @@ const TimeZoneSelector = qwik.component$((props) => {
                 } else {
                   localStorage.setItem("timezone", timezone);
                 }
+                if (onValueChange) {
+                  onValueChange(timezone);
+                }
                 const activeElement = document.activeElement;
                 if (activeElement) {
                   activeElement.blur();

package/lib/components/time-zone-selector.qwik.mjs

@@ -1,7 +1,29 @@
 import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
 import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
-import { MdiChevronDown } from "@nr1e/qwik-icons";
-function timeZoneToName(timezone) {
+import { SpinnersBarsRotateFade, MdiChevronDown } from "@nr1e/qwik-icons";
+import * as messages from "../paraglide/messages.qwik.mjs";
+import { locales } from "../paraglide/runtime.qwik.mjs";
+function toParaglideLocale(locale) {
+  const baseCode = locale.split("-")[0]?.toLowerCase();
+  const validBaseCodes = [
+    ...new Set(locales.map((l) => l.split("-")[0].toLowerCase()))
+  ];
+  if (validBaseCodes.includes(baseCode)) {
+    return baseCode;
+  }
+  return "en";
+}
+function timeZoneToName(timezone, displayLocale) {
+  const messageKey = `tz_${timezone.replace(/\//g, "_")}`;
+  const m = messages;
+  if (messageKey in m && typeof m[messageKey] === "function") {
+    if (displayLocale) {
+      return m[messageKey]({}, {
+        locale: displayLocale
+      });
+    }
+    return m[messageKey]();
+  }
   if (timezone === "auto") {
     return "Auto (Browser)";
   }
@@ -71,10 +93,14 @@ const TIMEZONES = [
   "UTC"
 ];
 const TimeZoneSelector = component$((props) => {
-  const currentTimeZone = useSignal("auto");
+  const currentTimeZone = useSignal(void 0);
+  const displayLocale = useSignal("en");
+  const onValueChange = props?.onValueChange$;
   useVisibleTask$(() => {
     const savedTimeZone = localStorage.getItem("timezone");
     currentTimeZone.value = savedTimeZone ?? "auto";
+    const savedLocale = localStorage.getItem("locale");
+    displayLocale.value = toParaglideLocale(savedLocale ?? "en");
   });
   return /* @__PURE__ */ jsxs("div", {
     class: "dropdown",
@@ -84,7 +110,9 @@ const TimeZoneSelector = component$((props) => {
         tabIndex: 0,
         class: "btn m-1",
         children: [
-          timeZoneToName(currentTimeZone.value),
+          currentTimeZone.value !== void 0 ? timeZoneToName(currentTimeZone.value, displayLocale.value) : /* @__PURE__ */ jsx(SpinnersBarsRotateFade, {
+            size: 18
+          }),
           /* @__PURE__ */ jsx(MdiChevronDown, {
             size: 16,
             class: "fill-current opacity-60"
@@ -102,9 +130,9 @@ const TimeZoneSelector = component$((props) => {
               type: "radio",
               name: "timezone-dropdown",
               class: "btn btn-sm btn-ghost justify-start",
-              "aria-label": timeZoneToName(timezone),
+              "aria-label": timeZoneToName(timezone, displayLocale.value),
               value: timezone,
-              checked: timezone === currentTimeZone.value,
+              checked: timezone === (currentTimeZone.value ?? "auto"),
               onChange$: () => {
                 currentTimeZone.value = timezone;
                 if (timezone === "auto") {
@@ -112,6 +140,9 @@ const TimeZoneSelector = component$((props) => {
                 } else {
                   localStorage.setItem("timezone", timezone);
                 }
+                if (onValueChange) {
+                  onValueChange(timezone);
+                }
                 const activeElement = document.activeElement;
                 if (activeElement) {
                   activeElement.blur();

package/lib/components/timer.qwik.cjs

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+const Timer = qwik.component$((props) => {
+  const warnFired = qwik.useSignal(false);
+  const expiredFired = qwik.useSignal(false);
+  qwik.useVisibleTask$(({ track, cleanup }) => {
+    track(() => props.dateTime);
+    warnFired.value = false;
+    expiredFired.value = false;
+    if (!props.dateTime) return;
+    const targetTime = new Date(props.dateTime).getTime();
+    if (isNaN(targetTime)) return;
+    const warnMs = (props.warnMinutes ?? 5) * 60 * 1e3;
+    let localWarnFired = false;
+    let localExpiredFired = false;
+    const check = () => {
+      const remaining = targetTime - Date.now();
+      if (!localExpiredFired && remaining <= 0) {
+        localExpiredFired = true;
+        expiredFired.value = true;
+        return;
+      }
+      if (!localWarnFired && remaining > 0 && remaining <= warnMs) {
+        localWarnFired = true;
+        warnFired.value = true;
+      }
+    };
+    check();
+    const id = setInterval(check, 1e3);
+    cleanup(() => clearInterval(id));
+  });
+  qwik.useTask$(async ({ track }) => {
+    track(() => warnFired.value);
+    if (warnFired.value && props.onWarn$) {
+      await props.onWarn$();
+    }
+  });
+  qwik.useTask$(async ({ track }) => {
+    track(() => expiredFired.value);
+    if (expiredFired.value && props.onExpired$) {
+      await props.onExpired$();
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+});
+exports.Timer = Timer;

package/lib/components/timer.qwik.mjs

@@ -0,0 +1,48 @@
+import { jsx, Fragment } from "@builder.io/qwik/jsx-runtime";
+import { component$, useSignal, useVisibleTask$, useTask$ } from "@builder.io/qwik";
+const Timer = component$((props) => {
+  const warnFired = useSignal(false);
+  const expiredFired = useSignal(false);
+  useVisibleTask$(({ track, cleanup }) => {
+    track(() => props.dateTime);
+    warnFired.value = false;
+    expiredFired.value = false;
+    if (!props.dateTime) return;
+    const targetTime = new Date(props.dateTime).getTime();
+    if (isNaN(targetTime)) return;
+    const warnMs = (props.warnMinutes ?? 5) * 60 * 1e3;
+    let localWarnFired = false;
+    let localExpiredFired = false;
+    const check = () => {
+      const remaining = targetTime - Date.now();
+      if (!localExpiredFired && remaining <= 0) {
+        localExpiredFired = true;
+        expiredFired.value = true;
+        return;
+      }
+      if (!localWarnFired && remaining > 0 && remaining <= warnMs) {
+        localWarnFired = true;
+        warnFired.value = true;
+      }
+    };
+    check();
+    const id = setInterval(check, 1e3);
+    cleanup(() => clearInterval(id));
+  });
+  useTask$(async ({ track }) => {
+    track(() => warnFired.value);
+    if (warnFired.value && props.onWarn$) {
+      await props.onWarn$();
+    }
+  });
+  useTask$(async ({ track }) => {
+    track(() => expiredFired.value);
+    if (expiredFired.value && props.onExpired$) {
+      await props.onExpired$();
+    }
+  });
+  return /* @__PURE__ */ jsx(Fragment, {});
+});
+export {
+  Timer
+};

package/lib/index.qwik.cjs

@@ -18,16 +18,20 @@ const dropUp = require("./components/drop-up.qwik.cjs");
 const fieldset = require("./components/fieldset.qwik.cjs");
 const googleSignInButton = require("./components/google-sign-in-button.qwik.cjs");
 const gtm = require("./components/gtm.qwik.cjs");
+const localeSelector = require("./components/locale-selector.qwik.cjs");
 const menu = require("./components/menu.qwik.cjs");
 const microsoftSignInButton = require("./components/microsoft-sign-in-button.qwik.cjs");
 const paceBar = require("./components/pace-bar.qwik.cjs");
+const radioField = require("./components/radio-field.qwik.cjs");
 const refreshButton = require("./components/refresh-button.qwik.cjs");
 const selectField = require("./components/select-field.qwik.cjs");
+const sessionWatcher = require("./components/session-watcher.qwik.cjs");
 const submitButton = require("./components/submit-button.qwik.cjs");
 const textField = require("./components/text-field.qwik.cjs");
 const textareaField = require("./components/textarea-field.qwik.cjs");
 const themeSelector = require("./components/theme-selector.qwik.cjs");
 const timeZoneSelector = require("./components/time-zone-selector.qwik.cjs");
+const timer = require("./components/timer.qwik.cjs");
 const universalLayout = require("./components/universal-layout.qwik.cjs");
 exports.AddButton = addButton.AddButton;
 exports.AlertError = alertError.AlertError;
@@ -55,6 +59,8 @@ exports.Fieldset = fieldset.Fieldset;
 exports.GoogleSignInButton = googleSignInButton.GoogleSignInButton;
 exports.GtmBody = gtm.GtmBody;
 exports.GtmHead = gtm.GtmHead;
+exports.LocaleSelector = localeSelector.LocaleSelector;
+exports.localeToName = localeSelector.localeToName;
 exports.Menu = menu.Menu;
 exports.MenuButton = menu.MenuButton;
 exports.MenuDivider = menu.MenuDivider;
@@ -64,8 +70,10 @@ exports.MenuLink = menu.MenuLink;
 exports.Submenu = menu.Submenu;
 exports.MicrosoftSignInButton = microsoftSignInButton.MicrosoftSignInButton;
 exports.PaceBar = paceBar.PaceBar;
+exports.RadioField = radioField.RadioField;
 exports.RefreshButton = refreshButton.RefreshButton;
 exports.SelectField = selectField.SelectField;
+exports.SessionWatcher = sessionWatcher.SessionWatcher;
 exports.SubmitButton = submitButton.SubmitButton;
 exports.TextField = textField.TextField;
 exports.TextareaField = textareaField.TextareaField;
@@ -74,4 +82,5 @@ exports.ThemeSelector = themeSelector.ThemeSelector;
 exports.themeToName = themeSelector.themeToName;
 exports.TimeZoneSelector = timeZoneSelector.TimeZoneSelector;
 exports.timeZoneToName = timeZoneSelector.timeZoneToName;
+exports.Timer = timer.Timer;
 exports.UniversalLayout = universalLayout.UniversalLayout;

package/lib/index.qwik.mjs

@@ -16,16 +16,20 @@ import { DropUp, DropUpButton, DropUpButtonSelector, DropUpLink, DropUpSubmenu }
 import { Fieldset } from "./components/fieldset.qwik.mjs";
 import { GoogleSignInButton } from "./components/google-sign-in-button.qwik.mjs";
 import { GtmBody, GtmHead } from "./components/gtm.qwik.mjs";
+import { LocaleSelector, localeToName } from "./components/locale-selector.qwik.mjs";
 import { Menu, MenuButton, MenuDivider, MenuGroup, MenuGroupSummary, MenuLink, Submenu } from "./components/menu.qwik.mjs";
 import { MicrosoftSignInButton } from "./components/microsoft-sign-in-button.qwik.mjs";
 import { PaceBar } from "./components/pace-bar.qwik.mjs";
+import { RadioField } from "./components/radio-field.qwik.mjs";
 import { RefreshButton } from "./components/refresh-button.qwik.mjs";
 import { SelectField } from "./components/select-field.qwik.mjs";
+import { SessionWatcher } from "./components/session-watcher.qwik.mjs";
 import { SubmitButton } from "./components/submit-button.qwik.mjs";
 import { TextField } from "./components/text-field.qwik.mjs";
 import { TextareaField } from "./components/textarea-field.qwik.mjs";
 import { THEMES, ThemeSelector, themeToName } from "./components/theme-selector.qwik.mjs";
 import { TimeZoneSelector, timeZoneToName } from "./components/time-zone-selector.qwik.mjs";
+import { Timer } from "./components/timer.qwik.mjs";
 import { UniversalLayout } from "./components/universal-layout.qwik.mjs";
 export {
   AddButton,
@@ -54,6 +58,7 @@ export {
   GoogleSignInButton,
   GtmBody,
   GtmHead,
+  LocaleSelector,
   Menu,
   MenuButton,
   MenuDivider,
@@ -62,8 +67,10 @@ export {
   MenuLink,
   MicrosoftSignInButton,
   PaceBar,
+  RadioField,
   RefreshButton,
   SelectField,
+  SessionWatcher,
   Submenu,
   SubmitButton,
   THEMES,
@@ -71,7 +78,9 @@ export {
   TextareaField,
   ThemeSelector,
   TimeZoneSelector,
+  Timer,
   UniversalLayout,
+  localeToName,
   themeToName,
   timeZoneToName
 };