@witchcraft/ui 0.0.1 → 0.1.1

package/dist/runtime/components/LibPagination/LibPagination.vue

@@ -1,8 +1,9 @@
 <template>
 <nav
 	:class="twMerge(`
+		pagination--wrapper
 		flex flex-wrap items-center justify-center gap-2
-	`, ($attrs as any).class)"
+	`, $attrs.class)"
 	role="navigation"
 	:aria-label="t('pagination.aria')"
 >
@@ -11,34 +12,34 @@
 		: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"
+		:aria-label="t('pagination.aria.go-to-previous-page', { count: prevLink.i })"
+		:class="`pagination--link ${pageClasses}`"
 	>
 		<a
-			:class="pageClasses"
+			:class="`pagination--link ${pageClasses}`"
 			:href="prevLink.href"
-			:aria-label=" t('pagination.aria.go-to-previous-page', {count:prevLink.i})"
+			:aria-label="t('pagination.aria.go-to-previous-page', { count: prevLink.i })"
 		/>
 	</slot>
-	<div class="flex-1"/>
+	<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="pageClasses"
+		:aria-label="t('pagination.aria.go-to-page', { count: firstLink.i })"
+		:class="`pagination--link pagination--first-link ${pageClasses}`"
 	>
 		{{ firstLink.href }}
 		<a
-			:class="pageClasses"
+			:class="`pagination--link pagination--first-link ${pageClasses}`"
 			:href="firstLink.href"
-			:aria-label="t('pagination.aria.go-to-page', {count:firstLink.i})"
+			: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 v-if="prevLink.i - extraPages > firstLink.i" class="pagination--page-fill">
 		...
 	</div>
 	<template
@@ -46,31 +47,30 @@
 		:key="entry.i"
 	>
 		<slot name="link"
-			:class="pageClasses"
+			:class="`pagination--link ${pageClasses}`"
 			:i="entry.i"
 			:href="entry.href"
-			:aria-label="t('pagination.aria.go-to-page', {count:entry.i})"
+			:aria-label="t('pagination.aria.go-to-page', { count: entry.i })"
 		>
 			<a
-				:class="pageClasses"
+				:class="`pagination--link ${pageClasses}`"
 				:href="entry.href"
-				:aria-label="t('pagination.aria.go-to-page', {count:entry.i})"
+				:aria-label="t('pagination.aria.go-to-page', { count: entry.i })"
 			>
 				{{ entry.i }}
 			</a>
 		</slot>
 	</template>
 	<slot name="current"
-		:class="currentPageClasses"
+		:class="`pagination--link ${currentPageClasses}`"
 		tabindex="0"
 		:i="currentLink.i"
-		:aria-label="t('pagination.aria.current-page', {count:currentLink.i})"
+		:aria-label="t('pagination.aria.current-page', { count: currentLink.i })"
 		:aria_current="true"
 	>
-		<div class="a"
+		<div :class="`pagination--current-page a ${currentPageClasses}`"
 			tabindex="0"
-			:class="currentPageClasses"
-			:aria-label="t('pagination.aria.current-page', {count:currentLink.i})"
+			:aria-label="t('pagination.aria.current-page', { count: currentLink.i })"
 			aria-current="true"
 			@click="$event.preventDefault()"
 		>
@@ -82,68 +82,66 @@
 		:key="entry.i"
 	>
 		<slot name="link"
-			:class="pageClasses"
+			:class="`pagination--link ${pageClasses}`"
 			:i="entry.i"
 			:href="entry.href"
-			:aria-label="t('pagination.aria.go-to-page', {count:entry.i})"
+			:aria-label="t('pagination.aria.go-to-page', { count: entry.i })"
 		>
 			<a
-				:class="pageClasses"
+				:class="`pagination--link ${pageClasses}`"
 				:href="entry.href"
-				:aria-label="t('pagination.aria.go-to-page', {count:entry.i})"
+				: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 v-if="nextLink.i + extraPages < total" class="pagination--page-fill" aria-hidden="true">
 		...
 	</div>
 	<slot v-if="lastLink.i !== currentLink.i"
 		name="link"
-		:class="pageClasses"
+		:class="`pagination--link ${pageClasses}`"
 		:i="lastLink.i"
 		:href="lastLink.href"
 		:text="total"
-		:aria-label="t('pagination.aria.go-to-page', {count:lastLink.i})"
+		:aria-label="t('pagination.aria.go-to-page', { count: lastLink.i })"
 	>
 		<a
-			:class="pageClasses"
+			:class="`pagination--link ${pageClasses}`"
 			:href="lastLink.href"
-			:aria-label="t('pagination.aria.go-to-page', {count:lastLink.i})"
+			:aria-label="t('pagination.aria.go-to-page', { count: lastLink.i })"
 		>
 			{{ total }}
 		</a>
 	</slot>
-	<div class="flex-1"/>
+	<div class="pagination--spacer flex-1"/>
 	<slot
 		v-if="nextLink.i <= total && nextLink.i !== currentLink.i"
-		:class="pageClasses"
+		: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})"
+		:aria-label="t('pagination.aria.go-to-next-page', { count: nextLink.i })"
 	>
 		<a
-			:class="pageClasses"
+			:class="`pagination--link ${pageClasses}`"
 			:href="nextLink.href"
