@antelopejs/dms 0.11.0 → 0.12.0

package/frontend-vue/layers/dms-ui/app/build/composables/table/tableColumnActionDescriptors.ts

@@ -0,0 +1,306 @@
+import type { Data } from "../../components/table/Table.vue";
+import { isObject, isNumber } from "#dms-core/app/utils/type-check";
+import type { DropdownMenuItem } from "@nuxt/ui/components/DropdownMenu.vue";
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+import { createMenuItem } from "./utils/menuItemFactory";
+import {
+  FormContainerType,
+  DEFAULT_FORM_CONTAINER_TYPE,
+} from "../table-view/types";
+import { fillFormPageUrl } from "../table-view/useTableViewConfig";
+import { resolveConfirmText } from "../confirm/confirmDialogTexts";
+
+import type {
+  TableColumnContext,
+  RowActionDescriptor,
+} from "./tableColumnTypes";
+
+export const BUILTIN_ROW_ACTION_KEYS = [
+  "copyLink",
+  "details",
+  "edit",
+  "duplicate",
+  "delete",
+  "archive",
+  "restore",
+] as const;
+
+const DESTRUCTIVE_ROW_ACTION_KEYS = new Set(["delete", "archive", "restore"]);
+
+export const isShowingArchived = <T extends Data>(
+  context: TableColumnContext<T>,
+) => {
+  const { config } = context;
+  return config.showArchived?.value === true;
+};
+
+export const isCustomActionInline = (action: CustomRowAction): boolean => {
+  return action.isVisible === true;
+};
+
+const normalizedConfigOf = <T extends Data>(
+  context: TableColumnContext<T>,
+  key: (typeof BUILTIN_ROW_ACTION_KEYS)[number],
+): RowActionConfig | undefined => {
+  const { config } = context;
+
+  const actionConfig = config.rowActions?.[key];
+  return isObject(actionConfig) ? actionConfig : undefined;
+};
+
+export const isOffMode = <T extends Data>(
+  context: TableColumnContext<T>,
+  descriptor: RowActionDescriptor,
+): boolean => {
+  const { config } = context;
+
+  if (!config.showArchived) return false;
+  return isShowingArchived(context)
+    ? descriptor.key === "archive"
+    : descriptor.key === "restore";
+};
+
+const isActionDisabled = <T extends Data>(
+  context: TableColumnContext<T>,
+  actionConfig: boolean | RowActionConfig | undefined,
+  rowData: T,
+): boolean => {
+  const { config } = context;
+
+  const actionConfigNormalized = normalizeActionConfig(actionConfig);
+  if (!actionConfigNormalized.isEnabled) return true;
+  if (!actionConfigNormalized.rule) return false;
+
+  const validator = createActionValidator(
+    actionConfigNormalized,
+    config.data.value,
+    config.rowIdKey,
+  );
+  return !validator.canPerformAction(get(rowData, config.rowIdKey));
+};
+
+const rowText = <T extends Data>(
+  context: TableColumnContext<T>,
+  text: string,
+  rowData: T,
+): string => {
+  const { t } = context;
+  return resolveConfirmText(text, rowData, t);
+};
+
+export const menuLabel = <T extends Data>(
+  context: TableColumnContext<T>,
+  rowData: T,
+): string => {
+  const { config, t } = context;
+
+  const declared = config.rowActions?.menuLabel;
+  if (declared) return rowText(context, declared, rowData);
+  const label = config.labelKey ? get(rowData, config.labelKey) : undefined;
+  return isString(label) || isNumber(label)
+    ? t("dms.table.row_actions_for", { label })
+    : t("dms.table.row_actions");
+};
+
+const isCustomActionDisabled = <T extends Data>(
+  context: TableColumnContext<T>,
+  action: CustomRowAction,
+  rowData: T,
+): boolean => {
+  const { config } = context;
+
+  if (!action.rule) return false;
+
+  const validator = createActionValidator(
+    { isEnabled: true, rule: action.rule },
+    config.data.value,
+    config.rowIdKey,
+  );
+  return !validator.canPerformAction(get(rowData, config.rowIdKey));
+};
+
+const buildCopyLinkOnSelect = <T extends Data>(
+  context: TableColumnContext<T>,
+  rowData: T,
+) => {
+  const { config, t, router, toast, copyToClipboard } = context;
+  return async () => {
+    let itemUrl: string;
+    const currentRoute = router.currentRoute.value;
+
+    const containerType =
+      config.formContainer?.type ?? DEFAULT_FORM_CONTAINER_TYPE;
+    const viewPageUrl =
+      containerType === FormContainerType.page
+        ? config.formPages?.view
+        : undefined;
+    if (viewPageUrl) {
+      const itemId = get(rowData, config.rowIdKey);
+      itemUrl = `${window.location.origin}${fillFormPageUrl(viewPageUrl, config.routeParams, itemId)}`;
+    } else {
+      const updatedQuery = {
+        ...currentRoute.query,
+        [`${config.componentId}:id`]: get(rowData, config.rowIdKey),
+      };
+      itemUrl = `${window.location.origin}${currentRoute.path}?${new URLSearchParams(updatedQuery).toString()}`;
+    }
+
+    await copyToClipboard(itemUrl);
+
+    toast.add({
+      title: t("dms.table.link_copied"),
+      color: Color.success,
+    });
+  };
+};
+
+const copyLinkAfterConfirm = async <T extends Data>(
+  context: TableColumnContext<T>,
+  rowData: T,
+) => {
+  const { config, confirmAction } = context;
+
+  const declared = normalizedConfigOf(context, "copyLink")?.confirm;
+  if (declared) {
+    const isConfirmed = await confirmAction(declared, {
+      row: rowData,
+      urlParams: { id: get(rowData, config.rowIdKey) },
+    });
+    if (!isConfirmed) return;
+  }
+  await buildCopyLinkOnSelect(context, rowData)();
+};
+
+const buildCustomActionDescriptors = <T extends Data>(
+  context: TableColumnContext<T>,
+  rowData: T,
+): RowActionDescriptor[] => {
+  const { config } = context;
+  return (config.rowActions?.custom || []).map((action) => ({
+    label: rowText(context, action.label, rowData),
+
+    icon: action.icon || (action.showLabel ? "" : "i-ph-lightning"),
+    onSelect: () => config.onCustomRowAction?.(action, rowData),
+    disabled: isCustomActionDisabled(context, action, rowData),
+    visible: isCustomActionInline(action),
+    color: action.color,
+    variant: action.variant,
+    showLabel: action.showLabel,
+  }));
+};
+
+const builtInLabel = <T extends Data>(
+  context: TableColumnContext<T>,
+  key: (typeof BUILTIN_ROW_ACTION_KEYS)[number],
+  fallback: string,
+): string => {
+  const { processI18n } = context;
+
+  const label = normalizedConfigOf(context, key)?.label;
+  return label ? processI18n(label) : fallback;
+};
+
+const builtInIcon = <T extends Data>(
+  context: TableColumnContext<T>,
+  key: (typeof BUILTIN_ROW_ACTION_KEYS)[number],
+  fallback: string,
+): string => {
+  return normalizedConfigOf(context, key)?.icon ?? fallback;
+};
+
+const buildBuiltInActionDescriptors = <T extends Data>(
+  context: TableColumnContext<T>,
+  rowData: T,
+): RowActionDescriptor[] => {
+  const { config, t } = context;
+  return [
+    {
+      key: "copyLink",
+      label: builtInLabel(context, "copyLink", t("dms.button.copy_link")),
+      icon: builtInIcon(context, "copyLink", "i-ph-link"),
+      onSelect: () => copyLinkAfterConfirm(context, rowData),
+      disabled: isActionDisabled(context, config.rowActions?.copyLink, rowData),
+      visible: isActionVisible(config.rowActions?.copyLink),
+    },
+    {
+      key: "details",
+      label: builtInLabel(context, "details", t("dms.button.details")),
+      icon: builtInIcon(context, "details", "i-ph-info"),
+      onSelect: () => config.emits("details", rowData),
+      disabled: isActionDisabled(context, config.rowActions?.details, rowData),
+      visible: isActionVisible(config.rowActions?.details),
+    },
+    {
+      key: "edit",
+      label: builtInLabel(context, "edit", t("dms.button.edit")),
+      icon: builtInIcon(context, "edit", "i-ph-pencil"),
+      onSelect: () => config.emits("edit", rowData),
+      disabled: isActionDisabled(context, config.rowActions?.edit, rowData),
+      visible: isActionVisible(config.rowActions?.edit),
+    },
+    {
+      key: "duplicate",
+      label: builtInLabel(context, "duplicate", t("dms.button.duplicate")),
+      icon: builtInIcon(context, "duplicate", "i-ph-copy"),
+      onSelect: () => config.emits("duplicate", get(rowData, config.rowIdKey)),
+      disabled: isActionDisabled(
+        context,
+        config.rowActions?.duplicate,
+        rowData,
+      ),
+      visible: isActionVisible(config.rowActions?.duplicate),
+    },
+    {
+      key: "delete",
+      label: builtInLabel(context, "delete", t("dms.button.delete")),
+      icon: builtInIcon(context, "delete", "i-ph-trash"),
+      onSelect: () => config.emits("delete", [get(rowData, config.rowIdKey)]),
+      disabled: isActionDisabled(context, config.rowActions?.delete, rowData),
+      visible: isActionVisible(config.rowActions?.delete),
+      color: Color.error,
+    },
+    {
+      key: "archive",
+      label: builtInLabel(context, "archive", t("dms.button.archive")),
+      icon: builtInIcon(context, "archive", "i-ph-archive"),
+      onSelect: () => config.emits("archive", [get(rowData, config.rowIdKey)]),
+      disabled: isActionDisabled(context, config.rowActions?.archive, rowData),
+      visible: isActionVisible(config.rowActions?.archive),
+    },
+    {
+      key: "restore",
+      label: builtInLabel(context, "restore", t("dms.button.restore")),
+      icon: builtInIcon(context, "restore", "i-ph-arrow-counter-clockwise"),
+      onSelect: () => config.emits("restore", [get(rowData, config.rowIdKey)]),
+      disabled: isActionDisabled(context, config.rowActions?.restore, rowData),
+      visible: isActionVisible(config.rowActions?.restore),
+    },
+  ];
+};
+
+export const buildRowActionDescriptors = <T extends Data>(
+  context: TableColumnContext<T>,
+  rowData: T,
+): RowActionDescriptor[] => {
+  const builtIns = buildBuiltInActionDescriptors(context, rowData);
+  return [
+    ...builtIns.filter((d) => !isDestructive(d)),
+    ...buildCustomActionDescriptors(context, rowData),
+    ...builtIns.filter(isDestructive),
+  ];
+};
+
+export const isDestructive = (descriptor: RowActionDescriptor): boolean => {
+  return !!descriptor.key && DESTRUCTIVE_ROW_ACTION_KEYS.has(descriptor.key);
+};
+
+export const descriptorToMenuItem = (
+  descriptor: RowActionDescriptor,
+): DropdownMenuItem => {
+  return createMenuItem(
+    descriptor.label,
+    descriptor.icon,
+    descriptor.onSelect,
+    descriptor.color ? { color: descriptor.color } : undefined,
+  );
+};

