@rotki/ui-library 2.12.2 → 2.13.0

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 { getNonRootAttrs, getRootAttrs, 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  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          role=\"combobox\"\n          :aria-expanded=\"open\"\n          :aria-disabled=\"disabled || undefined\"\n          :aria-readonly=\"readOnly || undefined\"\n          :aria-required=\"required || undefined\"\n          :aria-busy=\"loading || undefined\"\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              aria-autocomplete=\"list\"\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            data-id=\"clear\"\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              :aria-selected=\"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              data-id=\"no-data\"\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","$attrs","_withCtx","_renderSlot","_createElementVNode","_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 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 {\n  type KeyOfType,\n  useDropdownMenu,\n  useDropdownOptionProperty,\n} from '@/composables/dropdown-menu';\nimport {\n  useAutoCompleteFocus,\n  useAutoCompleteKeyboardNavigation,\n  useAutoCompleteSearch,\n  useAutoCompleteValue,\n} from '@/composables/forms/auto-complete';\nimport { useLabelWithQuote } from '@/composables/forms/use-label-with-quote';\nimport { getNonRootAttrs, getRootAttrs, getTextToken } from '@/utils/helpers';\nimport { isEqual } from '@/utils/is-equal';\n\nexport type AutoCompleteModelValue<TValue> =\n  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  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 {\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,\n  labelClass,\n  menuClass,\n  variant = 'default',\n  hint,\n  keyAttr,\n  textAttr,\n  itemHeight,\n  errorMessages = [],\n  successMessages = [],\n  autoSelectFirst = false,\n  noFilter = false,\n  hideNoData = false,\n  noDataText = 'No data available',\n  filter,\n  hideSelected = false,\n  placeholder = '',\n  returnObject = false,\n  customValue = false,\n  hideCustomValue = false,\n  required = false,\n  hideSearchInput = false,\n  hideSelectionWrapper = false,\n} = defineProps<AutoCompleteProps<TValue, TItem>>();\n\nconst slots = defineSlots<{\n  'activator'?: (props: {\n    disabled: boolean;\n    value: TItem[];\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[] }) => any;\n  'selection.prepend'?: (props: { index: number; item: TItem }) => any;\n  'selection'?: (props: { index: number; item: TItem; chipAttrs?: Record<string, unknown> }) => 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 { getText, getIdentifier } = useDropdownOptionProperty<TValue, TItem>({\n  keyAttr,\n  textAttr,\n});\n\nconst textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst menuRef = useTemplateRef<HTMLDivElement>('menuRef');\nconst menuWrapperRef = useTemplateRef<HTMLDivElement>('menuWrapperRef');\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\nconst { focused: activatorFocused } = useFocus(activator);\n\nconst {\n  internalSearch,\n  filteredOptions,\n  justOpened,\n  updateInternalSearch,\n  textValueToProperValue,\n} = useAutoCompleteSearch<TItem>(\n  toRef(() => options),\n  searchInputModel,\n  {\n    keyAttr: toRef(() => keyAttr),\n    textAttr: toRef(() => textAttr),\n    noFilter: toRef(() => noFilter),\n    filter: toRef(() => filter),\n    customValue: toRef(() => customValue),\n    hideCustomValue: toRef(() => hideCustomValue),\n    returnObject: toRef(() => returnObject),\n  },\n);\n\nconst isOpen = ref<boolean>(false);\n\n// Calculate multiple from modelValue directly to avoid circular dependency\nconst multiple = computed<boolean>(() => Array.isArray(get(modelValue)));\n\nconst shouldApplyValueAsSearch = computed<boolean>(\n  () => !(slots.selection || get(multiple) || chips),\n);\n\nconst { value, setSelected } = useAutoCompleteValue<AutoCompleteModelValue<TValue>, TItem>(\n  modelValue,\n  toRef(() => options),\n  {\n    keyAttr: toRef(() => keyAttr),\n    returnObject: toRef(() => returnObject),\n    customValue: toRef(() => customValue),\n  },\n  {\n    getIdentifier,\n    getText,\n    textValueToProperValue,\n    shouldApplyValueAsSearch,\n    isOpen,\n    multiple,\n    updateInternalSearch,\n  },\n);\n\nconst resolvedItemHeight = itemHeight ?? (dense ? 30 : 48);\n\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  menuWidth,\n  isActiveItem,\n  itemIndexInValue,\n  highlightedIndex,\n  moveHighlight,\n  applyHighlighted,\n  optionsWithSelectedHidden,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: resolvedItemHeight,\n  keyAttr,\n  textAttr,\n  options: filteredOptions,\n  dense: toRef(() => dense),\n  value,\n  menuRef,\n  setValue,\n  autoSelectFirst,\n  hideSelected,\n  isOpen,\n  getText,\n  getIdentifier,\n});\n\nconst {\n  focusedValueIndex,\n  moveSelectedValueHighlight,\n  onEnter,\n  onInputDeletePressed,\n  onTab,\n  setValueFocus,\n} = useAutoCompleteKeyboardNavigation<TItem>(\n  {\n    chips: toRef(() => chips),\n    customValue: toRef(() => customValue),\n    multiple,\n  },\n  {\n    activator,\n    applyHighlighted,\n    clear,\n    filteredOptions,\n    getText,\n    highlightedIndex,\n    internalSearch,\n    isOpen,\n    removeValue: (item: TItem): void => { setValue(item); },\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(\n  {\n    customValue: toRef(() => customValue),\n    disabled: toRef(() => disabled),\n    shouldApplyValueAsSearch,\n  },\n  {\n    activatorFocused,\n    activatorFocusedWithin,\n    focusedValueIndex,\n    internalSearch,\n    isOpen,\n    justOpened,\n    menuWrapperFocusedWithin,\n    searchInputFocused,\n    setSearchAsValue,\n    textInput,\n    updateInternalSearch,\n  },\n);\n\nconst menuMinHeight = computed<number>(\n  () => Math.min(5, get(optionsWithSelectedHidden).length) * resolvedItemHeight,\n);\n\nconst valueSet = computed<boolean>(() => get(value).length > 0);\n\nconst labelWithQuote = useLabelWithQuote(() => label, () => required);\n\nconst usedPlaceholder = computed<string>(() => {\n  if (get(searchInputFocused)) {\n    return placeholder;\n  }\n  return '';\n});\n\nconst outlined = computed<boolean>(() => variant === 'outlined');\n\nconst float = computed<boolean>(() => (get(isOpen) || get(valueSet) || get(searchInputFocused)) && get(outlined));\n\nconst virtualContainerProps = computed<{ style: Record<string, string>; ref: (el: any) => void }>(() => ({\n  style: containerProps.style as any,\n  ref: containerProps.ref as any,\n}));\n\nfunction updateSearchInput(event: Event): void {\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n\n  const value = 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    else {\n      newValue.splice(indexInValue, 1);\n    }\n    set(value, newValue);\n  }\n  else {\n    if (get(shouldApplyValueAsSearch))\n      updateInternalSearch(getText(val));\n    else 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(): void {\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): Record<string, unknown> {\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        event.stopPropagation();\n        event.preventDefault();\n        setValue(item);\n      }\n    },\n    'onClick': (e: MouseEvent): void => {\n      e.stopPropagation();\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\nfunction arrowClicked(event: MouseEvent): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n\n// Optimize options watcher with shallow comparison first\nwatch(() => options, (curr, old) => {\n  if (curr === old || 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\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          role=\"combobox\"\n          :aria-expanded=\"open\"\n          :aria-disabled=\"disabled || undefined\"\n          :aria-readonly=\"readOnly || undefined\"\n          :aria-required=\"required || undefined\"\n          :aria-busy=\"loading || undefined\"\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=\"\n                  multiple\n                    || (!searchInputFocused && (slots['selection.prepend'] || slots.selection))\n                \"\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              aria-autocomplete=\"list\"\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            data-id=\"clear\"\n            class=\"group-hover:!visible\"\n            :class=\"[\n              $style.clear,\n              focusAnyFocused && '!visible',\n              {\n                'mr-2': !dense,\n              },\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              :key=\"getIdentifier(item)?.toString()\"\n              :active=\"isActiveItem(item)\"\n              :aria-selected=\"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              data-id=\"no-data\"\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","_useSlots","value","_openBlock","_createBlock","_mergeProps","_unref","$style","$attrs","_withCtx","_renderSlot","_createElementVNode","_withKeys","_createElementBlock","_normalizeClass","_normalizeProps","_guardReactiveProps","_Fragment","_renderList","_createTextVNode","_toDisplayString","_withModifiers","_createVNode","_normalizeStyle"],"mappings":"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"}

