@antelopejs/dms 0.5.6 → 0.6.0

package/frontend-vue/layers/dms-ui/app/build/components/table/MenuFilter.vue

@@ -13,6 +13,7 @@ import type { ShallowRef } from "vue";
 import defu from "defu";
 import type { SelectItem } from "@nuxt/ui";
 import { formatFilterValue as formatFilterValueUtil } from "../../composables/table/utils/formatFilterValue";
+import { clearTableFiltersLabelKey } from "../../composables/table/utils/clearTableFilters";
 
 const theme = tv({
   slots: {
@@ -131,6 +132,13 @@ const filters = computed(
   () => tableSharedData.value?.columnFiltersState.value || [],
 );
 
+// The "clear all" action: offered while something narrows the rows, named
+// after what it clears (filters, search or both).
+const clearable = computed(() => tableSharedData.value?.clearableFilters.value);
+const canClear = computed(
+  () => !!clearable.value?.filters || !!clearable.value?.search,
+);
+
 const formState = ref<"idle" | "new" | "edit">("idle");
 
 const filterForm = ref<TableFilter>({
@@ -356,15 +364,15 @@ const formatFilterValue = (filter: TableFilter): string => {
         @click="formState = 'new'"
       />
       <UButton
-        v-if="filters.length"
+        v-if="canClear && clearable"
         icon="i-ph-trash"
         :ui="{ base: uiTableMenuFilter.actionButton() }"
-        :label="t('dms.table.delete_filters')"
+        :label="t(clearTableFiltersLabelKey(clearable))"
         color="neutral"
         variant="ghost"
         size="sm"
         block
-        @click="tableSharedData?.resetFilters"
+        @click="tableSharedData?.resetFilters()"
       />
     </div>
   </div>

package/frontend-vue/layers/dms-ui/app/build/components/table/MenuRoot.vue

@@ -60,6 +60,17 @@ const navItems = computed((): NavItem[] => {
       hasSubMenu: true,
       onSelect: () => emits("navigate", "page"),
     },
+    // Row height is the grid's: other displays draw no rows.
+    ...(capabilities?.columnManagement
+      ? [
+          {
+            label: t("dms.table.density_title"),
+            icon: "i-ph-arrows-in-line-vertical",
+            hasSubMenu: true,
+            onSelect: () => emits("navigate", "density"),
+          },
+        ]
+      : []),
     ...(tableSharedData?.value?.hasDisplaySwitcher
       ? [
           {

package/frontend-vue/layers/dms-ui/app/build/components/table/MenuSort.vue

@@ -4,16 +4,30 @@ import { tv } from "tailwind-variants";
 import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
 import type { ShallowRef } from "vue";
 
-import type { TableSharedData, Data } from "./Table.vue";
+import type { TableSharedData, Data, TableColumn } from "./Table.vue";
+import {
+  sortDirectionLabelKey,
+  sortValueKind,
+  type SortValueKind,
+} from "../../composables/table-view/utils/sortableColumns";
 
 const theme = tv({
   slots: {
     root: "max-h-72 overflow-y-auto",
+    status:
+      "border-b-default text-muted border-b px-3.5 py-2 text-xs leading-snug",
+    statusColumn: "text-highlighted font-medium",
+    statusDefault: "text-dimmed",
     list: "p-1.5",
     item: "text-default hover:bg-accented/30 relative flex w-full cursor-pointer select-none items-center gap-1.5 rounded-sm py-1 pl-2 pr-1 text-sm outline-none group",
     itemLabel: "truncate",
     trailing: "ms-auto inline-flex items-center",
-    trailingIcon: "size-4 text-dimmed",
+    trailingIcon: "size-4 text-primary",
+    trailingIconDefault: "size-4 text-dimmed",
+    footer: "border-t-default border-t p-1.5",
+    reset:
+      "text-default hover:bg-accented/30 flex w-full cursor-pointer select-none items-center gap-1.5 rounded-sm py-1 pl-2 pr-1 text-sm outline-none",
+    resetIcon: "text-dimmed size-4 shrink-0",
     empty: "text-muted px-5 py-4 text-xs",
   },
 });
@@ -27,12 +41,21 @@ const appConfig = useDmsAppConfig() as DmsAppConfig & {
   ui: { tableMenuSort: Partial<typeof theme> };
 };
 
-const columns = computed(() =>
+interface SortableColumnItem {
+  id: string;
+  label: string;
+  kind: SortValueKind;
+}
+
+const columns = computed<SortableColumnItem[]>(() =>
   (tableSharedData?.value?.labeledColumns.value || [])
     .filter((col) => col.column.getCanSort())
     .map((col) => ({
       id: col.column.id,
       label: col.label,
+      kind: sortValueKind(
+        (col.column.columnDef as TableColumn<T>).type?.id as string | undefined,
+      ),
     })),
 );
 
@@ -42,6 +65,40 @@ const sorting = computed(
 
 const currentSort = computed(() => sorting.value[0]);
 
+const isUsingDefaultSort = computed(
+  () => !!tableSharedData?.value?.isUsingDefaultSort.value,
+);
+
+// "Sorted by: Due date, oldest → newest · default". The default sort's field
+// may not be a displayed column: the table view names it.
+const sortStatus = computed(() => {
+  const active = currentSort.value;
+  if (!active) return undefined;
+  const shared = tableSharedData?.value;
+  const column = columns.value.find((col) => col.id === active.id);
+  const isDefaultField = shared?.defaultSort?.field === active.id;
+  const label =
+    column?.label ??
+    (isDefaultField ? shared?.defaultSortLabel : undefined) ??
+    active.id;
+  const kind =
+    column?.kind ??
+    (isDefaultField ? shared?.defaultSortKind : undefined) ??
+    "text";
+  return {
+    column: label,
+    direction: t(sortDirectionLabelKey(kind, !!active.desc)),
+    isDefault: isUsingDefaultSort.value,
+  };
+});
+
+// Offered while the user's sort replaces the table's default one.
+const canResetToDefault = computed(
+  () =>
+    !!tableSharedData?.value?.defaultSort &&
+    !!tableSharedData.value.hasCustomSort.value,
+);
+
 const SORT_ICONS = {
   asc: "i-ph-arrow-up",
   desc: "i-ph-arrow-down",
@@ -52,6 +109,7 @@ function getSortIcon(columnId: string): string | undefined {
   return currentSort.value.desc ? SORT_ICONS.desc : SORT_ICONS.asc;
 }
 
+// Same cycle as the column headers: ascending, descending, then off.
 function toggleSort(columnId: string) {
   if (!tableSharedData?.value) return;
 
@@ -71,6 +129,10 @@ function toggleSort(columnId: string) {
   tableSharedData.value.sortingState.value = [];
 }
 
+function resetToDefault() {
+  tableSharedData?.value?.resetSorting();
+}
+
 const uiTableMenuSortVariant = tv({
   extend: tv(theme),
   ...(appConfig.ui?.tableMenuSort || {}),
@@ -80,6 +142,20 @@ const uiTableMenuSort = computed(() => uiTableMenuSortVariant());
 
 <template>
   <div :class="uiTableMenuSort.root()">
+    <p v-if="sortStatus" :class="uiTableMenuSort.status()">
+      {{ t("dms.sort.sorted_by") }}
+      <span :class="uiTableMenuSort.statusColumn()">
+        {{ sortStatus.column }}
+      </span>
+      , {{ sortStatus.direction }}
+      <span
+        v-if="sortStatus.isDefault"
+        :class="uiTableMenuSort.statusDefault()"
+      >
+        · {{ t("dms.sort.default_suffix") }}
+      </span>
+    </p>
+
     <ul v-if="columns.length" :class="uiTableMenuSort.list()">
       <li
         v-for="column in columns"
@@ -94,7 +170,11 @@ const uiTableMenuSort = computed(() => uiTableMenuSortVariant());
           <Icon
             v-if="getSortIcon(column.id)"
             :name="getSortIcon(column.id)!"
-            :class="uiTableMenuSort.trailingIcon()"
+            :class="
+              isUsingDefaultSort
+                ? uiTableMenuSort.trailingIconDefault()
+                : uiTableMenuSort.trailingIcon()
+            "
           />
         </span>
       </li>
@@ -103,5 +183,19 @@ const uiTableMenuSort = computed(() => uiTableMenuSortVariant());
     <p v-else :class="uiTableMenuSort.empty()">
       {{ t("dms.sort.no_sorting") }}
     </p>
+
+    <div v-if="canResetToDefault" :class="uiTableMenuSort.footer()">
+      <button
+        type="button"
+        :class="uiTableMenuSort.reset()"
+        @click="resetToDefault"
+      >
+        <Icon
+          name="i-ph-arrow-counter-clockwise"
+          :class="uiTableMenuSort.resetIcon()"
+        />
+        {{ t("dms.sort.reset_default") }}
+      </button>
+    </div>
   </div>
 </template>

package/frontend-vue/layers/dms-ui/app/build/components/table/MenuViewMode.vue

@@ -2,9 +2,12 @@
 import { injectLocal } from "@vueuse/core";
 import { tv } from "tailwind-variants";
 import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
-import type { ShallowRef } from "vue";
-import type { TableSharedData, Data } from "./Table.vue";
-import { KANBAN_DISPLAY_ID } from "../../../composables/table-view/types";
+import type { ModelRef, ShallowRef } from "vue";
+import type { KanbanGroupByOption, TableSharedData, Data } from "./Table.vue";
+import {
+  GROUPED_DISPLAY_ID,
+  KANBAN_DISPLAY_ID,
+} from "../../../composables/table-view/types";
 
 const theme = tv({
   slots: {
@@ -43,23 +46,41 @@ const setActiveDisplay = (id: string) => {
 // when no translation exists, so literals pass through unchanged.
 const displayItems = computed(() => tableSharedData.value?.displays ?? []);
 
-const groupByOptions = computed(
-  () => tableSharedData.value?.kanbanGroupByOptions ?? [],
-);
-const groupByField = computed(
-  () => tableSharedData.value?.kanbanGroupByState.value,
-);
+/** The group-by a display lets the user pick, and the model it edits. */
+interface DisplayGroupBy {
+  options: KanbanGroupByOption[];
+  state: ModelRef<string>;
+}
+
+type DisplayGroupByReader = (
+  shared: TableSharedData<T>,
+) => DisplayGroupBy | undefined;
+
+const DISPLAY_GROUP_BY: Record<string, DisplayGroupByReader> = {
+  [KANBAN_DISPLAY_ID]: (shared) => ({
+    options: shared.kanbanGroupByOptions,
+    state: shared.kanbanGroupByState,
+  }),
+  [GROUPED_DISPLAY_ID]: (shared) => ({
+    options: shared.groupedGroupByOptions,
+    state: shared.groupedGroupByState,
+  }),
+};
+
+const activeGroupBy = computed(() => {
+  const shared = tableSharedData.value;
+  return shared ? DISPLAY_GROUP_BY[activeDisplay.value]?.(shared) : undefined;
+});
+
+const groupByOptions = computed(() => activeGroupBy.value?.options ?? []);
+const groupByField = computed(() => activeGroupBy.value?.state.value);
 
 const selectGroupBy = (value: string) => {
-  if (!tableSharedData.value) return;
-  tableSharedData.value.kanbanGroupByState.value = value;
+  if (!activeGroupBy.value) return;
+  activeGroupBy.value.state.value = value;
 };
 
-const showGroupBy = computed(
-  () =>
-    activeDisplay.value === KANBAN_DISPLAY_ID &&
-    groupByOptions.value.length > 0,
-);
+const showGroupBy = computed(() => groupByOptions.value.length > 0);
 
 const uiTableMenuViewModeVariant = tv({
   extend: tv(theme),

package/frontend-vue/layers/dms-ui/app/build/components/table/MonoCell.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useClipboard } from "@vueuse/core";
+
+// A value in the mono font (an id, a key, a slug), with a button copying it
+// that shows on hover.
+
+interface Props {
+  value: string;
+  /** Draws the copy button. */
+  copy?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+const toast = useToast();
+const { copy: copyToClipboard } = useClipboard({ legacy: true });
+
+const copyValue = async () => {
+  await copyToClipboard(props.value);
+  toast.add({
+    title: t("dms.table.cell.copied"),
+    color: Color.success,
+    icon: "i-ph-check",
+  });
+};
+</script>
+
+<template>
+  <span class="group/mono inline-flex min-w-0 items-center gap-1">
+    <span class="text-toned truncate font-mono" :title="props.value">
+      {{ props.value }}
+    </span>
+    <UButton
+      v-if="props.copy"
+      icon="i-ph-copy"
+      color="neutral"
+      variant="ghost"
+      size="xs"
+      square
+      :aria-label="t('dms.table.cell.copy')"
+      class="text-dimmed shrink-0 opacity-0 transition-opacity group-hover/mono:opacity-100 focus-visible:opacity-100"
+      @click.stop="copyValue"
+      @dblclick.stop
+    />
+  </span>
+</template>