@rotki/ui-library 2.17.0 → 2.17.1

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 (7) hide show
  1. package/dist/components/buttons/button/button-styles.js +12 -3
  2. package/dist/components/buttons/button/button-styles.js.map +1 -1
  3. package/dist/composables/forms/auto-complete/value.js +1 -1
  4. package/dist/composables/forms/auto-complete/value.js.map +1 -1
  5. package/dist/style.css +24 -5
  6. package/dist/web-types.json +1 -1
  7. package/package.json +20 -22
package/dist/components/buttons/button/button-styles.js CHANGED
@@ -39,7 +39,7 @@ var buttonStyles = tv({
39
39
  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" }
40
40
  },
41
41
  rounded: { true: { root: "rounded-full" } },
42
- icon: { true: { root: "rounded-full px-3 py-3" } },
42
+ icon: { true: { root: "rounded-full" } },
43
43
  active: {
44
44
  true: {},
45
45
  false: {}
@@ -303,15 +303,24 @@ var buttonStyles = tv({
303
303
  size: "sm",
304
304
  class: { root: "px-3 py-1" }
305
305
  },
306
+ {
307
+ icon: true,
308
+ class: { root: "p-1.5 [&_.rui-icon]:!w-5 [&_.rui-icon]:!h-5" }
309
+ },
306
310
  {
307
311
  icon: true,
308
312
  size: "sm",
309
- class: { root: "px-1 py-1" }
313
+ class: { root: "p-1 [&_.rui-icon]:!w-5 [&_.rui-icon]:!h-5" }
310
314
  },
311
315
  {
312
316
  icon: true,
313
317
  size: "lg",
314
- class: { root: "px-4 py-4" }
318
+ class: { root: "p-1.5 [&_.rui-icon]:!w-6 [&_.rui-icon]:!h-6" }
319
+ },
320
+ {
321
+ icon: true,
322
+ size: "xl",
323
+ class: { root: "p-2 [&_.rui-icon]:!w-7 [&_.rui-icon]:!h-7" }
315
324
  },
316
325
  {
317
326
  variant: "fab",
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 for RuiIcons in button slots (prepend/append\n // /default). Size variants below override this via `!` so the rule\n // specificity wins regardless of CSS source order.\n '[&_.rui-icon]:w-[1.125rem] [&_.rui-icon]:h-[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 list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full' },\n },\n size: {\n // Each size variant sets a matching descendant rule so RuiIcons in\n // button slots (prepend/append/default) inherit a size proportional to\n // the button's height. The `.rui-icon` class sits on the icon's <svg>\n // and its `w-6 h-6` default (set by RuiIcon when no size prop is\n // passed) is overridden here because the descendant selector is more\n // specific. `!` guarantees size variants beat the md default baked\n // into the base root regardless of CSS source order. Consumers can\n // still force a specific icon size by passing the `size` prop on\n // RuiIcon — that path stamps inline width/height which beats classes.\n sm: { root: 'px-2.5 py-1 text-[.8125rem] leading-5 [&_.rui-icon]:!w-4 [&_.rui-icon]:!h-4' },\n lg: { root: 'px-6 py-2 text-[1rem] leading-5 [&_.rui-icon]:!w-5 [&_.rui-icon]:!h-5' },\n xl: { root: 'px-6 py-2.5 text-[1rem] leading-6 [&_.rui-icon]:!w-[1.375rem] [&_.rui-icon]:!h-[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 true: { root: 'rounded-full px-3 py-3' },\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: 'sm', class: { root: 'px-1.5' } },\n { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\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: 'sm', class: { root: 'px-3 py-1' } },\n { icon: true, size: 'sm', class: { root: 'px-1 py-1' } },\n { icon: true, size: 'lg', class: { root: 'px-4 py-4' } },\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":";;AAEA,IAAa,eAAe,GAAG;CAC7B,OAAO;EACL,MAAM;GACJ;GAOA;GACA;GAIA;GAOA;GACA;GACD,CAAC,KAAK,IAAI;EACX,OAAO;EACP,SAAS;EACV;CACD,UAAU;EACR,SAAS;GACP,SAAS,EAAE;GACX,UAAU,EAAE;GACZ,MAAM,EAAE,MAAM,QAAQ;GACtB,KAAK,EAAE,MAAM,qBAAqB;GAClC,MAAM;IAAE,MAAM;IAAwD,OAAO;IAAU;GACxF;EACD,MAAM;GAUJ,IAAI,EAAE,MAAM,+EAA+E;GAC3F,IAAI,EAAE,MAAM,yEAAyE;GACrF,IAAI,EAAE,MAAM,6FAA6F;GAC1G;EACD,OAAO;GACL,MAAM,EAAE,MAAM,oKAAoK;GAClL,SAAS,EAAE,MAAM,iKAAiK;GAClL,WAAW,EAAE,MAAM,2KAA2K;GAC9L,OAAO,EAAE,MAAM,uJAAuJ;GACtK,SAAS,EAAE,MAAM,iKAAiK;GAClL,MAAM,EAAE,MAAM,kJAAkJ;GAChK,SAAS,EAAE,MAAM,iKAAiK;GACnL;EACD,SAAS,EACP,MAAM,EAAE,MAAM,gBAAgB,EAC/B;EACD,MAAM,EACJ,MAAM,EAAE,MAAM,0BAA0B,EACzC;EACD,QAAQ;GACN,MAAM,EAAE;GACR,OAAO,EAAE;GACV;EACD,SAAS;GACP,MAAM,EAAE,MAAM,+GAA+G;GAC7H,OAAO,EAAE;GACV;EACD,oBAAoB,EAClB,MAAM,EAAE,MAAM,yBAAyB,EACxC;EACF;CACD,kBAAkB;EAKhB;GAAE,SAAS;GAAO,OAAO,EAAE,MAAM,mIAAmI;GAAE;EACtK;GAAE,SAAS;GAAO,SAAS;GAAY,OAAO,EAAE,MAAM,6HAA6H;GAAE;EACrL;GAAE,SAAS;GAAO,SAAS;GAAQ,OAAO,EAAE,MAAM,0FAA0F;GAAE;EAC9I;GAAE,SAAS;GAAO,SAAS;GAAQ,OAAO,EAAE,MAAM,0FAA0F;GAAE;EAG9I;GAAE,OAAO;GAAQ,QAAQ;GAAM,OAAO,EAAE,MAAM,kBAAkB;GAAE;EAClE;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,mJAAmJ;GAAE;EAC5N;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,gCAAgC;GAAE;EACvH;GAAE,OAAO;GAAQ,SAAS;GAAY,OAAO,EAAE,MAAM,oBAAoB;GAAE;EAC3E;GAAE,OAAO;GAAQ,SAAS;GAAQ,OAAO,EAAE,MAAM,2BAA2B;GAAE;EAO9E;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,6HAA6H;GAAE;EACzM;GAAE,OAAO;GAAa,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,qIAAqI;GAAE;EACnN;GAAE,OAAO;GAAS,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,qHAAqH;GAAE;EAC/L;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,6HAA6H;GAAE;EACzM;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,iHAAiH;GAAE;EAC1L;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,6HAA6H;GAAE;EAGzM;GAAE,OAAO;GAAW,QAAQ;GAAM,OAAO,EAAE,MAAM,yBAAyB;GAAE;EAC5E;GAAE,OAAO;GAAa,QAAQ;GAAM,OAAO,EAAE,MAAM,2BAA2B;GAAE;EAChF;GAAE,OAAO;GAAS,QAAQ;GAAM,OAAO,EAAE,MAAM,uBAAuB;GAAE;EACxE;GAAE,OAAO;GAAW,QAAQ;GAAM,OAAO,EAAE,MAAM,yBAAyB;GAAE;EAC5E;GAAE,OAAO;GAAQ,QAAQ;GAAM,OAAO,EAAE,MAAM,sBAAsB;GAAE;EACtE;GAAE,OAAO;GAAW,QAAQ;GAAM,OAAO,EAAE,MAAM,yBAAyB;GAAE;EAG5E;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,6BAA6B;GAAE;EACvH;GAAE,OAAO;GAAa,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,+BAA+B;GAAE;EAC3H;GAAE,OAAO;GAAS,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,2BAA2B;GAAE;EACnH;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,6BAA6B;GAAE;EACvH;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,0BAA0B;GAAE;EACjH;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,6BAA6B;GAAE;EAGvH;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,6BAA6B;GAAE;EACvF;GAAE,OAAO;GAAa,SAAS;GAAY,OAAO,EAAE,MAAM,+BAA+B;GAAE;EAC3F;GAAE,OAAO;GAAS,SAAS;GAAY,OAAO,EAAE,MAAM,2BAA2B;GAAE;EACnF;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,6BAA6B;GAAE;EACvF;GAAE,OAAO;GAAQ,SAAS;GAAY,OAAO,EAAE,MAAM,0BAA0B;GAAE;EACjF;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,6BAA6B;GAAE;EAGvF;GAAE,SAAS;GAAQ,MAAM;GAAM,OAAO,EAAE,MAAM,UAAU;GAAE;EAC1D;GAAE,SAAS;GAAQ,MAAM;GAAM,OAAO,EAAE,MAAM,UAAU;GAAE;EAC1D;GAAE,SAAS;GAAO,MAAM;GAAM,OAAO,EAAE,MAAM,eAAe;GAAE;EAC9D;GAAE,SAAS;GAAO,MAAM;GAAM,OAAO,EAAE,MAAM,QAAQ;GAAE;EACvD;GAAE,SAAS;GAAQ,MAAM;GAAM,OAAO,EAAE,MAAM,aAAa;GAAE;EAC7D;GAAE,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,MAAM,aAAa;GAAE;EACxD;GAAE,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,MAAM,aAAa;GAAE;EACxD;GAAE,SAAS;GAAO,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,MAAM,aAAa;GAAE;EACzE;CACD,eAAe;EAEb;GAAE,OAAO,CAAC,OAAO;GAAE,OAAO;IAAC;IAAW;IAAW;IAAO;GAAE,SAAS;GAAW,OAAO;GAA4B;EAEjH;GAAE,OAAO,CAAC,OAAO;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO;GAA+D;EAChK;GAAE,OAAO,CAAC,OAAO;GAAE,OAAO;GAAa,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO;GAAmE;EACvK;CACD,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CACF,CAAC"}
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 for RuiIcons in button slots (prepend/append\n // /default). Size variants below override this via `!` so the rule\n // specificity wins regardless of CSS source order.\n '[&_.rui-icon]:w-[1.125rem] [&_.rui-icon]:h-[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 list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full' },\n },\n size: {\n // Each size variant sets a matching descendant rule so RuiIcons in\n // button slots (prepend/append/default) inherit a size proportional to\n // the button's height. The `.rui-icon` class sits on the icon's <svg>\n // and its `w-6 h-6` default (set by RuiIcon when no size prop is\n // passed) is overridden here because the descendant selector is more\n // specific. `!` guarantees size variants beat the md default baked\n // into the base root regardless of CSS source order. Consumers can\n // still force a specific icon size by passing the `size` prop on\n // RuiIcon — that path stamps inline width/height which beats classes.\n sm: { root: 'px-2.5 py-1 text-[.8125rem] leading-5 [&_.rui-icon]:!w-4 [&_.rui-icon]:!h-4' },\n lg: { root: 'px-6 py-2 text-[1rem] leading-5 [&_.rui-icon]:!w-5 [&_.rui-icon]:!h-5' },\n xl: { root: 'px-6 py-2.5 text-[1rem] leading-6 [&_.rui-icon]:!w-[1.375rem] [&_.rui-icon]:!h-[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: 'sm', class: { root: 'px-1.5' } },\n { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\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: '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 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. All values use standard Tailwind tokens\n // (rem-based): p-1 = 0.25rem, p-1.5 = 0.375rem, p-2 = 0.5rem; w-5/6/7 =\n // 1.25/1.5/1.75rem. Prior `px-3 py-3` on icon base + `px-4 py-4` on lg\n // compound produced 42px (md) and 52px (lg) squares that dwarfed\n // neighboring text buttons in toolbars.\n //\n // md (default): p-1.5 + w-5 icon = 0.75 + 1.25 = 2rem (32px)\n // sm: p-1 + w-5 icon = 0.5 + 1.25 = 1.75rem (28px)\n // lg: p-1.5 + w-6 icon = 0.75 + 1.5 = 2.25rem (36px)\n // xl: p-2 + w-7 icon = 1 + 1.75 = 2.75rem (44px)\n { icon: true, class: { root: 'p-1.5 [&_.rui-icon]:!w-5 [&_.rui-icon]:!h-5' } },\n { icon: true, size: 'sm', class: { root: 'p-1 [&_.rui-icon]:!w-5 [&_.rui-icon]:!h-5' } },\n { icon: true, size: 'lg', class: { root: 'p-1.5 [&_.rui-icon]:!w-6 [&_.rui-icon]:!h-6' } },\n { icon: true, size: 'xl', class: { root: 'p-2 [&_.rui-icon]:!w-7 [&_.rui-icon]:!h-7' } },\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":";;AAEA,IAAa,eAAe,GAAG;CAC7B,OAAO;EACL,MAAM;GACJ;GAOA;GACA;GAIA;GAOA;GACA;GACD,CAAC,KAAK,IAAI;EACX,OAAO;EACP,SAAS;EACV;CACD,UAAU;EACR,SAAS;GACP,SAAS,EAAE;GACX,UAAU,EAAE;GACZ,MAAM,EAAE,MAAM,QAAQ;GACtB,KAAK,EAAE,MAAM,qBAAqB;GAClC,MAAM;IAAE,MAAM;IAAwD,OAAO;IAAU;GACxF;EACD,MAAM;GAUJ,IAAI,EAAE,MAAM,+EAA+E;GAC3F,IAAI,EAAE,MAAM,yEAAyE;GACrF,IAAI,EAAE,MAAM,6FAA6F;GAC1G;EACD,OAAO;GACL,MAAM,EAAE,MAAM,oKAAoK;GAClL,SAAS,EAAE,MAAM,iKAAiK;GAClL,WAAW,EAAE,MAAM,2KAA2K;GAC9L,OAAO,EAAE,MAAM,uJAAuJ;GACtK,SAAS,EAAE,MAAM,iKAAiK;GAClL,MAAM,EAAE,MAAM,kJAAkJ;GAChK,SAAS,EAAE,MAAM,iKAAiK;GACnL;EACD,SAAS,EACP,MAAM,EAAE,MAAM,gBAAgB,EAC/B;EACD,MAAM,EAIJ,MAAM,EAAE,MAAM,gBAAgB,EAC/B;EACD,QAAQ;GACN,MAAM,EAAE;GACR,OAAO,EAAE;GACV;EACD,SAAS;GACP,MAAM,EAAE,MAAM,+GAA+G;GAC7H,OAAO,EAAE;GACV;EACD,oBAAoB,EAClB,MAAM,EAAE,MAAM,yBAAyB,EACxC;EACF;CACD,kBAAkB;EAKhB;GAAE,SAAS;GAAO,OAAO,EAAE,MAAM,mIAAmI;GAAE;EACtK;GAAE,SAAS;GAAO,SAAS;GAAY,OAAO,EAAE,MAAM,6HAA6H;GAAE;EACrL;GAAE,SAAS;GAAO,SAAS;GAAQ,OAAO,EAAE,MAAM,0FAA0F;GAAE;EAC9I;GAAE,SAAS;GAAO,SAAS;GAAQ,OAAO,EAAE,MAAM,0FAA0F;GAAE;EAG9I;GAAE,OAAO;GAAQ,QAAQ;GAAM,OAAO,EAAE,MAAM,kBAAkB;GAAE;EAClE;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,mJAAmJ;GAAE;EAC5N;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,gCAAgC;GAAE;EACvH;GAAE,OAAO;GAAQ,SAAS;GAAY,OAAO,EAAE,MAAM,oBAAoB;GAAE;EAC3E;GAAE,OAAO;GAAQ,SAAS;GAAQ,OAAO,EAAE,MAAM,2BAA2B;GAAE;EAO9E;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,6HAA6H;GAAE;EACzM;GAAE,OAAO;GAAa,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,qIAAqI;GAAE;EACnN;GAAE,OAAO;GAAS,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,qHAAqH;GAAE;EAC/L;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,6HAA6H;GAAE;EACzM;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,iHAAiH;GAAE;EAC1L;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,OAAO,EAAE,MAAM,6HAA6H;GAAE;EAGzM;GAAE,OAAO;GAAW,QAAQ;GAAM,OAAO,EAAE,MAAM,yBAAyB;GAAE;EAC5E;GAAE,OAAO;GAAa,QAAQ;GAAM,OAAO,EAAE,MAAM,2BAA2B;GAAE;EAChF;GAAE,OAAO;GAAS,QAAQ;GAAM,OAAO,EAAE,MAAM,uBAAuB;GAAE;EACxE;GAAE,OAAO;GAAW,QAAQ;GAAM,OAAO,EAAE,MAAM,yBAAyB;GAAE;EAC5E;GAAE,OAAO;GAAQ,QAAQ;GAAM,OAAO,EAAE,MAAM,sBAAsB;GAAE;EACtE;GAAE,OAAO;GAAW,QAAQ;GAAM,OAAO,EAAE,MAAM,yBAAyB;GAAE;EAG5E;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,6BAA6B;GAAE;EACvH;GAAE,OAAO;GAAa,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,+BAA+B;GAAE;EAC3H;GAAE,OAAO;GAAS,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,2BAA2B;GAAE;EACnH;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,6BAA6B;GAAE;EACvH;GAAE,OAAO;GAAQ,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,0BAA0B;GAAE;EACjH;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO,EAAE,MAAM,6BAA6B;GAAE;EAGvH;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,6BAA6B;GAAE;EACvF;GAAE,OAAO;GAAa,SAAS;GAAY,OAAO,EAAE,MAAM,+BAA+B;GAAE;EAC3F;GAAE,OAAO;GAAS,SAAS;GAAY,OAAO,EAAE,MAAM,2BAA2B;GAAE;EACnF;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,6BAA6B;GAAE;EACvF;GAAE,OAAO;GAAQ,SAAS;GAAY,OAAO,EAAE,MAAM,0BAA0B;GAAE;EACjF;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,6BAA6B;GAAE;EAGvF;GAAE,SAAS;GAAQ,MAAM;GAAM,OAAO,EAAE,MAAM,UAAU;GAAE;EAC1D;GAAE,SAAS;GAAQ,MAAM;GAAM,OAAO,EAAE,MAAM,UAAU;GAAE;EAC1D;GAAE,SAAS;GAAO,MAAM;GAAM,OAAO,EAAE,MAAM,eAAe;GAAE;EAC9D;GAAE,SAAS;GAAO,MAAM;GAAM,OAAO,EAAE,MAAM,QAAQ;GAAE;EACvD;GAAE,SAAS;GAAQ,MAAM;GAAM,OAAO,EAAE,MAAM,aAAa;GAAE;EAe7D;GAAE,MAAM;GAAM,OAAO,EAAE,MAAM,+CAA+C;GAAE;EAC9E;GAAE,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,MAAM,6CAA6C;GAAE;EACxF;GAAE,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,MAAM,+CAA+C;GAAE;EAC1F;GAAE,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,MAAM,6CAA6C;GAAE;EACxF;GAAE,SAAS;GAAO,MAAM;GAAM,MAAM;GAAM,OAAO,EAAE,MAAM,aAAa;GAAE;EACzE;CACD,eAAe;EAEb;GAAE,OAAO,CAAC,OAAO;GAAE,OAAO;IAAC;IAAW;IAAW;IAAO;GAAE,SAAS;GAAW,OAAO;GAA4B;EAEjH;GAAE,OAAO,CAAC,OAAO;GAAE,OAAO;GAAW,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO;GAA+D;EAChK;GAAE,OAAO,CAAC,OAAO;GAAE,OAAO;GAAa,SAAS;IAAC;IAAY;IAAQ;IAAO;GAAE,QAAQ;GAAM,OAAO;GAAmE;EACvK;CACD,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CACF,CAAC"}
package/dist/composables/forms/auto-complete/value.js CHANGED
@@ -58,7 +58,7 @@ function useAutoCompleteValue(modelValue, options, opts, deps) {
58
58
  setSelected(selected);
59
59
  }
60
60
  });
61
- watch([modelValue, () => toValue(deps.isOpen)], () => {
61
+ watch([value, () => toValue(deps.isOpen)], () => {
62
62
  if (toValue(deps.isOpen) || !toValue(deps.shouldApplyValueAsSearch)) return;
63
63
  const currentValue = get(value);
64
64
  if (toValue(deps.multiple) || currentValue.length === 0) deps.updateInternalSearch();
package/dist/composables/forms/auto-complete/value.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"value.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/value.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { assert } from '@/utils/assert';\n\nexport interface UseAutoCompleteValueOptions<TItem> {\n /** The property used as the unique identifier for each item. */\n keyAttr?: MaybeRefOrGetter<keyof TItem | undefined>;\n /** Whether to return the full item object instead of just the key. */\n returnObject?: MaybeRefOrGetter<boolean>;\n /** Whether custom (free-text) values are allowed. */\n customValue?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteValueReturn<TItem> {\n value: ComputedRef<TItem[]>;\n setSelected: (selected: TItem[]) => void;\n}\n\nexport interface UseAutoCompleteValueDeps<TItem> {\n getIdentifier: (item: TItem) => any;\n getText: (item: TItem) => string | undefined;\n textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;\n isOpen: MaybeRefOrGetter<boolean>;\n multiple: MaybeRefOrGetter<boolean>;\n updateInternalSearch: (value?: string) => void;\n}\n\nexport function useAutoCompleteValue<TValue, TItem>(\n modelValue: Ref<TValue | undefined>, // eslint-disable-line @rotki/composable-input-flexibility -- needs write access\n options: MaybeRefOrGetter<TItem[]>,\n opts: UseAutoCompleteValueOptions<TItem>,\n deps: UseAutoCompleteValueDeps<TItem>,\n): UseAutoCompleteValueReturn<TItem> {\n // Create maps for O(1) lookup performance\n const optionsMap = computed<Map<any, TItem>>(() => {\n const map = new Map<any, TItem>();\n const optionsData = toValue(options);\n for (const item of optionsData) {\n map.set(deps.getIdentifier(item), item);\n }\n return map;\n });\n\n function convertModelValueToArray(modelValueData: TValue | undefined): any[] {\n if (modelValueData === null || modelValueData === undefined)\n return [];\n return Array.isArray(modelValueData) ? modelValueData : [modelValueData];\n }\n\n function filterValues(\n valueArray: any[],\n optionsMapData: Map<any, TItem>,\n customValue: boolean,\n returnObject: boolean,\n getKey: (val: any) => any,\n ): TItem[] {\n const filtered: TItem[] = [];\n for (const val of valueArray) {\n const inOptions = optionsMapData.get(getKey(val));\n if (inOptions !== undefined)\n filtered.push(inOptions);\n else if (customValue)\n filtered.push(deps.textValueToProperValue(val, returnObject));\n }\n return filtered;\n }\n\n function processReturnObjectValue(\n modelValueData: TValue | undefined,\n optionsMapData: Map<any, TItem>,\n returnObject: boolean,\n customValue: boolean,\n ): TItem[] {\n const multipleValue = Array.isArray(modelValueData);\n const valueArray = convertModelValueToArray(modelValueData);\n const filtered = filterValues(valueArray, optionsMapData, customValue, returnObject, val => deps.getIdentifier(val));\n\n if (multipleValue || filtered.length === 0)\n return filtered;\n\n const val = filtered[0];\n assert(val !== undefined && val !== null);\n return [val];\n }\n\n function processStandardValue(\n modelValueData: TValue | undefined,\n optionsMapData: Map<any, TItem>,\n returnObject: boolean,\n customValue: boolean,\n ): TItem[] {\n const valueArray = convertModelValueToArray(modelValueData);\n return filterValues(valueArray, optionsMapData, customValue, returnObject, val => val);\n }\n\n function onUpdateModelValue(value: TValue | undefined): void {\n set(modelValue, value);\n }\n\n function setSelected(selected: TItem[]): void {\n const keyAttr = toValue(opts.keyAttr);\n const returnObject = toValue(opts.returnObject);\n const selection = keyAttr && !returnObject ? selected.map(item => item[keyAttr]) : selected;\n\n if (toValue(deps.multiple))\n return onUpdateModelValue(selection as TValue);\n\n if (selection.length === 0)\n return onUpdateModelValue(undefined);\n\n return onUpdateModelValue(selection[0] as TValue);\n }\n\n const value = computed<TItem[]>({\n get: () => {\n const modelValueData = get(modelValue);\n const keyAttr = toValue(opts.keyAttr);\n const returnObject = toValue(opts.returnObject) ?? false;\n const customValue = toValue(opts.customValue) ?? false;\n const optionsMapData = get(optionsMap);\n\n if (keyAttr && returnObject)\n return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);\n\n return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);\n },\n set: (selected: TItem[]): void => {\n setSelected(selected);\n },\n });\n\n // Sync search text when menu is closed and value changes\n watch([modelValue, () => toValue(deps.isOpen)], () => {\n if (toValue(deps.isOpen) || !toValue(deps.shouldApplyValueAsSearch))\n return;\n\n const currentValue = get(value);\n if (toValue(deps.multiple) || currentValue.length === 0) {\n deps.updateInternalSearch();\n }\n else {\n const firstItem = currentValue[0];\n assert(firstItem !== undefined && firstItem !== null);\n deps.updateInternalSearch(deps.getText(firstItem));\n }\n }, { immediate: true });\n\n return {\n setSelected,\n value,\n };\n}\n"],"mappings":";;;;AA4BA,SAAgB,qBACd,YACA,SACA,MACA,MACmC;CAEnC,MAAM,aAAa,eAAgC;EACjD,MAAM,sBAAM,IAAI,KAAiB;EACjC,MAAM,cAAc,QAAQ,QAAQ;AACpC,OAAK,MAAM,QAAQ,YACjB,KAAI,IAAI,KAAK,cAAc,KAAK,EAAE,KAAK;AAEzC,SAAO;GACP;CAEF,SAAS,yBAAyB,gBAA2C;AAC3E,MAAI,mBAAmB,QAAQ,mBAAmB,KAAA,EAChD,QAAO,EAAE;AACX,SAAO,MAAM,QAAQ,eAAe,GAAG,iBAAiB,CAAC,eAAe;;CAG1E,SAAS,aACP,YACA,gBACA,aACA,cACA,QACS;EACT,MAAM,WAAoB,EAAE;AAC5B,OAAK,MAAM,OAAO,YAAY;GAC5B,MAAM,YAAY,eAAe,IAAI,OAAO,IAAI,CAAC;AACjD,OAAI,cAAc,KAAA,EAChB,UAAS,KAAK,UAAU;YACjB,YACP,UAAS,KAAK,KAAK,uBAAuB,KAAK,aAAa,CAAC;;AAEjE,SAAO;;CAGT,SAAS,yBACP,gBACA,gBACA,cACA,aACS;EACT,MAAM,gBAAgB,MAAM,QAAQ,eAAe;EAEnD,MAAM,WAAW,aADE,yBAAyB,eAAe,EACjB,gBAAgB,aAAa,eAAc,QAAO,KAAK,cAAc,IAAI,CAAC;AAEpH,MAAI,iBAAiB,SAAS,WAAW,EACvC,QAAO;EAET,MAAM,MAAM,SAAS;AACrB,SAAO,QAAQ,KAAA,KAAa,QAAQ,KAAK;AACzC,SAAO,CAAC,IAAI;;CAGd,SAAS,qBACP,gBACA,gBACA,cACA,aACS;AAET,SAAO,aADY,yBAAyB,eAAe,EAC3B,gBAAgB,aAAa,eAAc,QAAO,IAAI;;CAGxF,SAAS,mBAAmB,OAAiC;AAC3D,MAAI,YAAY,MAAM;;CAGxB,SAAS,YAAY,UAAyB;EAC5C,MAAM,UAAU,QAAQ,KAAK,QAAQ;EACrC,MAAM,eAAe,QAAQ,KAAK,aAAa;EAC/C,MAAM,YAAY,WAAW,CAAC,eAAe,SAAS,KAAI,SAAQ,KAAK,SAAS,GAAG;AAEnF,MAAI,QAAQ,KAAK,SAAS,CACxB,QAAO,mBAAmB,UAAoB;AAEhD,MAAI,UAAU,WAAW,EACvB,QAAO,mBAAmB,KAAA,EAAU;AAEtC,SAAO,mBAAmB,UAAU,GAAa;;CAGnD,MAAM,QAAQ,SAAkB;EAC9B,WAAW;GACT,MAAM,iBAAiB,IAAI,WAAW;GACtC,MAAM,UAAU,QAAQ,KAAK,QAAQ;GACrC,MAAM,eAAe,QAAQ,KAAK,aAAa,IAAI;GACnD,MAAM,cAAc,QAAQ,KAAK,YAAY,IAAI;GACjD,MAAM,iBAAiB,IAAI,WAAW;AAEtC,OAAI,WAAW,aACb,QAAO,yBAAyB,gBAAgB,gBAAgB,cAAc,YAAY;AAE5F,UAAO,qBAAqB,gBAAgB,gBAAgB,cAAc,YAAY;;EAExF,MAAM,aAA4B;AAChC,eAAY,SAAS;;EAExB,CAAC;AAGF,OAAM,CAAC,kBAAkB,QAAQ,KAAK,OAAO,CAAC,QAAQ;AACpD,MAAI,QAAQ,KAAK,OAAO,IAAI,CAAC,QAAQ,KAAK,yBAAyB,CACjE;EAEF,MAAM,eAAe,IAAI,MAAM;AAC/B,MAAI,QAAQ,KAAK,SAAS,IAAI,aAAa,WAAW,EACpD,MAAK,sBAAsB;OAExB;GACH,MAAM,YAAY,aAAa;AAC/B,UAAO,cAAc,KAAA,KAAa,cAAc,KAAK;AACrD,QAAK,qBAAqB,KAAK,QAAQ,UAAU,CAAC;;IAEnD,EAAE,WAAW,MAAM,CAAC;AAEvB,QAAO;EACL;EACA;EACD"}
1
+ {"version":3,"file":"value.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/value.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';\nimport { get, set } from '@vueuse/shared';\nimport { assert } from '@/utils/assert';\n\nexport interface UseAutoCompleteValueOptions<TItem> {\n /** The property used as the unique identifier for each item. */\n keyAttr?: MaybeRefOrGetter<keyof TItem | undefined>;\n /** Whether to return the full item object instead of just the key. */\n returnObject?: MaybeRefOrGetter<boolean>;\n /** Whether custom (free-text) values are allowed. */\n customValue?: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteValueReturn<TItem> {\n value: ComputedRef<TItem[]>;\n setSelected: (selected: TItem[]) => void;\n}\n\nexport interface UseAutoCompleteValueDeps<TItem> {\n getIdentifier: (item: TItem) => any;\n getText: (item: TItem) => string | undefined;\n textValueToProperValue: (val: any, returnObject?: boolean) => TItem;\n shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;\n isOpen: MaybeRefOrGetter<boolean>;\n multiple: MaybeRefOrGetter<boolean>;\n updateInternalSearch: (value?: string) => void;\n}\n\nexport function useAutoCompleteValue<TValue, TItem>(\n modelValue: Ref<TValue | undefined>, // eslint-disable-line @rotki/composable-input-flexibility -- needs write access\n options: MaybeRefOrGetter<TItem[]>,\n opts: UseAutoCompleteValueOptions<TItem>,\n deps: UseAutoCompleteValueDeps<TItem>,\n): UseAutoCompleteValueReturn<TItem> {\n // Create maps for O(1) lookup performance\n const optionsMap = computed<Map<any, TItem>>(() => {\n const map = new Map<any, TItem>();\n const optionsData = toValue(options);\n for (const item of optionsData) {\n map.set(deps.getIdentifier(item), item);\n }\n return map;\n });\n\n function convertModelValueToArray(modelValueData: TValue | undefined): any[] {\n if (modelValueData === null || modelValueData === undefined)\n return [];\n return Array.isArray(modelValueData) ? modelValueData : [modelValueData];\n }\n\n function filterValues(\n valueArray: any[],\n optionsMapData: Map<any, TItem>,\n customValue: boolean,\n returnObject: boolean,\n getKey: (val: any) => any,\n ): TItem[] {\n const filtered: TItem[] = [];\n for (const val of valueArray) {\n const inOptions = optionsMapData.get(getKey(val));\n if (inOptions !== undefined)\n filtered.push(inOptions);\n else if (customValue)\n filtered.push(deps.textValueToProperValue(val, returnObject));\n }\n return filtered;\n }\n\n function processReturnObjectValue(\n modelValueData: TValue | undefined,\n optionsMapData: Map<any, TItem>,\n returnObject: boolean,\n customValue: boolean,\n ): TItem[] {\n const multipleValue = Array.isArray(modelValueData);\n const valueArray = convertModelValueToArray(modelValueData);\n const filtered = filterValues(valueArray, optionsMapData, customValue, returnObject, val => deps.getIdentifier(val));\n\n if (multipleValue || filtered.length === 0)\n return filtered;\n\n const val = filtered[0];\n assert(val !== undefined && val !== null);\n return [val];\n }\n\n function processStandardValue(\n modelValueData: TValue | undefined,\n optionsMapData: Map<any, TItem>,\n returnObject: boolean,\n customValue: boolean,\n ): TItem[] {\n const valueArray = convertModelValueToArray(modelValueData);\n return filterValues(valueArray, optionsMapData, customValue, returnObject, val => val);\n }\n\n function onUpdateModelValue(value: TValue | undefined): void {\n set(modelValue, value);\n }\n\n function setSelected(selected: TItem[]): void {\n const keyAttr = toValue(opts.keyAttr);\n const returnObject = toValue(opts.returnObject);\n const selection = keyAttr && !returnObject ? selected.map(item => item[keyAttr]) : selected;\n\n if (toValue(deps.multiple))\n return onUpdateModelValue(selection as TValue);\n\n if (selection.length === 0)\n return onUpdateModelValue(undefined);\n\n return onUpdateModelValue(selection[0] as TValue);\n }\n\n const value = computed<TItem[]>({\n get: () => {\n const modelValueData = get(modelValue);\n const keyAttr = toValue(opts.keyAttr);\n const returnObject = toValue(opts.returnObject) ?? false;\n const customValue = toValue(opts.customValue) ?? false;\n const optionsMapData = get(optionsMap);\n\n if (keyAttr && returnObject)\n return processReturnObjectValue(modelValueData, optionsMapData, returnObject, customValue);\n\n return processStandardValue(modelValueData, optionsMapData, returnObject, customValue);\n },\n set: (selected: TItem[]): void => {\n setSelected(selected);\n },\n });\n\n // Watching `value` (not `modelValue`) so the search text resyncs once\n // `options` arrives later and the lookup can finally resolve.\n watch([value, () => toValue(deps.isOpen)], () => {\n if (toValue(deps.isOpen) || !toValue(deps.shouldApplyValueAsSearch))\n return;\n\n const currentValue = get(value);\n if (toValue(deps.multiple) || currentValue.length === 0) {\n deps.updateInternalSearch();\n }\n else {\n const firstItem = currentValue[0];\n assert(firstItem !== undefined && firstItem !== null);\n deps.updateInternalSearch(deps.getText(firstItem));\n }\n }, { immediate: true });\n\n return {\n setSelected,\n value,\n };\n}\n"],"mappings":";;;;AA4BA,SAAgB,qBACd,YACA,SACA,MACA,MACmC;CAEnC,MAAM,aAAa,eAAgC;EACjD,MAAM,sBAAM,IAAI,KAAiB;EACjC,MAAM,cAAc,QAAQ,QAAQ;AACpC,OAAK,MAAM,QAAQ,YACjB,KAAI,IAAI,KAAK,cAAc,KAAK,EAAE,KAAK;AAEzC,SAAO;GACP;CAEF,SAAS,yBAAyB,gBAA2C;AAC3E,MAAI,mBAAmB,QAAQ,mBAAmB,KAAA,EAChD,QAAO,EAAE;AACX,SAAO,MAAM,QAAQ,eAAe,GAAG,iBAAiB,CAAC,eAAe;;CAG1E,SAAS,aACP,YACA,gBACA,aACA,cACA,QACS;EACT,MAAM,WAAoB,EAAE;AAC5B,OAAK,MAAM,OAAO,YAAY;GAC5B,MAAM,YAAY,eAAe,IAAI,OAAO,IAAI,CAAC;AACjD,OAAI,cAAc,KAAA,EAChB,UAAS,KAAK,UAAU;YACjB,YACP,UAAS,KAAK,KAAK,uBAAuB,KAAK,aAAa,CAAC;;AAEjE,SAAO;;CAGT,SAAS,yBACP,gBACA,gBACA,cACA,aACS;EACT,MAAM,gBAAgB,MAAM,QAAQ,eAAe;EAEnD,MAAM,WAAW,aADE,yBAAyB,eAAe,EACjB,gBAAgB,aAAa,eAAc,QAAO,KAAK,cAAc,IAAI,CAAC;AAEpH,MAAI,iBAAiB,SAAS,WAAW,EACvC,QAAO;EAET,MAAM,MAAM,SAAS;AACrB,SAAO,QAAQ,KAAA,KAAa,QAAQ,KAAK;AACzC,SAAO,CAAC,IAAI;;CAGd,SAAS,qBACP,gBACA,gBACA,cACA,aACS;AAET,SAAO,aADY,yBAAyB,eAAe,EAC3B,gBAAgB,aAAa,eAAc,QAAO,IAAI;;CAGxF,SAAS,mBAAmB,OAAiC;AAC3D,MAAI,YAAY,MAAM;;CAGxB,SAAS,YAAY,UAAyB;EAC5C,MAAM,UAAU,QAAQ,KAAK,QAAQ;EACrC,MAAM,eAAe,QAAQ,KAAK,aAAa;EAC/C,MAAM,YAAY,WAAW,CAAC,eAAe,SAAS,KAAI,SAAQ,KAAK,SAAS,GAAG;AAEnF,MAAI,QAAQ,KAAK,SAAS,CACxB,QAAO,mBAAmB,UAAoB;AAEhD,MAAI,UAAU,WAAW,EACvB,QAAO,mBAAmB,KAAA,EAAU;AAEtC,SAAO,mBAAmB,UAAU,GAAa;;CAGnD,MAAM,QAAQ,SAAkB;EAC9B,WAAW;GACT,MAAM,iBAAiB,IAAI,WAAW;GACtC,MAAM,UAAU,QAAQ,KAAK,QAAQ;GACrC,MAAM,eAAe,QAAQ,KAAK,aAAa,IAAI;GACnD,MAAM,cAAc,QAAQ,KAAK,YAAY,IAAI;GACjD,MAAM,iBAAiB,IAAI,WAAW;AAEtC,OAAI,WAAW,aACb,QAAO,yBAAyB,gBAAgB,gBAAgB,cAAc,YAAY;AAE5F,UAAO,qBAAqB,gBAAgB,gBAAgB,cAAc,YAAY;;EAExF,MAAM,aAA4B;AAChC,eAAY,SAAS;;EAExB,CAAC;AAIF,OAAM,CAAC,aAAa,QAAQ,KAAK,OAAO,CAAC,QAAQ;AAC/C,MAAI,QAAQ,KAAK,OAAO,IAAI,CAAC,QAAQ,KAAK,yBAAyB,CACjE;EAEF,MAAM,eAAe,IAAI,MAAM;AAC/B,MAAI,QAAQ,KAAK,SAAS,IAAI,aAAa,WAAW,EACpD,MAAK,sBAAsB;OAExB;GACH,MAAM,YAAY,aAAa;AAC/B,UAAO,cAAc,KAAA,KAAa,cAAc,KAAK;AACrD,QAAK,qBAAqB,KAAK,QAAQ,UAAU,CAAC;;IAEnD,EAAE,WAAW,MAAM,CAAC;AAEvB,QAAO;EACL;EACA;EACD"}
package/dist/style.css CHANGED
@@ -1527,6 +1527,10 @@ html[data-theme="dark"], html.dark {
1527
1527
  width: 16rem;
1528
1528
  }
1529
1529
 
1530
+ .w-7 {
1531
+ width: 1.75rem;
1532
+ }
1533
+
1530
1534
  .w-8 {
1531
1535
  width: 2rem;
1532
1536
  }
@@ -2923,6 +2927,10 @@ html[data-theme="dark"], html.dark {
2923
2927
  padding: 0.25rem;
2924
2928
  }
2925
2929
 
2930
+ .p-1\.5 {
2931
+ padding: 0.375rem;
2932
+ }
2933
+
2926
2934
  .p-2 {
2927
2935
  padding: 0.5rem;
2928
2936
  }
@@ -2962,11 +2970,6 @@ html[data-theme="dark"], html.dark {
2962
2970
  padding-right: 0px;
2963
2971
  }
2964
2972
 
2965
- .px-1 {
2966
- padding-left: 0.25rem;
2967
- padding-right: 0.25rem;
2968
- }
2969
-
2970
2973
  .px-1\.5 {
2971
2974
  padding-left: 0.375rem;
2972
2975
  padding-right: 0.375rem;
@@ -5499,6 +5502,14 @@ body {
5499
5502
  height: 1.25rem !important;
5500
5503
  }
5501
5504
 
5505
+ .\[\&_\.rui-icon\]\:\!h-6 .rui-icon {
5506
+ height: 1.5rem !important;
5507
+ }
5508
+
5509
+ .\[\&_\.rui-icon\]\:\!h-7 .rui-icon {
5510
+ height: 1.75rem !important;
5511
+ }
5512
+
5502
5513
  .\[\&_\.rui-icon\]\:\!h-\[1\.375rem\] .rui-icon {
5503
5514
  height: 1.375rem !important;
5504
5515
  }
@@ -5515,6 +5526,14 @@ body {
5515
5526
  width: 1.25rem !important;
5516
5527
  }
5517
5528
 
5529
+ .\[\&_\.rui-icon\]\:\!w-6 .rui-icon {
5530
+ width: 1.5rem !important;
5531
+ }
5532
+
5533
+ .\[\&_\.rui-icon\]\:\!w-7 .rui-icon {
5534
+ width: 1.75rem !important;
5535
+ }
5536
+
5518
5537
  .\[\&_\.rui-icon\]\:\!w-\[1\.375rem\] .rui-icon {
5519
5538
  width: 1.375rem !important;
5520
5539
  }
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.17.0",
5
+ "version": "2.17.1",
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.17.0",
3
+ "version": "2.17.1",
4
4
  "description": "A vue design system and component library for rotki",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -98,43 +98,41 @@
98
98
  },
99
99
  "devDependencies": {
100
100
  "@fontsource/roboto": "5.2.10",
101
- "@storybook/addon-a11y": "10.3.4",
102
- "@storybook/addon-docs": "10.3.4",
103
- "@storybook/addon-links": "10.3.4",
104
- "@storybook/addon-themes": "10.3.4",
105
- "@storybook/addon-vitest": "10.3.4",
106
- "@storybook/vue3-vite": "10.3.4",
101
+ "@storybook/addon-a11y": "10.3.5",
102
+ "@storybook/addon-docs": "10.3.5",
103
+ "@storybook/addon-links": "10.3.5",
104
+ "@storybook/addon-themes": "10.3.5",
105
+ "@storybook/addon-vitest": "10.3.5",
106
+ "@storybook/vue3-vite": "10.3.5",
107
107
  "@tsconfig/node24": "24.0.4",
108
- "@types/jsdom": "28.0.1",
109
108
  "@types/node": "24.12.2",
110
109
  "@types/tinycolor2": "1.4.6",
111
- "@vitejs/plugin-vue": "6.0.5",
112
- "@vitest/browser": "4.1.2",
113
- "@vitest/browser-playwright": "4.1.2",
114
- "@vitest/coverage-v8": "4.1.2",
115
- "@vitest/ui": "4.1.2",
110
+ "@vitejs/plugin-vue": "6.0.6",
111
+ "@vitest/browser": "4.1.4",
112
+ "@vitest/browser-playwright": "4.1.4",
113
+ "@vitest/coverage-v8": "4.1.4",
114
+ "@vitest/ui": "4.1.4",
116
115
  "@vue/test-utils": "2.4.6",
117
116
  "@vue/tsconfig": "0.9.1",
118
- "autoprefixer": "10.4.27",
117
+ "autoprefixer": "10.5.0",
119
118
  "cac": "7.0.0",
120
119
  "consola": "3.4.2",
121
120
  "fast-glob": "3.3.3",
122
- "fast-xml-parser": "5.5.10",
121
+ "fast-xml-parser": "5.5.12",
123
122
  "fs-extra": "11.3.4",
124
- "happy-dom": "20.8.9",
125
- "jsdom": "28.1.0",
123
+ "happy-dom": "20.9.0",
126
124
  "lucide": "0.577.0",
127
- "msw": "2.13.0",
128
- "postcss": "8.5.8",
129
- "storybook": "10.3.4",
125
+ "msw": "2.13.3",
126
+ "postcss": "8.5.9",
127
+ "storybook": "10.3.5",
130
128
  "tailwindcss": "3.4.19",
131
129
  "tsc-alias": "1.8.16",
132
130
  "tsx": "4.21.0",
133
131
  "typescript": "5.9.3",
134
132
  "unplugin-auto-import": "21.0.0",
135
- "vite": "8.0.7",
133
+ "vite": "8.0.8",
136
134
  "vite-plugin-vue-devtools": "8.1.1",
137
- "vitest": "4.1.2",
135
+ "vitest": "4.1.4",
138
136
  "vue": "3.5.32",
139
137
  "vue-component-meta": "3.2.6",
140
138
  "vue-router": "5.0.4",