@witchcraft/ui 0.4.0 → 0.4.1

package/src/runtime/components/{LibRoot/LibRoot.vue → WRoot/WRoot.vue}

@@ -1,25 +1,28 @@
 <template>
 <div
-	:id="id"
 	tabindex="-1"
 	:class="twMerge(
 		(showOutline ? 'group outlined outlined-visible' : '[&_*]:outline-hidden'),
 		darkMode && ' dark',
-		($attrs['wrapperAttrs'] as any)?.class
+		wrapperAttrs?.class
 	)"
-	v-bind="{ ...($attrs['wrapperAttrs']), attrs: undefined, class: undefined }"
+	v-bind="{
+		id: 'app',
+		...wrapperAttrs,
+		class: undefined
+	}"
 	:ref="handleRef"
 >
 	<!-- id root is useful for teleports, so they are at the topmost level where they can still be styled -->
 	<!-- See TestControls for why the margins here -->
 	<div
 		id="root"
-		v-bind="{ ...$attrs.attrs, class: undefined, wrapperAttrs: undefined }"
+		v-bind="{ ...$attrs, class: undefined }"
 		:class="twMerge(`
-			dark:bg-fg
-			dark:text-bg
-			bg-bg
-			text-fg
+			dark:bg-neutral-900
+			dark:text-white
+			bg-neutral-50
+			text-black
 		`,
 			testWrapperMode && `
 			px-10
@@ -30,7 +33,7 @@
 			flex
 			flex-col
 		`,
-			($attrs as any).attrs?.class)"
+			($attrs as any).class)"
 	>
 		<TestControls
 			v-if="testWrapperMode"
@@ -48,10 +51,10 @@
 <script setup lang="ts">
 import { unreachable } from "@alanscodelog/utils/unreachable"
 import type { Theme } from "metamorphosis"
-import { type ComponentPublicInstance, computed, onBeforeUnmount, onMounted, ref, toRaw } from "vue"
+import type { ComponentPublicInstance, HTMLAttributes } from "vue"
+import { computed, onBeforeUnmount, onMounted, ref, toRaw, useAttrs } from "vue"
 
 import { useAccesibilityOutline } from "../../composables/useAccesibilityOutline.js"
-import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
 import { useNotificationHandler } from "../../composables/useNotificationHandler.js"
 import { useSetupDarkMode } from "../../composables/useSetupDarkMode.js"
 import { useSetupI18n } from "../../composables/useSetupI18n.js"
@@ -59,19 +62,19 @@ import { useSetupLocale } from "../../composables/useSetupLocale.js"
 import { useShowDevOnlyKey } from "../../composables/useShowDevOnlyKey.js"
 import { NotificationHandler } from "../../helpers/NotificationHandler.js"
 import { theme as defaultTheme } from "../../theme.js"
+import type { TailwindClassProp } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import Notifications from "../LibNotifications/LibNotifications.vue"
 import TestControls from "../TestControls/TestControls.vue"
+import Notifications from "../WNotifications/WNotifications.vue"
 
-const $attrs = useDivideAttrs(["wrapper"])
 
 defineOptions({ name: "Root", inheritAttrs: false, suspensible: false })
+const $attrs = useAttrs()
 const props = withDefaults(defineProps<{
 	theme?: Theme
 	outline?: boolean
 	forceOutline?: boolean
 	testWrapperMode?: boolean
-	id?: string
 	/** You can set a ref to the root element by passing :getRef="_ => el = _" */
 	getRef?: (el: HTMLElement | null) => void
 	/** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
@@ -79,12 +82,12 @@ const props = withDefaults(defineProps<{
 	useBuiltinTranslations?: boolean
 	useNotifications?: boolean
 	notificationHandler?: NotificationHandler
+	wrapperAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp
 }>(), {
 	theme: undefined,
 	testWrapperMode: false,
 	outline: true,
 	forceOutline: false,
-	id: "app",
 	getRef: undefined,
 	isClientSide: true,
 	useBuiltinTranslations: true,

package/src/runtime/components/{LibSimpleInput/LibSimpleInput.stories.ts → WSimpleInput/WSimpleInput.stories.ts}

@@ -1,19 +1,21 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import type { Meta, StoryObj } from "@storybook/vue3"
+import type { StoryObj } from "@storybook/vue3"
+
+import WSimpleInput from "./WSimpleInput.vue"
 
 import * as components from "../index.js"
 
 const meta = {
-	component: components.LibSimpleInput,
+	component: WSimpleInput,
 	title: "Components/Input",
 	args: {
 		modelValue: "Value",
 		placeholder: "Placeholder"
 	}
-} satisfies Meta<typeof components.LibSimpleInput> & Meta<{ custom: string }>
+}
 
 export default meta
-type Story = StoryObj<typeof components.LibSimpleInput> // & StoryObj<typeof extraArgs>
+type Story = StoryObj<typeof components.WSimpleInput>
 
 /** Input */
 export const Primary: Story = {
@@ -25,10 +27,10 @@ export const Primary: Story = {
 		// eslint-disable-next-line no-console
 		setup: () => ({ args, test: () => console.log("Enter") }),
 		template: `
