@rotki/ui-library 2.20.2 → 2.21.0

package/dist/components/forms/file-upload/RuiFileUpload.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,269 @@
+import RuiIcon_default from "../../icons/RuiIcon.js";
+import RuiProgress_default from "../../progress/RuiProgress.js";
+import { useFormTextDetail } from "../../../utils/form-text-detail.js";
+import RuiFormTextDetail_default from "../../helpers/RuiFormTextDetail.js";
+import { formatFileSize, getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch } from "vue";
+import { useDropZone } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/components/forms/file-upload/RuiFileUpload.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-disabled",
+	"data-uploaded",
+	"data-error",
+	"data-drop-active"
+];
+var _hoisted_2 = {
+	key: 0,
+	class: "flex flex-col gap-1 w-full",
+	"data-id": "file-list"
+};
+var _hoisted_3 = { class: "flex-1 overflow-hidden min-w-0" };
+var _hoisted_4 = ["title"];
+var _hoisted_5 = { class: "text-rui-text-secondary text-xs leading-3" };
+var _hoisted_6 = [
+	"disabled",
+	"aria-label",
+	"onClick"
+];
+var _hoisted_7 = { class: "text-center text-sm" };
+var _hoisted_8 = { class: "flex items-center justify-center gap-1 flex-wrap" };
+var _hoisted_9 = ["disabled"];
+var _hoisted_10 = [
+	"accept",
+	"multiple",
+	"disabled"
+];
+var _hoisted_11 = {
+	key: 0,
+	class: "flex flex-col items-center justify-center absolute h-full w-full top-0 left-0 gap-2",
+	"data-id": "loading"
+};
+var _hoisted_12 = ["textContent"];
+var RuiFileUpload_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiFileUpload",
+	inheritAttrs: false,
+	__name: "RuiFileUpload",
+	props: /* @__PURE__ */ mergeModels({
+		accept: { default: "*" },
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		progress: { default: () => void 0 },
+		uploaded: {
+			type: Boolean,
+			default: false
+		},
+		maxSize: { default: () => void 0 },
+		errorMessages: { default: () => [] },
+		hint: { default: "" },
+		noDrop: {
+			type: Boolean,
+			default: false
+		},
+		uploadText: { default: "Drag and drop or" },
+		clickToUploadText: { default: "click to upload" },
+		replaceText: { default: "replace file" },
+		hideDetails: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["error"], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const modelValue = useModel(__props, "modelValue");
+		const emit = __emit;
+		const wrapper = useTemplateRef("wrapper");
+		const input = useTemplateRef("input");
+		const internalError = ref("");
+		const files = computed(() => {
+			const value = get$1(modelValue);
+			if (!value) return [];
+			return Array.isArray(value) ? value : [value];
+		});
+		const hasFiles = computed(() => get$1(files).length > 0);
+		const progressLabel = computed(() => {
+			const value = __props.progress;
+			return value === void 0 ? void 0 : `${Math.round(value)}%`;
+		});
+		const combinedErrorMessages = computed(() => {
+			const external = Array.isArray(__props.errorMessages) ? __props.errorMessages : [__props.errorMessages];
+			const internal = get$1(internalError);
+			return [...external.filter(Boolean), ...internal ? [internal] : []];
+		});
+		const { hasError } = useFormTextDetail(combinedErrorMessages, () => []);
+		function matchesAccept(file, acceptString) {
+			if (!acceptString || acceptString === "*" || acceptString === "*/*") return true;
+			const fileName = file.name.toLowerCase();
+			const fileExtension = fileName.includes(".") ? fileName.slice(fileName.lastIndexOf(".")) : "";
+			const fileType = file.type.toLowerCase();
+			return acceptString.split(",").map((value) => value.trim().toLowerCase()).filter(Boolean).some((type) => {
+				if (type.startsWith(".")) return type === fileExtension;
+				if (type.endsWith("/*")) return fileType.startsWith(type.slice(0, -1));
+				return type === fileType;
+			});
+		}
+		function reportError(message) {
+			set$1(internalError, message);
+			emit("error", message);
+		}
+		function clearInternalError() {
+			set$1(internalError, "");
+		}
+		function validate(candidates) {
+			if (candidates.length === 0) return void 0;
+			if (!__props.multiple && candidates.length > 1) {
+				reportError("Only one file can be uploaded");
+				return;
+			}
+			for (const file of candidates) {
+				if (!matchesAccept(file, __props.accept)) {
+					reportError(`Only ${__props.accept} files are allowed`);
+					return;
+				}
+				if (__props.maxSize !== void 0 && file.size > __props.maxSize) {
+					reportError(`${file.name} exceeds the maximum size of ${formatFileSize(__props.maxSize)}`);
+					return;
+				}
+			}
+			return candidates;
+		}
+		function setFiles(candidates) {
+			const validated = validate(candidates);
+			if (!validated) return;
+			clearInternalError();
+			set$1(modelValue, __props.multiple ? validated : validated[0]);
+		}
+		function removeFile(target) {
+			clearInternalError();
+			const inputEl = get$1(input);
+			if (inputEl) inputEl.value = "";
+			if (!target || !__props.multiple) {
+				set$1(modelValue, __props.multiple ? [] : void 0);
+				return;
+			}
+			set$1(modelValue, get$1(files).filter((file) => file !== target));
+		}
+		function onSelect(event) {
+			const target = event.target;
+			if (!target?.files) return;
+			setFiles(Array.from(target.files));
+		}
+		function onDrop(dropped) {
+			if (__props.disabled || __props.noDrop || !dropped || dropped.length === 0) return;
+			setFiles(dropped);
+		}
+		const { isOverDropZone } = useDropZone(wrapper, { onDrop });
+		function openPicker() {
+			if (__props.disabled) return;
+			get$1(input)?.click();
+		}
+		watch(() => __props.errorMessages, () => clearInternalError());
+		__expose({
+			removeFile: () => removeFile(),
+			openPicker
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [createElementVNode("div", {
+				ref_key: "wrapper",
+				ref: wrapper,
+				class: normalizeClass(["p-4 border border-rui-grey-300 dark:border-rui-grey-800 rounded-md w-full relative border-dashed transition", {
+					"!border-rui-primary bg-rui-primary/[0.08]": unref(isOverDropZone) && !__props.disabled && !__props.noDrop,
+					"!border-rui-error !border-solid bg-rui-error/[0.08]": unref(hasError),
+					"!border-rui-success !border-solid bg-rui-success/[0.08]": __props.uploaded,
+					"opacity-60 pointer-events-none": __props.disabled
+				}]),
+				"data-disabled": __props.disabled || void 0,
+				"data-uploaded": __props.uploaded || void 0,
+				"data-error": unref(hasError) ? "" : void 0,
+				"data-drop-active": unref(isOverDropZone) || void 0
+			}, [createElementVNode("div", { class: normalizeClass(["flex flex-col items-center justify-center gap-3", { "opacity-0": __props.loading }]) }, [
+				renderSlot(_ctx.$slots, "preview", {
+					files: unref(files),
+					remove: () => removeFile()
+				}, () => [unref(hasFiles) ? (openBlock(), createElementBlock("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(files), (file) => {
+					return openBlock(), createElementBlock("div", {
+						key: `${file.name}-${file.lastModified}`,
+						class: "flex items-center gap-2 bg-rui-primary/[0.08] rounded-full pl-3 pr-1 py-1",
+						"data-id": "file-item"
+					}, [
+						createVNode(RuiIcon_default, {
+							name: "lu-file",
+							color: "primary",
+							size: "20"
+						}),
+						createElementVNode("div", _hoisted_3, [createElementVNode("div", {
+							class: "text-sm leading-5 truncate",
+							title: file.name
+						}, toDisplayString(file.name), 9, _hoisted_4), createElementVNode("div", _hoisted_5, toDisplayString(unref(formatFileSize)(file.size)), 1)]),
+						createElementVNode("button", {
+							type: "button",
+							class: "p-1 rounded-full hover:bg-rui-primary/[0.16] transition",
+							disabled: __props.disabled,
+							"aria-label": `Remove ${file.name}`,
+							"data-id": "remove-file",
+							onClick: ($event) => removeFile(file)
+						}, [createVNode(RuiIcon_default, {
+							name: "lu-x",
+							size: "16"
+						})], 8, _hoisted_6)
+					]);
+				}), 128))])) : (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(["h-10 w-10 rounded-full flex items-center justify-center", __props.uploaded ? "bg-rui-success/[0.12]" : "bg-rui-primary/[0.12]"])
+				}, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(RuiIcon_default, {
+					name: __props.uploaded ? "lu-circle-check" : "lu-file-up",
+					color: __props.uploaded ? "success" : "primary"
+				}, null, 8, ["name", "color"])])], 2))]),
+				createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "description", {}, () => [createElementVNode("div", _hoisted_8, [createElementVNode("span", null, toDisplayString(__props.uploadText), 1), createElementVNode("button", {
+					type: "button",
+					class: "text-rui-primary underline disabled:no-underline disabled:text-rui-text-disabled",
+					disabled: __props.disabled,
+					"data-id": "open-picker",
+					onClick: _cache[0] || (_cache[0] = ($event) => openPicker())
+				}, toDisplayString(unref(hasFiles) ? __props.replaceText : __props.clickToUploadText), 9, _hoisted_9)])])]),
+				createElementVNode("input", mergeProps({
+					ref_key: "input",
+					ref: input,
+					type: "file",
+					accept: __props.accept,
+					multiple: __props.multiple,
+					disabled: __props.disabled,
+					hidden: "",
+					"data-id": "file-input"
+				}, unref(getNonRootAttrs)(_ctx.$attrs, ["class", "onChange"]), { onChange: _cache[1] || (_cache[1] = ($event) => onSelect($event)) }), null, 16, _hoisted_10)
+			], 2), __props.loading ? (openBlock(), createElementBlock("div", _hoisted_11, [createVNode(RuiProgress_default, {
+				circular: "",
+				variant: __props.progress === void 0 ? "indeterminate" : "determinate",
+				value: __props.progress,
+				color: "primary",
+				size: "40"
+			}, null, 8, ["variant", "value"]), unref(progressLabel) ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				textContent: toDisplayString(unref(progressLabel)),
+				class: "text-xs text-rui-text-secondary",
+				"data-id": "progress-label"
+			}, null, 8, _hoisted_12)) : createCommentVNode("", true)])) : createCommentVNode("", true)], 10, _hoisted_1), !__props.hideDetails ? (openBlock(), createBlock(RuiFormTextDetail_default, {
+				key: 0,
+				"error-messages": unref(combinedErrorMessages),
+				hint: __props.hint
+			}, null, 8, ["error-messages", "hint"])) : createCommentVNode("", true)], 16);
+		};
+	}
+});
+//#endregion
+export { RuiFileUpload_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiFileUpload.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/forms/file-upload/RuiFileUpload.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiFileUpload.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/file-upload/RuiFileUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { formatFileSize, getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface FileUploadProps {\n  /** File type filter (HTML accept attribute syntax). e.g. '.csv', 'image/*', '.png,.jpg' */\n  accept?: string;\n  /** Allow multiple file selection. */\n  multiple?: boolean;\n  disabled?: boolean;\n  /** Shows a loading overlay (consumer-driven, e.g. while uploading). */\n  loading?: boolean;\n  /** Upload progress 0-100. When provided alongside `loading`, the overlay shows a determinate progress bar with percentage. */\n  progress?: number;\n  /** Renders the success state border/icon. Consumer toggles back to false. */\n  uploaded?: boolean;\n  /** Optional max size per file in bytes; failures emit `error` and set internal error state. */\n  maxSize?: number;\n  /** External error messages (e.g. from Vuelidate). Shown via the standard form detail block. */\n  errorMessages?: string | string[];\n  /** Hint text below the dropzone. */\n  hint?: string;\n  /** Disable drag-and-drop; the dropzone becomes click-only (matches rotki.com use case). */\n  noDrop?: boolean;\n  /** Replace the default \"Drag and drop or {button}\" copy. */\n  uploadText?: string;\n  /** Label shown on the inline button when no file is selected. */\n  clickToUploadText?: string;\n  /** Label shown on the inline button when one or more files are already selected. */\n  replaceText?: string;\n  /** Hide the bottom hint/error details strip. */\n  hideDetails?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiFileUpload',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<File | File[] | undefined>({ required: true });\n\nconst {\n  accept = '*',\n  multiple = false,\n  disabled = false,\n  loading = false,\n  progress = undefined,\n  uploaded = false,\n  maxSize = undefined,\n  errorMessages = [],\n  hint = '',\n  noDrop = false,\n  uploadText = 'Drag and drop or',\n  clickToUploadText = 'click to upload',\n  replaceText = 'replace file',\n  hideDetails = false,\n} = defineProps<FileUploadProps>();\n\nconst emit = defineEmits<{\n  error: [message: string];\n}>();\n\ndefineSlots<{\n  preview?: (props: { files: File[]; remove: () => void }) => any;\n  icon?: () => any;\n  description?: () => any;\n}>();\n\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\nconst input = useTemplateRef<HTMLInputElement>('input');\nconst internalError = ref<string>('');\n\nconst files = computed<File[]>(() => {\n  const value = get(modelValue);\n  if (!value)\n    return [];\n  return Array.isArray(value) ? value : [value];\n});\n\nconst hasFiles = computed<boolean>(() => get(files).length > 0);\n\nconst progressLabel = computed<string | undefined>(() => {\n  const value = progress;\n  return value === undefined ? undefined : `${Math.round(value)}%`;\n});\n\nconst combinedErrorMessages = computed<string[]>(() => {\n  const external = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n  const internal = get(internalError);\n  return [...external.filter(Boolean), ...(internal ? [internal] : [])];\n});\n\nconst { hasError } = useFormTextDetail(combinedErrorMessages, () => []);\n\nfunction matchesAccept(file: File, acceptString: string): boolean {\n  if (!acceptString || acceptString === '*' || acceptString === '*/*')\n    return true;\n\n  const fileName = file.name.toLowerCase();\n  const fileExtension = fileName.includes('.') ? fileName.slice(fileName.lastIndexOf('.')) : '';\n  const fileType = file.type.toLowerCase();\n  const acceptTypes = acceptString.split(',').map(value => value.trim().toLowerCase()).filter(Boolean);\n\n  return acceptTypes.some((type) => {\n    if (type.startsWith('.'))\n      return type === fileExtension;\n    if (type.endsWith('/*'))\n      return fileType.startsWith(type.slice(0, -1));\n    return type === fileType;\n  });\n}\n\nfunction reportError(message: string): void {\n  set(internalError, message);\n  emit('error', message);\n}\n\nfunction clearInternalError(): void {\n  set(internalError, '');\n}\n\nfunction validate(candidates: File[]): File[] | undefined {\n  if (candidates.length === 0)\n    return undefined;\n\n  if (!multiple && candidates.length > 1) {\n    reportError('Only one file can be uploaded');\n    return undefined;\n  }\n\n  for (const file of candidates) {\n    if (!matchesAccept(file, accept)) {\n      reportError(`Only ${accept} files are allowed`);\n      return undefined;\n    }\n    if (maxSize !== undefined && file.size > maxSize) {\n      reportError(`${file.name} exceeds the maximum size of ${formatFileSize(maxSize)}`);\n      return undefined;\n    }\n  }\n\n  return candidates;\n}\n\nfunction setFiles(candidates: File[]): void {\n  const validated = validate(candidates);\n  if (!validated)\n    return;\n  clearInternalError();\n  set(modelValue, multiple ? validated : validated[0]);\n}\n\nfunction removeFile(target?: File): void {\n  clearInternalError();\n  const inputEl = get(input);\n  if (inputEl)\n    inputEl.value = '';\n\n  if (!target || !multiple) {\n    set(modelValue, multiple ? [] : undefined);\n    return;\n  }\n\n  const remaining = get(files).filter(file => file !== target);\n  set(modelValue, remaining);\n}\n\nfunction onSelect(event: Event): void {\n  const target = event.target as HTMLInputElement;\n  if (!target?.files)\n    return;\n  setFiles(Array.from(target.files));\n}\n\nfunction onDrop(dropped: File[] | null): void {\n  if (disabled || noDrop || !dropped || dropped.length === 0)\n    return;\n  setFiles(dropped);\n}\n\nconst { isOverDropZone } = useDropZone(wrapper, {\n  onDrop,\n});\n\nfunction openPicker(): void {\n  if (disabled)\n    return;\n  get(input)?.click();\n}\n\nwatch(() => errorMessages, () => clearInternalError());\n\ndefineExpose({\n  removeFile: () => removeFile(),\n  openPicker,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      ref=\"wrapper\"\n      class=\"p-4 border border-rui-grey-300 dark:border-rui-grey-800 rounded-md w-full relative border-dashed transition\"\n      :class=\"{\n        '!border-rui-primary bg-rui-primary/[0.08]': isOverDropZone && !disabled && !noDrop,\n        '!border-rui-error !border-solid bg-rui-error/[0.08]': hasError,\n        '!border-rui-success !border-solid bg-rui-success/[0.08]': uploaded,\n        'opacity-60 pointer-events-none': disabled,\n      }\"\n      :data-disabled=\"disabled || undefined\"\n      :data-uploaded=\"uploaded || undefined\"\n      :data-error=\"hasError ? '' : undefined\"\n      :data-drop-active=\"isOverDropZone || undefined\"\n    >\n      <div\n        class=\"flex flex-col items-center justify-center gap-3\"\n        :class=\"{ 'opacity-0': loading }\"\n      >\n        <slot\n          name=\"preview\"\n          :files=\"files\"\n          :remove=\"() => removeFile()\"\n        >\n          <div\n            v-if=\"hasFiles\"\n            class=\"flex flex-col gap-1 w-full\"\n            data-id=\"file-list\"\n          >\n            <div\n              v-for=\"file in files\"\n              :key=\"`${file.name}-${file.lastModified}`\"\n              class=\"flex items-center gap-2 bg-rui-primary/[0.08] rounded-full pl-3 pr-1 py-1\"\n              data-id=\"file-item\"\n            >\n              <RuiIcon\n                name=\"lu-file\"\n                color=\"primary\"\n                size=\"20\"\n              />\n              <div class=\"flex-1 overflow-hidden min-w-0\">\n                <div\n                  class=\"text-sm leading-5 truncate\"\n                  :title=\"file.name\"\n                >\n                  {{ file.name }}\n                </div>\n                <div class=\"text-rui-text-secondary text-xs leading-3\">\n                  {{ formatFileSize(file.size) }}\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                class=\"p-1 rounded-full hover:bg-rui-primary/[0.16] transition\"\n                :disabled=\"disabled\"\n                :aria-label=\"`Remove ${file.name}`\"\n                data-id=\"remove-file\"\n                @click=\"removeFile(file)\"\n              >\n                <RuiIcon\n                  name=\"lu-x\"\n                  size=\"16\"\n                />\n              </button>\n            </div>\n          </div>\n          <div\n            v-else\n            class=\"h-10 w-10 rounded-full flex items-center justify-center\"\n            :class=\"uploaded ? 'bg-rui-success/[0.12]' : 'bg-rui-primary/[0.12]'\"\n          >\n            <slot name=\"icon\">\n              <RuiIcon\n                :name=\"uploaded ? 'lu-circle-check' : 'lu-file-up'\"\n                :color=\"uploaded ? 'success' : 'primary'\"\n              />\n            </slot>\n          </div>\n        </slot>\n\n        <div class=\"text-center text-sm\">\n          <slot name=\"description\">\n            <div class=\"flex items-center justify-center gap-1 flex-wrap\">\n              <span>{{ uploadText }}</span>\n              <button\n                type=\"button\"\n                class=\"text-rui-primary underline disabled:no-underline disabled:text-rui-text-disabled\"\n                :disabled=\"disabled\"\n                data-id=\"open-picker\"\n                @click=\"openPicker()\"\n              >\n                {{ hasFiles ? replaceText : clickToUploadText }}\n              </button>\n            </div>\n          </slot>\n        </div>\n\n        <input\n          ref=\"input\"\n          type=\"file\"\n          :accept=\"accept\"\n          :multiple=\"multiple\"\n          :disabled=\"disabled\"\n          hidden\n          data-id=\"file-input\"\n          v-bind=\"getNonRootAttrs($attrs, ['class', 'onChange'])\"\n          @change=\"onSelect($event)\"\n        />\n      </div>\n\n      <div\n        v-if=\"loading\"\n        class=\"flex flex-col items-center justify-center absolute h-full w-full top-0 left-0 gap-2\"\n        data-id=\"loading\"\n      >\n        <RuiProgress\n          circular\n          :variant=\"progress === undefined ? 'indeterminate' : 'determinate'\"\n          :value=\"progress\"\n          color=\"primary\"\n          size=\"40\"\n        />\n        <div\n          v-if=\"progressLabel\"\n          v-text=\"progressLabel\"\n          class=\"text-xs text-rui-text-secondary\"\n          data-id=\"progress-label\"\n        />\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :error-messages=\"combinedErrorMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/select/RuiMenuSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiMenuSelect.js","names":[],"sources":["../../../../src/components/forms/select/RuiMenuSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { menuSelectStyles, type MenuSelectVariant } from '@/components/forms/select/menu-select-styles';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu, { type MenuProps } from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { type KeyOfType, useDropdownMenu } from '@/composables/dropdown-menu';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiMenuSelectClassNames {\n  root?: VueClassValue;\n  label?: VueClassValue;\n  menu?: VueClassValue;\n  option?: VueClassValue;\n}\n\nexport interface MenuSelectProps<TValue, TItem> {\n  options: TItem[];\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem;\n  disabled?: boolean;\n  loading?: boolean;\n  readOnly?: boolean;\n  dense?: boolean;\n  clearable?: boolean;\n  label?: string;\n  menuOptions?: MenuProps;\n  classNames?: RuiMenuSelectClassNames;\n  /** @deprecated Use `classNames.label` instead */\n  labelClass?: string;\n  /** @deprecated Use `classNames.menu` instead */\n  menuClass?: string;\n  /** @deprecated Use `classNames.option` instead */\n  optionClass?: string;\n  prependWidth?: number;\n  appendWidth?: number;\n  itemHeight?: number;\n  variant?: MenuSelectVariant;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  autoSelectFirst?: boolean;\n  hideNoData?: boolean;\n  noDataText?: string;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiMenuSelect',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue | undefined>({ required: true });\n\nconst {\n  options,\n  disabled = false,\n  loading = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  hideDetails = false,\n  label = 'Select',\n  menuOptions,\n  classNames,\n  labelClass,\n  menuClass,\n  variant = 'default',\n  hint,\n  keyAttr,\n  textAttr,\n  itemHeight,\n  errorMessages = [],\n  successMessages = [],\n  autoSelectFirst = false,\n  hideNoData = false,\n  noDataText = 'No data available',\n  required = false,\n} = defineProps<MenuSelectProps<TValue, TItem>>();\n\ndefineSlots<{\n  'activator'?: (props: {\n    disabled: boolean;\n    value: TItem | undefined;\n    variant: string;\n    readOnly: boolean;\n    attrs: Record<string, unknown>;\n    open: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  'activator.label'?: (props: { value: TItem | undefined }) => any;\n  'selection.prepend'?: (props: { item: TItem }) => any;\n  'selection'?: (props: { item: TItem }) => any;\n  'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'no-data'?: () => any;\n}>();\n\nconst menuRef = useTemplateRef<HTMLDivElement>('menuRef');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst { focused } = useFocus(activator);\nconst isHovered = ref<boolean>(false);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst value = computed<TItem | undefined>({\n  get: () => {\n    const value = get(modelValue);\n    if (keyAttr)\n      return options.find(option => option[keyAttr] === value);\n    return value as unknown as TItem;\n  },\n  set: (selected?: TItem) => {\n    const selection = keyAttr && selected ? selected[keyAttr] : selected;\n    set(modelValue, selection as TValue);\n  },\n});\n\nfunction setValue(val: TItem): void {\n  set(value, val);\n  set(focused, true);\n}\n\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  isOpen,\n  menuWidth,\n  getText,\n  getIdentifier,\n  isActiveItem,\n  highlightedIndex,\n  moveHighlight,\n  applyHighlighted,\n  valueKey,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: itemHeight ?? (dense ? 30 : 48),\n  keyAttr,\n  textAttr,\n  options: () => options,\n  dense: () => dense,\n  value,\n  menuRef,\n  disabled: () => disabled,\n  autoSelectFirst,\n  setValue,\n});\n\nconst outlined = computed<boolean>(() => variant === 'outlined');\nconst float = computed<boolean>(() => (get(isOpen) || !!get(value)) && get(outlined));\n\nconst legendText = computed<string>(() => {\n  if (!get(float) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof menuSelectStyles>>(() => menuSelectStyles({\n  filled: variant === 'filled',\n  outlined: get(outlined),\n  float: get(float),\n  opened: get(isOpen),\n  hovered: get(isHovered),\n  dense,\n  disabled,\n  readonly: readOnly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = menuSelectStyles({}).highlighted();\n\nfunction clear(): void {\n  set(modelValue, undefined);\n}\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n    :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n    placement=\"bottom-start\"\n    :close-on-content-click=\"true\"\n    :full-width=\"true\"\n    :error-messages=\"errorMessages\"\n    :success-messages=\"successMessages\"\n    :hint=\"hint\"\n    :dense=\"dense\"\n    :show-details=\"!hideDetails\"\n    :disabled=\"disabled\"\n    disable-auto-focus\n  >\n    <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ disabled, value, variant, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n      >\n        <button\n          ref=\"activator\"\n          :disabled=\"disabled\"\n          :aria-disabled=\"disabled\"\n          :aria-expanded=\"isOpen\"\n          :aria-readonly=\"readOnly || undefined\"\n          :aria-required=\"required || undefined\"\n          :aria-busy=\"loading || undefined\"\n          type=\"button\"\n          :tabindex=\"disabled || readOnly ? -1 : 0\"\n          :class=\"ui.activator({ class: cn(classNames?.label) ?? labelClass })\"\n          v-bind=\"{\n            ...getNonRootAttrs($attrs),\n            ...(readOnly ? {} : attrs),\n          }\"\n          data-id=\"activator\"\n          :aria-invalid=\"hasError\"\n          @mouseenter=\"isHovered = true\"\n          @mouseleave=\"isHovered = false\"\n          @keydown.up.prevent=\"moveHighlight(true)\"\n          @keydown.down.prevent=\"moveHighlight(false)\"\n          @keydown.enter.prevent=\"applyHighlighted()\"\n          @keydown.space.prevent=\"applyHighlighted()\"\n          @keydown.home.prevent=\"highlightedIndex = 0\"\n          @keydown.end.prevent=\"highlightedIndex = options.length - 1\"\n        >\n          <span\n            v-if=\"outlined || !value\"\n            :class=\"[\n              ui.label(),\n              { 'pr-2': !value && !open && outlined },\n            ]\"\n          >\n            <slot\n              name=\"activator.label\"\n              v-bind=\"{ value }\"\n            >\n              {{ label }}\n            </slot>\n            <span\n              v-if=\"required\"\n              :class=\"ui.required()\"\n            >\n              ﹡\n            </span>\n          </span>\n          <span\n            v-if=\"value\"\n            :class=\"ui.value()\"\n          >\n            <slot\n              name=\"selection.prepend\"\n              v-bind=\"{ item: value }\"\n            />\n            <slot\n              name=\"selection\"\n              v-bind=\"{ item: value }\"\n            >\n              {{ getText(value) }}\n            </slot>\n          </span>\n\n          <span\n            v-if=\"clearable && value && !disabled\"\n            data-id=\"clear\"\n            :class=\"[ui.clear(), focused && '!visible']\"\n            @click.stop.prevent=\"clear()\"\n          >\n            <RuiIcon\n              color=\"error\"\n              name=\"lu-x\"\n              size=\"18\"\n            />\n          </span>\n\n          <span :class=\"ui.iconWrapper()\">\n            <RuiIcon\n              :class=\"ui.icon()\"\n              :size=\"dense ? 16 : 24\"\n              name=\"lu-chevron-down\"\n            />\n          </span>\n\n          <RuiProgress\n            v-if=\"loading\"\n            :class=\"ui.progress()\"\n            color=\"primary\"\n            thickness=\"3\"\n            variant=\"indeterminate\"\n          />\n        </button>\n        <fieldset\n          v-if=\"outlined\"\n          :class=\"ui.fieldset()\"\n        >\n          <legend :class=\"ui.legend()\">\n            {{ legendText }}\n          </legend>\n        </fieldset>\n      </slot>\n      <input\n        :value=\"valueKey\"\n        class=\"hidden\"\n        type=\"hidden\"\n      />\n    </template>\n    <template #default=\"{ width }\">\n      <div\n        v-if=\"options.length > 0\"\n        :ref=\"containerProps.ref\"\n        :class=\"ui.menu({ class: cn(classNames?.menu) ?? menuClass })\"\n        :style=\"[containerProps.style, { width: `${width}px`, minWidth: menuWidth }]\"\n        @scroll=\"containerProps.onScroll\"\n        @keydown.up.prevent=\"moveHighlight(true)\"\n        @keydown.down.prevent=\"moveHighlight(false)\"\n      >\n        <div\n          v-bind=\"wrapperProps\"\n          ref=\"menuRef\"\n        >\n          <RuiButton\n            v-for=\"{ item, _index } in renderedData\"\n            :key=\"getIdentifier(item)\"\n            :active=\"isActiveItem(item)\"\n            :aria-selected=\"isActiveItem(item)\"\n            :size=\"dense ? 'sm' : undefined\"\n            variant=\"list\"\n            :data-highlighted=\"highlightedIndex === _index\"\n            :class=\"{\n              [highlightedClass]: !isActiveItem(item) && highlightedIndex === _index,\n            }\"\n            @click=\"setValue(item)\"\n          >\n            <template #prepend>\n              <slot\n                name=\"item.prepend\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n            <slot\n              name=\"item\"\n              v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n            >\n              {{ getText(item) }}\n            </slot>\n            <template #append>\n              <slot\n                name=\"item.append\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n          </RuiButton>\n        </div>\n      </div>\n\n      <div\n        v-else-if=\"!hideNoData\"\n        data-id=\"no-data\"\n        :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n        :class=\"classNames?.menu ?? menuClass\"\n      >\n        <slot name=\"no-data\">\n          <div class=\"p-4\">\n            {{ noDataText }}\n          </div>\n        </slot>\n      </div>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiMenuSelect.js","names":[],"sources":["../../../../src/components/forms/select/RuiMenuSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { menuSelectStyles, type MenuSelectVariant } from '@/components/forms/select/menu-select-styles';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu, { type MenuProps } from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { type KeyOfType, useDropdownMenu } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiMenuSelectClassNames {\n  root?: VueClassValue;\n  label?: VueClassValue;\n  menu?: VueClassValue;\n  option?: VueClassValue;\n}\n\nexport interface MenuSelectProps<TValue, TItem> {\n  options: TItem[];\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem;\n  disabled?: boolean;\n  loading?: boolean;\n  readOnly?: boolean;\n  dense?: boolean;\n  clearable?: boolean;\n  label?: string;\n  menuOptions?: MenuProps;\n  classNames?: RuiMenuSelectClassNames;\n  /** @deprecated Use `classNames.label` instead */\n  labelClass?: string;\n  /** @deprecated Use `classNames.menu` instead */\n  menuClass?: string;\n  /** @deprecated Use `classNames.option` instead */\n  optionClass?: string;\n  prependWidth?: number;\n  appendWidth?: number;\n  itemHeight?: number;\n  variant?: MenuSelectVariant;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  autoSelectFirst?: boolean;\n  hideNoData?: boolean;\n  noDataText?: string;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiMenuSelect',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue | undefined>({ required: true });\n\nconst {\n  options,\n  disabled = false,\n  loading = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  hideDetails = false,\n  label = 'Select',\n  menuOptions,\n  classNames,\n  labelClass,\n  menuClass,\n  variant = 'default',\n  hint,\n  keyAttr,\n  textAttr,\n  itemHeight,\n  errorMessages = [],\n  successMessages = [],\n  autoSelectFirst = false,\n  hideNoData = false,\n  noDataText = 'No data available',\n  required = false,\n} = defineProps<MenuSelectProps<TValue, TItem>>();\n\ndefineSlots<{\n  'activator'?: (props: {\n    disabled: boolean;\n    value: TItem | undefined;\n    variant: string;\n    readOnly: boolean;\n    attrs: Record<string, unknown>;\n    open: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  'activator.label'?: (props: { value: TItem | undefined }) => any;\n  'selection.prepend'?: (props: { item: TItem }) => any;\n  'selection'?: (props: { item: TItem }) => any;\n  'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'no-data'?: () => any;\n}>();\n\nconst menuRef = useTemplateRef<HTMLDivElement>('menuRef');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst { focused } = useFocus(activator);\nconst isHovered = ref<boolean>(false);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst value = computed<TItem | undefined>({\n  get: () => {\n    const value = get(modelValue);\n    if (keyAttr)\n      return options.find(option => option[keyAttr] === value);\n    return value as unknown as TItem;\n  },\n  set: (selected?: TItem) => {\n    const selection = keyAttr && selected ? selected[keyAttr] : selected;\n    set(modelValue, selection as TValue);\n  },\n});\n\nfunction setValue(val: TItem): void {\n  set(value, val);\n  set(focused, true);\n}\n\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  isOpen,\n  menuWidth,\n  getText,\n  getIdentifier,\n  isActiveItem,\n  highlightedIndex,\n  moveHighlight,\n  applyHighlighted,\n  valueKey,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: itemHeight ?? (dense ? 30 : 48),\n  keyAttr,\n  textAttr,\n  options: () => options,\n  dense: () => dense,\n  value,\n  menuRef,\n  disabled: () => disabled,\n  autoSelectFirst,\n  setValue,\n});\n\nconst outlined = computed<boolean>(() => variant === 'outlined');\nconst float = computed<boolean>(() => (get(isOpen) || !!get(value)) && get(outlined));\n\nconst legendText = computed<string>(() => {\n  if (!get(float) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof menuSelectStyles>>(() => menuSelectStyles({\n  filled: variant === 'filled',\n  outlined: get(outlined),\n  float: get(float),\n  opened: get(isOpen),\n  hovered: get(isHovered),\n  dense,\n  disabled,\n  readonly: readOnly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = menuSelectStyles({}).highlighted();\n\nfunction clear(): void {\n  set(modelValue, undefined);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n  placement: Placement.bottomStart,\n  ...menuOptions?.options,\n}));\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n    :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n    :options=\"menuFloatingOptions\"\n    :close-on-content-click=\"true\"\n    :full-width=\"true\"\n    :error-messages=\"errorMessages\"\n    :success-messages=\"successMessages\"\n    :hint=\"hint\"\n    :dense=\"dense\"\n    :show-details=\"!hideDetails\"\n    :disabled=\"disabled\"\n    disable-auto-focus\n  >\n    <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ disabled, value, variant, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n      >\n        <button\n          ref=\"activator\"\n          :disabled=\"disabled\"\n          :aria-disabled=\"disabled\"\n          :aria-expanded=\"isOpen\"\n          :aria-readonly=\"readOnly || undefined\"\n          :aria-required=\"required || undefined\"\n          :aria-busy=\"loading || undefined\"\n          type=\"button\"\n          :tabindex=\"disabled || readOnly ? -1 : 0\"\n          :class=\"ui.activator({ class: cn(classNames?.label) ?? labelClass })\"\n          v-bind=\"{\n            ...getNonRootAttrs($attrs),\n            ...(readOnly ? {} : attrs),\n          }\"\n          data-id=\"activator\"\n          :aria-invalid=\"hasError\"\n          @mouseenter=\"isHovered = true\"\n          @mouseleave=\"isHovered = false\"\n          @keydown.up.prevent=\"moveHighlight(true)\"\n          @keydown.down.prevent=\"moveHighlight(false)\"\n          @keydown.enter.prevent=\"applyHighlighted()\"\n          @keydown.space.prevent=\"applyHighlighted()\"\n          @keydown.home.prevent=\"highlightedIndex = 0\"\n          @keydown.end.prevent=\"highlightedIndex = options.length - 1\"\n        >\n          <span\n            v-if=\"outlined || !value\"\n            :class=\"[\n              ui.label(),\n              { 'pr-2': !value && !open && outlined },\n            ]\"\n          >\n            <slot\n              name=\"activator.label\"\n              v-bind=\"{ value }\"\n            >\n              {{ label }}\n            </slot>\n            <span\n              v-if=\"required\"\n              :class=\"ui.required()\"\n            >\n              ﹡\n            </span>\n          </span>\n          <span\n            v-if=\"value\"\n            :class=\"ui.value()\"\n          >\n            <slot\n              name=\"selection.prepend\"\n              v-bind=\"{ item: value }\"\n            />\n            <slot\n              name=\"selection\"\n              v-bind=\"{ item: value }\"\n            >\n              {{ getText(value) }}\n            </slot>\n          </span>\n\n          <span\n            v-if=\"clearable && value && !disabled\"\n            data-id=\"clear\"\n            :class=\"[ui.clear(), focused && '!visible']\"\n            @click.stop.prevent=\"clear()\"\n          >\n            <RuiIcon\n              color=\"error\"\n              name=\"lu-x\"\n              size=\"18\"\n            />\n          </span>\n\n          <span :class=\"ui.iconWrapper()\">\n            <RuiIcon\n              :class=\"ui.icon()\"\n              :size=\"dense ? 16 : 24\"\n              name=\"lu-chevron-down\"\n            />\n          </span>\n\n          <RuiProgress\n            v-if=\"loading\"\n            :class=\"ui.progress()\"\n            color=\"primary\"\n            thickness=\"3\"\n            variant=\"indeterminate\"\n          />\n        </button>\n        <fieldset\n          v-if=\"outlined\"\n          :class=\"ui.fieldset()\"\n        >\n          <legend :class=\"ui.legend()\">\n            {{ legendText }}\n          </legend>\n        </fieldset>\n      </slot>\n      <input\n        :value=\"valueKey\"\n        class=\"hidden\"\n        type=\"hidden\"\n      />\n    </template>\n    <template #default=\"{ width }\">\n      <div\n        v-if=\"options.length > 0\"\n        :ref=\"containerProps.ref\"\n        :class=\"ui.menu({ class: cn(classNames?.menu) ?? menuClass })\"\n        :style=\"[containerProps.style, { width: `${width}px`, minWidth: menuWidth }]\"\n        @scroll=\"containerProps.onScroll\"\n        @keydown.up.prevent=\"moveHighlight(true)\"\n        @keydown.down.prevent=\"moveHighlight(false)\"\n      >\n        <div\n          v-bind=\"wrapperProps\"\n          ref=\"menuRef\"\n        >\n          <RuiButton\n            v-for=\"{ item, _index } in renderedData\"\n            :key=\"getIdentifier(item)\"\n            :active=\"isActiveItem(item)\"\n            :aria-selected=\"isActiveItem(item)\"\n            :size=\"dense ? 'sm' : undefined\"\n            variant=\"list\"\n            :data-highlighted=\"highlightedIndex === _index\"\n            :class=\"{\n              [highlightedClass]: !isActiveItem(item) && highlightedIndex === _index,\n            }\"\n            @click=\"setValue(item)\"\n          >\n            <template #prepend>\n              <slot\n                name=\"item.prepend\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n            <slot\n              name=\"item\"\n              v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n            >\n              {{ getText(item) }}\n            </slot>\n            <template #append>\n              <slot\n                name=\"item.append\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n          </RuiButton>\n        </div>\n      </div>\n\n      <div\n        v-else-if=\"!hideNoData\"\n        data-id=\"no-data\"\n        :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n        :class=\"classNames?.menu ?? menuClass\"\n      >\n        <slot name=\"no-data\">\n          <div class=\"p-4\">\n            {{ noDataText }}\n          </div>\n        </slot>\n      </div>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":""}

package/dist/components/forms/select/RuiMenuSelect.vue_vue_type_script_setup_true_lang.js

@@ -3,6 +3,7 @@ import RuiIcon_default from "../../icons/RuiIcon.js";
 import RuiProgress_default from "../../progress/RuiProgress.js";
 import RuiButton_default from "../../buttons/button/RuiButton.js";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
+import { Placement } from "../../../composables/floating.js";
 import RuiMenu_default from "../../overlays/menu/RuiMenu.js";
 import { getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
 import { useDropdownMenu } from "../../../composables/dropdown-menu.js";
@@ -141,6 +142,10 @@ var RuiMenuSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		function clear() {
 			set$1(modelValue, void 0);
 		}
+		const menuFloatingOptions = computed(() => ({
+			placement: Placement.bottomStart,
+			...__props.menuOptions?.options
+		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(RuiMenu_default, mergeProps({
 				modelValue: unref(isOpen),
@@ -150,7 +155,7 @@ var RuiMenuSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				...__props.menuOptions
 			}, {
 				class: unref(ui).wrapper({ class: unref(cn)(_ctx.$attrs.class) }),
-				placement: "bottom-start",
+				options: unref(menuFloatingOptions),
 				"close-on-content-click": true,
 				"full-width": true,
 				"error-messages": __props.errorMessages,
@@ -301,6 +306,7 @@ var RuiMenuSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			}, 16, [
 				"modelValue",
 				"class",
+				"options",
 				"error-messages",
 				"success-messages",
 				"hint",

package/dist/components/forms/select/RuiMenuSelect.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiMenuSelect.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/select/RuiMenuSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { menuSelectStyles, type MenuSelectVariant } from '@/components/forms/select/menu-select-styles';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu, { type MenuProps } from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { type KeyOfType, useDropdownMenu } from '@/composables/dropdown-menu';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiMenuSelectClassNames {\n  root?: VueClassValue;\n  label?: VueClassValue;\n  menu?: VueClassValue;\n  option?: VueClassValue;\n}\n\nexport interface MenuSelectProps<TValue, TItem> {\n  options: TItem[];\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem;\n  disabled?: boolean;\n  loading?: boolean;\n  readOnly?: boolean;\n  dense?: boolean;\n  clearable?: boolean;\n  label?: string;\n  menuOptions?: MenuProps;\n  classNames?: RuiMenuSelectClassNames;\n  /** @deprecated Use `classNames.label` instead */\n  labelClass?: string;\n  /** @deprecated Use `classNames.menu` instead */\n  menuClass?: string;\n  /** @deprecated Use `classNames.option` instead */\n  optionClass?: string;\n  prependWidth?: number;\n  appendWidth?: number;\n  itemHeight?: number;\n  variant?: MenuSelectVariant;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  autoSelectFirst?: boolean;\n  hideNoData?: boolean;\n  noDataText?: string;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiMenuSelect',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue | undefined>({ required: true });\n\nconst {\n  options,\n  disabled = false,\n  loading = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  hideDetails = false,\n  label = 'Select',\n  menuOptions,\n  classNames,\n  labelClass,\n  menuClass,\n  variant = 'default',\n  hint,\n  keyAttr,\n  textAttr,\n  itemHeight,\n  errorMessages = [],\n  successMessages = [],\n  autoSelectFirst = false,\n  hideNoData = false,\n  noDataText = 'No data available',\n  required = false,\n} = defineProps<MenuSelectProps<TValue, TItem>>();\n\ndefineSlots<{\n  'activator'?: (props: {\n    disabled: boolean;\n    value: TItem | undefined;\n    variant: string;\n    readOnly: boolean;\n    attrs: Record<string, unknown>;\n    open: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  'activator.label'?: (props: { value: TItem | undefined }) => any;\n  'selection.prepend'?: (props: { item: TItem }) => any;\n  'selection'?: (props: { item: TItem }) => any;\n  'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'no-data'?: () => any;\n}>();\n\nconst menuRef = useTemplateRef<HTMLDivElement>('menuRef');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst { focused } = useFocus(activator);\nconst isHovered = ref<boolean>(false);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst value = computed<TItem | undefined>({\n  get: () => {\n    const value = get(modelValue);\n    if (keyAttr)\n      return options.find(option => option[keyAttr] === value);\n    return value as unknown as TItem;\n  },\n  set: (selected?: TItem) => {\n    const selection = keyAttr && selected ? selected[keyAttr] : selected;\n    set(modelValue, selection as TValue);\n  },\n});\n\nfunction setValue(val: TItem): void {\n  set(value, val);\n  set(focused, true);\n}\n\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  isOpen,\n  menuWidth,\n  getText,\n  getIdentifier,\n  isActiveItem,\n  highlightedIndex,\n  moveHighlight,\n  applyHighlighted,\n  valueKey,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: itemHeight ?? (dense ? 30 : 48),\n  keyAttr,\n  textAttr,\n  options: () => options,\n  dense: () => dense,\n  value,\n  menuRef,\n  disabled: () => disabled,\n  autoSelectFirst,\n  setValue,\n});\n\nconst outlined = computed<boolean>(() => variant === 'outlined');\nconst float = computed<boolean>(() => (get(isOpen) || !!get(value)) && get(outlined));\n\nconst legendText = computed<string>(() => {\n  if (!get(float) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof menuSelectStyles>>(() => menuSelectStyles({\n  filled: variant === 'filled',\n  outlined: get(outlined),\n  float: get(float),\n  opened: get(isOpen),\n  hovered: get(isHovered),\n  dense,\n  disabled,\n  readonly: readOnly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = menuSelectStyles({}).highlighted();\n\nfunction clear(): void {\n  set(modelValue, undefined);\n}\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n    :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n    placement=\"bottom-start\"\n    :close-on-content-click=\"true\"\n    :full-width=\"true\"\n    :error-messages=\"errorMessages\"\n    :success-messages=\"successMessages\"\n    :hint=\"hint\"\n    :dense=\"dense\"\n    :show-details=\"!hideDetails\"\n    :disabled=\"disabled\"\n    disable-auto-focus\n  >\n    <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ disabled, value, variant, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n      >\n        <button\n          ref=\"activator\"\n          :disabled=\"disabled\"\n          :aria-disabled=\"disabled\"\n          :aria-expanded=\"isOpen\"\n          :aria-readonly=\"readOnly || undefined\"\n          :aria-required=\"required || undefined\"\n          :aria-busy=\"loading || undefined\"\n          type=\"button\"\n          :tabindex=\"disabled || readOnly ? -1 : 0\"\n          :class=\"ui.activator({ class: cn(classNames?.label) ?? labelClass })\"\n          v-bind=\"{\n            ...getNonRootAttrs($attrs),\n            ...(readOnly ? {} : attrs),\n          }\"\n          data-id=\"activator\"\n          :aria-invalid=\"hasError\"\n          @mouseenter=\"isHovered = true\"\n          @mouseleave=\"isHovered = false\"\n          @keydown.up.prevent=\"moveHighlight(true)\"\n          @keydown.down.prevent=\"moveHighlight(false)\"\n          @keydown.enter.prevent=\"applyHighlighted()\"\n          @keydown.space.prevent=\"applyHighlighted()\"\n          @keydown.home.prevent=\"highlightedIndex = 0\"\n          @keydown.end.prevent=\"highlightedIndex = options.length - 1\"\n        >\n          <span\n            v-if=\"outlined || !value\"\n            :class=\"[\n              ui.label(),\n              { 'pr-2': !value && !open && outlined },\n            ]\"\n          >\n            <slot\n              name=\"activator.label\"\n              v-bind=\"{ value }\"\n            >\n              {{ label }}\n            </slot>\n            <span\n              v-if=\"required\"\n              :class=\"ui.required()\"\n            >\n              ﹡\n            </span>\n          </span>\n          <span\n            v-if=\"value\"\n            :class=\"ui.value()\"\n          >\n            <slot\n              name=\"selection.prepend\"\n              v-bind=\"{ item: value }\"\n            />\n            <slot\n              name=\"selection\"\n              v-bind=\"{ item: value }\"\n            >\n              {{ getText(value) }}\n            </slot>\n          </span>\n\n          <span\n            v-if=\"clearable && value && !disabled\"\n            data-id=\"clear\"\n            :class=\"[ui.clear(), focused && '!visible']\"\n            @click.stop.prevent=\"clear()\"\n          >\n            <RuiIcon\n              color=\"error\"\n              name=\"lu-x\"\n              size=\"18\"\n            />\n          </span>\n\n          <span :class=\"ui.iconWrapper()\">\n            <RuiIcon\n              :class=\"ui.icon()\"\n              :size=\"dense ? 16 : 24\"\n              name=\"lu-chevron-down\"\n            />\n          </span>\n\n          <RuiProgress\n            v-if=\"loading\"\n            :class=\"ui.progress()\"\n            color=\"primary\"\n            thickness=\"3\"\n            variant=\"indeterminate\"\n          />\n        </button>\n        <fieldset\n          v-if=\"outlined\"\n          :class=\"ui.fieldset()\"\n        >\n          <legend :class=\"ui.legend()\">\n            {{ legendText }}\n          </legend>\n        </fieldset>\n      </slot>\n      <input\n        :value=\"valueKey\"\n        class=\"hidden\"\n        type=\"hidden\"\n      />\n    </template>\n    <template #default=\"{ width }\">\n      <div\n        v-if=\"options.length > 0\"\n        :ref=\"containerProps.ref\"\n        :class=\"ui.menu({ class: cn(classNames?.menu) ?? menuClass })\"\n        :style=\"[containerProps.style, { width: `${width}px`, minWidth: menuWidth }]\"\n        @scroll=\"containerProps.onScroll\"\n        @keydown.up.prevent=\"moveHighlight(true)\"\n        @keydown.down.prevent=\"moveHighlight(false)\"\n      >\n        <div\n          v-bind=\"wrapperProps\"\n          ref=\"menuRef\"\n        >\n          <RuiButton\n            v-for=\"{ item, _index } in renderedData\"\n            :key=\"getIdentifier(item)\"\n            :active=\"isActiveItem(item)\"\n            :aria-selected=\"isActiveItem(item)\"\n            :size=\"dense ? 'sm' : undefined\"\n            variant=\"list\"\n            :data-highlighted=\"highlightedIndex === _index\"\n            :class=\"{\n              [highlightedClass]: !isActiveItem(item) && highlightedIndex === _index,\n            }\"\n            @click=\"setValue(item)\"\n          >\n            <template #prepend>\n              <slot\n                name=\"item.prepend\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n            <slot\n              name=\"item\"\n              v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n            >\n              {{ getText(item) }}\n            </slot>\n            <template #append>\n              <slot\n                name=\"item.append\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n          </RuiButton>\n        </div>\n      </div>\n\n      <div\n        v-else-if=\"!hideNoData\"\n        data-id=\"no-data\"\n        :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n        :class=\"classNames?.menu ?? menuClass\"\n      >\n        <slot name=\"no-data\">\n          <div class=\"p-4\">\n            {{ noDataText }}\n          </div>\n        </slot>\n      </div>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiMenuSelect.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/select/RuiMenuSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { menuSelectStyles, type MenuSelectVariant } from '@/components/forms/select/menu-select-styles';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu, { type MenuProps } from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { type KeyOfType, useDropdownMenu } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiMenuSelectClassNames {\n  root?: VueClassValue;\n  label?: VueClassValue;\n  menu?: VueClassValue;\n  option?: VueClassValue;\n}\n\nexport interface MenuSelectProps<TValue, TItem> {\n  options: TItem[];\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem;\n  disabled?: boolean;\n  loading?: boolean;\n  readOnly?: boolean;\n  dense?: boolean;\n  clearable?: boolean;\n  label?: string;\n  menuOptions?: MenuProps;\n  classNames?: RuiMenuSelectClassNames;\n  /** @deprecated Use `classNames.label` instead */\n  labelClass?: string;\n  /** @deprecated Use `classNames.menu` instead */\n  menuClass?: string;\n  /** @deprecated Use `classNames.option` instead */\n  optionClass?: string;\n  prependWidth?: number;\n  appendWidth?: number;\n  itemHeight?: number;\n  variant?: MenuSelectVariant;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  autoSelectFirst?: boolean;\n  hideNoData?: boolean;\n  noDataText?: string;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiMenuSelect',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue | undefined>({ required: true });\n\nconst {\n  options,\n  disabled = false,\n  loading = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  hideDetails = false,\n  label = 'Select',\n  menuOptions,\n  classNames,\n  labelClass,\n  menuClass,\n  variant = 'default',\n  hint,\n  keyAttr,\n  textAttr,\n  itemHeight,\n  errorMessages = [],\n  successMessages = [],\n  autoSelectFirst = false,\n  hideNoData = false,\n  noDataText = 'No data available',\n  required = false,\n} = defineProps<MenuSelectProps<TValue, TItem>>();\n\ndefineSlots<{\n  'activator'?: (props: {\n    disabled: boolean;\n    value: TItem | undefined;\n    variant: string;\n    readOnly: boolean;\n    attrs: Record<string, unknown>;\n    open: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  'activator.label'?: (props: { value: TItem | undefined }) => any;\n  'selection.prepend'?: (props: { item: TItem }) => any;\n  'selection'?: (props: { item: TItem }) => any;\n  'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'no-data'?: () => any;\n}>();\n\nconst menuRef = useTemplateRef<HTMLDivElement>('menuRef');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst { focused } = useFocus(activator);\nconst isHovered = ref<boolean>(false);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst value = computed<TItem | undefined>({\n  get: () => {\n    const value = get(modelValue);\n    if (keyAttr)\n      return options.find(option => option[keyAttr] === value);\n    return value as unknown as TItem;\n  },\n  set: (selected?: TItem) => {\n    const selection = keyAttr && selected ? selected[keyAttr] : selected;\n    set(modelValue, selection as TValue);\n  },\n});\n\nfunction setValue(val: TItem): void {\n  set(value, val);\n  set(focused, true);\n}\n\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  isOpen,\n  menuWidth,\n  getText,\n  getIdentifier,\n  isActiveItem,\n  highlightedIndex,\n  moveHighlight,\n  applyHighlighted,\n  valueKey,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: itemHeight ?? (dense ? 30 : 48),\n  keyAttr,\n  textAttr,\n  options: () => options,\n  dense: () => dense,\n  value,\n  menuRef,\n  disabled: () => disabled,\n  autoSelectFirst,\n  setValue,\n});\n\nconst outlined = computed<boolean>(() => variant === 'outlined');\nconst float = computed<boolean>(() => (get(isOpen) || !!get(value)) && get(outlined));\n\nconst legendText = computed<string>(() => {\n  if (!get(float) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof menuSelectStyles>>(() => menuSelectStyles({\n  filled: variant === 'filled',\n  outlined: get(outlined),\n  float: get(float),\n  opened: get(isOpen),\n  hovered: get(isHovered),\n  dense,\n  disabled,\n  readonly: readOnly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = menuSelectStyles({}).highlighted();\n\nfunction clear(): void {\n  set(modelValue, undefined);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n  placement: Placement.bottomStart,\n  ...menuOptions?.options,\n}));\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n    :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n    :options=\"menuFloatingOptions\"\n    :close-on-content-click=\"true\"\n    :full-width=\"true\"\n    :error-messages=\"errorMessages\"\n    :success-messages=\"successMessages\"\n    :hint=\"hint\"\n    :dense=\"dense\"\n    :show-details=\"!hideDetails\"\n    :disabled=\"disabled\"\n    disable-auto-focus\n  >\n    <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ disabled, value, variant, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n      >\n        <button\n          ref=\"activator\"\n          :disabled=\"disabled\"\n          :aria-disabled=\"disabled\"\n          :aria-expanded=\"isOpen\"\n          :aria-readonly=\"readOnly || undefined\"\n          :aria-required=\"required || undefined\"\n          :aria-busy=\"loading || undefined\"\n          type=\"button\"\n          :tabindex=\"disabled || readOnly ? -1 : 0\"\n          :class=\"ui.activator({ class: cn(classNames?.label) ?? labelClass })\"\n          v-bind=\"{\n            ...getNonRootAttrs($attrs),\n            ...(readOnly ? {} : attrs),\n          }\"\n          data-id=\"activator\"\n          :aria-invalid=\"hasError\"\n          @mouseenter=\"isHovered = true\"\n          @mouseleave=\"isHovered = false\"\n          @keydown.up.prevent=\"moveHighlight(true)\"\n          @keydown.down.prevent=\"moveHighlight(false)\"\n          @keydown.enter.prevent=\"applyHighlighted()\"\n          @keydown.space.prevent=\"applyHighlighted()\"\n          @keydown.home.prevent=\"highlightedIndex = 0\"\n          @keydown.end.prevent=\"highlightedIndex = options.length - 1\"\n        >\n          <span\n            v-if=\"outlined || !value\"\n            :class=\"[\n              ui.label(),\n              { 'pr-2': !value && !open && outlined },\n            ]\"\n          >\n            <slot\n              name=\"activator.label\"\n              v-bind=\"{ value }\"\n            >\n              {{ label }}\n            </slot>\n            <span\n              v-if=\"required\"\n              :class=\"ui.required()\"\n            >\n              ﹡\n            </span>\n          </span>\n          <span\n            v-if=\"value\"\n            :class=\"ui.value()\"\n          >\n            <slot\n              name=\"selection.prepend\"\n              v-bind=\"{ item: value }\"\n            />\n            <slot\n              name=\"selection\"\n              v-bind=\"{ item: value }\"\n            >\n              {{ getText(value) }}\n            </slot>\n          </span>\n\n          <span\n            v-if=\"clearable && value && !disabled\"\n            data-id=\"clear\"\n            :class=\"[ui.clear(), focused && '!visible']\"\n            @click.stop.prevent=\"clear()\"\n          >\n            <RuiIcon\n              color=\"error\"\n              name=\"lu-x\"\n              size=\"18\"\n            />\n          </span>\n\n          <span :class=\"ui.iconWrapper()\">\n            <RuiIcon\n              :class=\"ui.icon()\"\n              :size=\"dense ? 16 : 24\"\n              name=\"lu-chevron-down\"\n            />\n          </span>\n\n          <RuiProgress\n            v-if=\"loading\"\n            :class=\"ui.progress()\"\n            color=\"primary\"\n            thickness=\"3\"\n            variant=\"indeterminate\"\n          />\n        </button>\n        <fieldset\n          v-if=\"outlined\"\n          :class=\"ui.fieldset()\"\n        >\n          <legend :class=\"ui.legend()\">\n            {{ legendText }}\n          </legend>\n        </fieldset>\n      </slot>\n      <input\n        :value=\"valueKey\"\n        class=\"hidden\"\n        type=\"hidden\"\n      />\n    </template>\n    <template #default=\"{ width }\">\n      <div\n        v-if=\"options.length > 0\"\n        :ref=\"containerProps.ref\"\n        :class=\"ui.menu({ class: cn(classNames?.menu) ?? menuClass })\"\n        :style=\"[containerProps.style, { width: `${width}px`, minWidth: menuWidth }]\"\n        @scroll=\"containerProps.onScroll\"\n        @keydown.up.prevent=\"moveHighlight(true)\"\n        @keydown.down.prevent=\"moveHighlight(false)\"\n      >\n        <div\n          v-bind=\"wrapperProps\"\n          ref=\"menuRef\"\n        >\n          <RuiButton\n            v-for=\"{ item, _index } in renderedData\"\n            :key=\"getIdentifier(item)\"\n            :active=\"isActiveItem(item)\"\n            :aria-selected=\"isActiveItem(item)\"\n            :size=\"dense ? 'sm' : undefined\"\n            variant=\"list\"\n            :data-highlighted=\"highlightedIndex === _index\"\n            :class=\"{\n              [highlightedClass]: !isActiveItem(item) && highlightedIndex === _index,\n            }\"\n            @click=\"setValue(item)\"\n          >\n            <template #prepend>\n              <slot\n                name=\"item.prepend\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n            <slot\n              name=\"item\"\n              v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n            >\n              {{ getText(item) }}\n            </slot>\n            <template #append>\n              <slot\n                name=\"item.append\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n          </RuiButton>\n        </div>\n      </div>\n\n      <div\n        v-else-if=\"!hideNoData\"\n        data-id=\"no-data\"\n        :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n        :class=\"classNames?.menu ?? menuClass\"\n      >\n        <slot name=\"no-data\">\n          <div class=\"p-4\">\n            {{ noDataText }}\n          </div>\n        </slot>\n      </div>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -17,6 +17,7 @@ import RuiDivider, { type Props as DividerProps } from '../components/divider/Ru
 import RuiAutoComplete, { type AutoCompleteProps, type RuiAutoCompleteClassNames } from '../components/forms/auto-complete/RuiAutoComplete.vue';
 import RuiCheckboxGroup, { type Props as CheckboxGroupProps } from '../components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue';
 import RuiCheckbox, { type Props as CheckboxProps } from '../components/forms/checkbox/RuiCheckbox.vue';
+import RuiFileUpload, { type FileUploadProps } from '../components/forms/file-upload/RuiFileUpload.vue';
 import RuiRadioGroup, { type Props as RadioGroupProps } from '../components/forms/radio-button/radio-group/RuiRadioGroup.vue';
 import RuiRadio, { type RadioProps } from '../components/forms/radio-button/radio/RuiRadio.vue';
 import RuiRevealableTextField, { type Props as RevealableTextFieldProps } from '../components/forms/revealable-text-field/RuiRevealableTextField.vue';
@@ -47,5 +48,5 @@ import RuiTabItems from '../components/tabs/tab-items/RuiTabItems.vue';
 import RuiTab, { type RuiTabClassNames, type Props as TabProps } from '../components/tabs/tab/RuiTab.vue';
 import RuiTabs, { type Props as TabsProps } from '../components/tabs/tabs/RuiTabs.vue';
 import RuiTimePicker, { type RuiTimePickerProps } from '../components/time-picker/RuiTimePicker.vue';
-export type { AccordionProps, AccordionsProps, AlertProps, AutoCompleteProps, AvatarGroupProps, AvatarProps, BadgeProps, BottomSheetProps, ButtonGroupProps, ButtonProps, CalendarProps, CardHeaderProps, CardProps, CheckboxGroupProps, CheckboxProps, ChipProps, DataTableColumn, DataTableGroupKeys, DataTableOptions, DataTableProps, DataTableSortColumn, DataTableSortData, DialogProps, DividerProps, ExpandButtonProps, FooterStepperProps, GroupData, IconProps, LogoProps, MenuProps, MenuSelectProps, NavigationDrawerProps, NotificationProps, ProgressProps, RadioGroupProps, RadioProps, RevealableTextFieldProps, RuiAccordionClassNames, RuiAutoCompleteClassNames, RuiCardClassNames, RuiChipClassNames, RuiDateTimePickerProps, RuiDialogClassNames, RuiMenuClassNames, RuiMenuSelectClassNames, RuiNavigationDrawerClassNames, RuiSliderClassNames, RuiStepperClassNames, RuiTabClassNames, RuiTimePickerProps, RuiTimezoneSelectProps, RuiTooltipClassNames, SimpleSelectProps, SkeletonLoaderProps, SliderProps, StepperProps, SwitchProps, TabItemProps, TablePaginationData, TablePaginationProps, TabProps, TabsProps, TextAreaProps, TextFieldProps, TooltipProps, };
-export { RuiAccordion, RuiAccordions, RuiAlert, RuiAutoComplete, RuiAvatar, RuiAvatarGroup, RuiBadge, RuiBottomSheet, RuiButton, RuiButtonGroup, RuiCalendar, RuiCard, RuiCardHeader, RuiCheckbox, RuiCheckboxGroup, RuiChip, RuiColorPicker, RuiDataTable, RuiDateTimePicker, RuiDialog, RuiDivider, RuiFooterStepper, RuiIcon, RuiLogo, RuiMenu, RuiMenuSelect, RuiNavigationDrawer, RuiNotification, RuiProgress, RuiRadio, RuiRadioGroup, RuiRevealableTextField, RuiSimpleSelect, RuiSkeletonLoader, RuiSlider, RuiStepper, RuiSwitch, RuiTab, RuiTabItem, RuiTabItems, RuiTablePagination, RuiTableRowExpander, RuiTabs, RuiTextArea, RuiTextField, RuiTimePicker, RuiTimezoneSelect, RuiTooltip, };
+export type { AccordionProps, AccordionsProps, AlertProps, AutoCompleteProps, AvatarGroupProps, AvatarProps, BadgeProps, BottomSheetProps, ButtonGroupProps, ButtonProps, CalendarProps, CardHeaderProps, CardProps, CheckboxGroupProps, CheckboxProps, ChipProps, DataTableColumn, DataTableGroupKeys, DataTableOptions, DataTableProps, DataTableSortColumn, DataTableSortData, DialogProps, DividerProps, ExpandButtonProps, FileUploadProps, FooterStepperProps, GroupData, IconProps, LogoProps, MenuProps, MenuSelectProps, NavigationDrawerProps, NotificationProps, ProgressProps, RadioGroupProps, RadioProps, RevealableTextFieldProps, RuiAccordionClassNames, RuiAutoCompleteClassNames, RuiCardClassNames, RuiChipClassNames, RuiDateTimePickerProps, RuiDialogClassNames, RuiMenuClassNames, RuiMenuSelectClassNames, RuiNavigationDrawerClassNames, RuiSliderClassNames, RuiStepperClassNames, RuiTabClassNames, RuiTimePickerProps, RuiTimezoneSelectProps, RuiTooltipClassNames, SimpleSelectProps, SkeletonLoaderProps, SliderProps, StepperProps, SwitchProps, TabItemProps, TablePaginationData, TablePaginationProps, TabProps, TabsProps, TextAreaProps, TextFieldProps, TooltipProps, };
+export { RuiAccordion, RuiAccordions, RuiAlert, RuiAutoComplete, RuiAvatar, RuiAvatarGroup, RuiBadge, RuiBottomSheet, RuiButton, RuiButtonGroup, RuiCalendar, RuiCard, RuiCardHeader, RuiCheckbox, RuiCheckboxGroup, RuiChip, RuiColorPicker, RuiDataTable, RuiDateTimePicker, RuiDialog, RuiDivider, RuiFileUpload, RuiFooterStepper, RuiIcon, RuiLogo, RuiMenu, RuiMenuSelect, RuiNavigationDrawer, RuiNotification, RuiProgress, RuiRadio, RuiRadioGroup, RuiRevealableTextField, RuiSimpleSelect, RuiSkeletonLoader, RuiSlider, RuiStepper, RuiSwitch, RuiTab, RuiTabItem, RuiTabItems, RuiTablePagination, RuiTableRowExpander, RuiTabs, RuiTextArea, RuiTextField, RuiTimePicker, RuiTimezoneSelect, RuiTooltip, };

package/dist/components/index.js

@@ -22,6 +22,7 @@ import RuiDateTimePicker_default from "./date-time-picker/RuiDateTimePicker.js";
 import RuiDivider_default from "./divider/RuiDivider.js";
 import RuiCheckboxGroup_default from "./forms/checkbox/checkbox-group/RuiCheckboxGroup.js";
 import RuiCheckbox_default from "./forms/checkbox/RuiCheckbox.js";
+import RuiFileUpload_default from "./forms/file-upload/RuiFileUpload.js";
 import RuiRadioGroup_default from "./forms/radio-button/radio-group/RuiRadioGroup.js";
 import RuiRadio_default from "./forms/radio-button/radio/RuiRadio.js";
 import RuiRevealableTextField_default from "./forms/revealable-text-field/RuiRevealableTextField.js";
@@ -46,4 +47,4 @@ import RuiTabItem_default from "./tabs/tab-item/RuiTabItem.js";
 import RuiTabItems_default from "./tabs/tab-items/RuiTabItems.js";
 import RuiTab_default from "./tabs/tab/RuiTab.js";
 import RuiTabs_default from "./tabs/tabs/RuiTabs.js";
-export { RuiAccordion_default as RuiAccordion, RuiAccordions_default as RuiAccordions, RuiAlert_default as RuiAlert, RuiAutoComplete_default as RuiAutoComplete, RuiAvatar_default as RuiAvatar, RuiAvatarGroup_default as RuiAvatarGroup, RuiBadge_default as RuiBadge, RuiBottomSheet_default as RuiBottomSheet, RuiButton_default as RuiButton, RuiButtonGroup_default as RuiButtonGroup, RuiCalendar_default as RuiCalendar, RuiCard_default as RuiCard, RuiCardHeader_default as RuiCardHeader, RuiCheckbox_default as RuiCheckbox, RuiCheckboxGroup_default as RuiCheckboxGroup, RuiChip_default as RuiChip, RuiColorPicker_default as RuiColorPicker, RuiDataTable_default as RuiDataTable, RuiDateTimePicker_default as RuiDateTimePicker, RuiDialog_default as RuiDialog, RuiDivider_default as RuiDivider, RuiFooterStepper_default as RuiFooterStepper, RuiIcon_default as RuiIcon, RuiLogo_default as RuiLogo, RuiMenu_default as RuiMenu, RuiMenuSelect_default as RuiMenuSelect, RuiNavigationDrawer_default as RuiNavigationDrawer, RuiNotification_default as RuiNotification, RuiProgress_default as RuiProgress, RuiRadio_default as RuiRadio, RuiRadioGroup_default as RuiRadioGroup, RuiRevealableTextField_default as RuiRevealableTextField, RuiSimpleSelect_default as RuiSimpleSelect, RuiSkeletonLoader_default as RuiSkeletonLoader, RuiSlider_default as RuiSlider, RuiStepper_default as RuiStepper, RuiSwitch_default as RuiSwitch, RuiTab_default as RuiTab, RuiTabItem_default as RuiTabItem, RuiTabItems_default as RuiTabItems, RuiTablePagination_default as RuiTablePagination, RuiExpandButton_default as RuiTableRowExpander, RuiTabs_default as RuiTabs, RuiTextArea_default as RuiTextArea, RuiTextField_default as RuiTextField, RuiTimePicker_default as RuiTimePicker, RuiTimezoneSelect_default as RuiTimezoneSelect, RuiTooltip_default as RuiTooltip };
+export { RuiAccordion_default as RuiAccordion, RuiAccordions_default as RuiAccordions, RuiAlert_default as RuiAlert, RuiAutoComplete_default as RuiAutoComplete, RuiAvatar_default as RuiAvatar, RuiAvatarGroup_default as RuiAvatarGroup, RuiBadge_default as RuiBadge, RuiBottomSheet_default as RuiBottomSheet, RuiButton_default as RuiButton, RuiButtonGroup_default as RuiButtonGroup, RuiCalendar_default as RuiCalendar, RuiCard_default as RuiCard, RuiCardHeader_default as RuiCardHeader, RuiCheckbox_default as RuiCheckbox, RuiCheckboxGroup_default as RuiCheckboxGroup, RuiChip_default as RuiChip, RuiColorPicker_default as RuiColorPicker, RuiDataTable_default as RuiDataTable, RuiDateTimePicker_default as RuiDateTimePicker, RuiDialog_default as RuiDialog, RuiDivider_default as RuiDivider, RuiFileUpload_default as RuiFileUpload, RuiFooterStepper_default as RuiFooterStepper, RuiIcon_default as RuiIcon, RuiLogo_default as RuiLogo, RuiMenu_default as RuiMenu, RuiMenuSelect_default as RuiMenuSelect, RuiNavigationDrawer_default as RuiNavigationDrawer, RuiNotification_default as RuiNotification, RuiProgress_default as RuiProgress, RuiRadio_default as RuiRadio, RuiRadioGroup_default as RuiRadioGroup, RuiRevealableTextField_default as RuiRevealableTextField, RuiSimpleSelect_default as RuiSimpleSelect, RuiSkeletonLoader_default as RuiSkeletonLoader, RuiSlider_default as RuiSlider, RuiStepper_default as RuiStepper, RuiSwitch_default as RuiSwitch, RuiTab_default as RuiTab, RuiTabItem_default as RuiTabItem, RuiTabItems_default as RuiTabItems, RuiTablePagination_default as RuiTablePagination, RuiExpandButton_default as RuiTableRowExpander, RuiTabs_default as RuiTabs, RuiTextArea_default as RuiTextArea, RuiTextField_default as RuiTextField, RuiTimePicker_default as RuiTimePicker, RuiTimezoneSelect_default as RuiTimezoneSelect, RuiTooltip_default as RuiTooltip };

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

@@ -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\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":""}
+{"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   * Optional external element to anchor the menu to, instead of the\n   * activator slot's wrapper. When set, the menu's position is computed\n   * against this element.\n   */\n  anchorEl?: HTMLElement;\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  anchorEl,\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  () => anchorEl,\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.d.ts

@@ -29,6 +29,12 @@ export interface MenuProps {
     dense?: boolean;
     persistent?: boolean;
     disableAutoFocus?: boolean;
+    /**
+     * Optional external element to anchor the menu to, instead of the
+     * activator slot's wrapper. When set, the menu's position is computed
+     * against this element.
+     */
+    anchorEl?: HTMLElement;
 }
 type __VLS_Props = MenuProps;
 type __VLS_Slots = {