@witchcraft/ui 0.4.0 → 0.4.1

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

@@ -1,134 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { StoryObj } from "@storybook/vue3"
-import { computed, onMounted, ref } from "vue"
-import type { ComponentExposed } from "vue-component-type-helpers"
-
-import LibSuggestions from "./LibSuggestions.vue"
-
-import * as components from "../index.js"
-
-const meta = {
-	component: LibSuggestions,
-	title: "Components/Suggestions",
-	args: {
-		id: "some-id",
-		modelValue: "",
-		label: "Some Label",
-		border: true,
-		suggestions: ["A", "AB", "ABC", "B", "BC", "C", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
-	}
-} // satisfies Meta<typeof LibSuggestions> & Meta<{ custom: string }>
-
-export default meta
-type Story = StoryObj<typeof LibSuggestions> // & StoryObj<typeof extraArgs>
-
-/**
- * The suggestions component is just the dropdown part.
- *
- * Here it is decoupled from the input.
- *
- * More examples can be found in the input component.
- */
-export const Primary: Story = {
-	render: args => ({
-		components: { ...components, LibSuggestions },
-
-		setup: () => {
-			const inputValue = ref(args.modelValue)
-			const modelValue = ref(args.modelValue)
-			const drawer = ref<ComponentExposed<typeof LibSuggestions> | null>(null)
-			const keydownHandler = (e: KeyboardEvent): void => {
-				drawer.value?.inputKeydownHandler(e)
-			}
-			const suggestions = computed(() => drawer.value?.suggestions)
-			const blurHandler = (e: MouseEvent) => {
-				drawer.value?.inputBlurHandler(e)
-			}
-			onMounted(() => {
-				drawer.value?.suggestions.open()
-			})
-			return {
-				args,
-				inputValue,
-				modelValue,
-				isOpen: ref(false),
-				suggestions,
-				drawer,
-				keydownHandler,
-				blurHandler
-			}
-		},
-
-		template: `
-			<div class="flex flex-col gap-3">
-			Temporary Value: {{inputValue}}
-			<br/>
-			Model Value (Final Value): <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
-			
-<br/>
-			Selected: {{suggestions?.filtered[suggestions.active]}}
-			<label>Some Label</label>
-				<lib-simple-input
-					:class="isOpen ? 'open' : ''"
-					v-model="inputValue"
-					@focus="suggestions.open()"
-					@blur="blurHandler"
-					@keydown="keydownHandler"
-				></lib-simple-input>
-				<lib-suggestions
-					ref="drawer"
-					v-bind="{...args}"
-					@update:isOpen="isOpen = $event"
-					v-model="modelValue"
-					v-model:inputValue="inputValue"
-				>
-					<template #item={item}>
-						{{item}}
-					</template>
-				</lib-suggestions>
-			</div>
-		`
-	})
-}
-
-export const RestrictToSuggestions: Story = {
-	...Primary,
-	args: {
-		...Primary.args,
-		restrictToSuggestions: true
-	}
-
-}
-export const AlwaysShowAllSuggestions = {
-	...Primary,
-	args: {
-		...Primary.args,
-		restrictToSuggestions: true,
-		suggestionsFilter: (_input: string, items: string[]) => items
-	}
-
-}
-export const AlwaysShowAllSuggestionsAndNoRestrictToSuggestions = {
-	...Primary,
-	args: {
-		...Primary.args,
-		restrictToSuggestions: false,
-		suggestionsFilter: (_input: string, items: string[]) => items
-	}
-
-}
-export const CustomSuggestionsObject = {
-	...Primary,
-	args: {
-		...Primary.args,
-		restrictToSuggestions: true,
-		suggestions: [
-			{ label: "A", other: "some data A" },
-			{ label: "AB", other: "some data AB" },
-			{ label: "ABC", other: "some data ABC" },
-			{ label: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", other: "some data ABCDEFGHIJKLMNOPQRSTUVWXYZ" }
-		],
-		suggestionLabel: (item: any) => item.label
-	}
-
-}

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

@@ -1,212 +0,0 @@
-<template>
-<div
-	v-if="$open"
-	:id="`suggestions-${id ?? fallbackId}`"
-	:class="twMerge(`
-			suggestions
-			bg-bg
-			dark:bg-fg
-			dark:text-bg
-		`,
-		($.attrs as any)?.class
-	)"
-	:data-open="$open"
-	role="listbox"
-	ref="el"
-	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}`"
-		role="option"
-		:class="twMerge(`
-			suggestions--item
-			user-select-none
-			cursor-pointer
-			px-2
-		`,
-			index=== suggestions.active && `
-				bg-accent-200
-				dark:bg-accent-800/70
-			`,
-			($.itemAttrs as any)?.class
-		)"
-		v-bind="{ ...$.itemAttrs, class: undefined }"
-		:aria-selected="index === suggestions.active ? true : false"
-		:aria-label="suggestions.getLabel(item)"
-		v-for="(item, index) in suggestions.filtered"
-		:key="item"
-		@mouseover="suggestions.active = index"
-		@mousedown.prevent
-		@mouseup="suggestions.enterIndex(index, !Array.isArray($modelValue))"
-	>
-		<slot
-			name="item"
-			:item="item"
-			:index="index"
-			:is-selected="Array.isArray($modelValue) ? $modelValue.includes(item) : $modelValue === item"
-		>
-			<div class="flex gap-2 nowrap">
-				<lib-checkbox
-					v-if="Array.isArray($modelValue) && showSelectedValues"
-					:model-value="$modelValue.includes(item)"
-					@mousedown.prevent
-				/>
-				<div> {{ item }} </div>
-			</div>
-		</slot>
-	</div>
-</div>
-</template>
-
-<script setup lang="ts" generic="TSuggestion extends string | object, TValue extends string|string[]">
-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"
-
-defineOptions({
-	name: "LibSuggestions",
-	inheritAttrs: false
-})
-
-const $ = useDivideAttrs(["item"] as const)
-
-const emits = defineEmits<SuggestionsEmits>()
-
-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
-})
-/**
- * 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.
- *
- * If suggestions are objects, this will be the string returned by the `suggestionLabel` prop.
- */
-const $modelValue = defineModel<TValue>("modelValue", { required: true })
-/**
- * If the element is bound to an input, this is the value that the input should be sharing.
- *
- * 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 $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.")
-}
-
-const el = ref<HTMLElement | null>(null)
-
-const suggestions = reactive(useSuggestions<TSuggestion, TValue extends string[] ? true : false>(
-	$inputValue,
-	$modelValue as any,
-	$open,
-	emits,
-	props
-))
-
-const inputKeydownHandler = (e: KeyboardEvent): void => {
-	if (props.filterKeydown?.(e)) return
-	if (hasModifiers(e)) return
-	if (e.key === "Enter") {
-		suggestions.enterSelected(!Array.isArray($modelValue))
-		e.preventDefault()
-	} else if (e.key === "Escape") {
-		suggestions.cancel()
-		e.preventDefault()
-	} else if (!$open.value && ["ArrowDown", "ArrowUp", "PageUp", "PageDown"].includes(e.key) && suggestions.available) {
-		suggestions.open()
-		e.preventDefault()
-		if (e.key === "PageUp") {
-			suggestions.first()
-		} else if (e.key === "PageDown") {
-			suggestions.last()
-		}
-	} else if (e.key === "ArrowUp") {
-		suggestions.prev()
-		e.preventDefault()
-	} else if (e.key === "ArrowDown") {
-		suggestions.next()
-		e.preventDefault()
-	} else if (e.key === "PageUp") {
-		suggestions.first()
-		e.preventDefault()
-	} else if (e.key === "PageDown") {
-		suggestions.last()
-		e.preventDefault()
-	}
-}
-const inputBlurHandler = (e: MouseEvent): void => {
-	if (props.filterBlur?.(e)) return
-
-	if (!$open.value) return
-
-	if (props.restrictToSuggestions) {
-		suggestions.cancel()
-	} else {
-		if (!Array.isArray($modelValue.value)) {
-			$modelValue.value = $inputValue.value as any
-		}
-	}
-	if ($open.value) {
-		suggestions.close()
-	}
-}
-const inputFocusHandler = (e: FocusEvent): void => {
-	if (props.filterFocus?.(e)) return
-	suggestions.open()
-}
-
-defineExpose({
-	suggestions,
-	el,
-	/** A simple keydown handler that can be passed to an input to control the component while still focused inside it. */
-	inputKeydownHandler,
-	/** 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
-})
-</script>
-
-<script lang="ts">
-type WrapperTypes = Partial<WrapperProps<"item", HTMLAttributes, {
-	/** Tailwind classes. */
-	class?: string
-}>>
-
-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
-		}
-
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes, "class" | "onSubmit"> & {
-		/** Tailwind classes. */
-		class?: string
-	}>,
-	/** @vue-ignore */
-	WrapperTypes,
-	RealProps
-{}
-</script>

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

@@ -1,167 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { Meta, StoryObj } from "@storybook/vue3"
-
-import LibTable from "./LibTable.vue"
-
-// todo
-import * as components from "../index.js"
-
-const meta: Meta<typeof LibTable> = {
-	component: LibTable,
-	title: "Components/Table"
-}
-
-export default meta
-type Story = StoryObj<typeof LibTable>
-export const Primary: Story = {
-	render: args => ({
-		components,
-		setup: () => ({ args }),
-		template: `
-				<div class="overflow-x-scroll scrollbar-hidden">
-					<lib-table
-						v-bind="args"
-					>
-					</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" }
-		],
-		colConfig: { prop1: { name: "Header 1" }, prop2: { name: "Header 2" } },
-		itemKey: "prop1"
-	}
-}
-
-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 FitWidthFalse: Story = {
-	...Primary,
-	args: {
-		...Primary.args,
-		resizable: {
-			fitWidth: false
-		}
-	}
-}
-
-export const ThreeColSomeColsNotResizable: Story = {
-	render: args => ({
-		components,
-		setup: () => ({ args }),
-		template: `
-			<lib-table
-				v-bind="args"
-			>
-			</lib-table>
-			<br>
-			<lib-table
-			v-bind="{...args, colConfig:args.colConfig2}"
-			>
-			</lib-table>
-			<br>
-			<lib-table
-				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" }
-		],
-		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: args => ({
-		components,
-		setup: () => ({ args }),
-		template: `
-				<lib-table
-					v-bind="args"
-				>
-				</lib-table>
-				<br>
-				<lib-table
-				v-bind="{...args, colConfig:args.colConfig2}"
-				>
-			</lib-table>
-			<br>
-				<lib-table
-					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" }
-		],
-		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
-}

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

@@ -1,190 +0,0 @@
-<template>
-<!-- Assumes no scrollbars on children -->
-<table
-	:class="twMerge(`table
-		table-fixed
-		border-separate
-		border-spacing-0
-		overflow-x-scroll
-		scrollbar-hidden
-		[&_.grip]:w-[5px]
-		relative
-		w-full
-		box-content
-		[&_thead]:font-bold
-		[&_td]:p-1
-		[&_td]:overflow-x-hidden
-		[&.resizable-cols-error]:cursor-not-allowed
-		[&.resizable-cols-error]:user-select-none
-		`,
-		cellBorder && `
-			[&_td]:border-neutral-500
-			[&_td:not(.last-row)]:border-b
-			[&_td:not(.first-col)]:border-l
-		`,
-		border && `
-			[&_thead_td]:bg-neutral-200
-			[&_td]:border-neutral-500
-			dark:[&_thead_td]:bg-neutral-800
-			dark:[&_td]:border-neutral-500
-			[&_td.first-row]:border-t
-			[&_td.last-row]:border-b
-			[&_td.last-col]:border-r
-			[&_td.first-col]:border-l
-		`,
-		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)"
-	v-resizable-cols="resizableOptions"
->
-	<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()}`"
-					:class="[
-						extraClasses[`-1-${i}`],
-						'cell table--header-cell',
-						(colConfig as any)[col]?.resizable === false
-							? 'no-resize'
-							: ''
-					].join(' ')"
-					:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
-					:col-key="col"
-				>
-					<td
-						:class="[
-							extraClasses[`-1-${i}`],
-							'cell table--header-cell',
-							(colConfig as any)[col]?.resizable === false
-								? 'no-resize'
-								: ''
-						].join(' ')"
-						:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
-					>
-						{{ (colConfig as any)[col]?.name ?? col }}
-					</td>
-				</slot>
-			</template>
-		</tr>
-	</thead>
-	<tbody class="table--body">
-		<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()"
-				>
-					<slot
-						:name="col"
-						:item="item"
-						:value="item[col]"
-						:class="extraClasses[`${i}-${j}`] + 'table--cell cell'"
-					>
-						<td :class="extraClasses[`${i}-${j}`] + 'table--cell cell'">
-							{{ item[col] }}
-						</td>
-					</slot>
-				</template>
-			</tr>
-		</template>
-	</tbody>
-</table>
-</template>
-
-<!-- generic="T extends Record<string, any> -->"
-<script setup lang="ts" generic="T">
-import type { MakeRequired } from "@alanscodelog/utils"
-import { keys } from "@alanscodelog/utils/keys"
-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: "LibTable"
-})
-
-const props = withDefaults(defineProps<Props>(), {
-	resizable: () => ({}),
-	values: () => [] as T[],
-	itemKey: "",
-	cols: () => [] as (keyof T)[],
-	rounded: true,
-	border: true,
-	cellBorder: true,
-	header: true,
-	colConfig: () => ({})
-})
-
-const widths = ref([])
-const resizableOptions = computed<MakeRequired<Partial<ResizableOptions>, "colCount" | "widths">>(() => ({
-	colCount: props.cols.length,
-	widths,
-	selector: ".cell",
-	...props.resizable
-}))
-
-/* props.values.length instead of `props.values.length - 1` because we're creating an artificial first row for the header */
-const getExtraClasses = (row: number, col: number, isHeader: boolean): string[] => {
-	const res = {
-		bl: !isHeader && row === props.values.length - 1 && col === 0,
-		br: !isHeader && row === props.values.length - 1 && col === props.cols.length - 1,
-		tr: (isHeader || !props.header) && row === 0 && col === props.cols.length - 1,
-		tl: (isHeader || !props.header) && row === 0 && col === 0,
-		"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
-	}
-	return keys(res).filter(key => res[key])
-}
-
-const extraClasses = computed(() => Object.fromEntries([...Array(props.values.length + 1).keys()]
-	.map(row => [...Array(props.cols.length).keys()]
-		.map(col =>
-			[
-				`${row - 1}-${col}`,
-				getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" ")
-			]))
-	.flat()
-))
-</script>
-
-<script lang="ts">
-// generic isn't working here :/
-type T = any
-
-type RealProps = {
-	resizable?: Partial<ResizableOptions>
-	values?: T[]
-	itemKey?: keyof T | ((item: T) => string)
-	/** Let's the table know the shape of the data since values might be empty. */
-	cols?: (keyof T)[]
-	rounded?: boolean
-	border?: boolean
-	cellBorder?: boolean
-	header?: boolean
-	colConfig?: TableColConfig<T>
-}
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<TableHTMLAttributes, "class" | "readonly" | "disabled"> & TailwindClassProp>,
-	RealProps { }
-</script>