-				<lib-simple-input
+				<WSimpleInput
 				@keydown="test"
-				class="m-2" v-bind="args" v-model="args.modelValue" ></lib-simple-input>
-				<lib-simple-input class="m-2" v-bind="{...args, modelValue:''}" ></lib-simple-input>
+				class="m-2" v-bind="args" v-model="args.modelValue" ></WSimpleInput>
+				<WSimpleInput class="m-2" v-bind="{...args, modelValue:''}" ></WSimpleInput>
 				`
 	})
 }
@@ -41,14 +43,11 @@ export const InsideAFlexbox: Story = {
 		template: `
 				Inside a flexbox:
 				<div class="flex flex-wrap">
-					<lib-simple-input v-bind="args" v-model="args.modelValue"></lib-simple-input>
+					<WSimpleInput v-bind="args" v-model="args.modelValue"></WSimpleInput>
 					<div class="border-1 border-danger-500 flex-1 whitespace-nowrap">Flex Grow: 1</div>
 				</div>
 		`
-	}),
-	args: {
-		stretch: true
-	}
+	})
 }
 
 export const Disabled = {

package/src/runtime/components/{LibSimpleInput/LibSimpleInput.vue → WSimpleInput/WSimpleInput.vue}

@@ -1,7 +1,7 @@
 <template>
 <input
-	:id="id ?? fallbackId"
-	:class="twMerge(`
+	:id="finalId"
+	:class="!unstyle && twMerge(`
 		simple-input
 		flex-1
 		grow-[999999]
@@ -70,12 +70,11 @@
 	)"
 	:data-border="border"
 	:data-invalid="!valid"
-	:type="type"
-	:placeholder="placeholder"
-	:disabled="disabled"
-	:readonly="readonly"
 	v-model="modelValue"
-	v-bind="{ ...$attrs, class: undefined, ...ariaLabel }"
+	v-bind="{
+		...$attrs,
+		class: undefined
+	}"
 	@keydown="handleKeydown"
 	@input="emit('input', $event as InputEvent)"
 >
@@ -84,27 +83,42 @@
 <script lang="ts" setup generic="T">
 import { type InputHTMLAttributes, useAttrs } from "vue"
 
-import { useAriaLabel } from "../../composables/useAriaLabel.js"
+import { useFallbackId } from "../../composables/useFallbackId.js"
 import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js"
 import { hasModifiers } from "../../helpers/hasModifiers.js"
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
 
 defineOptions({
-	name: "LibSimpleInput",
+	name: "WSimpleInput",
 	inheritAttrs: false
 })
 
-const fallbackId = getFallbackId()
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<
+	& /** @vue-ignore */ Omit<
+		InputHTMLAttributes,
+		| "class" | "readonly" | "disabled" | "onSubmit" | "onInput" | "type"
+		// https://github.com/vuejs/core/pull/14237
+		| "autocomplete"
+	>
+	& /** @vue-ignore */ TailwindClassProp
+	& Pick<BaseInteractiveProps, "unstyle" | "border">
+	& {
+		id?: string
+		label?: string
+		valid?: boolean
+		type?: InputHTMLAttributes["type"]
+	}
+>(), {
 	id: "",
 	placeholder: "",
 	valid: true,
 	label: "",
 	type: undefined,
-	unstyle: false, disabled: false, readonly: false, border: true
+	border: true
 })
+const finalId = useFallbackId(props)
 
 const modelValue = defineModel<T>({ required: true })
 
