@antelopejs/dms 0.0.1

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

@@ -0,0 +1,118 @@
+<script
+  setup
+  lang="ts"
+  generic="
+    T extends ArrayOrNested<SelectItem>,
+    VK extends GetItemKeys<T> = 'value',
+    M extends boolean = false
+  "
+>
+import { useForwardPropsEmits } from "reka-ui";
+import type {
+  SelectProps,
+  SelectEmits,
+  SelectSlots,
+  SelectItem,
+} from "@nuxt/ui/components/Select.vue";
+import type {
+  ArrayOrNested,
+  GetItemKeys,
+} from "@nuxt/ui/runtime/types/utils.js";
+
+type ColoredSelectItem = Extract<SelectItem, object> & {
+  label?: string;
+  icon?: string;
+  iconColor?: string;
+  textColor?: string;
+};
+
+interface ExtendedSelectProps extends SelectProps<T, VK, M> {
+  deselectable?: boolean;
+}
+
+const props = withDefaults(defineProps<ExtendedSelectProps>(), {
+  deselectable: true,
+});
+const emits = defineEmits<SelectEmits<T, VK, M>>();
+defineSlots<SelectSlots<T, VK, M>>();
+
+const forwardedProps = computed(() => {
+  const { deselectable: _, modelValue: __, ...rest } = props;
+  return rest;
+});
+
+const forwarded = useForwardPropsEmits(forwardedProps, emits);
+
+const flattenedItems = computed<ColoredSelectItem[]>(() => {
+  const items = (props.items ?? []) as unknown as
+    | ColoredSelectItem[]
+    | ColoredSelectItem[][];
+  return Array.isArray(items[0])
+    ? (items as ColoredSelectItem[][]).flat()
+    : (items as ColoredSelectItem[]);
+});
+
+const selectedItem = computed<ColoredSelectItem | undefined>(() => {
+  const value = props.modelValue;
+  if (value === undefined || value === null) return undefined;
+  const valueKey = (props.valueKey ?? "value") as keyof ColoredSelectItem;
+  return flattenedItems.value.find(
+    (item) => (item as Record<string, unknown>)[valueKey as string] === value,
+  );
+});
+
+const colorVar = (color?: string) =>
+  color ? { color: `var(--ui-${color})` } : undefined;
+
+function handleUpdateModelValue(value: unknown) {
+  const shouldDeselect =
+    props.deselectable && !props.multiple && value === props.modelValue;
+  (emits as (evt: "update:modelValue", value: unknown) => void)(
+    "update:modelValue",
+    shouldDeselect ? undefined : value,
+  );
+}
+</script>
+
+<template>
+  <USelect
+    v-bind="forwarded as Record<string, unknown>"
+    :model-value="props.modelValue as SelectProps<T, VK, M>['modelValue']"
+    @update:model-value="handleUpdateModelValue as (value: unknown) => void"
+  >
+    <template
+      v-if="
+        selectedItem &&
+        (selectedItem.icon || selectedItem.iconColor || selectedItem.textColor)
+      "
+      #default
+    >
+      <span class="inline-flex items-center gap-1.5">
+        <UIcon
+          v-if="selectedItem.icon"
+          :name="selectedItem.icon"
+          class="size-4 shrink-0"
+          :style="colorVar(selectedItem.iconColor)"
+        />
+        <span :style="colorVar(selectedItem.textColor)">
+          {{ selectedItem.label }}
+        </span>
+      </span>
+    </template>
+
+    <template #item-leading="{ item }">
+      <UIcon
+        v-if="(item as ColoredSelectItem).icon"
+        :name="(item as ColoredSelectItem).icon!"
+        class="size-4 shrink-0"
+        :style="colorVar((item as ColoredSelectItem).iconColor)"
+      />
+    </template>
+
+    <template #item-label="{ item }">
+      <span :style="colorVar((item as ColoredSelectItem).textColor)">
+        {{ (item as ColoredSelectItem).label }}
+      </span>
+    </template>
+  </USelect>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { SliderProps, SliderEmits } from "@nuxt/ui/components/Slider.vue";
+import { useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<SliderProps>();
+const emits = defineEmits<SliderEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <USlider v-bind="forwarded" />
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type {
+  SwitchProps,
+  SwitchEmits,
+  SwitchSlots,
+} from "@nuxt/ui/components/Switch.vue";
+import { useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<SwitchProps>();
+const emits = defineEmits<SwitchEmits>();
+defineSlots<SwitchSlots>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <USwitch v-bind="forwarded" />
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type {
+  TextareaProps,
+  TextareaEmits,
+  TextareaSlots,
+} from "@nuxt/ui/components/Textarea.vue";
+import { useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<TextareaProps>();
+const emits = defineEmits<TextareaEmits>();
+defineSlots<TextareaSlots>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <UTextarea v-bind="forwarded" />
+</template>

package/frontend-vue/layers/dms-ui/app/components/grid/Grid.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+import { GRID_CONTEXT, type GridContext } from "./constants";
+
+interface GridProps extends DefaultComponentProps {
+  gap?: string;
+}
+
+const props = withDefaults(defineProps<GridProps>(), {
+  gap: "1rem",
+});
+
+const rowColumnCounts = ref<number[]>([]);
+
+const maxColumns = computed(() => {
+  if (rowColumnCounts.value.length === 0) return 1;
+  return Math.max(...rowColumnCounts.value);
+});
+
+const gapRef = computed(() => props.gap);
+
+provide<GridContext>(GRID_CONTEXT, {
+  registerRowColumnCount: (columnCount: number) => {
+    rowColumnCounts.value.push(columnCount);
+  },
+  maxColumns,
+  gap: gapRef,
+});
+
+const gridStyle = computed(() => ({
+  display: "grid",
+  gridTemplateColumns: `repeat(${maxColumns.value}, 1fr)`,
+  gap: props.gap,
+  width: "100%",
+}));
+</script>
+
+<template>
+  <div :style="gridStyle">
+    <slot />
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/components/grid/GridRow.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+import { GRID_CONTEXT, type GridContext } from "./constants";
+
+interface GridRowProps extends DefaultComponentProps {}
+
+const props = defineProps<GridRowProps>();
+
+const gridContext = inject<GridContext>(GRID_CONTEXT);
+
+const columnCount = props.childCount || 0;
+if (gridContext) {
+  gridContext.registerRowColumnCount(columnCount);
+}
+
+const rowStyle = computed(() => ({
+  gridColumn: "1 / -1",
+  display: "grid",
+  gridTemplateColumns: `repeat(${gridContext?.maxColumns.value || 1}, 1fr)`,
+  gap: gridContext?.gap.value ?? "1rem",
+}));
+</script>
+
+<template>
+  <div :style="rowStyle" class="dms-grid-row">
+    <slot />
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/components/grid/constants.ts

@@ -0,0 +1,7 @@
+export const GRID_CONTEXT = Symbol("grid-context");
+
+export interface GridContext {
+  registerRowColumnCount: (count: number) => void;
+  maxColumns: ComputedRef<number>;
+  gap: ComputedRef<string>;
+}

package/frontend-vue/layers/dms-ui/app/components/kpi/KpiCard.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useChartFetch } from "../../composables/chart/useChartFetch";
+import { formatValueParts } from "../../composables/chart/formatValue";
+import { resolveSparklineAccent } from "../../composables/chart/resolveSparklineAccent";
+import type {
+  KpiCardResponse,
+  ValueFormat,
+  ValuePrecision,
+} from "../../composables/chart/types";
+import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+
+interface Props extends DefaultComponentProps {
+  title: string;
+  /** "stat" = compact DMS v2 look: mono uppercase label, bare small icon. */
+  variant?: "default" | "stat";
+  description?: string;
+  icon?: string;
+  fetchUrl?: string;
+  fetchUrlMethod?: string;
+  periodScope?: string;
+  valueFormat?: ValueFormat;
+  currencyCode?: string;
+  valuePrecision?: ValuePrecision;
+  showDelta?: boolean;
+  showSparkline?: boolean;
+  sparklineAccent?: string;
+  invert?: boolean;
+  compareLabel?: string;
+  staticValue?: number;
+  staticDelta?: number;
+  staticSparkline?: number[];
+}
+
+const DEFAULT_FALLBACK_ICON = "i-lucide-bar-chart-3";
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "default",
+  showDelta: true,
+  showSparkline: false,
+  valueFormat: "compact",
+  sparklineAccent: "auto",
+  currencyCode: "EUR",
+});
+
+const { locale } = useI18n();
+const { processI18n } = useTranslation();
+useComponentEvent(props.componentId);
+const { state: watchState } = useWatch(
+  props.watchActions || [],
+  props.componentId,
+);
+const watchKey = computed(() => JSON.stringify(watchState.value));
+
+const staticData = computed<KpiCardResponse | null>(() => {
+  if (props.staticValue === undefined) return null;
+  return {
+    value: props.staticValue,
+    delta: props.staticDelta,
+    sparkline: props.staticSparkline,
+  };
+});
+
+const { data, isLoading } = useChartFetch<KpiCardResponse>({
+  fetchUrl: props.fetchUrl,
+  fetchUrlMethod: props.fetchUrlMethod,
+  periodScope: props.periodScope,
+  staticData: () => staticData.value,
+  watchSource: () => watchKey.value,
+});
+
+const value = computed(() => data.value?.value ?? 0);
+const delta = computed(() => data.value?.delta ?? null);
+const sparkline = computed(() => data.value?.sparkline ?? []);
+
+const formattedParts = computed(() =>
+  formatValueParts(
+    value.value,
+    props.valueFormat,
+    locale.value,
+    props.currencyCode,
+    props.valuePrecision,
+  ),
+);
+
+const showTrend = computed(() => props.showDelta && delta.value !== null);
+
+const resolvedSparklineAccent = computed(() =>
+  resolveSparklineAccent(props.sparklineAccent, {
+    delta: delta.value,
+    sparkline: sparkline.value,
+    invert: props.invert,
+  }),
+);
+
+const resolvedIcon = computed(() => props.icon || DEFAULT_FALLBACK_ICON);
+
+const isStat = computed(() => props.variant === "stat");
+const labelClass = computed(() =>
+  isStat.value
+    ? "text-dimmed truncate font-mono text-[10px] font-medium uppercase tracking-widest"
+    : "text-muted truncate text-sm",
+);
+const iconWrapClass = computed(() =>
+  isStat.value
+    ? "text-dimmed flex shrink-0 items-center justify-center"
+    : "bg-elevated dark:bg-accented text-toned flex shrink-0 items-center justify-center rounded-lg p-2",
+);
+</script>
+
+<template>
+  <DmsCard :padded="false" class="p-4 sm:p-5">
+    <div class="flex items-start justify-between gap-3">
+      <div class="min-w-0 flex-1">
+        <p :class="labelClass">{{ processI18n(title) }}</p>
+        <p class="mt-1 text-2xl font-semibold tracking-tight tabular-nums">
+          <USkeleton v-if="isLoading && data === null" class="h-8 w-24" />
+          <span v-else class="inline-flex items-baseline gap-x-1">
+            <span
+              v-if="formattedParts.unit && formattedParts.unitIsPrefix"
+              class="text-muted text-base font-medium"
+            >
+              {{ formattedParts.unit }}
+            </span>
+            <span>{{ formattedParts.value }}</span>
+            <span
+              v-if="formattedParts.unit && !formattedParts.unitIsPrefix"
+              class="text-muted text-base font-medium"
+            >
+              {{ formattedParts.unit }}
+            </span>
+          </span>
+        </p>
+        <div
+          v-if="showTrend || compareLabel || description"
+          class="mt-2 flex min-w-0 items-center gap-x-2"
+        >
+          <DmsTrendBadge v-if="showTrend" :delta="delta" :invert="invert" />
+          <span v-if="compareLabel" class="text-muted truncate text-xs">
+            {{ processI18n(compareLabel) }}
+          </span>
+          <span v-else-if="description" class="text-muted truncate text-xs">
+            {{ processI18n(description) }}
+          </span>
+        </div>
+      </div>
+      <div :class="iconWrapClass">
+        <UIcon
+          :name="resolvedIcon"
+          :class="isStat ? 'size-4' : 'size-5'"
+          aria-hidden="true"
+        />
+      </div>
+    </div>
+    <div v-if="showSparkline && sparkline.length > 0" class="mt-4 h-10">
+      <DmsSparkline
+        :values="sparkline"
+        :accent="resolvedSparklineAccent"
+        :aria-label="processI18n(title)"
+      />
+    </div>
+  </DmsCard>
+</template>

