{"version":3,"sources":["webpack:///../../src/util/mergeData.ts","webpack:///./src/view/pages/vuetify/Tooltips.vue?6fff","webpack:///src/view/pages/vuetify/Tooltips.vue","webpack:///./src/view/pages/vuetify/Tooltips.vue?4d55","webpack:///./src/view/pages/vuetify/Tooltips.vue"],"names":["pattern","styleList","styleProp","parseStyle","styleMap","style","s","key","val","mergeTarget","i","arguments","Object","mergeClasses","mergeStyles","mergeListeners","prop","target","source","dest","arg","render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","_v","scopedSlots","_u","fn","ref","on","_g","proxy","_s","code1","html","$event","show","model","value","callback","$$v","expression","code2","js","staticRenderFns","data","components","KTCodePreview","mounted","$store","dispatch","component","VBtn","VCol","VContainer","VIcon","VRow","VTooltip"],"mappings":"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","file":"js/chunk-20f67ecf.ea98789c.js","sourcesContent":["/**\n * @copyright 2017 Alex Regan\n * @license MIT\n * @see https://github.com/alexsasharegan/vue-functional-data-merge\n */\n/* eslint-disable max-statements */\nimport { VNodeData } from 'vue'\nimport { camelize, wrapInArray } from './helpers'\n\nconst pattern = {\n  styleList: /;(?![^(]*\\))/g,\n  styleProp: /:(.*)/,\n} as const\n\nfunction parseStyle (style: string) {\n  const styleMap: Dictionary<any> = {}\n\n  for (const s of style.split(pattern.styleList)) {\n    let [key, val] = s.split(pattern.styleProp)\n    key = key.trim()\n    if (!key) {\n      continue\n    }\n    // May be undefined if the `key: value` pair is incomplete.\n    if (typeof val === 'string') {\n      val = val.trim()\n    }\n    styleMap[camelize(key)] = val\n  }\n\n  return styleMap\n}\n\n/**\n * Intelligently merges data for createElement.\n * Merges arguments left to right, preferring the right argument.\n * Returns new VNodeData object.\n */\nexport default function mergeData (...vNodeData: VNodeData[]): VNodeData\nexport default function mergeData (): VNodeData {\n  const mergeTarget: VNodeData & Dictionary<any> = {}\n  let i: number = arguments.length\n  let prop: string\n\n  // Allow for variadic argument length.\n  while (i--) {\n    // Iterate through the data properties and execute merge strategies\n    // Object.keys eliminates need for hasOwnProperty call\n    for (prop of Object.keys(arguments[i])) {\n      switch (prop) {\n        // Array merge strategy (array concatenation)\n        case 'class':\n        case 'directives':\n          if (arguments[i][prop]) {\n            mergeTarget[prop] = mergeClasses(mergeTarget[prop], arguments[i][prop])\n          }\n          break\n        case 'style':\n          if (arguments[i][prop]) {\n            mergeTarget[prop] = mergeStyles(mergeTarget[prop], arguments[i][prop])\n          }\n          break\n        // Space delimited string concatenation strategy\n        case 'staticClass':\n          if (!arguments[i][prop]) {\n            break\n          }\n          if (mergeTarget[prop] === undefined) {\n            mergeTarget[prop] = ''\n          }\n          if (mergeTarget[prop]) {\n            // Not an empty string, so concatenate\n            mergeTarget[prop] += ' '\n          }\n          mergeTarget[prop] += arguments[i][prop].trim()\n          break\n        // Object, the properties of which to merge via array merge strategy (array concatenation).\n        // Callback merge strategy merges callbacks to the beginning of the array,\n        // so that the last defined callback will be invoked first.\n        // This is done since to mimic how Object.assign merging\n        // uses the last given value to assign.\n        case 'on':\n        case 'nativeOn':\n          if (arguments[i][prop]) {\n            mergeTarget[prop] = mergeListeners(mergeTarget[prop], arguments[i][prop])\n          }\n          break\n        // Object merge strategy\n        case 'attrs':\n        case 'props':\n        case 'domProps':\n        case 'scopedSlots':\n        case 'staticStyle':\n        case 'hook':\n        case 'transition':\n          if (!arguments[i][prop]) {\n            break\n          }\n          if (!mergeTarget[prop]) {\n            mergeTarget[prop] = {}\n          }\n          mergeTarget[prop] = { ...arguments[i][prop], ...mergeTarget[prop] }\n          break\n        // Reassignment strategy (no merge)\n        default: // slot, key, ref, tag, show, keepAlive\n          if (!mergeTarget[prop]) {\n            mergeTarget[prop] = arguments[i][prop]\n          }\n      }\n    }\n  }\n\n  return mergeTarget\n}\n\nexport function mergeStyles (\n  target: undefined | string | object[] | object,\n  source: undefined | string | object[] | object\n) {\n  if (!target) return source\n  if (!source) return target\n\n  target = wrapInArray(typeof target === 'string' ? parseStyle(target) : target)\n\n  return (target as object[]).concat(typeof source === 'string' ? parseStyle(source) : source)\n}\n\nexport function mergeClasses (target: any, source: any) {\n  if (!source) return target\n  if (!target) return source\n\n  return target ? wrapInArray(target).concat(source) : source\n}\n\nexport function mergeListeners (...args: [\n  { [key: string]: Function | Function[] } | undefined,\n  { [key: string]: Function | Function[] } | undefined\n]) {\n  if (!args[0]) return args[1]\n  if (!args[1]) return args[0]\n\n  const dest: { [key: string]: Function | Function[] } = {}\n\n  for (let i = 2; i--;) {\n    const arg = args[i]\n    for (const event in arg) {\n      if (!arg[event]) continue\n\n      if (dest[event]) {\n        // Merge current listeners before (because we are iterating backwards).\n        // Note that neither \"target\" or \"source\" must be altered.\n        dest[event] = ([] as Function[]).concat(arg[event], dest[event])\n      } else {\n        // Straight assign.\n        dest[event] = arg[event]\n      }\n    }\n  }\n\n  return dest\n}\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('b-alert',{staticClass:\"alert alert-custom alert-white alert-shadow fade show gutter-b\",attrs:{\"show\":\"\",\"variant\":\"light\"}},[_c('div',{staticClass:\"alert-icon\"},[_c('span',{staticClass:\"svg-icon svg-icon-lg\"},[_c('inline-svg',{attrs:{\"src\":\"media/svg/icons/Tools/Compass.svg\"}})],1)]),_c('div',{staticClass:\"alert-text\"},[_c('b',[_vm._v(\"Tooltips\")]),_vm._v(\" The \"),_c('code',[_vm._v(\"v-tooltip\")]),_vm._v(\" component is useful for conveying information when a user hovers over an element. You can also programmatically control the display of tooltips through a \"),_c('code',[_vm._v(\"v-model\")]),_vm._v(\". When activated, tooltips display a text label identifying an element, such as a description of its function. \"),_c('a',{staticClass:\"font-weight-bold\",attrs:{\"href\":\"https://vuetifyjs.com/en/components/tooltips\",\"target\":\"_blank\"}},[_vm._v(\" See documentation. \")])])]),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-md-6\"},[_c('KTCodePreview',{attrs:{\"title\":'Alignment'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\" A tooltip can be aligned to any of the four sides of the activator element \")]),_c('div',{staticClass:\"text-center\"},[_c('v-tooltip',{attrs:{\"left\":\"\"},scopedSlots:_vm._u([{key:\"activator\",fn:function(ref){\nvar on = ref.on;\nreturn [_c('v-btn',_vm._g({staticClass:\"mr-4\",attrs:{\"color\":\"primary\",\"dark\":\"\"}},on),[_vm._v(\"Left\")])]}}])},[_c('span',[_vm._v(\"Left tooltip\")])]),_c('v-tooltip',{attrs:{\"top\":\"\"},scopedSlots:_vm._u([{key:\"activator\",fn:function(ref){\nvar on = ref.on;\nreturn [_c('v-btn',_vm._g({staticClass:\"mr-4\",attrs:{\"color\":\"primary\",\"dark\":\"\"}},on),[_vm._v(\"Top\")])]}}])},[_c('span',[_vm._v(\"Top tooltip\")])]),_c('v-tooltip',{attrs:{\"bottom\":\"\"},scopedSlots:_vm._u([{key:\"activator\",fn:function(ref){\nvar on = ref.on;\nreturn [_c('v-btn',_vm._g({staticClass:\"mr-4\",attrs:{\"color\":\"primary\",\"dark\":\"\"}},on),[_vm._v(\"Bottom\")])]}}])},[_c('span',[_vm._v(\"Bottom tooltip\")])]),_c('v-tooltip',{attrs:{\"right\":\"\"},scopedSlots:_vm._u([{key:\"activator\",fn:function(ref){\nvar on = ref.on;\nreturn [_c('v-btn',_vm._g({staticClass:\"mr-4\",attrs:{\"color\":\"primary\",\"dark\":\"\"}},on),[_vm._v(\"Right\")])]}}])},[_c('span',[_vm._v(\"Right tooltip\")])])],1)]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code1.html)+\" \")]},proxy:true}])})],1),_c('div',{staticClass:\"col-md-6\"},[_c('KTCodePreview',{attrs:{\"title\":'Visibility'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\" Tooltip visibility can be programmatically changed using \"),_c('code',[_vm._v(\"v-model\")]),_vm._v(\". \")]),_c('v-container',{staticClass:\"text-center\",attrs:{\"fluid\":\"\"}},[_c('v-row',{staticClass:\"flex\",attrs:{\"justify\":\"space-between\"}},[_c('v-col',{attrs:{\"cols\":\"12\"}},[_c('v-btn',{on:{\"click\":function($event){_vm.show = !_vm.show}}},[_vm._v(\"toggle\")])],1),_c('v-col',{staticClass:\"mt-12\",attrs:{\"cols\":\"12\"}},[_c('v-tooltip',{attrs:{\"top\":\"\"},scopedSlots:_vm._u([{key:\"activator\",fn:function(ref){\nvar on = ref.on;\nreturn [_c('v-btn',_vm._g({attrs:{\"icon\":\"\"}},on),[_c('v-icon',{attrs:{\"color\":\"grey lighten-1\"}},[_vm._v(\"mdi-cart\")])],1)]}}]),model:{value:(_vm.show),callback:function ($$v) {_vm.show=$$v},expression:\"show\"}},[_c('span',[_vm._v(\"Programmatic tooltip\")])])],1)],1)],1)]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code2.html)+\" \")]},proxy:true},{key:\"js\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code2.js)+\" \")]},proxy:true}])})],1)])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <b-alert\n      show\n      variant=\"light\"\n      class=\"alert alert-custom alert-white alert-shadow fade show gutter-b\"\n    >\n      <div class=\"alert-icon\">\n        <span class=\"svg-icon svg-icon-lg\">\n          <inline-svg src=\"media/svg/icons/Tools/Compass.svg\" />\n        </span>\n      </div>\n      <div class=\"alert-text\">\n        <b>Tooltips</b> The <code>v-tooltip</code> component is useful for\n        conveying information when a user hovers over an element. You can also\n        programmatically control the display of tooltips through a\n        <code>v-model</code>. When activated, tooltips display a text label\n        identifying an element, such as a description of its function.\n        <a\n          class=\"font-weight-bold\"\n          href=\"https://vuetifyjs.com/en/components/tooltips\"\n          target=\"_blank\"\n        >\n          See documentation.\n        </a>\n      </div>\n    </b-alert>\n\n    <div class=\"row\">\n      <div class=\"col-md-6\">\n        <KTCodePreview v-bind:title=\"'Alignment'\">\n          <template v-slot:preview>\n            <p>\n              A tooltip can be aligned to any of the four sides of the activator\n              element\n            </p>\n            <div class=\"text-center\">\n              <v-tooltip left>\n                <template v-slot:activator=\"{ on }\">\n                  <v-btn class=\"mr-4\" color=\"primary\" dark v-on=\"on\"\n                    >Left</v-btn\n                  >\n                </template>\n                <span>Left tooltip</span>\n              </v-tooltip>\n\n              <v-tooltip top>\n                <template v-slot:activator=\"{ on }\">\n                  <v-btn class=\"mr-4\" color=\"primary\" dark v-on=\"on\">Top</v-btn>\n                </template>\n                <span>Top tooltip</span>\n              </v-tooltip>\n\n              <v-tooltip bottom>\n                <template v-slot:activator=\"{ on }\">\n                  <v-btn class=\"mr-4\" color=\"primary\" dark v-on=\"on\"\n                    >Bottom</v-btn\n                  >\n                </template>\n                <span>Bottom tooltip</span>\n              </v-tooltip>\n\n              <v-tooltip right>\n                <template v-slot:activator=\"{ on }\">\n                  <v-btn class=\"mr-4\" color=\"primary\" dark v-on=\"on\"\n                    >Right</v-btn\n                  >\n                </template>\n                <span>Right tooltip</span>\n              </v-tooltip>\n            </div>\n          </template>\n          <template v-slot:html>\n            {{ code1.html }}\n          </template>\n        </KTCodePreview>\n      </div>\n\n      <div class=\"col-md-6\">\n        <KTCodePreview v-bind:title=\"'Visibility'\">\n          <template v-slot:preview>\n            <p>\n              Tooltip visibility can be programmatically changed using\n              <code>v-model</code>.\n            </p>\n            <v-container fluid class=\"text-center\">\n              <v-row class=\"flex\" justify=\"space-between\">\n                <v-col cols=\"12\">\n                  <v-btn @click=\"show = !show\">toggle</v-btn>\n                </v-col>\n\n                <v-col cols=\"12\" class=\"mt-12\">\n                  <v-tooltip v-model=\"show\" top>\n                    <template v-slot:activator=\"{ on }\">\n                      <v-btn icon v-on=\"on\">\n                        <v-icon color=\"grey lighten-1\">mdi-cart</v-icon>\n                      </v-btn>\n                    </template>\n                    <span>Programmatic tooltip</span>\n                  </v-tooltip>\n                </v-col>\n              </v-row>\n            </v-container>\n          </template>\n          <template v-slot:html>\n            {{ code2.html }}\n          </template>\n          <template v-slot:js>\n            {{ code2.js }}\n          </template>\n        </KTCodePreview>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport KTCodePreview from \"@/view/content/CodePreview.vue\";\nimport { SET_BREADCRUMB } from \"@/core/services/store/breadcrumbs.module\";\n\nexport default {\n  data() {\n    return {\n      code1: {\n        html: ` <div class=\"text-center\">\n  <v-tooltip left>\n    <template v-slot:activator=\"{ on }\">\n      <v-btn color=\"primary\" dark v-on=\"on\">Left</v-btn>\n    </template>\n    <span>Left tooltip</span>\n  </v-tooltip>\n\n  <v-tooltip top>\n    <template v-slot:activator=\"{ on }\">\n      <v-btn color=\"primary\" dark v-on=\"on\">Top</v-btn>\n    </template>\n    <span>Top tooltip</span>\n  </v-tooltip>\n\n  <v-tooltip bottom>\n    <template v-slot:activator=\"{ on }\">\n      <v-btn color=\"primary\" dark v-on=\"on\">Bottom</v-btn>\n    </template>\n    <span>Bottom tooltip</span>\n  </v-tooltip>\n\n  <v-tooltip right>\n    <template v-slot:activator=\"{ on }\">\n      <v-btn color=\"primary\" dark v-on=\"on\">Right</v-btn>\n    </template>\n    <span>Right tooltip</span>\n  </v-tooltip>\n</div>`\n      },\n\n      code2: {\n        html: `<v-container fluid class=\"text-center\">\n  <v-row\n    class=\"flex\"\n    justify=\"space-between\"\n  >\n    <v-col cols=\"12\">\n      <v-btn @click=\"show = !show\">toggle</v-btn>\n    </v-col>\n\n    <v-col cols=\"12\" class=\"mt-12\">\n      <v-tooltip v-model=\"show\" top>\n        <template v-slot:activator=\"{ on }\">\n          <v-btn icon v-on=\"on\">\n            <v-icon color=\"grey lighten-1\">mdi-cart</v-icon>\n          </v-btn>\n        </template>\n        <span>Programmatic tooltip</span>\n      </v-tooltip>\n    </v-col>\n  </v-row>\n</v-container>`,\n        js: `export default {\n  data () {\n    return {\n      show: false,\n    }\n  },\n}`\n      },\n      show: false\n    };\n  },\n  components: {\n    KTCodePreview\n  },\n  mounted() {\n    this.$store.dispatch(SET_BREADCRUMB, [\n      { title: \"Vuetify\", route: \"alerts\" },\n      { title: \"Tooltips\" }\n    ]);\n  }\n};\n</script>\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!./Tooltips.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!./Tooltips.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Tooltips.vue?vue&type=template&id=2bf8bd58&\"\nimport script from \"./Tooltips.vue?vue&type=script&lang=js&\"\nexport * from \"./Tooltips.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/* vuetify-loader */\nimport installComponents from \"!../../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VBtn } from 'vuetify/lib/components/VBtn';\nimport { VCol } from 'vuetify/lib/components/VGrid';\nimport { VContainer } from 'vuetify/lib/components/VGrid';\nimport { VIcon } from 'vuetify/lib/components/VIcon';\nimport { VRow } from 'vuetify/lib/components/VGrid';\nimport { VTooltip } from 'vuetify/lib/components/VTooltip';\ninstallComponents(component, {VBtn,VCol,VContainer,VIcon,VRow,VTooltip})\n"],"sourceRoot":""}