@witchcraft/ui 0.2.1-beta.3 → 0.2.1

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

@@ -4,13 +4,11 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import LibTable from "./LibTable.vue"
 
 // todo
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof LibTable> = {
 	component: LibTable,
-	title: "Components/Table",
+	title: "Components/Table"
 }
 
 export default meta
@@ -26,81 +24,81 @@ export const Primary: Story = {
 					>
 					</lib-table>
 				</div>
-		`,
+		`
 	}),
 	args: {
 		cols: ["prop1", "prop2", "prop3"],
 		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" },
+			{ prop1: "Item3 Prop 1", prop2: "Item3 Prop 2", prop3: "Item3 Prop 3" }
 		],
 		colConfig: { prop1: { name: "Header 1" }, prop2: { name: "Header 2" } },
-		itemKey: "prop1",
-	},
+		itemKey: "prop1"
+	}
 }
 
 export const NoCellBorders: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		cellBorder: false,
-	},
+		cellBorder: false
+	}
 }
 export const NoBorders: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		border: false,
-	},
+		border: false
+	}
 }
 export const NoCellBordersNoBorders: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
 		cellBorder: false,
-		border: false,
-	},
+		border: false
+	}
 }
 
 export const SquareBorders: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		rounded: false,
-	},
+		rounded: false
+	}
 }
 export const NoHeader: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		header: false,
-	},
+		header: false
+	}
 }
 export const NoHeaderNoBorders: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
 		header: false,
-		border: false,
-	},
+		border: false
+	}
 }
 export const NoHeaderNoCellBorders: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
 		header: false,
