@witchcraft/layout 0.3.1 → 0.4.1

package/dist/runtime/components/LayoutEdgesActiveFrame.vue

@@ -0,0 +1,35 @@
+<template>
+<LayoutShapeRect
+	v-if="activeFrame"
+	:class="twMerge(
+  `
+		active-frame-edge
+		pointer-events-none
+		z-0
+		border-blue-500
+		border
+		rounded-md
+	`,
+  $attrs.class
+)"
+	v-bind="{ ...$attrs, class: void 0 }"
+	:css="getShapeRectCss(activeFrame, `var(--layoutEdgeWidth,2px)`)"
+/>
+</template>
+
+<script setup>
+import { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
+import { computed, inject, useAttrs } from "vue";
+import { twMerge } from "@witchcraft/ui/utils/twMerge";
+import LayoutShapeRect from "./LayoutShapeRect.vue";
+import { getShapeRectCss } from "../helpers/getShapeRectCss.js";
+const $attrs = useAttrs();
+defineOptions({
+  inheritAttrs: false
+});
+const ctx = inject(layoutContextInjectionKey, void 0);
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+const dragCtx = inject(dragContextInjectionKey, void 0);
+if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+const activeFrame = computed(() => ctx.value.win.activeFrame ? dragCtx.frames.value[ctx.value.win.activeFrame] : void 0);
+</script>

package/dist/runtime/components/LayoutEdgesActiveFrame.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/LayoutFrame.d.vue.ts

@@ -1,13 +1,14 @@
-import type { LayoutFrameProps } from "../types/index.js";
-declare var __VLS_8: {};
+declare var __VLS_9: any, __VLS_10: {
+    frame: any;
+};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<LayoutFrameProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     focus: () => any;
-}, string, import("vue").PublicProps, Readonly<LayoutFrameProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
     onFocus?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/LayoutFrame.vue

@@ -1,8 +1,8 @@
 <template>
 <!-- overflow-hidden is just in case, if the frame's css is not properly set to h-full, overflow-auto, or the border/padding are too large, we can still get overflows -->
-<LayoutShapeSquare
+<LayoutShapeRect
 	tabindex="0"
