npm - @rotki/ui-library - Versions diffs - 2.16.1 → 2.16.2 - Mend

@rotki/ui-library 2.16.1 → 2.16.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/dist/components/loaders/RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { tv } from "../../utils/tv.js";
+import { cn, tv } from "../../utils/tv.js";
 import RuiSkeletonBase_default from "./RuiSkeletonBase.js";
 import { SkeletonType } from "./skeleton-type.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, unref } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, unref, useAttrs } from "vue";
 //#region src/components/loaders/RuiSkeletonLoader.vue?vue&type=script&setup=true&lang.ts
 var RuiSkeletonLoader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "RuiSkeletonLoader",
@@ -24,17 +24,27 @@ var RuiSkeletonLoader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			[SkeletonType.PARAGRAPH]: "flex flex-col gap-2",
 			[SkeletonType.ARTICLE]: "flex flex-col gap-2"
 		} } });
-		const ui = computed(() => skeletonType({ type: __props.type }));
+		const attrs = useAttrs();
+		const ui = computed(() => skeletonType({
+			type: __props.type,
+			class: cn(attrs.class)
+		}));
 		const isMultiLine = computed(() => multiLineTypes.includes(__props.type));
 		return (_ctx, _cache) => {
 			return !unref(isMultiLine) ? (openBlock(), createBlock(RuiSkeletonBase_default, mergeProps({
 				key: 0,
 				class: unref(ui),
 				rounded: __props.rounded
-			}, _ctx.$attrs), null, 16, ["class", "rounded"])) : (openBlock(), createElementBlock("div", mergeProps({
+			}, {
+				...unref(attrs),
+				class: void 0
+			}), null, 16, ["class", "rounded"])) : (openBlock(), createElementBlock("div", mergeProps({
 				key: 1,
 				class: unref(ui)
-			}, _ctx.$attrs), [
+			}, {
+				...unref(attrs),
+				class: void 0
+			}), [
 				__props.type === unref(SkeletonType).ARTICLE ? (openBlock(), createBlock(RuiSkeletonBase_default, {
 					key: 0,
 					class: "w-full h-6 rounded-md mb-1",

package/dist/components/loaders/RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js","names":[~~"$attrs"~~],"sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiSkeletonBase, {\n type Props as SkeletonBaseProps,\n} from '@/components/loaders/RuiSkeletonBase.vue';\nimport { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { tv } from '@/utils/tv';\n\nexport interface Props extends SkeletonBaseProps {\n type?: SkeletonType;\n}\n\ndefineOptions({\n name: 'RuiSkeletonLoader',\n inheritAttrs: false,\n});\n\nconst { type = SkeletonType.TEXT, rounded } = defineProps<Props>();\n\nconst multiLineTypes: SkeletonType[] = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];\n\nconst skeletonType = tv({\n variants: {\n type: {\n [SkeletonType.CUSTOM]: 'box-border',\n [SkeletonType.TEXT]: 'w-full h-4 rounded-md',\n [SkeletonType.HEADING]: 'w-full h-6 rounded-md',\n [SkeletonType.BUTTON]: 'w-full max-w-[6rem] h-[2.25rem] rounded-md',\n [SkeletonType.ICON]: 'w-6 h-6 rounded-full',\n [SkeletonType.AVATAR]: 'w-10 h-10 rounded-full',\n [SkeletonType.THUMBNAIL]: 'w-14 h-14 rounded-sm',\n [SkeletonType.PARAGRAPH]: 'flex flex-col gap-2',\n [SkeletonType.ARTICLE]: 'flex flex-col gap-2',\n },\n },\n});\n\nconst ui = computed<string>(() => skeletonType({ type }));\nconst isMultiLine = computed<boolean>(() => multiLineTypes.includes(type));\n</script>\n\n<template>\n <RuiSkeletonBase\n v-if=\"!isMultiLine\"\n :class=\"ui\"\n :rounded=\"rounded\"\n v-bind=\"$attrs\"\n />\n <div\n v-else\n :class=\"ui\"\n v-bind=\"$attrs\"\n >\n <RuiSkeletonBase\n v-if=\"type === SkeletonType.ARTICLE\"\n class=\"w-full h-6 rounded-md mb-1\"\n :rounded=\"rounded\"\n />\n <RuiSkeletonBase\n class=\"w-full h-3 rounded-md\"\n :rounded=\"rounded\"\n />\n <RuiSkeletonBase\n class=\"w-full h-3 rounded-md max-w-[80%]\"\n :rounded=\"rounded\"\n />\n <RuiSkeletonBase\n class=\"w-full h-3 rounded-md max-w-[90%]\"\n :rounded=\"rounded\"\n />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAkBA,MAAM,iBAAiC,CAAC,aAAa,WAAW,aAAa,QAAQ;EAErF,MAAM,eAAe,GAAG,EACtB,UAAU,EACR,MAAM;IACH,aAAa,SAAS;IACtB,aAAa,OAAO;IACpB,aAAa,UAAU;IACvB,aAAa,SAAS;IACtB,aAAa,OAAO;IACpB,aAAa,SAAS;IACtB,aAAa,YAAY;IACzB,aAAa,YAAY;IACzB,aAAa,UAAU;GACzB,EACF,EACF,CAAC;EAEF,MAAM,KAAK,eAAuB,aAAa,~~EAAE,~~MAAG,QAAA,~~MAAG~~,CAAC,CAAC;~~EACzD~~,MAAM,cAAc,eAAwB,eAAe,SAAS,QAAA,KAAK,CAAC;;WAK/D,MAAA,YAAW,IAAA,WAAA,EADpB,YAKE,yBALF,WAKE;;IAHC,OAAO,MAAA,GAAE;IACT,SAAS,QAAA;~~MACFA~~,~~KAAAA~~,~~OAAM~~,EAAA,MAAA,IAAA,CAAA,SAAA,UAAA,CAAA,KAAA,WAAA,~~EAEhB~~,mBAsBM,OAtBN,WAsBM;;IApBH,OAAO,MAAA,GAAA;~~MACAA~~,~~KAAAA~~,~~OAAM~~,EAAA;~~IAGN~~,QAAA,SAAS,MAAA,aAAY,CAAC,WAAA,WAAA,EAD9B,YAIE,yBAAA;;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZ,YAGE,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZ,YAGE,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZ,YAGE,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA"}
1	+ {"version":3,"file":"RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiSkeletonBase, {\n type Props as SkeletonBaseProps,\n} from '@/components/loaders/RuiSkeletonBase.vue';\nimport { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props extends SkeletonBaseProps {\n type?: SkeletonType;\n}\n\ndefineOptions({\n name: 'RuiSkeletonLoader',\n inheritAttrs: false,\n});\n\nconst { type = SkeletonType.TEXT, rounded } = defineProps<Props>();\n\nconst multiLineTypes: SkeletonType[] = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];\n\nconst skeletonType = tv({\n variants: {\n type: {\n [SkeletonType.CUSTOM]: 'box-border',\n [SkeletonType.TEXT]: 'w-full h-4 rounded-md',\n [SkeletonType.HEADING]: 'w-full h-6 rounded-md',\n [SkeletonType.BUTTON]: 'w-full max-w-[6rem] h-[2.25rem] rounded-md',\n [SkeletonType.ICON]: 'w-6 h-6 rounded-full',\n [SkeletonType.AVATAR]: 'w-10 h-10 rounded-full',\n [SkeletonType.THUMBNAIL]: 'w-14 h-14 rounded-sm',\n [SkeletonType.PARAGRAPH]: 'flex flex-col gap-2',\n [SkeletonType.ARTICLE]: 'flex flex-col gap-2',\n },\n },\n});\n\nconst attrs = useAttrs();\nconst ui = computed<string>(() => skeletonType({ type, class: cn(attrs.class) }));\nconst isMultiLine = computed<boolean>(() => multiLineTypes.includes(type));\n</script>\n\n<template>\n <RuiSkeletonBase\n v-if=\"!isMultiLine\"\n :class=\"ui\"\n :rounded=\"rounded\"\n v-bind=\"{ ...attrs, class: undefined }\"\n />\n <div\n v-else\n :class=\"ui\"\n v-bind=\"{ ...attrs, class: undefined }\"\n >\n <RuiSkeletonBase\n v-if=\"type === SkeletonType.ARTICLE\"\n class=\"w-full h-6 rounded-md mb-1\"\n :rounded=\"rounded\"\n />\n <RuiSkeletonBase\n class=\"w-full h-3 rounded-md\"\n :rounded=\"rounded\"\n />\n <RuiSkeletonBase\n class=\"w-full h-3 rounded-md max-w-[80%]\"\n :rounded=\"rounded\"\n />\n <RuiSkeletonBase\n class=\"w-full h-3 rounded-md max-w-[90%]\"\n :rounded=\"rounded\"\n />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAkBA,MAAM,iBAAiC,CAAC,aAAa,WAAW,aAAa,QAAQ;EAErF,MAAM,eAAe,GAAG,EACtB,UAAU,EACR,MAAM;IACH,aAAa,SAAS;IACtB,aAAa,OAAO;IACpB,aAAa,UAAU;IACvB,aAAa,SAAS;IACtB,aAAa,OAAO;IACpB,aAAa,SAAS;IACtB,aAAa,YAAY;IACzB,aAAa,YAAY;IACzB,aAAa,UAAU;GACzB,EACF,EACF,CAAC;EAEF,MAAM,QAAQ,UAAU;EACxB,MAAM,KAAK,eAAuB,aAAa;GAAE,MAAG,QAAA;GAAG,OAAO,GAAG,MAAM,MAAA;GAAQ,CAAC,CAAC;EACjF,MAAM,cAAc,eAAwB,eAAe,SAAS,QAAA,KAAK,CAAC;;WAK/D,MAAA,YAAW,IAAA,WAAA,EADpB,YAKE,yBALF,WAKE;;IAHC,OAAO,MAAA,GAAE;IACT,SAAS,QAAA;;OACG,MAAA,MAAK;IAAA,OAAS,KAAA;IAAS,CAAA,EAAA,MAAA,IAAA,CAAA,SAAA,UAAA,CAAA,KAAA,WAAA,EAEtC,mBAsBM,OAtBN,WAsBM;;IApBH,OAAO,MAAA,GAAA;;OACK,MAAA,MAAK;IAAA,OAAS,KAAA;IAAS,CAAA,EAAA;IAG5B,QAAA,SAAS,MAAA,aAAY,CAAC,WAAA,WAAA,EAD9B,YAIE,yBAAA;;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZ,YAGE,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZ,YAGE,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZ,YAGE,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA"}

package/dist/components/overlays/badge/RuiBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiBadge.js","names":[],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { tv } from '@/utils/tv';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n text?: string \| null;\n icon?: RuiIcons \| null;\n modelValue?: boolean;\n dot?: boolean;\n left?: boolean;\n offsetX?: string \| number;\n offsetY?: string \| number;\n placement?: BadgePlacement;\n size?: BadgeSize;\n rounded?: BadgeRounded;\n color?: 'default' \| ContextColorsType;\n}\n\ndefineOptions({\n name: 'RuiBadge',\n});\n\nconst {\n text = null,\n icon = null,\n modelValue = true,\n dot = false,\n placement = BadgePlacement.top,\n left = false,\n size = BadgeSize.md,\n rounded = BadgeRounded.full,\n color = 'primary',\n offsetX = 0,\n offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n default?: () => any;\n badge?: () => any;\n icon?: () => any;\n}>();\n\nconst badgeStyles = tv({\n slots: {\n wrapper: 'relative inline-block',\n badge: 'flex items-center justify-center text-xs font-medium absolute bg-transparent text-rui-light-text dark:text-rui-text',\n content: 'flex items-center px-1',\n },\n variants: {\n color: {\n default: {},\n primary: { badge: 'text-white bg-rui-primary' },\n secondary: { badge: 'text-white bg-rui-secondary' },\n error: { badge: 'text-white bg-rui-error' },\n warning: { badge: 'text-white bg-rui-warning' },\n info: { badge: 'text-white bg-rui-info' },\n success: { badge: 'text-white bg-rui-success' },\n },\n size: {\n sm: { badge: 'min-h-4 min-w-4' },\n md: { badge: 'min-h-5 min-w-5' },\n lg: { badge: 'min-h-6 min-w-6' },\n },\n rounded: {\n sm: { badge: 'rounded-sm' },\n md: { badge: 'rounded-md' },\n lg: { badge: 'rounded-lg' },\n full: { badge: 'rounded-full' },\n },\n dot: {\n true: {},\n },\n },\n compoundVariants: [\n // Dot default color\n { dot: true, color: 'default', class: { badge: 'bg-gray-500' } },\n\n // Dot sizes (smaller than normal badge)\n { dot: true, size: 'sm', class: { badge: 'min-w-1.5 min-h-1.5' } },\n { dot: true, size: 'md', class: { badge: 'min-w-2 min-h-2' } },\n { dot: true, size: 'lg', class: { badge: 'min-w-2.5 min-h-2.5' } },\n ],\n compoundSlots: [\n // Dark mode: warning/success/info keep light text on colored bg\n { slots: ['badge'], color: ['warning', 'success', 'info'], class: 'dark:text-rui-light-text' },\n ],\n defaultVariants: {\n color: 'primary',\n size: 'md',\n rounded: 'full',\n dot: false,\n },\n});\n\nconst hasText = computed<boolean>(() => !!text \|\| !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon \|\| !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n color,\n size,\n rounded,\n dot,\n}));\n\n// Position configs: [leftOffset, rightBase, edgeBase, centerOffset] (rem / calc expressions)\nconst DOT_POS: PosConfig = [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25];\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n const ox = Number(offsetX) * 0.0625;\n const oy = Number(offsetY) * 0.0625;\n const [l, r, edge, center] = dot ? DOT_POS : BADGE_POS[size];\n\n const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n const vertical = placement === 'center'\n ? `calc(50% - ${center}rem - ${oy}rem)`\n : `calc(${edge} - ${oy}rem)`;\n\n return {\n left: horizontal,\n [placement === 'top' ? 'bottom' : 'top']: vertical,\n };\n});\n</script>\n\n<template>\n <div :class=\"ui.wrapper()\">\n <slot />\n <Transition\n appear\n enter-active-class=\"transform ease-out duration-200\"\n enter-from-class=\"scale-0\"\n enter-to-class=\"scale-100\"\n leave-active-class=\"transform ease-in duration-150\"\n leave-from-class=\"scale-100\"\n leave-to-class=\"scale-0\"\n >\n <div\n v-if=\"modelValue\"\n :class=\"ui.badge()\"\n :style=\"positionStyle\"\n :data-placement=\"placement\"\n :data-dot=\"dot \|\| undefined\"\n :data-left=\"left \|\| undefined\"\n aria-atomic=\"true\"\n aria-label=\"Badge\"\n aria-live=\"polite\"\n role=\"status\"\n >\n <span\n v-if=\"!dot\"\n :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n >\n <slot name=\"badge\">\n {{ text }}\n </slot>\n <slot name=\"icon\">\n <RuiIcon\n v-if=\"icon\"\n :name=\"icon\"\n size=\"16\"\n :class=\"{ 'ml-0.5': hasText }\"\n />\n </slot>\n </span>\n </div>\n </Transition>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiBadge.js","names":[],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { tv } from '@/utils/tv';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n text?: string \| null;\n icon?: RuiIcons \| null;\n modelValue?: boolean;\n dot?: boolean;\n left?: boolean;\n offsetX?: string \| number;\n offsetY?: string \| number;\n placement?: BadgePlacement;\n size?: BadgeSize;\n rounded?: BadgeRounded;\n color?: 'default' \| ContextColorsType;\n}\n\ndefineOptions({\n name: 'RuiBadge',\n});\n\nconst {\n text = null,\n icon = null,\n modelValue = true,\n dot = false,\n placement = BadgePlacement.top,\n left = false,\n size = BadgeSize.md,\n rounded = BadgeRounded.full,\n color = 'primary',\n offsetX = 0,\n offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n default?: () => any;\n badge?: () => any;\n icon?: () => any;\n}>();\n\nconst badgeStyles = tv({\n slots: {\n wrapper: 'relative inline-block',\n badge: 'flex items-center justify-center text-xs font-medium absolute bg-transparent text-rui-light-text dark:text-rui-text',\n content: 'flex items-center px-1.5',\n },\n variants: {\n color: {\n default: {},\n primary: { badge: 'text-white bg-rui-primary' },\n secondary: { badge: 'text-white bg-rui-secondary' },\n error: { badge: 'text-white bg-rui-error' },\n warning: { badge: 'text-white bg-rui-warning' },\n info: { badge: 'text-white bg-rui-info' },\n success: { badge: 'text-white bg-rui-success' },\n },\n size: {\n sm: { badge: 'min-h-4 min-w-4' },\n md: { badge: 'min-h-5 min-w-5' },\n lg: { badge: 'min-h-6 min-w-6' },\n },\n rounded: {\n sm: { badge: 'rounded-sm' },\n md: { badge: 'rounded-md' },\n lg: { badge: 'rounded-lg' },\n full: { badge: 'rounded-full' },\n },\n dot: {\n true: {},\n },\n },\n compoundVariants: [\n // Dot default color\n { dot: true, color: 'default', class: { badge: 'bg-gray-500' } },\n\n // Dot sizes (smaller than normal badge)\n { dot: true, size: 'sm', class: { badge: 'min-w-1.5 min-h-1.5' } },\n { dot: true, size: 'md', class: { badge: 'min-w-2 min-h-2' } },\n { dot: true, size: 'lg', class: { badge: 'min-w-2.5 min-h-2.5' } },\n ],\n compoundSlots: [\n // Dark mode: warning/success/info keep light text on colored bg\n { slots: ['badge'], color: ['warning', 'success', 'info'], class: 'dark:text-rui-light-text' },\n ],\n defaultVariants: {\n color: 'primary',\n size: 'md',\n rounded: 'full',\n dot: false,\n },\n});\n\nconst hasText = computed<boolean>(() => !!text \|\| !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon \|\| !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n color,\n size,\n rounded,\n dot,\n}));\n\n// Position configs: [leftOffset, rightBase, edgeBase, centerOffset] (rem / calc expressions)\nconst DOT_POS: PosConfig = [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25];\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n const ox = Number(offsetX) * 0.0625;\n const oy = Number(offsetY) * 0.0625;\n const [l, r, edge, center] = dot ? DOT_POS : BADGE_POS[size];\n\n const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n const vertical = placement === 'center'\n ? `calc(50% - ${center}rem - ${oy}rem)`\n : `calc(${edge} - ${oy}rem)`;\n\n return {\n left: horizontal,\n [placement === 'top' ? 'bottom' : 'top']: vertical,\n };\n});\n</script>\n\n<template>\n <div :class=\"ui.wrapper()\">\n <slot />\n <Transition\n appear\n enter-active-class=\"transform ease-out duration-200\"\n enter-from-class=\"scale-0\"\n enter-to-class=\"scale-100\"\n leave-active-class=\"transform ease-in duration-150\"\n leave-from-class=\"scale-100\"\n leave-to-class=\"scale-0\"\n >\n <div\n v-if=\"modelValue\"\n :class=\"ui.badge()\"\n :style=\"positionStyle\"\n :data-placement=\"placement\"\n :data-dot=\"dot \|\| undefined\"\n :data-left=\"left \|\| undefined\"\n aria-atomic=\"true\"\n aria-label=\"Badge\"\n aria-live=\"polite\"\n role=\"status\"\n >\n <span\n v-if=\"!dot\"\n :class=\"ui.content({ class: hasIconAndText ? 'px-2.5' : undefined })\"\n >\n <slot name=\"badge\">\n {{ text }}\n </slot>\n <slot name=\"icon\">\n <RuiIcon\n v-if=\"icon\"\n :name=\"icon\"\n size=\"16\"\n :class=\"{ 'ml-0.5': hasText }\"\n />\n </slot>\n </span>\n </div>\n </Transition>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/badge/RuiBadge.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -40,7 +40,7 @@ var RuiBadge_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			slots: {
 				wrapper: "relative inline-block",
 				badge: "flex items-center justify-center text-xs font-medium absolute bg-transparent text-rui-light-text dark:text-rui-text",
-				content: "flex items-center px-1"
+				content: "flex items-center px-1.5"
 			},
 			variants: {
 				color: {
@@ -171,7 +171,7 @@ var RuiBadge_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					role: "status"
 				}, [!__props.dot ? (openBlock(), createElementBlock("span", {
 					key: 0,
-					class: normalizeClass(unref(ui).content({ class: unref(hasIconAndText) ? "px-2" : void 0 }))
+					class: normalizeClass(unref(ui).content({ class: unref(hasIconAndText) ? "px-2.5" : void 0 }))
 				}, [renderSlot(_ctx.$slots, "badge", {}, () => [createTextVNode(toDisplayString(__props.text), 1)]), renderSlot(_ctx.$slots, "icon", {}, () => [__props.icon ? (openBlock(), createBlock(RuiIcon_default, {
 					key: 0,
 					name: __props.icon,

package/dist/components/overlays/badge/RuiBadge.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiBadge.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { tv } from '@/utils/tv';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n text?: string \| null;\n icon?: RuiIcons \| null;\n modelValue?: boolean;\n dot?: boolean;\n left?: boolean;\n offsetX?: string \| number;\n offsetY?: string \| number;\n placement?: BadgePlacement;\n size?: BadgeSize;\n rounded?: BadgeRounded;\n color?: 'default' \| ContextColorsType;\n}\n\ndefineOptions({\n name: 'RuiBadge',\n});\n\nconst {\n text = null,\n icon = null,\n modelValue = true,\n dot = false,\n placement = BadgePlacement.top,\n left = false,\n size = BadgeSize.md,\n rounded = BadgeRounded.full,\n color = 'primary',\n offsetX = 0,\n offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n default?: () => any;\n badge?: () => any;\n icon?: () => any;\n}>();\n\nconst badgeStyles = tv({\n slots: {\n wrapper: 'relative inline-block',\n badge: 'flex items-center justify-center text-xs font-medium absolute bg-transparent text-rui-light-text dark:text-rui-text',\n content: 'flex items-center px-1',\n },\n variants: {\n color: {\n default: {},\n primary: { badge: 'text-white bg-rui-primary' },\n secondary: { badge: 'text-white bg-rui-secondary' },\n error: { badge: 'text-white bg-rui-error' },\n warning: { badge: 'text-white bg-rui-warning' },\n info: { badge: 'text-white bg-rui-info' },\n success: { badge: 'text-white bg-rui-success' },\n },\n size: {\n sm: { badge: 'min-h-4 min-w-4' },\n md: { badge: 'min-h-5 min-w-5' },\n lg: { badge: 'min-h-6 min-w-6' },\n },\n rounded: {\n sm: { badge: 'rounded-sm' },\n md: { badge: 'rounded-md' },\n lg: { badge: 'rounded-lg' },\n full: { badge: 'rounded-full' },\n },\n dot: {\n true: {},\n },\n },\n compoundVariants: [\n // Dot default color\n { dot: true, color: 'default', class: { badge: 'bg-gray-500' } },\n\n // Dot sizes (smaller than normal badge)\n { dot: true, size: 'sm', class: { badge: 'min-w-1.5 min-h-1.5' } },\n { dot: true, size: 'md', class: { badge: 'min-w-2 min-h-2' } },\n { dot: true, size: 'lg', class: { badge: 'min-w-2.5 min-h-2.5' } },\n ],\n compoundSlots: [\n // Dark mode: warning/success/info keep light text on colored bg\n { slots: ['badge'], color: ['warning', 'success', 'info'], class: 'dark:text-rui-light-text' },\n ],\n defaultVariants: {\n color: 'primary',\n size: 'md',\n rounded: 'full',\n dot: false,\n },\n});\n\nconst hasText = computed<boolean>(() => !!text \|\| !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon \|\| !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n color,\n size,\n rounded,\n dot,\n}));\n\n// Position configs: [leftOffset, rightBase, edgeBase, centerOffset] (rem / calc expressions)\nconst DOT_POS: PosConfig = [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25];\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n const ox = Number(offsetX) * 0.0625;\n const oy = Number(offsetY) * 0.0625;\n const [l, r, edge, center] = dot ? DOT_POS : BADGE_POS[size];\n\n const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n const vertical = placement === 'center'\n ? `calc(50% - ${center}rem - ${oy}rem)`\n : `calc(${edge} - ${oy}rem)`;\n\n return {\n left: horizontal,\n [placement === 'top' ? 'bottom' : 'top']: vertical,\n };\n});\n</script>\n\n<template>\n <div :class=\"ui.wrapper()\">\n <slot />\n <Transition\n appear\n enter-active-class=\"transform ease-out duration-200\"\n enter-from-class=\"scale-0\"\n enter-to-class=\"scale-100\"\n leave-active-class=\"transform ease-in duration-150\"\n leave-from-class=\"scale-100\"\n leave-to-class=\"scale-0\"\n >\n <div\n v-if=\"modelValue\"\n :class=\"ui.badge()\"\n :style=\"positionStyle\"\n :data-placement=\"placement\"\n :data-dot=\"dot \|\| undefined\"\n :data-left=\"left \|\| undefined\"\n aria-atomic=\"true\"\n aria-label=\"Badge\"\n aria-live=\"polite\"\n role=\"status\"\n >\n <span\n v-if=\"!dot\"\n :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n >\n <slot name=\"badge\">\n {{ text }}\n </slot>\n <slot name=\"icon\">\n <RuiIcon\n v-if=\"icon\"\n :name=\"icon\"\n size=\"16\"\n :class=\"{ 'ml-0.5': hasText }\"\n />\n </slot>\n </span>\n </div>\n </Transition>\n </div>\n</template>\n"],"mappings":"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~~SAAY~~,KAAA,GAAS,CAAA,CAAA;~~QAE/D~~,WAEO,KAAA,QAAA,SAAA,EAAA,QAAA,CAAA,gBAAA,gBADF,QAAA,KAAI,EAAA,EAAA,CAAA,CAAA,EAET,WAOO,KAAA,QAAA,QAAA,EAAA,QAAA,CALG,QAAA,QAAA,WAAA,EADR,YAKE,iBAAA;;KAHC,MAAM,QAAA;KACP,MAAK;KACJ,OAAK,eAAA,EAAA,UAAc,MAAA,QAAO,EAAA,CAAA"}
1	+ {"version":3,"file":"RuiBadge.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { tv } from '@/utils/tv';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n text?: string \| null;\n icon?: RuiIcons \| null;\n modelValue?: boolean;\n dot?: boolean;\n left?: boolean;\n offsetX?: string \| number;\n offsetY?: string \| number;\n placement?: BadgePlacement;\n size?: BadgeSize;\n rounded?: BadgeRounded;\n color?: 'default' \| ContextColorsType;\n}\n\ndefineOptions({\n name: 'RuiBadge',\n});\n\nconst {\n text = null,\n icon = null,\n modelValue = true,\n dot = false,\n placement = BadgePlacement.top,\n left = false,\n size = BadgeSize.md,\n rounded = BadgeRounded.full,\n color = 'primary',\n offsetX = 0,\n offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n default?: () => any;\n badge?: () => any;\n icon?: () => any;\n}>();\n\nconst badgeStyles = tv({\n slots: {\n wrapper: 'relative inline-block',\n badge: 'flex items-center justify-center text-xs font-medium absolute bg-transparent text-rui-light-text dark:text-rui-text',\n content: 'flex items-center px-1.5',\n },\n variants: {\n color: {\n default: {},\n primary: { badge: 'text-white bg-rui-primary' },\n secondary: { badge: 'text-white bg-rui-secondary' },\n error: { badge: 'text-white bg-rui-error' },\n warning: { badge: 'text-white bg-rui-warning' },\n info: { badge: 'text-white bg-rui-info' },\n success: { badge: 'text-white bg-rui-success' },\n },\n size: {\n sm: { badge: 'min-h-4 min-w-4' },\n md: { badge: 'min-h-5 min-w-5' },\n lg: { badge: 'min-h-6 min-w-6' },\n },\n rounded: {\n sm: { badge: 'rounded-sm' },\n md: { badge: 'rounded-md' },\n lg: { badge: 'rounded-lg' },\n full: { badge: 'rounded-full' },\n },\n dot: {\n true: {},\n },\n },\n compoundVariants: [\n // Dot default color\n { dot: true, color: 'default', class: { badge: 'bg-gray-500' } },\n\n // Dot sizes (smaller than normal badge)\n { dot: true, size: 'sm', class: { badge: 'min-w-1.5 min-h-1.5' } },\n { dot: true, size: 'md', class: { badge: 'min-w-2 min-h-2' } },\n { dot: true, size: 'lg', class: { badge: 'min-w-2.5 min-h-2.5' } },\n ],\n compoundSlots: [\n // Dark mode: warning/success/info keep light text on colored bg\n { slots: ['badge'], color: ['warning', 'success', 'info'], class: 'dark:text-rui-light-text' },\n ],\n defaultVariants: {\n color: 'primary',\n size: 'md',\n rounded: 'full',\n dot: false,\n },\n});\n\nconst hasText = computed<boolean>(() => !!text \|\| !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon \|\| !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n color,\n size,\n rounded,\n dot,\n}));\n\n// Position configs: [leftOffset, rightBase, edgeBase, centerOffset] (rem / calc expressions)\nconst DOT_POS: PosConfig = [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25];\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n const ox = Number(offsetX) * 0.0625;\n const oy = Number(offsetY) * 0.0625;\n const [l, r, edge, center] = dot ? DOT_POS : BADGE_POS[size];\n\n const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n const vertical = placement === 'center'\n ? `calc(50% - ${center}rem - ${oy}rem)`\n : `calc(${edge} - ${oy}rem)`;\n\n return {\n left: horizontal,\n [placement === 'top' ? 'bottom' : 'top']: vertical,\n };\n});\n</script>\n\n<template>\n <div :class=\"ui.wrapper()\">\n <slot />\n <Transition\n appear\n enter-active-class=\"transform ease-out duration-200\"\n enter-from-class=\"scale-0\"\n enter-to-class=\"scale-100\"\n leave-active-class=\"transform ease-in duration-150\"\n leave-from-class=\"scale-100\"\n leave-to-class=\"scale-0\"\n >\n <div\n v-if=\"modelValue\"\n :class=\"ui.badge()\"\n :style=\"positionStyle\"\n :data-placement=\"placement\"\n :data-dot=\"dot \|\| undefined\"\n :data-left=\"left \|\| undefined\"\n aria-atomic=\"true\"\n aria-label=\"Badge\"\n aria-live=\"polite\"\n role=\"status\"\n >\n <span\n v-if=\"!dot\"\n :class=\"ui.content({ class: hasIconAndText ? 'px-2.5' : undefined })\"\n >\n <slot name=\"badge\">\n {{ text }}\n </slot>\n <slot name=\"icon\">\n <RuiIcon\n v-if=\"icon\"\n :name=\"icon\"\n size=\"16\"\n :class=\"{ 'ml-0.5': hasText }\"\n />\n </slot>\n </span>\n </div>\n </Transition>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,QAAQ,UAIV;EAEJ,MAAM,cAAc,GAAG;GACrB,OAAO;IACL,SAAS;IACT,OAAO;IACP,SAAS;IACV;GACD,UAAU;IACR,OAAO;KACL,SAAS,EAAE;KACX,SAAS,EAAE,OAAO,6BAA6B;KAC/C,WAAW,EAAE,OAAO,+BAA+B;KACnD,OAAO,EAAE,OAAO,2BAA2B;KAC3C,SAAS,EAAE,OAAO,6BAA6B;KAC/C,MAAM,EAAE,OAAO,0BAA0B;KACzC,SAAS,EAAE,OAAO,6BAAA;KACnB;IACD,MAAM;KACJ,IAAI,EAAE,OAAO,mBAAmB;KAChC,IAAI,EAAE,OAAO,mBAAmB;KAChC,IAAI,EAAE,OAAO,mBAAA;KACd;IACD,SAAS;KACP,IAAI,EAAE,OAAO,cAAc;KAC3B,IAAI,EAAE,OAAO,cAAc;KAC3B,IAAI,EAAE,OAAO,cAAc;KAC3B,MAAM,EAAE,OAAO,gBAAA;KAChB;IACD,KAAK,EACH,MAAM,EAAE,EAAA;IAEX;GACD,kBAAkB;IAEhB;KAAE,KAAK;KAAM,OAAO;KAAW,OAAO,EAAE,OAAO,eAAA;KAAiB;IAGhE;KAAE,KAAK;KAAM,MAAM;KAAM,OAAO,EAAE,OAAO,uBAAA;KAAyB;IAClE;KAAE,KAAK;KAAM,MAAM;KAAM,OAAO,EAAE,OAAO,mBAAA;KAAqB;IAC9D;KAAE,KAAK;KAAM,MAAM;KAAM,OAAO,EAAE,OAAO,uBAAA;;IAC1C;GACD,eAAe,CAEb;IAAE,OAAO,CAAC,QAAQ;IAAE,OAAO;KAAC;KAAW;KAAW;KAAO;IAAE,OAAO;IAA4B,CAC/F;GACD,iBAAiB;IACf,OAAO;IACP,MAAM;IACN,SAAS;IACT,KAAK;;GAER,CAAC;EAEF,MAAM,UAAU,eAAwB,CAAC,CAAC,QAAA,QAAQ,CAAC,CAAC,MAAM,MAAM;EAEhE,MAAM,iBAAiB,gBAAyB,CAAC,CAAC,QAAA,QAAQ,CAAC,CAAC,MAAM,SAAS,IAAI,QAAQ,CAAC;EAExF,MAAM,KAAK,eAA+C,YAAY;GACpE,OAAI,QAAA;GACJ,MAAG,QAAA;GACH,SAAM,QAAA;GACN,KAAE,QAAA;GACH,CAAC,CAAC;EAGH,MAAM,UAAqB;GAAC;GAAO;GAAkB;GAAkB;GAAK;EAC5E,MAAM,YAA0C;GAC9C,IAAI;IAAC;IAAO;IAAmB;IAAmB;IAAK;GACvD,IAAI;IAAC;IAAO;IAAiB;IAAiB;IAAK;GACnD,IAAI;IAAC;IAAO;IAAiB;IAAiB;;GAC/C;EAED,MAAM,gBAAgB,eAAuC;GAC3D,MAAM,KAAK,OAAO,QAAA,QAAQ,GAAG;GAC7B,MAAM,KAAK,OAAO,QAAA,QAAQ,GAAG;GAC7B,MAAM,CAAC,GAAG,GAAG,MAAM,UAAU,QAAA,MAAM,UAAU,UAAU,QAAA;GAEvD,MAAM,aAAa,QAAQ,QAAA,OAAO,GAAG,EAAE,OAAO,EAAE,KAAK,GAAG;GACxD,MAAM,WAAW,QAAA,cAAc,WAC3B,cAAc,OAAO,QAAQ,GAAG,QAChC,QAAQ,KAAK,KAAK,GAAG;AAEzB,UAAO;IACL,MAAM;KACL,QAAA,cAAc,QAAQ,WAAW,QAAQ;IAC3C;IACD;;uBAIA,mBAyCM,OAAA,EAzCA,OAAK,eAAE,MAAA,GAAE,CAAC,SAAO,CAAA,EAAA,EAAA,CACrB,WAAQ,KAAA,QAAA,UAAA,EACR,YAsCa,YAAA;IArCX,QAAA;IACA,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACf,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;;2BA8BT,CA3BE,QAAA,cAAA,WAAA,EADR,mBA4BM,OAAA;;KA1BH,OAAK,eAAE,MAAA,GAAE,CAAC,OAAK,CAAA;KACf,OAAK,eAAE,MAAA,cAAa,CAAA;KACpB,kBAAgB,QAAA;KAChB,YAAU,QAAA,OAAO,KAAA;KACjB,aAAW,QAAA,QAAQ,KAAA;KACpB,eAAY;KACZ,cAAW;KACX,aAAU;KACV,MAAK;SAGI,QAAA,OAAA,WAAA,EADT,mBAeO,QAAA;;KAbJ,OAAK,eAAE,MAAA,GAAE,CAAC,QAAO,EAAA,OAAU,MAAA,eAAc,GAAA,WAAc,KAAA,GAAS,CAAA,CAAA;QAEjE,WAEO,KAAA,QAAA,SAAA,EAAA,QAAA,CAAA,gBAAA,gBADF,QAAA,KAAI,EAAA,EAAA,CAAA,CAAA,EAET,WAOO,KAAA,QAAA,QAAA,EAAA,QAAA,CALG,QAAA,QAAA,WAAA,EADR,YAKE,iBAAA;;KAHC,MAAM,QAAA;KACP,MAAK;KACJ,OAAK,eAAA,EAAA,UAAc,MAAA,QAAO,EAAA,CAAA"}

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

	@@ -1 +1 @@
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":""}
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\n// NOTE: both computed functions must return the same* object shape from\n// every branch — otherwise vue-tsc infers the slot's `attrs` type as a\n// discriminated union where each key is either \"all defined\" or \"all\n// undefined\", which breaks consumer code that types its own `attrs`\n// handler with individually-optional keys.\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n const clickVal = get(click);\n return {\n onMouseover: disabled\n ? undefined\n : () => {\n if (openOnHover)\n onOpen();\n },\n onMouseleave: disabled\n ? undefined\n : () => {\n if (openOnHover && !clickVal)\n onClose();\n },\n };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n ...get(baseMenuAttrs),\n onClick: disabled ? undefined : 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_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -99,24 +99,20 @@ var RuiMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			dense: __props.dense
 		}));
 		const baseMenuAttrs = computed(() => {
-			if (__props.disabled) return {};
 			const clickVal = get$1(click);
 			return {
-				onMouseover: () => {
+				onMouseover: __props.disabled ? void 0 : () => {
 					if (__props.openOnHover) onOpen();
 				},
-				onMouseleave: () => {
+				onMouseleave: __props.disabled ? void 0 : () => {
 					if (__props.openOnHover && !clickVal) onClose();
 				}
 			};
 		});
-		const menuAttrs = computed(() => {
-			if (__props.disabled) return {};
-			return {
-				...get$1(baseMenuAttrs),
-				onClick: checkClick
-			};
-		});
+		const menuAttrs = computed(() => ({
+			...get$1(baseMenuAttrs),
+			onClick: __props.disabled ? void 0 : checkClick
+		}));
 		function focusOnContent() {
 			const content = get$1(menuContent);
 			if (!content) return;

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

	@@ -1 +1 @@
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":"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"}
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\n// NOTE: both computed functions must return the same* object shape from\n// every branch — otherwise vue-tsc infers the slot's `attrs` type as a\n// discriminated union where each key is either \"all defined\" or \"all\n// undefined\", which breaks consumer code that types its own `attrs`\n// handler with individually-optional keys.\nconst baseMenuAttrs = computed<BaseMenuAttrs>(() => {\n const clickVal = get(click);\n return {\n onMouseover: disabled\n ? undefined\n : () => {\n if (openOnHover)\n onOpen();\n },\n onMouseleave: disabled\n ? undefined\n : () => {\n if (openOnHover && !clickVal)\n onClose();\n },\n };\n});\n\nconst menuAttrs = computed<MenuAttrs>(() => ({\n ...get(baseMenuAttrs),\n onClick: disabled ? undefined : 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":"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"}

package/dist/components/overlays/notification/RuiNotification.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiNotification.js","names":[],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\n\nexport interface NotificationProps {\n timeout: number;\n width?: number \| string;\n theme?: 'light' \| 'dark';\n}\n\ndefineOptions({\n name: 'RuiNotification',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ required: true });\n\nconst { timeout, width = 400, theme } = defineProps<NotificationProps>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n\nconst style = computed<{ width: string \| undefined }>(() => ({\n width: transformPropsUnit(width),\n}));\n\nconst { start, stop } = useTimeoutFn(() => {\n set(modelValue, false);\n}, timeout, { immediate: false });\n\nfunction dismiss(): void {\n if (timeout < 0)\n return;\n\n set(modelValue, false);\n}\n\nwatchImmediate(modelValue, (display) => {\n if (!display) {\n stop();\n return;\n }\n\n if (timeout > 0) {\n stop();\n start();\n }\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <Transition\n enter-from-class=\"opacity-0\"\n enter-active-class=\"ease-out duration-150\"\n enter-to-class=\"opacity-100\"\n leave-from-class=\"opacity-100\"\n leave-active-class=\"ease-in duration-100\"\n leave-to-class=\"opacity-0\"\n >\n <div\n v-if=\"modelValue\"\n role=\"alert\"\n aria-live=\"polite\"\n class=\"~~top-2~~ ~~right-2~~ ~~fixed~~ ~~drop-shadow-lg rounded-sm z-50\"\n :class=\"~~{\n 'bg-white dark:bg-[#363636]': !theme,\n 'bg-white text-rui-light-text': theme === 'light',\n 'bg-[#363636] text-rui-dark-text': theme === 'dark',\n }\"\n :style=\"style\"\n v-bind=\"$attrs\"\n @click=\"dismiss()\"\n >\n <slot />\n </div>\n </Transition>\n </Teleport>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiNotification.js","names":[],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface NotificationProps {\n timeout: number;\n width?: number \| string;\n theme?: 'light' \| 'dark';\n}\n\ndefineOptions({\n name: 'RuiNotification',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ required: true });\n\nconst { timeout, width = 400, theme } = defineProps<NotificationProps>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n\nconst style = computed<{ width: string \| undefined }>(() => ({\n width: transformPropsUnit(width),\n}));\n\nconst rootStyle = tv({ base: 'top-2 right-2 fixed drop-shadow-lg rounded-sm z-50' });\n\nconst { start, stop } = useTimeoutFn(() => {\n set(modelValue, false);\n}, timeout, { immediate: false });\n\nfunction dismiss(): void {\n if (timeout < 0)\n return;\n\n set(modelValue, false);\n}\n\nwatchImmediate(modelValue, (display) => {\n if (!display) {\n stop();\n return;\n }\n\n if (timeout > 0) {\n stop();\n start();\n }\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <Transition\n enter-from-class=\"opacity-0\"\n enter-active-class=\"ease-out duration-150\"\n enter-to-class=\"opacity-100\"\n leave-from-class=\"opacity-100\"\n leave-active-class=\"ease-in duration-100\"\n leave-to-class=\"opacity-0\"\n >\n <div\n v-if=\"modelValue\"\n role=\"alert\"\n aria-live=\"polite\"\n :class=\"rootStyle({ class: cn([$attrs.class, {\n 'bg-white dark:bg-[#363636]': !theme,\n 'bg-white text-rui-light-text': theme === 'light',\n 'bg-[#363636] text-rui-dark-text': theme === 'dark',\n }]) })\"\n :style=\"style\"\n v-bind=\"{ ...$attrs, class: undefined }\"\n @click=\"dismiss()\"\n >\n <slot />\n </div>\n </Transition>\n </Teleport>\n</template>\n"],"mappings":""}

package/dist/components/overlays/notification/RuiNotification.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { cn, tv } from "../../../utils/tv.js";
 import { transformPropsUnit } from "../../../utils/helpers.js";
 import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeModels, mergeProps, openBlock, renderSlot, unref, useModel, withCtx } from "vue";
 import { useTimeoutFn, watchImmediate } from "@vueuse/core";
@@ -22,6 +23,7 @@ var RuiNotification_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
 		const style = computed(() => ({ width: transformPropsUnit(__props.width) }));
+		const rootStyle = tv({ base: "top-2 right-2 fixed drop-shadow-lg rounded-sm z-50" });
 		const { start, stop } = useTimeoutFn(() => {
 			set$1(modelValue, false);
 		}, __props.timeout, { immediate: false });
@@ -52,13 +54,16 @@ var RuiNotification_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 					key: 0,
 					role: "alert",
 					"aria-live": "polite",
-					class: ["top-2 right-2 fixed drop-shadow-lg rounded-sm z-50", {
+					class: unref(rootStyle)({ class: unref(cn)([_ctx.$attrs.class, {
 						"bg-white dark:bg-[#363636]": !__props.theme,
 						"bg-white text-rui-light-text": __props.theme === "light",
 						"bg-[#363636] text-rui-dark-text": __props.theme === "dark"
-					}],
+					}]) }),
 					style: unref(style)
-				}, _ctx.$attrs, { onClick: _cache[0] || (_cache[0] = ($event) => dismiss()) }), [renderSlot(_ctx.$slots, "default")], 16)) : createCommentVNode("", true)]),
+				}, {
+					..._ctx.$attrs,
+					class: void 0
+				}, { onClick: _cache[0] || (_cache[0] = ($event) => dismiss()) }), [renderSlot(_ctx.$slots, "default")], 16)) : createCommentVNode("", true)]),
 				_: 3
 			})]);
 		};

