Number field (#58)

Author: honghuangdc

packages/primitives/src/components/number-field/number-field-root.vue

@@ -90,7 +90,14 @@ const inputMode = computed<HTMLAttributes['inputmode']>(() => {
 // Replace negative textValue formatted using currencySign: 'accounting'
 // with a textValue that can be announced using a minus sign.
 const textValueFormatter = useNumberFormatter(locale, formatOptions);
-const textValue = computed(() => (Number.isNaN(modelValue.value) ? '' : textValueFormatter.format(modelValue.value)));
+const textValue = computed(() => {
+  if (Number.isNaN(modelValue.value)) return '';
+
+  const formatted = textValueFormatter.format(modelValue.value);
+  if (formatted === 'NaN') return '';
+
+  return formatted;
+});
 
 function validate(val: string) {
   return numberParser.isValidPartialNumber(val, min.value, max.value);

packages/primitives/src/components/number-field/shared.ts

@@ -4,6 +4,7 @@ import { unrefElement, useEventListener } from '@vueuse/core';
 import type { MaybeComputedElementRef } from '@vueuse/core';
 import { createEventHook, isClient, reactiveComputed } from '@vueuse/shared';
 import { NumberFormatter, NumberParser } from '@internationalized/number';
+import { isNullish } from '../../shared';
 
 export function usePressedHold(options: { target?: MaybeComputedElementRef; disabled: Ref<boolean> }) {
   const { disabled } = options;
@@ -68,7 +69,11 @@ export function useNumberParser(locale: Ref<string>, options: Ref<Intl.NumberFor
   return reactiveComputed(() => new NumberParser(locale.value, options.value));
 }
 
-export function handleDecimalOperation(operator: '-' | '+', value1: number, value2: number): number {
+export function handleDecimalOperation(operator: '-' | '+', value1?: number, value2?: number): number {
+  if (isNullish(value1) || isNullish(value2)) {
+    return 0;
+  }
+
   let v1 = value1;
   let v2 = value2;
 

packages/ui/src/components/index.ts

@@ -23,6 +23,7 @@ export * from './label';
 export * from './menu';
 export * from './menubar';
 export * from './navigation-menu';
+export * from './number-field';
 export * from './pagination';
 export * from './pin-input';
 export * from './popover';

packages/ui/src/components/number-field/index.ts

@@ -0,0 +1,9 @@
+import SNumberFieldDecrement from './number-field-decrement.vue';
+import SNumberFieldIncrement from './number-field-increment.vue';
+import SNumberFieldInput from './number-field-input.vue';
+import SNumberFieldRoot from './number-field-root.vue';
+import SNumberField from './number-field.vue';
+
+export { SNumberFieldDecrement, SNumberFieldIncrement, SNumberFieldInput, SNumberFieldRoot, SNumberField };
+
+export * from './types';

packages/ui/src/components/number-field/number-field-decrement.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { NumberFieldDecrement, Slot } from '@soybean-ui/primitives';
+import { cn, numberFieldVariants } from '@soybean-ui/variants';
+import { Minus } from 'lucide-vue-next';
+import type { NumberFieldDecrementProps } from './types';
+
+defineOptions({
+  name: 'SNumberFieldDecrement'
+});
+
+const { class: cls, size, center, iconClass, disabled } = defineProps<NumberFieldDecrementProps>();
+
+const mergedCls = computed(() => {
+  const { decrement, decrementIcon } = numberFieldVariants({ size, center });
+  return {
+    cls: cn(decrement(), cls),
+    iconCls: cn(decrementIcon(), iconClass)
+  };
+});
+</script>
+
+<template>
+  <NumberFieldDecrement :class="mergedCls.cls" data-slot="decrement" :disabled="disabled">
+    <Slot :class="mergedCls.iconCls">
+      <slot>
+        <Minus />
+      </slot>
+    </Slot>
+  </NumberFieldDecrement>
+</template>

packages/ui/src/components/number-field/number-field-increment.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { NumberFieldIncrement, Slot } from '@soybean-ui/primitives';
+import { cn, numberFieldVariants } from '@soybean-ui/variants';
+import { Plus } from 'lucide-vue-next';
+import type { NumberFieldIncrementProps } from './types';
+
+defineOptions({
+  name: 'SNumberFieldIncrement'
+});
+
+const { class: cls, size, center, iconClass, disabled } = defineProps<NumberFieldIncrementProps>();
+
+const mergedCls = computed(() => {
+  const { increment, incrementIcon } = numberFieldVariants({ size, center });
+
+  return {
+    cls: cn(increment(), cls),
+    iconCls: cn(incrementIcon(), iconClass)
+  };
+});
+</script>
+
+<template>
+  <NumberFieldIncrement :class="mergedCls.cls" data-slot="increment" :disabled="disabled">
+    <Slot :class="mergedCls.iconCls">
+      <slot>
+        <Plus />
+      </slot>
+    </Slot>
+  </NumberFieldIncrement>
+</template>

packages/ui/src/components/number-field/number-field-input.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { NumberFieldInput } from '@soybean-ui/primitives';
+import { cn, numberFieldVariants } from '@soybean-ui/variants';
+import type { NumberFieldInputProps } from './types';
+
+defineOptions({
+  name: 'SNumberFieldInput'
+});
+
+const { class: cls, size, center } = defineProps<NumberFieldInputProps>();
+
+const mergedCls = computed(() => {
+  const { input } = numberFieldVariants({ size, center });
+
+  return cn(input(), cls);
+});
+</script>
+
+<template>
+  <NumberFieldInput :class="mergedCls" data-slot="input" />
+</template>

packages/ui/src/components/number-field/number-field-root.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { NumberFieldRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
+import { cn, numberFieldVariants } from '@soybean-ui/variants';
+import type { NumberFieldRootEmits, NumberFieldRootProps } from './types';
+
+defineOptions({
+  name: 'SNumberFieldRoot'
+});
+
+const { class: cls, size, ...delegatedProps } = defineProps<NumberFieldRootProps>();
+
+const emit = defineEmits<NumberFieldRootEmits>();
+
+const forwarded = useForwardPropsEmits(delegatedProps, emit);
+
+const mergedCls = computed(() => {
+  const { root } = numberFieldVariants({ size });
+
+  return cn(root(), cls);
+});
+</script>
+
+<template>
+  <NumberFieldRoot v-bind="forwarded" :class="mergedCls">
+    <slot />
+  </NumberFieldRoot>
+</template>

packages/ui/src/components/number-field/number-field.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useForwardPropsEmits } from '@soybean-ui/primitives';
+import NumberFieldDecrement from './number-field-decrement.vue';
+import NumberFieldIncrement from './number-field-increment.vue';
+import NumberFieldInput from './number-field-input.vue';
+import NumberFieldRoot from './number-field-root.vue';
+import type { NumberFieldEmits, NumberFieldProps } from './types';
+
+defineOptions({
+  name: 'SNumberField'
+});
+
+const {
+  class: cls,
+  size,
+  center,
+  disabledDecrement,
+  disabledIncrement,
+  ui,
+  ...rootProps
+} = defineProps<NumberFieldProps>();
+
+const emit = defineEmits<NumberFieldEmits>();
+
+const forwarded = useForwardPropsEmits(rootProps, emit);
+</script>
+
+<template>
+  <NumberFieldRoot v-bind="forwarded" :class="cls || ui?.root" :size="size">
+    <NumberFieldInput :class="ui?.input" :size="size" :center="center" />
+    <NumberFieldDecrement
+      :class="ui?.decrement"
+      :size="size"
+      :center="center"
+      :icon-class="ui?.decrementIcon"
+      :disabled="disabled || disabledDecrement"
+    >
+      <slot name="decrement-icon" />
+    </NumberFieldDecrement>
+    <NumberFieldIncrement
+      :class="ui?.increment"
+      :size="size"
+      :center="center"
+      :icon-class="ui?.incrementIcon"
+      :disabled="disabled || disabledIncrement"
+    >
+      <slot name="increment-icon" />
+    </NumberFieldIncrement>
+  </NumberFieldRoot>
+</template>

packages/ui/src/components/number-field/types.ts

@@ -0,0 +1,43 @@
+import type {
+  ClassValue,
+  NumberFieldRootEmits,
+  NumberFieldDecrementProps as _NumberFieldDecrementProps,
+  NumberFieldIncrementProps as _NumberFieldIncrementProps,
+  NumberFieldInputProps as _NumberFieldInputProps,
+  NumberFieldRootProps as _NumberFieldRootProps
+} from '@soybean-ui/primitives';
+import type { NumberFieldSlots, ThemeSize } from '@soybean-ui/variants';
+
+export interface NumberFieldRootProps extends _NumberFieldRootProps {
+  size?: ThemeSize;
+}
+
+export interface NumberFieldInputProps extends _NumberFieldInputProps {
+  size?: ThemeSize;
+  center?: boolean;
+}
+
+export interface NumberFieldDecrementProps extends _NumberFieldDecrementProps {
+  size?: ThemeSize;
+  center?: boolean;
+  iconClass?: ClassValue;
+}
+
+export interface NumberFieldIncrementProps extends _NumberFieldIncrementProps {
+  size?: ThemeSize;
+  center?: boolean;
+  iconClass?: ClassValue;
+}
+
+export type NumberFieldUi = Partial<Record<NumberFieldSlots, ClassValue>>;
+
+export interface NumberFieldProps extends NumberFieldRootProps {
+  center?: boolean;
+  disabledDecrement?: boolean;
+  disabledIncrement?: boolean;
+  ui?: NumberFieldUi;
+}
+
+export type NumberFieldEmits = NumberFieldRootEmits;
+
+export type { NumberFieldRootEmits };