-	:css="getShapeSquareCss(frame)"
+	:css="getShapeRectCss(frame)"
 	:class="twMerge(
   `
 		frame
@@ -12,31 +12,35 @@
   $attrs.class
 )"
 	v-bind="{ ...$attrs, class: void 0 }"
-	@focus="emit('focus')"
+	@focus="ctx.onFocus(frame.id);
+  emit('focus')"
+	v-for="frame in frames"
+	:key="frame.id"
 >
-	<slot>
+	<slot :name="`frame-${frame.id}`" v-bind="{ frame }">
 		<div class="p-2 text-xs bg-neutral-500">
 			{{ debugFrame(frame) }}
 		</div>
 		<div>No slot found for `frame-{{ frame.id }}`. </div>
 	</slot>
-</LayoutShapeSquare>
+</LayoutShapeRect>
 </template>
 
 <script setup>
+import { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
 import { twMerge } from "@witchcraft/ui/utils/twMerge";
-import { useAttrs } from "vue";
+import { useAttrs, inject, toRef } from "vue";
 const $attrs = useAttrs();
+import LayoutShapeRect from "./LayoutShapeRect.vue";
+import { getShapeRectCss } from "../helpers/getShapeRectCss";
+import { debugFrame } from "../layout/debugFrame.js";
 defineOptions({
   inheritAttrs: false
 });
-import LayoutShapeSquare from "./LayoutShapeSquare.vue";
-import { getShapeSquareCss } from "../helpers/getShapeSquareCss";
-import { debugFrame } from "../layout/debugFrame.js";
 const emit = defineEmits(["focus"]);
-defineProps({
-  frame: { type: Object, required: true },
-  isActiveFrame: { type: Boolean, required: true },
-  css: { type: Object, required: false }
-});
+const ctx = inject(layoutContextInjectionKey, void 0);
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+const dragCtx = inject(dragContextInjectionKey, void 0);
+if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+const frames = toRef(dragCtx, "frames");
 </script>

package/dist/runtime/components/LayoutFrame.vue.d.ts

@@ -1,13 +1,14 @@
-import type { LayoutFrameProps } from "../types/index.js";
-declare var __VLS_8: {};
+declare var __VLS_9: any, __VLS_10: {
+    frame: any;
+};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<LayoutFrameProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     focus: () => any;
-}, string, import("vue").PublicProps, Readonly<LayoutFrameProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
     onFocus?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/LayoutIntersectionHandle.d.vue.ts

@@ -0,0 +1,10 @@
+import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
+import { type EdgeDragStartData } from "../types/index.js";
+import type { IntersectionEntry } from "../types/index.js";
+type __VLS_Props = {
+    css: ReturnType<typeof getIntersectionsCss>[number];
+    intersection: IntersectionEntry;
+    onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeDragStartData) => void;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/LayoutIntersectionHandle.vue

@@ -0,0 +1,36 @@
+<template>
+<LayoutShapeRect
+	:css="css"
+	:class="twMerge(`
+		drag-intersection
+		z-30
+		rounded-full
+		hover:cursor-pointer
+	`, $attrs.class)"
+	v-bind="{ ...$attrs, class: void 0 }"
+	@pointerdown="onPointerDown?.($event, 'edge', { intersection })"
+/>
+</template>
+
+<script setup>
+import { layoutContextInjectionKey } from "../types/vue.js";
+import { useAttrs, inject } from "vue";
+import { twMerge } from "@witchcraft/ui/utils/twMerge";
+import LayoutShapeRect from "./LayoutShapeRect.vue";
+import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
+import {} from "../types/index.js";
+import { dragContextInjectionKey } from "../types/vue.js";
+const $attrs = useAttrs();
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  css: { type: null, required: true },
+  intersection: { type: Object, required: true },
+  onPointerDown: { type: Function, required: false }
+});
+const ctx = inject(layoutContextInjectionKey, void 0);
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+const dragCtx = inject(dragContextInjectionKey, void 0);
+if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+</script>

package/dist/runtime/components/LayoutIntersectionHandle.vue.d.ts

@@ -0,0 +1,10 @@
+import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
+import { type EdgeDragStartData } from "../types/index.js";
+import type { IntersectionEntry } from "../types/index.js";
+type __VLS_Props = {
+    css: ReturnType<typeof getIntersectionsCss>[number];
+    intersection: IntersectionEntry;
+    onPointerDown?: (e: PointerEvent, type: "edge", data: EdgeDragStartData) => void;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/LayoutIntersectionVisible.d.vue.ts

@@ -0,0 +1,6 @@
+import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
+type __VLS_Props = {
+    css: ReturnType<typeof getIntersectionsCss>[number];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/LayoutIntersectionVisible.vue

@@ -0,0 +1,34 @@
+<template>
+<LayoutShapeRect
+	:css="css"
+	:class="twMerge(
+  `
+		drag-intersection-visible
+		z-30
+		rounded-full
+		pointer-events-none
+		[.drag-intersection:hover+&]:bg-blue-500/50
+	`,
+  css._shifted && `w-[7px] h-[7px]`,
+  $attrs.class
+)"
+	v-bind="{ ...$attrs, class: void 0 }"
+/>
+</template>
+
+<script setup>
+import { twMerge } from "@witchcraft/ui/utils/twMerge";
+import { inject, useAttrs } from "vue";
+import LayoutShapeRect from "./LayoutShapeRect.vue";
+import { layoutContextInjectionKey } from "../types/vue.js";
+import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
+const $attrs = useAttrs();
+defineOptions({
+  inheritAttrs: false
+});
+defineProps({
+  css: { type: null, required: true }
+});
+const ctx = inject(layoutContextInjectionKey, void 0);
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+</script>

package/dist/runtime/components/LayoutIntersectionVisible.vue.d.ts

@@ -0,0 +1,6 @@
+import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
+type __VLS_Props = {
+    css: ReturnType<typeof getIntersectionsCss>[number];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/LayoutIntersections.d.vue.ts

@@ -0,0 +1,21 @@
+declare var __VLS_1: {
+    css: any;
+    onPointerDown: any;
+    intersection: any;
+}, __VLS_6: {
+    css: any;
+    intersection: any;
+};
+type __VLS_Slots = {} & {
+    handler?: (props: typeof __VLS_1) => any;
+} & {
+    indicator?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LayoutIntersections.vue

@@ -0,0 +1,52 @@
+<template>
+<template
+	v-for="css, i of cssDragIntersections"
+	:key="cssToKey(css.handle)"
+>
+	<slot name="handler" v-bind="{
+  css: css.handle,
+  onPointerDown: dragCtx.dragStart,
+  intersection: draggableIntersections[i]
+}">
+		<LayoutIntersectionHandle
+			:css="css.handle"
+			:intersection="draggableIntersections[i]"
+		/>
+	</slot>
+	<slot name="indicator" v-bind="{ css: css.visible, intersection: draggableIntersections[i] }">
+		<LayoutIntersectionVisible
+			:css="css.visible"
+		/>
+	</slot>
+</template>
+</template>
+
+<script setup>
+import { dragContextInjectionKey, layoutContextInjectionKey } from "../types/vue.js";
+import { computed, inject } from "vue";
+import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js";
+import { cssToKey } from "../utils/cssToKey.js";
+import LayoutIntersectionHandle from "./LayoutIntersectionHandle.vue";
+import LayoutIntersectionVisible from "./LayoutIntersectionVisible.vue";
+defineOptions({
+  inheritAttrs: false
+});
+const ctx = inject(layoutContextInjectionKey, void 0);
+if (!ctx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+const dragCtx = inject(dragContextInjectionKey, void 0);
+if (!dragCtx) throw new Error("LayoutEdges must be used within a LayoutWindow");
+const draggableIntersections = computed(
+  () => dragCtx.intersections.value.filter((_) => !_.isWindowEdge && (_.count === 4 || _.count === 1 && _.sharesEdge))
+);
+const cssDragIntersections = computed(() => {
+  const intersections = [];
+  const thick = getIntersectionsCss(draggableIntersections.value, {
+    intersectionWidth: `var(--layoutIntersectionWidth, 15px)`
+  });
+  const thin = getIntersectionsCss(draggableIntersections.value, {});
+  for (let i = 0; i < thick.length; i++) {
+    intersections.push({ handle: thick[i], visible: thin[i] });
+  }
+  return intersections;
+});
+</script>

package/dist/runtime/components/LayoutIntersections.vue.d.ts

@@ -0,0 +1,21 @@
+declare var __VLS_1: {
+    css: any;
+    onPointerDown: any;
+    intersection: any;
+}, __VLS_6: {
+    css: any;
+    intersection: any;
+};
+type __VLS_Slots = {} & {
+    handler?: (props: typeof __VLS_1) => any;
+} & {
+    indicator?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/{LayoutShapeSquare.d.vue.ts → LayoutShapeRect.d.vue.ts}

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from "vue";
-import type { LayoutShapeSquareProps } from "../types/index.js";
-type __VLS_Props = LayoutShapeSquareProps & /** @vue-ignore */ HTMLAttributes;
+import type { LayoutShapeRectProps } from "../types/index.js";
+type __VLS_Props = LayoutShapeRectProps & /** @vue-ignore */ HTMLAttributes;
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

package/dist/runtime/components/{LayoutShapeSquare.vue.d.ts → LayoutShapeRect.vue.d.ts}

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from "vue";
-import type { LayoutShapeSquareProps } from "../types/index.js";
-type __VLS_Props = LayoutShapeSquareProps & /** @vue-ignore */ HTMLAttributes;
+import type { LayoutShapeRectProps } from "../types/index.js";
+type __VLS_Props = LayoutShapeRectProps & /** @vue-ignore */ HTMLAttributes;
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;