Input NumberCommunity Asset

<script setup lang="ts">
const moneyAmount = ref<number>()
const percentageValue = ref<number>()
const unitaryWeight = ref<number>()
const fullNumber = ref<number>()
</script>

<template>
  <nord-stack gap="l">
    <h2 class="n-typescale-l n-font-weight-semibold">Basic Usage</h2>
    <p class="n-color-text-weaker">
      The InputNumber component with default props. Each type uses sensible
      defaults for decimal places and formatting.
    </p>

    <InputNumber
      v-model="moneyAmount"
      type="money"
      label="Money amount"
      hint="2 decimal places, currency symbol"
    />

    <InputNumber
      v-model="percentageValue"
      type="percentage"
      label="Percentage value"
      hint="0-100 range, percent symbol"
    />

    <InputNumber
      v-model="unitaryWeight"
      type="unitary"
      unit-label="kg"
      label="Weight"
      hint="With custom unit label"
    />

    <InputNumber
      v-model="fullNumber"
      type="full"
      label="Quantity"
      hint="Integer only, no decimals"
    />

    <nord-card padding="m" color="neutral">
      <nord-stack gap="s">
        <h3 class="n-typescale-m n-font-weight-semibold">Values:</h3>
        <p><strong>moneyAmount:</strong> {{ moneyAmount }}</p>
        <p><strong>percentageValue:</strong> {{ percentageValue }}</p>
        <p><strong>unitaryWeight:</strong> {{ unitaryWeight }}</p>
        <p><strong>fullNumber:</strong> {{ fullNumber }}</p>
      </nord-stack>
    </nord-card>
  </nord-stack>
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import { z } from 'zod'

const schema = toTypedSchema(
  z.object({
    price: z.number().positive('Price must be greater than 0'),
  }),
)

const { defineField, errors } = useForm({
  validationSchema: schema,
})

const [price] = defineField('price')
</script>

<template>
  <nord-stack gap="l">
    <InputNumber
      v-model="price"
      type="money"
      label="Price"
      :error="errors.price"
    />

    <nord-card padding="m" color="neutral">
      <p><strong>price:</strong> {{ price }}</p>
    </nord-card>
  </nord-stack>
</template>

<script setup lang="ts">
const price3Decimals = ref<number>()
const percentage1Decimal = ref<number>()
const weight4Decimals = ref<number>()
const rangeConstrained = ref<number>()
</script>

<template>
  <nord-stack gap="l">
    <InputNumber
      v-model="price3Decimals"
      type="money"
      label="Price (3 decimals)"
      :format-rules="{ maximumFractionDigits: 3 }"
    />

    <InputNumber
      v-model="percentage1Decimal"
      type="percentage"
      label="Percentage (1 decimal)"
      :format-rules="{ maximumFractionDigits: 1 }"
    />

    <InputNumber
      v-model="weight4Decimals"
      type="unitary"
      unit-label="kg"
      label="Weight (4 decimals)"
      :format-rules="{ maximumFractionDigits: 4 }"
    />

    <InputNumber
      v-model="rangeConstrained"
      type="money"
      label="Amount (min: 10, max: 1000)"
      :format-rules="{ min: 10, max: 1000 }"
    />

    <nord-card padding="m" color="neutral">
      <p><strong>price3Decimals:</strong> {{ price3Decimals }}</p>
      <p><strong>percentage1Decimal:</strong> {{ percentage1Decimal }}</p>
      <p><strong>weight4Decimals:</strong> {{ weight4Decimals }}</p>
      <p><strong>rangeConstrained:</strong> {{ rangeConstrained }}</p>
    </nord-card>
  </nord-stack>
</template>

<script setup lang="ts">
const quantity = ref<number>()
</script>

<template>
  <nord-stack gap="l">
    <InputNumber v-model="quantity" type="full" label="Quantity" />

    <nord-card padding="m" color="neutral">
      <p><strong>quantity:</strong> {{ quantity }}</p>
    </nord-card>
  </nord-stack>
</template>

<script setup lang="ts">
const amount = ref<number>()
</script>

<template>
  <nord-stack gap="l">
    <InputNumber v-model="amount" type="money" label="Money amount" />

    <nord-card padding="m" color="neutral">
      <p><strong>amount:</strong> {{ amount }}</p>
    </nord-card>
  </nord-stack>
</template>

<script setup lang="ts">
const value = ref<number>()
</script>

<template>
  <nord-stack gap="l">
    <InputNumber v-model="value" type="percentage" label="Percentage value" />

    <nord-card padding="m" color="neutral">
      <p><strong>value:</strong> {{ value }}</p>
    </nord-card>
  </nord-stack>
</template>

<script setup lang="ts">
const positiveOnly = ref<number>()
const negativeOnly = ref<number>()
const anyValue = ref<number>()
</script>

<template>
  <nord-stack gap="l">
    <InputNumber v-model="positiveOnly" type="positive" label="Positive only" />

    <InputNumber v-model="negativeOnly" type="negative" label="Negative only" />

    <InputNumber
      v-model="anyValue"
      type="money"
      label="Any value (positive or negative)"
    />

    <nord-card padding="m" color="neutral">
      <p><strong>positiveOnly:</strong> {{ positiveOnly }}</p>
      <p><strong>negativeOnly:</strong> {{ negativeOnly }}</p>
      <p><strong>anyValue:</strong> {{ anyValue }}</p>
    </nord-card>
  </nord-stack>
</template>

<script setup lang="ts">
const amount = ref(123.45)
const selectOnFocus = ref<'always' | 'zero' | 'never'>('zero')
</script>

<template>
  <nord-stack gap="l">
    <nord-select v-model="selectOnFocus" label="selectOnFocus">
      <option value="always">always</option>
      <option value="zero">zero</option>
      <option value="never">never</option>
    </nord-select>

    <InputNumber
      v-model="amount"
      type="money"
      label="Amount"
      :select-on-focus
    />

    <nord-card padding="m" color="neutral">
      <p><strong>amount:</strong> {{ amount }}</p>
    </nord-card>
  </nord-stack>
</template>

<script setup lang="ts">
const weight = ref<number>()
</script>

<template>
  <nord-stack gap="l">
    <InputNumber
      v-model="weight"
      type="unitary"
      unit-label="kg"
      label="Weight"
    />

    <nord-card padding="m" color="neutral">
      <p><strong>weight:</strong> {{ weight }}</p>
    </nord-card>
  </nord-stack>
</template>

<script setup lang="ts">
const amount = ref<number>()
const zeroOnNullish = ref(true)

const onCheckboxChange = (event: Event) => {
  const eventTarget = event?.target as unknown as HTMLInputElement
  zeroOnNullish.value = eventTarget?.checked
}
</script>

<template>
  <nord-stack gap="l">
    <nord-checkbox
      v-model="zeroOnNullish"
      :checked="zeroOnNullish"
      label="Activate Zero on Nullish"
      @change="onCheckboxChange"
    />

    <p>
      After checking or unchecking the input, delete all the text in the input.
    </p>

    <InputNumber
      v-model="amount"
      type="money"
      label="Amount"
      :zero-on-nullish
    />

    <nord-card padding="m" color="neutral">
      <p><strong>amount:</strong> {{ amount }}</p>
    </nord-card>
  </nord-stack>
</template>