@witchcraft/ui 0.2.1-beta.2 → 0.2.1

package/src/runtime/components/LibInputDeprecated/LibInputDeprecated.vue

@@ -9,14 +9,18 @@
 			text-neutral-400
 			dark:text-neutral-600
 		`,
-		($.wrapperAttrs as any)?.class,
+		($.wrapperAttrs as any)?.class
 	)"
 	tabindex="-1"
-	v-bind="{...$.wrapperAttrs, class:undefined}"
+	v-bind="{ ...$.wrapperAttrs, class: undefined }"
 	ref="inputWrapperEl"
 >
-	<slot name="label" v-bind="{ ...slotProps, label }">
-		<lib-label v-if="label || $slots.default"
+	<slot
+		name="label"
+		v-bind="{ ...slotProps, label }"
+	>
+		<lib-label
+			v-if="label || $slots.default"
 			:id="id ?? fallbackId"
 			:disabled="disabled"
 			:readonly="readonly"
@@ -37,7 +41,7 @@
 		:data-disabled="disabled"
 		:data-read-only="readonly"
 		:data-is-open="isOpen"
-		v-bind="{...$['inner-wrapperAttrs'], class:undefined}"
+		v-bind="{ ...$['inner-wrapperAttrs'], class: undefined }"
 		:class="twMerge(`input--inner-wrapper
 				relative
 				flex
@@ -74,22 +78,31 @@
 				dark:border-neutral-600
 				border-neutral-400
 			`,
-			($['inner-wrapperAttrs'] as any)?.class,
+			($['inner-wrapperAttrs'] as any)?.class
 		)"
 	>
-		<slot name="left" v-bind="slotProps"/>
-		<slot name="input" v-bind="{ ...inputProps, ...slotProps, suggestionsIndicatorClickHandler }">
+		<slot
+			name="left"
+			v-bind="slotProps"
+		/>
+		<slot
+			name="input"
+			v-bind="{ ...inputProps, ...slotProps, suggestionsIndicatorClickHandler }"
+		>
 			<lib-simple-input
 				:class="twMerge(
 					`input--input p-0`,
 					!$slots.left && `-ml-2 pl-2`,
 					!$slots.right && (!$values || $values.length === 0) && !suggestions && `-mr-2 -pr-2`,
-					($.attrs as any)?.class,
+					($.attrs as any)?.class
 				)"
 				v-bind="inputProps"
 			/>
 		</slot>
-		<slot name="indicator" v-bind="{isOpen, suggestionsIndicatorClickHandler }">
+		<slot
+			name="indicator"
+			v-bind="{ isOpen, suggestionsIndicatorClickHandler }"
+		>
 			<!-- todo, convert to button for accessibility ? -->
 			<div
 				v-if="suggestions"
@@ -97,12 +110,14 @@
 				:class="twMerge(`input--indicator flex flex-col justify-center`)"
 				@click="suggestionsIndicatorClickHandler"
 			>
-				<icon :class="isOpen && `rotate-180`"> <i-fa6-solid-chevron-up/> </icon>
+				<icon :class="isOpen && `rotate-180`">
+					<i-fa6-solid-chevron-up/>
+				</icon>
 			</div>
 		</slot>
 		<slot
 			name="values"
-			v-bind="{...multivaluesProps, ...slotProps}"
+			v-bind="{ ...multivaluesProps, ...slotProps }"
 		>
 			<template v-if="$values && $values.length > 0">
 				<lib-multi-values
@@ -113,15 +128,22 @@
 							py-1
 						`,
 						!$slots.right && `-mr-1`,
-						($.multivaluesAttrs as any)?.class,
+						($.multivaluesAttrs as any)?.class
 					)"
 					v-bind="multivaluesProps"
 				/>
 			</template>
 		</slot>
-		<slot name="right" v-bind="slotProps"/>
+		<slot
+			name="right"
+			v-bind="slotProps"
+		/>
 
-		<slot v-if="suggestions" name="suggestions" v-bind="{...suggestionProps, ...slotProps}">
+		<slot
+			v-if="suggestions"
+			name="suggestions"
+			v-bind="{ ...suggestionProps, ...slotProps }"
+		>
 			<!-- todo 1px needs to be abstracted to var -->
 			<lib-suggestions
 				:class="twMerge(`
