@nexxtmove/ui 1.24.0 → 1.25.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/index.d.ts

@@ -9,6 +9,7 @@ export type { EditorAlignItemsMessages, EditorAlignItemsValue, } from './compone
 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 +34,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';