@witchcraft/ui 0.2.1-beta.3 → 0.2.2

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"]
+		})
+	}
 }
-

package/src/runtime/components/LibNotifications/LibNotification.vue

@@ -1,5 +1,6 @@
 <template>
-<div :class="twMerge(`notification
+<div
+	:class="twMerge(`notification
 		max-w-700px
 		bg-neutral-50
 		dark:bg-neutral-900
@@ -13,14 +14,15 @@
 		gap-2
 		p-2 m-2
 	`,
-	($attrs as any).class)"
+		($attrs as any).class)"
 	v-bind="{ ...$attrs, class: undefined }"
 	tabindex="0"
 	ref="notificationEl"
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
 >
 	<div class="notification--header flex-reverse flex justify-between">
-		<div v-if="notification.title"
+		<div
+			v-if="notification.title"
 			tabindex="0"
 			class="title
 				focus-outline flex
@@ -32,7 +34,8 @@
 		</div>
 		<div class="notification--spacer flex-1"/>
 		<div class="actions flex">
-			<LibButton :border="false"
+			<LibButton
+				:border="false"
 				class="notification--copy-button text-neutral-700"
 				@click="copy(handler ? handler.stringify(notification) : JSON.stringify(notification))"
 			>
@@ -48,21 +51,29 @@
 			</lib-button>
 		</div>
 	</div>
-	<div class="notification--message whitespace-pre-wrap" tabindex="0">
+	<div
+		class="notification--message whitespace-pre-wrap"
+		tabindex="0"
+	>
 		{{ notification.message }}
 	</div>
 	<div class="notification--footer flex items-end justify-between">
-		<div v-if="notification.code" class="code text-xs text-neutral-700 dark:text-neutral-300">
+		<div
+			v-if="notification.code"
+			class="code text-xs text-neutral-700 dark:text-neutral-300"
+		>
 			Code: {{ notification.code }}
 		</div>
 		<div class="notification--footer-spacer flex-1 py-1"/>
-		<div v-if="notification.options"
+		<div
+			v-if="notification.options"
 			class="notification--options
 				flex flex-wrap justify-end
 				gap-2
 			"
 		>
-			<lib-button :label="option"
+			<lib-button
+				:label="option"
 				:class="twMerge(`
 					notification--option-button
 				`,
@@ -78,8 +89,9 @@
 	</div>
 </div>
 </template>
+
 <script setup lang="ts">
-import { computed, type HTMLAttributes,ref, useAttrs } from "vue"
+import { computed, type HTMLAttributes, ref, useAttrs } from "vue"
 
 import IFa6RegularCopy from "~icons/fa6-regular/copy"
 import IFa6SolidXmark from "~icons/fa6-solid/xmark"
@@ -91,30 +103,28 @@ import Icon from "../Icon/Icon.vue"
 import LibButton from "../LibButton/LibButton.vue"
 import type { TailwindClassProp } from "../shared/props.js"
 
-
 defineOptions({
-	name: "lib-notification",
-	inheritAttrs: false,
+	name: "LibNotification",
+	inheritAttrs: false
 })
 const $attrs = useAttrs()
 
 const props = withDefaults(defineProps<Props>(), {
-	handler: undefined,
+	handler: undefined
 })
 
 const getColor = (notification: NotificationEntry, option: string): "ok" | "primary" | "danger" | "secondary" => notification.default === option ? "primary" : notification.dangerous.includes(option) ? "danger" : "secondary"
 
 /* Todo make this more flexible? */
-// eslint-disable-next-line @stylistic/space-in-parens
+
 const buttonColors = computed(() => props.notification.options.map((option: any /* what ??? */) => getColor(props.notification, option)))
 
 const notificationEl = ref<null | HTMLElement>(null)
 defineExpose({
 	focus: () => {
 		notificationEl.value?.focus()
-	},
+	}
 })
-
 </script>
 
 <script lang="ts">
@@ -126,7 +136,7 @@ type RealProps = {
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
 	RealProps
 {}
 </script>

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

@@ -5,23 +5,20 @@ import { reactive, ref } from "vue"
 import LibNotifications from "./LibNotifications.vue"
 
 import { NotificationHandler } from "../../helpers/NotificationHandler.js"
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import * as components from "../index.js"
 
-
 const meta: Meta<typeof LibNotifications> = {
 	component: LibNotifications,
 	title: "Components/Notifications",
 	args: {
 	// @ts-expect-error story only arg
-		withTitle: true,
-	},
+		withTitle: true
+	}
 }
 
 export default meta
 type Story = StoryObj<typeof LibNotifications>
 
-
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -40,7 +37,7 @@ export const Primary: Story = {
 					message: `This is a notification that requires action. Pick an option:`,
 					requiresAction: true,
 					options: ["Ok", "Default Answer", "Cancel"],
-					default: "Default Answer",
+					default: "Default Answer"
 				})
 			}
 			const notifyWithDangerousOption = () => {
@@ -50,7 +47,7 @@ export const Primary: Story = {
 					message: `This is a notification that has a dangerous option. Pick an option:`,
 					options: ["Ok", "Default Answer", "Dangerous Option", "Cancel"],
 					default: "Default Answer",
-					dangerous: ["Dangerous Option"],
+					dangerous: ["Dangerous Option"]
 				})
 			}
 			const notifyNonCancellable = () => {
@@ -60,7 +57,7 @@ export const Primary: Story = {
 					message: `This is a non-cancellable notification. Pick an option:`,
 					options: ["Ok", "Default Answer"],
 					default: "Default Answer",
-					cancellable: false,
+					cancellable: false
 				})
 			}
 			const notifyNonCancellableRequiresAction = () => {
@@ -71,7 +68,7 @@ export const Primary: Story = {
 					requiresAction: true,
 					options: ["Ok", "Default Answer"],
 					default: "Default Answer",
-					cancellable: false,
+					cancellable: false
 				})
 			}
 			const notifyTimeoutable = () => {
@@ -79,7 +76,7 @@ export const Primary: Story = {
 				void handler.notify({
 					title: withTitle.value ? `Notification(${count})` : undefined,
 					message: `This is a notification. No action required.`,
-					timeout: disableTimeout.value ? false : 2000,
+					timeout: disableTimeout.value ? false : 2000
 				})
 			}
 			return {
@@ -93,8 +90,8 @@ export const Primary: Story = {
 				disableTimeout,
 				args: {
 					outline: false,
-					...args,
-				},
+					...args
+				}
 			}
 		},
 		backgrounds: { disable: true },
@@ -118,7 +115,6 @@ export const Primary: Story = {
 			</template>
 		</lib-debug>
 	</lib-root>
-	`,
-	}),
+	`
+	})
 }
-

package/src/runtime/components/LibNotifications/LibNotifications.vue

@@ -1,5 +1,6 @@
 <template>
-<TransitionGroup name="list"
+<TransitionGroup
+	name="list"
 	tag="div"
 	:class="twMerge(`notifications
 			absolute
