@witchcraft/ui 0.3.25 → 0.4.0-beta.1

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

@@ -1,131 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import { faker } from "@faker-js/faker"
-import type { Meta, StoryObj } from "@storybook/vue3"
-import { computed, ref } from "vue"
-
-import LibNotifications from "./LibNotifications.vue"
-
-import { NotificationHandler } from "../../helpers/NotificationHandler.js"
-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
-	}
-}
-
-export default meta
-type Story = StoryObj<typeof LibNotifications>
-
-export const Primary: Story = {
-	render: args => ({
-		components,
-		setup() {
-			const handler = new NotificationHandler({})
-
-			let count = 0
-
-			const withTitle = ref(args.withTitle)
-			const disableTimeout = ref(false)
-			const lotsOfText = ref(false)
-			const paragraphs = `\n Simulating lots of text:\n${faker.lorem.paragraphs(20)}`
-			const extraText = computed(() => lotsOfText.value ? paragraphs : "")
-
-			const notifyRequiresAction = (options: any) => {
-				count++
-				void handler.notify({
-					title: withTitle.value ? `Notification(${count})` : undefined,
-					message: `This is a cancellable notification that requires action. Pick an option:${extraText.value}`,
-					requiresAction: true,
-					options: ["Ok", "Default Answer", "Cancel"],
-					default: "Default Answer",
-					cancellable: true,
-					...options
-				})
-			}
-
-			const notifyWithDangerousOption = () => {
-				count++
-				void handler.notify({
-					title: withTitle.value ? `Notification(${count})` : undefined,
-					message: `This is a cancellable notification that has a dangerous option. Pick an option:${extraText.value}`,
-					options: ["Ok", "Default Answer", "Dangerous Option", "Cancel"],
-					cancellable: true,
-					default: "Default Answer",
-					dangerous: ["Dangerous Option"]
-				})
-			}
-			const notifyNonCancellable = () => {
-				count++
-				void handler.notify({
-					title: withTitle.value ? `Notification(${count})` : undefined,
-					message: `This is a non-cancellable notification. Pick an option:${extraText.value}`,
-					options: ["Ok", "Default Answer"],
-					default: "Default Answer",
-					cancellable: false
-				})
-			}
-			const notifyNonCancellableRequiresAction = () => {
-				count++
-				void handler.notify({
-					title: withTitle.value ? `Notification(${count})` : undefined,
-					message: `This is a non-cancellable notification. Pick an option:${extraText.value}`,
-					requiresAction: true,
-					options: ["Ok", "Default Answer"],
-					default: "Default Answer",
-					cancellable: false
-				})
-			}
-			const notifyTimeoutable = () => {
-				count++
-				void handler.notify({
-					title: withTitle.value ? `Notification(${count})` : undefined,
-					message: `This is a notification. No action required.${extraText.value}`,
-					timeout: disableTimeout.value ? false : 5000
-				})
-			}
-			return {
-				notifyRequiresAction,
-				notifyTimeoutable,
-				notifyNonCancellable,
-				notifyWithDangerousOption,
-				notifyNonCancellableRequiresAction,
-				handler,
-				withTitle,
-				disableTimeout,
-				lotsOfText,
-				args: {
-					outline: false,
-					...args
-				}
-			}
-		},
-		backgrounds: { disable: true },
-		// <lib-debug>{{args.handler}}</lib-debug>
-		template: `
-	<lib-root :outline="args.outline" :notification-handler="handler">
-		<lib-button :label="'Notify Timeoutable'" @click="notifyTimeoutable()"></lib-button>
-		<lib-button :label="'Notify RequiresAction (Cancellable)'" @click="notifyRequiresAction()"></lib-button>
-		<lib-button :label="'Notify RequiresAction (Cancellable) - Custom Width'" @click="notifyRequiresAction({cancellable:true,notificationProps: {class: 'sm:max-w-[90dvw]'}})"></lib-button>
-		<lib-button :label="'Notify Non-Cancellable that RequiresAction'" @click="notifyNonCancellableRequiresAction()"></lib-button>
-		<lib-button :label="'Notify With Dangerous Option (Cancellable)'" @click="notifyWithDangerousOption()"></lib-button>
-		<lib-button :label="'Notify Non-Cancellable'" @click="notifyNonCancellable()"></lib-button>
-		<lib-checkbox v-model="lotsOfText">Use lots of text</lib-checkbox>
-		<lib-checkbox v-model="disableTimeout">Disable Timeout</lib-checkbox>
-		<lib-checkbox v-model="withTitle">With Title</lib-checkbox>
-		<lib-notifications :handler="handler" />
-		History:
-		<lib-debug>
-			<template v-for="entry in handler.history">
-				Message: {{entry.message}}
-				Resolution: {{entry.resolution}}
-				<br>
-			</template>
-		</lib-debug>
-	</lib-root>
-	`
-	})
-}

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

