@nexxtmove/ui 1.52.0 → 1.53.0

package/dist/components/editor/composables/useRadioGrid.d.ts

@@ -0,0 +1,48 @@
+import { ComponentPublicInstance, MaybeRefOrGetter } from 'vue';
+/**
+ * Keyboard behaviour of a two-dimensional radiogroup (WAI-ARIA APG radio group,
+ * in 2D): one tab stop, arrows that move *and* choose, no wrap at the edges.
+ *
+ * Positions are cell indices in reading order, `row * columns + column`. A
+ * radio that spans several cells (a band) is registered on one of its cells;
+ * `positions` lists those, so the arrows only move along the radios that
+ * exist. Cell rendering stays with the component.
+ */
+export interface UseRadioGridOptions {
+    /** Number of rows of the grid. */
+    rows: MaybeRefOrGetter<number>;
+    /** Number of columns of the grid. */
+    columns: MaybeRefOrGetter<number>;
+    /**
+     * The positions that hold a radio, in any order. Defaults to every cell. An
+     * arrow towards a cell that is not in here does not move.
+     */
+    positions?: MaybeRefOrGetter<readonly number[]>;
+    /** The chosen position, or `null` while no radio is chosen. */
+    selected: MaybeRefOrGetter<number | null>;
+    /**
+     * The position that takes the tab stop while none is chosen. Without one, or
+     * when it returns a position that holds no radio, the first position does.
+     */
+    preferred?: () => number | null;
+    /**
+     * What Home and End jump to: the first and last radio of the current row, or
+     * of the whole grid. Defaults to `'grid'`.
+     */
+    homeEnd?: 'row' | 'grid';
+    /** Called with the position an arrow, Home or End lands on. */
+    onChoose: (position: number) => void;
+    /**
+     * Called when the focus leaves the grid after one or more keyboard choices:
+     * the end of a keyboard run, where a consumer closes its undo step.
+     */
+    onLeave?: () => void;
+}
+export declare const useRadioGrid: (options: UseRadioGridOptions) => {
+    tabStop: import('vue').ComputedRef<number>;
+    cellRef: (position: number) => (el: Element | ComponentPublicInstance | null) => void;
+    onKeydown: (event: KeyboardEvent, position: number) => void;
+    onFocusout: (event: FocusEvent) => void;
+    reset: () => void;
+    focusTabStop: () => void;
+};

package/dist/components/editor/molecules/EditorAlignItems/EditorAlignItems.vue.d.ts

@@ -56,10 +56,10 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorAlignItemsP
     /** The selected alignment, as the Tailwind class to apply. */
     modelValue: EditorAlignItemsValue;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: "items-center" | "items-end" | "items-start" | "items-stretch") => any;
+    "update:modelValue": (value: "items-center" | "items-start" | "items-end" | "items-stretch") => any;
 }, string, import('vue').PublicProps, Readonly<NexxtEditorAlignItemsProps & {
     /** The selected alignment, as the Tailwind class to apply. */
     modelValue: EditorAlignItemsValue;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: "items-center" | "items-end" | "items-start" | "items-stretch") => any) | undefined;
