@application-kit/ui 0.0.0-stage → 0.0.0

package/dist/components/tooltip/Tooltip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,47 @@
+import { createElementBlock, defineComponent, openBlock, renderSlot, unref, withDirectives } from "vue";
+import VendorTooltip from "openvue/tooltip";
+//#region src/components/tooltip/Tooltip.vue?vue&type=script&setup=true&lang.ts
+var Tooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "Tooltip",
+	props: {
+		autoHide: {
+			default: false,
+			type: Boolean
+		},
+		position: {
+			default: "top",
+			type: String
+		},
+		showDelay: {
+			default: 0,
+			type: Number
+		},
+		value: {
+			required: true,
+			type: String
+		}
+	},
+	setup(__props) {
+		const vTooltip = VendorTooltip;
+		const { autoHide, position, showDelay, value } = __props;
+		const tooltipPosition = { position };
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("span", null, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])), [[
+				unref(vTooltip),
+				{
+					"escape": true,
+					autoHide: unref(autoHide),
+					showDelay: unref(showDelay),
+					value: unref(value),
+					"pt": { "text": {
+						"class": ["tooltip__text"],
+						[_ctx.$options["__scopeId"]]: ""
+					} }
+				},
+				tooltipPosition
+			]]);
+		};
+	}
+});
+//#endregion
+export { Tooltip_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/tooltip/dismiss-tooltips.d.ts

@@ -0,0 +1,2 @@
+export declare const TOOLTIP_ROOT_SELECTOR = ".p-tooltip";
+export declare const dismissTooltips: () => void;

package/dist/components/tooltip/dismiss-tooltips.js

@@ -0,0 +1,13 @@
+//#region src/components/tooltip/dismiss-tooltips.ts
+var TOOLTIP_ROOT_SELECTOR = ".p-tooltip";
+/**
+* Removes the tooltips left on screen by elements that are no longer in the markup.
+* @example
+* dismissTooltips() // after the menu switched to a compact mode
+*/
+var dismissTooltips = () => {
+	const tooltips = globalThis.document.querySelectorAll(TOOLTIP_ROOT_SELECTOR);
+	for (const tooltip of tooltips) tooltip.remove();
+};
+//#endregion
+export { TOOLTIP_ROOT_SELECTOR, dismissTooltips };

package/dist/components/tooltip/install-tooltip-directive.d.ts

@@ -0,0 +1,6 @@
+import type { DirectiveBinding, ObjectDirective, App as VueApp } from 'vue';
+import type { TooltipBindingValue } from './tooltip-options.interface';
+export declare const toVendorTooltipBinding: (binding: DirectiveBinding<TooltipBindingValue>) => DirectiveBinding;
+export type TooltipDirective = Required<Pick<ObjectDirective<HTMLElement, TooltipBindingValue>, 'beforeMount' | 'beforeUnmount' | 'beforeUpdate' | 'created' | 'mounted' | 'unmounted' | 'updated'>>;
+export declare const createTooltipDirective: (vendor: ObjectDirective) => TooltipDirective;
+export declare const installTooltipDirective: (app: VueApp) => void;

package/dist/components/tooltip/install-tooltip-directive.js

@@ -0,0 +1,80 @@
+import VendorTooltip from "openvue/tooltip";
+//#region src/components/tooltip/install-tooltip-directive.ts
+/**
+* Имя собственной директивы: в шаблонах — `v-ui-tooltip`. Вендорское имя `tooltip` наружу не
+* торчит намеренно — смена вендора не должна переписывать call-site'ы (story 3-7).
+*/
+var TOOLTIP_DIRECTIVE_NAME = "uiTooltip";
+var DEFAULT_POSITION = "top";
+/**
+* Translates the own tooltip options into the vendor dictionary — the only place that knows it.
+* The position goes into `arg` (the vendor folds it into its own modifiers), the trigger into
+* `modifiers`, the text and the delays into the value. `escape: true` is set here and not by a
+* call-site: a tooltip shows user data (a menu label, a profile name), and HTML inside it would
+* be rendered as markup.
+* @param binding - Directive binding carrying the own options.
+* @returns Binding in the shape the vendor directive expects.
+* @example
+* toVendorTooltipBinding(binding) // { arg: { position: 'top' }, value: { escape: true, … } }
+*/
+var toVendorTooltipBinding = (binding) => {
+	const options = typeof binding.value === "string" || binding.value === null ? { value: binding.value } : binding.value;
+	return {
+		...binding,
+		arg: { position: options.position ?? DEFAULT_POSITION },
+		modifiers: options.trigger === "focus" ? { focus: true } : {},
+		value: {
+			escape: true,
+			...options.hideDelay !== void 0 && { hideDelay: options.hideDelay },
+			...options.showDelay !== void 0 && { showDelay: options.showDelay },
+			value: options.value
+		}
+	};
+};
+/**
+* Builds the own directive that delegates every hook to the given vendor directive.
+* @param vendor - Vendor tooltip directive to delegate to.
+* @returns Own directive with the own options contract.
+* @example
+* createTooltipDirective(VendorTooltip)
+*/
+var createTooltipDirective = (vendor) => ({
+	beforeMount: (element, binding, vnode, previousVnode) => {
+		vendor.beforeMount?.(element, toVendorTooltipBinding(binding), vnode, previousVnode);
+	},
+	beforeUnmount: (element, binding, vnode, previousVnode) => {
+		vendor.beforeUnmount?.(element, toVendorTooltipBinding(binding), vnode, previousVnode);
+	},
+	beforeUpdate: (element, binding, vnode, previousVnode) => {
+		vendor.beforeUpdate?.(element, toVendorTooltipBinding(binding), vnode, previousVnode);
+	},
+	created: (element, binding, vnode, previousVnode) => {
+		vendor.created?.(element, toVendorTooltipBinding(binding), vnode, previousVnode);
+	},
+	mounted: (element, binding, vnode, previousVnode) => {
+		vendor.mounted?.(element, toVendorTooltipBinding(binding), vnode, previousVnode);
+	},
+	unmounted: (element, binding, vnode, previousVnode) => {
+		vendor.unmounted?.(element, toVendorTooltipBinding(binding), vnode, previousVnode);
+	},
+	updated: (element, binding, vnode, previousVnode) => {
+		vendor.updated?.(element, toVendorTooltipBinding(binding), vnode, previousVnode);
+	}
+});
+var uiTooltipDirective = createTooltipDirective(VendorTooltip);
+/**
+* Runtime dependency of the `v-ui-tooltip` call-sites: the vendor directive is wrapped and
+* registered here, inside the shared layer, instead of the app-level plugin — otherwise
+* `openvue/tooltip` leaks into `src/modules`.
+* The directive stays alongside the `Tooltip.vue` component on purpose: the component wraps its
+* content into an extra `span`, which is not an option for elements that are themselves flex or
+* grid items (menu rows, profile button), so both forms of the same facade are kept.
+* @param app - Vue.js app (module VendorPlugin or the test harness).
+* @example
+* installTooltipDirective(vue)
+*/
+var installTooltipDirective = (app) => {
+	app.directive(TOOLTIP_DIRECTIVE_NAME, uiTooltipDirective);
+};
+//#endregion
+export { createTooltipDirective, installTooltipDirective, toVendorTooltipBinding };

package/dist/components/tooltip/tooltip-options.interface.d.ts

@@ -0,0 +1,10 @@
+export type TooltipBindingValue = null | string | TooltipOptionsInterface;
+export interface TooltipOptionsInterface {
+    hideDelay?: number;
+    position?: TooltipPosition;
+    showDelay?: number;
+    trigger?: TooltipTrigger;
+    value: null | string;
+}
+export type TooltipPosition = 'bottom' | 'left' | 'right' | 'top';
+export type TooltipTrigger = 'focus' | 'hover';

package/dist/components/truncated-code/TruncatedCode.js

@@ -0,0 +1,5 @@
+import TruncatedCode_vue_vue_type_script_setup_true_lang_default from "./TruncatedCode.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/truncated-code/TruncatedCode.vue
+var TruncatedCode_default = TruncatedCode_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TruncatedCode_default as default };

