nuxt-ui-tools 0.1.3 → 1.0.1

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

@@ -1,46 +0,0 @@
-<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/layout/TableFooter.vue

@@ -1,172 +0,0 @@
-<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 { useDataListUi } from "../../composables/use-data-list-ui";
-import { useTableInternals } from "../../composables/use-table-internals";
-import { mergeDataListUiClass } from "../../utils";
-const props = defineProps({
-  size: { type: String, required: false },
-  ui: { type: Object, required: false }
-});
-const internals = useTableInternals();
-const dataListUi = useDataListUi();
-const { locale, t } = useUiToolsLocale();
-const controlSize = computed(
-  () => props.size ?? dataListUi.ui.value.pagination?.size ?? dataListUi.controlSize.value
-);
-const ui = computed(() => ({
-  ...dataListUi.ui.value.pagination?.ui,
-  ...props.ui
-}));
-const pageSizeItems = computed(
-  () => internals.tableApi.pagination.pageSizeOptions.value.map((size) => [
-    {
-      label: t("table.footer.pageSizeOption", {
-        count: formatCount(size)
-      }),
-      onSelect: () => internals.pagination.setPageSize(size)
-    }
-  ])
-);
-function formatCount(value) {
-  return new Intl.NumberFormat(locale.value.code).format(value);
-}
-</script>
-
-<template>
-  <footer
-    v-if="internals.pagination.mode.value === 'offset'"
-    :class="
-  mergeDataListUiClass(
-    'flex flex-col gap-3 px-4 py-3 text-sm text-muted sm:px-5 lg:flex-row lg:items-center lg:justify-between',
-    void 0,
-    ui.root
-  )
-"
-  >
-    <slot
-      name="selected-count"
-      :selected="internals.selection.selectedCount.value"
-      :total="internals.pagination.rowCount.value ?? 0"
-    >
-      <div :class="ui.summary">
-        {{
-          t("table.footer.rowsSelected", {
-  selected: formatCount(internals.selection.selectedCount.value),
-  total: formatCount(internals.pagination.rowCount.value ?? 0)
-})
-        }}
-      </div>
-    </slot>
-
-    <div
-      :class="
-  mergeDataListUiClass(
-    'flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end',
-    void 0,
-    ui.inner
-  )
-"
-    >
-      <slot
-        name="page-size"
-        :page-size="internals.pagination.pageSize.value"
-        :options="internals.pagination.pageSizeOptions.value"
-        :set-page-size="internals.pagination.setPageSize"
-      >
-        <div :class="mergeDataListUiClass('flex items-center gap-3', void 0, ui.pageSize)">
-          <span>{{ t("table.footer.rowsPerPage") }}</span>
-
-          <UDropdownMenu
-            :size="controlSize"
-            :items="pageSizeItems"
-            :content="{ align: 'end', side: 'top', sideOffset: 10 }"
-          >
-            <UButton
-              color="neutral"
-              variant="outline"
-              :size="controlSize"
-              :ui="{
-  base: mergeDataListUiClass('min-w-20 justify-between', void 0, ui.button)
-}"
-              :label="String(internals.pagination.pageSize.value)"
-              trailing-icon="i-lucide-chevron-down"
-            />
-          </UDropdownMenu>
-        </div>
-      </slot>
-
-      <div :class="mergeDataListUiClass('flex items-center gap-3', void 0, ui.pages)">
-        <slot
-          name="page-count"
-          :current="internals.pagination.currentPage.value"
-          :total="internals.pagination.totalPages.value"
-        >
-          <span>{{
-            t("table.footer.page", {
-  current: formatCount(internals.pagination.currentPage.value),
-  total: formatCount(internals.pagination.totalPages.value)
-})
-          }}</span>
-        </slot>
-
-        <slot
-          name="navigation"
-          :state="internals.pagination.state.value"
-          :set-page="internals.pagination.setPage"
-          :next="internals.pagination.next"
-          :previous="internals.pagination.previous"
-        >
-          <div :class="mergeDataListUiClass('flex items-center gap-2', void 0, ui.controls)">
-            <UButton
-              color="neutral"
-              variant="outline"
-              :size="controlSize"
-              icon="i-lucide-chevrons-left"
-              :aria-label="t('table.footer.firstPage')"
-              :title="t('table.footer.firstPage')"
-              :disabled="!internals.pagination.canPreviousPage.value"
-              :ui="{ base: ui.button }"
-              @click="internals.pagination.setPage(1)"
-            />
-            <UButton
-              color="neutral"
-              variant="outline"
-              :size="controlSize"
-              icon="i-lucide-chevron-left"
-              :aria-label="t('table.footer.previousPage')"
-              :title="t('table.footer.previousPage')"
-              :disabled="!internals.pagination.canPreviousPage.value"
-              :ui="{ base: ui.button }"
-              @click="internals.pagination.setPage(internals.pagination.currentPage.value - 1)"
-            />
-            <UButton
-              color="neutral"
-              variant="outline"
-              :size="controlSize"
-              icon="i-lucide-chevron-right"
-              :aria-label="t('table.footer.nextPage')"
-              :title="t('table.footer.nextPage')"
-              :disabled="!internals.pagination.canNextPage.value"
-              :ui="{ base: ui.button }"
-              @click="internals.pagination.setPage(internals.pagination.currentPage.value + 1)"
-            />
-            <UButton
-              color="neutral"
-              variant="outline"
-              :size="controlSize"
-              icon="i-lucide-chevrons-right"
-              :aria-label="t('table.footer.lastPage')"
-              :title="t('table.footer.lastPage')"
-              :disabled="!internals.pagination.canNextPage.value"
-              :ui="{ base: ui.button }"
-              @click="internals.pagination.setPage(internals.pagination.totalPages.value)"
-            />
-          </div>
-        </slot>
-      </div>
-    </div>
-  </footer>
-</template>

