@window-splitter/vue 0.8.5

package/src/Panel.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import {
+  getPanelDomAttributes,
+  PanelHandle,
+  SharedPanelProps,
+} from "@window-splitter/interface";
+import {
+  getPanelPercentageSize,
+  getPanelPixelSize,
+  GroupMachineContextValue,
+  haveConstraintsChangedForPanel,
+  initializePanel,
+  isPanelData,
+  PanelData,
+  SendFn,
+} from "@window-splitter/state";
+import {
+  computed,
+  inject,
+  onMounted,
+  onUnmounted,
+  Ref,
+  useId,
+  watchEffect,
+} from "vue";
+
+// eslint-disable-next-line vue/require-default-prop
+type PanelProps = SharedPanelProps<boolean> & { id?: string };
+
+const props = withDefaults(defineProps<PanelProps>(), { collapsed: undefined });
+const {
+  min: _min,
+  max: _max,
+  id,
+  collapsible: _collapsible,
+  collapsedSize: _collapsedSize,
+  onCollapseChange: _onCollapseChange,
+  collapseAnimation: _collapseAnimation,
+  onResize: _onResize,
+  defaultCollapsed,
+  default: defaultSize,
+  isStaticAtRest,
+  collapsed: _collapsed,
+  ...attrs
+} = props;
+
+const panelId = id || useId();
+const send = inject<SendFn>("send");
+const state = inject<Ref<GroupMachineContextValue>>("state");
+const isPrerender = inject<Ref<boolean>>("isPrerender");
+
+const initPanel = (): PanelData =>
+  initializePanel({
+    id: panelId,
+    min: props.min,
+    max: props.max,
+    collapsible: props.collapsible,
+    collapsed: props.collapsed,
+    collapsedSize: props.collapsedSize,
+    onCollapseChange: props.onCollapseChange
+      ? { current: props.onCollapseChange }
+      : undefined,
+    collapseAnimation: props.collapseAnimation,
+    onResize: props.onResize ? { current: props.onResize } : undefined,
+    defaultCollapsed,
+    default: defaultSize,
+    isStaticAtRest,
+  });
+
+const panelData = computed(() => {
+  const item = state?.value?.items.find((i) => i.id === panelId);
+  if (!item || !isPanelData(item)) return undefined;
+  return item;
+});
+
+let dynamicPanelIsMounting = false;
+
+if (panelData.value) {
+  send?.({
+    type: "rebindPanelCallbacks",
+    data: {
+      id: panelId,
+      onCollapseChange: props.onCollapseChange
+        ? { current: props.onCollapseChange }
+        : undefined,
+      onResize: props.onResize ? { current: props.onResize } : undefined,
+    },
+  });
+} else {
+  if (isPrerender?.value) {
+    send?.({ type: "registerPanel", data: initPanel() });
+  } else {
+    dynamicPanelIsMounting = true;
+  }
+}
+
+onMounted(() => {
+  const groupId = state?.value?.groupId;
+  if (!groupId || !dynamicPanelIsMounting) return;
+
+  const groupElement = document.getElementById(groupId);
+  if (!groupElement) return;
+
+  const panelElement = document.getElementById(panelId);
+  if (!panelElement) return;
+
+  const order = Array.from(groupElement.children).indexOf(panelElement);
+  if (typeof order !== "number") return;
+
+  send?.({
+    type: "registerDynamicPanel",
+    data: { ...initPanel(), order },
+  });
+  dynamicPanelIsMounting = false;
+});
+
+const contraintChanged = computed(
+  () =>
+    !dynamicPanelIsMounting &&
+    haveConstraintsChangedForPanel(initPanel(), panelData.value),
+);
+
+watchEffect(() => {
+  if (!contraintChanged.value) return;
+  send?.({ type: "updateConstraints", data: initPanel() });
+});
+
+onUnmounted(() => {
+  requestAnimationFrame(() => send?.({ type: "unregisterPanel", id: panelId }));
+});
+
+defineExpose<PanelHandle>({
+  getId: () => panelId,
+  collapse: () => {
+    if (!panelData.value?.collapsible) return;
+    send?.({ type: "collapsePanel", panelId: panelId, controlled: true });
+  },
+  isCollapsed: () =>
+    Boolean(panelData.value?.collapsible && panelData.value?.collapsed),
+  expand: () => {
+    if (!panelData.value?.collapsible) return;
+    send?.({ type: "expandPanel", panelId: panelId, controlled: true });
+  },
+  isExpanded: () =>
+    Boolean(panelData.value?.collapsible && !panelData.value?.collapsed),
+  getPixelSize: () => getPanelPixelSize(state!.value, panelId),
+  getPercentageSize: () => getPanelPercentageSize(state!.value, panelId),
+  setSize: (size) =>
+    send?.({ type: "setPanelPixelSize", panelId: panelId, size }),
+});
+
+const isControlledCollapse = computed(
+  () => panelData.value?.collapseIsControlled,
+);
+
+watchEffect(() => {
+  // Subscribe to the collapsed prop (doesn't work in rAF)
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  props.collapsed;
+
+  requestAnimationFrame(() => {
+    if (!isControlledCollapse.value) return;
+    if (props.collapsed) {
+      send?.({ type: "collapsePanel", panelId: panelId, controlled: true });
+    } else {
+      send?.({ type: "expandPanel", panelId: panelId, controlled: true });
+    }
+  });
+});
+
+const computedProps = computed(() => {
+  const currentPanel = panelData.value;
+
+  return {
+    ...attrs,
+    ...getPanelDomAttributes({
+      groupId: state?.value?.groupId,
+      id: panelId,
+      collapsible: currentPanel?.collapsible,
+      collapsed: currentPanel?.collapsed,
+    }),
+    style: {
+      minWidth: 0,
+      minHeight: 0,
+      overflow: "hidden",
+    },
+  };
+});
+</script>
+
+<template>
+  <div v-bind="computedProps">
+    <slot />
+  </div>
+</template>