package/dist/components/truncated-code/TruncatedCode.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    length?: number;
+    value: string;
+};
+declare const __VLS_export: import("*.vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    length: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/truncated-code/TruncatedCode.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,23 @@
+import Tooltip_default from "../tooltip/Tooltip.js";
+import { truncateStringInTheMiddle } from "../../utils/truncate-string.js";
+import { computed, createBlock, createElementVNode, defineComponent, openBlock, toDisplayString, withCtx } from "vue";
+//#region src/components/truncated-code/TruncatedCode.vue?vue&type=script&setup=true&lang.ts
+var TruncatedCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "TruncatedCode",
+	props: {
+		length: { default: 24 },
+		value: {}
+	},
+	setup(__props) {
+		const properties = __props;
+		const short = computed(() => truncateStringInTheMiddle(properties.value, properties.length));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Tooltip_default, { value: __props.value }, {
+				default: withCtx(() => [createElementVNode("code", null, toDisplayString(short.value), 1)]),
+				_: 1
+			}, 8, ["value"]);
+		};
+	}
+});
+//#endregion
+export { TruncatedCode_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/ui-icon/UiIcon.js

@@ -0,0 +1,5 @@
+import UiIcon_vue_vue_type_script_setup_true_lang_default from "./UiIcon.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/ui-icon/UiIcon.vue
+var UiIcon_default = UiIcon_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { UiIcon_default as default };

package/dist/components/ui-icon/UiIcon.vue.d.ts

@@ -0,0 +1,13 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        required: true;
+        type: import("vue").PropType<"times">;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        required: true;
+        type: import("vue").PropType<"times">;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/ui-icon/UiIcon.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,22 @@
+import { ICON_PROP_TYPE } from "../../icons/ui-icon-registry.js";
+import { useUiIconClass } from "../../plugin/ui-injection.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
+//#region src/components/ui-icon/UiIcon.vue?vue&type=script&setup=true&lang.ts
+var UiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "UiIcon",
+	props: { name: {
+		required: true,
+		type: ICON_PROP_TYPE
+	} },
+	setup(__props) {
+		const iconClass = useUiIconClass();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("i", {
+				class: normalizeClass(unref(iconClass)(__props.name)),
+				"aria-hidden": "true"
+			}, null, 2);
+		};
+	}
+});
+//#endregion
+export { UiIcon_vue_vue_type_script_setup_true_lang_default as default };

