@rotki/ui-library 2.15.0 → 2.16.1

package/dist/components/forms/select/RuiMenuSelect.vue.d.ts

@@ -1,6 +1,14 @@
-import { type MenuProps } from '../../../components/overlays/menu/RuiMenu.vue.js';
+import type { VueClassValue } from '../../../types/class-value';
+import { type MenuSelectVariant } from '../../../components/forms/select/menu-select-styles.js';
+import { type MenuProps } from '../../../components/overlays/menu/RuiMenu.vue';
 import { type KeyOfType } from '../../../composables/dropdown-menu.js';
-export interface Props<TValue, TItem> {
+export interface RuiMenuSelectClassNames {
+    root?: VueClassValue;
+    label?: VueClassValue;
+    menu?: VueClassValue;
+    option?: VueClassValue;
+}
+export interface MenuSelectProps<TValue, TItem> {
     options: TItem[];
     keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;
     textAttr?: keyof TItem;
@@ -11,13 +19,17 @@ export interface Props<TValue, TItem> {
     clearable?: boolean;
     label?: string;
     menuOptions?: MenuProps;
+    classNames?: RuiMenuSelectClassNames;
+    /** @deprecated Use `classNames.label` instead */
     labelClass?: string;
+    /** @deprecated Use `classNames.menu` instead */
     menuClass?: string;
+    /** @deprecated Use `classNames.option` instead */
     optionClass?: string;
     prependWidth?: number;
     appendWidth?: number;
     itemHeight?: number;
-    variant?: 'default' | 'filled' | 'outlined';
+    variant?: MenuSelectVariant;
     hint?: string;
     errorMessages?: string | string[];
     successMessages?: string | string[];
@@ -28,7 +40,7 @@ export interface Props<TValue, TItem> {
     required?: boolean;
 }
 declare const __VLS_export: <TValue, TItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<TValue, TItem> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(MenuSelectProps<TValue, TItem> & {
         modelValue: TValue | undefined;
     }) & {
         "onUpdate:modelValue"?: ((value: TValue | undefined) => any) | undefined;

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

@@ -0,0 +1,313 @@
+import { cn } from "../../../utils/tv.js";
+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 RuiMenu_default from "../../overlays/menu/RuiMenu.js";
+import { getNonRootAttrs, getRootAttrs } from "../../../utils/helpers.js";
+import { useDropdownMenu } from "../../../composables/dropdown-menu.js";
+import { menuSelectStyles } from "./menu-select-styles.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, isRef, mergeModels, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString, unref, useModel, useTemplateRef, withCtx, withKeys, withModifiers } from "vue";
+import { useFocus } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/components/forms/select/RuiMenuSelect.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"disabled",
+	"aria-disabled",
+	"aria-expanded",
+	"aria-readonly",
+	"aria-required",
+	"aria-busy",
+	"tabindex",
+	"aria-invalid"
+];
+var _hoisted_2 = ["value"];
+var _hoisted_3 = { class: "p-4" };
+var RuiMenuSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiMenuSelect",
+	inheritAttrs: false,
+	__name: "RuiMenuSelect",
+	props: /* @__PURE__ */ mergeModels({
+		options: {},
+		keyAttr: {},
+		textAttr: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
+		dense: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		label: { default: "Select" },
+		menuOptions: {},
+		classNames: {},
+		labelClass: {},
+		menuClass: {},
+		optionClass: {},
+		prependWidth: {},
+		appendWidth: {},
+		itemHeight: {},
+		variant: { default: "default" },
+		hint: {},
+		errorMessages: { default: () => [] },
+		successMessages: { default: () => [] },
+		hideDetails: {
+			type: Boolean,
+			default: false
+		},
+		autoSelectFirst: {
+			type: Boolean,
+			default: false
+		},
+		hideNoData: {
+			type: Boolean,
+			default: false
+		},
+		noDataText: { default: "No data available" },
+		required: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const menuRef = useTemplateRef("menuRef");
+		const activator = useTemplateRef("activator");
+		const { focused } = useFocus(activator);
+		const { hasError, hasSuccess } = useFormTextDetail(() => __props.errorMessages, () => __props.successMessages);
+		const value = computed({
+			get: () => {
+				const value = get$1(modelValue);
+				if (__props.keyAttr) return __props.options.find((option) => option[__props.keyAttr] === value);
+				return value;
+			},
+			set: (selected) => {
+				set$1(modelValue, __props.keyAttr && selected ? selected[__props.keyAttr] : selected);
+			}
+		});
+		function setValue(val) {
+			set$1(value, val);
+			set$1(focused, true);
+		}
+		const { containerProps, wrapperProps, renderedData, isOpen, menuWidth, getText, getIdentifier, isActiveItem, highlightedIndex, moveHighlight, applyHighlighted, valueKey } = useDropdownMenu({
+			itemHeight: __props.itemHeight ?? (__props.dense ? 30 : 48),
+			keyAttr: __props.keyAttr,
+			textAttr: __props.textAttr,
+			options: () => __props.options,
+			dense: () => __props.dense,
+			value,
+			menuRef,
+			disabled: () => __props.disabled,
+			autoSelectFirst: __props.autoSelectFirst,
+			setValue
+		});
+		const outlined = computed(() => __props.variant === "outlined");
+		const float = computed(() => (get$1(isOpen) || !!get$1(value)) && get$1(outlined));
+		const legendText = computed(() => {
+			if (!get$1(float) || !__props.label) return "";
+			return __props.required ? `${__props.label} ﹡` : __props.label;
+		});
+		const ui = computed(() => menuSelectStyles({
+			filled: __props.variant === "filled",
+			outlined: get$1(outlined),
+			float: get$1(float),
+			opened: get$1(isOpen),
+			dense: __props.dense,
+			disabled: __props.disabled,
+			readonly: __props.readOnly,
+			hasError: get$1(hasError),
+			hasSuccess: get$1(hasSuccess) && !get$1(hasError)
+		}));
+		const highlightedClass = menuSelectStyles({}).highlighted();
+		function clear() {
+			set$1(modelValue, void 0);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(RuiMenu_default, mergeProps({
+				modelValue: unref(isOpen),
+				"onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => isRef(isOpen) ? isOpen.value = $event : null)
+			}, {
+				...unref(getRootAttrs)(_ctx.$attrs),
+				...__props.menuOptions
+			}, {
+				class: unref(ui).wrapper(),
+				placement: "bottom-start",
+				"close-on-content-click": true,
+				"full-width": true,
+				"error-messages": __props.errorMessages,
+				"success-messages": __props.successMessages,
+				hint: __props.hint,
+				dense: __props.dense,
+				"show-details": !__props.hideDetails,
+				disabled: __props.disabled,
+				"disable-auto-focus": ""
+			}), {
+				activator: withCtx(({ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }) => [renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({
+					disabled: __props.disabled,
+					value: unref(value),
+					variant: __props.variant,
+					readOnly: __props.readOnly,
+					attrs,
+					open,
+					hasError: slotHasError,
+					hasSuccess: slotHasSuccess
+				})), () => [createElementVNode("button", mergeProps({
+					ref_key: "activator",
+					ref: activator,
+					disabled: __props.disabled,
+					"aria-disabled": __props.disabled,
+					"aria-expanded": unref(isOpen),
+					"aria-readonly": __props.readOnly || void 0,
+					"aria-required": __props.required || void 0,
+					"aria-busy": __props.loading || void 0,
+					type: "button",
+					tabindex: __props.disabled || __props.readOnly ? -1 : 0,
+					class: unref(ui).activator({ class: unref(cn)(__props.classNames?.label) ?? __props.labelClass })
+				}, {
+					...unref(getNonRootAttrs)(_ctx.$attrs),
+					...__props.readOnly ? {} : attrs
+				}, {
+					"data-id": "activator",
+					"aria-invalid": unref(hasError),
+					onKeydown: [
+						_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => unref(moveHighlight)(true), ["prevent"]), ["up"])),
+						_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => unref(moveHighlight)(false), ["prevent"]), ["down"])),
+						_cache[3] || (_cache[3] = withKeys(withModifiers(($event) => unref(applyHighlighted)(), ["prevent"]), ["enter"])),
+						_cache[4] || (_cache[4] = withKeys(withModifiers(($event) => unref(applyHighlighted)(), ["prevent"]), ["space"])),
+						_cache[5] || (_cache[5] = withKeys(withModifiers(($event) => highlightedIndex.value = 0, ["prevent"]), ["home"])),
+						_cache[6] || (_cache[6] = withKeys(withModifiers(($event) => highlightedIndex.value = __props.options.length - 1, ["prevent"]), ["end"]))
+					]
+				}), [
+					unref(outlined) || !unref(value) ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass([unref(ui).label(), { "pr-2": !unref(value) && !open && unref(outlined) }])
+					}, [renderSlot(_ctx.$slots, "activator.label", normalizeProps(guardReactiveProps({ value: unref(value) })), () => [createTextVNode(toDisplayString(__props.label), 1)]), __props.required ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass(unref(ui).required())
+					}, " ﹡ ", 2)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
+					unref(value) ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(unref(ui).value())
+					}, [renderSlot(_ctx.$slots, "selection.prepend", normalizeProps(guardReactiveProps({ item: unref(value) }))), renderSlot(_ctx.$slots, "selection", normalizeProps(guardReactiveProps({ item: unref(value) })), () => [createTextVNode(toDisplayString(unref(getText)(unref(value))), 1)])], 2)) : createCommentVNode("", true),
+					__props.clearable && unref(value) && !__props.disabled ? (openBlock(), createElementBlock("span", {
+						key: 2,
+						"data-id": "clear",
+						class: normalizeClass([unref(ui).clear(), unref(focused) && "!visible"]),
+						onClick: _cache[0] || (_cache[0] = withModifiers(($event) => clear(), ["stop", "prevent"]))
+					}, [createVNode(RuiIcon_default, {
+						color: "error",
+						name: "lu-x",
+						size: "18"
+					})], 2)) : createCommentVNode("", true),
+					createElementVNode("span", { class: normalizeClass(unref(ui).iconWrapper()) }, [createVNode(RuiIcon_default, {
+						class: normalizeClass(unref(ui).icon()),
+						size: __props.dense ? 16 : 24,
+						name: "lu-chevron-down"
+					}, null, 8, ["class", "size"])], 2),
+					__props.loading ? (openBlock(), createBlock(RuiProgress_default, {
+						key: 3,
+						class: normalizeClass(unref(ui).progress()),
+						color: "primary",
+						thickness: "3",
+						variant: "indeterminate"
+					}, null, 8, ["class"])) : createCommentVNode("", true)
+				], 16, _hoisted_1), unref(outlined) ? (openBlock(), createElementBlock("fieldset", {
+					key: 0,
+					class: normalizeClass(unref(ui).fieldset())
+				}, [createElementVNode("legend", { class: normalizeClass(unref(ui).legend()) }, toDisplayString(unref(legendText)), 3)], 2)) : createCommentVNode("", true)]), createElementVNode("input", {
+					value: unref(valueKey),
+					class: "hidden",
+					type: "hidden"
+				}, null, 8, _hoisted_2)]),
+				default: withCtx(({ width }) => [__props.options.length > 0 ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref: unref(containerProps).ref,
+					class: normalizeClass(unref(ui).menu({ class: unref(cn)(__props.classNames?.menu) ?? __props.menuClass })),
+					style: normalizeStyle([unref(containerProps).style, {
+						width: `${width}px`,
+						minWidth: unref(menuWidth)
+					}]),
+					onScroll: _cache[7] || (_cache[7] = (...args) => unref(containerProps).onScroll && unref(containerProps).onScroll(...args)),
+					onKeydown: [_cache[8] || (_cache[8] = withKeys(withModifiers(($event) => unref(moveHighlight)(true), ["prevent"]), ["up"])), _cache[9] || (_cache[9] = withKeys(withModifiers(($event) => unref(moveHighlight)(false), ["prevent"]), ["down"]))]
+				}, [createElementVNode("div", mergeProps(unref(wrapperProps), {
+					ref_key: "menuRef",
+					ref: menuRef
+				}), [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(renderedData), ({ item, _index }) => {
+					return openBlock(), createBlock(RuiButton_default, {
+						key: unref(getIdentifier)(item),
+						active: unref(isActiveItem)(item),
+						"aria-selected": unref(isActiveItem)(item),
+						size: __props.dense ? "sm" : void 0,
+						variant: "list",
+						"data-highlighted": unref(highlightedIndex) === _index,
+						class: normalizeClass({ [unref(highlightedClass)]: !unref(isActiveItem)(item) && unref(highlightedIndex) === _index }),
+						onClick: ($event) => setValue(item)
+					}, {
+						prepend: withCtx(() => [renderSlot(_ctx.$slots, "item.prepend", mergeProps({ ref_for: true }, {
+							disabled: __props.disabled,
+							item,
+							active: unref(isActiveItem)(item)
+						}))]),
+						append: withCtx(() => [renderSlot(_ctx.$slots, "item.append", mergeProps({ ref_for: true }, {
+							disabled: __props.disabled,
+							item,
+							active: unref(isActiveItem)(item)
+						}))]),
+						default: withCtx(() => [renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, {
+							disabled: __props.disabled,
+							item,
+							active: unref(isActiveItem)(item)
+						}), () => [createTextVNode(toDisplayString(unref(getText)(item)), 1)])]),
+						_: 2
+					}, 1032, [
+						"active",
+						"aria-selected",
+						"size",
+						"data-highlighted",
+						"class",
+						"onClick"
+					]);
+				}), 128))], 16)], 38)) : !__props.hideNoData ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					"data-id": "no-data",
+					style: normalizeStyle({
+						width: `${width}px`,
+						minWidth: unref(menuWidth)
+					}),
+					class: normalizeClass(__props.classNames?.menu ?? __props.menuClass)
+				}, [renderSlot(_ctx.$slots, "no-data", {}, () => [createElementVNode("div", _hoisted_3, toDisplayString(__props.noDataText), 1)])], 6)) : createCommentVNode("", true)]),
+				_: 3
+			}, 16, [
+				"modelValue",
+				"class",
+				"error-messages",
+				"success-messages",
+				"hint",
+				"dense",
+				"show-details",
+				"disabled"
+			]);
+		};
+	}
+});
+//#endregion
+export { RuiMenuSelect_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiMenuSelect.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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);\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  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()\"\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          @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/forms/select/RuiSimpleSelect.js