package/dist/components/forms/checkbox/RuiCheckbox.vue.d.ts

@@ -1,7 +1,5 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
 export interface Props {
-    modelValue?: boolean;
-    indeterminate?: boolean;
     disabled?: boolean;
     color?: ContextColorsType;
     size?: 'sm' | 'lg';
@@ -12,29 +10,22 @@ export interface Props {
     hideDetails?: boolean;
     required?: boolean;
 }
-declare var __VLS_16: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_16) => any;
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    default?: () => any;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+    'indeterminate'?: boolean;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:modelValue": (modelValue: boolean) => any;
-    "update:indeterminate": (indeterminate: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    "onUpdate:modelValue"?: ((modelValue: boolean) => any) | undefined;
-    "onUpdate:indeterminate"?: ((indeterminate: boolean) => any) | undefined;
-}>, {
-    size: "sm" | "lg";
-    label: string;
-    indeterminate: boolean;
-    color: ContextColorsType;
-    disabled: boolean;
-    modelValue: boolean;
-    errorMessages: string | string[];
-    successMessages: string | string[];
-    hint: string;
-    required: boolean;
-    hideDetails: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+    "update:indeterminate": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onUpdate:indeterminate"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/forms/checkbox/RuiCheckbox.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent, toRefs, ref, computed, watch, openBlock, createElementBlock, normalizeProps, guardReactiveProps, unref, createElementVNode, mergeProps, withDirectives, isRef, vModelCheckbox, normalizeClass, createBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
-import { get, objectPick } from "@vueuse/shared";
+import { defineComponent, useModel, useTemplateRef, toRef, computed, watch, openBlock, createElementBlock, normalizeProps, guardReactiveProps, unref, createElementVNode, mergeProps, withDirectives, isRef, vModelCheckbox, normalizeClass, createBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, mergeModels } from "vue";
+import { set, get, objectPick } from "@vueuse/shared";
 import _sfc_main$1 from "../../helpers/RuiFormTextDetail.vue.js";
 import RuiIcon from "../../icons/RuiIcon.vue.js";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
@@ -16,53 +16,53 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     inheritAttrs: false
   },
   __name: "RuiCheckbox",
