@xuda.io/xuda-widget-plugin-xuda-drive 1.0.46 → 1.0.48

package/index.mjs

@@ -5,7 +5,7 @@ var common_fields = {
   },
   file_upload_allow_multiple_files: {
     label: "Allow Multiple Files",
-    type: "string",
+    type: "boolean",
     render: "segment",
     tooltip: "",
     defaultValue: () => false,
@@ -51,7 +51,7 @@ var common_fields = {
   },
   public_file: {
     label: "Public File",
-    type: "string",
+    type: "boolean",
     render: "segment",
     tooltip: "",
     defaultValue: () => false,
@@ -78,7 +78,7 @@ var common_fields = {
   },
   auto_tag_generator: {
     label: "Auto Tag Generator",
-    type: "string",
+    type: "boolean",
     render: "segment",
     tooltip: "Create tags extract from file name",
     defaultValue: () => false,
@@ -105,6 +105,7 @@ var common_fields = {
     render: "editor",
     "render_params.language": "json"
   },
+
   custom_tags_parser: {
     label: "Custom Tags Parser",
     type: "object",
@@ -124,7 +125,7 @@ var common_fields = {
   },
   clear_on_file_upload: {
     label: "Clear on File Upload",
-    type: "string",
+    type: "boolean",
     render: "segment",
     tooltip: "",
     defaultValue: () => false,
@@ -145,7 +146,7 @@ var common_fields = {
   },
   prompt_file_exist: {
     label: "Prompt file exist",
-    type: "string",
+    type: "boolean",
     render: "segment",
     tooltip: "",
     defaultValue: () => true,
@@ -176,6 +177,30 @@ var common_fields = {
         value: "ltr"
       }
     ]
+  },
+  navigation: {
+    label: "Navigation",
+    type: "boolean",
+    render: "segment",
+    tooltip: "",
+    defaultValue: () => true,
+    options: [
+      {
+        label: "Show",
+        value: true
+      },
+      {
+        label: "Hide",
+        value: false
+      }
+    ]
+  },
+  swiper_options: {
+    label: "Swiper options",
+    type: "object",
+    tooltip: "",
+    render: "editor",
+    "render_params.language": "json"
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xuda.io/xuda-widget-plugin-xuda-drive",
-  "version": "1.0.46",
+  "version": "1.0.48",
   "description": "Xuda Drive widget plugin",
   "scripts": {
     "pub": "npm version patch --force && npm publish  --access public"

package/runtime.mjs

@@ -8,28 +8,106 @@ export async function upload(fields, e) {
 
   var widget_cssClass = fields.widget_cssClass;
 
-  await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond/dist/filepond.js"));
-
-  await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/jquery-filepond/filepond.jquery.js"));
-
-  await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/@xuda.io/pintura/filepond-plugin-image-editor/FilePondPluginImageEditor.js"));
-
-  await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"));
-
-  await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/@xuda.io/pintura/pintura/pintura-iife.js"));
-
-  await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.min.js"));
-
-  await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.js"));
-
-  await func.utils.load_js_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.min.js"));
-
-  await func.utils.load_css_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond/dist/filepond.css"));
-
-  func.utils.load_css_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/@xuda.io/pintura/pintura/pintura.css"));
-  func.utils.load_css_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"));
-  func.utils.load_css_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.css"));
-  func.utils.load_css_on_demand(func.common.get_url(e.SESSION_ID, "dist", "runtime/node_modules/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.min.css"));
+  await func.utils.load_js_on_demand(
+    func.common.get_url(
+      e.SESSION_ID,
+      "dist",
+      "runtime/node_modules/filepond/dist/filepond.js"
+    )
+  );
+
+  await func.utils.load_js_on_demand(
+    func.common.get_url(
+      e.SESSION_ID,
+      "dist",
+      "runtime/node_modules/jquery-filepond/filepond.jquery.js"
+    )
+  );
+
+  await func.utils.load_js_on_demand(
+    func.common.get_url(
+      e.SESSION_ID,
+      "dist",
+      "runtime/node_modules/@xuda.io/pintura/filepond-plugin-image-editor/FilePondPluginImageEditor.js"
+    )
+  );
+
+  await func.utils.load_js_on_demand(
+    func.common.get_url(
+      e.SESSION_ID,
+      "dist",
+      "runtime/node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"
+    )
+  );
+
+  await func.utils.load_js_on_demand(
+    func.common.get_url(
+      e.SESSION_ID,
+      "dist",
+      "runtime/node_modules/@xuda.io/pintura/pintura/pintura-iife.js"
+    )
+  );
+
+  await func.utils.load_js_on_demand(
+    func.common.get_url(
+      e.SESSION_ID,
+      "dist",
+      "runtime/node_modules/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.min.js"
+    )
+  );
+
+  await func.utils.load_js_on_demand(
+    func.common.get_url(
+      e.SESSION_ID,
+      "dist",
+      "runtime/node_modules/filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.js"
+    )
+  );
+
+  await func.utils.load_js_on_demand(
+    func.common.get_url(
+      e.SESSION_ID,
+      "dist",
+      "runtime/node_modules/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.min.js"
+    )
+  );
+
+  await func.utils.load_css_on_demand(
+    func.common.get_url(
+      e.SESSION_ID,
+      "dist",
+      "runtime/node_modules/filepond/dist/filepond.css"
+    )
+  );
+
+  func.utils.load_css_on_demand(
+    func.common.get_url(
+      e.SESSION_ID,
+      "dist",
+      "runtime/node_modules/@xuda.io/pintura/pintura/pintura.css"
+    )
+  );
+  func.utils.load_css_on_demand(
+    func.common.get_url(
+      e.SESSION_ID,
+      "dist",
+      "runtime/node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
+    )
+  );
+  func.utils.load_css_on_demand(
+    func.common.get_url(
+      e.SESSION_ID,
+      "dist",
+      "runtime/node_modules/filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.css"
+    )
+  );
+  func.utils.load_css_on_demand(
+    func.common.get_url(
+      e.SESSION_ID,
+      "dist",
+      "runtime/node_modules/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.min.css"
+    )
+  );
 
   var pond = undefined;
 
@@ -42,8 +120,8 @@ export async function upload(fields, e) {
       init_files.push({
         source: val,
         options: {
-          type: "local"
-        }
+          type: "local",
+        },
       });
     });
   };
@@ -51,7 +129,9 @@ export async function upload(fields, e) {
   // init files from predefined array
   if (!_.isEmpty(fields.file_upload_init_file_array)) {
     if (typeof fields.file_upload_init_file_array === "string") {
-      fields.file_upload_init_file_array = eval(fields.file_upload_init_file_array);
+      fields.file_upload_init_file_array = eval(
+        fields.file_upload_init_file_array
+      );
     }
     if (fields.file_upload_init_file_array?.length) {
       init_files_fn(fields.file_upload_init_file_array);
@@ -94,17 +174,22 @@ export async function upload(fields, e) {
 
       if (!_.isEmpty(fields["xu-bind"])) {
         var ret = ret_obj.app_files;
-        if (typeof initialBindValue === "string") ret = ret_obj.app_files.map((f) => f.server_fileName).join(",");
+        if (typeof initialBindValue === "string")
+          ret = ret_obj.app_files.map((f) => f.server_fileName).join(",");
 
         await e.api_utils.set_field_value(fields["xu-bind"], ret);
       }
 
       if (is_remove && fields.event_name_for_successful_remove_callback) {
-        await e.api_utils.invoke_event(fields.event_name_for_successful_remove_callback);
+        await e.api_utils.invoke_event(
+          fields.event_name_for_successful_remove_callback
+        );
       }
 
       if (!is_remove && fields.event_name_for_successful_callback) {
-        await e.api_utils.invoke_event(fields.event_name_for_successful_callback);
+        await e.api_utils.invoke_event(
+          fields.event_name_for_successful_callback
+        );
       }
 
       if (fields.clear_on_file_upload) {
@@ -114,10 +199,14 @@ export async function upload(fields, e) {
     }, 100);
   };
 
-  var $pallet_wrapper = $(`<div class="image_wrapper" style="border: none !important;">`);
+  var $pallet_wrapper = $(
+    `<div class="image_wrapper" style="border: none !important;">`
+  );
 
   var input_id = new Date().valueOf();
-  var $imgInp = $(`<input   class="filepond ${widget_cssClass}"  id="${input_id}" />`).appendTo($pallet_wrapper);
+  var $imgInp = $(
+    `<input   class="filepond ${widget_cssClass}"  id="${input_id}" />`
+  ).appendTo($pallet_wrapper);
 
   e.$containerP.html($pallet_wrapper);
 
@@ -149,7 +238,7 @@ export async function upload(fields, e) {
 
     fetch(url, {
       method: "POST",
-      body: e
+      body: e,
     }).then((res) => {
       console.log("Request complete! response:", res);
     });
@@ -169,7 +258,12 @@ export async function upload(fields, e) {
     imageEditorSupportImage: (file) => {
       // return /^image/.test(file);
 
-      return file.type !== "image/svg+xml" && file.type !== "image/gif" && !file.type.includes("audio") && !file.type.includes("video");
+      return (
+        file.type !== "image/svg+xml" &&
+        file.type !== "image/gif" &&
+        !file.type.includes("audio") &&
+        !file.type.includes("video")
+      );
     },
 
     imageEditor: {
@@ -179,9 +273,9 @@ export async function upload(fields, e) {
 
       imageProcessor: pintura.processImage,
       editorOptions: {
-        ...pintura.getEditorDefaults()
+        ...pintura.getEditorDefaults(),
       },
-      legacyDataToImageState: pintura.legacyDataToImageState
+      legacyDataToImageState: pintura.legacyDataToImageState,
     },
     server: {
       load: (source, load, error, progress, abort, headers) => {
@@ -208,21 +302,36 @@ export async function upload(fields, e) {
         return {
           abort: () => {
             abort();
-          }
+          },
         };
       },
-      process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
+      process: (
+        fieldName,
+        file,
+        metadata,
+        load,
+        error,
+        progress,
+        abort,
+        transfer,
+        options
+      ) => {
         let formData = new FormData();
         formData.append("file", file, file.name);
         const { app_id, gtp_token, app_token } = e._session;
 
-        formData.append("app_id_reference", APP_OBJ?.[app_id]?.app_id_reference);
+        formData.append(
+          "app_id_reference",
+          APP_OBJ?.[app_id]?.app_id_reference
+        );
         formData.append("app_id", app_id);
         formData.append("gtp_token", gtp_token);
         formData.append("app_token", app_token);
         formData.append("drive_type", "workspace");
-        if (fields.file_upload_folder) formData.append("folder", fields.file_upload_folder);
-        if (fields.public_file) formData.append("make_public", fields.public_file);
+        if (fields.file_upload_folder)
+          formData.append("folder", fields.file_upload_folder);
+        if (fields.public_file)
+          formData.append("make_public", fields.public_file);
 
         let tags = fields.assign_file_tags || [];
 
@@ -246,15 +355,24 @@ export async function upload(fields, e) {
 
         let _domain = e._session.domain;
         if (e._session.is_deployment) {
-          _domain = e._session.opt.regional_server === "dev.xuda.io" ? "dev.xuda.io" : "xuda.io";
+          _domain =
+            e._session.opt.regional_server === "dev.xuda.io"
+              ? "dev.xuda.io"
+              : "xuda.io";
         }
 
         if (overrideAction === "replace" && file.name in existingFiles) {
           formData.append("file_path", "/" + file.name);
           formData.append("file_name", file.name);
-          request.open("POST", `https://${_domain}/cpi/update_drive_file_workspace`);
+          request.open(
+            "POST",
+            `https://${_domain}/cpi/update_drive_file_workspace`
+          );
         } else {
-          request.open("POST", `https://${_domain}/cpi/upload_drive_file_workspace`);
+          request.open(
+            "POST",
+            `https://${_domain}/cpi/upload_drive_file_workspace`
+          );
         }
 
         request.setRequestHeader("xu-gtp-token", gtp_token);
@@ -307,7 +425,7 @@ export async function upload(fields, e) {
 
             // Let FilePond know the request has been cancelled
             abort();
-          }
+          },
         };
       },
 
@@ -325,12 +443,15 @@ export async function upload(fields, e) {
         let app_id = e._session.app_id;
         let app_id_reference = APP_OBJ[app_id].app_id_reference;
 
-        axios_ajax(func.common.get_url(e.SESSION_ID, "rpi", "runtime_delete_file_bulk"), {
-          app_id,
-          server_files: ret_obj.deletedArr,
-          app_id_reference: app_id_reference,
-          gtp_token: e._session.gtp_token
-        });
+        axios_ajax(
+          func.common.get_url(e.SESSION_ID, "rpi", "runtime_delete_file_bulk"),
+          {
+            app_id,
+            server_files: ret_obj.deletedArr,
+            app_id_reference: app_id_reference,
+            gtp_token: e._session.gtp_token,
+          }
+        );
         load();
       },
       remove: (source, load, error) => {
@@ -338,20 +459,23 @@ export async function upload(fields, e) {
 
         ret_obj.deletedArr.push(source_clean);
 
-        var myIndex = ret_obj.app_files.indexOf((file) => file.server_fileName === source);
+        var myIndex = ret_obj.app_files.indexOf(
+          (file) => file.server_fileName === source
+        );
         if (myIndex !== -1) {
           ret_obj.app_files.splice(myIndex, 1);
         }
 
         ////////////// CALLBACK
-        if (fields.instant_file_upload === "N" ? false : true) do_callback(true);
+        if (fields.instant_file_upload === "N" ? false : true)
+          do_callback(true);
         // Can call the error method if something is wrong, should exit after
         // error('oh my goodness');
 
         // Should call the load method when done, no parameters required
         load();
-      }
-    }
+      },
+    },
   };
 
   if (fields.file_upload_drop_area_label) {
@@ -420,28 +544,46 @@ export async function upload(fields, e) {
 
   return {
     pond,
-    processFiles
+    processFiles,
   };
 }
 
 export async function viewer(fields, e) {
   const { app_id, gtp_token, app_token } = e._session;
 
-  await func.utils.load_js_on_demand("https://cdn.tailwindcss.com?plugins=forms");
+  await func.utils.load_js_on_demand(
+    "https://cdn.tailwindcss.com?plugins=forms"
+  );
 
-  await func.utils.load_js_on_demand("https://cdn.jsdelivr.net/npm/vue@3.5.6/dist/vue.global.js");
+  await func.utils.load_js_on_demand(
+    "https://cdn.jsdelivr.net/npm/vue@3.5.6/dist/vue.global.js"
+  );
 
-  await func.utils.load_js_on_demand("https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js");
+  await func.utils.load_js_on_demand(
+    "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"
+  );
 
-  await func.utils.load_js_on_demand("https://unpkg.com/swiper/swiper-bundle.min.js");
-  await func.utils.load_css_on_demand("https://unpkg.com/swiper/swiper-bundle.min.css");
+  await func.utils.load_js_on_demand(
+    "https://unpkg.com/swiper/swiper-bundle.min.js"
+  );
+  await func.utils.load_css_on_demand(
+    "https://unpkg.com/swiper/swiper-bundle.min.css"
+  );
 
   await func.utils.load_js_on_demand("https://unpkg.com/@vueuse/shared");
   await func.utils.load_js_on_demand("https://unpkg.com/@vueuse/core");
-  await func.utils.load_js_on_demand("https://unpkg.com/@floating-ui/core@1.1.1");
-  await func.utils.load_js_on_demand("https://unpkg.com/@floating-ui/dom@1.1.1");
-  await func.utils.load_js_on_demand("https://unpkg.com/floating-vue@5.2.2/dist/floating-vue.umd.js");
-  await func.utils.load_css_on_demand("https://unpkg.com/floating-vue@^5.2.2/dist/style.css");
+  await func.utils.load_js_on_demand(
+    "https://unpkg.com/@floating-ui/core@1.1.1"
+  );
+  await func.utils.load_js_on_demand(
+    "https://unpkg.com/@floating-ui/dom@1.1.1"
+  );
+  await func.utils.load_js_on_demand(
+    "https://unpkg.com/floating-vue@5.2.2/dist/floating-vue.umd.js"
+  );
+  await func.utils.load_css_on_demand(
+    "https://unpkg.com/floating-vue@^5.2.2/dist/style.css"
+  );
 
   var fs = import("./fs-lightbox.js");
 
@@ -485,7 +627,7 @@ export async function viewer(fields, e) {
                   ></circle>
                 </svg>
               </div>
-    `
+    `,
   };
 
   var segmentComponent = {
@@ -499,7 +641,7 @@ export async function viewer(fields, e) {
         },
         set(v) {
           this.$emit("update:modelValue", v);
-        }
+        },
       },
       segmentActive() {
         // debugger;
@@ -509,7 +651,7 @@ export async function viewer(fields, e) {
 
         // debugger;
         return ret;
-      }
+      },
     },
     template: `
           <div class="flex relative items-center rounded-lg bg-gray-100 [&>button]:px-4 [&>button]:py-2">
@@ -522,7 +664,7 @@ export async function viewer(fields, e) {
         
           <div :style="{ left: segmentActive > 0 ? (Number(segmentActive) / options.length) * 100 + '%' : 0, width: 100 / options.length + '%' }" class="after:absolute transition-all duration-300 after:inset-[3px] after:bg-white after:rounded-lg after:shadow absolute h-full rounded"></div>
         </div>
-    `
+    `,
   };
 
   // <input type="text" ref="search" placeholder="Search" @focus="search.length ? (showSearchPopper = true) : ''" @blur="hideSearchPopper" class="border-0 ring-0 focus:ring-0 py-0 px-1" v-model.trim="search" @keyup.delete="removeLastSearch" />
@@ -674,7 +816,7 @@ export async function viewer(fields, e) {
     </template>
 
     <div v-if="view === 'slider'" class="relative flex items-center justify-between py-4 px-4 flex-1 h-full overflow-hidden">
-      <div class="absolute inset-y-0 left-6 z-10 flex items-center">
+      <div v-if="options.navigation" class="absolute inset-y-0 left-6 z-10 flex items-center">
         <button @click="options.direction === 'rtl' ? swiper.slideNext() : swiper.slidePrev()" class="bg-white -ml-2 lg:-ml-4 flex justify-center items-center w-10 h-10 rounded-full shadow focus:outline-none">
           <svg viewBox="0 0 20 20" fill="currentColor" class="chevron-left w-6 h-6"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
         </button>
@@ -693,7 +835,7 @@ export async function viewer(fields, e) {
         </div>
       </div>
 
-      <div class="absolute inset-y-0 right-6 z-10 flex items-center">
+      <div v-if="options.navigation" class="absolute inset-y-0 right-6 z-10 flex items-center">
         <button @click="options.direction === 'rtl' ? swiper.slidePrev() : swiper.slideNext()" class="bg-white -mr-2 lg:-mr-4 flex justify-center items-center w-10 h-10 rounded-full shadow focus:outline-none">
           <svg viewBox="0 0 20 20" fill="currentColor" class="chevron-right w-6 h-6"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
         </button>
@@ -796,7 +938,10 @@ export async function viewer(fields, e) {
   const fetcher = async function (service, opt) {
     let _domain = e._session.domain;
     if (e._session.is_deployment) {
-      _domain = e._session.opt.regional_server === "dev.xuda.io" ? "dev.xuda.io" : "xuda.io";
+      _domain =
+        e._session.opt.regional_server === "dev.xuda.io"
+          ? "dev.xuda.io"
+          : "xuda.io";
     }
 
     opt.app_id = app_id;
@@ -807,9 +952,9 @@ export async function viewer(fields, e) {
         Accept: "application/json",
         "Content-Type": "application/json",
         "xu-gtp-token": gtp_token,
-        "xu-app-token": app_token
+        "xu-app-token": app_token,
       },
-      body: JSON.stringify(opt)
+      body: JSON.stringify(opt),
     });
 
     const json = await response.json();
@@ -840,38 +985,38 @@ export async function viewer(fields, e) {
   var app = createApp({
     template: html,
     directives: {
-      tooltip: FloatingVue.vTooltip
+      tooltip: FloatingVue.vTooltip,
     },
     components: {
       VDropdown: FloatingVue.Dropdown,
       segmentComponent,
-      sepcialLoader
+      sepcialLoader,
     },
     data() {
       return {
         replaceOptions: [
           { label: "Replace existing items", value: "replace" },
-          { label: "Keep all items", value: "keep" }
+          { label: "Keep all items", value: "keep" },
         ],
         sortDirOptions: [
           {
             label: "Ascending",
-            value: "asc"
+            value: "asc",
           },
           {
             label: "Descending",
-            value: "desc"
-          }
+            value: "desc",
+          },
         ],
         sortOptions: [
           {
             label: "Date",
-            value: "date"
+            value: "date",
           },
           {
             label: "Name",
-            value: "name"
-          }
+            value: "name",
+          },
         ],
         viewOptions: [
           {
@@ -883,7 +1028,7 @@ export async function viewer(fields, e) {
               ></path>
             </svg>`,
             label: "",
-            value: "gallery"
+            value: "gallery",
           },
           {
             icon: ` <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -894,7 +1039,7 @@ export async function viewer(fields, e) {
               ></path>
             </svg>`,
             label: "",
-            value: "list"
+            value: "list",
           },
           {
             icon: ` <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
@@ -902,8 +1047,8 @@ export async function viewer(fields, e) {
                 <path d="M192,48H64A16,16,0,0,0,48,64V192a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64A16,16,0,0,0,192,48Zm0,144H64V64H192V192ZM240,56V200a8,8,0,0,1-16,0V56a8,8,0,0,1,16,0ZM32,56V200a8,8,0,0,1-16,0V56a8,8,0,0,1,16,0Z"></path>
               </svg>`,
             label: "",
-            value: "slider"
-          }
+            value: "slider",
+          },
         ],
         options: fields,
         folders: [],
@@ -924,18 +1069,18 @@ export async function viewer(fields, e) {
           {
             label: "Filename",
             tag: "name",
-            modifier: "contains"
+            modifier: "contains",
           },
           {
             label: "Tag",
             tag: "tag",
-            modifier: "equals"
+            modifier: "equals",
           },
           {
             label: "Content",
             tag: "any",
-            modifier: "contains"
-          }
+            modifier: "contains",
+          },
         ],
         opts: {
           app_id,
@@ -943,17 +1088,17 @@ export async function viewer(fields, e) {
           search_string: "",
           sort_by: fields.sort_by || "date",
           sort_dir: fields.sort_dir || "desc",
-          ...(fields.filter_tags?.length ? { tags: fields.filter_tags } : {})
+          ...(fields.filter_tags?.length ? { tags: fields.filter_tags } : {}),
           // ...filter_tags
         },
-        limit: 10,
+        limit: 50,
         isEndOfList: false,
         existingFiles: {},
         allLoading: false,
         showExistModal: false,
         overrideAction: "replace",
         pond: null,
-        processFiles: null
+        processFiles: null,
       };
     },
     methods: {
@@ -971,7 +1116,7 @@ export async function viewer(fields, e) {
         if (!bypassFolders) {
           const folders = await this.fetcher("get_drive_files_workspace", {
             ...this.opts,
-            type: "directory"
+            type: "directory",
           });
           this.folders = folders.data.children || [];
         }
@@ -979,7 +1124,7 @@ export async function viewer(fields, e) {
         const files = await this.fetcher("get_drive_files_workspace", {
           ...this.opts,
           ...(all ? {} : { from: 0, to: this.limit }),
-          type: "file"
+          type: "file",
         });
 
         this.files = files.data.children || [];
@@ -1006,7 +1151,10 @@ export async function viewer(fields, e) {
         if (is_after_confirm) {
           this.showExistModal = false;
           // this.processCb();
-          this.processFiles(null, { overrideAction: this.overrideAction, existingFiles: this.existingFiles });
+          this.processFiles(null, {
+            overrideAction: this.overrideAction,
+            existingFiles: this.existingFiles,
+          });
 
           // this.pond.on("processfile", (e) => {
           //   this.uploaderLoading = false;
@@ -1019,7 +1167,9 @@ export async function viewer(fields, e) {
           let promises = [];
           this.existingFiles = {};
 
-          var filesMapped = this.pond.getFiles().map((e) => ({ id: e.id, filename: e.file.name }));
+          var filesMapped = this.pond
+            .getFiles()
+            .map((e) => ({ id: e.id, filename: e.file.name }));
 
           filesMapped.forEach(({ filename }) => {
             promises.push(
@@ -1027,7 +1177,7 @@ export async function viewer(fields, e) {
                 this.fetcher(`check_drive_file_workspace`, {
                   file_path: "/" + filename,
                   file_name: filename,
-                  type: "file"
+                  type: "file",
                 })
                   .then((e) => {
                     resolve(e);
@@ -1055,7 +1205,9 @@ export async function viewer(fields, e) {
               }
 
               filesMapped
-                .filter((e) => !Object.keys(this.existingFiles).includes(e.filename))
+                .filter(
+                  (e) => !Object.keys(this.existingFiles).includes(e.filename)
+                )
                 .forEach((e) => {
                   this.processFiles(e.id);
                 });
@@ -1095,7 +1247,7 @@ export async function viewer(fields, e) {
       searchDebounce: _.debounce(async function ($event) {
         await this.refreshDirectory();
       }, 400),
-      moment
+      moment,
     },
     mounted() {
       var onDrop = (files) => {
@@ -1105,14 +1257,16 @@ export async function viewer(fields, e) {
       };
 
       const { isOverDropZone } = VueUse.useDropZone(this.$refs.dropZoneRef, {
-        onDrop
+        onDrop,
       });
 
       this.isOverDropZone = isOverDropZone;
     },
     computed: {
       searchTags() {
-        return this.opts.search_string.split(" ").filter((e) => e.includes(":"));
+        return this.opts.search_string
+          .split(" ")
+          .filter((e) => e.includes(":"));
       },
       search: {
         get() {
@@ -1126,9 +1280,15 @@ export async function viewer(fields, e) {
 
         set(value) {
           // debugger;
-          var existingTags = this.opts.search_string.split(" ").filter((e) => e.includes(":"));
+          var existingTags = this.opts.search_string
+            .split(" ")
+            .filter((e) => e.includes(":"));
 
-          this.opts.search_string = (existingTags.join(" ") + " " + value).trim();
+          this.opts.search_string = (
+            existingTags.join(" ") +
+            " " +
+            value
+          ).trim();
 
           console.log(value);
 
@@ -1141,15 +1301,15 @@ export async function viewer(fields, e) {
               this.showSearchPopper = false;
             }, 50);
           }
-        }
-      }
+        },
+      },
     },
     watch: {
       opts: {
         deep: true,
         handler() {
           this.searchDebounce();
-        }
+        },
       },
       view: {
         handler(val) {
@@ -1162,11 +1322,17 @@ export async function viewer(fields, e) {
                 spaceBetween: 20,
                 observer: true,
                 observeParents: true,
-                ...(fields?.direction === "rtl" ? { reverseDirection: true } : {})
+                ...fields.swiper_options,
+                // ...(fields?.direction === "rtl" ? { reverseDirection: true } : {})
               });
 
               this.swiper.on("slideChange", (event) => {
-                if (event.activeIndex >= 5 && !this.isEndOfList && !this.loadingSearch && !this.allLoading) {
+                if (
+                  event.activeIndex >= 5 &&
+                  !this.isEndOfList &&
+                  !this.loadingSearch &&
+                  !this.allLoading
+                ) {
                   this.refreshDirectory(true);
                 }
               });
@@ -1178,21 +1344,24 @@ export async function viewer(fields, e) {
             refreshFsLightbox();
           });
         },
-        immediate: true
+        immediate: true,
       },
       files() {
         this.$nextTick(() => {
           refreshFsLightbox();
           this.swiper?.update?.();
         });
-      }
+      },
     },
     async created() {
       this.refreshDirectory();
 
       this.$nextTick(async () => {
         // debugger;
-        var { pond, processFiles } = await this.initUploader({ ...fields, instant_file_upload: "N" }, { ...e, $containerP: $("#imageUploaderComponent") });
+        var { pond, processFiles } = await this.initUploader(
+          { ...fields, instant_file_upload: "N" },
+          { ...e, $containerP: $("#imageUploaderComponent") }
+        );
 
         this.pond = pond;
         this.processFiles = processFiles;
@@ -1223,7 +1392,7 @@ export async function viewer(fields, e) {
       this.$watch("opts", (value) => {
         this.refreshDirectory();
       });
-    }
+    },
   });
 
   // app.use(FloatingVue);