@witchcraft/ui 0.0.1

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

@@ -0,0 +1,261 @@
+<template>
+<nav
+	:class="twMerge(`
+		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="pageClasses"
+	>
+		<a
+			:class="pageClasses"
+			:href="prevLink.href"
+			:aria-label=" t('pagination.aria.go-to-previous-page', {count:prevLink.i})"
+		/>
+	</slot>
+	<div class="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="pageClasses"
+	>
+		{{ firstLink.href }}
+		<a
+			:class="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="page-fill">
+		...
+	</div>
+	<template
+		v-for="entry in extraPagesPrev"
+		:key="entry.i"
+	>
+		<slot name="link"
+			:class="pageClasses"
+			:i="entry.i"
+			:href="entry.href"
+			:aria-label="t('pagination.aria.go-to-page', {count:entry.i})"
+		>
+			<a
+				:class="pageClasses"
+				:href="entry.href"
+				:aria-label="t('pagination.aria.go-to-page', {count:entry.i})"
+			>
+				{{ entry.i }}
+			</a>
+		</slot>
+	</template>
+	<slot name="current"
+		:class="currentPageClasses"
+		tabindex="0"
+		:i="currentLink.i"
+		:aria-label="t('pagination.aria.current-page', {count:currentLink.i})"
+		:aria_current="true"
+	>
+		<div class="a"
+			tabindex="0"
+			:class="currentPageClasses"
+			: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="pageClasses"
+			:i="entry.i"
+			:href="entry.href"
+			:aria-label="t('pagination.aria.go-to-page', {count:entry.i})"
+		>
+			<a
+				:class="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="page-fill" aria-hidden="true">
+		...
+	</div>
+	<slot v-if="lastLink.i !== currentLink.i"
+		name="link"
+		:class="pageClasses"
+		:i="lastLink.i"
+		:href="lastLink.href"
+		:text="total"
+		:aria-label="t('pagination.aria.go-to-page', {count:lastLink.i})"
+	>
+		<a
+			:class="pageClasses"
+			:href="lastLink.href"
+			:aria-label="t('pagination.aria.go-to-page', {count:lastLink.i})"
+		>
+			{{ total }}
+		</a>
+	</slot>
+	<div class="flex-1"/>
+	<slot
+		v-if="nextLink.i <= total && nextLink.i !== currentLink.i"
+		:class="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="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: "lib-pagination",
+	inheritAttrs: false,
+})
+
+// eslint-disable-next-line no-use-before-define
+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: "lib-pagination",
+}
+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/LibPalette/LibPalette.stories.ts

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+
+import LibPalette from "./LibPalette.vue"
+
+import { theme } from "../../theme.js"
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+
+const meta: Meta<typeof LibPalette> = {
+	component: LibPalette,
+	title: "Components/Palette",
+	args: {
+		// theme,
+	},
+}
+
+export default meta
+type Story = StoryObj<typeof LibPalette>
+
+
+export const Primary: Story = {
+	render: args => ({
+		components: { ...components, LibPalette },
+		setup: () => ({ args: { ...args, theme } }),
+		template: `
+			<LibPalette v-bind="{...args}">{{args.value}}</LibPalette>
+		`,
+	}),
+}
+

package/src/runtime/components/LibPalette/LibPalette.vue

@@ -0,0 +1,49 @@
+<template>
+<div class="flex h-full flex-col items-center justify-center ">
+	<div class="container mx-auto ">
+		<div class="grid grid-cols-11 gap-2 gap-y-10 px-10">
+			<template v-for="color, i in colors" :key="color">
+				<div
+					:style="`background-color: var(${color});`"
+					:class="`h-10 rounded-sm flex items-center justify-center text-fg dark:text-bg`"
+				>
+					{{ [5, 16, 27, 38, 49].includes(i) ? 'Text':'' }}
+				</div>
+			</template>
+		</div>
+		<!-- <div class="flex flex-col">
+				<template v-for="color in ['green', 'yellow', 'red', 'blue', 'neutral']" :key="color">
+					<div class="grid grid-cols-11 gap-2 gap-y-10 px-10">
+						<div :class="`h-10 bg-${color}-${num} rounded-sm`" v-for="num in ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950']" :key="num"/>
+					</div>
+				</template>
+			</div> -->
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+export default { name: "lib-palette" }
+</script>
+
+<script setup  lang="ts">
+import { keys } from "@alanscodelog/utils/keys.js"
+import { type Theme } from "metamorphosis"
+
+import { type BaseInteractiveProps, baseInteractivePropsDefaults,type LinkableByIdProps } from "../shared/props.js"
+
+
+const props = withDefaults(defineProps<
+& LinkableByIdProps
+& BaseInteractiveProps
+& {
+	theme: Theme
+}>(), {
+	theme: () => ({} as any),
+	...baseInteractivePropsDefaults
+})
+
+const exclude = ["--color-bg", "--color-fg"]
+const colors = keys(props.theme.css).filter(key => key.startsWith("--color") && !exclude.includes(key))
+
+</script>

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

@@ -0,0 +1,157 @@
+/* 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"
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+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-input
+				:suggestions="['TL', 'TR', 'BL', 'BR']"
+				:restrict-to-suggestions="true"
+				:suggestions-filter="(_, items) => items"
+				:label="'Button Position'"
+				v-model="buttonPos"
+			>
+			</lib-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,
+	},
+}