@nextcloud/vue
Version:
Nextcloud vue components
1 lines • 3.84 kB
Source Map (JSON)
{"version":3,"file":"NcSavingIndicatorIcon.mjs","sources":["../../src/components/NcSavingIndicatorIcon/NcSavingIndicatorIcon.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2022\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n# Usage\n\n```\n<template>\n<div>\n\t<div>\n\t\t<NcSavingIndicatorIcon :name=\"`${savingState === 'error' ? 'Error saving' : savingState} file`\"\n\t\t\t:error=\"savingState === 'error'\"\n\t\t\t:saving=\"savingState === 'saving'\" />\n\t</div>\n\t<br />\n\t<div style=\"display: flex; justify-content: space-around;\">\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"savingState\"\n\t\t\tvalue=\"saved\"\n\t\t\tname=\"saving_radio\"\n\t\t\ttype=\"radio\">\n\t\t\tSaved\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"savingState\"\n\t\t\tvalue=\"saving\"\n\t\t\tname=\"saving_radio\"\n\t\t\ttype=\"radio\">\n\t\t\tSaving\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"savingState\"\n\t\t\tvalue=\"error\"\n\t\t\tname=\"saving_radio\"\n\t\t\ttype=\"radio\">\n\t\t\tError\n\t\t</NcCheckboxRadioSwitch>\n\t</div>\n</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsavingState: 'saved',\n\t\t}\n\t},\n}\n</script>\n\n```\n</docs>\n\n<template>\n\t<span :aria-label=\"name\"\n\t\tclass=\"material-design-icon\"\n\t\trole=\"img\"\n\t\t@click=\"$emit('click', $event)\">\n\t\t<svg :fill=\"fillColor\"\n\t\t\tclass=\"material-design-icon__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=\"indicatorColor\" d=\"m19 15a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4z\" />\n\t\t\t<path fill=\"currentColor\" d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\">\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<script>\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcSavingIndicatorIcon',\n\tprops: {\n\t\t/**\n\t\t * Specify the size of the saving icon.\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\t\t/**\n\t\t * Specify what is saved.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Set to true when saving is in progress.\n\t\t */\n\t\tsaving: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t\trequired: false,\n\t\t},\n\t\t/**\n\t\t * Set to true if an error occured while saving.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t\trequired: false,\n\t\t},\n\t},\n\temits: ['click'],\n\tcomputed: {\n\t\tindicatorColor() {\n\t\t\treturn this.error ? 'var(--color-error)' : (this.saving ? 'var(--color-primary-element)' : 'none')\n\t\t},\n\t},\n})\n</script>\n"],"names":["_sfc_main","defineComponent"],"mappings":";;AAwFA,MAAAA,IAAAC,EAAA,EACA,MAAA,yBACA,OAAA,EAIA,MAAA,EACA,MAAA,QACA,SAAA,GACA,GAIA,MAAA,EACA,MAAA,QACA,SAAA,GACA,GAIA,QAAA,EACA,MAAA,SACA,SAAA,IACA,UAAA,GACA,GAIA,OAAA,EACA,MAAA,SACA,SAAA,IACA,UAAA,GACA,EACA,GACA,OAAA,CAAA,OAAA,GACA,UAAA,EACA,iBAAA;AACA,SAAA,KAAA,QAAA,uBAAA,KAAA,SAAA,iCAAA;AACA,EACA,EACA,CAAA;;;;;;;;"}