@rotki/ui-library 2.12.1 → 2.13.0

package/dist/components/forms/text-field/RuiTextField.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTextField.vue2.js","sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { logicAnd, logicNot } from '@vueuse/math';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { assert } from '@/utils/assert';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  variant?: 'default' | 'filled' | 'outlined';\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextField',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst props = withDefaults(defineProps<TextFieldProps>(), {\n  label: '',\n  placeholder: '',\n  disabled: false,\n  variant: 'default',\n  color: undefined,\n  textColor: undefined,\n  dense: false,\n  hint: '',\n  as: 'input',\n  errorMessages: () => [],\n  successMessages: () => [],\n  hideDetails: false,\n  prependIcon: undefined,\n  appendIcon: undefined,\n  readonly: false,\n  clearable: false,\n  required: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'focus-input', event: Event): void;\n  (e: 'blur', event: Event): void;\n  (e: 'remove', value: unknown): void;\n  (e: 'clear'): void;\n}>();\n\nconst {\n  label,\n  clearable,\n  disabled,\n  readonly,\n  errorMessages,\n  successMessages,\n  required,\n} = toRefs(props);\n\nfunction input(event: Event) {\n  const value = (event.target as HTMLInputElement).value;\n  set(modelValue, value);\n}\n\nconst labelWithQuote = computed<string>(() => {\n  const labelVal = get(label);\n  if (!labelVal)\n    return '\"\\\\200B\"';\n\n  const asterisk = get(required) ? '﹡' : '';\n  return `'  ${labelVal}${asterisk}  '`;\n});\n\nconst prepend = ref<HTMLDivElement>();\nconst append = ref<HTMLDivElement>();\nconst innerWrapper = ref<HTMLDivElement>();\nconst inputRef = ref<HTMLInputElement>();\n\nconst prependWidth = ref('0px');\nconst appendWidth = ref('0px');\n\nconst { width } = useElementBounding(innerWrapper);\n\nuseResizeObserver(prepend, (entries) => {\n  const [entry] = entries;\n  assert(entry);\n  const { width, left } = entry.contentRect;\n  set(prependWidth, `${width + left}px`);\n});\n\nuseResizeObserver(append, (entries) => {\n  const [entry] = entries;\n  assert(entry);\n  const { width, right } = entry.contentRect;\n  set(appendWidth, `${width + right}px`);\n});\n\nconst { hasError, hasSuccess, hasMessages } = useFormTextDetail(\n  errorMessages,\n  successMessages,\n);\n\nconst { focused } = useFocus(inputRef);\nconst focusedDebounced = refDebounced(focused, 500);\n\nconst showClearIcon = logicAnd(\n  clearable,\n  modelValue,\n  logicNot(disabled),\n  logicNot(readonly),\n);\n\nfunction clearIconClicked() {\n  set(modelValue, '');\n  emit('clear');\n}\n\ndefineExpose({\n  setSelectionRange: (start: number, end: number) => {\n    get(inputRef)?.setSelectionRange(start, end);\n  },\n  focus: () => get(inputRef)?.focus(),\n  element: inputRef,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      :class=\"[\n        $style.wrapper,\n        $style[color ?? ''],\n        $style[variant ?? ''],\n        {\n          [$style.dense]: dense,\n          [$style.disabled]: disabled,\n          [$style['no-label']]: !label,\n          [$style['with-error'] ?? '']: hasError,\n          [$style['with-success'] ?? '']: hasSuccess && !hasError,\n          [$style[`text_${textColor}`] ?? '']: textColor && !hasMessages,\n        },\n      ]\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        ref=\"prepend\"\n        class=\"flex items-center gap-1 shrink-0\"\n        :class=\"$style.prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"[$style.icon]\"\n        >\n          <RuiIcon :name=\"prependIcon\" />\n        </div>\n      </div>\n      <div\n        ref=\"innerWrapper\"\n        class=\"flex flex-1 overflow-hidden\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\n          ref=\"inputRef\"\n          :value=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"$style.input\"\n          :disabled=\"disabled\"\n          :dense=\"dense\"\n          :variant=\"variant\"\n          :readonly=\"readonly\"\n          :wrapper-width=\"width\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n          @blur=\"emit('blur', $event)\"\n          @remove=\"emit('remove', $event)\"\n        />\n        <label :class=\"$style.label\">\n          <span>\n            {{ label }}\n            <span\n              v-if=\"required\"\n              class=\"text-rui-error\"\n            >\n              ﹡\n            </span>\n          </span>\n        </label>\n        <fieldset\n          v-if=\"variant === 'outlined'\"\n          :class=\"$style.fieldset\"\n        >\n          <legend :class=\"{ [$style.show]: label }\" />\n        </fieldset>\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        ref=\"append\"\n        class=\"flex items-center gap-1 shrink-0\"\n        :class=\"$style.append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"{ hidden: !focusedDebounced }\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          class=\"!p-2 clear-btn\"\n          color=\"error\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"20\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"[$style.icon]\"\n        >\n          <RuiIcon :name=\"appendIcon\" />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1 px-3\"\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:global(.dark) {\n  .wrapper {\n    @apply bg-transparent;\n\n    .label {\n      @apply border-white/[0.42];\n\n      &:after {\n        @apply border-white;\n      }\n    }\n\n    .icon {\n      @apply text-white/[0.56];\n    }\n\n    &:hover {\n      .label {\n        @apply border-white;\n      }\n    }\n\n    &.filled {\n      .input {\n        &:focus {\n          + .label {\n            @apply bg-white/[0.13];\n          }\n        }\n      }\n\n      .label {\n        @apply bg-white/[0.09];\n      }\n    }\n\n    &.outlined {\n      .fieldset {\n        @apply border-white/[0.23];\n      }\n\n      &:not(.disabled) {\n        .input {\n          &:hover,\n          &:focus {\n            ~ .fieldset {\n              @apply border-white;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n.wrapper {\n  @apply relative w-full flex items-center pt-3 rounded bg-white;\n\n  .input {\n    @apply leading-6 text-rui-text w-full bg-transparent py-1.5 pr-3 outline-0 outline-none transition-all placeholder:opacity-0 focus:placeholder:opacity-100;\n\n    &:focus {\n      @apply outline-0;\n      + .label {\n        @apply after:scale-x-100;\n      }\n    }\n\n    &:not(:placeholder-shown),\n    &:autofill,\n    &:-webkit-autofill,\n    &[data-has-value='true'],\n    &:focus {\n      + .label {\n        @apply text-xs leading-tight;\n        padding-left: var(--x-padding);\n        padding-right: var(--x-padding);\n      }\n    }\n\n    &:disabled {\n      @apply border-dotted;\n\n      &,\n      + .label {\n        @apply text-rui-text-disabled;\n      }\n\n      ~ .fieldset {\n        @apply border-dotted;\n      }\n    }\n  }\n\n  .label {\n    @apply left-0 text-base leading-[3.75] text-rui-text-secondary pointer-events-none absolute top-0 flex h-full w-full select-none transition-all duration-75 border-b border-black/[0.42];\n\n    --x-padding: 0px;\n    --prepend-width: v-bind(prependWidth);\n    --append-width: v-bind(appendWidth);\n\n    padding-left: calc(var(--x-padding) + var(--prepend-width, 0px));\n    padding-right: calc(var(--x-padding) + var(--append-width, 0px));\n\n    span {\n      @apply truncate transition-all duration-75;\n      content: v-bind(labelWithQuote);\n    }\n\n    &:after {\n      content: '';\n      @apply absolute bottom-0 left-0 block w-full scale-x-0 border-b-2 mb-[-1px] transition-transform duration-300 border-black;\n    }\n  }\n\n  &:hover {\n    .label {\n      @apply border-black;\n    }\n  }\n\n  .icon {\n    @apply text-black/[0.54];\n  }\n\n  .prepend {\n    &:not(:empty) {\n      @apply pr-2;\n    }\n  }\n\n  .append {\n    &:not(:empty) {\n      @apply pl-2;\n    }\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      .input {\n        &:focus {\n          + .label {\n            @apply text-rui-#{$color};\n          }\n        }\n      }\n\n      .label {\n        @apply after:border-rui-#{$color};\n      }\n\n      &.outlined {\n        &:not(.disabled) {\n          .input {\n            &:focus {\n              ~ .fieldset {\n                @apply border-rui-#{$color};\n              }\n            }\n          }\n        }\n      }\n    }\n\n    &.text_#{$color},\n    &.with-#{$color} {\n      .prepend,\n      .append,\n      .input {\n        @apply text-rui-#{$color};\n      }\n\n      &:not(.disabled) .prepend svg,\n      &:not(.disabled) .append svg {\n        @apply text-rui-#{$color};\n      }\n    }\n  }\n\n  @each $color in 'error', 'success' {\n    &.with-#{$color} {\n      .input {\n        @apply border-rui-#{$color} #{!important};\n      }\n\n      .label {\n        @apply text-rui-#{$color} after:border-rui-#{$color} #{!important};\n      }\n\n      .fieldset {\n        @apply border-rui-#{$color} #{!important};\n      }\n    }\n  }\n\n  &.dense {\n    .input {\n      @apply py-1;\n    }\n\n    .label {\n      @apply leading-[3.5];\n    }\n  }\n\n  &.filled,\n  &.outlined {\n    @apply pt-0;\n\n    .prepend {\n      &:not(:empty) {\n        @apply pl-3 pr-0;\n      }\n    }\n\n    .append {\n      &:not(:empty) {\n        @apply pr-3 pl-0;\n      }\n    }\n\n    .input {\n      @apply px-3;\n    }\n\n    .label {\n      @apply leading-[3.5];\n      --x-padding: 0.75rem;\n    }\n  }\n\n  &.filled {\n    .input {\n      @apply py-4;\n\n      &:focus {\n        + .label {\n          @apply bg-black/[0.09];\n        }\n      }\n\n      &:not(:placeholder-shown),\n      &:autofill,\n      &:-webkit-autofill,\n      &[data-has-value='true'],\n      &:focus {\n        + .label {\n          @apply leading-[1.5] pl-4;\n\n          padding-left: calc(var(--x-padding));\n          padding-right: calc(var(--x-padding));\n        }\n      }\n    }\n\n    .label {\n      @apply rounded-t bg-black/[0.06];\n    }\n\n    &.dense {\n      .input {\n        @apply pt-5 pb-1;\n      }\n\n      .label {\n        @apply leading-[3];\n      }\n\n      &:not(:placeholder-shown),\n      &:autofill,\n      &:-webkit-autofill,\n      &[data-has-value='true'],\n      &:focus {\n        + .label {\n          @apply leading-[2.25];\n        }\n      }\n    }\n\n    &.no-label {\n      .input {\n        @apply py-4;\n      }\n\n      &.dense {\n        .input {\n          @apply py-3;\n        }\n      }\n    }\n  }\n\n  &.outlined {\n    .input {\n      @apply py-4 border-b-0;\n\n      &:not(:placeholder-shown),\n      &:autofill,\n      &:-webkit-autofill,\n      &[data-has-value='true'],\n      &:focus {\n        @apply border-t-transparent;\n\n        + .label {\n          @apply leading-[0] pl-4 -mt-3;\n\n          span {\n            @apply pt-3;\n          }\n        }\n\n        ~ .fieldset {\n          legend {\n            &.show {\n              @apply px-2;\n            }\n            &:after {\n              content: v-bind(labelWithQuote);\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 pointer-events-none rounded border border-black/[0.23] px-2 transition-all -mt-2;\n\n      legend {\n        @apply opacity-0 text-xs max-w-full truncate;\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    &:not(.disabled) {\n      .input {\n        &:hover,\n        &:focus {\n          ~ .fieldset {\n            @apply border border-black;\n          }\n        }\n\n        &:focus {\n          ~ .fieldset {\n            @apply border-2;\n          }\n        }\n      }\n    }\n\n    .label {\n      @apply border-0 border-transparent;\n\n      &:after {\n        content: none !important;\n      }\n    }\n\n    &.dense {\n      .input {\n        @apply py-2;\n      }\n\n      .label {\n        @apply leading-[2.5];\n      }\n    }\n  }\n}\n</style>\n"],"names":["_useModel","width","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$style","$slots","_renderSlot","_createVNode","_mergeProps","_createTextVNode","_toDisplayString","_createBlock","RuiFormTextDetail"],"mappings":"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"}
+{"version":3,"file":"RuiTextField.vue2.js","sources":["../../../../src/components/forms/text-field/RuiTextField.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { useLabelWithQuote } from '@/composables/forms/use-label-with-quote';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n  label?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  variant?: 'default' | 'filled' | 'outlined';\n  color?: ContextColorsType;\n  textColor?: ContextColorsType;\n  dense?: boolean;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  prependIcon?: RuiIcons;\n  appendIcon?: RuiIcons;\n  readonly?: boolean;\n  clearable?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextField',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n  label = '',\n  placeholder = '',\n  disabled = false,\n  variant = 'default',\n  color = undefined,\n  textColor = undefined,\n  dense = false,\n  hint = '',\n  errorMessages = [],\n  successMessages = [],\n  hideDetails = false,\n  prependIcon = undefined,\n  appendIcon = undefined,\n  readonly = false,\n  clearable = false,\n  required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n  'focus-input': [event: Event];\n  'blur': [event: Event];\n  'remove': [value: unknown];\n  'clear': [];\n}>();\n\ndefineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n}>();\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst innerWrapper = useTemplateRef<HTMLDivElement>('innerWrapper');\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append);\n\nconst { width } = useElementBounding(innerWrapper);\n\nconst { hasError, hasSuccess, hasMessages } = useFormTextDetail(\n  toRef(() => errorMessages),\n  toRef(() => successMessages),\n);\n\nconst { focused } = useFocus(inputRef);\nconst focusedDebounced = refDebounced(focused, 500);\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst labelWithQuote = useLabelWithQuote(\n  () => label,\n  () => required,\n);\n\nfunction input(event: Event): void {\n  const value = (event.target as HTMLInputElement).value;\n  set(modelValue, value);\n}\n\nfunction clearIconClicked(): void {\n  set(modelValue, '');\n  emit('clear');\n}\n\ndefineExpose({\n  setSelectionRange: (start: number, end: number) => {\n    get(inputRef)?.setSelectionRange(start, end);\n  },\n  focus: () => get(inputRef)?.focus(),\n  element: inputRef,\n});\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      :class=\"[\n        $style.wrapper,\n        $style[color ?? ''],\n        $style[variant ?? ''],\n        {\n          [$style.dense]: dense,\n          [$style.disabled]: disabled,\n          [$style['no-label']]: !label,\n          [$style['with-error'] ?? '']: hasError,\n          [$style['with-success'] ?? '']: hasSuccess && !hasError,\n          [$style[`text_${textColor}`] ?? '']: textColor && !hasMessages,\n        },\n      ]\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div\n        v-if=\"$slots.prepend || prependIcon\"\n        ref=\"prepend\"\n        class=\"flex items-center gap-1 shrink-0\"\n        :class=\"$style.prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"[$style.icon]\"\n        >\n          <RuiIcon :name=\"prependIcon\" />\n        </div>\n      </div>\n      <div\n        ref=\"innerWrapper\"\n        class=\"flex flex-1 overflow-hidden\"\n        @click=\"emit('focus-input', $event)\"\n      >\n        <input\n          ref=\"inputRef\"\n          :value=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"$style.input\"\n          :disabled=\"disabled\"\n          :dense=\"dense\"\n          :variant=\"variant\"\n          :readonly=\"readonly\"\n          :wrapper-width=\"width\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n          @blur=\"emit('blur', $event)\"\n          @remove=\"emit('remove', $event)\"\n        />\n        <label :class=\"$style.label\">\n          <span>\n            {{ label }}\n            <span\n              v-if=\"required\"\n              class=\"text-rui-error\"\n            >\n              ﹡\n            </span>\n          </span>\n        </label>\n        <fieldset\n          v-if=\"variant === 'outlined'\"\n          :class=\"$style.fieldset\"\n        >\n          <legend :class=\"{ [$style.show]: label }\" />\n        </fieldset>\n      </div>\n      <div\n        v-if=\"$slots.append || appendIcon || showClearIcon\"\n        ref=\"append\"\n        class=\"flex items-center gap-1 shrink-0\"\n        :class=\"$style.append\"\n      >\n        <RuiButton\n          v-if=\"showClearIcon\"\n          :class=\"{ hidden: !focusedDebounced }\"\n          variant=\"text\"\n          type=\"button\"\n          icon\n          class=\"!p-2 clear-btn\"\n          color=\"error\"\n          tabindex=\"-1\"\n          @click.stop=\"clearIconClicked()\"\n        >\n          <RuiIcon\n            name=\"lu-x\"\n            size=\"20\"\n          />\n        </RuiButton>\n        <slot\n          v-if=\"$slots.append\"\n          name=\"append\"\n        />\n        <div\n          v-else-if=\"appendIcon\"\n          :class=\"[$style.icon]\"\n        >\n          <RuiIcon :name=\"appendIcon\" />\n        </div>\n      </div>\n    </div>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1 px-3\"\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:global(.dark) {\n  .wrapper {\n    @apply bg-transparent;\n\n    .label {\n      @apply border-white/[0.42];\n\n      &:after {\n        @apply border-white;\n      }\n    }\n\n    .icon {\n      @apply text-white/[0.56];\n    }\n\n    &:hover {\n      .label {\n        @apply border-white;\n      }\n    }\n\n    &.filled {\n      .input {\n        &:focus {\n          + .label {\n            @apply bg-white/[0.13];\n          }\n        }\n      }\n\n      .label {\n        @apply bg-white/[0.09];\n      }\n    }\n\n    &.outlined {\n      .fieldset {\n        @apply border-white/[0.23];\n      }\n\n      &:not(.disabled) {\n        .input {\n          &:hover,\n          &:focus {\n            ~ .fieldset {\n              @apply border-white;\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n.wrapper {\n  @apply relative w-full flex items-center pt-3 rounded bg-white;\n\n  .input {\n    @apply leading-6 text-rui-text w-full bg-transparent py-1.5 pr-3 outline-0 outline-none transition-all placeholder:opacity-0 focus:placeholder:opacity-100;\n\n    &:focus {\n      @apply outline-0;\n      + .label {\n        @apply after:scale-x-100;\n      }\n    }\n\n    &:not(:placeholder-shown),\n    &:autofill,\n    &:-webkit-autofill,\n    &[data-has-value='true'],\n    &:focus {\n      + .label {\n        @apply text-xs leading-tight;\n        padding-left: var(--x-padding);\n        padding-right: var(--x-padding);\n      }\n    }\n\n    &:disabled {\n      @apply border-dotted;\n\n      &,\n      + .label {\n        @apply text-rui-text-disabled;\n      }\n\n      ~ .fieldset {\n        @apply border-dotted;\n      }\n    }\n  }\n\n  .label {\n    @apply left-0 text-base leading-[3.75] text-rui-text-secondary pointer-events-none absolute top-0 flex h-full w-full select-none transition-all duration-75 border-b border-black/[0.42];\n\n    --x-padding: 0px;\n    --prepend-width: v-bind(prependWidth);\n    --append-width: v-bind(appendWidth);\n\n    padding-left: calc(var(--x-padding) + var(--prepend-width, 0px));\n    padding-right: calc(var(--x-padding) + var(--append-width, 0px));\n\n    span {\n      @apply truncate transition-all duration-75;\n      content: v-bind(labelWithQuote);\n    }\n\n    &:after {\n      content: '';\n      @apply absolute bottom-0 left-0 block w-full scale-x-0 border-b-2 mb-[-1px] transition-transform duration-300 border-black;\n    }\n  }\n\n  &:hover {\n    .label {\n      @apply border-black;\n    }\n  }\n\n  .icon {\n    @apply text-black/[0.54];\n  }\n\n  .prepend {\n    &:not(:empty) {\n      @apply pr-2;\n    }\n  }\n\n  .append {\n    &:not(:empty) {\n      @apply pl-2;\n    }\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      .input {\n        &:focus {\n          + .label {\n            @apply text-rui-#{$color};\n          }\n        }\n      }\n\n      .label {\n        @apply after:border-rui-#{$color};\n      }\n\n      &.outlined {\n        &:not(.disabled) {\n          .input {\n            &:focus {\n              ~ .fieldset {\n                @apply border-rui-#{$color};\n              }\n            }\n          }\n        }\n      }\n    }\n\n    &.text_#{$color},\n    &.with-#{$color} {\n      .prepend,\n      .append,\n      .input {\n        @apply text-rui-#{$color};\n      }\n\n      &:not(.disabled) .prepend svg,\n      &:not(.disabled) .append svg {\n        @apply text-rui-#{$color};\n      }\n    }\n  }\n\n  @each $color in 'error', 'success' {\n    &.with-#{$color} {\n      .input {\n        @apply border-rui-#{$color} #{!important};\n      }\n\n      .label {\n        @apply text-rui-#{$color} after:border-rui-#{$color} #{!important};\n      }\n\n      .fieldset {\n        @apply border-rui-#{$color} #{!important};\n      }\n    }\n  }\n\n  &.dense {\n    .input {\n      @apply py-1;\n    }\n\n    .label {\n      @apply leading-[3.5];\n    }\n  }\n\n  &.filled,\n  &.outlined {\n    @apply pt-0;\n\n    .prepend {\n      &:not(:empty) {\n        @apply pl-3 pr-0;\n      }\n    }\n\n    .append {\n      &:not(:empty) {\n        @apply pr-3 pl-0;\n      }\n    }\n\n    .input {\n      @apply px-3;\n    }\n\n    .label {\n      @apply leading-[3.5];\n      --x-padding: 0.75rem;\n    }\n  }\n\n  &.filled {\n    .input {\n      @apply py-4;\n\n      &:focus {\n        + .label {\n          @apply bg-black/[0.09];\n        }\n      }\n\n      &:not(:placeholder-shown),\n      &:autofill,\n      &:-webkit-autofill,\n      &[data-has-value='true'],\n      &:focus {\n        + .label {\n          @apply leading-[1.5] pl-4;\n\n          padding-left: calc(var(--x-padding));\n          padding-right: calc(var(--x-padding));\n        }\n      }\n    }\n\n    .label {\n      @apply rounded-t bg-black/[0.06];\n    }\n\n    &.dense {\n      .input {\n        @apply pt-5 pb-1;\n      }\n\n      .label {\n        @apply leading-[3];\n      }\n\n      &:not(:placeholder-shown),\n      &:autofill,\n      &:-webkit-autofill,\n      &[data-has-value='true'],\n      &:focus {\n        + .label {\n          @apply leading-[2.25];\n        }\n      }\n    }\n\n    &.no-label {\n      .input {\n        @apply py-4;\n      }\n\n      &.dense {\n        .input {\n          @apply py-3;\n        }\n      }\n    }\n  }\n\n  &.outlined {\n    .input {\n      @apply py-4 border-b-0;\n\n      &:not(:placeholder-shown),\n      &:autofill,\n      &:-webkit-autofill,\n      &[data-has-value='true'],\n      &:focus {\n        @apply border-t-transparent;\n\n        + .label {\n          @apply leading-[0] pl-4 -mt-3;\n\n          span {\n            @apply pt-3;\n          }\n        }\n\n        ~ .fieldset {\n          legend {\n            &.show {\n              @apply px-2;\n            }\n            &:after {\n              content: v-bind(labelWithQuote);\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 pointer-events-none rounded border border-black/[0.23] px-2 transition-all -mt-2;\n\n      legend {\n        @apply opacity-0 text-xs max-w-full truncate;\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    &:not(.disabled) {\n      .input {\n        &:hover,\n        &:focus {\n          ~ .fieldset {\n            @apply border border-black;\n          }\n        }\n\n        &:focus {\n          ~ .fieldset {\n            @apply border-2;\n          }\n        }\n      }\n    }\n\n    .label {\n      @apply border-0 border-transparent;\n\n      &:after {\n        content: none !important;\n      }\n    }\n\n    &.dense {\n      .input {\n        @apply py-2;\n      }\n\n      .label {\n        @apply leading-[2.5];\n      }\n    }\n  }\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$style","$slots","_renderSlot","_createVNode","_mergeProps","_createTextVNode","_toDisplayString","_createBlock","RuiFormTextDetail"],"mappings":"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"}