-			:aria-label="t('pagination.aria.go-to-next-page', {count:nextLink.i})"
+			: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()
 
+<script setup>
+import { computed, useAttrs, watch } from "vue";
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
+import { twMerge } from "../../utils/twMerge.js";
+import {} from "../shared/props.js";
+const t = useInjectedI18n();
 const commonClasses = `
 	block
 	focus-outline
@@ -151,111 +149,68 @@ const commonClasses = `
 	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)
-
+  name: "lib-pagination",
+  inheritAttrs: false
+});
+const props = defineProps({
+  total: { type: Number, required: true },
+  current: { type: Number, required: true },
+  route: { type: String, required: true },
+  customRoute: { type: Function, required: false, default: (route, i) => {
+    if (i === 0 || i === 1) {
+      const num = 1;
+      return { href: route, i: num };
+    }
+    return { href: route + i.toString(), i };
+  } },
+  extraPages: { type: Number, required: false, default: 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))
-
+  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 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));
 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 num = currentLink.value.i - (props.extraPages - _i);
+  if (num <= firstLink.value.i || num >= lastLink.value.i || num >= currentLink.value.i) return void 0;
+  return props.customRoute(props.route, num);
+}).filter((entry) => entry !== void 0));
 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[])
-
+  const num = currentLink.value.i + i;
+  if (num <= firstLink.value.i || num >= lastLink.value.i || num <= currentLink.value.i) return void 0;
+  return props.customRoute(props.route, num);
+}).filter((entry) => entry !== void 0).slice(0, props.extraPages));
 </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>
- * ```
- */
+<script>
 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
-{}
+  name: "lib-pagination"
+};
 </script>

package/dist/runtime/components/LibPagination/LibPagination.vue.d.ts

@@ -0,0 +1,104 @@
+import { type HTMLAttributes } from "vue";
+import { type TailwindClassProp } from "../shared/props.js.js";
+/**
+ * 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>
+ * ```
+ */
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    customRoute: (route: string, i: number) => {
+        i: number;
+        href: string;
+    };
+    extraPages: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    link?: (props: {
+        class: string;
+        i: any;
+        href: any;
+        text: any;
+        ariaLabel: any;
+    }) => any;
+} & {
+    link?: (props: {
+        class: string;
+        i: number;
+        href: any;
+        text: any;
+        ariaLabel: any;
+    }) => any;
+} & {
+    link?: (props: {
+        i: any;
+        href: any;
+        ariaLabel: any;
+        class: string;
+    }) => any;
+} & {
+    current?: (props: {
+        tabindex: string;
+        i: any;
+        ariaLabel: any;
+        aria_current: boolean;
+        class: string;
+    }) => any;
+} & {
+    link?: (props: {
+        i: any;
+        href: any;
+        ariaLabel: any;
+        class: string;
+    }) => any;
+} & {
+    link?: (props: {
+        i: any;
+        href: any;
+        text: any;
+        ariaLabel: any;
+        class: string;
+    }) => any;
+} & {
+    link?: (props: {
+        i: any;
+        href: any;
+        text: any;
+        ariaLabel: any;
+        class: string;
+    }) => any;
+}>;
+export default _default;
+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 {
+}
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibPalette/LibPalette.vue

@@ -1,13 +1,13 @@
 <template>
-<div class="flex h-full flex-col items-center justify-center ">
-	<div class="container mx-auto ">
+<div class="theme-palette flex h-full flex-col items-center justify-center ">
+	<div class="theme-palette--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`"
+					:class="`theme-palette--item h-10 rounded-sm flex items-center justify-center text-fg dark:text-bg`"
 				>
-					{{ [5, 16, 27, 38, 49].includes(i) ? 'Text':'' }}
+					{{ [5, 16, 27, 38, 49].includes(i) ? "Text" : "" }}
 				</div>
 			</template>
 		</div>
@@ -22,28 +22,25 @@
 </div>
 </template>
 
-<script lang="ts">
-export default { name: "lib-palette" }
+<script>
+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 setup>
+import { keys } from "@alanscodelog/utils/keys.js";
+import {} from "metamorphosis";
+import { baseInteractivePropsDefaults } from "../shared/props.js";
+const props = defineProps(/* @__PURE__ */ _mergeDefaults({
+  id: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  border: { type: Boolean, required: false },
+  unstyle: { type: Boolean, required: false },
+  theme: { type: Object, required: true }
+}, {
+  theme: () => ({}),
+  ...baseInteractivePropsDefaults
+}));
+const exclude = ["--color-bg", "--color-fg"];
+const colors = keys(props.theme.css).filter((key) => key.startsWith("--color") && !exclude.includes(key));
 </script>

package/dist/runtime/components/LibPalette/LibPalette.vue.d.ts

@@ -0,0 +1,14 @@
+import { type Theme } from "metamorphosis";
+import { type BaseInteractiveProps, type LinkableByIdProps } from "../shared/props.js.js";
+declare const _default: import("vue").DefineComponent<LinkableByIdProps & BaseInteractiveProps & {
+    theme: Theme;
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkableByIdProps & BaseInteractiveProps & {
+    theme: Theme;
+}> & Readonly<{}>, {
+    theme: Theme;
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;