{"version":3,"sources":["webpack:///src/views/CustomDirectivesPage.vue","webpack:///./src/views/CustomDirectivesPage.vue?664e","webpack:///./src/views/CustomDirectivesPage.vue?621a","webpack:///./src/views/CustomDirectivesPage.vue?4e77","webpack:///./src/views/CustomDirectivesPage.vue","webpack:///./src/views/CustomDirectivesPage.vue?5c1e","webpack:///./src/views/CustomDirectivesPage.vue?d5f2","webpack:///./src/views/CustomDirectivesPage.vue?1365"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA;AACA;AACA;AACA,UADA,gBACA,EADA,EACA,OADA,EACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,WAHA,MAGA;AACA;AACA;AACA,SAXA,EAWA,sDAXA;AAYA;AAdA;AADA;AADA,G;;;;;;;;;;;;AC/BA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA,qBAAqB,iCAAiC;AACtD,cAAc,yBAAyB;AACvC,aAAa,2BAA2B;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,4CAA4C;AAChE,0BAA0B,4CAA4C;AACtE,wBAAwB;AACxB;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,eAAe;AACnC,0BAA0B,eAAe;AACzC;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,oDAAoD;AACxE,0BAA0B,oDAAoD;AAC9E;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA,gBAAgB,wFAAwF;AACxG;AACA,wBAAwB;AACxB;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,iDAAiD;AAC9D;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;ACnGA;AACA,kCAAkC,mBAAO,CAAC,wGAAmD;AAC7F;AACA;AACA,cAAc,QAAS,4BAA4B,wCAAwC,GAAG,iCAAiC,kBAAkB,wBAAwB,kFAAkF,0EAA0E,GAAG,qBAAqB,wBAAwB,gBAAgB,kCAAkC,GAAG;AAC1a;AACA;;;;;;;;;;;;ACNA;;AAEA;AACA,cAAc,mBAAO,CAAC,4uBAA4a;AAClc,4CAA4C,QAAS;AACrD;AACA;AACA,UAAU,mBAAO,CAAC,0HAA6D;AAC/E,8CAA8C,qCAAqC;AACnF;AACA,GAAG,KAAU,EAAE,E;;;;;;;;;;;;ACVf;AAAA;AAAA;AAAA;AAAA;AAAmG;AAC3B;AACL;AACc;;;AAGjF;AAC0F;AAC1F,gBAAgB,2GAAU;AAC1B,EAAE,0FAAM;AACR,EAAE,+FAAM;AACR,EAAE,wGAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACe,gF;;;;;;;;;;;;ACvCf;AAAA;AAAA,wCAAiS,CAAgB,qVAAG,EAAC,C;;;;;;;;;;;;ACArT;AAAA;AAAA;AAAA;AAA4f,CAAgB,uhBAAG,EAAC,C;;;;;;;;;;;;ACAhhB;AAAA;AAAA;AAAA;AAAA;AAAA","file":"js/custom-directive-page.js","sourcesContent":["<template>\n    <main class=\"customdirective\">\n        <h1 class=\"heading\">Custom Directives</h1>\n\n        <p class=\"paragraph\">Using Vue custom directive attributes to create custom functionality.</p>\n\n        <p class=\"paragraph\" v-fancy.delayed=\"{ className: 'fancyBackground', delay: 3000 }\">Using a Vue plugin to set a custom directive on this paragraph.</p>\n\n        <p\n            class=\"paragraph customdirective__body\"\n            v-highlight=\"{ color: 'red' }\">\n            Simple example with one object value.\n        </p>\n\n        <p\n            class=\"paragraph customdirective__body\"\n            v-highlight:background=\"{ color: 'deeppink', backgroundColor: 'deepskyblue' }\">\n            Example directive with a directive argument 'background' and multiple object values.\n        </p>\n        \n        <p\n            class=\"paragraph customdirective__body\"\n            v-highlight:background.delayed=\"{ color: 'white', backgroundColor: 'deeppink', delay: 2000, classname: 'has-hightlight' }\">\n            Example with a directive argument and a directive modifier. And also adding a classname to the element.\n        </p>\n\n        <p class=\"paragraph customdirective__body\">Directives can be set globally or localy.</p>\n    </main>\n</template>\n\n<script>\nexport default {\n    directives: {\n        \"highlight\": {\n            bind(el, binding) {                    \n                setTimeout(() => {\n                    if(binding.value.classname != undefined) {\n                        el.classList.add(binding.value.classname);\n                    }\n\n                    if (binding.arg == 'background') {\n                        el.style.color = binding.value.color;\n                        el.style.backgroundColor = binding.value.backgroundColor;\n                    } else {\n                        el.style.color = binding.value.color;\n                    }\n                }, binding.modifiers['delayed'] ? binding.value.delay : 0);\t\n            }\n        } \n    }\n};\n</script>\n\n<style lang=\"scss\">\n.customdirective__total {\n    font-family: \"Roboto\", sans-serif;\n}\n\n.customdirective__body[style] {\n    padding: 10px;\n    border-radius: 10px;\n    -webkit-transition: background-color .5s ease-in-out, color .5s ease-in-out;\n    transition: background-color .5s ease-in-out, color .5s ease-in-out;\n}\n\np.fancyBackground {\n    border-radius: 10px;\n    color: map-get($colors, 05);\n    background-color: map-get($colors, 01);\n}\n</style>","var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"main\", { staticClass: \"customdirective\" }, [\n    _c(\"h1\", { staticClass: \"heading\" }, [_vm._v(\"Custom Directives\")]),\n    _c(\"p\", { staticClass: \"paragraph\" }, [\n      _vm._v(\n        \"Using Vue custom directive attributes to create custom functionality.\"\n      )\n    ]),\n    _c(\n      \"p\",\n      {\n        directives: [\n          {\n            name: \"fancy\",\n            rawName: \"v-fancy.delayed\",\n            value: { className: \"fancyBackground\", delay: 3000 },\n            expression: \"{ className: 'fancyBackground', delay: 3000 }\",\n            modifiers: { delayed: true }\n          }\n        ],\n        staticClass: \"paragraph\"\n      },\n      [\n        _vm._v(\n          \"Using a Vue plugin to set a custom directive on this paragraph.\"\n        )\n      ]\n    ),\n    _c(\n      \"p\",\n      {\n        directives: [\n          {\n            name: \"highlight\",\n            rawName: \"v-highlight\",\n            value: { color: \"red\" },\n            expression: \"{ color: 'red' }\"\n          }\n        ],\n        staticClass: \"paragraph customdirective__body\"\n      },\n      [_vm._v(\" Simple example with one object value. \")]\n    ),\n    _c(\n      \"p\",\n      {\n        directives: [\n          {\n            name: \"highlight\",\n            rawName: \"v-highlight:background\",\n            value: { color: \"deeppink\", backgroundColor: \"deepskyblue\" },\n            expression: \"{ color: 'deeppink', backgroundColor: 'deepskyblue' }\",\n            arg: \"background\"\n          }\n        ],\n        staticClass: \"paragraph customdirective__body\"\n      },\n      [\n        _vm._v(\n          \" Example directive with a directive argument 'background' and multiple object values. \"\n        )\n      ]\n    ),\n    _c(\n      \"p\",\n      {\n        directives: [\n          {\n            name: \"highlight\",\n            rawName: \"v-highlight:background.delayed\",\n            value: {\n              color: \"white\",\n              backgroundColor: \"deeppink\",\n              delay: 2000,\n              classname: \"has-hightlight\"\n            },\n            expression:\n              \"{ color: 'white', backgroundColor: 'deeppink', delay: 2000, classname: 'has-hightlight' }\",\n            arg: \"background\",\n            modifiers: { delayed: true }\n          }\n        ],\n        staticClass: \"paragraph customdirective__body\"\n      },\n      [\n        _vm._v(\n          \" Example with a directive argument and a directive modifier. And also adding a classname to the element. \"\n        )\n      ]\n    ),\n    _c(\"p\", { staticClass: \"paragraph customdirective__body\" }, [\n      _vm._v(\"Directives can be set globally or localy.\")\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".customdirective__total {\\n  font-family: \\\"Roboto\\\", sans-serif;\\n}\\n.customdirective__body[style] {\\n  padding: 10px;\\n  border-radius: 10px;\\n  -webkit-transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;\\n  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;\\n}\\np.fancyBackground {\\n  border-radius: 10px;\\n  color: #eee;\\n  background-color: deepskyblue;\\n}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../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!./CustomDirectivesPage.vue?vue&type=style&index=0&lang=scss&\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"3708b358\", content, false, {\"sourceMap\":false,\"shadowMode\":false});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n   module.hot.accept(\"!!../../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!./CustomDirectivesPage.vue?vue&type=style&index=0&lang=scss&\", function() {\n     var newContent = require(\"!!../../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!./CustomDirectivesPage.vue?vue&type=style&index=0&lang=scss&\");\n     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n     update(newContent);\n   });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}","import { render, staticRenderFns } from \"./CustomDirectivesPage.vue?vue&type=template&id=758e81be&\"\nimport script from \"./CustomDirectivesPage.vue?vue&type=script&lang=js&\"\nexport * from \"./CustomDirectivesPage.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CustomDirectivesPage.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\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/opt/build/repo/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!api.isRecorded('758e81be')) {\n      api.createRecord('758e81be', component.options)\n    } else {\n      api.reload('758e81be', component.options)\n    }\n    module.hot.accept(\"./CustomDirectivesPage.vue?vue&type=template&id=758e81be&\", function () {\n      api.rerender('758e81be', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"src/views/CustomDirectivesPage.vue\"\nexport default component.exports","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../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!./CustomDirectivesPage.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../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!./CustomDirectivesPage.vue?vue&type=script&lang=js&\"","import mod from \"-!../../node_modules/vue-style-loader/index.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!./CustomDirectivesPage.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../../node_modules/vue-style-loader/index.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!./CustomDirectivesPage.vue?vue&type=style&index=0&lang=scss&\"","export * from \"-!../../node_modules/cache-loader/dist/cjs.js?{\\\"cacheDirectory\\\":\\\"node_modules/.cache/vue-loader\\\",\\\"cacheIdentifier\\\":\\\"67623361-vue-loader-template\\\"}!../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CustomDirectivesPage.vue?vue&type=template&id=758e81be&\""],"sourceRoot":""}