package/dist/composables/use-app-toast.d.ts

@@ -0,0 +1,12 @@
+import type { Severity } from '../severity';
+export interface AppToastInterface {
+    error(summary: string, detail?: string, options?: AppToastOptionsInterface): void;
+    info(summary: string, detail?: string, options?: AppToastOptionsInterface): void;
+    notify(severity: Severity, summary: string, detail?: string, options?: AppToastOptionsInterface): void;
+    success(summary: string, detail?: string, options?: AppToastOptionsInterface): void;
+    warn(summary: string, detail?: string, options?: AppToastOptionsInterface): void;
+}
+export interface AppToastOptionsInterface {
+    life?: number;
+}
+export declare const useAppToast: () => AppToastInterface;

package/dist/composables/use-app-toast.js

@@ -0,0 +1,50 @@
+import { SEVERITY_TO_VENDOR } from "../components/toast/severity-to-vendor.js";
+import { useToast } from "openvue/usetoast";
+//#region src/composables/use-app-toast.ts
+var DEFAULT_TOAST_LIFE_MS = 3e3;
+var ALERT_TOAST_LIFE_MS = 5e3;
+var TOAST_LIFE_BY_SEVERITY = {
+	contrast: DEFAULT_TOAST_LIFE_MS,
+	danger: ALERT_TOAST_LIFE_MS,
+	info: DEFAULT_TOAST_LIFE_MS,
+	secondary: DEFAULT_TOAST_LIFE_MS,
+	success: DEFAULT_TOAST_LIFE_MS,
+	warn: ALERT_TOAST_LIFE_MS
+};
+/**
+* Toast facade: the domain calls `success/error/info/warn` with the shared `Severity`,
+* while the vendor's imperative `toast.add({ severity, summary, detail, life })` stays inside.
+* Must be called in setup context (resolves the vendor `useToast()` internally).
+* @returns Domain toast contract of the shared layer.
+* @example
+* const toast = useAppToast()
+* toast.error('Action failed', message)
+*/
+var useAppToast = () => {
+	const toast = useToast();
+	const notify = (severity, summary, detail, options) => {
+		toast.add({
+			detail,
+			life: options?.life ?? TOAST_LIFE_BY_SEVERITY[severity],
+			severity: SEVERITY_TO_VENDOR[severity],
+			summary
+		});
+	};
+	return {
+		error: (summary, detail, options) => {
+			notify("danger", summary, detail, options);
+		},
+		info: (summary, detail, options) => {
+			notify("info", summary, detail, options);
+		},
+		notify,
+		success: (summary, detail, options) => {
+			notify("success", summary, detail, options);
+		},
+		warn: (summary, detail, options) => {
+			notify("warn", summary, detail, options);
+		}
+	};
+};
+//#endregion
+export { useAppToast };

