@antelopejs/dms 0.0.1

package/frontend-vue/layers/dms-ui/app/components/chart/internal/Sparkline.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { computed, useId } from "vue";
+
+interface Props {
+  values: number[];
+  accent?: string;
+  ariaLabel?: string;
+}
+
+const VIEWBOX_WIDTH = 100;
+const VIEWBOX_HEIGHT = 30;
+const STROKE_WIDTH = 1.5;
+const END_DOT_RADIUS = 1.6;
+const COORDINATE_PRECISION = 2;
+const PADDING = 1;
+const GRADIENT_TOP_OPACITY = 0.25;
+const GRADIENT_BOTTOM_OPACITY = 0;
+const DEFAULT_ARIA_LABEL = "Trend";
+
+// All accents resolve through the theme tokens (cf. primary), so sparklines
+// follow the design palette + light/dark mode instead of raw RGB.
+const STROKE_BY_ACCENT: Record<string, string> = {
+  success: "var(--ui-success)",
+  error: "var(--ui-error)",
+  primary: "var(--ui-primary)",
+  info: "var(--ui-info)",
+  neutral: "var(--ui-text-toned)",
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  accent: "primary",
+});
+
+const uid = useId();
+const gradientId = `dms-spark-grad-${uid}`;
+
+const stroke = computed(
+  () => STROKE_BY_ACCENT[props.accent] ?? STROKE_BY_ACCENT.primary!,
+);
+
+const coords = computed(() => {
+  const values = props.values;
+  if (values.length === 0) return [] as Array<{ x: number; y: number }>;
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const span = max - min || 1;
+  const denom = values.length > 1 ? values.length - 1 : 1;
+  return values.map((value, index) => ({
+    x: (index / denom) * VIEWBOX_WIDTH,
+    y:
+      VIEWBOX_HEIGHT -
+      ((value - min) / span) * (VIEWBOX_HEIGHT - PADDING * 2) -
+      PADDING,
+  }));
+});
+
+function formatPoint(point: { x: number; y: number }): string {
+  return `${point.x.toFixed(COORDINATE_PRECISION)},${point.y.toFixed(COORDINATE_PRECISION)}`;
+}
+
+const points = computed(() => coords.value.map(formatPoint).join(" "));
+
+const areaPoints = computed(() => {
+  if (coords.value.length === 0) return "";
+  const line = coords.value.map(formatPoint).join(" ");
+  const last = coords.value[coords.value.length - 1]!;
+  const first = coords.value[0]!;
+  return `${first.x.toFixed(COORDINATE_PRECISION)},${VIEWBOX_HEIGHT} ${line} ${last.x.toFixed(COORDINATE_PRECISION)},${VIEWBOX_HEIGHT}`;
+});
+
+const lastPoint = computed(() => coords.value[coords.value.length - 1] ?? null);
+</script>
+
+<template>
+  <svg
+    :viewBox="`0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`"
+    preserveAspectRatio="none"
+    class="block h-full w-full overflow-visible"
+    role="img"
+    :aria-label="ariaLabel || DEFAULT_ARIA_LABEL"
+  >
+    <defs>
+      <linearGradient :id="gradientId" x1="0" x2="0" y1="0" y2="1">
+        <stop
+          offset="0%"
+          :stop-color="stroke"
+          :stop-opacity="GRADIENT_TOP_OPACITY"
+        />
+        <stop
+          offset="100%"
+          :stop-color="stroke"
+          :stop-opacity="GRADIENT_BOTTOM_OPACITY"
+        />
+      </linearGradient>
+    </defs>
+    <polygon
+      v-if="areaPoints"
+      :points="areaPoints"
+      :fill="`url(#${gradientId})`"
+    />
+    <polyline
+      v-if="points"
+      :points="points"
+      :stroke="stroke"
+      :stroke-width="STROKE_WIDTH"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      vector-effect="non-scaling-stroke"
+    />
+    <circle
+      v-if="lastPoint"
+      :cx="lastPoint.x"
+      :cy="lastPoint.y"
+      :r="END_DOT_RADIUS"
+      :fill="stroke"
+    />
+  </svg>
+</template>

