@conduction/nextcloud-vue 2.76.0 → 2.77.0

package/dist/esm/components/CnFilesBrowser/CnFilesBrowser.vue3.js

@@ -1,68 +1,87 @@
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, withModifiers, createElementVNode, createVNode, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, createCommentVNode, resolveDynamicComponent } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, withModifiers, createElementVNode, createVNode, toDisplayString, createCommentVNode, withCtx, Fragment, renderList, createBlock, createTextVNode, resolveDynamicComponent } from 'vue';
 
-const _hoisted_1 = { class: "cn-files-browser__bar" };
-const _hoisted_2 = ["aria-label"];
-const _hoisted_3 = {
+const _hoisted_1 = {
   key: 0,
+  class: "cn-files-browser__drop-overlay",
+  "aria-hidden": "true",
+  "data-testid": "cn-files-browser-drop-overlay"
+};
+const _hoisted_2 = { class: "cn-files-browser__drop-icon" };
+const _hoisted_3 = { class: "cn-files-browser__drop-label" };
+const _hoisted_4 = {
+  key: 1,
+  class: "hidden-visually",
+  "aria-live": "polite",
+  "data-testid": "cn-files-browser-drop-status"
+};
+const _hoisted_5 = { class: "cn-files-browser__bar" };
+const _hoisted_6 = ["aria-label"];
+const _hoisted_7 = {
+  key: 2,
   class: "cn-files-browser__uploads",
   "data-testid": "cn-files-browser-uploads"
 };
-const _hoisted_4 = { class: "cn-files-browser__upload-name" };
-const _hoisted_5 = {
+const _hoisted_8 = { class: "cn-files-browser__upload-name" };
+const _hoisted_9 = {
   key: 0,
   class: "cn-files-browser__upload-error",
   role: "alert"
 };
-const _hoisted_6 = {
-  key: 4,
+const _hoisted_10 = {
+  key: 6,
   class: "cn-files-browser__table",
   "data-testid": "cn-files-browser-table"
 };
-const _hoisted_7 = {
+const _hoisted_11 = {
   class: "cn-files-browser__col-icon",
   scope: "col"
 };
-const _hoisted_8 = { class: "hidden-visually" };
-const _hoisted_9 = ["aria-sort", "data-testid"];
-const _hoisted_10 = ["onClick"];
-const _hoisted_11 = {
+const _hoisted_12 = { class: "hidden-visually" };
+const _hoisted_13 = ["aria-sort", "data-testid"];
+const _hoisted_14 = ["onClick"];
+const _hoisted_15 = {
   class: "cn-files-browser__col-actions",
   scope: "col"
 };
-const _hoisted_12 = { class: "hidden-visually" };
-const _hoisted_13 = ["data-name", "onClick", "onAuxclick"];
-const _hoisted_14 = { class: "cn-files-browser__col-icon" };
-const _hoisted_15 = ["src", "onError"];
-const _hoisted_16 = ["src"];
-const _hoisted_17 = ["data-testid"];
-const _hoisted_18 = {
+const _hoisted_16 = { class: "hidden-visually" };
+const _hoisted_17 = ["data-name", "onClick", "onAuxclick"];
+const _hoisted_18 = { class: "cn-files-browser__col-icon" };
+const _hoisted_19 = ["src", "onError"];
+const _hoisted_20 = ["src"];
+const _hoisted_21 = ["data-testid"];
+const _hoisted_22 = {
   key: 0,
   class: "cn-files-browser__name"
 };
-const _hoisted_19 = ["data-name", "onClick", "onAuxclick"];
-const _hoisted_20 = { class: "cn-files-browser__col-icon" };
-const _hoisted_21 = ["src"];
-const _hoisted_22 = { class: "cn-files-browser__name" };
-const _hoisted_23 = {
+const _hoisted_23 = ["data-name", "onClick", "onAuxclick"];
+const _hoisted_24 = { class: "cn-files-browser__col-icon" };
+const _hoisted_25 = ["src"];
+const _hoisted_26 = { class: "cn-files-browser__name" };
+const _hoisted_27 = {
   key: 0,
   class: "cn-files-browser__note"
 };
-const _hoisted_24 = ["href"];
+const _hoisted_28 = ["href"];
+const _hoisted_29 = {
+  key: 7,
+  class: "cn-files-browser__drop-hint",
+  "data-testid": "cn-files-browser-drop-hint"
+};
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Upload = resolveComponent("Upload");
   const _component_NcBreadcrumb = resolveComponent("NcBreadcrumb");
   const _component_NcBreadcrumbs = resolveComponent("NcBreadcrumbs");
   const _component_NcActionCheckbox = resolveComponent("NcActionCheckbox");
   const _component_NcActions = resolveComponent("NcActions");
   const _component_Plus = resolveComponent("Plus");
-  const _component_Upload = resolveComponent("Upload");
   const _component_NcActionButton = resolveComponent("NcActionButton");
   const _component_NcIconSvgWrapper = resolveComponent("NcIconSvgWrapper");
   const _component_CnIcon = resolveComponent("CnIcon");
+  const _component_NcButton = resolveComponent("NcButton");
   const _component_NcProgressBar = resolveComponent("NcProgressBar");
   const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
   const _component_AlertCircleOutline = resolveComponent("AlertCircleOutline");
-  const _component_NcButton = resolveComponent("NcButton");
   const _component_CnEmptyContent = resolveComponent("CnEmptyContent");
   const _component_FolderOutline = resolveComponent("FolderOutline");
   const _component_FileOutline = resolveComponent("FileOutline");
@@ -79,12 +98,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass(["cn-files-browser", { 'cn-files-browser--dragging': $data.dragging }]),
     "data-testid": "cn-files-browser",
-    onDragenter: _cache[16] || (_cache[16] = withModifiers($event => ($data.dragging = true), ["prevent"])),
-    onDragover: _cache[17] || (_cache[17] = withModifiers($event => ($data.dragging = true), ["prevent"])),
-    onDragleave: _cache[18] || (_cache[18] = withModifiers($event => ($data.dragging = false), ["prevent"])),
+    onDragenter: _cache[16] || (_cache[16] = withModifiers((...args) => ($options.onDragEnter && $options.onDragEnter(...args)), ["prevent"])),
+    onDragover: _cache[17] || (_cache[17] = withModifiers((...args) => ($options.onDragOver && $options.onDragOver(...args)), ["prevent"])),
+    onDragleave: _cache[18] || (_cache[18] = withModifiers((...args) => ($options.onDragLeave && $options.onDragLeave(...args)), ["prevent"])),
     onDrop: _cache[19] || (_cache[19] = withModifiers((...args) => ($options.onDrop && $options.onDrop(...args)), ["prevent"]))
   }, [
-    createElementVNode("div", _hoisted_1, [
+    ($props.dropOverlay && $data.dragging)
+      ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createElementVNode("span", _hoisted_2, [
+            createVNode(_component_Upload, { size: 28 })
+          ]),
+          createElementVNode("strong", _hoisted_3, toDisplayString($props.dropLabel), 1 /* TEXT */)
+        ]))
+      : createCommentVNode("v-if", true),
+    ($props.dropOverlay)
+      ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString($data.dropStatus), 1 /* TEXT */))
+      : createCommentVNode("v-if", true),
+    createElementVNode("div", _hoisted_5, [
       createVNode(_component_NcBreadcrumbs, { class: "cn-files-browser__crumbs" }, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList($options.crumbs, (crumb, index) => {
@@ -132,7 +162,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         menuName: $props.newLabel,
         forceMenu: true,
         forceName: true,
-        variant: "primary",
+        variant: $props.uploadButton ? 'secondary' : 'primary',
         disabled: $data.folder === null,
         "data-testid": "cn-files-browser-new"
       }, {
@@ -203,7 +233,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }), 128 /* KEYED_FRAGMENT */))
         ]),
         _: 1 /* STABLE */
-      }, 8 /* PROPS */, ["menuName", "disabled"])
+      }, 8 /* PROPS */, ["menuName", "variant", "disabled"]),
+      ($props.uploadButton)
+        ? (openBlock(), createBlock(_component_NcButton, {
+            key: 1,
+            variant: "primary",
+            disabled: $data.folder === null,
+            "data-testid": "cn-files-browser-upload-button",
+            onClick: $options.pickFiles
+          }, {
+            icon: withCtx(() => [
+              createVNode(_component_Upload, { size: 20 })
+            ]),
+            default: withCtx(() => [
+              createTextVNode(" " + toDisplayString($props.uploadButtonLabel), 1 /* TEXT */)
+            ]),
+            _: 1 /* STABLE */
+          }, 8 /* PROPS */, ["disabled", "onClick"]))
+        : createCommentVNode("v-if", true)
     ]),
     createElementVNode("input", {
       ref: $options.fileInputRef,
@@ -212,21 +259,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "cn-files-browser__file-input",
       "aria-label": $props.uploadLabel,
       onChange: _cache[0] || (_cache[0] = (...args) => ($options.onFilesPicked && $options.onFilesPicked(...args)))
-    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2),
+    }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_6),
     ($data.uploads.length > 0)
