@nexxtmove/ui 1.54.0 → 2.1.0

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

@@ -74,6 +74,16 @@ export interface NexxtEditorColorProps {
      * 8-digit hex is left out. Without roles the section is not rendered.
      */
     themeRoles?: EditorColorThemeRole[];
+    /**
+     * Offer an opacity slider in the picker. A colour picked below full opacity is
+     * written as an 8-digit hex (`bg-[#1777ea80]`); a fully opaque one keeps the
+     * 6-digit form. The slider is hidden while a theme role is selected: a role
+     * class carries no opacity. Off by default, in which case a stored 8-digit hex
+     * is shown opaque and only replaced once a new colour is picked. Turning it off
+     * while a translucent colour is set does write at once: the picker drops the
+     * alpha and the model gets the opaque 6-digit hex.
+     */
+    showAlpha?: boolean;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -96,8 +96,8 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorFontSizePro
     modelValue?: EditorFontSizeValue | null;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: "text-xs" | "text-4xl" | "text-3xl" | "text-2xl" | "text-xl" | "text-lg" | "text-base" | "text-sm" | "text-5xl" | "text-6xl" | "text-7xl" | "text-8xl" | "text-9xl" | null) => any;
-    reset: () => any;
     pointerup: (event: PointerEvent) => any;
