@antelopejs/dms 0.0.1

package/frontend-vue/layers/dms-ui/app/build/components/containers/modal/DynamicModal.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { Component } from "vue";
+import type { ModalSize } from "../../../../types/modal";
+
+interface DynamicModalProps {
+  title: string;
+  description?: string;
+  size?: ModalSize;
+  containerId: string;
+  component: Component;
+  componentOptions?: Record<string, unknown>;
+  headerComponent?: Component;
+  headerComponentOptions?: Record<string, unknown>;
+}
+
+interface DynamicModalEmits {
+  (e: "close", result?: unknown): void;
+}
+
+const props = defineProps<DynamicModalProps>();
+const emit = defineEmits<DynamicModalEmits>();
+
+// Let a DmsForm rendered in the body drop its DmsCard (the modal is the surface).
+provide("dmsFormContainer", true);
+
+// UModal has no size variant, so map our ModalSize onto a max-width. Form
+// modals default wider than Nuxt UI's max-w-lg for breathing room.
+const SIZE_ORDER = ["sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl"];
+const SIZE_MAX_W: Record<string, string> = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg",
+  xl: "sm:max-w-xl",
+  "2xl": "sm:max-w-2xl",
+  "3xl": "sm:max-w-3xl",
+  "4xl": "sm:max-w-4xl",
+  "5xl": "sm:max-w-5xl",
+};
+// Form modals shouldn't be narrower than this; callers asking for a bigger
+// size are still honored.
+const MIN_SIZE = "3xl";
+const contentClass = computed(() => {
+  const requested = props.size ?? MIN_SIZE;
+  const idx = SIZE_ORDER.indexOf(requested);
+  const minIdx = SIZE_ORDER.indexOf(MIN_SIZE);
+  const size = idx > minIdx ? requested : MIN_SIZE;
+  return SIZE_MAX_W[size] ?? "sm:max-w-3xl";
+});
+
+const { executeGuards, clearGuards } = useLeaveGuard();
+
+const isOpen = defineModel<boolean>("open", { default: true });
+const isContentLoading = ref(true);
+let closePromise: Promise<void> | null = null;
+
+async function tryClose() {
+  if (isContentLoading.value) return;
+  if (closePromise) return;
+
+  closePromise = (async () => {
+    const canClose = await executeGuards(props.containerId);
+    if (!canClose) {
+      return;
+    }
+    clearGuards(props.containerId);
+    isOpen.value = false;
+    emit("close");
+  })();
+
+  await closePromise;
+  closePromise = null;
+}
+
+function handleSuccess(result?: unknown) {
+  clearGuards(props.containerId);
+  isOpen.value = false;
+  emit("close", result);
+}
+
+function onContentPending() {
+  isContentLoading.value = true;
+}
+
+function onContentResolve() {
+  isContentLoading.value = false;
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="isOpen"
+    :description="description"
+    :title="title"
+    :dismissible="false"
+    :ui="{ content: contentClass }"
+    @close:prevent="tryClose"
+  >
+    <template #header>
+      <div class="flex w-full items-center justify-between gap-4">
+        <div v-if="headerComponent" class="flex-1">
+          <Suspense>
+            <component :is="headerComponent" v-bind="headerComponentOptions" />
+          </Suspense>
+        </div>
+        <div v-else class="flex-1">
+          <h2 class="text-highlighted font-semibold">{{ title }}</h2>
+          <p v-if="description" class="text-muted text-sm">
+            {{ description }}
+          </p>
+        </div>
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          aria-label="Close"
+          @click="tryClose"
+        />
+      </div>
+    </template>
+    <template #body>
+      <Suspense @pending="onContentPending" @resolve="onContentResolve">
+        <component
+          :is="component"
+          v-bind="componentOptions"
+          :container-id="containerId"
+          @success="handleSuccess"
+        />
+      </Suspense>
+    </template>
+  </UModal>
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/form/PermissionsTreeNode.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+export interface PermissionNode {
+  id: string;
+  label: string;
+  icon?: string;
+  children?: PermissionNode[];
+}
+
+interface PermissionsTreeNodeProps {
+  node: PermissionNode;
+  level?: number;
+  checkedIds?: string[];
+  expandedNodes?: Set<string>;
+}
+
+interface PermissionsTreeNodeEmits {
+  (e: "toggle-expanded", id: string): void;
+  (e: "check-change", node: PermissionNode, checked: boolean): void;
+}
+
+const props = withDefaults(defineProps<PermissionsTreeNodeProps>(), {
+  level: 0,
+  checkedIds: () => [],
+  expandedNodes: () => new Set(),
+});
+
+const emit = defineEmits<PermissionsTreeNodeEmits>();
+
+const { processI18n } = useTranslation();
+
+const hasChildren = computed(
+  () => props.node.children && props.node.children.length > 0,
+);
+
+const isExpanded = computed(() => props.expandedNodes.has(props.node.id));
+const isChecked = computed(() => props.checkedIds.includes(props.node.id));
+
+const getAllChildIds = (node: PermissionNode): string[] => {
+  const ids = [node.id];
+  if (node.children) {
+    node.children.forEach((child) => {
+      ids.push(...getAllChildIds(child));
+    });
+  }
+  return ids;
+};
+
+const isIndeterminate = computed(() => {
+  if (!hasChildren.value) return false;
+
+  const descendantIds = getAllChildIds(props.node).filter(
+    (id) => id !== props.node.id,
+  );
+
+  const checkedDescendants = descendantIds.filter((id) =>
+    props.checkedIds.includes(id),
+  );
+
+  const hasChecked = checkedDescendants.length > 0;
+  const hasUnchecked = checkedDescendants.length < descendantIds.length;
+
+  return hasChecked && hasUnchecked;
+});
+
+const checkboxValue = computed((): boolean | "indeterminate" => {
+  if (isIndeterminate.value) return "indeterminate";
+  return isChecked.value;
+});
+
+const toggleExpanded = () => {
+  emit("toggle-expanded", props.node.id);
+};
+
+const handleCheckChange = (value: boolean | "indeterminate") => {
+  if (value === "indeterminate") return;
+  emit("check-change", props.node, value);
+};
+
+const INDENT_SIZE = 24;
+const BASE_PADDING = 8;
+const LINE_SIZE = 1;
+const ICON_SIZE = 14;
+
+const paddingLeft = `${props.level * INDENT_SIZE + BASE_PADDING}px`;
+const verticalLinePosition = `${props.level * INDENT_SIZE + BASE_PADDING + ICON_SIZE / 2 - LINE_SIZE / 2}px`;
+</script>
+
+<template>
+  <div>
+    <div
+      :class="[
+        { 'font-medium': level === 0 },
+        checkboxValue === false ? 'text-dimmed' : 'text-highlighted',
+        'hover:bg-elevated hover:text-highlighted flex items-center gap-3 rounded-sm py-1.5 transition-colors select-none',
+      ]"
+      :style="{ paddingLeft }"
+      @click="toggleExpanded"
+    >
+      <div class="flex items-center gap-2">
+        <UIcon
+          :name="hasChildren ? 'i-lucide-chevron-right' : 'i-lucide-dot'"
+          :class="[
+            isExpanded ? 'rotate-90' : '',
+            'size-3.5 transition-transform',
+          ]"
+        />
+
+        <UCheckbox
+          :model-value="checkboxValue"
+          size="sm"
+          @update:model-value="handleCheckChange"
+          @click.stop
+        />
+      </div>
+
+      <div class="flex items-center gap-1">
+        <UIcon
+          v-if="node.icon"
+          :name="node.icon"
+          class="text-dimmed size-3.5"
+        />
+
+        <span class="flex-1 text-sm">{{ processI18n(node.label) }}</span>
+      </div>
+    </div>
+
+    <div v-if="hasChildren && isExpanded" class="relative">
+      <div
+        class="bg-default absolute top-0 bottom-0 left-0 w-px"
+        :style="{ left: verticalLinePosition }"
+      />
+
+      <PermissionsTreeNode
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        :level="level + 1"
+        :checked-ids="checkedIds"
+        :expanded-nodes="expandedNodes"
+        @toggle-expanded="(id: string) => emit('toggle-expanded', id)"
+        @check-change="
+          (childNode: PermissionNode, childChecked: boolean) =>
+            emit('check-change', childNode, childChecked)
+        "
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,258 @@
+<script setup lang="ts" generic="T extends Data">
+import { useFocus, useFocusWithin } from "@vueuse/core";
+import { tv } from "tailwind-variants";
+import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
+
+import TableMenu from "./Menu.vue";
+import type { Data } from "./Table.vue";
+import type { CustomButton } from "../../../composables/table-view/types/custom-button";
+import { useTableContext } from "../../composables/table/useTableContext";
+import { createTableViewShiftFShortcut } from "../../../composables/table-view/shortcuts/tableViewShiftF";
+
+const theme = tv({
+  slots: {
+    root: "flex items-center gap-1",
+    base: "flex items-center gap-0.5",
+    search: "flex items-center",
+    searchContainer:
+      "transition-width relative overflow-hidden duration-300 ease-in-out",
+
+    add: "hidden sm:flex",
+    addMobile: "sm:hidden",
+  },
+  variants: {
+    searchActive: {
+      true: {
+        searchContainer: "w-40 sm:w-64",
+      },
+      false: {
+        searchContainer: "w-0",
+      },
+    },
+  },
+});
+
+interface TableActionsProps {
+  canAddRow?: boolean;
+  customButtons?: CustomButton[];
+  onCustomButton?: (button: CustomButton) => void;
+}
+
+const props = defineProps<TableActionsProps>();
+
+const tableSharedData = useTableContext<T>();
+
+// Chrome capabilities of the active display; gates the transverse controls.
+const capabilities = computed(() => tableSharedData.activeCapabilities.value);
+
+const appConfig = useDmsAppConfig() as DmsAppConfig & {
+  ui: { tableActions: Partial<typeof theme> };
+};
+
+const { t } = useI18n();
+const { processI18n } = useTranslation();
+
+const searchActive = ref(false);
+const searchInputRef = ref<HTMLInputElement>();
+const searchSectionRef = ref<HTMLElement>();
+
+const { focused: inputFocus } = useFocus(searchInputRef);
+const { focused: searchAreaFocused } = useFocusWithin(searchSectionRef);
+
+watch(
+  () => tableSharedData!.globalFilterState.value,
+  (newValue) => {
+    if (newValue === undefined && searchActive.value) {
+      searchActive.value = false;
+    }
+  },
+);
+
+watch(searchAreaFocused, (isFocused) => {
+  if (isFocused || !searchActive.value) return;
+  if (tableSharedData?.globalFilterState.value) return;
+  searchActive.value = false;
+});
+
+const toggleSearch = () => {
+  searchActive.value = !searchActive.value;
+  inputFocus.value = !inputFocus.value;
+};
+
+const focusSearchBar = () => {
+  (searchInputRef.value as unknown as { $el: HTMLElement } | undefined)?.$el
+    ?.querySelector("input")
+    ?.focus();
+};
+
+const closeSearch = () => {
+  tableSharedData!.globalFilterState.value = "";
+  searchActive.value = false;
+};
+
+defineShortcuts({
+  shift_f: createTableViewShiftFShortcut(
+    searchActive,
+    tableSharedData!.globalFilterState,
+    focusSearchBar,
+  ),
+});
+
+const hasCustomFilterConfig = computed(() => {
+  const filters = tableSharedData?.columnFiltersState.value || [];
+  return filters.some((filter) => {
+    if (!filter.pinned) return true;
+    return !areEqualValues(filter.value, filter.initialValue);
+  });
+});
+
+const areEqualValues = (a: unknown, b: unknown): boolean => {
+  if (a === b) return true;
+  if (a == null && b == null) return true;
+  return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+};
+
+const toggleFiltersRow = () => {
+  if (!tableSharedData) return;
+  tableSharedData.filtersRowOpenState.value =
+    !tableSharedData.filtersRowOpenState.value;
+};
+
+const sortOpen = ref(false);
+const menuOpen = ref(false);
+
+const filtersRowOpen = computed(
+  () => !!tableSharedData?.filtersRowOpenState.value,
+);
+
+const triggerVariant = (isOpen: boolean) => (isOpen ? "soft" : "ghost");
+
+const uiTableActionsVariant = tv({
+  extend: tv(theme),
+  ...(appConfig.ui?.tableActions || {}),
+});
+const uiTableActions = computed(() => uiTableActionsVariant());
+</script>
+
+<template>
+  <div :class="uiTableActions.root()">
+    <div :class="uiTableActions.base()">
+      <div
+        v-if="capabilities.search"
+        ref="searchSectionRef"
+        :class="uiTableActions.search()"
+      >
+        <UButton
+          icon="i-ph-magnifying-glass"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          square
+          @click="toggleSearch"
+        />
+
+        <div :class="uiTableActions.searchContainer({ searchActive })">
+          <UInput
+            v-if="searchActive"
+            ref="searchInputRef"
+            v-model="tableSharedData!.globalFilterState.value"
+            :placeholder="t('dms.table.search_placeholder')"
+            size="sm"
+            class="w-full"
+            variant="ghost"
+            autofocus
+            @keydown.esc="closeSearch"
+          />
+        </div>
+      </div>
+
+      <UChip
+        v-if="capabilities.filters"
+        id="filter-trigger"
+        :show="hasCustomFilterConfig"
+      >
+        <UButton
+          icon="i-ph-funnel"
+          color="neutral"
+          :variant="triggerVariant(filtersRowOpen)"
+          size="sm"
+          square
+          :aria-label="t('dms.table.filters_title')"
+          @click="toggleFiltersRow"
+        />
+      </UChip>
+
+      <UPopover v-if="capabilities.sorting" v-model:open="sortOpen">
+        <UChip
+          id="sorting-trigger"
+          :show="!!tableSharedData?.hasCustomSort.value"
+        >
+          <UButton
+            icon="i-ph-arrows-down-up"
+            color="neutral"
+            :variant="triggerVariant(sortOpen)"
+            size="sm"
+            square
+          />
+        </UChip>
+
+        <template #content>
+          <TableMenu default-view="sort" />
+        </template>
+      </UPopover>
+
+      <UButton
+        id="refresh-trigger"
+        icon="i-ph-arrow-clockwise"
+        :aria-label="t('dms.button.refresh_data')"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        square
+        @click="tableSharedData!.emits('refresh')"
+      />
+
+      <UPopover v-model:open="menuOpen">
+        <UButton
+          id="table-menu"
+          :icon="appConfig.ui.icons.ellipsis"
+          color="neutral"
+          :variant="triggerVariant(menuOpen)"
+          size="sm"
+          square
+        />
+
+        <template #content>
+          <TableMenu />
+        </template>
+      </UPopover>
+    </div>
+
+    <UButton
+      v-if="canAddRow"
+      :label="t('dms.table.new_row')"
+      :class="uiTableActions.add()"
+      size="sm"
+      @click="tableSharedData!.emits('add')"
+    />
+    <UButton
+      v-if="canAddRow"
+      :aria-label="t('dms.table.new_row')"
+      :icon="appConfig.ui.icons.plus"
+      :class="uiTableActions.addMobile()"
+      size="sm"
+      @click="tableSharedData!.emits('add')"
+    />
+
+    <UButton
+      v-for="(button, index) in customButtons"
+      :key="`custom-btn-${index}`"
+      :label="processI18n(button.label)"
+      :icon="button.icon"
+      :variant="button.variant"
+      :color="button.color"
+      size="sm"
+      @click="props.onCustomButton?.(button)"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,143 @@
+<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 { TableSharedData, Data } from "./Table.vue";
+
+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",
+  },
+});
+
+interface TableEmptyProps {
+  canAddRow?: boolean;
+  /**
+   * Message (i18n key) of a failed data fetch; switches the panel to its
+   * error state so a refused query never reads as "no data".
+   */
+  loadError?: string;
+}
+
+const props = defineProps<TableEmptyProps>();
+
+const { t, te } = useI18n();
+
+const appConfig = useDmsAppConfig() as DmsAppConfig & {
+  ui: { tableEmpty: Partial<typeof theme> };
+};
+
+const tableSharedDataRef =
+  injectLocal<ShallowRef<TableSharedData<T>>>("tableSharedData");
+const tableSharedData = computed(() => tableSharedDataRef?.value);
+
+const stripesId = `table-empty-stripes-${useId()}`;
+
+const isFiltered = computed(() => {
+  const hasGlobalFilter = !!tableSharedData.value?.globalFilterState?.value;
+  const hasColumnFilters =
+    (tableSharedData.value?.columnFiltersState?.value?.length ?? 0) > 0;
+  return hasGlobalFilter || hasColumnFilters;
+});
+
+interface EmptyStateContent {
+  title: string;
+  description: string;
+  icon: string;
+}
+
+const content = 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
+    // `{ title, description }` pair, so the description is tried first.
+    return {
+      title: t("dms.table.load_error_title"),
+      description: te(`${props.loadError}.description`)
+        ? t(`${props.loadError}.description`)
+        : te(props.loadError)
+          ? t(props.loadError)
+          : t("dms.table.load_error_message"),
+      icon: "i-ph-warning-circle",
+    };
+  }
+  if (isFiltered.value) {
+    return {
+      title: t("dms.table.no_results_title"),
+      description: t("dms.table.no_results_message"),
+      icon: "i-ph-folder-open",
+    };
+  }
+  return {
+    title: t("dms.table.empty_title"),
+    description: t("dms.table.empty_message"),
+    icon: "i-ph-folder-open",
+  };
+});
+
+const actions = computed(() => {
+  if (props.loadError) {
+    return [
+      {
+        label: t("dms.table.load_error_retry"),
+        color: "neutral" as const,
+        onClick: () => tableSharedData.value?.emits("refresh"),
+      },
+    ];
+  }
+  if (props.canAddRow) {
+    return [
+      {
+        label: t("dms.table.new_row"),
+        color: "neutral" 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>
+</template>