@geoffcox/sterling-svelte 0.0.12 → 0.0.13

package/index.d.ts

@@ -8,6 +8,7 @@ export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
 export { type ButtonVariant, type ButtonShape } from './buttons/Button.types';
 export { type ProgressColorful } from './display/Progress.types';
+export { type TextAreaResize } from './inputs/TextArea.types';
 export { clickOutside } from './clickOutside';
 import Button from './buttons/Button.svelte';
 import Checkbox from './inputs/Checkbox.svelte';
@@ -20,4 +21,5 @@ import Radio from './inputs/Radio.svelte';
 import Select from './inputs/Select.svelte';
 import Slider from './inputs/Slider.svelte';
 import Switch from './inputs/Switch.svelte';
-export { Button, Checkbox, Dialog, Input, Label, List, Progress, Radio, Select, Slider, Switch };
+import TextArea from './inputs/TextArea.svelte';
+export { Button, Checkbox, Dialog, Input, Label, List, Progress, Radio, Select, Slider, Switch, TextArea };

package/index.js

@@ -8,6 +8,7 @@ export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
 export {} from './buttons/Button.types';
 export {} from './display/Progress.types';
+export {} from './inputs/TextArea.types';
 export { clickOutside } from './clickOutside';
 import Button from './buttons/Button.svelte';
 import Checkbox from './inputs/Checkbox.svelte';
@@ -20,4 +21,5 @@ import Radio from './inputs/Radio.svelte';
 import Select from './inputs/Select.svelte';
 import Slider from './inputs/Slider.svelte';
 import Switch from './inputs/Switch.svelte';
-export { Button, Checkbox, Dialog, Input, Label, List, Progress, Radio, Select, Slider, Switch };
+import TextArea from './inputs/TextArea.svelte';
+export { Button, Checkbox, Dialog, Input, Label, List, Progress, Radio, Select, Slider, Switch, TextArea };

package/inputs/Input.svelte

@@ -92,7 +92,7 @@ const inputId = uuid();
   .sterling-input input {
     font: inherit;
     color: inherit;
-    padding: 0.5em 0.5em;
+    padding: 0.5em;
   }
 
   .sterling-input input,

package/inputs/TextArea.svelte

@@ -0,0 +1,152 @@
+<script>import { v4 as uuid } from "uuid";
+import Label from "../display/Label.svelte";
+export let value;
+export let resize = "none";
+export let disabled = false;
+export let autoHeight = false;
+const inputId = uuid();
+let textAreaRef;
+const autoSetHeight = () => {
+  if (autoHeight && textAreaRef) {
+    textAreaRef.style.height = "auto";
+    textAreaRef.style.height = `${textAreaRef.scrollHeight}px`;
+  }
+};
+const onInput = () => {
+  autoSetHeight();
+};
+$:
+  autoHeight, autoSetHeight();
+</script>
+
+<div class="sterling-text-area" style={`--TextArea__resize: ${resize};`}>
+  {#if $$slots.label}
+    <div class="label">
+      <Label {disabled} for={inputId}>
+        <slot name="label" />
+      </Label>
+    </div>
+  {/if}
+  <textarea
+    {...$$restProps}
+    bind:this={textAreaRef}
+    bind:value
+    on:blur
+    on:click
+    on:change
+    on:copy
+    on:cut
+    on:paste
+    on:dblclick
+    on:focus
+    on:focusin
+    on:focusout
+    on:input={onInput}
+    on:input
+    on:invalid
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mousedown
+    on:mouseenter
+    on:mouseleave
+    on:mousemove
+    on:mouseover
+    on:mouseout
+    on:mouseup
+    on:select
+    on:submit
+    on:reset
+    on:wheel
+    {disabled}
+    rows="1"
+    {...$$restProps}
+  />
+</div>
+
+<style>
+  .sterling-text-area {
+    background-color: var(--Input__background-color);
+    border-color: var(--Input__border-color);
+    border-radius: var(--Input__border-radius);
+    border-style: var(--Input__border-style);
+    border-width: var(--Input__border-width);
+    box-sizing: border-box;
+    color: var(--Input__color);
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    padding: 0;
+    margin: 0;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .sterling-text-area:hover {
+    background-color: var(--Input__background-color--hover);
+    border-color: var(--Input__border-color--hover);
+    color: var(--Input__color--hover);
+  }
+
+  .sterling-text-area:focus-wthin {
+    background-color: var(--Input__background-color--focus);
+    border-color: var(--Input__border-color--focus);
+    color: var(--Input__color--focus);
+    outline-color: var(--Common__outline-color);
+    outline-offset: var(--Common__outline-offset);
+    outline-style: var(--Common__outline-style);
+    outline-width: var(--Common__outline-width);
+  }
+
+  .sterling-text-area:disabled {
+    background-color: var(--Input__background-color--disabled);
+    border-color: var(---Input__border-color--disabled);
+    color: var(--Input__color--disabled);
+    cursor: not-allowed;
+  }
+
+  textarea {
+    background: none;
+    box-sizing: border-box;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+    padding: 0 0.5em 0.5em 0.5em;
+    min-height: 3em;
+    margin: 0.5em 0 0 0;
+    resize: var(--TextArea__resize, none);
+    width: 100%;
+  }
+
+  textarea,
+  textarea:hover,
+  textarea:focus-within,
+  textarea:disabled {
+    background-color: transparent;
+    border: none;
+    outline: none;
+  }
+
+  textarea::placeholder {
+    color: var(--Display__color--faint);
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  textarea:disabled::placeholder {
+    color: var(--Display__color--disabled);
+  }
+
+  .label {
+    font-size: 0.7em;
+    margin: 0.5em 0 0 0.7em;
+  }
+
+  @media (prefers-reduced-motion) {
+    .sterling-text-area,
+    .sterling-text-area textarea::placeholder {
+      transition: none;
+    }
+  }
+</style>

package/inputs/TextArea.svelte.d.ts

@@ -0,0 +1,50 @@
+import { SvelteComponentTyped } from "svelte";
+import type { TextAreaResize } from './TextArea.types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value: string;
+        resize?: TextAreaResize | undefined;
+        disabled?: boolean | undefined;
+        autoHeight?: boolean | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        change: Event;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        paste: ClipboardEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        input: Event;
+        invalid: Event;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        select: Event;
+        submit: SubmitEvent;
+        reset: Event;
+        wheel: WheelEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label: {};
+    };
+};
+export type TextAreaProps = typeof __propDef.props;
+export type TextAreaEvents = typeof __propDef.events;
+export type TextAreaSlots = typeof __propDef.slots;
+export default class TextArea extends SvelteComponentTyped<TextAreaProps, TextAreaEvents, TextAreaSlots> {
+}
+export {};

package/inputs/TextArea.types.d.ts

@@ -0,0 +1 @@
+export type TextAreaResize = 'none' | 'both' | 'horizontal' | 'vertical';

package/inputs/TextArea.types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -63,6 +63,8 @@
     "./inputs/Select.svelte": "./inputs/Select.svelte",
     "./inputs/Slider.svelte": "./inputs/Slider.svelte",
     "./inputs/Switch.svelte": "./inputs/Switch.svelte",
+    "./inputs/TextArea.svelte": "./inputs/TextArea.svelte",
+    "./inputs/TextArea.types": "./inputs/TextArea.types.js",
     "./lists/List.svelte": "./lists/List.svelte",
     "./surfaces/CloseX.svelte": "./surfaces/CloseX.svelte",
     "./surfaces/Dialog.svelte": "./surfaces/Dialog.svelte",