This commit is contained in:
lik
2026-05-28 17:06:18 +08:00
parent a93a75b3c6
commit db0f47d994
582 changed files with 8060 additions and 1781 deletions

View File

@@ -4,10 +4,11 @@ import { ClassName, Styles } from '../common/common';
export default class Skeleton extends SuperComponent {
externalClasses: string[];
properties: import("./type").TdSkeletonProps;
timer: any;
data: {
prefix: string;
classPrefix: string;
parsedRowcols: any[];
parsedRowCols: any[];
};
observers: {
rowCol(): void;
@@ -15,11 +16,13 @@ export default class Skeleton extends SuperComponent {
};
lifetimes: {
attached(): void;
detached(): void;
};
methods: {
init(): void;
getColItemClass(obj: SkeletonRowColObj): ClassName;
getColItemStyle(obj: SkeletonRowColObj): Styles;
clearTimer(): void;
isShowSkeleton(): void;
};
}

View File

@@ -1 +1 @@
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{classNames}from"../common/utils";import{isNumber}from"../common/validator";const{prefix:prefix}=config,name=`${prefix}-skeleton`,ThemeMap={avatar:[{type:"circle",size:"96rpx"}],image:[{type:"rect",size:"144rpx"}],text:[[{width:"24%",height:"32rpx",marginRight:"32rpx"},{width:"76%",height:"32rpx"}],1],paragraph:[1,1,1,{width:"55%"}]};let Skeleton=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-col`,`${prefix}-class-row`],this.properties=props,this.data={prefix:prefix,classPrefix:name,parsedRowcols:[]},this.observers={rowCol(){this.init()},"loading, delay"(){this.isShowSkeleton()}},this.lifetimes={attached(){this.init(),this.isShowSkeleton()}},this.methods={init(){const{theme:t,rowCol:e}=this.properties,s=[];e.length?s.push(...e):s.push(...ThemeMap[t||"text"]);const i=s.map((t=>{if(isNumber(t))return[{class:this.getColItemClass({type:"text"}),style:{}}];if(Array.isArray(t))return t.map((t=>Object.assign(Object.assign({},t),{class:this.getColItemClass(t),style:this.getColItemStyle(t)})));const e=t;return[Object.assign(Object.assign({},e),{class:this.getColItemClass(e),style:this.getColItemStyle(e)})]}));this.setData({parsedRowcols:i})},getColItemClass(t){return classNames([`${name}__col`,`${name}--type-${t.type||"text"}`,`${name}--animation-${this.properties.animation}`])},getColItemStyle(t){const e={};return["width","height","marginRight","marginLeft","margin","size","background","backgroundColor","borderRadius"].forEach((s=>{if(s in t){const i=isNumber(t[s])?`${t[s]}px`:t[s];"size"===s?[e.width,e.height]=[i,i]:e[s]=i}})),e},isShowSkeleton(){const{loading:t,delay:e}=this.properties;t&&0!==e?setTimeout((()=>{this.setData({isShow:t})}),e):this.setData({isShow:t})}}}};Skeleton=__decorate([wxComponent()],Skeleton);export default Skeleton;
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{classNames}from"../common/utils";import{isInteger,isNumeric}from"../common/validator";const{prefix:prefix}=config,name=`${prefix}-skeleton`,ThemeMap={avatar:[{type:"circle",size:"96rpx"}],image:[{type:"rect",size:"144rpx"}],text:[[{width:"24%",height:"32rpx",marginRight:"32rpx"},{width:"76%",height:"32rpx"}],1],paragraph:[1,1,1,{width:"55%"}]};let Skeleton=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-col`,`${prefix}-class-row`],this.properties=props,this.timer=void 0,this.data={prefix:prefix,classPrefix:name,parsedRowCols:[]},this.observers={rowCol(){this.init()},"loading, delay"(){this.isShowSkeleton()}},this.lifetimes={attached(){this.init(),this.isShowSkeleton()},detached(){this.clearTimer()}},this.methods={init(){const{theme:e,rowCol:t}=this.properties,i=[];t.length?i.push(...t):i.push(...ThemeMap[e||"text"]);const s=i.map(e=>{if(isInteger(e)&&e>=0)return new Array(e).fill({class:this.getColItemClass({type:"text"}),style:{}});if(Array.isArray(e))return e.map(e=>Object.assign(Object.assign({},e),{class:this.getColItemClass(e),style:this.getColItemStyle(e)}));const t=e;return[Object.assign(Object.assign({},t),{class:this.getColItemClass(t),style:this.getColItemStyle(t)})]});this.setData({parsedRowCols:s})},getColItemClass(e){return classNames([`${name}__col`,`${name}--type-${e.type||"text"}`,`${name}--animation-${this.properties.animation}`])},getColItemStyle(e){const t={};return["width","height","marginRight","marginLeft","margin","size","background","backgroundColor","borderRadius"].forEach(i=>{if(i in e){const s=isNumeric(e[i])?`${e[i]}px`:e[i];"size"===i?[t.width,t.height]=[s,s]:t[i]=s}}),t},clearTimer(){this.timer&&(clearTimeout(this.timer),this.timer=null)},isShowSkeleton(){this.clearTimer();const{loading:e,delay:t}=this.properties;e&&0!==t?this.timer=setTimeout(()=>{this.setData({isShow:this.properties.loading})},t):this.setData({isShow:e})}}}};Skeleton=__decorate([wxComponent()],Skeleton);export default Skeleton;

View File

