@rotki/ui-library 2.20.1 → 2.21.0

package/dist/style.css

@@ -1138,6 +1138,10 @@ html[data-theme="dark"], html.dark {
   margin-top: 0px !important;
 }
 
+.-mb-2 {
+  margin-bottom: -0.5rem;
+}
+
 .-ml-\[0\.5625rem\] {
   margin-left: -0.5625rem;
 }
@@ -2375,6 +2379,10 @@ html[data-theme="dark"], html.dark {
   border-top-width: 1px;
 }
 
+.\!border-solid {
+  border-style: solid !important;
+}
+
 .border-dashed {
   border-style: dashed;
 }
@@ -2745,6 +2753,10 @@ html[data-theme="dark"], html.dark {
   background-color: rgba(var(--rui-error-main), 0.2);
 }
 
+.bg-rui-error\/\[0\.08\] {
+  background-color: rgba(var(--rui-error-main), 0.08);
+}
+
 .bg-rui-grey-100 {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--rui-grey-100), var(--tw-bg-opacity, 1));
@@ -2813,6 +2825,10 @@ html[data-theme="dark"], html.dark {
   background-color: rgba(var(--rui-primary-main), 0.08);
 }
 
+.bg-rui-primary\/\[0\.12\] {
+  background-color: rgba(var(--rui-primary-main), 0.12);
+}
+
 .bg-rui-secondary {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--rui-secondary-main), var(--tw-bg-opacity, 1));
@@ -2853,6 +2869,14 @@ html[data-theme="dark"], html.dark {
   background-color: rgba(var(--rui-success-main), 0.2);
 }
 
+.bg-rui-success\/\[0\.08\] {
+  background-color: rgba(var(--rui-success-main), 0.08);
+}
+
+.bg-rui-success\/\[0\.12\] {
+  background-color: rgba(var(--rui-success-main), 0.12);
+}
+
 .bg-rui-warning {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--rui-warning-main), var(--tw-bg-opacity, 1));
@@ -3123,6 +3147,10 @@ html[data-theme="dark"], html.dark {
   padding-right: 0px;
 }
 
+.pr-1 {
+  padding-right: 0.25rem;
+}
+
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -3139,6 +3167,10 @@ html[data-theme="dark"], html.dark {
   padding-right: 2rem;
 }
 
+.pr-\[var\(--rui-scrollbar-gutter\2c 15px\)\] {
+  padding-right: var(--rui-scrollbar-gutter,15px);
+}
+
 .ps-8 {
   padding-inline-start: 2rem;
 }
@@ -3383,6 +3415,10 @@ html[data-theme="dark"], html.dark {
   line-height: 1.25;
 }
 
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+
 .\!text-rui-dark-text {
   color: var(--rui-dark-text-primary) !important;
 }
@@ -3512,6 +3548,10 @@ html[data-theme="dark"], html.dark {
   opacity: 0.5;
 }
 
+.opacity-60 {
+  opacity: 0.6;
+}
+
 .opacity-65 {
   opacity: 0.65;
 }
@@ -4617,6 +4657,10 @@ body {
   background-color: rgba(var(--rui-primary-main), 0.04);
 }
 
+.hover\:bg-rui-primary\/\[0\.16\]:hover {
+  background-color: rgba(var(--rui-primary-main), 0.16);
+}
+
 .hover\:bg-rui-secondary-darker:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--rui-secondary-darker), var(--tw-bg-opacity, 1));
@@ -4878,6 +4922,10 @@ body {
   color: var(--rui-text-disabled);
 }
 
+.disabled\:no-underline:disabled {
+  text-decoration-line: none;
+}
+
 .disabled\:outline-rui-text-disabled:disabled {
   outline-color: var(--rui-text-disabled);
 }

package/dist/utils/helpers.d.ts

