@rotki/ui-library 2.12.2 → 2.13.0

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

@@ -1,9 +1,10 @@
-import { defineComponent, useCssVars, unref, useModel, toRefs, ref, computed, openBlock, createBlock, mergeProps, isRef, withCtx, createElementBlock, withKeys, withModifiers, createElementVNode, Fragment, renderList, normalizeClass, renderSlot, createTextVNode, toDisplayString, normalizeStyle, createCommentVNode, normalizeProps, guardReactiveProps, createVNode, mergeModels } from "vue";
+import { defineComponent, useCssVars, unref, useModel, useTemplateRef, computed, toRef, openBlock, createBlock, mergeProps, isRef, withCtx, createElementBlock, withKeys, withModifiers, createElementVNode, Fragment, renderList, normalizeClass, renderSlot, createTextVNode, toDisplayString, normalizeStyle, createCommentVNode, normalizeProps, guardReactiveProps, createVNode, mergeModels } from "vue";
 import RuiButton from "../../buttons/button/RuiButton.vue.js";
 import RuiIcon from "../../icons/RuiIcon.vue.js";
 import RuiMenu from "../../overlays/menu/RuiMenu.vue.js";
 import RuiProgress from "../../progress/RuiProgress.vue.js";
 import { useDropdownMenu } from "../../../composables/dropdown-menu.js";
+import { useLabelWithQuote } from "../../../composables/forms/use-label-with-quote.js";
 import { getRootAttrs, getNonRootAttrs } from "../../../utils/helpers.js";
 import { useFocus, isDefined } from "@vueuse/core";
 import { set, get } from "@vueuse/shared";
@@ -22,8 +23,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "RuiMenuSelect",
   props: /* @__PURE__ */ mergeModels({
     options: {},
-    keyAttr: { default: void 0 },
-    textAttr: { default: void 0 },
+    keyAttr: {},
+    textAttr: {},
     disabled: { type: Boolean, default: false },
     loading: { type: Boolean, default: false },
     readOnly: { type: Boolean, default: false },
@@ -34,11 +35,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     labelClass: {},
     menuClass: {},
     optionClass: {},
-    prependWidth: { default: 0 },
-    appendWidth: { default: 0 },
-    itemHeight: { default: void 0 },
+    prependWidth: {},
+    appendWidth: {},
+    itemHeight: {},
     variant: { default: "default" },
-    hint: { default: void 0 },
+    hint: {},
     errorMessages: { default: () => [] },
     successMessages: { default: () => [] },
     hideDetails: { type: Boolean, default: false },
@@ -53,34 +54,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v27aaaf1d": unref(labelWithQuote)
+      "v3c7b8cf5": unref(labelWithQuote)
     }));
     const modelValue = useModel(__props, "modelValue");
-    const props = __props;
-    const { dense, options, disabled } = toRefs(props);
-    const menuRef = ref();
-    const activator = ref();
+    const menuRef = useTemplateRef("menuRef");
+    const activator = useTemplateRef("activator");
     const { focused } = useFocus(activator);
     const value = computed({
       get: () => {
-        const keyAttr = props.keyAttr;
         const value2 = get(modelValue);
-        if (keyAttr)
-          return props.options.find((option) => option[keyAttr] === value2);
+        if (__props.keyAttr)
+          return __props.options.find((option) => option[__props.keyAttr] === value2);
         return value2;
       },
       set: (selected) => {
-        const keyAttr = props.keyAttr;
-        const selection = keyAttr && selected ? selected[keyAttr] : selected;
+        const selection = __props.keyAttr && selected ? selected[__props.keyAttr] : selected;
         set(modelValue, selection);
       }
     });
-    const labelWithQuote = computed(() => {
-      if (!props.label)
-        return '"\\200B"';
-      const asterisk = props.required ? "﹡" : "";
-      return `'  ${props.label}${asterisk}  '`;
-    });
+    const labelWithQuote = useLabelWithQuote(
+      () => __props.label,
+      () => __props.required
+    );
     const {
       containerProps,
       wrapperProps,
@@ -94,23 +89,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       moveHighlight,
       valueKey
     } = useDropdownMenu({
-      itemHeight: props.itemHeight ?? (props.dense ? 30 : 48),
-      keyAttr: props.keyAttr,
-      textAttr: props.textAttr,
-      options,
+      itemHeight: __props.itemHeight ?? (__props.dense ? 30 : 48),
+      keyAttr: __props.keyAttr,
+      textAttr: __props.textAttr,
+      options: toRef(() => __props.options),
       autoFocus: true,
-      dense,
+      dense: toRef(() => __props.dense),
       value,
       menuRef,
-      disabled,
-      autoSelectFirst: props.autoSelectFirst
+      disabled: toRef(() => __props.disabled),
+      autoSelectFirst: __props.autoSelectFirst
     });
-    const outlined = computed(() => props.variant === "outlined");
+    const outlined = computed(() => __props.variant === "outlined");
     const float = computed(() => (get(isOpen) || !!get(value)) && get(outlined));
