@nexxtmove/ui 1.0.14 → 1.0.16

package/dist/components/ToggleGroup/ToggleGroup.vue.d.ts

@@ -4,10 +4,12 @@ export interface NexxtToggleGroupOption {
     icon?: IconName;
     label?: string;
     tooltip?: string;
+    activeClass?: string;
 }
 interface NexxtToggleGroupProps {
     options: NexxtToggleGroupOption[];
     label?: string;
+    equalWidth?: boolean;
 }
 type __VLS_Props = NexxtToggleGroupProps;
 type __VLS_PublicProps = __VLS_Props & {
@@ -17,5 +19,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     "update:modelValue": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    equalWidth: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export type { Placement } from '@floating-ui/vue';
 export { default as NexxtAnimatedNumber } from './components/AnimatedNumber/AnimatedNumber.vue';
 export { default as NexxtAnnouncement } from './components/Announcement/Announcement.vue';
 export { default as NexxtAvatar } from './components/Avatar/Avatar.vue';

package/dist/index.js

@@ -8571,7 +8571,11 @@ var Ed = { class: "flex flex-col gap-1" }, Dd = {
 	__name: "ToggleGroup",
 	props: /*@__PURE__*/ S({
 		options: {},
-		label: {}
+		label: {},
+		equalWidth: {
+			type: Boolean,
+			default: !0
+		}
 	}, {
 		modelValue: { required: !0 },
 		modelModifiers: {}
@@ -8596,52 +8600,52 @@ var Ed = { class: "flex flex-col gap-1" }, Dd = {
 		}), (t, p) => (A(), u("div", Ed, [e.label ? (A(), u("label", Dd, L(e.label), 1)) : l("", !0), d("div", {
 			ref_key: "containerRef",
 			ref: i,
-			class: "relative isolate flex h-10 gap-1 rounded-xl bg-gray-100 p-1"
+			class: T(["relative isolate flex h-10 gap-1 rounded-xl bg-gray-100 p-1", { "flex-wrap": !e.equalWidth }])
 		}, [
 			d("div", {
 				"aria-hidden": "true",
 				class: T(["absolute inset-y-1 left-0 rounded-lg bg-white", f.value ? "transition-transform duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : ""]),
 				style: D(o.value)
 			}, null, 6),
-			(A(!0), u(r, null, N(e.options, (e, t) => (A(), u(r, { key: e.value }, [e.tooltip ? (A(), c(Fu, {
+			(A(!0), u(r, null, N(e.options, (t, i) => (A(), u(r, { key: t.value }, [t.tooltip ? (A(), c(Fu, {
 				key: 0,
 				"disable-closing-trigger": ""
 			}, {
-				tooltip: H(() => [m(L(e.tooltip), 1)]),
+				tooltip: H(() => [m(L(t.tooltip), 1)]),
 				default: H(() => [d("button", {
 					ref_for: !0,
-					ref: (e) => a.value[t] = e,
+					ref: (e) => a.value[i] = e,
 					type: "button",
-					class: "relative z-10 flex flex-1 cursor-pointer items-center justify-center rounded-lg px-4 py-1.5 text-gray-500 hover:text-gray-700",
-					onClick: (t) => n.value = e.value
-				}, [e.icon ? (A(), c(G, {
+					class: T(["relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap text-gray-500 hover:text-gray-700", { "flex-1": e.equalWidth }]),
+					onClick: (e) => n.value = t.value
+				}, [t.icon ? (A(), c(G, {
 					key: 0,
-					name: e.icon
-				}, null, 8, ["name"])) : e.label ? (A(), u("span", kd, L(e.label), 1)) : l("", !0)], 8, Od)]),
+					name: t.icon
+				}, null, 8, ["name"])) : l("", !0), t.label ? (A(), u("span", kd, L(t.label), 1)) : l("", !0)], 10, Od)]),
 				_: 2
 			}, 1024)) : (A(), u("button", {
 				key: 1,
 				ref_for: !0,
-				ref: (e) => a.value[t] = e,
+				ref: (e) => a.value[i] = e,
 				type: "button",
-				class: "relative z-10 flex flex-1 cursor-pointer items-center justify-center rounded-lg px-4 py-1.5 text-gray-500 hover:text-gray-700",
-				onClick: (t) => n.value = e.value
-			}, [e.icon ? (A(), c(G, {
+				class: T(["relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap text-gray-500 hover:text-gray-700", { "flex-1": e.equalWidth }]),
+				onClick: (e) => n.value = t.value
+			}, [t.icon ? (A(), c(G, {
 				key: 0,
-				name: e.icon
-			}, null, 8, ["name"])) : e.label ? (A(), u("span", jd, L(e.label), 1)) : l("", !0)], 8, Ad))], 64))), 128)),
+				name: t.icon
+			}, null, 8, ["name"])) : l("", !0), t.label ? (A(), u("span", jd, L(t.label), 1)) : l("", !0)], 10, Ad))], 64))), 128)),
 			d("div", {
 				"aria-hidden": "true",
-				class: T(["pointer-events-none absolute inset-0 z-20 flex gap-1 p-1", f.value ? "transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : ""]),
+				class: T(["pointer-events-none absolute inset-0 z-20 flex gap-1 p-1", [f.value ? "transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : "", { "flex-wrap": !e.equalWidth }]]),
 				style: D({ clipPath: s.value })
-			}, [(A(!0), u(r, null, N(e.options, (e) => (A(), u("span", {
-				key: e.value,
-				class: "flex flex-1 items-center justify-center rounded-lg px-4 py-1.5 text-cornflower-blue-600"
-			}, [e.icon ? (A(), c(G, {
+			}, [(A(!0), u(r, null, N(e.options, (t) => (A(), u("span", {
+				key: t.value,
+				class: T(["flex items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap", [{ "flex-1": e.equalWidth }, t.activeClass ?? "text-cornflower-blue-600"]])
+			}, [t.icon ? (A(), c(G, {
 				key: 0,
-				name: e.icon
-			}, null, 8, ["name"])) : e.label ? (A(), u("span", Md, L(e.label), 1)) : l("", !0)]))), 128))], 6)
-		], 512)]));
+				name: t.icon
+			}, null, 8, ["name"])) : l("", !0), t.label ? (A(), u("span", Md, L(t.label), 1)) : l("", !0)], 2))), 128))], 6)
+		], 2)]));
 	}
 }), Pd = [
 	"src",

package/package.json

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

package/src/components/ToggleGroup/ToggleGroup.vue

@@ -10,18 +10,22 @@ export interface NexxtToggleGroupOption {
   icon?: IconName
   label?: string
   tooltip?: string
+  activeClass?: string
 }
 
 interface NexxtToggleGroupProps {
   options: NexxtToggleGroupOption[]
   label?: string
+  equalWidth?: boolean
 }
 
 defineOptions({
   name: 'NexxtToggleGroup',
 })
 
-const props = defineProps<NexxtToggleGroupProps>()
+const props = withDefaults(defineProps<NexxtToggleGroupProps>(), {
+  equalWidth: true,
+})
 
 const model = defineModel<string>({ required: true })
 
@@ -69,7 +73,11 @@ onMounted(async () => {
     <label v-if="label" class="text-color-gray-700 justify-start body-normal text-sm">
       {{ label }}
     </label>
-    <div ref="containerRef" class="relative isolate flex h-10 gap-1 rounded-xl bg-gray-100 p-1">
+    <div
+      ref="containerRef"
+      class="relative isolate flex h-10 gap-1 rounded-xl bg-gray-100 p-1"
+      :class="{ 'flex-wrap': !equalWidth }"
+    >
       <!-- slider pill -->
       <div
         aria-hidden="true"
@@ -86,11 +94,12 @@ onMounted(async () => {
           <button
             :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
             type="button"
-            class="relative z-10 flex flex-1 cursor-pointer items-center justify-center rounded-lg px-4 py-1.5 text-gray-500 hover:text-gray-700"
+            class="relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap text-gray-500 hover:text-gray-700"
+            :class="{ 'flex-1': equalWidth }"
             @click="model = option.value"
           >
             <NexxtIcon v-if="option.icon" :name="option.icon" />
-            <span v-else-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+            <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
           </button>
           <template #tooltip>{{ option.tooltip }}</template>
         </NexxtTooltip>
@@ -98,29 +107,32 @@ onMounted(async () => {
           v-else
           :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
           type="button"
-          class="relative z-10 flex flex-1 cursor-pointer items-center justify-center rounded-lg px-4 py-1.5 text-gray-500 hover:text-gray-700"
+          class="relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap text-gray-500 hover:text-gray-700"
+          :class="{ 'flex-1': equalWidth }"
           @click="model = option.value"
         >
           <NexxtIcon v-if="option.icon" :name="option.icon" />
-          <span v-else-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+          <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
         </button>
       </template>
 
       <div
         aria-hidden="true"
         class="pointer-events-none absolute inset-0 z-20 flex gap-1 p-1"
-        :class="
-          ready ? 'transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]' : ''
-        "
+        :class="[
+          ready ? 'transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]' : '',
+          { 'flex-wrap': !equalWidth },
+        ]"
         :style="{ clipPath }"
       >
         <span
           v-for="option in options"
           :key="option.value"
-          class="flex flex-1 items-center justify-center rounded-lg px-4 py-1.5 text-cornflower-blue-600"
+          class="flex items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap"
+          :class="[{ 'flex-1': equalWidth }, option.activeClass ?? 'text-cornflower-blue-600']"
         >
           <NexxtIcon v-if="option.icon" :name="option.icon" />
-          <span v-else-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
+          <span v-if="option.label" class="extra-small-semibold">{{ option.label }}</span>
         </span>
       </div>
     </div>

package/src/index.ts

@@ -1,4 +1,5 @@
 // This file is auto-generated by scripts/generate-index.ts
+export type { Placement } from '@floating-ui/vue'
 export { default as NexxtAnimatedNumber } from './components/AnimatedNumber/AnimatedNumber.vue'
 export { default as NexxtAnnouncement } from './components/Announcement/Announcement.vue'
 export { default as NexxtAvatar } from './components/Avatar/Avatar.vue'