@groupteknology/vuno 1.0.0 → 2.0.0

package/dist/runtime/app/components/FieldSelect/internal/Select/Select.theme.js

@@ -0,0 +1,49 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const selectTheme = defineTheme("select", {
+  slots: {
+    /*
+     * La lista es a la vez la caja y lo que se desplaza: ya no hay un
+     * viewport dentro, así que el alto máximo y el `overflow` van en el
+     * mismo elemento y no hay dos cajas que sumar.
+     *
+     * Las dos medidas las publica el componente al colocarla:
+     * `--vuno-select-width` es el ancho del campo, para que la lista
+     * mida lo mismo, y `--vuno-select-available-height` es el hueco que
+     * queda hasta el borde —la ventana, o el diálogo si lo hay—. El
+     * respaldo de las dos importa: se leen antes del primer cálculo, y
+     * sin él la lista aparecería sin ancho durante un fotograma.
+     */
+    content: "z-50 max-h-[min(18rem,var(--vuno-select-available-height,18rem))] w-(--vuno-select-width,16rem) overflow-y-auto rounded-sm border border-vuno-border bg-vuno-surface-1 p-1 shadow-lg",
+    empty: "px-2 py-3 text-center text-sm text-vuno-muted",
+    /*
+     * El control y su disparador. Estaban escritos en la plantilla, de
+     * modo que el color del texto de sugerencia y el relleno del campo
+     * donde se teclea no se podían tocar desde el proyecto.
+     *
+     * Es casi lo mismo que `input.base` —solo añade el relleno
+     * vertical—, y esa cercanía es a propósito: un combobox tiene que
+     * parecerse a un input hasta en el detalle. Si divergen, se unifican.
+     */
+    input: "w-full min-w-0 bg-transparent py-1 outline-none placeholder:text-vuno-subtle disabled:cursor-not-allowed",
+    item: "flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-vuno-body outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-vuno-surface-2 data-highlighted:text-vuno-strong",
+    itemIcon: "size-4",
+    itemIndicator: "shrink-0 text-vuno-primary",
+    trigger: "ms-auto inline-flex shrink-0 items-center self-stretch text-vuno-muted transition-colors hover:text-vuno-body disabled:cursor-not-allowed",
+    triggerIcon: "size-4"
+  },
+  /*
+   * La opción y el margen del disparador siguen al tamaño del campo: con
+   * un texto fijo, un select `xs` abriría una lista con la letra más
+   * grande que su propio disparador; con un margen fijo, la flecha no
+   * conservaría la misma proporción respecto a la caja.
+   */
+  variants: {
+    size: {
+      xs: { item: "text-xs", trigger: "me-2" },
+      sm: { item: "text-sm", trigger: "me-2.5" },
+      md: { item: "text-sm", trigger: "me-3" },
+      lg: { item: "text-base", trigger: "me-3.5" },
+      xl: { item: "text-base", trigger: "me-4" }
+    }
+  }
+});

package/dist/runtime/app/components/FieldSelect/internal/Select/Select.vue