@@ -36,4 +36,8 @@ export declare function transformCase<T extends object>(item: T, to: 'camelCase'
  */
 export declare function getTextToken(string: unknown): string;
 export declare function transformPropsUnit(value?: string | number): string | undefined;
+/**
+ * Formats a byte count into a human-readable string (e.g. "1.2 MB").
+ */
+export declare function formatFileSize(bytes: number): string;
 export {};

package/dist/utils/helpers.js

@@ -69,7 +69,27 @@ function transformPropsUnit(value) {
 	if (value === void 0 || typeof value === "string" && isNaN(Number(value))) return value;
 	return `${value}px`;
 }
+/**
+* Formats a byte count into a human-readable string (e.g. "1.2 MB").
+*/
+function formatFileSize(bytes) {
+	if (!Number.isFinite(bytes) || bytes < 0) return "0 B";
+	if (bytes < 1024) return `${bytes} B`;
+	const units = [
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	let value = bytes / 1024;
+	let unitIndex = 0;
+	while (value >= 1024 && unitIndex < units.length - 1) {
+		value /= 1024;
+		unitIndex++;
+	}
+	return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[unitIndex]}`;
+}
 //#endregion
-export { formatInteger, getNonRootAttrs, getRootAttrs, getTextToken, transformCase, transformPropsUnit };
+export { formatFileSize, formatInteger, getNonRootAttrs, getRootAttrs, getTextToken, transformCase, transformPropsUnit };
 
 //# sourceMappingURL=helpers.js.map

package/dist/utils/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":[],"sources":["../../src/utils/helpers.ts"],"sourcesContent":["import type { SetupContext } from 'vue';\nimport { objectOmit, objectPick } from '@vueuse/shared';\nimport { camelCase, snakeCase } from 'scule';\n\ninterface FormatNumberOptions {\n  fractionDigits?: number;\n}\n\ntype SetupContextAttrs = SetupContext['attrs'];\n\ntype SetupContextAttrsKeys = (keyof SetupContextAttrs)[];\n\nfunction formatNumber(\n  amount: number | string,\n  { fractionDigits = 2 }: FormatNumberOptions,\n): string {\n  return new Intl.NumberFormat(undefined, {\n    maximumFractionDigits: fractionDigits,\n    minimumFractionDigits: fractionDigits,\n  }).format(Number(amount));\n}\n\n/**\n * Format number value without fraction\n * @param {number} amount\n */\nexport function formatInteger(amount: number | string): string {\n  return formatNumber(amount, { fractionDigits: 0 });\n}\n\n/**\n * Generates and returns the array of root allowed attributes\n * @param {SetupContextAttrs} data\n * @returns {SetupContextAttrsKeys}\n */\nfunction getRootKeys(data: SetupContextAttrs): SetupContextAttrsKeys {\n  return Object.keys(data).filter(key => key.startsWith('data-')) as SetupContextAttrsKeys;\n}\n\n/**\n * Picks only required attributes for root element\n * @param {SetupContextAttrs} data\n * @param {SetupContextAttrsKeys} include\n * @returns {Pick<SetupContextAttrs, any>}\n */\nexport function getRootAttrs(data: SetupContextAttrs, include: SetupContextAttrsKeys = ['class']) {\n  return objectPick(data, [...getRootKeys(data), ...include]);\n}\n\n/**\n * Omits root attributes from component's attributes\n * @param {SetupContextAttrs} data\n * @param {SetupContextAttrsKeys} exclude\n * @returns {Omit<SetupContextAttrs, any>}\n */\nexport function getNonRootAttrs(\n  data: SetupContextAttrs,\n  exclude: SetupContextAttrsKeys = ['class'],\n) {\n  return objectOmit(data, [...getRootKeys(data), ...exclude]);\n}\n\n/**\n * Transforms the keys of an object to either camelCase or snake_case\n * @param {T} item\n * @param {\"camelCase\" | \"snake_case\"} to\n * @returns {Record<string, any>}\n */\nexport function transformCase<T extends object>(\n  item: T,\n  to: 'camelCase' | 'snake_case',\n): Record<string, T[keyof T]> {\n  if (!item)\n    return item;\n\n  return Object.keys(item).reduce(\n    (acc, curr) => {\n      if (to === 'camelCase')\n        acc[camelCase(curr)] = item[curr as keyof T];\n      else acc[snakeCase(curr)] = item[curr as keyof T];\n\n      return acc;\n    },\n    {} as Record<string, T[keyof T]>,\n  );\n}\n\n/**\n *\n * @param {string} string - String to convert\n * @return {string} - String converted to text token, mostly used to matching keyword\n * @example\n * getTextToken('this is a sentence'); // thisisasentence\n */\n\nexport function getTextToken(string: unknown): string {\n  if (!string)\n    return '';\n\n  return string\n    .toString()\n    .toLowerCase()\n    .replace(/[^\\da-z]/gi, '');\n}\n\nexport function transformPropsUnit(value?: string | number): string | undefined {\n  if (value === undefined || (typeof value === 'string' && isNaN(Number(value))))\n    return value;\n  return `${value}px`;\n}\n"],"mappings":";;;AAYA,SAAS,aACP,QACA,EAAE,iBAAiB,KACX;AACR,QAAO,IAAI,KAAK,aAAa,KAAA,GAAW;EACtC,uBAAuB;EACvB,uBAAuB;EACxB,CAAC,CAAC,OAAO,OAAO,OAAO,CAAC;;;;;;AAO3B,SAAgB,cAAc,QAAiC;AAC7D,QAAO,aAAa,QAAQ,EAAE,gBAAgB,GAAG,CAAC;;;;;;;AAQpD,SAAS,YAAY,MAAgD;AACnE,QAAO,OAAO,KAAK,KAAK,CAAC,QAAO,QAAO,IAAI,WAAW,QAAQ,CAAC;;;;;;;;AASjE,SAAgB,aAAa,MAAyB,UAAiC,CAAC,QAAQ,EAAE;AAChG,QAAO,WAAW,MAAM,CAAC,GAAG,YAAY,KAAK,EAAE,GAAG,QAAQ,CAAC;;;;;;;;AAS7D,SAAgB,gBACd,MACA,UAAiC,CAAC,QAAQ,EAC1C;AACA,QAAO,WAAW,MAAM,CAAC,GAAG,YAAY,KAAK,EAAE,GAAG,QAAQ,CAAC;;;;;;;;AAS7D,SAAgB,cACd,MACA,IAC4B;AAC5B,KAAI,CAAC,KACH,QAAO;AAET,QAAO,OAAO,KAAK,KAAK,CAAC,QACtB,KAAK,SAAS;AACb,MAAI,OAAO,YACT,KAAI,UAAU,KAAK,IAAI,KAAK;MACzB,KAAI,UAAU,KAAK,IAAI,KAAK;AAEjC,SAAO;IAET,EAAE,CACH;;;;;;;;;AAWH,SAAgB,aAAa,QAAyB;AACpD,KAAI,CAAC,OACH,QAAO;AAET,QAAO,OACJ,UAAU,CACV,aAAa,CACb,QAAQ,cAAc,GAAG;;AAG9B,SAAgB,mBAAmB,OAA6C;AAC9E,KAAI,UAAU,KAAA,KAAc,OAAO,UAAU,YAAY,MAAM,OAAO,MAAM,CAAC,CAC3E,QAAO;AACT,QAAO,GAAG,MAAM"}
+{"version":3,"file":"helpers.js","names":[],"sources":["../../src/utils/helpers.ts"],"sourcesContent":["import type { SetupContext } from 'vue';\nimport { objectOmit, objectPick } from '@vueuse/shared';\nimport { camelCase, snakeCase } from 'scule';\n\ninterface FormatNumberOptions {\n  fractionDigits?: number;\n}\n\ntype SetupContextAttrs = SetupContext['attrs'];\n\ntype SetupContextAttrsKeys = (keyof SetupContextAttrs)[];\n\nfunction formatNumber(\n  amount: number | string,\n  { fractionDigits = 2 }: FormatNumberOptions,\n): string {\n  return new Intl.NumberFormat(undefined, {\n    maximumFractionDigits: fractionDigits,\n    minimumFractionDigits: fractionDigits,\n  }).format(Number(amount));\n}\n\n/**\n * Format number value without fraction\n * @param {number} amount\n */\nexport function formatInteger(amount: number | string): string {\n  return formatNumber(amount, { fractionDigits: 0 });\n}\n\n/**\n * Generates and returns the array of root allowed attributes\n * @param {SetupContextAttrs} data\n * @returns {SetupContextAttrsKeys}\n */\nfunction getRootKeys(data: SetupContextAttrs): SetupContextAttrsKeys {\n  return Object.keys(data).filter(key => key.startsWith('data-')) as SetupContextAttrsKeys;\n}\n\n/**\n * Picks only required attributes for root element\n * @param {SetupContextAttrs} data\n * @param {SetupContextAttrsKeys} include\n * @returns {Pick<SetupContextAttrs, any>}\n */\nexport function getRootAttrs(data: SetupContextAttrs, include: SetupContextAttrsKeys = ['class']) {\n  return objectPick(data, [...getRootKeys(data), ...include]);\n}\n\n/**\n * Omits root attributes from component's attributes\n * @param {SetupContextAttrs} data\n * @param {SetupContextAttrsKeys} exclude\n * @returns {Omit<SetupContextAttrs, any>}\n */\nexport function getNonRootAttrs(\n  data: SetupContextAttrs,\n  exclude: SetupContextAttrsKeys = ['class'],\n) {\n  return objectOmit(data, [...getRootKeys(data), ...exclude]);\n}\n\n/**\n * Transforms the keys of an object to either camelCase or snake_case\n * @param {T} item\n * @param {\"camelCase\" | \"snake_case\"} to\n * @returns {Record<string, any>}\n */\nexport function transformCase<T extends object>(\n  item: T,\n  to: 'camelCase' | 'snake_case',\n): Record<string, T[keyof T]> {\n  if (!item)\n    return item;\n\n  return Object.keys(item).reduce(\n    (acc, curr) => {\n      if (to === 'camelCase')\n        acc[camelCase(curr)] = item[curr as keyof T];\n      else acc[snakeCase(curr)] = item[curr as keyof T];\n\n      return acc;\n    },\n    {} as Record<string, T[keyof T]>,\n  );\n}\n\n/**\n *\n * @param {string} string - String to convert\n * @return {string} - String converted to text token, mostly used to matching keyword\n * @example\n * getTextToken('this is a sentence'); // thisisasentence\n */\n\nexport function getTextToken(string: unknown): string {\n  if (!string)\n    return '';\n\n  return string\n    .toString()\n    .toLowerCase()\n    .replace(/[^\\da-z]/gi, '');\n}\n\nexport function transformPropsUnit(value?: string | number): string | undefined {\n  if (value === undefined || (typeof value === 'string' && isNaN(Number(value))))\n    return value;\n  return `${value}px`;\n}\n\n/**\n * Formats a byte count into a human-readable string (e.g. \"1.2 MB\").\n */\nexport function formatFileSize(bytes: number): string {\n  if (!Number.isFinite(bytes) || bytes < 0)\n    return '0 B';\n  if (bytes < 1024)\n    return `${bytes} B`;\n  const units = ['KB', 'MB', 'GB', 'TB'];\n  let value = bytes / 1024;\n  let unitIndex = 0;\n  while (value >= 1024 && unitIndex < units.length - 1) {\n    value /= 1024;\n    unitIndex++;\n  }\n  return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[unitIndex]}`;\n}\n"],"mappings":";;;AAYA,SAAS,aACP,QACA,EAAE,iBAAiB,KACX;AACR,QAAO,IAAI,KAAK,aAAa,KAAA,GAAW;EACtC,uBAAuB;EACvB,uBAAuB;EACxB,CAAC,CAAC,OAAO,OAAO,OAAO,CAAC;;;;;;AAO3B,SAAgB,cAAc,QAAiC;AAC7D,QAAO,aAAa,QAAQ,EAAE,gBAAgB,GAAG,CAAC;;;;;;;AAQpD,SAAS,YAAY,MAAgD;AACnE,QAAO,OAAO,KAAK,KAAK,CAAC,QAAO,QAAO,IAAI,WAAW,QAAQ,CAAC;;;;;;;;AASjE,SAAgB,aAAa,MAAyB,UAAiC,CAAC,QAAQ,EAAE;AAChG,QAAO,WAAW,MAAM,CAAC,GAAG,YAAY,KAAK,EAAE,GAAG,QAAQ,CAAC;;;;;;;;AAS7D,SAAgB,gBACd,MACA,UAAiC,CAAC,QAAQ,EAC1C;AACA,QAAO,WAAW,MAAM,CAAC,GAAG,YAAY,KAAK,EAAE,GAAG,QAAQ,CAAC;;;;;;;;AAS7D,SAAgB,cACd,MACA,IAC4B;AAC5B,KAAI,CAAC,KACH,QAAO;AAET,QAAO,OAAO,KAAK,KAAK,CAAC,QACtB,KAAK,SAAS;AACb,MAAI,OAAO,YACT,KAAI,UAAU,KAAK,IAAI,KAAK;MACzB,KAAI,UAAU,KAAK,IAAI,KAAK;AAEjC,SAAO;IAET,EAAE,CACH;;;;;;;;;AAWH,SAAgB,aAAa,QAAyB;AACpD,KAAI,CAAC,OACH,QAAO;AAET,QAAO,OACJ,UAAU,CACV,aAAa,CACb,QAAQ,cAAc,GAAG;;AAG9B,SAAgB,mBAAmB,OAA6C;AAC9E,KAAI,UAAU,KAAA,KAAc,OAAO,UAAU,YAAY,MAAM,OAAO,MAAM,CAAC,CAC3E,QAAO;AACT,QAAO,GAAG,MAAM;;;;;AAMlB,SAAgB,eAAe,OAAuB;AACpD,KAAI,CAAC,OAAO,SAAS,MAAM,IAAI,QAAQ,EACrC,QAAO;AACT,KAAI,QAAQ,KACV,QAAO,GAAG,MAAM;CAClB,MAAM,QAAQ;EAAC;EAAM;EAAM;EAAM;EAAK;CACtC,IAAI,QAAQ,QAAQ;CACpB,IAAI,YAAY;AAChB,QAAO,SAAS,QAAQ,YAAY,MAAM,SAAS,GAAG;AACpD,WAAS;AACT;;AAEF,QAAO,GAAG,MAAM,QAAQ,SAAS,KAAK,IAAI,EAAE,CAAC,GAAG,MAAM"}

package/dist/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@rotki/ui-library",
-  "version": "2.20.1",
+  "version": "2.21.0",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {
@@ -4028,6 +4028,24 @@
                 "type": "boolean | undefined"
               }
             },
