@xleddyl/nuxt-cms 0.4.2 → 0.4.4

package/dist/runtime/app/components/cms/ListFilters.vue

@@ -0,0 +1,151 @@
+<template>
+   <div class="cms-media-filters cms-list-filters">
+      <template v-for="key in keys" :key="key">
+         <CmsDropdownMenu v-if="optionsOf(key)" :items="menuItems(key)">
+            <button
+               type="button"
+               class="cms-pill"
+               :class="{ 'is-active': isActive(key) }"
+               aria-haspopup="menu"
+            >
+               {{ pillLabel(key) }}
+               <CmsIcon name="chevron-down" class="size-3" />
+            </button>
+         </CmsDropdownMenu>
+         <CmsPopover
+            v-else
+            :open="openKey === key"
+            class="cms-list-filter"
+            @update:open="(value) => openKey = value ? key : null"
+         >
+            <button
+               type="button"
+               class="cms-pill"
+               :class="{ 'is-active': isActive(key) }"
+               aria-haspopup="dialog"
+            >
+               {{ pillLabel(key) }}
+               <CmsIcon name="chevron-down" class="size-3" />
+            </button>
+            <template #content>
+               <div class="cms-list-filter-panel" role="dialog" :aria-label="labelOf(key)">
+                  <CmsRelationField
+                     :model-value="model[key] ?? null"
+                     :to="config.fields[key].to"
+                     @update:model-value="(value) => pickRelation(key, value)"
+                  />
+               </div>
+            </template>
+         </CmsPopover>
+      </template>
+      <CmsButton
+         v-if="activeCount"
+         label="Clear filters"
+         icon="x-mark"
+         size="xs"
+         variant="ghost"
+         color="neutral"
+         @click="model = {}"
+      />
+   </div>
+</template>
+
+<script setup>
+import { isTranslatableField, selectDisplayValue } from "#nuxt-cms";
+import { computed, reactive, ref, watch } from "#imports";
+import cmsConfig from "#cms-config";
+import {
+  listFilterLabel,
+  listFilterOptions,
+  listFilterValueLabel
+} from "../../../shared/list-filters";
+import { useCmsRuntime } from "../../composables/cms-runtime";
+import { cmsApi } from "../../utils/api";
+const props = defineProps({
+  config: { type: Object, required: true },
+  keys: { type: Array, required: true },
+  relations: { type: Object, required: false }
+});
+const model = defineModel({ type: Object, ...{ required: true } });
+const { i18n } = useCmsRuntime();
+const openKey = ref(null);
+const fetchedTitles = reactive({});
+const activeCount = computed(() => Object.values(model.value).filter(Boolean).length);
+function optionsOf(key) {
+  return listFilterOptions(props.config, key);
+}
+function labelOf(key) {
+  return listFilterLabel(props.config, key);
+}
+function isActive(key) {
+  return !!model.value[key];
+}
+function set(key, value) {
+  const next = { ...model.value };
+  if (value) next[key] = value;
+  else delete next[key];
+  model.value = next;
+}
+function menuItems(key) {
+  const current = model.value[key];
+  return [
+    { label: "Any", checked: !current, onSelect: () => set(key, null) },
+    ...(optionsOf(key) ?? []).map((option) => ({
+      label: option.label,
+      checked: current === option.value,
+      onSelect: () => set(key, option.value)
+    }))
+  ];
+}
+function pickRelation(key, value) {
+  set(key, typeof value === "string" ? value : null);
+  openKey.value = null;
+}
+function titleText(entry, value) {
+  const field = entry?.titleField ? entry.fields[entry.titleField] : void 0;
+  if (value == null || value === "") return "";
+  if (field && isTranslatableField(field) && typeof value === "object") {
+    const record = value;
+    return record[i18n.defaultLocale] ?? Object.values(record).find(Boolean) ?? "";
+  }
+  if (field?.type === "select") return selectDisplayValue(field, value);
+  return String(value);
+}
+function relationTitle(key, id) {
+  const target = cmsConfig[props.config.fields[key]?.to ?? ""];
+  const known = props.relations?.[key]?.[id];
+  const title = known !== void 0 ? titleText(target, known) : fetchedTitles[`${key}:${id}`];
+  return title || `#${id}`;
+}
+async function resolveTitle(key, id) {
+  if (import.meta.server) return;
+  const cacheKey = `${key}:${id}`;
+  if (props.relations?.[key]?.[id] !== void 0 || fetchedTitles[cacheKey] !== void 0) return;
+  const to = props.config.fields[key]?.to;
+  if (!to) return;
+  fetchedTitles[cacheKey] = "";
+  try {
+    const row = await cmsApi(`/api/cms/admin/${to}/${id}`);
+    const target = cmsConfig[to];
+    fetchedTitles[cacheKey] = titleText(target, target?.titleField ? row[target.titleField] : "");
+  } catch {
+    fetchedTitles[cacheKey] = "";
+  }
+}
+watch(
+  model,
+  (filters) => {
+    for (const key of props.keys) {
+      const value = filters[key];
+      if (value && !optionsOf(key)) void resolveTitle(key, value);
+    }
+  },
+  { immediate: true }
+);
+function pillLabel(key) {
+  const value = model.value[key];
+  if (!value) return labelOf(key);
+  const shown = optionsOf(key) ? listFilterValueLabel(props.config, key, value) : relationTitle(key, value);
+  return `${labelOf(key)}: ${shown}`;
+}
+</script>

