@oarepo/invenio-vue/oarepo-invenio-vue.cjs.js

Vue 3 library for handling invenio REST

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var axios = require('axios');
var useSWRV = require('swrv');
var vue = require('vue');
var merge = require('deepmerge');
var _typeof = require('@babel/runtime/helpers/typeof');
var LocalStorageCache = require('swrv/dist/cache/adapters/localStorage');
var deepcopy = require('deepcopy');
var vueQuerySynchronizer = require('@oarepo/vue-query-synchronizer');
var vueRouter = require('vue-router');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
var useSWRV__default = /*#__PURE__*/_interopDefaultLegacy(useSWRV);
var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
var LocalStorageCache__default = /*#__PURE__*/_interopDefaultLegacy(LocalStorageCache);
var deepcopy__default = /*#__PURE__*/_interopDefaultLegacy(deepcopy);

function callAndWatch(what, callback, options) {
  vue.watch(what, callback, options);
  callback();
}
var encodeReserveRE = /[!'()*]/g;

var encodeReserveReplacer = function encodeReserveReplacer(c) {
  return '%' + c.charCodeAt(0).toString(16);
};

var commaRE = /%2C/g;

var encode = function encode(str) {
  return encodeURIComponent(str).replace(encodeReserveRE, encodeReserveReplacer).replace(commaRE, ',');
};

function stringifyQuery(obj) {
  var res = obj ? Object.keys(obj).sort().map(function (key) {
    var val = obj[key];

    if (val === undefined || val === false) {
      return '';
    }

    if (val === null) {
      return '';
    }

    if (val === true) {
      return encode(key);
    }

    if (val === '') {
      return '';
    }

    if (Array.isArray(val)) {
      var result_1 = [];
      val.forEach(function (val2) {
        if (val2 === undefined) {
          return;
        }

        if (val2 === null) {
          result_1.push(encode(key));
        } else {
          result_1.push(encode(key) + '=' + encode(val2));
        }
      });
      return result_1.join('&');
    }

    return encode(key) + '=' + encode(val);
  }).filter(function (x) {
    return x.length > 0;
  }).join('&') : null;
  return res ? "?" + res : '';
}

function defaultErrorFormatter(rawError) {
  var err = vue.unref(rawError);

  if (!err) {
    return null;
  }

  var ret;
  var response = err.response;

  if (response) {
    if (response.status === 403 || response.status === 405 || response.status === 401) {
      ret = {
        type: 'unauthorized',
        rawError: err,
        status: response.status,
        reason: response.data,
        request: err.request,
        response: response
      };
    } else if (response.status >= 400 && response.status < 500) {
      ret = {
        type: 'clientError',
        rawError: err,
        status: response.status,
        reason: response.data,
        request: err.request,
        response: response
      };
    } else {
      ret = {
        type: 'serverError',
        rawError: err,
        status: response.status,
        reason: response.data,
        request: err.request,
        response: response
      };
    }
  } else if (err.request) {
    ret = {
      type: 'responseMissing',
      rawError: err,
      request: err.request
    };
  } else {
    ret = {
      type: 'unknown',
      rawError: err
    };
  }

  return ret;
}

/**
 * A simple http wrapper around fetcher that uses axios.
 * @see useFetcher
 *
 * @param initialUrl   the base url
 * @param initialQuery the initial query
 * @param options
 * @returns {Http<DataType, ErrorType>}
 */

function useHttp(initialUrl, initialQuery, options) {
  var _this = this;

  var loadEnabled = vue.ref((options === null || options === void 0 ? void 0 : options.loadInitial) || false);
  var url = vue.ref(initialUrl);
  var query = vue.ref(tslib.__assign({}, initialQuery || {}));
  var keepPrevious = false;
  var stale = vue.ref(false);
  var loaded = vue.ref(false);
  var data = vue.ref();
  var error = vue.ref();
  var forceCounter = vue.ref(1);
  var finishedAt = vue.ref();
  var headers = vue.ref((options === null || options === void 0 ? void 0 : options.headers) || {});
  var promise = {};

  function makeFullUrl(_url, _query) {
    if (_query && _url) {
      return "" + _url + stringifyQuery(_query);
    }

    return _url;
  }

  function makeActionUrl(action) {
    if (action) {
      var _url = url.value;

      if (!_url) {
        return makeFullUrl(action, query.value);
      }

      if (!_url.endsWith('/')) {
        _url += '/';
      }

      _url += action;
      return makeFullUrl(_url, query.value);
    } else {
      return makeFullUrl(url.value, query.value);
    }
  }

  var fullUrl = vue.computed(function () {
    return makeFullUrl(url.value, query.value);
  });
  var key = vue.computed(function () {
    return directKey();
  });

  function directKey() {
    if (loadEnabled.value && fullUrl.value) {
      return ((options === null || options === void 0 ? void 0 : options.method) || 'get') + ":" + forceCounter.value + ":" + fullUrl.value;
    } else {
      return null;
    }
  }

  var _a = useSWRV__default['default'](function () {
    return key.value;
  }, function (key) {
    return tslib.__awaiter(_this, void 0, void 0, function () {
      var resp, e_1, response;
      return tslib.__generator(this, function (_a) {
        switch (_a.label) {
          case 0:
            _a.trys.push([0, 2,, 3]);

            return [4
            /*yield*/
            , axios__default['default'][(options === null || options === void 0 ? void 0 : options.method) || 'get'](fullUrl.value, {
              headers: headers.value
            })];

          case 1:
            resp = _a.sent().data;
            return [2
            /*return*/
            , {
              promiseKey: promise.key,
              payload: resp
            }];

          case 2:
            e_1 = _a.sent();
            response = e_1.response;

            if (response) {
              return [2
              /*return*/
              , {
                promiseKey: promise.key,
                error: e_1
              }];
            } else {
              throw {
                promiseKey: promise.key,
                error: e_1
              };
            }

          case 3:
            return [2
            /*return*/
            ];
        }
      });
    });
  }, options || {}),
      rawData = _a.data,
      rawError = _a.error,
      isValidating = _a.isValidating,
      mutate = _a.mutate;

  vue.watch([isValidating, rawData, rawError], function (_a) {
    var val = _a[0];
        _a[1];
        _a[2];

    if (val) {
      if (keepPrevious && data.value) {
        stale.value = true;
      }
    } else {
      finishedAt.value = new Date();
      var err = rawError.value;

      if (!err && rawData.value && rawData.value.error) {
        err = rawData.value;
      }

      if (err) {
        error.value = (options === null || options === void 0 ? void 0 : options.errorFormatter) ? options.errorFormatter(err.error) : defaultErrorFormatter(err.error);

        if (err.promiseKey) {
          rejectPromise(error.value);
        }
      } else if (rawData.value) {
        loaded.value = true;
        data.value = rawData.value.payload;
        error.value = undefined;

        if (rawData.value.promiseKey) {
          acceptPromise(rawData.value.payload);
        }
      }
    }
  });

  function acceptPromise(data) {
    if (promise.accept) {
      var accept = promise.accept;
      promise.accept = undefined;
      promise.reject = undefined;
      accept(data);
    }
  }

  function rejectPromise(error) {
    if (promise.reject) {
      var reject = promise.reject;
      promise.accept = undefined;
      promise.reject = undefined;
      reject(error);
    }
  }

  function load(opts) {
    if ((opts === null || opts === void 0 ? void 0 : opts.keepPrevious) !== undefined) {
      keepPrevious = opts.keepPrevious;
    } else {
      if ((options === null || options === void 0 ? void 0 : options.keepData) && data.value && url.value) {
        keepPrevious = options.keepData(data.value, error.value, url.value, query.value, (opts === null || opts === void 0 ? void 0 : opts.url) || url.value, (opts === null || opts === void 0 ? void 0 : opts.query) || query.value, options);
      } else {
        keepPrevious = false;
      }
    }

    if (!keepPrevious) {
      loaded.value = false;
    }

    query.value = (opts === null || opts === void 0 ? void 0 : opts.query) || {};

    if (opts === null || opts === void 0 ? void 0 : opts.url) {
      url.value = opts.url;
    }

    if ((opts === null || opts === void 0 ? void 0 : opts.force) || !(opts === null || opts === void 0 ? void 0 : opts.url)) {
      forceCounter.value += 1;
    }

    loadEnabled.value = true;

    if (opts === null || opts === void 0 ? void 0 : opts.returnPromise) {
      return new Promise(function (accept, reject) {
        promise.accept = accept;
        promise.reject = reject;
        promise.key = directKey();
      });
    }
  }

  function reload(opts) {
    load(tslib.__assign(tslib.__assign({}, opts || {}), {
      force: true
    }));
  }

  function prefetch(data, _query) {
    forceCounter.value + ":" + makeFullUrl(url.value, _query);
    mutate(function () {
      return {
        promiseKey: undefined,
        payload: data
      };
    }, {});
    query.value = _query || {};
  }

  function store(_data, _error) {
    finishedAt.value = new Date();

    if (_data) {
      prefetch(_data);
      data.value = _data;
      loaded.value = true;
      error.value = undefined;
    }

    if (_error) {
      error.value = _error;
      loaded.value = false;
    }
  }

  function op(opts) {
    return tslib.__awaiter(this, void 0, void 0, function () {
      var newHttp, resp, data_1, location_1, parsedError;
      return tslib.__generator(this, function (_a) {
        switch (_a.label) {
          case 0:
            if (opts.returnNew) {
              newHttp = ((opts === null || opts === void 0 ? void 0 : opts.factory) || useHttp)(url.value, query.value, tslib.__assign(tslib.__assign({}, options || {}), {
                loadInitial: false
              }));
            }

            _a.label = 1;

          case 1:
            _a.trys.push([1, 3,, 4]);

            return [4
            /*yield*/
            , axios__default['default'].request(tslib.__assign(tslib.__assign({
              method: opts.method,
              url: makeActionUrl(opts.action),
              data: opts.data
            }, opts.options || {}), {
              headers: headers.value
            }))];

          case 2:
            resp = _a.sent();
            data_1 = resp.data;
            location_1 = resp.headers['Location'];

            if (opts === null || opts === void 0 ? void 0 : opts.replaceContent) {
              if (data_1) {
                store(data_1);
              } else {
                store(opts.data);
              }

              if (location_1) {
                loadEnabled.value = false;
                url.value = location_1;
              }
            } else if (opts === null || opts === void 0 ? void 0 : opts.returnNew) {
              if (data_1) {
                newHttp.store(data_1);
              } else {
                newHttp.store(opts.data);
              }

              if (location_1) {
                newHttp.loadEnabled.value = false;
                newHttp.url.value = location_1;
              }

              return [2
              /*return*/
              , newHttp];
            }

            return [3
            /*break*/
            , 4];

          case 3:
            _a.sent();
            parsedError = (options === null || options === void 0 ? void 0 : options.errorFormatter) ? options.errorFormatter(rawError.value) : defaultErrorFormatter(rawError.value);

            if (opts === null || opts === void 0 ? void 0 : opts.replaceContent) {
              store(undefined, parsedError);
            } else if (opts === null || opts === void 0 ? void 0 : opts.returnNew) {
              newHttp.store(undefined, parsedError);
              return [2
              /*return*/
              , newHttp];
            }

            return [3
            /*break*/
            , 4];

          case 4:
            return [2
            /*return*/
            , th];
        }
      });
    });
  }

  function post(opts) {
    return tslib.__awaiter(this, void 0, void 0, function () {
      return tslib.__generator(this, function (_a) {
        switch (_a.label) {
          case 0:
            return [4
            /*yield*/
            , op(tslib.__assign(tslib.__assign({}, opts), {
              method: 'post',
              options: merge__default['default']({
                headers: {
                  'Content-Type': 'application/json'
                }
              }, (opts === null || opts === void 0 ? void 0 : opts.options) || {})
            }))];

          case 1:
            return [2
            /*return*/
            , _a.sent()];
        }
      });
    });
  }

  function patch(opts) {
    return tslib.__awaiter(this, void 0, void 0, function () {
      return tslib.__generator(this, function (_a) {
        switch (_a.label) {
          case 0:
            return [4
            /*yield*/
            , op(tslib.__assign(tslib.__assign({}, opts), {
              data: opts.operations,
              method: 'patch',
              options: merge__default['default']({
                headers: {
                  'Content-Type': 'application/json-patch+json'
                }
              }, (opts === null || opts === void 0 ? void 0 : opts.options) || {})
            }))];

          case 1:
            return [2
            /*return*/
            , _a.sent()];
        }
      });
    });
  }

  function remove(opts) {
    return tslib.__awaiter(this, void 0, void 0, function () {
      return tslib.__generator(this, function (_a) {
        switch (_a.label) {
          case 0:
            _a.trys.push([0, 2,, 3]);

            return [4
            /*yield*/
            , axios__default['default'].request(tslib.__assign(tslib.__assign({
              method: 'delete',
              url: fullUrl.value
            }, opts.options || {}), {
              headers: headers.value
            }))];

          case 1:
            return [2
            /*return*/
            , _a.sent().data];

          case 2:
            _a.sent();
            throw (options === null || options === void 0 ? void 0 : options.errorFormatter) ? options.errorFormatter(rawError.value) : defaultErrorFormatter(rawError.value);

          case 3:
            return [2
            /*return*/
            ];
        }
      });
    });
  }

  var th = {
    loadEnabled: loadEnabled,
    url: url,
    query: query,
    fullUrl: fullUrl,
    stale: stale,
    loading: isValidating,
    loaded: loaded,
    data: data,
    error: error,
    load: load,
    reload: reload,
    prefetch: prefetch,
    store: store,
    post: post,
    patch: patch,
    remove: remove,
    op: op,
    finishedAt: finishedAt,
    headers: headers
  };
  return th;
}

var optionsCache = new LocalStorageCache__default['default']();

function useInvenioCollection(url, initialQuery, options) {
  options = options || {};
  initialQuery = initialQuery || {};

  if (!options.headers) {
    options.headers = {};
  }

  options.headers['Accept'] = 'application/json';

  var recordTransformer = options.recordTransformer || function (record) {
    return record;
  };

  options.facetsTransformer || function (facets) {
    return facets;
  };

  var facetDefinitionTransformer = options.facetDefinitionTransformer || function (facetDefinitions) {
    return facetDefinitions;
  };

  var records = vue.ref([]);
  var pageSize = vue.ref(parseInt(initialQuery.size || "") || 10);
  var page = vue.ref(parseInt(initialQuery.page || "") || 1);
  var http = useHttp(url, tslib.__assign({
    page: page.value.toString(),
    size: pageSize.value.toString()
  }, initialQuery), tslib.__assign({
    method: 'get'
  }, options));
  var httpFacets = useHttp(url, tslib.__assign(tslib.__assign({}, initialQuery), {
    size: '0'
  }), tslib.__assign(tslib.__assign({
    method: 'get'
  }, options), {
    loadInitial: false
  }));
  var httpOptions = useHttp(url, tslib.__assign(tslib.__assign({}, initialQuery), {
    facets: null
  }), tslib.__assign(tslib.__assign({}, options), {
    method: 'options',
    cache: options.optionsCache || optionsCache
  }));
  vue.watch(http.data, function () {
    var _a, _b;

    records.value = (((_b = (_a = http.data.value) === null || _a === void 0 ? void 0 : _a.hits) === null || _b === void 0 ? void 0 : _b.hits) || []).map(function (record) {
      var _a, _b;

      if (!((_a = record.links) === null || _a === void 0 ? void 0 : _a.ui) && ((_b = record.links) === null || _b === void 0 ? void 0 : _b.self)) {
        record.links.ui = new URL(record.links.self).pathname;
      }

      return recordTransformer(record, {
        options: options,
        collection: th
      });
    });
  });

  function load(opts) {
    if (!httpOptions.loaded.value) {
      httpOptions.reload();
    }

    var query = tslib.__assign(tslib.__assign({}, http.query.value), (opts === null || opts === void 0 ? void 0 : opts.query) || {});

    query.facets = true;
    http.load(tslib.__assign(tslib.__assign({}, opts || {}), {
      query: query
    }));
  }

  function loadFacets(opts) {
    httpFacets.load({
      query: tslib.__assign(tslib.__assign({}, httpFacets.query.value), {
        facets: opts.selectedFacets
      })
    });
  }

  var facetDefinitions = vue.computed(function () {
    var _a;

    var defs = (((_a = httpOptions.data.value) === null || _a === void 0 ? void 0 : _a.facets) || []).reduce(function (p, d, idx) {
      var _a;

      p[d.code] = tslib.__assign({
        label: (_a = d.facet) === null || _a === void 0 ? void 0 : _a.label,
        order: idx
      }, d);
      return p;
    }, {});
    return facetDefinitionTransformer(defs, {
      options: options,
      collection: th
    });
  });
  vue.watch(pageSize, function () {
    if (pageSize.value <= 0) {
      pageSize.value = 10;
    }

    if (http.query.value.size != pageSize.value.toString()) {
      http.query.value.size = pageSize.value.toString();
    }
  });
  vue.watch(function () {
    return http.query.value.size;
  }, function (ps) {
    pageSize.value = parseInt(ps);
  });
  var pages = vue.computed(function () {
    if (!http.data.value) {
      return 0;
    }

    var hits = http.data.value.hits.total;
    var records = _typeof__default['default'](hits) === 'object' ? hits.value : hits;
    return Math.ceil(records / pageSize.value);
  });
  vue.watch(page, function () {
    if (page.value < 1) {
      page.value = 1;
    }

    if (pages.value && page.value > pages.value) {
      page.value = pages.value;
    }

    if (http.query.value.page != page.value.toString()) {
      http.query.value.page = page.value.toString();
    }
  });
  vue.watch(function () {
    return http.query.value.page;
  }, function (ps) {
    page.value = parseInt(ps);
  });

  function setUrl(url) {
    http.url.value = url;
    httpOptions.url.value = url;
    httpFacets.url.value = url;
    httpFacets.loadEnabled.value = false; // reload options

    httpOptions.reload({
      keepPrevious: false
    }); // load list of records together with facets

    http.load({
      query: http.query.value,
      keepPrevious: false
    });
  }

  var recordsCount = vue.computed(function () {
    if (!http.data.value) {
      return 0;
    }

    var hits = http.data.value.hits.total;
    return _typeof__default['default'](hits) === 'object' ? hits.value : hits;
  });
  var recordsCountString = vue.computed(function () {
    if (!http.data.value) {
      return '';
    }

    var hits = http.data.value.hits.total;

    if (_typeof__default['default'](hits) === 'object') {
      if (hits.relation === 'gte') {
        return "\u2265 " + hits.value;
      } else {
        return "" + hits.value;
      }
    } else {
      return "" + hits;
    }
  });
  var th = {
    records: records,
    http: http,
    httpOptions: httpOptions,
    httpFacets: httpFacets,
    load: load,
    loadFacets: loadFacets,
    facetDefinitions: facetDefinitions,
    stale: http.stale,
    loading: http.loading,
    loaded: http.loaded,
    pages: pages,
    page: page,
    pageSize: pageSize,
    setUrl: setUrl,
    recordsCount: recordsCount,
    recordsCountString: recordsCountString
  };
  return th;
}

function useInvenioRecord(url, options) {
  options = options || {};

  if (!options.headers) {
    options.headers = {};
  }

  options.headers['Accept'] = 'application/json';
  var http = useHttp(url, {}, tslib.__assign({
    method: 'get'
  }, options));
  var model = vue.ref();
  var metadata = vue.computed(function () {
    if (http.data.value) {
      return http.data.value.metadata;
    }

    return undefined;
  });

  function setUrl(url) {
    http.url.value = url;
  }

  function createModel() {
    if (model.value) {
      return model;
    }

    if (metadata.value) {
      model.value = deepcopy__default['default'](vue.toRaw(metadata));
    }

    return model;
  }

  function releaseModel() {
    model.value = undefined;
  } // when metadata are fetched, set the inner model to them


  vue.watch(metadata, function () {
    if (model.value) {
      model.value = deepcopy__default['default'](vue.toRaw(metadata));
    }
  });
  return {
    http: http,
    metadata: metadata,
    setUrl: setUrl,
    createModel: createModel,
    releaseModel: releaseModel
  };
}

var script$3 = vue.defineComponent({
  setup: function setup() {}
});

function render$3(_ctx, _cache, $props, $setup, $data, $options) {
  return vue.openBlock(), vue.createBlock("div", null, [vue.createCommentVNode(" loading ")]);
}

script$3.render = render$3;

var script$2 = vue.defineComponent({
  name: 'simple-error',
  props: {
    collection: {
      type: Object
    },
    record: {
      type: Object
    },
    title: {
      type: String,
      default: 'Error loading data'
    }
  },
  emits: ['reload'],
  setup: function setup(props, ctx) {
    var err = vue.computed(function () {
      var _props$collection, _props$record;

      return ((_props$collection = props.collection) === null || _props$collection === void 0 ? void 0 : _props$collection.http.error) || ((_props$record = props.record) === null || _props$record === void 0 ? void 0 : _props$record.http.error);
    });
    var hasHtmlError = vue.computed(function () {
      return err.value && err.value.reason && typeof err.value.reason === 'string';
    });
    return {
      err: err,
      hasHtmlError: hasHtmlError,
      reload: function reload() {
        return ctx.emit('reload');
      }
    };
  }
});

var _hoisted_1 = {
  key: 0,
  class: "invenio-error-loading-page"
};
var _hoisted_2 = {
  key: 0
};

var _hoisted_3 = /*#__PURE__*/vue.createVNode("h4", null, "Unknown error", -1
/* HOISTED */
);

var _hoisted_4 = {
  key: 1
};

var _hoisted_5 = /*#__PURE__*/vue.createVNode("h4", null, "No response from server", -1
/* HOISTED */
);

var _hoisted_6 = /*#__PURE__*/vue.createTextVNode(" The request has not been delivered to the server due to network error or the server has not responded in time. ");

var _hoisted_7 = {
  key: 2
};

var _hoisted_8 = /*#__PURE__*/vue.createVNode("h4", null, "Unauthorized", -1
/* HOISTED */
);

var _hoisted_9 = /*#__PURE__*/vue.createTextVNode(" The server says you have no rights to access the resource ");

var _hoisted_10 = {
  key: 3
};

var _hoisted_11 = /*#__PURE__*/vue.createVNode("h4", null, "The client send invalid data", -1
/* HOISTED */
);

var _hoisted_12 = /*#__PURE__*/vue.createTextVNode(" The client has sent invalid data. Details: ");

var _hoisted_13 = {
  key: 1
};
var _hoisted_14 = {
  key: 4
};

var _hoisted_15 = /*#__PURE__*/vue.createVNode("h4", null, "Server error", -1
/* HOISTED */
);

var _hoisted_16 = /*#__PURE__*/vue.createTextVNode(" The server experienced error during handling your request. ");

var _hoisted_17 = {
  key: 1
};
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
  return _ctx.err ? (vue.openBlock(), vue.createBlock("div", _hoisted_1, [vue.createVNode("h3", null, vue.toDisplayString(_ctx.title), 1
  /* TEXT */
  ), _ctx.err.type === 'unknown' ? (vue.openBlock(), vue.createBlock("div", _hoisted_2, [_hoisted_3, vue.createVNode("pre", null, "        " + vue.toDisplayString(_ctx.err.raw) + "\n      ", 1
  /* TEXT */
  )])) : _ctx.err.type === 'responseMissing' ? (vue.openBlock(), vue.createBlock("div", _hoisted_4, [_hoisted_5, _hoisted_6])) : _ctx.err.type === 'unauthorized' ? (vue.openBlock(), vue.createBlock("div", _hoisted_7, [_hoisted_8, _hoisted_9])) : _ctx.err.type === 'clientError' ? (vue.openBlock(), vue.createBlock("div", _hoisted_10, [_hoisted_11, _hoisted_12, _ctx.hasHtmlError ? (vue.openBlock(), vue.createBlock("div", {
    key: 0,
    innerHTML: _ctx.err.reason
  }, null, 8
  /* PROPS */
  , ["innerHTML"])) : (vue.openBlock(), vue.createBlock("pre", _hoisted_13, vue.toDisplayString(_ctx.err.reason), 1
  /* TEXT */
  ))])) : _ctx.err.type === 'serverError' ? (vue.openBlock(), vue.createBlock("div", _hoisted_14, [_hoisted_15, _hoisted_16, _ctx.hasHtmlError ? (vue.openBlock(), vue.createBlock("div", {
    key: 0,
    innerHTML: _ctx.err.reason
  }, null, 8
  /* PROPS */
  , ["innerHTML"])) : (vue.openBlock(), vue.createBlock("pre", _hoisted_17, vue.toDisplayString(_ctx.err.reason), 1
  /* TEXT */
  ))])) : vue.createCommentVNode("v-if", true), vue.createVNode("button", {
    class: "reload",
    onClick: _cache[1] || (_cache[1] = vue.withModifiers(function ($event) {
      return _ctx.reload();
    }, ["prevent"]))
  }, "Reload")])) : vue.createCommentVNode("v-if", true);
}