package/dist/components/helpers/RuiFormTextDetail.vue.d.ts

@@ -3,10 +3,6 @@ type __VLS_Props = {
     successMessages?: string | string[];
     hint?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    errorMessages: string | string[];
-    successMessages: string | string[];
-    hint: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/helpers/RuiFormTextDetail.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, createBlock, openBlock, TransitionGroup, withCtx, createElementBlock, createCommentVNode, unref, toDisplayString } from "vue";
+import { defineComponent, toRef, openBlock, createBlock, TransitionGroup, withCtx, unref, createElementBlock, toDisplayString, createCommentVNode } from "vue";
 import { useFormTextDetail } from "../../utils/form-text-detail.js";
 const _hoisted_1 = {
   key: "error",
@@ -20,14 +20,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     hint: { default: "" }
   },
   setup(__props) {
-    const props = __props;
-    const { errorMessages, successMessages } = toRefs(props);
-    const {
-      formattedErrorMessages,
-      formattedSuccessMessages,
-      hasError,
-      hasSuccess
-    } = useFormTextDetail(errorMessages, successMessages);
+    const { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } = useFormTextDetail(
+      toRef(() => __props.errorMessages),
+      toRef(() => __props.successMessages)
+    );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(TransitionGroup, {
         tag: "div",

package/dist/components/helpers/RuiFormTextDetail.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiFormTextDetail.vue.js","sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst props = withDefaults(\n  defineProps<{\n    errorMessages?: string | string[];\n    successMessages?: string | string[];\n    hint?: string;\n  }>(),\n  {\n    errorMessages: () => [],\n    successMessages: () => [],\n    hint: '',\n  },\n);\n\nconst { errorMessages, successMessages } = toRefs(props);\n\nconst {\n  formattedErrorMessages,\n  formattedSuccessMessages,\n  hasError,\n  hasSuccess,\n} = useFormTextDetail(errorMessages, successMessages);\n</script>\n\n<template>\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-[1.5rem]\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n    appear\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      {{ hint }}\n    </div>\n  </TransitionGroup>\n</template>\n"],"names":["_createBlock","_TransitionGroup","_unref","_createElementBlock","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,UAAM,QAAQ;AAad,UAAM,EAAE,eAAe,oBAAoB,OAAO,KAAK;AAEvD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,kBAAkB,eAAe,eAAe;;0BAIlDA,YAgCkBC,iBAAA;AAAA,QA/BhB,KAAI;AAAA,QACJ,OAAM;AAAA,QACN,oBAAiB;AAAA,QACjB,sBAAmB;AAAA,QACnB,kBAAe;AAAA,QACf,oBAAiB;AAAA,QACjB,sBAAmB;AAAA,QACnB,kBAAe;AAAA,QACf,QAAA;AAAA,MAAA;yBAEA,MAMM;AAAA,UALEC,MAAA,QAAA,kBADRC,mBAMM,OANN,YAMMC,gBADDF,MAAA,sBAAA,EAAsB,CAAA,CAAA,GAAA,CAAA,KAGdA,MAAA,UAAA,kBADbC,mBAMM,OANN,YAMMC,gBADDF,MAAA,wBAAA,EAAwB,CAAA,CAAA,GAAA,CAAA,KAGhB,QAAA,qBADbC,mBAMM,OANN,YAMMC,gBADD,QAAA,IAAI,GAAA,CAAA;;;;;;;"}
+{"version":3,"file":"RuiFormTextDetail.vue.js","sources":["../../../src/components/helpers/RuiFormTextDetail.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useFormTextDetail } from '@/utils/form-text-detail';\n\nconst {\n  errorMessages = [],\n  successMessages = [],\n  hint = '',\n} = defineProps<{\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hint?: string;\n}>();\n\nconst { formattedErrorMessages, formattedSuccessMessages, hasError, hasSuccess } =\n  useFormTextDetail(\n    toRef(() => errorMessages),\n    toRef(() => successMessages),\n  );\n</script>\n\n<template>\n  <TransitionGroup\n    tag=\"div\"\n    class=\"details min-h-[1.5rem]\"\n    enter-from-class=\"opacity-0 -translate-y-2 h-0\"\n    enter-active-class=\"transform transition\"\n    enter-to-class=\"opacity-100 translate-y-0\"\n    leave-from-class=\"opacity-100 -translate-y-2\"\n    leave-active-class=\"transform transition\"\n    leave-to-class=\"opacity-0 -translate-y-2 h-0\"\n    appear\n  >\n    <div\n      v-if=\"hasError\"\n      key=\"error\"\n      class=\"text-rui-error text-caption\"\n    >\n      {{ formattedErrorMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hasSuccess\"\n      key=\"success\"\n      class=\"text-rui-success text-caption\"\n    >\n      {{ formattedSuccessMessages[0] }}\n    </div>\n    <div\n      v-else-if=\"hint\"\n      key=\"hint\"\n      class=\"text-rui-text-secondary text-caption\"\n    >\n      {{ hint }}\n    </div>\n  </TransitionGroup>\n</template>\n"],"names":["_createBlock","_TransitionGroup","_unref","_createElementBlock","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA,UAAM,EAAE,wBAAwB,0BAA0B,UAAU,eAClE;AAAA,MACE,MAAM,MAAM,qBAAa;AAAA,MACzB,MAAM,MAAM,uBAAe;AAAA,IAAA;;0BAK7BA,YAgCkBC,iBAAA;AAAA,QA/BhB,KAAI;AAAA,QACJ,OAAM;AAAA,QACN,oBAAiB;AAAA,QACjB,sBAAmB;AAAA,QACnB,kBAAe;AAAA,QACf,oBAAiB;AAAA,QACjB,sBAAmB;AAAA,QACnB,kBAAe;AAAA,QACf,QAAA;AAAA,MAAA;yBAEA,MAMM;AAAA,UALEC,MAAA,QAAA,kBADRC,mBAMM,OANN,YAMMC,gBADDF,MAAA,sBAAA,EAAsB,CAAA,CAAA,GAAA,CAAA,KAGdA,MAAA,UAAA,kBADbC,mBAMM,OANN,YAMMC,gBADDF,MAAA,wBAAA,EAAwB,CAAA,CAAA,GAAA,CAAA,KAGhB,QAAA,qBADbC,mBAMM,OANN,YAMMC,gBADD,QAAA,IAAI,GAAA,CAAA;;;;;;;"}

package/dist/components/icons/LazyIcon.vue.d.ts

@@ -3,8 +3,6 @@ export interface LazyIconProps {
     name: RuiIcons;
     size?: number | string;
 }
-declare const __VLS_export: import("vue").DefineComponent<LazyIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LazyIconProps> & Readonly<{}>, {
-    size: number | string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<LazyIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LazyIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/icons/RuiIcon.vue.d.ts

@@ -5,9 +5,6 @@ export interface Props {
     size?: number | string;
     color?: ContextColorsType;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    size: number | string;
-    color: ContextColorsType;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/icons/RuiIcon.vue2.js

@@ -1,10 +1,6 @@
-import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, Fragment, renderList, unref, createBlock, resolveDynamicComponent, mergeProps } from "vue";
-import { isRuiIcon } from "../../icons/index.js";
-import "@vueuse/core";
-import "scule";
-import "@vueuse/shared";
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, Fragment, renderList, unref, createBlock, resolveDynamicComponent, mergeProps } from "vue";
 import { useIcons } from "../../composables/icons.js";
-import "../../composables/theme.js";
+import { isRuiIcon } from "../../icons/index.js";
 const _hoisted_1 = ["height", "width"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -14,25 +10,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     name: {},
     size: { default: 24 },
-    color: { default: void 0 }
+    color: {}
   },
   setup(__props) {
-    const props = __props;
     const { registeredIcons } = useIcons();
-    const isFill = computed(() => props.name.endsWith("-fill"));
+    const isFill = computed(() => __props.name.endsWith("-fill"));
     const components = computed(() => {
-      const name = props.name;
-      if (!isRuiIcon(name)) {
-        console.warn(`icon ${name} must be a valid RuiIcon`);
+      if (!isRuiIcon(__props.name)) {
+        console.warn(`icon ${__props.name} must be a valid RuiIcon`);
       }
-      const found = registeredIcons[name];
+      const found = registeredIcons[__props.name];
       if (!found) {
-        console.error(`Icons "${name}" not found. Make sure that you have register the icon when installing the RuiPlugin`);
+        console.error(
+          `Icons "${__props.name}" not found. Make sure that you have register the icon when installing the RuiPlugin`
+        );
       }
       return found;
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("svg", {
+        "aria-hidden": "true",
         class: normalizeClass([_ctx.$style["rui-icon"], _ctx.$style[__props.color ?? ""]]),
         height: __props.size,
         width: __props.size,

package/dist/components/icons/RuiIcon.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiIcon.vue2.js","sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { isRuiIcon, type RuiIcons } from '@/icons';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  size: 24,\n  color: undefined,\n});\n\nconst { registeredIcons } = useIcons();\n\nconst isFill = computed(() => props.name.endsWith('-fill'));\n\nconst components: ComputedRef<[string, Record<string, string>][] | undefined> = computed(() => {\n  const name = props.name;\n  if (!isRuiIcon(name)) {\n    console.warn(`icon ${name} must be a valid RuiIcon`);\n  }\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(`Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`);\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    :class=\"[$style['rui-icon'], $style[color ?? '']]\"\n    :height=\"size\"\n    :width=\"size\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"(!isFill) ? 'none' : 'currentColor'\"\n      :stroke=\"(!isFill) ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n.rui-icon {\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      @apply text-rui-#{$color};\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_openBlock","_Fragment","_renderList","_unref","_createBlock","_resolveDynamicComponent","_mergeProps"],"mappings":";;;;;;;;;;;;;;;;;;;AAcA,UAAM,QAAQ;AAKd,UAAM,EAAE,gBAAA,IAAoB,SAAA;AAE5B,UAAM,SAAS,SAAS,MAAM,MAAM,KAAK,SAAS,OAAO,CAAC;AAE1D,UAAM,aAA0E,SAAS,MAAM;AAC7F,YAAM,OAAO,MAAM;AACnB,UAAI,CAAC,UAAU,IAAI,GAAG;AACpB,gBAAQ,KAAK,QAAQ,IAAI,0BAA0B;AAAA,MACrD;AACA,YAAM,QAAQ,gBAAgB,IAAI;AAElC,UAAI,CAAC,OAAO;AACV,gBAAQ,MAAM,UAAU,IAAI,sFAAsF;AAAA,MACpH;AACA,aAAO;AAAA,IACT,CAAC;;0BAICA,mBAoBM,OAAA;AAAA,QAnBH,OAAKC,eAAA,CAAGC,KAAAA,OAAM,UAAA,GAAcA,KAAAA,OAAO,QAAA,SAAK,EAAA,CAAA,CAAA;AAAA,QACxC,QAAQ,QAAA;AAAA,QACR,OAAO,QAAA;AAAA,QACR,SAAQ;AAAA,QACR,OAAM;AAAA,MAAA;SAENC,UAAA,IAAA,GAAAH,mBAYEI,UAAA,MAAAC,WAV6BC,MAAA,UAAA,GAAU,CAA/B,WAAW,UAAK;8BAF1BC,YAYEC,wBAXK,UAAS,CAAA,CAAA,GADhBC,WAYE,EATC,KAAK,MAAA,GAAK,EAAA,SAAA,QACH,UAAS,CAAA,GAAA;AAAA,YAChB,OAAQH,MAAA,MAAA,IAAM,SAAA;AAAA,YACd,SAAUA,MAAA,MAAA,IAAM,iBAAA;AAAA,YACjB,gBAAa;AAAA,YACb,kBAAe;AAAA,YACf,mBAAgB;AAAA,YAChB,aAAU;AAAA,YACV,aAAU;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"RuiIcon.vue2.js","sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { useIcons } from '@/composables/icons';\nimport { isRuiIcon, type RuiIcons } from '@/icons';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n});\n\nconst { name, size = 24, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\nconst isFill = computed<boolean>(() => name.endsWith('-fill'));\n\nconst components = computed<[string, Record<string, string>][] | undefined>(() => {\n  if (!isRuiIcon(name)) {\n    console.warn(`icon ${name} must be a valid RuiIcon`);\n  }\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    :class=\"[$style['rui-icon'], $style[color ?? '']]\"\n    :height=\"size\"\n    :width=\"size\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n      :fill=\"!isFill ? 'none' : 'currentColor'\"\n      :stroke=\"!isFill ? 'currentColor' : 'none'\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n    />\n  </svg>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n.rui-icon {\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      @apply text-rui-#{$color};\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_openBlock","_Fragment","_renderList","_unref","_createBlock","_resolveDynamicComponent","_mergeProps"],"mappings":";;;;;;;;;;;;;;;AAiBA,UAAM,EAAE,gBAAA,IAAoB,SAAA;AAE5B,UAAM,SAAS,SAAkB,MAAM,QAAA,KAAK,SAAS,OAAO,CAAC;AAE7D,UAAM,aAAa,SAAyD,MAAM;AAChF,UAAI,CAAC,UAAU,QAAA,IAAI,GAAG;AACpB,gBAAQ,KAAK,QAAQ,QAAA,IAAI,0BAA0B;AAAA,MACrD;AACA,YAAM,QAAQ,gBAAgB,YAAI;AAElC,UAAI,CAAC,OAAO;AACV,gBAAQ;AAAA,UACN,UAAU,QAAA,IAAI;AAAA,QAAA;AAAA,MAElB;AACA,aAAO;AAAA,IACT,CAAC;;0BAICA,mBAqBM,OAAA;AAAA,QApBJ,eAAY;AAAA,QACX,OAAKC,eAAA,CAAGC,KAAAA,OAAM,UAAA,GAAcA,KAAAA,OAAO,QAAA,SAAK,EAAA,CAAA,CAAA;AAAA,QACxC,QAAQ,QAAA;AAAA,QACR,OAAO,QAAA;AAAA,QACR,SAAQ;AAAA,QACR,OAAM;AAAA,MAAA;SAENC,UAAA,IAAA,GAAAH,mBAYEI,UAAA,MAAAC,WAV6BC,MAAA,UAAA,GAAU,CAA/B,WAAW,UAAK;8BAF1BC,YAYEC,wBAXK,UAAS,CAAA,CAAA,GADhBC,WAYE,EATC,KAAK,MAAA,GAAK,EAAA,SAAA,QACH,UAAS,CAAA,GAAA;AAAA,YAChB,OAAOH,MAAA,MAAA,IAAM,SAAA;AAAA,YACb,SAASA,MAAA,MAAA,IAAM,iBAAA;AAAA,YAChB,gBAAa;AAAA,YACb,kBAAe;AAAA,YACf,mBAAgB;AAAA,YAChB,aAAU;AAAA,YACV,aAAU;AAAA,UAAA;;;;;;"}

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
-import type { TableColumn as DataTableColumn, GroupKeys as DataTableGroupKeys, SortColumn as DataTableSortColumn, TableSortData as DataTableSortData } from '../components/tables/RuiTableHead.vue.js';
+import type { TableColumn as DataTableColumn, GroupKeys as DataTableGroupKeys, SortColumn as DataTableSortColumn, TableSortData as DataTableSortData, GroupData } from '../components/tables/RuiTableHead.vue.js';
 import RuiAccordion, { type AccordionProps } from '../components/accordions/accordion/RuiAccordion.vue.js';
 import RuiAccordions, { type Props as AccordionsProps } from '../components/accordions/accordions/RuiAccordions.vue.js';
 import RuiAlert, { type Props as AlertProps } from '../components/alerts/RuiAlert.vue.js';
@@ -8,7 +8,7 @@ import RuiCalendar, { type CalendarProps } from '../components/calendar/RuiCalen
 import RuiCard, { type Props as CardProps } from '../components/cards/RuiCard.vue.js';
 import RuiCardHeader, { type Props as CardHeaderProps } from '../components/cards/RuiCardHeader.vue.js';
 import RuiChip, { type Props as ChipProps } from '../components/chips/RuiChip.vue.js';
-import RuiColorPicker, { type Props as ColorPickerProps } from '../components/color-picker/RuiColorPicker.vue.js';
+import RuiColorPicker from '../components/color-picker/RuiColorPicker.vue.js';
 import RuiDateTimePicker, { type RuiDateTimePickerProps } from '../components/date-time-picker/RuiDateTimePicker.vue.js';
 import RuiDivider, { type Props as DividerProps } from '../components/divider/RuiDivider.vue.js';
 import RuiAutoComplete, { type AutoCompleteProps } from '../components/forms/auto-complete/RuiAutoComplete.vue.js';
@@ -39,9 +39,9 @@ import RuiDataTable, { type TableOptions as DataTableOptions, type Props as Data
 import RuiTableRowExpander, { type Props as ExpandButtonProps } from '../components/tables/RuiExpandButton.vue.js';
 import RuiTablePagination, { type TablePaginationData, type Props as TablePaginationProps } from '../components/tables/RuiTablePagination.vue.js';
 import RuiTabItem, { type Props as TabItemProps } from '../components/tabs/tab-item/RuiTabItem.vue.js';
-import RuiTabItems, { type Props as TabItemsProps } from '../components/tabs/tab-items/RuiTabItems.vue.js';
+import RuiTabItems from '../components/tabs/tab-items/RuiTabItems.vue.js';
 import RuiTab, { type Props as TabProps } from '../components/tabs/tab/RuiTab.vue.js';
 import RuiTabs, { type Props as TabsProps } from '../components/tabs/tabs/RuiTabs.vue.js';
 import RuiTimePicker, { type RuiTimePickerProps } from '../components/time-picker/RuiTimePicker.vue.js';
-export type { AccordionProps, AccordionsProps, AlertProps, AutoCompleteProps, BadgeProps, BottomSheetProps, ButtonGroupProps, ButtonProps, CalendarProps, CardHeaderProps, CardProps, CheckboxProps, ChipProps, ColorPickerProps, DataTableColumn, DataTableGroupKeys, DataTableOptions, DataTableProps, DataTableSortColumn, DataTableSortData, DialogProps, DividerProps, ExpandButtonProps, FooterStepperProps, IconProps, LogoProps, MenuProps, MenuSelectProps, NavigationDrawerProps, NotificationProps, ProgressProps, RadioGroupProps, RadioProps, RevealableTextFieldProps, RuiDateTimePickerProps, RuiTimePickerProps, SimpleSelectProps, SkeletonLoaderProps, SliderProps, StepperProps, SwitchProps, TabItemProps, TabItemsProps, TablePaginationData, TablePaginationProps, TabProps, TabsProps, TextAreaProps, TextFieldProps, TooltipProps, };
+export type { AccordionProps, AccordionsProps, AlertProps, AutoCompleteProps, BadgeProps, BottomSheetProps, ButtonGroupProps, ButtonProps, CalendarProps, CardHeaderProps, CardProps, CheckboxProps, ChipProps, DataTableColumn, DataTableGroupKeys, DataTableOptions, DataTableProps, DataTableSortColumn, DataTableSortData, DialogProps, DividerProps, ExpandButtonProps, FooterStepperProps, GroupData, IconProps, LogoProps, MenuProps, MenuSelectProps, NavigationDrawerProps, NotificationProps, ProgressProps, RadioGroupProps, RadioProps, RevealableTextFieldProps, RuiDateTimePickerProps, RuiTimePickerProps, SimpleSelectProps, SkeletonLoaderProps, SliderProps, StepperProps, SwitchProps, TabItemProps, TablePaginationData, TablePaginationProps, TabProps, TabsProps, TextAreaProps, TextFieldProps, TooltipProps, };
 export { RuiAccordion, RuiAccordions, RuiAlert, RuiAutoComplete, RuiBadge, RuiBottomSheet, RuiButton, RuiButtonGroup, RuiCalendar, RuiCard, RuiCardHeader, RuiCheckbox, RuiChip, RuiColorPicker, RuiDataTable, RuiDateTimePicker, RuiDialog, RuiDivider, RuiFooterStepper, RuiIcon, RuiLogo, RuiMenu, RuiMenuSelect, RuiNavigationDrawer, RuiNotification, RuiProgress, RuiRadio, RuiRadioGroup, RuiRevealableTextField, RuiSimpleSelect, RuiSkeletonLoader, RuiSlider, RuiStepper, RuiSwitch, RuiTab, RuiTabItem, RuiTabItems, RuiTablePagination, RuiTableRowExpander, RuiTabs, RuiTextArea, RuiTextField, RuiTimePicker, RuiTooltip, };

package/dist/components/loaders/RuiSkeletonBase.vue.d.ts

@@ -1,8 +1,6 @@
 export interface Props {
     rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    rounded: "none" | "sm" | "md" | "lg" | "full";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/loaders/RuiSkeletonBase.vue2.js

@@ -1,11 +1,11 @@
-import { defineComponent, createElementBlock, openBlock, normalizeClass } from "vue";
+import { defineComponent, openBlock, createElementBlock, normalizeClass } from "vue";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiSkeletonLoaderBase"
   },
   __name: "RuiSkeletonBase",
   props: {
-    rounded: { default: void 0 }
+    rounded: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {

package/dist/components/loaders/RuiSkeletonBase.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonBase.vue2.js","sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nwithDefaults(defineProps<Props>(), {\n  rounded: undefined,\n});\n</script>\n\n<template>\n  <div\n    :class=\"[$style.skeleton, { [`rounded-${rounded}`]: !!rounded }]\"\n    role=\"alert\"\n  />\n</template>\n\n<style lang=\"scss\" module>\n.skeleton {\n  @apply animate-pulse bg-black/[.12];\n}\n\n:global(.dark) {\n  .skeleton {\n    @apply bg-white/[.16];\n  }\n}\n</style>\n"],"names":["_createElementBlock","$style"],"mappings":";;;;;;;;;;;0BAeEA,mBAGE,OAAA;AAAA,QAFC,uBAAQC,KAAAA,OAAO,UAAQ,EAAA,CAAA,WAAgB,QAAA,OAAO,OAAO,QAAA,QAAA,CAAO,CAAA;AAAA,QAC7D,MAAK;AAAA,MAAA;;;;"}
+{"version":3,"file":"RuiSkeletonBase.vue2.js","sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n</script>\n\n<template>\n  <div\n    :class=\"[$style.skeleton, { [`rounded-${rounded}`]: !!rounded }]\"\n    role=\"alert\"\n  />\n</template>\n\n<style lang=\"scss\" module>\n.skeleton {\n  @apply animate-pulse bg-black/[.12];\n}\n\n:global(.dark) {\n  .skeleton {\n    @apply bg-white/[.16];\n  }\n}\n</style>\n"],"names":["_createElementBlock","$style"],"mappings":";;;;;;;;;;;0BAaEA,mBAGE,OAAA;AAAA,QAFC,uBAAQC,KAAAA,OAAO,UAAQ,EAAA,CAAA,WAAgB,QAAA,OAAO,OAAO,QAAA,QAAA,CAAO,CAAA;AAAA,QAC7D,MAAK;AAAA,MAAA;;;;"}

package/dist/components/loaders/RuiSkeletonLoader.vue.d.ts

@@ -2,9 +2,6 @@ import { type Props as SkeletonBaseProps } from '../../components/loaders/RuiSke
 export interface Props extends SkeletonBaseProps {
     type?: 'text' | 'paragraph' | 'heading' | 'article' | 'button' | 'icon' | 'avatar' | 'thumbnail' | 'custom';
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    type: "text" | "paragraph" | "heading" | "article" | "button" | "icon" | "avatar" | "thumbnail" | "custom";
-    rounded: "none" | "sm" | "md" | "lg" | "full";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/loaders/RuiSkeletonLoader.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, createElementBlock, openBlock, mergeProps, createCommentVNode, createVNode, normalizeClass } from "vue";
+import { defineComponent, openBlock, createBlock, mergeProps, createElementBlock, normalizeClass, createCommentVNode, createVNode } from "vue";
 import RuiSkeletonBase from "./RuiSkeletonBase.vue.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -8,7 +8,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "RuiSkeletonLoader",
   props: {
     type: { default: "text" },
-    rounded: { default: void 0 }
+    rounded: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {

package/dist/components/loaders/RuiSkeletonLoader.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonLoader.vue2.js","sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiSkeletonBase, { type Props as SkeletonBaseProps } from '@/components/loaders/RuiSkeletonBase.vue';\n\nexport interface Props extends SkeletonBaseProps {\n  type?:\n    | 'text'\n    | 'paragraph'\n    | 'heading'\n    | 'article'\n    | 'button'\n    | 'icon'\n    | 'avatar'\n    | 'thumbnail'\n    | 'custom';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoader',\n  inheritAttrs: false,\n});\n\nwithDefaults(defineProps<Props>(), {\n  type: 'text',\n  rounded: undefined,\n});\n</script>\n\n<template>\n  <RuiSkeletonBase\n    v-if=\"!['paragraph', 'article'].includes(type)\"\n    :class=\"$style[`skeleton_${type}`]\"\n    :rounded=\"rounded\"\n    v-bind=\"$attrs\"\n  />\n  <div\n    v-else\n    :class=\"$style[`skeleton_${type}`]\"\n    v-bind=\"$attrs\"\n  >\n    <RuiSkeletonBase\n      v-if=\"type === 'article'\"\n      :class=\"$style.skeleton_heading\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      :class=\"$style.skeleton_text\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      :class=\"$style.skeleton_text\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      :class=\"$style.skeleton_text\"\n      :rounded=\"rounded\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.skeleton {\n  &_custom {\n    @apply box-border;\n  }\n\n  &_text {\n    @apply w-full h-4 rounded-md;\n  }\n\n  &_heading {\n    @apply w-full h-6 rounded-md;\n  }\n\n  &_button {\n    @apply w-full max-w-[6rem] h-[2.25rem] rounded-md;\n  }\n\n  &_icon {\n    @apply w-6 h-6 rounded-full;\n  }\n\n  &_avatar {\n    @apply w-10 h-10 rounded-full;\n  }\n\n  &_thumbnail {\n    @apply w-14 h-14 rounded-sm;\n  }\n\n  &_paragraph,\n  &_article {\n    @apply flex flex-col gap-2;\n\n    .skeleton_heading {\n      @apply mb-1;\n    }\n\n    .skeleton_text {\n      @apply h-3;\n\n      &:nth-child(2) {\n        @apply max-w-[80%];\n      }\n\n      &:last-child {\n        @apply max-w-[90%];\n      }\n    }\n  }\n}\n</style>\n"],"names":["_openBlock","_createBlock","_mergeProps","$style","$attrs","_createElementBlock","_normalizeClass","_createVNode"],"mappings":";;;;;;;;;;;;;;AA6BoC,aAAA,CAAA,CAAA,aAAA,SAAA,EAAA,SAAS,QAAA,IAAI,KAD/CA,UAAA,GAAAC,YAKE,iBALFC,WAKE;AAAA;QAHC,OAAOC,KAAAA,OAAM,YAAa,QAAA,IAAI,EAAA;AAAA,QAC9B,SAAS,QAAA;AAAA,MAAA,GACFC,KAAAA,MAAM,GAAA,MAAA,IAAA,CAAA,SAAA,SAAA,CAAA,MAEhBJ,UAAA,GAAAK,mBAsBM,OAtBNH,WAsBM;AAAA;QApBH,OAAOC,KAAAA,OAAM,YAAa,QAAA,IAAI,EAAA;AAAA,MAAA,GACvBC,KAAAA,MAAM,GAAA;AAAA,QAGN,QAAA,SAAI,0BADZH,YAIE,iBAAA;AAAA;UAFC,OAAKK,eAAEH,KAAAA,OAAO,gBAAgB;AAAA,UAC9B,SAAS,QAAA;AAAA,QAAA;QAEZI,YAGE,iBAAA;AAAA,UAFC,OAAKD,eAAEH,KAAAA,OAAO,aAAa;AAAA,UAC3B,SAAS,QAAA;AAAA,QAAA;QAEZI,YAGE,iBAAA;AAAA,UAFC,OAAKD,eAAEH,KAAAA,OAAO,aAAa;AAAA,UAC3B,SAAS,QAAA;AAAA,QAAA;QAEZI,YAGE,iBAAA;AAAA,UAFC,OAAKD,eAAEH,KAAAA,OAAO,aAAa;AAAA,UAC3B,SAAS,QAAA;AAAA,QAAA;;;;;"}
+{"version":3,"file":"RuiSkeletonLoader.vue2.js","sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiSkeletonBase, {\n  type Props as SkeletonBaseProps,\n} from '@/components/loaders/RuiSkeletonBase.vue';\n\nexport interface Props extends SkeletonBaseProps {\n  type?:\n    | 'text'\n    | 'paragraph'\n    | 'heading'\n    | 'article'\n    | 'button'\n    | 'icon'\n    | 'avatar'\n    | 'thumbnail'\n    | 'custom';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoader',\n  inheritAttrs: false,\n});\n\nconst { type = 'text', rounded } = defineProps<Props>();\n</script>\n\n<template>\n  <RuiSkeletonBase\n    v-if=\"!['paragraph', 'article'].includes(type)\"\n    :class=\"$style[`skeleton_${type}`]\"\n    :rounded=\"rounded\"\n    v-bind=\"$attrs\"\n  />\n  <div\n    v-else\n    :class=\"$style[`skeleton_${type}`]\"\n    v-bind=\"$attrs\"\n  >\n    <RuiSkeletonBase\n      v-if=\"type === 'article'\"\n      :class=\"$style.skeleton_heading\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      :class=\"$style.skeleton_text\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      :class=\"$style.skeleton_text\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      :class=\"$style.skeleton_text\"\n      :rounded=\"rounded\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.skeleton {\n  &_custom {\n    @apply box-border;\n  }\n\n  &_text {\n    @apply w-full h-4 rounded-md;\n  }\n\n  &_heading {\n    @apply w-full h-6 rounded-md;\n  }\n\n  &_button {\n    @apply w-full max-w-[6rem] h-[2.25rem] rounded-md;\n  }\n\n  &_icon {\n    @apply w-6 h-6 rounded-full;\n  }\n\n  &_avatar {\n    @apply w-10 h-10 rounded-full;\n  }\n\n  &_thumbnail {\n    @apply w-14 h-14 rounded-sm;\n  }\n\n  &_paragraph,\n  &_article {\n    @apply flex flex-col gap-2;\n\n    .skeleton_heading {\n      @apply mb-1;\n    }\n\n    .skeleton_text {\n      @apply h-3;\n\n      &:nth-child(2) {\n        @apply max-w-[80%];\n      }\n\n      &:last-child {\n        @apply max-w-[90%];\n      }\n    }\n  }\n}\n</style>\n"],"names":["_openBlock","_createBlock","_mergeProps","$style","$attrs","_createElementBlock","_normalizeClass","_createVNode"],"mappings":";;;;;;;;;;;;;;AA4BoC,aAAA,CAAA,CAAA,aAAA,SAAA,EAAA,SAAS,QAAA,IAAI,KAD/CA,UAAA,GAAAC,YAKE,iBALFC,WAKE;AAAA;QAHC,OAAOC,KAAAA,OAAM,YAAa,QAAA,IAAI,EAAA;AAAA,QAC9B,SAAS,QAAA;AAAA,MAAA,GACFC,KAAAA,MAAM,GAAA,MAAA,IAAA,CAAA,SAAA,SAAA,CAAA,MAEhBJ,UAAA,GAAAK,mBAsBM,OAtBNH,WAsBM;AAAA;QApBH,OAAOC,KAAAA,OAAM,YAAa,QAAA,IAAI,EAAA;AAAA,MAAA,GACvBC,KAAAA,MAAM,GAAA;AAAA,QAGN,QAAA,SAAI,0BADZH,YAIE,iBAAA;AAAA;UAFC,OAAKK,eAAEH,KAAAA,OAAO,gBAAgB;AAAA,UAC9B,SAAS,QAAA;AAAA,QAAA;QAEZI,YAGE,iBAAA;AAAA,UAFC,OAAKD,eAAEH,KAAAA,OAAO,aAAa;AAAA,UAC3B,SAAS,QAAA;AAAA,QAAA;QAEZI,YAGE,iBAAA;AAAA,UAFC,OAAKD,eAAEH,KAAAA,OAAO,aAAa;AAAA,UAC3B,SAAS,QAAA;AAAA,QAAA;QAEZI,YAGE,iBAAA;AAAA,UAFC,OAAKD,eAAEH,KAAAA,OAAO,aAAa;AAAA,UAC3B,SAAS,QAAA;AAAA,QAAA;;;;;"}

package/dist/components/logos/RuiLogo.vue.d.ts

@@ -13,12 +13,6 @@ export interface Props {
     size?: string | number;
     uniqueKey?: string | number;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    size: string | number;
-    text: boolean;
-    branch: "develop" | "main" | string;
-    logo: keyof ExternalLinks;
-    uniqueKey: string | number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/logos/RuiLogo.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, watchEffect, useSSRContext, onServerPrefetch, createElementBlock, openBlock, normalizeStyle, createCommentVNode, unref, toDisplayString } from "vue";
+import { defineComponent, useTemplateRef, ref, computed, watch, watchEffect, useSSRContext, onServerPrefetch, openBlock, createElementBlock, normalizeStyle, unref, toDisplayString, createCommentVNode } from "vue";
 import { get, set, isClient } from "@vueuse/shared";
 import fallback from "./logo.svg.js";
 import { transformCase } from "../../utils/helpers.js";
@@ -18,15 +18,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     text: { type: Boolean, default: false },
     branch: { default: "develop" },
-    logo: { default: void 0 },
+    logo: {},
     size: { default: 3 },
-    uniqueKey: { default: void 0 }
+    uniqueKey: {}
   },
   setup(__props) {
-    const props = __props;
-    const customImageRef = ref();
+    const customImageRef = useTemplateRef("customImageRef");
     const error = ref(false);
-    const decoding = ref(!!props.logo);
+    const decoding = ref(!!__props.logo);
     const pendingSources = ref(false);
     const emptyLinks = {
       app: void 0,
@@ -37,23 +36,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const externalSources = ref(emptyLinks);
     const externalSource = computed(() => {
       const sources = get(externalSources);
-      const { logo } = props;
-      if (!logo || !sources[logo]) {
+      if (!__props.logo || !sources[__props.logo]) {
         set(decoding, get(pendingSources));
         return void 0;
       }
-      const url = `https://raw.githubusercontent.com/rotki/data/${props.branch}/assets/icons/${sources[logo]}`;
-      if (props.uniqueKey !== void 0)
-        return `${url}?key=${props.uniqueKey}`;
+      const url = `https://raw.githubusercontent.com/rotki/data/${__props.branch}/assets/icons/${sources[__props.logo]}`;
+      if (__props.uniqueKey !== void 0)
+        return `${url}?key=${__props.uniqueKey}`;
       return url;
     });
     async function fetchSources() {
-      if (!props.logo)
+      if (!__props.logo)
         return;
       set(pendingSources, true);
       try {
         const { data } = await useFetch(
-          `https://raw.githubusercontent.com/rotki/data/${props.branch}/constants/asset-mappings.json`
+          `https://raw.githubusercontent.com/rotki/data/${__props.branch}/constants/asset-mappings.json`
         );
         const links = transformCase(JSON.parse(get(data) ?? "null")?.logo, "camelCase");
         if (links)
@@ -83,6 +81,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, [
         !unref(externalSource) && unref(decoding) ? (openBlock(), createElementBlock("div", {
           key: 0,
+          role: "img",
+          "aria-label": appName,
           class: "h-full transition delay-0 opacity-0",
           style: normalizeStyle({ width: `${__props.size}rem` })
         }, null, 4)) : unref(externalSource) && (!unref(error) || unref(decoding)) ? (openBlock(), createElementBlock("img", {

package/dist/components/logos/RuiLogo.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiLogo.vue.js","sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isClient } from '@vueuse/shared';\nimport { useSSRContext } from 'vue';\nimport fallback from '@/components/logos/logo.svg';\nimport { transformCase } from '@/utils/helpers';\n\nexport interface ExternalLinks {\n  drawer?: string;\n  app?: string;\n  website?: string;\n  about?: string;\n  emptyScreen?: string;\n  [key: string]: string | undefined;\n}\n\nexport interface Props {\n  text?: boolean;\n  branch?: 'develop' | 'main' | string;\n  logo?: keyof ExternalLinks;\n  size?: string | number; // in rems\n  uniqueKey?: string | number;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  text: false,\n  branch: 'develop',\n  logo: undefined,\n  size: 3,\n  uniqueKey: undefined,\n});\n\nconst customImageRef = ref<HTMLImageElement>();\nconst error = ref(false);\nconst decoding = ref(!!props.logo);\nconst pendingSources = ref(false);\nconst appName = 'rotki';\nconst emptyLinks: ExternalLinks = {\n  app: undefined,\n  website: undefined,\n  about: undefined,\n  emptyScreen: undefined,\n};\nconst externalSources = ref(emptyLinks);\n\nconst externalSource = computed(() => {\n  const sources = get(externalSources);\n  const { logo } = props;\n  if (!logo || !sources[logo]) {\n    set(decoding, get(pendingSources));\n    return undefined;\n  }\n\n  const url = `https://raw.githubusercontent.com/rotki/data/${props.branch}/assets/icons/${sources[logo]}`;\n\n  if (props.uniqueKey !== undefined)\n    return `${url}?key=${props.uniqueKey}`;\n\n  return url;\n});\n\nasync function fetchSources() {\n  if (!props.logo)\n    return;\n\n  set(pendingSources, true);\n  try {\n    const { data } = await useFetch<string>(\n      `https://raw.githubusercontent.com/rotki/data/${props.branch}/constants/asset-mappings.json`,\n    );\n\n    const links = transformCase(JSON.parse(get(data) ?? 'null')?.logo, 'camelCase');\n\n    if (links)\n      set(externalSources, links);\n  }\n  catch {}\n  set(pendingSources, false);\n}\n\nwatch(\n  () => get(customImageRef)?.complete,\n  (complete) => {\n    if (complete) {\n      get(customImageRef)\n        ?.decode()\n        .catch(() => set(error, true))\n        .finally(() => set(decoding, false));\n    }\n  },\n);\n\nwatchEffect(fetchSources);\n\nif (!isClient)\n  useSSRContext();\n\nonServerPrefetch(async () => {\n  await fetchSources();\n});\n</script>\n\n<template>\n  <div\n    class=\"gap-x-4 flex items-center relative\"\n    :style=\"{ height: `${size}rem` }\"\n  >\n    <div\n      v-if=\"!externalSource && decoding\"\n      class=\"h-full transition delay-0 opacity-0\"\n      :style=\"{ width: `${size}rem` }\"\n    />\n    <img\n      v-else-if=\"externalSource && (!error || decoding)\"\n      ref=\"customImageRef\"\n      :src=\"externalSource\"\n      :alt=\"appName\"\n      data-image=\"custom\"\n      class=\"h-full transition ease-out duration-200 delay-100\"\n      :style=\"{ width: `${size}rem` }\"\n      @error=\"error = true\"\n    />\n    <img\n      v-else\n      :src=\"fallback\"\n      :alt=\"appName\"\n      data-image=\"fallback\"\n      class=\"h-full transition ease-out duration-200 delay-100\"\n      :style=\"{ width: `${size}rem` }\"\n    />\n    <div\n      v-if=\"text\"\n      class=\"text-h4 text-rui-primary dark:text-white\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_toDisplayString"],"mappings":";;;;;;;;;;;AAuCA,MAAM,UAAU;;;;;;;;;;;;;;AAZhB,UAAM,QAAQ;AAQd,UAAM,iBAAiB,IAAA;AACvB,UAAM,QAAQ,IAAI,KAAK;AACvB,UAAM,WAAW,IAAI,CAAC,CAAC,MAAM,IAAI;AACjC,UAAM,iBAAiB,IAAI,KAAK;AAEhC,UAAM,aAA4B;AAAA,MAChC,KAAK;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,aAAa;AAAA,IAAA;AAEf,UAAM,kBAAkB,IAAI,UAAU;AAEtC,UAAM,iBAAiB,SAAS,MAAM;AACpC,YAAM,UAAU,IAAI,eAAe;AACnC,YAAM,EAAE,SAAS;AACjB,UAAI,CAAC,QAAQ,CAAC,QAAQ,IAAI,GAAG;AAC3B,YAAI,UAAU,IAAI,cAAc,CAAC;AACjC,eAAO;AAAA,MACT;AAEA,YAAM,MAAM,gDAAgD,MAAM,MAAM,iBAAiB,QAAQ,IAAI,CAAC;AAEtG,UAAI,MAAM,cAAc;AACtB,eAAO,GAAG,GAAG,QAAQ,MAAM,SAAS;AAEtC,aAAO;AAAA,IACT,CAAC;AAED,mBAAe,eAAe;AAC5B,UAAI,CAAC,MAAM;AACT;AAEF,UAAI,gBAAgB,IAAI;AACxB,UAAI;AACF,cAAM,EAAE,KAAA,IAAS,MAAM;AAAA,UACrB,gDAAgD,MAAM,MAAM;AAAA,QAAA;AAG9D,cAAM,QAAQ,cAAc,KAAK,MAAM,IAAI,IAAI,KAAK,MAAM,GAAG,MAAM,WAAW;AAE9E,YAAI;AACF,cAAI,iBAAiB,KAAK;AAAA,MAC9B,QACM;AAAA,MAAC;AACP,UAAI,gBAAgB,KAAK;AAAA,IAC3B;AAEA;AAAA,MACE,MAAM,IAAI,cAAc,GAAG;AAAA,MAC3B,CAAC,aAAa;AACZ,YAAI,UAAU;AACZ,cAAI,cAAc,GACd,OAAA,EACD,MAAM,MAAM,IAAI,OAAO,IAAI,CAAC,EAC5B,QAAQ,MAAM,IAAI,UAAU,KAAK,CAAC;AAAA,QACvC;AAAA,MACF;AAAA,IAAA;AAGF,gBAAY,YAAY;AAExB,QAAI,CAAC;AACH,oBAAA;AAEF,qBAAiB,YAAY;AAC3B,YAAM,aAAA;AAAA,IACR,CAAC;;0BAICA,mBAiCM,OAAA;AAAA,QAhCJ,OAAM;AAAA,QACL,mCAAoB,QAAA,IAAI,OAAA;AAAA,MAAA;QAGhB,CAAAC,MAAA,cAAA,KAAkBA,MAAA,QAAA,kBAD3BD,mBAIE,OAAA;AAAA;UAFA,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,QAAA,eAGbC,MAAA,cAAA,MAAc,CAAMA,MAAA,KAAA,KAASA,MAAA,QAAA,mBAD1CD,mBASE,OAAA;AAAA;mBAPI;AAAA,UAAJ,KAAI;AAAA,UACH,KAAKC,MAAA,cAAA;AAAA,UACL,KAAK;AAAA,UACN,cAAW;AAAA,UACX,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,UACvB,+CAAO,MAAA,QAAK;AAAA,QAAA,0CAEfD,mBAOE,OAAA;AAAA;UALC,KAAKC,MAAA,QAAA;AAAA,UACL,KAAK;AAAA,UACN,cAAW;AAAA,UACX,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,QAAA;QAGlB,QAAA,qBADRD,mBAKM,OALN,YAKME,gBADD,OAAO,CAAA;;;;;"}
+{"version":3,"file":"RuiLogo.vue.js","sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isClient } from '@vueuse/shared';\nimport { useSSRContext } from 'vue';\nimport fallback from '@/components/logos/logo.svg';\nimport { transformCase } from '@/utils/helpers';\n\nexport interface ExternalLinks {\n  drawer?: string;\n  app?: string;\n  website?: string;\n  about?: string;\n  emptyScreen?: string;\n  [key: string]: string | undefined;\n}\n\nexport interface Props {\n  text?: boolean;\n  branch?: 'develop' | 'main' | string;\n  logo?: keyof ExternalLinks;\n  size?: string | number; // in rems\n  uniqueKey?: string | number;\n}\n\ndefineOptions({\n  name: 'RuiLogo',\n});\n\nconst { text = false, branch = 'develop', logo, size = 3, uniqueKey } = defineProps<Props>();\n\nconst customImageRef = useTemplateRef<HTMLImageElement>('customImageRef');\nconst error = ref<boolean>(false);\nconst decoding = ref<boolean>(!!logo);\nconst pendingSources = ref<boolean>(false);\nconst appName = 'rotki';\nconst emptyLinks: ExternalLinks = {\n  app: undefined,\n  website: undefined,\n  about: undefined,\n  emptyScreen: undefined,\n};\nconst externalSources = ref<ExternalLinks>(emptyLinks);\n\nconst externalSource = computed<string | undefined>(() => {\n  const sources = get(externalSources);\n  if (!logo || !sources[logo]) {\n    set(decoding, get(pendingSources));\n    return undefined;\n  }\n\n  const url = `https://raw.githubusercontent.com/rotki/data/${branch}/assets/icons/${sources[logo]}`;\n\n  if (uniqueKey !== undefined)\n    return `${url}?key=${uniqueKey}`;\n\n  return url;\n});\n\nasync function fetchSources(): Promise<void> {\n  if (!logo)\n    return;\n\n  set(pendingSources, true);\n  try {\n    const { data } = await useFetch<string>(\n      `https://raw.githubusercontent.com/rotki/data/${branch}/constants/asset-mappings.json`,\n    );\n\n    const links = transformCase(JSON.parse(get(data) ?? 'null')?.logo, 'camelCase');\n\n    if (links)\n      set(externalSources, links);\n  }\n  catch {}\n  set(pendingSources, false);\n}\n\nwatch(\n  () => get(customImageRef)?.complete,\n  (complete) => {\n    if (complete) {\n      get(customImageRef)\n        ?.decode()\n        .catch(() => set(error, true))\n        .finally(() => set(decoding, false));\n    }\n  },\n);\n\nwatchEffect(fetchSources);\n\nif (!isClient)\n  useSSRContext();\n\nonServerPrefetch(async () => {\n  await fetchSources();\n});\n</script>\n\n<template>\n  <div\n    class=\"gap-x-4 flex items-center relative\"\n    :style=\"{ height: `${size}rem` }\"\n  >\n    <div\n      v-if=\"!externalSource && decoding\"\n      role=\"img\"\n      :aria-label=\"appName\"\n      class=\"h-full transition delay-0 opacity-0\"\n      :style=\"{ width: `${size}rem` }\"\n    />\n    <img\n      v-else-if=\"externalSource && (!error || decoding)\"\n      ref=\"customImageRef\"\n      :src=\"externalSource\"\n      :alt=\"appName\"\n      data-image=\"custom\"\n      class=\"h-full transition ease-out duration-200 delay-100\"\n      :style=\"{ width: `${size}rem` }\"\n      @error=\"error = true\"\n    />\n    <img\n      v-else\n      :src=\"fallback\"\n      :alt=\"appName\"\n      data-image=\"fallback\"\n      class=\"h-full transition ease-out duration-200 delay-100\"\n      :style=\"{ width: `${size}rem` }\"\n    />\n    <div\n      v-if=\"text\"\n      class=\"text-h4 text-rui-primary dark:text-white\"\n    >\n      {{ appName }}\n    </div>\n  </div>\n</template>\n"],"names":["_createElementBlock","_unref","_toDisplayString"],"mappings":";;;;;;;;;;;AAiCA,MAAM,UAAU;;;;;;;;;;;;;;AAJhB,UAAM,iBAAiB,eAAiC,gBAAgB;AACxE,UAAM,QAAQ,IAAa,KAAK;AAChC,UAAM,WAAW,IAAa,CAAC,CAAC,YAAI;AACpC,UAAM,iBAAiB,IAAa,KAAK;AAEzC,UAAM,aAA4B;AAAA,MAChC,KAAK;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,aAAa;AAAA,IAAA;AAEf,UAAM,kBAAkB,IAAmB,UAAU;AAErD,UAAM,iBAAiB,SAA6B,MAAM;AACxD,YAAM,UAAU,IAAI,eAAe;AACnC,UAAI,CAAC,QAAA,QAAQ,CAAC,QAAQ,QAAA,IAAI,GAAG;AAC3B,YAAI,UAAU,IAAI,cAAc,CAAC;AACjC,eAAO;AAAA,MACT;AAEA,YAAM,MAAM,gDAAgD,QAAA,MAAM,iBAAiB,QAAQ,QAAA,IAAI,CAAC;AAEhG,UAAI,QAAA,cAAc;AAChB,eAAO,GAAG,GAAG,QAAQ,QAAA,SAAS;AAEhC,aAAO;AAAA,IACT,CAAC;AAED,mBAAe,eAA8B;AAC3C,UAAI,CAAC,QAAA;AACH;AAEF,UAAI,gBAAgB,IAAI;AACxB,UAAI;AACF,cAAM,EAAE,KAAA,IAAS,MAAM;AAAA,UACrB,gDAAgD,QAAA,MAAM;AAAA,QAAA;AAGxD,cAAM,QAAQ,cAAc,KAAK,MAAM,IAAI,IAAI,KAAK,MAAM,GAAG,MAAM,WAAW;AAE9E,YAAI;AACF,cAAI,iBAAiB,KAAK;AAAA,MAC9B,QACM;AAAA,MAAC;AACP,UAAI,gBAAgB,KAAK;AAAA,IAC3B;AAEA;AAAA,MACE,MAAM,IAAI,cAAc,GAAG;AAAA,MAC3B,CAAC,aAAa;AACZ,YAAI,UAAU;AACZ,cAAI,cAAc,GACd,OAAA,EACD,MAAM,MAAM,IAAI,OAAO,IAAI,CAAC,EAC5B,QAAQ,MAAM,IAAI,UAAU,KAAK,CAAC;AAAA,QACvC;AAAA,MACF;AAAA,IAAA;AAGF,gBAAY,YAAY;AAExB,QAAI,CAAC;AACH,oBAAA;AAEF,qBAAiB,YAAY;AAC3B,YAAM,aAAA;AAAA,IACR,CAAC;;0BAICA,mBAmCM,OAAA;AAAA,QAlCJ,OAAM;AAAA,QACL,mCAAoB,QAAA,IAAI,OAAA;AAAA,MAAA;QAGhB,CAAAC,MAAA,cAAA,KAAkBA,MAAA,QAAA,kBAD3BD,mBAME,OAAA;AAAA;UAJA,MAAK;AAAA,UACJ,cAAY;AAAA,UACb,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,QAAA,eAGbC,MAAA,cAAA,MAAc,CAAMA,MAAA,KAAA,KAASA,MAAA,QAAA,mBAD1CD,mBASE,OAAA;AAAA;mBAPI;AAAA,UAAJ,KAAI;AAAA,UACH,KAAKC,MAAA,cAAA;AAAA,UACL,KAAK;AAAA,UACN,cAAW;AAAA,UACX,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,UACvB,+CAAO,MAAA,QAAK;AAAA,QAAA,0CAEfD,mBAOE,OAAA;AAAA;UALC,KAAKC,MAAA,QAAA;AAAA,UACL,KAAK;AAAA,UACN,cAAW;AAAA,UACX,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,QAAA;QAGlB,QAAA,qBADRD,mBAKM,OALN,YAKME,gBADD,OAAO,CAAA;;;;;"}

package/dist/components/overlays/badge/RuiBadge.vue.d.ts

@@ -13,27 +13,12 @@ export interface Props {
     rounded?: 'sm' | 'md' | 'lg' | 'full';
     color?: 'default' | ContextColorsType;
 }
-declare var __VLS_1: {}, __VLS_9: {}, __VLS_11: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    badge?: (props: typeof __VLS_9) => any;
-} & {
-    icon?: (props: typeof __VLS_11) => any;
+type __VLS_Slots = {
+    default?: () => any;
+    badge?: () => any;
+    icon?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    left: boolean;
-    size: "sm" | "md" | "lg";
-    placement: "top" | "center" | "bottom";
-    color: "default" | ContextColorsType;
-    text: string | null;
-    rounded: "sm" | "md" | "lg" | "full";
-    icon: RuiIcons | null;
-    modelValue: boolean;
-    dot: boolean;
-    offsetX: string | number;
-    offsetY: string | number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, 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/overlays/badge/RuiBadge.vue2.js

@@ -1,6 +1,6 @@
-import { defineComponent, useCssVars, unref, toRefs, useSlots, createElementBlock, openBlock, normalizeClass, renderSlot, createVNode, Transition, withCtx, createCommentVNode, createElementVNode, toDisplayString, createBlock } from "vue";
-import { logicOr, logicAnd } from "@vueuse/math";
+import { defineComponent, useCssVars, useSlots, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createVNode, Transition, withCtx, unref, createElementVNode, toDisplayString, createBlock, createCommentVNode } from "vue";
 import RuiIcon from "../../icons/RuiIcon.vue.js";
+import { get } from "@vueuse/shared";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiBadge"
@@ -21,15 +21,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v5565a483": unref(offsetX),
-      "v5565a484": unref(offsetY)
+      "v779996be": _ctx.offsetX,
+      "v779996bc": _ctx.offsetY
     }));
-    const props = __props;
     const slots = useSlots();
-    const { modelValue, offsetX, offsetY, icon, text } = toRefs(props);
-    const hasIcon = logicOr(icon, slots.icon);
-    const hasText = logicOr(text, slots.badge);
-    const hasIconAndText = logicAnd(hasIcon, hasText);
+    const hasIcon = computed(() => !!__props.icon || !!slots.icon);
+    const hasText = computed(() => !!__props.text || !!slots.badge);
+    const hasIconAndText = computed(() => get(hasIcon) && get(hasText));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.wrapper)
@@ -45,7 +43,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "leave-to-class": "scale-0"
         }, {
           default: withCtx(() => [
-            unref(modelValue) ? (openBlock(), createElementBlock("div", {
+            __props.modelValue ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass([
                 _ctx.$style.badge,
@@ -70,12 +68,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ])
               }, [
                 renderSlot(_ctx.$slots, "badge", {}, () => [
-                  createElementVNode("span", null, toDisplayString(unref(text)), 1)
+                  createElementVNode("span", null, toDisplayString(__props.text), 1)
                 ]),
                 renderSlot(_ctx.$slots, "icon", {}, () => [
-                  unref(icon) ? (openBlock(), createBlock(RuiIcon, {
+                  __props.icon ? (openBlock(), createBlock(RuiIcon, {
                     key: 0,
-                    name: unref(icon),
+                    name: __props.icon,
                     size: "16",
                     class: normalizeClass({ "ml-0.5": unref(hasText) })
                   }, null, 8, ["name", "class"])) : createCommentVNode("", true)