@rotki/ui-library 2.14.1 → 2.16.0

package/dist/components/buttons/button/RuiButton.vue.d.ts

@@ -1,14 +1,15 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
+import { type ButtonSize, ButtonVariant } from '../../../components/buttons/button/button-props.js';
 export interface Props<T = undefined> {
     disabled?: boolean;
     loading?: boolean;
     color?: ContextColorsType;
     rounded?: boolean;
     elevation?: number | string | null;
-    variant?: 'default' | 'outlined' | 'text' | 'fab' | 'list';
+    variant?: ButtonVariant;
     icon?: boolean;
     active?: boolean;
-    size?: 'sm' | 'lg';
+    size?: ButtonSize;
     tag?: 'button' | 'a';
     type?: 'button' | 'submit';
     modelValue?: T;

package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,104 @@
+import { ButtonVariant, getButtonSpinnerSize } from "./button-props.js";
+import { buttonStyles } from "./button-styles.js";
+import RuiProgress_default from "../../progress/RuiProgress.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, useSlots, withCtx } from "vue";
+import { get } from "@vueuse/shared";
+//#region src/components/buttons/button/RuiButton.vue?vue&type=script&setup=true&lang.ts
+var RuiButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiButton",
+	inheritAttrs: false,
+	__name: "RuiButton",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		color: { default: () => void 0 },
+		rounded: {
+			type: Boolean,
+			default: false
+		},
+		elevation: { default: null },
+		variant: { default: () => ButtonVariant.default },
+		icon: {
+			type: Boolean,
+			default: false
+		},
+		active: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: () => void 0 },
+		tag: { default: "button" },
+		type: { default: "button" },
+		modelValue: { default: () => void 0 },
+		hideFocusIndicator: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const slots = useSlots();
+		const btnValue = computed(() => __props.modelValue);
+		const defaultElevation = computed(() => __props.variant === ButtonVariant.fab ? 6 : 0);
+		const usedElevation = computed(() => __props.disabled ? 0 : __props.elevation ?? get(defaultElevation));
+		const spinnerSize = computed(() => getButtonSpinnerSize(__props.size));
+		const ui = computed(() => buttonStyles({
+			variant: __props.variant,
+			color: __props.color ?? "grey",
+			size: __props.size,
+			rounded: __props.rounded,
+			icon: __props.icon,
+			active: __props.active,
+			loading: __props.loading,
+			hideFocusIndicator: __props.hideFocusIndicator
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.tag), mergeProps({
+				class: [unref(ui).root(), `shadow-${unref(usedElevation)}`],
+				disabled: __props.disabled || __props.loading,
+				type: __props.tag === "button" ? __props.type : void 0,
+				"data-variant": __props.variant,
+				"data-color": __props.color,
+				"data-active": __props.active || void 0
+			}, _ctx.$attrs, { onClick: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", unref(btnValue))) }), {
+				default: withCtx(() => [
+					renderSlot(_ctx.$slots, "prepend"),
+					slots.default ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass(unref(ui).label()),
+						"data-id": "btn-label"
+					}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "append"),
+					__props.loading ? (openBlock(), createBlock(RuiProgress_default, {
+						key: 1,
+						circular: "",
+						"data-spinner": "",
+						class: normalizeClass(unref(ui).spinner()),
+						variant: "indeterminate",
+						thickness: "2",
+						size: unref(spinnerSize)
+					}, null, 8, ["class", "size"])) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 16, [
+				"class",
+				"disabled",
+				"type",
+				"data-variant",
+				"data-color",
+				"data-active"
+			]);
+		};
+	}
+});
+//#endregion
+export { RuiButton_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiButton.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiButton.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type ButtonSize, ButtonVariant, FAB_DEFAULT_ELEVATION, getButtonSpinnerSize, NO_ELEVATION } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  elevation?: number | string | null;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  elevation = null,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:modelValue': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst defaultElevation = computed<number>(() => variant === ButtonVariant.fab ? FAB_DEFAULT_ELEVATION : NO_ELEVATION);\nconst usedElevation = computed<number | string>(() => disabled ? NO_ELEVATION : elevation ?? get(defaultElevation));\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(size));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant,\n  color: color ?? 'grey',\n  size,\n  rounded,\n  icon,\n  active,\n  loading,\n  hideFocusIndicator,\n}));\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"[\n      ui.root(),\n      `shadow-${usedElevation}`,\n    ]\"\n    :disabled=\"disabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"variant\"\n    :data-color=\"color\"\n    :data-active=\"active || undefined\"\n    v-bind=\"$attrs\"\n    @click=\"emit('update:modelValue', btnValue)\"\n  >\n    <slot name=\"prepend\" />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n  </Component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,OAAO;EAIb,MAAM,QAAQ,UAIV;EAEJ,MAAM,WAAW,eAA8B,QAAA,WAAW;EAE1D,MAAM,mBAAmB,eAAuB,QAAA,YAAY,cAAc,MAAA,IAAA,EAA2C;EACrH,MAAM,gBAAgB,eAAgC,QAAA,WAAA,IAA0B,QAAA,aAAa,IAAI,iBAAiB,CAAC;EAEnH,MAAM,cAAc,eAAuB,qBAAqB,QAAA,KAAK,CAAC;EAEtE,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAM,QAAA;GACN,OAAO,QAAA,SAAS;GAChB,MAAG,QAAA;GACH,SAAM,QAAA;GACN,MAAG,QAAA;GACH,QAAK,QAAA;GACL,SAAM,QAAA;GACN,oBAAiB,QAAA;GAClB,CAAC,CAAC;;uBAID,YAgCY,wBA/BL,QAAA,IAAG,EADV,WAgCY;IA9BT,OAAK,CAAU,MAAA,GAAE,CAAC,MAAI,EAAA,UAAoB,MAAA,cAAa,GAAA;IAIvD,UAAU,QAAA,YAAY,QAAA;IACtB,MAAM,QAAA,QAAG,WAAgB,QAAA,OAAO,KAAA;IAChC,gBAAc,QAAA;IACd,cAAY,QAAA;IACZ,eAAa,QAAA,UAAU,KAAA;MAChBA,KAAAA,QAAM,EACb,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,qBAAsB,MAAA,SAAQ,CAAA,GAAA,CAAA,EAAA;2BAEnB;KAAvB,WAAuB,KAAA,QAAA,UAAA;KAEf,MAAM,WAAA,WAAA,EADd,mBAMO,QAAA;;MAJJ,OAAK,eAAE,MAAA,GAAE,CAAC,OAAK,CAAA;MAChB,WAAQ;SAER,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAEV,WAAsB,KAAA,QAAA,SAAA;KAEd,QAAA,WAAA,WAAA,EADR,YAQE,qBAAA;;MANA,UAAA;MACA,gBAAA;MACC,OAAK,eAAE,MAAA,GAAE,CAAC,SAAO,CAAA;MAClB,SAAQ;MACR,WAAU;MACT,MAAM,MAAA,YAAA"}

