@antelopejs/dms 0.5.5 → 0.6.0

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

@@ -3,9 +3,24 @@ import type { ChainedCommands } from "@tiptap/core";
 import { useEditor, EditorContent, type AnyExtension } from "@tiptap/vue-3";
 import TiptapStarterKit from "@tiptap/starter-kit";
 import TextAlign from "@tiptap/extension-text-align";
+import { useFormField } from "@nuxt/ui/composables/useFormField";
+import { FIELD_SURFACE_INVALID_CLASS } from "../../../build/utils/fieldTrigger";
+
+interface RichTextProps {
+  /** Id of the editable area, the control a field label points to. */
+  id?: string;
+}
+
+const props = defineProps<RichTextProps>();
 
 const { t } = useI18n();
 
+// The field state UFormField hands its control: the error border goes on the
+// editor frame, the aria attributes on the editable area, and typing or
+// leaving it re-validates the field like a text input.
+const { color, ariaAttrs, emitFormBlur, emitFormInput } = useFormField(props);
+const invalid = computed(() => color.value === "error");
+
 const modelValue = defineModel<string>({ default: "<p></p>" });
 
 const editor = useEditor({
@@ -24,16 +39,32 @@ const editor = useEditor({
   ],
   editorProps: {
     attributes: {
+      ...(props.id ? { id: props.id } : {}),
       class:
-        "min-h-[500px] p-6 focus:outline-none prose prose-neutral dark:prose-invert max-w-none [&_h1]:text-3xl [&_h1]:font-semibold [&_h1]:mb-4 [&_h1]:mt-6 [&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:mb-3 [&_h2]:mt-5 [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:mb-2 [&_h3]:mt-4 [&_p]:leading-relaxed [&_a]:text-primary [&_a]:underline [&_a]:cursor-pointer [&_ul]:list-disc [&_ul]:ml-6 [&_ul]:mb-3 [&_ol]:list-decimal [&_ol]:ml-6 [&_ol]:mb-3 [&_li]:mb-1 [&_blockquote]:border-l-4 [&_blockquote]:border-default [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted [&_blockquote]:my-4 [&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded-md [&_pre]:overflow-x-auto [&_pre]:my-4 [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:font-mono [&_code]:text-sm [&_hr]:my-4 [&_hr]:border-default",
+        "min-h-[140px] px-3 py-2.5 text-[13px] focus:outline-none prose prose-neutral dark:prose-invert max-w-none [&_h1]:text-3xl [&_h1]:font-semibold [&_h1]:mb-4 [&_h1]:mt-6 [&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:mb-3 [&_h2]:mt-5 [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:mb-2 [&_h3]:mt-4 [&_p]:leading-relaxed [&_a]:text-primary [&_a]:underline [&_a]:cursor-pointer [&_ul]:list-disc [&_ul]:ml-6 [&_ul]:mb-3 [&_ol]:list-decimal [&_ol]:ml-6 [&_ol]:mb-3 [&_li]:mb-1 [&_blockquote]:border-l-4 [&_blockquote]:border-default [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted [&_blockquote]:my-4 [&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded-md [&_pre]:overflow-x-auto [&_pre]:my-4 [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:font-mono [&_code]:text-sm [&_hr]:my-4 [&_hr]:border-default",
     },
   },
   content: modelValue.value,
   onUpdate: ({ editor }) => {
     modelValue.value = editor.getHTML();
+    emitFormInput();
   },
+  onBlur: () => emitFormBlur(),
 });
 
+watch(
+  [() => unref(editor), ariaAttrs],
+  ([instance, attrs]) => {
+    const dom = instance?.view.dom;
+    if (!dom) return;
+    dom.removeAttribute("aria-describedby");
+    for (const [name, value] of Object.entries(attrs ?? {})) {
+      dom.setAttribute(name, String(value));
+    }
+  },
+  { immediate: true },
+);
+
 onBeforeUnmount(() => {
   unref(editor)?.destroy();
 });
@@ -54,6 +85,19 @@ watch(
   { flush: "sync" },
 );
 
+interface CharacterCountStorage {
+  characterCount?: { characters: () => number };
+}
+
+// Read in the script: a type cast written in the template is read as a tag
+// by the template formatter.
+const characterCount = computed(
+  () =>
+    (
+      editor.value?.storage as CharacterCountStorage | undefined
+    )?.characterCount?.characters() || editor.value?.getText().length,
+);
+
 const chain = (): ChainedCommands | undefined => editor.value?.chain().focus();
 
 const linkUrl = ref("");
@@ -204,9 +248,16 @@ const toolbarButtons = computed(() => [
 
 <template>
   <div class="w-full">
-    <div class="border-default bg-default rounded-lg border shadow-sm">
+    <div
+      class="overflow-hidden rounded-md border bg-(--dms-bg-field) shadow-(--shadow-xs) transition-colors focus-within:outline-3"
+      :class="
+        invalid
+          ? FIELD_SURFACE_INVALID_CLASS
+          : 'border-accented focus-within:border-primary outline-(--dms-accent-tint-strong)'
+      "
+    >
       <div
-        class="border-default bg-default flex flex-wrap items-center gap-1 rounded-t-lg border-b p-2"
+        class="border-default flex flex-wrap items-center gap-0.5 border-b bg-(--dms-bg-muted) p-1.5"
       >
         <template
           v-for="(group, groupIndex) in toolbarButtons"
@@ -217,14 +268,18 @@ const toolbarButtons = computed(() => [
             :key="`toolbar-button-${groupIndex}-${buttonIndex}`"
             :title="button.label"
             :icon="button.icon"
-            :variant="button.isActive ? 'solid' : 'ghost'"
+            variant="ghost"
+            :class="{
+              'bg-accented text-highlighted ring-accented ring ring-inset':
+                button.isActive,
+            }"
             color="neutral"
             size="sm"
             @click="button.action"
           />
           <div
             v-if="groupIndex < toolbarButtons.length - 1"
-            class="bg-default mx-1 h-6 w-px"
+            class="bg-accented mx-1 h-5 w-px"
           />
         </template>
       </div>
@@ -255,26 +310,22 @@ const toolbarButtons = computed(() => [
 
       <DmsClientOnly>
         <EditorContent :editor="editor" />
+        <!-- Exactly the editor's empty box (140px): the lines fit inside its
+             padding, so the swap to the editor moves nothing below it. -->
         <template #fallback>
-          <div class="min-h-[500px] p-6">
+          <div class="min-h-[140px] px-3 py-2.5" aria-busy="true">
             <USkeleton class="mb-4 h-8 w-3/4" />
             <USkeleton class="mb-3 h-4 w-full" />
             <USkeleton class="mb-3 h-4 w-5/6" />
-            <USkeleton class="mb-3 h-4 w-4/5" />
+            <USkeleton class="h-4 w-4/5" />
           </div>
         </template>
       </DmsClientOnly>
     </div>
 
-    <div class="text-muted mt-2 text-right text-sm">
+    <div class="text-dimmed mt-1.5 text-right font-mono text-[11.5px]">
       <DmsClientOnly>
-        {{
-          t("dms.form.richtext.character_count", {
-            count:
-              (editor?.storage as Record<string, any>)?.characterCount?.characters() ||
-              editor?.getText().length,
-          })
-        }}
+        {{ t("dms.form.richtext.character_count", { count: characterCount }) }}
         <template #fallback>
           <span>
             {{ t("dms.form.richtext.character_count", { count: 0 }) }}

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useFormField } from "@nuxt/ui/composables/useFormField";
+import DmsSegmented from "../../segmented/Segmented.vue";
+
+type SegmentValue = string | number;
+
+interface SegmentedSelectItem {
+  label: string;
+  value: SegmentValue;
+  icon?: string;
+  disabled?: boolean;
+}
+
+interface SegmentedSelectProps {
+  id?: string;
+  items: SegmentedSelectItem[];
+  disabled?: boolean;
+}
+
+const props = defineProps<SegmentedSelectProps>();
+const model = defineModel<SegmentValue | null | undefined>();
+
+// The field state UFormField hands its control: the error ring and aria
+// attributes go on the track, a pick re-validates the field.
+const { color, ariaAttrs, emitFormChange } = useFormField();
+const isInvalid = computed(() => color.value === "error");
+
+function pick(value: SegmentValue | undefined): void {
+  model.value = value;
+  emitFormChange();
+}
+</script>
+
+<template>
+  <div
+    :id="props.id"
+    class="w-fit max-w-full rounded-[9px]"
+    :class="isInvalid && 'ring-error ring-1'"
+    v-bind="ariaAttrs"
+  >
+    <DmsSegmented
+      :model-value="model ?? undefined"
+      :items="props.items"
+      :disabled="props.disabled"
+      overflow="wrap"
+      @update:model-value="pick"
+    />
+  </div>
+</template>

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

@@ -8,6 +8,7 @@
   "
 >
 import { useForwardPropsEmits } from "reka-ui";
+import { FIELD_TRIGGER_ICON } from "../../../build/utils/fieldTrigger";
 import type {
   SelectProps,
   SelectEmits,
@@ -77,6 +78,7 @@ function handleUpdateModelValue(value: unknown) {
 <template>
   <USelect
     v-bind="forwarded as Record<string, unknown>"
+    :trailing-icon="props.trailingIcon ?? FIELD_TRIGGER_ICON"
     :model-value="props.modelValue as SelectProps<T, VK, M>['modelValue']"
     @update:model-value="handleUpdateModelValue as (value: unknown) => void"
   >

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

@@ -1,7 +1,19 @@
 <script setup lang="ts">
+import { useId } from "vue";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
-import { GRID_CONTEXT, type GridContext } from "./constants";
-import { GRID_DEFAULT_MIN_COLUMN_WIDTH, gridColumnsTemplate } from "./columns";
+import {
+  GRID_CONTEXT,
+  GRID_DECLARED_COLUMNS,
+  type GridContext,
+  type GridDeclaredColumns,
+} from "./constants";
+import {
+  GRID_DEFAULT_MIN_COLUMN_WIDTH,
+  gridColumnsTemplate,
+  gridResponsiveStyles,
+  gridScopeId,
+  GridResponsiveStyle,
+} from "./columns";
 
 interface GridProps extends DefaultComponentProps {
   gap?: string;
@@ -20,11 +32,21 @@ const props = withDefaults(defineProps<GridProps>(), {
  */
 const rowColumnCounts = ref(new Map<symbol, number>());
 
+// The widest row the layout declares for this grid, known from the first
+// render (only when the declaration is this grid's own, not an ancestor's).
+const declared = inject<GridDeclaredColumns | null>(
+  GRID_DECLARED_COLUMNS,
+  null,
+);
+const declaredColumns = computed(() =>
+  declared && declared.componentId === props.componentId
+    ? declared.columns.value
+    : 0,
+);
+
 const maxColumns = computed(() => {
-  const counts = [...rowColumnCounts.value.values()].filter(
-    (count) => count > 0,
-  );
-  return counts.length === 0 ? 1 : Math.max(...counts);
+  const counts = [...rowColumnCounts.value.values(), declaredColumns.value];
+  return Math.max(1, ...counts);
 });
 
 const gapRef = computed(() => props.gap);
@@ -42,20 +64,35 @@ provide<GridContext>(GRID_CONTEXT, {
   minColumnWidth: minColumnWidthRef,
 });
 
-const gridStyle = computed(() => ({
-  display: "grid",
-  gridTemplateColumns: gridColumnsTemplate(
+const columnsTemplate = computed(() =>
+  gridColumnsTemplate(maxColumns.value, props.gap, props.minColumnWidth),
+);
+
+// The grid is a size container: its responsive rules (spacers, clamped spans)
+// are container queries, identical in the server render and the browser.
+const scope = gridScopeId(props.componentId || useId());
+const responsiveStyles = computed(() =>
+  gridResponsiveStyles(
+    scope,
     maxColumns.value,
     props.gap,
     props.minColumnWidth,
   ),
+);
+
+const gridStyle = computed(() => ({
+  display: "grid",
+  gridTemplateColumns: columnsTemplate.value,
   gap: props.gap,
   width: "100%",
+  containerType: "inline-size",
+  containerName: scope,
 }));
 </script>
 
 <template>
-  <div :style="gridStyle">
+  <div :style="gridStyle" :data-dms-grid="scope">
     <slot />
+    <GridResponsiveStyle :css="responsiveStyles" />
   </div>
 </template>

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

@@ -1,7 +1,14 @@
 <script setup lang="ts">
+import { useId } from "vue";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 import { GRID_CONTEXT, type GridContext } from "./constants";
-import { GRID_DEFAULT_MIN_COLUMN_WIDTH, gridColumnsTemplate } from "./columns";
+import {
+  GRID_DEFAULT_MIN_COLUMN_WIDTH,
+  gridColumnsTemplate,
+  gridResponsiveStyles,
+  gridScopeId,
+  GridResponsiveStyle,
+} from "./columns";
 
 interface GridRowProps extends DefaultComponentProps {}
 
@@ -19,23 +26,43 @@ const columnCount = computed(() => props.childCount || 0);
 watchEffect(() => gridContext?.setRowColumnCount(rowId, columnCount.value));
 onUnmounted(() => gridContext?.dropRow(rowId));
 
-const rowStyle = computed(() => {
-  const gap = gridContext?.gap.value ?? DEFAULT_GAP;
-  return {
-    gridColumn: "1 / -1",
-    display: "grid",
-    gridTemplateColumns: gridColumnsTemplate(
-      gridContext?.maxColumns.value || 1,
-      gap,
-      gridContext?.minColumnWidth.value ?? GRID_DEFAULT_MIN_COLUMN_WIDTH,
-    ),
-    gap,
-  };
-});
+const gap = computed(() => gridContext?.gap.value ?? DEFAULT_GAP);
+const maxColumns = computed(() => gridContext?.maxColumns.value || 1);
+const minColumnWidth = computed(
+  () => gridContext?.minColumnWidth.value ?? GRID_DEFAULT_MIN_COLUMN_WIDTH,
+);
+const columnsTemplate = computed(() =>
+  gridColumnsTemplate(maxColumns.value, gap.value, minColumnWidth.value),
+);
+
+// The row is a size container: whether its spacers hold a cell and how far
+// its spans reach are container queries on its own width, identical in the
+// server render and the browser (see gridResponsiveStyles).
+const scope = gridScopeId(props.componentId || useId());
+const responsiveStyles = computed(() =>
+  gridResponsiveStyles(
+    scope,
+    maxColumns.value,
+    gap.value,
+    minColumnWidth.value,
+  ),
+);
+
+const rowStyle = computed(() => ({
+  gridColumn: "1 / -1",
+  display: "grid",
+  gridTemplateColumns: columnsTemplate.value,
+  gap: gap.value,
+  containerType: "inline-size",
+  containerName: scope,
+}));
 </script>
 
 <template>
-  <div :style="rowStyle" class="dms-grid-row">
+  <!-- min-w-0: a cell holds its track, so long content truncates instead of
+       widening the cell past a narrow screen. -->
+  <div :style="rowStyle" :data-dms-grid="scope" class="dms-grid-row *:min-w-0">
     <slot />
+    <GridResponsiveStyle :css="responsiveStyles" />
   </div>
 </template>

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

@@ -1,3 +1,5 @@
+import { h, type FunctionalComponent } from "vue";
+
 const SINGLE_COLUMN = 1;
 
 /** Track floor below which a column stops being usable, as a CSS length. */
@@ -27,3 +29,85 @@ export function gridColumnsTemplate(
   const columnShare = `(100% - ${columns - SINGLE_COLUMN} * ${gap}) / ${columns}`;
   return `repeat(auto-fill, minmax(min(100%, max(${minColumnWidth}, ${columnShare})), 1fr))`;
 }
+
+/** Custom property a `Grid` / `GridRow` hands its cells: the tracks left. */
+export const GRID_TRACKS_VAR = "--dms-grid-tracks";
+
+/**
+ * Narrowest width at which the shared template still lays out `columns`
+ * tracks: `columns` floors plus the gaps between them. Below it, `auto-fill`
+ * drops a track (see `gridColumnsTemplate`).
+ */
+function trackBreakpoint(
+  columns: number,
+  gap: string,
+  minColumnWidth: string,
+): string {
+  return `calc(${columns} * ${minColumnWidth} + ${columns - SINGLE_COLUMN} * ${gap})`;
+}
+
+/** A container name / attribute value built from any id. */
+export function gridScopeId(id: string): string {
+  return `dms-grid-${id.replace(/[^\w-]/g, "_")}`;
+}
+
+/**
+ * The responsive rules of one grid element, as a stylesheet: pure CSS, so the
+ * server render and the browser agree from the first paint, before any
+ * script has measured anything.
+ *
+ * The element is an inline-size container named `scope` and carries
+ * `data-dms-grid="<scope>"`. Its width alone decides how many tracks the
+ * template keeps, and so:
+ *
+ * - below the width of `maxColumns` tracks the grid has reflowed, and a
+ *   spacer stops holding a cell (it would only take a row of its own and a
+ *   second gap); while every column shows it keeps lining the next cells up;
+ * - at each narrower track count, the cells get that count as
+ *   `--dms-grid-tracks`, which a spanned cell clamps its span to
+ *   (`span min(3, var(--dms-grid-tracks, 3))`, see RecursiveComponent), so a
+ *   span never adds implicit columns past a phone screen.
+ *
+ * A single-column grid never reflows and gets no rules.
+ */
+export function gridResponsiveStyles(
+  scope: string,
+  maxColumns: number,
+  gap: string,
+  minColumnWidth: string,
+): string {
+  const columns = Math.max(maxColumns, SINGLE_COLUMN);
+  if (columns <= SINGLE_COLUMN) return "";
+  const cells = `[data-dms-grid="${scope}"] > `;
+  const below = (tracks: number) =>
+    `@container ${scope} (width < ${trackBreakpoint(tracks, gap, minColumnWidth)})`;
+  const hideSpacers = `${cells}.dms-spacer, ${cells}:has(> .dms-spacer) { display: none; }`;
+  const rules: string[] = [];
+  // Widest first: at a given width the narrowest matching rule comes last and
+  // wins. The first one (one track short of every column) also hides spacers.
+  for (
+    let tracks = columns - SINGLE_COLUMN;
+    tracks >= SINGLE_COLUMN;
+    tracks--
+  ) {
+    const clampSpans = `${cells}* { ${GRID_TRACKS_VAR}: ${tracks}; }`;
+    const body =
+      tracks === columns - SINGLE_COLUMN
+        ? `${hideSpacers} ${clampSpans}`
+        : clampSpans;
+    rules.push(`${below(tracks + SINGLE_COLUMN)} { ${body} }`);
+  }
+  return rules.join("\n");
+}
+
+/**
+ * Prints a grid's responsive stylesheet inside the grid element. A render
+ * function rather than template text: the server escapes interpolated text,
+ * and entities are not decoded inside a <style> element, so the CSS has to go
+ * out as raw markup. Always an element, even empty, so the server render and
+ * the hydration pass agree on the node.
+ */
+export const GridResponsiveStyle: FunctionalComponent<{ css: string }> = (
+  props,
+) => h("style", { innerHTML: props.css });
+GridResponsiveStyle.props = ["css"];

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

@@ -13,3 +13,19 @@ export interface GridContext {
   gap: ComputedRef<string>;
   minColumnWidth: ComputedRef<string>;
 }
+
+export const GRID_DECLARED_COLUMNS = Symbol("grid-declared-columns");
+
+/**
+ * The column count a layout declares for the component its renderer
+ * (RecursiveComponent) draws: the widest of its child rows, from the layout
+ * tree itself. A Grid takes it from the first render, so the server already
+ * lays every row out at the final count; the rows' own registration only
+ * comes as each row sets up, and an earlier, narrower row would otherwise
+ * render at the count known so far.
+ */
+export interface GridDeclaredColumns {
+  /** The component the count was declared for (its component id). */
+  componentId: string;
+  columns: ComputedRef<number>;
+}

package/frontend-vue/layers/dms-ui/app/components/icon-well/IconWell.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { tv } from "tailwind-variants";
+import { DMS_TONE_WELL } from "../../build/utils/tone";
+import type { Tone } from "../../types/tone";
+
+export type IconWellSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+/**
+ * The semantic tones plus `muted`, the quiet v2 .cs-rowicon (muted surface,
+ * default border) used for settings rows and read notifications.
+ */
+export type IconWellTone = Tone | "muted";
+
+interface IconWellProps {
+  /** Iconify name (`i-ph-…`). Omit it to fill the well with the default slot. */
+  icon?: string;
+  /**
+   * Tint, icon color and inset line. `neutral` is the raised v2 empty-state
+   * well, `muted` the quiet row icon.
+   */
+  tone?: IconWellTone;
+  /**
+   * Tile size: `2xs` 28px (compact banner), `xs` 30px (matrix row, recent
+   * module), `sm` 32px (status strip, list action), `md` 34px (settings row),
+   * `lg` 36px (v2 default: modal header, nav card, empty state), `xl` 40px
+   * (stat card, banner), `2xl` 44px (table empty state).
+   */
+  size?: IconWellSize;
+  /** Accessible label; without one the well is decorative (`aria-hidden`). */
+  label?: string;
+}
+
+interface IconWellSlots {
+  /** Replaces the icon (initials, a glyph, a spinner…). */
+  default?: () => unknown;
+}
+
+const props = withDefaults(defineProps<IconWellProps>(), {
+  icon: undefined,
+  tone: "primary",
+  size: "lg",
+  label: undefined,
+});
+defineSlots<IconWellSlots>();
+
+// v2 .icon-well: a tinted rounded tile with an inset 1px line of its tone.
+const theme = tv({
+  slots: {
+    root: "grid shrink-0 place-items-center ring-1 ring-inset",
+    icon: "shrink-0",
+  },
+  variants: {
+    size: {
+      "2xs": { root: "size-7 rounded-[8px]", icon: "size-[15px]" },
+      xs: { root: "size-[30px] rounded-[8px]", icon: "size-4" },
+      sm: { root: "size-8 rounded-[9px]", icon: "size-4" },
+      md: { root: "size-[34px] rounded-[9px]", icon: "size-[18px]" },
+      lg: { root: "size-9 rounded-[10px]", icon: "size-[19px]" },
+      xl: { root: "size-10 rounded-[10px]", icon: "size-[19px]" },
+      "2xl": { root: "size-11 rounded-[10px]", icon: "size-[22px]" },
+    },
+  },
+});
+
+const ui = computed(() => theme({ size: props.size }));
+const MUTED_WELL = "bg-(--dms-bg-muted) text-muted ring-(--ui-border)";
+
+const toneClass = computed(() =>
+  props.tone === "muted" ? MUTED_WELL : DMS_TONE_WELL[props.tone],
+);
+</script>
+
+<template>
+  <span
+    :class="[ui.root(), toneClass]"
+    :role="props.label ? 'img' : undefined"
+    :aria-label="props.label"
+    :aria-hidden="props.label ? undefined : 'true'"
+  >
+    <slot>
+      <UIcon v-if="props.icon" :name="props.icon" :class="ui.icon()" />
+    </slot>
+  </span>
+</template>