@nexxtmove/ui 1.45.0 → 1.46.0

package/dist/components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue.d.ts

@@ -16,9 +16,9 @@ type __VLS_ModelProps = {
     modelValue?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_7: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;

package/dist/components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue.d.ts

@@ -0,0 +1,45 @@
+import { EditorSettingsHeadingLevel } from './editorSettingsGroupContext';
+export interface NexxtEditorSettingsGroupProps {
+    /**
+     * Heading of the group. Omit it for a section that holds exactly one
+     * setting: that setting's own label is then promoted to the group's
+     * typography and heading level, so it does not say the same thing twice.
+     */
+    label?: string;
+    /** Heading level of the label. Defaults to 3: the settings panel's own heading is an h2. */
+    headingLevel?: EditorSettingsHeadingLevel;
+    /**
+     * Let the user fold the group away with a button in its heading. Only takes
+     * effect together with `label`: a group without a heading has nothing to
+     * click, so it stays an ordinary, always-open group and warns in
+     * development. The open state is `v-model:open`. Defaults to `false`.
+     */
+    collapsible?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<NexxtEditorSettingsGroupProps & {
+    /**
+     * Whether a collapsible group is open. Ignored unless the group is both
+     * `collapsible` and labelled; the parent owns the state.
+     */
+    open?: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<NexxtEditorSettingsGroupProps & {
+    /**
+     * Whether a collapsible group is open. Ignored unless the group is both
+     * `collapsible` and labelled; the parent owns the state.
+     */
+    open?: boolean;
+}> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    /** The settings: EditorSettingsBlocks, possibly wrapped in a reveal or a mobile marker. */
+    default?: () => unknown;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/editor/atoms/EditorSettingsGroup/editorSettingsGroupContext.d.ts

@@ -0,0 +1,23 @@
+import { ComputedRef, InjectionKey } from 'vue';
+/** The heading levels a group label can take. The settings panel's own heading is an h2. */
+export type EditorSettingsHeadingLevel = 2 | 3 | 4 | 5 | 6;
+/**
+ * What a NexxtEditorSettingsGroup tells the settings blocks inside it. Library
+ * internal: the group and the block are the only two that read or write it.
+ */
+export interface EditorSettingsGroupContext {
+    /** Always `true`: the block is inside a group, so the group owns the line and the bottom space. */
+    grouped: true;
+    /**
+     * The group has no label of its own, so the label of the one setting in it
+     * is promoted to the group's typography and heading level.
+     */
+    promoted: boolean;
+    /** Heading level of the group label, and of a promoted setting label. */
+    headingLevel: EditorSettingsHeadingLevel;
+}
+/**
+ * Provided as a computed, so a label or heading level that changes after mount
+ * reaches the blocks without them having to remount.
+ */
+export declare const EDITOR_SETTINGS_GROUP_KEY: InjectionKey<ComputedRef<EditorSettingsGroupContext>>;

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

@@ -43,6 +43,12 @@ export interface NexxtEditorAlignItemsProps {
      * Copy is never translated inside the component.
      */
     messages?: EditorAlignItemsMessages;
+    /**
+     * The options to offer, as a subset of the four. They are always shown in
+     * the order of `EDITOR_ALIGN_ITEMS_OPTIONS`, whatever order this list is in;
+     * values not on that list are ignored. Defaults to all four.
+     */
+    options?: EditorAlignItemsValue[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,61 @@
+/**
+ * A dash pattern in whole px: the length of one dash and the space between two.
+ * Numbers rather than classes, the same as `EditorDimensionValue`: the consumer
+ * writes them into CSS variables.
+ */
+export interface EditorDashPatternValue {
+    dash: number;
+    gap: number;
+}
+/**
+ * The range each value is clamped to, in px. Exported so the consumer's class
+ * matcher knows the same bounds.
+ */
+export declare const EDITOR_DASH_PATTERN_LIMITS: {
+    readonly dash: {
+        readonly min: 1;
+        readonly max: 64;
+    };
+    readonly gap: {
+        readonly min: 1;
+        readonly max: 64;
+    };
+};
+/** Overridable copy of the two fields. Every key is optional. */
+export interface EditorDashPatternMessages {
+    /** Caption and accessible name of the dash length field. Defaults to `'Lengte'`. */
+    dash?: string;
+    /** Caption and accessible name of the gap field. Defaults to `'Tussenruimte'`. */
+    gap?: string;
+    /** How the px unit is written in both fields. Defaults to `'px'`. */
+    unit?: string;
+}
+export interface NexxtEditorDashPatternProps {
+    /**
+     * Header text of the settings block. Defaults to the Dutch `'Streep'`; the
+     * library has no i18n layer, so a consumer in another language passes its
+     * own copy in.
+     */
+    label?: string;
+    /**
+     * Captions of the fields and the unit. 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?: EditorDashPatternMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtEditorDashPatternProps & {
+    /** The dash pattern, in whole px. */
+    modelValue: EditorDashPatternValue;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: EditorDashPatternValue) => any;
+    commit: () => any;
+}, string, import('vue').PublicProps, Readonly<NexxtEditorDashPatternProps & {
+    /** The dash pattern, in whole px. */
+    modelValue: EditorDashPatternValue;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: EditorDashPatternValue) => any) | undefined;
+    onCommit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -43,6 +43,12 @@ export interface NexxtEditorJustifyContentProps {
      * Copy is never translated inside the component.
      */
     messages?: EditorJustifyContentMessages;
+    /**
+     * The options to offer, as a subset of the four. They are always shown in
+     * the order of `EDITOR_JUSTIFY_CONTENT_OPTIONS`, whatever order this list is
+     * in. Defaults to all four.
+     */
+    options?: EditorJustifyContentValue[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,78 @@
+/**
+ * The line styles the editor offers, in the order they are shown. The model is
+ * the token itself, not a class: what a style puts on the element is more than
+ * one class and depends on the thickness and the breakpoint, so that
+ * translation belongs to the consumer. The labels arrive through `messages`,
+ * keyed by token.
+ */
+export declare const EDITOR_LINE_STYLE_OPTIONS: readonly [{
+    readonly token: "none";
+}, {
+    readonly token: "solid";
+}, {
+    readonly token: "dashed";
+}, {
+    readonly token: "dotted";
+}];
+/** A line style, as one of the tokens of `EDITOR_LINE_STYLE_OPTIONS`. */
+export type EditorLineStyleValue = (typeof EDITOR_LINE_STYLE_OPTIONS)[number]['token'];
+/**
+ * The thicknesses the slider can land on, in px. There is no Tailwind token
+ * behind them: the consumer writes the value into a CSS variable.
+ */
+export declare const EDITOR_LINE_THICKNESS_STEPS: readonly [1, 2, 3, 4, 6, 8];
+/** A line thickness in px, as one of `EDITOR_LINE_THICKNESS_STEPS`. */
+export type EditorLineThickness = (typeof EDITOR_LINE_THICKNESS_STEPS)[number];
+/**
+ * The smallest thickness per style. A style that is not in here starts at the
+ * first step. Dotted starts at 2: at 1 px a round dot is a blurred pixel.
+ */
+export declare const EDITOR_LINE_MIN_THICKNESS: Partial<Record<EditorLineStyleValue, EditorLineThickness>>;
+/** Overridable copy of the options and the thickness row. Every key is optional. */
+export interface EditorLineStyleMessages {
+    /** Name of the `none` option. Defaults to `'Geen'`. */
+    none?: string;
+    /** Name of the `solid` option. Defaults to `'Doorgetrokken'`. */
+    solid?: string;
+    /** Name of the `dashed` option. Defaults to `'Gestreept'`. */
+    dashed?: string;
+    /** Name of the `dotted` option. Defaults to `'Gestippeld'`. */
+    dotted?: string;
+    /** Heading above the slider, and the accessible name of its thumb. Defaults to `'Dikte'`. */
+    thickness?: string;
+    /** Unit shown behind the thickness. Defaults to `'px'`. */
+    unit?: string;
+}
+export interface NexxtEditorLineStyleProps {
+    /**
+     * Header text of the settings block, and with it the name of the option
+     * group. Defaults to the Dutch `'Lijn'`; the library has no i18n layer, so a
+     * consumer in another language passes its own copy in.
+     */
+    label?: string;
+    /**
+     * Copy of the options and the thickness row. 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?: EditorLineStyleMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtEditorLineStyleProps & {
+    /** The selected line style, as a token. */
+    modelValue: EditorLineStyleValue;
+    /** The line thickness in px. */
+    thickness: EditorLineThickness;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: "solid" | "none" | "dashed" | "dotted") => any;
+    "update:thickness": (value: 1 | 2 | 3 | 4 | 6 | 8) => any;
+}, string, import('vue').PublicProps, Readonly<NexxtEditorLineStyleProps & {
+    /** The selected line style, as a token. */
+    modelValue: EditorLineStyleValue;
+    /** The line thickness in px. */
+    thickness: EditorLineThickness;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: "solid" | "none" | "dashed" | "dotted") => any) | undefined;
+    "onUpdate:thickness"?: ((value: 1 | 2 | 3 | 4 | 6 | 8) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -143,6 +143,17 @@ export interface NexxtEditorPaddingProps {
      * is never translated inside the component.
      */
     messages?: EditorPaddingMessages;
+    /**
+     * Which sides the block edits. `'all'` offers all four. `'vertical'` offers
+     * top and bottom only, for an element where horizontal padding has no
+     * sensible effect: collapsed it is one field that writes `py-N`, expanded it
+     * is Boven and Onder in the same row, written as `pt-N pb-N`. Horizontal
+     * padding in the incoming value is ignored there and drops out on the first
+     * write. `'horizontal'` is the mirror image: one field writing `px-N`, or
+     * Links and Rechts in one row written as `pl-N pr-N`, with incoming vertical
+     * padding ignored. Defaults to `'all'`.
+     */
+    sides?: 'all' | 'vertical' | 'horizontal';
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -43,6 +43,14 @@ export interface NexxtEditorTextAlignProps {
      * Copy is never translated inside the component.
      */
     messages?: EditorTextAlignMessages;
+    /**
+     * The options to offer, as a subset of the four. They are always shown in
+     * the order of `EDITOR_TEXT_ALIGN_OPTIONS`, whatever order this list is in.
+     * Defaults to all four. A consumer that writes alignment as something other
+     * than `text-*` -- auto margins, say -- passes the three it can translate and
+     * maps the value itself.
+     */
+    options?: EditorTextAlignValue[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/molecules/ToggleGroup/ToggleGroup.vue.d.ts

@@ -19,16 +19,37 @@ interface NexxtToggleGroupProps {
     equalWidth?: boolean;
 }
 type __VLS_Props = NexxtToggleGroupProps;
+type __VLS_Slots = {
+    /**
+     * Content of one option, replacing the default icon and label. Rendered
+     * twice per option -- once on the button and once in the clipped overlay
+     * that shows the active colour -- so it should draw in `currentColor` and
+     * carry no state or ids of its own. The button keeps its `ariaLabel` /
+     * `tooltip` naming, so content without text still needs `ariaLabel`.
+     */
+    option?: (props: {
+        /** The option being rendered. */
+        option: NexxtToggleGroupOption;
+        /** Whether this option is the selected value. */
+        selected: boolean;
+    }) => unknown;
+};
 type __VLS_ModelProps = {
     modelValue: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     equalWidth: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -46,6 +46,12 @@ export type { EditorDimensionFieldMessages, EditorDimensionUnit, EditorDimension
 export { EDITOR_SIZE_OPTIONS } from './components/editor/molecules/EditorSize/EditorSize.vue';
 export type { EditorSizeMessages, EditorSizeMode, EditorSizeValue, } from './components/editor/molecules/EditorSize/EditorSize.vue';
 export type { EditorSizeLimitMessages } from './components/editor/molecules/EditorSizeLimit/EditorSizeLimit.vue';
+export { EDITOR_LINE_MIN_THICKNESS, EDITOR_LINE_STYLE_OPTIONS, EDITOR_LINE_THICKNESS_STEPS, } from './components/editor/molecules/EditorLineStyle/EditorLineStyle.vue';
+export type { EditorLineStyleMessages, EditorLineStyleValue, EditorLineThickness, NexxtEditorLineStyleProps, } from './components/editor/molecules/EditorLineStyle/EditorLineStyle.vue';
+export type { NexxtEditorSettingsGroupProps } from './components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue';
+export type { EditorSettingsHeadingLevel } from './components/editor/atoms/EditorSettingsGroup/editorSettingsGroupContext';
+export { EDITOR_DASH_PATTERN_LIMITS } from './components/editor/molecules/EditorDashPattern/EditorDashPattern.vue';
+export type { EditorDashPatternMessages, EditorDashPatternValue, NexxtEditorDashPatternProps, } from './components/editor/molecules/EditorDashPattern/EditorDashPattern.vue';
 export type { NexxtTemplateCardContentFeature, NexxtTemplateCardProps, NexxtTemplateCardSlots, } from './components/molecules/TemplateCard/TemplateCard.vue';
 export { default as NexxtAnimatedNumber } from './components/atoms/AnimatedNumber/AnimatedNumber.vue';
 export { default as NexxtAnnouncement } from './components/molecules/Announcement/Announcement.vue';
@@ -68,6 +74,7 @@ export { default as NexxtEditorAlignItems } from './components/editor/molecules/
 export { default as NexxtEditorBackgroundSize } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue';
 export { default as NexxtEditorBorder } from './components/editor/molecules/EditorBorder/EditorBorder.vue';
 export { default as NexxtEditorColor } from './components/editor/molecules/EditorColor/EditorColor.vue';
+export { default as NexxtEditorDashPattern } from './components/editor/molecules/EditorDashPattern/EditorDashPattern.vue';
 export { default as NexxtEditorDimensionField } from './components/editor/atoms/EditorDimensionField/EditorDimensionField.vue';
 export { default as NexxtEditorFlexDirection } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue';
 export { default as NexxtEditorFontSize } from './components/editor/molecules/EditorFontSize/EditorFontSize.vue';
@@ -76,10 +83,12 @@ export { default as NexxtEditorHeadingType } from './components/editor/molecules
 export { default as NexxtEditorJustifyContent } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue';
 export { default as NexxtEditorLetterSpacing } from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue';
 export { default as NexxtEditorLineHeight } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue';
+export { default as NexxtEditorLineStyle } from './components/editor/molecules/EditorLineStyle/EditorLineStyle.vue';
 export { default as NexxtEditorMaxWidth } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue';
 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 NexxtEditorSettingsGroup } from './components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue';
 export { default as NexxtEditorSize } from './components/editor/molecules/EditorSize/EditorSize.vue';
 export { default as NexxtEditorSizeLimit } from './components/editor/molecules/EditorSizeLimit/EditorSizeLimit.vue';
 export { default as NexxtEditorTextAlign } from './components/editor/molecules/EditorTextAlign/EditorTextAlign.vue';