@nextcloud/vue/dist/chunks/NcLoadingIcon-b_ajZ_nQ.mjs.map

Nextcloud vue components

{"version":3,"file":"NcLoadingIcon-b_ajZ_nQ.mjs","sources":["../../src/components/NcLoadingIcon/NcLoadingIcon.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n# Usage\n\n```\n<div>\n\t<NcLoadingIcon />\n</div>\n<div style=\"background-color: #171717;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"light\" name=\"Loading on dark background\" />\n</div>\n<div style=\"background-color: #fff;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"dark\" name=\"Loading on light background\" />\n</div>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * The appearance of the loading icon.\n\t * 'auto' adjusts to the Nextcloud color scheme,\n\t * 'light' and 'dark' are static.\n\t */\n\tappearance?: 'auto' | 'light' | 'dark'\n\n\t/**\n\t * Specify what is loading (the accessible name) if this is not purely for decoration.\n\t */\n\tname?: string\n\n\t/**\n\t * Specify the size of the loading icon.\n\t */\n\tsize?: number\n}>(), {\n\tappearance: 'auto',\n\tname: '',\n\tsize: 20,\n})\n\nconst colors = computed(() => {\n\tconst colors = ['#777', '#CCC']\n\tif (props.appearance === 'light') {\n\t\treturn colors\n\t} else if (props.appearance === 'dark') {\n\t\treturn colors.reverse()\n\t}\n\treturn ['var(--color-loading-light)', 'var(--color-loading-dark)']\n})\n</script>\n\n<template>\n\t<span\n\t\t:aria-label=\"name\"\n\t\trole=\"img\"\n\t\tclass=\"material-design-icon loading-icon\">\n\t\t<svg\n\t\t\t:width=\"size\"\n\t\t\t:height=\"size\"\n\t\t\tviewBox=\"0 0 24 24\">\n\t\t\t<path :fill=\"colors[0]\" d=\"M12,4V2A10,10 0 1,0 22,12H20A8,8 0 1,1 12,4Z\" />\n\t\t\t<path :fill=\"colors[1]\" d=\"M12,4V2A10,10 0 0,1 22,12H20A8,8 0 0,0 12,4Z\">\n\t\t\t\t<title v-if=\"name\">{{ name }}</title>\n\t\t\t</path>\n\t\t</svg>\n\t</span>\n</template>\n\n<style lang=\"scss\" scoped>\n.loading-icon {\n\toverflow: hidden;\n\n\tsvg {\n\t\tanimation: rotate var(--animation-duration, 0.8s) linear infinite;\n\t}\n}\n</style>\n"],"names":["colors","_createElementBlock","name","size","_createElementVNode","_openBlock"],"mappings":";;;;;;;;;;;;;;;AAwBA,UAAM,QAAQ;AAuBd,UAAM,SAAS,SAAS,MAAM;AAC7B,YAAMA,UAAS,CAAC,QAAQ,MAAM;AAC9B,UAAI,MAAM,eAAe,SAAS;AACjC,eAAOA;AAAAA,MACR,WAAW,MAAM,eAAe,QAAQ;AACvC,eAAOA,QAAO,QAAA;AAAA,MACf;AACA,aAAO,CAAC,8BAA8B,2BAA2B;AAAA,IAClE,CAAC;;0BAIAC,mBAaO,QAAA;AAAA,QAZL,cAAYC,KAAAA;AAAAA,QACb,MAAK;AAAA,QACL,OAAM;AAAA,MAAA;sBACND,mBAQM,OAAA;AAAA,UAPJ,OAAOE,KAAAA;AAAAA,UACP,QAAQA,KAAAA;AAAAA,UACT,SAAQ;AAAA,QAAA;UACRC,mBAA2E,QAAA;AAAA,YAApE,MAAM,OAAA,MAAM,CAAA;AAAA,YAAK,GAAE;AAAA,UAAA;UAC1BA,mBAEO,QAAA;AAAA,YAFA,MAAM,OAAA,MAAM,CAAA;AAAA,YAAK,GAAE;AAAA,UAAA;YACZF,KAAAA,QAAbG,UAAA,GAAAJ,mBAAqC,qCAAfC,KAAAA,IAAI,GAAA,CAAA;;;;;;;;"}