@witchcraft/ui 0.3.1 → 0.3.3

package/dist/runtime/composables/useScrollNearContainerEdges.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from "vue";
-import type { ScrollNearContainerEdgesOptions } from "../types/index.js.js";
+import type { ScrollNearContainerEdgesOptions } from "../types/index.js";
 /**
  * Creates a function `scrollContainer` that allows scrolling a container manually when the coordinates are near it's edges.
  * Supports scrolling faster the closer one is to the edge, and configuing an inner and outer margin.

package/dist/runtime/composables/useSetupDarkMode.d.ts

@@ -1,4 +1,4 @@
-import { useDarkMode } from "./useDarkMode.js.js";
+import { useDarkMode } from "./useDarkMode.js";
 /**
  * A composable for setting up dark mode that automatically takes care of saving the user's preference.
  *

package/dist/runtime/composables/useSlotVars.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Helper for managing props passed to slots and their fallbacks.
+ *
+ * Most slots have a default style but vue makes it hard to pass them both to the slot and the fallback content without repitition.
+ *
+ * This helper allows setting the variables from the template when creating the slot WHILE also using the created state without having to use any wrapper components, {@link https://github.com/vuejs/core/issues/1172 | see also this issue}.
+ *
+ * @example
+ * ```vue
+ * <template>
+ * 	<div>
+ * 		<slot
+ * 			v-bind="setSlotVar('title', {
+ * 				class: 'title focus-outline flex rounded-sm font-bold'
+ * 				someOtherProp: true
+ * 			})"
+ * 		>
+ * 			<FallbackComponent v-bind="slotVars.title"/>
+ * 		<slot/>
+ * 	</div>
+ * </template>
+ * <script setup lang="ts">
+ * import { useSlotVars } from "@witchcraft/ui/composables/useSlotVars"
+ * const { slotVars, setSlotVar } = useSlotVars()
+ * </script>
+ * ```
+ * The magic is that setSlotVar both sets and returns the value for the slot name passed. You can then access the state in a fallback component by accessing slotVars[slotName]. Unfortunately this is untyped unless you set the generic in useSlotsVars, but we usually don't need them to be typed.
+ */
+export declare function useSlotVars<T extends Record<string, Record<string, any>>, TKey extends keyof T>(): {
+    slotVars: import("vue").Reactive<Record<TKey, Record<string, any>>>;
+    setSlotVar: <T_1 extends Record<string, any>>(name: TKey, obj: T_1) => T_1;
+};

package/dist/runtime/composables/useSlotVars.js

@@ -0,0 +1,12 @@
+import { reactive } from "vue";
+export function useSlotVars() {
+  const state = reactive({});
+  function setSlotVar(name, obj) {
+    state[name] = obj;
+    return state[name];
+  }
+  return {
+    slotVars: state,
+    setSlotVar
+  };
+}

package/dist/runtime/composables/useSuggestions.d.ts

@@ -1,6 +1,6 @@
 import type { AnyFunction } from "@alanscodelog/utils";
 import { type Ref } from "vue";
-import type { SuggestionsEmits, SuggestionsOptions } from "../components/shared/props.js.js";
+import type { SuggestionsEmits, SuggestionsOptions } from "../components/shared/props.js";
 /**
  * The logic for the suggestions component.
  *

package/dist/runtime/directives/index.d.ts

@@ -1,4 +1,4 @@
-export { vDetectFlex } from "./vDetectFlex.js.js";
-export { vExtractRootEl } from "./vExtractRootEl.js.js";
-export { vResizableCols } from "./vResizableCols.js.js";
-export { vResizeObserver } from "./vResizeObserver.js.js";
+export { vDetectFlex } from "./vDetectFlex.js";
+export { vExtractRootEl } from "./vExtractRootEl.js";
+export { vResizableCols } from "./vResizableCols.js";
+export { vResizeObserver } from "./vResizeObserver.js";

package/dist/runtime/globalResizeObserver.d.ts

@@ -1,5 +1,5 @@
 /**
  * This is not inside helpers to avoid having it get dragged in by an import of /helpers.
  */
