@nexxtmove/ui 1.14.0 → 1.16.0

package/dist/nuxt.js

@@ -63,7 +63,9 @@ var s = {
 	NexxtTimelinePhaseblock: "components/organisms/TimelinePhaseblock/TimelinePhaseblock.vue",
 	NexxtTimelineTrack: "components/organisms/TimelineTrack/TimelineTrack.vue",
 	NexxtToaster: "components/organisms/Toaster/Toaster.vue",
-	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.vue"
+	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.vue",
+	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
+	NexxtEditorFlexDirection: "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue"
 }, c = ["@nexxtmove/ui/ui.css", "@nexxtmove/ui/dist/ui.css"], l = (e, t) => e.some((e) => e === t || c.includes(e)), u = i({
 	meta: {
 		name: "@nexxtmove/ui",
@@ -85,8 +87,8 @@ var s = {
 		});
 		let d = u("./assets");
 		if (a(d)) {
-			let e = `/${[c.options.app.buildAssetsDir, "assets"].join("/").replace(/\/+/g, "/").replace(/^\/|\/$/g, "")}/`;
-			c.options.nitro.publicAssets ??= [], c.options.nitro.publicAssets.push({
+			let e = `/${[c.options.app.buildAssetsDir, "assets"].join("/").replace(/\/+/g, "/").replace(/^\/|\/$/g, "")}/`, t = c.options;
+			t.nitro.publicAssets ??= [], t.nitro.publicAssets.push({
 				dir: d,
 				baseURL: e,
 				maxAge: 31536e3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -37,12 +37,12 @@
     "@eslint/js": "^10.0.1",
     "@nuxt/kit": "^4.5.2",
     "@nuxt/schema": "^4.5.2",
-    "@storybook/addon-a11y": "^10.5.10",
+    "@storybook/addon-a11y": "^10.6.0",
     "@storybook/addon-designs": "^11.1.4",
-    "@storybook/addon-docs": "^10.5.10",
-    "@storybook/addon-vitest": "^10.5.10",
-    "@storybook/builder-vite": "^10.5.10",
-    "@storybook/vue3-vite": "^10.5.10",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/builder-vite": "^10.6.0",
+    "@storybook/vue3-vite": "^10.6.0",
     "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
@@ -59,7 +59,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-better-tailwindcss": "4.7.0",
     "eslint-plugin-prettier": "^5.5.6",
-    "eslint-plugin-storybook": "10.5.10",
+    "eslint-plugin-storybook": "10.6.0",
     "eslint-plugin-vue": "^10.10.0",
     "flag-icons": "^7.5.0",
     "globals": "^17.11.0",
@@ -70,7 +70,7 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "remark-frontmatter": "^5.0.0",
-    "storybook": "^10.5.10",
+    "storybook": "^10.6.0",
     "typescript-eslint": "^8.67.0",
     "vite": "^8.2.1",
     "vite-plugin-dts": "^5.0.3",

package/src/components/atoms/Switch/Switch.vue

@@ -61,11 +61,18 @@ const iconSizeClasses: Record<SwitchSize, string> = {
 <template>
   <label class="inline-flex cursor-pointer items-center gap-2">
     <slot v-if="labelPosition === 'before'" />
-    <span :class="['relative inline-block', trackClasses[size]]">
+    <!--
+      `shrink-0`: the track has a fixed pixel size, so letting flex shrink it
+      squashes the toggle the moment a sibling label wraps onto a second line.
+    -->
+    <span :class="['relative inline-block shrink-0', trackClasses[size]]">
       <input v-bind="$attrs" type="checkbox" class="peer sr-only" v-model="model" />
       <span
         :class="[
           'absolute inset-0 overflow-hidden rounded-[30px] border transition-colors duration-200',
+          // The input is `sr-only`, so the track has to render the focus ring.
+          // `outline` draws outside the box and is not clipped by `overflow-hidden`.
+          'peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-cornflower-blue-500',
           model ? checkedColorClasses[color] : 'border-gray-500 bg-gray-200',
         ]"
       >

package/src/components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import Switch from '../../../atoms/Switch/Switch.vue'
+
+interface NexxtEditorSettingsBlockProps {
+  /** Header text of the block. Wraps over multiple lines when it is too long. */
+  label: string
+  /**
+   * Render a switch next to the label that collapses and expands the content.
+   * When `false` the content is always visible and the model is ignored.
+   */
+  switchable?: boolean
+}
+
+defineOptions({ name: 'NexxtEditorSettingsBlock' })
+
+const { label, switchable = false } = defineProps<NexxtEditorSettingsBlockProps>()
+
+/**
+ * Open state of the block, driven by the switch. Only has an effect when
+ * `switchable` is `true`; the parent owns the state.
+ */
+const model = defineModel<boolean>({ default: true })
+
+const open = computed(() => !switchable || model.value)
+
+// Vue only drops an attribute on `false` for a fixed list of boolean
+// attributes, and `inert` is not on that list: `:inert="false"` renders
+// `inert="false"`, which a browser still treats as inert. `undefined` is the
+// only value that removes the attribute again.
+const inert = computed(() => (open.value ? undefined : true))
+</script>
+
+<template>
+  <div class="border-b border-gray-200 py-4 last:border-b-0">
+    <!--
+      Switch.vue sets `inheritAttrs: false` and binds `$attrs` on its sr-only
+      input, so a class on <Switch> never reaches its root <label>. The child
+      variant below styles that label from the header instead, which keeps the
+      whole row clickable and the accessible name on the real <label>. The gap
+      has to go on that label too: the header has a single child in both modes,
+      so its own `gap` would never apply and the spacing would silently fall
+      back to the `gap-2` that Switch.vue sets for itself.
+    -->
+    <div class="flex items-center [&>label]:flex [&>label]:w-full [&>label]:gap-3">
+      <Switch v-if="switchable" v-model="model" size="sm" color="blue" label-position="before">
+        <span class="grow text-left small-normal text-gray-900">{{ label }}</span>
+      </Switch>
+      <p v-else class="small-normal text-gray-900">{{ label }}</p>
+    </div>
+
+    <div
+      v-if="$slots.default"
+      :inert="inert"
+      :class="[
+        'grid',
+        open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+        switchable &&
+          'transition-[grid-template-rows] duration-300 ease-in-out motion-reduce:transition-none',
+      ]"
+    >
+      <!--
+        `overflow-hidden` is what makes the 0fr collapse clip, but it also clips
+        a focus ring on a full-width control in the slot, and the block has no
+        horizontal padding of its own. `-mx-1` widens the clipping box by 4px on
+        each side and the `px-1` below pushes the content back, so the ring has
+        room while the content keeps the same x position as the label.
+      -->
+      <div
+        :class="[
+          '-mx-1 min-h-0 overflow-hidden',
+          open ? 'opacity-100' : 'opacity-0',
+          switchable && 'transition-opacity duration-200 ease-in-out motion-reduce:transition-none',
+        ]"
+      >
+        <!-- Padding sits on the inner element so nothing is left over at 0fr. -->
+        <div class="px-1 pt-1.5 pb-1">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue

@@ -0,0 +1,73 @@
+<script lang="ts">
+/**
+ * The flex direction as the editor needs it: the Tailwind class itself, so the
+ * consumer can put the model value straight on the element it styles.
+ */
+export type EditorFlexDirectionValue = 'flex-row' | 'flex-col'
+
+/** Overridable copy for the two options. Every key is optional. */
+export interface EditorFlexDirectionMessages {
+  /** Label of the `flex-row` option. Defaults to `'Horizontaal'`. */
+  horizontal?: string
+  /** Label of the `flex-col` option. Defaults to `'Verticaal'`. */
+  vertical?: string
+}
+
+export interface NexxtEditorFlexDirectionProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch `'Richting'`;
+   * the library has no i18n layer, so a consumer in another language passes
+   * its own copy in.
+   */
+  label?: string
+  /**
+   * Labels of the two options. Defaults are Dutch and are merged per key, so
+   * overriding one label keeps the default of the other. Copy is never
+   * translated inside the component.
+   */
+  messages?: EditorFlexDirectionMessages
+}
+
+const DEFAULT_MESSAGES = {
+  horizontal: 'Horizontaal',
+  vertical: 'Verticaal',
+} satisfies Required<EditorFlexDirectionMessages>
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtToggleGroup from '../../../molecules/ToggleGroup/ToggleGroup.vue'
+import type { NexxtToggleGroupOption } from '../../../molecules/ToggleGroup/ToggleGroup.vue'
+
+defineOptions({ name: 'NexxtEditorFlexDirection' })
+
+const { label = 'Richting', messages } = defineProps<NexxtEditorFlexDirectionProps>()
+
+/** The selected direction, as the Tailwind class to apply. */
+const model = defineModel<EditorFlexDirectionValue>({ required: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const options = computed<NexxtToggleGroupOption[]>(() => [
+  { value: 'flex-row', label: copy.value.horizontal, icon: 'arrow-right' },
+  { value: 'flex-col', label: copy.value.vertical, icon: 'arrow-down' },
+])
+
+// ToggleGroup types its model as the open `string` of its options, so writing
+// straight back into the narrower model is a type error. The setter is the one
+// place that narrowing happens, and it is safe: the only values ToggleGroup can
+// emit are the option values built above.
+const selected = computed({
+  get: () => model.value,
+  set: (value: string) => {
+    model.value = value as EditorFlexDirectionValue
+  },
+})
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <NexxtToggleGroup v-model="selected" :options="options" />
+  </NexxtEditorSettingsBlock>
+</template>

package/src/components.json

@@ -60,5 +60,7 @@
   "NexxtTimelinePhaseblock": "components/organisms/TimelinePhaseblock/TimelinePhaseblock.vue",
   "NexxtTimelineTrack": "components/organisms/TimelineTrack/TimelineTrack.vue",
   "NexxtToaster": "components/organisms/Toaster/Toaster.vue",
-  "NexxtVideoPlayer": "components/organisms/VideoPlayer/VideoPlayer.vue"
+  "NexxtVideoPlayer": "components/organisms/VideoPlayer/VideoPlayer.vue",
+  "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
+  "NexxtEditorFlexDirection": "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue"
 }

package/src/index.ts

@@ -13,6 +13,10 @@ export type { EnergyLabelLetter } from './components/atoms/EnergyLabel/EnergyLab
 export type { IconType, NexxtIconName } from './components/atoms/Icon/Icon.vue'
 export type { CustomIconName } from './components/atoms/Icon/customIcons'
 export type { NexxtTabItem } from './components/molecules/Tabs/Tabs.vue'
+export type {
+  EditorFlexDirectionMessages,
+  EditorFlexDirectionValue,
+} from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue'
 export type {
   NexxtTemplateCardContentFeature,
   NexxtTemplateCardProps,
@@ -36,6 +40,8 @@ export { default as NexxtCustomerJourneyTile } from './components/molecules/Cust
 export { default as NexxtDatePicker } from './components/organisms/DatePicker/DatePicker.vue'
 export { default as NexxtDoughnutChart } from './components/molecules/DoughnutChart/DoughnutChart.vue'
 export { default as NexxtDropdownButton } from './components/organisms/DropdownButton/DropdownButton.vue'
+export { default as NexxtEditorFlexDirection } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue'
+export { default as NexxtEditorSettingsBlock } from './components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
 export { default as NexxtEnergyLabel } from './components/atoms/EnergyLabel/EnergyLabel.vue'
 export { default as NexxtFloatingPanel } from './components/atoms/FloatingPanel/FloatingPanel.vue'
 export { default as NexxtHeader } from './components/organisms/Header/Header.vue'

package/src/nuxt.ts

@@ -92,8 +92,21 @@ const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
         .replace(/\/+/g, '/')
         .replace(/^\/|\/$/g, '')}/`
 
-      nuxt.options.nitro.publicAssets ??= []
-      nuxt.options.nitro.publicAssets.push({
+      // @nuxt/schema 4.x no longer declares `nitro` on NuxtOptions; the typing
+      // arrives through module augmentation in @nuxt/nitro-server, which ships
+      // with `nuxt` itself. This package depends on @nuxt/kit and @nuxt/schema
+      // only — deliberately, to stay free of app coupling — so the augmentation
+      // is absent here and the property has to be described locally. At runtime
+      // in a consumer the object is always present. Intersecting rather than
+      // replacing keeps this compatible with an installation that does have the
+      // augmentation: `options` stays the same object, so the mutation below
+      // still targets `nuxt.options.nitro`.
+      const options = nuxt.options as typeof nuxt.options & {
+        nitro: { publicAssets?: { dir: string; baseURL?: string; maxAge?: number }[] }
+      }
+
+      options.nitro.publicAssets ??= []
+      options.nitro.publicAssets.push({
         dir: assetsDir,
         baseURL,
         // Content-hashed filenames, so they are safe to cache indefinitely.