@antelopejs/dms 0.5.5 → 0.6.0

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

@@ -1,16 +1,24 @@
 <script setup lang="ts" generic="T extends Data">
-import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
-import { tv } from "tailwind-variants";
 import { injectLocal } from "@vueuse/core";
-import { useId, type ShallowRef } from "vue";
+import type { ShallowRef } from "vue";
+import DmsEmptyState, {
+  type EmptyStateVariant,
+} from "../../../components/empty-state/EmptyState.vue";
 
 import type { TableSharedData, Data } from "./Table.vue";
+import { clearTableFiltersLabelKey } from "../../composables/table/utils/clearTableFilters";
+import type {
+  TableViewEmptyStateConfig,
+  TableViewEmptyStateKind,
+  TableViewEmptyStatesConfig,
+} from "../../../composables/table-view/types";
+import { buttonLinkProps } from "../../utils/link";
+import { interpolateLiteral } from "../../utils/literalText";
+import { readTranslationKey } from "#dms-core/app/composables/translation/useTranslation";
 
-const theme = tv({
-  slots: {
-    root: "relative flex min-h-96 w-full flex-col items-center justify-center overflow-hidden rounded-b-lg z-10",
-  },
-});
+// The table's empty body: the generic v2 empty state (hatched, 44px well),
+// worded and equipped for why the table is empty — load error, filters
+// matching nothing, archive view, or no rows yet.
 
 interface TableEmptyProps {
   canAddRow?: boolean;
@@ -19,36 +27,68 @@ interface TableEmptyProps {
    * error state so a refused query never reads as "no data".
    */
   loadError?: string;
+  /** The table lists archived rows (archive mode toggle on). */
+  archived?: boolean;
+  /**
+   * The table's own words per reason it is empty (backend `emptyStates`),
+   * texts receiving `{ search }`; the table's own actions stay in front.
+   */
+  emptyStates?: TableViewEmptyStatesConfig;
 }
 
 const props = defineProps<TableEmptyProps>();
 
 const { t, te } = useI18n();
-
-const appConfig = useDmsAppConfig() as DmsAppConfig & {
-  ui: { tableEmpty: Partial<typeof theme> };
-};
+const { processI18n } = useTranslation();
 
 const tableSharedDataRef =
   injectLocal<ShallowRef<TableSharedData<T>>>("tableSharedData");
 const tableSharedData = computed(() => tableSharedDataRef?.value);
 
-const stripesId = `table-empty-stripes-${useId()}`;
+// A search, a filter chip or a quick filter narrows the rows.
+const isFiltered = computed(() => !!tableSharedData.value?.isFiltered?.value);
+// What the clear action would clear; nothing (only default filters left at
+// their value) offers no action.
+const clearable = computed(
+  () => tableSharedData.value?.clearableFilters?.value,
+);
 
-const isFiltered = computed(() => {
-  const hasGlobalFilter = !!tableSharedData.value?.globalFilterState?.value;
-  const hasColumnFilters =
-    (tableSharedData.value?.columnFiltersState?.value?.length ?? 0) > 0;
-  return hasGlobalFilter || hasColumnFilters;
+// Why the body is empty; the archive view keeps its own words.
+const kind = computed<TableViewEmptyStateKind | undefined>(() => {
+  if (props.loadError) return "error";
+  if (isFiltered.value) return "filtered";
+  if (props.archived) return undefined;
+  return "firstRun";
 });
+const declared = computed<TableViewEmptyStateConfig | undefined>(() =>
+  kind.value
+    ? (props.emptyStates ?? tableSharedData.value?.emptyStates)?.[kind.value]
+    : undefined,
+);
+const search = computed(
+  () => tableSharedData.value?.globalFilterState.value ?? "",
+);
+const declaredText = (text: string | undefined) => {
+  if (!text) return undefined;
+  const params = { search: search.value };
+  return readTranslationKey(text).isKey
+    ? processI18n(text, params)
+    : interpolateLiteral(text, params);
+};
+const customComponent = computed(() => {
+  const name = declared.value?.component?.componentName;
+  return name ? resolveDmsComponent(name) || name : undefined;
+});
+const refresh = () => tableSharedData.value?.emits("refresh");
 
 interface EmptyStateContent {
   title: string;
   description: string;
   icon: string;
+  variant: EmptyStateVariant;
 }
 
-const content = computed<EmptyStateContent>(() => {
+const builtInContent = computed<EmptyStateContent>(() => {
   if (props.loadError) {
     // Only a resolvable key is rendered: `t()` echoes an unknown key verbatim,
     // and an error body is not necessarily a key. Error entries carry a
@@ -61,83 +101,136 @@ const content = computed<EmptyStateContent>(() => {
           ? t(props.loadError)
           : t("dms.table.load_error_message"),
       icon: "i-ph-warning-circle",
+      variant: "error",
     };
   }
   if (isFiltered.value) {
     return {
       title: t("dms.table.no_results_title"),
       description: t("dms.table.no_results_message"),
-      icon: "i-ph-folder-open",
+      icon: "i-ph-magnifying-glass",
+      variant: "no-result",
+    };
+  }
+  if (props.archived) {
+    return {
+      title: t("dms.table.archived_empty_title"),
+      description: t("dms.table.archived_empty_message"),
+      icon: "i-ph-archive",
+      variant: "no-data",
     };
   }
   return {
     title: t("dms.table.empty_title"),
     description: t("dms.table.empty_message"),
-    icon: "i-ph-folder-open",
+    icon: "i-ph-tray",
+    variant: "no-data",
   };
 });
 
+const content = computed<EmptyStateContent>(() => {
+  const state = declared.value;
+  if (!state) return builtInContent.value;
+  return {
+    ...builtInContent.value,
+    title: declaredText(state.title) ?? builtInContent.value.title,
+    description: declaredText(state.description) ?? "",
+    icon: state.icon ?? builtInContent.value.icon,
+  };
+});
+
+const declaredActions = computed(() =>
+  (declared.value?.actions ?? []).map((action) => ({
+    label: processI18n(action.label),
+    icon: action.icon,
+    color: action.color ?? ("neutral" as const),
+    variant: action.variant ?? ("outline" as const),
+    size: "md" as const,
+    ...buttonLinkProps(action.to),
+  })),
+);
+
 const actions = computed(() => {
+  const own = builtInActions.value ?? [];
+  const all = [...own, ...declaredActions.value];
+  return all.length > 0 ? all : undefined;
+});
+
+const builtInActions = computed(() => {
   if (props.loadError) {
     return [
       {
         label: t("dms.table.load_error_retry"),
+        icon: "i-ph-arrows-clockwise",
         color: "neutral" as const,
+        variant: "outline" as const,
+        size: "md" as const,
         onClick: () => tableSharedData.value?.emits("refresh"),
       },
     ];
   }
+  if (isFiltered.value) {
+    const parts = clearable.value;
+    if (!parts?.filters && !parts?.search) return undefined;
+    return [
+      {
+        label: t(clearTableFiltersLabelKey(parts)),
+        icon: "i-ph-x",
+        color: "neutral" as const,
+        variant: "outline" as const,
+        size: "md" as const,
+        onClick: () => tableSharedData.value?.resetFilters(),
+      },
+    ];
+  }
+  if (props.archived) {
+    return [
+      {
+        label: t("dms.table.show_active"),
+        icon: "i-ph-arrow-left",
+        color: "neutral" as const,
+        variant: "outline" as const,
+        size: "md" as const,
+        onClick: () => {
+          const state = tableSharedData.value?.showArchivedState;
+          if (state) state.value = false;
+        },
+      },
+    ];
+  }
   if (props.canAddRow) {
     return [
       {
         label: t("dms.table.new_row"),
-        color: "neutral" as const,
+        icon: "i-ph-plus",
+        color: "primary" as const,
+        size: "md" as const,
         onClick: () => tableSharedData.value?.emits("add"),
       },
     ];
   }
   return undefined;
 });
-
-const uiTableEmptyVariant = tv({
-  extend: tv(theme),
-  ...(appConfig.ui?.tableEmpty || {}),
-});
-const uiTableEmpty = computed(() => uiTableEmptyVariant());
 </script>
 
 <template>
-  <div :class="uiTableEmpty.root()">
-    <svg
-      class="stroke-inverted/10 absolute inset-0 -z-10 size-full"
-      fill="none"
-    >
-      <defs>
-        <pattern
-          :id="stripesId"
-          x="0"
-          y="0"
-          width="10"
-          height="10"
-          patternUnits="userSpaceOnUse"
-        >
-          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
-        </pattern>
-      </defs>
-      <rect
-        stroke="none"
-        :fill="`url(#${stripesId})`"
-        width="100%"
-        height="100%"
-      />
-    </svg>
-
-    <UEmpty
-      :title="content.title"
-      :description="content.description"
-      :actions="actions"
-      :icon="content.icon"
-      variant="naked"
-    />
-  </div>
+  <component
+    :is="customComponent"
+    v-if="customComponent"
+    v-bind="declared?.component?.options"
+    :state="kind"
+    :search="search"
+    :refresh="refresh"
+  />
+  <DmsEmptyState
+    v-else
+    :variant="content.variant"
+    :icon="content.icon"
+    :title="content.title"
+    :description="content.description"
+    :actions="actions"
+    size="lg"
+    hatched
+    class="z-10 w-full"
+  />
 </template>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts" generic="T extends Data">
+import { EYEBROW_CLASS } from "../../utils/eyebrow";
 import { injectLocal } from "@vueuse/core";
 import { tv } from "tailwind-variants";
 import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
@@ -10,26 +11,42 @@ import type {
   TableSharedData,
 } from "./Table.vue";
 import TableMenuFilter from "./MenuFilter.vue";
+import { formatFilterValue } from "../../composables/table/utils/formatFilterValue";
+import { clearTableFiltersLabelKey } from "../../composables/table/utils/clearTableFilters";
 
+// v2 filters band: a muted strip of segmented chips (field │ mode │ value │ ×);
+// a chip opens its value editor in a popover.
 const theme = tv({
   slots: {
-    root: "border-default bg-elevated/30 flex items-end gap-3 rounded-md border px-3 py-2 mt-3",
-    list: "flex flex-wrap items-end gap-3",
-    item: "relative flex min-w-40 flex-col gap-1",
-    header: "flex items-center gap-1.5",
+    root: "flex flex-wrap items-center gap-2 border-b border-default bg-(--dms-bg-muted) py-2.5 ps-[18px] pe-3.5",
+    list: "flex min-w-0 flex-wrap items-center gap-2",
+    // A chip never outgrows the row: on a phone its compare mode and value
+    // shrink to an ellipsis (the chip's tooltip spells them out).
+    item: "flex h-7 max-w-full min-w-0 items-stretch divide-x divide-default overflow-hidden rounded-md border border-accented bg-(--ui-bg) text-[12.5px] shadow-xs has-[[data-state=open]]:border-primary has-[[data-state=open]]:ring-[3px] has-[[data-state=open]]:ring-primary/16",
+    chip: "flex min-w-0 items-stretch divide-x divide-default hover:bg-elevated/60",
     label:
-      "text-dimmed font-mono text-[10px] font-medium uppercase tracking-widest",
-    mode: "text-muted text-[10px] not-italic normal-case",
-    deleteManual: "size-4",
+      "flex shrink-0 items-center gap-1.5 px-2 font-[550] whitespace-nowrap text-highlighted [&>svg]:size-3.5 [&>svg]:text-dimmed",
+    mode: "min-w-0 shrink-[3] truncate px-2 font-mono text-[11px] leading-[26px] font-medium text-muted",
+    value:
+      "max-w-48 min-w-9 truncate px-2 leading-[26px] font-[550] text-primary",
+    remove:
+      "grid w-[26px] place-items-center text-dimmed hover:bg-elevated hover:text-highlighted [&>svg]:size-3.5",
+    editor: "grid w-72 gap-2 p-3",
+    editorLabel: `${EYEBROW_CLASS} text-dimmed`,
     inputWrapper: "w-full",
-    inputDisplay:
-      "text-default text-sm py-1.5 px-2 rounded-md border border-default bg-default min-h-9 flex items-center",
-    actions: "ms-auto flex shrink-0 items-center gap-1.5 min-h-9",
-    popover:
-      "bg-default text-default ring-default w-72 rounded-sm shadow ring-1",
+    emptyValue: "text-muted",
+    actions: "ms-auto flex shrink-0 items-center gap-1.5",
+    popover: "w-72",
+  },
+  variants: {
+    pinned: {
+      true: { item: "border-dashed" },
+    },
   },
 });
 
+const EMPTY_FILTER_VALUE = "—";
+
 const tableSharedData =
   injectLocal<ShallowRef<TableSharedData<T>>>("tableSharedData");
 const { t } = useI18n();
@@ -109,11 +126,59 @@ const deleteFilter = (index: number) => {
   tableSharedData?.value?.deleteFilter(index);
 };
 
+// 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 reset = () => {
   tableSharedData?.value?.resetFilters();
 };
 
 const addFilterOpen = ref(false);
+
+const { locale } = useI18n();
+const { getDataType } = useDataTypes();
+
+// Select-like filters show the option labels, not the raw stored values
+// (their formatter renders a pill, which a chip can't hold).
+const itemLabels = (filter: TableFilter): string | undefined => {
+  const items = resolveFilterComponent(filter)?.options?.items;
+  if (!Array.isArray(items) || filter.value === undefined) return undefined;
+  const values = Array.isArray(filter.value) ? filter.value : [filter.value];
+  const labels = values.map((value) => {
+    const item = items.find(
+      (candidate) => (candidate as { value?: unknown })?.value === value,
+    ) as { label?: unknown } | undefined;
+    return item?.label !== undefined ? String(item.label) : String(value);
+  });
+  return labels.length ? labels.join(", ") : undefined;
+};
+
+const displayValue = (filter: TableFilter): string => {
+  const labels = itemLabels(filter);
+  if (labels) return labels;
+  const formatted = formatFilterValue(
+    filter,
+    columns.value.map((column) => ({ ...column, value: column.id })),
+    getDataType,
+    locale.value,
+  );
+  return formatted || EMPTY_FILTER_VALUE;
+};
+
+// The whole filter in words, for a chip shrunk to an ellipsis.
+const chipTitle = (filter: TableFilter): string =>
+  [
+    getColumn(filter.accessorKey)?.label,
+    t(`dms.table.compare_mode.${filter.mode}`),
+    displayValue(filter),
+  ]
+    .filter(Boolean)
+    .join(" · ");
 </script>
 
 <template>
@@ -122,70 +187,84 @@ const addFilterOpen = ref(false);
       <li
         v-for="(filter, index) in filters"
         :key="`${filter.accessorKey}-${index}`"
-        :class="ui.item()"
+        :class="ui.item({ pinned: !!filter.pinned })"
       >
-        <div :class="ui.header()">
-          <span :class="ui.label()">
-            {{ getColumn(filter.accessorKey)?.label }}
-          </span>
-          <span :class="ui.mode()">
-            {{ t(`dms.table.compare_mode.${filter.mode}`) }}
-          </span>
+        <UPopover :content="{ align: 'start', sideOffset: 6 }">
+          <button type="button" :class="ui.chip()" :title="chipTitle(filter)">
+            <span :class="ui.label()">
+              {{ getColumn(filter.accessorKey)?.label }}
+            </span>
+            <span :class="ui.mode()">
+              {{ t(`dms.table.compare_mode.${filter.mode}`) }}
+            </span>
+            <span :class="ui.value()">{{ displayValue(filter) }}</span>
+          </button>
+
+          <template #content>
+            <div :class="ui.editor()">
+              <span :class="ui.editorLabel()">
+                {{ getColumn(filter.accessorKey)?.label }} ·
+                {{ t(`dms.table.compare_mode.${filter.mode}`) }}
+              </span>
+              <Suspense>
+                <Component
+                  :is="
+                    resolveAsyncComponent(
+                      resolveFilterComponent(filter)?.componentName,
+                    )
+                  "
+                  v-if="resolveFilterComponent(filter)"
+                  :model-value="filter.value"
+                  :class="ui.inputWrapper()"
+                  v-bind="
+                    JSON.parse(
+                      JSON.stringify({
+                        ...(resolveFilterComponent(filter)?.options || {}),
+                      }),
+                    )
+                  "
+                  @update:model-value="updateFilterValue(index, $event)"
+                />
+                <span v-else :class="ui.emptyValue()">
+                  {{ EMPTY_FILTER_VALUE }}
+                </span>
+              </Suspense>
+            </div>
+          </template>
+        </UPopover>
+
+        <button
+          v-if="!filter.pinned"
+          type="button"
+          :class="ui.remove()"
+          :aria-label="t('dms.button.delete')"
+          @click="deleteFilter(index)"
+        >
+          <UIcon :name="appConfig.ui.icons.close" />
+        </button>
+      </li>
+
+      <li>
+        <UPopover v-model:open="addFilterOpen">
           <UButton
-            v-if="!filter.pinned"
-            :ui="{ base: ui.deleteManual() }"
-            :icon="appConfig.ui.icons.close"
-            :aria-label="t('dms.button.delete')"
+            :icon="appConfig.ui.icons.plus"
+            :label="t('dms.table.add_filter')"
             color="neutral"
-            variant="ghost"
-            size="xs"
-            square
-            @click="deleteFilter(index)"
+            :variant="addFilterOpen ? 'soft' : 'ghost'"
+            size="sm"
           />
-        </div>
-
-        <Suspense>
-          <Component
-            :is="
-              resolveAsyncComponent(
-                resolveFilterComponent(filter)?.componentName,
-              )
-            "
-            v-if="resolveFilterComponent(filter)"
-            :model-value="filter.value"
-            :class="ui.inputWrapper()"
-            v-bind="
-              JSON.parse(
-                JSON.stringify({
-                  ...(resolveFilterComponent(filter)?.options || {}),
-                }),
-              )
-            "
-            @update:model-value="updateFilterValue(index, $event)"
-          />
-          <span v-else :class="ui.inputDisplay()">—</span>
-        </Suspense>
+          <template #content>
+            <div :class="ui.popover()">
+              <TableMenuFilter is-form-only @submit="addFilterOpen = false" />
+            </div>
+          </template>
+        </UPopover>
       </li>
     </ul>
 
-    <div :class="ui.actions()">
-      <UPopover v-model:open="addFilterOpen">
-        <UButton
-          :icon="appConfig.ui.icons.plus"
-          :label="t('dms.table.add_filter')"
-          color="neutral"
-          :variant="addFilterOpen ? 'soft' : 'ghost'"
-          size="sm"
-        />
-        <template #content>
-          <div :class="ui.popover()">
-            <TableMenuFilter is-form-only @submit="addFilterOpen = false" />
-          </div>
-        </template>
-      </UPopover>
-
+    <div v-if="canClear && clearable" :class="ui.actions()">
       <UButton
-        :label="t('dms.button.reset')"
+        :label="t(clearTableFiltersLabelKey(clearable))"
         :icon="appConfig.ui.icons.close"
         color="neutral"
         variant="ghost"

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

@@ -7,6 +7,7 @@ import TableMenuSort from "./MenuSort.vue";
 import TableMenuFilter from "./MenuFilter.vue";
 import TableMenuImport from "./MenuImport.vue";
 import TableMenuViewMode from "./MenuViewMode.vue";
+import TableMenuDensity from "./MenuDensity.vue";
 import { tv } from "tailwind-variants";
 import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
 
@@ -36,7 +37,14 @@ const appConfig = useDmsAppConfig() as DmsAppConfig & {
 };
 
 const menuViews: Record<
-  "root" | "filters" | "columns" | "sort" | "page" | "import" | "viewMode",
+  | "root"
+  | "filters"
+  | "columns"
+  | "sort"
+  | "page"
+  | "density"
+  | "import"
+  | "viewMode",
   { title: string; root?: boolean; component: Component }
 > = {
   root: {
@@ -60,6 +68,10 @@ const menuViews: Record<
     title: t("dms.table.page_size_title"),
     component: TableMenuPage,
   },
+  density: {
+    title: t("dms.table.density_title"),
+    component: TableMenuDensity,
+  },
   import: {
     title: t("dms.table.import_config_title"),
     component: TableMenuImport,

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

@@ -0,0 +1,80 @@
+<script setup lang="ts" generic="T extends Data">
+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 { Data, TableDensity, TableSharedData } from "./Table.vue";
+
+const theme = tv({
+  slots: {
+    list: "p-1.5",
+    item: "text-default hover:bg-accented/30 relative flex w-full cursor-default select-none items-center gap-1.5 rounded-sm py-1 pl-2 pr-1 text-sm",
+    leadingIcon: "size-4 text-dimmed",
+    itemLabel: "grow truncate",
+    checkIcon: "text-primary size-4",
+  },
+});
+
+interface DensityItem {
+  value: TableDensity;
+  label: string;
+  icon: string;
+}
+
+const DENSITY_ITEMS: DensityItem[] = [
+  {
+    value: "default",
+    label: "dms.table.density_default",
+    icon: "i-ph-rows",
+  },
+  {
+    value: "compact",
+    label: "dms.table.density_compact",
+    icon: "i-ph-list-dashes",
+  },
+];
+
+const tableSharedDataRef =
+  injectLocal<ShallowRef<TableSharedData<T>>>("tableSharedData");
+const tableSharedData = computed(() => tableSharedDataRef?.value);
+
+const { t } = useI18n();
+
+const appConfig = useDmsAppConfig() as DmsAppConfig & {
+  ui: { tableMenuDensity: Partial<typeof theme> };
+};
+
+const activeDensity = computed(
+  () => tableSharedData.value?.densityState.value ?? "default",
+);
+
+const selectDensity = (value: TableDensity) => {
+  if (!tableSharedData.value) return;
+  tableSharedData.value.densityState.value = value;
+};
+
+const uiTableMenuDensityVariant = tv({
+  extend: tv(theme),
+  ...(appConfig.ui?.tableMenuDensity || {}),
+});
+const uiTableMenuDensity = computed(() => uiTableMenuDensityVariant());
+</script>
+
+<template>
+  <ul :class="uiTableMenuDensity.list()">
+    <li
+      v-for="item in DENSITY_ITEMS"
+      :key="item.value"
+      :class="uiTableMenuDensity.item()"
+      @click="selectDensity(item.value)"
+    >
+      <Icon :name="item.icon" :class="uiTableMenuDensity.leadingIcon()" />
+      <span :class="uiTableMenuDensity.itemLabel()">{{ t(item.label) }}</span>
+      <Icon
+        v-if="activeDensity === item.value"
+        :name="appConfig.ui.icons.check"
+        :class="uiTableMenuDensity.checkIcon()"
+      />
+    </li>
+  </ul>
+</template>