@geoffcox/sterling-svelte 2.0.11 → 2.0.12

package/dist/Splitter.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+  import type { KeyboardEventHandler, PointerEventHandler } from 'svelte/elements';
+  import type { SplitterProps } from './Splitter.types';
+
+  const constrainPercent = (value: number) => {
+    return Math.max(0.0, Math.min(value, 100.0));
+  };
+
+  let {
+    horizontal,
+    initialPrimarySize,
+    minPrimarySize,
+    minSecondarySize,
+    resetOnDoubleClick,
+    primary,
+    split,
+    secondary,
+    change
+  }: SplitterProps = $props();
+
+  let clientWidth: number | undefined = $state();
+  let clientHeight: number | undefined = $state();
+  let primaryClientWidth: number | undefined = $state();
+  let primaryClientHeight: number | undefined = $state();
+  let splitterClientWidth: number | undefined = $state();
+  let splitterClientHeight: number | undefined = $state();
+  let secondaryClientWidth: number | undefined = $state();
+  let secondaryClientHeight: number | undefined = $state();
+
+  let clientSize = $derived(horizontal ? clientHeight : clientWidth);
+  let primaryClientSize = $derived(horizontal ? primaryClientHeight : primaryClientWidth);
+  let splitterClientSize = $derived(horizontal ? splitterClientHeight : splitterClientWidth);
+  let secondaryClientSize = $derived(horizontal ? secondaryClientHeight : secondaryClientWidth);
+
+  let percent: number | undefined = $state();
+
+  let measuredPercent = $derived.by(() => {
+    if (primaryClientSize && splitterClientSize && clientSize) {
+      return constrainPercent(
+        Math.ceil(
+          ((primaryClientSize - splitterClientSize) / (clientSize - splitterClientSize)) * 100
+        )
+      );
+    }
+    return 0;
+  });
+
+  let startPosition: number | undefined = $state();
+  let startPrimarySize: number | undefined = $state();
+  let dragging: boolean = $state(false);
+
+  let primarySize = $derived(percent !== undefined ? `${percent}%` : initialPrimarySize);
+
+  let splitCssVars = $derived({
+    '--primary-size': `${primarySize || '50%'}`,
+    '--min-primary-size': `${minPrimarySize || 0}`,
+    '--min-secondary-size': `${minSecondarySize || 0}`
+  });
+
+  let splitStyle = $derived(
+    Object.entries(splitCssVars)
+      .map(([key, value]) => `${key}:${value}`)
+      .join(';')
+  );
+
+  $effect(() => {
+    change?.({
+      percent: measuredPercent,
+      primarySize: primaryClientSize,
+      secondarySize: secondaryClientSize,
+      dragging
+    });
+  });
+
+  $effect(() => {
+    if (initialPrimarySize) {
+      percent = undefined;
+    }
+  });
+
+  const onPointerDown: PointerEventHandler<HTMLDivElement> = (event) => {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    startPosition = horizontal ? event.clientY : event.clientX;
+    startPrimarySize = primaryClientSize;
+    dragging = true;
+  };
+
+  const onPointerMove: PointerEventHandler<HTMLDivElement> = (event) => {
+    if (
+      event.currentTarget.hasPointerCapture(event.pointerId) &&
+      startPosition !== undefined &&
+      startPrimarySize !== undefined &&
+      clientSize !== undefined &&
+      splitterClientSize !== undefined
+    ) {
+      const position = horizontal ? event.clientY : event.clientX;
+      let newPrimarySize = startPrimarySize + (position - startPosition);
+      newPrimarySize = Math.max(0, Math.min(newPrimarySize, clientSize - splitterClientSize));
+      const newPercent = (newPrimarySize / clientSize) * 100;
+      percent = newPercent;
+    }
+  };
+
+  const onPointerUp: PointerEventHandler<HTMLDivElement> = (event) => {
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    startPosition = undefined;
+    startPrimarySize = undefined;
+    dragging = false;
+  };
+
+  const onDoubleClick = () => {
+    resetOnDoubleClick && (percent = undefined);
+  };
+
+  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
+    const origPercent = percent || measuredPercent;
+
+    // only move for vanilla keys
+    if (!event.ctrlKey && !event.shiftKey && !event.altKey) {
+      switch (event.code) {
+        case 'Space':
+          percent = undefined;
+          return;
+      }
+
+      if (horizontal) {
+        switch (event.code) {
+          case 'ArrowUp':
+            percent = constrainPercent(origPercent - 1);
+            return;
+          case 'ArrowDown':
+            percent = constrainPercent(origPercent + 1);
+            return;
+        }
+      } else {
+        switch (event.code) {
+          case 'ArrowLeft':
+            percent = constrainPercent(origPercent - 1);
+            return;
+          case 'ArrowRight':
+            percent = constrainPercent(origPercent + 1);
+            return;
+        }
+      }
+    }
+  };
+</script>
+
+<div
+  class={['sterling-splitter', horizontal ? 'horizontal' : 'vertical']}
+  bind:clientWidth
+  bind:clientHeight
+  style={splitStyle}
+>
+  <div
+    class="primary"
+    bind:clientWidth={primaryClientWidth}
+    bind:clientHeight={primaryClientHeight}
+  >
+    {@render primary?.()}
+  </div>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="split"
+    bind:clientWidth={splitterClientWidth}
+    bind:clientHeight={splitterClientHeight}
+    onpointerdown={onPointerDown}
+    onpointermove={onPointerMove}
+    onpointerup={onPointerUp}
+    ondblclick={onDoubleClick}
+    onkeydown={onKeyDown}
+  >
+    {#if split}
+      {@render split()}
+    {:else}
+      <div class="default-split-line"></div>
+    {/if}
+  </div>
+  <div
+    class="secondary"
+    bind:clientWidth={secondaryClientWidth}
+    bind:clientHeight={secondaryClientHeight}
+  >
+    {@render secondary?.()}
+  </div>
+</div>

package/dist/Splitter.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SplitterProps } from './Splitter.types';
+declare const Splitter: import("svelte").Component<SplitterProps, {}, "">;
+type Splitter = ReturnType<typeof Splitter>;
+export default Splitter;

