@groupteknology/vuno 2.0.0 → 4.0.0

package/dist/runtime/app/primitives/PrimitiveNumberInput/PrimitiveNumberInput.vue

@@ -0,0 +1,234 @@
+<script setup>
+import { computed, nextTick, ref } from "vue";
+import { useIcons, useLocale, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Button from "#vuno/components/Button/Button.vue";
+import PrimitiveControl from "#vuno/primitives/PrimitiveControl/PrimitiveControl.vue";
+import { addStep, clampNumber, isPotentialNumber, parseNumber, snapToStep } from "#vuno/primitives/PrimitiveNumberInput/number";
+defineOptions({ name: "PrimitiveNumberInput", inheritAttrs: false });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  allowEmpty: { type: Boolean, required: false, default: true },
+  currency: { type: String, required: false, default: void 0 },
+  decimals: { type: Number, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  max: { type: Number, required: false, default: void 0 },
+  min: { type: Number, required: false, default: void 0 },
+  orientation: { type: String, required: false, default: "horizontal" },
+  readonly: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" },
+  step: { type: Number, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const icons = useIcons();
+const locale = useLocale();
+const messages = useMessages();
+const ui = useTheme(
+  "numberInput",
+  () => props.ui,
+  () => ({ orientation: props.orientation, readOnly: String(props.readonly), size: props.size })
+);
+const pointerFocus = ref(false);
+const typing = ref();
+const locked = computed(() => props.disabled || props.readonly);
+const isVertical = computed(() => props.orientation === "vertical");
+const buttonSize = computed(() => isVertical.value ? "sm" : props.size);
+const stepperUi = computed(() => ({ base: ui.value.stepper, icon: ui.value.stepperIcon }));
+const decimals = computed(() => {
+  if (props.decimals === void 0 || !Number.isFinite(props.decimals)) return void 0;
+  return Math.min(20, Math.max(0, Math.trunc(props.decimals)));
+});
+const digits = computed(() => decimals.value === void 0 ? {} : { maximumFractionDigits: decimals.value, minimumFractionDigits: decimals.value });
+const formatter = computed(() => {
+  return new Intl.NumberFormat(locale.value, props.currency ? { ...digits.value, currency: props.currency, style: "currency" } : digits.value);
+});
+const editingFormatter = computed(() => {
+  const resolved = formatter.value.resolvedOptions();
+  return new Intl.NumberFormat(locale.value, {
+    maximumFractionDigits: resolved.maximumFractionDigits,
+    minimumFractionDigits: 0,
+    useGrouping: false
+  });
+});
+const step = computed(() => props.step ?? (props.currency ? 10 ** -(formatter.value.resolvedOptions().maximumFractionDigits ?? 0) : 1));
+const display = computed(() => {
+  if (typing.value !== void 0) return typing.value;
+  return model.value === void 0 ? "" : formatter.value.format(model.value);
+});
+const atMin = computed(() => props.min !== void 0 && model.value !== void 0 && model.value <= props.min);
+const atMax = computed(() => props.max !== void 0 && model.value !== void 0 && model.value >= props.max);
+function formatEditing(value) {
+  return editingFormatter.value.formatToParts(value).filter((part) => part.type !== "group" && part.type !== "literal").map((part) => part.value).join("");
+}
+function commit(value) {
+  if (value === void 0) {
+    model.value = void 0;
+    return void 0;
+  }
+  const committed = clampNumber(snapToStep(value, step.value, props.min), props.min, props.max);
+  model.value = committed;
+  return committed;
+}
+function nudge(direction, multiplier = 1) {
+  if (locked.value) return void 0;
+  const draft = typing.value === void 0 ? void 0 : parseNumber(typing.value, locale.value);
+  const from = draft ?? model.value ?? props.min ?? 0;
+  return commit(draft === void 0 && model.value === void 0 ? from : addStep(from, direction * step.value * multiplier));
+}
+function onKeydown(event) {
+  if (locked.value) return;
+  const actions = {
+    End: props.max === void 0 ? void 0 : () => commit(props.max),
+    Home: props.min === void 0 ? void 0 : () => commit(props.min),
+    ArrowDown: () => nudge(-1),
+    ArrowUp: () => nudge(1),
+    PageDown: () => nudge(-1, 10),
+    PageUp: () => nudge(1, 10)
+  };
+  const action = actions[event.key];
+  if (!action) return;
+  event.preventDefault();
+  const value = action();
+  typing.value = value === void 0 ? "" : formatEditing(value);
+}
+function onWheel(event) {
+  if (locked.value || event.target !== document.activeElement) return;
+  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+  event.preventDefault();
+  const value = nudge(event.deltaY < 0 ? 1 : -1);
+  typing.value = value === void 0 ? "" : formatEditing(value);
+}
+function onInput(event) {
+  const input = event.target;
+  if (isPotentialNumber(input.value, locale.value)) {
+    typing.value = input.value;
+    return;
+  }
+  input.value = typing.value ?? display.value;
+}
+async function beginEditing(input, selectAll) {
+  const formatted = input.value;
+  const formattedCaret = input.selectionStart ?? formatted.length;
+  const editing = model.value === void 0 ? "" : formatEditing(model.value);
+  const editingCharacters = new Set(editing);
+  let charactersBeforeCaret = 0;
+  for (const character of formatted.slice(0, formattedCaret)) {
+    if (editingCharacters.has(character)) charactersBeforeCaret++;
+  }
+  typing.value = editing;
+  await nextTick();
+  if (selectAll) {
+    input.select();
+    return;
+  }
+  let editingCaret = 0;
+  for (const character of [...editing].slice(0, charactersBeforeCaret)) editingCaret += character.length;
+  input.setSelectionRange(editingCaret, editingCaret);
+}
+async function onClick(event) {
+  const input = event.currentTarget;
+  if (!locked.value && typing.value === void 0) await beginEditing(input, false);
+  pointerFocus.value = false;
+}
+function onFocus(event) {
+  if (locked.value) return;
+  if (pointerFocus.value) return;
+  void beginEditing(event.currentTarget, true);
+}
+function onPointerdown() {
+  pointerFocus.value = true;
+}
+function onPointercancel() {
+  pointerFocus.value = false;
+}
+function onBlur() {
+  pointerFocus.value = false;
+  if (typing.value === void 0) return;
+  const parsed = parseNumber(typing.value, locale.value);
+  if (!typing.value.trim()) {
+    if (props.allowEmpty) commit(void 0);
+  } else if (parsed !== void 0) commit(parsed);
+  typing.value = void 0;
+}
+</script>
+
+<template>
+    <!--
+        La caja recibe el `root` **ya resuelto**: es donde viven el fondo y el
+        borde que solo lectura apaga, y esa variante se decide aquí, no en el
+        componente de fuera.
+    -->
+    <PrimitiveControl
+        :size="props.size"
+        :ui="{ root: ui.root }"
+    >
+        <!--
+            `type="text"` y no `number`: el nativo acepta texto que no es un
+            número, se anuncia como caja de texto y cambia con la rueda sin
+            tener el foco. El papel de `spinbutton` con sus tres `aria-value*`
+            es lo que lo convierte en un control de número para quien no ve la
+            pantalla.
+        -->
+        <input
+            v-bind="$attrs"
+            :aria-readonly="props.readonly || void 0"
+            :aria-valuemax="props.max"
+            :aria-valuemin="props.min"
+            :aria-valuenow="model"
+            :aria-valuetext="props.currency && model !== void 0 ? formatter.format(model) : void 0"
+            autocomplete="off"
+            autocorrect="off"
+            :class="ui.base"
+            :disabled="props.disabled"
+            inputmode="decimal"
+            :readonly="props.readonly"
+            role="spinbutton"
+            spellcheck="false"
+            type="text"
+            :value="display"
+            @blur="onBlur"
+            @click="onClick"
+            @focus="onFocus"
+            @input="onInput"
+            @keydown="onKeydown"
+            @pointercancel="onPointercancel"
+            @pointerdown="onPointerdown"
+            @wheel="onWheel"
+        />
+
+        <template #trailing>
+            <!-- El icono de validación va antes de los pasos, como en el original. -->
+            <slot name="status" />
+
+            <!--
+                Los botones quedan fuera del tabulador a propósito: el control ya
+                sube y baja con las flechas, y dos paradas más por campo numérico
+                alargan el recorrido del teclado sin añadir nada que no se
+                pudiera hacer.
+            -->
+            <div :class="ui.actions">
+                <Button
+                    :disabled="locked || atMin"
+                    :icon="icons.numberDecrement"
+                    :iconDescription="messages.numberDecrement"
+                    kind="ghost"
+                    :size="buttonSize"
+                    tabindex="-1"
+                    :ui="stepperUi"
+                    @click="nudge(-1)"
+                />
+
+                <Button
+                    :disabled="locked || atMax"
+                    :icon="icons.numberIncrement"
+                    :iconDescription="messages.numberIncrement"
+                    kind="ghost"
+                    :size="buttonSize"
+                    tabindex="-1"
+                    :ui="stepperUi"
+                    @click="nudge(1)"
+                />
+            </div>
+        </template>
+    </PrimitiveControl>
+</template>

package/dist/runtime/app/primitives/PrimitiveNumberInput/PrimitiveNumberInput.vue.d.ts

@@ -0,0 +1,55 @@
+import type { ControlOrientation, ControlSize } from '#vuno/types/control';
+import type { ComponentUi } from '#vuno/types/slots';
+type Props = {
+    allowEmpty?: boolean;
+    currency?: string;
+    decimals?: number;
+    disabled?: boolean;
+    max?: number;
+    min?: number;
+    /** En vertical los botones se apilan; en horizontal, quedan lado a lado. */
+    orientation?: ControlOrientation;
+    /**
+     * El valor se lee pero no se cambia: ni tecleando, ni con los pasos, ni
+     * con la rueda. No es lo mismo que deshabilitado —el campo sigue en el
+     * tabulador y su valor se puede seleccionar y copiar—, y la caja lo
+     * dice con el fondo transparente y el borde apagado.
+     */
+    readonly?: boolean;
+    size?: ControlSize;
+    step?: number;
+    ui?: ComponentUi<'control' | 'input' | 'numberInput'>;
+};
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** El icono de validación, entre el valor y los pasos. */
+    status?: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: number | 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: number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
+}>, {
+    size: ControlSize;
+    orientation: ControlOrientation;
+    step: number;
+    readonly: boolean;
+    ui: ComponentUi<"control" | "input" | "numberInput">;
+    max: number;
+    decimals: number;
+    currency: string;
+    allowEmpty: boolean;
+    min: 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/theme/icons.d.ts

@@ -1,2 +1,2 @@
-import type { VunoIcons } from '#vuno/types/theme';
-export declare const defaultIcons: VunoIcons;
+import type { Icons } from '#vuno/types/theme';
+export declare const defaultIcons: Icons;

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

@@ -1,43 +1,37 @@
 export const defaultIcons = {
-  actions: "lucide:ellipsis-vertical",
-  addItem: "lucide:plus",
-  booleanFalse: "lucide:minus",
-  booleanTrue: "lucide:check",
-  breadcrumbSeparator: "lucide:chevron-right",
-  clearSearch: "lucide:x",
-  close: "lucide:x",
-  codeCopied: "lucide:check",
-  codeCopy: "lucide:copy",
-  confirm: "lucide:triangle-alert",
-  empty: "lucide:inbox",
-  failure: "lucide:triangle-alert",
-  fileMoveDown: "lucide:chevron-down",
-  fileMoveUp: "lucide:chevron-up",
-  fileRemove: "lucide:x",
-  fileUpload: "lucide:image",
-  filter: "lucide:list-filter",
-  navigationToggle: "lucide:chevron-right",
-  noMatches: "lucide:search-x",
-  notifyError: "lucide:circle-x",
-  notifyInfo: "lucide:info",
-  notifySuccess: "lucide:circle-check",
-  notifyWarning: "lucide:triangle-alert",
-  numberDecrement: "lucide:minus",
-  numberIncrement: "lucide:plus",
-  paginationFirst: "lucide:chevrons-left",
-  paginationLast: "lucide:chevrons-right",
-  paginationNext: "lucide:chevron-right",
-  paginationPrevious: "lucide:chevron-left",
-  passwordHide: "lucide:eye-off",
-  passwordShow: "lucide:eye",
-  removeItem: "lucide:trash-2",
-  retry: "lucide:refresh-cw",
-  search: "lucide:search",
-  selectOpen: "lucide:chevron-down",
-  selectSelected: "lucide:check",
-  slugEdit: "lucide:pencil",
-  slugReset: "lucide:x",
-  sort: "lucide:chevrons-up-down",
-  sortAsc: "lucide:arrow-up",
-  sortDesc: "lucide:arrow-down"
+  actions: "carbon:overflow-menu-vertical",
+  booleanFalse: "carbon:subtract",
+  booleanTrue: "carbon:checkmark",
+  breadcrumbSeparator: "carbon:chevron-right",
+  clearSearch: "carbon:close",
+  close: "carbon:close",
+  codeCopied: "carbon:checkmark",
+  codeCopy: "carbon:copy",
+  confirm: "carbon:warning-alt",
+  copied: "carbon:checkmark",
+  copy: "carbon:copy",
+  dropdownOpen: "carbon:chevron-down",
+  dropdownSelected: "carbon:checkmark",
+  empty: "carbon:inbox",
+  failure: "carbon:warning-alt",
+  fileRemove: "carbon:close",
+  fileUpload: "carbon:upload",
+  filter: "carbon:filter",
+  navigationToggle: "carbon:chevron-right",
+  noMatches: "carbon:search",
+  notifyError: "carbon:error",
+  notifyInfo: "carbon:information",
+  notifySuccess: "carbon:checkmark-filled",
+  notifyWarning: "carbon:warning",
+  numberDecrement: "carbon:subtract",
+  numberIncrement: "carbon:add",
+  paginationFirst: "carbon:page-first",
+  paginationLast: "carbon:page-last",
+  paginationNext: "carbon:chevron-right",
+  paginationPrevious: "carbon:chevron-left",
+  retry: "carbon:renew",
+  search: "carbon:search",
+  sort: "carbon:chevron-sort",
+  sortAsc: "carbon:arrow-up",
+  sortDesc: "carbon:arrow-down"
 };