@witchcraft/ui 0.4.0 → 0.4.1

package/src/runtime/components/WPopover/WPopover.stories.ts

@@ -0,0 +1,218 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { computed, ref, useTemplateRef, watch } from "vue"
+
+import WPopover from "./WPopover.vue"
+
+import * as components from "../index.js"
+
+type ExtraTestArgs = {
+	container?: Record<string, string>
+}
+const meta: Meta<typeof WPopover> = {
+	component: WPopover,
+	title: "Components/Popover",
+	args: {
+
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof WPopover> & { args?: ExtraTestArgs }
+
+export const Primary: Story = {
+	render: args => {
+		const extraArgs = args as ExtraTestArgs
+		return {
+			components,
+			setup: () => {
+				const collisionBoundary = useTemplateRef("collisionBoundary")
+				const value = ref(false)
+				const buttonPositions = ["TL", "TC", "TR", "BL", "BC", "BR"] as const
+				const buttonPos = ref<typeof buttonPositions[number]>("TL")
+				const autoRotatePos = ref(true)
+				const buttonStyle = computed(() => {
+					switch (buttonPos.value) {
+						case "TL": return `align-self: flex-start; justify-self: flex-start;`
+						case "TC": return `align-self: flex-start; justify-self: center;`
+						case "TR": return `align-self: flex-start; justify-self: flex-end;`
+						case "BL": return `align-self: flex-end; justify-self: flex-start;`
+						case "BC": return `align-self: flex-end; justify-self: center;`
+						case "BR": return `align-self: flex-end; justify-self: flex-end;`
+						default: return ""
+					}
+				})
+
+				watch(value, () => {
+					if (!value.value && autoRotatePos.value) {
+						const buttonI = buttonPositions.indexOf(buttonPos.value)
+						if (buttonI < 5) { buttonPos.value = buttonPositions[buttonI + 1]! } else {
+							buttonPos.value = buttonPositions[0]!
+						}
+					}
+				})
+
+				return {
+					args,
+					buttonPos,
+					autoRotatePos,
+					buttonStyle,
+					value,
+					collisionBoundary,
+					extraArgs
+				}
+			},
+			template: `
+			<WSimpleInput
+				:suggestions="['TL', 'TR', 'BL', 'BR']"
+				:restrict-to-suggestions="true"
+				:suggestions-filter="(_, items) => items"
+				:label="'Button Position'"
+				v-model="buttonPos"
+			>
+			</WSimpleInput>
+			<div>
+				<label>Auto Rotate Position</label>
+				<input type="checkbox" v-model="autoRotatePos">
+			</div>
+			<div
+				ref="collisionBoundary"
+				class="border border-red-500"
+			>
+				<div
+					class="overflow-auto max-w-[100vw] max-h-[100vh]"
+				>
+					<div
+						class="test bg-transparency-squares"
+							
+						:style="{
+							display: 'grid',	
+							width: '100vw',
+							height: '80vh',
+							padding: '50px',
+							border: '1px solid black',
+							...extraArgs.container
+						}"
+					>
+								
+					<WPopover v-model="value" v-bind="{
+						...args,
+						contentProps: {...args.contentProps, collisionBoundary},
+						width:undefined,
+						height:undefined,
+					}" >
+						<template #button>
+							<WButton :style="buttonStyle" @click="value = !value" >Toggle Popover</WButton>
+						</template>
+						<template #popover>
+								<WDebug
+									:style="{width: args.width, height: args.height}"
+									class="overflow-auto"
+								>
+									Popover Content
+								</WDebug>
+						</template>
+					</WPopover>
+					</div>
+				</div>
+			</div>
+			`
+		}
+	}
+}
+
+export const PopoverPreventsBoundaryEscape = {
+	...Primary,
+	args: {
+		container: {
+			width: "150vw",
+			height: "150vh"
+		}
+	}
+}
+export const PopoverAllowBoundaryEscape = {
+	...Primary,
+	args: {
+		contentProps: {
+			sticky: "partial"
+		},
+		container: {
+			width: "150vw",
+			height: "150vh"
+		}
+	}
+}
+/** Should cover button due to prioritizePosition */
+export const PopoverPositionPriority = {
+	...Primary,
+	args: {
+		height: "500px",
+		contentProps: {
+			prioritizePosition: true,
+			side: "top"
+		},
+		container: {
+			width: "150vw",
+			height: "150vh"
+		}
+	}
+}
+/** When the popover is too wide, it's set to overscroll content although ideally the popover should scroll it's own content. */
+export const PopoverTooBig = {
+	...Primary,
+	args: {
+		width: "110vw",
+		height: "110vh"
+	}
+}
+export const PopoverRightStart = {
+	...Primary,
+	args: {
+		contentProps: {
+			side: "right",
+			align: "start"
+		}
+	}
+}
+
+export const PopoverLeftEnd = {
+	...Primary,
+	args: {
+		contentProps: {
+			side: "left",
+			align: "end"
+		}
+	}
+}
+export const PopoverBottomStart = {
+	...Primary,
+	args: {
+		contentProps: {
+			side: "bottom",
+			align: "start"
+		}
+	}
+}
+
+export const PopoverTopEnd = {
+	...Primary,
+	args: {
+		contentProps: {
+			side: "top",
+			align: "end"
+		}
+	}
+}
+
+export const RightMenuShapeExample = {
+	...Primary,
+	args: {
+		contentProps: {
+			width: "300px",
+			height: "500px",
+			side: "right",
+			align: "start"
+		},
+		animationDirection: "use-align"
+	}
+}

package/src/runtime/components/WPopover/WPopover.vue

@@ -0,0 +1,168 @@
+<template>
+<PopoverRoot
+	v-model:open="modelValue"
+	v-bind="rootProps"
+>
+	<PopoverAnchor
+		v-if="$slots.button"
+		as-child
+	>
+		<slot name="button"/>
+	</PopoverAnchor>
+
+	<PopoverPortal :to="to">
+		<transition>
+			<div
+				v-if="showBackdrop && modelValue"
+				:class="twMerge(`popover--backdrop absolute inset-0 bg-black/50`, backdropClass)"
+				@click="modelValue = false"
+			/>
+		</transition>
+
+		<PopoverContent
+			v-bind="{
+				disableOutsidePointerEvents: false,
+				side: 'bottom',
+				sideFlip: true,
+				align: 'center',
+				sideOffset: 0,
+				alignOffset: 0,
+				avoidCollisions: true,
+				prioritizePosition: false,
+				sticky: 'always',
+				collisionPadding: 10,
+				positionStrategy: 'absolute',
+				...contentProps,
+				style: undefined
+			}"
+			:style="contentStyle"
+			:class="twMerge(`
+				popover--content
+				focus:outline-none
+				overflow-auto
+				scrollbar-hidden
+			`,
+				animationDirection === `use-side` && `
+				data-[side=top]:animate-slideInUp
+				data-[side=bottom]:animate-slideInDown
+				data-[side=left]:animate-slideInLeft
+				data-[side=right]:animate-slideInRight
+			`,
+				animationDirection === `use-align` && (contentProps?.side === 'top' || contentProps?.side === 'bottom' || !contentProps?.side) && `
+					data-[align=start]:animate-slideInLeft
+					data-[align=end]:animate-slideInRight
+					data-[align=center]:animate-contentShow
+				`,
+				animationDirection === `use-align` && (contentProps?.side === 'left' || contentProps?.side === 'right' || !contentProps?.side) && `
+					data-[align=start]:animate-slideInDown
+					data-[align=end]:animate-slideInUp
+					data-[align=center]:animate-contentShow
+				`,
+				animationDirection === `left` && `
+					animate-slideInLeft
+				`,
+				animationDirection === `right` && `
+					animate-slideInRight
+				`,
+				animationDirection === `up` && `
+					data-[side=top]:animate-slideInUp
+				`,
+				animationDirection === `down` && `
+					animate-slideInDown
+				`,
+				animationDirection === `show` && `
+					animate-contentShow
+				`,
+				contentProps?.class)"
+		>
+			<div
+				:class="twMerge(`
+					popover--content-inner
+					flex
+					flex-col
+					bg-neutral-50
+					dark:bg-neutral-900
+					rounded-sm
+					p-2
+					shadow-sm
+					shadow-black/30
+					border
+					border-black/30
+					whitespace-pre-wrap
+					overflow-auto
+				`)"
+			>
+				<slot name="popover"/>
+			</div>
+
+			<PopoverArrow
+				v-if="showArrow"
+				:class="twMerge(`
+					popover--arrow
+					-mt-px
+					fill-neutral-50
+					dark:fill-neutral-800
+					drop-shadow-[0_2px_1px_rgba(0,0,0,0.3)]
+					relative
+					stroke-black/30
+				`)"
+			/>
+		</PopoverContent>
+	</PopoverPortal>
+</PopoverRoot>
+</template>
+
+<script setup lang="ts">
+import {
+	type DialogContentEmits,
+	type DialogRootEmits,
+	PopoverAnchor,
+	PopoverArrow,
+	PopoverContent,
+	type PopoverContentProps,
+	PopoverPortal,
+	PopoverRoot,
+	type PopoverRootProps
+} from "reka-ui"
+import type { HTMLAttributes } from "vue"
+
+import { usePopupConstrainToStyle } from "../../composables/usePopupConstrainToStyle.js"
+import type { EmitsToProps, PopupConstrainToProps, TailwindClassProp } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+
+/** Wrapper around reka-ui's `Popover` component. */
+defineOptions({
+	name: "WPopover",
+	inheritAttrs: false
+})
+
+
+const props = withDefaults(defineProps<
+	& PopupConstrainToProps
+	& {
+		backdropClass?: string
+		/* If true, a backdrop is shown behind the popover. Whether interaction is allowed outside the popover is still determined by `disableOutsidePointerEvents`. */
+		showBackdrop?: boolean
+		showArrow?: boolean
+		animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down" | "show" | "none"
+		/** Overrides teleport target. */
+		to?: string
+		/** Overrides reka-ui's PopoverRootProps */
+		rootProps?: PopoverRootProps & EmitsToProps<DialogRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp
+		/** Overrides reka-ui's PopoverContentProps */
+		contentProps?: PopoverContentProps & EmitsToProps<DialogContentEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp
+	}
+>(), {
+	showBackdrop: false,
+	showArrow: true,
+	constrainWidthTo: 400,
+	constrainHeightTo: "available",
+	animationDirection: "use-side",
+	to: "#root"
+})
+
+const modelValue = defineModel<boolean>({ default: false })
+
+const contentStyle = usePopupConstrainToStyle("popover", props, [props?.contentProps?.style])
+</script>
+

package/src/runtime/components/WPopup/WPopup.stories.ts

@@ -0,0 +1,104 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ref } from "vue"
+
+import WPopup from "./WPopup.vue"
+
+import * as components from "../index.js"
+
+type ExtraTestArgs = {
+	_slots: string
+}
+const meta: Meta<typeof WPopup> = {
+	component: WPopup,
+	title: "Components/Popup",
+	args: {
+		title: "Popup Title",
+		description: "Popup Description"
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof WPopup> & { args?: ExtraTestArgs }
+
+export const Primary: Story = {
+	render: args => {
+		const extraArgs = args as ExtraTestArgs
+		return {
+			components,
+			setup: () => {
+				const value = ref(false)
+				return { args, value }
+			},
+			template: `
+			<div class="test bg-transparency-squares flex items-center justify-center" style="height:80vh;border:1px solid black;">
+				<WPopup
+					:title="args.title"
+					:description="args.description"
+					v-model="value"
+					v-bind="args"
+				>
+					${extraArgs._slots}
+					<template #button>
+						<WButton>Open Modal Popup</WButton>
+					</template>
+					<template #extra>
+						<div
+							:style="{width: args.width, height: args.height}"
+						>
+							<div>Extra Slot</div>
+						</div>
+					</template>
+				</WPopup>
+			</div>
+		`
+		}
+	}
+}
+
+export const OtherSlots = {
+	...Primary,
+	args: {
+		_slots: `
+			<template #title>
+				<div>Title Slot</div>
+			</template>
+			<template #description>
+				<div>Description Slot</div>
+			</template>
+			<template #close>
+				<div>Close Slot</div>
+			</template>
+			<template #backdrop>
+				<div>Backdrop Slot</div>
+			</template>
+		`
+	}
+}
+
+export const PopupSlots = {
+	...Primary,
+	args: {
+		_slots: `
+			<template #popup>
+				<div>Popup Slot - Replaces Other Slots except Close (note, you must provide reka's DialogTitle and DialogDescription to avoid it's warnings</div>
+			</template>
+		`
+	}
+}
+export const PopupLarge = {
+	...Primary,
+	args: {
+		width: "80vw",
+		height: "80vh"
+	}
+}
+
+// popup should scroll contents instead of getting to big (popup will limit it)
+export const PopupTooBig = {
+	...Primary,
+	args: {
+		width: "110vw",
+		height: "110vh"
+	}
+}

package/src/runtime/components/WPopup/WPopup.vue

@@ -0,0 +1,134 @@
+<template>
+<DialogRoot
+	v-bind="rootProps"
+	v-model:open="modelValue"
+>
+	<DialogTrigger
+		v-if="$slots.button"
+		as-child
+	>
+		<slot name="button"/>
+	</DialogTrigger>
+
+	<DialogPortal :to="to">
+		<DialogOverlay
+			as-child
+		>
+			<slot
+				name="backdrop"
+				class="popup--backdrop absolute inset-0 bg-black/50"
+			>
+				<div
+					class="popup--backdrop absolute inset-0 bg-black/50"
+				/>
+			</slot>
+		</DialogOverlay>
+
+
+		<DialogContent
+			v-bind="{ ...contentProps, class: undefined }"
+			:class="twMerge(`
+				popup--content
+				z-100
+				focus:outline-none
+				fixed
+				top-1/2
+				left-1/2
+				-translate-x-1/2
+				-translate-y-1/2
+				animate-contentShow
+				max-w-[100dvw]
+				max-h-[100dvh]
+				overflow-auto
+				scrollbar-hidden
+				p-5
+			`, contentProps?.class)"
+		>
+			<div
+				:class="twMerge(`
+					popup--content-inner
+					flex
+					flex-col
+					bg-neutral-100
+					dark:bg-neutral-800
+					rounded-md
+					flex
+					flex-col
+					gap-3
+					p-2
+				`)"
+			>
+				<slot name="popup">
+					<slot name="title">
+						<DialogTitle
+							v-if="title"
+							class="text-lg font-bold"
+						>
+							{{ title }}
+						</DialogTitle>
+					</slot>
+					<slot name="description">
+						<DialogDescription v-if="description">
+							{{ description }}
+						</DialogDescription>
+					</slot>
+					<slot name="extra"/>
+				</slot>
+				<DialogClose as-child>
+					<slot name="close">
+						<WButton
+							class="justify-self-end"
+							@click="modelValue = false"
+						>
+							Close
+						</WButton>
+					</slot>
+				</DialogClose>
+			</div>
+		</DialogContent>
+	</DialogPortal>
+</DialogRoot>
+</template>
+
+<script setup lang="ts">
+import type {
+	DialogContentEmits,
+	DialogContentProps,
+	DialogRootEmits,
+	DialogRootProps
+} from "reka-ui"
+import {
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogOverlay,
+	DialogPortal,
+	DialogRoot,
+	DialogTitle,
+	DialogTrigger } from "reka-ui"
+import type { EmitsToProps, HTMLAttributes } from "vue"
+
+import type { TailwindClassProp } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+import WButton from "../WButton/WButton.vue"
+
+defineOptions({ name: "WPopup", inheritAttrs: false })
+
+withDefaults(defineProps<
+	& {
+		title?: string
+		description?: string
+		backdropClass?: string
+		/** Overrides reka-ui's DialogContentProps */
+		contentProps?: DialogContentProps & EmitsToProps<DialogContentEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp
+		/** Overrides reka-ui's DialogRootProps */
+		rootProps?: DialogRootProps & EmitsToProps<DialogRootEmits> & Omit<HTMLAttributes, "class"> & TailwindClassProp
+		/** Overrides teleport target. */
+		to?: string
+	}
+>(), {
+	to: "#root"
+})
+
+const modelValue = defineModel<boolean>({ default: false })
+</script>