@nr1e/qwik-ui 0.1.3 → 1.0.0

package/lib/components/auto-dismiss.qwik.cjs

@@ -3,22 +3,31 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const AutoDismiss = qwik.component$((props) => {
-  const visible = qwik.useSignal(props?.visible?.value ?? false);
+  const visible = qwik.useSignal(props?.visible?.value ?? true);
   if (!visible.value) return null;
+  qwik.useTask$(async ({ track }) => {
+    track(() => props?.visible?.value);
+    if (props?.visible?.value && props.visible.value !== visible.value) {
+      visible.value = props.visible.value;
+    }
+  });
   qwik.useTask$(async ({ track }) => {
     track(() => visible.value);
-    if (props?.visible) {
+    if (props?.visible?.value && props.visible.value !== visible.value) {
       props.visible.value = visible.value;
     }
     if (!visible.value && props?.onDismiss$) {
       props.onDismiss$();
     }
   });
-  qwik.useVisibleTask$(({ cleanup }) => {
-    const id = setTimeout(() => {
-      visible.value = false;
-    }, 6e3);
-    cleanup(() => clearTimeout(id));
+  qwik.useVisibleTask$(({ track, cleanup }) => {
+    track(() => visible.value);
+    if (visible.value) {
+      const id = setTimeout(() => {
+        visible.value = false;
+      }, 6e3);
+      cleanup(() => clearTimeout(id));
+    }
   });
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     class: [

package/lib/components/auto-dismiss.qwik.mjs

@@ -1,22 +1,31 @@
 import { jsx } from "@builder.io/qwik/jsx-runtime";
 import { component$, useSignal, useTask$, useVisibleTask$, Slot } from "@builder.io/qwik";
 const AutoDismiss = component$((props) => {
-  const visible = useSignal(props?.visible?.value ?? false);
+  const visible = useSignal(props?.visible?.value ?? true);
   if (!visible.value) return null;
+  useTask$(async ({ track }) => {
+    track(() => props?.visible?.value);
+    if (props?.visible?.value && props.visible.value !== visible.value) {
+      visible.value = props.visible.value;
+    }
+  });
   useTask$(async ({ track }) => {
     track(() => visible.value);
-    if (props?.visible) {
+    if (props?.visible?.value && props.visible.value !== visible.value) {
       props.visible.value = visible.value;
     }
     if (!visible.value && props?.onDismiss$) {
       props.onDismiss$();
     }
   });
-  useVisibleTask$(({ cleanup }) => {
-    const id = setTimeout(() => {
-      visible.value = false;
-    }, 6e3);
-    cleanup(() => clearTimeout(id));
+  useVisibleTask$(({ track, cleanup }) => {
+    track(() => visible.value);
+    if (visible.value) {
+      const id = setTimeout(() => {
+        visible.value = false;
+      }, 6e3);
+      cleanup(() => clearTimeout(id));
+    }
   });
   return /* @__PURE__ */ jsx("div", {
     class: [

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

@@ -3,24 +3,39 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const qwikCity = require("@builder.io/qwik-city");
-const DropUpItem = qwik.component$((props) => {
-  const nav = qwikCity.useNavigate();
+const DropUpButton = qwik.component$((props) => {
   return /* @__PURE__ */ jsxRuntime.jsx("li", {
+    class: props.class ?? "",
+    children: /* @__PURE__ */ jsxRuntime.jsx("button", {
+      class: `text-nowrap ${props?.buttonClass ?? null}`,
+      onClick$: async (event) => {
+        if (props.loading) {
+          props.loading.value = true;
+        }
+        await props.onClick$(event);
+        if (props.loading) {
+          props.loading.value = false;
+        }
+      }
+    })
+  });
+});
+const DropUpLink = qwik.component$((props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("li", {
+    class: props.class ?? "",
     children: /* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
       href: props.href,
       prefetch: props.prefetch,
-      class: `text-nowrap ${props?.class ?? null}`,
+      class: `text-nowrap ${props?.linkClass ?? null}`,
       onClick$: async (event) => {
+        if (props.loading) {
+          props.loading.value = true;
+        }
         if (props.onClick$) {
           await props.onClick$(event);
-        } else {
-          if (props.loading) {
-            props.loading.value = true;
-          }
-          await nav(props.href);
-          if (props.loading) {
-            props.loading.value = false;
-          }
+        }
+        if (props.loading) {
+          props.loading.value = false;
         }
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
@@ -43,12 +58,29 @@ const DropUpButtonSelector = qwik.component$((props) => {
   });
 });
 const DropUp = qwik.component$((props) => {
+  const open = qwik.useSignal(props?.open?.value ?? false);
+  qwik.useTask$(({ track }) => {
+    track(() => props?.open?.value);
+    if (props?.open?.value && props.open.value !== open.value) {
+      open.value = props.open.value;
+    }
+  });
+  qwik.useTask$(({ track }) => {
+    track(() => open.value);
+    if (props?.open?.value && props?.open?.value !== open.value) {
+      props.open.value = open.value;
+    }
+  });
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    class: `dropdown dropdown-top ${props?.class ?? ""}`,
+    class: `dropdown dropdown-top ${open.value ? "dropdown-open" : "dropdown-close"} ${props?.class ?? ""}`,
+    onClick$: () => {
+      open.value = !open.value;
+    },
     children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
   });
 });
 exports.DropUp = DropUp;
+exports.DropUpButton = DropUpButton;
 exports.DropUpButtonSelector = DropUpButtonSelector;
-exports.DropUpItem = DropUpItem;
+exports.DropUpLink = DropUpLink;
 exports.DropUpSubmenu = DropUpSubmenu;

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

@@ -1,24 +1,39 @@
 import { jsx } from "@builder.io/qwik/jsx-runtime";
-import { component$, Slot } from "@builder.io/qwik";
-import { useNavigate, Link } from "@builder.io/qwik-city";
-const DropUpItem = component$((props) => {
-  const nav = useNavigate();
+import { component$, Slot, useSignal, useTask$ } from "@builder.io/qwik";
+import { Link } from "@builder.io/qwik-city";
+const DropUpButton = component$((props) => {
   return /* @__PURE__ */ jsx("li", {
+    class: props.class ?? "",
+    children: /* @__PURE__ */ jsx("button", {
+      class: `text-nowrap ${props?.buttonClass ?? null}`,
+      onClick$: async (event) => {
+        if (props.loading) {
+          props.loading.value = true;
+        }
+        await props.onClick$(event);
+        if (props.loading) {
+          props.loading.value = false;
+        }
+      }
+    })
+  });
+});
+const DropUpLink = component$((props) => {
+  return /* @__PURE__ */ jsx("li", {
+    class: props.class ?? "",
     children: /* @__PURE__ */ jsx(Link, {
       href: props.href,
       prefetch: props.prefetch,
-      class: `text-nowrap ${props?.class ?? null}`,
+      class: `text-nowrap ${props?.linkClass ?? null}`,
       onClick$: async (event) => {
+        if (props.loading) {
+          props.loading.value = true;
+        }
         if (props.onClick$) {
           await props.onClick$(event);
-        } else {
-          if (props.loading) {
-            props.loading.value = true;
-          }
-          await nav(props.href);
-          if (props.loading) {
-            props.loading.value = false;
-          }
+        }
+        if (props.loading) {
+          props.loading.value = false;
         }
       },
       children: /* @__PURE__ */ jsx(Slot, {})
@@ -41,14 +56,31 @@ const DropUpButtonSelector = component$((props) => {
   });
 });
 const DropUp = component$((props) => {
+  const open = useSignal(props?.open?.value ?? false);
+  useTask$(({ track }) => {
+    track(() => props?.open?.value);
+    if (props?.open?.value && props.open.value !== open.value) {
+      open.value = props.open.value;
+    }
+  });
+  useTask$(({ track }) => {
+    track(() => open.value);
+    if (props?.open?.value && props?.open?.value !== open.value) {
+      props.open.value = open.value;
+    }
+  });
   return /* @__PURE__ */ jsx("div", {
-    class: `dropdown dropdown-top ${props?.class ?? ""}`,
+    class: `dropdown dropdown-top ${open.value ? "dropdown-open" : "dropdown-close"} ${props?.class ?? ""}`,
+    onClick$: () => {
+      open.value = !open.value;
+    },
     children: /* @__PURE__ */ jsx(Slot, {})
   });
 });
 export {
   DropUp,
+  DropUpButton,
   DropUpButtonSelector,
-  DropUpItem,
+  DropUpLink,
   DropUpSubmenu
 };

package/lib/components/menu.qwik.cjs

@@ -7,7 +7,7 @@ const MenuButton = qwik.component$((props) => {
   return /* @__PURE__ */ jsxRuntime.jsx("li", {
     class: props.class ?? "",
     children: /* @__PURE__ */ jsxRuntime.jsx("button", {
-      class: `truncate ${props.selected ? "bg-base-200" : ""} ${props.linkClass ?? ""}`,
+      class: `truncate ${props.selected ? "bg-base-200" : ""} ${props.buttonClass ?? ""}`,
       onClick$: async (event) => {
         if (props.loading) {
           props.loading.value = true;
@@ -28,6 +28,7 @@ const MenuLink = qwik.component$((props) => {
       class: `truncate ${props.selected ? "bg-base-200" : ""} ${props.linkClass ?? ""}`,
       href: props.href,
       prefetch: props.prefetch ?? true,
+      target: props.target,
       onClick$: async (event) => {
         if (props.loading) {
           props.loading.value = true;

package/lib/components/menu.qwik.mjs

@@ -5,7 +5,7 @@ const MenuButton = component$((props) => {
   return /* @__PURE__ */ jsx("li", {
     class: props.class ?? "",
     children: /* @__PURE__ */ jsx("button", {
-      class: `truncate ${props.selected ? "bg-base-200" : ""} ${props.linkClass ?? ""}`,
+      class: `truncate ${props.selected ? "bg-base-200" : ""} ${props.buttonClass ?? ""}`,
       onClick$: async (event) => {
         if (props.loading) {
           props.loading.value = true;
@@ -26,6 +26,7 @@ const MenuLink = component$((props) => {
       class: `truncate ${props.selected ? "bg-base-200" : ""} ${props.linkClass ?? ""}`,
       href: props.href,
       prefetch: props.prefetch ?? true,
+      target: props.target,
       onClick$: async (event) => {
         if (props.loading) {
           props.loading.value = true;

package/lib/index.qwik.cjs

@@ -35,8 +35,9 @@ exports.DockLabel = dock.DockLabel;
 exports.DockLink = dock.DockLink;
 exports.FixedCenterBottom = fixedCenterBottom.FixedCenterBottom;
 exports.DropUp = dropUp.DropUp;
+exports.DropUpButton = dropUp.DropUpButton;
 exports.DropUpButtonSelector = dropUp.DropUpButtonSelector;
-exports.DropUpItem = dropUp.DropUpItem;
+exports.DropUpLink = dropUp.DropUpLink;
 exports.DropUpSubmenu = dropUp.DropUpSubmenu;
 exports.GoogleSignInButton = googleSignInButton.GoogleSignInButton;
 exports.GtmBody = gtm.GtmBody;

package/lib/index.qwik.mjs

@@ -8,7 +8,7 @@ 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 { DropUp, DropUpButtonSelector, DropUpItem, DropUpSubmenu } from "./components/drop-up.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";
 import { Menu, MenuButton, MenuDivider, MenuGroup, MenuGroupSummary, MenuLink, Submenu } from "./components/menu.qwik.mjs";
@@ -33,8 +33,9 @@ export {
   DockLabel,
   DockLink,
   DropUp,
+  DropUpButton,
   DropUpButtonSelector,
-  DropUpItem,
+  DropUpLink,
   DropUpSubmenu,
   FixedCenterBottom,
   GoogleSignInButton,

package/lib-types/components/drop-up.d.ts

@@ -1,22 +1,30 @@
 import { QRL, Signal } from '@builder.io/qwik';
-export interface DropUpItemProps {
-    href?: string;
+export interface DropUpButtonProps {
+    loading?: Signal<boolean>;
+    onClick$: QRL<(event: Event) => void>;
+    class?: string;
+    buttonClass?: string;
+}
+export declare const DropUpButton: import("@builder.io/qwik").Component<DropUpButtonProps>;
+export interface DropUpLinkProps {
+    href: string;
     prefetch?: boolean;
-    selected?: boolean;
     loading?: Signal<boolean>;
     onClick$?: QRL<(event: Event) => void>;
     class?: string;
+    linkClass?: string;
 }
-export declare const DropUpItem: import("@builder.io/qwik").Component<DropUpItemProps>;
+export declare const DropUpLink: import("@builder.io/qwik").Component<DropUpLinkProps>;
 export interface DropUpSubmenuProps {
     class?: string;
 }
 export declare const DropUpSubmenu: import("@builder.io/qwik").Component<DropUpSubmenuProps | undefined>;
-export interface DropUpButtonProps {
+export interface DropUpButtonSelectorProps {
     class?: string;
 }
-export declare const DropUpButtonSelector: import("@builder.io/qwik").Component<DropUpButtonProps | undefined>;
+export declare const DropUpButtonSelector: import("@builder.io/qwik").Component<DropUpButtonSelectorProps | undefined>;
 export interface DropUpProps {
     class?: string;
+    open?: Signal<boolean>;
 }
 export declare const DropUp: import("@builder.io/qwik").Component<DropUpProps | undefined>;

package/lib-types/components/menu.d.ts

@@ -4,7 +4,7 @@ export interface MenuButtonProps {
     loading?: Signal<boolean>;
     selected?: boolean;
     onClick$: QRL<(event: Event) => void>;
-    linkClass?: string;
+    buttonClass?: string;
 }
 export declare const MenuButton: import("@builder.io/qwik").Component<MenuButtonProps>;
 export interface MenuLinkProps {
@@ -15,6 +15,7 @@ export interface MenuLinkProps {
     onClick$?: QRL<(event: Event) => void>;
     class?: string;
     linkClass?: string;
+    target?: string;
 }
 export declare const MenuLink: import("@builder.io/qwik").Component<MenuLinkProps>;
 export interface MenuGroupSummaryProps {

package/package.json

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