@antelopejs/dms 0.11.0 → 0.12.0

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

@@ -7,8 +7,6 @@ interface InputColorProps {
 
 const props = defineProps<InputColorProps>();
 
-// The field state UFormField hands its control: the swatch and the hex input
-// both show the error border, the input carries the aria attributes.
 const {
   color,
   highlight,
@@ -26,14 +24,14 @@ const FALLBACK_COLOR = "#000000";
 const hasColor = computed(
   () => !!modelValue.value && HEX_PATTERN.test(modelValue.value),
 );
-// The native picker opens on black; the swatch shows no colour until one is
-// picked, rather than a black one reading as a value.
+
 const swatchValue = computed(() =>
   hasColor.value ? modelValue.value! : FALLBACK_COLOR,
 );
 
 const handlePickerInput = (event: Event) => {
-  const target = event.target as HTMLInputElement;
+  const target = event.target;
+  if (!(target instanceof HTMLInputElement)) return;
   modelValue.value = target.value;
   emitFormChange();
 };

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

@@ -64,8 +64,7 @@ defineSlots<InputNumberSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
 const bounds = computed(() => ({ min: props.min, max: props.max }));
-// Unclamped, the input is not told the bounds (it would clamp to them on
-// blur): its steppers stop there instead, and the range is checked here.
+
 const inputProps = computed(() => {
   const {
     suffix: _suffix,
@@ -85,13 +84,8 @@ const isCompact = computed(() => isCompactNumberInput(props));
 const { processI18n } = useTranslation();
 const { locale } = useI18n();
 
-// v2 number fields keep the value left-aligned with a compact caret stepper.
 const DEFAULT_ORIENTATION = "vertical";
 
-// The unit sits inside the box, before the stepper, so a field with a unit
-// is as wide as the fields around it: the value's end padding makes room for
-// the stepper (2rem, `end-8` below), a gap and the unit, sized in
-// characters (`ch` slightly overestimates a short unit, never clips it).
 const SUFFIX_BASE_CLASS = "pe-[calc(var(--dms-field-suffix-width)+2.375rem)]";
 const suffixText = computed(() =>
   props.suffix ? processI18n(props.suffix) : "",
@@ -107,9 +101,6 @@ const fieldUi = computed(() =>
     : props.ui,
 );
 
-// A minus typed or pasted where no negative number is allowed is refused
-// by the field before it shows: it says why, rather than leaving an emptied
-// field to read as never filled.
 const { report } = useControlError();
 
 function onIncomingText(event: InputEvent): void {
@@ -129,12 +120,13 @@ watch(
   { immediate: true },
 );
 
-// What was typed since the field last settled, and the value it settled on.
 let typedText: string | null = null;
 let settledValue: number | null | undefined;
 
 function onTyped(event: Event): void {
-  typedText = (event.target as HTMLInputElement).value;
+  const input = event.target;
+  if (!(input instanceof HTMLInputElement)) return;
+  typedText = input.value;
   settledValue = undefined;
 }
 
@@ -142,9 +134,6 @@ function onSettledValue(value: number | null | undefined): void {
   settledValue = value;
 }
 
-// The number field keeps its own copy of the text typed, which it does not
-// always redraw when it settles on the value it already held (1020 typed
-// over 1,000): its `change` handler copies the kept value's text back.
 function redraw(input: HTMLInputElement): void {
   input.dispatchEvent(new Event("change"));
 }
@@ -154,14 +143,15 @@ async function settle(event: Event): Promise<void> {
   if (typedText === null) return;
   const text = typedText;
   typedText = null;
-  const input = event.target as HTMLInputElement;
+  const input = event.target;
+  if (!(input instanceof HTMLInputElement)) return;
   await nextTick();
   const typed = parseTypedNumber(text, props.locale ?? locale.value);
   const kept = settledValue === undefined ? props.modelValue : settledValue;
   const adjustment = numberAdjustment(
     typed,
     kept,
-    // Unclamped, only the step changes what was typed.
+
     props.clamp ? bounds.value : {},
   );
   if (!adjustment) return;

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

@@ -18,8 +18,7 @@ const emits = defineEmits<InputEmits>();
 defineSlots<InputSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
-// The value goes out through `updateValue`: the password input types its
-// model as possibly `undefined`, which UInput never emits (cleared is "").
+
 const passwordBindings = computed(() => {
   const { "onUpdate:modelValue": _onUpdate, ...rest } = forwarded.value;
   return rest;

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

@@ -21,7 +21,10 @@ const props = defineProps<InputPercentageProps>();
 const emits = defineEmits<InputNumberEmits>();
 defineSlots<InputNumberSlots>();
 
-const displayValue = computed({
+const displayValue = computed<
+  InputNumberProps["modelValue"],
+  InputNumberEmits["update:modelValue"][0]
+>({
   get: () => {
     const value = props.modelValue;
     return isNumber(value) ? value * PERCENTAGE_MULTIPLIER : value;
@@ -30,7 +33,7 @@ const displayValue = computed({
     if (isNumber(newValue)) {
       emits("update:modelValue", newValue / PERCENTAGE_MULTIPLIER);
     } else {
-      emits("update:modelValue", newValue as unknown as number);
+      emits("update:modelValue", newValue);
     }
   },
 });
@@ -50,9 +53,9 @@ const forwardedProps = computed(() => {
     ...bounds.value,
     modelValue: displayValue.value,
     step: props.step ?? 0.01,
-    // The step drives the steppers only: a stored 12.345 % stays as it is.
+
     stepSnapping: props.stepSnapping ?? false,
-    // The wrapper takes the caller's class, so the field fills it.
+
     class: "w-full",
     ui: { ...props.ui, base: ["pe-7", props.ui?.base] },
   };

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

@@ -26,15 +26,13 @@ const { confirm } = useConfirm();
 const { $authFetch } = useAuthFetch();
 const markFieldSaved = inject(FORM_FIELD_SAVED_KEY, null);
 
-// v2 .secret: the end of the value stays visible, so a reader can tell two
-// secrets apart without revealing either.
 const VISIBLE_TAIL = 4;
 const MASK_LENGTH = 22;
 const MASK = "•";
 
 const isRevealed = ref(false);
 const value = computed(() => model.value ?? "");
-// An empty secret is typed in plainly: there is nothing to hide yet.
+
 const isMasked = computed(() => !isRevealed.value && value.value !== "");
 const masked = computed(() => {
   const tail = value.value.slice(-VISIBLE_TAIL);
@@ -58,8 +56,7 @@ async function rotate(): Promise<void> {
         method: "POST",
       });
       model.value = response.value;
-      // The server stored the new secret already: it is not a change to
-      // save, and "Discard" must not bring the old one back.
+
       if (props.id) markFieldSaved?.(props.id, response.value);
     },
   });

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

@@ -21,12 +21,6 @@ interface InputTagsProps {
   disabled?: boolean;
 }
 
-/** A form error naming some of the items (`values`), as the form keeps it. */
-interface ItemsError {
-  name?: string;
-  values?: unknown;
-}
-
 const props = defineProps<InputTagsProps>();
 const model = defineModel<string[] | null | undefined>();
 const { t } = useI18n();
@@ -34,7 +28,6 @@ const { report } = useControlError();
 const formField = inject(formFieldInjectionKey, undefined);
 const formErrors = inject(formErrorsInjectionKey, undefined);
 
-// Commas, semicolons and whitespace end an item, typed or pasted.
 const DELIMITER = /[\s,;]+/;
 
 const tags = computed(() => model.value ?? []);
@@ -46,14 +39,12 @@ const suggestionsId = computed(() => `${props.id ?? "tags"}-suggestions`);
 const invalid = computed(
   () => new Set(invalidTags(tags.value, props.itemType)),
 );
-// Items a server refused (an address already a member): its error names them.
+
 const refused = computed(() => {
   const name = formField?.value?.name;
-  const error = (formErrors?.value as ItemsError[] | undefined)?.find(
-    (entry) => entry.name === name,
-  );
+  const error = formErrors?.value.find((entry) => entry.name === name);
   return new Set(
-    Array.isArray(error?.values)
+    error && "values" in error && Array.isArray(error.values)
       ? error.values.map((value) => String(value).toLowerCase())
       : [],
   );

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

@@ -39,8 +39,7 @@ const handleBlur = () => {
   isUserTyping.value = false;
   if (displayValue.value) {
     const parsed = readTimeSpan(displayValue.value);
-    // An unreadable duration is no duration: kept on screen for its author
-    // to fix, and refused by the form until then.
+
     report(parsed === undefined ? UNREADABLE_DURATION : undefined);
     if (parsed === undefined) {
       emits("update:modelValue", null);
@@ -54,7 +53,6 @@ const handleBlur = () => {
       emits("update:modelValue", parsed);
     }
   } else {
-    // A cleared time is no time, not midnight: a required one stays missing.
     report(undefined);
     emits("update:modelValue", null);
   }

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

@@ -24,7 +24,9 @@ interface KeyValueProps {
 }
 
 const props = defineProps<KeyValueProps>();
-const model = defineModel<Record<string, unknown> | null | undefined>();
+const model = defineModel<
+  Record<string, KeyValueRow["value"]> | null | undefined
+>();
 const { t } = useI18n();
 const { report } = useControlError();
 
@@ -49,10 +51,6 @@ const columns = computed(() => [
   },
 ]);
 
-// The rows are the editor's own: an object cannot hold a row still without
-// a name, nor two rows of one name while the user fixes it. The object the
-// field holds follows them, and they follow the object when it changes from
-// elsewhere (loaded, reset).
 const rows = ref<KeyValueRow[]>(keyValueRows(model.value, props.toggleable));
 let emitted = JSON.stringify(model.value ?? {});
 
@@ -80,6 +78,6 @@ function onRows(next: KeyValueRow[] | null | undefined): void {
     :columns="columns"
     :add-label="props.addLabel"
     :disabled="props.disabled"
-    @update:model-value="onRows($event as KeyValueRow[] | null | undefined)"
+    @update:model-value="onRows($event)"
   />
 </template>

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

@@ -87,15 +87,13 @@ const forwardedProps = computed(() => {
     filterBy: _________,
     ...rest
   } = props;
-  return rest as SelectMenuProps<T, "value", M>;
+  return rest;
 });
 const forwardedPropsEmits = useForwardPropsEmits(forwardedProps, emits);
 // The picks go through `handleUpdateModelValue` alone, which deselects a value
 // picked again: forwarded as well, the form got the pick it had undone.
 const forwarded = computed(() => {
-  const { "onUpdate:modelValue": _, ...rest } = forwardedPropsEmits.value as {
-    "onUpdate:modelValue"?: unknown;
-  };
+  const { "onUpdate:modelValue": _, ...rest } = forwardedPropsEmits.value;
   return rest as typeof forwardedPropsEmits.value;
 });
 
@@ -209,7 +207,7 @@ function mapData(item: Record<string, string>) {
 
   return {
     ...item,
-    label: item[labelValue] as string,
+    label: item[labelValue],
     value: item[valueValue],
     avatar: undefined,
     avatarSource: avatarValue ? item[avatarValue] : undefined,
@@ -323,10 +321,10 @@ function resolveItemAvatar(item: SelectMenuItem): SelectMenuItem {
     return item;
   }
 
-  const { avatarSource, ...rest } = item as AvatarSourceItem;
+  const { avatarSource, ...rest } = item;
   const avatar = buildAvatarProps(avatarSource, rest.label);
 
-  return { ...rest, ...(avatar ? { avatar } : {}) } as SelectMenuItem;
+  return { ...rest, ...(avatar ? { avatar } : {}) };
 }
 
 const displayItems = computed<SelectMenuItem[]>(() =>
@@ -337,6 +335,7 @@ watch(
   mergedItems,
   (items) => {
     for (const item of items) {
+      // SAFETY: Select-menu objects may carry an avatar source; string items yield undefined for this optional property.
       const source = (item as AvatarSourceItem).avatarSource;
       if (isImageRefValue(source)) {
         void resolveAvatarUrl(source.key);
@@ -509,13 +508,13 @@ function extractInsertedId(response: unknown): string | undefined {
     const r = response as Record<string, unknown>;
     if (typeof r.insertedId === "string") return r.insertedId;
     if (Array.isArray(r.insertedIds) && typeof r.insertedIds[0] === "string") {
-      return r.insertedIds[0] as string;
+      return r.insertedIds[0];
     }
     if (
       Array.isArray(r.generated_keys) &&
       typeof r.generated_keys[0] === "string"
     ) {
-      return r.generated_keys[0] as string;
+      return r.generated_keys[0];
     }
     if (typeof r.id === "string") return r.id;
     if (typeof r._id === "string") return r._id;
@@ -528,7 +527,7 @@ async function handleAddSuccess(response: unknown, formData: unknown) {
   if (newId && formData && typeof formData === "object") {
     const valueKey = props.keyMapping?.value || "value";
     const newItem = mapData({
-      ...(formData as Record<string, string>),
+      ...formData,
       [valueKey]: newId,
     });
     const exists = locallyAddedItems.value.some((item) =>
@@ -571,7 +570,7 @@ const addFormOptions = computed(() => {
     :trailing-icon="props.trailingIcon ?? FIELD_TRIGGER_ICON"
     :model-value="props.modelValue"
     :open="isMenuOpen"
-    :items="displayItems as T"
+    :items="displayItems"
     :loading="status === 'pending'"
     value-key="value"
     :portal="false"

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

@@ -7,6 +7,7 @@ import {
 } from "@nuxt/ui/composables/useFormField";
 import { resolveDmsComponent } from "../../../composables/resolveDmsComponent";
 import DmsRepeaterTable from "./RepeaterTable.vue";
+import type { DataTypeFormatter } from "#dms-core/app/composables/data-types/useDataType";
 
 /** A field of the rows: one column. */
 interface RepeaterColumn {
@@ -17,7 +18,7 @@ interface RepeaterColumn {
   required?: boolean;
 }
 
-type RepeaterRow = Record<string, unknown>;
+type RepeaterRow = NonNullable<Parameters<DataTypeFormatter>[3]>;
 
 interface RepeaterProps {
   id?: string;
@@ -36,8 +37,6 @@ const props = defineProps<RepeaterProps>();
 const model = defineModel<RepeaterRow[] | null | undefined>();
 const { t } = useI18n();
 
-// Taken here so the inputs of the rows do not each pick up the whole
-// field's error: each cell shows its own (`<field>.<row>.<column>`).
 const { name: fieldName, emitFormChange } = useFormField();
 const formErrors = inject(formErrorsInjectionKey, null);
 const formInputs = inject(formInputsInjectionKey, null);
@@ -46,8 +45,6 @@ const rows = computed<RepeaterRow[]>(() =>
   Array.isArray(model.value) ? model.value : [],
 );
 
-// Stable keys for the rows, kept in step with the list: a row keeps its
-// inputs (and their focus) while another is added, removed or moved.
 let nextKey = 0;
 const rowKeys = ref<number[]>([]);
 watch(
@@ -67,10 +64,10 @@ const canAdd = computed(
 const canRemove = computed(
   () => !props.disabled && rows.value.length > (props.min ?? 0),
 );
-// A box to tick takes its own width; any other field shares the row. The
-// drag handle and the remove button have their own narrow columns.
+
 const FLUID_COLUMN = "minmax(0,1fr)";
-const COLUMN_WIDTHS: Record<string, string> = { boolean: "20px" };
+type ColumnWidths = Record<NonNullable<RepeaterColumn["type"]>, string>;
+const COLUMN_WIDTHS: ColumnWidths = { boolean: "20px" };
 const HANDLE_COLUMN = "20px";
 const REMOVE_COLUMN = "28px";
 
@@ -81,14 +78,10 @@ function rowTemplate(cellColumns: string[]): string {
     .join(" ");
 }
 
-// Below 480px of the field's own width (a drawer, a phone), columns side by
-// side would each be a few characters wide: each row stacks its cells in one
-// column instead, a labelled field under another, as a card, and the column
-// heads hide.
 const STACKED_HIDDEN_CLASS = "@max-[30rem]:hidden";
 const STACKED_ROW_CLASSES = {
   row: "@max-[30rem]:grid-cols-(--dms-repeater-stacked-columns) @max-[30rem]:items-start @max-[30rem]:rounded-md @max-[30rem]:border @max-[30rem]:border-default @max-[30rem]:p-2.5",
-  // Side by side, each cell is a column of the row itself.
+
   cells: "contents @max-[30rem]:grid @max-[30rem]:min-w-0 @max-[30rem]:gap-2.5",
   cell: "grid min-w-0 gap-1",
   label: `${EYEBROW_CLASS} text-dimmed hidden truncate @max-[30rem]:block`,
@@ -112,7 +105,11 @@ function emitRows(next: RepeaterRow[], shouldValidate = true): void {
   if (shouldValidate) emitFormChange();
 }
 
-function setCell(index: number, column: string, value: unknown): void {
+function setCell(
+  index: number,
+  column: string,
+  value: RepeaterRow[string],
+): void {
   emitRows(
     rows.value.map((row, at) =>
       at === index ? { ...row, [column]: value } : row,
@@ -140,7 +137,8 @@ function moveRow(from: number, to: number): void {
   emitRows(next);
 }
 
-const MOVE_KEYS: Record<string, number> = { ArrowUp: -1, ArrowDown: 1 };
+type MoveKeys = Record<KeyboardEvent["key"], number>;
+const MOVE_KEYS: MoveKeys = { ArrowUp: -1, ArrowDown: 1 };
 
 function onHandleKeydown(event: KeyboardEvent, index: number): void {
   const step = MOVE_KEYS[event.key];
@@ -166,8 +164,6 @@ function isCellInvalid(index: number, column: string): boolean {
   return !!formErrors?.value.some((error) => error.name === name);
 }
 
-// Each cell is an input of the form, so an error a server raises on one
-// (`headers.1.value`) lands on it rather than being dropped.
 function cellNames(length: number): string[] {
   return Array.from({ length }, (_, index) =>
     props.columns.map((column) => cellName(index, column.id)),

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

@@ -30,15 +30,14 @@ import {
  */
 interface RepeaterTableProps {
   columns: RepeaterTableColumn[];
-  rows: Record<string, unknown>[];
+  rows: Parameters<typeof relationRowValue>[1][];
 }
 
 const props = defineProps<RepeaterTableProps>();
 const { renderValue } = useColumnValueRenderer();
 const { getDataType } = useDataTypes();
 const { readRelationRows } = useRelationRows();
-// Each column of each list reads its own ids: a key shared by two columns or
-// two lists naming the same route would hand one of them the other's rows.
+
 const instanceId = useId();
 
 /**
@@ -58,7 +57,7 @@ function useColumnRelationRows(columnId: string, source: RelationLabelSource) {
       const readIds = ids.value;
       return { readIds, rows: await readRelationRows(source, readIds) };
     },
-    // Names for the cells, not the page's data.
+
     { lazy: true, refreshOnPageRefresh: false, watch: [ids] },
   );
   return computed<RelationColumnRows>(() => ({
@@ -74,7 +73,6 @@ function useColumnRelationRows(columnId: string, source: RelationLabelSource) {
 
 const NO_LABELS: ReadonlySet<string> = new Set();
 
-// The columns are the field's own and do not change while it is shown.
 const relationRows = new Map(
   props.columns.flatMap((column) => {
     const source = relationLabelSource(column, getDataType(column.type ?? ""));
@@ -89,8 +87,6 @@ const relationRows = new Map(
   }),
 );
 
-// Two fields (a key and its value) fit any width as a table; more stack
-// below the container's `@md` width.
 const TABLE_FITS_COLUMNS = 2;
 const stacksWhenNarrow = computed(
   () => props.columns.length > TABLE_FITS_COLUMNS,
@@ -102,7 +98,10 @@ function isNumeric(column: RepeaterTableColumn): boolean {
   return NUMERIC_TYPE_IDS.has(column.type ?? "");
 }
 
-function cellValue(column: RepeaterTableColumn, row: Record<string, unknown>) {
+function cellValue(
+  column: RepeaterTableColumn,
+  row: RepeaterTableProps["rows"][number],
+) {
   const value = row[column.id];
   const relation = relationRows.get(column.id);
   if (!relation) return value;
@@ -113,8 +112,6 @@ function cellValue(column: RepeaterTableColumn, row: Record<string, unknown>) {
   );
 }
 
-// A cell renders a VNode tree; a functional wrapper keeps it in the
-// template's flow.
 interface CellProps {
   index: number;
   rowIndex: number;
@@ -129,7 +126,7 @@ const Cell = ({ index, rowIndex }: CellProps): VNodeChild => {
     "detail",
   );
 };
-// Declared, so `row-index` reaches it camelized, as a component's props do.
+
 Cell.props = ["index", "rowIndex"];
 </script>
 

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ChainedCommands } from "@tiptap/core";
-import { useEditor, EditorContent, type AnyExtension } from "@tiptap/vue-3";
+import { useEditor, EditorContent } from "@tiptap/vue-3";
 import TiptapStarterKit from "@tiptap/starter-kit";
 import TextAlign from "@tiptap/extension-text-align";
 import { useFormField } from "@nuxt/ui/composables/useFormField";
@@ -15,9 +15,6 @@ 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");
 
@@ -32,14 +29,14 @@ const editor = useEditor({
           class: "text-primary underline cursor-pointer",
         },
       },
-    }) as AnyExtension,
+    }),
     TextAlign.configure({
       types: ["heading", "paragraph"],
     }),
   ],
   editorProps: {
     attributes: {
-      ...(props.id ? { id: props.id } : {}),
+      ...(props.id ? { id: props.id } : undefined),
       class:
         "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",
     },
@@ -85,17 +82,10 @@ 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,
+    editor.value?.storage.characterCount?.characters() ||
+    editor.value?.getText().length,
 );
 
 const chain = (): ChainedCommands | undefined => editor.value?.chain().focus();

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

@@ -20,8 +20,6 @@ interface SegmentedSelectProps {
 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");
 

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

@@ -48,18 +48,14 @@ 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[]);
+  return Array.isArray(items[0]) ? items.flat() : items;
 });
 
 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 valueKey = props.valueKey ?? "value";
+  return flattenedItems.value.find((item) => item[valueKey] === value);
 });
 
 const colorVar = (color?: string) =>
@@ -77,10 +73,10 @@ function handleUpdateModelValue(value: unknown) {
 
 <template>
   <USelect
-    v-bind="forwarded as Record<string, unknown>"
+    v-bind="forwarded"
     :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"
+    :model-value="props.modelValue"
+    @update:model-value="handleUpdateModelValue"
   >
     <template
       v-if="
@@ -106,16 +102,16 @@ function handleUpdateModelValue(value: unknown) {
 
     <template #item-leading="{ item }">
       <UIcon
-        v-if="(item as ColoredSelectItem).icon"
-        :name="(item as ColoredSelectItem).icon!"
+        v-if="item.icon"
+        :name="item.icon!"
         class="size-4 shrink-0"
-        :style="colorVar((item as ColoredSelectItem).iconColor)"
+        :style="colorVar(item.iconColor)"
       />
     </template>
 
     <template #item-label="{ item }">
-      <span :style="colorVar((item as ColoredSelectItem).textColor)">
-        {{ (item as ColoredSelectItem).label }}
+      <span :style="colorVar(item.textColor)">
+        {{ item.label }}
       </span>
     </template>
   </USelect>