@@ -0,0 +1,196 @@
+<script setup>
+import { size as sizeMiddleware } from "@floating-ui/dom";
+import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, useId, useTemplateRef, watch } from "vue";
+import { useVunoAnchor } from "#vuno/composables/internal/useVunoAnchor";
+import { useVunoPortal } from "#vuno/composables/internal/useVunoPortal";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import { toOptionKey } from "#vuno/components/FieldSelect/internal/Select/option";
+import { useVunoSelectState } from "#vuno/components/FieldSelect/internal/Select/useVunoSelectState";
+import Icon from "#vuno/components/Icon/Icon.vue";
+import ControlShell from "#vuno/components/internal/ControlShell/ControlShell.vue";
+defineOptions({ name: "VunoSelect", inheritAttrs: false });
+const props = defineProps({
+  name: { default: void 0, type: String },
+  disabled: Boolean,
+  items: { required: true, type: Array },
+  modelValue: {
+    default: void 0,
+    type: [String, Number, Boolean, Array, Object]
+  },
+  multiple: Boolean,
+  placeholder: { default: void 0, type: String },
+  portal: { default: void 0, type: [String, Boolean] },
+  radius: { default: void 0, type: String },
+  required: Boolean,
+  searchable: Boolean,
+  size: { default: void 0, type: String },
+  ui: { default: void 0, type: Object }
+});
+const emit = defineEmits(["update:modelValue"]);
+const model = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value)
+});
+const icons = useIcons();
+const messages = useMessages();
+const portalTarget = useVunoPortal(() => props.portal);
+const uid = useId();
+const listId = `${uid}-list`;
+const boundary = shallowRef(void 0);
+const control = useTemplateRef("control");
+const input = useTemplateRef("input");
+const list = useTemplateRef("list");
+const mounted = shallowRef(false);
+const fieldSize = computed(() => props.size ?? "md");
+const ui = useTheme(
+  "select",
+  () => props.ui,
+  () => ({ size: fieldSize.value })
+);
+const optionId = (key) => `${uid}-${key.replace(/[^\w-]/g, "_")}`;
+const { onInput, onKeydown, activeKey, choose, close, highlighted, isSelected, open, openList, text, toggle, visibleItems } = useVunoSelectState({
+  model,
+  optionId,
+  disabled: () => props.disabled,
+  input: () => input.value ?? void 0,
+  items: () => props.items,
+  list: () => list.value ?? void 0,
+  multiple: () => props.multiple,
+  searchable: () => props.searchable
+});
+const { anchor, release } = useVunoAnchor({
+  boundary: () => boundary.value,
+  middleware: () => [
+    sizeMiddleware({
+      boundary: boundary.value,
+      padding: 8,
+      apply: ({ availableHeight, elements, rects }) => {
+        elements.floating.style.setProperty("--vuno-select-width", `${rects.reference.width}px`);
+        elements.floating.style.setProperty("--vuno-select-available-height", `${availableHeight}px`);
+      }
+    })
+  ]
+});
+function onPointerDownOutside(event) {
+  const target = event.target;
+  if (!target) return;
+  const inControl = control.value?.$el?.contains(target);
+  if (inControl || list.value?.contains(target)) return;
+  close();
+}
+function place() {
+  anchor(control.value?.$el, list.value ?? void 0);
+}
+watch(open, (isOpen) => {
+  if (!isOpen) {
+    release();
+    document.removeEventListener("pointerdown", onPointerDownOutside, true);
+    return;
+  }
+  boundary.value = control.value?.$el?.closest("dialog") ?? void 0;
+  void nextTick(() => {
+    place();
+    document.addEventListener("pointerdown", onPointerDownOutside, true);
+  });
+});
+onMounted(() => mounted.value = true);
+onBeforeUnmount(() => {
+  release();
+  document.removeEventListener("pointerdown", onPointerDownOutside, true);
+});
+</script>
+
+<template>
+    <ControlShell
+        ref="control"
+        :radius="props.radius"
+        :size="fieldSize"
+        :ui="props.ui"
+    >
+        <input
+            v-bind="$attrs"
+            ref="input"
+            :aria-activedescendant="open && activeKey ? optionId(activeKey) : void 0"
+            aria-autocomplete="list"
+            :aria-controls="listId"
+            :aria-expanded="open"
+            :aria-required="props.required || void 0"
+            autocomplete="off"
+            :class="[ui.input, { 'cursor-default': !props.searchable }]"
+            :disabled="props.disabled"
+            :name="props.name"
+            :placeholder="props.placeholder ?? messages.selectPlaceholder"
+            :readonly="!props.searchable"
+            role="combobox"
+            :value="text"
+            @input="onInput"
+            @keydown="onKeydown"
+            @pointerdown="!props.searchable && open ? close() : openList()"
+        />
+
+        <template #trailing>
+            <button
+                :aria-controls="listId"
+                :aria-expanded="open"
+                :aria-label="messages.selectToggle"
+                :class="ui.trigger"
+                :disabled="props.disabled"
+                tabindex="-1"
+                type="button"
+                @click="toggle"
+            >
+                <Icon
+                    :class="ui.triggerIcon"
+                    :name="icons.selectOpen"
+                />
+            </button>
+        </template>
+    </ControlShell>
+
+    <Teleport
+        v-if="mounted"
+        :to="portalTarget"
+    >
+        <ul
+            v-if="open"
+            :id="listId"
+            ref="list"
+            :class="ui.content"
+            role="listbox"
+            style="position: fixed; top: 0; left: 0"
+        >
+            <li
+                v-if="visibleItems.length === 0"
+                :class="ui.empty"
+            >
+                {{ messages.noMatches }}
+            </li>
+
+            <li
+                v-for="(item, index) in visibleItems"
+                :id="optionId(toOptionKey(item.value))"
+                :key="toOptionKey(item.value)"
+                :aria-disabled="item.disabled || void 0"
+                :aria-selected="isSelected(item)"
+                :class="ui.item"
+                :data-disabled="item.disabled || void 0"
+                :data-highlighted="index === highlighted || void 0"
+                role="option"
+                @click="choose(item)"
+                @pointermove="item.disabled ? void 0 : highlighted = index"
+            >
+                <span class="truncate">{{ item.label }}</span>
+
+                <span
+                    v-if="isSelected(item)"
+                    :class="ui.itemIndicator"
+                >
+                    <Icon
+                        :class="ui.itemIcon"
+                        :name="icons.selectSelected"
+                    />
+                </span>
+            </li>
+        </ul>
+    </Teleport>
+</template>

