@nmorph/nmorph-ui-kit 3.0.9 → 3.0.10

package/dist/components/feedback/nmorph-guide/NmorphGuide.vue2.js

@@ -1,5 +1,5 @@
 import './NmorphGuide.css';
-import { defineComponent as j, ref as C, computed as a, watch as z, provide as A } from "vue";
+import { defineComponent as j, ref as B, computed as a, watch as z, provide as A } from "vue";
 import { useZIndex as V } from "../../../hooks/use-z-index.js";
 import { nmorphGuideInjectionKey as W } from "./types.js";
 const E = /* @__PURE__ */ j({
@@ -12,6 +12,7 @@ const E = /* @__PURE__ */ j({
     closeOnFinish: { type: Boolean, required: !1, default: !0 },
     showClose: { type: Boolean, required: !1, default: !0 },
     showProgress: { type: Boolean, required: !1, default: !0 },
+    bordered: { type: Boolean, required: !1, default: !1 },
     backText: { type: String, required: !1, default: "Back" },
     nextText: { type: String, required: !1, default: "Next" },
     finishText: { type: String, required: !1, default: "Finish" },
@@ -23,40 +24,40 @@ const E = /* @__PURE__ */ j({
     maxWidth: { type: [Number, String], required: !1, default: "280px" }
   },
   emits: ["update:model-value", "update:active-step", "change", "back", "next", "finish", "close"],
-  setup(B, { expose: N, emit: F }) {
-    const r = B, i = F, u = C({}), x = C(void 0);
-    let p = 0;
-    const d = (e) => String(e), T = a(() => {
+  setup(C, { expose: N, emit: F }) {
+    const t = C, i = F, u = B({}), x = B(void 0);
+    let f = 0;
+    const d = (e) => String(e), b = a(() => {
       const e = /* @__PURE__ */ new Map();
-      return r.steps.forEach((t, o) => {
-        e.set(d(t.name), {
-          ...t,
-          order: t.order ?? o
+      return t.steps.forEach((r, o) => {
+        e.set(d(r.name), {
+          ...r,
+          order: r.order ?? o
         });
       }), e;
     }), s = a(
       () => Object.values(u.value).map((e) => ({
         ...e,
-        ...T.value.get(d(e.name)),
+        ...b.value.get(d(e.name)),
         registrationOrder: e.registrationOrder
-      })).filter((e) => !e.disabled).sort((e, t) => {
-        const o = e.order ?? e.registrationOrder, P = t.order ?? t.registrationOrder;
+      })).filter((e) => !e.disabled).sort((e, r) => {
+        const o = e.order ?? e.registrationOrder, P = r.order ?? r.registrationOrder;
         return o - P;
       })
-    ), g = a(() => r.modelValue && s.value.length > 0), b = V(g, () => r.zIndex), q = a(() => r.activeStep ?? x.value), l = a(() => s.value.findIndex((e) => e.name === q.value)), n = a(() => s.value[l.value] ?? null), O = a(() => l.value <= 0), w = a(() => l.value >= s.value.length - 1), f = (e) => {
-      const t = s.value.find((o) => o.name === e);
-      t && (x.value = e, i("update:active-step", e), i("change", t, s.value.indexOf(t)));
+    ), g = a(() => t.modelValue && s.value.length > 0), T = V(g, () => t.zIndex), q = a(() => t.activeStep ?? x.value), l = a(() => s.value.findIndex((e) => e.name === q.value)), n = a(() => s.value[l.value] ?? null), O = a(() => l.value <= 0), w = a(() => l.value >= s.value.length - 1), p = (e) => {
+      const r = s.value.find((o) => o.name === e);
+      r && (x.value = e, i("update:active-step", e), i("change", r, s.value.indexOf(r)));
     }, c = (e) => {
-      const t = s.value[e];
-      t && f(t.name);
+      const r = s.value[e];
+      r && p(r.name);
     }, v = () => {
       i("update:model-value", !1), i("close", n.value, l.value);
     }, m = () => {
-      i("finish", n.value, l.value), r.closeOnFinish && v();
+      i("finish", n.value, l.value), t.closeOnFinish && v();
     }, h = () => {
       if (n.value) {
         if (i("back", n.value, l.value), O.value) {
-          r.loop && c(s.value.length - 1);
+          t.loop && c(s.value.length - 1);
           return;
         }
         c(l.value - 1);
@@ -64,31 +65,31 @@ const E = /* @__PURE__ */ j({
     }, S = () => {
       if (n.value) {
         if (i("next", n.value, l.value), w.value) {
-          r.loop ? c(0) : m();
+          t.loop ? c(0) : m();
           return;
         }
         c(l.value + 1);
       }
     }, y = (e) => {
-      f(e);
+      p(e);
     }, _ = (e) => {
-      const t = d(e.name), o = u.value[t];
+      const r = d(e.name), o = u.value[r];
       u.value = {
         ...u.value,
-        [t]: {
+        [r]: {
           ...o,
           ...e,
-          registrationOrder: o?.registrationOrder ?? p
+          registrationOrder: o?.registrationOrder ?? f
         }
-      }, o || (p += 1);
+      }, o || (f += 1);
     }, k = (e) => {
-      const t = d(e), o = { ...u.value };
-      delete o[t], u.value = o;
+      const r = d(e), o = { ...u.value };
+      delete o[r], u.value = o;
     };
     z(
-      [() => r.modelValue, s, n],
-      ([e, t, o]) => {
-        !e || o || t.length === 0 || f(t[0].name);
+      [() => t.modelValue, s, n],
+      ([e, r, o]) => {
+        !e || o || r.length === 0 || p(r[0].name);
       },
       { immediate: !0 }
     ), A(W, {
@@ -96,18 +97,19 @@ const E = /* @__PURE__ */ j({
       activeStep: n,
       activeIndex: l,
       steps: s,
-      loop: a(() => r.loop),
-      showClose: a(() => r.showClose),
-      showProgress: a(() => r.showProgress),
-      backText: a(() => r.backText),
-      nextText: a(() => r.nextText),
-      finishText: a(() => r.finishText),
-      closeText: a(() => r.closeText),
-      zIndex: b,
-      teleportTo: a(() => r.teleportTo),
-      disabledTeleport: a(() => r.disabledTeleport),
-      width: a(() => r.width),
-      maxWidth: a(() => r.maxWidth),
+      loop: a(() => t.loop),
+      showClose: a(() => t.showClose),
+      showProgress: a(() => t.showProgress),
+      bordered: a(() => t.bordered),
+      backText: a(() => t.backText),
+      nextText: a(() => t.nextText),
+      finishText: a(() => t.finishText),
+      closeText: a(() => t.closeText),
+      zIndex: T,
+      teleportTo: a(() => t.teleportTo),
+      disabledTeleport: a(() => t.disabledTeleport),
+      width: a(() => t.width),
+      maxWidth: a(() => t.maxWidth),
       registerStep: _,
       unregisterStep: k,
       goToStep: y,
@@ -116,11 +118,11 @@ const E = /* @__PURE__ */ j({
       finish: m,
       close: v
     }), N({ back: h, next: S, finish: m, close: v, goToStep: y });
-    const I = { props: r, emit: i, registeredSteps: u, internalActiveStep: x, get registrationCursor() {
-      return p;
+    const I = { props: t, emit: i, registeredSteps: u, internalActiveStep: x, get registrationCursor() {
+      return f;
     }, set registrationCursor(e) {
-      p = e;
-    }, getStepKey: d, stepOverrides: T, steps: s, active: g, guideZIndex: b, activeStepName: q, activeIndex: l, activeStep: n, isFirstStep: O, isLastStep: w, setActiveStep: f, goToIndex: c, close: v, finish: m, back: h, next: S, goToStep: y, registerStep: _, unregisterStep: k };
+      f = e;
+    }, getStepKey: d, stepOverrides: b, steps: s, active: g, guideZIndex: T, activeStepName: q, activeIndex: l, activeStep: n, isFirstStep: O, isLastStep: w, setActiveStep: p, goToIndex: c, close: v, finish: m, back: h, next: S, goToStep: y, registerStep: _, unregisterStep: k };
     return Object.defineProperty(I, "__isScriptSetup", { enumerable: !1, value: !0 }), I;
   }
 });

package/dist/components/feedback/nmorph-guide/NmorphGuideStep.css

@@ -1 +1 @@
-.nmorph-guide-step__card{display:grid;gap:var(--indentation-03);min-width:min(240px,100vw - 48px)}.nmorph-guide-step__image{display:block;width:100%;max-height:140px;border-radius:var(--default-border-radius);object-fit:cover}.nmorph-guide-step__body{display:grid;gap:var(--indentation-02)}.nmorph-guide-step__progress{color:var(--nmorph-placeholder-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-guide-step__title{margin:0;color:var(--nmorph-text-color);font-size:var(--nmorph-typography-title-small-font-size);line-height:var(--nmorph-typography-title-small-line-height)}.nmorph-guide-step__text{margin:0;color:var(--nmorph-text-color);font-size:var(--nmorph-typography-body-font-size);line-height:var(--nmorph-typography-body-line-height)}.nmorph-guide-step__actions{display:flex;gap:var(--indentation-02);align-items:center}.nmorph-guide-step__spacer{flex:1 1 auto}
+.nmorph-guide-step__card{display:grid;gap:var(--indentation-03);box-sizing:border-box;min-width:min(240px,100vw - 48px);padding:var(--indentation-02);border-radius:var(--default-border-radius)}.nmorph-guide-step__card--bordered{border:var(--nmorph-plain-border)}.nmorph-guide-step__image{display:block;width:100%;max-height:140px;border-radius:var(--default-border-radius);object-fit:cover}.nmorph-guide-step__body{display:grid;gap:var(--indentation-02)}.nmorph-guide-step__progress{color:var(--nmorph-placeholder-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-guide-step__title{margin:0;color:var(--nmorph-text-color);font-size:var(--nmorph-typography-title-small-font-size);line-height:var(--nmorph-typography-title-small-line-height)}.nmorph-guide-step__text{margin:0;color:var(--nmorph-text-color);font-size:var(--nmorph-typography-body-font-size);line-height:var(--nmorph-typography-body-line-height)}.nmorph-guide-step__actions{display:flex;gap:var(--indentation-02);align-items:center}.nmorph-guide-step__spacer{flex:1 1 auto}

package/dist/components/feedback/nmorph-guide/NmorphGuideStep.vue.js

@@ -1,14 +1,9 @@
 import './NmorphGuideStep.css';
 import g from "./NmorphGuideStep.vue2.js";
-import { openBlock as t, createBlock as s, withCtx as a, renderSlot as c, normalizeProps as h, mergeProps as m, createElementBlock as i, createCommentVNode as o, createElementVNode as n, toDisplayString as l, createVNode as p } from "vue";
+import { openBlock as t, createBlock as s, withCtx as a, renderSlot as c, normalizeProps as m, mergeProps as h, createElementBlock as o, normalizeClass as _, createCommentVNode as i, createElementVNode as d, toDisplayString as l, createVNode as p } from "vue";
 /* empty css                     */
-import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-const u = {
-  key: 1,
-  class: "nmorph-guide-step__card",
-  role: "dialog",
-  "aria-live": "polite"
-}, v = ["src", "alt"], x = { class: "nmorph-guide-step__body" }, k = {
+import u from "../../../_virtual/_plugin-vue_export-helper.js";
+const v = ["src", "alt"], x = { class: "nmorph-guide-step__body" }, k = {
   key: 0,
   class: "nmorph-guide-step__progress"
 }, S = {
@@ -18,7 +13,7 @@ const u = {
   key: 2,
   class: "nmorph-guide-step__text"
 }, b = { class: "nmorph-guide-step__actions" };
-function w(d, r, y, e, C, N) {
+function C(n, r, w, e, y, N) {
   return t(), s(e.NmorphTooltip, {
     "force-show": e.isActive,
     position: e.tooltipPosition,
@@ -31,77 +26,89 @@ function w(d, r, y, e, C, N) {
     disabled: !e.guide || e.props.disabled
   }, {
     content: a(() => [
-      e.hasCustomContent && e.stepSlotProps ? c(d.$slots, "content", h(m({ key: 0 }, e.stepSlotProps))) : e.currentStep && e.stepSlotProps ? (t(), i("div", u, [
-        e.currentStep.imageSrc ? (t(), i("img", {
-          key: 0,
-          class: "nmorph-guide-step__image",
-          src: e.currentStep.imageSrc,
-          alt: e.currentStep.imageAlt || e.currentStep.title || ""
-        }, null, 8, v)) : o("v-if", !0),
-        n("div", x, [
-          e.guide?.showProgress.value ? (t(), i(
-            "div",
-            k,
-            l(e.stepSlotProps.index + 1) + " / " + l(e.stepSlotProps.total),
-            1
-            /* TEXT */
-          )) : o("v-if", !0),
-          e.currentStep.title ? (t(), i(
-            "h3",
-            S,
-            l(e.currentStep.title),
-            1
-            /* TEXT */
-          )) : o("v-if", !0),
-          e.currentStep.text ? (t(), i(
-            "p",
-            f,
-            l(e.currentStep.text),
-            1
-            /* TEXT */
-          )) : o("v-if", !0)
-        ]),
-        n("div", b, [
-          e.guide?.showClose.value ? (t(), s(e.NmorphButton, {
+      e.hasCustomContent && e.stepSlotProps ? c(n.$slots, "content", m(h({ key: 0 }, e.stepSlotProps))) : e.currentStep && e.stepSlotProps ? (t(), o(
+        "div",
+        {
+          key: 1,
+          class: _(["nmorph-guide-step__card", e.guide?.bordered.value && "nmorph-guide-step__card--bordered"]),
+          role: "dialog",
+          "aria-live": "polite"
+        },
+        [
+          e.currentStep.imageSrc ? (t(), o("img", {
             key: 0,
-            class: "nmorph-guide-step__close",
-            text: e.guide.closeText.value,
-            design: "plain",
-            thickness: "thin",
-            onClick: e.guide.close
-          }, null, 8, ["text", "onClick"])) : o("v-if", !0),
-          r[1] || (r[1] = n(
-            "span",
-            { class: "nmorph-guide-step__spacer" },
-            null,
-            -1
-            /* CACHED */
-          )),
-          p(e.NmorphButton, {
-            class: "nmorph-guide-step__back",
-            text: e.guide?.backText.value,
-            design: "plain",
-            thickness: "thin",
-            disabled: e.isFirstStep && !e.guide?.loop.value,
-            onClick: e.guide?.back
-          }, null, 8, ["text", "disabled", "onClick"]),
-          p(e.NmorphButton, {
-            class: "nmorph-guide-step__next",
-            text: e.isLastStep && !e.guide?.loop.value ? e.guide?.finishText.value : e.guide?.nextText.value,
-            thickness: "thin",
-            onClick: r[0] || (r[0] = (P) => e.isLastStep && !e.guide?.loop.value ? e.guide?.finish() : e.guide?.next())
-          }, null, 8, ["text"])
-        ])
-      ])) : o("v-if", !0)
+            class: "nmorph-guide-step__image",
+            src: e.currentStep.imageSrc,
+            alt: e.currentStep.imageAlt || e.currentStep.title || ""
+          }, null, 8, v)) : i("v-if", !0),
+          d("div", x, [
+            e.guide?.showProgress.value ? (t(), o(
+              "div",
+              k,
+              l(e.stepSlotProps.index + 1) + " / " + l(e.stepSlotProps.total),
+              1
+              /* TEXT */
+            )) : i("v-if", !0),
+            e.currentStep.title ? (t(), o(
+              "h3",
+              S,
+              l(e.currentStep.title),
+              1
+              /* TEXT */
+            )) : i("v-if", !0),
+            e.currentStep.text ? (t(), o(
+              "p",
+              f,
+              l(e.currentStep.text),
+              1
+              /* TEXT */
+            )) : i("v-if", !0)
+          ]),
+          d("div", b, [
+            e.guide?.showClose.value ? (t(), s(e.NmorphButton, {
+              key: 0,
+              class: "nmorph-guide-step__close",
+              text: e.guide.closeText.value,
+              design: "plain",
+              thickness: "thin",
+              onClick: e.guide.close
+            }, null, 8, ["text", "onClick"])) : i("v-if", !0),
+            r[1] || (r[1] = d(
+              "span",
+              { class: "nmorph-guide-step__spacer" },
+              null,
+              -1
+              /* CACHED */
+            )),
+            p(e.NmorphButton, {
+              class: "nmorph-guide-step__back",
+              text: e.guide?.backText.value,
+              design: "plain",
+              thickness: "thin",
+              disabled: e.isFirstStep && !e.guide?.loop.value,
+              onClick: e.guide?.back
+            }, null, 8, ["text", "disabled", "onClick"]),
+            p(e.NmorphButton, {
+              class: "nmorph-guide-step__next",
+              text: e.isLastStep && !e.guide?.loop.value ? e.guide?.finishText.value : e.guide?.nextText.value,
+              design: "plain",
+              thickness: "thin",
+              onClick: r[0] || (r[0] = (P) => e.isLastStep && !e.guide?.loop.value ? e.guide?.finish() : e.guide?.next())
+            }, null, 8, ["text"])
+          ])
+        ],
+        2
+        /* CLASS */
+      )) : i("v-if", !0)
     ]),
     default: a(() => [
-      c(d.$slots, "default")
+      c(n.$slots, "default")
     ]),
     _: 3
     /* FORWARDED */
   }, 8, ["force-show", "position", "z-index", "teleport-to", "disabled-teleport", "width", "max-width", "disabled"]);
 }
-const A = /* @__PURE__ */ _(g, [["render", w], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-guide/NmorphGuideStep.vue"]]);
+const A = /* @__PURE__ */ u(g, [["render", C], ["__file", "/builds/ketjo/nmorph/library/src/components/feedback/nmorph-guide/NmorphGuideStep.vue"]]);
 export {
   A as default
 };