Merge pull request #55 from hyvor/textAreaSlot

TextAreaSlot fixes #46
hyvor · Dec 26, 2023 · cfe987d · cfe987d
2 parents 4a330f5 + 7880ab4
commit cfe987d
Show file tree

Hide file tree

Showing 2 changed files with 143 additions and 31 deletions.
diff --git a/src/lib/components/Textarea/Textarea.svelte b/src/lib/components/Textarea/Textarea.svelte
@@ -4,35 +4,64 @@
     export let rows : number = 5;
     export let cols : number = 40;
     export let state : "default" | "success" | "warning" | "error" = "default";
+
+    let input: HTMLTextAreaElement;
 </script>
 
-<textarea 
-    bind:value={value}
 
-    on:keyup
-    on:keydown
-    on:keypress
-    on:focus
-    on:blur
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:change
-    on:input
+<span class="input-wrap state-{state}" 
+    class:block
+    on:click={() => input.focus()}
+    on:keydown={(e) => {
+        if (e.key === 'Enter') {
+            input.blur();
+        }
+    }}
+    role="textbox"
+    tabindex="0"   
+>
 
-    {rows}
-    {cols}
+    {#if $$slots.start}
+        <span class="slot start" 
+
+        >
+            <slot name="start" />
+        </span>
+    {/if}
 
-    {...$$restProps}
+    <textarea 
+        bind:value={value}
+        bind:this={input}
+
 
-    class:block
-    class="state-{state}"
+        on:keyup
+        on:keydown
+        on:keypress
+        on:focus
+        on:blur
+        on:click
+        on:mouseover
+        on:mouseenter
+        on:mouseleave
+        on:change
+        on:input
+
+        {rows}
+        {cols}
+
+        {...$$restProps}
 
-></textarea>
+    ></textarea>
+
+    {#if $$slots.end}
+        <span class="slot end">
+            <slot name="end" />
+        </span>
+    {/if}
+</span>
 
 <style lang="scss">
-    textarea {
+    .input-wrap {
         padding: 10px 15px;
         background-color: var(--input);
         transition: .2s box-shadow;
@@ -42,39 +71,78 @@
         border: none;
         transition: .2s box-shadow;
         max-width: 100%;
+        color: inherit;
+
+        display: inline-flex;
+        resize: vertical;
+        overflow: auto;
+        align-items: flex-start;
+        justify-content: center;
+
+        &:focus-within {
+            outline: 0;
+            box-shadow: 0 0 0 var(--local-shadow-size) var(--accent-light);
+        }
 
         --local-shadow-size: 2px;
     }
-    textarea:focus {
-        box-shadow:  0 0 0 var(--local-shadow-size) var(--accent-light);
-    }
-    textarea.block {
+    
+    .input-wrap.block {
         display: block;
         width: 100%;
         resize: vertical;
     }
 
-    textarea:focus-visible {
+    .input-wrap:focus-visible {
         outline: 0;
     }
 
-    textarea.state-error {
+    .input-wrap.state-error {
         box-shadow: 0 0 0 var(--local-shadow-size) var(--red-light);
-        &:focus {
+        &:focus-within {
             box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--red-light);
         }
     }
-    textarea.state-success {
+    .input-wrap.state-success {
         box-shadow: 0 0 0 2px var(--green-light);
-        &:focus {
+        &:focus-within {
             box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--green-light);
         }
     }
-    textarea.state-warning {
+    .input-wrap.state-warning {
         box-shadow: 0 0 0 2px var(--orange-light);
-        &:focus {
+        &:focus-within {
             box-shadow: 0 0 0 calc(var(--local-shadow-size) + 1px) var(--orange-light);
         }
     }
 
+
+    .input-wrap .slot {
+        padding: 0 10px;
+    }
+
+    .input-wrap .slot.start {
+        margin-right: 10px;
+        
+    }
+
+    .input-wrap .slot.end {
+        margin-left: 10px;
+    }
+
+    .input-wrap textarea {
+        flex: 1;
+        width: 100%;
+        border: none;
+        font-family: inherit;
+        font-size: inherit;
+        background: transparent;
+        padding: 0;
+        margin: 0;
+        &:focus {
+            outline: none;
+        }
+        resize: none;
+    }
+
 </style>
diff --git a/src/routes/[[slug]]/docs/Textarea.svelte b/src/routes/[[slug]]/docs/Textarea.svelte
@@ -4,6 +4,8 @@
 	import CodeBlock from '../../../lib/components/CodeBlock/CodeBlock.svelte';
     import Table from "$lib/components/Table/Table.svelte";
     import TableRow from "$lib/components/Table/TableRow.svelte";
+    import { IconPen } from '@hyvor/icons';
+    import Loader from './../../../lib/components/Loader/Loader.svelte';
 
     let val1 = "";
 </script>
@@ -68,6 +70,31 @@
     All other properties are passed through to the native <code>{"<textarea>"}</code> element.
 </p>
 
+<h2 id="slots">Slots</h2>
+
+<Table columns="2fr 3fr">
+
+    <TableRow head>
+        <div>Name</div>
+        <div>Description</div>
+    </TableRow>
+
+    <TableRow>
+        <div><code>start</code></div>
+        <div>
+            Content to be displayed at the start of the input.
+        </div>
+    </TableRow>
+
+    <TableRow>
+        <div><code>end</code></div>
+        <div>
+            Content to be displayed at the end of the input.
+        </div>
+    </TableRow>
+
+</Table>
+
 <h2 id="examples">Examples</h2>
 
 <h3 id="basic">Basic</h3>
@@ -109,4 +136,21 @@
 
 <CodeResult>
     <Textarea placeholder="Custom cols/rows" cols={20} rows={6} />
+</CodeResult>
+
+
+<h3 id="slots">Slots</h3>
+
+<CodeBlock code={`
+    <Textarea placeholder="Write a post">
+        <IconPen slot="start" color="var(--text-light)" />
+        <Loader slot="end" size="small" colorTrack="var(--accent-light)"/>
+    </Textarea>
+`} />
+
+<CodeResult>
+    <Textarea placeholder="Write a post">
+        <IconPen slot="start" color="var(--text-light)" />
+        <Loader slot="end" size="small" colorTrack="var(--accent-light)"/>
+    </Textarea>
 </CodeResult>