@nexxtmove/ui 1.17.0 → 1.18.0

package/dist/nuxt.js

@@ -65,6 +65,7 @@ var s = {
 	NexxtToaster: "components/organisms/Toaster/Toaster.vue",
 	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.vue",
 	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
+	NexxtEditorAlignItems: "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
 	NexxtEditorFlexDirection: "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
 	NexxtEditorJustifyContent: "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue"
 }, c = ["@nexxtmove/ui/ui.css", "@nexxtmove/ui/dist/ui.css"], l = (e, t) => e.some((e) => e === t || c.includes(e)), u = i({

package/package.json

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

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

@@ -0,0 +1,94 @@
+<script lang="ts">
+/**
+ * The cross-axis alignment 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 EditorAlignItemsValue = 'items-start' | 'items-center' | 'items-end' | 'items-stretch'
+
+/** Overridable copy for the four options. Every key is optional. */
+export interface EditorAlignItemsMessages {
+  /** Accessible name of the `items-start` option. Defaults to `'Begin'`. */
+  start?: string
+  /** Accessible name of the `items-center` option. Defaults to `'Midden'`. */
+  center?: string
+  /** Accessible name of the `items-end` option. Defaults to `'Einde'`. */
+  end?: string
+  /** Accessible name of the `items-stretch` option. Defaults to `'Uitrekken'`. */
+  stretch?: string
+}
+
+export interface NexxtEditorAlignItemsProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch
+   * `'Uitlijning items'`; the library has no i18n layer, so a consumer in
+   * another language passes its own copy in.
+   */
+  label?: string
+  /**
+   * Copy of the four options. The options are icon-only and show no tooltip, so
+   * this copy is purely the accessible name of each button. Defaults are Dutch
+   * and are merged per key, so overriding one keeps the defaults of the others.
+   * Copy is never translated inside the component.
+   */
+  messages?: EditorAlignItemsMessages
+}
+
+const DEFAULT_MESSAGES = {
+  start: 'Begin',
+  center: 'Midden',
+  end: 'Einde',
+  stretch: 'Uitrekken',
+} satisfies Required<EditorAlignItemsMessages>
+</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: 'NexxtEditorAlignItems' })
+
+const { label = 'Uitlijning items', messages } = defineProps<NexxtEditorAlignItemsProps>()
+
+/** The selected alignment, as the Tailwind class to apply. */
+const model = defineModel<EditorAlignItemsValue>({ required: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+// Icon-only and deliberately without tooltips, matching the justify-content
+// block it sits next to: four labels do not fit side by side at the width the
+// editor sidebar gives this block. The icons are the vertical counterparts of
+// that block's horizontal ones. `items-stretch` gets `arrows-up-down` rather
+// than a distribute-spacing icon, because stretching fills the cross axis --
+// the spacing icons depict gaps between separate objects, which is the
+// justify-between metaphor, not this one. The copy travels as `ariaLabel`, so
+// the buttons still have a name for assistive technology.
+const options = computed<NexxtToggleGroupOption[]>(() => [
+  { value: 'items-start', icon: 'objects-align-top', ariaLabel: copy.value.start },
+  {
+    value: 'items-center',
+    icon: 'objects-align-center-vertical',
+    ariaLabel: copy.value.center,
+  },
+  { value: 'items-end', icon: 'objects-align-bottom', ariaLabel: copy.value.end },
+  { value: 'items-stretch', icon: 'arrows-up-down', ariaLabel: copy.value.stretch },
+])
+
+// 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 EditorAlignItemsValue
+  },
+})
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <NexxtToggleGroup v-model="selected" :options="options" />
+  </NexxtEditorSettingsBlock>
+</template>

package/src/components.json

@@ -62,6 +62,7 @@
   "NexxtToaster": "components/organisms/Toaster/Toaster.vue",
   "NexxtVideoPlayer": "components/organisms/VideoPlayer/VideoPlayer.vue",
   "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
+  "NexxtEditorAlignItems": "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
   "NexxtEditorFlexDirection": "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
   "NexxtEditorJustifyContent": "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.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 {
+  EditorAlignItemsMessages,
+  EditorAlignItemsValue,
+} from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
 export type {
   EditorFlexDirectionMessages,
   EditorFlexDirectionValue,
@@ -44,6 +48,7 @@ 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 NexxtEditorAlignItems } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
 export { default as NexxtEditorFlexDirection } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue'
 export { default as NexxtEditorJustifyContent } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue'
 export { default as NexxtEditorSettingsBlock } from './components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue'