feat(number): support disabled

docs/components/number.md

@@ -98,6 +98,36 @@ const value = ref(0)
 
 :::
 
+## Disabled
+
+::: raw
+
+<CodeRunner title="Disabled">
+    <div class="space-y-2">
+        <ShadcnNumber v-model="basicValue"/>
+        <ShadcnNumber v-model="basicValue" disabled />
+    </div>
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnNumber v-model="value"/>
+    <ShadcnNumber v-model="value" disabled />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const value = ref(0)
+</script>
+```
+
+:::
+
 ## Props
 
 <ApiTable title="Number Props"
@@ -106,6 +136,7 @@ const value = ref(0)
         ['modelValue', 'Number value', 'number', '-', '-'],
         ['size', 'Size of the number', 'string', 'default', 'small | default | large'],
         ['type', 'Type of the number', 'string', 'default', 'primary | warning | success | error'],
+        ['disabled', 'Whether the number is disabled', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
 

src/App.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="p-32 space-y-2">
     Value: {{ value }}
-    <ShadcnNumber v-model="value" size="small" type="primary"/>
-    <ShadcnNumber v-model="value" size="default" type="warning"/>
-    <ShadcnNumber v-model="value" size="large" type="success"/>
-    <ShadcnNumber v-model="value" size="large" type="error"/>
+    <ShadcnNumber v-model="value"/>
+    <ShadcnNumber v-model="value" disabled/>
   </div>
 </template>
 

src/ui/number/ShadcnNumber.vue

@@ -2,14 +2,19 @@
   <div class="relative">
     <div :class="['flex items-center justify-between border rounded p-3',
               Size[size],
-              HoverType[type]
+              HoverType[type],
+              {
+                'cursor-pointer': !disabled,
+                'cursor-not-allowed opacity-50 bg-gray-100': disabled
+              }
          ]">
       <!-- Input field for direct number entry -->
       <input :class="['w-full outline-none text-sm',
                   !validValue && 'line-through'
              ]"
              type="text"
              :value="localValue"
+             :disabled="disabled"
              @input="onInput"
              @blur="onBlur"/>
     </div>
@@ -27,7 +32,8 @@ import { HoverType } from '@/ui/common/type.ts'
 const emit = defineEmits<NumberEmits>()
 const props = withDefaults(defineProps<NumberProps>(), {
   size: 'default',
-  type: 'primary'
+  type: 'primary',
+  disabled: false
 })
 
 // Create a reactive reference for the modelValue

src/ui/number/types.ts

@@ -7,6 +7,7 @@ export interface NumberProps
     name?: string
     size?: keyof typeof Size
     type?: keyof typeof HoverType
+    disabled?: boolean
 }
 
 export type NumberEmits = {