nuxt-ui-tools 1.17.0 → 1.18.0

package/dist/runtime/table/components/data-list/data-list-table.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from "vue";
 import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+import SummaryRenderer from "../summary/summary-renderer.vue";
 import TableRenderer from "../table/table-renderer.vue";
 const props = defineProps({
   height: { type: String, required: false },
@@ -8,10 +10,14 @@ const props = defineProps({
   fill: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });
+const internals = useTableInternals();
 const dataListUi = useDataListUi();
 const resolvedSize = computed(
   () => props.size ?? dataListUi.ui.value.table?.size ?? dataListUi.controlSize.value
 );
+const summarySize = computed(
+  () => props.size ?? dataListUi.ui.value.summary?.size ?? resolvedSize.value
+);
 const resolvedUi = computed(() => ({
   ...dataListUi.ui.value.table?.ui,
   ...props.ui
@@ -19,7 +25,18 @@ const resolvedUi = computed(() => ({
 </script>
 
 <template>
-  <TableRenderer :height="height" :size="resolvedSize" :fill="fill" :ui="resolvedUi">
+  <SummaryRenderer
+    v-if="internals.rowSummary.active.value"
+    :height="height"
+    :size="summarySize"
+    :fill="fill"
+    :ui="dataListUi.ui.value.summary?.ui"
+  >
+    <template v-for="(_, name) in $slots" #[name]="scope">
+      <slot :name="name" v-bind="scope ?? {}" />
+    </template>
+  </SummaryRenderer>
+  <TableRenderer v-else :height="height" :size="resolvedSize" :fill="fill" :ui="resolvedUi">
     <template v-for="(_, name) in $slots" #[name]="scope">
       <slot :name="name" v-bind="scope ?? {}" />
     </template>

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

@@ -1,13 +1,20 @@
 import type { DataListControlSize, DataListTableUi } from '../../types/index.js';
+/**
+ * The table layout. Summary rows are its compact presentation, so they share its states and slots.
+ * The template carries no comment on purpose: in development a root comment turns the root into a
+ * fragment, which a transition around this component cannot leave, so the next view never comes in.
+ */
 type __VLS_Props = {
     height?: string;
     size?: DataListControlSize;
     fill?: boolean;
     ui?: DataListTableUi;
 };
-declare var __VLS_10: string, __VLS_11: any;
+declare var __VLS_10: string, __VLS_11: any, __VLS_22: string, __VLS_23: any;
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    [K in NonNullable<typeof __VLS_22>]?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/table/components/data-list/data-list-view-toggle.d.vue.ts

@@ -0,0 +1,25 @@
+import type { DataListControlSize, DataListViewToggleProps, DataListViewToggleUi } from '../../types/index.js';
+type __VLS_Props = {
+    size?: DataListControlSize;
+    ui?: DataListViewToggleUi;
+    props?: DataListViewToggleProps;
+};
+declare function toggle(): void;
+declare var __VLS_1: {
+    active: boolean;
+    available: boolean;
+    label: string;
+    toggle: typeof toggle;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __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-view-toggle.vue

@@ -0,0 +1,57 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+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({
+  size: { type: String, required: false },
+  ui: { type: Object, required: false },
+  props: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const { t } = useUiToolsLocale();
+const { rowSummary } = internals;
+const resolvedSize = computed(
+  () => props.size ?? dataListUi.ui.value.viewToggle?.size ?? dataListUi.controlSize.value
+);
+const resolvedUi = computed(() => ({
+  ...dataListUi.ui.value.viewToggle?.ui,
+  ...props.ui
+}));
+const label = computed(
+  () => t(rowSummary.active.value ? "table.header.tableView" : "table.header.summaryView")
+);
+const buttonProps = computed(
+  () => mergeDataListProps(
+    { color: "primary", size: resolvedSize.value, variant: "link" },
+    dataListUi.ui.value.viewToggle?.props?.button,
+    props.props?.button
+  )
+);
+function toggle() {
+  rowSummary.setActive(!rowSummary.active.value);
+}
+</script>
+
+<template>
+  <slot
+    :active="rowSummary.active.value"
+    :available="rowSummary.available.value"
+    :label="label"
+    :toggle="toggle"
+  >
+    <UButton
+      v-if="internals.controls.headerControls.value.summary"
+      v-bind="buttonProps"
+      :label="label"
+      :ui="{
+  ...resolvedUi,
+  base: mergeDataListUiClass('nut-dl-view-toggle font-semibold', void 0, resolvedUi.base)
+}"
+      @click="toggle"
+    />
+  </slot>
+</template>

package/dist/runtime/table/components/data-list/data-list-view-toggle.vue.d.ts

@@ -0,0 +1,25 @@
+import type { DataListControlSize, DataListViewToggleProps, DataListViewToggleUi } from '../../types/index.js';
+type __VLS_Props = {
+    size?: DataListControlSize;
+    ui?: DataListViewToggleUi;
+    props?: DataListViewToggleProps;
+};
+declare function toggle(): void;
+declare var __VLS_1: {
+    active: boolean;
+    available: boolean;
+    label: string;
+    toggle: typeof toggle;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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 __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/sort-menu-panel.vue

@@ -77,7 +77,7 @@ function humanize(value) {
           :aria-checked="activeDirection === dir"
           class="flex min-w-0 items-center justify-center gap-1.5 overflow-hidden rounded-[5px] px-1 font-medium whitespace-nowrap outline-none transition-colors focus-visible:ring-2 focus-visible:ring-primary/40"
           :class="[
-  compact ? 'h-7 text-[12px]' : 'h-8 text-[12.5px]',
+  compact ? 'h-7 text-[12px]' : 'h-11 text-[13px]',
   activeDirection === dir ? 'nut-dl-sort__dir--active bg-default text-highlighted shadow-[0_0_0_1px_var(--ui-border)]' : 'text-muted hover:text-default'
 ]"
           @click="emit('selectDirection', dir)"

package/dist/runtime/table/components/layout/table-footer.d.vue.ts

@@ -14,10 +14,10 @@ declare var __VLS_1: {
     pageSize: number;
     options: number[];
     setPageSize: (nextPageSize: number) => void;
-}, __VLS_12: {
+}, __VLS_12: {}, __VLS_19: {
     current: number;
     total: number;
-}, __VLS_14: {
+}, __VLS_21: {
     state: {
         hasNextPage: boolean;
         hasPreviousPage: boolean;
@@ -39,9 +39,11 @@ type __VLS_Slots = {} & {
 } & {
     'page-size'?: (props: typeof __VLS_3) => any;
 } & {
-    'page-count'?: (props: typeof __VLS_12) => any;
+    'view-toggle'?: (props: typeof __VLS_12) => any;
 } & {
-    navigation?: (props: typeof __VLS_14) => any;
+    'page-count'?: (props: typeof __VLS_19) => any;
+} & {
+    navigation?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     compact: boolean;

package/dist/runtime/table/components/layout/table-footer.vue

@@ -12,6 +12,41 @@ import {
   mergeDataListUiClass,
   resolveDataListControlGeometry
 } from "../../utils";
+import DataListViewToggle from "../data-list/data-list-view-toggle.vue";
+const PAGER_CONTROLS = [
+  {
+    icon: "i-lucide-chevrons-left",
+    iconProp: "firstIcon",
+    label: "table.footer.firstPage",
+    mirrored: "i-lucide-chevrons-right",
+    slot: "first",
+    target: () => 1
+  },
+  {
+    icon: "i-lucide-chevron-left",
+    iconProp: "prevIcon",
+    label: "table.footer.previousPage",
+    mirrored: "i-lucide-chevron-right",
+    slot: "prev",
+    target: (page2) => page2 > 1 ? page2 - 1 : void 0
+  },
+  {
+    icon: "i-lucide-chevron-right",
+    iconProp: "nextIcon",
+    label: "table.footer.nextPage",
+    mirrored: "i-lucide-chevron-left",
+    slot: "next",
+    target: (page2, pages) => page2 < pages ? page2 + 1 : void 0
+  },
+  {
+    icon: "i-lucide-chevrons-right",
+    iconProp: "lastIcon",
+    label: "table.footer.lastPage",
+    mirrored: "i-lucide-chevrons-left",
+    slot: "last",
+    target: (_page, pages) => pages
+  }
+];
 const props = defineProps({
   size: { type: String, required: false },
   compact: { type: Boolean, required: false, default: void 0 },
@@ -22,7 +57,7 @@ const internals = useTableInternals();
 const { isMobile } = useDataListBreakpoint();
 const compact = computed(() => props.compact ?? isMobile.value);
 const dataListUi = useDataListUi();
-const { locale, t } = useUiToolsLocale();
+const { dir, locale, t } = useUiToolsLocale();
 const controlSize = computed(
   () => props.size ?? dataListUi.ui.value.pagination?.size ?? dataListUi.controlSize.value
 );
@@ -49,6 +84,24 @@ const paginationProps = computed(
     controlProps.value.pagination
   )
 );
+const pagerControls = computed(() => {
+  const resolved = paginationProps.value;
+  if (resolved.showControls === false) return [];
+  return PAGER_CONTROLS.map((control) => {
+    const target = control.target(page.value, internals.pagination.totalPages.value);
+    return {
+      label: t(control.label),
+      props: {
+        color: resolved.color,
+        icon: resolved[control.iconProp] || (dir.value === "rtl" ? control.mirrored : control.icon),
+        size: resolved.size,
+        to: target === void 0 ? void 0 : resolved.to?.(target),
+        variant: resolved.variant
+      },
+      slot: control.slot
+    };
+  });
+});
 const pageSizeProps = computed(
   () => mergeDataListProps({ color: "neutral", size: controlSize.value, variant: "none" }, controlProps.value.pageSize)
 );
@@ -93,8 +146,9 @@ const paginationControls = computed(() => {
     showPagesList: pagination.showPagesList ?? true
   };
 });
+const showViewToggle = computed(() => internals.controls.headerControls.value.summary);
 const showFooter = computed(
-  () => internals.pagination.mode.value === "offset" && (paginationControls.value.showPageSizePicker || paginationControls.value.showPagesCount || paginationControls.value.showPagesList)
+  () => internals.pagination.mode.value === "offset" && (paginationControls.value.showPageSizePicker || paginationControls.value.showPagesCount || paginationControls.value.showPagesList || showViewToggle.value)
 );
 function formatCount(value) {
   return new Intl.NumberFormat(locale.value.code).format(value);
@@ -184,6 +238,10 @@ function formatCount(value) {
       </slot>
     </div>
 
+    <div v-if="showViewToggle" class="nut-dl-footer__view mx-auto">
+      <slot name="view-toggle"><DataListViewToggle /></slot>
+    </div>
+
     <div
       v-if="paginationControls.showPagesList"
       :class="
@@ -273,7 +331,26 @@ function formatCount(value) {
     ui.button
   )
 }"
-        />
+        >
+          <template v-for="control in pagerControls" #[control.slot]>
+            <UButton v-bind="control.props" :aria-label="control.label" />
+          </template>
+          <template #item="{ item, page: current, pageCount }">
+            <UButton
+              v-if="item.type === 'page'"
+              :color="current === item.value ? paginationProps.activeColor : paginationProps.color"
+              :variant="
+  current === item.value ? paginationProps.activeVariant : paginationProps.variant
+"
+              :size="paginationProps.size"
+              :label="String(item.value)"
+              :aria-label="t('table.footer.page', { current: item.value, total: pageCount })"
+              :to="paginationProps.to?.(item.value)"
+              :ui="{ label: 'min-w-5 text-center' }"
+              square
+            />
+          </template>
+        </UPagination>
       </slot>
     </div>
   </footer>

package/dist/runtime/table/components/layout/table-footer.vue.d.ts

@@ -14,10 +14,10 @@ declare var __VLS_1: {
     pageSize: number;
     options: number[];
     setPageSize: (nextPageSize: number) => void;
-}, __VLS_12: {
+}, __VLS_12: {}, __VLS_19: {
     current: number;
     total: number;
-}, __VLS_14: {
+}, __VLS_21: {
     state: {
         hasNextPage: boolean;
         hasPreviousPage: boolean;
@@ -39,9 +39,11 @@ type __VLS_Slots = {} & {
 } & {
     'page-size'?: (props: typeof __VLS_3) => any;
 } & {
-    'page-count'?: (props: typeof __VLS_12) => any;
+    'view-toggle'?: (props: typeof __VLS_12) => any;
 } & {
-    navigation?: (props: typeof __VLS_14) => any;
+    'page-count'?: (props: typeof __VLS_19) => any;
+} & {
+    navigation?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     compact: boolean;

package/dist/runtime/table/components/summary/summary-content.d.ts

@@ -0,0 +1,13 @@
+import type { FunctionalComponent } from 'vue';
+import type { RenderableType } from '../../../shared/index.js';
+import type { TableInjectedRowActionScope } from '../../composables/use-table-row-actions.js';
+interface SummaryContentProps {
+    params: TableInjectedRowActionScope;
+    render: (params: TableInjectedRowActionScope) => RenderableType;
+}
+/**
+ * Renders one of a summary row's schema callbacks. The callback runs while this component renders,
+ * so each render gets fresh vnodes and the reactive reads inside it belong to this component only.
+ */
+declare const SummaryContent: FunctionalComponent<SummaryContentProps>;
+export default SummaryContent;

package/dist/runtime/table/components/summary/summary-content.js

@@ -0,0 +1,5 @@
+import { renderVNode } from "../../../shared/utils/render.js";
+const SummaryContent = (props) => renderVNode(props.render(props.params));
+SummaryContent.props = ["params", "render"];
+SummaryContent.displayName = "DataListSummaryContent";
+export default SummaryContent;

package/dist/runtime/table/components/summary/summary-renderer.d.vue.ts

@@ -0,0 +1,31 @@
+import type { DataListControlSize, DataListSummaryUi } from '../../types/index.js';
+/**
+ * The table layout read as one compact row per record, the way a phone screen needs it. It takes
+ * the table renderer's place while `table.summary` is active and keeps its states: first-load
+ * placeholders, error, empty, refreshing, cursor pages and a virtualized window for long lists.
+ */
+type __VLS_Props = {
+    height?: string;
+    size?: DataListControlSize;
+    fill?: boolean;
+    ui?: DataListSummaryUi;
+};
+declare function refresh(): void;
+declare var __VLS_8: {
+    error: {};
+    retry: typeof refresh;
+}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    error?: (props: typeof __VLS_8) => any;
+} & {
+    empty?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: 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 __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;
+    };
+};