-		cellBorder: false,
-	},
+		cellBorder: false
+	}
 }
 export const FitWidthFalse: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
 		resizable: {
-			fitWidth: false,
-		},
-	},
+			fitWidth: false
+		}
+	}
 }
 
 export const ThreeColSomeColsNotResizable: Story = {
@@ -122,18 +120,18 @@ export const ThreeColSomeColsNotResizable: Story = {
 				v-bind="{...args, colConfig:args.colConfig3}"
 			>
 			</lib-table>
-		`,
+		`
 	}),
 	args: {
 		cols: ["prop1", "prop2", "prop3"],
 		itemKey: "prop1",
 		values: [
-			{ prop1: "Prop 1", prop2: "Prop 2", prop3: "Prop 3" },
+			{ 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,
+		colConfig3: { prop3: { name: "No Resize", resizable: false } }
+	} as any
 }
 export const FourColSomeColsNotResizable: Story = {
 	render: args => ({
@@ -154,17 +152,16 @@ export const FourColSomeColsNotResizable: Story = {
 					v-bind="{...args, colConfig:args.colConfig3}"
 				>
 				</lib-table>
-		`,
+		`
 	}),
 	args: {
 		cols: ["prop1", "prop2", "prop3", "prop4"],
 		values: [
-			{ prop1: "Prop 1", prop2: "Prop 2", prop3: "Prop 3", prop4: "Prop 4" },
+			{ 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,
+		colConfig3: { prop1: { name: "No Resize", resizable: false }, prop4: { name: "No Resize", resizable: false } }
+	} as any
 }
-

package/src/runtime/components/LibTable/LibTable.vue

@@ -1,6 +1,7 @@
 <template>
 <!-- Assumes no scrollbars on children -->
-<table :class="twMerge(`table
+<table
+	:class="twMerge(`table
 		table-fixed
 		border-separate
 		border-spacing-0
@@ -16,12 +17,12 @@
 		[&.resizable-cols-error]:cursor-not-allowed
 		[&.resizable-cols-error]:user-select-none
 		`,
-	cellBorder && `
+		cellBorder && `
 			[&_td]:border-neutral-500
 			[&_td:not(.last-row)]:border-b
 			[&_td:not(.first-col)]:border-l
 		`,
-	border && `
+		border && `
 			[&_thead_td]:bg-neutral-200
 			[&_td]:border-neutral-500
 			dark:[&_thead_td]:bg-neutral-800
@@ -31,19 +32,26 @@
 			[&_td.last-col]:border-r
 			[&_td.first-col]:border-l
 		`,
-	rounded &&`
+		rounded &&`
 			[&_td.br]:rounded-br-sm
 			[&_td.bl]:rounded-bl-sm
 			[&_td.tr]:rounded-tr-sm
 			[&_td.tl]:rounded-tl-sm
-		`
-	, ($attrs as any).class)"
+		`,
+		($attrs as any).class)"
 	v-resizable-cols="resizableOptions"
 >
-	<thead v-if="header" class="table--header">
+	<thead
+		v-if="header"
+		class="table--header"
+	>
 		<tr class="table--row">
-			<template v-for="col,i of cols" :key="col">
-				<slot :name="`header-${col.toString()}`"
+			<template
+				v-for="col, i of cols"
+				:key="col"
+			>
+				<slot
+					:name="`header-${col.toString()}`"
 					:class="[
 						extraClasses[`-1-${i}`],
 						'cell table--header-cell',
@@ -54,8 +62,9 @@
 					:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
 					:col-key="col"
 				>
-					<td :class="[
-							extraClasses[`-1-${i}`] ,
+					<td
+						:class="[
+							extraClasses[`-1-${i}`],
 							'cell table--header-cell',
 							(colConfig as any)[col]?.resizable === false
 								? 'no-resize'
@@ -70,9 +79,15 @@
 		</tr>
 	</thead>
 	<tbody class="table--body">
-		<template v-for="item, i of values" :key="typeof itemKey === 'function' ? itemKey(item) : item[itemKey]">
+		<template
+			v-for="item, i of values"
+			:key="typeof itemKey === 'function' ? itemKey(item) : item[itemKey]"
+		>
 			<tr class="table--row">
-				<template v-for="col, j of cols" :key="(typeof itemKey === 'function' ? itemKey(item) : item[itemKey]) + col.toString()">
+				<template
+					v-for="col, j of cols"
+					:key="(typeof itemKey === 'function' ? itemKey(item) : item[itemKey]) + col.toString()"
+				>
 					<slot
 						:name="col"
 						:item="item"
@@ -94,16 +109,15 @@
 <script setup lang="ts" generic="T">
 import type { MakeRequired } from "@alanscodelog/utils"
 import { keys } from "@alanscodelog/utils/keys"
-import { computed, type PropType, ref, type TableHTMLAttributes } from "vue"
+import { computed, ref, type TableHTMLAttributes } from "vue"
 
 import { vResizableCols } from "../../directives/vResizableCols.js"
 import type { ResizableOptions, TableColConfig } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
 import type { TailwindClassProp } from "../shared/props.js"
 
-
 defineOptions({
-	name: "lib-table",
+	name: "LibTable"
 })
 
 const props = withDefaults(defineProps<Props>(), {
@@ -115,7 +129,7 @@ const props = withDefaults(defineProps<Props>(), {
 	border: true,
 	cellBorder: true,
 	header: true,
-	colConfig: () => ({}) ,
+	colConfig: () => ({})
 })
 
 const widths = ref([])
@@ -123,7 +137,7 @@ const resizableOptions = computed<MakeRequired<Partial<ResizableOptions>, "colCo
 	colCount: props.cols.length,
 	widths,
 	selector: ".cell",
-	...props.resizable,
+	...props.resizable
 }))
 
 /* props.values.length instead of `props.values.length - 1` because we're creating an artificial first row for the header */
@@ -136,7 +150,7 @@ const getExtraClasses = (row: number, col: number, isHeader: boolean): string[]
 		"first-row": (isHeader || !props.header) && row === 0,
 		"last-row": row === props.values.length - 1,
 		"first-col": col === 0,
-		"last-col": col === props.cols.length - 1,
+		"last-col": col === props.cols.length - 1
 	}
 	return keys(res).filter(key => res[key])
 }
@@ -146,16 +160,16 @@ const extraClasses = computed(() => Object.fromEntries([...Array(props.values.le
 		.map(col =>
 			[
 				`${row - 1}-${col}`,
-				getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" "),
+				getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" ")
 			]))
-	.flat(),
+	.flat()
 ))
-
 </script>
+
 <script lang="ts">
 // generic isn't working here :/
 type T = any
-	
+
 type RealProps = {
 	resizable?: Partial<ResizableOptions>
 	values?: T[]
@@ -171,6 +185,6 @@ type RealProps = {
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<TableHTMLAttributes,"class" | "readonly" | "disabled"> & TailwindClassProp>,
+	Partial<Omit<TableHTMLAttributes, "class" | "readonly" | "disabled"> & TailwindClassProp>,
 	RealProps { }
 </script>

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

@@ -1,20 +1,18 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Meta, StoryObj } from "@storybook/vue3"
 
-
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 const meta: Meta<{}> = {
 	title: "Other/Reset",
 	args: {
 
-	},
+	}
 }
 
 export default meta
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Story = StoryObj<{}>
 
-
 export const Primary: Story = {
 	render: args => ({
 		setup: () => ({ args }),
@@ -26,7 +24,6 @@ export const Primary: Story = {
 			<h5>h5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h5>
 			<h6>h6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h6>
 			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</p>
-		`,
-	}),
+		`
+	})
 }
-

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

@@ -1,20 +1,18 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Meta, StoryObj } from "@storybook/vue3"
 
-
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 const meta: Meta<{}> = {
 	title: "Other/Scrolling",
 	args: {
 
-	},
+	}
 }
 
 export default meta
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type Story = StoryObj<{}>
 
-
 export const Scrollbars: Story = {
 	render: args => ({
 		setup: () => ({ args }),
@@ -37,8 +35,8 @@ export const Scrollbars: Story = {
 				<div class="h-[1000px] w-[1000px]"/>
 			</div>
 		</div>
-		`,
-	}),
+		`
+	})
 }
 
 export const TextareaResizer: Story = {
@@ -52,7 +50,6 @@ export const TextareaResizer: Story = {
 				min-h-[200px]
 				[resize:both]
 			" />
-		`,
-	}),
+		`
+	})
 }
-

package/src/runtime/components/Template/NAME.vue

@@ -8,32 +8,32 @@
 	<slot/>
 </div>
 </template>
+
 <script setup  lang="ts">
- 
+// remove when copying
+// @ts-nocheck this is a templatek
+/* eslint-disable */
+
 import { type HTMLAttributes, ref } from "vue"
 
 import { twMerge } from "../../utils/twMerge.js"
-import { type TailwindClassProp } from "../shared/props.js"
-
+import type { TailwindClassProp } from "../shared/props.js"
 
 defineOptions({
-	name: "lib-name", /* todo */
-	inheritAttrs: false,
+	name: "LibName", /* todo */
+	inheritAttrs: false
 })
 
-
 // const props = defineProps<{}>({ })
 
 const el = ref<null | HTMLElement>(null)
 
 const modelValue = defineModel<string>({ required: true })
-
-
 </script>
 
 <script lang="ts">
 export default {
-	name: "lib-name",
+	name: "LibName"
 }
 
 type RealProps = {
@@ -43,7 +43,7 @@ interface Props
 	extends
 	/** @vue-ignore */
 	Partial<Omit<HTMLAttributes, "class">
-		& TailwindClassProp
-		& RealProps
+	& TailwindClassProp
+	& RealProps
 	> { }
 </script>

package/src/runtime/components/Template/TemplateStory.ts

@@ -1,38 +1,37 @@
-// @ts-nocheck remove when copying
+// remove when copying
+// @ts-nocheck this is a templatek
+/* eslint-disable */
+
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Meta, StoryObj } from "@storybook/vue3"
 
 import NAME from "./NAME.vue"
 
 // todo, maybe don't do this for perf reasons
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof NAME> = {
 	component: NAME,
 	args: {
 
-	},
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof NAME>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components,
 		setup: () => ({ args }),
 		template: `
 			<NAME v-bind="{...args}">{{args.value}}</NAME>
