@indielayer/ui 1.18.1 → 2.1.0

package/lib/components/modal/theme/Modal.carbon.theme.js

@@ -1,29 +1,27 @@
-const a = {
-  classes: {
-    wrapper: "fixed z-40 inset-0 overflow-y-auto transition-all",
-    backdrop: ({ data: e }) => {
-      const t = ["fixed inset-0 bg-secondary-500 dark:bg-black transition-opacity"];
-      return e.visible ? t.push("ease-out duration-200 opacity-70 dark:opacity-70") : t.push("ease-in duration-100 opacity-0"), t;
-    },
-    modal: ({ props: e, data: t }) => {
-      const s = ["relative flex flex-col z-10 bg-secondary-200 dark:bg-secondary-900 shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
-      return t.visible ? s.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : s.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), e.size === "xs" ? s.push("sm:max-w-xs") : e.size === "sm" ? s.push("sm:max-w-sm") : e.size === "md" ? s.push("sm:max-w-lg") : e.size === "lg" ? s.push("sm:max-w-3xl") : e.size === "xl" ? s.push("sm:max-w-6xl") : e.size === "full" && s.push("h-full"), s;
-    },
-    closeIcon: "!absolute top-0 z-10 right-0",
-    header: "text-lg pl-4 pt-4 pr-12",
-    content: ({ props: e }) => {
-      const t = ["pb-8"];
-      return e.fluid || t.push("px-4"), t;
-    },
-    actions: ({ props: e, slots: t }) => {
-      const s = ["grid grid-flow-col gap-[1px]"];
-      return t["tertiary-action"] || t["cancel-action"] ? s.push("grid-cols-4") : s.push("grid-cols-2"), s;
-    },
-    label: "text-xs text-secondary-500 mb-1",
-    title: "text-xl mb-4",
-    description: "text-sm mb-4"
-  }
-}, l = a;
-export {
-  l as default
-};
+//#region src/components/modal/theme/Modal.carbon.theme.ts
+var e = { classes: {
+	wrapper: "fixed z-40 inset-0 overflow-y-auto transition-all",
+	backdrop: ({ data: e }) => {
+		let t = ["fixed inset-0 bg-secondary-500 dark:bg-black transition-opacity"];
+		return e.visible ? t.push("ease-out duration-200 opacity-70 dark:opacity-70") : t.push("ease-in duration-100 opacity-0"), t;
+	},
+	modal: ({ props: e, data: t }) => {
+		let n = ["relative flex flex-col z-10 bg-secondary-200 dark:bg-secondary-900 shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
+		return t.visible ? n.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : n.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), e.size === "xs" ? n.push("sm:max-w-xs") : e.size === "sm" ? n.push("sm:max-w-sm") : e.size === "md" ? n.push("sm:max-w-lg") : e.size === "lg" ? n.push("sm:max-w-3xl") : e.size === "xl" ? n.push("sm:max-w-6xl") : e.size === "full" && n.push("h-full"), n;
+	},
+	closeIcon: "!absolute top-0 z-10 right-0",
+	header: "text-lg pl-4 pt-4 pr-12",
+	content: ({ props: e }) => {
+		let t = ["pb-8"];
+		return e.fluid || t.push("px-4"), t;
+	},
+	actions: ({ props: e, slots: t }) => {
+		let n = ["grid grid-flow-col gap-[1px]"];
+		return t["tertiary-action"] || t["cancel-action"] ? n.push("grid-cols-4") : n.push("grid-cols-2"), n;
+	},
+	label: "text-xs text-secondary-500 mb-1",
+	title: "text-xl mb-4",
+	description: "text-sm mb-4"
+} };
+//#endregion
+export { e as default };

package/lib/components/notifications/Notifications.js

@@ -0,0 +1,5 @@
+import e from "./Notifications.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/notifications/Notifications.vue
+var t = e;
+//#endregion
+export { t as default };

package/lib/components/notifications/Notifications.vue.d.ts