-      ? (openBlock(), createElementBlock("ul", _hoisted_3, [
+      ? (openBlock(), createElementBlock("ul", _hoisted_7, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($data.uploads, (upload) => {
             return (openBlock(), createElementBlock("li", {
               key: upload.key,
               class: "cn-files-browser__upload"
             }, [
-              createElementVNode("span", _hoisted_4, toDisplayString(upload.name), 1 /* TEXT */),
+              createElementVNode("span", _hoisted_8, toDisplayString(upload.name), 1 /* TEXT */),
               createVNode(_component_NcProgressBar, {
                 value: upload.progress,
                 error: upload.error !== ''
               }, null, 8 /* PROPS */, ["value", "error"]),
               (upload.error)
-                ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(upload.error), 1 /* TEXT */))
+                ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(upload.error), 1 /* TEXT */))
                 : createCommentVNode("v-if", true)
             ]))
           }), 128 /* KEYED_FRAGMENT */))
@@ -234,13 +281,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       : createCommentVNode("v-if", true),
     ($data.loading)
       ? (openBlock(), createBlock(_component_NcLoadingIcon, {
-          key: 1,
+          key: 3,
           size: 32,
           class: "cn-files-browser__loading"
         }))
       : ($data.error !== '')
         ? (openBlock(), createBlock(_component_CnEmptyContent, {
-            key: 2,
+            key: 4,
             error: "",
             name: $data.error,
             class: "cn-files-browser__state"
@@ -260,7 +307,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, 8 /* PROPS */, ["name"]))
         : ($options.sorted.length === 0 && $props.linkedItems.length === 0)
           ? (openBlock(), createBlock(_component_CnEmptyContent, {
-              key: 3,
+              key: 5,
               name: $props.emptyLabel,
               description: $props.emptyHint,
               class: "cn-files-browser__state"
@@ -270,11 +317,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               ]),
               _: 1 /* STABLE */
             }, 8 /* PROPS */, ["name", "description"]))
