@nexxtmove/ui 0.1.13 → 0.1.15

package/dist/index.d.ts

@@ -184,6 +184,7 @@ declare interface NexxtSocialMediaTypeProps {
     variant: 'tiktok' | 'post' | 'reel' | 'story';
     chip?: string;
     selected?: boolean;
+    icons?: SocialPlatform[];
 }
 
 export declare const NexxtStepperHeader: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
@@ -196,4 +197,6 @@ declare interface NexxtStepperHeaderProps {
     backButtonAction: InstanceType<typeof NexxtHeader>['backButtonAction'];
 }
 
+declare type SocialPlatform = 'tiktok' | 'facebook' | 'instagram' | 'linkedin' | 'x' | 'twitter' | 'google';
+
 export { }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as u, ref as H, computed as f, watch as E, createBlock as M, openBlock as e, TransitionGroup as T, withCtx as m, createElementBlock as l, Fragment as $, renderList as F, createVNode as v, Transition as z, toDisplayString as b, normalizeClass as c, createCommentVNode as p, renderSlot as x, createElementVNode as n, createTextVNode as k, watchEffect as N, normalizeStyle as Z, withKeys as S, withModifiers as C, createStaticVNode as w, mergeProps as j, resolveDynamicComponent as A, createSlots as D } from "vue";
