@mekari/pixel3-upload 0.0.1

package/dist/upload.d.mts

@@ -0,0 +1,141 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import { File } from './modules/upload.props.mjs';
+import * as vue from 'vue';
+
+declare const MpUpload: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    fileList: {
+        type: vue.PropType<File[]>;
+    };
+    accept: {
+        type: vue.PropType<string>;
+    };
+    name: {
+        type: vue.PropType<string>;
+    };
+    placeholder: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    loadingText: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    buttonCaption: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    value: {
+        type: vue.PropType<string>;
+    };
+    modelValue: {
+        type: vue.PropType<string>;
+    };
+    isLoading: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isRequired: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isResetOnChange: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isMultiple: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isFullWidth: {
+        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;
+    };
+    fileList: {
+        type: vue.PropType<File[]>;
+    };
+    accept: {
+        type: vue.PropType<string>;
+    };
+    name: {
+        type: vue.PropType<string>;
+    };
+    placeholder: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    loadingText: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    buttonCaption: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    value: {
+        type: vue.PropType<string>;
+    };
+    modelValue: {
+        type: vue.PropType<string>;
+    };
+    isLoading: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isRequired: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isResetOnChange: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isMultiple: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isFullWidth: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    isDisabled: boolean;
+    isLoading: boolean;
+    id: string;
+    placeholder: string;
+    loadingText: string;
+    buttonCaption: string;
+    isInvalid: boolean;
+    isRequired: boolean;
+    isResetOnChange: boolean;
+    isMultiple: boolean;
+    isFullWidth: boolean;
+}, {}>;
+
+export { MpUpload };

package/dist/upload.d.ts

@@ -0,0 +1,141 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import { File } from './modules/upload.props.js';
+import * as vue from 'vue';
+
+declare const MpUpload: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    fileList: {
+        type: vue.PropType<File[]>;
+    };
+    accept: {
+        type: vue.PropType<string>;
+    };
+    name: {
+        type: vue.PropType<string>;
+    };
+    placeholder: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    loadingText: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    buttonCaption: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    value: {
+        type: vue.PropType<string>;
+    };
+    modelValue: {
+        type: vue.PropType<string>;
+    };
+    isLoading: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isRequired: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isResetOnChange: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isMultiple: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isFullWidth: {
+        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;
+    };
+    fileList: {
+        type: vue.PropType<File[]>;
+    };
+    accept: {
+        type: vue.PropType<string>;
+    };
+    name: {
+        type: vue.PropType<string>;
+    };
+    placeholder: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    loadingText: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    buttonCaption: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    value: {
+        type: vue.PropType<string>;
+    };
+    modelValue: {
+        type: vue.PropType<string>;
+    };
+    isLoading: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isRequired: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isResetOnChange: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isMultiple: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isFullWidth: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    isDisabled: boolean;
+    isLoading: boolean;
+    id: string;
+    placeholder: string;
+    loadingText: string;
+    buttonCaption: string;
+    isInvalid: boolean;
+    isRequired: boolean;
+    isResetOnChange: boolean;
+    isMultiple: boolean;
+    isFullWidth: boolean;
+}, {}>;
+
+export { MpUpload };

package/dist/upload.js

@@ -0,0 +1,277 @@
+"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.tsx
+var upload_exports = {};
+__export(upload_exports, {
+  MpUpload: () => MpUpload
+});
+module.exports = __toCommonJS(upload_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");
+
+// 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 uploadEmit = ["click", "change", "clear"];
+
+// 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");
+
+// 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)]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpUpload
+});

package/dist/upload.mjs

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

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@mekari/pixel3-upload",
+  "description": "Upload component for mekari pixel 3",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@mekari/pixel3-button": "0.0.2",
+    "@mekari/pixel3-icon": "0.0.2",
+    "@mekari/pixel3-styled-system": "0.0.1",
+    "@mekari/pixel3-spinner": "0.0.2",
+    "@mekari/pixel3-text": "0.0.2",
+    "@mekari/pixel3-utils": "0.0.2"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.7"
+  },
+  "devDependencies": {
+    "vue": "^3.3.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "build:external": "tsup src/index.tsx --external",
+    "types:check": "tsc --noEmit",
+    "replace-config": "clean-package",
+    "restore-config": "clean-package restore"
+  }
+}