package/dist/composables/use-confirm.d.ts

@@ -0,0 +1,12 @@
+import type { IconName } from '../icons/ui-icon-registry';
+import type { Severity } from '../severity';
+export interface ConfirmOptionsInterface {
+    acceptLabel?: string;
+    acceptSeverity?: Severity;
+    header: string;
+    icon?: IconName | undefined;
+    message: string;
+    rejectLabel?: string;
+}
+export type ConfirmType = (options: ConfirmOptionsInterface) => Promise<boolean>;
+export declare const useConfirm: () => ConfirmType;

package/dist/composables/use-confirm.js

@@ -0,0 +1,49 @@
+import { useUiIconClass } from "../plugin/ui-injection.js";
+import { SEVERITY_TO_VENDOR } from "../components/button/severity-to-vendor.js";
+import { useConfirm } from "openvue/useconfirm";
+//#region src/composables/use-confirm.ts
+var DEFAULT_ACCEPT_LABEL = "Confirm";
+var DEFAULT_REJECT_LABEL = "Cancel";
+var REJECT_PROPS = {
+	severity: "secondary",
+	text: true
+};
+/**
+* Imperative confirmation of a critical action with a Promise contract instead of vendor callbacks.
+* The dialog itself is rendered by `<ConfirmHost />`, mounted next to the card's own operations.
+* Must be called in setup context (resolves the vendor confirmation service internally).
+* @returns Ask function: `true` when confirmed, `false` when rejected or dismissed.
+* @example
+* const confirm = useConfirm()
+* if (await confirm({ header: 'Deactivate user?', message: 'Active sessions will be revoked.' })) { … }
+*/
+var useConfirm$1 = () => {
+	const vendorConfirm = useConfirm();
+	const iconClass = useUiIconClass();
+	return async (options) => new Promise((resolve) => {
+		vendorConfirm.require({
+			accept: () => {
+				resolve(true);
+			},
+			acceptProps: {
+				label: options.acceptLabel ?? DEFAULT_ACCEPT_LABEL,
+				severity: options.acceptSeverity === void 0 ? void 0 : SEVERITY_TO_VENDOR[options.acceptSeverity]
+			},
+			header: options.header,
+			icon: options.icon === void 0 ? void 0 : iconClass(options.icon),
+			message: options.message,
+			onHide: () => {
+				resolve(false);
+			},
+			reject: () => {
+				resolve(false);
+			},
+			rejectProps: {
+				...REJECT_PROPS,
+				label: options.rejectLabel ?? DEFAULT_REJECT_LABEL
+			}
+		});
+	});
+};
+//#endregion
+export { useConfirm$1 as useConfirm };

package/dist/composables/use-copy-to-clipboard.d.ts

@@ -0,0 +1,2 @@
+export type CopyToClipboardType = (value: string, detail: string) => Promise<void>;
+export declare const useCopyToClipboard: () => CopyToClipboardType;

package/dist/composables/use-copy-to-clipboard.js

