@nextcloud/vue/dist/chunks/NcProgressBar-DvxA9bq5.cjs.map

Nextcloud vue components

{"version":3,"file":"NcProgressBar-DvxA9bq5.cjs","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\tMedium\n\t\t<NcProgressBar :value=\"60\" size=\"medium\" />\n\t\t<br>\n\t\tMedium with color\n\t\t<NcProgressBar :value=\"55\" size=\"medium\" color=\"green\" />\n\t\t<br>\n\t\tError\n\t\t<NcProgressBar :value=\"80\" :error=\"true\" />\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=\"55\" />\n\t\t<br />\n\t\tColor\n\t\t<NcProgressBar type=\"circular\" :value=\"70\" color=\"green\" />\n\t\t<br />\n\t\tError\n\t\t<NcProgressBar type=\"circular\" :value=\"60\" :error=\"true\" />\n\t</span>\n</template>\n```\n</docs>\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:style=\"{ '--progress-bar-height': height + 'px' }\"\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=\"`${progress * circumference} ${(1 - progress) * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"0.25 * circumference\"\n\t\t\t\t:stroke-width=\"stroke\"\n\t\t\t\t:r=\"radiusNormalized\"\n\t\t\t\t:cx=\"radius\"\n\t\t\t\t:cy=\"radius\" />\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 - progress) * circumference} ${progress * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"(0.25 - progress) * circumference\"\n\t\t\t\t:stroke-width=\"stroke\"\n\t\t\t\t:r=\"radiusNormalized\"\n\t\t\t\t:cx=\"radius\"\n\t\t\t\t:cy=\"radius\" />\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:style=\"{ '--progress-bar-height': height + 'px' }\"\n\t\t:value=\"value\"\n\t\tmax=\"100\" />\n</template>\n\n<script>\nexport default {\n\n\tname: 'NcProgressBar',\n\n\tprops: {\n\t\t/**\n\t\t * An integer between 1 and 100\n\t\t */\n\t\tvalue: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t\tvalidator(value) {\n\t\t\t\treturn value >= 0\n\t\t\t\t\t&& value <= 100\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Determines the height of the progressbar.\n\t\t * Possible values:\n\t\t * - 'small' (default)\n\t\t * - 'medium'\n\t\t * - Number\n\t\t *\n\t\t * @type {'small'|'medium'|number}\n\t\t */\n\t\tsize: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: 'small',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['small', 'medium'].includes(value) || typeof value === 'number'\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Applies an error color to the progressbar if true.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * ProgressBar type\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'linear',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['linear', 'circular'].includes(value)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * The color of the progress bar\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tstroke: 4,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\theight() {\n\t\t\tif (this.type === 'circular') {\n\t\t\t\tif (Number.isInteger(this.size)) {\n\t\t\t\t\treturn this.size\n\t\t\t\t}\n\t\t\t\treturn 44\n\t\t\t}\n\t\t\tif (this.size === 'small') {\n\t\t\t\treturn 4\n\t\t\t} else if (this.size === 'medium') {\n\t\t\t\treturn 6\n\t\t\t}\n\t\t\treturn this.size\n\t\t},\n\n\t\tprogress() {\n\t\t\treturn this.value / 100\n\t\t},\n\n\t\tradius() {\n\t\t\treturn this.height / 2\n\t\t},\n\n\t\tradiusNormalized() {\n\t\t\treturn this.radius - 3 * this.stroke\n\t\t},\n\n\t\tcircumference() {\n\t\t\treturn this.radiusNormalized * 2 * Math.PI\n\t\t},\n\t},\n}\n</script>\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\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, var(--color-primary-element));\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":[],"mappings":";;;AAsFA,MAAA,cAAA;AAAA,EAEA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,SAAA,KACA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWA,MAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,SAAA,QAAA,EAAA,SAAA,KAAA,KAAA,OAAA,UAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,UAAA,UAAA,EAAA,SAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,SAAA;AACA,UAAA,KAAA,SAAA,YAAA;AACA,YAAA,OAAA,UAAA,KAAA,IAAA,GAAA;AACA,iBAAA,KAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AACA,UAAA,KAAA,SAAA,SAAA;AACA,eAAA;AAAA,MACA,WAAA,KAAA,SAAA,UAAA;AACA,eAAA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,QAAA;AAAA,IACA;AAAA,IAEA,SAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA,KAAA,SAAA,IAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,mBAAA,IAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}