@rotki/ui-library 2.13.1 → 2.13.3
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.
- package/dist/components/logos/RuiLogo.vue.d.ts +1 -0
- package/dist/components/logos/RuiLogo.vue.js +10 -14
- package/dist/components/logos/RuiLogo.vue.js.map +1 -1
- package/dist/components/logos/use-logo-sources.d.ts +10 -0
- package/dist/components/logos/use-logo-sources.js +36 -0
- package/dist/components/logos/use-logo-sources.js.map +1 -0
- package/dist/web-types.json +10 -1
- package/package.json +1 -1
|
@@ -12,6 +12,7 @@ export interface Props {
|
|
|
12
12
|
logo?: keyof ExternalLinks;
|
|
13
13
|
size?: string | number;
|
|
14
14
|
uniqueKey?: string | number;
|
|
15
|
+
src?: string;
|
|
15
16
|
}
|
|
16
17
|
declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
17
18
|
declare const _default: typeof __VLS_export;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { defineComponent, useTemplateRef, ref, computed, watch, watchEffect, useSSRContext, onServerPrefetch, openBlock, createElementBlock, normalizeStyle, unref, toDisplayString, createCommentVNode } from "vue";
|
|
2
2
|
import { get, set, isClient } from "@vueuse/shared";
|
|
3
3
|
import fallback from "./logo.svg.js";
|
|
4
|
-
import {
|
|
5
|
-
import { useFetch } from "@vueuse/core";
|
|
4
|
+
import { getLogoSources } from "./use-logo-sources.js";
|
|
6
5
|
const _hoisted_1 = ["src"];
|
|
7
6
|
const _hoisted_2 = ["src"];
|
|
8
7
|
const _hoisted_3 = {
|
|
@@ -20,12 +19,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
20
19
|
branch: { default: "develop" },
|
|
21
20
|
logo: {},
|
|
22
21
|
size: { default: 3 },
|
|
23
|
-
uniqueKey: {}
|
|
22
|
+
uniqueKey: {},
|
|
23
|
+
src: {}
|
|
24
24
|
},
|
|
25
25
|
setup(__props) {
|
|
26
26
|
const customImageRef = useTemplateRef("customImageRef");
|
|
27
27
|
const error = ref(false);
|
|
28
|
-
const decoding = ref(!!__props.logo);
|
|
28
|
+
const decoding = ref(!!__props.logo && !__props.src);
|
|
29
29
|
const pendingSources = ref(false);
|
|
30
30
|
const emptyLinks = {
|
|
31
31
|
app: void 0,
|
|
@@ -35,6 +35,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
35
35
|
};
|
|
36
36
|
const externalSources = ref(emptyLinks);
|
|
37
37
|
const externalSource = computed(() => {
|
|
38
|
+
if (__props.src)
|
|
39
|
+
return __props.src;
|
|
38
40
|
const sources = get(externalSources);
|
|
39
41
|
if (!__props.logo || !sources[__props.logo]) {
|
|
40
42
|
set(decoding, get(pendingSources));
|
|
@@ -46,18 +48,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
46
48
|
return url;
|
|
47
49
|
});
|
|
48
50
|
async function fetchSources() {
|
|
49
|
-
if (!__props.logo)
|
|
51
|
+
if (!__props.logo || __props.src)
|
|
50
52
|
return;
|
|
51
53
|
set(pendingSources, true);
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
);
|
|
56
|
-
const links = transformCase(JSON.parse(get(data) ?? "null")?.logo, "camelCase");
|
|
57
|
-
if (links)
|
|
58
|
-
set(externalSources, links);
|
|
59
|
-
} catch {
|
|
60
|
-
}
|
|
54
|
+
const links = await getLogoSources(__props.branch);
|
|
55
|
+
if (links)
|
|
56
|
+
set(externalSources, links);
|
|
61
57
|
set(pendingSources, false);
|
|
62
58
|
}
|
|
63
59
|
watch(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RuiLogo.vue.js","sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isClient } from '@vueuse/shared';\nimport { useSSRContext } from 'vue';\nimport fallback from '@/components/logos/logo.svg';\nimport {
|
|
1
|
+
{"version":3,"file":"RuiLogo.vue.js","sources":["../../../src/components/logos/RuiLogo.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { isClient } from '@vueuse/shared';\nimport { useSSRContext } from 'vue';\nimport fallback from '@/components/logos/logo.svg';\nimport { getLogoSources } from '@/components/logos/use-logo-sources';\n\nexport interface ExternalLinks {\n drawer?: string;\n app?: string;\n website?: string;\n about?: string;\n emptyScreen?: string;\n [key: string]: string | undefined;\n}\n\nexport interface Props {\n text?: boolean;\n branch?: 'develop' | 'main' | string;\n logo?: keyof ExternalLinks;\n size?: string | number; // in rems\n uniqueKey?: string | number;\n src?: string;\n}\n\ndefineOptions({\n name: 'RuiLogo',\n});\n\nconst { text = false, branch = 'develop', logo, size = 3, uniqueKey, src } = defineProps<Props>();\n\nconst customImageRef = useTemplateRef<HTMLImageElement>('customImageRef');\nconst error = ref<boolean>(false);\nconst decoding = ref<boolean>(!!logo && !src);\nconst pendingSources = ref<boolean>(false);\nconst appName = 'rotki';\nconst emptyLinks: ExternalLinks = {\n app: undefined,\n website: undefined,\n about: undefined,\n emptyScreen: undefined,\n};\nconst externalSources = ref<ExternalLinks>(emptyLinks);\n\nconst externalSource = computed<string | undefined>(() => {\n if (src)\n return src;\n\n const sources = get(externalSources);\n if (!logo || !sources[logo]) {\n set(decoding, get(pendingSources));\n return undefined;\n }\n\n const url = `https://raw.githubusercontent.com/rotki/data/${branch}/assets/icons/${sources[logo]}`;\n\n if (uniqueKey !== undefined)\n return `${url}?key=${uniqueKey}`;\n\n return url;\n});\n\nasync function fetchSources(): Promise<void> {\n if (!logo || src)\n return;\n\n set(pendingSources, true);\n const links = await getLogoSources(branch);\n\n if (links)\n set(externalSources, links);\n\n set(pendingSources, false);\n}\n\nwatch(\n () => get(customImageRef)?.complete,\n (complete) => {\n if (complete) {\n get(customImageRef)\n ?.decode()\n .catch(() => set(error, true))\n .finally(() => set(decoding, false));\n }\n },\n);\n\nwatchEffect(fetchSources);\n\nif (!isClient)\n useSSRContext();\n\nonServerPrefetch(async () => {\n await fetchSources();\n});\n</script>\n\n<template>\n <div\n class=\"gap-x-4 flex items-center relative\"\n :style=\"{ height: `${size}rem` }\"\n >\n <div\n v-if=\"!externalSource && decoding\"\n role=\"img\"\n :aria-label=\"appName\"\n class=\"h-full transition delay-0 opacity-0\"\n :style=\"{ width: `${size}rem` }\"\n />\n <img\n v-else-if=\"externalSource && (!error || decoding)\"\n ref=\"customImageRef\"\n :src=\"externalSource\"\n :alt=\"appName\"\n data-image=\"custom\"\n class=\"h-full transition ease-out duration-200 delay-100\"\n :style=\"{ width: `${size}rem` }\"\n @error=\"error = true\"\n />\n <img\n v-else\n :src=\"fallback\"\n :alt=\"appName\"\n data-image=\"fallback\"\n class=\"h-full transition ease-out duration-200 delay-100\"\n :style=\"{ width: `${size}rem` }\"\n />\n <div\n v-if=\"text\"\n class=\"text-h4 text-rui-primary dark:text-white\"\n >\n {{ appName }}\n </div>\n </div>\n</template>\n"],"names":["_createElementBlock","_unref","_toDisplayString"],"mappings":";;;;;;;;;;AAkCA,MAAM,UAAU;;;;;;;;;;;;;;;AAJhB,UAAM,iBAAiB,eAAiC,gBAAgB;AACxE,UAAM,QAAQ,IAAa,KAAK;AAChC,UAAM,WAAW,IAAa,CAAC,CAAC,gBAAQ,CAAC,WAAG;AAC5C,UAAM,iBAAiB,IAAa,KAAK;AAEzC,UAAM,aAA4B;AAAA,MAChC,KAAK;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,aAAa;AAAA,IAAA;AAEf,UAAM,kBAAkB,IAAmB,UAAU;AAErD,UAAM,iBAAiB,SAA6B,MAAM;AACxD,UAAI,QAAA;AACF,eAAO,QAAA;AAET,YAAM,UAAU,IAAI,eAAe;AACnC,UAAI,CAAC,QAAA,QAAQ,CAAC,QAAQ,QAAA,IAAI,GAAG;AAC3B,YAAI,UAAU,IAAI,cAAc,CAAC;AACjC,eAAO;AAAA,MACT;AAEA,YAAM,MAAM,gDAAgD,QAAA,MAAM,iBAAiB,QAAQ,QAAA,IAAI,CAAC;AAEhG,UAAI,QAAA,cAAc;AAChB,eAAO,GAAG,GAAG,QAAQ,QAAA,SAAS;AAEhC,aAAO;AAAA,IACT,CAAC;AAED,mBAAe,eAA8B;AAC3C,UAAI,CAAC,QAAA,QAAQ,QAAA;AACX;AAEF,UAAI,gBAAgB,IAAI;AACxB,YAAM,QAAQ,MAAM,eAAe,cAAM;AAEzC,UAAI;AACF,YAAI,iBAAiB,KAAK;AAE5B,UAAI,gBAAgB,KAAK;AAAA,IAC3B;AAEA;AAAA,MACE,MAAM,IAAI,cAAc,GAAG;AAAA,MAC3B,CAAC,aAAa;AACZ,YAAI,UAAU;AACZ,cAAI,cAAc,GACd,OAAA,EACD,MAAM,MAAM,IAAI,OAAO,IAAI,CAAC,EAC5B,QAAQ,MAAM,IAAI,UAAU,KAAK,CAAC;AAAA,QACvC;AAAA,MACF;AAAA,IAAA;AAGF,gBAAY,YAAY;AAExB,QAAI,CAAC;AACH,oBAAA;AAEF,qBAAiB,YAAY;AAC3B,YAAM,aAAA;AAAA,IACR,CAAC;;0BAICA,mBAmCM,OAAA;AAAA,QAlCJ,OAAM;AAAA,QACL,mCAAoB,QAAA,IAAI,OAAA;AAAA,MAAA;QAGhB,CAAAC,MAAA,cAAA,KAAkBA,MAAA,QAAA,kBAD3BD,mBAME,OAAA;AAAA;UAJA,MAAK;AAAA,UACJ,cAAY;AAAA,UACb,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,QAAA,eAGbC,MAAA,cAAA,MAAc,CAAMA,MAAA,KAAA,KAASA,MAAA,QAAA,mBAD1CD,mBASE,OAAA;AAAA;mBAPI;AAAA,UAAJ,KAAI;AAAA,UACH,KAAKC,MAAA,cAAA;AAAA,UACL,KAAK;AAAA,UACN,cAAW;AAAA,UACX,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,UACvB,+CAAO,MAAA,QAAK;AAAA,QAAA,0CAEfD,mBAOE,OAAA;AAAA;UALC,KAAKC,MAAA,QAAA;AAAA,UACL,KAAK;AAAA,UACN,cAAW;AAAA,UACX,OAAM;AAAA,UACL,kCAAmB,QAAA,IAAI,OAAA;AAAA,QAAA;QAGlB,QAAA,qBADRD,mBAKM,OALN,YAKME,gBADD,OAAO,CAAA;;;;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ExternalLinks } from '../../components/logos/RuiLogo.vue.js';
|
|
2
|
+
/**
|
|
3
|
+
* Fetches external logo sources for a given branch, deduplicating concurrent requests.
|
|
4
|
+
* Uses a module-level cache so all RuiLogo instances share a single fetch per branch.
|
|
5
|
+
*/
|
|
6
|
+
export declare function getLogoSources(branch: string): Promise<ExternalLinks | undefined>;
|
|
7
|
+
/**
|
|
8
|
+
* Clears the module-level cache. Exposed for testing only.
|
|
9
|
+
*/
|
|
10
|
+
export declare function clearLogoSourcesCache(): void;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { transformCase } from "../../utils/helpers.js";
|
|
2
|
+
const ASSET_MAPPINGS_URL = "https://raw.githubusercontent.com/rotki/data";
|
|
3
|
+
const sourcesCache = /* @__PURE__ */ new Map();
|
|
4
|
+
function isExternalLinks(value) {
|
|
5
|
+
if (typeof value !== "object" || value === null)
|
|
6
|
+
return false;
|
|
7
|
+
return Object.values(value).every((v) => v === void 0 || typeof v === "string");
|
|
8
|
+
}
|
|
9
|
+
async function fetchSourcesFromNetwork(branch) {
|
|
10
|
+
try {
|
|
11
|
+
const response = await fetch(
|
|
12
|
+
`${ASSET_MAPPINGS_URL}/${branch}/constants/asset-mappings.json`
|
|
13
|
+
);
|
|
14
|
+
if (!response.ok)
|
|
15
|
+
return void 0;
|
|
16
|
+
const json = await response.json();
|
|
17
|
+
const links = transformCase(json?.logo, "camelCase");
|
|
18
|
+
if (isExternalLinks(links))
|
|
19
|
+
return links;
|
|
20
|
+
return void 0;
|
|
21
|
+
} catch {
|
|
22
|
+
return void 0;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
function getLogoSources(branch) {
|
|
26
|
+
const cached = sourcesCache.get(branch);
|
|
27
|
+
if (cached)
|
|
28
|
+
return cached;
|
|
29
|
+
const promise = fetchSourcesFromNetwork(branch);
|
|
30
|
+
sourcesCache.set(branch, promise);
|
|
31
|
+
return promise;
|
|
32
|
+
}
|
|
33
|
+
export {
|
|
34
|
+
getLogoSources
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=use-logo-sources.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-logo-sources.js","sources":["../../../src/components/logos/use-logo-sources.ts"],"sourcesContent":["import type { ExternalLinks } from '@/components/logos/RuiLogo.vue';\nimport { transformCase } from '@/utils/helpers';\n\nconst ASSET_MAPPINGS_URL = 'https://raw.githubusercontent.com/rotki/data';\n\n// Module-level cache: deduplicates asset-mappings fetches across all RuiLogo instances.\n// Keyed by branch so different branches don't share stale data.\nconst sourcesCache = new Map<string, Promise<ExternalLinks | undefined>>();\n\nfunction isExternalLinks(value: unknown): value is ExternalLinks {\n if (typeof value !== 'object' || value === null)\n return false;\n\n return Object.values(value).every(v => v === undefined || typeof v === 'string');\n}\n\nasync function fetchSourcesFromNetwork(branch: string): Promise<ExternalLinks | undefined> {\n try {\n const response = await fetch(\n `${ASSET_MAPPINGS_URL}/${branch}/constants/asset-mappings.json`,\n );\n\n if (!response.ok)\n return undefined;\n\n const json = await response.json();\n const links = transformCase(json?.logo, 'camelCase');\n if (isExternalLinks(links))\n return links;\n\n return undefined;\n }\n catch {\n return undefined;\n }\n}\n\n/**\n * Fetches external logo sources for a given branch, deduplicating concurrent requests.\n * Uses a module-level cache so all RuiLogo instances share a single fetch per branch.\n */\nexport function getLogoSources(branch: string): Promise<ExternalLinks | undefined> {\n const cached = sourcesCache.get(branch);\n if (cached)\n return cached;\n\n const promise = fetchSourcesFromNetwork(branch);\n sourcesCache.set(branch, promise);\n return promise;\n}\n\n/**\n * Clears the module-level cache. Exposed for testing only.\n */\nexport function clearLogoSourcesCache(): void {\n sourcesCache.clear();\n}\n"],"names":[],"mappings":";AAGA,MAAM,qBAAqB;AAI3B,MAAM,mCAAmB,IAAA;AAEzB,SAAS,gBAAgB,OAAwC;AAC/D,MAAI,OAAO,UAAU,YAAY,UAAU;AACzC,WAAO;AAET,SAAO,OAAO,OAAO,KAAK,EAAE,MAAM,OAAK,MAAM,UAAa,OAAO,MAAM,QAAQ;AACjF;AAEA,eAAe,wBAAwB,QAAoD;AACzF,MAAI;AACF,UAAM,WAAW,MAAM;AAAA,MACrB,GAAG,kBAAkB,IAAI,MAAM;AAAA,IAAA;AAGjC,QAAI,CAAC,SAAS;AACZ,aAAO;AAET,UAAM,OAAO,MAAM,SAAS,KAAA;AAC5B,UAAM,QAAQ,cAAc,MAAM,MAAM,WAAW;AACnD,QAAI,gBAAgB,KAAK;AACvB,aAAO;AAET,WAAO;AAAA,EACT,QACM;AACJ,WAAO;AAAA,EACT;AACF;AAMO,SAAS,eAAe,QAAoD;AACjF,QAAM,SAAS,aAAa,IAAI,MAAM;AACtC,MAAI;AACF,WAAO;AAET,QAAM,UAAU,wBAAwB,MAAM;AAC9C,eAAa,IAAI,QAAQ,OAAO;AAChC,SAAO;AACT;"}
|
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.13.
|
|
5
|
+
"version": "2.13.3",
|
|
6
6
|
"js-types-syntax": "typescript",
|
|
7
7
|
"description-markup": "markdown",
|
|
8
8
|
"contributions": {
|
|
@@ -1552,6 +1552,15 @@
|
|
|
1552
1552
|
"kind": "expression",
|
|
1553
1553
|
"type": "string | number | undefined"
|
|
1554
1554
|
}
|
|
1555
|
+
},
|
|
1556
|
+
{
|
|
1557
|
+
"name": "src",
|
|
1558
|
+
"description": "",
|
|
1559
|
+
"required": false,
|
|
1560
|
+
"value": {
|
|
1561
|
+
"kind": "expression",
|
|
1562
|
+
"type": "string | undefined"
|
|
1563
|
+
}
|
|
1555
1564
|
}
|
|
1556
1565
|
],
|
|
1557
1566
|
"slots": [],
|