lv2-datatable/dist/DataTable.esm.js

Integrate the Laravel datatables with your Vue app without using JQuery. It can handle listing data locally and remote.

const debounce = (func, wait, immediate) => {
  let timeout, args, context, timestamp, result;
  if (null == wait) wait = 100;

  function later() {
    let last = Date.now() - timestamp;

    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;

      if (!immediate) {
        result = func.apply(context, args);
        context = args = null;
      }
    }
  }

  let debounced = function () {
    context = this;
    args = arguments;
    timestamp = Date.now();
    let callNow = immediate && !timeout;
    if (!timeout) timeout = setTimeout(later, wait);

    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };

  debounced.clear = function () {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
  };

  debounced.flush = function () {
    if (timeout) {
      result = func.apply(context, args);
      context = args = null;
      clearTimeout(timeout);
      timeout = null;
    }
  };

  return debounced;
};

//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var script$1 = {
  name: "Paginate",
  props: {
    value: {
      type: Number
    },
    pageCount: {
      type: Number,
      required: true
    },
    forcePage: {
      type: Number
    },
    clickHandler: {
      type: Function,
      default: () => {}
    },
    pageRange: {
      type: Number,
      default: 3
    },
    marginPages: {
      type: Number,
      default: 1
    },
    prevText: {
      type: String,
      default: 'Prev'
    },
    nextText: {
      type: String,
      default: 'Next'
    },
    breakViewText: {
      type: String,
      default: '…'
    },
    containerClass: {
      type: String
    },
    pageClass: {
      type: String
    },
    pageLinkClass: {
      type: String
    },
    prevClass: {
      type: String
    },
    prevLinkClass: {
      type: String
    },
    nextClass: {
      type: String
    },
    nextLinkClass: {
      type: String
    },
    breakViewClass: {
      type: String
    },
    breakViewLinkClass: {
      type: String
    },
    activeClass: {
      type: String,
      default: 'active'
    },
    disabledClass: {
      type: String,
      default: 'disabled'
    },
    noLiSurround: {
      type: Boolean,
      default: false
    },
    firstLastButton: {
      type: Boolean,
      default: false
    },
    firstButtonText: {
      type: String,
      default: 'First'
    },
    lastButtonText: {
      type: String,
      default: 'Last'
    },
    hidePrevNext: {
      type: Boolean,
      default: false
    }
  },

  beforeUpdate() {
    if (this.forcePage === undefined) return;

    if (this.forcePage !== this.selected) {
      this.selected = this.forcePage;
    }
  },

  computed: {
    selected: {
      get: function () {
        return this.value || this.innerValue;
      },
      set: function (newValue) {
        this.innerValue = newValue;
      }
    },
    pages: function () {
      let items = {};

      if (this.pageCount <= this.pageRange) {
        for (let index = 0; index < this.pageCount; index++) {
          items[index] = {
            index: index,
            content: index + 1,
            selected: index === this.selected - 1
          };
        }
      } else {
        const halfPageRange = Math.floor(this.pageRange / 2);

        let setPageItem = index => {
          items[index] = {
            index: index,
            content: index + 1,
            selected: index === this.selected - 1
          };
        };

        let setBreakView = index => {
          items[index] = {
            disabled: true,
            breakView: true
          };
        }; // 1st - loop thru low end of margin pages


        for (let i = 0; i < this.marginPages; i++) {
          setPageItem(i);
        } // 2nd - loop thru selected range


        let selectedRangeLow = 0;

        if (this.selected - halfPageRange > 0) {
          selectedRangeLow = this.selected - 1 - halfPageRange;
        }

        let selectedRangeHigh = selectedRangeLow + this.pageRange - 1;

        if (selectedRangeHigh >= this.pageCount) {
          selectedRangeHigh = this.pageCount - 1;
          selectedRangeLow = selectedRangeHigh - this.pageRange + 1;
        }

        for (let i = selectedRangeLow; i <= selectedRangeHigh && i <= this.pageCount - 1; i++) {
          setPageItem(i);
        } // Check if there is breakView in the left of selected range


        if (selectedRangeLow > this.marginPages) {
          setBreakView(selectedRangeLow - 1);
        } // Check if there is breakView in the right of selected range


        if (selectedRangeHigh + 1 < this.pageCount - this.marginPages) {
          setBreakView(selectedRangeHigh + 1);
        } // 3rd - loop thru high end of margin pages


        for (let i = this.pageCount - 1; i >= this.pageCount - this.marginPages; i--) {
          setPageItem(i);
        }
      }

      return items;
    }
  },

  data() {
    return {
      innerValue: 1
    };
  },

  methods: {
    handlePageSelected(selected) {
      if (this.selected === selected) return;
      this.innerValue = selected;
      this.$emit('input', selected);
      this.clickHandler(selected);
    },

    prevPage() {
      if (this.selected <= 1) return;
      this.handlePageSelected(this.selected - 1);
    },

    nextPage() {
      if (this.selected >= this.pageCount) return;
      this.handlePageSelected(this.selected + 1);
    },

    firstPageSelected() {
      return this.selected === 1;
    },

    lastPageSelected() {
      return this.selected === this.pageCount || this.pageCount === 0;
    },

    selectFirstPage() {
      if (this.selected <= 1) return;
      this.handlePageSelected(1);
    },

    selectLastPage() {
      if (this.selected >= this.pageCount) return;
      this.handlePageSelected(this.pageCount);
    }

  }
};

