@nexxtmove/ui 1.21.0 → 1.23.0

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

@@ -0,0 +1,80 @@
+/**
+ * The CSS property the chosen colour is written to. It is the prefix of the
+ * Tailwind class the model carries, so it decides whether the colour becomes a
+ * background or a text colour. `border` is deliberately not offered: a border
+ * is colour plus width, and that pair gets a component of its own.
+ */
+export type EditorColorProperty = 'bg' | '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.
+ */
+export type EditorColorValue = `${EditorColorProperty}-[#${string}]`;
+/** Overridable copy of the picker. Every key is optional. */
+export interface EditorColorMessages {
+    /** Text shown while no colour is set. Defaults to `'Kies kleur...'`. */
+    placeholder?: string;
+}
+export interface NexxtEditorColorProps {
+    /**
+     * Header text of the settings block. Defaults to the Dutch `'Kleur'`; 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 picker.
+     * The switch state is the `enabled` model; the colour itself is kept while
+     * the block is collapsed.
+     */
+    switchable?: boolean;
+    /**
+     * The prefix of the class that is written: `'bg'` for a background colour,
+     * `'text'` for a text colour. Changing it rewrites the current value, so the
+     * model never disagrees with this prop.
+     */
+    property?: EditorColorProperty;
+    /**
+     * Copy of the picker. Merged per key, so overriding one key keeps the
+     * defaults of the others. Copy is never translated inside the component.
+     */
+    messages?: EditorColorMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+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.
+     */
+    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: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.
+     */
+    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:enabled"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,75 @@
+/**
+ * The heading levels the editor offers, in the order they are listed. The level
+ * is what the option shows -- its label and its `h1`..`h6` icon -- and the size
+ * is what the model carries. The sizes are Tailwind's default scale on purpose,
+ * not the theme's `heading-*` utilities: this value is data the editor stores
+ * and puts back on an element, so it has to be a class every consumer resolves.
+ */
+declare const HEADING_LEVELS: readonly [{
+    readonly level: 1;
+    readonly size: "text-4xl";
+}, {
+    readonly level: 2;
+    readonly size: "text-3xl";
+}, {
+    readonly level: 3;
+    readonly size: "text-2xl";
+}, {
+    readonly level: 4;
+    readonly size: "text-xl";
+}, {
+    readonly level: 5;
+    readonly size: "text-lg";
+}, {
+    readonly level: 6;
+    readonly size: "text-base";
+}];
+/**
+ * The heading as the editor needs it: the Tailwind font-size class itself, so
+ * the consumer can put the model value straight on the element it styles.
+ * Weight is deliberately not part of it -- that becomes a setting of its own.
+ */
+export type EditorHeadingTypeValue = (typeof HEADING_LEVELS)[number]['size'];
+/** Overridable copy for the six options. Every key is optional. */
+export interface EditorHeadingTypeMessages {
+    /** Label of the `h1` option. Defaults to `'Heading 1'`. */
+    h1?: string;
+    /** Label of the `h2` option. Defaults to `'Heading 2'`. */
+    h2?: string;
+    /** Label of the `h3` option. Defaults to `'Heading 3'`. */
+    h3?: string;
+    /** Label of the `h4` option. Defaults to `'Heading 4'`. */
+    h4?: string;
+    /** Label of the `h5` option. Defaults to `'Heading 5'`. */
+    h5?: string;
+    /** Label of the `h6` option. Defaults to `'Heading 6'`. */
+    h6?: string;
+}
+export interface NexxtEditorHeadingTypeProps {
+    /**
+     * Header text of the settings block. Defaults to the Dutch `'Type'`; the
+     * library has no i18n layer, so a consumer in another language passes its
+     * own copy in.
+     */
+    label?: string;
+    /**
+     * Labels of the six options. The defaults use the English term "Heading",
+     * as the Dutch design in Figma does, and are merged per key, so overriding
+     * one label keeps the defaults of the others. Copy is never translated
+     * inside the component.
+     */
+    messages?: EditorHeadingTypeMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtEditorHeadingTypeProps & {
+    /** The selected heading, as the Tailwind font-size class to apply. */
+    modelValue: EditorHeadingTypeValue;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: "text-4xl" | "text-3xl" | "text-2xl" | "text-xl" | "text-lg" | "text-base") => any;
+}, string, import('vue').PublicProps, Readonly<NexxtEditorHeadingTypeProps & {
+    /** The selected heading, as the Tailwind font-size class to apply. */
+    modelValue: EditorHeadingTypeValue;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: "text-4xl" | "text-3xl" | "text-2xl" | "text-xl" | "text-lg" | "text-base") => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -1,7 +1,13 @@
-import { default as Icon } from '../../atoms/Icon/Icon.vue';
+import { default as Icon, NexxtIconName } from '../../atoms/Icon/Icon.vue';
 export type SelectOption = {
     label: string;
     value: string | number;
+    /**
+     * Icon rendered before the option's label in the list, and in the field
+     * while the option is selected. Optional; an explicit `leftIcon` on the
+     * field wins over it.
+     */
+    icon?: NexxtIconName;
 } | string;
 interface NexxtSelectProps {
     /** Options to choose from; plain strings or `{ label, value }` objects. */
@@ -18,6 +24,13 @@ interface NexxtSelectProps {
     leftIcon?: InstanceType<typeof Icon>['name'];
     /** Mark the field as required (renders an asterisk next to the label). */
     required?: boolean;
+    /**
+     * Accessible name of the field, for when it is labelled by something outside
+     * the component and `label` would duplicate that copy on screen. Lands on the
+     * combobox itself, which a fallthrough attribute cannot reach: the component
+     * root is the wrapper around it.
+     */
+    ariaLabel?: string;
 }
 type __VLS_Props = NexxtSelectProps;
 type __VLS_ModelProps = {

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

@@ -20,11 +20,11 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {},
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    placeholder: string;
-    fullWidth: boolean;
     matchWidth: boolean;
+    placeholder: string;
     showAlpha: boolean;
     formats: ColorFormat[];
+    fullWidth: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/index.d.ts

@@ -8,6 +8,8 @@ export type { NexxtTabItem } from './components/molecules/Tabs/Tabs.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 { EditorHeadingTypeMessages, EditorHeadingTypeValue, } from './components/editor/molecules/EditorHeadingType/EditorHeadingType.vue';
 export type { EditorRadiusMessages, EditorRadiusValue, } from './components/editor/molecules/EditorRadius/EditorRadius.vue';
 export type { EditorJustifyContentMessages, EditorJustifyContentValue, } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue';
 export type { EditorPaddingMessages } from './components/editor/molecules/EditorPadding/EditorPadding.vue';
@@ -30,11 +32,13 @@ 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 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 NexxtEditorRadius } from './components/editor/molecules/EditorRadius/EditorRadius.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';
 export { default as NexxtEnergyLabel } from './components/atoms/EnergyLabel/EnergyLabel.vue';
 export { default as NexxtFloatingPanel } from './components/atoms/FloatingPanel/FloatingPanel.vue';