-          : (openBlock(), createElementBlock("table", _hoisted_6, [
+          : (openBlock(), createElementBlock("table", _hoisted_10, [
               createElementVNode("thead", null, [
                 createElementVNode("tr", null, [
-                  createElementVNode("th", _hoisted_7, [
-                    createElementVNode("span", _hoisted_8, toDisplayString($options.t('nextcloud-vue', 'Type')), 1 /* TEXT */)
+                  createElementVNode("th", _hoisted_11, [
+                    createElementVNode("span", _hoisted_12, toDisplayString($options.t('nextcloud-vue', 'Type')), 1 /* TEXT */)
                   ]),
                   (openBlock(true), createElementBlock(Fragment, null, renderList($options.renderedColumns, (column) => {
                     return (openBlock(), createElementBlock("th", {
@@ -298,14 +345,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   size: 16
                                 }))
                               : createCommentVNode("v-if", true)
-                          ], 8 /* PROPS */, _hoisted_10))
+                          ], 8 /* PROPS */, _hoisted_14))
                         : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                             createTextVNode(toDisplayString($options.columnLabel(column)), 1 /* TEXT */)
                           ], 64 /* STABLE_FRAGMENT */))
-                    ], 10 /* CLASS, PROPS */, _hoisted_9))
+                    ], 10 /* CLASS, PROPS */, _hoisted_13))
                   }), 128 /* KEYED_FRAGMENT */)),
-                  createElementVNode("th", _hoisted_11, [
-                    createElementVNode("span", _hoisted_12, toDisplayString($options.t('nextcloud-vue', 'Actions')), 1 /* TEXT */)
+                  createElementVNode("th", _hoisted_15, [
+                    createElementVNode("span", _hoisted_16, toDisplayString($options.t('nextcloud-vue', 'Actions')), 1 /* TEXT */)
                   ])
                 ])
               ]),
@@ -320,7 +367,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     onMousedown: _cache[3] || (_cache[3] = (...args) => ($options.preventMiddleClickAutoscroll && $options.preventMiddleClickAutoscroll(...args))),
                     onAuxclick: $event => ($options.onRowAuxClick(node, $event))
                   }, [
-                    createElementVNode("td", _hoisted_14, [
+                    createElementVNode("td", _hoisted_18, [
                       ($options.previewUrlFor(node))
                         ? (openBlock(), createElementBlock("img", {
                             key: 0,
@@ -329,14 +376,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                             alt: "",
                             loading: "lazy",
                             onError: $event => ($options.onPreviewError(node))
-                          }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_15))
+                          }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_19))
                         : ($options.mimeIconFor(node))
                           ? (openBlock(), createElementBlock("img", {
                               key: 1,
                               class: "cn-files-browser__mime",
                               src: $options.mimeIconFor(node),
                               alt: ""
-                            }, null, 8 /* PROPS */, _hoisted_16))
+                            }, null, 8 /* PROPS */, _hoisted_20))
                           : ($options.isFolder(node))
                             ? (openBlock(), createBlock(_component_FolderOutline, {
                                 key: 2,
@@ -354,7 +401,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         "data-testid": `cn-files-browser-cell-${column.key}`
                       }, [
                         (column.key === 'name')
-                          ? (openBlock(), createElementBlock("span", _hoisted_18, toDisplayString(node.basename), 1 /* TEXT */))
+                          ? (openBlock(), createElementBlock("span", _hoisted_22, toDisplayString(node.basename), 1 /* TEXT */))
                           : (column.key === 'size')
                             ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                                 createTextVNode(toDisplayString($options.isFolder(node) ? '' : $options.formatSize(node.size)), 1 /* TEXT */)
@@ -373,7 +420,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   widget: column.widget || null,
                                   row: node
                                 }, null, 8 /* PROPS */, ["value", "formatter", "formatterOptions", "widget", "row"]))
