nuxt-ui-tools 0.1.2 → 1.0.0

package/dist/runtime/table/components/table/{TableRenderer.d.vue.ts → table-empty-state.d.vue.ts}

@@ -1,11 +1,11 @@
-import type { DataListTableUi } from '../../types/index.js';
+import type { DataListControlSize } from '../../types/index.js';
 type __VLS_Props = {
-    height?: string;
-    ui?: DataListTableUi;
+    minHeight: string;
+    size?: DataListControlSize;
 };
-declare var __VLS_17: {};
+declare var __VLS_6: {};
 type __VLS_Slots = {} & {
-    empty?: (props: typeof __VLS_17) => any;
+    actions?: (props: typeof __VLS_6) => 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/table/table-empty-state.vue

@@ -0,0 +1,87 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.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 { mergeDataListUiClass } from "../../utils";
+const props = defineProps({
+  minHeight: { type: String, required: true },
+  size: { type: String, required: false }
+});
+const { t } = useUiToolsLocale();
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const ui = computed(() => dataListUi.ui.value.table?.ui);
+const emptyProps = computed(() => dataListUi.ui.value.table?.props?.empty);
+const filtered = computed(
+  () => internals.filters.hasActiveUiFilters.value || Boolean(internals.filters.searchQuery.value)
+);
+const icon = computed(
+  () => emptyProps.value?.icon ?? (filtered.value ? "i-lucide-search-x" : "i-lucide-inbox")
+);
+const title = computed(
+  () => emptyProps.value?.title ?? (filtered.value ? t("table.states.empty.filteredTitle") : t("table.states.empty.title"))
+);
+const description = computed(() => {
+  if (emptyProps.value?.description === false) {
+    return "";
+  }
+  return emptyProps.value?.description || (filtered.value ? t("table.states.empty.filteredDescription") : t("table.states.empty.description"));
+});
+function reset() {
+  internals.filters.clearAllFilters();
+  internals.filters.searchQuery.value = "";
+}
+</script>
+
+<template>
+  <div
+    :class="
+  mergeDataListUiClass(
+    'nut-dl-empty flex h-full w-full flex-col items-center justify-center px-6 py-12 text-center',
+    void 0,
+    ui?.empty
+  )
+"
+    :style="{ minHeight: props.minHeight }"
+    role="status"
+  >
+    <div class="nut-dl-empty__art relative mb-4 flex size-14 items-center justify-center">
+      <span
+        class="nut-dl-empty__ring absolute inset-0 rounded-2xl bg-elevated ring ring-inset ring-default"
+      />
+      <span
+        class="nut-dl-empty__ring nut-dl-empty__ring--back absolute inset-1.5 -z-10 rotate-6 rounded-xl bg-muted"
+      />
+      <UIcon :name="icon" class="nut-dl-empty__icon relative size-5 text-muted" />
+    </div>
+    <div class="nut-dl-empty__title text-[14px] font-medium text-highlighted">{{ title }}</div>
+    <p
+      v-if="description"
+      class="nut-dl-empty__description mt-1 max-w-[34ch] text-[12.5px] leading-relaxed text-muted"
+    >
+      {{ description }}
+    </p>
+    <div
+      v-if="filtered || $slots.actions"
+      class="nut-dl-empty__actions mt-4 flex items-center gap-2"
+    >
+      <slot name="actions">
+        <UButton
+          color="neutral"
+          variant="outline"
+          size="sm"
+          icon="i-lucide-rotate-ccw"
+          :label="t('table.states.empty.reset')"
+          @click="reset"
+        />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style>
+.nut-dl-empty{animation:nut-dl-empty-in .24s cubic-bezier(.2,.9,.3,1) both}.nut-dl-empty__ring--back{opacity:.7}@keyframes nut-dl-empty-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.nut-dl-empty{animation:none}}
+</style>

package/dist/runtime/table/components/table/{TableRenderer.vue.d.ts → table-empty-state.vue.d.ts}

@@ -1,11 +1,11 @@
-import type { DataListTableUi } from '../../types/index.js';
+import type { DataListControlSize } from '../../types/index.js';
 type __VLS_Props = {
-    height?: string;
-    ui?: DataListTableUi;
+    minHeight: string;
+    size?: DataListControlSize;
 };
