@rotki/ui-library 2.11.2 → 2.12.1

package/dist/components/forms/auto-complete/RuiAutoComplete.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAutoComplete.vue2.js","sources":["../../../../src/components/forms/auto-complete/RuiAutoComplete.vue"],"sourcesContent":["<script lang=\"ts\" setup generic='TValue, TItem'>\nimport type { ComponentPublicInstance, ComputedRef } from 'vue';\nimport { syncRef } from '@vueuse/core';\nimport { logicAnd, logicOr } from '@vueuse/math';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiChip from '@/components/chips/RuiChip.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, useDropdownOptionProperty } from '@/composables/dropdown-menu';\nimport { useAutoCompleteFocus, useAutoCompleteKeyboardNavigation, useAutoCompleteSearch, useAutoCompleteValue } from '@/composables/forms/auto-complete';\nimport { getTextToken } from '@/utils/helpers';\nimport { isEqual } from '@/utils/is-equal';\n\nexport type AutoCompleteModelValue<TValue> = TValue extends Array<infer U> ? U[] : TValue | undefined;\n\nexport interface AutoCompleteProps<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  itemClass?: 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  chips?: boolean;\n  noFilter?: boolean;\n  hideNoData?: boolean;\n  noDataText?: string;\n  filter?: (item: TItem, queryText: string) => boolean;\n  hideSelected?: boolean;\n  placeholder?: string;\n  returnObject?: boolean;\n  customValue?: boolean;\n  hideCustomValue?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAutoComplete',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<AutoCompleteModelValue<TValue>>({ required: true });\n\nconst searchInputModel = defineModel<string>('searchInput', { default: '' });\n\nconst props = withDefaults(defineProps<AutoCompleteProps<TValue, TItem>>(), {\n  options: () => [],\n  disabled: false,\n  loading: false,\n  readOnly: false,\n  dense: false,\n  clearable: false,\n  hideDetails: false,\n  chips: false,\n  label: 'Select',\n  menuOptions: undefined,\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  noFilter: false,\n  hideNoData: false,\n  noDataText: 'No data available',\n  hideSelected: false,\n  placeholder: '',\n  returnObject: false,\n  customValue: false,\n  hideCustomValue: false,\n  required: false,\n});\n\nconst slots = useSlots();\n\nconst { dense, disabled, options } = toRefs(props);\n\nconst { getText, getIdentifier } = useDropdownOptionProperty<TValue, TItem>({\n  keyAttr: props.keyAttr,\n  textAttr: props.textAttr,\n});\n\nconst textInput = ref();\nconst activator = ref();\nconst menuRef = ref();\nconst menuWrapperRef = ref();\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\nconst { focused: activatorFocused } = useFocus(activator);\n\nconst renderedOptions = ref<ComponentPublicInstance[]>([]);\n\nconst {\n  internalSearch,\n  filteredOptions,\n  justOpened,\n  updateInternalSearch,\n  textValueToProperValue,\n} = useAutoCompleteSearch<TItem>(\n  options,\n  searchInputModel,\n  {\n    keyAttr: toRef(props, 'keyAttr'),\n    textAttr: toRef(props, 'textAttr'),\n    noFilter: toRef(props, 'noFilter'),\n    filter: toRef(props, 'filter'),\n    customValue: toRef(props, 'customValue'),\n    hideCustomValue: toRef(props, 'hideCustomValue'),\n    returnObject: toRef(props, 'returnObject'),\n  },\n);\n\n// Calculate multiple from modelValue directly to avoid circular dependency\nconst multiple = computed<boolean>(() => Array.isArray(get(modelValue)));\n\nconst shouldApplyValueAsSearch = computed<boolean>(() => !(slots.selection || get(multiple) || props.chips));\n\n// Create a temporary isOpen ref that we'll sync with useDropdownMenu's isOpen\nconst tempIsOpen = ref<boolean>(false);\n\nconst {\n  value,\n  setSelected,\n} = useAutoCompleteValue<AutoCompleteModelValue<TValue>, TItem>(\n  modelValue,\n  options,\n  {\n    keyAttr: toRef(props, 'keyAttr'),\n    returnObject: toRef(props, 'returnObject'),\n    customValue: toRef(props, 'customValue'),\n  },\n  {\n    getIdentifier,\n    getText,\n    textValueToProperValue,\n    shouldApplyValueAsSearch,\n    isOpen: tempIsOpen,\n    updateInternalSearch,\n  },\n);\n\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  isOpen,\n  menuWidth,\n  isActiveItem,\n  itemIndexInValue,\n  highlightedIndex,\n  moveHighlight,\n  applyHighlighted,\n  optionsWithSelectedHidden,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: props.itemHeight ?? (props.dense ? 30 : 48),\n  keyAttr: props.keyAttr,\n  textAttr: props.textAttr,\n  options: filteredOptions,\n  dense,\n  value,\n  menuRef,\n  setValue,\n  autoSelectFirst: props.autoSelectFirst,\n  hideSelected: props.hideSelected,\n});\n\n// Sync the isOpen states\nsyncRef(isOpen, tempIsOpen);\n\nconst {\n  focusedValueIndex,\n  moveSelectedValueHighlight,\n  onEnter,\n  onInputDeletePressed,\n  onTab,\n  setValueFocus,\n} = useAutoCompleteKeyboardNavigation<TItem>(\n  {\n    customValue: toRef(props, 'customValue'),\n    multiple,\n  },\n  {\n    activator,\n    applyHighlighted,\n    clear,\n    filteredOptions,\n    highlightedIndex,\n    internalSearch,\n    isOpen,\n    options,\n    searchInputFocused,\n    setSearchAsValue,\n    value,\n  },\n);\n\nconst {\n  anyFocused: focusAnyFocused,\n  inputClass: focusInputClass,\n  onActivatorFocused: focusOnActivatorFocused,\n  onInputFocused: focusOnInputFocused,\n  setInputFocus: focusSetInputFocus,\n} = useAutoCompleteFocus<TItem>(\n  {\n    customValue: toRef(props, 'customValue'),\n    disabled,\n    shouldApplyValueAsSearch,\n  },\n  {\n    activatorFocused,\n    activatorFocusedWithin,\n    filteredOptions,\n    focusedValueIndex,\n    internalSearch,\n    isOpen,\n    justOpened,\n    menuWrapperFocusedWithin,\n    searchInputFocused,\n    setSearchAsValue,\n    textInput,\n    updateInternalSearch,\n  },\n);\n\nconst valueSet = computed<boolean>(() => get(value).length > 0);\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 usedPlaceholder = computed<string>(() => {\n  if (get(searchInputFocused)) {\n    return props.placeholder;\n  }\n  return '';\n});\n\nconst menuMinHeight = ref<number>(0);\n\n// Update menu min height only when rendered data changes\nwatch(renderedData, async () => {\n  await nextTick();\n  const renderedOptionsData = get(renderedOptions).slice(0, Math.min(5, get(renderedData).length));\n  let height = 0;\n  for (const item of renderedOptionsData) {\n    if (item.$el) {\n      height += item.$el.offsetHeight;\n    }\n  }\n  set(menuMinHeight, height);\n}, { immediate: true });\n\nconst outlined = computed<boolean>(() => props.variant === 'outlined');\n\nconst float: ComputedRef<boolean> = logicAnd(\n  logicOr(\n    isOpen,\n    valueSet,\n    searchInputFocused,\n  ),\n  outlined,\n);\n\nconst virtualContainerProps = computed(() => ({\n  style: containerProps.style as any,\n  ref: containerProps.ref as any,\n}));\n\nfunction updateSearchInput(event: any) {\n  const value = event.target.value;\n  set(isOpen, true);\n  updateInternalSearch(value);\n  set(justOpened, false);\n}\n\nasync function setValue(val: TItem, index?: number, skipRefocused = false): Promise<void> {\n  if (isDefined(index))\n    set(highlightedIndex, index);\n\n  const isMultiple = get(multiple);\n\n  if (isMultiple) {\n    const newValue = [...get(value)];\n    const indexInValue = itemIndexInValue(val);\n    if (indexInValue === -1) {\n      updateInternalSearch();\n      newValue.push(val);\n    }\n\n    else { newValue.splice(indexInValue, 1); }\n    set(value, newValue);\n  }\n  else {\n    if (get(shouldApplyValueAsSearch))\n      updateInternalSearch(getText(val));\n    else\n      updateInternalSearch();\n\n    set(value, [val]);\n  }\n\n  if (!isMultiple) {\n    if (!skipRefocused) {\n      set(activatorFocused, true);\n      get(activator)?.focus();\n      await nextTick(() => {\n        set(isOpen, false);\n      });\n    }\n    else {\n      set(isOpen, false);\n    }\n  }\n  else if (!skipRefocused) {\n    set(searchInputFocused, true);\n  }\n}\n\nfunction setSearchAsValue() {\n  const searchToBeValue = get(internalSearch);\n  if (!searchToBeValue)\n    return;\n\n  const newValue: TItem = textValueToProperValue(searchToBeValue);\n  setValue(newValue, undefined, true);\n}\n\nfunction clear(): void {\n  updateInternalSearch();\n  set(modelValue, (Array.isArray(get(modelValue)) ? [] : undefined) as AutoCompleteModelValue<TValue>);\n}\n\nfunction chipAttrs(item: TItem, index: number) {\n  return {\n    'data-index': index,\n    'data-value': getIdentifier(item),\n    'onKeydown': (event: KeyboardEvent): void => {\n      const { key } = event;\n      if (['Backspace', 'Delete'].includes(key))\n        setValue(item);\n    },\n    'onClick.stop': (): void => {\n      setValueFocus(index);\n    },\n    'onClick:close': (): void => {\n      setValue(item);\n    },\n  };\n}\n\nfunction setSelectionRange(start: number, end: number): void {\n  set(searchInputFocused, true);\n  get(textInput)?.setSelectionRange?.(start, end);\n}\n\n// Optimize options watcher with shallow comparison first\nwatch(options, (curr, old) => {\n  if (curr === old || props.customValue)\n    return;\n\n  // Only do deep comparison if reference changed\n  if (isEqual(curr, old))\n    return;\n\n  setSelected(get(value));\n});\n\nfunction arrowClicked(event: any): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n\ndefineExpose({\n  focus: focusSetInputFocus,\n  setSelectionRange,\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: false,\n      fullWidth: true,\n      persistOnActivatorClick: true,\n      ...menuOptions,\n      menuClass: [\n        { hidden: (optionsWithSelectedHidden.length === 0 && customValue && !slots['no-data']) },\n        menuOptions?.menuClass,\n      ],\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        <div\n          ref=\"activator\"\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']]: valueSet,\n              [$style['with-error']]: hasError,\n              [$style['with-success']]: hasSuccess && !hasError,\n            },\n          ]\"\n          v-bind=\"{\n            ...getNonRootAttrs($attrs, ['onClick', 'class']),\n            ...(readOnly ? {} : attrs) }\n          \"\n          data-id=\"activator\"\n          :data-error=\"hasError ? '' : undefined\"\n          :tabindex=\"disabled || readOnly ? -1 : 0\"\n          @click=\"focusSetInputFocus()\"\n          @focus=\"focusOnActivatorFocused()\"\n          @keydown.enter=\"onEnter($event)\"\n          @keydown.tab=\"onTab($event)\"\n          @keydown.left=\"moveSelectedValueHighlight($event, false)\"\n          @keydown.right=\"moveSelectedValueHighlight($event, true)\"\n          @keydown.up.prevent=\"moveHighlight(true)\"\n          @keydown.down.prevent=\"moveHighlight(false)\"\n        >\n          <span\n            v-if=\"outlined || (!valueSet && !searchInputFocused)\"\n            :class=\"[\n              $style.label,\n              {\n                'absolute': outlined,\n                'pr-2': !valueSet && !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          <div :class=\"$style.value\">\n            <template\n              v-for=\"(item, i) in value\"\n              :key=\"getIdentifier(item)\"\n            >\n              <RuiChip\n                v-if=\"chips\"\n                :key=\"getTextToken(getIdentifier(item))\"\n                tabindex=\"-1\"\n                :size=\"dense ? 'sm' : 'md'\"\n                closeable\n                :class=\"{ 'leading-3': dense }\"\n                clickable\n                v-bind=\"chipAttrs(item, i)\"\n              >\n                <div class=\"flex\">\n                  <slot\n                    name=\"selection.prepend\"\n                    :index=\"i\"\n                    v-bind=\"{ item }\"\n                  />\n                  <slot\n                    :index=\"i\"\n                    name=\"selection\"\n                    v-bind=\"{ item }\"\n                  >\n                    {{ getText(item) }}\n                  </slot>\n                </div>\n              </RuiChip>\n              <div\n                v-else-if=\"multiple || ((!searchInputFocused) && (slots['selection.prepend'] || slots.selection))\"\n                class=\"flex\"\n              >\n                <slot\n                  name=\"selection.prepend\"\n                  :index=\"i\"\n                  v-bind=\"{ item }\"\n                />\n                <slot\n                  v-if=\"multiple || slots.selection\"\n                  :index=\"i\"\n                  name=\"selection\"\n                  v-bind=\"{ item, chipAttrs: chipAttrs(item, i) }\"\n                >\n                  {{ getText(item) }}\n                </slot>\n              </div>\n            </template>\n            <input\n              ref=\"textInput\"\n              :disabled=\"disabled\"\n              :value=\"internalSearch\"\n              class=\"bg-transparent outline-none\"\n              type=\"text\"\n              :placeholder=\"usedPlaceholder\"\n              :class=\"focusInputClass\"\n              :aria-invalid=\"hasError\"\n              @keydown.delete=\"onInputDeletePressed()\"\n              @input.stop=\"updateSearchInput($event)\"\n              @focus=\"focusOnInputFocused()\"\n            />\n          </div>\n\n          <RuiButton\n            v-if=\"clearable && valueSet && !disabled\"\n            variant=\"text\"\n            icon\n            size=\"sm\"\n            tabindex=\"-1\"\n            color=\"error\"\n            class=\"group-hover:!visible\"\n            :class=\"[$style.clear, focusAnyFocused && '!visible', {\n              'mr-2': !dense,\n            }]\"\n            @click.stop.prevent=\"clear()\"\n          >\n            <RuiIcon\n              name=\"lu-x\"\n              size=\"18\"\n            />\n          </RuiButton>\n\n          <span\n            :class=\"$style.icon__wrapper\"\n            @click=\"arrowClicked($event)\"\n          >\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        </div>\n        <fieldset\n          v-if=\"outlined\"\n          :class=\"$style.fieldset\"\n        >\n          <legend :class=\"{ 'px-2': float }\" />\n        </fieldset>\n      </slot>\n    </template>\n    <template #default=\"{ width }\">\n      <div ref=\"menuWrapperRef\">\n        <div\n          v-if=\"optionsWithSelectedHidden.length > 0\"\n          :class=\"[$style.menu, menuClass]\"\n          :style=\"{ width: `${width}px`, minWidth: menuWidth, minHeight: `${menuMinHeight}px` }\"\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              ref=\"renderedOptions\"\n              :key=\"getIdentifier(item)?.toString()\"\n              :active=\"isActiveItem(item)\"\n              :size=\"dense ? 'sm' : undefined\"\n              tabindex=\"0\"\n              variant=\"list\"\n              :class=\"{\n                highlighted: highlightedIndex === _index,\n                [$style.highlighted]: highlightedIndex === _index,\n                [$style.active]: isActiveItem(item),\n              }\"\n              @click=\"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          :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n          :class=\"menuClass\"\n        >\n          <slot name=\"no-data\">\n            <div\n              v-if=\"!customValue\"\n              class=\"p-4\"\n            >\n              {{ noDataText }}\n            </div>\n          </slot>\n        </div>\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-within: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      &:not(.disabled):not(.with-error):not(.with-success) {\n        &.opened,\n        &:focus,\n        &:focus-within {\n          @apply border-rui-primary;\n\n          ~ .fieldset {\n            @apply border-rui-primary #{!important};\n            @apply border-2 #{!important};\n          }\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 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    .value {\n      @apply flex gap-1 flex-wrap flex-1;\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      &:not(.disabled) {\n        &.opened,\n        &.opened.with-value,\n        &:focus,\n        &:focus.with-value,\n        &:focus-within,\n        &:focus-within.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\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","getRootAttrs","$attrs","_withCtx","_renderSlot","_createElementVNode","getNonRootAttrs","_withKeys","_createElementBlock","_normalizeClass","_normalizeProps","_guardReactiveProps","_Fragment","_renderList","_createTextVNode","_toDisplayString","_withModifiers","_createVNode","_normalizeStyle"],"mappings":"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"}
+{"version":3,"file":"RuiAutoComplete.vue2.js","sources":["../../../../src/components/forms/auto-complete/RuiAutoComplete.vue"],"sourcesContent":["<script lang=\"ts\" setup generic='TValue, TItem'>\nimport type { ComponentPublicInstance, ComputedRef } from 'vue';\nimport { syncRef } from '@vueuse/core';\nimport { logicAnd, logicOr } from '@vueuse/math';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiChip from '@/components/chips/RuiChip.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, useDropdownOptionProperty } from '@/composables/dropdown-menu';\nimport { useAutoCompleteFocus, useAutoCompleteKeyboardNavigation, useAutoCompleteSearch, useAutoCompleteValue } from '@/composables/forms/auto-complete';\nimport { getTextToken } from '@/utils/helpers';\nimport { isEqual } from '@/utils/is-equal';\n\nexport type AutoCompleteModelValue<TValue> = TValue extends Array<infer U> ? U[] : TValue | undefined;\n\nexport interface AutoCompleteProps<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  itemClass?: 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  chips?: boolean;\n  noFilter?: boolean;\n  hideNoData?: boolean;\n  noDataText?: string;\n  filter?: (item: TItem, queryText: string) => boolean;\n  hideSelected?: boolean;\n  placeholder?: string;\n  returnObject?: boolean;\n  customValue?: boolean;\n  hideCustomValue?: boolean;\n  required?: boolean;\n  hideSearchInput?: boolean;\n  hideSelectionWrapper?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAutoComplete',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<AutoCompleteModelValue<TValue>>({ required: true });\n\nconst searchInputModel = defineModel<string>('searchInput', { default: '' });\n\nconst props = withDefaults(defineProps<AutoCompleteProps<TValue, TItem>>(), {\n  options: () => [],\n  disabled: false,\n  loading: false,\n  readOnly: false,\n  dense: false,\n  clearable: false,\n  hideDetails: false,\n  chips: false,\n  label: 'Select',\n  menuOptions: undefined,\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  noFilter: false,\n  hideNoData: false,\n  noDataText: 'No data available',\n  hideSelected: false,\n  placeholder: '',\n  returnObject: false,\n  customValue: false,\n  hideCustomValue: false,\n  required: false,\n  hideSearchInput: false,\n  hideSelectionWrapper: false,\n});\n\nconst slots = useSlots();\n\nconst { dense, disabled, options } = toRefs(props);\n\nconst { getText, getIdentifier } = useDropdownOptionProperty<TValue, TItem>({\n  keyAttr: props.keyAttr,\n  textAttr: props.textAttr,\n});\n\nconst textInput = ref();\nconst activator = ref();\nconst menuRef = ref();\nconst menuWrapperRef = ref();\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\nconst { focused: activatorFocused } = useFocus(activator);\n\nconst renderedOptions = ref<ComponentPublicInstance[]>([]);\n\nconst {\n  internalSearch,\n  filteredOptions,\n  justOpened,\n  updateInternalSearch,\n  textValueToProperValue,\n} = useAutoCompleteSearch<TItem>(\n  options,\n  searchInputModel,\n  {\n    keyAttr: toRef(props, 'keyAttr'),\n    textAttr: toRef(props, 'textAttr'),\n    noFilter: toRef(props, 'noFilter'),\n    filter: toRef(props, 'filter'),\n    customValue: toRef(props, 'customValue'),\n    hideCustomValue: toRef(props, 'hideCustomValue'),\n    returnObject: toRef(props, 'returnObject'),\n  },\n);\n\n// Calculate multiple from modelValue directly to avoid circular dependency\nconst multiple = computed<boolean>(() => Array.isArray(get(modelValue)));\n\nconst shouldApplyValueAsSearch = computed<boolean>(() => !(slots.selection || get(multiple) || props.chips));\n\n// Create a temporary isOpen ref that we'll sync with useDropdownMenu's isOpen\nconst tempIsOpen = ref<boolean>(false);\n\nconst {\n  value,\n  setSelected,\n} = useAutoCompleteValue<AutoCompleteModelValue<TValue>, TItem>(\n  modelValue,\n  options,\n  {\n    keyAttr: toRef(props, 'keyAttr'),\n    returnObject: toRef(props, 'returnObject'),\n    customValue: toRef(props, 'customValue'),\n  },\n  {\n    getIdentifier,\n    getText,\n    textValueToProperValue,\n    shouldApplyValueAsSearch,\n    isOpen: tempIsOpen,\n    updateInternalSearch,\n  },\n);\n\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  isOpen,\n  menuWidth,\n  isActiveItem,\n  itemIndexInValue,\n  highlightedIndex,\n  moveHighlight,\n  applyHighlighted,\n  optionsWithSelectedHidden,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: props.itemHeight ?? (props.dense ? 30 : 48),\n  keyAttr: props.keyAttr,\n  textAttr: props.textAttr,\n  options: filteredOptions,\n  dense,\n  value,\n  menuRef,\n  setValue,\n  autoSelectFirst: props.autoSelectFirst,\n  hideSelected: props.hideSelected,\n});\n\n// Sync the isOpen states\nsyncRef(isOpen, tempIsOpen);\n\nconst {\n  focusedValueIndex,\n  moveSelectedValueHighlight,\n  onEnter,\n  onInputDeletePressed,\n  onTab,\n  setValueFocus,\n} = useAutoCompleteKeyboardNavigation<TItem>(\n  {\n    customValue: toRef(props, 'customValue'),\n    multiple,\n  },\n  {\n    activator,\n    applyHighlighted,\n    clear,\n    filteredOptions,\n    highlightedIndex,\n    internalSearch,\n    isOpen,\n    options,\n    searchInputFocused,\n    setSearchAsValue,\n    value,\n  },\n);\n\nconst {\n  anyFocused: focusAnyFocused,\n  inputClass: focusInputClass,\n  onActivatorFocused: focusOnActivatorFocused,\n  onInputFocused: focusOnInputFocused,\n  setInputFocus: focusSetInputFocus,\n} = useAutoCompleteFocus<TItem>(\n  {\n    customValue: toRef(props, 'customValue'),\n    disabled,\n    shouldApplyValueAsSearch,\n  },\n  {\n    activatorFocused,\n    activatorFocusedWithin,\n    filteredOptions,\n    focusedValueIndex,\n    internalSearch,\n    isOpen,\n    justOpened,\n    menuWrapperFocusedWithin,\n    searchInputFocused,\n    setSearchAsValue,\n    textInput,\n    updateInternalSearch,\n  },\n);\n\nconst valueSet = computed<boolean>(() => get(value).length > 0);\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 usedPlaceholder = computed<string>(() => {\n  if (get(searchInputFocused)) {\n    return props.placeholder;\n  }\n  return '';\n});\n\nconst menuMinHeight = ref<number>(0);\n\n// Update menu min height only when rendered data changes\nwatch(renderedData, async () => {\n  await nextTick();\n  const renderedOptionsData = get(renderedOptions).slice(0, Math.min(5, get(renderedData).length));\n  let height = 0;\n  for (const item of renderedOptionsData) {\n    if (item.$el) {\n      height += item.$el.offsetHeight;\n    }\n  }\n  set(menuMinHeight, height);\n}, { immediate: true });\n\nconst outlined = computed<boolean>(() => props.variant === 'outlined');\n\nconst float: ComputedRef<boolean> = logicAnd(\n  logicOr(\n    isOpen,\n    valueSet,\n    searchInputFocused,\n  ),\n  outlined,\n);\n\nconst virtualContainerProps = computed(() => ({\n  style: containerProps.style as any,\n  ref: containerProps.ref as any,\n}));\n\nfunction updateSearchInput(event: any) {\n  const value = event.target.value;\n  set(isOpen, true);\n  updateInternalSearch(value);\n  set(justOpened, false);\n}\n\nasync function setValue(val: TItem, index?: number, skipRefocused = false): Promise<void> {\n  if (isDefined(index))\n    set(highlightedIndex, index);\n\n  const isMultiple = get(multiple);\n\n  if (isMultiple) {\n    const newValue = [...get(value)];\n    const indexInValue = itemIndexInValue(val);\n    if (indexInValue === -1) {\n      updateInternalSearch();\n      newValue.push(val);\n    }\n\n    else { newValue.splice(indexInValue, 1); }\n    set(value, newValue);\n  }\n  else {\n    if (get(shouldApplyValueAsSearch))\n      updateInternalSearch(getText(val));\n    else\n      updateInternalSearch();\n\n    set(value, [val]);\n  }\n\n  if (!isMultiple) {\n    if (!skipRefocused) {\n      set(activatorFocused, true);\n      get(activator)?.focus();\n      await nextTick(() => {\n        set(isOpen, false);\n      });\n    }\n    else {\n      set(isOpen, false);\n    }\n  }\n  else if (!skipRefocused) {\n    set(searchInputFocused, true);\n  }\n}\n\nfunction setSearchAsValue() {\n  const searchToBeValue = get(internalSearch);\n  if (!searchToBeValue)\n    return;\n\n  const newValue: TItem = textValueToProperValue(searchToBeValue);\n  setValue(newValue, undefined, true);\n}\n\nfunction clear(): void {\n  updateInternalSearch();\n  set(modelValue, (Array.isArray(get(modelValue)) ? [] : undefined) as AutoCompleteModelValue<TValue>);\n}\n\nfunction chipAttrs(item: TItem, index: number) {\n  return {\n    'data-index': index,\n    'data-value': getIdentifier(item),\n    'onKeydown': (event: KeyboardEvent): void => {\n      const { key } = event;\n      if (['Backspace', 'Delete'].includes(key))\n        setValue(item);\n    },\n    'onClick.stop': (): void => {\n      setValueFocus(index);\n    },\n    'onClick:close': (): void => {\n      setValue(item);\n    },\n  };\n}\n\nfunction setSelectionRange(start: number, end: number): void {\n  set(searchInputFocused, true);\n  get(textInput)?.setSelectionRange?.(start, end);\n}\n\n// Optimize options watcher with shallow comparison first\nwatch(options, (curr, old) => {\n  if (curr === old || props.customValue)\n    return;\n\n  // Only do deep comparison if reference changed\n  if (isEqual(curr, old))\n    return;\n\n  setSelected(get(value));\n});\n\nfunction arrowClicked(event: any): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n\ndefineExpose({\n  focus: focusSetInputFocus,\n  setSelectionRange,\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: false,\n      fullWidth: true,\n      persistOnActivatorClick: true,\n      ...menuOptions,\n      menuClass: [\n        { hidden: (optionsWithSelectedHidden.length === 0 && customValue && !slots['no-data']) },\n        menuOptions?.menuClass,\n      ],\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        <div\n          ref=\"activator\"\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']]: valueSet,\n              [$style['with-error']]: hasError,\n              [$style['with-success']]: hasSuccess && !hasError,\n            },\n          ]\"\n          v-bind=\"{\n            ...getNonRootAttrs($attrs, ['onClick', 'class']),\n            ...(readOnly ? {} : attrs) }\n          \"\n          data-id=\"activator\"\n          :data-error=\"hasError ? '' : undefined\"\n          :tabindex=\"disabled || readOnly ? -1 : 0\"\n          @click=\"focusSetInputFocus()\"\n          @focus=\"focusOnActivatorFocused()\"\n          @keydown.enter=\"onEnter($event)\"\n          @keydown.tab=\"onTab($event)\"\n          @keydown.left=\"moveSelectedValueHighlight($event, false)\"\n          @keydown.right=\"moveSelectedValueHighlight($event, true)\"\n          @keydown.up.prevent=\"moveHighlight(true)\"\n          @keydown.down.prevent=\"moveHighlight(false)\"\n        >\n          <span\n            v-if=\"outlined || (!valueSet && !searchInputFocused)\"\n            :class=\"[\n              $style.label,\n              {\n                'absolute': outlined,\n                'pr-2': !valueSet && !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          <div :class=\"$style.value\">\n            <template\n              v-for=\"(item, i) in value\"\n              :key=\"getIdentifier(item)\"\n            >\n              <RuiChip\n                v-if=\"chips\"\n                :key=\"getTextToken(getIdentifier(item))\"\n                tabindex=\"-1\"\n                :size=\"dense ? 'sm' : 'md'\"\n                closeable\n                :class=\"{ 'leading-3': dense }\"\n                clickable\n                v-bind=\"chipAttrs(item, i)\"\n              >\n                <div class=\"flex\">\n                  <slot\n                    name=\"selection.prepend\"\n                    :index=\"i\"\n                    v-bind=\"{ item }\"\n                  />\n                  <slot\n                    :index=\"i\"\n                    name=\"selection\"\n                    v-bind=\"{ item }\"\n                  >\n                    {{ getText(item) }}\n                  </slot>\n                </div>\n              </RuiChip>\n              <div\n                v-else-if=\"multiple || ((!searchInputFocused) && (slots['selection.prepend'] || slots.selection))\"\n                :class=\"hideSelectionWrapper ? 'contents' : 'flex'\"\n              >\n                <slot\n                  name=\"selection.prepend\"\n                  :index=\"i\"\n                  v-bind=\"{ item }\"\n                />\n                <slot\n                  v-if=\"multiple || slots.selection\"\n                  :index=\"i\"\n                  name=\"selection\"\n                  v-bind=\"{ item, chipAttrs: chipAttrs(item, i) }\"\n                >\n                  {{ getText(item) }}\n                </slot>\n              </div>\n            </template>\n            <input\n              ref=\"textInput\"\n              :disabled=\"disabled\"\n              :value=\"internalSearch\"\n              class=\"bg-transparent outline-none\"\n              type=\"text\"\n              :placeholder=\"usedPlaceholder\"\n              :class=\"[focusInputClass, { hidden: hideSearchInput }]\"\n              :aria-invalid=\"hasError\"\n              @keydown.delete=\"onInputDeletePressed()\"\n              @input.stop=\"updateSearchInput($event)\"\n              @focus=\"focusOnInputFocused()\"\n            />\n          </div>\n\n          <RuiButton\n            v-if=\"clearable && valueSet && !disabled\"\n            variant=\"text\"\n            icon\n            size=\"sm\"\n            tabindex=\"-1\"\n            color=\"error\"\n            class=\"group-hover:!visible\"\n            :class=\"[$style.clear, focusAnyFocused && '!visible', {\n              'mr-2': !dense,\n            }]\"\n            @click.stop.prevent=\"clear()\"\n          >\n            <RuiIcon\n              name=\"lu-x\"\n              size=\"18\"\n            />\n          </RuiButton>\n\n          <span\n            :class=\"$style.icon__wrapper\"\n            @click=\"arrowClicked($event)\"\n          >\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        </div>\n        <fieldset\n          v-if=\"outlined\"\n          :class=\"$style.fieldset\"\n        >\n          <legend :class=\"{ 'px-2': float }\" />\n        </fieldset>\n      </slot>\n    </template>\n    <template #default=\"{ width }\">\n      <div ref=\"menuWrapperRef\">\n        <div\n          v-if=\"optionsWithSelectedHidden.length > 0\"\n          :class=\"[$style.menu, menuClass]\"\n          :style=\"{ width: `${width}px`, minWidth: menuWidth, minHeight: `${menuMinHeight}px` }\"\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              ref=\"renderedOptions\"\n              :key=\"getIdentifier(item)?.toString()\"\n              :active=\"isActiveItem(item)\"\n              :size=\"dense ? 'sm' : undefined\"\n              tabindex=\"0\"\n              variant=\"list\"\n              :class=\"{\n                highlighted: highlightedIndex === _index,\n                [$style.highlighted]: highlightedIndex === _index,\n                [$style.active]: isActiveItem(item),\n              }\"\n              @click=\"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          :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n          :class=\"menuClass\"\n        >\n          <slot name=\"no-data\">\n            <div\n              v-if=\"!customValue\"\n              class=\"p-4\"\n            >\n              {{ noDataText }}\n            </div>\n          </slot>\n        </div>\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-within: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      &:not(.disabled):not(.with-error):not(.with-success) {\n        &.opened,\n        &:focus,\n        &:focus-within {\n          @apply border-rui-primary;\n\n          ~ .fieldset {\n            @apply border-rui-primary #{!important};\n            @apply border-2 #{!important};\n          }\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 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    .value {\n      @apply flex gap-1 flex-wrap flex-1;\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      &:not(.disabled) {\n        &.opened,\n        &.opened.with-value,\n        &:focus,\n        &:focus.with-value,\n        &:focus-within,\n        &:focus-within.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\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","getRootAttrs","$attrs","_withCtx","_renderSlot","_createElementVNode","getNonRootAttrs","_withKeys","_createElementBlock","_normalizeClass","_normalizeProps","_guardReactiveProps","_Fragment","_renderList","_createTextVNode","_toDisplayString","_withModifiers","_createVNode","_normalizeStyle"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, ref, watch, computed, createElementBlock, openBlock, renderSlot, createBlock, normalizeProps, guardReactiveProps, unref, Teleport, createCommentVNode, createElementVNode, Transition, withCtx, withModifiers, normalizeClass, mergeProps } from "vue";
+import { defineComponent, toRefs, ref, nextTick, watch, computed, createElementBlock, openBlock, renderSlot, createBlock, normalizeProps, guardReactiveProps, unref, Teleport, createCommentVNode, Transition, withCtx, withModifiers, normalizeClass, mergeProps } from "vue";
 import { transformPropsUnit, getRootAttrs } from "../../../utils/helpers.js";
 import { watchImmediate, onClickOutside } from "@vueuse/core";
 import { set, get } from "@vueuse/shared";
@@ -34,21 +34,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         emit("closed");
     }
     const internalValue = ref(false);
