@groupteknology/vuno 1.0.0 → 2.0.0

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

@@ -0,0 +1,139 @@
+<script setup>
+import { cloneVNode, computed, nextTick, onBeforeUnmount, ref, useId } from "vue";
+import { useVunoAnchor } from "#vuno/composables/internal/useVunoAnchor";
+import { useVunoPortal } from "#vuno/composables/internal/useVunoPortal";
+import { useTheme } from "#vuno/composables/useTheme";
+import { firstElement } from "#vuno/internal/slots";
+defineOptions({ name: "VunoTooltip" });
+const props = defineProps({
+  delay: { type: Number, required: false, default: 300 },
+  disabled: { type: Boolean, required: false },
+  portal: { type: [String, Boolean], required: false, default: void 0 },
+  side: { type: String, required: false, default: "top" },
+  text: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const slots = defineSlots();
+const ui = useTheme("tooltip", () => props.ui);
+const portalTarget = useVunoPortal(() => props.portal);
+const tooltipId = useId();
+const arrowEl = ref(null);
+const contentEl = ref(null);
+const open = ref(false);
+const triggerEl = ref(null);
+const usable = computed(() => !props.disabled && Boolean(props.text));
+const opposite = { bottom: "top", left: "right", right: "left", top: "bottom" };
+const { anchor, release } = useVunoAnchor({
+  onPlaced: (position) => pinArrow(position),
+  distance: 6,
+  arrowElement: () => arrowEl.value ?? void 0,
+  placement: () => props.side
+});
+function pinArrow(position) {
+  const point = position.middlewareData.arrow;
+  if (!arrowEl.value || !point) return;
+  const side = opposite[position.placement.split("-")[0]];
+  Object.assign(arrowEl.value.style, {
+    bottom: "",
+    left: point.x === void 0 ? "" : `${point.x}px`,
+    right: "",
+    /* Medio cuadrado fuera de la caja: la otra mitad la tapa el fondo. */
+    [side]: "-4px",
+    top: point.y === void 0 ? "" : `${point.y}px`
+  });
+}
+const follow = () => anchor(triggerEl.value ?? void 0, contentEl.value ?? void 0);
+let timer;
+function cancelPending() {
+  if (timer === void 0) return;
+  clearTimeout(timer);
+  timer = void 0;
+}
+async function show() {
+  cancelPending();
+  if (!usable.value || open.value) return;
+  open.value = true;
+  await nextTick();
+  follow();
+}
+function showAfterDelay() {
+  cancelPending();
+  if (!usable.value) return;
+  if (props.delay <= 0) return void show();
+  timer = setTimeout(() => void show(), props.delay);
+}
+function hide() {
+  cancelPending();
+  open.value = false;
+  release();
+}
+function onKeydown(event) {
+  if (event.key !== "Escape" || !open.value) return;
+  event.preventDefault();
+  hide();
+}
+if (typeof document !== "undefined") {
+  document.addEventListener("keydown", onKeydown);
+  onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
+}
+const Trigger = () => {
+  const node = firstElement(slots.default?.());
+  if (!node) return null;
+  return cloneVNode(node, {
+    onBlur: hide,
+    /* Con el teclado no hay retardo que valga: al enfocar, ya. */
+    onFocus: () => void show(),
+    onPointerdown: hide,
+    /*
+     * En un táctil no hay «posar»: el navegador emite un `pointerenter`
+     * al tocar, y el aviso se abriría pegado al dedo y encima de lo que
+     * se acaba de pulsar.
+     */
+    onPointerenter: (event) => {
+      if (event.pointerType !== "touch") showAfterDelay();
+    },
+    onPointerleave: hide,
+    "aria-describedby": open.value ? tooltipId : void 0,
+    ref: (el) => {
+      triggerEl.value = el?.$el ?? el;
+    }
+  });
+};
+onBeforeUnmount(hide);
+</script>
+
+<template>
+    <Trigger />
+
+    <Teleport
+        v-if="open"
+        :to="portalTarget"
+    >
+        <!--
+            No es alcanzable con el tabulador y no recibe el foco: un aviso que
+            lo atrapara dejaría al teclado dentro de algo que se cierra solo.
+        -->
+        <div
+            :id="tooltipId"
+            ref="contentEl"
+            :class="ui.content"
+            role="tooltip"
+            style="position: fixed; top: 0; left: 0; width: max-content"
+        >
+            {{ props.text }}
+
+            <!--
+                Un cuadrado girado y no un polígono: así sirve igual por los
+                cuatro lados. Un triángulo habría que rotarlo según el lado
+                resuelto, y al rotarlo su caja deja de coincidir con lo que se
+                ve, que es de donde salen las flechas descolocadas.
+            -->
+            <div
+                ref="arrowEl"
+                aria-hidden="true"
+                :class="ui.arrow"
+                style="position: absolute"
+            />
+        </div>
+    </Teleport>
+</template>

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

@@ -0,0 +1,40 @@
+import type { VunoPortalTarget } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+/**
+ * El aviso que aparece al posar el ratón o al llegar con el teclado.
+ *
+ * Las cuatro cosas fáciles de dejarse y difíciles de notar que faltan son
+ * el retardo al abrir, cerrarlo con Escape, **abrirlo también al enfocar**
+ * —si solo abre al posar el ratón, para quien navega con el teclado no
+ * existe— y describir el disparador con `aria-describedby`, que es lo que
+ * hace que un lector de pantalla lo lea en vez de dejarlo suelto en la
+ * página. Las cuatro están abajo, cada una con su prueba.
+ */
+type Props = {
+    /** Milisegundos antes de abrirse al posar el ratón. */
+    delay?: number;
+    disabled?: boolean;
+    /** Dónde montar el aviso. Por defecto, lo que provea el modal que envuelva. */
+    portal?: VunoPortalTarget;
+    side?: 'bottom' | 'left' | 'right' | 'top';
+    text?: string;
+    ui?: VunoUi<'tooltip'>;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    text: string;
+    ui: VunoUi<"tooltip">;
+    delay: number;
+    portal: VunoPortalTarget;
+    side: "bottom" | "left" | "right" | "top";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/internal/ControlShell/ControlShell.d.vue.ts

@@ -0,0 +1,41 @@
+import type { VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+/**
+ * La caja de un control: borde, fondo, foco, inválido y deshabilitado.
+ *
+ * Existe separada porque el input, el área de texto y el combobox necesitan
+ * exactamente la misma caja, y tres copias del mismo borde divergen en
+ * cuanto alguien toca una. Lo que va dentro lo pone quien la usa.
+ *
+ * No sabe nada del control que envuelve: el estado lo lee del DOM con
+ * `has-[]`, así que funciona igual con un `<input>`, un `<textarea>` o un
+ * `div` con `role="combobox"`, y no hay forma de que lo que se ve y lo que
+ * se anuncia dejen de coincidir.
+ */
+type Props = {
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
+    size?: VunoSize;
+    ui?: VunoUi<'control'>;
+};
+type __VLS_Slots = {
+    /** El control en sí. */
+    default?: () => unknown;
+    /** Delante del control: un icono, un prefijo. */
+    leading?: () => unknown;
+    /** Detrás: un botón de acción, una unidad, un indicador. */
+    trailing?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    radius: VunoRadius;
+    size: VunoSize;
+    ui: VunoUi<"control">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/internal/ControlShell/ControlShell.theme.d.ts

@@ -0,0 +1,50 @@
+export declare const controlTheme: Record<"control", {
+    /**
+     * La caja de un control: borde, fondo, foco, inválido y deshabilitado.
+     *
+     * La comparten el input, el área de texto y el combobox, que necesitan la
+     * misma exactamente, y tres copias del mismo borde divergen en cuanto
+     * alguien toca una. El estado no se pasa como prop: se lee del control de
+     * dentro con `has-[]`, de modo que lo que se ve no puede separarse de lo
+     * que se anuncia.
+     *
+     * La altura es `min-h` y no `h` para que un área de texto pueda crecer sin
+     * pelearse con la caja; en un control de una línea el resultado es el
+     * mismo, porque nada de dentro mide más.
+     *
+     * Cuando hay una acción al final, la caja la marca con `data-trailing` y
+     * esa acción llega hasta el borde. El relleno inicial se conserva para que
+     * el texto o el icono de entrada mantengan la misma alineación.
+     */
+    readonly slots: {
+        readonly root: "flex w-full items-center gap-1.5 rounded-sm border border-vuno-border-strong bg-vuno-surface text-vuno-body transition-colors [--vuno-accent:var(--color-vuno-primary)] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-(--vuno-accent) has-disabled:cursor-not-allowed has-disabled:opacity-50 has-aria-invalid:border-vuno-error has-aria-invalid:[--vuno-accent:var(--color-vuno-error)] data-trailing:pe-0";
+    };
+    readonly variants: {
+        readonly groupOrientation: {
+            readonly horizontal: {
+                readonly root: "not-last:not-first:rounded-none not-only:first:rounded-e-none not-only:last:rounded-s-none focus-within:z-1";
+            };
+            readonly vertical: {
+                readonly root: "not-last:not-first:rounded-none not-only:first:rounded-b-none not-only:last:rounded-t-none focus-within:z-1";
+            };
+        };
+        readonly radius: Record<import("../../../types/base.js").VunoRadius, Record<"root", string>>;
+        readonly size: {
+            readonly xs: {
+                readonly root: "min-h-6 ps-2 pe-2 text-xs";
+            };
+            readonly sm: {
+                readonly root: "min-h-7 ps-2.5 pe-2.5 text-sm";
+            };
+            readonly md: {
+                readonly root: "min-h-8 ps-3 pe-3 text-sm";
+            };
+            readonly lg: {
+                readonly root: "min-h-9 ps-3.5 pe-3.5 text-base";
+            };
+            readonly xl: {
+                readonly root: "min-h-10 ps-4 pe-4 text-base";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/components/internal/ControlShell/ControlShell.theme.js

@@ -0,0 +1,38 @@
+import { radiusByStep } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const controlTheme = defineTheme("control", {
+  /**
+   * La caja de un control: borde, fondo, foco, inválido y deshabilitado.
+   *
+   * La comparten el input, el área de texto y el combobox, que necesitan la
+   * misma exactamente, y tres copias del mismo borde divergen en cuanto
+   * alguien toca una. El estado no se pasa como prop: se lee del control de
+   * dentro con `has-[]`, de modo que lo que se ve no puede separarse de lo
+   * que se anuncia.
+   *
+   * La altura es `min-h` y no `h` para que un área de texto pueda crecer sin
+   * pelearse con la caja; en un control de una línea el resultado es el
+   * mismo, porque nada de dentro mide más.
+   *
+   * Cuando hay una acción al final, la caja la marca con `data-trailing` y
+   * esa acción llega hasta el borde. El relleno inicial se conserva para que
+   * el texto o el icono de entrada mantengan la misma alineación.
+   */
+  slots: {
+    root: "flex w-full items-center gap-1.5 rounded-sm border border-vuno-border-strong bg-vuno-surface text-vuno-body transition-colors [--vuno-accent:var(--color-vuno-primary)] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-(--vuno-accent) has-disabled:cursor-not-allowed has-disabled:opacity-50 has-aria-invalid:border-vuno-error has-aria-invalid:[--vuno-accent:var(--color-vuno-error)] data-trailing:pe-0"
+  },
+  variants: {
+    groupOrientation: {
+      horizontal: { root: "not-last:not-first:rounded-none not-only:first:rounded-e-none not-only:last:rounded-s-none focus-within:z-1" },
+      vertical: { root: "not-last:not-first:rounded-none not-only:first:rounded-b-none not-only:last:rounded-t-none focus-within:z-1" }
+    },
+    radius: radiusByStep("root"),
+    size: {
+      xs: { root: "min-h-6 ps-2 pe-2 text-xs" },
+      sm: { root: "min-h-7 ps-2.5 pe-2.5 text-sm" },
+      md: { root: "min-h-8 ps-3 pe-3 text-sm" },
+      lg: { root: "min-h-9 ps-3.5 pe-3.5 text-base" },
+      xl: { root: "min-h-10 ps-4 pe-4 text-base" }
+    }
+  }
+});

package/dist/runtime/app/components/internal/ControlShell/ControlShell.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { computed } from "vue";
+import { resetControlGroup, useVunoControlGroup } from "#vuno/composables/internal/useVunoControlGroup";
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "VunoControlShell" });
+const props = defineProps({
+  radius: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const controlGroup = useVunoControlGroup();
+resetControlGroup();
+const size = computed(() => props.size ?? controlGroup.size.value ?? "md");
+const ui = useTheme(
+  "control",
+  () => props.ui,
+  () => ({ groupOrientation: controlGroup.orientation.value, radius: props.radius, size: size.value })
+);
+</script>
+
+<template>
+    <div
+        :class="ui.root"
+        :data-trailing="$slots.trailing ? '' : void 0"
+    >
+        <slot name="leading" />
+
+        <slot />
+
+        <slot name="trailing" />
+    </div>
+</template>

package/dist/runtime/app/components/internal/ControlShell/ControlShell.vue.d.ts

@@ -0,0 +1,41 @@
+import type { VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+/**
+ * La caja de un control: borde, fondo, foco, inválido y deshabilitado.
+ *
+ * Existe separada porque el input, el área de texto y el combobox necesitan
+ * exactamente la misma caja, y tres copias del mismo borde divergen en
+ * cuanto alguien toca una. Lo que va dentro lo pone quien la usa.
+ *
+ * No sabe nada del control que envuelve: el estado lo lee del DOM con
+ * `has-[]`, así que funciona igual con un `<input>`, un `<textarea>` o un
+ * `div` con `role="combobox"`, y no hay forma de que lo que se ve y lo que
+ * se anuncia dejen de coincidir.
+ */
+type Props = {
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
+    size?: VunoSize;
+    ui?: VunoUi<'control'>;
+};
+type __VLS_Slots = {
+    /** El control en sí. */
+    default?: () => unknown;
+    /** Delante del control: un icono, un prefijo. */
+    leading?: () => unknown;
+    /** Detrás: un botón de acción, una unidad, un indicador. */
+    trailing?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    radius: VunoRadius;
+    size: VunoSize;
+    ui: VunoUi<"control">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/internal/FieldShell/FieldShell.d.vue.ts

@@ -0,0 +1,23 @@
+import type { VunoSize } from '#vuno/types/base';
+import type { VunoFieldBase } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldBase, 'columns'>;
+type __VLS_Slots = {
+    default: (props: {
+        id?: string;
+        name?: string;
+        'aria-describedby'?: string;
+        'aria-invalid'?: boolean;
+        'aria-required'?: boolean;
+        required?: boolean;
+        size?: VunoSize;
+    }) => unknown;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/internal/FieldShell/FieldShell.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+import { useVunoControlGroup } from "#vuno/composables/internal/useVunoControlGroup";
+import { useForm } from "#vuno/composables/useForm";
+import FormField from "#vuno/components/FormField/FormField.vue";
+defineOptions({ name: "VunoFieldShell", inheritAttrs: false });
+const props = defineProps({
+  name: { type: String, required: false },
+  class: { type: String, required: false },
+  description: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  error: { type: String, required: false },
+  help: { type: String, required: false },
+  hint: { type: String, required: false },
+  label: { type: String, required: false },
+  orientation: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const attrs = useAttrs();
+const form = useForm({ optional: true });
+const controlGroup = useVunoControlGroup();
+const error = computed(() => form && props.name ? form.errorFor(props.name) : props.error);
+const size = computed(() => props.size ?? controlGroup.size.value ?? form?.size.value);
+const embedded = computed(() => typeof attrs.id === "string");
+function onBlur(event) {
+  if (!form || !props.name) return;
+  if (event.target?.getAttribute("aria-expanded") === "true") return;
+  form.setTouched(props.name);
+}
+</script>
+
+<template>
+    <slot
+        v-if="embedded"
+        v-bind="attrs"
+        :size="size"
+    />
+
+    <FormField
+        v-else
+        :class="props.class"
+        :description="props.description"
+        :error="error"
+        :help="props.help"
+        :hint="props.hint"
+        :label="props.label"
+        :name="props.name"
+        :orientation="props.orientation"
+        :required="props.required"
+        :size="size"
+        @blur.capture="onBlur"
+    >
+        <template #default="control">
+            <slot
+                v-bind="control"
+                :size="size"
+            />
+        </template>
+    </FormField>
+</template>

package/dist/runtime/app/components/internal/FieldShell/FieldShell.vue.d.ts

@@ -0,0 +1,23 @@
+import type { VunoSize } from '#vuno/types/base';
+import type { VunoFieldBase } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldBase, 'columns'>;
+type __VLS_Slots = {
+    default: (props: {
+        id?: string;
+        name?: string;
+        'aria-describedby'?: string;
+        'aria-invalid'?: boolean;
+        'aria-required'?: boolean;
+        required?: boolean;
+        size?: VunoSize;
+    }) => unknown;
+};
+declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/internal/Input/Input.d.vue.ts

@@ -0,0 +1,52 @@
+import type { VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Lo que va al final del campo: un botón de acción, una unidad. */
+    trailing?: () => unknown;
+};
+type Props = {
+    /** Nombre Iconify; se pinta dentro del campo, antes del texto. */
+    icon?: string;
+    /** La curvatura de la caja. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
+    size?: VunoSize;
+    /**
+     * Los tipos de texto, no los demás: `checkbox`, `radio` y `file`
+     * tienen su propio control porque no se pintan como una caja de
+     * texto ni llevan valor de cadena.
+     */
+    type?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
+    ui?: VunoUi<'control' | 'input'>;
+};
+type __VLS_ModelProps = {
+    /**
+         * `number` devuelve número y el resto cadena, que es lo que espera el
+         * estado del formulario: un campo numérico que guardara `'12'` pasaría la
+         * validación de tipo por los pelos y fallaría al comparar o al sumar.
+         * Vacío es `undefined` y no `0` ni `''`: no es un valor, es que no hay.
+         */
+    modelValue?: number | string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    inputRef: Readonly<import("vue").ShallowRef<HTMLInputElement | null>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
+}>, {
+    icon: string;
+    radius: VunoRadius;
+    size: VunoSize;
+    type: "date" | "email" | "number" | "password" | "search" | "tel" | "text" | "url";
+    ui: VunoUi<"control" | "input">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/internal/Input/Input.theme.d.ts

@@ -0,0 +1,30 @@
+export declare const inputTheme: Record<"input", {
+    /**
+     * El control de texto nativo, del que cuelgan `text`, `email`, `password`,
+     * `number` y `slug`. La caja la pone `baseControl`; aquí queda el `<input>`,
+     * que va transparente y sin contorno propio, y su icono.
+     */
+    readonly slots: {
+        readonly base: "w-full min-w-0 bg-transparent outline-none placeholder:text-vuno-subtle disabled:cursor-not-allowed";
+        readonly icon: "shrink-0 text-vuno-muted";
+    };
+    readonly variants: {
+        readonly size: {
+            readonly xs: {
+                readonly icon: "size-3.5";
+            };
+            readonly sm: {
+                readonly icon: "size-4";
+            };
+            readonly md: {
+                readonly icon: "size-4";
+            };
+            readonly lg: {
+                readonly icon: "size-5";
+            };
+            readonly xl: {
+                readonly icon: "size-5";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/components/internal/Input/Input.theme.js

@@ -0,0 +1,21 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const inputTheme = defineTheme("input", {
+  /**
+   * El control de texto nativo, del que cuelgan `text`, `email`, `password`,
+   * `number` y `slug`. La caja la pone `baseControl`; aquí queda el `<input>`,
+   * que va transparente y sin contorno propio, y su icono.
+   */
+  slots: {
+    base: "w-full min-w-0 bg-transparent outline-none placeholder:text-vuno-subtle disabled:cursor-not-allowed",
+    icon: "shrink-0 text-vuno-muted"
+  },
+  variants: {
+    size: {
+      xs: { icon: "size-3.5" },
+      sm: { icon: "size-4" },
+      md: { icon: "size-4" },
+      lg: { icon: "size-5" },
+      xl: { icon: "size-5" }
+    }
+  }
+});

package/dist/runtime/app/components/internal/Input/Input.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { computed, useTemplateRef } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import Icon from "#vuno/components/Icon/Icon.vue";
+import ControlShell from "#vuno/components/internal/ControlShell/ControlShell.vue";
+defineOptions({ name: "VunoInput", inheritAttrs: false });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  icon: { type: String, required: false, default: void 0 },
+  radius: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: "md" },
+  type: { type: String, required: false, default: "text" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const ui = useTheme(
+  "input",
+  () => props.ui,
+  () => ({ size: props.size })
+);
+const inputRef = useTemplateRef("input");
+const isNumber = computed(() => props.type === "number");
+function onInput(event) {
+  const target = event.target;
+  if (!isNumber.value) {
+    model.value = target.value;
+    return;
+  }
+  model.value = target.value === "" ? void 0 : target.valueAsNumber;
+}
+defineExpose({ inputRef });
+</script>
+
+<template>
+    <ControlShell
+        :radius="props.radius"
+        :size="props.size"
+        :ui="props.ui"
+    >
+        <template
+            v-if="props.icon"
+            #leading
+        >
+            <Icon
+                :class="ui.icon"
+                :name="props.icon"
+            />
+        </template>
+
+        <input
+            ref="input"
+            v-bind="$attrs"
+            :class="ui.base"
+            :type="props.type"
+            :value="model"
+            @input="onInput"
+        />
+
+        <template
+            v-if="$slots.trailing"
+            #trailing
+        >
+            <slot name="trailing" />
+        </template>
+    </ControlShell>
+</template>