@nexxtmove/ui 1.27.0 → 1.29.0

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

@@ -0,0 +1,99 @@
+/**
+ * The steps the slider can land on: the `max-w-*` sizes, with the px numbers
+ * mirroring their values (rem × 16). These are Tailwind's own container sizes,
+ * not Figma tokens -- `tailwind/` defines no `--container-*`, so the token sync
+ * cannot move them. The desync to watch for is a Tailwind major that renames or
+ * renumbers the scale: nothing here fails when that happens, the numbers just
+ * stop matching the CSS, so this list has to be checked by hand on an upgrade.
+ */
+export declare const EDITOR_MAX_WIDTH_STEPS: readonly [{
+    readonly token: "xs";
+    readonly px: 320;
+}, {
+    readonly token: "sm";
+    readonly px: 384;
+}, {
+    readonly token: "md";
+    readonly px: 448;
+}, {
+    readonly token: "lg";
+    readonly px: 512;
+}, {
+    readonly token: "xl";
+    readonly px: 576;
+}, {
+    readonly token: "2xl";
+    readonly px: 672;
+}, {
+    readonly token: "3xl";
+    readonly px: 768;
+}, {
+    readonly token: "4xl";
+    readonly px: 896;
+}, {
+    readonly token: "5xl";
+    readonly px: 1024;
+}, {
+    readonly token: "6xl";
+    readonly px: 1152;
+}, {
+    readonly token: "7xl";
+    readonly px: 1280;
+}];
+/**
+ * The maximum width 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 EditorMaxWidthValue = `max-w-${(typeof EDITOR_MAX_WIDTH_STEPS)[number]['token']}`;
+/** Overridable copy of the value readout. Every key is optional. */
+export interface EditorMaxWidthMessages {
+    /**
+     * Unit shown behind the value. Defaults to `'px'`. Keep it to a short symbol
+     * such as `'px'` or `'pt'`: the readout is only as wide as `1280 px` needs,
+     * and a spelled-out unit grows it and pushes the slider in.
+     */
+    unit?: string;
+}
+export interface NexxtEditorMaxWidthProps {
+    /**
+     * Header text of the settings block. Defaults to the Dutch
+     * `'Vaste breedte'` -- switched off the page runs full width, so the setting
+     * is the fixed width, not a maximum. The library has no i18n layer, so a
+     * consumer in another language passes its own copy in.
+     */
+    label?: string;
+    /**
+     * Copy of the value readout. Merged per key, so overriding one key keeps the
+     * defaults of the others. Copy is never translated inside the component.
+     */
+    messages?: EditorMaxWidthMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtEditorMaxWidthProps & {
+    /** The selected maximum width, as the Tailwind class to apply. */
+    modelValue: EditorMaxWidthValue;
+    /**
+     * Open state of the block. Switched off means the page runs full width, which
+     * is the absence of a class rather than a value of its own: the consumer simply
+     * writes no `max-w-*` then. The chosen width is kept while the block is
+     * collapsed, so switching back on restores it.
+     */
+    enabled?: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: "max-w-sm" | "max-w-md" | "max-w-lg" | "max-w-xs" | "max-w-xl" | "max-w-2xl" | "max-w-3xl" | "max-w-4xl" | "max-w-5xl" | "max-w-6xl" | "max-w-7xl") => any;
+    "update:enabled": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<NexxtEditorMaxWidthProps & {
+    /** The selected maximum width, as the Tailwind class to apply. */
+    modelValue: EditorMaxWidthValue;
+    /**
+     * Open state of the block. Switched off means the page runs full width, which
+     * is the absence of a class rather than a value of its own: the consumer simply
+     * writes no `max-w-*` then. The chosen width is kept while the block is
+     * collapsed, so switching back on restores it.
+     */
+    enabled?: boolean;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: "max-w-sm" | "max-w-md" | "max-w-lg" | "max-w-xs" | "max-w-xl" | "max-w-2xl" | "max-w-3xl" | "max-w-4xl" | "max-w-5xl" | "max-w-6xl" | "max-w-7xl") => any) | undefined;
+    "onUpdate:enabled"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -17,6 +17,12 @@ export interface EditorPaddingMessages {
      * fields. Defaults to `'Padding per zijde'`.
      */
     toggle?: string;
+    /**
+     * Unit the fields show and read, appended to every accessible name. The
+     * values themselves are px whatever this says, so it is copy, not a
+     * conversion. Defaults to `'px'`.
+     */
+    unit?: string;
 }
 export interface NexxtEditorPaddingProps {
     /**

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

@@ -2,17 +2,19 @@ import { PaddingIconSide } from './_PaddingIcon.vue';
 export interface NexxtEditorPaddingFieldProps {
     /** Sides the icon marks, which is also what this field edits. */
     sides: PaddingIconSide[];
-    /** Accessible name of the input; the settings block label is not a `<label for>`. */
+    /** Name of the field; the unit is appended to it for the accessible name. */
     label: string;
-    /** Value as shown, already normalised. An empty string falls back to the `0` placeholder. */
+    /** Value as shown, in the unit below. An empty string falls back to the `0` placeholder. */
     value: string;
-    /** Highest value the input accepts. */
-    max: number;
+    /** Unit of the value, shown behind the input and part of the accessible name. */
+    unit: string;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: import('vue').DefineComponent<NexxtEditorPaddingFieldProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    input: (value: string) => any;
+    step: (direction: 1 | -1) => any;
+    commit: (value: number) => any;
 }, string, import('vue').PublicProps, Readonly<NexxtEditorPaddingFieldProps> & Readonly<{
-    onInput?: ((value: string) => any) | undefined;
+    onStep?: ((direction: 1 | -1) => any) | undefined;
+    onCommit?: ((value: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/index.d.ts

@@ -17,6 +17,8 @@ export type { EditorHeadingTypeMessages, EditorHeadingTypeValue, } from './compo
 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, } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue';
+export { EDITOR_MAX_WIDTH_STEPS } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue';
+export type { EditorMaxWidthMessages, EditorMaxWidthValue, } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue';
 export type { EditorPaddingMessages } from './components/editor/molecules/EditorPadding/EditorPadding.vue';
 export type { NexxtTemplateCardContentFeature, NexxtTemplateCardProps, NexxtTemplateCardSlots, } from './components/molecules/TemplateCard/TemplateCard.vue';
 export { default as NexxtAnimatedNumber } from './components/atoms/AnimatedNumber/AnimatedNumber.vue';
@@ -43,6 +45,7 @@ export { default as NexxtEditorFlexDirection } from './components/editor/molecul
 export { default as NexxtEditorGap } from './components/editor/molecules/EditorGap/EditorGap.vue';
 export { default as NexxtEditorHeadingType } from './components/editor/molecules/EditorHeadingType/EditorHeadingType.vue';
 export { default as NexxtEditorJustifyContent } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.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';