@mekari/pixel3-dropzone 0.0.1

package/dist/chunk-CQO276YD.mjs

@@ -0,0 +1,83 @@
+// 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"];
+
+export {
+  dropzoneProps,
+  dropzoneEmit
+};

package/dist/chunk-DEUKYB7V.mjs

@@ -0,0 +1,123 @@
+import {
+  useDropzone
+} from "./chunk-PB3KHIIV.mjs";
+import {
+  dropzoneEmit,
+  dropzoneProps
+} from "./chunk-CQO276YD.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/dropzone.tsx
+import { createTextVNode as _createTextVNode, createVNode as _createVNode, isVNode as _isVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpText } from "@mekari/pixel3-text";
+import { MpIcon } from "@mekari/pixel3-icon";
+import { MpSpinner } from "@mekari/pixel3-spinner";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !_isVNode(s);
+}
+__name(_isSlot, "_isSlot");
+var MpDropzone = 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 _createVNode("div", rootAttrs.value, [children ? _createVNode("div", overlayWrapperAttrs.value, [_createVNode("div", overlayAttrs.value, [_createVNode(MpText, {
+        "weight": "semiBold",
+        "color": overlayVariant === "white" ? "dark" : "white"
+      }, _isSlot(placeholder) ? placeholder : {
+        default: () => [placeholder]
+      }), _createVNode(MpText, {
+        "color": overlayVariant === "white" ? "dark" : "white"
+      }, _isSlot(description) ? description : {
+        default: () => [description]
+      })]), children]) : _createVNode("div", wrapperAttrs.value, [isLoading && _createVNode("div", boxAttrs.value, [_createVNode(MpSpinner, null, null), variant !== "avatar" && _createVNode(MpText, {
+        "color": "gray.600"
+      }, _isSlot(loadingText) ? loadingText : {
+        default: () => [loadingText]
+      }), variant === "default" && _createVNode(MpText, cancelButtonAttrs.value, {
+        default: () => [_createTextVNode("Cancel")]
+      })]), !isLoading && hasPreview.value && _createVNode("div", previewAttrs.value, [_createVNode(MpIcon, clearButtonAttrs.value, null), _createVNode("div", overlayPreviewAttrs.value, [_createVNode(MpIcon, {
+        "name": "folder-open",
+        "variant": "fill",
+        "color": "white"
+      }, null), variant !== "avatar" && _createVNode(MpText, {
+        "color": "white"
+      }, _isSlot(buttonText) ? buttonText : {
+        default: () => [buttonText]
+      })]), _createVNode("img", imageAttrs.value, null)]), !isLoading && !hasPreview.value && variant === "default" && _createVNode("div", boxAttrs.value, [_createVNode(MpIcon, {
+        "name": "upload",
+        "variant": isInvalid ? "outline" : "duotone",
+        "color": isInvalid ? "red.400" : "gray.600"
+      }, null), _createVNode(MpText, null, {
+        default: () => [placeholder, _createVNode(MpText, browseButtonAttrs.value, {
+          default: () => [_createTextVNode("Browse")]
+        })]
+      }), _createVNode(MpText, {
+        "color": "gray.600"
+      }, _isSlot(description) ? description : {
+        default: () => [description]
+      })]), !isLoading && !hasPreview.value && variant === "logo" && _createVNode("div", logoBoxAttrs.value, [_createVNode(MpIcon, {
+        "name": "img",
+        "variant": isInvalid ? "fill" : "outline",
+        "color": isInvalid ? "red.400" : "gray.600"
+      }, null), _createVNode(MpText, {
+        "color": isInvalid ? "red.400" : "gray.600"
+      }, _isSlot(placeholder) ? placeholder : {
+        default: () => [placeholder]
+      })]), !isLoading && !hasPreview.value && variant === "product" && _createVNode("div", productBoxAttrs.value, [_createVNode(MpIcon, {
+        "name": "add-circular",
+        "variant": isInvalid ? "fill" : "outline",
+        "color": isInvalid ? "red.400" : "gray.600"
+      }, null), _createVNode(MpText, {
+        "color": isInvalid ? "red.400" : "gray.600"
+      }, _isSlot(placeholder) ? placeholder : {
+        default: () => [placeholder]
+      })]), !isLoading && !hasPreview.value && variant === "avatar" && _createVNode("div", avatarBoxAttrs.value, [_createVNode(MpText, {
+        "size": "h1",
+        "color": isInvalid ? "red.400" : "gray.600"
+      }, _isSlot(placeholder) ? placeholder : {
+        default: () => [placeholder]
+      })])]), _createVNode("input", inputAttrs.value, null)]);
+    };
+  }
+});
+
+export {
+  MpDropzone
+};

