@witchcraft/ui 0.3.26 → 0.4.0-beta.2

package/src/runtime/components/WPagination/WPagination.vue

@@ -0,0 +1,207 @@
+<template>
+<PaginationRoot
+	:total="total"
+	:items-per-page="itemsPerPage"
+	:sibling-count="siblingCount"
+	show-edges
+	:class="twMerge(`
+		pagination--wrapper
+		flex flex-wrap items-center justify-center gap-2
+	`, ($attrs as any).class)"
+	v-model:page="current"
+	v-bind="{ ...$attrs, class: undefined }"
+>
+	<PaginationList
+		v-slot="{ items }"
+		class="flex items-center gap-2 w-full"
+	>
+		<PaginationFirst
+			as-child
+			:class="`pagination--link ${pageClasses}`"
+		>
+			<a
+				:href="customRoute(route, 1).href"
+				:aria-label="t('pagination.aria.go-to-first-page')"
+			>
+				<slot name="first">
+					<i-lucide-chevrons-left class="w-4 h-4"/>
+				</slot>
+			</a>
+		</PaginationFirst>
+
+		<PaginationPrev
+			as-child
+			:class="`pagination--link ${pageClasses}`"
+		>
+			<a
+				:href="customRoute(route, current - 1).href"
+				:aria-label="t('pagination.aria.go-to-previous-page')"
+				@click="onLinkClick($event, current - 1)"
+			>
+				<slot name="prev">
+					<i-lucide-chevron-left class="w-4 h-4"/>
+				</slot>
+			</a>
+		</PaginationPrev>
+
+		<div class="pagination--spacer flex-1"/>
+
+		<template v-for="(page, index) in items">
+			<PaginationListItem
+				v-if="page.type === 'page'"
+				:value="page.value"
+				as-child
+				:key="index"
+			>
+				<a
+					:href="customRoute(route, page.value).href"
+					:aria-label="t('pagination.aria.go-to-page', { count: page.value })"
+					:class="page.value === current ? currentPageClasses : pageClasses"
+					@click="onLinkClick($event, page.value)"
+				>
+					<slot
+						name="page"
+						:value="page.value"
+					>
+						{{ page.value }}
+					</slot>
+				</a>
+			</PaginationListItem>
+
+			<!-- @vue-expect-error index is a prop... -->
+			<PaginationEllipsis
+				v-else
+				:index="index"
+				class="pagination--page-fill flex items-center justify-center w-8 h-8"
+				:key="page.type"
+			>
+				...
+			</PaginationEllipsis>
+		</template>
+
+		<div class="pagination--spacer flex-1"/>
+
+		<PaginationNext
+			as-child
+			:class="`pagination--link ${pageClasses}`"
+		>
+			<a
+				:href="customRoute(route, current + 1).href"
+				:aria-label="t('pagination.aria.go-to-next-page')"
+				@click="onLinkClick($event, current + 1)"
+			>
+				<slot name="next">
+					<i-lucide-chevron-right class="w-4 h-4"/>
+				</slot>
+			</a>
+		</PaginationNext>
+
+		<PaginationLast
+			as-child
+			:class="`pagination--link ${pageClasses}`"
+		>
+			<a
+				:href="customRoute(route, Math.ceil(total / itemsPerPage)).href"
+				:aria-label="t('pagination.aria.go-to-last-page')"
+				@click="onLinkClick($event, Math.ceil(total / itemsPerPage))"
+			>
+				<slot name="last">
+					<i-lucide-chevrons-right class="w-4 h-4"/>
+				</slot>
+			</a>
+		</PaginationLast>
+	</PaginationList>
+</PaginationRoot>
+</template>
+
+<script setup lang="ts">
+import {
+	PaginationEllipsis,
+	PaginationFirst,
+	PaginationLast,
+	PaginationList,
+	PaginationListItem,
+	PaginationNext,
+	PaginationPrev,
+	PaginationRoot,
+	type PaginationRootProps
+} from "reka-ui"
+import { type HTMLAttributes, useAttrs } from "vue"
+
+import ILucideChevronLeft from "~icons/lucide/chevron-left"
+import ILucideChevronRight from "~icons/lucide/chevron-right"
+import ILucideChevronsLeft from "~icons/lucide/chevrons-left"
+import ILucideChevronsRight from "~icons/lucide/chevrons-right"
+
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
+import type { TailwindClassProp } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+
+defineOptions({
+	name: "WPagination",
+	inheritAttrs: false
+})
+
+const t = useInjectedI18n()
+const $attrs = useAttrs()
+
+const props = withDefaults(defineProps<
+	& /** @vue-ignore */ Omit<HTMLAttributes, "class">
+	& /** @vue-ignore */ TailwindClassProp
+	& Pick<PaginationRootProps, "defaultPage" | "siblingCount" | "itemsPerPage">
+	& {
+		route: string
+		customRoute?: (route: string, i: number) => { i: number, href: string }
+		total: number
+	}
+>(), {
+	customRoute: (route: string = "", i: number) => {
+		if (i <= 1) return { href: route, i: 1 }
+		return { href: `${route}${i}`, i }
+	},
+	siblingCount: 1,
+	defaultPage: 1,
+	itemsPerPage: 1
+})
+
+const current = defineModel<number>("current", { required: true })
+
+const emit = defineEmits<{
+	/**
+	 * Fired when a link is clicked. Can be used to prevent navigation. Is passed the href calculated by customRoute.
+	 */
+	(e: "link-click", event: MouseEvent, payload: { i: number, href: string }): void
+}>()
+
+function onLinkClick(event: MouseEvent, pageNum: number) {
+	const routeInfo = props.customRoute(props.route, pageNum)
+	emit("link-click", event, routeInfo)
+}
+
+const commonClasses = `
+	flex
+	items-center
+	justify-center
+	w-8
+	h-8
+	focus-outline
+	border-b-2
+	border-transparent
+	transition-all
+	outlined:rounded-sm
+`
+const pageClasses = `
+	${commonClasses}
+	focus-outline
+	hover:text-accent-600
+	hover:border-b-accent-500
+	hover:scale-125
+`
+
+const currentPageClasses = `
+	${commonClasses}
+	border-b-accent-500
+	scale-125
+`
+</script>
+

package/src/runtime/components/{LibPalette/LibPalette.stories.ts → WPalette/WPalette.stories.ts}

@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Meta, StoryObj } from "@storybook/vue3"
 
-import LibPalette from "./LibPalette.vue"
+import WPalette from "./WPalette.vue"
 
 import { theme } from "../../theme.js"
 import * as components from "../index.js"
 
-const meta: Meta<typeof LibPalette> = {
-	component: LibPalette,
+const meta: Meta<typeof WPalette> = {
+	component: WPalette,
 	title: "Components/Palette",
 	args: {
 		// theme,
@@ -15,14 +15,14 @@ const meta: Meta<typeof LibPalette> = {
 }
 
 export default meta
-type Story = StoryObj<typeof LibPalette>
+type Story = StoryObj<typeof WPalette>
 
 export const Primary: Story = {
 	render: args => ({
-		components: { ...components, LibPalette },
+		components: { ...components, WPalette },
 		setup: () => ({ args: { ...args, theme } }),
 		template: `
