|
| 1 | +// |
| 2 | +// |
| 3 | +// |
| 4 | +// |
| 5 | +// |
| 6 | +// |
| 7 | +// |
| 8 | +// |
| 9 | +// |
| 10 | +// |
| 11 | +// |
| 12 | +// |
| 13 | +// |
| 14 | +// |
| 15 | +// |
| 16 | +// |
| 17 | +// |
| 18 | +// |
| 19 | +// |
| 20 | +// |
| 21 | +// |
| 22 | +// |
| 23 | + |
| 24 | +var script = { |
| 25 | + name: 'VueCustomTooltip', |
| 26 | + props: { |
| 27 | + label: String, |
| 28 | + active: { |
| 29 | + type: Boolean, |
| 30 | + default: true, |
| 31 | + }, |
| 32 | + sticky: Boolean, // Always showing |
| 33 | + multiline: Boolean, // Multiple lines |
| 34 | + underlined: Boolean, |
| 35 | + abbreviation: Boolean, |
| 36 | + position: { |
| 37 | + type: String, |
| 38 | + default: 'is-top', |
| 39 | + validator: function validator(value) { |
| 40 | + return ['is-top', 'is-bottom', 'is-left', 'is-right'].indexOf(value) > -1 |
| 41 | + }, |
| 42 | + }, |
| 43 | + size: { |
| 44 | + type: String, |
| 45 | + default: 'is-medium', |
| 46 | + validator: function validator(value) { |
| 47 | + return ['is-small', 'is-medium', 'is-large'].indexOf(value) > -1 |
| 48 | + }, |
| 49 | + }, |
| 50 | + }, |
| 51 | + data: function data() { |
| 52 | + return { |
| 53 | + labelText: this.label || null, |
| 54 | + isActive: this.active || true, |
| 55 | + isSticky: this.sticky || false, |
| 56 | + isMultiline: this.multiline || false, |
| 57 | + isUnderlined: this.underlined || false, |
| 58 | + isAbbreviation: this.abbreviation || false, |
| 59 | + hasPosition: this.position || 'is-top', |
| 60 | + hasSize: this.size || 'is-medium', |
| 61 | + } |
| 62 | + }, |
| 63 | + computed: { |
| 64 | + dynamicStyles: function dynamicStyles() { |
| 65 | + return { |
| 66 | + '--vue-custom-tooltip-color': |
| 67 | + this.$vueCustomTooltip && this.$vueCustomTooltip.hasOwnProperty('color') |
| 68 | + ? this.$vueCustomTooltip.color |
| 69 | + : null, |
| 70 | + '--vue-custom-tooltip-background': |
| 71 | + this.$vueCustomTooltip && this.$vueCustomTooltip.hasOwnProperty('background') |
| 72 | + ? this.$vueCustomTooltip.background |
| 73 | + : null, |
| 74 | + '--vue-custom-tooltip-border-radius': |
| 75 | + this.$vueCustomTooltip && this.$vueCustomTooltip.hasOwnProperty('borderRadius') |
| 76 | + ? this.$vueCustomTooltip.borderRadius |
| 77 | + : null, |
| 78 | + '--vue-custom-tooltip-font-weight': |
| 79 | + this.$vueCustomTooltip && this.$vueCustomTooltip.hasOwnProperty('fontWeight') |
| 80 | + ? this.$vueCustomTooltip.fontWeight |
| 81 | + : null, |
| 82 | + } |
| 83 | + }, |
| 84 | + }, |
| 85 | + watch: { |
| 86 | + label: { |
| 87 | + handler: function handler(value) { |
| 88 | + this.labelText = value; |
| 89 | + }, |
| 90 | + immediate: true, |
| 91 | + }, |
| 92 | + active: { |
| 93 | + handler: function handler(value) { |
| 94 | + this.isActive = value; |
| 95 | + }, |
| 96 | + immediate: true, |
| 97 | + }, |
| 98 | + sticky: { |
| 99 | + handler: function handler(value) { |
| 100 | + this.isSticky = value; |
| 101 | + }, |
| 102 | + immediate: true, |
| 103 | + }, |
| 104 | + multiline: { |
| 105 | + handler: function handler(value) { |
| 106 | + this.isMultiline = value; |
| 107 | + }, |
| 108 | + immediate: true, |
| 109 | + }, |
| 110 | + underlined: { |
| 111 | + handler: function handler(value) { |
| 112 | + this.isUnderlined = value; |
| 113 | + }, |
| 114 | + immediate: true, |
| 115 | + }, |
| 116 | + abbreviation: { |
| 117 | + handler: function handler(value) { |
| 118 | + this.isAbbreviation = value; |
| 119 | + }, |
| 120 | + immediate: true, |
| 121 | + }, |
| 122 | + position: { |
| 123 | + handler: function handler(value) { |
| 124 | + this.hasPosition = value; |
| 125 | + }, |
| 126 | + immediate: true, |
| 127 | + }, |
| 128 | + size: { |
| 129 | + handler: function handler(value) { |
| 130 | + this.hasSize = value; |
| 131 | + }, |
| 132 | + immediate: true, |
| 133 | + }, |
| 134 | + }, |
| 135 | +}; |
| 136 | + |
| 137 | +function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { |
| 138 | + if (typeof shadowMode !== 'boolean') { |
| 139 | + createInjectorSSR = createInjector; |
| 140 | + createInjector = shadowMode; |
| 141 | + shadowMode = false; |
| 142 | + } |
| 143 | + // Vue.extend constructor export interop. |
| 144 | + var options = typeof script === 'function' ? script.options : script; |
| 145 | + // render functions |
| 146 | + if (template && template.render) { |
| 147 | + options.render = template.render; |
| 148 | + options.staticRenderFns = template.staticRenderFns; |
| 149 | + options._compiled = true; |
| 150 | + // functional template |
| 151 | + if (isFunctionalTemplate) { |
| 152 | + options.functional = true; |
| 153 | + } |
| 154 | + } |
| 155 | + // scopedId |
| 156 | + if (scopeId) { |
| 157 | + options._scopeId = scopeId; |
| 158 | + } |
| 159 | + var hook; |
| 160 | + if (moduleIdentifier) { |
| 161 | + // server build |
| 162 | + hook = function (context) { |
| 163 | + // 2.3 injection |
| 164 | + context = |
| 165 | + context || // cached call |
| 166 | + (this.$vnode && this.$vnode.ssrContext) || // stateful |
| 167 | + (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional |
| 168 | + // 2.2 with runInNewContext: true |
| 169 | + if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { |
| 170 | + context = __VUE_SSR_CONTEXT__; |
| 171 | + } |
| 172 | + // inject component styles |
| 173 | + if (style) { |
| 174 | + style.call(this, createInjectorSSR(context)); |
| 175 | + } |
| 176 | + // register component module identifier for async chunk inference |
| 177 | + if (context && context._registeredComponents) { |
| 178 | + context._registeredComponents.add(moduleIdentifier); |
| 179 | + } |
| 180 | + }; |
| 181 | + // used by ssr in case component is cached and beforeCreate |
| 182 | + // never gets called |
| 183 | + options._ssrRegister = hook; |
| 184 | + } |
| 185 | + else if (style) { |
| 186 | + hook = shadowMode |
| 187 | + ? function (context) { |
| 188 | + style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot)); |
| 189 | + } |
| 190 | + : function (context) { |
| 191 | + style.call(this, createInjector(context)); |
| 192 | + }; |
| 193 | + } |
| 194 | + if (hook) { |
| 195 | + if (options.functional) { |
| 196 | + // register for functional component in vue file |
| 197 | + var originalRender = options.render; |
| 198 | + options.render = function renderWithStyleInjection(h, context) { |
| 199 | + hook.call(context); |
| 200 | + return originalRender(h, context); |
| 201 | + }; |
| 202 | + } |
| 203 | + else { |
| 204 | + // inject component registration as beforeCreate hook |
| 205 | + var existing = options.beforeCreate; |
| 206 | + options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; |
| 207 | + } |
| 208 | + } |
| 209 | + return script; |
| 210 | +} |
| 211 | + |
| 212 | +var isOldIE = typeof navigator !== 'undefined' && |
| 213 | + /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); |
| 214 | +function createInjector(context) { |
| 215 | + return function (id, style) { return addStyle(id, style); }; |
| 216 | +} |
| 217 | +var HEAD; |
| 218 | +var styles = {}; |
| 219 | +function addStyle(id, css) { |
| 220 | + var group = isOldIE ? css.media || 'default' : id; |
| 221 | + var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] }); |
| 222 | + if (!style.ids.has(id)) { |
| 223 | + style.ids.add(id); |
| 224 | + var code = css.source; |
| 225 | + if (css.map) { |
| 226 | + // https://developer.chrome.com/devtools/docs/javascript-debugging |
| 227 | + // this makes source maps inside style tags work properly in Chrome |
| 228 | + code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; |
| 229 | + // http://stackoverflow.com/a/26603875 |
| 230 | + code += |
| 231 | + '\n/*# sourceMappingURL=data:application/json;base64,' + |
| 232 | + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + |
| 233 | + ' */'; |
| 234 | + } |
| 235 | + if (!style.element) { |
| 236 | + style.element = document.createElement('style'); |
| 237 | + style.element.type = 'text/css'; |
| 238 | + if (css.media) |
| 239 | + { style.element.setAttribute('media', css.media); } |
| 240 | + if (HEAD === undefined) { |
| 241 | + HEAD = document.head || document.getElementsByTagName('head')[0]; |
| 242 | + } |
| 243 | + HEAD.appendChild(style.element); |
| 244 | + } |
| 245 | + if ('styleSheet' in style.element) { |
| 246 | + style.styles.push(code); |
| 247 | + style.element.styleSheet.cssText = style.styles |
| 248 | + .filter(Boolean) |
| 249 | + .join('\n'); |
| 250 | + } |
| 251 | + else { |
| 252 | + var index = style.ids.size - 1; |
| 253 | + var textNode = document.createTextNode(code); |
| 254 | + var nodes = style.element.childNodes; |
| 255 | + if (nodes[index]) |
| 256 | + { style.element.removeChild(nodes[index]); } |
| 257 | + if (nodes.length) |
| 258 | + { style.element.insertBefore(textNode, nodes[index]); } |
| 259 | + else |
| 260 | + { style.element.appendChild(textNode); } |
| 261 | + } |
| 262 | + } |
| 263 | +} |
| 264 | + |
| 265 | +/* script */ |
| 266 | +var __vue_script__ = script; |
| 267 | + |
| 268 | +/* template */ |
| 269 | +var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.isAbbreviation ? 'abbr' : 'span',{tag:"component",class:[ |
| 270 | + _vm.hasPosition, |
| 271 | + _vm.hasSize, |
| 272 | + { |
| 273 | + 'vue-custom-tooltip': _vm.isActive && _vm.labelText, |
| 274 | + 'is-sticky': _vm.isSticky, |
| 275 | + 'has-multiline': _vm.isMultiline, |
| 276 | + 'is-underlined': _vm.isUnderlined || _vm.isAbbreviation, |
| 277 | + } ],style:([_vm.dynamicStyles, { cursor: _vm.isAbbreviation ? 'help' : 'pointer' }]),attrs:{"data-label":_vm.labelText,"aria-label":_vm.labelText,"role":"tooltip"}},[_vm._t("default")],2)}; |
| 278 | +var __vue_staticRenderFns__ = []; |
| 279 | + |
| 280 | + /* style */ |
| 281 | + var __vue_inject_styles__ = function (inject) { |
| 282 | + if (!inject) { return } |
| 283 | + inject("data-v-60bf38c6_0", { source: ".vue-custom-tooltip{--vue-custom-tooltip-color:#fff;--vue-custom-tooltip-background:#000;--vue-custom-tooltip-border-radius:12px;--vue-custom-tooltip-font-weight:400}", map: undefined, media: undefined }) |
| 284 | +,inject("data-v-60bf38c6_1", { source: ".vue-custom-tooltip{position:relative;display:inline-block;text-decoration-line:none!important}.vue-custom-tooltip.is-top:after,.vue-custom-tooltip.is-top:before{top:auto;right:auto;bottom:calc(100% + 5px + 2px);left:50%;transform:translateX(-50%)}.vue-custom-tooltip.is-top:before{border-top:5px solid #000;border-top:5px solid var(--vue-custom-tooltip-background);border-right:5px solid transparent;border-left:5px solid transparent;bottom:calc(100% + 2px)}.vue-custom-tooltip.is-top.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-top.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-top.has-multiline.is-large:after{width:280px}.vue-custom-tooltip.is-right:after,.vue-custom-tooltip.is-right:before{top:50%;right:auto;bottom:auto;left:calc(100% + 5px + 2px);transform:translateY(-50%)}.vue-custom-tooltip.is-right:before{border-top:5px solid transparent;border-right:5px solid #000;border-right:5px solid var(--vue-custom-tooltip-background);border-bottom:5px solid transparent;left:calc(100% + 2px)}.vue-custom-tooltip.is-right.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-right.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-right.has-multiline.is-large:after{width:280px}.vue-custom-tooltip.is-bottom:after,.vue-custom-tooltip.is-bottom:before{top:calc(100% + 5px + 2px);right:auto;bottom:auto;left:50%;transform:translateX(-50%)}.vue-custom-tooltip.is-bottom:before{border-right:5px solid transparent;border-bottom:5px solid #000;border-bottom:5px solid var(--vue-custom-tooltip-background);border-left:5px solid transparent;top:calc(100% + 2px)}.vue-custom-tooltip.is-bottom.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-bottom.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-bottom.has-multiline.is-large:after{width:280px}.vue-custom-tooltip.is-left:after,.vue-custom-tooltip.is-left:before{top:50%;right:calc(100% + 5px + 2px);bottom:auto;left:auto;transform:translateY(-50%)}.vue-custom-tooltip.is-left:before{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000;border-left:5px solid var(--vue-custom-tooltip-background);right:calc(100% + 2px)}.vue-custom-tooltip.is-left.has-multiline.is-small:after{width:140px}.vue-custom-tooltip.is-left.has-multiline.is-medium:after{width:210px}.vue-custom-tooltip.is-left.has-multiline.is-large:after{width:280px}.vue-custom-tooltip.is-underlined{border-bottom:1px dotted #000;border-bottom:1px dotted var(--vue-custom-tooltip-background);line-height:1.2}.vue-custom-tooltip:after,.vue-custom-tooltip:before{position:absolute;content:'';opacity:0;visibility:hidden;pointer-events:none;transition:opacity 86ms ease-out,visibility 86ms ease-out}.vue-custom-tooltip:before{z-index:889}.vue-custom-tooltip:after{content:attr(data-label);color:#fff;color:var(--vue-custom-tooltip-color);background:#000;background:var(--vue-custom-tooltip-background);width:auto;padding:.35rem .75rem .45rem;border-radius:12px;border-radius:var(--vue-custom-tooltip-border-radius);font-size:.85rem!important;font-weight:400;font-weight:var(--vue-custom-tooltip-font-weight);line-height:1.3;letter-spacing:normal!important;text-transform:none;box-shadow:0 1px 2px 1px rgba(0,1,0,.2);z-index:888;white-space:nowrap}.vue-custom-tooltip:not([data-label='']):hover:after,.vue-custom-tooltip:not([data-label='']):hover:before{opacity:1;visibility:visible}:disabled .vue-custom-tooltip{pointer-events:none}.vue-custom-tooltip:not([data-label='']).is-sticky:after,.vue-custom-tooltip:not([data-label='']).is-sticky:before{opacity:1;visibility:visible}.vue-custom-tooltip.has-multiline:after{display:flex-block;padding:.5rem .75rem .65rem;text-align:center;line-height:1.4;white-space:pre-wrap}", map: undefined, media: undefined }); |
| 285 | + |
| 286 | + }; |
| 287 | + /* scoped */ |
| 288 | + var __vue_scope_id__ = undefined; |
| 289 | + /* module identifier */ |
| 290 | + var __vue_module_identifier__ = undefined; |
| 291 | + /* functional template */ |
| 292 | + var __vue_is_functional_template__ = false; |
| 293 | + /* style inject SSR */ |
| 294 | + |
| 295 | + /* style inject shadow dom */ |
| 296 | + |
| 297 | + |
| 298 | + |
| 299 | + var __vue_component__ = /*#__PURE__*/normalizeComponent( |
| 300 | + { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, |
| 301 | + __vue_inject_styles__, |
| 302 | + __vue_script__, |
| 303 | + __vue_scope_id__, |
| 304 | + __vue_is_functional_template__, |
| 305 | + __vue_module_identifier__, |
| 306 | + false, |
| 307 | + createInjector, |
| 308 | + undefined, |
| 309 | + undefined |
| 310 | + ); |
| 311 | + |
| 312 | +// Import vue component |
| 313 | + |
| 314 | +var defaultOptions = { |
| 315 | + name: 'VueCustomTooltip', |
| 316 | + color: '#fff', |
| 317 | + background: '#000', |
| 318 | + borderRadius: 12, |
| 319 | + fontWeight: 400, |
| 320 | +}; |
| 321 | + |
| 322 | +// Declare install function executed by Vue.use() |
| 323 | +var install = function installMyComponent(Vue, opt) { |
| 324 | + // Don't install if already installed, or SSR |
| 325 | + if (install.installed || Vue.prototype.$isServer) { return } |
| 326 | + install.installed = true; |
| 327 | + |
| 328 | + // Grab user options |
| 329 | + var userOptions = Object.assign({}, opt); |
| 330 | + |
| 331 | + // HEX regex: Hash, plus 3 or 6 valid characters |
| 332 | + var hexRegex = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/; |
| 333 | + // Test color for valid HEX |
| 334 | + if (userOptions.hasOwnProperty('color') && !hexRegex.test(userOptions.color)) { |
| 335 | + delete userOptions.color; |
| 336 | + } |
| 337 | + // Test background for valid HEX |
| 338 | + if (userOptions.hasOwnProperty('background') && !hexRegex.test(userOptions.background)) { |
| 339 | + delete userOptions.background; |
| 340 | + } |
| 341 | + |
| 342 | + // borderRadius regex: number between 1-9, then any other numbers |
| 343 | + var borderRadiusRegex = /^[0-9]+$/; |
| 344 | + // Test borderRadius for integer |
| 345 | + if (userOptions.hasOwnProperty('borderRadius') && !borderRadiusRegex.test(userOptions.borderRadius)) { |
| 346 | + delete userOptions.borderRadius; |
| 347 | + } |
| 348 | + |
| 349 | + // fontWeight regex: number between 1-9 followed by two zeros |
| 350 | + var fontWeightRegex = /^[1-9]{1}00$/; |
| 351 | + // Test fontWeight for integer |
| 352 | + if (userOptions.hasOwnProperty('fontWeight') && !fontWeightRegex.test(userOptions.fontWeight)) { |
| 353 | + delete userOptions.fontWeight; |
| 354 | + } |
| 355 | + |
| 356 | + // Merge options |
| 357 | + var options = Object.assign({}, defaultOptions, userOptions); |
| 358 | + |
| 359 | + // Mutate borderRadius |
| 360 | + options.borderRadius = options.borderRadius + 'px'; |
| 361 | + |
| 362 | + // Add global property (mainly for passing styles) |
| 363 | + Vue.prototype.$vueCustomTooltip = options; |
| 364 | + |
| 365 | + // Register component, using options.name. |
| 366 | + // e.g. <VueCustomTooltip> |
| 367 | + Vue.component(options.name, __vue_component__); |
| 368 | +}; |
| 369 | + |
| 370 | +// Create module definition for Vue.use() |
| 371 | +var plugin = { |
| 372 | + install: install, |
| 373 | +}; |
| 374 | + |
| 375 | +// Auto-install when vue is found (eg. in browser via <script> tag) |
| 376 | +var GlobalVue = null; |
| 377 | +if (typeof window !== 'undefined') { |
| 378 | + GlobalVue = window.Vue; |
| 379 | +} else if (typeof global !== 'undefined') { |
| 380 | + GlobalVue = global.Vue; |
| 381 | +} |
| 382 | +if (GlobalVue) { |
| 383 | + GlobalVue.use(plugin, defaultOptions); |
| 384 | +} |
| 385 | + |
| 386 | +// Inject install function into component - allows component |
| 387 | +// to be registered via Vue.use() as well as Vue.component() |
| 388 | +__vue_component__.install = install; |
| 389 | + |
| 390 | +export default __vue_component__; |
0 commit comments