gami-web/app/components/common/Stepper.vue

<script setup lang="ts">
const props = defineProps<{
  modelValue: number | string | undefined
  min?: number
  max?: number
  step?: number
  disabled?: boolean
}>()

const emit = defineEmits<{
  'update:modelValue': [value: number]
}>()

const handleUpdate = (value: number) => {
  emit('update:modelValue', value)
}
</script>

<template>
  <van-stepper
    :model-value="props.modelValue"
    class="common-stepper"
    theme="round"
    button-size="24"
    :min="props.min"
    :max="props.max"
    :step="props.step"
    :disabled="props.disabled"
    @update:model-value="handleUpdate"
  />
</template>

<style scoped lang="scss">
.common-stepper {
  --van-stepper-button-round-theme-color: #f2f3f5;
  --van-stepper-button-disabled-color: #f2f3f5;
  --van-stepper-button-disabled-icon-color: #C9CDD4;

  :deep(.van-stepper__plus),
  :deep(.van-stepper__minus) {
    background-color: var(--van-stepper-button-round-theme-color);
    color: var(--color-text-secondary);
  }

  :deep(.van-stepper__minus--disabled),
  :deep(.van-stepper__plus--disabled) {
    color: var(--van-stepper-button-disabled-icon-color);
    background-color: var(--van-stepper-button-disabled-color);
    cursor: not-allowed;
    opacity: 1;
  }
}
</style>