package/frontend-vue/layers/dms-ui/app/build/composables/table/tableColumnActionRendering.ts

@@ -0,0 +1,141 @@
+import type { Data } from "../../components/table/Table.vue";
+import Button from "@nuxt/ui/components/Button.vue";
+import DropdownMenu, {
+  type DropdownMenuItem,
+} from "@nuxt/ui/components/DropdownMenu.vue";
+
+import type {
+  TableColumnContext,
+  RowActionDescriptor,
+} from "./tableColumnTypes";
+
+import {
+  isShowingArchived,
+  isOffMode,
+  menuLabel,
+  buildRowActionDescriptors,
+  isDestructive,
+  descriptorToMenuItem,
+} from "./tableColumnActionDescriptors";
+
+const renderActionButton = (descriptor: RowActionDescriptor, rowId: string) => {
+  return h(Button, {
+    id: `row-action-${rowId}-${descriptor.icon || descriptor.label}`,
+    "aria-label": descriptor.label,
+    title: descriptor.showLabel ? undefined : descriptor.label,
+    label: descriptor.showLabel ? descriptor.label : undefined,
+    icon: descriptor.icon,
+    color: descriptor.color || Color.neutral,
+    variant: descriptor.variant ?? ButtonVariant.ghost,
+    size: Size.tiny,
+    onClick: (event: Event) => {
+      event.stopPropagation();
+      descriptor.onSelect();
+    },
+  });
+};
+
+const renderActionsDropdown = <T extends Data>(
+  context: TableColumnContext<T>,
+  items: DropdownMenuItem[] | DropdownMenuItem[][],
+  rowId: string,
+  label: string,
+) => {
+  const { appConfig } = context;
+  return h(
+    DropdownMenu,
+    {
+      modal: false,
+      ui: { content: "min-w-48" },
+      items,
+    },
+    {
+      default: () =>
+        h(Button, {
+          id: `row-actions-${rowId}`,
+          "aria-label": label,
+          icon: appConfig.ui.icons.ellipsis,
+          color: Color.neutral,
+          variant: ButtonVariant.ghost,
+          size: Size.tiny,
+        }),
+    },
+  );
+};
+
+const renderRestoreButton = (
+  descriptor: RowActionDescriptor,
+  rowId: string,
+) => {
+  return h(Button, {
+    id: `row-action-${rowId}-restore`,
+    label: descriptor.label,
+    icon: descriptor.icon,
+    color: Color.neutral,
+    variant: ButtonVariant.ghost,
+    size: Size.tiny,
+    onClick: (event: Event) => {
+      event.stopPropagation();
+      descriptor.onSelect();
+    },
+  });
+};
+
+export const renderActionsCell = <T extends Data>(
+  context: TableColumnContext<T>,
+  row: { original: T; id: string },
+) => {
+  const { config } = context;
+
+  const descriptors = buildRowActionDescriptors(context, row.original).filter(
+    (d) => !d.disabled && !isOffMode(context, d),
+  );
+  const restoreDescriptor = isShowingArchived(context)
+    ? descriptors.find((d) => d.key === "restore")
+    : undefined;
+  const visibleDescriptors = descriptors.filter(
+    (d) => d.visible && d !== restoreDescriptor,
+  );
+  const menuDescriptors = descriptors.filter(
+    (d) => !d.visible && d !== restoreDescriptor,
+  );
+
+  const dropdownItems = [
+    menuDescriptors.filter((d) => !isDestructive(d)).map(descriptorToMenuItem),
+    menuDescriptors.filter(isDestructive).map(descriptorToMenuItem),
+  ].filter((group) => group.length > 0);
+
+  if (
+    !restoreDescriptor &&
+    visibleDescriptors.length === 0 &&
+    dropdownItems.length === 0
+  ) {
+    return null;
+  }
+
+  const children = visibleDescriptors.map((d) => renderActionButton(d, row.id));
+  if (restoreDescriptor) {
+    children.unshift(renderRestoreButton(restoreDescriptor, row.id));
+  }
+  if (dropdownItems.length > 0) {
+    children.push(
+      renderActionsDropdown(
+        context,
+        dropdownItems,
+        row.id,
+        menuLabel(context, row.original),
+      ),
+    );
+  }
+
+  return h(
+    "div",
+    {
+      class: config.ui.value.rowAction({
+        prominent: visibleDescriptors.some((d) => d.showLabel),
+      }),
+      onClick: (e: Event) => e.stopPropagation(),
+    },
+    children,
+  );
+};

