@groupteknology/vuno 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Diego Otayza
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,215 @@
+# @groupteknology/vuno
+
+Formularios, tablas y diálogos declarativos para Nuxt 4, construidos sobre [Nuxt UI](https://ui.nuxt.com).
+
+El módulo **no aporta estética**. Todo lo que pinta sale del tema del proyecto que lo instala: usa las utilidades semánticas de Nuxt UI (`bg-default`, `text-muted`, `border-default`), su escala de radios y sus colores. Si cambias `primary` o `--ui-radius`, los componentes de vuno cambian contigo.
+
+## Instalación
+
+```bash
+pnpm add @groupteknology/vuno
+```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui', '@groupteknology/vuno'],
+})
+```
+
+## Formularios
+
+Un formulario se declara como datos y se renderiza solo. El estado vive en un único objeto y cada campo lo lee y lo escribe por ruta, incluidas las anidadas.
+
+```vue
+<script setup lang="ts">
+import type { VunoFormDefinition } from '@groupteknology/vuno'
+import * as z from 'zod'
+
+const schema = z.object({
+  sku: z.string().min(1, 'El SKU es requerido'),
+  name: z.string().min(1, 'El nombre es requerido'),
+})
+
+const state = ref({ sku: '', name: '', slug: '' })
+
+const definition = {
+  layout: 'tabs',            // 'sections' (por defecto) | 'tabs'
+  sections: [
+    {
+      id: 'general',
+      title: 'Datos generales',
+      icon: 'lucide:info',
+      fields: [
+        { name: 'sku',  type: 'text', label: 'SKU',    columns: { xs: 12, lg: 6 }, required: true },
+        { name: 'name', type: 'text', label: 'Nombre', columns: { xs: 12, lg: 6 }, required: true },
+        { name: 'slug', type: 'slug', label: 'Slug',   source: 'name' },
+      ],
+    },
+  ],
+} satisfies VunoFormDefinition
+</script>
+
+<template>
+  <VForm v-model:state="state" :definition="definition" :schema="schema" @submit="guardar">
+    <template #footer="{ dirty, reset }">
+      <UButton :disabled="!dirty" label="Descartar" variant="ghost" @click="reset" />
+      <UButton label="Guardar" type="submit" />
+    </template>
+  </VForm>
+</template>
+```
+
+### Tipos de campo
+
+`text` · `email` · `password` · `textarea` · `number` · `select` · `radio` · `checkbox` · `color` · `slug` · `file` · `array`
+
+Cada uno declara sus propios props mediante una unión discriminada por `type`, así que el editor te avisa si a un `slug` le falta el `source` o si le pasas un `placeholder` a un `file`.
+
+### Campos repetibles
+
+`type: 'array'` repite un grupo de campos y genera rutas anidadas (`variants.0.sku`) que coinciden con las que produce la validación, de modo que cada campo muestra su propio error. Admite anidamiento.
+
+```ts
+{
+  name: 'variants',
+  type: 'array',
+  label: 'Variantes',
+  sortable: true,
+  fields: [
+    { name: 'sku',   type: 'text',   label: 'SKU',   columns: { xs: 12, md: 6 } },
+    { name: 'stock', type: 'number', label: 'Stock', columns: { xs: 12, md: 6 } },
+  ],
+}
+```
+
+Con `layout: 'tabs'`, cada pestaña muestra un contador de los campos con error que contiene, incluidos los anidados.
+
+### En un modal
+
+`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
+<VFormModal v-model:open="open" v-model:state="state" :definition="definition" :schema="schema" title="Nuevo producto" close-on-submit @submit="guardar" />
+```
+
+## Una pantalla de mantenimiento entera
+
+`useVunoCrud` resuelve el ciclo completo: listar, dar de alta o editar en un modal, borrar con confirmación, invalidar la caché y avisar. Está construido sobre [TanStack Query](https://tanstack.com/query).
+
+```vue
+<script setup lang="ts">
+const query = useVunoTableQuery({ sort: 'sku', url: true })
+
+const { items, total, failure, isPending, isSaving, isDeleting,
+        formOpen, editing, state, submit, openCreate, openEdit,
+        confirmOpen, deleting, askDelete, confirmDelete } = useVunoCrud<Product, ProductForm>({
+  key: 'products',
+  query,
+  emptyForm: () => ({ name: '', sku: '' }),
+  list:   (q)        => $fetch('/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' }),
+})
+</script>
+```
+
+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`.
+
+`@tanstack/vue-query` es una dependencia opcional: solo hace falta si usas este composable.
+
+## Páginas
+
+`VPage` pone la estructura que repite cualquier pantalla de mantenimiento:
+
+```vue
+<VPage title="Productos" description="Catálogo completo." :breadcrumb="[{ label: 'Inicio', to: '/' }, { label: 'Productos' }]">
+  <template #actions>
+    <UButton icon="lucide:plus" label="Nuevo producto" @click="openCreate" />
+  </template>
+
+  <VTable ... />
+</VPage>
+```
+
+## Tablas
+
+`VTable` funciona en modo servidor: emite el estado de consulta y tú devuelves la página.
+
+```vue
+<script setup lang="ts">
+const query = useVunoTableQuery({ sort: 'sku', url: true, history: 'push', filterKeys: ['status'] })
+
+const { data, status } = await useFetch('/api/products', {
+  query: computed(() => ({ page: query.value.page, sort: query.value.sort?.column, ...query.value.filters })),
+})
+</script>
+
+<template>
+  <VTable v-model:query="query" :definition="definition" :data="data?.data ?? []" :total="data?.total ?? 0" :loading="status === 'pending'" />
+</template>
+```
+
+Con `url: true` los filtros, la página, la búsqueda y el orden viajan en la query string: el enlace es compartible y recargar conserva la vista.
+
+### Una tabla vacía no es una que falló
+
+Son dos estados distintos y se pintan distinto. Sin separarlos, una consulta que falla se normaliza a lista vacía (`data ?? []`) y la tabla dice «No hay resultados»: afirma que no hay nada cuando lo cierto es que no se pudo saber.
+
+```ts
+const failure = computed(() => isError.value
+  ? { title: 'No pudimos cargar los productos', hint: 'Puede ser algo temporal.', retry: () => void refetch() }
+  : undefined)
+```
+
+El reintento va **dentro** del objeto para que no se pueda pintar un error sin ofrecer salida. Mientras hay fallo, la tabla no muestra filas ni paginación. El estado vacío se declara en la definición (`empty: { title, hint, icon }`) y tiene un slot `empty-actions` donde encaja el «crear el primero».
+
+Los dos estados existen además como componentes sueltos, para las pantallas que no son una tabla:
+
+```vue
+<VEmptyState title="Todavía no hay pedidos" hint="Aparecerán aquí en cuanto entre el primero." icon="lucide:inbox">
+  <template #actions><UButton label="Crear pedido" /></template>
+</VEmptyState>
+
+<VFailureState :failure="failure" />
+```
+
+Tipos de columna: `text` · `number` · `currency` · `date` · `boolean` · `badge` · `image` · `custom` · `actions`. Trae búsqueda con antirrebote, paginación, selección múltiple, panel lateral de filtros y menú de acciones por fila.
+
+## Personalización
+
+Tres niveles, de más global a más concreto:
+
+```ts
+// app.config.ts — para toda la aplicación
+export default defineAppConfig({
+  ui: { colors: { primary: 'indigo' } },
+  vuno: {
+    formSection: { slots: { root: 'border-dashed' } },
+    icons: { slugEdit: 'lucide:wand-sparkles' },
+    messages: { selectPlaceholder: 'Elige una opción' },
+  },
+})
+```
+
+```vue
+<!-- prop `ui` — para una instancia -->
+<VForm :ui="{ sections: 'gap-8' }" ... />
+```
+
+Los textos e iconos están todos en `vuno.messages` y `vuno.icons`: el paquete no impone idioma ni colección de iconos.
+
+## Estado
+
+En desarrollo.
+
+### Nota sobre pruebas automatizadas
+
+Al comprobar los diálogos con un navegador controlado por automatización, el nodo del modal puede seguir en el DOM después de cerrarlo. No es un fallo: Chrome congela las animaciones CSS en pestañas ocultas y Reka UI espera el evento `animationend` para desmontar el diálogo. El componente ya está cerrado —lo indica su `data-state="closed"`—, solo falta la limpieza.
+
+Comprueba la visibilidad real (`opacity`, `data-state`) en lugar de la existencia del nodo, o haz la prueba con la pestaña en primer plano.
+
+## Licencia
+
+[MIT](./LICENSE) © Diego Otayza

