balm-ui/components/spinner/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("UiSpinner",["vue"],t):"object"===typeof exports?exports.UiSpinner=t(require("vue")):e.UiSpinner=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===r}(e)}(e)};var r="function"===typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function o(e,t){return!1!==t.clone&&t.isMergeableObject(e)?a((r=e,Array.isArray(r)?[]:{}),e,t):e;var r}function n(e,t,r){return e.concat(t).map((function(e){return o(e,r)}))}function s(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(r){return!1}}function c(e,t,r){var n={};return r.isMergeableObject(e)&&s(e).forEach((function(t){n[t]=o(e[t],r)})),s(t).forEach((function(s){(function(e,t){return i(e,t)&&!(Object.hasOwnProperty.call(e,t)&&Object.propertyIsEnumerable.call(e,t))})(e,s)||(i(e,s)&&r.isMergeableObject(t[s])?n[s]=function(e,t){if(!t.customMerge)return a;var r=t.customMerge(e);return"function"===typeof r?r:a}(s,r)(e[s],t[s],r):n[s]=o(t[s],r))})),n}function a(e,r,s){(s=s||{}).arrayMerge=s.arrayMerge||n,s.isMergeableObject=s.isMergeableObject||t,s.cloneUnlessOtherwiseSpecified=o;var i=Array.isArray(r);return i===Array.isArray(e)?i?s.arrayMerge(e,r,s):c(e,r,s):o(r,s)}a.all=function(e,t){if(!Array.isArray(e))throw new Error("first argument should be an array");return e.reduce((function(e,r){return a(e,r,t)}),{})};var u=a;e.exports=u},154:function(t){t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var s=r[e]={exports:{}};return t[e](s,s.exports,o),s.exports}o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,{a:t}),t},o.d=function(e,t){for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var n={};o.d(n,{default:function(){return K}});var s=o(744),i=o.n(s);const c=/(?:^\[object\s(.*?)\]$)/;var a=e=>Object.prototype.toString.call(e).replace(c,"$1").toLowerCase();const u=e=>{let{componentProps:t,propName:r,props:o}=e,n=o[r];if("object"===a(n)){const e=t[r].default;t[r].default=()=>i()(e,n)}else Array.isArray(n)?t[r].default=()=>n:t[r].default=n},l=e=>{let{componentMixins:t,propName:r,props:o}=e;if(t.length){let e=t.length;for(;e--;)if(t[e].props&&void 0!==t[e].props[r]){u({componentProps:t[e].props,propName:r,props:o});break}}};var p=(e,t)=>{for(const r of Object.keys(t))e.props?void 0===e.props[r]?l({componentMixins:e.mixins,propName:r,props:t}):u({componentProps:e.props,propName:r,props:t}):l({componentMixins:e.mixins,propName:r,props:t})};var f=e=>{const t={install(t){p(e,arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),t.component(e.name,e)}};return t},d=o(154),m=function(e,t){return m=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},m(e,t)};function y(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}m(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var g=function(){return g=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},g.apply(this,arguments)};Object.create;function v(e,t){var r="function"===typeof Symbol&&e[Symbol.iterator];if(!r)return e;var o,n,s=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(o=s.next()).done;)i.push(o.value)}catch(c){n={error:c}}finally{try{o&&!o.done&&(r=s.return)&&r.call(s)}finally{if(n)throw n.error}}return i}function h(e,t,r){if(r||2===arguments.length)for(var o,n=0,s=t.length;n<s;n++)!o&&n in t||(o||(o=Array.prototype.slice.call(t,0,n)),o[n]=t[n]);return e.concat(o||Array.prototype.slice.call(t))}Object.create;"function"===typeof SuppressedError&&SuppressedError;var b=function(){function e(e){void 0===e&&(e={}),this.adapter=e}return Object.defineProperty(e,"cssClasses",{get:function(){return{}},enumerable:!1,configurable:!0}),Object.defineProperty(e,"strings",{get:function(){return{}},enumerable:!1,configurable:!0}),Object.defineProperty(e,"numbers",{get:function(){return{}},enumerable:!1,configurable:!0}),Object.defineProperty(e,"defaultAdapter",{get:function(){return{}},enumerable:!1,configurable:!0}),e.prototype.init=function(){},e.prototype.destroy=function(){},e}(),E=function(){function e(e,t){for(var r=[],o=2;o<arguments.length;o++)r[o-2]=arguments[o];this.root=e,this.initialize.apply(this,h([],v(r))),this.foundation=void 0===t?this.getDefaultFoundation():t,this.foundation.init(),this.initialSyncWithDOM()}return e.attachTo=function(t){return new e(t,new b({}))},e.prototype.initialize=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t]},e.prototype.getDefaultFoundation=function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")},e.prototype.initialSyncWithDOM=function(){},e.prototype.destroy=function(){this.foundation.destroy()},e.prototype.listen=function(e,t,r){this.root.addEventListener(e,t,r)},e.prototype.unlisten=function(e,t,r){this.root.removeEventListener(e,t,r)},e.prototype.emit=function(e,t,r){var o;void 0===r&&(r=!1),"function"===typeof CustomEvent?o=new CustomEvent(e,{bubbles:r,detail:t}):(o=document.createEvent("CustomEvent")).initCustomEvent(e,r,!1,t),this.root.dispatchEvent(o)},e}(),A={INDETERMINATE_CLASS:"mdc-circular-progress--indeterminate",CLOSED_CLASS:"mdc-circular-progress--closed"},S={ARIA_HIDDEN:"aria-hidden",ARIA_VALUENOW:"aria-valuenow",DETERMINATE_CIRCLE_SELECTOR:".mdc-circular-progress__determinate-circle",RADIUS:"r",STROKE_DASHOFFSET:"stroke-dashoffset"},C=function(e){function t(r){return e.call(this,g(g({},t.defaultAdapter),r))||this}return y(t,e),Object.defineProperty(t,"cssClasses",{get:function(){return A},enumerable:!1,configurable:!0}),Object.defineProperty(t,"strings",{get:function(){return S},enumerable:!1,configurable:!0}),Object.defineProperty(t,"defaultAdapter",{get:function(){return{addClass:function(){},getDeterminateCircleAttribute:function(){return null},hasClass:function(){return!1},removeClass:function(){},removeAttribute:function(){},setAttribute:function(){},setDeterminateCircleAttribute:function(){}}},enumerable:!1,configurable:!0}),t.prototype.init=function(){this.closed=this.adapter.hasClass(A.CLOSED_CLASS),this.determinate=!this.adapter.hasClass(A.INDETERMINATE_CLASS),this.progress=0,this.determinate&&this.adapter.setAttribute(S.ARIA_VALUENOW,this.progress.toString()),this.radius=Number(this.adapter.getDeterminateCircleAttribute(S.RADIUS))},t.prototype.setDeterminate=function(e){this.determinate=e,this.determinate?(this.adapter.removeClass(A.INDETERMINATE_CLASS),this.setProgress(this.progress)):(this.adapter.addClass(A.INDETERMINATE_CLASS),this.adapter.removeAttribute(S.ARIA_VALUENOW))},t.prototype.isDeterminate=function(){return this.determinate},t.prototype.setProgress=function(e){if(this.progress=e,this.determinate){var t=(1-this.progress)*(2*Math.PI*this.radius);this.adapter.setDeterminateCircleAttribute(S.STROKE_DASHOFFSET,""+t),this.adapter.setAttribute(S.ARIA_VALUENOW,this.progress.toString())}},t.prototype.getProgress=function(){return this.progress},t.prototype.open=function(){this.closed=!1,this.adapter.removeClass(A.CLOSED_CLASS),this.adapter.removeAttribute(S.ARIA_HIDDEN)},t.prototype.close=function(){this.closed=!0,this.adapter.addClass(A.CLOSED_CLASS),this.adapter.setAttribute(S.ARIA_HIDDEN,"true")},t.prototype.isClosed=function(){return this.closed},t}(b),O=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return y(t,e),t.prototype.initialize=function(){this.determinateCircle=this.root.querySelector(C.strings.DETERMINATE_CIRCLE_SELECTOR)},t.attachTo=function(e){return new t(e)},Object.defineProperty(t.prototype,"determinate",{set:function(e){this.foundation.setDeterminate(e)},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"progress",{set:function(e){this.foundation.setProgress(e)},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"isClosed",{get:function(){return this.foundation.isClosed()},enumerable:!1,configurable:!0}),t.prototype.open=function(){this.foundation.open()},t.prototype.close=function(){this.foundation.close()},t.prototype.getDefaultFoundation=function(){var e=this;return new C({addClass:function(t){e.root.classList.add(t)},getDeterminateCircleAttribute:function(t){return e.determinateCircle.getAttribute(t)},hasClass:function(t){return e.root.classList.contains(t)},removeClass:function(t){e.root.classList.remove(t)},removeAttribute:function(t){e.root.removeAttribute(t)},setAttribute:function(t,r){e.root.setAttribute(t,r)},setDeterminateCircleAttribute:function(t,r){e.determinateCircle.setAttribute(t,r)}})},t}(E);const _={class:"mdc-circular-progress__spinner-layer"},k={class:"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left"},w=["viewBox"],x=["cx","cy","r","stroke-dasharray","stroke-dashoffset","stroke-width"],j={class:"mdc-circular-progress__gap-patch"},N=["viewBox"],D=["cx","cy","r","stroke-dasharray","stroke-dashoffset","stroke-width"],P={class:"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right"},B=["viewBox"],I=["cx","cy","r","stroke-dasharray","stroke-dashoffset","stroke-width"],M={cssClasses:{circle:"mdc-circular-progress__indeterminate-circle-graphic"}},R={name:"MdcSpinnerLayer",customOptions:{UI_CIRCULAR_PROGRESS_INDETERMINATE:M}};var L=Object.assign(R,{props:{svg:{type:Object,required:!0}},setup(e){const t=e,r=(0,d.computed)((()=>t.svg.stroke/2)),o=(0,d.computed)((()=>.8*t.svg.width));return(t,n)=>((0,d.openBlock)(),(0,d.createElementBlock)("div",_,[(0,d.createElementVNode)("div",k,[((0,d.openBlock)(),(0,d.createElementBlock)("svg",{class:(0,d.normalizeClass)(M.cssClasses.circle),viewBox:e.svg.viewBox},[(0,d.createElementVNode)("circle",{fill:"none",cx:e.svg.cx,cy:e.svg.cy,r:e.svg.r,"stroke-dasharray":e.svg.stroke,"stroke-dashoffset":r.value,"stroke-width":e.svg.width},null,8,x)],10,w))]),(0,d.createElementVNode)("div",j,[((0,d.openBlock)(),(0,d.createElementBlock)("svg",{class:(0,d.normalizeClass)(M.cssClasses.circle),viewBox:e.svg.viewBox},[(0,d.createElementVNode)("circle",{fill:"none",cx:e.svg.cx,cy:e.svg.cy,r:e.svg.r,"stroke-dasharray":e.svg.stroke,"stroke-dashoffset":r.value,"stroke-width":o.value},null,8,D)],10,N))]),(0,d.createElementVNode)("div",P,[((0,d.openBlock)(),(0,d.createElementBlock)("svg",{class:(0,d.normalizeClass)(M.cssClasses.circle),viewBox:e.svg.viewBox},[(0,d.createElementVNode)("circle",{fill:"none",cx:e.svg.cx,cy:e.svg.cy,r:e.svg.r,"stroke-dasharray":e.svg.stroke,"stroke-dashoffset":r.value,"stroke-width":e.svg.width},null,8,I)],10,B))])]))}}),T={MIN:0,MAX:1};const z={active:{type:Boolean,default:!1},progress:{type:Number,default:0},label:String,closed:{type:Boolean,default:!1}};const U=["aria-label"],V={class:"mdc-circular-progress__determinate-container"},$=["viewBox"],F=["cx","cy","r","stroke-dasharray","stroke-dashoffset","stroke-width"],W={class:"mdc-circular-progress__indeterminate-container"},H="UiSpinner",q={SVG:{large:{viewBox:"0 0 48 48",cx:24,cy:24,r:18,stroke:113.097,width:4},medium:{viewBox:"0 0 32 32",cx:16,cy:16,r:12.5,stroke:78.54,width:3},small:{viewBox:"0 0 24 24",cx:"12",cy:"12",r:"8.75",stroke:"54.978",width:2.5}}},G={name:H,customOptions:{name:H,UI_CIRCULAR_PROGRESS:q}};var K=f(Object.assign(G,{props:{...z,size:{type:String,default:"large"},fourColored:{type:Boolean,default:!1}},setup(e){const t=e,r=(0,d.ref)(null),o=(0,d.reactive)({$circularProgress:null,currentSize:""}),n=(0,d.computed)((()=>["mdc-circular-progress",`mdc-circular-progress--${o.currentSize}`,{"mdc-circular-progress--indeterminate":t.active,"mdc-circular-progress--closed":t.closed}])),s=(0,d.computed)((()=>o.currentSize?q.SVG[o.currentSize]:{}));return(0,d.onBeforeMount)((()=>{switch(t.size){case"M":case"medium":o.currentSize="medium";break;case"S":case"small":o.currentSize="small";break;default:o.currentSize="large"}})),(0,d.onMounted)((()=>{if(o.currentSize){o.$circularProgress=new O(r.value);const{setProgress:e}=function(e,t){function r(t){e&&t>=T.MIN&&t<=T.MAX?e.progress=t:console.warn("[UiProgress/UiSpinner]","The value should be between [0, 1]")}return(0,d.watch)((()=>t.progress),(e=>r(e))),{setProgress:r}}(o.$circularProgress,t);e(t.progress)}else console.warn(`[${H}]: Please choose correct size`)})),(t,o)=>((0,d.openBlock)(),(0,d.createElementBlock)("div",{ref_key:"circularProgress",ref:r,role:"progressbar",class:(0,d.normalizeClass)(n.value),"aria-label":t.label,"aria-valuemin":"0","aria-valuemax":"1"},[(0,d.createElementVNode)("div",V,[((0,d.openBlock)(),(0,d.createElementBlock)("svg",{class:"mdc-circular-progress__determinate-circle-graphic",viewBox:s.value.viewBox},[(0,d.createElementVNode)("circle",{class:"mdc-circular-progress__determinate-circle",fill:"none",cx:s.value.cx,cy:s.value.cy,r:s.value.r,"stroke-dasharray":s.value.stroke,"stroke-dashoffset":s.value.stroke,"stroke-width":s.value.width},null,8,F)],8,$))]),(0,d.createElementVNode)("div",W,[e.fourColored?((0,d.openBlock)(),(0,d.createElementBlock)(d.Fragment,{key:0},(0,d.renderList)(4,(e=>(0,d.createVNode)(L,{key:e,class:(0,d.normalizeClass)(`mdc-circular-progress__color-${e}`),svg:s.value},null,8,["class","svg"]))),64)):((0,d.openBlock)(),(0,d.createBlock)(L,{key:1,svg:s.value},null,8,["svg"]))])],10,U))}}));return n=n.default}()}));