From ffd46a6c506458c1e7cca09568f843ce6a1b59f8 Mon Sep 17 00:00:00 2001
From: koory1st <32436334@qq.com>
Date: Wed, 22 Nov 2023 21:29:02 +0800
Subject: [PATCH] fix(input-number): add logic

---
 .../input-number/src/lib/input-number.svelte  | 33 +++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/input-number/src/lib/input-number.svelte b/packages/input-number/src/lib/input-number.svelte
index 99151c23..f8dab73f 100644
--- a/packages/input-number/src/lib/input-number.svelte
+++ b/packages/input-number/src/lib/input-number.svelte
@@ -5,15 +5,42 @@
   import { SvelIcon, ArrowDown, Minus, ArrowUp, Plus } from '@svelement-ui/icon';
   import SvelInput from '@svelement-ui/input';
 
-  let controls = true;
+  export let controls = true;
   /** @type {'' | 'right'} */
-  let controlsPosition = '';
+  export let controlsPosition = '';
+  /** @type {string} */
+  export let placeholder = '';
+  /** @type {number | ''} */
+  export let value = '';
+  /** @type {number | null} */
+  export let precision = null;
 
   $: classString = a2s(['svel-input-number', $$props.class]);
   $: decreaseClass = a2s(['svel-input-number__decrease']);
   $: increaseClass = a2s(['svel-input-number__increase']);
 
   $: controlsAtRight = controls && controlsPosition === 'right';
+
+  let inputRef;
+  $: dataCurrentValue = value;
+  $: dataUserInput = null;
+
+  function getDisplayValue(dataCurrentValue, dataUserInput) {
+    if (dataUserInput !== null) {
+      return dataUserInput;
+    }
+    let currentValue = dataCurrentValue;
+    if (currentValue === undefined || currentValue === null) {
+      return '';
+    }
+    // todo:
+    if (Object.prototype.toString.call(currentValue).toLowerCase() === '') {
+      currentValue = currentValue.toFixed(precision);
+    }
+    return currentValue;
+  }
+
+  $: displayValue = getDisplayValue(dataCurrentValue, dataUserInput);
 </script>
 
 <div class={classString}>
@@ -35,5 +62,5 @@
       </SvelIcon>
     </span>
   {/if}
-  <SvelInput />
+  <SvelInput bind:this={inputRef} bind:value={displayValue} {placeholder} type="number" />
 </div>