@nexxtmove/ui 1.42.0 → 1.44.0

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

@@ -0,0 +1,89 @@
+/** A unit a dimension can be written in. */
+export type EditorDimensionUnit = 'px' | '%';
+/** A dimension as the field edits it: a whole number and the unit it is in. */
+export interface EditorDimensionValue {
+    value: number;
+    unit: EditorDimensionUnit;
+}
+/**
+ * The range a value is clamped to per unit, unless the `min` / `max` props say
+ * otherwise. The px range starts at 40 rather than 0: below that an element
+ * set to a fixed size is too small to select on the canvas again.
+ */
+export declare const EDITOR_DIMENSION_LIMITS: {
+    readonly px: {
+        readonly min: 40;
+        readonly max: 1600;
+    };
+    readonly '%': {
+        readonly min: 1;
+        readonly max: 100;
+    };
+};
+/** Overridable copy of the field. Every key is optional. */
+export interface EditorDimensionFieldMessages {
+    /** Shown in an empty `optional` field, where empty means none. Defaults to `'Geen'`. */
+    placeholder?: string;
+    /** Accessible name of the unit selector, when more than one unit is offered. Defaults to `'Eenheid'`. */
+    unit?: string;
+    /** How the px unit is written. Defaults to `'px'`. */
+    px?: string;
+    /** How the percentage unit is written. Defaults to `'%'`. */
+    percent?: string;
+}
+export interface NexxtEditorDimensionFieldProps {
+    /** Accessible name of the input; the unit is appended to it. Not rendered visibly. */
+    label: string;
+    /**
+     * The units the user can pick from, in the order they are offered. With one
+     * unit it is shown as plain text, with more as a selector. Defaults to `['px']`.
+     */
+    units?: EditorDimensionUnit[];
+    /** Lowest value per unit, merged over `EDITOR_DIMENSION_LIMITS`. */
+    min?: Partial<Record<EditorDimensionUnit, number>>;
+    /** Highest value per unit, merged over `EDITOR_DIMENSION_LIMITS`. */
+    max?: Partial<Record<EditorDimensionUnit, number>>;
+    /**
+     * An emptied field commits `null` -- none -- and shows the placeholder.
+     * Without it, emptying the field is a typo and the old value comes back.
+     */
+    optional?: boolean;
+    /**
+     * Copy of the placeholder and the units. 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?: EditorDimensionFieldMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtEditorDimensionFieldProps & {
+    /**
+     * The dimension, or `null` for none. A `null` from outside -- another element
+     * selected, an undo -- resets the unit to the first of `units`; a field the
+     * user emptied keeps the unit picked in it. A value from outside brings its
+     * own unit.
+     */
+    modelValue?: EditorDimensionValue | null;
+}, {
+    /**
+     * Moves focus into the input and selects its value, so typing replaces it.
+     * Pass `{ preventScroll: true }` while the field is still being revealed in a
+     * clipping box, which the browser would otherwise scroll to bring it in view.
+     */
+    focus: (options?: FocusOptions) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: EditorDimensionValue | null) => any;
+    commit: () => any;
+}, string, import('vue').PublicProps, Readonly<NexxtEditorDimensionFieldProps & {
+    /**
+     * The dimension, or `null` for none. A `null` from outside -- another element
+     * selected, an undo -- resets the unit to the first of `units`; a field the
+     * user emptied keeps the unit picked in it. A value from outside brings its
+     * own unit.
+     */
+    modelValue?: EditorDimensionValue | null;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: EditorDimensionValue | null) => any) | undefined;
+    onCommit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -54,6 +54,12 @@ export interface EditorMaxWidthMessages {
      */
     unit?: string;
 }