@@ -1,49 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { Meta, StoryObj } from "@storybook/vue3"
-import { ref } from "vue"
-
-import LibPagination from "./LibPagination.vue"
-
-import * as components from "../index.js"
-
-const meta: Meta<typeof LibPagination> = {
-	component: LibPagination,
-	title: "Components/Pagination",
-	args: {
-		total: 10
-	}
-}
-
-export default meta
-type Story = StoryObj<typeof LibPagination>
-
-export const Primary: Story = {
-	render: args => ({
-		components,
-		setup() {
-			const num = ref(1)
-			const changePage = ($event: any, i: any) => {
-				$event.preventDefault()
-				if (i >= 10) num.value = 10
-				if (i <= 1) num.value = 1
-				num.value = i
-			}
-
-			return {
-				changePage,
-				args,
-				num
-			}
-		},
-		template: `
-			<lib-pagination v-bind="{...args, current: num, route:'#'}">
-				<template #link="linkProps">
-					<a v-bind="linkProps" @click="changePage($event, linkProps.i)">{{ linkProps.text ?? linkProps.i }}</a>
-				</template>
-			</lib-pagination>
-			<lib-simple-input :label="'Change Page'" :modelValue="num.toString()" @update:modelValue="num = parseInt($event)" type="number" min="0" :max="args.total">
-
-			</lib-simple-input>
-		`
-	})
-}

package/src/runtime/components/LibPagination/LibPagination.vue