package/frontend-vue/layers/dms-ui/app/components/master-detail/MasterDetail.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+// Two-pane master/detail layout (design .md-split): a selectable list on the
+// left (380px) and a detail panel on the right. The list is driven by `items`
+// + v-model; the detail is rendered by the default slot, which receives the
+// currently selected value.
+interface MdItem {
+  value: string | number;
+  label: string;
+  sublabel?: string;
+  icon?: string;
+}
+
+defineProps<{
+  items: MdItem[];
+  listLabel?: string;
+}>();
+
+const selected = defineModel<string | number>();
+
+defineSlots<{
+  default?: (props: { selected: string | number | undefined }) => unknown;
+}>();
+</script>
+
+<template>
+  <div class="grid items-start gap-5 lg:grid-cols-[380px_1fr]">
+    <!-- List pane -->
+    <div class="dms-card p-2">
+      <p
+        v-if="listLabel"
+        class="text-dimmed px-2.5 pt-2.5 pb-1 font-mono text-[10px] tracking-widest uppercase"
+      >
+        {{ listLabel }}
+      </p>
+      <ul class="flex flex-col gap-1.5">
+        <li v-for="item in items" :key="item.value">
+          <button
+            type="button"
+            class="flex w-full items-start gap-3 rounded-md border border-transparent px-3.5 py-3 text-left transition-colors"
+            :class="
+              selected === item.value
+                ? 'border-primary bg-primary/10'
+                : 'hover:bg-elevated'
+            "
+            @click="selected = item.value"
+          >
+            <span
+              v-if="item.icon"
+              class="grid size-[26px] shrink-0 place-items-center"
+              :class="selected === item.value ? 'text-primary' : 'text-toned'"
+            >
+              <UIcon :name="item.icon" class="size-[18px]" aria-hidden="true" />
+            </span>
+            <span class="min-w-0">
+              <span class="text-highlighted block text-sm font-semibold">
+                {{ item.label }}
+              </span>
+              <span
+                v-if="item.sublabel"
+                class="text-muted mt-0.5 block truncate text-xs"
+              >
+                {{ item.sublabel }}
+              </span>
+            </span>
+          </button>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Detail pane -->
+    <div class="dms-card overflow-hidden">
+      <slot :selected="selected" />
+    </div>
+  </div>
+</template>