@mekari/pixel3-dropzone 0.0.1

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

@@ -0,0 +1,109 @@
+import * as vue from 'vue';
+import { DropzoneProps, DropzoenEmits } from './dropzone.props.js';
+
+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 };

package/dist/modules/dropzone.hooks.js

@@ -0,0 +1,312 @@
+"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/modules/dropzone.hooks.ts
+var dropzone_hooks_exports = {};
+__export(dropzone_hooks_exports, {
+  useDropzone: () => useDropzone
+});
+module.exports = __toCommonJS(dropzone_hooks_exports);
+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");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useDropzone
+});

package/dist/modules/dropzone.hooks.mjs

@@ -0,0 +1,7 @@
+import {
+  useDropzone
+} from "../chunk-PB3KHIIV.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  useDropzone
+};

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

@@ -0,0 +1,83 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+declare const dropzoneProps: {
+    id: {
+        type: PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: PropType<"default" | "logo" | "product" | "avatar">;
+        default: string;
+    };
+    accept: {
+        type: PropType<string>;
+    };
+    name: {
+        type: PropType<string>;
+    };
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    description: {
+        type: PropType<string>;
+        default: string;
+    };
+    loadingText: {
+        type: PropType<string>;
+        default: string;
+    };
+    buttonText: {
+        type: PropType<string>;
+        default: string;
+    };
+    overlayVariant: {
+        type: PropType<"white" | "black">;
+        default: string;
+    };
+    isShowPreview: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isMultiple: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isLoading: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isRequired: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    hasCustomUpload: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isEnableDragAndDrop: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isEnableInputFile: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isShowOverlay: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+declare const dropzoneEmit: string[];
+type DropzoneProps = ExtractPropTypes<typeof dropzoneProps>;
+type DropzoenEmits = (event: (typeof dropzoneEmit)[number], value?: unknown) => void;
+
+export { DropzoenEmits, DropzoneProps, dropzoneEmit, dropzoneProps };

package/dist/modules/dropzone.props.d.ts

@@ -0,0 +1,83 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+declare const dropzoneProps: {
+    id: {
+        type: PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: PropType<"default" | "logo" | "product" | "avatar">;
+        default: string;
+    };
+    accept: {
+        type: PropType<string>;
+    };
+    name: {
+        type: PropType<string>;
+    };
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    description: {
+        type: PropType<string>;
+        default: string;
+    };
+    loadingText: {
+        type: PropType<string>;
+        default: string;
+    };
+    buttonText: {
+        type: PropType<string>;
+        default: string;
+    };
+    overlayVariant: {
+        type: PropType<"white" | "black">;
+        default: string;
+    };
+    isShowPreview: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isMultiple: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isLoading: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isRequired: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    hasCustomUpload: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isEnableDragAndDrop: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isEnableInputFile: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isShowOverlay: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+declare const dropzoneEmit: string[];
+type DropzoneProps = ExtractPropTypes<typeof dropzoneProps>;
+type DropzoenEmits = (event: (typeof dropzoneEmit)[number], value?: unknown) => void;
+
+export { DropzoenEmits, DropzoneProps, dropzoneEmit, dropzoneProps };

package/dist/modules/dropzone.props.js

@@ -0,0 +1,108 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/modules/dropzone.props.ts
+var dropzone_props_exports = {};
+__export(dropzone_props_exports, {
+  dropzoneEmit: () => dropzoneEmit,
+  dropzoneProps: () => dropzoneProps
+});
+module.exports = __toCommonJS(dropzone_props_exports);
+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"];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  dropzoneEmit,
+  dropzoneProps
+});

package/dist/modules/dropzone.props.mjs

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