@geoffcox/sterling-svelte 0.0.21 → 0.0.23

package/Radio.svelte

@@ -1,5 +1,5 @@
 <script>import { onMount } from "svelte";
-import { v4 as uuid } from "uuid";
+import { idGenerator } from "./idGenerator";
 import Label from "./Label.svelte";
 export let checked = false;
 export let disabled = false;
@@ -9,7 +9,7 @@ let mounted = false;
 let radioRef;
 $: {
   if ($$slots.default && id === void 0) {
-    id = uuid();
+    id = idGenerator.nextId("Radio");
   }
 }
 $: {
@@ -56,6 +56,12 @@ onMount(() => {
       on:change
       on:change={onChange}
       on:dblclick
+      on:dragend
+      on:dragenter
+      on:dragleave
+      on:dragover
+      on:dragstart
+      on:drop
       on:focus
       on:focusin
       on:focusout
@@ -70,34 +76,30 @@ onMount(() => {
       on:mouseover
       on:mouseout
       on:mouseup
-      on:toggle
       on:wheel
       {...$$restProps}
     />
     <div class="indicator" />
   </div>
   {#if $$slots.default}
-    <div class="label">
-      <Label {disabled} for={id}>
-        <slot {checked} {disabled} {group} inputId={id} value={$$restProps.value}>
-          {$$restProps.value}
-        </slot>
-      </Label>
-    </div>
+    <Label {disabled} for={id}>
+      <slot {checked} {disabled} {group} inputId={id} value={$$restProps.value}>
+        {$$restProps.value}
+      </slot>
+    </Label>
   {/if}
 </div>
 
 <style>
   .sterling-radio {
-    display: inline-flex;
-    align-content: stretch;
-    align-items: stretch;
+    align-content: center;
+    align-items: center;
     box-sizing: border-box;
+    display: inline-flex;
     font: inherit;
-    gap: 0.4em;
+    margin: 0;
     outline: none;
     padding: 0;
-    margin: 0;
   }
   /* 
 		The container 
@@ -111,6 +113,7 @@ onMount(() => {
     font: inherit;
     display: flex;
     align-items: center;
+    margin-right: 0.25em;
   }
 
   /*
@@ -184,11 +187,6 @@ onMount(() => {
     background-color: var(--stsv-Common__color--disabled);
   }
 
-  .label {
-    user-select: none;
-    margin-top: 0.25em;
-  }
-
   @media (prefers-reduced-motion) {
     .indicator,
     .indicator::after {

package/Radio.svelte.d.ts

@@ -15,6 +15,12 @@ declare const __propDef: {
         click: MouseEvent;
         change: Event;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;
@@ -29,7 +35,6 @@ declare const __propDef: {
         mouseover: MouseEvent;
         mouseout: MouseEvent;
         mouseup: MouseEvent;
-        toggle: Event;
         wheel: WheelEvent;
     } & {
         [evt: string]: CustomEvent<any>;

package/Select.svelte

@@ -1,9 +1,9 @@
 <script>import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
 import { createEventDispatcher, onMount, tick } from "svelte";
-import { v4 as uuid } from "uuid";
 import { clickOutside } from "./actions/clickOutside";
+import { idGenerator } from "./idGenerator";
 import List from "./List.svelte";
-const popupId = uuid();
+const popupId = idGenerator.nextId("Select-popup");
 export let composed = false;
 export let disabled = false;
 export let open = false;
@@ -176,6 +176,12 @@ const onListSelect = (event) => {
   on:copy
   on:cut
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/Select.svelte.d.ts

@@ -17,6 +17,12 @@ declare const __propDef: {
         copy: ClipboardEvent;
         cut: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Slider.svelte

@@ -146,6 +146,12 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/Slider.svelte.d.ts

@@ -18,6 +18,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Switch.svelte

@@ -1,11 +1,11 @@
-<script>import { v4 as uuid } from "uuid";
-import Label from "./Label.svelte";
+<script>import Label from "./Label.svelte";
+import { idGenerator } from "./idGenerator";
 export let checked = false;
 export let disabled = false;
 export let vertical = false;
 export let onText = void 0;
 export let offText = void 0;
-const inputId = uuid();
+const inputId = idGenerator.nextId("Switch");
 let inputRef;
 let switchWidth = 0;
 let switchHeight = 0;
@@ -49,6 +49,12 @@ export const focus = (options) => {
     on:click
     on:change
     on:dblclick
+    on:dragend
+    on:dragenter
+    on:dragleave
+    on:dragover
+    on:dragstart
+    on:drop
     on:focus
     on:focusin
     on:focusout
@@ -63,7 +69,6 @@ export const focus = (options) => {
     on:mouseover
     on:mouseout
     on:mouseup
-    on:toggle
     on:wheel
     {...$$restProps}
   />

package/Switch.svelte.d.ts

@@ -16,6 +16,12 @@ declare const __propDef: {
         click: MouseEvent;
         change: Event;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;
@@ -30,7 +36,6 @@ declare const __propDef: {
         mouseover: MouseEvent;
         mouseout: MouseEvent;
         mouseup: MouseEvent;
-        toggle: Event;
         wheel: WheelEvent;
     } & {
         [evt: string]: CustomEvent<any>;

package/Tab.svelte

@@ -47,6 +47,12 @@ export const focus = (options) => {
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/Tab.svelte.d.ts

@@ -13,6 +13,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/TabList.svelte

@@ -193,6 +193,12 @@ setContext(TAB_LIST_CONTEXT_KEY, {
   on:copy
   on:cut
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/TabList.svelte.d.ts

@@ -18,6 +18,12 @@ declare const __propDef: {
         copy: ClipboardEvent;
         cut: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/TextArea.svelte

@@ -43,6 +43,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   rows="1"
   style={`--TextArea__resize: ${resize};`}
   bind:value
+  on:beforeinput
   on:blur
   on:click
   on:change
@@ -50,6 +51,12 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
   on:cut
   on:paste
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/TextArea.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         setRangeText?: ((replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void) | undefined;
     };
     events: {
+        beforeinput: InputEvent;
         blur: FocusEvent;
         click: MouseEvent;
         change: Event;
@@ -20,6 +21,12 @@ declare const __propDef: {
         cut: ClipboardEvent;
         paste: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Tooltip.svelte

@@ -24,7 +24,6 @@ const computeTooltipPosition = async () => {
         element: arrowRef
       })
     ];
-    console.log(placement);
     position = await computePosition(reference, tooltipRef, {
       placement,
       middleware

package/Tree.svelte

@@ -70,6 +70,12 @@ setContext(TREE_CONTEXT_KEY, {
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/Tree.svelte.d.ts

@@ -13,6 +13,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Tree.types.d.ts

@@ -14,15 +14,3 @@ export type TreeContext = {
      */
     selectedValue: Writable<string | undefined>;
 };
-/**
- * The context for a tree item.
- */
-export type TreeItemContext = {
-    /**
-     * How many levels deep this tree item is in the tree hierarchy.
-     * A top level item's depth is zero.
-     */
-    depth: number;
-    /** If the tree item is disabled */
-    disabled: Readable<boolean>;
-};

package/TreeChevron.svelte

@@ -17,7 +17,44 @@ $: {
 }
 </script>
 
-<div class="tree-chevron" class:leaf={!hasChildren} class:animate class:expanded />
+<div
+  class="tree-chevron"
+  class:leaf={!hasChildren}
+  class:animate
+  class:expanded
+  on:blur
+  on:click
+  on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
+  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:pointercancel
+  on:pointerdown
+  on:pointerenter
+  on:pointerleave
+  on:pointermove
+  on:pointerover
+  on:pointerout
+  on:pointerup
+  on:wheel
+  {...$$restProps}
+/>
 
 <style>
   .tree-chevron {

package/TreeChevron.svelte.d.ts

@@ -1,10 +1,43 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         expanded?: boolean | undefined;
         hasChildren?: boolean | undefined;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
+        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;
+        pointercancel: PointerEvent;
+        pointerdown: PointerEvent;
+        pointerenter: PointerEvent;
+        pointerleave: PointerEvent;
+        pointermove: PointerEvent;
+        pointerover: PointerEvent;
+        pointerout: PointerEvent;
+        pointerup: PointerEvent;
+        wheel: WheelEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/TreeItem.svelte

@@ -244,6 +244,12 @@ A item in a Tree displaying the item and children.
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout

package/TreeItem.svelte.d.ts

@@ -19,6 +19,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/TreeItem.types.d.ts

@@ -0,0 +1,13 @@
+import type { Readable } from 'svelte/store';
+/**
+ * The context for a tree item.
+ */
+export type TreeItemContext = {
+    /**
+     * How many levels deep this tree item is in the tree hierarchy.
+     * A top level item's depth is zero.
+     */
+    depth: number;
+    /** If the tree item is disabled */
+    disabled: Readable<boolean>;
+};

package/TreeItem.types.js

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

package/TreeItemDisplay.svelte

@@ -27,6 +27,12 @@ export const focus = (options) => {
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout
@@ -85,6 +91,7 @@ export const focus = (options) => {
   }
 
   .sterling-tree-item.disabled {
+    background-color: var(--stsv-Input__background-color--disabled);
     color: var(--stsv-Common__color--disabled);
     cursor: not-allowed;
   }

package/TreeItemDisplay.svelte.d.ts

@@ -16,6 +16,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/idGenerator.d.ts

@@ -0,0 +1,4 @@
+export declare const idGenerator: {
+    next: () => number;
+    nextId: (prefix?: string) => string;
+};

package/idGenerator.js

@@ -0,0 +1,10 @@
+let id = 0;
+const next = () => {
+    return ++id;
+};
+export const idGenerator = {
+    next,
+    nextId: (prefix) => {
+        return prefix ? `${prefix}-${next()}` : `${next()}`;
+    }
+};

package/index.d.ts

@@ -1,6 +1,7 @@
 export { clickOutside } from './actions/clickOutside';
 export { forwardEvents } from './actions/forwardEvents';
 export { portal } from './actions/portal';
+export { idGenerator } from './idGenerator';
 export { type Theme, type ThemeActionParams } from './theme/types';
 export { applyDarkTheme } from './theme/applyDarkTheme';
 export { applyLightTheme } from './theme/applyLightTheme';
@@ -20,7 +21,8 @@ export type { ProgressColorful } from './Progress.types';
 export type { TabListContext } from './TabList.types';
 export type { TextAreaResize } from './TextArea.types';
 export type { TooltipShowOn } from './Tooltip.types';
-export type { TreeContext, TreeItemContext } from './Tree.types';
+export type { TreeContext } from './Tree.types';
+export type { TreeItemContext } from './TreeItem.types';
 export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
 export { FIELD_STATUSES } from './Field.constants';
 export { FLOATING_PLACEMENTS } from './floating-ui.constants';

package/index.js

@@ -2,6 +2,8 @@
 export { clickOutside } from './actions/clickOutside';
 export { forwardEvents } from './actions/forwardEvents';
 export { portal } from './actions/portal';
+// ----- functions ----- //
+export { idGenerator } from './idGenerator';
 // ----- theme ----- //
 export {} from './theme/types';
 export { applyDarkTheme } from './theme/applyDarkTheme';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -18,15 +18,14 @@
     "javascript"
   ],
   "devDependencies": {
-    "@fontsource/fira-mono": "^4.5.10",
-    "@fontsource/overpass": "^4.5.10",
+    "@fontsource/open-sans": "^4.5.14",
+    "@fontsource/source-code-pro": "^4.5.14",
     "@playwright/test": "^1.28.1",
-    "@sveltejs/adapter-auto": "^1.0.0",
+    "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/adapter-static": "^1.0.0",
-    "@sveltejs/kit": "^1.0.0",
+    "@sveltejs/kit": "^1.5.0",
     "@sveltejs/package": "^1.0.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "eslint": "^8.28.0",
@@ -36,18 +35,17 @@
     "prettier": "^2.8.0",
     "prettier-plugin-svelte": "^2.8.1",
     "svelte": "^3.54.0",
-    "svelte-check": "^2.9.2",
+    "svelte-check": "^3.0.1",
     "tslib": "^2.4.1",
     "typescript": "^4.9.3",
-    "vite": "^4.0.0",
+    "vite": "^4.2.0",
     "vitest": "^0.25.3"
   },
   "type": "module",
   "dependencies": {
     "@floating-ui/dom": "^1.1.0",
     "keyborg": "^2.0.0",
-    "lodash-es": "^4.17.21",
-    "uuid": "^9.0.0"
+    "lodash-es": "^4.17.21"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -102,12 +100,14 @@
     "./Tree.types": "./Tree.types.js",
     "./TreeChevron.svelte": "./TreeChevron.svelte",
     "./TreeItem.svelte": "./TreeItem.svelte",
+    "./TreeItem.types": "./TreeItem.types.js",
     "./TreeItemDisplay.svelte": "./TreeItemDisplay.svelte",
     "./actions/clickOutside": "./actions/clickOutside.js",
     "./actions/forwardEvents": "./actions/forwardEvents.js",
     "./actions/portal": "./actions/portal.js",
     "./floating-ui.constants": "./floating-ui.constants.js",
     "./floating-ui.types": "./floating-ui.types.js",
+    "./idGenerator": "./idGenerator.js",
     ".": "./index.js",
     "./theme/applyDarkTheme": "./theme/applyDarkTheme.js",
     "./theme/applyLightTheme": "./theme/applyLightTheme.js",