@groupteknology/vuno 2.0.0 → 4.0.0

package/dist/runtime/app/components/TextArea/TextArea.theme.js

@@ -0,0 +1,142 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const textAreaTheme = defineTheme("textArea", {
+  compoundVariants: [
+    /*
+     * En *fluid* el contorno de validación pasa al envoltorio, porque el
+     * mensaje va dentro de él, y aparece la línea que los separa.
+     */
+    {
+      class: {
+        divider: "block",
+        message: "border-b-0",
+        /* 2 px de borde en vez de contorno: en un diálogo el contorno del envoltorio se recorta. */
+        textarea: "mt-[30px] resize-none border-b-0 px-[14px] outline-none",
+        wrapper: "not-focus-within:border-2 not-focus-within:border-(--vuno-support-error)"
+      },
+      fluid: "true",
+      invalid: "true"
+    },
+    { class: { divider: "block", message: "border-b border-(--vuno-border-strong-01) text-(--vuno-text-primary)", textarea: "resize-none border-b-0 pe-4" }, fluid: "true", warn: "true" }
+  ],
+  slots: {
+    /**
+     * `vuno--text-area__counter-alert`: la región viva del contador. Siempre
+     * en el DOM y siempre oculta; si apareciera y desapareciera, el lector
+     * de pantalla no llegaría a leer lo que se le pone dentro.
+     */
+    announcer: "sr-only",
+    /**
+     * `vuno--text-area__label-counter`. Es un `vuno--label` más, así que
+     * comparte tipografía y margen con el rótulo. Va `aria-hidden`: lo que
+     * se anuncia es el límite y los avisos, no un número que cambia en cada
+     * tecla.
+     */
+    counter: "mb-2 shrink-0 text-xs leading-4 font-normal tracking-[0.16px] whitespace-nowrap text-(--vuno-text-secondary)",
+    /** El límite, solo para lectores de pantalla. */
+    counterDescription: "sr-only",
+    /** `vuno--text-area__inner-wrapper--decorator`, para el `AILabel`. */
+    decorator: "absolute top-3 end-4 flex items-center",
+    /** `vuno--text-area__divider`, que solo existe en *fluid* y con mensaje. */
+    divider: "mx-4 hidden border-t border-(--vuno-border-subtle-01)",
+    /**
+     * `vuno--form__helper-text`, tipografía `helper-text-01`.
+     *
+     * El selector de ancestro reproduce `fieldset[disabled]
+     * .vuno--form__helper-text`: dentro de un `FormGroup` deshabilitado la
+     * ayuda se apaga aunque el campo no declare `disabled` por su cuenta.
+     */
+    helper: "z-0 mt-1 w-full text-xs leading-4 tracking-[0.16px] text-(--vuno-text-helper) [fieldset:disabled_&]:text-(--vuno-text-disabled)",
+    label: "",
+    /** `vuno--text-area__label-wrapper`: rótulo y contador en la misma línea. */
+    labelWrapper: "relative flex w-full justify-between",
+    /** `vuno--form-requirement`; el color lo pone el estado. */
+    message: "mt-1 w-full text-xs leading-4 tracking-[0.16px] break-words text-(--vuno-text-primary)",
+    /** `vuno--form-item`: la columna que agrupa rótulo, campo y mensaje. */
+    root: "relative flex w-full flex-auto flex-col items-start",
+    /**
+     * `vuno--text-area__invalid-icon`. En el área de texto no se centra: se
+     * alinea con la primera línea, a `$spacing-04` del borde superior.
+     */
+    stateIcon: "pointer-events-none absolute top-3 end-4 size-4",
+    /**
+     * `vuno--text-area`, tipografía `body-01`.
+     *
+     * El interletrado es la única medida que no se copia. Los +0.16 px del
+     * escalón de 14 px están calculados para IBM Plex Sans; en Inter, y en
+     * un control que muestra párrafos, ese añadido se acumula línea a línea
+     * y el bloque deja de leerse con el ritmo de 20 px.
+     */
+    textarea: "block max-h-[var(--vuno-text-area-max-height,none)] min-h-10 w-full min-w-40 resize-y rounded-none border-0 border-b border-(--vuno-border-strong-01) bg-(--vuno-field-01) px-4 py-[11px] text-sm leading-5 tracking-normal text-(--vuno-text-primary) caret-(--vuno-text-primary) outline-none transition-[background-color,outline] duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) placeholder:text-(--vuno-text-placeholder) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) disabled:cursor-not-allowed disabled:resize-none disabled:border-transparent disabled:bg-(--vuno-field-01) disabled:text-(--vuno-text-disabled) disabled:outline-none disabled:[-webkit-text-fill-color:var(--vuno-text-disabled)] disabled:placeholder:text-(--vuno-text-disabled) motion-reduce:transition-none [[data-decorator]_&]:pe-10",
+    /** `vuno--text-area__wrapper`: el ancla de lo que se superpone. */
+    wrapper: "relative flex w-full max-w-full"
+  },
+  variants: {
+    /**
+     * `vuno--text-area__wrapper--cols`: con `cols` el campo deja de ocupar
+     * el ancho disponible.
+     *
+     * Solo el ancho. `cols` fija columnas, no filas, y el tirador sigue en
+     * pie: la altura la decide quien escribe. La única regla que lo apaga
+     * es `:disabled`.
+     */
+    cols: {
+      false: {},
+      true: { root: "w-fit", textarea: "w-auto", wrapper: "w-auto" }
+    },
+    disabled: {
+      false: {},
+      true: { counter: "text-(--vuno-text-disabled)", helper: "text-(--vuno-text-disabled)" }
+    },
+    /*
+     * *Fluid*: el rótulo y el contador entran en la caja en posición
+     * absoluta y el campo reserva 32 px arriba para ellos.
+     */
+    fluid: {
+      false: {},
+      true: {
+        counter: "absolute top-[13px] end-4 z-1 mb-0 flex h-4 items-center",
+        label: "absolute top-[13px] start-4 z-1 mb-0 flex h-4 items-center overflow-x-auto whitespace-nowrap",
+        message: "relative mt-0 max-h-50 overflow-visible bg-(--vuno-field-01) px-4 py-2 pe-10",
+        /* El icono se alinea con la primera línea, que en *fluid* empieza 32 px más abajo. */
+        stateIcon: "top-2",
+        /*
+         * El hueco del rótulo lo abre un margen y no un relleno: el
+         * relleno lo atravesaría el texto al desplazarse, y el rótulo
+         * quedaría tachado por las líneas que pasan por debajo.
+         */
+        textarea: "mt-8 min-h-16 px-4 pt-0 pb-[13px] focus:outline-none",
+        wrapper: "flex-col bg-(--vuno-field-01) focus-within:outline-solid focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-(--vuno-focus)"
+      }
+    },
+    /*
+     * Vuno no reserva hueco para el icono de validación en el área de
+     * texto, y el icono acaba encima del final de la primera línea. Aquí sí
+     * se reserva, como hace el propio sistema de origen en el campo de una línea.
+     */
+    invalid: {
+      false: {},
+      true: {
+        /*
+         * Cuando coinciden icono y decorador, el que se aparta es el
+         * **decorador**: se va a 40 px y el icono se queda en sus 16.
+         * Es lo contrario del campo de una línea, donde el que se mueve
+         * es el icono, y se reproduce tal cual para que un formulario
+         * que mezcle los dos controles alinee sus esquinas.
+         */
+        decorator: "end-10",
+        message: "text-(--vuno-text-error)",
+        stateIcon: "text-(--vuno-support-error)",
+        textarea: "pe-10 outline-solid outline-2 -outline-offset-2 outline-(--vuno-support-error) [[data-decorator]_&]:pe-16"
+      }
+    },
+    readOnly: {
+      false: {},
+      true: { textarea: "border-(--vuno-border-subtle-00) bg-transparent" }
+    },
+    warn: {
+      false: {},
+      /** Mismo reparto que en inválido: se aparta el decorador, no el icono. */
+      true: { decorator: "end-10", stateIcon: "text-(--vuno-support-warning)", textarea: "pe-10 [[data-decorator]_&]:pe-16" }
+    }
+  }
+});