package/dist/Splitter.types.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type SplitterChangeArgs = {
+    percent?: number;
+    primarySize?: number;
+    secondarySize?: number;
+    dragging?: boolean;
+};
+export type SplitterProps = HTMLAttributes<HTMLDivElement> & {
+    horizontal?: boolean | null;
+    initialPrimarySize?: string;
+    minPrimarySize?: string;
+    minSecondarySize?: string;
+    resetOnDoubleClick?: boolean | null;
+    primary?: Snippet;
+    split?: Snippet;
+    secondary?: Snippet;
+    change?: (value: SplitterChangeArgs) => void;
+};
+export {};

package/dist/Splitter.types.js

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

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export type { ProgressOrientation, ProgressProps } from './Progress.types';
 export type { RadioProps } from './Radio.types';
 export type { SelectProps } from './Select.types';
 export type { SliderProps } from './Slider.types';
+export type { SplitterProps } from './Splitter.types';
 export type { SwitchProps } from './Switch.types';
 export type { TabListContext, TabListProps } from './TabList.types';
 export type { TabProps } from './Tab.types';
@@ -72,6 +73,7 @@ import Progress from './Progress.svelte';
 import Radio from './Radio.svelte';
 import Select from './Select.svelte';
 import Slider from './Slider.svelte';
+import Splitter from './Splitter.svelte';
 import Switch from './Switch.svelte';
 import Tab from './Tab.svelte';
 import TabList from './TabList.svelte';
@@ -80,4 +82,4 @@ import Tooltip from './Tooltip.svelte';
 import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
-export { Autocomplete, Button, Callout, Checkbox, Dialog, Dropdown, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Pagination, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem };
+export { Autocomplete, Button, Callout, Checkbox, Dialog, Dropdown, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Pagination, Popover, Progress, Radio, Select, Slider, Splitter, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem };

package/dist/index.js

@@ -46,6 +46,7 @@ import Progress from './Progress.svelte';
 import Radio from './Radio.svelte';
 import Select from './Select.svelte';
 import Slider from './Slider.svelte';
+import Splitter from './Splitter.svelte';
 import Switch from './Switch.svelte';
 import Tab from './Tab.svelte';
 import TabList from './TabList.svelte';
@@ -54,4 +55,4 @@ import Tooltip from './Tooltip.svelte';
 import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
-export { Autocomplete, Button, Callout, Checkbox, Dialog, Dropdown, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Pagination, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem };
+export { Autocomplete, Button, Callout, Checkbox, Dialog, Dropdown, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Pagination, Popover, Progress, Radio, Select, Slider, Splitter, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -74,7 +74,7 @@
     "@eslint/js": "^9.18.0",
     "@fontsource/atkinson-hyperlegible": "^5.1.1",
     "@fontsource/source-code-pro": "^4.5.14",
-    "@geoffcox/sterling-svelte-themes": "^2.0.4",
+    "@geoffcox/sterling-svelte-themes": "^2.0.7",
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.16.0",
     "@sveltejs/package": "^2.0.0",