@groupteknology/vuno 0.3.0 → 0.4.0

package/README.md

@@ -62,7 +62,7 @@ const definition = {
 
 ### Tipos de campo
 
-`text` · `email` · `password` · `textarea` · `number` · `select` · `radio` · `checkbox` · `color` · `slug` · `file` · `array`
+`text` · `email` · `password` · `textarea` · `number` · `select` · `radio` · `checkbox` · `switch` · `color` · `slug` · `file` · `array`
 
 `source` del campo `slug` es el **nombre** del campo del que deriva, no su valor.
 
@@ -89,6 +89,17 @@ Con `layout: 'tabs'`, cada pestaña muestra un contador de los campos con error
 
 ### En un modal
 
+El slot `footer` recibe `formId`, necesario para enviar desde un botón propio: el pie vive fuera del `<form>`, así que la asociación se hace con el atributo nativo.
+
+```vue
+<VFormModal v-model:open="open" v-model:state="state" :definition="definition" :title="title">
+  <template #footer="{ close, formId, loading }">
+    <UButton label="Cancelar" variant="ghost" @click="close" />
+    <UButton :form="formId" :label="editando ? 'Guardar cambios' : 'Crear'" :loading="loading" type="submit" />
+  </template>
+</VFormModal>
+```
+
 `VFormModal` añade el diálogo, los botones y el ancho adecuado. Los botones van en el pie del modal —fijo mientras el cuerpo hace scroll— asociados al formulario por `id`.
 
 ```vue
@@ -101,6 +112,10 @@ Con `layout: 'tabs'`, cada pestaña muestra un contador de los campos con error
 
 ```vue
 <script setup lang="ts">
+// En SSR, `$fetch` no reenvía la cookie de la petición y una ruta con sesión
+// responde 401 durante el render. `useRequestFetch()` sí la lleva.
+const request = useRequestFetch()
+
 const query = useVunoTableQuery({ sort: 'sku', url: true })
 
 const { items, total, failure, isPending, isSaving, isDeleting,
@@ -109,7 +124,7 @@ const { items, total, failure, isPending, isSaving, isDeleting,
   key: 'products',
   query,
   emptyForm: () => ({ name: '', sku: '' }),
-  list:   (q)        => $fetch('/api/products', { query: q }),
+  list:   (q)        => request('/api/products', { query: q }),
   create: (form)     => $fetch('/api/products', { body: form, method: 'POST' }),
   update: (id, form) => $fetch(`/api/products/${id}`, { body: form, method: 'PATCH' }),
   remove: (row)      => $fetch(`/api/products/${row.id}`, { method: 'DELETE' }),
@@ -117,6 +132,8 @@ const { items, total, failure, isPending, isSaving, isDeleting,
 </script>
 ```
 
+Solo `list` necesita `useRequestFetch()`: es la única que corre en servidor. El alta, la edición y el borrado salen siempre del navegador, donde `$fetch` lleva la cookie por su cuenta.
+
 La consulta forma parte de la clave de caché, así que cada página, filtro y orden se guarda por separado. Usa `placeholderData: keepPreviousData`, que mantiene en pantalla los datos anteriores mientras llega la nueva página: sin eso, cada cambio de filtro deja `data` en `undefined` un instante y la tabla parpadea enseñando su estado vacío. Los textos de los avisos salen de `vuno.messages` y se pueden afinar por pantalla con la opción `messages`.
 
 ### Claves que dependen de estado reactivo
@@ -180,6 +197,8 @@ export default defineNuxtPlugin((nuxtApp) => {
 })
 ```
 
+**Si tu API tiene sesión, `list` tiene que usar `useRequestFetch()`.** Un `$fetch` pelado no reenvía la cookie de la petición entrante, así que durante el render en servidor la llamada sale sin autenticar y la ruta responde 401. Es el tropiezo más probable al estrenar esto, porque en cliente el mismo código funciona.
+
 Con la clave incompleta no se espera nada: la consulta está suspendida y esperarla colgaría el render entero, porque una consulta deshabilitada nunca se asienta.
 
 `server: false` desactiva la espera para lo que no se ve en la primera pintada —una lista dentro de un modal, una pestaña oculta—, donde solo retrasaría el HTML.

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "vuno",
   "configKey": "vuno",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/app/components/Field/FieldSwitch.d.vue.ts

@@ -0,0 +1,5 @@
+import type { VunoFieldSwitch } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldSwitch, 'class' | 'columns'>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,27 @@
+<script setup>
+import { useVunoField } from "#vuno/composables/useVunoField";
+import { useVunoTheme } from "#vuno/composables/useVunoTheme";
+const props = defineProps({
+  name: { type: String, required: true },
+  description: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  help: { type: String, required: false },
+  hint: { type: String, required: false },
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const { value } = useVunoField(() => props.name);
+const ui = useVunoTheme("fieldSwitch", () => props.ui);
+</script>
+
+<template>
+    <USwitch
+        v-model="value"
+        :disabled="props.disabled"
+        :name="props.name"
+        :size="props.size"
+        :ui="ui"
+    />
+</template>

package/dist/runtime/app/components/Field/FieldSwitch.vue.d.ts

@@ -0,0 +1,5 @@
+import type { VunoFieldSwitch } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldSwitch, 'class' | 'columns'>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -12,6 +12,7 @@ import FieldPassword from "#vuno/components/Field/FieldPassword.vue";
 import FieldRadio from "#vuno/components/Field/FieldRadio.vue";
 import FieldSelect from "#vuno/components/Field/FieldSelect.vue";
 import FieldSlug from "#vuno/components/Field/FieldSlug.vue";
+import FieldSwitch from "#vuno/components/Field/FieldSwitch.vue";
 import FieldText from "#vuno/components/Field/FieldText.vue";
 import FieldTextarea from "#vuno/components/Field/FieldTextarea.vue";
 const props = defineProps({
@@ -28,6 +29,7 @@ const components = {
   radio: FieldRadio,
   select: FieldSelect,
   slug: FieldSlug,
+  switch: FieldSwitch,
   text: FieldText,
   textarea: FieldTextarea
 };
@@ -42,20 +44,20 @@ const fieldProps = computed(() => {
 </script>
 
 <template>
-    <UFormField
-        :class="props.field.class"
-        :description="props.field.description"
-        :help="props.field.help"
-        :hint="props.field.hint"
-        :label="props.field.label"
-        :name="props.field.name"
-        :required="props.field.required"
-        :size="size"
-        :ui="ui"
-    >
-        <component
-            :is="component"
-            v-bind="fieldProps"
-        />
-    </UFormField>
+    <UFormField
+        :class="props.field.class"
+        :description="props.field.description"
+        :help="props.field.help"
+        :hint="props.field.hint"
+        :label="props.field.label"
+        :name="props.field.name"
+        :required="props.field.required"
+        :size="size"
+        :ui="ui"
+    >
+        <component
+            :is="component"
+            v-bind="fieldProps"
+        />
+    </UFormField>
 </template>

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

@@ -32,8 +32,14 @@ declare const __VLS_export: <TState extends VunoFormState>(__VLS_props: NonNulla
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
+        /**
+         * `formId` es imprescindible, no un extra: el pie del modal vive fuera
+         * del `<form>`, así que un botón propio solo puede enviarlo con
+         * `:form="formId"`. Sin exponerlo, cualquier pie a medida queda mudo.
+         */
         footer?: (props: {
             dirty: boolean;
+            formId: string;
             loading: boolean;
             close: () => void;
             reset: () => void;

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

@@ -33,50 +33,51 @@ function onSubmit(event) {
 </script>
 
 <template>
-    <UModal
-        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>
-
-        <template #footer>
-            <slot
-                :close="close"
-                :dirty="form?.dirty ?? false"
-                :loading="props.loading ?? false"
-                name="footer"
-                :reset="() => form?.reset?.()"
-            >
-                <UButton
-                    color="neutral"
-                    :disabled="props.loading"
-                    :label="messages.cancel"
-                    variant="ghost"
-                    @click="close"
-                />
-                <UButton
-                    :form="formId"
-                    :label="messages.save"
-                    :loading="props.loading"
-                    type="submit"
-                />
-            </slot>
-        </template>
-    </UModal>
+    <UModal
+        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>
+
+        <template #footer>
+            <slot
+                :close="close"
+                :dirty="form?.dirty ?? false"
+                :formId="formId"
+                :loading="props.loading ?? false"
+                name="footer"
+                :reset="() => form?.reset?.()"
+            >
+                <UButton
+                    color="neutral"
+                    :disabled="props.loading"
+                    :label="messages.cancel"
+                    variant="ghost"
+                    @click="close"
+                />
+                <UButton
+                    :form="formId"
+                    :label="messages.save"
+                    :loading="props.loading"
+                    type="submit"
+                />
+            </slot>
+        </template>
+    </UModal>
 </template>

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

@@ -32,8 +32,14 @@ declare const __VLS_export: <TState extends VunoFormState>(__VLS_props: NonNulla
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
+        /**
+         * `formId` es imprescindible, no un extra: el pie del modal vive fuera
+         * del `<form>`, así que un botón propio solo puede enviarlo con
+         * `:form="formId"`. Sin exponerlo, cualquier pie a medida queda mudo.
+         */
         footer?: (props: {
             dirty: boolean;
+            formId: string;
             loading: boolean;
             close: () => void;
             reset: () => void;

package/dist/runtime/app/composables/useVunoCrud.js

@@ -43,7 +43,15 @@ export function useVunoCrud(options) {
   });
   const items = computed(() => data.value?.data ?? []);
   const total = computed(() => data.value?.total ?? 0);
-  const failure = computed(() => isError.value ? { retry: () => void refetch() } : void 0);
+  const failure = computed(
+    () => isError.value ? {
+      // Sin valor propio los deja en `undefined` y el estado de
+      // fallo cae a los textos globales de `vuno.messages`.
+      hint: options.messages?.listFailedHint,
+      title: options.messages?.listFailed,
+      retry: () => void refetch()
+    } : void 0
+  );
   function invalidate() {
     if (!resolvedKey.value.ready) return;
     void queryClient.invalidateQueries({ queryKey: baseKey.value });

package/dist/runtime/app/theme/index.js

@@ -50,6 +50,9 @@ export const defaultTheme = {
   fieldSlug: {
     slots: { root: "w-full", trailing: "pe-1" }
   },
+  fieldSwitch: {
+    slots: { root: "w-full" }
+  },
   fieldText: {
     slots: { root: "w-full" }
   },

package/dist/runtime/app/types/crud.d.ts

@@ -10,6 +10,14 @@ export type VunoCrudMessages = {
     createFailed: string;
     deleted: string;
     deleteFailed: string;
+    /** Título cuando falla el listado. Por defecto, el de `vuno.messages`. */
+    listFailed: string;
+    /**
+     * Pista bajo ese título. Es el sitio para lo que evita un error a quien
+     * mira una tabla que no cargó: «no des una de alta sin verlas, puede
+     * existir ya».
+     */
+    listFailedHint: string;
     updated: string;
     updateFailed: string;
 };
@@ -55,7 +63,15 @@ export type VunoCrudOptions<TRow extends VunoTableRow, TForm> = {
     emptyForm: () => TForm;
     list: (query: VunoTableQuery) => Promise<VunoCrudPage<TRow>>;
     remove?: (row: TRow) => Promise<unknown>;
-    /** Convierte una fila en el estado del formulario al editar. */
+    /**
+     * Convierte una fila en el estado del formulario al editar.
+     *
+     * Es opcional solo mientras la fila y el formulario tengan la misma forma.
+     * En cuanto la fila traiga campos que no son del formulario —un contador,
+     * una fecha de alta— hace falta: sin él se copia la fila entera al estado
+     * y esos campos acaban viajando en el guardado, que es donde se nota, lejos
+     * de aquí.
+     */
     toForm?: (row: TRow) => TForm;
     update?: (id: number | string, form: TForm) => Promise<unknown>;
 };

package/dist/runtime/app/types/field.d.ts

@@ -52,6 +52,13 @@ export type VunoFieldArray = VunoFieldBase & {
 export type VunoFieldCheckbox = VunoFieldBase & {
     indeterminate?: boolean;
 };
+/**
+ * Interruptor para un booleano que es un estado encendido o apagado, no una
+ * opción que se marca. La diferencia con `checkbox` es de lectura, no de dato:
+ * en una pantalla de ajustes el interruptor dice «esto está activo» y la
+ * casilla dice «esto queda seleccionado».
+ */
+export type VunoFieldSwitch = VunoFieldBase;
 export type VunoFieldColor = VunoFieldBase & {
     placeholder?: string;
 };
@@ -112,7 +119,7 @@ export type VunoFieldTextarea = VunoFieldBase & {
  * Unión discriminada por `type`. Es lo que consume `VunoFormDefinition`, de modo
  * que cada campo de la definición queda tipado con sus propios props.
  */
-export type VunoField = WithType<VunoFieldArray, 'array'> | WithType<VunoFieldCheckbox, 'checkbox'> | WithType<VunoFieldColor, 'color'> | WithType<VunoFieldEmail, 'email'> | WithType<VunoFieldFile, 'file'> | WithType<VunoFieldNumber, 'number'> | WithType<VunoFieldPassword, 'password'> | WithType<VunoFieldRadio, 'radio'> | WithType<VunoFieldSelect, 'select'> | WithType<VunoFieldSlug, 'slug'> | WithType<VunoFieldText, 'text'> | WithType<VunoFieldTextarea, 'textarea'>;
+export type VunoField = WithType<VunoFieldArray, 'array'> | WithType<VunoFieldCheckbox, 'checkbox'> | WithType<VunoFieldColor, 'color'> | WithType<VunoFieldEmail, 'email'> | WithType<VunoFieldFile, 'file'> | WithType<VunoFieldNumber, 'number'> | WithType<VunoFieldPassword, 'password'> | WithType<VunoFieldRadio, 'radio'> | WithType<VunoFieldSelect, 'select'> | WithType<VunoFieldSlug, 'slug'> | WithType<VunoFieldSwitch, 'switch'> | WithType<VunoFieldText, 'text'> | WithType<VunoFieldTextarea, 'textarea'>;
 export type VunoFieldType = VunoField['type'];
 /** Extrae los props de un tipo concreto de campo: `VunoFieldOf<'slug'>`. */
 export type VunoFieldOf<TType extends VunoFieldType> = Extract<VunoField, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groupteknology/vuno",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "exports": {
     ".": {