function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
    if (typeof shadowMode !== 'boolean') {
        createInjectorSSR = createInjector;
        createInjector = shadowMode;
        shadowMode = false;
    }
    // Vue.extend constructor export interop.
    const options = typeof script === 'function' ? script.options : script;
    // render functions
    if (template && template.render) {
        options.render = template.render;
        options.staticRenderFns = template.staticRenderFns;
        options._compiled = true;
        // functional template
        if (isFunctionalTemplate) {
            options.functional = true;
        }
    }
    // scopedId
    if (scopeId) {
        options._scopeId = scopeId;
    }
    let hook;
    if (moduleIdentifier) {
        // server build
        hook = function (context) {
            // 2.3 injection
            context =
                context || // cached call
                    (this.$vnode && this.$vnode.ssrContext) || // stateful
                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
            // 2.2 with runInNewContext: true
            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
                context = __VUE_SSR_CONTEXT__;
            }
            // inject component styles
            if (style) {
                style.call(this, createInjectorSSR(context));
            }
            // register component module identifier for async chunk inference
            if (context && context._registeredComponents) {
                context._registeredComponents.add(moduleIdentifier);
            }
        };
        // used by ssr in case component is cached and beforeCreate
        // never gets called
        options._ssrRegister = hook;
    }
    else if (style) {
        hook = shadowMode
            ? function (context) {
                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
            }
            : function (context) {
                style.call(this, createInjector(context));
            };
    }
    if (hook) {
        if (options.functional) {
            // register for functional component in vue file
            const originalRender = options.render;
            options.render = function renderWithStyleInjection(h, context) {
                hook.call(context);
                return originalRender(h, context);
            };
        }
        else {
            // inject component registration as beforeCreate hook
            const existing = options.beforeCreate;
            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
        }
    }
    return script;
}

const isOldIE = typeof navigator !== 'undefined' &&
    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
    return (id, style) => addStyle(id, style);
}
let HEAD;
const styles = {};
function addStyle(id, css) {
    const group = isOldIE ? css.media || 'default' : id;
    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
    if (!style.ids.has(id)) {
        style.ids.add(id);
        let code = css.source;
        if (css.map) {
            // https://developer.chrome.com/devtools/docs/javascript-debugging
            // this makes source maps inside style tags work properly in Chrome
            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
            // http://stackoverflow.com/a/26603875
            code +=
                '\n/*# sourceMappingURL=data:application/json;base64,' +
                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
                    ' */';
        }
        if (!style.element) {
            style.element = document.createElement('style');
            style.element.type = 'text/css';
            if (css.media)
                style.element.setAttribute('media', css.media);
            if (HEAD === undefined) {
                HEAD = document.head || document.getElementsByTagName('head')[0];
            }
            HEAD.appendChild(style.element);
        }
        if ('styleSheet' in style.element) {
            style.styles.push(code);
            style.element.styleSheet.cssText = style.styles
                .filter(Boolean)
                .join('\n');
        }
        else {
            const index = style.ids.size - 1;
            const textNode = document.createTextNode(code);
            const nodes = style.element.childNodes;
            if (nodes[index])
                style.element.removeChild(nodes[index]);
            if (nodes.length)
                style.element.insertBefore(textNode, nodes[index]);
            else
                style.element.appendChild(textNode);
        }
    }
}

/* script */
const __vue_script__$1 = script$1;
/* template */

