初始化项目, 添加TDesign等包

miniprogram/miniprogram_npm/tdesign-miniprogram/skeleton/props.d.ts

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

miniprogram/miniprogram_npm/tdesign-miniprogram/skeleton/props.js

@@ -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;

miniprogram/miniprogram_npm/tdesign-miniprogram/skeleton/skeleton.d.ts

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

miniprogram/miniprogram_npm/tdesign-miniprogram/skeleton/skeleton.js

@@ -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:e,rowCol:t}=this.properties,s=[];t.length?s.push(...t):s.push(...ThemeMap[e||"text"]);const i=s.map(e=>{if(isNumber(e))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:i})},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(s=>{if(s in e){const i=isNumber(e[s])?`${e[s]}px`:e[s];"size"===s?[t.width,t.height]=[i,i]:t[s]=i}}),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;

miniprogram/miniprogram_npm/tdesign-miniprogram/skeleton/skeleton.json

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

miniprogram/miniprogram_npm/tdesign-miniprogram/skeleton/skeleton.wxml

@@ -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>

miniprogram/miniprogram_npm/tdesign-miniprogram/skeleton/skeleton.wxss

@@ -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;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;}}

miniprogram/miniprogram_npm/tdesign-miniprogram/skeleton/type.d.ts

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

miniprogram/miniprogram_npm/tdesign-miniprogram/skeleton/type.js

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