z-status-pill
Version:
A vue based implementation of modern dynamic pills that bring the best experience and simplicity. It supports enough props to satisfy mind-blowing customizations. Communicate concise statuses with distinct colors and text.
1 lines • 4.26 kB
JavaScript
var ZStatusPill=function(){"use strict";function e(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,i=[],a=!0,s=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){s=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(s)throw o}}return i}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return t(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return t(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var n={name:"ZStatusPill",props:{status:{type:String,default:""},statusIndicatorColor:{type:String,default:""},backgroundColor:{type:String,default:""},width:{type:String,default:""}}};function r(e,t,n,r,o,i,a,s,l,d){"boolean"!=typeof a&&(l=s,s=a,a=!1);const c="function"==typeof n?n.options:n;let u;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),r&&(c._scopeId=r),i?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},c._ssrRegister=u):t&&(u=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(c.functional){const e=c.render;c.render=function(t,n){return u.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,u):[u]}return n}const o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function i(e){return(e,t)=>function(e,t){const n=o?t.media||"default":e,r=s[n]||(s[n]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),void 0===a&&(a=document.head||document.getElementsByTagName("head")[0]),a.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(n),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const e=r.ids.size-1,t=document.createTextNode(n),o=r.element.childNodes;o[e]&&r.element.removeChild(o[e]),o.length?r.element.insertBefore(t,o[e]):r.element.appendChild(t)}}}(e,t)}let a;const s={};var l=r({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"row"},[n("div",{staticClass:"col-lg-12"},[n("div",{staticClass:"status-pill d-flex align-items-center justify-content-center",style:{background:e.backgroundColor?e.backgroundColor:"#DBF5F6",width:e.width}},[n("div",{staticClass:"status-pill-indicator",style:{background:e.statusIndicatorColor?e.statusIndicatorColor:"#23414E"}}),e._v(" "),n("div",{staticClass:"pill-text"},[e._v("\n "+e._s(e.status)+"\n ")])])])])},staticRenderFns:[]},(function(e){e&&e("data-v-4215900a_0",{source:".status-pill[data-v-4215900a]{height:1.56rem;padding:2px 8px;border-radius:1.56rem}.status-pill-indicator[data-v-4215900a]{width:.43rem;height:.43rem;border-radius:50%;margin-right:.63rem}.pill-text[data-v-4215900a]{font-style:normal;font-weight:400;font-size:.75rem;line-height:140%;display:flex;align-items:center;color:#23414e;flex:none;order:1;flex-grow:0;text-transform:capitalize}",map:void 0,media:void 0})}),n,"data-v-4215900a",false,undefined,!1,i,void 0,void 0),d=function(){var e=l;return e.install=function(t){t.component("ZStatusPill",e)},e}(),c=Object.freeze({__proto__:null,default:d});return Object.entries(c).forEach((function(t){var n=e(t,2),r=n[0],o=n[1];"default"!==r&&(d[r]=o)})),d}();