@mekari/pixel3-dropzone 0.0.1

package/dist/index.js

@@ -0,0 +1,504 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  MpDropzone: () => MpDropzone
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/dropzone.tsx
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+var import_pixel3_text = require("@mekari/pixel3-text");
+var import_pixel3_icon = require("@mekari/pixel3-icon");
+var import_pixel3_spinner = require("@mekari/pixel3-spinner");
+
+// src/modules/dropzone.props.ts
+var dropzoneProps = {
+  id: {
+    type: String,
+    default: ""
+  },
+  variant: {
+    type: String,
+    default: "default"
+  },
+  accept: {
+    type: String
+  },
+  name: {
+    type: String
+  },
+  placeholder: {
+    type: String,
+    default: "Drop your file(s) here or "
+  },
+  description: {
+    type: String,
+    default: "Description of dropzone"
+  },
+  loadingText: {
+    type: String,
+    default: "Uploading..."
+  },
+  buttonText: {
+    type: String,
+    default: "Change file"
+  },
+  overlayVariant: {
+    type: String,
+    default: "white"
+  },
+  isShowPreview: {
+    type: Boolean,
+    default: true
+  },
+  isMultiple: {
+    type: Boolean,
+    default: false
+  },
+  isLoading: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  },
+  isRequired: {
+    type: Boolean,
+    default: false
+  },
+  hasCustomUpload: {
+    type: Boolean,
+    default: false
+  },
+  isEnableDragAndDrop: {
+    type: Boolean,
+    default: true
+  },
+  isEnableInputFile: {
+    type: Boolean,
+    default: false
+  },
+  isShowOverlay: {
+    type: Boolean,
+    default: false
+  }
+};
+var dropzoneEmit = ["click", "dragover", "dragleave", "drop", "change", "clear", "cancel"];
+
+// src/modules/dropzone.hooks.ts
+var import_vue = require("vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+function useDropzone(props, emit) {
+  const {
+    id,
+    variant,
+    name,
+    accept,
+    isMultiple,
+    hasCustomUpload,
+    overlayVariant,
+    isEnableInputFile,
+    isEnableDragAndDrop,
+    isShowPreview,
+    isShowOverlay,
+    isLoading,
+    isInvalid,
+    isDisabled,
+    isRequired
+  } = (0, import_vue.toRefs)(props);
+  const files = (0, import_vue.ref)();
+  const fileInput = (0, import_vue.ref)();
+  const preview = (0, import_vue.ref)("");
+  const showOverlay = (0, import_vue.ref)(isShowOverlay.value);
+  const overlay = (0, import_vue.ref)();
+  const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "dropzone").value;
+  const hasPreview = (0, import_vue.computed)(() => {
+    return isShowPreview.value && preview.value;
+  });
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpDropzone",
+      id: getId,
+      class: (0, import_recipes.dropzoneSlotRecipe)().root,
+      onClick: handleClick,
+      onDragover: handleDragover,
+      onDragleave: handleDragleave,
+      onDrop: handleDrop
+    };
+  });
+  const wrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-invalid": isInvalid.value || void 0,
+      "data-disabled": isDisabled.value || void 0,
+      "data-variant": variant.value,
+      tabindex: isDisabled.value ? -1 : 0,
+      class: (0, import_recipes.dropzoneSlotRecipe)().wrapper,
+      style: {
+        background: variant.value === "default" ? "var(--mp-colors-white)" : "var(--mp-colors-background)",
+        borderRadius: variant.value === "avatar" ? "var(--mp-radii-full)" : "var(--mp-radii-md)"
+      }
+    };
+  });
+  const boxAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.dropzoneSlotRecipe)().box
+    };
+  });
+  const logoBoxAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.dropzoneSlotRecipe)().logoBox,
+      onClick: handleClickInput
+    };
+  });
+  const productBoxAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.dropzoneSlotRecipe)().productBox,
+      onClick: handleClickInput
+    };
+  });
+  const avatarBoxAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.dropzoneSlotRecipe)().avatarBox,
+      onClick: handleClickInput
+    };
+  });
+  const overlayWrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.dropzoneSlotRecipe)().overlayWrapper
+    };
+  });
+  const overlayAttrs = (0, import_vue.computed)(() => {
+    return {
+      ref: overlay,
+      class: (0, import_recipes.dropzoneSlotRecipe)().overlay,
+      style: {
+        display: showOverlay.value ? "flex" : "none",
+        background: overlayVariant.value === "white" ? "var(--mp-colors-whiteAlpha.300)" : "var(--mp-colors-overlay)"
+      }
+    };
+  });
+  const inputAttrs = (0, import_vue.computed)(() => {
+    return {
+      ref: fileInput,
+      id: `input-${getId}`,
+      class: (0, import_recipes.sharedSlotRecipe)().hidden,
+      type: "file",
+      name: name == null ? void 0 : name.value,
+      accept: accept == null ? void 0 : accept.value,
+      multiple: isMultiple.value,
+      disabled: isDisabled.value,
+      required: isRequired.value,
+      onChange: handleChangeInput
+    };
+  });
+  const cancelButtonAttrs = (0, import_vue.computed)(() => {
+    return {
+      color: "red.400",
+      style: {
+        cursor: "pointer"
+      },
+      onClick: handleCancel
+    };
+  });
+  const browseButtonAttrs = (0, import_vue.computed)(() => {
+    return {
+      as: "span",
+      weight: "semiBold",
+      color: "blue.400",
+      style: {
+        cursor: "pointer"
+      },
+      onClick: handleClickInput
+    };
+  });
+  const previewAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.dropzoneSlotRecipe)().preview
+    };
+  });
+  const overlayPreviewAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-overlay-preview": true,
+      class: (0, import_recipes.dropzoneSlotRecipe)().overlayPreview,
+      onClick: handleClickInput
+    };
+  });
+  const imageAttrs = (0, import_vue.computed)(() => {
+    return {
+      src: preview.value,
+      style: {
+        borderRadius: "inherit",
+        height: "100%",
+        objectFit: "cover"
+      }
+    };
+  });
+  const clearButtonAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.dropzoneSlotRecipe)().clearButton,
+      name: "minus-circular",
+      variant: "fill",
+      color: "red.400",
+      style: {
+        top: variant.value === "avatar" ? "-4px" : "-10px",
+        right: variant.value === "avatar" ? "-4px" : "-10px"
+      },
+      onClick: handleClear
+    };
+  });
+  function handleClick(e) {
+    if (!isEnableInputFile.value) {
+      return;
+    }
+    handleClickInput();
+    emit("click", e);
+  }
+  __name(handleClick, "handleClick");
+  function handleClickInput() {
+    if (isDisabled.value) {
+      return;
+    }
+    files.value = null;
+    fileInput.value.value = null;
+    fileInput.value.click();
+  }
+  __name(handleClickInput, "handleClickInput");
+  function handleDragover(e) {
+    e.preventDefault();
+    if (!isEnableDragAndDrop.value) {
+      return;
+    }
+    emit("dragover", e);
+    if (hasCustomUpload.value) {
+      showOverlay.value = true;
+    }
+  }
+  __name(handleDragover, "handleDragover");
+  function handleDragleave(e) {
+    if (!isEnableDragAndDrop.value) {
+      return;
+    }
+    emit("dragleave", e);
+    if (e.target === overlay.value) {
+      showOverlay.value = false;
+    }
+  }
+  __name(handleDragleave, "handleDragleave");
+  function handleDrop(e) {
+    e.preventDefault();
+    if (!isEnableDragAndDrop.value) {
+      return;
+    }
+    emit("drop", e);
+    const target = e.dataTransfer;
+    if (target && target.files) {
+      const {
+        files: files2
+      } = target;
+      handleFiles(files2);
+    }
+    if (hasCustomUpload.value) {
+      showOverlay.value = false;
+    }
+  }
+  __name(handleDrop, "handleDrop");
+  function handleChangeInput(e) {
+    const target = e.target;
+    if (target && target.files) {
+      const {
+        files: files2
+      } = target;
+      handleFiles(files2);
+    }
+  }
+  __name(handleChangeInput, "handleChangeInput");
+  function handleFiles(item) {
+    if (isDisabled.value) {
+      return;
+    }
+    if (item && item.length > 0) {
+      files.value = item;
+    }
+    emit("change", files.value);
+    if (files.value && files.value.length === 1) {
+      handlePreview(files.value[0]);
+    }
+  }
+  __name(handleFiles, "handleFiles");
+  function handlePreview(item) {
+    if (isLoading.value) {
+      return;
+    }
+    const REGEXP_MIME_TYPE_IMAGES = /^image\/\w+$/;
+    if (REGEXP_MIME_TYPE_IMAGES.test(item.type)) {
+      preview.value = URL.createObjectURL(item);
+    }
+  }
+  __name(handlePreview, "handlePreview");
+  function handleClear(e) {
+    e.stopPropagation();
+    emit("clear", e);
+    files.value = null;
+    preview.value = "";
+  }
+  __name(handleClear, "handleClear");
+  function handleCancel(e) {
+    e.stopPropagation();
+    emit("cancel", e);
+  }
+  __name(handleCancel, "handleCancel");
+  return {
+    rootAttrs,
+    wrapperAttrs,
+    boxAttrs,
+    logoBoxAttrs,
+    productBoxAttrs,
+    avatarBoxAttrs,
+    overlayWrapperAttrs,
+    overlayAttrs,
+    inputAttrs,
+    imageAttrs,
+    cancelButtonAttrs,
+    browseButtonAttrs,
+    previewAttrs,
+    overlayPreviewAttrs,
+    clearButtonAttrs,
+    hasPreview
+  };
+}
+__name(useDropzone, "useDropzone");
+
+// src/dropzone.tsx
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue2.isVNode)(s);
+}
+__name(_isSlot, "_isSlot");
+var MpDropzone = (0, import_vue3.defineComponent)({
+  name: "MpDropzone",
+  props: dropzoneProps,
+  emits: dropzoneEmit,
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const {
+      rootAttrs,
+      wrapperAttrs,
+      boxAttrs,
+      logoBoxAttrs,
+      productBoxAttrs,
+      avatarBoxAttrs,
+      overlayWrapperAttrs,
+      overlayAttrs,
+      inputAttrs,
+      imageAttrs,
+      cancelButtonAttrs,
+      browseButtonAttrs,
+      previewAttrs,
+      overlayPreviewAttrs,
+      clearButtonAttrs,
+      hasPreview
+    } = useDropzone(props, emit);
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        variant,
+        placeholder,
+        description,
+        buttonText,
+        loadingText,
+        overlayVariant,
+        isLoading,
+        isInvalid
+      } = props;
+      return (0, import_vue2.createVNode)("div", rootAttrs.value, [children ? (0, import_vue2.createVNode)("div", overlayWrapperAttrs.value, [(0, import_vue2.createVNode)("div", overlayAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "weight": "semiBold",
+        "color": overlayVariant === "white" ? "dark" : "white"
+      }, _isSlot(placeholder) ? placeholder : {
+        default: () => [placeholder]
+      }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "color": overlayVariant === "white" ? "dark" : "white"
+      }, _isSlot(description) ? description : {
+        default: () => [description]
+      })]), children]) : (0, import_vue2.createVNode)("div", wrapperAttrs.value, [isLoading && (0, import_vue2.createVNode)("div", boxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_spinner.MpSpinner, null, null), variant !== "avatar" && (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "color": "gray.600"
+      }, _isSlot(loadingText) ? loadingText : {
+        default: () => [loadingText]
+      }), variant === "default" && (0, import_vue2.createVNode)(import_pixel3_text.MpText, cancelButtonAttrs.value, {
+        default: () => [(0, import_vue2.createTextVNode)("Cancel")]
+      })]), !isLoading && hasPreview.value && (0, import_vue2.createVNode)("div", previewAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, clearButtonAttrs.value, null), (0, import_vue2.createVNode)("div", overlayPreviewAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
+        "name": "folder-open",
+        "variant": "fill",
+        "color": "white"
+      }, null), variant !== "avatar" && (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "color": "white"
+      }, _isSlot(buttonText) ? buttonText : {
+        default: () => [buttonText]
+      })]), (0, import_vue2.createVNode)("img", imageAttrs.value, null)]), !isLoading && !hasPreview.value && variant === "default" && (0, import_vue2.createVNode)("div", boxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
+        "name": "upload",
+        "variant": isInvalid ? "outline" : "duotone",
+        "color": isInvalid ? "red.400" : "gray.600"
+      }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, null, {
+        default: () => [placeholder, (0, import_vue2.createVNode)(import_pixel3_text.MpText, browseButtonAttrs.value, {
+          default: () => [(0, import_vue2.createTextVNode)("Browse")]
+        })]
+      }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "color": "gray.600"
+      }, _isSlot(description) ? description : {
+        default: () => [description]
+      })]), !isLoading && !hasPreview.value && variant === "logo" && (0, import_vue2.createVNode)("div", logoBoxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
+        "name": "img",
+        "variant": isInvalid ? "fill" : "outline",
+        "color": isInvalid ? "red.400" : "gray.600"
+      }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "color": isInvalid ? "red.400" : "gray.600"
+      }, _isSlot(placeholder) ? placeholder : {
+        default: () => [placeholder]
+      })]), !isLoading && !hasPreview.value && variant === "product" && (0, import_vue2.createVNode)("div", productBoxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
+        "name": "add-circular",
+        "variant": isInvalid ? "fill" : "outline",
+        "color": isInvalid ? "red.400" : "gray.600"
+      }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "color": isInvalid ? "red.400" : "gray.600"
+      }, _isSlot(placeholder) ? placeholder : {
+        default: () => [placeholder]
+      })]), !isLoading && !hasPreview.value && variant === "avatar" && (0, import_vue2.createVNode)("div", avatarBoxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "size": "h1",
+        "color": isInvalid ? "red.400" : "gray.600"
+      }, _isSlot(placeholder) ? placeholder : {
+        default: () => [placeholder]
+      })])]), (0, import_vue2.createVNode)("input", inputAttrs.value, null)]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpDropzone
+});

