@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/layers/dms-ui/app/components/list-row/ListRow.vue

@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import { computed, resolveComponent, useSlots } from "vue";
+import { tv } from "tailwind-variants";
+import DmsIconWell, {
+  type IconWellSize,
+  type IconWellTone,
+} from "../icon-well/IconWell.vue";
+
+export type ListRowSize = "sm" | "md";
+export type ListRowMarker = "leading" | "trailing";
+
+interface ListRowProps {
+  /** Root element when the row is not a link (`div`, `li`, `article`…). */
+  as?: string;
+  /** Turns the whole row into a link (rendered through `DmsLink`). */
+  to?: string;
+  /** Leading icon well; the `leading` slot replaces it (avatar, initials). */
+  icon?: string;
+  /** Well tone. `muted` (default) is the quiet v2 .cs-rowicon. */
+  tone?: IconWellTone;
+  /** Well size; defaults to `md` (34px, v2 settings row). */
+  iconSize?: IconWellSize;
+  /** Title text (the default slot overrides it, for inline badges). */
+  title?: string;
+  /** Muted line under the title (notification body). */
+  description?: string;
+  /** Meta entries, joined by "·" (the `meta` slot overrides them). */
+  meta?: string[];
+  /** Mono meta (times, paths, ids); the title stays sans. */
+  mono?: boolean;
+  /**
+   * `md` v2 settings row (14px title, centred, 20px column gap), `sm` feed /
+   * inbox row (13px title, top-aligned).
+   */
+  size?: ListRowSize;
+  /**
+   * Read state. Left out, the row has none; `true` shows the accent dot and
+   * a bold title, `false` a quieter title (inbox).
+   */
+  unread?: boolean;
+  /**
+   * Where the unread dot sits: `trailing` after the trailing meta (feed) or
+   * `leading`, a reserved column before the icon (inbox, keeps rows aligned).
+   */
+  marker?: ListRowMarker;
+  /** Screen-reader text of the unread dot. */
+  unreadLabel?: string;
+  /** The current entry ("This device"): accent rail and a fading tint. */
+  current?: boolean;
+  /** Hover band (clickable rows). Implied by `to`. */
+  interactive?: boolean;
+  /** Single-line title and meta, cut with an ellipsis (they wrap on phones). */
+  truncate?: boolean;
+  /** Mono text after the title column (a time, a count). */
+  trailing?: string;
+  /**
+   * Only the lead (icon, title, meta): no padding, hairline or trailing
+   * column. For a lead placed inside another row, e.g. a settings row label.
+   */
+  bare?: boolean;
+}
+
+interface ListRowSlots {
+  /** Title content (badges inline after the text). */
+  default?: () => unknown;
+  /** Replaces the icon well. */
+  leading?: () => unknown;
+  description?: () => unknown;
+  /** Meta entries: direct `<span>` children are joined by "·". */
+  meta?: () => unknown;
+  /** Right column: actions, a status, a time. */
+  trailing?: () => unknown;
+}
+
+const props = withDefaults(defineProps<ListRowProps>(), {
+  as: "div",
+  to: undefined,
+  icon: undefined,
+  tone: "muted",
+  iconSize: "md",
+  title: undefined,
+  description: undefined,
+  meta: undefined,
+  mono: false,
+  size: "md",
+  // Undefined, not false: an absent read state is not "read".
+  unread: undefined,
+  marker: "trailing",
+  unreadLabel: undefined,
+  current: false,
+  interactive: false,
+  truncate: false,
+  trailing: undefined,
+  bare: false,
+});
+defineSlots<ListRowSlots>();
+const slots = useSlots();
+const { t } = useI18n();
+
+// The marker column is as tall as the well so the dot sits on its centre.
+const MARKER_HEIGHTS: Record<IconWellSize, string> = {
+  "2xs": "h-7",
+  xs: "h-[30px]",
+  sm: "h-8",
+  md: "h-[34px]",
+  lg: "h-9",
+  xl: "h-10",
+  "2xl": "h-11",
+};
+
+// v2 .cs-lead / .activity / .cs-notif: one row of a list inside a card. Rows
+// are set apart by a hairline only between two rows, so a day separator or a
+// card head above the first one keeps its own edge.
+const theme = tv({
+  slots: {
+    root: "dms-list-row border-muted grid min-w-0 [.dms-list-row+&]:border-t",
+    lead: "flex min-w-0 gap-3",
+    marker: "grid w-2.5 shrink-0 place-items-start content-center",
+    dot: "size-2 rounded-full bg-(--dms-accent-fill) shadow-[0_0_0_3px_var(--dms-accent-tint)]",
+    body: "min-w-0 flex-1",
+    title: "flex items-center gap-2",
+    description: "text-muted mt-0.5 text-[12.5px]",
+    // The "·" closes each entry followed by another (rather than opening it),
+    // so a wrapped line never starts with a separator.
+    meta: "flex flex-wrap items-center gap-x-2 gap-y-1 [&>span:has(+span)]:after:text-dimmed [&>span:has(+span)]:after:ms-2 [&>span:has(+span)]:after:content-['·']",
+    trailing: "flex shrink-0 items-center gap-2",
+    trailingText:
+      "text-dimmed text-right font-mono text-[11.5px] font-medium whitespace-nowrap",
+    trailingDot:
+      "size-[7px] shrink-0 rounded-full bg-(--dms-accent-fill) ring-3 ring-(--dms-accent-tint)",
+  },
+  variants: {
+    size: {
+      // A wrapping flex row rather than a grid: the trailing column (a
+      // chevron, a time, a button) stays beside the lead while the lead keeps
+      // at least 11rem, and only then drops under it, end-aligned (a phone,
+      // wide actions).
+      md: {
+        root: "flex flex-wrap items-center gap-x-5 gap-y-2 px-[18px] py-3.5",
+        lead: "flex-[1_1_11rem] items-center",
+        trailing: "ms-auto",
+        title: "text-highlighted flex-wrap text-sm font-semibold",
+        meta: "text-muted mt-[3px] text-[12.5px] font-normal",
+      },
+      sm: {
+        root: "grid-cols-[minmax(0,1fr)_auto] items-start gap-x-3 px-[18px] py-2.5",
+        lead: "items-start",
+        title: "text-[13px] leading-[1.4]",
+        description: "leading-[1.45]",
+        meta: "text-dimmed mt-px text-xs",
+      },
+    },
+    readState: {
+      none: {},
+      unread: {},
+      read: {},
+    },
+    mono: {
+      true: { meta: "text-dimmed font-mono text-[11px] font-medium" },
+    },
+    hasDescription: {
+      true: { meta: "mt-1.5" },
+    },
+    hasTrailing: {
+      false: { root: "grid-cols-1" },
+    },
+    leadingMarker: {
+      true: { root: "py-3.5 ps-3.5 pe-4" },
+    },
+    interactive: {
+      true: {
+        root: "transition-colors duration-150 hover:bg-[color-mix(in_srgb,var(--ui-bg-elevated)_60%,transparent)]",
+      },
+    },
+    current: {
+      true: {
+        root: "bg-linear-90 from-(--dms-accent-tint) to-transparent to-60% shadow-[inset_2px_0_0_var(--dms-accent)]",
+      },
+    },
+    // One line on wide screens; a phone has no hover to reveal the cut
+    // end, so the title and meta wrap there instead.
+    truncate: {
+      true: {
+        title: "truncate max-sm:whitespace-normal",
+        meta: "flex-nowrap overflow-hidden whitespace-nowrap max-sm:flex-wrap max-sm:whitespace-normal",
+      },
+    },
+    bare: {
+      true: { root: "flex flex-nowrap items-center gap-3 border-0 p-0" },
+    },
+  },
+  compoundVariants: [
+    {
+      size: "sm",
+      readState: "none",
+      class: { title: "text-highlighted font-medium" },
+    },
+    {
+      size: "sm",
+      readState: "unread",
+      class: { title: "text-highlighted font-semibold" },
+    },
+    { size: "sm", readState: "read", class: { title: "text-toned" } },
+  ],
+});
+
+const readState = computed(() => {
+  if (props.unread === undefined) return "none";
+  return props.unread ? "unread" : "read";
+});
+const hasLeadingMarker = computed(
+  () => props.marker === "leading" && props.unread !== undefined,
+);
+const hasTrailingDot = computed(
+  () => props.marker === "trailing" && props.unread === true,
+);
+const hasTrailing = computed(
+  () => !!slots.trailing || !!props.trailing || hasTrailingDot.value,
+);
+const hasDescription = computed(
+  () => !!props.description || !!slots.description,
+);
+const hasMeta = computed(() => !!slots.meta || !!props.meta?.length);
+
+const ui = computed(() =>
+  theme({
+    size: props.size,
+    readState: readState.value,
+    mono: props.mono,
+    hasDescription: hasDescription.value,
+    hasTrailing: hasTrailing.value,
+    leadingMarker: hasLeadingMarker.value,
+    interactive: props.interactive || !!props.to,
+    current: props.current,
+    truncate: props.truncate,
+    bare: props.bare,
+  }),
+);
+
+const rootTag = computed(() =>
+  props.to && !props.bare ? resolveComponent("DmsLink") : props.as,
+);
+const unreadText = computed(
+  () => props.unreadLabel ?? t("dms.list_row.unread"),
+);
+</script>
+
+<template>
+  <component
+    :is="rootTag"
+    :to="props.to && !props.bare ? props.to : undefined"
+    :class="ui.root()"
+  >
+    <div :class="props.bare ? 'contents' : ui.lead()">
+      <span
+        v-if="hasLeadingMarker"
+        :class="[ui.marker(), MARKER_HEIGHTS[props.iconSize]]"
+      >
+        <span :class="[ui.dot(), { invisible: !props.unread }]" />
+        <span v-if="props.unread" class="sr-only">{{ unreadText }}</span>
+      </span>
+      <slot name="leading">
+        <DmsIconWell
+          v-if="props.icon"
+          :icon="props.icon"
+          :tone="props.tone"
+          :size="props.iconSize"
+        />
+      </slot>
+      <div :class="ui.body()">
+        <div
+          v-if="props.title || slots.default"
+          :class="ui.title()"
+          :title="props.truncate ? props.title : undefined"
+        >
+          <slot>{{ props.title }}</slot>
+        </div>
+        <p v-if="hasDescription" :class="ui.description()">
+          <slot name="description">{{ props.description }}</slot>
+        </p>
+        <div v-if="hasMeta" :class="ui.meta()">
+          <slot name="meta">
+            <span v-for="(entry, index) in props.meta" :key="index">
+              {{ entry }}
+            </span>
+          </slot>
+        </div>
+      </div>
+    </div>
+    <div v-if="hasTrailing && !props.bare" :class="ui.trailing()">
+      <slot name="trailing">
+        <span v-if="props.trailing" :class="ui.trailingText()">
+          {{ props.trailing }}
+        </span>
+      </slot>
+      <span v-if="hasTrailingDot" :class="ui.trailingDot()">
+        <span class="sr-only">{{ unreadText }}</span>
+      </span>
+    </div>
+  </component>
+</template>

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

