@nexxtmove/ui 0.0.23 → 0.1.0

package/dist/index.d.ts

@@ -6,6 +6,10 @@ import { PublicProps } from 'vue';
 
 declare const __VLS_component: DefineComponent<NexxtButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
 
+declare const __VLS_component_2: DefineComponent<NexxtHeaderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare const __VLS_component_3: DefineComponent<NexxtStepperHeaderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtStepperHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
 declare type __VLS_Props = {
     value: number;
     duration?: number;
@@ -21,14 +25,49 @@ declare function __VLS_template(): {
     rootEl: HTMLButtonElement;
 };
 
+declare function __VLS_template_2(): {
+    attrs: Partial<{}>;
+    slots: {
+        center?(_: {}): any;
+        right?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_3(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
 declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 
+declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
+
+declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
+declare type __VLS_WithTemplateSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_3<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type EasingFunction = 'ease-linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
 
 declare type IconType = 'regular' | 'solid' | 'light' | 'duotone' | 'brands';
@@ -46,6 +85,14 @@ declare interface NexxtButtonProps {
     buttonType?: 'button' | 'submit' | 'reset';
 }
 
+export declare const NexxtHeader: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+
+declare interface NexxtHeaderProps {
+    title: string;
+    backButtonText?: string;
+    backButtonAction?: () => void;
+}
+
 export declare const NexxtIcon: DefineComponent<NexxtIconProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtIconProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
 declare interface NexxtIconProps {
@@ -62,4 +109,14 @@ declare interface NexxtProgressBarProps {
     stepTitles?: string[];
 }
 
+export declare const NexxtStepperHeader: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
+
+declare interface NexxtStepperHeaderProps {
+    title: string;
+    currentStep: InstanceType<typeof NexxtProgressBar>['currentStep'];
+    steps: InstanceType<typeof NexxtProgressBar>['stepTitles'];
+    backButtonText?: InstanceType<typeof NexxtHeader>['backButtonText'];
+    backButtonAction: InstanceType<typeof NexxtHeader>['backButtonAction'];
+}
+
 export { }

package/dist/index.js

@@ -1,5 +1,5 @@
-import { defineComponent as f, ref as T, computed as r, watch as B, createBlock as $, openBlock as a, TransitionGroup as N, withCtx as h, createElementBlock as l, Fragment as p, renderList as w, createVNode as v, Transition as k, toDisplayString as g, normalizeClass as o, createCommentVNode as u, renderSlot as S, watchEffect as j, createElementVNode as d, normalizeStyle as P } from "vue";
-const C = /* @__PURE__ */ f({
+import { defineComponent as v, ref as T, computed as u, watch as N, createBlock as g, openBlock as a, TransitionGroup as S, withCtx as d, createElementBlock as s, Fragment as p, renderList as B, createVNode as f, Transition as w, toDisplayString as m, normalizeClass as n, createCommentVNode as o, renderSlot as y, createElementVNode as r, createTextVNode as j, watchEffect as A, normalizeStyle as C, createSlots as H } from "vue";
+const P = /* @__PURE__ */ v({
   __name: "AnimatedNumber",
   props: {
     value: {},
@@ -7,39 +7,39 @@ const C = /* @__PURE__ */ f({
     easing: { default: "ease-out" }
   },
   setup(e) {
-    const t = T("up"), s = r(() => String(e.value).split("")), n = r(() => `duration-${e.duration}`);
-    return B(
+    const t = T("up"), l = u(() => String(e.value).split("")), i = u(() => `duration-${e.duration}`);
+    return N(
       () => e.value,
-      (i, m) => {
-        t.value = i > m ? "up" : "down";
+      (c, b) => {
+        t.value = c > b ? "up" : "down";
       }
-    ), (i, m) => (a(), $(N, {
+    ), (c, b) => (a(), g(S, {
       tag: "div",
       class: "relative flex shrink-0 items-center tabular-nums",
       "aria-label": e.value,
-      "enter-active-class": `transition-all ${n.value} ${e.easing}`,
-      "leave-active-class": `absolute transition-all ${n.value} ${e.easing}`,
+      "enter-active-class": `transition-all ${i.value} ${e.easing}`,
+      "leave-active-class": `absolute transition-all ${i.value} ${e.easing}`,
       "enter-from-class": t.value === "up" ? "translate-y-full opacity-0" : "-translate-y-full opacity-0",
       "leave-to-class": t.value === "up" ? "-translate-y-full opacity-0" : "translate-y-full opacity-0",
       "move-class": "transition-all duration-500 ease-in-out"
     }, {
-      default: h(() => [
-        (a(!0), l(p, null, w(s.value, (y, c) => (a(), l("div", {
-          key: c,
+      default: d(() => [
+        (a(!0), s(p, null, B(l.value, (x, h) => (a(), s("div", {
+          key: h,
           class: "relative inline-flex h-[1.5em] w-[1ch] items-center justify-center overflow-hidden",
           "aria-hidden": "true"
         }, [
-          v(k, {
-            "enter-active-class": `transition-transform ${n.value} ${e.easing}`,
-            "leave-active-class": `absolute inset-0 transition-transform ${n.value} ${e.easing}`,
+          f(w, {
+            "enter-active-class": `transition-transform ${i.value} ${e.easing}`,
+            "leave-active-class": `absolute inset-0 transition-transform ${i.value} ${e.easing}`,
             "enter-from-class": t.value === "up" ? "translate-y-full" : "-translate-y-full",
             "leave-to-class": t.value === "up" ? "-translate-y-full" : "translate-y-full"
           }, {
-            default: h(() => [
-              (a(), l("span", {
-                key: y,
+            default: d(() => [
+              (a(), s("span", {
+                key: x,
                 class: "flex h-full w-full items-center justify-center"
-              }, g(y), 1))
+              }, m(x), 1))
             ]),
             _: 2
           }, 1032, ["enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"])
@@ -48,7 +48,7 @@ const C = /* @__PURE__ */ f({
       _: 1
     }, 8, ["aria-label", "enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"]));
   }
-}), b = /* @__PURE__ */ f({
+}), k = /* @__PURE__ */ v({
   name: "NexxtIcon",
   __name: "Icon",
   props: {
@@ -56,14 +56,14 @@ const C = /* @__PURE__ */ f({
     type: { default: "light" }
   },
   setup(e) {
-    return (t, s) => (a(), l("i", {
-      class: o([`fa-${e.type}`, `fa-${e.name}`, "items-center", "justify-center"])
+    return (t, l) => (a(), s("i", {
+      class: n([`fa-${e.type}`, `fa-${e.name}`, "items-center", "justify-center"])
     }, null, 2));
   }
-}), M = ["type", "disabled", "data-variant"], V = {
+}), V = ["type", "disabled", "data-variant"], M = {
   key: 0,
-  class: /* @__PURE__ */ o(["absolute inset-0 flex items-center justify-center rounded-lg"])
-}, q = /* @__PURE__ */ f({
+  class: /* @__PURE__ */ n(["absolute inset-0 flex items-center justify-center rounded-lg"])
+}, E = /* @__PURE__ */ v({
   name: "NexxtButton",
   __name: "Button",
   props: {
@@ -75,10 +75,10 @@ const C = /* @__PURE__ */ f({
     buttonType: { default: "button" }
   },
   setup(e) {
-    return (t, s) => (a(), l("button", {
+    return (t, l) => (a(), s("button", {
       type: e.buttonType,
       disabled: e.disabled,
-      class: o([
+      class: n([
         "button relative flex h-10 cursor-pointer items-center justify-center overflow-hidden rounded-lg transition-colors duration-200 focus-visible:outline-3 disabled:cursor-not-allowed",
         `button-${e.variant}`,
         t.$slots.default ?? "w-10",
@@ -87,23 +87,23 @@ const C = /* @__PURE__ */ f({
       ]),
       "data-variant": e.variant
     }, [
-      e.icon ? (a(), $(b, {
+      e.icon ? (a(), g(k, {
         key: 0,
         name: e.icon,
-        class: o(["transition-all duration-200", { "order-last": e.iconRight, "opacity-0": e.loading }])
-      }, null, 8, ["name", "class"])) : u("", !0),
-      t.$slots.default ? (a(), l("span", {
+        class: n(["transition-all duration-200", { "order-last": e.iconRight, "opacity-0": e.loading }])
+      }, null, 8, ["name", "class"])) : o("", !0),
+      t.$slots.default ? (a(), s("span", {
         key: 1,
-        class: o([
+        class: n([
           "inline-block transition-all duration-200",
           { "opacity-0": e.loading },
           e.variant === "link" ? "underline underline-offset-1" : "",
           e.variant === "link" && !e.loading && !e.disabled ? "hover:underline-offset-2" : ""
         ])
       }, [
-        S(t.$slots, "default")
-      ], 2)) : u("", !0),
-      v(k, {
+        y(t.$slots, "default")
+      ], 2)) : o("", !0),
+      f(w, {
         "enter-active-class": "transition-opacity duration-200",
         "enter-from-class": "opacity-0",
         "enter-to-class": "opacity-100",
@@ -111,28 +111,69 @@ const C = /* @__PURE__ */ f({
         "leave-from-class": "opacity-100",
         "leave-to-class": "opacity-0"
       }, {
-        default: h(() => [
-          e.loading ? (a(), l("div", V, [
-            v(b, {
+        default: d(() => [
+          e.loading ? (a(), s("div", M, [
+            f(k, {
               name: "spinner-third",
               type: "light",
               class: "fa-spin absolute text-sm"
             })
-          ])) : u("", !0)
+          ])) : o("", !0)
         ]),
         _: 1
       })
-    ], 10, M));
+    ], 10, V));
   }
-}), E = { class: "@container flex flex-col gap-2" }, I = { class: "flex items-center justify-between gap-2" }, L = ["aria-label", "aria-valuenow", "aria-valuetext"], z = {
+}), I = { class: "flex max-w-full items-center justify-start gap-4" }, L = { class: "block truncate text-lg font-semibold text-sapphire-500" }, z = {
+  key: 0,
+  class: "col-span-1 col-start-2 flex justify-center"
+}, D = /* @__PURE__ */ v({
+  name: "NexxtHeader",
+  __name: "Header",
+  props: {
+    title: {},
+    backButtonText: { default: "Back" },
+    backButtonAction: { type: Function, default: () => {
+      window.history.back();
+    } }
+  },
+  setup(e) {
+    return (t, l) => (a(), s("div", {
+      class: n(["header flex items-center", t.$slots.center ? "grid grid-cols-3" : ""])
+    }, [
+      r("div", I, [
+        f(E, {
+          class: "shrink-0",
+          variant: "secondary",
+          onClick: e.backButtonAction
+        }, {
+          default: d(() => [
+            j(m(e.backButtonText), 1)
+          ]),
+          _: 1
+        }, 8, ["onClick"]),
+        r("span", L, m(e.title), 1)
+      ]),
+      t.$slots.center ? (a(), s("div", z, [
+        y(t.$slots, "center")
+      ])) : o("", !0),
+      t.$slots.right ? (a(), s("div", {
+        key: 1,
+        class: n(t.$slots.center ? "col-span-1 col-start-3 flex justify-end" : "ml-auto")
+      }, [
+        y(t.$slots, "right")
+      ], 2)) : o("", !0)
+    ], 2));
+  }
+}), F = { class: "@container" }, R = { class: "flex flex-col @md:gap-2" }, q = { class: "flex items-center justify-between gap-2" }, G = ["aria-label", "aria-valuenow", "aria-valuetext"], J = {
   key: 0,
   class: "flex items-center tabular-nums @md:hidden",
   "aria-hidden": "true"
-}, A = {
+}, K = {
   key: 0,
   class: "flex justify-between @max-md:order-first @max-md:justify-center",
   "aria-label": "Progress steps"
-}, D = ["aria-current"], F = /* @__PURE__ */ f({
+}, O = ["aria-current"], Q = /* @__PURE__ */ v({
   name: "NexxtProgressBar",
   __name: "ProgressBar",
   props: {
@@ -142,46 +183,87 @@ const C = /* @__PURE__ */ f({
     stepTitles: {}
   },
   setup(e) {
-    const t = r(() => Math.min(Math.max(0, e.currentStep), Math.max(0, e.steps - 1))), s = r(() => e.steps > 0 ? t.value + 1 : 0), n = r(() => e.steps <= 1 ? e.steps === 1 ? 100 : 0 : t.value / (e.steps - 1) * 100), i = r(() => !!e.stepTitles?.length);
-    return j(() => {
+    const t = u(() => Math.min(Math.max(0, e.currentStep), Math.max(0, e.steps - 1))), l = u(() => e.steps > 0 ? t.value + 1 : 0), i = u(() => e.steps <= 1 ? e.steps === 1 ? 100 : 0 : t.value / (e.steps - 1) * 100), c = u(() => !!e.stepTitles?.length);
+    return A(() => {
       e.stepTitles && e.stepTitles.length !== e.steps && console.warn(
         `[NexxtProgressBar] The "stepTitles" array length (${e.stepTitles.length}) must match the "steps" prop (${e.steps}).`
       );
-    }), (m, y) => (a(), l("div", E, [
-      d("div", I, [
-        d("div", {
-          class: "progress-bar progress-bar-bar h-2 w-full overflow-hidden rounded-full",
-          role: "progressbar",
-          "aria-label": e.progressLabel,
-          "aria-valuemin": "0",
-          "aria-valuemax": "100",
-          "aria-valuenow": Math.round(n.value),
-          "aria-valuetext": i.value && e.stepTitles?.[t.value] ? `Step ${s.value} of ${e.steps}: ${e.stepTitles[t.value]}` : `Step ${s.value} of ${e.steps}`
-        }, [
-          d("div", {
-            class: "progress-bar-progress h-full transition-all duration-500 ease-out",
-            style: P({ width: `${n.value}%` }),
-            "aria-hidden": !0
-          }, null, 4)
-        ], 8, L),
-        i.value ? (a(), l("div", z, [
-          v(C, { value: s.value }, null, 8, ["value"]),
-          d("span", null, "/" + g(e.steps), 1)
-        ])) : u("", !0)
-      ]),
-      i.value ? (a(), l("ol", A, [
-        (a(!0), l(p, null, w(e.stepTitles, (c, x) => (a(), l("li", {
-          key: c,
-          class: o(["transition-colors duration-500 @max-md:hidden", x === t.value ? "font-medium text-sapphire-500 @max-md:inline" : ""]),
-          "aria-current": x === t.value ? "step" : void 0
-        }, g(c), 11, D))), 128))
-      ])) : u("", !0)
+    }), (b, x) => (a(), s("div", F, [
+      r("div", R, [
+        r("div", q, [
+          r("div", {
+            class: "progress-bar progress-bar-bar h-2 w-full overflow-hidden rounded-full",
+            role: "progressbar",
+            "aria-label": e.progressLabel,
+            "aria-valuemin": "0",
+            "aria-valuemax": "100",
+            "aria-valuenow": Math.round(i.value),
+            "aria-valuetext": c.value && e.stepTitles?.[t.value] ? `Step ${l.value} of ${e.steps}: ${e.stepTitles[t.value]}` : `Step ${l.value} of ${e.steps}`
+          }, [
+            r("div", {
+              class: "progress-bar-progress h-full transition-all duration-500 ease-out",
+              style: C({ width: `${i.value}%` }),
+              "aria-hidden": !0
+            }, null, 4)
+          ], 8, G),
+          c.value ? (a(), s("div", J, [
+            f(P, { value: l.value }, null, 8, ["value"]),
+            r("span", null, "/" + m(e.steps), 1)
+          ])) : o("", !0)
+        ]),
+        c.value ? (a(), s("ol", K, [
+          (a(!0), s(p, null, B(e.stepTitles, (h, $) => (a(), s("li", {
+            key: h,
+            class: n(["transition-colors duration-500 @max-md:hidden", $ === t.value ? "font-medium text-sapphire-500 @max-md:inline" : ""]),
+            "aria-current": $ === t.value ? "step" : void 0
+          }, m(h), 11, O))), 128))
+        ])) : o("", !0)
+      ])
     ]));
   }
+}), W = /* @__PURE__ */ v({
+  name: "NexxtStepperHeader",
+  __name: "StepperHeader",
+  props: {
+    title: {},
+    currentStep: {},
+    steps: {},
+    backButtonText: {},
+    backButtonAction: {}
+  },
+  setup(e) {
+    return (t, l) => (a(), g(D, {
+      title: e.title,
+      "back-button-action": e.backButtonAction,
+      "back-button-text": e.backButtonText
+    }, H({ _: 2 }, [
+      e.steps ? {
+        name: "center",
+        fn: d(() => [
+          f(Q, {
+            class: "w-full",
+            steps: e.steps.length,
+            "step-titles": e.steps,
+            "current-step": e.currentStep
+          }, null, 8, ["steps", "step-titles", "current-step"])
+        ]),
+        key: "0"
+      } : void 0,
+      t.$slots.default ? {
+        name: "right",
+        fn: d(() => [
+          y(t.$slots, "default")
+        ]),
+        key: "1"
+      } : void 0
+    ]), 1032, ["title", "back-button-action", "back-button-text"]));
+  }
 });
 export {
-  C as NexxtAnimatedNumber,
-  q as NexxtButton,
-  b as NexxtIcon,
-  F as NexxtProgressBar
+  P as NexxtAnimatedNumber,
+  E as NexxtButton,
+  D as NexxtHeader,
+  k as NexxtIcon,
+  Q as NexxtProgressBar,
+  W as NexxtStepperHeader
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.0.23",
+  "version": "0.1.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",