@@ -0,0 +1,23 @@
+import { useAppToast } from "./use-app-toast.js";
+//#region src/composables/use-copy-to-clipboard.ts
+var COPIED_TOAST_LIFE_MS = 2e3;
+/**
+* Shared copy-to-clipboard action with the "Copied" toast confirmation — the guard+write+toast
+* shape shared by every copy button in the UI.
+* Must be called in setup context (resolves `useAppToast()` internally).
+* @returns Copy action: writes the value to the clipboard and confirms with an info toast.
+* @example
+* const copy = useCopyToClipboard()
+* await copy(props.value, 'Value copied to clipboard')
+*/
+var useCopyToClipboard = () => {
+	const toast = useAppToast();
+	return async (value, detail) => {
+		const host = globalThis.navigator;
+		if (host.clipboard === void 0) return;
+		await host.clipboard.writeText(value);
+		toast.info("Copied", detail, { life: COPIED_TOAST_LIFE_MS });
+	};
+};
+//#endregion
+export { useCopyToClipboard };

package/dist/icons/ui-icon-registry.d.ts

@@ -0,0 +1,6 @@
+import type { PropType } from 'vue';
+export type IconName = keyof UiIconRegistryInterface | UiBuiltinIconName;
+export type UiBuiltinIconName = 'times';
+export interface UiIconRegistryInterface {
+}
+export declare const ICON_PROP_TYPE: PropType<IconName>;

package/dist/icons/ui-icon-registry.js

@@ -0,0 +1,4 @@
+//#region src/icons/ui-icon-registry.ts
+var ICON_PROP_TYPE = String;
+//#endregion
+export { ICON_PROP_TYPE };

package/dist/index.d.ts

@@ -0,0 +1,66 @@
+export { default as Avatar } from './components/avatar/Avatar.vue';
+export { default as Button } from './components/button/Button.vue';
+export { default as Card } from './components/card/Card.vue';
+export { default as ConfirmHost } from './components/confirm/ConfirmHost.vue';
+export { default as DateRangeFilter } from './components/date-range-filter/DateRangeFilter.vue';
+export { default as Dialog } from './components/dialog/Dialog.vue';
+export { default as Drawer } from './components/drawer/Drawer.vue';
+export { default as ErrorPage } from './components/error-page/Error.vue';
+export { default as GradientBackground } from './components/error-page/GradientBackground.vue';
+export { default as Checkbox } from './components/form/Checkbox.vue';
+export { default as DateField } from './components/form/DateField.vue';
+export { default as DateRangeField } from './components/form/DateRangeField.vue';
+export { default as InputNumber } from './components/form/InputNumber.vue';
+export { default as InputOtp } from './components/form/InputOtp.vue';
+export { default as InputText } from './components/form/InputText.vue';
+export { default as MultiSelect } from './components/form/MultiSelect.vue';
+export { default as RadioButton } from './components/form/RadioButton.vue';
+export { default as Select } from './components/form/Select.vue';
+export { default as SelectButton } from './components/form/SelectButton.vue';
+export { default as Textarea } from './components/form/Textarea.vue';
+export { default as ToggleSwitch } from './components/form/ToggleSwitch.vue';
+export { default as Icon } from './components/icon/Icon.vue';
+export { default as IconCell } from './components/icon-cell/IconCell.vue';
+export { default as EmptyLayout } from './components/layouts/EmptyLayout.vue';
+export { default as Message } from './components/message/Message.vue';
+export { default as OverlayBadge } from './components/overlay-badge/OverlayBadge.vue';
+export { default as Skeleton } from './components/skeleton/Skeleton.vue';
+export { default as DataTable } from './components/table/DataTable.vue';
+export { default as InfiniteDataTable } from './components/table/InfiniteDataTable.vue';
+export { default as SelectColumnFilter } from './components/table/SelectColumnFilter.vue';
+export { default as StaticTable } from './components/table/StaticTable.vue';
+export { default as TextColumn } from './components/table/TextColumn.vue';
+export { default as Tabs } from './components/tabs/Tabs.vue';
+export { default as Tag } from './components/tag/Tag.vue';
+export { default as TimeLag } from './components/time-lag/TimeLag.vue';
+export { default as Timestamp } from './components/timestamp/Timestamp.vue';
+export { default as ToastHost } from './components/toast/ToastHost.vue';
+export { default as Tooltip } from './components/tooltip/Tooltip.vue';
+export { default as TruncatedCode } from './components/truncated-code/TruncatedCode.vue';
+export { default as UiIcon } from './components/ui-icon/UiIcon.vue';
+export * from './components/confirm/install-confirmation-service';
+export * from './components/form/select-button-option.interface';
+export * from './components/table/column-filters-interface';
+export * from './components/table/column-schema-interface';
+export * from './components/table/select-column-filter-option.interface';
+export * from './components/table/static-table-column';
+export * from './components/tabs/tab-item.interface';
+export * from './components/toast/install-toast-service';
+export * from './components/tooltip/dismiss-tooltips';
+export * from './components/tooltip/install-tooltip-directive';
+export * from './components/tooltip/tooltip-options.interface';
+export * from './composables/use-app-toast';
+export * from './composables/use-confirm';
+export * from './composables/use-copy-to-clipboard';
+export * from './layout/layout';
+export * from './plugin/ui-injection';
+export * from './plugin/ui-vendor-plugin';
+export * from './store/listing/cursor-listing';
+export * from './store/listing/infinite-listing-store.interface';
+export * from './store/listing/infinite-listing-store';
+export * from './store/listing/listing-store.interface';
+export * from './store/listing/listing-store';
+export * from './icons/ui-icon-registry';
+export * from './messages/ui-messages';
+export * from './severity';
+export * from './accent-color';