+/**
+ * Sets a width on Tailwind's `max-w-*` steps, stored as the class.
+ *
+ * @deprecated Use `NexxtEditorSizeLimit`: a free maximum in px or % that can
+ * be none.
+ */
 export interface NexxtEditorMaxWidthProps {
     /**
      * Header text of the settings block. Defaults to the Dutch

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

@@ -0,0 +1,101 @@
+import { EditorDimensionUnit, EditorDimensionValue } from '../../atoms/EditorDimensionField/EditorDimensionField.vue';
+/**
+ * The options the editor offers, in the order they are shown. The labels are
+ * not in here; they arrive through `messages`, keyed by token.
+ */
+export declare const EDITOR_SIZE_OPTIONS: readonly [{
+    readonly token: "auto";
+}, {
+    readonly token: "fill";
+}, {
+    readonly token: "fixed";
+}];
+/** How a dimension is sized: by its content, filling its parent, or fixed. */
+export type EditorSizeMode = (typeof EDITOR_SIZE_OPTIONS)[number]['token'];
+export interface EditorSizeValue {
+    mode: EditorSizeMode;
+    /**
+     * The fixed dimension. Kept when another mode is picked, so switching back
+     * to `'fixed'` restores it; it only applies while `mode` is `'fixed'`. The
+     * app always fills it with the measured size of the element, so picking
+     * `'fixed'` starts from that size.
+     */
+    fixed?: EditorDimensionValue;
+}
+/** Overridable copy of the options and the field. Every key is optional. */
+export interface EditorSizeMessages {
+    /** Label of the `auto` option. Defaults to `'Automatisch'`. */
+    auto?: string;
+    /** Label of the `fill` option. Defaults to `'Vullen'`. */
+    fill?: string;
+    /** Label of the `fixed` option. Defaults to `'Vast'`. */
+    fixed?: string;
+    /**
+     * Accessible name of the `auto` option. Defaults to the label followed by
+     * the option, lowercased: `'Breedte automatisch'`. Pass it for a language
+     * where that concatenation does not read.
+     */
+    autoAriaLabel?: string;
+    /** Accessible name of the `fill` option. Defaults to `'Breedte vullen'`, built the same way. */
+    fillAriaLabel?: string;
+    /** Accessible name of the `fixed` option. Defaults to `'Breedte vast'`, built the same way. */
+    fixedAriaLabel?: string;
+    /** Accessible name of the unit selector, when more than one unit is offered. Defaults to `'Eenheid'`. */
+    unit?: string;
+    /** How the px unit is written. Defaults to `'px'`. */
+    px?: string;
+    /** How the percentage unit is written. Defaults to `'%'`. */
+    percent?: string;
+}
+export interface NexxtEditorSizeProps {
+    /**
+     * Header text of the settings block, and the accessible name of the fixed
+     * field. Defaults to the Dutch `'Formaat'`; a consumer showing a width and a
+     * height passes `'Breedte'` and `'Hoogte'`.
+     */
+    label?: string;
+    /**
+     * The modes offered, as a subset of `'auto'`, `'fill'` and `'fixed'`; they
+     * are always shown in that order. An image, which has nothing to fill,
+     * passes `['auto', 'fixed']`. Defaults to all three. A model whose mode is
+     * not offered shows no option selected.
+     */
+    modes?: EditorSizeMode[];
+    /** The units the fixed field offers. Defaults to `['px']`. */
+    units?: EditorDimensionUnit[];
+    /** Lowest fixed value per unit, merged over `EDITOR_DIMENSION_LIMITS`. */
+    min?: Partial<Record<EditorDimensionUnit, number>>;
+    /** Highest fixed value per unit, merged over `EDITOR_DIMENSION_LIMITS`. */
+    max?: Partial<Record<EditorDimensionUnit, number>>;
+    /**
+     * Copy of the options and the field. 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?: EditorSizeMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtEditorSizeProps & {
+    /**
+     * The size. Fill `fixed` with the measured size of the element, as the app
+     * always does. Without it, picking `'fixed'` writes `{ mode: 'fixed' }` and
+     * commits straight away, leaving a fixed mode without a size until a value is
+     * typed; with the measured size, that state does not come up.
+     */
+    modelValue: EditorSizeValue;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: EditorSizeValue) => any;
+    commit: () => any;
+}, string, import('vue').PublicProps, Readonly<NexxtEditorSizeProps & {
+    /**
+     * The size. Fill `fixed` with the measured size of the element, as the app
+     * always does. Without it, picking `'fixed'` writes `{ mode: 'fixed' }` and
+     * commits straight away, leaving a fixed mode without a size until a value is
+     * typed; with the measured size, that state does not come up.
+     */
+    modelValue: EditorSizeValue;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: EditorSizeValue) => any) | undefined;
+    onCommit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,38 @@
+import { EditorDimensionValue, EditorDimensionFieldMessages, EditorDimensionUnit } from '../../atoms/EditorDimensionField/EditorDimensionField.vue';
+/** Overridable copy of the field. Every key is optional. */
+export type EditorSizeLimitMessages = EditorDimensionFieldMessages;
+/**
+ * A free minimum or maximum of an element's size, in px or %, that can be
+ * none. Replaces the deprecated `NexxtEditorMaxWidth`, which offers only
+ * Tailwind's `max-w-*` steps.
+ */
+export interface NexxtEditorSizeLimitProps {
+    /** Visible label above the field, and its accessible name, as in `'Maximale breedte'`. */
+    label: string;
+    /** The units the field offers. Defaults to `['px']`. */
+    units?: EditorDimensionUnit[];
+    /** Lowest value per unit, merged over `EDITOR_DIMENSION_LIMITS`. */
+    min?: Partial<Record<EditorDimensionUnit, number>>;
+    /** Highest value per unit, merged over `EDITOR_DIMENSION_LIMITS`. */
+    max?: Partial<Record<EditorDimensionUnit, number>>;
+    /**
+     * Copy of the placeholder and the units. Defaults are Dutch and are merged
+     * per key. Copy is never translated inside the component.
+     */
+    messages?: EditorSizeLimitMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtEditorSizeLimitProps & {
+    /** The limit, or `null` for none: emptying the field removes it. */
+    modelValue?: EditorDimensionValue | null;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: EditorDimensionValue | null) => any;
+    commit: () => any;
+}, string, import('vue').PublicProps, Readonly<NexxtEditorSizeLimitProps & {
+    /** The limit, or `null` for none: emptying the field removes it. */
+    modelValue?: EditorDimensionValue | null;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: EditorDimensionValue | null) => any) | undefined;
+    onCommit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/index.d.ts

