From 8b2a28118211311f71bad59ce9ed9b06aa32eb91 Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Mon, 18 Dec 2023 10:27:18 +0100
Subject: [PATCH] feat(BaseInputNumber): update app.config.ts and
 BaseInputNumber.vue

---
 app.config.ts                       |   6 ++
 components/form/BaseInputNumber.vue | 111 +++++++++++++++-------------
 nuxt.schema.ts                      |  26 +++++++
 3 files changed, 93 insertions(+), 50 deletions(-)

diff --git a/app.config.ts b/app.config.ts
index a0935f57..6f930318 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -82,6 +82,12 @@ export default defineAppConfig({
       size: 'md',
       contrast: 'default',
     },
+    BaseInputNumber: {
+      inputmode: 'numeric',
+      rounded: 'sm',
+      size: 'md',
+      contrast: 'default',
+    },
     BaseMessage: {
       type: 'success',
       rounded: 'sm',
diff --git a/components/form/BaseInputNumber.vue b/components/form/BaseInputNumber.vue
index 0e28efaf..d96f6db5 100644
--- a/components/form/BaseInputNumber.vue
+++ b/components/form/BaseInputNumber.vue
@@ -49,9 +49,31 @@ const props = withDefaults(
     type?: string
 
     /**
-     * The shape of the input.
+     * The inputmode to use for the input, usually for mobile devices.
+     */
+    inputmode?: 'numeric' | 'decimal'
+
+    /**
+     * The radius of the input.
+     *
+     * @since 2.0.0
+     * @default 'sm'
+     */
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
+
+    /**
+     * The size of the input.
+     *
+     * @default 'md'
      */
-    shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full'
+    size?: 'sm' | 'md' | 'lg'
+
+    /**
+     * The contrast of the input.
+     *
+     * @default 'default'
+     */
+    contrast?: 'default' | 'default-contrast' | 'muted' | 'muted-contrast'
 
     /**
      * The label to display for the input.
@@ -63,15 +85,20 @@ const props = withDefaults(
      */
     labelFloat?: boolean
 
+    /**
+     * The icon to display for the input.
+     */
+    icon?: string
+
     /**
      * The placeholder to display for the input.
      */
     placeholder?: string
 
     /**
-     * The icon to display for the input.
+     * An error message or boolean value indicating whether the input is in an error state.
      */
-    icon?: string
+    error?: string | boolean
 
     /**
      * The icon to display for the decrement button.
@@ -83,11 +110,6 @@ const props = withDefaults(
      */
     iconIncrement?: string
 
-    /**
-     * The inputmode to use for the input, usually for mobile devices.
-     */
-    inputmode?: 'numeric' | 'decimal'
-
     /**
      * Whether the color of the input should change when it is focused.
      */
@@ -102,22 +124,6 @@ const props = withDefaults(
      * Whether the input is in a disabled state.
      */
     disabled?: boolean
-
-    /**
-     * An error message or boolean value indicating whether the input is in an error state.
-     */
-    error?: string | boolean
-
-    /**
-     * The size of the input.
-     */
-    size?: 'sm' | 'md' | 'lg'
-
-    /**
-     * The contrast of the input.
-     */
-    contrast?: 'default' | 'default-contrast' | 'muted' | 'muted-contrast'
-
     /**
      * Optional CSS classes to apply to the wrapper, label, input, addon, error, and icon elements.
      */
@@ -164,50 +170,55 @@ const props = withDefaults(
     }
   }>(),
   {
-    id: undefined,
     modelValue: undefined,
     modelModifiers: () => ({}),
     min: undefined,
     max: undefined,
     step: 1,
+    id: undefined,
     type: 'text',
-    size: 'md',
-    contrast: 'default',
-    inputmode: 'numeric',
-    shape: undefined,
+    inputmode: undefined,
+    rounded: undefined,
+    size: undefined,
+    contrast: undefined,
     label: undefined,
     icon: undefined,
+    placeholder: undefined,
+    error: false,
     iconDecrement: 'lucide:minus',
     iconIncrement: 'lucide:plus',
-    error: false,
-    placeholder: undefined,
     classes: () => ({}),
   },
 )
 const emits = defineEmits<{
   'update:modelValue': [value?: number]
 }>()
-const appConfig = useAppConfig()
-const shape = computed(() => props.shape ?? appConfig.nui.defaultShapes?.input)
-
-const shapeStyle = {
-  straight: '',
-  rounded: 'nui-input-number-rounded',
-  smooth: 'nui-input-number-smooth',
-  curved: 'nui-input-number-curved',
+
+const inputmode = useNuiDefaultProperty(props, 'BaseInputNumber', 'inputmode')
+const rounded = useNuiDefaultProperty(props, 'BaseInputNumber', 'rounded')
+const size = useNuiDefaultProperty(props, 'BaseInputNumber', 'size')
+const contrast = useNuiDefaultProperty(props, 'BaseInputNumber', 'contrast')
+
+const radiuses = {
+  none: '',
+  sm: 'nui-input-number-rounded',
+  md: 'nui-input-number-smooth',
+  lg: 'nui-input-number-curved',
   full: 'nui-input-number-full',
-}
-const sizeStyle = {
+} as Record<string, string>
+
+const sizes = {
   sm: 'nui-input-number-sm',
   md: 'nui-input-number-md',
   lg: 'nui-input-number-lg',
-}
-const contrastStyle = {
+} as Record<string, string>
+
+const contrasts = {
   default: 'nui-input-number-default',
   'default-contrast': 'nui-input-number-default-contrast',
   muted: 'nui-input-number-muted',
   'muted-contrast': 'nui-input-number-muted-contrast',
-}
+} as Record<string, string>
 
 function looseToNumber(val: any) {
   const n = Number.parseFloat(val)
@@ -354,9 +365,9 @@ if (process.dev) {
   <div
     class="nui-input-number-wrapper"
     :class="[
-      contrastStyle[props.contrast],
-      sizeStyle[props.size],
-      shape && shapeStyle[shape],
+      contrast && contrasts[contrast],
+      size && sizes[size],
+      rounded && radiuses[rounded],
       props.error && !props.loading && 'nui-input-number-error',
       props.loading && 'nui-input-number-loading',
       props.labelFloat && 'nui-input-number-label-float',
@@ -388,7 +399,7 @@ if (process.dev) {
           class="nui-input-number"
           :class="props.classes.input"
           :placeholder="placeholder"
-          :inputmode="props.inputmode"
+          :inputmode="props.inputmode ? props.inputmode : inputmode"
           :disabled="props.disabled"
         />
         <input
@@ -401,7 +412,7 @@ if (process.dev) {
           class="nui-input-number"
           :class="props.classes.input"
           :placeholder="placeholder"
-          :inputmode="props.inputmode"
+          :inputmode="props.inputmode ? props.inputmode : inputmode"
           :disabled="props.disabled"
         />
         <label
diff --git a/nuxt.schema.ts b/nuxt.schema.ts
index 589e3dcc..e5b9d367 100644
--- a/nuxt.schema.ts
+++ b/nuxt.schema.ts
@@ -349,6 +349,32 @@ export default defineNuxtSchema({
          */
         contrast: 'default',
       },
+      BaseInputNumber: {
+        /**
+         * The inputmode to use for the input, usually for mobile devices.
+         *
+         * @type {'decimal' | 'numeric'}
+         */
+        inputmode: 'numeric',
+        /**
+         * The radius of the input.
+         *
+         * @type {'none' | 'sm' | 'md' | 'lg' | 'full'}
+         */
+        rounded: 'sm',
+        /**
+         * The size of the input.
+         *
+         * @type {'sm' | 'md' | 'lg'}
+         */
+        size: 'md',
+        /**
+         * The contrast of the input.
+         *
+         * @type {'default' | 'default-contrast' | 'muted' | 'muted-contrast'}
+         */
+        contrast: 'default',
+      },
       BaseMessage: {
         /**
          * The type of the message.