package/dist/index.js

@@ -0,0 +1,56 @@
+import { ICON_PROP_TYPE } from "./icons/ui-icon-registry.js";
+import { UI_DESCRIBE_REQUEST_ERROR, UI_ICON_CLASS, UI_MESSAGES, useUiDescribeRequestError, useUiIconClass, useUiMessages } from "./plugin/ui-injection.js";
+import Avatar_default from "./components/avatar/Avatar.js";
+import Button_default from "./components/button/Button.js";
+import Card_default from "./components/card/Card.js";
+import ConfirmHost_default from "./components/confirm/ConfirmHost.js";
+import DateRangeField_default from "./components/form/DateRangeField.js";
+import DateRangeFilter_default from "./components/date-range-filter/DateRangeFilter.js";
+import Dialog_default from "./components/dialog/Dialog.js";
+import Drawer_default from "./components/drawer/Drawer.js";
+import { useAppToast } from "./composables/use-app-toast.js";
+import { useCopyToClipboard } from "./composables/use-copy-to-clipboard.js";
+import GradientBackground_default from "./components/error-page/GradientBackground.js";
+import Error_default from "./components/error-page/Error.js";
+import Checkbox_default from "./components/form/Checkbox.js";
+import DateField_default from "./components/form/DateField.js";
+import InputNumber_default from "./components/form/InputNumber.js";
+import InputOtp_default from "./components/form/InputOtp.js";
+import InputText_default from "./components/form/InputText.js";
+import MultiSelect_default from "./components/form/MultiSelect.js";
+import RadioButton_default from "./components/form/RadioButton.js";
+import Select_default from "./components/form/Select.js";
+import SelectButton_default from "./components/form/SelectButton.js";
+import Textarea_default from "./components/form/Textarea.js";
+import ToggleSwitch_default from "./components/form/ToggleSwitch.js";
+import Icon_default from "./components/icon/Icon.js";
+import Tooltip_default from "./components/tooltip/Tooltip.js";
+import IconCell_default from "./components/icon-cell/IconCell.js";
+import EmptyLayout_default from "./components/layouts/EmptyLayout.js";
+import Message_default from "./components/message/Message.js";
+import OverlayBadge_default from "./components/overlay-badge/OverlayBadge.js";
+import Skeleton_default from "./components/skeleton/Skeleton.js";
+import { DEFAULT_LISTING_LIMIT, createCursorListing } from "./store/listing/cursor-listing.js";
+import DataTable_default from "./components/table/DataTable.js";
+import InfiniteDataTable_default from "./components/table/InfiniteDataTable.js";
+import Tag_default from "./components/tag/Tag.js";
+import SelectColumnFilter_default from "./components/table/SelectColumnFilter.js";
+import StaticTable_default from "./components/table/StaticTable.js";
+import TextColumn_default from "./components/table/TextColumn.js";
+import Tabs_default from "./components/tabs/Tabs.js";
+import TimeLag_default from "./components/time-lag/TimeLag.js";
+import Timestamp_default from "./components/timestamp/Timestamp.js";
+import ToastHost_default from "./components/toast/ToastHost.js";
+import TruncatedCode_default from "./components/truncated-code/TruncatedCode.js";
+import UiIcon_default from "./components/ui-icon/UiIcon.js";
+import { installConfirmationService } from "./components/confirm/install-confirmation-service.js";
+import { installToastService } from "./components/toast/install-toast-service.js";
+import { TOOLTIP_ROOT_SELECTOR, dismissTooltips } from "./components/tooltip/dismiss-tooltips.js";
+import { createTooltipDirective, installTooltipDirective, toVendorTooltipBinding } from "./components/tooltip/install-tooltip-directive.js";
+import { useConfirm } from "./composables/use-confirm.js";
+import { MENU_MODES, MENU_PROFILE_POSITIONS, MOBILE_MAX_WIDTH_PX, useLayout } from "./layout/layout.js";
+import { UiVendorPlugin } from "./plugin/ui-vendor-plugin.js";
+import { createInfiniteListing } from "./store/listing/infinite-listing-store.js";
+import { useListingStore } from "./store/listing/listing-store.js";
+import { ACCENT_COLORS } from "./accent-color.js";
+export { ACCENT_COLORS, Avatar_default as Avatar, Button_default as Button, Card_default as Card, Checkbox_default as Checkbox, ConfirmHost_default as ConfirmHost, DEFAULT_LISTING_LIMIT, DataTable_default as DataTable, DateField_default as DateField, DateRangeField_default as DateRangeField, DateRangeFilter_default as DateRangeFilter, Dialog_default as Dialog, Drawer_default as Drawer, EmptyLayout_default as EmptyLayout, Error_default as ErrorPage, GradientBackground_default as GradientBackground, ICON_PROP_TYPE, Icon_default as Icon, IconCell_default as IconCell, InfiniteDataTable_default as InfiniteDataTable, InputNumber_default as InputNumber, InputOtp_default as InputOtp, InputText_default as InputText, MENU_MODES, MENU_PROFILE_POSITIONS, MOBILE_MAX_WIDTH_PX, Message_default as Message, MultiSelect_default as MultiSelect, OverlayBadge_default as OverlayBadge, RadioButton_default as RadioButton, Select_default as Select, SelectButton_default as SelectButton, SelectColumnFilter_default as SelectColumnFilter, Skeleton_default as Skeleton, StaticTable_default as StaticTable, TOOLTIP_ROOT_SELECTOR, Tabs_default as Tabs, Tag_default as Tag, TextColumn_default as TextColumn, Textarea_default as Textarea, TimeLag_default as TimeLag, Timestamp_default as Timestamp, ToastHost_default as ToastHost, ToggleSwitch_default as ToggleSwitch, Tooltip_default as Tooltip, TruncatedCode_default as TruncatedCode, UI_DESCRIBE_REQUEST_ERROR, UI_ICON_CLASS, UI_MESSAGES, UiIcon_default as UiIcon, UiVendorPlugin, createCursorListing, createInfiniteListing, createTooltipDirective, dismissTooltips, installConfirmationService, installToastService, installTooltipDirective, toVendorTooltipBinding, useAppToast, useConfirm, useCopyToClipboard, useLayout, useListingStore, useUiDescribeRequestError, useUiIconClass, useUiMessages };

