@antelopejs/dms 0.7.5 → 0.7.6

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

@@ -178,7 +178,11 @@ const hasMeta = computed(
         <div
           class="text-highlighted mt-2 text-[30px] leading-[1.1] font-[650] tracking-[-0.035em] tabular-nums"
         >
-          <USkeleton v-if="isFirstLoad" class="h-[33px] w-36" />
+          <USkeleton
+            :aria-label="t('dms.a11y.loading')"
+            v-if="isFirstLoad"
+            class="h-[33px] w-36"
+          />
           <span
             v-else
             class="transition-opacity"
@@ -193,8 +197,11 @@ const hasMeta = computed(
           class="mt-1.5 flex h-5 items-center gap-2"
           aria-hidden="true"
         >
-          <USkeleton class="h-4 w-14 rounded-full" />
-          <USkeleton class="h-3 w-20" />
+          <USkeleton
+            :aria-label="t('dms.a11y.loading')"
+            class="h-4 w-14 rounded-full"
+          />
+          <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-20" />
         </div>
         <div
           v-else-if="hasMeta"

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

@@ -3,6 +3,7 @@ import { nextTick, useTemplateRef, watch, type FunctionalComponent } from "vue";
 import { DialogDescription, DialogTitle } from "reka-ui";
 import DmsIconWell from "../icon-well/IconWell.vue";
 import DmsModalEscHint from "../../build/components/modal/ModalEscHint.vue";
+import DmsFormRequiredLegend from "../../build/components/form/FormRequiredLegend.vue";
 import {
   ConfirmActionError,
   type ConfirmBodyRender,
@@ -174,6 +175,12 @@ const headerIcon = computed(() =>
     : (props.icon ?? DEFAULT_ICONS[props.color] ?? FALLBACK_ICON),
 );
 
+// A field marked required says what its mark means, as a form does under
+// its fields.
+const hasRequiredFields = computed(() =>
+  props.fields.some((field) => field.required),
+);
+
 const hasBody = computed(
   () =>
     props.impact.length > 0 ||
@@ -398,6 +405,7 @@ function handleCancel() {
             </template>
           </template>
         </UFormField>
+        <DmsFormRequiredLegend v-if="hasRequiredFields" />
 
         <component
           :is="bodyComponent"

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

@@ -954,8 +954,9 @@ onUnmounted(async () => {
       </div>
 
       <!-- One bar for every form (see `saveBarState`): the v2 floating bar
-        on a page, the footer band of a card, a drawer or a modal. It holds
-        its place while hidden, so its showing up never moves anything. -->
+        on a page, the footer band of a card, a drawer or a modal. The
+        floating bar overlays the form and takes no space while hidden; the
+        band holds its place. Neither moves anything when it shows. -->
       <DmsSaveBar
         v-if="canSave && !isInstant && !loadFailure"
         :variant="usesSaveBar ? 'floating' : 'band'"
@@ -967,7 +968,7 @@ onUnmounted(async () => {
         :save-label="usesSaveBar ? props.submitLabel : submitButtonLabel"
         :cancellable="canCancel"
         :resettable="hasChangeableFields"
-        :class="usesSaveBar ? 'mx-3 mb-3' : surfaceClasses.foot"
+        :class="usesSaveBar ? 'mx-3' : surfaceClasses.foot"
         @discard="discardChanges"
         @cancel="cancelForm"
       />

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

@@ -402,7 +402,12 @@ function nodeClasses(node: CascaderNode, isHighlighted: boolean): string[] {
             class="w-52 space-y-2 p-2"
             aria-busy="true"
           >
-            <USkeleton v-for="i in 5" :key="i" class="h-6 w-full" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              v-for="i in 5"
+              :key="i"
+              class="h-6 w-full"
+            />
           </div>
 
           <div

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

@@ -40,7 +40,11 @@ const isVNodeValue = computed(() => isVNode(formattedValue.value));
 </script>
 
 <template>
-  <USkeleton v-if="loading" class="h-9 w-full" />
+  <USkeleton
+    :aria-label="t('dms.a11y.loading')"
+    v-if="loading"
+    class="h-9 w-full"
+  />
 
   <Component
     :is="dedicatedComponent"

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

@@ -4,16 +4,27 @@ import type {
   InputNumberEmits,
   InputNumberSlots,
 } from "@nuxt/ui/components/InputNumber.vue";
+import { computed } from "vue";
 import { useForwardPropsEmits } from "reka-ui";
 import { useControlError } from "../../../build/composables/form/useControlError";
 
 defineOptions({ inheritAttrs: false });
 
-const props = defineProps<InputNumberProps>();
+interface InputNumberFieldProps extends InputNumberProps {
+  /** Unit after the field ("days"): an i18n key with `$`, or a literal. */
+  suffix?: string;
+}
+
+const props = defineProps<InputNumberFieldProps>();
 const emits = defineEmits<InputNumberEmits>();
 defineSlots<InputNumberSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
+const inputProps = computed(() => {
+  const { suffix: _suffix, ...rest } = forwarded.value;
+  return rest;
+});
+const { processI18n } = useTranslation();
 
 // v2 number fields keep the value left-aligned with a compact caret stepper.
 const DEFAULT_ORIENTATION = "vertical";
@@ -33,12 +44,25 @@ function onIncomingText(event: InputEvent): void {
 </script>
 
 <template>
-  <div class="contents" @beforeinput.capture="onIncomingText">
+  <!-- The unit sits after the field rather than inside it, where the
+    stepper already takes the end of the box. -->
+  <div
+    :class="props.suffix ? 'flex items-center gap-2' : 'contents'"
+    @beforeinput.capture="onIncomingText"
+  >
     <UInputNumber
-      v-bind="{ ...forwarded, ...$attrs }"
+      v-bind="{ ...inputProps, ...$attrs }"
+      :class="props.suffix && 'min-w-0 flex-1'"
       :orientation="props.orientation ?? DEFAULT_ORIENTATION"
       :increment="{ color: 'neutral' }"
       :decrement="{ color: 'neutral' }"
     />
+    <span
+      v-if="props.suffix"
+      class="text-muted shrink-0 text-[13px]"
+      data-field-suffix
+    >
+      {{ processI18n(props.suffix) }}
+    </span>
   </div>
 </template>

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

@@ -4,15 +4,37 @@ import type {
   InputEmits,
   InputSlots,
 } from "@nuxt/ui/components/Input.vue";
+import { computed } from "vue";
 import { useForwardPropsEmits } from "reka-ui";
+import { characterCountText } from "../../../build/utils/characterCount";
 
-const props = defineProps<InputProps>();
+interface InputTextProps extends InputProps {
+  /** Longest value accepted; the counter reads against it. */
+  maxLength?: number;
+  /** Shows the characters typed at the end of the field ("4 / 60"). */
+  showCount?: boolean;
+}
+
+const props = defineProps<InputTextProps>();
 const emits = defineEmits<InputEmits>();
 defineSlots<InputSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
+const inputProps = computed(() => {
+  const { showCount: _showCount, ...rest } = forwarded.value;
+  return rest;
+});
+const countText = computed(() =>
+  characterCountText(props.modelValue, props.maxLength),
+);
 </script>
 
 <template>
-  <UInput v-bind="forwarded" />
+  <UInput v-bind="inputProps">
+    <template v-if="props.showCount" #trailing>
+      <span class="text-dimmed text-xs tabular-nums" data-character-count>
+        {{ countText }}
+      </span>
+    </template>
+  </UInput>
 </template>

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

@@ -314,10 +314,19 @@ const toolbarButtons = computed(() => [
              padding, so the swap to the editor moves nothing below it. -->
         <template #fallback>
           <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="h-4 w-4/5" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="mb-4 h-8 w-3/4"
+            />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="mb-3 h-4 w-full"
+            />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="mb-3 h-4 w-5/6"
+            />
+            <USkeleton :aria-label="t('dms.a11y.loading')" class="h-4 w-4/5" />
           </div>
         </template>
       </DmsClientOnly>

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

@@ -4,15 +4,40 @@ import type {
   TextareaEmits,
   TextareaSlots,
 } from "@nuxt/ui/components/Textarea.vue";
+import { computed } from "vue";
 import { useForwardPropsEmits } from "reka-ui";
+import { characterCountText } from "../../../build/utils/characterCount";
 
-const props = defineProps<TextareaProps>();
+interface TextareaFieldProps extends TextareaProps {
+  /** Longest value accepted; the counter reads against it. */
+  maxLength?: number;
+  /** Shows the characters typed under the field ("4 / 60"). */
+  showCount?: boolean;
+}
+
+const props = defineProps<TextareaFieldProps>();
 const emits = defineEmits<TextareaEmits>();
 defineSlots<TextareaSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
+const textareaProps = computed(() => {
+  const { showCount: _showCount, ...rest } = forwarded.value;
+  return rest;
+});
+const countText = computed(() =>
+  characterCountText(props.modelValue, props.maxLength),
+);
 </script>
 
 <template>
-  <UTextarea v-bind="forwarded" />
+  <div v-if="props.showCount" class="grid gap-1">
+    <UTextarea v-bind="textareaProps" class="w-full" />
+    <span
+      class="text-dimmed justify-self-end text-xs tabular-nums"
+      data-character-count
+    >
+      {{ countText }}
+    </span>
+  </div>
+  <UTextarea v-else v-bind="textareaProps" />
 </template>

package/frontend-vue/layers/dms-ui/app/components/key-value-list/KeyValueList.vue

@@ -82,7 +82,7 @@ const COLUMN_CLASSES: Record<number, string> = {
   3: "gap-x-8 sm:grid-cols-2 lg:grid-cols-3 [&>div:first-child]:border-t-0 sm:[&>div:nth-child(2)]:border-t-0 lg:[&>div:nth-child(3)]:border-t-0",
 };
 
-const { locale } = useI18n();
+const { locale, t } = useI18n();
 
 const columnClass = computed(
   () =>
@@ -185,10 +185,10 @@ function keyOf(item: KeyValueItem, index: number): string {
     <template v-if="showPlaceholders">
       <div v-for="index in props.skeletonCount" :key="index" :class="rowClass">
         <dt class="min-w-[120px] flex-none">
-          <USkeleton class="h-3 w-20" />
+          <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-20" />
         </dt>
         <dd class="ms-auto">
-          <USkeleton class="h-3 w-24" />
+          <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-24" />
         </dd>
       </div>
     </template>
@@ -202,7 +202,11 @@ function keyOf(item: KeyValueItem, index: number): string {
         <dd
           class="ms-auto flex min-w-0 flex-wrap items-center justify-end gap-x-1.5 gap-y-0.5 text-end"
         >
-          <USkeleton v-if="props.loading || item.loading" class="h-3 w-24" />
+          <USkeleton
+            :aria-label="t('dms.a11y.loading')"
+            v-if="props.loading || item.loading"
+            class="h-3 w-24"
+          />
           <slot
             v-else-if="slots.value"
             name="value"

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

@@ -196,7 +196,11 @@ const isStat = computed(() => props.variant === "stat");
       />
     </div>
     <!-- The value's placeholder takes its 33px line. -->
-    <USkeleton v-if="isFirstLoad" class="mt-1 h-[33px] w-32" />
+    <USkeleton
+      :aria-label="t('dms.a11y.loading')"
+      v-if="isFirstLoad"
+      class="mt-1 h-[33px] w-32"
+    />
     <div
       v-else-if="hasError"
       class="mt-auto flex items-center justify-between gap-2"
@@ -242,13 +246,17 @@ const isStat = computed(() => props.variant === "stat");
     >
       <div class="grid">
         <div v-if="showDelta" class="flex h-6 items-center">
-          <USkeleton class="h-3 w-[58px]" />
+          <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-[58px]" />
         </div>
         <div v-if="footnote" class="flex h-4 items-center">
-          <USkeleton class="h-2.5 w-28" />
+          <USkeleton :aria-label="t('dms.a11y.loading')" class="h-2.5 w-28" />
         </div>
       </div>
-      <USkeleton v-if="showSparkline" class="ml-auto h-[34px] w-24" />
+      <USkeleton
+        :aria-label="t('dms.a11y.loading')"
+        v-if="showSparkline"
+        class="ml-auto h-[34px] w-24"
+      />
     </div>
     <!-- The trend's line holds its place, as in the skeleton, while there is
          no change to show (no comparison period): no "0%" stand-in, and

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

@@ -143,12 +143,23 @@ const Wrapper = props.card ? resolveComponent("DmsCard") : "div";
         <span v-if="props.label" class="text-toned">
           {{ translate(props.label) }}
         </span>
-        <USkeleton v-else class="h-3 w-1/3" />
-        <USkeleton class="ms-auto h-3 w-12" />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          v-else
+          class="h-3 w-1/3"
+        />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="ms-auto h-3 w-12"
+        />
       </span>
-      <USkeleton class="w-full rounded-full" :class="skeletonTrackClass" />
+      <USkeleton
+        :aria-label="t('dms.a11y.loading')"
+        class="w-full rounded-full"
+        :class="skeletonTrackClass"
+      />
       <span v-if="skeletonHasLegend" class="flex h-4 items-center">
-        <USkeleton class="h-2.5 w-40" />
+        <USkeleton :aria-label="t('dms.a11y.loading')" class="h-2.5 w-40" />
       </span>
     </div>
     <div v-else-if="hasError" class="grid min-w-0 gap-1.5" role="alert">

package/frontend-vue/layers/dms-ui/app/components/save-bar/SaveBar.vue

@@ -9,9 +9,10 @@ import { trackFloatingSaveBar } from "../../build/composables/form/floatingSaveB
 import DmsUnsavedStatus from "../../build/components/form/UnsavedStatus.vue";
 
 /**
- * `floating`: the v2 save bar, a card that sticks to the bottom of the panel
- * while the form runs past it. `band`: the footer band of a form card, a
- * drawer or a modal (its surface classes come from the form).
+ * `floating`: the v2 save bar, a card floating over the bottom of the panel
+ * while the form runs past it, taking no space while hidden. `band`: the
+ * footer band of a form card, a drawer or a modal (its surface classes come
+ * from the form).
  */
 export type SaveBarVariant = "floating" | "band";
 
@@ -66,26 +67,50 @@ const SECONDARY_LABELS: Record<FormKind, string> = {
   action: "dms.button.reset",
 };
 
-// Its states have the same height, and hidden it keeps its place (one line,
-// whatever the changes): switching never moves the content around it.
+// Its states have the same height, so switching between them never moves the
+// content around it. The floating bar overlays the form: its root is a sticky
+// anchor at the form's end that takes no space while the bar hides, and the
+// bar's height plus its gaps while it shows, so the last field scrolls clear
+// of it and nothing above it moves. The band, a footer, keeps its place.
 const theme = tv({
   slots: {
-    root: "flex items-center transition-[opacity,translate,visibility] duration-200 ease-out",
+    root: "",
+    bar: "flex items-center",
     actions: "ms-auto flex shrink-0 items-center gap-2",
   },
   variants: {
     variant: {
       floating: {
-        root: "border-accented sticky bottom-4 z-5 mt-5 gap-3 rounded-[10px] border bg-(--ui-bg) py-2.5 ps-4 pe-3 text-[13px] shadow-lg",
+        root: "pointer-events-none sticky bottom-1 z-5 h-0 [--dms-save-bar-h:50px]",
+        bar: "border-accented pointer-events-auto absolute inset-x-0 bottom-3 h-(--dms-save-bar-h) gap-3 rounded-[10px] border bg-(--ui-bg) ps-4 pe-3 text-[13px] shadow-lg transition-[opacity,translate,visibility] duration-200 ease-out",
       },
       band: {
-        root: "gap-2",
+        root: "transition-[opacity,translate,visibility] duration-200 ease-out",
+        bar: "gap-2",
       },
     },
     hidden: {
-      true: { root: "invisible translate-y-2 opacity-0" },
+      true: "",
+      false: "",
     },
   },
+  compoundVariants: [
+    {
+      variant: "floating",
+      hidden: false,
+      class: { root: "h-[calc(var(--dms-save-bar-h)+2rem)]" },
+    },
+    {
+      variant: "floating",
+      hidden: true,
+      class: { bar: "invisible translate-y-2 opacity-0" },
+    },
+    {
+      variant: "band",
+      hidden: true,
+      class: { root: "invisible translate-y-2 opacity-0" },
+    },
+  ],
 });
 
 const BUTTONS = {
@@ -112,7 +137,7 @@ trackFloatingSaveBar(
   () => props.variant === "floating" && !state.value.isHidden,
 );
 
-// Empty while there is nothing to save: the hidden bar keeps its line.
+// Empty while there is nothing to save: the hidden bar keeps its one line.
 const statusText = computed(() => {
   if (!props.dirty) return "";
   const changed = props.changes.map((label) => processI18n(label)).join(", ");
@@ -133,39 +158,41 @@ const saveText = computed(() => {
     :inert="state.isHidden || undefined"
     :aria-hidden="state.isHidden || undefined"
   >
-    <DmsUnsavedStatus
-      v-if="state.showsStatus"
-      :text="statusText"
-      :is-band="props.variant === 'band'"
-    />
-    <div :class="ui.actions()">
-      <UButton
-        v-if="state.secondary === 'discard'"
-        :label="t(SECONDARY_LABELS[props.kind])"
-        color="neutral"
-        :variant="buttons.discardVariant"
-        :size="buttons.size"
-        :disabled="props.saving"
-        @click="emit('discard')"
-      />
-      <UButton
-        v-else-if="state.secondary === 'cancel'"
-        :label="t('dms.button.cancel')"
-        color="neutral"
-        variant="outline"
-        :size="buttons.size"
-        @click="emit('cancel')"
-      />
-      <UButton
-        v-if="state.showsSubmit"
-        :label="saveText"
-        :size="buttons.size"
-        :loading="props.saving"
-        :disabled="state.isSubmitHeld"
-        :type="props.form ? 'submit' : 'button'"
-        :form="props.form"
-        @click="props.form ? undefined : emit('save')"
+    <div :class="ui.bar()">
+      <DmsUnsavedStatus
+        v-if="state.showsStatus"
+        :text="statusText"
+        :is-band="props.variant === 'band'"
       />
+      <div :class="ui.actions()">
+        <UButton
+          v-if="state.secondary === 'discard'"
+          :label="t(SECONDARY_LABELS[props.kind])"
+          color="neutral"
+          :variant="buttons.discardVariant"
+          :size="buttons.size"
+          :disabled="props.saving"
+          @click="emit('discard')"
+        />
+        <UButton
+          v-else-if="state.secondary === 'cancel'"
+          :label="t('dms.button.cancel')"
+          color="neutral"
+          variant="outline"
+          :size="buttons.size"
+          @click="emit('cancel')"
+        />
+        <UButton
+          v-if="state.showsSubmit"
+          :label="saveText"
+          :size="buttons.size"
+          :loading="props.saving"
+          :disabled="state.isSubmitHeld"
+          :type="props.form ? 'submit' : 'button'"
+          :form="props.form"
+          @click="props.form ? undefined : emit('save')"
+        />
+      </div>
     </div>
   </div>
 </template>

package/frontend-vue/layers/dms-ui/app/components/tab/Tab.vue

@@ -21,6 +21,7 @@ const props = withDefaults(defineProps<TabProps>(), {
   stateKey: "tab",
   badgesUrl: undefined,
   realtimeTopic: undefined,
+  fit: false,
 });
 
 // The badges a module counts for a record's tabs, in one request, again when
@@ -72,10 +73,23 @@ const ROOT_CLASSES: Record<AxeOrientation, string> = {
   [AxeOrientation.vertical]: "max-sm:flex-col max-sm:items-stretch",
 };
 
+// A fitted pill list hugs its tabs: the triggers stop growing to share the
+// full width. Link tabs never grow, and a vertical list has its own width.
+const FIT_CLASSES: Record<TabVariant, { list: string; trigger: string }> = {
+  [TabVariant.pill]: { list: "w-fit max-w-full", trigger: "grow-0" },
+  [TabVariant.link]: { list: "", trigger: "" },
+};
+
 const panelClass = computed(() => PANEL_CLASSES[props.orientation]);
+const fitClasses = computed(() =>
+  props.fit && props.orientation === AxeOrientation.horizontal
+    ? FIT_CLASSES[props.variant]
+    : undefined,
+);
 const tabsUi = computed(() => ({
   root: ROOT_CLASSES[props.orientation],
-  list: LIST_CLASSES[props.orientation],
+  list: [LIST_CLASSES[props.orientation], fitClasses.value?.list],
+  trigger: fitClasses.value?.trigger,
   // The panel may shrink below its content's width (a wide table scrolls
   // inside it instead of pushing the page sideways).
   content: "min-w-0",

package/frontend-vue/layers/dms-ui/app/components/table-view/KanbanBoard.vue

@@ -451,6 +451,7 @@ const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) => {
             {{ col.label }}
           </span>
           <USkeleton
+            :aria-label="t('dms.a11y.loading')"
             v-if="isBoardLoading && !cells[col.value]"
             aria-hidden="true"
             class="ms-auto h-[16.5px] w-5 shrink-0 rounded-[5px]"
@@ -478,17 +479,26 @@ const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) => {
               class="border-default grid gap-2 rounded-lg border bg-(--dms-surface-card) px-3 pt-2.5 pb-[11px] shadow-xs"
             >
               <div class="-mb-0.5 flex min-h-5 items-center">
-                <USkeleton class="h-2.5 w-10" />
+                <USkeleton
+                  :aria-label="t('dms.a11y.loading')"
+                  class="h-2.5 w-10"
+                />
               </div>
               <div class="flex h-[17px] items-center">
-                <USkeleton class="h-3 w-3/4" />
+                <USkeleton
+                  :aria-label="t('dms.a11y.loading')"
+                  class="h-3 w-3/4"
+                />
               </div>
               <div
                 v-for="fieldColumn in cardColumns"
                 :key="fieldColumn.id"
                 class="-mt-0.5 flex h-[18px] items-center"
               >
-                <USkeleton class="h-2.5 w-1/2" />
+                <USkeleton
+                  :aria-label="t('dms.a11y.loading')"
+                  class="h-2.5 w-1/2"
+                />
               </div>
             </div>
           </div>