@witchcraft/ui 0.0.1

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

@@ -0,0 +1,126 @@
+import LibNotification from "./LibNotification.vue";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js";
+import * as components from "../index.js";
+const handler = new NotificationHandler();
+const meta = {
+  component: LibNotification,
+  title: "Components/Notification",
+  args: {}
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components: { ...components, LibNotification },
+    setup() {
+      return { args };
+    },
+    backgrounds: { disable: true },
+    template: `
+			<lib-notification v-bind="args"/>
+		`
+  }),
+  args: {
+    // @ts-expect-error calling protected method
+    notification: {
+      ...handler._createEntry({
+        title: `Notification`,
+        message: `This is a notification. Pick an option:`
+      }),
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      resolve: () => {
+      }
+    }
+  }
+};
+export const WithoutTitle = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...Primary.args.notification,
+      title: void 0
+    })
+  }
+};
+export const WithCode = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...Primary.args.notification,
+      code: "0001"
+    })
+  }
+};
+export const RequiresAction = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...Primary.args.notification,
+      requiresAction: true
+    })
+  }
+};
+export const Uncancellable = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...Primary.args.notification,
+      options: ["Ok"],
+      cancellable: false
+    })
+  }
+};
+export const CustomOptions = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...Primary.args.notification,
+      options: ["Ok", "Default Answer", "Cancel"]
+    })
+  }
+};
+export const CustomDefaultOption = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...CustomOptions.args.notification,
+      default: "Default Answer"
+    })
+  }
+};
+export const CustomDangerousOption = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...CustomOptions.args.notification,
+      options: ["Ok", "Dangerous Option", "Cancel"],
+      dangerous: ["Dangerous Option"]
+    })
+  }
+};
+export const CustomDefaultAndDangerousOption = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error calling protected method
+    notification: handler._createEntry({
+      ...CustomOptions.args.notification,
+      options: ["Ok", "Default Answer", "Dangerous Option", "Cancel"],
+      default: "Default Answer",
+      dangerous: ["Dangerous Option"]
+    })
+  }
+};

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