-declare var __VLS_17: {};
+declare var __VLS_6: {};
 type __VLS_Slots = {} & {
-    empty?: (props: typeof __VLS_17) => any;
+    actions?: (props: typeof __VLS_6) => 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/table/{TableEmptyState.d.vue.ts → table-loading-state.d.vue.ts}

@@ -1,5 +1,7 @@
+import type { DataListControlSize } from '../../types/index.js';
 type __VLS_Props = {
     minHeight: string;
+    size?: DataListControlSize;
 };
 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/table/table-loading-state.vue

@@ -0,0 +1,111 @@
+<script setup>
+import USkeleton from "@nuxt/ui/components/Skeleton.vue";
+import { useElementSize } from "@vueuse/core";
+import { computed, useTemplateRef } from "vue";
+import { isNumber } from "../../../shared/utils/predicate";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+import { ROW_ACTIONS_COLUMN_ID, resolveDataListTableSize } from "../../utils";
+const props = defineProps({
+  minHeight: { type: String, required: true },
+  size: { type: String, required: false }
+});
+const internals = useTableInternals();
+const dataListUi = useDataListUi();
+const rootRef = useTemplateRef("root");
+const { height } = useElementSize(rootRef);
+const tableSize = computed(
+  () => resolveDataListTableSize(
+    props.size ?? dataListUi.ui.value.table?.size ?? dataListUi.controlSize.value
+  )
+);
+const skeletonRows = computed(() => {
+  const measuredHeight = height.value;
+  const fallbackHeight = tableSize.value.rowHeight * 8;
+  const availableHeight = measuredHeight > 0 ? measuredHeight : fallbackHeight;
+  const count = Math.max(1, Math.ceil(availableHeight / tableSize.value.rowHeight));
+  return Array.from({ length: count }, (_, index) => index);
+});
+const skeletonColumns = computed(() => {
+  const dataColumns = internals.tableColumns.visibleOrderedColumns.value.map((column, index) => {
+    const isRowActions = column.id === ROW_ACTIONS_COLUMN_ID;
+    return {
+      align: isRowActions || column.align === "right" ? "end" : "start",
+      id: column.id,
+      kind: isRowActions ? "action" : "text",
+      skeletonWidth: isRowActions ? "1rem" : index === 0 ? "min(10rem, 72%)" : index === 1 ? "min(12rem, 78%)" : index === 2 ? "min(8rem, 68%)" : index === 3 ? "min(9rem, 72%)" : "min(7rem, 64%)",
+      width: isRowActions ? "3.25rem" : resolveSkeletonColumnWidth({ columnId: column.id, columnIndex: index })
+    };
+  });
+  if (!internals.selection.selectionEnabled.value) {
+    return dataColumns;
+  }
+  return [
+    {
+      align: "start",
+      id: "__select",
+      kind: "checkbox",
+      skeletonWidth: "1rem",
+      width: "3.5rem"
+    },
+    ...dataColumns
+  ];
+});
+const skeletonGridTemplate = computed(
+  () => skeletonColumns.value.map((column) => column.width).join(" ")
+);
+function resolveSkeletonColumnWidth(options) {
+  const column = internals.tableColumns.visibleOrderedColumns.value[options.columnIndex];
+  const configuredSize = internals.tableColumns.tableState.value.columnSizing[options.columnId];
+  if (configuredSize) {
+    return `${configuredSize}px`;
+  }
+  if (column?.width !== void 0) {
+    return resolveCssColumnSize(column.width);
+  }
+  if (column?.minWidth !== void 0) {
+    return `minmax(${resolveCssColumnSize(column.minWidth)}, 1fr)`;
+  }
+  return "minmax(120px, 1fr)";
+}
+function resolveCssColumnSize(size) {
+  return isNumber(size) ? `${size}px` : size;
+}
+</script>
+
+<template>
+  <div
+    ref="root"
+    data-table-loading-state
+    class="h-full min-h-0 w-full overflow-hidden"
+    :style="{ minHeight }"
+  >
+    <div
+      v-for="rowIndex in skeletonRows"
+      :key="rowIndex"
+      data-table-loading-row
+      class="grid w-full items-stretch border-b border-default/40"
+      :style="{
+  gridTemplateColumns: skeletonGridTemplate,
+  minHeight: `${tableSize.rowHeight}px`
+}"
+    >
+      <div
+        v-for="column in skeletonColumns"
+        :key="`${rowIndex}-${column.id}`"
+        :class="[
+  'flex min-w-0 items-center',
+  tableSize.cell,
+  column.align === 'end' ? 'justify-end' : 'justify-start'
+]"
+      >
+        <USkeleton v-if="column.kind === 'checkbox'" class="size-4 rounded-md" />
+        <USkeleton
+          v-else
+          class="h-3.5 max-w-full rounded-full"
+          :style="{ width: column.skeletonWidth }"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/table/components/table/{TableEmptyState.vue.d.ts → table-loading-state.vue.d.ts}

