@antelopejs/dms 0.5.5 → 0.6.0

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

@@ -1,39 +1,93 @@
 <script setup lang="ts">
+import { MONO_CHIP_CLASS } from "../../utils/monoChip";
+import { onMounted, ref, resolveComponent, useTemplateRef } from "vue";
+import { useResizeObserver } from "@vueuse/core";
 import { tv } from "tailwind-variants";
 import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
+import { toneTextClass } from "../../utils/tone";
+import { PREVIEW_LOCK_ICON } from "../../utils/permissionPreview";
 
 export interface TableTabItem {
   id: string;
   label: string;
   count?: number;
+  /** The count is still loading: a placeholder holds its place. */
+  countPending?: boolean;
   icon?: string;
   textColor?: string;
   iconColor?: string;
+  /** Link tab: the page it opens; never the active tab. */
+  to?: string;
+  /**
+   * "Preview as role" only: the previewed role could not open the linked
+   * page, so the tab is drawn hatched and locked.
+   */
+  previewLocked?: boolean;
+  /**
+   * "Preview as role" only: the previewed role opens the linked page without
+   * some of its blocks or actions, so the tab is drawn with the orange hatch
+   * and lock. Ignored on a locked tab.
+   */
+  previewPartial?: boolean;
+  /** Tone of a status dot drawn before the label. */
+  dot?: string;
+  /** Colors the icon and the counter. */
+  tone?: string;
+  /** The tab's state was changed since it was opened (a view). */
+  modified?: boolean;
 }
 
 interface Props {
   tabs: TableTabItem[];
+  /**
+   * Drawn inside the table's header band (no caption): no rule or gutter of
+   * its own, full band height, the underline on the band's bottom rule.
+   */
+  inline?: boolean;
+  /** Accessible name of the tab strip. */
+  label?: string;
 }
 
 const props = defineProps<Props>();
 const activeId = defineModel<string>({ required: true });
 