@@ -0,0 +1,121 @@
+<template>
+<div :class="twMerge(`notification
+		max-w-700px
+		bg-neutral-50
+		dark:bg-neutral-950
+		text-fg
+		dark:text-bg
+		border
+		border-neutral-400
+		rounded-sm
+		focus-outline
+		flex-flex-col
+		gap-2
+		p-2 m-2
+	`,
+	($attrs as any).class)"
+	v-bind="{ ...$attrs, class: undefined }"
+	tabindex="0"
+	ref="notificationEl"
+	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
+>
+	<div class="header flex-reverse flex justify-between">
+		<div v-if="notification.title"
+			tabindex="0"
+			class="title
+				focus-outline flex
+				rounded-sm
+				font-bold
+			"
+		>
+			{{ notification.title }}
+		</div>
+		<div class="flex-1"/>
+		<div class="actions flex">
+			<LibButton :border="false"
+				class="copy text-neutral-700"
+				@click="copy(handler ? handler.stringify(notification) : JSON.stringify(notification))"
+			>
+				<icon><i-fa6-regular-copy/></icon>
+			</LibButton>
+			<lib-button v-if="notification.cancellable" :border="false" @click="NotificationHandler.dismiss(notification)">
+				<icon><i-fa6-solid-xmark/></icon>
+			</lib-button>
+		</div>
+	</div>
+	<div class="message whitespace-pre-wrap" tabindex="0">
+		{{ notification.message }}
+	</div>
+	<div class="bottom flex items-end justify-between">
+		<div v-if="notification.code" class="code text-xs text-neutral-700 dark:text-neutral-300">
+			Code: {{ notification.code }}
+		</div>
+		<div class="flex-1 py-1"/>
+		<div v-if="notification.options"
+			class="options
+				flex flex-wrap justify-end
+				gap-2
+			"
+		>
+			<lib-button :label="option"
+				:class="buttonColors[i] == 'secondary' ? 'p-0': undefined"
+				:border="buttonColors[i] !== 'secondary'"
+				:color="buttonColors[i]"
+				v-for="option, i in notification.options"
+				:key="option"
+				@click="notification.resolve(option)"
+			/>
+		</div>
+	</div>
+</div>
+</template>
+<script setup lang="ts">
+import { computed, type HTMLAttributes,ref, useAttrs } from "vue"
+
+import { copy } from "../../helpers/copy.js"
+import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js"
+import { twMerge } from "../../utils/twMerge.js"
+import Icon from "../Icon/Icon.vue"
+import LibButton from "../LibButton/LibButton.vue"
+import type { TailwindClassProp } from "../shared/props.js"
+
+
+defineOptions({
+	name: "lib-notification",
+	inheritAttrs: false,
+})
+const $attrs = useAttrs()
+
+// eslint-disable-next-line no-use-before-define
+const props = withDefaults(defineProps<Props>(), {
+	handler: undefined,
+})
+
+const getColor = (notification: NotificationEntry, option: string): "ok" | "primary" | "danger" | "secondary" => notification.default === option ? "primary" : notification.dangerous.includes(option) ? "danger" : "secondary"
+
+/* Todo make this more flexible? */
+// eslint-disable-next-line @stylistic/space-in-parens
+const buttonColors = computed(() => props.notification.options.map((option: any /* what ??? */) => getColor(props.notification, option)))
+
+const notificationEl = ref<null | HTMLElement>(null)
+defineExpose({
+	focus: () => {
+		notificationEl.value?.focus()
+	},
+})
+
+</script>
+
+<script lang="ts">
+type RealProps = {
+	notification: NotificationEntry
+	handler?: NotificationHandler
+}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
+	RealProps
+{}
+</script>

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

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

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: `
+	<test-wrapper :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>
+	</test-wrapper>
+	`
+  })
+};

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

@@ -0,0 +1,133 @@
+<template>
+<TransitionGroup name="list"
+	tag="div"
+	:class="twMerge(`notifications
+			fixed
+			z-50
+			inset-y-0 right-0
+			w-1/3
+			min-w-[300px]
+			pointer-events-none
+			overflow-hidden
+		`, ($attrs as any).class)"
+	v-bind="{ ...$attrs, class: undefined }"
+>
+	<lib-notification class="pointer-events-auto"
+		:handler="handler"
+		tabindex="0"
+		:notification="notification"
+		v-for="notification of notifications"
+		:key="notification.id"
+	/>
+</TransitionGroup>
+<Transition>
+	<div v-show="topNotifications.length > 0"/>
+</Transition>
+<Transition>
+	<dialog v-show="topNotifications.length > 0"
+		:id="id"
+		class="modal
+			bg-transparent
+			p-0
+			backdrop:bg-black/50
+			backdrop:p-5
+		"
+		ref="dialogEl"
+		@click.self.prevent="NotificationHandler.dismiss(topNotifications[0])"
+	>
+		<form>
+			<lib-notification v-if="topNotifications.length > 0"
+				:handler="handler"
+				class="top-notification"
+				:notification="topNotifications[0]"
+				ref="topNotificationComp"
+			/>
+		</form>
+	</dialog>
+</Transition>
+</template>
+<script setup lang="ts">
+import { removeIfIn } from "@alanscodelog/utils/removeIfIn.js"
+import { type HTMLAttributes,nextTick, onBeforeUnmount, type PropType, ref, shallowReactive } from "vue"
+
+import LibNotification from "./LibNotification.vue"
+
+import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js"
+import { twMerge } from "../../utils/twMerge.js"
+import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js"
+
+defineOptions({
+	name: "lib-notifications",
+	inheritAttrs: false,
+})
+
+
+// eslint-disable-next-line no-use-before-define
+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
+		})
+	}
+}
+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)
+	}
+}
+props.handler.addNotificationListener(notificationListener)
+
+for (const entry of props.handler.queue) { addNotification(entry) }
+onBeforeUnmount(() => {
+	props.handler.removeNotificationListener(notificationListener)
+})
+
+</script>
+<script lang="ts">
+
+type RealProps =
+& LinkableByIdProps
+& {
+	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-input :label="'Change Page'" :modelValue="num.toString()" @update:modelValue="num = parseInt($event)" type="number" min="0" :max="args.total">
+
+			</lib-input>
+		`
+  })
+};