+    const isOpen = ref(false);
     watchImmediate(modelValue, (value) => {
-      set(internalValue, value);
+      nextTick(() => {
+        set(internalValue, value);
+      });
     });
     watch(internalValue, (value) => {
-      onUpdateModelValue(value);
+      if (value) {
+        window.requestAnimationFrame(() => {
+          set(isOpen, value);
+        });
+      } else {
+        setTimeout(() => {
+          set(isOpen, value);
+        }, 150);
+      }
+    });
+    watch(isOpen, (isOpen2) => {
+      if (isOpen2) {
+        onUpdateModelValue(isOpen2);
+        set(internalValue, isOpen2);
+      } else {
+        setTimeout(() => {
+          onUpdateModelValue(isOpen2);
+          set(internalValue, isOpen2);
+        }, 150);
+      }
     });
     function close() {
-      set(internalValue, false);
+      set(isOpen, false);
     }
     const style = computed(() => ({
       width: transformPropsUnit(get(width))
     }));
     const content = ref(null);
     onClickOutside(content, () => {
-      if (get(internalValue) && props.temporary && !props.stateless) {
+      if (get(isOpen) && props.temporary && !props.stateless) {
         setTimeout(() => {
           close();
         }, 50);
@@ -71,11 +93,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "enter-active-class": "ease-out duration-150",
             "enter-to-class": "opacity-100",
             "leave-from-class": "opacity-100",
-            "leave-active-class": "ease-in duration-100",
+            "leave-active-class": "ease-in duration-150",
             "leave-to-class": "opacity-0"
           }, {
             default: withCtx(() => [
-              internalValue.value ? (openBlock(), createElementBlock("div", {
+              isOpen.value && internalValue.value ? (openBlock(), createElementBlock("div", {
                 key: 0,
                 class: normalizeClass(_ctx.$style.overlay),
                 onClick: _cache[0] || (_cache[0] = withModifiers(($event) => close(), ["stop"]))
@@ -83,7 +105,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           })) : createCommentVNode("", true),
-          createElementVNode("aside", mergeProps({
+          isOpen.value || internalValue.value || unref(miniVariant) ? (openBlock(), createElementBlock("aside", mergeProps({
+            key: 1,
             ref_key: "content",
             ref: content,
             style: unref(style),
@@ -91,7 +114,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _ctx.$style.content,
               __props.contentClass,
               {
-                [_ctx.$style.visible]: internalValue.value,
+                [_ctx.$style.visible]: isOpen.value && internalValue.value,
                 [_ctx.$style[unref(position)]]: unref(position),
                 [_ctx.$style.mini]: unref(miniVariant),
                 [_ctx.$style.temporary]: __props.temporary,
@@ -100,7 +123,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]
           }, unref(getRootAttrs)(_ctx.$attrs)), [
             renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ attrs: unref(activatorAttrs), close })))
-          ], 16)
+          ], 16)) : createCommentVNode("", true)
         ]))
       ]);
     };

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