@@ -1,274 +0,0 @@
-<template>
-<nav
-	:class="twMerge(`
-		pagination--wrapper
-		flex flex-wrap items-center justify-center gap-2
-	`, ($attrs as any).class)"
-	role="navigation"
-	:aria-label="t('pagination.aria')"
->
-	<slot
-		v-if="prevLink.i > 0 && prevLink.i !== currentLink.i"
-		name="link"
-		:i="prevLink.i"
-		:href="prevLink.href"
-		:text="t('pagination.previous-page')"
-		:aria-label=" t('pagination.aria.go-to-previous-page', { count: prevLink.i })"
-		:class="`pagination--link ${pageClasses}`"
-	>
-		<a
-			:class="`pagination--link ${pageClasses}`"
-			:href="prevLink.href"
-			:aria-label=" t('pagination.aria.go-to-previous-page', { count: prevLink.i })"
-		/>
-	</slot>
-	<div class="pagination--spacer flex-1"/>
-	<slot
-		v-if="firstLink.i !== currentLink.i"
-		name="link"
-		:i="0"
-		:href="firstLink.href"
-		:text="firstLink.i"
-		:aria-label="t('pagination.aria.go-to-page', { count: firstLink.i })"
-		:class="`pagination--link pagination--first-link ${pageClasses}`"
-	>
-		{{ firstLink.href }}
-		<a
-			:class="`pagination--link pagination--first-link ${pageClasses}`"
-			:href="firstLink.href"
-			:aria-label="t('pagination.aria.go-to-page', { count: firstLink.i })"
-		>
-			{{ firstLink.i }}
-		</a>
-	</slot>
-	<div
-		v-if="prevLink.i - extraPages > firstLink.i"
-		class="pagination--page-fill"
-	>
-		...
-	</div>
-	<template
-		v-for="entry in extraPagesPrev"
-		:key="entry.i"
-	>
-		<slot
-			name="link"
-			:class="`pagination--link ${pageClasses}`"
-			:i="entry.i"
-			:href="entry.href"
-			:aria-label="t('pagination.aria.go-to-page', { count: entry.i })"
-		>
-			<a
-				:class="`pagination--link ${pageClasses}`"
-				:href="entry.href"
-				:aria-label="t('pagination.aria.go-to-page', { count: entry.i })"
-			>
-				{{ entry.i }}
-			</a>
-		</slot>
-	</template>
-	<slot
-		name="current"
-		:class="`pagination--link ${currentPageClasses}`"
-		tabindex="0"
-		:i="currentLink.i"
-		:aria-label="t('pagination.aria.current-page', { count: currentLink.i })"
-		:aria_current="true"
-	>
-		<div
-			:class="`pagination--current-page a ${currentPageClasses}`"
-			tabindex="0"
-			:aria-label="t('pagination.aria.current-page', { count: currentLink.i })"
-			aria-current="true"
-			@click="$event.preventDefault()"
-		>
-			{{ currentLink.i }}
-		</div>
-	</slot>
-	<template
-		v-for="entry in extraPagesNext"
-		:key="entry.i"
-	>
-		<slot
-			name="link"
-			:class="`pagination--link ${pageClasses}`"
-			:i="entry.i"
-			:href="entry.href"
-			:aria-label="t('pagination.aria.go-to-page', { count: entry.i })"
-		>
-			<a
-				:class="`pagination--link ${pageClasses}`"
-				:href="entry.href"
-				:aria-label="t('pagination.aria.go-to-page', { count: entry.i })"
-			>
-				{{ entry.i }}
-			</a>
-		</slot>
-	</template>
-	<div
-		v-if="nextLink.i + extraPages < total"
-		class="pagination--page-fill"
-		aria-hidden="true"
-	>
-		...
-	</div>
-	<slot
-		v-if="lastLink.i !== currentLink.i"
-		name="link"
-		:class="`pagination--link ${pageClasses}`"
-		:i="lastLink.i"
-		:href="lastLink.href"
-		:text="total"
-		:aria-label="t('pagination.aria.go-to-page', { count: lastLink.i })"
-	>
-		<a
-			:class="`pagination--link ${pageClasses}`"
-			:href="lastLink.href"
-			:aria-label="t('pagination.aria.go-to-page', { count: lastLink.i })"
-		>
-			{{ total }}
-		</a>
-	</slot>
-	<div class="pagination--spacer flex-1"/>
-	<slot
-		v-if="nextLink.i <= total && nextLink.i !== currentLink.i"
-		:class="`pagination--link ${pageClasses}`"
-		name="link"
-		:i="nextLink.i"
-		:href="nextLink.href"
-		:text="t('pagination.next-page')"
-		:aria-label="t('pagination.aria.go-to-next-page', { count: nextLink.i })"
-	>
-		<a
-			:class="`pagination--link ${pageClasses}`"
-			:href="nextLink.href"
-			:aria-label="t('pagination.aria.go-to-next-page', { count: nextLink.i })"
-		>
-			Next
-		</a>
-	</slot>
-</nav>
-</template>
-
-<script setup lang="ts">
-import { computed, type HTMLAttributes, useAttrs, watch } from "vue"
-
-import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
-import { twMerge } from "../../utils/twMerge.js"
-import type { TailwindClassProp } from "../shared/props.js"
-
-const t = useInjectedI18n()
-
-const commonClasses = `
-	block
-	focus-outline
-	border-b-2
-	border-transparent
-	transition-all
-	outlined:rounded-sm
-`
-const pageClasses = `
-	${commonClasses}
-	focus-outline
-	hover:text-accent-600
-	hover:border-b-accent-500
-	hover:scale-125
-`
-
-const currentPageClasses = `
-	${commonClasses}
-	border-b-accent-500
-	scale-125
-`
-defineOptions({
-	name: "LibPagination",
-	inheritAttrs: false
-})
-
-const props = withDefaults(defineProps<Props>(), {
-	customRoute: (route: string, i: number) => {
-		if (i === 0 || i === 1) {
-			const num = 1
-			return { href: route, i: num }
-		}
-		return { href: route + i.toString(), i }
-	},
-	extraPages: 3
-})
-const $attrs = useAttrs()
-
-const currentLink = computed(() => props.customRoute(props.route, props.current))
-const currentIsInvalid = computed(() => currentLink.value.i < 0 || currentLink.value.i > props.total)
-
-watch(() => currentIsInvalid.value, () => {
-	if (currentIsInvalid.value) {
-		throw new Error(`Current page is out of range: 0 - ${props.total}`)
-	}
-})
-
-const prevLink = computed(() => props.customRoute(props.route, props.current - 1))
-
-const nextLink = computed(() => {
-	const maybeNextLink = props.customRoute(props.route, props.current + 1)
-	if (maybeNextLink.i === currentLink.value.i) {
-		return props.customRoute(props.route, props.current + 2)
-	}
-	return maybeNextLink
-})
-
-const firstLink = computed(() => props.customRoute(props.route, 0))
-const lastLink = computed(() => props.customRoute(props.route, props.total))
-
-type HrefInfo = { href: string, i: number }
-const extraPagesPrev = computed(() => [...Array(props.extraPages)].map((_, _i) => {
-	const num = currentLink.value.i - (props.extraPages - _i)
-	if (num <= firstLink.value.i || num >= lastLink.value.i || num >= currentLink.value.i) return undefined
-	return props.customRoute(props.route, num)
-}).filter(entry => entry !== undefined) as HrefInfo[])
-
-const extraPagesNext = computed(() => [...Array(props.extraPages + 1)].map((_, i) => {
-	const num = currentLink.value.i + i
-	if (num <= firstLink.value.i || num >= lastLink.value.i || num <= currentLink.value.i) return undefined
-	return props.customRoute(props.route, num)
-}).filter(entry => entry !== undefined).slice(0, props.extraPages) as HrefInfo[])
-</script>
-
-<script lang="ts">
-/**
- * Pagination component.
- *
- * Can be passed a slot like so to use a custom link element (like NuxtLink):
- * ```vue
- * <template #link="{ href, i, text, ariaLabel, ariaCurrent}">
- * 	<NuxtLink :to="href" :aria-label="ariaLabel" :aria-current="ariaCurrent ?? false">{{ text ?? i }}</NuxtLink>
- * </template>
- * ```
- */
-export default {
-	name: "LibPagination"
-}
-type RealProps = {
-	/** The total number of pages. */
-	total: number
-	/** The number of the current page. It must be valid, between 0 - total or the component will throw an error. */
-	current: number
-	/** The base route/link path for the page. Should end with a forward slash `/`. */
-	route: string
-	/**
-	 * A function to customize the output href and page link number. By default, page 0 is page 1, page 1 is 1, then everything else is normal.
-	 *
-	 * This is because usually we have routes like: `/page/1`, `/page/2`, not `/page/0`.
-	 *
-	 * You can use this function to customize things further. For example, make `/page/1` just `/`
-	 */
-	customRoute?: (route: string, i: number) => { i: number, href: string }
-	/** How many extra pages to show to each side of the current page. */
-	extraPages?: number
-}
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>,
-	RealProps
-{}
-</script>

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

@@ -1,153 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { Meta, StoryObj } from "@storybook/vue3"
-import { computed, ref, watch } from "vue"
-
-import LibPopup from "./LibPopup.vue"
-
-import { vExtractRootEl } from "../../directives/vExtractRootEl.js"
-import * as components from "../index.js"
-
-const meta: Meta<typeof LibPopup> = {
-	component: LibPopup,
-	title: "Components/Popup",
-	args: {
-
-	}
-}
-
-export default meta
-type Story = StoryObj<typeof LibPopup>
-
-export const Primary: Story = {
-	render: args => ({
-		components,
-		directives: { extractRootEl: vExtractRootEl },
-		setup: () => {
-			const value = ref(false)
-			const buttonPositions = ["TL", "TC", "TR", "BL", "BC", "BR"] as const
-			const buttonPos = ref<typeof buttonPositions[number]>("TL")
-			const autoRotatePos = ref(true)
-			const buttonStyle = computed(() => {
-				switch (buttonPos.value) {
-					case "TL": return `align-self: flex-start; justify-self: flex-start;`
-					case "TC": return `align-self: flex-start; justify-self: center;`
-					case "TR": return `align-self: flex-start; justify-self: flex-end;`
-					case "BL": return `align-self: flex-end; justify-self: flex-start;`
-					case "BC": return `align-self: flex-end; justify-self: center;`
-					case "BR": return `align-self: flex-end; justify-self: flex-end;`
-					default: return ""
-				}
-			})
-
-			watch(value, () => {
-				if (!value.value && autoRotatePos.value) {
-					const buttonI = buttonPositions.indexOf(buttonPos.value)
-					if (buttonI < 5) { buttonPos.value = buttonPositions[buttonI + 1] } else {
-						buttonPos.value = buttonPositions[0]
-					}
-				}
-			})
-
-			return {
-				args,
-				buttonPos,
-				autoRotatePos,
-				buttonStyle,
-				value
-			}
-		},
-		template: `
-			<lib-simple-input
-				:suggestions="['TL', 'TR', 'BL', 'BR']"
-				:restrict-to-suggestions="true"
-				:suggestions-filter="(_, items) => items"
-				:label="'Button Position'"
-				v-model="buttonPos"
-			>
-			</lib-simple-input>
-			<div>
-				<label>Auto Rotate Position</label>
-				<input type="checkbox" v-model="autoRotatePos">
-			</div>
-			<div class="test bg-transparency-squares" style="display:grid;height:80vh;padding:50px;border:1px solid black;">
-
-			<lib-popup v-model="value" v-bind="{ ...args, width:undefined, }" >
-			{{value}}
-				<template #button="{extractEl}">
-					<lib-button :style="buttonStyle" @click="value = !value" v-extract-root-el="extractEl">Toggle Popup</lib-button>
-				</template>
-				<template #popup="{position, extractEl}">
-						<lib-debug
-							v-extract-root-el="extractEl"
-							:style="(args.width ? \`width: \${args.width};\` : '') + (args.height ? \`height: \${args.height};\` : '')"
-							class="bg-bg dark:bg-fg w-[500px]"
-						>
-							{{ position }}
-						</lib-debug>
-				</template>
-			</lib-popup>
-			</div>
-			`
-	})
-}
-export const PopupNoShift = {
-	...Primary,
-	args: {
-		avoidRepositioning: true
-
-	}
-}
-/** When the popup is too wide, it's positioned to the left and overflow scroll is set with an invisible scrollbar. */
-export const PopupTooBig = {
-	...Primary,
-	args: {
-		width: "110vw"
-	}
-}
-export const PopupCenterScreen = {
-	...Primary,
-	args: {
-		width: "500px",
-		height: "500px",
-		preferredHorizontal: ["center-screen"],
-		preferredVertical: ["center-screen"]
-	}
-}
-export const PopupRightBottomMost = {
-	...Primary,
-	args: {
-		width: "500px",
-		height: "500px",
-		preferredHorizontal: ["right-most"],
-		preferredVertical: ["bottom-most"]
-	}
-}
-export const PopupLeftTopMost = {
-	...Primary,
-	args: {
-		width: "500px",
-		height: "500px",
-		preferredHorizontal: ["left-most"],
-		preferredVertical: ["top-most"]
-	}
-}
-
-export const PopupCenterMost = {
-	...Primary,
-	args: {
-		width: "500px",
-		height: "500px",
-		preferredHorizontal: ["center-most"],
-		preferredVertical: ["center-most"]
-	}
-}
-export const LeftMenuShapeExample = {
-	...Primary,
-	args: {
-		width: "300px",
-		height: "500px",
-		preferredHorizontal: ["left-most"],
-		preferredVertical: ["center-most"],
-		avoidRepositioning: true
-	}
-}