-import { ResizeObserverWrapper } from "./helpers/resizeObserverWrapper.js.js";
+import { ResizeObserverWrapper } from "./helpers/resizeObserverWrapper.js";
 export declare const globalResizeObserver: ResizeObserverWrapper;

package/dist/runtime/helpers/NotificationHandler.d.ts

@@ -1,10 +1,11 @@
 import type { AnyFunction, MakeRequired } from "@alanscodelog/utils";
+import { type Reactive } from "vue";
 export declare class NotificationHandler<TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>, TEntry extends NotificationEntry<TRawEntry> = NotificationEntry<TRawEntry>> {
     timeout: number;
     debug: boolean;
     private id;
-    readonly queue: TEntry[];
-    readonly history: TEntry[];
+    readonly queue: Reactive<TEntry[]>;
+    readonly history: Readonly<TEntry[]>;
     maxHistory: number;
     listeners: NotificationListener<TEntry>[];
     stringifier?: NotificationStringifier<TEntry>;
@@ -16,12 +17,12 @@ export declare class NotificationHandler<TRawEntry extends RawNotificationEntry<
     private _checkEntry;
     protected _createEntry<TNotifyEntry extends RawNotificationEntry<any, any>>(rawEntry: TNotifyEntry): TEntry;
     notify<TNotifyEntry extends RawNotificationEntry<any, any>>(rawEntry: TNotifyEntry): NotificationPromise<TNotifyEntry["options"][number] extends string ? TNotifyEntry["options"][number] : "Ok" | "Cancel">;
+    pause(notification: NotificationEntry): void;
+    resume(notification: NotificationEntry): void;
     static resolveToDefault(notification: NotificationEntry): void;
     static dismiss(notification: NotificationEntry): void;
     stringify(notification: NotificationEntry): string;
     clear(): void;
-    addNotificationListener(cb: NotificationListener<TEntry>): void;
-    removeNotificationListener(cb: NotificationListener<TEntry>): void;
 }
 export type NotificationPromise<TOption extends string = string> = Promise<TOption>;
 export type RawNotificationEntry<TOptions extends string[] = ["Ok", "Cancel"], TCancellable extends boolean | TOptions[number] = "Cancel"> = {
@@ -48,6 +49,12 @@ export type NotificationEntry<TRawEntry extends RawNotificationEntry<any, any> =
     timeout?: number;
     resolution?: string;
     id: number;
+    startTime: number;
+    isPaused: boolean;
+    _timer: {
+        id?: ReturnType<typeof setTimeout>;
+        elapsedBeforePause: number;
+    };
 };
 export type NotificationListener<TEntry extends NotificationEntry<any>> = (notification: TEntry, type: "added" | "resolved" | "deleted") => void;
 export type NotificationStringifier<T extends NotificationEntry<any>> = (notification: T) => string;

package/dist/runtime/helpers/NotificationHandler.js

@@ -4,12 +4,13 @@ import { indent } from "@alanscodelog/utils/indent";
 import { isBlank } from "@alanscodelog/utils/isBlank";
 import { pretty } from "@alanscodelog/utils/pretty";
 import { setReadOnly } from "@alanscodelog/utils/setReadOnly";