-                      ], 10 /* CLASS, PROPS */, _hoisted_17))
+                      ], 10 /* CLASS, PROPS */, _hoisted_21))
                     }), 128 /* KEYED_FRAGMENT */)),
                     createElementVNode("td", {
                       class: "cn-files-browser__col-actions",
@@ -460,7 +507,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         _: 2 /* DYNAMIC */
                       }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["ariaLabel"])
                     ], 32 /* NEED_HYDRATION */)
-                  ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_13))
+                  ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_17))
                 }), 128 /* KEYED_FRAGMENT */)),
                 (openBlock(true), createElementBlock(Fragment, null, renderList($props.linkedItems, (item) => {
                   return (openBlock(), createElementBlock("tr", {
@@ -472,14 +519,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     onMousedown: _cache[7] || (_cache[7] = (...args) => ($options.preventMiddleClickAutoscroll && $options.preventMiddleClickAutoscroll(...args))),
                     onAuxclick: $event => ($options.onLinkedAuxClick(item, $event))
                   }, [
-                    createElementVNode("td", _hoisted_20, [
+                    createElementVNode("td", _hoisted_24, [
                       ($options.mimeIconFor({ mime: item.mime }))
                         ? (openBlock(), createElementBlock("img", {
                             key: 0,
                             class: "cn-files-browser__mime",
                             src: $options.mimeIconFor({ mime: item.mime }),
                             alt: ""
-                          }, null, 8 /* PROPS */, _hoisted_21))
+                          }, null, 8 /* PROPS */, _hoisted_25))
                         : (openBlock(), createBlock(_component_FileOutline, {
                             key: 1,
                             size: 32
@@ -492,16 +539,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                       }, [
                         (column.key === 'name')
                           ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                              createElementVNode("span", _hoisted_22, toDisplayString(item.name), 1 /* TEXT */),
+                              createElementVNode("span", _hoisted_26, toDisplayString(item.name), 1 /* TEXT */),
                               (item.note)
-                                ? (openBlock(), createElementBlock("span", _hoisted_23, [
+                                ? (openBlock(), createElementBlock("span", _hoisted_27, [
                                     (item.noteHref)
                                       ? (openBlock(), createElementBlock("a", {
                                           key: 0,
                                           href: item.noteHref,
                                           class: "cn-files-browser__note-link",
                                           onClick: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"]))
-                                        }, toDisplayString(item.note), 9 /* TEXT, PROPS */, _hoisted_24))
+                                        }, toDisplayString(item.note), 9 /* TEXT, PROPS */, _hoisted_28))
                                       : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                                           createTextVNode(toDisplayString(item.note), 1 /* TEXT */)
                                         ], 64 /* STABLE_FRAGMENT */))
@@ -569,13 +616,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         _: 2 /* DYNAMIC */
                       }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["ariaLabel"])
                     ], 32 /* NEED_HYDRATION */)
-                  ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_19))
+                  ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_23))
                 }), 128 /* KEYED_FRAGMENT */))
               ])
             ])),
+    ($props.dropHint && !$data.loading && $data.error === '')
+      ? (openBlock(), createElementBlock("p", _hoisted_29, [
+          createVNode(_component_Upload, { size: 16 }),
+          createTextVNode(" " + toDisplayString($props.dropHintLabel), 1 /* TEXT */)
+        ]))
+      : createCommentVNode("v-if", true),
     ($data.renaming !== null)
       ? (openBlock(), createBlock(_component_NcDialog, {
-          key: 5,
+          key: 8,
           name: $props.renameLabel,
           size: "small",
           "data-testid": "cn-files-browser-rename",
@@ -622,7 +675,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       : createCommentVNode("v-if", true),
     ($data.newFolderOpen)
       ? (openBlock(), createBlock(_component_NcDialog, {
-          key: 6,
+          key: 9,
           name: $props.newFolderLabel,
           size: "small",
           "data-testid": "cn-files-browser-new-folder",