fix(docs): add input

koory1st · Nov 13, 2023 · c10f182 · c10f182
1 parent 16b504a
commit c10f182
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 15 deletions.
diff --git a/docs/src/lib/i18n/zh/input.js b/docs/src/lib/i18n/zh/input.js
@@ -17,4 +17,7 @@ export default {
   cinput08020:
     '用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。',
   cinput08030: '文本域高度可通过 rows 属性控制',
+  cinput09010: '自适应文本域',
+  cinput09020:
+    '设置文字输入类型的 autosize 属性使得根据内容自动调整的高度。 你可以给 autosize 提供一个包含有最大和最小高度的对象，让输入框自动调整。',
 };
diff --git a/docs/src/routes/+layout.svelte b/docs/src/routes/+layout.svelte
@@ -35,7 +35,7 @@
 
 <SvelContainer class="docs-container" direction="vertical">
   <SvelHeader class="flex border-b border-solid border-gray-200">
-    <SvelRow class="lg:w-6/12 mx-auto items-center">
+    <SvelRow class="xs:w-12/12 sm:w-8/12 md:w-8/12 lg:w-12/12 xl:w-12/12 mx-auto items-center">
       <SvelCol class="title" span={6}>
         <SvelLink href={PUBLIC_BASE_PATH} type="primary" underline={false}>
           <span class="text-2xl font-bold">SvelementUI</span>
@@ -70,7 +70,7 @@
   </SvelMain>
   <SvelFooter>
     <div class="border-t border-solid border-gray-200">
-      <div class="xs:w-12/12 sm:w-8/12 md:w-6/12 lg:w-6/12 xl:w-6/12 mx-auto">
+      <div class="xs:w-12/12 sm:w-8/12 md:w-8/12 lg:w-12/12 xl:w-12/12 mx-auto">
         SvelementUI footer
       </div>
     </div>

diff --git a/docs/src/routes/component/input/+page.svelte b/docs/src/routes/component/input/+page.svelte
@@ -10,6 +10,8 @@
   let inputF = '';
 
   let textarea = '';
+  let textarea1 = '';
+  let textarea2 = '';
 </script>
 
 <h1>{$langFn('cinput01010')}</h1>
@@ -153,8 +155,28 @@
 <script>
   let textarea = '';
 @@@/script>
-<SvelInput bind:value={input1} placeholder="Please input" rows={2} type="textarea" />
+<SvelInput bind:value={textarea} placeholder="Please input" rows={2} type="textarea" />
 `}
 >
-  <SvelInput bind:value={input1} placeholder="Please input" rows={2} type="textarea" />
+  <SvelInput bind:value={textarea} placeholder="Please input" rows={2} type="textarea" />
+</Example>
+
+<h2>{$langFn('cinput09010')}</h2>
+<p>{$langFn('cinput09020')}</p>
+
+<Example
+  code={`
+<script>
+  let textarea = '';
+@@@/script>
+`}
+>
+  <SvelInput autosize bind:value={textarea1} placeholder="Please input" type="textarea" />
+  <div style="margin: 20px 0" />
+  <SvelInput
+    autosize={{ minRows: 2, maxRows: 4 }}
+    bind:value={textarea2}
+    placeholder="Please input"
+    type="textarea"
+  />
 </Example>
diff --git a/packages/input/src/lib/input.svelte b/packages/input/src/lib/input.svelte
@@ -30,13 +30,13 @@
   export let disabled = false;
   /** @type {'large' | 'default' | 'small'} */
   export let size = 'default';
-  /** @type {number} */
-  export let rows = 1;
+  /** @type {number|null} */
+  export let rows = null;
   /** @type {boolean | Object} */
   export let autosize = false;
   /** @type {string} */
   export let autocomplete = 'off';
-  /** @type {string} */
+  /** @type {string|null} */
   export let name = null;
   /** @type {boolean} */
   export let readonly = false;
@@ -275,6 +275,7 @@
   }
 
   function resizeTextarea() {
+    console.log('%c ---> autosize: ', 'color:#F0F;', autosize);
     if (!textAreaRef) {
       return '';
     }

diff --git a/packages/input/src/routes/+page.svelte b/packages/input/src/routes/+page.svelte
@@ -1,30 +1,30 @@
 <script>
   import SvelInput from '$lib/index.js';
-  import { SvelIcon, Calendar, Search } from '@svelement-ui/icon';
 
   let input = '1';
+
   function test(e) {
     console.log('🚀 ~ file: +page.svelte:7 ~ test ~ e:', e);
   }
 </script>
 
 {input}
-<SvelInput bind:value={input} placeholder="Please input" on:input={test} clearable />
+<SvelInput bind:value={input} clearable on:input={test} placeholder="Please input" />
 <SvelInput
   bind:value={input}
-  placeholder="Please input"
-  on:input={test}
-  type="password"
   clearable
+  on:input={test}
+  placeholder="Please input"
   showPassword
+  type="password"
 />
 <SvelInput
+  autosize={{ minRows: 2, maxRows: 4 }}
   bind:value={input}
+  clearable
+  on:input={test}
   placeholder="Please input"
   type="textarea"
-  autosize
-  on:input={test}
-  clearable
 />
 <!--
 <SvelInput bind:value={input} placeholder="Please input" disabled />