@@ -13,7 +14,8 @@
 		`, ($attrs as any).class)"
 	v-bind="{ ...$attrs, class: undefined }"
 >
-	<lib-notification class="pointer-events-auto"
+	<lib-notification
+		class="pointer-events-auto"
 		:handler="handler"
 		tabindex="0"
 		:notification="notification"
@@ -28,7 +30,8 @@
 	/>
 </Transition>
 <Transition>
-	<dialog v-show="topNotifications.length > 0"
+	<dialog
+		v-show="topNotifications.length > 0"
 		:id="id"
 		:class="twMerge(`notifications-modal
 			bg-transparent
@@ -40,7 +43,8 @@
 		@click.self.prevent="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
 	>
 		<form>
-			<lib-notification v-if="topNotifications.length > 0 && topNotifications[0]"
+			<lib-notification
+				v-if="topNotifications.length > 0 && topNotifications[0]"
 				:handler="handler"
 				class="top-notification"
 				:notification="topNotifications[0]"
@@ -50,9 +54,10 @@
 	</dialog>
 </Transition>
 </template>
+
 <script setup lang="ts">
 import { removeIfIn } from "@alanscodelog/utils/removeIfIn"
-import { type HTMLAttributes,nextTick, onBeforeUnmount, ref,shallowReactive, Transition, TransitionGroup } from "vue"
+import { nextTick, onBeforeUnmount, ref, shallowReactive } from "vue"
 
 import LibNotification from "./LibNotification.vue"
 
@@ -62,11 +67,10 @@ import { twMerge } from "../../utils/twMerge.js"
 import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js"
 
 defineOptions({
-	name: "lib-notifications",
-	inheritAttrs: false,
+	name: "LibNotifications",
+	inheritAttrs: false
 })
 
-
 const props = defineProps<Props>()
 
 const dialogEl = ref<HTMLDialogElement | null>(null)
@@ -121,21 +125,22 @@ for (const entry of handler.queue) { addNotification(entry) }
 onBeforeUnmount(() => {
 	handler.removeNotificationListener(notificationListener)
 })
-
 </script>
+
 <script lang="ts">
+import type { HTMLAttributes } from "vue"
 
-type RealProps =
-& LinkableByIdProps
-& {
-	/** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
-	handler?: NotificationHandler
-}
+type RealProps
+	= & LinkableByIdProps
+		& {
+			/** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
+			handler?: NotificationHandler
+		}
 
 interface Props
 	extends
 	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
 	RealProps
 {}
 </script>