@nextcloud/vue/dist/chunks/NcNoteCard-CVhtNL04.mjs.map

Nextcloud vue components

{"version":3,"file":"NcNoteCard-CVhtNL04.mjs","sources":["../../src/components/NcNoteCard/NcNoteCard.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to display additional information to the user. It is\navailable in four versions:\n\n- **success**: Display a successful message.<br>\n  Should be used to show success of an operation or optional information to help a user be more successful.\n- **info**: Display an informational message.<br>\n  Should be used to highlight information that users should take into account.\n- **warning**: Display a warning to the user.<br>\n  Should be used for critical content demanding user attention due to potential risks.\n- **error**: Display an error message.<br>\n  Should be used for negative potential consequences of an action.\n\n### Usage\n\n```vue\n<template>\n\t<div>\n\t\t<NcNoteCard type=\"warning\" text=\"This is dangerous\" />\n\n\t\t<NcNoteCard type=\"error\"\n\t\t\theading=\"Error\"\n\t\t\ttext=\"The server is not happy and reported the following error\" />\n\n\t\t<NcNoteCard type=\"success\" text=\"You won\" />\n\n\t\t<NcNoteCard type=\"info\" text=\"For your information\" />\n\n\t\t<h4>Custom icon</h4>\n\t\t<NcNoteCard type=\"warning\" text=\"Custom icon usage\">\n\t\t\t<template #icon>\n\t\t\t\t<IconCogOutline :size=\"20\"/>\n\t\t\t</template>\n\t\t</NcNoteCard>\n\n\t\t<h4>Custom content using the default slot</h4>\n\t\t<NcNoteCard type=\"info\">\n\t\t\tPress <kbd>CTRL</kbd>+<kbd>C</kbd>\n\t\t</NcNoteCard>\n\t</div>\n</template>\n\n<script>\n\timport IconCogOutline from 'vue-material-design-icons/CogOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCogOutline,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { mdiAlert, mdiAlertDecagram, mdiCheckboxMarkedCircle, mdiInformation } from '@mdi/js'\nimport { computed } from 'vue'\nimport { isLegacy } from '../../utils/legacy.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Optional text to show as a heading of the note card\n\t */\n\theading?: string\n\n\t/**\n\t * Enforce the `alert` role on the note card.\n\t *\n\t * The alert role should only be used for information that requires the user's immediate attention.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role\n\t */\n\tshowAlert?: boolean\n\n\t/**\n\t * The message text of the note card\n\t */\n\ttext?: string\n\n\t/**\n\t * Type or severity of the message\n\t */\n\ttype?: 'success' | 'info' | 'warning' | 'error'\n}>(), {\n\theading: undefined,\n\ttext: undefined,\n\ttype: 'warning',\n})\n\ndefineSlots<{\n\t/** The main content (overwrites the `text` prop) */\n\tdefault?: Slot\n\t/** Manually provided icon */\n\ticon?: Slot\n}>()\n\nconst shouldShowAlert = computed(() => props.showAlert || props.type === 'error')\n\nconst iconPath = computed(() => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn mdiAlertDecagram\n\t\tcase 'success':\n\t\t\treturn mdiCheckboxMarkedCircle\n\t\tcase 'info':\n\t\t\treturn mdiInformation\n\t\tcase 'warning':\n\t\tdefault:\n\t\t\treturn mdiAlert\n\t}\n})\n</script>\n\n<template>\n\t<div\n\t\tclass=\"notecard\"\n\t\t:class=\"{\n\t\t\t[`notecard--${type}`]: type,\n\t\t\t'notecard--legacy': isLegacy,\n\t\t}\"\n\t\t:role=\"shouldShowAlert ? 'alert' : 'note'\">\n\t\t<slot name=\"icon\">\n\t\t\t<NcIconSvgWrapper\n\t\t\t\t:path=\"iconPath\"\n\t\t\t\tclass=\"notecard__icon\"\n\t\t\t\t:class=\"{ 'notecard__icon--heading': heading }\"\n\t\t\t\tinline />\n\t\t</slot>\n\t\t<div>\n\t\t\t<p v-if=\"heading\" class=\"notecard__heading\">\n\t\t\t\t{{ heading }}\n\t\t\t</p>\n\t\t\t<slot>\n\t\t\t\t<p class=\"notecard__text\">\n\t\t\t\t\t{{ text }}\n\t\t\t\t</p>\n\t\t\t</slot>\n\t\t</div>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n.notecard {\n\t--note-card-icon-size: 20px;\n\t--note-card-padding: calc(2 * var(--default-grid-baseline));\n\tcolor: var(--color-main-text) !important;\n\tbackground-color: var(--note-background) !important;\n\tborder-inline-start: var(--default-grid-baseline) solid var(--note-theme);\n\tborder-radius: var(--border-radius-small);\n\tmargin: 1rem 0;\n\tpadding: var(--note-card-padding);\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--note-card-padding);\n\n\t&__heading {\n\t\tfont-size: var(--note-card-icon-size); // Same as icon\n\t\tfont-weight: 600;\n\t}\n\n\t&__icon {\n\t\tcolor: var(--note-theme);\n\n\t\t&--heading {\n\t\t\tfont-size: var(--note-card-icon-size);\n\t\t\t// Ensure icon is on the same height as the heading\n\t\t\tmargin-block: calc((1lh - 1em) / 2) auto;\n\t\t}\n\t}\n\n\t&--success {\n\t\t--note-background: var(--color-success);\n\t\t--note-theme: var(--color-success-text);\n\t}\n\n\t&--info {\n\t\t--note-background: var(--color-info);\n\t\t--note-theme: var(--color-info-text);\n\t}\n\n\t&--error {\n\t\t--note-background: var(--color-error);\n\t\t--note-theme: var(--color-error-text);\n\t}\n\n\t&--warning {\n\t\t--note-background: var(--color-warning);\n\t\t--note-theme: var(--color-warning-text);\n\t}\n\n\t&--legacy {\n\t\tbackground-color: color-mix(in srgb, var(--note-background), var(--color-main-background) 80%) !important;\n\t\tcolor: var(--color-main-text) !important;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","type","_unref","_renderSlot","_createVNode","_normalizeClass","heading","_createElementVNode","_toDisplayString","text"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmEA,UAAM,QAAQ;AAqCd,UAAM,kBAAkB,SAAS,MAAM,MAAM,aAAa,MAAM,SAAS,OAAO;AAEhF,UAAM,WAAW,SAAS,MAAM;AAC/B,cAAQ,MAAM,MAAA;AAAA,QACb,KAAK;AACJ,iBAAO;AAAA,QACR,KAAK;AACJ,iBAAO;AAAA,QACR,KAAK;AACJ,iBAAO;AAAA,QACR,KAAK;AAAA,QACL;AACC,iBAAO;AAAA,MAAA;AAAA,IAEV,CAAC;;0BAIAA,mBAwBM,OAAA;AAAA,QAvBL,uBAAM,YAAU;AAAA,UACWC,CAAAA,aAAAA,KAAAA,IAAI,KAAKA,KAAAA;AAAAA,8BAA6BC,MAAA,QAAA;AAAA,QAAA;QAIhE,MAAM,gBAAA,QAAe,UAAA;AAAA,MAAA;QACtBC,WAMO,yBANP,MAMO;AAAA,UALNC,YAIUF,MAAA,gBAAA,GAAA;AAAA,YAHR,MAAM,SAAA;AAAA,YACP,OAAKG,eAAA,CAAC,kBAAgB,EAAA,2BACeC,KAAAA,QAAAA,CAAO,CAAA;AAAA,YAC5C,QAAA;AAAA,UAAA;;QAEFC,mBASM,OAAA,MAAA;AAAA,UARID,KAAAA,wBAATN,mBAEI,KAFJ,YAEIQ,gBADAF,KAAAA,OAAO,GAAA,CAAA;UAEXH,WAIO,4BAJP,MAIO;AAAA,YAHNI,mBAEI,KAFJ,YAEIC,gBADAC,KAAAA,IAAI,GAAA,CAAA;AAAA,UAAA;;;;;;;"}