nuxt-ui-tools 0.1.0

package/dist/runtime/table/components/grid/GridRenderer.vue

@@ -0,0 +1,526 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { AnimatePresence, motion } from "motion-v";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useTableInternals } from "../../composables/use-table-internals";
+import { GRID_DEFAULTS } from "../../constants/grid";
+import { mergeDataListUiClass, resolveTableRowId } from "../../utils";
+import GridCard from "./GridCard.vue";
+import GridSkeleton from "./GridSkeleton.vue";
+const props = defineProps({
+  height: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const { t } = useUiToolsLocale();
+const viewportRef = ref(null);
+const hostRef = ref(null);
+const animationsReady = ref(false);
+const isContained = computed(() => internals.grid.mode.value === "contained");
+const rowChunks = computed(() => internals.grid.rowChunks.value);
+const rowChunkCount = computed(() => rowChunks.value.length);
+const tableRows = computed(() => internals.grid.rows.value);
+const gridTemplateColumns = computed(
+  () => `repeat(${internals.grid.columnCount.value}, minmax(0, 1fr))`
+);
+const gridColumn = computed(
+  () => `span ${internals.grid.itemColumnSpan.value} / span ${internals.grid.itemColumnSpan.value}`
+);
+const minHeight = computed(
+  () => isContained.value && props.height ? `calc(${props.height} - 6rem)` : "24rem"
+);
+const showInitialLoading = computed(
+  () => internals.queryContent.status.value.isBooting || internals.queryContent.status.value.isPending && tableRows.value.length === 0
+);
+const showRefreshing = computed(
+  () => tableRows.value.length > 0 && (internals.queryContent.status.value.isRefreshing || internals.queryContent.status.value.isRevalidating)
+);
+const showError = computed(
+  () => Boolean(internals.queryContent.error.value) && tableRows.value.length === 0
+);
+const showEmpty = computed(
+  () => !showInitialLoading.value && !showError.value && tableRows.value.length === 0
+);
+const skeletonRows = computed(
+  () => Array.from({ length: GRID_DEFAULTS.skeletonRows }, (_, index) => index)
+);
+const containedVirtualizer = useVirtualizer(
+  computed(() => ({
+    count: rowChunkCount.value,
+    enabled: isContained.value,
+    getScrollElement: () => viewportRef.value,
+    estimateSize: () => GRID_DEFAULTS.estimatedRowHeight,
+    overscan: GRID_DEFAULTS.overscan,
+    gap: 16,
+    getItemKey: (index) => getVirtualRowKey(index)
+  }))
+);
+const virtualRows = computed(() => containedVirtualizer.value.getVirtualItems());
+const totalSize = computed(() => containedVirtualizer.value.getTotalSize());
+const canAnimateRows = computed(
+  () => animationsReady.value && (!isContained.value || !containedVirtualizer.value.isScrolling)
+);
+onMounted(() => {
+  nextTick(() => {
+    animationsReady.value = true;
+  });
+});
+watch(
+  () => internals.tableApi.pagination.state.value.pageIndex,
+  () => scrollToTop()
+);
+watch(
+  () => internals.controls.tableLayout.value,
+  (layout) => {
+    if (layout === "grid") scrollToTop();
+  }
+);
+function getVirtualRowKey(index) {
+  const chunk = rowChunks.value[index];
+  const firstRow = chunk?.rows[0];
+  return firstRow ? `grid-row:${resolveTableRowId({ rowKey: internals.schema.value.rowKey, row: firstRow, index: chunk.start })}` : `grid-row:${index}`;
+}
+function scrollToTop() {
+  if (isContained.value) {
+    viewportRef.value?.scrollTo({ top: 0, left: 0, behavior: "auto" });
+    return;
+  }
+}
+function measureVirtualRow(element) {
+  const resolvedElement = unwrapElement(element);
+  if (!(resolvedElement instanceof HTMLElement)) return;
+  containedVirtualizer.value.measureElement(resolvedElement);
+}
+function refreshData() {
+  void internals.queryContent.refreshData();
+}
+function unwrapElement(value) {
+  if (value instanceof Element) return value;
+  if (value && "$el" in value && value.$el instanceof Element) return value.$el;
+  return null;
+}
+</script>
+
+<template>
+  <div
+    ref="hostRef"
+    :class="
+  mergeDataListUiClass(
+    isContained ? 'relative overflow-hidden rounded-md border border-accented bg-default shadow-sm' : 'relative',
+    void 0,
+    ui?.root
+  )
+"
+  >
+    <div
+      v-if="isContained"
+      ref="viewportRef"
+      :class="mergeDataListUiClass('overflow-auto px-4 py-4 sm:px-5', void 0, ui?.viewport)"
+      :style="height ? { height } : void 0"
+    >
+      <div
+        v-if="!internals.queryContent.status.value.isBooting"
+        :class="mergeDataListUiClass('relative', void 0, ui?.canvas)"
+        :style="{ height: `${totalSize}px`, minHeight }"
+      >
+        <AnimatePresence mode="popLayout">
+          <motion.div
+            v-for="virtualRow in virtualRows"
+            :key="String(virtualRow.key)"
+            :ref="measureVirtualRow"
+            :class="mergeDataListUiClass('absolute left-0 top-0 w-full', void 0, ui?.row)"
+            :style="{ transform: `translateY(${virtualRow.start}px)` }"
+            :initial="canAnimateRows ? { opacity: 0, y: 6, scale: 0.995 } : false"
+            :animate="{ opacity: 1, y: 0, scale: 1 }"
+            :exit="canAnimateRows ? { opacity: 0, y: 4, scale: 0.995 } : void 0"
+            :transition="{ duration: canAnimateRows ? 0.22 : 0, ease: [0.25, 1, 0.5, 1] }"
+          >
+            <div
+              :class="mergeDataListUiClass('grid gap-4', void 0, ui?.flow)"
+              :style="{ gridTemplateColumns }"
+            >
+              <div
+                v-for="(row, offset) in rowChunks[virtualRow.index]?.rows ?? []"
+                :key="
+  resolveTableRowId({
+    rowKey: internals.schema.value.rowKey,
+    row,
+    index: (rowChunks[virtualRow.index]?.start ?? 0) + offset
+  })
+"
+                :class="mergeDataListUiClass('h-full min-w-0 self-stretch', void 0, ui?.item)"
+                :style="{ gridColumn }"
+              >
+                <GridCard :row-index="rowChunks[virtualRow.index].start + offset" />
+              </div>
+            </div>
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    </div>
+
+    <div v-else :class="mergeDataListUiClass('px-0 py-1', void 0, ui?.flow)">
+      <div
+        v-if="showInitialLoading"
+        :class="mergeDataListUiClass('grid gap-4', void 0, ui?.loading)"
+        :style="{ gridTemplateColumns, minHeight }"
+      >
+        <div v-for="row in skeletonRows" :key="row" :style="{ gridColumn }">
+          <GridSkeleton />
+        </div>
+      </div>
+
+      <div
+        v-else-if="showError"
+        :class="
+  mergeDataListUiClass('flex items-center justify-center px-4 py-10', void 0, ui?.error)
+"
+        :style="{ minHeight }"
+      >
+        <div
+          :class="
+  mergeDataListUiClass(
+    'grid max-w-md justify-items-center gap-4 rounded-[28px] border border-danger/20 bg-default/95 px-6 py-8 text-center shadow-lg backdrop-blur',
+    void 0,
+    ui?.errorCard
+  )
+"
+        >
+          <div
+            :class="
+  mergeDataListUiClass(
+    'flex size-12 items-center justify-center rounded-2xl border border-danger/20 bg-danger/5',
+    void 0,
+    ui?.errorIcon
+  )
+"
+          >
+            <UIcon name="i-lucide-cloud-alert" class="size-5 text-danger" />
+          </div>
+          <div :class="mergeDataListUiClass('grid gap-1', void 0, ui?.errorCopy)">
+            <div
+              :class="
+  mergeDataListUiClass(
+    'text-base font-medium text-highlighted',
+    void 0,
+    ui?.errorTitle
+  )
+"
+            >
+              {{ t("table.states.gridError.title") }}
+            </div>
+            <p
+              :class="
+  mergeDataListUiClass(
+    'text-sm leading-6 text-muted',
+    void 0,
+    ui?.errorDescription
+  )
+"
+            >
+              {{ t("table.states.gridError.description") }}
+            </p>
+          </div>
+          <UButton
+            color="neutral"
+            variant="soft"
+            size="lg"
+            icon="i-lucide-refresh-cw"
+            :ui="{ base: ui?.retry }"
+            @click="refreshData"
+          >
+            {{ t("table.states.gridError.action") }}
+          </UButton>
+        </div>
+      </div>
+
+      <div
+        v-else-if="showEmpty"
+        :class="
+  mergeDataListUiClass('flex items-center justify-center px-4 py-10', void 0, ui?.empty)
+"
+        :style="{ minHeight }"
+      >
+        <slot name="empty">
+          <div
+            :class="
+  mergeDataListUiClass(
+    'grid max-w-md justify-items-center gap-4 rounded-[28px] border border-default/70 bg-gradient-to-br from-default via-default to-elevated/60 px-6 py-9 text-center shadow-sm',
+    void 0,
+    ui?.emptyCard
+  )
+"
+          >
+            <div
+              :class="
+  mergeDataListUiClass(
+    'flex size-12 items-center justify-center rounded-2xl border border-default/80 bg-elevated/80',
+    void 0,
+    ui?.emptyIcon
+  )
+"
+            >
+              <UIcon name="i-lucide-layout-grid" class="size-5 text-primary" />
+            </div>
+            <div :class="mergeDataListUiClass('grid gap-1', void 0, ui?.emptyCopy)">
+              <div
+                :class="
+  mergeDataListUiClass(
+    'text-base font-medium text-highlighted',
+    void 0,
+    ui?.emptyTitle
+  )
+"
+              >
+                {{ t("table.states.gridEmpty.title") }}
+              </div>
+              <p
+                :class="
+  mergeDataListUiClass(
+    'text-sm leading-6 text-muted',
+    void 0,
+    ui?.emptyDescription
+  )
+"
+              >
+                {{ t("table.states.gridEmpty.description") }}
+              </p>
+            </div>
+          </div>
+        </slot>
+      </div>
+
+      <motion.div
+        v-else
+        :class="mergeDataListUiClass('grid auto-rows-fr gap-4', void 0, ui?.flow)"
+        :style="{ gridTemplateColumns }"
+        :initial="{ opacity: 0 }"
+        :animate="{ opacity: 1 }"
+        :transition="{ duration: 0.2, ease: [0.25, 1, 0.5, 1] }"
+      >
+        <motion.div
+          v-for="(row, index) in tableRows"
+          :key="
+  resolveTableRowId({
+    rowKey: internals.schema.value.rowKey,
+    row,
+    index
+  })
+"
+          :class="mergeDataListUiClass('h-full min-w-0 self-stretch', void 0, ui?.item)"
+          :style="{ gridColumn }"
+          :initial="canAnimateRows ? { opacity: 0, y: 6 } : false"
+          :animate="{ opacity: 1, y: 0 }"
+          :transition="{
+  duration: canAnimateRows ? 0.22 : 0,
+  delay: canAnimateRows ? Math.min(
+    Math.floor(index / Math.max(internals.grid.cardsPerRow.value, 1)) * 0.02,
+    0.14
+  ) : 0,
+  ease: [0.25, 1, 0.5, 1]
+}"
+        >
+          <GridCard :row-index="index" />
+        </motion.div>
+      </motion.div>
+    </div>
+
+    <AnimatePresence v-if="isContained" mode="wait">
+      <motion.div
+        v-if="showInitialLoading"
+        key="grid-loading"
+        :class="mergeDataListUiClass('absolute inset-0 z-20', void 0, ui?.loading)"
+        :initial="{ opacity: 0 }"
+        :animate="{ opacity: 1 }"
+        :exit="{ opacity: 0 }"
+        :transition="{ duration: 0.18, ease: [0.25, 1, 0.5, 1] }"
+      >
+        <div
+          :class="mergeDataListUiClass('grid gap-4 px-4 py-4 sm:px-5', void 0, ui?.flow)"
+          :style="{ gridTemplateColumns, minHeight }"
+        >
+          <div v-for="row in skeletonRows" :key="row" :style="{ gridColumn }">
+            <GridSkeleton />
+          </div>
+        </div>
+      </motion.div>
+
+      <motion.div
+        v-else-if="showError"
+        key="grid-error"
+        :class="
+  mergeDataListUiClass(
+    'absolute inset-0 z-20 flex items-center justify-center px-4 py-10',
+    void 0,
+    ui?.error
+  )
+"
+        :initial="{ opacity: 0, y: 8 }"
+        :animate="{ opacity: 1, y: 0 }"
+        :exit="{ opacity: 0, y: 4 }"
+        :transition="{ duration: 0.2, ease: [0.25, 1, 0.5, 1] }"
+      >
+        <div
+          :class="
+  mergeDataListUiClass(
+    'grid max-w-md justify-items-center gap-4 rounded-[28px] border border-danger/20 bg-default/95 px-6 py-8 text-center shadow-lg backdrop-blur',
+    void 0,
+    ui?.errorCard
+  )
+"
+        >
+          <div
+            :class="
+  mergeDataListUiClass(
+    'flex size-12 items-center justify-center rounded-2xl border border-danger/20 bg-danger/5',
+    void 0,
+    ui?.errorIcon
+  )
+"
+          >
+            <UIcon name="i-lucide-cloud-alert" class="size-5 text-danger" />
+          </div>
+          <div :class="mergeDataListUiClass('grid gap-1', void 0, ui?.errorCopy)">
+            <div
+              :class="
+  mergeDataListUiClass(
+    'text-base font-medium text-highlighted',
+    void 0,
+    ui?.errorTitle
+  )
+"
+            >
+              {{ t("table.states.gridError.title") }}
+            </div>
+            <p
+              :class="
+  mergeDataListUiClass(
+    'text-sm leading-6 text-muted',
+    void 0,
+    ui?.errorDescription
+  )
+"
+            >
+              {{ t("table.states.gridError.description") }}
+            </p>
+          </div>
+          <UButton
+            color="neutral"
+            variant="soft"
+            size="lg"
+            icon="i-lucide-refresh-cw"
+            :ui="{ base: ui?.retry }"
+            @click="refreshData"
+          >
+            {{ t("table.states.gridError.action") }}
+          </UButton>
+        </div>
+      </motion.div>
+
+      <motion.div
+        v-else-if="showEmpty"
+        key="grid-empty"
+        :class="
+  mergeDataListUiClass(
+    'absolute inset-0 z-20 flex items-center justify-center px-4 py-10',
+    void 0,
+    ui?.empty
+  )
+"
+        :initial="{ opacity: 0, y: 8 }"
+        :animate="{ opacity: 1, y: 0 }"
+        :exit="{ opacity: 0, y: 4 }"
+        :transition="{ duration: 0.2, ease: [0.25, 1, 0.5, 1] }"
+      >
+        <slot name="empty">
+          <div
+            :class="
+  mergeDataListUiClass(
+    'grid max-w-md justify-items-center gap-4 rounded-[28px] border border-default/70 bg-gradient-to-br from-default via-default to-elevated/60 px-6 py-9 text-center shadow-sm',
+    void 0,
+    ui?.emptyCard
+  )
+"
+          >
+            <div
+              :class="
+  mergeDataListUiClass(
+    'flex size-12 items-center justify-center rounded-2xl border border-default/80 bg-elevated/80',
+    void 0,
+    ui?.emptyIcon
+  )
+"
+            >
+              <UIcon name="i-lucide-layout-grid" class="size-5 text-primary" />
+            </div>
+            <div :class="mergeDataListUiClass('grid gap-1', void 0, ui?.emptyCopy)">
+              <div
+                :class="
+  mergeDataListUiClass(
+    'text-base font-medium text-highlighted',
+    void 0,
+    ui?.emptyTitle
+  )
+"
+              >
+                {{ t("table.states.gridEmpty.title") }}
+              </div>
+              <p
+                :class="
+  mergeDataListUiClass(
+    'text-sm leading-6 text-muted',
+    void 0,
+    ui?.emptyDescription
+  )
+"
+              >
+                {{ t("table.states.gridEmpty.description") }}
+              </p>
+            </div>
+          </div>
+        </slot>
+      </motion.div>
+    </AnimatePresence>
+
+    <motion.div
+      v-if="showRefreshing"
+      :class="
+  mergeDataListUiClass(
+    'pointer-events-none absolute inset-x-0 top-0 z-10',
+    void 0,
+    ui?.refreshing
+  )
+"
+      :initial="{ opacity: 0 }"
+      :animate="{ opacity: 1 }"
+      :exit="{ opacity: 0 }"
+      :transition="{ duration: 0.18, ease: [0.25, 1, 0.5, 1] }"
+    >
+      <div
+        :class="
+  mergeDataListUiClass(
+    'h-px w-full bg-gradient-to-r from-transparent via-primary/60 to-transparent',
+    void 0,
+    ui?.refreshingLine
+  )
+"
+      />
+      <div
+        :class="
+  mergeDataListUiClass(
+    'h-12 bg-gradient-to-b from-default/80 via-default/15 to-transparent backdrop-blur-[1.5px]',
+    void 0,
+    ui?.refreshingVeil
+  )
+"
+      />
+    </motion.div>
+  </div>
+</template>
+
+<style scoped>
+.grid-overlay-enter-active,.grid-overlay-leave-active{transition:opacity .18s cubic-bezier(.25,1,.5,1)}.grid-overlay-enter-from,.grid-overlay-leave-to{opacity:0}@media (prefers-reduced-motion:reduce){:deep(*){animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
+</style>

package/dist/runtime/table/components/grid/GridRenderer.vue.d.ts

@@ -0,0 +1,20 @@
+import type { DataListGridUi } from '../../types/index.js';
+type __VLS_Props = {
+    height?: string;
+    ui?: DataListGridUi;
+};
+declare var __VLS_36: {}, __VLS_102: {};
+type __VLS_Slots = {} & {
+    empty?: (props: typeof __VLS_36) => any;
+} & {
+    empty?: (props: typeof __VLS_102) => 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/grid/GridSkeleton.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/grid/GridSkeleton.vue

@@ -0,0 +1,46 @@
+<script setup>
+import UCard from "@nuxt/ui/components/Card.vue";
+import USkeleton from "@nuxt/ui/components/Skeleton.vue";
+import { defineComponent } from "vue";
+import { useTableInternals } from "../../composables/use-table-internals";
+const internals = useTableInternals();
+const RenderGridSkeleton = defineComponent({
+  name: "RenderGridSkeleton",
+  setup() {
+    return () => internals.schema.value.grid?.renderSkeleton?.({ layout: "grid" }) ?? null;
+  }
+});
+</script>
+
+<template>
+  <RenderGridSkeleton v-if="internals.schema.value.grid?.renderSkeleton" />
+
+  <UCard
+    v-else
+    class="relative overflow-hidden border border-default/70 bg-gradient-to-br from-default via-default to-elevated/70 p-4 shadow-sm ring-1 ring-inset ring-white/5"
+  >
+    <div class="grid gap-4">
+      <div class="flex items-start justify-between gap-3">
+        <div class="grid flex-1 gap-2">
+          <USkeleton class="h-5 w-2/5 rounded-full" />
+          <USkeleton class="h-4 w-4/5 rounded-full" />
+        </div>
+        <USkeleton class="size-9 rounded-2xl" />
+      </div>
+
+      <USkeleton class="h-32 w-full rounded-[20px]" />
+
+      <div class="grid gap-2">
+        <USkeleton class="h-4 w-full rounded-full" />
+        <USkeleton class="h-4 w-11/12 rounded-full" />
+        <USkeleton class="h-4 w-2/3 rounded-full" />
+      </div>
+
+      <div class="flex flex-wrap gap-2 pt-1">
+        <USkeleton class="h-7 w-20 rounded-full" />
+        <USkeleton class="h-7 w-16 rounded-full" />
+        <USkeleton class="h-7 w-24 rounded-full" />
+      </div>
+    </div>
+  </UCard>
+</template>

package/dist/runtime/table/components/grid/GridSkeleton.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/layout/TableFooter.d.vue.ts

@@ -0,0 +1,50 @@
+import type { DataListControlSize, DataListPaginationUi } from '../../types/index.js';
+type __VLS_Props = {
+    size?: DataListControlSize;
+    ui?: DataListPaginationUi;
+};
+declare var __VLS_1: {
+    selected: number;
+    total: number;
+}, __VLS_3: {
+    pageSize: number;
+    options: number[];
+    setPageSize: (nextPageSize: number) => void;
+}, __VLS_16: {
+    current: number;
+    total: number;
+}, __VLS_18: {
+    state: {
+        mode: "none" | "offset" | "cursor";
+        pageIndex: number;
+        pageSize: number;
+        pageCount: number;
+        loadedCount: number;
+        totalCount: number | null;
+        hasNextPage: boolean;
+        hasPreviousPage: boolean;
+        isLoadingMore: boolean;
+        loadMoreError: unknown;
+    };
+    setPage: (page: number) => void;
+    next: () => void;
+    previous: () => void;
+};
+type __VLS_Slots = {} & {
+    'selected-count'?: (props: typeof __VLS_1) => any;
+} & {
+    'page-size'?: (props: typeof __VLS_3) => any;
+} & {
+    'page-count'?: (props: typeof __VLS_16) => any;
+} & {
+    navigation?: (props: typeof __VLS_18) => 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;
+    };
+};