+            {
+              "name": "group-by",
+              "description": "",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "GroupBy<TItem> | undefined"
+              }
+            },
+            {
+              "name": "item-disabled",
+              "description": "",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "ItemDisabled<TItem> | undefined"
+              }
+            },
             {
               "name": "model-value",
               "description": "",
@@ -4176,8 +4194,37 @@
                 }
               ]
             },
+            {
+              "name": "group-header",
+              "vue-properties": [
+                {
+                  "name": "group",
+                  "type": "string"
+                },
+                {
+                  "name": "items",
+                  "type": "TItem[]"
+                }
+              ]
+            },
             {
               "name": "no-data"
+            },
+            {
+              "name": "placeholder",
+              "vue-properties": [
+                {
+                  "name": "disabled",
+                  "type": "boolean"
+                },
+                {
+                  "name": "readOnly",
+                  "type": "boolean"
+                }
+              ]
+            },
+            {
+              "name": "footer"
             }
           ],
           "js": {
@@ -4364,6 +4411,211 @@
             "event": "update:modelValue"
           }
         },
+        {
+          "name": "RuiFileUpload",
+          "source": {
+            "module": "@rotki/ui-library/components/forms/file-upload/RuiFileUpload.vue",
+            "symbol": "RuiFileUpload"
+          },
+          "attributes": [
+            {
+              "name": "accept",
+              "description": "File type filter (HTML accept attribute syntax). e.g. '.csv', 'image/*', '.png,.jpg'",
+              "required": false,
+              "default": "'*'",
+              "value": {
+                "kind": "expression",
+                "type": "string | undefined"
+              }
+            },
+            {
+              "name": "multiple",
+              "description": "Allow multiple file selection.",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean | undefined"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean | undefined"
+              }
+            },
+            {
+              "name": "loading",
+              "description": "Shows a loading overlay (consumer-driven, e.g. while uploading).",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean | undefined"
+              }
+            },
+            {
+              "name": "progress",
+              "description": "Upload progress 0-100. When provided alongside `loading`, the overlay shows a determinate progress bar with percentage.",
+              "required": false,
+              "default": "undefined",
+              "value": {
+                "kind": "expression",
+                "type": "number | undefined"
+              }
+            },
+            {
+              "name": "uploaded",
+              "description": "Renders the success state border/icon. Consumer toggles back to false.",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean | undefined"
+              }
+            },
+            {
+              "name": "max-size",
+              "description": "Optional max size per file in bytes; failures emit `error` and set internal error state.",
+              "required": false,
+              "default": "undefined",
+              "value": {
+                "kind": "expression",
+                "type": "number | undefined"
+              }
+            },
+            {
+              "name": "error-messages",
+              "description": "External error messages (e.g. from Vuelidate). Shown via the standard form detail block.",
+              "required": false,
+              "default": "[]",
+              "value": {
+                "kind": "expression",
+                "type": "string | string[] | undefined"
+              }
+            },
+            {
+              "name": "hint",
+              "description": "Hint text below the dropzone.",
+              "required": false,
+              "default": "''",
+              "value": {
+                "kind": "expression",
+                "type": "string | undefined"
+              }
+            },
+            {
+              "name": "no-drop",
+              "description": "Disable drag-and-drop; the dropzone becomes click-only (matches rotki.com use case).",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean | undefined"
+              }
+            },
+            {
+              "name": "upload-text",
+              "description": "Replace the default \"Drag and drop or {button}\" copy.",
+              "required": false,
+              "default": "'Drag and drop or'",
+              "value": {
+                "kind": "expression",
+                "type": "string | undefined"
+              }
+            },
+            {
+              "name": "click-to-upload-text",
+              "description": "Label shown on the inline button when no file is selected.",
+              "required": false,
+              "default": "'click to upload'",
+              "value": {
+                "kind": "expression",
+                "type": "string | undefined"
+              }
+            },
+            {
+              "name": "replace-text",
+              "description": "Label shown on the inline button when one or more files are already selected.",
+              "required": false,
+              "default": "'replace file'",
+              "value": {
+                "kind": "expression",
+                "type": "string | undefined"
+              }
+            },
+            {
+              "name": "hide-details",
+              "description": "Hide the bottom hint/error details strip.",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean | undefined"
+              }
+            },
+            {
+              "name": "model-value",
+              "description": "",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "File | File[] | undefined"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "preview",
+              "vue-properties": [
+                {
+                  "name": "files",
+                  "type": "File[]"
+                },
+                {
+                  "name": "remove",
+                  "type": "() => void"
+                }
+              ]
+            },
+            {
+              "name": "icon"
+            },
+            {
+              "name": "description"
+            }
+          ],
+          "js": {
+            "events": [
+              {
+                "name": "error",
+                "arguments": [
+                  {
+                    "name": "argument",
+                    "type": "[message: string]"
+                  }
+                ]
+              },
+              {
+                "name": "update:modelValue",
+                "arguments": [
+                  {
+                    "name": "argument",
+                    "type": "[value: File | File[] | undefined]"
+                  }
+                ]
+              }
+            ]
+          },
+          "vue-model": {
+            "prop": "modelValue",
+            "event": "update:modelValue"
+          }
+        },
         {
           "name": "RuiRevealableTextField",
           "source": {
@@ -6466,6 +6718,15 @@
                 "type": "boolean | undefined"
               }
             },
+            {
+              "name": "anchor-el",
+              "description": "Optional external element to anchor the menu to, instead of the\nactivator slot's wrapper. When set, the menu's position is computed\nagainst this element.",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "HTMLElement | undefined"
+              }
+            },
             {
               "name": "model-value",
               "description": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rotki/ui-library",
-  "version": "2.20.1",
+  "version": "2.21.0",
   "description": "A vue design system and component library for rotki",
   "type": "module",
   "keywords": [