+import { reactive } from "vue";
 export class NotificationHandler {
   timeout = 5e3;
   debug = false;
   id = 0;
-  queue = [];
-  history = [];
+  queue;
+  history;
   maxHistory = 100;
   listeners = [];
   stringifier;
@@ -18,6 +19,8 @@ export class NotificationHandler {
     stringifier,
     maxHistory
   } = {}) {
+    this.queue = reactive([]);
+    this.history = reactive([]);
     if (timeout) this.timeout = timeout;
     if (maxHistory) this.maxHistory = maxHistory;
     if (stringifier) this.stringifier = stringifier;
@@ -102,9 +105,10 @@ export class NotificationHandler {
       entry.resolve = _resolve;
     });
     if (entry.timeout !== void 0) {
-      setTimeout(() => {
-        entry.resolve(entry.cancellable);
-      }, entry.timeout);
+      entry._timer = {
+        elapsedBeforePause: 0
+      };
+      this.resume(entry);
     }
     this.queue.push(entry);
     for (const listener of this.listeners) {
@@ -115,8 +119,10 @@ export class NotificationHandler {
       for (const listener of this.listeners) {
         listener(entry, "resolved");
       }
+      ;
       this.history.push(entry);
       if (this.history.length > this.maxHistory) {
+        ;
         this.history.splice(0, 1);
         for (const listener of this.listeners) {
           listener(entry, "deleted");
@@ -126,6 +132,29 @@ export class NotificationHandler {
       return res;
     });
   }
+  pause(notification) {
+    if (notification.timeout === void 0) {
+      throw new Error(`Cannot pause notification with no timeout: ${notification.id}`);
+    }
+    if (notification.isPaused) {
+      throw new Error(`Cannot pause notification that is already paused: ${notification.id}`);
+    }
+    notification.isPaused = true;
+    clearTimeout(notification._timer.id);
+    notification._timer.elapsedBeforePause += Date.now() - notification.startTime;
+  }
+  resume(notification) {
+    if (notification.timeout === void 0) {
+      throw new Error(`Cannot resume notification with no timeout: ${notification.id}`);
+    }
+    notification.isPaused = false;
+    notification.startTime = Date.now();
+    const remaining = notification.timeout - notification._timer.elapsedBeforePause;
+    clearTimeout(notification._timer.id);
+    notification._timer.id = setTimeout(() => {
+      notification.resolve(notification.cancellable);
+    }, remaining);
+  }
   static resolveToDefault(notification) {
     notification.resolve(notification.default);
   }
@@ -148,15 +177,4 @@ export class NotificationHandler {
   clear() {
     setReadOnly(this, "history", []);
   }
-  addNotificationListener(cb) {
-    this.listeners.push(cb);
-  }
-  removeNotificationListener(cb) {
-    const exists = this.listeners.indexOf(cb);
-    if (exists > -1) {
-      this.listeners.splice(exists, 1);
-    } else {
-      throw new Error(`Listener does not exist: ${cb.toString()}`);
-    }
-  }
 }

package/dist/runtime/helpers/index.d.ts

@@ -1,10 +1,10 @@
-export { base64ToImg } from "./base64ToImg.js.js";
-export { copy } from "./copy.js.js";
-export { createNoonUtcDate } from "./createNoonUtcDate.js.js";
-export { createRecorderHandler } from "./storybook.js.js";
-export { defaultTranslationFunction } from "./defaultTranslationFunction.js.js";
-export { getTimeZoneList } from "./getTimeZoneList.js.js";
-export { hasModifiers } from "./hasModifiers.js.js";
-export { NotificationHandler } from "./NotificationHandler.js.js";
-export { readFile } from "./readFile.js.js";
-export { ResizeObserverWrapper } from "./resizeObserverWrapper.js.js";
+export { base64ToImg } from "./base64ToImg.js";
+export { copy } from "./copy.js";
+export { createNoonUtcDate } from "./createNoonUtcDate.js";
+export { createRecorderHandler } from "./storybook.js";
+export { defaultTranslationFunction } from "./defaultTranslationFunction.js";
+export { getTimeZoneList } from "./getTimeZoneList.js";
+export { hasModifiers } from "./hasModifiers.js";
+export { NotificationHandler } from "./NotificationHandler.js";
+export { readFile } from "./readFile.js";
+export { ResizeObserverWrapper } from "./resizeObserverWrapper.js";

package/dist/runtime/helpers/resizeObserverWrapper.d.ts

@@ -1,4 +1,4 @@
-import type { ResizeCallback } from "../types/index.js.js";
+import type { ResizeCallback } from "../types/index.js";
 export declare class ResizeObserverWrapper {
     observers: WeakMap<Element, Set<ResizeCallback>>;
     observer: ResizeObserver;

package/dist/runtime/injectionKeys.d.ts

@@ -1,6 +1,6 @@
 import type { InjectionKey, Ref } from "vue";
-import type { DarkModeCommands, DarkModeState } from "./composables/useDarkMode.js.js";
-import type { TranslationFunction } from "./composables/useSetupI18n.js.js";
+import type { DarkModeCommands, DarkModeState } from "./composables/useDarkMode.js";
+import type { TranslationFunction } from "./composables/useSetupI18n.js";
 /** @deprecated */
 export declare const isDarkModeInjectionKey: InjectionKey<Ref<boolean>>;
 /** @deprecated */

package/dist/runtime/main.lib.d.ts

@@ -1,13 +1,13 @@
-export * from "./types/index.js.js";
-export * as components from "./components/index.js.js";
-export * as helpers from "./helpers/index.js.js";
-export * as composables from "./composables/index.js.js";
-export * as directives from "./directives/index.js.js";
-export { registerDirectives } from "./vue/registerDirectives.js.js";
-export { registerComponents } from "./vue/registerComponents.js.js";
-export { VueComponentsPlugin } from "./vue/VueComponentsPlugin.js.js";
-export * from "./injectionKeys.js.js";
-import type * as components from "./components/index.js.js";
+export * from "./types/index.js";
+export * as components from "./components/index.js";
+export * as helpers from "./helpers/index.js";
+export * as composables from "./composables/index.js";
+export * as directives from "./directives/index.js";
+export { registerDirectives } from "./vue/registerDirectives.js";
+export { registerComponents } from "./vue/registerComponents.js";
+export { VueComponentsPlugin } from "./vue/VueComponentsPlugin.js";
+export * from "./injectionKeys.js";
+import type * as components from "./components/index.js";
 type Components = typeof components;
 /**
  * To get global typings, in a global declaration file (e.g. global.d.ts) do:

package/dist/runtime/tailwind/index.d.ts

@@ -1 +1 @@
-export { themeConvertionOpts } from "./themeConvertionOpts.js.js";
+export { themeConvertionOpts } from "./themeConvertionOpts.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@witchcraft/ui",
-	"version": "0.3.1",
+	"version": "0.3.3",
 	"description": "Vue component library.",
 	"type": "module",
 	"main": "./dist/runtime/main.lib.js",
@@ -49,7 +49,7 @@
 		"failOnWarn": false
 	},
 	"scripts": {
-		"prepare": "husky && pnpm gen:theme && cd playground && pnpm i",
+		"prepare": "husky && pnpm gen:theme && cd playground && pnpm i --ignore-scripts",
 		"build": "nuxt-module-build prepare && nuxt-module-build build && nuxi generate playground",
 		"build:only": "nuxt-module-build build",
 		"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",

package/src/runtime/assets/animations.css

@@ -0,0 +1,75 @@
+@theme {
+	--animate-blinkInf: blink 1s linear-infinite;
+	@keyframes blink {
+		0% {
+			opacity: 0;
+		}
+
+		25% {
+			opacity: 1;
+		}
+
+		75% {
+			opacity: 1;
+		}
+
+		100% {
+			opacity: 0;
+		}
+	}
+
+	--animate-slideBgInf: slide-bg 10s linear-infinite;
+	@keyframes slide {
+		0% {
+			background-position:0%;
+		}
+		100% {
+			background-position: 100%;
+		}
+	}
+
+	--animate-hide: hide 500ms ease-in;
+	@keyframes hide {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+
+	--animate-slideIn: slideIn 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes slideIn {
+		from {
+			transform: translateX(100%);
+			opacity: 0;
+		}
+		to {
+			transform: translateX(0);
+			opacity: 1;
+		}
+	}
+
+	--animate-overlayShow: overlayShow 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes overlayShow {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	--animate-contentShow: contentShow 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes contentShow {
+		from {
+			opacity: 0;
+			transform: translate(0, -10%) scale(0.96);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+}
+

package/src/runtime/assets/base.css

@@ -34,33 +34,6 @@ animations can be calculated correctly. */
 	user-select: none;
 }
 
-/* Animations */
-@keyframes blink {
-	0% {
-		opacity: 0;
-	}
-
-	25% {
-		opacity: 1;
-	}
-
-	75% {
-		opacity: 1;
-	}
-
-	100% {
-		opacity: 0;
-	}
-}
-
-@keyframes slide {
-	0% {
-		background-position:0%;
-	}
-	100% {
-		background-position: 100%;
-	}
-}
 
 a {
 	@apply link-like;

package/src/runtime/assets/tailwind.css

@@ -1,5 +1,6 @@
 /* For storybook, not exported. */
 @import "tailwindcss" source("../../");
 @import "./theme.css";
+@import "./animations.css";
 @import "./base.css";
 @import "./utils.css";

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

@@ -23,7 +23,7 @@ export const Primary: Story = {
 		components,
 		setup: () => {
 			const color = ref({ r: 0, g: 0, b: 0/* , a: 0.5 */, ...(args.modelValue) })
-			delete args.modelValue
+			delete (args as any).modelValue
 			const handleChange = (e: any) => {
 				color.value = { ...e }
 			}

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

@@ -1,6 +1,8 @@
 <template>
 <div
-	:class="twMerge(`notification
+	v-if="notification"
+	:class="twMerge(`
+		notification
 		max-w-700px
 		bg-neutral-50
 		dark:bg-neutral-900
@@ -8,11 +10,15 @@
 		dark:text-bg
 		border
 		border-neutral-400
+		dark:border-neutral-700
 		rounded-sm
 		focus-outline
-		flex-flex-col
+		flex
+		flex-col
 		gap-2
-		p-2 m-2
+		p-1
+		text-sm
+		focus:border-accent-500
 	`,
 		($attrs as any).class)"
 	v-bind="{ ...$attrs, class: undefined }"
@@ -20,30 +26,59 @@
 	ref="notificationEl"
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
 >
-	<div class="notification--header flex-reverse flex justify-between">
-		<div
+	<slot
+		name="top"
+		:notification="notification"
+	/>
+	<div
+		class="
+			notification--header
+			flex-reverse
+			flex
+			justify-between
+			items-center
+		"
+	>
+		<slot
 			v-if="notification.title"
-			tabindex="0"
-			class="title
-				focus-outline flex
-				rounded-sm
-				font-bold
-			"
+			name="title"
+			v-bind="setSlotVar('title', {
+				title: notification.title,
+				class: `
+					notification--title
+					focus-outline
+					rounded-sm
+					font-bold
+				`,
+				tabindex: 0
+			})"
 		>
-			{{ notification.title }}
-		</div>
+			<div
+				v-bind="slotVars.title"
+			>
+				{{ notification.title }}
+			</div>
+		</slot>
 		<div class="notification--spacer flex-1"/>
 		<div class="actions flex">
 			<LibButton
 				:border="false"
-				class="notification--copy-button text-neutral-700"
+				class="
+					notification--title-button
+					notification--copy-button
+					text-neutral-700
+					dark:text-neutral-300
+				"
 				@click="copy(handler ? handler.stringify(notification) : JSON.stringify(notification))"
 			>
 				<icon><i-fa6-regular-copy/></icon>
 			</LibButton>
 			<lib-button
 				v-if="notification.cancellable"
-				class="notification--cancel-button"
+				class="
+					notification--title-button
+					notification--cancel-button
+				"
 				:border="false"
 				@click="NotificationHandler.dismiss(notification)"
 			>
@@ -51,12 +86,27 @@
 			</lib-button>
 		</div>
 	</div>
-	<div
-		class="notification--message whitespace-pre-wrap"
-		tabindex="0"
+	<slot
+		v-if="notification.message"
+		name="message"
+		v-bind="setSlotVar('message', {
+			class: `
+				notification--message
+				whitespace-pre-wrap
+				text-neutral-800
+				dark:text-neutral-200
+				mb-1
+			`,
+			message: notification.message,
+			tabindex: 0
+		})"
 	>
-		{{ notification.message }}
-	</div>
+		<div
+			v-bind="slotVars.message"
+		>
+			{{ notification.message }}
+		</div>
+	</slot>
 	<div class="notification--footer flex items-end justify-between">
 		<div
 			v-if="notification.code"
@@ -67,19 +117,23 @@
 		<div class="notification--footer-spacer flex-1 py-1"/>
 		<div
 			v-if="notification.options"
-			class="notification--options
-				flex flex-wrap justify-end
+			class="
+				notification--options
+				flex
+				flex-wrap
+				justify-end
 				gap-2
 			"
 		>
 			<lib-button
 				:label="option"
 				:class="twMerge(`
+					notification--button
 					notification--option-button
+					px-2
 				`,
-					buttonColors[i] == 'secondary' && 'p-0'
+					notification.default === option && `notification--default`
 				)"
-				:border="buttonColors[i] !== 'secondary'"
 				:color="buttonColors[i]"
 				v-for="option, i in notification.options"
 				:key="option"
@@ -91,11 +145,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, type HTMLAttributes, ref, useAttrs } from "vue"
+import { computed, type HTMLAttributes, onMounted, ref, useAttrs } from "vue"
 
 import IFa6RegularCopy from "~icons/fa6-regular/copy"
 import IFa6SolidXmark from "~icons/fa6-solid/xmark"
 
+import { useSlotVars } from "../../composables/useSlotVars.js"
 import { copy } from "../../helpers/copy.js"
 import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js"
 import { twMerge } from "../../utils/twMerge.js"
@@ -109,6 +164,9 @@ defineOptions({
 })
 const $attrs = useAttrs()
 
+const { setSlotVar, slotVars } = useSlotVars()
+
+
 const props = withDefaults(defineProps<Props>(), {
 	handler: undefined
 })
@@ -120,6 +178,9 @@ const getColor = (notification: NotificationEntry, option: string): "ok" | "prim
 const buttonColors = computed(() => props.notification.options.map((option: any /* what ??? */) => getColor(props.notification, option)))
 
 const notificationEl = ref<null | HTMLElement>(null)
+onMounted(() => {
+	notificationEl.value?.focus()
+})
 defineExpose({
 	focus: () => {
 		notificationEl.value?.focus()

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Meta, StoryObj } from "@storybook/vue3"
-import { reactive, ref } from "vue"
+import { ref } from "vue"
 
 import LibNotifications from "./LibNotifications.vue"
 
@@ -23,7 +23,7 @@ export const Primary: Story = {
 	render: args => ({
 		components,
 		setup() {
-			const handler = reactive(new NotificationHandler())
+			const handler = new NotificationHandler({})
 
 			let count = 0
 
@@ -76,7 +76,7 @@ export const Primary: Story = {
 				void handler.notify({
 					title: withTitle.value ? `Notification(${count})` : undefined,
 					message: `This is a notification. No action required.`,
-					timeout: disableTimeout.value ? false : 2000
+					timeout: disableTimeout.value ? false : 5000
 				})
 			}
 			return {
@@ -97,7 +97,7 @@ export const Primary: Story = {
 		backgrounds: { disable: true },
 		// <lib-debug>{{args.handler}}</lib-debug>
 		template: `
-	<lib-root :outline="args.outline">
+	<lib-root :outline="args.outline" :notification-handler="handler">
 		<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>