@@ -1 +1 @@
-{"version":3,"file":"RuiNavigationDrawer.vue2.js","sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang='ts'>\nimport type { MaybeElement } from '@vueuse/core';\nimport { type Ref, ref } from 'vue';\nimport { getRootAttrs } from '@/utils/helpers';\n\nexport interface NavigationDrawerProps {\n  modelValue?: boolean;\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  contentClass?: string | object | string[];\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<NavigationDrawerProps>(), {\n  modelValue: false,\n  temporary: false,\n  stateless: false,\n  width: 360,\n  miniVariant: false,\n  overlay: false,\n  position: 'left',\n  contentClass: '',\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: boolean): void;\n  (e: 'closed'): void;\n}>();\n\nconst {\n  modelValue,\n  position,\n  miniVariant,\n  width,\n} = toRefs(props);\n\nfunction onUpdateModelValue(value: boolean) {\n  emit('update:model-value', value);\n\n  if (!value)\n    emit('closed');\n}\n\nconst internalValue: Ref<boolean> = ref(false);\n\nwatchImmediate(modelValue, (value) => {\n  set(internalValue, value);\n});\n\nwatch(internalValue, (value) => {\n  onUpdateModelValue(value);\n});\n\nfunction close() {\n  set(internalValue, false);\n}\n\nconst style = computed(() => ({\n  width: transformPropsUnit(get(width)),\n}));\n\nconst content: Ref<MaybeElement | null> = ref(null);\n\nonClickOutside(content, () => {\n  if (get(internalValue) && props.temporary && !props.stateless) {\n    setTimeout(() => {\n      close();\n    }, 50);\n  }\n});\n\nconst activatorAttrs = computed(() => ({\n  onClick: () => {\n    const newValue = !get(internalValue);\n    set(internalValue, newValue);\n    onUpdateModelValue(newValue);\n  },\n}));\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: internalValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"ease-out duration-150\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"ease-in duration-100\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"internalValue\"\n          :class=\"$style.overlay\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        ref=\"content\"\n        :style=\"style\"\n        :class=\"[\n          $style.content,\n          contentClass,\n          {\n            [$style.visible]: internalValue,\n            [$style[position]]: position,\n            [$style.mini]: miniVariant,\n            [$style.temporary]: temporary,\n            [$style['with-overlay']]: overlay,\n          },\n        ]\"\n        v-bind=\"getRootAttrs($attrs)\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.overlay {\n  @apply absolute top-0 left-0 w-full h-full backdrop-blur bg-rui-grey-500/[0.5] z-[10000];\n}\n\n.content {\n  @apply transition-all top-0 h-full fixed text-rui-text bg-white z-[7];\n\n  &.left {\n    @apply -translate-x-full left-0;\n  }\n\n  &.right {\n    @apply translate-x-full right-0;\n  }\n\n  &.with-overlay {\n    @apply z-[10000];\n  }\n\n  &.visible {\n    @apply translate-x-0;\n  }\n\n  &.temporary {\n    &.visible {\n      @apply shadow-5;\n    }\n  }\n\n  &.mini {\n    @apply translate-x-0;\n\n    &:not(.visible) {\n      @apply w-14 #{!important};\n    }\n  }\n}\n\n:global(.dark) {\n  .overlay {\n    @apply bg-black/[0.5];\n  }\n\n  .content {\n    @apply bg-[#363636];\n  }\n}\n</style>\n"],"names":["_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_unref","_createBlock","_Teleport","_Transition","_normalizeClass","$style","_createElementVNode","_mergeProps","$attrs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqBA,UAAM,QAAQ;AAWd,UAAM,OAAO;AAKb,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,OAAO,KAAK;AAEhB,aAAS,mBAAmB,OAAgB;AAC1C,WAAK,sBAAsB,KAAK;AAEhC,UAAI,CAAC;AACH,aAAK,QAAQ;AAAA,IACjB;AAEA,UAAM,gBAA8B,IAAI,KAAK;AAE7C,mBAAe,YAAY,CAAC,UAAU;AACpC,UAAI,eAAe,KAAK;AAAA,IAC1B,CAAC;AAED,UAAM,eAAe,CAAC,UAAU;AAC9B,yBAAmB,KAAK;AAAA,IAC1B,CAAC;AAED,aAAS,QAAQ;AACf,UAAI,eAAe,KAAK;AAAA,IAC1B;AAEA,UAAM,QAAQ,SAAS,OAAO;AAAA,MAC5B,OAAO,mBAAmB,IAAI,KAAK,CAAC;AAAA,IAAA,EACpC;AAEF,UAAM,UAAoC,IAAI,IAAI;AAElD,mBAAe,SAAS,MAAM;AAC5B,UAAI,IAAI,aAAa,KAAK,MAAM,aAAa,CAAC,MAAM,WAAW;AAC7D,mBAAW,MAAM;AACf,gBAAA;AAAA,QACF,GAAG,EAAE;AAAA,MACP;AAAA,IACF,CAAC;AAED,UAAM,iBAAiB,SAAS,OAAO;AAAA,MACrC,SAAS,MAAM;AACb,cAAM,WAAW,CAAC,IAAI,aAAa;AACnC,YAAI,eAAe,QAAQ;AAC3B,2BAAmB,QAAQ;AAAA,MAC7B;AAAA,IAAA,EACA;;0BAIAA,mBAwCM,OAAA,MAAA;AAAA,QAvCJC,WAGE,KAAA,QAAA,aAAAC,eAAAC,mBAAA,EAAA,MADgB,cAAA,OAAa,OAASC,MAAA,cAAA,EAAA,CAAc,CAAA,CAAA;AAAA,sBAEtDC,YAkCWC,UAAA,EAlCD,IAAG,UAAM;AAAA,UAET,QAAA,wBADRD,YAcaE,YAAA;AAAA;YAZX,oBAAiB;AAAA,YACjB,sBAAmB;AAAA,YACnB,kBAAe;AAAA,YACf,oBAAiB;AAAA,YACjB,sBAAmB;AAAA,YACnB,kBAAe;AAAA,UAAA;6BAEf,MAIE;AAAA,cAHM,cAAA,sBADRP,mBAIE,OAAA;AAAA;gBAFC,OAAKQ,eAAEC,KAAAA,OAAO,OAAO;AAAA,gBACrB,6DAAY,SAAK,CAAA,MAAA,CAAA;AAAA,cAAA;;;;UAGtBC,mBAiBQ,SAjBRC,WAiBQ;AAAA,qBAhBF;AAAA,YAAJ,KAAI;AAAA,YACH,OAAOP,MAAA,KAAA;AAAA,YACP,OAAK;AAAA,cAAcK,KAAAA,OAAO;AAAA,cAAmB,QAAA;AAAA;iBAAuCA,KAAAA,OAAO,OAAO,GAAG,cAAA;AAAA,iBAA4BA,KAAAA,OAAOL,MAAA,QAAA,CAAQ,CAAA,GAAIA,MAAA,QAAA;AAAA,iBAAuBK,KAAAA,OAAO,IAAI,GAAGL,MAAA,WAAA;AAAA,iBAA0BK,KAAAA,OAAO,SAAS,GAAG,QAAA;AAAA,gBAAwBA,CAAAA,KAAAA,yBAAyB,QAAA;AAAA,cAAA;AAAA;aAWhRL,MAAA,YAAA,EAAaQ,KAAAA,MAAM,CAAA,GAAA;AAAA,YAE3BX,WAAkD,KAAA,QAAA,WAAAC,eAAAC,mBAAA,EAAA,OAA3BC,MAAA,cAAA,GAAc,MAAA,CAAO,CAAA,CAAA;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"RuiNavigationDrawer.vue2.js","sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang='ts'>\nimport type { MaybeElement } from '@vueuse/core';\nimport { type Ref, ref } from 'vue';\nimport { getRootAttrs } from '@/utils/helpers';\n\nexport interface NavigationDrawerProps {\n  modelValue?: boolean;\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  contentClass?: string | object | string[];\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<NavigationDrawerProps>(), {\n  modelValue: false,\n  temporary: false,\n  stateless: false,\n  width: 360,\n  miniVariant: false,\n  overlay: false,\n  position: 'left',\n  contentClass: '',\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: boolean): void;\n  (e: 'closed'): void;\n}>();\n\nconst {\n  modelValue,\n  position,\n  miniVariant,\n  width,\n} = toRefs(props);\n\nfunction onUpdateModelValue(value: boolean): void {\n  emit('update:model-value', value);\n\n  if (!value)\n    emit('closed');\n}\n\nconst internalValue = ref<boolean>(false);\nconst isOpen = ref<boolean>(false);\n\nwatchImmediate(modelValue, (value) => {\n  nextTick(() => {\n    set(internalValue, value);\n  });\n});\n\nwatch(internalValue, (value) => {\n  if (value) {\n    window.requestAnimationFrame(() => {\n      set(isOpen, value);\n    });\n  }\n  else {\n    setTimeout(() => {\n      set(isOpen, value);\n    }, 150);\n  }\n});\n\nwatch(isOpen, (isOpen) => {\n  if (isOpen) {\n    onUpdateModelValue(isOpen);\n    set(internalValue, isOpen);\n  }\n  else {\n    setTimeout(() => {\n      onUpdateModelValue(isOpen);\n      set(internalValue, isOpen);\n    }, 150);\n  }\n});\n\nfunction close(): void {\n  set(isOpen, false);\n}\n\nconst style = computed(() => ({\n  width: transformPropsUnit(get(width)),\n}));\n\nconst content: Ref<MaybeElement | null> = ref(null);\n\nonClickOutside(content, () => {\n  if (get(isOpen) && props.temporary && !props.stateless) {\n    setTimeout(() => {\n      close();\n    }, 50);\n  }\n});\n\nconst activatorAttrs = computed(() => ({\n  onClick: () => {\n    const newValue = !get(internalValue);\n    set(internalValue, newValue);\n    onUpdateModelValue(newValue);\n  },\n}));\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: internalValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"ease-out duration-150\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"ease-in duration-150\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"isOpen && internalValue\"\n          :class=\"$style.overlay\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"isOpen || internalValue || miniVariant\"\n        ref=\"content\"\n        :style=\"style\"\n        :class=\"[\n          $style.content,\n          contentClass,\n          {\n            [$style.visible]: isOpen && internalValue,\n            [$style[position]]: position,\n            [$style.mini]: miniVariant,\n            [$style.temporary]: temporary,\n            [$style['with-overlay']]: overlay,\n          },\n        ]\"\n        v-bind=\"getRootAttrs($attrs)\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.overlay {\n  @apply absolute top-0 left-0 w-full h-full backdrop-blur bg-rui-grey-500/[0.5] z-[10000];\n}\n\n.content {\n  @apply transition-all duration-150 ease-in-out top-0 h-full fixed text-rui-text bg-white z-[7];\n\n  &.left {\n    @apply -translate-x-full left-0;\n  }\n\n  &.right {\n    @apply translate-x-full right-0;\n  }\n\n  &.with-overlay {\n    @apply z-[10000];\n  }\n\n  &.visible {\n    @apply translate-x-0;\n  }\n\n  &.temporary {\n    &.visible {\n      @apply shadow-5;\n    }\n  }\n\n  &.mini {\n    @apply translate-x-0;\n\n    &:not(.visible) {\n      @apply w-14 #{!important};\n    }\n  }\n}\n\n:global(.dark) {\n  .overlay {\n    @apply bg-black/[0.5];\n  }\n\n  .content {\n    @apply bg-[#363636];\n  }\n}\n</style>\n"],"names":["isOpen","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_unref","_createBlock","_Teleport","_Transition","_normalizeClass","$style","_openBlock","_mergeProps","$attrs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqBA,UAAM,QAAQ;AAWd,UAAM,OAAO;AAKb,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,OAAO,KAAK;AAEhB,aAAS,mBAAmB,OAAsB;AAChD,WAAK,sBAAsB,KAAK;AAEhC,UAAI,CAAC;AACH,aAAK,QAAQ;AAAA,IACjB;AAEA,UAAM,gBAAgB,IAAa,KAAK;AACxC,UAAM,SAAS,IAAa,KAAK;AAEjC,mBAAe,YAAY,CAAC,UAAU;AACpC,eAAS,MAAM;AACb,YAAI,eAAe,KAAK;AAAA,MAC1B,CAAC;AAAA,IACH,CAAC;AAED,UAAM,eAAe,CAAC,UAAU;AAC9B,UAAI,OAAO;AACT,eAAO,sBAAsB,MAAM;AACjC,cAAI,QAAQ,KAAK;AAAA,QACnB,CAAC;AAAA,MACH,OACK;AACH,mBAAW,MAAM;AACf,cAAI,QAAQ,KAAK;AAAA,QACnB,GAAG,GAAG;AAAA,MACR;AAAA,IACF,CAAC;AAED,UAAM,QAAQ,CAACA,YAAW;AACxB,UAAIA,SAAQ;AACV,2BAAmBA,OAAM;AACzB,YAAI,eAAeA,OAAM;AAAA,MAC3B,OACK;AACH,mBAAW,MAAM;AACf,6BAAmBA,OAAM;AACzB,cAAI,eAAeA,OAAM;AAAA,QAC3B,GAAG,GAAG;AAAA,MACR;AAAA,IACF,CAAC;AAED,aAAS,QAAc;AACrB,UAAI,QAAQ,KAAK;AAAA,IACnB;AAEA,UAAM,QAAQ,SAAS,OAAO;AAAA,MAC5B,OAAO,mBAAmB,IAAI,KAAK,CAAC;AAAA,IAAA,EACpC;AAEF,UAAM,UAAoC,IAAI,IAAI;AAElD,mBAAe,SAAS,MAAM;AAC5B,UAAI,IAAI,MAAM,KAAK,MAAM,aAAa,CAAC,MAAM,WAAW;AACtD,mBAAW,MAAM;AACf,gBAAA;AAAA,QACF,GAAG,EAAE;AAAA,MACP;AAAA,IACF,CAAC;AAED,UAAM,iBAAiB,SAAS,OAAO;AAAA,MACrC,SAAS,MAAM;AACb,cAAM,WAAW,CAAC,IAAI,aAAa;AACnC,YAAI,eAAe,QAAQ;AAC3B,2BAAmB,QAAQ;AAAA,MAC7B;AAAA,IAAA,EACA;;0BAIAC,mBAyCM,OAAA,MAAA;AAAA,QAxCJC,WAGE,KAAA,QAAA,aAAAC,eAAAC,mBAAA,EAAA,MADgB,cAAA,OAAa,OAASC,MAAA,cAAA,EAAA,CAAc,CAAA,CAAA;AAAA,sBAEtDC,YAmCWC,UAAA,EAnCD,IAAG,UAAM;AAAA,UAET,QAAA,wBADRD,YAcaE,YAAA;AAAA;YAZX,oBAAiB;AAAA,YACjB,sBAAmB;AAAA,YACnB,kBAAe;AAAA,YACf,oBAAiB;AAAA,YACjB,sBAAmB;AAAA,YACnB,kBAAe;AAAA,UAAA;6BAEf,MAIE;AAAA,cAHM,OAAA,SAAU,cAAA,sBADlBP,mBAIE,OAAA;AAAA;gBAFC,OAAKQ,eAAEC,KAAAA,OAAO,OAAO;AAAA,gBACrB,6DAAY,SAAK,CAAA,MAAA,CAAA;AAAA,cAAA;;;;UAId,OAAA,SAAU,cAAA,SAAiBL,MAAA,WAAA,KADnCM,UAAA,GAAAV,mBAkBQ,SAlBRW,WAkBQ;AAAA;qBAhBF;AAAA,YAAJ,KAAI;AAAA,YACH,OAAOP,MAAA,KAAA;AAAA,YACP,OAAK;AAAA,cAAcK,KAAAA,OAAO;AAAA,cAAmB,QAAA;AAAA;gBAAuCA,CAAAA,KAAAA,OAAO,OAAO,GAAG,OAAA,SAAU,cAAA;AAAA,iBAA4BA,KAAAA,OAAOL,MAAA,QAAA,CAAQ,CAAA,GAAIA,MAAA,QAAA;AAAA,iBAAuBK,KAAAA,OAAO,IAAI,GAAGL,MAAA,WAAA;AAAA,iBAA0BK,KAAAA,OAAO,SAAS,GAAG,QAAA;AAAA,gBAAwBA,CAAAA,KAAAA,yBAAyB,QAAA;AAAA,cAAA;AAAA;aAW1RL,MAAA,YAAA,EAAaQ,KAAAA,MAAM,CAAA,GAAA;AAAA,YAE3BX,WAAkD,KAAA,QAAA,WAAAC,eAAAC,mBAAA,EAAA,OAA3BC,MAAA,cAAA,GAAc,MAAA,CAAO,CAAA,CAAA;AAAA,UAAA;;;;;;"}

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