@@ -1 +1 @@
<wxs src="../common/utils.wxs" module="_"/><view wx:if="{{ isShow }}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class"><view wx:if="{{ parsedRowcols.length }}" class="{{classPrefix}}__content"><view wx:for="{{parsedRowcols}}" wx:for-index="index" wx:for-item="row" wx:key="index" class="{{classPrefix}}__row {{prefix}}-class-row"><view wx:for="{{ row }}" wx:for-index="index" wx:for-item="col" wx:key="index" class="{{col.class}} {{prefix}}-class-col" style="{{_._style(col.style)}}"></view></view></view></view><view wx:else class="class {{classPrefix}}__content"><slot/></view>
<wxs src="../common/utils.wxs" module="_"/><view wx:if="{{ isShow }}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class"><view wx:if="{{ parsedRowCols.length }}" class="{{classPrefix}}__content"><view wx:for="{{parsedRowCols}}" wx:for-index="index" wx:for-item="row" wx:key="index" class="{{classPrefix}}__row {{prefix}}-class-row"><view wx:for="{{ row }}" wx:for-index="index" wx:for-item="col" wx:key="index" class="{{col.class}} {{prefix}}-class-col" style="{{_._style(col.style)}}"></view></view></view></view><view wx:else class="class {{classPrefix}}__content"><slot/></view>

View File

@@ -1 +1,18 @@
@import '../common/style/index.wxss';.t-skeleton{box-sizing:border-box}.t-skeleton__row{display:flex;margin-bottom:var(--td-skeleton-row-spacing,var(--td-spacer-2,32rpx));align-items:center;justify-content:space-between}.t-skeleton__row:last-child,.t-skeleton__row:only-child{margin-bottom:0}.t-skeleton__col{background-color:var(--td-skeleton-bg-color,var(--td-bg-color-secondarycontainer,var(--td-gray-color-1,#f3f3f3)));display:flex;align-items:center;justify-content:center}.t-skeleton__col:first-child:last-child,.t-skeleton__col:last-child{margin-right:0}.t-skeleton--type-text{width:100%;height:var(--td-skeleton-text-height,32rpx);border-radius:var(--td-skeleton-text-border-radius,var(--td-radius-small,6rpx))}.t-skeleton--type-rect{width:100%;height:var(--td-skeleton-rect-height,32rpx);border-radius:var(--td-skeleton-rect-border-radius,var(--td-radius-default,12rpx))}.t-skeleton--type-circle{width:var(--td-skeleton-circle-height,96rpx);height:var(--td-skeleton-circle-height,96rpx);border-radius:var(--td-skeleton-circle-border-radius,var(--td-skeleton-circle-border-radius,var(--td-radius-circle,50%)));flex-shrink:0}.t-skeleton--animation-gradient{position:relative;overflow-x:hidden}.t-skeleton--animation-gradient::after{content:' ';position:absolute;bottom:0;left:0;right:0;top:0;background:linear-gradient(90deg,rgba(255,255,255,0),var(--td-skeleton-animation-gradient,rgba(0,0,0,.04)),rgba(255,255,255,0));animation:t-skeleton--gradient 1.5s linear 2s infinite}.t-skeleton--animation-flashed{animation:t-skeleton--flashed 2s linear 2s infinite}@keyframes t-skeleton--gradient{0%{transform:translateX(-100%) skewX(-15deg)}100%{transform:translateX(100%) skewX(-15deg)}}@keyframes t-skeleton--flashed{0%{opacity:1}50%{background-color:var(--td-skeleton-animation-flashed,rgba(230,230,230,.3));opacity:.3}100%{opacity:1}}
@import '../common/style/index.wxss';.t-skeleton{box-sizing:border-box;}
.t-skeleton__row{display:flex;margin-bottom:var(--td-skeleton-row-spacing,var(--td-spacer-2,32rpx));align-items:center;justify-content:space-between;}
.t-skeleton__row:last-child,.t-skeleton__row:only-child{margin-bottom:0;}
.t-skeleton__col{background-color:var(--td-skeleton-bg-color,var(--td-bg-color-secondarycontainer,var(--td-gray-color-1,#f3f3f3)));display:flex;align-items:center;justify-content:center;margin-right:var(--td-spacer-2,32rpx);}
.t-skeleton__col:first-child:last-child,.t-skeleton__col:last-child{margin-right:0;}
.t-skeleton--type-text{width:100%;height:var(--td-skeleton-text-height,32rpx);border-radius:var(--td-skeleton-text-border-radius,var(--td-radius-small,6rpx));}
.t-skeleton--type-rect{width:100%;height:var(--td-skeleton-rect-height,32rpx);border-radius:var(--td-skeleton-rect-border-radius,var(--td-radius-default,12rpx));}
.t-skeleton--type-circle{width:var(--td-skeleton-circle-height,96rpx);height:var(--td-skeleton-circle-height,96rpx);border-radius:var(--td-skeleton-circle-border-radius,var(--td-skeleton-circle-border-radius,var(--td-radius-circle,50%)));flex-shrink:0;}
.t-skeleton--animation-gradient{position:relative;overflow-x:hidden;}
.t-skeleton--animation-gradient::after{content:' ';position:absolute;bottom:0;left:0;right:0;top:0;background:linear-gradient(90deg,rgba(255,255,255,0),var(--td-skeleton-animation-gradient,rgba(0,0,0,.04)),rgba(255,255,255,0));animation:t-skeleton--gradient 1.5s linear 0s infinite;}
.t-skeleton--animation-flashed{animation:t-skeleton--flashed 2s linear 0s infinite;}
@keyframes t-skeleton--gradient{
0%{transform:translateX(-100%) skewX(-15deg);}
100%{transform:translateX(100%) skewX(-15deg);}}
@keyframes t-skeleton--flashed{
0%{opacity:1;}
50%{background-color:var(--td-skeleton-animation-flashed,rgba(230,230,230,.3));opacity:.3;}
100%{opacity:1;}}