var __vue_render__$1 = function () {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return !_vm.noLiSurround ? _c('ul', {
    class: _vm.containerClass
  }, [_vm.firstLastButton ? _c('li', {
    class: [_vm.pageClass, _vm.firstPageSelected() ? _vm.disabledClass : '']
  }, [_c('a', {
    class: _vm.pageLinkClass,
    attrs: {
      "tabindex": _vm.firstPageSelected() ? -1 : 0
    },
    domProps: {
      "innerHTML": _vm._s(_vm.firstButtonText)
    },
    on: {
      "click": function ($event) {
        return _vm.selectFirstPage();
      },
      "keyup": function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        return _vm.selectFirstPage();
      }
    }
  })]) : _vm._e(), _vm._v(" "), !(_vm.firstPageSelected() && _vm.hidePrevNext) ? _c('li', {
    class: [_vm.prevClass, _vm.firstPageSelected() ? _vm.disabledClass : '']
  }, [_c('a', {
    class: _vm.prevLinkClass,
    attrs: {
      "tabindex": _vm.firstPageSelected() ? -1 : 0
    },
    domProps: {
      "innerHTML": _vm._s(_vm.prevText)
    },
    on: {
      "click": function ($event) {
        return _vm.prevPage();
      },
      "keyup": function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        return _vm.prevPage();
      }
    }
  })]) : _vm._e(), _vm._v(" "), _vm._l(_vm.pages, function (page) {
    return _c('li', {
      class: [_vm.pageClass, page.selected ? _vm.activeClass : '', page.disabled ? _vm.disabledClass : '', page.breakView ? _vm.breakViewClass : '']
    }, [page.breakView ? _c('a', {
      class: [_vm.pageLinkClass, _vm.breakViewLinkClass],
      attrs: {
        "tabindex": "0"
      }
    }, [_vm._t("breakViewContent", function () {
      return [_vm._v(_vm._s(_vm.breakViewText))];
    })], 2) : page.disabled ? _c('a', {
      class: _vm.pageLinkClass,
      attrs: {
        "tabindex": "0"
      }
    }, [_vm._v(_vm._s(page.content))]) : _c('a', {
      class: _vm.pageLinkClass,
      attrs: {
        "tabindex": "0"
      },
      on: {
        "click": function ($event) {
          return _vm.handlePageSelected(page.index + 1);
        },
        "keyup": function ($event) {
          if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
            return null;
          }

          return _vm.handlePageSelected(page.index + 1);
        }
      }
    }, [_vm._v(_vm._s(page.content))])]);
  }), _vm._v(" "), !(_vm.lastPageSelected() && _vm.hidePrevNext) ? _c('li', {
    class: [_vm.nextClass, _vm.lastPageSelected() ? _vm.disabledClass : '']
  }, [_c('a', {
    class: _vm.nextLinkClass,
    attrs: {
      "tabindex": _vm.lastPageSelected() ? -1 : 0
    },
    domProps: {
      "innerHTML": _vm._s(_vm.nextText)
    },
    on: {
      "click": function ($event) {
        return _vm.nextPage();
      },
      "keyup": function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        return _vm.nextPage();
      }
    }
  })]) : _vm._e(), _vm._v(" "), _vm.firstLastButton ? _c('li', {
    class: [_vm.pageClass, _vm.lastPageSelected() ? _vm.disabledClass : '']
  }, [_c('a', {
    class: _vm.pageLinkClass,
    attrs: {
      "tabindex": _vm.lastPageSelected() ? -1 : 0
    },
    domProps: {
      "innerHTML": _vm._s(_vm.lastButtonText)
    },
    on: {
      "click": function ($event) {
        return _vm.selectLastPage();
      },
      "keyup": function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        return _vm.selectLastPage();
      }
    }
  })]) : _vm._e()], 2) : _c('div', {
    class: _vm.containerClass
  }, [_vm.firstLastButton ? _c('a', {
    class: [_vm.pageLinkClass, _vm.firstPageSelected() ? _vm.disabledClass : ''],
    attrs: {
      "tabindex": "0"
    },
    domProps: {
      "innerHTML": _vm._s(_vm.firstButtonText)
    },
    on: {
      "click": function ($event) {
        return _vm.selectFirstPage();
      },
      "keyup": function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        return _vm.selectFirstPage();
      }
    }
  }) : _vm._e(), _vm._v(" "), !(_vm.firstPageSelected() && _vm.hidePrevNext) ? _c('a', {
    class: [_vm.prevLinkClass, _vm.firstPageSelected() ? _vm.disabledClass : ''],
    attrs: {
      "tabindex": "0"
    },
    domProps: {
      "innerHTML": _vm._s(_vm.prevText)
    },
    on: {
      "click": function ($event) {
        return _vm.prevPage();
      },
      "keyup": function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        return _vm.prevPage();
      }
    }
  }) : _vm._e(), _vm._v(" "), _vm._l(_vm.pages, function (page) {
    return [page.breakView ? _c('a', {
      class: [_vm.pageLinkClass, _vm.breakViewLinkClass, page.disabled ? _vm.disabledClass : ''],
      attrs: {
        "tabindex": "0"
      }
    }, [_vm._t("breakViewContent", function () {
      return [_vm._v(_vm._s(_vm.breakViewText))];
    })], 2) : page.disabled ? _c('a', {
      class: [_vm.pageLinkClass, page.selected ? _vm.activeClass : '', _vm.disabledClass],
      attrs: {
        "tabindex": "0"
      }
    }, [_vm._v(_vm._s(page.content))]) : _c('a', {
      class: [_vm.pageLinkClass, page.selected ? _vm.activeClass : ''],
      attrs: {
        "tabindex": "0"
      },
      on: {
        "click": function ($event) {
          return _vm.handlePageSelected(page.index + 1);
        },
        "keyup": function ($event) {
          if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
            return null;
          }

          return _vm.handlePageSelected(page.index + 1);
        }
      }
    }, [_vm._v(_vm._s(page.content))])];
  }), _vm._v(" "), !(_vm.lastPageSelected() && _vm.hidePrevNext) ? _c('a', {
    class: [_vm.nextLinkClass, _vm.lastPageSelected() ? _vm.disabledClass : ''],
    attrs: {
      "tabindex": "0"
    },
    domProps: {
      "innerHTML": _vm._s(_vm.nextText)
    },
    on: {
      "click": function ($event) {
        return _vm.nextPage();
      },
      "keyup": function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        return _vm.nextPage();
      }
    }
  }) : _vm._e(), _vm._v(" "), _vm.firstLastButton ? _c('a', {
    class: [_vm.pageLinkClass, _vm.lastPageSelected() ? _vm.disabledClass : ''],
    attrs: {
      "tabindex": "0"
    },
    domProps: {
      "innerHTML": _vm._s(_vm.lastButtonText)
    },
    on: {
      "click": function ($event) {
        return _vm.selectLastPage();
      },
      "keyup": function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        return _vm.selectLastPage();
      }
    }
  }) : _vm._e()], 2);
};