@@ -137,24 +159,27 @@
 					!border && `
 						rounded-sm
 					`,
-					($.suggestionsAttrs as any)?.class,
+					($.suggestionsAttrs as any)?.class
 				)"
 				ref="suggestionsComponent"
 				v-bind="suggestionProps"
 			>
 				<template #item="itemSlotProps">
-					<slot name="suggestion-item" v-bind="itemSlotProps"/>
+					<slot
+						name="suggestion-item"
+						v-bind="itemSlotProps"
+					/>
 				</template>
 			</lib-suggestions>
 		</slot>
 	</div>
 </div>
 </template>
+
 <script setup lang="ts">
 import { isBlank } from "@alanscodelog/utils/isBlank"
-import { isObject } from "@alanscodelog/utils/isObject"
 import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn"
-import { computed,type HTMLAttributes,type InputHTMLAttributes, nextTick, onBeforeMount, ref, toRef, useSlots, watch } from "vue"
+import { computed, type HTMLAttributes, type InputHTMLAttributes, nextTick, ref, toRef, useSlots, watch } from "vue"
 import type { ComponentExposed } from "vue-component-type-helpers"
 
 import IFa6SolidChevronUp from "~icons/fa6-solid/chevron-up"
@@ -169,11 +194,10 @@ import LibSimpleInput from "../LibSimpleInput/LibSimpleInput.vue"
 import LibSuggestions from "../LibSuggestions/LibSuggestions.vue"
 import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type SuggestionsProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
 
