@devkitvue/filemanager/dist/index.es.js

Devkit Base Components is a Vue plugin offering a collection of reusable, headless components designed to streamline your Vue.js development workflow. Built for flexibility and maintainability, this library gives you complete control over styling and beha

import { defineComponent as _, ref as g, inject as h, resolveComponent as r, createElementBlock as d, unref as a, openBlock as p, createVNode as n, createElementVNode as S, withCtx as u, renderSlot as x } from "vue";
import { useDatalistStoreWithProps as w, DataList as I } from "@devkitvue/datalist";
const F = {
  $formkit: "devkitDropdown",
  useButtons: !0,
  options: "bucketList",
  responseOptionsKey: "buckets",
  optionValue: "id",
  optionLabel: "name",
  validation: "required",
  prefixIcon: "tools",
  showClear: !0,
  outerClass: "col-12 sm:col-6 md:col-3",
  name: "bucketId",
  placeholder: "buckets"
}, C = {
  bucket_info: {
    isTitleHidden: !0,
    isTransparent: !0,
    inputs: [
      {
        $formkit: "text",
        prefixIcon: "tools",
        outerClass: "col-12 sm:col-6 md:col-5",
        name: "bucketName",
        validation: "required",
        placeholder: "bucketName",
        label: "bucketName"
      },
      {
        $formkit: "text",
        prefixIcon: "tools",
        outerClass: "col-12 sm:col-6 md:col-5",
        name: "fileSizeLimit",
        placeholder: "fileSizeLimit",
        label: "fileSizeLimit"
      },
      {
        $formkit: "devkitDropdown",
        options: [{ label: "image/webp", value: "image/webp" }],
        optionValue: "label",
        optionLabel: "value",
        multiple: !0,
        prefixIcon: "tools",
        outerClass: "col-12 sm:col-6 md:col-5",
        name: "allowedFileTypes",
        placeholder: "allowedFileTypes",
        label: "allowedFileTypes"
      },
      {
        $formkit: "checkbox",
        prefixIcon: "tools",
        outerClass: "col-12 sm:col-6 md:col-5",
        name: "isPulic",
        value: !0,
        placeholder: "isPulic",
        label: "userPassword"
      }
    ]
  }
}, N = { key: 0 }, L = {
  key: 1,
  class: "buckets"
}, B = /* @__PURE__ */ _({
  __name: "FileManager",
  props: {
    bucketName: {},
    isSelectionHidden: { type: Boolean }
  },
  setup(i) {
    const o = g(null), e = h("filesHandler"), l = i, s = e ? {
      context: {
        datalistKey: "files",
        hideShowDeleted: !0,
        title: "files",
        formSections: C,
        rowIdentifier: "id",
        filters: l.bucketName ? void 0 : [F],
        isSelectionHidden: l.isSelectionHidden,
        requestMapper: l.bucketName ? (t) => ({
          filters: {
            ...t.filters,
            bucketId: l.bucketName
          },
          paginationParams: t.paginationParams
        }) : void 0,
        records: e.galleryListEndpoint,
        isServerSide: !0,
        isPresistFilters: !0,
        displayType: "card",
        isLazyFilters: !1,
        isActionsDropdown: !1,
        options: { title: "asd", description: "asd" }
      }
    } : void 0, m = s ? w(s) : void 0, f = () => {
      o.value && o.value.click();
    }, b = (t) => {
      m && console.log("submitted value is ", t);
    };
    return (t, P) => {
      const k = r("FormKit"), v = r("AppImage"), y = r("AppBtn");
      return !a(e) || !a(s) ? (p(), d("div", N, " files handler is not passed on config ")) : (p(), d("div", L, [
        n(k, {
          type: "devkitUpload",
          hideSelectFromGallery: !0,
          bucketName: "images",
          name: "image",
          label: "upload"
        }),
        S("input", {
          type: "file",
          ref_key: "fileInput",
          ref: o,
          style: { display: "none" }
        }, null, 512),
        n(a(I), {
          context: a(s).context,
          "onCreate:submited": b
        }, {
          card: u(({ data: c }) => [
            x(t.$slots, "card", {
              data: c
            }, () => [
              n(v, {
                src: c.name
              }, null, 8, ["src"])
            ])
          ]),
          globalActionsStartAppend: u(() => [
            n(y, {
              action: f,
              label: "upload"
            })
          ]),
          _: 3
        }, 8, ["context"])
      ]));
    };
  }
}), H = {
  install(i, { apiClient: o, filesHandler: e }) {
    i.provide("apiClient", o), e && i.provide("filesHandler", e);
  }
};
export {
  B as FileManager,
  H as default
};