@witchcraft/ui 0.0.1 → 0.1.1

package/dist/runtime/components/LibMultiValues/LibMultiValues.vue

@@ -1,8 +1,10 @@
 <template>
 <div
-	v-if="$values && $values?.length > 0"
-	:class="twMerge(`
-		values
+	v-if="$modelValue && $modelValue?.length > 0"
+	:class="
+  twMerge(
+    `
+		multivalues
 		group
 		flex
 		flex-initial
@@ -12,18 +14,20 @@
 		overflow-x-scroll
 		scrollbar-hidden
 	`,
-		($ as any)?.class)
-	"
+    $.attrs?.class
+  )
+"
 	:data-disabled="disabled"
 	:data-read-only="readonly"
 	:aria-label="`Values for ${label}`"
 	:tabindex="disabled ? -1 : 0"
-	v-bind="{...$, class:undefined}"
+	v-bind="{ ...$.attrs, class: void 0 }"
 >
 	<div
 		:data-border="border"
-		:class="twMerge(`
-				value_wrapper
+		:class="twMerge(
+  `
+				multivalues--item
 				flex-basis-0
 				min-w-2
 				flex
@@ -35,31 +39,31 @@
 				px-1
 				text-xs
 				leading-none`,
-			!(disabled || readonly) && `
+  !(disabled || readonly) && `
 				group-focus:text-accent-500
 				focus:text-accent-500`,
-			border && `
+  border && `
 				rounded-sm
 				border-neutral-400
 				border
 				focus:border-accent-400
 			`,
-			border && (disabled || readonly) && `
+  border && (disabled || readonly) && `
 				border-neutral-200
 				focus:border-neutral-200
 				dark:border-neutral-800
 				dark:focus:border-neutral-800
 			`,
-			($.itemAttrs as any)?.class
-		)"
-		:tabindex="canEdit ? 0 : undefined"
-		v-for="(value) of $values"
+  $.itemAttrs?.class
+)"
+		:tabindex="canEdit ? 0 : void 0"
+		v-for="(value) of $modelValue"
 		:key="value"
 		@keydown.ctrl.c.prevent="copy(value.toString())"
 	>
-		<span class="value_label truncate">{{ value }}</span>
+		<span class="multivalues--label truncate">{{ value }}</span>
 		<lib-button
-			class="!p-0 text-sm !leading-none"
+			class="multivalues--remove-button !p-0 text-sm !leading-none"
 			:aria-label="`Remove ${value}`"
 			:border="false"
 			:disabled="disabled || readonly"
@@ -71,57 +75,37 @@
 </div>
 </template>
 
-<script setup lang="ts" generic="T extends string | number">
-import { removeIfIn } from "@alanscodelog/utils/removeIfIn.js"
-import { computed, type HTMLAttributes } from "vue"
-
-import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
-import { copy } from "../../helpers/copy.js"
-import { twMerge } from "../../utils/twMerge.js"
-import Icon from "../Icon/Icon.vue"
-import LibButton from "../LibButton/LibButton.vue"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults,type LabelProps, type MultiValueProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
-
-
+<script setup>
+import { removeIfIn } from "@alanscodelog/utils/removeIfIn.js";
+import { computed } from "vue";
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
+import { copy } from "../../helpers/copy.js";
+import { twMerge } from "../../utils/twMerge.js";
+import Icon from "../Icon/Icon.vue";
+import LibButton from "../LibButton/LibButton.vue";
+import { baseInteractivePropsDefaults } from "../shared/props.js";
 defineOptions({
-	name: "lib-multi-values",
-	inheritAttrs: false,
-})
-
-const $ = useDivideAttrs(["item"] as const)
-// eslint-disable-next-line no-use-before-define
-const props = withDefaults(defineProps<Props>(), {
-	...baseInteractivePropsDefaults
-})
-
-
-const canEdit = computed(() => !props.disabled && !props.readonly)
-const $values = defineModel<T[]>("values", { default: () => []})
-
-const removeVal = (value: T) => {
-	if (!canEdit.value) return
-	removeIfIn($values.value, value)
-}
+  name: "lib-multi-values",
+  inheritAttrs: false
+});
+const $ = useDivideAttrs(["item"]);
+const props = defineProps(/* @__PURE__ */ _mergeDefaults({
+  label: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  border: { type: Boolean, required: false },
+  unstyle: { type: Boolean, required: false }
+}, {
+  ...baseInteractivePropsDefaults
+}));
+const canEdit = computed(() => !props.disabled && !props.readonly);
+const $modelValue = defineModel({ type: Array, ...{ default: () => [] } });
+const removeVal = (value) => {
+  if (!canEdit.value) return;
+  removeIfIn($modelValue.value, value);
+};
 </script>
 
-<script lang="ts">
-type WrapperTypes = Partial<WrapperProps<"item",HTMLAttributes>>
-
-type RealProps =
-	& LabelProps
-	& BaseInteractiveProps
-	& MultiValueProps
-	& {
-		border?: boolean
-	}
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
-	/** @vue-ignore */
-	WrapperTypes,
-	RealProps
-{}
+<script>
 
 </script>
-

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

@@ -0,0 +1,29 @@
+import { type HTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js.js";
+type WrapperTypes = Partial<WrapperProps<"item", HTMLAttributes>>;
+type RealProps = LabelProps & BaseInteractiveProps & {
+    border?: boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, 
+/** @vue-ignore */
+WrapperTypes, RealProps {
+}
+declare const _default: <T extends string | number>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & (Props & {
+        modelValue?: T[];
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "update:modelValue", value: T[]) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -1,8 +1,9 @@
 <template>
-<div :class="twMerge(`notification
+<div :class="twMerge(
+  `notification
 		max-w-700px
 		bg-neutral-50
-		dark:bg-neutral-950
+		dark:bg-neutral-900
 		text-fg
 		dark:text-bg
 		border
@@ -13,13 +14,14 @@
 		gap-2
 		p-2 m-2
 	`,