package/dist/index.mjs

@@ -0,0 +1,9 @@
+import {
+  MpDropzone
+} from "./chunk-DEUKYB7V.mjs";
+import "./chunk-PB3KHIIV.mjs";
+import "./chunk-CQO276YD.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpDropzone
+};

package/dist/metafile-cjs.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/dropzone.props.ts":{"bytes":2052,"imports":[],"format":"esm"},"src/modules/dropzone.hooks.ts":{"bytes":6931,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/dropzone.tsx":{"bytes":4803,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"src/modules/dropzone.props.ts","kind":"import-statement","original":"./modules/dropzone.props"},{"path":"src/modules/dropzone.hooks.ts","kind":"import-statement","original":"./modules/dropzone.hooks"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":125,"imports":[{"path":"src/dropzone.tsx","kind":"import-statement","original":"./dropzone"}],"format":"esm"}},"outputs":{"dist/dropzone.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-spinner","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/dropzone.tsx","inputs":{"src/dropzone.tsx":{"bytesInOutput":5574},"src/modules/dropzone.props.ts":{"bytesInOutput":1260},"src/modules/dropzone.hooks.ts":{"bytesInOutput":7624}},"bytes":15561},"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-spinner","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":125},"src/dropzone.tsx":{"bytesInOutput":5434},"src/modules/dropzone.props.ts":{"bytesInOutput":1260},"src/modules/dropzone.hooks.ts":{"bytesInOutput":7624}},"bytes":15563},"dist/modules/dropzone.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/dropzone.hooks.ts","inputs":{"src/modules/dropzone.hooks.ts":{"bytesInOutput":7784}},"bytes":8812},"dist/modules/dropzone.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/dropzone.props.ts","inputs":{"src/modules/dropzone.props.ts":{"bytesInOutput":1460}},"bytes":2416}}}

package/dist/metafile-esm.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/dropzone.props.ts":{"bytes":2052,"imports":[],"format":"esm"},"src/modules/dropzone.hooks.ts":{"bytes":6931,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/dropzone.tsx":{"bytes":4803,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"src/modules/dropzone.props.ts","kind":"import-statement","original":"./modules/dropzone.props"},{"path":"src/modules/dropzone.hooks.ts","kind":"import-statement","original":"./modules/dropzone.hooks"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":125,"imports":[{"path":"src/dropzone.tsx","kind":"import-statement","original":"./dropzone"}],"format":"esm"}},"outputs":{"dist/dropzone.mjs":{"imports":[{"path":"dist/chunk-DEUKYB7V.mjs","kind":"import-statement"},{"path":"dist/chunk-PB3KHIIV.mjs","kind":"import-statement"},{"path":"dist/chunk-CQO276YD.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpDropzone"],"entryPoint":"src/dropzone.tsx","inputs":{},"bytes":171},"dist/index.mjs":{"imports":[{"path":"dist/chunk-DEUKYB7V.mjs","kind":"import-statement"},{"path":"dist/chunk-PB3KHIIV.mjs","kind":"import-statement"},{"path":"dist/chunk-CQO276YD.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpDropzone"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":171},"dist/chunk-DEUKYB7V.mjs":{"imports":[{"path":"dist/chunk-PB3KHIIV.mjs","kind":"import-statement"},{"path":"dist/chunk-CQO276YD.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true}],"exports":["MpDropzone"],"inputs":{"src/dropzone.tsx":{"bytesInOutput":4610}},"bytes":4832},"dist/modules/dropzone.hooks.mjs":{"imports":[{"path":"dist/chunk-PB3KHIIV.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useDropzone"],"entryPoint":"src/modules/dropzone.hooks.ts","inputs":{},"bytes":113},"dist/chunk-PB3KHIIV.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["useDropzone"],"inputs":{"src/modules/dropzone.hooks.ts":{"bytesInOutput":7035}},"bytes":7145},"dist/modules/dropzone.props.mjs":{"imports":[{"path":"dist/chunk-CQO276YD.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["dropzoneEmit","dropzoneProps"],"entryPoint":"src/modules/dropzone.props.ts","inputs":{},"bytes":149},"dist/chunk-CQO276YD.mjs":{"imports":[],"exports":["dropzoneEmit","dropzoneProps"],"inputs":{"src/modules/dropzone.props.ts":{"bytesInOutput":1260}},"bytes":1338},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}

package/dist/modules/dropzone.hooks.d.mts

@@ -0,0 +1,109 @@
+import * as vue from 'vue';
+import { DropzoneProps, DropzoenEmits } from './dropzone.props.mjs';
+
+declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        id: string | undefined;
+        class: string;
+        onClick: (e: Event) => void;
+        onDragover: (e: DragEvent) => void;
+        onDragleave: (e: DragEvent) => void;
+        onDrop: (e: DragEvent) => void;
+    }>;
+    wrapperAttrs: vue.ComputedRef<{
+        'data-invalid': true | undefined;
+        'data-disabled': true | undefined;
+        'data-variant': "default" | "logo" | "product" | "avatar";
+        tabindex: number;
+        class: string;
+        style: {
+            background: string;
+            borderRadius: string;
+        };
+    }>;
+    boxAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    logoBoxAttrs: vue.ComputedRef<{
+        class: string;
+        onClick: () => void;
+    }>;
+    productBoxAttrs: vue.ComputedRef<{
+        class: string;
+        onClick: () => void;
+    }>;
+    avatarBoxAttrs: vue.ComputedRef<{
+        class: string;
+        onClick: () => void;
+    }>;
+    overlayWrapperAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    overlayAttrs: vue.ComputedRef<{
+        ref: vue.Ref<any>;
+        class: string;
+        style: {
+            display: string;
+            background: string;
+        };
+    }>;
+    inputAttrs: vue.ComputedRef<{
+        ref: vue.Ref<any>;
+        id: string;
+        class: string;
+        type: string;
+        name: string | undefined;
+        accept: string | undefined;
+        multiple: boolean;
+        disabled: boolean;
+        required: boolean;
+        onChange: (e: Event) => void;
+    }>;
+    imageAttrs: vue.ComputedRef<{
+        src: string;
+        style: {
+            borderRadius: string;
+            height: string;
+            objectFit: "cover";
+        };
+    }>;
+    cancelButtonAttrs: vue.ComputedRef<{
+        color: string;
+        style: {
+            cursor: string;
+        };
+        onClick: (e: Event) => void;
+    }>;
+    browseButtonAttrs: vue.ComputedRef<{
+        as: "span";
+        weight: "semiBold";
+        color: string;
+        style: {
+            cursor: string;
+        };
+        onClick: () => void;
+    }>;
+    previewAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    overlayPreviewAttrs: vue.ComputedRef<{
+        'data-overlay-preview': boolean;
+        class: string;
+        onClick: () => void;
+    }>;
+    clearButtonAttrs: vue.ComputedRef<{
+        class: string;
+        name: string;
+        variant: "fill";
+        color: "red.400";
+        style: {
+            top: string;
+            right: string;
+        };
+        onClick: (e: Event) => void;
+    }>;
+    hasPreview: vue.ComputedRef<string | false>;
+};
+
+export { useDropzone };