package/dist/runtime/app/components/cms/ListFilters.vue.d.ts

@@ -0,0 +1,18 @@
+import type { CmsEntry } from '#nuxt-cms';
+import type { CmsListFilters } from '../../../shared/list-filters.js';
+type __VLS_Props = {
+    config: CmsEntry;
+    keys: string[];
+    relations?: Record<string, Record<string, unknown>>;
+};
+type __VLS_ModelProps = {
+    modelValue: CmsListFilters;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: CmsListFilters) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: CmsListFilters) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/RelationField.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup>
-import { isTranslatableField } from "#nuxt-cms";
+import { isTranslatableField, selectDisplayValue } from "#nuxt-cms";
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "#imports";
 import cmsConfig from "#cms-config";
 import { useCmsRuntime } from "../../composables/cms-runtime";
@@ -98,6 +98,8 @@ function optionLabel(row) {
     const raw = record[contentI18n.defaultLocale] ?? Object.values(record)[0] ?? "";
     return raw || `#${row.id}`;
   }
+  if (value != null && titleFieldConfig?.type === "select")
+    return selectDisplayValue(titleFieldConfig, value) || `#${row.id}`;
   return String(value ?? `#${row.id}`);
 }
 const options = computed(() => {

package/dist/runtime/app/components/cms/VisualEditor.vue

@@ -80,6 +80,10 @@
                role="tabpanel"
                :aria-labelledby="tabList.length > 1 ? `cms-editor-tab-${activeTab}` : void 0"
             >
+               <CmsAlert v-if="errors[ROOT_KEY]" color="error">{{ errors[ROOT_KEY] }}</CmsAlert>
+               <CmsAlert v-for="message in rootWarnings" :key="message" color="warning">
+                  {{ message }}
+               </CmsAlert>
                <template v-if="activeTab === 'block'">
                   <template v-if="selectedItem && selected !== null">
                      <div class="cms-editor-block-head">
@@ -129,6 +133,7 @@
                            variant="soft"
                            color="neutral"
                            label="Duplicate"
+                           :disabled="!canAdd"
                            @click="duplicate(selected)"
                         />
                         <CmsButton
@@ -150,6 +155,14 @@
                            @click="remove(selected)"
                         />
                      </div>
+                     <p v-if="errors[`${fieldKey}.${selected}`]" class="cms-form-error">
+                        <CmsIcon name="exclamation-circle" class="size-3.5 shrink-0" />
+                        {{ errors[`${fieldKey}.${selected}`] }}
+                     </p>
+                     <p v-else-if="warnings[`${fieldKey}.${selected}`]" class="cms-form-warning">
+                        <CmsIcon name="exclamation-triangle" class="size-3.5 shrink-0" />
+                        {{ warnings[`${fieldKey}.${selected}`] }}
+                     </p>
                      <div class="cms-editor-fields">
                         <CmsFormField
                            v-for="(blockField, blockKey) in selectedBlock?.fields ?? {}"
@@ -177,6 +190,10 @@
                         <CmsIcon name="exclamation-circle" class="size-3.5 shrink-0" />
                         {{ errors[fieldKey] }}
                      </p>
+                     <p v-else-if="warnings[fieldKey]" class="cms-form-warning">
+                        <CmsIcon name="exclamation-triangle" class="size-3.5 shrink-0" />
+                        {{ warnings[fieldKey] }}
+                     </p>
                      <div v-if="blocks.length" class="cms-editor-section">
                         <span class="cms-label">{{ blocksField.label }}</span>
                         <CmsBlockOutline
@@ -188,13 +205,14 @@
                            @move="move"
                         />
                      </div>
-                     <div class="cms-editor-section">
+                     <div v-if="canAdd" class="cms-editor-section">
                         <span class="cms-label">Add a block</span>
                         <CmsBlockPalette
                            :blocks="blocksField.blocks ?? {}"
                            @pick="(type) => insert(blocks.length, type)"
                         />
                      </div>
+                     <p v-else class="cms-form-description">{{ maxReached }}</p>
                   </template>
                </template>
 
@@ -240,7 +258,13 @@
 </template>
 
 <script setup>
-import { isFieldVisible, isHiddenBlock, isTranslatableField, slugSourceValue } from "#nuxt-cms";
+import {
+  canAddBlock,
+  isFieldVisible,
+  isHiddenBlock,
+  isTranslatableField,
+  slugSourceValue
+} from "#nuxt-cms";
 import {
   computed,
   onBeforeUnmount,
@@ -251,7 +275,8 @@ import {
   shallowRef,
   watch
 } from "#imports";
-import { buildEntrySchema } from "../../../shared/validation";
+import cmsConfig from "#cms-config";
+import { buildEntrySchema, entryValidationWarnings } from "../../../shared/validation";
 import {
   DEFAULT_CMS_PREVIEW_PATH,
   canHideBlock,
@@ -273,7 +298,8 @@ import { useCmsConfirm } from "../../composables/cms-confirm";
 import { useCmsFieldFocus } from "../../composables/cms-field-focus";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { entryFormLayout, useCmsSettingsState } from "../../composables/cms-settings";
-import { CMS_FORM_ERRORS, fieldIcon } from "../../utils/ui";
+import { CMS_FORM_ERRORS, CMS_FORM_WARNINGS, fieldIcon } from "../../utils/ui";
+const ROOT_KEY = "";
 const SEO_KEYS = ["seoTitle", "seoDescription", "seoImage"];
 const DEVICES = [
   { id: "desktop", label: "Desktop width", icon: "computer-desktop" },
@@ -305,6 +331,11 @@ const blocks = computed(() => {
   const value = state.value[props.fieldKey];
   return Array.isArray(value) ? value : [];
 });
+const canAdd = computed(() => canAddBlock(blocksField.value, blocks.value.length));
+const maxReached = computed(() => {
+  const max = blocksField.value.max ?? 0;
+  return `This field holds at most ${max} ${max === 1 ? "block" : "blocks"}.`;
+});
 const selectedItem = computed(
   () => selected.value === null ? void 0 : blocks.value[selected.value]
 );
@@ -366,7 +397,7 @@ function blockConfigAt(index) {
 }
 function insert(index, type) {
   const block = blocksField.value.blocks?.[type];
-  if (!block) return;
+  if (!block || !canAdd.value) return;
   const at = Math.min(Math.max(index, 0), blocks.value.length);
   setBlocks(insertBlock(blocks.value, at, emptyBlock(type, block)));
   select(at);
@@ -376,6 +407,7 @@ function insertFromPalette(type) {
   insert(paletteIndex.value, type);
 }
 function openPalette(index) {
+  if (!canAdd.value) return;
   paletteIndex.value = index;
   paletteOpen.value = true;
 }
@@ -389,6 +421,7 @@ function moveSelected(delta) {
   move(selected.value, selected.value + delta);
 }
 function duplicate(index) {
+  if (!canAdd.value) return;
   setBlocks(duplicateBlock(blocks.value, index));
   select(index + 1);
 }
@@ -494,30 +527,66 @@ onBeforeUnmount(() => {
 });
 const errors = reactive({});
 provide(CMS_FORM_ERRORS, errors);
+const validateHook = computed(
+  () => props.content ? cmsConfig[props.entryName]?.validate : void 0
+);
 const schema = computed(
-  () => buildEntrySchema({ fields: props.fields, drafts: props.content }, i18n)
+  () => buildEntrySchema(
+    { fields: props.fields, drafts: props.content, validate: validateHook.value },
+    i18n
+  )
 );
 let submitted = false;
+function issueKeys(path) {
+  const [key, index, blockKey] = path;
+  if (key === void 0) return [ROOT_KEY];
+  const keys = [String(key)];
+  if (String(key) === props.fieldKey && typeof index === "number")
+    keys.push(
+      blockKey === void 0 ? `${String(key)}.${index}` : `${String(key)}.${index}.${String(blockKey)}`
+    );
+  return keys;
+}
 function collectErrors() {
   for (const key of Object.keys(errors)) delete errors[key];
   const result = schema.value.safeParse(state.value);
   if (result.success) return [];
   const issues = result.error.issues;
   for (const issue of issues) {
-    const [key, index, blockKey] = issue.path;
-    if (key === void 0) continue;
-    errors[String(key)] ??= issue.message;
-    if (String(key) === props.fieldKey && typeof index === "number" && blockKey !== void 0)
-      errors[`${String(key)}.${index}.${String(blockKey)}`] ??= issue.message;
+    for (const key of issueKeys(issue.path)) errors[key] ??= issue.message;
   }
   return issues;
 }
+const warningList = computed(
+  () => entryValidationWarnings(
+    { fields: props.fields, validate: validateHook.value },
+    state.value,
+    i18n
+  )
+);
+const warnings = computed(() => {
+  const grouped = {};
+  for (const issue of warningList.value) {
+    for (const key of issueKeys(issue.path)) {
+      if (key !== ROOT_KEY) grouped[key] ??= issue.message;
+    }
+  }
+  return grouped;
+});
+provide(CMS_FORM_WARNINGS, warnings);
+const rootWarnings = computed(() => [
+  ...new Set(
+    warningList.value.filter((issue) => !issue.path.length).map((issue) => issue.message)
+  )
+]);
 function tabOfKey(key) {
   if (key === props.fieldKey) return "block";
   return SEO_KEYS.includes(key) ? "seo" : "content";
 }
 function tabHasError(tab) {
-  return Object.keys(errors).some((key) => tabOfKey(key.split(".")[0]) === tab);
+  return Object.keys(errors).some(
+    (key) => key !== ROOT_KEY && tabOfKey(key.split(".")[0]) === tab
+  );
 }
 function validate() {
   submitted = true;

package/dist/runtime/app/pages/admin-collection.vue

@@ -98,7 +98,7 @@
       <template v-else>
          <div class="cms-toolbar">
             <CmsInput
-               v-if="total || searchTerm"
+               v-if="total || narrowed"
                v-model="search"
                icon="magnifying-glass"
                placeholder="Search…"
@@ -131,6 +131,14 @@
                      @click="bulkStatus('published')"
                   />
                </template>
+               <CmsButton
+                  v-if="selected.length === 1"
+                  label="Duplicate"
+                  icon="document-duplicate"
+                  variant="soft"
+                  :disabled="saving"
+                  @click="duplicateSelected"
+               />
                <CmsButton
                   label="Delete"
                   icon="trash"
@@ -140,10 +148,28 @@
                />
             </div>
             <div v-else :key="'default'" class="cms-toolbar-actions">
+               <CmsDropdownMenu :items="transferItems" :content="{ align: 'end' }">
+                  <CmsButton
+                     icon="arrows-up-down"
+                     variant="soft"
+                     color="neutral"
+                     :loading="exporting"
+                     aria-label="Import and export"
+                     title="Import and export"
+                  />
+               </CmsDropdownMenu>
                <CmsButton label="New entry" icon="plus" @click="openCreate" />
             </div>
          </div>
 
+         <CmsListFilters
+            v-if="filterKeys.length && (total || narrowed)"
+            v-model="filters"
+            :config="config"
+            :keys="filterKeys"
+            :relations="relations"
+         />
+
          <CmsTable
             v-if="rows.length"
             v-model:selected="selected"
@@ -168,11 +194,19 @@
          <CmsSpinner v-else-if="status === 'pending'" />
 
          <CmsEmptyState
-            v-else-if="searchTerm"
+            v-else-if="narrowed"
             icon="magnifying-glass"
             title="No matching entries"
             fill
-         />
+         >
+            <CmsButton
+               v-if="filterCount"
+               label="Clear filters"
+               icon="x-mark"
+               variant="soft"
+               @click="filters = {}"
+            />
+         </CmsEmptyState>
 
          <CmsEmptyState
             v-else
@@ -192,8 +226,17 @@
             :collection="name"
             :config="config"
             :entry-id="drawerEntryId"
+            :initial="drawerInitial"
             @saved="refresh"
             @deleted="onDrawerDeleted"
+            @duplicate="openDuplicate"
+         />
+
+         <CmsImportModal
+            v-model:open="importOpen"
+            :collection="name"
+            :config="config"
+            @imported="refresh"
          />
       </template>
    </div>
@@ -206,7 +249,8 @@ import {
   isTranslatableField,
   isTranslatableMediaField,
   pageParentPath,
-  pickTranslatedMedia
+  pickTranslatedMedia,
+  selectDisplayValue
 } from "#nuxt-cms";
 import {
   computed,
@@ -220,7 +264,15 @@ import {
   watch
 } from "#imports";
 import cmsConfig from "#cms-config";
+import { duplicateEntryValues } from "../../shared/duplicate";
+import {
+  entryListFilterKeys,
+  listFilterQuery,
+  parseListFilters,
+  withoutListFilterQuery
+} from "../../shared/list-filters";
 import { readSearchFocus } from "../../shared/search";
+import { canTransferCsv, exportFileName } from "../../shared/transfer";
 import { useCmsConfirm } from "../composables/cms-confirm";
 import { useCmsRuntime } from "../composables/cms-runtime";
 import { entryListColumns, useCmsSettingsState } from "../composables/cms-settings";
@@ -231,7 +283,7 @@ definePageMeta({
   layout: "cms-admin",
   middleware: "cms-auth",
   validate: (route2) => Object.hasOwn(cmsConfig, route2.params.collection),
-  key: (route2) => route2.fullPath
+  key: (route2) => `${route2.path}${JSON.stringify(withoutListFilterQuery(route2.query))}`
 });
 const FORM_ID = "cms-single-form";
 const route = useRoute();
@@ -271,11 +323,33 @@ const sort = ref(null);
 watch(sort, () => {
   page.value = 1;
 });
+const filters = computed({
+  get: () => isCollectionKind(config) ? parseListFilters(config, route.query).filters : {},
+  set: (value) => {
+    void navigateTo(
+      { query: { ...withoutListFilterQuery(route.query), ...listFilterQuery(value) } },
+      { replace: true }
+    );
+  }
+});
+const filterQuery = computed(() => listFilterQuery(filters.value));
+const filterCount = computed(() => Object.keys(filterQuery.value).length);
+const narrowed = computed(() => !!searchTerm.value || filterCount.value > 0);
+watch(
+  () => JSON.stringify(filterQuery.value),
+  () => {
+    page.value = 1;
+  }
+);
+const sortQuery = computed(
+  () => sort.value ? { sort: sort.value.key, order: sort.value.order } : {}
+);
 const listQuery = computed(() => ({
   limit: PAGE_SIZE,
   offset: (page.value - 1) * PAGE_SIZE,
   ...searchTerm.value ? { search: searchTerm.value } : {},
-  ...sort.value ? { sort: sort.value.key, order: sort.value.order } : {}
+  ...sortQuery.value,
+  ...filterQuery.value
 }));
 const { data, refresh, error, status } = await useFetch(endpoint, {
   query: config.kind === "single" ? void 0 : listQuery
@@ -384,7 +458,7 @@ function relationLabel(field, key, id) {
   if (title == null || title === "") return `#${id}`;
   const target = cmsConfig[field.to];
   const titleField = target?.titleField ? target.fields[target.titleField] : void 0;
-  const label = titleField && isTranslatableField(titleField) ? localized(title) : String(title);
+  const label = titleField && isTranslatableField(titleField) ? localized(title) : titleField?.type === "select" ? selectDisplayValue(titleField, title) : String(title);
   return label || `#${id}`;
 }
 function displayValue(field, key, value) {
@@ -402,6 +476,8 @@ function displayValue(field, key, value) {
       return truncate(JSON.stringify(value));
     case "datetime":
       return formatDateTime(value);
+    case "select":
+      return truncate(selectDisplayValue(field, value));
     case "blocks":
       return `${value.length} \u25A4`;
     case "relation": {
@@ -428,13 +504,21 @@ const columns = computed(
     }
   )
 );
+const filterKeys = computed(() => {
+  if (!isCollectionKind(config)) return [];
+  const shown = entryListFilterKeys(config, entryListColumns(name, settings.value));
+  const active = Object.keys(filters.value).filter((key) => !shown.includes(key));
+  return [...shown, ...active];
+});
 const drawerOpen = ref(false);
 const drawerEntryId = ref(null);
+const drawerInitial = ref(null);
 function onSelect(_event, row) {
   if (isContent) {
     void navigateTo(`/cms/${name}/${row.original.id}`);
     return;
   }
+  drawerInitial.value = null;
   drawerEntryId.value = String(row.original.id);
   drawerOpen.value = true;
 }
@@ -443,9 +527,76 @@ function openCreate() {
     void navigateTo(`/cms/${name}/new`);
     return;
   }
+  drawerInitial.value = null;
+  drawerEntryId.value = null;
+  drawerOpen.value = true;
+}
+function openDuplicate(values) {
+  drawerInitial.value = values;
   drawerEntryId.value = null;
   drawerOpen.value = true;
 }
+async function duplicateSelected() {
+  const id = selected.value[0];
+  if (!id || saving.value) return;
+  if (isContent) {
+    void navigateTo({ path: `/cms/${name}/new`, query: { duplicate: id } });
+    return;
+  }
+  saving.value = true;
+  try {
+    const entry = await cmsApi(`${endpoint}/${id}`);
+    selected.value = [];
+    openDuplicate(duplicateEntryValues(config, entry));
+  } catch (error2) {
+    toast.add({ title: "Could not load entry", description: errorMessage(error2), color: "error" });
+  } finally {
+    saving.value = false;
+  }
+}
+const importOpen = ref(false);
+const exporting = ref(false);
+const csvAvailable = canTransferCsv(config);
+async function exportEntries(format, narrow) {
+  if (exporting.value) return;
+  exporting.value = true;
+  try {
+    const query = {
+      format,
+      ...sortQuery.value,
+      ...narrow && searchTerm.value ? { search: searchTerm.value } : {},
+      ...narrow ? filterQuery.value : {}
+    };
+    const blob = await $fetch(`/api/cms/export/${name}`, { query, responseType: "blob" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = exportFileName(name, format);
+    link.click();
+    URL.revokeObjectURL(url);
+  } catch (error2) {
+    toast.add({ title: "Export failed", description: errorMessage(error2), color: "error" });
+  } finally {
+    exporting.value = false;
+  }
+}
+const transferItems = computed(() => {
+  const formats = csvAvailable ? ["json", "csv"] : ["json"];
+  const exports = (narrow) => formats.map((format) => ({
+    label: `Export ${narrow ? "filtered" : "all"} as ${format.toUpperCase()}`,
+    onSelect: () => void exportEntries(format, narrow)
+  }));
+  return [
+    ...narrowed.value ? exports(true) : [],
+    ...exports(false),
+    {
+      label: "Import from file\u2026",
+      onSelect: () => {
+        importOpen.value = true;
+      }
+    }
+  ];
+});
 async function onDrawerDeleted() {
   if (rows.value.length === 1 && page.value > 1) page.value -= 1;
   else await refresh();