@geoffcox/sterling-svelte 0.0.17 → 0.0.18

package/Checkbox.svelte

@@ -2,7 +2,12 @@
 import Label from "./Label.svelte";
 export let checked = false;
 export let disabled = false;
-const inputId = uuid();
+export let id = void 0;
+$: {
+  if ($$slots.default && id === void 0) {
+    id = uuid();
+  }
+}
 </script>
 
 <!--
@@ -12,6 +17,8 @@ const inputId = uuid();
 <div class="sterling-checkbox">
   <div class="container">
     <input
+      {disabled}
+      {id}
       type="checkbox"
       on:blur
       on:click
@@ -35,15 +42,13 @@ const inputId = uuid();
       on:wheel
       bind:checked
       {...$$restProps}
-      id={inputId}
-      {disabled}
     />
     <div class="indicator" />
   </div>
-  {#if $$slots.label}
+  {#if $$slots.default}
     <div class="label">
-      <Label {disabled} for={inputId}>
-        <slot name="label" {checked} {disabled} />
+      <Label {disabled} for={id}>
+        <slot {checked} {disabled} />
       </Label>
     </div>
   {/if}

package/Checkbox.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
+        id?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -30,7 +31,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        label: {
+        default: {
             checked: boolean;
             disabled: boolean;
         };

package/Field.svelte

@@ -0,0 +1,257 @@
+<script>import { createKeyborg } from "keyborg";
+import { onMount } from "svelte";
+import Tooltip from "./Tooltip.svelte";
+export let forwardClick = false;
+let htmlFor = void 0;
+export { htmlFor as for };
+export let label = void 0;
+export let message = void 0;
+export let required = false;
+export let requiredTip = "This field is required";
+export let status = "none";
+let fieldRef;
+let targetDisabled = false;
+let targetRef = null;
+const findTarget = () => {
+  let candidate = null;
+  if (htmlFor) {
+    candidate = fieldRef?.querySelector(`[id="${htmlFor}"]`);
+  }
+  if (!candidate) {
+    candidate = fieldRef?.querySelector(
+      'a[href], audio[controls], button, details, div[contenteditable], form, input, select, textarea, video[controls], [tabindex]:not([tabindex="-1"])'
+    );
+  }
+  targetRef = candidate;
+};
+const isElementDisabled = (element) => {
+  if (element) {
+    return element.getAttribute("aria-disabled") === "true" || element?.matches(":disabled") || element?.disabled === true || element?.classList.contains("disabled");
+  }
+  return false;
+};
+$:
+  $$slots.default, fieldRef, htmlFor, findTarget();
+$: {
+  targetDisabled = isElementDisabled(targetRef);
+}
+const mutationCallback = (mutations) => {
+  let disabled = void 0;
+  for (let i = 0; i < mutations.length; i++) {
+    const mutation = mutations[i];
+    if (mutation.type === "attributes") {
+      if (mutation.attributeName === "aria-disabled" || mutation.attributeName === "disabled" || mutation.attributeName === "class") {
+        if (isElementDisabled(targetRef)) {
+          disabled = true;
+          break;
+        }
+        disabled = false;
+      }
+    }
+  }
+  if (disabled !== void 0) {
+    targetDisabled = disabled;
+  }
+};
+let mutationObserver = new MutationObserver(mutationCallback);
+$: {
+  mutationObserver.disconnect();
+  if (targetRef) {
+    mutationObserver.observe(targetRef, {
+      attributes: true
+    });
+  }
+}
+let keyborg = createKeyborg(window);
+let usingKeyboard = keyborg.isNavigatingWithKeyboard();
+const keyborgHandler = (value) => {
+  usingKeyboard = value;
+};
+onMount(() => {
+  keyborg.subscribe(keyborgHandler);
+  return () => {
+    keyborg.unsubscribe(keyborgHandler);
+  };
+});
+const onClick = () => {
+  if (forwardClick) {
+    targetRef?.click();
+  }
+};
+</script>
+
+<label
+  aria-disabled={targetDisabled}
+  bind:this={fieldRef}
+  class="sterling-field"
+  class:disabled={targetDisabled}
+  class:using-keyboard={usingKeyboard}
+  for={htmlFor}
+  on:blur
+  on:click
+  on:click={onClick}
+  on:copy
+  on:cut
+  on:dblclick
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mousedown
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:mouseover
+  on:mouseout
+  on:mouseup
+  on:scroll
+  on:wheel
+  on:paste
+  {...$$restProps}
+>
+  <slot name="label" disabled={targetDisabled} for={htmlFor} {label} {required}>
+    <div class="label-text">
+      {label}
+    </div>
+  </slot>
+  <slot />
+  {#if message}
+    <slot name="message" disabled={targetDisabled} {message} {required} {status}>
+      <div
+        class="message"
+        class:info={status === 'info'}
+        class:success={status === 'success'}
+        class:warning={status === 'warning'}
+        class:error={status === 'error'}
+      >
+        {message}
+      </div>
+    </slot>
+  {/if}
+  {#if required}
+    <slot name="required" {requiredTip}>
+      <Tooltip autoShow="hover">
+        <span class="required-tip" slot="tip">{requiredTip}</span>
+        <div class="required">*</div>
+      </Tooltip>
+    </slot>
+  {/if}
+</label>
+
+<style>
+  .sterling-field {
+    background-color: var(--stsv-Input__background-color);
+    border-color: var(--stsv-Input__border-color);
+    border-radius: var(--stsv-Input__border-radius);
+    border-style: var(--stsv-Input__border-style);
+    border-width: var(--stsv-Input__border-width);
+    box-sizing: border-box;
+    color: var(--stsv-Input__color);
+    display: flex;
+    flex-direction: column;
+    font: inherit;
+    margin: 0;
+    overflow: visible;
+    padding: 0;
+    position: relative;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .sterling-field:hover {
+    background-color: var(--stsv-Input__background-color--hover);
+    border-color: var(--stsv-Input__border-color--hover);
+    color: var(--stsv-Input__color--hover);
+  }
+
+  .sterling-field.using-keyboard:focus-within {
+    border-color: var(--stsv-Common__border-color--focus);
+    color: var(--stsv-Common__color--focus);
+    outline-color: var(--stsv-Common__outline-color);
+    outline-offset: var(--stsv-Common__outline-offset);
+    outline-style: var(--stsv-Common__outline-style);
+    outline-width: var(--stsv-Common__outline-width);
+  }
+
+  .sterling-field.disabled {
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv--Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
+  }
+
+  .label-text {
+    color: var(--stsv-Display__color);
+    font-size: 0.8em;
+    margin: 0.5em 0.7em 0.2em 0.2em;
+  }
+
+  .label-text:empty {
+    margin: 0;
+  }
+
+  .sterling-field.disabled .label-text {
+    color: var(--stsv-Common__color--disabled);
+  }
+
+  .message {
+    font-size: 0.8em;
+    background-color: var(--stsv-Display__background-color);
+    color: var(--stsv-Display__color);
+    padding: 0.5em;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .message.info {
+    background-color: var(--stsv-Info__background-color);
+    border-color: var(--stsv-Info__border-color);
+    color: var(--stsv-Info__color);
+  }
+
+  .message.success {
+    background-color: var(--stsv-Success__background-color);
+    border-color: var(--stsv-Success__border-color);
+    color: var(--stsv-Success__color);
+  }
+
+  .message.warning {
+    background-color: var(--stsv-Warning__background-color);
+    border-color: var(--stsv-Warning__border-color);
+    color: var(--stsv-Warning__color);
+  }
+
+  .message.error {
+    background-color: var(--stsv-Error__background-color);
+    border-color: var(--stsv__Error-color);
+    color: var(--stsv-Error__color);
+  }
+
+  .sterling-field.disabled .message {
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv--Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
+  }
+
+  .required {
+    text-align: center;
+    font-weight: bold;
+    box-sizing: border-box;
+    width: 1em;
+    height: 1em;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .required-tip {
+    display: block;
+    padding: 4px;
+  }
+
+  @media (prefers-reduced-motion) {
+    .sterling-field,
+    .message {
+      transition: none;
+    }
+  }
+</style>

package/Field.svelte.d.ts

@@ -0,0 +1,63 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FieldStatus } from './Field.types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        forwardClick?: boolean | undefined;
+        for?: string | undefined;
+        label?: string | undefined;
+        message?: string | undefined;
+        required?: boolean | undefined;
+        requiredTip?: string | undefined;
+        status?: FieldStatus | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        scroll: Event;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label: {
+            disabled: boolean;
+            for: string | undefined;
+            label: string | undefined;
+            required: boolean;
+        };
+        default: {};
+        message: {
+            disabled: boolean;
+            message: string | undefined;
+            required: boolean;
+            status: FieldStatus;
+        };
+        required: {
+            requiredTip: string;
+        };
+    };
+};
+export type FieldProps = typeof __propDef.props;
+export type FieldEvents = typeof __propDef.events;
+export type FieldSlots = typeof __propDef.slots;
+export default class Field extends SvelteComponentTyped<FieldProps, FieldEvents, FieldSlots> {
+}
+export {};

package/Field.types.d.ts

@@ -0,0 +1 @@
+export type FieldStatus = 'none' | 'info' | 'success' | 'warning' | 'error';

package/Field.types.js

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

package/Input.svelte

@@ -1,58 +1,58 @@
 <script>import { v4 as uuid } from "uuid";
 import Label from "./Label.svelte";
-export let value = "";
+export let composed = false;
 export let disabled = false;
-const inputId = uuid();
+export let id = void 0;
+export let value = "";
+$: {
+  if ($$slots.default && id === void 0) {
+    id = uuid();
+  }
+}
 </script>
 
-<!--
-	@component
-	A styled HTML input element with optional label.
--->
-<div class="sterling-input">
-  {#if $$slots.label}
-    <Label {disabled} for={inputId}>
-      <slot name="label" />
-    </Label>
-  {/if}
-  <input
-    bind:value
-    on:blur
-    on:click
-    on:change
-    on:copy
-    on:cut
-    on:paste
-    on:dblclick
-    on:focus
-    on:focusin
-    on:focusout
-    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
-    {...$$restProps}
-    {disabled}
-    id={inputId}
-  />
-</div>
+{#if $$slots.default}
+  <Label {disabled} for={id}>
+    <slot {composed} {disabled} {value} />
+  </Label>
+{/if}
+<input
+  bind:value
+  class="sterling-input"
+  class:composed
+  {disabled}
+  {id}
+  on:blur
+  on:click
+  on:change
+  on:copy
+  on:cut
+  on:paste
+  on:dblclick
+  on:focus
+  on:focusin
+  on:focusout
+  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
+  {...$$restProps}
+/>
 
 <style>
   .sterling-input {
-    display: flex;
-    flex-direction: column;
     background-color: var(--stsv-Input__background-color);
     border-color: var(--stsv-Input__border-color);
     border-radius: var(--stsv-Input__border-radius);
@@ -61,6 +61,8 @@ const inputId = uuid();
     color: var(--stsv-Input__color);
     font: inherit;
     margin: 0;
+    outline: none;
+    padding: 0.5em;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
@@ -70,7 +72,7 @@ const inputId = uuid();
     color: var(--stsv-Input__color--hover);
   }
 
-  .sterling-input:focus-within {
+  .sterling-input:focus {
     background-color: var(--stsv-Input__background-color--focus);
     border-color: var(--stsv-Input__border-color--focus);
     color: var(--stsv-Input__color--focus);
@@ -87,42 +89,26 @@ const inputId = uuid();
     cursor: not-allowed;
   }
 
-  .sterling-input input {
-    font: inherit;
-    color: inherit;
-    padding: 0.5em;
-  }
-
-  .sterling-input input,
-  .sterling-input input:hover,
-  .sterling-input input:focus-within,
-  .sterling-input input:disabled {
-    background-color: transparent;
+  .sterling-input.composed,
+  .sterling-input.composed:hover,
+  .sterling-input.composed:focus,
+  .sterling-input.composed.disabled {
+    background: transparent;
     border: none;
     outline: none;
   }
 
-  .sterling-input input::placeholder {
+  .sterling-input::placeholder {
     color: var(--stsv-Display__color--faint);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
-  .sterling-input input:disabled::placeholder {
+  .sterling-input:disabled::placeholder {
     color: var(--stsv-Display__color--disabled);
   }
 
-  .sterling-input > :global(label) {
-    font-size: 0.7em;
-    margin: 0.5em 0 0 0.7em;
-  }
-
-  .sterling-input > :global(label):empty {
-    margin: 0;
-  }
-
   @media (prefers-reduced-motion) {
-    .sterling-input,
-    .sterling-input input::placeholder {
+    .sterling-input {
       transition: none;
     }
   }

package/Input.svelte.d.ts

@@ -2,8 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: string | undefined;
+        composed?: boolean | undefined;
         disabled?: boolean | undefined;
+        id?: string | undefined;
+        value?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -36,13 +38,16 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        label: {};
+        default: {
+            composed: boolean;
+            disabled: boolean;
+            value: string;
+        };
     };
 };
 export type InputProps = typeof __propDef.props;
 export type InputEvents = typeof __propDef.events;
 export type InputSlots = typeof __propDef.slots;
-/** A styled HTML input element with optional label. */
 export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
 }
 export {};

package/Label.svelte

@@ -1,7 +1,9 @@
 <script>export let disabled = false;
+HTMLLabelElement;
 </script>
 
 <label
+  aria-disabled={disabled}
   class="sterling-label"
   class:disabled
   on:blur
@@ -30,18 +32,15 @@
   <slot />
 </label>
 
-<!-- 
-    @component 
-    A styled HTML label element
--->
 <style>
   label {
-    transition: opacity 250ms;
+    color: var(--stsv-Display__color);
+    transition: color 250ms;
     font: inherit;
   }
 
   label.disabled {
-    opacity: 0.5;
+    color: var(--stsv-Common__color--disabled);
   }
 
   @media (prefers-reduced-motion) {

package/Label.svelte.d.ts

@@ -36,7 +36,6 @@ declare const __propDef: {
 export type LabelProps = typeof __propDef.props;
 export type LabelEvents = typeof __propDef.events;
 export type LabelSlots = typeof __propDef.slots;
-/** A styled HTML label element */
 export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
 }
 export {};