npm - @rotki/ui-library - Versions diffs - 2.12.2 → 2.13.0 - Mend

@rotki/ui-library 2.12.2 → 2.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (277) hide show

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

	@@ -1 +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 { 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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"}
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 RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { useLabelWithQuote } from '@/composables/forms/use-label-with-quote';\nimport { usePrependAppendWidth } from '@/composables/forms/use-prepend-append-width';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface TextFieldProps {\n label?: string;\n placeholder?: string;\n disabled?: boolean;\n variant?: 'default' \| 'filled' \| 'outlined';\n color?: ContextColorsType;\n textColor?: ContextColorsType;\n dense?: boolean;\n hint?: string;\n errorMessages?: string \| string[];\n successMessages?: string \| string[];\n hideDetails?: boolean;\n prependIcon?: RuiIcons;\n appendIcon?: RuiIcons;\n readonly?: boolean;\n clearable?: boolean;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiTextField',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<string>({ required: true });\n\nconst {\n label = '',\n placeholder = '',\n disabled = false,\n variant = 'default',\n color = undefined,\n textColor = undefined,\n dense = false,\n hint = '',\n errorMessages = [],\n successMessages = [],\n hideDetails = false,\n prependIcon = undefined,\n appendIcon = undefined,\n readonly = false,\n clearable = false,\n required = false,\n} = defineProps<TextFieldProps>();\n\nconst emit = defineEmits<{\n 'focus-input': [event: Event];\n 'blur': [event: Event];\n 'remove': [value: unknown];\n 'clear': [];\n}>();\n\ndefineSlots<{\n prepend?: () => any;\n append?: () => any;\n}>();\n\nconst prepend = useTemplateRef<HTMLDivElement>('prepend');\nconst append = useTemplateRef<HTMLDivElement>('append');\nconst innerWrapper = useTemplateRef<HTMLDivElement>('innerWrapper');\nconst inputRef = useTemplateRef<HTMLInputElement>('inputRef');\n\nconst { prependWidth, appendWidth } = usePrependAppendWidth(prepend, append);\n\nconst { width } = useElementBounding(innerWrapper);\n\nconst { hasError, hasSuccess, hasMessages } = useFormTextDetail(\n toRef(() => errorMessages),\n toRef(() => successMessages),\n);\n\nconst { focused } = useFocus(inputRef);\nconst focusedDebounced = refDebounced(focused, 500);\n\nconst showClearIcon = computed<boolean>(() => clearable && !!get(modelValue) && !disabled && !readonly);\n\nconst labelWithQuote = useLabelWithQuote(\n () => label,\n () => required,\n);\n\nfunction input(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n set(modelValue, value);\n}\n\nfunction clearIconClicked(): void {\n set(modelValue, '');\n emit('clear');\n}\n\ndefineExpose({\n setSelectionRange: (start: number, end: number) => {\n get(inputRef)?.setSelectionRange(start, end);\n },\n focus: () => get(inputRef)?.focus(),\n element: inputRef,\n});\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <div\n :class=\"[\n $style.wrapper,\n $style[color ?? ''],\n $style[variant ?? ''],\n {\n [$style.dense]: dense,\n [$style.disabled]: disabled,\n [$style['no-label']]: !label,\n [$style['with-error'] ?? '']: hasError,\n [$style['with-success'] ?? '']: hasSuccess && !hasError,\n [$style[`text_${textColor}`] ?? '']: textColor && !hasMessages,\n },\n ]\"\n :data-error=\"hasError ? '' : undefined\"\n >\n <div\n v-if=\"$slots.prepend \|\| prependIcon\"\n ref=\"prepend\"\n class=\"flex items-center gap-1 shrink-0\"\n :class=\"$style.prepend\"\n >\n <slot\n v-if=\"$slots.prepend\"\n name=\"prepend\"\n />\n <div\n v-else-if=\"prependIcon\"\n :class=\"[$style.icon]\"\n >\n <RuiIcon :name=\"prependIcon\" />\n </div>\n </div>\n <div\n ref=\"innerWrapper\"\n class=\"flex flex-1 overflow-hidden\"\n @click=\"emit('focus-input', $event)\"\n >\n <input\n ref=\"inputRef\"\n :value=\"modelValue\"\n :placeholder=\"placeholder \|\| ' '\"\n :class=\"$style.input\"\n :disabled=\"disabled\"\n :dense=\"dense\"\n :variant=\"variant\"\n :readonly=\"readonly\"\n :wrapper-width=\"width\"\n :aria-invalid=\"hasError\"\n v-bind=\"getNonRootAttrs($attrs)\"\n @input=\"input($event)\"\n @blur=\"emit('blur', $event)\"\n @remove=\"emit('remove', $event)\"\n />\n <label :class=\"$style.label\">\n <span>\n {{ label }}\n <span\n v-if=\"required\"\n class=\"text-rui-error\"\n >\n ﹡\n </span>\n </span>\n </label>\n <fieldset\n v-if=\"variant === 'outlined'\"\n :class=\"$style.fieldset\"\n >\n <legend :class=\"{ [$style.show]: label }\" />\n </fieldset>\n </div>\n <div\n v-if=\"$slots.append \|\| appendIcon \|\| showClearIcon\"\n ref=\"append\"\n class=\"flex items-center gap-1 shrink-0\"\n :class=\"$style.append\"\n >\n <RuiButton\n v-if=\"showClearIcon\"\n :class=\"{ hidden: !focusedDebounced }\"\n variant=\"text\"\n type=\"button\"\n icon\n class=\"!p-2 clear-btn\"\n color=\"error\"\n tabindex=\"-1\"\n @click.stop=\"clearIconClicked()\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"20\"\n />\n </RuiButton>\n <slot\n v-if=\"$slots.append\"\n name=\"append\"\n />\n <div\n v-else-if=\"appendIcon\"\n :class=\"[$style.icon]\"\n >\n <RuiIcon :name=\"appendIcon\" />\n </div>\n </div>\n </div>\n <RuiFormTextDetail\n v-if=\"!hideDetails\"\n class=\"pt-1 px-3\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n:global(.dark) {\n .wrapper {\n @apply bg-transparent;\n\n .label {\n @apply border-white/[0.42];\n\n &:after {\n @apply border-white;\n }\n }\n\n .icon {\n @apply text-white/[0.56];\n }\n\n &:hover {\n .label {\n @apply border-white;\n }\n }\n\n &.filled {\n .input {\n &:focus {\n + .label {\n @apply bg-white/[0.13];\n }\n }\n }\n\n .label {\n @apply bg-white/[0.09];\n }\n }\n\n &.outlined {\n .fieldset {\n @apply border-white/[0.23];\n }\n\n &:not(.disabled) {\n .input {\n &:hover,\n &:focus {\n ~ .fieldset {\n @apply border-white;\n }\n }\n }\n }\n }\n }\n}\n\n.wrapper {\n @apply relative w-full flex items-center pt-3 rounded bg-white;\n\n .input {\n @apply leading-6 text-rui-text w-full bg-transparent py-1.5 pr-3 outline-0 outline-none transition-all placeholder:opacity-0 focus:placeholder:opacity-100;\n\n &:focus {\n @apply outline-0;\n + .label {\n @apply after:scale-x-100;\n }\n }\n\n &:not(:placeholder-shown),\n &:autofill,\n &:-webkit-autofill,\n &[data-has-value='true'],\n &:focus {\n + .label {\n @apply text-xs leading-tight;\n padding-left: var(--x-padding);\n padding-right: var(--x-padding);\n }\n }\n\n &:disabled {\n @apply border-dotted;\n\n &,\n + .label {\n @apply text-rui-text-disabled;\n }\n\n ~ .fieldset {\n @apply border-dotted;\n }\n }\n }\n\n .label {\n @apply left-0 text-base leading-[3.75] text-rui-text-secondary pointer-events-none absolute top-0 flex h-full w-full select-none transition-all duration-75 border-b border-black/[0.42];\n\n --x-padding: 0px;\n --prepend-width: v-bind(prependWidth);\n --append-width: v-bind(appendWidth);\n\n padding-left: calc(var(--x-padding) + var(--prepend-width, 0px));\n padding-right: calc(var(--x-padding) + var(--append-width, 0px));\n\n span {\n @apply truncate transition-all duration-75;\n content: v-bind(labelWithQuote);\n }\n\n &:after {\n content: '';\n @apply absolute bottom-0 left-0 block w-full scale-x-0 border-b-2 mb-[-1px] transition-transform duration-300 border-black;\n }\n }\n\n &:hover {\n .label {\n @apply border-black;\n }\n }\n\n .icon {\n @apply text-black/[0.54];\n }\n\n .prepend {\n &:not(:empty) {\n @apply pr-2;\n }\n }\n\n .append {\n &:not(:empty) {\n @apply pl-2;\n }\n }\n\n @each $color in c.$context-colors {\n &.#{$color} {\n .input {\n &:focus {\n + .label {\n @apply text-rui-#{$color};\n }\n }\n }\n\n .label {\n @apply after:border-rui-#{$color};\n }\n\n &.outlined {\n &:not(.disabled) {\n .input {\n &:focus {\n ~ .fieldset {\n @apply border-rui-#{$color};\n }\n }\n }\n }\n }\n }\n\n &.text_#{$color},\n &.with-#{$color} {\n .prepend,\n .append,\n .input {\n @apply text-rui-#{$color};\n }\n\n &:not(.disabled) .prepend svg,\n &:not(.disabled) .append svg {\n @apply text-rui-#{$color};\n }\n }\n }\n\n @each $color in 'error', 'success' {\n &.with-#{$color} {\n .input {\n @apply border-rui-#{$color} #{!important};\n }\n\n .label {\n @apply text-rui-#{$color} after:border-rui-#{$color} #{!important};\n }\n\n .fieldset {\n @apply border-rui-#{$color} #{!important};\n }\n }\n }\n\n &.dense {\n .input {\n @apply py-1;\n }\n\n .label {\n @apply leading-[3.5];\n }\n }\n\n &.filled,\n &.outlined {\n @apply pt-0;\n\n .prepend {\n &:not(:empty) {\n @apply pl-3 pr-0;\n }\n }\n\n .append {\n &:not(:empty) {\n @apply pr-3 pl-0;\n }\n }\n\n .input {\n @apply px-3;\n }\n\n .label {\n @apply leading-[3.5];\n --x-padding: 0.75rem;\n }\n }\n\n &.filled {\n .input {\n @apply py-4;\n\n &:focus {\n + .label {\n @apply bg-black/[0.09];\n }\n }\n\n &:not(:placeholder-shown),\n &:autofill,\n &:-webkit-autofill,\n &[data-has-value='true'],\n &:focus {\n + .label {\n @apply leading-[1.5] pl-4;\n\n padding-left: calc(var(--x-padding));\n padding-right: calc(var(--x-padding));\n }\n }\n }\n\n .label {\n @apply rounded-t bg-black/[0.06];\n }\n\n &.dense {\n .input {\n @apply pt-5 pb-1;\n }\n\n .label {\n @apply leading-[3];\n }\n\n &:not(:placeholder-shown),\n &:autofill,\n &:-webkit-autofill,\n &[data-has-value='true'],\n &:focus {\n + .label {\n @apply leading-[2.25];\n }\n }\n }\n\n &.no-label {\n .input {\n @apply py-4;\n }\n\n &.dense {\n .input {\n @apply py-3;\n }\n }\n }\n }\n\n &.outlined {\n .input {\n @apply py-4 border-b-0;\n\n &:not(:placeholder-shown),\n &:autofill,\n &:-webkit-autofill,\n &[data-has-value='true'],\n &:focus {\n @apply border-t-transparent;\n\n + .label {\n @apply leading-[0] pl-4 -mt-3;\n\n span {\n @apply pt-3;\n }\n }\n\n ~ .fieldset {\n legend {\n &.show {\n @apply px-2;\n }\n &:after {\n content: v-bind(labelWithQuote);\n }\n }\n }\n }\n }\n\n .fieldset {\n @apply absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0 pointer-events-none rounded border border-black/[0.23] px-2 transition-all -mt-2;\n\n legend {\n @apply opacity-0 text-xs max-w-full truncate;\n\n &:before {\n content: ' ';\n }\n\n &:after {\n @apply truncate max-w-full leading-[0];\n content: '\\200B';\n }\n }\n }\n\n &:not(.disabled) {\n .input {\n &:hover,\n &:focus {\n ~ .fieldset {\n @apply border border-black;\n }\n }\n\n &:focus {\n ~ .fieldset {\n @apply border-2;\n }\n }\n }\n }\n\n .label {\n @apply border-0 border-transparent;\n\n &:after {\n content: none !important;\n }\n }\n\n &.dense {\n .input {\n @apply py-2;\n }\n\n .label {\n @apply leading-[2.5];\n }\n }\n }\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeProps","_guardReactiveProps","_unref","$attrs","_createElementVNode","_normalizeClass","$style","$slots","_renderSlot","_createVNode","_mergeProps","_createTextVNode","_toDisplayString","_createBlock","RuiFormTextDetail"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,UAAM,aAAaA,SAAmB,SAAA,YAAmB;AAqBzD,UAAM,OAAO;AAYb,UAAM,UAAU,eAA+B,SAAS;AACxD,UAAM,SAAS,eAA+B,QAAQ;AACtD,UAAM,eAAe,eAA+B,cAAc;AAClE,UAAM,WAAW,eAAiC,UAAU;AAE5D,UAAM,EAAE,cAAc,YAAA,IAAgB,sBAAsB,SAAS,MAAM;AAE3E,UAAM,EAAE,MAAA,IAAU,mBAAmB,YAAY;AAEjD,UAAM,EAAE,UAAU,YAAY,YAAA,IAAgB;AAAA,MAC5C,MAAM,MAAM,qBAAa;AAAA,MACzB,MAAM,MAAM,uBAAe;AAAA,IAAA;AAG7B,UAAM,EAAE,QAAA,IAAY,SAAS,QAAQ;AACrC,UAAM,mBAAmB,aAAa,SAAS,GAAG;AAElD,UAAM,gBAAgB,SAAkB,MAAM,QAAA,aAAa,CAAC,CAAC,IAAI,UAAU,KAAK,CAAC,oBAAY,CAAC,gBAAQ;AAEtG,UAAM,iBAAiB;AAAA,MACrB,MAAM,QAAA;AAAA,MACN,MAAM,QAAA;AAAA,IAAA;AAGR,aAAS,MAAM,OAAoB;AACjC,YAAM,QAAS,MAAM,OAA4B;AACjD,UAAI,YAAY,KAAK;AAAA,IACvB;AAEA,aAAS,mBAAyB;AAChC,UAAI,YAAY,EAAE;AAClB,WAAK,OAAO;AAAA,IACd;AAEA,aAAa;AAAA,MACX,mBAAmB,CAAC,OAAe,QAAgB;AACjD,YAAI,QAAQ,GAAG,kBAAkB,OAAO,GAAG;AAAA,MAC7C;AAAA,MACA,OAAO,MAAM,IAAI,QAAQ,GAAG,MAAA;AAAA,MAC5B,SAAS;AAAA,IAAA,CACV;;0BAICC,mBAkHM,OAAAC,eAAAC,mBAlHOC,MAAA,YAAA,EAAaC,KAAAA,MAAM,CAAA,CAAA,GAAA;AAAA,QAC9BC,mBAyGM,OAAA;AAAA,UAxGH,OAAKC,eAAA;AAAA,YAAYC,KAAAA,OAAO;AAAA,YAAiBA,KAAAA,OAAO,QAAA,SAAK,EAAA;AAAA,YAAiBA,KAAAA,OAAO,QAAA,WAAO,EAAA;AAAA;eAA8BA,KAAAA,OAAO,KAAK,GAAG,QAAA;AAAA,eAAkBA,KAAAA,OAAO,QAAQ,GAAG,QAAA;AAAA,cAAqBA,CAAAA,KAAAA,sBAAsB,QAAA;AAAA,cAAkBA,CAAAA,KAAAA,6BAA6BJ,MAAA,QAAA;AAAA,eAAqBI,KAAAA,OAAM,cAAA,KAAA,EAAA,GAAyBJ,MAAA,UAAA,KAAU,CAAKA,MAAA,QAAA;AAAA,cAAqBI,CAAAA,KAAAA,OAAM,QAAS,QAAA,SAAS,EAAA,KAAA,EAAA,GAAY,QAAA,cAAcJ,MAAA,WAAA;AAAA,YAAA;AAAA;UAazY,cAAYA,MAAA,QAAA,IAAQ,KAAQ;AAAA,QAAA;UAGrBK,KAAAA,OAAO,WAAW,QAAA,4BAD1BR,mBAgBM,OAAA;AAAA;qBAdA;AAAA,YAAJ,KAAI;AAAA,YACJ,OAAKM,eAAA,CAAC,oCACEC,KAAAA,OAAO,OAAO,CAAA;AAAA,UAAA;YAGdC,KAAAA,OAAO,UADfC,WAGE,KAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA,IAEW,QAAA,4BADbT,mBAKM,OAAA;AAAA;cAHH,OAAKM,eAAA,CAAGC,KAAAA,OAAO,IAAI,CAAA;AAAA,YAAA;cAEpBG,YAA+B,SAAA,EAArB,MAAM,QAAA,YAAA,GAAW,MAAA,GAAA,CAAA,MAAA,CAAA;AAAA,YAAA;;UAG/BL,mBAsCM,OAAA;AAAA,qBArCA;AAAA,YAAJ,KAAI;AAAA,YACJ,OAAM;AAAA,YACL,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,eAAgB,MAAM;AAAA,UAAA;YAElCA,mBAeE,SAfFM,WAeE;AAAA,uBAdI;AAAA,cAAJ,KAAI;AAAA,cACH,OAAO,WAAA;AAAA,cACP,aAAa,QAAA,eAAW;AAAA,cACxB,OAAOJ,KAAAA,OAAO;AAAA,cACd,UAAU,QAAA;AAAA,cACV,OAAO,QAAA;AAAA,cACP,SAAS,QAAA;AAAA,cACT,UAAU,QAAA;AAAA,cACV,iBAAeJ,MAAA,KAAA;AAAA,cACf,gBAAcA,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,cACnB,QAAI,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,QAAS,MAAM;AAAA,cACzB,UAAM,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,UAAW,MAAM;AAAA,YAAA;YAEhCC,mBAUQ,SAAA;AAAA,cAVA,OAAKC,eAAEC,KAAAA,OAAO,KAAK;AAAA,YAAA;cACzBF,mBAQO,QAAA,MAAA;AAAA,gBAPFO,gBAAAC,gBAAA,QAAA,KAAK,IAAG,KACX,CAAA;AAAA,gBACQ,QAAA,yBADRb,mBAKO,QALP,YAGC,KAED;;;YAII,QAAA,YAAO,2BADfA,mBAKW,YAAA;AAAA;cAHR,OAAKM,eAAEC,KAAAA,OAAO,QAAQ;AAAA,YAAA;cAEvBF,mBAA4C,UAAA;AAAA,gBAAnC,OAAKC,eAAA,EAAA,CAAKC,KAAAA,OAAO,IAAI,GAAG,QAAA,MAAA,CAAK;AAAA,cAAA;;;UAIlCC,KAAAA,OAAO,UAAU,QAAA,cAAcL,MAAA,aAAA,kBADvCH,mBAgCM,OAAA;AAAA;qBA9BA;AAAA,YAAJ,KAAI;AAAA,YACJ,OAAKM,eAAA,CAAC,oCACEC,KAAAA,OAAO,MAAM,CAAA;AAAA,UAAA;YAGbJ,MAAA,aAAA,kBADRW,YAeY,WAAA;AAAA;cAbT,OAAKR,eAAA,CAAA,EAAA,QAAA,CAAaH,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,gBAHFO,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,KAAAA,OAAO,IAAI,CAAA;AAAA,YAAA;cAEpBG,YAA8B,SAAA,EAApB,MAAM,QAAA,WAAA,GAAU,MAAA,GAAA,CAAA,MAAA,CAAA;AAAA,YAAA;;;SAKvB,QAAA,4BADTI,YAMEC,aAAA;AAAA;UAJA,OAAM;AAAA,UACL,kBAAgB,QAAA;AAAA,UAChB,oBAAkB,QAAA;AAAA,UAClB,MAAM,QAAA;AAAA,QAAA;;;;;"}

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

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

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

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

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

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

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

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

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

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

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

@@ -10,20 +10,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     name: {},
     size: { default: 24 },
-    color: { default: void 0 }
+    color: {}
   },
   setup(__props) {
-    const props = __props;
     const { registeredIcons } = useIcons();
-    const isFill = computed(() => props.name.endsWith("-fill"));
+    const isFill = computed(() => __props.name.endsWith("-fill"));
     const components = computed(() => {
-      const name = props.name;
-      if (!isRuiIcon(name)) {
-        console.warn(`icon ${name} must be a valid RuiIcon`);
+      if (!isRuiIcon(__props.name)) {
+        console.warn(`icon ${__props.name} must be a valid RuiIcon`);
       }
-      const found = registeredIcons[name];
+      const found = registeredIcons[__props.name];
       if (!found) {
-        console.error(`Icons "${name}" not found. Make sure that you have register the icon when installing the RuiPlugin`);
+        console.error(
+          `Icons "${__props.name}" not found. Make sure that you have register the icon when installing the RuiPlugin`
+        );
       }
       return found;
     });

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

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

package/dist/components/index.d.ts CHANGED Viewed

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

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

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

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

@@ -5,7 +5,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   __name: "RuiSkeletonBase",
   props: {
-    rounded: { default: void 0 }
+    rounded: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {

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

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

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

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

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

@@ -8,7 +8,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "RuiSkeletonLoader",
   props: {
     type: { default: "text" },
-    rounded: { default: void 0 }
+    rounded: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {

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

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

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

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

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

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

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

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

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

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

package/dist/components/overlays/badge/RuiBadge.vue2.js CHANGED Viewed

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

package/dist/components/overlays/badge/RuiBadge.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiBadge.vue2.js","sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport ~~{ logicAnd, logicOr } from '@vueuse/math';\nimport~~ RuiIcon from '@/components/icons/RuiIcon.vue';\n\nexport interface Props {\n text?: string \| null;\n icon?: RuiIcons \| null;\n modelValue?: boolean;\n dot?: boolean;\n left?: boolean;\n offsetX?: string \| number;\n offsetY?: string \| number;\n placement?: 'top' \| 'center' \| 'bottom';\n size?: 'sm' \| 'md' \| 'lg';\n rounded?: 'sm' \| 'md' \| 'lg' \| 'full';\n color?: 'default' \| ContextColorsType;\n}\n\ndefineOptions({\n name: 'RuiBadge',\n});\n\nconst ~~props = withDefaults(defineProps<Props>(),~~ {\n text: null,\n icon: null,\n modelValue: true,\n dot: false,\n placement: 'top',\n left: false,\n size: 'md',\n rounded: 'full',\n color: 'primary',\n offsetX: 0,\n offsetY: 0,\n});\n\nconst slots = ~~useSlots~~();\n~~\nconst~~ { ~~modelValue,~~ ~~offsetX,~~ ~~offsetY,~~ ~~icon,~~ ~~text~~ } ~~= toRefs~~(~~props~~);\n\nconst hasIcon = ~~logicOr~~(icon, slots.icon);\n\nconst hasText = ~~logicOr~~(text, slots.badge);\n\nconst hasIconAndText = ~~logicAnd~~(hasIcon, hasText);\n</script>\n\n<template>\n <div :class=\"$style.wrapper\">\n <slot />\n <Transition\n appear\n enter-active-class=\"transform ease-out duration-200\"\n enter-from-class=\"scale-0\"\n enter-to-class=\"scale-100\"\n leave-active-class=\"transform ease-in duration-150\"\n leave-from-class=\"scale-100\"\n leave-to-class=\"scale-0\"\n >\n <div\n v-if=\"modelValue\"\n :class=\"[\n $style.badge,\n $style[color ?? 'primary'],\n $style[`placement__${placement}`],\n $style[`rounded__${rounded}`],\n $style[`size__${size}`],\n { [$style.left]: left, [$style.dot]: dot },\n ]\"\n aria-atomic=\"true\"\n aria-label=\"Badge\"\n aria-live=\"polite\"\n role=\"status\"\n >\n <span\n v-if=\"!dot\"\n :class=\"[\n $style.content,\n {\n [$style.text_icon]: hasIconAndText,\n },\n ]\"\n >\n <slot name=\"badge\">\n <span>\n {{ text }}\n </span>\n </slot>\n <slot name=\"icon\">\n <RuiIcon\n v-if=\"icon\"\n :name=\"icon\"\n size=\"16\"\n :class=\"{ 'ml-0.5': hasText }\"\n />\n </slot>\n </span>\n </div>\n </Transition>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n@use 'sass:list';\n\n$borders: full, sm, md, lg;\n$sizes: sm, md, lg;\n\n.wrapper {\n @apply relative inline-block;\n\n .badge {\n @apply flex items-center justify-center text-xs font-medium absolute;\n @apply bg-transparent text-rui-light-text;\n\n left: calc(100% - 0.5rem + v-bind(offsetX) * 0.0625rem);\n\n .content {\n @apply flex items-center px-1;\n\n &.text_icon {\n @apply px-2;\n }\n }\n\n @each $color in c.$context-colors {\n &.#{$color} {\n @apply text-white bg-rui-#{$color};\n }\n }\n\n @each $border in $borders {\n &.rounded__#{$border} {\n @apply rounded-#{$border};\n }\n }\n\n &.size__sm {\n @apply min-h-[1.25rem] min-w-[1.25rem];\n\n &.left {\n left: calc(-0.95rem + v-bind(offsetX) * 0.0625rem);\n }\n\n &.placement__center {\n top: calc(50% - 0.65rem - v-bind(offsetY) * 0.0625rem);\n }\n }\n\n &.size__md {\n @apply min-h-[1.5rem] min-w-[1.5rem];\n\n &.left {\n left: calc(-1.05rem + v-bind(offsetX) * 0.0625rem);\n }\n\n &.placement__center {\n top: calc(50% - 0.75rem - v-bind(offsetY) * 0.0625rem);\n }\n }\n\n &.size__lg {\n @apply min-h-[1.75rem] min-w-[1.75rem];\n\n &.left {\n left: calc(-1.15rem + v-bind(offsetX) * 0.0625rem);\n }\n\n &.placement__center {\n top: calc(50% - 0.85rem - v-bind(offsetY) * 0.0625rem);\n }\n }\n\n &.placement__top {\n bottom: calc(100% - 0.5rem - v-bind(offsetY) * 0.0625rem);\n }\n\n &.placement__bottom {\n top: calc(100% - 0.5rem - v-bind(offsetY) * 0.0625rem);\n }\n\n &.dot {\n left: calc(100% + 0.125rem + v-bind(offsetX) * 0.0625rem);\n\n &.default {\n @apply bg-gray-500;\n }\n\n &.size__sm {\n @apply min-w-[0.375rem] min-h-[0.375rem];\n }\n\n &.size__md {\n @apply min-w-[0.5rem] min-h-[0.5rem];\n }\n\n &.size__lg {\n @apply min-w-[0.625rem] min-h-[0.625rem];\n }\n\n &.left {\n left: calc(-0.65rem + v-bind(offsetX) * 0.0625rem);\n }\n\n &.placement__top {\n bottom: calc(100% + 0.25rem - v-bind(offsetY) * 0.0625rem);\n }\n\n &.placement__center {\n top: calc(50% - 0.25rem - v-bind(offsetY) * 0.0625rem);\n }\n\n &.placement__bottom {\n top: calc(100% + 0.25rem - v-bind(offsetY) * 0.0625rem);\n }\n }\n }\n}\n\n:global(.dark) {\n .wrapper {\n .badge {\n @apply text-rui-text;\n\n @each $color in c.$context-colors {\n @if list.index((warning, success, info), $color) {\n &.#{$color} {\n @apply text-rui-light-text;\n }\n }\n }\n }\n }\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_renderSlot","_createVNode","_Transition","_unref","_createElementVNode","_createBlock"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;~~AAwBA~~,UAAM,~~QAAQ~~;~~AAcd~~,UAAM,~~QAAQ~~,~~SAAA;AAEd~~,~~UAAM~~,~~EAAE~~,~~YAAY~~,~~SAAS~~,~~SAAS~~,~~MAAM~~,~~KAAA~~,~~IAAS~~,~~OAAO,KAAK~~;~~AAEjE~~,UAAM,UAAU,~~QAAQ~~,MAAM,~~MAAM~~,~~IAAI;AAExC~~,~~UAAM~~,~~UAAU,~~QAAQ,~~MAAM~~,MAAM,KAAK;~~AAEzC~~,UAAM,iBAAiB,~~SAAS~~,~~SAAS~~,OAAO;;~~0BAI9CA~~,mBAmDM,OAAA;AAAA,QAnDA,OAAKC,eAAEC,KAAAA,OAAO,OAAO;AAAA,MAAA;QACzBC,WAAQ,KAAA,QAAA,SAAA;AAAA,QACRC,YAgDaC,YAAA;AAAA,UA/CX,QAAA;AAAA,UACA,sBAAmB;AAAA,UACnB,oBAAiB;AAAA,UACjB,kBAAe;AAAA,UACf,sBAAmB;AAAA,UACnB,oBAAiB;AAAA,UACjB,kBAAe;AAAA,QAAA;2BAEf,MAsCM;AAAA,~~YArCEC~~,~~MAAA~~,~~UAAA~~,~~kBADRN,~~mBAsCM,OAAA;AAAA;cApCH,OAAKC,eAAA;AAAA,gBAAcC,KAAAA,OAAO;AAAA,gBAAiBA,KAAAA,OAAO,QAAA,SAAK,SAAA;AAAA,gBAA0BA,KAAAA,qBAAqB,QAAA,SAAS,EAAA;AAAA,gBAAeA,KAAAA,mBAAmB,QAAA,OAAO,EAAA;AAAA,gBAAeA,KAAAA,gBAAgB,QAAA,IAAI,EAAA;AAAA,mBAAkBA,KAAAA,OAAO,IAAI,GAAG,QAAA,OAAOA,KAAAA,OAAO,GAAG,GAAG,QAAA,IAAA;AAAA,cAAG;cAQnP,eAAY;AAAA,cACZ,cAAW;AAAA,cACX,aAAU;AAAA,cACV,MAAK;AAAA,YAAA;eAGI,QAAA,oBADTF,mBAsBO,QAAA;AAAA;gBApBJ,OAAKC,eAAA;AAAA,kBAAgBC,KAAAA,OAAO;AAAA;qBAAsCA,KAAAA,OAAO,SAAS,GAAGI,MAAA,cAAA;AAAA,kBAAA;AAAA;;gBAOtFH,WAIO,0BAJP,MAIO;AAAA,kBAHLI,mBAEO,~~8BADFD~~,~~MAAA~~,~~IAAA~~,~~CAAI,~~GAAA,CAAA;AAAA,gBAAA;~~gBAGXH~~,WAOO,yBAPP,MAOO;AAAA,~~kBALGG~~,~~MAAA~~,~~IAAA~~,~~kBADRE,~~YAKE,SAAA;AAAA;oBAHC,~~MAAMF~~,~~MAAA,IAAA~~;AAAA,oBACP,MAAK;AAAA,oBACJ,~~kCAAmBA~~,MAAA,OAAA,GAAO;AAAA,kBAAA;;;;;;;;;;;"}
1	+ {"version":3,"file":"RuiBadge.vue2.js","sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\n\nexport interface Props {\n text?: string \| null;\n icon?: RuiIcons \| null;\n modelValue?: boolean;\n dot?: boolean;\n left?: boolean;\n offsetX?: string \| number;\n offsetY?: string \| number;\n placement?: 'top' \| 'center' \| 'bottom';\n size?: 'sm' \| 'md' \| 'lg';\n rounded?: 'sm' \| 'md' \| 'lg' \| 'full';\n color?: 'default' \| ContextColorsType;\n}\n\ndefineOptions({\n name: 'RuiBadge',\n});\n\nconst {\n text = null,\n icon = null,\n modelValue = true,\n dot = false,\n placement = 'top',\n left = false,\n size = 'md',\n rounded = 'full',\n color = 'primary',\n offsetX = 0,\n offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n default?: () => any;\n badge?: () => any;\n icon?: () => any;\n}>();\n\nconst hasIcon = computed<boolean>(() => !!icon \|\| !!slots.icon);\n\nconst hasText = computed<boolean>(() => !!text \|\| !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => get(hasIcon) && get(hasText));\n</script>\n\n<template>\n <div :class=\"$style.wrapper\">\n <slot />\n <Transition\n appear\n enter-active-class=\"transform ease-out duration-200\"\n enter-from-class=\"scale-0\"\n enter-to-class=\"scale-100\"\n leave-active-class=\"transform ease-in duration-150\"\n leave-from-class=\"scale-100\"\n leave-to-class=\"scale-0\"\n >\n <div\n v-if=\"modelValue\"\n :class=\"[\n $style.badge,\n $style[color ?? 'primary'],\n $style[`placement__${placement}`],\n $style[`rounded__${rounded}`],\n $style[`size__${size}`],\n { [$style.left]: left, [$style.dot]: dot },\n ]\"\n aria-atomic=\"true\"\n aria-label=\"Badge\"\n aria-live=\"polite\"\n role=\"status\"\n >\n <span\n v-if=\"!dot\"\n :class=\"[\n $style.content,\n {\n [$style.text_icon]: hasIconAndText,\n },\n ]\"\n >\n <slot name=\"badge\">\n <span>\n {{ text }}\n </span>\n </slot>\n <slot name=\"icon\">\n <RuiIcon\n v-if=\"icon\"\n :name=\"icon\"\n size=\"16\"\n :class=\"{ 'ml-0.5': hasText }\"\n />\n </slot>\n </span>\n </div>\n </Transition>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n@use 'sass:list';\n\n$borders: full, sm, md, lg;\n$sizes: sm, md, lg;\n\n.wrapper {\n @apply relative inline-block;\n\n .badge {\n @apply flex items-center justify-center text-xs font-medium absolute;\n @apply bg-transparent text-rui-light-text;\n\n left: calc(100% - 0.5rem + v-bind(offsetX) * 0.0625rem);\n\n .content {\n @apply flex items-center px-1;\n\n &.text_icon {\n @apply px-2;\n }\n }\n\n @each $color in c.$context-colors {\n &.#{$color} {\n @apply text-white bg-rui-#{$color};\n }\n }\n\n @each $border in $borders {\n &.rounded__#{$border} {\n @apply rounded-#{$border};\n }\n }\n\n &.size__sm {\n @apply min-h-[1.25rem] min-w-[1.25rem];\n\n &.left {\n left: calc(-0.95rem + v-bind(offsetX) * 0.0625rem);\n }\n\n &.placement__center {\n top: calc(50% - 0.65rem - v-bind(offsetY) * 0.0625rem);\n }\n }\n\n &.size__md {\n @apply min-h-[1.5rem] min-w-[1.5rem];\n\n &.left {\n left: calc(-1.05rem + v-bind(offsetX) * 0.0625rem);\n }\n\n &.placement__center {\n top: calc(50% - 0.75rem - v-bind(offsetY) * 0.0625rem);\n }\n }\n\n &.size__lg {\n @apply min-h-[1.75rem] min-w-[1.75rem];\n\n &.left {\n left: calc(-1.15rem + v-bind(offsetX) * 0.0625rem);\n }\n\n &.placement__center {\n top: calc(50% - 0.85rem - v-bind(offsetY) * 0.0625rem);\n }\n }\n\n &.placement__top {\n bottom: calc(100% - 0.5rem - v-bind(offsetY) * 0.0625rem);\n }\n\n &.placement__bottom {\n top: calc(100% - 0.5rem - v-bind(offsetY) * 0.0625rem);\n }\n\n &.dot {\n left: calc(100% + 0.125rem + v-bind(offsetX) * 0.0625rem);\n\n &.default {\n @apply bg-gray-500;\n }\n\n &.size__sm {\n @apply min-w-[0.375rem] min-h-[0.375rem];\n }\n\n &.size__md {\n @apply min-w-[0.5rem] min-h-[0.5rem];\n }\n\n &.size__lg {\n @apply min-w-[0.625rem] min-h-[0.625rem];\n }\n\n &.left {\n left: calc(-0.65rem + v-bind(offsetX) * 0.0625rem);\n }\n\n &.placement__top {\n bottom: calc(100% + 0.25rem - v-bind(offsetY) * 0.0625rem);\n }\n\n &.placement__center {\n top: calc(50% - 0.25rem - v-bind(offsetY) * 0.0625rem);\n }\n\n &.placement__bottom {\n top: calc(100% + 0.25rem - v-bind(offsetY) * 0.0625rem);\n }\n }\n }\n}\n\n:global(.dark) {\n .wrapper {\n .badge {\n @apply text-rui-text;\n\n @each $color in c.$context-colors {\n @if list.index((warning, success, info), $color) {\n &.#{$color} {\n @apply text-rui-light-text;\n }\n }\n }\n }\n }\n}\n</style>\n"],"names":["_useSlots","_createElementBlock","_normalizeClass","$style","_renderSlot","_createVNode","_Transition","_unref","_createElementVNode","_createBlock"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,UAAM,QAAQA,SAAA;AAMd,UAAM,UAAU,SAAkB,MAAM,CAAC,CAAC,QAAA,QAAQ,CAAC,CAAC,MAAM,IAAI;AAE9D,UAAM,UAAU,SAAkB,MAAM,CAAC,CAAC,QAAA,QAAQ,CAAC,CAAC,MAAM,KAAK;AAE/D,UAAM,iBAAiB,SAAkB,MAAM,IAAI,OAAO,KAAK,IAAI,OAAO,CAAC;;0BAIzEC,mBAmDM,OAAA;AAAA,QAnDA,OAAKC,eAAEC,KAAAA,OAAO,OAAO;AAAA,MAAA;QACzBC,WAAQ,KAAA,QAAA,SAAA;AAAA,QACRC,YAgDaC,YAAA;AAAA,UA/CX,QAAA;AAAA,UACA,sBAAmB;AAAA,UACnB,oBAAiB;AAAA,UACjB,kBAAe;AAAA,UACf,sBAAmB;AAAA,UACnB,oBAAiB;AAAA,UACjB,kBAAe;AAAA,QAAA;2BAEf,MAsCM;AAAA,YArCE,QAAA,2BADRL,mBAsCM,OAAA;AAAA;cApCH,OAAKC,eAAA;AAAA,gBAAcC,KAAAA,OAAO;AAAA,gBAAiBA,KAAAA,OAAO,QAAA,SAAK,SAAA;AAAA,gBAA0BA,KAAAA,qBAAqB,QAAA,SAAS,EAAA;AAAA,gBAAeA,KAAAA,mBAAmB,QAAA,OAAO,EAAA;AAAA,gBAAeA,KAAAA,gBAAgB,QAAA,IAAI,EAAA;AAAA,mBAAkBA,KAAAA,OAAO,IAAI,GAAG,QAAA,OAAOA,KAAAA,OAAO,GAAG,GAAG,QAAA,IAAA;AAAA,cAAG;cAQnP,eAAY;AAAA,cACZ,cAAW;AAAA,cACX,aAAU;AAAA,cACV,MAAK;AAAA,YAAA;eAGI,QAAA,oBADTF,mBAsBO,QAAA;AAAA;gBApBJ,OAAKC,eAAA;AAAA,kBAAgBC,KAAAA,OAAO;AAAA;qBAAsCA,KAAAA,OAAO,SAAS,GAAGI,MAAA,cAAA;AAAA,kBAAA;AAAA;;gBAOtFH,WAIO,0BAJP,MAIO;AAAA,kBAHLI,mBAEO,8BADF,QAAA,IAAI,GAAA,CAAA;AAAA,gBAAA;gBAGXJ,WAOO,yBAPP,MAOO;AAAA,kBALG,QAAA,qBADRK,YAKE,SAAA;AAAA;oBAHC,MAAM,QAAA;AAAA,oBACP,MAAK;AAAA,oBACJ,kCAAmBF,MAAA,OAAA,GAAO;AAAA,kBAAA;;;;;;;;;;;"}

package/dist/components/overlays/bottom-sheet/RuiBottomSheet.vue.d.ts CHANGED Viewed

@@ -1,17 +1,22 @@
 export interface BottomSheetProps {
-    modelValue?: boolean;
     persistent?: boolean;
     width?: string | number;
     maxWidth?: string | number;
 }
+type __VLS_Props = BottomSheetProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_10: string, __VLS_11: any;
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<BottomSheetProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BottomSheetProps> & Readonly<{}>, {
-    modelValue: boolean;
-    persistent: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;