+    "onUpdate:modelValue"?: ((value: "items-center" | "items-start" | "items-end" | "items-stretch") => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.vue.d.ts

@@ -0,0 +1,101 @@
+/** The three places on one axis, in reading order: left/top, middle, right/bottom. */
+export declare const EDITOR_ALIGNMENT_POSITIONS: readonly ["start", "center", "end"];
+/** A visual place on one axis: `start` is left or top, `end` is right or bottom. */
+export type EditorAlignmentPosition = (typeof EDITOR_ALIGNMENT_POSITIONS)[number];
+/**
+ * Where the content sits, as a visual place: `x` horizontal, `y` vertical,
+ * whatever the direction. `null` for an axis that does not count in a band
+ * mode; the grid writes `null` there, and reads only the axis that counts.
+ */
+export interface EditorAlignmentValue {
+    x: EditorAlignmentPosition | null;
+    y: EditorAlignmentPosition | null;
+}
+/** The direction the content stacks in. Decides the glyph and which way bands run. */
+export type EditorAlignmentDirection = 'row' | 'column';
+/**
+ * What can be chosen: `'both'` axes (nine cells), only the `'cross'` axis
+ * (three bands along the main axis), or only the `'main'` axis (three bands
+ * along the cross axis).
+ */
+export type EditorAlignmentMode = 'both' | 'cross' | 'main';
+/** Overridable copy. Every key is optional. */
+export interface EditorAlignmentGridMessages {
+    /** Name of the top left cell. Defaults to `'Linksboven'`. */
+    topLeft?: string;
+    /** Name of the top middle cell. Defaults to `'Midden boven'`. */
+    topCenter?: string;
+    /** Name of the top right cell. Defaults to `'Rechtsboven'`. */
+    topRight?: string;
+    /** Name of the middle left cell. Defaults to `'Links midden'`. */
+    centerLeft?: string;
+    /** Name of the middle cell. Defaults to `'Midden'`. */
+    center?: string;
+    /** Name of the middle right cell. Defaults to `'Rechts midden'`. */
+    centerRight?: string;
+    /** Name of the bottom left cell. Defaults to `'Linksonder'`. */
+    bottomLeft?: string;
+    /** Name of the bottom middle cell. Defaults to `'Midden onder'`. */
+    bottomCenter?: string;
+    /** Name of the bottom right cell. Defaults to `'Rechtsonder'`. */
+    bottomRight?: string;
+    /** Name of the top band. Defaults to `'Boven'`. */
+    top?: string;
+    /** Name of the middle band, horizontal or vertical. Defaults to `'Midden'`. */
+    middle?: string;
+    /** Name of the bottom band. Defaults to `'Onder'`. */
+    bottom?: string;
+    /** Name of the left band. Defaults to `'Links'`. */
+    left?: string;
+    /** Name of the right band. Defaults to `'Rechts'`. */
+    right?: string;
+    /** The main axis as a place while `auto` is on, in the stretched readout. Defaults to `'Auto'`. */
+    auto?: string;
+    /** Readout while `auto` is on; `{position}` is the band. Defaults to `'Auto · {position}'`. */
+    autoValue?: string;
+    /** Readout while `stretched` is on; `{position}` is the main-axis place. Defaults to `'Uitgerekt · {position}'`. */
+    stretchedValue?: string;
+}
+export interface NexxtEditorAlignmentGridProps {
+    /**
+     * Header text of the settings block, and the name of the radiogroup.
+     * Defaults to the Dutch `'Uitlijning'`; the library has no i18n layer, so a
+     * consumer in another language passes its own copy in.
+     */
+    label?: string;
+    /** The direction the content stacks in. Defaults to `'row'`. */
+    direction?: EditorAlignmentDirection;
+    /** What can be chosen. Defaults to `'both'`, the nine cells. */
+    mode?: EditorAlignmentMode;
+    /**
+     * The main axis distributes the space (Auto): in `'cross'` mode the bands
+     * draw their bars spread out, and the readout says `autoValue`.
+     */
+    auto?: boolean;
+    /**
+     * The content is stretched over the cross axis (a legacy setting): no radio
+     * is checked, and a band with long bars marks the main-axis place. Every
+     * radio stays clickable; a choice is the way out.
+     */
+    stretched?: boolean;
+    /**
+     * Copy of the cells, bands and readout. Defaults are Dutch and are merged
+     * per key. Copy is never translated inside the component.
+     */
+    messages?: EditorAlignmentGridMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtEditorAlignmentGridProps & {
+    /** The chosen place. Every choice writes it: a click, an arrow, Space. */
+    modelValue: EditorAlignmentValue;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: EditorAlignmentValue) => any;
+    commit: () => any;
+}, string, import('vue').PublicProps, Readonly<NexxtEditorAlignmentGridProps & {
+    /** The chosen place. Every choice writes it: a click, an arrow, Space. */
+    modelValue: EditorAlignmentValue;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: EditorAlignmentValue) => any) | undefined;
+    onCommit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/editor/molecules/EditorGap/EditorGap.vue.d.ts

