{"version":3,"sources":["webpack:///./src/components/Page-header.vue","webpack:///src/components/Page-header.vue","webpack:///./src/components/Page-header.vue?95ad","webpack:///./src/components/Page-header.vue?f09d","webpack:///./src/views/pages/ui/avatars.vue","webpack:///src/views/pages/ui/avatars.vue","webpack:///./src/views/pages/ui/avatars.vue?4022","webpack:///./src/views/pages/ui/avatars.vue?ab4f"],"names":["render","_vm","this","_c","_self","staticClass","class","layoutType","_v","_s","title","attrs","items","staticRenderFns","components","props","type","String","default","Array","computed","layoutComputed","component","page","meta","name","content","appConfig","description","data","text","href","active","Layout","PageHeader"],"mappings":"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","file":"js/chunk-334ff46e.4b7b106f.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-12\"},[_c('div',{staticClass:\"page-title-box\",class:{\n        'page-title-box-alt':\n          _vm.layoutType !== 'vertical' && _vm.layoutType !== 'two-column',\n      }},[_c('h4',{staticClass:\"page-title\"},[_vm._v(_vm._s(_vm.title))]),_c('div',{staticClass:\"page-title-right\"},[_c('b-breadcrumb',{staticClass:\"m-0\",attrs:{\"items\":_vm.items}})],1)])])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<script>\nimport { layoutComputed } from \"@/state/helpers\";\n\n/**\n * Page-header component\n */\nexport default {\n  components: {},\n  props: {\n    title: {\n      type: String,\n      default: \"\",\n    },\n    items: {\n      type: Array,\n      default: () => {\n        return [];\n      },\n    },\n  },\n  computed: {\n    ...layoutComputed,\n  },\n};\n</script>\n\n<template>\n  <!-- start page title -->\n  <div class=\"row\">\n    <div class=\"col-12\">\n      <div\n        class=\"page-title-box\"\n        :class=\"{\n          'page-title-box-alt':\n            layoutType !== 'vertical' && layoutType !== 'two-column',\n        }\"\n      >\n        <h4 class=\"page-title\">{{ title }}</h4>\n        <div class=\"page-title-right\">\n          <b-breadcrumb :items=\"items\" class=\"m-0\"></b-breadcrumb>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- end page title -->\n</template>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Page-header.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Page-header.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Page-header.vue?vue&type=template&id=14ebe7ac\"\nimport script from \"./Page-header.vue?vue&type=script&lang=js\"\nexport * from \"./Page-header.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 render(){var _vm=this,_c=_vm._self._c;return _c('Layout',[_c('PageHeader',{attrs:{\"title\":_vm.title,\"items\":_vm.items}}),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-xl-6\"},[_c('div',{staticClass:\"card\"},[_c('div',{staticClass:\"card-body\"},[_c('h4',{staticClass:\"header-title\"},[_vm._v(\"Sizing - Images\")]),_c('p',{staticClass:\"sub-header\"},[_vm._v(\" Create and group avatars of different sizes and shapes with the css classes. Using Bootstrap's naming convention, you can control size of avatar including standard avatar, or scale it up to different sizes. \")]),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-md-3\"},[_c('b-avatar',{attrs:{\"rounded\":\"\",\"src\":\"@/assets/images/users/avatar-2.jpg\",\"size\":\"sm\"}}),_c('p',[_c('code',[_vm._v(\"size=\\\"sm\\\" rounded\")])])],1),_c('div',{staticClass:\"col-md-3\"},[_c('b-avatar',{attrs:{\"rounded\":\"\",\"src\":\"@/assets/images/users/avatar-4.jpg\",\"size\":\"md\"}}),_c('p',[_c('code',[_vm._v(\"size=\\\"md\\\" rounded\")])])],1),_c('div',{staticClass:\"col-md-3\"},[_c('b-avatar',{attrs:{\"rounded\":\"\",\"src\":\"@/assets/images/users/avatar-5.jpg\",\"size\":\"lg\"}}),_c('p',[_c('code',[_vm._v(\"size=\\\"lg\\\" rounded\")])])],1)])])])]),_c('div',{staticClass:\"col-xl-6\"},[_c('div',{staticClass:\"card\"},[_c('div',{staticClass:\"card-body\"},[_c('h4',{staticClass:\"header-title\"},[_vm._v(\"Rounded Circle\")]),_c('p',{staticClass:\"sub-header\"},[_vm._v(\" Using an additional class \"),_c('code',[_vm._v(\".rounded-circle\")]),_vm._v(\" in \"),_c('code',[_vm._v(\"<img>\")]),_vm._v(\" element creates the rounded avatar. \")]),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-md-4\"},[_c('b-avatar',{attrs:{\"src\":\"@/assets/images/users/avatar-7.jpg\",\"alt\":\"image\",\"size\":\"md\"}}),_c('p',{staticClass:\"mt-1\"},[_c('code',[_vm._v(\"size=\\\"md\\\"\")])])],1),_c('div',{staticClass:\"col-md-4\"},[_c('b-avatar',{attrs:{\"src\":\"@/assets/images/users/avatar-8.jpg\",\"alt\":\"image\",\"size\":\"lg\"}}),_c('p',[_c('code',[_vm._v(\"size=\\\"lg\\\"\")])])],1),_c('div',{staticClass:\"col-md-4\"},[_c('b-avatar',{attrs:{\"src\":\"@/assets/images/users/avatar-9.jpg\",\"alt\":\"image\",\"size\":\"6em\"}}),_c('p',{staticClass:\"mb-0\"},[_c('code',[_vm._v(\" size=\\\"6em\\\"\")])])],1)])])])])]),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-xl-6\"},[_c('div',{staticClass:\"card\"},[_c('div',{staticClass:\"card-body\"},[_c('h4',{staticClass:\"header-title\"},[_vm._v(\"Sizing - Background Color\")]),_c('p',{staticClass:\"sub-header\"},[_vm._v(\" Using utilities classes of background e.g. \"),_c('code',[_vm._v(\"bg-*\")]),_vm._v(\" allows you to have any background color as well. \")]),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-md-3\"},[_c('b-avatar',{attrs:{\"rounded\":\"\",\"size\":\"sm\",\"variant\":\"primary\"}},[_vm._v(\"sm\")]),_c('p',{staticClass:\"mb-2 font-14 mt-1\"},[_vm._v(\"Using \"),_c('code',[_vm._v(\"size=\\\"sm\\\"\")])])],1),_c('div',{staticClass:\"col-md-3\"},[_c('b-avatar',{staticClass:\"bg-soft-info text-info\",attrs:{\"rounded\":\"\",\"size\":\"md\"}},[_c('span',{},[_vm._v(\"MD\")])]),_c('p',{staticClass:\"mb-0 font-14 mt-1\"},[_vm._v(\"Using \"),_c('code',[_vm._v(\"size=\\\"md\\\"\")])])],1),_c('div',{staticClass:\"col-md-3\"},[_c('b-avatar',{staticClass:\"bg-danger font-22\",attrs:{\"rounded\":\"\",\"size\":\"lg\"}},[_c('span',{},[_vm._v(\"LG\")])]),_c('p',{staticClass:\"mb-0 font-14 mt-1\"},[_vm._v(\"Using \"),_c('code',[_vm._v(\"size=\\\"lg\\\"\")])])],1)])])])]),_c('div',{staticClass:\"col-xl-6\"},[_c('div',{staticClass:\"card\"},[_c('div',{staticClass:\"card-body\"},[_c('h4',{staticClass:\"header-title\"},[_vm._v(\"Rounded Circle Background\")]),_c('p',{staticClass:\"sub-header\"},[_vm._v(\" Using an additional class \"),_c('code',[_vm._v(\".rounded-circle\")]),_vm._v(\" in \"),_c('code',[_vm._v(\"<img>\")]),_vm._v(\" element creates the rounded avatar. \")]),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-md-4\"},[_c('b-avatar',{staticClass:\"bg-soft-secondary text-secondary font-20\",attrs:{\"size\":\"md\"}},[_c('span',{},[_vm._v(\"MD\")])]),_c('p',{staticClass:\"mb-0 font-14 mt-1\"},[_vm._v(\"Using \"),_c('code',[_vm._v(\"size=\\\"md\\\"\")])])],1),_c('div',{staticClass:\"col-md-4\"},[_c('b-avatar',{staticClass:\"text-dark font-22\",attrs:{\"size\":\"lg\",\"variant\":\"light\"}},[_c('span',{},[_vm._v(\"LG\")])]),_c('p',{staticClass:\"mb-0 font-14 mt-1\"},[_vm._v(\"Using \"),_c('code',[_vm._v(\"size=\\\"lg\\\"\")])])],1)])])])])]),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-12\"},[_c('div',{staticClass:\"card\"},[_c('div',{staticClass:\"card-body\"},[_c('h4',{staticClass:\"header-title\"},[_vm._v(\"Images Shapes\")]),_c('p',{staticClass:\"sub-header\"},[_vm._v(\"Avatars with different sizes and shapes.\")]),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-sm-2\"},[_c('b-avatar',{attrs:{\"rounded\":\"\",\"src\":\"@/assets/images/small/img-2.jpg\",\"alt\":\"image\",\"size\":\"9em\"}}),_c('p',{staticClass:\"mb-0\"},[_c('code',[_vm._v(\"rounded\")])])],1),_c('div',{staticClass:\"col-sm-2 text-center\"},[_c('b-avatar',{attrs:{\"rounded\":\"\",\"src\":\"@/assets/images/users/avatar-5.jpg\",\"alt\":\"image\",\"size\":\"8em\"}}),_c('p',{staticClass:\"mb-0\"},[_c('code',[_vm._v(\"rounded\")])])],1),_c('div',{staticClass:\"col-sm-2 text-center\"},[_c('b-avatar',{attrs:{\"square\":\"\",\"src\":\"@/assets/images/users/avatar-7.jpg\",\"alt\":\"image\",\"size\":\"9em\"}}),_c('p',{staticClass:\"mb-0\"},[_c('code',[_vm._v(\"square\")])])],1)])])])])])],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<script>\nimport Layout from \"../../layouts/main\";\nimport PageHeader from \"@/components/Page-header\";\nimport appConfig from \"../../../../app.config\";\n\n/**\n * Avatars component\n */\nexport default {\n  page: {\n    title: \"Avatars\",\n    meta: [{ name: \"description\", content: appConfig.description }]\n  },\n  data() {\n    return {\n      title: \"Avatars\",\n      items: [\n        {\n          text: \"Minton\",\n          href: \"/\",\n        },\n        {\n          text: \"UI\",\n          href: \"/\",\n        },\n        {\n          text: \"Avatars\",\n          active: true,\n        },\n      ],\n    };\n  },\n  components: {\n    Layout,\n    PageHeader,\n  },\n};\n</script>\n\n<template>\n  <Layout>\n    <PageHeader :title=\"title\" :items=\"items\" />\n    <div class=\"row\">\n      <div class=\"col-xl-6\">\n        <div class=\"card\">\n          <div class=\"card-body\">\n            <h4 class=\"header-title\">Sizing - Images</h4>\n            <p class=\"sub-header\">\n              Create and group avatars of different sizes and shapes with the\n              css classes. Using Bootstrap's naming convention, you can control\n              size of avatar including standard avatar, or scale it up to\n              different sizes.\n            </p>\n\n            <div class=\"row\">\n              <div class=\"col-md-3\">\n                <b-avatar\n                  rounded\n                  src=\"@/assets/images/users/avatar-2.jpg\"\n                  size=\"sm\"\n                ></b-avatar>\n                <p>\n                  <code>size=\"sm\" rounded</code>\n                </p>\n              </div>\n              <div class=\"col-md-3\">\n                <b-avatar\n                  rounded\n                  src=\"@/assets/images/users/avatar-4.jpg\"\n                  size=\"md\"\n                ></b-avatar>\n                <p>\n                  <code>size=\"md\" rounded</code>\n                </p>\n              </div>\n\n              <div class=\"col-md-3\">\n                <b-avatar\n                  rounded\n                  src=\"@/assets/images/users/avatar-5.jpg\"\n                  size=\"lg\"\n                ></b-avatar>\n                <p>\n                  <code>size=\"lg\" rounded</code>\n                </p>\n              </div>\n            </div>\n            <!-- end row-->\n          </div>\n        </div>\n      </div>\n      <div class=\"col-xl-6\">\n        <div class=\"card\">\n          <div class=\"card-body\">\n            <h4 class=\"header-title\">Rounded Circle</h4>\n            <p class=\"sub-header\">\n              Using an additional class <code>.rounded-circle</code> in\n              <code>&lt;img&gt;</code> element creates the rounded avatar.\n            </p>\n\n            <div class=\"row\">\n              <div class=\"col-md-4\">\n                <b-avatar\n                  src=\"@/assets/images/users/avatar-7.jpg\"\n                  alt=\"image\"\n                  size=\"md\"\n                ></b-avatar>\n                <p class=\"mt-1\">\n                  <code>size=\"md\"</code>\n                </p>\n              </div>\n\n              <div class=\"col-md-4\">\n                <b-avatar\n                  src=\"@/assets/images/users/avatar-8.jpg\"\n                  alt=\"image\"\n                  size=\"lg\"\n                ></b-avatar>\n                <p>\n                  <code>size=\"lg\"</code>\n                </p>\n              </div>\n\n              <div class=\"col-md-4\">\n                <b-avatar\n                  src=\"@/assets/images/users/avatar-9.jpg\"\n                  alt=\"image\"\n                  size=\"6em\"\n                ></b-avatar>\n                <p class=\"mb-0\">\n                  <code> size=\"6em\"</code>\n                </p>\n              </div>\n            </div>\n            <!-- end row-->\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- end row -->\n\n    <div class=\"row\">\n      <div class=\"col-xl-6\">\n        <div class=\"card\">\n          <div class=\"card-body\">\n            <h4 class=\"header-title\">Sizing - Background Color</h4>\n            <p class=\"sub-header\">\n              Using utilities classes of background e.g.\n              <code>bg-*</code> allows you to have any background color as well.\n            </p>\n\n            <div class=\"row\">\n              <div class=\"col-md-3\">\n                <b-avatar rounded size=\"sm\" variant=\"primary\">sm</b-avatar>\n\n                <p class=\"mb-2 font-14 mt-1\">Using <code>size=\"sm\"</code></p>\n              </div>\n              <div class=\"col-md-3\">\n                <b-avatar rounded size=\"md\" class=\"bg-soft-info text-info\"\n                  ><span class=\"\">MD</span></b-avatar\n                >\n\n                <p class=\"mb-0 font-14 mt-1\">Using <code>size=\"md\"</code></p>\n              </div>\n\n              <div class=\"col-md-3\">\n                <b-avatar rounded size=\"lg\" class=\"bg-danger font-22\"\n                  ><span class=\"\">LG</span></b-avatar\n                >\n                <p class=\"mb-0 font-14 mt-1\">Using <code>size=\"lg\"</code></p>\n              </div>\n            </div>\n            <!-- end row-->\n          </div>\n        </div>\n      </div>\n      <div class=\"col-xl-6\">\n        <div class=\"card\">\n          <div class=\"card-body\">\n            <h4 class=\"header-title\">Rounded Circle Background</h4>\n            <p class=\"sub-header\">\n              Using an additional class <code>.rounded-circle</code> in\n              <code>&lt;img&gt;</code> element creates the rounded avatar.\n            </p>\n\n            <div class=\"row\">\n              <div class=\"col-md-4\">\n                <b-avatar\n                  size=\"md\"\n                  class=\"bg-soft-secondary text-secondary font-20\"\n                  ><span class=\"\">MD</span></b-avatar\n                >\n\n                <p class=\"mb-0 font-14 mt-1\">Using <code>size=\"md\"</code></p>\n              </div>\n\n              <div class=\"col-md-4\">\n                <b-avatar size=\"lg\" variant=\"light\" class=\"text-dark font-22\"\n                  ><span class=\"\">LG</span></b-avatar\n                >\n\n                <p class=\"mb-0 font-14 mt-1\">Using <code>size=\"lg\"</code></p>\n              </div>\n            </div>\n            <!-- end row-->\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- end row -->\n\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <div class=\"card\">\n          <div class=\"card-body\">\n            <h4 class=\"header-title\">Images Shapes</h4>\n            <p class=\"sub-header\">Avatars with different sizes and shapes.</p>\n\n            <div class=\"row\">\n              <div class=\"col-sm-2\">\n                <b-avatar\n                  rounded\n                  src=\"@/assets/images/small/img-2.jpg\"\n                  alt=\"image\"\n                  size=\"9em\"\n                ></b-avatar>\n                <p class=\"mb-0\">\n                  <code>rounded</code>\n                </p>\n              </div>\n\n              <div class=\"col-sm-2 text-center\">\n                <b-avatar\n                  rounded\n                  src=\"@/assets/images/users/avatar-5.jpg\"\n                  alt=\"image\"\n                  size=\"8em\"\n                ></b-avatar>\n                <p class=\"mb-0\">\n                  <code>rounded</code>\n                </p>\n              </div>\n\n              <div class=\"col-sm-2 text-center\">\n                <b-avatar\n                  square\n                  src=\"@/assets/images/users/avatar-7.jpg\"\n                  alt=\"image\"\n                  size=\"9em\"\n                ></b-avatar>\n                <p class=\"mb-0\">\n                  <code>square</code>\n                </p>\n              </div>\n            </div>\n            <!-- end row-->\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- end row -->\n  </Layout>\n</template>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./avatars.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./avatars.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./avatars.vue?vue&type=template&id=c1c7f6ca\"\nimport script from \"./avatars.vue?vue&type=script&lang=js\"\nexport * from \"./avatars.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"],"sourceRoot":""}