+    reset: () => any;
 }, string, import('vue').PublicProps, Readonly<NexxtEditorFontSizeProps & {
     /**
      * The chosen size, as the Tailwind class to apply. `null` -- also what an unset model is -- is no
@@ -112,6 +112,6 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorFontSizePro
     modelValue?: EditorFontSizeValue | null;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: "text-xs" | "text-4xl" | "text-3xl" | "text-2xl" | "text-xl" | "text-lg" | "text-base" | "text-sm" | "text-5xl" | "text-6xl" | "text-7xl" | "text-8xl" | "text-9xl" | null) => any) | undefined;
-    onReset?: (() => any) | undefined;
     onPointerup?: ((event: PointerEvent) => any) | undefined;
+    onReset?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -6,6 +6,11 @@ export interface NexxtColorPickerProps {
     error?: boolean;
     errorMessage?: string;
     required?: boolean;
+    /**
+     * Offer an opacity slider and accept colours below full opacity. Turning it
+     * off while the colour is translucent writes the opaque colour to the model
+     * at once.
+     */
     showAlpha?: boolean;
     formats?: ColorFormat[];
     fullWidth?: boolean;

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

@@ -86,11 +86,11 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     "onUpdate:search"?: ((value: string) => any) | undefined;
 }>, {
     width: number | string;
+    height: number | string;
     preview: boolean;
     collapsible: boolean;
     groups: NexxtPickerGroupData[];
     busy: boolean;
-    height: number | string;
     searchable: boolean;
     hidePreviewBelow: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,77 @@
+/**
+ * `full`: the bar; `toggle`: a round play/pause button in the corner, in the same style, with a
+ * mute button to its left on hover, focus or a tap.
+ */
+export type NexxtVideoControlsVariant = 'full' | 'toggle';
+/** Overridable copy. Every key is optional; the Dutch defaults are merged per key. */
+export interface NexxtVideoControlsMessages {
+    /** Name of the bar; gets the video's name. Defaults to `'Videobediening: {name}'`, or `'Videobediening'` without one. */
+    group?: (name: string) => string;
+    /** Defaults to `'Afspelen'`. */
+    play?: string;
+    /** Defaults to `'Pauzeren'`. */
+    pause?: string;
+    /** The play button after the end. Defaults to `'Opnieuw afspelen'`. */
+    replay?: string;
+    /** Name of the timeline slider. Defaults to `'Tijdlijn'`. */
+    timeline?: string;
+    /** Spoken value of the timeline. Defaults to `'{current} van {duration}'`, e.g. `'0:12 van 0:42'`. */
+    timeValue?: (current: string, duration: string) => string;
+    /** Spoken value of the timeline before the duration is known. Defaults to `'Duur nog onbekend'`. */
+    durationUnknown?: string;
+    /** Defaults to `'Geluid uit'`. */
+    mute?: string;
+    /** Defaults to `'Geluid aan'`. */
+    unmute?: string;
+    /** Name of the volume slider. Defaults to `'Volume'`. */
+    volume?: string;
+    /** Spoken value of the volume slider. Defaults to `'{percent} procent'`. */
+    volumeValue?: (percent: number) => string;
+    /** Spoken value of the volume slider while muted. Defaults to `'Gedempt'`. */
+    muted?: string;
+    /** Defaults to `'Volledig scherm'`. */
+    enterFullscreen?: string;
+    /** Defaults to `'Volledig scherm sluiten'`. */
+    exitFullscreen?: string;
+}
+export interface NexxtVideoControlsProps {
+    /**
+     * The video to control. Its state is read from its media events and written to it directly,
+     * so a parent listening to the same video always agrees. The controls position themselves
+     * absolutely: the video's parent needs `position: relative`.
+     */
+    target: HTMLVideoElement | null;
+    /**
+     * What goes full screen: the video's root, so these controls come along. Without it there is
+     * no full-screen button. Where the root cannot go full screen (iPhone Safari) the video's own
+     * native player opens instead.
+     */
+    fullscreenTarget?: HTMLElement | null;
+    /**
+     * `full`: the bar; `toggle`: a 32px play/pause button in the corner, with mute to its left on
+     * hover, focus or a tap. Both hide while playing by the same rules. Defaults to `full`.
+     */
+    variant?: NexxtVideoControlsVariant;
+    /** The video's name, for the name of the bar (or of the toggle's buttons). */
+    name?: string;
+    /** Hide the bar (or the toggle) after inactivity while the video plays. Off keeps it on show. Defaults to `true`. */
+    autoHide?: boolean;
+    /** Inactivity before the bar hides, in milliseconds. Defaults to `2500`. */
+    hideDelay?: number;
+    /** Copy of the buttons and sliders. Defaults are Dutch and are merged per key. */
+    messages?: NexxtVideoControlsMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtVideoControlsProps, {
+    focus: (options?: FocusOptions & {
+        focusVisible?: boolean;
+    }) => void;
+    show: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "visibility-change": (visible: boolean) => any;
+    "fullscreen-change": (fullscreen: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<NexxtVideoControlsProps> & Readonly<{
+    "onVisibility-change"?: ((visible: boolean) => any) | undefined;
+    "onFullscreen-change"?: ((fullscreen: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -1,24 +1,43 @@
-type __VLS_Props = {
+import { NexxtVideoControlsMessages } from '../VideoControls/VideoControls.vue';
+/**
+ * `full`: the NexxtVideoControls bar; `toggle`: only its round play/pause button;
+ * `none`: nothing visible, and a click on the video is left to the parent.
+ */
+export type NexxtVideoPlayerControls = 'full' | 'toggle' | 'none';
+/**
+ * Overridable copy: the player's own keys plus every key of NexxtVideoControlsMessages, which
+ * are passed on to the controls. Every key is optional; the Dutch defaults are merged per key.
+ */
+export interface NexxtVideoPlayerMessages extends NexxtVideoControlsMessages {
+    /** Shown when the video cannot be loaded. Defaults to `'De video kan niet worden geladen'`. */
+    error?: string;
+    /** Accessible name of the video when no `name` is given. Defaults to `'Video'`. */
+    video?: string;
+}
+export interface NexxtVideoPlayerProps {
+    /** URL of the video. */
     src: string;
+    /**
+     * Image shown before the video plays. With a poster nothing is preloaded (`preload="none"`);
+     * without one only the metadata is, so the first frame and the duration are there.
+     */
+    poster?: string;
+    /** The video's name: its accessible name and the name of the controls. */
+    name?: string;
+    /** Start playing on mount. Browsers only allow that without sound, so pair it with `muted`. */
     autoplay?: boolean;
+    /** Start without sound. Applied before an autoplay starts. */
     muted?: boolean;
-    showControls?: boolean;
+    /** Start again at the end. */
     loop?: boolean;
-    labels?: {
-        error?: string;
-        play?: string;
-        pause?: string;
-        mute?: string;
-        unmute?: string;
-        enterFullscreen?: string;
-        exitFullscreen?: string;
-        seek?: string;
-        video?: string;
-    };
-};
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
-    playing: import('vue').ShallowRef<boolean>;
-    muted: import('vue').ShallowRef<boolean>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+    /** Which controls to show. Defaults to `full`. */
+    controls?: NexxtVideoPlayerControls;
+    /** Copy of the player and its controls. Defaults are Dutch and are merged per key. */
+    messages?: NexxtVideoPlayerMessages;
+}
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtVideoPlayerProps, {
+    playing: import('vue').WritableComputedRef<boolean, boolean>;
+    muted: import('vue').WritableComputedRef<boolean, boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NexxtVideoPlayerProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/index.d.ts

@@ -6,6 +6,8 @@ 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 { NexxtVideoControlsMessages, NexxtVideoControlsProps, NexxtVideoControlsVariant, } from './components/organisms/VideoControls/VideoControls.vue';
+export type { NexxtVideoPlayerControls, NexxtVideoPlayerMessages, NexxtVideoPlayerProps, } from './components/organisms/VideoPlayer/VideoPlayer.vue';
 export type { NexxtComboboxGroup } from './components/organisms/ComboboxPanel/combobox-types';
 export type { NexxtPageCardProps, NexxtPageCardSlots, } from './components/molecules/PageCard/PageCard.vue';
 export type { NexxtPageMockupType } from './components/molecules/PageMockup/PageMockup.vue';
@@ -162,4 +164,5 @@ export { default as NexxtToaster } from './components/organisms/Toaster/Toaster.
 export { default as NexxtToggleGroup } from './components/molecules/ToggleGroup/ToggleGroup.vue';
 export { default as NexxtTooltip } from './components/atoms/Tooltip/Tooltip.vue';
 export { default as NexxtTree } from './components/molecules/Tree/Tree.vue';
+export { default as NexxtVideoControls } from './components/organisms/VideoControls/VideoControls.vue';
 export { default as NexxtVideoPlayer } from './components/organisms/VideoPlayer/VideoPlayer.vue';