@nexxtmove/ui 1.23.0 → 1.24.0

package/dist/nuxt.js

@@ -72,7 +72,8 @@ var s = {
 	NexxtEditorHeadingType: "components/editor/molecules/EditorHeadingType/EditorHeadingType.vue",
 	NexxtEditorJustifyContent: "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",
 	NexxtEditorPadding: "components/editor/molecules/EditorPadding/EditorPadding.vue",
-	NexxtEditorRadius: "components/editor/molecules/EditorRadius/EditorRadius.vue"
+	NexxtEditorRadius: "components/editor/molecules/EditorRadius/EditorRadius.vue",
+	NexxtEditorTextAlign: "components/editor/molecules/EditorTextAlign/EditorTextAlign.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",

package/package.json

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

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+/**
+ * The text 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 EditorTextAlignValue = 'text-left' | 'text-center' | 'text-right' | 'text-justify'
+
+/** Overridable copy for the four options. Every key is optional. */
+export interface EditorTextAlignMessages {
+  /** Accessible name of the `text-left` option. Defaults to `'Links'`. */
+  left?: string
+  /** Accessible name of the `text-center` option. Defaults to `'Midden'`. */
+  center?: string
+  /** Accessible name of the `text-right` option. Defaults to `'Rechts'`. */
+  right?: string
+  /** Accessible name of the `text-justify` option. Defaults to `'Uitvullen'`. */
+  justify?: string
+}
+
+export interface NexxtEditorTextAlignProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch
+   * `'Tekst uitlijning'`; 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?: EditorTextAlignMessages
+}
+
+const DEFAULT_MESSAGES = {
+  left: 'Links',
+  center: 'Midden',
+  right: 'Rechts',
+  justify: 'Uitvullen',
+} satisfies Required<EditorTextAlignMessages>
+</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: 'NexxtEditorTextAlign' })
+
+const { label = 'Tekst uitlijning', messages } = defineProps<NexxtEditorTextAlignProps>()
+
+/** The selected text alignment, as the Tailwind class to apply. */
+const model = defineModel<EditorTextAlignValue>({ required: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+// Icon-only and deliberately without tooltips: four labels do not fit side by
+// side at the width the editor sidebar gives this block, and the icons are
+// conventional enough to stand on their own. The copy travels as `ariaLabel`,
+// so the buttons still have a name for assistive technology.
+const options = computed<NexxtToggleGroupOption[]>(() => [
+  { value: 'text-left', icon: 'align-left', ariaLabel: copy.value.left },
+  { value: 'text-center', icon: 'align-center', ariaLabel: copy.value.center },
+  { value: 'text-right', icon: 'align-right', ariaLabel: copy.value.right },
+  { value: 'text-justify', icon: 'align-justify', ariaLabel: copy.value.justify },
+])
+
+// 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 EditorTextAlignValue
+  },
+})
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <NexxtToggleGroup v-model="selected" :options="options" />
+  </NexxtEditorSettingsBlock>
+</template>

package/src/components.json

@@ -69,5 +69,6 @@
   "NexxtEditorHeadingType": "components/editor/molecules/EditorHeadingType/EditorHeadingType.vue",
   "NexxtEditorJustifyContent": "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",
   "NexxtEditorPadding": "components/editor/molecules/EditorPadding/EditorPadding.vue",
-  "NexxtEditorRadius": "components/editor/molecules/EditorRadius/EditorRadius.vue"
+  "NexxtEditorRadius": "components/editor/molecules/EditorRadius/EditorRadius.vue",
+  "NexxtEditorTextAlign": "components/editor/molecules/EditorTextAlign/EditorTextAlign.vue"
 }

package/src/index.ts

@@ -38,6 +38,10 @@ export type {
   EditorRadiusMessages,
   EditorRadiusValue,
 } from './components/editor/molecules/EditorRadius/EditorRadius.vue'
+export type {
+  EditorTextAlignMessages,
+  EditorTextAlignValue,
+} from './components/editor/molecules/EditorTextAlign/EditorTextAlign.vue'
 export type {
   EditorJustifyContentMessages,
   EditorJustifyContentValue,
@@ -75,6 +79,7 @@ export { default as NexxtEditorJustifyContent } from './components/editor/molecu
 export { default as NexxtEditorPadding } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
 export { default as NexxtEditorRadius } from './components/editor/molecules/EditorRadius/EditorRadius.vue'
 export { default as NexxtEditorSettingsBlock } from './components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+export { default as NexxtEditorTextAlign } from './components/editor/molecules/EditorTextAlign/EditorTextAlign.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'