nuxt-ui-tools 1.27.5 → 1.29.0

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.27.5",
+  "version": "1.29.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -137,6 +137,12 @@ function getPublicComponents(runtimeDir, options) {
       global: options.global,
       name: `${prefix}FilePreviewTools`
     },
+    // Media
+    {
+      filePath: `${runtimeDir}/media/components/video-player.vue`,
+      global: options.global,
+      name: `${prefix}VideoPlayer`
+    },
     // Form
     {
       filePath: `${runtimeDir}/form/components/root/form.vue`,
@@ -427,6 +433,7 @@ const publicRuntimeDomains = [
   "file-preview",
   "form",
   "i18n",
+  "media",
   "query-prefetch",
   "query-state",
   "shared",

package/dist/runtime/file-preview/components/renderers/audio-renderer.vue

@@ -3,9 +3,9 @@ import UIcon from "@nuxt/ui/components/Icon.vue";
 import { useMediaControls } from "@vueuse/core";
 import { computed, useTemplateRef } from "vue";
 import { useUiToolsLocale } from "../../../i18n/use-locale";
+import MediaControls from "../../../media/components/media-controls.vue";
 import { onFilePreviewKey } from "../../composables/use-file-preview-shell";
 import { formatFilePreviewDuration } from "../../utils/format";
-import MediaControls from "./media-controls.vue";
 const BARS = Array.from(
   { length: 28 },
   (_, index) => 18 + Math.abs(Math.sin(index * 1.3) * Math.cos(index * 0.4)) * 62

package/dist/runtime/file-preview/components/renderers/video-renderer.vue

@@ -1,12 +1,10 @@
 <script setup>
-import UIcon from "@nuxt/ui/components/Icon.vue";
-import { useFullscreen, useMediaControls, useTimeoutFn } from "@vueuse/core";
-import { computed, ref, useTemplateRef } from "vue";
+import { useTemplateRef } from "vue";
 import { useUiToolsLocale } from "../../../i18n/use-locale";
+import VideoPlayer from "../../../media/components/video-player.vue";
 import { onFilePreviewKey, useFilePreviewShell } from "../../composables/use-file-preview-shell";
 import { formatFilePreviewDuration } from "../../utils/format";
-import MediaControls from "./media-controls.vue";
-const props = defineProps({
+defineProps({
   file: { type: Object, required: true },
   url: { type: String, required: true },
   blob: { type: null, required: true },
@@ -15,96 +13,40 @@ const props = defineProps({
 const emit = defineEmits(["ready", "error"]);
 const { t } = useUiToolsLocale();
 const shell = useFilePreviewShell();
-const frame = useTemplateRef("frame");
-const video = useTemplateRef("video");
-const controls = useMediaControls(video, {
-  tracks: () => (props.file.file.tracks ?? []).map((track) => ({
-    default: track.default,
-    kind: track.kind ?? "subtitles",
-    label: track.label,
-    src: track.src,
-    srcLang: track.srcLang
-  }))
-});
-const fullscreen = useFullscreen(frame);
-const active = ref(true);
-const rest = useTimeoutFn(() => active.value = false, 2500);
-const started = computed(() => controls.playing.value || controls.currentTime.value > 0.05);
-const showControls = computed(() => !controls.playing.value || active.value);
-function wake() {
-  active.value = true;
-  rest.start();
-}
-function toggle() {
-  controls.playing.value = !controls.playing.value;
-  wake();
-}
-function handleMetadata() {
-  const element = video.value;
-  if (!element) return;
+const player = useTemplateRef("player");
+function handleReady(metadata) {
   emit("ready", [
-    { label: t("filePreview.fields.duration"), value: formatFilePreviewDuration(element.duration) },
+    {
+      label: t("filePreview.fields.duration"),
+      value: formatFilePreviewDuration(metadata.duration)
+    },
     {
       label: t("filePreview.fields.dimensions"),
-      value: `${element.videoWidth} \xD7 ${element.videoHeight} px`
+      value: `${metadata.width} \xD7 ${metadata.height} px`
     }
   ]);
 }
-function handleError() {
-  emit("error", { message: video.value?.error?.message || void 0, reason: "decode" });
+function handleError(error) {
+  emit("error", { message: error.message, reason: "decode" });
 }
 onFilePreviewKey([" ", "k", "m", "f"], (event) => {
-  if (event.key === "m") controls.muted.value = !controls.muted.value;
-  else if (event.key === "f") void fullscreen.toggle();
-  else toggle();
+  if (event.key === "m") player.value?.toggleMute();
+  else if (event.key === "f") player.value?.toggleFullscreen();
+  else player.value?.toggle();
 });
 </script>
 
 <template>
-  <div
-    ref="frame"
-    :class="['absolute inset-0 overflow-hidden bg-black', showControls ? '' : 'cursor-none']"
+  <VideoPlayer
+    ref="player"
+    :src="url"
+    :poster="file.file.poster"
+    :tracks="file.file.tracks"
+    :keyboard="false"
+    :compact="shell.narrow.value"
+    class="absolute inset-0"
     data-file-preview-video=""
-    @pointermove="wake"
-  >
-    <video
-      ref="video"
-      :src="url"
-      :poster="file.file.poster"
-      preload="metadata"
-      playsinline
-      class="size-full object-contain"
-      @click="toggle"
-      @dblclick="fullscreen.toggle()"
-      @loadedmetadata="handleMetadata"
-      @error="handleError"
-    />
-
-    <button
-      v-if="!started"
-      type="button"
-      class="absolute top-1/2 left-1/2 grid size-17 -translate-1/2 place-items-center rounded-full bg-black/55 ps-1 text-white transition hover:bg-black/70"
-      :aria-label="t('filePreview.media.play')"
-      data-file-preview-big-play=""
-      @click="toggle"
-    >
-      <UIcon name="i-lucide-play" class="size-7" />
-    </button>
-    <span
-      v-else-if="controls.waiting.value"
-      class="pointer-events-none absolute top-1/2 left-1/2 size-10 -translate-1/2 animate-spin rounded-full border-2 border-white/30 border-t-white"
-      aria-hidden="true"
-    />
-
-    <MediaControls
-      :class="[
-  'absolute inset-x-0 bottom-0 transition-opacity duration-200 motion-reduce:transition-none',
-  showControls ? 'opacity-100' : 'pointer-events-none opacity-0'
-]"
-      :controls="controls"
-      :fullscreen="fullscreen"
-      :compact="shell.narrow.value"
-      variant="video"
-    />
-  </div>
+    @ready="handleReady"
+    @error="handleError"
+  />
 </template>

package/dist/runtime/i18n/locales/en.js

@@ -748,6 +748,11 @@ export default defineUiToolsLocale({
         label: "Actions for {label}",
         labelAt: "Actions for row {position}"
       },
+      groups: {
+        empty: "Other",
+        select: "Select the whole group",
+        toggle: "Fold or unfold the group"
+      },
       selection: {
         selectAll: "Select all rows",
         selectRow: "Select {label}",

package/dist/runtime/i18n/locales/fr.js

@@ -748,6 +748,11 @@ export default defineUiToolsLocale({
         label: "Actions pour {label}",
         labelAt: "Actions pour la ligne {position}"
       },
+      groups: {
+        empty: "Autres",
+        select: "S\xE9lectionner tout le groupe",
+        toggle: "Replier ou d\xE9plier le groupe"
+      },
       selection: {
         selectAll: "S\xE9lectionner toutes les lignes",
         selectRow: "S\xE9lectionner {label}",

package/dist/runtime/i18n/types.d.ts

@@ -23,6 +23,13 @@ export interface UiToolsTableMessages {
         firstPage: string;
         lastPage: string;
     };
+    /** A row group's header. */
+    groups: {
+        /** The label of the group holding rows with no value. */
+        empty: string;
+        select: string;
+        toggle: string;
+    };
     /** Accessible names of the selection checkboxes. */
     selection: {
         selectAll: string;

package/dist/runtime/{file-preview/components/renderers → media/components}/media-controls.vue

@@ -3,9 +3,9 @@ import UButton from "@nuxt/ui/components/Button.vue";
 import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
 import USlider from "@nuxt/ui/components/Slider.vue";
 import { computed } from "vue";
-import { useUiToolsLocale } from "../../../i18n/use-locale";
-import { formatFilePreviewDuration } from "../../utils/format";
-import FilePreviewButton from "../shell/file-preview-button.vue";
+import FilePreviewButton from "../../file-preview/components/shell/file-preview-button.vue";
+import { formatFilePreviewDuration } from "../../file-preview/utils/format";
+import { useUiToolsLocale } from "../../i18n/use-locale";
 const RATES = [0.5, 0.75, 1, 1.25, 1.5, 2];
 const props = defineProps({
   controls: { type: null, required: true },

package/dist/runtime/media/components/video-player.d.vue.ts

@@ -0,0 +1,58 @@
+import type { VideoPlayerTrack } from '../types/media.js';
+type __VLS_Props = {
+    src: string;
+    poster?: string;
+    /** Read by assistive technology, and shown over the poster before playback starts. */
+    title?: string;
+    tracks?: readonly VideoPlayerTrack[];
+    /** Space or K plays and pauses, M mutes, F toggles full screen while the player has focus. */
+    keyboard?: boolean;
+    /** Drops the volume slider; by default the player compacts itself below 480 px. */
+    compact?: boolean;
+};
+declare function toggle(): void;
+declare function toggleMute(): void;
+declare function toggleFullscreen(): void;
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    caption?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    controls: import("@vueuse/core").UseMediaControlsReturn;
+    fullscreen: import("@vueuse/core").UseFullscreenReturn;
+    toggle: typeof toggle;
+    toggleMute: typeof toggleMute;
+    toggleFullscreen: typeof toggleFullscreen;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (metadata: {
+        duration: number;
+        width: number;
+        height: number;
+    }) => any;
+    error: (error: {
+        message?: string;
+    }) => any;
+    ended: () => any;
+    pause: () => any;
+    play: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReady?: ((metadata: {
+        duration: number;
+        width: number;
+        height: number;
+    }) => any) | undefined;
+    onError?: ((error: {
+        message?: string;
+    }) => any) | undefined;
+    onEnded?: (() => any) | undefined;
+    onPause?: (() => any) | undefined;
+    onPlay?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/runtime/media/components/video-player.vue

@@ -0,0 +1,155 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { useElementSize, useFullscreen, useMediaControls, useTimeoutFn } from "@vueuse/core";
+import { computed, ref, useTemplateRef, watch } from "vue";
+import { useUiToolsLocale } from "../../i18n/use-locale";
+import MediaControls from "./media-controls.vue";
+const {
+  src,
+  poster = void 0,
+  title = void 0,
+  tracks = [],
+  keyboard = true,
+  compact = void 0
+} = defineProps({
+  src: { type: String, required: true },
+  poster: { type: String, required: false },
+  title: { type: String, required: false },
+  tracks: { type: Array, required: false },
+  keyboard: { type: Boolean, required: false },
+  compact: { type: Boolean, required: false }
+});
+const emit = defineEmits(["ready", "error", "play", "pause", "ended"]);
+const { t } = useUiToolsLocale();
+const frame = useTemplateRef("frame");
+const video = useTemplateRef("video");
+const controls = useMediaControls(video, {
+  tracks: () => tracks.map((track) => ({
+    default: track.default,
+    kind: track.kind ?? "subtitles",
+    label: track.label,
+    src: track.src,
+    srcLang: track.srcLang
+  }))
+});
+const fullscreen = useFullscreen(frame);
+const { width } = useElementSize(frame);
+const active = ref(true);
+const rest = useTimeoutFn(() => active.value = false, 2500);
+const started = computed(() => controls.playing.value || controls.currentTime.value > 0.05);
+const showControls = computed(() => !controls.playing.value || active.value);
+const narrow = computed(() => compact ?? (width.value > 0 && width.value < 480));
+watch(controls.playing, (playing) => playing ? emit("play") : emit("pause"));
+watch(controls.ended, (ended) => ended && emit("ended"));
+function wake() {
+  active.value = true;
+  rest.start();
+}
+function toggle() {
+  controls.playing.value = !controls.playing.value;
+  wake();
+}
+function toggleMute() {
+  controls.muted.value = !controls.muted.value;
+  wake();
+}
+function toggleFullscreen() {
+  void fullscreen.toggle();
+}
+function handleMetadata() {
+  const element = video.value;
+  if (!element) return;
+  emit("ready", {
+    duration: element.duration,
+    width: element.videoWidth,
+    height: element.videoHeight
+  });
+}
+function handleError() {
+  emit("error", { message: video.value?.error?.message || void 0 });
+}
+function handleKey(event) {
+  if (!keyboard || event.target !== frame.value) return;
+  if (event.key === "m") toggleMute();
+  else if (event.key === "f") toggleFullscreen();
+  else if (event.key === " " || event.key === "k") toggle();
+  else return;
+  event.preventDefault();
+}
+defineExpose({ controls, fullscreen, toggle, toggleMute, toggleFullscreen });
+</script>
+
+<template>
+  <div
+    ref="frame"
+    :class="[
+  'group/video relative overflow-hidden bg-black outline-none focus-visible:ring-2 focus-visible:ring-primary/60',
+  showControls ? '' : 'cursor-none'
+]"
+    :tabindex="keyboard ? 0 : void 0"
+    :aria-label="title"
+    role="region"
+    data-video-player=""
+    @pointermove="wake"
+    @keydown="handleKey"
+  >
+    <video
+      ref="video"
+      :src="src"
+      :poster="poster"
+      :title="title"
+      preload="metadata"
+      playsinline
+      class="size-full object-contain"
+      @click="toggle"
+      @dblclick="toggleFullscreen"
+      @loadedmetadata="handleMetadata"
+      @error="handleError"
+    />
+
+    <Transition
+      enter-active-class="transition duration-200 ease-out motion-reduce:transition-none"
+      enter-from-class="opacity-0"
+      leave-active-class="transition duration-150 ease-in motion-reduce:transition-none"
+      leave-to-class="opacity-0"
+    >
+      <button
+        v-if="!started"
+        type="button"
+        class="absolute inset-0 grid place-items-center bg-linear-to-t from-black/45 via-black/10 to-transparent text-white"
+        :aria-label="t('filePreview.media.play')"
+        data-video-player-start=""
+        @click="toggle"
+      >
+        <span
+          class="grid size-16 place-items-center rounded-full bg-white/95 ps-1 text-black shadow-[0_12px_32px_-12px_rgba(0,0,0,0.6)] transition duration-200 ease-out group-hover/video:scale-105 motion-reduce:transition-none"
+        >
+          <UIcon name="i-lucide-play" class="size-7 fill-current" />
+        </span>
+        <span
+          v-if="title || $slots.caption"
+          class="absolute inset-x-0 bottom-0 truncate px-5 pb-4 text-start text-sm font-medium text-white/95"
+        >
+          <slot name="caption">{{ title }}</slot>
+        </span>
+      </button>
+    </Transition>
+    <span
+      v-if="started && controls.waiting.value"
+      class="pointer-events-none absolute top-1/2 left-1/2 size-10 -translate-1/2 animate-spin rounded-full border-2 border-white/30 border-t-white"
+      aria-hidden="true"
+    />
+
+    <MediaControls
+      v-if="started"
+      :class="[
+  'absolute inset-x-0 bottom-0 transition-opacity duration-200 motion-reduce:transition-none',
+  showControls ? 'opacity-100' : 'pointer-events-none opacity-0'
+]"
+      :controls="controls"
+      :fullscreen="fullscreen"
+      :compact="narrow"
+      variant="video"
+    />
+  </div>
+</template>

package/dist/runtime/media/components/video-player.vue.d.ts

@@ -0,0 +1,58 @@
+import type { VideoPlayerTrack } from '../types/media.js';
+type __VLS_Props = {
+    src: string;
+    poster?: string;
+    /** Read by assistive technology, and shown over the poster before playback starts. */
+    title?: string;
+    tracks?: readonly VideoPlayerTrack[];
+    /** Space or K plays and pauses, M mutes, F toggles full screen while the player has focus. */
+    keyboard?: boolean;
+    /** Drops the volume slider; by default the player compacts itself below 480 px. */
+    compact?: boolean;
+};
+declare function toggle(): void;
+declare function toggleMute(): void;
+declare function toggleFullscreen(): void;
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    caption?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    controls: import("@vueuse/core").UseMediaControlsReturn;
+    fullscreen: import("@vueuse/core").UseFullscreenReturn;
+    toggle: typeof toggle;
+    toggleMute: typeof toggleMute;
+    toggleFullscreen: typeof toggleFullscreen;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (metadata: {
+        duration: number;
+        width: number;
+        height: number;
+    }) => any;
+    error: (error: {
+        message?: string;
+    }) => any;
+    ended: () => any;
+    pause: () => any;
+    play: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReady?: ((metadata: {
+        duration: number;
+        width: number;
+        height: number;
+    }) => any) | undefined;
+    onError?: ((error: {
+        message?: string;
+    }) => any) | undefined;
+    onEnded?: (() => any) | undefined;
+    onPause?: (() => any) | undefined;
+    onPlay?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/runtime/media/index.d.ts

@@ -0,0 +1 @@
+export type * from './types';

package/dist/runtime/media/types/index.d.ts

@@ -0,0 +1 @@
+export type * from './media';

package/dist/runtime/media/types/media.d.ts

@@ -0,0 +1,8 @@
+/** A text track of a video: subtitles or captions, in one language. */
+export interface VideoPlayerTrack {
+    src: string;
+    srcLang: string;
+    label: string;
+    kind?: TextTrackKind;
+    default?: boolean;
+}

package/dist/runtime/table/components/grid/grid-renderer.vue

@@ -11,6 +11,7 @@ import { mergeDataListUiClass, resolveTableRowId } from "../../utils";
 import DataListErrorState from "../data-list/data-list-error-state.vue";
 import ProgressLine from "../layout/progress-line.vue";
 import TableEmptyState from "../table/table-empty-state.vue";
+import TableGroupHeader from "../table/table-group-header.vue";
 import OverlayInsetSpacer from "../utils/overlay-inset-spacer.vue";
 import GridCard from "./grid-card.vue";
 import GridSkeleton from "./grid-skeleton.vue";
@@ -75,12 +76,21 @@ watch(
 );
 function getVirtualRowKey(index) {
   const chunk = rowChunks.value[index];
+  if (chunk?.group) return `grid-group:${chunk.group.key}`;
   const firstRow = chunk?.rows[0];
   return firstRow ? `grid-row:${resolveTableRowId({ index: chunk.start, row: firstRow, rowKey: internals.schema.value.rowKey })}` : `grid-row:${index}`;
 }
 function rowId(row, index) {
   return resolveTableRowId({ index, row, rowKey: internals.schema.value.rowKey });
 }
+const flowItems = computed(
+  () => rowChunks.value.flatMap(
+    (chunk) => chunk.group ? [{ group: chunk.group, index: chunk.start, key: `grid-group:${chunk.group.key}` }] : chunk.rows.map((row, offset) => ({
+      index: chunk.start + offset,
+      key: rowId(row, chunk.start + offset)
+    }))
+  )
+);
 function scrollToTop() {
   viewportRef.value?.scrollTo({ behavior: "auto", left: 0, top: 0 });
 }
@@ -258,6 +268,13 @@ function refreshData() {
 }"
           :data-index="virtualRow.index"
         >
+          <div
+            v-if="rowChunks[virtualRow.index]?.group"
+            class="nut-dl-grid__group min-w-0"
+            :style="{ gridColumn: '1 / -1' }"
+          >
+            <TableGroupHeader :group="rowChunks[virtualRow.index].group" />
+          </div>
           <div
             v-for="(row, offset) in rowChunks[virtualRow.index]?.rows ?? []"
             :key="rowId(row, (rowChunks[virtualRow.index]?.start ?? 0) + offset)"
@@ -275,14 +292,22 @@ function refreshData() {
         :class="mergeDataListUiClass('nut-dl-grid__flow grid', void 0, ui?.flow)"
         :style="{ gridTemplateColumns, gap: `${gap}px` }"
       >
-        <div
-          v-for="(row, index) in tableRows"
-          :key="rowId(row, index)"
-          :class="mergeDataListUiClass('nut-dl-grid__item min-w-0', void 0, ui?.item)"
-          :style="{ gridColumn }"
-        >
-          <GridCard :row-index="index" />
-        </div>
+        <template v-for="item in flowItems" :key="item.key">
+          <div
+            v-if="item.group"
+            class="nut-dl-grid__group min-w-0"
+            :style="{ gridColumn: '1 / -1' }"
+          >
+            <TableGroupHeader :group="item.group" />
+          </div>
+          <div
+            v-else
+            :class="mergeDataListUiClass('nut-dl-grid__item min-w-0', void 0, ui?.item)"
+            :style="{ gridColumn }"
+          >
+            <GridCard :row-index="item.index" />
+          </div>
+        </template>
       </div>
       <OverlayInsetSpacer />
     </div>

package/dist/runtime/table/components/table/table-group-header.d.vue.ts

@@ -0,0 +1,9 @@
+import type { TableGroup } from '../../types/index.js';
+type __VLS_Props = {
+    group: TableGroup;
+    /** Whether the rows beneath it carry checkboxes. */
+    selectable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;