var __vue_staticRenderFns__$1 = [];
/* style */

const __vue_inject_styles__$1 = function (inject) {
  if (!inject) return;
  inject("data-v-bd4124a2_0", {
    source: "a[data-v-bd4124a2]{cursor:pointer}",
    map: undefined,
    media: undefined
  });
};
/* scoped */


const __vue_scope_id__$1 = "data-v-bd4124a2";
/* module identifier */

const __vue_module_identifier__$1 = undefined;
/* functional template */

const __vue_is_functional_template__$1 = false;
/* style inject SSR */

/* style inject shadow dom */

const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
  render: __vue_render__$1,
  staticRenderFns: __vue_staticRenderFns__$1
}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, createInjector, undefined, undefined);

var Paginate = __vue_component__$1;

const theme = _ref => {
  let {
    rowClasses,
    colClasses,
    table,
    paginate
  } = _ref;
  return {
    row: rowClasses,
    col: colClasses,
    table,
    paginate
  };
};

const themeData = function () {
  let design = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bootstrap3';

  switch (design) {
    case 'bootstrap5':
      return theme({
        rowClasses: 'row',
        colClasses: 'col-md-12',
        table: {
          colClasses: 'col-md-12',
          tableClasses: 'table table-striped table-bordered table-sm',
          tableContainer: 'position-relative',
          formClasses: 'form-horizontal',
          inputSearchClasses: 'form-control',
          inputLengthOptionClasses: 'form-control'
        },
        paginate: {
          colClasses: 'col-md-12',
          containerClass: 'pagination',
          pageClass: 'page-item',
          pageLinkClass: 'page-link'
        }
      });

    case 'bootstrap4':
      return theme({
        rowClasses: 'row',
        colClasses: 'col-md-12',
        table: {
          colClasses: 'col-md-12',
          tableClasses: 'table table-striped table-bordered table-sm',
          tableContainer: 'position-relative',
          formClasses: 'form-horizontal',
          inputSearchClasses: 'form-control',
          inputLengthOptionClasses: 'form-control'
        },
        paginate: {
          colClasses: 'col-md-12',
          containerClass: 'pagination',
          pageClass: 'page-item',
          pageLinkClass: 'page-link'
        }
      });

    default:
      return theme({
        rowClasses: 'row',
        colClasses: 'col-md-12',
        table: {
          colClasses: 'col-md-12',
          tableClasses: 'table table-striped table-bordered',
          tableContainer: 'position-relative',
          formClasses: 'form-horizontal',
          inputSearchClasses: 'form-control',
          inputLengthOptionClasses: 'form-control'
        },
        paginate: {
          colClasses: 'col-md-12',
          containerClass: 'pagination',
          pageClass: 'page-item',
          pageLinkClass: null
        }
      });
  }
};

var themeData$1 = themeData;

const setState = (key, initValue) => {
  if (initValue === undefined || initValue === null) {
    localStorage.removeItem(key);
  } else {
    localStorage.setItem(key, JSON.stringify(initValue));
  }
};

