@nexxtmove/ui 1.28.0 → 1.30.0

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

@@ -0,0 +1,42 @@
+/**
+ * The background size 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 EditorBackgroundSizeValue = 'bg-cover' | 'bg-contain' | 'bg-auto';
+/** Overridable copy for the three options. Every key is optional. */
+export interface EditorBackgroundSizeMessages {
+    /** Accessible name of the `bg-cover` option. Defaults to `'Opvullen'`. */
+    cover?: string;
+    /** Accessible name of the `bg-contain` option. Defaults to `'Passend'`. */
+    contain?: string;
+    /** Accessible name of the `bg-auto` option. Defaults to `'Origineel'`. */
+    auto?: string;
+}
+export interface NexxtEditorBackgroundSizeProps {
+    /**
+     * Header text of the settings block. Defaults to the Dutch `'Vulling'`;
+     * the library has no i18n layer, so a consumer in another language passes
+     * its own copy in.
+     */
+    label?: string;
+    /**
+     * Copy of the three options. The options are icon-only and show no tooltip,
+     * so this copy is purely the accessible name of each button. 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?: EditorBackgroundSizeMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtEditorBackgroundSizeProps & {
+    /** The selected background size, as the Tailwind class to apply. */
+    modelValue: EditorBackgroundSizeValue;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: EditorBackgroundSizeValue) => any;
+}, string, import('vue').PublicProps, Readonly<NexxtEditorBackgroundSizeProps & {
+    /** The selected background size, as the Tailwind class to apply. */
+    modelValue: EditorBackgroundSizeValue;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: EditorBackgroundSizeValue) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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/index.d.ts

@@ -9,6 +9,7 @@ export type { NexxtPageCardProps, NexxtPageCardSlots, } from './components/molec
 export type { NexxtPageMockupType } from './components/molecules/PageMockup/PageMockup.vue';
 export type { NexxtTreeNode, NexxtTreeProps } from './components/molecules/Tree/Tree.vue';
 export type { EditorAlignItemsMessages, EditorAlignItemsValue, } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue';
+export type { EditorBackgroundSizeMessages, EditorBackgroundSizeValue, } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue';
 export type { EditorFlexDirectionMessages, EditorFlexDirectionValue, } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue';
 export type { EditorGapMessages, EditorGapValue, } from './components/editor/molecules/EditorGap/EditorGap.vue';
 export type { EditorColorMessages, EditorColorProperty, EditorColorValue, } from './components/editor/molecules/EditorColor/EditorColor.vue';
@@ -17,6 +18,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';
@@ -37,12 +40,14 @@ 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 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 NexxtEditorFlexDirection } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue';
 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';