UNPKG

@discord-user-card/vue

Version:

Display Discord users' profile cards just like in Discord.

1 lines 7.9 kB
{"version":3,"file":"index.cjs","sources":["../src/components/DiscordUserCard.vue","../src/components/DiscordUserCardSkeleton.vue","../src/components/Export.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport \"discord-user-card/style.css\";\nimport type {\n\tDiscordUserCardProperties,\n} from \"discord-user-card\";\nimport setupDiscordUserCard, {\n\tdefaultUserCardProperties,\n} from \"discord-user-card\";\nimport { onBeforeUnmount, ref, toRefs, watch } from \"vue\";\n\nconst props = withDefaults(\n\tdefineProps<DiscordUserCardProperties & {\n\t\tstyle?: \"original\";\n\t\ttype?: \"card\" | \"profile\";\n\t}>(),\n\t{\n\t\tuser: () => defaultUserCardProperties.user,\n\t\tactivities: () => defaultUserCardProperties.activities,\n\t\tstyle: \"original\",\n\t\ttype: \"card\",\n\t},\n);\nconst { user, activities, style, type } = toRefs(props);\n\nconst div = ref<HTMLDivElement>(document.createElement(\"div\"));\nlet renderer = setupDiscordUserCard(div.value, {\n\tstyle: style.value,\n\ttype: type.value,\n});\n\nawait renderer.render({\n\tuser: user.value,\n\tactivities: activities.value,\n});\n\nconst innerHTML = ref(div.value.innerHTML);\nconst styles = ref(div.value.style.cssText);\nconst classes = ref(div.value.className);\nconst ariaLabel = ref(div.value.getAttribute(\"aria-label\"));\n\nfunction updateRefs() {\n\tinnerHTML.value = div.value.innerHTML;\n\tstyles.value = div.value.style.cssText;\n\tclasses.value = div.value.className;\n\tariaLabel.value = div.value.getAttribute(\"aria-label\");\n}\n\nwatch(\n\t[user, activities],\n\tasync () => {\n\t\tawait renderer.render({\n\t\t\tuser: user.value,\n\t\t\tactivities: activities.value,\n\t\t});\n\t\tupdateRefs();\n\t},\n\t{ deep: true },\n);\n\nwatch(\n\t[style, type],\n\tasync () => {\n\t\trenderer.destroy();\n\t\trenderer = setupDiscordUserCard(div.value, {\n\t\t\tstyle: style.value,\n\t\t\ttype: type.value,\n\t\t});\n\t\tawait renderer.render({\n\t\t\tuser: user.value,\n\t\t\tactivities: activities.value,\n\t\t});\n\t\tupdateRefs();\n\t},\n\t{ deep: true },\n);\n\nonBeforeUnmount(() => {\n\trenderer.destroy();\n});\n</script>\n\n<template>\n\t<div\n\t\t:class=\"classes\"\n\t\t:style=\"styles\"\n\t\t:aria-label=\"ariaLabel || undefined\"\n\t\tv-html=\"innerHTML\"\n\t/>\n</template>\n","<script setup lang=\"ts\">\nimport \"discord-user-card/style.css\";\nimport type {\n\tDiscordUserCardProperties,\n} from \"discord-user-card\";\nimport setupDiscordUserCard, {\n\tdefaultUserCardProperties,\n} from \"discord-user-card\";\nimport { onBeforeUnmount, ref, toRefs, watch } from \"vue\";\n\nconst props = withDefaults(\n\tdefineProps<DiscordUserCardProperties & {\n\t\tstyle?: \"original\";\n\t\ttype?: \"card\" | \"profile\";\n\t}>(),\n\t{\n\t\tuser: () => defaultUserCardProperties.user,\n\t\tactivities: () => defaultUserCardProperties.activities,\n\t\tstyle: \"original\",\n\t\ttype: \"card\",\n\t},\n);\nconst { user, activities, style, type } = toRefs(props);\n\nconst div = ref<HTMLDivElement>(document.createElement(\"div\"));\nlet renderer = setupDiscordUserCard(div.value, {\n\tstyle: style.value,\n\ttype: type.value,\n});\n\nrenderer.renderSkeleton({\n\tuser: user.value,\n\tactivities: activities.value,\n});\n\nconst innerHTML = ref(div.value.innerHTML);\nconst styles = ref(div.value.style.cssText);\nconst classes = ref(div.value.className);\nconst ariaLabel = ref(div.value.getAttribute(\"aria-label\"));\n\nfunction updateRefs() {\n\tinnerHTML.value = div.value.innerHTML;\n\tstyles.value = div.value.style.cssText;\n\tclasses.value = div.value.className;\n\tariaLabel.value = div.value.getAttribute(\"aria-label\");\n}\n\nwatch(\n\t[user, activities],\n\t() => {\n\t\trenderer.renderSkeleton({\n\t\t\tuser: user.value,\n\t\t\tactivities: activities.value,\n\t\t});\n\t\tupdateRefs();\n\t},\n\t{ deep: true },\n);\n\nwatch(\n\t[style, type],\n\t() => {\n\t\trenderer.destroy();\n\t\trenderer = setupDiscordUserCard(div.value, {\n\t\t\tstyle: style.value,\n\t\t\ttype: type.value,\n\t\t});\n\t\trenderer.renderSkeleton({\n\t\t\tuser: user.value,\n\t\t\tactivities: activities.value,\n\t\t});\n\t\tupdateRefs();\n\t},\n\t{ deep: true },\n);\n\nonBeforeUnmount(() => {\n\trenderer.destroy();\n});\n</script>\n\n<template>\n\t<div\n\t\t:class=\"classes\"\n\t\t:style=\"styles\"\n\t\t:aria-label=\"ariaLabel || undefined\"\n\t\tv-html=\"innerHTML\"\n\t/>\n</template>\n","<script setup lang=\"ts\">\nimport type { DiscordUserCardProperties } from \"discord-user-card\";\nimport { defaultUserCardProperties } from \"discord-user-card\";\nimport { toRefs } from \"vue\";\n\nimport DiscordUserCard from \"./DiscordUserCard.vue\";\nimport DiscordUserCardSkeleton from \"./DiscordUserCardSkeleton.vue\";\n\nconst props = withDefaults(\n\tdefineProps<DiscordUserCardProperties & {\n\t\tstyle?: \"original\";\n\t\ttype?: \"card\" | \"profile\";\n\t}>(),\n\t{\n\t\tuser: () => defaultUserCardProperties.user,\n\t\tactivities: () => defaultUserCardProperties.activities,\n\t\tstyle: \"original\",\n\t\ttype: \"card\",\n\t},\n);\nconst { user, activities, style, type } = toRefs(props);\n</script>\n\n<template>\n\t<Suspense>\n\t\t<template #default>\n\t\t\t<DiscordUserCard :activities=\"activities\" :style=\"style\" :type=\"type\" :user=\"user\" />\n\t\t</template>\n\t\t<template #fallback>\n\t\t\t<DiscordUserCardSkeleton :activities=\"activities\" :style=\"style\" :type=\"type\" :user=\"user\" />\n\t\t</template>\n\t</Suspense>\n</template>\n"],"names":["props","__props","user","activities","style","type","toRefs","div","ref","renderer","setupDiscordUserCard","__temp","__restore","_withAsyncContext","innerHTML","styles","classes","ariaLabel","updateRefs","watch","onBeforeUnmount"],"mappings":"qZAUA,MAAMA,EAAQC,EAYR,CAAE,KAAAC,EAAM,WAAAC,EAAY,MAAAC,EAAO,KAAAC,GAASC,EAAAA,OAAON,CAAK,EAEhDO,EAAMC,EAAAA,IAAoB,SAAS,cAAc,KAAK,CAAC,EACzD,IAAAC,EAAWC,EAAqBH,EAAI,MAAO,CAC9C,MAAOH,EAAM,MACb,KAAMC,EAAK,KAAA,CACX,EAED,CAAAM,EAAAC,CAAA,EAAAC,EAAA,iBAAA,IAAMJ,EAAS,OAAO,CACrB,KAAMP,EAAK,MACX,WAAYC,EAAW,KACvB,CAAA,CAAA,cAED,MAAMW,EAAYN,EAAA,IAAID,EAAI,MAAM,SAAS,EACnCQ,EAASP,EAAAA,IAAID,EAAI,MAAM,MAAM,OAAO,EACpCS,EAAUR,EAAA,IAAID,EAAI,MAAM,SAAS,EACjCU,EAAYT,EAAAA,IAAID,EAAI,MAAM,aAAa,YAAY,CAAC,EAE1D,SAASW,GAAa,CACXJ,EAAA,MAAQP,EAAI,MAAM,UACrBQ,EAAA,MAAQR,EAAI,MAAM,MAAM,QACvBS,EAAA,MAAQT,EAAI,MAAM,UAC1BU,EAAU,MAAQV,EAAI,MAAM,aAAa,YAAY,CACtD,CAEAY,OAAAA,EAAA,MACC,CAACjB,EAAMC,CAAU,EACjB,SAAY,CACX,MAAMM,EAAS,OAAO,CACrB,KAAMP,EAAK,MACX,WAAYC,EAAW,KAAA,CACvB,EACUe,GACZ,EACA,CAAE,KAAM,EAAK,CAAA,EAGdC,EAAA,MACC,CAACf,EAAOC,CAAI,EACZ,SAAY,CACXI,EAAS,QAAQ,EACNA,EAAAC,EAAqBH,EAAI,MAAO,CAC1C,MAAOH,EAAM,MACb,KAAMC,EAAK,KAAA,CACX,EACD,MAAMI,EAAS,OAAO,CACrB,KAAMP,EAAK,MACX,WAAYC,EAAW,KAAA,CACvB,EACUe,GACZ,EACA,CAAE,KAAM,EAAK,CAAA,EAGdE,EAAAA,gBAAgB,IAAM,CACrBX,EAAS,QAAQ,CAAA,CACjB,4bCpED,MAAMT,EAAQC,EAYR,CAAE,KAAAC,EAAM,WAAAC,EAAY,MAAAC,EAAO,KAAAC,GAASC,EAAAA,OAAON,CAAK,EAEhDO,EAAMC,EAAAA,IAAoB,SAAS,cAAc,KAAK,CAAC,EACzD,IAAAC,EAAWC,EAAqBH,EAAI,MAAO,CAC9C,MAAOH,EAAM,MACb,KAAMC,EAAK,KAAA,CACX,EAEDI,EAAS,eAAe,CACvB,KAAMP,EAAK,MACX,WAAYC,EAAW,KAAA,CACvB,EAED,MAAMW,EAAYN,EAAA,IAAID,EAAI,MAAM,SAAS,EACnCQ,EAASP,EAAAA,IAAID,EAAI,MAAM,MAAM,OAAO,EACpCS,EAAUR,EAAA,IAAID,EAAI,MAAM,SAAS,EACjCU,EAAYT,EAAAA,IAAID,EAAI,MAAM,aAAa,YAAY,CAAC,EAE1D,SAASW,GAAa,CACXJ,EAAA,MAAQP,EAAI,MAAM,UACrBQ,EAAA,MAAQR,EAAI,MAAM,MAAM,QACvBS,EAAA,MAAQT,EAAI,MAAM,UAC1BU,EAAU,MAAQV,EAAI,MAAM,aAAa,YAAY,CACtD,CAEAY,OAAAA,EAAA,MACC,CAACjB,EAAMC,CAAU,EACjB,IAAM,CACLM,EAAS,eAAe,CACvB,KAAMP,EAAK,MACX,WAAYC,EAAW,KAAA,CACvB,EACUe,GACZ,EACA,CAAE,KAAM,EAAK,CAAA,EAGdC,EAAA,MACC,CAACf,EAAOC,CAAI,EACZ,IAAM,CACLI,EAAS,QAAQ,EACNA,EAAAC,EAAqBH,EAAI,MAAO,CAC1C,MAAOH,EAAM,MACb,KAAMC,EAAK,KAAA,CACX,EACDI,EAAS,eAAe,CACvB,KAAMP,EAAK,MACX,WAAYC,EAAW,KAAA,CACvB,EACUe,GACZ,EACA,CAAE,KAAM,EAAK,CAAA,EAGdE,EAAAA,gBAAgB,IAAM,CACrBX,EAAS,QAAQ,CAAA,CACjB,8YCtED,MAAMT,EAAQC,EAYR,CAAE,KAAAC,EAAM,WAAAC,EAAY,MAAAC,EAAO,KAAAC,GAASC,EAAAA,OAAON,CAAK"}