package/dist/runtime/app/components/FieldSelect/internal/Select/Select.vue.d.ts

@@ -0,0 +1,97 @@
+import { type PropType } from 'vue';
+import type { VunoPortalTarget, VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoFieldOption, VunoFieldOptionValue } from '#vuno/types/field';
+import type { VunoUi } from '#vuno/types/slots';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    disabled: BooleanConstructor;
+    items: {
+        required: true;
+        type: PropType<VunoFieldOption[]>;
+    };
+    modelValue: {
+        default: undefined;
+        type: PropType<undefined | VunoFieldOptionValue | VunoFieldOptionValue[]>;
+    };
+    multiple: BooleanConstructor;
+    placeholder: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    portal: {
+        default: undefined;
+        type: PropType<VunoPortalTarget>;
+    };
+    radius: {
+        default: undefined;
+        type: PropType<VunoRadius>;
+    };
+    required: BooleanConstructor;
+    searchable: BooleanConstructor;
+    size: {
+        default: undefined;
+        type: PropType<VunoSize>;
+    };
+    ui: {
+        default: undefined;
+        type: PropType<VunoUi<"control" | "select">>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: VunoFieldOptionValue | VunoFieldOptionValue[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    disabled: BooleanConstructor;
+    items: {
+        required: true;
+        type: PropType<VunoFieldOption[]>;
+    };
+    modelValue: {
+        default: undefined;
+        type: PropType<undefined | VunoFieldOptionValue | VunoFieldOptionValue[]>;
+    };
+    multiple: BooleanConstructor;
+    placeholder: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    portal: {
+        default: undefined;
+        type: PropType<VunoPortalTarget>;
+    };
+    radius: {
+        default: undefined;
+        type: PropType<VunoRadius>;
+    };
+    required: BooleanConstructor;
+    searchable: BooleanConstructor;
+    size: {
+        default: undefined;
+        type: PropType<VunoSize>;
+    };
+    ui: {
+        default: undefined;
+        type: PropType<VunoUi<"control" | "select">>;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: VunoFieldOptionValue | VunoFieldOptionValue[] | undefined) => any) | undefined;
+}>, {
+    radius: VunoRadius;
+    size: VunoSize;
+    name: string;
+    required: boolean;
+    ui: Partial<Record<"root" | ("input" | "item" | "content" | "empty" | "itemIcon" | "itemIndicator" | "trigger" | "triggerIcon"), string | string[] | undefined>>;
+    disabled: boolean;
+    modelValue: VunoFieldOptionValue | VunoFieldOptionValue[] | undefined;
+    placeholder: string;
+    multiple: boolean;
+    portal: VunoPortalTarget;
+    searchable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FieldSelect/internal/Select/option.d.ts

@@ -0,0 +1,25 @@
+import type { VunoFieldOptionValue } from '#vuno/types/field';
+/**
+ * Clave estable con la que un valor de opción viaja por dentro del combobox.
+ *
+ * vuno admite `string | number | boolean | bigint | object | null`, incluida la
+ * cadena vacía, en sus opciones. Los valores entran como una clave interna no
+ * vacía y se devuelven tal cual estaban al salir.
+ *
+ * La clave lleva el tipo delante porque sin él `1` y `'1'`, o `true` y
+ * `'true'`, compartirían clave: elegir una opción seleccionaría la otra, y no
+ * en todas las listas hay las dos como para que alguien lo note.
+ *
+ * `null` se nombra aparte porque su `typeof` es `'object'`, que no lo
+ * distingue de nada.
+ */
+export declare function toOptionKey(value: VunoFieldOptionValue): string;
+/**
+ * El texto de un valor a partir de su clave, para cuando no hay etiqueta.
+ *
+ * Pasa con un valor que ya no está en la lista —un estado retirado del
+ * catálogo, un rol que se borró—: el modelo lo conserva y ninguna opción lo
+ * nombra. Enseñar el valor crudo es feo a propósito; dejar el campo en blanco
+ * sería peor, porque parecería vacío teniendo valor.
+ */
+export declare function fromOptionKey(key: string): string;

package/dist/runtime/app/components/FieldSelect/internal/Select/option.js

@@ -0,0 +1,6 @@
+export function toOptionKey(value) {
+  return `${value === null ? "null" : typeof value}:${String(value)}`;
+}
+export function fromOptionKey(key) {
+  return key.slice(key.indexOf(":") + 1);
+}

package/dist/runtime/app/components/FieldSelect/internal/Select/useVunoSelectState.d.ts

@@ -0,0 +1,30 @@
+import { type Ref } from 'vue';
+import type { VunoFieldOption, VunoFieldOptionValue } from '#vuno/types/field';
+type SelectModel = undefined | VunoFieldOptionValue | VunoFieldOptionValue[];
+type VunoSelectStateOptions = {
+    model: Ref<SelectModel>;
+    disabled: () => boolean;
+    input: () => HTMLInputElement | undefined;
+    items: () => VunoFieldOption[];
+    list: () => HTMLElement | undefined;
+    multiple: () => boolean;
+    optionId: (key: string) => string;
+    searchable: () => boolean;
+};
+/** Estado e interacción del combobox, independiente de su disposición y portal. */
+export declare function useVunoSelectState(options: VunoSelectStateOptions): {
+    onInput: (event: Event) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+    activeKey: import("vue").ComputedRef<string | undefined>;
+    choose: (item: VunoFieldOption) => void;
+    close: (refocus?: boolean) => void;
+    highlighted: Ref<number, number>;
+    isSelected: (item: VunoFieldOption) => boolean;
+    open: Ref<boolean, boolean>;
+    openList: (edge?: "first" | "last") => void;
+    query: Ref<string, string>;
+    text: import("vue").ComputedRef<string>;
+    toggle: () => void;
+    visibleItems: import("vue").ComputedRef<VunoFieldOption[]>;
+};
+export {};

package/dist/runtime/app/components/FieldSelect/internal/Select/useVunoSelectState.js

@@ -0,0 +1,142 @@
+import { computed, nextTick, ref } from "vue";
+import { fromOptionKey, toOptionKey } from "./option.js";
+export function useVunoSelectState(options) {
+  const open = ref(false);
+  const query = ref("");
+  const highlighted = ref(-1);
+  const selectedKeys = computed(() => {
+    if (options.multiple()) return (Array.isArray(options.model.value) ? options.model.value : []).map(toOptionKey);
+    return options.model.value === void 0 ? [] : [toOptionKey(options.model.value)];
+  });
+  const isSelected = (item) => selectedKeys.value.includes(toOptionKey(item.value));
+  const displayValue = computed(() => {
+    const labelByKey = new Map(options.items().map((item) => [toOptionKey(item.value), item.label]));
+    return selectedKeys.value.map((key) => labelByKey.get(key) ?? fromOptionKey(key)).filter((label) => label !== "").join(", ");
+  });
+  const text = computed(() => open.value && options.searchable() ? query.value : displayValue.value);
+  const visibleItems = computed(() => {
+    if (!options.searchable() || query.value.trim() === "") return options.items();
+    const needle = normalize(query.value);
+    return options.items().filter((item) => normalize(item.label).includes(needle));
+  });
+  const selectableIndexes = computed(() => visibleItems.value.map((item, index) => item.disabled ? -1 : index).filter((index) => index >= 0));
+  const activeKey = computed(() => {
+    const item = visibleItems.value[highlighted.value];
+    return item ? toOptionKey(item.value) : void 0;
+  });
+  function scrollHighlightIntoView() {
+    void nextTick(() => {
+      const key = activeKey.value;
+      if (!key) return;
+      options.list()?.querySelector(`#${CSS.escape(options.optionId(key))}`)?.scrollIntoView({ block: "nearest" });
+    });
+  }
+  function moveHighlight(step) {
+    const candidates = selectableIndexes.value;
+    if (candidates.length === 0) return;
+    const current = candidates.indexOf(highlighted.value);
+    const entry = step === 1 ? 0 : candidates.length - 1;
+    const next = current === -1 ? entry : (current + step + candidates.length) % candidates.length;
+    highlighted.value = candidates[next] ?? -1;
+    scrollHighlightIntoView();
+  }
+  function highlightEdge(edge) {
+    const candidates = selectableIndexes.value;
+    highlighted.value = (edge === "first" ? candidates[0] : candidates[candidates.length - 1]) ?? -1;
+    scrollHighlightIntoView();
+  }
+  function close(refocus = false) {
+    if (!open.value) return;
+    open.value = false;
+    query.value = "";
+    highlighted.value = -1;
+    if (refocus) options.input()?.focus();
+  }
+  function choose(item) {
+    if (item.disabled) return;
+    if (!options.multiple()) {
+      options.model.value = item.value;
+      close();
+      return;
+    }
+    const key = toOptionKey(item.value);
+    const current = Array.isArray(options.model.value) ? options.model.value : [];
+    options.model.value = current.some((value) => toOptionKey(value) === key) ? current.filter((value) => toOptionKey(value) !== key) : [...current, item.value];
+  }
+  function openList(edge) {
+    if (options.disabled() || open.value) return;
+    open.value = true;
+    query.value = "";
+    const selected = visibleItems.value.findIndex(isSelected);
+    if (edge) highlightEdge(edge);
+    else highlighted.value = selected;
+    void nextTick(scrollHighlightIntoView);
+  }
+  function toggle() {
+    if (open.value) close(true);
+    else {
+      options.input()?.focus();
+      openList();
+    }
+  }
+  function onNavigationKey(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (open.value) moveHighlight(1);
+        else openList("first");
+        return true;
+      case "ArrowUp":
+        event.preventDefault();
+        if (open.value) moveHighlight(-1);
+        else openList("last");
+        return true;
+      case "End":
+      case "Home":
+        if (!open.value) return true;
+        event.preventDefault();
+        highlightEdge(event.key === "Home" ? "first" : "last");
+        return true;
+      default:
+        return false;
+    }
+  }
+  function onCommitKey(event) {
+    if (event.key === " " && options.searchable()) return false;
+    if (event.key !== "Enter" && event.key !== " ") return false;
+    if (!open.value) {
+      if (event.key === "Enter") return true;
+      event.preventDefault();
+      openList();
+      return true;
+    }
+    const item = visibleItems.value[highlighted.value];
+    if (!item && event.key === " ") return true;
+    event.preventDefault();
+    if (item) choose(item);
+    else close();
+    return true;
+  }
+  function onKeydown(event) {
+    if (options.disabled()) return;
+    if (onNavigationKey(event)) return;
+    if (onCommitKey(event)) return;
+    if (event.key === "Escape") {
+      if (!open.value) return;
+      event.preventDefault();
+      close(true);
+      return;
+    }
+    if (event.key === "Tab") close();
+  }
+  function onInput(event) {
+    if (!options.searchable()) return;
+    query.value = event.target.value;
+    highlighted.value = selectableIndexes.value[0] ?? -1;
+    if (!open.value) open.value = true;
+  }
+  return { onInput, onKeydown, activeKey, choose, close, highlighted, isSelected, open, openList, query, text, toggle, visibleItems };
+}
+function normalize(value) {
+  return value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+}

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

@@ -0,0 +1,13 @@
+import type { VunoFieldSlug } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldSlug, 'columns'>;
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: 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;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FieldSlug/FieldSlug.theme.d.ts

@@ -0,0 +1,5 @@
+export declare const fieldSlugTheme: Record<"fieldSlug", {
+    readonly slots: {
+        readonly root: "w-full";
+    };
+}>;

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

@@ -0,0 +1,2 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const fieldSlugTheme = defineTheme("fieldSlug", { slots: { root: "w-full" } });