pxd 0.0.64 → 0.1.2

package/dist/components/resizable/index.vue

@@ -1,177 +1,423 @@
 <script setup>
-import { nextTick, onMounted, ref, shallowRef } from "vue";
-import { provideResizableContext } from "../../contexts/resizable";
+import { computed, shallowRef, watch } from "vue";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { throttleByRaf } from "../../utils/event.js";
+import { getUniqueId } from "../../utils/helper.js";
+import { isNil } from "../../utils/is.js";
+import { clamp, PERCENT_TOTAL, roundSize, toPair } from "./utils";
 defineOptions({
-  name: "PResizable",
-  inheritAttrs: false
+	name: "PResizable",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  direction: { type: String, required: false, default: "horizontal" }
+	direction: {
+		type: String,
+		required: false,
+		default: "horizontal"
+	},
+	minSize: {
+		type: Array,
+		required: false,
+		default: () => [0, 0]
+	},
+	handle: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	defaultValue: {
+		type: Array,
+		required: false,
+		default: () => [PERCENT_TOTAL / 2, PERCENT_TOTAL / 2]
+	},
+	modelValue: {
+		type: [Array, null],
+		required: false,
+		default: null
+	}
 });
-const panelSizes = ref({});
-const panelConfigs = ref([]);
-const handleConfigs = ref([]);
-const orderCounter = shallowRef(0);
+const emits = defineEmits([
+	"change",
+	"reset",
+	"update:modelValue"
+]);
+const uid = getUniqueId("pxd-resizable");
 const containerRef = shallowRef();