-	($attrs as any).class)"
-	v-bind="{ ...$attrs, class: undefined }"
+  $attrs.class
+)"
+	v-bind="{ ...$attrs, class: void 0 }"
 	tabindex="0"
 	ref="notificationEl"
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
 >
-	<div class="header flex-reverse flex justify-between">
+	<div class="notification--header flex-reverse flex justify-between">
 		<div v-if="notification.title"
 			tabindex="0"
 			class="title
@@ -30,35 +32,45 @@
 		>
 			{{ notification.title }}
 		</div>
-		<div class="flex-1"/>
+		<div class="notification--spacer flex-1"/>
 		<div class="actions flex">
 			<LibButton :border="false"
-				class="copy text-neutral-700"
+				class="notification--copy-button 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)">
+			<lib-button
+				v-if="notification.cancellable"
+				class="notification--cancel-button"
+				:border="false"
+				@click="NotificationHandler.dismiss(notification)"
+			>
 				<icon><i-fa6-solid-xmark/></icon>
 			</lib-button>
 		</div>
 	</div>
-	<div class="message whitespace-pre-wrap" tabindex="0">
+	<div class="notification--message whitespace-pre-wrap" tabindex="0">
 		{{ notification.message }}
 	</div>
-	<div class="bottom flex items-end justify-between">
+	<div class="notification--footer 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 class="notification--footer-spacer flex-1 py-1"/>
 		<div v-if="notification.options"
-			class="options
+			class="notification--options
 				flex flex-wrap justify-end
 				gap-2
 			"
 		>
 			<lib-button :label="option"
-				:class="buttonColors[i] == 'secondary' ? 'p-0': undefined"
+				:class="twMerge(
+  `
+					notification--option-button
+				`,
+  buttonColors[i] == 'secondary' && 'p-0'
+)"
 				:border="buttonColors[i] !== 'secondary'"
 				:color="buttonColors[i]"
 				v-for="option, i in notification.options"
@@ -69,53 +81,33 @@
 	</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"
-
 
+<script setup>
+import { computed, ref, useAttrs } from "vue";
+import { copy } from "../../helpers/copy.js";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js";
+import { twMerge } from "../../utils/twMerge.js";
+import Icon from "../Icon/Icon.vue";
+import LibButton from "../LibButton/LibButton.vue";
 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)
+  name: "lib-notification",
+  inheritAttrs: false
+});
+const $attrs = useAttrs();
+const props = defineProps({
+  notification: { type: null, required: true },
+  handler: { type: Object, required: false, default: void 0 }
+});
+const getColor = (notification, option) => notification.default === option ? "primary" : notification.dangerous.includes(option) ? "danger" : "secondary";
+const buttonColors = computed(() => props.notification.options.map((option) => getColor(props.notification, option)));
+const notificationEl = ref(null);
 defineExpose({
-	focus: () => {
-		notificationEl.value?.focus()
-	},
-})
-
+  focus: () => {
+    notificationEl.value?.focus();
+  }
+});
 </script>
 
-<script lang="ts">
-type RealProps = {
-	notification: NotificationEntry
-	handler?: NotificationHandler
-}
+<script>
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<HTMLAttributes,"class"> & TailwindClassProp>,
-	RealProps
-{}
 </script>

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

@@ -0,0 +1,17 @@
+import { type HTMLAttributes } from "vue";
+import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js.js";
+import type { TailwindClassProp } from "../shared/props.js.js";
+type RealProps = {
+    notification: NotificationEntry;
+    handler?: NotificationHandler;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
+}
+declare const _default: import("vue").DefineComponent<Props, {
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    handler: NotificationHandler;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -2,15 +2,16 @@
 <TransitionGroup name="list"
 	tag="div"
 	:class="twMerge(`notifications
-			fixed
+			absolute
 			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 }"
+			flex flex-col
+		`, $attrs.class)"
+	v-bind="{ ...$attrs, class: void 0 }"
 >
 	<lib-notification class="pointer-events-auto"
 		:handler="handler"
@@ -21,22 +22,25 @@
 	/>
 </TransitionGroup>
 <Transition>
-	<div v-show="topNotifications.length > 0"/>
+	<div
+		v-show="topNotifications.length > 0"
+		:class="twMerge(`notifications--none`, $attrs.class)"
+	/>
 </Transition>
 <Transition>
 	<dialog v-show="topNotifications.length > 0"
 		:id="id"
-		class="modal
+		:class="twMerge(`notifications-modal
 			bg-transparent
 			p-0
 			backdrop:bg-black/50
 			backdrop:p-5
-		"
+		`, $attrs.class)"
 		ref="dialogEl"
-		@click.self.prevent="NotificationHandler.dismiss(topNotifications[0])"
+		@click.self.prevent="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
 	>
 		<form>
-			<lib-notification v-if="topNotifications.length > 0"
+			<lib-notification v-if="topNotifications.length > 0 && topNotifications[0]"
 				:handler="handler"
 				class="top-notification"
 				:notification="topNotifications[0]"
@@ -46,88 +50,72 @@
 	</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"
 
+<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,
-})
-
-
-// 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[]>([])
+  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
-	}
+  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 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)
-})
-
+  handler.removeNotificationListener(notificationListener);
+});
 </script>
-<script lang="ts">
 
-type RealProps =
-& LinkableByIdProps
-& {
-	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;