@rotki/ui-library 2.12.1 → 2.12.2

package/dist/components/forms/slider/RuiSlider.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSlider.vue2.js","sources":["../../../../src/components/forms/slider/RuiSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props {\n  modelValue?: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  showThumbLabel?: boolean;\n  showTicks?: boolean;\n  hideTrack?: boolean;\n  tickSize?: number;\n  vertical?: boolean;\n  color?: ContextColorsType;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  sliderClass?: string;\n  tickClass?: string;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSlider',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: 0,\n  min: 0,\n  max: 100,\n  step: 1,\n  disabled: false,\n  showThumbLabel: false,\n  showTicks: false,\n  hideTrack: false,\n  vertical: false,\n  tickSize: 2,\n  color: 'primary',\n  label: '',\n  hint: '',\n  errorMessages: () => [],\n  successMessages: () => [],\n  hideDetails: false,\n  sliderClass: '',\n  tickClass: '',\n  required: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: number): void;\n}>();\n\nconst { modelValue, max, min, step, errorMessages, successMessages, vertical, tickSize } = toRefs(props);\n\nconst vModel = computed({\n  get() {\n    return get(modelValue);\n  },\n  set(value: number) {\n    emit('update:model-value', value);\n  },\n});\n\nconst ticksData = computed<[number, number]>(() => {\n  const minVal = get(min);\n  const stepVal = get(step);\n  const range = get(max) - minVal;\n  const total = range / stepVal;\n  const current = Math.round((get(modelValue) - minVal) / stepVal);\n\n  return [current, total];\n});\n\nconst trackWidth = computed(() => {\n  const [current, total] = get(ticksData);\n  const percentage = Math.min(100, Math.max(0, Math.round(current / total * 100)));\n  return `${percentage}%`;\n});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  errorMessages,\n  successMessages,\n);\n\nconst outer = ref<HTMLDivElement>();\nconst { width, height } = useElementBounding(outer);\n\nconst sliderWidth = computed(() => `${get(width)}px`);\nconst sliderHeight = computed(() => `${get(height)}px`);\nconst tickSizeInPx = computed(() => `${get(tickSize)}px`);\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"[\n        $style.wrapper,\n        {\n          [$style.disabled ?? '']: disabled,\n          [$style.vertical ?? '']: vertical,\n          [$style[color] ?? '']: color,\n          [$style['hide-track'] ?? '']: hideTrack,\n          [$style['big-tick'] ?? '']: tickSize > 4,\n          [$style['with-error'] ?? '']: hasError,\n          [$style['with-success'] ?? '']: hasSuccess && !hasError,\n        },\n      ]\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div\n        v-if=\"label\"\n        :class=\"$style.label\"\n        class=\"text-body-1\"\n      >\n        {{ label }}\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </div>\n      <div\n        ref=\"outer\"\n        :class=\"$style.outer\"\n      >\n        <div :class=\"$style.inner\">\n          <input\n            v-model=\"vModel\"\n            :class=\"$style.input\"\n            type=\"range\"\n            :max=\"max\"\n            :min=\"min\"\n            :step=\"step\"\n            :disabled=\"disabled\"\n            :aria-invalid=\"hasError\"\n            v-bind=\"getNonRootAttrs($attrs)\"\n          />\n          <div :class=\"$style.slider\">\n            <div :class=\"$style.slider__inner\">\n              <div :class=\"[$style.slider__container, sliderClass]\">\n                <div\n                  v-if=\"!hideTrack\"\n                  :class=\"$style.slider__container__track\"\n                />\n                <div\n                  v-if=\"showTicks && !disabled\"\n                  :class=\"$style.slider__ticks\"\n                >\n                  <span\n                    v-for=\"i in (ticksData[1] + 1)\"\n                    :key=\"i\"\n                    :class=\"hideTrack ? [tickClass] : { [$style.highlighted]: i - 1 <= ticksData[0], [tickClass]: i - 1 > ticksData[0] }\"\n                  />\n                </div>\n              </div>\n              <div :class=\"$style.slider__thumb\" />\n              <div\n                v-if=\"showThumbLabel && !disabled\"\n                :class=\"$style.slider__thumb_label\"\n              >\n                {{ modelValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\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    &.disabled {\n      .inner {\n        .slider {\n          &__container {\n            @apply bg-rui-grey-800 #{!important};\n\n            &__track {\n              @apply bg-rui-grey-700 #{!important};\n            }\n          }\n\n          &__thumb {\n            @apply bg-rui-grey-700 #{!important};\n          }\n        }\n      }\n    }\n\n    .inner {\n      .slider {\n        &__ticks {\n          span {\n            &.highlighted {\n              @apply bg-[#121212];\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n.wrapper {\n  @apply flex items-start gap-3;\n\n  &.disabled {\n    .label {\n      @apply text-rui-text-disabled;\n    }\n    .inner {\n      .slider {\n        &__container {\n          @apply bg-rui-grey-300 #{!important};\n\n          &__track {\n            @apply bg-rui-grey-400 #{!important};\n          }\n        }\n\n        &__thumb {\n          @apply bg-rui-grey-400 #{!important};\n        }\n      }\n    }\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color},\n    &.with-#{$color} {\n      .inner {\n        .slider {\n          &__container {\n            @apply bg-rui-#{$color} bg-opacity-40;\n\n            &__track {\n              @apply bg-rui-#{$color};\n            }\n          }\n\n          &__thumb {\n            @apply bg-rui-#{$color};\n\n            &:before {\n              @apply bg-rui-#{$color};\n            }\n          }\n\n          &__ticks {\n            span {\n              @apply bg-rui-#{$color};\n            }\n          }\n        }\n      }\n\n      &.big-tick {\n        .inner {\n          .slider {\n            &__ticks {\n              span {\n                @apply bg-rui-#{$color}-lighter;\n\n                &.highlighted {\n                  @apply bg-rui-#{$color};\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @each $color in ('error', 'success') {\n    &.with-#{$color} {\n      .label {\n        @apply text-rui-#{$color};\n      }\n    }\n  }\n\n  &.vertical {\n    @apply flex-col-reverse items-center h-full;\n\n    .label {\n      @apply mb-2 text-center;\n    }\n\n    .outer {\n      @apply min-w-0 min-h-[120px] w-8;\n    }\n\n    .inner {\n      width: v-bind(sliderHeight);\n      height: v-bind(sliderWidth);\n      @apply -rotate-90;\n      transform-origin: 0 0;\n      --tw-translate-y: v-bind(sliderHeight);\n\n      .slider {\n        &__thumb {\n          &_label {\n            @apply mt-6;\n            @apply rotate-90 translate-x-0;\n            transform-origin: 0 50%;\n          }\n        }\n      }\n    }\n  }\n\n  .label {\n    @apply mt-1 text-rui-text;\n  }\n\n  .outer {\n    @apply relative h-8 flex-1 min-w-[120px];\n  }\n\n  .inner {\n    width: v-bind(sliderWidth);\n    height: v-bind(sliderHeight);\n    @apply relative;\n\n    .input {\n      @apply h-full w-full opacity-0 cursor-pointer;\n\n      &:not(:disabled) {\n        &:hover {\n          ~ .slider {\n            .slider {\n              &__thumb {\n                &:before {\n                  @apply scale-100;\n                }\n              }\n            }\n          }\n        }\n\n        &:focus {\n          ~ .slider {\n            .slider {\n              &__thumb {\n                &:before {\n                  @apply scale-100 opacity-15;\n                }\n              }\n            }\n          }\n        }\n\n        &:active {\n          ~ .slider {\n            .slider {\n              &__thumb {\n                &:before {\n                  @apply scale-100 opacity-30;\n                }\n\n                &_label {\n                  @apply opacity-100 visible;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n\n    .slider {\n      @apply absolute h-full w-full top-0 px-2 pointer-events-none;\n\n      &__inner {\n        @apply relative h-full w-full cursor-pointer;\n      }\n\n      &__container {\n        @apply absolute top-1/2 transform -translate-y-1/2;\n        @apply w-full h-1 rounded-full;\n\n        &__track {\n          width: v-bind(trackWidth);\n          @apply transition-all ease-linear duration-75 delay-0;\n          @apply h-full rounded-full;\n        }\n      }\n\n      &__ticks {\n        @apply h-full absolute top-0;\n        @apply flex justify-between items-center;\n        margin: 0 calc(v-bind(tickSizeInPx) / -2);\n        width: calc(100% + v-bind(tickSizeInPx));\n\n        span {\n          @apply rounded-full;\n          width: calc(v-bind(tickSizeInPx));\n          height: calc(v-bind(tickSizeInPx));\n\n          &.highlighted {\n            @apply bg-rui-grey-100;\n          }\n        }\n      }\n\n      &__thumb {\n        @apply absolute top-1/2 transition-all ease-linear duration-75 delay-0 transform -translate-y-1/2 -translate-x-1/2;\n        @apply w-3 h-3 rounded-full shadow-2;\n        left: v-bind(trackWidth);\n\n        &:before {\n          @apply w-8 h-8 rounded-full absolute top-1/2 left-1/2;\n          @apply opacity-10;\n          @apply transition transform -translate-x-1/2 -translate-y-1/2 scale-0;\n          content: '';\n        }\n\n        &_label {\n          left: v-bind(trackWidth);\n          @apply invisible opacity-0;\n          @apply absolute -mt-7 transition-all ease-linear duration-75 delay-0 transform -translate-x-1/2;\n          @apply px-2 py-1 text-xs font-normal;\n          @apply bg-rui-grey-700/90 text-white rounded shadow;\n        }\n      }\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$style","_createTextVNode","_toDisplayString","_withDirectives","_mergeProps","_Fragment","_renderList","_createBlock","RuiFormTextDetail"],"mappings":"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"}
+{"version":3,"file":"RuiSlider.vue2.js","sources":["../../../../src/components/forms/slider/RuiSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props {\n  modelValue?: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  showThumbLabel?: boolean;\n  showTicks?: boolean;\n  hideTrack?: boolean;\n  tickSize?: number;\n  vertical?: boolean;\n  color?: ContextColorsType;\n  label?: string;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  sliderClass?: string;\n  tickClass?: string;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiSlider',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: 0,\n  min: 0,\n  max: 100,\n  step: 1,\n  disabled: false,\n  showThumbLabel: false,\n  showTicks: false,\n  hideTrack: false,\n  vertical: false,\n  tickSize: 2,\n  color: 'primary',\n  label: '',\n  hint: '',\n  errorMessages: () => [],\n  successMessages: () => [],\n  hideDetails: false,\n  sliderClass: '',\n  tickClass: '',\n  required: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:model-value', value: number): void;\n}>();\n\nconst { modelValue, max, min, step, errorMessages, successMessages, vertical, tickSize } = toRefs(props);\n\nconst vModel = computed({\n  get() {\n    return get(modelValue);\n  },\n  set(value: number) {\n    emit('update:model-value', value);\n  },\n});\n\nconst ticksData = computed<[number, number]>(() => {\n  const minVal = get(min);\n  const stepVal = get(step);\n  const range = get(max) - minVal;\n  const total = range / stepVal;\n  const current = Math.round((get(modelValue) - minVal) / stepVal);\n\n  return [current, total];\n});\n\nconst trackWidth = computed(() => {\n  const [current, total] = get(ticksData);\n  const percentage = Math.min(100, Math.max(0, Math.round(current / total * 100)));\n  return `${percentage}%`;\n});\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  errorMessages,\n  successMessages,\n);\n\nconst outer = ref<HTMLDivElement>();\nconst { width, height } = useElementBounding(outer);\n\nconst sliderWidth = computed(() => `${get(width)}px`);\nconst sliderHeight = computed(() => `${get(height)}px`);\nconst tickSizeInPx = computed(() => `${get(tickSize)}px`);\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <label\n      :class=\"[\n        $style.wrapper,\n        {\n          [$style.disabled ?? '']: disabled,\n          [$style.vertical ?? '']: vertical,\n          [$style[color] ?? '']: color,\n          [$style['hide-track'] ?? '']: hideTrack,\n          [$style['big-tick'] ?? '']: tickSize > 4,\n          [$style['with-error'] ?? '']: hasError,\n          [$style['with-success'] ?? '']: hasSuccess && !hasError,\n        },\n      ]\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div\n        v-if=\"label\"\n        :class=\"$style.label\"\n        class=\"text-body-1\"\n      >\n        {{ label }}\n        <span\n          v-if=\"required\"\n          class=\"text-rui-error\"\n        >\n          ﹡\n        </span>\n      </div>\n      <div\n        ref=\"outer\"\n        :class=\"$style.outer\"\n      >\n        <div :class=\"$style.inner\">\n          <input\n            v-model=\"vModel\"\n            :class=\"$style.input\"\n            type=\"range\"\n            :max=\"max\"\n            :min=\"min\"\n            :step=\"step\"\n            :disabled=\"disabled\"\n            :aria-invalid=\"hasError\"\n            :aria-label=\"label || undefined\"\n            :aria-valuetext=\"String(vModel)\"\n            v-bind=\"getNonRootAttrs($attrs)\"\n          />\n          <div :class=\"$style.slider\">\n            <div :class=\"$style.slider__inner\">\n              <div :class=\"[$style.slider__container, sliderClass]\">\n                <div\n                  v-if=\"!hideTrack\"\n                  :class=\"$style.slider__container__track\"\n                />\n                <div\n                  v-if=\"showTicks && !disabled\"\n                  :class=\"$style.slider__ticks\"\n                >\n                  <span\n                    v-for=\"i in (ticksData[1] + 1)\"\n                    :key=\"i\"\n                    :class=\"hideTrack ? [tickClass] : { [$style.highlighted]: i - 1 <= ticksData[0], [tickClass]: i - 1 > ticksData[0] }\"\n                  />\n                </div>\n              </div>\n              <div :class=\"$style.slider__thumb\" />\n              <div\n                v-if=\"showThumbLabel && !disabled\"\n                :class=\"$style.slider__thumb_label\"\n              >\n                {{ modelValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </label>\n    <RuiFormTextDetail\n      v-if=\"!hideDetails\"\n      class=\"pt-1\"\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    &.disabled {\n      .inner {\n        .slider {\n          &__container {\n            @apply bg-rui-grey-800 #{!important};\n\n            &__track {\n              @apply bg-rui-grey-700 #{!important};\n            }\n          }\n\n          &__thumb {\n            @apply bg-rui-grey-700 #{!important};\n          }\n        }\n      }\n    }\n\n    .inner {\n      .slider {\n        &__ticks {\n          span {\n            &.highlighted {\n              @apply bg-[#121212];\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n.wrapper {\n  @apply flex items-start gap-3;\n\n  &.disabled {\n    .label {\n      @apply text-rui-text-disabled;\n    }\n    .inner {\n      .slider {\n        &__container {\n          @apply bg-rui-grey-300 #{!important};\n\n          &__track {\n            @apply bg-rui-grey-400 #{!important};\n          }\n        }\n\n        &__thumb {\n          @apply bg-rui-grey-400 #{!important};\n        }\n      }\n    }\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color},\n    &.with-#{$color} {\n      .inner {\n        .slider {\n          &__container {\n            @apply bg-rui-#{$color} bg-opacity-40;\n\n            &__track {\n              @apply bg-rui-#{$color};\n            }\n          }\n\n          &__thumb {\n            @apply bg-rui-#{$color};\n\n            &:before {\n              @apply bg-rui-#{$color};\n            }\n          }\n\n          &__ticks {\n            span {\n              @apply bg-rui-#{$color};\n            }\n          }\n        }\n      }\n\n      &.big-tick {\n        .inner {\n          .slider {\n            &__ticks {\n              span {\n                @apply bg-rui-#{$color}-lighter;\n\n                &.highlighted {\n                  @apply bg-rui-#{$color};\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @each $color in ('error', 'success') {\n    &.with-#{$color} {\n      .label {\n        @apply text-rui-#{$color};\n      }\n    }\n  }\n\n  &.vertical {\n    @apply flex-col-reverse items-center h-full;\n\n    .label {\n      @apply mb-2 text-center;\n    }\n\n    .outer {\n      @apply min-w-0 min-h-[120px] w-8;\n    }\n\n    .inner {\n      width: v-bind(sliderHeight);\n      height: v-bind(sliderWidth);\n      @apply -rotate-90;\n      transform-origin: 0 0;\n      --tw-translate-y: v-bind(sliderHeight);\n\n      .slider {\n        &__thumb {\n          &_label {\n            @apply mt-6;\n            @apply rotate-90 translate-x-0;\n            transform-origin: 0 50%;\n          }\n        }\n      }\n    }\n  }\n\n  .label {\n    @apply mt-1 text-rui-text;\n  }\n\n  .outer {\n    @apply relative h-8 flex-1 min-w-[120px];\n  }\n\n  .inner {\n    width: v-bind(sliderWidth);\n    height: v-bind(sliderHeight);\n    @apply relative;\n\n    .input {\n      @apply h-full w-full opacity-0 cursor-pointer;\n\n      &:not(:disabled) {\n        &:hover {\n          ~ .slider {\n            .slider {\n              &__thumb {\n                &:before {\n                  @apply scale-100;\n                }\n              }\n            }\n          }\n        }\n\n        &:focus {\n          ~ .slider {\n            .slider {\n              &__thumb {\n                &:before {\n                  @apply scale-100 opacity-15;\n                }\n              }\n            }\n          }\n        }\n\n        &:active {\n          ~ .slider {\n            .slider {\n              &__thumb {\n                &:before {\n                  @apply scale-100 opacity-30;\n                }\n\n                &_label {\n                  @apply opacity-100 visible;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n\n    .slider {\n      @apply absolute h-full w-full top-0 px-2 pointer-events-none;\n\n      &__inner {\n        @apply relative h-full w-full cursor-pointer;\n      }\n\n      &__container {\n        @apply absolute top-1/2 transform -translate-y-1/2;\n        @apply w-full h-1 rounded-full;\n\n        &__track {\n          width: v-bind(trackWidth);\n          @apply transition-all ease-linear duration-75 delay-0;\n          @apply h-full rounded-full;\n        }\n      }\n\n      &__ticks {\n        @apply h-full absolute top-0;\n        @apply flex justify-between items-center;\n        margin: 0 calc(v-bind(tickSizeInPx) / -2);\n        width: calc(100% + v-bind(tickSizeInPx));\n\n        span {\n          @apply rounded-full;\n          width: calc(v-bind(tickSizeInPx));\n          height: calc(v-bind(tickSizeInPx));\n\n          &.highlighted {\n            @apply bg-rui-grey-100;\n          }\n        }\n      }\n\n      &__thumb {\n        @apply absolute top-1/2 transition-all ease-linear duration-75 delay-0 transform -translate-y-1/2 -translate-x-1/2;\n        @apply w-3 h-3 rounded-full shadow-2;\n        left: v-bind(trackWidth);\n\n        &:before {\n          @apply w-8 h-8 rounded-full absolute top-1/2 left-1/2;\n          @apply opacity-10;\n          @apply transition transform -translate-x-1/2 -translate-y-1/2 scale-0;\n          content: '';\n        }\n\n        &_label {\n          left: v-bind(trackWidth);\n          @apply invisible opacity-0;\n          @apply absolute -mt-7 transition-all ease-linear duration-75 delay-0 transform -translate-x-1/2;\n          @apply px-2 py-1 text-xs font-normal;\n          @apply bg-rui-grey-700/90 text-white rounded shadow;\n        }\n      }\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$style","_createTextVNode","_toDisplayString","_withDirectives","_mergeProps","_Fragment","_renderList","_createBlock","RuiFormTextDetail"],"mappings":"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"}

package/dist/components/forms/switch/RuiSwitch.vue.d.ts

@@ -21,8 +21,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     "onUpdate:modelValue"?: ((modelValue: boolean) => any) | undefined;
 }>, {
     size: "sm";
-    color: ContextColorsType;
     label: string;
+    color: ContextColorsType;
     disabled: boolean;
     modelValue: boolean;
     errorMessages: string | string[];

package/dist/components/forms/switch/RuiSwitch.vue2.js

@@ -1,7 +1,7 @@
-import { defineComponent, toRefs, createElementBlock, openBlock, normalizeProps, guardReactiveProps, unref, createElementVNode, createBlock, createCommentVNode, normalizeClass, mergeProps, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, toRefs, openBlock, createElementBlock, normalizeProps, guardReactiveProps, unref, createElementVNode, normalizeClass, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createBlock } from "vue";
 import _sfc_main$1 from "../../helpers/RuiFormTextDetail.vue.js";
-import { getRootAttrs, getNonRootAttrs } from "../../../utils/helpers.js";
 import { useFormTextDetail } from "../../../utils/form-text-detail.js";
+import { getRootAttrs, getNonRootAttrs } from "../../../utils/helpers.js";
 const _hoisted_1 = ["data-error"];
 const _hoisted_2 = ["checked", "disabled", "aria-invalid"];
 const _hoisted_3 = {

package/dist/components/forms/switch/RuiSwitch.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSwitch.vue2.js","sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props {\n  modelValue?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm';\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: 'RuiSwitch',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: 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}>();\n\nconst { size, modelValue, errorMessages, successMessages } = toRefs(props);\n\nfunction input(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n  emit('update:modelValue', checked);\n}\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        $style[color ?? ''],\n        {\n          [$style.checked]: modelValue,\n          [$style.disabled]: disabled,\n          [$style['with-error']]: hasError,\n          [$style['with-success']]: hasSuccess && !hasError,\n        },\n      ]\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div :class=\"$style.inner\">\n        <input\n          :checked=\"modelValue\"\n          type=\"checkbox\"\n          :class=\"$style.input\"\n          :disabled=\"disabled\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n        />\n        <div\n          :class=\"$style.toggle\"\n        />\n      </div>\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      class=\"pt-1\"\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 gap-2 items-start cursor-pointer;\n\n  &.disabled {\n    @apply cursor-not-allowed;\n\n    .input {\n      @apply bg-rui-grey-300 cursor-not-allowed;\n    }\n\n    .label {\n      @apply text-rui-text-disabled;\n    }\n\n    .toggle {\n      @apply bg-rui-grey-500;\n    }\n  }\n\n  &:hover {\n    &:not(.disabled) {\n      .toggle {\n        @apply shadow-1;\n      }\n    }\n  }\n\n  &.checked {\n    &:not(.disabled) {\n      .input {\n        @apply bg-black;\n      }\n    }\n\n    .toggle {\n      @apply left-[21px];\n    }\n  }\n\n  &.sm {\n    .inner {\n      @apply w-10 h-5 mt-0.5;\n    }\n    .toggle {\n      @apply w-4 h-4;\n\n      &:before {\n        @apply w-6 h-6;\n      }\n    }\n\n    &.checked {\n      .toggle {\n        @apply left-[22px];\n      }\n    }\n  }\n\n  &.checked {\n    &:not(.disabled) {\n      @each $color in c.$context-colors {\n        &.#{$color} {\n          .input {\n            @apply bg-rui-#{$color};\n          }\n        }\n      }\n    }\n  }\n\n  &.with-error {\n    .input {\n      @apply bg-rui-error #{!important};\n    }\n\n    .label {\n      @apply text-rui-error;\n    }\n  }\n\n  &.with-success {\n    .input {\n      @apply bg-rui-success #{!important};\n    }\n\n    .label {\n      @apply text-rui-success;\n    }\n  }\n\n  .inner {\n    @apply relative w-[43px] h-[24px] shrink-0;\n  }\n\n  .input {\n    @apply appearance-none relative w-full h-full rounded-full bg-rui-grey-400 transition-all duration-75 ease-in-out cursor-pointer;\n\n    &:active:not(:disabled) {\n      + .toggle {\n        &:before {\n          @apply opacity-20;\n        }\n      }\n    }\n  }\n\n  .toggle {\n    @apply absolute w-5 h-5 transition-all duration-75 ease-in-out transform -translate-y-1/2 top-1/2 rounded-full pointer-events-none;\n    @apply bg-white left-[2px];\n\n    &:before {\n      content: '';\n      @apply absolute w-10 h-10 bg-black rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition-all ease-in-out opacity-0;\n    }\n  }\n}\n\n:global(.dark) {\n  .wrapper {\n    &.disabled {\n      .input {\n        @apply bg-rui-grey-800;\n      }\n\n      .toggle {\n        @apply bg-rui-grey-600;\n      }\n    }\n\n    &.checked {\n      &:not(.disabled) {\n        .input {\n          @apply bg-white;\n        }\n        .toggle {\n          @apply bg-black;\n        }\n      }\n    }\n\n    &.checked {\n      &:not(.disabled) {\n        @each $color in c.$context-colors {\n          &.#{$color} {\n            .input {\n              @apply bg-rui-#{$color}/[0.5];\n            }\n            .toggle {\n              @apply bg-rui-#{$color};\n            }\n          }\n        }\n      }\n    }\n\n    &.with-error {\n      .input {\n        @apply bg-rui-error/[0.5] #{!important};\n      }\n      .toggle {\n        @apply bg-rui-error #{!important};\n      }\n    }\n\n    &.with-success {\n      .input {\n        @apply bg-rui-success/[0.5] #{!important};\n      }\n      .toggle {\n        @apply bg-rui-success #{!important};\n      }\n    }\n  }\n\n  .input {\n    @apply bg-rui-grey-700;\n  }\n\n  .toggle {\n    &:before {\n      @apply bg-white;\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$style","_mergeProps","$slots","_renderSlot","_createBlock","RuiFormTextDetail"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,UAAM,QAAQ;AAad,UAAM,OAAO;AAIb,UAAM,EAAE,MAAM,YAAY,eAAe,gBAAA,IAAoB,OAAO,KAAK;AAEzE,aAAS,MAAM,OAAc;AAC3B,YAAM,UAAW,MAAM,OAA4B;AACnD,WAAK,qBAAqB,OAAO;AAAA,IACnC;AAEA,UAAM,EAAE,UAAU,WAAA,IAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IAAA;;0BAKAA,mBAkDM,OAAAC,eAAAC,mBAlDOC,MAAA,YAAA,EAAaC,KAAAA,MAAM,CAAA,CAAA,GAAA;AAAA,QAC9BC,mBAyCQ,SAAA;AAAA,UAxCL,OAAKC,eAAA;AAAA,YAAYC,KAAAA,OAAO;AAAA,YAAiBA,KAAAA,OAAOJ,MAAA,IAAA,KAAI,EAAA;AAAA,YAAiBI,KAAAA,OAAO,QAAA,SAAK,EAAA;AAAA;eAA8BA,KAAAA,OAAO,OAAO,GAAGJ,MAAA,UAAA;AAAA,eAAuBI,KAAAA,OAAO,QAAQ,GAAG,QAAA;AAAA,cAAqBA,CAAAA,KAAAA,uBAAuBJ,MAAA,QAAA;AAAA,eAAqBI,KAAAA,OAAM,cAAA,CAAA,GAAmBJ,MAAA,UAAA,KAAU,CAAKA,MAAA,QAAA;AAAA,YAAA;AAAA;UAWlR,cAAYA,MAAA,QAAA,IAAQ,KAAQ;AAAA,QAAA;UAE7BE,mBAaM,OAAA;AAAA,YAbA,OAAKC,eAAEC,KAAAA,OAAO,KAAK;AAAA,UAAA;YACvBF,mBAQE,SARFG,WAQE;AAAA,cAPC,SAASL,MAAA,UAAA;AAAA,cACV,MAAK;AAAA,cACJ,OAAOI,KAAAA,OAAO;AAAA,cACd,UAAU,QAAA;AAAA,cACV,gBAAcJ,MAAA,QAAA;AAAA,YAAA,GACPA,MAAA,eAAA,EAAgBC,KAAAA,MAAM,GAAA;AAAA,cAC7B,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,MAAM,MAAM;AAAA,YAAA;YAEtBC,mBAEE,OAAA;AAAA,cADC,OAAKC,eAAEC,KAAAA,OAAO,MAAM;AAAA,YAAA;;UAIjB,QAAA,SAASE,KAAAA,OAAO,wBADxBT,mBAYO,QAAA;AAAA;YAVJ,OAAKM,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,4BADTW,YAMEC,aAAA;AAAA;UAJA,OAAM;AAAA,UACL,kBAAgBT,MAAA,aAAA;AAAA,UAChB,oBAAkBA,MAAA,eAAA;AAAA,UAClB,MAAM,QAAA;AAAA,QAAA;;;;;"}
+{"version":3,"file":"RuiSwitch.vue2.js","sources":["../../../../src/components/forms/switch/RuiSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props {\n  modelValue?: boolean;\n  disabled?: boolean;\n  color?: ContextColorsType;\n  size?: 'sm';\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: 'RuiSwitch',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: 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}>();\n\nconst { size, modelValue, errorMessages, successMessages } = toRefs(props);\n\nfunction input(event: Event) {\n  const checked = (event.target as HTMLInputElement).checked;\n  emit('update:modelValue', checked);\n}\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        $style[color ?? ''],\n        {\n          [$style.checked]: modelValue,\n          [$style.disabled]: disabled,\n          [$style['with-error']]: hasError,\n          [$style['with-success']]: hasSuccess && !hasError,\n        },\n      ]\"\n      :data-error=\"hasError ? '' : undefined\"\n    >\n      <div :class=\"$style.inner\">\n        <input\n          :checked=\"modelValue\"\n          type=\"checkbox\"\n          :class=\"$style.input\"\n          :disabled=\"disabled\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n          @input=\"input($event)\"\n        />\n        <div\n          :class=\"$style.toggle\"\n        />\n      </div>\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      class=\"pt-1\"\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 gap-2 items-start cursor-pointer;\n\n  &.disabled {\n    @apply cursor-not-allowed;\n\n    .input {\n      @apply bg-rui-grey-300 cursor-not-allowed;\n    }\n\n    .label {\n      @apply text-rui-text-disabled;\n    }\n\n    .toggle {\n      @apply bg-rui-grey-500;\n    }\n  }\n\n  &:hover {\n    &:not(.disabled) {\n      .toggle {\n        @apply shadow-1;\n      }\n    }\n  }\n\n  &.checked {\n    &:not(.disabled) {\n      .input {\n        @apply bg-black;\n      }\n    }\n\n    .toggle {\n      @apply left-[21px];\n    }\n  }\n\n  &.sm {\n    .inner {\n      @apply w-10 h-5 mt-0.5;\n    }\n    .toggle {\n      @apply w-4 h-4;\n\n      &:before {\n        @apply w-6 h-6;\n      }\n    }\n\n    &.checked {\n      .toggle {\n        @apply left-[22px];\n      }\n    }\n  }\n\n  &.checked {\n    &:not(.disabled) {\n      @each $color in c.$context-colors {\n        &.#{$color} {\n          .input {\n            @apply bg-rui-#{$color};\n          }\n        }\n      }\n    }\n  }\n\n  &.with-error {\n    .input {\n      @apply bg-rui-error #{!important};\n    }\n\n    .label {\n      @apply text-rui-error;\n    }\n  }\n\n  &.with-success {\n    .input {\n      @apply bg-rui-success #{!important};\n    }\n\n    .label {\n      @apply text-rui-success;\n    }\n  }\n\n  .inner {\n    @apply relative w-[43px] h-[24px] shrink-0;\n  }\n\n  .input {\n    @apply appearance-none relative w-full h-full rounded-full bg-rui-grey-400 transition-all duration-75 ease-in-out cursor-pointer;\n\n    &:active:not(:disabled) {\n      + .toggle {\n        &:before {\n          @apply opacity-20;\n        }\n      }\n    }\n  }\n\n  .toggle {\n    @apply absolute w-5 h-5 transition-all duration-75 ease-in-out transform -translate-y-1/2 top-1/2 rounded-full pointer-events-none;\n    @apply bg-white left-[2px];\n\n    &:before {\n      content: '';\n      @apply absolute w-10 h-10 bg-black rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition-all ease-in-out opacity-0;\n    }\n  }\n}\n\n:global(.dark) {\n  .wrapper {\n    &.disabled {\n      .input {\n        @apply bg-rui-grey-800;\n      }\n\n      .toggle {\n        @apply bg-rui-grey-600;\n      }\n    }\n\n    &.checked {\n      &:not(.disabled) {\n        .input {\n          @apply bg-white;\n        }\n        .toggle {\n          @apply bg-black;\n        }\n      }\n    }\n\n    &.checked {\n      &:not(.disabled) {\n        @each $color in c.$context-colors {\n          &.#{$color} {\n            .input {\n              @apply bg-rui-#{$color}/[0.5];\n            }\n            .toggle {\n              @apply bg-rui-#{$color};\n            }\n          }\n        }\n      }\n    }\n\n    &.with-error {\n      .input {\n        @apply bg-rui-error/[0.5] #{!important};\n      }\n      .toggle {\n        @apply bg-rui-error #{!important};\n      }\n    }\n\n    &.with-success {\n      .input {\n        @apply bg-rui-success/[0.5] #{!important};\n      }\n      .toggle {\n        @apply bg-rui-success #{!important};\n      }\n    }\n  }\n\n  .input {\n    @apply bg-rui-grey-700;\n  }\n\n  .toggle {\n    &:before {\n      @apply bg-white;\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$style","_mergeProps","$slots","_renderSlot","_createBlock","RuiFormTextDetail"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,UAAM,QAAQ;AAad,UAAM,OAAO;AAIb,UAAM,EAAE,MAAM,YAAY,eAAe,gBAAA,IAAoB,OAAO,KAAK;AAEzE,aAAS,MAAM,OAAc;AAC3B,YAAM,UAAW,MAAM,OAA4B;AACnD,WAAK,qBAAqB,OAAO;AAAA,IACnC;AAEA,UAAM,EAAE,UAAU,WAAA,IAAe;AAAA,MAC/B;AAAA,MACA;AAAA,IAAA;;0BAKAA,mBAkDM,OAAAC,eAAAC,mBAlDOC,MAAA,YAAA,EAAaC,KAAAA,MAAM,CAAA,CAAA,GAAA;AAAA,QAC9BC,mBAyCQ,SAAA;AAAA,UAxCL,OAAKC,eAAA;AAAA,YAAYC,KAAAA,OAAO;AAAA,YAAiBA,KAAAA,OAAOJ,MAAA,IAAA,KAAI,EAAA;AAAA,YAAiBI,KAAAA,OAAO,QAAA,SAAK,EAAA;AAAA;eAA8BA,KAAAA,OAAO,OAAO,GAAGJ,MAAA,UAAA;AAAA,eAAuBI,KAAAA,OAAO,QAAQ,GAAG,QAAA;AAAA,cAAqBA,CAAAA,KAAAA,uBAAuBJ,MAAA,QAAA;AAAA,eAAqBI,KAAAA,OAAM,cAAA,CAAA,GAAmBJ,MAAA,UAAA,KAAU,CAAKA,MAAA,QAAA;AAAA,YAAA;AAAA;UAWlR,cAAYA,MAAA,QAAA,IAAQ,KAAQ;AAAA,QAAA;UAE7BE,mBAaM,OAAA;AAAA,YAbA,OAAKC,eAAEC,KAAAA,OAAO,KAAK;AAAA,UAAA;YACvBF,mBAQE,SARFG,WAQE;AAAA,cAPC,SAASL,MAAA,UAAA;AAAA,cACV,MAAK;AAAA,cACJ,OAAOI,KAAAA,OAAO;AAAA,cACd,UAAU,QAAA;AAAA,cACV,gBAAcJ,MAAA,QAAA;AAAA,YAAA,GACPA,MAAA,eAAA,EAAgBC,KAAAA,MAAM,GAAA;AAAA,cAC7B,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,MAAM,MAAM;AAAA,YAAA;YAEtBC,mBAEE,OAAA;AAAA,cADC,OAAKC,eAAEC,KAAAA,OAAO,MAAM;AAAA,YAAA;;UAIjB,QAAA,SAASE,KAAAA,OAAO,wBADxBT,mBAYO,QAAA;AAAA;YAVJ,OAAKM,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,4BADTW,YAMEC,aAAA;AAAA;UAJA,OAAM;AAAA,UACL,kBAAgBT,MAAA,aAAA;AAAA,UAChB,oBAAkBA,MAAA,eAAA;AAAA,UAClB,MAAM,QAAA;AAAA,QAAA;;;;;"}

package/dist/components/forms/text-area/RuiTextArea.vue.d.ts

@@ -42,18 +42,18 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     "onClick:clear"?: (() => any) | undefined;
 }>, {
-    color: ContextColorsType;
     label: string;
-    disabled: boolean;
-    dense: boolean;
     readonly: boolean;
     variant: "default" | "filled" | "outlined";
+    color: ContextColorsType;
+    disabled: boolean;
     errorMessages: string | string[];
     successMessages: string | string[];
     hint: string;
     required: boolean;
     hideDetails: boolean;
     placeholder: string;
+    dense: boolean;
     textColor: ContextColorsType;
     prependIcon: RuiIcons;
     appendIcon: RuiIcons;

package/dist/components/forms/text-area/RuiTextArea.vue2.js

@@ -1,13 +1,13 @@
-import { getRootAttrs, getNonRootAttrs } from "../../../utils/helpers.js";
-import { defineComponent, mergeModels, useCssVars, unref, computed, ref, useModel, toRefs, useCssModule, watch, onMounted, createElementBlock, openBlock, normalizeProps, guardReactiveProps, createElementVNode, createBlock, createCommentVNode, normalizeClass, renderSlot, createVNode, withDirectives, normalizeStyle, mergeProps, vModelText, createTextVNode, toDisplayString, withModifiers, withCtx, nextTick } from "vue";
+import { defineComponent, useCssVars, unref, useModel, toRefs, ref, useCssModule, computed, watch, onMounted, openBlock, createElementBlock, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, renderSlot, createVNode, createCommentVNode, normalizeStyle, withDirectives, mergeProps, vModelText, createTextVNode, toDisplayString, createBlock, withModifiers, withCtx, mergeModels, nextTick } from "vue";
 import { logicAnd, logicNot } from "@vueuse/math";
 import RuiButton from "../../buttons/button/RuiButton.vue.js";
 import _sfc_main$1 from "../../helpers/RuiFormTextDetail.vue.js";
 import RuiIcon from "../../icons/RuiIcon.vue.js";
 import { assert } from "../../../utils/assert.js";
+import { useFormTextDetail } from "../../../utils/form-text-detail.js";
+import { getRootAttrs, getNonRootAttrs } from "../../../utils/helpers.js";
 import { get, set } from "@vueuse/shared";
 import { useResizeObserver, useFocus, refDebounced } from "@vueuse/core";
-import { useFormTextDetail } from "../../../utils/form-text-detail.js";
 const _hoisted_1 = ["data-error"];
 const _hoisted_2 = ["value"];
 const _hoisted_3 = ["placeholder", "disabled", "readonly", "aria-invalid"];
@@ -50,9 +50,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["click:clear"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v188749d2": unref(appendWidth),
-      "v16b7dedc": unref(prependWidth),
-      "v41348808": unref(labelWithQuote)
+      "d79da02e": unref(appendWidth),
+      "v2392254a": unref(prependWidth),
+      "v8096eaf6": unref(labelWithQuote)
     }));
     const modelValue = useModel(__props, "modelValue");
     const props = __props;
@@ -146,7 +146,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(modelValue, computeFieldHeight);
     onMounted(computeFieldHeight);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(("getRootAttrs" in _ctx ? _ctx.getRootAttrs : unref(getRootAttrs))(_ctx.$attrs))), [
+      return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(getRootAttrs)(_ctx.$attrs))), [
         createElementVNode("div", {
           class: normalizeClass([
             unref(css).wrapper,
@@ -200,7 +200,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               disabled: unref(disabled),
               readonly: unref(readonly),
               "aria-invalid": unref(hasError)
-            }, ("getNonRootAttrs" in _ctx ? _ctx.getNonRootAttrs : unref(getNonRootAttrs))(_ctx.$attrs)), null, 16, _hoisted_3), [
+            }, unref(getNonRootAttrs)(_ctx.$attrs)), null, 16, _hoisted_3), [
               [vModelText, modelValue.value]
             ]),
             createElementVNode("label", {

package/dist/components/forms/text-area/RuiTextArea.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTextArea.vue2.js","sources":["../../../../src/components/forms/text-area/RuiTextArea.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';\n\nexport interface Props {\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  noResize?: boolean;\n  minRows?: number | string;\n  maxRows?: number | string;\n  rowHeight?: number | string;\n  autoGrow?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextArea',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst props = withDefaults(defineProps<Props>(), {\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  noResize: false,\n  minRows: 2,\n  rowHeight: 1.5, // in rems\n  maxRows: undefined,\n  autoGrow: false,\n  required: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'click:clear'): void;\n}>();\n\nconst {\n  label,\n  autoGrow,\n  clearable,\n  disabled,\n  readonly,\n  minRows,\n  maxRows,\n  noResize,\n  rowHeight,\n  errorMessages,\n  successMessages,\n  required,\n} = toRefs(props);\n\nconst prepend = ref<HTMLDivElement>();\nconst append = ref<HTMLDivElement>();\nconst textarea = ref<HTMLTextAreaElement>();\nconst textareaSizer = ref<HTMLTextAreaElement>();\n\nconst css = useCssModule();\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 fieldStyles = computed(() => {\n  const height = Number(get(rowHeight));\n  const min = Number(get(minRows));\n  const max = Number(get(maxRows));\n  const value: { minHeight: string; maxHeight?: string } = {\n    minHeight: `${min * height + 0.75}rem`,\n  };\n  if (max)\n    value.maxHeight = `${max * height + 0.75}rem`;\n\n  return value;\n});\n\nconst prependWidth = ref('0px');\nconst appendWidth = ref('0px');\n\nuseResizeObserver(prepend, (entries) => {\n  const [entry] = entries;\n  assert(entry);\n  const { width, left } = entry.contentRect;\n  set(prependWidth, `${width + left + 24}px`);\n});\n\nuseResizeObserver(append, (entries) => {\n  const [entry] = entries;\n  assert(entry);\n  const { width, right } = entry.contentRect;\n  set(appendWidth, `${width + right + 24}px`);\n});\n\nconst colorClass = computed(() => (props.color ? css[props.color] : undefined));\n\nconst showClearIcon = logicAnd(\n  clearable,\n  modelValue,\n  logicNot(disabled),\n  logicNot(readonly),\n);\n\nconst { hasError, hasSuccess, hasMessages } = useFormTextDetail(\n  errorMessages,\n  successMessages,\n);\n\nfunction clearIconClicked() {\n  set(modelValue, '');\n  emit('click:clear');\n}\n\nfunction computeFieldHeight(newVal?: string, oldVal?: string) {\n  if (!get(autoGrow))\n    return;\n\n  const field = get(textarea);\n  const fieldValue = newVal ?? get(modelValue);\n  const fieldSizer = get(textareaSizer);\n  if (!(field && fieldSizer))\n    return;\n\n  nextTick(() => {\n    field.style.minHeight = get(fieldStyles).minHeight;\n    const sizerHeight = fieldSizer.scrollHeight;\n    const fieldHeight = field.scrollHeight;\n    let height = `${Math.max(sizerHeight, fieldHeight) / 16}rem`;\n    if (oldVal && oldVal.length > fieldValue.length)\n      height = `${Math.min(sizerHeight, fieldHeight) / 16}rem`;\n\n    field.style.height = height;\n  });\n}\n\nconst { focused } = useFocus(textarea);\nconst focusedDebounced = refDebounced(focused, 500);\n\nwatch(modelValue, computeFieldHeight);\nonMounted(computeFieldHeight);\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      :class=\"[\n        css.wrapper,\n        colorClass,\n        css[variant ?? ''],\n        {\n          [css.dense]: dense,\n          [css.disabled]: disabled,\n          [css['no-label']]: !label,\n          [css['with-error'] ?? '']: hasError,\n          [css['with-success'] ?? '']: hasSuccess && !hasError,\n          [css[`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=\"css.prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"[css.icon]\"\n        >\n          <RuiIcon :name=\"prependIcon\" />\n        </div>\n      </div>\n      <div :class=\"css.inner_wrapper\">\n        <textarea\n          v-if=\"autoGrow\"\n          ref=\"textareaSizer\"\n          :value=\"modelValue\"\n          :class=\"[css.textarea_sizer]\"\n          :style=\"fieldStyles\"\n          aria-hidden=\"true\"\n          disabled\n          readonly\n        />\n        <textarea\n          ref=\"textarea\"\n          v-model=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"[css.textarea, noResize ? 'resize-none' : 'resize-y']\"\n          :style=\"fieldStyles\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n        />\n        <label :class=\"css.label\">\n          {{ label }}\n          <span\n            v-if=\"required\"\n            class=\"text-rui-error\"\n          >\n            ﹡\n          </span>\n        </label>\n        <fieldset\n          v-if=\"variant === 'outlined'\"\n          :class=\"css.fieldset\"\n        >\n          <legend />\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=\"css.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=\"[css.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    .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      .textarea {\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        .textarea {\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 min-w-[12.5rem] flex items-start;\n\n  .inner_wrapper {\n    @apply flex flex-1 pt-4;\n  }\n\n  .append {\n    @apply absolute right-0;\n  }\n\n  .textarea {\n    @apply leading-6 text-rui-text w-full bg-transparent pb-2 pt-0;\n    @apply outline-0 outline-none placeholder:opacity-0 focus:placeholder:opacity-100;\n\n    --x-padding: 0.75rem;\n    padding-right: calc(var(--x-padding) + v-bind(appendWidth)) !important;\n\n    &_sizer {\n      @apply invisible absolute top-0 left-0 w-full h-0 -z-10 pointer-events-none py-2 px-3 #{!important};\n\n      padding-right: calc(var(--x-padding) + v-bind(appendWidth)) !important;\n    }\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.2] text-rui-text-secondary pointer-events-none absolute top-0 flex h-full w-full select-none transition-all border-b border-black/[0.42];\n\n    --x-padding: 0rem;\n\n    padding-left: calc(var(--x-padding) + v-bind(prependWidth));\n    padding-right: calc(var(--x-padding) + v-bind(appendWidth));\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  .append {\n    @apply mt-4 mx-3;\n\n    .textarea {\n      --x-padding: 0rem;\n    }\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      .textarea {\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          .textarea {\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      .textarea {\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      .textarea {\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    .inner_wrapper {\n      @apply pt-2;\n\n      .textarea {\n        @apply py-1;\n        &_sizer {\n          @apply py-1;\n        }\n      }\n    }\n  }\n\n  &.filled,\n  &.outlined {\n    .textarea {\n      @apply px-3;\n    }\n\n    .prepend {\n      @apply mr-0;\n\n      + .inner_wrapper .textarea {\n        &:not(:placeholder-shown),\n        &:autofill,\n        &:-webkit-autofill,\n        &[data-has-value='true'],\n        &:focus {\n          + .label {\n            --x-padding: 0.75rem;\n          }\n        }\n      }\n    }\n\n    .append {\n      @apply ml-0;\n    }\n\n    .prepend,\n    .append {\n      + .inner_wrapper > .label {\n        --x-padding: 0rem;\n      }\n    }\n\n    .label {\n      --x-padding: 0.75rem;\n    }\n  }\n\n  &.filled {\n    .label {\n      @apply rounded-t bg-black/[0.06];\n    }\n\n    &.no-label {\n      .textarea {\n        @apply py-4;\n        &_sizer {\n          @apply py-4;\n        }\n      }\n\n      &.dense {\n        .textarea {\n          @apply py-3;\n        }\n      }\n    }\n  }\n\n  &.outlined {\n    .textarea {\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;\n        }\n\n        ~ .fieldset {\n          legend {\n            &:after {\n              content: v-bind(labelWithQuote);\n            }\n          }\n        }\n      }\n    }\n\n    .fieldset {\n      @apply absolute w-full 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;\n\n        &:after {\n          @apply whitespace-break-spaces;\n          content: '\\200B';\n        }\n      }\n    }\n\n    &:not(.disabled) {\n      .textarea {\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      .label {\n        @apply leading-[2.5];\n      }\n    }\n  }\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeProps","_guardReactiveProps","getRootAttrs","$attrs","_createElementVNode","_normalizeClass","_unref","$slots","_renderSlot","_createVNode","_withDirectives","_mergeProps","getNonRootAttrs","_createTextVNode","_toDisplayString","_createBlock","RuiFormTextDetail"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,UAAM,aAAaA,SAAmB,SAAA,YAAmB;AAEzD,UAAM,QAAQ;AAwBd,UAAM,OAAO;AAIb,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,OAAO,KAAK;AAEhB,UAAM,UAAU,IAAA;AAChB,UAAM,SAAS,IAAA;AACf,UAAM,WAAW,IAAA;AACjB,UAAM,gBAAgB,IAAA;AAEtB,UAAM,MAAM,aAAA;AAEZ,UAAM,iBAAiB,SAAiB,MAAM;AAC5C,YAAM,WAAW,IAAI,KAAK;AAC1B,UAAI,CAAC;AACH,eAAO;AAET,YAAM,WAAW,IAAI,QAAQ,IAAI,MAAM;AACvC,aAAO,MAAM,QAAQ,GAAG,QAAQ;AAAA,IAClC,CAAC;AAED,UAAM,cAAc,SAAS,MAAM;AACjC,YAAM,SAAS,OAAO,IAAI,SAAS,CAAC;AACpC,YAAM,MAAM,OAAO,IAAI,OAAO,CAAC;AAC/B,YAAM,MAAM,OAAO,IAAI,OAAO,CAAC;AAC/B,YAAM,QAAmD;AAAA,QACvD,WAAW,GAAG,MAAM,SAAS,IAAI;AAAA,MAAA;AAEnC,UAAI;AACF,cAAM,YAAY,GAAG,MAAM,SAAS,IAAI;AAE1C,aAAO;AAAA,IACT,CAAC;AAED,UAAM,eAAe,IAAI,KAAK;AAC9B,UAAM,cAAc,IAAI,KAAK;AAE7B,sBAAkB,SAAS,CAAC,YAAY;AACtC,YAAM,CAAC,KAAK,IAAI;AAChB,aAAO,KAAK;AACZ,YAAM,EAAE,OAAO,KAAA,IAAS,MAAM;AAC9B,UAAI,cAAc,GAAG,QAAQ,OAAO,EAAE,IAAI;AAAA,IAC5C,CAAC;AAED,sBAAkB,QAAQ,CAAC,YAAY;AACrC,YAAM,CAAC,KAAK,IAAI;AAChB,aAAO,KAAK;AACZ,YAAM,EAAE,OAAO,MAAA,IAAU,MAAM;AAC/B,UAAI,aAAa,GAAG,QAAQ,QAAQ,EAAE,IAAI;AAAA,IAC5C,CAAC;AAED,UAAM,aAAa,SAAS,MAAO,MAAM,QAAQ,IAAI,MAAM,KAAK,IAAI,MAAU;AAE9E,UAAM,gBAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA,SAAS,QAAQ;AAAA,MACjB,SAAS,QAAQ;AAAA,IAAA;AAGnB,UAAM,EAAE,UAAU,YAAY,YAAA,IAAgB;AAAA,MAC5C;AAAA,MACA;AAAA,IAAA;AAGF,aAAS,mBAAmB;AAC1B,UAAI,YAAY,EAAE;AAClB,WAAK,aAAa;AAAA,IACpB;AAEA,aAAS,mBAAmB,QAAiB,QAAiB;AAC5D,UAAI,CAAC,IAAI,QAAQ;AACf;AAEF,YAAM,QAAQ,IAAI,QAAQ;AAC1B,YAAM,aAAa,UAAU,IAAI,UAAU;AAC3C,YAAM,aAAa,IAAI,aAAa;AACpC,UAAI,EAAE,SAAS;AACb;AAEF,eAAS,MAAM;AACb,cAAM,MAAM,YAAY,IAAI,WAAW,EAAE;AACzC,cAAM,cAAc,WAAW;AAC/B,cAAM,cAAc,MAAM;AAC1B,YAAI,SAAS,GAAG,KAAK,IAAI,aAAa,WAAW,IAAI,EAAE;AACvD,YAAI,UAAU,OAAO,SAAS,WAAW;AACvC,mBAAS,GAAG,KAAK,IAAI,aAAa,WAAW,IAAI,EAAE;AAErD,cAAM,MAAM,SAAS;AAAA,MACvB,CAAC;AAAA,IACH;AAEA,UAAM,EAAE,QAAA,IAAY,SAAS,QAAQ;AACrC,UAAM,mBAAmB,aAAa,SAAS,GAAG;AAElD,UAAM,YAAY,kBAAkB;AACpC,cAAU,kBAAkB;;0BAI1BC,mBAiHM,OAAAC,eAAAC,oBAjHOC,kBAAAA,OAAAA,KAAAA,eAAAA,MAAAA,YAAAA,GAAaC,KAAAA,MAAM,CAAA,CAAA,GAAA;AAAA,QAC9BC,mBAwGM,OAAA;AAAA,UAvGH,OAAKC,eAAA;AAAA,YAAYC,MAAA,GAAA,EAAI;AAAA,YAAiBA,MAAA,UAAA;AAAA,YAAoBA,MAAA,GAAA,EAAI,QAAA,WAAO,EAAA;AAAA;eAA8BA,MAAA,GAAA,EAAI,KAAK,GAAG,QAAA;AAAA,eAAkBA,MAAA,GAAA,EAAI,QAAQ,GAAGA,MAAA,QAAA;AAAA,cAAqB,CAAAA,MAAA,GAAA,iBAAmBA,MAAA,KAAA;AAAA,cAAkB,CAAAA,MAAA,GAAA,wBAA0BA,MAAA,QAAA;AAAA,eAAqBA,MAAA,GAAA,EAAG,cAAA,KAAA,EAAA,GAAyBA,MAAA,UAAA,KAAU,CAAKA,MAAA,QAAA;AAAA,cAAqB,CAAAA,MAAA,GAAA,EAAG,QAAS,QAAA,SAAS,EAAA,KAAA,EAAA,GAAY,QAAA,cAAcA,MAAA,WAAA;AAAA,YAAA;AAAA;UAaxW,cAAYA,MAAA,QAAA,IAAQ,KAAQ;AAAA,QAAA;UAGrBC,KAAAA,OAAO,WAAW,QAAA,4BAD1BR,mBAgBM,OAAA;AAAA;qBAdA;AAAA,YAAJ,KAAI;AAAA,YACJ,OAAKM,eAAA,CAAC,oCACEC,MAAA,GAAA,EAAI,OAAO,CAAA;AAAA,UAAA;YAGXC,KAAAA,OAAO,UADfC,WAGE,KAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA,IAEW,QAAA,4BADbT,mBAKM,OAAA;AAAA;cAHH,OAAKM,eAAA,CAAGC,MAAA,GAAA,EAAI,IAAI,CAAA;AAAA,YAAA;cAEjBG,YAA+B,SAAA,EAArB,MAAM,QAAA,YAAA,GAAW,MAAA,GAAA,CAAA,MAAA,CAAA;AAAA,YAAA;;UAG/BL,mBAqCM,OAAA;AAAA,YArCA,OAAKC,eAAEC,MAAA,GAAA,EAAI,aAAa;AAAA,UAAA;YAEpBA,MAAA,QAAA,kBADRP,mBASE,YAAA;AAAA;uBAPI;AAAA,cAAJ,KAAI;AAAA,cACH,OAAO,WAAA;AAAA,cACP,OAAKM,eAAA,CAAGC,MAAA,GAAA,EAAI,cAAc,CAAA;AAAA,cAC1B,sBAAOA,MAAA,WAAA,CAAW;AAAA,cACnB,eAAY;AAAA,cACZ,UAAA;AAAA,cACA,UAAA;AAAA,YAAA;YAEFI,eAAAN,mBAUE,YAVFO,WAUE;AAAA,uBATI;AAAA,cAAJ,KAAI;AAAA,2EACK,WAAU,QAAA;AAAA,cAClB,aAAa,QAAA,eAAW;AAAA,cACxB,OAAK,CAAGL,MAAA,GAAA,EAAI,UAAUA,MAAA,QAAA,IAAQ,gBAAA,UAAA;AAAA,cAC9B,OAAOA,MAAA,WAAA;AAAA,cACP,UAAUA,MAAA,QAAA;AAAA,cACV,UAAUA,MAAA,QAAA;AAAA,cACV,gBAAcA,MAAA,QAAA;AAAA,YAAA,IACPM,qBAAAA,OAAAA,KAAAA,kBAAAA,MAAAA,eAAAA,GAAgBT,KAAAA,MAAM,CAAA,GAAA,MAAA,IAAA,UAAA,GAAA;AAAA,2BAPrB,WAAA,KAAU;AAAA,YAAA;YASrBC,mBAQQ,SAAA;AAAA,cARA,OAAKC,eAAEC,MAAA,GAAA,EAAI,KAAK;AAAA,YAAA;cACnBO,gBAAAC,gBAAAR,MAAA,KAAA,CAAK,IAAG,KACX,CAAA;AAAA,cACQA,MAAA,QAAA,kBADRP,mBAKO,QALP,YAGC,KAED;;YAGM,QAAA,YAAO,2BADfA,mBAKW,YAAA;AAAA;cAHR,OAAKM,eAAEC,MAAA,GAAA,EAAI,QAAQ;AAAA,YAAA;cAEpBF,mBAAU,UAAA,MAAA,MAAA,EAAA;AAAA,YAAA;;UAING,KAAAA,OAAO,UAAU,QAAA,cAAcD,MAAA,aAAA,kBADvCP,mBAgCM,OAAA;AAAA;qBA9BA;AAAA,YAAJ,KAAI;AAAA,YACJ,OAAKM,eAAA,CAAC,oCACEC,MAAA,GAAA,EAAI,MAAM,CAAA;AAAA,UAAA;YAGVA,MAAA,aAAA,kBADRS,YAeY,WAAA;AAAA;cAbT,OAAKV,eAAA,CAAA,EAAA,QAAA,CAAaC,MAAA,gBAAA,KAIb,gBAAgB,CAAA;AAAA,cAHtB,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,MAAA;AAAA,cAEA,OAAM;AAAA,cACN,UAAS;AAAA,cACR,6DAAY,oBAAgB,CAAA,MAAA,CAAA;AAAA,YAAA;+BAE7B,MAGE;AAAA,gBAHFG,YAGE,SAAA;AAAA,kBAFA,MAAK;AAAA,kBACL,MAAK;AAAA,gBAAA;;;;YAIDF,KAAAA,OAAO,SADfC,WAGE,KAAA,QAAA,UAAA,EAAA,KAAA,EAAA,CAAA,IAEW,QAAA,2BADbT,mBAKM,OAAA;AAAA;cAHH,OAAKM,eAAA,CAAGC,MAAA,GAAA,EAAI,IAAI,CAAA;AAAA,YAAA;cAEjBG,YAA8B,SAAA,EAApB,MAAM,QAAA,WAAA,GAAU,MAAA,GAAA,CAAA,MAAA,CAAA;AAAA,YAAA;;;SAKvB,QAAA,4BADTM,YAMEC,aAAA;AAAA;UAJA,OAAM;AAAA,UACL,kBAAgBV,MAAA,aAAA;AAAA,UAChB,oBAAkBA,MAAA,eAAA;AAAA,UAClB,MAAM,QAAA;AAAA,QAAA;;;;;"}
+{"version":3,"file":"RuiTextArea.vue2.js","sources":["../../../../src/components/forms/text-area/RuiTextArea.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 { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface Props {\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  noResize?: boolean;\n  minRows?: number | string;\n  maxRows?: number | string;\n  rowHeight?: number | string;\n  autoGrow?: boolean;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTextArea',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst props = withDefaults(defineProps<Props>(), {\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  noResize: false,\n  minRows: 2,\n  rowHeight: 1.5, // in rems\n  maxRows: undefined,\n  autoGrow: false,\n  required: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'click:clear'): void;\n}>();\n\nconst {\n  label,\n  autoGrow,\n  clearable,\n  disabled,\n  readonly,\n  minRows,\n  maxRows,\n  noResize,\n  rowHeight,\n  errorMessages,\n  successMessages,\n  required,\n} = toRefs(props);\n\nconst prepend = ref<HTMLDivElement>();\nconst append = ref<HTMLDivElement>();\nconst textarea = ref<HTMLTextAreaElement>();\nconst textareaSizer = ref<HTMLTextAreaElement>();\n\nconst css = useCssModule();\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 fieldStyles = computed(() => {\n  const height = Number(get(rowHeight));\n  const min = Number(get(minRows));\n  const max = Number(get(maxRows));\n  const value: { minHeight: string; maxHeight?: string } = {\n    minHeight: `${min * height + 0.75}rem`,\n  };\n  if (max)\n    value.maxHeight = `${max * height + 0.75}rem`;\n\n  return value;\n});\n\nconst prependWidth = ref('0px');\nconst appendWidth = ref('0px');\n\nuseResizeObserver(prepend, (entries) => {\n  const [entry] = entries;\n  assert(entry);\n  const { width, left } = entry.contentRect;\n  set(prependWidth, `${width + left + 24}px`);\n});\n\nuseResizeObserver(append, (entries) => {\n  const [entry] = entries;\n  assert(entry);\n  const { width, right } = entry.contentRect;\n  set(appendWidth, `${width + right + 24}px`);\n});\n\nconst colorClass = computed(() => (props.color ? css[props.color] : undefined));\n\nconst showClearIcon = logicAnd(\n  clearable,\n  modelValue,\n  logicNot(disabled),\n  logicNot(readonly),\n);\n\nconst { hasError, hasSuccess, hasMessages } = useFormTextDetail(\n  errorMessages,\n  successMessages,\n);\n\nfunction clearIconClicked() {\n  set(modelValue, '');\n  emit('click:clear');\n}\n\nfunction computeFieldHeight(newVal?: string, oldVal?: string) {\n  if (!get(autoGrow))\n    return;\n\n  const field = get(textarea);\n  const fieldValue = newVal ?? get(modelValue);\n  const fieldSizer = get(textareaSizer);\n  if (!(field && fieldSizer))\n    return;\n\n  nextTick(() => {\n    field.style.minHeight = get(fieldStyles).minHeight;\n    const sizerHeight = fieldSizer.scrollHeight;\n    const fieldHeight = field.scrollHeight;\n    let height = `${Math.max(sizerHeight, fieldHeight) / 16}rem`;\n    if (oldVal && oldVal.length > fieldValue.length)\n      height = `${Math.min(sizerHeight, fieldHeight) / 16}rem`;\n\n    field.style.height = height;\n  });\n}\n\nconst { focused } = useFocus(textarea);\nconst focusedDebounced = refDebounced(focused, 500);\n\nwatch(modelValue, computeFieldHeight);\nonMounted(computeFieldHeight);\n</script>\n\n<template>\n  <div v-bind=\"getRootAttrs($attrs)\">\n    <div\n      :class=\"[\n        css.wrapper,\n        colorClass,\n        css[variant ?? ''],\n        {\n          [css.dense]: dense,\n          [css.disabled]: disabled,\n          [css['no-label']]: !label,\n          [css['with-error'] ?? '']: hasError,\n          [css['with-success'] ?? '']: hasSuccess && !hasError,\n          [css[`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=\"css.prepend\"\n      >\n        <slot\n          v-if=\"$slots.prepend\"\n          name=\"prepend\"\n        />\n        <div\n          v-else-if=\"prependIcon\"\n          :class=\"[css.icon]\"\n        >\n          <RuiIcon :name=\"prependIcon\" />\n        </div>\n      </div>\n      <div :class=\"css.inner_wrapper\">\n        <textarea\n          v-if=\"autoGrow\"\n          ref=\"textareaSizer\"\n          :value=\"modelValue\"\n          :class=\"[css.textarea_sizer]\"\n          :style=\"fieldStyles\"\n          aria-hidden=\"true\"\n          disabled\n          readonly\n        />\n        <textarea\n          ref=\"textarea\"\n          v-model=\"modelValue\"\n          :placeholder=\"placeholder || ' '\"\n          :class=\"[css.textarea, noResize ? 'resize-none' : 'resize-y']\"\n          :style=\"fieldStyles\"\n          :disabled=\"disabled\"\n          :readonly=\"readonly\"\n          :aria-invalid=\"hasError\"\n          v-bind=\"getNonRootAttrs($attrs)\"\n        />\n        <label :class=\"css.label\">\n          {{ label }}\n          <span\n            v-if=\"required\"\n            class=\"text-rui-error\"\n          >\n            ﹡\n          </span>\n        </label>\n        <fieldset\n          v-if=\"variant === 'outlined'\"\n          :class=\"css.fieldset\"\n        >\n          <legend />\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=\"css.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=\"[css.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    .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      .textarea {\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        .textarea {\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 min-w-[12.5rem] flex items-start;\n\n  .inner_wrapper {\n    @apply flex flex-1 pt-4;\n  }\n\n  .append {\n    @apply absolute right-0;\n  }\n\n  .textarea {\n    @apply leading-6 text-rui-text w-full bg-transparent pb-2 pt-0;\n    @apply outline-0 outline-none placeholder:opacity-0 focus:placeholder:opacity-100;\n\n    --x-padding: 0.75rem;\n    padding-right: calc(var(--x-padding) + v-bind(appendWidth)) !important;\n\n    &_sizer {\n      @apply invisible absolute top-0 left-0 w-full h-0 -z-10 pointer-events-none py-2 px-3 #{!important};\n\n      padding-right: calc(var(--x-padding) + v-bind(appendWidth)) !important;\n    }\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.2] text-rui-text-secondary pointer-events-none absolute top-0 flex h-full w-full select-none transition-all border-b border-black/[0.42];\n\n    --x-padding: 0rem;\n\n    padding-left: calc(var(--x-padding) + v-bind(prependWidth));\n    padding-right: calc(var(--x-padding) + v-bind(appendWidth));\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  .append {\n    @apply mt-4 mx-3;\n\n    .textarea {\n      --x-padding: 0rem;\n    }\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      .textarea {\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          .textarea {\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      .textarea {\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      .textarea {\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    .inner_wrapper {\n      @apply pt-2;\n\n      .textarea {\n        @apply py-1;\n        &_sizer {\n          @apply py-1;\n        }\n      }\n    }\n  }\n\n  &.filled,\n  &.outlined {\n    .textarea {\n      @apply px-3;\n    }\n\n    .prepend {\n      @apply mr-0;\n\n      + .inner_wrapper .textarea {\n        &:not(:placeholder-shown),\n        &:autofill,\n        &:-webkit-autofill,\n        &[data-has-value='true'],\n        &:focus {\n          + .label {\n            --x-padding: 0.75rem;\n          }\n        }\n      }\n    }\n\n    .append {\n      @apply ml-0;\n    }\n\n    .prepend,\n    .append {\n      + .inner_wrapper > .label {\n        --x-padding: 0rem;\n      }\n    }\n\n    .label {\n      --x-padding: 0.75rem;\n    }\n  }\n\n  &.filled {\n    .label {\n      @apply rounded-t bg-black/[0.06];\n    }\n\n    &.no-label {\n      .textarea {\n        @apply py-4;\n        &_sizer {\n          @apply py-4;\n        }\n      }\n\n      &.dense {\n        .textarea {\n          @apply py-3;\n        }\n      }\n    }\n  }\n\n  &.outlined {\n    .textarea {\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;\n        }\n\n        ~ .fieldset {\n          legend {\n            &:after {\n              content: v-bind(labelWithQuote);\n            }\n          }\n        }\n      }\n    }\n\n    .fieldset {\n      @apply absolute w-full 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;\n\n        &:after {\n          @apply whitespace-break-spaces;\n          content: '\\200B';\n        }\n      }\n    }\n\n    &:not(.disabled) {\n      .textarea {\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      .label {\n        @apply leading-[2.5];\n      }\n    }\n  }\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$slots","_renderSlot","_createVNode","_withDirectives","_mergeProps","_createTextVNode","_toDisplayString","_createBlock","RuiFormTextDetail"],"mappings":"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"}

package/dist/components/forms/text-field/RuiTextField.vue.d.ts

@@ -38,27 +38,27 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 } & {
     clear: () => any;
     blur: (event: Event) => any;
-    remove: (value: unknown) => any;
     "focus-input": (event: Event) => any;
+    remove: (value: unknown) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClear?: (() => any) | undefined;
-    onBlur?: ((event: Event) => any) | undefined;
-    onRemove?: ((value: unknown) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onBlur?: ((event: Event) => any) | undefined;
     "onFocus-input"?: ((event: Event) => any) | undefined;
+    onRemove?: ((value: unknown) => any) | undefined;
 }>, {
-    color: ContextColorsType;
     label: string;
-    disabled: boolean;
-    dense: boolean;
     readonly: boolean;
     variant: "default" | "filled" | "outlined";
+    color: ContextColorsType;
+    disabled: boolean;
     errorMessages: string | string[];
     successMessages: string | string[];
     hint: string;
     required: boolean;
     hideDetails: boolean;
     placeholder: string;
+    dense: boolean;
     textColor: ContextColorsType;
     prependIcon: RuiIcons;
     appendIcon: RuiIcons;

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

@@ -1,13 +1,13 @@
-import { defineComponent, mergeModels, useCssVars, unref, computed, ref, useModel, toRefs, createElementBlock, openBlock, normalizeProps, guardReactiveProps, createElementVNode, createBlock, createCommentVNode, normalizeClass, renderSlot, createVNode, mergeProps, createTextVNode, toDisplayString, withModifiers, withCtx } from "vue";
+import { defineComponent, useCssVars, unref, useModel, toRefs, computed, ref, openBlock, createElementBlock, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, renderSlot, createVNode, createCommentVNode, mergeProps, createTextVNode, toDisplayString, createBlock, withModifiers, withCtx, mergeModels } from "vue";
 import { logicAnd, logicNot } from "@vueuse/math";
 import RuiButton from "../../buttons/button/RuiButton.vue.js";
 import _sfc_main$1 from "../../helpers/RuiFormTextDetail.vue.js";
 import RuiIcon from "../../icons/RuiIcon.vue.js";
 import { assert } from "../../../utils/assert.js";
+import { useFormTextDetail } from "../../../utils/form-text-detail.js";
 import { getRootAttrs, getNonRootAttrs } from "../../../utils/helpers.js";
 import { get, set } from "@vueuse/shared";
 import { useElementBounding, useResizeObserver, useFocus, refDebounced } from "@vueuse/core";
-import { useFormTextDetail } from "../../../utils/form-text-detail.js";
 const _hoisted_1 = ["data-error"];
 const _hoisted_2 = ["value", "placeholder", "disabled", "dense", "variant", "readonly", "wrapper-width", "aria-invalid"];
 const _hoisted_3 = {
@@ -44,9 +44,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["focus-input", "blur", "remove", "clear"], ["update:modelValue"]),
   setup(__props, { expose: __expose, emit: __emit }) {
     useCssVars((_ctx) => ({
-      "ee029486": unref(prependWidth),
-      "v5a045972": unref(appendWidth),
-      "v70a87b32": unref(labelWithQuote)
+      "v11a1c3f7": unref(prependWidth),
+      "v4b0315cd": unref(appendWidth),
+      "v9877abbe": unref(labelWithQuote)
     }));
     const modelValue = useModel(__props, "modelValue");
     const props = __props;

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 { 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 { 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 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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"}

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, toRefs, openBlock, createBlock, TransitionGroup, withCtx, unref, createElementBlock, toDisplayString, createCommentVNode } from "vue";
 import { useFormTextDetail } from "../../utils/form-text-detail.js";
 const _hoisted_1 = {
   key: "error",

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 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":";;;;;;;;;;;;;;;;;;;;;;AAGA,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;;;;;;;"}

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({
   ...{
@@ -33,6 +29,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     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 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    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":";;;;;;;;;;;;;;;AAeA,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,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,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;;;;;;"}

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';
@@ -43,5 +43,5 @@ import RuiTabItems, { type Props as TabItemsProps } from '../components/tabs/tab
 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, ColorPickerProps, 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, TabItemsProps, 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.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, createElementBlock, openBlock, normalizeClass } from "vue";
+import { defineComponent, openBlock, createElementBlock, normalizeClass } from "vue";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiSkeletonLoaderBase"

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({
   ...{

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, 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";
@@ -83,6 +83,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", {