@@ -1,16 +1,16 @@
-const overlay = "_overlay_ze4k4_1";
-const content = "_content_ze4k4_5";
-const left = "_left_ze4k4_8";
-const right = "_right_ze4k4_11";
-const visible = "_visible_ze4k4_17";
-const temporary = "_temporary_ze4k4_20";
-const mini = "_mini_ze4k4_23";
+const overlay = "_overlay_b1dn3_1";
+const content = "_content_b1dn3_5";
+const left = "_left_b1dn3_8";
+const right = "_right_b1dn3_11";
+const visible = "_visible_b1dn3_17";
+const temporary = "_temporary_b1dn3_20";
+const mini = "_mini_b1dn3_23";
 const style0 = {
   overlay,
   content,
   left,
   right,
-  "with-overlay": "_with-overlay_ze4k4_14",
+  "with-overlay": "_with-overlay_b1dn3_14",
   visible,
   temporary,
   mini

package/dist/composables/theme.js

@@ -1,13 +1,22 @@
-import { createSharedComposable, useColorMode } from "@vueuse/core";
+import { createSharedComposable, getSSRHandler, useColorMode } from "@vueuse/core";
 import { ref, computed, watch } from "vue";
 import { defaultTheme, ThemeMode } from "../types/theme.js";
 import { get, set } from "@vueuse/shared";
 const config = ref({ ...defaultTheme });
 const useRotkiTheme = createSharedComposable(() => {
+  const updateHTMLAttrs = getSSRHandler(
+    "updateHTMLAttrs",
+    (selector, attribute, value) => {
+      const el = typeof selector === "string" ? window?.document.querySelector(selector) : null;
+      if (!el)
+        return;
+      el.setAttribute(attribute, value);
+    }
+  );
   const { state, store } = useColorMode({
     onChanged(mode, defaultHandler) {
       defaultHandler(mode);
-      document.documentElement.dataset.theme = mode;
+      updateHTMLAttrs("html", "data-theme", mode);
     }
   });
   const isAutoControlled = computed(() => get(store) === ThemeMode.auto);

package/dist/composables/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../src/composables/theme.ts"],"sourcesContent":["import { useColorMode } from '@vueuse/core';\nimport { computed, type ComputedRef, type Ref, ref } from 'vue';\nimport {\n  type ColorIntensity,\n  defaultTheme,\n  type InitThemeOptions,\n  type ThemeConfig,\n  type ThemeContent,\n  type ThemeData,\n  ThemeMode,\n} from '@/types/theme';\n\nconst config: Ref<ThemeConfig> = ref({ ...defaultTheme });\n\n/**\n * Theme manager\n * @returns {ThemeContent}\n */\nexport const useRotkiTheme = createSharedComposable<() => ThemeContent>(() => {\n  const { state, store } = useColorMode<ThemeMode>({\n    onChanged(mode, defaultHandler) {\n      defaultHandler(mode);\n      document.documentElement.dataset.theme = mode;\n    },\n  });\n\n  /**\n   * whether the current theme is controlled by system or user\n   * @type {ComputedRef<boolean>}\n   */\n  const isAutoControlled: ComputedRef<boolean> = computed(() => get(store) === ThemeMode.auto);\n\n  /**\n   * truthy for light theme\n   * @type {ComputedRef<boolean>}\n   */\n  const isLight: ComputedRef<boolean> = computed(() => get(state) === ThemeMode.light);\n\n  /**\n   * truthy for dark theme\n   * @type {ComputedRef<boolean>}\n   */\n  const isDark: ComputedRef<boolean> = computed(() => get(state) === ThemeMode.dark);\n\n  /**\n   * current theme based on light or dark mode\n   * @type {ComputedRef<ThemeData>}\n   */\n  const theme: ComputedRef<ThemeData> = computed(() => {\n    if (get(isLight))\n      return get(config).light;\n\n    return get(config).dark;\n  });\n\n  /**\n   * switch theme through dark/light/auto modes\n   * @param {ThemeMode} mode\n   */\n  const switchThemeScheme = (mode: ThemeMode): void => {\n    set(store, mode || ThemeMode.auto);\n  };\n\n  /**\n   * toggle between auto|light|dark\n   */\n  const toggleThemeMode = (): void => {\n    if (get(isAutoControlled))\n      switchThemeScheme(ThemeMode.light);\n    else if (get(isLight))\n      switchThemeScheme(ThemeMode.dark);\n    else if (get(isDark))\n      switchThemeScheme(ThemeMode.auto);\n  };\n\n  /**\n   * sets the configuration for the theme\n   * @param {ThemeConfig} newConfig\n   */\n  const setThemeConfig = (newConfig: ThemeConfig): void => {\n    set(config, newConfig);\n  };\n\n  /**\n   * theme initializer, must be called once from the app's entry\n   * @param {InitThemeOptions} options\n   */\n  const init = (options: InitThemeOptions): void => {\n    switchThemeScheme(options.mode ?? ThemeMode.auto);\n    setThemeConfig(options.config ?? { ...defaultTheme });\n\n    if (typeof window !== 'undefined') {\n      watch([isLight, theme], ([isLight, theme]) => {\n        const styleVariables = new Map();\n\n        // Compute context variables\n        Object.entries(theme).forEach(([context, contextObject]: [string, ColorIntensity]) => {\n          styleVariables.set(`--rui-${context}-darker`, contextObject.darker);\n          styleVariables.set(`--rui-${context}-lighter`, contextObject.lighter);\n          styleVariables.set(`--rui-${context}-main`, contextObject.DEFAULT);\n        });\n\n        // Determine the theme mode\n        const state = isLight ? ThemeMode.light : ThemeMode.dark;\n\n        // Add text color variables\n        styleVariables.set('--rui-text-disabled', `var(--rui-${state}-text-disabled)`);\n        styleVariables.set('--rui-text-primary', `var(--rui-${state}-text-primary)`);\n        styleVariables.set('--rui-text-secondary', `var(--rui-${state}-text-secondary)`);\n\n        // Apply all style variables in one operation\n        const rootStyle = document.documentElement.style;\n        styleVariables.forEach((value, variableName) => {\n          rootStyle.setProperty(variableName, value);\n        });\n      }, { immediate: true });\n    }\n  };\n\n  return {\n    config,\n    init,\n    isAutoControlled,\n    isDark,\n    isLight,\n    setThemeConfig,\n    state,\n    store,\n    switchThemeScheme,\n    theme,\n    toggleThemeMode,\n  };\n});\n"],"names":["isLight","theme","state"],"mappings":";;;;AAYA,MAAM,SAA2B,IAAI,EAAE,GAAG,cAAc;AAMjD,MAAM,gBAAgB,uBAA2C,MAAM;AAC5E,QAAM,EAAE,OAAO,MAAA,IAAU,aAAwB;AAAA,IAC/C,UAAU,MAAM,gBAAgB;AAC9B,qBAAe,IAAI;AACnB,eAAS,gBAAgB,QAAQ,QAAQ;AAAA,IAC3C;AAAA,EAAA,CACD;AAMD,QAAM,mBAAyC,SAAS,MAAM,IAAI,KAAK,MAAM,UAAU,IAAI;AAM3F,QAAM,UAAgC,SAAS,MAAM,IAAI,KAAK,MAAM,UAAU,KAAK;AAMnF,QAAM,SAA+B,SAAS,MAAM,IAAI,KAAK,MAAM,UAAU,IAAI;AAMjF,QAAM,QAAgC,SAAS,MAAM;AACnD,QAAI,IAAI,OAAO;AACb,aAAO,IAAI,MAAM,EAAE;AAErB,WAAO,IAAI,MAAM,EAAE;AAAA,EACrB,CAAC;AAMD,QAAM,oBAAoB,CAAC,SAA0B;AACnD,QAAI,OAAO,QAAQ,UAAU,IAAI;AAAA,EACnC;AAKA,QAAM,kBAAkB,MAAY;AAClC,QAAI,IAAI,gBAAgB;AACtB,wBAAkB,UAAU,KAAK;AAAA,aAC1B,IAAI,OAAO;AAClB,wBAAkB,UAAU,IAAI;AAAA,aACzB,IAAI,MAAM;AACjB,wBAAkB,UAAU,IAAI;AAAA,EACpC;AAMA,QAAM,iBAAiB,CAAC,cAAiC;AACvD,QAAI,QAAQ,SAAS;AAAA,EACvB;AAMA,QAAM,OAAO,CAAC,YAAoC;AAChD,sBAAkB,QAAQ,QAAQ,UAAU,IAAI;AAChD,mBAAe,QAAQ,UAAU,EAAE,GAAG,cAAc;AAEpD,QAAI,OAAO,WAAW,aAAa;AACjC,YAAM,CAAC,SAAS,KAAK,GAAG,CAAC,CAACA,UAASC,MAAK,MAAM;AAC5C,cAAM,qCAAqB,IAAA;AAG3B,eAAO,QAAQA,MAAK,EAAE,QAAQ,CAAC,CAAC,SAAS,aAAa,MAAgC;AACpF,yBAAe,IAAI,SAAS,OAAO,WAAW,cAAc,MAAM;AAClE,yBAAe,IAAI,SAAS,OAAO,YAAY,cAAc,OAAO;AACpE,yBAAe,IAAI,SAAS,OAAO,SAAS,cAAc,OAAO;AAAA,QACnE,CAAC;AAGD,cAAMC,SAAQF,WAAU,UAAU,QAAQ,UAAU;AAGpD,uBAAe,IAAI,uBAAuB,aAAaE,MAAK,iBAAiB;AAC7E,uBAAe,IAAI,sBAAsB,aAAaA,MAAK,gBAAgB;AAC3E,uBAAe,IAAI,wBAAwB,aAAaA,MAAK,kBAAkB;AAG/E,cAAM,YAAY,SAAS,gBAAgB;AAC3C,uBAAe,QAAQ,CAAC,OAAO,iBAAiB;AAC9C,oBAAU,YAAY,cAAc,KAAK;AAAA,QAC3C,CAAC;AAAA,MACH,GAAG,EAAE,WAAW,MAAM;AAAA,IACxB;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ,CAAC;"}
+{"version":3,"file":"theme.js","sources":["../../src/composables/theme.ts"],"sourcesContent":["import { getSSRHandler, useColorMode } from '@vueuse/core';\nimport { computed, type ComputedRef, type Ref, ref } from 'vue';\nimport {\n  type ColorIntensity,\n  defaultTheme,\n  type InitThemeOptions,\n  type ThemeConfig,\n  type ThemeContent,\n  type ThemeData,\n  ThemeMode,\n} from '@/types/theme';\n\nconst config: Ref<ThemeConfig> = ref({ ...defaultTheme });\n\n/**\n * Theme manager\n * @returns {ThemeContent}\n */\nexport const useRotkiTheme = createSharedComposable<() => ThemeContent>(() => {\n  const updateHTMLAttrs = getSSRHandler(\n    'updateHTMLAttrs',\n    (selector, attribute, value) => {\n      const el = typeof selector === 'string' ? window?.document.querySelector(selector) : null;\n      if (!el)\n        return;\n      el.setAttribute(attribute, value);\n    },\n  );\n\n  const { state, store } = useColorMode<ThemeMode>({\n    onChanged(mode, defaultHandler) {\n      defaultHandler(mode);\n      updateHTMLAttrs('html', 'data-theme', mode);\n    },\n  });\n\n  /**\n   * whether the current theme is controlled by system or user\n   * @type {ComputedRef<boolean>}\n   */\n  const isAutoControlled: ComputedRef<boolean> = computed(() => get(store) === ThemeMode.auto);\n\n  /**\n   * truthy for light theme\n   * @type {ComputedRef<boolean>}\n   */\n  const isLight: ComputedRef<boolean> = computed(() => get(state) === ThemeMode.light);\n\n  /**\n   * truthy for dark theme\n   * @type {ComputedRef<boolean>}\n   */\n  const isDark: ComputedRef<boolean> = computed(() => get(state) === ThemeMode.dark);\n\n  /**\n   * current theme based on light or dark mode\n   * @type {ComputedRef<ThemeData>}\n   */\n  const theme: ComputedRef<ThemeData> = computed(() => {\n    if (get(isLight))\n      return get(config).light;\n\n    return get(config).dark;\n  });\n\n  /**\n   * switch theme through dark/light/auto modes\n   * @param {ThemeMode} mode\n   */\n  const switchThemeScheme = (mode: ThemeMode): void => {\n    set(store, mode || ThemeMode.auto);\n  };\n\n  /**\n   * toggle between auto|light|dark\n   */\n  const toggleThemeMode = (): void => {\n    if (get(isAutoControlled))\n      switchThemeScheme(ThemeMode.light);\n    else if (get(isLight))\n      switchThemeScheme(ThemeMode.dark);\n    else if (get(isDark))\n      switchThemeScheme(ThemeMode.auto);\n  };\n\n  /**\n   * sets the configuration for the theme\n   * @param {ThemeConfig} newConfig\n   */\n  const setThemeConfig = (newConfig: ThemeConfig): void => {\n    set(config, newConfig);\n  };\n\n  /**\n   * theme initializer, must be called once from the app's entry\n   * @param {InitThemeOptions} options\n   */\n  const init = (options: InitThemeOptions): void => {\n    switchThemeScheme(options.mode ?? ThemeMode.auto);\n    setThemeConfig(options.config ?? { ...defaultTheme });\n\n    if (typeof window !== 'undefined') {\n      watch([isLight, theme], ([isLight, theme]) => {\n        const styleVariables = new Map();\n\n        // Compute context variables\n        Object.entries(theme).forEach(([context, contextObject]: [string, ColorIntensity]) => {\n          styleVariables.set(`--rui-${context}-darker`, contextObject.darker);\n          styleVariables.set(`--rui-${context}-lighter`, contextObject.lighter);\n          styleVariables.set(`--rui-${context}-main`, contextObject.DEFAULT);\n        });\n\n        // Determine the theme mode\n        const state = isLight ? ThemeMode.light : ThemeMode.dark;\n\n        // Add text color variables\n        styleVariables.set('--rui-text-disabled', `var(--rui-${state}-text-disabled)`);\n        styleVariables.set('--rui-text-primary', `var(--rui-${state}-text-primary)`);\n        styleVariables.set('--rui-text-secondary', `var(--rui-${state}-text-secondary)`);\n\n        // Apply all style variables in one operation\n        const rootStyle = document.documentElement.style;\n        styleVariables.forEach((value, variableName) => {\n          rootStyle.setProperty(variableName, value);\n        });\n      }, { immediate: true });\n    }\n  };\n\n  return {\n    config,\n    init,\n    isAutoControlled,\n    isDark,\n    isLight,\n    setThemeConfig,\n    state,\n    store,\n    switchThemeScheme,\n    theme,\n    toggleThemeMode,\n  };\n});\n"],"names":["isLight","theme","state"],"mappings":";;;;AAYA,MAAM,SAA2B,IAAI,EAAE,GAAG,cAAc;AAMjD,MAAM,gBAAgB,uBAA2C,MAAM;AAC5E,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA,CAAC,UAAU,WAAW,UAAU;AAC9B,YAAM,KAAK,OAAO,aAAa,WAAW,QAAQ,SAAS,cAAc,QAAQ,IAAI;AACrF,UAAI,CAAC;AACH;AACF,SAAG,aAAa,WAAW,KAAK;AAAA,IAClC;AAAA,EAAA;AAGF,QAAM,EAAE,OAAO,MAAA,IAAU,aAAwB;AAAA,IAC/C,UAAU,MAAM,gBAAgB;AAC9B,qBAAe,IAAI;AACnB,sBAAgB,QAAQ,cAAc,IAAI;AAAA,IAC5C;AAAA,EAAA,CACD;AAMD,QAAM,mBAAyC,SAAS,MAAM,IAAI,KAAK,MAAM,UAAU,IAAI;AAM3F,QAAM,UAAgC,SAAS,MAAM,IAAI,KAAK,MAAM,UAAU,KAAK;AAMnF,QAAM,SAA+B,SAAS,MAAM,IAAI,KAAK,MAAM,UAAU,IAAI;AAMjF,QAAM,QAAgC,SAAS,MAAM;AACnD,QAAI,IAAI,OAAO;AACb,aAAO,IAAI,MAAM,EAAE;AAErB,WAAO,IAAI,MAAM,EAAE;AAAA,EACrB,CAAC;AAMD,QAAM,oBAAoB,CAAC,SAA0B;AACnD,QAAI,OAAO,QAAQ,UAAU,IAAI;AAAA,EACnC;AAKA,QAAM,kBAAkB,MAAY;AAClC,QAAI,IAAI,gBAAgB;AACtB,wBAAkB,UAAU,KAAK;AAAA,aAC1B,IAAI,OAAO;AAClB,wBAAkB,UAAU,IAAI;AAAA,aACzB,IAAI,MAAM;AACjB,wBAAkB,UAAU,IAAI;AAAA,EACpC;AAMA,QAAM,iBAAiB,CAAC,cAAiC;AACvD,QAAI,QAAQ,SAAS;AAAA,EACvB;AAMA,QAAM,OAAO,CAAC,YAAoC;AAChD,sBAAkB,QAAQ,QAAQ,UAAU,IAAI;AAChD,mBAAe,QAAQ,UAAU,EAAE,GAAG,cAAc;AAEpD,QAAI,OAAO,WAAW,aAAa;AACjC,YAAM,CAAC,SAAS,KAAK,GAAG,CAAC,CAACA,UAASC,MAAK,MAAM;AAC5C,cAAM,qCAAqB,IAAA;AAG3B,eAAO,QAAQA,MAAK,EAAE,QAAQ,CAAC,CAAC,SAAS,aAAa,MAAgC;AACpF,yBAAe,IAAI,SAAS,OAAO,WAAW,cAAc,MAAM;AAClE,yBAAe,IAAI,SAAS,OAAO,YAAY,cAAc,OAAO;AACpE,yBAAe,IAAI,SAAS,OAAO,SAAS,cAAc,OAAO;AAAA,QACnE,CAAC;AAGD,cAAMC,SAAQF,WAAU,UAAU,QAAQ,UAAU;AAGpD,uBAAe,IAAI,uBAAuB,aAAaE,MAAK,iBAAiB;AAC7E,uBAAe,IAAI,sBAAsB,aAAaA,MAAK,gBAAgB;AAC3E,uBAAe,IAAI,wBAAwB,aAAaA,MAAK,kBAAkB;AAG/E,cAAM,YAAY,SAAS,gBAAgB;AAC3C,uBAAe,QAAQ,CAAC,OAAO,iBAAiB;AAC9C,oBAAU,YAAY,cAAc,KAAK;AAAA,QAC3C,CAAC;AAAA,MACH,GAAG,EAAE,WAAW,MAAM;AAAA,IACxB;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ,CAAC;"}

package/dist/style.css

@@ -984,6 +984,9 @@ video {
 .grid {
   display: grid;
 }
+.contents {
+  display: contents;
+}
 .\!hidden {
   display: none !important;
 }
@@ -7594,7 +7597,7 @@ to {
   line-height: 1rem;
 }
 ._wrapper_xauli_2 ._activator_xauli_5._float_xauli_78 ~ ._fieldset_xauli_16 legend:after {
-  content: var(--v85dbc9ec);
+  content: var(--v12e602de);
 }
 ._wrapper_xauli_2 ._activator_xauli_5._float_xauli_78:not(._disabled_xauli_19)._opened_xauli_28 ._label_xauli_45, ._wrapper_xauli_2 ._activator_xauli_5._float_xauli_78:not(._disabled_xauli_19)._opened_xauli_28._with-value_xauli_84 ._label_xauli_45, ._wrapper_xauli_2 ._activator_xauli_5._float_xauli_78:not(._disabled_xauli_19):focus ._label_xauli_45, ._wrapper_xauli_2 ._activator_xauli_5._float_xauli_78:not(._disabled_xauli_19):focus._with-value_xauli_84 ._label_xauli_45, ._wrapper_xauli_2 ._activator_xauli_5._float_xauli_78:not(._disabled_xauli_19):focus-within ._label_xauli_45, ._wrapper_xauli_2 ._activator_xauli_5._float_xauli_78:not(._disabled_xauli_19):focus-within._with-value_xauli_84 ._label_xauli_45{
   --tw-text-opacity: 1;
@@ -11967,7 +11970,7 @@ to {
 .dark ._overlay_xf8dx_5 {
 
     background-color: rgb(0 0 0 / 0.5)
-}._overlay_ze4k4_1 {
+}._overlay_b1dn3_1 {
 
     position: absolute;
 
@@ -11987,7 +11990,7 @@ to {
 
     backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
 }
-._content_ze4k4_5 {
+._content_b1dn3_5 {
 
     position: fixed;
 
@@ -12005,11 +12008,11 @@ to {
 
     transition-property: all;
 
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
 
-    transition-duration: 150ms
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
 }
-._content_ze4k4_5._left_ze4k4_8 {
+._content_b1dn3_5._left_b1dn3_8 {
 
     left: 0px;
 
@@ -12017,7 +12020,7 @@ to {
 
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
-._content_ze4k4_5._right_ze4k4_11 {
+._content_b1dn3_5._right_b1dn3_11 {
 
     right: 0px;
 
@@ -12025,17 +12028,17 @@ to {
 
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
-._content_ze4k4_5._with-overlay_ze4k4_14 {
+._content_b1dn3_5._with-overlay_b1dn3_14 {
 
     z-index: 10000
 }
-._content_ze4k4_5._visible_ze4k4_17 {
+._content_b1dn3_5._visible_b1dn3_17 {
 
     --tw-translate-x: 0px;
 
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
-._content_ze4k4_5._temporary_ze4k4_20._visible_ze4k4_17 {
+._content_b1dn3_5._temporary_b1dn3_20._visible_b1dn3_17 {
 
     --tw-shadow: 0px 3px 5px -1px var(--rui-shadow-primary), 0px 5px 8px var(--rui-shadow-secondary), 0px 1px 14px var(--rui-shadow-tertiary);
 
@@ -12043,21 +12046,21 @@ to {
 
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
-._content_ze4k4_5._mini_ze4k4_23 {
+._content_b1dn3_5._mini_b1dn3_23 {
 
     --tw-translate-x: 0px;
 
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
-._content_ze4k4_5._mini_ze4k4_23:not(._visible_ze4k4_17) {
+._content_b1dn3_5._mini_b1dn3_23:not(._visible_b1dn3_17) {
 
     width: 3.5rem !important
 }
-.dark ._overlay_ze4k4_1 {
+.dark ._overlay_b1dn3_1 {
 
     background-color: rgb(0 0 0 / 0.5)
 }
-.dark ._content_ze4k4_5 {
+.dark ._content_b1dn3_5 {
 
     --tw-bg-opacity: 1;