diff --git a/src/directives/v-tooltip.js b/src/directives/v-tooltip.js index 8efe2427..0c6e99f6 100644 --- a/src/directives/v-tooltip.js +++ b/src/directives/v-tooltip.js @@ -20,69 +20,71 @@ const positions = [ 'left-end', ] -export const defaultOptions = { - // Default tooltip placement relative to target element - defaultPlacement: 'top', - // Default CSS classes applied to the tooltip element - defaultClass: 'vue-tooltip-theme', - // Default CSS classes applied to the target element of the tooltip - defaultTargetClass: 'has-tooltip', - // Is the content HTML by default? - defaultHtml: true, - // Default HTML template of the tooltip element - // It must include `tooltip-arrow` & `tooltip-inner` CSS classes (can be configured, see below) - // Change if the classes conflict with other libraries (for example bootstrap) - defaultTemplate: '', - // Selector used to get the arrow element in the tooltip template - defaultArrowSelector: '.tooltip-arrow, .tooltip__arrow', - // Selector used to get the inner content element in the tooltip template - defaultInnerSelector: '.tooltip-inner, .tooltip__inner', - // Delay (ms) - defaultDelay: 0, - // Default events that trigger the tooltip - defaultTrigger: 'hover focus', - // Default position offset (px) - defaultOffset: 0, - // Default container where the tooltip will be appended - defaultContainer: 'body', - defaultBoundariesElement: undefined, - defaultPopperOptions: {}, - // Class added when content is loading - defaultLoadingClass: 'tooltip-loading', - // Displayed when tooltip content is loading - defaultLoadingContent: '...', - // Hide on mouseover tooltip - autoHide: true, - // Close tooltip on click on tooltip target? - defaultHideOnTargetClick: true, - // Auto destroy tooltip DOM nodes (ms) - disposeTimeout: 5000, - // Options for popover - popover: { - defaultPlacement: 'bottom', - // Use the `popoverClass` prop for theming - defaultClass: 'vue-popover-theme', - // Base class (change if conflicts with other libraries) - defaultBaseClass: 'tooltip popover', - // Wrapper class (contains arrow and inner) - defaultWrapperClass: 'wrapper', - // Inner content class - defaultInnerClass: 'tooltip-inner popover-inner', - // Arrow class - defaultArrowClass: 'tooltip-arrow popover-arrow', - // Class added when popover is open - defaultOpenClass: 'open', +export function defaultOptions () { + return { + // Default tooltip placement relative to target element + defaultPlacement: 'top', + // Default CSS classes applied to the tooltip element + defaultClass: 'vue-tooltip-theme', + // Default CSS classes applied to the target element of the tooltip + defaultTargetClass: 'has-tooltip', + // Is the content HTML by default? + defaultHtml: true, + // Default HTML template of the tooltip element + // It must include `tooltip-arrow` & `tooltip-inner` CSS classes (can be configured, see below) + // Change if the classes conflict with other libraries (for example bootstrap) + defaultTemplate: '', + // Selector used to get the arrow element in the tooltip template + defaultArrowSelector: '.tooltip-arrow, .tooltip__arrow', + // Selector used to get the inner content element in the tooltip template + defaultInnerSelector: '.tooltip-inner, .tooltip__inner', + // Delay (ms) defaultDelay: 0, - defaultTrigger: 'click', + // Default events that trigger the tooltip + defaultTrigger: 'hover focus', + // Default position offset (px) defaultOffset: 0, + // Default container where the tooltip will be appended defaultContainer: 'body', defaultBoundariesElement: undefined, defaultPopperOptions: {}, - // Hides if clicked outside of popover - defaultAutoHide: true, - // Update popper on content resize - defaultHandleResize: true, - }, + // Class added when content is loading + defaultLoadingClass: 'tooltip-loading', + // Displayed when tooltip content is loading + defaultLoadingContent: '...', + // Hide on mouseover tooltip + autoHide: true, + // Close tooltip on click on tooltip target? + defaultHideOnTargetClick: true, + // Auto destroy tooltip DOM nodes (ms) + disposeTimeout: 5000, + // Options for popover + popover: { + defaultPlacement: 'bottom', + // Use the `popoverClass` prop for theming + defaultClass: 'vue-popover-theme', + // Base class (change if conflicts with other libraries) + defaultBaseClass: 'tooltip popover', + // Wrapper class (contains arrow and inner) + defaultWrapperClass: 'wrapper', + // Inner content class + defaultInnerClass: 'tooltip-inner popover-inner', + // Arrow class + defaultArrowClass: 'tooltip-arrow popover-arrow', + // Class added when popover is open + defaultOpenClass: 'open', + defaultDelay: 0, + defaultTrigger: 'click', + defaultOffset: 0, + defaultContainer: 'body', + defaultBoundariesElement: undefined, + defaultPopperOptions: {}, + // Hides if clicked outside of popover + defaultAutoHide: true, + // Update popper on content resize + defaultHandleResize: true, + }, + } } export function getOptions (options) { @@ -215,7 +217,7 @@ export function bind (el, { value, oldValue, modifiers }) { } export const directive = { - options: defaultOptions, + options: defaultOptions(), bind, update: bind, unbind (el) { diff --git a/src/directives/v-tooltip.spec.js b/src/directives/v-tooltip.spec.js index ef2c0d98..18aa8cb2 100644 --- a/src/directives/v-tooltip.spec.js +++ b/src/directives/v-tooltip.spec.js @@ -73,22 +73,23 @@ describe('getOptions', () => { test('defaultOptions', () => { const options = {} const result = VTooltip.getOptions(options) + const defaultOptions = VTooltip.defaultOptions() expect(result).toEqual({ - placement: VTooltip.defaultOptions.defaultPlacement, - delay: VTooltip.defaultOptions.defaultDelay, - html: VTooltip.defaultOptions.defaultHtml, - template: VTooltip.defaultOptions.defaultTemplate, - innerSelector: VTooltip.defaultOptions.defaultInnerSelector, - arrowSelector: VTooltip.defaultOptions.defaultArrowSelector, - trigger: VTooltip.defaultOptions.defaultTrigger, - offset: VTooltip.defaultOptions.defaultOffset, - container: VTooltip.defaultOptions.defaultContainer, - boundariesElement: VTooltip.defaultOptions.defaultBoundariesElement, - autoHide: VTooltip.defaultOptions.autoHide, - hideOnTargetClick: VTooltip.defaultOptions.defaultHideOnTargetClick, - loadingClass: VTooltip.defaultOptions.defaultLoadingClass, - loadingContent: VTooltip.defaultOptions.defaultLoadingContent, - popperOptions: VTooltip.defaultOptions.defaultPopperOptions, + placement: defaultOptions.defaultPlacement, + delay: defaultOptions.defaultDelay, + html: defaultOptions.defaultHtml, + template: defaultOptions.defaultTemplate, + innerSelector: defaultOptions.defaultInnerSelector, + arrowSelector: defaultOptions.defaultArrowSelector, + trigger: defaultOptions.defaultTrigger, + offset: defaultOptions.defaultOffset, + container: defaultOptions.defaultContainer, + boundariesElement: defaultOptions.defaultBoundariesElement, + autoHide: defaultOptions.autoHide, + hideOnTargetClick: defaultOptions.defaultHideOnTargetClick, + loadingClass: defaultOptions.defaultLoadingClass, + loadingContent: defaultOptions.defaultLoadingContent, + popperOptions: defaultOptions.defaultPopperOptions, }) }) }) diff --git a/src/index.js b/src/index.js index 3cf65eff..f465e81c 100644 --- a/src/index.js +++ b/src/index.js @@ -11,7 +11,7 @@ export function install (Vue, options = {}) { install.installed = true const finalOptions = {} - merge(finalOptions, defaultOptions, options) + merge(finalOptions, defaultOptions(), options) plugin.options = finalOptions vtooltip.options = finalOptions