-    const virtualContainerProps = computed(() => ({
-      style: containerProps.style,
-      ref: containerProps.ref
-    }));
+    const virtualContainerProps = computed(
+      () => ({
+        style: containerProps.style,
+        ref: containerProps.ref
+      })
+    );
     function setValue(val, index) {
       if (isDefined(index))
         set(highlightedIndex, index);
@@ -135,31 +132,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         errorMessages: __props.errorMessages,
         successMessages: __props.successMessages,
         hint: __props.hint,
-        dense: unref(dense),
+        dense: __props.dense,
         showDetails: !__props.hideDetails,
-        disabled: unref(disabled)
+        disabled: __props.disabled
       }), {
         activator: withCtx(({ attrs, open, hasError, hasSuccess }) => [
-          renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({ disabled: unref(disabled), value: unref(value), variant: __props.variant, readOnly: __props.readOnly, attrs, open, hasError, hasSuccess })), () => [
+          renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({ disabled: __props.disabled, value: unref(value), variant: __props.variant, readOnly: __props.readOnly, attrs, open, hasError, hasSuccess })), () => [
             createElementVNode("button", mergeProps({
               ref_key: "activator",
               ref: activator,
-              disabled: unref(disabled),
-              "aria-disabled": unref(disabled),
+              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: unref(disabled) || __props.readOnly ? -1 : 0,
+              tabindex: __props.disabled || __props.readOnly ? -1 : 0,
               class: ["group", [
                 _ctx.$style.activator,
                 __props.labelClass,
                 {
-                  [_ctx.$style.disabled]: unref(disabled),
+                  [_ctx.$style.disabled]: __props.disabled,
                   [_ctx.$style.readonly]: __props.readOnly,
                   [_ctx.$style.outlined]: unref(outlined),
-                  [_ctx.$style.dense]: unref(dense),
+                  [_ctx.$style.dense]: __props.dense,
                   [_ctx.$style.float]: unref(float),
                   [_ctx.$style.opened]: open,
                   [_ctx.$style["with-value"]]: !!unref(value),
@@ -200,7 +197,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   createTextVNode(toDisplayString(unref(getText)(unref(value))), 1)
                 ])
               ], 2)) : createCommentVNode("", true),
-              __props.clearable && unref(value) && !unref(disabled) ? (openBlock(), createElementBlock("span", {
+              __props.clearable && unref(value) && !__props.disabled ? (openBlock(), createElementBlock("span", {
                 key: 2,
                 "data-id": "clear",
                 class: normalizeClass(["group-hover:!visible", [_ctx.$style.clear, unref(focused) && "!visible"]]),
@@ -217,7 +214,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, [
                 createVNode(RuiIcon, {
                   class: normalizeClass([_ctx.$style.icon, { "rotate-180": open }]),
-                  size: unref(dense) ? 16 : 24,
+                  size: __props.dense ? 16 : 24,
                   name: "lu-chevron-down"
                 }, null, 8, ["class", "size"])
               ], 2),
@@ -245,7 +242,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, null, 8, _hoisted_3)
         ]),
         default: withCtx(({ width }) => [
-          unref(options).length > 0 ? (openBlock(), createElementBlock("div", mergeProps({
+          __props.options.length > 0 ? (openBlock(), createElementBlock("div", mergeProps({
             key: 0,
             class: [_ctx.$style.menu, __props.menuClass],
             style: { width: `${width}px`, minWidth: unref(menuWidth) }
@@ -263,10 +260,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }), [
               (openBlock(true), createElementBlock(Fragment, null, renderList(unref(renderedData), ({ item, _index }) => {
                 return openBlock(), createBlock(RuiButton, {
-                  key: _index,
+                  key: unref(getIdentifier)(item),
                   active: unref(isActiveItem)(item),
                   "aria-selected": unref(isActiveItem)(item),
-                  size: unref(dense) ? "sm" : void 0,
+                  size: __props.dense ? "sm" : void 0,
                   "model-value": unref(getIdentifier)(item),
                   variant: "list",
                   class: normalizeClass({
@@ -277,13 +274,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   onMousedown: ($event) => highlightedIndex.value = _index
                 }, {
                   prepend: withCtx(() => [
-                    renderSlot(_ctx.$slots, "item.prepend", mergeProps({ ref_for: true }, { disabled: unref(disabled), item, active: unref(isActiveItem)(item) }))
+                    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: unref(disabled), item, active: unref(isActiveItem)(item) }))
+                    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: unref(disabled), item, active: unref(isActiveItem)(item) }), () => [
+                    renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, { disabled: __props.disabled, item, active: unref(isActiveItem)(item) }), () => [
                       createTextVNode(toDisplayString(unref(getText)(item)), 1)
                     ])
                   ]),

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

@@ -1 +1 @@
-{"version":3,"file":"RuiMenuSelect.vue2.js","sources":["../../../../src/components/forms/select/RuiMenuSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\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 { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props<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  labelClass?: string;\n  menuClass?: string;\n  optionClass?: string;\n  prependWidth?: number; // in rem\n  appendWidth?: number; // in rem\n  itemHeight?: number; // in px\n  variant?: 'default' | 'filled' | 'outlined';\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 props = withDefaults(defineProps<Props<TValue, TItem>>(), {\n  disabled: false,\n  loading: false,\n  readOnly: false,\n  dense: false,\n  clearable: false,\n  hideDetails: false,\n  label: 'Select',\n  prependWidth: 0,\n  appendWidth: 0,\n  variant: 'default',\n  hint: undefined,\n  keyAttr: undefined,\n  textAttr: undefined,\n  itemHeight: undefined,\n  errorMessages: () => [],\n  successMessages: () => [],\n  autoSelectFirst: false,\n  hideNoData: false,\n  noDataText: 'No data available',\n  required: false,\n});\n\nconst { dense, options, disabled } = toRefs(props);\n\nconst menuRef = ref();\nconst activator = ref();\nconst { focused } = useFocus(activator);\n\nconst value = computed<TItem | undefined>({\n  get: () => {\n    const keyAttr = props.keyAttr;\n    const value = get(modelValue);\n    if (keyAttr)\n      return props.options.find(option => option[keyAttr] === value);\n    return value as unknown as TItem;\n  },\n  set: (selected?: TItem) => {\n    const keyAttr = props.keyAttr;\n    const selection = keyAttr && selected ? selected[keyAttr] : selected;\n    set(modelValue, selection as TValue);\n  },\n});\n\nconst labelWithQuote = computed<string>(() => {\n  if (!props.label)\n    return '\"\\\\200B\"';\n\n  const asterisk = props.required ? '﹡' : '';\n  return `'  ${props.label}${asterisk}  '`;\n});\n\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  isOpen,\n  menuWidth,\n  getText,\n  getIdentifier,\n  isActiveItem,\n  highlightedIndex,\n  moveHighlight,\n  valueKey,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: props.itemHeight ?? (props.dense ? 30 : 48),\n  keyAttr: props.keyAttr,\n  textAttr: props.textAttr,\n  options,\n  autoFocus: true,\n  dense,\n  value,\n  menuRef,\n  disabled,\n  autoSelectFirst: props.autoSelectFirst,\n});\n\nconst outlined = computed(() => props.variant === 'outlined');\n\nconst float = computed(() => (get(isOpen) || !!get(value)) && get(outlined));\n\nconst virtualContainerProps = computed(() => ({\n  style: containerProps.style as any,\n  ref: containerProps.ref as any,\n}));\n\nfunction setValue(val: TItem, index?: number) {\n  if (isDefined(index))\n    set(highlightedIndex, index);\n\n  set(value, val);\n  set(focused, true);\n}\n\nfunction clear() {\n  set(modelValue, undefined);\n}\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    :class=\"$style.wrapper\"\n    disable-auto-focus\n    v-bind=\"{\n      ...getRootAttrs($attrs),\n      placement: 'bottom-start',\n      closeOnContentClick: true,\n      fullWidth: true,\n      ...menuOptions,\n      errorMessages,\n      successMessages,\n      hint,\n      dense,\n      showDetails: !hideDetails,\n      disabled,\n    }\"\n  >\n    <template #activator=\"{ attrs, open, hasError, hasSuccess }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ disabled, value, variant, readOnly, attrs, open, hasError, hasSuccess }\"\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=\"group\"\n          :class=\"[\n            $style.activator,\n            labelClass,\n            {\n              [$style.disabled]: disabled,\n              [$style.readonly]: readOnly,\n              [$style.outlined]: outlined,\n              [$style.dense]: dense,\n              [$style.float]: float,\n              [$style.opened]: open,\n              [$style['with-value']]: !!value,\n              [$style['with-error']]: hasError,\n              [$style['with-success']]: hasSuccess && !hasError,\n            },\n          ]\"\n          v-bind=\"{ ...getNonRootAttrs($attrs), ...(readOnly ? {} : attrs) }\"\n          data-id=\"activator\"\n          :data-error=\"hasError ? '' : undefined\"\n          :aria-invalid=\"hasError\"\n          @keydown.up.prevent=\"moveHighlight(true)\"\n          @keydown.down.prevent=\"moveHighlight(false)\"\n        >\n          <span\n            v-if=\"outlined || !value\"\n            :class=\"[\n              $style.label,\n              {\n                'absolute': outlined,\n                'pr-2': !value && !open && outlined,\n              },\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=\"text-rui-error\"\n            >\n              ﹡\n            </span>\n          </span>\n          <span\n            v-if=\"value\"\n            class=\"w-full\"\n            :class=\"$style.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=\"group-hover:!visible\"\n            :class=\"[$style.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=\"$style.icon__wrapper\">\n            <RuiIcon\n              :class=\"[$style.icon, { 'rotate-180': open }]\"\n              :size=\"dense ? 16 : 24\"\n              name=\"lu-chevron-down\"\n            />\n          </span>\n\n          <RuiProgress\n            v-if=\"loading\"\n            class=\"absolute left-0 bottom-0 w-full\"\n            color=\"primary\"\n            thickness=\"3\"\n            variant=\"indeterminate\"\n          />\n        </button>\n        <fieldset\n          v-if=\"outlined\"\n          :class=\"$style.fieldset\"\n        >\n          <legend :class=\"{ 'px-2': float }\" />\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        :class=\"[$style.menu, menuClass]\"\n        :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n        v-bind=\"virtualContainerProps\"\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=\"_index\"\n            :active=\"isActiveItem(item)\"\n            :aria-selected=\"isActiveItem(item)\"\n            :size=\"dense ? 'sm' : undefined\"\n            :model-value=\"getIdentifier(item)\"\n            variant=\"list\"\n            :class=\"{\n              highlighted: highlightedIndex === _index,\n              [$style.highlighted]: !isActiveItem(item) && highlightedIndex === _index,\n            }\"\n            @update:model-value=\"setValue(item, _index)\"\n            @mousedown=\"highlightedIndex = _index\"\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=\"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\n<style lang=\"scss\" module>\n.wrapper {\n  @apply w-full inline-flex flex-col;\n\n  .activator {\n    @apply relative inline-flex items-center w-full;\n    @apply outline-none focus:outline-none cursor-pointer min-h-14 pl-3 py-2 pr-8 rounded;\n    @apply m-0 bg-white transition-all text-body-1 text-left hover:border-black;\n\n    &:not(.outlined) {\n      @apply hover:bg-gray-100 focus-within:bg-gray-100;\n    }\n\n    &.dense {\n      @apply py-1.5 min-h-10;\n\n      ~ .fieldset {\n        @apply px-2;\n      }\n    }\n\n    &.disabled {\n      @apply opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none;\n    }\n\n    &.readonly {\n      @apply opacity-80 pointer-events-none cursor-default bg-gray-50;\n    }\n\n    &.outlined {\n      @apply border-none hover:border-none;\n\n      &.opened,\n      &:focus {\n        @apply border-rui-primary;\n\n        ~ .fieldset {\n          @apply border-rui-primary #{!important};\n          @apply border-2 #{!important};\n        }\n      }\n\n      ~ .fieldset {\n        @apply border border-black/[0.23];\n      }\n\n      &:hover {\n        ~ .fieldset {\n          @apply border-black;\n        }\n      }\n\n      &.disabled {\n        ~ .fieldset {\n          @apply border-dotted;\n          @apply border-black/[0.23] #{!important};\n        }\n      }\n\n      &.with-success {\n        .label {\n          @apply text-rui-success #{!important};\n        }\n\n        ~ .fieldset {\n          @apply border-rui-success #{!important};\n        }\n      }\n\n      &.with-error {\n        .label {\n          @apply text-rui-error #{!important};\n        }\n\n        ~ .fieldset {\n          @apply border-rui-error #{!important};\n        }\n      }\n    }\n\n    .label {\n      @apply text-rui-text-secondary;\n      max-width: calc(100% - 2.5rem);\n    }\n\n    .label,\n    .value {\n      @apply block truncate transition-all duration-75;\n    }\n\n    .clear {\n      @apply ml-auto shrink-0 invisible;\n    }\n\n    .icon {\n      @apply text-rui-text transition;\n\n      &__wrapper {\n        @apply flex items-center justify-end;\n        @apply absolute right-3 top-px bottom-0;\n      }\n    }\n\n    &.float {\n      .label {\n        @apply -translate-y-2 top-0 text-xs px-1;\n      }\n\n      ~ .fieldset {\n        legend {\n          &:after {\n            content: v-bind(labelWithQuote);\n          }\n        }\n      }\n\n      &.opened,\n      &.opened.with-value,\n      &:focus,\n      &:focus.with-value {\n        .label {\n          @apply text-rui-primary;\n        }\n\n        ~ .fieldset {\n          @apply border-rui-primary;\n          @apply border-2 #{!important};\n        }\n      }\n    }\n  }\n\n  .fieldset {\n    @apply absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0 rounded pointer-events-none px-2 transition-all -mt-2;\n\n    legend {\n      @apply opacity-0 text-xs truncate;\n      max-width: calc(100% - 1rem);\n\n      &:before {\n        content: ' ';\n      }\n\n      &:after {\n        @apply truncate max-w-full leading-[0];\n        content: '\\200B';\n      }\n    }\n  }\n}\n\n.menu {\n  @apply overflow-y-auto max-h-60 min-w-[2.5rem];\n}\n\n.highlighted {\n  @apply bg-rui-grey-200 #{!important};\n\n  &.active {\n    @apply bg-rui-grey-300 #{!important};\n  }\n}\n\n:global(.dark) {\n  .wrapper {\n    .activator {\n      @apply bg-transparent text-rui-text;\n\n      &:not(.outlined) {\n        @apply hover:bg-white/10 focus-within:bg-white/10;\n\n        &.disabled {\n          @apply bg-white/10;\n        }\n      }\n\n      &.readonly {\n        @apply bg-white/10;\n      }\n\n      &.outlined {\n        ~ .fieldset {\n          @apply border-white/[0.23];\n        }\n\n        &.disabled {\n          ~ .fieldset {\n            @apply border-white/[0.23] #{!important};\n          }\n        }\n\n        &:hover {\n          ~ .fieldset {\n            @apply border-white;\n          }\n        }\n      }\n    }\n  }\n\n  .highlighted {\n    @apply bg-rui-grey-800 #{!important};\n\n    &.active {\n      @apply bg-rui-grey-700 #{!important};\n    }\n  }\n}\n</style>\n"],"names":["_useModel","value","_openBlock","_createBlock","_mergeProps","_unref","$style","$attrs","_withCtx","_renderSlot","_createElementVNode","_createElementBlock","_normalizeClass","_normalizeProps","_guardReactiveProps","_createTextVNode","_toDisplayString","_createVNode","_Fragment","_renderList","_normalizeStyle"],"mappings":"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"}
+{"version":3,"file":"RuiMenuSelect.vue2.js","sources":["../../../../src/components/forms/select/RuiMenuSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\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 { useLabelWithQuote } from '@/composables/forms/use-label-with-quote';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props<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  labelClass?: string;\n  menuClass?: string;\n  optionClass?: string;\n  prependWidth?: number; // in rem\n  appendWidth?: number; // in rem\n  itemHeight?: number; // in px\n  variant?: 'default' | 'filled' | 'outlined';\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  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<Props<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 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\nconst labelWithQuote = useLabelWithQuote(\n  () => label,\n  () => required,\n);\n\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  isOpen,\n  menuWidth,\n  getText,\n  getIdentifier,\n  isActiveItem,\n  highlightedIndex,\n  moveHighlight,\n  valueKey,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: itemHeight ?? (dense ? 30 : 48),\n  keyAttr,\n  textAttr,\n  options: toRef(() => options),\n  autoFocus: true,\n  dense: toRef(() => dense),\n  value,\n  menuRef,\n  disabled: toRef(() => disabled),\n  autoSelectFirst,\n});\n\nconst outlined = computed<boolean>(() => variant === 'outlined');\n\nconst float = computed<boolean>(() => (get(isOpen) || !!get(value)) && get(outlined));\n\nconst virtualContainerProps = computed<{ style: Record<string, string>; ref: (el: any) => void }>(\n  () => ({\n    style: containerProps.style as any,\n    ref: containerProps.ref as any,\n  }),\n);\n\nfunction setValue(val: TItem, index?: number): void {\n  if (isDefined(index))\n    set(highlightedIndex, index);\n\n  set(value, val);\n  set(focused, true);\n}\n\nfunction clear(): void {\n  set(modelValue, undefined);\n}\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    :class=\"$style.wrapper\"\n    disable-auto-focus\n    v-bind=\"{\n      ...getRootAttrs($attrs),\n      placement: 'bottom-start',\n      closeOnContentClick: true,\n      fullWidth: true,\n      ...menuOptions,\n      errorMessages,\n      successMessages,\n      hint,\n      dense,\n      showDetails: !hideDetails,\n      disabled,\n    }\"\n  >\n    <template #activator=\"{ attrs, open, hasError, hasSuccess }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ disabled, value, variant, readOnly, attrs, open, hasError, hasSuccess }\"\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=\"group\"\n          :class=\"[\n            $style.activator,\n            labelClass,\n            {\n              [$style.disabled]: disabled,\n              [$style.readonly]: readOnly,\n              [$style.outlined]: outlined,\n              [$style.dense]: dense,\n              [$style.float]: float,\n              [$style.opened]: open,\n              [$style['with-value']]: !!value,\n              [$style['with-error']]: hasError,\n              [$style['with-success']]: hasSuccess && !hasError,\n            },\n          ]\"\n          v-bind=\"{ ...getNonRootAttrs($attrs), ...(readOnly ? {} : attrs) }\"\n          data-id=\"activator\"\n          :data-error=\"hasError ? '' : undefined\"\n          :aria-invalid=\"hasError\"\n          @keydown.up.prevent=\"moveHighlight(true)\"\n          @keydown.down.prevent=\"moveHighlight(false)\"\n        >\n          <span\n            v-if=\"outlined || !value\"\n            :class=\"[\n              $style.label,\n              {\n                'absolute': outlined,\n                'pr-2': !value && !open && outlined,\n              },\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=\"text-rui-error\"\n            >\n              ﹡\n            </span>\n          </span>\n          <span\n            v-if=\"value\"\n            class=\"w-full\"\n            :class=\"$style.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=\"group-hover:!visible\"\n            :class=\"[$style.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=\"$style.icon__wrapper\">\n            <RuiIcon\n              :class=\"[$style.icon, { 'rotate-180': open }]\"\n              :size=\"dense ? 16 : 24\"\n              name=\"lu-chevron-down\"\n            />\n          </span>\n\n          <RuiProgress\n            v-if=\"loading\"\n            class=\"absolute left-0 bottom-0 w-full\"\n            color=\"primary\"\n            thickness=\"3\"\n            variant=\"indeterminate\"\n          />\n        </button>\n        <fieldset\n          v-if=\"outlined\"\n          :class=\"$style.fieldset\"\n        >\n          <legend :class=\"{ 'px-2': float }\" />\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        :class=\"[$style.menu, menuClass]\"\n        :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n        v-bind=\"virtualContainerProps\"\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            :model-value=\"getIdentifier(item)\"\n            variant=\"list\"\n            :class=\"{\n              highlighted: highlightedIndex === _index,\n              [$style.highlighted]: !isActiveItem(item) && highlightedIndex === _index,\n            }\"\n            @update:model-value=\"setValue(item, _index)\"\n            @mousedown=\"highlightedIndex = _index\"\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=\"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\n<style lang=\"scss\" module>\n.wrapper {\n  @apply w-full inline-flex flex-col;\n\n  .activator {\n    @apply relative inline-flex items-center w-full;\n    @apply outline-none focus:outline-none cursor-pointer min-h-14 pl-3 py-2 pr-8 rounded;\n    @apply m-0 bg-white transition-all text-body-1 text-left hover:border-black;\n\n    &:not(.outlined) {\n      @apply hover:bg-gray-100 focus-within:bg-gray-100;\n    }\n\n    &.dense {\n      @apply py-1.5 min-h-10;\n\n      ~ .fieldset {\n        @apply px-2;\n      }\n    }\n\n    &.disabled {\n      @apply opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default pointer-events-none;\n    }\n\n    &.readonly {\n      @apply opacity-80 pointer-events-none cursor-default bg-gray-50;\n    }\n\n    &.outlined {\n      @apply border-none hover:border-none;\n\n      &.opened,\n      &:focus {\n        @apply border-rui-primary;\n\n        ~ .fieldset {\n          @apply border-rui-primary #{!important};\n          @apply border-2 #{!important};\n        }\n      }\n\n      ~ .fieldset {\n        @apply border border-black/[0.23];\n      }\n\n      &:hover {\n        ~ .fieldset {\n          @apply border-black;\n        }\n      }\n\n      &.disabled {\n        ~ .fieldset {\n          @apply border-dotted;\n          @apply border-black/[0.23] #{!important};\n        }\n      }\n\n      &.with-success {\n        .label {\n          @apply text-rui-success #{!important};\n        }\n\n        ~ .fieldset {\n          @apply border-rui-success #{!important};\n        }\n      }\n\n      &.with-error {\n        .label {\n          @apply text-rui-error #{!important};\n        }\n\n        ~ .fieldset {\n          @apply border-rui-error #{!important};\n        }\n      }\n    }\n\n    .label {\n      @apply text-rui-text-secondary;\n      max-width: calc(100% - 2.5rem);\n    }\n\n    .label,\n    .value {\n      @apply block truncate transition-all duration-75;\n    }\n\n    .clear {\n      @apply ml-auto shrink-0 invisible;\n    }\n\n    .icon {\n      @apply text-rui-text transition;\n\n      &__wrapper {\n        @apply flex items-center justify-end;\n        @apply absolute right-3 top-px bottom-0;\n      }\n    }\n\n    &.float {\n      .label {\n        @apply -translate-y-2 top-0 text-xs px-1;\n      }\n\n      ~ .fieldset {\n        legend {\n          &:after {\n            content: v-bind(labelWithQuote);\n          }\n        }\n      }\n\n      &.opened,\n      &.opened.with-value,\n      &:focus,\n      &:focus.with-value {\n        .label {\n          @apply text-rui-primary;\n        }\n\n        ~ .fieldset {\n          @apply border-rui-primary;\n          @apply border-2 #{!important};\n        }\n      }\n    }\n  }\n\n  .fieldset {\n    @apply absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0 rounded pointer-events-none px-2 transition-all -mt-2;\n\n    legend {\n      @apply opacity-0 text-xs truncate;\n      max-width: calc(100% - 1rem);\n\n      &:before {\n        content: ' ';\n      }\n\n      &:after {\n        @apply truncate max-w-full leading-[0];\n        content: '\\200B';\n      }\n    }\n  }\n}\n\n.menu {\n  @apply overflow-y-auto max-h-60 min-w-[2.5rem];\n}\n\n.highlighted {\n  @apply bg-rui-grey-200 #{!important};\n\n  &.active {\n    @apply bg-rui-grey-300 #{!important};\n  }\n}\n\n:global(.dark) {\n  .wrapper {\n    .activator {\n      @apply bg-transparent text-rui-text;\n\n      &:not(.outlined) {\n        @apply hover:bg-white/10 focus-within:bg-white/10;\n\n        &.disabled {\n          @apply bg-white/10;\n        }\n      }\n\n      &.readonly {\n        @apply bg-white/10;\n      }\n\n      &.outlined {\n        ~ .fieldset {\n          @apply border-white/[0.23];\n        }\n\n        &.disabled {\n          ~ .fieldset {\n            @apply border-white/[0.23] #{!important};\n          }\n        }\n\n        &:hover {\n          ~ .fieldset {\n            @apply border-white;\n          }\n        }\n      }\n    }\n  }\n\n  .highlighted {\n    @apply bg-rui-grey-800 #{!important};\n\n    &.active {\n      @apply bg-rui-grey-700 #{!important};\n    }\n  }\n}\n</style>\n"],"names":["_useModel","value","_openBlock","_createBlock","_mergeProps","_unref","$style","$attrs","_withCtx","_renderSlot","_createElementVNode","_createElementBlock","_normalizeClass","_normalizeProps","_guardReactiveProps","_createTextVNode","_toDisplayString","_createVNode","_Fragment","_renderList","_normalizeStyle"],"mappings":"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"}

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

@@ -1,20 +1,19 @@
 export interface Props {
-    modelValue: string | number;
     options: string[] | number[];
     disabled?: boolean;
     label?: string;
     name?: string;
     variant?: 'default' | 'outlined';
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value?: string | number | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:model-value"?: ((value?: string | number | undefined) => any) | undefined;
-}>, {
-    name: string;
-    label: string;
-    variant: "default" | "outlined";
-    disabled: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue: string | number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,5 @@
-import { defineComponent, toRefs, computed, openBlock, createElementBlock, mergeProps, withDirectives, createElementVNode, normalizeClass, isRef, Fragment, renderList, toDisplayString, vModelSelect, unref, createVNode } from "vue";
+import { defineComponent, useModel, openBlock, createElementBlock, mergeProps, withDirectives, createElementVNode, normalizeClass, Fragment, renderList, toDisplayString, vModelSelect, createVNode, mergeModels } from "vue";
 import RuiIcon from "../../icons/RuiIcon.vue.js";
-import { get } from "@vueuse/shared";
 const _hoisted_1 = ["name", "disabled", "aria-label"];
 const _hoisted_2 = ["value"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -9,47 +8,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     inheritAttrs: false
   },
   __name: "RuiSimpleSelect",
-  props: {
-    modelValue: {},
+  props: /* @__PURE__ */ mergeModels({
     options: {},
     disabled: { type: Boolean, default: false },
-    label: { default: void 0 },
+    label: {},
     name: { default: "" },
     variant: { default: "default" }
-  },
-  emits: ["update:model-value"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { modelValue } = toRefs(props);
-    const value = computed({
-      get: () => get(modelValue),
-      set: (value2) => emit("update:model-value", value2)
-    });
+  }, {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({
         class: _ctx.$style.wrapper
       }, _ctx.$attrs), [
         withDirectives(createElementVNode("select", {
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(value) ? value.value = $event : null),
-          class: normalizeClass([
-            _ctx.$style.select,
-            _ctx.$style[__props.variant ?? "default"],
-            { [_ctx.$style.disabled ?? ""]: __props.disabled }
-          ]),
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+          class: normalizeClass([_ctx.$style.select, _ctx.$style[__props.variant ?? "default"], { [_ctx.$style.disabled ?? ""]: __props.disabled }]),
           name: __props.name,
           disabled: __props.disabled,
           "aria-label": __props.label,
           "data-id": "select"
         }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, i) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
             return openBlock(), createElementBlock("option", {
-              key: i,
+              key: option,
               value: option
             }, toDisplayString(option), 9, _hoisted_2);
           }), 128))
         ], 10, _hoisted_1), [
-          [vModelSelect, unref(value)]
+          [vModelSelect, modelValue.value]
         ]),
         createElementVNode("span", {
           class: normalizeClass(_ctx.$style.icon__wrapper),

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

@@ -1 +1 @@
-{"version":3,"file":"RuiSimpleSelect.vue2.js","sources":["../../../../src/components/forms/select/RuiSimpleSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\nexport interface Props {\n  modelValue: string | number;\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 props = withDefaults(defineProps<Props>(), {\n  disabled: false,\n  label: undefined,\n  name: '',\n  variant: 'default',\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value?: string | number): void;\n}>();\n\nconst { modelValue } = toRefs(props);\n\nconst value = computed({\n  get: () => get(modelValue),\n  set: value => emit('update:model-value', value),\n});\n</script>\n\n<template>\n  <div\n    :class=\"$style.wrapper\"\n    v-bind=\"$attrs\"\n  >\n    <select\n      v-model=\"value\"\n      :class=\"[\n        $style.select,\n        $style[variant ?? 'default'],\n        { [$style.disabled ?? '']: disabled },\n      ]\"\n      :name=\"name\"\n      :disabled=\"disabled\"\n      :aria-label=\"label\"\n      data-id=\"select\"\n    >\n      <option\n        v-for=\"(option, i) in options\"\n        :key=\"i\"\n        :value=\"option\"\n      >\n        {{ option }}\n      </option>\n    </select>\n    <span\n      :class=\"$style.icon__wrapper\"\n      aria-hidden=\"true\"\n    >\n      <RuiIcon\n        :class=\"$style.icon\"\n        name=\"lu-chevron-down\"\n        size=\"16\"\n      />\n    </span>\n  </div>\n</template>\n\n<style module lang=\"scss\">\n.wrapper {\n  @apply relative inline-flex;\n\n  .select {\n    @apply outline-none focus:outline-none appearance-none cursor-pointer pl-2 py-1 pr-8 rounded;\n    @apply m-0 w-full bg-white hover:bg-gray-50 transition;\n    @apply disabled:bg-black/[.12] disabled:text-rui-text-disabled disabled:active:text-rui-text-disabled disabled:cursor-default;\n\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n\n    &::-ms-expand {\n      display: none;\n    }\n\n    &.outlined {\n      @apply border border-rui-text-disabled disabled:border-transparent;\n    }\n  }\n\n  .icon {\n    @apply text-rui-text-disabled pointer-events-none;\n\n    &__wrapper {\n      @apply flex items-center justify-end;\n      @apply absolute right-1 top-px bottom-0 pointer-events-none;\n    }\n  }\n}\n\n:global(.dark) {\n  .wrapper {\n    .select {\n      @apply bg-transparent hover:bg-white/10 disabled:bg-white/10 text-rui-text-disabled;\n\n      &.outlined {\n        @apply border border-rui-text-disabled;\n      }\n    }\n\n    .icon {\n      @apply text-rui-text-disabled;\n    }\n  }\n}\n</style>\n"],"names":["value","_openBlock","_createElementBlock","_mergeProps","$style","$attrs","_createElementVNode","_normalizeClass","_Fragment","_renderList","_unref","_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiBA,UAAM,QAAQ;AAOd,UAAM,OAAO;AAIb,UAAM,EAAE,WAAA,IAAe,OAAO,KAAK;AAEnC,UAAM,QAAQ,SAAS;AAAA,MACrB,KAAK,MAAM,IAAI,UAAU;AAAA,MACzB,KAAK,CAAAA,WAAS,KAAK,sBAAsBA,MAAK;AAAA,IAAA,CAC/C;;AAIC,aAAAC,UAAA,GAAAC,mBAkCM,OAlCNC,WAkCM;AAAA,QAjCH,OAAOC,KAAAA,OAAO;AAAA,MAAA,GACPC,KAAAA,MAAM,GAAA;AAAA,uBAEdC,mBAmBS,UAAA;AAAA,sFAlBE,MAAK,QAAA,SAAA;AAAA,UACb,OAAKC,eAAA;AAAA,YAAYH,KAAAA,OAAO;AAAA,YAAgBA,KAAAA,OAAO,QAAA,WAAO,SAAA;AAAA,eAA2BA,KAAAA,OAAO,YAAQ,EAAA,GAAS,QAAA,SAAA;AAAA,UAAQ;UAKjH,MAAM,QAAA;AAAA,UACN,UAAU,QAAA;AAAA,UACV,cAAY,QAAA;AAAA,UACb,WAAQ;AAAA,QAAA;WAERH,UAAA,IAAA,GAAAC,mBAMSM,UAAA,MAAAC,WALe,QAAA,SAAO,CAArB,QAAQ,MAAC;gCADnBP,mBAMS,UAAA;AAAA,cAJN,KAAK;AAAA,cACL,OAAO;AAAA,YAAA,mBAEL,MAAM,GAAA,GAAA,UAAA;AAAA;;yBAhBFQ,MAAA,KAAA,CAAK;AAAA,QAAA;QAmBhBJ,mBASO,QAAA;AAAA,UARJ,OAAKC,eAAEH,KAAAA,OAAO,aAAa;AAAA,UAC5B,eAAY;AAAA,QAAA;UAEZO,YAIE,SAAA;AAAA,YAHC,OAAKJ,eAAEH,KAAAA,OAAO,IAAI;AAAA,YACnB,MAAK;AAAA,YACL,MAAK;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"RuiSimpleSelect.vue2.js","sources":["../../../../src/components/forms/select/RuiSimpleSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\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 = 'default' } = defineProps<Props>();\n</script>\n\n<template>\n  <div\n    :class=\"$style.wrapper\"\n    v-bind=\"$attrs\"\n  >\n    <select\n      v-model=\"modelValue\"\n      :class=\"[$style.select, $style[variant ?? 'default'], { [$style.disabled ?? '']: disabled }]\"\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=\"$style.icon__wrapper\"\n      aria-hidden=\"true\"\n    >\n      <RuiIcon\n        :class=\"$style.icon\"\n        name=\"lu-chevron-down\"\n        size=\"16\"\n      />\n    </span>\n  </div>\n</template>\n\n<style module lang=\"scss\">\n.wrapper {\n  @apply relative inline-flex;\n\n  .select {\n    @apply outline-none focus:outline-none appearance-none cursor-pointer pl-2 py-1 pr-8 rounded;\n    @apply m-0 w-full bg-white hover:bg-gray-50 transition;\n    @apply disabled:bg-black/[.12] disabled:text-rui-text-disabled disabled:active:text-rui-text-disabled disabled:cursor-default;\n\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n\n    &::-ms-expand {\n      display: none;\n    }\n\n    &.outlined {\n      @apply border border-rui-text-disabled disabled:border-transparent;\n    }\n  }\n\n  .icon {\n    @apply text-rui-text-disabled pointer-events-none;\n\n    &__wrapper {\n      @apply flex items-center justify-end;\n      @apply absolute right-1 top-px bottom-0 pointer-events-none;\n    }\n  }\n}\n\n:global(.dark) {\n  .wrapper {\n    .select {\n      @apply bg-transparent hover:bg-white/10 disabled:bg-white/10 text-rui-text-disabled;\n\n      &.outlined {\n        @apply border border-rui-text-disabled;\n      }\n    }\n\n    .icon {\n      @apply text-rui-text-disabled;\n    }\n  }\n}\n</style>\n"],"names":["_useModel","_openBlock","_createElementBlock","_mergeProps","$style","$attrs","_createElementVNode","_normalizeClass","_Fragment","_renderList","_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgBA,UAAM,aAAaA,8BAA+C;;AAMhE,aAAAC,UAAA,GAAAC,mBA8BM,OA9BNC,WA8BM;AAAA,QA7BH,OAAOC,KAAAA,OAAO;AAAA,MAAA,GACPC,KAAAA,MAAM,GAAA;AAAA,uBAEdC,mBAeS,UAAA;AAAA,uEAdE,WAAU,QAAA;AAAA,UAClB,OAAKC,eAAA,CAAGH,KAAAA,OAAO,QAAQA,KAAAA,OAAO,QAAA,WAAO,SAAA,GAAA,EAAA,CAAmBA,KAAAA,OAAO,iBAAiB,QAAA,SAAA,CAAQ,CAAA;AAAA,UACxF,MAAM,QAAA;AAAA,UACN,UAAU,QAAA;AAAA,UACV,cAAY,QAAA;AAAA,UACb,WAAQ;AAAA,QAAA;4BAERF,mBAMSM,UAAA,MAAAC,WALU,QAAA,SAAO,CAAjB,WAAM;gCADfP,mBAMS,UAAA;AAAA,cAJN,KAAK;AAAA,cACL,OAAO;AAAA,YAAA,mBAEL,MAAM,GAAA,GAAA,UAAA;AAAA;;yBAZF,WAAA,KAAU;AAAA,QAAA;QAerBI,mBASO,QAAA;AAAA,UARJ,OAAKC,eAAEH,KAAAA,OAAO,aAAa;AAAA,UAC5B,eAAY;AAAA,QAAA;UAEZM,YAIE,SAAA;AAAA,YAHC,OAAKH,eAAEH,KAAAA,OAAO,IAAI;AAAA,YACnB,MAAK;AAAA,YACL,MAAK;AAAA,UAAA;;;;;;"}

package/dist/components/forms/slider/RuiSlider.vue.d.ts

@@ -1,6 +1,5 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
 export interface Props {
-    modelValue?: number;
     min?: number;
     max?: number;
     step?: number;
@@ -20,30 +19,15 @@ export interface Props {
     tickClass?: string;
     required?: boolean;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: number) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:model-value"?: ((value: number) => any) | undefined;
-}>, {
-    label: string;
-    vertical: boolean;
-    color: ContextColorsType;
-    disabled: boolean;
-    modelValue: number;
-    errorMessages: string | string[];
-    successMessages: string | string[];
-    hint: string;
-    required: boolean;
-    hideDetails: boolean;
-    step: number;
-    min: number;
-    max: number;
-    showThumbLabel: boolean;
-    showTicks: boolean;
-    hideTrack: boolean;
-    tickSize: number;
-    sliderClass: string;
-    tickClass: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;