@nexxtmove/ui 0.1.57 → 0.1.58

package/dist/index.d.ts

@@ -45,7 +45,11 @@ declare const __VLS_component_12: DefineComponent<NexxtStepperHeaderProps, {}, {
 "onUpdate:currentStep"?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_13: DefineComponent<NexxtTabbedContent_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtTabbedContent_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component_13: DefineComponent<__VLS_PublicProps_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: string) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps_7> & Readonly<{
+"onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_14: DefineComponent<NexxtTooltip_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtTooltip_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
@@ -265,6 +269,11 @@ declare type __VLS_Props = {
 };
 
 declare type __VLS_Props_10 = {
+    event: TimelineEvent;
+    splitView?: boolean;
+};
+
+declare type __VLS_Props_11 = {
     phase: TimelinePhase;
     /** Index within the filtered phases array (used to determine phase direction/date). */
     index: number;
@@ -286,12 +295,9 @@ declare type __VLS_Props_6 = NexxtModalProps;
 
 declare type __VLS_Props_7 = NexxtPaginationProps;
 
-declare type __VLS_Props_8 = NexxtTabs_2;
+declare type __VLS_Props_8 = NexxtTabbedContent_2;
 
-declare type __VLS_Props_9 = {
-    event: TimelineEvent;
-    splitView?: boolean;
-};
+declare type __VLS_Props_9 = NexxtTabs_2;
 
 declare type __VLS_PublicProps = {
     modelValue?: Date | null;
@@ -318,9 +324,13 @@ declare type __VLS_PublicProps_6 = {
 } & __VLS_Props_7;
 
 declare type __VLS_PublicProps_7 = {
-    modelValue?: typeof selected['value'];
+    modelValue?: string;
 } & __VLS_Props_8;
 
+declare type __VLS_PublicProps_8 = {
+    modelValue?: typeof selected['value'];
+} & __VLS_Props_9;
+
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -1215,9 +1225,9 @@ declare interface NexxtTableProps<TKey extends string = string, TRow extends Rec
     loading?: boolean;
 }
 
-export declare const NexxtTabs: DefineComponent<__VLS_PublicProps_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+export declare const NexxtTabs: DefineComponent<__VLS_PublicProps_8, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: string) => any;
-}, string, PublicProps, Readonly<__VLS_PublicProps_7> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_PublicProps_8> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
 containerRef: HTMLDivElement;
@@ -1228,11 +1238,11 @@ declare interface NexxtTabs_2 {
     tablistLabel?: string;
 }
 
