\n\n \n \n Right click on me - Do not close\n \n\n \n \n
\n \n \n {{ data.text }}\n \n
\n \n
\n\n\n\n`\n","\n \n\n \n \n Right click on me\n \n\n \n \n
\n \n \n {{ data.text }}\n \n
\n \n\n \n {{ codeSimple }}\n \n \n\n\n\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ContextMenuSimple.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ContextMenuSimple.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ContextMenuSimple.vue?vue&type=template&id=2df02d41&\"\nimport script from \"./ContextMenuSimple.vue?vue&type=script&lang=js&\"\nexport * from \"./ContextMenuSimple.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card-code',{attrs:{\"title\":\"Close On Click\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codeCloseOnClick)+\" \")]},proxy:true}])},[_c('b-card-text',[_c('code',[_vm._v(\"closeOnClick\")]),_c('span',[_vm._v(\" is set to \")]),_c('code',[_vm._v(\"false\")]),_c('span',[_vm._v(\" , the context menu will not automatically close when clicked on. You can toggle this feature on and off in this demo by using the checkbox below.\")])]),_c('b-button',{directives:[{name:\"ripple\",rawName:\"v-ripple.400\",value:('rgba(113, 102, 240, 0.15)'),expression:\"'rgba(113, 102, 240, 0.15)'\",modifiers:{\"400\":true}}],attrs:{\"variant\":\"outline-primary\"},on:{\"contextmenu\":function($event){$event.preventDefault();return _vm.$refs.menuProp.open($event)}}},[_vm._v(\" Right click on me - Do not close \")]),_c('vue-context',{ref:\"menuProp\",attrs:{\"close-on-click\":false}},_vm._l((_vm.menuData),function(data){return _c('li',{key:data.icon},[_c('b-link',{staticClass:\"d-flex align-items-center\",on:{\"click\":function($event){return _vm.optionClicked(data.text,data.icon)}}},[_c('feather-icon',{attrs:{\"icon\":data.icon,\"size\":\"16\"}}),_c('span',{staticClass:\"ml-75\"},[_vm._v(_vm._s(data.text))])],1)],1)}),0)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n \n \n closeOnClick\n is set to \n false\n , the context menu will not automatically close when clicked on. You can toggle this feature on and off in this demo by using the checkbox below.\n \n\n \n \n Right click on me - Do not close\n \n\n \n \n
\n \n \n {{ data.text }}\n \n
\n \n\n \n {{ codeCloseOnClick }}\n \n \n\n\n\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ContextMenuCloseOnClick.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ContextMenuCloseOnClick.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ContextMenuCloseOnClick.vue?vue&type=template&id=4adcef34&\"\nimport script from \"./ContextMenuCloseOnClick.vue?vue&type=script&lang=js&\"\nexport * from \"./ContextMenuCloseOnClick.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","\n
\n \n \n
\n\n\n\n\n\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ContextMenu.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ContextMenu.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ContextMenu.vue?vue&type=template&id=2c5aef9a&\"\nimport script from \"./ContextMenu.vue?vue&type=script&lang=js&\"\nexport * from \"./ContextMenu.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ContextMenu.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ToastificationContent.vue?vue&type=style&index=0&id=00bc57af&lang=scss&scoped=true&\"","import { Vue, mergeData } from '../../vue';\nimport { NAME_CARD_TEXT } from '../../constants/components';\nimport { PROP_TYPE_STRING } from '../../constants/props';\nimport { makeProp, makePropsConfigurable } from '../../utils/props'; // --- Props ---\n\nexport var props = makePropsConfigurable({\n textTag: makeProp(PROP_TYPE_STRING, 'p')\n}, NAME_CARD_TEXT); // --- Main component ---\n// @vue/component\n\nexport var BCardText = /*#__PURE__*/Vue.extend({\n name: NAME_CARD_TEXT,\n functional: true,\n props: props,\n render: function render(h, _ref) {\n var props = _ref.props,\n data = _ref.data,\n children = _ref.children;\n return h(props.textTag, mergeData(data, {\n staticClass: 'card-text'\n }), children);\n }\n});","function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nimport { Vue } from '../../vue';\nimport { NAME_AVATAR } from '../../constants/components';\nimport { EVENT_NAME_CLICK, EVENT_NAME_IMG_ERROR } from '../../constants/events';\nimport { PROP_TYPE_BOOLEAN, PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props';\nimport { SLOT_NAME_BADGE } from '../../constants/slots';\nimport { isNumber, isNumeric, isString } from '../../utils/inspect';\nimport { toFloat } from '../../utils/number';\nimport { omit, sortKeys } from '../../utils/object';\nimport { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props';\nimport { isLink } from '../../utils/router';\nimport { normalizeSlotMixin } from '../../mixins/normalize-slot';\nimport { BIcon } from '../../icons/icon';\nimport { BIconPersonFill } from '../../icons/icons';\nimport { BButton } from '../button/button';\nimport { BLink, props as BLinkProps } from '../link/link'; // --- Constants ---\n\nvar CLASS_NAME = 'b-avatar';\nvar SIZES = ['sm', null, 'lg'];\nvar FONT_SIZE_SCALE = 0.4;\nvar BADGE_FONT_SIZE_SCALE = FONT_SIZE_SCALE * 0.7; // --- Helper methods ---\n\nexport var computeSize = function computeSize(value) {\n // Parse to number when value is a float-like string\n value = isString(value) && isNumeric(value) ? toFloat(value, 0) : value; // Convert all numbers to pixel values\n\n return isNumber(value) ? \"\".concat(value, \"px\") : value || null;\n}; // --- Props ---\n\nvar linkProps = omit(BLinkProps, ['active', 'event', 'routerTag']);\nexport var props = makePropsConfigurable(sortKeys(_objectSpread(_objectSpread({}, linkProps), {}, {\n alt: makeProp(PROP_TYPE_STRING, 'avatar'),\n ariaLabel: makeProp(PROP_TYPE_STRING),\n badge: makeProp(PROP_TYPE_BOOLEAN_STRING, false),\n badgeLeft: makeProp(PROP_TYPE_BOOLEAN, false),\n badgeOffset: makeProp(PROP_TYPE_STRING),\n badgeTop: makeProp(PROP_TYPE_BOOLEAN, false),\n badgeVariant: makeProp(PROP_TYPE_STRING, 'primary'),\n button: makeProp(PROP_TYPE_BOOLEAN, false),\n buttonType: makeProp(PROP_TYPE_STRING, 'button'),\n icon: makeProp(PROP_TYPE_STRING),\n rounded: makeProp(PROP_TYPE_BOOLEAN_STRING, false),\n size: makeProp(PROP_TYPE_NUMBER_STRING),\n square: makeProp(PROP_TYPE_BOOLEAN, false),\n src: makeProp(PROP_TYPE_STRING),\n text: makeProp(PROP_TYPE_STRING),\n variant: makeProp(PROP_TYPE_STRING, 'secondary')\n})), NAME_AVATAR); // --- Main component ---\n// @vue/component\n\nexport var BAvatar = /*#__PURE__*/Vue.extend({\n name: NAME_AVATAR,\n mixins: [normalizeSlotMixin],\n inject: {\n bvAvatarGroup: {\n default: null\n }\n },\n props: props,\n data: function data() {\n return {\n localSrc: this.src || null\n };\n },\n computed: {\n computedSize: function computedSize() {\n // Always use the avatar group size\n var bvAvatarGroup = this.bvAvatarGroup;\n return computeSize(bvAvatarGroup ? bvAvatarGroup.size : this.size);\n },\n computedVariant: function computedVariant() {\n var bvAvatarGroup = this.bvAvatarGroup;\n return bvAvatarGroup && bvAvatarGroup.variant ? bvAvatarGroup.variant : this.variant;\n },\n computedRounded: function computedRounded() {\n var bvAvatarGroup = this.bvAvatarGroup;\n var square = bvAvatarGroup && bvAvatarGroup.square ? true : this.square;\n var rounded = bvAvatarGroup && bvAvatarGroup.rounded ? bvAvatarGroup.rounded : this.rounded;\n return square ? '0' : rounded === '' ? true : rounded || 'circle';\n },\n fontStyle: function fontStyle() {\n var size = this.computedSize;\n var fontSize = SIZES.indexOf(size) === -1 ? \"calc(\".concat(size, \" * \").concat(FONT_SIZE_SCALE, \")\") : null;\n return fontSize ? {\n fontSize: fontSize\n } : {};\n },\n marginStyle: function marginStyle() {\n var size = this.computedSize,\n bvAvatarGroup = this.bvAvatarGroup;\n var overlapScale = bvAvatarGroup ? bvAvatarGroup.overlapScale : 0;\n var value = size && overlapScale ? \"calc(\".concat(size, \" * -\").concat(overlapScale, \")\") : null;\n return value ? {\n marginLeft: value,\n marginRight: value\n } : {};\n },\n badgeStyle: function badgeStyle() {\n var size = this.computedSize,\n badgeTop = this.badgeTop,\n badgeLeft = this.badgeLeft,\n badgeOffset = this.badgeOffset;\n var offset = badgeOffset || '0px';\n return {\n fontSize: SIZES.indexOf(size) === -1 ? \"calc(\".concat(size, \" * \").concat(BADGE_FONT_SIZE_SCALE, \" )\") : null,\n top: badgeTop ? offset : null,\n bottom: badgeTop ? null : offset,\n left: badgeLeft ? offset : null,\n right: badgeLeft ? null : offset\n };\n }\n },\n watch: {\n src: function src(newValue, oldValue) {\n if (newValue !== oldValue) {\n this.localSrc = newValue || null;\n }\n }\n },\n methods: {\n onImgError: function onImgError(event) {\n this.localSrc = null;\n this.$emit(EVENT_NAME_IMG_ERROR, event);\n },\n onClick: function onClick(event) {\n this.$emit(EVENT_NAME_CLICK, event);\n }\n },\n render: function render(h) {\n var _class2;\n\n var variant = this.computedVariant,\n disabled = this.disabled,\n rounded = this.computedRounded,\n icon = this.icon,\n src = this.localSrc,\n text = this.text,\n fontStyle = this.fontStyle,\n marginStyle = this.marginStyle,\n size = this.computedSize,\n button = this.button,\n type = this.buttonType,\n badge = this.badge,\n badgeVariant = this.badgeVariant,\n badgeStyle = this.badgeStyle;\n var link = !button && isLink(this);\n var tag = button ? BButton : link ? BLink : 'span';\n var alt = this.alt;\n var ariaLabel = this.ariaLabel || null;\n var $content = null;\n\n if (this.hasNormalizedSlot()) {\n // Default slot overrides props\n $content = h('span', {\n staticClass: 'b-avatar-custom'\n }, [this.normalizeSlot()]);\n } else if (src) {\n $content = h('img', {\n style: variant ? {} : {\n width: '100%',\n height: '100%'\n },\n attrs: {\n src: src,\n alt: alt\n },\n on: {\n error: this.onImgError\n }\n });\n $content = h('span', {\n staticClass: 'b-avatar-img'\n }, [$content]);\n } else if (icon) {\n $content = h(BIcon, {\n props: {\n icon: icon\n },\n attrs: {\n 'aria-hidden': 'true',\n alt: alt\n }\n });\n } else if (text) {\n $content = h('span', {\n staticClass: 'b-avatar-text',\n style: fontStyle\n }, [h('span', text)]);\n } else {\n // Fallback default avatar content\n $content = h(BIconPersonFill, {\n attrs: {\n 'aria-hidden': 'true',\n alt: alt\n }\n });\n }\n\n var $badge = h();\n var hasBadgeSlot = this.hasNormalizedSlot(SLOT_NAME_BADGE);\n\n if (badge || badge === '' || hasBadgeSlot) {\n var badgeText = badge === true ? '' : badge;\n $badge = h('span', {\n staticClass: 'b-avatar-badge',\n class: _defineProperty({}, \"badge-\".concat(badgeVariant), badgeVariant),\n style: badgeStyle\n }, [hasBadgeSlot ? this.normalizeSlot(SLOT_NAME_BADGE) : badgeText]);\n }\n\n var componentData = {\n staticClass: CLASS_NAME,\n class: (_class2 = {}, _defineProperty(_class2, \"\".concat(CLASS_NAME, \"-\").concat(size), size && SIZES.indexOf(size) !== -1), _defineProperty(_class2, \"badge-\".concat(variant), !button && variant), _defineProperty(_class2, \"rounded\", rounded === true), _defineProperty(_class2, \"rounded-\".concat(rounded), rounded && rounded !== true), _defineProperty(_class2, \"disabled\", disabled), _class2),\n style: _objectSpread(_objectSpread({}, marginStyle), {}, {\n width: size,\n height: size\n }),\n attrs: {\n 'aria-label': ariaLabel || null\n },\n props: button ? {\n variant: variant,\n disabled: disabled,\n type: type\n } : link ? pluckProps(linkProps, this) : {},\n on: button || link ? {\n click: this.onClick\n } : {}\n };\n return h(tag, componentData, [$content, $badge]);\n }\n});","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ContextMenu.vue?vue&type=style&index=0&lang=scss&\""],"sourceRoot":""}