@groupteknology/vuno 0.6.0 → 0.6.1

package/dist/runtime/app/components/App/AppToaster.d.vue.ts

@@ -0,0 +1,11 @@
+import type { VunoNotification } from '#vuno/types/app';
+type __VLS_Props = {
+    notifications: VunoNotification[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismiss: (id: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDismiss?: ((id: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/App/AppToaster.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { useVunoTheme } from "#vuno/composables/useVunoTheme";
+import AppToast from "./AppToast.vue";
+const props = defineProps({
+  notifications: { type: Array, required: true }
+});
+const emit = defineEmits(["dismiss"]);
+const ui = useVunoTheme("appToaster");
+</script>
+
+<template>
+    <!--
+        La pila se porta a `body` para que no la recorte ningún `overflow` ni la
+        reordene ningún contexto de apilamiento de la pantalla que la abrió.
+
+        `pointer-events-none` en el contenedor y `auto` en cada aviso: si no, una
+        franja invisible a lo alto de la pantalla se come los clics de lo que hay
+        detrás aunque no haya ninguna notificación.
+    -->
+    <Teleport to="body">
+        <div
+            v-if="props.notifications.length > 0"
+            :class="ui.root"
+        >
+            <!--
+                `TransitionGroup` y no `Transition`: hay varias a la vez y al
+                quitar una de en medio las de abajo tienen que subir. `move`
+                anima justo eso, que si no da un salto.
+            -->
+            <TransitionGroup
+                :class="ui.list"
+                :enterActiveClass="ui.enterActive"
+                :enterFromClass="ui.enterFrom"
+                :leaveActiveClass="ui.leaveActive"
+                :leaveToClass="ui.leaveTo"
+                :moveClass="ui.move"
+                tag="div"
+            >
+                <AppToast
+                    v-for="notification in props.notifications"
+                    :key="notification.id"
+                    :class="ui.item"
+                    :notification="notification"
+                    @dismiss="emit('dismiss', notification.id)"
+                />
+            </TransitionGroup>
+        </div>
+    </Teleport>
+</template>

package/dist/runtime/app/components/App/AppToaster.vue.d.ts

@@ -0,0 +1,11 @@
+import type { VunoNotification } from '#vuno/types/app';
+type __VLS_Props = {
+    notifications: VunoNotification[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismiss: (id: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDismiss?: ((id: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,7 +1,9 @@
 <script setup>
 import { computed } from "vue";
+import AppModal from "#vuno/components/App/AppModal.vue";
 import { useVunoIcons, useVunoMessages, useVunoTheme } from "#vuno/composables/useVunoTheme";
 const props = defineProps({
+  alert: { type: Boolean, required: false },
   cancelLabel: { type: String, required: false },
   color: { type: String, required: false },
   confirmLabel: { type: String, required: false },
@@ -30,27 +32,32 @@ function onConfirm() {
 </script>
 
 <template>
-    <UModal
+    <!--
+        Sobre `AppModal`, no sobre el de Nuxt UI, y no por gusto: un `<dialog>`
+        nativo vive en la capa superior del navegador, que queda por encima de
+        cualquier z-index. Mezclando los dos sistemas, un confirm abierto desde
+        dentro de un `AppModal` se pintaba detrás de él —estaba en el DOM y no se
+        veía—. Nativos los dos, el navegador los apila por orden de apertura.
+    -->
+    <AppModal
         v-model:open="open"
         :dismissible="!props.loading"
-        scrollable
         :title="props.title ?? messages.confirmTitle"
         :ui="modalUi"
     >
-        <template #body>
-            <div :class="ui.body">
-                <UIcon
-                    :class="[ui.icon, `text-${color}`]"
-                    :name="props.icon ?? icons.confirm"
-                />
-                <div :class="ui.description">
-                    <slot>{{ props.description ?? messages.confirmDescription }}</slot>
-                </div>
+        <div :class="ui.body">
+            <UIcon
+                :class="[ui.icon, `text-${color}`]"
+                :name="props.icon ?? icons.confirm"
+            />
+            <div :class="ui.description">
+                <slot>{{ props.description ?? messages.confirmDescription }}</slot>
             </div>
-        </template>
+        </div>
 
         <template #footer>
             <UButton
+                v-if="!props.alert"
                 color="neutral"
                 :disabled="props.loading"
                 :label="props.cancelLabel ?? messages.cancel"
@@ -64,5 +71,5 @@ function onConfirm() {
                 @click="onConfirm"
             />
         </template>
-    </UModal>
+    </AppModal>
 </template>

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>