-export declare const NexxtTimelineEvent: DefineComponent<__VLS_Props_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_9> & Readonly<{}>, {
+export declare const NexxtTimelineEvent: DefineComponent<__VLS_Props_10, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_10> & Readonly<{}>, {
 splitView: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const NexxtTimelinePhaseblock: DefineComponent<__VLS_Props_10, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_10> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+export declare const NexxtTimelinePhaseblock: DefineComponent<__VLS_Props_11, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_11> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 export declare const NexxtTooltip: __VLS_WithTemplateSlots_14<typeof __VLS_component_14, __VLS_TemplateResult_14["slots"]>;
 

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as h, ref as K, computed as U, inject as rx, createElementBlock as s, openBlock as R, mergeProps as Ni, unref as z, createBlock as D, normalizeClass as L, toDisplayString as k, createCommentVNode as E, createVNode as o, renderSlot as q, Transition as B, withCtx as F, createElementVNode as I, normalizeProps as Ei, guardReactiveProps as Ai, onMounted as xi, Fragment as r, renderList as Q, nextTick as ji, mergeModels as f, useModel as P, watch as Fi, watchEffect as Jx, withDirectives as kx, vModelCheckbox as dx, createTextVNode as H, vModelDynamic as Xx, onUnmounted as hi, withKeys as ai, TransitionGroup as xx, withModifiers as ei, resolveDynamicComponent as Tx, normalizeStyle as Ui, createSlots as zx, createStaticVNode as Pi } from "vue";
+import { defineComponent as h, ref as K, computed as U, inject as rx, createElementBlock as s, openBlock as R, mergeProps as ti, unref as z, createBlock as D, normalizeClass as L, toDisplayString as k, createCommentVNode as E, createVNode as o, renderSlot as q, Transition as B, withCtx as F, createElementVNode as I, normalizeProps as Ei, guardReactiveProps as Ai, onMounted as xi, Fragment as r, renderList as Q, nextTick as ji, mergeModels as f, useModel as P, watch as ei, watchEffect as Jx, withDirectives as kx, vModelCheckbox as dx, createTextVNode as H, vModelDynamic as Xx, onUnmounted as hi, withKeys as ai, TransitionGroup as xx, withModifiers as Ui, resolveDynamicComponent as Tx, normalizeStyle as ui, createSlots as zx, createStaticVNode as Pi } from "vue";
 import { DialogRoot as Qx, DialogPortal as Vx, DialogOverlay as gx, DialogContent as Cx, DialogTitle as bx, DialogDescription as Bx, DialogClose as Mx, PaginationRoot as Px, PaginationList as fx, PaginationFirst as vx, PaginationPrev as $x, PaginationListItem as _x, PaginationEllipsis as iM, PaginationNext as xM, PaginationLast as MM, TooltipProvider as mM, TooltipRoot as cM, TooltipTrigger as lM, TooltipPortal as aM, TooltipContent as ZM } from "reka-ui";
 const RM = String.raw, sM = (() => {
   try {
@@ -490,7 +490,7 @@ const TM = /* @__PURE__ */ Symbol(), zM = ["batched", "trend", "plugins", "anima
     const m = K();
     x({ el: m });
     const c = M, l = U(() => new Intl.NumberFormat(i.locales, i.format)), a = U(() => eM(i.value, l.value, i.prefix, i.suffix)), Z = void 0, G = rx(TM, void 0);
-    return G?.(m, a), (Y, y) => (R(), s("number-flow-vue", Ni({
+    return G?.(m, a), (Y, y) => (R(), s("number-flow-vue", ti({
       ref_key: "el",
       ref: m
     }, Y.$attrs, {
@@ -659,12 +659,12 @@ let wM = {};
 function ni() {
   return wM;
 }
-function ui(i, x) {
+function Ni(i, x) {
   const M = ni(), m = x?.weekStartsOn ?? x?.locale?.options?.weekStartsOn ?? M.weekStartsOn ?? M.locale?.options?.weekStartsOn ?? 0, c = V(i, x?.in), l = c.getDay(), a = (l < m ? 7 : 0) + l - m;
   return c.setDate(c.getDate() - a), c.setHours(0, 0, 0, 0), c;
 }
 function Si(i, x) {
-  return ui(i, { ...x, weekStartsOn: 1 });
+  return Ni(i, { ...x, weekStartsOn: 1 });
 }
 function Kx(i, x) {
   const M = V(i, x?.in), m = M.getFullYear(), c = v(M, 0);
@@ -1202,17 +1202,17 @@ function um(i, x) {
 function Dx(i, x) {
   const M = V(i, x?.in), m = M.getFullYear(), c = ni(), l = x?.firstWeekContainsDate ?? x?.locale?.options?.firstWeekContainsDate ?? c.firstWeekContainsDate ?? c.locale?.options?.firstWeekContainsDate ?? 1, a = v(x?.in || i, 0);
   a.setFullYear(m + 1, 0, l), a.setHours(0, 0, 0, 0);
-  const Z = ui(a, x), G = v(x?.in || i, 0);
+  const Z = Ni(a, x), G = v(x?.in || i, 0);
   G.setFullYear(m, 0, l), G.setHours(0, 0, 0, 0);
-  const Y = ui(G, x);
+  const Y = Ni(G, x);
   return +M >= +Z ? m + 1 : +M >= +Y ? m : m - 1;
 }
 function Nm(i, x) {
   const M = ni(), m = x?.firstWeekContainsDate ?? x?.locale?.options?.firstWeekContainsDate ?? M.firstWeekContainsDate ?? M.locale?.options?.firstWeekContainsDate ?? 1, c = Dx(i, x), l = v(x?.in || i, 0);
-  return l.setFullYear(c, 0, m), l.setHours(0, 0, 0, 0), ui(l, x);
+  return l.setFullYear(c, 0, m), l.setHours(0, 0, 0, 0), Ni(l, x);
 }
 function tm(i, x) {
-  const M = V(i, x?.in), m = +ui(M, x) - +Nm(M, x);
+  const M = V(i, x?.in), m = +Ni(M, x) - +Nm(M, x);
   return Math.round(m / wx) + 1;
 }
 function O(i, x) {
@@ -2914,11 +2914,11 @@ const cc = {
     const M = P(i, "modelValue"), m = x, c = K(
       M.value ? d(new Date(M.value), i.timezone) : d(/* @__PURE__ */ new Date(), i.timezone)
     ), l = K("days"), a = K(null), Z = K("fade");
-    Fi(M, (W) => {
+    ei(M, (W) => {
       W && (c.value = d(new Date(W), i.timezone));
     });
     const G = U(() => {
-      const W = ui(ki(c.value), { weekStartsOn: 1 }), A = dM(Qi(c.value), { weekStartsOn: 1 });
+      const W = Ni(ki(c.value), { weekStartsOn: 1 }), A = dM(Qi(c.value), { weekStartsOn: 1 });
       return qM({ start: W, end: A });
     }), Y = (W) => {
       const A = d(W, i.timezone);
@@ -2994,7 +2994,7 @@ const cc = {
       I("div", {
         class: L(["relative", l.value === "days" && "overflow-hidden"])
       }, [
-        o(B, Ni(p.value, {
+        o(B, ti(p.value, {
           mode: Z.value === "fade" ? "out-in" : void 0
         }), {
           default: F(() => [
@@ -3075,7 +3075,7 @@ const cc = {
     }), (m, c) => (R(), s("label", {
       class: L(["inline-flex cursor-pointer", i.disabled ? "cursor-not-allowed opacity-50" : ""])
     }, [
-      kx(I("input", Ni(m.$attrs, {
+      kx(I("input", ti(m.$attrs, {
         ref_key: "inputRef",
         ref: M,
         type: "checkbox",
@@ -3194,7 +3194,7 @@ const cc = {
         i.leftIcon ? (R(), s("span", Il, [
           o(w, { name: i.leftIcon }, null, 8, ["name"])
         ])) : E("", !0),
-        kx(I("input", Ni({
+        kx(I("input", ti({
           id: z(M),
           "onUpdate:modelValue": l[0] || (l[0] = (a) => m.value = a),
           placeholder: i.placeholder
@@ -3373,7 +3373,7 @@ const cc = {
           y.value && g.value ? (R(), s("div", {
             key: 0,
             class: "absolute top-full left-0 z-10 mt-1 w-full rounded-lg border border-gray-200 bg-white",
-            onMousedown: T[3] || (T[3] = ei(() => {
+            onMousedown: T[3] || (T[3] = Ui(() => {
             }, ["prevent"]))
           }, [
             I("ul", el, [
@@ -3519,7 +3519,7 @@ const cc = {
       icon: c = "tag",
       placeholder: l = "Zoeken..."
     } = x, a = P(i, "modelValue"), Z = K(!1), G = K(null), Y = K(null);
-    Fi(Z, async (t) => {
+    ei(Z, async (t) => {
       t && (await ji(), G.value?.focus());
     });
     const y = (t) => {
@@ -3925,7 +3925,7 @@ const PZ = /* @__PURE__ */ hl(nl, [["render", Wl]]), Dl = {
         Object.entries(M).filter(([J]) => !m.has(J))
       )
     })), l = K(!1), a = K(null), Z = K(null), G = K(null);
-    Fi(l, async (N) => {
+    ei(l, async (N) => {
       N ? (await ji(), G.value?.focus()) : (await ji(), Z.value?.querySelector(
         'button, input, [tabindex]:not([tabindex="-1"])'
       )?.focus());
@@ -3996,7 +3996,7 @@ const PZ = /* @__PURE__ */ hl(nl, [["render", Wl]]), Dl = {
             tabindex: "-1",
             class: L(["absolute z-50 outline-none", e.value])
           }, [
-            o(cl, Ni({
+            o(cl, ti({
               modelValue: x.value,
               "onUpdate:modelValue": J[1] || (J[1] = (u) => x.value = u)
             }, c.value, { onSelect: Y }), null, 16, ["modelValue"])
@@ -4060,7 +4060,7 @@ const PZ = /* @__PURE__ */ hl(nl, [["render", Wl]]), Dl = {
           "stroke-width": i.thickness,
           "stroke-linecap": "butt",
           "stroke-dasharray": `${x.value ? l.value : 0} ${m.value}`,
-          style: Ui({ transition: `stroke-dasharray ${i.duration}ms ease-out` })
+          style: ui({ transition: `stroke-dasharray ${i.duration}ms ease-out` })
         }, null, 12, Ql)
       ], 8, dl),
       (R(), s("foreignObject", {
@@ -4612,7 +4612,7 @@ const PZ = /* @__PURE__ */ hl(nl, [["render", Wl]]), Dl = {
           }, [
             I("div", {
               class: "progress-bar-progress h-full transition-all duration-500 ease-out",
-              style: Ui({ width: `${m.value}%` }),
+              style: ui({ width: `${m.value}%` }),
               "aria-hidden": !0
             }, null, 4)
           ], 8, Ra),
@@ -4635,7 +4635,7 @@ const PZ = /* @__PURE__ */ hl(nl, [["render", Wl]]), Dl = {
             onClick: (Y) => G < x.value && l.$emit("update:currentStep", G),
             onKeydown: [
               ai((Y) => G < x.value && l.$emit("update:currentStep", G), ["enter"]),
-              ai(ei((Y) => G < x.value && l.$emit("update:currentStep", G), ["prevent"]), ["space"])
+              ai(Ui((Y) => G < x.value && l.$emit("update:currentStep", G), ["prevent"]), ["space"])
             ]
           }, k(Z), 43, Ya))), 128))
         ])) : E("", !0)
@@ -4716,7 +4716,7 @@ const PZ = /* @__PURE__ */ hl(nl, [["render", Wl]]), Dl = {
       }
     ]), 1032, ["image", "image-alt"]));
   }
-}), ta = { class: "animate-pulse rounded bg-gray-200" }, ti = /* @__PURE__ */ h({
+}), ta = { class: "animate-pulse rounded bg-gray-200" }, Fi = /* @__PURE__ */ h({
   name: "NexxtSkeleton",
   __name: "Skeleton",
   setup(i) {
@@ -4734,14 +4734,14 @@ const PZ = /* @__PURE__ */ hl(nl, [["render", Wl]]), Dl = {
       role: "status",
       "aria-label": i.ariaLabel
     }, [
-      o(ti, { class: "h-40 w-full rounded-tl-lg rounded-tr-lg rounded-b-none" }),
+      o(Fi, { class: "h-40 w-full rounded-tl-lg rounded-tr-lg rounded-b-none" }),
       I("div", Ja, [
         I("div", ka, [
-          o(ti, { class: "h-4 w-24" }),
-          o(ti, { class: "h-4 w-4" }),
-          o(ti, { class: "h-4 w-28" })
+          o(Fi, { class: "h-4 w-24" }),
+          o(Fi, { class: "h-4 w-4" }),
+          o(Fi, { class: "h-4 w-28" })
         ]),
-        o(ti, { class: "h-4 w-36" })
+        o(Fi, { class: "h-4 w-36" })
       ])
     ], 8, Fa));
   }
@@ -4868,8 +4868,8 @@ const PZ = /* @__PURE__ */ hl(nl, [["render", Wl]]), Dl = {
       onBlur: Z,
       onClick: Y[0] || (Y[0] = (y) => M("click")),
       onKeydown: [
-        Y[1] || (Y[1] = ai(ei((y) => M("click"), ["prevent"]), ["enter"])),
-        Y[2] || (Y[2] = ai(ei((y) => M("click"), ["prevent"]), ["space"]))
+        Y[1] || (Y[1] = ai(Ui((y) => M("click"), ["prevent"]), ["enter"])),
+        Y[2] || (Y[2] = ai(Ui((y) => M("click"), ["prevent"]), ["space"]))
       ]
     }, [
       i.mediaType === "image" ? (R(), s("picture", Ka, [
@@ -5013,7 +5013,7 @@ const Pa = { render: Ba }, fa = { class: "flex items-center justify-end self-str
           ]),
           _: 1
         })) : E("", !0),
-        o(Sa, Ni({ class: "ml-auto" }, l.value, { "aria-hidden": "true" }), null, 16)
+        o(Sa, ti({ class: "ml-auto" }, l.value, { "aria-hidden": "true" }), null, 16)
       ]),
       I("div", va, [
         (R(), D(Tx(c.value), {
@@ -5164,7 +5164,7 @@ const Pa = { render: Ba }, fa = { class: "flex items-center justify-end self-str
       else return;
       y.preventDefault(), M.value = x.tabs[e], c.value[e]?.focus();
     };
-    return Fi(M, async () => await G()), xi(async () => {
+    return ei(M, async () => await G()), xi(async () => {
       await document.fonts.ready, await G(), await ji(), Z.value = !0;
     }), (y, j) => (R(), s("div", {
       ref_key: "containerRef",
@@ -5176,7 +5176,7 @@ const Pa = { render: Ba }, fa = { class: "flex items-center justify-end self-str
       I("div", {
         "aria-hidden": "true",
         class: L(["absolute h-9 rounded-full bg-cornflower-blue-500", Z.value ? "transition-all duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : ""]),
-        style: Ui(l.value)
+        style: ui(l.value)
       }, null, 6),
       (R(!0), s(r, null, Q(i.tabs, (e, t) => (R(), s("button", {
         key: e,
@@ -5195,7 +5195,7 @@ const Pa = { render: Ba }, fa = { class: "flex items-center justify-end self-str
           "pointer-events-none absolute inset-0 z-20 flex",
           Z.value ? "transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : ""
         ]),
-        style: Ui({ clipPath: a.value })
+        style: ui({ clipPath: a.value })
       }, [
         (R(!0), s(r, null, Q(i.tabs, (e) => (R(), s("span", {
           key: e,
@@ -5207,14 +5207,24 @@ const Pa = { render: Ba }, fa = { class: "flex items-center justify-end self-str
 }), LZ = { class: "flex flex-col items-center" }, EZ = { class: "relative w-full overflow-hidden" }, AZ = ["aria-labelledby"], YR = /* @__PURE__ */ h({
   name: "NexxtTabbedContent",
   __name: "TabbedContent",
-  props: {
+  props: /* @__PURE__ */ f({
     tabs: {},
     animated: { type: Boolean },
     label: {}
-  },
+  }, {
+    modelValue: { default: "" },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
   setup(i) {
-    const x = i, M = K(x.tabs[0] ?? ""), m = K("forward");
-    Fi(M, (Z, G) => {
+    const x = i, M = P(i, "modelValue"), m = K("forward");
+    ei(
+      () => x.tabs,
+      (Z) => {
+        !M.value && Z?.length > 0 && (M.value = Z[0]);
+      },
+      { immediate: !0 }
+    ), ei(M, (Z, G) => {
       m.value = x.tabs.indexOf(Z) > x.tabs.indexOf(G) ? "forward" : "backward";
     });
     const c = (Z) => Z.toLowerCase().replace(/\s+/g, "-"), l = (Z) => `tab-${c(Z)}`, a = U(
@@ -5327,7 +5337,7 @@ const Pa = { render: Ba }, fa = { class: "flex items-center justify-end self-str
           ])) : E("", !0),
           I("div", {
             class: "grid rounded-md bg-gray-50",
-            style: Ui({ gridTemplateColumns: J.value }),
+            style: ui({ gridTemplateColumns: J.value }),
             role: "row",
             "aria-rowindex": "1"
           }, [
@@ -5350,8 +5360,8 @@ const Pa = { render: Ba }, fa = { class: "flex items-center justify-end self-str
               tabindex: A.sortable ? 0 : void 0,
               onClick: (S) => u(A),
               onKeydown: [
-                ai(ei((S) => u(A), ["prevent"]), ["enter"]),
-                ai(ei((S) => u(A), ["prevent"]), ["space"])
+                ai(Ui((S) => u(A), ["prevent"]), ["enter"]),
+                ai(Ui((S) => u(A), ["prevent"]), ["space"])
               ]
             }, [
               I("span", {
@@ -5379,7 +5389,7 @@ const Pa = { render: Ba }, fa = { class: "flex items-center justify-end self-str
               },
               g(T)
             ]]),
-            style: Ui({ gridTemplateColumns: J.value }),
+            style: ui({ gridTemplateColumns: J.value }),
             role: "row",
             "aria-rowindex": T + 2,
             "aria-selected": i.selectable ? j(A) : void 0,
@@ -5702,7 +5712,7 @@ export {
   Ia as NexxtProgressBar,
   cR as NexxtPropertyCard,
   ja as NexxtPropertyListing,
-  ti as NexxtSkeleton,
+  Fi as NexxtSkeleton,
   lR as NexxtSkeletonPropertyCard,
   Sa as NexxtSocialIcons,
   aR as NexxtSocialMediaCustomTemplate,

package/package.json

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

package/src/components/TabbedContent/TabbedContent.vue

@@ -14,9 +14,19 @@ defineOptions({
 
 const props = defineProps<NexxtTabbedContent>()
 
-const selected = ref(props.tabs[0] ?? '')
+const selected = defineModel<string>({ default: '' })
 const direction = ref<'forward' | 'backward'>('forward')
 
+watch(
+  () => props.tabs,
+  (newTabs) => {
+    if (!selected.value && newTabs?.length > 0) {
+      selected.value = newTabs[0]
+    }
+  },
+  { immediate: true },
+)
+
 watch(selected, (next, prev) => {
   direction.value = props.tabs.indexOf(next) > props.tabs.indexOf(prev) ? 'forward' : 'backward'
 })