balm-ui/components/file/index.js

A modular and customizable UI library based on Material Design and Vue 3

!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define("UiFile",["vue"],t):"object"===typeof exports?exports.UiFile=t(require("vue")):e.UiFile=t(e.Vue)}("undefined"!==typeof self?self:this,(function(e){return function(){"use strict";var t={744:function(e){var t=function(e){return function(e){return!!e&&"object"===typeof e}(e)&&!function(e){var t=Object.prototype.toString.call(e);return"[object RegExp]"===t||"[object Date]"===t||function(e){return e.$$typeof===n}(e)}(e)};var n="function"===typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function r(e,t){return!1!==t.clone&&t.isMergeableObject(e)?c((n=e,Array.isArray(n)?[]:{}),e,t):e;var n}function o(e,t,n){return e.concat(t).map((function(e){return r(e,n)}))}function l(e){return Object.keys(e).concat(function(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter((function(t){return Object.propertyIsEnumerable.call(e,t)})):[]}(e))}function i(e,t){try{return t in e}catch(n){return!1}}function a(e,t,n){var o={};return n.isMergeableObject(e)&&l(e).forEach((function(t){o[t]=r(e[t],n)})),l(t).forEach((function(l){(function(e,t){return i(e,t)&&!(Object.hasOwnProperty.call(e,t)&&Object.propertyIsEnumerable.call(e,t))})(e,l)||(i(e,l)&&n.isMergeableObject(t[l])?o[l]=function(e,t){if(!t.customMerge)return c;var n=t.customMerge(e);return"function"===typeof n?n:c}(l,n)(e[l],t[l],n):o[l]=r(t[l],n))})),o}function c(e,n,l){(l=l||{}).arrayMerge=l.arrayMerge||o,l.isMergeableObject=l.isMergeableObject||t,l.cloneUnlessOtherwiseSpecified=r;var i=Array.isArray(n);return i===Array.isArray(e)?i?l.arrayMerge(e,n,l):a(e,n,l):r(n,l)}c.all=function(e,t){if(!Array.isArray(e))throw new Error("first argument should be an array");return e.reduce((function(e,n){return c(e,n,t)}),{})};var u=c;e.exports=u},154:function(t){t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var l=n[e]={exports:{}};return t[e](l,l.exports,r),l.exports}r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var o={};r.d(o,{default:function(){return M}});var l=r(744),i=r.n(l);const a=/(?:^\[object\s(.*?)\]$)/;var c=e=>Object.prototype.toString.call(e).replace(a,"$1").toLowerCase();const u=e=>{let{componentProps:t,propName:n,props:r}=e,o=r[n];if("object"===c(o)){const e=t[n].default;t[n].default=()=>i()(e,o)}else Array.isArray(o)?t[n].default=()=>o:t[n].default=o},s=e=>{let{componentMixins:t,propName:n,props:r}=e;if(t.length){let e=t.length;for(;e--;)if(t[e].props&&void 0!==t[e].props[n]){u({componentProps:t[e].props,propName:n,props:r});break}}};var p=(e,t)=>{for(const n of Object.keys(t))e.props?void 0===e.props[n]?s({componentMixins:e.mixins,propName:n,props:t}):u({componentProps:e.props,propName:n,props:t}):s({componentMixins:e.mixins,propName:n,props:t})};var d=e=>{const t={install(t){p(e,arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),t.component(e.name,e)}};return t},f=r(154);const m={cssClasses:{icon:"material-icons"},EVENTS:{CLICK:"click"},getMaterialIconClass:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return[m.cssClasses.icon,...t]}};var y=m;const b={icon:{type:String,default:""}};const v=(0,f.createElementVNode)("span",{class:"mdc-button__ripple"},null,-1),g=(0,f.createElementVNode)("span",{class:"mdc-button__focus-ring"},null,-1),E=["textContent"],w={key:1,class:"mdc-button__label"},O={name:"MdcButton",customOptions:{UI_GLOBAL:y}};var j=Object.assign(O,{props:{outlined:{type:Boolean,default:!1},unelevated:{type:Boolean,default:!1},...b,noLabel:{type:Boolean,default:!1}},emits:[y.EVENTS.CLICK],setup(e,t){let{emit:n}=t;const r=e,o=n,{handleClick:l}=function(e){let{emit:t}=e;return{handleClick:function(e){t(m.EVENTS.CLICK,e)}}}({emit:o}),{materialIcon:i}=function(e){return{materialIcon:(0,f.computed)((()=>e.icon||!1))}}(r),a=(0,f.computed)((()=>({"mdc-button":!0,"mdc-button--outlined":r.outlined,"mdc-button--unelevated":r.unelevated})));return(t,n)=>((0,f.openBlock)(),(0,f.createElementBlock)("button",{type:"button",class:(0,f.normalizeClass)(a.value),onClick:n[0]||(n[0]=function(){return(0,f.unref)(l)&&(0,f.unref)(l)(...arguments)})},[v,g,(0,f.renderSlot)(t.$slots,"icon",{},(()=>[(0,f.unref)(i)?((0,f.openBlock)(),(0,f.createElementBlock)("i",{key:0,class:(0,f.normalizeClass)((0,f.unref)(y).getMaterialIconClass("mdc-button__icon")),"aria-hidden":"true",textContent:(0,f.toDisplayString)((0,f.unref)(i))},null,10,E)):(0,f.createCommentVNode)("",!0)])),e.noLabel?(0,f.renderSlot)(t.$slots,"default",{key:0}):((0,f.openBlock)(),(0,f.createElementBlock)("span",w,[(0,f.renderSlot)(t.$slots,"default")]))],2))}});var S=j;const h={inputId:{type:[String,null],default:null},attrs:{type:Object,default:()=>({})}},C={ERROR:{NON_IMAGE:1,NOT_PREVIEWABLE:2},tmpFileId(){const e=window.crypto||window.msCrypto;let t=new Uint32Array(8);e.getRandomValues(t);let n="";for(let r=0,o=t.length;r<o;r++)n+=(r<2||r>5?"":"-")+t[r].toString(16).slice(-4);return n},createFileObject(e){let{lastModified:t,name:n,size:r,type:o}=e;return{tmpId:C.tmpFileId(),lastModified:t,name:n,size:r,type:o,sourceFile:e}},getPreviewSrc(e){return new Promise(((t,n)=>{if(e.type.startsWith("image/"))if(window.URL)t(window.URL.createObjectURL(e.sourceFile));else if(window.FileReader){let n=new FileReader;n.onload=function(e){t(e.target.result)},n.readAsDataURL(e.sourceFile)}else n(C.ERROR.NOT_PREVIEWABLE);else n(C.ERROR.NON_IMAGE)}))},async handlePreview(e){e.previewSrc="",e.previewError=0;try{e.previewSrc=await C.getPreviewSrc(e)}catch(t){e.previewError=t}}};var N=async function(e,t,n){const r=[].slice.call(t.target.files);if(r.length){const o=await Promise.all(r.map((async t=>{const n=C.createFileObject(t);return e.preview&&await C.handlePreview(n),Promise.resolve(n)})));n(o),t.target.value=""}};const x=["id","accept","multiple","disabled"],k={EVENTS:{CHANGE:"change"}},A={name:"UiFile",customOptions:{UI_FILE:k}};var I=Object.assign(A,{props:{...h,accept:{type:String,default:""},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},text:{type:String,default:"Upload"},preview:{type:Boolean,default:!1}},emits:[k.EVENTS.CHANGE],setup(e,t){let{emit:n}=t;const r=e,o=n,l=(0,f.computed)((()=>({"mdc-file":!0,"mdc-file--single":!r.multiple,"mdc-file--multiple":r.multiple}))),i=(0,f.ref)(null);function a(){if(!r.disabled){const e=i.value;e&&e.click()}}function c(e){N(r,e,(e=>o(k.EVENTS.CHANGE,e)))}return(t,n)=>((0,f.openBlock)(),(0,f.createElementBlock)("div",{class:(0,f.normalizeClass)(l.value),onClick:a},[(0,f.withDirectives)((0,f.createElementVNode)("input",(0,f.mergeProps)({id:t.inputId,ref_key:"file",ref:i,type:"file",accept:e.accept,multiple:e.multiple,disabled:e.disabled},t.attrs,{onChange:c}),null,16,x),[[f.vShow,!1]]),(0,f.renderSlot)(t.$slots,"default",{},(()=>[(0,f.createVNode)(S,{outlined:e.outlined,unelevated:!e.outlined,icon:"file_upload",disabled:e.disabled},{default:(0,f.withCtx)((()=>[(0,f.createTextVNode)((0,f.toDisplayString)(e.text),1)])),_:1},8,["outlined","unelevated","disabled"])]))],2))}});var M=d(I);return o=o.default}()}));