From b74686dc23e50315d09302fa9a1535ee33cfe64e Mon Sep 17 00:00:00 2001
From: Hendrig Sellik <sellikhendrig@gmail.com>
Date: Wed, 19 Jun 2024 19:22:02 +0300
Subject: [PATCH] fix: make NumberField more flexible (#613)

Change the NumberField, so it could be used
in different configuration without extra
effort from the developer.
---
 .../lib/registry/default/ui/number-field/NumberFieldContent.vue | 2 +-
 .../registry/default/ui/number-field/NumberFieldDecrement.vue   | 2 +-
 .../registry/default/ui/number-field/NumberFieldIncrement.vue   | 2 +-
 .../lib/registry/default/ui/number-field/NumberFieldInput.vue   | 2 +-
 .../registry/new-york/ui/number-field/NumberFieldContent.vue    | 2 +-
 .../registry/new-york/ui/number-field/NumberFieldDecrement.vue  | 2 +-
 .../registry/new-york/ui/number-field/NumberFieldIncrement.vue  | 2 +-
 .../lib/registry/new-york/ui/number-field/NumberFieldInput.vue  | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldContent.vue b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldContent.vue
index 12c8d7ed..f8d98859 100644
--- a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldContent.vue
+++ b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldContent.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('relative', props.class)">
+  <div :class="cn('flex items-center h-10 rounded-md border border-input px-1 py-2 ring-offset-background focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 disabled:opacity-50', props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue
index 0829f9b0..a0c8833c 100644
--- a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue
+++ b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldDecrement.vue
@@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <NumberFieldDecrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
+  <NumberFieldDecrement v-bind="forwarded" :class="cn('p-2.5 disabled:cursor-not-allowed', props.class)">
     <slot>
       <Minus class="h-4 w-4" />
     </slot>
diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue
index 45690be8..2f1828b6 100644
--- a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue
+++ b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldIncrement.vue
@@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <NumberFieldIncrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
+  <NumberFieldIncrement v-bind="forwarded" :class="cn('p-2.5 disabled:cursor-not-allowed', props.class)">
     <slot>
       <Plus class="h-4 w-4" />
     </slot>
diff --git a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue
index 4a8eefac..181aed8d 100644
--- a/apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue
+++ b/apps/www/src/lib/registry/default/ui/number-field/NumberFieldInput.vue
@@ -4,5 +4,5 @@ import { cn } from '@/lib/utils'
 </script>
 
 <template>
-  <NumberFieldInput :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-10 py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50')" />
+  <NumberFieldInput :class="cn('w-full bg-background text-sm text-center placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50')" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldContent.vue b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldContent.vue
index 12c8d7ed..63156ba2 100644
--- a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldContent.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('relative', props.class)">
+  <div :class="cn('flex items-center h-9 rounded-md border border-input bg-transparent py-1 shadow-sm transition-colors focus-within:outline-none focus-within:ring-1 focus-within:ring-ring disabled:opacity-50', props.class)">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue
index 0829f9b0..a0c8833c 100644
--- a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue
+++ b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldDecrement.vue
@@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <NumberFieldDecrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
+  <NumberFieldDecrement v-bind="forwarded" :class="cn('p-2.5 disabled:cursor-not-allowed', props.class)">
     <slot>
       <Minus class="h-4 w-4" />
     </slot>
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue
index 45690be8..2f1828b6 100644
--- a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue
+++ b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldIncrement.vue
@@ -17,7 +17,7 @@ const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <NumberFieldIncrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
+  <NumberFieldIncrement v-bind="forwarded" :class="cn('p-2.5 disabled:cursor-not-allowed', props.class)">
     <slot>
       <Plus class="h-4 w-4" />
     </slot>
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue
index 9a0ee0e6..73818870 100644
--- a/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue
+++ b/apps/www/src/lib/registry/new-york/ui/number-field/NumberFieldInput.vue
@@ -4,5 +4,5 @@ import { cn } from '@/lib/utils'
 </script>
 
 <template>
-  <NumberFieldInput :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-10 py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50')" />
+  <NumberFieldInput :class="cn('w-full bg-transparent text-sm text-center  placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed')" />
 </template>