-			<LibPalette v-bind="{...args}">{{args.value}}</LibPalette>
+			<WPalette v-bind="{...args}">{{args.value}}</WPalette>
 		`
 	})
 }

package/src/runtime/components/{LibPalette/LibPalette.vue → WPalette/WPalette.vue}

@@ -25,24 +25,19 @@
 </div>
 </template>
 
-<script lang="ts">
-export default { name: "LibPalette" }
-</script>
-
-<script setup  lang="ts">
+<script setup lang="ts">
 import { keys } from "@alanscodelog/utils/keys"
 import type { Theme } from "metamorphosis"
 
-import type { BaseInteractiveProps, LinkableByIdProps } from "../shared/props.js"
+import type { BaseInteractiveProps } from "../../types/index.js"
 
 const props = withDefaults(defineProps<
-	& LinkableByIdProps
 	& BaseInteractiveProps
 	& {
 		theme?: Theme
 	}>(), {
 	theme: () => ({} as any),
-	unstyle: false, disabled: false, readonly: false, border: true
+	border: true
 })
 
 const exclude = ["--color-bg", "--color-fg"]

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,161 @@
+<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(`popup--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(`
+				popup--content-wrapper
+				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
+				`,
+				contentProps?.class)"
+		>
+			<div
+				:class="twMerge(`
+						popup--content
+						flex
+						flex-col
+						bg-neutral-50
+						dark:bg-neutral-900
+						rounded-sm
+						p-2
+						text-sm
+						shadow-sm
+						shadow-black/30
+						border
+						border-black/30
+						whitespace-pre-wrap
+						overflow-auto
+					`)"
+			>
+				<slot name="popover"/>
+			</div>
+
+			<PopoverArrow
+				class="
+					-mt-px
+					fill-neutral-50
+					dark:fill-neutral-800
+					drop-shadow-[0_2px_1px_rgba(0,0,0,0.3)]
+					relative
+				"
+			/>
+		</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: "WPopup",
+	inheritAttrs: false
+})
+
+
+const props = withDefaults(defineProps<
+	& PopupConstrainToProps
+	& {
+		backdropClass?: string
+		/* If true, a backdrop is shown behind the popup. Whether interaction is allowed outside the popover is still determined by `disableOutsidePointerEvents`. */
+		showBackdrop?: boolean
+		animationDirection?: "use-side" | "use-align" | "left" | "right" | "up" | "down"
+		/** 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,
+	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,60 @@
+/* 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"
+
+const meta: Meta<typeof WPopup> = {
+	component: WPopup,
+	title: "Components/Popup"
+}
+
+export default meta
+type Story = StoryObj<typeof WPopup>
+
+export const Primary: Story = {
+	render: args => ({
+		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 v-model="value" v-bind="args">
+					<template #button>
+						<WButton>Open Modal Popup</WButton>
+					</template>
+					<template #popup>
+						<div
+							:style="{width: args.width, height: args.height}"
+							class="p-3"
+						>
+							<div>Popup Content</div>
+							<WButton class="mt-4" @click="value = false">Close</WButton>
+						</div>
+					</template>
+				</WPopup>
+			</div>
+		`
+	})
+}
+
+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"
+	}
+}