@nexxtmove/ui 1.35.0 → 1.37.0

package/dist/components/atoms/Icon/customIcons.d.ts

@@ -1,4 +1,4 @@
 export declare const customIcons: {
-    funda: string;
+    funda: import('vue').DefineComponent<object, object, unknown>;
 };
 export type CustomIconName = keyof typeof customIcons;

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

@@ -5,17 +5,41 @@
  * is colour plus width, and that pair gets a component of its own.
  */
 export type EditorColorProperty = 'bg' | 'text';
+declare const ROLES: readonly ["main", "accent", "background", "heading", "text"];
 /**
- * The colour as the editor needs it: a Tailwind arbitrary-value class such as
- * `'bg-[#1777EA]'`, so the consumer can put the model value straight on the
- * element it styles.
+ * A role of the customer's theme. A colour bound to a role follows the theme,
+ * where a literal colour stays what it was picked as.
  */
-export type EditorColorValue = `${EditorColorProperty}-[#${string}]`;
+export type EditorColorRole = (typeof ROLES)[number];
+/** A literal colour: a Tailwind arbitrary-value class such as `'bg-[#1777EA]'`. */
+export type EditorColorLiteralValue = `${EditorColorProperty}-[#${string}]`;
+/** A colour bound to a theme role: a token class such as `'bg-theme-main'`. */
+export type EditorColorRoleValue = `${EditorColorProperty}-theme-${EditorColorRole}`;
+/**
+ * The colour as the editor needs it: the class to apply, so the consumer can
+ * put the model value straight on the element it styles. Either a literal
+ * colour or a theme role.
+ */
+export type EditorColorValue = EditorColorLiteralValue | EditorColorRoleValue;
+export interface EditorColorThemeRole {
+    /** The role the class is written for: `'main'` becomes `bg-theme-main`. */
+    role: EditorColorRole;
+    /** Name of the role as the user reads it, in the swatch's tooltip and in the trigger. */
+    label: string;
+    /**
+     * The role's current colour as a 6- or 8-digit hex. Only used to paint the
+     * swatch: the library ships no CSS for the role classes, and the hex never
+     * reaches the model.
+     */
+    hex: string;
+}
 export interface EditorColorMessages {
     /** Text shown while no colour is set. Defaults to `'Kies kleur...'`. */
     placeholder?: string;
     /** Label shown above reusable colours. */
     suggestionsLabel?: string;
+    /** Label shown above the theme roles. Defaults to `'Huisstijl'`. */
+    themeLabel?: string;
 }
 export interface NexxtEditorColorProps {
     /**
@@ -43,6 +67,13 @@ export interface NexxtEditorColorProps {
     messages?: EditorColorMessages;
     /** Hex colours available inside the picker panel as one-click suggestions. */
     suggestions?: string[];
+    /**
+     * Theme roles offered above the suggestions. Picking one writes the role
+     * class for the current `property` instead of a literal colour. Which roles
+     * are offered is up to the consumer; an entry whose `hex` is not a 6- or
+     * 8-digit hex is left out. Without roles the section is not rendered.
+     */
+    themeRoles?: EditorColorThemeRole[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -51,33 +82,39 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorColorProps
      * The chosen colour, as the Tailwind class to apply.
      *
      * Beware: Tailwind only generates an arbitrary class for text it finds in the
-     * source at build time. A value that arrives at runtime -- from a database,
-     * say -- therefore gets no CSS of its own; the consumer either translates it
-     * into an inline style or safelists the classes it can produce. The hex is
-     * always parseable out of the string, which is what makes that translation
-     * possible.
+     * source at build time. A literal value that arrives at runtime -- from a
+     * database, say -- therefore gets no CSS of its own; the consumer either
+     * translates it into an inline style or safelists the classes it can produce.
+     * The hex is always parseable out of a literal value, which is what makes that
+     * translation possible.
+     *
+     * A role class is a finite list, so it is static CSS -- but the consumer's:
+     * this library defines no `theme-*` colours.
      */
     modelValue: EditorColorValue;
     /** Open state of the block. Only has an effect when `switchable` is `true`. */
     enabled?: boolean;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: `text-[#${string}]` | `bg-[#${string}]`) => any;
+    "update:modelValue": (value: EditorColorValue) => any;
     "update:enabled": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<NexxtEditorColorProps & {
     /**
      * The chosen colour, as the Tailwind class to apply.
      *
      * Beware: Tailwind only generates an arbitrary class for text it finds in the
-     * source at build time. A value that arrives at runtime -- from a database,
-     * say -- therefore gets no CSS of its own; the consumer either translates it
-     * into an inline style or safelists the classes it can produce. The hex is
-     * always parseable out of the string, which is what makes that translation
-     * possible.
+     * source at build time. A literal value that arrives at runtime -- from a
+     * database, say -- therefore gets no CSS of its own; the consumer either
+     * translates it into an inline style or safelists the classes it can produce.
+     * The hex is always parseable out of a literal value, which is what makes that
+     * translation possible.
+     *
+     * A role class is a finite list, so it is static CSS -- but the consumer's:
+     * this library defines no `theme-*` colours.
      */
     modelValue: EditorColorValue;
     /** Open state of the block. Only has an effect when `switchable` is `true`. */
     enabled?: boolean;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: `text-[#${string}]` | `bg-[#${string}]`) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: EditorColorValue) => any) | undefined;
     "onUpdate:enabled"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,90 @@
