@nextcloud/vue/dist/chunks/NcProgressBar-DDMAo4h-.mjs.map

Nextcloud vue components

{"version":3,"file":"NcProgressBar-DDMAo4h-.mjs","sources":["../../src/components/NcProgressBar/NcProgressBar.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis is a simple progress bar component.\n## Usage:\n\n### Linear\n```vue\n<template>\n\t<span>\n\t\tSmall\n\t\t<NcProgressBar :value=\"20\" />\n\t\t<br />\n\t\tError\n\t\t<NcProgressBar :value=\"80\" :error=\"true\" />\n\t\t<br />\n\t\tCustom color\n\t\t<NcProgressBar :value=\"55\" size=\"medium\" color=\"green\" />\n\t\t<br />\n\t\tMedium size\n\t\t<NcProgressBar :value=\"60\" size=\"medium\" />\n\t\t<br />\n\t\tCustom size (changes the progress bar height)\n\t\t<NcProgressBar :value=\"55\" :size=\"8\" />\n\t</span>\n</template>\n```\n\n### Circular\n```vue\n<template>\n\t<span>\n\t\tDefault\n\t\t<NcProgressBar type=\"circular\" :value=\"25\" />\n\t\t<br />\n\t\tColor\n\t\t<NcProgressBar type=\"circular\" :value=\"42\" color=\"green\" />\n\t\t<br />\n\t\tError\n\t\t<NcProgressBar type=\"circular\" :value=\"80\" error />\n\t\t<br />\n\t\tMedium size\n\t\t<NcProgressBar type=\"circular\" :value=\"65\" size=\"medium\" />\n\t\t<br />\n\t\tCustom size (changes the diameter of the progress bar)\n\t\t<NcProgressBar type=\"circular\" :value=\"65\" :size=\"42\" />\n\t</span>\n</template>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * An integer between 0 and 100\n\t */\n\tvalue?: number\n\n\t/**\n\t * Determines the height of the progressbar.\n\t */\n\tsize?: 'small' | 'medium' | number\n\n\t/**\n\t * Applies an error color to the progressbar if true.\n\t */\n\terror?: boolean\n\n\t/**\n\t * Progress bar variant\n\t */\n\ttype?: 'linear' | 'circular'\n\n\t/**\n\t * The color of the progress bar\n\t */\n\tcolor?: string\n}>(), {\n\tvalue: 0,\n\tcolor: 'var(--color-primary-element)',\n\tsize: 'small',\n\ttype: 'linear',\n})\n\nconst normalizedProgress = computed(() => Math.max(0, Math.min(100, props.value)) / 100)\n\nconst height = computed(() => {\n\tif (typeof props.size === 'number') {\n\t\treturn Math.round(props.size)\n\t}\n\n\t// circular type\n\tif (props.type === 'circular') {\n\t\tif (props.size === 'medium') {\n\t\t\treturn clickableArea\n\t\t} else {\n\t\t\treturn clickableAreaSmall\n\t\t}\n\t}\n\n\t// linear type\n\tif (props.size === 'medium') {\n\t\treturn 1.5 * gridBaseline\n\t}\n\treturn gridBaseline\n})\n\nconst heightPx = computed(() => `${height.value}px`)\n\n// Variables for the circlur progressbar\nconst strokeWidth = computed(() => Math.max(gridBaseline, height.value / clickableArea * gridBaseline))\nconst circleCenterPosition = computed(() => height.value / 2)\nconst circleRadius = computed(() => (height.value / 2) - strokeWidth.value)\nconst circumference = computed(() => circleRadius.value * 2 * Math.PI)\n</script>\n\n<script lang=\"ts\">\n// design constants\nconst gridBaseline = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))\nconst clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))\nconst clickableAreaSmall = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--clickable-area-small'))\n</script>\n\n<template>\n\t<span\n\t\tv-if=\"type === 'circular'\"\n\t\trole=\"progressbar\"\n\t\t:aria-valuenow=\"value\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\tclass=\"progress-bar progress-bar--circular\">\n\t\t<svg\n\t\t\t:height=\"height\"\n\t\t\t:width=\"height\">\n\t\t\t<circle\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${normalizedProgress * circumference} ${(1 - normalizedProgress) * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"0.25 * circumference\"\n\t\t\t\t:stroke-width\n\t\t\t\t:r=\"circleRadius\"\n\t\t\t\t:cx=\"circleCenterPosition\"\n\t\t\t\t:cy=\"circleCenterPosition\" />\n\t\t\t<circle\n\t\t\t\tstroke=\"var(--color-background-darker)\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${(1 - normalizedProgress) * circumference} ${normalizedProgress * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"(0.25 - normalizedProgress) * circumference\"\n\t\t\t\t:stroke-width\n\t\t\t\t:r=\"circleRadius\"\n\t\t\t\t:cx=\"circleCenterPosition\"\n\t\t\t\t:cy=\"circleCenterPosition\" />\n\t\t</svg>\n\t</span>\n\t<progress\n\t\tv-else\n\t\tclass=\"progress-bar progress-bar--linear vue\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\t:value\n\t\tmax=\"100\" />\n</template>\n\n<style lang=\"scss\" scoped>\n\n.progress-bar {\n\tdisplay: block;\n\theight: var(--progress-bar-height);\n\n\t--progress-bar-color: v-bind(color);\n\t--progress-bar-height: v-bind(heightPx);\n\n\t&--linear {\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tbackground: var(--color-background-dark);\n\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\n\t\t// Browser specific rules\n\t\t&::-webkit-progress-bar {\n\t\t\theight: var(--progress-bar-height);\n\t\t\tbackground-color: transparent;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t}\n\t&--circular {\n\t\twidth: var(--progress-bar-height);\n\t\tcolor: var(--progress-bar-color);\n\t}\n\t&--error {\n\t\tcolor: var(--color-text-error, var(--color-error)) !important;\n\t\t// Override previous values\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--color-text-error, var(--color-error)) !important;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--color-text-error, var(--color-error)) !important;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["type","_createElementBlock","value","_normalizeClass","error","_createElementVNode"],"mappings":";;;;;;;AA2HA,MAAM,eAAe,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,yBAAyB,CAAC;AACvH,MAAM,gBAAgB,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,0BAA0B,CAAC;AACzH,MAAM,qBAAqB,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,wBAAwB,CAAC;;;;;;;;;;;;;;;AApE5H,UAAM,QAAQ;AAgCd,UAAM,qBAAqB,SAAS,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,MAAM,KAAK,CAAC,IAAI,GAAG;AAEvF,UAAM,SAAS,SAAS,MAAM;AAC7B,UAAI,OAAO,MAAM,SAAS,UAAU;AACnC,eAAO,KAAK,MAAM,MAAM,IAAI;AAAA,MAC7B;AAGA,UAAI,MAAM,SAAS,YAAY;AAC9B,YAAI,MAAM,SAAS,UAAU;AAC5B,iBAAO;AAAA,QACR,OAAO;AACN,iBAAO;AAAA,QACR;AAAA,MACD;AAGA,UAAI,MAAM,SAAS,UAAU;AAC5B,eAAO,MAAM;AAAA,MACd;AACA,aAAO;AAAA,IACR,CAAC;AAED,UAAM,WAAW,SAAS,MAAM,GAAG,OAAO,KAAK,IAAI;AAGnD,UAAM,cAAc,SAAS,MAAM,KAAK,IAAI,cAAc,OAAO,QAAQ,gBAAgB,YAAY,CAAC;AACtG,UAAM,uBAAuB,SAAS,MAAM,OAAO,QAAQ,CAAC;AAC5D,UAAM,eAAe,SAAS,MAAO,OAAO,QAAQ,IAAK,YAAY,KAAK;AAC1E,UAAM,gBAAgB,SAAS,MAAM,aAAa,QAAQ,IAAI,KAAK,EAAE;;aAY7DA,KAAAA,SAAI,2BADXC,mBA4BO,QAAA;AAAA;QA1BN,MAAK;AAAA,QACJ,iBAAeC,KAAAA;AAAAA,QACf,OAAKC,eAAA,CAAA,EAAA,uBAA2BC,KAAAA,MAAAA,GAC3B,qCAAqC,CAAA;AAAA,MAAA;sBAC3CH,mBAqBM,OAAA;AAAA,UApBJ,QAAQ,OAAA;AAAA,UACR,OAAO,OAAA;AAAA,QAAA;UACRI,mBAQ8B,UAAA;AAAA,YAP7B,QAAO;AAAA,YACP,MAAK;AAAA,YACJ,uBAAqB,mBAAA,QAAqB,mBAAa,KAAA,IAAS,mBAAA,SAAsB,cAAA,KAAa;AAAA,YACnG,4BAA0B,cAAA;AAAA,YAC1B,gBAAA,YAAA;AAAA,YACA,GAAG,aAAA;AAAA,YACH,IAAI,qBAAA;AAAA,YACJ,IAAI,qBAAA;AAAA,UAAA;UACNA,mBAQ8B,UAAA;AAAA,YAP7B,QAAO;AAAA,YACP,MAAK;AAAA,YACJ,4BAA0B,mBAAA,SAAsB,mBAAa,IAAI,mBAAA,QAAqB,cAAA,KAAa;AAAA,YACnG,sBAAiB,OAAU,mBAAA,SAAsB,cAAA;AAAA,YACjD,gBAAA,YAAA;AAAA,YACA,GAAG,aAAA;AAAA,YACH,IAAI,qBAAA;AAAA,YACJ,IAAI,qBAAA;AAAA,UAAA;;0CAGRJ,mBAKa,YAAA;AAAA;QAHZ,OAAKE,eAAA,CAAC,yCAAuC,EAAA,uBACZC,KAAAA,MAAAA,CAAK,CAAA;AAAA,QACrC,OAAAF,KAAAA;AAAAA,QACD,KAAI;AAAA,MAAA;;;;;"}