const getState = key => {
  return JSON.parse(localStorage.getItem(key));
};

const setDataTableState$1 = (tableId, _ref) => {
  let {
    length,
    search,
    page,
    start,
    defaultOrder,
    recordsTotal,
    recordsFiltered
  } = _ref;
  setState(`${tableId}_length`, length);
  setState(`${tableId}_search`, search);
  setState(`${tableId}_page`, page);
  setState(`${tableId}_start`, start);
  setState(`${tableId}_defaultOrder`, defaultOrder);
  setState(`${tableId}_recordsTotal`, recordsTotal);
  setState(`${tableId}_recordsFiltered`, recordsFiltered);
};

const getDataTableState$1 = tableId => {
  const length = getState(`${tableId}_length`);
  const search = getState(`${tableId}_search`);
  const page = getState(`${tableId}_page`);
  const start = getState(`${tableId}_start`);
  const defaultOrder = getState(`${tableId}_defaultOrder`);
  const recordsTotal = getState(`${tableId}_recordsTotal`);
  const recordsFiltered = getState(`${tableId}_recordsFiltered`);
  return {
    length,
    search,
    page,
    start,
    defaultOrder,
    recordsTotal,
    recordsFiltered
  };
};

var useLocalStorage = {
  setDataTableState: setDataTableState$1,
  getDataTableState: getDataTableState$1
};

var sEmptyTable$1="No data available in table";var sInfo$1="Showing _START_ to _END_ of _TOTAL_ entries";var sInfoEmpty$1="Showing 0 to 0 of 0 entries";var sInfoFiltered$1="(filtered from _MAX_ total entries)";var sInfoPostFix$1="";var sInfoThousands$1=",";var sLengthMenu$1="Show _MENU_ entries";var sLoadingRecords$1="Loading...";var sProcessing$1="Processing...";var sSearch$1="Search:";var sZeroRecords$1="No matching records found";var oPaginate$1={sFirst:"First",sLast:"Last",sNext:"Next",sPrevious:"Previous"};var oAria$1={sSortAscending:": activate to sort column ascending",sSortDescending:": activate to sort column descending"};var en = {sEmptyTable:sEmptyTable$1,sInfo:sInfo$1,sInfoEmpty:sInfoEmpty$1,sInfoFiltered:sInfoFiltered$1,sInfoPostFix:sInfoPostFix$1,sInfoThousands:sInfoThousands$1,sLengthMenu:sLengthMenu$1,sLoadingRecords:sLoadingRecords$1,sProcessing:sProcessing$1,sSearch:sSearch$1,sZeroRecords:sZeroRecords$1,oPaginate:oPaginate$1,oAria:oAria$1};

var sEmptyTable="មិនមានទិន្នន័យក្នុងតារាងនេះទេ";var sInfo="បង្ហាញជួរទី _START_ ដល់ទី _END_ ក្នុងចំណោម _TOTAL_ ជួរ";var sInfoEmpty="បង្ហាញជួរទី 0 ដល់ទី 0 ក្នុងចំណោម 0 ជួរ";var sInfoFiltered="(បានចម្រាញ់ចេញពីទិន្នន័យសរុប _MAX_ ជួរ)";var sInfoPostFix="";var sInfoThousands=",";var sLengthMenu="បង្ហាញ _MENU_ ជួរ";var sLoadingRecords="កំពុងផ្ទុក...";var sProcessing="កំពុងដំណើរការ...";var sSearch="ស្វែងរក:";var sZeroRecords="មិនមានទិន្នន័យត្រូវតាមលក្ខខណ្ឌស្វែងរកទេ";var oPaginate={sFirst:"ដំបូងគេ",sLast:"ចុងក្រោយ",sNext:"បន្ទាប់",sPrevious:"ក្រោយ"};var oAria={sSortAscending:": ចុចដើម្បីរៀបជួរឈរនេះតាមលំដាប់ឡើង",sSortDescending:": ចុចដើម្បីរៀបជួរឈរនេះតាមលំដាប់ចុះ"};var km = {sEmptyTable:sEmptyTable,sInfo:sInfo,sInfoEmpty:sInfoEmpty,sInfoFiltered:sInfoFiltered,sInfoPostFix:sInfoPostFix,sInfoThousands:sInfoThousands,sLengthMenu:sLengthMenu,sLoadingRecords:sLoadingRecords,sProcessing:sProcessing,sSearch:sSearch,sZeroRecords:sZeroRecords,oPaginate:oPaginate,oAria:oAria};

const useLocales = () => {
  return {
    en,
    km
  };
};

var useLocale = useLocales;