package/dist/components/buttons/button/button-props.d.ts

@@ -0,0 +1,16 @@
+export declare const ButtonVariant: {
+    readonly default: "default";
+    readonly outlined: "outlined";
+    readonly text: "text";
+    readonly fab: "fab";
+    readonly list: "list";
+};
+export type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];
+export declare const ButtonSize: {
+    readonly sm: "sm";
+    readonly lg: "lg";
+};
+export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];
+export declare const FAB_DEFAULT_ELEVATION = 6;
+export declare const NO_ELEVATION = 0;
+export declare function getButtonSpinnerSize(size?: ButtonSize): number;

package/dist/components/buttons/button/button-props.js

@@ -0,0 +1,20 @@
+//#region src/components/buttons/button/button-props.ts
+var ButtonVariant = {
+	default: "default",
+	outlined: "outlined",
+	text: "text",
+	fab: "fab",
+	list: "list"
+};
+var SPINNER_SIZES = {
+	sm: 18,
+	lg: 26
+};
+var DEFAULT_SPINNER_SIZE = 22;
+function getButtonSpinnerSize(size) {
+	return size && SPINNER_SIZES[size] || DEFAULT_SPINNER_SIZE;
+}
+//#endregion
+export { ButtonVariant, getButtonSpinnerSize };
+
+//# sourceMappingURL=button-props.js.map

