@mekari/pixel3-dropzone 0.0.1

package/dist/dropzone.d.ts

@@ -0,0 +1,176 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpDropzone: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<"default" | "logo" | "product" | "avatar">;
+        default: string;
+    };
+    accept: {
+        type: vue.PropType<string>;
+    };
+    name: {
+        type: vue.PropType<string>;
+    };
+    placeholder: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    description: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    loadingText: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    buttonText: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    overlayVariant: {
+        type: vue.PropType<"white" | "black">;
+        default: string;
+    };
+    isShowPreview: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isMultiple: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isLoading: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isRequired: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    hasCustomUpload: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isEnableDragAndDrop: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isEnableInputFile: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowOverlay: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, string[], string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<"default" | "logo" | "product" | "avatar">;
+        default: string;
+    };
+    accept: {
+        type: vue.PropType<string>;
+    };
+    name: {
+        type: vue.PropType<string>;
+    };
+    placeholder: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    description: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    loadingText: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    buttonText: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    overlayVariant: {
+        type: vue.PropType<"white" | "black">;
+        default: string;
+    };
+    isShowPreview: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isMultiple: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isLoading: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isRequired: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    hasCustomUpload: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isEnableDragAndDrop: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isEnableInputFile: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowOverlay: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    id: string;
+    variant: "default" | "logo" | "product" | "avatar";
+    placeholder: string;
+    description: string;
+    loadingText: string;
+    buttonText: string;
+    overlayVariant: "white" | "black";
+    isShowPreview: boolean;
+    isMultiple: boolean;
+    isLoading: boolean;
+    isDisabled: boolean;
+    isInvalid: boolean;
+    isRequired: boolean;
+    hasCustomUpload: boolean;
+    isEnableDragAndDrop: boolean;
+    isEnableInputFile: boolean;
+    isShowOverlay: boolean;
+}, {}>;
+
+export { MpDropzone };

package/dist/dropzone.js

@@ -0,0 +1,502 @@
+"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/dropzone.tsx
+var dropzone_exports = {};
+__export(dropzone_exports, {
+  MpDropzone: () => MpDropzone
+});
+module.exports = __toCommonJS(dropzone_exports);
+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/dropzone.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/index.d.mts

@@ -0,0 +1,3 @@
+export { MpDropzone } from './dropzone.mjs';
+import 'vue/jsx-runtime';
+import 'vue';

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { MpDropzone } from './dropzone.js';
+import 'vue/jsx-runtime';
+import 'vue';