@@ -0,0 +1,7 @@
+import RuiSimpleSelect_vue_vue_type_script_setup_true_lang_default from "./RuiSimpleSelect.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/forms/select/RuiSimpleSelect.vue
+var RuiSimpleSelect_default = RuiSimpleSelect_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiSimpleSelect_default as default };
+
+//# sourceMappingURL=RuiSimpleSelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiSimpleSelect.js","names":[],"sources":["../../../../src/components/forms/select/RuiSimpleSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  options: string[] | number[];\n  disabled?: boolean;\n  label?: string;\n  name?: string;\n  variant?: 'default' | 'outlined';\n}\n\ndefineOptions({\n  name: 'RuiSimpleSelect',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string | number>({ required: true });\n\nconst { options, disabled = false, label, name = '', variant: selectVariant = 'default' } = defineProps<Props>();\n\nconst selectClass = tv({\n  base: [\n    'outline-none focus:outline-none appearance-none cursor-pointer pl-2 py-1 pr-8 rounded',\n    'm-0 w-full transition [font:inherit]',\n    'bg-white hover:bg-gray-50',\n    'dark:bg-transparent dark:hover:bg-white/10 dark:text-rui-text-disabled',\n    'disabled:bg-black/[.12] disabled:text-rui-text-disabled disabled:active:text-rui-text-disabled disabled:cursor-default',\n    'dark:disabled:bg-white/10',\n  ].join(' '),\n  variants: {\n    variant: {\n      default: '',\n      outlined: 'border border-rui-text-disabled disabled:border-transparent dark:border-rui-text-disabled',\n    },\n  },\n  defaultVariants: { variant: 'default' },\n});\n\nconst ui = computed<string>(() => selectClass({ variant: selectVariant }));\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex\"\n    v-bind=\"$attrs\"\n  >\n    <select\n      v-model=\"modelValue\"\n      :class=\"ui\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :aria-label=\"label\"\n      data-id=\"select\"\n    >\n      <option\n        v-for=\"option in options\"\n        :key=\"option\"\n        :value=\"option\"\n      >\n        {{ option }}\n      </option>\n    </select>\n    <span\n      class=\"flex items-center justify-end absolute right-1 top-px bottom-0 pointer-events-none\"\n      aria-hidden=\"true\"\n    >\n      <RuiIcon\n        class=\"text-rui-text-disabled pointer-events-none\"\n        name=\"lu-chevron-down\"\n        size=\"16\"\n      />\n    </span>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,75 @@
+import { tv } from "../../../utils/tv.js";
+import RuiIcon_default from "../../icons/RuiIcon.js";
+import { Fragment, computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, vModelSelect, withDirectives } from "vue";
+//#region src/components/forms/select/RuiSimpleSelect.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"name",
+	"disabled",
+	"aria-label"
+];
+var _hoisted_2 = ["value"];
+var _hoisted_3 = {
+	class: "flex items-center justify-end absolute right-1 top-px bottom-0 pointer-events-none",
+	"aria-hidden": "true"
+};
+var RuiSimpleSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiSimpleSelect",
+	inheritAttrs: false,
+	__name: "RuiSimpleSelect",
+	props: /* @__PURE__ */ mergeModels({
+		options: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		label: {},
+		name: { default: "" },
+		variant: { default: "default" }
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const selectClass = tv({
+			base: [
+				"outline-none focus:outline-none appearance-none cursor-pointer pl-2 py-1 pr-8 rounded",
+				"m-0 w-full transition [font:inherit]",
+				"bg-white hover:bg-gray-50",
+				"dark:bg-transparent dark:hover:bg-white/10 dark:text-rui-text-disabled",
+				"disabled:bg-black/[.12] disabled:text-rui-text-disabled disabled:active:text-rui-text-disabled disabled:cursor-default",
+				"dark:disabled:bg-white/10"
+			].join(" "),
+			variants: { variant: {
+				default: "",
+				outlined: "border border-rui-text-disabled disabled:border-transparent dark:border-rui-text-disabled"
+			} },
+			defaultVariants: { variant: "default" }
+		});
+		const ui = computed(() => selectClass({ variant: __props.variant }));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ class: "relative inline-flex" }, _ctx.$attrs), [withDirectives(createElementVNode("select", {
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+				class: normalizeClass(unref(ui)),
+				name: __props.name,
+				disabled: __props.disabled,
+				"aria-label": __props.label,
+				"data-id": "select"
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+				return openBlock(), createElementBlock("option", {
+					key: option,
+					value: option
+				}, toDisplayString(option), 9, _hoisted_2);
+			}), 128))], 10, _hoisted_1), [[vModelSelect, modelValue.value]]), createElementVNode("span", _hoisted_3, [createVNode(RuiIcon_default, {
+				class: "text-rui-text-disabled pointer-events-none",
+				name: "lu-chevron-down",
+				size: "16"
+			})])], 16);
+		};
+	}
+});
+//#endregion
+export { RuiSimpleSelect_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiSimpleSelect.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiSimpleSelect.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/select/RuiSimpleSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  options: string[] | number[];\n  disabled?: boolean;\n  label?: string;\n  name?: string;\n  variant?: 'default' | 'outlined';\n}\n\ndefineOptions({\n  name: 'RuiSimpleSelect',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string | number>({ required: true });\n\nconst { options, disabled = false, label, name = '', variant: selectVariant = 'default' } = defineProps<Props>();\n\nconst selectClass = tv({\n  base: [\n    'outline-none focus:outline-none appearance-none cursor-pointer pl-2 py-1 pr-8 rounded',\n    'm-0 w-full transition [font:inherit]',\n    'bg-white hover:bg-gray-50',\n    'dark:bg-transparent dark:hover:bg-white/10 dark:text-rui-text-disabled',\n    'disabled:bg-black/[.12] disabled:text-rui-text-disabled disabled:active:text-rui-text-disabled disabled:cursor-default',\n    'dark:disabled:bg-white/10',\n  ].join(' '),\n  variants: {\n    variant: {\n      default: '',\n      outlined: 'border border-rui-text-disabled disabled:border-transparent dark:border-rui-text-disabled',\n    },\n  },\n  defaultVariants: { variant: 'default' },\n});\n\nconst ui = computed<string>(() => selectClass({ variant: selectVariant }));\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex\"\n    v-bind=\"$attrs\"\n  >\n    <select\n      v-model=\"modelValue\"\n      :class=\"ui\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :aria-label=\"label\"\n      data-id=\"select\"\n    >\n      <option\n        v-for=\"option in options\"\n        :key=\"option\"\n        :value=\"option\"\n      >\n        {{ option }}\n      </option>\n    </select>\n    <span\n      class=\"flex items-center justify-end absolute right-1 top-px bottom-0 pointer-events-none\"\n      aria-hidden=\"true\"\n    >\n      <RuiIcon\n        class=\"text-rui-text-disabled pointer-events-none\"\n        name=\"lu-chevron-down\"\n        size=\"16\"\n      />\n    </span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,aAAa,SAA4B,SAAA,aAAoB;EAInE,MAAM,cAAc,GAAG;GACrB,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACD,CAAC,KAAK,IAAI;GACX,UAAU,EACR,SAAS;IACP,SAAS;IACT,UAAU;IACX,EACF;GACD,iBAAiB,EAAE,SAAS,WAAA;GAC7B,CAAC;EAEF,MAAM,KAAK,eAAuB,YAAY,EAAE,SAAS,QAAA,SAAe,CAAC,CAAC;;uBAIxE,mBA8BM,OA9BN,WA8BM,EA7BJ,OAAM,wBAAsB,EACpBA,KAAAA,OAAM,EAAA,CAAA,eAEd,mBAeS,UAAA;4EAdY,QAAA;IAClB,OAAK,eAAE,MAAA,GAAE,CAAA;IACT,MAAM,QAAA;IACN,UAAU,QAAA;IACV,cAAY,QAAA;IACb,WAAQ;yBAER,mBAMS,UAAA,MAAA,WALU,QAAA,UAAV,WAAM;wBADf,mBAMS,UAAA;KAJN,KAAK;KACL,OAAO;uBAEL,OAAM,EAAA,GAAA,WAAA;gDAZF,WAAA,MAAU,CAAA,CAAA,EAerB,mBASO,QATP,YASO,CALL,YAIE,iBAAA;IAHA,OAAM;IACN,MAAK;IACL,MAAK"}