script$2.render = render$2;

var script$1 = vue.defineComponent({
  name: 'invenio-collection-wrapper',
  props: {
    viewerComponent: {
      required: true,
      type: [Object, Function, String]
    },
    loadingComponent: {
      type: [Object, Function, String],
      default: undefined
    },
    errorComponent: {
      type: [Object, Function, String],
      default: undefined
    },
    url: {
      type: String
    },
    options: {
      type: Object
    }
  },
  setup: function setup(props, ctx) {
    var collection = vue.ref();
    var query = vueQuerySynchronizer.useQuery();
    var route = vueRouter.useRoute();
    var beingUnmounted = vue.ref(false);
    var currentUrl = vue.computed(function () {
      return props.url || route.path;
    });
    callAndWatch(function () {
      return props.options;
    }, function () {
      collection.value = useInvenioCollection(currentUrl.value, query, props.options);
    }, {
      deep: true
    });
    vue.watch(currentUrl, function (newUrl) {
      setTimeout(function () {
        if (!beingUnmounted.value) {
          collection.value.setUrl(newUrl);
        }
      });
    });
    callAndWatch([query], function () {
      setTimeout(function () {
        if (!beingUnmounted.value) {
          reload();
        }
      });
    }, {
      deep: true
    });
    vue.watch(collection, function () {
      setTimeout(function () {
        if (!beingUnmounted.value) {
          reload();
        }
      });
    });
    vue.onBeforeUnmount(function () {
      beingUnmounted.value = true;
    });

    function reload() {
      collection.value.load({
        query: query
      });
    }

    function resolve(c, viewer, defaultComponent) {
      if (c === 'viewer') {
        return viewer;
      }

      if (!c) {
        return defaultComponent;
      }

      if (typeof c === 'string') {
        return vue.resolveComponent(c);
      }

      return vue.defineAsyncComponent(c); // return c
    }

    var viewerComponent = resolve(props.viewerComponent, script$3, script$3);
    var loadingComponent = resolve(props.loadingComponent, viewerComponent, script$3);
    var errorComponent = resolve(props.errorComponent, viewerComponent, script$2);
    var currentComponent = vue.computed(function () {
      var col = collection.value;

      if (!col) {
        return null;
      }

      if (col.http.error) {
        return errorComponent;
      }

      if (col.http.data) {
        return viewerComponent;
      }

      return loadingComponent;
    });
    return {
      collection: collection,
      propsAndAttributes: tslib.__assign(tslib.__assign({}, props), ctx.attrs),
      currentComponent: currentComponent
    };
  }
});

