UNPKG

@nextcloud/vue

Version:
1 lines 13.7 kB
{"version":3,"file":"NcBreadcrumb-Bwkn3eve.mjs","sources":["../../node_modules/vue-material-design-icons/ChevronRight.vue","../../src/components/NcBreadcrumb/NcBreadcrumb.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon chevron-right-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"ChevronRightIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<!--\n - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component is meant to be used inside a Breadcrumbs component.\nRenders a button element when given no redirection props, otherwise, renders <a/> or <router-link/> elements\n\n</docs>\n\n<template>\n\t<li\n\t\tref=\"crumb\"\n\t\tclass=\"vue-crumb\"\n\t\t:class=\"[{ 'vue-crumb--hovered': hovering }, $props.class]\"\n\t\t:data-crumb-id=\"crumbId\"\n\t\tdraggable=\"false\"\n\t\t@dragstart.prevent=\"() => { /** Prevent the breadcrumb from being draggable. */ }\"\n\t\t@drop.prevent=\"dropped\"\n\t\t@dragover.prevent=\"() => {}\"\n\t\t@dragenter=\"dragEnter\"\n\t\t@dragleave=\"dragLeave\">\n\t\t<NcButton\n\t\t\tv-if=\"(name || icon || $slots.icon) && !$slots.default\"\n\t\t\t:aria-label=\"icon ? name : undefined\"\n\t\t\tvariant=\"tertiary\"\n\t\t\tv-bind=\"linkAttributes\">\n\t\t\t<template v-if=\"$slots.icon || icon\" #icon>\n\t\t\t\t<!-- @slot Slot for passing a material design icon. Precedes the icon and name prop. -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<span :class=\"icon\" class=\"icon\" />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t\t<template v-if=\"!($slots.icon || icon) || forceIconText\" #default>\n\t\t\t\t{{ name }}\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcActions\n\t\t\tv-if=\"$slots.default\"\n\t\t\tref=\"actions\"\n\t\t\t:container=\"actionsContainer\"\n\t\t\t:force-menu=\"forceMenu\"\n\t\t\tforce-name\n\t\t\t:menu-name=\"name\"\n\t\t\t:open=\"open\"\n\t\t\t:title\n\t\t\tvariant=\"tertiary\"\n\t\t\t@update:open=\"onOpenChange\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Slot for the custom menu icon -->\n\t\t\t\t<slot name=\"menu-icon\" />\n\t\t\t</template>\n\t\t\t<!-- @slot All action elements passed into the default slot will be used -->\n\t\t\t<slot />\n\t\t</NcActions>\n\t\t<ChevronRight class=\"vue-crumb__separator\" :size=\"20\" />\n\t</li>\n</template>\n\n<script>\nimport ChevronRight from 'vue-material-design-icons/ChevronRight.vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcActions from '../NcActions/index.js'\n\nexport default {\n\tname: 'NcBreadcrumb',\n\tcomponents: {\n\t\tNcActions,\n\t\tChevronRight,\n\t\tNcButton,\n\t},\n\n\tinheritAttrs: false,\n\tprops: {\n\t\t/**\n\t\t * The main text content of the entry.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The title attribute of the element.\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Route Location the link should navigate to when clicked on.\n\t\t *\n\t\t * @see https://v3.router.vuejs.org/api/#to\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set this prop if your app doesn't use vue-router, breadcrumbs will show as normal links.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set a css icon-class to show an icon along name text (if forceIconText is provided, otherwise just icon).\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Enables text to accompany the icon, if the icon was provided. The text that will be displayed is the name prop.\n\t\t */\n\t\tforceIconText: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Disable dropping on this breadcrumb.\n\t\t */\n\t\tdisableDrop: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Open state of the Actions menu\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * CSS class to apply to the root element.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'dragenter',\n\t\t'dragleave',\n\t\t'dropped',\n\t\t'update:open',\n\t],\n\n\tsetup() {\n\t\tconst crumbId = createElementId()\n\t\treturn {\n\t\t\tactionsContainer: `.vue-crumb[data-crumb-id=\"${crumbId}\"]`,\n\t\t\tcrumbId,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * Variable to track if we hover over the breadcrumb\n\t\t\t */\n\t\t\thovering: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The attributes to pass to `router-link` or `a`\n\t\t */\n\t\tlinkAttributes() {\n\t\t\t// If it's a router-link, we pass `to` and `exact`\n\t\t\tif (this.to) {\n\t\t\t\treturn { to: this.to, ...this.$attrs }\n\t\t\t} else if (this.href) {\n\t\t\t\t// if its an <a/> element, we pass `href`\n\t\t\t\treturn { href: this.href, ...this.$attrs }\n\t\t\t}\n\t\t\t// otherwise we have a button\n\t\t\treturn this.$attrs\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Function to handle changing the open state of the Actions menu\n\t\t * $emit the open state.\n\t\t *\n\t\t * @param {boolean} open The open state of the Actions menu\n\t\t */\n\t\tonOpenChange(open) {\n\t\t\t/**\n\t\t\t * Event emitted when the open state of the Actions menu changes\n\t\t\t *\n\t\t\t * @type {null}\n\t\t\t */\n\t\t\tthis.$emit('update:open', open)\n\t\t},\n\n\t\t/**\n\t\t * Function to handle a drop on the breadcrumb.\n\t\t * $emit the event and the path, remove the hovering state.\n\t\t *\n\t\t * @param {object} e The drop event\n\t\t * @return {boolean}\n\t\t */\n\t\tdropped(e) {\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\t/**\n\t\t\t * Event emitted when something is dropped on the breadcrumb.\n\t\t\t *\n\t\t\t * @param {Event} event The DOM drop event\n\t\t\t * @param {(string|object)} to The `to` prop or, if not set, the `href` prop\n\t\t\t */\n\t\t\tthis.$emit('dropped', e, this.to || this.href)\n\t\t\tthis.$parent.$emit('dropped', e, this.to || this.href)\n\t\t\tthis.hovering = false\n\t\t\treturn false\n\t\t},\n\n\t\t/**\n\t\t * Add the hovering state on drag enter\n\t\t *\n\t\t * @param {DragEvent} e The drag-enter event\n\t\t */\n\t\tdragEnter(e) {\n\t\t\tthis.$emit('dragenter', e)\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hovering = true\n\t\t},\n\n\t\t/**\n\t\t * Remove the hovering state on drag leave\n\t\t *\n\t\t * @param {DragEvent} e The drag leave event\n\t\t */\n\t\tdragLeave(e) {\n\t\t\tthis.$emit('dragleave', e)\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Don't do anything if we\n\t\t\t// - leave towards a child element.\n\t\t\t// - or are still within the crumb\n\t\t\tif (e.target.contains(e.relatedTarget)\n\t\t\t\t|| this.$refs.crumb.contains(e.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hovering = false\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.vue-crumb {\n\tbackground-image: none;\n\tdisplay: inline-flex;\n\theight: var(--default-clickable-area);\n\tpadding: 0;\n\n\t&:last-child {\n\t\tmin-width: 0;\n\n\t\t// Don't show breadcrumb separator for last crumb\n\t\t.vue-crumb__separator {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// Necessary to hide hidden crumbs\n\t&--hidden {\n\t\tdisplay: none;\n\t}\n\t&__separator {\n\t\tpadding: 0;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\t// Necessary for indicating hovering for drag and drop\n\t&#{&}--hovered :deep(.button-vue) {\n\t\tbackground-color: var(--color-background-dark);\n\t\tcolor: var(--color-main-text);\n\t}\n\t// Adjust button style\n\t&:not(:last-child) :deep() .button-vue {\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&__text {\n\t\t\tfont-weight: normal;\n\t\t}\n\t}\n\t:deep(.button-vue__text) {\n\t\tmargin: 0;\n\t}\n\n\t// Adjust action item appearance for crumbs with actions\n\t// to match other crumbs\n\t&:not(.dropdown) :deep(.action-item) {\n\t\t// Adjustments necessary to correctly shrink on small screens\n\t\tmax-width: 100%;\n\n\t\t.button-vue {\n\t\t\tpadding: 0 4px 0 16px;\n\t\t\tmax-width: 100%;\n\n\t\t\t&__wrapper {\n\t\t\t\tflex-direction: row-reverse;\n\t\t\t}\n\t\t}\n\n\t\t// Adjust the background of the last crumb when the action is open\n\t\t&.action-item--open .action-item__menutoggle {\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_createBlock","_createSlots","_renderSlot","_normalizeClass","_createVNode"],"mappings":"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","x_google_ignoreList":[0]}