@witchcraft/ui 0.1.3 → 0.2.1-beta.1

package/dist/runtime/components/LibNotifications/LibNotifications.vue

@@ -10,8 +10,8 @@
 			pointer-events-none
 			overflow-hidden
 			flex flex-col
-		`, ($attrs as any).class)"
-	v-bind="{ ...$attrs, class: undefined }"
+		`, $attrs.class)"
+	v-bind="{ ...$attrs, class: void 0 }"
 >
 	<lib-notification class="pointer-events-auto"
 		:handler="handler"
@@ -24,7 +24,7 @@
 <Transition>
 	<div
 		v-show="topNotifications.length > 0"
-		:class="twMerge(`notifications--none`, ($attrs as any).class)"
+		:class="twMerge(`notifications--none`, $attrs.class)"
 	/>
 </Transition>
 <Transition>
@@ -35,7 +35,7 @@
 			p-0
 			backdrop:bg-black/50
 			backdrop:p-5
-		`, ($attrs as any).class)"
+		`, $attrs.class)"
 		ref="dialogEl"
 		@click.self.prevent="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
 	>
@@ -50,92 +50,72 @@
 	</dialog>
 </Transition>
 </template>
-<script setup lang="ts">
-import { removeIfIn } from "@alanscodelog/utils/removeIfIn.js"
-import { type HTMLAttributes,nextTick, onBeforeUnmount, ref,shallowReactive, Transition, TransitionGroup } from "vue"
-
-import LibNotification from "./LibNotification.vue"
-
-import { useNotificationHandler } from "../../composables/useNotificationHandler.js"
-import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js"
-import { twMerge } from "../../utils/twMerge.js"
-import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js"
 
+<script setup>
+import { removeIfIn } from "@alanscodelog/utils/removeIfIn";
+import { nextTick, onBeforeUnmount, ref, shallowReactive, Transition, TransitionGroup } from "vue";
+import LibNotification from "./LibNotification.vue";
+import { useNotificationHandler } from "../../composables/useNotificationHandler.js";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js";
+import { twMerge } from "../../utils/twMerge.js";
 defineOptions({
-	name: "lib-notifications",
-	inheritAttrs: false,
-})
-
-
-const props = defineProps<Props>()
-
-const dialogEl = ref<HTMLDialogElement | null>(null)
-
-const isOpen = ref(false)
-const notifications = shallowReactive<NotificationEntry[]>([])
-const topNotifications = shallowReactive<NotificationEntry[]>([])
+  name: "lib-notifications",
+  inheritAttrs: false
+});
+const props = defineProps({
+  id: { type: String, required: false },
+  handler: { type: Object, required: false }
+});
+const dialogEl = ref(null);
+const isOpen = ref(false);
+const notifications = shallowReactive([]);
+const topNotifications = shallowReactive([]);
 const open = () => {
-	if (!isOpen.value) {
-		void nextTick(() => {
-			dialogEl.value!.showModal()
-			isOpen.value = true
-		})
-	}
-}
+  if (!isOpen.value) {
+    void nextTick(() => {
+      dialogEl.value.showModal();
+      isOpen.value = true;
+    });
+  }
+};
 const close = () => {
-	if (isOpen.value && topNotifications.length === 0) {
-		dialogEl.value!.close()
-		isOpen.value = false
-	}
-}
-
-const addNotification = (entry: NotificationEntry) => {
-	if (entry.resolution === undefined) {
-		if (entry.requiresAction) {
-			topNotifications.push(entry)
-			open()
-			entry.promise.then(() => {
-				removeIfIn(topNotifications, entry)
-				close()
-			})
-		} else {
-			notifications.splice(0, 0, entry)
-			entry.promise.then(() => {
-				removeIfIn(notifications, entry)
-			})
-		}
-	}
-}
-
-const notificationListener = (entry: NotificationEntry, type: "added" | "resolved" | "deleted"): void => {
-	if (type === "added") {
-		addNotification(entry)
-	}
+  if (isOpen.value && topNotifications.length === 0) {
+    dialogEl.value.close();
+    isOpen.value = false;
+  }
+};
+const addNotification = (entry) => {
+  if (entry.resolution === void 0) {
+    if (entry.requiresAction) {
+      topNotifications.push(entry);
+      open();
+      entry.promise.then(() => {
+        removeIfIn(topNotifications, entry);
+        close();
+      });
+    } else {
+      notifications.splice(0, 0, entry);
+      entry.promise.then(() => {
+        removeIfIn(notifications, entry);
+      });
+    }
+  }
+};
+const notificationListener = (entry, type) => {
+  if (type === "added") {
+    addNotification(entry);
+  }
+};
+const handler = props.handler ?? useNotificationHandler();
+handler.addNotificationListener(notificationListener);
+for (const entry of handler.queue) {
+  addNotification(entry);
 }
-
-const handler = props.handler ?? useNotificationHandler()
-
-handler.addNotificationListener(notificationListener)
-
-for (const entry of handler.queue) { addNotification(entry) }
 onBeforeUnmount(() => {
-	handler.removeNotificationListener(notificationListener)
-})
-
+  handler.removeNotificationListener(notificationListener);
+});
 </script>
-<script lang="ts">
 
-type RealProps =
-& LinkableByIdProps
-& {
-	/** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
-	handler?: NotificationHandler
-}
+<script>
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
-	RealProps
-{}
 </script>

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

@@ -0,0 +1,13 @@
+import { type HTMLAttributes } from "vue";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js.js";
+import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js.js";
+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>, RealProps {
+}
+declare const _default: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -3,7 +3,7 @@
 	: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')"
 >
@@ -12,13 +12,13 @@
 		:i="prevLink.i"
 		:href="prevLink.href"
 		:text="t('pagination.previous-page')"
-		:aria-label=" t('pagination.aria.go-to-previous-page',{count:prevLink.i})"
+		: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})"
+			:aria-label="t('pagination.aria.go-to-previous-page', { count: prevLink.i })"
 		/>
 	</slot>
 	<div class="pagination--spacer flex-1"/>
@@ -27,14 +27,14 @@
 		:i="0"
 		:href="firstLink.href"
 		:text="firstLink.i"
-		:aria-label="t('pagination.aria.go-to-page', {count: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})"
+			:aria-label="t('pagination.aria.go-to-page', { count: firstLink.i })"
 		>
 			{{ firstLink.i }}
 		</a>
@@ -50,12 +50,12 @@
 			: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="`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>
@@ -65,12 +65,12 @@
 		: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="`pagination--current-page a ${currentPageClasses}`"
 			tabindex="0"
-			: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()"
 		>
@@ -85,12 +85,12 @@
 			: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="`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>
@@ -105,12 +105,12 @@
 		: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="`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>
@@ -123,27 +123,25 @@
 		: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="`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,110 +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,
-})
-
-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

@@ -7,7 +7,7 @@
 					:style="`background-color: var(${color});`"
 					: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,22 @@
 </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";
+import {} from "metamorphosis";
+import {} from "../shared/props.js";
+const props = defineProps({
+  id: { type: String, required: false },
+  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  border: { type: Boolean, required: false, default: true },
+  unstyle: { type: Boolean, required: false, default: false },
+  theme: { type: Object, required: true, default: () => ({}) }
+});
+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;