@nextcloud/vue 9.0.0-alpha.0 → 9.0.0-alpha.1

package/dist/chunks/NcButton-7UKtzkX5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcButton-7UKtzkX5.cjs","sources":["../../src/utils/isSlotPopulated.ts","../../src/components/NcButton/NcButton.vue"],"sourcesContent":["/**\n * @copyright Copyright (c) 2023 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n *\n * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\n *\n * @license AGPL-3.0-or-later\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\nimport type { VNode, VNodeNormalizedChildren } from 'vue'\nimport { Fragment, Comment, Text } from 'vue'\n\n/**\n * Checks whether a slot is populated\n *\n * @param vnodes The array of vnodes to check\n */\nconst isSlotPopulated = function(vnodes?: VNode[] | VNodeNormalizedChildren) {\n\treturn Array.isArray(vnodes) && vnodes.some(node => {\n\t\tif (node === null) return false\n\t\tif (typeof node === 'object') {\n\t\t\tconst vnode = node as VNode\n\t\t\tif (vnode.type === Comment) return false\n\t\t\tif (vnode.type === Fragment && !isSlotPopulated(vnode.children)) return false\n\t\t\tif (vnode.type === Text && !(vnode.children as string).trim()) return false\n\t\t}\n\t\treturn true\n\t})\n}\n\nexport default isSlotPopulated\n","<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\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\n### General description\nGeneral purpose button component. See props for different options.\n[Use material design icons only for icons](https://www.npmjs.com/package/vue-material-design-icons) and remember to set their size to 20.\n\n### Usage\n### Custom icon slot\nTo be used with `vue-material-design-icons` only. For icon classes use the `default-icon` slot.\nIt can be used with one or multiple actions.\n```\n<template>\n<div class=\"wrapper\">\n\t<!-- Style selector -->\n\t<div class=\"grid\">\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"text\" name=\"style\" type=\"radio\">Text only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icon\" name=\"style\" type=\"radio\">Icon only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icontext\" name=\"style\" type=\"radio\">Icon and text</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"disabled\" type=\"checkbox\">Disabled</NcCheckboxRadioSwitch>\n\t\t<!--<NcCheckboxRadioSwitch v-model=\"readonly\" type=\"checkbox\">Read-only</NcCheckboxRadioSwitch>-->\n\t</div>\n\n\t<h5>Standard buttons</h5>\n\t<div class=\"grid\">\n\t\t<p>Tertiary, no background</p>\n\t\t<p>Tertiary</p>\n\t\t<p>Secondary</p>\n\t\t<p>Primary</p>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\ttype=\"tertiary-no-background\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\ttype=\"tertiary\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\ttype=\"primary\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t</div>\n\n\t<!-- Wide button -->\n\t<h5>Wide button</h5>\n\t<NcButton\n\t\t:disabled=\"disabled\"\n\t\t:readonly=\"readonly\"\n\t\t:wide=\"true\"\n\t\ttext=\"Example text\">\n\t\t<template #icon>\n\t\t\t<Video\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t\tExample text\n\t</NcButton>\n\n\t<!-- Special buttons -->\n\t<h5>Special buttons</h5>\n\t<div class=\"grid\">\n\t\t<p>Success</p>\n\t\t<p>Warning</p>\n\t\t<p>Error</p>\n\t\t<p> - </p>\n\t\t<NcButton\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\ttype=\"success\">\n\t\t\t<template #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\tExample text\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\ttype=\"warning\">\n\t\t\t<template #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\tExample text\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\ttype=\"error\">\n\t\t\t<template #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\tExample text\n\t\t</NcButton>\n\t\t<p> - </p>\n\t</div>\n</div>\n\n</template>\n<script>\nimport Video from 'vue-material-design-icons/Video'\n\nexport default {\n\tcomponents: {\n\t\tVideo,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\ttoggled: false,\n\t\t\tdisabled: false,\n\t\t\treadonly: false,\n\t\t\tstyle: 'icontext',\n\t\t}\n\t}\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tpadding: 0 12px;\n}\n\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 1fr 1fr 1fr;\n\tgrid-template-rows: repeat(auto-fill, auto);\n\tposition: relative;\n\tmargin: 12px 0;\n}\n\nh5 {\n\tfont-weight: bold;\n\tmargin: 40px 0 20px 0;\n}\n\np {\n\ttext-align: center;\n\tmargin: 4px 0 12px 0;\n\tcolor: var(--color-text-maxcontrast)\n}\n\nbutton {\n\tmargin: auto;\n}\n</style>\n```\n\n### Alignment\nSometimes it is required to change the icon alignment on the button, like for switching between pages as in following example:\n\n```vue\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: 12px;\">\n\t\t<NcButton aria-label=\"center (default)\" type=\"secondary\" wide>\n\t\t\t<template #icon>\n\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tcenter (default)\n\t\t</NcButton>\n\t\t<NcButton alignment=\"center-reverse\" aria-label=\"center-reverse\" type=\"secondary\" wide>\n\t\t\t<template #icon>\n\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tcenter-reverse\n\t\t</NcButton>\n\t\t<div style=\"display: flex; gap: 12px;\">\n\t\t\t<div style=\"display: flex; flex-direction: column; gap: 12px; flex: 1\">\n\t\t\t\t<NcButton alignment=\"start\" aria-label=\"start\" type=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tstart\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton alignment=\"start-reverse\" aria-label=\"start-reverse\" type=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tstart-reverse\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t\t<div style=\"display: flex; flex-direction: column; gap: 12px; flex: 1\">\n\t\t\t\t<NcButton alignment=\"end\" aria-label=\"end\" type=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tend\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton alignment=\"end-reverse\" aria-label=\"end-reverse\" type=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tend-reverse\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport IconLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport IconRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconLeft,\n\t\tIconRight,\n\t},\n}\n</script>\n```\n\n### Pressed state\n\nIt is possible to make the button stateful by adding a pressed state, e.g. if you like to create a favorite button.\nThe button will have the required `aria` attribute for accessibility and visual style (`primary` when pressed, and the configured type otherwise).\n\nDo not change `text` or `aria-label` of the pressed/unpressed button. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed\n\n```vue\n<template>\n\t<div>\n\t\t<div style=\"display: flex; gap: 12px;\">\n\t\t\t<NcButton v-model:pressed=\"isFavorite\" aria-label=\"Favorite\" type=\"tertiary-no-background\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconStar v-if=\"isFavorite\" :size=\"20\" />\n\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t\t<NcButton v-model:pressed=\"isFavorite\" type=\"tertiary\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconStar v-if=\"isFavorite\" :size=\"20\" />\n\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tFavorite\n\t\t\t</NcButton>\n\t\t\t<NcButton v-model:pressed=\"isFavorite\" aria-label=\"Favorite\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconStar v-if=\"isFavorite\" :size=\"20\" />\n\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</div>\n\t\t<div>\n\t\t\tIt is {{ isFavorite ? 'a' : 'not a' }} favorite.\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport IconStar from 'vue-material-design-icons/Star.vue'\nimport IconStarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconStar,\n\t\tIconStarOutline,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tisFavorite: false,\n\t\t}\n\t},\n\tmethods: {\n\t\ttoggleFavorite() {\n\t\t\tthis.isFavorite = !this.isFavorite\n\t\t},\n\t},\n}\n</script>\n```\n\n### Usage example: Sorting table columns\nThe standard way to implement sortable table column headers should be like this:\n\n```vue\n<template>\n\t<table>\n\t\t<thead>\n\t\t\t<tr>\n\t\t\t\t<th :aria-sorted=\"sortedName\" class=\"row-name\">\n\t\t\t\t\t<NcButton alignment=\"start-reverse\"\n\t\t\t\t\t\t:wide=\"true\"\n\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t@click=\"sortName\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconDown v-if=\"sortedName === 'ascending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t\t<IconUp v-else-if=\"sortedName === 'descending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<span class=\"table-header\">Name</span>\n\t\t\t\t\t</NcButton>\n\t\t\t\t</th>\n\t\t\t\t<th :aria-sorted=\"sortedSize\" class=\"row-size\">\n\t\t\t\t\t<NcButton alignment=\"end\"\n\t\t\t\t\t\t:wide=\"true\"\n\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t@click=\"sortSize\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconDown v-if=\"sortedSize === 'ascending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t\t<IconUp v-else-if=\"sortedSize === 'descending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<span class=\"table-header\">Size</span>\n\t\t\t\t\t</NcButton>\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t<td class=\"row-name\">Lorem ipsum</td>\n\t\t\t\t<td class=\"row-size\">8 MiB</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</template>\n<script>\nimport IconUp from 'vue-material-design-icons/MenuUp.vue'\nimport IconDown from 'vue-material-design-icons/MenuDown.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconUp,\n\t\tIconDown,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsortedName: null,\n\t\t\tsortedSize: null,\n\t\t}\n\t},\n\tmethods: {\n\t\tsortName() {\n\t\t\tif (this.sortedName === 'ascending') {\n\t\t\t\tthis.sortedName = 'descending'\n\t\t\t} else if (this.sortedName === 'descending') {\n\t\t\t\tthis.sortedName = null\n\t\t\t} else {\n\t\t\t\tthis.sortedName = 'ascending'\n\t\t\t}\n\t\t},\n\t\tsortSize() {\n\t\t\tif (this.sortedSize === 'ascending') {\n\t\t\t\tthis.sortedSize = 'descending'\n\t\t\t} else if (this.sortedSize === 'descending') {\n\t\t\t\tthis.sortedSize = null\n\t\t\t} else {\n\t\t\t\tthis.sortedSize = 'ascending'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n<style>\ntable {\n\ttable-layout: fixed;\n\twidth: 300px;\n}\n\ntd.row-name {\n\tpadding-inline-start: 16px;\n}\n\ntd.row-size {\n\ttext-align: right;\n\tpadding-inline-end: 16px;\n}\n\n.table-header {\n\tfont-weight: normal;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.sort-icon {\n\tcolor: var(--color-text-maxcontrast);\n\tposition: relative;\n\tinset-inline: -10px;\n}\n\n.row-size .sort-icon {\n\tinset-inline: 10px;\n}\n</style>\n```\n\n</docs>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\n\nimport { defineComponent, h, resolveComponent } from 'vue'\n\nimport isSlotPopulated from '../../utils/isSlotPopulated'\n\nconst BUTTON_ALIGNMENT = ['start', 'start-reverse', 'center', 'center-reverse', 'end', 'end-reverse'] as const\nconst BUTTON_TYPES = ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'] as const\nconst NATIVE_TYPES = ['submit', 'reset', 'button'] as const\n\nexport default defineComponent({\n\tname: 'NcButton',\n\n\tinject: {\n\t\tgetNcPopoverTriggerAttrs: {\n\t\t\tfrom: 'NcPopover:trigger:attrs',\n\t\t\tdefault: () => () => ({}),\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Set the text and icon alignment\n\t\t *\n\t\t * @default 'center'\n\t\t * @type {'start' | 'start-reverse' | 'center' | 'center-reverse' | 'end' | 'end-reverse'}\n\t\t */\n\t\talignment: {\n\t\t\ttype: String as PropType<typeof BUTTON_ALIGNMENT[number]>,\n\t\t\tdefault: 'center',\n\t\t\tvalidator(alignment) {\n\t\t\t\treturn typeof alignment === 'string' && (BUTTON_ALIGNMENT as readonly string[]).includes(alignment)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Toggles the disabled state of the button on and off.\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Specifies the button type\n\t\t * If left empty, the default button style will be applied.\n\t\t *\n\t\t * @default 'secondary'\n\t\t * @type {'primary' | 'secondary' | 'tertiary' | 'tertiary-no-background' | 'tertiary-on-primary' | 'error' | 'warning' | 'success'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String as PropType<typeof BUTTON_TYPES[number]>,\n\t\t\tvalidator(value) {\n\t\t\t\treturn typeof value === 'string' && (BUTTON_TYPES as readonly string[]).indexOf(value) !== -1\n\t\t\t},\n\t\t\tdefault: 'secondary',\n\t\t},\n\n\t\t/**\n\t\t * Specifies the button native type\n\t\t * If left empty, the default \"button\" type will be used.\n\t\t *\n\t\t * @type {'submit' | 'reset' | 'button'}\n\t\t */\n\t\tnativeType: {\n\t\t\ttype: String as PropType<typeof NATIVE_TYPES[number]>,\n\t\t\tvalidator(value) {\n\t\t\t\treturn typeof value === 'string' && (NATIVE_TYPES as readonly string[]).includes(value)\n\t\t\t},\n\t\t\tdefault: 'button',\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the button should span all the available width.\n\t\t * By default, buttons span the whole width of the container.\n\t\t */\n\t\twide: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Always try to provide an aria-label to your button. Make it more\n\t\t * specific than the button's name by provide some more context. E.g. if\n\t\t * the name of the button is \"send\" in the Mail app, the aria label could\n\t\t * be \"Send email\".\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Providing the href attribute turns the button component into an `a`\n\t\t * element.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Providing the download attribute with href downloads file when clicking.\n\t\t */\n\t\tdownload: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Providing the to attribute turns the button component into a `router-link`\n\t\t * element. Takes precedence over the href attribute.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The pressed state of the button if it has a checked state\n\t\t * This will add the `aria-pressed` attribute and for the button to have the primary style in checked state.\n\t\t *\n\t\t * Pressed state is not supported for links\n\t\t */\n\t\tpressed: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: ['update:pressed', 'click'],\n\n\tcomputed: {\n\t\t/**\n\t\t * The real type to be used for the button, enforces `primary` for pressed state and, if stateful button, any other type for not pressed state\n\t\t * Otherwise the type property is used.\n\t\t */\n\t\trealType() {\n\t\t\t// Force *primary* when pressed\n\t\t\tif (this.pressed) {\n\t\t\t\treturn 'primary'\n\t\t\t}\n\t\t\t// If not pressed but button is configured as stateful button then the type must not be primary\n\t\t\tif (this.pressed === false && this.type === 'primary') {\n\t\t\t\treturn 'secondary'\n\t\t\t}\n\t\t\treturn this.type\n\t\t},\n\n\t\t/**\n\t\t * The flexbox alignment of the button content\n\t\t */\n\t\tflexAlignment() {\n\t\t\treturn this.alignment.split('-')[0]\n\t\t},\n\n\t\t/**\n\t\t * If the button content should be reversed (icon on the end)\n\t\t */\n\t\tisReverseAligned() {\n\t\t\treturn this.alignment.includes('-')\n\t\t},\n\n\t\tncPopoverTriggerAttrs() {\n\t\t\treturn this.getNcPopoverTriggerAttrs()\n\t\t},\n\t},\n\n\t/**\n\t * The render function to display the component\n\t *\n\t * @return {object|undefined} The created VNode\n\t */\n\trender() {\n\t\tconst hasText = isSlotPopulated(this.$slots.default?.())\n\t\tconst hasIcon = isSlotPopulated(this.$slots.icon?.())\n\n\t\t/**\n\t\t * Always fill either the text prop or the ariaLabel one.\n\t\t */\n\t\tif (!hasText && !this.ariaLabel) {\n\t\t\tconsole.warn('You need to fill either the text or the ariaLabel props in the button component.', {\n\t\t\t\ttext: this.$slots.default?.()?.[0]?.children,\n\t\t\t\tariaLabel: this.ariaLabel,\n\t\t\t},\n\t\t\tthis)\n\t\t}\n\n\t\tconst isLink = (this.to || this.href)\n\n\t\tconst hasPressed = !isLink && typeof this.pressed === 'boolean'\n\n\t\tconst renderButton = ({ href, navigate, isActive }: {href?: string, navigate?: (ev: Event) => void, isActive?: boolean } = {}) => h(isLink ? 'a' : 'button',\n\t\t\t{\n\t\t\t\tclass: [\n\t\t\t\t\t'button-vue',\n\t\t\t\t\t{\n\t\t\t\t\t\t'button-vue--icon-only': hasIcon && !hasText,\n\t\t\t\t\t\t'button-vue--text-only': hasText && !hasIcon,\n\t\t\t\t\t\t'button-vue--icon-and-text': hasIcon && hasText,\n\t\t\t\t\t\t[`button-vue--vue-${this.realType}`]: this.realType,\n\t\t\t\t\t\t'button-vue--wide': this.wide,\n\t\t\t\t\t\t[`button-vue--${this.flexAlignment}`]: this.flexAlignment !== 'center',\n\t\t\t\t\t\t'button-vue--reverse': this.isReverseAligned,\n\t\t\t\t\t\tactive: isActive,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\t'aria-label': this.ariaLabel,\n\t\t\t\t'aria-pressed': hasPressed ? this.pressed.toString() : undefined,\n\t\t\t\tdisabled: this.disabled,\n\t\t\t\ttype: isLink ? null : this.nativeType,\n\t\t\t\trole: isLink ? 'button' : null,\n\t\t\t\thref: this.to ? href : (this.href || null),\n\t\t\t\ttarget: isLink ? '_self' : null,\n\t\t\t\trel: isLink ? 'nofollow noreferrer noopener' : null,\n\t\t\t\tdownload: (!this.to && this.href && this.download) ? this.download : null,\n\t\t\t\t// If this button is used as a popover trigger, we need to apply trigger attrs, e.g. aria attributes\n\t\t\t\t...this.ncPopoverTriggerAttrs,\n\t\t\t\tonClick: ($event) => {\n\t\t\t\t\t// Update pressed prop on click if it is set\n\t\t\t\t\tif (hasPressed) {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Update the current pressed state of the button (if the `pressed` property was configured)\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * @property {boolean} newValue The new `pressed`-state\n\t\t\t\t\t\t */\n\t\t\t\t\t\tthis.$emit('update:pressed', !this.pressed)\n\t\t\t\t\t}\n\t\t\t\t\t// We have to both navigate and emit the click event\n\t\t\t\t\tthis.$emit('click', $event)\n\t\t\t\t\tnavigate?.($event)\n\t\t\t\t},\n\t\t\t},\n\t\t\t[\n\t\t\t\th('span', { class: 'button-vue__wrapper' }, [\n\t\t\t\t\thasIcon\n\t\t\t\t\t\t? h('span', {\n\t\t\t\t\t\t\tclass: 'button-vue__icon',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t'aria-hidden': 'true',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t[this.$slots.icon?.()],\n\t\t\t\t\t\t)\n\t\t\t\t\t\t: null,\n\t\t\t\t\thasText ? h('span', { class: 'button-vue__text' }, [this.$slots.default?.()]) : null,\n\t\t\t\t]),\n\t\t\t],\n\t\t)\n\n\t\t// If we have a router-link, we wrap the button in it\n\t\tif (this.to) {\n\t\t\treturn h(resolveComponent('router-link'), {\n\t\t\t\tcustom: true,\n\t\t\t\tto: this.to,\n\t\t\t}, {\n\t\t\t\tdefault: renderButton,\n\t\t\t})\n\t\t}\n\t\t// Otherwise we simply return the button\n\t\treturn renderButton()\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n\n.button-vue {\n\tposition: relative;\n\twidth: fit-content;\n\toverflow: hidden;\n\tborder: 0;\n\tpadding: 0;\n\tfont-size: var(--default-font-size);\n\tfont-weight: bold;\n\tmin-height: $clickable-area;\n\tmin-width: $clickable-area;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\t// Cursor pointer on element and all children\n\tcursor: pointer;\n\t& *,\n\tspan {\n\t\tcursor: pointer;\n\t}\n\tborder-radius: math.div($clickable-area, 2);\n\ttransition-property: color, border-color, background-color;\n\ttransition-duration: 0.1s;\n\ttransition-timing-function: linear;\n\n\t// No outline feedback for focus. Handled with a toggled class in js (see data)\n\t&:focus {\n\t\toutline: none;\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\t\t& * {\n\t\t\tcursor: default;\n\t\t}\n\t\topacity: $opacity_disabled;\n\t\t// Gives a wash out effect\n\t\tfilter: saturate($opacity_normal);\n\t}\n\n\t// Default button type\n\tcolor: var(--color-primary-element-light-text);\n\tbackground-color: var(--color-primary-element-light);\n\t&:hover:not(:disabled) {\n\t\tbackground-color: var(--color-primary-element-light-hover);\n\t}\n\n\t// Back to the default color for this button when active\n\t// TODO: add ripple effect\n\t&:active {\n\t\tbackground-color: var(--color-primary-element-light);\n\t}\n\n\t&__wrapper {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t}\n\n\t&--end &__wrapper {\n\t\tjustify-content: end;\n\t}\n\t&--start &__wrapper {\n\t\tjustify-content: start;\n\t}\n\t&--reverse &__wrapper {\n\t\tflex-direction: row-reverse;\n\t}\n\n\t&--reverse#{&}--icon-and-text {\n\t\tpadding-inline: calc(var(--default-grid-baseline) * 4) var(--default-grid-baseline);\n\t}\n\n\t&__icon {\n\t\theight: $clickable-area;\n\t\twidth: $clickable-area;\n\t\tmin-height: $clickable-area;\n\t\tmin-width: $clickable-area;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t&__text {\n\t\tfont-weight: bold;\n\t\tmargin-bottom: 1px;\n\t\tpadding: 2px 0;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t}\n\n\t// Icon-only button\n\t&--icon-only {\n\t\twidth: $clickable-area !important;\n\t}\n\n\t// Text-only button\n\t&--text-only {\n\t\tpadding: 0 12px;\n\t\t& .button-vue__text {\n\t\t\tmargin-left: 4px;\n\t\t\tmargin-right: 4px;\n\t\t}\n\t}\n\n\t// Icon and text button\n\t&--icon-and-text {\n\t\tpadding-block: 0;\n\t\tpadding-inline: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 4);\n\t}\n\n\t// Wide button spans the whole width of the container\n\t&--wide {\n\t\twidth: 100%;\n\t}\n\n\t&:focus-visible {\n\t\toutline: 2px solid var(--color-main-text) !important;\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background) !important;\n\t\t&.button-vue--vue-tertiary-on-primary {\n\t\t\toutline: 2px solid var(--color-primary-element-text);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Button types\n\n\t// Primary\n\t&--vue-primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tcolor: var(--color-primary-element-text);\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\t}\n\n\t// Secondary\n\t&--vue-secondary {\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground-color: var(--color-primary-element-light);\n\t\t&:hover:not(:disabled) {\n\t\t\tcolor: var(--color-primary-element-light-text);\n\t\t\tbackground-color: var(--color-primary-element-light-hover);\n\t\t}\n\t}\n\n\t// Tertiary\n\t&--vue-tertiary {\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: transparent;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t}\n\n\t// Tertiary, no background\n\t&--vue-tertiary-no-background {\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: transparent;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Tertiary on primary color (like the header)\n\t&--vue-tertiary-on-primary {\n\t\tcolor: var(--color-primary-element-text);\n\t\tbackground-color: transparent;\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Success\n\t&--vue-success {\n\t\tbackground-color: var(--color-success);\n\t\tcolor: white;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-success-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// : add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-success);\n\t\t}\n\t}\n\n\t// Warning\n\t&--vue-warning {\n\t\tbackground-color: var(--color-warning);\n\t\tcolor: white;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-warning-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-warning);\n\t\t}\n\t}\n\n\t// Error\n\t&--vue-error {\n\t\tbackground-color: var(--color-error);\n\t\tcolor: white;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-error-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-error);\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["isSlotPopulated","vnodes","node","vnode","vue","BUTTON_ALIGNMENT","BUTTON_TYPES","NATIVE_TYPES","_sfc_main","alignment","value","hasText","_b","_a","hasIcon","_d","_c","_h","_g","_f","_e","isLink","hasPressed","renderButton","href","navigate","isActive","$event","_b2","_a2","_d2","_c2"],"mappings":"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"}

