@geoffcox/sterling-svelte 0.0.12 → 0.0.14

package/inputs/Input.svelte

@@ -11,11 +11,9 @@ const inputId = uuid();
 -->
 <div class="sterling-input">
   {#if $$slots.label}
-    <div class="label">
-      <Label {disabled} for={inputId}>
-        <slot name="label" />
-      </Label>
-    </div>
+    <Label {disabled} for={inputId}>
+      <slot name="label" />
+    </Label>
   {/if}
   <input
     bind:value
@@ -92,7 +90,7 @@ const inputId = uuid();
   .sterling-input input {
     font: inherit;
     color: inherit;
-    padding: 0.5em 0.5em;
+    padding: 0.5em;
   }
 
   .sterling-input input,
@@ -113,9 +111,13 @@ const inputId = uuid();
     color: var(--Display__color--disabled);
   }
 
-  .label {
+  .sterling-input > :global(label) {
     font-size: 0.7em;
-    margin: 0.5em 0 0 0.7em;
+    margin: 0.5em 0.7em;
+  }
+
+  .sterling-input > :global(label):empty {
+    margin: 0;
   }
 
   @media (prefers-reduced-motion) {

package/inputs/Select.svelte

@@ -3,7 +3,7 @@ import { v4 as uuid } from "uuid";
 import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
 import { clickOutside } from "../clickOutside";
 import Label from "../display/Label.svelte";
-import List from "../lists/List.svelte";
+import List from "../containers/List.svelte";
 import Input from "./Input.svelte";
 export let disabled = false;
 export let items = [];
@@ -130,7 +130,6 @@ const onListClick = (event) => {
 };
 const onPendingItemSelected = (event) => {
   pendingSelectedIndex = event.detail.index;
-  console.log("pendingSelectedIndex changed");
   if (!open) {
     selectedIndex = pendingSelectedIndex;
   }
@@ -177,11 +176,16 @@ A single item that can be selected from a popup list of items.
   {...$$restProps}
 >
   {#if $$slots.label}
-    <div class="label">
-      <Label {disabled} for={inputId}>
-        <slot name="label" />
-      </Label>
-    </div>
+    <Label {disabled} for={inputId}>
+      <!-- BUGBUG: Problem with slot let params conflict
+        It seems that when a default slot is used multiple times in a module,
+        the first time sets the possible let params.
+        If we don't define the same let params on this label slot that 
+        is the default slot for label, then using the default slot for list
+        will error saying the property is not defined.
+      -->
+      <slot name="label" index={0} item={undefined} selected={false} />
+    </Label>
   {/if}
   <div class="input" id={inputId}>
     <div class="value">
@@ -204,21 +208,19 @@ A single item that can be selected from a popup list of items.
   >
     <div class="popup-content">
       <slot name="list">
-        {#if $$slots.default === true}
+        {#if $$slots.default}
           <List
             bind:this={listRef}
             selectedIndex={pendingSelectedIndex}
             {items}
             {disabled}
-            let:disabled
-            let:index
-            let:item
-            let:selected
             on:click={onListClick}
             on:keydown={onListKeydown}
             on:itemSelected={onPendingItemSelected}
           >
-            <slot {disabled} {index} {item} {selected} />
+            <svelte:fragment let:disabled let:index let:item let:selected>
+              <slot {disabled} {index} {item} {selected} />
+            </svelte:fragment>
           </List>
         {:else}
           <List
@@ -226,10 +228,6 @@ A single item that can be selected from a popup list of items.
             selectedIndex={pendingSelectedIndex}
             {items}
             {disabled}
-            let:disabled
-            let:index
-            let:item
-            let:selected
             on:click={onListClick}
             on:keydown={onListKeydown}
             on:itemSelected={onPendingItemSelected}
@@ -276,9 +274,13 @@ A single item that can be selected from a popup list of items.
     outline: none;
   }
 
-  .label {
+  .sterling-select > :global(label) {
     font-size: 0.7em;
-    margin: 0.5em 0.7em 0 0.7em;
+    margin: 0.5em 0.7em;
+  }
+
+  .sterling-select > :global(label):empty {
+    margin: 0;
   }
 
   .input {

package/inputs/Select.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
+declare class __sveltets_Render<T> {
+    props(): {
         [x: string]: any;
         disabled?: boolean | undefined;
-        items?: any[] | undefined;
+        items?: T[] | undefined;
         open?: boolean | undefined;
         selectedIndex?: number | undefined;
-        selectedItem?: any;
+        selectedItem?: T | undefined;
     };
-    events: {
+    events(): {
         blur: FocusEvent;
         click: MouseEvent;
         copy: ClipboardEvent;
@@ -34,8 +34,12 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        label: {};
+    slots(): {
+        label: {
+            index: number;
+            item: undefined;
+            selected: boolean;
+        };
         value: {};
         button: {
             open: boolean;
@@ -48,11 +52,11 @@ declare const __propDef: {
             selected: any;
         };
     };
-};
-export type SelectProps = typeof __propDef.props;
-export type SelectEvents = typeof __propDef.events;
-export type SelectSlots = typeof __propDef.slots;
+}
+export type SelectProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type SelectEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type SelectSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
 /** A single item that can be selected from a popup list of items. */
-export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
+export default class Select<T> extends SvelteComponentTyped<SelectProps<T>, SelectEvents<T>, SelectSlots<T>> {
 }
 export {};

package/inputs/Slider.svelte

@@ -126,11 +126,9 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
 -->
 <div class="sterling-slider" class:vertical>
   {#if $$slots.label}
-    <div class="label">
-      <Label {disabled} for={inputId}>
-        <slot name="label" />
-      </Label>
-    </div>
+    <Label {disabled} for={inputId}>
+      <slot name="label" />
+    </Label>
   {/if}
   <div
     class="slider"
@@ -174,7 +172,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     height: 100%;
   }
 
-  .label {
+  .sterling-slider > :global(label) {
     font-size: 0.7em;
   }
 

package/inputs/TextArea.svelte

@@ -0,0 +1,154 @@
+<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}
+    <Label {disabled} for={inputId}>
+      <slot name="label" />
+    </Label>
+  {/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);
+  }
+
+  .sterling-text-area > :global(label) {
+    font-size: 0.7em;
+    margin: 0.5em 0.7em;
+  }
+
+  .sterling-text-area > :global(label):empty {
+    margin: 0;
+  }
+
+  @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.14",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -53,6 +53,14 @@
     "./buttons/Button.svelte": "./buttons/Button.svelte",
     "./buttons/Button.types": "./buttons/Button.types.js",
     "./clickOutside": "./clickOutside.js",
+    "./containers/List.svelte": "./containers/List.svelte",
+    "./containers/ListItem.svelte": "./containers/ListItem.svelte",
+    "./containers/Tree.constants": "./containers/Tree.constants.js",
+    "./containers/Tree.svelte": "./containers/Tree.svelte",
+    "./containers/Tree.types": "./containers/Tree.types.js",
+    "./containers/TreeChevron.svelte": "./containers/TreeChevron.svelte",
+    "./containers/TreeItem.svelte": "./containers/TreeItem.svelte",
+    "./containers/TreeNode.svelte": "./containers/TreeNode.svelte",
     "./display/Label.svelte": "./display/Label.svelte",
     "./display/Progress.svelte": "./display/Progress.svelte",
     "./display/Progress.types": "./display/Progress.types.js",
@@ -63,7 +71,8 @@
     "./inputs/Select.svelte": "./inputs/Select.svelte",
     "./inputs/Slider.svelte": "./inputs/Slider.svelte",
     "./inputs/Switch.svelte": "./inputs/Switch.svelte",
-    "./lists/List.svelte": "./lists/List.svelte",
+    "./inputs/TextArea.svelte": "./inputs/TextArea.svelte",
+    "./inputs/TextArea.types": "./inputs/TextArea.types.js",
     "./surfaces/CloseX.svelte": "./surfaces/CloseX.svelte",
     "./surfaces/Dialog.svelte": "./surfaces/Dialog.svelte",
     "./theme/applyDarkTheme": "./theme/applyDarkTheme.js",

package/surfaces/Dialog.svelte

@@ -51,7 +51,6 @@ const onCancel = (event) => {
   return false;
 };
 const onSubmit = (event) => {
-  console.log(event);
   const anyEvent = event;
   if (anyEvent?.submitter.type === "submit") {
     if (dialogRef.open) {
@@ -63,7 +62,6 @@ const onSubmit = (event) => {
       return false;
     }
   } else {
-    console.log("cancelling");
     event.preventDefault();
     return false;
   }