package/dist/runtime/app/components/TextArea/TextArea.types.d.ts

@@ -0,0 +1,45 @@
+import type { ControlUi } from '#vuno/types/control';
+/**
+ * Qué cuenta el contador. Vuno admite caracteres o palabras, y la diferencia
+ * no es cosmética: en caracteres el límite lo impone `maxlength` y el navegador
+ * corta solo; en palabras hay que interceptar el espacio, el Intro y el pegado,
+ * porque ningún atributo nativo sabe contar palabras.
+ */
+export type TextAreaCounterMode = 'character' | 'word';
+export type TextAreaSlot = 'announcer' | 'counter' | 'counterDescription' | 'decorator' | 'divider' | 'helper' | 'label' | 'labelWrapper' | 'message' | 'root' | 'stateIcon' | 'textarea' | 'wrapper';
+export type TextAreaProps = {
+    id?: string;
+    name?: string;
+    /** Ancho en caracteres. Con él el campo deja de estirarse y de poder redimensionarse. */
+    cols?: number;
+    counterMode?: TextAreaCounterMode;
+    disabled?: boolean;
+    /** El contador de Vuno. Necesita `maxCount` para tener un límite que mostrar. */
+    enableCounter?: boolean;
+    /**
+     * El estilo *fluid* de Vuno: el rótulo entra en la caja, la ayuda
+     * desaparece y el mensaje de validación se pinta dentro del campo bajo una
+     * línea divisoria. Es la prop equivalente a la de `TextInput`.
+     */
+    fluid?: boolean;
+    helperText?: string;
+    hideLabel?: boolean;
+    invalid?: boolean;
+    invalidText?: string;
+    labelText: string;
+    maxCount?: number;
+    /**
+     * Tope de altura, expresado en líneas. Extensión de Vuno: acota hasta dónde
+     * puede estirar el campo quien arrastra el tirador, que en Vuno no tiene
+     * máximo.
+     */
+    maxrows?: number;
+    placeholder?: string;
+    readonly?: boolean;
+    required?: boolean;
+    /** Altura inicial en líneas. Vuno usa cuatro. */
+    rows?: number;
+    ui?: ControlUi<TextAreaSlot>;
+    warn?: boolean;
+    warnText?: string;
+};

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

