@nexxtmove/ui 1.24.0 → 1.26.0

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

@@ -0,0 +1,98 @@
+/**
+ * The widths the slider can land on: the Tailwind class and the pixels it
+ * renders. These are Tailwind's own defaults (`border` is 1px, then 2, 4 and 8)
+ * rather than theme tokens -- the theme defines no border-width scale, so
+ * stepping over arbitrary integers would produce classes with no CSS behind
+ * them.
+ */
+declare const BORDER_STEPS: readonly [{
+    readonly class: "border";
+    readonly px: 1;
+}, {
+    readonly class: "border-2";
+    readonly px: 2;
+}, {
+    readonly class: "border-4";
+    readonly px: 4;
+}, {
+    readonly class: "border-8";
+    readonly px: 8;
+}];
+/** The width part of the model value, as the Tailwind class itself. */
+export type EditorBorderWidth = (typeof BORDER_STEPS)[number]['class'];
+/** Overridable copy of the readout and the picker. Every key is optional. */
+export interface EditorBorderMessages {
+    /** Unit shown behind the width. Defaults to `'px'`. */
+    unit?: string;
+    /** Text shown while no colour is set. Defaults to `'Kies kleur...'`. */
+    placeholder?: string;
+    /** Accessible name of the width slider. Defaults to `'Dikte'`. */
+    width?: string;
+}
+export interface NexxtEditorBorderProps {
+    /**
+     * Header text of the settings block. Defaults to the Dutch `'Rand'`; the
+     * library has no i18n layer, so a consumer in another language passes its own
+     * copy in.
+     */
+    label?: string;
+    /**
+     * Render a switch next to the label that collapses and expands the controls.
+     * Defaults to `true`: a border is the kind of setting that is off as often as
+     * it is on, so turning it off is part of the control rather than an extra.
+     * The switch state is the `enabled` model; the width and the colour are kept
+     * while the block is collapsed.
+     */
+    switchable?: boolean;
+    /**
+     * Copy of the readout and the picker. Merged per key, so overriding one key
+     * keeps the defaults of the others. Copy is never translated inside the
+     * component.
+     */
+    messages?: EditorBorderMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtEditorBorderProps & {
+    /**
+     * The border as the editor needs it: one class string that carries both halves
+     * of the setting -- a width class, a space, and a `border-[#hex]` colour class,
+     * as in `'border-2 border-[#1777EA]'`. Either half may be missing on read and
+     * the two may arrive in any order; a change always writes the width first.
+     * Tokens this component does not own are dropped by that rewrite.
+     *
+     * 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.
+     */
+    modelValue: string;
+    /** Open state of the block. Only has an effect when `switchable` is `true`. */
+    enabled?: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    "update:enabled": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<NexxtEditorBorderProps & {
+    /**
+     * The border as the editor needs it: one class string that carries both halves
+     * of the setting -- a width class, a space, and a `border-[#hex]` colour class,
+     * as in `'border-2 border-[#1777EA]'`. Either half may be missing on read and
+     * the two may arrive in any order; a change always writes the width first.
+     * Tokens this component does not own are dropped by that rewrite.
+     *
+     * 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.
+     */
+    modelValue: string;
+    /** Open state of the block. Only has an effect when `switchable` is `true`. */
+    enabled?: boolean;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:enabled"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/molecules/PageCard/PageCard.vue.d.ts

@@ -0,0 +1,42 @@
+import { NexxtIconName } from '../../atoms/Icon/Icon.vue';
+import { NexxtPageMockupType } from '../PageMockup/PageMockup.vue';
+export interface NexxtPageCardProps {
+    /** Page name, shown in the footer. Truncated on one line. */
+    title: string;
+    /** Icon for the page type, shown before the title. */
+    icon?: NexxtIconName;
+    /** Draws the sketch for this page type in the preview area. The `preview` slot wins when both are given. */
+    mockup?: NexxtPageMockupType;
+    /** Lays a full-card button over the content that emits `select`. Off keeps the card inert. */
+    selectable?: boolean;
+    /** Whether this card is the current one: draws the blue border. Only does something with `selectable`. */
+    selected?: boolean;
+    /** The card is being dragged: dims it and draws the blue border, so the list shows where it came from. */
+    dragging?: boolean;
+}
+export type NexxtPageCardSlots = {
+    /** The preview area above the footer, for a mockup or thumbnail of the page. Empty shows a plain surface. */
+    preview?(): unknown;
+    /** Right side of the footer, for a menu. Kept above the select button so a press there never selects. */
+    actions?(): unknown;
+};
+type __VLS_Slots = NexxtPageCardSlots;
+declare const __VLS_base: import('vue').DefineComponent<NexxtPageCardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: () => any;
+}, string, import('vue').PublicProps, Readonly<NexxtPageCardProps> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {
+    selected: boolean;
+    icon: NexxtIconName;
+    mockup: NexxtPageMockupType;
+    selectable: boolean;
+    dragging: boolean;
+}, {}, {}, {}, 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/components/molecules/PageMockup/PageMockup.vue.d.ts

@@ -0,0 +1,9 @@
+export interface NexxtPageMockupProps {
+    /** Which kind of proposal page to sketch. */
+    type: NexxtPageMockupType;
+}
+export declare const PAGE_MOCKUP_TYPES: readonly ["introduction", "about", "valuation", "services", "packages", "references", "reviews", "other"];
+export type NexxtPageMockupType = (typeof PAGE_MOCKUP_TYPES)[number];
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtPageMockupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NexxtPageMockupProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/molecules/PageTypeTile/PageTypeTile.vue.d.ts

@@ -0,0 +1,17 @@
+import { NexxtIconName } from '../../atoms/Icon/Icon.vue';
+export interface NexxtPageTypeTileProps {
+    /** What the tile stands for, e.g. a page type. Shown under the icon. */
+    label: string;
+    icon: NexxtIconName;
+    /** The tile is being dragged: draws the blue border. The consumer makes it draggable. */
+    dragging?: boolean;
+}
+declare const __VLS_export: import('vue').DefineComponent<NexxtPageTypeTileProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: () => any;
+}, string, import('vue').PublicProps, Readonly<NexxtPageTypeTileProps> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {
+    dragging: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/molecules/TemplateCard/TemplateCard.vue.d.ts

@@ -38,10 +38,10 @@ declare const __VLS_base: import('vue').DefineComponent<NexxtTemplateCardProps,
     image: string;
     messages: Partial<Record<NexxtTemplateCardContentFeature, string>>;
     selected: boolean;
+    selectable: boolean;
     disabled: boolean;
     subtitle: string;
     contentFeatures: NexxtTemplateCardContentFeature[];
-    selectable: boolean;
     checkmark: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/index.d.ts

@@ -5,10 +5,13 @@ export type { EnergyLabelLetter } from './components/atoms/EnergyLabel/EnergyLab
 export type { IconType, NexxtIconName } from './components/atoms/Icon/Icon.vue';
 export type { CustomIconName } from './components/atoms/Icon/customIcons';
 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 { EditorAlignItemsMessages, EditorAlignItemsValue, } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.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 { EditorBorderMessages, EditorBorderWidth, } from './components/editor/molecules/EditorBorder/EditorBorder.vue';
 export type { EditorHeadingTypeMessages, EditorHeadingTypeValue, } from './components/editor/molecules/EditorHeadingType/EditorHeadingType.vue';
 export type { EditorRadiusMessages, EditorRadiusValue, } from './components/editor/molecules/EditorRadius/EditorRadius.vue';
 export type { EditorTextAlignMessages, EditorTextAlignValue, } from './components/editor/molecules/EditorTextAlign/EditorTextAlign.vue';
@@ -33,6 +36,7 @@ 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 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';
@@ -52,7 +56,10 @@ export { default as NexxtInputSelect } from './components/molecules/InputSelect/
 export { default as NexxtLoader } from './components/atoms/Loader/Loader.vue';
 export { default as NexxtModal } from './components/organisms/Modal/Modal.vue';
 export { default as NexxtModalFooter } from './components/molecules/ModalFooter/ModalFooter.vue';
+export { default as NexxtPageCard } from './components/molecules/PageCard/PageCard.vue';
 export { default as NexxtPageContainer } from './components/molecules/PageContainer/PageContainer.vue';
+export { default as NexxtPageMockup } from './components/molecules/PageMockup/PageMockup.vue';
+export { default as NexxtPageTypeTile } from './components/molecules/PageTypeTile/PageTypeTile.vue';
 export { default as NexxtPagination } from './components/molecules/Pagination/Pagination.vue';
 export { default as NexxtPresenceIndicator } from './components/atoms/PresenceIndicator/PresenceIndicator.vue';
 export { default as NexxtProgressBar } from './components/organisms/ProgressBar/ProgressBar.vue';