@nextcloud/vue
Version:
Nextcloud vue components
305 lines (304 loc) • 11.3 kB
JavaScript
import '../assets/NcFilePicker.css';
import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, defineComponent, useTemplateRef, computed, nextTick, normalizeClass, createVNode, withCtx, createBlock, createTextVNode, unref, Fragment, renderList, renderSlot } from "vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
import { N as NcActionButton } from "./NcActionButton.mjs";
import { N as NcActionCaption } from "./NcActionCaption.mjs";
import { N as NcActions } from "./NcActions.mjs";
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper.mjs";
import { N as NcLoadingIcon } from "./NcLoadingIcon.mjs";
import { getGettextBuilder } from "@nextcloud/l10n/gettext";
const _sfc_main$3 = {
name: "FolderUploadIcon",
emits: ["click"],
props: {
title: {
type: String
},
fillColor: {
type: String,
default: "currentColor"
},
size: {
type: Number,
default: 24
}
}
};
const _hoisted_1$3 = ["aria-hidden", "aria-label"];
const _hoisted_2$2 = ["fill", "width", "height"];
const _hoisted_3$2 = { d: "M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H10L12,6H20M10.75,13H14V17H16V13H19.25L15,8.75" };
const _hoisted_4$2 = { key: 0 };
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
"aria-hidden": $props.title ? null : "true",
"aria-label": $props.title,
class: "material-design-icon folder-upload-icon",
role: "img",
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
}), [
(openBlock(), createElementBlock("svg", {
fill: $props.fillColor,
class: "material-design-icon__svg",
width: $props.size,
height: $props.size,
viewBox: "0 0 24 24"
}, [
createElementVNode("path", _hoisted_3$2, [
$props.title ? (openBlock(), createElementBlock("title", _hoisted_4$2, toDisplayString($props.title), 1)) : createCommentVNode("", true)
])
], 8, _hoisted_2$2))
], 16, _hoisted_1$3);
}
const IconFolderUpload = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2]]);
const _sfc_main$2 = {
name: "PlusIcon",
emits: ["click"],
props: {
title: {
type: String
},
fillColor: {
type: String,
default: "currentColor"
},
size: {
type: Number,
default: 24
}
}
};
const _hoisted_1$2 = ["aria-hidden", "aria-label"];
const _hoisted_2$1 = ["fill", "width", "height"];
const _hoisted_3$1 = { d: "M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" };
const _hoisted_4$1 = { key: 0 };
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
"aria-hidden": $props.title ? null : "true",
"aria-label": $props.title,
class: "material-design-icon plus-icon",
role: "img",
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
}), [
(openBlock(), createElementBlock("svg", {
fill: $props.fillColor,
class: "material-design-icon__svg",
width: $props.size,
height: $props.size,
viewBox: "0 0 24 24"
}, [
createElementVNode("path", _hoisted_3$1, [
$props.title ? (openBlock(), createElementBlock("title", _hoisted_4$1, toDisplayString($props.title), 1)) : createCommentVNode("", true)
])
], 8, _hoisted_2$1))
], 16, _hoisted_1$2);
}
const IconPlus = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1]]);
const _sfc_main$1 = {
name: "UploadIcon",
emits: ["click"],
props: {
title: {
type: String
},
fillColor: {
type: String,
default: "currentColor"
},
size: {
type: Number,
default: 24
}
}
};
const _hoisted_1$1 = ["aria-hidden", "aria-label"];
const _hoisted_2 = ["fill", "width", "height"];
const _hoisted_3 = { d: "M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" };
const _hoisted_4 = { key: 0 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
"aria-hidden": $props.title ? null : "true",
"aria-label": $props.title,
class: "material-design-icon upload-icon",
role: "img",
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
}), [
(openBlock(), createElementBlock("svg", {
fill: $props.fillColor,
class: "material-design-icon__svg",
width: $props.size,
height: $props.size,
viewBox: "0 0 24 24"
}, [
createElementVNode("path", _hoisted_3, [
$props.title ? (openBlock(), createElementBlock("title", _hoisted_4, toDisplayString($props.title), 1)) : createCommentVNode("", true)
])
], 8, _hoisted_2))
], 16, _hoisted_1$1);
}
const IconUpload = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
/*!
* SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
const gtBuilder = getGettextBuilder().detectLanguage();
const gt = gtBuilder.build();
gt.ngettext.bind(gt);
const t = gt.gettext.bind(gt);
const _hoisted_1 = ["accept", "multiple"];
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "NcFilePicker",
props: {
accept: { default: void 0 },
actionCaption: { default: "" },
actions: { default: () => [] },
directory: { type: Boolean },
directoryOnly: { type: Boolean },
disabled: { type: Boolean },
iconOnly: { type: Boolean },
label: { default: void 0 },
loading: { type: Boolean },
multiple: { type: Boolean },
variant: { default: "primary" }
},
emits: ["pick"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
__expose({
reset,
triggerPickFiles
});
const formElement = useTemplateRef("form");
const inputElement = useTemplateRef("input");
const currentLabel = computed(() => {
if (props.loading) {
return t("Uploading …");
} else if (props.label) {
return props.label;
} else if (props.directoryOnly) {
return t("Pick folder");
}
return props.multiple ? t("Pick files") : t("Pick file");
});
const canUploadFolders = computed(() => {
return (props.directory || props.directoryOnly) && "webkitdirectory" in HTMLInputElement.prototype;
});
function triggerPickFiles(uploadFolders) {
reset();
if (canUploadFolders.value) {
inputElement.value.webkitdirectory = uploadFolders;
}
nextTick(() => inputElement.value.click());
}
function onPick() {
const files = inputElement.value?.files ? Array.from(inputElement.value.files) : [];
emit("pick", files);
}
function reset() {
formElement.value.reset();
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("form", {
ref: "form",
class: normalizeClass(_ctx.$style.filePicker)
}, [
createVNode(NcActions, {
"aria-label": currentLabel.value,
disabled: __props.disabled || __props.loading,
menuName: __props.iconOnly ? void 0 : currentLabel.value,
forceName: !__props.iconOnly,
variant: __props.variant
}, {
icon: withCtx(() => [
!__props.loading ? renderSlot(_ctx.$slots, "icon", {}, () => [
createVNode(IconPlus, { size: 20 })
], void 0, 0) : (openBlock(), createBlock(NcLoadingIcon, { key: 1 }))
]),
default: withCtx(() => [
__props.actionCaption ? (openBlock(), createBlock(NcActionCaption, {
key: 0,
name: __props.actionCaption
}, null, 8, ["name"])) : createCommentVNode("", true),
!__props.directoryOnly ? (openBlock(), createBlock(NcActionButton, {
key: 1,
closeAfterClick: "",
onClick: _cache[0] || (_cache[0] = ($event) => triggerPickFiles(false))
}, {
icon: withCtx(() => [
createVNode(IconUpload, { size: 20 })
]),
default: withCtx(() => [
createTextVNode(" " + toDisplayString(canUploadFolders.value || _ctx.$slots.actions ? __props.multiple ? unref(t)("Upload files") : unref(t)("Upload file") : currentLabel.value), 1)
]),
_: 1
})) : createCommentVNode("", true),
canUploadFolders.value ? (openBlock(), createBlock(NcActionButton, {
key: 2,
closeAfterClick: "",
onClick: _cache[1] || (_cache[1] = ($event) => triggerPickFiles(true))
}, {
icon: withCtx(() => [
createVNode(IconFolderUpload, {
style: { "color": "var(--color-primary-element)" },
size: 20
})
]),
default: withCtx(() => [
createTextVNode(" " + toDisplayString(!__props.directoryOnly || _ctx.$slots.actions ? unref(t)("Upload folder") : currentLabel.value), 1)
]),
_: 1
})) : createCommentVNode("", true),
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.actions, (group) => {
return openBlock(), createElementBlock(Fragment, null, [
group.caption ? (openBlock(), createBlock(NcActionCaption, {
key: group.caption,
name: group.caption
}, null, 8, ["name"])) : createCommentVNode("", true),
(openBlock(true), createElementBlock(Fragment, null, renderList(group.actions ?? [group], (action) => {
return openBlock(), createBlock(NcActionButton, {
key: action.label,
closeAfterClick: "",
onClick: action.onClick
}, {
icon: withCtx(() => [
createVNode(NcIconSvgWrapper, {
svg: action.iconSvg
}, null, 8, ["svg"])
]),
default: withCtx(() => [
createTextVNode(" " + toDisplayString(action.label), 1)
]),
_: 2
}, 1032, ["onClick"]);
}), 128))
], 64);
}), 256))
]),
_: 3
}, 8, ["aria-label", "disabled", "menuName", "forceName", "variant"]),
createElementVNode("input", {
ref: "input",
accept: __props.accept?.join(", "),
"aria-hidden": "true",
class: "hidden-visually",
multiple: __props.multiple,
type: "file",
onChange: onPick
}, null, 40, _hoisted_1),
renderSlot(_ctx.$slots, "default")
], 2);
};
}
});
const filePicker = "_filePicker_DdklE";
const style0 = {
filePicker
};
const cssModules = {
"$style": style0
};
const NcFilePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
export {
NcFilePicker as N
};
//# sourceMappingURL=NcFilePicker.mjs.map