package/dist/components/overlays/notification/RuiNotification.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiNotification.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\n\nexport interface NotificationProps {\n timeout: number;\n width?: number \| string;\n theme?: 'light' \| 'dark';\n}\n\ndefineOptions({\n name: 'RuiNotification',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ required: true });\n\nconst { timeout, width = 400, theme } = defineProps<NotificationProps>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n\nconst style = computed<{ width: string \| undefined }>(() => ({\n width: transformPropsUnit(width),\n}));\n\nconst { start, stop } = useTimeoutFn(() => {\n set(modelValue, false);\n}, timeout, { immediate: false });\n\nfunction dismiss(): void {\n if (timeout < 0)\n return;\n\n set(modelValue, false);\n}\n\nwatchImmediate(modelValue, (display) => {\n if (!display) {\n stop();\n return;\n }\n\n if (timeout > 0) {\n stop();\n start();\n }\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <Transition\n enter-from-class=\"opacity-0\"\n enter-active-class=\"ease-out duration-150\"\n enter-to-class=\"opacity-100\"\n leave-from-class=\"opacity-100\"\n leave-active-class=\"ease-in duration-100\"\n leave-to-class=\"opacity-0\"\n >\n <div\n v-if=\"modelValue\"\n role=\"alert\"\n aria-live=\"polite\"\n class=\"~~top-2~~ ~~right-2~~ ~~fixed~~ ~~drop-shadow-lg rounded-sm z-50\"\n :class=\"~~{\n 'bg-white dark:bg-[#363636]': !theme,\n 'bg-white text-rui-light-text': theme === 'light',\n 'bg-[#363636] text-rui-dark-text': theme === 'dark',\n }\"\n :style=\"style\"\n v-bind=\"$attrs\"\n @click=\"dismiss()\"\n >\n <slot />\n </div>\n </Transition>\n </Teleport>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;EAeA~~,MAAM,aAAa,SAAoB,SAAA,aAAoB;EAQ3D,MAAM,QAAQ,gBAA+C,EAC3D,OAAO,mBAAmB,QAAA,MAAM,EACjC,EAAE;EAEH,MAAM,EAAE,OAAO,SAAS,mBAAmB;AACzC,SAAI,YAAY,MAAM;KACrB,QAAA,SAAS,EAAE,WAAW,OAAO,CAAC;EAEjC,SAAS,UAAgB;AACvB,OAAI,QAAA,UAAU,EACZ;AAEF,SAAI,YAAY,MAAM;;AAGxB,iBAAe,aAAa,YAAY;AACtC,OAAI,CAAC,SAAS;AACZ,UAAM;AACN;;AAGF,OAAI,QAAA,UAAU,GAAG;AACf,UAAM;AACN,WAAO;;IAET;;uBAIA,~~YA0BW~~,UAAA,~~EA1BD~~,IAAG,QAAM,EAAA,CACjB,~~YAwBa~~,YAAA;~~IAvBX~~,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;;~~2BAiBT~~,~~CAdE~~,WAAA,SAAA,WAAA,EADR,~~mBAeM~~,~~OAfN~~,~~WAeM~~;;~~KAbJ~~,MAAK;KACL,aAAU;~~KACV~~,~~OAAK~~,~~CAAC~~,~~sDAAoD~~;~~qCACP~~,QAAA;sCAAiD,QAAA,UAAK;yCAA2D,QAAA,UAAK;;~~KAKxK~~,OAAO,MAAA,MAAA~~;OACAA~~,KAAAA,~~QAAM~~,~~EACb~~,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,SAAO,GAAA,CAAA,EAAA,CAEf,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"RuiNotification.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface NotificationProps {\n timeout: number;\n width?: number \| string;\n theme?: 'light' \| 'dark';\n}\n\ndefineOptions({\n name: 'RuiNotification',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ required: true });\n\nconst { timeout, width = 400, theme } = defineProps<NotificationProps>();\n\ndefineSlots<{\n default?: () => any;\n}>();\n\nconst style = computed<{ width: string \| undefined }>(() => ({\n width: transformPropsUnit(width),\n}));\n\nconst rootStyle = tv({ base: 'top-2 right-2 fixed drop-shadow-lg rounded-sm z-50' });\n\nconst { start, stop } = useTimeoutFn(() => {\n set(modelValue, false);\n}, timeout, { immediate: false });\n\nfunction dismiss(): void {\n if (timeout < 0)\n return;\n\n set(modelValue, false);\n}\n\nwatchImmediate(modelValue, (display) => {\n if (!display) {\n stop();\n return;\n }\n\n if (timeout > 0) {\n stop();\n start();\n }\n});\n</script>\n\n<template>\n <Teleport to=\"body\">\n <Transition\n enter-from-class=\"opacity-0\"\n enter-active-class=\"ease-out duration-150\"\n enter-to-class=\"opacity-100\"\n leave-from-class=\"opacity-100\"\n leave-active-class=\"ease-in duration-100\"\n leave-to-class=\"opacity-0\"\n >\n <div\n v-if=\"modelValue\"\n role=\"alert\"\n aria-live=\"polite\"\n :class=\"rootStyle({ class: cn([$attrs.class, {\n 'bg-white dark:bg-[#363636]': !theme,\n 'bg-white text-rui-light-text': theme === 'light',\n 'bg-[#363636] text-rui-dark-text': theme === 'dark',\n }]) })\"\n :style=\"style\"\n v-bind=\"{ ...$attrs, class: undefined }\"\n @click=\"dismiss()\"\n >\n <slot />\n </div>\n </Transition>\n </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,aAAa,SAAoB,SAAA,aAAoB;EAQ3D,MAAM,QAAQ,gBAA+C,EAC3D,OAAO,mBAAmB,QAAA,MAAM,EACjC,EAAE;EAEH,MAAM,YAAY,GAAG,EAAE,MAAM,sDAAsD,CAAC;EAEpF,MAAM,EAAE,OAAO,SAAS,mBAAmB;AACzC,SAAI,YAAY,MAAM;KACrB,QAAA,SAAS,EAAE,WAAW,OAAO,CAAC;EAEjC,SAAS,UAAgB;AACvB,OAAI,QAAA,UAAU,EACZ;AAEF,SAAI,YAAY,MAAM;;AAGxB,iBAAe,aAAa,YAAY;AACtC,OAAI,CAAC,SAAS;AACZ,UAAM;AACN;;AAGF,OAAI,QAAA,UAAU,GAAG;AACf,UAAM;AACN,WAAO;;IAET;;uBAIA,YAyBW,UAAA,EAzBD,IAAG,QAAM,EAAA,CACjB,YAuBa,YAAA;IAtBX,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;;2BAgBT,CAbE,WAAA,SAAA,WAAA,EADR,mBAcM,OAdN,WAcM;;KAZJ,MAAK;KACL,aAAU;KACT,OAAO,MAAA,UAAS,CAAA,EAAA,OAAU,MAAA,GAAE,CAAA,CAAEA,KAAAA,OAAO,OAAK;qCAA6C,QAAA;sCAAiD,QAAA,UAAK;yCAA2D,QAAA,UAAK;;KAK7M,OAAO,MAAA,MAAA;;QACKA,KAAAA;KAAM,OAAS,KAAA;KAAS,EAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,SAAO,GAAA,CAAA,EAAA,CAEf,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}

package/dist/components/overlays/tooltip/RuiTooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiTooltip.js","names":[],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n root?: VueClassValue;\n tooltip?: VueClassValue;\n}\n\nexport interface Props {\n text?: string \| null;\n disabled?: boolean;\n hideArrow?: boolean;\n openDelay?: number;\n closeDelay?: number;\n persistOnTooltipHover?: boolean;\n options?: FloatingOptions;\n /** @deprecated Use `options` instead /\n popper?: PopperOptions;\n classNames?: RuiTooltipClassNames;\n /* @deprecated Use `classNames.tooltip` instead */\n tooltipClass?: string;\n}\n\ndefineOptions({\n name: 'RuiTooltip',\n});\n\nconst {\n text = null,\n disabled = false,\n hideArrow = false,\n openDelay = 0,\n closeDelay = 500,\n persistOnTooltipHover = false,\n options,\n popper,\n classNames,\n tooltipClass = '',\n} = defineProps<Props>();\n\ndefineSlots<{\n activator?: (props: { open: boolean; close: () => void }) => any;\n default?: () => any;\n}>();\n\nconst tooltipId = useId();\n\nconst {\n reference: activator,\n popover: tooltip,\n open,\n visible,\n currentPlacement,\n onOpen,\n onClose,\n onLeaveComplete,\n updatePosition,\n} = useFloating(\n () => popper ? toFloatingOptions(popper) : (options ?? {}),\n () => disabled,\n () => openDelay,\n () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' \| 'left' \| 'right' \| 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n const placement = get(currentPlacement);\n if (placement.startsWith('top'))\n return 'top';\n if (placement.startsWith('left'))\n return 'left';\n if (placement.startsWith('right'))\n return 'right';\n return 'bottom';\n});\n\ndefineExpose({\n onOpen,\n onClose,\n});\n</script>\n\n<template>\n <div\n ref=\"activator\"\n class=\"~~relative~~ ~~inline-flex~~\"\n :data-tooltip-disabled=\"disabled\"\n :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n @mouseover=\"onOpen()\"\n @mouseleave=\"onClose()\"\n @focusin=\"onOpen()\"\n @focusout=\"onClose()\"\n >\n <slot\n name=\"activator\"\n :open=\"open\"\n :close=\"onClose\"\n />\n\n <Teleport\n v-if=\"!disabled\"\n to=\"body\"\n >\n <div\n v-if=\"visible\"\n :id=\"tooltipId\"\n ref=\"tooltip\"\n class=\"w-max z-[9999]\"\n :class=\"classNames?.tooltip ?? tooltipClass\"\n role=\"tooltip\"\n :data-placement=\"currentPlacement\"\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=\"onLeaveComplete()\"\n >\n <div\n v-if=\"open\"\n key=\"tooltip\"\n class=\"px-2 py-2 text-xs font-normal bg-rui-grey-700/90 text-white rounded shadow\"\n data-id=\"content\"\n @mouseover=\"persistOnTooltipHover && onOpen()\"\n @mouseleave=\"persistOnTooltipHover && onClose()\"\n >\n <slot>\n {{ text }}\n </slot>\n </div>\n <span\n v-if=\"!hideArrow\"\n key=\"arrow\"\n :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n data-id=\"arrow\"\n >\n <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n </span>\n </TransitionGroup>\n </div>\n </Teleport>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiTooltip.js","names":[],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { cn, tv } from '@/utils/tv';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n root?: VueClassValue;\n tooltip?: VueClassValue;\n}\n\nexport interface Props {\n text?: string \| null;\n disabled?: boolean;\n hideArrow?: boolean;\n openDelay?: number;\n closeDelay?: number;\n persistOnTooltipHover?: boolean;\n options?: FloatingOptions;\n /** @deprecated Use `options` instead /\n popper?: PopperOptions;\n classNames?: RuiTooltipClassNames;\n /* @deprecated Use `classNames.tooltip` instead */\n tooltipClass?: string;\n}\n\ndefineOptions({\n name: 'RuiTooltip',\n inheritAttrs: false,\n});\n\nconst {\n text = null,\n disabled = false,\n hideArrow = false,\n openDelay = 0,\n closeDelay = 500,\n persistOnTooltipHover = false,\n options,\n popper,\n classNames,\n tooltipClass = '',\n} = defineProps<Props>();\n\ndefineSlots<{\n activator?: (props: { open: boolean; close: () => void }) => any;\n default?: () => any;\n}>();\n\nconst rootStyle = tv({ base: 'relative inline-flex' });\n\nconst tooltipId = useId();\n\nconst {\n reference: activator,\n popover: tooltip,\n open,\n visible,\n currentPlacement,\n onOpen,\n onClose,\n onLeaveComplete,\n updatePosition,\n} = useFloating(\n () => popper ? toFloatingOptions(popper) : (options ?? {}),\n () => disabled,\n () => openDelay,\n () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' \| 'left' \| 'right' \| 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n const placement = get(currentPlacement);\n if (placement.startsWith('top'))\n return 'top';\n if (placement.startsWith('left'))\n return 'left';\n if (placement.startsWith('right'))\n return 'right';\n return 'bottom';\n});\n\ndefineExpose({\n onOpen,\n onClose,\n});\n</script>\n\n<template>\n <div\n ref=\"activator\"\n v-bind=\"{ ...$attrs, class: undefined }\"\n :class=\"rootStyle({ class: cn($attrs.class) })\"\n :data-tooltip-disabled=\"disabled\"\n :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n @mouseover=\"onOpen()\"\n @mouseleave=\"onClose()\"\n @focusin=\"onOpen()\"\n @focusout=\"onClose()\"\n >\n <slot\n name=\"activator\"\n :open=\"open\"\n :close=\"onClose\"\n />\n\n <Teleport\n v-if=\"!disabled\"\n to=\"body\"\n >\n <div\n v-if=\"visible\"\n :id=\"tooltipId\"\n ref=\"tooltip\"\n class=\"w-max z-[9999]\"\n :class=\"classNames?.tooltip ?? tooltipClass\"\n role=\"tooltip\"\n :data-placement=\"currentPlacement\"\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=\"onLeaveComplete()\"\n >\n <div\n v-if=\"open\"\n key=\"tooltip\"\n class=\"px-2 py-2 text-xs font-normal bg-rui-grey-700/90 text-white rounded shadow\"\n data-id=\"content\"\n @mouseover=\"persistOnTooltipHover && onOpen()\"\n @mouseleave=\"persistOnTooltipHover && onClose()\"\n >\n <slot>\n {{ text }}\n </slot>\n </div>\n <span\n v-if=\"!hideArrow\"\n key=\"arrow\"\n :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n data-id=\"arrow\"\n >\n <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n </span>\n </TransitionGroup>\n </div>\n </Teleport>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/tooltip/RuiTooltip.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -1,13 +1,15 @@
+import { cn, tv } from "../../../utils/tv.js";
 import { useFloating } from "../../../composables/floating.js";
 import { toFloatingOptions } from "../../../composables/popper.js";
 import { tooltipStyles } from "./tooltip-styles.js";
-import { Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useId, withCtx } from "vue";
+import { Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useId, withCtx } from "vue";
 import { get } from "@vueuse/shared";
 //#region src/components/overlays/tooltip/RuiTooltip.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-tooltip-disabled", "aria-describedby"];
 var _hoisted_2 = ["id", "data-placement"];
 var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "RuiTooltip",
+	inheritAttrs: false,
 	__name: "RuiTooltip",
 	props: {
 		text: { default: null },
@@ -31,6 +33,7 @@ var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		tooltipClass: { default: "" }
 	},
 	setup(__props, { expose: __expose }) {
+		const rootStyle = tv({ base: "relative inline-flex" });
 		const tooltipId = useId();
 		const { reference: activator, popover: tooltip, open, visible, currentPlacement, onOpen, onClose, onLeaveComplete, updatePosition } = useFloating(() => __props.popper ? toFloatingOptions(__props.popper) : __props.options ?? {}, () => __props.disabled, () => __props.openDelay, () => __props.closeDelay);
 		const placementSide = computed(() => {
@@ -45,17 +48,21 @@ var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			onClose
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
+			return openBlock(), createElementBlock("div", mergeProps({
 				ref_key: "activator",
-				ref: activator,
-				class: "relative inline-flex",
+				ref: activator
+			}, {
+				..._ctx.$attrs,
+				class: void 0
+			}, {
+				class: unref(rootStyle)({ class: unref(cn)(_ctx.$attrs.class) }),
 				"data-tooltip-disabled": __props.disabled,
 				"aria-describedby": !__props.disabled && unref(open) ? unref(tooltipId) : void 0,
 				onMouseover: _cache[4] || (_cache[4] = ($event) => unref(onOpen)()),
 				onMouseleave: _cache[5] || (_cache[5] = ($event) => unref(onClose)()),
 				onFocusin: _cache[6] || (_cache[6] = ($event) => unref(onOpen)()),
 				onFocusout: _cache[7] || (_cache[7] = ($event) => unref(onClose)())
-			}, [renderSlot(_ctx.$slots, "activator", {
+			}), [renderSlot(_ctx.$slots, "activator", {
 				open: unref(open),
 				close: unref(onClose)
 			}), !__props.disabled ? (openBlock(), createBlock(Teleport, {
@@ -97,7 +104,7 @@ var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					side: unref(placementSide)
 				}).diamond()) }, null, 2)], 2)) : createCommentVNode("", true)]),
 				_: 3
-			})], 10, _hoisted_2)) : createCommentVNode("", true)])) : createCommentVNode("", true)], 40, _hoisted_1);
+			})], 10, _hoisted_2)) : createCommentVNode("", true)])) : createCommentVNode("", true)], 16, _hoisted_1);
 		};
 	}
 });

