@rotki/ui-library 0.13.0 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/dist/Accordion-BFcz_iFc.js +8386 -0
  2. package/dist/breakpoint-CRvqq4aP.js +37 -0
  3. package/dist/components/accordions/accordion/Accordion.vue.d.ts +71 -0
  4. package/dist/components/accordions/accordions/Accordions.vue.d.ts +31 -0
  5. package/dist/components/alerts/Alert.vue.d.ts +10 -10
  6. package/dist/components/buttons/button/Button.vue.d.ts +4 -4
  7. package/dist/components/buttons/button-group/ButtonGroup.vue.d.ts +3 -3
  8. package/dist/components/cards/Card.vue.d.ts +3 -3
  9. package/dist/components/chips/Chip.vue.d.ts +18 -18
  10. package/dist/components/forms/auto-complete/AutoComplete.vue.d.ts +58 -172
  11. package/dist/components/forms/auto-complete/AutoCompleteSelection.vue.d.ts +26 -77
  12. package/dist/components/forms/checkbox/Checkbox.vue.d.ts +18 -18
  13. package/dist/components/forms/radio-button/radio/Radio.vue.d.ts +18 -18
  14. package/dist/components/forms/radio-button/radio-group/RadioGroup.vue.d.ts +18 -18
  15. package/dist/components/forms/revealable-text-field/RevealableTextField.vue.d.ts +9 -9
  16. package/dist/components/forms/select/RuiMenuSelect.vue.d.ts +155 -0
  17. package/dist/components/forms/slider/Slider.vue.d.ts +192 -0
  18. package/dist/components/forms/switch/Switch.vue.d.ts +18 -18
  19. package/dist/components/forms/text-area/TextArea.vue.d.ts +9 -9
  20. package/dist/components/forms/text-field/TextField.vue.d.ts +9 -9
  21. package/dist/components/icons/Icon.vue.d.ts +6 -6
  22. package/dist/components/index.d.ts +6 -1
  23. package/dist/components/index.es.js +38 -42
  24. package/dist/components/loaders/Skeleton.vue.d.ts +6 -6
  25. package/dist/components/loaders/SkeletonBase.vue.d.ts +3 -3
  26. package/dist/components/logos/Logo.vue.d.ts +42 -4
  27. package/dist/components/overlays/badge/Badge.vue.d.ts +15 -15
  28. package/dist/components/overlays/dialog/Dialog.vue.d.ts +8 -8
  29. package/dist/components/overlays/menu/Menu.vue.d.ts +191 -0
  30. package/dist/components/progress/Progress.vue.d.ts +6 -6
  31. package/dist/components/tables/DataTable.vue.d.ts +13 -8
  32. package/dist/components/tables/TableHead.vue.d.ts +15 -3
  33. package/dist/components/tables/TablePagination.vue.d.ts +10 -0
  34. package/dist/components/tabs/tab/Tab.vue.d.ts +28 -28
  35. package/dist/components/tabs/tabs/Tabs.vue.d.ts +9 -9
  36. package/dist/composables/defaults/table.d.ts +1 -0
  37. package/dist/composables/dropdown-menu.d.ts +40 -0
  38. package/dist/composables/forms/auto-complete/index.d.ts +9 -0
  39. package/dist/composables/index.es.js +5 -85
  40. package/dist/composables/popper.d.ts +2 -2
  41. package/dist/composables/sticky-header.d.ts +5 -5
  42. package/dist/consts/forms/auto-complete/index.d.ts +4 -0
  43. package/dist/index-x2urm9HD.js +176 -0
  44. package/dist/index.d.ts +1 -1
  45. package/dist/index.es.js +2787 -2786
  46. package/dist/style.css +1 -1
  47. package/dist/theme/index.es.js +1 -1
  48. package/dist/utils/assert.d.ts +1 -0
  49. package/dist/utils/forms/auto-complete/index.d.ts +2 -0
  50. package/dist/utils/helpers.d.ts +7 -0
  51. package/package.json +46 -48
  52. package/dist/index-Ph4f0pga.js +0 -7435
  53. package/dist/theme-DT8UjYf9.js +0 -124
  54. /package/dist/{colors-ikihApJv.js → colors-D563Ic3q.js} +0 -0
@@ -8,6 +8,10 @@ export interface Props {
8
8
  align?: 'start' | 'center' | 'end';
9
9
  }