package/dist/module.d.mts

@@ -0,0 +1,10 @@
+import { NuxtModule } from '@nuxt/schema';
+export * from '../dist/runtime/app/types/index.js';
+
+interface ModuleOptions {
+    prefix?: string;
+}
+declare const module$1: NuxtModule<ModuleOptions>;
+
+export { module$1 as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "vuno",
+  "configKey": "vuno",
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.3",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,28 @@
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  defaults: {
+    prefix: "V"
+  },
+  meta: {
+    name: "vuno",
+    configKey: "vuno"
+  },
+  moduleDependencies: {
+    "@nuxt/ui": {}
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.alias["#vuno"] = resolver.resolve("./runtime/app");
+    addComponentsDir({
+      global: true,
+      path: resolver.resolve("./runtime/app/components"),
+      pathPrefix: false,
+      prefix: options.prefix
+    });
+    addImportsDir(resolver.resolve("./runtime/app/composables"));
+    nuxt.options.css.push(resolver.resolve("./runtime/app/assets/css/main.css"));
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/app/assets/css/main.css

@@ -0,0 +1 @@
+@import "tailwindcss";@import "@nuxt/ui";@source "../../**/*";

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

@@ -0,0 +1,21 @@
+import type { VunoConfirmOptions } from '#vuno/types/confirm';
+import type { VunoFieldSlots } from '#vuno/types/field';
+type __VLS_Props = VunoConfirmOptions & {
+    loading?: boolean;
+    ui?: VunoFieldSlots;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    confirm: () => any;
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+    onCancel?: (() => 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

@@ -0,0 +1,65 @@
+<script setup>
+import { computed } from "vue";
+import { useVunoIcons, useVunoMessages, useVunoTheme } from "#vuno/composables/useVunoTheme";
+const props = defineProps({
+  cancelLabel: { type: String, required: false },
+  color: { type: String, required: false },
+  confirmLabel: { type: String, required: false },
+  description: { type: String, required: false },
+  icon: { type: String, required: false },
+  title: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["cancel", "confirm"]);
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const icons = useVunoIcons();
+const messages = useVunoMessages();
+const ui = useVunoTheme("confirm", () => props.ui);
+const color = computed(() => props.color ?? "error");
+const modalUi = computed(() => ({ content: ui.value.content, footer: ui.value.footer }));
+function onCancel() {
+  open.value = false;
+  emit("cancel");
+}
+function onConfirm() {
+  emit("confirm");
+  if (!props.loading) open.value = false;
+}
+</script>
+
+<template>
+    <UModal
+        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"
+                />
+                <p>{{ props.description ?? messages.confirmDescription }}</p>
+            </div>
+        </template>
+
+        <template #footer>
+            <UButton
+                color="neutral"
+                :disabled="props.loading"
+                :label="props.cancelLabel ?? messages.cancel"
+                variant="ghost"
+                @click="onCancel"
+            />
+            <UButton
+                :color="color"
+                :label="props.confirmLabel ?? messages.confirm"
+                :loading="props.loading"
+                @click="onConfirm"
+            />
+        </template>
+    </UModal>
+</template>

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

@@ -0,0 +1,21 @@
+import type { VunoConfirmOptions } from '#vuno/types/confirm';
+import type { VunoFieldSlots } from '#vuno/types/field';
+type __VLS_Props = VunoConfirmOptions & {
+    loading?: boolean;
+    ui?: VunoFieldSlots;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    confirm: () => any;
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,5 @@
+import type { VunoFieldArray } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldArray, '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/FieldArray.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { computed } from "vue";
+import { useVunoField } from "#vuno/composables/useVunoField";
+import { useVunoIcons, useVunoMessages, useVunoTheme } from "#vuno/composables/useVunoTheme";
+import { getColumnSpanClass } from "#vuno/utils/grid";
+import FormField from "../Form/FormField.vue";
+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 },
+  addLabel: { type: String, required: false },
+  fields: { type: Array, required: true },
+  max: { type: Number, required: false },
+  min: { type: Number, required: false },
+  sortable: { type: Boolean, required: false }
+});
+const { value } = useVunoField(() => props.name);
+const icons = useVunoIcons();
+const messages = useVunoMessages();
+const ui = useVunoTheme("fieldArray", () => props.ui);
+const items = computed(() => value.value ?? []);
+const canAdd = computed(() => props.max === void 0 || items.value.length < props.max);
+const canRemove = computed(() => items.value.length > (props.min ?? 0));
+function emptyItem() {
+  const item = {};
+  for (const field of props.fields) {
+    item[field.name] = field.type === "checkbox" ? false : field.type === "number" ? void 0 : field.type === "array" || field.type === "file" ? [] : "";
+  }
+  return item;
+}
+function fieldAt(field, index) {
+  return { ...field, name: `${props.name}.${index}.${field.name}` };
+}
+function add() {
+  if (!canAdd.value) return;
+  value.value = [...items.value, emptyItem()];
+}
+function remove(index) {
+  if (!canRemove.value) return;
+  value.value = items.value.filter((_, position) => position !== index);
+}
+function move(index, offset) {
+  const next = [...items.value];
+  const target = index + offset;
+  if (target < 0 || target >= next.length) return;
+  const [moved] = next.splice(index, 1);
+  if (!moved) return;
+  next.splice(target, 0, moved);
+  value.value = next;
+}
+</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>
+</template>

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

@@ -0,0 +1,5 @@
+import type { VunoFieldArray } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldArray, '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/FieldCheckbox.d.vue.ts

@@ -0,0 +1,5 @@
+import type { VunoFieldCheckbox } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldCheckbox, '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/FieldCheckbox.vue

@@ -0,0 +1,30 @@
+<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 },
+  indeterminate: { type: Boolean, required: false }
+});
+const { value } = useVunoField(() => props.name);
+const ui = useVunoTheme("fieldCheckbox", () => props.ui);
+</script>
+
+<template>
+    <UCheckbox
+        v-model="value"
+        :disabled="props.disabled"
+        :indeterminate="props.indeterminate"
+        :name="props.name"
+        :required="props.required"
+        :size="props.size"
+        :ui="ui"
+    />
+</template>

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

@@ -0,0 +1,5 @@
+import type { VunoFieldCheckbox } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldCheckbox, '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/FieldColor.d.vue.ts

@@ -0,0 +1,5 @@
+import type { VunoFieldColor } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldColor, '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/FieldColor.vue

@@ -0,0 +1,57 @@
+<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 },
+  placeholder: { type: String, required: false }
+});
+const { value } = useVunoField(() => props.name);
+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>
+</template>

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

@@ -0,0 +1,5 @@
+import type { VunoFieldColor } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldColor, '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;