@geoffcox/sterling-svelte 0.0.16 → 0.0.18

package/TreeItem.svelte.d.ts

@@ -0,0 +1,65 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        disabled?: boolean | undefined;
+        value: string;
+        selectItem?: (() => void) | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        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;
+        pointercancel: PointerEvent;
+        pointerdown: PointerEvent;
+        pointerenter: PointerEvent;
+        pointerleave: PointerEvent;
+        pointermove: PointerEvent;
+        pointerover: PointerEvent;
+        pointerout: PointerEvent;
+        pointerup: PointerEvent;
+        wheel: WheelEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        item: {
+            depth: number;
+            disabled: boolean;
+            expanded: boolean;
+            hasChildren: boolean;
+            selected: boolean;
+            value: string;
+        };
+        label: {
+            depth: number;
+            disabled: boolean;
+            expanded: boolean;
+            hasChildren: boolean;
+            selected: boolean;
+            value: string;
+        };
+        default: {};
+    };
+};
+export type TreeItemProps = typeof __propDef.props;
+export type TreeItemEvents = typeof __propDef.events;
+export type TreeItemSlots = typeof __propDef.slots;
+/** A item in a Tree displaying the item and children. */
+export default class TreeItem extends SvelteComponentTyped<TreeItemProps, TreeItemEvents, TreeItemSlots> {
+    get selectItem(): () => void;
+}
+export {};

package/{containers/TreeItem.svelte → TreeItemDisplay.svelte}

@@ -3,17 +3,16 @@ export let depth = 0;
 export let disabled = false;
 export let expanded = false;
 export let hasChildren = false;
+export let value;
 export let selected = false;
-export let nodeId;
-export let node = void 0;
 </script>
 
 <div
-  class="sterling-tree-node-item"
+  class="sterling-tree-item"
   class:disabled
   class:expanded
   class:selected
-  style={`--sterling-tree-node-depth: ${depth}`}
+  style={`--sterling-tree-item-depth: ${depth}`}
   on:blur
   on:click
   on:dblclick
@@ -42,43 +41,44 @@ export let node = void 0;
   {...$$restProps}
 >
   <TreeChevron {expanded} {hasChildren} />
-  <slot {depth} {disabled} {expanded} {hasChildren} {selected} {node} {nodeId} />
+  <slot {depth} {disabled} {expanded} {hasChildren} {selected} {value} />
 </div>
 
 <style>