function render$1(_ctx, _cache, $props, $setup, $data, $options) {
  return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.currentComponent), vue.mergeProps({
    collection: _ctx.collection
  }, _ctx.propsAndAttributes, {
    onReload: _ctx.collection.http.reload
  }), null, 16
  /* FULL_PROPS */
  , ["collection", "onReload"]);
}

script$1.render = render$1;

var script = vue.defineComponent({
  name: 'invenio-record-wrapper',
  props: {
    viewerComponent: {
      required: true,
      type: [Object, Function]
    },
    loadingComponent: {
      type: [Object, Function, String],
      default: undefined
    },
    errorComponent: {
      type: [Object, Function, String],
      default: undefined
    },
    url: {
      type: String
    },
    options: {
      type: Object
    }
  },
  setup: function setup(props, ctx) {
    var record = vue.ref();
    var route = vueRouter.useRoute();
    var currentUrl = vue.computed(function () {
      return props.url || route.path;
    });
    callAndWatch(function () {
      return props.options;
    }, function () {
      console.log('record current url', currentUrl.value);
      record.value = useInvenioRecord(currentUrl.value, tslib.__assign(tslib.__assign({}, props.options), {
        loadInitial: true
      }));
    }, {
      deep: true
    });

    function resolve(c, viewer, defaultComponent) {
      if (c === 'viewer') {
        return viewer;
      }

      if (!c) {
        return defaultComponent;
      }

      if (typeof c === 'string') {
        return vue.resolveComponent(c);
      }

      return vue.defineAsyncComponent(c); // return c
    }

    var viewerComponent = resolve(props.viewerComponent, script$3, script$3);
    var loadingComponent = resolve(props.loadingComponent, viewerComponent, script$3);
    var errorComponent = resolve(props.errorComponent, viewerComponent, script$2);
    var currentComponent = vue.computed(function () {
      var rec = record.value;

      if (!rec) {
        return null;
      }

      if (rec.http.error) {
        return errorComponent;
      }

      if (rec.http.data) {
        return viewerComponent;
      }

      return loadingComponent;
    });
    return {
      record: record,
      propsAndAttributes: tslib.__assign(tslib.__assign({}, props), ctx.attrs),
      currentComponent: currentComponent
    };
  }
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.currentComponent), vue.mergeProps({
    record: _ctx.record
  }, _ctx.propsAndAttributes, {
    onReload: _ctx.record.http.reload
  }), null, 16
  /* FULL_PROPS */
  , ["record", "onReload"]);
}

