quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 3.06 kB
JavaScript
import{_ as t,a as r}from"../typeof.js";import{_ as n,a as e,b as o,c as a,H as i,A as s,d as l,N as h,B as v}from"../index2.js";import{_ as c}from"../defineProperty.js";function d(t){var r=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var o,a=n(t);if(r){var i=n(this).constructor;o=Reflect.construct(a,arguments,i)}else o=a.apply(this,arguments);return e(this,o)}}var u=function(n){o(l,i);var e=d(l);function l(){var r;t(this,l);for(var n=arguments.length,o=new Array(n),i=0;i<n;i++)o[i]=arguments[i];return r=e.call.apply(e,[this].concat(o)),c(a(r),"row",1),c(a(r),"rowwidths",""),c(a(r),"avatar",!1),c(a(r),"avatarshape","round"),c(a(r),"hide",!1),c(a(r),"title",!1),c(a(r),"getRowWidth",(function(t){var n="100%";if(t===r.row-1&&(n="60%"),r.rowwidths){var e=r.rowwidths.split(",");e[t]&&(n=e[t])}return n})),r}return r(l,[{key:"render",value:function(){var t=this;return i.h(s,null,this.hide?i.h("slot",null):i.h("div",{class:"skeleton-container",part:"root"},this.avatar&&i.h("div",{class:"skeleton-avatar",part:"avatar"}),i.h("div",{class:"skeleton-content",part:"content"},this.title&&i.h("h3",{class:"skeleton-title",part:"title"}),new Array(+this.row).fill(1).map((function(r,n){var e=t.getRowWidth(n);return i.h("div",{class:"skeleton-row",part:"row",style:{width:e,marginTop:0!==n||t.title?void 0:"0px"}})})))))}}]),l}();l([h({type:Number})],u.prototype,"row",void 0),l([h()],u.prototype,"rowwidths",void 0),l([h({type:Boolean})],u.prototype,"avatar",void 0),l([h()],u.prototype,"avatarshape",void 0),l([h({type:Boolean})],u.prototype,"hide",void 0),l([h({type:Boolean})],u.prototype,"title",void 0);var p=u=l([v({tag:"quark-skeleton",style:':host {\n display: block;\n width: 100%;\n}\n\n:host .skeleton-container {\n display: flex;\n animation: skeleton-blink 1.2s ease-in-out infinite;\n}\n\n:host .skeleton-content {\n width: 100%;\n}\n\n:host .skeleton-avatar {\n flex-shrink: 0;\n width: var(--skeleton-avatar-size, 8.53333vw);\n height: var(--skeleton-avatar-size, 8.53333vw);\n margin-right: var(--skeleton-avatar-margin-right, 4.26667vw);\n background: var(--skeleton-avatar-background-color, #f2f3f5);\n}\n\n:host([avatarshape="round"]) .skeleton-avatar {\n border-radius: 266.4vw;\n}\n\n:host .skeleton-title {\n width: var(--skeleton-title-width, 40%);\n margin: 0;\n height: var(--skeleton-row-height, 4.26667vw);\n background: var(--skeleton-row-background-color, #f2f3f5);\n border-radius: var(--skeleton-row-border-radius, 0);\n}\n\n:host .skeleton-row {\n margin-top: var(--skeleton-row-margin-top, 3.2vw);\n height: var(--skeleton-row-height, 4.26667vw);\n background-color: var(--skeleton-row-background-color, #f2f3f5);\n border-radius: var(--skeleton-row-border-radius, 0);\n}\n\n@keyframes skeleton-blink {\n 50% {\n opacity: 0.6;\n }\n}\n'})],u);export{p as default};