v0feat: better types

- Improved component types.
- Also, small change, technically breaking, but half of it wasn't even working.
LayoutWindow now takes edgesProps and frameProps instead of prefixed attributes
(e.g. edges-class). Also there is no decosProps, they weren't actually passed
down before anyways.

Author: alanscodelog

eslint.config.js

@@ -12,7 +12,8 @@ export default createConfigForNuxt({
 		{
 			rules: {
 				"jsdoc/check-tag-names": ["warn", { definedTags: [
-					"experimental"
+					"experimental",
+					"@vue-ignore"
 				] }]
 			}
 		},

src/runtime/components/LayoutDecos.vue

@@ -1,8 +1,4 @@
 <template>
-<!-- <div -->
-<!-- 	v-bind="$attrs" -->
-<!-- 	class="decos" -->
-<!-- > -->
 <template
 	v-for="(deco) of splitDecos"
 	:key="deco.id"
@@ -34,21 +30,15 @@
 		:css="getShapeSquareCss( frames[deco.id], `var(--layoutEdgeWidth,2px)`)"
 	/>
 </template>
-<!-- </div> -->
 </template>
 <script lang="ts" setup>
-import { twMerge } from "@witchcraft/ui/utils/twMerge"
-import type { PropType } from "vue"
-import { computed, inject, ref, useAttrs } from "vue"
 
 import LayoutShapeSquare from "./LayoutShapeSquare.vue"
 
-import { dirToOrientation } from "../helpers/dirToOrientation.js"
 import { getShapeSquareCss } from "../helpers/getShapeSquareCss"
 import { getVisualEdgeCss } from "../helpers/getVisualEdgeCss"
 import { type CloseDeco, type LayoutFrames, type Size, type SplitDeco } from "../types/index.js"
 
-const $attrs = useAttrs()
 
 const props = withDefaults(defineProps<{
 	frames: LayoutFrames

src/runtime/components/LayoutEdges.vue

@@ -9,7 +9,9 @@
 		border-blue-500
 		border
 	`,
+		($attrs as any).class
 	)"
+	v-bind="{...$attrs, class: undefined}"
 />
 
 <template
@@ -73,51 +75,42 @@
 </template>
 <script lang="ts" setup>
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
-import { computed,type PropType, ref,useAttrs } from "vue"
+import { computed,useAttrs } from "vue"
 
 import LayoutShapeSquare from "./LayoutShapeSquare.vue"
 
-import { frameToEdges } from "../helpers/frameToEdges.js"
 import { getIntersectionsCss } from "../helpers/getIntersectionsCss.js"
 import { getShapeSquareCss } from "../helpers/getShapeSquareCss.js"
 import { getVisualEdgesCss } from "../helpers/getVisualEdgesCss.js"
 import { isEdgeEqual } from "../helpers/isEdgeEqual.js"
-import { toWindowCoord } from "../helpers/toWindowCoord.js"
 import {
 	type Edge,
 	type EdgeCss,
 	type IntersectionEntry,
-	type LayoutFrame,
-	type LayoutWindow,
-	type Point,
+	type LayoutEdgesProps,
 } from "../types/index.js"
 const $attrs = useAttrs()
 
+defineOptions({
+	inheritAttrs: false,
+})
+
 const emit = defineEmits<{
 	dragStart: [e: PointerEvent, { edge?: Edge, intersection?: IntersectionEntry }]
 }>()
-const props = withDefaults(defineProps< {
-	edges: Edge[]
-	intersections: IntersectionEntry[]
-	/** The owning window, needed so we can correctly scale coordinates. */
-	win: LayoutWindow
-	/** The active frame, used to render the active edges. Calculate it from the `frames` returned by `useFrames` composable because otherwise it will be the wrong size while dragging. */
-	activeFrame?: LayoutFrame
-	draggingEdge?: Edge
-	draggingIntersection?: IntersectionEntry
-}>(), {
+const props = withDefaults(defineProps<LayoutEdgesProps>(), {
 	activeFrame: undefined,
 	draggingEdge: undefined,
 	draggingIntersection: undefined,
 })
 
 
-const activeFrameCssEdges = computed(() => {
-	if (!props.activeFrame) return []
-	return getVisualEdgesCss(Object.values(frameToEdges(props.activeFrame)), {
-		edgeWidth: `var(--layoutEdgeWidth, 2px)`,
-	})
-})
+// const activeFrameCssEdges = computed(() => {
+// 	if (!props.activeFrame) return []
+// 	return getVisualEdgesCss(Object.values(frameToEdges(props.activeFrame)), {
+// 		edgeWidth: `var(--layoutEdgeWidth, 2px)`,
+// 	})
+// })
 
 const cssDragEdges = computed(() => {
 	const thickEdges = getVisualEdgesCss(

src/runtime/components/LayoutFrame.vue

@@ -1,5 +1,4 @@
 <template>
-<!-- @vue-expect-error just let it inherit extra attrs -->
 <!-- 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
 	tabindex="0"
@@ -9,7 +8,7 @@
 		p-[var(--layoutEdgeWidth,_2px)]
 		overflow-hidden
 		`,
-		$attrs.class
+		($attrs as any).class
 	)"
 	v-bind="{...$attrs, class: undefined}"
 	@focus="emit('focus')"
@@ -24,24 +23,25 @@
 </template>
 <script lang="ts" setup>
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
-import { type PropType } from "vue"
 import { useAttrs } from "vue"
 const $attrs = useAttrs()
 
+defineOptions({
+	inheritAttrs: false,
+})
+
 import LayoutShapeSquare from "./LayoutShapeSquare.vue"
 
 import { getShapeSquareCss } from "../helpers/getShapeSquareCss"
 import { debugFrame } from "../layout/debugFrame.js"
-import { type LayoutFrame } from "../types/index.js"
+import { type LayoutFrameProps } from "../types/index.js"
 
 
 const emit = defineEmits<{
 	/** Documentation #todo */
 	(e: "focus"): void
 }>()
 
-/* const props =  */defineProps({
-	frame: { type: Object as PropType<LayoutFrame>, required: true },
-	isActiveFrame: { type: Boolean, required: true },
-})
+/* const props =  */defineProps<LayoutFrameProps>(
+)
 </script>

src/runtime/components/LayoutShapeSquare.vue

@@ -15,7 +15,7 @@
 		left-[var(--posX)]
 	`,
 		css.translate && `[transform:var(--translate)]`,
-		$attrs.class as any
+		($attrs as any).class
 	)"
 	v-bind="{...$attrs, class: undefined}"
 >
@@ -24,15 +24,14 @@
 </template>
 <script setup lang="ts">
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
-import { type PropType } from "vue"
 import { useAttrs } from "vue"
 
-import type { BaseSquareCss } from "../types/index.js"
+import type { LayoutShapeSquareProps } from "../types/index.js"
 const $attrs = useAttrs()
 
-
-const props = defineProps({
-	style: { type: String, required: false, default: "" },
-	css: { type: Object as PropType<BaseSquareCss>, required: true },
+defineOptions({
+	inheritAttrs: false,
 })
+
+const props = defineProps<LayoutShapeSquareProps>()
 </script>

src/runtime/components/LayoutWindow.vue

@@ -7,17 +7,17 @@
 	`,
 		isDragging && `dragging cursor-pointer`,
 		requestType && `request-${requestType}`,
-		$attrs.attrs.class
+		($attrs as any).class
 	)"
 	ref="windowEl"
-	v-bind="{...$attrs.attrs, class: undefined}"
+	v-bind="{...$attrs, class: undefined}"
 >
 	<template v-if="windowEl && win">
 		<LayoutFrameComponent :frame="frame"
 			:is-active-frame="frame.id === win.activeFrame"
 			v-for="frame of frames"
 			:key="frame.id"
-			v-bind="$attrs.frameAttrs"
+			v-bind="frameProps"
 			@focus="windowSetActiveFrame(win, frame.id)"
 		>
 			<slot :name="`frame-${frame.id}`" v-bind="{frame}"/>
@@ -29,14 +29,13 @@
 			:intersections="intersections"
 			:dragging-edge="draggingEdges.length === 1 ? draggingEdges[0] : undefined"
 			:dragging-intersection="draggingIntersection"
-			v-bind="$attrs.edgesAttrs"
+			v-bind="edgesProps"
 			@drag-start="dragStart"
 		/>
 		<LayoutDecosComponent
 			:frames="frames"
 			:split-decos="splitDecos"
 			:close-decos="closeDecos"
-			v-bind="$attrs.decosAttrs"
 		/>
 		<slot name="extra-decos"/>
 	</template>
@@ -45,7 +44,6 @@
 			<span
 				class="
 					after:content-['┃']
-					after:text-accent-500
 					last:after:content-none
 					after:mx-1
 					after:text-gray-500
@@ -60,10 +58,10 @@
 </div>
 </template>
 <script lang="ts" setup>
-import { useDivideAttrs } from "@witchcraft/ui/composables/useDivideAttrs"
 import { useGlobalResizeObserver } from "@witchcraft/ui/composables/useGlobalResizeObserver"
 import { twMerge } from "@witchcraft/ui/utils/twMerge"
-import { computed, ref,watch } from "vue"
+import { computed, ref,useAttrs,watch } from "vue"
+import { type HTMLAttributes } from "vue"
 
 import LayoutDecosComponent from "./LayoutDecos.vue"
 import LayoutEdgesComponent from "./LayoutEdges.vue"
@@ -76,10 +74,10 @@ import { SplitAction } from "../drag/SplitAction.js"
 import { type DragState, type IDragAction } from "../drag/types.js"
 import { updateWindowWithEvent } from "../helpers/updateWindowSizeWithEvent.js"
 import { windowSetActiveFrame } from "../layout/windowSetActiveFrame.js"
-import { type CloseDeco, type LayoutWindow, type SplitDeco } from "../types/index.js"
+import { type CloseDeco, type LayoutEdgesProps, type LayoutFrameProps, type LayoutWindow, type SplitDeco } from "../types/index.js"
 
-const $attrs = useDivideAttrs(["frame", "edges", "decos"] as const)
 
+const $attrs = useAttrs()
 const win = defineModel<LayoutWindow>("win", { required: true })
 
 const props = withDefaults(defineProps<{
@@ -96,13 +94,15 @@ const props = withDefaults(defineProps<{
 	 * When this is turned back on again, it will trigger an update. You can also trigger updates manually with the exposed updateWindowSize function.
 	 */
 	allowWindowSizeUpdate?: boolean
+	frameProps?: Partial<Omit<LayoutFrameProps, "frame" | "isActiveFrame" | "onFocus">>,
+	edgesProps?: Partial<Omit<LayoutEdgesProps, "edges" | "intersections" | "win">>
 }>(), {
 	additionalDragActions: () => ([]),
 	splitKeyHandler: undefined,
 	closeKeyHandler: undefined,
 	usageInstructions: () => ({ }),
 	instructionTeleportTo: undefined,
-	allowWindowSizeUpdate: true
+	allowWindowSizeUpdate: true,
 })
 const emit = defineEmits<{
 	(e: "isShowingDrag", value: boolean): void

src/runtime/types/index.ts

@@ -4,6 +4,8 @@ import { z } from "zod"
 
 export * from "../drag/types.js"
 
+import type { HTMLAttributes, StyleValue } from "vue"
+
 import { getMaxInt } from "../settings.js"
 
 export const zUuid = z.uuid()
@@ -289,3 +291,33 @@ export const zFrameCreate = zLayoutFrame.partial({
 	width: true,
 	height: true
 })
+
+
+export type LayoutShapeSquareProps
+	= & {
+		css: BaseSquareCss
+		style?: StyleValue
+	}
+	& /** @vue-ignore */ Omit<HTMLAttributes, "class" | "onFocus"> & { class?: string }
+
+
+export type LayoutEdgesProps
+	= & {
+		edges: Edge[]
+		intersections: IntersectionEntry[]
+		/** The owning window, needed so we can correctly scale coordinates. */
+		win: LayoutWindow
+		/** The active frame, used to render the active edges. Calculate it from the `frames` returned by `useFrames` composable because otherwise it will be the wrong size while dragging. */
+		activeFrame?: LayoutFrame
+		draggingEdge?: Edge
+		draggingIntersection?: IntersectionEntry
+	}
+	& Partial<LayoutShapeSquareProps>
+
+
+export type LayoutFrameProps
+	= & {
+		frame: LayoutFrame
+		isActiveFrame: boolean
+	}
+	& Partial<LayoutShapeSquareProps>