//
const {
  setDataTableState,
  getDataTableState
} = useLocalStorage;
var script = {
  name: "DataTable",
  components: {
    Paginate
  },
  props: {
    axios: {
      type: [Object, Function, null],
      default: null
    },
    tableId: {
      type: String,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    locale: {
      type: String,
      default: "en"
    },
    lengthOptions: {
      type: Array,
      default: () => {
        return [{
          label: 10,
          value: 10
        }, {
          label: 25,
          value: 25
        }, {
          label: 50,
          value: 50
        }, {
          label: 100,
          value: 100
        }];
      }
    },
    order: {
      type: [null, Array],
      default: null
    },
    design: {
      type: String,
      default: "bootstrap3"
    },
    savedState: {
      type: Boolean,
      default: false
    },
    serverSide: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: null
    },
    dataRows: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },

  data() {
    return {
      rows: [],
      length: this.lengthOptions[0].value,
      start: 0,
      pages: 0,
      page: 1,
      recordsTotal: 0,
      recordsFiltered: 0,
      search: null,
      draw: 0,
      locales: useLocale(),
      defaultOrder: [null, "asc"],
      isLoading: false
    };
  },

  computed: {
    sInfo() {
      return this.selectedLocale.sInfo.replace("_START_", this.length * this.start + 1).replace("_END_", this.length * (this.start + 1)).replace("_TOTAL_", this.recordsTotal);
    },

    sLengthMenu() {
      return this.selectedLocale.sLengthMenu.split(" _MENU_ ");
    },

    selectedLocale() {
      return this.locales[this.locale];
    },

    theme() {
      return themeData$1(this.design);
    }

  },
  watch: {
    length() {
      this.fetchData(this.page);
    }

  },
  methods: {
    refresh() {
      this.fetchData(this.page);
    },

    onClickOrderColumn() {
      let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

      if (index !== null && index >= 0) {
        if (index > this.columns.length - 1) {
          console.error(`The order column index ${index} is out of range`);
          return;
        }

        if (!this.columns[index].orderable) {
          return;
        }

        this.defaultOrder = [index, this.defaultOrder[1] === "asc" ? "desc" : "asc"];
        this.fetchData(this.page);
      }
    },

    onSearch: debounce(function (event) {
      this.search = event.target.value;
      this.fetchData();
    }, 500),
    fetchData: function () {
      let page = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;

      if (this.serverSide) {
        this.requestDataApi(page);
      } else {
        this.requestLocalData(page);
      }
    },

    requestDataApi(page) {
      this.page = page;
      this.start = page - 1;
      this.draw++;
      const formData = new FormData();
      formData.append("draw", this.draw);
      this.columns.forEach((column, index) => {
        Object.keys(column).forEach(key => {
          if (["data", "name", "orderable", "searchable"].includes(key)) {
            formData.append(`columns[${index}][${key}]`, column[key] ?? null);

            if (key === "searchable" && column[key]) {
              formData.append(`columns[${index}][search][value]`, "");
              formData.append(`columns[${index}][search][regex]`, "false");
            }
          }
        });
      });

      if (this.defaultOrder[0] !== null && this.defaultOrder[0] >= 0) {
        formData.append("order[0][column]", this.defaultOrder[0]);
        formData.append("order[0][dir]", this.defaultOrder[1]);
      }

      formData.append("start", this.start);
      formData.append("length", this.length);
      formData.append("search[value]", this.search ?? "");
      formData.append("search[regex]", "false");
      this.saveStates();
      this.isLoading = true;
      this.axios.post(this.url, formData).then(_ref => {
        let {
          data
        } = _ref;

        if (data.data) {
          this.rows = data.data;
          const {
            recordsTotal,
            recordsFiltered
          } = data;
          this.recordsTotal = recordsTotal;
          this.recordsFiltered = recordsFiltered;
          this.pages = Math.ceil(this.recordsFiltered / this.length);
        }
      }).finally(() => {
        this.isLoading = false;
      });
    },

    requestLocalData(page) {
      this.page = page;
      this.start = page - 1;
      this.saveStates();
      let recordFiltered = this.dataRows;
      const searchColumns = this.columns.map(column => {
        if (column.searchable) {
          return column;
        }
      }).filter(column => column !== undefined);

      if (searchColumns.length && this.search !== "" && this.search !== null) {
        recordFiltered = recordFiltered.map(row => {
          for (const column in searchColumns) {
            const _column = searchColumns[column].data;

            const value = row[_column].toString();

            if (value.includes(this.search)) {
              return row;
            }
          }
        }).filter(row => row !== undefined);
      }

      recordFiltered = recordFiltered.sort(function (a, b) {
        return a > b ? 1 : -1;
      });

      if (this.defaultOrder) {
        this.rows = recordFiltered.slice(this.start * this.length, this.start * this.length + parseInt(this.length));
      }

      this.recordsTotal = this.dataRows.length;
      this.recordsFiltered = recordFiltered.length;
      this.pages = Math.ceil(this.recordsFiltered / this.length);
    },

    initStates() {
      if (this.savedState) {
        const {
          length,
          search,
          page,
          start,
          defaultOrder,
          recordsTotal,
          recordsFiltered
        } = getDataTableState(this.tableId);
        this.length = length ?? this.lengthOptions[0].value;
        this.search = search ?? null;
        this.page = page ?? 1;
        this.start = start ?? 0;
        this.defaultOrder = defaultOrder ?? this.defaultOrder;
        this.recordsTotal = recordsTotal ?? 0;
        this.recordsFiltered = recordsFiltered ?? 0;
      }
    },

    saveStates() {
      if (this.savedState) {
        setDataTableState(this.tableId, {
          length: this.length,
          search: this.search,
          page: this.page,
          start: this.start,
          defaultOrder: this.defaultOrder,
          recordsTotal: this.recordsTotal,
          recordsFiltered: this.recordsFiltered
        });
      }
    }

  },

  mounted() {
    if (this.order) {
      this.defaultOrder = this.order;
      this.onClickOrderColumn(this.defaultOrder[0]);
    }

    this.initStates();
    this.fetchData(this.page);
  }

};

