@antelopejs/dms 0.9.8 → 0.10.0

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

@@ -16,6 +16,10 @@ import {
   numberAdjustment,
   parseTypedNumber,
 } from "../../../build/utils/numberAdjustment";
+import {
+  type InputWidth,
+  isCompactNumberInput,
+} from "../../../build/utils/inputWidth";
 import type { InputNumberAdjustment } from "../../../types/input-number";
 
 defineOptions({ inheritAttrs: false });
@@ -28,12 +32,23 @@ interface InputNumberFieldProps extends InputNumberProps {
    * it as the field's error, instead of clamping it into range on blur.
    */
   clamp?: boolean;
+  /**
+   * `"compact"` sizes the field for a short number from `sm` up, `"full"`
+   * fills the row; left out, a `max` of a few digits makes it compact.
+   */
+  width?: InputWidth;
+  /**
+   * `true` puts a typed value on the nearest `step` when the field is left.
+   * Off by default: `step` only drives the steppers and the arrow keys, and
+   * a value is never rewritten (9,692 kept as 9,692 with steps of 100).
+   */
+  stepSnapping?: boolean;
 }
 
 interface InputNumberAdjustEmits {
   /**
    * The field kept another value than the one typed, on leaving it or on
-   * Enter: clamped to `min` / `max`, or put on its `step`.
+   * Enter: clamped to `min` / `max`, or put on its `step` (`stepSnapping`).
    */
   adjust: [adjustment: InputNumberAdjustment];
 }
@@ -42,6 +57,7 @@ type InputNumberFieldEmits = InputNumberEmits & InputNumberAdjustEmits;
 
 const props = withDefaults(defineProps<InputNumberFieldProps>(), {
   clamp: true,
+  stepSnapping: false,
 });
 const emits = defineEmits<InputNumberFieldEmits>();
 defineSlots<InputNumberSlots>();