@@ -0,0 +1,230 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from "vue";
+import { useIcons, useTheme } from "#vuno/composables/useTheme";
+import FormLabel from "#vuno/components/FormLabel/FormLabel.vue";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "TextArea", inheritAttrs: false });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  id: { type: String, required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  cols: { type: Number, required: false, default: void 0 },
+  counterMode: { type: String, required: false, default: "character" },
+  disabled: { type: Boolean, required: false, default: false },
+  enableCounter: { type: Boolean, required: false, default: false },
+  fluid: { type: Boolean, required: false, default: false },
+  helperText: { type: String, required: false, default: void 0 },
+  hideLabel: { type: Boolean, required: false, default: false },
+  invalid: { type: Boolean, required: false, default: false },
+  invalidText: { type: String, required: false, default: void 0 },
+  labelText: { type: String, required: true },
+  maxCount: { type: Number, required: false, default: void 0 },
+  maxrows: { type: Number, required: false, default: void 0 },
+  placeholder: { type: String, required: false, default: void 0 },
+  readonly: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  rows: { type: Number, required: false, default: 4 },
+  ui: { type: Object, required: false, default: void 0 },
+  warn: { type: Boolean, required: false, default: false },
+  warnText: { type: String, required: false, default: void 0 }
+});
+defineSlots();
+const icons = useIcons();
+const uid = useId();
+const announced = ref("");
+let timer;
+const controlId = computed(() => props.id ?? uid);
+const counterDescriptionId = computed(() => `${controlId.value}-counter-desc`);
+const errorId = computed(() => `${controlId.value}-error-msg`);
+const helperId = computed(() => `${controlId.value}-helper-text`);
+const warnId = computed(() => `${controlId.value}-warn-msg`);
+const disabled = computed(() => !props.readonly && props.disabled);
+const invalid = computed(() => !props.readonly && !disabled.value && props.invalid);
+const warn = computed(() => !props.readonly && !invalid.value && !disabled.value && props.warn);
+const ui = useTheme(
+  "textArea",
+  () => props.ui,
+  () => ({
+    cols: String(props.cols !== void 0),
+    disabled: String(disabled.value),
+    fluid: String(props.fluid),
+    invalid: String(invalid.value),
+    readOnly: String(props.readonly),
+    warn: String(warn.value)
+  })
+);
+const message = computed(() => invalid.value ? props.invalidText : warn.value ? props.warnText : void 0);
+const messageId = computed(() => invalid.value ? errorId.value : warnId.value);
+const showHelper = computed(() => Boolean(props.helperText) && !message.value && !props.fluid);
+const stateIcon = computed(() => invalid.value ? icons.value.notifyError : warn.value ? icons.value.notifyWarning : void 0);
+const isWords = computed(() => props.counterMode === "word");
+const showCounter = computed(() => props.enableCounter && props.maxCount !== void 0);
+const value = computed(() => model.value ?? "");
+const count = computed(() => isWords.value ? words(value.value).length : value.value.length);
+const counter = computed(() => `${count.value}/${props.maxCount}`);
+const counterDescription = computed(() => `L\xEDmite de ${props.maxCount} ${isWords.value ? "palabras" : "caracteres"}`);
+const maxlength = computed(() => showCounter.value && !isWords.value ? props.maxCount : void 0);
+const describedBy = computed(() => {
+  const ids = [invalid.value ? void 0 : warn.value && message.value ? warnId.value : showHelper.value ? helperId.value : void 0, showCounter.value ? counterDescriptionId.value : void 0].filter(Boolean);
+  return ids.length ? ids.join(" ") : void 0;
+});
+const announcement = computed(() => {
+  if (!showCounter.value || props.maxCount === void 0) return "";
+  const remaining = props.maxCount - count.value;
+  if (remaining <= 0) return isWords.value ? "Se alcanz\xF3 el m\xE1ximo de palabras." : "Se alcanz\xF3 el m\xE1ximo de caracteres.";
+  if (remaining > 10) return "";
+  if (remaining === 1) return isWords.value ? "Queda 1 palabra." : "Queda 1 car\xE1cter.";
+  return isWords.value ? `Quedan ${remaining} palabras.` : `Quedan ${remaining} caracteres.`;
+});
+const sizing = computed(() => props.maxrows === void 0 ? void 0 : { "--vuno-text-area-max-height": `calc(${props.maxrows} * 1lh + 22px)` });
+function announce(next) {
+  clearTimeout(timer);
+  announced.value = "";
+  if (!next) return;
+  timer = setTimeout(
+    () => {
+      announced.value = next;
+    },
+    isWords.value ? 2e3 : 1e3
+  );
+}
+function onInput(event) {
+  model.value = event.target.value;
+}
+function onKeydown(event) {
+  if (!showCounter.value || !isWords.value || props.maxCount === void 0) return;
+  if (count.value < props.maxCount) return;
+  if (event.key !== " " && event.key !== "Enter") return;
+  event.preventDefault();
+}
+function words(text) {
+  return text.match(/\p{L}+/gu) ?? [];
+}
+function onPaste(event) {
+  if (!showCounter.value || !isWords.value || props.maxCount === void 0) return;
+  const pasted = words(event.clipboardData?.getData("text") ?? "");
+  const existing = words(value.value);
+  if (existing.length + pasted.length <= props.maxCount) return;
+  event.preventDefault();
+  model.value = existing.concat(pasted).slice(0, props.maxCount).join(" ");
+}
+watch(announcement, announce);
+onMounted(() => announce(announcement.value));
+onBeforeUnmount(() => clearTimeout(timer));
+</script>
+
+<template>
+    <div :class="ui.root">
+        <div :class="ui.labelWrapper">
+            <FormLabel
+                :disabled="disabled"
+                :for="controlId"
+                :hideLabel="props.hideLabel"
+                :invalid="invalid"
+                :ui="{ label: ui.label }"
+            >
+                {{ props.labelText }}
+            </FormLabel>
+
+            <div
+                v-if="showCounter"
+                aria-hidden="true"
+                :class="ui.counter"
+            >
+                {{ counter }}
+            </div>
+        </div>
+
+        <span
+            v-if="showCounter"
+            :id="counterDescriptionId"
+            :class="ui.counterDescription"
+        >
+            {{ counterDescription }}
+        </span>
+
+        <div
+            :class="ui.wrapper"
+            :data-decorator="$slots.decorator ? '' : void 0"
+            :data-invalid="invalid || void 0"
+        >
+            <Icon
+                v-if="stateIcon"
+                :class="ui.stateIcon"
+                :name="stateIcon"
+            />
+
+            <textarea
+                v-bind="$attrs"
+                :id="controlId"
+                :aria-describedby="describedBy"
+                :aria-errormessage="invalid && message ? errorId : void 0"
+                :aria-invalid="invalid || void 0"
+                :aria-readonly="props.readonly || void 0"
+                :class="ui.textarea"
+                :cols="props.cols"
+                :data-invalid="invalid || void 0"
+                :disabled="disabled"
+                :maxlength="maxlength"
+                :name="props.name"
+                :placeholder="props.placeholder"
+                :readonly="props.readonly"
+                :required="props.required"
+                :rows="props.rows"
+                :style="sizing"
+                :value="model"
+                @input="onInput"
+                @keydown="onKeydown"
+                @paste="onPaste"
+            />
+
+            <div
+                v-if="$slots.decorator"
+                :class="ui.decorator"
+            >
+                <slot name="decorator" />
+            </div>
+
+            <span
+                aria-atomic="true"
+                aria-live="assertive"
+                :class="ui.announcer"
+                role="alert"
+            >
+                {{ announced }}
+            </span>
+
+            <template v-if="props.fluid">
+                <hr :class="ui.divider" />
+
+                <p
+                    v-if="message"
+                    :id="messageId"
+                    :class="ui.message"
+                    role="alert"
+                >
+                    {{ message }}
+                </p>
+            </template>
+        </div>
+
+        <template v-if="!props.fluid">
+            <p
+                v-if="message"
+                :id="messageId"
+                :class="ui.message"
+                role="alert"
+            >
+                {{ message }}
+            </p>
+
+            <p
+                v-else-if="showHelper"
+                :id="helperId"
+                :class="ui.helper"
+            >
+                {{ props.helperText }}
+            </p>
+        </template>
+    </div>
+</template>

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

