@antelopejs/dms 0.0.1

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

@@ -0,0 +1,107 @@
+<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 { TableSharedData, Data } from "./Table.vue";
+
+const theme = tv({
+  slots: {
+    root: "max-h-72 overflow-y-auto",
+    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",
+    empty: "text-muted px-5 py-4 text-xs",
+  },
+});
+
+const tableSharedData =
+  injectLocal<ShallowRef<TableSharedData<T>>>("tableSharedData");
+
+const { t } = useI18n();
+
+const appConfig = useDmsAppConfig() as DmsAppConfig & {
+  ui: { tableMenuSort: Partial<typeof theme> };
+};
+
+const columns = computed(() =>
+  (tableSharedData?.value?.labeledColumns.value || [])
+    .filter((col) => col.column.getCanSort())
+    .map((col) => ({
+      id: col.column.id,
+      label: col.label,
+    })),
+);
+
+const sorting = computed(
+  () => tableSharedData?.value?.sortingState.value || [],
+);
+
+const currentSort = computed(() => sorting.value[0]);
+
+const SORT_ICONS = {
+  asc: "i-ph-arrow-up",
+  desc: "i-ph-arrow-down",
+} as const;
+
+function getSortIcon(columnId: string): string | undefined {
+  if (currentSort.value?.id !== columnId) return undefined;
+  return currentSort.value.desc ? SORT_ICONS.desc : SORT_ICONS.asc;
+}
+
+function toggleSort(columnId: string) {
+  if (!tableSharedData?.value) return;
+
+  const active = currentSort.value;
+  const isSameColumn = active?.id === columnId;
+
+  if (!isSameColumn) {
+    tableSharedData.value.sortingState.value = [{ id: columnId, desc: false }];
+    return;
+  }
+
+  if (!active.desc) {
+    tableSharedData.value.sortingState.value = [{ id: columnId, desc: true }];
+    return;
+  }
+
+  tableSharedData.value.sortingState.value = [];
+}
+
+const uiTableMenuSortVariant = tv({
+  extend: tv(theme),
+  ...(appConfig.ui?.tableMenuSort || {}),
+});
+const uiTableMenuSort = computed(() => uiTableMenuSortVariant());
+</script>
+
+<template>
+  <div :class="uiTableMenuSort.root()">
+    <ul v-if="columns.length" :class="uiTableMenuSort.list()">
+      <li
+        v-for="column in columns"
+        :key="column.id"
+        :class="uiTableMenuSort.item()"
+        @click="toggleSort(column.id)"
+      >
+        <div :class="uiTableMenuSort.itemLabel()">
+          {{ column.label }}
+        </div>
+        <span :class="uiTableMenuSort.trailing()">
+          <Icon
+            v-if="getSortIcon(column.id)"
+            :name="getSortIcon(column.id)!"
+            :class="uiTableMenuSort.trailingIcon()"
+          />
+        </span>
+      </li>
+    </ul>
+
+    <p v-else :class="uiTableMenuSort.empty()">
+      {{ t("dms.sort.no_sorting") }}
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,115 @@
+<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 { TableSharedData, Data } from "./Table.vue";
+import { KANBAN_DISPLAY_ID } from "../../../composables/table-view/types";
+
+const theme = tv({
+  slots: {
+    root: "divide-default divide-y",
+    list: "max-h-72 overflow-y-auto 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 group-hover:text-default transition-colors",
+    itemLabel: "grow truncate",
+    checkIcon: "text-primary size-4",
+    sectionTitle: "text-muted px-3 pt-2 text-xs font-medium",
+  },
+});
+
+const tableSharedDataRef =
+  injectLocal<ShallowRef<TableSharedData<T>>>("tableSharedData");
+const tableSharedData = computed(() => tableSharedDataRef?.value);
+
+const { t } = useI18n();
+
+const appConfig = useDmsAppConfig() as DmsAppConfig & {
+  ui: { tableMenuViewMode: Partial<typeof theme> };
+};
+
+const activeDisplay = computed(
+  () => tableSharedData.value?.activeDisplayState.value ?? "table",
+);
+
+const setActiveDisplay = (id: string) => {
+  if (!tableSharedData.value) return;
+  tableSharedData.value.activeDisplayState.value = id;
+};
+
+// Displays offered by this table view (already filtered by availability in
+// TableView). Labels are i18n keys or literals; `t()` returns the key verbatim
+// 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,
+);
+
+const selectGroupBy = (value: string) => {
+  if (!tableSharedData.value) return;
+  tableSharedData.value.kanbanGroupByState.value = value;
+};
+
+const showGroupBy = computed(
+  () =>
+    activeDisplay.value === KANBAN_DISPLAY_ID &&
+    groupByOptions.value.length > 0,
+);
+
+const uiTableMenuViewModeVariant = tv({
+  extend: tv(theme),
+  ...(appConfig.ui?.tableMenuViewMode || {}),
+});
+const uiTableMenuViewMode = computed(() => uiTableMenuViewModeVariant());
+</script>
+
+<template>
+  <div :class="uiTableMenuViewMode.root()">
+    <ul :class="uiTableMenuViewMode.list()">
+      <li
+        v-for="display in displayItems"
+        :key="display.id"
+        :class="uiTableMenuViewMode.item()"
+        @click="setActiveDisplay(display.id)"
+      >
+        <Icon :name="display.icon" :class="uiTableMenuViewMode.leadingIcon()" />
+        <span :class="uiTableMenuViewMode.itemLabel()">
+          {{ t(display.label) }}
+        </span>
+        <Icon
+          v-if="activeDisplay === display.id"
+          :name="appConfig.ui.icons.check"
+          :class="uiTableMenuViewMode.checkIcon()"
+        />
+      </li>
+    </ul>
+
+    <div v-if="showGroupBy">
+      <p :class="uiTableMenuViewMode.sectionTitle()">
+        {{ t("dms.table.kanban.group_by") }}
+      </p>
+      <ul :class="uiTableMenuViewMode.list()">
+        <li
+          v-for="option in groupByOptions"
+          :key="option.value"
+          :class="uiTableMenuViewMode.item()"
+          @click="selectGroupBy(option.value)"
+        >
+          <span :class="uiTableMenuViewMode.itemLabel()">
+            {{ option.label }}
+          </span>
+          <Icon
+            v-if="groupByField === option.value"
+            :name="appConfig.ui.icons.check"
+            :class="uiTableMenuViewMode.checkIcon()"
+          />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,111 @@
+<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 { TableSharedData, Data } from "./Table.vue";
+import { DEFAULT_PAGE_SIZE } from "../../composables/table/constants";
+
+const theme = tv({
+  slots: {
+    root: "text-muted py-5 text-xs font-light",
+    base: "grid gap-4 sm:flex sm:items-center",
+    infoContainer: "flex w-full items-center justify-between",
+    info: "shrink-0",
+    actions: "flex items-center",
+  },
+});
+
+const appConfig = useDmsAppConfig() as DmsAppConfig & {
+  ui: { tablePagination: Partial<typeof theme> };
+};
+
+const tableSharedDataRef =
+  injectLocal<ShallowRef<TableSharedData<T>>>("tableSharedData");
+const tableSharedData = computed(() => tableSharedDataRef?.value);
+
+const pageCount = computed(() => {
+  const rowCount = tableSharedData.value?.rowCount ?? 0;
+  const pageSize =
+    tableSharedData.value?.paginationState.value.pageSize || DEFAULT_PAGE_SIZE;
+  return Math.ceil(rowCount / pageSize);
+});
+
+const { t } = useI18n();
+
+const uiTablePaginationVariant = tv({
+  extend: tv(theme),
+  ...(appConfig.ui?.tablePagination || {}),
+});
+const uiTablePagination = computed(() => uiTablePaginationVariant());
+</script>
+
+<template>
+  <nav
+    v-if="uiTablePagination"
+    :class="uiTablePagination.root()"
+    :aria-label="t('dms.pagination.label')"
+  >
+    <div :class="uiTablePagination.base()">
+      <div
+        v-if="tableSharedData?.rowCount"
+        :class="uiTablePagination.infoContainer()"
+      >
+        <div :class="uiTablePagination.info()">
+          {{
+            `${t("dms.pagination.count", { count: tableSharedData?.rowCount ?? 0 })} | ${t("dms.pagination.size", { pageSize: tableSharedData?.paginationState.value.pageSize || 0 })}`
+          }}
+        </div>
+        <div :class="uiTablePagination.info()">
+          {{
+            t("dms.pagination.current_page", {
+              currentPage:
+                (tableSharedData?.paginationState.value.pageIndex || 0) + 1,
+              totalPages: pageCount,
+            })
+          }}
+        </div>
+      </div>
+
+      <div v-if="pageCount > 1" :class="uiTablePagination.actions()">
+        <UButton
+          :disabled="!tableSharedData?.table.getCanPreviousPage()"
+          :icon="appConfig.ui.icons.chevronDoubleLeft"
+          :aria-label="t('dms.pagination.first_page')"
+          color="neutral"
+          variant="ghost"
+          class="w-full sm:w-auto"
+          @click="tableSharedData?.table.firstPage()"
+        />
+        <UButton
+          :disabled="!tableSharedData?.table.getCanPreviousPage()"
+          :icon="appConfig.ui.icons.chevronLeft"
+          :aria-label="t('dms.pagination.previous_page')"
+          color="neutral"
+          variant="ghost"
+          class="w-full sm:w-auto"
+          @click="tableSharedData?.table.previousPage()"
+        />
+        <UButton
+          :disabled="!tableSharedData?.table.getCanNextPage()"
+          :icon="appConfig.ui.icons.chevronRight"
+          :aria-label="t('dms.pagination.next_page')"
+          color="neutral"
+          variant="ghost"
+          class="w-full justify-end sm:w-auto"
+          @click="tableSharedData?.table.nextPage()"
+        />
+        <UButton
+          :disabled="!tableSharedData?.table.getCanNextPage()"
+          :icon="appConfig.ui.icons.chevronDoubleRight"
+          :aria-label="t('dms.pagination.last_page')"
+          color="neutral"
+          variant="ghost"
+          class="w-full justify-end sm:w-auto"
+          @click="tableSharedData?.table.lastPage()"
+        />
+      </div>
+    </div>
+  </nav>
+</template>

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { isActionEnabled } from "#dms-core/app/utils/row-action-rule-evaluator";
+import type { RowSelectionState } from "@tanstack/vue-table";
+import type { TableRowActionOptions, Data } from "./Table.vue";
+import { useTableContext } from "../../composables/table/useTableContext";
+import { tv } from "tailwind-variants";
+import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
+
+const theme = tv({
+  slots: {
+    base: "bg-default bottom- absolute left-8 z-20",
+    select: "text-primary",
+  },
+});
+
+interface TableRowSelectionProps {
+  rowActions?: TableRowActionOptions;
+  canExport?: boolean;
+}
+
+defineProps<TableRowSelectionProps>();
+
+const appConfig = useDmsAppConfig() as DmsAppConfig & {
+  ui: { tableRowSelection: Partial<typeof theme> };
+};
+
+const { t } = useI18n();
+
+const rowSelectionState = defineModel<RowSelectionState>("rowSelection", {
+  default: (): RowSelectionState => ({}),
+});
+
+const tableSharedData = useTableContext<Data>();
+
+const onDeleteSelection = () => {
+  tableSharedData?.emits("delete", Object.keys(rowSelectionState.value));
+  rowSelectionState.value = {};
+};
+
+const onExportSelection = () => {
+  tableSharedData?.emits("export", Object.keys(rowSelectionState.value));
+  rowSelectionState.value = {};
+};
+
+const uiTableRowSelectionVariant = tv({
+  extend: tv(theme),
+  ...(appConfig.ui?.tableRowSelection || {}),
+});
+const uiTableRowSelection = computed(() => uiTableRowSelectionVariant());
+</script>
+
+<template>
+  <section class="relative">
+    <UFieldGroup
+      v-if="Object.keys(rowSelectionState).length"
+      :class="uiTableRowSelection.base()"
+    >
+      <UButton
+        :label="
+          t('dms.table.row_selections', {
+            length: Object.keys(rowSelectionState).length,
+          })
+        "
+        color="neutral"
+        variant="outline"
+        :ui="{ base: uiTableRowSelection.select() }"
+        @click="rowSelectionState = {}"
+      />
+      <UButton
+        v-if="canExport"
+        :label="t('dms.button.export_data')"
+        leading-icon="i-ph-export"
+        leading
+        color="neutral"
+        variant="outline"
+        @click="onExportSelection"
+      />
+      <UButton
+        v-if="isActionEnabled(rowActions?.delete)"
+        :label="t('dms.button.delete')"
+        leading-icon="i-ph-trash"
+        leading
+        color="neutral"
+        variant="outline"
+        @click="onDeleteSelection"
+      />
+    </UFieldGroup>
+  </section>
+</template>