@@ -5,35 +5,43 @@ declare const notificationsProps: {
         type: PropType<"left" | "right">;
         default: string;
         validator: (value: string) => boolean;
+        description: string;
     };
     position: {
         type: PropType<"top" | "bottom">;
         default: string;
         validator: (value: string) => boolean;
+        description: string;
     };
     timeout: {
         type: NumberConstructor;
         default: number;
+        description: string;
     };
     removable: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     pauseOnHover: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     injectKey: {
         type: (SymbolConstructor | StringConstructor)[];
         default: import("vue").InjectionKey<NotificationInjection>;
+        description: string;
     };
     offset: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
+        description: string;
     };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
 };
 declare const validators: {
@@ -79,35 +87,43 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: PropType<"left" | "right">;
         default: string;
         validator: (value: string) => boolean;
+        description: string;
     };
     position: {
         type: PropType<"top" | "bottom">;
         default: string;
         validator: (value: string) => boolean;
+        description: string;
     };
     timeout: {
         type: NumberConstructor;
         default: number;
+        description: string;
     };
     removable: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     pauseOnHover: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     injectKey: {
         type: (SymbolConstructor | StringConstructor)[];
         default: import("vue").InjectionKey<NotificationInjection>;
+        description: string;
     };
     offset: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
+        description: string;
     };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
 }>, {
     log: (notification: NotificationEvent | string) => void;
@@ -121,35 +137,43 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: PropType<"left" | "right">;
         default: string;
         validator: (value: string) => boolean;
+        description: string;
     };
     position: {
         type: PropType<"top" | "bottom">;
         default: string;
         validator: (value: string) => boolean;
+        description: string;
     };
     timeout: {
         type: NumberConstructor;
         default: number;
+        description: string;
     };
     removable: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     pauseOnHover: {
         type: BooleanConstructor;
         default: boolean;
+        description: string;
     };
     injectKey: {
         type: (SymbolConstructor | StringConstructor)[];
         default: import("vue").InjectionKey<NotificationInjection>;
+        description: string;
     };
     offset: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
