nuxt-ui-tools 1.0.0 → 1.0.1

package/dist/runtime/form/utils/state.js

@@ -149,28 +149,6 @@ export function buildFormOutput(schema, state, ctx, apiFactory) {
   }
   return buildFieldsOutput(getSchemaFields(schema), state, ctx, apiFactory, []);
 }
-export async function validateFormState(schema, state, ctx, apiFactory, mode = true) {
-  if (mode === false) {
-    return [];
-  }
-  const errors = [];
-  if (isSteppedSchema(schema)) {
-    for (const step of getSchemaSteps(schema)) {
-      errors.push(
-        ...await validateFields(
-          step.fields,
-          state,
-          ctx,
-          apiFactory,
-          step.root ? [step.root] : [],
-          mode
-        )
-      );
-    }
-    return errors;
-  }
-  return validateFields(getSchemaFields(schema), state, ctx, apiFactory, [], mode);
-}
 export function collectFormFieldPaths(schema) {
   if (isSteppedSchema(schema)) {
     return getSchemaSteps(schema).flatMap(
@@ -182,19 +160,6 @@ export function collectFormFieldPaths(schema) {
 export function collectFormFieldsPaths(fields, parentPath) {
   return collectFieldPaths(fields, parentPath);
 }
-export async function validateFormFields(params) {
-  if (params.mode === false) {
-    return [];
-  }
-  return await validateFields(
-    params.fields,
-    params.state,
-    params.ctx,
-    params.apiFactory,
-    params.parentPath,
-    params.mode ?? true
-  );
-}
 export function fieldPath(parentPath, field) {
   return [...parentPath, field.key];
 }
@@ -357,100 +322,6 @@ function buildFieldsOutput(fields, state, ctx, apiFactory, parentPath) {
   }
   return output;
 }
-async function validateFields(fields, state, ctx, apiFactory, parentPath, mode) {
-  const errors = [];
-  for (const field of fields) {
-    if (field.ignore === true) {
-      continue;
-    }
-    const fieldInstance = createFormFieldInstance(field);
-    if (fieldInstance.state.is("stateless")) {
-      continue;
-    }
-    if (isFlatPassthroughField(field)) {
-      errors.push(
-        ...await validateFields(getChildFields(field), state, ctx, apiFactory, parentPath, mode)
-      );
-      continue;
-    }
-    const path = fieldPath(parentPath, field);
-    const api = apiFactory(path, field);
-    const params = callbackParams({
-      api,
-      ctx,
-      field,
-      parentPath,
-      state
-    });
-    if (!shouldRenderField(field, params)) {
-      continue;
-    }
-    if (isObjectContainerField(field)) {
-      errors.push(
-        ...await validateFields(getChildFields(field), state, ctx, apiFactory, path, mode)
-      );
-      continue;
-    }
-    if (isPrimitiveArrayField(field)) {
-      errors.push(
-        ...await validatePrimitiveArrayItems(
-          field,
-          getPathValue(state, path),
-          state,
-          ctx,
-          apiFactory,
-          path,
-          mode
-        )
-      );
-    }
-    if (isArrayField(field)) {
-      const value2 = getPathValue(state, path);
-      if (Array.isArray(value2)) {
-        for (const index of value2.keys()) {
-          errors.push(
-            ...await validateFields(
-              getArrayItemFields(field, isRecord(value2[index]) ? value2[index] : {}),
-              state,
-              ctx,
-              apiFactory,
-              [...path, String(index)],
-              mode
-            )
-          );
-        }
-      }
-      continue;
-    }
-    if (fieldInstance.type.is("matrix")) {
-      for (const row of getMatrixRows(field)) {
-        errors.push(
-          ...await validateFields(
-            getChildFields(field),
-            state,
-            ctx,
-            apiFactory,
-            [...path, row],
-            mode
-          )
-        );
-      }
-      continue;
-    }
-    const value = getPathValue(state, path);
-    const required = mode !== "rules" && resolveRequired(field, params);
-    if (required && isEmptyValue(value)) {
-      errors.push({
-        message: resolveRequiredMessage(field),
-        path: path.join(".")
-      });
-    }
-    if (mode !== "required") {
-      errors.push(...await validateFieldRules(field, value, params, path));
-    }
-  }
-  return errors;
-}
 function collectFieldPaths(fields, parentPath) {
   return fields.flatMap((field) => {
     if (field.ignore === true) {
@@ -533,33 +404,6 @@ function buildPrimitiveArrayOutput(field, value, state, ctx, apiFactory, path) {
     return [applyOutputTransform(itemField, item, itemParams)];
   });
 }
-async function validatePrimitiveArrayItems(field, value, state, ctx, apiFactory, path, mode) {
-  const errors = [];
-  if (!Array.isArray(value)) {
-    return errors;
-  }
-  for (const [index, item] of value.entries()) {
-    const itemField = getPrimitiveArrayItemField(field, index);
-    if (!itemField) {
-      continue;
-    }
-    const itemPath = [...path, String(index)];
-    const itemParams = callbackParams({
-      api: apiFactory(itemPath, itemField),
-      ctx,
-      field: itemField,
-      parentPath: path,
-      state
-    });
-    if (mode !== "rules" && resolveRequired(itemField, itemParams) && isEmptyValue(item)) {
-      errors.push({ message: resolveRequiredMessage(itemField), path: itemPath.join(".") });
-    }
-    if (mode !== "required") {
-      errors.push(...await validateFieldRules(itemField, item, itemParams, itemPath));
-    }
-  }
-  return errors;
-}
 export function readStaticFieldProp(field, name) {
   const props = Object.getOwnPropertyDescriptor(field, "props")?.value;
   if (!isRecord(props)) {
@@ -689,49 +533,6 @@ export function resolveRequiredMessage(field, fallback = "This field is required
   }
   return fallback;
 }
-async function validateFieldRules(field, value, params, path) {
-  const validation = Object.getOwnPropertyDescriptor(field, "validation")?.value;
-  if (!isRecord(validation)) {
-    return [];
-  }
-  const rules = Object.getOwnPropertyDescriptor(validation, "rules")?.value;
-  if (!Array.isArray(rules)) {
-    return [];
-  }
-  const errors = [];
-  for (const rule of rules) {
-    if (!isRecord(rule)) {
-      continue;
-    }
-    const validate = Object.getOwnPropertyDescriptor(rule, "validate")?.value;
-    if (!isFunction(validate)) {
-      continue;
-    }
-    const result = await validate({
-      ...params,
-      api: params.api
-    });
-    if (result === true || result === null || isUndefined(result)) {
-      continue;
-    }
-    errors.push({
-      message: isString(result) ? result : resolveRuleMessage(rule, value),
-      path: path.join(".")
-    });
-  }
-  return errors;
-}
-function resolveRuleMessage(rule, _value) {
-  const message = Object.getOwnPropertyDescriptor(rule, "message")?.value;
-  if (isFunction(message)) {
-    return String(message());
-  }
-  if (isString(message) || isNumber(message)) {
-    return String(message);
-  }
-  const name = Object.getOwnPropertyDescriptor(rule, "name")?.value;
-  return isString(name) ? `Invalid value for ${name}.` : "Invalid value.";
-}
 export function isEmptyValue(value) {
   if (value === null || isUndefined(value)) {
     return true;

package/dist/runtime/i18n/locales/en.js

@@ -60,6 +60,7 @@ export default defineUiToolsLocale({
         },
         password: {
           hide: "Hide password",
+          requirements: "Password requirements",
           show: "Show password"
         },
         phone: {

package/dist/runtime/i18n/locales/fr.js

@@ -60,6 +60,7 @@ export default defineUiToolsLocale({
         },
         password: {
           hide: "Masquer le mot de passe",
+          requirements: "Exigences du mot de passe",
           show: "Afficher le mot de passe"
         },
         phone: {

package/dist/runtime/i18n/types.d.ts

@@ -314,6 +314,7 @@ export interface UiToolsFormMessages {
         password: {
             show: string;
             hide: string;
+            requirements: string;
         };
         options: {
             refresh: string;

package/dist/runtime/table/components/data-list/data-list-content.d.vue.ts

@@ -14,32 +14,32 @@ declare var __VLS_1: {}, __VLS_4: "loading" | "initial-loading", __VLS_5: {
 }, __VLS_7: {
     error: {};
     retry: typeof refresh;
-}, __VLS_22: {
+}, __VLS_16: {
     layout: import("../../types/index.js").TableLayout;
     refresh: typeof refresh;
     hasActiveQuery: boolean;
     clearQuery: typeof clearQuery;
-}, __VLS_24: {
+}, __VLS_18: {
     layout: import("../../types/index.js").TableLayout;
     rows: object[];
     loading: boolean;
     empty: boolean;
     error: unknown;
-}, __VLS_32: {
+}, __VLS_26: {
     rows: object[];
-}, __VLS_41: {}, __VLS_43: {
+}, __VLS_35: any, __VLS_38: {}, __VLS_40: {
     layout: string;
     refresh: typeof refresh;
     hasActiveQuery: boolean;
     clearQuery: typeof clearQuery;
-}, __VLS_45: {
+}, __VLS_42: {
     rows: object[];
-}, __VLS_54: {}, __VLS_56: {
+}, __VLS_51: {}, __VLS_53: {
     layout: string;
     refresh: typeof refresh;
     hasActiveQuery: boolean;
     clearQuery: typeof clearQuery;
-}, __VLS_58: {}, __VLS_60: {};
+}, __VLS_55: {}, __VLS_57: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_4>]?: (props: typeof __VLS_5) => any;
 } & {
@@ -47,25 +47,27 @@ type __VLS_Slots = {} & {
 } & {
     error?: (props: typeof __VLS_7) => any;
 } & {
-    empty?: (props: typeof __VLS_22) => any;
+    empty?: (props: typeof __VLS_16) => any;
 } & {
-    content?: (props: typeof __VLS_24) => any;
+    content?: (props: typeof __VLS_18) => any;
 } & {
-    table?: (props: typeof __VLS_32) => any;
+    table?: (props: typeof __VLS_26) => any;
 } & {
-    'empty-table'?: (props: typeof __VLS_41) => any;
+    error?: (props: typeof __VLS_35) => any;
 } & {
-    empty?: (props: typeof __VLS_43) => any;
+    'empty-table'?: (props: typeof __VLS_38) => any;
 } & {
-    grid?: (props: typeof __VLS_45) => any;
+    empty?: (props: typeof __VLS_40) => any;
 } & {
-    'empty-grid'?: (props: typeof __VLS_54) => any;
+    grid?: (props: typeof __VLS_42) => any;
 } & {
-    empty?: (props: typeof __VLS_56) => any;
+    'empty-grid'?: (props: typeof __VLS_51) => any;
 } & {
-    refreshing?: (props: typeof __VLS_58) => any;
+    empty?: (props: typeof __VLS_53) => any;
 } & {
-    after?: (props: typeof __VLS_60) => any;
+    refreshing?: (props: typeof __VLS_55) => any;
+} & {
+    after?: (props: typeof __VLS_57) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     transition: boolean;

package/dist/runtime/table/components/data-list/data-list-content.vue

@@ -1,17 +1,11 @@
 <script setup>
-import UButton from "@nuxt/ui/components/Button.vue";
-import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed, nextTick, ref, watch } from "vue";
-import { useUiToolsLocale } from "#ui-tools/i18n";
 import { isNumber } from "../../../shared/utils/predicate";
 import { useDataListUi } from "../../composables/use-data-list-ui";
 import { provideDataListViewport } from "../../composables/use-data-list-viewport";
 import { useTableInternals } from "../../composables/use-table-internals";
-import {
-  mergeDataListUiClass,
-  resolveDataListContentShellClass,
-  resolveDataListControlGeometry
-} from "../../utils";
+import { mergeDataListUiClass, resolveDataListContentShellClass } from "../../utils";
+import DataListErrorState from "./data-list-error-state.vue";
 import DataListGrid from "./data-list-grid.vue";
 import DataListTable from "./data-list-table.vue";
 const props = defineProps({
@@ -24,14 +18,13 @@ const props = defineProps({
 });
 const internals = useTableInternals();
 const dataListUi = useDataListUi();
-const { t } = useUiToolsLocale();
 const viewport = ref(null);
 provideDataListViewport(viewport);
 const rows = computed(() => internals.queryContent.data.value.rows);
 const loading = computed(
-  () => internals.queryContent.status.value.isBooting || internals.queryContent.status.value.isPending && rows.value.length === 0
+  () => internals.queryContent.status.value.isBooting || (internals.queryContent.status.value.isPending || internals.queryContent.status.value.isFetching) && rows.value.length === 0
 );
-const error = computed(() => rows.value.length ? null : internals.queryContent.error.value);
+const error = computed(() => internals.queryContent.error.value);
 const empty = computed(() => !loading.value && !error.value && rows.value.length === 0);
 const hasActiveQuery = computed(
   () => internals.filters.hasActiveSearch.value || internals.filters.hasActiveUiFilters.value
@@ -55,7 +48,6 @@ const rootUi = computed(() => dataListUi.ui.value.content?.ui);
 const resolvedSize = computed(
   () => props.size ?? dataListUi.ui.value.content?.size ?? dataListUi.controlSize.value
 );
-const geometry = computed(() => resolveDataListControlGeometry(resolvedSize.value));
 const shellClass = computed(
   () => resolveDataListContentShellClass({
     layout: internals.controls.tableLayout.value,
@@ -106,81 +98,13 @@ watch(
       :name="$slots['initial-loading'] ? 'initial-loading' : 'loading'"
       :layout="internals.controls.tableLayout.value"
     />
-    <slot v-else-if="error" name="error" :error="error" :retry="refresh">
-      <div
-        :class="
-  mergeDataListUiClass(
-    'grid min-h-64 place-items-center px-4 py-10 text-center',
-    rootUi?.error,
-    ui?.error
-  )
-"
-      >
-        <div
-          :class="
-  mergeDataListUiClass(
-    `flex max-w-md items-start text-left ${geometry.toolbarGap}`,
-    rootUi?.errorBody,
-    ui?.errorBody
-  )
-"
-        >
-          <span
-            :class="
-  mergeDataListUiClass(
-    'grid size-9 shrink-0 place-items-center rounded-md bg-error/10 text-error',
-    rootUi?.errorIcon,
-    ui?.errorIcon
-  )
-"
-          >
-            <UIcon name="i-lucide-cloud-alert" class="size-4" />
-          </span>
-          <div
-            :class="
-  mergeDataListUiClass(
-    `min-w-0 flex-1 ${geometry.text}`,
-    rootUi?.errorCopy,
-    ui?.errorCopy
-  )
-"
-          >
-            <div
-              :class="
-  mergeDataListUiClass(
-    'font-medium text-highlighted',
-    rootUi?.errorTitle,
-    ui?.errorTitle
-  )
-"
-            >
-              {{ t("table.states.gridError.title") }}
-            </div>
-            <p
-              :class="
-  mergeDataListUiClass(
-    'mt-0.5 leading-5 text-muted',
-    rootUi?.errorDescription,
-    ui?.errorDescription
-  )
-"
-            >
-              {{ t("table.states.gridError.description") }}
-            </p>
-            <UButton
-              color="neutral"
-              variant="soft"
-              :size="resolvedSize"
-              icon="i-lucide-refresh-cw"
-              class="mt-3"
-              :ui="{ base: mergeDataListUiClass(rootUi?.retry, ui?.retry) }"
-              @click="refresh"
-            >
-              {{ t("table.states.gridError.action") }}
-            </UButton>
-          </div>
-        </div>
-      </div>
+    <slot
+      v-else-if="error && internals.controls.tableLayout.value === 'grid'"
+      name="error"
+      :error="error"
+      :retry="refresh"
+    >
+      <DataListErrorState min-height="16rem" :size="resolvedSize" :ui="ui" @retry="refresh" />
     </slot>
     <slot
       v-else-if="empty && $slots.empty"
@@ -207,6 +131,9 @@ watch(
       >
         <slot v-if="internals.controls.tableLayout.value === 'table'" name="table" :rows="rows">
           <DataListTable :size="resolvedSize" :fill="fit !== 'content'" class="min-h-0 flex-1">
+            <template v-if="$slots.error" #error="scope">
+              <slot name="error" v-bind="scope" />
+            </template>
             <template #empty>
               <slot name="empty-table">
                 <slot

package/dist/runtime/table/components/data-list/data-list-content.vue.d.ts

@@ -14,32 +14,32 @@ declare var __VLS_1: {}, __VLS_4: "loading" | "initial-loading", __VLS_5: {
 }, __VLS_7: {
     error: {};
     retry: typeof refresh;
-}, __VLS_22: {
+}, __VLS_16: {
     layout: import("../../types/index.js").TableLayout;
     refresh: typeof refresh;
     hasActiveQuery: boolean;
     clearQuery: typeof clearQuery;
-}, __VLS_24: {
+}, __VLS_18: {
     layout: import("../../types/index.js").TableLayout;
     rows: object[];
     loading: boolean;
     empty: boolean;
     error: unknown;
-}, __VLS_32: {
+}, __VLS_26: {
     rows: object[];
-}, __VLS_41: {}, __VLS_43: {
+}, __VLS_35: any, __VLS_38: {}, __VLS_40: {
     layout: string;
     refresh: typeof refresh;
     hasActiveQuery: boolean;
     clearQuery: typeof clearQuery;
-}, __VLS_45: {
+}, __VLS_42: {
     rows: object[];
-}, __VLS_54: {}, __VLS_56: {
+}, __VLS_51: {}, __VLS_53: {
     layout: string;
     refresh: typeof refresh;
     hasActiveQuery: boolean;
     clearQuery: typeof clearQuery;
-}, __VLS_58: {}, __VLS_60: {};
+}, __VLS_55: {}, __VLS_57: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_4>]?: (props: typeof __VLS_5) => any;
 } & {
@@ -47,25 +47,27 @@ type __VLS_Slots = {} & {
 } & {
     error?: (props: typeof __VLS_7) => any;
 } & {
-    empty?: (props: typeof __VLS_22) => any;
+    empty?: (props: typeof __VLS_16) => any;
 } & {
-    content?: (props: typeof __VLS_24) => any;
+    content?: (props: typeof __VLS_18) => any;
 } & {
-    table?: (props: typeof __VLS_32) => any;
+    table?: (props: typeof __VLS_26) => any;
 } & {
-    'empty-table'?: (props: typeof __VLS_41) => any;
+    error?: (props: typeof __VLS_35) => any;
 } & {
-    empty?: (props: typeof __VLS_43) => any;
+    'empty-table'?: (props: typeof __VLS_38) => any;
 } & {
-    grid?: (props: typeof __VLS_45) => any;
+    empty?: (props: typeof __VLS_40) => any;
 } & {
-    'empty-grid'?: (props: typeof __VLS_54) => any;
+    grid?: (props: typeof __VLS_42) => any;
 } & {
-    empty?: (props: typeof __VLS_56) => any;
+    'empty-grid'?: (props: typeof __VLS_51) => any;
 } & {
-    refreshing?: (props: typeof __VLS_58) => any;
+    empty?: (props: typeof __VLS_53) => any;
 } & {
-    after?: (props: typeof __VLS_60) => any;
+    refreshing?: (props: typeof __VLS_55) => any;
+} & {
+    after?: (props: typeof __VLS_57) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     transition: boolean;

package/dist/runtime/table/components/data-list/data-list-default.d.vue.ts

@@ -9,10 +9,7 @@ declare var __VLS_1: {}, __VLS_18: {}, __VLS_52: {
     layout: import("../../types/index.js").TableLayout;
 }, __VLS_55: {
     layout: import("../../types/index.js").TableLayout;
-}, __VLS_58: {
-    error: {};
-    retry: () => void;
-}, __VLS_61: {
+}, __VLS_58: any, __VLS_61: {
     layout: string;
     refresh: () => void;
     hasActiveQuery: boolean;

package/dist/runtime/table/components/data-list/data-list-default.vue.d.ts

@@ -9,10 +9,7 @@ declare var __VLS_1: {}, __VLS_18: {}, __VLS_52: {
     layout: import("../../types/index.js").TableLayout;
 }, __VLS_55: {
     layout: import("../../types/index.js").TableLayout;
-}, __VLS_58: {
-    error: {};
-    retry: () => void;
-}, __VLS_61: {
+}, __VLS_58: any, __VLS_61: {
     layout: string;
     refresh: () => void;
     hasActiveQuery: boolean;

package/dist/runtime/table/components/data-list/data-list-error-state.d.vue.ts

@@ -0,0 +1,13 @@
+import type { DataListContentUi, DataListControlSize } from '../../types/index.js';
+type __VLS_Props = {
+    minHeight?: string;
+    size?: DataListControlSize;
+    ui?: DataListContentUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    retry: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRetry?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/data-list/data-list-error-state.vue

@@ -0,0 +1,91 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { mergeDataListUiClass, resolveDataListControlGeometry } from "../../utils";
+const props = defineProps({
+  minHeight: { type: String, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["retry"]);
+const dataListUi = useDataListUi();
+const { t } = useUiToolsLocale();
+const rootUi = computed(() => dataListUi.ui.value.content?.ui);
+const resolvedSize = computed(
+  () => props.size ?? dataListUi.ui.value.content?.size ?? dataListUi.controlSize.value
+);
+const geometry = computed(() => resolveDataListControlGeometry(resolvedSize.value));
+</script>
+
+<template>
+  <div
+    :class="
+  mergeDataListUiClass(
+    'grid place-items-center px-4 py-10 text-center',
+    rootUi?.error,
+    ui?.error
+  )
+"
+    :style="{ minHeight }"
+  >
+    <div
+      :class="
+  mergeDataListUiClass(
+    `flex max-w-md items-start text-left ${geometry.toolbarGap}`,
+    rootUi?.errorBody,
+    ui?.errorBody
+  )
+"
+    >
+      <span
+        :class="
+  mergeDataListUiClass(
+    'grid size-9 shrink-0 place-items-center rounded-md bg-error/10 text-error',
+    rootUi?.errorIcon,
+    ui?.errorIcon
+  )
+"
+      >
+        <UIcon name="i-lucide-cloud-alert" class="size-4" />
+      </span>
+      <div
+        :class="
+  mergeDataListUiClass(`min-w-0 flex-1 ${geometry.text}`, rootUi?.errorCopy, ui?.errorCopy)
+"
+      >
+        <div
+          :class="
+  mergeDataListUiClass('font-medium text-highlighted', rootUi?.errorTitle, ui?.errorTitle)
+"
+        >
+          {{ t("table.states.gridError.title") }}
+        </div>
+        <p
+          :class="
+  mergeDataListUiClass(
+    'mt-0.5 leading-5 text-muted',
+    rootUi?.errorDescription,
+    ui?.errorDescription
+  )
+"
+        >
+          {{ t("table.states.gridError.description") }}
+        </p>
+        <UButton
+          color="neutral"
+          variant="soft"
+          :size="resolvedSize"
+          icon="i-lucide-refresh-cw"
+          class="mt-3"
+          :ui="{ base: mergeDataListUiClass(rootUi?.retry, ui?.retry) }"
+          @click="emit('retry')"
+        >
+          {{ t("table.states.gridError.action") }}
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>