-  .sterling-tree-node-item {
+  .sterling-tree-item {
     align-content: center;
     align-items: center;
     background-color: transparent;
     box-sizing: border-box;
-    color: var(--Input__color);
+    color: var(--stsv-Input__color);
     display: grid;
     grid-template-columns: auto 1fr;
     column-gap: 0.25em;
     margin: 0;
     outline: none;
     padding: 0.5em;
-    padding-left: calc(0.5em * var(--sterling-tree-node-depth));
+    padding-left: calc(0.2em + (0.5em * var(--sterling-tree-item-depth)));
     text-overflow: ellipsis;
     transition: background-color 250ms, color 250ms, border-color 250ms;
     white-space: nowrap;
   }
 
-  .sterling-tree-node-item:hover {
-    background-color: var(--Button__background-color--hover);
-    color: var(--Button__color--hover);
+  .sterling-tree-item:hover {
+    background-color: var(--stsv-Button__background-color--hover);
+    color: var(--stsv-Button__color--hover);
   }
 
-  .sterling-tree-node-item.selected {
-    background-color: var(--Input__background-color--selected);
-    color: var(--Input__color--selected);
+  .sterling-tree-item.selected {
+    background-color: var(--stsv-Input__background-color--selected);
+    color: var(--stsv-Input__color--selected);
   }
 
-  .sterling-tree-node-item.disabled {
-    color: var(--Input__color--disabled);
+  .sterling-tree-item.disabled {
+    color: var(--stsv-Common__color--disabled);
+    cursor: not-allowed;
   }
 
-  .sterling-tree-node-item.leaf {
+  .sterling-tree-item.leaf {
     border: none;
     background: currentColor;
     border-radius: 50%;
@@ -89,7 +89,7 @@ export let node = void 0;
   }
 
   @media (prefers-reduced-motion) {
-    .sterling-tree-node-item {
+    .sterling-tree-item {
       transition: none;
     }
   }

package/{containers/TreeItem.svelte.d.ts → TreeItemDisplay.svelte.d.ts}

@@ -1,17 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TreeNodeData } from './Tree.types';
-declare class __sveltets_Render<T> {
-    props(): {
+declare const __propDef: {
+    props: {
         [x: string]: any;
         depth?: number | undefined;
         disabled?: boolean | undefined;
         expanded?: boolean | undefined;
         hasChildren?: boolean | undefined;
+        value: string;
         selected?: boolean | undefined;
-        nodeId: string;
-        node?: TreeNodeData<T> | undefined;
     };
-    events(): {
+    events: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
@@ -40,21 +38,20 @@ declare class __sveltets_Render<T> {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {
+    slots: {
         default: {
             depth: number;
             disabled: boolean;
             expanded: boolean;
             hasChildren: boolean;
             selected: boolean;
-            node: TreeNodeData<T> | undefined;
-            nodeId: string;
+            value: string;
         };
     };
-}
-export type TreeItemProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type TreeItemEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type TreeItemSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class TreeItem<T> extends SvelteComponentTyped<TreeItemProps<T>, TreeItemEvents<T>, TreeItemSlots<T>> {
+};
+export type TreeItemDisplayProps = typeof __propDef.props;
+export type TreeItemDisplayEvents = typeof __propDef.events;
+export type TreeItemDisplaySlots = typeof __propDef.slots;
+export default class TreeItemDisplay extends SvelteComponentTyped<TreeItemDisplayProps, TreeItemDisplayEvents, TreeItemDisplaySlots> {
 }
 export {};

package/{forwardEvents.js → actions/forwardEvents.js}

@@ -2,11 +2,9 @@ import { custom_event } from 'svelte/internal';
 export const forwardEvents = (node, params) => {
     const addListeners = (node, target, events, customEvents) => {
         let forward = (event) => {
-            console.log('forward', node, target, event);
             target.dispatchEvent(event);
         };
         let forwardCustom = (event) => {
-            console.log('custom forward', node, target, event);
             const customEvent = event;
             target.dispatchEvent(custom_event(customEvent.type, customEvent.detail, {
                 bubbles: customEvent.bubbles,

package/index.d.ts

@@ -1,3 +1,6 @@
+export { clickOutside } from './actions/clickOutside';
+export { forwardEvents } from './actions/forwardEvents';
+export { portal } from './actions/portal';
 export { type Theme, type ThemeActionParams } from './theme/types';
 export { applyDarkTheme } from './theme/applyDarkTheme';
 export { applyLightTheme } from './theme/applyLightTheme';
@@ -6,34 +9,44 @@ export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
 export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
-export { clickOutside } from './clickOutside';
-export { menuBarContextKey, menuItemContextKey } from './containers/Menus.constants';
-export type { ButtonVariant, ButtonShape } from './buttons/Button.types';
-export type { MenuItemRegistration, MenuBarContext, MenuItemContext } from './containers/Menus.types';
-export type { ProgressColorful } from './display/Progress.types';
-export type { TextAreaResize } from './inputs/TextArea.types';
-export type { TabData } from './containers/Tabs.types';
-export type { TreeNodeData } from './containers/Tree.types';
-import Button from './buttons/Button.svelte';
-import Checkbox from './inputs/Checkbox.svelte';
-import Dialog from './surfaces/Dialog.svelte';
-import Input from './inputs/Input.svelte';
-import Label from './display/Label.svelte';
-import List from './containers/List.svelte';
-import Menu from './containers/Menu.svelte';
-import MenuBar from './containers/MenuBar.svelte';
-import MenuButton from './buttons/MenuButton.svelte';
-import MenuItem from './containers/MenuItem.svelte';
-import MenuSeparator from './containers/MenuSeparator.svelte';
-import Progress from './display/Progress.svelte';
-import Radio from './inputs/Radio.svelte';
-import Select from './inputs/Select.svelte';
-import Slider from './inputs/Slider.svelte';
-import Switch from './inputs/Switch.svelte';
-import Tab from './containers/Tab.svelte';
-import TabList from './containers/TabList.svelte';
-import TextArea from './inputs/TextArea.svelte';
-import Tree from './containers/Tree.svelte';
-import TreeChevron from './containers/TreeChevron.svelte';
-import TreeItem from './containers/TreeItem.svelte';
-export { Button, Checkbox, Dialog, Input, Label, List, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tree, TreeChevron, TreeItem };
+export { menuBarContextKey, menuItemContextKey } from './Menus.constants';
+export type { ButtonVariant, ButtonShape } from './Button.types';
+export type { FieldStatus } from './Field.types';
+export type { ListContext } from './List.types';
+export type { MenuBarContext, MenuItemContext, MenuItemRegistration } from './Menus.types';
+export type { ProgressColorful } from './Progress.types';
+export type { TabListContext } from './TabList.types';
+export type { TextAreaResize } from './TextArea.types';
+export type { TooltipAutoShow, TooltipPlacement } from './Tooltip.types';
+export type { TreeContext, TreeItemContext } from './Tree.types';
+export { listContextKey } from './List.constants';
+export { tabListContextKey } from './TabList.constants';
+export { treeContextKey, treeItemContextKey } from './Tree.constants';
+import Button from './Button.svelte';
+import Checkbox from './Checkbox.svelte';
+import Dialog from './Dialog.svelte';
+import Field from './Field.svelte';
+import Input from './Input.svelte';
+import Label from './Label.svelte';
+import List from './List.svelte';
+import ListItem from './ListItem.svelte';
+import Menu from './Menu.svelte';
+import MenuBar from './MenuBar.svelte';
+import MenuButton from './MenuButton.svelte';
+import MenuItem from './MenuItem.svelte';
+import MenuItemDisplay from './MenuItemDisplay.svelte';
+import MenuSeparator from './MenuSeparator.svelte';
+import Progress from './Progress.svelte';
+import Radio from './Radio.svelte';
+import Select from './Select.svelte';
+import Slider from './Slider.svelte';
+import Switch from './Switch.svelte';
+import Tab from './Tab.svelte';
+import TabList from './TabList.svelte';
+import TextArea from './TextArea.svelte';
+import Tooltip from './Tooltip.svelte';
+import Tree from './Tree.svelte';
+import TreeChevron from './TreeChevron.svelte';
+import TreeItem from './TreeItem.svelte';
+import TreeItemDisplay from './TreeItemDisplay.svelte';
+export { Button, Checkbox, Dialog, Field, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/index.js

@@ -1,3 +1,8 @@
+// ----- actions ----- //
+export { clickOutside } from './actions/clickOutside';
+export { forwardEvents } from './actions/forwardEvents';
+export { portal } from './actions/portal';
+// ----- theme ----- //
 export {} from './theme/types';
 export { applyDarkTheme } from './theme/applyDarkTheme';
 export { applyLightTheme } from './theme/applyLightTheme';
@@ -6,28 +11,38 @@ export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
 export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
-export { clickOutside } from './clickOutside';
-export { menuBarContextKey, menuItemContextKey } from './containers/Menus.constants';
-import Button from './buttons/Button.svelte';
-import Checkbox from './inputs/Checkbox.svelte';
-import Dialog from './surfaces/Dialog.svelte';
-import Input from './inputs/Input.svelte';
-import Label from './display/Label.svelte';
-import List from './containers/List.svelte';
-import Menu from './containers/Menu.svelte';
-import MenuBar from './containers/MenuBar.svelte';
-import MenuButton from './buttons/MenuButton.svelte';
-import MenuItem from './containers/MenuItem.svelte';
-import MenuSeparator from './containers/MenuSeparator.svelte';
-import Progress from './display/Progress.svelte';
-import Radio from './inputs/Radio.svelte';
-import Select from './inputs/Select.svelte';
-import Slider from './inputs/Slider.svelte';
-import Switch from './inputs/Switch.svelte';
-import Tab from './containers/Tab.svelte';
-import TabList from './containers/TabList.svelte';
-import TextArea from './inputs/TextArea.svelte';
-import Tree from './containers/Tree.svelte';
-import TreeChevron from './containers/TreeChevron.svelte';
-import TreeItem from './containers/TreeItem.svelte';
-export { Button, Checkbox, Dialog, Input, Label, List, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tree, TreeChevron, TreeItem };
+// ----- Button ----- //
+export { menuBarContextKey, menuItemContextKey } from './Menus.constants';
+// ----- Component constants ----- //
+export { listContextKey } from './List.constants';
+export { tabListContextKey } from './TabList.constants';
+export { treeContextKey, treeItemContextKey } from './Tree.constants';
+// ----- Components ----- //
+import Button from './Button.svelte';
+import Checkbox from './Checkbox.svelte';
+import Dialog from './Dialog.svelte';
+import Field from './Field.svelte';
+import Input from './Input.svelte';
+import Label from './Label.svelte';
+import List from './List.svelte';
+import ListItem from './ListItem.svelte';
+import Menu from './Menu.svelte';
+import MenuBar from './MenuBar.svelte';
+import MenuButton from './MenuButton.svelte';
+import MenuItem from './MenuItem.svelte';
+import MenuItemDisplay from './MenuItemDisplay.svelte';
+import MenuSeparator from './MenuSeparator.svelte';
+import Progress from './Progress.svelte';
+import Radio from './Radio.svelte';
+import Select from './Select.svelte';
+import Slider from './Slider.svelte';
+import Switch from './Switch.svelte';
+import Tab from './Tab.svelte';
+import TabList from './TabList.svelte';
+import TextArea from './TextArea.svelte';
+import Tooltip from './Tooltip.svelte';
+import Tree from './Tree.svelte';
+import TreeChevron from './TreeChevron.svelte';
+import TreeItem from './TreeItem.svelte';
+import TreeItemDisplay from './TreeItemDisplay.svelte';
+export { Button, Checkbox, Dialog, Field, Input, Label, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -51,47 +51,51 @@
   },
   "exports": {
     "./package.json": "./package.json",
-    "./buttons/Button.svelte": "./buttons/Button.svelte",
-    "./buttons/Button.types": "./buttons/Button.types.js",
-    "./buttons/MenuButton.svelte": "./buttons/MenuButton.svelte",
-    "./clickOutside": "./clickOutside.js",
-    "./containers/List.svelte": "./containers/List.svelte",
-    "./containers/ListItem.svelte": "./containers/ListItem.svelte",
-    "./containers/Menu.svelte": "./containers/Menu.svelte",
-    "./containers/MenuBar.svelte": "./containers/MenuBar.svelte",
-    "./containers/MenuItem.svelte": "./containers/MenuItem.svelte",
-    "./containers/MenuItemDisplay.svelte": "./containers/MenuItemDisplay.svelte",
-    "./containers/MenuSeparator.svelte": "./containers/MenuSeparator.svelte",
-    "./containers/Menus.constants": "./containers/Menus.constants.js",
-    "./containers/Menus.types": "./containers/Menus.types.js",
-    "./containers/Menus.utils": "./containers/Menus.utils.js",
-    "./containers/Tab.svelte": "./containers/Tab.svelte",
-    "./containers/TabList.svelte": "./containers/TabList.svelte",
-    "./containers/Tabs.constants": "./containers/Tabs.constants.js",
-    "./containers/Tabs.types": "./containers/Tabs.types.js",
-    "./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",
-    "./forwardEvents": "./forwardEvents.js",
+    "./Button.svelte": "./Button.svelte",
+    "./Button.types": "./Button.types.js",
+    "./Checkbox.svelte": "./Checkbox.svelte",
+    "./Dialog.svelte": "./Dialog.svelte",
+    "./Field.svelte": "./Field.svelte",
+    "./Field.types": "./Field.types.js",
+    "./Input.svelte": "./Input.svelte",
+    "./Label.svelte": "./Label.svelte",
+    "./List.constants": "./List.constants.js",
+    "./List.svelte": "./List.svelte",
+    "./List.types": "./List.types.js",
+    "./ListItem.svelte": "./ListItem.svelte",
+    "./Menu.svelte": "./Menu.svelte",
+    "./MenuBar.svelte": "./MenuBar.svelte",
+    "./MenuButton.svelte": "./MenuButton.svelte",
+    "./MenuItem.svelte": "./MenuItem.svelte",
+    "./MenuItemDisplay.svelte": "./MenuItemDisplay.svelte",
+    "./MenuSeparator.svelte": "./MenuSeparator.svelte",
+    "./Menus.constants": "./Menus.constants.js",
+    "./Menus.types": "./Menus.types.js",
+    "./Menus.utils": "./Menus.utils.js",
+    "./Progress.svelte": "./Progress.svelte",
+    "./Progress.types": "./Progress.types.js",
+    "./Radio.svelte": "./Radio.svelte",
+    "./Select.svelte": "./Select.svelte",
+    "./Slider.svelte": "./Slider.svelte",
+    "./Switch.svelte": "./Switch.svelte",
+    "./Tab.svelte": "./Tab.svelte",
+    "./TabList.constants": "./TabList.constants.js",
+    "./TabList.svelte": "./TabList.svelte",
+    "./TabList.types": "./TabList.types.js",
+    "./TextArea.svelte": "./TextArea.svelte",
+    "./TextArea.types": "./TextArea.types.js",
+    "./Tooltip.svelte": "./Tooltip.svelte",
+    "./Tooltip.types": "./Tooltip.types.js",
+    "./Tree.constants": "./Tree.constants.js",
+    "./Tree.svelte": "./Tree.svelte",
+    "./Tree.types": "./Tree.types.js",
+    "./TreeChevron.svelte": "./TreeChevron.svelte",
+    "./TreeItem.svelte": "./TreeItem.svelte",
+    "./TreeItemDisplay.svelte": "./TreeItemDisplay.svelte",
+    "./actions/clickOutside": "./actions/clickOutside.js",
+    "./actions/forwardEvents": "./actions/forwardEvents.js",
+    "./actions/portal": "./actions/portal.js",
     ".": "./index.js",
-    "./inputs/Checkbox.svelte": "./inputs/Checkbox.svelte",
-    "./inputs/Input.svelte": "./inputs/Input.svelte",
-    "./inputs/Radio.svelte": "./inputs/Radio.svelte",
-    "./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",
-    "./portal": "./portal.js",
-    "./surfaces/CloseX.svelte": "./surfaces/CloseX.svelte",
-    "./surfaces/Dialog.svelte": "./surfaces/Dialog.svelte",
-    "./surfaces/Portal.svelte": "./surfaces/Portal.svelte",
     "./theme/applyDarkTheme": "./theme/applyDarkTheme.js",
     "./theme/applyLightTheme": "./theme/applyLightTheme.js",
     "./theme/applyTheme": "./theme/applyTheme.js",