@groupteknology/vuno 0.4.0 → 0.6.1

package/dist/runtime/app/components/Field/FieldArray.vue

@@ -57,72 +57,72 @@ function move(index, offset) {
 </script>
 
 <template>
-    <div :class="ui.root">
-        <div
-            v-for="(item, index) in items"
-            :key="index"
-            :class="ui.item"
-        >
-            <div :class="ui.itemHeader">
-                <span :class="ui.itemLabel">{{ index + 1 }}</span>
-
-                <div :class="ui.itemActions">
-                    <UButton
-                        v-if="props.sortable && index > 0"
-                        :aria-label="messages.fileMoveUp"
-                        color="neutral"
-                        :icon="icons.fileMoveUp"
-                        size="xs"
-                        variant="ghost"
-                        @click="move(index, -1)"
-                    />
-                    <UButton
-                        v-if="props.sortable && index < items.length - 1"
-                        :aria-label="messages.fileMoveDown"
-                        color="neutral"
-                        :icon="icons.fileMoveDown"
-                        size="xs"
-                        variant="ghost"
-                        @click="move(index, 1)"
-                    />
-                    <UButton
-                        :aria-label="messages.removeItem"
-                        color="error"
-                        :disabled="!canRemove"
-                        :icon="icons.removeItem"
-                        size="xs"
-                        variant="ghost"
-                        @click="remove(index)"
-                    />
-                </div>
-            </div>
-
-            <div :class="ui.itemFields">
-                <div
-                    v-for="field in props.fields"
-                    :key="`${index}-${field.name}`"
-                    :class="getColumnSpanClass(field.columns)"
-                >
-                    <FormField :field="fieldAt(field, index)" />
-                </div>
-            </div>
-        </div>
-
-        <div
-            v-if="items.length === 0"
-            :class="ui.empty"
-        >
-            {{ messages.emptyArray }}
-        </div>
-
-        <UButton
-            class="self-start"
-            color="neutral"
-            :disabled="!canAdd"
-            :icon="icons.addItem"
-            :label="props.addLabel ?? messages.addItem"
-            variant="outline"
-            @click="add"
-        />
-    </div>
+    <div :class="ui.root">
+        <div
+            v-for="(item, index) in items"
+            :key="index"
+            :class="ui.item"
+        >
+            <div :class="ui.itemHeader">
+                <span :class="ui.itemLabel">{{ index + 1 }}</span>
+
+                <div :class="ui.itemActions">
+                    <UButton
+                        v-if="props.sortable && index > 0"
+                        :aria-label="messages.fileMoveUp"
+                        color="neutral"
+                        :icon="icons.fileMoveUp"
+                        size="xs"
+                        variant="ghost"
+                        @click="move(index, -1)"
+                    />
+                    <UButton
+                        v-if="props.sortable && index < items.length - 1"
+                        :aria-label="messages.fileMoveDown"
+                        color="neutral"
+                        :icon="icons.fileMoveDown"
+                        size="xs"
+                        variant="ghost"
+                        @click="move(index, 1)"
+                    />
+                    <UButton
+                        :aria-label="messages.removeItem"
+                        color="error"
+                        :disabled="!canRemove"
+                        :icon="icons.removeItem"
+                        size="xs"
+                        variant="ghost"
+                        @click="remove(index)"
+                    />
+                </div>
+            </div>
+
+            <div :class="ui.itemFields">
+                <div
+                    v-for="field in props.fields"
+                    :key="`${index}-${field.name}`"
+                    :class="getColumnSpanClass(field.columns)"
+                >
+                    <FormField :field="fieldAt(field, index)" />
+                </div>
+            </div>
+        </div>
+
+        <div
+            v-if="items.length === 0"
+            :class="ui.empty"
+        >
+            {{ messages.emptyArray }}
+        </div>
+
+        <UButton
+            class="self-start"
+            color="neutral"
+            :disabled="!canAdd"
+            :icon="icons.addItem"
+            :label="props.addLabel ?? messages.addItem"
+            variant="outline"
+            @click="add"
+        />
+    </div>
 </template>

package/dist/runtime/app/components/Field/FieldColor.vue

@@ -18,40 +18,40 @@ const ui = useVunoTheme("fieldColor", () => props.ui);
 </script>
 
 <template>
-    <div :class="ui.root">
-        <!-- El selector nativo y el texto comparten valor: se puede pegar un
-             código de la guía de marca sin pelearse con la rueda de color. -->
-        <UPopover>
-            <UButton
-                :aria-label="props.label"
-                color="neutral"
-                :disabled="props.disabled"
-                :size="props.size"
-                :ui="{ leadingIcon: 'rounded-full' }"
-                variant="outline"
-            >
-                <span
-                    :class="ui.swatch"
-                    :style="{ backgroundColor: value || 'transparent' }"
-                />
-            </UButton>
-
-            <template #content>
-                <UColorPicker
-                    v-model="value"
-                    class="p-2"
-                />
-            </template>
-        </UPopover>
-
-        <UInput
-            v-model="value"
-            class="font-mono"
-            :disabled="props.disabled"
-            :name="props.name"
-            :placeholder="props.placeholder ?? '#000000'"
-            :size="props.size"
-            :ui="{ root: 'w-full' }"
-        />
-    </div>
+    <div :class="ui.root">
+        <!-- El selector nativo y el texto comparten valor: se puede pegar un
+             código de la guía de marca sin pelearse con la rueda de color. -->
+        <UPopover>
+            <UButton
+                :aria-label="props.label"
+                color="neutral"
+                :disabled="props.disabled"
+                :size="props.size"
+                :ui="{ leadingIcon: 'rounded-full' }"
+                variant="outline"
+            >
+                <span
+                    :class="ui.swatch"
+                    :style="{ backgroundColor: value || 'transparent' }"
+                />
+            </UButton>
+
+            <template #content>
+                <UColorPicker
+                    v-model="value"
+                    class="p-2"
+                />
+            </template>
+        </UPopover>
+
+        <UInput
+            v-model="value"
+            class="font-mono"
+            :disabled="props.disabled"
+            :name="props.name"
+            :placeholder="props.placeholder ?? '#000000'"
+            :size="props.size"
+            :ui="{ root: 'w-full' }"
+        />
+    </div>
 </template>

package/dist/runtime/app/components/Form/Form.vue

@@ -86,53 +86,65 @@ defineExpose({ dirty, errors: errorNames, isDirty, reset, resetField, submit: ()
 </script>
 
 <template>
-    <UForm
-        :id="formId"
-        ref="form"
-        :schema="props.schema"
-        :state="state"
-        :ui="{ base: ui.base }"
-        @submit="onSubmit"
-    >
-        <UTabs
-            v-if="isTabs"
-            :defaultValue="tabItems[0]?.value"
-            :items="tabItems"
-            :size="size"
-            :ui="{ root: ui.tabs, content: ui.tabsContent }"
-            :unmountOnHide="false"
-            variant="link"
-        >
-            <template #content="{ item }">
-                <FormSection
-                    plain
-                    :section="item.section"
-                />
-            </template>
-        </UTabs>
-
-        <div
-            v-else
-            :class="ui.sections"
-        >
-            <div
-                v-for="(section, index) in props.definition.sections"
-                :key="`${section.id}-${index}`"
-                :class="getColumnSpanClass(section.columns)"
-            >
-                <FormSection :section="section" />
-            </div>
-        </div>
-
-        <div
-            v-if="slots.footer"
-            :class="ui.footer"
-        >
-            <slot
-                :dirty="dirty"
-                name="footer"
-                :reset="reset"
-            />
-        </div>
-    </UForm>
+    <!--
+        `novalidate` apaga la validación nativa del navegador, no el `required`.
+        Sin él conviven dos validaciones: la del navegador corta el envío antes
+        de que el esquema llegue a ejecutarse, y avisa con un globo suyo, en el
+        idioma del navegador y sin pasar por el tema. Los mensajes del esquema
+        no llegaban a verse en los campos obligatorios.
+
+        El atributo `required` se queda en los inputs, que es lo que anuncia el
+        campo como obligatorio a un lector de pantalla y lo que permite
+        estilarlo; lo único que se apaga es la interfaz nativa.
+    -->
+    <UForm
+        :id="formId"
+        ref="form"
+        novalidate
+        :schema="props.schema"
+        :state="state"
+        :ui="{ base: ui.base }"
+        @submit="onSubmit"
+    >
+        <UTabs
+            v-if="isTabs"
+            :defaultValue="tabItems[0]?.value"
+            :items="tabItems"
+            :size="size"
+            :ui="{ root: ui.tabs, content: ui.tabsContent }"
+            :unmountOnHide="false"
+            variant="link"
+        >
+            <template #content="{ item }">
+                <FormSection
+                    plain
+                    :section="item.section"
+                />
+            </template>
+        </UTabs>
+
+        <div
+            v-else
+            :class="ui.sections"
+        >
+            <div
+                v-for="(section, index) in props.definition.sections"
+                :key="`${section.id}-${index}`"
+                :class="getColumnSpanClass(section.columns)"
+            >
+                <FormSection :section="section" />
+            </div>
+        </div>
+
+        <div
+            v-if="slots.footer"
+            :class="ui.footer"
+        >
+            <slot
+                :dirty="dirty"
+                name="footer"
+                :reset="reset"
+            />
+        </div>
+    </UForm>
 </template>

package/dist/runtime/app/components/Form/FormModal.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, useId, useTemplateRef } from "vue";
 import { useVunoMessages, useVunoTheme } from "#vuno/composables/useVunoTheme";
+import AppModal from "#vuno/components/App/AppModal.vue";
 import Form from "./Form.vue";
 const props = defineProps({
   closeOnSubmit: { type: Boolean, required: false },
@@ -18,7 +19,7 @@ const state = defineModel("state", { type: null, ...{ required: true } });
 defineSlots();
 const messages = useVunoMessages();
 const ui = useVunoTheme("formModal", () => props.ui);
-const modalUi = computed(() => ({ body: ui.value.body, content: ui.value.content, footer: ui.value.footer }));
+const modalUi = computed(() => ({ body: ui.value.body, content: ui.value.content, footer: ui.value.footer, root: ui.value.root }));
 const formId = useId();
 const form = useTemplateRef("form");
 function close() {
@@ -33,27 +34,34 @@ function onSubmit(event) {
 </script>
 
 <template>
-    <UModal
+    <!--
+        Sobre `AppModal`: un `<dialog>` nativo, no el de Nuxt UI. El navegador lo
+        pone en su capa superior, que atrapa el foco, lo devuelve al cerrar y
+        apila los diálogos por orden de apertura.
+
+        Importa que sean todos del mismo sistema: la capa superior queda por
+        encima de cualquier z-index, así que un formulario posicionado con
+        z-index abierto sobre un diálogo nativo se pintaría detrás de él, en el
+        DOM y sin verse.
+    -->
+    <AppModal
         v-model:open="open"
         :description="props.description"
         :dismissible="!props.loading"
-        scrollable
         :title="props.title"
         :ui="modalUi"
     >
         <slot name="trigger" />
 
-        <template #body>
-            <Form
-                :id="formId"
-                ref="form"
-                v-model:state="state"
-                :definition="props.definition"
-                :schema="props.schema"
-                :ui="props.formUi"
-                @submit="onSubmit"
-            />
-        </template>
+        <Form
+            :id="formId"
+            ref="form"
+            v-model:state="state"
+            :definition="props.definition"
+            :schema="props.schema"
+            :ui="props.formUi"
+            @submit="onSubmit"
+        />
 
         <template #footer>
             <slot
@@ -79,5 +87,5 @@ function onSubmit(event) {
                 />
             </slot>
         </template>
-    </UModal>
+    </AppModal>
 </template>

package/dist/runtime/app/components/Form/FormSection.vue

@@ -13,31 +13,31 @@ const showHeader = computed(() => props.plain ? Boolean(props.section.descriptio
 </script>
 
 <template>
-    <div :class="root">
-        <div
-            v-if="showHeader"
-            :class="ui.header"
-        >
-            <p
-                v-if="props.section.title && !props.plain"
-                :class="ui.title"
-            >
-                {{ props.section.title }}
-            </p>
-            <p
-                v-if="props.section.description"
-                :class="ui.description"
-            >
-                {{ props.section.description }}
-            </p>
-        </div>
-
-        <div
-            v-for="(field, index) in props.section.fields"
-            :key="`${field.name}-${index}`"
-            :class="getColumnSpanClass(field.columns)"
-        >
-            <FormField :field="field" />
-        </div>
-    </div>
+    <div :class="root">
+        <div
+            v-if="showHeader"
+            :class="ui.header"
+        >
+            <p
+                v-if="props.section.title && !props.plain"
+                :class="ui.title"
+            >
+                {{ props.section.title }}
+            </p>
+            <p
+                v-if="props.section.description"
+                :class="ui.description"
+            >
+                {{ props.section.description }}
+            </p>
+        </div>
+
+        <div
+            v-for="(field, index) in props.section.fields"
+            :key="`${field.name}-${index}`"
+            :class="getColumnSpanClass(field.columns)"
+        >
+            <FormField :field="field" />
+        </div>
+    </div>
 </template>

package/dist/runtime/app/components/Page/Page.vue

@@ -14,50 +14,50 @@ const navbarUi = computed(() => ({ left: ui.value.navbarLeft, root: ui.value.nav
 </script>
 
 <template>
-    <UDashboardPanel :ui="panelUi">
-        <template #header>
-            <UDashboardNavbar :ui="navbarUi">
-                <!--
-                    Se ocupa `#left` entero en vez de `#title`: el `#title` de la
-                    barra vive dentro de un `<h1>`, y una miga de pan ahí sería un
-                    `<nav>` dentro de un encabezado.
-                -->
-                <template #left>
-                    <slot name="leading" />
-
-                    <!-- En `neutral`: en color de marca, el último segmento se lee
-                         como un enlace a otro sitio. -->
-                    <UBreadcrumb
-                        v-if="props.breadcrumb?.length"
-                        :class="ui.breadcrumb"
-                        color="neutral"
-                        :items="props.breadcrumb"
-                    />
-                </template>
-
-                <template #right>
-                    <slot name="actions" />
-                </template>
-            </UDashboardNavbar>
-        </template>
-
-        <template #body>
-            <div :class="ui.body">
-                <!-- Un `<div>` y no un `<header>`: un `<header>` suelto es un
-                     landmark `banner`, y solo puede haber uno por página. -->
-                <div :class="ui.heading">
-                    <h1 :class="ui.title">{{ props.title }}</h1>
-
-                    <p
-                        v-if="props.description"
-                        :class="ui.description"
-                    >
-                        {{ props.description }}
-                    </p>
-                </div>
-
-                <slot />
-            </div>
-        </template>
-    </UDashboardPanel>
+    <UDashboardPanel :ui="panelUi">
+        <template #header>
+            <UDashboardNavbar :ui="navbarUi">
+                <!--
+                    Se ocupa `#left` entero en vez de `#title`: el `#title` de la
+                    barra vive dentro de un `<h1>`, y una miga de pan ahí sería un
+                    `<nav>` dentro de un encabezado.
+                -->
+                <template #left>
+                    <slot name="leading" />
+
+                    <!-- En `neutral`: en color de marca, el último segmento se lee
+                         como un enlace a otro sitio. -->
+                    <UBreadcrumb
+                        v-if="props.breadcrumb?.length"
+                        :class="ui.breadcrumb"
+                        color="neutral"
+                        :items="props.breadcrumb"
+                    />
+                </template>
+
+                <template #right>
+                    <slot name="actions" />
+                </template>
+            </UDashboardNavbar>
+        </template>
+
+        <template #body>
+            <div :class="ui.body">
+                <!-- Un `<div>` y no un `<header>`: un `<header>` suelto es un
+                     landmark `banner`, y solo puede haber uno por página. -->
+                <div :class="ui.heading">
+                    <h1 :class="ui.title">{{ props.title }}</h1>
+
+                    <p
+                        v-if="props.description"
+                        :class="ui.description"
+                    >
+                        {{ props.description }}
+                    </p>
+                </div>
+
+                <slot />
+            </div>
+        </template>
+    </UDashboardPanel>
 </template>

package/dist/runtime/app/components/State/EmptyState.vue

@@ -13,24 +13,24 @@ const ui = useVunoTheme("state", () => props.ui);
 </script>
 
 <template>
-    <div :class="ui.root">
-        <UIcon
-            class="text-dimmed"
-            :class="ui.icon"
-            :name="props.icon ?? icons.empty"
-        />
-
-        <p :class="ui.title">{{ props.title ?? messages.emptyTable }}</p>
-
-        <p
-            v-if="props.hint"
-            :class="ui.hint"
-        >
-            {{ props.hint }}
-        </p>
-
-        <div :class="ui.actions">
-            <slot name="actions" />
-        </div>
-    </div>
+    <div :class="ui.root">
+        <UIcon
+            class="text-dimmed"
+            :class="ui.icon"
+            :name="props.icon ?? icons.empty"
+        />
+
+        <p :class="ui.title">{{ props.title ?? messages.emptyTable }}</p>
+
+        <p
+            v-if="props.hint"
+            :class="ui.hint"
+        >
+            {{ props.hint }}
+        </p>
+
+        <div :class="ui.actions">
+            <slot name="actions" />
+        </div>
+    </div>
 </template>

package/dist/runtime/app/components/State/FailureState.vue

@@ -10,25 +10,25 @@ const ui = useVunoTheme("state", () => props.ui);
 </script>
 
 <template>
-    <div :class="ui.root">
-        <UIcon
-            class="text-error"
-            :class="ui.icon"
-            :name="icons.failure"
-        />
-
-        <p :class="ui.title">{{ props.failure.title ?? messages.failureTitle }}</p>
-
-        <p :class="ui.hint">{{ props.failure.hint ?? messages.failureHint }}</p>
-
-        <div :class="ui.actions">
-            <UButton
-                color="neutral"
-                :icon="icons.retry"
-                :label="messages.retry"
-                variant="outline"
-                @click="props.failure.retry()"
-            />
-        </div>
-    </div>
+    <div :class="ui.root">
+        <UIcon
+            class="text-error"
+            :class="ui.icon"
+            :name="icons.failure"
+        />
+
+        <p :class="ui.title">{{ props.failure.title ?? messages.failureTitle }}</p>
+
+        <p :class="ui.hint">{{ props.failure.hint ?? messages.failureHint }}</p>
+
+        <div :class="ui.actions">
+            <UButton
+                color="neutral"
+                :icon="icons.retry"
+                :label="messages.retry"
+                variant="outline"
+                @click="props.failure.retry()"
+            />
+        </div>
+    </div>
 </template>