{"version":3,"sources":["webpack:///./src/components/SpeakolTable.vue?e6f3","webpack:///./src/components/SpeakolTable.vue?ca2a","webpack:///src/components/SpeakolTable.vue","webpack:///./src/components/SpeakolTable.vue?c5d1","webpack:///./src/components/SpeakolTable.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","data","_t","class","total","_v","attrs","on","paginationChanged","pageCounts","model","value","callback","$$v","itemsPerPage","expression","_m","_e","staticRenderFns","name","watch","$emit","val","props","type","Object","required","methods","page","component"],"mappings":"2IAAA,W,yCCAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,UAAU,CAACF,EAAG,MAAM,CAACE,YAAY,uBAAuB,CAACF,EAAG,MAAM,CAACE,YAAY,SAAS,CAACF,EAAG,MAAM,CAACE,YAAY,oBAAoB,CAAEN,EAAIO,KAAU,MAAEH,EAAG,QAAQ,CAACE,YAAY,mCAAmC,CAACF,EAAG,QAAQ,CAACE,YAAY,eAAe,CAACN,EAAIQ,GAAG,UAAU,GAAGJ,EAAG,QAAQ,CAACE,YAAY,sEAAsEG,MAAM,CAAC,cAAeT,EAAIO,KAAKG,MAAQ,KAAK,CAACV,EAAIQ,GAAG,QAAQ,KAAK,CAAC,MAAQR,EAAIO,KAAKA,QAAQ,KAAKH,EAAG,MAAM,CAACE,YAAY,cAAc,CAACN,EAAIW,GAAG,uDAAwDX,EAAIO,KAAKG,MAAQ,GAAIN,EAAG,MAAM,CAACA,EAAG,aAAa,CAACQ,MAAM,CAAC,KAAOZ,EAAIO,KAAK,MAAQ,GAAGM,GAAG,CAAC,yBAAyBb,EAAIc,qBAAqBV,EAAG,MAAM,CAACE,YAAY,oBAAoB,CAACF,EAAG,MAAM,CAACE,YAAY,kBAAkB,CAACF,EAAG,WAAW,CAACE,YAAY,6BAA6BM,MAAM,CAAC,QAAUZ,EAAIe,WAAW,MAAQ,QAAQC,MAAM,CAACC,MAAOjB,EAAgB,aAAEkB,SAAS,SAAUC,GAAMnB,EAAIoB,aAAaD,GAAKE,WAAW,mBAAmB,GAAGrB,EAAIsB,GAAG,MAAM,GAAGtB,EAAIuB,QACzmCC,EAAkB,CAAC,WAAa,IAAIxB,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,kBAAkB,CAACF,EAAG,OAAO,CAACE,YAAY,aAAa,CAACN,EAAIW,GAAG,mBCyC/L,GACEc,KAAM,gBACNlB,KAFF,WAGI,MAAO,CACLQ,WAAY,CAAC,GAAI,GAAI,GAAI,KACzBK,aAAc,KAGlBM,MAAO,CACLN,aADJ,SACA,GACMnB,KAAK0B,MAAM,yBAA0BC,KAGzCC,MAAO,CACLtB,KAAM,CACJuB,KAAMC,OACNC,UAAU,IAGdC,QAAS,CACPnB,kBADJ,SACA,GACMb,KAAK0B,MAAM,yBAA0BO,MC/D2S,I,wBCQlVC,EAAY,eACd,EACApC,EACAyB,GACA,EACA,KACA,WACA,MAIa,aAAAW,E","file":"js/chunk-4c7bf692.5df5dd00.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/index.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!./SpeakolTable.vue?vue&type=style&index=0&id=3a8ab735&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"w-full\"},[_c('div',{staticClass:\"table-parent w-full\"},[_c('div',{staticClass:\"table\"},[_c('div',{staticClass:\"table-responsive\"},[(_vm.data.total)?_c('table',{staticClass:\"table border-collapse text-left\"},[_c('thead',{staticClass:\"flex w-full\"},[_vm._t(\"thead\")],2),_c('tbody',{staticClass:\"flex flex-col items-center justify-between overflow-y-scroll w-full\",class:{'h-60-screen': _vm.data.total > 10}},[_vm._t(\"tbody\",null,{\"items\":_vm.data.data})],2)]):_c('div',{staticClass:\"no-records\"},[_vm._v(\"\\n          There are no records.\\n        \")])])])]),(_vm.data.total > 10)?_c('div',[_c('pagination',{attrs:{\"data\":_vm.data,\"limit\":1},on:{\"pagination-change-page\":_vm.paginationChanged}}),_c('div',{staticClass:\"show-rows-parent\"},[_c('div',{staticClass:\"v-selet-parent\"},[_c('v-select',{staticClass:\"pagination-selector w-full\",attrs:{\"options\":_vm.pageCounts,\"label\":\"name\"},model:{value:(_vm.itemsPerPage),callback:function ($$v) {_vm.itemsPerPage=$$v},expression:\"itemsPerPage\"}})],1),_vm._m(0)])],1):_vm._e()])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"v-select-title\"},[_c('span',{staticClass:\"show-rows\"},[_vm._v(\"Show Rows\")])])}]\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"w-full\">\n    <div class=\"table-parent w-full\">\n      <div class=\"table\">\n        <div class=\"table-responsive\">\n          <table v-if=\"data.total\" class=\"table border-collapse text-left\">\n            <thead class=\"flex w-full\">\n            <slot name=\"thead\"></slot>\n            </thead>\n            <tbody class=\"flex flex-col items-center justify-between overflow-y-scroll w-full\"\n                   :class=\"{'h-60-screen': data.total > 10}\">\n            <slot name=\"tbody\" :items=\"data.data\"></slot>\n            </tbody>\n          </table>\n          <div v-else class=\"no-records\">\n            There are no records.\n          </div>\n          <!-- <vs-alert v-else class=\"w-full\" color=\"danger\" title=\"Danger\" active=\"true\">\n            There are no records.\n          </vs-alert> -->\n        </div>\n      </div>\n    </div>\n\n    <div v-if=\"data.total > 10\">\n      <pagination :data=\"data\" :limit=\"1\" @pagination-change-page=\"paginationChanged\"></pagination>\n\n      <div class=\"show-rows-parent\">\n        <div class=\"v-selet-parent\">\n          <v-select :options=\"pageCounts\" label=\"name\" class=\"pagination-selector w-full\" v-model=\"itemsPerPage\"></v-select>\n        </div>\n\n        <div class=\"v-select-title\">\n          <span class=\"show-rows\">Show Rows</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n\n<script>\nexport default {\n  name: 'speakol-table',\n  data () {\n    return {\n      pageCounts: [10, 25, 50, 100],\n      itemsPerPage: 10\n    }\n  },\n  watch: {\n    itemsPerPage (val) {\n      this.$emit('items-per-page-changed', val)\n    }\n  },\n  props: {\n    data: {\n      type: Object,\n      required: true\n    }\n  },\n  methods: {\n    paginationChanged (page) {\n      this.$emit('pagination-change-page', page)\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.h-60-screen {\n  max-height: 100vh;\n}\n// header background\n.tbl-header-background {\n  background-color: rgba(0, 146, 215, 0.06);\n}\n// content background\n.tbl-content-background {\n  background: rgba(0, 146, 215, 0.03);\n}\n// table scroll x\n.table-responsive {\n  // max-width: 1156px;\n  overflow-x: auto;\n}\n\ntable,\n.table {\n  width: 100% !important;\n}\n\n.table-parent {\n  // height:auto;\n  overflow-x: auto;\n  margin-right: 13px;\n}\n// customize scrolling\n.table-responsive::-webkit-scrollbar-track {\n  border-radius: 10px !important;\n  background-color: #f5f5f5 !important;\n}\n\n.table-responsive::-webkit-scrollbar {\n  height: 6px !important;\n  background-color: #f5f5f5 !important;\n}\n\n.table-responsive::-webkit-scrollbar-thumb {\n  border-radius: 10px !important;\n  background-color: lightgrey !important;\n}\n// pagination\n.pagination {\n  float: right;\n  display: flex;\n  margin-top: 10px;\n  padding: 5px 5px 5px 5px;\n  background-color: rgba(57, 176, 222, 0.106261);\n  border-radius: 50px;\n\n  /deep/ a {\n    color: black;\n  }\n\n  /deep/ li {\n    margin-right: 10px;\n    margin-left: 10px;\n  }\n\n  /deep/ .active {\n    cursor: pointer;\n    background-color: #4492e7;\n    border-radius: 100%;\n    padding: 1px 9px;\n\n    /deep/ a {\n      color: white;\n    }\n  }\n}\n// count rows v-select\n.v-selet-parent {\n  float: right;\n  display: flex;\n  margin-top: 10px;\n  margin-right: 20px;\n\n  /deep/ .vs__clear {\n    display: none;\n  }\n\n  /deep/ .vs__dropdown-toggle {\n    border-radius: 100px;\n    border: 1px solid #d9d9d9;\n    padding: 0;\n  }\n\n  /deep/ .vs__actions {\n    padding: 0 6px 0 12px;\n  }\n\n  /deep/ .vs--single .vs__selected {\n    margin-top: 0;\n  }\n}\n// count rows title\n.v-select-title {\n  float: right;\n  margin-top: 17px;\n  margin-right: 10px;\n}\n// medium screens\n@media (min-width: 1450px) {\n  .table-responsive {\n    // max-width: 1556px;\n    // overflow-x: auto\n  }\n}\n// mobile version\n@media (max-width: 768px) {\n  .table-responsive {\n    max-width: 390px;\n    overflow-x: auto;\n  }\n\n  .pagination {\n    float: none;\n    margin-bottom: 10px;\n  }\n\n  .v-selet-parent {\n    margin-right: 70px;\n  }\n}\n\n.no-records {\n  text-align: center;\n  color: rgba(0, 0, 0, 0.56);\n  font-weight: normal;\n  font-size: 18px;\n}\n</style>\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!./SpeakolTable.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!./SpeakolTable.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./SpeakolTable.vue?vue&type=template&id=3a8ab735&scoped=true&\"\nimport script from \"./SpeakolTable.vue?vue&type=script&lang=js&\"\nexport * from \"./SpeakolTable.vue?vue&type=script&lang=js&\"\nimport style0 from \"./SpeakolTable.vue?vue&type=style&index=0&id=3a8ab735&lang=scss&scoped=true&\"\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  \"3a8ab735\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}