package/frontend-vue/layers/dms-ui/app/build/composables/table/tableColumnActionSizing.ts

@@ -0,0 +1,149 @@
+import type { Data, TableColumn } from "../../components/table/Table.vue";
+import { ACTIONS_COLUMN_ID } from "./constants";
+
+import type {
+  TableColumnContext,
+  RowActionDescriptor,
+} from "./tableColumnTypes";
+
+import {
+  isCustomActionInline,
+  isOffMode,
+  buildRowActionDescriptors,
+  BUILTIN_ROW_ACTION_KEYS,
+} from "./tableColumnActionDescriptors";
+
+import { renderActionsCell } from "./tableColumnActionRendering";
+
+const ACTIONS_COLUMN_BASE_SIZE = 55;
+
+const ACTIONS_COLUMN_BUTTON_SIZE = 36;
+
+const ACTIONS_CELL_GUTTERS = 28;
+
+const ACTIONS_ICON_BUTTON_SIZE = 24;
+
+const ACTIONS_BUTTON_GAP = 4;
+
+const ACTIONS_LABEL_PADDING = 20;
+
+const ACTIONS_LABEL_ICON_SIZE = 16;
+
+const ACTIONS_LABEL_CHAR_SIZE = 6.5;
+
+const ACTIONS_COLUMN_RESTORE_SIZE = 64;
+
+const countConfiguredVisibleActions = <T extends Data>(
+  context: TableColumnContext<T>,
+): number => {
+  const { config } = context;
+
+  let count = 0;
+  for (const key of BUILTIN_ROW_ACTION_KEYS) {
+    if (isActionVisible(config.rowActions?.[key])) count++;
+  }
+  for (const action of config.rowActions?.custom || []) {
+    if (isCustomActionInline(action)) count++;
+  }
+  return count;
+};
+
+const inlineButtonSize = (descriptor: RowActionDescriptor): number => {
+  return descriptor.showLabel
+    ? ACTIONS_LABEL_PADDING +
+        (descriptor.icon ? ACTIONS_LABEL_ICON_SIZE : 0) +
+        descriptor.label.length * ACTIONS_LABEL_CHAR_SIZE
+    : ACTIONS_ICON_BUTTON_SIZE;
+};
+
+const hasLabelledInlineActions = <T extends Data>(
+  context: TableColumnContext<T>,
+): boolean => {
+  const { config } = context;
+  return (config.rowActions?.custom || []).some(
+    (action) => isCustomActionInline(action) && action.showLabel,
+  );
+};
+
+const actionsCellWidth = (descriptors: RowActionDescriptor[]): number => {
+  const inline = descriptors.filter((d) => d.visible);
+  const buttons = inline.length + (descriptors.length > inline.length ? 1 : 0);
+  const width =
+    inline.reduce((sum, d) => sum + inlineButtonSize(d), 0) +
+    (descriptors.length > inline.length ? ACTIONS_ICON_BUTTON_SIZE : 0) +
+    Math.max(buttons - 1, 0) * ACTIONS_BUTTON_GAP;
+  return ACTIONS_CELL_GUTTERS + width;
+};
+
+const shownActionsWidth = <T extends Data>(
+  context: TableColumnContext<T>,
+  row: T,
+): number => {
+  return actionsCellWidth(
+    buildRowActionDescriptors(context, row).filter(
+      (d) => !d.disabled && !isOffMode(context, d),
+    ),
+  );
+};
+
+const labelledActionsColumnSize = <T extends Data>(
+  context: TableColumnContext<T>,
+): number => {
+  const { config } = context;
+
+  const rows = config.data.value;
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- The empty-list width calculation intentionally evaluates actions against an empty row. Neither inference nor Data proves caller-selected T; constructing a real row would change this fallback.
+  if (rows.length === 0) return shownActionsWidth(context, {} as T);
+  return Math.max(...rows.map((value) => shownActionsWidth(context, value)));
+};
+
+const hasAnyRowAction = <T extends Data>(
+  context: TableColumnContext<T>,
+): boolean => {
+  const { config } = context;
+
+  const builtInEnabled = [
+    config.rowActions?.add,
+    config.rowActions?.delete,
+    config.rowActions?.duplicate,
+    config.rowActions?.edit,
+    config.rowActions?.details,
+    config.rowActions?.archive,
+    config.rowActions?.restore,
+  ].some((flag) => normalizeActionConfig(flag).isEnabled);
+
+  const hasCustomActions =
+    !!config.rowActions?.custom && config.rowActions.custom.length > 0;
+
+  return builtInEnabled || hasCustomActions;
+};
+
+export const addRowActionsColumn = <T extends Data>(
+  context: TableColumnContext<T>,
+  columns: TableColumn<T>[],
+) => {
+  const { config } = context;
+
+  if (!hasAnyRowAction(context)) {
+    return;
+  }
+
+  const visibleActionCount = countConfiguredVisibleActions(context);
+  const restoreRoom =
+    config.showArchived &&
+    normalizeActionConfig(config.rowActions?.restore).isEnabled
+      ? ACTIONS_COLUMN_RESTORE_SIZE
+      : 0;
+  const columnSize =
+    (hasLabelledInlineActions(context)
+      ? labelledActionsColumnSize(context)
+      : ACTIONS_COLUMN_BASE_SIZE +
+        visibleActionCount * ACTIONS_COLUMN_BUTTON_SIZE) + restoreRoom;
+
+  columns.push({
+    id: ACTIONS_COLUMN_ID,
+    size: columnSize,
+    enableColumnFilter: false,
+    cell: ({ row }) => renderActionsCell(context, row),
+  });
+};