@@ -41,6 +41,11 @@ export type { EditorFontSizeMessages, EditorFontSizeValue, NexxtEditorFontSizePr
 export type { NexxtFontPickerFont, NexxtFontPickerInherit, NexxtFontPickerMessages, NexxtFontPickerProps, } from './components/organisms/FontPicker/FontPicker.vue';
 export { EDITOR_PADDING_STEPS } from './components/editor/molecules/EditorPadding/EditorPadding.vue';
 export type { EditorPaddingMessages, EditorPaddingStep, } from './components/editor/molecules/EditorPadding/EditorPadding.vue';
+export { EDITOR_DIMENSION_LIMITS } from './components/editor/atoms/EditorDimensionField/EditorDimensionField.vue';
+export type { EditorDimensionFieldMessages, EditorDimensionUnit, EditorDimensionValue, } from './components/editor/atoms/EditorDimensionField/EditorDimensionField.vue';
+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 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';
@@ -63,6 +68,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 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';
 export { default as NexxtEditorGap } from './components/editor/molecules/EditorGap/EditorGap.vue';
@@ -74,6 +80,8 @@ export { default as NexxtEditorMaxWidth } from './components/editor/molecules/Ed
 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 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';
 export { default as NexxtEnergyLabel } from './components/atoms/EnergyLabel/EnergyLabel.vue';
 export { default as NexxtFloatingPanel } from './components/atoms/FloatingPanel/FloatingPanel.vue';