@witchcraft/ui 0.2.1-beta.3 → 0.2.2

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

@@ -5,7 +5,6 @@ import type { ComponentExposed } from "vue-component-type-helpers"
 
 import LibSuggestions from "./LibSuggestions.vue"
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
 const meta = {
@@ -16,8 +15,8 @@ const meta = {
 		modelValue: "",
 		label: "Some Label",
 		border: true,
-		suggestions: ["A", "AB", "ABC", "B", "BC", "C", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
-	},
+		suggestions: ["A", "AB", "ABC", "B", "BC", "C", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
+	}
 } // satisfies Meta<typeof LibSuggestions> & Meta<{ custom: string }>
 
 export default meta
@@ -33,7 +32,7 @@ type Story = StoryObj<typeof LibSuggestions> // & StoryObj<typeof extraArgs>
 export const Primary: Story = {
 	render: args => ({
 		components: { ...components, LibSuggestions },
-		
+
 		setup: () => {
 			const inputValue = ref(args.modelValue)
 			const modelValue = ref(args.modelValue)
@@ -56,7 +55,7 @@ export const Primary: Story = {
 				suggestions,
 				drawer,
 				keydownHandler,
-				blurHandler,
+				blurHandler
 			}
 		},
 
@@ -88,26 +87,25 @@ export const Primary: Story = {
 					</template>
 				</lib-suggestions>
 			</div>
-		`,
-	}),
+		`
+	})
 }
 
 export const RestrictToSuggestions: Story = {
 	...Primary,
 	args: {
 		...Primary.args,
-		restrictToSuggestions: true,
-	},
-	
-	
+		restrictToSuggestions: true
+	}
+
 }
 export const AlwaysShowAllSuggestions = {
 	...Primary,
 	args: {
 		...Primary.args,
 		restrictToSuggestions: true,
-		suggestionsFilter: (_input: string, items: string[]) => items,
-	},
+		suggestionsFilter: (_input: string, items: string[]) => items
+	}
 
 }
 export const AlwaysShowAllSuggestionsAndNoRestrictToSuggestions = {
@@ -115,8 +113,8 @@ export const AlwaysShowAllSuggestionsAndNoRestrictToSuggestions = {
 	args: {
 		...Primary.args,
 		restrictToSuggestions: false,
-		suggestionsFilter: (_input: string, items: string[]) => items,
-	},
+		suggestionsFilter: (_input: string, items: string[]) => items
+	}
 
 }
 export const CustomSuggestionsObject = {
@@ -128,10 +126,9 @@ export const CustomSuggestionsObject = {
 			{ label: "A", other: "some data A" },
 			{ label: "AB", other: "some data AB" },
 			{ label: "ABC", other: "some data ABC" },
-			{ label: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", other: "some data ABCDEFGHIJKLMNOPQRSTUVWXYZ" },
+			{ label: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", other: "some data ABCDEFGHIJKLMNOPQRSTUVWXYZ" }
 		],
-		suggestionLabel: (item: any) => item.label,
-	},
+		suggestionLabel: (item: any) => item.label
+	}
 
 }
-

package/src/runtime/components/LibSuggestions/LibSuggestions.vue

@@ -13,10 +13,11 @@
 	:data-open="$open"
 	role="listbox"
 	ref="el"
-	v-bind="{...$.attrs, class:undefined}"
+	v-bind="{ ...$.attrs, class: undefined }"
 >
 	<!-- Click event is just in case, it should not really be triggered. We can do click selections via the blur handler. -->
-	<div :id="`suggestion-${id ?? fallbackId}-${index}`"
+	<div
+		:id="`suggestion-${id ?? fallbackId}-${index}`"
 		role="option"
 		:class="twMerge(`
 			suggestions--item