@@ -54,6 +70,7 @@ const inputProps = computed(() => {
   const {
     suffix: _suffix,
     clamp: _clamp,
+    width: _width,
     onAdjust: _onAdjust,
     ...rest
   } = forwarded.value;
@@ -64,12 +81,32 @@ const inputProps = computed(() => {
     ...numberStepperState(props.modelValue, bounds.value),
   };
 });
+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) : "",
+);
+const suffixStyle = computed(() =>
+  suffixText.value
+    ? { "--dms-field-suffix-width": `${suffixText.value.length}ch` }
+    : undefined,
+);
+const fieldUi = computed(() =>
+  suffixText.value
+    ? { ...props.ui, base: [props.ui?.base, SUFFIX_BASE_CLASS] }
+    : 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.
@@ -134,10 +171,9 @@ async function settle(event: Event): Promise<void> {
 </script>
 
 <template>
-  <!-- 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'"
+    :class="suffixText ? 'relative flex items-center' : 'contents'"
+    :style="suffixStyle"
     @beforeinput.capture="onIncomingText"
     @input="onTyped"
     @keydown.enter="settle"
@@ -146,17 +182,18 @@ async function settle(event: Event): Promise<void> {
       v-bind="{ ...inputProps, ...$attrs }"
       @blur="settle"
       @update:model-value="onSettledValue"
-      :class="props.suffix && 'min-w-0 flex-1'"
+      :class="[suffixText && 'min-w-0 flex-1', isCompact && 'sm:max-w-44']"
+      :ui="fieldUi"
       :orientation="props.orientation ?? DEFAULT_ORIENTATION"
       :increment="{ color: 'neutral' }"
       :decrement="{ color: 'neutral' }"
     />
     <span
-      v-if="props.suffix"
-      class="text-muted shrink-0 text-[13px]"
+      v-if="suffixText"
+      class="text-muted pointer-events-none absolute inset-y-0 end-8 flex items-center text-[13px] whitespace-nowrap"
       data-field-suffix
     >
-      {{ processI18n(props.suffix) }}
+      {{ suffixText }}
     </span>
   </div>
 </template>

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

@@ -4,10 +4,20 @@ import type {
   InputNumberEmits,
   InputNumberSlots,
 } from "@nuxt/ui";
+import { computed } from "vue";
+import {
+  type InputWidth,
+  isCompactNumberInput,
+} from "../../../build/utils/inputWidth";
+
+interface InputPercentageProps extends InputNumberProps {
+  /** As on `InputNumber`; left out, the 0-100 bounds make it compact. */
+  width?: InputWidth;
+}
 
 const PERCENTAGE_MULTIPLIER = 100;
 
-const props = defineProps<InputNumberProps>();
+const props = defineProps<InputPercentageProps>();
 const emits = defineEmits<InputNumberEmits>();
 defineSlots<InputNumberSlots>();
 
@@ -25,13 +35,23 @@ const displayValue = computed({
   },
 });
 
+const bounds = computed(() => ({
+  min: props.min ?? 0,
+  max: props.max ?? PERCENTAGE_MULTIPLIER,
+}));
+const isCompact = computed(() =>
+  isCompactNumberInput({ width: props.width, ...bounds.value }),
+);
+
 const forwardedProps = computed(() => {
+  const { width: _width, ...rest } = props;
   return {
-    ...props,
+    ...rest,
+    ...bounds.value,
     modelValue: displayValue.value,
-    min: props.min ?? 0,
-    max: props.max ?? PERCENTAGE_MULTIPLIER,
     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] },
@@ -40,7 +60,10 @@ const forwardedProps = computed(() => {
 </script>
 
 <template>
-  <div class="relative inline-flex" :class="props.class">
+  <div
+    class="relative inline-flex"
+    :class="[props.class, isCompact && 'sm:max-w-44']"
+  >
     <UInputNumber
       v-bind="forwardedProps"
       @update:model-value="displayValue = $event"

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { pageRequestUrl } from "../../../build/composables/page/pageUrlValues";
 import { useConfirm } from "../../../composables/confirm/useConfirm";
+import { FORM_FIELD_SAVED_KEY } from "../../../composables/form/types/field-saved";
 import DmsCopyButton from "../../copy/CopyButton.vue";
 
 interface InputSecretProps {
@@ -23,6 +24,7 @@ const { t } = useI18n();
 const toast = useToast();
 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.
@@ -56,6 +58,9 @@ 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);
     },
   });
   if (confirmed) {

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

@@ -7,12 +7,23 @@ import type {
 import { computed } from "vue";
 import { useForwardPropsEmits } from "reka-ui";
 import { characterCountText } from "../../../build/utils/characterCount";
+import {
+  type InputWidth,
+  isCompactTextInput,
+} from "../../../build/utils/inputWidth";
 
 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;
+  /**
+   * `"compact"` sizes the field for a short text from `sm` up, `"full"`
+   * fills the row; left out, a `maxLength` of 16 or less makes it compact.
+   */
+  width?: InputWidth;
+  /** How the value reads shown, not edited (a URL's image): not the input's. */
+  preview?: "avatar" | "image";
 }
 
 const props = defineProps<InputTextProps>();
@@ -21,16 +32,22 @@ defineSlots<InputSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
 const inputProps = computed(() => {
-  const { showCount: _showCount, ...rest } = forwarded.value;
+  const {
+    showCount: _showCount,
+    width: _width,
+    preview: _preview,
+    ...rest
+  } = forwarded.value;
   return rest;
 });
+const isCompact = computed(() => isCompactTextInput(props));
 const countText = computed(() =>
   characterCountText(props.modelValue, props.maxLength),
 );
 </script>
 
 <template>
-  <UInput v-bind="inputProps">
+  <UInput v-bind="inputProps" :class="isCompact && 'sm:max-w-44'">
     <template v-if="props.showCount" #trailing>
       <span class="text-dimmed text-xs tabular-nums" data-character-count>
         {{ countText }}

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

@@ -10,6 +10,7 @@ interface InputTimeProps extends Omit<InputProps, "modelValue" | "type"> {
 
 const props = defineProps<InputTimeProps>();
 const { report } = useControlError();
+const { locale } = useI18n();
 const UNREADABLE_DURATION = "$dms.field_errors.invalid_duration";
 const emits = defineEmits<{
   "update:modelValue": [value: number | null];
@@ -21,7 +22,7 @@ const isUserTyping = ref(false);
 const updateDisplayValue = () => {
   if (isUserTyping.value) return;
   if (props.modelValue !== undefined && props.modelValue !== null) {
-    displayValue.value = formatTimeSpan(props.modelValue);
+    displayValue.value = formatDuration(props.modelValue, locale.value);
   } else {
     displayValue.value = "";
   }

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

@@ -16,11 +16,24 @@ import type { ArrayOrNested } from "@nuxt/ui/runtime/types/utils.js";
 
 import { refDebounced } from "@vueuse/core";
 import DmsForm from "../Form.vue";
+import { dmsOwnDrawer } from "../../../build/composables/containers/context";
 import { FIELD_TRIGGER_ICON } from "../../../build/utils/fieldTrigger";
+import { unlabeledRelationIds } from "../../../build/composables/data-types/relationValue";
+import { useRelationRows } from "../../../build/composables/data-types/relationRows";
 import type { FormProps } from "../../../composables/form/types";
+import { sameFormValue } from "../../../build/composables/unsaved-changes/formValue";
+import { FORM_ENTRY_CONTEXT_KEY } from "../../../build/composables/form/formEntryContext";
+import {
+  type RelationFilterBy,
+  relationFilterParams,
+  resolveRelationPick,
+} from "../../../build/composables/data-types/relationFilter";
 
 const SEARCH_DEBOUNCE_MS = 200;
-const ADD_NEW_VALUE = "__dms_relation_add_new__";
+// How long the menu's content gets to leave the page before the add form opens
+// anyway, and the beat its focus return takes once it has.
+const MENU_CLOSE_MAX_MS = 1000;
+const MENU_FOCUS_SETTLE_MS = 60;
 
 /** Title and description of the drawer a relation picker's "add" opens. */
 interface RelationAddFormTexts {
@@ -38,6 +51,11 @@ interface RelationProps extends SelectMenuProps<T, "value", M> {
     avatar?: string;
     disabled?: string;
   };
+  /**
+   * Lists only the related rows whose `field` equals the value of the form
+   * field `from`; ignored outside a form (a filter's picker).
+   */
+  filterBy?: RelationFilterBy;
   addForm?: { componentName: string; options?: FormProps };
   addPermissionIds?: string[];
   /**
@@ -63,33 +81,24 @@ const forwardedProps = computed(() => {
     addForm: ______,
     addPermissionIds: _______,
     addFormTexts: ________,
+    filterBy: _________,
     ...rest
   } = props;
   return rest as SelectMenuProps<T, "value", M>;
 });
-const forwarded = useForwardPropsEmits(forwardedProps, emits);
+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;
+  };
+  return rest as typeof forwardedPropsEmits.value;
+});
 
 type ModelValue = SelectMenuEmits<T, "value", M>["update:modelValue"][0];
 
-function isAddNewValue(value: unknown): boolean {
-  if (value === ADD_NEW_VALUE) return true;
-  if (Array.isArray(value)) return value.includes(ADD_NEW_VALUE);
-  return false;
-}
-
 function handleUpdateModelValue(value: ModelValue) {
-  if (isAddNewValue(value)) {
-    openAddDrawer();
-    if (Array.isArray(value)) {
-      emits(
-        "update:modelValue",
-        (value as unknown[]).filter((v) => v !== ADD_NEW_VALUE) as ModelValue,
-      );
-    } else {
-      emits("update:modelValue", props.modelValue as ModelValue);
-    }
-    return;
-  }
   const shouldDeselect =
     props.deselectable && !props.multiple && value === props.modelValue;
   emits(
@@ -103,7 +112,23 @@ const instanceId = useId();
 const searchTerm = ref("");
 const searchTermDebounced = refDebounced(searchTerm, SEARCH_DEBOUNCE_MS);
 
+// The form this picker fills, whose `filterBy.from` field narrows it.
+const formContext = inject(FORM_ENTRY_CONTEXT_KEY, null);
+const filterSourceValue = computed(() =>
+  props.filterBy && formContext
+    ? formContext.state.value[props.filterBy.from]
+    : undefined,
+);
+const filterParams = computed(() =>
+  relationFilterParams(props.filterBy, filterSourceValue.value),
+);
+// A string, so a recomputed but equal filter does not search again.
+const filterKey = computed(() => JSON.stringify(filterParams.value));
+// The source value the record loaded with, which its loaded pick matches.
+const loadedFilterSource = filterSourceValue.value;
+
 const { $authFetch } = useAuthFetch();
+const { readRelationRows } = useRelationRows();
 const toast = useToast();
 const { t } = useI18n();
 const { processI18n } = useTranslation();
@@ -118,6 +143,9 @@ const addContainerId = `relation-add-${useId()}`;
 // unwrapped item is an unbounded type for the checker. The list is always
 // replaced, never mutated in place.
 const locallyAddedItems: Ref<SelectMenuItem[]> = shallowRef([]);
+// The rows of the ids the value holds, read from the `select` route when the
+// form's data answers the ids rather than the joined rows.
+const valueItems: Ref<SelectMenuItem[]> = shallowRef([]);
 
 const canAdd = computed(
   () =>
@@ -197,6 +225,7 @@ async function fetchRelationItems(): Promise<RelationItems> {
   const data = await $authFetch<RelationResponse>(url, {
     params: {
       search: searchTermDebounced.value || undefined,
+      ...filterParams.value,
     },
     onRequestError: ({ error }: { error: Error }) => {
       toast.add({
@@ -234,7 +263,7 @@ const { data, status, execute } = await useDmsAsyncData(
   {
     lazy: true,
     immediate: false,
-    watch: [searchTermDebounced],
+    watch: [searchTermDebounced, filterKey],
     // Options to pick from, not the page's data.
     refreshOnPageRefresh: false,
   },
@@ -246,6 +275,8 @@ function isMappableObject(value: unknown): value is Record<string, string> {
 
 const initialItems = computed(() => {
   if (!props.initialValue) return [];
+  // The loaded row matched the loaded source value, not another one.
+  if (!sameFormValue(filterSourceValue.value, loadedFilterSource)) return [];
 
   const values = Array.isArray(props.initialValue)
     ? props.initialValue
@@ -254,42 +285,28 @@ const initialItems = computed(() => {
   return values.filter(isMappableObject).map(mapData);
 });
 
+function itemValue(item: SelectMenuItem): unknown {
+  return typeof item === "object" && item !== null && "value" in item
+    ? item.value
+    : item;
+}
+
 const mergedItems = computed<SelectMenuItem[]>(() => {
   const searchResults = data.value?.results || [];
   const initial = initialItems.value || [];
   const added = locallyAddedItems.value;
 
   const merged: SelectMenuItem[] = [...initial, ...added];
-  const existingValues = new Set(
-    merged.map((item) =>
-      typeof item === "object" && item !== null && "value" in item
-        ? item.value
-        : item,
-    ),
-  );
-
-  searchResults.forEach((item) => {
-    const itemValue =
-      typeof item === "object" && item !== null && "value" in item
-        ? item.value
-        : item;
+  const existingValues = new Set(merged.map(itemValue));
 
-    if (!existingValues.has(itemValue)) {
+  [...valueItems.value, ...searchResults].forEach((item) => {
+    const value = itemValue(item);
+    if (!existingValues.has(value)) {
+      existingValues.add(value);
       merged.push(item);
     }
   });
 
-  if (canAdd.value) {
-    if (merged.length > 0) {
-      merged.push({ type: "separator" });
-    }
-    merged.push({
-      label: t("dms.form.relation.add_new"),
-      value: ADD_NEW_VALUE,
-      icon: "i-ph-plus",
-    });
-  }
-
   return merged;
 });
 
@@ -326,34 +343,139 @@ watch(
   { immediate: true },
 );
 
+// The pick as the form holds it, read alongside the source field: a record
+// loading both values changes them in the same tick.
+const pickValue = computed(() =>
+  formContext && props.id
+    ? formContext.state.value[props.id]
+    : props.modelValue,
+);
+let pickSource = loadedFilterSource;
+
+// A pick made for another value of the source field is void once it changes.
+watch(
+  [filterSourceValue, pickValue],
+  ([source, pick], [prevSource, prevPick]) => {
+    if (!props.filterBy || !formContext) return;
+    const outcome = resolveRelationPick({
+      source,
+      pick,
+      previousSource: prevSource,
+      previousPick: prevPick,
+      pickSource,
+    });
+    pickSource = outcome.pickSource;
+    if (!outcome.shouldClear) return;
+    emits("update:modelValue", (props.multiple ? [] : undefined) as ModelValue);
+  },
+);
+
+const isMenuOpen = ref(false);
+
+const slots = useSlots();
+// `content-bottom` is filled below, after the add entry.
+const forwardedSlotNames = computed(() =>
+  Object.keys(slots).filter((name) => name !== "content-bottom"),
+);
+
+const labeledIds = computed(
+  () => new Set(mergedItems.value.map((item) => String(itemValue(item)))),
+);
+// Asked once each: an id the route does not answer (deleted, out of reach)
+// keeps showing as is rather than being asked again.
+const requestedIds = new Set<string>();
+
+async function loadValueItems(ids: string[]) {
+  for (const id of ids) requestedIds.add(id);
+  const rows = await readRelationRows(
+    { searchUrl: props.searchUrl, keyMapping: props.keyMapping },
+    ids,
+  );
+  if (!rows.length) return;
+  valueItems.value = [
+    ...valueItems.value,
+    ...rows.map((item) => mapData(item as Record<string, string>)),
+  ];
+}
+
+// The picker shows a value through its item: an id no item carries yet is
+// labelled (and given its avatar) from its row before the picker is opened.
+onMounted(() => {
+  watch(
+    () =>
+      unlabeledRelationIds(props.modelValue, labeledIds.value).filter(
+        (id) => !requestedIds.has(id),
+      ),
+    (ids) => {
+      if (ids.length > 0) void loadValueItems(ids);
+    },
+    { immediate: true },
+  );
+});
+
 function onOpen(isOpen: boolean) {
+  isMenuOpen.value = isOpen;
   if (isOpen && !data.value?.results?.length) {
     execute();
   }
 }
 
+const addEntryRef = useTemplateRef<HTMLElement>("addEntry");
+
+function waitForDetached(element: HTMLElement | null): Promise<void> {
+  const startedAt = performance.now();
+  return new Promise((resolve) => {
+    const check = () => {
+      if (
+        !element?.isConnected ||
+        performance.now() - startedAt > MENU_CLOSE_MAX_MS
+      ) {
+        resolve();
+        return;
+      }
+      requestAnimationFrame(check);
+    };
+    check();
+  });
+}
+
+/**
+ * Opens the add form once the menu has left the page: its content animates
+ * out, then hands the focus back to the field, and a drawer opened before
+ * that took the focus leaving it for a click outside and closed at once.
+ */
+async function openAddDrawerOnceClosed(): Promise<void> {
+  const menuContent = addEntryRef.value;
+  isMenuOpen.value = false;
+  await waitForDetached(menuContent);
+  await new Promise((resolve) => setTimeout(resolve, MENU_FOCUS_SETTLE_MS));
+  openAddDrawer();
+}
+
 function openAddDrawer() {
   const formOptions = addFormOptions.value;
   if (!formOptions) return;
-  const drawer = openDrawer({
-    title: props.addFormTexts?.displayName
-      ? processI18n(props.addFormTexts.displayName)
-      : t("dms.table.new_item"),
-    description: props.addFormTexts?.description
-      ? processI18n(props.addFormTexts.description)
-      : t("dms.table.new_item_description"),
-    direction: "bottom",
-    containerId: addContainerId,
-    component: DmsForm,
-    componentOptions: {
-      ...formOptions,
-      onSuccessCallback: (response: unknown, formData: unknown) => {
-        clearGuards(addContainerId);
-        drawer.close();
-        handleAddSuccess(response, formData);
+  const drawer = openDrawer(
+    dmsOwnDrawer({
+      title: props.addFormTexts?.displayName
+        ? processI18n(props.addFormTexts.displayName)
+        : t("dms.table.new_item"),
+      description: props.addFormTexts?.description
+        ? processI18n(props.addFormTexts.description)
+        : t("dms.table.new_item_description"),
+      direction: "bottom",
+      containerId: addContainerId,
+      component: DmsForm,
+      componentOptions: {
+        ...formOptions,
+        onSuccessCallback: (response: unknown, formData: unknown) => {
+          clearGuards(addContainerId);
+          drawer.close();
+          handleAddSuccess(response, formData);
+        },
       },
-    },
-  });
+    }),
+  );
 }
 
 function extractInsertedId(response: unknown): string | undefined {
@@ -428,20 +550,38 @@ const addFormOptions = computed(() => {
     v-model:search-term="searchTerm"
     :trailing-icon="props.trailingIcon ?? FIELD_TRIGGER_ICON"
     :model-value="props.modelValue"
+    :open="isMenuOpen"
     :items="displayItems as T"
     :loading="status === 'pending'"
     value-key="value"
     :portal="false"
     :ignore-filter="true"
     :ui="{ content: 'z-50' }"
+    :aria-label="t('dms.a11y.show_options')"
     @update:open="onOpen"
     @update:model-value="handleUpdateModelValue"
   >
-    <template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
+    <template v-for="name in forwardedSlotNames" :key="name" #[name]="slotData">
       <slot
         :name="name as keyof SelectMenuSlots<T, 'value', M>"
         v-bind="slotData ?? {}"
       />
     </template>
+    <!-- The add entry is no item: picked, it became the field's value. -->
+    <template v-if="canAdd || $slots['content-bottom']" #content-bottom>
+      <div v-if="canAdd" ref="addEntry" class="border-default border-t p-1">
+        <UButton
+          :label="t('dms.form.relation.add_new')"
+          icon="i-ph-plus"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          block
+          class="justify-start"
+          @click="openAddDrawerOnceClosed"
+        />
+      </div>
+      <slot name="content-bottom" />
+    </template>
   </USelectMenu>
 </template>