@mekari/pixel3-upload 0.0.1

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

@@ -0,0 +1,97 @@
+import * as vue from 'vue';
+import { UploadProps, UploadEmits, UploadListProps, UploadListEmits } from './upload.props.js';
+
+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 };

package/dist/modules/upload.hooks.js

@@ -0,0 +1,279 @@
+"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/upload.hooks.ts
+var upload_hooks_exports = {};
+__export(upload_hooks_exports, {
+  useUpload: () => useUpload,
+  useUploadList: () => useUploadList
+});
+module.exports = __toCommonJS(upload_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 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");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useUpload,
+  useUploadList
+});

package/dist/modules/upload.hooks.mjs

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

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

@@ -0,0 +1,116 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+type File = {
+    [key: string]: unknown;
+};
+declare const uploadProps: {
+    id: {
+        type: PropType<string>;
+        default: string;
+    };
+    fileList: {
+        type: PropType<File[]>;
+    };
+    accept: {
+        type: PropType<string>;
+    };
+    name: {
+        type: PropType<string>;
+    };
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    loadingText: {
+        type: PropType<string>;
+        default: string;
+    };
+    buttonCaption: {
+        type: PropType<string>;
+        default: string;
+    };
+    value: {
+        type: PropType<string>;
+    };
+    modelValue: {
+        type: PropType<string>;
+    };
+    isLoading: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isRequired: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isResetOnChange: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isMultiple: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isFullWidth: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+declare const uploadListProps: {
+    id: {
+        type: PropType<string>;
+        default: string;
+    };
+    status: {
+        type: PropType<"error" | "success" | "loading">;
+        default: string;
+    };
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+    subtitle: {
+        type: PropType<string>;
+        default: string;
+    };
+    iconName: {
+        type: PropType<string>;
+        default: string;
+    };
+    iconColor: {
+        type: PropType<string>;
+        default: string;
+    };
+    iconVariant: {
+        type: PropType<string>;
+        default: string;
+    };
+    isShowDownloadButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isShowRemoveButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isShowCancelButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+declare const uploadEmit: string[];
+declare const uploadListEmit: string[];
+type UploadProps = ExtractPropTypes<typeof uploadProps>;
+type UploadEmits = (event: (typeof uploadEmit)[number], value?: unknown) => void;
+type UploadListProps = ExtractPropTypes<typeof uploadListProps>;
+type UploadListEmits = (event: (typeof uploadListEmit)[number], value?: unknown) => void;
+
+export { File, UploadEmits, UploadListEmits, UploadListProps, UploadProps, uploadEmit, uploadListEmit, uploadListProps, uploadProps };

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

@@ -0,0 +1,116 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+type File = {
+    [key: string]: unknown;
+};
+declare const uploadProps: {
+    id: {
+        type: PropType<string>;
+        default: string;
+    };
+    fileList: {
+        type: PropType<File[]>;
+    };
+    accept: {
+        type: PropType<string>;
+    };
+    name: {
+        type: PropType<string>;
+    };
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    loadingText: {
+        type: PropType<string>;
+        default: string;
+    };
+    buttonCaption: {
+        type: PropType<string>;
+        default: string;
+    };
+    value: {
+        type: PropType<string>;
+    };
+    modelValue: {
+        type: PropType<string>;
+    };
+    isLoading: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isRequired: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isResetOnChange: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isMultiple: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isFullWidth: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+declare const uploadListProps: {
+    id: {
+        type: PropType<string>;
+        default: string;
+    };
+    status: {
+        type: PropType<"error" | "success" | "loading">;
+        default: string;
+    };
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+    subtitle: {
+        type: PropType<string>;
+        default: string;
+    };
+    iconName: {
+        type: PropType<string>;
+        default: string;
+    };
+    iconColor: {
+        type: PropType<string>;
+        default: string;
+    };
+    iconVariant: {
+        type: PropType<string>;
+        default: string;
+    };
+    isShowDownloadButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isShowRemoveButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isShowCancelButton: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+declare const uploadEmit: string[];
+declare const uploadListEmit: string[];
+type UploadProps = ExtractPropTypes<typeof uploadProps>;
+type UploadEmits = (event: (typeof uploadEmit)[number], value?: unknown) => void;
+type UploadListProps = ExtractPropTypes<typeof uploadListProps>;
+type UploadListEmits = (event: (typeof uploadListEmit)[number], value?: unknown) => void;
+
+export { File, UploadEmits, UploadListEmits, UploadListProps, UploadProps, uploadEmit, uploadListEmit, uploadListProps, uploadProps };