package/dist/chunks/{NcButton-nCkJxwsi.mjs → NcButton-YOXv3gFY.mjs}

@@ -1,6 +1,6 @@
-import "../assets/NcButton-fqTN6SJK.css";
-import { Comment as p, Fragment as c, Text as f, defineComponent as h, h as n, resolveComponent as y } from "vue";
-import { _ as b } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+import "../assets/NcButton-rKJYdkZn.css";
+import { Comment as A, Fragment as w, Text as N, defineComponent as S, h as i, resolveComponent as B } from "vue";
+import { _ as P } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
 /**
  * @copyright Copyright (c) 2023 Raimund Schlüßler <raimund.schluessler@mailbox.org>
  *
@@ -22,23 +22,23 @@ import { _ as b } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-const s = function(t) {
+const o = function(t) {
   return Array.isArray(t) && t.some((r) => {
     if (r === null)
       return !1;
     if (typeof r == "object") {
       const e = r;
-      if (e.type === p || e.type === c && !s(e.children) || e.type === f && !e.children.trim())
+      if (e.type === A || e.type === w && !o(e.children) || e.type === N && !e.children.trim())
         return !1;
     }
     return !0;
   });
-}, m = ["start", "start-reverse", "center", "center-reverse", "end", "end-reverse"], g = ["primary", "secondary", "tertiary", "tertiary-no-background", "tertiary-on-primary", "error", "warning", "success"], v = ["submit", "reset", "button"], T = h({
+}, L = ["start", "start-reverse", "center", "center-reverse", "end", "end-reverse"], k = ["primary", "secondary", "tertiary", "tertiary-no-background", "tertiary-on-primary", "error", "warning", "success"], $ = ["submit", "reset", "button"], C = S({
   name: "NcButton",
   inject: {
-    ncPopoverTriggerAttrs: {
+    getNcPopoverTriggerAttrs: {
       from: "NcPopover:trigger:attrs",
-      default: () => ({})
+      default: () => () => ({})
     }
   },
   props: {
@@ -52,7 +52,7 @@ const s = function(t) {
       type: String,
       default: "center",
       validator(t) {
-        return typeof t == "string" && m.includes(t);
+        return typeof t == "string" && L.includes(t);
       }
     },
     /**
@@ -72,7 +72,7 @@ const s = function(t) {
     type: {
       type: String,
       validator(t) {
-        return typeof t == "string" && g.indexOf(t) !== -1;
+        return typeof t == "string" && k.indexOf(t) !== -1;
       },
       default: "secondary"
     },
@@ -85,7 +85,7 @@ const s = function(t) {
     nativeType: {
       type: String,
       validator(t) {
-        return typeof t == "string" && v.includes(t);
+        return typeof t == "string" && $.includes(t);
       },
       default: "button"
     },
@@ -170,6 +170,9 @@ const s = function(t) {
      */
     isReverseAligned() {
       return this.alignment.includes("-");
+    },
+    ncPopoverTriggerAttrs() {
+      return this.getNcPopoverTriggerAttrs();
     }
   },
   /**
@@ -178,71 +181,75 @@ const s = function(t) {
    * @return {object|undefined} The created VNode
    */
   render() {
-    const t = s(this.$slots.default?.()), r = s(this.$slots.icon?.());
-    !t && !this.ariaLabel && console.warn(
+    var t, r, e, a, u, d, c, p;
+    const s = o((r = (t = this.$slots).default) == null ? void 0 : r.call(t)), l = o((a = (e = this.$slots).icon) == null ? void 0 : a.call(e));
+    !s && !this.ariaLabel && console.warn(
       "You need to fill either the text or the ariaLabel props in the button component.",
       {
-        text: this.$slots.default?.()?.[0]?.children,
+        text: (p = (c = (d = (u = this.$slots).default) == null ? void 0 : d.call(u)) == null ? void 0 : c[0]) == null ? void 0 : p.children,
         ariaLabel: this.ariaLabel
       },
       this
     );
-    const e = this.to || this.href, i = !e && typeof this.pressed == "boolean", o = ({ href: a, navigate: u, isActive: d } = {}) => n(
-      e ? "a" : "button",
-      {
-        class: [
-          "button-vue",
-          {
-            "button-vue--icon-only": r && !t,
-            "button-vue--text-only": t && !r,
-            "button-vue--icon-and-text": r && t,
-            [`button-vue--vue-${this.realType}`]: this.realType,
-            "button-vue--wide": this.wide,
-            [`button-vue--${this.flexAlignment}`]: this.flexAlignment !== "center",
-            "button-vue--reverse": this.isReverseAligned,
-            active: d
-          }
-        ],
-        "aria-label": this.ariaLabel,
-        "aria-pressed": i ? this.pressed.toString() : void 0,
-        disabled: this.disabled,
-        type: e ? null : this.nativeType,
-        role: e ? "button" : null,
-        href: this.to ? a : this.href || null,
-        target: e ? "_self" : null,
-        rel: e ? "nofollow noreferrer noopener" : null,
-        download: !this.to && this.href && this.download ? this.download : null,
-        // If this button is used as a popover trigger, we need to apply trigger attrs, e.g. aria attributes
-        ...this.ncPopoverTriggerAttrs,
-        onClick: (l) => {
-          i && this.$emit("update:pressed", !this.pressed), this.$emit("click", l), u?.(l);
-        }
-      },
-      [
-        n("span", { class: "button-vue__wrapper" }, [
-          r ? n(
-            "span",
+    const n = this.to || this.href, f = !n && typeof this.pressed == "boolean", h = ({ href: T, navigate: y, isActive: x } = {}) => {
+      var v, g, b, m;
+      return i(
+        n ? "a" : "button",
+        {
+          class: [
+            "button-vue",
             {
-              class: "button-vue__icon",
-              attrs: {
-                "aria-hidden": "true"
-              }
-            },
-            [this.$slots.icon?.()]
-          ) : null,
-          t ? n("span", { class: "button-vue__text" }, [this.$slots.default?.()]) : null
-        ])
-      ]
-    );
-    return this.to ? n(y("router-link"), {
+              "button-vue--icon-only": l && !s,
+              "button-vue--text-only": s && !l,
+              "button-vue--icon-and-text": l && s,
+              ["button-vue--vue-".concat(this.realType)]: this.realType,
+              "button-vue--wide": this.wide,
+              ["button-vue--".concat(this.flexAlignment)]: this.flexAlignment !== "center",
+              "button-vue--reverse": this.isReverseAligned,
+              active: x
+            }
+          ],
+          "aria-label": this.ariaLabel,
+          "aria-pressed": f ? this.pressed.toString() : void 0,
+          disabled: this.disabled,
+          type: n ? null : this.nativeType,
+          role: n ? "button" : null,
+          href: this.to ? T : this.href || null,
+          target: n ? "_self" : null,
+          rel: n ? "nofollow noreferrer noopener" : null,
+          download: !this.to && this.href && this.download ? this.download : null,
+          // If this button is used as a popover trigger, we need to apply trigger attrs, e.g. aria attributes
+          ...this.ncPopoverTriggerAttrs,
+          onClick: (_) => {
+            f && this.$emit("update:pressed", !this.pressed), this.$emit("click", _), y == null || y(_);
+          }
+        },
+        [
+          i("span", { class: "button-vue__wrapper" }, [
+            l ? i(
+              "span",
+              {
+                class: "button-vue__icon",
+                attrs: {
+                  "aria-hidden": "true"
+                }
+              },
+              [(g = (v = this.$slots).icon) == null ? void 0 : g.call(v)]
+            ) : null,
+            s ? i("span", { class: "button-vue__text" }, [(m = (b = this.$slots).default) == null ? void 0 : m.call(b)]) : null
+          ])
+        ]
+      );
+    };
+    return this.to ? i(B("router-link"), {
       custom: !0,
       to: this.to
     }, {
-      default: o
-    }) : o();
+      default: h
+    }) : h();
   }