package/src/PanelGroup.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import {
+  measureGroupChildren,
+  PanelGroupHandle,
+  SharedPanelGroupProps,
+} from "@window-splitter/interface";
+import {
+  buildTemplate,
+  getPanelGroupPercentageSizes,
+  getPanelGroupPixelSizes,
+  groupMachine,
+  GroupMachineContextValue,
+  isPanelData,
+  prepareItems,
+  prepareSnapshot,
+} from "@window-splitter/state";
+import {
+  useId,
+  provide,
+  ref,
+  computed,
+  onMounted,
+  watchEffect,
+  onWatcherCleanup,
+} from "vue";
+
+// eslint-disable-next-line vue/require-default-prop
+type PanelGroupProps = SharedPanelGroupProps & { id?: string };
+
+const {
+  orientation = "horizontal",
+  autosaveStrategy = "localStorage",
+  snapshot: snapshotProp,
+  autosaveId,
+  id,
+  ...attrs
+} = defineProps<PanelGroupProps>();
+
+let snapshot = snapshotProp;
+
+if (
+  !snapshot &&
+  typeof window !== "undefined" &&
+  autosaveId &&
+  autosaveStrategy === "localStorage"
+) {
+  const localSnapshot = localStorage.getItem(autosaveId);
+
+  if (localSnapshot) {
+    snapshot = JSON.parse(localSnapshot) as GroupMachineContextValue;
+  }
+}
+
+const isPrerender = ref(true);
+provide("isPrerender", isPrerender);
+
+const groupId = autosaveId || id || useId();
+const [initialState, send, machineState] = groupMachine(
+  {
+    orientation: orientation,
+    groupId,
+    autosaveStrategy: autosaveStrategy,
+    ...(snapshot ? prepareSnapshot(snapshot) : undefined),
+  },
+  (s) => {
+    context.value = { ...s };
+  },
+);
+
+onMounted(() => {
+  isPrerender.value = false;
+});
+
+const context = ref(initialState);
+const gridStyle = computed(() => {
+  const template = buildTemplate(context.value);
+  return {
+    height: "100%",
+    display: "grid",
+    gridTemplateColumns: orientation === "horizontal" ? template : undefined,
+    gridTemplateRows: orientation === "vertical" ? template : undefined,
+  };
+});
+
+provide("send", send);
+provide("state", context);
+provide("id", machineState);
+
+const elementRef = ref<HTMLDivElement | null>(null);
+
+onMounted(() => {
+  const observer = new ResizeObserver(([entry]) => {
+    if (!entry) return;
+    if (entry.contentRect.width > 0 && entry.contentRect.height > 0) {
+      send?.({ type: "setSize", size: entry.contentRect });
+    }
+  });
+
+  if (elementRef.value) {
+    observer.observe(elementRef.value);
+  }
+
+  return () => observer.disconnect();
+});
+
+const childIds = computed(() =>
+  context.value?.items.map((i) => i.id).join(","),
+);
+
+onMounted(() => {
+  watchEffect(() => {
+    // re-render when the childIds change
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    childIds.value;
+
+    const cleanup = measureGroupChildren(groupId, (childrenSizes) => {
+      send({ type: "setActualItemsSize", childrenSizes });
+    });
+
+    onWatcherCleanup(cleanup);
+  });
+});
+
+onMounted(() => {
+  send({ type: "unlockGroup" });
+  return () => send({ type: "lockGroup" });
+});
+
+defineExpose<PanelGroupHandle>({
+  getId: () => groupId,
+  getPixelSizes: () => getPanelGroupPixelSizes(context.value),
+  getPercentageSizes: () => getPanelGroupPercentageSizes(context.value),
+  getTemplate: () =>
+    buildTemplate({
+      ...context.value,
+      items: prepareItems(context.value),
+    }),
+  getState: () => (machineState.current === "idle" ? "idle" : "dragging"),
+  setSizes: (updates) => {
+    for (let index = 0; index < updates.length; index++) {
+      const item = context.value?.items[index];
+      const update = updates[index];
+
+      if (item && isPanelData(item) && update) {
+        send({
+          type: "setPanelPixelSize",
+          panelId: item.id,
+          size: update,
+        });
+      }
+    }
+  },
+});
+</script>
+
+<template>
+  <div
+    v-bind="attrs"
+    :id="groupId"
+    ref="elementRef"
+    data-panel-group-wrapper
+    :style="gridStyle"
+  >
+    <slot />
+  </div>
+</template>