-  props: {
-    modelValue: { type: Boolean, default: false },
-    indeterminate: { type: Boolean, default: false },
+  props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
-    color: { default: void 0 },
-    size: { default: void 0 },
+    color: { default: () => void 0 },
+    size: { default: () => void 0 },
     label: { default: "" },
     hint: { default: "" },
     errorMessages: { default: () => [] },
     successMessages: { default: () => [] },
     hideDetails: { type: Boolean, default: false },
     required: { type: Boolean, default: false }
-  },
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {},
+    "indeterminate": { type: Boolean, ...{ default: false } },
+    "indeterminateModifiers": {}
+  }),
   emits: ["update:modelValue", "update:indeterminate"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { size, modelValue, indeterminate, errorMessages, successMessages } = toRefs(props);
-    const el = ref(null);
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
+    const indeterminate = useModel(__props, "indeterminate");
+    const el = useTemplateRef("el");
+    const { hasError, hasSuccess } = useFormTextDetail(
+      toRef(() => __props.errorMessages),
+      toRef(() => __props.successMessages)
+    );
     const internalModelValue = computed({
       get: () => get(modelValue),
       set: (checked) => {
         if (checked)
-          emit("update:indeterminate", false);
-        emit("update:modelValue", checked);
+          set(indeterminate, false);
+        set(modelValue, checked);
       }
     });
     const iconSize = computed(() => {
-      const sizeVal = get(size);
-      if (sizeVal === "lg")
+      if (__props.size === "lg")
         return 28;
-      if (sizeVal === "sm")
+      if (__props.size === "sm")
         return 20;
       return 24;
     });
-    const { hasError, hasSuccess } = useFormTextDetail(
-      errorMessages,
-      successMessages
-    );
     watch(indeterminate, (val) => {
       const input = get(el);
       if (input) {
         input.checked = !val;
         if (val)
           input.value = "off";
-        else
-          input.value = "on";
+        else input.value = "on";
       }
     });
     watch(internalModelValue, (val) => {
@@ -75,7 +75,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createElementVNode("label", mergeProps({
           class: [
             _ctx.$style.wrapper,
-            _ctx.$style[unref(size) ?? ""],
+            _ctx.$style[__props.size ?? ""],
             {
               [_ctx.$style.disabled]: __props.disabled,
               [_ctx.$style["with-error"]]: unref(hasError)
@@ -99,20 +99,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: normalizeClass([
               _ctx.$style.checkbox,
               _ctx.$style[__props.color ?? ""],
-              _ctx.$style[unref(size) ?? ""],
+              _ctx.$style[__props.size ?? ""],
               {
-                [_ctx.$style.checked]: unref(modelValue) || unref(indeterminate),
+                [_ctx.$style.checked]: modelValue.value || indeterminate.value,
                 [_ctx.$style.disabled]: __props.disabled,
                 [_ctx.$style["with-error"]]: unref(hasError),
                 [_ctx.$style["with-success"]]: unref(hasSuccess) && !unref(hasError)
               }
             ])
           }, [
-            unref(indeterminate) ? (openBlock(), createBlock(RuiIcon, {
+            indeterminate.value ? (openBlock(), createBlock(RuiIcon, {
               key: 0,
               name: "lu-checkbox-indeterminate-fill",
               size: unref(iconSize)
-            }, null, 8, ["size"])) : unref(modelValue) ? (openBlock(), createBlock(RuiIcon, {
+            }, null, 8, ["size"])) : modelValue.value ? (openBlock(), createBlock(RuiIcon, {
               key: 1,
               name: "lu-checkbox-fill",
               size: unref(iconSize)
@@ -134,8 +134,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ], 16, _hoisted_1),
         !__props.hideDetails ? (openBlock(), createBlock(_sfc_main$1, {
           key: 0,
-          "error-messages": unref(errorMessages),
-          "success-messages": unref(successMessages),
+          "error-messages": __props.errorMessages,
+          "success-messages": __props.successMessages,
           hint: __props.hint
         }, null, 8, ["error-messages", "success-messages", "hint"])) : createCommentVNode("", true)
       ], 16);

package/dist/components/forms/checkbox/RuiCheckbox.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCheckbox.vue2.js","sources":["../../../../src/components/forms/checkbox/RuiCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { objectPick } from '@vueuse/shared';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props {\n  modelValue?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckbox',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: false,\n  indeterminate: false,\n  disabled: false,\n  color: undefined,\n  size: undefined,\n  label: '',\n  hint: '',\n  errorMessages: () => [],\n  successMessages: () => [],\n  hideDetails: false,\n  required: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', modelValue: boolean): void;\n  (e: 'update:indeterminate', indeterminate: boolean): void;\n}>();\n\nconst { size, modelValue, indeterminate, errorMessages, successMessages } = toRefs(props);\n\nconst el = ref<HTMLInputElement | null>(null);\n\nconst internalModelValue = computed<boolean>({\n  get: () => get(modelValue),\n  set: (checked: boolean) => {\n    if (checked)\n      emit('update:indeterminate', false);\n    emit('update:modelValue', checked);\n  },\n});\n\nconst iconSize = computed<number>(() => {\n  const sizeVal = get(size);\n  if (sizeVal === 'lg')\n    return 28;\n\n  if (sizeVal === 'sm')\n    return 20;\n\n  return 24;\n});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  errorMessages,\n  successMessages,\n);\n\nwatch(indeterminate, (val) => {\n  const input = get(el);\n  if (input) {\n    input.checked = !val;\n    if (val)\n      input.value = 'off';\n    else\n      input.value = 'on';\n  }\n});\n\nwatch(internalModelValue, (val) => {\n  const input = get(el);\n  if (input && input.checked !== val)\n    input.checked = val;\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"[\n        $style.wrapper,\n        $style[size ?? ''],\n        {\n          [$style.disabled]: disabled,\n          [$style['with-error']]: hasError,\n        },\n      ]\"\n      v-bind=\"objectPick($attrs, ['onClick'])\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <input\n        ref=\"el\"\n        v-model=\"internalModelValue\"\n        type=\"checkbox\"\n        :class=\"$style.input\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"hasError\"\n        v-bind=\"getNonRootAttrs($attrs, ['onInput', 'onClick'])\"\n      />\n      <span\n        :class=\"[\n          $style.checkbox,\n          $style[color ?? ''],\n          $style[size ?? ''],\n          {\n            [$style.checked]: modelValue || indeterminate,\n            [$style.disabled]: disabled,\n            [$style['with-error']]: hasError,\n            [$style['with-success']]: hasSuccess && !hasError,\n          },\n        ]\"\n      >\n        <RuiIcon\n          v-if=\"indeterminate\"\n          name=\"lu-checkbox-indeterminate-fill\"\n          :size=\"iconSize\"\n        />\n        <RuiIcon\n          v-else-if=\"modelValue\"\n          name=\"lu-checkbox-fill\"\n          :size=\"iconSize\"\n        />\n        <RuiIcon\n          v-else\n          name=\"lu-checkbox-blank\"\n          :size=\"iconSize\"\n        />\n      </span>\n      <span\n        v-if=\"label || $slots.default\"\n        :class=\"$style.label\"\n        class=\"text-body-1\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </span>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n.wrapper {\n  @apply relative flex items-start cursor-pointer -ml-[9px];\n\n  &.disabled {\n    @apply cursor-not-allowed;\n\n    .checkbox {\n      @apply opacity-50;\n\n      &:before {\n        content: none !important;\n      }\n    }\n\n    .label {\n      @apply text-rui-text-disabled;\n    }\n  }\n\n  .input {\n    @apply appearance-none w-[1px] h-[1px] absolute z-[2] outline-none select-none;\n\n    &:focus {\n      + .checkbox {\n        &:before {\n          @apply opacity-15;\n        }\n      }\n    }\n  }\n\n  .checkbox {\n    @apply relative text-rui-text-secondary p-[9px];\n\n    &:before {\n      content: '';\n      @apply absolute top-1/2 left-1/2 block h-[42px] w-[42px] -translate-y-1/2 -translate-x-1/2 rounded-full opacity-0 transition-opacity;\n      @apply bg-black dark:bg-white;\n    }\n\n    &.with-error {\n      @apply text-rui-error #{!important};\n    }\n\n    &.with-success {\n      @apply text-rui-success #{!important};\n    }\n\n    &:hover {\n      &:before {\n        @apply opacity-5;\n      }\n    }\n\n    &:active {\n      &:before {\n        @apply opacity-30;\n      }\n    }\n\n    &.lg {\n      &:before {\n        @apply h-[46px] w-[46px];\n      }\n    }\n\n    &.sm {\n      &:before {\n        @apply h-[38px] w-[38px];\n      }\n    }\n\n    @each $color in c.$context-colors {\n      &.#{$color} {\n        @apply before:bg-rui-#{$color};\n        &.checked {\n          @apply text-rui-#{$color};\n        }\n      }\n    }\n  }\n\n  .label {\n    @apply flex-1 text-rui-text;\n\n    &:not(:empty) {\n      @apply mt-[9px] mb-1;\n    }\n  }\n\n  &.sm {\n    .label {\n      &:not(:empty) {\n        @apply mt-[7px];\n      }\n    }\n  }\n\n  &.lg {\n    .label {\n      &:not(:empty) {\n        @apply mt-[11px];\n      }\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_mergeProps","$style","_withDirectives","_normalizeClass","_createBlock","$slots","_renderSlot","RuiFormTextDetail"],"mappings":"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"}
+{"version":3,"file":"RuiCheckbox.vue2.js","sources":["../../../../src/components/forms/checkbox/RuiCheckbox.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { objectPick } from '@vueuse/shared';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props {\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCheckbox',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst indeterminate = defineModel<boolean>('indeterminate', { default: false });\n\nconst {\n  disabled = false,\n  color = undefined,\n  size = undefined,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  required = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst el = useTemplateRef<HTMLInputElement>('el');\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  toRef(() => errorMessages),\n  toRef(() => successMessages),\n);\n\nconst internalModelValue = computed<boolean>({\n  get: () => get(modelValue),\n  set: (checked: boolean) => {\n    if (checked)\n      set(indeterminate, false);\n    set(modelValue, checked);\n  },\n});\n\nconst iconSize = computed<number>(() => {\n  if (size === 'lg')\n    return 28;\n\n  if (size === 'sm')\n    return 20;\n\n  return 24;\n});\n\nwatch(indeterminate, (val) => {\n  const input = get(el);\n  if (input) {\n    input.checked = !val;\n    if (val)\n      input.value = 'off';\n    else input.value = 'on';\n  }\n});\n\nwatch(internalModelValue, (val) => {\n  const input = get(el);\n  if (input && input.checked !== val)\n    input.checked = val;\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"[\n        $style.wrapper,\n        $style[size ?? ''],\n        {\n          [$style.disabled]: disabled,\n          [$style['with-error']]: hasError,\n        },\n      ]\"\n      v-bind=\"objectPick($attrs, ['onClick'])\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <input\n        ref=\"el\"\n        v-model=\"internalModelValue\"\n        type=\"checkbox\"\n        :class=\"$style.input\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"hasError\"\n        v-bind=\"getNonRootAttrs($attrs, ['onInput', 'onClick'])\"\n      />\n      <span\n        :class=\"[\n          $style.checkbox,\n          $style[color ?? ''],\n          $style[size ?? ''],\n          {\n            [$style.checked]: modelValue || indeterminate,\n            [$style.disabled]: disabled,\n            [$style['with-error']]: hasError,\n            [$style['with-success']]: hasSuccess && !hasError,\n          },\n        ]\"\n      >\n        <RuiIcon\n          v-if=\"indeterminate\"\n          name=\"lu-checkbox-indeterminate-fill\"\n          :size=\"iconSize\"\n        />\n        <RuiIcon\n          v-else-if=\"modelValue\"\n          name=\"lu-checkbox-fill\"\n          :size=\"iconSize\"\n        />\n        <RuiIcon\n          v-else\n          name=\"lu-checkbox-blank\"\n          :size=\"iconSize\"\n        />\n      </span>\n      <span\n        v-if=\"label || $slots.default\"\n        :class=\"$style.label\"\n        class=\"text-body-1\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </span>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n.wrapper {\n  @apply relative flex items-start cursor-pointer -ml-[9px];\n\n  &.disabled {\n    @apply cursor-not-allowed;\n\n    .checkbox {\n      @apply opacity-50;\n\n      &:before {\n        content: none !important;\n      }\n    }\n\n    .label {\n      @apply text-rui-text-disabled;\n    }\n  }\n\n  .input {\n    @apply appearance-none w-[1px] h-[1px] absolute z-[2] outline-none select-none;\n\n    &:focus {\n      + .checkbox {\n        &:before {\n          @apply opacity-15;\n        }\n      }\n    }\n  }\n\n  .checkbox {\n    @apply relative text-rui-text-secondary p-[9px];\n\n    &:before {\n      content: '';\n      @apply absolute top-1/2 left-1/2 block h-[42px] w-[42px] -translate-y-1/2 -translate-x-1/2 rounded-full opacity-0 transition-opacity;\n      @apply bg-black dark:bg-white;\n    }\n\n    &.with-error {\n      @apply text-rui-error #{!important};\n    }\n\n    &.with-success {\n      @apply text-rui-success #{!important};\n    }\n\n    &:hover {\n      &:before {\n        @apply opacity-5;\n      }\n    }\n\n    &:active {\n      &:before {\n        @apply opacity-30;\n      }\n    }\n\n    &.lg {\n      &:before {\n        @apply h-[46px] w-[46px];\n      }\n    }\n\n    &.sm {\n      &:before {\n        @apply h-[38px] w-[38px];\n      }\n    }\n\n    @each $color in c.$context-colors {\n      &.#{$color} {\n        @apply before:bg-rui-#{$color};\n        &.checked {\n          @apply text-rui-#{$color};\n        }\n      }\n    }\n  }\n\n  .label {\n    @apply flex-1 text-rui-text;\n\n    &:not(:empty) {\n      @apply mt-[9px] mb-1;\n    }\n  }\n\n  &.sm {\n    .label {\n      &:not(:empty) {\n        @apply mt-[7px];\n      }\n    }\n  }\n\n  &.lg {\n    .label {\n      &:not(:empty) {\n        @apply mt-[11px];\n      }\n    }\n  }\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_mergeProps","$style","_withDirectives","_normalizeClass","_createBlock","$slots","_renderSlot","RuiFormTextDetail"],"mappings":"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"}

package/dist/components/forms/radio-button/radio/RuiRadio.vue.d.ts

@@ -22,7 +22,7 @@ declare const __VLS_export: <TValue>(__VLS_props: NonNullable<Awaited<typeof __V
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
-        default?: (props: {}) => any;
+        default?: () => any;
     };
     emit: (event: "update:modelValue", value: TValue | undefined) => void;
 }>) => import("vue").VNode & {

package/dist/components/forms/radio-button/radio/RuiRadio.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, useModel, toRefs, computed, openBlock, createElementBlock, normalizeProps, guardReactiveProps, unref, createElementVNode, normalizeClass, mergeProps, createBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, mergeModels } from "vue";
+import { defineComponent, useModel, toRef, computed, openBlock, createElementBlock, normalizeProps, guardReactiveProps, unref, createElementVNode, normalizeClass, mergeProps, createBlock, renderSlot, createTextVNode, toDisplayString, createCommentVNode, mergeModels } from "vue";
 import _sfc_main$1 from "../../../helpers/RuiFormTextDetail.vue.js";
 import RuiIcon from "../../../icons/RuiIcon.vue.js";
 import { useFormTextDetail } from "../../../../utils/form-text-detail.js";
@@ -19,8 +19,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: /* @__PURE__ */ mergeModels({
     value: {},
     disabled: { type: Boolean, default: false },
-    color: { default: void 0 },
-    size: { default: void 0 },
+    color: {},
+    size: {},
     label: { default: "" },
     hint: { default: "" },
     errorMessages: { default: () => [] },
@@ -34,26 +34,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     const modelValue = useModel(__props, "modelValue");
-    const props = __props;
-    const { value, successMessages, errorMessages } = toRefs(props);
-    function input(event) {
-      const checked = event.target.checked;
-      if (checked)
-        set(modelValue, get(value));
-    }
+    const { hasError, hasSuccess } = useFormTextDetail(
+      toRef(() => __props.errorMessages),
+      toRef(() => __props.successMessages)
+    );
     const iconSize = computed(() => {
-      const size = props.size;
-      if (size === "lg")
+      if (__props.size === "lg")
         return 28;
-      if (size === "sm")
+      if (__props.size === "sm")
         return 20;
       return 24;
     });
-    const selected = computed(() => get(modelValue) === get(value));
-    const { hasError, hasSuccess } = useFormTextDetail(
-      errorMessages,
-      successMessages
-    );
+    const selected = computed(() => get(modelValue) === __props.value);
+    function input(event) {
+      const checked = event.target.checked;
+      if (checked)
+        set(modelValue, __props.value);
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [
         createElementVNode("label", {
@@ -74,7 +71,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled,
             "aria-invalid": unref(hasError)
           }, unref(getNonRootAttrs)(_ctx.$attrs), {
-            value: unref(value),
+            value: __props.value,
             onInput: _cache[0] || (_cache[0] = ($event) => input($event))
           }), null, 16, _hoisted_2),
           createElementVNode("div", {
@@ -111,8 +108,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ], 10, _hoisted_1),
         !__props.hideDetails ? (openBlock(), createBlock(_sfc_main$1, {
           key: 0,
-          "error-messages": unref(errorMessages),
-          "success-messages": unref(successMessages),
+          "error-messages": __props.errorMessages,
+          "success-messages": __props.successMessages,
           hint: __props.hint
         }, null, 8, ["error-messages", "success-messages", "hint"])) : createCommentVNode("", true)
       ], 16);

package/dist/components/forms/radio-button/radio/RuiRadio.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiRadio.vue2.js","sources":["../../../../../src/components/forms/radio-button/radio/RuiRadio.vue"],"sourcesContent":["<script lang=\"ts\" setup generic='TValue'>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface RadioProps<TValue> {\n  value: TValue;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiRadio',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue>({ required: false });\n\nconst props = withDefaults(defineProps<RadioProps<TValue>>(), {\n  disabled: false,\n  color: undefined,\n  size: undefined,\n  label: '',\n  hint: '',\n  errorMessages: () => [],\n  successMessages: () => [],\n  hideDetails: false,\n  required: false,\n});\n\nconst { value, successMessages, errorMessages }\n  = toRefs(props);\n\nfunction input(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n  if (checked)\n    set(modelValue, get(value));\n}\n\nconst iconSize: ComputedRef<number> = computed(() => {\n  const size = props.size;\n  if (size === 'lg')\n    return 28;\n\n  if (size === 'sm')\n    return 20;\n\n  return 24;\n});\n\nconst selected = computed(() => get(modelValue) === get(value));\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  errorMessages,\n  successMessages,\n);\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"[\n        $style.wrapper,\n        $style[size ?? ''],\n        {\n          [$style.disabled]: disabled,\n          [$style['with-error']]: hasError,\n        },\n      ]\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <input\n        :checked=\"selected\"\n        type=\"radio\"\n        :class=\"$style.input\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"hasError\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        :value=\"value\"\n        @input=\"input($event)\"\n      />\n      <div\n        :class=\"[\n          $style.radio,\n          $style[color ?? ''],\n          $style[size ?? ''],\n          {\n            [$style.checked]: selected,\n            [$style.disabled]: disabled,\n            [$style['with-error']]: hasError,\n            [$style['with-success']]: hasSuccess && !hasError,\n          },\n        ]\"\n      >\n        <RuiIcon\n          v-if=\"selected\"\n          name=\"lu-radio-button-fill\"\n          :size=\"iconSize\"\n        />\n        <RuiIcon\n          v-else\n          name=\"lu-checkbox-blank-circle\"\n          :size=\"iconSize\"\n        />\n      </div>\n      <div\n        :class=\"$style.label\"\n        class=\"text-body-1\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </div>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n.wrapper {\n  @apply relative flex items-start cursor-pointer -ml-[9px];\n\n  &.disabled {\n    @apply cursor-not-allowed;\n\n    .radio {\n      @apply opacity-50;\n\n      &:before {\n        content: none !important;\n      }\n    }\n\n    .label {\n      @apply text-rui-text-disabled;\n    }\n  }\n\n  .input {\n    @apply appearance-none w-[1px] h-[1px] absolute z-[2] outline-none select-none;\n\n    &:focus {\n      + .radio {\n        &:before {\n          @apply opacity-15;\n        }\n      }\n    }\n  }\n\n  .radio {\n    @apply relative text-rui-text-secondary p-[9px];\n\n    &:before {\n      content: '';\n      @apply absolute top-1/2 left-1/2 block h-[42px] w-[42px] -translate-y-1/2 -translate-x-1/2 rounded-full opacity-0 transition-opacity;\n      @apply bg-black dark:bg-white;\n    }\n\n    &.with-error {\n      @apply text-rui-error #{!important};\n    }\n\n    &.with-success {\n      @apply text-rui-success #{!important};\n    }\n\n    &:hover {\n      &:before {\n        @apply opacity-5;\n      }\n    }\n\n    &:active {\n      &:before {\n        @apply opacity-30;\n      }\n    }\n\n    &.lg {\n      &:before {\n        @apply h-[46px] w-[46px];\n      }\n    }\n\n    &.sm {\n      &:before {\n        @apply h-[38px] w-[38px];\n      }\n    }\n\n    @each $color in c.$context-colors {\n      &.#{$color} {\n        @apply before:bg-rui-#{$color};\n        &.checked {\n          @apply text-rui-#{$color};\n        }\n      }\n    }\n  }\n\n  .label {\n    @apply flex-1 text-rui-text;\n\n    &:not(:empty) {\n      @apply mt-[9px] mb-1;\n    }\n  }\n\n  &.sm {\n    .label {\n      &:not(:empty) {\n        @apply mt-[7px];\n      }\n    }\n  }\n\n  &.lg {\n    .label {\n      &:not(:empty) {\n        @apply mt-[11px];\n      }\n    }\n  }\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$style","_mergeProps","_createBlock","_renderSlot","RuiFormTextDetail"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,UAAM,aAAaA,SAAmB,SAAA,YAAoB;AAE1D,UAAM,QAAQ;AAYd,UAAM,EAAE,OAAO,iBAAiB,cAAA,IAC5B,OAAO,KAAK;AAEhB,aAAS,MAAM,OAAc;AAC3B,YAAM,UAAW,MAAM,OAA4B;AACnD,UAAI;AACF,YAAI,YAAY,IAAI,KAAK,CAAC;AAAA,IAC9B;AAEA,UAAM,WAAgC,SAAS,MAAM;AACnD,YAAM,OAAO,MAAM;AACnB,UAAI,SAAS;AACX,eAAO;AAET,UAAI,SAAS;AACX,eAAO;AAET,aAAO;AAAA,IACT,CAAC;AAED,UAAM,WAAW,SAAS,MAAM,IAAI,UAAU,MAAM,IAAI,KAAK,CAAC;AAE9D,UAAM,EAAE,UAAU,WAAA,IAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IAAA;;0BAKAC,mBAiEM,OAAAC,eAAAC,mBAjEOC,MAAA,YAAA,EAAaC,KAAAA,MAAM,CAAA,CAAA,GAAA;AAAA,QAC9BC,mBAyDQ,SAAA;AAAA,UAxDL,OAAKC,eAAA;AAAA,YAAYC,KAAAA,OAAO;AAAA,YAAiBA,KAAAA,OAAO,QAAA,QAAI,EAAA;AAAA;eAA8BA,KAAAA,OAAO,QAAQ,GAAG,QAAA;AAAA,cAAqBA,CAAAA,KAAAA,uBAAuBJ,MAAA,QAAA;AAAA,YAAA;AAAA;UAQhJ,cAAYA,MAAA,QAAA,IAAQ,KAAQ;AAAA,QAAA;UAE7BE,mBASE,SATFG,WASE;AAAA,YARC,SAASL,MAAA,QAAA;AAAA,YACV,MAAK;AAAA,YACJ,OAAOI,KAAAA,OAAO;AAAA,YACd,UAAU,QAAA;AAAA,YACV,gBAAcJ,MAAA,QAAA;AAAA,UAAA,GACPA,MAAA,eAAA,EAAgBC,KAAAA,MAAM,GAAA;AAAA,YAC7B,OAAOD,MAAA,KAAA;AAAA,YACP,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,MAAM,MAAM;AAAA,UAAA;UAEtBE,mBAuBM,OAAA;AAAA,YAtBH,OAAKC,eAAA;AAAA,cAAcC,KAAAA,OAAO;AAAA,cAAiBA,KAAAA,OAAO,QAAA,SAAK,EAAA;AAAA,cAAmBA,KAAAA,OAAO,QAAA,QAAI,EAAA;AAAA;iBAAkCA,KAAAA,OAAO,OAAO,GAAGJ,MAAA,QAAA;AAAA,iBAAuBI,KAAAA,OAAO,QAAQ,GAAG,QAAA;AAAA,gBAAuBA,CAAAA,KAAAA,uBAAuBJ,MAAA,QAAA;AAAA,iBAAuBI,KAAAA,OAAM,cAAA,CAAA,GAAmBJ,MAAA,UAAA,KAAU,CAAKA,MAAA,QAAA;AAAA,cAAA;AAAA;;YAavRA,MAAA,QAAA,kBADRM,YAIE,SAAA;AAAA;cAFA,MAAK;AAAA,cACJ,MAAMN,MAAA,QAAA;AAAA,YAAA,uCAETM,YAIE,SAAA;AAAA;cAFA,MAAK;AAAA,cACJ,MAAMN,MAAA,QAAA;AAAA,YAAA;;UAGXE,mBAWM,OAAA;AAAA,YAVH,OAAKC,eAAA,CAAEC,KAAAA,OAAO,OACT,aAAa,CAAA;AAAA,UAAA;YAEnBG,WAAwB,4BAAxB,MAAwB;AAAA,8CAAf,QAAA,KAAK,GAAA,CAAA;AAAA,YAAA;YAEN,QAAA,yBADRV,mBAKO,QALP,YAGC,KAED;;;SAIK,QAAA,4BADTS,YAKEE,aAAA;AAAA;UAHC,kBAAgBR,MAAA,aAAA;AAAA,UAChB,oBAAkBA,MAAA,eAAA;AAAA,UAClB,MAAM,QAAA;AAAA,QAAA;;;;;"}
+{"version":3,"file":"RuiRadio.vue2.js","sources":["../../../../../src/components/forms/radio-button/radio/RuiRadio.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface RadioProps<TValue> {\n  value: TValue;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm' | 'lg';\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiRadio',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue>({ required: false });\n\nconst {\n  value,\n  disabled = false,\n  color,\n  size,\n  label = '',\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  required = false,\n} = defineProps<RadioProps<TValue>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  toRef(() => errorMessages),\n  toRef(() => successMessages),\n);\n\nconst iconSize = computed<number>(() => {\n  if (size === 'lg')\n    return 28;\n\n  if (size === 'sm')\n    return 20;\n\n  return 24;\n});\n\nconst selected = computed<boolean>(() => get(modelValue) === value);\n\nfunction input(event: Event): void {\n  const checked = (event.target as HTMLInputElement).checked;\n  if (checked)\n    set(modelValue, value);\n}\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"[\n        $style.wrapper,\n        $style[size ?? ''],\n        {\n          [$style.disabled]: disabled,\n          [$style['with-error']]: hasError,\n        },\n      ]\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <input\n        :checked=\"selected\"\n        type=\"radio\"\n        :class=\"$style.input\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"hasError\"\n        v-bind=\"getNonRootAttrs($attrs)\"\n        :value=\"value\"\n        @input=\"input($event)\"\n      />\n      <div\n        :class=\"[\n          $style.radio,\n          $style[color ?? ''],\n          $style[size ?? ''],\n          {\n            [$style.checked]: selected,\n            [$style.disabled]: disabled,\n            [$style['with-error']]: hasError,\n            [$style['with-success']]: hasSuccess && !hasError,\n          },\n        ]\"\n      >\n        <RuiIcon\n          v-if=\"selected\"\n          name=\"lu-radio-button-fill\"\n          :size=\"iconSize\"\n        />\n        <RuiIcon\n          v-else\n          name=\"lu-checkbox-blank-circle\"\n          :size=\"iconSize\"\n        />\n      </div>\n      <div\n        :class=\"$style.label\"\n        class=\"text-body-1\"\n      >\n        <slot>{{ label }}</slot>\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </div>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      :error-messages=\"errorMessages\"\n      :success-messages=\"successMessages\"\n      :hint=\"hint\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n.wrapper {\n  @apply relative flex items-start cursor-pointer -ml-[9px];\n\n  &.disabled {\n    @apply cursor-not-allowed;\n\n    .radio {\n      @apply opacity-50;\n\n      &:before {\n        content: none !important;\n      }\n    }\n\n    .label {\n      @apply text-rui-text-disabled;\n    }\n  }\n\n  .input {\n    @apply appearance-none w-[1px] h-[1px] absolute z-[2] outline-none select-none;\n\n    &:focus {\n      + .radio {\n        &:before {\n          @apply opacity-15;\n        }\n      }\n    }\n  }\n\n  .radio {\n    @apply relative text-rui-text-secondary p-[9px];\n\n    &:before {\n      content: '';\n      @apply absolute top-1/2 left-1/2 block h-[42px] w-[42px] -translate-y-1/2 -translate-x-1/2 rounded-full opacity-0 transition-opacity;\n      @apply bg-black dark:bg-white;\n    }\n\n    &.with-error {\n      @apply text-rui-error #{!important};\n    }\n\n    &.with-success {\n      @apply text-rui-success #{!important};\n    }\n\n    &:hover {\n      &:before {\n        @apply opacity-5;\n      }\n    }\n\n    &:active {\n      &:before {\n        @apply opacity-30;\n      }\n    }\n\n    &.lg {\n      &:before {\n        @apply h-[46px] w-[46px];\n      }\n    }\n\n    &.sm {\n      &:before {\n        @apply h-[38px] w-[38px];\n      }\n    }\n\n    @each $color in c.$context-colors {\n      &.#{$color} {\n        @apply before:bg-rui-#{$color};\n        &.checked {\n          @apply text-rui-#{$color};\n        }\n      }\n    }\n  }\n\n  .label {\n    @apply flex-1 text-rui-text;\n\n    &:not(:empty) {\n      @apply mt-[9px] mb-1;\n    }\n  }\n\n  &.sm {\n    .label {\n      &:not(:empty) {\n        @apply mt-[7px];\n      }\n    }\n  }\n\n  &.lg {\n    .label {\n      &:not(:empty) {\n        @apply mt-[11px];\n      }\n    }\n  }\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$style","_mergeProps","_createBlock","_renderSlot","RuiFormTextDetail"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,UAAM,aAAaA,SAAmB,SAAA,YAAoB;AAmB1D,UAAM,EAAE,UAAU,WAAA,IAAe;AAAA,MAC/B,MAAM,MAAM,qBAAa;AAAA,MACzB,MAAM,MAAM,uBAAe;AAAA,IAAA;AAG7B,UAAM,WAAW,SAAiB,MAAM;AACtC,UAAI,QAAA,SAAS;AACX,eAAO;AAET,UAAI,QAAA,SAAS;AACX,eAAO;AAET,aAAO;AAAA,IACT,CAAC;AAED,UAAM,WAAW,SAAkB,MAAM,IAAI,UAAU,MAAM,aAAK;AAElE,aAAS,MAAM,OAAoB;AACjC,YAAM,UAAW,MAAM,OAA4B;AACnD,UAAI;AACF,YAAI,YAAY,aAAK;AAAA,IACzB;;0BAIEC,mBAiEM,OAAAC,eAAAC,mBAjEOC,MAAA,YAAA,EAAaC,KAAAA,MAAM,CAAA,CAAA,GAAA;AAAA,QAC9BC,mBAyDQ,SAAA;AAAA,UAxDL,OAAKC,eAAA;AAAA,YAAYC,KAAAA,OAAO;AAAA,YAAiBA,KAAAA,OAAO,QAAA,QAAI,EAAA;AAAA;eAA8BA,KAAAA,OAAO,QAAQ,GAAG,QAAA;AAAA,cAAqBA,CAAAA,KAAAA,uBAAuBJ,MAAA,QAAA;AAAA,YAAA;AAAA;UAQhJ,cAAYA,MAAA,QAAA,IAAQ,KAAQ;AAAA,QAAA;UAE7BE,mBASE,SATFG,WASE;AAAA,YARC,SAASL,MAAA,QAAA;AAAA,YACV,MAAK;AAAA,YACJ,OAAOI,KAAAA,OAAO;AAAA,YACd,UAAU,QAAA;AAAA,YACV,gBAAcJ,MAAA,QAAA;AAAA,UAAA,GACPA,MAAA,eAAA,EAAgBC,KAAAA,MAAM,GAAA;AAAA,YAC7B,OAAO,QAAA;AAAA,YACP,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,MAAM,MAAM;AAAA,UAAA;UAEtBC,mBAuBM,OAAA;AAAA,YAtBH,OAAKC,eAAA;AAAA,cAAcC,KAAAA,OAAO;AAAA,cAAiBA,KAAAA,OAAO,QAAA,SAAK,EAAA;AAAA,cAAmBA,KAAAA,OAAO,QAAA,QAAI,EAAA;AAAA;iBAAkCA,KAAAA,OAAO,OAAO,GAAGJ,MAAA,QAAA;AAAA,iBAAuBI,KAAAA,OAAO,QAAQ,GAAG,QAAA;AAAA,gBAAuBA,CAAAA,KAAAA,uBAAuBJ,MAAA,QAAA;AAAA,iBAAuBI,KAAAA,OAAM,cAAA,CAAA,GAAmBJ,MAAA,UAAA,KAAU,CAAKA,MAAA,QAAA;AAAA,cAAA;AAAA;;YAavRA,MAAA,QAAA,kBADRM,YAIE,SAAA;AAAA;cAFA,MAAK;AAAA,cACJ,MAAMN,MAAA,QAAA;AAAA,YAAA,uCAETM,YAIE,SAAA;AAAA;cAFA,MAAK;AAAA,cACJ,MAAMN,MAAA,QAAA;AAAA,YAAA;;UAGXE,mBAWM,OAAA;AAAA,YAVH,OAAKC,eAAA,CAAEC,KAAAA,OAAO,OACT,aAAa,CAAA;AAAA,UAAA;YAEnBG,WAAwB,4BAAxB,MAAwB;AAAA,8CAAf,QAAA,KAAK,GAAA,CAAA;AAAA,YAAA;YAEN,QAAA,yBADRV,mBAKO,QALP,YAGC,KAED;;;SAIK,QAAA,4BADTS,YAKEE,aAAA;AAAA;UAHC,kBAAgB,QAAA;AAAA,UAChB,oBAAkB,QAAA;AAAA,UAClB,MAAM,QAAA;AAAA,QAAA;;;;;"}

package/dist/components/forms/radio-button/radio-group/RuiRadioGroup.vue.d.ts

@@ -21,7 +21,9 @@ declare const __VLS_export: <TValue>(__VLS_props: NonNullable<Awaited<typeof __V
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: {
+        default?: () => any;
+    };
     emit: (event: "update:modelValue", value: TValue | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;