package/dist/runtime/table/components/table/TableEmptyState.vue

@@ -1,21 +0,0 @@
-<script setup>
-import UIcon from "@nuxt/ui/components/Icon.vue";
-import { useUiToolsLocale } from "#ui-tools/i18n";
-defineProps({
-  minHeight: { type: String, required: true }
-});
-const { t } = useUiToolsLocale();
-</script>
-
-<template>
-  <div
-    class="flex h-full w-full flex-col items-center justify-center gap-3 py-14"
-    :style="{ minHeight }"
-  >
-    <UIcon name="i-lucide-database-zap" class="size-6 text-muted" />
-    <div class="grid gap-1 text-center">
-      <div class="text-sm font-medium text-highlighted">{{ t("table.states.empty.title") }}</div>
-      <div class="text-sm text-muted">{{ t("table.states.empty.description") }}</div>
-    </div>
-  </div>
-</template>

package/dist/runtime/table/components/table/TableLoadingState.d.vue.ts

@@ -1,6 +0,0 @@
-type __VLS_Props = {
-    minHeight: string;
-};
-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;

package/dist/runtime/table/components/table/TableLoadingState.vue

@@ -1,68 +0,0 @@
-<script setup>
-import USkeleton from "@nuxt/ui/components/Skeleton.vue";
-import { useElementSize } from "@vueuse/core";
-import { computed } from "vue";
-import { useTemplateRef } from "vue";
-import { useTableInternals } from "../../composables/use-table-internals";
-const props = defineProps({
-  minHeight: { type: String, required: true }
-});
-const internals = useTableInternals();
-const rootRef = useTemplateRef("root");
-const { height } = useElementSize(rootRef);
-const rowHeight = 48;
-const topPadding = 24;
-const skeletonRows = computed(() => {
-  const availableHeight = Math.max(height.value - topPadding, 0);
-  const count = Math.max(1, Math.ceil(availableHeight / rowHeight));
-  return Array.from({ length: count }, (_, index) => index);
-});
-const skeletonColumns = computed(() => [
-  {
-    id: "__select",
-    width: "3rem",
-    align: "start",
-    kind: "checkbox",
-    skeletonWidth: "1rem"
-  },
-  ...internals.tableColumns.visibleOrderedColumns.value.map((column, index) => ({
-    id: column.id,
-    width: index === 0 ? "1.3fr" : index === 1 ? "1.15fr" : "0.95fr",
-    align: index >= 3 ? "end" : "start",
-    kind: "text",
-    skeletonWidth: index === 0 ? "10rem" : index === 1 ? "12rem" : index === 2 ? "8rem" : index === 3 ? "9rem" : "7rem"
-  }))
-]);
-const skeletonGridTemplate = computed(
-  () => skeletonColumns.value.map((column) => column.width).join(" ")
-);
-</script>
-
-<template>
-  <div ref="root" class="h-full w-full pt-6" :style="{ minHeight }">
-    <div
-      v-for="rowIndex in skeletonRows"
-      :key="rowIndex"
-      class="grid h-12 items-center gap-3 border-b px-4"
-      style="border-bottom-color: color-mix(in oklab, var(--ui-border) 14%, transparent)"
-      :style="{ gridTemplateColumns: skeletonGridTemplate }"
-    >
-      <div
-        v-for="column in skeletonColumns"
-        :key="`${rowIndex}-${column.id}`"
-        class="flex items-center"
-        :class="[
-  column.align === 'end' ? 'justify-end' : 'justify-start',
-  column.kind === 'checkbox' ? 'pl-0' : ''
-]"
-      >
-        <template v-if="column.kind === 'checkbox'">
-          <USkeleton class="size-4 rounded-md" />
-        </template>
-        <template v-else>
-          <USkeleton class="h-4 rounded-full" :style="{ width: column.skeletonWidth }" />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>

