@nexxtmove/ui 1.3.1 → 1.3.3

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

@@ -12,6 +12,12 @@ interface NexxtDropdownButtonGroup {
 }
 type NexxtDropdownButtonBase = {
     variant?: 'primary' | 'secondary';
+    /**
+     * Accessible name for the trigger button. Supply this whenever the button
+     * has no visible text, which is every `iconOnly` case. Defaults to the
+     * visible label when there is one, and otherwise to a generic Dutch label.
+     */
+    ariaLabel?: string;
     options: NexxtDropdownButton[] | NexxtDropdownButtonGroup[];
     placement?: 'left' | 'right';
     triggerIcon?: InstanceType<typeof NexxtIcon>['name'];

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

@@ -17,7 +17,10 @@ declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     right?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    focus: () => void | undefined;
+    inputEl: Readonly<import('vue').ShallowRef<HTMLInputElement | null>>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | number | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;

package/dist/index.js

@@ -1615,19 +1615,24 @@ var ut = { funda: { render: lt } }, Q = /* @__PURE__ */ p({
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(e) {
-		let t = "input-field-" + Math.random().toString(36).slice(2, 10), r = M(e, "modelValue"), a = i(() => m()?.attrs.type === "number"), l = () => {
-			let e = Number(r.value || 0);
-			r.value = e + 1;
-		}, u = () => {
-			let e = Number(r.value || 0);
-			r.value = e - 1;
+	setup(e, { expose: t }) {
+		let r = "input-field-" + Math.random().toString(36).slice(2, 10), a = M(e, "modelValue"), l = N("inputEl");
+		t({
+			focus: () => l.value?.focus(),
+			inputEl: l
+		});
+		let u = i(() => m()?.attrs.type === "number"), p = () => {
+			let e = Number(a.value || 0);
+			a.value = e + 1;
+		}, h = () => {
+			let e = Number(a.value || 0);
+			a.value = e - 1;
 		};
-		return (i, p) => (w(), s("div", vn, [
+		return (t, i) => (w(), s("div", vn, [
 			e.label ? (w(), s("label", {
 				key: 0,
 				class: "text-color-gray-700 justify-start body-normal text-sm",
-				for: t
+				for: r
 			}, [d(k(e.label) + " ", 1), e.required ? (w(), s("span", yn, "*")) : o("", !0)])) : o("", !0),
 			c("div", { class: y(["group flex items-center gap-2 overflow-hidden rounded-lg ring transition-colors ease-out focus-within:ring-cornflower-blue-500", [e.error ? "ring-brick-400" : "ring-gray-200", {
 				"pl-3": e.leftIcon,
@@ -1635,18 +1640,20 @@ var ut = { funda: { render: lt } }, Q = /* @__PURE__ */ p({
 			}]]) }, [
 				e.leftIcon ? (w(), s("span", bn, [f(Q, { name: e.leftIcon }, null, 8, ["name"])])) : o("", !0),
 				z(c("input", _({
-					id: t,
-					"onUpdate:modelValue": p[0] ||= (e) => r.value = e,
+					ref_key: "inputEl",
+					ref: l,
+					id: r,
+					"onUpdate:modelValue": i[0] ||= (e) => a.value = e,
 					placeholder: e.placeholder
-				}, i.$attrs, { class: ["bg-transparant h-10 w-full min-w-60 text-sm text-gray-900 placeholder-gray-400 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", {
+				}, t.$attrs, { class: ["bg-transparant h-10 w-full min-w-60 text-sm text-gray-900 placeholder-gray-400 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", {
 					"pl-3": !e.leftIcon,
 					"pr-3": !e.rightIcon
-				}] }), null, 16, xn), [[F, r.value]]),
-				D(i.$slots, "right", {}, () => [a.value ? (w(), s("div", Sn, [c("button", {
+				}] }), null, 16, xn), [[F, a.value]]),
+				D(t.$slots, "right", {}, () => [u.value ? (w(), s("div", Sn, [c("button", {
 					type: "button",
 					class: "flex h-5 w-8 cursor-pointer items-center justify-center pt-2 text-gray-400 transition-colors group-focus-within:text-gray-950 hover:text-cornflower-blue-600 focus:text-cornflower-blue-600 focus:outline-none",
 					"aria-label": "Verhogen",
-					onClick: l
+					onClick: p
 				}, [f(Q, {
 					name: "chevron-up",
 					class: "text-[10px]",
@@ -1655,7 +1662,7 @@ var ut = { funda: { render: lt } }, Q = /* @__PURE__ */ p({
 					type: "button",
 					class: "flex h-5 w-8 cursor-pointer items-center justify-center pb-2 text-gray-400 transition-colors group-focus-within:text-gray-950 hover:text-cornflower-blue-600 focus:text-cornflower-blue-600 focus:outline-none",
 					"aria-label": "Verlagen",
-					onClick: u
+					onClick: h
 				}, [f(Q, {
 					name: "chevron-down",
 					class: "text-[10px]",
@@ -3149,6 +3156,7 @@ var ar = /* @__PURE__ */ p({
 	__name: "DropdownButton",
 	props: {
 		variant: { default: "primary" },
+		ariaLabel: {},
 		options: {},
 		placement: { default: "right" },
 		triggerIcon: { default: "chevron-down" },
@@ -3162,26 +3170,30 @@ var ar = /* @__PURE__ */ p({
 	},
 	emits: ["navigate", "checkboxChange"],
 	setup(t, { emit: n }) {
-		let r = n, l = T(null), u = i(() => t.placement === "right" ? "bottom-end" : "bottom-start"), p = i(() => t.options.length > 0 && "items" in t.options[0] ? t.options.flatMap((e) => e.items) : t.options), m = T({}), h = i(() => Object.fromEntries(p.value.filter((e) => e.checkbox).map((e) => [e.label, e.label in m.value ? m.value[e.label] : e.selected ?? !1]))), g = (e) => {
-			typeof e == "function" ? e() : r("navigate", e);
-		}, _ = (e) => {
+		let r = i(() => t.ariaLabel ?? (t.label ? `${t.label} menu openen` : "Menu openen")), l = n, u = T(null), p = i(() => t.placement === "right" ? "bottom-end" : "bottom-start"), m = i(() => t.options.length > 0 && "items" in t.options[0] ? t.options.flatMap((e) => e.items) : t.options), h = T({});
+		I(() => m.value.filter((e) => e.checkbox).map((e) => e.selected ?? !1), () => {
+			h.value = {};
+		}, { deep: !0 });
+		let g = i(() => Object.fromEntries(m.value.filter((e) => e.checkbox).map((e) => [e.label, e.label in h.value ? h.value[e.label] : e.selected ?? !1]))), _ = (e) => {
+			typeof e == "function" ? e() : l("navigate", e);
+		}, v = (e) => {
 			if (e.checkbox) {
-				let t = !h.value[e.label];
-				m.value[e.label] = t, r("checkboxChange", e.label, t);
-			} else l.value?.close();
-			g(e.action);
-		}, v = (e) => e.length > 0 && "items" in e[0], b = i(() => v(t.options) ? t.options : [{
+				let t = !g.value[e.label];
+				h.value[e.label] = t, l("checkboxChange", e.label, t);
+			} else u.value?.close();
+			_(e.action);
+		}, b = (e) => e.length > 0 && "items" in e[0], x = i(() => b(t.options) ? t.options : [{
 			title: "",
 			items: t.options
-		}]), x = i(() => t.variant === "primary" ? "bg-button-bg-primary-default text-button-text-primary-default" : t.variant === "secondary" ? "bg-button-bg-secondary-default text-button-text-secondary-default border-button-border-secondary-default border border-solid hover:border-button-border-secondary-hover" : ""), S = i(() => t.variant === "primary" ? "bg-button-bg-primary-default hover:bg-button-bg-primary-hover focus-visible:bg-button-bg-primary-focussed focus-visible:outline-button-border-primary-focussed focus-visible:outline focus-visible:outline-solid active:bg-button-bg-primary-selected" : t.variant === "secondary" ? "bg-button-bg-secondary-default hover:bg-button-bg-secondary-hover focus-visible:bg-button-bg-secondary-focussed focus-visible:outline-button-border-secondary-focussed focus-visible:outline focus-visible:outline-solid active:bg-button-bg-secondary-selected" : "");
-		return (n, r) => (w(), a($, {
+		}]), S = i(() => t.variant === "primary" ? "bg-button-bg-primary-default text-button-text-primary-default" : t.variant === "secondary" ? "bg-button-bg-secondary-default text-button-text-secondary-default border-button-border-secondary-default border border-solid hover:border-button-border-secondary-hover" : ""), C = i(() => t.variant === "primary" ? "bg-button-bg-primary-default hover:bg-button-bg-primary-hover focus-visible:bg-button-bg-primary-focussed focus-visible:outline-button-border-primary-focussed focus-visible:outline focus-visible:outline-solid active:bg-button-bg-primary-selected" : t.variant === "secondary" ? "bg-button-bg-secondary-default hover:bg-button-bg-secondary-hover focus-visible:bg-button-bg-secondary-focussed focus-visible:outline-button-border-secondary-focussed focus-visible:outline focus-visible:outline-solid active:bg-button-bg-secondary-selected" : "");
+		return (n, i) => (w(), a($, {
 			ref_key: "panelRef",
-			ref: l,
-			placement: u.value
+			ref: u,
+			placement: p.value
 		}, {
-			trigger: R(({ isOpen: n, toggle: r }) => [c("div", { class: y(["inline-flex items-center overflow-hidden rounded-lg", x.value]) }, [t.iconOnly ? o("", !0) : (w(), s(e, { key: 0 }, [c("button", {
-				class: y(["flex cursor-pointer items-center gap-2 px-4 py-2 transition-colors duration-200", S.value]),
-				onClick: (e) => t.action ? g(t.action) : r()
+			trigger: R(({ isOpen: n, toggle: i }) => [c("div", { class: y(["inline-flex items-center overflow-hidden rounded-lg", S.value]) }, [t.iconOnly ? o("", !0) : (w(), s(e, { key: 0 }, [c("button", {
+				class: y(["flex cursor-pointer items-center gap-2 px-4 py-2 transition-colors duration-200", C.value]),
+				onClick: (e) => t.action ? _(t.action) : i()
 			}, [t.icon ? (w(), a(Q, {
 				key: 0,
 				name: t.icon,
@@ -3190,28 +3202,28 @@ var ar = /* @__PURE__ */ p({
 				class: y(["h-7 w-px rounded-sm", t.variant === "primary" ? "bg-white" : "bg-gray-200"]),
 				"aria-hidden": "true"
 			}, null, 2)], 64)), c("button", {
-				class: y(["w-10 shrink-0 cursor-pointer transition-colors duration-200", [S.value, t.iconOnly ? "p-2" : "px-2 py-2"]]),
+				class: y(["w-10 shrink-0 cursor-pointer transition-colors duration-200", [C.value, t.iconOnly ? "p-2" : "px-2 py-2"]]),
 				"aria-haspopup": "menu",
 				"aria-expanded": n,
-				"aria-label": `Open ${t.label} menu`,
-				onClick: r
+				"aria-label": r.value,
+				onClick: i
 			}, [f(Q, {
 				name: t.triggerIcon,
 				class: y(["transition-transform duration-200", { "rotate-180": n && t.triggerIcon === "chevron-down" }]),
 				"aria-hidden": "true"
 			}, null, 8, ["name", "class"])], 10, br)], 2)]),
-			content: R(() => [c("div", xr, [(w(!0), s(e, null, E(b.value, (t, n) => (w(), s(e, { key: t.title || n }, [t.title ? (w(), s("div", {
+			content: R(() => [c("div", xr, [(w(!0), s(e, null, E(x.value, (t, n) => (w(), s(e, { key: t.title || n }, [t.title ? (w(), s("div", {
 				key: 0,
 				class: y(["border-b border-gray-100 px-6 py-3 extra-small-normal text-gray-600", n > 0 ? "border-t pt-2" : ""])
 			}, k(t.title), 3)) : o("", !0), (w(!0), s(e, null, E(t.items, (e) => (w(), s("button", {
 				key: e.label,
 				role: e.checkbox ? "menuitemcheckbox" : "menuitem",
-				"aria-checked": e.checkbox ? h.value[e.label] ?? !1 : void 0,
+				"aria-checked": e.checkbox ? g.value[e.label] ?? !1 : void 0,
 				class: y(["flex w-full min-w-42 cursor-pointer items-center gap-2 px-6 py-3 text-left text-sm whitespace-nowrap text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none", !e.checkbox && e.selected ? "bg-cornflower-blue-100" : ""]),
-				onClick: (t) => _(e)
+				onClick: (t) => v(e)
 			}, [e.checkbox ? (w(), a(tn, {
 				key: 0,
-				"model-value": h.value[e.label] ?? !1,
+				"model-value": g.value[e.label] ?? !1,
 				class: "pointer-events-none"
 			}, null, 8, ["model-value"])) : e.icon ? (w(), a(Q, {
 				key: 1,

package/package.json

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

package/src/components/DropdownButton/DropdownButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import type { Placement } from '@floating-ui/vue'
 import NexxtIcon from '../Icon/Icon.vue'
 import NexxtCheckbox from '../Checkbox/Checkbox.vue'
@@ -20,6 +20,12 @@ interface NexxtDropdownButtonGroup {
 
 type NexxtDropdownButtonBase = {
   variant?: 'primary' | 'secondary'
+  /**
+   * Accessible name for the trigger button. Supply this whenever the button
+   * has no visible text, which is every `iconOnly` case. Defaults to the
+   * visible label when there is one, and otherwise to a generic Dutch label.
+   */
+  ariaLabel?: string
   options: NexxtDropdownButton[] | NexxtDropdownButtonGroup[]
   placement?: 'left' | 'right'
   triggerIcon?: InstanceType<typeof NexxtIcon>['name']
@@ -39,8 +45,16 @@ const {
   placement = 'right',
   iconOnly = false,
   triggerIcon = 'chevron-down',
+  ariaLabel,
 } = defineProps<NexxtDropdownButtonProps>()
 
+// `label` is optional in the `iconOnly` branch of the props union, so
+// interpolating it produced a literal "Open undefined menu" on every icon-only
+// trigger. The fallback chain never yields `undefined`.
+const triggerAriaLabel = computed(
+  () => ariaLabel ?? (label ? `${label} menu openen` : 'Menu openen'),
+)
+
 const emit = defineEmits<{
   navigate: [url: string]
   checkboxChange: [label: string, checked: boolean]
@@ -58,8 +72,23 @@ const flatItems = computed<NexxtDropdownButton[]>(() =>
     : (options as NexxtDropdownButton[]),
 )
 
+// Local echo of a click, so a checkbox responds instantly instead of waiting
+// for the parent to feed `selected` back in.
 const toggledItems = ref<Record<string, boolean>>({})
 
+// The echo must not outlive the prop it shadows. Once an item was toggled its
+// label stayed in `toggledItems` forever, so `selected` was permanently
+// ignored and a parent could never reset a filter menu. Clearing the echo
+// whenever the incoming `selected` values change hands control back to the
+// parent while keeping the component usable uncontrolled.
+watch(
+  () => flatItems.value.filter((item) => item.checkbox).map((item) => item.selected ?? false),
+  () => {
+    toggledItems.value = {}
+  },
+  { deep: true },
+)
+
 const checkedItems = computed(() =>
   Object.fromEntries(
     flatItems.value
@@ -150,7 +179,7 @@ const buttonClasses = computed(() => {
           :class="[buttonClasses, iconOnly ? 'p-2' : 'px-2 py-2']"
           aria-haspopup="menu"
           :aria-expanded="isOpen"
-          :aria-label="`Open ${label} menu`"
+          :aria-label="triggerAriaLabel"
           @click="toggle"
         >
           <NexxtIcon

package/src/components/InputField/InputField.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, useTemplateRef } from 'vue'
 import Icon from '../Icon/Icon.vue'
 
 const INPUT_ID = 'input-field-' + Math.random().toString(36).slice(2, 10)
@@ -22,6 +22,17 @@ defineProps<NexxtInputFieldProps>()
 
 const modelValue = defineModel<string | number>()
 
+const inputEl = useTemplateRef<HTMLInputElement>('inputEl')
+
+/**
+ * Focus the underlying input. Exposed so callers do not have to reach through
+ * the component with `$el.querySelector('input')`, which breaks the moment the
+ * internal markup changes.
+ */
+const focus = () => inputEl.value?.focus()
+
+defineExpose({ focus, inputEl })
+
 const isNumber = computed(() => {
   const instance = getCurrentInstance()
   return instance?.attrs.type === 'number'
@@ -58,6 +69,7 @@ const decrement = () => {
       </span>
 
       <input
+        ref="inputEl"
         :id="INPUT_ID"
         v-model="modelValue"
         :placeholder="placeholder"

package/tailwind/nexxtmove.tailwind.theme.css

@@ -113,6 +113,17 @@
   --color-brands-google: oklch(63.039% 0.18003 259.95533);
   --color-brands-tiktok: oklch(63.451% 0.25395 16.82869);
   --color-brands-whatsapp: oklch(76.095% 0.20146 149.74008);
+  --color-yellow-50: oklch(98.368% 0.01059 100.83239);
+  --color-yellow-100: oklch(95.814% 0.02653 99.92039);
+  --color-yellow-200: oklch(93.256% 0.06003 102.33209);
+  --color-yellow-300: oklch(90.398% 0.09432 101.47911);
+  --color-yellow-400: oklch(87.635% 0.13397 101.26883);
+  --color-yellow-500: oklch(84.92% 0.17048 101.62037);
+  --color-yellow-600: oklch(70.556% 0.14179 101.46368);
+  --color-yellow-700: oklch(56.751% 0.11269 101.29896);
+  --color-yellow-800: oklch(42.725% 0.08495 101.41972);
+  --color-yellow-900: oklch(28.975% 0.0576 102.22885);
+  --color-yellow-950: oklch(21.884% 0.04426 103.48365);
   --color-button-bg-primary-default: var(--color-cornflower-blue-500);
   --color-button-bg-primary-hover: var(--color-cornflower-blue-400);
   --color-button-bg-primary-focussed: var(--color-cornflower-blue-500);