@@ -23,7 +23,9 @@ defineSlots<{
 </script>
 
 <template>
-  <div class="grid items-start gap-5 lg:grid-cols-[380px_1fr]">
+  <div
+    class="grid grid-cols-1 items-start gap-5 lg:grid-cols-[380px_minmax(0,1fr)]"
+  >
     <!-- List pane -->
     <div class="dms-card p-2">
       <p

package/frontend-vue/layers/dms-ui/app/components/meter/Meter.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { tv } from "tailwind-variants";
+
+/**
+ * Fill colors of a meter segment. `primary` is the brand fill, `soft` its
+ * quieter line color (pending, reserved, locked).
+ */
+export type MeterTone =
+  | "primary"
+  | "soft"
+  | "neutral"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "error"
+  | "info";
+export type MeterFormat = "fraction" | "percent" | "value" | "none";
+export type MeterSize = "xs" | "sm" | "md";
+
+export interface MeterSegment {
+  value: number;
+  tone?: MeterTone;
+  /** Legend text ("6 members"). */
+  label?: string;
+}
+
+interface MeterProps {
+  /**
+   * Root element. `span` keeps a bar-only meter valid inside phrasing
+   * content (a button, a label).
+   */
+  as?: string;
+  /** Name of the measure, left of the value ("Seats"). */
+  label?: string;
+  /** Dimmed note after the label ("8 in use · 2 free"). */
+  hint?: string;
+  /** Single filled amount; ignored when `segments` is set. */
+  value?: number;
+  /** Total the bar stands for. */
+  max?: number;
+  /** Stacked fills, drawn in order with a 2px gap. */
+  segments?: MeterSegment[];
+  /** Shows the segment labels under the bar. */
+  legend?: boolean;
+  /** Value text right of the label: `8 / 10`, `80%`, `8` or nothing. */
+  format?: MeterFormat;
+  /** Replaces the formatted value text. */
+  valueLabel?: string;
+  /** Fill tone of a single value. */
+  tone?: MeterTone;
+  /** Percent of `max` from which the fill and value turn warning. */
+  warnAt?: number;
+  /** Percent of `max` from which the fill and value turn error. */
+  errorAt?: number;
+  /** Bar height: `xs` 4px (inline coverage), `sm` 6px (v2 .c-meter), `md` 8px. */
+  size?: MeterSize;
+}
+
+interface MeterSlots {
+  /** Extra legend content, pushed right (a "Manage" link). */
+  "legend-end"?: () => unknown;
+}
+
+const props = withDefaults(defineProps<MeterProps>(), {
+  as: "div",
+  label: undefined,
+  hint: undefined,
+  value: 0,
+  max: 100,
+  segments: undefined,
+  legend: false,
+  format: "none",
+  valueLabel: undefined,
+  tone: "primary",
+  warnAt: undefined,
+  errorAt: undefined,
+  size: "sm",
+});
+const slots = defineSlots<MeterSlots>();
+const { locale } = useI18n();
+
+const PERCENT = 100;
+
+const FILL_CLASSES: Record<MeterTone, string> = {
+  primary: "bg-(--dms-accent-fill)",
+  soft: "bg-(--dms-accent-line)",
+  neutral: "bg-(--ui-border-accented)",
+  secondary: "bg-secondary",
+  success: "bg-success",
+  warning: "bg-warning",
+  error: "bg-error",
+  info: "bg-info",
+};
+
+// v2 .c-meter: a label line with the mono value, the bar, then the legend.
+const theme = tv({
+  slots: {
+    root: "grid min-w-0 gap-1.5",
+    top: "flex min-w-0 items-baseline gap-2 text-[13px]",
+    label: "text-toned",
+    // One line beside the label; wraps on a phone rather than being cut.
+    hint: "text-dimmed truncate text-xs max-sm:whitespace-normal",
+    value: "text-toned ms-auto font-mono text-xs font-semibold tabular-nums",
+    track: "bg-accented flex w-full gap-0.5 overflow-hidden rounded-full",
+    fill: "block h-full shrink-0 transition-[width] duration-300",
+    legend: "text-muted flex flex-wrap items-center gap-x-3.5 gap-y-1 text-xs",
+    swatch: "me-1.5 inline-block size-2 rounded-[2px] align-[-1px]",
+  },
+  variants: {
+    size: {
+      xs: { track: "h-1" },
+      sm: { track: "h-1.5" },
+      md: { track: "h-2" },
+    },
+    level: {
+      ok: {},
+      warning: { value: "text-warning" },
+      error: { value: "text-error" },
+    },
+  },
+});
+
+const isSegmented = computed(() => !!props.segments?.length);
+const safeMax = computed(() => (props.max > 0 ? props.max : 0));
+const total = computed(() =>
+  isSegmented.value
+    ? props.segments!.reduce((sum, segment) => sum + segment.value, 0)
+    : props.value,
+);
+const percentOf = (amount: number): number =>
+  safeMax.value === 0
+    ? 0
+    : Math.min(Math.max((amount / safeMax.value) * PERCENT, 0), PERCENT);
+const totalPercent = computed(() => percentOf(total.value));
+
+const level = computed<"ok" | "warning" | "error">(() => {
+  if (props.errorAt !== undefined && totalPercent.value >= props.errorAt) {
+    return "error";
+  }
+  if (props.warnAt !== undefined && totalPercent.value >= props.warnAt) {
+    return "warning";
+  }
+  return "ok";
+});
+
+const singleTone = computed<MeterTone>(() =>
+  level.value === "ok" ? props.tone : level.value,
+);
+
+interface DrawnSegment {
+  width: number;
+  className: string;
+  label?: string;
+}
+
+const drawn = computed<DrawnSegment[]>(() => {
+  if (!isSegmented.value) {
+    return [
+      {
+        width: totalPercent.value,
+        // A lone fill keeps the rounded end of the track.
+        className: `${FILL_CLASSES[singleTone.value]} rounded-[inherit]`,
+      },
+    ];
+  }
+  return props.segments!.map((segment) => ({
+    width: percentOf(segment.value),
+    className: FILL_CLASSES[segment.tone ?? "primary"],
+    label: segment.label,
+  }));
+});
+
+const legendEntries = computed(() =>
+  drawn.value.filter((segment) => !!segment.label),
+);
+
+const formatNumber = (amount: number): string =>
+  new Intl.NumberFormat(locale.value).format(amount);
+
+const valueText = computed(() => {
+  if (props.valueLabel) return props.valueLabel;
+  switch (props.format) {
+    case "fraction":
+      return `${formatNumber(total.value)} / ${formatNumber(props.max)}`;
+    case "percent":
+      return `${Math.round(totalPercent.value)}%`;
+    case "value":
+      return formatNumber(total.value);
+    default:
+      return "";
+  }
+});
+
+const hasTop = computed(
+  () => !!props.label || !!props.hint || !!valueText.value,
+);
+const hasLegend = computed(
+  () =>
+    (props.legend && legendEntries.value.length > 0) || !!slots["legend-end"],
+);
+const ui = computed(() => theme({ size: props.size, level: level.value }));
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    :class="ui.root()"
+    role="meter"
+    :aria-label="props.label"
+    :aria-valuenow="total"
+    aria-valuemin="0"
+    :aria-valuemax="props.max"
+    :aria-valuetext="valueText || undefined"
+  >
+    <span v-if="hasTop" :class="ui.top()">
+      <span v-if="props.label" :class="ui.label()">{{ props.label }}</span>
+      <span v-if="props.hint" :class="ui.hint()">{{ props.hint }}</span>
+      <span v-if="valueText" :class="ui.value()">{{ valueText }}</span>
+    </span>
+    <span :class="ui.track()">
+      <span
+        v-for="(segment, index) in drawn"
+        :key="index"
+        :class="[ui.fill(), segment.className]"
+        :style="{ width: `${segment.width}%` }"
+      />
+    </span>
+    <span v-if="hasLegend" :class="ui.legend()">
+      <template v-if="props.legend">
+        <span v-for="(segment, index) in legendEntries" :key="index">
+          <i :class="[ui.swatch(), segment.className]" aria-hidden="true" />
+          {{ segment.label }}
+        </span>
+      </template>
+      <span v-if="slots['legend-end']" class="ms-auto">
+        <slot name="legend-end" />
+      </span>
+    </span>
+  </component>
+</template>