@witchcraft/ui 0.1.1 → 0.1.3

package/dist/runtime/components/LibNotifications/LibNotifications.stories.js

@@ -0,0 +1,109 @@
+import { reactive, ref } from "vue";
+import LibNotifications from "./LibNotifications.vue";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js";
+import * as components from "../index.js";
+const meta = {
+  component: LibNotifications,
+  title: "Components/Notifications",
+  args: {
+    // @ts-expect-error story only arg
+    withTitle: true
+  }
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components,
+    setup() {
+      const handler = reactive(new NotificationHandler());
+      let count = 0;
+      const withTitle = ref(args.withTitle);
+      const disableTimeout = ref(false);
+      const notifyRequiresAction = () => {
+        count++;
+        void handler.notify({
+          title: withTitle.value ? `Notification(${count})` : void 0,
+          message: `This is a notification that requires action. Pick an option:`,
+          requiresAction: true,
+          options: ["Ok", "Default Answer", "Cancel"],
+          default: "Default Answer"
+        });
+      };
+      const notifyWithDangerousOption = () => {
+        count++;
+        void handler.notify({
+          title: withTitle.value ? `Notification(${count})` : void 0,
+          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"]
+        });
+      };
+      const notifyNonCancellable = () => {
+        count++;
+        void handler.notify({
+          title: withTitle.value ? `Notification(${count})` : void 0,
+          message: `This is a non-cancellable notification. Pick an option:`,
+          options: ["Ok", "Default Answer"],
+          default: "Default Answer",
+          cancellable: false
+        });
+      };
+      const notifyNonCancellableRequiresAction = () => {
+        count++;
+        void handler.notify({
+          title: withTitle.value ? `Notification(${count})` : void 0,
+          message: `This is a non-cancellable notification. Pick an option:`,
+          requiresAction: true,
+          options: ["Ok", "Default Answer"],
+          default: "Default Answer",
+          cancellable: false
+        });
+      };
+      const notifyTimeoutable = () => {
+        count++;
+        void handler.notify({
+          title: withTitle.value ? `Notification(${count})` : void 0,
+          message: `This is a notification. No action required.`,
+          timeout: disableTimeout.value ? false : 2e3
+        });
+      };
+      return {
+        notifyRequiresAction,
+        notifyTimeoutable,
+        notifyNonCancellable,
+        notifyWithDangerousOption,
+        notifyNonCancellableRequiresAction,
+        handler,
+        withTitle,
+        disableTimeout,
+        args: {
+          outline: false,
+          ...args
+        }
+      };
+    },
+    backgrounds: { disable: true },
+    // <lib-debug>{{args.handler}}</lib-debug>
+    template: `
+	<lib-root :outline="args.outline">
+		<lib-button :label="'Notify Timeoutable'" @click="notifyTimeoutable()"></lib-button>
+		<lib-button :label="'Notify RequiresAction'" @click="notifyRequiresAction()"></lib-button>
+		<lib-button :label="'Notify Non-Cancellable that RequiresAction'" @click="notifyNonCancellableRequiresAction()"></lib-button>
+		<lib-button :label="'Notify With Dangerous Option'" @click="notifyWithDangerousOption()"></lib-button>
+		<lib-button :label="'Notify Non-Cancellable'" @click="notifyNonCancellable()"></lib-button>
+		<input type="checkbox" v-model="withTitle"/> With Title
+		<input type="checkbox" v-model="disableTimeout"/> Disable Timeout
+			<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/dist/runtime/components/LibNotifications/LibNotifications.vue

@@ -10,8 +10,8 @@
 			pointer-events-none
 			overflow-hidden
 			flex flex-col
-		`, $attrs.class)"
-	v-bind="{ ...$attrs, class: void 0 }"
+		`, ($attrs as any).class)"
+	v-bind="{ ...$attrs, class: undefined }"
 >
 	<lib-notification class="pointer-events-auto"
 		:handler="handler"
@@ -24,7 +24,7 @@
 <Transition>
 	<div
 		v-show="topNotifications.length > 0"
-		:class="twMerge(`notifications--none`, $attrs.class)"
+		:class="twMerge(`notifications--none`, ($attrs as any).class)"
 	/>
 </Transition>
 <Transition>
@@ -35,7 +35,7 @@
 			p-0
 			backdrop:bg-black/50
 			backdrop:p-5
-		`, $attrs.class)"
+		`, ($attrs as any).class)"
 		ref="dialogEl"
 		@click.self.prevent="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
 	>
@@ -50,72 +50,92 @@
 	</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.js";
-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({
-  id: { type: String, required: false },
-  handler: { type: Object, required: false }
-});
-const dialogEl = ref(null);
-const isOpen = ref(false);
-const notifications = shallowReactive([]);
-const topNotifications = shallowReactive([]);
+	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[]>([])
 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) => {
-  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);
+	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)
+	}
 }
+
+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">
 
-<script>
+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
+{}
 </script>

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import LibPagination from "./LibPagination.vue.js";
+declare const meta: Meta<typeof LibPagination>;
+export default meta;
+type Story = StoryObj<typeof LibPagination>;
+export declare const Primary: Story;

package/dist/runtime/components/LibPagination/LibPagination.stories.js

@@ -0,0 +1,40 @@
+import { ref } from "vue";
+import LibPagination from "./LibPagination.vue";
+import * as components from "../index.js";
+const meta = {
+  component: LibPagination,
+  title: "Components/Pagination",
+  args: {
+    total: 10
+  }
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components,
+    setup() {
+      const num = ref(1);
+      const changePage = ($event, i) => {
+        $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/dist/runtime/components/LibPagination/LibPagination.vue

@@ -3,7 +3,7 @@
 	:class="twMerge(`
 		pagination--wrapper
 		flex flex-wrap items-center justify-center gap-2
-	`, $attrs.class)"
+	`, ($attrs as any).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,25 +123,27 @@
 		: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
@@ -149,68 +151,110 @@ 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 = 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);
+	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)
+
 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));
+	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 void 0;
-  return props.customRoute(props.route, num);
-}).filter((entry) => entry !== void 0));
+	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 void 0;
-  return props.customRoute(props.route, num);
-}).filter((entry) => entry !== void 0).slice(0, props.extraPages));
+	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">
 
-<script>
+/**
+ * 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"
-};
+	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/dist/runtime/components/LibPalette/LibPalette.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import LibPalette from "./LibPalette.vue.js";
+declare const meta: Meta<typeof LibPalette>;
+export default meta;
+type Story = StoryObj<typeof LibPalette>;
+export declare const Primary: Story;

package/dist/runtime/components/LibPalette/LibPalette.stories.js

@@ -0,0 +1,20 @@
+import LibPalette from "./LibPalette.vue";
+import { theme } from "../../theme.js";
+import * as components from "../index.js";
+const meta = {
+  component: LibPalette,
+  title: "Components/Palette",
+  args: {
+    // theme,
+  }
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components: { ...components, LibPalette },
+    setup: () => ({ args: { ...args, theme } }),
+    template: `
+			<LibPalette v-bind="{...args}">{{args.value}}</LibPalette>
+		`
+  })
+};