/* script */
const __vue_script__ = script;
/* template */

var __vue_render__ = function () {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    class: _vm.theme.row
  }, [_c('div', {
    class: _vm.theme.col
  }, [_c('div', {
    staticClass: "table-header-container"
  }, [_c('div', {
    staticClass: "table-header-length-options"
  }, [_vm._v("\n        " + _vm._s(_vm.sLengthMenu[0]) + "\n        "), _c('div', {
    class: _vm.theme.table.formClasses
  }, [_c('select', {
    directives: [{
      name: "model",
      rawName: "v-model",
      value: _vm.length,
      expression: "length"
    }],
    class: _vm.theme.table.inputLengthOptionClasses,
    on: {
      "change": function ($event) {
        var $$selectedVal = Array.prototype.filter.call($event.target.options, function (o) {
          return o.selected;
        }).map(function (o) {
          var val = "_value" in o ? o._value : o.value;
          return val;
        });
        _vm.length = $event.target.multiple ? $$selectedVal : $$selectedVal[0];
      }
    }
  }, _vm._l(_vm.lengthOptions, function (option, key) {
    return _c('option', {
      key: key,
      domProps: {
        "value": option.value
      }
    }, [_vm._v("\n              " + _vm._s(option.label) + "\n            ")]);
  }), 0)]), _vm._v("\n        " + _vm._s(_vm.sLengthMenu[1]) + "\n      ")]), _vm._v(" "), _c('div', {
    staticClass: "table-header-search"
  }, [_vm._v("\n        " + _vm._s(_vm.selectedLocale.sSearch) + "\n        "), _c('div', {
    class: _vm.theme.table.formClasses
  }, [_c('input', {
    directives: [{
      name: "model",
      rawName: "v-model",
      value: _vm.search,
      expression: "search"
    }],
    class: _vm.theme.table.inputSearchClasses,
    attrs: {
      "type": "text"
    },
    domProps: {
      "value": _vm.search
    },
    on: {
      "keydown": _vm.onSearch,
      "input": function ($event) {
        if ($event.target.composing) {
          return;
        }

        _vm.search = $event.target.value;
      }
    }
  })])])])]), _vm._v(" "), _c('div', {
    class: _vm.theme.table.colClasses
  }, [_c('div', {
    class: _vm.theme.table.tableContainer
  }, [_vm.isLoading ? _c('div', {
    staticClass: "loading-container"
  }, [_c('div', {
    staticClass: "loading-content"
  }, [_c('p', {
    staticClass: "m-0"
  }, [_vm._v("\n            " + _vm._s(_vm.selectedLocale.sLoadingRecords) + "\n          ")])])]) : _vm._e(), _vm._v(" "), _c('table', {
    class: _vm.theme.table.tableClasses,
    attrs: {
      "id": _vm.tableId
    }
  }, [_c('thead', [_c('tr', _vm._l(_vm.columns, function (column, headerIndex) {
    return _c('th', {
      key: headerIndex,
      style: "" + (column.width ? "width: " + column.width + "!important;" : '')
    }, [_c('div', {
      staticClass: "table-header-th",
      class: {
        'cursor-pointer': column.orderable
      },
      on: {
        "click": function ($event) {
          return _vm.onClickOrderColumn(headerIndex);
        }
      }
    }, [_c('span', [_vm._v(_vm._s(column.title))]), _vm._v(" "), column.orderable ? [_vm.defaultOrder[0] !== null && _vm.defaultOrder[0] === headerIndex ? [_vm.defaultOrder[1] === 'asc' ? _c('i', {
      staticClass: "fa-solid fa-arrow-down-short-wide"
    }) : _vm._e(), _vm._v(" "), _vm.defaultOrder[1] === 'desc' ? _c('i', {
      staticClass: "fa-solid fa-arrow-up-short-wide"
    }) : _vm._e()] : [_c('i', {
      staticClass: "fa fa-sort",
      staticStyle: {
        "color": "#dddddd"
      }
    })]] : _vm._e()], 2)]);
  }), 0)]), _vm._v(" "), _c('tbody', [_vm.rows.length ? _vm._l(_vm.rows, function (row, key) {
    return _c('tr', {
      key: key
    }, _vm._l(_vm.columns, function (column, _key) {
      return _c('td', {
        key: _key
      }, [column.slot ? [_vm._t(column.slot, null, {
        "column": column,
        "row": row
      })] : [column.data.split('.').length > 1 ? [_vm._v("\n                  " + _vm._s(column.data.split('.').reduce(function (o, i) {
        return o[i];
      }, row)) + "\n                ")] : [_vm._v("\n                  " + _vm._s(row[column.data]) + "\n                ")]]], 2);
    }), 0);
  }) : [_c('tr', [_c('td', {
    attrs: {
      "colspan": _vm.columns.length
    }
  }, [_c('p', {
    staticClass: "text-muted text-center"
  }, [_vm.search ? [_vm._v("\n                  " + _vm._s(_vm.selectedLocale.sZeroRecords) + "\n                ")] : [_vm._v("\n                  " + _vm._s(_vm.selectedLocale.sEmptyTable) + "\n                ")]], 2)])])]], 2)])])]), _vm._v(" "), _c('div', {
    class: _vm.theme.paginate.colClasses
  }, [_c('div', {
    staticClass: "table-paginate-container"
  }, [_c('p', [_vm._v(_vm._s(_vm.sInfo))]), _vm._v(" "), _c('paginate', {
    attrs: {
      "click-handler": _vm.fetchData,
      "container-class": _vm.theme.paginate.containerClass,
      "force-page": _vm.page,
      "next-link-class": _vm.theme.paginate.pageLinkClass,
      "next-text": _vm.selectedLocale.oPaginate.sNext,
      "page-class": _vm.theme.paginate.pageClass,
      "page-count": _vm.pages,
      "page-link-class": _vm.theme.paginate.pageLinkClass,
      "prev-link-class": _vm.theme.paginate.pageLinkClass,
      "prev-text": _vm.selectedLocale.oPaginate.sPrevious
    }
  })], 1)])]);
};

