@mekari/pixel-upload - npm Package Compare versions

Comparing version 0.2.5 to 0.3.0

dist/mekari-pixel-upload.cjs.dev.js

@@ -9,3 +9,7 @@ 'use strict';
 var pixelButtonIcon = require('@mekari/pixel-button-icon');
+var pixelFlex = require('@mekari/pixel-flex');
+var pixelSpinner = require('@mekari/pixel-spinner');
+var pixelIcon = require('@mekari/pixel-icon');
 var pixelText = require('@mekari/pixel-text');
+var pixelTooltip = require('@mekari/pixel-tooltip');
 
@@ -65,2 +69,18 @@ const uploadProps = {
     default: 'red.400'
+  },
+  isLoading: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  },
+  isRequired: {
+    type: Boolean,
+    default: false
   }
@@ -72,2 +92,3 @@ };
     theme,
+    formControls,
     colorMode,
@@ -124,3 +145,3 @@ focusBorderColor,
 
-  if (props.required) {
+  if (formControls.isInvalid) {
     styles = { ...styles,
@@ -137,3 +158,3 @@ borderColor: _errorBorderColor,
 
-  if (props.disabled) {
+  if (formControls.isDisabled) {
     styles = { ...styles,
@@ -162,10 +183,4 @@ borderColor: borderColor[colorMode],
   name: 'MpUpload',
-  mixins: [pixelUtils.createStyledAttrsMixin('MpUpload', true)],
+  mixins: [pixelUtils.createStyledAttrsMixin('MpUpload')],
   inject: {
-    $pixelColorMode: {
-      default: 'light'
-    },
-    $pixelTheme: {
-      default: () => ({})
-    },
     $useFormControl: {
@@ -184,5 +199,5 @@ default: null
       files: '',
-      msg: 'hello',
       isHovered: false,
-      isCleared: false
+      isCleared: false,
+      isShowTooltip: false
     };
@@ -196,9 +211,9 @@ },
 
-    formControl() {
+    getFormControls() {
       if (!this.$useFormControl) {
         return {
-          isReadOnly: this.isReadOnly,
-          isDisabled: this.isDisabled,
+          controlId: this.controlId,
+          isDisabled: this.isDisabled || this.disabled,
           isInvalid: this.isInvalid,
-          isRequired: this.isRequired
+          isRequired: this.isRequired || this.required
         };
@@ -212,2 +227,3 @@ }
       return useUploadStyles({ ...this.$props,
+        formControls: this.getFormControls,
         theme: this.theme,
@@ -230,2 +246,3 @@ colorMode: this.colorMode
     filesName() {
+      this.isShowTooltip = false;
       let totalFiles;
@@ -239,8 +256,13 @@
 
-      if (totalFiles === 0) {
-        return this.placeholder;
-      } else if (this.files.length === 1) {
-        return this.files[0].name;
-      } else if (this.files.length > 1) {
-        return `${totalFiles} files`;
+      if (this.isLoading) {
+        return 'Uploading...';
+      } else {
+        if (totalFiles === 0) {
+          return this.placeholder;
+        } else if (this.files.length === 1) {
+          this.isShowTooltip = true;
+          return this.files[0].name;
+        } else if (this.files.length > 1) {
+          return `${totalFiles} files`;
+        }
       }
@@ -273,10 +295,10 @@ }
       attrs: {
-        id: `upload_wrapper_${this._id}`,
-        tabIndex: this.disabled ? 'none' : 0
-      },
-      on: {}
+        id: this.getFormControls.controlId || `upload_wrapper_${this._id}`,
+        tabIndex: this.getFormControls.isDisabled ? 'none' : 0,
+        'data-pixel-component': 'MpUpload'
+      }
     }, [h(pixelBox.MpBox, {
       attrs: {
         display: 'flex',
-        width: '100%',
+        width: 'full',
         alignItems: 'center'
@@ -311,17 +333,26 @@ },
         height: '7',
-        disabled: this.disabled
+        disabled: this.getFormControls.isDisabled
       }
     }, this.buttonCaption), // text
-    h(pixelText.MpText, {
+    h(pixelTooltip.MpTooltip, {
+      props: {
+        id: `tooltip-upload-${this._id}`,
+        label: this.filesName
+      },
       attrs: {
-        as: 'span',
+        visibility: this.isShowTooltip ? 'visible' : 'hidden'
+      }
+    }, [h(pixelText.MpText, {
+      attrs: {
         pl: '3',
         pr: this.isHovered ? 0 : 3,
-        fontSize: 'md',
-        color: this.files.length >= 1 ? 'dark' : 'gray.400',
-        isTruncated: true,
+        color: this.files.length >= 1 && !this.isLoading ? 'dark' : 'gray.400',
         flex: 1
       },
-      props: {}
-    }, this.filesName), // button-icon
+      props: {
+        as: 'span',
+        fontSize: 'md',
+        isTruncated: true
+      }
+    }, this.filesName)]), // button-icon
     this.files.length >= 1 && this.isHovered && h(pixelButtonIcon.MpButtonIcon, {
@@ -331,10 +362,5 @@ attrs: {
         size: 'sm',
-        // position: 'absolute',
         right: '5px',
-        disabled: this.disabled,
-        isHoverable: false // opacity: 0,
-        // _hover: {
-        //   opacity: 1
-        // }
-
+        disabled: this.getFormControls.isDisabled,
+        isHoverable: false
       },
@@ -356,4 +382,4 @@ on: {
         accept: this.accept,
-        disabled: this.disabled,
-        required: this.required
+        disabled: this.getFormControls.isDisabled,
+        required: this.getFormControls.isRequired
       },
@@ -364,3 +390,4 @@ on: {
           this.change(e);
-          document.getElementById(`upload_wrapper_${this._id}`).blur();
+          this.$emit('change', e);
+          document.getElementById(this.getFormControls.controlId || `upload_wrapper_${this._id}`).blur();
           document.getElementById(`upload_button_${this._id}`).blur();
@@ -373,3 +400,230 @@ }
 };
+const MpListUpload = {
+  name: 'MpListUpload',
+  mixins: [pixelUtils.createStyledAttrsMixin('MpListUpload')],
+  props: {
+    id: {
+      type: String
+    },
+    status: {
+      type: String,
+      default: 'success'
+    },
+    title: {
+      type: String
+    },
+    subtitle: {
+      type: String
+    },
+    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
+    }
+  },
 
+  data() {
+    return {};
+  },
+
+  computed: {
+    getId() {
+      return this.id || `list-upload-${pixelUtils.useId()}`;
+    },
+
+    color() {
+      let title = 'dark';
+      let subtitle = 'gray.600';
+
+      if (this.status === 'success') {
+        title = 'blue.700';
+      }
+
+      if (this.status === 'error') {
+        title = 'red.400';
+        subtitle = 'red.400';
+      }
+
+      return {
+        title,
+        subtitle
+      };
+    }
+
+  },
+  methods: {
+    handleActionCancel(e) {
+      this.$emit('cancel', e);
+    },
+
+    handleActionRemove(e) {
+      this.$emit('remove', e);
+    },
+
+    handleActionDownload(e) {
+      this.$emit('download', e);
+    },
+
+    handleClick(e) {
+      if (this.status !== 'success') {
+        return;
+      }
+
+      this.$emit('click', e);
+    }
+
+  },
+
+  render(h) {
+    return h(pixelBox.MpBox, {
+      attrs: {
+        id: this.getId,
+        width: 'full',
+        position: 'relative',
+        'data-pixel-component': 'MpListUpload',
+        ...this.splitProps.styleAttrs,
+        ...this.computedAttrs
+      }
+    }, [h(pixelFlex.MpFlex, {
+      props: {
+        direction: 'row',
+        align: 'center',
+        justify: 'space-between'
+      },
+      attrs: {
+        py: '2',
+        px: '1',
+        gap: '3',
+        borderRadius: 'md',
+        background: 'white',
+        _hover: {
+          background: 'background'
+        }
+      }
+    }, [this.status === 'loading' ? h(pixelBox.MpBox, {
+      attrs: {
+        width: '6',
+        height: '6',
+        p: '1'
+      }
+    }, [h(pixelSpinner.MpSpinner, {
+      props: {
+        size: 'sm'
+      }
+    })]) : h(pixelIcon.MpIcon, {
+      props: {
+        size: 'md',
+        name: this.status === 'error' ? 'error' : this.iconName,
+        color: this.status === 'error' ? 'red.700' : this.iconColor,
+        variant: this.status === 'error' ? 'duotone' : this.iconVariant
+      }
+    }), h(pixelFlex.MpFlex, {
+      props: {
+        direction: 'column'
+      },
+      attrs: {
+        width: 'full'
+      }
+    }, [h(pixelTooltip.MpTooltip, {
+      props: {
+        id: `tooltip-upload-title${this.getId}`,
+        label: this.title
+      }
+    }, [h(pixelBox.MpBox, {
+      on: {
+        click: this.handleClick
+      }
+    }, [h(pixelText.MpText, {
+      props: {
+        isTruncated: true
+      },
+      attrs: {
+        overflowWrap: 'break-word',
+        lineHeight: 'md',
+        mb: '0.5',
+        cursor: this.status === 'success' ? 'pointer' : undefined,
+        color: this.color.title
+      }
+    }, this.title)])]), h(pixelText.MpText, {
+      props: {
+        isTruncated: true,
+        fontSize: 'sm'
+      },
+      attrs: {
+        color: this.color.subtitle
+      }
+    }, this.subtitle)]), h(pixelFlex.MpFlex, {
+      props: {
+        direction: 'row'
+      },
+      attrs: {
+        gap: '1'
+      }
+    }, [this.isShowCancelButton && this.status === 'loading' && h(pixelTooltip.MpTooltip, {
+      props: {
+        id: `tooltip-cancel-${this.getId}`,
+        label: 'Cancel'
+      }
+    }, [h(pixelButtonIcon.MpButtonIcon, {
+      attrs: {
+        name: 'close',
+        size: 'sm',
+        isHoverable: false
+      },
+      on: {
+        click: this.handleActionCancel
+      }
+    })]), this.isShowDownloadButton && this.status === 'success' && h(pixelTooltip.MpTooltip, {
+      props: {
+        id: `tooltip-download-${this.getId}`,
+        label: 'Download'
+      }
+    }, [h(pixelButtonIcon.MpButtonIcon, {
+      attrs: {
+        name: 'download',
+        size: 'sm',
+        isHoverable: false
+      },
+      on: {
+        click: this.handleActionDownload
+      }
+    })]), this.isShowRemoveButton && (this.status === 'success' || this.status === 'error') && h(pixelTooltip.MpTooltip, {
+      props: {
+        id: `tooltip-remove-${this.getId}`,
+        label: 'Remove'
+      }
+    }, [h(pixelButtonIcon.MpButtonIcon, {
+      attrs: {
+        name: 'minus-circular',
+        size: 'sm',
+        isHoverable: false
+      },
+      on: {
+        click: this.handleActionRemove
+      }
+    })])])])]);
+  }
+
+};
+
+exports.MpListUpload = MpListUpload;
 exports.MpUpload = MpUpload;

dist/mekari-pixel-upload.cjs.prod.js

@@ -9,3 +9,7 @@ 'use strict';
 var pixelButtonIcon = require('@mekari/pixel-button-icon');
+var pixelFlex = require('@mekari/pixel-flex');
+var pixelSpinner = require('@mekari/pixel-spinner');
+var pixelIcon = require('@mekari/pixel-icon');
 var pixelText = require('@mekari/pixel-text');
+var pixelTooltip = require('@mekari/pixel-tooltip');
 
@@ -65,2 +69,18 @@ const uploadProps = {
     default: 'red.400'
+  },
+  isLoading: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  },
+  isRequired: {
+    type: Boolean,
+    default: false
   }
@@ -72,2 +92,3 @@ };
     theme,
+    formControls,
     colorMode,
@@ -124,3 +145,3 @@ focusBorderColor,
 
-  if (props.required) {
+  if (formControls.isInvalid) {
     styles = { ...styles,
@@ -137,3 +158,3 @@ borderColor: _errorBorderColor,
 
-  if (props.disabled) {
+  if (formControls.isDisabled) {
     styles = { ...styles,
@@ -162,10 +183,4 @@ borderColor: borderColor[colorMode],
   name: 'MpUpload',
-  mixins: [pixelUtils.createStyledAttrsMixin('MpUpload', true)],
+  mixins: [pixelUtils.createStyledAttrsMixin('MpUpload')],
   inject: {
-    $pixelColorMode: {
-      default: 'light'
-    },
-    $pixelTheme: {
-      default: () => ({})
-    },
     $useFormControl: {
@@ -184,5 +199,5 @@ default: null
       files: '',
-      msg: 'hello',
       isHovered: false,
-      isCleared: false
+      isCleared: false,
+      isShowTooltip: false
     };
@@ -196,9 +211,9 @@ },
 
-    formControl() {
+    getFormControls() {
       if (!this.$useFormControl) {
         return {
-          isReadOnly: this.isReadOnly,
-          isDisabled: this.isDisabled,
+          controlId: this.controlId,
+          isDisabled: this.isDisabled || this.disabled,
           isInvalid: this.isInvalid,
-          isRequired: this.isRequired
+          isRequired: this.isRequired || this.required
         };
@@ -212,2 +227,3 @@ }
       return useUploadStyles({ ...this.$props,
+        formControls: this.getFormControls,
         theme: this.theme,
@@ -230,2 +246,3 @@ colorMode: this.colorMode
     filesName() {
+      this.isShowTooltip = false;
       let totalFiles;
@@ -239,8 +256,13 @@
 
-      if (totalFiles === 0) {
-        return this.placeholder;
-      } else if (this.files.length === 1) {
-        return this.files[0].name;
-      } else if (this.files.length > 1) {
-        return `${totalFiles} files`;
+      if (this.isLoading) {
+        return 'Uploading...';
+      } else {
+        if (totalFiles === 0) {
+          return this.placeholder;
+        } else if (this.files.length === 1) {
+          this.isShowTooltip = true;
+          return this.files[0].name;
+        } else if (this.files.length > 1) {
+          return `${totalFiles} files`;
+        }
       }
@@ -273,10 +295,10 @@ }
       attrs: {
-        id: `upload_wrapper_${this._id}`,
-        tabIndex: this.disabled ? 'none' : 0
-      },
-      on: {}
+        id: this.getFormControls.controlId || `upload_wrapper_${this._id}`,
+        tabIndex: this.getFormControls.isDisabled ? 'none' : 0,
+        'data-pixel-component': 'MpUpload'
+      }
     }, [h(pixelBox.MpBox, {
       attrs: {
         display: 'flex',
-        width: '100%',
+        width: 'full',
         alignItems: 'center'
@@ -311,17 +333,26 @@ },
         height: '7',
-        disabled: this.disabled
+        disabled: this.getFormControls.isDisabled
       }
     }, this.buttonCaption), // text
-    h(pixelText.MpText, {
+    h(pixelTooltip.MpTooltip, {
+      props: {
+        id: `tooltip-upload-${this._id}`,
+        label: this.filesName
+      },
       attrs: {
-        as: 'span',
+        visibility: this.isShowTooltip ? 'visible' : 'hidden'
+      }
+    }, [h(pixelText.MpText, {
+      attrs: {
         pl: '3',
         pr: this.isHovered ? 0 : 3,
-        fontSize: 'md',
-        color: this.files.length >= 1 ? 'dark' : 'gray.400',
-        isTruncated: true,
+        color: this.files.length >= 1 && !this.isLoading ? 'dark' : 'gray.400',
         flex: 1
       },
-      props: {}
-    }, this.filesName), // button-icon
+      props: {
+        as: 'span',
+        fontSize: 'md',
+        isTruncated: true
+      }
+    }, this.filesName)]), // button-icon
     this.files.length >= 1 && this.isHovered && h(pixelButtonIcon.MpButtonIcon, {
@@ -331,10 +362,5 @@ attrs: {
         size: 'sm',
-        // position: 'absolute',
         right: '5px',
-        disabled: this.disabled,
-        isHoverable: false // opacity: 0,
-        // _hover: {
-        //   opacity: 1
-        // }
-
+        disabled: this.getFormControls.isDisabled,
+        isHoverable: false
       },
@@ -356,4 +382,4 @@ on: {
         accept: this.accept,
-        disabled: this.disabled,
-        required: this.required
+        disabled: this.getFormControls.isDisabled,
+        required: this.getFormControls.isRequired
       },
@@ -364,3 +390,4 @@ on: {
           this.change(e);
-          document.getElementById(`upload_wrapper_${this._id}`).blur();
+          this.$emit('change', e);
+          document.getElementById(this.getFormControls.controlId || `upload_wrapper_${this._id}`).blur();
           document.getElementById(`upload_button_${this._id}`).blur();
@@ -373,3 +400,230 @@ }
 };
+const MpListUpload = {
+  name: 'MpListUpload',
+  mixins: [pixelUtils.createStyledAttrsMixin('MpListUpload')],
+  props: {
+    id: {
+      type: String
+    },
+    status: {
+      type: String,
+      default: 'success'
+    },
+    title: {
+      type: String
+    },
+    subtitle: {
+      type: String
+    },
+    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
+    }
+  },
 
+  data() {
+    return {};
+  },
+
+  computed: {
+    getId() {
+      return this.id || `list-upload-${pixelUtils.useId()}`;
+    },
+
+    color() {
+      let title = 'dark';
+      let subtitle = 'gray.600';
+
+      if (this.status === 'success') {
+        title = 'blue.700';
+      }
+
+      if (this.status === 'error') {
+        title = 'red.400';
+        subtitle = 'red.400';
+      }
+
+      return {
+        title,
+        subtitle
+      };
+    }
+
+  },
+  methods: {
+    handleActionCancel(e) {
+      this.$emit('cancel', e);
+    },
+
+    handleActionRemove(e) {
+      this.$emit('remove', e);
+    },
+
+    handleActionDownload(e) {
+      this.$emit('download', e);
+    },
+
+    handleClick(e) {
+      if (this.status !== 'success') {
+        return;
+      }
+
+      this.$emit('click', e);
+    }
+
+  },
+
+  render(h) {
+    return h(pixelBox.MpBox, {
+      attrs: {
+        id: this.getId,
+        width: 'full',
+        position: 'relative',
+        'data-pixel-component': 'MpListUpload',
+        ...this.splitProps.styleAttrs,
+        ...this.computedAttrs
+      }
+    }, [h(pixelFlex.MpFlex, {
+      props: {
+        direction: 'row',
+        align: 'center',
+        justify: 'space-between'
+      },
+      attrs: {
+        py: '2',
+        px: '1',
+        gap: '3',
+        borderRadius: 'md',
+        background: 'white',
+        _hover: {
+          background: 'background'
+        }
+      }
+    }, [this.status === 'loading' ? h(pixelBox.MpBox, {
+      attrs: {
+        width: '6',
+        height: '6',
+        p: '1'
+      }
+    }, [h(pixelSpinner.MpSpinner, {
+      props: {
+        size: 'sm'
+      }
+    })]) : h(pixelIcon.MpIcon, {
+      props: {
+        size: 'md',
+        name: this.status === 'error' ? 'error' : this.iconName,
+        color: this.status === 'error' ? 'red.700' : this.iconColor,
+        variant: this.status === 'error' ? 'duotone' : this.iconVariant
+      }
+    }), h(pixelFlex.MpFlex, {
+      props: {
+        direction: 'column'
+      },
+      attrs: {
+        width: 'full'
+      }
+    }, [h(pixelTooltip.MpTooltip, {
+      props: {
+        id: `tooltip-upload-title${this.getId}`,
+        label: this.title
+      }
+    }, [h(pixelBox.MpBox, {
+      on: {
+        click: this.handleClick
+      }
+    }, [h(pixelText.MpText, {
+      props: {
+        isTruncated: true
+      },
+      attrs: {
+        overflowWrap: 'break-word',
+        lineHeight: 'md',
+        mb: '0.5',
+        cursor: this.status === 'success' ? 'pointer' : undefined,
+        color: this.color.title
+      }
+    }, this.title)])]), h(pixelText.MpText, {
+      props: {
+        isTruncated: true,
+        fontSize: 'sm'
+      },
+      attrs: {
+        color: this.color.subtitle
+      }
+    }, this.subtitle)]), h(pixelFlex.MpFlex, {
+      props: {
+        direction: 'row'
+      },
+      attrs: {
+        gap: '1'
+      }
+    }, [this.isShowCancelButton && this.status === 'loading' && h(pixelTooltip.MpTooltip, {
+      props: {
+        id: `tooltip-cancel-${this.getId}`,
+        label: 'Cancel'
+      }
+    }, [h(pixelButtonIcon.MpButtonIcon, {
+      attrs: {
+        name: 'close',
+        size: 'sm',
+        isHoverable: false
+      },
+      on: {
+        click: this.handleActionCancel
+      }
+    })]), this.isShowDownloadButton && this.status === 'success' && h(pixelTooltip.MpTooltip, {
+      props: {
+        id: `tooltip-download-${this.getId}`,
+        label: 'Download'
+      }
+    }, [h(pixelButtonIcon.MpButtonIcon, {
+      attrs: {
+        name: 'download',
+        size: 'sm',
+        isHoverable: false
+      },
+      on: {
+        click: this.handleActionDownload
+      }
+    })]), this.isShowRemoveButton && (this.status === 'success' || this.status === 'error') && h(pixelTooltip.MpTooltip, {
+      props: {
+        id: `tooltip-remove-${this.getId}`,
+        label: 'Remove'
+      }
+    }, [h(pixelButtonIcon.MpButtonIcon, {
+      attrs: {
+        name: 'minus-circular',
+        size: 'sm',
+        isHoverable: false
+      },
+      on: {
+        click: this.handleActionRemove
+      }
+    })])])])]);
+  }
+
+};
+
+exports.MpListUpload = MpListUpload;
 exports.MpUpload = MpUpload;

dist/mekari-pixel-upload.esm.js

@@ -5,3 +5,7 @@ import { __get, createStyledAttrsMixin, useId } from '@mekari/pixel-utils';
 import { MpButtonIcon } from '@mekari/pixel-button-icon';
+import { MpFlex } from '@mekari/pixel-flex';
+import { MpSpinner } from '@mekari/pixel-spinner';
+import { MpIcon } from '@mekari/pixel-icon';
 import { MpText } from '@mekari/pixel-text';
+import { MpTooltip } from '@mekari/pixel-tooltip';
 
@@ -61,2 +65,18 @@ const uploadProps = {
     default: 'red.400'
+  },
+  isLoading: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  },
+  isRequired: {
+    type: Boolean,
+    default: false
   }
@@ -68,2 +88,3 @@ };
     theme,
+    formControls,
     colorMode,
@@ -120,3 +141,3 @@ focusBorderColor,
 
-  if (props.required) {
+  if (formControls.isInvalid) {
     styles = { ...styles,
@@ -133,3 +154,3 @@ borderColor: _errorBorderColor,
 
-  if (props.disabled) {
+  if (formControls.isDisabled) {
     styles = { ...styles,
@@ -158,10 +179,4 @@ borderColor: borderColor[colorMode],
   name: 'MpUpload',
-  mixins: [createStyledAttrsMixin('MpUpload', true)],
+  mixins: [createStyledAttrsMixin('MpUpload')],
   inject: {
-    $pixelColorMode: {
-      default: 'light'
-    },
-    $pixelTheme: {
-      default: () => ({})
-    },
     $useFormControl: {
@@ -180,5 +195,5 @@ default: null
       files: '',
-      msg: 'hello',
       isHovered: false,
-      isCleared: false
+      isCleared: false,
+      isShowTooltip: false
     };
@@ -192,9 +207,9 @@ },
 
-    formControl() {
+    getFormControls() {
       if (!this.$useFormControl) {
         return {
-          isReadOnly: this.isReadOnly,
-          isDisabled: this.isDisabled,
+          controlId: this.controlId,
+          isDisabled: this.isDisabled || this.disabled,
           isInvalid: this.isInvalid,
-          isRequired: this.isRequired
+          isRequired: this.isRequired || this.required
         };
@@ -208,2 +223,3 @@ }
       return useUploadStyles({ ...this.$props,
+        formControls: this.getFormControls,
         theme: this.theme,
@@ -226,2 +242,3 @@ colorMode: this.colorMode
     filesName() {
+      this.isShowTooltip = false;
       let totalFiles;
@@ -235,8 +252,13 @@
 
-      if (totalFiles === 0) {
-        return this.placeholder;
-      } else if (this.files.length === 1) {
-        return this.files[0].name;
-      } else if (this.files.length > 1) {
-        return `${totalFiles} files`;
+      if (this.isLoading) {
+        return 'Uploading...';
+      } else {
+        if (totalFiles === 0) {
+          return this.placeholder;
+        } else if (this.files.length === 1) {
+          this.isShowTooltip = true;
+          return this.files[0].name;
+        } else if (this.files.length > 1) {
+          return `${totalFiles} files`;
+        }
       }
@@ -269,10 +291,10 @@ }
       attrs: {
-        id: `upload_wrapper_${this._id}`,
-        tabIndex: this.disabled ? 'none' : 0
-      },
-      on: {}
+        id: this.getFormControls.controlId || `upload_wrapper_${this._id}`,
+        tabIndex: this.getFormControls.isDisabled ? 'none' : 0,
+        'data-pixel-component': 'MpUpload'
+      }
     }, [h(MpBox, {
       attrs: {
         display: 'flex',
-        width: '100%',
+        width: 'full',
         alignItems: 'center'
@@ -307,17 +329,26 @@ },
         height: '7',
-        disabled: this.disabled
+        disabled: this.getFormControls.isDisabled
       }
     }, this.buttonCaption), // text
-    h(MpText, {
+    h(MpTooltip, {
+      props: {
+        id: `tooltip-upload-${this._id}`,
+        label: this.filesName
+      },
       attrs: {
-        as: 'span',
+        visibility: this.isShowTooltip ? 'visible' : 'hidden'
+      }
+    }, [h(MpText, {
+      attrs: {
         pl: '3',
         pr: this.isHovered ? 0 : 3,
-        fontSize: 'md',
-        color: this.files.length >= 1 ? 'dark' : 'gray.400',
-        isTruncated: true,
+        color: this.files.length >= 1 && !this.isLoading ? 'dark' : 'gray.400',
         flex: 1
       },
-      props: {}
-    }, this.filesName), // button-icon
+      props: {
+        as: 'span',
+        fontSize: 'md',
+        isTruncated: true
+      }
+    }, this.filesName)]), // button-icon
     this.files.length >= 1 && this.isHovered && h(MpButtonIcon, {
@@ -327,10 +358,5 @@ attrs: {
         size: 'sm',
-        // position: 'absolute',
         right: '5px',
-        disabled: this.disabled,
-        isHoverable: false // opacity: 0,
-        // _hover: {
-        //   opacity: 1
-        // }
-
+        disabled: this.getFormControls.isDisabled,
+        isHoverable: false
       },
@@ -352,4 +378,4 @@ on: {
         accept: this.accept,
-        disabled: this.disabled,
-        required: this.required
+        disabled: this.getFormControls.isDisabled,
+        required: this.getFormControls.isRequired
       },
@@ -360,3 +386,4 @@ on: {
           this.change(e);
-          document.getElementById(`upload_wrapper_${this._id}`).blur();
+          this.$emit('change', e);
+          document.getElementById(this.getFormControls.controlId || `upload_wrapper_${this._id}`).blur();
           document.getElementById(`upload_button_${this._id}`).blur();
@@ -369,3 +396,229 @@ }
 };
+const MpListUpload = {
+  name: 'MpListUpload',
+  mixins: [createStyledAttrsMixin('MpListUpload')],
+  props: {
+    id: {
+      type: String
+    },
+    status: {
+      type: String,
+      default: 'success'
+    },
+    title: {
+      type: String
+    },
+    subtitle: {
+      type: String
+    },
+    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
+    }
+  },
 
-export { MpUpload };
+  data() {
+    return {};
+  },
+
+  computed: {
+    getId() {
+      return this.id || `list-upload-${useId()}`;
+    },
+
+    color() {
+      let title = 'dark';
+      let subtitle = 'gray.600';
+
+      if (this.status === 'success') {
+        title = 'blue.700';
+      }
+
+      if (this.status === 'error') {
+        title = 'red.400';
+        subtitle = 'red.400';
+      }
+
+      return {
+        title,
+        subtitle
+      };
+    }
+
+  },
+  methods: {
+    handleActionCancel(e) {
+      this.$emit('cancel', e);
+    },
+
+    handleActionRemove(e) {
+      this.$emit('remove', e);
+    },
+
+    handleActionDownload(e) {
+      this.$emit('download', e);
+    },
+
+    handleClick(e) {
+      if (this.status !== 'success') {
+        return;
+      }
+
+      this.$emit('click', e);
+    }
+
+  },
+
+  render(h) {
+    return h(MpBox, {
+      attrs: {
+        id: this.getId,
+        width: 'full',
+        position: 'relative',
+        'data-pixel-component': 'MpListUpload',
+        ...this.splitProps.styleAttrs,
+        ...this.computedAttrs
+      }
+    }, [h(MpFlex, {
+      props: {
+        direction: 'row',
+        align: 'center',
+        justify: 'space-between'
+      },
+      attrs: {
+        py: '2',
+        px: '1',
+        gap: '3',
+        borderRadius: 'md',
+        background: 'white',
+        _hover: {
+          background: 'background'
+        }
+      }
+    }, [this.status === 'loading' ? h(MpBox, {
+      attrs: {
+        width: '6',
+        height: '6',
+        p: '1'
+      }
+    }, [h(MpSpinner, {
+      props: {
+        size: 'sm'
+      }
+    })]) : h(MpIcon, {
+      props: {
+        size: 'md',
+        name: this.status === 'error' ? 'error' : this.iconName,
+        color: this.status === 'error' ? 'red.700' : this.iconColor,
+        variant: this.status === 'error' ? 'duotone' : this.iconVariant
+      }
+    }), h(MpFlex, {
+      props: {
+        direction: 'column'
+      },
+      attrs: {
+        width: 'full'
+      }
+    }, [h(MpTooltip, {
+      props: {
+        id: `tooltip-upload-title${this.getId}`,
+        label: this.title
+      }
+    }, [h(MpBox, {
+      on: {
+        click: this.handleClick
+      }
+    }, [h(MpText, {
+      props: {
+        isTruncated: true
+      },
+      attrs: {
+        overflowWrap: 'break-word',
+        lineHeight: 'md',
+        mb: '0.5',
+        cursor: this.status === 'success' ? 'pointer' : undefined,
+        color: this.color.title
+      }
+    }, this.title)])]), h(MpText, {
+      props: {
+        isTruncated: true,
+        fontSize: 'sm'
+      },
+      attrs: {
+        color: this.color.subtitle
+      }
+    }, this.subtitle)]), h(MpFlex, {
+      props: {
+        direction: 'row'
+      },
+      attrs: {
+        gap: '1'
+      }
+    }, [this.isShowCancelButton && this.status === 'loading' && h(MpTooltip, {
+      props: {
+        id: `tooltip-cancel-${this.getId}`,
+        label: 'Cancel'
+      }
+    }, [h(MpButtonIcon, {
+      attrs: {
+        name: 'close',
+        size: 'sm',
+        isHoverable: false
+      },
+      on: {
+        click: this.handleActionCancel
+      }
+    })]), this.isShowDownloadButton && this.status === 'success' && h(MpTooltip, {
+      props: {
+        id: `tooltip-download-${this.getId}`,
+        label: 'Download'
+      }
+    }, [h(MpButtonIcon, {
+      attrs: {
+        name: 'download',
+        size: 'sm',
+        isHoverable: false
+      },
+      on: {
+        click: this.handleActionDownload
+      }
+    })]), this.isShowRemoveButton && (this.status === 'success' || this.status === 'error') && h(MpTooltip, {
+      props: {
+        id: `tooltip-remove-${this.getId}`,
+        label: 'Remove'
+      }
+    }, [h(MpButtonIcon, {
+      attrs: {
+        name: 'minus-circular',
+        size: 'sm',
+        isHoverable: false
+      },
+      on: {
+        click: this.handleActionRemove
+      }
+    })])])])]);
+  }
+
+};
+
+export { MpListUpload, MpUpload };

package.json

 {
   "name": "@mekari/pixel-upload",
   "description": "Mekari Pixel | Upload component",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "homepage": "https://mekari.design/",
@@ -27,7 +27,11 @@ "repository": {
   "dependencies": {
-    "@mekari/pixel-utils": "^0.2.0",
     "@mekari/pixel-box": "^0.0.9",
     "@mekari/pixel-button": "^0.1.9",
+    "@mekari/pixel-button-icon": "^0.6.0",
+    "@mekari/pixel-flex": "^0.0.8",
+    "@mekari/pixel-icon": "^0.8.2",
+    "@mekari/pixel-spinner": "^0.0.9",
     "@mekari/pixel-text": "^0.1.0",
-    "@mekari/pixel-button-icon": "^0.6.0"
+    "@mekari/pixel-tooltip": "^0.2.0",
+    "@mekari/pixel-utils": "^0.2.0"
   },
@@ -34,0 +38,0 @@ "devDependencies": {

src/upload-props.js

@@ -54,3 +54,7 @@ export const uploadProps = {
     default: 'red.400'
-  }
+  },
+  isLoading: { type: Boolean, default: false },
+  isDisabled: { type: Boolean, default: false },
+  isInvalid: { type: Boolean, default: false },
+  isRequired: { type: Boolean, default: false }
 }

src/upload.js

@@ -6,3 +6,7 @@ import { uploadProps } from './upload-props'
 import { MpButtonIcon } from '@mekari/pixel-button-icon'
+import { MpFlex } from '@mekari/pixel-flex'
+import { MpSpinner } from '@mekari/pixel-spinner'
+import { MpIcon } from '@mekari/pixel-icon'
 import { MpText } from '@mekari/pixel-text'
+import { MpTooltip } from '@mekari/pixel-tooltip'
 
@@ -13,10 +17,4 @@ import { createStyledAttrsMixin, useId } from '@mekari/pixel-utils'
   name: 'MpUpload',
-  mixins: [createStyledAttrsMixin('MpUpload', true)],
+  mixins: [createStyledAttrsMixin('MpUpload')],
   inject: {
-    $pixelColorMode: {
-      default: 'light'
-    },
-    $pixelTheme: {
-      default: () => ({})
-    },
     $useFormControl: {
@@ -34,5 +32,5 @@ default: null
       files: '',
-      msg: 'hello',
       isHovered: false,
-      isCleared: false
+      isCleared: false,
+      isShowTooltip: false
     }
@@ -44,9 +42,9 @@ },
     },
-    formControl() {
+    getFormControls() {
       if (!this.$useFormControl) {
         return {
-          isReadOnly: this.isReadOnly,
-          isDisabled: this.isDisabled,
+          controlId: this.controlId,
+          isDisabled: this.isDisabled || this.disabled,
           isInvalid: this.isInvalid,
-          isRequired: this.isRequired
+          isRequired: this.isRequired || this.required
         }
@@ -56,6 +54,6 @@ }
     },
-
     uploadStyles() {
       return useUploadStyles({
         ...this.$props,
+        formControls: this.getFormControls,
         theme: this.theme,
@@ -74,2 +72,3 @@ colorMode: this.colorMode
     filesName() {
+      this.isShowTooltip = false
       let totalFiles
@@ -82,8 +81,13 @@ if (!this.files) {
 
-      if (totalFiles === 0) {
-        return this.placeholder
-      } else if (this.files.length === 1) {
-        return this.files[0].name
-      } else if (this.files.length > 1) {
-        return `${totalFiles} files`
+      if (this.isLoading) {
+        return 'Uploading...'
+      } else {
+        if (totalFiles === 0) {
+          return this.placeholder
+        } else if (this.files.length === 1) {
+          this.isShowTooltip = true
+          return this.files[0].name
+        } else if (this.files.length > 1) {
+          return `${totalFiles} files`
+        }
       }
@@ -99,3 +103,2 @@ }
       this.isCleared = true
-
       if (this.$listeners.clear) {
@@ -115,6 +118,6 @@ this.$emit('clear', e, this.files, this.clear)
         attrs: {
-          id: `upload_wrapper_${this._id}`,
-          tabIndex: this.disabled ? 'none' : 0
-        },
-        on: {}
+          id: this.getFormControls.controlId || `upload_wrapper_${this._id}`,
+          tabIndex: this.getFormControls.isDisabled ? 'none' : 0,
+          'data-pixel-component': 'MpUpload'
+        }
       },
@@ -127,3 +130,3 @@ [
               display: 'flex',
-              width: '100%',
+              width: 'full',
               alignItems: 'center'
@@ -162,3 +165,3 @@ },
                   height: '7',
-                  disabled: this.disabled
+                  disabled: this.getFormControls.isDisabled
                 }
@@ -170,37 +173,47 @@ },
             h(
-              MpText,
+              MpTooltip,
               {
+                props: {
+                  id: `tooltip-upload-${this._id}`,
+                  label: this.filesName
+                },
                 attrs: {
-                  as: 'span',
-                  pl: '3',
-                  pr: this.isHovered ? 0 : 3,
-                  fontSize: 'md',
-                  color: this.files.length >= 1 ? 'dark' : 'gray.400',
-                  isTruncated: true,
-                  flex: 1
-                },
-                props: {}
+                  visibility: this.isShowTooltip ? 'visible' : 'hidden'
+                }
               },
-              this.filesName
+              [
+                h(
+                  MpText,
+                  {
+                    attrs: {
+                      pl: '3',
+                      pr: this.isHovered ? 0 : 3,
+                      color: this.files.length >= 1 && !this.isLoading ? 'dark' : 'gray.400',
+                      flex: 1
+                    },
+                    props: {
+                      as: 'span',
+                      fontSize: 'md',
+                      isTruncated: true
+                    }
+                  },
+                  this.filesName
+                )
+              ]
             ),
             // button-icon
             this.files.length >= 1 &&
-            this.isHovered &&
-            h(MpButtonIcon, {
-              attrs: {
-                name: 'reset',
-                size: 'sm',
-                // position: 'absolute',
-                right: '5px',
-                disabled: this.disabled,
-                isHoverable: false
-                // opacity: 0,
-                // _hover: {
-                //   opacity: 1
-                // }
-              },
-              on: {
-                click: this.handleClear
-              }
-            })
+              this.isHovered &&
+              h(MpButtonIcon, {
+                attrs: {
+                  name: 'reset',
+                  size: 'sm',
+                  right: '5px',
+                  disabled: this.getFormControls.isDisabled,
+                  isHoverable: false
+                },
+                on: {
+                  click: this.handleClear
+                }
+              })
           ]
@@ -220,4 +233,4 @@ ),
             accept: this.accept,
-            disabled: this.disabled,
-            required: this.required
+            disabled: this.getFormControls.isDisabled,
+            required: this.getFormControls.isRequired
           },
@@ -228,3 +241,6 @@ on: {
               this.change(e)
-              document.getElementById(`upload_wrapper_${this._id}`).blur()
+              this.$emit('change', e)
+              document
+                .getElementById(this.getFormControls.controlId || `upload_wrapper_${this._id}`)
+                .blur()
               document.getElementById(`upload_button_${this._id}`).blur()
@@ -239,2 +255,276 @@ }
 
-export { MpUpload }
+const MpListUpload = {
+  name: 'MpListUpload',
+  mixins: [createStyledAttrsMixin('MpListUpload')],
+  props: {
+    id: { type: String },
+    status: { type: String, default: 'success' },
+    title: { type: String },
+    subtitle: { type: String },
+    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 }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    getId() {
+      return this.id || `list-upload-${useId()}`
+    },
+    color() {
+      let title = 'dark'
+      let subtitle = 'gray.600'
+
+      if (this.status === 'success') {
+        title = 'blue.700'
+      }
+
+      if (this.status === 'error') {
+        title = 'red.400'
+        subtitle = 'red.400'
+      }
+
+      return {
+        title,
+        subtitle
+      }
+    }
+  },
+  methods: {
+    handleActionCancel(e) {
+      this.$emit('cancel', e)
+    },
+    handleActionRemove(e) {
+      this.$emit('remove', e)
+    },
+    handleActionDownload(e) {
+      this.$emit('download', e)
+    },
+    handleClick(e) {
+      if (this.status !== 'success') {
+        return
+      }
+      this.$emit('click', e)
+    }
+  },
+  render(h) {
+    return h(
+      MpBox,
+      {
+        attrs: {
+          id: this.getId,
+          width: 'full',
+          position: 'relative',
+          'data-pixel-component': 'MpListUpload',
+          ...this.splitProps.styleAttrs,
+          ...this.computedAttrs
+        }
+      },
+      [
+        h(
+          MpFlex,
+          {
+            props: {
+              direction: 'row',
+              align: 'center',
+              justify: 'space-between'
+            },
+            attrs: {
+              py: '2',
+              px: '1',
+              gap: '3',
+              borderRadius: 'md',
+              background: 'white',
+              _hover: {
+                background: 'background'
+              }
+            }
+          },
+          [
+            this.status === 'loading'
+              ? h(
+                  MpBox,
+                  {
+                    attrs: {
+                      width: '6',
+                      height: '6',
+                      p: '1'
+                    }
+                  },
+                  [
+                    h(MpSpinner, {
+                      props: {
+                        size: 'sm'
+                      }
+                    })
+                  ]
+                )
+              : h(MpIcon, {
+                  props: {
+                    size: 'md',
+                    name: this.status === 'error' ? 'error' : this.iconName,
+                    color: this.status === 'error' ? 'red.700' : this.iconColor,
+                    variant: this.status === 'error' ? 'duotone' : this.iconVariant,
+                  }
+                }),
+
+            h(
+              MpFlex,
+              {
+                props: {
+                  direction: 'column'
+                },
+                attrs: {
+                  width: 'full'
+                }
+              },
+              [
+                h(
+                  MpTooltip,
+                  {
+                    props: {
+                      id: `tooltip-upload-title${this.getId}`,
+                      label: this.title
+                    }
+                  },
+                  [
+                    h(
+                      MpBox,
+                      {
+                        on: {
+                          click: this.handleClick
+                        }
+                      },
+                      [
+                        h(
+                          MpText,
+                          {
+                            props: {
+                              isTruncated: true
+                            },
+                            attrs: {
+                              overflowWrap: 'break-word',
+                              lineHeight: 'md',
+                              mb: '0.5',
+                              cursor: this.status === 'success' ? 'pointer' : undefined,
+                              color: this.color.title
+                            }
+                          },
+                          this.title
+                        )
+                      ]
+                    )
+                  ]
+                ),
+                h(
+                  MpText,
+                  {
+                    props: {
+                      isTruncated: true,
+                      fontSize: 'sm'
+                    },
+                    attrs: {
+                      color: this.color.subtitle
+                    }
+                  },
+                  this.subtitle
+                )
+              ]
+            ),
+
+            h(
+              MpFlex,
+              {
+                props: {
+                  direction: 'row'
+                },
+                attrs: {
+                  gap: '1'
+                }
+              },
+              [
+                this.isShowCancelButton &&
+                  this.status === 'loading' &&
+                  h(
+                    MpTooltip,
+                    {
+                      props: {
+                        id: `tooltip-cancel-${this.getId}`,
+                        label: 'Cancel'
+                      }
+                    },
+                    [
+                      h(MpButtonIcon, {
+                        attrs: {
+                          name: 'close',
+                          size: 'sm',
+                          isHoverable: false
+                        },
+                        on: {
+                          click: this.handleActionCancel
+                        }
+                      })
+                    ]
+                  ),
+
+                this.isShowDownloadButton &&
+                  this.status === 'success' &&
+                  h(
+                    MpTooltip,
+                    {
+                      props: {
+                        id: `tooltip-download-${this.getId}`,
+                        label: 'Download'
+                      }
+                    },
+                    [
+                      h(MpButtonIcon, {
+                        attrs: {
+                          name: 'download',
+                          size: 'sm',
+                          isHoverable: false
+                        },
+                        on: {
+                          click: this.handleActionDownload
+                        }
+                      })
+                    ]
+                  ),
+
+                this.isShowRemoveButton &&
+                  (this.status === 'success' || this.status === 'error') &&
+                  h(
+                    MpTooltip,
+                    {
+                      props: {
+                        id: `tooltip-remove-${this.getId}`,
+                        label: 'Remove'
+                      }
+                    },
+                    [
+                      h(MpButtonIcon, {
+                        attrs: {
+                          name: 'minus-circular',
+                          size: 'sm',
+                          isHoverable: false
+                        },
+                        on: {
+                          click: this.handleActionRemove
+                        }
+                      })
+                    ]
+                  )
+              ]
+            )
+          ]
+        )
+      ]
+    )
+  }
+}
+
+export { MpUpload, MpListUpload }

src/utils/upload.styles.js

 import { __get } from '@mekari/pixel-utils'
 
 const wrapperStyles = (props) => {
-  const { theme, colorMode, focusBorderColor, focusBoxShadowColor, errorBorderColor } = props
+  const { theme, formControls, colorMode, focusBorderColor, focusBoxShadowColor, errorBorderColor } = props
   const borderColor = { light: 'inherit', dark: 'whiteAlpha.50' }
@@ -40,3 +40,3 @@ const hoverColor = { light: 'gray.400', dark: 'whiteAlpha.200' }
   }
-  if (props.required) {
+  if (formControls.isInvalid) {
     styles = {
@@ -53,3 +53,3 @@ ...styles,
   }
-  if (props.disabled) {
+  if (formControls.isDisabled) {
     styles = {
@@ -56,0 +56,0 @@ ...styles,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57454

increased by82.32%

Lines of code

2336

increased by76.17%

Worsened metrics

Dependency count

11

increased by57.14%

Dependency changes

• + Added@mekari/pixel-flex@^0.0.8

• + Added@mekari/pixel-icon@^0.8.2

• + Added@mekari/pixel-spinner@^0.0.9

• + Added@mekari/pixel-tooltip@^0.2.0

• + Added@mekari/pixel-flex@0.0.8(transitive)

• + Added@mekari/pixel-fragment@0.0.4(transitive)

• + Added@mekari/pixel-icon@0.8.14(transitive)

• + Added@mekari/pixel-no-ssr@0.0.8(transitive)

• + Added@mekari/pixel-popper@0.1.0(transitive)

• + Added@mekari/pixel-portal@0.0.8(transitive)

• + Added@mekari/pixel-pseudo-box@0.0.8(transitive)

• + Added@mekari/pixel-spinner@0.0.9(transitive)

• + Added@mekari/pixel-tooltip@0.2.2(transitive)

• + Added@mekari/pixel-visually-hidden@0.0.8(transitive)

• + Added@popperjs/core@2.11.8(transitive)

• + Added@vue/compiler-sfc@2.7.16(transitive)

• + Addedportal-vue@2.1.7(transitive)

• + Addedprettier@2.8.8(transitive)

• + Addedsource-map@0.6.1(transitive)

• + Addedvue@2.7.16(transitive)