package/dist/layout/layout.d.ts

@@ -0,0 +1,37 @@
+export declare const MOBILE_MAX_WIDTH_PX = 991;
+export type ComponentTheme = 'blue' | 'green' | 'white' | 'yellow';
+export interface LayoutConfigInterface {
+    layoutTheme: ComponentTheme;
+    menuMode: MenuMode;
+    menuProfilePosition: MenuProfilePosition;
+    scale: number;
+}
+export declare const MENU_MODES: readonly ["static", "overlay", "slim", "slim-plus", "reveal", "drawer", "horizontal"];
+export type MenuMode = (typeof MENU_MODES)[number];
+export declare const MENU_PROFILE_POSITIONS: readonly ["start", "end"];
+type MenuProfilePosition = (typeof MENU_PROFILE_POSITIONS)[number];
+export declare const useLayout: () => {
+    isDesktop: import("vue").Ref<boolean, boolean>;
+    isSlim: import("vue").ComputedRef<boolean>;
+    isSlimPlus: import("vue").ComputedRef<boolean>;
+    layoutConfig: import("vue").ToRefs<{
+        layoutTheme: ComponentTheme;
+        menuMode: MenuMode;
+        menuProfilePosition: MenuProfilePosition;
+        scale: number;
+    }>;
+    layoutState: import("vue").ToRefs<{
+        activeMenuItem: string;
+        anchored: boolean;
+        configSidebarVisible: boolean;
+        menuHoverActive: boolean;
+        menuProfileActive: boolean;
+        overlayMenuActive: boolean;
+        overlaySubmenuActive: boolean;
+        sidebarActive: boolean;
+        staticMenuDesktopInactive: boolean;
+        staticMenuMobileActive: boolean;
+    }>;
+    onMenuToggle: () => void;
+};
+export {};