package/dist/components/buttons/button/button-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-props.js","names":[],"sources":["../../../../src/components/buttons/button/button-props.ts"],"sourcesContent":["export const ButtonVariant = {\n  default: 'default',\n  outlined: 'outlined',\n  text: 'text',\n  fab: 'fab',\n  list: 'list',\n} as const;\n\nexport type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];\n\nexport const ButtonSize = {\n  sm: 'sm',\n  lg: 'lg',\n} as const;\n\nexport type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];\n\nconst SPINNER_SIZES: Record<string, number> = { sm: 18, lg: 26 };\nconst DEFAULT_SPINNER_SIZE = 22;\n\nexport const FAB_DEFAULT_ELEVATION = 6;\n\nexport const NO_ELEVATION = 0;\n\nexport function getButtonSpinnerSize(size?: ButtonSize): number {\n  return (size && SPINNER_SIZES[size]) || DEFAULT_SPINNER_SIZE;\n}\n"],"mappings":";AAAA,IAAa,gBAAgB;CAC3B,SAAS;CACT,UAAU;CACV,MAAM;CACN,KAAK;CACL,MAAM;CACP;AAWD,IAAM,gBAAwC;CAAE,IAAI;CAAI,IAAI;CAAI;AAChE,IAAM,uBAAuB;AAM7B,SAAgB,qBAAqB,MAA2B;AAC9D,QAAQ,QAAQ,cAAc,SAAU"}

package/dist/components/buttons/button/button-styles.d.ts

@@ -0,0 +1,229 @@
+export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+        outlined: {
+            root: string;
+        };
+        text: {
+            root: string;
+        };
+        fab: {
+            root: string;
+        };
+        list: {
+            root: string;
+            label: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    color: {
+        grey: {
+            root: string;
+        };
+        primary: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        error: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+    };
+    rounded: {
+        true: {
+            root: string;
+        };
+    };
+    icon: {
+        true: {
+            root: string;
+        };
+    };
+    active: {
+        true: {};
+        false: {};
+    };
+    loading: {
+        true: {
+            root: string;
+        };
+    };
+    hideFocusIndicator: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    spinner: string;
+}, undefined, {
+    variant: {
+        default: {};
+        outlined: {
+            root: string;
+        };
+        text: {
+            root: string;
+        };
+        fab: {
+            root: string;
+        };
+        list: {
+            root: string;
+            label: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    color: {
+        grey: {
+            root: string;
+        };
+        primary: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        error: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+    };
+    rounded: {
+        true: {
+            root: string;
+        };
+    };
+    icon: {
+        true: {
+            root: string;
+        };
+    };
+    active: {
+        true: {};
+        false: {};
+    };
+    loading: {
+        true: {
+            root: string;
+        };
+    };
+    hideFocusIndicator: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    spinner: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+        outlined: {
+            root: string;
+        };
+        text: {
+            root: string;
+        };
+        fab: {
+            root: string;
+        };
+        list: {
+            root: string;
+            label: string;
+        };
+    };
+    size: {
+        sm: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    color: {
+        grey: {
+            root: string;
+        };
+        primary: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        error: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+    };
+    rounded: {
+        true: {
+            root: string;
+        };
+    };
+    icon: {
+        true: {
+            root: string;
+        };
+    };
+    active: {
+        true: {};
+        false: {};
+    };
+    loading: {
+        true: {
+            root: string;
+        };
+    };
+    hideFocusIndicator: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    spinner: string;
+}, undefined, unknown, unknown, undefined>>;