@nexxtmove/ui 1.36.0 → 1.38.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/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/molecules/Tree/Tree.vue.d.ts

@@ -6,12 +6,35 @@ export interface NexxtTreeNode {
     icon?: NexxtIconName;
     /** A node with children gets a chevron and can be folded. */
     children?: NexxtTreeNode[];
+    /** Whether this node accepts drops when it currently has no children. */
+    canHaveChildren?: boolean;
+    /** Whether this node can be dragged when the tree's `draggable` prop is enabled. */
+    draggable?: boolean;
+}
+export interface NexxtTreeMove {
+    /** The node being moved. */
+    id: string;
+    /** The node that will contain the moved node, or `null` for the tree root. */
+    parentId: string | null;
+    /** The zero-based position in the target parent's children. */
+    index: number;
 }
 export interface NexxtTreeProps {
     /** The top-level nodes; nest `children` for deeper levels. */
     nodes: NexxtTreeNode[];
     /** Accessible name for the tree, e.g. the heading above it. */
     label: string;
+    /** Enables native drag-and-drop for rows and emits the intended new position. */
+    draggable?: boolean;
+    /**
+     * Decides per spot whether the dragged node may land there, on top of the built-in rules (no
+     * drop into its own subtree, only into nodes that can have children). Gets the same shape as
+     * the `move` payload. A refused spot shows no ghost row and drops nothing, like letting go
+     * outside the tree. It runs on every `dragover` — which the browser keeps firing while the
+     * pointer rests — and on every touch move, so keep it cheap and pure: the same spot must always
+     * get the same answer.
+     */
+    canDrop?: (target: NexxtTreeMove) => boolean;
 }
 export type NexxtTreeSlots = {
     /** Actions at the end of a row, e.g. a delete button. Hidden until the row is hovered or holds focus, and always shown on a coarse pointer. Clicks and keys inside it never reach the tree, so they neither select the row nor move focus. Put `tabindex` on every focusable element in it: it is `0` only on the row that is the tree's tab stop, which keeps one extra Tab stop for the whole tree. Keep the content at most 24px high, or the rows grow. */
@@ -31,9 +54,11 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     focusNode: (id: string) => Promise<boolean>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    move: (move: NexxtTreeMove) => any;
     "update:selected": (value: string | null) => any;
     "update:collapsed": (value: string[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onMove?: ((move: NexxtTreeMove) => any) | undefined;
     "onUpdate:selected"?: ((value: string | null) => any) | undefined;
     "onUpdate:collapsed"?: ((value: string[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/molecules/Tree/tree-drop.d.ts

@@ -0,0 +1,81 @@
+import { NexxtTreeNode } from './Tree.vue';
+/** A visible row of the tree, in document order. */
+export interface TreeRow {
+    node: NexxtTreeNode;
+    depth: number;
+    parentId: string | null;
+    expandable: boolean;
+    canHaveChildren: boolean;
+    draggable: boolean;
+    expanded: boolean;
+    /** One-based position among its siblings. */
+    position: number;
+    setSize: number;
+}
+export type DropMarker = 'before' | 'inside' | 'after';
+export interface TreeDrop {
+    /** The row the pointer was over when this spot was picked. */
+    rowId: string;
+    parentId: string | null;
+    index: number;
+    marker: DropMarker;
+}
+/**
+ * Where a row sits with the ghost row taken out, relative to the top of the tree. `bottom` takes
+ * in the gap below the row: a gap belongs to the row above it, so moving across it never reads
+ * as leaving the tree.
+ */
+export interface RestSlot {
+    id: string;
+    top: number;
+    height: number;
+    bottom: number;
+}
+export interface DropLayout {
+    slots: RestSlot[];
+    /** The ghost row as it is laid out now, gap included; `null` while there is none. */
+    ghost: {
+        top: number;
+        bottom: number;
+    } | null;
+}
+/** `keep` leaves the current spot as it is: the pointer is on the ghost row, or there are no rows. */
+export type DropHit = {
+    kind: 'keep';
+} | {
+    kind: 'row';
+    id: string;
+    ratio: number;
+};
+export declare const containsNode: (node: NexxtTreeNode, id: string) => boolean;
+export declare const findNode: (nodes: NexxtTreeNode[], id: string) => NexxtTreeNode | null;
+/**
+ * Reads the pointer against where the rows land without the ghost row, not against what is under
+ * it now. The ghost pushes rows aside, so reading what is under the pointer would find a shifted
+ * row or the ghost itself, pick another spot, move the ghost and flicker. Measured this way the
+ * same pointer always gives the same answer, however the ghost moves.
+ *
+ * @param layout - The rows at rest and the ghost row as it is laid out now.
+ * @param y - The pointer, relative to the top of the tree.
+ */
+export declare const hitTest: ({ slots, ghost }: DropLayout, y: number) => DropHit;
+/**
+ * The spot a pointer at `ratio` of `row` stands for. A group splits into before (top 30%),
+ * inside and after (bottom 30%), a leaf into before and after at the middle. Inside always lands
+ * as the first child, right under the group row, so the ghost shows up next to the pointer. The
+ * dragged node and everything inside it are no target at all.
+ */
+export declare const resolveDrop: (row: TreeRow, ratio: number, moving: NexxtTreeNode) => TreeDrop | null;
+/** A spot where the dragged row already is: dropping there changes nothing, so it is no target. */
+export declare const isNoOp: (drop: TreeDrop, source: TreeRow) => boolean;
+/** Two spots are the same when they land the node in the same place, whichever row picked them. */
+export declare const samePlace: (a: TreeDrop | null, b: TreeDrop | null) => boolean;
+/**
+ * Where the ghost row goes among the visible rows, and how deep. Right before the row of the
+ * sibling now at `index`, or after the last visible row inside the parent when `index` is past
+ * its last child. `null` for a spot inside a collapsed group: that group row marks itself.
+ */
+export declare const ghostSlot: (rows: TreeRow[], nodes: NexxtTreeNode[], drop: TreeDrop | null) => {
+    at: number;
+    depth: number;
+} | null;

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export type { NexxtTabItem } from './components/molecules/Tabs/Tabs.vue';
 export type { NexxtPageCardProps, NexxtPageCardSlots, } from './components/molecules/PageCard/PageCard.vue';
 export type { NexxtPageMockupType } from './components/molecules/PageMockup/PageMockup.vue';
 export type { NexxtPickerGroupData, NexxtPickerItemData, } from './components/molecules/PickerList/PickerList.vue';
-export type { NexxtTreeNode, NexxtTreeProps, NexxtTreeSlots, } from './components/molecules/Tree/Tree.vue';
+export type { NexxtTreeMove, NexxtTreeNode, NexxtTreeProps, NexxtTreeSlots, } from './components/molecules/Tree/Tree.vue';
 export type { NexxtPlaceholderGroup, NexxtPlaceholderInputMessages, NexxtPlaceholderInputProps, } from './components/molecules/PlaceholderInput/PlaceholderInput.vue';
 export type { EditorAlignItemsMessages, EditorAlignItemsValue, } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue';
 export type { EditorBackgroundSizeMessages, EditorBackgroundSizeValue, } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.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';