package/frontend-vue/layers/dms-ui/app/components/chart/internal/TrendBadge.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { formatDeltaPercent } from "../../../composables/chart/formatValue";
+
+interface Props {
+  delta: number | null | undefined;
+  invert?: boolean;
+  suffix?: string;
+}
+
+const props = defineProps<Props>();
+
+const POSITIVE_CLASSES = "bg-success/10 text-success";
+const NEGATIVE_CLASSES = "bg-error/10 text-error";
+const NEUTRAL_CLASSES = "bg-elevated text-muted";
+const ICON_UP = "i-lucide-trending-up";
+const ICON_DOWN = "i-lucide-trending-down";
+const ICON_FLAT = "i-lucide-minus";
+const EMPTY_DISPLAY = "—";
+
+const { locale } = useI18n();
+
+const isPositive = computed(() => {
+  if (props.delta === null || props.delta === undefined) return null;
+  if (props.delta === 0) return null;
+  const positive = props.delta > 0;
+  return props.invert ? !positive : positive;
+});
+
+const colorClass = computed(() => {
+  if (isPositive.value === null) return NEUTRAL_CLASSES;
+  return isPositive.value ? POSITIVE_CLASSES : NEGATIVE_CLASSES;
+});
+
+const icon = computed(() => {
+  if (props.delta === null || props.delta === undefined || props.delta === 0) {
+    return ICON_FLAT;
+  }
+  return props.delta > 0 ? ICON_UP : ICON_DOWN;
+});
+
+const display = computed(() => {
+  if (props.delta === null || props.delta === undefined) return EMPTY_DISPLAY;
+  const percent = formatDeltaPercent(props.delta, locale.value);
+  return `${percent}${props.suffix ?? ""}`;
+});
+</script>
+
+<template>
+  <span
+    class="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium whitespace-nowrap tabular-nums transition-colors"
+    :class="colorClass"
+  >
+    <UIcon :name="icon" class="size-3" aria-hidden="true" />
+    {{ display }}
+  </span>
+</template>

package/frontend-vue/layers/dms-ui/app/components/confirm/ConfirmModal.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+interface ConfirmModalProps {
+  title: string;
+  description: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  confirmColor?: "primary" | "error" | "warning";
+}
+
+interface ConfirmModalEmits {
+  (e: "close", value: boolean): void;
+}
+
+const props = withDefaults(defineProps<ConfirmModalProps>(), {
+  confirmColor: "primary",
+});
+
+const emit = defineEmits<ConfirmModalEmits>();
+
+const isOpen = ref(true);
+
+function handleConfirm() {
+  isOpen.value = false;
+  emit("close", true);
+}
+
+function handleCancel() {
+  isOpen.value = false;
+  emit("close", false);
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="isOpen"
+    :title="props.title"
+    @update:open="(v: boolean) => !v && handleCancel()"
+  >
+    <template #body>
+      <p class="text-muted">{{ props.description }}</p>
+    </template>
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton
+          :label="props.cancelLabel || $t('dms.confirm.cancel')"
+          variant="outline"
+          color="neutral"
+          @click="handleCancel"
+        />
+        <UButton
+          :label="props.confirmLabel || $t('dms.confirm.confirm')"
+          :color="props.confirmColor"
+          @click="handleConfirm"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>

package/frontend-vue/layers/dms-ui/app/components/copy/CopyButton.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useClipboard } from "@vueuse/core";
+
+// Copy-to-clipboard icon button (design .copy-btn): muted by default, turns
+// success-green once the value lands on the clipboard, then reverts.
+const props = defineProps<{
+  value: string;
+}>();
+
+const { t } = useI18n();
+const { copy, copied } = useClipboard({ copiedDuring: 1600 });
+
+const label = computed(() =>
+  t(copied.value ? "dms.button.copied" : "dms.button.copy"),
+);
+</script>
+
+<template>
+  <button
+    type="button"
+    :title="label"
+    :aria-label="label"
+    class="inline-grid size-[30px] place-items-center rounded-[7px] transition-colors"
+    :class="
+      copied
+        ? 'text-success'
+        : 'text-muted hover:bg-elevated hover:text-default'
+    "
+    @click="copy(props.value)"
+  >
+    <UIcon
+      :name="copied ? 'i-lucide-check' : 'i-lucide-copy'"
+      class="size-4"
+      aria-hidden="true"
+    />
+  </button>
+</template>