@nexxtmove/ui 1.35.0 → 1.36.0

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/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';