+/**
+ * The steps the slider can land on, as the class they are stored as and the
+ * pixels that class is. Not a scale Tailwind has names for -- `tracking-wide`
+ * is an em and moves with the font size, and the editor shows every size in
+ * px -- so every step is an arbitrary-value class.
+ *
+ * The middle step is no class at all: zero is what the text already does, and
+ * storing nothing for it keeps the "no class means default" every other
+ * setting has. The negative side is there on purpose: tightening a large
+ * heading is a real need.
+ *
+ * The consumer stores these classes and lists them in an `@source inline` rule,
+ * so adding or renaming a token is a breaking change even though the component
+ * API stays the same.
+ */
+export declare const EDITOR_LETTER_SPACING_STEPS: readonly [{
+    readonly token: "tracking-[-1px]";
+    readonly px: -1;
+}, {
+    readonly token: "tracking-[-0.5px]";
+    readonly px: -0.5;
+}, {
+    readonly token: "tracking-[-0.25px]";
+    readonly px: -0.25;
+}, {
+    readonly token: null;
+    readonly px: 0;
+}, {
+    readonly token: "tracking-[0.25px]";
+    readonly px: 0.25;
+}, {
+    readonly token: "tracking-[0.5px]";
+    readonly px: 0.5;
+}, {
+    readonly token: "tracking-[1px]";
+    readonly px: 1;
+}, {
+    readonly token: "tracking-[1.5px]";
+    readonly px: 1.5;
+}, {
+    readonly token: "tracking-[2px]";
+    readonly px: 2;
+}];
+/**
+ * The letter spacing as the editor needs it: the Tailwind class itself, so the
+ * consumer can put the model value straight on the element it styles. The
+ * default step is `null` on the model, not a member of this type.
+ */
+export type EditorLetterSpacingValue = NonNullable<(typeof EDITOR_LETTER_SPACING_STEPS)[number]['token']>;
+/** Overridable copy of the value readout. Every key is optional. */
+export interface EditorLetterSpacingMessages {
+    /** Unit shown behind the value. Defaults to `'px'`. */
+    unit?: string;
+    /** Decimal separator of the readout. Defaults to the Dutch `','`. */
+    decimalSeparator?: string;
+}
+export interface NexxtEditorLetterSpacingProps {
+    /**
+     * Header text of the settings block. Defaults to the Dutch
+     * `'Letterafstand'`; 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?: EditorLetterSpacingMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtEditorLetterSpacingProps & {
+    /**
+     * The selected letter spacing, as the Tailwind class to apply. `null` -- also
+     * what an unset model is -- is the default step: no class at all, zero.
+     */
+    modelValue?: EditorLetterSpacingValue | null;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: EditorLetterSpacingValue | null) => any;
+    pointerup: (event: PointerEvent) => any;
+}, string, import('vue').PublicProps, Readonly<NexxtEditorLetterSpacingProps & {
+    /**
+     * The selected letter spacing, as the Tailwind class to apply. `null` -- also
+     * what an unset model is -- is the default step: no class at all, zero.
+     */
+    modelValue?: EditorLetterSpacingValue | null;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: EditorLetterSpacingValue | null) => any) | undefined;
+    onPointerup?: ((event: PointerEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,104 @@
+/**
+ * The steps the slider can land on, as the class they are stored as and the
+ * pixels that class is. The `leading-*` classes are Tailwind's spacing scale
+ * (calc of `--spacing`, 4px a step), so `leading-6` really is 24px -- and a
+ * line height set here does not scale with the font size; that is the deal the
+ * fixed steps make, and nothing here tries to compensate for it.
+ *
+ * The first step is no class at all: the element keeps its own line height.
+ * It has no px of its own, so the readout names it instead of measuring it.
+ *
+ * The consumer stores these classes and lists them in an `@source inline` rule,
+ * so adding or renaming a token is a breaking change even though the component
+ * API stays the same.
+ */
+export declare const EDITOR_LINE_HEIGHT_STEPS: readonly [{
+    readonly token: null;
+    readonly px: null;
+}, {
+    readonly token: "leading-3";
+    readonly px: 12;
+}, {
+    readonly token: "leading-4";
+    readonly px: 16;
+}, {
+    readonly token: "leading-5";
+    readonly px: 20;
+}, {
+    readonly token: "leading-6";
+    readonly px: 24;
+}, {
+    readonly token: "leading-7";
+    readonly px: 28;
+}, {
+    readonly token: "leading-8";
+    readonly px: 32;
+}, {
+    readonly token: "leading-9";
+    readonly px: 36;
+}, {
+    readonly token: "leading-10";
+    readonly px: 40;
+}, {
+    readonly token: "leading-11";
+    readonly px: 44;
+}, {
+    readonly token: "leading-12";
+    readonly px: 48;
+}, {
+    readonly token: "leading-14";
+    readonly px: 56;
+}, {
+    readonly token: "leading-16";
+    readonly px: 64;
+}];
+/**
+ * The line height as the editor needs it: the Tailwind class itself, so the
+ * consumer can put the model value straight on the element it styles. The
+ * default step is `null` on the model, not a member of this type.
+ */
+export type EditorLineHeightValue = NonNullable<(typeof EDITOR_LINE_HEIGHT_STEPS)[number]['token']>;
+/** Overridable copy of the value readout. Every key is optional. */
+export interface EditorLineHeightMessages {
+    /** Unit shown behind the value. Defaults to `'px'`. */
+    unit?: string;
+    /**
+     * Readout of the first step, no class, which has no px size. Defaults to
+     * the Dutch `'Standaard'`.
+     */
+    default?: string;
+}
+export interface NexxtEditorLineHeightProps {
+    /**
+     * Header text of the settings block. Defaults to the Dutch
+     * `'Regelafstand'`; 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?: EditorLineHeightMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtEditorLineHeightProps & {
+    /**
+     * The selected line height, as the Tailwind class to apply. `null` -- also
+     * what an unset model is -- is the default step: no class at all.
+     */
+    modelValue?: EditorLineHeightValue | null;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: EditorLineHeightValue | null) => any;
+    pointerup: (event: PointerEvent) => any;
+}, string, import('vue').PublicProps, Readonly<NexxtEditorLineHeightProps & {
+    /**
+     * The selected line height, as the Tailwind class to apply. `null` -- also
+     * what an unset model is -- is the default step: no class at all.
+     */
+    modelValue?: EditorLineHeightValue | null;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: EditorLineHeightValue | null) => any) | undefined;
+    onPointerup?: ((event: PointerEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/organisms/ColorPicker/ColorPicker.vue.d.ts

@@ -14,13 +14,22 @@ export interface NexxtColorPickerProps {
     suggestions?: ColorSuggestions;
     /** Accessible and visible label for the suggestions. */
     suggestionsLabel?: string;
+    /**
+     * Text shown in the trigger in place of the formatted colour, for a value that has a name of
+     * its own, such as a theme role. Only shown while a colour is set.
+     */
+    valueLabel?: string;
 }
+type __VLS_Slots = {
+    /** Named colours a wrapper offers next to the free picker; rendered above the suggestions. */
+    presets?(): unknown;
+};
 type __VLS_Props = NexxtColorPickerProps;
 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;
@@ -33,5 +42,11 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {},
     suggestions: ColorSuggestions;
     suggestionsLabel: string;
 }, {}, {}, {}, 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

@@ -14,7 +14,7 @@ export type { EditorAlignItemsMessages, EditorAlignItemsValue, } from './compone
 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';
+export type { EditorColorLiteralValue, EditorColorMessages, EditorColorProperty, EditorColorRole, EditorColorRoleValue, EditorColorThemeRole, EditorColorValue, } from './components/editor/molecules/EditorColor/EditorColor.vue';
 export type { EditorBorderMessages, EditorBorderWidth, } from './components/editor/molecules/EditorBorder/EditorBorder.vue';
 export type { EditorHeadingTypeMessages, EditorHeadingTypeValue, } from './components/editor/molecules/EditorHeadingType/EditorHeadingType.vue';
 export { EDITOR_RADIUS_STEPS } from './components/editor/molecules/EditorRadius/EditorRadius.vue';
@@ -23,6 +23,10 @@ export type { EditorTextAlignMessages, EditorTextAlignValue, } from './component
 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 { EDITOR_LINE_HEIGHT_STEPS } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue';
+export type { EditorLineHeightMessages, EditorLineHeightValue, } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue';
+export { EDITOR_LETTER_SPACING_STEPS } from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue';
+export type { EditorLetterSpacingMessages, EditorLetterSpacingValue, } from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.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';
@@ -50,6 +54,8 @@ 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 NexxtEditorLetterSpacing } from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue';
+export { default as NexxtEditorLineHeight } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.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';