@rotki/ui-library 2.22.1 → 2.22.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 (9) hide show
  1. package/dist/components/buttons/button/button-styles.js +1 -1
  2. package/dist/components/buttons/button/button-styles.js.map +1 -1
  3. package/dist/components/buttons/button-group/RuiButtonGroup.js.map +1 -1
  4. package/dist/components/buttons/button-group/RuiButtonGroup.vue_vue_type_script_setup_true_lang.js +1 -1
  5. package/dist/components/buttons/button-group/RuiButtonGroup.vue_vue_type_script_setup_true_lang.js.map +1 -1
  6. package/dist/components/forms/select/RuiMenuSelect.vue_vue_type_script_setup_true_lang.js.map +1 -1
  7. package/dist/style.css +16 -8
  8. package/dist/web-types.json +1 -1
  9. package/package.json +1 -1
package/dist/components/buttons/button/button-styles.js CHANGED
@@ -99,7 +99,7 @@ var buttonStyles = tv({
99
99
  {
100
100
  color: "grey",
101
101
  variant: "outlined",
102
- class: { root: "outline-rui-text" }
102
+ class: { root: "outline-black/[0.23] dark:outline-white/[0.23]" }
103
103
  },
104
104
  {
105
105
  color: "grey",
package/dist/components/buttons/button/button-styles.js.map CHANGED
@@ -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\nexport const buttonStyles = tv({\n slots: {\n root: [\n 'text-sm leading-5 font-medium outline outline-1 outline-transparent outline-offset-[-1px]',\n // `position: relative` is only needed as a positioning context for the\n // absolute-positioned loading spinner; applied via the `loading` variant\n // below. Putting it here would collide with consumers that need to pin\n // the button with `fixed`/`absolute` (cascade order picks the later\n // utility — usually `relative` — and the consumer's `right-*`/`bottom-*`\n // end up as relative offsets, which misplaces FABs).\n 'flex items-center justify-center gap-x-2',\n 'px-4 py-1.5 rounded transition-all',\n // Default (md) icon sizing is driven by a CSS custom property so that\n // RuiIcon's `size` prop (stamped as inline `style=\"--rui-icon-size\"` on\n // the svg) can override it cleanly. Size variants below redefine the\n // property with `!` so they beat this baseline on the same element;\n // inline style on the svg then beats the inherited value when a\n // consumer supplies their own size. See rotki/ui-library#512.\n '[--rui-icon-size:1.125rem]',\n // `disabled` on the element covers two states: actually disabled and\n // loading (RuiButton sets `disabled = disabled || loading`). The\n // color/bg/text overrides for the \"grey disabled\" look live in the\n // `loading: false` compounds below so they skip firing on loading\n // buttons — where we want the variant color to stay visible behind\n // the spinner. Cursor stays here since both states are non-clickable.\n 'disabled:cursor-not-allowed',\n 'focus-visible:!ring-2',\n ].join(' '),\n label: 'inline-block text-nowrap',\n spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n },\n variants: {\n variant: {\n default: {},\n outlined: {},\n text: { root: 'px-2' },\n fab: { root: 'rounded-full py-2' },\n // `leading-[1.125rem]` on the label collapses the 20px line-box (inherited\n // from the root's `leading-5`) down to 18px so it matches the md icon box\n // (`--rui-icon-size: 1.125rem`). Without it, `flex items-center` centers\n // the 20px line-box against the 18px icon box and the baseline-aligned\n // glyphs visually drift above the icon's optical center — most readable\n // in tight list rows. See rotki/ui-library#515.\n list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full leading-[1.125rem]' },\n },\n size: {\n // Each size variant redefines `--rui-icon-size` on the button so the\n // value inherits into RuiIcons in button slots (prepend/append/default)\n // and drives their `width: var(--rui-icon-size, 1.5rem)` class. `!` on\n // the arbitrary property makes the variant beat the md baseline in the\n // base root regardless of CSS source order. A consumer passing `size`\n // on RuiIcon still wins: that path stamps an inline style on the svg\n // element itself, which beats the inherited value from the button.\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:1rem]' },\n 'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n // `xl` targets the 40px input height — the common toolbar case where a\n // RuiButton needs to line up with RuiTextField / RuiMenuSelect. For a\n // 44px jumbo-CTA button (auth screens, empty-state primaries), reach for\n // `2xl` instead.\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-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400 dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600' },\n primary: { root: 'bg-rui-primary hover:bg-rui-primary-darker active:bg-rui-primary-darker/90 text-rui-dark-text ring-rui-primary/40 dark:text-rui-text dark:ring-rui-primary/60' },\n secondary: { root: 'bg-rui-secondary hover:bg-rui-secondary-darker active:bg-rui-secondary-darker/90 text-rui-dark-text ring-rui-secondary/40 dark:text-rui-text dark:ring-rui-secondary/60' },\n error: { root: 'bg-rui-error hover:bg-rui-error-darker active:bg-rui-error-darker/90 text-rui-dark-text ring-rui-error/40 dark:text-rui-text dark:ring-rui-error/60' },\n warning: { root: 'bg-rui-warning hover:bg-rui-warning-darker active:bg-rui-warning-darker/90 text-rui-dark-text ring-rui-warning/40 dark:text-rui-text dark:ring-rui-warning/60' },\n info: { root: 'bg-rui-info hover:bg-rui-info-darker active:bg-rui-info-darker/90 text-rui-dark-text ring-rui-info/40 dark:text-rui-text dark:ring-rui-info/60' },\n success: { root: 'bg-rui-success hover:bg-rui-success-darker active:bg-rui-success-darker/90 text-rui-dark-text ring-rui-success/40 dark:text-rui-text dark:ring-rui-success/60' },\n },\n rounded: {\n true: { root: 'rounded-full' },\n },\n icon: {\n // Padding and icon sizing live in the `icon + size` compound variants\n // below so every size resolves to a height matching its text-button\n // counterpart; this base only contributes the round shape.\n true: { root: 'rounded-full' },\n },\n active: {\n true: {},\n false: {},\n },\n loading: {\n true: { root: 'relative !cursor-progress space-x-0 [&>*:not([data-spinner])]:opacity-0 [&>*:not([data-spinner])]:invisible' },\n false: {},\n },\n hideFocusIndicator: {\n true: { root: 'focus-visible:!ring-0' },\n },\n },\n compoundVariants: [\n // === Disabled (not loading) appearance ===\n // Applied only when `loading: false` so that loading buttons keep their\n // variant color/outline visible behind the spinner; pure disabled buttons\n // fade to the Material disabled palette.\n { loading: false, class: { root: 'disabled:!bg-black/[.12] dark:disabled:!bg-white/[.12] 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:outline-rui-text-disabled' } },\n { loading: false, variant: 'text', 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-grey-50' } },\n { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-black/[.04] active:bg-black/10 dark:bg-transparent dark:active:bg-white/10 dark:hover:bg-white/[.04] dark:text-rui-text' } },\n { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-black/10 dark:bg-white/30' } },\n { color: 'grey', variant: 'outlined', class: { root: 'outline-rui-text' } },\n { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary' } },\n\n // === Context colors — outlined/text variants ===\n // `dark:text-rui-<color>` is required to beat `dark:text-rui-text` set by\n // the base color variant (meant for filled buttons where text sits on a\n // colored bg). Without the override, outlined/text/list buttons in dark\n // mode render white text against a themed outline/underline.\n { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary-lighter/[.04] active:bg-rui-primary-lighter/10 text-rui-primary dark:text-rui-primary' } },\n { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary-lighter/[.04] active:bg-rui-secondary-lighter/10 text-rui-secondary dark:text-rui-secondary' } },\n { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error-lighter/[.04] active:bg-rui-error-lighter/10 text-rui-error dark:text-rui-error' } },\n { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning-lighter/[.04] active:bg-rui-warning-lighter/10 text-rui-warning dark:text-rui-warning' } },\n { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info-lighter/[.04] active:bg-rui-info-lighter/10 text-rui-info dark:text-rui-info' } },\n { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success-lighter/[.04] active:bg-rui-success-lighter/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 // === Context colors — active outlined/text ===\n { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary-lighter/30' } },\n { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary-lighter/30' } },\n { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error-lighter/30' } },\n { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning-lighter/30' } },\n { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info-lighter/30' } },\n { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success-lighter/30' } },\n\n // === Context colors — outlined border ===\n { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\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 { variant: 'list', size: 'sm', class: { root: 'px-3 py-1' } },\n // Icon-only button sizing — every size lands at the same height as the\n // text button of the matching size, with a ~60–70% icon ratio (Material-3\n // style). The `size` rule sizes icons to 12/16/20/22px for text-button\n // prepend/append slots; here icon-only buttons get a larger glyph so they\n // don't look lost in the square. Values are rem-based throughout: p-1 =\n // 0.25rem, p-1.5 = 0.375rem, p-2 = 0.5rem; glyph sizes use rem literals.\n // xs uses an arbitrary 0.1875rem (3px) padding — no Tailwind token hits\n // it cleanly — to keep the 70% icon ratio with a 14px glyph.\n //\n // xs: p-[0.1875rem] + 0.875rem icon = 0.375 + 0.875 = 1.25rem (20px) — 70%\n // sm: p-1 + 1.25rem icon = 0.5 + 1.25 = 1.75rem (28px) — 71%\n // md (default): p-1.5 + 1.25rem icon = 0.75 + 1.25 = 2rem (32px) — 63%\n // lg: p-1.5 + 1.5rem icon = 0.75 + 1.5 = 2.25rem (36px) — 67%\n // xl: p-2 + 1.5rem icon = 1 + 1.5 = 2.5rem (40px) — 60%\n // 2xl: p-2 + 1.75rem icon = 1 + 1.75 = 2.75rem (44px) — 64%\n { icon: true, class: { root: 'p-1.5 ![--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 ],\n compoundSlots: [\n // Dark mode default variant text override for warning/success/info\n { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'default', class: 'dark:text-rui-light-text' },\n // Dark mode active outlined/text override for primary/secondary\n { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary-darker/60 dark:text-rui-primary-lighter' },\n { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary-darker/60 dark:text-rui-secondary-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\nexport const buttonStyles = tv({\n slots: {\n root: [\n 'text-sm leading-5 font-medium outline outline-1 outline-transparent outline-offset-[-1px]',\n // `position: relative` is only needed as a positioning context for the\n // absolute-positioned loading spinner; applied via the `loading` variant\n // below. Putting it here would collide with consumers that need to pin\n // the button with `fixed`/`absolute` (cascade order picks the later\n // utility — usually `relative` — and the consumer's `right-*`/`bottom-*`\n // end up as relative offsets, which misplaces FABs).\n 'flex items-center justify-center gap-x-2',\n 'px-4 py-1.5 rounded transition-all',\n // Default (md) icon sizing is driven by a CSS custom property so that\n // RuiIcon's `size` prop (stamped as inline `style=\"--rui-icon-size\"` on\n // the svg) can override it cleanly. Size variants below redefine the\n // property with `!` so they beat this baseline on the same element;\n // inline style on the svg then beats the inherited value when a\n // consumer supplies their own size. See rotki/ui-library#512.\n '[--rui-icon-size:1.125rem]',\n // `disabled` on the element covers two states: actually disabled and\n // loading (RuiButton sets `disabled = disabled || loading`). The\n // color/bg/text overrides for the \"grey disabled\" look live in the\n // `loading: false` compounds below so they skip firing on loading\n // buttons — where we want the variant color to stay visible behind\n // the spinner. Cursor stays here since both states are non-clickable.\n 'disabled:cursor-not-allowed',\n 'focus-visible:!ring-2',\n ].join(' '),\n label: 'inline-block text-nowrap',\n spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n },\n variants: {\n variant: {\n default: {},\n outlined: {},\n text: { root: 'px-2' },\n fab: { root: 'rounded-full py-2' },\n // `leading-[1.125rem]` on the label collapses the 20px line-box (inherited\n // from the root's `leading-5`) down to 18px so it matches the md icon box\n // (`--rui-icon-size: 1.125rem`). Without it, `flex items-center` centers\n // the 20px line-box against the 18px icon box and the baseline-aligned\n // glyphs visually drift above the icon's optical center — most readable\n // in tight list rows. See rotki/ui-library#515.\n list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full leading-[1.125rem]' },\n },\n size: {\n // Each size variant redefines `--rui-icon-size` on the button so the\n // value inherits into RuiIcons in button slots (prepend/append/default)\n // and drives their `width: var(--rui-icon-size, 1.5rem)` class. `!` on\n // the arbitrary property makes the variant beat the md baseline in the\n // base root regardless of CSS source order. A consumer passing `size`\n // on RuiIcon still wins: that path stamps an inline style on the svg\n // element itself, which beats the inherited value from the button.\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:1rem]' },\n 'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n // `xl` targets the 40px input height — the common toolbar case where a\n // RuiButton needs to line up with RuiTextField / RuiMenuSelect. For a\n // 44px jumbo-CTA button (auth screens, empty-state primaries), reach for\n // `2xl` instead.\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-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400 dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600' },\n primary: { root: 'bg-rui-primary hover:bg-rui-primary-darker active:bg-rui-primary-darker/90 text-rui-dark-text ring-rui-primary/40 dark:text-rui-text dark:ring-rui-primary/60' },\n secondary: { root: 'bg-rui-secondary hover:bg-rui-secondary-darker active:bg-rui-secondary-darker/90 text-rui-dark-text ring-rui-secondary/40 dark:text-rui-text dark:ring-rui-secondary/60' },\n error: { root: 'bg-rui-error hover:bg-rui-error-darker active:bg-rui-error-darker/90 text-rui-dark-text ring-rui-error/40 dark:text-rui-text dark:ring-rui-error/60' },\n warning: { root: 'bg-rui-warning hover:bg-rui-warning-darker active:bg-rui-warning-darker/90 text-rui-dark-text ring-rui-warning/40 dark:text-rui-text dark:ring-rui-warning/60' },\n info: { root: 'bg-rui-info hover:bg-rui-info-darker active:bg-rui-info-darker/90 text-rui-dark-text ring-rui-info/40 dark:text-rui-text dark:ring-rui-info/60' },\n success: { root: 'bg-rui-success hover:bg-rui-success-darker active:bg-rui-success-darker/90 text-rui-dark-text ring-rui-success/40 dark:text-rui-text dark:ring-rui-success/60' },\n },\n rounded: {\n true: { root: 'rounded-full' },\n },\n icon: {\n // Padding and icon sizing live in the `icon + size` compound variants\n // below so every size resolves to a height matching its text-button\n // counterpart; this base only contributes the round shape.\n true: { root: 'rounded-full' },\n },\n active: {\n true: {},\n false: {},\n },\n loading: {\n true: { root: 'relative !cursor-progress space-x-0 [&>*:not([data-spinner])]:opacity-0 [&>*:not([data-spinner])]:invisible' },\n false: {},\n },\n hideFocusIndicator: {\n true: { root: 'focus-visible:!ring-0' },\n },\n },\n compoundVariants: [\n // === Disabled (not loading) appearance ===\n // Applied only when `loading: false` so that loading buttons keep their\n // variant color/outline visible behind the spinner; pure disabled buttons\n // fade to the Material disabled palette.\n { loading: false, class: { root: 'disabled:!bg-black/[.12] dark:disabled:!bg-white/[.12] 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:outline-rui-text-disabled' } },\n { loading: false, variant: 'text', 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-grey-50' } },\n { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-black/[.04] active:bg-black/10 dark:bg-transparent dark:active:bg-white/10 dark:hover:bg-white/[.04] dark:text-rui-text' } },\n { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-black/10 dark:bg-white/30' } },\n // Material draws the colourless outlined button at 23% of the text colour, not at\n // full strength: an outline as dark as the label reads as an error state and shouts\n // next to the context colours, which are already at 50% (see below). The rest of the\n // library uses the same restraint for neutral edges (cards and tables sit at 12%).\n { color: 'grey', variant: 'outlined', class: { root: 'outline-black/[0.23] dark:outline-white/[0.23]' } },\n { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary' } },\n\n // === Context colors — outlined/text variants ===\n // `dark:text-rui-<color>` is required to beat `dark:text-rui-text` set by\n // the base color variant (meant for filled buttons where text sits on a\n // colored bg). Without the override, outlined/text/list buttons in dark\n // mode render white text against a themed outline/underline.\n { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary-lighter/[.04] active:bg-rui-primary-lighter/10 text-rui-primary dark:text-rui-primary' } },\n { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary-lighter/[.04] active:bg-rui-secondary-lighter/10 text-rui-secondary dark:text-rui-secondary' } },\n { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error-lighter/[.04] active:bg-rui-error-lighter/10 text-rui-error dark:text-rui-error' } },\n { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning-lighter/[.04] active:bg-rui-warning-lighter/10 text-rui-warning dark:text-rui-warning' } },\n { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info-lighter/[.04] active:bg-rui-info-lighter/10 text-rui-info dark:text-rui-info' } },\n { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success-lighter/[.04] active:bg-rui-success-lighter/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 // === Context colors — active outlined/text ===\n { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary-lighter/30' } },\n { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary-lighter/30' } },\n { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error-lighter/30' } },\n { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning-lighter/30' } },\n { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info-lighter/30' } },\n { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success-lighter/30' } },\n\n // === Context colors — outlined border ===\n { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\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 { variant: 'list', size: 'sm', class: { root: 'px-3 py-1' } },\n // Icon-only button sizing — every size lands at the same height as the\n // text button of the matching size, with a ~60–70% icon ratio (Material-3\n // style). The `size` rule sizes icons to 12/16/20/22px for text-button\n // prepend/append slots; here icon-only buttons get a larger glyph so they\n // don't look lost in the square. Values are rem-based throughout: p-1 =\n // 0.25rem, p-1.5 = 0.375rem, p-2 = 0.5rem; glyph sizes use rem literals.\n // xs uses an arbitrary 0.1875rem (3px) padding — no Tailwind token hits\n // it cleanly — to keep the 70% icon ratio with a 14px glyph.\n //\n // xs: p-[0.1875rem] + 0.875rem icon = 0.375 + 0.875 = 1.25rem (20px) — 70%\n // sm: p-1 + 1.25rem icon = 0.5 + 1.25 = 1.75rem (28px) — 71%\n // md (default): p-1.5 + 1.25rem icon = 0.75 + 1.25 = 2rem (32px) — 63%\n // lg: p-1.5 + 1.5rem icon = 0.75 + 1.5 = 2.25rem (36px) — 67%\n // xl: p-2 + 1.5rem icon = 1 + 1.5 = 2.5rem (40px) — 60%\n // 2xl: p-2 + 1.75rem icon = 1 + 1.75 = 2.75rem (44px) — 64%\n { icon: true, class: { root: 'p-1.5 ![--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 ],\n compoundSlots: [\n // Dark mode default variant text override for warning/success/info\n { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'default', class: 'dark:text-rui-light-text' },\n // Dark mode active outlined/text override for primary/secondary\n { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary-darker/60 dark:text-rui-primary-lighter' },\n { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary-darker/60 dark:text-rui-secondary-lighter' },\n ],\n defaultVariants: {\n variant: 'default',\n color: 'grey',\n active: false,\n },\n});\n"],"mappings":"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"}
package/dist/components/buttons/button-group/RuiButtonGroup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RuiButtonGroup.js","names":[],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode } from 'vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n vertical?: boolean;\n color?: ContextColorsType;\n activeColor?: ContextColorsType;\n variant?: 'default' | 'outlined' | 'text';\n size?: ButtonSize;\n gap?: 'sm' | 'md' | 'lg';\n required?: boolean;\n disabled?: boolean;\n}\n\ndefineOptions({\n name: 'RuiButtonGroup',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T | T[]>();\n\nconst {\n vertical = false,\n color,\n activeColor,\n variant = 'default',\n size,\n gap,\n required = false,\n disabled = false,\n} = defineProps<Props>();\n\nconst slots = useSlots();\n\nconst buttonGroupStyles = tv({\n slots: {\n root: 'inline-flex rounded divide-x divide-rui-grey-400 outline outline-1 outline-transparent outline-offset-[-1px]',\n button: 'border-0 outline-0 focus:z-[1]',\n },\n variants: {\n vertical: {\n true: {\n root: 'flex-col items-start divide-x-0 divide-y',\n button: 'w-full',\n },\n false: {},\n },\n gap: {\n none: {\n button: '!rounded-none',\n },\n sm: {\n root: 'divide-x-0 divide-y-0 outline-0 gap-2',\n button: 'outline-1',\n },\n md: {\n root: 'divide-x-0 divide-y-0 outline-0 gap-4',\n button: 'outline-1',\n },\n lg: {\n root: 'divide-x-0 divide-y-0 outline-0 gap-6',\n button: 'outline-1',\n },\n },\n variant: {\n default: {},\n outlined: {\n root: 'outline-rui-text divide-rui-text',\n },\n text: {},\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n // First/last child rounding when not separated (! needed to override RuiButton's CSS module border-radius)\n { gap: 'none', vertical: false, class: { button: 'first:!rounded-l last:!rounded-r' } },\n { gap: 'none', vertical: true, class: { button: 'first:!rounded-t last:!rounded-b' } },\n\n // Color dividers (default variant)\n { color: 'primary', class: { root: 'divide-rui-primary-darker' } },\n { color: 'secondary', class: { root: 'divide-rui-secondary-darker' } },\n { color: 'error', class: { root: 'divide-rui-error-darker' } },\n { color: 'warning', class: { root: 'divide-rui-warning-darker' } },\n { color: 'info', class: { root: 'divide-rui-info-darker' } },\n { color: 'success', class: { root: 'divide-rui-success-darker' } },\n\n // Color dividers for outlined/text (overrides darker dividers above)\n { color: 'primary', variant: ['outlined', 'text'], class: { root: 'divide-rui-primary/[0.5]' } },\n { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'divide-rui-secondary/[0.5]' } },\n { color: 'error', variant: ['outlined', 'text'], class: { root: 'divide-rui-error/[0.5]' } },\n { color: 'warning', variant: ['outlined', 'text'], class: { root: 'divide-rui-warning/[0.5]' } },\n { color: 'info', variant: ['outlined', 'text'], class: { root: 'divide-rui-info/[0.5]' } },\n { color: 'success', variant: ['outlined', 'text'], class: { root: 'divide-rui-success/[0.5]' } },\n\n // Color outline for outlined variant\n { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n ],\n defaultVariants: {\n vertical: false,\n gap: 'none',\n variant: 'default',\n },\n});\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n vertical,\n gap: gap ?? 'none',\n variant,\n color,\n}));\n\nconst children = computed<VNode[]>(() => {\n const selectedValue: T | T[] | undefined = get(modelValue);\n const slotContent = slots.default?.() ?? [];\n const resolved = flattenSlotContent(slotContent);\n\n return resolved.map((child, i) => {\n // child props are in kebab-case\n const value = child.props?.['model-value'];\n const active = isActive(value ?? i, selectedValue);\n const resolvedColor = active && activeColor ? activeColor : color;\n\n // Only fall back to the group's size when the child did not set one itself.\n // This lets consumers override size per-button while still benefiting from\n // the group-level default.\n const childSize = child.props?.size;\n\n child.props = {\n ...child.props,\n active,\n ...(disabled && { disabled: true }),\n ...(resolvedColor && { color: resolvedColor }),\n ...(!childSize && size && { size }),\n };\n\n return child;\n });\n});\n\n/**\n * Flattens slot content by unwrapping Fragments (created by v-for).\n * Returns only actual VNode children.\n */\nfunction flattenSlotContent(nodes: VNode[]): VNode[] {\n return nodes.flatMap((node) => {\n if (node.type === Fragment && Array.isArray(node.children) && node.children.length > 0)\n return flattenSlotContent(node.children.filter(isVNode));\n\n return [node];\n });\n}\n\nfunction isActive(id: T, selected?: T | T[]): boolean {\n if (Array.isArray(selected))\n return selected.includes(id);\n\n return selected === id;\n}\n\nfunction onClick(id: T): void {\n const selected = get(modelValue);\n\n if (Array.isArray(selected)) {\n const index = selected.indexOf(id);\n if (index >= 0) {\n if (required && selected.length === 1)\n return;\n\n set(modelValue, selected.filter((_, i) => i !== index));\n }\n else {\n set(modelValue, [...selected, id]);\n }\n }\n else if (required) {\n set(modelValue, id);\n }\n else {\n set(modelValue, isActive(id, selected) ? undefined : id);\n }\n}\n</script>\n\n<template>\n <div\n :class=\"ui.root()\"\n v-bind=\"$attrs\"\n >\n <Component\n :is=\"child\"\n v-for=\"(child, i) in children\"\n :key=\"i\"\n :class=\"ui.button()\"\n :variant=\"variant\"\n @update:model-value=\"onClick($event ?? i)\"\n />\n </div>\n</template>\n"],"mappings":""}
1
+ {"version":3,"file":"RuiButtonGroup.js","names":[],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode } from 'vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n vertical?: boolean;\n color?: ContextColorsType;\n activeColor?: ContextColorsType;\n variant?: 'default' | 'outlined' | 'text';\n size?: ButtonSize;\n gap?: 'sm' | 'md' | 'lg';\n required?: boolean;\n disabled?: boolean;\n}\n\ndefineOptions({\n name: 'RuiButtonGroup',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T | T[]>();\n\nconst {\n vertical = false,\n color,\n activeColor,\n variant = 'default',\n size,\n gap,\n required = false,\n disabled = false,\n} = defineProps<Props>();\n\nconst slots = useSlots();\n\nconst buttonGroupStyles = tv({\n slots: {\n root: 'inline-flex rounded divide-x divide-rui-grey-400 outline outline-1 outline-transparent outline-offset-[-1px]',\n button: 'border-0 outline-0 focus:z-[1]',\n },\n variants: {\n vertical: {\n true: {\n root: 'flex-col items-start divide-x-0 divide-y',\n button: 'w-full',\n },\n false: {},\n },\n gap: {\n none: {\n button: '!rounded-none',\n },\n sm: {\n root: 'divide-x-0 divide-y-0 outline-0 gap-2',\n button: 'outline-1',\n },\n md: {\n root: 'divide-x-0 divide-y-0 outline-0 gap-4',\n button: 'outline-1',\n },\n lg: {\n root: 'divide-x-0 divide-y-0 outline-0 gap-6',\n button: 'outline-1',\n },\n },\n variant: {\n default: {},\n outlined: {\n // Matches RuiButton's colourless outlined treatment: a neutral edge at Material's\n // 23%, rather than an outline and dividers as dark as the labels themselves.\n root: 'outline-black/[0.23] divide-black/[0.23] dark:outline-white/[0.23] dark:divide-white/[0.23]',\n },\n text: {},\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n // First/last child rounding when not separated (! needed to override RuiButton's CSS module border-radius)\n { gap: 'none', vertical: false, class: { button: 'first:!rounded-l last:!rounded-r' } },\n { gap: 'none', vertical: true, class: { button: 'first:!rounded-t last:!rounded-b' } },\n\n // Color dividers (default variant)\n { color: 'primary', class: { root: 'divide-rui-primary-darker' } },\n { color: 'secondary', class: { root: 'divide-rui-secondary-darker' } },\n { color: 'error', class: { root: 'divide-rui-error-darker' } },\n { color: 'warning', class: { root: 'divide-rui-warning-darker' } },\n { color: 'info', class: { root: 'divide-rui-info-darker' } },\n { color: 'success', class: { root: 'divide-rui-success-darker' } },\n\n // Color dividers for outlined/text (overrides darker dividers above)\n { color: 'primary', variant: ['outlined', 'text'], class: { root: 'divide-rui-primary/[0.5]' } },\n { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'divide-rui-secondary/[0.5]' } },\n { color: 'error', variant: ['outlined', 'text'], class: { root: 'divide-rui-error/[0.5]' } },\n { color: 'warning', variant: ['outlined', 'text'], class: { root: 'divide-rui-warning/[0.5]' } },\n { color: 'info', variant: ['outlined', 'text'], class: { root: 'divide-rui-info/[0.5]' } },\n { color: 'success', variant: ['outlined', 'text'], class: { root: 'divide-rui-success/[0.5]' } },\n\n // Color outline for outlined variant\n { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n ],\n defaultVariants: {\n vertical: false,\n gap: 'none',\n variant: 'default',\n },\n});\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n vertical,\n gap: gap ?? 'none',\n variant,\n color,\n}));\n\nconst children = computed<VNode[]>(() => {\n const selectedValue: T | T[] | undefined = get(modelValue);\n const slotContent = slots.default?.() ?? [];\n const resolved = flattenSlotContent(slotContent);\n\n return resolved.map((child, i) => {\n // child props are in kebab-case\n const value = child.props?.['model-value'];\n const active = isActive(value ?? i, selectedValue);\n const resolvedColor = active && activeColor ? activeColor : color;\n\n // Only fall back to the group's size when the child did not set one itself.\n // This lets consumers override size per-button while still benefiting from\n // the group-level default.\n const childSize = child.props?.size;\n\n child.props = {\n ...child.props,\n active,\n ...(disabled && { disabled: true }),\n ...(resolvedColor && { color: resolvedColor }),\n ...(!childSize && size && { size }),\n };\n\n return child;\n });\n});\n\n/**\n * Flattens slot content by unwrapping Fragments (created by v-for).\n * Returns only actual VNode children.\n */\nfunction flattenSlotContent(nodes: VNode[]): VNode[] {\n return nodes.flatMap((node) => {\n if (node.type === Fragment && Array.isArray(node.children) && node.children.length > 0)\n return flattenSlotContent(node.children.filter(isVNode));\n\n return [node];\n });\n}\n\nfunction isActive(id: T, selected?: T | T[]): boolean {\n if (Array.isArray(selected))\n return selected.includes(id);\n\n return selected === id;\n}\n\nfunction onClick(id: T): void {\n const selected = get(modelValue);\n\n if (Array.isArray(selected)) {\n const index = selected.indexOf(id);\n if (index >= 0) {\n if (required && selected.length === 1)\n return;\n\n set(modelValue, selected.filter((_, i) => i !== index));\n }\n else {\n set(modelValue, [...selected, id]);\n }\n }\n else if (required) {\n set(modelValue, id);\n }\n else {\n set(modelValue, isActive(id, selected) ? undefined : id);\n }\n}\n</script>\n\n<template>\n <div\n :class=\"ui.root()\"\n v-bind=\"$attrs\"\n >\n <Component\n :is=\"child\"\n v-for=\"(child, i) in children\"\n :key=\"i\"\n :class=\"ui.button()\"\n :variant=\"variant\"\n @update:model-value=\"onClick($event ?? i)\"\n />\n </div>\n</template>\n"],"mappings":""}
package/dist/components/buttons/button-group/RuiButtonGroup.vue_vue_type_script_setup_true_lang.js CHANGED
@@ -62,7 +62,7 @@ var RuiButtonGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
62
62
  },
63
63
  variant: {
64
64
  default: {},
65
- outlined: { root: "outline-rui-text divide-rui-text" },
65
+ outlined: { root: "outline-black/[0.23] divide-black/[0.23] dark:outline-white/[0.23] dark:divide-white/[0.23]" },
66
66
  text: {}
67
67
  },
68
68
  color: {
package/dist/components/buttons/button-group/RuiButtonGroup.vue_vue_type_script_setup_true_lang.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RuiButtonGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode } from 'vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n vertical?: boolean;\n color?: ContextColorsType;\n activeColor?: ContextColorsType;\n variant?: 'default' | 'outlined' | 'text';\n size?: ButtonSize;\n gap?: 'sm' | 'md' | 'lg';\n required?: boolean;\n disabled?: boolean;\n}\n\ndefineOptions({\n name: 'RuiButtonGroup',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T | T[]>();\n\nconst {\n vertical = false,\n color,\n activeColor,\n variant = 'default',\n size,\n gap,\n required = false,\n disabled = false,\n} = defineProps<Props>();\n\nconst slots = useSlots();\n\nconst buttonGroupStyles = tv({\n slots: {\n root: 'inline-flex rounded divide-x divide-rui-grey-400 outline outline-1 outline-transparent outline-offset-[-1px]',\n button: 'border-0 outline-0 focus:z-[1]',\n },\n variants: {\n vertical: {\n true: {\n root: 'flex-col items-start divide-x-0 divide-y',\n button: 'w-full',\n },\n false: {},\n },\n gap: {\n none: {\n button: '!rounded-none',\n },\n sm: {\n root: 'divide-x-0 divide-y-0 outline-0 gap-2',\n button: 'outline-1',\n },\n md: {\n root: 'divide-x-0 divide-y-0 outline-0 gap-4',\n button: 'outline-1',\n },\n lg: {\n root: 'divide-x-0 divide-y-0 outline-0 gap-6',\n button: 'outline-1',\n },\n },\n variant: {\n default: {},\n outlined: {\n root: 'outline-rui-text divide-rui-text',\n },\n text: {},\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n // First/last child rounding when not separated (! needed to override RuiButton's CSS module border-radius)\n { gap: 'none', vertical: false, class: { button: 'first:!rounded-l last:!rounded-r' } },\n { gap: 'none', vertical: true, class: { button: 'first:!rounded-t last:!rounded-b' } },\n\n // Color dividers (default variant)\n { color: 'primary', class: { root: 'divide-rui-primary-darker' } },\n { color: 'secondary', class: { root: 'divide-rui-secondary-darker' } },\n { color: 'error', class: { root: 'divide-rui-error-darker' } },\n { color: 'warning', class: { root: 'divide-rui-warning-darker' } },\n { color: 'info', class: { root: 'divide-rui-info-darker' } },\n { color: 'success', class: { root: 'divide-rui-success-darker' } },\n\n // Color dividers for outlined/text (overrides darker dividers above)\n { color: 'primary', variant: ['outlined', 'text'], class: { root: 'divide-rui-primary/[0.5]' } },\n { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'divide-rui-secondary/[0.5]' } },\n { color: 'error', variant: ['outlined', 'text'], class: { root: 'divide-rui-error/[0.5]' } },\n { color: 'warning', variant: ['outlined', 'text'], class: { root: 'divide-rui-warning/[0.5]' } },\n { color: 'info', variant: ['outlined', 'text'], class: { root: 'divide-rui-info/[0.5]' } },\n { color: 'success', variant: ['outlined', 'text'], class: { root: 'divide-rui-success/[0.5]' } },\n\n // Color outline for outlined variant\n { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n ],\n defaultVariants: {\n vertical: false,\n gap: 'none',\n variant: 'default',\n },\n});\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n vertical,\n gap: gap ?? 'none',\n variant,\n color,\n}));\n\nconst children = computed<VNode[]>(() => {\n const selectedValue: T | T[] | undefined = get(modelValue);\n const slotContent = slots.default?.() ?? [];\n const resolved = flattenSlotContent(slotContent);\n\n return resolved.map((child, i) => {\n // child props are in kebab-case\n const value = child.props?.['model-value'];\n const active = isActive(value ?? i, selectedValue);\n const resolvedColor = active && activeColor ? activeColor : color;\n\n // Only fall back to the group's size when the child did not set one itself.\n // This lets consumers override size per-button while still benefiting from\n // the group-level default.\n const childSize = child.props?.size;\n\n child.props = {\n ...child.props,\n active,\n ...(disabled && { disabled: true }),\n ...(resolvedColor && { color: resolvedColor }),\n ...(!childSize && size && { size }),\n };\n\n return child;\n });\n});\n\n/**\n * Flattens slot content by unwrapping Fragments (created by v-for).\n * Returns only actual VNode children.\n */\nfunction flattenSlotContent(nodes: VNode[]): VNode[] {\n return nodes.flatMap((node) => {\n if (node.type === Fragment && Array.isArray(node.children) && node.children.length > 0)\n return flattenSlotContent(node.children.filter(isVNode));\n\n return [node];\n });\n}\n\nfunction isActive(id: T, selected?: T | T[]): boolean {\n if (Array.isArray(selected))\n return selected.includes(id);\n\n return selected === id;\n}\n\nfunction onClick(id: T): void {\n const selected = get(modelValue);\n\n if (Array.isArray(selected)) {\n const index = selected.indexOf(id);\n if (index >= 0) {\n if (required && selected.length === 1)\n return;\n\n set(modelValue, selected.filter((_, i) => i !== index));\n }\n else {\n set(modelValue, [...selected, id]);\n }\n }\n else if (required) {\n set(modelValue, id);\n }\n else {\n set(modelValue, isActive(id, selected) ? undefined : id);\n }\n}\n</script>\n\n<template>\n <div\n :class=\"ui.root()\"\n v-bind=\"$attrs\"\n >\n <Component\n :is=\"child\"\n v-for=\"(child, i) in children\"\n :key=\"i\"\n :class=\"ui.button()\"\n :variant=\"variant\"\n @update:model-value=\"onClick($event ?? i)\"\n />\n </div>\n</template>\n"],"mappings":"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"}
1
+ {"version":3,"file":"RuiButtonGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode } from 'vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n vertical?: boolean;\n color?: ContextColorsType;\n activeColor?: ContextColorsType;\n variant?: 'default' | 'outlined' | 'text';\n size?: ButtonSize;\n gap?: 'sm' | 'md' | 'lg';\n required?: boolean;\n disabled?: boolean;\n}\n\ndefineOptions({\n name: 'RuiButtonGroup',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T | T[]>();\n\nconst {\n vertical = false,\n color,\n activeColor,\n variant = 'default',\n size,\n gap,\n required = false,\n disabled = false,\n} = defineProps<Props>();\n\nconst slots = useSlots();\n\nconst buttonGroupStyles = tv({\n slots: {\n root: 'inline-flex rounded divide-x divide-rui-grey-400 outline outline-1 outline-transparent outline-offset-[-1px]',\n button: 'border-0 outline-0 focus:z-[1]',\n },\n variants: {\n vertical: {\n true: {\n root: 'flex-col items-start divide-x-0 divide-y',\n button: 'w-full',\n },\n false: {},\n },\n gap: {\n none: {\n button: '!rounded-none',\n },\n sm: {\n root: 'divide-x-0 divide-y-0 outline-0 gap-2',\n button: 'outline-1',\n },\n md: {\n root: 'divide-x-0 divide-y-0 outline-0 gap-4',\n button: 'outline-1',\n },\n lg: {\n root: 'divide-x-0 divide-y-0 outline-0 gap-6',\n button: 'outline-1',\n },\n },\n variant: {\n default: {},\n outlined: {\n // Matches RuiButton's colourless outlined treatment: a neutral edge at Material's\n // 23%, rather than an outline and dividers as dark as the labels themselves.\n root: 'outline-black/[0.23] divide-black/[0.23] dark:outline-white/[0.23] dark:divide-white/[0.23]',\n },\n text: {},\n },\n color: {\n primary: {},\n secondary: {},\n error: {},\n warning: {},\n info: {},\n success: {},\n },\n },\n compoundVariants: [\n // First/last child rounding when not separated (! needed to override RuiButton's CSS module border-radius)\n { gap: 'none', vertical: false, class: { button: 'first:!rounded-l last:!rounded-r' } },\n { gap: 'none', vertical: true, class: { button: 'first:!rounded-t last:!rounded-b' } },\n\n // Color dividers (default variant)\n { color: 'primary', class: { root: 'divide-rui-primary-darker' } },\n { color: 'secondary', class: { root: 'divide-rui-secondary-darker' } },\n { color: 'error', class: { root: 'divide-rui-error-darker' } },\n { color: 'warning', class: { root: 'divide-rui-warning-darker' } },\n { color: 'info', class: { root: 'divide-rui-info-darker' } },\n { color: 'success', class: { root: 'divide-rui-success-darker' } },\n\n // Color dividers for outlined/text (overrides darker dividers above)\n { color: 'primary', variant: ['outlined', 'text'], class: { root: 'divide-rui-primary/[0.5]' } },\n { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'divide-rui-secondary/[0.5]' } },\n { color: 'error', variant: ['outlined', 'text'], class: { root: 'divide-rui-error/[0.5]' } },\n { color: 'warning', variant: ['outlined', 'text'], class: { root: 'divide-rui-warning/[0.5]' } },\n { color: 'info', variant: ['outlined', 'text'], class: { root: 'divide-rui-info/[0.5]' } },\n { color: 'success', variant: ['outlined', 'text'], class: { root: 'divide-rui-success/[0.5]' } },\n\n // Color outline for outlined variant\n { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n ],\n defaultVariants: {\n vertical: false,\n gap: 'none',\n variant: 'default',\n },\n});\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n vertical,\n gap: gap ?? 'none',\n variant,\n color,\n}));\n\nconst children = computed<VNode[]>(() => {\n const selectedValue: T | T[] | undefined = get(modelValue);\n const slotContent = slots.default?.() ?? [];\n const resolved = flattenSlotContent(slotContent);\n\n return resolved.map((child, i) => {\n // child props are in kebab-case\n const value = child.props?.['model-value'];\n const active = isActive(value ?? i, selectedValue);\n const resolvedColor = active && activeColor ? activeColor : color;\n\n // Only fall back to the group's size when the child did not set one itself.\n // This lets consumers override size per-button while still benefiting from\n // the group-level default.\n const childSize = child.props?.size;\n\n child.props = {\n ...child.props,\n active,\n ...(disabled && { disabled: true }),\n ...(resolvedColor && { color: resolvedColor }),\n ...(!childSize && size && { size }),\n };\n\n return child;\n });\n});\n\n/**\n * Flattens slot content by unwrapping Fragments (created by v-for).\n * Returns only actual VNode children.\n */\nfunction flattenSlotContent(nodes: VNode[]): VNode[] {\n return nodes.flatMap((node) => {\n if (node.type === Fragment && Array.isArray(node.children) && node.children.length > 0)\n return flattenSlotContent(node.children.filter(isVNode));\n\n return [node];\n });\n}\n\nfunction isActive(id: T, selected?: T | T[]): boolean {\n if (Array.isArray(selected))\n return selected.includes(id);\n\n return selected === id;\n}\n\nfunction onClick(id: T): void {\n const selected = get(modelValue);\n\n if (Array.isArray(selected)) {\n const index = selected.indexOf(id);\n if (index >= 0) {\n if (required && selected.length === 1)\n return;\n\n set(modelValue, selected.filter((_, i) => i !== index));\n }\n else {\n set(modelValue, [...selected, id]);\n }\n }\n else if (required) {\n set(modelValue, id);\n }\n else {\n set(modelValue, isActive(id, selected) ? undefined : id);\n }\n}\n</script>\n\n<template>\n <div\n :class=\"ui.root()\"\n v-bind=\"$attrs\"\n >\n <Component\n :is=\"child\"\n v-for=\"(child, i) in children\"\n :key=\"i\"\n :class=\"ui.button()\"\n :variant=\"variant\"\n @update:model-value=\"onClick($event ?? i)\"\n />\n </div>\n</template>\n"],"mappings":"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"}
package/dist/components/forms/select/RuiMenuSelect.vue_vue_type_script_setup_true_lang.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RuiMenuSelect.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/select/RuiMenuSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { menuSelectStyles, type MenuSelectVariant } from '@/components/forms/select/menu-select-styles';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu, { type MenuProps } from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { type KeyOfType, useDropdownMenu } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiMenuSelectClassNames {\n root?: VueClassValue;\n label?: VueClassValue;\n menu?: VueClassValue;\n option?: VueClassValue;\n}\n\nexport interface MenuSelectProps<TValue, TItem> {\n options: TItem[];\n keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n textAttr?: keyof TItem;\n disabled?: boolean;\n loading?: boolean;\n readOnly?: boolean;\n dense?: boolean;\n clearable?: boolean;\n label?: string;\n menuOptions?: MenuProps;\n classNames?: RuiMenuSelectClassNames;\n /** @deprecated Use `classNames.label` instead */\n labelClass?: string;\n /** @deprecated Use `classNames.menu` instead */\n menuClass?: string;\n /** @deprecated Use `classNames.option` instead */\n optionClass?: string;\n prependWidth?: number;\n appendWidth?: number;\n itemHeight?: number;\n variant?: MenuSelectVariant;\n hint?: string;\n errorMessages?: string | string[];\n successMessages?: string | string[];\n hideDetails?: boolean;\n autoSelectFirst?: boolean;\n hideNoData?: boolean;\n noDataText?: string;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiMenuSelect',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue | undefined>({ required: true });\n\nconst {\n options,\n disabled = false,\n loading = false,\n readOnly = false,\n dense = false,\n clearable = false,\n hideDetails = false,\n label = 'Select',\n menuOptions,\n classNames,\n labelClass,\n menuClass,\n variant = 'default',\n hint,\n keyAttr,\n textAttr,\n itemHeight,\n errorMessages = [],\n successMessages = [],\n autoSelectFirst = false,\n hideNoData = false,\n noDataText = 'No data available',\n required = false,\n} = defineProps<MenuSelectProps<TValue, TItem>>();\n\ndefineSlots<{\n 'activator'?: (props: {\n disabled: boolean;\n value: TItem | undefined;\n variant: string;\n readOnly: boolean;\n attrs: Record<string, unknown>;\n open: boolean;\n hasError: boolean;\n hasSuccess: boolean;\n }) => any;\n 'activator.label'?: (props: { value: TItem | undefined }) => any;\n 'selection.prepend'?: (props: { item: TItem }) => any;\n 'selection'?: (props: { item: TItem }) => any;\n 'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'no-data'?: () => any;\n}>();\n\nconst menuRef = useTemplateRef<HTMLDivElement>('menuRef');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst { focused } = useFocus(activator);\nconst isHovered = ref<boolean>(false);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst value = computed<TItem | undefined>({\n get: () => {\n const value = get(modelValue);\n if (keyAttr)\n return options.find(option => option[keyAttr] === value);\n return value as unknown as TItem;\n },\n set: (selected?: TItem) => {\n const selection = keyAttr && selected ? selected[keyAttr] : selected;\n set(modelValue, selection as TValue);\n },\n});\n\nfunction setValue(val: TItem): void {\n set(value, val);\n set(focused, true);\n}\n\nconst {\n containerProps,\n wrapperProps,\n renderedData,\n isOpen,\n menuWidth,\n getText,\n getIdentifier,\n isActiveItem,\n highlightedIndex,\n moveHighlight,\n applyHighlighted,\n valueKey,\n} = useDropdownMenu<TValue, TItem>({\n itemHeight: itemHeight ?? (dense ? 30 : 48),\n keyAttr,\n textAttr,\n options: () => options,\n dense: () => dense,\n value,\n menuRef,\n disabled: () => disabled,\n autoSelectFirst,\n setValue,\n});\n\nconst outlined = computed<boolean>(() => variant === 'outlined');\nconst float = computed<boolean>(() => (get(isOpen) || !!get(value)) && get(outlined));\n\nconst legendText = computed<string>(() => {\n if (!get(float) || !label)\n return '';\n return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof menuSelectStyles>>(() => menuSelectStyles({\n filled: variant === 'filled',\n outlined: get(outlined),\n float: get(float),\n opened: get(isOpen),\n hovered: get(isHovered),\n dense,\n disabled,\n readonly: readOnly,\n hasError: get(hasError),\n hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = menuSelectStyles({}).highlighted();\n\nfunction clear(): void {\n set(modelValue, undefined);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n placement: Placement.bottomStart,\n ...menuOptions?.options,\n}));\n</script>\n\n<template>\n <RuiMenu\n v-model=\"isOpen\"\n v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n :options=\"menuFloatingOptions\"\n :close-on-content-click=\"true\"\n :full-width=\"true\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n :dense=\"dense\"\n :show-details=\"!hideDetails\"\n :disabled=\"disabled\"\n disable-auto-focus\n >\n <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n <slot\n name=\"activator\"\n v-bind=\"{ disabled, value, variant, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n >\n <button\n ref=\"activator\"\n :disabled=\"disabled\"\n :aria-disabled=\"disabled\"\n :aria-expanded=\"isOpen\"\n :aria-readonly=\"readOnly || undefined\"\n :aria-required=\"required || undefined\"\n :aria-busy=\"loading || undefined\"\n type=\"button\"\n :tabindex=\"disabled || readOnly ? -1 : 0\"\n :class=\"ui.activator({ class: cn(classNames?.label) ?? labelClass })\"\n v-bind=\"{\n ...getNonRootAttrs($attrs),\n ...(readOnly ? {} : attrs),\n }\"\n data-id=\"activator\"\n :aria-invalid=\"hasError\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n @keydown.up.prevent=\"moveHighlight(true)\"\n @keydown.down.prevent=\"moveHighlight(false)\"\n @keydown.enter.prevent=\"applyHighlighted()\"\n @keydown.space.prevent=\"applyHighlighted()\"\n @keydown.home.prevent=\"highlightedIndex = 0\"\n @keydown.end.prevent=\"highlightedIndex = options.length - 1\"\n >\n <span\n v-if=\"outlined || !value\"\n :class=\"[\n ui.label(),\n { 'pr-2': !value && !open && outlined },\n ]\"\n >\n <slot\n name=\"activator.label\"\n v-bind=\"{ value }\"\n >\n {{ label }}\n </slot>\n <span\n v-if=\"required\"\n :class=\"ui.required()\"\n >\n ﹡\n </span>\n </span>\n <span\n v-if=\"value\"\n :class=\"ui.value()\"\n >\n <slot\n name=\"selection.prepend\"\n v-bind=\"{ item: value }\"\n />\n <slot\n name=\"selection\"\n v-bind=\"{ item: value }\"\n >\n {{ getText(value) }}\n </slot>\n </span>\n\n <span\n v-if=\"clearable && value && !disabled\"\n data-id=\"clear\"\n :class=\"[ui.clear(), focused && '!visible']\"\n @click.stop.prevent=\"clear()\"\n >\n <RuiIcon\n color=\"error\"\n name=\"lu-x\"\n size=\"18\"\n />\n </span>\n\n <span :class=\"ui.iconWrapper()\">\n <RuiIcon\n :class=\"ui.icon()\"\n :size=\"dense ? 16 : 24\"\n name=\"lu-chevron-down\"\n />\n </span>\n\n <RuiProgress\n v-if=\"loading\"\n :class=\"ui.progress()\"\n color=\"primary\"\n thickness=\"3\"\n variant=\"indeterminate\"\n />\n </button>\n <fieldset\n v-if=\"outlined\"\n :class=\"ui.fieldset()\"\n >\n <legend :class=\"ui.legend()\">\n {{ legendText }}\n </legend>\n </fieldset>\n </slot>\n <input\n :value=\"valueKey\"\n class=\"hidden\"\n type=\"hidden\"\n />\n </template>\n <template #default=\"{ width }\">\n <div\n v-if=\"options.length > 0\"\n :ref=\"containerProps.ref\"\n :class=\"ui.menu({ class: cn(classNames?.menu) ?? menuClass })\"\n :style=\"[containerProps.style, { width: `${width}px`, minWidth: menuWidth }]\"\n @scroll=\"containerProps.onScroll\"\n @keydown.up.prevent=\"moveHighlight(true)\"\n @keydown.down.prevent=\"moveHighlight(false)\"\n >\n <div\n v-bind=\"wrapperProps\"\n ref=\"menuRef\"\n >\n <RuiButton\n v-for=\"{ item, _index } in renderedData\"\n :key=\"getIdentifier(item)\"\n :active=\"isActiveItem(item)\"\n :aria-selected=\"isActiveItem(item)\"\n :size=\"dense ? 'sm' : undefined\"\n variant=\"list\"\n :data-highlighted=\"highlightedIndex === _index\"\n :class=\"{\n [highlightedClass]: !isActiveItem(item) && highlightedIndex === _index,\n }\"\n @click=\"setValue(item)\"\n >\n <template #prepend>\n <slot\n name=\"item.prepend\"\n v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n />\n </template>\n <slot\n name=\"item\"\n v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n >\n {{ getText(item) }}\n </slot>\n <template #append>\n <slot\n name=\"item.append\"\n v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n />\n </template>\n </RuiButton>\n </div>\n </div>\n\n <div\n v-else-if=\"!hideNoData\"\n data-id=\"no-data\"\n :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n :class=\"classNames?.menu ?? menuClass\"\n >\n <slot name=\"no-data\">\n <div class=\"p-4\">\n {{ noDataText }}\n </div>\n </slot>\n </div>\n </template>\n </RuiMenu>\n</template>\n"],"mappings":"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"}
1
+ {"version":3,"file":"RuiMenuSelect.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/forms/select/RuiMenuSelect.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { menuSelectStyles, type MenuSelectVariant } from '@/components/forms/select/menu-select-styles';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu, { type MenuProps } from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { type KeyOfType, useDropdownMenu } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiMenuSelectClassNames {\n root?: VueClassValue;\n label?: VueClassValue;\n menu?: VueClassValue;\n option?: VueClassValue;\n}\n\nexport interface MenuSelectProps<TValue, TItem> {\n options: TItem[];\n keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n textAttr?: keyof TItem;\n disabled?: boolean;\n loading?: boolean;\n readOnly?: boolean;\n dense?: boolean;\n clearable?: boolean;\n label?: string;\n menuOptions?: MenuProps;\n classNames?: RuiMenuSelectClassNames;\n /** @deprecated Use `classNames.label` instead */\n labelClass?: string;\n /** @deprecated Use `classNames.menu` instead */\n menuClass?: string;\n /** @deprecated Use `classNames.option` instead */\n optionClass?: string;\n prependWidth?: number;\n appendWidth?: number;\n itemHeight?: number;\n variant?: MenuSelectVariant;\n hint?: string;\n errorMessages?: string | string[];\n successMessages?: string | string[];\n hideDetails?: boolean;\n autoSelectFirst?: boolean;\n hideNoData?: boolean;\n noDataText?: string;\n required?: boolean;\n}\n\ndefineOptions({\n name: 'RuiMenuSelect',\n inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue | undefined>({ required: true });\n\nconst {\n options,\n disabled = false,\n loading = false,\n readOnly = false,\n dense = false,\n clearable = false,\n hideDetails = false,\n label = 'Select',\n menuOptions,\n classNames,\n labelClass,\n menuClass,\n variant = 'default',\n hint,\n keyAttr,\n textAttr,\n itemHeight,\n errorMessages = [],\n successMessages = [],\n autoSelectFirst = false,\n hideNoData = false,\n noDataText = 'No data available',\n required = false,\n} = defineProps<MenuSelectProps<TValue, TItem>>();\n\ndefineSlots<{\n 'activator'?: (props: {\n disabled: boolean;\n value: TItem | undefined;\n variant: string;\n readOnly: boolean;\n attrs: Record<string, unknown>;\n open: boolean;\n hasError: boolean;\n hasSuccess: boolean;\n }) => any;\n 'activator.label'?: (props: { value: TItem | undefined }) => any;\n 'selection.prepend'?: (props: { item: TItem }) => any;\n 'selection'?: (props: { item: TItem }) => any;\n 'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n 'no-data'?: () => any;\n}>();\n\nconst menuRef = useTemplateRef<HTMLDivElement>('menuRef');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst { focused } = useFocus(activator);\nconst isHovered = ref<boolean>(false);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n () => errorMessages,\n () => successMessages,\n);\n\nconst value = computed<TItem | undefined>({\n get: () => {\n const value = get(modelValue);\n if (keyAttr)\n return options.find(option => option[keyAttr] === value);\n return value as unknown as TItem;\n },\n set: (selected?: TItem) => {\n const selection = keyAttr && selected ? selected[keyAttr] : selected;\n set(modelValue, selection as TValue);\n },\n});\n\nfunction setValue(val: TItem): void {\n set(value, val);\n set(focused, true);\n}\n\nconst {\n containerProps,\n wrapperProps,\n renderedData,\n isOpen,\n menuWidth,\n getText,\n getIdentifier,\n isActiveItem,\n highlightedIndex,\n moveHighlight,\n applyHighlighted,\n valueKey,\n} = useDropdownMenu<TValue, TItem>({\n itemHeight: itemHeight ?? (dense ? 30 : 48),\n keyAttr,\n textAttr,\n options: () => options,\n dense: () => dense,\n value,\n menuRef,\n disabled: () => disabled,\n autoSelectFirst,\n setValue,\n});\n\nconst outlined = computed<boolean>(() => variant === 'outlined');\nconst float = computed<boolean>(() => (get(isOpen) || !!get(value)) && get(outlined));\n\nconst legendText = computed<string>(() => {\n if (!get(float) || !label)\n return '';\n return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof menuSelectStyles>>(() => menuSelectStyles({\n filled: variant === 'filled',\n outlined: get(outlined),\n float: get(float),\n opened: get(isOpen),\n hovered: get(isHovered),\n dense,\n disabled,\n readonly: readOnly,\n hasError: get(hasError),\n hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = menuSelectStyles({}).highlighted();\n\nfunction clear(): void {\n set(modelValue, undefined);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n placement: Placement.bottomStart,\n ...menuOptions?.options,\n}));\n</script>\n\n<template>\n <RuiMenu\n v-model=\"isOpen\"\n v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n :options=\"menuFloatingOptions\"\n :close-on-content-click=\"true\"\n :full-width=\"true\"\n :error-messages=\"errorMessages\"\n :success-messages=\"successMessages\"\n :hint=\"hint\"\n :dense=\"dense\"\n :show-details=\"!hideDetails\"\n :disabled=\"disabled\"\n disable-auto-focus\n >\n <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n <slot\n name=\"activator\"\n v-bind=\"{ disabled, value, variant, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n >\n <button\n ref=\"activator\"\n :disabled=\"disabled\"\n :aria-disabled=\"disabled\"\n :aria-expanded=\"isOpen\"\n :aria-readonly=\"readOnly || undefined\"\n :aria-required=\"required || undefined\"\n :aria-busy=\"loading || undefined\"\n type=\"button\"\n :tabindex=\"disabled || readOnly ? -1 : 0\"\n :class=\"ui.activator({ class: cn(classNames?.label) ?? labelClass })\"\n v-bind=\"{\n ...getNonRootAttrs($attrs),\n ...(readOnly ? {} : attrs),\n }\"\n data-id=\"activator\"\n :aria-invalid=\"hasError\"\n @mouseenter=\"isHovered = true\"\n @mouseleave=\"isHovered = false\"\n @keydown.up.prevent=\"moveHighlight(true)\"\n @keydown.down.prevent=\"moveHighlight(false)\"\n @keydown.enter.prevent=\"applyHighlighted()\"\n @keydown.space.prevent=\"applyHighlighted()\"\n @keydown.home.prevent=\"highlightedIndex = 0\"\n @keydown.end.prevent=\"highlightedIndex = options.length - 1\"\n >\n <span\n v-if=\"outlined || !value\"\n :class=\"[\n ui.label(),\n { 'pr-2': !value && !open && outlined },\n ]\"\n >\n <slot\n name=\"activator.label\"\n v-bind=\"{ value }\"\n >\n {{ label }}\n </slot>\n <span\n v-if=\"required\"\n :class=\"ui.required()\"\n >\n ﹡\n </span>\n </span>\n <span\n v-if=\"value\"\n :class=\"ui.value()\"\n >\n <slot\n name=\"selection.prepend\"\n v-bind=\"{ item: value }\"\n />\n <slot\n name=\"selection\"\n v-bind=\"{ item: value }\"\n >\n {{ getText(value) }}\n </slot>\n </span>\n\n <span\n v-if=\"clearable && value && !disabled\"\n data-id=\"clear\"\n :class=\"[ui.clear(), focused && '!visible']\"\n @click.stop.prevent=\"clear()\"\n >\n <RuiIcon\n color=\"error\"\n name=\"lu-x\"\n size=\"18\"\n />\n </span>\n\n <span :class=\"ui.iconWrapper()\">\n <RuiIcon\n :class=\"ui.icon()\"\n :size=\"dense ? 16 : 24\"\n name=\"lu-chevron-down\"\n />\n </span>\n\n <RuiProgress\n v-if=\"loading\"\n :class=\"ui.progress()\"\n color=\"primary\"\n thickness=\"3\"\n variant=\"indeterminate\"\n />\n </button>\n <fieldset\n v-if=\"outlined\"\n :class=\"ui.fieldset()\"\n >\n <legend :class=\"ui.legend()\">\n {{ legendText }}\n </legend>\n </fieldset>\n </slot>\n <input\n :value=\"valueKey\"\n class=\"hidden\"\n type=\"hidden\"\n />\n </template>\n <template #default=\"{ width }\">\n <div\n v-if=\"options.length > 0\"\n :ref=\"containerProps.ref\"\n :class=\"ui.menu({ class: cn(classNames?.menu) ?? menuClass })\"\n :style=\"[containerProps.style, { width: `${width}px`, minWidth: menuWidth }]\"\n @scroll=\"containerProps.onScroll\"\n @keydown.up.prevent=\"moveHighlight(true)\"\n @keydown.down.prevent=\"moveHighlight(false)\"\n >\n <div\n v-bind=\"wrapperProps\"\n ref=\"menuRef\"\n >\n <RuiButton\n v-for=\"{ item, _index } in renderedData\"\n :key=\"getIdentifier(item)\"\n :active=\"isActiveItem(item)\"\n :aria-selected=\"isActiveItem(item)\"\n :size=\"dense ? 'sm' : undefined\"\n variant=\"list\"\n :data-highlighted=\"highlightedIndex === _index\"\n :class=\"{\n [highlightedClass]: !isActiveItem(item) && highlightedIndex === _index,\n }\"\n @click=\"setValue(item)\"\n >\n <template #prepend>\n <slot\n name=\"item.prepend\"\n v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n />\n </template>\n <slot\n name=\"item\"\n v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n >\n {{ getText(item) }}\n </slot>\n <template #append>\n <slot\n name=\"item.append\"\n v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n />\n </template>\n </RuiButton>\n </div>\n </div>\n\n <div\n v-else-if=\"!hideNoData\"\n data-id=\"no-data\"\n :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n :class=\"classNames?.menu ?? menuClass\"\n >\n <slot name=\"no-data\">\n <div class=\"p-4\">\n {{ noDataText }}\n </div>\n </slot>\n </div>\n </template>\n </RuiMenu>\n</template>\n"],"mappings":"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"}
package/dist/style.css CHANGED
@@ -2226,6 +2226,10 @@ html[data-theme="dark"], html.dark {
2226
2226
  border-color: rgb(0 0 0 / 0.12);
2227
2227
  }
2228
2228
 
2229
+ .divide-black\/\[0\.23\] > :not([hidden]) ~ :not([hidden]) {
2230
+ border-color: rgb(0 0 0 / 0.23);
2231
+ }
2232
+
2229
2233
  .divide-rui-error-darker > :not([hidden]) ~ :not([hidden]) {
2230
2234
  --tw-divide-opacity: 1;
2231
2235
  border-color: rgba(var(--rui-error-darker), var(--tw-divide-opacity, 1));
@@ -2281,10 +2285,6 @@ html[data-theme="dark"], html.dark {
2281
2285
  border-color: rgba(var(--rui-success-main), 0.5);
2282
2286
  }
2283
2287
 
2284
- .divide-rui-text > :not([hidden]) ~ :not([hidden]) {
2285
- border-color: var(--rui-text-primary);
2286
- }
2287
-
2288
2288
  .divide-rui-warning-darker > :not([hidden]) ~ :not([hidden]) {
2289
2289
  --tw-divide-opacity: 1;
2290
2290
  border-color: rgba(var(--rui-warning-darker), var(--tw-divide-opacity, 1));
@@ -3894,6 +3894,10 @@ html[data-theme="dark"], html.dark {
3894
3894
  outline-offset: -1px;
3895
3895
  }
3896
3896
 
3897
+ .outline-black\/\[0\.23\] {
3898
+ outline-color: rgb(0 0 0 / 0.23);
3899
+ }
3900
+
3897
3901
  .outline-rui-error\/\[0\.5\] {
3898
3902
  outline-color: rgba(var(--rui-error-main), 0.5);
3899
3903
  }
@@ -3914,10 +3918,6 @@ html[data-theme="dark"], html.dark {
3914
3918
  outline-color: rgba(var(--rui-success-main), 0.5);
3915
3919
  }
3916
3920
 
3917
- .outline-rui-text {
3918
- outline-color: var(--rui-text-primary);
3919
- }
3920
-
3921
3921
  .outline-rui-warning\/\[0\.5\] {
3922
3922
  outline-color: rgba(var(--rui-warning-main), 0.5);
3923
3923
  }
@@ -5209,6 +5209,10 @@ body {
5209
5209
  border-color: rgb(255 255 255 / 0.12);
5210
5210
  }
5211
5211
 
5212
+ .dark\:divide-white\/\[0\.23\]:is([data-theme="dark"] *) > :not([hidden]) ~ :not([hidden]) {
5213
+ border-color: rgb(255 255 255 / 0.23);
5214
+ }
5215
+
5212
5216
  .dark\:\!border-white\/\[0\.23\]:is([data-theme="dark"] *) {
5213
5217
  border-color: rgb(255 255 255 / 0.23) !important;
5214
5218
  }
@@ -5551,6 +5555,10 @@ body {
5551
5555
  color: rgb(255 255 255 / 0.56);
5552
5556
  }
5553
5557
 
5558
+ .dark\:outline-white\/\[0\.23\]:is([data-theme="dark"] *) {
5559
+ outline-color: rgb(255 255 255 / 0.23);
5560
+ }
5561
+
5554
5562
  .dark\:ring-rui-error\/60:is([data-theme="dark"] *) {
5555
5563
  --tw-ring-color: rgba(var(--rui-error-main), 0.6);
5556
5564
  }
package/dist/web-types.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "$schema": "http://json.schemastore.org/web-types",
3
3
  "framework": "vue",
4
4
  "name": "@rotki/ui-library",
5
- "version": "2.22.1",
5
+ "version": "2.22.2",
6
6
  "js-types-syntax": "typescript",
7
7
  "description-markup": "markdown",
8
8
  "contributions": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rotki/ui-library",
3
- "version": "2.22.1",
3
+ "version": "2.22.2",
4
4
  "description": "A vue design system and component library for rotki",
5
5
  "type": "module",
6
6
  "keywords": [