script.render = render;

// @ts-ignore       // workaround for https://github.com/ezolenko/rollup-plugin-typescript2/issues/129
/**
 * Generates route path for a collection
 *
 * @param options                 options
 * @param {string} options.name            Route name
 * @param {string} options.url             Invenio api url, defaults to the current route path
 * @param {string} options.path            route path.
 * @param {Component} options.component
 *                                viewer component for showing the records and facets
 * @param {string|Component} options.errorComponent component shown on error
 *
 * - if component is passed it will be used to render the error
 * - If set to 'viewer', viewerComponent will be used
 * - If undefined, simple component showing the error with a retry button is shown
 *
 * @param {string|Component} options.loadingComponent component shown while loading records
 *
 * - if component is passed it will be used during loading when records are not available.
 * - If set to 'viewer', viewerComponent will be used during loading
 * - If undefined, empty space is shown during load
 *
 * @param {InvenioHttpOptionOptions} options.httpOptionsProps
 *      InvenioHttpOptionOptions used for fetching collection options
 * @param {InvenioCollectionListOptions} options.httpGetProps
 *      InvenioCollectionListOptions used for fetching the collection
 *
 * @param extra                   extra parameters to be merged with the route object
 *
 * @returns object to put into the router routes
 *
 * *Viewer/Loading/Error component*
 *
 * The component is passed the following props:
 *
 * ```html
 * <component
 :is="currentComponent"
 :collection="collection" (instance of InvenioCollectionComposable)
 v-bind="propsAndAttributes"
 ></component>
 * ```
 *
 * *Example*:
 *
 * ```javascript
 *  routes = [
 *    collection({
 *        name: 'all',
 *        path: '/all/'
 *        component: MyCollectionViewer,
 *      },
 *    )
 *  ]
 * ```
 */