@@ -1,5 +1,7 @@
+import type { DataListControlSize } from '../../types/index.js';
 type __VLS_Props = {
     minHeight: string;
+    size?: DataListControlSize;
 };
 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/table/table-overlay-scrollbars.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    target: HTMLElement | null;
+};
+declare function schedule(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    measure: typeof schedule;
+}, {}, {}, {}, 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;

package/dist/runtime/table/components/table/table-overlay-scrollbars.vue

@@ -0,0 +1,180 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue";
+const MIN_THUMB = 28;
+const TRACK_INSET = 4;
+const props = defineProps({
+  target: { type: null, required: true }
+});
+const hasVertical = ref(false);
+const hasHorizontal = ref(false);
+const verticalThumb = ref({ offset: 0, size: 0 });
+const horizontalThumb = ref({ offset: 0, size: 0 });
+const dragging = shallowRef(null);
+const hovered = ref(false);
+const recentlyScrolled = ref(false);
+const visible = computed(() => hovered.value || recentlyScrolled.value || dragging.value !== null);
+let idleTimer;
+let frame = 0;
+let observer;
+function thumb(params) {
+  const track = Math.max(0, params.track - TRACK_INSET * 2);
+  const ratio = params.track / (params.track + params.overflow);
+  const size = Math.max(MIN_THUMB, Math.round(track * ratio));
+  const travel = Math.max(0, track - size);
+  const progress = params.overflow > 0 ? params.offset / params.overflow : 0;
+  return { offset: Math.round(TRACK_INSET + travel * progress), size };
+}
+function read() {
+  frame = 0;
+  const el = props.target;
+  if (!el) {
+    return;
+  }
+  const overflowY = el.scrollHeight - el.clientHeight;
+  const overflowX = el.scrollWidth - el.clientWidth;
+  hasVertical.value = overflowY > 1;
+  hasHorizontal.value = overflowX > 1;
+  if (hasVertical.value) {
+    verticalThumb.value = thumb({
+      offset: el.scrollTop,
+      overflow: overflowY,
+      track: el.clientHeight
+    });
+  }
+  if (hasHorizontal.value) {
+    horizontalThumb.value = thumb({
+      offset: el.scrollLeft,
+      overflow: overflowX,
+      track: el.clientWidth
+    });
+  }
+  const host = el.parentElement;
+  if (!host) {
+    return;
+  }
+  host.classList.toggle("nut-dl-table--scrolled", el.scrollLeft > 2);
+  host.classList.toggle("nut-dl-table--can-right", overflowX - el.scrollLeft > 2);
+  host.classList.toggle("nut-dl-table--scrolled-y", el.scrollTop > 2);
+}
+function schedule() {
+  if (frame) {
+    return;
+  }
+  frame = requestAnimationFrame(read);
+}
+function onScroll() {
+  schedule();
+  recentlyScrolled.value = true;
+  clearTimeout(idleTimer);
+  idleTimer = setTimeout(() => recentlyScrolled.value = false, 900);
+}
+function startDrag(axis, event) {
+  const el = props.target;
+  if (!el) {
+    return;
+  }
+  event.preventDefault();
+  dragging.value = axis;
+  const vertical = axis === "vertical";
+  const start = vertical ? event.clientY : event.clientX;
+  const startScroll = vertical ? el.scrollTop : el.scrollLeft;
+  const track = vertical ? el.clientHeight : el.clientWidth;
+  const overflow = vertical ? el.scrollHeight - el.clientHeight : el.scrollWidth - el.clientWidth;
+  const size = vertical ? verticalThumb.value.size : horizontalThumb.value.size;
+  const travel = Math.max(1, track - TRACK_INSET * 2 - size);
+  function onMove(move) {
+    const delta = (vertical ? move.clientY : move.clientX) - start;
+    const next = startScroll + delta / travel * overflow;
+    if (vertical) {
+      el.scrollTop = next;
+    } else {
+      el.scrollLeft = next;
+    }
+  }
+  function onUp() {
+    dragging.value = null;
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    window.removeEventListener("pointercancel", onUp);
+  }
+  window.addEventListener("pointermove", onMove, { passive: true });
+  window.addEventListener("pointerup", onUp);
+  window.addEventListener("pointercancel", onUp);
+}
+function onEnter() {
+  return hovered.value = true;
+}
+function onLeave() {
+  return hovered.value = false;
+}
+function attach(el) {
+  observer?.disconnect();
+  if (!el) {
+    return;
+  }
+  el.addEventListener("scroll", onScroll, { passive: true });
+  el.addEventListener("pointerenter", onEnter);
+  el.addEventListener("pointerleave", onLeave);
+  observer = new ResizeObserver(schedule);
+  observer.observe(el);
+  for (const child of el.children) {
+    observer.observe(child);
+  }
+  schedule();
+}
+function detach(el) {
+  el?.removeEventListener("scroll", onScroll);
+  el?.removeEventListener("pointerenter", onEnter);
+  el?.removeEventListener("pointerleave", onLeave);
+  observer?.disconnect();
+}
+watch(
+  () => props.target,
+  (next, previous) => {
+    detach(previous ?? null);
+    attach(next ?? null);
+  }
+);
+onMounted(() => attach(props.target));
+onBeforeUnmount(() => {
+  detach(props.target);
+  clearTimeout(idleTimer);
+  if (frame) {
+    cancelAnimationFrame(frame);
+  }
+});
+defineExpose({ measure: schedule });
+</script>
+
+<template>
+  <div
+    v-if="hasVertical"
+    class="nut-dl-sb pointer-events-none absolute top-1 right-[3px] bottom-2 z-[6] w-[5px] opacity-0 transition-opacity duration-200 ease-out motion-reduce:transition-none"
+    :class="{ 'pointer-events-auto opacity-100': visible }"
+  >
+    <span
+      class="absolute top-0 left-0 w-full rounded-full bg-(--nut-scrollbar-thumb) transition-colors duration-150 will-change-transform hover:bg-(--nut-scrollbar-thumb-hover)"
+      :class="{ 'bg-(--nut-scrollbar-thumb-active)': dragging === 'vertical' }"
+      :style="{
+  height: `${verticalThumb.size}px`,
+  transform: `translateY(${verticalThumb.offset}px)`
+}"
+      @pointerdown="startDrag('vertical', $event)"
+    />
+  </div>
+  <div
+    v-if="hasHorizontal"
+    class="nut-dl-sb pointer-events-none absolute right-2 bottom-[3px] left-1 z-[6] h-[5px] opacity-0 transition-opacity duration-200 ease-out motion-reduce:transition-none"
+    :class="{ 'pointer-events-auto opacity-100': visible }"
+  >
+    <span
+      class="absolute top-0 left-0 h-full rounded-full bg-(--nut-scrollbar-thumb) transition-colors duration-150 will-change-transform hover:bg-(--nut-scrollbar-thumb-hover)"
+      :class="{ 'bg-(--nut-scrollbar-thumb-active)': dragging === 'horizontal' }"
+      :style="{
+  width: `${horizontalThumb.size}px`,
+  transform: `translateX(${horizontalThumb.offset}px)`
+}"
+      @pointerdown="startDrag('horizontal', $event)"
+    />
+  </div>
+</template>