package/dist/layout/layout.js

@@ -0,0 +1,60 @@
+import { computed, reactive, ref, toRefs } from "vue";
+//#region src/layout/layout.ts
+var MOBILE_MAX_WIDTH_PX = 991;
+var MENU_MODES = [
+	"static",
+	"overlay",
+	"slim",
+	"slim-plus",
+	"reveal",
+	"drawer",
+	"horizontal"
+];
+var MENU_PROFILE_POSITIONS = ["start", "end"];
+var layoutConfig = reactive({
+	layoutTheme: "blue",
+	menuMode: "static",
+	menuProfilePosition: "start",
+	scale: 14
+});
+var layoutState = reactive({
+	activeMenuItem: "",
+	anchored: false,
+	configSidebarVisible: false,
+	menuHoverActive: false,
+	menuProfileActive: false,
+	overlayMenuActive: false,
+	overlaySubmenuActive: false,
+	sidebarActive: false,
+	staticMenuDesktopInactive: false,
+	staticMenuMobileActive: false
+});
+var isDesktopWidth = () => globalThis.window.innerWidth > 991;
+var isDesktop = ref(true);
+var resizeWatch = {};
+var observeWindowWidth = () => {
+	if (resizeWatch.isObserved || false) return;
+	resizeWatch.isObserved = true;
+	isDesktop.value = isDesktopWidth();
+	globalThis.window.addEventListener("resize", () => {
+		isDesktop.value = isDesktopWidth();
+	});
+};
+var useLayout = () => {
+	observeWindowWidth();
+	const onMenuToggle = () => {
+		if (layoutConfig.menuMode === "overlay") layoutState.overlayMenuActive = !layoutState.overlayMenuActive;
+		if (isDesktopWidth()) layoutState.staticMenuDesktopInactive = !layoutState.staticMenuDesktopInactive;
+		else layoutState.staticMenuMobileActive = !layoutState.staticMenuMobileActive;
+	};
+	return {
+		isDesktop,
+		isSlim: computed(() => layoutConfig.menuMode === "slim"),
+		isSlimPlus: computed(() => layoutConfig.menuMode === "slim-plus"),
+		layoutConfig: toRefs(layoutConfig),
+		layoutState: toRefs(layoutState),
+		onMenuToggle
+	};
+};
+//#endregion
+export { MENU_MODES, MENU_PROFILE_POSITIONS, MOBILE_MAX_WIDTH_PX, useLayout };