-}), A = /* @__PURE__ */ b(T, [["__scopeId", "data-v-a8683752"]]);
+}), j = /* @__PURE__ */ P(C, [["__scopeId", "data-v-4d186141"]]);
 export {
-  A as N,
-  s as i
+  j as N,
+  o as i
 };

package/dist/chunks/NcButton-YOXv3gFY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcButton-YOXv3gFY.mjs","sources":["../../src/utils/isSlotPopulated.ts","../../src/components/NcButton/NcButton.vue"],"sourcesContent":["/**\n * @copyright Copyright (c) 2023 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n *\n * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\n *\n * @license AGPL-3.0-or-later\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\nimport type { VNode, VNodeNormalizedChildren } from 'vue'\nimport { Fragment, Comment, Text } from 'vue'\n\n/**\n * Checks whether a slot is populated\n *\n * @param vnodes The array of vnodes to check\n */\nconst isSlotPopulated = function(vnodes?: VNode[] | VNodeNormalizedChildren) {\n\treturn Array.isArray(vnodes) && vnodes.some(node => {\n\t\tif (node === null) return false\n\t\tif (typeof node === 'object') {\n\t\t\tconst vnode = node as VNode\n\t\t\tif (vnode.type === Comment) return false\n\t\t\tif (vnode.type === Fragment && !isSlotPopulated(vnode.children)) return false\n\t\t\tif (vnode.type === Text && !(vnode.children as string).trim()) return false\n\t\t}\n\t\treturn true\n\t})\n}\n\nexport default isSlotPopulated\n","<!--\n - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\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\n### General description\nGeneral purpose button component. See props for different options.\n[Use material design icons only for icons](https://www.npmjs.com/package/vue-material-design-icons) and remember to set their size to 20.\n\n### Usage\n### Custom icon slot\nTo be used with `vue-material-design-icons` only. For icon classes use the `default-icon` slot.\nIt can be used with one or multiple actions.\n```\n<template>\n<div class=\"wrapper\">\n\t<!-- Style selector -->\n\t<div class=\"grid\">\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"text\" name=\"style\" type=\"radio\">Text only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icon\" name=\"style\" type=\"radio\">Icon only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icontext\" name=\"style\" type=\"radio\">Icon and text</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"disabled\" type=\"checkbox\">Disabled</NcCheckboxRadioSwitch>\n\t\t<!--<NcCheckboxRadioSwitch v-model=\"readonly\" type=\"checkbox\">Read-only</NcCheckboxRadioSwitch>-->\n\t</div>\n\n\t<h5>Standard buttons</h5>\n\t<div class=\"grid\">\n\t\t<p>Tertiary, no background</p>\n\t\t<p>Tertiary</p>\n\t\t<p>Secondary</p>\n\t\t<p>Primary</p>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\ttype=\"tertiary-no-background\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\ttype=\"tertiary\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\ttype=\"primary\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t</div>\n\n\t<!-- Wide button -->\n\t<h5>Wide button</h5>\n\t<NcButton\n\t\t:disabled=\"disabled\"\n\t\t:readonly=\"readonly\"\n\t\t:wide=\"true\"\n\t\ttext=\"Example text\">\n\t\t<template #icon>\n\t\t\t<Video\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t\tExample text\n\t</NcButton>\n\n\t<!-- Special buttons -->\n\t<h5>Special buttons</h5>\n\t<div class=\"grid\">\n\t\t<p>Success</p>\n\t\t<p>Warning</p>\n\t\t<p>Error</p>\n\t\t<p> - </p>\n\t\t<NcButton\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\ttype=\"success\">\n\t\t\t<template #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\tExample text\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\ttype=\"warning\">\n\t\t\t<template #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\tExample text\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\ttype=\"error\">\n\t\t\t<template #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\tExample text\n\t\t</NcButton>\n\t\t<p> - </p>\n\t</div>\n</div>\n\n</template>\n<script>\nimport Video from 'vue-material-design-icons/Video'\n\nexport default {\n\tcomponents: {\n\t\tVideo,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\ttoggled: false,\n\t\t\tdisabled: false,\n\t\t\treadonly: false,\n\t\t\tstyle: 'icontext',\n\t\t}\n\t}\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tpadding: 0 12px;\n}\n\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 1fr 1fr 1fr;\n\tgrid-template-rows: repeat(auto-fill, auto);\n\tposition: relative;\n\tmargin: 12px 0;\n}\n\nh5 {\n\tfont-weight: bold;\n\tmargin: 40px 0 20px 0;\n}\n\np {\n\ttext-align: center;\n\tmargin: 4px 0 12px 0;\n\tcolor: var(--color-text-maxcontrast)\n}\n\nbutton {\n\tmargin: auto;\n}\n</style>\n```\n\n### Alignment\nSometimes it is required to change the icon alignment on the button, like for switching between pages as in following example:\n\n```vue\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: 12px;\">\n\t\t<NcButton aria-label=\"center (default)\" type=\"secondary\" wide>\n\t\t\t<template #icon>\n\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tcenter (default)\n\t\t</NcButton>\n\t\t<NcButton alignment=\"center-reverse\" aria-label=\"center-reverse\" type=\"secondary\" wide>\n\t\t\t<template #icon>\n\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tcenter-reverse\n\t\t</NcButton>\n\t\t<div style=\"display: flex; gap: 12px;\">\n\t\t\t<div style=\"display: flex; flex-direction: column; gap: 12px; flex: 1\">\n\t\t\t\t<NcButton alignment=\"start\" aria-label=\"start\" type=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tstart\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton alignment=\"start-reverse\" aria-label=\"start-reverse\" type=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tstart-reverse\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t\t<div style=\"display: flex; flex-direction: column; gap: 12px; flex: 1\">\n\t\t\t\t<NcButton alignment=\"end\" aria-label=\"end\" type=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tend\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton alignment=\"end-reverse\" aria-label=\"end-reverse\" type=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tend-reverse\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport IconLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport IconRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconLeft,\n\t\tIconRight,\n\t},\n}\n</script>\n```\n\n### Pressed state\n\nIt is possible to make the button stateful by adding a pressed state, e.g. if you like to create a favorite button.\nThe button will have the required `aria` attribute for accessibility and visual style (`primary` when pressed, and the configured type otherwise).\n\nDo not change `text` or `aria-label` of the pressed/unpressed button. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed\n\n```vue\n<template>\n\t<div>\n\t\t<div style=\"display: flex; gap: 12px;\">\n\t\t\t<NcButton v-model:pressed=\"isFavorite\" aria-label=\"Favorite\" type=\"tertiary-no-background\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconStar v-if=\"isFavorite\" :size=\"20\" />\n\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t\t<NcButton v-model:pressed=\"isFavorite\" type=\"tertiary\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconStar v-if=\"isFavorite\" :size=\"20\" />\n\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tFavorite\n\t\t\t</NcButton>\n\t\t\t<NcButton v-model:pressed=\"isFavorite\" aria-label=\"Favorite\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconStar v-if=\"isFavorite\" :size=\"20\" />\n\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</div>\n\t\t<div>\n\t\t\tIt is {{ isFavorite ? 'a' : 'not a' }} favorite.\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport IconStar from 'vue-material-design-icons/Star.vue'\nimport IconStarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconStar,\n\t\tIconStarOutline,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tisFavorite: false,\n\t\t}\n\t},\n\tmethods: {\n\t\ttoggleFavorite() {\n\t\t\tthis.isFavorite = !this.isFavorite\n\t\t},\n\t},\n}\n</script>\n```\n\n### Usage example: Sorting table columns\nThe standard way to implement sortable table column headers should be like this:\n\n```vue\n<template>\n\t<table>\n\t\t<thead>\n\t\t\t<tr>\n\t\t\t\t<th :aria-sorted=\"sortedName\" class=\"row-name\">\n\t\t\t\t\t<NcButton alignment=\"start-reverse\"\n\t\t\t\t\t\t:wide=\"true\"\n\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t@click=\"sortName\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconDown v-if=\"sortedName === 'ascending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t\t<IconUp v-else-if=\"sortedName === 'descending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<span class=\"table-header\">Name</span>\n\t\t\t\t\t</NcButton>\n\t\t\t\t</th>\n\t\t\t\t<th :aria-sorted=\"sortedSize\" class=\"row-size\">\n\t\t\t\t\t<NcButton alignment=\"end\"\n\t\t\t\t\t\t:wide=\"true\"\n\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t@click=\"sortSize\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconDown v-if=\"sortedSize === 'ascending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t\t<IconUp v-else-if=\"sortedSize === 'descending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<span class=\"table-header\">Size</span>\n\t\t\t\t\t</NcButton>\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t<td class=\"row-name\">Lorem ipsum</td>\n\t\t\t\t<td class=\"row-size\">8 MiB</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</template>\n<script>\nimport IconUp from 'vue-material-design-icons/MenuUp.vue'\nimport IconDown from 'vue-material-design-icons/MenuDown.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconUp,\n\t\tIconDown,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsortedName: null,\n\t\t\tsortedSize: null,\n\t\t}\n\t},\n\tmethods: {\n\t\tsortName() {\n\t\t\tif (this.sortedName === 'ascending') {\n\t\t\t\tthis.sortedName = 'descending'\n\t\t\t} else if (this.sortedName === 'descending') {\n\t\t\t\tthis.sortedName = null\n\t\t\t} else {\n\t\t\t\tthis.sortedName = 'ascending'\n\t\t\t}\n\t\t},\n\t\tsortSize() {\n\t\t\tif (this.sortedSize === 'ascending') {\n\t\t\t\tthis.sortedSize = 'descending'\n\t\t\t} else if (this.sortedSize === 'descending') {\n\t\t\t\tthis.sortedSize = null\n\t\t\t} else {\n\t\t\t\tthis.sortedSize = 'ascending'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n<style>\ntable {\n\ttable-layout: fixed;\n\twidth: 300px;\n}\n\ntd.row-name {\n\tpadding-inline-start: 16px;\n}\n\ntd.row-size {\n\ttext-align: right;\n\tpadding-inline-end: 16px;\n}\n\n.table-header {\n\tfont-weight: normal;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.sort-icon {\n\tcolor: var(--color-text-maxcontrast);\n\tposition: relative;\n\tinset-inline: -10px;\n}\n\n.row-size .sort-icon {\n\tinset-inline: 10px;\n}\n</style>\n```\n\n</docs>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\n\nimport { defineComponent, h, resolveComponent } from 'vue'\n\nimport isSlotPopulated from '../../utils/isSlotPopulated'\n\nconst BUTTON_ALIGNMENT = ['start', 'start-reverse', 'center', 'center-reverse', 'end', 'end-reverse'] as const\nconst BUTTON_TYPES = ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'] as const\nconst NATIVE_TYPES = ['submit', 'reset', 'button'] as const\n\nexport default defineComponent({\n\tname: 'NcButton',\n\n\tinject: {\n\t\tgetNcPopoverTriggerAttrs: {\n\t\t\tfrom: 'NcPopover:trigger:attrs',\n\t\t\tdefault: () => () => ({}),\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Set the text and icon alignment\n\t\t *\n\t\t * @default 'center'\n\t\t * @type {'start' | 'start-reverse' | 'center' | 'center-reverse' | 'end' | 'end-reverse'}\n\t\t */\n\t\talignment: {\n\t\t\ttype: String as PropType<typeof BUTTON_ALIGNMENT[number]>,\n\t\t\tdefault: 'center',\n\t\t\tvalidator(alignment) {\n\t\t\t\treturn typeof alignment === 'string' && (BUTTON_ALIGNMENT as readonly string[]).includes(alignment)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Toggles the disabled state of the button on and off.\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Specifies the button type\n\t\t * If left empty, the default button style will be applied.\n\t\t *\n\t\t * @default 'secondary'\n\t\t * @type {'primary' | 'secondary' | 'tertiary' | 'tertiary-no-background' | 'tertiary-on-primary' | 'error' | 'warning' | 'success'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String as PropType<typeof BUTTON_TYPES[number]>,\n\t\t\tvalidator(value) {\n\t\t\t\treturn typeof value === 'string' && (BUTTON_TYPES as readonly string[]).indexOf(value) !== -1\n\t\t\t},\n\t\t\tdefault: 'secondary',\n\t\t},\n\n\t\t/**\n\t\t * Specifies the button native type\n\t\t * If left empty, the default \"button\" type will be used.\n\t\t *\n\t\t * @type {'submit' | 'reset' | 'button'}\n\t\t */\n\t\tnativeType: {\n\t\t\ttype: String as PropType<typeof NATIVE_TYPES[number]>,\n\t\t\tvalidator(value) {\n\t\t\t\treturn typeof value === 'string' && (NATIVE_TYPES as readonly string[]).includes(value)\n\t\t\t},\n\t\t\tdefault: 'button',\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the button should span all the available width.\n\t\t * By default, buttons span the whole width of the container.\n\t\t */\n\t\twide: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Always try to provide an aria-label to your button. Make it more\n\t\t * specific than the button's name by provide some more context. E.g. if\n\t\t * the name of the button is \"send\" in the Mail app, the aria label could\n\t\t * be \"Send email\".\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Providing the href attribute turns the button component into an `a`\n\t\t * element.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Providing the download attribute with href downloads file when clicking.\n\t\t */\n\t\tdownload: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Providing the to attribute turns the button component into a `router-link`\n\t\t * element. Takes precedence over the href attribute.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The pressed state of the button if it has a checked state\n\t\t * This will add the `aria-pressed` attribute and for the button to have the primary style in checked state.\n\t\t *\n\t\t * Pressed state is not supported for links\n\t\t */\n\t\tpressed: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: ['update:pressed', 'click'],\n\n\tcomputed: {\n\t\t/**\n\t\t * The real type to be used for the button, enforces `primary` for pressed state and, if stateful button, any other type for not pressed state\n\t\t * Otherwise the type property is used.\n\t\t */\n\t\trealType() {\n\t\t\t// Force *primary* when pressed\n\t\t\tif (this.pressed) {\n\t\t\t\treturn 'primary'\n\t\t\t}\n\t\t\t// If not pressed but button is configured as stateful button then the type must not be primary\n\t\t\tif (this.pressed === false && this.type === 'primary') {\n\t\t\t\treturn 'secondary'\n\t\t\t}\n\t\t\treturn this.type\n\t\t},\n\n\t\t/**\n\t\t * The flexbox alignment of the button content\n\t\t */\n\t\tflexAlignment() {\n\t\t\treturn this.alignment.split('-')[0]\n\t\t},\n\n\t\t/**\n\t\t * If the button content should be reversed (icon on the end)\n\t\t */\n\t\tisReverseAligned() {\n\t\t\treturn this.alignment.includes('-')\n\t\t},\n\n\t\tncPopoverTriggerAttrs() {\n\t\t\treturn this.getNcPopoverTriggerAttrs()\n\t\t},\n\t},\n\n\t/**\n\t * The render function to display the component\n\t *\n\t * @return {object|undefined} The created VNode\n\t */\n\trender() {\n\t\tconst hasText = isSlotPopulated(this.$slots.default?.())\n\t\tconst hasIcon = isSlotPopulated(this.$slots.icon?.())\n\n\t\t/**\n\t\t * Always fill either the text prop or the ariaLabel one.\n\t\t */\n\t\tif (!hasText && !this.ariaLabel) {\n\t\t\tconsole.warn('You need to fill either the text or the ariaLabel props in the button component.', {\n\t\t\t\ttext: this.$slots.default?.()?.[0]?.children,\n\t\t\t\tariaLabel: this.ariaLabel,\n\t\t\t},\n\t\t\tthis)\n\t\t}\n\n\t\tconst isLink = (this.to || this.href)\n\n\t\tconst hasPressed = !isLink && typeof this.pressed === 'boolean'\n\n\t\tconst renderButton = ({ href, navigate, isActive }: {href?: string, navigate?: (ev: Event) => void, isActive?: boolean } = {}) => h(isLink ? 'a' : 'button',\n\t\t\t{\n\t\t\t\tclass: [\n\t\t\t\t\t'button-vue',\n\t\t\t\t\t{\n\t\t\t\t\t\t'button-vue--icon-only': hasIcon && !hasText,\n\t\t\t\t\t\t'button-vue--text-only': hasText && !hasIcon,\n\t\t\t\t\t\t'button-vue--icon-and-text': hasIcon && hasText,\n\t\t\t\t\t\t[`button-vue--vue-${this.realType}`]: this.realType,\n\t\t\t\t\t\t'button-vue--wide': this.wide,\n\t\t\t\t\t\t[`button-vue--${this.flexAlignment}`]: this.flexAlignment !== 'center',\n\t\t\t\t\t\t'button-vue--reverse': this.isReverseAligned,\n\t\t\t\t\t\tactive: isActive,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\t'aria-label': this.ariaLabel,\n\t\t\t\t'aria-pressed': hasPressed ? this.pressed.toString() : undefined,\n\t\t\t\tdisabled: this.disabled,\n\t\t\t\ttype: isLink ? null : this.nativeType,\n\t\t\t\trole: isLink ? 'button' : null,\n\t\t\t\thref: this.to ? href : (this.href || null),\n\t\t\t\ttarget: isLink ? '_self' : null,\n\t\t\t\trel: isLink ? 'nofollow noreferrer noopener' : null,\n\t\t\t\tdownload: (!this.to && this.href && this.download) ? this.download : null,\n\t\t\t\t// If this button is used as a popover trigger, we need to apply trigger attrs, e.g. aria attributes\n\t\t\t\t...this.ncPopoverTriggerAttrs,\n\t\t\t\tonClick: ($event) => {\n\t\t\t\t\t// Update pressed prop on click if it is set\n\t\t\t\t\tif (hasPressed) {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Update the current pressed state of the button (if the `pressed` property was configured)\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * @property {boolean} newValue The new `pressed`-state\n\t\t\t\t\t\t */\n\t\t\t\t\t\tthis.$emit('update:pressed', !this.pressed)\n\t\t\t\t\t}\n\t\t\t\t\t// We have to both navigate and emit the click event\n\t\t\t\t\tthis.$emit('click', $event)\n\t\t\t\t\tnavigate?.($event)\n\t\t\t\t},\n\t\t\t},\n\t\t\t[\n\t\t\t\th('span', { class: 'button-vue__wrapper' }, [\n\t\t\t\t\thasIcon\n\t\t\t\t\t\t? h('span', {\n\t\t\t\t\t\t\tclass: 'button-vue__icon',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t'aria-hidden': 'true',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t[this.$slots.icon?.()],\n\t\t\t\t\t\t)\n\t\t\t\t\t\t: null,\n\t\t\t\t\thasText ? h('span', { class: 'button-vue__text' }, [this.$slots.default?.()]) : null,\n\t\t\t\t]),\n\t\t\t],\n\t\t)\n\n\t\t// If we have a router-link, we wrap the button in it\n\t\tif (this.to) {\n\t\t\treturn h(resolveComponent('router-link'), {\n\t\t\t\tcustom: true,\n\t\t\t\tto: this.to,\n\t\t\t}, {\n\t\t\t\tdefault: renderButton,\n\t\t\t})\n\t\t}\n\t\t// Otherwise we simply return the button\n\t\treturn renderButton()\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n\n.button-vue {\n\tposition: relative;\n\twidth: fit-content;\n\toverflow: hidden;\n\tborder: 0;\n\tpadding: 0;\n\tfont-size: var(--default-font-size);\n\tfont-weight: bold;\n\tmin-height: $clickable-area;\n\tmin-width: $clickable-area;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\t// Cursor pointer on element and all children\n\tcursor: pointer;\n\t& *,\n\tspan {\n\t\tcursor: pointer;\n\t}\n\tborder-radius: math.div($clickable-area, 2);\n\ttransition-property: color, border-color, background-color;\n\ttransition-duration: 0.1s;\n\ttransition-timing-function: linear;\n\n\t// No outline feedback for focus. Handled with a toggled class in js (see data)\n\t&:focus {\n\t\toutline: none;\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\t\t& * {\n\t\t\tcursor: default;\n\t\t}\n\t\topacity: $opacity_disabled;\n\t\t// Gives a wash out effect\n\t\tfilter: saturate($opacity_normal);\n\t}\n\n\t// Default button type\n\tcolor: var(--color-primary-element-light-text);\n\tbackground-color: var(--color-primary-element-light);\n\t&:hover:not(:disabled) {\n\t\tbackground-color: var(--color-primary-element-light-hover);\n\t}\n\n\t// Back to the default color for this button when active\n\t// TODO: add ripple effect\n\t&:active {\n\t\tbackground-color: var(--color-primary-element-light);\n\t}\n\n\t&__wrapper {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t}\n\n\t&--end &__wrapper {\n\t\tjustify-content: end;\n\t}\n\t&--start &__wrapper {\n\t\tjustify-content: start;\n\t}\n\t&--reverse &__wrapper {\n\t\tflex-direction: row-reverse;\n\t}\n\n\t&--reverse#{&}--icon-and-text {\n\t\tpadding-inline: calc(var(--default-grid-baseline) * 4) var(--default-grid-baseline);\n\t}\n\n\t&__icon {\n\t\theight: $clickable-area;\n\t\twidth: $clickable-area;\n\t\tmin-height: $clickable-area;\n\t\tmin-width: $clickable-area;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t&__text {\n\t\tfont-weight: bold;\n\t\tmargin-bottom: 1px;\n\t\tpadding: 2px 0;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t}\n\n\t// Icon-only button\n\t&--icon-only {\n\t\twidth: $clickable-area !important;\n\t}\n\n\t// Text-only button\n\t&--text-only {\n\t\tpadding: 0 12px;\n\t\t& .button-vue__text {\n\t\t\tmargin-left: 4px;\n\t\t\tmargin-right: 4px;\n\t\t}\n\t}\n\n\t// Icon and text button\n\t&--icon-and-text {\n\t\tpadding-block: 0;\n\t\tpadding-inline: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 4);\n\t}\n\n\t// Wide button spans the whole width of the container\n\t&--wide {\n\t\twidth: 100%;\n\t}\n\n\t&:focus-visible {\n\t\toutline: 2px solid var(--color-main-text) !important;\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background) !important;\n\t\t&.button-vue--vue-tertiary-on-primary {\n\t\t\toutline: 2px solid var(--color-primary-element-text);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Button types\n\n\t// Primary\n\t&--vue-primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tcolor: var(--color-primary-element-text);\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\t}\n\n\t// Secondary\n\t&--vue-secondary {\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground-color: var(--color-primary-element-light);\n\t\t&:hover:not(:disabled) {\n\t\t\tcolor: var(--color-primary-element-light-text);\n\t\t\tbackground-color: var(--color-primary-element-light-hover);\n\t\t}\n\t}\n\n\t// Tertiary\n\t&--vue-tertiary {\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: transparent;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t}\n\n\t// Tertiary, no background\n\t&--vue-tertiary-no-background {\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: transparent;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Tertiary on primary color (like the header)\n\t&--vue-tertiary-on-primary {\n\t\tcolor: var(--color-primary-element-text);\n\t\tbackground-color: transparent;\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Success\n\t&--vue-success {\n\t\tbackground-color: var(--color-success);\n\t\tcolor: white;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-success-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// : add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-success);\n\t\t}\n\t}\n\n\t// Warning\n\t&--vue-warning {\n\t\tbackground-color: var(--color-warning);\n\t\tcolor: white;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-warning-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-warning);\n\t\t}\n\t}\n\n\t// Error\n\t&--vue-error {\n\t\tbackground-color: var(--color-error);\n\t\tcolor: white;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-error-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-error);\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["isSlotPopulated","vnodes","node","vnode","Comment","Fragment","Text","BUTTON_ALIGNMENT","BUTTON_TYPES","NATIVE_TYPES","_sfc_main","defineComponent","alignment","value","hasText","_b","_a","hasIcon","_d","_c","_h","_g","_f","_e","isLink","hasPressed","renderButton","href","navigate","isActive","h","$event","_b2","_a2","_d2","_c2","resolveComponent"],"mappings":"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"}

