Splitter

'use client'import { useRef, useState, type ComponentProps, type CSSProperties, type ReactNode } from 'react'import { splitter } from '@master/ui/behaviors/splitter.js'import { useBehavior } from './use-behavior'export interface SplitterProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'children'> {  /** The first and the second pane. */  start: ReactNode  end: ReactNode  /** The first pane's size, in percent of the container. */  value?: number  defaultValue?: number  /** Called as the handle moves. */  onValueChange?: (value: number) => void  /** Called once a drag ends or a key moved the handle. */  onValueCommit?: (value: number) => void  /** The least and the greatest size, in percent. */  min?: number  max?: number  /** How far an arrow key moves the handle, in percent. */  step?: number  /** Stack the panes, with a handle that moves up and down. */  stacked?: boolean  /** The name of the handle: what it resizes. */  label: string  disabled?: boolean}/** Two panes and the handle between them. */export function Splitter({ start, end, value, defaultValue = 50, onValueChange, onValueCommit, min = 0, max = 100, step = 5, stacked, label, disabled, className, style, ...root }: SplitterProps) {  const [first] = useState(value ?? defaultValue)  const size = useRef(first)  const ref = useBehavior(splitter, { step }, {    value,    defaultValue,    onValueChange: (next: number) => { size.current = next; onValueChange?.(next) },    // The handle says change once a drag ends or a key moved it. A field in a pane says change too.    on: { change: (event) => { if ((event.target as Element).parentElement === event.currentTarget && (event.target as Element).classList.contains('splitter-handle')) onValueCommit?.(size.current) } },  })  return (    <div className={className ? `splitter ${className}` : 'splitter'} style={{ '--splitter-size': `${first}%`, ...style } as CSSProperties} ref={ref} {...root}>      <div className="splitter-pane">{start}</div>      <div className="splitter-handle" role="separator" tabIndex={disabled ? -1 : 0} aria-label={label} aria-valuenow={Math.round(first)} aria-valuemin={min} aria-valuemax={max} aria-orientation={stacked ? 'horizontal' : undefined} aria-disabled={disabled || undefined} />      <div className="splitter-pane">{end}</div>    </div>  )}

<script lang="ts" module>  import type { Snippet } from 'svelte'  import type { HTMLAttributes } from 'svelte/elements'  export interface SplitterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {    /** The first and the second pane. */    start: Snippet    end: Snippet    /** The first pane's size, in percent of the container. Bind it, or leave it out: it starts at 50. */    value?: number    /** Called as the handle moves. */    onValueChange?: (value: number) => void    /** Called once a drag ends or a key moved the handle. */    onValueCommit?: (value: number) => void    /** The least and the greatest size, in percent. */    min?: number    max?: number    /** How far an arrow key moves the handle, in percent. */    step?: number    /** Stack the panes, with a handle that moves up and down. */    stacked?: boolean    /** The name of the handle: what it resizes. */    label: string    disabled?: boolean  }</script><script lang="ts">  import { untrack } from 'svelte'  import { splitter } from '@master/ui/behaviors/splitter.js'  import { behavior } from './behavior.svelte.js'  let { start, end, value = $bindable(), onValueChange, onValueCommit, min = 0, max = 100, step = 5, stacked, label, disabled, class: className, ...root }: SplitterProps = $props()  const first = untrack(() => value) ?? 50  // Svelte writes a style again whenever its owner changes it, so it writes the size the behavior holds.  let size = $state(first)  const attach = behavior(splitter, () => ({ step }), {    value: () => value,    change: (next) => { value = size = next; onValueChange?.(next) },    settled: (held) => { size = held },    // The handle says change once a drag ends or a key moved it. A field in a pane says change too.    on: { change: (event) => { if ((event.target as Element).parentElement === event.currentTarget && (event.target as Element).classList.contains('splitter-handle')) onValueCommit?.(size) } },  })</script><!--  @component  Two panes and the handle between them.--><div class={['splitter', className]} style:--splitter-size="{size}%" {@attach attach} {...root}>  <div class="splitter-pane">{@render start()}</div>  <!-- A separator that takes focus is a control: the keys move it. -->  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->  <div class="splitter-handle" role="separator" tabindex={disabled ? -1 : 0} aria-label={label} aria-valuenow={Math.round(first)} aria-valuemin={min} aria-valuemax={max} aria-orientation={stacked ? 'horizontal' : undefined} aria-disabled={disabled || undefined}></div>  <div class="splitter-pane">{@render end()}</div></div>

<script setup lang="ts">import { useTemplateRef } from 'vue'import { splitter } from '@master/ui/behaviors/splitter.js'import { useBehavior } from './use-behavior'defineOptions({ inheritAttrs: false })const { min = 0, max = 100, step = 5 } = defineProps<{  /** The least and the greatest size, in percent. */  min?: number  max?: number  /** How far an arrow key moves the handle, in percent. */  step?: number  /** Stack the panes, with a handle that moves up and down. */  stacked?: boolean  /** The name of the handle: what it resizes. */  label: string  disabled?: boolean}>()/** The first pane's size, in percent of the container: `v-model`. It changes as the handle moves. */const model = defineModel<number>({ default: 50 })const emit = defineEmits<{  /** The size, once a drag ends or a key moved the handle. */  valueCommit: [value: number]}>()defineSlots<{  /** The first and the second pane. */  start?: () => unknown  end?: () => unknown}>()/* Two panes and the handle between them. */const first = model.valueconst root = useTemplateRef<HTMLDivElement>('root')const handle = useTemplateRef<HTMLDivElement>('handle')const current = useBehavior(root, splitter, () => ({ step }), model, {  // The handle says change once a drag ends or a key moved it. A field in a pane says change too.  change: (event) => { if (event.target === handle.value) emit('valueCommit', size()) },})// Vue writes a style again each time it renders, so it writes the size the behavior holds, not the first one.const size = () => {  const held = current()  return held !== undefined && Number.isFinite(held) ? held : first}</script><template>  <div class="splitter" :style="{ '--splitter-size': `${size()}%` }" ref="root" v-bind="$attrs">    <div class="splitter-pane"><slot name="start" /></div>    <div class="splitter-handle" role="separator" ref="handle" :tabindex="disabled ? -1 : 0" :aria-label="label" :aria-valuenow="Math.round(first)" :aria-valuemin="min" :aria-valuemax="max" :aria-orientation="stacked ? 'horizontal' : undefined" :aria-disabled="disabled || undefined" />    <div class="splitter-pane"><slot name="end" /></div>  </div></template>