@antelopejs/dms 0.0.1

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

@@ -0,0 +1,197 @@
+<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,
+  TableColumn,
+  TableFilter,
+  TableSharedData,
+} from "./Table.vue";
+import TableMenuFilter from "./MenuFilter.vue";
+
+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",
+    label:
+      "text-dimmed font-mono text-[10px] font-medium uppercase tracking-widest",
+    mode: "text-muted text-[10px] not-italic normal-case",
+    deleteManual: "size-4",
+    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",
+  },
+});
+
+const tableSharedData =
+  injectLocal<ShallowRef<TableSharedData<T>>>("tableSharedData");
+const { t } = useI18n();
+const { processI18n } = useTranslation();
+
+const appConfig = useDmsAppConfig() as DmsAppConfig & {
+  ui: { tableFiltersRow: Partial<typeof theme> };
+};
+
+const uiVariant = tv({
+  extend: tv(theme),
+  ...(appConfig.ui?.tableFiltersRow || {}),
+});
+const ui = computed(() => uiVariant());
+
+const filters = computed({
+  get: () => tableSharedData?.value?.columnFiltersState.value || [],
+  set: (val) => {
+    if (tableSharedData?.value) {
+      tableSharedData.value.columnFiltersState.value = val;
+    }
+  },
+});
+
+const columns = computed(() =>
+  (tableSharedData?.value?.labeledColumns.value || []).map((col) => ({
+    id: col.column.id,
+    label: col.label,
+    type: (col.column.columnDef as TableColumn<unknown>).type,
+  })),
+);
+
+const getColumn = (accessorKey: string) =>
+  columns.value.find((col) => col.id === accessorKey);
+
+const resolveFilterComponent = (filter: TableFilter) => {
+  const column = getColumn(filter.accessorKey);
+  if (!column?.type) return null;
+  const candidate =
+    column.type.filterComponents?.[filter.mode] ||
+    column.type.filterComponents?.default;
+  if (!candidate || candidate === "noInput") return null;
+
+  const opts = candidate.options;
+  if (!opts) return candidate;
+
+  const placeholder = isString(opts.placeholder)
+    ? processI18n(opts.placeholder)
+    : opts.placeholder;
+  const items = Array.isArray(opts.items)
+    ? opts.items.map((item) => {
+        const obj = item as Record<string, unknown>;
+        return {
+          ...obj,
+          label: isString(obj.label) ? processI18n(obj.label) : obj.label,
+        };
+      })
+    : opts.items;
+
+  return { ...candidate, options: { ...opts, placeholder, items } };
+};
+
+const resolveAsyncComponent = (componentName?: string) => {
+  if (!componentName) return null;
+  return resolveDmsComponent(componentName) || componentName;
+};
+
+const updateFilterValue = (index: number, value: unknown) => {
+  const updated = [...filters.value];
+  const current = updated[index];
+  if (!current) return;
+  updated[index] = { ...current, value };
+  filters.value = updated;
+};
+
+const deleteFilter = (index: number) => {
+  tableSharedData?.value?.deleteFilter(index);
+};
+
+const reset = () => {
+  tableSharedData?.value?.resetFilters();
+};
+
+const addFilterOpen = ref(false);
+</script>
+
+<template>
+  <div :class="ui.root()">
+    <ul :class="ui.list()">
+      <li
+        v-for="(filter, index) in filters"
+        :key="`${filter.accessorKey}-${index}`"
+        :class="ui.item()"
+      >
+        <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>
+          <UButton
+            v-if="!filter.pinned"
+            :ui="{ base: ui.deleteManual() }"
+            :icon="appConfig.ui.icons.close"
+            :aria-label="t('dms.button.delete')"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            square
+            @click="deleteFilter(index)"
+          />
+        </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>
+      </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>
+
+      <UButton
+        :label="t('dms.button.reset')"
+        :icon="appConfig.ui.icons.close"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        @click="reset"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { Popover } from "reka-ui/namespaced";
+import TableMenuRoot from "./MenuRoot.vue";
+import TableMenuColumns from "./MenuColumns.vue";
+import TableMenuPage from "./MenuPage.vue";
+import TableMenuSort from "./MenuSort.vue";
+import TableMenuFilter from "./MenuFilter.vue";
+import TableMenuImport from "./MenuImport.vue";
+import TableMenuViewMode from "./MenuViewMode.vue";
+import { tv } from "tailwind-variants";
+import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
+
+const theme = tv({
+  slots: {
+    root: "bg-default text-default ring-default w-72 rounded-sm shadow ring-1",
+    arrow: "fill-default",
+
+    header: "border-default flex items-center gap-1 border-b px-3 py-2",
+    headerIcon: "size-5 flex items-center justify-center",
+    headerTitle: "text-highlighted grow text-xs",
+  },
+});
+
+interface TableMenuProps {
+  defaultView?: keyof typeof menuViews;
+}
+
+const props = withDefaults(defineProps<TableMenuProps>(), {
+  defaultView: "root",
+});
+
+const { t } = useI18n();
+
+const appConfig = useDmsAppConfig() as DmsAppConfig & {
+  ui: { tableMenu: Partial<typeof theme> };
+};
+
+const menuViews: Record<
+  "root" | "filters" | "columns" | "sort" | "page" | "import" | "viewMode",
+  { title: string; root?: boolean; component: Component }
+> = {
+  root: {
+    title: t("dms.table.options_title"),
+    root: true,
+    component: TableMenuRoot,
+  },
+  filters: {
+    title: t("dms.table.filters_title"),
+    component: TableMenuFilter,
+  },
+  columns: {
+    title: t("dms.table.columns_title"),
+    component: TableMenuColumns,
+  },
+  sort: {
+    title: t("dms.table.sort_title"),
+    component: TableMenuSort,
+  },
+  page: {
+    title: t("dms.table.page_size_title"),
+    component: TableMenuPage,
+  },
+  import: {
+    title: t("dms.table.import_config_title"),
+    component: TableMenuImport,
+  },
+  viewMode: {
+    title: t("dms.table.view_mode_title"),
+    component: TableMenuViewMode,
+  },
+};
+
+const viewState = ref<keyof typeof menuViews>(props.defaultView);
+
+const activeView = computed(() => menuViews[viewState.value]);
+
+const canGoBack = computed(
+  () => !activeView.value.root && viewState.value !== props.defaultView,
+);
+
+const uiTableMenuVariant = tv({
+  extend: tv(theme),
+  ...(appConfig.ui?.tableMenu || {}),
+});
+const uiTableMenu = computed(() => uiTableMenuVariant());
+</script>
+
+<template>
+  <div :class="uiTableMenu.root()">
+    <Popover.Arrow :class="uiTableMenu.arrow()" />
+
+    <header :class="uiTableMenu.header()">
+      <div :class="uiTableMenu.headerIcon()">
+        <UButton
+          v-if="canGoBack"
+          :icon="appConfig.ui.icons.arrowLeft"
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          square
+          @click="viewState = 'root'"
+        />
+      </div>
+      <Transition
+        name="fade-slide"
+        mode="out-in"
+        enter-active-class="transition ease-out duration-200 transform"
+        enter-from-class="-translate-y-full opacity-0"
+        enter-to-class="translate-y-0 opacity-100"
+        leave-active-class="transition ease-in duration-200 transform"
+        leave-from-class="translate-y-0 opacity-100"
+        leave-to-class="translate-y-full opacity-0"
+      >
+        <span :key="viewState" :class="uiTableMenu.headerTitle()">
+          {{ activeView.title }}
+        </span>
+      </Transition>
+      <Popover.Close as-child>
+        <UButton
+          :icon="appConfig.ui.icons.close"
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          square
+        />
+      </Popover.Close>
+    </header>
+
+    <div>
+      <Component :is="activeView.component" @navigate="viewState = $event" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,163 @@
+<script setup lang="ts" generic="T extends Data">
+import { injectLocal } from "@vueuse/core";
+import type { Column } from "@tanstack/vue-table";
+import { tv } from "tailwind-variants";
+import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
+import type { ShallowRef } from "vue";
+import Draggable from "vuedraggable";
+
+import type { TableSharedData, Data } from "./Table.vue";
+import type { TableColumnMeta } from "../../composables/table/types";
+
+const theme = tv({
+  slots: {
+    root: "divide-default divide-y max-h-72 overflow-y-auto",
+
+    list: "p-1.5",
+    item: "text-default relative flex w-full cursor-default select-none items-center gap-1.5 py-1 pl-2 pr-1 text-sm",
+    handler: "cursor-grab",
+    checkbox: "text-sm grow",
+    pinButton: "ms-auto",
+
+    actions: "text-default px-1.5 py-1",
+    actionButton: "justify-start",
+  },
+});
+
+const tableSharedData =
+  injectLocal<ShallowRef<TableSharedData<T>>>("tableSharedData");
+
+const { t } = useI18n();
+
+const appConfig = useDmsAppConfig() as DmsAppConfig & {
+  ui: { tableMenuColumn: Partial<typeof theme> };
+};
+
+const order = computed(
+  () => tableSharedData?.value?.columnOrderState.value || [],
+);
+const rawColumns = computed(
+  () => tableSharedData?.value?.table.getAllColumns() || [],
+);
+
+const columns = computed({
+  get() {
+    return mapColumns();
+  },
+  set(newValue) {
+    if (!tableSharedData?.value) return;
+    const updatedOrder = [
+      "select",
+      ...newValue.map((col) => col.id),
+      "actions",
+    ];
+    tableSharedData.value.columnOrderState.value = [...updatedOrder];
+  },
+});
+
+function mapColumns() {
+  return order.value
+    .map((id) => rawColumns.value.find((col) => col.id === id))
+    .filter((col) => col && (col!.columnDef.meta as TableColumnMeta)?.label)
+    .map((col) => ({
+      label: (col!.columnDef.meta as TableColumnMeta)!.label!,
+      id: col!.id,
+      column: col!,
+    }));
+}
+
+function toggleColumnVisibility(
+  column: Column<unknown>,
+  visibility?: boolean | "indeterminate",
+) {
+  column.toggleVisibility(!!visibility);
+}
+
+const PIN_ICONS = {
+  pinned: "i-ph-push-pin-fill",
+  unpinned: "i-ph-push-pin",
+} as const;
+
+function togglePin(column: Column<unknown>) {
+  column.pin(column.getIsPinned() ? false : "left");
+}
+
+function resetColumns() {
+  if (!tableSharedData?.value) return;
+
+  tableSharedData.value.columnOrderState.value =
+    tableSharedData.value.table.getAllColumns().map((col) => col.id) || [];
+}
+
+const uiTableMenuColumnVariant = tv({
+  extend: tv(theme),
+  ...(appConfig.ui?.tableMenuColumn || {}),
+});
+const uiTableMenuColumn = computed(() => uiTableMenuColumnVariant());
+</script>
+
+<template>
+  <div :class="uiTableMenuColumn.root()">
+    <Draggable
+      v-model="columns"
+      :class="uiTableMenuColumn.list()"
+      item-key="id"
+      handle="#column-handler"
+    >
+      <template #item="{ element: column }">
+        <li :class="uiTableMenuColumn.item()">
+          <UButton
+            id="column-handler"
+            icon="i-ph-dots-six-vertical"
+            :ui="{ base: uiTableMenuColumn.handler() }"
+            :aria-label="t('dms.table.organize_columns')"
+            square
+            color="neutral"
+            variant="ghost"
+            size="xs"
+          />
+          <UCheckbox
+            :model-value="column.column.getIsVisible()"
+            :ui="{ base: uiTableMenuColumn.checkbox() }"
+            :label="column.label"
+            @update:model-value="toggleColumnVisibility(column.column, $event)"
+          />
+          <UButton
+            v-if="column.column.getCanPin()"
+            :icon="
+              column.column.getIsPinned()
+                ? PIN_ICONS.pinned
+                : PIN_ICONS.unpinned
+            "
+            :aria-label="
+              t(
+                column.column.getIsPinned()
+                  ? 'dms.table.unpin_column'
+                  : 'dms.table.pin_column',
+              )
+            "
+            :ui="{ base: uiTableMenuColumn.pinButton() }"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            square
+            @click="togglePin(column.column)"
+          />
+        </li>
+      </template>
+    </Draggable>
+
+    <div :class="uiTableMenuColumn.actions()">
+      <UButton
+        icon="i-ph-arrow-clockwise"
+        :ui="{ base: uiTableMenuColumn.actionButton() }"
+        :label="t('dms.table.reset_column_order')"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        block
+        @click="resetColumns"
+      />
+    </div>
+  </div>
+</template>