@@ -59,10 +59,25 @@ export declare const EDITOR_GAP_STEPS: readonly [{
  * can put the model value straight on the element it styles.
  */
 export type EditorGapValue = `gap-${(typeof EDITOR_GAP_STEPS)[number]['token']}`;
-/** Overridable copy of the value readout. Every key is optional. */
+/** Overridable copy. Every key is optional. */
 export interface EditorGapMessages {
     /** Unit shown behind the value. Defaults to `'px'`. */
     unit?: string;
+    /** The fixed option, with the `auto` model bound. Defaults to `'Vast'`. */
+    fixed?: string;
+    /** The auto option, with the `auto` model bound. Defaults to `'Auto'`. */
+    auto?: string;
+    /**
+     * Name of the slider while Auto is on, when the gap is a minimum rather than
+     * the gap itself. Defaults to `'Tussenruimte, minimaal'`; on Vast the slider
+     * is named by `label`.
+     */
+    minimumName?: string;
+    /**
+     * Name of the Vast | Auto toolbar, so it is not named like the slider.
+     * Defaults to `'Soort tussenruimte'`.
+     */
+    modeName?: string;
 }
 export interface NexxtEditorGapProps {
     /**
@@ -82,11 +97,27 @@ export default _default;
 declare const __VLS_export: import('vue').DefineComponent<NexxtEditorGapProps & {
     /** The selected gap, as the Tailwind class to apply. */
     modelValue: EditorGapValue;
+    /**
+     * Optional: whether the main axis distributes the space (Auto). Only when it
+     * is bound does the block offer Vast | Auto above the slider; the slider then
+     * sets the minimum gap. The component writes nothing else for Auto, and the
+     * gap model does not change when it is switched.
+     */
+    auto?: boolean;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: "gap-0" | "gap-1" | "gap-2" | "gap-3" | "gap-4" | "gap-5" | "gap-6" | "gap-7" | "gap-8" | "gap-9" | "gap-10" | "gap-11" | "gap-12" | "gap-14" | "gap-16") => any;
+    "update:auto": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<NexxtEditorGapProps & {
     /** The selected gap, as the Tailwind class to apply. */
     modelValue: EditorGapValue;
+    /**
+     * Optional: whether the main axis distributes the space (Auto). Only when it
+     * is bound does the block offer Vast | Auto above the slider; the slider then
+     * sets the minimum gap. The component writes nothing else for Auto, and the
+     * gap model does not change when it is switched.
+     */
+    auto?: boolean;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: "gap-0" | "gap-1" | "gap-2" | "gap-3" | "gap-4" | "gap-5" | "gap-6" | "gap-7" | "gap-8" | "gap-9" | "gap-10" | "gap-11" | "gap-12" | "gap-14" | "gap-16") => any) | undefined;
+    "onUpdate:auto"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export type { NexxtPageMockupType } from './components/molecules/PageMockup/Page
 export type { NexxtPickerGroupData, NexxtPickerItemData, } from './components/molecules/PickerList/PickerList.vue';
 export type { NexxtTreeMove, NexxtTreeNode, NexxtTreeProps, NexxtTreeSlots, } from './components/molecules/Tree/Tree.vue';
 export type { NexxtPlaceholderGroup, NexxtPlaceholderInputMessages, NexxtPlaceholderInputProps, } from './components/molecules/PlaceholderInput/PlaceholderInput.vue';
+export { EDITOR_ALIGNMENT_POSITIONS } from './components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.vue';
+export type { EditorAlignmentDirection, EditorAlignmentGridMessages, EditorAlignmentMode, EditorAlignmentPosition, EditorAlignmentValue, } from './components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.vue';
 export { EDITOR_ALIGN_ITEMS_OPTIONS } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue';
 export type { EditorAlignItemsMessages, EditorAlignItemsValue, } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue';
 export { EDITOR_ANCHOR_OPTIONS } from './components/editor/molecules/EditorAnchor/EditorAnchor.vue';
@@ -78,6 +80,7 @@ export { default as NexxtDatePicker } from './components/organisms/DatePicker/Da
 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 NexxtEditorAlignmentGrid } from './components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.vue';
 export { default as NexxtEditorAnchor } from './components/editor/molecules/EditorAnchor/EditorAnchor.vue';
 export { default as NexxtEditorBackgroundSize } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue';
 export { default as NexxtEditorBorder } from './components/editor/molecules/EditorBorder/EditorBorder.vue';