+        description: string;
     };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
 }>> & Readonly<{}>, {
     removable: boolean;

package/lib/components/notifications/Notifications.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,261 @@
+import { injectNotificationKey as e } from "../../composables/keys.js";
+import { useColors as t } from "../../composables/useColors.js";
+import { useCSS as n } from "../../composables/useCSS.js";
+import { useTheme as r } from "../../composables/useTheme.js";
+import i from "../icon/Icon.js";
+import { closeIcon as a } from "../../common/icons.js";
+import o from "../spacer/Spacer.js";
+import { Fragment as s, Teleport as c, TransitionGroup as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, normalizeClass as _, normalizeStyle as v, openBlock as y, provide as b, ref as x, renderList as S, renderSlot as C, toDisplayString as w, unref as T, watch as E, withCtx as D } from "vue";
+//#region src/components/notifications/Notifications.vue?vue&type=script&setup=true&lang.ts
+var O = ["onMouseenter", "onMouseleave"], k = { class: "flex items-center flex-wrap" }, A = {
+	key: 0,
+	class: "font-medium mr-2"
+}, j = ["onClick"], M = {
+	...t.props("primary"),
+	align: {
+		type: String,
+		default: "right",
+		validator: (e) => N.align.includes(e),
+		description: "Horizontal placement of the toast stack (left or right)."
+	},
+	position: {
+		type: String,
+		default: "bottom",
+		validator: (e) => N.position.includes(e),
+		description: "Vertical placement of the toast stack (top or bottom)."
+	},
+	timeout: {
+		type: Number,
+		default: 3500,
+		description: "Default auto-dismiss delay in milliseconds. Set 0 to keep until removed."
+	},
+	removable: {
+		type: Boolean,
+		default: !0,
+		description: "Shows a dismiss control on each notification by default."
+	},
+	pauseOnHover: {
+		type: Boolean,
+		default: !0,
+		description: "Pauses the dismiss timer while the pointer hovers a notification."
+	},
+	injectKey: {
+		type: [Symbol, String],
+		default: e,
+		description: "Provide/inject key for notification helpers (log, info, success, warn, error)."
+	},
+	offset: {
+		type: [String, Number],
+		default: 0,
+		description: "Extra inset from the viewport edge in pixels."
+	}
+}, N = {
+	align: ["left", "right"],
+	position: ["bottom", "top"]
+}, P = /* @__PURE__ */ g({
+	name: "XNotifications",
+	validators: N,
+	docs: {
+		slots: { default: "App content that can inject notification helpers." },
+		methods: {
+			log: "Show a plain notification.",
+			info: "Show an info-styled notification.",
+			success: "Show a success-styled notification.",
+			warn: "Show a warning-styled notification.",
+			warning: "Alias of `warn`.",
+			error: "Show an error-styled notification."
+		}
+	},
+	props: M,
+	setup(e, { expose: g }) {
+		let M = e, N = x(M.align), P = x(M.position), F = x([]), I = x(null), L = n("notification"), R = t();
+		b(M.injectKey, {
+			log: z,
+			info: B,
+			warn: H,
+			error: U,
+			warning: H,
+			success: V
+		}), E(() => M.align, (e) => {
+			N.value = e;
+		}), E(() => M.position, (e) => {
+			P.value = e;
+		});
+		function z(e) {
+			let t = typeof e == "string", n = { message: t ? e : void 0 };
+			W(t ? n : {
+				...n,
+				...e
+			});
+		}
+		function B(e) {
+			let t = typeof e == "string", n = {
+				icon: "<path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\" />",
+				iconColor: "sky",
+				message: t ? e : void 0
+			};
+			W(t ? n : {
+				...n,
+				...e
+			});
+		}
+		function V(e) {
+			let t = typeof e == "string", n = {
+				icon: "<path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />",
+				iconColor: "success",
+				message: t ? e : void 0
+			};
+			W(t ? n : {
+				...n,
+				...e
+			});
+		}
+		function H(e) {
+			let t = typeof e == "string", n = {
+				icon: "<path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\" />",
+				iconColor: "warning",
+				message: t ? e : void 0
+			};
+			W(t ? n : {
+				...n,
+				...e
+			});
+		}
+		function U(e) {
+			let t = typeof e == "string", n = {
+				icon: "<path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\" />",
+				iconColor: "error",
+				message: t ? e : void 0
+			};
+			W(t ? n : {
+				...n,
+				...e
+			});
+		}
+		function W(e) {
+			let t = {
+				id: Date.now(),
+				iconColor: M.color,
+				timeout: M.timeout,
+				align: N.value,
+				position: P.value,
+				removable: M.removable,
+				...e
+			};
+			N.value = t.align, P.value = t.position;
+			let n = R.getPalette(t.iconColor), r = R.getPalette(t.action?.color || "primary"), i = L.variables({
+				icon: n[400],
+				action: r[400],
+				hover: { action: r[500] },
+				dark: {
+					icon: n[500],
+					action: r[500],
+					hover: { action: r[600] }
+				}
+			});
+			t.style = Object.keys(i).map((e) => `${e}: ${i[e]}`).join(";"), t.timeout && (t.timer = K(t, t.timeout), t.timerStart = Date.now()), F.value.push(t), setTimeout(() => {
+				I.value?.scrollTo({
+					top: 0,
+					behavior: "smooth"
+				});
+			}, 0);
+		}
+		function G(e) {
+			F.value = F.value.filter((t) => t.id !== e.id);
+		}
+		function K(e, t) {
+			return setTimeout(() => {
+				G(e);
+			}, t);
+		}
+		function q(e) {
+			M.pauseOnHover && e.timer && (clearTimeout(e.timer), e.timer = void 0);
+		}
+		function J(e) {
+			M.pauseOnHover && e.timeout && e.timerStart && (e.timer = K(e, Math.max(e.timeout - (Date.now() - e.timerStart), 1e3)));
+		}
+		let Y = u(() => `${M.offset}px`), { styles: X, classes: Z, className: Q } = r("Notifications", {}, M);
+		return g({
+			log: z,
+			info: B,
+			success: V,
+			warn: H,
+			warning: H,
+			error: U
+		}), (e, t) => (y(), p(s, null, [C(e.$slots, "default"), (y(), d(c, { to: "body" }, [m("div", {
+			ref_key: "listRef",
+			ref: I,
+			style: v(T(X)),
+			class: _([
+				T(Q),
+				T(Z).wrapper,
+				"pointer-events-none",
+				{
+					"left-0": N.value === "left",
+					"right-0": N.value === "right",
+					"top-0": P.value === "top",
+					"bottom-0": P.value === "bottom"
+				}
+			])
+		}, [h(l, {
+			tag: "ul",
+			style: v([P.value === "bottom" ? `padding-bottom: ${Y.value};` : `padding-top: ${Y.value};`]),
+			class: _([
+				T(Z).list,
+				"pointer-events-none",
+				{ "flex-col-reverse": P.value }
+			]),
+			"enter-active-class": "transition ease-out duration-200",
+			"leave-active-class": "transition ease-out duration-100",
+			"enter-from-class": "transform translate-y-2 opacity-0",
+			"enter-to-class": "transform translate-y-0 opacity-100",
+			"leave-from-class": "transform translate-y-0 opacity-100",
+			"leave-to-class": "transform translate-y-2 opacity-0",
+			"move-class": "ease-in-out duration-200"
+		}, {
+			default: D(() => [(y(!0), p(s, null, S(F.value, (e) => (y(), p("li", {
+				key: e.id,
+				class: _([
+					T(Z).item,
+					"pointer-events-auto",
+					{
+						"mb-2": P.value === "bottom",
+						"mt-2": P.value === "top"
+					}
+				]),
+				style: v(e.style),
+				onMouseenter: (t) => q(e),
+				onMouseleave: (t) => J(e)
+			}, [
+				e.icon ? (y(), d(i, {
+					key: 0,
+					filled: "",
+					icon: e.icon,
+					class: "mr-4 text-[color:var(--x-notification-icon)] dark:text-[color:var(--x-notification-dark-icon)]",
+					viewBox: "0 0 20 20"
+				}, null, 8, ["icon"])) : f("", !0),
+				m("div", k, [e.title ? (y(), p("span", A, w(e.title), 1)) : f("", !0), m("span", null, w(e.message), 1)]),
+				h(T(o)),
+				e.action ? (y(), p("button", {
+					key: 1,
+					type: "button",
+					class: "ml-3 font-medium cursor-pointer text-[color:var(--x-notification-action)] hover:text-[color:var(--x-notification-action-hover)] dark:text-[color:var(--x-notification-dark-action)] dark:hover:text-[color:var(--x-notification-dark-action-hover)]",
+					onClick: () => {
+						e.action?.onClick(), G(e);
+					}
+				}, w(e.action.label), 9, j)) : f("", !0),
+				e.removable ? (y(), d(i, {
+					key: 2,
+					icon: T(a),
+					class: "text-secondary-400 hover:text-secondary-500 ml-3 cursor-pointer",
+					onClick: () => {
+						G(e);
+					}
+				}, null, 8, ["icon", "onClick"])) : f("", !0)
+			], 46, O))), 128))]),
+			_: 1
+		}, 8, ["style", "class"])], 6)]))], 64));
+	}
+});
+//#endregion
+export { P as default };

package/lib/components/notifications/theme/Notifications.base.theme.js

@@ -1,10 +1,8 @@
-const e = {
-  classes: {
-    wrapper: "fixed z-50 w-full sm:w-auto max-h-screen",
-    list: "flex flex-col items-end w-full sm:w-[520px] px-4",
-    item: "w-full flex items-center rounded-md px-4 py-3 bg-secondary-800 dark:bg-secondary-50 text-white dark:text-secondary-900 border border-secondary-700 dark:border-secondary-100"
-  }
-}, r = e;
-export {
-  r as default
-};
+//#region src/components/notifications/theme/Notifications.base.theme.ts
+var e = { classes: {
+	wrapper: "fixed z-50 w-full sm:w-auto max-h-screen",
+	list: "flex flex-col items-end w-full sm:w-[520px] px-4",
+	item: "w-full flex items-center rounded-md px-4 py-3 bg-secondary-800 dark:bg-secondary-50 text-white dark:text-secondary-900 border border-secondary-700 dark:border-secondary-100"
+} };
+//#endregion
+export { e as default };

package/lib/components/notifications/theme/Notifications.carbon.theme.js

@@ -1,10 +1,8 @@
-const e = {
-  classes: {
-    wrapper: "fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen",
-    list: "flex flex-col items-end w-full sm:w-[520px] px-4",
-    item: () => ["w-full flex items-center px-4 py-3 bg-secondary-800 dark:bg-secondary-50 text-white dark:text-secondary-900 border-l-2 border-[color:var(--x-notification-icon)]"]
-  }
-}, t = e;
-export {
-  t as default
-};
+//#region src/components/notifications/theme/Notifications.carbon.theme.ts
+var e = { classes: {
+	wrapper: "fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen",
+	list: "flex flex-col items-end w-full sm:w-[520px] px-4",
+	item: () => ["w-full flex items-center px-4 py-3 bg-secondary-800 dark:bg-secondary-50 text-white dark:text-secondary-900 border-l-2 border-[color:var(--x-notification-icon)]"]
+} };
+//#endregion
+export { e as default };

package/lib/components/pagination/Pagination.js

@@ -0,0 +1,5 @@
+import e from "./Pagination.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/pagination/Pagination.vue
+var t = e;
+//#endregion
+export { t as default };

package/lib/components/pagination/Pagination.vue.d.ts

@@ -2,23 +2,27 @@ import { type PropType, type ExtractPublicPropTypes } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const paginationVariant: readonly ["simple", "quick", "dots"];
 declare const paginationProps: {
-    links: BooleanConstructor;
+    links: import("vue").Prop<boolean | undefined>;
     totalPages: {
         type: NumberConstructor;
         default: number;
+        description: string;
     };
     modelValue: {
         type: NumberConstructor;
         default: number;
+        description: string;
     };
     variant: {
         type: PropType<"dots" | "simple" | "quick">;
         default: string;
+        description: string;
     };
     size: {
         readonly type: PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 };
 export type PaginationVariant = typeof paginationVariant[number];
@@ -27,49 +31,56 @@ type InternalClasses = 'wrapper' | 'dots';
 export interface PaginationTheme extends ThemeComponent<PaginationProps, InternalClasses> {
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    links: BooleanConstructor;
+    links: import("vue").Prop<boolean | undefined>;
     totalPages: {
         type: NumberConstructor;
         default: number;
+        description: string;
     };
     modelValue: {
         type: NumberConstructor;
         default: number;
+        description: string;
     };
     variant: {
         type: PropType<"dots" | "simple" | "quick">;
         default: string;
+        description: string;
     };
     size: {
         readonly type: PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    links: BooleanConstructor;
+    links: import("vue").Prop<boolean | undefined>;
     totalPages: {
         type: NumberConstructor;
         default: number;
+        description: string;
     };
     modelValue: {
         type: NumberConstructor;
         default: number;
+        description: string;
     };
     variant: {
         type: PropType<"dots" | "simple" | "quick">;
         default: string;
+        description: string;
     };
     size: {
         readonly type: PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     size: import("../../composables/useCommon").Size;
     modelValue: number;
-    links: boolean;
     totalPages: number;
     variant: "dots" | "simple" | "quick";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;