-function registerPanel(config) {
-  const existingIndex = panelConfigs.value.findIndex((p) => p.id === config.id);
-  if (existingIndex === -1) {
-    panelConfigs.value.push({ ...config, order: orderCounter.value++ });
-  } else {
-    panelConfigs.value[existingIndex] = {
-      ...config,
-      order: panelConfigs.value[existingIndex].order
-    };
-  }
-  panelConfigs.value.sort((a, b) => a.order - b.order);
-  nextTick(() => {
-    initPanelSizes();
-  });
-}
-function unregisterPanel(id) {
-  const index = panelConfigs.value.findIndex((p) => p.id === id);
-  if (index !== -1) {
-    panelConfigs.value.splice(index, 1);
-    const { [id]: _, ...rest } = panelSizes.value;
-    panelSizes.value = rest;
-  }
-}
-function registerHandle(config) {
-  const existingIndex = handleConfigs.value.findIndex((h) => h.id === config.id);
-  if (existingIndex === -1) {
-    handleConfigs.value.push({ ...config, order: orderCounter.value++ });
-  } else {
-    handleConfigs.value[existingIndex] = {
-      ...config,
-      order: handleConfigs.value[existingIndex].order
-    };
-  }
-  handleConfigs.value.sort((a, b) => a.order - b.order);
-}
-function unregisterHandle(id) {
-  const index = handleConfigs.value.findIndex((h) => h.id === id);
-  if (index !== -1) {
-    handleConfigs.value.splice(index, 1);
-  }
-}
-function getPanelSize(id) {
-  return panelSizes.value[id] || 0;
-}
-function onHandleDrag(handleId, delta) {
-  const handleOrder = handleConfigs.value.find((h) => h.id === handleId)?.order;
-  if (handleOrder === void 0) {
-    return;
-  }
-  const panelsBeforeThisHandle = panelConfigs.value.filter((p) => p.order < handleOrder).length;
-  const panelIndex = panelsBeforeThisHandle - 1;
-  if (panelIndex >= 0 && panelIndex + 1 < panelConfigs.value.length) {
-    onDrag(panelIndex, delta);
-  }
-}
-function calculateContainerSize() {
-  if (!containerRef.value) {
-    return 0;
-  }
-  return props.direction === "horizontal" ? containerRef.value.offsetWidth : containerRef.value.offsetHeight;
-}
-function calculateInitialPanelSizes() {
-  const sizes = {};
-  let remainingSize = 100;
-  const autoSizedPanelIds = [];
-  const sortedConfigs = [...panelConfigs.value].sort((a, b) => a.order - b.order);
-  sortedConfigs.forEach((config) => {
-    const minSize = config.minSize || 0;
-    const initialSizeNum = config.size;
-    if (initialSizeNum !== null && initialSizeNum !== void 0) {
-      sizes[config.id] = Math.max(initialSizeNum, minSize);
-      remainingSize -= sizes[config.id];
-    } else {
-      sizes[config.id] = minSize;
-      remainingSize -= minSize;
-      autoSizedPanelIds.push(config.id);
-    }
-  });
-  return { sizes, remainingSize, autoSizedPanelIds };
-}
-function distributeRemainingSpace(sizes, remainingSize, autoSizedPanelIds) {
-  if (autoSizedPanelIds.length === 0 || remainingSize <= 0) {
-    return sizes;
-  }
-  const updatedSizes = { ...sizes };
-  const avgSize = remainingSize / autoSizedPanelIds.length;
-  autoSizedPanelIds.forEach((id) => {
-    updatedSizes[id] += avgSize;
-  });
-  return updatedSizes;
-}
-async function initPanelSizes() {
-  if (panelConfigs.value.length === 0) {
-    return;
-  }
-  await nextTick();
-  const { sizes, remainingSize, autoSizedPanelIds } = calculateInitialPanelSizes();
-  panelSizes.value = distributeRemainingSpace(sizes, remainingSize, autoSizedPanelIds);
-}
-function onDrag(index, { deltaX, deltaY }) {
-  if (index < 0 || index + 1 >= panelConfigs.value.length) {
-    return;
-  }
-  const containerSize = calculateContainerSize();
-  if (containerSize <= 0) {
-    return;
-  }
-  const prevId = panelConfigs.value[index].id;
-  const nextId = panelConfigs.value[index + 1].id;
-  const delta = props.direction === "horizontal" ? deltaX : deltaY;
-  const deltaPercent = delta / containerSize * 100;
-  const prevSize = panelSizes.value[prevId] || 0;
-  const nextSize = panelSizes.value[nextId] || 0;
-  const prevMinSize = panelConfigs.value[index]?.minSize || 0;
-  const nextMinSize = panelConfigs.value[index + 1]?.minSize || 0;
-  let newPrevSize = prevSize + deltaPercent;
-  let newNextSize = nextSize - deltaPercent;
-  if (newPrevSize < prevMinSize) {
-    const diff = prevMinSize - newPrevSize;
-    newPrevSize = prevMinSize;
-    newNextSize -= diff;
-  } else if (newNextSize < nextMinSize) {
-    const diff = nextMinSize - newNextSize;
-    newNextSize = nextMinSize;
-    newPrevSize -= diff;
-  }
-  if (newPrevSize < prevMinSize) {
-    newPrevSize = prevMinSize;
-  }
-  if (newNextSize < nextMinSize) {
-    newNextSize = nextMinSize;
-  }
-  panelSizes.value[prevId] = newPrevSize;
-  panelSizes.value[nextId] = newNextSize;
-}
-provideResizableContext({
-  props,
-  panelSizes,
-  registerPanel,
-  unregisterPanel,
-  registerHandle,
-  unregisterHandle,
-  getPanelSize,
-  onHandleDrag,
-  resetPanels: initPanelSizes
+const handleRef = shallowRef();
+const modelValue = useModelValue(props, emits, { withChange: false });
+const isControlled = computed(() => !isNil(props.modelValue));
+const innerSizes = shallowRef(toPair(props.defaultValue));
+const sizes = computed(() => isControlled.value ? toPair(props.modelValue) : innerSizes.value);
+/**
+* The range the leading panel may travel through. The trailing panel needs no
+* bounds of its own: the pair always sums to 100, so the leading panel's floor
+* already is the trailing panel's ceiling and the other way round.
+*/
+const bounds = computed(() => {
+	const [leading, trailing] = toPair(props.minSize);
+	if (leading + trailing > PERCENT_TOTAL) {
+		return {
+			min: 0,
+			max: PERCENT_TOTAL
+		};
+	}
+	return {
+		min: leading,
+		max: PERCENT_TOTAL - trailing
+	};
 });
-onMounted(async () => {
-  await nextTick();
-  initPanelSizes();
+const leadingId = `${uid}-leading`;
+const trailingId = `${uid}-trailing`;
+const collapsed = shallowRef(false);
+// The pair as it was before folding, so expanding gives back what the user was
+// working with rather than the configured starting point.
+let expandedPair = null;
+let initialPair = null;
+watch(sizes, ([leading, trailing]) => {
+	initialPair ??= [leading, trailing];
+}, {
+	immediate: true,
+	flush: "sync"
+});
+function setSizes(next) {
+	const current = sizes.value;
+	const rounded = [roundSize(next[0]), roundSize(next[1])];
+	if (rounded[0] === current[0] && rounded[1] === current[1]) {
+		return false;
+	}
+	if (!isControlled.value) {
+		innerSizes.value = rounded;
+	}
+	modelValue.value = rounded;
+	return true;
+}
+function resize(deltaPercent) {
+	const [leading, trailing] = sizes.value;
+	const { min, max } = bounds.value;
+	// Clamp the movement so the leading panel stays inside its own range, then
+	// hand the trailing panel the same delta so the pair keeps summing to 100%.
+	const applied = clamp(deltaPercent, min - leading, max - leading);
+	if (applied === 0) {
+		return false;
+	}
+	// The trailing panel is derived from the already rounded value, so the pair
+	// keeps the exact sum it had and repeated drags cannot drift.
+	const newLeading = roundSize(leading + applied);
+	return setSizes([newLeading, roundSize(leading + trailing - newLeading)]);
+}
+/**
+* Moving the divider brings a folded pair back, so a collapsed panel is never a
+* dead end. The remembered sizes go with it: they described a pair that no
+* longer exists once it has been moved somewhere else.
+*/
+function applyDelta(deltaPercent) {
+	const changed = resize(deltaPercent);
+	if (changed && collapsed.value) {
+		collapsed.value = false;
+		expandedPair = null;
+	}
+	return changed;
+}
+function resizeByPixels(delta) {
+	const container = containerRef.value;
+	if (!container) {
+		return false;
+	}
+	const containerSize = props.direction === "horizontal" ? container.offsetWidth : container.offsetHeight;
+	if (containerSize <= 0) {
+		return false;
+	}
+	return applyDelta(delta / containerSize * PERCENT_TOTAL);
+}
+function commitChange() {
+	emits("change", sizes.value.slice());
+}
+function toggleCollapse() {
+	if (props.disabled) {
+		return;
+	}
+	const [leading, trailing] = sizes.value;
+	if (collapsed.value) {
+		const restore = expandedPair ?? initialPair ?? [leading, trailing];
+		expandedPair = null;
+		collapsed.value = false;
+		if (setSizes([restore[0], restore[1]])) {
+			commitChange();
+		}
+		return;
+	}
+	expandedPair = [leading, trailing];
+	collapsed.value = true;
+	const { min } = bounds.value;
+	// Whatever the leading panel gives up goes to its neighbour, so the pair keeps
+	// summing to 100% while folded.
+	if (setSizes([min, PERCENT_TOTAL - min])) {
+		commitChange();
+	}
+}
+function reset() {
+	const restore = initialPair ?? toPair(props.defaultValue);
+	expandedPair = null;
+	collapsed.value = false;
+	if (setSizes([restore[0], restore[1]])) {
+		emits("reset", sizes.value.slice());
+	}
+}
+let activePointerId = null;
+let startPosition = 0;
+let accumulated = 0;
+let resized = false;
+function axisOf(event) {
+	return props.direction === "horizontal" ? event.clientX : event.clientY;
+}
+const flushResize = throttleByRaf(() => {
+	if (accumulated === 0) {
+		return;
+	}
+	const delta = accumulated;
+	accumulated = 0;
+	resized = resizeByPixels(delta) || resized;
+});
+// The capture target is the handle itself, never `event.target`: a child element
+// can be swapped mid-drag, which would both throw on release and strand the drag.
+// Holding the capture also keeps the drag alive when the pointer leaves the window.
+function releaseCapture() {
+	const id = activePointerId;
+	const el = handleRef.value;
+	activePointerId = null;
+	if (!el || id === null) {
+		return;
+	}
+	try {
+		el.releasePointerCapture(id);
+	} catch {}
+}
+function resetDragging() {
+	startPosition = 0;
+	accumulated = 0;
+	resized = false;
+	flushResize.cancel();
+	releaseCapture();
+}
+function handlePointerDown(event) {
+	if (props.disabled) {
+		return;
+	}
+	activePointerId = event.pointerId;
+	startPosition = axisOf(event);
+	accumulated = 0;
+	resized = false;
+	try {
+		handleRef.value?.setPointerCapture(event.pointerId);
+	} catch {}
+}
+function handlePointerMove(event) {
+	if (event.pointerId !== activePointerId) {
+		return;
+	}
+	event.preventDefault();
+	const position = axisOf(event);
+	accumulated += position - startPosition;
+	startPosition = position;
+	flushResize();
+}
+function handlePointerUp(event) {
+	if (event.pointerId !== activePointerId) {
+		return;
+	}
+	flushResize.cancel();
+	if (accumulated !== 0) {
+		const delta = accumulated;
+		accumulated = 0;
+		resized = resizeByPixels(delta) || resized;
+	}
+	const didResize = resized;
+	resetDragging();
+	if (didResize) {
+		commitChange();
+	}
+}
+function handlePointerCancel(event) {
+	if (event.pointerId !== activePointerId) {
+		return;
+	}
+	resetDragging();
+}
+function handleLostCapture() {
+	if (activePointerId === null) {
+		return;
+	}
+	resetDragging();
+}
+const KEYBOARD_STEP = 1;
+const KEYBOARD_STEP_LARGE = 10;
+function handleKeydown(event) {
+	if (props.disabled) {
+		return;
+	}
+	const step = event.shiftKey ? KEYBOARD_STEP_LARGE : KEYBOARD_STEP;
+	const horizontal = props.direction === "horizontal";
+	let delta = null;
+	if (event.key === (horizontal ? "ArrowLeft" : "ArrowUp")) {
+		delta = -step;
+	} else if (event.key === (horizontal ? "ArrowRight" : "ArrowDown")) {
+		delta = step;
+	} else if (event.key === "Home") {
+		delta = bounds.value.min - position.value;
+	} else if (event.key === "End") {
+		delta = bounds.value.max - position.value;
+	}
+	if (delta === null) {
+		return;
+	}
+	event.preventDefault();
+	if (applyDelta(delta)) {
+		commitChange();
+	}
+}
+function isPercent(value) {
+	return value >= 0 && value <= PERCENT_TOTAL;
+}
+function warnLength(name, value) {
+	warn(`${name} holds ${value.length} value${value.length === 1 ? "" : "s"} but the group has 2 panels; only the first two are used.`);
+}
+function warn(message) {
+	if (import.meta.env?.DEV) {
+		console.warn(`[pxd] PResizable: ${message}`);
+	}
+}
+function warnSum(name, value) {
+	const total = roundSize(value[0] + value[1]);
+	if (Math.abs(total - PERCENT_TOTAL) > .01) {
+		warn(`${name} adds up to ${total}% instead of ${PERCENT_TOTAL}%; the panels keep the sizes they were given.`);
+	}
+}
+// The model is the caller's truth, so a value the group would rather correct is
+// reported rather than rewritten: silently rewriting it would fight whatever
+// writes it back.
+watch(() => [
+	props.modelValue,
+	props.minSize,
+	props.defaultValue
+], () => {
+	if (!import.meta.env?.DEV) {
+		return;
+	}
+	const mins = toPair(props.minSize);
+	if (props.minSize.length !== 2) {
+		warnLength("min-size", props.minSize);
+	}
+	if (!isPercent(mins[0]) || !isPercent(mins[1])) {
+		warn(`min-size values must be between 0 and ${PERCENT_TOTAL}, got [${mins.join(", ")}].`);
+	} else if (mins[0] + mins[1] > PERCENT_TOTAL) {
+		warn(`min-size [${mins.join(", ")}] adds up to more than ${PERCENT_TOTAL}%, so no split fits and the constraint is ignored.`);
+	}
+	for (const [name, value] of [["model-value", props.modelValue], ["default-value", props.defaultValue]]) {
+		if (isNil(value)) {
+			continue;
+		}
+		if (value.length !== 2) {
+			warnLength(name, value);
+			continue;
+		}
+		warnSum(name, [value[0], value[1]]);
+	}
+	const { min, max } = bounds.value;
+	const leading = sizes.value[0];
+	if (leading < min || leading > max) {
+		warn(`the leading panel sits at ${leading}%, outside its ${min}-${max}% range; it keeps that size until it is dragged.`);
+	}
+}, {
+	immediate: true,
+	flush: "post"
+});
+const position = computed(() => sizes.value[0]);
+const ariaValueNow = computed(() => roundSize(position.value));
+// A bare number is announced as "30" - no unit, and nothing about the fold.
+// valuetext is the only place a separator can put either, since it has no
+// aria-expanded to lean on.
+const ariaValueText = computed(() => collapsed.value ? `${ariaValueNow.value}%, folded` : `${ariaValueNow.value}%`);
+function panelStyle(index) {
+	return {
+		flexBasis: `${sizes.value[index]}%`,
+		flexGrow: 0,
+		flexShrink: 1
+	};
+}
+defineExpose({
+	getPanelSizes: () => sizes.value.slice(),
+	reset
 });
 </script>
 
 <template>
   <div
+    data-resizable
     ref="containerRef"
     :data-orientation="direction"
     class="pxd-resizable flex size-full max-w-full flex-row overflow-hidden data-[orientation=vertical]:flex-col"
     v-bind="$attrs"
   >
-    <slot />
+    <div
+      :id="leadingId"
+      class="pxd-resizable-panel min-w-0 min-h-0 overflow-hidden"
+      :style="panelStyle(0)"
+    >
+      <slot name="leading" :size="sizes[0]" />
+    </div>
+
+    <!--
+      A *focusable* separator is a widget, and only that flavour may carry
+      aria-valuenow / aria-valuemin / aria-valuemax - which is why it takes a
+      tabindex and the key handler below, not just a pointer drag. aria-expanded
+      is not a separator state at any focusability: it marks control over
+      visibility, and folding a panel never hides it. The fold therefore rides
+      on aria-valuetext.
+    -->
+    <div
+      ref="handleRef"
+      role="separator"
+      :tabindex="disabled ? -1 : 0"
+      aria-label="Resize the panels"
+      :aria-orientation="direction"
+      :aria-valuenow="ariaValueNow"
+      :aria-valuemin="bounds.min"
+      :aria-valuemax="bounds.max"
+      :aria-valuetext="ariaValueText"
+      :aria-controls="`${leadingId} ${trailingId}`"
+      :aria-disabled="disabled || void 0"
+      :data-collapsed="collapsed || void 0"
+      :data-handler="handle"
+      :data-orientation="direction"
+      class="pxd-resizable-handle relative shrink-0 touch-none bg-border self-focus-ring select-none hover:after:bg-primary/15 active:after:bg-primary/20 aria-disabled:cursor-default motion-safe:transition-colors after:motion-safe:transition-colors"
+      @pointerdown.prevent="handlePointerDown"
+      @pointermove="handlePointerMove"
+      @pointerup="handlePointerUp"
+      @pointercancel="handlePointerCancel"
+      @lostpointercapture="handleLostCapture"
+      @keydown="handleKeydown"
+      @dblclick.prevent.stop="toggleCollapse"
+    />
+
+    <div
+      :id="trailingId"
+      class="pxd-resizable-panel min-w-0 min-h-0 overflow-hidden"
+      :style="panelStyle(1)"
+    >
+      <slot name="trailing" :size="sizes[1]" />
+    </div>
   </div>
 </template>
+
+<style>
+.pxd-resizable-handle[data-handler=true]:before{background-color:var(--color-gray-300);border-radius:.5rem;content:"";left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.pxd-resizable-handle[data-collapsed=true]:before{opacity:.4}.pxd-resizable-handle:after{content:"";left:50%;padding:4px;position:absolute;top:50%;transform:translate(-50%,-50%)}.pxd-resizable-handle[data-orientation=horizontal]{cursor:ew-resize;height:100%;width:1px}.pxd-resizable-handle[data-orientation=horizontal]:before{height:1.5rem;width:.375rem}.pxd-resizable-handle[data-orientation=horizontal]:after{height:100%}.pxd-resizable-handle[data-orientation=vertical]{cursor:ns-resize;height:1px;width:100%}.pxd-resizable-handle[data-orientation=vertical]:before{height:.375rem;width:1.5rem}.pxd-resizable-handle[data-orientation=vertical]:after{width:100%}
+</style>

package/dist/components/resizable/types.d.ts

@@ -1,18 +1,25 @@
 import type { ComponentDirection } from '../../types/shared'
 
-export interface PanelConfig {
-  id: string
-  size?: number | null
-  order: number
-  minSize?: number
-}
-
-export interface HandleConfig {
-  id: string
-  order: number
-  onDrag: (delta: { deltaX: number; deltaY: number }) => void
-}
-
 export interface ResizableProps {
   direction?: ComponentDirection
+  /**
+   * Per-panel floors as percentages. The group always sums to 100, so one panel's
+   * floor is the other panel's ceiling: `[20, 40]` means leading 20-60 and
+   * trailing 40-80. Adding up to more than 100 leaves no split that fits, so the
+   * constraint is ignored.
+   */
+  minSize?: number[]
+  /** Draw the grip in the middle of the handle. */
+  handle?: boolean
+  /** Stop the handle from dragging or folding. */
+  disabled?: boolean
+  /** Starting sizes when uncontrolled. Read once, on setup. */
+  defaultValue?: number[]
+  modelValue?: number[] | null
+}
+
+export interface ResizableEmits {
+  change: [number[]]
+  reset: [number[]]
+  'update:modelValue': [number[]]
 }

package/dist/components/resizable/utils.d.ts

@@ -0,0 +1,4 @@
+export declare const PERCENT_TOTAL = 100;
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function roundSize(value: number): number;
+export declare function toPair(value?: number[] | null): [number, number];

package/dist/components/resizable/utils.js

@@ -0,0 +1,10 @@
+export const PERCENT_TOTAL = 100;
+export function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+export function roundSize(value) {
+  return Math.round(value * 100) / 100;
+}
+export function toPair(value) {
+  return [value?.[0] ?? 0, value?.[1] ?? 0];
+}

package/dist/components/reveal/index.d.vue.ts

@@ -0,0 +1,22 @@
+import type { RevealProps } from './types';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<RevealProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RevealProps> & Readonly<{}>, {
+    delay: number | string;
+    duration: number | string;
+    threshold: number | number[];
+    direction: import("../../types/shared/props.js").BasePosition;
+    trigger: import("./types").RevealTrigger;
+    rootMargin: string;
+    distance: number | string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};