+// v2 link tabs: a 2px accent underline sits on the row's bottom rule.
 const theme = tv({
   slots: {
-    root: "flex flex-wrap items-center gap-1 pt-3",
-    tab: "inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-[13px] transition-colors",
-    label: "font-semibold",
-    count:
-      "rounded-full px-1.5 py-0.5 font-mono text-[11px] tabular-nums text-dimmed bg-elevated dark:bg-accented",
+    root: "no-scrollbar flex gap-5 overflow-x-auto border-b border-default px-[18px]",
+    tab: "relative inline-flex h-[38px] shrink-0 items-center gap-1.5 px-0.5 text-[13px] transition-colors [&>svg]:size-3.5",
+    label: "",
+    count: `${MONO_CHIP_CLASS} bg-elevated text-[10.5px] font-semibold tabular-nums text-dimmed`,
+    countPlaceholder: "h-[17px] w-[18px] rounded-[4px]",
+    dot: "size-1.5 shrink-0 rounded-full bg-current",
+    modified: "size-1.5 shrink-0 rounded-full bg-warning",
   },
   variants: {
     active: {
       true: {
-        tab: "bg-primary/10 text-primary",
-        count: "text-primary bg-primary/15 dark:bg-primary/15",
+        tab: "font-semibold text-highlighted after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:rounded-t-[2px] after:bg-primary",
+        count: "bg-primary/10 text-primary",
       },
       false: {
-        tab: "text-muted hover:text-default hover:bg-elevated dark:hover:bg-accented",
+        tab: "font-medium text-muted hover:text-highlighted",
+      },
+    },
+    inline: {
+      true: {
+        root: "me-auto max-w-full shrink-0 self-stretch border-b-0 px-0",
+        tab: "h-11",
+      },
+    },
+    // Same hatch as the sidebar's locked entries.
+    previewLocked: {
+      true: {
+        tab: "px-1.5 text-muted dms-hatch-locked",
+      },
+    },
+    // Same hatch as the sidebar's partially locked entries.
+    previewPartial: {
+      true: {
+        tab: "px-1.5 dms-hatch-partial",
       },
     },
   },
@@ -48,27 +102,85 @@ const uiVariant = tv({
   ...(appConfig.ui?.tableTabs || {}),
 });
 
-const ui = computed(() => uiVariant());
+const ui = computed(() => uiVariant({ inline: props.inline }));
+
+const DmsLink = resolveComponent("DmsLink");
 
-const onTabClick = (id: string) => {
-  activeId.value = id;
+const isActive = (tab: TableTabItem): boolean =>
+  !tab.to && tab.id === activeId.value;
+
+// Beside link tabs, the active tab stands for the page itself.
+const currentValue = computed(() =>
+  props.tabs.some((tab) => tab.to) ? "page" : "true",
+);
+
+const onTabClick = (tab: TableTabItem) => {
+  if (tab.to) return;
+  activeId.value = tab.id;
 };
+
+// A strip wider than the card scrolls sideways: its clipped edges fade out so
+// the hidden tabs read as reachable.
+const FADE_EDGE = "24px";
+const navRef = useTemplateRef<HTMLElement>("nav");
+const fadeStart = ref(false);
+const fadeEnd = ref(false);
+const syncFades = () => {
+  const nav = navRef.value;
+  if (!nav) return;
+  fadeStart.value = nav.scrollLeft > 1;
+  fadeEnd.value = nav.scrollLeft + nav.clientWidth < nav.scrollWidth - 1;
+};
+useResizeObserver(navRef, syncFades);
+onMounted(syncFades);
+const fadeStyle = computed(() => {
+  if (!fadeStart.value && !fadeEnd.value) return undefined;
+  const start = fadeStart.value ? "transparent" : "#000";
+  const end = fadeEnd.value ? "transparent" : "#000";
+  return {
+    maskImage: `linear-gradient(to right, ${start}, #000 ${FADE_EDGE}, #000 calc(100% - ${FADE_EDGE}), ${end})`,
+  };
+});
+
+const { locale, t } = useI18n();
+const countFormat = computed(() => new Intl.NumberFormat(locale.value));
 </script>
 
 <template>
-  <nav v-if="props.tabs.length > 0" :class="ui.root()">
-    <button
+  <nav
+    v-if="props.tabs.length > 0"
+    ref="nav"
+    :class="ui.root()"
+    :style="fadeStyle"
+    :aria-label="props.label"
+    @scroll.passive="syncFades"
+  >
+    <component
+      :is="tab.to ? DmsLink : 'button'"
       v-for="tab in props.tabs"
       :key="tab.id"
-      type="button"
-      :class="ui.tab({ active: tab.id === activeId })"
-      @click="onTabClick(tab.id)"
+      v-bind="tab.to ? { to: tab.to } : { type: 'button' }"
+      :class="
+        ui.tab({
+          active: isActive(tab),
+          previewLocked: !!tab.previewLocked,
+          previewPartial: !tab.previewLocked && !!tab.previewPartial,
+        })
+      "
+      :aria-current="isActive(tab) ? currentValue : undefined"
+      @click="onTabClick(tab)"
     >
+      <span
+        v-if="tab.dot"
+        aria-hidden="true"
+        :class="[ui.dot(), toneTextClass(tab.dot)]"
+      />
       <UIcon
         v-if="tab.icon"
         :name="tab.icon"
+        :class="tab.tone && !isActive(tab) ? toneTextClass(tab.tone) : ''"
         :style="
-          tab.iconColor && tab.id !== activeId
+          tab.iconColor && !isActive(tab)
             ? { color: `var(--ui-${tab.iconColor})` }
             : undefined
         "
@@ -76,19 +188,42 @@ const onTabClick = (id: string) => {
       <span
         :class="ui.label()"
         :style="
-          tab.textColor && tab.id !== activeId
+          tab.textColor && !isActive(tab)
             ? { color: `var(--ui-${tab.textColor})` }
             : undefined
         "
       >
         {{ tab.label }}
       </span>
+      <USkeleton
+        v-if="tab.countPending"
+        aria-hidden="true"
+        :class="ui.countPlaceholder()"
+      />
       <span
-        v-if="tab.count !== undefined"
-        :class="ui.count({ active: tab.id === activeId })"
+        v-else-if="tab.count !== undefined"
+        :class="[
+          ui.count({ active: isActive(tab) }),
+          tab.tone && !isActive(tab) ? toneTextClass(tab.tone) : '',
+        ]"
       >
-        {{ tab.count }}
+        {{ countFormat.format(tab.count) }}
       </span>
-    </button>
+      <span
+        v-if="tab.modified"
+        :title="t('dms.table.views.modified')"
+        :class="ui.modified()"
+      />
+      <UIcon
+        v-if="tab.previewLocked"
+        :name="PREVIEW_LOCK_ICON"
+        class="text-error"
+      />
+      <UIcon
+        v-else-if="tab.previewPartial"
+        :name="PREVIEW_LOCK_ICON"
+        class="text-warning"
+      />
+    </component>
   </nav>
 </template>

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

@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import { EYEBROW_CLASS } from "../../utils/eyebrow";
+import { tv } from "tailwind-variants";
+import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
+import type { TableViewViewsLayout } from "../../../composables/table-view/types";
+import { toneTextClass } from "../../utils/tone";
+import TableTabs, { type TableTabItem } from "./Tabs.vue";
+
+/** A view as the strip draws it: its counter already read. */
+export interface TableViewItem {
+  id: string;
+  label: string;
+  icon?: string;
+  tone?: string;
+  dot?: string;
+  count?: number;
+  countPending?: boolean;
+  /** Saved by the user: it can be saved over and deleted. */
+  isUserView?: boolean;
+}
+
+interface Props {
+  items: TableViewItem[];
+  activeId?: string;
+  layout: TableViewViewsLayout;
+  /** The table moved away from the open view. */
+  modified?: boolean;
+  /** Users may save the current state as a view of their own. */
+  canSaveAs?: boolean;
+  /** No tab row follows the strip: it draws the rule above the rows. */
+  divided?: boolean;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  open: [id: string];
+  reset: [];
+  save: [];
+  saveAs: [];
+  delete: [id: string];
+}>();
+
+// v2 saved views (saas workspaces): eyebrow, outline pills, the open one on
+// the accent tint, a dashed "+ Save current view" at the end.
+const theme = tv({
+  slots: {
+    strip:
+      "no-scrollbar flex items-center gap-1.5 overflow-x-auto pe-3.5 pb-3 ps-[18px]",
+    eyebrow: `${EYEBROW_CLASS} me-1 shrink-0 text-dimmed`,
+    pill: "inline-flex h-[26px] shrink-0 items-center gap-1.5 rounded-full border border-default px-2.5 text-xs font-medium whitespace-nowrap text-muted transition-colors hover:bg-elevated hover:text-highlighted [&>svg]:size-[13px]",
+    pillCount: "font-mono text-[10.5px] tabular-nums",
+    pillAdd: "border-dashed",
+    dot: "size-1.5 shrink-0 rounded-full bg-current",
+    modifiedDot: "size-1.5 shrink-0 rounded-full bg-warning",
+    actions: "ms-auto flex shrink-0 items-center gap-1",
+    tabsRow: "flex items-center border-b border-default pe-3.5",
+    menuValue: "max-w-48 truncate",
+  },
+  variants: {
+    divided: {
+      true: { strip: "border-b border-default" },
+    },
+    active: {
+      true: {
+        pill: "border-(--dms-accent-line) bg-(--dms-accent-tint) text-highlighted hover:bg-(--dms-accent-tint)",
+      },
+    },
+  },
+});
+
+const appConfig = useDmsAppConfig() as DmsAppConfig & {
+  ui: { tableViews: Partial<typeof theme> };
+};
+const uiVariant = tv({
+  extend: tv(theme),
+  ...(appConfig.ui?.tableViews || {}),
+});
+const ui = computed(() => uiVariant({ divided: props.divided }));
+
+const { t, locale } = useI18n();
+const countFormat = computed(() => new Intl.NumberFormat(locale.value));
+
+const activeView = computed(() =>
+  props.items.find((view) => view.id === props.activeId),
+);
+const canSave = computed(
+  () => !!props.modified && !!activeView.value?.isUserView,
+);
+const canDelete = computed(() => !!activeView.value?.isUserView);
+
+const tabItems = computed<TableTabItem[]>(() =>
+  props.items.map((view) => ({
+    id: view.id,
+    label: view.label,
+    icon: view.icon,
+    tone: view.tone,
+    dot: view.dot,
+    count: view.count,
+    countPending: view.countPending,
+    modified: !!props.modified && view.id === props.activeId,
+  })),
+);
+
+/** What can be done with the open view. */
+interface ViewAction {
+  id: "reset" | "save" | "saveAs" | "delete";
+  label: string;
+  icon: string;
+  /** Drawn as an icon alone outside the menu. */
+  iconOnly?: boolean;
+  color?: "error";
+  run: () => void;
+}
+
+const viewActions = computed<ViewAction[]>(() => {
+  const actions: ViewAction[] = [];
+  if (props.modified) {
+    actions.push({
+      id: "reset",
+      label: t("dms.table.views.reset"),
+      icon: "i-ph-arrow-counter-clockwise",
+      run: () => emit("reset"),
+    });
+  }
+  if (canSave.value) {
+    actions.push({
+      id: "save",
+      label: t("dms.table.views.save"),
+      icon: "i-ph-floppy-disk",
+      run: () => emit("save"),
+    });
+  }
+  if (props.canSaveAs) {
+    actions.push({
+      id: "saveAs",
+      label: t("dms.table.views.save_as"),
+      icon: "i-ph-plus",
+      run: () => emit("saveAs"),
+    });
+  }
+  if (canDelete.value && props.activeId) {
+    const id = props.activeId;
+    actions.push({
+      id: "delete",
+      label: t("dms.table.views.delete"),
+      icon: "i-ph-trash",
+      iconOnly: true,
+      color: "error",
+      run: () => emit("delete", id),
+    });
+  }
+  return actions;
+});
+
+// The strip ends with its own "+ Save current view" pill.
+const barActions = computed(() =>
+  props.layout === "strip"
+    ? viewActions.value.filter((action) => action.id !== "saveAs")
+    : viewActions.value,
+);
+
+// A menu group left empty would draw a stray separator.
+const menuItems = computed(() =>
+  [
+    props.items.map((view) => ({
+      label: view.label,
+      icon: view.icon,
+      type: "checkbox" as const,
+      checked: view.id === props.activeId,
+      onSelect: () => emit("open", view.id),
+    })),
+    viewActions.value.map((action) => ({
+      label: action.label,
+      icon: action.icon,
+      color: action.color,
+      onSelect: action.run,
+    })),
+  ].filter((group) => group.length > 0),
+);
+
+const openTab = (id: string) => emit("open", id);
+</script>
+
+<template>
+  <UDropdownMenu
+    v-if="layout === 'menu'"
+    :items="menuItems"
+    :content="{ align: 'start' }"
+    :ui="{ content: 'min-w-56' }"
+  >
+    <UButton
+      size="sm"
+      color="neutral"
+      variant="outline"
+      icon="i-ph-bookmarks-simple"
+      :trailing-icon="appConfig.ui.icons.chevronDown"
+      :aria-label="t('dms.table.views.title')"
+    >
+      <span :class="ui.menuValue()">
+        {{ activeView?.label ?? t("dms.table.views.title") }}
+      </span>
+      <span
+        v-if="modified"
+        :title="t('dms.table.views.modified')"
+        :class="ui.modifiedDot()"
+      />
+    </UButton>
+  </UDropdownMenu>
+
+  <div
+    v-else
+    :role="layout === 'strip' ? 'toolbar' : undefined"
+    :aria-label="layout === 'strip' ? t('dms.table.views.title') : undefined"
+    :class="layout === 'tabs' ? ui.tabsRow() : ui.strip()"
+  >
+    <TableTabs
+      v-if="layout === 'tabs'"
+      :model-value="activeId ?? ''"
+      :tabs="tabItems"
+      :label="t('dms.table.views.title')"
+      class="me-auto min-w-0 border-b-0"
+      @update:model-value="openTab"
+    />
+    <template v-else>
+      <span :class="ui.eyebrow()">{{ t("dms.table.views.title") }}</span>
+      <button
+        v-for="view in items"
+        :key="view.id"
+        type="button"
+        :aria-pressed="view.id === activeId"
+        :class="ui.pill({ active: view.id === activeId })"
+        @click="emit('open', view.id)"
+      >
+        <span
+          v-if="view.dot"
+          aria-hidden="true"
+          :class="[ui.dot(), toneTextClass(view.dot)]"
+        />
+        <UIcon
+          v-if="view.icon"
+          :name="view.icon"
+          :class="toneTextClass(view.tone) || 'text-dimmed'"
+        />
+        {{ view.label }}
+        <USkeleton
+          v-if="view.countPending"
+          aria-hidden="true"
+          class="h-3 w-4 rounded-[3px]"
+        />
+        <span
+          v-else-if="view.count !== undefined"
+          :class="[ui.pillCount(), toneTextClass(view.tone)]"
+        >
+          {{ countFormat.format(view.count) }}
+        </span>
+        <span
+          v-if="modified && view.id === activeId"
+          :title="t('dms.table.views.modified')"
+          :class="ui.modifiedDot()"
+        />
+      </button>
+      <button
+        v-if="canSaveAs"
+        type="button"
+        :class="[ui.pill(), ui.pillAdd()]"
+        @click="emit('saveAs')"
+      >
+        <UIcon name="i-ph-plus" />
+        {{ t("dms.table.views.save_current") }}
+      </button>
+    </template>
+    <div v-if="barActions.length > 0" :class="ui.actions()">
+      <UButton
+        v-for="action in barActions"
+        :key="action.id"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        :icon="action.icon"
+        :label="action.iconOnly ? undefined : action.label"
+        :aria-label="action.label"
+        @click="action.run"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+/**
+ * Placeholder of a table view card grid while its first page loads: cards
+ * built like the cards display's (same frame, same line boxes), so nothing
+ * moves when the real ones land.
+ */
+interface CardGridSkeletonProps {
+  /** Cards drawn: the rows the page will list (capped). */
+  count: number;
+  /** Fields in each card's grid. */
+  fields: number;
+  /** Size classes of a field label, to match the real card's line box. */
+  labelClass?: string;
+}
+
+const props = withDefaults(defineProps<CardGridSkeletonProps>(), {
+  labelClass: "text-[10.5px] leading-[1.2]",
+});
+
+const MAX_CARD_COUNT = 12;
+const cardCount = computed(() =>
+  Math.max(1, Math.min(props.count, MAX_CARD_COUNT)),
+);
+</script>
+
+<template>
+  <div
+    aria-hidden="true"
+    class="grid grid-cols-[repeat(auto-fill,minmax(min(230px,100%),1fr))] gap-3 px-[18px] pt-4 pb-[18px]"
+  >
+    <div
+      v-for="n in cardCount"
+      :key="n"
+      class="border-default @container rounded-[10px] border bg-(--ui-bg) p-3.5 text-[12.5px]"
+    >
+      <div class="flex items-center gap-2.5">
+        <USkeleton class="size-7 shrink-0 rounded-[7px]" />
+        <div class="min-w-0 flex-1">
+          <div class="text-[13px]">
+            <USkeleton class="inline-block h-3 w-3/5 align-middle" />
+          </div>
+          <div class="font-mono text-[11px]">
+            <USkeleton class="inline-block h-2 w-2/5 align-middle" />
+          </div>
+        </div>
+      </div>
+      <div
+        class="mt-3 grid grid-cols-2 gap-x-3 gap-y-2.5 max-sm:@max-[16rem]:grid-cols-1"
+      >
+        <div v-for="field in props.fields" :key="field" class="min-w-0">
+          <div :class="['font-mono', props.labelClass]">
+            <USkeleton class="inline-block h-2 w-1/2 align-middle" />
+          </div>
+          <div class="mt-0.5">
+            <USkeleton class="inline-block h-2.5 w-4/5 align-middle" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>