first commit

This commit is contained in:
lingxiao865
2025-09-18 12:39:54 +08:00
parent b2e8461792
commit 6c6fe3d0d6
1898 changed files with 30918 additions and 0 deletions

View File

@@ -0,0 +1,3 @@
import { TdSkeletonProps } from './type';
declare const props: TdSkeletonProps;
export default props;

View File

@@ -0,0 +1 @@
const props={animation:{type:String,value:"none"},delay:{type:Number,value:0},loading:{type:Boolean,value:!0},rowCol:{type:Array},theme:{type:String,value:"text"}};export default props;

View File

@@ -0,0 +1,28 @@
import { SuperComponent } from '../common/src/index';
import { SkeletonRowColObj } from './type';
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[];
};
observers: {
rowCol(): void;
'loading, delay'(): void;
};
lifetimes: {
attached(): void;
detached(): void;
};
methods: {
init(): void;
getColItemClass(obj: SkeletonRowColObj): ClassName;
getColItemStyle(obj: SkeletonRowColObj): Styles;
clearTimer(): void;
isShowSkeleton(): void;
};
}

View File

@@ -0,0 +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.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: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},clearTimer(){this.timer&&(clearTimeout(this.timer),this.timer=null)},isShowSkeleton(){this.clearTimer();const{loading:t,delay:e}=this.properties;t&&0!==e?this.timer=setTimeout(()=>{this.setData({isShow:this.properties.loading})},e):this.setData({isShow:t})}}}};Skeleton=__decorate([wxComponent()],Skeleton);export default Skeleton;

View File

@@ -0,0 +1 @@
{"component":true,"styleIsolation":"apply-shared","usingComponents":{}}

View File

@@ -0,0 +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>

View File

@@ -0,0 +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 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;}}

View File

@@ -0,0 +1,32 @@
export interface TdSkeletonProps {
animation?: {
type: StringConstructor;
value?: 'gradient' | 'flashed' | 'none';
};
delay?: {
type: NumberConstructor;
value?: number;
};
loading?: {
type: BooleanConstructor;
value?: boolean;
};
rowCol?: {
type: ArrayConstructor;
value?: SkeletonRowCol;
};
theme?: {
type: StringConstructor;
value?: 'avatar' | 'image' | 'text' | 'paragraph';
};
}
export declare type SkeletonRowCol = Array<Number | SkeletonRowColObj | Array<SkeletonRowColObj>>;
export interface SkeletonRowColObj {
width?: string;
size?: string;
height?: string;
marginRight?: string;
marginLeft?: string;
margin?: string;
type?: 'rect' | 'circle' | 'text';
}

View File

@@ -0,0 +1 @@
export{};