@@ -30,7 +31,7 @@
 			`,
 			($.itemAttrs as any)?.class
 		)"
-		v-bind="{...$.itemAttrs, class:undefined}"
+		v-bind="{ ...$.itemAttrs, class: undefined }"
 		:aria-selected="index === suggestions.active ? true : false"
 		:aria-label="suggestions.getLabel(item)"
 		v-for="(item, index) in suggestions.filtered"
@@ -39,7 +40,8 @@
 		@mousedown.prevent
 		@mouseup="suggestions.enterIndex(index, !Array.isArray($modelValue))"
 	>
-		<slot name="item"
+		<slot
+			name="item"
 			:item="item"
 			:index="index"
 			:is-selected="Array.isArray($modelValue) ? $modelValue.includes(item) : $modelValue === item"
@@ -57,21 +59,19 @@
 </div>
 </template>
 
-
 <script setup lang="ts" generic="TSuggestion extends string | object, TValue extends string|string[]">
-
-import { type HTMLAttributes,reactive, ref } from "vue"
+import { type HTMLAttributes, reactive, ref } from "vue"
 
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
 import { useSuggestions } from "../../composables/useSuggestions.js"
 import { hasModifiers } from "../../helpers/hasModifiers.js"
 import { twMerge } from "../../utils/twMerge.js"
 import LibCheckbox from "../LibCheckbox/LibCheckbox.vue"
-import { type BaseInteractiveProps, getFallbackId,type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js"
+import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js"
 
 defineOptions({
-	name: "lib-suggestions",
-	inheritAttrs: false,
+	name: "LibSuggestions",
+	inheritAttrs: false
 })
 
 const $ = useDivideAttrs(["item"] as const)
@@ -82,8 +82,9 @@ const fallbackId = getFallbackId()
 const props = withDefaults(defineProps<Props & SuggestionsProps<TSuggestion>>(), {
 	isValid: true,
 	canOpen: true,
+	canClose: true,
 	filterKeydown: undefined,
-	unstyle: false, disabled: false, readonly: false, border: true,
+	unstyle: false, disabled: false, readonly: false, border: true
 })
 /**
  * The final valid value. This is *not* the value you want to share with the input. If `restrictToSuggestions` is true this will not update on any invalid values that `inputValue` might be set to.
@@ -96,11 +97,10 @@ const $modelValue = defineModel<TValue>("modelValue", { required: true })
  *
  * It allows the component to read even invalid output, and also to reset that invalid output when either modelValue is set to a new value, or when the component is closed via cancel.
  */
-const $inputValue = defineModel<string >("inputValue", { default: "" })
+const $inputValue = defineModel<string>("inputValue", { default: "" })
 
 const $open = defineModel<boolean>("open", { default: false })
 
-
 if (typeof props.suggestions?.[0] === "object" && !props.suggestionLabel && !props.suggestionsFilter) {
 	throw new Error("`suggestionLabel` or `suggestionsFilter` must be passed if suggestions are objects.")
 }
@@ -148,7 +148,7 @@ const inputKeydownHandler = (e: KeyboardEvent): void => {
 }
 const inputBlurHandler = (e: MouseEvent): void => {
 	if (props.filterBlur?.(e)) return
-	
+
 	if (!$open.value) return
 
 	if (props.restrictToSuggestions) {
@@ -175,34 +175,33 @@ defineExpose({
 	/** A blur handler for the input that controls the component. This also takes care of making clicking on a suggestion work, since otherwise if canOpen is set to false in the blur handler, no click event will fire. */
 	inputBlurHandler,
 	/** A focus handler for the input that controls the component. */
-	inputFocusHandler,
+	inputFocusHandler
 })
-
 </script>
 
 <script lang="ts">
-type WrapperTypes = Partial<WrapperProps<"item",HTMLAttributes, {
+type WrapperTypes = Partial<WrapperProps<"item", HTMLAttributes, {
 	/** Tailwind classes. */
 	class?: string
 }>>
 
-type RealProps =
-	& LinkableByIdProps
-	& LabelProps
-	& BaseInteractiveProps
-	& {
+type RealProps
+	= & LinkableByIdProps
+		& LabelProps
+		& BaseInteractiveProps
+		& {
 		/** Return true to prevent the keydown event from being handled. */
-		filterKeydown?: (e: KeyboardEvent) => boolean
-		/** Return true to prevent the blur event from being handled. */
-		filterBlur?: (e: MouseEvent) => boolean
-		/** Return true to prevent the focus event from being handled. */
-		filterFocus?: (e: FocusEvent) => boolean
-	}
+			filterKeydown?: (e: KeyboardEvent) => boolean
+			/** Return true to prevent the blur event from being handled. */
+			filterBlur?: (e: MouseEvent) => boolean
+			/** Return true to prevent the focus event from being handled. */
+			filterFocus?: (e: FocusEvent) => boolean
+		}
 
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class" | "onSubmit"> & {
+	Partial<Omit<HTMLAttributes, "class" | "onSubmit"> & {
 		/** Tailwind classes. */
 		class?: string
 	}>,
@@ -210,5 +209,4 @@ interface Props
 	WrapperTypes,
 	RealProps
 {}
-
 </script>

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>