package/dist/runtime/table/components/table/table-overlay-scrollbars.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    target: HTMLElement | null;
+};
+declare function schedule(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    measure: typeof schedule;
+}, {}, {}, {}, 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;

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

@@ -0,0 +1,44 @@
+import type { DataListControlSize, DataListTableUi } from '../../types/index.js';
+type __VLS_Props = {
+    gutter?: number;
+    height?: string;
+    size?: DataListControlSize;
+    fill?: boolean;
+    ui?: DataListTableUi;
+};
+type ColumnSlot = {
+    kind: 'column';
+    columnId: string;
+    key: string;
+} | {
+    kind: 'spacer';
+    colSpan: number;
+    key: string;
+};
+declare var __VLS_34: {
+    columnSlots: ColumnSlot[];
+    leafColumns: import("@tanstack/table-core").Column<{
+        columnPinningFeature: import("@tanstack/table-core").TableFeature;
+        columnResizingFeature: import("@tanstack/table-core").TableFeature;
+        columnSizingFeature: import("@tanstack/table-core").TableFeature;
+        columnVisibilityFeature: import("@tanstack/table-core").TableFeature;
+        coreRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
+        columnMeta: import("../../utils/index.js").DataListColumnMeta;
+    }, object, unknown>[];
+}, __VLS_36: {};
+type __VLS_Slots = {} & {
+    footer?: (props: typeof __VLS_34) => any;
+} & {
+    empty?: (props: typeof __VLS_36) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    resetColumnSizing: () => void;
+}, {}, {}, {}, 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;
+    };
+};