10
10
  declare const _default: import("vue").DefineComponent<{
11
+ vertical: {
12
+ type: globalThis.PropType<boolean>;
13
+ default: boolean;
14
+ };
11
15
  color: {
12
16
  type: globalThis.PropType<"primary" | "secondary" | "error" | "warning" | "info" | "success">;
13
17
  default: undefined;
@@ -16,10 +20,6 @@ declare const _default: import("vue").DefineComponent<{
16
20
  type: globalThis.PropType<boolean>;
17
21
  default: boolean;
18
22
  };
19
- vertical: {
20
- type: globalThis.PropType<boolean>;
21
- default: boolean;
22
- };
23
23
  modelValue: {
24
24
  type: globalThis.PropType<string | number>;
25
25
  default: undefined;
@@ -35,6 +35,10 @@ declare const _default: import("vue").DefineComponent<{
35
35
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
36
36
  "update:modelValue": (modelValue: string | number) => void;
37
37
  }, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
38
+ vertical: {
39
+ type: globalThis.PropType<boolean>;
40
+ default: boolean;
41
+ };
38
42
  color: {
39
43
  type: globalThis.PropType<"primary" | "secondary" | "error" | "warning" | "info" | "success">;
40
44
  default: undefined;
@@ -43,10 +47,6 @@ declare const _default: import("vue").DefineComponent<{
43
47
  type: globalThis.PropType<boolean>;
44
48
  default: boolean;
45
49
  };
46
- vertical: {
47
- type: globalThis.PropType<boolean>;
48
- default: boolean;
49
- };
50
50
  modelValue: {
51
51
  type: globalThis.PropType<string | number>;
52
52
  default: undefined;
@@ -62,9 +62,9 @@ declare const _default: import("vue").DefineComponent<{
62
62
  }>> & {
63
63
  "onUpdate:modelValue"?: ((modelValue: string | number) => any) | undefined;
64
64
  }, {
65
+ vertical: boolean;
65
66
  color: "primary" | "secondary" | "error" | "warning" | "info" | "success";
66
67
  disabled: boolean;
67
- vertical: boolean;
68
68
  modelValue: string | number;
69
69
  align: "end" | "center" | "start";
70
70
  grow: boolean;
@@ -4,6 +4,7 @@ export interface TableOptions {
4
4
  itemsPerPage: Ref<number>;
5
5
  globalItemsPerPage: MaybeRef<boolean>;
6
6
  limits: MaybeRef<number[]>;
7
+ stickyOffset: MaybeRef<number>;
7
8
  }
8
9
  export declare const TableSymbol: InjectionKey<TableOptions>;
9
10
  export declare function createTableDefaults(options?: Partial<TableOptions>): TableOptions;
@@ -0,0 +1,40 @@
1
+ import type { Ref } from 'vue';
2
+ export interface DropdownOptions<T, K extends keyof T = keyof T> {
3
+ options: Ref<T[]>;
4
+ dense?: Ref<boolean>;
5
+ value: Ref<T | undefined>;
6
+ menuRef: Ref<HTMLElement>;
7
+ keyAttr?: K;
8
+ textAttr?: keyof T;
9
+ appendWidth?: number;
10
+ prependWidth?: number;
11
+ itemHeight?: number;
12
+ overscan?: number;
13
+ }
14
+ export declare function useDropdownMenu<T extends object | string, K extends keyof T>({ appendWidth, dense, itemHeight, keyAttr, menuRef, options, overscan, prependWidth, textAttr, value, }: DropdownOptions<T, K>): {
15
+ containerProps: {
16
+ ref: Ref<HTMLElement | null>;
17
+ onScroll: () => void;
18
+ style: import("vue").StyleValue;
19
+ };
20
+ getIdentifier: (item: T) => T[K] | T;
21
+ getText: (item: T) => T[keyof T] | T;
22
+ isActiveItem: (item: T) => boolean;
23
+ isOpen: Ref<boolean>;
24
+ menuWidth: globalThis.ComputedRef<string>;
25
+ renderedData: globalThis.ComputedRef<T[]>;
26
+ toggle: (state?: boolean) => void;
27
+ valueKey: globalThis.ComputedRef<T | T[K] | undefined>;
28
+ wrapperProps: globalThis.ComputedRef<{
29
+ style: {
30
+ width: string;
31
+ height: string;
32
+ marginTop: string;
33
+ } | {
34
+ width: string;
35
+ height: string;
36
+ marginLeft: string;
37
+ display: string;
38
+ };
39
+ }>;
40
+ };
@@ -0,0 +1,9 @@
1
+ export declare function useAutoCompleteProps<T extends object>(props: {
2
+ keyProp?: Extract<keyof T, string>;
3
+ textProp?: Extract<keyof T, string>;
4
+ itemDisabledProp?: Extract<keyof T, string>;
5
+ }): {
6
+ getItemKey: (item: T) => string | undefined;
7
+ getTextValue: (item: T) => string | undefined;
8
+ isItemDisabled: (item: T) => boolean;
9
+ };
@@ -1,87 +1,7 @@
1
- import { u as A, a as $ } from "../theme-DT8UjYf9.js";
2
- import { useWindowSize as m, breakpointsTailwind as d, useBreakpoints as w } from "@vueuse/core";
3
- import { computed as _ } from "vue";
4
- import { get as h } from "@vueuse/shared";
5
- import "../icons/icons_1.es.js";
6
- import "../icons/icons_2.es.js";
7
- import "../icons/icons_5.es.js";
8
- import "../colors-ikihApJv.js";
9
- const C = /\d/, g = ["-", "_", "/", "."];
10
- function E(e = "") {
11
- if (!C.test(e))
12
- return e !== e.toLowerCase();
13
- }
14
- function S(e, n) {
15
- const o = n ?? g, r = [];
16
- if (!e || typeof e != "string")
17
- return r;
18
- let t = "", i, p;
19
- for (const c of e) {
20
- const f = o.includes(c);
21
- if (f === !0) {
22
- r.push(t), t = "", i = void 0;
23
- continue;
24
- }
25
- const u = E(c);
26
- if (p === !1) {
27
- if (i === !1 && u === !0) {
28
- r.push(t), t = c, i = u;
29
- continue;
30
- }
31
- if (i === !0 && u === !1 && t.length > 1) {
32
- const s = t.at(-1);
33
- r.push(t.slice(0, Math.max(0, t.length - 1))), t = s + c, i = u;
34
- continue;
35
- }
36
- }
37
- t += c, i = u, p = f;
38
- }
39
- return r.push(t), r;
40
- }
41
- function y(e) {
42
- return e ? e[0].toUpperCase() + e.slice(1) : "";
43
- }
44
- function z(e) {
45
- return e ? e[0].toLowerCase() + e.slice(1) : "";
46
- }
47
- function R(e, n) {
48
- return e ? (Array.isArray(e) ? e : S(e)).map((o) => y(n != null && n.normalize ? o.toLowerCase() : o)).join("") : "";
49
- }
50
- function l(e, n) {
51
- return z(R(e || "", n));
52
- }
53
- function B() {
54
- const { width: e } = m(), n = {
55
- xs: 0,
56
- ...d
57
- }, o = w(n), r = Object.keys, t = r(n), i = t.map(
58
- (s, a) => [
59
- s,
60
- a < t.length - 1 ? o.between(s, t[a + 1]) : o[s]
61
- ]
62
- ), p = i.map(([s, a]) => [
63
- l(`is_${s}`),
64
- a
65
- ]), c = t.map((s) => [
66
- l(`is_${s}_and_up`),
67
- o.greaterOrEqual(s)
68
- ]), f = t.map((s) => [
69
- l(`is_${s}_and_down`),
70
- o.smaller(s)
71
- ]), u = _(() => {
72
- var s;
73
- return ((s = i.find((a) => h(a[1]))) == null ? void 0 : s[0]) || "";
74
- });
75
- return {
76
- ...Object.fromEntries(p),
77
- ...Object.fromEntries(c),
78
- ...Object.fromEntries(f),
79
- name: u,
80
- width: e
81
- };
82
- }
1
+ import { u as s, a } from "../index-x2urm9HD.js";
2
+ import { u } from "../breakpoint-CRvqq4aP.js";
83
3
  export {
84
- B as useBreakpoint,
85
- A as useIcons,
86
- $ as useRotkiTheme
4
+ u as useBreakpoint,
5
+ s as useIcons,
6
+ a as useRotkiTheme
87
7
  };
@@ -18,8 +18,8 @@ export declare const DEFAULT_POPPER_OPTIONS: PopperOptions;
18
18
  export declare const createPopper: <TModifier extends Partial<import("@popperjs/core").Modifier<any, any>>>(reference: Element | VirtualElement, popper: HTMLElement, options?: Partial<import("@popperjs/core").OptionsGeneric<TModifier>> | undefined) => Instance;
19
19
  export declare function usePopper(options: Ref<PopperOptions>, disabled?: Ref<boolean>, openDelay?: Ref<number>, closeDelay?: Ref<number>, virtualReference?: Ref<Element | VirtualElement>): {
20
20
  instance: Ref<Instance | null>;
21
- onMouseLeave: () => void;
22
- onMouseOver: () => void;
21
+ onClose: () => void;
22
+ onOpen: () => void;
23
23
  onPopperLeave: () => void;
24
24
  open: Ref<boolean>;
25
25
  popper: Ref<MaybeElement>;
@@ -1,9 +1,9 @@
1
- import type { Ref } from 'vue';
1
+ import type { MaybeRef } from '@vueuse/shared';
2
2
  /**
3
3
  * Setup sticky table header
4
4
  */
5
- export declare function useStickyTableHeader(offsetTop?: Ref<number>, sticky?: Ref<boolean>): {
6
- stick: Ref<boolean>;
7
- table: Ref<HTMLTableElement | null>;
8
- tableScroller: Ref<HTMLElement | null>;
5
+ export declare function useStickyTableHeader(sticky?: MaybeRef<boolean>, offsetTop?: MaybeRef<number>): {
6
+ stick: globalThis.Ref<boolean>;
7
+ table: globalThis.Ref<HTMLTableElement | null>;
8
+ tableScroller: globalThis.Ref<HTMLElement | null>;
9
9
  };
@@ -0,0 +1,4 @@
1
+ declare const defaultTextProp = "text";
2
+ declare const defaultKeyProp = "id";
3
+ declare const defaultDisabledProp = "disabled";
4
+ export { defaultKeyProp, defaultDisabledProp, defaultTextProp, };
@@ -0,0 +1,176 @@
1
+ import { RiArrowDownLine as T, RiArrowDropDownFill as $, RiArrowLeftDoubleLine as v, RiArrowLeftLine as D, RiArrowLeftSLine as I, RiArrowRightDoubleLine as S, RiArrowRightLine as U, RiArrowRightSLine as B } from "./icons/icons_1.es.js";
2
+ import { RiDatabase2Line as M } from "./icons/icons_2.es.js";
3
+ import { RiAlertFill as _, RiAlertLine as j, RiCheckLine as O, RiCheckboxBlankCircleFill as P, RiCheckboxBlankCircleLine as V, RiCheckboxBlankLine as W, RiCheckboxCircleFill as q, RiCheckboxCircleLine as z, RiCheckboxFill as G, RiCheckboxIndeterminateFill as H, RiCloseCircleLine as N, RiCloseFill as J, RiCloseLine as K, RiErrorWarningFill as Q, RiErrorWarningLine as X, RiEyeLine as Y, RiEyeOffLine as Z, RiInformationFill as ee, RiInformationLine as ie, RiRadioButtonLine as re, RiMoreFill as te } from "./icons/icons_5.es.js";
4
+ import { createGlobalState as oe, useColorMode as ne } from "@vueuse/core";
5
+ import { ref as b, computed as R, watch as ae } from "vue";
6
+ import { set as g, get as t } from "@vueuse/shared";
7
+ import { c as se } from "./colors-D563Ic3q.js";
8
+ const we = oe(() => {
9
+ const e = [
10
+ _,
11
+ j,
12
+ T,
13
+ $,
14
+ v,
15
+ D,
16
+ I,
17
+ S,
18
+ U,
19
+ B,
20
+ O,
21
+ P,
22
+ V,
23
+ W,
24
+ q,
25
+ z,
26
+ G,
27
+ H,
28
+ N,
29
+ J,
30
+ K,
31
+ M,
32
+ Q,
33
+ X,
34
+ Y,
35
+ Z,
36
+ ee,
37
+ ie,
38
+ re,
39
+ te
40
+ ], i = b({});
41
+ return { registeredIcons: i, registerIcons: (o) => {
42
+ g(i, {
43
+ ...t(i),
44
+ ...Object.fromEntries(
45
+ [...e, ...o].map(({ name: r, path: a }) => [r, a])
46
+ )
47
+ });
48
+ } };
49
+ }), n = {
50
+ auto: "auto",
51
+ dark: "dark",
52
+ light: "light"
53
+ };
54
+ function k(e) {
55
+ return Object.fromEntries(
56
+ se.map((i) => [
57
+ i,
58
+ {
59
+ darker: `var(--rui-${e}-${i}-darker)`,
60
+ DEFAULT: `var(--rui-${e}-${i}-main)`,
61
+ lighter: `var(--rui-${e}-${i}-lighter)`
62
+ }
63
+ ])
64
+ );
65
+ }
66
+ const w = {
67
+ dark: k("dark"),
68
+ light: k("light")
69
+ }, p = b({ ...w });
70
+ function Ae() {
71
+ const { state: e, store: i, system: l } = ne(), o = R(
72
+ () => t(i) === n.auto
73
+ ), r = R(
74
+ () => t(o) && t(l) === n.light || t(e) === n.light
75
+ ), a = R(
76
+ () => t(o) && t(l) === n.dark || t(e) === n.dark
77
+ ), h = R(() => t(r) ? t(p).light : t(p).dark), s = (m) => {
78
+ g(i, m || n.auto);
79
+ }, d = () => {
80
+ t(o) ? s(n.light) : t(r) ? s(n.dark) : t(a) && s(n.auto);
81
+ }, c = (m) => {
82
+ g(p, m);
83
+ };
84
+ return {
85
+ config: p,
86
+ init: (m) => {
87
+ s(m.mode ?? n.auto), c(m.config ?? { ...w }), typeof window < "u" && ae(
88
+ [r, h],
89
+ ([y, x]) => {
90
+ const F = Object.entries(x).map(([u, f]) => ({
91
+ [`--rui-${u}-darker`]: f.darker,
92
+ [`--rui-${u}-lighter`]: f.lighter,
93
+ [`--rui-${u}-main`]: f.DEFAULT
94
+ })).reduce((u, f) => ({ ...u, ...f }), {}), C = y ? n.light : n.dark, E = {
95
+ "--rui-text-disabled": `var(--rui-${C}-text-disabled)`,
96
+ "--rui-text-primary": `var(--rui-${C}-text-primary)`,
97
+ "--rui-text-secondary": `var(--rui-${C}-text-secondary)`
98
+ };
99
+ Object.entries({
100
+ ...F,
101
+ ...E
102
+ }).forEach(([u, f]) => {
103
+ document.documentElement.style.setProperty(u, f);
104
+ });
105
+ },
106
+ { immediate: !0 }
107
+ );
108
+ },
109
+ isAutoControlled: o,
110
+ isDark: a,
111
+ isLight: r,
112
+ setThemeConfig: c,
113
+ state: e,
114
+ store: i,
115
+ switchThemeScheme: s,
116
+ theme: h,
117
+ toggleThemeMode: d
118
+ };
119
+ }
120
+ const le = /\d/, ce = ["-", "_", "/", "."];
121
+ function ue(e = "") {
122
+ if (!le.test(e))
123
+ return e !== e.toLowerCase();
124
+ }
125
+ function A(e, i) {
126
+ const l = i ?? ce, o = [];
127
+ if (!e || typeof e != "string")
128
+ return o;
129
+ let r = "", a, h;
130
+ for (const s of e) {
131
+ const d = l.includes(s);
132
+ if (d === !0) {
133
+ o.push(r), r = "", a = void 0;
134
+ continue;
135
+ }
136
+ const c = ue(s);
137
+ if (h === !1) {
138
+ if (a === !1 && c === !0) {
139
+ o.push(r), r = s, a = c;
140
+ continue;
141
+ }
142
+ if (a === !0 && c === !1 && r.length > 1) {
143
+ const L = r.at(-1);
144
+ o.push(r.slice(0, Math.max(0, r.length - 1))), r = L + s, a = c;
145
+ continue;
146
+ }
147
+ }
148
+ r += s, a = c, h = d;
149
+ }
150
+ return o.push(r), o;
151
+ }
152
+ function fe(e) {
153
+ return e ? e[0].toUpperCase() + e.slice(1) : "";
154
+ }
155
+ function me(e) {
156
+ return e ? e[0].toLowerCase() + e.slice(1) : "";
157
+ }
158
+ function he(e, i) {
159
+ return e ? (Array.isArray(e) ? e : A(e)).map((l) => fe(i != null && i.normalize ? l.toLowerCase() : l)).join("") : "";
160
+ }
161
+ function ye(e, i) {
162
+ return me(he(e || "", i));
163
+ }
164
+ function de(e, i) {
165
+ return e ? (Array.isArray(e) ? e : A(e)).map((l) => l.toLowerCase()).join(i ?? "-") : "";
166
+ }
167
+ function xe(e) {
168
+ return de(e || "", "_");
169
+ }
170
+ export {
171
+ n as T,
172
+ Ae as a,
173
+ ye as c,
174
+ xe as s,
175
+ we as u
176
+ };
package/dist/index.d.ts CHANGED
@@ -12,7 +12,7 @@ export { StepperState };
12
12
  export interface RuiOptions {
13
13
  theme?: InitThemeOptions;
14
14
  defaults?: {
15
- table?: TableOptions;
15
+ table?: Partial<TableOptions>;
16
16
  };
17
17
  }
18
18
  export declare function createRui(options?: RuiOptions): {