var __vue_staticRenderFns__ = [];
/* style */

const __vue_inject_styles__ = function (inject) {
  if (!inject) return;
  inject("data-v-007b53a3_0", {
    source: ".table-header-th{display:flex;justify-content:space-between;align-items:center;gap:10px;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cursor-pointer{cursor:pointer}.pagination{margin:0}.table-header-container{display:flex;align-items:center;justify-content:space-between}.table-header-container .table-header-length-options{display:flex;align-items:center;gap:10px;margin:20px 0}.table-header-container .table-header-search{display:flex;align-items:center;gap:10px;width:15vw;justify-content:flex-end;margin:20px 0}.table-paginate-container{display:flex;justify-content:space-between;align-items:center}.loading-container{width:100%;height:100%;position:absolute;background:rgba(136,136,136,.5);display:flex;align-items:center;justify-content:center;border-radius:4px}.position-relative{position:relative}.loading-container .loading-content{background-color:#888;color:#fff;padding:10px;border-radius:8px}.m-0{margin:0}",
    map: undefined,
    media: undefined
  });
};
/* scoped */


const __vue_scope_id__ = undefined;
/* module identifier */

const __vue_module_identifier__ = undefined;
/* functional template */

const __vue_is_functional_template__ = false;
/* style inject SSR */

/* style inject shadow dom */

const __vue_component__ = /*#__PURE__*/normalizeComponent({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);

var component = __vue_component__;

// Import vue component
// IIFE injects install function into component, allowing component
// to be registered via Vue.use() as well as Vue.component(),

var entry_esm = /*#__PURE__*/(() => {
  // Get component instance
  const installable = component; // Attach install function executed by Vue.use()

  installable.install = Vue => {
    Vue.component('DataTable', installable);
  };

  return installable;
})(); // It's possible to expose named exports when writing components that can
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
// export const RollupDemoDirective = directive;

export { entry_esm as default };