@mekari/pixel3-upload 0.0.1

package/dist/index.js

@@ -0,0 +1,487 @@
+"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, {
+  MpUpload: () => MpUpload,
+  MpUploadList: () => MpUploadList
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/upload.tsx
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+var import_pixel3_button = require("@mekari/pixel3-button");
+var import_pixel3_text = require("@mekari/pixel3-text");
+var import_pixel3_icon = require("@mekari/pixel3-icon");
+
+// src/modules/upload.props.ts
+var uploadProps = {
+  id: {
+    type: String,
+    default: ""
+  },
+  fileList: {
+    type: Array
+  },
+  accept: {
+    type: String
+  },
+  name: {
+    type: String
+  },
+  placeholder: {
+    type: String,
+    default: "No file selected"
+  },
+  loadingText: {
+    type: String,
+    default: "Uploading..."
+  },
+  buttonCaption: {
+    type: String,
+    default: "Choose file"
+  },
+  value: {
+    type: String
+  },
+  modelValue: {
+    type: String
+  },
+  isLoading: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  },
+  isRequired: {
+    type: Boolean,
+    default: false
+  },
+  isResetOnChange: {
+    type: Boolean,
+    default: false
+  },
+  isMultiple: {
+    type: Boolean,
+    default: false
+  },
+  isFullWidth: {
+    type: Boolean,
+    default: false
+  }
+};
+var uploadListProps = {
+  id: {
+    type: String,
+    default: ""
+  },
+  status: {
+    type: String,
+    default: "success"
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  subtitle: {
+    type: String,
+    default: ""
+  },
+  iconName: {
+    type: String,
+    default: "image-document"
+  },
+  iconColor: {
+    type: String,
+    default: "gray.600"
+  },
+  iconVariant: {
+    type: String,
+    default: "outline"
+  },
+  isShowDownloadButton: {
+    type: Boolean,
+    default: true
+  },
+  isShowRemoveButton: {
+    type: Boolean,
+    default: true
+  },
+  isShowCancelButton: {
+    type: Boolean,
+    default: true
+  }
+};
+var uploadEmit = ["click", "change", "clear"];
+var uploadListEmit = ["click", "cancel", "remove", "download"];
+
+// src/modules/upload.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 useUpload(props, emit) {
+  const {
+    id,
+    fileList,
+    placeholder,
+    accept,
+    name,
+    loadingText,
+    isLoading,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    isResetOnChange,
+    isMultiple,
+    isFullWidth
+  } = (0, import_vue.toRefs)(props);
+  const files = (0, import_vue.ref)(fileList == null ? void 0 : fileList.value);
+  const fileInput = (0, import_vue.ref)();
+  const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "upload").value;
+  const fileName = (0, import_vue.computed)(() => {
+    if (isLoading.value) {
+      return loadingText.value;
+    } else {
+      if (totalFiles.value === 0) {
+        return placeholder.value;
+      } else if (files.value && totalFiles.value === 1) {
+        return files.value[0].name;
+      } else {
+        return `${totalFiles.value} files`;
+      }
+    }
+  });
+  const totalFiles = (0, import_vue.computed)(() => {
+    var _a;
+    return ((_a = files.value) == null ? void 0 : _a.length) || 0;
+  });
+  const isShowTooltip = (0, import_vue.computed)(() => {
+    var _a;
+    return ((_a = files.value) == null ? void 0 : _a.length) === 1;
+  });
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpUpload",
+      "data-invalid": isInvalid.value || void 0,
+      "data-disabled": isDisabled.value || void 0,
+      id: getId,
+      tabindex: isDisabled.value ? -1 : 0,
+      class: (0, import_recipes.uploadSlotRecipe)().root,
+      style: {
+        maxWidth: isFullWidth.value ? "100%" : "var(--mp-sizes-65)"
+      },
+      onClick: handleClick
+    };
+  });
+  const buttonAttrs = (0, import_vue.computed)(() => {
+    return {
+      variant: "secondary",
+      size: "sm",
+      isDisabled: isDisabled.value
+    };
+  });
+  const textAttrs = (0, import_vue.computed)(() => {
+    return {
+      color: !isLoading.value && totalFiles.value >= 1 ? "dark" : "gray.400",
+      isTruncated: true
+    };
+  });
+  const resetButtonAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.uploadSlotRecipe)().resetButton,
+      "aria-label": "reset button",
+      name: "reset",
+      size: "sm",
+      color: "gray.400",
+      onClick: handleClear
+    };
+  });
+  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: handleChange
+    };
+  });
+  function clear() {
+    files.value = void 0;
+    fileInput.value.value = "";
+  }
+  __name(clear, "clear");
+  function handleClear(e) {
+    e.stopPropagation();
+    clear();
+    emit("clear", e);
+  }
+  __name(handleClear, "handleClear");
+  function handleChange(e) {
+    const target = e.target;
+    if (target && target.files) {
+      files.value = target.files;
+    }
+    emit("change", e);
+  }
+  __name(handleChange, "handleChange");
+  function handleClick(e) {
+    if (isDisabled.value) {
+      return;
+    }
+    if (isResetOnChange.value) {
+      clear();
+    }
+    fileInput.value.click();
+    emit("click", e);
+  }
+  __name(handleClick, "handleClick");
+  (0, import_vue.watch)(() => fileList == null ? void 0 : fileList.value, (newValue) => {
+    if (newValue) {
+      files.value = newValue;
+    }
+  });
+  return {
+    rootAttrs,
+    buttonAttrs,
+    textAttrs,
+    resetButtonAttrs,
+    inputAttrs,
+    fileName,
+    totalFiles,
+    isShowTooltip
+  };
+}
+__name(useUpload, "useUpload");
+function useUploadList(props, emit) {
+  const {
+    id,
+    status,
+    iconName,
+    iconColor,
+    iconVariant,
+    isShowCancelButton,
+    isShowDownloadButton,
+    isShowRemoveButton
+  } = (0, import_vue.toRefs)(props);
+  const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "upload-list").value;
+  const color = (0, import_vue.computed)(() => {
+    let title = "dark";
+    let subtitle = "gray.600";
+    if (status.value === "success") {
+      title = "blue.700";
+    }
+    if (status.value === "error") {
+      title = "red.400";
+      subtitle = "red.400";
+    }
+    return {
+      title,
+      subtitle
+    };
+  });
+  const hasCancelButton = (0, import_vue.computed)(() => {
+    return isShowCancelButton.value && status.value === "loading";
+  });
+  const hasDownloadButton = (0, import_vue.computed)(() => {
+    return isShowDownloadButton.value && status.value === "success";
+  });
+  const hasRemoveButton = (0, import_vue.computed)(() => {
+    return isShowRemoveButton.value && (status.value === "success" || status.value === "error");
+  });
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpUploadList",
+      id: getId,
+      tabindex: 0,
+      class: (0, import_recipes.uploadListSlotRecipe)().root
+    };
+  });
+  const iconAttrs = (0, import_vue.computed)(() => {
+    return {
+      size: "md",
+      name: status.value === "error" ? "error" : iconName.value,
+      color: status.value === "error" ? "red.700" : iconColor.value,
+      variant: status.value === "error" ? "duotone" : iconVariant.value
+    };
+  });
+  const titleWrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.uploadListSlotRecipe)().titleWrapper,
+      style: {
+        cursor: status.value === "success" ? "pointer" : "default"
+      },
+      onClick: handleClick
+    };
+  });
+  const buttonCancelAttrs = (0, import_vue.computed)(() => {
+    return {
+      variant: "ghost",
+      size: "sm",
+      leftIcon: "close",
+      onClick: (e) => emit("cancel", e)
+    };
+  });
+  const buttonDownloadAttrs = (0, import_vue.computed)(() => {
+    return {
+      variant: "ghost",
+      size: "sm",
+      leftIcon: "download",
+      onClick: (e) => emit("download", e)
+    };
+  });
+  const buttonRemoveAttrs = (0, import_vue.computed)(() => {
+    return {
+      variant: "ghost",
+      size: "sm",
+      leftIcon: "minus-circular",
+      onClick: (e) => emit("remove", e)
+    };
+  });
+  function handleClick(e) {
+    if (status.value !== "success") {
+      return;
+    }
+    emit("click", e);
+  }
+  __name(handleClick, "handleClick");
+  return {
+    color,
+    rootAttrs,
+    iconAttrs,
+    titleWrapperAttrs,
+    buttonCancelAttrs,
+    buttonDownloadAttrs,
+    buttonRemoveAttrs,
+    hasCancelButton,
+    hasDownloadButton,
+    hasRemoveButton
+  };
+}
+__name(useUploadList, "useUploadList");
+
+// src/upload.tsx
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue2.isVNode)(s);
+}
+__name(_isSlot, "_isSlot");
+var MpUpload = (0, import_vue3.defineComponent)({
+  name: "MpUpload",
+  props: uploadProps,
+  emits: uploadEmit,
+  setup(props, {
+    emit
+  }) {
+    const {
+      rootAttrs,
+      buttonAttrs,
+      textAttrs,
+      resetButtonAttrs,
+      inputAttrs,
+      fileName,
+      totalFiles,
+      isShowTooltip
+    } = useUpload(props, emit);
+    return () => {
+      const {
+        buttonCaption
+      } = props;
+      return (0, import_vue2.createVNode)("div", rootAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_button.MpButton, buttonAttrs.value, _isSlot(buttonCaption) ? buttonCaption : {
+        default: () => [buttonCaption]
+      }), (0, import_vue2.withDirectives)((0, import_vue2.createVNode)(import_pixel3_text.MpText, textAttrs.value, {
+        default: () => [fileName.value]
+      }), [[(0, import_vue2.resolveDirective)("tooltip"), isShowTooltip.value ? fileName.value : ""]]), totalFiles.value > 0 && (0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, resetButtonAttrs.value, null), (0, import_vue2.createVNode)("input", inputAttrs.value, null)]);
+    };
+  }
+});
+
+// src/upload-list.tsx
+var import_vue4 = require("vue");
+var import_vue5 = require("vue");
+var import_pixel3_button2 = require("@mekari/pixel3-button");
+var import_pixel3_text2 = require("@mekari/pixel3-text");
+var import_pixel3_icon2 = require("@mekari/pixel3-icon");
+var import_pixel3_spinner = require("@mekari/pixel3-spinner");
+var import_recipes2 = require("@mekari/pixel3-styled-system/recipes");
+function _isSlot2(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue4.isVNode)(s);
+}
+__name(_isSlot2, "_isSlot");
+var MpUploadList = (0, import_vue5.defineComponent)({
+  name: "MpUploadList",
+  props: uploadListProps,
+  emits: uploadListEmit,
+  setup(props, {
+    emit
+  }) {
+    const {
+      color,
+      rootAttrs,
+      iconAttrs,
+      titleWrapperAttrs,
+      buttonCancelAttrs,
+      buttonDownloadAttrs,
+      buttonRemoveAttrs,
+      hasCancelButton,
+      hasDownloadButton,
+      hasRemoveButton
+    } = useUploadList(props, emit);
+    return () => {
+      const {
+        status,
+        title,
+        subtitle
+      } = props;
+      return (0, import_vue4.createVNode)("div", rootAttrs.value, [status === "loading" ? (0, import_vue4.createVNode)(import_pixel3_spinner.MpSpinner, {
+        "size": "sm"
+      }, null) : (0, import_vue4.createVNode)(import_pixel3_icon2.MpIcon, iconAttrs.value, null), (0, import_vue4.createVNode)("div", titleWrapperAttrs.value, [(0, import_vue4.withDirectives)((0, import_vue4.createVNode)(import_pixel3_text2.MpText, {
+        "color": color.value.title,
+        "is-truncated": true
+      }, _isSlot2(title) ? title : {
+        default: () => [title]
+      }), [[(0, import_vue4.resolveDirective)("tooltip"), title]]), (0, import_vue4.createVNode)(import_pixel3_text2.MpText, {
+        "color": color.value.subtitle,
+        "size": "body-small",
+        "is-truncated": true
+      }, _isSlot2(subtitle) ? subtitle : {
+        default: () => [subtitle]
+      })]), (0, import_vue4.createVNode)("div", {
+        "class": (0, import_recipes2.uploadListSlotRecipe)().actionWrapper
+      }, [hasCancelButton.value && (0, import_vue4.withDirectives)((0, import_vue4.createVNode)(import_pixel3_button2.MpButton, buttonCancelAttrs.value, null), [[(0, import_vue4.resolveDirective)("tooltip"), "cancel"]]), hasDownloadButton.value && (0, import_vue4.withDirectives)((0, import_vue4.createVNode)(import_pixel3_button2.MpButton, buttonDownloadAttrs.value, null), [[(0, import_vue4.resolveDirective)("tooltip"), "download"]]), hasRemoveButton.value && (0, import_vue4.withDirectives)((0, import_vue4.createVNode)(import_pixel3_button2.MpButton, buttonRemoveAttrs.value, null), [[(0, import_vue4.resolveDirective)("tooltip"), "remove"]])])]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpUpload,
+  MpUploadList
+});

package/dist/index.mjs

@@ -0,0 +1,13 @@
+import {
+  MpUploadList
+} from "./chunk-QH7SBWSH.mjs";
+import {
+  MpUpload
+} from "./chunk-XCJP2E47.mjs";
+import "./chunk-IEVDIM2Y.mjs";
+import "./chunk-P2IS3QXL.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpUpload,
+  MpUploadList
+};

package/dist/metafile-cjs.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/upload.props.ts":{"bytes":2758,"imports":[],"format":"esm"},"src/modules/upload.hooks.ts":{"bytes":6400,"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/upload.tsx":{"bytes":1574,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-button","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"src/modules/upload.props.ts","kind":"import-statement","original":"./modules/upload.props"},{"path":"src/modules/upload.hooks.ts","kind":"import-statement","original":"./modules/upload.hooks"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/upload-list.tsx":{"bytes":2517,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-button","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":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/upload.props.ts","kind":"import-statement","original":"./modules/upload.props"},{"path":"src/modules/upload.hooks.ts","kind":"import-statement","original":"./modules/upload.hooks"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":167,"imports":[{"path":"src/upload.tsx","kind":"import-statement","original":"./upload"},{"path":"src/upload-list.tsx","kind":"import-statement","original":"./upload-list"}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-button","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","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},{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-button","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":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":157},"src/upload.tsx":{"bytesInOutput":1511},"src/modules/upload.props.ts":{"bytesInOutput":1604},"src/modules/upload.hooks.ts":{"bytesInOutput":6686},"src/upload-list.tsx":{"bytesInOutput":2740}},"bytes":13848},"dist/upload-list.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-button","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":"@mekari/pixel3-styled-system/recipes","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/upload-list.tsx","inputs":{"src/upload-list.tsx":{"bytesInOutput":2880},"src/modules/upload.props.ts":{"bytesInOutput":690},"src/modules/upload.hooks.ts":{"bytesInOutput":3035}},"bytes":7712},"dist/upload.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-button","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","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/upload.tsx","inputs":{"src/upload.tsx":{"bytesInOutput":1641},"src/modules/upload.props.ts":{"bytesInOutput":914},"src/modules/upload.hooks.ts":{"bytesInOutput":3813}},"bytes":7461},"dist/modules/upload.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/upload.hooks.ts","inputs":{"src/modules/upload.hooks.ts":{"bytesInOutput":6874}},"bytes":7915},"dist/modules/upload.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/upload.props.ts","inputs":{"src/modules/upload.props.ts":{"bytesInOutput":1872}},"bytes":2859}}}

package/dist/metafile-esm.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/upload.props.ts":{"bytes":2758,"imports":[],"format":"esm"},"src/modules/upload.hooks.ts":{"bytes":6400,"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/upload.tsx":{"bytes":1574,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-button","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"src/modules/upload.props.ts","kind":"import-statement","original":"./modules/upload.props"},{"path":"src/modules/upload.hooks.ts","kind":"import-statement","original":"./modules/upload.hooks"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/upload-list.tsx":{"bytes":2517,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-button","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":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/upload.props.ts","kind":"import-statement","original":"./modules/upload.props"},{"path":"src/modules/upload.hooks.ts","kind":"import-statement","original":"./modules/upload.hooks"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":167,"imports":[{"path":"src/upload.tsx","kind":"import-statement","original":"./upload"},{"path":"src/upload-list.tsx","kind":"import-statement","original":"./upload-list"}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-QH7SBWSH.mjs","kind":"import-statement"},{"path":"dist/chunk-XCJP2E47.mjs","kind":"import-statement"},{"path":"dist/chunk-IEVDIM2Y.mjs","kind":"import-statement"},{"path":"dist/chunk-P2IS3QXL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpUpload","MpUploadList"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":238},"dist/upload-list.mjs":{"imports":[{"path":"dist/chunk-QH7SBWSH.mjs","kind":"import-statement"},{"path":"dist/chunk-IEVDIM2Y.mjs","kind":"import-statement"},{"path":"dist/chunk-P2IS3QXL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpUploadList"],"entryPoint":"src/upload-list.tsx","inputs":{},"bytes":175},"dist/chunk-QH7SBWSH.mjs":{"imports":[{"path":"dist/chunk-IEVDIM2Y.mjs","kind":"import-statement"},{"path":"dist/chunk-P2IS3QXL.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-button","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":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["MpUploadList"],"inputs":{"src/upload-list.tsx":{"bytesInOutput":2322}},"bytes":2555},"dist/upload.mjs":{"imports":[{"path":"dist/chunk-XCJP2E47.mjs","kind":"import-statement"},{"path":"dist/chunk-IEVDIM2Y.mjs","kind":"import-statement"},{"path":"dist/chunk-P2IS3QXL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpUpload"],"entryPoint":"src/upload.tsx","inputs":{},"bytes":167},"dist/chunk-XCJP2E47.mjs":{"imports":[{"path":"dist/chunk-IEVDIM2Y.mjs","kind":"import-statement"},{"path":"dist/chunk-P2IS3QXL.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-button","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true}],"exports":["MpUpload"],"inputs":{"src/upload.tsx":{"bytesInOutput":1391}},"bytes":1603},"dist/modules/upload.hooks.mjs":{"imports":[{"path":"dist/chunk-IEVDIM2Y.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useUpload","useUploadList"],"entryPoint":"src/modules/upload.hooks.ts","inputs":{},"bytes":143},"dist/chunk-IEVDIM2Y.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":["useUpload","useUploadList"],"inputs":{"src/modules/upload.hooks.ts":{"bytesInOutput":6223}},"bytes":6346},"dist/modules/upload.props.mjs":{"imports":[{"path":"dist/chunk-P2IS3QXL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["uploadEmit","uploadListEmit","uploadListProps","uploadProps"],"entryPoint":"src/modules/upload.props.ts","inputs":{},"bytes":215},"dist/chunk-P2IS3QXL.mjs":{"imports":[],"exports":["uploadEmit","uploadListEmit","uploadListProps","uploadProps"],"inputs":{"src/modules/upload.props.ts":{"bytesInOutput":1604}},"bytes":1713},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}

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

@@ -0,0 +1,97 @@
+import * as vue from 'vue';
+import { UploadProps, UploadEmits, UploadListProps, UploadListEmits } from './upload.props.mjs';
+
+declare function useUpload(props: UploadProps, emit: UploadEmits): {
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        'data-invalid': true | undefined;
+        'data-disabled': true | undefined;
+        id: string | undefined;
+        tabindex: number;
+        class: string;
+        style: {
+            maxWidth: string;
+        };
+        onClick: (e: Event) => void;
+    }>;
+    buttonAttrs: vue.ComputedRef<{
+        variant: "secondary";
+        size: "sm";
+        isDisabled: boolean;
+    }>;
+    textAttrs: vue.ComputedRef<{
+        color: string;
+        isTruncated: boolean;
+    }>;
+    resetButtonAttrs: vue.ComputedRef<{
+        class: string;
+        'aria-label': string;
+        name: string;
+        size: "sm";
+        color: string;
+        onClick: (e: Event) => void;
+    }>;
+    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;
+    }>;
+    fileName: vue.ComputedRef<unknown>;
+    totalFiles: vue.ComputedRef<number>;
+    isShowTooltip: vue.ComputedRef<boolean>;
+};
+declare function useUploadList(props: UploadListProps, emit: UploadListEmits): {
+    color: vue.ComputedRef<{
+        title: string;
+        subtitle: string;
+    }>;
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        id: string | undefined;
+        tabindex: number;
+        class: string;
+    }>;
+    iconAttrs: vue.ComputedRef<{
+        size: "md";
+        name: string;
+        color: string;
+        variant: "outline" | "duotone" | "fill";
+    }>;
+    titleWrapperAttrs: vue.ComputedRef<{
+        class: string;
+        style: {
+            cursor: string;
+        };
+        onClick: (e: Event) => void;
+    }>;
+    buttonCancelAttrs: vue.ComputedRef<{
+        variant: "ghost";
+        size: "sm";
+        leftIcon: string;
+        onClick: (e: Event) => void;
+    }>;
+    buttonDownloadAttrs: vue.ComputedRef<{
+        variant: "ghost";
+        size: "sm";
+        leftIcon: string;
+        onClick: (e: Event) => void;
+    }>;
+    buttonRemoveAttrs: vue.ComputedRef<{
+        variant: "ghost";
+        size: "sm";
+        leftIcon: string;
+        onClick: (e: Event) => void;
+    }>;
+    hasCancelButton: vue.ComputedRef<boolean>;
+    hasDownloadButton: vue.ComputedRef<boolean>;
+    hasRemoveButton: vue.ComputedRef<boolean>;
+};
+
+export { useUpload, useUploadList };