package/dist/runtime/table/components/table/TableLoadingState.vue.d.ts

@@ -1,6 +0,0 @@
-type __VLS_Props = {
-    minHeight: string;
-};
-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;

package/dist/runtime/table/components/table/TableRenderer.vue

@@ -1,160 +0,0 @@
-<script setup>
-import UTable from "@nuxt/ui/components/Table.vue";
-import { computed, nextTick, ref, watch } from "vue";
-import { useTableInternals } from "../../composables/use-table-internals";
-import { mergeDataListUiClass } from "../../utils";
-import { createDefaultColumnState, resolveTableRowId } from "../../utils";
-import TableEmptyState from "./TableEmptyState.vue";
-import TableLoadingState from "./TableLoadingState.vue";
-const internals = useTableInternals();
-const props = defineProps({
-  height: { type: String, required: false },
-  ui: { type: Object, required: false }
-});
-const tableRef = ref(null);
-const tableRows = computed(
-  () => internals.queryContent.data.value.rows
-);
-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 tableEmpty = computed(() => !showInitialLoading.value && tableRows.value.length === 0);
-const bodyPlaceholderMinHeight = computed(
-  () => props.height ? `calc(${props.height} - 7rem)` : "24rem"
-);
-const bodyOverlayTop = "2.625rem";
-const defaultColumnState = createDefaultColumnState();
-function getVirtualRow(index) {
-  return tableRows.value[index] ?? {};
-}
-watch(tableEmpty, (isEmpty) => {
-  if (!isEmpty) return;
-  nextTick(() => {
-    const element = tableRef.value?.$el;
-    if (!(element instanceof HTMLElement)) return;
-    element.scrollTo({ top: 0, left: 0 });
-  });
-});
-</script>
-
-<template>
-  <div
-    :class="mergeDataListUiClass('relative overflow-hidden', void 0, ui?.wrapper)"
-    :style="height ? { height } : void 0"
-  >
-    <UTable
-      v-if="!internals.queryContent.status.value.isBooting"
-      ref="tableRef"
-      :data="tableRows"
-      :columns="internals.tableColumns.tableColumns.value"
-      :column-order="internals.tableColumns.tableState.value.columnOrder"
-      :column-visibility="internals.tableColumns.tableState.value.columnVisibility"
-      :column-pinning="internals.tableColumns.tableState.value.columnPinning"
-      :column-sizing="internals.tableColumns.tableState.value.columnSizing"
-      :column-sizing-info="internals.tableColumns.tableState.value.columnSizingInfo"
-      :column-sizing-options="{ enableColumnResizing: true, columnResizeMode: 'onChange' }"
-      :row-selection="internals.selection.rowSelection.value"
-      @update:column-order="internals.tableColumns.tableState.value.columnOrder = $event ?? []"
-      @update:column-visibility="
-  internals.tableColumns.tableState.value.columnVisibility = $event ?? {}
-"
-      @update:column-pinning="
-  internals.tableColumns.tableState.value.columnPinning = $event ?? defaultColumnState.columnPinning
-"
-      @update:column-sizing="internals.tableColumns.tableState.value.columnSizing = $event ?? {}"
-      @update:column-sizing-info="
-  internals.tableColumns.tableState.value.columnSizingInfo = $event ?? defaultColumnState.columnSizingInfo
-"
-      @update:row-selection="internals.selection.setRowSelection({ selection: $event ?? {} })"
-      :get-row-id="
-  (row, index) => resolveTableRowId({ rowKey: internals.schema.value.rowKey, row, index })
-"
-      :sorting-options="{ manualSorting: true }"
-      sticky="header"
-      :loading="showRefreshing"
-      loading-color="primary"
-      loading-animation="carousel"
-      :class="height ? 'h-full' : void 0"
-      :ui="{
-  root: ui?.root,
-  base: ui?.base,
-  caption: ui?.caption,
-  thead: mergeDataListUiClass(
-    'group/table-head after:inset-x-0 after:bottom-0 after:w-full after:z-[2] after:pointer-events-none',
-    void 0,
-    ui?.thead
-  ),
-  tbody: mergeDataListUiClass(
-    'border-b border-default [&>tr]:hover:bg-elevated/50',
-    void 0,
-    ui?.tbody
-  ),
-  tfoot: ui?.tfoot,
-  tr: mergeDataListUiClass(
-    'border-b border-default transition-colors last:border-b',
-    void 0,
-    ui?.tr
-  ),
-  th: ui?.th,
-  td: mergeDataListUiClass(
-    '[&[data-pinned=left]]:bg-inherit [&[data-pinned=right]]:bg-inherit',
-    void 0,
-    ui?.td
-  ),
-  separator: ui?.separator,
-  empty: ui?.empty,
-  loading: ui?.loading
-}"
-      :virtualize="
-  height ? {
-    enabled: true,
-    getItemKey: (index) => resolveTableRowId({
-      rowKey: internals.schema.value.rowKey,
-      row: getVirtualRow(index),
-      index
-    })
-  } : false
-"
-    >
-      <template #empty>
-        <template v-if="tableEmpty">
-          <slot name="empty">
-            <div />
-          </slot>
-        </template>
-        <div v-else />
-      </template>
-    </UTable>
-
-    <div
-      v-if="showInitialLoading"
-      :class="
-  mergeDataListUiClass(
-    'pointer-events-none absolute inset-x-0 bottom-0 z-10',
-    void 0,
-    ui?.loadingOverlay
-  )
-"
-      :style="{ top: bodyOverlayTop }"
-    >
-      <TableLoadingState :min-height="bodyPlaceholderMinHeight" />
-    </div>
-
-    <div
-      v-if="tableEmpty"
-      :class="
-  mergeDataListUiClass(
-    'pointer-events-none absolute inset-x-0 bottom-0 z-10 flex items-center justify-center',
-    void 0,
-    ui?.emptyOverlay
-  )
-"
-      :style="{ top: bodyOverlayTop }"
-    >
-      <TableEmptyState :min-height="bodyPlaceholderMinHeight" />
-    </div>
-  </div>
-</template>