@mekari/pixel3-upload 0.0.1

package/dist/modules/upload.props.js

@@ -0,0 +1,140 @@
+"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/upload.props.ts
+var upload_props_exports = {};
+__export(upload_props_exports, {
+  uploadEmit: () => uploadEmit,
+  uploadListEmit: () => uploadListEmit,
+  uploadListProps: () => uploadListProps,
+  uploadProps: () => uploadProps
+});
+module.exports = __toCommonJS(upload_props_exports);
+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"];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  uploadEmit,
+  uploadListEmit,
+  uploadListProps,
+  uploadProps
+});

package/dist/modules/upload.props.mjs

@@ -0,0 +1,13 @@
+import {
+  uploadEmit,
+  uploadListEmit,
+  uploadListProps,
+  uploadProps
+} from "../chunk-P2IS3QXL.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  uploadEmit,
+  uploadListEmit,
+  uploadListProps,
+  uploadProps
+};

package/dist/upload-list.d.mts

@@ -0,0 +1,101 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpUploadList: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    status: {
+        type: vue.PropType<"error" | "success" | "loading">;
+        default: string;
+    };
+    title: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    subtitle: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    iconName: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    iconColor: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    iconVariant: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    isShowDownloadButton: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowRemoveButton: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowCancelButton: {
+        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;
+    };
+    status: {
+        type: vue.PropType<"error" | "success" | "loading">;
+        default: string;
+    };
+    title: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    subtitle: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    iconName: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    iconColor: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    iconVariant: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    isShowDownloadButton: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowRemoveButton: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowCancelButton: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    title: string;
+    id: string;
+    status: "error" | "success" | "loading";
+    subtitle: string;
+    iconName: string;
+    iconColor: string;
+    iconVariant: string;
+    isShowDownloadButton: boolean;
+    isShowRemoveButton: boolean;
+    isShowCancelButton: boolean;
+}, {}>;
+
+export { MpUploadList };

package/dist/upload-list.d.ts

@@ -0,0 +1,101 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as vue from 'vue';
+
+declare const MpUploadList: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    status: {
+        type: vue.PropType<"error" | "success" | "loading">;
+        default: string;
+    };
+    title: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    subtitle: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    iconName: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    iconColor: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    iconVariant: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    isShowDownloadButton: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowRemoveButton: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowCancelButton: {
+        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;
+    };
+    status: {
+        type: vue.PropType<"error" | "success" | "loading">;
+        default: string;
+    };
+    title: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    subtitle: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    iconName: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    iconColor: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    iconVariant: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    isShowDownloadButton: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowRemoveButton: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowCancelButton: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    title: string;
+    id: string;
+    status: "error" | "success" | "loading";
+    subtitle: string;
+    iconName: string;
+    iconColor: string;
+    iconVariant: string;
+    isShowDownloadButton: boolean;
+    isShowRemoveButton: boolean;
+    isShowCancelButton: boolean;
+}, {}>;
+
+export { MpUploadList };

package/dist/upload-list.js

@@ -0,0 +1,243 @@
+"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/upload-list.tsx
+var upload_list_exports = {};
+__export(upload_list_exports, {
+  MpUploadList: () => MpUploadList
+});
+module.exports = __toCommonJS(upload_list_exports);
+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");
+var import_pixel3_spinner = require("@mekari/pixel3-spinner");
+var import_recipes2 = require("@mekari/pixel3-styled-system/recipes");
+
+// src/modules/upload.props.ts
+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 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 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-list.tsx
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue2.isVNode)(s);
+}
+__name(_isSlot, "_isSlot");
+var MpUploadList = (0, import_vue3.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_vue2.createVNode)("div", rootAttrs.value, [status === "loading" ? (0, import_vue2.createVNode)(import_pixel3_spinner.MpSpinner, {
+        "size": "sm"
+      }, null) : (0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, iconAttrs.value, null), (0, import_vue2.createVNode)("div", titleWrapperAttrs.value, [(0, import_vue2.withDirectives)((0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "color": color.value.title,
+        "is-truncated": true
+      }, _isSlot(title) ? title : {
+        default: () => [title]
+      }), [[(0, import_vue2.resolveDirective)("tooltip"), title]]), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "color": color.value.subtitle,
+        "size": "body-small",
+        "is-truncated": true
+      }, _isSlot(subtitle) ? subtitle : {
+        default: () => [subtitle]
+      })]), (0, import_vue2.createVNode)("div", {
+        "class": (0, import_recipes2.uploadListSlotRecipe)().actionWrapper
+      }, [hasCancelButton.value && (0, import_vue2.withDirectives)((0, import_vue2.createVNode)(import_pixel3_button.MpButton, buttonCancelAttrs.value, null), [[(0, import_vue2.resolveDirective)("tooltip"), "cancel"]]), hasDownloadButton.value && (0, import_vue2.withDirectives)((0, import_vue2.createVNode)(import_pixel3_button.MpButton, buttonDownloadAttrs.value, null), [[(0, import_vue2.resolveDirective)("tooltip"), "download"]]), hasRemoveButton.value && (0, import_vue2.withDirectives)((0, import_vue2.createVNode)(import_pixel3_button.MpButton, buttonRemoveAttrs.value, null), [[(0, import_vue2.resolveDirective)("tooltip"), "remove"]])])]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpUploadList
+});

package/dist/upload-list.mjs

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