plain-design 1.0.0-beta.149 → 1.0.0-beta.150

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.149",
+  "version": "1.0.0-beta.150",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/Image/image.scss

@@ -278,7 +278,7 @@ div.#{componentName(image)} {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 4px;
+  padding: 1em;
 
   @include prefix(icon) {
     font-size: 36px;
@@ -291,6 +291,7 @@ div.#{componentName(image)} {
   }
 
   &.image-status-pending {
+    padding: 0;
     @include prefix(loading) {
       margin-bottom: 0;
     }
@@ -331,4 +332,8 @@ div.#{componentName(image)} {
       color: plv(primary-6);
     }
   }
+
+  &.image-status-empty, &.image-status-error {
+    aspect-ratio: 1;
+  }
 }

package/src/packages/components/Image/index.tsx

@@ -6,6 +6,7 @@ import {Icon} from "../Icon";
 import {LoadingMask} from "../LoadingMask";
 import i18n from "../i18n";
 import {$previewer} from "../$previewer";
+import Skeleton from "../Skeleton";
 
 /**
  * 图片填充类型
@@ -146,12 +147,18 @@ export const Image = designComponent({
         refs,
       },
       render: () => {
-        if (status.value === eImageStatus.empty || status.value === eImageStatus.pending || status.value === eImageStatus.error) {
+        if (status.value === eImageStatus.empty || status.value === eImageStatus.error) {
           return (
             <div className={classes.value} style={styles.value} onClick={handler.onClick} ref={onRef.el}>
               <Icon icon={status.value === eImageStatus.error ? 'pi-image-close' : 'pi-image'}/>
               {!props.hideTips && <span>{tip[status.value]}</span>}
-              {status.value === eImageStatus.pending && (<LoadingMask modelValue={true} maskColor="rgba(255,255,255,0.15)"/>)}
+            </div>
+          );
+        }
+        if (status.value === eImageStatus.pending) {
+          return (
+            <div className={classes.value} style={styles.value} ref={onRef.el}>
+              <Skeleton full square={props.height == null}/>
             </div>
           );
         }

package/src/packages/components/Skeleton/index.tsx

@@ -0,0 +1,44 @@
+import {designComponent, getComponentCls, useClasses, useStyles} from "@peryl/react-compose";
+import './skeleton.scss';
+import {unit} from "@peryl/utils/unit";
+
+export const Skeleton = designComponent({
+  name: 'skeleton',
+  props: {
+    height: { type: String },                             // 骨架高度
+    width: { type: String, default: '100%' },             // 骨架宽度
+    square: { type: Boolean },                            // 根据宽度自适应为正方形
+    full: { type: Boolean },                              // 适配宽高
+    round: { type: Boolean },                             // 圆形圆角
+    radius: { type: String }                              // 自定义圆角
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const classes = useClasses(() => [
+      getComponentCls('skeleton'),
+      {
+        'skeleton-square': !props.height && props.square,
+        'skeleton-full': props.full,
+      }
+    ]);
+
+    const styles = useStyles(style => {
+      const { height, width } = props;
+      height != null && (style.height = height);
+      width != null && (style.width = width);
+      !!props.radius && (style.borderRadius = unit(props.radius));
+      !!props.round && (style.borderRadius = '9999px');
+    });
+
+    return () => {
+      return (
+        <div className={classes.value} style={styles.value}>
+          {slots.default()}
+        </div>
+      );
+    };
+  },
+});
+
+export default Skeleton;

package/src/packages/components/Skeleton/skeleton.scss

@@ -0,0 +1,27 @@
+@include prefix(skeleton) {
+  position: relative;
+  background: #f6f6f6 linear-gradient(to right, white 0, #e8e8e8 50%, white 100%);
+  background-size: 200% 100%;
+  background-position-x: 100%;
+  animation: loading 1500ms linear infinite;
+
+  &.skeleton-square {
+    aspect-ratio: 1;
+  }
+  &.skeleton-full {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+@keyframes loading {
+  0% {
+    background-position-x: 100%;
+  }
+  50% {
+    background-position-x: 0;
+  }
+  100% {
+    background-position-x: -100%;
+  }
+}

package/src/packages/entry.tsx

@@ -140,6 +140,7 @@ export type {iChatBoxHistory} from './components/AiChatBox';
 export {$ai} from './components/$ai';
 export type {iAiChoice, iAiChatResponse, iAiConfiguration, iAiHistory} from './components/$ai';
 export {IconPicker} from './components/IconPicker';
+export {Skeleton} from './components/Skeleton'
 
 export {VirtualTable} from './components/VirtualTable';
 export {Table} from './components/Table';