AK Input Number

1<script setup lang="ts">
2import { computed, watch } from 'vue'
3 
4import '@yunyoujun/ak-ui'
5 
6const props = withDefaults(defineProps<{
7  disabled?: boolean
8  label?: string
9  max?: number
10  maxLabel?: string
11  min?: number
12  minLabel?: string
13  step?: number
14}>(), {
15  disabled: false,
16  label: '数值',
17  max: 99,
18  maxLabel: '最多',
19  min: 0,
20  minLabel: '最少',
21  step: 1,
22})
23 
24const model = defineModel<number>({ default: 0 })
25const normalizedValue = computed(() => clamp(model.value))
26const normalizedStep = computed(() => Math.abs(props.step) || 1)
27 
28function clamp(value: number) {
29  return Math.min(props.max, Math.max(props.min, value))
30}
31 
32function updateValue(value: number) {
33  if (!props.disabled)
34    model.value = clamp(value)
35}
36 
37watch([model, () => props.min, () => props.max], ([value]) => {
38  const nextValue = clamp(value)
39 
40  if (nextValue !== value)
41    model.value = nextValue
42}, { immediate: true })
43 
44function onInput(event: Event) {
45  const input = event.target as HTMLInputElement
46  const value = Number(input.value)
47 
48  if (Number.isNaN(value))
49    return
50 
51  const nextValue = clamp(value)
52  updateValue(nextValue)
53 
54  if (nextValue !== value)
55    input.value = String(nextValue)
56}
57</script>
58 
59<template>
60  <div
61    class="ak-input-number"
62    data-slot="ak-input-number"
63    :data-disabled="disabled || undefined"
64  >
65    <button
66      type="button"
67      class="ak-input-number__increase"
68      aria-label="增加"
69      :disabled="disabled || normalizedValue >= max"
70      @click="updateValue(normalizedValue + normalizedStep)"
71    >
72      <svg class="ak-icon" viewBox="0 0 24 24" aria-hidden="true">
73        <path d="M11 5h2v14h-2zM5 11h14v2H5z" />
74      </svg>
75    </button>
76    <button
77      type="button"
78      class="ak-input-number__decrease"
79      aria-label="减少"
80      :disabled="disabled || normalizedValue <= min"
81      @click="updateValue(normalizedValue - normalizedStep)"
82    >
83      <svg class="ak-icon" viewBox="0 0 24 24" aria-hidden="true">
84        <path d="M5 11h14v2H5z" />
85      </svg>
86    </button>
87    <button
88      type="button"
89      class="ak-input-number__max"
90      :disabled="disabled || normalizedValue >= max"
91      @click="updateValue(max)"
92    >
93      {{ maxLabel }}
94    </button>
95    <button
96      type="button"
97      class="ak-input-number__min"
98      :disabled="disabled || normalizedValue <= min"
99      @click="updateValue(min)"
100    >
101      {{ minLabel }}
102    </button>
103    <input
104      class="ak-input-number__inner"
105// … truncated