@rotki/ui-library 2.15.0 → 2.16.0

package/dist/components/overlays/dialog/RuiDialog.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,163 @@
+import { cn, tv } from "../../../utils/tv.js";
+import { useTimeoutManager } from "../../../composables/timeout-manager.js";
+import { getNonRootAttrs, getRootAttrs, transformPropsUnit } from "../../../utils/helpers.js";
+import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
+import { get, set } from "@vueuse/shared";
+//#region src/components/overlays/dialog/RuiDialog.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = ["data-bottom-sheet"];
+var RuiDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiDialog",
+	inheritAttrs: false,
+	__name: "RuiDialog",
+	props: /* @__PURE__ */ mergeModels({
+		persistent: {
+			type: Boolean,
+			default: false
+		},
+		width: { default: "98%" },
+		maxWidth: {},
+		bottomSheet: {
+			type: Boolean,
+			default: false
+		},
+		classNames: {},
+		contentClass: { default: "" },
+		zIndex: { default: 9999 },
+		ariaLabel: {}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels([
+		"closed",
+		"click:outside",
+		"click:esc"
+	], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const modelValue = useModel(__props, "modelValue");
+		const emit = __emit;
+		const transitioning = ref(false);
+		const contentRef = useTemplateRef("contentRef");
+		const leaveTimeout = useTimeoutManager();
+		const alive = computed(() => get(modelValue) || get(transitioning));
+		const style = computed(() => ({
+			width: transformPropsUnit(__props.width),
+			maxWidth: transformPropsUnit(__props.maxWidth)
+		}));
+		const dialog = tv({
+			slots: {
+				root: "fixed inset-0",
+				overlay: "absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50",
+				content: "absolute left-1/2 bottom-0 -translate-x-1/2 outline-none overflow-y-auto max-h-[90vh]"
+			},
+			variants: { bottomSheet: {
+				true: { content: "" },
+				false: { content: "top-1/2 -translate-y-1/2 bottom-auto" }
+			} },
+			defaultVariants: { bottomSheet: false }
+		});
+		const ui = computed(() => dialog({ bottomSheet: __props.bottomSheet }));
+		const dialogAttrs = { onClick: toggle };
+		const contentTransition = computed(() => {
+			if (!__props.bottomSheet) return {
+				enterFromClass: "opacity-0 scale-95",
+				enterActiveClass: "transition-all ease-out duration-200",
+				enterToClass: "opacity-100 scale-100",
+				leaveFromClass: "opacity-100 scale-100",
+				leaveActiveClass: "transition-all ease-in duration-150",
+				leaveToClass: "opacity-0 scale-95"
+			};
+			return {
+				enterFromClass: "translate-y-full",
+				enterActiveClass: "transition-transform ease-out duration-300",
+				enterToClass: "translate-y-0",
+				leaveFromClass: "translate-y-0",
+				leaveActiveClass: "transition-transform ease-in duration-200",
+				leaveToClass: "translate-y-full"
+			};
+		});
+		function toggle() {
+			set(modelValue, !get(modelValue));
+		}
+		function close() {
+			set(modelValue, false);
+		}
+		function onEscClick() {
+			if (!__props.persistent) close();
+			emit("click:esc");
+		}
+		function onClickOutside() {
+			if (!__props.persistent) close();
+			emit("click:outside");
+		}
+		function onLeaveComplete() {
+			leaveTimeout.clear();
+			if (get(transitioning)) {
+				set(transitioning, false);
+				emit("closed");
+			}
+		}
+		watch(modelValue, (value) => {
+			if (!value) {
+				set(transitioning, true);
+				leaveTimeout.create(onLeaveComplete, 400);
+			}
+		});
+		watch(contentRef, (ref) => {
+			if (ref) nextTick(() => ref.focus());
+			else onLeaveComplete();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({
+				attrs: dialogAttrs,
+				isOpen: modelValue.value
+			}))), (openBlock(), createBlock(Teleport, { to: "body" }, [unref(alive) ? (openBlock(), createElementBlock("div", mergeProps({
+				key: 0,
+				class: unref(ui).root({ class: unref(cn)(__props.classNames?.root) }),
+				style: { zIndex: __props.zIndex },
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": __props.ariaLabel,
+				tabindex: "0"
+			}, unref(getNonRootAttrs)(_ctx.$attrs), { onKeydown: _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => onEscClick(), ["stop"]), ["esc"])) }), [createVNode(Transition, {
+				"enter-from-class": "opacity-0",
+				"enter-active-class": "transition-opacity ease-out duration-200",
+				"enter-to-class": "opacity-100",
+				"leave-from-class": "opacity-100",
+				"leave-active-class": "transition-opacity ease-in duration-150",
+				"leave-to-class": "opacity-0"
+			}, {
+				default: withCtx(() => [modelValue.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					"data-id": "overlay",
+					class: normalizeClass(unref(ui).overlay()),
+					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => onClickOutside(), ["stop"]))
+				}, null, 2)) : createCommentVNode("", true)]),
+				_: 1
+			}), createVNode(Transition, mergeProps(unref(contentTransition), { onAfterLeave: _cache[1] || (_cache[1] = ($event) => onLeaveComplete()) }), {
+				default: withCtx(() => [modelValue.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "contentRef",
+					ref: contentRef,
+					"data-id": "content",
+					style: normalizeStyle(unref(style)),
+					tabindex: "0",
+					"data-bottom-sheet": __props.bottomSheet || void 0,
+					class: normalizeClass(unref(ui).content({ class: unref(cn)(__props.classNames?.content) ?? unref(cn)(__props.contentClass) }))
+				}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+					isOpen: modelValue.value,
+					close
+				})))], 14, _hoisted_2)) : createCommentVNode("", true)]),
+				_: 3
+			}, 16)], 16, _hoisted_1)) : createCommentVNode("", true)]))], 16);
+		};
+	}
+});
+//#endregion
+export { RuiDialog_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiDialog.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/overlays/dialog/RuiDialog.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiDialog.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/dialog/RuiDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getNonRootAttrs, getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiDialogClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface DialogProps {\n  persistent?: boolean;\n  width?: string | number;\n  maxWidth?: string | number;\n  bottomSheet?: boolean;\n  classNames?: RuiDialogClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string | string[] | Record<string, boolean>;\n  zIndex?: string | number;\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiDialog',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  persistent = false,\n  width = '98%',\n  maxWidth,\n  bottomSheet = false,\n  classNames,\n  contentClass = '',\n  zIndex = 9999,\n  ariaLabel,\n} = defineProps<DialogProps>();\n\nconst emit = defineEmits<{\n  'closed': [];\n  'click:outside': [];\n  'click:esc': [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { attrs: { onClick: () => void }; isOpen: boolean }) => any;\n  default?: (props: { isOpen: boolean; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst contentRef = useTemplateRef<HTMLDivElement>('contentRef');\n\nconst leaveTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning));\n\nconst style = computed<{ width: string | undefined; maxWidth: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n  maxWidth: transformPropsUnit(maxWidth),\n}));\n\nconst dialog = tv({\n  slots: {\n    root: 'fixed inset-0',\n    overlay: 'absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50',\n    content: 'absolute left-1/2 bottom-0 -translate-x-1/2 outline-none overflow-y-auto max-h-[90vh]',\n  },\n  variants: {\n    bottomSheet: {\n      true: { content: '' },\n      false: { content: 'top-1/2 -translate-y-1/2 bottom-auto' },\n    },\n  },\n  defaultVariants: { bottomSheet: false },\n});\n\nconst ui = computed<ReturnType<typeof dialog>>(() => dialog({ bottomSheet }));\n\nconst dialogAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst contentTransition = computed<Record<string, string>>(() => {\n  if (!bottomSheet) {\n    return {\n      enterFromClass: 'opacity-0 scale-95',\n      enterActiveClass: 'transition-all ease-out duration-200',\n      enterToClass: 'opacity-100 scale-100',\n      leaveFromClass: 'opacity-100 scale-100',\n      leaveActiveClass: 'transition-all ease-in duration-150',\n      leaveToClass: 'opacity-0 scale-95',\n    };\n  }\n\n  return {\n    enterFromClass: 'translate-y-full',\n    enterActiveClass: 'transition-transform ease-out duration-300',\n    enterToClass: 'translate-y-0',\n    leaveFromClass: 'translate-y-0',\n    leaveActiveClass: 'transition-transform ease-in duration-200',\n    leaveToClass: 'translate-y-full',\n  };\n});\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onEscClick(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:esc');\n}\n\nfunction onClickOutside(): void {\n  if (!persistent) {\n    close();\n  }\n  emit('click:outside');\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Safety fallback if transitionend is not detected\n    leaveTimeout.create(onLeaveComplete, 400);\n  }\n});\n\nwatch(contentRef, (ref) => {\n  if (ref) {\n    nextTick(() => ref.focus());\n  }\n  else {\n    onLeaveComplete();\n  }\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <slot\n      name=\"activator\"\n      v-bind=\"{ attrs: dialogAttrs, isOpen: modelValue }\"\n    />\n    <Teleport to=\"body\">\n      <div\n        v-if=\"alive\"\n        :class=\"ui.root({ class: cn(classNames?.root) })\"\n        :style=\"{ zIndex }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"ariaLabel\"\n        tabindex=\"0\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        @keydown.esc.stop=\"onEscClick()\"\n      >\n        <Transition\n          enter-from-class=\"opacity-0\"\n          enter-active-class=\"transition-opacity ease-out duration-200\"\n          enter-to-class=\"opacity-100\"\n          leave-from-class=\"opacity-100\"\n          leave-active-class=\"transition-opacity ease-in duration-150\"\n          leave-to-class=\"opacity-0\"\n        >\n          <div\n            v-if=\"modelValue\"\n            data-id=\"overlay\"\n            :class=\"ui.overlay()\"\n            @click.stop=\"onClickOutside()\"\n          />\n        </Transition>\n        <Transition\n          v-bind=\"contentTransition\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"modelValue\"\n            ref=\"contentRef\"\n            data-id=\"content\"\n            :style=\"style\"\n            tabindex=\"0\"\n            :data-bottom-sheet=\"bottomSheet || undefined\"\n            :class=\"ui.content({ class: cn(classNames?.content) ?? cn(contentClass) })\"\n          >\n            <slot v-bind=\"{ isOpen: modelValue, close }\" />\n          </div>\n        </Transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/overlays/menu/RuiMenu.js

@@ -0,0 +1,7 @@
+import RuiMenu_vue_vue_type_script_setup_true_lang_default from "./RuiMenu.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/overlays/menu/RuiMenu.vue
+var RuiMenu_default = RuiMenu_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiMenu_default as default };
+
+//# sourceMappingURL=RuiMenu.js.map

package/dist/components/overlays/menu/RuiMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiMenu.js","names":[],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn, tv } from '@/utils/tv';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\ninterface MenuAttrs extends BaseMenuAttrs { onClick?: () => void }\n\nexport interface RuiMenuClassNames {\n  root?: VueClassValue;\n  wrapper?: VueClassValue;\n  menu?: VueClassValue;\n}\n\nexport interface MenuProps {\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  options?: FloatingOptions;\n  /** @deprecated Use `options` instead */\n  popper?: PopperOptions;\n  classNames?: RuiMenuClassNames;\n  /** @deprecated Use `classNames.wrapper` instead */\n  wrapperClass?: string | object | string[];\n  /** @deprecated Use `classNames.menu` instead */\n  menuClass?: string | object | string[];\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  dense?: boolean;\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  openOnHover = false,\n  disabled = false,\n  fullWidth = false,\n  openDelay = 0,\n  closeDelay = 0,\n  options,\n  popper,\n  classNames,\n  wrapperClass = '',\n  menuClass = '',\n  closeOnContentClick = false,\n  persistOnActivatorClick = false,\n  hint,\n  errorMessages = [],\n  successMessages = [],\n  showDetails = false,\n  dense = false,\n  persistent = false,\n  disableAutoFocus = false,\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n  activator?: (props: {\n    attrs: { onMouseover?: () => void; onMouseleave?: () => void; onClick?: () => void };\n    open: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  default?: (props: { width: number }) => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nconst {\n  reference: activator,\n  popover: menu,\n  open,\n  visible,\n  currentPlacement,\n  leavePending,\n  onLeavePending,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => popper ? toFloatingOptions(popper) : (options ?? {}),\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n);\n\nconst { width } = useElementSize(activator);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst menuStyles = tv({\n  slots: {\n    wrapper: 'relative inline-flex max-w-full',\n    popover: 'w-max z-[9999]',\n    content: 'rounded overflow-hidden shadow-8 bg-white dark:bg-[#2E2E2E] text-rui-text focus:outline-none py-2',\n    details: 'pt-1',\n  },\n  variants: {\n    fullWidth: {\n      true: { wrapper: 'w-full' },\n    },\n    dense: {\n      true: { details: 'px-2' },\n      false: { details: 'px-4' },\n    },\n  },\n  defaultVariants: { fullWidth: false, dense: false },\n});\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n  fullWidth,\n  dense,\n}));\n\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n  if (disabled)\n    return {};\n\n  const clickVal = get(click);\n  return {\n    onMouseover: () => {\n      if (openOnHover)\n        onOpen();\n    },\n    onMouseleave: () => {\n      if (openOnHover && !clickVal)\n        onClose();\n    },\n  } satisfies BaseMenuAttrs;\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => {\n  if (disabled)\n    return {};\n\n  return { ...get(baseMenuAttrs), onClick: checkClick };\n});\n\nfunction focusOnContent() {\n  const content = get(menuContent);\n  if (!content)\n    return;\n\n  // Focus on the menu container itself\n  content.focus();\n}\n\nfunction focusMenu(): void {\n  if (disableAutoFocus)\n    return;\n\n  nextTick(() => focusOnContent());\n}\n\nfunction focusOnActivator() {\n  const activatorEl = get(activator);\n  if (!activatorEl) {\n    return;\n  }\n  const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n  if (focusableEl) {\n    focusableEl.focus();\n  }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n  if (!get(open))\n    return;\n  onClose();\n  set(click, false);\n  event?.stopPropagation();\n\n  // Return focus to activator when menu closes\n  if (disableAutoFocus) {\n    return;\n  }\n\n  nextTick(() => focusOnActivator());\n}\n\nfunction checkClick(): void {\n  if (get(open) && get(click)) {\n    if (!persistOnActivatorClick)\n      onLeave();\n  }\n  else {\n    onOpen();\n    set(click, true);\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (get(open) === value)\n    return;\n\n  if (value) {\n    onOpen();\n    set(click, true);\n  }\n  else {\n    onLeave();\n  }\n});\n\nwatch(open, (open) => {\n  set(modelValue, open);\n  if (open) {\n    focusMenu();\n  }\n});\n\nonClickOutside(menu, () => {\n  if (get(open) && !persistent)\n    onLeave();\n}, { ignore: [activator] });\n</script>\n\n<template>\n  <div\n    :class=\"classNames?.root\"\n    @keydown.esc.stop=\"onLeave()\"\n  >\n    <div\n      ref=\"activator\"\n      :class=\"ui.wrapper({ class: cn(classNames?.wrapper) ?? cn(wrapperClass as VueClassValue) })\"\n      :data-menu-disabled=\"disabled\"\n      aria-haspopup=\"true\"\n      :aria-expanded=\"open\"\n    >\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n      />\n    </div>\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        ref=\"menu\"\n        :class=\"ui.popover({ class: cn(classNames?.menu) ?? cn(menuClass as VueClassValue) })\"\n        role=\"menu\"\n        :data-placement=\"currentPlacement\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc.stop=\"onLeave()\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"leavePending ? onLeaveComplete() : undefined\"\n          @before-leave=\"onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            data-id=\"content\"\n            :class=\"ui.content()\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <slot v-bind=\"{ width }\" />\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      :class=\"ui.details()\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/menu/RuiMenu.vue.d.ts

@@ -1,12 +1,24 @@
+import type { VueClassValue } from '../../../types/class-value';
+import { type FloatingOptions } from '../../../composables/floating.js';
 import { type PopperOptions } from '../../../composables/popper.js';
+export interface RuiMenuClassNames {
+    root?: VueClassValue;
+    wrapper?: VueClassValue;
+    menu?: VueClassValue;
+}
 export interface MenuProps {
     openOnHover?: boolean;
     fullWidth?: boolean;
     disabled?: boolean;
     openDelay?: number;
     closeDelay?: number;
+    options?: FloatingOptions;
+    /** @deprecated Use `options` instead */
     popper?: PopperOptions;
+    classNames?: RuiMenuClassNames;
+    /** @deprecated Use `classNames.wrapper` instead */
     wrapperClass?: string | object | string[];
+    /** @deprecated Use `classNames.menu` instead */
     menuClass?: string | object | string[];
     closeOnContentClick?: boolean;
     persistOnActivatorClick?: boolean;

package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,236 @@
+import { cn, tv } from "../../../utils/tv.js";
+import { useFormTextDetail } from "../../../utils/form-text-detail.js";
+import RuiFormTextDetail_default from "../../helpers/RuiFormTextDetail.js";
+import { useFloating } from "../../../composables/floating.js";
+import { toFloatingOptions } from "../../../composables/popper.js";
+import { Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, watch, withCtx, withKeys, withModifiers } from "vue";
+import { onClickOutside, useElementSize } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/components/overlays/menu/RuiMenu.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-menu-disabled", "aria-expanded"];
+var _hoisted_2 = ["data-placement"];
+var FOCUSABLE_ELEMENTS_SELECTOR = "button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";
+var RuiMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiMenu",
+	__name: "RuiMenu",
+	props: /* @__PURE__ */ mergeModels({
+		openOnHover: {
+			type: Boolean,
+			default: false
+		},
+		fullWidth: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		openDelay: { default: 0 },
+		closeDelay: { default: 0 },
+		options: {},
+		popper: {},
+		classNames: {},
+		wrapperClass: { default: "" },
+		menuClass: { default: "" },
+		closeOnContentClick: {
+			type: Boolean,
+			default: false
+		},
+		persistOnActivatorClick: {
+			type: Boolean,
+			default: false
+		},
+		hint: {},
+		errorMessages: { default: () => [] },
+		successMessages: { default: () => [] },
+		showDetails: {
+			type: Boolean,
+			default: false
+		},
+		dense: {
+			type: Boolean,
+			default: false
+		},
+		persistent: {
+			type: Boolean,
+			default: false
+		},
+		disableAutoFocus: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const click = ref(false);
+		const menuContent = useTemplateRef("menuContent");
+		const { reference: activator, popover: menu, open, visible, currentPlacement, leavePending, onLeavePending, onOpen, onClose, onLeaveComplete, updatePosition } = useFloating(() => __props.popper ? toFloatingOptions(__props.popper) : __props.options ?? {}, () => __props.disabled, () => __props.openDelay, () => __props.closeDelay);
+		const { width } = useElementSize(activator);
+		const { hasError, hasSuccess } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
+		const menuStyles = tv({
+			slots: {
+				wrapper: "relative inline-flex max-w-full",
+				popover: "w-max z-[9999]",
+				content: "rounded overflow-hidden shadow-8 bg-white dark:bg-[#2E2E2E] text-rui-text focus:outline-none py-2",
+				details: "pt-1"
+			},
+			variants: {
+				fullWidth: { true: { wrapper: "w-full" } },
+				dense: {
+					true: { details: "px-2" },
+					false: { details: "px-4" }
+				}
+			},
+			defaultVariants: {
+				fullWidth: false,
+				dense: false
+			}
+		});
+		const ui = computed(() => menuStyles({
+			fullWidth: __props.fullWidth,
+			dense: __props.dense
+		}));
+		const baseMenuAttrs = computed(() => {
+			if (__props.disabled) return {};
+			const clickVal = get$1(click);
+			return {
+				onMouseover: () => {
+					if (__props.openOnHover) onOpen();
+				},
+				onMouseleave: () => {
+					if (__props.openOnHover && !clickVal) onClose();
+				}
+			};
+		});
+		const menuAttrs = computed(() => {
+			if (__props.disabled) return {};
+			return {
+				...get$1(baseMenuAttrs),
+				onClick: checkClick
+			};
+		});
+		function focusOnContent() {
+			const content = get$1(menuContent);
+			if (!content) return;
+			content.focus();
+		}
+		function focusMenu() {
+			if (__props.disableAutoFocus) return;
+			nextTick(() => focusOnContent());
+		}
+		function focusOnActivator() {
+			const activatorEl = get$1(activator);
+			if (!activatorEl) return;
+			const focusableEl = activatorEl.querySelector(FOCUSABLE_ELEMENTS_SELECTOR);
+			if (focusableEl) focusableEl.focus();
+		}
+		function onLeave(event) {
+			if (!get$1(open)) return;
+			onClose();
+			set$1(click, false);
+			event?.stopPropagation();
+			if (__props.disableAutoFocus) return;
+			nextTick(() => focusOnActivator());
+		}
+		function checkClick() {
+			if (get$1(open) && get$1(click)) {
+				if (!__props.persistOnActivatorClick) onLeave();
+			} else {
+				onOpen();
+				set$1(click, true);
+			}
+		}
+		watch(modelValue, (value) => {
+			if (get$1(open) === value) return;
+			if (value) {
+				onOpen();
+				set$1(click, true);
+			} else onLeave();
+		});
+		watch(open, (open) => {
+			set$1(modelValue, open);
+			if (open) focusMenu();
+		});
+		onClickOutside(menu, () => {
+			if (get$1(open) && !__props.persistent) onLeave();
+		}, { ignore: [activator] });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(__props.classNames?.root),
+				onKeydown: _cache[5] || (_cache[5] = withKeys(withModifiers(($event) => onLeave(), ["stop"]), ["esc"]))
+			}, [
+				createElementVNode("div", {
+					ref_key: "activator",
+					ref: activator,
+					class: normalizeClass(unref(ui).wrapper({ class: unref(cn)(__props.classNames?.wrapper) ?? unref(cn)(__props.wrapperClass) })),
+					"data-menu-disabled": __props.disabled,
+					"aria-haspopup": "true",
+					"aria-expanded": unref(open)
+				}, [renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({
+					attrs: unref(menuAttrs),
+					open: unref(open),
+					disabled: __props.disabled,
+					hasError: unref(hasError),
+					hasSuccess: unref(hasSuccess)
+				})))], 10, _hoisted_1),
+				!__props.disabled ? (openBlock(), createBlock(Teleport, {
+					key: 0,
+					to: "body"
+				}, [unref(visible) ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "menu",
+					ref: menu,
+					class: normalizeClass(unref(ui).popover({ class: unref(cn)(__props.classNames?.menu) ?? unref(cn)(__props.menuClass) })),
+					role: "menu",
+					"data-placement": unref(currentPlacement),
+					onClick: _cache[3] || (_cache[3] = ($event) => __props.closeOnContentClick ? onLeave() : void 0),
+					onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers(($event) => onLeave(), ["stop"]), ["esc"]))
+				}, [createVNode(TransitionGroup, {
+					"enter-active-class": "transition ease-out duration-200",
+					"enter-from-class": "opacity-0 translate-y-1",
+					"enter-to-class": "opacity-100 translate-y-0",
+					"leave-active-class": "transition ease-in duration-150",
+					"leave-from-class": "opacity-100 translate-y-0",
+					"leave-to-class": "opacity-0 translate-y-1",
+					onBeforeEnter: _cache[0] || (_cache[0] = ($event) => unref(updatePosition)()),
+					onAfterLeave: _cache[1] || (_cache[1] = ($event) => unref(leavePending) ? unref(onLeaveComplete)() : void 0),
+					onBeforeLeave: _cache[2] || (_cache[2] = ($event) => unref(onLeavePending)())
+				}, {
+					default: withCtx(() => [unref(open) ? (openBlock(), createElementBlock("div", mergeProps({
+						ref_key: "menuContent",
+						ref: menuContent,
+						key: "menu",
+						"data-id": "content",
+						class: unref(ui).content(),
+						tabindex: "-1"
+					}, unref(baseMenuAttrs)), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ width: unref(width) })))], 16)) : createCommentVNode("", true)]),
+					_: 3
+				})], 42, _hoisted_2)) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				__props.showDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
+					key: 1,
+					class: normalizeClass(unref(ui).details()),
+					"error-messages": __props.errorMessages,
+					"success-messages": __props.successMessages,
+					hint: __props.hint
+				}, null, 8, [
+					"class",
+					"error-messages",
+					"success-messages",
+					"hint"
+				])) : createCommentVNode("", true)
+			], 34);
+		};
+	}
+});
+//#endregion
+export { RuiMenu_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiMenu.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiMenu.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/overlays/menu/RuiMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { cn, tv } from '@/utils/tv';\n\ninterface BaseMenuAttrs { onMouseover?: () => void; onMouseleave?: () => void }\n\ninterface MenuAttrs extends BaseMenuAttrs { onClick?: () => void }\n\nexport interface RuiMenuClassNames {\n  root?: VueClassValue;\n  wrapper?: VueClassValue;\n  menu?: VueClassValue;\n}\n\nexport interface MenuProps {\n  openOnHover?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  options?: FloatingOptions;\n  /** @deprecated Use `options` instead */\n  popper?: PopperOptions;\n  classNames?: RuiMenuClassNames;\n  /** @deprecated Use `classNames.wrapper` instead */\n  wrapperClass?: string | object | string[];\n  /** @deprecated Use `classNames.menu` instead */\n  menuClass?: string | object | string[];\n  closeOnContentClick?: boolean;\n  persistOnActivatorClick?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  showDetails?: boolean;\n  dense?: boolean;\n  persistent?: boolean;\n  disableAutoFocus?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiMenu',\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  openOnHover = false,\n  disabled = false,\n  fullWidth = false,\n  openDelay = 0,\n  closeDelay = 0,\n  options,\n  popper,\n  classNames,\n  wrapperClass = '',\n  menuClass = '',\n  closeOnContentClick = false,\n  persistOnActivatorClick = false,\n  hint,\n  errorMessages = [],\n  successMessages = [],\n  showDetails = false,\n  dense = false,\n  persistent = false,\n  disableAutoFocus = false,\n} = defineProps<MenuProps>();\n\ndefineSlots<{\n  activator?: (props: {\n    attrs: { onMouseover?: () => void; onMouseleave?: () => void; onClick?: () => void };\n    open: boolean;\n    disabled: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  default?: (props: { width: number }) => any;\n}>();\n\nconst click = ref<boolean>(false);\nconst menuContent = useTemplateRef<HTMLElement>('menuContent');\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n  'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nconst {\n  reference: activator,\n  popover: menu,\n  open,\n  visible,\n  currentPlacement,\n  leavePending,\n  onLeavePending,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => popper ? toFloatingOptions(popper) : (options ?? {}),\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n);\n\nconst { width } = useElementSize(activator);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst menuStyles = tv({\n  slots: {\n    wrapper: 'relative inline-flex max-w-full',\n    popover: 'w-max z-[9999]',\n    content: 'rounded overflow-hidden shadow-8 bg-white dark:bg-[#2E2E2E] text-rui-text focus:outline-none py-2',\n    details: 'pt-1',\n  },\n  variants: {\n    fullWidth: {\n      true: { wrapper: 'w-full' },\n    },\n    dense: {\n      true: { details: 'px-2' },\n      false: { details: 'px-4' },\n    },\n  },\n  defaultVariants: { fullWidth: false, dense: false },\n});\n\nconst ui = computed<ReturnType<typeof menuStyles>>(() => menuStyles({\n  fullWidth,\n  dense,\n}));\n\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n  if (disabled)\n    return {};\n\n  const clickVal = get(click);\n  return {\n    onMouseover: () => {\n      if (openOnHover)\n        onOpen();\n    },\n    onMouseleave: () => {\n      if (openOnHover && !clickVal)\n        onClose();\n    },\n  } satisfies BaseMenuAttrs;\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => {\n  if (disabled)\n    return {};\n\n  return { ...get(baseMenuAttrs), onClick: checkClick };\n});\n\nfunction focusOnContent() {\n  const content = get(menuContent);\n  if (!content)\n    return;\n\n  // Focus on the menu container itself\n  content.focus();\n}\n\nfunction focusMenu(): void {\n  if (disableAutoFocus)\n    return;\n\n  nextTick(() => focusOnContent());\n}\n\nfunction focusOnActivator() {\n  const activatorEl = get(activator);\n  if (!activatorEl) {\n    return;\n  }\n  const focusableEl = activatorEl.querySelector<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);\n  if (focusableEl) {\n    focusableEl.focus();\n  }\n}\n\nfunction onLeave(event?: KeyboardEvent): void {\n  if (!get(open))\n    return;\n  onClose();\n  set(click, false);\n  event?.stopPropagation();\n\n  // Return focus to activator when menu closes\n  if (disableAutoFocus) {\n    return;\n  }\n\n  nextTick(() => focusOnActivator());\n}\n\nfunction checkClick(): void {\n  if (get(open) && get(click)) {\n    if (!persistOnActivatorClick)\n      onLeave();\n  }\n  else {\n    onOpen();\n    set(click, true);\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (get(open) === value)\n    return;\n\n  if (value) {\n    onOpen();\n    set(click, true);\n  }\n  else {\n    onLeave();\n  }\n});\n\nwatch(open, (open) => {\n  set(modelValue, open);\n  if (open) {\n    focusMenu();\n  }\n});\n\nonClickOutside(menu, () => {\n  if (get(open) && !persistent)\n    onLeave();\n}, { ignore: [activator] });\n</script>\n\n<template>\n  <div\n    :class=\"classNames?.root\"\n    @keydown.esc.stop=\"onLeave()\"\n  >\n    <div\n      ref=\"activator\"\n      :class=\"ui.wrapper({ class: cn(classNames?.wrapper) ?? cn(wrapperClass as VueClassValue) })\"\n      :data-menu-disabled=\"disabled\"\n      aria-haspopup=\"true\"\n      :aria-expanded=\"open\"\n    >\n      <slot\n        name=\"activator\"\n        v-bind=\"{ attrs: menuAttrs, open, disabled, hasError, hasSuccess }\"\n      />\n    </div>\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        ref=\"menu\"\n        :class=\"ui.popover({ class: cn(classNames?.menu) ?? cn(menuClass as VueClassValue) })\"\n        role=\"menu\"\n        :data-placement=\"currentPlacement\"\n        @click=\"closeOnContentClick ? onLeave() : undefined\"\n        @keydown.esc.stop=\"onLeave()\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"leavePending ? onLeaveComplete() : undefined\"\n          @before-leave=\"onLeavePending()\"\n        >\n          <div\n            v-if=\"open\"\n            ref=\"menuContent\"\n            key=\"menu\"\n            data-id=\"content\"\n            :class=\"ui.content()\"\n            tabindex=\"-1\"\n            v-bind=\"baseMenuAttrs\"\n          >\n            <slot v-bind=\"{ width }\" />\n          </div>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n    <RuiFormTextDetail\n      v-if=\"showDetails\"\n      :class=\"ui.details()\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;AAqFA,IAAM,8BACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAvCF,MAAM,aAAa,SAAoB,SAAA,aAAoB;EAmC3D,MAAM,QAAQ,IAAa,MAAM;EACjC,MAAM,cAAc,eAA4B,cAAc;EAK9D,MAAM,EACJ,WAAW,WACX,SAAS,MACT,MACA,SACA,kBACA,cACA,gBACA,QACA,SACA,iBACA,mBACE,kBACI,QAAA,SAAS,kBAAkB,QAAA,OAAO,GAAI,QAAA,WAAW,EAAE,QACnD,QAAA,gBACA,QAAA,iBACA,QAAA,WACP;EAED,MAAM,EAAE,UAAU,eAAe,UAAU;EAE3C,MAAM,EAAE,UAAU,eAAe,wBACzB,QAAA,qBACA,QAAA,gBACP;EAED,MAAM,aAAa,GAAG;GACpB,OAAO;IACL,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACV;GACD,UAAU;IACR,WAAW,EACT,MAAM,EAAE,SAAS,UAAU,EAC5B;IACD,OAAO;KACL,MAAM,EAAE,SAAS,QAAQ;KACzB,OAAO,EAAE,SAAS,QAAA;;IAErB;GACD,iBAAiB;IAAE,WAAW;IAAO,OAAO;;GAC7C,CAAC;EAEF,MAAM,KAAK,eAA8C,WAAW;GAClE,WAAQ,QAAA;GACR,OAAI,QAAA;GACL,CAAC,CAAC;EAEH,MAAM,gBAAgB,eAA8B;AAClD,OAAI,QAAA,SACF,QAAO,EAAE;GAEX,MAAM,WAAW,MAAI,MAAM;AAC3B,UAAO;IACL,mBAAmB;AACjB,SAAI,QAAA,YACF,SAAQ;;IAEZ,oBAAoB;AAClB,SAAI,QAAA,eAAe,CAAC,SAClB,UAAS;;IAEd;IACD;EAEF,MAAM,YAAY,eAA0B;AAC1C,OAAI,QAAA,SACF,QAAO,EAAE;AAEX,UAAO;IAAE,GAAG,MAAI,cAAc;IAAE,SAAS;IAAY;IACrD;EAEF,SAAS,iBAAiB;GACxB,MAAM,UAAU,MAAI,YAAY;AAChC,OAAI,CAAC,QACH;AAGF,WAAQ,OAAO;;EAGjB,SAAS,YAAkB;AACzB,OAAI,QAAA,iBACF;AAEF,kBAAe,gBAAgB,CAAC;;EAGlC,SAAS,mBAAmB;GAC1B,MAAM,cAAc,MAAI,UAAU;AAClC,OAAI,CAAC,YACH;GAEF,MAAM,cAAc,YAAY,cAA2B,4BAA4B;AACvF,OAAI,YACF,aAAY,OAAO;;EAIvB,SAAS,QAAQ,OAA6B;AAC5C,OAAI,CAAC,MAAI,KAAK,CACZ;AACF,YAAS;AACT,SAAI,OAAO,MAAM;AACjB,UAAO,iBAAiB;AAGxB,OAAI,QAAA,iBACF;AAGF,kBAAe,kBAAkB,CAAC;;EAGpC,SAAS,aAAmB;AAC1B,OAAI,MAAI,KAAK,IAAI,MAAI,MAAM;QACrB,CAAC,QAAA,wBACH,UAAS;UAER;AACH,YAAQ;AACR,UAAI,OAAO,KAAK;;;AAIpB,QAAM,aAAa,UAAU;AAC3B,OAAI,MAAI,KAAK,KAAK,MAChB;AAEF,OAAI,OAAO;AACT,YAAQ;AACR,UAAI,OAAO,KAAK;SAGhB,UAAS;IAEX;AAEF,QAAM,OAAO,SAAS;AACpB,SAAI,YAAY,KAAK;AACrB,OAAI,KACF,YAAW;IAEb;AAEF,iBAAe,YAAY;AACzB,OAAI,MAAI,KAAK,IAAI,CAAC,QAAA,WAChB,UAAS;KACV,EAAE,QAAQ,CAAC,UAAU,EAAE,CAAC;;uBAIzB,mBA6DM,OAAA;IA5DH,OAAK,eAAE,QAAA,YAAY,KAAI;IACvB,WAAO,OAAA,OAAA,OAAA,KAAA,SAAA,eAAA,WAAW,SAAO,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,MAAA,CAAA;;IAE1B,mBAWM,OAAA;cAVA;KAAJ,KAAI;KACH,OAAK,eAAE,MAAA,GAAE,CAAC,QAAO,EAAA,OAAU,MAAA,GAAE,CAAC,QAAA,YAAY,QAAO,IAAK,MAAA,GAAE,CAAC,QAAA,aAAY,EAAA,CAAA,CAAA;KACrE,sBAAoB,QAAA;KACrB,iBAAc;KACb,iBAAe,MAAA,KAAA;QAEhB,WAGE,KAAA,QAAA,aAAA,eAAA,mBAAA;KAAA,OADiB,MAAA,UAAS;KAAA,MAAE,MAAA,KAAI;KAAA,UAAE,QAAA;KAAQ,UAAE,MAAA,SAAQ;KAAA,YAAE,MAAA,WAAA;KAAU,CAAA,CAAA,CAAA,CAAA,EAAA,IAAA,WAAA;KAI3D,QAAA,YAAA,WAAA,EADT,YAqCW,UAAA;;KAnCT,IAAG;QAGK,MAAA,QAAO,IAAA,WAAA,EADf,mBAgCM,OAAA;;cA9BA;KAAJ,KAAI;KACH,OAAK,eAAE,MAAA,GAAE,CAAC,QAAO,EAAA,OAAU,MAAA,GAAE,CAAC,QAAA,YAAY,KAAI,IAAK,MAAA,GAAE,CAAC,QAAA,UAAS,EAAA,CAAA,CAAA;KAChE,MAAK;KACJ,kBAAgB,MAAA,iBAAgB;KAChC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,sBAAsB,SAAO,GAAK,KAAA;KACzC,WAAO,OAAA,OAAA,OAAA,KAAA,SAAA,eAAA,WAAW,SAAO,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,MAAA,CAAA;QAE1B,YAsBkB,iBAAA;KArBhB,sBAAmB;KACnB,oBAAiB;KACjB,kBAAe;KACf,sBAAmB;KACnB,oBAAiB;KACjB,kBAAe;KACd,eAAY,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,eAAc,EAAA;KAC5B,cAAW,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,aAAY,GAAG,MAAA,gBAAe,EAAA,GAAK,KAAA;KAChD,eAAY,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,eAAc,EAAA;;4BAYvB,CATE,MAAA,KAAI,IAAA,WAAA,EADZ,mBAUM,OAVN,WAUM;eARA;MAAJ,KAAI;MACJ,KAAI;MACJ,WAAQ;MACP,OAAO,MAAA,GAAE,CAAC,SAAO;MAClB,UAAS;QACD,MAAA,cAAa,CAAA,EAAA,CAErB,WAA2B,KAAA,QAAA,WAAA,eAAA,mBAAA,EAAA,OAAX,MAAA,MAAK,EAAA,CAAA,CAAA,CAAA,CAAA,EAAA,GAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA;;;IAMrB,QAAA,eAAA,WAAA,EADR,YAME,2BAAA;;KAJC,OAAK,eAAE,MAAA,GAAE,CAAC,SAAO,CAAA;KACjB,kBAAgB,QAAA;KAChB,oBAAkB,QAAA;KAClB,MAAM,QAAA"}

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.js

@@ -0,0 +1,7 @@
+import RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default from "./RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue
+var RuiNavigationDrawer_default = RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiNavigationDrawer_default as default };
+
+//# sourceMappingURL=RuiNavigationDrawer.js.map

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiNavigationDrawer.js","names":[],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { MaybeElement } from '@vueuse/core';\nimport type { VueClassValue } from '@/types/class-value';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string | object | string[];\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  contentClass = '',\n  ariaLabel,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst drawer = tv({\n  base: 'transition-[transform,width] duration-200 ease-in-out top-0 h-full fixed text-rui-text bg-white dark:bg-[#363636]',\n  variants: {\n    position: {\n      left: 'left-0',\n      right: 'right-0',\n    },\n    visible: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    mini: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    withOverlay: {\n      true: 'z-[10000]',\n      false: 'z-[7]',\n    },\n  },\n  compoundVariants: [\n    { position: 'left', visible: false, mini: false, class: '-translate-x-full' },\n    { position: 'right', visible: false, mini: false, class: 'translate-x-full' },\n    { mini: true, visible: false, class: '!w-14' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false },\n});\n\nconst ui = computed<string>(() => drawer({ position, visible: modelValue.value, mini: miniVariant, withOverlay: overlay }));\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounce prevents activator click from immediately triggering close\n// (click bubbles to body → onClickOutside fires in the same tick)\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          class=\"absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50 z-[10000]\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"alive\"\n        ref=\"content\"\n        data-id=\"drawer-content\"\n        :style=\"style\"\n        :data-visible=\"modelValue || undefined\"\n        :data-position=\"position\"\n        :data-mini=\"miniVariant || undefined\"\n        :class=\"[\n          ui,\n          temporary && modelValue && 'shadow-5',\n          classNames?.content ?? contentClass,\n          classNames?.root,\n        ]\"\n        :aria-label=\"ariaLabel\"\n        :aria-hidden=\"miniVariant && !modelValue ? 'true' : undefined\"\n        v-bind=\"getRootAttrs($attrs)\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue.d.ts

@@ -1,3 +1,8 @@
+import type { VueClassValue } from '../../../types/class-value';
+export interface RuiNavigationDrawerClassNames {
+    root?: VueClassValue;
+    content?: VueClassValue;
+}
 export interface NavigationDrawerProps {
     temporary?: boolean;
     stateless?: boolean;
@@ -5,6 +10,8 @@ export interface NavigationDrawerProps {
     miniVariant?: boolean;
     overlay?: boolean;
     position?: 'left' | 'right';
+    classNames?: RuiNavigationDrawerClassNames;
+    /** @deprecated Use `classNames.content` instead */
     contentClass?: string | object | string[];
     ariaLabel?: string;
 }