@nextcloud/vue
Version:
Nextcloud vue components
1,085 lines (1,084 loc) • 39.8 kB
JavaScript
require('../assets/referencePickerModal-CTumspFH.css');
"use strict";
const Functions_registerReference = require("./index-BV85rPB7.cjs");
const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
const _l10n = require("./_l10n-CjO_W5Dt.cjs");
const axios = require("@nextcloud/axios");
const initialState = require("@nextcloud/initial-state");
const router = require("@nextcloud/router");
const Components_NcEmptyContent = require("../Components/NcEmptyContent.cjs");
const Components_NcHighlight = require("./index-DIJxEozm.cjs");
const NcSelect = require("./NcSelect-YHwbPAJD.cjs");
const core = require("@vueuse/core");
const Vue = require("vue");
const vueRouter = require("vue-router");
const autolink = require("./autolink-BAgL31EZ.cjs");
const Components_NcButton = require("../Components/NcButton.cjs");
const Components_NcLoadingIcon = require("../Components/NcLoadingIcon.cjs");
const NcTextField = require("./NcTextField-Pbox9mQE.cjs");
const DotsHorizontal = require("./DotsHorizontal-BoI3vnhk.cjs");
const Components_NcModal = require("../Components/NcModal.cjs");
const eventBus = require("@nextcloud/event-bus");
const ArrowLeft = require("./ArrowLeft-BP7yfzCQ.cjs");
const Close = require("./Close-CqmXxEKi.cjs");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const axios__default = /* @__PURE__ */ _interopDefault(axios);
const Vue__default = /* @__PURE__ */ _interopDefault(Vue);
_l10n.register(_l10n.t21);
const IDLE_TIMEOUT = 3 * 60 * 1e3;
const _sfc_main$8 = {
name: "NcReferenceWidget",
components: {
NcButton: Components_NcButton
},
props: {
reference: {
type: Object,
required: true
},
interactive: {
type: Boolean,
default: true
},
interactiveOptIn: {
type: Boolean,
default: false
}
},
setup() {
const isVisible = Vue.ref(false);
const widgetRoot = Vue.ref();
const { width } = core.useElementSize(widgetRoot);
core.useIntersectionObserver(widgetRoot, ([entry]) => {
Vue.nextTick(() => {
isVisible.value = entry.isIntersecting;
});
});
return {
width,
isVisible,
widgetRoot
};
},
data() {
return {
showInteractive: false,
rendered: false,
idleTimeout: null
};
},
computed: {
isInteractive() {
return !this.interactiveOptIn && this.interactive || this.showInteractive;
},
hasFullWidth() {
return Functions_registerReference.hasFullWidth(this.reference.richObjectType);
},
hasCustomWidget() {
return Functions_registerReference.isWidgetRegistered(this.reference.richObjectType);
},
hasInteractiveView() {
return Functions_registerReference.isWidgetRegistered(this.reference.richObjectType) && Functions_registerReference.hasInteractiveView(this.reference.richObjectType);
},
noAccess() {
return this.reference && !this.reference.accessible;
},
descriptionStyle() {
if (this.numberOfLines === 0) {
return {
display: "none"
};
}
const lineClamp = this.numberOfLines;
return {
lineClamp,
webkitLineClamp: lineClamp
};
},
numberOfLines() {
const lineCountOffsets = [450, 550, 650, Infinity];
return lineCountOffsets.findIndex((max) => this.width < max);
},
compactLink() {
const link = this.reference.openGraphObject.link;
if (!link) {
return "";
}
if (link.startsWith("https://")) {
return link.substring(8);
}
if (link.startsWith("http://")) {
return link.substring(7);
}
return link;
},
route() {
return autolink.getRoute(this.$router, this.reference.openGraphObject.link);
},
referenceWidgetLinkComponent() {
return this.route ? vueRouter.RouterLink : "a";
},
referenceWidgetLinkProps() {
return this.route ? { to: this.route } : { href: this.reference.openGraphObject.link, target: "_blank" };
}
},
watch: {
isVisible: {
handler(val) {
if (!val) {
this.idleTimeout = setTimeout(() => {
if (!this.isVisible) {
this.destroyWidget();
}
}, IDLE_TIMEOUT);
return;
}
if (this.idleTimeout) {
clearTimeout(this.idleTimeout);
this.idleTimeout = null;
}
if (!this.rendered) {
this.renderWidget();
}
},
immediate: true
}
},
beforeDestroy() {
this.destroyWidget();
},
methods: {
t: _l10n.t,
enableInteractive() {
this.showInteractive = true;
this.renderWidget();
},
renderWidget() {
if (!this.$refs.customWidget) {
return;
}
if (this?.reference?.richObjectType === "open-graph") {
return;
}
this.$refs.customWidget.innerHTML = "";
const widget = document.createElement("div");
widget.style = "width: 100%;";
this.$refs.customWidget.appendChild(widget);
this.$nextTick(() => {
Functions_registerReference.renderWidget(widget, {
...this.reference,
interactive: this.isInteractive
});
this.rendered = true;
});
},
destroyWidget() {
if (this.rendered) {
Functions_registerReference.destroyWidget(this.reference.richObjectType, this.$el);
this.rendered = false;
}
}
}
};
var _sfc_render$8 = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { ref: "widgetRoot", class: { "toggle-interactive": _vm.hasInteractiveView && !_vm.isInteractive } }, [_vm.reference && _vm.hasCustomWidget ? _c("div", { ref: "customWidget", staticClass: "widget-custom", class: { "full-width": _vm.hasFullWidth } }) : !_vm.noAccess && _vm.reference && _vm.reference.openGraphObject && !_vm.hasCustomWidget ? _c(_vm.referenceWidgetLinkComponent, _vm._b({ tag: "component", staticClass: "widget-default", attrs: { "rel": "noopener noreferrer" } }, "component", _vm.referenceWidgetLinkProps, false), [_vm.reference.openGraphObject.thumb ? _c("img", { staticClass: "widget-default--image", attrs: { "src": _vm.reference.openGraphObject.thumb } }) : _vm._e(), _c("div", { staticClass: "widget-default--details" }, [_c("p", { staticClass: "widget-default--name" }, [_vm._v(" " + _vm._s(_vm.reference.openGraphObject.name) + " ")]), _c("p", { staticClass: "widget-default--description", style: _vm.descriptionStyle }, [_vm._v(" " + _vm._s(_vm.reference.openGraphObject.description) + " ")]), _c("p", { staticClass: "widget-default--link" }, [_vm._v(" " + _vm._s(_vm.compactLink) + " ")])])]) : _vm._e(), _vm.interactiveOptIn && _vm.hasInteractiveView && !_vm.isInteractive ? _c("NcButton", { staticClass: "toggle-interactive--button", on: { "click": _vm.enableInteractive } }, [_vm._v(" " + _vm._s(_vm.t("Enable interactive view")) + " ")]) : _vm._e()], 1);
};
var _sfc_staticRenderFns$8 = [];
var __component__$8 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main$8,
_sfc_render$8,
_sfc_staticRenderFns$8,
false,
null,
"734d6ae9"
);
const NcReferenceWidget = __component__$8.exports;
const _sfc_main$7 = {
name: "NcCustomPickerElement",
props: {
/**
* The reference provider
*/
provider: {
type: Object,
required: true
}
},
emits: [
"cancel",
"submit"
],
data() {
return {
isRegistered: Functions_registerReference.isCustomPickerElementRegistered(this.provider.id),
renderResult: null
};
},
mounted() {
if (this.isRegistered) {
this.renderElement();
}
},
beforeDestroy() {
if (this.isRegistered) {
Functions_registerReference.destroyCustomPickerElement(this.provider.id, this.$el, this.renderResult);
}
},
methods: {
renderElement() {
if (this.$refs.domElement) {
this.$refs.domElement.innerHTML = "";
}
const renderFunctionResult = Functions_registerReference.renderCustomPickerElement(this.$refs.domElement, { providerId: this.provider.id, accessible: false });
Promise.resolve(renderFunctionResult).then((result) => {
this.renderResult = result;
if (this.renderResult.object?._isVue && this.renderResult.object?.$on) {
this.renderResult.object.$on("submit", this.onSubmit);
this.renderResult.object.$on("cancel", this.onCancel);
}
this.renderResult.element.addEventListener("submit", (e) => {
this.onSubmit(e.detail);
});
this.renderResult.element.addEventListener("cancel", this.onCancel);
});
},
onSubmit(value) {
this.$emit("submit", value);
},
onCancel() {
this.$emit("cancel");
}
}
};
var _sfc_render$7 = function render2() {
var _vm = this, _c = _vm._self._c;
return _c("div", { ref: "domElement" });
};
var _sfc_staticRenderFns$7 = [];
var __component__$7 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main$7,
_sfc_render$7,
_sfc_staticRenderFns$7,
false,
null,
"de9850e4"
);
const NcCustomPickerElement = __component__$7.exports;
_l10n.register(_l10n.t7);
const anyLinkProviderId = "any-link";
const anyLinkProvider = {
id: anyLinkProviderId,
title: _l10n.t("Any link"),
icon_url: router.imagePath("core", "filetypes/link.svg")
};
if (!window._vue_richtext_reference_providers) {
window._vue_richtext_reference_providers = initialState.loadState("core", "reference-provider-list", []);
}
if (!window._vue_richtext_reference_provider_timestamps) {
window._vue_richtext_reference_provider_timestamps = initialState.loadState("core", "reference-provider-timestamps", {});
}
function getProvider(providerId) {
if (providerId === anyLinkProviderId) {
return anyLinkProvider;
}
return getProviders().find((p) => p.id === providerId);
}
function getProviders() {
return window._vue_richtext_reference_providers.filter((p) => {
const keep = !!p.search_providers_ids && p.search_providers_ids.length > 0 || Functions_registerReference.isCustomPickerElementRegistered(p.id);
if (!keep) {
console.debug("[smart picker]", p.id, "reference provider is discoverable but does not have any related search provider or custom picker component registered");
}
return keep;
});
}
function sortProviders(providerList) {
const timestamps = window._vue_richtext_reference_provider_timestamps;
return providerList.sort((a, b) => {
return a.order === b.order ? 0 : a.order > b.order ? 1 : -1;
}).sort((a, b) => {
const ta = timestamps[a.id];
const tb = timestamps[b.id];
return ta === tb ? 0 : tb === void 0 ? -1 : ta === void 0 ? 1 : ta > tb ? -1 : 1;
});
}
function searchProvider(query, limit = null) {
const providers = getProviders();
const escapedQuery = query.replace(/[/\-\\^$*+?.()|[\]{}]/g, "\\$&");
const regexp = new RegExp(escapedQuery, "i");
const sortedProviders = sortProviders(providers);
const filteredSortedProviders = sortedProviders.filter((p) => {
return p.title.match(regexp);
});
const searchResult = limit ? filteredSortedProviders.slice(0, limit) : filteredSortedProviders;
if (query === "" || searchResult.length === 0) {
searchResult.push(anyLinkProvider);
}
return searchResult;
}
function touchProvider(providerId) {
const timestamp = Math.floor(Date.now() / 1e3);
const params = {
timestamp
};
const url = router.generateOcsUrl("references/provider/{providerId}", { providerId });
axios__default.default.put(url, params).then((response) => {
window._vue_richtext_reference_provider_timestamps[providerId] = timestamp;
});
}
let mytimer = 0;
function delay(callback, ms) {
return function() {
const context = this;
const args = arguments;
clearTimeout(mytimer);
mytimer = setTimeout(function() {
callback.apply(context, args);
}, ms);
};
}
function isUrl(str) {
try {
return Boolean(new URL(str));
} catch (error) {
return false;
}
}
_l10n.register(_l10n.t37, _l10n.t42);
const _sfc_main$6 = {
name: "LinkVariantIcon",
emits: ["click"],
props: {
title: {
type: String
},
fillColor: {
type: String,
default: "currentColor"
},
size: {
type: Number,
default: 24
}
}
};
var _sfc_render$6 = function render3() {
var _vm = this, _c = _vm._self._c;
return _c("span", _vm._b({ staticClass: "material-design-icon link-variant-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
return _vm.$emit("click", $event);
} } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
};
var _sfc_staticRenderFns$6 = [];
var __component__$6 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main$6,
_sfc_render$6,
_sfc_staticRenderFns$6,
false,
null,
null
);
const LinkVariantIcon = __component__$6.exports;
const _sfc_main$5 = {
name: "NcProviderList",
components: {
NcSelect: NcSelect.NcSelect,
NcHighlight: Components_NcHighlight.NcHighlight,
NcEmptyContent: Components_NcEmptyContent,
LinkVariantIcon
},
emits: [
"select-provider",
"submit"
],
data() {
return {
selectedProvider: null,
query: "",
multiselectPlaceholder: _l10n.t("Select provider"),
providerIconAlt: _l10n.t("Provider icon")
};
},
computed: {
options() {
const result = [];
if (this.query !== "" && isUrl(this.query)) {
result.push({
id: this.query,
title: this.query,
isLink: true
});
}
result.push(...searchProvider(this.query));
return result;
}
},
methods: {
focus() {
setTimeout(() => {
this.$refs["provider-select"]?.$el?.querySelector("#provider-select-input")?.focus();
}, 300);
},
onProviderSelected(p) {
if (p !== null) {
if (p.isLink) {
this.$emit("submit", p.title);
} else {
this.$emit("select-provider", p);
}
this.selectedProvider = null;
}
},
onSearch(query, loading) {
this.query = query;
}
}
};
var _sfc_render$5 = function render4() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "provider-list" }, [_c("NcSelect", { ref: "provider-select", staticClass: "provider-list--select", attrs: { "input-id": "provider-select-input", "label": "title", "placeholder": _vm.multiselectPlaceholder, "options": _vm.options, "append-to-body": false, "clear-search-on-select": true, "clear-search-on-blur": () => false, "filterable": false }, on: { "search": _vm.onSearch, "input": _vm.onProviderSelected }, scopedSlots: _vm._u([{ key: "option", fn: function(option) {
return [option.isLink ? _c("div", { staticClass: "provider" }, [_c("LinkVariantIcon", { staticClass: "link-icon", attrs: { "size": 20 } }), _c("span", [_vm._v(_vm._s(option.title))])], 1) : _c("div", { staticClass: "provider" }, [_c("img", { staticClass: "provider-icon", attrs: { "src": option.icon_url, "alt": _vm.providerIconAlt } }), _c("NcHighlight", { staticClass: "option-text", attrs: { "search": _vm.query, "text": option.title } })], 1)];
} }]), model: { value: _vm.selectedProvider, callback: function($$v) {
_vm.selectedProvider = $$v;
}, expression: "selectedProvider" } }), _c("NcEmptyContent", { staticClass: "provider-list--empty-content", scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("LinkVariantIcon")];
}, proxy: true }]) })], 1);
};
var _sfc_staticRenderFns$5 = [];
var __component__$5 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main$5,
_sfc_render$5,
_sfc_staticRenderFns$5,
false,
null,
"f03ee0c9"
);
const NcProviderList = __component__$5.exports;
_l10n.register(_l10n.t22);
const _sfc_main$4 = {
name: "NcRawLinkInput",
components: {
LinkVariantIcon,
NcEmptyContent: Components_NcEmptyContent,
NcLoadingIcon: Components_NcLoadingIcon,
NcReferenceWidget,
NcTextField: NcTextField.NcTextField
},
props: {
/**
* The reference provider
*/
provider: {
type: Object,
required: true
}
},
emits: [
"submit"
],
data() {
return {
inputValue: "",
loading: false,
reference: null,
abortController: null,
inputPlaceholder: _l10n.t("Enter link")
};
},
computed: {
isLinkValid() {
return isUrl(this.inputValue);
}
},
methods: {
focus() {
this.$refs["url-input"].$el.getElementsByTagName("input")[0]?.focus();
},
onSubmit(e) {
const value = e.target.value;
if (this.isLinkValid) {
this.$emit("submit", value);
}
},
onClear() {
this.inputValue = "";
this.reference = null;
},
onInput() {
this.reference = null;
if (this.abortController) {
this.abortController.abort();
}
if (this.isLinkValid) {
delay(() => {
this.updateReference();
}, 500)();
}
},
updateReference() {
this.loading = true;
this.abortController = new AbortController();
axios__default.default.get(router.generateOcsUrl("references/resolve", 2) + "?reference=" + encodeURIComponent(this.inputValue), {
signal: this.abortController.signal
}).then((response) => {
this.reference = response.data.ocs.data.references[this.inputValue];
}).catch((error) => {
console.error(error);
}).then(() => {
this.loading = false;
});
}
}
};
var _sfc_render$4 = function render5() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "raw-link" }, [_c("div", { staticClass: "input-wrapper" }, [_c("NcTextField", { ref: "url-input", attrs: { "value": _vm.inputValue, "show-trailing-button": _vm.inputValue !== "", "label": _vm.inputPlaceholder }, on: { "update:value": [function($event) {
_vm.inputValue = $event;
}, _vm.onInput], "trailing-button-click": _vm.onClear }, nativeOn: { "keyup": function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
return _vm.onSubmit.apply(null, arguments);
} } }, [_vm.loading ? _c("NcLoadingIcon", { attrs: { "size": 16 } }) : _c("LinkVariantIcon", { attrs: { "size": 16 } })], 1)], 1), _vm.reference !== null ? _c("NcReferenceWidget", { staticClass: "reference-widget", attrs: { "reference": _vm.reference } }) : _c("NcEmptyContent", { staticClass: "raw-link--empty-content", scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_vm.provider.icon_url ? _c("img", { staticClass: "provider-icon", attrs: { "src": _vm.provider.icon_url } }) : _c("LinkVariantIcon")];
}, proxy: true }]) })], 1);
};
var _sfc_staticRenderFns$4 = [];
var __component__$4 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main$4,
_sfc_render$4,
_sfc_staticRenderFns$4,
false,
null,
"3c1803b5"
);
const NcRawLinkInput = __component__$4.exports;
const _sfc_main$3 = {
name: "NcSearchResult",
components: {
NcHighlight: Components_NcHighlight.NcHighlight
},
props: {
/**
* Unified search result entry
*/
entry: {
type: Object,
required: true
},
/**
* The query that led to getting this result
* Used to highlight the entry text
*/
query: {
type: String,
required: true
}
}
};
var _sfc_render$3 = function render6() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "result" }, [_vm.entry.icon ? _c("div", { staticClass: "result--icon-class", class: { [_vm.entry.icon]: true, rounded: _vm.entry.rounded } }) : _c("img", { staticClass: "result--image", class: { rounded: _vm.entry.rounded }, attrs: { "src": _vm.entry.thumbnailUrl } }), _c("div", { staticClass: "result--content" }, [_c("span", { staticClass: "result--content--name" }, [_c("NcHighlight", { attrs: { "search": _vm.query, "text": _vm.entry.title } })], 1), _c("span", { staticClass: "result--content--subline" }, [_c("NcHighlight", { attrs: { "search": _vm.query, "text": _vm.entry.subline } })], 1)])]);
};
var _sfc_staticRenderFns$3 = [];
var __component__$3 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main$3,
_sfc_render$3,
_sfc_staticRenderFns$3,
false,
null,
"ff4bcbf3"
);
const NcSearchResult = __component__$3.exports;
_l10n.register(_l10n.t29, _l10n.t37, _l10n.t39);
const LIMIT = 5;
const _sfc_main$2 = {
name: "NcSearch",
components: {
LinkVariantIcon,
DotsHorizontalIcon: DotsHorizontal.DotsHorizontal,
NcEmptyContent: Components_NcEmptyContent,
NcSelect: NcSelect.NcSelect,
NcSearchResult
},
props: {
/**
* The selected reference provider
*/
provider: {
type: Object,
required: true
},
showEmptyContent: {
type: Boolean,
default: true
},
searchPlaceholder: {
type: String,
default: null
}
},
emits: [
"submit"
],
data() {
return {
searchQuery: "",
selectedResult: null,
resultsBySearchProvider: {},
searching: false,
searchingMoreOf: null,
abortController: null,
noOptionsText: _l10n.t("Start typing to search"),
providerIconAlt: _l10n.t("Provider icon")
};
},
computed: {
mySearchPlaceholder() {
return this.searchPlaceholder || _l10n.t("Search");
},
searchProviderIds() {
return this.provider.search_providers_ids;
},
options() {
if (this.searchQuery === "") {
return [];
}
const options = [];
if (isUrl(this.searchQuery)) {
options.push(this.rawLinkEntry);
}
options.push(...this.formattedSearchResults);
return options;
},
rawLinkEntry() {
return {
id: "rawLinkEntry",
resourceUrl: this.searchQuery,
isRawLink: true
};
},
formattedSearchResults() {
const results = [];
this.searchProviderIds.forEach((pid) => {
if (this.resultsBySearchProvider[pid].entries.length > 0) {
if (this.searchProviderIds.length > 1 || this.resultsBySearchProvider[pid].entries.length > 1) {
results.push({
id: "groupTitle-" + pid,
name: this.resultsBySearchProvider[pid].name,
isCustomGroupTitle: true,
providerId: pid
});
}
const providerEntriesWithId = this.resultsBySearchProvider[pid].entries.map((entry, index) => {
return {
id: "provider-" + pid + "-entry-" + index,
...entry
};
});
results.push(...providerEntriesWithId);
if (this.resultsBySearchProvider[pid].isPaginated) {
results.push({
id: "moreOf-" + pid,
name: this.resultsBySearchProvider[pid].name,
isMore: true,
providerId: pid,
isLoading: this.searchingMoreOf === pid
});
}
}
});
return results;
}
},
mounted() {
this.resetResults();
},
beforeDestroy() {
this.cancelSearchRequests();
},
methods: {
t: _l10n.t,
resetResults() {
const resultsBySearchProvider = {};
this.searchProviderIds.forEach((pid) => {
resultsBySearchProvider[pid] = {
entries: []
};
});
this.resultsBySearchProvider = resultsBySearchProvider;
},
focus() {
setTimeout(() => {
this.$refs["search-select"]?.$el?.querySelector("#search-select-input")?.focus();
}, 300);
},
cancelSearchRequests() {
if (this.abortController) {
this.abortController.abort();
}
},
onSearchInput(query, loading) {
this.searchQuery = query;
delay(() => {
this.updateSearch();
}, 500)();
},
onSelectResultSelected(item) {
if (item !== null) {
if (item.resourceUrl) {
this.cancelSearchRequests();
this.$emit("submit", item.resourceUrl);
} else if (item.isMore) {
this.searchMoreOf(item.providerId).then(() => {
this.selectedResult = null;
});
}
}
},
searchMoreOf(searchProviderId) {
this.searchingMoreOf = searchProviderId;
this.cancelSearchRequests();
return this.searchProviders(searchProviderId);
},
updateSearch() {
this.cancelSearchRequests();
this.resetResults();
if (this.searchQuery === "") {
this.searching = false;
return;
}
return this.searchProviders();
},
searchProviders(searchProviderId = null) {
this.abortController = new AbortController();
this.searching = true;
const searchPromises = searchProviderId === null ? [...this.searchProviderIds].map((pid) => {
return this.searchOneProvider(pid);
}) : [this.searchOneProvider(searchProviderId, this.resultsBySearchProvider[searchProviderId]?.cursor ?? null)];
return Promise.allSettled(searchPromises).then((promises) => {
const isOneCanceled = !!promises.find((p) => {
return p.status === "rejected" && (p.reason.name === "CanceledError" || p.reason.code === "ERR_CANCELED");
});
if (!isOneCanceled) {
this.searching = false;
this.searchingMoreOf = null;
}
});
},
searchOneProvider(providerId, cursor = null) {
const url = cursor === null ? router.generateOcsUrl("search/providers/{providerId}/search?term={term}&limit={limit}", { providerId, term: this.searchQuery, limit: LIMIT }) : router.generateOcsUrl("search/providers/{providerId}/search?term={term}&limit={limit}&cursor={cursor}", { providerId, term: this.searchQuery, limit: LIMIT, cursor });
return axios__default.default.get(url, {
signal: this.abortController.signal
}).then((response) => {
const data = response.data.ocs.data;
this.resultsBySearchProvider[providerId].name = data.name;
this.resultsBySearchProvider[providerId].cursor = data.cursor;
this.resultsBySearchProvider[providerId].isPaginated = data.isPaginated;
this.resultsBySearchProvider[providerId].entries.push(...data.entries);
});
}
}
};
var _sfc_render$2 = function render7() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "smart-picker-search", class: { "with-empty-content": _vm.showEmptyContent } }, [_c("NcSelect", { ref: "search-select", staticClass: "smart-picker-search--select", attrs: { "input-id": "search-select-input", "label": "name", "placeholder": _vm.mySearchPlaceholder, "options": _vm.options, "append-to-body": false, "close-on-select": false, "clear-search-on-select": false, "clear-search-on-blur": () => false, "reset-focus-on-options-change": false, "filterable": false, "autoscroll": true, "reset-on-options-change": false, "loading": _vm.searching }, on: { "search": _vm.onSearchInput, "input": _vm.onSelectResultSelected }, scopedSlots: _vm._u([{ key: "option", fn: function(option) {
return [option.isRawLink ? _c("div", { staticClass: "custom-option" }, [_c("LinkVariantIcon", { staticClass: "option-simple-icon", attrs: { "size": 20 } }), _c("span", { staticClass: "option-text" }, [_vm._v(" " + _vm._s(_vm.t("Raw link {options}", { options: option.resourceUrl })) + " ")])], 1) : option.resourceUrl ? _c("NcSearchResult", { staticClass: "search-result", attrs: { "entry": option, "query": _vm.searchQuery } }) : option.isCustomGroupTitle ? _c("span", { staticClass: "custom-option group-name" }, [_vm.provider.icon_url ? _c("img", { staticClass: "provider-icon group-name-icon", attrs: { "src": _vm.provider.icon_url } }) : _vm._e(), _c("span", { staticClass: "option-text" }, [_c("strong", [_vm._v(_vm._s(option.name))])])]) : option.isMore ? _c("span", { class: { "custom-option": true } }, [option.isLoading ? _c("span", { staticClass: "option-simple-icon icon-loading-small" }) : _c("DotsHorizontalIcon", { staticClass: "option-simple-icon", attrs: { "size": 20 } }), _c("span", { staticClass: "option-text" }, [_vm._v(" " + _vm._s(_vm.t('Load more "{options}"', { options: option.name })) + " ")])], 1) : _vm._e()];
} }, { key: "no-options", fn: function() {
return [_vm._v(" " + _vm._s(_vm.noOptionsText) + " ")];
}, proxy: true }]), model: { value: _vm.selectedResult, callback: function($$v) {
_vm.selectedResult = $$v;
}, expression: "selectedResult" } }), _vm.showEmptyContent ? _c("NcEmptyContent", { staticClass: "smart-picker-search--empty-content", scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_vm.provider.icon_url ? _c("img", { staticClass: "provider-icon", attrs: { "alt": _vm.providerIconAlt, "src": _vm.provider.icon_url } }) : _c("LinkVariantIcon")];
}, proxy: true }], null, false, 2922132592) }) : _vm._e()], 1);
};
var _sfc_staticRenderFns$2 = [];
var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main$2,
_sfc_render$2,
_sfc_staticRenderFns$2,
false,
null,
"05fef988"
);
const NcSearch = __component__$2.exports;
const MODES = {
providerList: 1,
standardLinkInput: 2,
searchInput: 3,
customElement: 4
};
const _sfc_main$1 = {
name: "NcReferencePicker",
components: {
NcCustomPickerElement,
NcProviderList,
NcRawLinkInput,
NcSearch
},
props: {
/**
* Provider to select on creation
* Default: null. Show the provider list
*/
initialProvider: {
type: Object,
default: () => null
},
/**
* Optional width in pixels
* Default: 100%
*/
width: {
type: Number,
default: null
},
/**
* Focus on the provider list select input on creation
* Default: true
*/
focusOnCreate: {
type: Boolean,
default: true
}
},
emits: [
"cancel",
"cancel-raw-link",
"cancel-search",
"provider-selected",
"submit"
],
data() {
return {
MODES,
selectedProvider: this.initialProvider
};
},
computed: {
mode() {
return this.selectedProvider === null ? MODES.providerList : Functions_registerReference.isCustomPickerElementRegistered(this.selectedProvider.id) ? MODES.customElement : this.selectedProvider.search_providers_ids ? MODES.searchInput : MODES.standardLinkInput;
},
pickerWrapperStyle() {
return {
width: this.width ? this.width + "px" : void 0
};
}
},
mounted() {
if (this.focusOnCreate) {
if (this.initialProvider) {
setTimeout(() => {
this.$refs["url-input"]?.focus();
}, 300);
} else {
this.$nextTick(() => {
this.$refs["provider-list"]?.focus();
});
}
}
},
methods: {
onEscapePressed() {
if (this.selectedProvider !== null) {
this.deselectProvider();
} else {
this.cancelProviderSelection();
}
},
onProviderSelected(provider) {
this.selectedProvider = provider;
this.$emit("provider-selected", provider);
this.$nextTick(() => {
this.$refs["url-input"]?.focus();
});
},
cancelCustomElement() {
this.deselectProvider();
},
cancelSearch() {
this.$emit("cancel-search", this.selectedProvider?.title);
this.deselectProvider();
},
cancelRawLinkInput() {
this.$emit("cancel-raw-link", this.selectedProvider?.title);
this.deselectProvider();
},
cancelProviderSelection() {
this.$emit("cancel");
},
submitLink(link) {
if (this.selectedProvider !== null) {
touchProvider(this.selectedProvider.id);
}
this.$emit("submit", link);
this.deselectProvider();
},
deselectProvider() {
this.selectedProvider = null;
this.$emit("provider-selected", null);
setTimeout(() => {
this.$refs["provider-list"]?.focus();
}, 300);
}
}
};
var _sfc_render$1 = function render8() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "reference-picker", style: _vm.pickerWrapperStyle, attrs: { "tabindex": "-1" }, on: { "keydown": function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
$event.stopPropagation();
$event.preventDefault();
return _vm.onEscapePressed.apply(null, arguments);
} } }, [_vm.mode === _vm.MODES.providerList ? _c("NcProviderList", { ref: "provider-list", on: { "select-provider": _vm.onProviderSelected, "submit": _vm.submitLink, "cancel": _vm.cancelProviderSelection } }) : _vm.mode === _vm.MODES.standardLinkInput ? _c("NcRawLinkInput", { ref: "url-input", attrs: { "provider": _vm.selectedProvider }, on: { "submit": _vm.submitLink, "cancel": _vm.cancelRawLinkInput } }) : _vm.mode === _vm.MODES.searchInput ? _c("NcSearch", { ref: "url-input", attrs: { "provider": _vm.selectedProvider }, on: { "cancel": _vm.cancelSearch, "submit": _vm.submitLink } }) : _vm.mode === _vm.MODES.customElement ? _c("div", { staticClass: "custom-element-wrapper" }, [_c("NcCustomPickerElement", { staticClass: "custom-element", attrs: { "provider": _vm.selectedProvider }, on: { "submit": _vm.submitLink, "cancel": _vm.cancelCustomElement } })], 1) : _vm._e()], 1);
};
var _sfc_staticRenderFns$1 = [];
var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main$1,
_sfc_render$1,
_sfc_staticRenderFns$1,
false,
null,
"cd33df8e"
);
const NcReferencePicker = __component__$1.exports;
_l10n.register(_l10n.t11, _l10n.t17);
const _sfc_main = {
name: "NcReferencePickerModal",
components: {
NcReferencePicker,
NcModal: Components_NcModal,
NcButton: Components_NcButton,
ArrowLeftIcon: ArrowLeft.ArrowLeft,
CloseIcon: Close.Close
},
props: {
/**
* Provider to select on creation
* Show the provider list if no initial one is provided
*/
initialProvider: {
type: Object,
default: () => null
},
/**
* Focus on the input item on create
*/
focusOnCreate: {
type: Boolean,
default: true
},
/**
* If true, add the modal content to the Viewer trap elements via the event-bus
*/
isInsideViewer: {
type: Boolean,
default: false
}
},
emits: [
"cancel",
"submit"
],
data() {
return {
show: true,
selectedProvider: this.initialProvider,
backButtonTitle: _l10n.t("Back to provider selection"),
closeButtonTitle: _l10n.t("Close"),
closeButtonLabel: _l10n.t("Close Smart Picker")
};
},
computed: {
isProviderSelected() {
return this.selectedProvider !== null;
},
showBackButton() {
return this.initialProvider === null && this.isProviderSelected;
},
modalSize() {
return this.isProviderSelected && Functions_registerReference.isCustomPickerElementRegistered(this.selectedProvider.id) ? Functions_registerReference.getCustomPickerElementSize(this.selectedProvider.id) ?? "large" : "normal";
},
showModalName() {
return !this.isProviderSelected || !Functions_registerReference.isCustomPickerElementRegistered(this.selectedProvider.id);
},
modalName() {
return this.isProviderSelected ? this.selectedProvider.title : _l10n.t("Smart Picker");
}
},
mounted() {
if (this.isInsideViewer) {
const elem = this.$refs.modal_content;
eventBus.emit("viewer:trapElements:changed", elem);
}
},
methods: {
onCancel() {
this.show = false;
this.$emit("cancel");
},
onSubmit(value) {
this.show = false;
this.$emit("submit", value);
},
onProviderSelect(provider) {
this.selectedProvider = provider;
if (provider === null && this.initialProvider !== null) {
this.onCancel();
}
},
onBackClicked() {
this.$refs.referencePicker.deselectProvider();
}
}
};
var _sfc_render = function render9() {
var _vm = this, _c = _vm._self._c;
return _vm.show ? _c("NcModal", { staticClass: "reference-picker-modal", attrs: { "size": _vm.modalSize, "can-close": true }, on: { "close": _vm.onCancel } }, [_c("div", { ref: "modal_content", staticClass: "reference-picker-modal--content" }, [_vm.showBackButton ? _c("NcButton", { staticClass: "back-button", attrs: { "aria-label": _vm.backButtonTitle, "title": _vm.backButtonTitle }, on: { "click": _vm.onBackClicked }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("ArrowLeftIcon")];
}, proxy: true }], null, false, 3001860362) }) : _vm._e(), _c("NcButton", { staticClass: "close-button", attrs: { "aria-label": _vm.closeButtonLabel, "title": _vm.closeButtonTitle, "type": "tertiary" }, on: { "click": _vm.onCancel }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("CloseIcon")];
}, proxy: true }], null, false, 2491825086) }), _vm.showModalName ? _c("h2", [_vm._v(" " + _vm._s(_vm.modalName) + " ")]) : _vm._e(), _c("NcReferencePicker", { ref: "referencePicker", attrs: { "initial-provider": _vm.initialProvider, "focus-on-create": _vm.focusOnCreate }, on: { "provider-selected": _vm.onProviderSelect, "submit": _vm.onSubmit, "cancel": _vm.onCancel } })], 1)]) : _vm._e();
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"2aa8721d"
);
const NcReferencePickerModal = __component__.exports;
async function getLinkWithPicker(providerId = null, isInsideViewer = void 0) {
return await new Promise((resolve, reject) => {
const modalId = "referencePickerModal";
const modalElement = document.createElement("div");
modalElement.id = modalId;
document.body.append(modalElement);
const initialProvider = providerId === null ? null : getProvider(providerId) ?? null;
const View = Vue__default.default.extend(NcReferencePickerModal);
const view = new View({
propsData: {
initialProvider,
isInsideViewer
}
}).$mount(modalElement);
view.$on("cancel", () => {
view.$destroy();
reject(new Error("User cancellation"));
});
view.$on("submit", (link) => {
view.$destroy();
resolve(link);
});
});
}
exports.NcReferencePicker = NcReferencePicker;
exports.NcReferencePickerModal = NcReferencePickerModal;
exports.NcReferenceWidget = NcReferenceWidget;
exports.NcSearch = NcSearch;
exports.anyLinkProviderId = anyLinkProviderId;
exports.getLinkWithPicker = getLinkWithPicker;
exports.getProvider = getProvider;
exports.getProviders = getProviders;
exports.searchProvider = searchProvider;
exports.sortProviders = sortProviders;