@mekari/pixel3-upload 0.0.1

package/dist/chunk-IEVDIM2Y.mjs

@@ -0,0 +1,257 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/upload.hooks.ts
+import { computed, watch, ref, toRefs } from "vue";
+import { getUniqueId } from "@mekari/pixel3-utils";
+import { uploadSlotRecipe, uploadListSlotRecipe, sharedSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+function useUpload(props, emit) {
+  const {
+    id,
+    fileList,
+    placeholder,
+    accept,
+    name,
+    loadingText,
+    isLoading,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    isResetOnChange,
+    isMultiple,
+    isFullWidth
+  } = toRefs(props);
+  const files = ref(fileList == null ? void 0 : fileList.value);
+  const fileInput = ref();
+  const getId = id.value || getUniqueId("", "upload").value;
+  const fileName = 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 = computed(() => {
+    var _a;
+    return ((_a = files.value) == null ? void 0 : _a.length) || 0;
+  });
+  const isShowTooltip = computed(() => {
+    var _a;
+    return ((_a = files.value) == null ? void 0 : _a.length) === 1;
+  });
+  const rootAttrs = 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: uploadSlotRecipe().root,
+      style: {
+        maxWidth: isFullWidth.value ? "100%" : "var(--mp-sizes-65)"
+      },
+      onClick: handleClick
+    };
+  });
+  const buttonAttrs = computed(() => {
+    return {
+      variant: "secondary",
+      size: "sm",
+      isDisabled: isDisabled.value
+    };
+  });
+  const textAttrs = computed(() => {
+    return {
+      color: !isLoading.value && totalFiles.value >= 1 ? "dark" : "gray.400",
+      isTruncated: true
+    };
+  });
+  const resetButtonAttrs = computed(() => {
+    return {
+      class: uploadSlotRecipe().resetButton,
+      "aria-label": "reset button",
+      name: "reset",
+      size: "sm",
+      color: "gray.400",
+      onClick: handleClear
+    };
+  });
+  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: 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");
+  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
+  } = toRefs(props);
+  const getId = id.value || getUniqueId("", "upload-list").value;
+  const color = 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 = computed(() => {
+    return isShowCancelButton.value && status.value === "loading";
+  });
+  const hasDownloadButton = computed(() => {
+    return isShowDownloadButton.value && status.value === "success";
+  });
+  const hasRemoveButton = computed(() => {
+    return isShowRemoveButton.value && (status.value === "success" || status.value === "error");
+  });
+  const rootAttrs = computed(() => {
+    return {
+      "data-pixel-component": "MpUploadList",
+      id: getId,
+      tabindex: 0,
+      class: uploadListSlotRecipe().root
+    };
+  });
+  const iconAttrs = 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 = computed(() => {
+    return {
+      class: uploadListSlotRecipe().titleWrapper,
+      style: {
+        cursor: status.value === "success" ? "pointer" : "default"
+      },
+      onClick: handleClick
+    };
+  });
+  const buttonCancelAttrs = computed(() => {
+    return {
+      variant: "ghost",
+      size: "sm",
+      leftIcon: "close",
+      onClick: (e) => emit("cancel", e)
+    };
+  });
+  const buttonDownloadAttrs = computed(() => {
+    return {
+      variant: "ghost",
+      size: "sm",
+      leftIcon: "download",
+      onClick: (e) => emit("download", e)
+    };
+  });
+  const buttonRemoveAttrs = 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");
+
+export {
+  useUpload,
+  useUploadList
+};

package/dist/chunk-P2IS3QXL.mjs

@@ -0,0 +1,113 @@
+// 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"];
+
+export {
+  uploadProps,
+  uploadListProps,
+  uploadEmit,
+  uploadListEmit
+};

package/dist/chunk-QH7SBWSH.mjs

@@ -0,0 +1,71 @@
+import {
+  useUploadList
+} from "./chunk-IEVDIM2Y.mjs";
+import {
+  uploadListEmit,
+  uploadListProps
+} from "./chunk-P2IS3QXL.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/upload-list.tsx
+import { withDirectives as _withDirectives, isVNode as _isVNode, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpButton } from "@mekari/pixel3-button";
+import { MpText } from "@mekari/pixel3-text";
+import { MpIcon } from "@mekari/pixel3-icon";
+import { MpSpinner } from "@mekari/pixel3-spinner";
+import { uploadListSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !_isVNode(s);
+}
+__name(_isSlot, "_isSlot");
+var MpUploadList = 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 _createVNode("div", rootAttrs.value, [status === "loading" ? _createVNode(MpSpinner, {
+        "size": "sm"
+      }, null) : _createVNode(MpIcon, iconAttrs.value, null), _createVNode("div", titleWrapperAttrs.value, [_withDirectives(_createVNode(MpText, {
+        "color": color.value.title,
+        "is-truncated": true
+      }, _isSlot(title) ? title : {
+        default: () => [title]
+      }), [[_resolveDirective("tooltip"), title]]), _createVNode(MpText, {
+        "color": color.value.subtitle,
+        "size": "body-small",
+        "is-truncated": true
+      }, _isSlot(subtitle) ? subtitle : {
+        default: () => [subtitle]
+      })]), _createVNode("div", {
+        "class": uploadListSlotRecipe().actionWrapper
+      }, [hasCancelButton.value && _withDirectives(_createVNode(MpButton, buttonCancelAttrs.value, null), [[_resolveDirective("tooltip"), "cancel"]]), hasDownloadButton.value && _withDirectives(_createVNode(MpButton, buttonDownloadAttrs.value, null), [[_resolveDirective("tooltip"), "download"]]), hasRemoveButton.value && _withDirectives(_createVNode(MpButton, buttonRemoveAttrs.value, null), [[_resolveDirective("tooltip"), "remove"]])])]);
+    };
+  }
+});
+
+export {
+  MpUploadList
+};

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/chunk-XCJP2E47.mjs

@@ -0,0 +1,54 @@
+import {
+  useUpload
+} from "./chunk-IEVDIM2Y.mjs";
+import {
+  uploadEmit,
+  uploadProps
+} from "./chunk-P2IS3QXL.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/upload.tsx
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode, isVNode as _isVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpButton } from "@mekari/pixel3-button";
+import { MpText } from "@mekari/pixel3-text";
+import { MpIcon } from "@mekari/pixel3-icon";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !_isVNode(s);
+}
+__name(_isSlot, "_isSlot");
+var MpUpload = 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 _createVNode("div", rootAttrs.value, [_createVNode(MpButton, buttonAttrs.value, _isSlot(buttonCaption) ? buttonCaption : {
+        default: () => [buttonCaption]
+      }), _withDirectives(_createVNode(MpText, textAttrs.value, {
+        default: () => [fileName.value]
+      }), [[_resolveDirective("tooltip"), isShowTooltip.value ? fileName.value : ""]]), totalFiles.value > 0 && _createVNode(MpIcon, resetButtonAttrs.value, null), _createVNode("input", inputAttrs.value, null)]);
+    };
+  }
+});
+
+export {
+  MpUpload
+};

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+export { MpUpload } from './upload.mjs';
+export { MpUploadList } from './upload-list.mjs';
+import 'vue/jsx-runtime';
+import './modules/upload.props.mjs';
+import 'vue';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { MpUpload } from './upload.js';
+export { MpUploadList } from './upload-list.js';
+import 'vue/jsx-runtime';
+import './modules/upload.props.js';
+import 'vue';