@witchcraft/ui 0.3.24 → 0.4.0-beta.1

package/src/runtime/components/{LibTable/LibTable.stories.ts → WTable/WTable.stories.ts}

@@ -3,7 +3,7 @@ import { faker } from "@faker-js/faker"
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { reactive, ref } from "vue"
 
-import LibTable from "./LibTable.vue"
+import WTable from "./WTable.vue"
 
 // todo
 import * as components from "../index.js"
@@ -11,58 +11,62 @@ import * as components from "../index.js"
 // faker is slow, we can just choose from a few hundred pre-generated sentences
 const fakerSentences = Array.from({ length: 100 }).fill(0).map(_ => faker.lorem.sentence(faker.number.int({ min: 1, max: 50 })))
 
-const meta: Meta<typeof LibTable> = {
-	component: LibTable as any,
+
+type ExtraTestArgs = {
+	_slots?: string
+}
+const meta: Meta<typeof WTable> = {
+	component: WTable as any,
 	title: "Components/Table"
 }
 
 export default meta
-type Story = StoryObj<typeof LibTable> & { args: {
-	slots?: string
-	["wrapper-class"]?: string
-} }
+type Story = StoryObj<typeof WTable> & { args: ExtraTestArgs }
 
 export const Primary: Story = {
-	render: args => ({
-		components,
-		setup: () => {
-			const show = ref(true)
-			const debugGrips = ref(false)
-			// careful, storybook passes refs as is causing issues
-			const argsReactive = reactive({
-				...args,
-				resizable: {
-					enabled: true,
-					...args.resizable
-				}
-			})
+	render: args => {
+		const extraArgs = args as ExtraTestArgs
+		return {
+			components,
+			setup: () => {
+				const show = ref(true)
+				const debugGrips = ref(false)
+				// careful, storybook passes refs as is causing issues
+				const argsReactive = reactive({
+					...args,
+					resizable: {
+						enabled: true,
+						...args.resizable
+					}
+				})
 
-			return {
-				args: argsReactive,
-				debugGrips,
-				show
-			}
-		},
-		template: `
+				return {
+					args: argsReactive,
+					debugGrips,
+					show
+				}
+			},
+			template: `
 				<div class="p-2 flex flex-col gap-2 border rounded-md mb-10">
 					Controls:
-					<LibButton class="flex-1" @click="args.resizable.enabled = !args.resizable.enabled">Toggle Resizable (currently {{args.resizable.enabled}})</LibButton>
-					<LibButton @click="args.stickyHeader = !args.stickyHeader">Toggle Sticky Header (currently {{args.stickyHeader}})</LibButton>
-					<LibButton @click="show = !show">Toggle Table</LibButton>
-					<LibButton @click="debugGrips = !debugGrips">Toggle Debug Grips (currently {{debugGrips}})</LibButton>
+					<WButton class="flex-1" @click="args.resizable.enabled = !args.resizable.enabled">Toggle Resizable (currently {{args.resizable.enabled}})</WButton>
+					<WButton @click="args.stickyHeader = !args.stickyHeader">Toggle Sticky Header (currently {{args.stickyHeader}})</WButton>
+					<WButton @click="show = !show">Toggle Table</WButton>
+					<WButton @click="debugGrips = !debugGrips">Toggle Debug Grips (currently {{debugGrips}})</WButton>
 				</div>
 				<div :class="debugGrips ? ' [&_.grip]:bg-red-500': ''">
-					<lib-table
+					<WTable
 						v-if="show"
 						v-bind="args"
 					>
-						${(args as any).slots}
-					</lib-table>
+						${extraArgs._slots}
+					</WTable>
 				</div>
 		`
-	}),
+		}
+	},
 	args: {
-		cols: ["prop1", "prop2", "prop3"],
+		cols: ["prop1", "prop2", "prop3"] as any,
 		values: [
 			{ prop1: "Item1 Prop 1", prop2: "Item1 Prop 2", prop3: "Item1 Prop 3" },
 			{ prop1: "Item2 Prop 1", prop2: "Item2 Prop 2", prop3: "Item2 Prop 3" },
@@ -148,7 +152,7 @@ export const InitialSize: Story = {
 			[&:not(.resizable-cols-setup)_thead_tr]:flex-nowrap
 			[&:not(.resizable-cols-setup)_thead_th:not(.override-initial)]:flex-1
 		`,
-		slots: `
+		_slots: `
 			<template #header-prop3="colProps">
 				<th
 					:class="\`\${colProps.class} [table:not(.resizable-cols-setup)_&]:w-[min-content] whitespace-nowrap override-initial\`"
@@ -183,9 +187,11 @@ export const StickyHeader: Story = {
 		// moving the border to the wrapper is to hide the little bits of border sticking out
 		// added back the right straight border otherwise the scrollbar looks ass
 		// this is ever so slightly visible if there is no scrollbar
-		["wrapper-class"]: `
-			max-h-[50dvh]
-		`,
+		wrapperAttrs: {
+			class: `
+				max-h-[50dvh]
+			`
+		},
 		values: Array.from({ length: 200 }).fill(0).map((_, i) => ({
 			prop1: `Item${i + 1} Prop 1`,
 			prop2: `Item${i + 1} Prop 2`,
@@ -206,9 +212,11 @@ export const VirtualizedFixedHeight: Story = {
 			enabled: true
 		},
 		stickyHeader: true,
-		["wrapper-class"]: `
-			max-h-[50dvh]
-		`,
+		wrapperAttrs: {
+			class: `
+				max-h-[50dvh]
+			`
+		},
 		values: Array.from({ length: 10000 }).fill(0).map((_, i) => ({
 			prop1: `Item${i + 1} Prop 1`,
 			prop2: `Item${i + 1} Prop 2`,
@@ -259,9 +267,9 @@ export const VirtualizedFitWidthFalse: Story = {
 			[&:not(.resizable-cols-setup)]:w-max
 			[&:not(.resizable-cols-setup)_th]:w-max
 		`,
-		["wrapper-class"]: `
-			max-h-[50dvh]
-		`,
+		wrapperAttrs: {
+			class: `max-h-[50dvh]`
+		},
 		values: Array.from({ length: 10000 }).fill(0).map((_, i) => ({
 			prop1: `Item${i + 1} Prop 1`,
 			prop2: `Item${i + 1} Prop 2`,
@@ -284,18 +292,18 @@ export const ThreeColSomeColsNotResizable: Story = {
 		</div>
 		<div :class="debugGrips ? ' [&_.grip]:bg-red-500': ''">
 			<div class="flex flex-col gap-2 w-full">
-				<lib-table
+				<WTable
 					v-bind="args"
 				>
-				</lib-table>
-				<lib-table
+				</WTable>
+				<WTable
 				v-bind="{...args, colConfig:args.colConfig2}"
 				>
-				</lib-table>
-				<lib-table
+				</WTable>
+				<WTable
 					v-bind="{...args, colConfig:args.colConfig3}"
 				>
-				</lib-table>
+				</WTable>
 			</div>
 		</div>
 		`

package/src/runtime/components/{LibTable/LibTable.vue → WTable/WTable.vue}

@@ -50,7 +50,9 @@
 		mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `
 		relative
 		`,
-		($attrs as any)['wrapper-class'])"
+		wrapperAttrs?.class
+	)"
+	v-bind="{ ...wrapperAttrs, class: undefined }"
 	ref="parentRef"
 >
 	<div
@@ -63,12 +65,12 @@
 	>
 		<!-- https://github.com/TanStack/virtual/issues/640#issuecomment-2795731690 -->
 		<table
-			:style="{
+			:style="[{
 				...(stickyHeader && mergedVirtualizerOpts.enabled
 					? { '--table-sticky-fix': `${totalSize-tableHeight}px` }
-					: {}),
-				...($attrs as any).style ?? {}
-			}"
+					: {})
+
+			}, $attrs?.style]"
 			:class="twMerge(`
 				table
 				table-fixed
@@ -107,6 +109,7 @@
 				dark:[&_.grip]:hover:bg-neutral-700
 			`,
 				($attrs as any).class)"
+			v-bind="{ ...$attrs, class: undefined, style: undefined }"
 			v-resizable-cols="resizableOptions"
 		>
 			<thead
@@ -163,7 +166,7 @@
 			>
 				<template
 					v-for="(virtual, index) in virtualList"
-					:key="virtual.key"
+					:key="virtual.key as any"
 				>
 					<tr
 						:class="twMerge(`
@@ -182,7 +185,7 @@
 									transform: mergedVirtualizerOpts.method === 'fixed'
 										? `translateY(${virtual.start - index * virtual.size!}px)`
 										: `translateY(${virtual.start}px)`,
-									height: `${virtual.size}px`
+									height: mergedVirtualizerOpts.method === 'fixed' ? `${virtual.size}px` : undefined
 								}
 								: {})
 						}"
@@ -196,7 +199,7 @@
 							<slot
 								:name="col"
 								:item="values[virtual.index]"
-								:value="values[virtual.index][col]"
+								:value="values[virtual.index]![col]"
 								:style="{ width: widths[j] }"
 								:class="classes[`${virtual.index}-${j}`]"
 							>
@@ -204,7 +207,7 @@
 									:style="{ width: widths[j] }"
 									:class="classes[`${virtual.index}-${j}`]"
 								>
-									{{ values[virtual.index][col] }}
+									{{ values[virtual.index]![col] }}
 								</td>
 							</slot>
 						</template>
@@ -222,33 +225,97 @@ import type { MakeRequired } from "@alanscodelog/utils"
 import { keys } from "@alanscodelog/utils/keys"
 import { throttle } from "@alanscodelog/utils/throttle"
 import { useVirtualizer, type VirtualizerOptions } from "@tanstack/vue-virtual"
-import { computed, onMounted, ref, type TableHTMLAttributes } from "vue"
+import { computed, type HTMLAttributes, onMounted, ref, type TableHTMLAttributes, useAttrs } from "vue"
 
 import { useGlobalResizeObserver } from "../../composables/useGlobalResizeObserver.js"
 import { vResizableCols } from "../../directives/vResizableCols.js"
-import type { ResizableOptions, TableColConfig } from "../../types/index.js"
+import type { ResizableOptions, TableColConfig, TailwindClassProp } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import type { TailwindClassProp } from "../shared/props.js"
 
 defineOptions({
-	name: "LibTable",
+	name: "WTable",
 	inheritAttrs: false
 })
 
-const props = withDefaults(defineProps<Props>(), {
+const $attrs = useAttrs()
+const props = withDefaults(defineProps<
+	& {
+		resizable?: Partial<ResizableOptions>
+		values: T[]
+		/** Let's the table know the shape of the data since values might be empty. */
+		cols?: (keyof T)[]
+		rounded?: boolean
+		border?: boolean
+		cellBorder?: boolean
+		/** Disables the header. This also sets the selector to `tr:first-child > td` instead to avoid issues with the vResizableCols directive. */
+		header?: boolean
+		colConfig?: TableColConfig<T>
+		/**
+		 * See tanstack/vue-virtual {@link https://tanstack.com/virtual/latest/docs/api/virtualizer}
+		 *
+		 * The defaults are:
+		 *
+		 * - enabled: false
+		 * - method: "fixed"
+		 * - overscan: (50 if fixed, 10 if dynamic)
+		 * - estimateSize: () => { return 33 }
+		 *
+		 * This also has an additional option, `method`, which can be set to `fixed` or `dynamic` (experimental).
+		 *
+		 * Notes:
+		 *
+		 * - Because of how virtualization works, initial layout (before .resizable-cols-setup class is applied) will only have access to the headers and not the rows. This can cause cols to look very small, especially if using resizable.fitWidth false.
+		 *
+		 * ### Fixed
+		 *
+		 * `fixed` is the default and will set the height of ALL items to the height of the first item onMounted (tanstack does not do this and if your estimateSize if off, the scrolling is weird).
+		 *
+		 * Since the table now truncates rows by default, they will always be the same height unless you change the inner styling. In fixed mode, `forceRecalculateFixedVirtualizer` is exposed if you need to force re-calculation.
+		 *
+		 * If using slots, be sure to at least pass the `class` slot prop to the td element. `style` with width is also supplied but is not required if you're displaying the table as a table.
+		 *
+		 * ### Dynamic (experimental)
+		 *
+		 * In `dynamic` mode we use tanstack's measureElement method. This is more expensive, but it will work with any heights.
+		 *
+		 * Dynamic mode also requires the table displays itself using grid and flex post setup as otherwise dynamic mode doesn't work.
+		 *
+		 * You don't need to do anything unless using slots. If using slots, pass the given `ref` slot prop to ref (internally this is tanstack's measureElement) and the class and style slot props at the very least:
+		 * ```vue
+		 * <template #[`${colName}`]="slotProps">
+		 * 	<td
+		 * 		:ref="slotProps.ref"
+		 * 		:class="slotProps.class"
+		 * 		:style="slotProps.style"
+		 * 	>
+		 * 		{{ slotProps.value }}
+		 * 	</td>
+		 * </template>
+		 * ```
+		 */
+		virtualizerOptions?: Partial<VirtualizerOptions<any, any>> & { method?: "fixed" | "dynamic" }
+		/** Whether to enable sticky header styles. This requires `border:false`. This moves the border to the wrapper and styles a straight border between the scroll bar and the rounded border. */
+		stickyHeader?: boolean
+		/** Which key to use for the rows (only if not using virtualization). */
+		itemKey?: keyof T | ((item: T) => string)
+		/** Pass attributes to the wrapper div. To pass to the table you can use regular top level attributes. */
+		wrapperAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp
+	}
+	& /** @vue-ignore */ Omit<TableHTMLAttributes, "class" | "readonly" | "disabled">
+	& /** @vue-ignore */ TailwindClassProp
+>(), {
 	resizable: () => ({}),
-	values: () => [] as T[],
 	cols: () => [] as (keyof T)[],
 	rounded: true,
 	border: true,
 	cellBorder: true,
 	header: true,
-	colConfig: () => ({}),
+	colConfig: () => ({} as any),
 	virtualizerOptions: () => ({ }),
-	enableStickyHeader: false,
-	itemKey: ""
+	enableStickyHeader: false
 })
 
+
 const widths = ref([])
 
 
@@ -402,73 +469,4 @@ defineExpose({
 })
 </script>
 
-<script lang="ts">
-// generic isn't working here :/
-type T = any
 
-type RealProps = {
-	resizable?: Partial<ResizableOptions>
-	values?: T[]
-	/** Let's the table know the shape of the data since values might be empty. */
-	cols?: (keyof T)[]
-	rounded?: boolean
-	border?: boolean
-	cellBorder?: boolean
-	/** Disables the header. This also sets the selector to `tr:first-child > td` instead to avoid issues with the vResizableCols directive. */
-	header?: boolean
-	colConfig?: TableColConfig<T>
-	/**
-	 * See tanstack/vue-virtual {@link https://tanstack.com/virtual/latest/docs/api/virtualizer}
-	 *
-	 * The defaults are:
-	 *
-	 * - enabled: false
-	 * - method: "fixed"
-	 * - overscan: (50 if fixed, 10 if dynamic)
-	 * - estimateSize: () => { return 33 }
-	 *
-	 * This also has an additional option, `method`, which can be set to `fixed` or `dynamic` (experimental).
-	 *
-	 * Notes:
-	 *
-	 * - Because of how virtualization works, initial layout (before .resizable-cols-setup class is applied) will only have access to the headers and not the rows. This can cause cols to look very small, especially if using resizable.fitWidth false.
-	 *
-	 * ### Fixed
-	 *
-	 * `fixed` is the default and will set the height of ALL items to the height of the first item onMounted (tanstack does not do this and if your estimateSize if off, the scrolling is weird).
-	 *
-	 * Since the table now truncates rows by default, they will always be the same height unless you change the inner styling. In fixed mode, `forceRecalculateFixedVirtualizer` is exposed if you need to force re-calculation.
-	 *
-	 * If using slots, be sure to at least pass the `class` slot prop to the td element. `style` with width is also supplied but is not required if you're displaying the table as a table.
-	 *
-	 * ### Dynamic (experimental)
-	 *
-	 * In `dynamic` mode we use tanstack's measureElement method. This is more expensive, but it will work with any heights.
-	 *
-	 * Dynamic mode also requires the table displays itself using grid and flex post setup as otherwise dynamic mode doesn't work.
-	 *
-	 * You don't need to do anything unless using slots. If using slots, pass the given `ref` slot prop to ref (internally this is tanstack's measureElement) and the class and style slot props at the very least:
-	 * ```vue
-	 * <template #[`${colName}`]="slotProps">
-	 * 	<td
-	 * 		:ref="slotProps.ref"
-	 * 		:class="slotProps.class"
-	 * 		:style="slotProps.style"
-	 * 	>
-	 * 		{{ slotProps.value }}
-	 * 	</td>
-	 * </template>
-	 * ```
-	 */
-	virtualizerOptions?: Partial<VirtualizerOptions<any, any>> & { method?: "fixed" | "dynamic" }
-	/** Whether to enable sticky header styles. This requires `border:false`. This moves the border to the wrapper and styles a straight border between the scroll bar and the rounded border. */
-	stickyHeader?: boolean
-	/** Which key to use for the rows (only if not using virtualization). */
-	itemKey?: keyof T | ((item: T) => string)
-}
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<TableHTMLAttributes, "class" | "readonly" | "disabled"> & TailwindClassProp>,
-	RealProps { }
-</script>

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

@@ -0,0 +1,82 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ref } from "vue"
+
+import WTooltip from "./WTooltip.vue"
+
+import * as components from "../index.js"
+
+const meta: Meta<typeof WTooltip> = {
+	component: WTooltip as any,
+	title: "Components/Tooltip",
+	args: {
+		content: "This is a tooltip"
+	}
+}
+
+export default meta
+
+type ExtraTestArgs = {
+	_testContent?: string
+	_testTrigger?: string
+}
+
+type Story = StoryObj<typeof WTooltip> & {
+	args?: ExtraTestArgs
+}
+
+export const Primary: Story = {
+	render: args => {
+		const extraArgs = args as ExtraTestArgs
+		return {
+			components,
+			setup() {
+				const showTooltip = ref(false)
+				return {
+					showTooltip,
+					extraArgs,
+					args
+				}
+			},
+			template: `
+			<div class="flex flex-col gap-3 items-center pt-10">
+				<WTooltip v-bind="args">
+					${extraArgs._testTrigger ?? ""}
+					<template #content>
+					${extraArgs._testContent ?? "This is a tooltip"}
+					</template>
+				</WTooltip>
+			</div>
+		`
+		}
+	}
+}
+
+
+export const CustomTrigger: Story = {
+	...Primary,
+	args: {
+
+		_testTrigger: "Custom Trigger"
+	}
+}
+
+export const VeryLongContentConstrainedToTriggerWidth: Story = {
+	...Primary,
+	args: {
+		constrainWidthTo: "trigger",
+		constrainHeightTo: "available",
+		_testTrigger: "<button>Tiny Trigger</button>",
+		// should scroll
+		_testContent: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.".repeat(10)
+	}
+}
+
+export const VeryLongContentConstrainedToCustomPxHeight: Story = {
+	...Primary,
+	args: {
+		constrainHeightTo: 50,
+		// should scroll
+		_testContent: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.".repeat(10)
+	}
+}

package/src/runtime/components/WTooltip/WTooltip.vue

@@ -0,0 +1,126 @@
+<template>
+<TooltipProvider :disabled="disabled">
+	<TooltipRoot
+		:delay-duration="rootProps?.delayDuration ?? 200"
+		:disable-closing-trigger="rootProps?.disableClosingTrigger ?? false"
+		v-bind="rootProps"
+	>
+		<TooltipTrigger
+			v-if="triggerWhileDisabled"
+			as-child
+		>
+			<!-- https://reka-ui.com/docs/components/tooltip#displaying-a-tooltip-from-a-disabled-button -->
+			<span>
+				<slot>
+					<WIcon class="text-neutral-500"><i-lucide-info/></WIcon>
+				</slot>
+			</span>
+		</TooltipTrigger>
+		<TooltipTrigger v-else>
+			<slot>
+				<WIcon class="text-neutral-500">
+					<i-lucide-info/>
+				</WIcon>
+			</slot>
+		</TooltipTrigger>
+		<TooltipPortal
+			:to="to"
+		>
+			<TooltipContent
+				:style="contentStyle"
+				:class="twMerge(`
+					z-100
+					tooltip--content-wrapper
+					origin-[var(--reka-tooltip-content-transform-origin)]
+					data-[side=top]:animate-slideDownAndFade
+					data-[side=right]:animate-slideLeftAndFade
+					data-[side=bottom]:animate-slideUpAndFade
+					data-[side=left]:animate-slideRightAndFade
+					bg-neutral-50
+					dark:bg-neutral-800
+					rounded-sm
+					shadow-sm
+					shadow-black/30
+					border
+					border-black/30
+					p-2
+					overflow-auto
+				`,
+					contentProps?.class
+				) "
+				v-bind="{
+					collisionPadding: 20,
+					side: 'top',
+					...contentProps,
+					class: undefined,
+					style: undefined
+				}"
+			>
+				<div
+					class="
+						tooltip--content-container
+						text-sm
+						whitespace-pre-wrap
+						flex
+						flex-col
+						justify-center
+					"
+				>
+					<slot
+						name="content"
+						v-bind="{ content }"
+					>
+						{{ content }}
+					</slot>
+				</div>
+				<TooltipArrow
+					class="
+						tooltip--arrow
+						-mt-px
+						fill-neutral-50
+						dark:fill-neutral-800
+						drop-shadow-[0_2px_1px_rgba(0,0,0,0.3)]
+						relative
+					"
+				/>
+			</TooltipContent>
+		</TooltipPortal>
+	</TooltipRoot>
+</TooltipProvider>
+</template>
+
+<script setup lang="ts">
+import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from "reka-ui"
+
+import { usePopupConstrainToStyle } from "../../composables/usePopupConstrainToStyle.js"
+import type { PopupConstrainToProps } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+import WIcon from "../WIcon/WIcon.vue"
+
+const props = withDefaults(defineProps<
+	& PopupConstrainToProps
+	& {
+		delayDuration?: number
+		disabled?: boolean
+		triggerWhileDisabled?: boolean
+		content?: string
+		collisionBoundary?: Element | null
+		to?: string
+		/** Reka's TooltipRoot props */
+		rootProps?: any
+		/** Reka's TooltipContent props */
+		contentProps?: any
+	}>(),
+{
+	delayDuration: 200,
+	disabled: false,
+	triggerWhileDisabled: false,
+	constrainWidthTo: "available",
+	constrainHeightTo: "available",
+	content: "",
+	to: "#root"
+})
+
+const contentStyle = usePopupConstrainToStyle("tooltip", props, [props?.contentProps?.style])
+</script>
+