@nextcloud/vue/dist/chunks/NcFilePicker-C7Xs8E2Q.mjs

Nextcloud vue components

import '../assets/NcFilePicker-CGYCxNdK.css';
import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, defineComponent, useTemplateRef, computed, normalizeClass, createVNode, withCtx, createBlock, createTextVNode, unref, Fragment, renderList, renderSlot, nextTick } from "vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
import { N as NcActionButton } from "./NcActionButton-BO5T5ePT.mjs";
import { N as NcActionCaption } from "./NcActionCaption-f7L9gBlT.mjs";
import { N as NcActions } from "./NcActions-DY4GGONi.mjs";
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-g8ubWhoz.mjs";
import { N as NcLoadingIcon } from "./NcLoadingIcon-BOVpFVQz.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
    });
    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", { key: 0 }, () => [
              createVNode(IconPlus, { size: 20 })
            ]) : (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_fNHZd";
const style0 = {
  filePicker
};
const cssModules = {
  "$style": style0
};
const NcFilePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
export {
  NcFilePicker as N
};
//# sourceMappingURL=NcFilePicker-C7Xs8E2Q.mjs.map