@nexxtmove/ui 1.15.0 → 1.16.0

package/dist/nuxt.js

@@ -64,7 +64,8 @@ var s = {
 	NexxtTimelineTrack: "components/organisms/TimelineTrack/TimelineTrack.vue",
 	NexxtToaster: "components/organisms/Toaster/Toaster.vue",
 	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.vue",
-	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.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",

package/package.json

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

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

@@ -74,7 +74,7 @@ const inert = computed(() => (open.value ? undefined : true))
         ]"
       >
         <!-- Padding sits on the inner element so nothing is left over at 0fr. -->
-        <div class="px-1 pt-3 pb-1">
+        <div class="px-1 pt-1.5 pb-1">
           <slot />
         </div>
       </div>

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

@@ -61,5 +61,6 @@
   "NexxtTimelineTrack": "components/organisms/TimelineTrack/TimelineTrack.vue",
   "NexxtToaster": "components/organisms/Toaster/Toaster.vue",
   "NexxtVideoPlayer": "components/organisms/VideoPlayer/VideoPlayer.vue",
-  "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.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,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 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'