package/dist/chunks/{NcCheckboxRadioSwitch-Hi5ocuhB.cjs → NcCheckboxRadioSwitch-IA6Ssm8K.cjs}

@@ -1,7 +1,7 @@
 "use strict";
-const e = require("vue"), o = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), k = require("./NcLoadingIcon-Fwid-wWE.cjs");
-require("./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_c3135eb8_lang-RYt-H2PA.cjs");
-const f = require("./GenRandomId-ULxaMkkr.cjs"), m = require("./_l10n-wK0o0jNS.cjs"), _ = {
+const e = require("vue"), o = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), f = require("./NcLoadingIcon-Fwid-wWE.cjs");
+require("./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_48c28b96_lang-togIrFzp.cjs");
+const k = require("./GenRandomId-ULxaMkkr.cjs"), m = require("./_l10n-Fl7RzbcZ.cjs"), _ = {
   name: "CheckboxBlankOutlineIcon",
   emits: ["click"],
   props: {
@@ -20,7 +20,7 @@ const f = require("./GenRandomId-ULxaMkkr.cjs"), m = require("./_l10n-wK0o0jNS.c
 }, g = ["aria-hidden", "aria-label"], b = ["fill", "width", "height"], y = { d: "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" }, B = { key: 0 };
 function C(i, l, t, c, r, n) {
   return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
-    "aria-hidden": !t.title,
+    "aria-hidden": t.title ? null : !0,
     "aria-label": t.title,
     class: "material-design-icon checkbox-blank-outline-icon",
     role: "img",
@@ -55,10 +55,10 @@ const p = /* @__PURE__ */ o._export_sfc(_, [["render", C]]), x = {
       default: 24
     }
   }
-}, w = ["aria-hidden", "aria-label"], V = ["fill", "width", "height"], v = { d: "M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" }, S = { key: 0 };
+}, w = ["aria-hidden", "aria-label"], v = ["fill", "width", "height"], V = { d: "M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" }, S = { key: 0 };
 function A(i, l, t, c, r, n) {
   return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
-    "aria-hidden": !t.title,
+    "aria-hidden": t.title ? null : !0,
     "aria-label": t.title,
     class: "material-design-icon minus-box-icon",
     role: "img",
@@ -71,10 +71,10 @@ function A(i, l, t, c, r, n) {
       height: t.size,
       viewBox: "0 0 24 24"
     }, [
-      e.createElementVNode("path", v, [
+      e.createElementVNode("path", V, [
         t.title ? (e.openBlock(), e.createElementBlock("title", S, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
       ])
-    ], 8, V))
+    ], 8, v))
   ], 16, w);
 }
 const E = /* @__PURE__ */ o._export_sfc(x, [["render", A]]), N = {
@@ -96,7 +96,7 @@ const E = /* @__PURE__ */ o._export_sfc(x, [["render", A]]), N = {
 }, z = ["aria-hidden", "aria-label"], T = ["fill", "width", "height"], I = { d: "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" }, M = { key: 0 };
 function H(i, l, t, c, r, n) {
   return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
-    "aria-hidden": !t.title,
+    "aria-hidden": t.title ? null : !0,
     "aria-label": t.title,
     class: "material-design-icon checkbox-marked-icon",
     role: "img",
@@ -134,7 +134,7 @@ const L = /* @__PURE__ */ o._export_sfc(N, [["render", H]]), P = {
 }, R = ["aria-hidden", "aria-label"], q = ["fill", "width", "height"], D = { d: "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z" }, O = { key: 0 };
 function Z(i, l, t, c, r, n) {
   return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
-    "aria-hidden": !t.title,
+    "aria-hidden": t.title ? null : !0,
     "aria-label": t.title,
     class: "material-design-icon radiobox-marked-icon",
     role: "img",
@@ -172,7 +172,7 @@ const G = /* @__PURE__ */ o._export_sfc(P, [["render", Z]]), W = {
 }, Y = ["aria-hidden", "aria-label"], j = ["fill", "width", "height"], K = { d: "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" }, U = { key: 0 };
 function X(i, l, t, c, r, n) {
   return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
-    "aria-hidden": !t.title,
+    "aria-hidden": t.title ? null : !0,
     "aria-label": t.title,
     class: "material-design-icon radiobox-blank-icon",
     role: "img",
@@ -210,7 +210,7 @@ const F = /* @__PURE__ */ o._export_sfc(W, [["render", X]]), J = {
 }, Q = ["aria-hidden", "aria-label"], $ = ["fill", "width", "height"], ee = { d: "M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z" }, te = { key: 0 };
 function ie(i, l, t, c, r, n) {
   return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
-    "aria-hidden": !t.title,
+    "aria-hidden": t.title ? null : !0,
     "aria-label": t.title,
     class: "material-design-icon toggle-switch-off-icon",
     role: "img",
@@ -248,7 +248,7 @@ const ne = /* @__PURE__ */ o._export_sfc(J, [["render", ie]]), le = {
 }, ae = ["aria-hidden", "aria-label"], oe = ["fill", "width", "height"], ce = { d: "M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z" }, re = { key: 0 };
 function se(i, l, t, c, r, n) {
   return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
-    "aria-hidden": !t.title,
+    "aria-hidden": t.title ? null : !0,
     "aria-label": t.title,
     class: "material-design-icon toggle-switch-icon",
     role: "img",
@@ -270,7 +270,7 @@ function se(i, l, t, c, r, n) {
 const de = /* @__PURE__ */ o._export_sfc(le, [["render", se]]), d = "checkbox", u = "radio", s = "switch", h = "button", ue = {
   name: "NcCheckboxContent",
   components: {
-    NcLoadingIcon: k.NcLoadingIcon
+    NcLoadingIcon: f.NcLoadingIcon
   },
   props: {
     /**
@@ -365,7 +365,7 @@ const de = /* @__PURE__ */ o._export_sfc(le, [["render", se]]), d = "checkbox",
 function me(i, l, t, c, r, n) {
   const a = e.resolveComponent("NcLoadingIcon");
   return e.openBlock(), e.createElementBlock("span", {
-    id: n.isButtonType ? void 0 : `${t.id}-label`,
+    id: n.isButtonType ? void 0 : "".concat(t.id, "-label"),
     class: e.normalizeClass(["checkbox-content", {
       ["checkbox-content-" + t.type]: !0,
       "checkbox-content--button-variant": t.buttonVariant,
@@ -399,10 +399,10 @@ function me(i, l, t, c, r, n) {
     ], 2)) : e.createCommentVNode("", !0)
   ], 10, he);
 }
-const ke = /* @__PURE__ */ o._export_sfc(ue, [["render", me], ["__scopeId", "data-v-adf98230"]]), fe = {
+const fe = /* @__PURE__ */ o._export_sfc(ue, [["render", me], ["__scopeId", "data-v-2672ad1a"]]), ke = {
   name: "NcCheckboxRadioSwitch",
   components: {
-    NcCheckboxContent: ke
+    NcCheckboxContent: fe
   },
   props: {
     /**
@@ -410,7 +410,7 @@ const ke = /* @__PURE__ */ o._export_sfc(ue, [["render", me], ["__scopeId", "dat
      */
     id: {
       type: String,
-      default: () => "checkbox-radio-switch-" + f.GenRandomId(),
+      default: () => "checkbox-radio-switch-" + k.GenRandomId(),
       validator: (i) => i.trim() !== ""
     },
     /**
@@ -613,11 +613,11 @@ const ke = /* @__PURE__ */ o._export_sfc(ue, [["render", me], ["__scopeId", "dat
         return;
       }
       if (typeof this.modelValue == "boolean") {
-        this.$emit("update:modelValue", !this.isChecked);
+        this.$emit("update:modelValue", !this.modelValue);
         return;
       }
       const i = this.getInputsSet().filter((l) => l.checked).map((l) => l.value);
-      this.$emit("update:modelValue", i);
+      i.includes(this.value) ? this.$emit("update:modelValue", i.filter((l) => l !== this.value)) : this.$emit("update:modelValue", [...i, this.value]);
     },
     /**
      * Get the input set based on this name
@@ -651,7 +651,7 @@ function ge(i, l, t, c, r, n) {
       n.isButtonType ? e.createCommentVNode("", !0) : (e.openBlock(), e.createElementBlock("input", e.mergeProps({
         key: 0,
         id: t.id,
-        "aria-labelledby": !n.isButtonType && !t.ariaLabel ? `${t.id}-label` : null,
+        "aria-labelledby": !n.isButtonType && !t.ariaLabel ? "".concat(t.id, "-label") : null,
         "aria-label": t.ariaLabel || void 0,
         class: "checkbox-radio-switch__input",
         disabled: t.disabled,
@@ -692,5 +692,5 @@ function ge(i, l, t, c, r, n) {
     _: 3
   }, 16, ["id", "aria-label", "class", "style", "type"]);
 }
-const be = /* @__PURE__ */ o._export_sfc(fe, [["render", ge], ["__scopeId", "data-v-c3135eb8"]]);
+const be = /* @__PURE__ */ o._export_sfc(ke, [["render", ge], ["__scopeId", "data-v-48c28b96"]]);
 exports.NcCheckboxRadioSwitch = be;