@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -4,31 +4,35 @@ import { useIcons, useLocale, useMessages, useTheme } from "#vuno/composables/us
 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: "VunoPrimitiveNumberInput", inheritAttrs: false });
+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, size: props.size })
+  () => ({ 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 ? "xs" : props.size);
+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;
@@ -66,13 +70,13 @@ function commit(value) {
   return committed;
 }
 function nudge(direction, multiplier = 1) {
-  if (props.disabled) return void 0;
+  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 (props.disabled) return;
+  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),
@@ -88,7 +92,7 @@ function onKeydown(event) {
   typing.value = value === void 0 ? "" : formatEditing(value);
 }
 function onWheel(event) {
-  if (props.disabled || event.target !== document.activeElement) return;
+  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);
@@ -123,11 +127,11 @@ async function beginEditing(input, selectAll) {
 }
 async function onClick(event) {
   const input = event.currentTarget;
-  if (typing.value === void 0) await beginEditing(input, false);
+  if (!locked.value && typing.value === void 0) await beginEditing(input, false);
   pointerFocus.value = false;
 }
 function onFocus(event) {
-  if (props.disabled) return;
+  if (locked.value) return;
   if (pointerFocus.value) return;
   void beginEditing(event.currentTarget, true);
 }
@@ -141,16 +145,22 @@ function onBlur() {
   pointerFocus.value = false;
   if (typing.value === void 0) return;
   const parsed = parseNumber(typing.value, locale.value);
-  if (!typing.value.trim()) commit(void 0);
-  else if (parsed !== void 0) commit(parsed);
+  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="props.ui"
+        :ui="{ root: ui.root }"
     >
         <!--
             `type="text"` y no `number`: el nativo acepta texto que no es un
@@ -161,6 +171,7 @@ function onBlur() {
         -->
         <input
             v-bind="$attrs"
+            :aria-readonly="props.readonly || void 0"
             :aria-valuemax="props.max"
             :aria-valuemin="props.min"
             :aria-valuenow="model"
@@ -170,6 +181,7 @@ function onBlur() {
             :class="ui.base"
             :disabled="props.disabled"
             inputmode="decimal"
+            :readonly="props.readonly"
             role="spinbutton"
             spellcheck="false"
             type="text"
@@ -185,6 +197,9 @@ function onBlur() {
         />
 
         <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
@@ -193,28 +208,24 @@ function onBlur() {
             -->
             <div :class="ui.actions">
                 <Button
-                    :aria-label="messages.numberDecrement"
-                    color="neutral"
-                    :disabled="props.disabled || atMin"
+                    :disabled="locked || atMin"
                     :icon="icons.numberDecrement"
-                    radius="none"
+                    :iconDescription="messages.numberDecrement"
+                    kind="ghost"
                     :size="buttonSize"
                     tabindex="-1"
                     :ui="stepperUi"
-                    variant="ghost"
                     @click="nudge(-1)"
                 />
 
                 <Button
-                    :aria-label="messages.numberIncrement"
-                    color="neutral"
-                    :disabled="props.disabled || atMax"
+                    :disabled="locked || atMax"
                     :icon="icons.numberIncrement"
-                    radius="none"
+                    :iconDescription="messages.numberIncrement"
+                    kind="ghost"
                     :size="buttonSize"
                     tabindex="-1"
                     :ui="stepperUi"
-                    variant="ghost"
                     @click="nudge(1)"
                 />
             </div>

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

@@ -1,35 +1,55 @@
-import type { VunoControlOrientation, VunoFieldSize } from '#vuno/types/field';
-import type { VunoUi } from '#vuno/types/slots';
-type __VLS_Props = Props;
+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?: VunoControlOrientation;
-    size?: VunoFieldSize;
+    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?: VunoUi<'control' | 'input' | 'numberInput'>;
+    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_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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;
 }>, {
-    currency: string;
-    size: VunoFieldSize;
-    orientation: VunoControlOrientation;
-    ui: VunoUi<"control" | "input" | "numberInput">;
-    decimals: number;
+    size: ControlSize;
+    orientation: ControlOrientation;
+    step: number;
+    readonly: boolean;
+    ui: ComponentUi<"control" | "input" | "numberInput">;
     max: number;
+    decimals: number;
+    currency: string;
+    allowEmpty: boolean;
     min: number;
-    step: 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"
 };