@geoffcox/sterling-svelte 0.0.15 → 0.0.16

package/containers/Tab.svelte

@@ -179,14 +179,11 @@ const onKeydown = (event) => {
   tabindex={selected ? 0 : -1}
   type="button"
   on:blur
-  on:click={onClick}
   on:click
   on:dblclick
-  on:focus={onFocus}
   on:focus
   on:focusin
   on:focusout
-  on:keydown={onKeydown}
   on:keydown
   on:keypress
   on:keyup
@@ -206,6 +203,9 @@ const onKeydown = (event) => {
   on:pointerout
   on:pointerup
   on:wheel
+  on:click={onClick}
+  on:focus={onFocus}
+  on:keydown={onKeydown}
 >
   <div class="content">
     <slot {data} disabled={_disabled} {selected} tabId={_tabId} text={_text}>

package/containers/TreeNode.svelte

@@ -104,7 +104,6 @@ const selectPreviousNode = () => {
   }
 };
 const onItemClick = () => {
-  console.log("onItemClick");
   toggleExpanded();
   selectNode();
 };

package/forwardEvents.d.ts

@@ -0,0 +1,12 @@
+export declare const forwardEvents: (node: HTMLElement, params: {
+    target: HTMLElement;
+    events?: string[];
+    customEvents?: string[];
+}) => {
+    update: (params: {
+        target: HTMLElement;
+        events?: string[];
+        customEvents?: [];
+    }) => void;
+    destroy(): void;
+};

package/forwardEvents.js

@@ -0,0 +1,34 @@
+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,
+                cancelable: customEvent.cancelable
+            }));
+        };
+        events?.forEach((e) => node.addEventListener(e, forward));
+        customEvents?.forEach((e) => node.addEventListener(e, forwardCustom));
+        return () => {
+            events?.forEach((e) => node.removeEventListener(e, forward));
+            customEvents?.forEach((e) => node.removeEventListener(e, forwardCustom));
+        };
+    };
+    let unsubscribe = addListeners(node, params.target, params.events, params.customEvents);
+    const update = (params) => {
+        unsubscribe();
+        unsubscribe = addListeners(node, params.target, params.events, params.customEvents);
+    };
+    return {
+        update,
+        destroy() {
+            unsubscribe();
+        }
+    };
+};

package/index.d.ts

@@ -6,18 +6,25 @@ 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';
-export { clickOutside } from './clickOutside';
 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';
@@ -29,4 +36,4 @@ 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, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tree, TreeChevron, TreeItem };
+export { Button, Checkbox, Dialog, Input, Label, List, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tree, TreeChevron, TreeItem };

package/index.js

@@ -7,12 +7,18 @@ 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';
@@ -24,4 +30,4 @@ 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, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tree, TreeChevron, TreeItem };
+export { Button, Checkbox, Dialog, Input, Label, List, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tree, TreeChevron, TreeItem };

package/inputs/Checkbox.svelte

@@ -136,7 +136,7 @@ const inputId = uuid();
     height: 14px;
     left: 50%;
     position: absolute;
-    top: 50%;
+    top: 45%;
     transform: translate(-50%, -50%) rotate(45deg);
     transform-origin: center;
     transition: border-color 250ms;

package/inputs/Select.svelte

@@ -142,7 +142,6 @@ A single item that can be selected from a popup list of items.
   -->
 <div
   bind:this={selectRef}
-  use:clickOutside
   aria-controls={popupId}
   aria-haspopup="listbox"
   aria-expanded={open}
@@ -150,8 +149,7 @@ A single item that can be selected from a popup list of items.
   class:disabled
   role="combobox"
   tabindex="0"
-  on:click_outside={() => (open = false)}
-  on:click={onSelectClick}
+  use:clickOutside
   on:blur
   on:click
   on:copy
@@ -160,7 +158,6 @@ A single item that can be selected from a popup list of items.
   on:focus
   on:focusin
   on:focusout
-  on:keydown={onSelectKeydown}
   on:keydown
   on:keypress
   on:keyup
@@ -173,6 +170,9 @@ A single item that can be selected from a popup list of items.
   on:mouseup
   on:wheel
   on:paste
+  on:click={onSelectClick}
+  on:click_outside={() => (open = false)}
+  on:keydown={onSelectKeydown}
   {...$$restProps}
 >
   {#if $$slots.label}

package/inputs/TextArea.svelte

@@ -39,7 +39,6 @@ $:
     on:focus
     on:focusin
     on:focusout
-    on:input={onInput}
     on:input
     on:invalid
     on:keydown
@@ -56,6 +55,7 @@ $:
     on:submit
     on:reset
     on:wheel
+    on:input={onInput}
     {disabled}
     rows="1"
     {...$$restProps}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -45,6 +45,7 @@
   "type": "module",
   "dependencies": {
     "@floating-ui/dom": "^1.1.0",
+    "keyborg": "^2.0.0",
     "lodash-es": "^4.17.21",
     "uuid": "^9.0.0"
   },
@@ -52,9 +53,18 @@
     "./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",
@@ -68,6 +78,7 @@
     "./display/Label.svelte": "./display/Label.svelte",
     "./display/Progress.svelte": "./display/Progress.svelte",
     "./display/Progress.types": "./display/Progress.types.js",
+    "./forwardEvents": "./forwardEvents.js",
     ".": "./index.js",
     "./inputs/Checkbox.svelte": "./inputs/Checkbox.svelte",
     "./inputs/Input.svelte": "./inputs/Input.svelte",
@@ -77,8 +88,10 @@
     "./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",

package/portal.d.ts

@@ -0,0 +1,8 @@
+export declare const portal: (node: HTMLElement, params: {
+    target: HTMLElement;
+}) => {
+    update: (params: {
+        target: HTMLElement;
+    }) => void;
+    destroy(): void;
+};

package/portal.js

@@ -0,0 +1,19 @@
+export const portal = (node, params) => {
+    const child = node;
+    let portaled = false;
+    const createPortal = (node, params) => {
+        if (!portaled && params.target && node) {
+            params.target.appendChild(node);
+            portaled = true;
+        }
+    };
+    createPortal(child, params);
+    return {
+        update: (params) => createPortal(child, params),
+        destroy() {
+            if (portaled) {
+                child?.parentNode?.removeChild(child);
+            }
+        }
+    };
+};

package/surfaces/Portal.svelte

@@ -0,0 +1,14 @@
+<script>import { portal } from "../portal";
+export let target = document.body;
+</script>
+
+<div class="portal" use:portal={{ target }}>
+  <slot {...$$restProps} />
+</div>
+
+<style>
+  .portal {
+    position: relative;
+    overflow: visible;
+  }
+</style>

package/surfaces/Portal.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        target?: HTMLElement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            [x: string]: any;
+        };
+    };
+};
+export type PortalProps = typeof __propDef.props;
+export type PortalEvents = typeof __propDef.events;
+export type PortalSlots = typeof __propDef.slots;
+export default class Portal extends SvelteComponentTyped<PortalProps, PortalEvents, PortalSlots> {
+}
+export {};