+import { defineComponent as u, ref as H, computed as f, watch as E, createBlock as M, openBlock as e, TransitionGroup as T, withCtx as b, createElementBlock as l, Fragment as $, renderList as F, createVNode as v, Transition as z, toDisplayString as g, normalizeClass as c, createCommentVNode as p, renderSlot as x, createElementVNode as i, createTextVNode as k, watchEffect as N, normalizeStyle as Z, withKeys as S, withModifiers as C, createStaticVNode as w, mergeProps as j, resolveDynamicComponent as A, createSlots as D } from "vue";
 const V = /* @__PURE__ */ u({
   __name: "AnimatedNumber",
   props: {
@@ -7,7 +7,7 @@ const V = /* @__PURE__ */ u({
     easing: { default: "ease-out" }
   },
   setup(t) {
-    const a = H("up"), s = f(() => String(t.value).split("")), i = f(() => `duration-${t.duration}`);
+    const a = H("up"), n = f(() => String(t.value).split("")), r = f(() => `duration-${t.duration}`);
     return E(
       () => t.value,
       (d, h) => {
@@ -17,29 +17,29 @@ const V = /* @__PURE__ */ u({
       tag: "div",
       class: "relative flex shrink-0 items-center tabular-nums",
       "aria-label": t.value,
-      "enter-active-class": `transition-all ${i.value} ${t.easing}`,
-      "leave-active-class": `absolute transition-all ${i.value} ${t.easing}`,
+      "enter-active-class": `transition-all ${r.value} ${t.easing}`,
+      "leave-active-class": `absolute transition-all ${r.value} ${t.easing}`,
       "enter-from-class": a.value === "up" ? "translate-y-full opacity-0" : "-translate-y-full opacity-0",
       "leave-to-class": a.value === "up" ? "-translate-y-full opacity-0" : "translate-y-full opacity-0",
       "move-class": "transition-all duration-500 ease-in-out"
     }, {
-      default: m(() => [
-        (e(!0), l($, null, F(s.value, (g, r) => (e(), l("div", {
-          key: r,
+      default: b(() => [
+        (e(!0), l($, null, F(n.value, (m, s) => (e(), l("div", {
+          key: s,
           class: "relative inline-flex h-[1.5em] w-[1ch] items-center justify-center overflow-hidden",
           "aria-hidden": "true"
         }, [
           v(z, {
-            "enter-active-class": `transition-transform ${i.value} ${t.easing}`,
-            "leave-active-class": `absolute inset-0 transition-transform ${i.value} ${t.easing}`,
+            "enter-active-class": `transition-transform ${r.value} ${t.easing}`,
+            "leave-active-class": `absolute inset-0 transition-transform ${r.value} ${t.easing}`,
             "enter-from-class": a.value === "up" ? "translate-y-full" : "-translate-y-full",
             "leave-to-class": a.value === "up" ? "-translate-y-full" : "translate-y-full"
           }, {
-            default: m(() => [
+            default: b(() => [
               (e(), l("span", {
-                key: g,
+                key: m,
                 class: "flex h-full w-full items-center justify-center"
-              }, b(g), 1))
+              }, g(m), 1))
             ]),
             _: 2
           }, 1032, ["enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"])
@@ -56,11 +56,11 @@ const V = /* @__PURE__ */ u({
     type: { default: "light" }
   },
   setup(t) {
-    return (a, s) => (e(), l("i", {
+    return (a, n) => (e(), l("i", {
       class: c([`fa-${t.type}`, `fa-${t.name}`, "items-center", "justify-center"])
     }, null, 2));
   }
-}), P = ["type", "disabled", "data-variant"], I = {
+}), I = ["type", "disabled", "data-variant"], P = {
   key: 0,
   class: /* @__PURE__ */ c(["absolute inset-0 flex items-center justify-center rounded-lg"])
 }, L = /* @__PURE__ */ u({
@@ -75,7 +75,7 @@ const V = /* @__PURE__ */ u({
     buttonType: { default: "button" }
   },
   setup(t) {
-    return (a, s) => (e(), l("button", {
+    return (a, n) => (e(), l("button", {
       type: t.buttonType,
       disabled: t.disabled,
       class: c([
@@ -111,8 +111,8 @@ const V = /* @__PURE__ */ u({
         "leave-from-class": "opacity-100",
         "leave-to-class": "opacity-0"
       }, {
-        default: m(() => [
-          t.loading ? (e(), l("div", I, [
+        default: b(() => [
+          t.loading ? (e(), l("div", P, [
             v(y, {
               name: "spinner-third",
               type: "light",
@@ -122,7 +122,7 @@ const V = /* @__PURE__ */ u({
         ]),
         _: 1
       })
-    ], 10, P));
+    ], 10, I));
   }
 }), q = { class: "justify-start text-center extra-small-semibold text-white" }, K = /* @__PURE__ */ u({
   name: "NexxtChip",
@@ -143,12 +143,12 @@ const V = /* @__PURE__ */ u({
           return "bg-cornflower-blue-600";
       }
     });
-    return (s, i) => (e(), l("span", {
+    return (n, r) => (e(), l("span", {
       class: c(["inline-flex h-5 flex-col items-center justify-center gap-2.5 rounded-[200px] px-4", a.value])
     }, [
-      n("span", q, [
-        x(s.$slots, "default", {}, () => [
-          i[0] || (i[0] = k("Chip", -1))
+      i("span", q, [
+        x(n.$slots, "default", {}, () => [
+          r[0] || (r[0] = k("Chip", -1))
         ])
       ])
     ], 2));
@@ -167,21 +167,21 @@ const V = /* @__PURE__ */ u({
     } }
   },
   setup(t) {
-    return (a, s) => (e(), l("div", {
+    return (a, n) => (e(), l("div", {
       class: c(["header flex items-center", a.$slots.center ? "grid grid-cols-3" : ""])
     }, [
-      n("div", R, [
+      i("div", R, [
         v(L, {
           class: "shrink-0",
           variant: "secondary",
           onClick: t.backButtonAction
         }, {
-          default: m(() => [
-            k(b(t.backButtonText), 1)
+          default: b(() => [
+            k(g(t.backButtonText), 1)
           ]),
           _: 1
         }, 8, ["onClick"]),
-        n("span", G, b(t.title), 1)
+        i("span", G, g(t.title), 1)
       ]),
       a.$slots.center ? (e(), l("div", U, [
         x(a.$slots, "center")
@@ -204,9 +204,9 @@ const V = /* @__PURE__ */ u({
   name: "NexxtInfoBlock",
   __name: "InfoBlock",
   setup(t) {
-    return (a, s) => (e(), l("div", J, [
-      n("div", O, [
-        n("div", Q, [
+    return (a, n) => (e(), l("div", J, [
+      i("div", O, [
+        i("div", Q, [
           v(y, {
             name: "thumbs-up",
             size: "lg",
@@ -214,10 +214,10 @@ const V = /* @__PURE__ */ u({
           })
         ])
       ]),
-      n("div", W, [
-        s[1] || (s[1] = n("span", { class: "mr-[0.7ch] body-semibold" }, "Tip!", -1)),
+      i("div", W, [
+        n[1] || (n[1] = i("span", { class: "mr-[0.7ch] body-semibold" }, "Tip!", -1)),
         x(a.$slots, "default", {}, () => [
-          s[0] || (s[0] = n("span", null, "Koopwoningen doen het goed als post of reel: zo geef je de woning genoeg aandacht én vergroot je het bereik.", -1))
+          n[0] || (n[0] = i("span", null, "Koopwoningen doen het goed als post of reel: zo geef je de woning genoeg aandacht én vergroot je het bereik.", -1))
         ])
       ])
     ]));
@@ -230,7 +230,7 @@ const V = /* @__PURE__ */ u({
   key: 0,
   class: "flex justify-between @max-md:order-first @max-md:justify-center",
   "aria-label": "Progress steps"
-}, s1 = ["aria-current", "role", "tabindex", "aria-label", "onClick", "onKeydown"], n1 = /* @__PURE__ */ u({
+}, n1 = ["aria-current", "role", "tabindex", "aria-label", "onClick", "onKeydown"], s1 = /* @__PURE__ */ u({
   name: "NexxtProgressBar",
   __name: "ProgressBar",
   props: {
@@ -241,37 +241,37 @@ const V = /* @__PURE__ */ u({
   },
   emits: ["update:currentStep"],
   setup(t) {
-    const a = f(() => Math.min(Math.max(0, t.currentStep), Math.max(0, t.steps - 1))), s = f(() => t.steps > 0 ? a.value + 1 : 0), i = f(() => t.steps <= 1 ? t.steps === 1 ? 100 : 0 : a.value / (t.steps - 1) * 100), d = f(() => !!t.stepTitles?.length);
+    const a = f(() => Math.min(Math.max(0, t.currentStep), Math.max(0, t.steps - 1))), n = f(() => t.steps > 0 ? a.value + 1 : 0), r = f(() => t.steps <= 1 ? t.steps === 1 ? 100 : 0 : a.value / (t.steps - 1) * 100), d = f(() => !!t.stepTitles?.length);
     return N(() => {
       t.stepTitles && t.stepTitles.length !== t.steps && console.warn(
         `[NexxtProgressBar] The "stepTitles" array length (${t.stepTitles.length}) must match the "steps" prop (${t.steps}).`
       );
-    }), (h, g) => (e(), l("div", Y, [
-      n("div", _, [
-        n("div", t1, [
-          n("div", {
+    }), (h, m) => (e(), l("div", Y, [
+      i("div", _, [
+        i("div", t1, [
+          i("div", {
             class: "progress-bar progress-bar-bar h-2 w-full overflow-hidden rounded-full",
             role: "progressbar",
             "aria-label": t.progressLabel,
             "aria-valuemin": "0",
             "aria-valuemax": "100",
-            "aria-valuenow": Math.round(i.value),
-            "aria-valuetext": d.value && t.stepTitles?.[a.value] ? `Step ${s.value} of ${t.steps}: ${t.stepTitles[a.value]}` : `Step ${s.value} of ${t.steps}`
+            "aria-valuenow": Math.round(r.value),
+            "aria-valuetext": d.value && t.stepTitles?.[a.value] ? `Step ${n.value} of ${t.steps}: ${t.stepTitles[a.value]}` : `Step ${n.value} of ${t.steps}`
           }, [
-            n("div", {
+            i("div", {
               class: "progress-bar-progress h-full transition-all duration-500 ease-out",
-              style: Z({ width: `${i.value}%` }),
+              style: Z({ width: `${r.value}%` }),
               "aria-hidden": !0
             }, null, 4)
           ], 8, a1),
           d.value ? (e(), l("div", e1, [
-            v(V, { value: s.value }, null, 8, ["value"]),
-            n("span", null, "/" + b(t.steps), 1)
+            v(V, { value: n.value }, null, 8, ["value"]),
+            i("span", null, "/" + g(t.steps), 1)
           ])) : p("", !0)
         ]),
         d.value ? (e(), l("ol", l1, [
-          (e(!0), l($, null, F(t.stepTitles, (r, o) => (e(), l("li", {
-            key: r,
+          (e(!0), l($, null, F(t.stepTitles, (s, o) => (e(), l("li", {
+            key: s,
             class: c(["rounded-xs transition-colors duration-500 focus-visible:outline-3 @max-md:hidden @max-md:body-normal @min-md:small-normal", [
               o === a.value ? "text-sapphire-500 @max-md:inline" : "",
               o < a.value ? "cursor-pointer duration-200! hover:text-sapphire-400" : ""
@@ -279,13 +279,13 @@ const V = /* @__PURE__ */ u({
             "aria-current": o === a.value ? "step" : void 0,
             role: o < a.value ? "button" : void 0,
             tabindex: o < a.value ? 0 : void 0,
-            "aria-label": o < a.value ? `Ga naar ${r}` : void 0,
+            "aria-label": o < a.value ? `Ga naar ${s}` : void 0,
             onClick: (B) => o < a.value && h.$emit("update:currentStep", o),
             onKeydown: [
               S((B) => o < a.value && h.$emit("update:currentStep", o), ["enter"]),
               S(C((B) => o < a.value && h.$emit("update:currentStep", o), ["prevent"]), ["space"])
             ]
-          }, b(r), 43, s1))), 128))
+          }, g(s), 43, n1))), 128))
         ])) : p("", !0)
       ])
     ]));
@@ -305,14 +305,14 @@ const V = /* @__PURE__ */ u({
     tiktok: { type: Boolean }
   },
   setup(t) {
-    const a = t, s = [
+    const a = t, n = [
       { name: "facebook", label: "Facebook", icon: "facebook-f" },
       { name: "instagram", label: "Instagram", icon: "instagram" },
       { name: "linkedin", label: "LinkedIn", icon: "linkedin-in" },
       { name: "x", label: "X (voorheen Twitter)", icon: "x-twitter" },
       { name: "google", label: "Google", icon: "google" },
       { name: "tiktok", label: "TikTok", icon: "tiktok" }
-    ], i = {
+    ], r = {
       facebook: "bg-brands-facebook",
       instagram: "bg-brands-instagram",
       linkedin: "bg-brands-linkedin",
@@ -320,16 +320,16 @@ const V = /* @__PURE__ */ u({
       google: "bg-brands-google",
       tiktok: "bg-brands-tiktok"
     }, d = f(
-      () => s.filter((h) => a[h.name])
+      () => n.filter((h) => a[h.name])
     );
-    return (h, g) => (e(), l("ul", i1, [
-      (e(!0), l($, null, F(d.value, (r) => (e(), l("li", {
-        key: r.name,
-        class: c(["inline-flex h-5 w-5 items-center justify-center rounded-full outline-1 outline-white", i[r.name]]),
-        "aria-label": r.label
+    return (h, m) => (e(), l("ul", i1, [
+      (e(!0), l($, null, F(d.value, (s) => (e(), l("li", {
+        key: s.name,
+        class: c(["inline-flex h-5 w-5 items-center justify-center rounded-full outline-1 outline-white", r[s.name]]),
+        "aria-label": s.label
       }, [
         v(y, {
-          name: r.icon,
+          name: s.icon,
           type: "brands",
           class: "text-[10px] text-white",
           "aria-hidden": "true"
@@ -381,11 +381,12 @@ const x1 = { render: M1 }, y1 = { class: "flex items-center justify-end self-str
   props: {
     variant: {},
     chip: {},
-    selected: { type: Boolean }
+    selected: { type: Boolean },
+    icons: {}
   },
   emits: ["click"],
   setup(t, { emit: a }) {
-    const s = a, i = {
+    const n = a, r = {
       tiktok: "TikTok",
       post: "Post",
       reel: "Reel",
@@ -396,6 +397,11 @@ const x1 = { render: M1 }, y1 = { class: "flex items-center justify-end self-str
       reel: b1,
       story: x1
     })[t.variant]), h = f(() => {
+      if (t.icons)
+        return t.icons.map((s) => s === "twitter" ? "x" : s).reduce(
+          (s, o) => (s[o] = !0, s),
+          {}
+        );
       switch (t.variant) {
         case "tiktok":
           return {
@@ -421,34 +427,34 @@ const x1 = { render: M1 }, y1 = { class: "flex items-center justify-end self-str
           return {};
       }
     });
-    return (g, r) => (e(), l("button", {
+    return (m, s) => (e(), l("button", {
       type: "button",
       class: c(["group inline-flex min-w-60 cursor-pointer flex-col items-start justify-start gap-2.5 overflow-hidden rounded-3xl pt-4 outline-1 -outline-offset-1 transition-colors hover:outline-cornflower-blue-600 focus-visible:outline-2 focus-visible:outline-cornflower-blue-600", t.selected ? "bg-gray-50 outline-cornflower-blue-500" : "bg-white outline-gray-200"]),
-      onClick: r[0] || (r[0] = (o) => s("click"))
+      onClick: s[0] || (s[0] = (o) => n("click"))
     }, [
-      n("div", y1, [
+      i("div", y1, [
         t.chip ? (e(), M(K, {
           key: 0,
           variant: "warning"
         }, {
-          default: m(() => [
-            k(b(t.chip), 1)
+          default: b(() => [
+            k(g(t.chip), 1)
           ]),
           _: 1
         })) : p("", !0),
         v(o1, j({ class: "ml-auto" }, h.value, { "aria-hidden": "true" }), null, 16)
       ]),
-      n("div", k1, [
+      i("div", k1, [
         (e(), M(A(d.value), {
           class: "h-44 object-contain transition-transform group-hover:-translate-y-0.5",
           "aria-hidden": "true"
         }))
       ]),
-      n("div", {
+      i("div", {
         class: c(["inline-flex w-full flex-col items-center justify-center gap-2.5 bg-cornflower-blue-500 py-3.5 transition-colors group-hover:bg-cornflower-blue-600", t.selected ? "bg-cornflower-blue-600" : "bg-cornflower-blue-500"])
       }, [
-        n("div", w1, [
-          n("span", $1, [
+        i("div", w1, [
+          i("span", $1, [
             t.selected ? (e(), M(y, {
               key: 0,
               name: "check",
@@ -456,7 +462,7 @@ const x1 = { render: M1 }, y1 = { class: "flex items-center justify-end self-str
               class: "absolute top-1/2 -translate-x-[calc(100%+4px)] -translate-y-[calc(50%+1px)] text-white",
               "aria-hidden": "true"
             })) : p("", !0),
-            k(" " + b(i[t.variant]), 1)
+            k(" " + g(r[t.variant]), 1)
           ])
         ])
       ], 2)
@@ -474,27 +480,27 @@ const x1 = { render: M1 }, y1 = { class: "flex items-center justify-end self-str
   },
   emits: ["update:currentStep"],
   setup(t) {
-    return (a, s) => (e(), M(X, {
+    return (a, n) => (e(), M(X, {
       title: t.title,
       "back-button-action": t.backButtonAction,
       "back-button-text": t.backButtonText
     }, D({ _: 2 }, [
       t.steps ? {
         name: "center",
-        fn: m(() => [
-          v(n1, {
+        fn: b(() => [
+          v(s1, {
             class: "w-full",
             steps: t.steps.length,
             "step-titles": t.steps,
             "current-step": t.currentStep,
-            "onUpdate:currentStep": s[0] || (s[0] = (i) => a.$emit("update:currentStep", i))
+            "onUpdate:currentStep": n[0] || (n[0] = (r) => a.$emit("update:currentStep", r))
           }, null, 8, ["steps", "step-titles", "current-step"])
         ]),
         key: "0"
       } : void 0,
       a.$slots.default ? {
         name: "right",
-        fn: m(() => [
+        fn: b(() => [
           x(a.$slots, "default")
         ]),
         key: "1"
@@ -509,7 +515,7 @@ export {
   X as NexxtHeader,
   y as NexxtIcon,
   B1 as NexxtInfoBlock,
-  n1 as NexxtProgressBar,
+  s1 as NexxtProgressBar,
   o1 as NexxtSocialIcons,
   S1 as NexxtSocialMediaType,
   z1 as NexxtStepperHeader

package/package.json

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

package/tailwind/nexxtmove.tailwind.components.css

@@ -117,4 +117,8 @@
     @apply border-info-block-border p-(--info-block-padding) border border-solid;
   }
 
+  .social-media-template-info {
+    @apply bg-social-media-template-info-bg;
+  }
+
 }

package/tailwind/nexxtmove.tailwind.theme.css

@@ -159,6 +159,7 @@
   --color-progress-bar-border: var(--color-gray-200);
   --color-header-border-bottom: var(--color-gray-200);
   --color-info-block-border: var(--color-green-500);
+  --color-social-media-template-info-bg: var(--color-cornflower-blue-500);
   --text-xs: 0.75rem;
   --text-base: 1rem;
   --text-lg: 1.125rem;

package/tailwind/nexxtmove.tailwind.utilities.css

@@ -39,7 +39,7 @@
 }
 
 @utility small-semibold {
-  @apply font-sans text-sm;
+  @apply font-sans font-semibold text-sm;
 }
 
 @utility small-link {