From 8404030a9e657170619d5aca0ce743ba712d953a Mon Sep 17 00:00:00 2001
From: koory1st <32436334@qq.com>
Date: Sat, 9 Dec 2023 14:45:49 +0800
Subject: [PATCH] fix(input): expose textareaStyle

---
 packages/input/package.json            |  3 ++-
 packages/input/src/lib/input.svelte    | 23 +++++++++++++----------
 packages/input/src/routes/+page.svelte |  9 +++++++++
 pnpm-lock.yaml                         |  7 +++++++
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/packages/input/package.json b/packages/input/package.json
index 7c7cc0ba..6c8cbc0c 100644
--- a/packages/input/package.json
+++ b/packages/input/package.json
@@ -38,7 +38,8 @@
     "@svelement-ui/icon": "workspace:^",
     "@svelement-ui/theme-chalk": "workspace:^",
     "@svelement-ui/util-array-2-class-string": "workspace:^",
-    "@svelement-ui/util-array-2-style-string": "workspace:^"
+    "@svelement-ui/util-array-2-style-string": "workspace:^",
+    "to-style": "^1.3.3"
   },
   "repository": {
     "type": "git",
diff --git a/packages/input/src/lib/input.svelte b/packages/input/src/lib/input.svelte
index 17b01759..b3ea95f0 100644
--- a/packages/input/src/lib/input.svelte
+++ b/packages/input/src/lib/input.svelte
@@ -1,6 +1,7 @@
 <script>
   import a2s from '@svelement-ui/util-array-2-class-string';
   import a2st from '@svelement-ui/util-array-2-style-string';
+  import { string as toStyleObject } from 'to-style';
   import { createEventDispatcher, onMount, tick } from 'svelte';
   import { CircleClose, Hide, SvelIcon, View } from '@svelement-ui/icon';
 
@@ -60,6 +61,7 @@
   // export let validateEvent = true;
   /** @type {string | Object} */
   export let inputStyle = {};
+  export let textareaStyle;
 
   // eslint-disable-next-line svelte/valid-compile
   export async function focus() {
@@ -108,9 +110,9 @@
     }
     const style = calcTextareaHeight(textAreaRef, minRows, maxRows);
 
-    style.push(['overflow-y', 'hidden']);
+    style['overflow-y'] = 'hidden';
 
-    return a2st(style);
+    return style;
   }
 
   export function select() {
@@ -188,10 +190,11 @@
     await focus();
   }
 
-  let textareaCalcStyle = '';
-  let textareaStyle;
+  let textareaCalcStyle = {};
+  let textareaStyleStr;
   $: {
-    textareaStyle = a2st([inputStyle, textareaCalcStyle, ['resize', resize]]);
+    textareaStyle = { ...inputStyle, ...textareaCalcStyle, resize };
+    textareaStyleStr = toStyleObject(textareaStyle);
   }
 
   $: containerClass = a2s([
@@ -345,7 +348,7 @@
     hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';
 
     let height = hiddenTextarea.scrollHeight;
-    const result = [];
+    const ret = {};
 
     if (boxSizing === 'border-box') {
       height = height + borderSize;
@@ -362,7 +365,7 @@
         minHeight = minHeight + paddingSize + borderSize;
       }
       height = Math.max(minHeight, height);
-      result.push(['min-height', `${minHeight}px`]);
+      ret['min-height'] = `${minHeight}px`;
     }
     if (isNumber(maxRows)) {
       let maxHeight = singleRowHeight * maxRows;
@@ -371,11 +374,11 @@
       }
       height = Math.min(maxHeight, height);
     }
-    result.push(['height', `${height}px`]);
+    ret['height'] = `${height}px`;
     hiddenTextarea.parentNode?.removeChild(hiddenTextarea);
     hiddenTextarea = undefined;
 
-    return result;
+    return ret;
   }
 
   const CONTEXT_STYLE = [
@@ -581,7 +584,7 @@
       aria-label={label}
       {placeholder}
       {rows}
-      style={textareaStyle}
+      style={textareaStyleStr}
       {maxlength}
       {name}
       on:input={handleInput}
diff --git a/packages/input/src/routes/+page.svelte b/packages/input/src/routes/+page.svelte
index 96e4a3f2..d95821a1 100644
--- a/packages/input/src/routes/+page.svelte
+++ b/packages/input/src/routes/+page.svelte
@@ -32,6 +32,12 @@
   function invokeSelect() {
     select();
   }
+
+  let textareaStyle;
+
+  function showTextareaStyle() {
+    console.log(textareaStyle);
+  }
 </script>
 
 <SvelInput
@@ -52,8 +58,10 @@
   bind:blur
   bind:focus
   bind:resizeTextarea
+  bind:textareaStyle
   bind:value={textarea2}
   placeholder="Please input"
+  resize="both"
   type="textarea"
 />
 <button on:click={showRef}>log ref</button>
@@ -63,3 +71,4 @@
 <button on:click={clear}>clear</button>
 <button on:click={invokeResize}>invokeText</button>
 <button on:click={invokeSelect}>invokeSelect</button>
+<button on:click={showTextareaStyle}>showTextareaStyle</button>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9d4ae121..71f19d6a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -256,6 +256,9 @@ importers:
       '@svelement-ui/util-array-2-style-string':
         specifier: workspace:^
         version: link:../util-array-2-style-string
+      to-style:
+        specifier: ^1.3.3
+        version: 1.3.3
 
   packages/input-number:
     devDependencies:
@@ -5211,6 +5214,10 @@ packages:
       is-number: 7.0.0
     dev: true
 
+  /to-style@1.3.3:
+    resolution: {integrity: sha512-9K8KYegr9hrdm8yPpu5iZjJp5t6RPAp4gFDU5hD9zR8hwqgF4fsoSitMtkRKQG2qkP5j/uG3wajbgV09rjmIqg==}
+    dev: true
+
   /totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}