@nr1e/qwik-ui 1.0.0 → 1.0.2

package/lib/components/drop-up.qwik.cjs

@@ -59,6 +59,7 @@ const DropUpButtonSelector = qwik.component$((props) => {
 });
 const DropUp = qwik.component$((props) => {
   const open = qwik.useSignal(props?.open?.value ?? false);
+  const dropdownRef = qwik.useSignal();
   qwik.useTask$(({ track }) => {
     track(() => props?.open?.value);
     if (props?.open?.value && props.open.value !== open.value) {
@@ -71,7 +72,24 @@ const DropUp = qwik.component$((props) => {
       props.open.value = open.value;
     }
   });
+  qwik.useOnDocument("click", qwik.$((event) => {
+    if (open.value && dropdownRef.value && !dropdownRef.value.contains(event.target)) {
+      console.log("close");
+      open.value = false;
+    }
+  }));
+  qwik.useOnDocument("keydown", qwik.$((event) => {
+    if (open.value && event.key === "Escape") {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+      open.value = false;
+    }
+  }));
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ref: dropdownRef,
     class: `dropdown dropdown-top ${open.value ? "dropdown-open" : "dropdown-close"} ${props?.class ?? ""}`,
     onClick$: () => {
       open.value = !open.value;

package/lib/components/drop-up.qwik.mjs

@@ -1,5 +1,5 @@
 import { jsx } from "@builder.io/qwik/jsx-runtime";
-import { component$, Slot, useSignal, useTask$ } from "@builder.io/qwik";
+import { component$, Slot, useSignal, useTask$, useOnDocument, $ } from "@builder.io/qwik";
 import { Link } from "@builder.io/qwik-city";
 const DropUpButton = component$((props) => {
   return /* @__PURE__ */ jsx("li", {
@@ -57,6 +57,7 @@ const DropUpButtonSelector = component$((props) => {
 });
 const DropUp = component$((props) => {
   const open = useSignal(props?.open?.value ?? false);
+  const dropdownRef = useSignal();
   useTask$(({ track }) => {
     track(() => props?.open?.value);
     if (props?.open?.value && props.open.value !== open.value) {
@@ -69,7 +70,24 @@ const DropUp = component$((props) => {
       props.open.value = open.value;
     }
   });
+  useOnDocument("click", $((event) => {
+    if (open.value && dropdownRef.value && !dropdownRef.value.contains(event.target)) {
+      console.log("close");
+      open.value = false;
+    }
+  }));
+  useOnDocument("keydown", $((event) => {
+    if (open.value && event.key === "Escape") {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+      open.value = false;
+    }
+  }));
   return /* @__PURE__ */ jsx("div", {
+    ref: dropdownRef,
     class: `dropdown dropdown-top ${open.value ? "dropdown-open" : "dropdown-close"} ${props?.class ?? ""}`,
     onClick$: () => {
       open.value = !open.value;

package/lib/components/format-date-time.qwik.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+const lang = require("@nr1e/commons/lang");
+const FormatDateTime = qwik.component$((props) => {
+  const date = qwik.useSignal(null);
+  if (!props.date) return null;
+  qwik.useVisibleTask$(() => {
+    if (props.date) {
+      let timeZone = props.timeZone;
+      if (!props.timeZone) {
+        timeZone = localStorage.getItem("timezone");
+        if (!timeZone || timeZone === "auto") {
+          timeZone = null;
+        }
+      }
+      date.value = lang.formatTimeZoneDateTimeReadable(props.date, timeZone ?? void 0, props.locale ?? void 0);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: date.value
+  });
+});
+exports.FormatDateTime = FormatDateTime;

package/lib/components/format-date-time.qwik.mjs

@@ -0,0 +1,25 @@
+import { jsx, Fragment } from "@builder.io/qwik/jsx-runtime";
+import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
+import { formatTimeZoneDateTimeReadable } from "@nr1e/commons/lang";
+const FormatDateTime = component$((props) => {
+  const date = useSignal(null);
+  if (!props.date) return null;
+  useVisibleTask$(() => {
+    if (props.date) {
+      let timeZone = props.timeZone;
+      if (!props.timeZone) {
+        timeZone = localStorage.getItem("timezone");
+        if (!timeZone || timeZone === "auto") {
+          timeZone = null;
+        }
+      }
+      date.value = formatTimeZoneDateTimeReadable(props.date, timeZone ?? void 0, props.locale ?? void 0);
+    }
+  });
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: date.value
+  });
+});
+export {
+  FormatDateTime
+};

package/lib/components/format-date.qwik.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+const lang = require("@nr1e/commons/lang");
+const FormatDate = qwik.component$((props) => {
+  const date = qwik.useSignal(null);
+  if (!props.date) return null;
+  qwik.useVisibleTask$(() => {
+    if (props.date) {
+      let timeZone = props.timeZone;
+      if (!props.timeZone) {
+        timeZone = localStorage.getItem("timezone");
+        if (!timeZone || timeZone === "auto") {
+          timeZone = null;
+        }
+      }
+      date.value = lang.formatTimeZoneDateShort(props.date, timeZone ?? void 0, props.locale ?? void 0);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: date.value
+  });
+});
+exports.FormatDate = FormatDate;

package/lib/components/format-date.qwik.mjs

@@ -0,0 +1,25 @@
+import { jsx, Fragment } from "@builder.io/qwik/jsx-runtime";
+import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
+import { formatTimeZoneDateShort } from "@nr1e/commons/lang";
+const FormatDate = component$((props) => {
+  const date = useSignal(null);
+  if (!props.date) return null;
+  useVisibleTask$(() => {
+    if (props.date) {
+      let timeZone = props.timeZone;
+      if (!props.timeZone) {
+        timeZone = localStorage.getItem("timezone");
+        if (!timeZone || timeZone === "auto") {
+          timeZone = null;
+        }
+      }
+      date.value = formatTimeZoneDateShort(props.date, timeZone ?? void 0, props.locale ?? void 0);
+    }
+  });
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: date.value
+  });
+});
+export {
+  FormatDate
+};

package/lib/index.qwik.cjs

@@ -10,6 +10,8 @@ const checkboxField = require("./components/checkbox-field.qwik.cjs");
 const dialog = require("./components/dialog.qwik.cjs");
 const dock = require("./components/dock.qwik.cjs");
 const fixedCenterBottom = require("./components/fixed-center-bottom.qwik.cjs");
+const formatDate = require("./components/format-date.qwik.cjs");
+const formatDateTime = require("./components/format-date-time.qwik.cjs");
 const dropUp = require("./components/drop-up.qwik.cjs");
 const googleSignInButton = require("./components/google-sign-in-button.qwik.cjs");
 const gtm = require("./components/gtm.qwik.cjs");
@@ -34,6 +36,8 @@ exports.DockButton = dock.DockButton;
 exports.DockLabel = dock.DockLabel;
 exports.DockLink = dock.DockLink;
 exports.FixedCenterBottom = fixedCenterBottom.FixedCenterBottom;
+exports.FormatDate = formatDate.FormatDate;
+exports.FormatDateTime = formatDateTime.FormatDateTime;
 exports.DropUp = dropUp.DropUp;
 exports.DropUpButton = dropUp.DropUpButton;
 exports.DropUpButtonSelector = dropUp.DropUpButtonSelector;

package/lib/index.qwik.mjs

@@ -8,6 +8,8 @@ import { CheckboxField } from "./components/checkbox-field.qwik.mjs";
 import { Dialog } from "./components/dialog.qwik.mjs";
 import { Dock, DockButton, DockLabel, DockLink } from "./components/dock.qwik.mjs";
 import { FixedCenterBottom } from "./components/fixed-center-bottom.qwik.mjs";
+import { FormatDate } from "./components/format-date.qwik.mjs";
+import { FormatDateTime } from "./components/format-date-time.qwik.mjs";
 import { DropUp, DropUpButton, DropUpButtonSelector, DropUpLink, DropUpSubmenu } from "./components/drop-up.qwik.mjs";
 import { GoogleSignInButton } from "./components/google-sign-in-button.qwik.mjs";
 import { GtmBody, GtmHead } from "./components/gtm.qwik.mjs";
@@ -38,6 +40,8 @@ export {
   DropUpLink,
   DropUpSubmenu,
   FixedCenterBottom,
+  FormatDate,
+  FormatDateTime,
   GoogleSignInButton,
   GtmBody,
   GtmHead,

package/lib-types/components/format-date-time.d.ts

@@ -0,0 +1,6 @@
+export interface FormatDateTimeProps {
+    timeZone?: string | null;
+    locale?: string | null;
+    date: Date | string | null;
+}
+export declare const FormatDateTime: import("@builder.io/qwik").Component<FormatDateTimeProps>;

package/lib-types/components/format-date.d.ts

@@ -0,0 +1,6 @@
+export interface FormatDateProps {
+    timeZone?: string | null;
+    locale?: string | null;
+    date: Date | string | null;
+}
+export declare const FormatDate: import("@builder.io/qwik").Component<FormatDateProps>;

package/lib-types/index.d.ts

@@ -8,6 +8,8 @@ export * from './components/checkbox-field';
 export * from './components/dialog';
 export * from './components/dock';
 export * from './components/fixed-center-bottom';
+export * from './components/format-date';
+export * from './components/format-date-time';
 export * from './components/drop-up';
 export * from './components/google-sign-in-button';
 export * from './components/gtm';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nr1e/qwik-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "NR1E Qwik UI Library",
   "author": "NR1E, Inc.",
   "publishConfig": {
@@ -36,7 +36,8 @@
   "peerDependencies": {
     "@builder.io/qwik-city": "1.19.0",
     "tailwindcss-animated": "2.0.0",
-    "@nr1e/qwik-icons": "0.0.24"
+    "@nr1e/qwik-icons": "0.0.25",
+    "@nr1e/commons": "0.4.3"
   },
   "devDependencies": {
     "@builder.io/qwik": "1.19.0",