-
 /* #region base */
 defineOptions({
-	name: "lib-simple-input-deprecated",
-	inheritAttrs: false,
+	name: "LibSimpleInputDeprecated",
+	inheritAttrs: false
 })
 const $slots = useSlots()
 const emit = defineEmits<{
@@ -191,7 +215,7 @@ const props = withDefaults(defineProps<Props>(), {
 	valid: true,
 	suggestions: undefined,
 	updateOnlyOnSubmit: false,
-	unstyle: false, disabled: false, readonly: false, border: true,
+	unstyle: false, disabled: false, readonly: false, border: true
 })
 
 const $ = useDivideAttrs(["wrapper", "inner-wrapper", "suggestions", "multivalues"] as const)
@@ -222,7 +246,6 @@ const suggestionsIndicatorClickHandler = (e: MouseEvent) => {
 	emit("indicatorClick", e)
 }
 
-
 const handleKeydown = (e: KeyboardEvent) => {
 	if (props.suggestions) {
 		if (e.key === "Enter" && activeSuggestion.value === -1 && $values.value) {
@@ -263,7 +286,7 @@ const inputAriaProps = useSuggestionsInputAria(
 	fullId,
 	isOpen,
 	activeSuggestion,
-	suggestions,
+	suggestions
 )
 const inputProps = computed(() => ({
 	id: fullId.value,
@@ -275,6 +298,7 @@ const inputProps = computed(() => ({
 	onBlur: handleBlur,
 	onFocus: handleFocus,
 	modelValue: $inputValue.value,
+	// eslint-disable-next-line @typescript-eslint/naming-convention
 	"onUpdate:modelValue": (e: string) => {
 		$inputValue.value = e
 		if (!props.suggestions && !props.updateOnlyOnSubmit && !props.restrictToSuggestions) {
@@ -293,7 +317,7 @@ const inputProps = computed(() => ({
 	...inputAriaProps.value,
 	canEdit: canEdit.value,
 	...$.value.attrs,
-	class: undefined,
+	class: undefined
 }))
 
 function slotSubmit(val: any, _wasRemoved: boolean): void {
@@ -308,7 +332,6 @@ const slotProps = computed(() => ({
 	emitSubmit: slotSubmit
 }))
 
-
 const suggestionProps = computed(() => ({
 	id: fullId.value,
 	suggestions: props.suggestions,
@@ -319,18 +342,22 @@ const suggestionProps = computed(() => ({
 	modelValue: $values.value ?? $modelValue.value.toString(),
 	inputValue: $inputValue.value,
 	isValid: props.isValid,
+	// eslint-disable-next-line @typescript-eslint/naming-convention
 	"onUpdate:inputValue": (e: string) => $inputValue.value = e,
 	onSubmit: (e: string, suggestion?: any, wasRemoved?: boolean) => {
 		$modelValue.value = wasRemoved ? "" : e
 		emit("submit", e, suggestion)
 	},
+	// eslint-disable-next-line @typescript-eslint/naming-convention
 	"onUpdate:modelValue": (e: string | string[]) => {
 		$values.value &&= e as string[]
 	},
+	// eslint-disable-next-line @typescript-eslint/naming-convention
 	"onUpdate:isOpen": (e: boolean) => { isOpen.value = e },
+	// eslint-disable-next-line @typescript-eslint/naming-convention
 	"onUpdate:activeSuggestion": (e: number) => activeSuggestion.value = e,
 	...$.value.suggestionsAttrs,
-	class: undefined,
+	class: undefined
 }))
 
 const multivaluesProps = computed(() => ({
@@ -340,41 +367,39 @@ const multivaluesProps = computed(() => ({
 	disabled: props.disabled,
 	readonly: props.readonly,
 	modelValue: $values.value,
+	// eslint-disable-next-line @typescript-eslint/naming-convention
 	"onUpdate:modelValue": (e: string[]) => $values.value = e,
 	...$.value.multivaluesAttrs,
-	class: undefined,
+	class: undefined
 }))
 
-
 defineExpose({
 	suggestionsComponent,
-	el: inputWrapperEl,
+	el: inputWrapperEl
 })
-
 </script>
-<script lang="ts">
 
-type WrapperTypes =
-	& WrapperProps<"suggestions",HTMLAttributes >
-	& WrapperProps<"wrapper", HTMLAttributes >
-	& WrapperProps<"inner-wrapper",HTMLAttributes>
+<script lang="ts">
+type WrapperTypes
+	= & WrapperProps<"suggestions", HTMLAttributes>
+		& WrapperProps<"wrapper", HTMLAttributes>
+		& WrapperProps<"inner-wrapper", HTMLAttributes>
 
-type RealProps =
-	SuggestionsProps
-	& LinkableByIdProps
-	& LabelProps
-	& BaseInteractiveProps
-& {
-	suggestions?: SuggestionsProps["suggestions"]
-	valid?: boolean
-}
+type RealProps
+	= SuggestionsProps
+		& LinkableByIdProps
+		& LabelProps
+		& BaseInteractiveProps
+		& {
+			suggestions?: SuggestionsProps["suggestions"]
+			valid?: boolean
+		}
 
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<InputHTMLAttributes,"class" | "readonly" | "disabled" | "onSubmit"> & TailwindClassProp>,
+	Partial<Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSubmit"> & TailwindClassProp>,
 	/** @vue-ignore */
 	Partial<WrapperTypes>,
 	RealProps { }
 </script>
-

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

@@ -3,22 +3,19 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 
 import Label from "./LibLabel.vue"
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof Label> = {
 	component: Label,
 	title: "Components/Label",
 	args: {
-		slot: "label",
-	},
+		slot: "label"
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof Label>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -31,7 +28,6 @@ export const Primary: Story = {
 					<lib-label v-bind="args">{{args.slot}}</lib-label>
 					<lib-simple-input modelValue="some input"></lib-simple-input>
 				</div>
-		`,
-	}),
+		`
+	})
 }
-

package/src/runtime/components/LibLabel/LibLabel.vue

@@ -12,37 +12,37 @@
 	:data-disabled="disabled"
 	:data-invalid="!valid"
 	:for="id"
-	v-bind="{...$attrs, class:undefined}"
+	v-bind="{ ...$attrs, class: undefined }"
 >
 	<slot/>
 </label>
 </template>
 
 <script setup  lang="ts">
-import type { MakeRequired } from "@alanscodelog/utils/types"
-import { type LabelHTMLAttributes,toRef,useAttrs } from "vue"
+import { useAttrs } from "vue"
 
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
-
+import { getFallbackId } from "../shared/props.js"
 
 defineOptions({
-	name: "lib-label",
+	name: "LibLabel"
 })
 
 const fallbackId = getFallbackId()
 
-// eslint-disable-next-line no-undef
 withDefaults(defineProps<Props>(), {
 	id: "",
 	valid: true,
-	unstyle: false, disabled: false, readonly: false, border: true,
+	unstyle: false, disabled: false, readonly: false, border: true
 })
 
 const $attrs = useAttrs()
 </script>
 
 <script lang="ts">
+import type { LabelHTMLAttributes } from "vue"
+import type { BaseInteractiveProps, LabelProps, LinkableByIdProps, TailwindClassProp } from "../shared/props.js"
+
 type RealProps =
 	& LinkableByIdProps
 	& LabelProps

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

@@ -4,24 +4,21 @@ import { ref } from "vue"
 
 import LibMultiValues from "./LibMultiValues.vue"
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta = {
 	component: LibMultiValues as any,
 	title: "Components/MultiValues",
 	args: {
 		modelValue: ["A", "B", "C"],
-		border: true,
+		border: true
 	},
-	tags: ["!test"],
+	tags: ["!test"]
 } satisfies Meta<typeof LibMultiValues> & Meta<{ custom: string }>
 
 export default meta
 type Story = StoryObj<typeof LibMultiValues> // & StoryObj<typeof extraArgs>
 
-
 /**
  * The multi-value component is just the values part beneath the input.
  *
@@ -42,10 +39,9 @@ export const Primary: Story = {
 				args,
 				inputValue,
 				multiValueEl,
-				onKeydownEnter,
+				onKeydownEnter
 			})
-		}
-		,
+		},
 
 		template: `
 			<p>Simple Input connected to multi-value.</p>
@@ -64,21 +60,20 @@ export const Primary: Story = {
 					v-model="args.modelValue"
 				/>
 			</div>
-		`,
-	}),
+		`
+	})
 }
 
-
 export const Disabled = {
 	...Primary,
 	args: {
-		disabled: true,
-	},
+		disabled: true
+	}
 }
 
 export const Readonly = {
 	...Primary,
 	args: {
-		readonly: true,
-	},
+		readonly: true
+	}
 }

package/src/runtime/components/LibMultiValues/LibMultiValues.vue

@@ -18,7 +18,7 @@
 	:data-read-only="readonly"
 	:aria-label="`Values for ${label}`"
 	:tabindex="disabled ? -1 : 0"
-	v-bind="{...$.attrs, class:undefined}"
+	v-bind="{ ...$.attrs, class: undefined }"
 >
 	<div
 		:data-border="border"
@@ -82,22 +82,20 @@ import { copy } from "../../helpers/copy.js"
 import { twMerge } from "../../utils/twMerge.js"
 import Icon from "../Icon/Icon.vue"
 import LibButton from "../LibButton/LibButton.vue"
-import { type BaseInteractiveProps,type LabelProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
-
+import type { BaseInteractiveProps, LabelProps, TailwindClassProp, WrapperProps } from "../shared/props.js"
 
 defineOptions({
-	name: "lib-multi-values",
-	inheritAttrs: false,
+	name: "LibMultiValues",
+	inheritAttrs: false
 })
 
 const $ = useDivideAttrs(["item"] as const)
 const props = withDefaults(defineProps<Props>(), {
-	unstyle: false, disabled: false, readonly: false, border: true,
+	unstyle: false, disabled: false, readonly: false, border: true
 })
 
-
 const canEdit = computed(() => !props.disabled && !props.readonly)
-const $modelValue = defineModel<T[]>({ default: () => []})
+const $modelValue = defineModel<T[]>({ default: () => [] })
 
 const removeVal = (value: T) => {
 	if (!canEdit.value) return
@@ -106,22 +104,20 @@ const removeVal = (value: T) => {
 </script>
 
 <script lang="ts">
-type WrapperTypes = Partial<WrapperProps<"item",HTMLAttributes>>
+type WrapperTypes = Partial<WrapperProps<"item", HTMLAttributes>>
 
-type RealProps =
-	& LabelProps
-	& BaseInteractiveProps
-	& {
-		border?: boolean
-	}
+type RealProps
+	= & LabelProps
+		& BaseInteractiveProps
+		& {
+			border?: boolean
+		}
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
 	/** @vue-ignore */
 	WrapperTypes,
 	RealProps
 {}
-
 </script>
-

package/src/runtime/components/LibNotifications/LibNotification.stories.ts

@@ -4,10 +4,8 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import LibNotification from "./LibNotification.vue"
 
 import { NotificationHandler } from "../../helpers/NotificationHandler.js"
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const handler = new NotificationHandler()
 
 const meta: Meta<typeof LibNotification> = {
@@ -15,13 +13,12 @@ const meta: Meta<typeof LibNotification> = {
 	title: "Components/Notification",
 	args: {
 
-	},
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof LibNotification>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components: { ...components, LibNotification },
@@ -31,17 +28,17 @@ export const Primary: Story = {
 		backgrounds: { disable: true },
 		template: `
 			<lib-notification v-bind="args"/>
-		`,
+		`
 	}),
 	args: {
 		// @ts-expect-error calling protected method
 		notification: { ...handler._createEntry({
 			title: `Notification`,
-			message: `This is a notification. Pick an option:`,
+			message: `This is a notification. Pick an option:`
 		}),
-			// eslint-disable-next-line @typescript-eslint/no-empty-function
-																		resolve: () => { } },
-	},
+
+		resolve: () => { } }
+	}
 }
 export const WithoutTitle: Story = {
 	...Primary,
@@ -50,9 +47,9 @@ export const WithoutTitle: Story = {
 		// @ts-expect-error calling protected method
 		notification: handler._createEntry({
 			...Primary.args!.notification,
-			title: undefined,
-		}),
-	},
+			title: undefined
+		})
+	}
 }
 export const WithCode: Story = {
 	...Primary,
@@ -61,9 +58,9 @@ export const WithCode: Story = {
 		// @ts-expect-error calling protected method
 		notification: handler._createEntry({
 			...Primary.args!.notification,
-			code: "0001",
-		}),
-	},
+			code: "0001"
+		})
+	}
 }
 export const RequiresAction: Story = {
 	...Primary,
@@ -72,9 +69,9 @@ export const RequiresAction: Story = {
 		// @ts-expect-error calling protected method
 		notification: handler._createEntry({
 			...Primary.args!.notification,
-			requiresAction: true,
-		}),
-	},
+			requiresAction: true
+		})
+	}
 }
 
 /** Should not have cancel cross in top corner. */
@@ -87,9 +84,9 @@ export const Uncancellable: Story = {
 		notification: handler._createEntry({
 			...Primary.args!.notification,
 			options: ["Ok"],
-			cancellable: false,
-		}),
-	},
+			cancellable: false
+		})
+	}
 }
 
 export const CustomOptions: Story = {
@@ -99,9 +96,9 @@ export const CustomOptions: Story = {
 		// @ts-expect-error calling protected method
 		notification: handler._createEntry({
 			...Primary.args!.notification,
-			options: ["Ok", "Default Answer", "Cancel"],
-		}),
-	},
+			options: ["Ok", "Default Answer", "Cancel"]
+		})
+	}
 }
 export const CustomDefaultOption: Story = {
 	...Primary,
@@ -110,9 +107,9 @@ export const CustomDefaultOption: Story = {
 		// @ts-expect-error calling protected method
 		notification: handler._createEntry({
 			...CustomOptions.args!.notification,
-			default: "Default Answer",
-		}),
-	},
+			default: "Default Answer"
+		})
+	}
 }
 export const CustomDangerousOption: Story = {
 	...Primary,
@@ -122,9 +119,9 @@ export const CustomDangerousOption: Story = {
 		notification: handler._createEntry({
 			...CustomOptions.args!.notification,
 			options: ["Ok", "Dangerous Option", "Cancel"],
-			dangerous: ["Dangerous Option"],
-		}),
-	},
+			dangerous: ["Dangerous Option"]
+		})
+	}
 }
 export const CustomDefaultAndDangerousOption: Story = {
 	...Primary,
@@ -135,8 +132,7 @@ export const CustomDefaultAndDangerousOption: Story = {
 			...CustomOptions.args!.notification,
 			options: ["Ok", "Default Answer", "Dangerous Option", "Cancel"],
 			default: "Default Answer",
-			dangerous: ["Dangerous Option"],
-		}),
-	},
+			dangerous: ["Dangerous Option"]
+		})
+	}
 }
-