npm - @rotki/ui-library - Versions diffs - 3.1.0 → 3.1.2 - Mend

@rotki/ui-library 3.1.0 → 3.1.2

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 (44) hide show

package/dist/components/alerts/RuiAlert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiAlert.js","names":["_sfc_main"],"sources":["../../../src/components/alerts/RuiAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n title?: string;\n description?: string;\n type?: ContextColorsType;\n icon?: RuiIcons;\n variant?: 'default' \| 'filled' \| 'outlined';\n actionText?: string;\n closeable?: boolean;\n}\n\ndefineOptions({\n name: 'RuiAlert',\n inheritAttrs: false,\n});\n\nconst {\n title = '',\n description = '',\n type = 'primary',\n icon = undefined,\n variant = 'default',\n actionText = '',\n closeable = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n action: [];\n close: [];\n}>();\n\nconst slots = defineSlots<{\n title?: () => any;\n default?: () => any;\n}>();\n\nconst alertStyles = tv({\n slots: {\n root: 'px-4 py-2.5 rounded-rui-panel flex between:ml-4 between:mr-0',\n content: 'flex between:ml-3 between:mr-0 py-1 grow',\n // as tall as the first line of text and centered in it, so the icon lines up however the text wraps\n icon: 'flex shrink-0 items-center',\n texts: 'between:mt-1 between:mb-0 grow',\n action: '',\n close: '',\n },\n variants: {\n // the first line is the title's (24px) when there is one, else the description's (text-sm, 20px)\n titled: {\n true: { icon: 'h-6' },\n false: { icon: 'h-5' },\n },\n variant: {\n default: {},\n filled: {\n icon: 'text-rui-dark-text!',\n texts: 'text-rui-dark-text!',\n action: 'text-rui-dark-text!',\n close: 'text-rui-dark-text!',\n },\n outlined: { root: 'border -m-px bg-transparent' },\n },\n /\n Each type names its color once, as `--rui-alert`, and the variants mix from it. ~~The~~ ~~tints~~\n * ~~and~~ shades used to be paused CSS animations behind an `@supports (color-mix())` check that\n * ~~never~~ matched (~~it is~~ not a valid condition)~~, so every browser took the animation~~; mixing\n * directly gives the same colors without it.\n */\n type: {\n primary: { root: '[--rui-alert:var(--rui-primary-main)]' },\n secondary: { root: '[--rui-alert:var(--rui-secondary-main)]' },\n // a status color's dark `main` is a text tone, so a filled alert takes the deep `darker` there\n error: { root: '[--rui-alert:var(--rui-error-main)] [--rui-alert-fill:var(--rui-error-darker)]' },\n warning: { root: '[--rui-alert:var(--rui-warning-main)] [--rui-alert-fill:var(--rui-warning-darker)]' },\n info: { root: '[--rui-alert:var(--rui-info-main)] [--rui-alert-fill:var(--rui-info-darker)]' },\n success: { root: '[--rui-alert:var(--rui-success-main)] [--rui-alert-fill:var(--rui-success-darker)]' },\n },\n },\n compoundVariants: [\n // A tint of the type's color with a hairline of it, which reads on any surface in either theme\n {\n variant: 'default',\n class: { root: 'border -m-px bg-[color-mix(in_srgb,rgb(var(--rui-alert))_8%,transparent)] dark:bg-[color-mix(in_srgb,rgb(var(--rui-alert))_12%,transparent)] border-[color-mix(in_srgb,rgb(var(--rui-alert))_25%,transparent)]' },\n },\n { variant: 'filled', class: { root: 'bg-[rgb(var(--rui-alert))] dark:bg-[rgb(var(--rui-alert-fill,var(--rui-alert)))]' } },\n // without a tint behind it, the outlined alert carries its type in the icon too\n { variant: 'outlined', class: { root: 'border-[rgb(var(--rui-alert))]', icon: 'text-[rgb(var(--rui-alert))]' } },\n ],\n compoundSlots: [\n {\n slots: ['texts', 'action', 'close'],\n variant: ['default', 'outlined'],\n class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n },\n {\n slots: ['icon'],\n variant: 'default',\n class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n },\n ],\n});\n\nconst ui = computed<ReturnType<typeof alertStyles>>(() => alertStyles({ variant, type, titled: !!slots.title \|\| !!title }));\n\nconst usedIcon = computed<RuiIcons \| undefined>(() => {\n if (icon)\n return icon;\n\n const iconMap: Record<ContextColorsType, RuiIcons \| undefined> = {\n primary: undefined,\n secondary: undefined,\n warning: 'lu-triangle-alert',\n info: 'lu-info',\n error: 'lu-circle-alert',\n success: 'lu-circle-check',\n };\n\n return iconMap[type];\n});\n</script>\n\n<template>\n <div\n :class=\"ui.root()\"\n v-bind=\"$attrs\"\n :data-variant=\"variant\"\n :data-type=\"type\"\n >\n <div :class=\"ui.content()\">\n <div\n v-if=\"usedIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"usedIcon\"\n size=\"20\"\n />\n </div>\n <div :class=\"ui.texts()\">\n <div\n v-if=\"$slots.title \|\| title\"\n :class=\"{\n 'font-medium': !!title,\n }\"\n >\n <slot name=\"title\">\n {{ title }}\n </slot>\n </div>\n\n <div\n v-if=\"$slots.default \|\| description\"\n class=\"text-body-2\"\n >\n <slot>\n {{ description }}\n </slot>\n </div>\n </div>\n </div>\n <div v-if=\"actionText\">\n <RuiButton\n variant=\"text\"\n size=\"sm\"\n :color=\"variant === 'filled' ? undefined : type\"\n :class=\"ui.action()\"\n data-id=\"alert-action\"\n @click=\"emit('action')\"\n >\n {{ actionText }}\n </RuiButton>\n </div>\n <div v-if=\"closeable\">\n <RuiButton\n :color=\"variant === 'filled' ? undefined : type\"\n size=\"sm\"\n icon\n variant=\"text\"\n :class=\"ui.close()\"\n data-id=\"alert-close\"\n @click=\"emit('close')\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"20\"\n />\n </RuiButton>\n </div>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiAlert.js","names":["_sfc_main"],"sources":["../../../src/components/alerts/RuiAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n title?: string;\n description?: string;\n type?: ContextColorsType;\n icon?: RuiIcons;\n variant?: 'default' \| 'filled' \| 'outlined';\n actionText?: string;\n closeable?: boolean;\n}\n\ndefineOptions({\n name: 'RuiAlert',\n inheritAttrs: false,\n});\n\nconst {\n title = '',\n description = '',\n type = 'primary',\n icon = undefined,\n variant = 'default',\n actionText = '',\n closeable = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n action: [];\n close: [];\n}>();\n\nconst slots = defineSlots<{\n title?: () => any;\n default?: () => any;\n}>();\n\nconst alertStyles = tv({\n slots: {\n root: 'px-4 py-2.5 rounded-rui-panel flex between:ml-4 between:mr-0',\n content: 'flex between:ml-3 between:mr-0 py-1 grow',\n // as tall as the first line of text and centered in it, so the icon lines up however the text wraps\n icon: 'flex shrink-0 items-center',\n texts: 'between:mt-1 between:mb-0 grow',\n action: '',\n close: '',\n },\n variants: {\n // the first line is the title's (24px) when there is one, else the description's (text-sm, 20px)\n titled: {\n true: { icon: 'h-6' },\n false: { icon: 'h-5' },\n },\n variant: {\n default: {},\n filled: {\n icon: 'text-rui-dark-text!',\n texts: 'text-rui-dark-text!',\n action: 'text-rui-dark-text!',\n close: 'text-rui-dark-text!',\n },\n outlined: { root: 'border -m-px bg-transparent' },\n },\n /\n Each type names its color once, as `--rui-alert`, and the variants mix from it. Tints and\n * shades used to be paused CSS animations behind an `@supports (color-mix())` check that never\n * matched (not a valid condition); mixing directly gives the same colors without them.\n */\n type: {\n primary: { root: '[--rui-alert:var(--rui-primary-main)]' },\n secondary: { root: '[--rui-alert:var(--rui-secondary-main)]' },\n // a status color's dark `main` is a text tone, so a filled alert takes the deep `darker` there\n error: { root: '[--rui-alert:var(--rui-error-main)] [--rui-alert-fill:var(--rui-error-darker)]' },\n warning: { root: '[--rui-alert:var(--rui-warning-main)] [--rui-alert-fill:var(--rui-warning-darker)]' },\n info: { root: '[--rui-alert:var(--rui-info-main)] [--rui-alert-fill:var(--rui-info-darker)]' },\n success: { root: '[--rui-alert:var(--rui-success-main)] [--rui-alert-fill:var(--rui-success-darker)]' },\n },\n },\n compoundVariants: [\n // A tint of the type's color with a hairline of it, which reads on any surface in either theme\n {\n variant: 'default',\n class: { root: 'border -m-px bg-[color-mix(in_srgb,rgb(var(--rui-alert))_8%,transparent)] dark:bg-[color-mix(in_srgb,rgb(var(--rui-alert))_12%,transparent)] border-[color-mix(in_srgb,rgb(var(--rui-alert))_25%,transparent)]' },\n },\n { variant: 'filled', class: { root: 'bg-[rgb(var(--rui-alert))] dark:bg-[rgb(var(--rui-alert-fill,var(--rui-alert)))]' } },\n // without a tint behind it, the outlined alert carries its type in the icon too\n { variant: 'outlined', class: { root: 'border-[rgb(var(--rui-alert))]', icon: 'text-[rgb(var(--rui-alert))]' } },\n ],\n compoundSlots: [\n {\n slots: ['texts', 'action', 'close'],\n variant: ['default', 'outlined'],\n class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n },\n {\n slots: ['icon'],\n variant: 'default',\n class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n },\n ],\n});\n\nconst ui = computed<ReturnType<typeof alertStyles>>(() => alertStyles({ variant, type, titled: !!slots.title \|\| !!title }));\n\nconst usedIcon = computed<RuiIcons \| undefined>(() => {\n if (icon)\n return icon;\n\n const iconMap: Record<ContextColorsType, RuiIcons \| undefined> = {\n primary: undefined,\n secondary: undefined,\n warning: 'lu-triangle-alert',\n info: 'lu-info',\n error: 'lu-circle-alert',\n success: 'lu-circle-check',\n };\n\n return iconMap[type];\n});\n</script>\n\n<template>\n <div\n :class=\"ui.root()\"\n v-bind=\"$attrs\"\n :data-variant=\"variant\"\n :data-type=\"type\"\n >\n <div :class=\"ui.content()\">\n <div\n v-if=\"usedIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"usedIcon\"\n size=\"20\"\n />\n </div>\n <div :class=\"ui.texts()\">\n <div\n v-if=\"$slots.title \|\| title\"\n :class=\"{\n 'font-medium': !!title,\n }\"\n >\n <slot name=\"title\">\n {{ title }}\n </slot>\n </div>\n\n <div\n v-if=\"$slots.default \|\| description\"\n class=\"text-body-2\"\n >\n <slot>\n {{ description }}\n </slot>\n </div>\n </div>\n </div>\n <div v-if=\"actionText\">\n <RuiButton\n variant=\"text\"\n size=\"sm\"\n :color=\"variant === 'filled' ? undefined : type\"\n :class=\"ui.action()\"\n data-id=\"alert-action\"\n @click=\"emit('action')\"\n >\n {{ actionText }}\n </RuiButton>\n </div>\n <div v-if=\"closeable\">\n <RuiButton\n :color=\"variant === 'filled' ? undefined : type\"\n size=\"sm\"\n icon\n variant=\"text\"\n :class=\"ui.close()\"\n data-id=\"alert-close\"\n @click=\"emit('close')\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"20\"\n />\n </RuiButton>\n </div>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/alerts/RuiAlert.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiAlert.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_normalizeClass","_createVNode","RuiIcon","_createCommentVNode","_renderSlot","_createTextVNode","_toDisplayString","RuiButton","_withCtx"],"sources":["../../../src/components/alerts/RuiAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n title?: string;\n description?: string;\n type?: ContextColorsType;\n icon?: RuiIcons;\n variant?: 'default' \| 'filled' \| 'outlined';\n actionText?: string;\n closeable?: boolean;\n}\n\ndefineOptions({\n name: 'RuiAlert',\n inheritAttrs: false,\n});\n\nconst {\n title = '',\n description = '',\n type = 'primary',\n icon = undefined,\n variant = 'default',\n actionText = '',\n closeable = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n action: [];\n close: [];\n}>();\n\nconst slots = defineSlots<{\n title?: () => any;\n default?: () => any;\n}>();\n\nconst alertStyles = tv({\n slots: {\n root: 'px-4 py-2.5 rounded-rui-panel flex between:ml-4 between:mr-0',\n content: 'flex between:ml-3 between:mr-0 py-1 grow',\n // as tall as the first line of text and centered in it, so the icon lines up however the text wraps\n icon: 'flex shrink-0 items-center',\n texts: 'between:mt-1 between:mb-0 grow',\n action: '',\n close: '',\n },\n variants: {\n // the first line is the title's (24px) when there is one, else the description's (text-sm, 20px)\n titled: {\n true: { icon: 'h-6' },\n false: { icon: 'h-5' },\n },\n variant: {\n default: {},\n filled: {\n icon: 'text-rui-dark-text!',\n texts: 'text-rui-dark-text!',\n action: 'text-rui-dark-text!',\n close: 'text-rui-dark-text!',\n },\n outlined: { root: 'border -m-px bg-transparent' },\n },\n /\n Each type names its color once, as `--rui-alert`, and the variants mix from it. ~~The~~ ~~tints~~\n * ~~and~~ shades used to be paused CSS animations behind an `@supports (color-mix())` check that\n * ~~never~~ matched (~~it is~~ not a valid condition)~~, so every browser took the animation~~; mixing\n * directly gives the same colors without it.\n */\n type: {\n primary: { root: '[--rui-alert:var(--rui-primary-main)]' },\n secondary: { root: '[--rui-alert:var(--rui-secondary-main)]' },\n // a status color's dark `main` is a text tone, so a filled alert takes the deep `darker` there\n error: { root: '[--rui-alert:var(--rui-error-main)] [--rui-alert-fill:var(--rui-error-darker)]' },\n warning: { root: '[--rui-alert:var(--rui-warning-main)] [--rui-alert-fill:var(--rui-warning-darker)]' },\n info: { root: '[--rui-alert:var(--rui-info-main)] [--rui-alert-fill:var(--rui-info-darker)]' },\n success: { root: '[--rui-alert:var(--rui-success-main)] [--rui-alert-fill:var(--rui-success-darker)]' },\n },\n },\n compoundVariants: [\n // A tint of the type's color with a hairline of it, which reads on any surface in either theme\n {\n variant: 'default',\n class: { root: 'border -m-px bg-[color-mix(in_srgb,rgb(var(--rui-alert))_8%,transparent)] dark:bg-[color-mix(in_srgb,rgb(var(--rui-alert))_12%,transparent)] border-[color-mix(in_srgb,rgb(var(--rui-alert))_25%,transparent)]' },\n },\n { variant: 'filled', class: { root: 'bg-[rgb(var(--rui-alert))] dark:bg-[rgb(var(--rui-alert-fill,var(--rui-alert)))]' } },\n // without a tint behind it, the outlined alert carries its type in the icon too\n { variant: 'outlined', class: { root: 'border-[rgb(var(--rui-alert))]', icon: 'text-[rgb(var(--rui-alert))]' } },\n ],\n compoundSlots: [\n {\n slots: ['texts', 'action', 'close'],\n variant: ['default', 'outlined'],\n class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n },\n {\n slots: ['icon'],\n variant: 'default',\n class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n },\n ],\n});\n\nconst ui = computed<ReturnType<typeof alertStyles>>(() => alertStyles({ variant, type, titled: !!slots.title \|\| !!title }));\n\nconst usedIcon = computed<RuiIcons \| undefined>(() => {\n if (icon)\n return icon;\n\n const iconMap: Record<ContextColorsType, RuiIcons \| undefined> = {\n primary: undefined,\n secondary: undefined,\n warning: 'lu-triangle-alert',\n info: 'lu-info',\n error: 'lu-circle-alert',\n success: 'lu-circle-check',\n };\n\n return iconMap[type];\n});\n</script>\n\n<template>\n <div\n :class=\"ui.root()\"\n v-bind=\"$attrs\"\n :data-variant=\"variant\"\n :data-type=\"type\"\n >\n <div :class=\"ui.content()\">\n <div\n v-if=\"usedIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"usedIcon\"\n size=\"20\"\n />\n </div>\n <div :class=\"ui.texts()\">\n <div\n v-if=\"$slots.title \|\| title\"\n :class=\"{\n 'font-medium': !!title,\n }\"\n >\n <slot name=\"title\">\n {{ title }}\n </slot>\n </div>\n\n <div\n v-if=\"$slots.default \|\| description\"\n class=\"text-body-2\"\n >\n <slot>\n {{ description }}\n </slot>\n </div>\n </div>\n </div>\n <div v-if=\"actionText\">\n <RuiButton\n variant=\"text\"\n size=\"sm\"\n :color=\"variant === 'filled' ? undefined : type\"\n :class=\"ui.action()\"\n data-id=\"alert-action\"\n @click=\"emit('action')\"\n >\n {{ actionText }}\n </RuiButton>\n </div>\n <div v-if=\"closeable\">\n <RuiButton\n :color=\"variant === 'filled' ? undefined : type\"\n size=\"sm\"\n icon\n variant=\"text\"\n :class=\"ui.close()\"\n data-id=\"alert-close\"\n @click=\"emit('close')\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"20\"\n />\n </RuiButton>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,MAAM,OAAO;EAKb,MAAM,QAAQE,SAAA;EAKd,MAAM,cAAc,GAAG;GACrB,OAAO;IACL,MAAM;IACN,SAAS;IAET,MAAM;IACN,OAAO;IACP,QAAQ;IACR,OAAO;GACT;GACA,UAAU;IAER,QAAQ;KACN,MAAM,EAAE,MAAM,MAAM;KACpB,OAAO,EAAE,MAAM,MAAM;IACvB;IACA,SAAS;KACP,SAAS,CAAC;KACV,QAAQ;MACN,MAAM;MACN,OAAO;MACP,QAAQ;MACR,OAAO;KACT;KACA,UAAU,EAAE,MAAM,8BAA8B;IAClD;~~IAOA~~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"}
1	+ {"version":3,"file":"RuiAlert.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_createElementVNode","_normalizeClass","_createVNode","RuiIcon","_createCommentVNode","_renderSlot","_createTextVNode","_toDisplayString","RuiButton","_withCtx"],"sources":["../../../src/components/alerts/RuiAlert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n title?: string;\n description?: string;\n type?: ContextColorsType;\n icon?: RuiIcons;\n variant?: 'default' \| 'filled' \| 'outlined';\n actionText?: string;\n closeable?: boolean;\n}\n\ndefineOptions({\n name: 'RuiAlert',\n inheritAttrs: false,\n});\n\nconst {\n title = '',\n description = '',\n type = 'primary',\n icon = undefined,\n variant = 'default',\n actionText = '',\n closeable = false,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n action: [];\n close: [];\n}>();\n\nconst slots = defineSlots<{\n title?: () => any;\n default?: () => any;\n}>();\n\nconst alertStyles = tv({\n slots: {\n root: 'px-4 py-2.5 rounded-rui-panel flex between:ml-4 between:mr-0',\n content: 'flex between:ml-3 between:mr-0 py-1 grow',\n // as tall as the first line of text and centered in it, so the icon lines up however the text wraps\n icon: 'flex shrink-0 items-center',\n texts: 'between:mt-1 between:mb-0 grow',\n action: '',\n close: '',\n },\n variants: {\n // the first line is the title's (24px) when there is one, else the description's (text-sm, 20px)\n titled: {\n true: { icon: 'h-6' },\n false: { icon: 'h-5' },\n },\n variant: {\n default: {},\n filled: {\n icon: 'text-rui-dark-text!',\n texts: 'text-rui-dark-text!',\n action: 'text-rui-dark-text!',\n close: 'text-rui-dark-text!',\n },\n outlined: { root: 'border -m-px bg-transparent' },\n },\n /\n Each type names its color once, as `--rui-alert`, and the variants mix from it. Tints and\n * shades used to be paused CSS animations behind an `@supports (color-mix())` check that never\n * matched (not a valid condition); mixing directly gives the same colors without them.\n */\n type: {\n primary: { root: '[--rui-alert:var(--rui-primary-main)]' },\n secondary: { root: '[--rui-alert:var(--rui-secondary-main)]' },\n // a status color's dark `main` is a text tone, so a filled alert takes the deep `darker` there\n error: { root: '[--rui-alert:var(--rui-error-main)] [--rui-alert-fill:var(--rui-error-darker)]' },\n warning: { root: '[--rui-alert:var(--rui-warning-main)] [--rui-alert-fill:var(--rui-warning-darker)]' },\n info: { root: '[--rui-alert:var(--rui-info-main)] [--rui-alert-fill:var(--rui-info-darker)]' },\n success: { root: '[--rui-alert:var(--rui-success-main)] [--rui-alert-fill:var(--rui-success-darker)]' },\n },\n },\n compoundVariants: [\n // A tint of the type's color with a hairline of it, which reads on any surface in either theme\n {\n variant: 'default',\n class: { root: 'border -m-px bg-[color-mix(in_srgb,rgb(var(--rui-alert))_8%,transparent)] dark:bg-[color-mix(in_srgb,rgb(var(--rui-alert))_12%,transparent)] border-[color-mix(in_srgb,rgb(var(--rui-alert))_25%,transparent)]' },\n },\n { variant: 'filled', class: { root: 'bg-[rgb(var(--rui-alert))] dark:bg-[rgb(var(--rui-alert-fill,var(--rui-alert)))]' } },\n // without a tint behind it, the outlined alert carries its type in the icon too\n { variant: 'outlined', class: { root: 'border-[rgb(var(--rui-alert))]', icon: 'text-[rgb(var(--rui-alert))]' } },\n ],\n compoundSlots: [\n {\n slots: ['texts', 'action', 'close'],\n variant: ['default', 'outlined'],\n class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n },\n {\n slots: ['icon'],\n variant: 'default',\n class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n },\n ],\n});\n\nconst ui = computed<ReturnType<typeof alertStyles>>(() => alertStyles({ variant, type, titled: !!slots.title \|\| !!title }));\n\nconst usedIcon = computed<RuiIcons \| undefined>(() => {\n if (icon)\n return icon;\n\n const iconMap: Record<ContextColorsType, RuiIcons \| undefined> = {\n primary: undefined,\n secondary: undefined,\n warning: 'lu-triangle-alert',\n info: 'lu-info',\n error: 'lu-circle-alert',\n success: 'lu-circle-check',\n };\n\n return iconMap[type];\n});\n</script>\n\n<template>\n <div\n :class=\"ui.root()\"\n v-bind=\"$attrs\"\n :data-variant=\"variant\"\n :data-type=\"type\"\n >\n <div :class=\"ui.content()\">\n <div\n v-if=\"usedIcon\"\n :class=\"ui.icon()\"\n >\n <RuiIcon\n :name=\"usedIcon\"\n size=\"20\"\n />\n </div>\n <div :class=\"ui.texts()\">\n <div\n v-if=\"$slots.title \|\| title\"\n :class=\"{\n 'font-medium': !!title,\n }\"\n >\n <slot name=\"title\">\n {{ title }}\n </slot>\n </div>\n\n <div\n v-if=\"$slots.default \|\| description\"\n class=\"text-body-2\"\n >\n <slot>\n {{ description }}\n </slot>\n </div>\n </div>\n </div>\n <div v-if=\"actionText\">\n <RuiButton\n variant=\"text\"\n size=\"sm\"\n :color=\"variant === 'filled' ? undefined : type\"\n :class=\"ui.action()\"\n data-id=\"alert-action\"\n @click=\"emit('action')\"\n >\n {{ actionText }}\n </RuiButton>\n </div>\n <div v-if=\"closeable\">\n <RuiButton\n :color=\"variant === 'filled' ? undefined : type\"\n size=\"sm\"\n icon\n variant=\"text\"\n :class=\"ui.close()\"\n data-id=\"alert-close\"\n @click=\"emit('close')\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"20\"\n />\n </RuiButton>\n </div>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/buttons/button/button-styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/*\n The button's classes.\n \n Three decisions the class lists cannot state themselves:\n \n `position: relative` is not in the base root: it is only a positioning\n * context for the loading spinner, so the `loading` variant applies it.\n * Basing it here would collide with consumers pinning the button with\n * `fixed`/`absolute`, since cascade order picks the later utility, usually\n * `relative`, and turns their `right-`/`bottom-` into relative offsets,\n * which misplaces FABs.\n \n Icon sizing flows through the `--rui-icon-size` custom property, seeded at\n * the md value in the base root and redefined per size variant with `!` so a\n * variant beats the baseline on the same element regardless of source order.\n * RuiIcon's own `size` prop stamps an inline style on the svg, which beats the\n * inherited value, so a consumer always wins. See rotki/ui-library#512.\n \n `disabled` on the element covers two states: actually disabled, and loading,\n * since RuiButton sets `disabled = disabled \|\| loading`. Only the cursor is\n * shared between them; the grey disabled palette lives in the `loading: false`\n * compounds, so a loading button keeps its variant color behind the spinner.\n \n An icon-only button matches the height of the text button of the same size,\n * with a 60-70% glyph ratio, which is a larger glyph than the same size gives\n * a prepend/append icon so it does not look lost in the square. xs pads by an\n * arbitrary 0.1875rem because no Tailwind token holds the ratio at a 14px\n * glyph:\n \n ```\n * xs p-[0.1875rem] + 0.875rem icon = 1.25rem (20px) 70%\n * sm p-1 + 1.25rem icon = 1.75rem (28px) 71%\n * md (default) p-2 + 1.25rem icon = 2.25rem (36px) 56%\n * lg p-1.5 + 1.5rem icon = 2.25rem (36px) 67%\n * xl p-2 + 1.5rem icon = 2.5rem (40px) 60%\n * 2xl p-2 + 1.75rem icon = 2.75rem (44px) 64%\n * ```\n /\nexport const buttonStyles = tv({\n slots: {\n root: [\n 'text-sm leading-5 font-medium inset-ring inset-ring-transparent',\n 'flex items-center justify-center gap-x-2',\n // md is 36px, the height of a text field or select, so a button lines up with them in a row\n 'px-4 py-2 rounded-rui-control transition-colors duration-150',\n '[--rui-icon-size:1rem]',\n 'disabled:cursor-not-allowed',\n 'focus-visible:focus-ring',\n ].join(' '),\n label: 'inline-block text-nowrap',\n // inline in the prepend icon's place; an icon-only button centers it over its hidden glyph instead\n spinner: 'shrink-0',\n },\n variants: {\n variant: {\n default: {},\n outlined: {},\n text: { root: 'px-2' },\n fab: { root: 'rounded-full py-2 shadow-rui-control disabled:shadow-none' },\n // The label's 16px line-box matches the md icon box, so the two share an optical center (rotki/ui-library#515)\n list: { root: 'p-3 px-3 rounded-rui-sm w-full justify-start text-left', label: 'w-full leading-4' },\n // An action inside running text: no box, so its size, padding and fills are reset in the link compounds at the end\n link: { root: 'inline-flex align-baseline gap-x-1 underline-offset-2 not-disabled:hover:underline' },\n },\n size: {\n 'xs': { root: 'px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]' },\n 'sm': { root: 'px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:0.875rem]' },\n 'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n // 40px, to line up with RuiTextField / RuiMenuSelect in a toolbar; a 44px jumbo CTA is `2xl`\n 'xl': { root: 'px-6 py-2 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n '2xl': { root: 'px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n },\n color: {\n grey: { root: 'bg-rui-neutral-100 hover:bg-rui-neutral-200 active:bg-rui-neutral-300 text-rui-text dark:bg-rui-neutral-800 dark:hover:bg-rui-neutral-700 dark:active:bg-rui-neutral-600' },\n // hover is a tint laid over the fill (see the filled compound below); pressed sinks to `darker`\n primary: { root: 'bg-rui-primary active:bg-rui-primary-darker text-rui-dark-text dark:text-rui-text' },\n secondary: { root: 'bg-rui-secondary active:bg-rui-secondary-darker text-rui-dark-text dark:text-rui-text' },\n error: { root: 'bg-rui-error active:bg-rui-error-darker text-rui-dark-text dark:text-rui-text' },\n warning: { root: 'bg-rui-warning active:bg-rui-warning-darker text-rui-dark-text dark:text-rui-text' },\n info: { root: 'bg-rui-info active:bg-rui-info-darker text-rui-dark-text dark:text-rui-text' },\n success: { root: 'bg-rui-success active:bg-rui-success-darker text-rui-dark-text dark:text-rui-text' },\n },\n rounded: {\n true: { root: 'rounded-full' },\n },\n icon: {\n /\n * Only the round shape; the `icon + size` compounds below carry padding and icon sizing. The\n * label holds no text, so it lays out as a flex box: a line box would put a wrapped icon (a\n * badge) on the text baseline and grow the button by the descender gap.\n /\n true: { root: 'rounded-full', label: 'inline-flex' },\n },\n active: {\n true: {},\n false: {},\n },\n loading: {\n true: { root: 'relative !cursor-progress' },\n false: {},\n },\n hideFocusIndicator: {\n true: { root: 'focus-visible:!outline-hidden' },\n },\n /\n * Below the breakpoint the label turns `sr-only`, so it still names the button, and the button\n * takes its icon-only padding and glyph from the two properties the `collapsed` compounds seed\n * per size. One static list per breakpoint, since Tailwind cannot see a generated class.\n /\n collapseBelow: {\n 'sm': { root: 'max-sm:gap-x-0 max-sm:p-(--rui-btn-collapsed-p) max-sm:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-sm:sr-only' },\n 'md': { root: 'max-md:gap-x-0 max-md:p-(--rui-btn-collapsed-p) max-md:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-md:sr-only' },\n 'lg': { root: 'max-lg:gap-x-0 max-lg:p-(--rui-btn-collapsed-p) max-lg:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-lg:sr-only' },\n 'xl': { root: 'max-xl:gap-x-0 max-xl:p-(--rui-btn-collapsed-p) max-xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-xl:sr-only' },\n '2xl': { root: 'max-2xl:gap-x-0 max-2xl:p-(--rui-btn-collapsed-p) max-2xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-2xl:sr-only' },\n },\n },\n compoundVariants: [\n /\n * Filled hover: the pressed state layer (10% black in light, 12% white in dark) over the fill, a\n * step of about a tenth rather than the jump to `darker`, which stays for the pressed state.\n * `not-disabled:` keeps a disabled or loading button flat; an `<a>` is never `:disabled`.\n /\n { variant: ['default', 'fab'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: { root: 'not-disabled:hover:state-layer-pressed' } },\n // An icon-only button has no label to keep, so its glyph goes transparent (still in the accessibility tree) under a centered spinner\n { loading: true, icon: true, class: { root: '[&>:not([data-spinner])]:opacity-0', spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2' } },\n // Disabled appearance: a flat neutral fill, skipped while loading so the variant color shows behind the spinner\n { loading: false, class: { root: 'disabled:!bg-rui-neutral-100 dark:disabled:!bg-rui-neutral-800 disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:inset-ring-rui-text-disabled dark:disabled:inset-ring-rui-text-disabled' } },\n { loading: false, variant: ['text', 'link'], class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n // === Grey color variants ===\n { color: 'grey', active: true, class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n // the same hover and pressed tints as a highlighted menu option\n { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-hover active:bg-rui-pressed dark:bg-transparent dark:text-rui-text' } },\n { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-pressed dark:bg-rui-pressed' } },\n // the shared control edge, 3:1 against the page like the 50% context colours beside it\n { color: 'grey', variant: 'outlined', class: { root: 'inset-ring-rui-outline' } },\n // the dark variant overrides the shared compound's `dark:text-rui-text`, so a grey text button stays secondary in both themes\n { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary dark:text-rui-text-secondary' } },\n\n // `dark:text-rui-<color>` beats the filled buttons' `dark:text-rui-text`; primary, secondary and error use their lighter tone in dark for 4.5:1\n { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary/6 active:bg-rui-primary/10 text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary/6 active:bg-rui-secondary/10 text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error/6 active:bg-rui-error/10 text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning/6 active:bg-rui-warning/10 text-rui-warning dark:text-rui-warning' } },\n { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info/6 active:bg-rui-info/10 text-rui-info dark:text-rui-info' } },\n { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success/6 active:bg-rui-success/10 text-rui-success dark:text-rui-success' } },\n\n // === Context colors — active default ===\n { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n // Active outlined/text: a quiet tint with the deeper tone as the label, which keeps 4.5:1 for every color\n { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary/[0.08] text-rui-primary-darker' } },\n { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary/[0.08] text-rui-secondary-darker' } },\n { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error/[0.08] text-rui-error-darker' } },\n { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning/[0.08] text-rui-warning-darker' } },\n { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info/[0.08] text-rui-info-darker' } },\n { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success/[0.08] text-rui-success-darker' } },\n\n // === Context colors: outlined border (dark draws primary and secondary solid; at 50% their deep fills sink into the page and look alike) ===\n { color: 'primary', variant: 'outlined', class: { root: 'inset-ring-rui-primary/50 dark:inset-ring-rui-primary' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'inset-ring-rui-secondary/50 dark:inset-ring-rui-secondary' } },\n { color: 'error', variant: 'outlined', class: { root: 'inset-ring-rui-error/50' } },\n { color: 'warning', variant: 'outlined', class: { root: 'inset-ring-rui-warning/50' } },\n { color: 'info', variant: 'outlined', class: { root: 'inset-ring-rui-info/50' } },\n { color: 'success', variant: 'outlined', class: { root: 'inset-ring-rui-success/50' } },\n\n // === Size overrides per variant ===\n { variant: 'text', size: 'xs', class: { root: 'px-1' } },\n { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n { variant: 'text', size: 'xl', class: { root: 'px-2.5' } },\n { variant: 'text', size: '2xl', class: { root: 'px-2.5' } },\n { variant: 'fab', size: 'xs', class: { root: 'py-1 px-1' } },\n { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n { variant: 'list', size: 'xs', class: { root: 'px-3 py-0.5' } },\n // 32px: a dense select's option row, which `getOptionHeight` reserves in the virtual list\n { variant: 'list', size: 'sm', class: { root: 'px-3 py-2' } },\n // Icon-only sizing, per the padding and glyph table on buttonStyles above\n { icon: true, class: { root: 'p-2 ![--rui-icon-size:1.25rem]' } },\n { icon: true, size: 'xs', class: { root: 'p-[0.1875rem] ![--rui-icon-size:0.875rem]' } },\n { icon: true, size: 'sm', class: { root: 'p-1 ![--rui-icon-size:1.25rem]' } },\n { icon: true, size: 'lg', class: { root: 'p-1.5 ![--rui-icon-size:1.5rem]' } },\n { icon: true, size: 'xl', class: { root: 'p-2 ![--rui-icon-size:1.5rem]' } },\n { icon: true, size: '2xl', class: { root: 'p-2 ![--rui-icon-size:1.75rem]' } },\n { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n // A collapsed button's icon-only padding and glyph, the same table as `icon` above\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xs', class: { root: '[--rui-btn-collapsed-p:0.1875rem] [--rui-btn-collapsed-icon:0.875rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'sm', class: { root: '[--rui-btn-collapsed-p:0.25rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'lg', class: { root: '[--rui-btn-collapsed-p:0.375rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: '2xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.75rem]' } },\n\n /\n === Link ===\n * Last, so they win over the size, colour and active entries above. The font size and line height\n * come from the surrounding text and the icons follow it; a size only changes the spinner. The\n * colour is the text tone of the outlined/text compounds, with no fill or tint in any state.\n */\n {\n variant: 'link',\n class: {\n root: [\n 'p-0 text-[length:inherit] leading-[inherit] ![--rui-icon-size:1em]',\n 'bg-transparent hover:bg-transparent active:bg-transparent',\n 'dark:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent',\n ].join(' '),\n },\n },\n { color: 'grey', variant: 'link', class: { root: 'text-rui-text dark:text-rui-text' } },\n { color: 'primary', variant: 'link', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'link', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'link', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'link', class: { root: 'text-rui-warning dark:text-rui-warning' } },\n { color: 'info', variant: 'link', class: { root: 'text-rui-info dark:text-rui-info' } },\n { color: 'success', variant: 'link', class: { root: 'text-rui-success dark:text-rui-success' } },\n ],\n compoundSlots: [\n // In dark a status color's `main` is a text tone, so a filled status button takes the deep `darker` fill\n { slots: ['root'], color: 'error', variant: ['default', 'fab'], class: 'dark:bg-rui-error-darker dark:active:bg-rui-error-darker/75' },\n { slots: ['root'], color: 'warning', variant: ['default', 'fab'], class: 'dark:bg-rui-warning-darker dark:active:bg-rui-warning-darker/75' },\n { slots: ['root'], color: 'info', variant: ['default', 'fab'], class: 'dark:bg-rui-info-darker dark:active:bg-rui-info-darker/75' },\n { slots: ['root'], color: 'success', variant: ['default', 'fab'], class: 'dark:bg-rui-success-darker dark:active:bg-rui-success-darker/75' },\n // Dark mode active outlined/text: the same quiet tint, with the lighter tone as the label\n { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary/[0.16] dark:text-rui-primary-lighter' },\n { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary/[0.16] dark:text-rui-secondary-lighter' },\n { slots: ['root'], color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-error/[0.16] dark:text-rui-error-lighter' },\n { slots: ['root'], color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-warning/[0.16] dark:text-rui-warning-lighter' },\n { slots: ['root'], color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-info/[0.16] dark:text-rui-info-lighter' },\n { slots: ['root'], color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-success/[0.16] dark:text-rui-success-lighter' },\n ],\n defaultVariants: {\n variant: 'default',\n color: 'grey',\n active: false,\n },\n});\n"],"mappings":"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"}
1	+ {"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/*\n The button's classes.\n \n Three decisions the class lists cannot state themselves:\n \n `position: relative` is not in the base root: it is only a positioning\n * context for the loading spinner, so the `loading` variant applies it.\n * Basing it here would collide with consumers pinning the button with\n * `fixed`/`absolute`, since cascade order picks the later utility, usually\n * `relative`, and turns their `right-`/`bottom-` into relative offsets,\n * which misplaces FABs.\n \n Icon sizing flows through the `--rui-icon-size` custom property, seeded at\n * the md value in the base root and redefined per size variant with `!` so a\n * variant beats the baseline on the same element regardless of source order.\n * RuiIcon's own `size` prop stamps an inline style on the svg, which beats the\n * inherited value, so a consumer always wins. See rotki/ui-library#512.\n \n `disabled` on the element covers two states: actually disabled, and loading,\n * since RuiButton sets `disabled = disabled \|\| loading`. Only the cursor is\n * shared between them; the grey disabled palette lives in the `loading: false`\n * compounds, so a loading button keeps its variant color behind the spinner.\n \n An icon-only button matches the height of the text button of the same size,\n * with a 60-70% glyph ratio, which is a larger glyph than the same size gives\n * a prepend/append icon so it does not look lost in the square. xs pads by an\n * arbitrary 0.1875rem because no Tailwind token holds the ratio at a 14px\n * glyph:\n \n ```\n * xs p-[0.1875rem] + 0.875rem icon = 1.25rem (20px) 70%\n * sm p-1 + 1.25rem icon = 1.75rem (28px) 71%\n * md (default) p-2 + 1.25rem icon = 2.25rem (36px) 56%\n * lg p-1.5 + 1.5rem icon = 2.25rem (36px) 67%\n * xl p-2 + 1.5rem icon = 2.5rem (40px) 60%\n * 2xl p-2 + 1.75rem icon = 2.75rem (44px) 64%\n * ```\n /\nexport const buttonStyles = tv({\n slots: {\n root: [\n 'text-sm leading-5 font-medium inset-ring inset-ring-transparent',\n 'flex items-center justify-center gap-x-2',\n // md is 36px, the height of a text field or select, so a button lines up with them in a row\n 'px-4 py-2 rounded-rui-control transition-colors duration-150',\n '[--rui-icon-size:1rem]',\n 'disabled:cursor-not-allowed',\n 'focus-visible:focus-ring',\n ].join(' '),\n label: 'inline-block text-nowrap',\n // inline in the prepend icon's place; an icon-only button centers it over its hidden glyph instead\n spinner: 'shrink-0',\n },\n variants: {\n variant: {\n default: {},\n outlined: {},\n text: { root: 'px-2' },\n fab: { root: 'rounded-full py-2 shadow-rui-control disabled:shadow-none' },\n // The label's 16px line-box matches the md icon box, so the two share an optical center (rotki/ui-library#515)\n list: { root: 'p-3 px-3 rounded-rui-sm w-full justify-start text-left', label: 'w-full leading-4' },\n // An action inside running text: no box, so its size, padding and fills are reset in the link compounds at the end\n link: { root: 'inline-flex align-baseline gap-x-1 underline-offset-2 not-disabled:hover:underline' },\n },\n size: {\n 'xs': { root: 'px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]' },\n 'sm': { root: 'px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:0.875rem]' },\n 'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n // 40px, to line up with RuiTextField / RuiMenuSelect in a toolbar; a 44px jumbo CTA is `2xl`\n 'xl': { root: 'px-6 py-2 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n '2xl': { root: 'px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n },\n color: {\n grey: { root: 'bg-rui-neutral-100 hover:bg-rui-neutral-200 active:bg-rui-neutral-300 text-rui-text dark:bg-rui-neutral-800 dark:hover:bg-rui-neutral-700 dark:active:bg-rui-neutral-600' },\n // hover is a tint laid over the fill (see the filled compound below); pressed sinks to `darker`\n primary: { root: 'bg-rui-primary active:bg-rui-primary-darker text-rui-dark-text dark:text-rui-text' },\n secondary: { root: 'bg-rui-secondary active:bg-rui-secondary-darker text-rui-dark-text dark:text-rui-text' },\n error: { root: 'bg-rui-error active:bg-rui-error-darker text-rui-dark-text dark:text-rui-text' },\n warning: { root: 'bg-rui-warning active:bg-rui-warning-darker text-rui-dark-text dark:text-rui-text' },\n info: { root: 'bg-rui-info active:bg-rui-info-darker text-rui-dark-text dark:text-rui-text' },\n success: { root: 'bg-rui-success active:bg-rui-success-darker text-rui-dark-text dark:text-rui-text' },\n },\n rounded: {\n true: { root: 'rounded-full' },\n },\n icon: {\n /\n * Only the round shape; the `icon + size` compounds below carry padding and icon sizing. The\n * label holds no text, so it lays out as a flex box: a line box would put a wrapped icon (a\n * badge) on the text baseline and grow the button by the descender gap.\n /\n true: { root: 'rounded-full', label: 'inline-flex' },\n },\n active: {\n true: {},\n false: {},\n },\n loading: {\n true: { root: 'relative !cursor-progress' },\n false: {},\n },\n hideFocusIndicator: {\n true: { root: 'focus-visible:!outline-hidden' },\n },\n /\n * Below the breakpoint the label turns `sr-only`, so it still names the button, and the button\n * takes its icon-only padding and glyph from the two properties the `collapsed` compounds seed\n * per size. One static list per breakpoint, since Tailwind cannot see a generated class.\n /\n collapseBelow: {\n 'sm': { root: 'max-sm:gap-x-0 max-sm:p-(--rui-btn-collapsed-p) max-sm:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-sm:sr-only' },\n 'md': { root: 'max-md:gap-x-0 max-md:p-(--rui-btn-collapsed-p) max-md:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-md:sr-only' },\n 'lg': { root: 'max-lg:gap-x-0 max-lg:p-(--rui-btn-collapsed-p) max-lg:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-lg:sr-only' },\n 'xl': { root: 'max-xl:gap-x-0 max-xl:p-(--rui-btn-collapsed-p) max-xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-xl:sr-only' },\n '2xl': { root: 'max-2xl:gap-x-0 max-2xl:p-(--rui-btn-collapsed-p) max-2xl:![--rui-icon-size:var(--rui-btn-collapsed-icon)]', label: 'max-2xl:sr-only' },\n },\n },\n compoundVariants: [\n /\n * Filled hover: the pressed state layer (10% black in light, 12% white in dark) over the fill, a\n * step of about a tenth rather than the jump to `darker`, which stays for the pressed state.\n * `not-disabled:` keeps a disabled or loading button flat; an `<a>` is never `:disabled`.\n /\n { variant: ['default', 'fab'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: { root: 'not-disabled:hover:state-layer-pressed' } },\n // An icon-only button has no label to keep, so its glyph goes transparent (still in the accessibility tree) under a centered spinner\n { loading: true, icon: true, class: { root: '[&>:not([data-spinner])]:opacity-0', spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2' } },\n // Disabled appearance: a flat neutral fill, skipped while loading so the variant color shows behind the spinner\n { loading: false, class: { root: 'disabled:!bg-rui-neutral-100 dark:disabled:!bg-rui-neutral-800 disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:inset-ring-rui-text-disabled dark:disabled:inset-ring-rui-text-disabled' } },\n { loading: false, variant: ['text', 'link'], class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n // === Grey color variants ===\n { color: 'grey', active: true, class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n // the same hover and pressed tints as a highlighted menu option\n { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-hover active:bg-rui-pressed dark:bg-transparent dark:text-rui-text' } },\n { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-pressed dark:bg-rui-pressed' } },\n // the shared control edge, 3:1 against the page like the 50% context colours beside it\n { color: 'grey', variant: 'outlined', class: { root: 'inset-ring-rui-outline' } },\n // the dark variant overrides the shared compound's `dark:text-rui-text`, so a grey text button stays secondary in both themes\n { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary dark:text-rui-text-secondary' } },\n\n // `dark:text-rui-<color>` beats the filled buttons' `dark:text-rui-text`; primary, secondary and error use their lighter tone in dark for 4.5:1\n { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary/6 active:bg-rui-primary/10 text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary/6 active:bg-rui-secondary/10 text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error/6 active:bg-rui-error/10 text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning/6 active:bg-rui-warning/10 text-rui-warning dark:text-rui-warning' } },\n { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info/6 active:bg-rui-info/10 text-rui-info dark:text-rui-info' } },\n { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success/6 active:bg-rui-success/10 text-rui-success dark:text-rui-success' } },\n\n // === Context colors: active default ===\n { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n // Active outlined/text: a quiet tint with the deeper tone as the label, which keeps 4.5:1 for every color\n { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary/[0.08] text-rui-primary-darker' } },\n { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary/[0.08] text-rui-secondary-darker' } },\n { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error/[0.08] text-rui-error-darker' } },\n { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning/[0.08] text-rui-warning-darker' } },\n { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info/[0.08] text-rui-info-darker' } },\n { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success/[0.08] text-rui-success-darker' } },\n\n // === Context colors: outlined border (dark draws primary and secondary solid; at 50% their deep fills sink into the page and look alike) ===\n { color: 'primary', variant: 'outlined', class: { root: 'inset-ring-rui-primary/50 dark:inset-ring-rui-primary' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'inset-ring-rui-secondary/50 dark:inset-ring-rui-secondary' } },\n { color: 'error', variant: 'outlined', class: { root: 'inset-ring-rui-error/50' } },\n { color: 'warning', variant: 'outlined', class: { root: 'inset-ring-rui-warning/50' } },\n { color: 'info', variant: 'outlined', class: { root: 'inset-ring-rui-info/50' } },\n { color: 'success', variant: 'outlined', class: { root: 'inset-ring-rui-success/50' } },\n\n // === Size overrides per variant ===\n { variant: 'text', size: 'xs', class: { root: 'px-1' } },\n { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n { variant: 'text', size: 'xl', class: { root: 'px-2.5' } },\n { variant: 'text', size: '2xl', class: { root: 'px-2.5' } },\n { variant: 'fab', size: 'xs', class: { root: 'py-1 px-1' } },\n { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n { variant: 'list', size: 'xs', class: { root: 'px-3 py-0.5' } },\n // 32px: a dense select's option row, which `getOptionHeight` reserves in the virtual list\n { variant: 'list', size: 'sm', class: { root: 'px-3 py-2' } },\n // Icon-only sizing, per the padding and glyph table on buttonStyles above\n { icon: true, class: { root: 'p-2 ![--rui-icon-size:1.25rem]' } },\n { icon: true, size: 'xs', class: { root: 'p-[0.1875rem] ![--rui-icon-size:0.875rem]' } },\n { icon: true, size: 'sm', class: { root: 'p-1 ![--rui-icon-size:1.25rem]' } },\n { icon: true, size: 'lg', class: { root: 'p-1.5 ![--rui-icon-size:1.5rem]' } },\n { icon: true, size: 'xl', class: { root: 'p-2 ![--rui-icon-size:1.5rem]' } },\n { icon: true, size: '2xl', class: { root: 'p-2 ![--rui-icon-size:1.75rem]' } },\n { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n // A collapsed button's icon-only padding and glyph, the same table as `icon` above\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xs', class: { root: '[--rui-btn-collapsed-p:0.1875rem] [--rui-btn-collapsed-icon:0.875rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'sm', class: { root: '[--rui-btn-collapsed-p:0.25rem] [--rui-btn-collapsed-icon:1.25rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'lg', class: { root: '[--rui-btn-collapsed-p:0.375rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: 'xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.5rem]' } },\n { collapseBelow: ['sm', 'md', 'lg', 'xl', '2xl'], size: '2xl', class: { root: '[--rui-btn-collapsed-p:0.5rem] [--rui-btn-collapsed-icon:1.75rem]' } },\n\n /\n === Link ===\n * Last, so they win over the size, colour and active entries above. Font size and line height\n * come from the surrounding text; a size only changes the spinner. The colour matches the\n * outlined/text compounds, with no fill or tint.\n */\n {\n variant: 'link',\n class: {\n root: [\n 'p-0 text-[length:inherit] leading-[inherit] ![--rui-icon-size:1em]',\n 'bg-transparent hover:bg-transparent active:bg-transparent',\n 'dark:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent',\n ].join(' '),\n },\n },\n { color: 'grey', variant: 'link', class: { root: 'text-rui-text dark:text-rui-text' } },\n { color: 'primary', variant: 'link', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'link', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'link', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'link', class: { root: 'text-rui-warning dark:text-rui-warning' } },\n { color: 'info', variant: 'link', class: { root: 'text-rui-info dark:text-rui-info' } },\n { color: 'success', variant: 'link', class: { root: 'text-rui-success dark:text-rui-success' } },\n ],\n compoundSlots: [\n // In dark a status color's `main` is a text tone, so a filled status button takes the deep `darker` fill\n { slots: ['root'], color: 'error', variant: ['default', 'fab'], class: 'dark:bg-rui-error-darker dark:active:bg-rui-error-darker/75' },\n { slots: ['root'], color: 'warning', variant: ['default', 'fab'], class: 'dark:bg-rui-warning-darker dark:active:bg-rui-warning-darker/75' },\n { slots: ['root'], color: 'info', variant: ['default', 'fab'], class: 'dark:bg-rui-info-darker dark:active:bg-rui-info-darker/75' },\n { slots: ['root'], color: 'success', variant: ['default', 'fab'], class: 'dark:bg-rui-success-darker dark:active:bg-rui-success-darker/75' },\n // Dark mode active outlined/text: the same quiet tint, with the lighter tone as the label\n { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary/[0.16] dark:text-rui-primary-lighter' },\n { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary/[0.16] dark:text-rui-secondary-lighter' },\n { slots: ['root'], color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-error/[0.16] dark:text-rui-error-lighter' },\n { slots: ['root'], color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-warning/[0.16] dark:text-rui-warning-lighter' },\n { slots: ['root'], color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-info/[0.16] dark:text-rui-info-lighter' },\n { slots: ['root'], color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-success/[0.16] dark:text-rui-success-lighter' },\n ],\n defaultVariants: {\n variant: 'default',\n color: 'grey',\n active: false,\n },\n});\n"],"mappings":"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"}

package/dist/components/chips/RuiChip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiChip.js","names":["_sfc_main"],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiChipClassNames {\n root?: VueClassValue;\n content?: VueClassValue;\n}\n\nexport interface Props {\n tile?: boolean;\n clickable?: boolean;\n closeable?: boolean;\n disabled?: boolean;\n size?: ChipSize;\n variant?: ChipVariant;\n color?: 'grey' \| ContextColorsType;\n closeIcon?: RuiIcons;\n /*\n Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n /\n closeUnfocusable?: boolean;\n bgColor?: string;\n textColor?: string;\n classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n name: 'RuiChip',\n inheritAttrs: false,\n});\n\nconst {\n tile = false,\n size = ChipSize.md,\n color = 'grey',\n clickable = false,\n closeable = false,\n disabled = false,\n variant = ChipVariant.filled,\n closeIcon = 'lu-x',\n closeUnfocusable = false,\n bgColor = undefined,\n textColor = undefined,\n classNames,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n 'click:close': [];\n 'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n prepend?: () => any;\n default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst chipStyles = tv({\n slots: {\n // min-h sets the height and items-center the rest, so a prefix or a border never adds to it\n root: 'inline-flex items-center justify-between px-2 transition duration-150 cursor-default outline-hidden max-w-full truncate',\n // the avatar's neutral pair, so initials stay readable on any chip color\n prepend: 'rounded-full flex items-center justify-center shrink-0 w-6 h-6 text-[0.625rem] font-semibold text-rui-neutral-700 bg-rui-neutral-200 dark:text-rui-neutral-200 dark:bg-rui-neutral-700 overflow-hidden',\n label: 'truncate px-2 text-[0.8125rem]/5',\n // a round hover fill marks the close icon as its own button\n close: 'rounded-full flex items-center p-0.5 inset-y-0 focus:outline-hidden transition-colors hover:bg-rui-pressed',\n closeIcon: 'opacity-60 hover:opacity-100 transition-opacity',\n },\n variants: {\n tile: {\n true: { root: 'rounded-rui-sm' },\n false: { root: 'rounded-full' },\n },\n size: {\n // 28px, to sit in a 44px table row; sm is 24px with 12px text\n md: { root: 'min-h-7' },\n sm: {\n root: 'min-h-6',\n prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n label: 'px-1.5 text-xs/4',\n close: 'p-px',\n },\n // 20px for a count: 11px tabular figures keep a changing number from shifting the row\n xs: {\n root: 'min-h-5 px-1',\n prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n label: 'px-1 text-[0.6875rem]/4 tabular-nums',\n close: 'p-px',\n },\n },\n // a leading circle sits as far from the start edge as from the top, like an avatar in a pill\n prepended: {\n true: { root: 'pl-0.5' },\n false: {},\n },\n closeable: {\n true: {},\n false: {},\n },\n disabled: {\n true: { root: '!text-rui-text-disabled cursor-default', close: 'cursor-default hover:bg-transparent dark:hover:bg-transparent' },\n false: {},\n },\n clickable: {\n true: { root: 'cursor-pointer' },\n false: { root: 'cursor-default', close: 'cursor-default' },\n },\n variant: {\n filled: {},\n outlined: {},\n tonal: {},\n },\n color: {\n grey: { root: 'text-rui-text' },\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n // Interactive states (clickable + not disabled): a tint over any fill, which keeps the text color\n { clickable: true, disabled: false, class: { root: 'hover:state-layer active:state-layer-pressed focus-visible:focus-ring' } },\n\n // Grey filled: a solid step above the tonal tint\n { color: 'grey', variant: 'filled', class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n\n // Outlined: the border is the text color at 40%, so it follows the brighter text tone in dark\n { variant: 'outlined', class: { root: 'border border-current/40 bg-transparent' } },\n\n // Context colors — filled bg\n { color: 'primary', variant: 'filled', class: { root: 'bg-rui-primary' } },\n { color: 'secondary', variant: 'filled', class: { root: 'bg-rui-secondary' } },\n // in dark a status color's `main` is a text tone, so the fill is its deep `darker`\n { color: 'error', variant: 'filled', class: { root: 'bg-rui-error dark:bg-rui-error-darker' } },\n { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning dark:bg-rui-warning-darker' } },\n { color: 'info', variant: 'filled', class: { root: 'bg-rui-info dark:bg-rui-info-darker' } },\n { color: 'success', variant: 'filled', class: { root: 'bg-rui-success dark:bg-rui-success-darker' } },\n\n // Context colors: outlined text\n { color: 'primary', variant: 'outlined', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'outlined', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'outlined', class: { root: 'text-rui-warning' } },\n { color: 'info', variant: 'outlined', class: { root: 'text-rui-info' } },\n { color: 'success', variant: 'outlined', class: { root: 'text-rui-success' } },\n\n // Tonal: a tint with the deeper tone as text, 4.5:1; primary and secondary sit near grey, so tint harder\n { color: 'grey', variant: 'tonal', class: { root: 'bg-rui-neutral-500/10 dark:bg-rui-neutral-400/10' } },\n { color: 'primary', variant: 'tonal', class: { root: 'bg-rui-primary/15 text-rui-primary-darker dark:bg-rui-primary/35 dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'tonal', class: { root: 'bg-rui-secondary/20 text-rui-secondary-darker dark:bg-rui-secondary/35 dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'tonal', class: { root: 'bg-rui-error/10 text-rui-error-darker dark:bg-rui-error/20 dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'tonal', class: { root: 'bg-rui-warning/10 text-rui-warning-darker dark:bg-rui-warning/20 dark:text-rui-warning-lighter' } },\n { color: 'info', variant: 'tonal', class: { root: 'bg-rui-info/10 text-rui-info-darker dark:bg-rui-info/20 dark:text-rui-info-lighter' } },\n { color: 'success', variant: 'tonal', class: { root: 'bg-rui-success/10 text-rui-success-darker dark:bg-rui-success/20 dark:text-rui-success-lighter' } },\n\n // sm: a 16px circle in a 24px chip, 4px in from the start as from the top\n { size: 'sm', prepended: true, class: { root: 'pl-1' } },\n // in a tile chip the prefix follows the corners: the chip's 6px radius less the 2px inset\n { tile: true, class: { prepend: 'rounded-sm' } },\n // the close button's round hover area mirrors the prefix: as far from the end edge as from the top\n { closeable: true, class: { root: 'pr-1', label: 'pr-1' } },\n { closeable: true, size: 'sm', class: { root: 'pr-1', label: 'pr-0.5' } },\n // xs: the 12px close area sits 2px from the end edge, as the 16px prefix does from the start\n { closeable: true, size: 'xs', class: { root: 'pr-0.5', label: 'pr-0.5' } },\n\n // Disabled: a flat neutral chip in any color, like a disabled button\n { disabled: true, variant: ['filled', 'tonal'], class: { root: '!bg-rui-neutral-100 dark:!bg-rui-neutral-800' } },\n { disabled: true, variant: 'outlined', class: { root: '!border-rui-divider' } },\n ],\n compoundSlots: [\n // Every filled color takes light text, in both themes\n { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-text' },\n ],\n defaultVariants: {\n tile: false,\n size: 'md',\n disabled: false,\n clickable: false,\n variant: 'filled',\n color: 'grey',\n },\n});\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n tile,\n size,\n color,\n variant,\n disabled,\n clickable,\n prepended: !!slots.prepend,\n closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n const s: Partial<StyleValue> = {};\n if (bgColor)\n s.backgroundColor = bgColor;\n if (textColor)\n s.color = textColor;\n return s;\n});\n\nfunction click(e: MouseEvent): void {\n if (!clickable \|\| disabled)\n return;\n\n emit('click', e);\n}\n\n/\n Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n \n @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n if (!clickable \|\| disabled \|\| e.target !== get(root))\n return;\n if (e.key !== 'Enter' && e.key !== ' ')\n return;\n\n e.preventDefault();\n get(root)?.click();\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n :class=\"ui.root({ class: cn(classNames?.root) })\"\n :style=\"style\"\n :data-variant=\"variant\"\n :data-color=\"color\"\n :data-disabled=\"disabled \|\| undefined\"\n :role=\"clickable ? 'button' : undefined\"\n :tabindex=\"clickable && !disabled ? 0 : undefined\"\n :aria-disabled=\"clickable && disabled ? true : undefined\"\n v-bind=\"objectOmit($attrs, ['onClick'])\"\n @click=\"click($event)\"\n @keydown=\"onKeydown($event)\"\n >\n <div\n v-if=\"$slots.prepend\"\n :class=\"ui.prepend()\"\n >\n <slot name=\"prepend\" />\n </div>\n <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n <slot />\n </span>\n <button\n v-if=\"closeable\"\n :class=\"ui.close()\"\n :disabled=\"disabled\"\n type=\"button\"\n aria-label=\"Remove\"\n :tabindex=\"closeUnfocusable ? -1 : undefined\"\n @click.stop=\"emit('click:close')\"\n >\n <RuiIcon\n :class=\"ui.closeIcon()\"\n :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n :name=\"closeIcon\"\n />\n </button>\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiChip.js","names":["_sfc_main"],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiChipClassNames {\n root?: VueClassValue;\n content?: VueClassValue;\n}\n\nexport interface Props {\n tile?: boolean;\n clickable?: boolean;\n closeable?: boolean;\n disabled?: boolean;\n size?: ChipSize;\n variant?: ChipVariant;\n color?: 'grey' \| ContextColorsType;\n closeIcon?: RuiIcons;\n /*\n Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n /\n closeUnfocusable?: boolean;\n bgColor?: string;\n textColor?: string;\n classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n name: 'RuiChip',\n inheritAttrs: false,\n});\n\nconst {\n tile = false,\n size = ChipSize.md,\n color = 'grey',\n clickable = false,\n closeable = false,\n disabled = false,\n variant = ChipVariant.filled,\n closeIcon = 'lu-x',\n closeUnfocusable = false,\n bgColor = undefined,\n textColor = undefined,\n classNames,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n 'click:close': [];\n 'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n prepend?: () => any;\n default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst chipStyles = tv({\n slots: {\n // min-h sets the height and items-center the rest, so a prefix or a border never adds to it\n root: 'inline-flex items-center justify-between px-2 transition duration-150 cursor-default outline-hidden max-w-full truncate',\n // the avatar's neutral pair, so initials stay readable on any chip color\n prepend: 'rounded-full flex items-center justify-center shrink-0 w-6 h-6 text-[0.625rem] font-semibold text-rui-neutral-700 bg-rui-neutral-200 dark:text-rui-neutral-200 dark:bg-rui-neutral-700 overflow-hidden',\n label: 'truncate px-2 text-[0.8125rem]/5',\n // a round hover fill marks the close icon as its own button\n close: 'rounded-full flex items-center p-0.5 inset-y-0 focus:outline-hidden transition-colors hover:bg-rui-pressed',\n // 80% keeps the icon at 3:1 on a filled chip and on the page; full on hover\n closeIcon: 'opacity-80 hover:opacity-100 transition-opacity',\n },\n variants: {\n tile: {\n true: { root: 'rounded-rui-sm' },\n false: { root: 'rounded-full' },\n },\n size: {\n // 28px, to sit in a 44px table row; sm is 24px with 12px text\n md: { root: 'min-h-7' },\n sm: {\n root: 'min-h-6',\n prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n label: 'px-1.5 text-xs/4',\n close: 'p-px',\n },\n // 20px for a count: 11px tabular figures keep a changing number from shifting the row\n xs: {\n root: 'min-h-5 px-1',\n prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n label: 'px-1 text-[0.6875rem]/4 tabular-nums',\n close: 'p-px',\n },\n },\n // a leading circle sits as far from the start edge as from the top, like an avatar in a pill\n prepended: {\n true: { root: 'pl-0.5' },\n false: {},\n },\n closeable: {\n true: {},\n false: {},\n },\n disabled: {\n true: { root: '!text-rui-text-disabled cursor-default', close: 'cursor-default hover:bg-transparent dark:hover:bg-transparent' },\n false: {},\n },\n clickable: {\n true: { root: 'cursor-pointer' },\n false: { root: 'cursor-default', close: 'cursor-default' },\n },\n variant: {\n filled: {},\n outlined: {},\n tonal: {},\n },\n color: {\n grey: { root: 'text-rui-text' },\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n // Interactive states (clickable + not disabled): a tint over any fill, which keeps the text color\n { clickable: true, disabled: false, class: { root: 'hover:state-layer active:state-layer-pressed focus-visible:focus-ring' } },\n\n // Grey filled: a solid step above the tonal tint\n { color: 'grey', variant: 'filled', class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n\n // Outlined: the border is the text color at 40%, so it follows the brighter text tone in dark\n { variant: 'outlined', class: { root: 'border border-current/40 bg-transparent' } },\n\n // Context colors: filled bg\n { color: 'primary', variant: 'filled', class: { root: 'bg-rui-primary' } },\n { color: 'secondary', variant: 'filled', class: { root: 'bg-rui-secondary' } },\n // in dark a status color's `main` is a text tone, so the fill is its deep `darker`\n { color: 'error', variant: 'filled', class: { root: 'bg-rui-error dark:bg-rui-error-darker' } },\n { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning dark:bg-rui-warning-darker' } },\n { color: 'info', variant: 'filled', class: { root: 'bg-rui-info dark:bg-rui-info-darker' } },\n { color: 'success', variant: 'filled', class: { root: 'bg-rui-success dark:bg-rui-success-darker' } },\n\n // Context colors: outlined text\n { color: 'primary', variant: 'outlined', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'outlined', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'outlined', class: { root: 'text-rui-warning' } },\n { color: 'info', variant: 'outlined', class: { root: 'text-rui-info' } },\n { color: 'success', variant: 'outlined', class: { root: 'text-rui-success' } },\n\n // Tonal: a tint with the deeper tone as text, 4.5:1; primary and secondary sit near grey, so tint harder\n { color: 'grey', variant: 'tonal', class: { root: 'bg-rui-neutral-500/10 dark:bg-rui-neutral-400/10' } },\n { color: 'primary', variant: 'tonal', class: { root: 'bg-rui-primary/15 text-rui-primary-darker dark:bg-rui-primary/35 dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'tonal', class: { root: 'bg-rui-secondary/20 text-rui-secondary-darker dark:bg-rui-secondary/35 dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'tonal', class: { root: 'bg-rui-error/10 text-rui-error-darker dark:bg-rui-error/20 dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'tonal', class: { root: 'bg-rui-warning/10 text-rui-warning-darker dark:bg-rui-warning/20 dark:text-rui-warning-lighter' } },\n { color: 'info', variant: 'tonal', class: { root: 'bg-rui-info/10 text-rui-info-darker dark:bg-rui-info/20 dark:text-rui-info-lighter' } },\n { color: 'success', variant: 'tonal', class: { root: 'bg-rui-success/10 text-rui-success-darker dark:bg-rui-success/20 dark:text-rui-success-lighter' } },\n\n // sm: a 16px circle in a 24px chip, 4px in from the start as from the top\n { size: 'sm', prepended: true, class: { root: 'pl-1' } },\n // in a tile chip the prefix follows the corners: the chip's 6px radius less the 2px inset\n { tile: true, class: { prepend: 'rounded-sm' } },\n // the close button's round hover area mirrors the prefix: as far from the end edge as from the top\n { closeable: true, class: { root: 'pr-1', label: 'pr-1' } },\n { closeable: true, size: 'sm', class: { root: 'pr-1', label: 'pr-0.5' } },\n // xs: the 12px close area sits 2px from the end edge, as the 16px prefix does from the start\n { closeable: true, size: 'xs', class: { root: 'pr-0.5', label: 'pr-0.5' } },\n\n // Disabled: a flat neutral chip in any color, like a disabled button\n { disabled: true, variant: ['filled', 'tonal'], class: { root: '!bg-rui-neutral-100 dark:!bg-rui-neutral-800' } },\n { disabled: true, variant: 'outlined', class: { root: '!border-rui-divider' } },\n ],\n compoundSlots: [\n // Every filled color takes light text, in both themes\n { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-text' },\n ],\n defaultVariants: {\n tile: false,\n size: 'md',\n disabled: false,\n clickable: false,\n variant: 'filled',\n color: 'grey',\n },\n});\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n tile,\n size,\n color,\n variant,\n disabled,\n clickable,\n prepended: !!slots.prepend,\n closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n const s: Partial<StyleValue> = {};\n if (bgColor)\n s.backgroundColor = bgColor;\n if (textColor)\n s.color = textColor;\n return s;\n});\n\nfunction click(e: MouseEvent): void {\n if (!clickable \|\| disabled)\n return;\n\n emit('click', e);\n}\n\n/\n Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n \n @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n if (!clickable \|\| disabled \|\| e.target !== get(root))\n return;\n if (e.key !== 'Enter' && e.key !== ' ')\n return;\n\n e.preventDefault();\n get(root)?.click();\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n :class=\"ui.root({ class: cn(classNames?.root) })\"\n :style=\"style\"\n :data-variant=\"variant\"\n :data-color=\"color\"\n :data-disabled=\"disabled \|\| undefined\"\n :role=\"clickable ? 'button' : undefined\"\n :tabindex=\"clickable && !disabled ? 0 : undefined\"\n :aria-disabled=\"clickable && disabled ? true : undefined\"\n v-bind=\"objectOmit($attrs, ['onClick'])\"\n @click=\"click($event)\"\n @keydown=\"onKeydown($event)\"\n >\n <div\n v-if=\"$slots.prepend\"\n :class=\"ui.prepend()\"\n >\n <slot name=\"prepend\" />\n </div>\n <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n <slot />\n </span>\n <button\n v-if=\"closeable\"\n :class=\"ui.close()\"\n :disabled=\"disabled\"\n type=\"button\"\n aria-label=\"Remove\"\n :tabindex=\"closeUnfocusable ? -1 : undefined\"\n @click.stop=\"emit('click:close')\"\n >\n <RuiIcon\n :class=\"ui.closeIcon()\"\n :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n :name=\"closeIcon\"\n />\n </button>\n </div>\n</template>\n"],"mappings":""}

package/dist/components/chips/RuiChip.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -57,7 +57,7 @@ var RuiChip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				prepend: "rounded-full flex items-center justify-center shrink-0 w-6 h-6 text-[0.625rem] font-semibold text-rui-neutral-700 bg-rui-neutral-200 dark:text-rui-neutral-200 dark:bg-rui-neutral-700 overflow-hidden",
 				label: "truncate px-2 text-[0.8125rem]/5",
 				close: "rounded-full flex items-center p-0.5 inset-y-0 focus:outline-hidden transition-colors hover:bg-rui-pressed",
-				closeIcon: "opacity-60 hover:opacity-100 transition-opacity"
+				closeIcon: "opacity-80 hover:opacity-100 transition-opacity"
 			},
 			variants: {
 				tile: {

package/dist/components/chips/RuiChip.vue_vue_type_script_setup_true_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiChip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode","_withModifiers","_createVNode","RuiIcon"],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiChipClassNames {\n root?: VueClassValue;\n content?: VueClassValue;\n}\n\nexport interface Props {\n tile?: boolean;\n clickable?: boolean;\n closeable?: boolean;\n disabled?: boolean;\n size?: ChipSize;\n variant?: ChipVariant;\n color?: 'grey' \| ContextColorsType;\n closeIcon?: RuiIcons;\n /*\n Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n /\n closeUnfocusable?: boolean;\n bgColor?: string;\n textColor?: string;\n classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n name: 'RuiChip',\n inheritAttrs: false,\n});\n\nconst {\n tile = false,\n size = ChipSize.md,\n color = 'grey',\n clickable = false,\n closeable = false,\n disabled = false,\n variant = ChipVariant.filled,\n closeIcon = 'lu-x',\n closeUnfocusable = false,\n bgColor = undefined,\n textColor = undefined,\n classNames,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n 'click:close': [];\n 'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n prepend?: () => any;\n default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst chipStyles = tv({\n slots: {\n // min-h sets the height and items-center the rest, so a prefix or a border never adds to it\n root: 'inline-flex items-center justify-between px-2 transition duration-150 cursor-default outline-hidden max-w-full truncate',\n // the avatar's neutral pair, so initials stay readable on any chip color\n prepend: 'rounded-full flex items-center justify-center shrink-0 w-6 h-6 text-[0.625rem] font-semibold text-rui-neutral-700 bg-rui-neutral-200 dark:text-rui-neutral-200 dark:bg-rui-neutral-700 overflow-hidden',\n label: 'truncate px-2 text-[0.8125rem]/5',\n // a round hover fill marks the close icon as its own button\n close: 'rounded-full flex items-center p-0.5 inset-y-0 focus:outline-hidden transition-colors hover:bg-rui-pressed',\n closeIcon: 'opacity-60 hover:opacity-100 transition-opacity',\n },\n variants: {\n tile: {\n true: { root: 'rounded-rui-sm' },\n false: { root: 'rounded-full' },\n },\n size: {\n // 28px, to sit in a 44px table row; sm is 24px with 12px text\n md: { root: 'min-h-7' },\n sm: {\n root: 'min-h-6',\n prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n label: 'px-1.5 text-xs/4',\n close: 'p-px',\n },\n // 20px for a count: 11px tabular figures keep a changing number from shifting the row\n xs: {\n root: 'min-h-5 px-1',\n prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n label: 'px-1 text-[0.6875rem]/4 tabular-nums',\n close: 'p-px',\n },\n },\n // a leading circle sits as far from the start edge as from the top, like an avatar in a pill\n prepended: {\n true: { root: 'pl-0.5' },\n false: {},\n },\n closeable: {\n true: {},\n false: {},\n },\n disabled: {\n true: { root: '!text-rui-text-disabled cursor-default', close: 'cursor-default hover:bg-transparent dark:hover:bg-transparent' },\n false: {},\n },\n clickable: {\n true: { root: 'cursor-pointer' },\n false: { root: 'cursor-default', close: 'cursor-default' },\n },\n variant: {\n filled: {},\n outlined: {},\n tonal: {},\n },\n color: {\n grey: { root: 'text-rui-text' },\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n // Interactive states (clickable + not disabled): a tint over any fill, which keeps the text color\n { clickable: true, disabled: false, class: { root: 'hover:state-layer active:state-layer-pressed focus-visible:focus-ring' } },\n\n // Grey filled: a solid step above the tonal tint\n { color: 'grey', variant: 'filled', class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n\n // Outlined: the border is the text color at 40%, so it follows the brighter text tone in dark\n { variant: 'outlined', class: { root: 'border border-current/40 bg-transparent' } },\n\n // Context colors — filled bg\n { color: 'primary', variant: 'filled', class: { root: 'bg-rui-primary' } },\n { color: 'secondary', variant: 'filled', class: { root: 'bg-rui-secondary' } },\n // in dark a status color's `main` is a text tone, so the fill is its deep `darker`\n { color: 'error', variant: 'filled', class: { root: 'bg-rui-error dark:bg-rui-error-darker' } },\n { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning dark:bg-rui-warning-darker' } },\n { color: 'info', variant: 'filled', class: { root: 'bg-rui-info dark:bg-rui-info-darker' } },\n { color: 'success', variant: 'filled', class: { root: 'bg-rui-success dark:bg-rui-success-darker' } },\n\n // Context colors: outlined text\n { color: 'primary', variant: 'outlined', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'outlined', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'outlined', class: { root: 'text-rui-warning' } },\n { color: 'info', variant: 'outlined', class: { root: 'text-rui-info' } },\n { color: 'success', variant: 'outlined', class: { root: 'text-rui-success' } },\n\n // Tonal: a tint with the deeper tone as text, 4.5:1; primary and secondary sit near grey, so tint harder\n { color: 'grey', variant: 'tonal', class: { root: 'bg-rui-neutral-500/10 dark:bg-rui-neutral-400/10' } },\n { color: 'primary', variant: 'tonal', class: { root: 'bg-rui-primary/15 text-rui-primary-darker dark:bg-rui-primary/35 dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'tonal', class: { root: 'bg-rui-secondary/20 text-rui-secondary-darker dark:bg-rui-secondary/35 dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'tonal', class: { root: 'bg-rui-error/10 text-rui-error-darker dark:bg-rui-error/20 dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'tonal', class: { root: 'bg-rui-warning/10 text-rui-warning-darker dark:bg-rui-warning/20 dark:text-rui-warning-lighter' } },\n { color: 'info', variant: 'tonal', class: { root: 'bg-rui-info/10 text-rui-info-darker dark:bg-rui-info/20 dark:text-rui-info-lighter' } },\n { color: 'success', variant: 'tonal', class: { root: 'bg-rui-success/10 text-rui-success-darker dark:bg-rui-success/20 dark:text-rui-success-lighter' } },\n\n // sm: a 16px circle in a 24px chip, 4px in from the start as from the top\n { size: 'sm', prepended: true, class: { root: 'pl-1' } },\n // in a tile chip the prefix follows the corners: the chip's 6px radius less the 2px inset\n { tile: true, class: { prepend: 'rounded-sm' } },\n // the close button's round hover area mirrors the prefix: as far from the end edge as from the top\n { closeable: true, class: { root: 'pr-1', label: 'pr-1' } },\n { closeable: true, size: 'sm', class: { root: 'pr-1', label: 'pr-0.5' } },\n // xs: the 12px close area sits 2px from the end edge, as the 16px prefix does from the start\n { closeable: true, size: 'xs', class: { root: 'pr-0.5', label: 'pr-0.5' } },\n\n // Disabled: a flat neutral chip in any color, like a disabled button\n { disabled: true, variant: ['filled', 'tonal'], class: { root: '!bg-rui-neutral-100 dark:!bg-rui-neutral-800' } },\n { disabled: true, variant: 'outlined', class: { root: '!border-rui-divider' } },\n ],\n compoundSlots: [\n // Every filled color takes light text, in both themes\n { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-text' },\n ],\n defaultVariants: {\n tile: false,\n size: 'md',\n disabled: false,\n clickable: false,\n variant: 'filled',\n color: 'grey',\n },\n});\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n tile,\n size,\n color,\n variant,\n disabled,\n clickable,\n prepended: !!slots.prepend,\n closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n const s: Partial<StyleValue> = {};\n if (bgColor)\n s.backgroundColor = bgColor;\n if (textColor)\n s.color = textColor;\n return s;\n});\n\nfunction click(e: MouseEvent): void {\n if (!clickable \|\| disabled)\n return;\n\n emit('click', e);\n}\n\n/\n Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n \n @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n if (!clickable \|\| disabled \|\| e.target !== get(root))\n return;\n if (e.key !== 'Enter' && e.key !== ' ')\n return;\n\n e.preventDefault();\n get(root)?.click();\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n :class=\"ui.root({ class: cn(classNames?.root) })\"\n :style=\"style\"\n :data-variant=\"variant\"\n :data-color=\"color\"\n :data-disabled=\"disabled \|\| undefined\"\n :role=\"clickable ? 'button' : undefined\"\n :tabindex=\"clickable && !disabled ? 0 : undefined\"\n :aria-disabled=\"clickable && disabled ? true : undefined\"\n v-bind=\"objectOmit($attrs, ['onClick'])\"\n @click=\"click($event)\"\n @keydown=\"onKeydown($event)\"\n >\n <div\n v-if=\"$slots.prepend\"\n :class=\"ui.prepend()\"\n >\n <slot name=\"prepend\" />\n </div>\n <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n <slot />\n </span>\n <button\n v-if=\"closeable\"\n :class=\"ui.close()\"\n :disabled=\"disabled\"\n type=\"button\"\n aria-label=\"Remove\"\n :tabindex=\"closeUnfocusable ? -1 : undefined\"\n @click.stop=\"emit('click:close')\"\n >\n <RuiIcon\n :class=\"ui.closeIcon()\"\n :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n :name=\"closeIcon\"\n />\n </button>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"RuiChip.vue_vue_type_script_setup_true_lang.js","names":["$attrs","$slots","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode","_withModifiers","_createVNode","RuiIcon"],"sources":["../../../src/components/chips/RuiChip.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { StyleValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport type { VueClassValue } from '@/types/class-value';\nimport { objectOmit } from '@vueuse/shared';\nimport { CHIP_CLOSE_ICON_SIZES, ChipSize, ChipVariant } from '@/components/chips/chip-props';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiChipClassNames {\n root?: VueClassValue;\n content?: VueClassValue;\n}\n\nexport interface Props {\n tile?: boolean;\n clickable?: boolean;\n closeable?: boolean;\n disabled?: boolean;\n size?: ChipSize;\n variant?: ChipVariant;\n color?: 'grey' \| ContextColorsType;\n closeIcon?: RuiIcons;\n /*\n Takes the close button out of the tab order, for a chip inside a widget that removes chips from\n * the keyboard itself, as RuiAutoComplete does with Backspace. The button still takes clicks.\n /\n closeUnfocusable?: boolean;\n bgColor?: string;\n textColor?: string;\n classNames?: RuiChipClassNames;\n}\n\ndefineOptions({\n name: 'RuiChip',\n inheritAttrs: false,\n});\n\nconst {\n tile = false,\n size = ChipSize.md,\n color = 'grey',\n clickable = false,\n closeable = false,\n disabled = false,\n variant = ChipVariant.filled,\n closeIcon = 'lu-x',\n closeUnfocusable = false,\n bgColor = undefined,\n textColor = undefined,\n classNames,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n 'click:close': [];\n 'click': [e: MouseEvent];\n}>();\n\nconst slots = defineSlots<{\n prepend?: () => any;\n default?: () => any;\n}>();\n\nconst root = useTemplateRef<HTMLDivElement>('root');\n\nconst chipStyles = tv({\n slots: {\n // min-h sets the height and items-center the rest, so a prefix or a border never adds to it\n root: 'inline-flex items-center justify-between px-2 transition duration-150 cursor-default outline-hidden max-w-full truncate',\n // the avatar's neutral pair, so initials stay readable on any chip color\n prepend: 'rounded-full flex items-center justify-center shrink-0 w-6 h-6 text-[0.625rem] font-semibold text-rui-neutral-700 bg-rui-neutral-200 dark:text-rui-neutral-200 dark:bg-rui-neutral-700 overflow-hidden',\n label: 'truncate px-2 text-[0.8125rem]/5',\n // a round hover fill marks the close icon as its own button\n close: 'rounded-full flex items-center p-0.5 inset-y-0 focus:outline-hidden transition-colors hover:bg-rui-pressed',\n // 80% keeps the icon at 3:1 on a filled chip and on the page; full on hover\n closeIcon: 'opacity-80 hover:opacity-100 transition-opacity',\n },\n variants: {\n tile: {\n true: { root: 'rounded-rui-sm' },\n false: { root: 'rounded-full' },\n },\n size: {\n // 28px, to sit in a 44px table row; sm is 24px with 12px text\n md: { root: 'min-h-7' },\n sm: {\n root: 'min-h-6',\n prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n label: 'px-1.5 text-xs/4',\n close: 'p-px',\n },\n // 20px for a count: 11px tabular figures keep a changing number from shifting the row\n xs: {\n root: 'min-h-5 px-1',\n prepend: 'text-[0.5rem] p-[0.08rem] w-4 h-4',\n label: 'px-1 text-[0.6875rem]/4 tabular-nums',\n close: 'p-px',\n },\n },\n // a leading circle sits as far from the start edge as from the top, like an avatar in a pill\n prepended: {\n true: { root: 'pl-0.5' },\n false: {},\n },\n closeable: {\n true: {},\n false: {},\n },\n disabled: {\n true: { root: '!text-rui-text-disabled cursor-default', close: 'cursor-default hover:bg-transparent dark:hover:bg-transparent' },\n false: {},\n },\n clickable: {\n true: { root: 'cursor-pointer' },\n false: { root: 'cursor-default', close: 'cursor-default' },\n },\n variant: {\n filled: {},\n outlined: {},\n tonal: {},\n },\n color: {\n grey: { root: 'text-rui-text' },\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n // Interactive states (clickable + not disabled): a tint over any fill, which keeps the text color\n { clickable: true, disabled: false, class: { root: 'hover:state-layer active:state-layer-pressed focus-visible:focus-ring' } },\n\n // Grey filled: a solid step above the tonal tint\n { color: 'grey', variant: 'filled', class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n\n // Outlined: the border is the text color at 40%, so it follows the brighter text tone in dark\n { variant: 'outlined', class: { root: 'border border-current/40 bg-transparent' } },\n\n // Context colors: filled bg\n { color: 'primary', variant: 'filled', class: { root: 'bg-rui-primary' } },\n { color: 'secondary', variant: 'filled', class: { root: 'bg-rui-secondary' } },\n // in dark a status color's `main` is a text tone, so the fill is its deep `darker`\n { color: 'error', variant: 'filled', class: { root: 'bg-rui-error dark:bg-rui-error-darker' } },\n { color: 'warning', variant: 'filled', class: { root: 'bg-rui-warning dark:bg-rui-warning-darker' } },\n { color: 'info', variant: 'filled', class: { root: 'bg-rui-info dark:bg-rui-info-darker' } },\n { color: 'success', variant: 'filled', class: { root: 'bg-rui-success dark:bg-rui-success-darker' } },\n\n // Context colors: outlined text\n { color: 'primary', variant: 'outlined', class: { root: 'text-rui-primary dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'text-rui-secondary dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'outlined', class: { root: 'text-rui-error dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'outlined', class: { root: 'text-rui-warning' } },\n { color: 'info', variant: 'outlined', class: { root: 'text-rui-info' } },\n { color: 'success', variant: 'outlined', class: { root: 'text-rui-success' } },\n\n // Tonal: a tint with the deeper tone as text, 4.5:1; primary and secondary sit near grey, so tint harder\n { color: 'grey', variant: 'tonal', class: { root: 'bg-rui-neutral-500/10 dark:bg-rui-neutral-400/10' } },\n { color: 'primary', variant: 'tonal', class: { root: 'bg-rui-primary/15 text-rui-primary-darker dark:bg-rui-primary/35 dark:text-rui-primary-lighter' } },\n { color: 'secondary', variant: 'tonal', class: { root: 'bg-rui-secondary/20 text-rui-secondary-darker dark:bg-rui-secondary/35 dark:text-rui-secondary-lighter' } },\n { color: 'error', variant: 'tonal', class: { root: 'bg-rui-error/10 text-rui-error-darker dark:bg-rui-error/20 dark:text-rui-error-lighter' } },\n { color: 'warning', variant: 'tonal', class: { root: 'bg-rui-warning/10 text-rui-warning-darker dark:bg-rui-warning/20 dark:text-rui-warning-lighter' } },\n { color: 'info', variant: 'tonal', class: { root: 'bg-rui-info/10 text-rui-info-darker dark:bg-rui-info/20 dark:text-rui-info-lighter' } },\n { color: 'success', variant: 'tonal', class: { root: 'bg-rui-success/10 text-rui-success-darker dark:bg-rui-success/20 dark:text-rui-success-lighter' } },\n\n // sm: a 16px circle in a 24px chip, 4px in from the start as from the top\n { size: 'sm', prepended: true, class: { root: 'pl-1' } },\n // in a tile chip the prefix follows the corners: the chip's 6px radius less the 2px inset\n { tile: true, class: { prepend: 'rounded-sm' } },\n // the close button's round hover area mirrors the prefix: as far from the end edge as from the top\n { closeable: true, class: { root: 'pr-1', label: 'pr-1' } },\n { closeable: true, size: 'sm', class: { root: 'pr-1', label: 'pr-0.5' } },\n // xs: the 12px close area sits 2px from the end edge, as the 16px prefix does from the start\n { closeable: true, size: 'xs', class: { root: 'pr-0.5', label: 'pr-0.5' } },\n\n // Disabled: a flat neutral chip in any color, like a disabled button\n { disabled: true, variant: ['filled', 'tonal'], class: { root: '!bg-rui-neutral-100 dark:!bg-rui-neutral-800' } },\n { disabled: true, variant: 'outlined', class: { root: '!border-rui-divider' } },\n ],\n compoundSlots: [\n // Every filled color takes light text, in both themes\n { slots: ['root'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], variant: 'filled', class: 'text-rui-dark-text' },\n ],\n defaultVariants: {\n tile: false,\n size: 'md',\n disabled: false,\n clickable: false,\n variant: 'filled',\n color: 'grey',\n },\n});\n\nconst ui = computed<ReturnType<typeof chipStyles>>(() => chipStyles({\n tile,\n size,\n color,\n variant,\n disabled,\n clickable,\n prepended: !!slots.prepend,\n closeable,\n}));\n\nconst style = computed<Partial<StyleValue>>(() => {\n const s: Partial<StyleValue> = {};\n if (bgColor)\n s.backgroundColor = bgColor;\n if (textColor)\n s.color = textColor;\n return s;\n});\n\nfunction click(e: MouseEvent): void {\n if (!clickable \|\| disabled)\n return;\n\n emit('click', e);\n}\n\n/\n Enter and Space activate a clickable chip as they would a button, through a\n * real click so the handler still gets a `MouseEvent`.\n \n @param e - the key press on the chip\n */\nfunction onKeydown(e: KeyboardEvent): void {\n if (!clickable \|\| disabled \|\| e.target !== get(root))\n return;\n if (e.key !== 'Enter' && e.key !== ' ')\n return;\n\n e.preventDefault();\n get(root)?.click();\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n :class=\"ui.root({ class: cn(classNames?.root) })\"\n :style=\"style\"\n :data-variant=\"variant\"\n :data-color=\"color\"\n :data-disabled=\"disabled \|\| undefined\"\n :role=\"clickable ? 'button' : undefined\"\n :tabindex=\"clickable && !disabled ? 0 : undefined\"\n :aria-disabled=\"clickable && disabled ? true : undefined\"\n v-bind=\"objectOmit($attrs, ['onClick'])\"\n @click=\"click($event)\"\n @keydown=\"onKeydown($event)\"\n >\n <div\n v-if=\"$slots.prepend\"\n :class=\"ui.prepend()\"\n >\n <slot name=\"prepend\" />\n </div>\n <span :class=\"ui.label({ class: cn(classNames?.content) })\">\n <slot />\n </span>\n <button\n v-if=\"closeable\"\n :class=\"ui.close()\"\n :disabled=\"disabled\"\n type=\"button\"\n aria-label=\"Remove\"\n :tabindex=\"closeUnfocusable ? -1 : undefined\"\n @click.stop=\"emit('click:close')\"\n >\n <RuiIcon\n :class=\"ui.closeIcon()\"\n :size=\"CHIP_CLOSE_ICON_SIZES[size]\"\n :name=\"closeIcon\"\n />\n </button>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/forms/check-control-styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"check-control-styles.js","names":[],"sources":["../../../src/components/forms/check-control-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/*\n Shared tv() styles for RuiCheckbox and RuiRadio.\n \n The control is a drawn box (or ring) centred in the 42px slot the Material\n * glyph used to fill, so a form keeps its spacing. The control's text color is\n * the mark's color: its edge, the checkbox fill and the radio dot all draw\n * with `currentColor`, so one class per state colors the whole mark. Hovering\n * the row darkens an unchecked mark, and keyboard focus rings it; the hidden\n * input is the focus target, so the ring hangs off its `peer` state.\n /\nexport const checkControlStyles = tv({\n slots: {\n wrapper: 'relative flex items-start cursor-pointer -ml-[0.5625rem] group/check',\n input: 'peer appearance-none w-px h-px absolute z-[2] outline-hidden select-none',\n control: [\n 'relative grid place-items-center shrink-0 size-10.5 text-rui-neutral-500 transition-colors',\n 'peer-focus-visible:[&>[data-mark]]:focus-ring',\n ].join(' '),\n mark: 'grid place-items-center size-4 border-[1.5px] border-current transition-colors',\n glyph: 'size-3 text-white',\n dot: 'size-2 rounded-full bg-current',\n label: 'flex-1 text-rui-text text-sm/6 mt-[0.5625rem] mb-1',\n details: '',\n },\n variants: {\n /\n * The message under the label ~~text:~~ indented by the control slot less the wrapper's pull~~, and\~~n * ~~pulled up to 4px under the text.~~ The ~~label drops its bottom margin and the~~ control gives back\n * ~~as much as~~ the label ~~sits~~ ~~below its top~~, so the row is as tall as the label at any line ~~count.\~~n * ~~The~~ control's lower part ~~then~~ hangs beside the message, never under it.\n */\n underLabel: {\n true: { label: 'mb-0', control: '-mb-[0.5625rem]', details: 'pl-8.25' },\n false: {},\n },\n size: {\n sm: {\n control: 'size-9.5',\n mark: 'size-3.5',\n glyph: 'size-2.5',\n dot: 'size-1.5',\n label: 'mt-[0.4375rem]',\n },\n lg: {\n control: 'size-11.5',\n mark: 'size-5',\n glyph: 'size-3.5',\n dot: 'size-2.5',\n label: 'mt-[0.6875rem]',\n },\n },\n shape: {\n square: { mark: 'rounded-sm' },\n round: { mark: 'rounded-full' },\n },\n disabled: {\n true: {\n wrapper: 'cursor-not-allowed',\n // the mark draws with currentColor, so one neutral greys its edge, fill and dot alike, two shades under the enabled one in dark\n control: '!text-rui-neutral-300 dark:!text-rui-neutral-700',\n label: 'text-rui-text-disabled',\n },\n },\n checked: {\n true: {},\n false: {},\n },\n validation: {\n error: { control: '!text-rui-error' },\n success: { control: '!text-rui-success' },\n },\n color: {\n grey: {},\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n { checked: false, disabled: false, class: { control: 'group-hover/check:text-rui-neutral-700 dark:group-hover/check:text-rui-neutral-300' } },\n { checked: true, shape: 'square', class: { mark: 'bg-current' } },\n\n // Mark color when checked\n { color: 'grey', checked: true, class: { control: 'text-rui-neutral-800 dark:text-rui-neutral-200' } },\n { color: 'primary', checked: true, class: { control: 'text-rui-primary' } },\n { color: 'secondary', checked: true, class: { control: 'text-rui-secondary' } },\n // a status color's dark `main` is a text tone, so the mark takes the deep `darker` under its white check\n { color: 'error', checked: true, class: { control: 'text-rui-error dark:text-rui-error-darker' } },\n { color: 'warning', checked: true, class: { control: 'text-rui-warning dark:text-rui-warning-darker' } },\n { color: 'info', checked: true, class: { control: 'text-rui-info dark:text-rui-info-darker' } },\n { color: 'success', checked: true, class: { control: 'text-rui-success dark:text-rui-success-darker' } },\n\n // A dark check where the fill is light: grey and the pale context colors in dark mode\n { color: ['grey', 'warning', 'info', 'success'], class: { glyph: 'dark:text-rui-neutral-900' } },\n\n // Under-label messages per size: a 38px slot with the label 7px down, a 46px one with it 11px down\n { underLabel: true, size: 'sm', class: { control: '-mb-[0.4375rem]', details: 'pl-7.25' } },\n { underLabel: true, size: 'lg', class: { control: '-mb-[0.6875rem]', details: 'pl-9.25' } },\n ],\n defaultVariants: {\n shape: 'square',\n color: 'grey',\n disabled: false,\n checked: false,\n },\n});\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,qBAAqB,GAAG;CACnC,OAAO;EACL,SAAS;EACT,OAAO;EACP,SAAS,CACP,8FACA,+CACF,CAAC,CAAC,KAAK,GAAG;EACV,MAAM;EACN,OAAO;EACP,KAAK;EACL,OAAO;EACP,SAAS;CACX;CACA,UAAU;~~EAOR~~,YAAY;GACV,MAAM;IAAE,OAAO;IAAQ,SAAS;IAAmB,SAAS;GAAU;GACtE,OAAO,CAAC;EACV;EACA,MAAM;GACJ,IAAI;IACF,SAAS;IACT,MAAM;IACN,OAAO;IACP,KAAK;IACL,OAAO;GACT;GACA,IAAI;IACF,SAAS;IACT,MAAM;IACN,OAAO;IACP,KAAK;IACL,OAAO;GACT;EACF;EACA,OAAO;GACL,QAAQ,EAAE,MAAM,aAAa;GAC7B,OAAO,EAAE,MAAM,eAAe;EAChC;EACA,UAAU,EACR,MAAM;GACJ,SAAS;GAET,SAAS;GACT,OAAO;EACT,EACF;EACA,SAAS;GACP,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,YAAY;GACV,OAAO,EAAE,SAAS,kBAAkB;GACpC,SAAS,EAAE,SAAS,oBAAoB;EAC1C;EACA,OAAO;GACL,MAAM,CAAC;GACP,SAAS,CAAC;GACV,WAAW,CAAC;GACZ,OAAO,CAAC;GACR,SAAS,CAAC;GACV,MAAM,CAAC;GACP,SAAS,CAAC;EACZ;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAO,UAAU;GAAO,OAAO,EAAE,SAAS,qFAAqF;EAAE;EAC5I;GAAE,SAAS;GAAM,OAAO;GAAU,OAAO,EAAE,MAAM,aAAa;EAAE;EAGhE;GAAE,OAAO;GAAQ,SAAS;GAAM,OAAO,EAAE,SAAS,iDAAiD;EAAE;EACrG;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,mBAAmB;EAAE;EAC1E;GAAE,OAAO;GAAa,SAAS;GAAM,OAAO,EAAE,SAAS,qBAAqB;EAAE;EAE9E;GAAE,OAAO;GAAS,SAAS;GAAM,OAAO,EAAE,SAAS,4CAA4C;EAAE;EACjG;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,gDAAgD;EAAE;EACvG;GAAE,OAAO;GAAQ,SAAS;GAAM,OAAO,EAAE,SAAS,0CAA0C;EAAE;EAC9F;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,gDAAgD;EAAE;EAGvG;GAAE,OAAO;IAAC;IAAQ;IAAW;IAAQ;GAAS;GAAG,OAAO,EAAE,OAAO,4BAA4B;EAAE;EAG/F;GAAE,YAAY;GAAM,MAAM;GAAM,OAAO;IAAE,SAAS;IAAmB,SAAS;GAAU;EAAE;EAC1F;GAAE,YAAY;GAAM,MAAM;GAAM,OAAO;IAAE,SAAS;IAAmB,SAAS;GAAU;EAAE;CAC5F;CACA,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,UAAU;EACV,SAAS;CACX;AACF,CAAC"}
1	+ {"version":3,"file":"check-control-styles.js","names":[],"sources":["../../../src/components/forms/check-control-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/*\n Shared tv() styles for RuiCheckbox and RuiRadio.\n \n The control is a drawn box (or ring) centred in the 42px slot the Material\n * glyph used to fill, so a form keeps its spacing. The control's text color is\n * the mark's color: its edge, the checkbox fill and the radio dot all draw\n * with `currentColor`, so one class per state colors the whole mark. Hovering\n * the row darkens an unchecked mark, and keyboard focus rings it; the hidden\n * input is the focus target, so the ring hangs off its `peer` state.\n /\nexport const checkControlStyles = tv({\n slots: {\n wrapper: 'relative flex items-start cursor-pointer -ml-[0.5625rem] group/check',\n input: 'peer appearance-none w-px h-px absolute z-[2] outline-hidden select-none',\n control: [\n 'relative grid place-items-center shrink-0 size-10.5 text-rui-neutral-500 transition-colors',\n 'peer-focus-visible:[&>[data-mark]]:focus-ring',\n ].join(' '),\n mark: 'grid place-items-center size-4 border-[1.5px] border-current transition-colors',\n glyph: 'size-3 text-white',\n dot: 'size-2 rounded-full bg-current',\n label: 'flex-1 text-rui-text text-sm/6 mt-[0.5625rem] mb-1',\n details: '',\n },\n variants: {\n /\n * The message sits 4px under the label, indented by the control slot less the wrapper's pull.\n * The control gives back the label's top offset, so the row is as tall as the label at any line\n * count and the control's lower part hangs beside the message, never under it.\n */\n underLabel: {\n true: { label: 'mb-0', control: '-mb-[0.5625rem]', details: 'pl-8.25' },\n false: {},\n },\n size: {\n sm: {\n control: 'size-9.5',\n mark: 'size-3.5',\n glyph: 'size-2.5',\n dot: 'size-1.5',\n label: 'mt-[0.4375rem]',\n },\n lg: {\n control: 'size-11.5',\n mark: 'size-5',\n glyph: 'size-3.5',\n dot: 'size-2.5',\n label: 'mt-[0.6875rem]',\n },\n },\n shape: {\n square: { mark: 'rounded-sm' },\n round: { mark: 'rounded-full' },\n },\n disabled: {\n true: {\n wrapper: 'cursor-not-allowed',\n // the mark draws with currentColor, so one neutral greys its edge, fill and dot alike, two shades under the enabled one in dark\n control: '!text-rui-neutral-300 dark:!text-rui-neutral-700',\n label: 'text-rui-text-disabled',\n },\n },\n checked: {\n true: {},\n false: {},\n },\n validation: {\n error: { control: '!text-rui-error' },\n success: { control: '!text-rui-success' },\n },\n color: {\n grey: {},\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n { checked: false, disabled: false, class: { control: 'group-hover/check:text-rui-neutral-700 dark:group-hover/check:text-rui-neutral-300' } },\n { checked: true, shape: 'square', class: { mark: 'bg-current' } },\n\n // Mark color when checked\n { color: 'grey', checked: true, class: { control: 'text-rui-neutral-800 dark:text-rui-neutral-200' } },\n { color: 'primary', checked: true, class: { control: 'text-rui-primary' } },\n { color: 'secondary', checked: true, class: { control: 'text-rui-secondary' } },\n // a status color's dark `main` is a text tone, so the mark takes the deep `darker` under its white check\n { color: 'error', checked: true, class: { control: 'text-rui-error dark:text-rui-error-darker' } },\n { color: 'warning', checked: true, class: { control: 'text-rui-warning dark:text-rui-warning-darker' } },\n { color: 'info', checked: true, class: { control: 'text-rui-info dark:text-rui-info-darker' } },\n { color: 'success', checked: true, class: { control: 'text-rui-success dark:text-rui-success-darker' } },\n\n // A dark check where the fill is light: grey and the pale context colors in dark mode\n { color: ['grey', 'warning', 'info', 'success'], class: { glyph: 'dark:text-rui-neutral-900' } },\n\n // Under-label messages per size: a 38px slot with the label 7px down, a 46px one with it 11px down\n { underLabel: true, size: 'sm', class: { control: '-mb-[0.4375rem]', details: 'pl-7.25' } },\n { underLabel: true, size: 'lg', class: { control: '-mb-[0.6875rem]', details: 'pl-9.25' } },\n ],\n defaultVariants: {\n shape: 'square',\n color: 'grey',\n disabled: false,\n checked: false,\n },\n});\n"],"mappings":";;;;;;;;;;;;AAYA,IAAa,qBAAqB,GAAG;CACnC,OAAO;EACL,SAAS;EACT,OAAO;EACP,SAAS,CACP,8FACA,+CACF,CAAC,CAAC,KAAK,GAAG;EACV,MAAM;EACN,OAAO;EACP,KAAK;EACL,OAAO;EACP,SAAS;CACX;CACA,UAAU;EAMR,YAAY;GACV,MAAM;IAAE,OAAO;IAAQ,SAAS;IAAmB,SAAS;GAAU;GACtE,OAAO,CAAC;EACV;EACA,MAAM;GACJ,IAAI;IACF,SAAS;IACT,MAAM;IACN,OAAO;IACP,KAAK;IACL,OAAO;GACT;GACA,IAAI;IACF,SAAS;IACT,MAAM;IACN,OAAO;IACP,KAAK;IACL,OAAO;GACT;EACF;EACA,OAAO;GACL,QAAQ,EAAE,MAAM,aAAa;GAC7B,OAAO,EAAE,MAAM,eAAe;EAChC;EACA,UAAU,EACR,MAAM;GACJ,SAAS;GAET,SAAS;GACT,OAAO;EACT,EACF;EACA,SAAS;GACP,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,YAAY;GACV,OAAO,EAAE,SAAS,kBAAkB;GACpC,SAAS,EAAE,SAAS,oBAAoB;EAC1C;EACA,OAAO;GACL,MAAM,CAAC;GACP,SAAS,CAAC;GACV,WAAW,CAAC;GACZ,OAAO,CAAC;GACR,SAAS,CAAC;GACV,MAAM,CAAC;GACP,SAAS,CAAC;EACZ;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAO,UAAU;GAAO,OAAO,EAAE,SAAS,qFAAqF;EAAE;EAC5I;GAAE,SAAS;GAAM,OAAO;GAAU,OAAO,EAAE,MAAM,aAAa;EAAE;EAGhE;GAAE,OAAO;GAAQ,SAAS;GAAM,OAAO,EAAE,SAAS,iDAAiD;EAAE;EACrG;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,mBAAmB;EAAE;EAC1E;GAAE,OAAO;GAAa,SAAS;GAAM,OAAO,EAAE,SAAS,qBAAqB;EAAE;EAE9E;GAAE,OAAO;GAAS,SAAS;GAAM,OAAO,EAAE,SAAS,4CAA4C;EAAE;EACjG;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,gDAAgD;EAAE;EACvG;GAAE,OAAO;GAAQ,SAAS;GAAM,OAAO,EAAE,SAAS,0CAA0C;EAAE;EAC9F;GAAE,OAAO;GAAW,SAAS;GAAM,OAAO,EAAE,SAAS,gDAAgD;EAAE;EAGvG;GAAE,OAAO;IAAC;IAAQ;IAAW;IAAQ;GAAS;GAAG,OAAO,EAAE,OAAO,4BAA4B;EAAE;EAG/F;GAAE,YAAY;GAAM,MAAM;GAAM,OAAO;IAAE,SAAS;IAAmB,SAAS;GAAU;EAAE;EAC1F;GAAE,YAAY;GAAM,MAAM;GAAM,OAAO;IAAE,SAAS;IAAmB,SAAS;GAAU;EAAE;CAC5F;CACA,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,UAAU;EACV,SAAS;CACX;AACF,CAAC"}

package/dist/components/forms/file-upload/RuiFileUpload.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiFileUpload.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/file-upload/RuiFileUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { RuiIcons } from '@/icons';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { formatFileSize, getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface FileUploadProps {\n /** File type filter (HTML accept attribute syntax). e.g. '.csv', 'image/', '.png,.jpg' /\n accept?: string;\n /** Allow multiple file selection. /\n multiple?: boolean;\n disabled?: boolean;\n /* Shows a loading overlay (consumer-driven, e.g. while uploading). /\n loading?: boolean;\n /* Upload progress 0-100. When provided alongside `loading`, the overlay shows a determinate progress bar with percentage. /\n progress?: number;\n /* Renders the success state border/icon. Consumer toggles back to false. /\n uploaded?: boolean;\n /* Optional max size per file in bytes; failures emit `error` and set internal error state. /\n maxSize?: number;\n /* External error messages (e.g. from Vuelidate). Shown via the standard form detail block. /\n errorMessages?: string \| string[];\n /* Hint text below the dropzone. /\n hint?: string;\n /* Disable drag-and-drop; the dropzone becomes click-only (matches rotki.com use case). /\n noDrop?: boolean;\n /\n Replace the default \"Drag and drop or \\{button\\}\" copy. With `noDrop` the default is empty, so only the button shows.\n * The defaults of this and the other texts, error messages included, come from the `rui.file_upload.` translation keys.\n /\n uploadText?: string;\n /** Label shown on the inline button when no file is selected. /\n clickToUploadText?: string;\n /* Label shown on the inline button when one or more files are already selected. /\n replaceText?: string;\n /* The line under the dropzone for its hint and errors: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. /\n details?: FormDetails;\n /* @deprecated Use `details=\"hidden\"`. Removed in 4.0. /\n hideDetails?: boolean;\n}\n\ndefineOptions({\n name: 'RuiFileUpload',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<File \| File[] \| undefined>({ required: true });\n\nconst {\n accept = '',\n multiple = false,\n disabled = false,\n loading = false,\n progress = undefined,\n uploaded = false,\n maxSize = undefined,\n errorMessages = [],\n hint = '',\n noDrop = false,\n uploadText = undefined,\n clickToUploadText = undefined,\n replaceText = undefined,\n details = undefined,\n hideDetails = false,\n} = defineProps<FileUploadProps>();\n\nconst emit = defineEmits<{\n error: [message: string];\n}>();\n\ndefineSlots<{\n preview?: (props: { files: File[]; remove: () => void }) => any;\n icon?: () => any;\n description?: () => any;\n}>();\n\nconst { t } = useRuiI8n();\n\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\nconst input = useTemplateRef<HTMLInputElement>('input');\nconst internalError = ref<string>('');\n\nconst files = computed<File[]>(() => {\n const value = get(modelValue);\n if (!value)\n return [];\n return Array.isArray(value) ? value : [value];\n});\n\nconst hasFiles = computed<boolean>(() => get(files).length > 0);\n\nconst progressLabel = computed<string \| undefined>(() => {\n const value = progress;\n return value === undefined ? undefined : `${Math.round(value)}%`;\n});\n\nconst combinedErrorMessages = computed<string[]>(() => {\n const external = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n const internal = get(internalError);\n return [...external.filter(Boolean), ...(internal ? [internal] : [])];\n});\n\nconst { hasError } = useFormTextDetail(combinedErrorMessages, () => []);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\n// a click-only dropzone does not offer dragging\nconst resolvedUploadText = computed<string>(() => uploadText ?? (noDrop ? '' : t(RUI_I18N_KEYS.fileUpload.dropPrefix, 'Drag and drop or')));\nconst resolvedClickToUploadText = computed<string>(() => clickToUploadText ?? t(RUI_I18N_KEYS.fileUpload.clickToUpload, 'click to upload'));\nconst resolvedReplaceText = computed<string>(() => replaceText ?? t(RUI_I18N_KEYS.fileUpload.replace, 'replace file'));\n\ntype WellTone = 'primary' \| 'error' \| 'success';\n\n// the icon well follows the dropzone's state, like its border\nconst wellTone = computed<WellTone>(() => {\n if (get(hasError))\n return 'error';\n if (uploaded)\n return 'success';\n return 'primary';\n});\n\nconst wellIcon = computed<RuiIcons>(() => {\n const tone = get(wellTone);\n if (tone === 'error')\n return 'lu-circle-alert';\n if (tone === 'success')\n return 'lu-circle-check';\n return 'lu-file-up';\n});\n\n// the 10% tint vanishes on a dark page, so dark doubles it\nconst wellClasses: Record<WellTone, string> = {\n primary: 'bg-rui-primary-soft dark:bg-rui-primary/20',\n error: 'bg-rui-error-soft dark:bg-rui-error/20',\n success: 'bg-rui-success-soft dark:bg-rui-success/20',\n};\n\nfunction matchesAccept(file: File, acceptString: string): boolean {\n if (!acceptString \|\| acceptString === '' \|\| acceptString === '/')\n return true;\n\n const fileName = file.name.toLowerCase();\n const fileExtension = fileName.includes('.') ? fileName.slice(fileName.lastIndexOf('.')) : '';\n const fileType = file.type.toLowerCase();\n const acceptTypes = acceptString.split(',').map(value => value.trim().toLowerCase()).filter(Boolean);\n\n return acceptTypes.some((type) => {\n if (type.startsWith('.'))\n return type === fileExtension;\n if (type.endsWith('/'))\n return fileType.startsWith(type.slice(0, -1));\n return type === fileType;\n });\n}\n\nfunction reportError(message: string): void {\n set(internalError, message);\n emit('error', message);\n}\n\nfunction clearInternalError(): void {\n set(internalError, '');\n}\n\nfunction validate(candidates: File[]): File[] \| undefined {\n if (candidates.length === 0)\n return undefined;\n\n if (!multiple && candidates.length > 1) {\n reportError(t(RUI_I18N_KEYS.fileUpload.tooMany, 'Only one file can be uploaded'));\n return undefined;\n }\n\n for (const file of candidates) {\n if (!matchesAccept(file, accept)) {\n reportError(t(RUI_I18N_KEYS.fileUpload.wrongType, { accept }, `Only ${accept} files are allowed`));\n return undefined;\n }\n if (maxSize !== undefined && file.size > maxSize) {\n const size = formatFileSize(maxSize);\n reportError(t(RUI_I18N_KEYS.fileUpload.tooLarge, { name: file.name, size }, `${file.name} exceeds the maximum size of ${size}`));\n return undefined;\n }\n }\n\n return candidates;\n}\n\nfunction setFiles(candidates: File[]): void {\n const validated = validate(candidates);\n if (!validated)\n return;\n clearInternalError();\n set(modelValue, multiple ? validated : validated[0]);\n}\n\nfunction removeFile(target?: File): void {\n clearInternalError();\n const inputEl = get(input);\n if (inputEl)\n inputEl.value = '';\n\n if (!target \|\| !multiple) {\n set(modelValue, multiple ? [] : undefined);\n return;\n }\n\n const remaining = get(files).filter(file => file !== target);\n set(modelValue, remaining);\n}\n\nfunction onSelect(event: Event): void {\n const target = event.target;\n if (!(target instanceof HTMLInputElement) \|\| !target.files)\n return;\n const picked = Array.from(target.files);\n // the model owns the selection; a cleared input fires `change` for the same file again\n target.value = '';\n setFiles(picked);\n}\n\nfunction onDrop(dropped: File[] \| null): void {\n if (disabled \|\| noDrop \|\| !dropped \|\| dropped.length === 0)\n return;\n setFiles(dropped);\n}\n\nconst { isOverDropZone } = useDropZone(wrapper, {\n onDrop,\n});\n\nfunction openPicker(): void {\n if (disabled)\n return;\n get(input)?.click();\n}\n\nwatch(() => errorMessages, () => clearInternalError());\n\ndefineExpose({\n removeFile: () => removeFile(),\n openPicker,\n});\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <div\n ref=\"wrapper\"\n class=\"p-4 border border-rui-outline dark:border-rui-neutral-400 rounded-rui-panel w-full relative border-dashed transition\"\n :class=\"{\n 'border-rui-primary! bg-rui-primary-subtle': isOverDropZone && !disabled && !noDrop,\n 'border-rui-error! border-solid! bg-rui-error-subtle': hasError,\n 'border-rui-success! border-solid! bg-rui-success-subtle': uploaded,\n 'opacity-60 pointer-events-none': disabled,\n }\"\n :data-disabled=\"disabled \|\| undefined\"\n :data-uploaded=\"uploaded \|\| undefined\"\n :data-error=\"hasError ? '' : undefined\"\n :data-drop-active=\"isOverDropZone \|\| undefined\"\n >\n <div\n class=\"flex flex-col items-center justify-center gap-3\"\n :class=\"{ 'opacity-0': loading }\"\n >\n <slot\n name=\"preview\"\n :files=\"files\"\n :remove=\"() => removeFile()\"\n >\n <div\n v-if=\"hasFiles\"\n class=\"flex flex-col gap-1 w-full\"\n data-id=\"file-list\"\n >\n <div\n v-for=\"file in files\"\n :key=\"`${file.name}-${file.lastModified}`\"\n class=\"flex items-center gap-2 bg-rui-primary-soft dark:bg-rui-primary/20 rounded-full pl-3 pr-1 py-1\"\n data-id=\"file-item\"\n >\n <RuiIcon\n name=\"lu-file\"\n color=\"primary\"\n size=\"20\"\n />\n <div class=\"flex-1 overflow-hidden min-w-0\">\n <div\n class=\"text-sm leading-5 truncate\"\n :title=\"file.name\"\n >\n {{ file.name }}\n </div>\n <div class=\"text-rui-text-secondary text-xs leading-3\">\n {{ formatFileSize(file.size) }}\n </div>\n </div>\n <button\n type=\"button\"\n class=\"p-1 rounded-full hover:bg-rui-hover transition focus-visible:focus-ring outline-hidden\"\n :disabled=\"disabled\"\n :aria-label=\"t(RUI_I18N_KEYS.fileUpload.remove, { name: file.name }, `Remove ${file.name}`)\"\n data-id=\"remove-file\"\n @click=\"removeFile(file)\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"16\"\n />\n </button>\n </div>\n </div>\n <div\n v-else\n class=\"h-10 w-10 rounded-full flex items-center justify-center\"\n :class=\"wellClasses[wellTone]\"\n data-id=\"icon-well\"\n >\n <slot name=\"icon\">\n <RuiIcon\n :name=\"wellIcon\"\n :color=\"wellTone\"\n />\n </slot>\n </div>\n </slot>\n\n <div class=\"text-center text-sm\">\n <slot name=\"description\">\n <div class=\"flex items-center justify-center gap-1 flex-wrap\">\n <span v-if=\"resolvedUploadText\">{{ resolvedUploadText }}</span>\n <button\n type=\"button\"\n class=\"text-rui-primary underline disabled:no-underline disabled:text-rui-text-disabled\"\n :class=\"{ 'first-letter:uppercase': !resolvedUploadText }\"\n :disabled=\"disabled\"\n data-id=\"open-picker\"\n @click=\"openPicker()\"\n >\n {{ hasFiles ? resolvedReplaceText : resolvedClickToUploadText }}\n </button>\n </div>\n </slot>\n </div>\n\n <input\n ref=\"input\"\n type=\"file\"\n :accept=\"accept\"\n :multiple=\"multiple\"\n :disabled=\"disabled\"\n hidden\n data-id=\"file-input\"\n v-bind=\"getNonRootAttrs($attrs, ['class', 'onChange'])\"\n @change=\"onSelect($event)\"\n />\n </div>\n\n <div\n v-if=\"loading\"\n class=\"flex flex-col items-center justify-center absolute h-full w-full top-0 left-0 gap-2\"\n data-id=\"loading\"\n >\n <RuiProgress\n circular\n :variant=\"progress === undefined ? 'indeterminate' : 'determinate'\"\n :value=\"progress\"\n color=\"primary\"\n size=\"40\"\n />\n <div\n v-if=\"progressLabel\"\n class=\"text-xs text-rui-text-secondary\"\n data-id=\"progress-label\"\n v-text=\"progressLabel\"\n />\n </div>\n </div>\n <RuiFormTextDetail\n v-if=\"detailsMode !== 'hidden'\"\n :details=\"detailsMode\"\n :error-messages=\"combinedErrorMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":""}
1	+ {"version":3,"file":"RuiFileUpload.js","names":["_sfc_main"],"sources":["../../../../src/components/forms/file-upload/RuiFileUpload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { RuiIcons } from '@/icons';\nimport RuiFormTextDetail from '@/components/helpers/RuiFormTextDetail.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\nimport { type FormDetails, useFormDetails, useFormTextDetail } from '@/utils/form-text-detail';\nimport { formatFileSize, getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\n\nexport interface FileUploadProps {\n /** File type filter (HTML accept attribute syntax). e.g. '.csv', 'image/', '.png,.jpg' /\n accept?: string;\n /** Allow multiple file selection. /\n multiple?: boolean;\n disabled?: boolean;\n /* Shows a loading overlay (consumer-driven, e.g. while uploading). /\n loading?: boolean;\n /* Upload progress 0-100. When provided alongside `loading`, the overlay shows a determinate progress bar with percentage. /\n progress?: number;\n /* Renders the success state border/icon. Consumer toggles back to false. /\n uploaded?: boolean;\n /* Optional max size per file in bytes; failures emit `error` and set internal error state. /\n maxSize?: number;\n /* External error messages (e.g. from Vuelidate). Shown via the standard form detail block. /\n errorMessages?: string \| string[];\n /* Hint text below the dropzone. /\n hint?: string;\n /* Disable drag-and-drop; the dropzone becomes click-only (matches rotki.com use case). /\n noDrop?: boolean;\n /\n Replace the default \"Drag and drop or \\{button\\}\" copy. With `noDrop` the default is empty, so only the button shows.\n * The defaults of this and the other texts, error messages included, come from the `rui.file_upload.` translation keys.\n /\n uploadText?: string;\n /** Label shown on the inline button when no file is selected. /\n clickToUploadText?: string;\n /* Label shown on the inline button when one or more files are already selected. /\n replaceText?: string;\n /* The line under the dropzone for its hint and errors: `reserve`, `auto` or `hidden`; falls back to the nearest `RuiFieldDefaults`, then the app default, then `reserve`. /\n details?: FormDetails;\n /* @deprecated Use `details=\"hidden\"`. Removed in 4.0. /\n hideDetails?: boolean;\n}\n\ndefineOptions({\n name: 'RuiFileUpload',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<File \| File[] \| undefined>({ required: true });\n\nconst {\n accept = '',\n multiple = false,\n disabled = false,\n loading = false,\n progress = undefined,\n uploaded = false,\n maxSize = undefined,\n errorMessages = [],\n hint = '',\n noDrop = false,\n uploadText = undefined,\n clickToUploadText = undefined,\n replaceText = undefined,\n details = undefined,\n hideDetails = false,\n} = defineProps<FileUploadProps>();\n\nconst emit = defineEmits<{\n error: [message: string];\n}>();\n\ndefineSlots<{\n preview?: (props: { files: File[]; remove: () => void }) => any;\n icon?: () => any;\n description?: () => any;\n}>();\n\nconst { t } = useRuiI8n();\n\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\nconst input = useTemplateRef<HTMLInputElement>('input');\nconst internalError = ref<string>('');\n\nconst files = computed<File[]>(() => {\n const value = get(modelValue);\n if (!value)\n return [];\n return Array.isArray(value) ? value : [value];\n});\n\nconst hasFiles = computed<boolean>(() => get(files).length > 0);\n\nconst progressLabel = computed<string \| undefined>(() => {\n const value = progress;\n return value === undefined ? undefined : `${Math.round(value)}%`;\n});\n\nconst combinedErrorMessages = computed<string[]>(() => {\n const external = Array.isArray(errorMessages) ? errorMessages : [errorMessages];\n const internal = get(internalError);\n return [...external.filter(Boolean), ...(internal ? [internal] : [])];\n});\n\nconst { hasError } = useFormTextDetail(combinedErrorMessages, () => []);\nconst detailsMode = useFormDetails(() => details, () => hideDetails);\n\n// a click-only dropzone does not offer dragging\nconst resolvedUploadText = computed<string>(() => uploadText ?? (noDrop ? '' : t(RUI_I18N_KEYS.fileUpload.dropPrefix, 'Drag and drop or')));\nconst resolvedClickToUploadText = computed<string>(() => clickToUploadText ?? t(RUI_I18N_KEYS.fileUpload.clickToUpload, 'click to upload'));\nconst resolvedReplaceText = computed<string>(() => replaceText ?? t(RUI_I18N_KEYS.fileUpload.replace, 'replace file'));\n\ntype WellTone = 'primary' \| 'error' \| 'success';\n\n// the icon well follows the dropzone's state, like its border\nconst wellTone = computed<WellTone>(() => {\n if (get(hasError))\n return 'error';\n if (uploaded)\n return 'success';\n return 'primary';\n});\n\nconst wellIcon = computed<RuiIcons>(() => {\n const tone = get(wellTone);\n if (tone === 'error')\n return 'lu-circle-alert';\n if (tone === 'success')\n return 'lu-circle-check';\n return 'lu-file-up';\n});\n\n// the 10% tint vanishes on a dark page, so dark doubles it\nconst wellClasses: Record<WellTone, string> = {\n primary: 'bg-rui-primary-soft dark:bg-rui-primary/20',\n error: 'bg-rui-error-soft dark:bg-rui-error/20',\n success: 'bg-rui-success-soft dark:bg-rui-success/20',\n};\n\nfunction matchesAccept(file: File, acceptString: string): boolean {\n if (!acceptString \|\| acceptString === '' \|\| acceptString === '/')\n return true;\n\n const fileName = file.name.toLowerCase();\n const fileExtension = fileName.includes('.') ? fileName.slice(fileName.lastIndexOf('.')) : '';\n const fileType = file.type.toLowerCase();\n const acceptTypes = acceptString.split(',').map(value => value.trim().toLowerCase()).filter(Boolean);\n\n return acceptTypes.some((type) => {\n if (type.startsWith('.'))\n return type === fileExtension;\n if (type.endsWith('/'))\n return fileType.startsWith(type.slice(0, -1));\n return type === fileType;\n });\n}\n\nfunction reportError(message: string): void {\n set(internalError, message);\n emit('error', message);\n}\n\nfunction clearInternalError(): void {\n set(internalError, '');\n}\n\nfunction validate(candidates: File[]): File[] \| undefined {\n if (candidates.length === 0)\n return undefined;\n\n if (!multiple && candidates.length > 1) {\n reportError(t(RUI_I18N_KEYS.fileUpload.tooMany, 'Only one file can be uploaded'));\n return undefined;\n }\n\n for (const file of candidates) {\n if (!matchesAccept(file, accept)) {\n reportError(t(RUI_I18N_KEYS.fileUpload.wrongType, { accept }, `Only ${accept} files are allowed`));\n return undefined;\n }\n if (maxSize !== undefined && file.size > maxSize) {\n const size = formatFileSize(maxSize);\n reportError(t(RUI_I18N_KEYS.fileUpload.tooLarge, { name: file.name, size }, `${file.name} exceeds the maximum size of ${size}`));\n return undefined;\n }\n }\n\n return candidates;\n}\n\nfunction setFiles(candidates: File[]): void {\n const validated = validate(candidates);\n if (!validated)\n return;\n clearInternalError();\n set(modelValue, multiple ? validated : validated[0]);\n}\n\nfunction removeFile(target?: File): void {\n clearInternalError();\n const inputEl = get(input);\n if (inputEl)\n inputEl.value = '';\n\n if (!target \|\| !multiple) {\n set(modelValue, multiple ? [] : undefined);\n return;\n }\n\n const remaining = get(files).filter(file => file !== target);\n set(modelValue, remaining);\n}\n\nfunction onSelect(event: Event): void {\n const target = event.target;\n if (!(target instanceof HTMLInputElement) \|\| !target.files)\n return;\n const picked = Array.from(target.files);\n // the model owns the selection; a cleared input fires `change` for the same file again\n target.value = '';\n setFiles(picked);\n}\n\nfunction onDrop(dropped: File[] \| null): void {\n if (disabled \|\| noDrop \|\| !dropped \|\| dropped.length === 0)\n return;\n setFiles(dropped);\n}\n\nconst { isOverDropZone } = useDropZone(wrapper, {\n onDrop,\n});\n\nfunction openPicker(): void {\n if (disabled)\n return;\n get(input)?.click();\n}\n\nwatch(() => errorMessages, () => clearInternalError());\n\ndefineExpose({\n removeFile: () => removeFile(),\n openPicker,\n});\n</script>\n\n<template>\n <div v-bind=\"getRootAttrs($attrs)\">\n <div\n ref=\"wrapper\"\n class=\"p-4 border border-rui-outline dark:border-rui-neutral-400 rounded-rui-panel w-full relative border-dashed transition\"\n :class=\"{\n 'border-rui-primary! bg-rui-primary-subtle': isOverDropZone && !disabled && !noDrop,\n 'border-rui-error! border-solid! bg-rui-error-subtle': hasError,\n 'border-rui-success! border-solid! bg-rui-success-subtle': uploaded,\n 'opacity-60 pointer-events-none': disabled,\n }\"\n :data-disabled=\"disabled \|\| undefined\"\n :data-uploaded=\"uploaded \|\| undefined\"\n :data-error=\"hasError ? '' : undefined\"\n :data-drop-active=\"isOverDropZone \|\| undefined\"\n >\n <div\n class=\"flex flex-col items-center justify-center gap-3\"\n :class=\"{ 'opacity-0': loading }\"\n >\n <slot\n name=\"preview\"\n :files=\"files\"\n :remove=\"() => removeFile()\"\n >\n <div\n v-if=\"hasFiles\"\n class=\"flex flex-col gap-1 w-full\"\n data-id=\"file-list\"\n >\n <div\n v-for=\"file in files\"\n :key=\"`${file.name}-${file.lastModified}`\"\n class=\"flex items-center gap-2 bg-rui-primary-soft dark:bg-rui-primary/20 rounded-full pl-3 pr-1 py-1\"\n data-id=\"file-item\"\n >\n <RuiIcon\n name=\"lu-file\"\n color=\"primary\"\n size=\"20\"\n />\n <div class=\"flex-1 overflow-hidden min-w-0\">\n <div\n class=\"text-sm leading-5 truncate\"\n :title=\"file.name\"\n >\n {{ file.name }}\n </div>\n <div class=\"text-rui-text-secondary text-xs leading-3\">\n {{ formatFileSize(file.size) }}\n </div>\n </div>\n <button\n type=\"button\"\n class=\"p-1 rounded-full hover:bg-rui-hover transition focus-visible:focus-ring outline-hidden\"\n :disabled=\"disabled\"\n :aria-label=\"t(RUI_I18N_KEYS.fileUpload.remove, { name: file.name }, `Remove ${file.name}`)\"\n data-id=\"remove-file\"\n @click=\"removeFile(file)\"\n >\n <RuiIcon\n name=\"lu-x\"\n size=\"16\"\n />\n </button>\n </div>\n </div>\n <div\n v-else\n class=\"h-10 w-10 rounded-full flex items-center justify-center\"\n :class=\"wellClasses[wellTone]\"\n data-id=\"icon-well\"\n >\n <slot name=\"icon\">\n <RuiIcon\n :name=\"wellIcon\"\n :color=\"wellTone\"\n :class=\"{ 'dark:text-rui-primary-lighter': wellTone === 'primary' }\"\n />\n </slot>\n </div>\n </slot>\n\n <div class=\"text-center text-sm\">\n <slot name=\"description\">\n <div class=\"flex items-center justify-center gap-1 flex-wrap\">\n <span v-if=\"resolvedUploadText\">{{ resolvedUploadText }}</span>\n <button\n type=\"button\"\n class=\"text-rui-primary dark:text-rui-primary-lighter underline disabled:no-underline disabled:text-rui-text-disabled\"\n :class=\"{ 'first-letter:uppercase': !resolvedUploadText }\"\n :disabled=\"disabled\"\n data-id=\"open-picker\"\n @click=\"openPicker()\"\n >\n {{ hasFiles ? resolvedReplaceText : resolvedClickToUploadText }}\n </button>\n </div>\n </slot>\n </div>\n\n <input\n ref=\"input\"\n type=\"file\"\n :accept=\"accept\"\n :multiple=\"multiple\"\n :disabled=\"disabled\"\n hidden\n data-id=\"file-input\"\n v-bind=\"getNonRootAttrs($attrs, ['class', 'onChange'])\"\n @change=\"onSelect($event)\"\n />\n </div>\n\n <div\n v-if=\"loading\"\n class=\"flex flex-col items-center justify-center absolute h-full w-full top-0 left-0 gap-2\"\n data-id=\"loading\"\n >\n <RuiProgress\n circular\n :variant=\"progress === undefined ? 'indeterminate' : 'determinate'\"\n :value=\"progress\"\n color=\"primary\"\n size=\"40\"\n />\n <div\n v-if=\"progressLabel\"\n class=\"text-xs text-rui-text-secondary\"\n data-id=\"progress-label\"\n v-text=\"progressLabel\"\n />\n </div>\n </div>\n <RuiFormTextDetail\n v-if=\"detailsMode !== 'hidden'\"\n :details=\"detailsMode\"\n :error-messages=\"combinedErrorMessages\"\n :hint=\"hint\"\n />\n </div>\n</template>\n"],"mappings":""}

package/dist/components/forms/file-upload/RuiFileUpload.vue_vue_type_script_setup_true_lang.js CHANGED Viewed

@@ -258,11 +258,16 @@ var RuiFileUpload_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					"data-id": "icon-well"
 				}, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(RuiIcon_default, {
 					name: unref(wellIcon),
-					color: unref(wellTone)
-				}, null, 8, ["name", "color"])])], 2))]),
+					color: unref(wellTone),
+					class: normalizeClass({ "dark:text-rui-primary-lighter": unref(wellTone) === "primary" })
+				}, null, 8, [
+					"name",
+					"color",
+					"class"
+				])])], 2))]),
 				createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "description", {}, () => [createElementVNode("div", _hoisted_8, [unref(resolvedUploadText) ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(unref(resolvedUploadText)), 1)) : createCommentVNode("", true), createElementVNode("button", {
 					type: "button",
-					class: normalizeClass(["text-rui-primary underline disabled:no-underline disabled:text-rui-text-disabled", { "first-letter:uppercase": !unref(resolvedUploadText) }]),
+					class: normalizeClass(["text-rui-primary dark:text-rui-primary-lighter underline disabled:no-underline disabled:text-rui-text-disabled", { "first-letter:uppercase": !unref(resolvedUploadText) }]),
 					disabled: __props.disabled,
 					"data-id": "open-picker",
 					onClick: _cache[0] || (_cache[0] = ($event) => openPicker())