package/dist/components/overlays/tooltip/RuiTooltip.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiTooltip.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n root?: VueClassValue;\n tooltip?: VueClassValue;\n}\n\nexport interface Props {\n text?: string \| null;\n disabled?: boolean;\n hideArrow?: boolean;\n openDelay?: number;\n closeDelay?: number;\n persistOnTooltipHover?: boolean;\n options?: FloatingOptions;\n /** @deprecated Use `options` instead /\n popper?: PopperOptions;\n classNames?: RuiTooltipClassNames;\n /* @deprecated Use `classNames.tooltip` instead */\n tooltipClass?: string;\n}\n\ndefineOptions({\n name: 'RuiTooltip',\n});\n\nconst {\n text = null,\n disabled = false,\n hideArrow = false,\n openDelay = 0,\n closeDelay = 500,\n persistOnTooltipHover = false,\n options,\n popper,\n classNames,\n tooltipClass = '',\n} = defineProps<Props>();\n\ndefineSlots<{\n activator?: (props: { open: boolean; close: () => void }) => any;\n default?: () => any;\n}>();\n\nconst tooltipId = useId();\n\nconst {\n reference: activator,\n popover: tooltip,\n open,\n visible,\n currentPlacement,\n onOpen,\n onClose,\n onLeaveComplete,\n updatePosition,\n} = useFloating(\n () => popper ? toFloatingOptions(popper) : (options ?? {}),\n () => disabled,\n () => openDelay,\n () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' \| 'left' \| 'right' \| 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n const placement = get(currentPlacement);\n if (placement.startsWith('top'))\n return 'top';\n if (placement.startsWith('left'))\n return 'left';\n if (placement.startsWith('right'))\n return 'right';\n return 'bottom';\n});\n\ndefineExpose({\n onOpen,\n onClose,\n});\n</script>\n\n<template>\n <div\n ref=\"activator\"\n class=\"~~relative~~ ~~inline-flex~~\"\n :data-tooltip-disabled=\"disabled\"\n :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n @mouseover=\"onOpen()\"\n @mouseleave=\"onClose()\"\n @focusin=\"onOpen()\"\n @focusout=\"onClose()\"\n >\n <slot\n name=\"activator\"\n :open=\"open\"\n :close=\"onClose\"\n />\n\n <Teleport\n v-if=\"!disabled\"\n to=\"body\"\n >\n <div\n v-if=\"visible\"\n :id=\"tooltipId\"\n ref=\"tooltip\"\n class=\"w-max z-[9999]\"\n :class=\"classNames?.tooltip ?? tooltipClass\"\n role=\"tooltip\"\n :data-placement=\"currentPlacement\"\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=\"onLeaveComplete()\"\n >\n <div\n v-if=\"open\"\n key=\"tooltip\"\n class=\"px-2 py-2 text-xs font-normal bg-rui-grey-700/90 text-white rounded shadow\"\n data-id=\"content\"\n @mouseover=\"persistOnTooltipHover && onOpen()\"\n @mouseleave=\"persistOnTooltipHover && onClose()\"\n >\n <slot>\n {{ text }}\n </slot>\n </div>\n <span\n v-if=\"!hideArrow\"\n key=\"arrow\"\n :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n data-id=\"arrow\"\n >\n <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n </span>\n </TransitionGroup>\n </div>\n </Teleport>\n </div>\n</template>\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDA~~,MAAM,YAAY,OAAO;EAEzB,MAAM,EACJ,WAAW,WACX,SAAS,SACT,MACA,SACA,kBACA,QACA,SACA,iBACA,mBACE,kBACI,QAAA,SAAS,kBAAkB,QAAA,OAAO,GAAI,QAAA,WAAW,EAAE,QACnD,QAAA,gBACA,QAAA,iBACA,QAAA,WACP;EAID,MAAM,gBAAgB,eAA8B;GAClD,MAAM,YAAY,IAAI,iBAAiB;AACvC,OAAI,UAAU,WAAW,MAAM,CAC7B,QAAO;AACT,OAAI,UAAU,WAAW,OAAO,CAC9B,QAAO;AACT,OAAI,UAAU,WAAW,QAAQ,CAC/B,QAAO;AACT,UAAO;IACP;AAEF,WAAa;GACX;GACA;GACD,CAAC;;uBAIA,~~mBA8DM~~,~~OAAA~~;~~aA7DA~~;IAAJ,KAAI;~~IACJ~~,~~OAAM~~;~~IACL~~,yBAAuB,QAAA;IACvB,oBAAgB,CAAG,QAAA,YAAY,MAAA,KAAI,GAAG,MAAA,UAAS,GAAG,KAAA;IAClD,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,OAAM,EAAA;IACjB,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAO,EAAA;IACnB,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,OAAM,EAAA;IACf,YAAQ,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAO,EAAA;~~OAElB~~,WAIE,KAAA,QAAA,aAAA;IAFC,MAAM,MAAA,KAAI;IACV,OAAO,MAAA,QAAA;QAID,QAAA,YAAA,WAAA,EADT,YA6CW,UAAA;;IA3CT,IAAG;OAGK,MAAA,QAAO,IAAA,WAAA,EADf,mBAwCM,OAAA;;IAtCH,IAAI,MAAA,UAAS;aACV;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,kBACE,QAAA,YAAY,WAAW,QAAA,aAAY,CAAA;IAC3C,MAAK;IACJ,kBAAgB,MAAA,iBAAA;OAEjB,YA8BkB,iBAAA;IA7BhB,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACf,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACd,eAAY,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,eAAc,EAAA;IAC5B,cAAW,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,gBAAe,EAAA;;2BAavB,CAVE,MAAA,KAAI,IAAA,WAAA,EADZ,mBAWM,OAAA;KATJ,KAAI;KACJ,OAAM;KACN,WAAQ;KACP,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,yBAAyB,MAAA,OAAM,EAAA;KAC1C,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,yBAAyB,MAAA,QAAO,EAAA;QAE7C,WAEO,KAAA,QAAA,WAAA,EAAA,QAAA,CAAA,gBAAA,gBADF,QAAA,KAAI,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,GAAA,IAAA,mBAAA,IAAA,KAAA,EAAA,CAIF,QAAA,aAAA,WAAA,EADT,mBAOO,QAAA;KALL,KAAI;KACH,OAAK,eAAE,MAAA,cAAa,CAAA;MAAA,MAAG,MAAA,KAAI;MAAA,MAAQ,MAAA,cAAA;MAAa,CAAA,CAAI,OAAK,CAAA;KAC1D,WAAQ;QAER,mBAAwE,QAAA,EAAjE,OAAK,eAAE,MAAA,cAAa,CAAA;KAAA,MAAG,MAAA,KAAI;KAAA,MAAQ,MAAA,cAAA;KAAa,CAAA,CAAI,SAAO,CAAA,EAAA,EAAA,MAAA,EAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"RuiTooltip.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { cn, tv } from '@/utils/tv';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n root?: VueClassValue;\n tooltip?: VueClassValue;\n}\n\nexport interface Props {\n text?: string \| null;\n disabled?: boolean;\n hideArrow?: boolean;\n openDelay?: number;\n closeDelay?: number;\n persistOnTooltipHover?: boolean;\n options?: FloatingOptions;\n /** @deprecated Use `options` instead /\n popper?: PopperOptions;\n classNames?: RuiTooltipClassNames;\n /* @deprecated Use `classNames.tooltip` instead */\n tooltipClass?: string;\n}\n\ndefineOptions({\n name: 'RuiTooltip',\n inheritAttrs: false,\n});\n\nconst {\n text = null,\n disabled = false,\n hideArrow = false,\n openDelay = 0,\n closeDelay = 500,\n persistOnTooltipHover = false,\n options,\n popper,\n classNames,\n tooltipClass = '',\n} = defineProps<Props>();\n\ndefineSlots<{\n activator?: (props: { open: boolean; close: () => void }) => any;\n default?: () => any;\n}>();\n\nconst rootStyle = tv({ base: 'relative inline-flex' });\n\nconst tooltipId = useId();\n\nconst {\n reference: activator,\n popover: tooltip,\n open,\n visible,\n currentPlacement,\n onOpen,\n onClose,\n onLeaveComplete,\n updatePosition,\n} = useFloating(\n () => popper ? toFloatingOptions(popper) : (options ?? {}),\n () => disabled,\n () => openDelay,\n () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' \| 'left' \| 'right' \| 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n const placement = get(currentPlacement);\n if (placement.startsWith('top'))\n return 'top';\n if (placement.startsWith('left'))\n return 'left';\n if (placement.startsWith('right'))\n return 'right';\n return 'bottom';\n});\n\ndefineExpose({\n onOpen,\n onClose,\n});\n</script>\n\n<template>\n <div\n ref=\"activator\"\n v-bind=\"{ ...$attrs, class: undefined }\"\n :class=\"rootStyle({ class: cn($attrs.class) })\"\n :data-tooltip-disabled=\"disabled\"\n :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n @mouseover=\"onOpen()\"\n @mouseleave=\"onClose()\"\n @focusin=\"onOpen()\"\n @focusout=\"onClose()\"\n >\n <slot\n name=\"activator\"\n :open=\"open\"\n :close=\"onClose\"\n />\n\n <Teleport\n v-if=\"!disabled\"\n to=\"body\"\n >\n <div\n v-if=\"visible\"\n :id=\"tooltipId\"\n ref=\"tooltip\"\n class=\"w-max z-[9999]\"\n :class=\"classNames?.tooltip ?? tooltipClass\"\n role=\"tooltip\"\n :data-placement=\"currentPlacement\"\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=\"onLeaveComplete()\"\n >\n <div\n v-if=\"open\"\n key=\"tooltip\"\n class=\"px-2 py-2 text-xs font-normal bg-rui-grey-700/90 text-white rounded shadow\"\n data-id=\"content\"\n @mouseover=\"persistOnTooltipHover && onOpen()\"\n @mouseleave=\"persistOnTooltipHover && onClose()\"\n >\n <slot>\n {{ text }}\n </slot>\n </div>\n <span\n v-if=\"!hideArrow\"\n key=\"arrow\"\n :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n data-id=\"arrow\"\n >\n <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n </span>\n </TransitionGroup>\n </div>\n </Teleport>\n </div>\n</template>\n"],"mappings":"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"}