nuxt-ui-tools 0.1.3 → 1.0.0

package/dist/runtime/table/components/data-list/{DataListPagination.vue → data-list-pagination.vue}

@@ -1,9 +1,10 @@
 <script setup>
 import { useTableInternals } from "../../composables/use-table-internals";
-import TableFooter from "../layout/TableFooter.vue";
+import TableFooter from "../layout/table-footer.vue";
 defineProps({
   size: { type: String, required: false },
-  ui: { type: Object, required: false }
+  ui: { type: Object, required: false },
+  props: { type: Object, required: false }
 });
 const internals = useTableInternals();
 </script>
@@ -17,7 +18,7 @@ const internals = useTableInternals();
     :next="internals.pagination.next"
     :previous="internals.pagination.previous"
   >
-    <TableFooter :size="size" :ui="ui">
+    <TableFooter :size="size" :ui="ui" :props="props">
       <template v-for="(_, name) in $slots" #[name]="scope">
         <slot v-if="name !== 'default'" :name="name" v-bind="scope ?? {}" />
       </template>

package/dist/runtime/table/components/data-list/{DataListPagination.vue.d.ts → data-list-pagination.vue.d.ts}

@@ -1,20 +1,21 @@
-import type { DataListControlSize, DataListPaginationUi } from '../../types/index.js';
+import type { DataListControlSize, DataListPaginationProps, DataListPaginationUi } from '../../types/index.js';
 type __VLS_Props = {
     size?: DataListControlSize;
     ui?: DataListPaginationUi;
+    props?: DataListPaginationProps;
 };
 declare var __VLS_1: {
     state: {
-        mode: "none" | "offset" | "cursor";
-        pageIndex: number;
-        pageSize: number;
-        pageCount: number;
-        loadedCount: number;
-        totalCount: number | null;
         hasNextPage: boolean;
         hasPreviousPage: boolean;
         isLoadingMore: boolean;
         loadMoreError: unknown;
+        loadedCount: number;
+        mode: "none" | "offset" | "cursor";
+        pageCount: number;
+        pageIndex: number;
+        pageSize: number;
+        totalCount: number | null;
     };
     setPage: (page: number) => void;
     setPageSize: (nextPageSize: number) => void;

package/dist/runtime/table/components/data-list/{DataListRefresh.d.vue.ts → data-list-refresh.d.vue.ts}

@@ -1,8 +1,9 @@
-import type { DataListControlSize, DataListRefreshUi } from '../../types/index.js';
+import type { DataListControlSize, DataListRefreshProps, DataListRefreshUi } from '../../types/index.js';
 type __VLS_Props = {
     label?: string;
     size?: DataListControlSize;
     ui?: DataListRefreshUi;
+    props?: DataListRefreshProps;
 };
 declare function refresh(): void;
 declare var __VLS_1: {

package/dist/runtime/table/components/data-list/{DataListRefresh.vue → data-list-refresh.vue}

@@ -4,10 +4,12 @@ import { computed } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
+import { mergeDataListProps, mergeDataListUiClass } from "../../utils";
 const props = defineProps({
   label: { type: String, required: false },
   size: { type: String, required: false },
-  ui: { type: Object, required: false }
+  ui: { type: Object, required: false },
+  props: { type: Object, required: false }
 });
 const internals = useTableInternals();
 const dataListUi = useDataListUi();
@@ -22,6 +24,13 @@ const resolvedUi = computed(() => ({
   ...dataListUi.ui.value.refresh?.ui,
   ...props.ui
 }));
+const buttonProps = computed(
+  () => mergeDataListProps(
+    { color: "neutral", icon: "i-lucide-refresh-cw", size: resolvedSize.value, variant: "outline" },
+    dataListUi.ui.value.refresh?.props?.button,
+    props.props?.button
+  )
+);
 function refresh() {
   void internals.queryContent.refreshData()();
 }
@@ -34,16 +43,26 @@ function refresh() {
     :trigger-props="{ type: 'button', disabled: loading, onClick: refresh }"
   >
     <UButton
-      color="neutral"
-      variant="outline"
-      :size="resolvedSize"
-      icon="i-lucide-refresh-cw"
+      v-bind="buttonProps"
       :label="label"
-      :loading="loading"
+      :square="!label"
       :aria-label="t('table.header.refreshData')"
       :title="t('table.header.refreshData')"
-      :ui="resolvedUi"
+      :data-refreshing="loading"
+      :ui="{
+  ...resolvedUi,
+  base: mergeDataListUiClass('nut-dl-refresh', void 0, resolvedUi.base),
+  leadingIcon: mergeDataListUiClass(
+    loading ? 'nut-dl-refresh__icon--spinning' : 'nut-dl-refresh__icon',
+    void 0,
+    resolvedUi.leadingIcon
+  )
+}"
       @click="refresh"
     />
   </slot>
 </template>
+
+<style>
+.nut-dl-refresh__icon--spinning{animation:nut-dl-refresh-spin .7s linear infinite}@keyframes nut-dl-refresh-spin{to{transform:rotate(1turn)}}
+</style>

package/dist/runtime/table/components/data-list/{DataListRefresh.vue.d.ts → data-list-refresh.vue.d.ts}

@@ -1,8 +1,9 @@
-import type { DataListControlSize, DataListRefreshUi } from '../../types/index.js';
+import type { DataListControlSize, DataListRefreshProps, DataListRefreshUi } from '../../types/index.js';
 type __VLS_Props = {
     label?: string;
     size?: DataListControlSize;
     ui?: DataListRefreshUi;
+    props?: DataListRefreshProps;
 };
 declare function refresh(): void;
 declare var __VLS_1: {

package/dist/runtime/table/components/data-list/{DataListResultCount.d.vue.ts → data-list-result-count.d.vue.ts}

@@ -1,5 +1,6 @@
-import type { DataListResultCountUi } from '../../types/index.js';
+import type { DataListControlSize, DataListResultCountUi } from '../../types/index.js';
 type __VLS_Props = {
+    size?: DataListControlSize;
     ui?: DataListResultCountUi;
 };
 declare var __VLS_1: {

package/dist/runtime/table/components/data-list/{DataListResultCount.vue → data-list-result-count.vue}

@@ -3,8 +3,9 @@ import { computed } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
-import { mergeDataListUiClass } from "../../utils";
+import { mergeDataListUiClass, resolveDataListControlGeometry } from "../../utils";
 const props = defineProps({
+  size: { type: String, required: false },
   ui: { type: Object, required: false }
 });
 const internals = useTableInternals();
@@ -16,11 +17,17 @@ const formattedCount = computed(
   () => new Intl.NumberFormat(locale.value.code).format(totalCount.value ?? loadedCount.value)
 );
 const rootUi = computed(() => dataListUi.ui.value.resultCount?.ui);
+const resolvedSize = computed(
+  () => props.size ?? dataListUi.ui.value.resultCount?.size ?? dataListUi.controlSize.value
+);
+const geometry = computed(() => resolveDataListControlGeometry(resolvedSize.value));
 </script>
 
 <template>
   <slot :loaded-count="loadedCount" :total-count="totalCount" :known="totalCount != null">
-    <span :class="mergeDataListUiClass('text-sm text-muted', rootUi?.root, props.ui?.root)">
+    <span
+      :class="mergeDataListUiClass(`${geometry.text} text-muted`, rootUi?.root, props.ui?.root)"
+    >
       {{
         totalCount == null ? t("table.states.loaded", { count: formattedCount }) : formattedCount
       }}

package/dist/runtime/table/components/data-list/{DataListResultCount.vue.d.ts → data-list-result-count.vue.d.ts}

@@ -1,5 +1,6 @@
-import type { DataListResultCountUi } from '../../types/index.js';
+import type { DataListControlSize, DataListResultCountUi } from '../../types/index.js';
 type __VLS_Props = {
+    size?: DataListControlSize;
     ui?: DataListResultCountUi;
 };
 declare var __VLS_1: {

package/dist/runtime/table/components/data-list/{DataListRoot.d.vue.ts → data-list-root.d.vue.ts}

@@ -1,17 +1,18 @@
 import type { ComputedRef } from 'vue';
 import type { UiToolsLocale, UiToolsMessages } from '#ui-tools/i18n';
-import { type TableInternals } from '../../composables/use-table-internals.js';
-import type { DataListDensity, DataListUiConfig } from '../../types/index.js';
-type DataListTable = {
+import type { TableInternals } from '../../composables/use-table-internals.js';
+import type { DataListControlSize, DataListDensity, DataListUiConfig } from '../../types/index.js';
+interface DataListTable {
     schema: ComputedRef<{
         tableKey: string;
     }>;
     __internals: TableInternals;
-};
+}
 type __VLS_Props = {
     table: DataListTable;
     locale?: UiToolsLocale<UiToolsMessages>;
     density?: DataListDensity;
+    size?: DataListControlSize;
     ui?: DataListUiConfig;
 };
 declare var __VLS_1: {

package/dist/runtime/table/components/data-list/{DataListRoot.vue → data-list-root.vue}

@@ -2,6 +2,8 @@
 import { useAppConfig } from "nuxt/app";
 import { computed, onBeforeUnmount, onMounted } from "vue";
 import { provideUiToolsLocale, useUiToolsLocaleRef } from "#ui-tools/i18n";
+import { isObject } from "../../../shared/utils/predicate";
+import { useDataListBreakpoint } from "../../composables/use-data-list-breakpoint";
 import { provideDataListUi } from "../../composables/use-data-list-ui";
 import { provideTableInternals } from "../../composables/use-table-internals";
 import { mergeDataListUiConfig } from "../../utils";
@@ -9,26 +11,45 @@ const props = defineProps({
   table: { type: Object, required: true },
   locale: { type: Object, required: false },
   density: { type: String, required: false },
+  size: { type: String, required: false },
   ui: { type: Object, required: false }
 });
 const appConfig = useAppConfig();
-provideTableInternals(props.table.__internals);
+provideTableInternals(props.table["__internals"]);
 provideUiToolsLocale(useUiToolsLocaleRef(computed(() => props.locale)));
+const { isMobile } = useDataListBreakpoint();
 provideDataListUi(
-  computed(
-    () => mergeDataListUiConfig(resolveAppDataListUi(appConfig), props.ui, props.density)
-  )
+  computed(() => {
+    const merged = mergeDataListUiConfig(
+      resolveAppDataListUi(appConfig),
+      props.ui,
+      props.density,
+      props.size
+    );
+    if (!isMobile.value || !merged.mobile) {
+      return merged;
+    }
+    return mergeDataListUiConfig(
+      merged,
+      merged.mobile,
+      merged.mobile.density,
+      merged.mobile.control?.size
+    );
+  })
 );
-onMounted(() => props.table.__internals.startup.scheduleStart());
-onBeforeUnmount(() => props.table.__internals.startup.dispose());
+onMounted(() => props.table["__internals"].startup.scheduleStart());
+onBeforeUnmount(() => props.table["__internals"].startup.dispose());
 function resolveAppDataListUi(config) {
-  if (!("nuxtUiTools" in config) || !config.nuxtUiTools || typeof config.nuxtUiTools !== "object")
+  if (!config.nuxtUiTools || !isObject(config.nuxtUiTools)) {
     return void 0;
-  if (!("dataList" in config.nuxtUiTools)) return void 0;
+  }
+  if (!("dataList" in config.nuxtUiTools)) {
+    return void 0;
+  }
   return isDataListUiConfig(config.nuxtUiTools.dataList) ? config.nuxtUiTools.dataList : void 0;
 }
 function isDataListUiConfig(value) {
-  return Boolean(value) && typeof value === "object";
+  return isObject(value);
 }
 </script>
 

package/dist/runtime/table/components/data-list/{DataListRoot.vue.d.ts → data-list-root.vue.d.ts}

@@ -1,17 +1,18 @@
 import type { ComputedRef } from 'vue';
 import type { UiToolsLocale, UiToolsMessages } from '#ui-tools/i18n';
-import { type TableInternals } from '../../composables/use-table-internals.js';
-import type { DataListDensity, DataListUiConfig } from '../../types/index.js';
-type DataListTable = {
+import type { TableInternals } from '../../composables/use-table-internals.js';
+import type { DataListControlSize, DataListDensity, DataListUiConfig } from '../../types/index.js';
+interface DataListTable {
     schema: ComputedRef<{
         tableKey: string;
     }>;
     __internals: TableInternals;
-};
+}
 type __VLS_Props = {
     table: DataListTable;
     locale?: UiToolsLocale<UiToolsMessages>;
     density?: DataListDensity;
+    size?: DataListControlSize;
     ui?: DataListUiConfig;
 };
 declare var __VLS_1: {

package/dist/runtime/table/components/data-list/{DataListSearch.d.vue.ts → data-list-search.d.vue.ts}

@@ -1,9 +1,10 @@
-import type { DataListControlSize, DataListSearchUi } from '../../types/index.js';
+import type { DataListControlSize, DataListSearchProps, DataListSearchUi } from '../../types/index.js';
 type __VLS_Props = {
     placeholder?: string;
     size?: DataListControlSize;
     width?: string;
     ui?: DataListSearchUi;
+    props?: DataListSearchProps;
 };
 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;

package/dist/runtime/table/components/data-list/{DataListSearch.vue → data-list-search.vue}

@@ -2,12 +2,14 @@
 import { computed } from "vue";
 import { useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
-import SearchQueryInput from "../utils/SearchQueryInput.vue";
+import { mergeDataListProps } from "../../utils";
+import SearchQueryInput from "../utils/search-query-input.vue";
 const props = defineProps({
   placeholder: { type: String, required: false },
   size: { type: String, required: false },
   width: { type: String, required: false },
-  ui: { type: Object, required: false }
+  ui: { type: Object, required: false },
+  props: { type: Object, required: false }
 });
 const internals = useTableInternals();
 const dataListUi = useDataListUi();
@@ -19,6 +21,9 @@ const resolvedUi = computed(() => ({
   ...dataListUi.ui.value.search?.ui,
   ...props.ui
 }));
+const resolvedProps = computed(
+  () => mergeDataListProps(dataListUi.ui.value.search?.props, props.props)
+);
 const loading = computed(
   () => internals.queryContent.status.value.isFetching && !internals.queryContent.status.value.isPending
 );
@@ -31,6 +36,7 @@ const loading = computed(
     :placeholder="placeholder ?? internals.filters.searchPlaceholder.value"
     :size="resolvedSize"
     :ui="resolvedUi"
+    :input-props="resolvedProps.input"
     :style="{ width: resolvedWidth, maxWidth: '100%' }"
   />
 </template>

package/dist/runtime/table/components/data-list/{DataListSearch.vue.d.ts → data-list-search.vue.d.ts}

@@ -1,9 +1,10 @@
-import type { DataListControlSize, DataListSearchUi } from '../../types/index.js';
+import type { DataListControlSize, DataListSearchProps, DataListSearchUi } from '../../types/index.js';
 type __VLS_Props = {
     placeholder?: string;
     size?: DataListControlSize;
     width?: string;
     ui?: DataListSearchUi;
+    props?: DataListSearchProps;
 };
 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;

package/dist/runtime/table/components/data-list/data-list-selection-actions.d.vue.ts

@@ -0,0 +1,36 @@
+import type { TableActionController } from '../../composables/use-table-actions.js';
+import type { DataListControlSize, DataListSelectionActionsProps, DataListSelectionActionsUi, GenericObject, TableActionSlotProps, TableApi, TableRuntimeRecord } from '../../types/index.js';
+type __VLS_Props = {
+    size?: DataListControlSize;
+    /** `absolute` docks the bar inside the nearest positioned ancestor; `fixed` pins it to the viewport. */
+    position?: 'absolute' | 'fixed';
+    /** Number of actions rendered inline before the overflow menu. */
+    maxVisible?: number;
+    /** Shows the selection / all-results scope switch when the schema allows an `all` scope. */
+    scope?: boolean;
+    ui?: DataListSelectionActionsUi;
+    props?: DataListSelectionActionsProps;
+};
+type TableActionSlot = TableActionSlotProps<GenericObject, TableRuntimeRecord, TableRuntimeRecord>;
+type __VLS_Slots = {
+    default?: (props: {
+        actions: TableActionController[];
+        selectedCount: number;
+        selection: TableApi['selection'];
+        clearSelection: () => void;
+    }) => import('vue').VNodeChild;
+    action?: (props: TableActionSlot) => import('vue').VNodeChild;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    scope: boolean;
+    position: "absolute" | "fixed";
+    maxVisible: number;
+}, {}, {}, {}, 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/table/components/data-list/data-list-selection-actions.vue

@@ -0,0 +1,242 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isString, isNullish } from "../../../shared/utils/predicate";
+import { useDataListBreakpoint } from "../../composables/use-data-list-breakpoint";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+import { mergeDataListProps, mergeDataListUiClass } from "../../utils";
+import { resolveTableActionLabel } from "../../utils/actions";
+const props = defineProps({
+  size: { type: String, required: false },
+  position: { type: String, required: false, default: "absolute" },
+  maxVisible: { type: Number, required: false, default: void 0 },
+  scope: { type: Boolean, required: false, default: true },
+  ui: { type: Object, required: false },
+  props: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const { isMobile } = useDataListBreakpoint();
+const { locale, t } = useUiToolsLocale();
+const config = computed(() => dataListUi.ui.value.selectionActions);
+const size = computed(() => props.size ?? config.value?.size ?? "sm");
+const ui = computed(() => ({ ...config.value?.ui, ...props.ui }));
+const controlProps = computed(
+  () => mergeDataListProps(config.value?.props, props.props)
+);
+const actionProps = computed(
+  () => mergeDataListProps(
+    { color: "neutral", size: size.value, variant: "ghost" },
+    controlProps.value.action
+  )
+);
+const overflowProps = computed(
+  () => mergeDataListProps(
+    {
+      color: "neutral",
+      icon: "i-lucide-ellipsis-vertical",
+      size: size.value,
+      square: true,
+      variant: "ghost"
+    },
+    controlProps.value.overflow
+  )
+);
+const dismissProps = computed(
+  () => mergeDataListProps(
+    { color: "neutral", icon: "i-lucide-x", size: size.value, square: true, variant: "ghost" },
+    controlProps.value.dismiss
+  )
+);
+const actions = computed(() => internals.actions.bulkActions.value);
+const selectedCount = computed(() => internals.selection.selectedCount.value);
+const matchingCount = computed(() => internals.pagination.rowCount.value);
+const scopeEnabled = computed(
+  () => props.scope && internals.schema.value.selection?.scope !== "page" && !isNullish(matchingCount.value) && matchingCount.value > 0
+);
+const bulkScope = computed(() => internals.selection.bulkScope.value);
+const maxVisible = computed(() => props.maxVisible ?? (isMobile.value ? 1 : 3));
+const visibleActions = computed(() => actions.value.slice(0, maxVisible.value));
+const overflowActions = computed(() => actions.value.slice(maxVisible.value));
+const overflowItems = computed(
+  () => overflowActions.value.map((action) => ({
+    disabled: action.state.disabled,
+    icon: isString(action.definition.icon) ? action.definition.icon : void 0,
+    label: resolveTableActionLabel(action.definition.label) ?? action.definition.key,
+    onSelect: () => action.execute()
+  }))
+);
+const { selection } = internals.tableApi;
+defineSlots();
+function formatCount(value) {
+  return new Intl.NumberFormat(locale.value.code).format(value);
+}
+function clearSelection() {
+  internals.selection.clearSelection();
+}
+</script>
+
+<template>
+  <Transition name="nut-dl-selbar">
+    <div
+      v-if="selectedCount > 0 && actions.length"
+      :class="
+  mergeDataListUiClass(
+    `nut-dl-selbar pointer-events-none z-40 flex justify-center px-4 ${position === 'fixed' ? 'fixed inset-x-0 bottom-4' : 'absolute inset-x-0 bottom-[22px]'}`,
+    void 0,
+    ui.root
+  )
+"
+    >
+      <div class="pointer-events-auto flex max-w-full justify-center">
+        <slot
+          :actions="actions"
+          :selected-count="selectedCount"
+          :selection="selection"
+          :clear-selection="clearSelection"
+        >
+          <div
+            :class="
+  mergeDataListUiClass(
+    'nut-dl-selbar__bar flex h-11 max-w-[min(840px,100%)] items-center gap-2.5 rounded-[10px] bg-inverted px-1.5 text-[13px] text-inverted shadow-[0_20px_50px_-18px_rgb(31_29_26/0.6)]',
+    void 0,
+    ui.bar
+  )
+"
+            role="region"
+            :aria-label="t('table.selectionBar.selection')"
+          >
+            <div
+              v-if="scopeEnabled"
+              :class="
+  mergeDataListUiClass(
+    'nut-dl-selbar__scope flex shrink-0 items-center gap-0.5 rounded-lg bg-white/8 p-0.5',
+    void 0,
+    ui.scope
+  )
+"
+            >
+              <button
+                type="button"
+                class="nut-dl-selbar__scope-btn flex h-7 items-center gap-1.5 rounded-md px-2.5 text-[12.5px] font-medium whitespace-nowrap transition-colors"
+                :class="
+  bulkScope === 'selection' ? 'bg-white/16 text-inverted' : 'text-inverted/60 hover:text-inverted'
+"
+                @click="internals.selection.setBulkScope('selection')"
+              >
+                <span>{{ t("table.selectionBar.selection") }}</span>
+                <b class="font-semibold text-primary">{{ formatCount(selectedCount) }}</b>
+              </button>
+              <button
+                type="button"
+                class="nut-dl-selbar__scope-btn flex h-7 items-center gap-1.5 rounded-md px-2.5 text-[12.5px] font-medium whitespace-nowrap transition-colors"
+                :class="
+  bulkScope === 'all' ? 'bg-white/16 text-inverted' : 'text-inverted/60 hover:text-inverted'
+"
+                @click="internals.selection.setBulkScope('all')"
+              >
+                <span>{{ t("table.selectionBar.allResults") }}</span>
+                <b
+                  class="font-semibold"
+                  :class="bulkScope === 'all' ? 'text-primary' : 'text-primary/70'"
+                >
+                  {{ formatCount(matchingCount ?? 0) }}
+                </b>
+              </button>
+            </div>
+            <span
+              v-else
+              :class="
+  mergeDataListUiClass(
+    'nut-dl-selbar__count px-2 font-semibold whitespace-nowrap',
+    void 0,
+    ui.count
+  )
+"
+              role="status"
+            >
+              {{ t("table.selectionBar.selection") }}
+              <b class="text-primary">{{ formatCount(selectedCount) }}</b>
+            </span>
+
+            <div
+              :class="
+  mergeDataListUiClass(
+    `nut-dl-selbar__actions flex min-w-0 items-center gap-0.5 ${scopeEnabled ? 'ml-1 pl-2' : ''}`,
+    void 0,
+    ui.actions
+  )
+"
+            >
+              <template v-for="action in visibleActions" :key="action.definition.key">
+                <slot name="action" v-bind="action">
+                  <UButton
+                    v-bind="actionProps"
+                    :icon="isString(action.definition.icon) ? action.definition.icon : void 0"
+                    :label="
+  resolveTableActionLabel(action.definition.label) ?? action.definition.key
+"
+                    :disabled="action.state.disabled"
+                    :loading="action.state.loading || action.running"
+                    :ui="{
+  base: mergeDataListUiClass(
+    'nut-dl-selbar__action h-8 px-2.5 text-[12.5px] font-medium text-inverted/90 hover:bg-white/12 hover:text-inverted active:bg-white/16 active:text-inverted',
+    void 0,
+    ui.action
+  ),
+  leadingIcon: 'size-3.5'
+}"
+                    @click="action.execute"
+                  />
+                </slot>
+              </template>
+              <UDropdownMenu
+                v-if="overflowActions.length"
+                :items="overflowItems"
+                :content="{ side: 'top', align: 'end', sideOffset: 8 }"
+                :ui="{
+  content: 'min-w-52',
+  item: 'gap-2 text-[13px]',
+  itemLeadingIcon: 'size-3.5 text-muted'
+}"
+              >
+                <UButton
+                  v-bind="overflowProps"
+                  :aria-label="t('table.selectionBar.more')"
+                  :ui="{
+  base: mergeDataListUiClass(
+    'nut-dl-selbar__more h-8 w-8 text-inverted/90 hover:bg-white/12 hover:text-inverted active:bg-white/16 active:text-inverted',
+    void 0,
+    ui.overflow
+  )
+}"
+                />
+              </UDropdownMenu>
+            </div>
+
+            <UButton
+              v-bind="dismissProps"
+              :aria-label="t('table.selectionBar.clear')"
+              :title="t('table.selectionBar.clear')"
+              :ui="{
+  base: mergeDataListUiClass(
+    'nut-dl-selbar__dismiss h-8 w-8 text-inverted hover:bg-white/12 active:bg-white/16 active:text-inverted',
+    void 0,
+    ui.dismiss
+  )
+}"
+              @click="clearSelection"
+            />
+          </div>
+        </slot>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style>
+.nut-dl-selbar-enter-active,.nut-dl-selbar-leave-active{transition:opacity .18s ease,transform .24s cubic-bezier(.2,.9,.3,1)}.nut-dl-selbar-enter-from,.nut-dl-selbar-leave-to{opacity:0;transform:translateY(8px) scale(.98)}@media (prefers-reduced-motion:reduce){.nut-dl-selbar-enter-active,.nut-dl-selbar-leave-active{transition:opacity 80ms linear}.nut-dl-selbar-enter-from,.nut-dl-selbar-leave-to{transform:none}}
+</style>