@@ -114,40 +128,12 @@ const emit = defineEmits<{
 	(e: "input", val: InputEvent): void
 }>()
 const $attrs = useAttrs()
-const ariaLabel = useAriaLabel(props, fallbackId)
 
 function handleKeydown(e: KeyboardEvent) {
 	if (e.key === "Enter" && !hasModifiers(e)) {
 		emit("submit", modelValue.value)
 	}
 }
-usePreHydrationValue(props.id ?? fallbackId, modelValue)
+usePreHydrationValue(finalId, modelValue)
 </script>
 
-<script lang="ts">
-type RealProps
-	= & LinkableByIdProps
-		& LabelProps
-		& BaseInteractiveProps
-		& {
-			placeholder?: InputHTMLAttributes["placeholder"]
-			disabled?: InputHTMLAttributes["disabled"]
-			id?: InputHTMLAttributes["id"]
-			type?: InputHTMLAttributes["type"]
-			valid?: boolean
-		}
-
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<
-		InputHTMLAttributes,
-		| "class"
-		| "readonly"
-		| "disabled"
-		| "onSubmit"
-		| "onInput"
-	> & TailwindClassProp>,
-	RealProps
-{}
-</script>

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

@@ -0,0 +1,334 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { faker } from "@faker-js/faker"
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { reactive, ref } from "vue"
+
+import WTable from "./WTable.vue"
+
+// todo
+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 })))
+
+
+type ExtraTestArgs = {
+	_slots?: string
+}
+const meta: Meta<typeof WTable> = {
+	component: WTable as any,
+	title: "Components/Table"
+}
+
+export default meta
+type Story = StoryObj<typeof WTable> & { args: ExtraTestArgs }
+
+export const Primary: Story = {
+	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: `
+				<div class="p-2 flex flex-col gap-2 border rounded-md mb-10">
+					Controls:
+					<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': ''">
+					<WTable
+						v-if="show"
+						v-bind="args"
+					>
+						${extraArgs._slots}
+					</WTable>
+				</div>
+		`
+		}
+	},
+	args: {
+		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" },
+			{ prop1: "Item3 Prop 1", prop2: "Item3 Prop 2", prop3: "Item3 Prop 3" }
+		],
+		colConfig: { prop1: { name: "Header 1" }, prop2: { name: "Header 2" } }
+	}
+}
+
+export const NoCellBorders: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		cellBorder: false
+	}
+}
+
+export const NoBorders: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		border: false
+	}
+}
+export const NoCellBordersNoBorders: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		cellBorder: false,
+		border: false
+	}
+}
+
+export const SquareBorders: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		rounded: false
+	}
+}
+export const NoHeader: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		header: false
+	}
+}
+export const NoHeaderNoBorders: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		header: false,
+		border: false
+	}
+}
+export const NoHeaderNoCellBorders: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		header: false,
+		cellBorder: false
+	}
+}
+
+export const InitialSize: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		colConfig: {
+			prop1: { name: "Initially Flex 1", resizable: true },
+			prop2: { name: "Initially Flex 2", resizable: true },
+			prop3: { name: "Initially Size of Header", resizable: true }
+		},
+		resizable: {
+			enabled: true
+		},
+		class: `
+			[&:not(.resizable-cols-setup)]:w-full
+			[&:not(.resizable-cols-setup)]:block
+			[&:not(.resizable-cols-setup)_thead]:block
+			[&:not(.resizable-cols-setup)_thead_tr]:w-full
+			[&:not(.resizable-cols-setup)_thead_tr]:flex
+			[&:not(.resizable-cols-setup)_thead_tr]:flex-nowrap
+			[&:not(.resizable-cols-setup)_thead_th:not(.override-initial)]:flex-1
+		`,
+		_slots: `
+			<template #header-prop3="colProps">
+				<th
+					:class="\`\${colProps.class} [table:not(.resizable-cols-setup)_&]:w-[min-content] whitespace-nowrap override-initial\`"
+					:style="colProps.style"
+				>
+					{{ colProps.config.name }}
+				</th>
+			</template>
+		`
+	}
+}
+
+export const FitWidthFalse: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		resizable: {
+			fitWidth: false
+		}
+	}
+}
+
+
+export const StickyHeader: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		resizable: {
+			enabled: true
+		},
+		stickyHeader: true,
+		// 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
+		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`,
+			prop3: `Item${i + 1} Prop 3`
+		}))
+	}
+}
+
+
+export const VirtualizedFixedHeight: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		resizable: {
+			enabled: true
+		},
+		virtualizerOptions: {
+			enabled: true
+		},
+		stickyHeader: true,
+		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`,
+			prop3: `Item${i + 1} Prop 3`
+		}))
+	}
+}
+
+
+// this is not the smoothest ever, but then the tan stack example isn't either
+// i think the issue is when the scrollbar gets to it's min height
+export const VirtualizedDynamicHeightExperimental: Story = {
+	...VirtualizedFixedHeight,
+	args: {
+		...VirtualizedFixedHeight.args,
+		virtualizerOptions: {
+			enabled: true,
+			method: "dynamic",
+			overscan: 5 // overscan is more expensive in dynamic mode
+		},
+		class: `
+			[&_td]:no-truncate!
+			[&_th]:no-truncate!
+		`,
+		values: Array.from({ length: 10000 }).fill(0).map((_, i) => ({
+			prop1: `Item${i + 1} Prop 1: ${faker.helpers.arrayElement(fakerSentences)}`,
+			prop2: `Item${i + 1} Prop 2: ${faker.helpers.arrayElement(fakerSentences)}`,
+			prop3: `Item${i + 1} Prop 3: ${faker.helpers.arrayElement(fakerSentences)}`
+		}))
+	},
+	parameters: {
+		tags: ["skip-smoke-test"]
+	}
+}
+
+
+export const VirtualizedFitWidthFalse: Story = {
+	...VirtualizedFixedHeight,
+	args: {
+		...VirtualizedFixedHeight.args,
+		resizable: {
+			fitWidth: false
+		},
+
+		class: `
+			[&_th]:no-truncate!
+			[&_th]:whitespace-nowrap!
+			[&:not(.resizable-cols-setup)]:w-max
+			[&:not(.resizable-cols-setup)_th]:w-max
+		`,
+		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`,
+			prop3: `Item${i + 1} Prop 3`
+		}))
+
+	}
+}
+
+export const ThreeColSomeColsNotResizable: Story = {
+	render: args => ({
+		components,
+		setup: () => {
+			const debugGrips = ref(false)
+			return { args, debugGrips }
+		},
+		template: `
+		<div class="flex flex-col gap-2 w-full border rounded-md mb-10">
+			<WButton @click="debugGrips = !debugGrips">Toggle Debug Grips (currently {{debugGrips}})</WButton>
+		</div>
+		<div :class="debugGrips ? ' [&_.grip]:bg-red-500': ''">
+			<div class="flex flex-col gap-2 w-full">
+				<WTable
+					v-bind="args"
+				>
+				</WTable>
+				<WTable
+				v-bind="{...args, colConfig:args.colConfig2}"
+				>
+				</WTable>
+				<WTable
+					v-bind="{...args, colConfig:args.colConfig3}"
+				>
+				</WTable>
+			</div>
+		</div>
+		`
+	}),
+	args: {
+		cols: ["prop1", "prop2", "prop3"],
+		itemKey: "prop1",
+		values: [
+			{ prop1: "Prop 1", prop2: "Prop 2", prop3: "Prop 3" }
+		],
+		colConfig: { prop1: { name: "No Resize", resizable: false } },
+		colConfig2: { prop2: { name: "No Resize", resizable: false } },
+		colConfig3: { prop3: { name: "No Resize", resizable: false } }
+	} as any
+}
+export const FourColSomeColsNotResizable: Story = {
+	render: ThreeColSomeColsNotResizable.render,
+	args: {
+		cols: ["prop1", "prop2", "prop3", "prop4"],
+		values: [
+			{ prop1: "Prop 1", prop2: "Prop 2", prop3: "Prop 3", prop4: "Prop 4" }
+		],
+		itemKey: "prop1",
+		colConfig: { prop1: { name: "No Resize", resizable: false }, prop3: { name: "No Resize", resizable: false } },
+		colConfig2: { prop2: { name: "No Resize", resizable: false }, prop3: { name: "No Resize", resizable: false } },
+		colConfig3: { prop1: { name: "No Resize", resizable: false }, prop4: { name: "No Resize", resizable: false } }
+	} as any
+}