-		`,
-	}),
+		`
+	})
 }
 export const Secondary: Story = {
 	...Primary,
 	args: {
-		...Primary.args,
-	},
+		...Primary.args
+	}
 }
-

package/src/runtime/components/TestControls/TestControls.vue

@@ -2,7 +2,9 @@
 <!-- Width 100% + 2xmargin in combination with the margins in LibRoot is a bit of a hack so that it looks like there's padding around the content in test mode (for storybook). We can't just absolutely position these controls or they make the container scroll. -->
 <div class="test-controls flex gap-2 p-1 pb-10 -ml-10 w-[calc(100%_+_var(--spacing)*20)]">
 	<div class="flex-grow"/>
-	<div class="outline-indicator">{{ showOutline ? "Outline Enabled" : "Outline Disabled" }}</div>
+	<div class="outline-indicator">
+		{{ showOutline ? "Outline Enabled" : "Outline Disabled" }}
+	</div>
 	<lib-dark-mode-switcher/>
 </div>
 </template>
@@ -10,10 +12,8 @@
 <script setup lang="ts">
 import LibDarkModeSwitcher from "../LibDarkModeSwitcher/LibDarkModeSwitcher.vue"
 
-defineOptions({ name: "test-controls" })
-defineProps< {
+defineOptions({ name: "TestControls" })
+defineProps<{
 	showOutline: boolean
 }>()
-
 </script>
-

package/src/runtime/components/shared/props.ts

@@ -2,7 +2,6 @@ import { useId } from "vue"
 
 import type { PopupPositioner, PopupPositionModifier } from "../../types"
 
- 
 export interface LinkableByIdProps {
 	/**
 	 * The id for the input. Uses vue's useId if none provided.
@@ -19,7 +18,7 @@ export interface ButtonProps {
 	color?: "warning" | "ok" | "danger" | "primary" | "secondary" | false
 	autoTitleFromAria?: boolean
 }
- 
+
 export interface LabelProps {
 /** For the label. Note the component might or might not support an actual label element. If none is supported, this is used for the `aria-label`. */
 	label?: string
@@ -80,7 +79,7 @@ export type SuggestionsProps<T = any> = {
 	showSelectedValues?: boolean
 }
 export type SuggestionsOptions<T> = SuggestionsProps<T>
- 
+
 export interface SuggestionsEmits<TMultivalue extends boolean = false> {
 	(e: "submit", val: string, suggestion?: any, wasRemoved?: boolean): void
 	(e: "update:isOpen", val: boolean): void
@@ -155,7 +154,6 @@ export interface PopupProps {
 	canClose?: boolean
 }
 
-
 export type BaseInteractiveProps = {
 	/** Default is false. */
 	disabled?: boolean
@@ -185,8 +183,8 @@ export type WrapperProps<TPrefix extends string, T, TOverrides extends Record<st
 	[P in keyof T as P extends keyof TOverrides
 		? never
 		: P extends string
-		? `${TPrefix}${Capitalize<P>}`
-		: never
+			? `${TPrefix}${Capitalize<P>}`
+			: never
 	]: T[P];
 } & {
 	[P in keyof TOverrides as P extends string

package/src/runtime/components/shared/storyHelpers/playInput.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { expect, userEvent, within } from "@storybook/test"
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -27,10 +26,10 @@ export const playMultipleValues = async ({ canvasElement, args }: { canvasElemen
 	await expect(canvas.getByTestId("model-value")).toHaveTextContent("D")
 	await userEvent.keyboard("{Enter}")
 	await expect(canvas.getByTestId("values").textContent)
-		.toBe([ ...initialValues, "D" ].join(", "))
+		.toBe([...initialValues, "D"].join(", "))
 	// empty input does nothing
 	await userEvent.clear(input)
 	await userEvent.keyboard("{Enter}")
 	await expect(canvas.getByTestId("values").textContent)
-		.toBe([ ...initialValues, "D" ].join(", "))
+		.toBe([...initialValues, "D"].join(", "))
 }

package/src/runtime/components/shared/storyHelpers/playSuggestions.ts

@@ -1,7 +1,5 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { expect, userEvent, within } from "@storybook/test"
 
-
 export const playBasicSelect = async ({ canvasElement, args }: { canvasElement: HTMLElement, args: any }) => {
 	const canvas = within(canvasElement)
 	const input = canvas.getByLabelText(args.label ?? "", { selector: "input" })
@@ -23,7 +21,7 @@ export const playBasicSelect = async ({ canvasElement, args }: { canvasElement:
 		await expect(canvas.queryByRole("listbox")).toBeNull()
 	}
 	await userEvent.keyboard("{Backspace}")
-	await expect(canvas.queryByRole("option",{ selected: true })).toBeInTheDocument()
+	await expect(canvas.queryByRole("option", { selected: true })).toBeInTheDocument()
 	await userEvent.clear(input)
 	await userEvent.type(input, "unmatched")
 	if (!args.suggestionsFilter && !args.values) {
@@ -55,7 +53,7 @@ export const playBasicSelect = async ({ canvasElement, args }: { canvasElement:
 	}
 }
 
-export const playBasicKeyboardSelect = async ({ canvasElement, args }: { canvasElement: HTMLElement , args: any }) => {
+export const playBasicKeyboardSelect = async ({ canvasElement, args }: { canvasElement: HTMLElement, args: any }) => {
 	const canvas = within(canvasElement)
 	const input = canvas.getByLabelText(args.label ?? "", { selector: "input" })
 	await userEvent.clear(input)
@@ -70,9 +68,8 @@ export const playBasicKeyboardSelect = async ({ canvasElement, args }: { canvasE
 	await userEvent.keyboard("{ArrowUp}")
 	await expect(canvas.queryByRole("option", {
 		name: args.values ? "C" : "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
-		selected: true,
+		selected: true
 	})).toBeInTheDocument()
-	
 
 	// loops back to the first item
 	await userEvent.keyboard("{ArrowDown}")
@@ -82,12 +79,12 @@ export const playBasicKeyboardSelect = async ({ canvasElement, args }: { canvasE
 	await userEvent.keyboard("{PageDown}")
 	await expect(canvas.queryByRole("option", {
 		name: args.values ? "C" : "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
-		selected: true,
+		selected: true
 	})).toBeInTheDocument()
 	// goes to first
 	await userEvent.keyboard("{PageUp}")
 	await expect(canvas.queryByRole("option", { name: "A", selected: true })).toBeInTheDocument()
-	
+
 	const testOpen = async (key: string) => {
 		await userEvent.keyboard("{Escape}")
 		if (!args.values) {
@@ -116,4 +113,3 @@ export const playBasicClickSelect = async ({ canvasElement, args }: { canvasElem
 	// 	await expect(canvas.getByTestId("values")).toHaveTextContent(/AB$/)
 	// }
 }
-

package/src/runtime/composables/useAccesibilityOutline.ts

@@ -43,7 +43,7 @@ import { onBeforeUnmount, onMounted, type Ref, ref, watch } from "vue"
 // TODO tailwind example/plugin?
 export function useAccesibilityOutline(
 	target: Ref<HTMLElement | null>,
-	enable: Ref<boolean> = ref(true),
+	enable: Ref<boolean> = ref(true)
 ): Record<"outline" | "control", Ref<boolean>> {
 	const outline = ref(false)
 	const awaitingFocus = ref(false)

package/src/runtime/composables/useAriaLabel.ts

@@ -11,7 +11,7 @@ export const useAriaLabel = (
 
 	const aria = computed(() => ({
 		"aria-label": labelExists.value ? undefined : props.label,
-		"aria-labelledby": labelExists.value ? `label-${id.value}` : undefined,
+		"aria-labelledby": labelExists.value ? `label-${id.value}` : undefined
 	}))
 
 	onMounted(() => {