package/src/PanelResizer.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import {
+  getPanelResizerDomAttributes,
+  move,
+  SharedPanelResizerProps,
+} from "@window-splitter/interface";
+import {
+  getCollapsiblePanelForHandleId,
+  getCursor,
+  getGroupSize,
+  GroupMachineContextValue,
+  haveConstraintsChangedForPanelHandle,
+  initializePanelHandleData,
+  isPanelData,
+  isPanelHandle,
+  PanelHandleData,
+  SendFn,
+} from "@window-splitter/state";
+import {
+  computed,
+  inject,
+  onMounted,
+  onUnmounted,
+  Ref,
+  useId,
+  watchEffect,
+} from "vue";
+
+// eslint-disable-next-line vue/require-default-prop
+type PanelResizerProps = SharedPanelResizerProps & { id?: string };
+
+const {
+  size = "0px",
+  id: _id,
+  onDragStart,
+  onDrag,
+  onDragEnd,
+  disabled,
+  ...attrs
+} = defineProps<PanelResizerProps>();
+
+const defaultId = _id || useId();
+const id = defaultId;
+
+const send = inject<SendFn>("send");
+const state = inject<Ref<GroupMachineContextValue>>("state");
+const isPrerender = inject<Ref<boolean>>("isPrerender");
+
+const initHandle = () => initializePanelHandleData({ size, id });
+const handleData = computed(() => {
+  const item = state?.value?.items.find((i) => i.id === id);
+  if (!item || !isPanelHandle(item)) return undefined;
+  return item;
+});
+
+let dynamicPanelHandleIsMounting = false;
+
+if (!handleData.value) {
+  if (isPrerender?.value) {
+    send?.({ type: "registerPanelHandle", data: initHandle() });
+  } else {
+    dynamicPanelHandleIsMounting = true;
+  }
+}
+
+onMounted(() => {
+  const groupId = state?.value?.groupId;
+  if (!groupId || !dynamicPanelHandleIsMounting) return;
+
+  const groupElement = document.getElementById(state?.value?.groupId);
+  if (!groupElement) return;
+
+  const handleEl = document.getElementById(id);
+  if (!handleEl) return;
+
+  const order = Array.from(groupElement.children).indexOf(handleEl);
+  if (typeof order !== "number") return;
+
+  send?.({
+    type: "registerPanelHandle",
+    data: { ...initHandle(), order },
+  });
+  dynamicPanelHandleIsMounting = false;
+});
+
+const contraintChanged = computed(
+  () =>
+    !dynamicPanelHandleIsMounting &&
+    haveConstraintsChangedForPanelHandle(initHandle(), handleData.value),
+);
+
+watchEffect(() => {
+  if (!contraintChanged.value) return;
+  send?.({ type: "updateConstraints", data: initHandle() });
+});
+
+onUnmounted(() => {
+  requestAnimationFrame(() => send?.({ type: "unregisterPanelHandle", id }));
+});
+
+const { moveProps } = move({
+  onMoveStart: () => {
+    send?.({ type: "dragHandleStart", handleId: id });
+    onDragStart?.();
+    if (!state?.value) return;
+    document.body.style.cursor = getCursor(state?.value) || "auto";
+  },
+  onMove: (e) => {
+    send?.({ type: "dragHandle", handleId: id, value: e });
+    onDrag?.();
+  },
+  onMoveEnd: () => {
+    send?.({ type: "dragHandleEnd", handleId: id });
+    onDragEnd?.();
+    document.body.style.cursor = "auto";
+  },
+});
+
+const onKeyDown = (e: KeyboardEvent) => {
+  if (!state?.value) return;
+
+  try {
+    const collapsiblePanel = getCollapsiblePanelForHandleId(state?.value, id);
+
+    if (e.key === "Enter" && collapsiblePanel) {
+      if (collapsiblePanel.collapsed) {
+        send?.({ type: "expandPanel", panelId: collapsiblePanel.id });
+      } else {
+        send?.({ type: "collapsePanel", panelId: collapsiblePanel.id });
+      }
+    }
+  } catch {
+    //
+  }
+};
+
+const combinedProps = computed(() => {
+  const handleIndex = state?.value?.items.findIndex((item) => item.id === id);
+
+  if (!handleIndex) return { id };
+
+  const handle = state?.value?.items[handleIndex] as PanelHandleData;
+  const panelBeforeHandle = state?.value?.items[handleIndex - 1];
+
+  if (!panelBeforeHandle || !isPanelData(panelBeforeHandle)) return { id };
+
+  return {
+    ...attrs,
+    ...getPanelResizerDomAttributes({
+      groupId: state?.value?.groupId,
+      id,
+      orientation: state?.value?.orientation || "horizontal",
+      isDragging: state?.value?.activeDragHandleId === id,
+      activeDragHandleId: state?.value?.activeDragHandleId,
+      disabled: disabled,
+      controlsId: panelBeforeHandle.id,
+      min: panelBeforeHandle.min,
+      max: panelBeforeHandle.max,
+      currentValue: panelBeforeHandle.currentValue,
+      groupSize: getGroupSize(state.value),
+    }),
+    onpointerdown: disabled ? undefined : moveProps.onPointerDown,
+    onkeydown: disabled
+      ? undefined
+      : (e: KeyboardEvent) => {
+          moveProps.onKeyDown(e);
+          onKeyDown(e);
+        },
+    style: {
+      cursor: state?.value ? getCursor(state.value) : undefined,
+      width:
+        state?.value?.orientation === "horizontal"
+          ? `${handle?.size.value.toNumber()}px`
+          : "100%",
+      height:
+        state?.value?.orientation === "vertical"
+          ? `${handle?.size.value.toNumber()}px`
+          : "100%",
+    },
+  };
+});
+</script>
+
+<template>
+  <div v-bind="combinedProps" data-panel-resizer :tabindex="disabled ? -1 : 0">
+    <slot />
+  </div>
+</template>