function collection(opts, extra) {
  var proto = {
    path: opts.path !== undefined ? opts.path : '/',
    name: opts.name,
    component: script$1,
    props: {
      viewerComponent: opts.component,
      errorComponent: opts.errorComponent,
      loadingComponent: opts.loadingComponent,
      url: opts.url,
      options: opts.options || {
        revalidateOnFocus: false
      }
    },
    meta: {
      query: {
        page: 'int:1',
        size: 'int:10',
        facets: 'array:',
        q: 'string:'
      }
    }
  };

  if (extra) {
    proto = merge__default['default'](proto, extra);
  }

  return proto;
}
function record(opts, extra) {
  var proto = {
    path: opts.path !== undefined ? opts.path : '/',
    name: opts.name,
    component: script,
    props: {
      viewerComponent: opts.component,
      errorComponent: opts.errorComponent,
      loadingComponent: opts.loadingComponent,
      url: opts.url,
      options: opts.options || {
        revalidateOnFocus: false
      }
    },
    meta: {}
  };

  if (extra) {
    proto = merge__default['default'](proto, extra);
  }

  return proto;
}

var index = {
  install: function install() {}
};

exports.CollectionWrapper = script$1;
exports.RecordWrapper = script;
exports.collection = collection;
exports.default = index;
exports.record = record;
exports.useHttp = useHttp;
exports.useInvenioCollection = useInvenioCollection;
exports.useInvenioRecord = useInvenioRecord;
//# sourceMappingURL=oarepo-invenio-vue.cjs.js.map