@@ -0,0 +1,44 @@
+import type { TextAreaProps } from './TextArea.types.js';
+type __VLS_Props = TextAreaProps;
+type __VLS_Slots = {
+    /** El `decorator` de Vuno: un `AILabel` dentro del campo, arriba a la derecha. */
+    decorator?: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    invalid: boolean;
+    warn: boolean;
+    placeholder: string;
+    name: string;
+    fluid: boolean;
+    hideLabel: boolean;
+    helperText: string;
+    readonly: boolean;
+    cols: number;
+    id: string;
+    ui: import("../../types/control.js").ControlUi<import("./TextArea.types.js").TextAreaSlot>;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    rows: number;
+    counterMode: import("./TextArea.types.js").TextAreaCounterMode;
+    enableCounter: boolean;
+    maxCount: number;
+    maxrows: number;
+}, {}, {}, {}, 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/TextInput/TextInput.d.vue.ts

@@ -0,0 +1,56 @@
+import type { TextInputProps } from './TextInput.types.js';
+type __VLS_Props = TextInputProps;
+type __VLS_Slots = {
+    /**
+     * El `decorator` de Vuno: un `AILabel` dentro del campo. Se coloca al
+     * final, en el sitio del icono de estado, y los dos se apartan cuando
+     * coinciden.
+     */
+    decorator?: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("./TextInput.types.js").TextInputSize;
+    inline: boolean;
+    icon: string;
+    invalid: boolean;
+    warn: boolean;
+    type: import("../../types/input.js").TextInputType;
+    placeholder: string;
+    name: string;
+    fluid: boolean;
+    hideLabel: boolean;
+    helperText: string;
+    readonly: boolean;
+    passwordToggle: boolean;
+    id: string;
+    ui: import("../../types/control.js").ControlUi<import("./TextInput.types.js").TextInputSlot>;
+    required: boolean;
+    invalidText: string;
+    warnText: string;
+    max: string;
+    autocomplete: string;
+    min: string;
+    autofocus: boolean;
+    enableCounter: boolean;
+    maxCount: number;
+    maxlength: number;
+    hidePasswordLabel: string;
+    showPasswordLabel: string;
+}, {}, {}, {}, 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;
+    };
+};