@nextcloud/vue

Version:

Nextcloud vue components

github.com/nextcloud-libraries/nextcloud-vue

1 lines • 28.8 kB

Source Map (JSON)

{"version":3,"file":"NcButton-Dc8V4Urj.mjs","sources":["../../src/components/NcButton/NcButton.vue"],"sourcesContent":["\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\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=\"size\" value=\"small\" name=\"size\" type=\"radio\">Small</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"size\" value=\"normal\" name=\"size\" type=\"radio\">Normal (default)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"size\" value=\"large\" name=\"size\" type=\"radio\">Large</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\n\t\t\t:size\n\t\t\t:text\n\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<IconVideoOutline\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled\n\t\t\t:size\n\t\t\t:text\n\t\t\tvariant=\"tertiary\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<IconVideoOutline\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled\n\t\t\t:size\n\t\t\t:text>\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<IconVideoOutline\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled\n\t\t\t:size\n\t\t\t:text\n\t\t\tvariant=\"primary\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<IconVideo\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n\n\t\n\t<h5>Wide button</h5>\n\t<NcButton\n\t\t:disabled=\"disabled\"\n\t\t:size=\"size\"\n\t\t:text=\"text\"\n\t\t:wide=\"true\"\n\t\ttext=\"Example text\">\n\t\t<template #icon>\n\t\t\t<IconVideoOutline\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t</NcButton>\n\n\t\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\n\t\t\t:size\n\t\t\ttext=\"Example text\"\n\t\t\tvariant=\"success\">\n\t\t\t<template #icon>\n\t\t\t\t<IconVideoOutline\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled\n\t\t\t:size\n\t\t\ttext=\"Example text\"\n\t\t\tvariant=\"warning\">\n\t\t\t<template #icon>\n\t\t\t\t<IconVideoOutline\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled\n\t\t\t:size\n\t\t\ttext=\"Example text\"\n\t\t\tvariant=\"error\">\n\t\t\t<template #icon>\n\t\t\t\t<IconVideoOutline\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<p> - </p>\n\t</div>\n</div>\n\n</template>\n<script>\nimport IconVideo from 'vue-material-design-icons/Video.vue'\nimport IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconVideo,\n\t\tIconVideoOutline,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\ttoggled: false,\n\t\t\tdisabled: false,\n\t\t\tsize: 'normal',\n\t\t\tstyle: 'icontext',\n\t\t}\n\t},\n\tcomputed: {\n\t\ttext() {\n\t\t\tif (this.style.includes('text')) {\n\t\t\t\treturn 'Example text'\n\t\t\t}\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\tgap: 12px;\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 text=\"center (default)\" variant=\"secondary\" wide>\n\t\t\t<template #icon>\n\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton alignment=\"center-reverse\" text=\"center-reverse\" variant=\"secondary\" wide>\n\t\t\t<template #icon>\n\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t</template>\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\" text=\"start\" variant=\"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</NcButton>\n\t\t\t\t<NcButton alignment=\"start-reverse\" text=\"start-reverse\" variant=\"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</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\" text=\"end\" variant=\"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</NcButton>\n\t\t\t\t<NcButton alignment=\"end-reverse\" text=\"end-reverse\" variant=\"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</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 variant 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\" variant=\"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\" text=\"Favorite\" variant=\"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</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: Custom content\nSometimes custom content, meaning more than text and icon, is required.\nFor this the `default`-slot can be used.\n\n**Important**: Never include interactive elements inside the button,\nthis results in invalid HTML and is not accessible!\n\n```vue\n<template>\n\t<NcButton>\n\t\tSome <del>formatted</del> content\n\t</NcButton>\n</template>\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\tvariant=\"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\tvariant=\"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: end;\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</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport { computed, inject } from 'vue'\nimport { routerKey } from 'vue-router'\nimport { isLegacy } from '../../utils/legacy.ts'\nimport { useNcFormBox } from '../NcFormBox/useNcFormBox.ts'\n\nexport type ButtonAlignment = 'start'\n\t| 'start-reverse'\n\t| 'center'\n\t| 'center-reverse'\n\t| 'end'\n\t| 'end-reverse'\n\nexport type ButtonSize = 'small'\n\t| 'normal'\n\t| 'large'\n\nexport type ButtonType = 'submit'\n\t| 'reset'\n\t| 'button'\n\nexport type ButtonVariant = 'primary'\n\t| 'secondary'\n\t| 'tertiary'\n\t| 'tertiary-no-background'\n\t| 'tertiary-on-primary'\n\t| 'error'\n\t// Design-wise not recommended for new code\n\t| 'warning'\n\t| 'success'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Set the text and icon alignment\n\t *\n\t * @default 'center'\n\t */\n\talignment?: ButtonAlignment\n\n\t/**\n\t * Always try to provide an aria-label to your button.\n\t *\n\t * Make it more specific than the button's name by provide some more context.\n\t * E.g. if the name of the button is \"send\" in the Mail app,\n\t * the aria label could be \"Send email\".\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * Toggles the disabled state of the button on and off.\n\t *\n\t * @default false\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * When `href` is set this will make the browser try to download the target.\n\t * If a string is passed the browser will use it as the filename.\n\t *\n\t * Note that the browser might adjust it for allowed characters (e.g. '/' or '\\').\n\t * Also this only works with same-origin URLs and `blob:` or `data:` schemas.\n\t * Moreover a `Content-Disposition` header set by the server will override the filename.\n\t */\n\tdownload?: string | true\n\n\t/**\n\t * Providing the href attribute turns the button component into an `a` element.\n\t */\n\thref?: string\n\n\t/**\n\t * The pressed state of the button if it has a checked state.\n\t * This will add the `aria-pressed` attribute and for the button to have the primary style in checked state.\n\t *\n\t * Note: Pressed state is not supported for links.\n\t */\n\tpressed?: boolean | undefined\n\n\t/**\n\t * Specify the button size.\n\t *\n\t * @default 'normal'\n\t */\n\tsize?: ButtonSize\n\n\t/**\n\t * Target for the `a` element if `href` is set.\n\t *\n\t * @default '_self'\n\t */\n\ttarget?: string\n\n\t/**\n\t * The main button text.\n\t * This can be overwritten by using the *default* slot.\n\t *\n\t * @since 9.0.0\n\t */\n\ttext?: string\n\n\t/**\n\t * Providing the to attribute turns the button component into a `router-link` element.\n\t *\n\t * Note: This takes precedence over the href attribute.\n\t */\n\tto?: RouteLocationRaw\n\n\t/**\n\t * Specifies the button native type\n\t * If left empty, the default \"button\" type will be used.\n\t *\n\t * @default 'button'\n\t */\n\ttype?: ButtonType\n\n\t/**\n\t * Specifies the button variant.\n\t * If left empty, the default button style will be applied.\n\t *\n\t * @default 'secondary'\n\t */\n\tvariant?: ButtonVariant\n\n\t/**\n\t * Specifies whether the button should span all the available width.\n\t * By default, buttons span the whole width of the container.\n\t *\n\t * @default false\n\t */\n\twide?: boolean\n}>(), {\n\tariaLabel: undefined,\n\talignment: 'center',\n\tdownload: undefined,\n\thref: undefined,\n\tpressed: undefined,\n\tsize: 'normal',\n\ttarget: '_self',\n\ttext: undefined,\n\tto: undefined,\n\ttype: 'button',\n\tvariant: 'secondary',\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the button was clicked.\n\t */\n\tclick: [e: MouseEvent]\n\n\t/**\n\t * Update the current pressed state of the button (if the `pressed` property was configured).\n\t * If the button is a toggle button (`pressed` state is boolean),\n\t * then this will be emitted if the user toggled the state.\n\t */\n\t'update:pressed': [pressed: boolean]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Custom button content.\n\t * This can be used for custom formatted content, ensure to not include any interactive elements.\n\t * For plain text it is preferred to use the `text` prop instead.\n\t */\n\tdefault?: Slot\n\n\t/**\n\t * Icon (optional) to show within the button\n\t */\n\ticon?: Slot\n}>()\n\nconst { formBoxItemClass } = useNcFormBox()\n\nconst hasVueRouterContext = inject(routerKey, null) !== null\n\nconst tag = computed(() => {\n\t// TODO: should we warn if props.to is provided but there is no vue-router?\n\tif (hasVueRouterContext && props.to) {\n\t\t// Note: RouterLink is used as globally registered component (by name) and not imported intentionally\n\t\t// to use injected component from the app and not bundle it to the button\n\t\treturn 'RouterLink'\n\t} else if (props.href) {\n\t\treturn 'a'\n\t} else {\n\t\treturn 'button'\n\t}\n})\n\nconst hasPressedState = computed(() => tag.value === 'button' && typeof props.pressed === 'boolean')\n\nconst variantWithPressed = computed(() => {\n\t// Pressed toggle button forced to be primary\n\tif (props.pressed) {\n\t\treturn 'primary'\n\t}\n\t// Non-pressed toggle button may use passed variant but it cannot be primary\n\tif (props.pressed === false && props.variant === 'primary') {\n\t\treturn 'secondary'\n\t}\n\n\treturn props.variant\n})\nconst isTertiaryVariant = computed(() => variantWithPressed.value.startsWith('tertiary'))\n\nconst flexAlignment = computed(() => props.alignment.split('-')[0])\nconst isReverseAligned = computed(() => props.alignment.includes('-'))\n\nconst getNcPopoverTriggerAttrs = inject<() => Record<string, string | undefined>>('NcPopover:trigger:attrs', () => ({}), false)\nconst ncPopoverTriggerAttrs = computed(() => getNcPopoverTriggerAttrs())\n\nconst attrs = computed(() => {\n\tif (tag.value === 'RouterLink') {\n\t\treturn {\n\t\t\tto: props.to,\n\t\t\tactiveClass: 'active',\n\t\t}\n\t} else if (tag.value === 'a') {\n\t\treturn {\n\t\t\thref: props.href || '#',\n\t\t\ttarget: props.target,\n\t\t\trel: 'nofollow noreferrer noopener',\n\t\t\tdownload: props.download || undefined,\n\t\t}\n\t} else if (tag.value === 'button') {\n\t\treturn {\n\t\t\t...ncPopoverTriggerAttrs.value,\n\t\t\t'aria-pressed': props.pressed,\n\t\t\ttype: props.type,\n\t\t\tdisabled: props.disabled,\n\t\t}\n\t}\n\n\treturn undefined\n})\n\n/**\n * Handle the click on the link / button\n *\n * @param event - Mouse click event\n */\nfunction onClick(event: MouseEvent) {\n\tif (hasPressedState.value) {\n\t\temit('update:pressed', !props.pressed)\n\t}\n\temit('click', event)\n}\n</script>\n\n<template>\n\t<component\n\t\t:is=\"tag\"\n\t\tclass=\"button-vue\"\n\t\t:class=\"[\n\t\t\t`button-vue--size-${size}`,\n\t\t\t{\n\t\t\t\t[`button-vue--${variantWithPressed}`]: variantWithPressed,\n\t\t\t\t'button-vue--tertiary': isTertiaryVariant,\n\t\t\t\t'button-vue--wide': wide,\n\t\t\t\t[`button-vue--${flexAlignment}`]: flexAlignment !== 'center',\n\t\t\t\t'button-vue--reverse': isReverseAligned,\n\t\t\t\t'button-vue--legacy': isLegacy,\n\t\t\t},\n\t\t\tformBoxItemClass,\n\t\t]\"\n\t\t:aria-label\n\t\tv-bind=\"attrs\"\n\t\t@click=\"onClick\">\n\t\t<span class=\"button-vue__wrapper\">\n\t\t\t<span class=\"button-vue__icon\">\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</span>\n\t\t\t<span class=\"button-vue__text\">\n\t\t\t\t<slot>\n\t\t\t\t\t{{ text }}\n\t\t\t\t</slot>\n\t\t\t</span>\n\t\t</span>\n\t</component>\n</template>\n\n<style lang=\"scss\" scoped>\n.button-vue {\n\t--button-size: var(--default-clickable-area);\n\t--button-inner-size: calc(var(--button-size) - 4px); // without the outer border\n\t--button-radius: var(--border-radius-element);\n\t--button-padding-default: calc(var(--default-grid-baseline) + var(--button-radius));\n\t--button-padding: var(--default-grid-baseline) var(--button-padding-default);\n\n\t// General styles\n\t// by default use secondary styling\n\tcolor: var(--color-primary-element-light-text);\n\tbackground-color: var(--color-primary-element-light);\n\tborder: 1px solid var(--color-primary-element-light-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--button-radius);\n\tbox-sizing: border-box;\n\t// adjust position and size\n\tposition: relative;\n\twidth: fit-content;\n\toverflow: hidden;\n\tpadding-block: 1px 0; // center the content as border is 1px top and 2px bottom\n\tpadding-inline: var(--button-padding);\n\tmin-height: var(--button-size);\n\tmin-width: var(--button-size);\n\t// display setup\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\ttransition-property: color, border-color, background-color;\n\ttransition-duration: 0.1s;\n\ttransition-timing-function: linear;\n\tcursor: pointer;\n\tfont-size: var(--default-font-size);\n\tfont-weight: bold;\n\n\t// Setup different button sizes\n\t&--size-small {\n\t\t--button-size: var(--clickable-area-small);\n\t\t--button-radius: var(--border-radius-small); // make the border radius even smaller for small buttons\n\t}\n\n\t&--size-large {\n\t\t--button-size: var(--clickable-area-large);\n\t}\n\n\t// Cursor pointer on element and all children\n\t* {\n\t\tcursor: pointer;\n\t}\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 styles\n\t&:disabled {\n\t\t// Gives a wash out effect\n\t\tfilter: saturate($opacity_normal);\n\t\topacity: $opacity_disabled;\n\n\t\t// Reset the cursor\n\t\tcursor: default;\n\t\t* {\n\t\t\tcursor: default;\n\t\t}\n\t}\n\n\t// Hover styles when not disabled (for the default theming of 'secondary')\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\n\t&--start &__wrapper {\n\t\tjustify-content: start;\n\t}\n\n\t&--reverse &__wrapper {\n\t\tflex-direction: row-reverse;\n\t}\n\n\t&--reverse {\n\t\t--button-padding: var(--button-padding-default) var(--default-grid-baseline);\n\t}\n\n\t&__icon {\n\t\t--default-clickable-area: var(--button-inner-size); // align icon size with inner button size\n\t\theight: var(--button-inner-size);\n\t\twidth: var(--button-inner-size);\n\t\tmin-height: var(--button-inner-size);\n\t\tmin-width: var(--button-inner-size);\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\n\t\t&:empty {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// For small buttons we need to adjust the icon size\n\t&--size-small &__icon {\n\t\t:deep(> *) {\n\t\t\tmax-height: 16px;\n\t\t\tmax-width: 16px;\n\t\t}\n\t\t:deep(svg) {\n\t\t\theight: 16px;\n\t\t\twidth: 16px;\n\t\t}\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\n\t\t&:empty {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// Icon-only button\n\t&:has(#{&}__text:empty) {\n\t\t--button-padding: var(--button-radius);\n\t\tline-height: 1;\n\t\twidth: var(--button-size) !important;\n\t}\n\n\t// Text-only button\n\t&:has(#{&}__icon:empty) {\n\t\t--button-padding: var(--button-padding-default);\n\n\t\t.button-vue__text {\n\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t}\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-element);\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Button types\n\n\t// Primary\n\t&--primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tborder-color: var(--color-primary-element-hover);\n\t\tcolor: var(--color-primary-element-text);\n\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&--secondary {\n\t\tbackground-color: var(--color-primary-element-light);\n\t\tborder-color: var(--color-primary-element-light-hover);\n\t\tcolor: var(--color-primary-element-light-text);\n\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&--tertiary {\n\t\tbackground-color: transparent;\n\t\tborder-color: transparent;\n\t\tcolor: var(--color-main-text);\n\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&--tertiary-no-background {\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&--tertiary-on-primary {\n\t\tcolor: var(--color-primary-element-text);\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Success\n\t&--success {\n\t\tborder-color: var(--color-success-hover);\n\t\tbackground-color: var(--color-success);\n\t\tcolor: var(--color-success-text);\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&--warning {\n\t\tborder-color: var(--color-warning-hover);\n\t\tbackground-color: var(--color-warning);\n\t\tcolor: var(--color-warning-text);\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&--error {\n\t\tborder-color: var(--color-error-hover);\n\t\tbackground-color: var(--color-error);\n\t\tcolor: var(--color-error-text);\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\t// before Nextcloud 32\n\t&--legacy {\n\t\t--button-inner-size: var(--button-size);\n\t\t// no border\n\t\tborder: none;\n\t\tpadding-block: 0;\n\t}\n\t&--legacy#{&}--error,\n\t&--legacy#{&}--success,\n\t&--legacy#{&}--warning {\n\t\tcolor: white;\n\t}\n}\n\n</style>\n"],"names":["_createBlock","_resolveDynamicComponent","_mergeProps","size","wide","_unref","ariaLabel","_createElementVNode","_renderSlot","text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAsdA,UAAM,QAAQ;AAiHd,UAAM,OAAO;AA4Bb,UAAM,EAAE,iBAAA,IAAqB,aAAA;AAE7B,UAAM,sBAAsB,OAAO,WAAW,IAAI,MAAM;AAExD,UAAM,MAAM,SAAS,MAAM;AAE1B,UAAI,uBAAuB,MAAM,IAAI;AAGpC,eAAO;AAAA,MACR,WAAW,MAAM,MAAM;AACtB,eAAO;AAAA,MACR,OAAO;AACN,eAAO;AAAA,MACR;AAAA,IACD,CAAC;AAED,UAAM,kBAAkB,SAAS,MAAM,IAAI,UAAU,YAAY,OAAO,MAAM,YAAY,SAAS;AAEnG,UAAM,qBAAqB,SAAS,MAAM;AAEzC,UAAI,MAAM,SAAS;AAClB,eAAO;AAAA,MACR;AAEA,UAAI,MAAM,YAAY,SAAS,MAAM,YAAY,WAAW;AAC3D,eAAO;AAAA,MACR;AAEA,aAAO,MAAM;AAAA,IACd,CAAC;AACD,UAAM,oBAAoB,SAAS,MAAM,mBAAmB,MAAM,WAAW,UAAU,CAAC;AAExF,UAAM,gBAAgB,SAAS,MAAM,MAAM,UAAU,MAAM,GAAG,EAAE,CAAC,CAAC;AAClE,UAAM,mBAAmB,SAAS,MAAM,MAAM,UAAU,SAAS,GAAG,CAAC;AAErE,UAAM,2BAA2B,OAAiD,2BAA2B,OAAO,CAAA,IAAK,KAAK;AAC9H,UAAM,wBAAwB,SAAS,MAAM,0BAA0B;AAEvE,UAAM,QAAQ,SAAS,MAAM;AAC5B,UAAI,IAAI,UAAU,cAAc;AAC/B,eAAO;AAAA,UACN,IAAI,MAAM;AAAA,UACV,aAAa;AAAA,QAAA;AAAA,MAEf,WAAW,IAAI,UAAU,KAAK;AAC7B,eAAO;AAAA,UACN,MAAM,MAAM,QAAQ;AAAA,UACpB,QAAQ,MAAM;AAAA,UACd,KAAK;AAAA,UACL,UAAU,MAAM,YAAY;AAAA,QAAA;AAAA,MAE9B,WAAW,IAAI,UAAU,UAAU;AAClC,eAAO;AAAA,UACN,GAAG,sBAAsB;AAAA,UACzB,gBAAgB,MAAM;AAAA,UACtB,MAAM,MAAM;AAAA,UACZ,UAAU,MAAM;AAAA,QAAA;AAAA,MAElB;AAEA,aAAO;AAAA,IACR,CAAC;AAOD,aAAS,QAAQ,OAAmB;AACnC,UAAI,gBAAgB,OAAO;AAC1B,aAAK,kBAAkB,CAAC,MAAM,OAAO;AAAA,MACtC;AACA,WAAK,SAAS,KAAK;AAAA,IACpB;;0BAICA,YA4BYC,wBA3BN,IAAA,KAAG,GADTC,WA4BY;AAAA,QA1BX,QAAM,cAAY;AAAA,8BACeC,KAAAA,IAAI;AAAA;YAA6B,CAAA,eAAA,mBAAA,KAAkB,KAAK,mBAAA;AAAA,oCAAgD,kBAAA;AAAA,gCAA2CC,KAAAA;AAAAA,YAA0B,CAAA,eAAA,cAAA,KAAa,KAAK,cAAA,UAAa;AAAA,mCAA0C,iBAAA;AAAA,kCAA4CC,MAAA,QAAA;AAAA,UAAA;AAAA,UAAmBA,MAAA,gBAAA;AAAA,QAAA;QAYrV,cAAAC,KAAAA;AAAAA,MAAAA,GACO,MAAA,OAAK,EACZ,QAAA,CAAc,GAAA;AAAA,yBACf,MASO;AAAA,UATPC,mBASO,QATP,YASO;AAAA,YARNA,mBAEO,QAFP,YAEO;AAAA,cADNC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,YAAA;YAErBD,mBAIO,QAJP,YAIO;AAAA,cAHNC,WAEO,4BAFP,MAEO;AAAA,gDADHC,KAAAA,IAAI,GAAA,CAAA;AAAA,cAAA;;;;;;;;;;"}