package/dist/chunk-PB3KHIIV.mjs

@@ -0,0 +1,291 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/dropzone.hooks.ts
+import { computed, ref, toRefs } from "vue";
+import { getUniqueId } from "@mekari/pixel3-utils";
+import { dropzoneSlotRecipe, sharedSlotRecipe } from "@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
+  } = toRefs(props);
+  const files = ref();
+  const fileInput = ref();
+  const preview = ref("");
+  const showOverlay = ref(isShowOverlay.value);
+  const overlay = ref();
+  const getId = id.value || getUniqueId("", "dropzone").value;
+  const hasPreview = computed(() => {
+    return isShowPreview.value && preview.value;
+  });
+  const rootAttrs = computed(() => {
+    return {
+      "data-pixel-component": "MpDropzone",
+      id: getId,
+      class: dropzoneSlotRecipe().root,
+      onClick: handleClick,
+      onDragover: handleDragover,
+      onDragleave: handleDragleave,
+      onDrop: handleDrop
+    };
+  });
+  const wrapperAttrs = computed(() => {
+    return {
+      "data-invalid": isInvalid.value || void 0,
+      "data-disabled": isDisabled.value || void 0,
+      "data-variant": variant.value,
+      tabindex: isDisabled.value ? -1 : 0,
+      class: 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 = computed(() => {
+    return {
+      class: dropzoneSlotRecipe().box
+    };
+  });
+  const logoBoxAttrs = computed(() => {
+    return {
+      class: dropzoneSlotRecipe().logoBox,
+      onClick: handleClickInput
+    };
+  });
+  const productBoxAttrs = computed(() => {
+    return {
+      class: dropzoneSlotRecipe().productBox,
+      onClick: handleClickInput
+    };
+  });
+  const avatarBoxAttrs = computed(() => {
+    return {
+      class: dropzoneSlotRecipe().avatarBox,
+      onClick: handleClickInput
+    };
+  });
+  const overlayWrapperAttrs = computed(() => {
+    return {
+      class: dropzoneSlotRecipe().overlayWrapper
+    };
+  });
+  const overlayAttrs = computed(() => {
+    return {
+      ref: overlay,
+      class: dropzoneSlotRecipe().overlay,
+      style: {
+        display: showOverlay.value ? "flex" : "none",
+        background: overlayVariant.value === "white" ? "var(--mp-colors-whiteAlpha.300)" : "var(--mp-colors-overlay)"
+      }
+    };
+  });
+  const inputAttrs = computed(() => {
+    return {
+      ref: fileInput,
+      id: `input-${getId}`,
+      class: 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 = computed(() => {
+    return {
+      color: "red.400",
+      style: {
+        cursor: "pointer"
+      },
+      onClick: handleCancel
+    };
+  });
+  const browseButtonAttrs = computed(() => {
+    return {
+      as: "span",
+      weight: "semiBold",
+      color: "blue.400",
+      style: {
+        cursor: "pointer"
+      },
+      onClick: handleClickInput
+    };
+  });
+  const previewAttrs = computed(() => {
+    return {
+      class: dropzoneSlotRecipe().preview
+    };
+  });
+  const overlayPreviewAttrs = computed(() => {
+    return {
+      "data-overlay-preview": true,
+      class: dropzoneSlotRecipe().overlayPreview,
+      onClick: handleClickInput
+    };
+  });
+  const imageAttrs = computed(() => {
+    return {
+      src: preview.value,
+      style: {
+        borderRadius: "inherit",
+        height: "100%",
+        objectFit: "cover"
+      }
+    };
+  });
+  const clearButtonAttrs = computed(() => {
+    return {
+      class: 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");
+
+export {
+  useDropzone
+};

package/dist/chunk-QZ7VFGWC.mjs

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};

package/dist/dropzone.d.mts

@@ -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 };