stellar-ui-plus 1.24.27 → 1.25.0

package/components/ste-app-update/props.ts

@@ -16,7 +16,7 @@ export default {
         default: '',
         validator: (value: string) => {
             return typeof value === 'string' && value.length > 0;
-        }
+        },
     },
     clientSecret: {
         type: String,
@@ -24,7 +24,7 @@ export default {
         default: '',
         validator: (value: string) => {
             return typeof value === 'string' && value.length > 0;
-        }
+        },
     },
     apiUrl: {
         type: String,
@@ -34,37 +34,37 @@ export default {
             try {
                 new URL(value);
                 return true;
-            } catch {
+            } catch (e) {
                 return false;
             }
-        }
+        },
     },
     appType: {
         type: String,
         default: '',
         validator: (value: string) => {
             return typeof value === 'string';
-        }
+        },
     },
     btnText: {
         type: String,
         default: '立即体验',
         validator: (value: string) => {
             return typeof value === 'string' && value.length > 0;
-        }
+        },
     },
     appVersion: {
         type: String,
         default: '',
         validator: (value: string) => {
             return typeof value === 'string';
-        }
+        },
     },
     zIndex: {
         type: [Number, String],
         default: () => 998,
         validator: (value: any) => {
-            return typeof value === 'number' || typeof value === 'string'
-        }
-    }
-} satisfies Record<keyof AppUpdateProps, any>;
+            return typeof value === 'number' || typeof value === 'string';
+        },
+    },
+} satisfies Record<keyof AppUpdateProps, any>;

package/components/ste-radio/README.md

@@ -249,7 +249,7 @@
 | 参数                | 说明                              | 类型            | 默认值    | 可选值                            | 支持版本  |
 | ------------------- | --------------------------------- | --------------- | --------- | --------------------------------- | --------- |
 | `value`             | 当前选中值（支持v-model双向绑定） | `String`        | ``        | -                                 | -         |
-| `direction`         | 排列方式                          | `String`        | `row`     | `column`：横向 <br/>`row`：纵向   | -         |
+| `direction`         | 排列方式                          | `String`        | `column`  | `row`：横向 <br/>`column`：纵向   | -         |
 | `disabled`          | 是否禁用                          | `Boolean`       | `false`   | -                                 | -         |
 | `readonly`          | 只读 (不置灰)                     | `Boolean`       | `false`   | -                                 | -         |
 | `shape`             | 形状                              | `String`        | `circle`  | `circle`：圆形 <br/>`squar`：方形 | -         |

package/components/ste-radio/ste-radio.vue

@@ -44,6 +44,7 @@ const cmpRootStyle = computed(() => {
         flexDirection: textPosition === 'right' ? 'row' : 'row-reverse',
         marginLeft: utils.formatPx(getDefaultData('marginLeft', '0')),
         marginRight: utils.formatPx(getDefaultData('marginRight', '0')),
+        columnGap: utils.formatPx(getDefaultData('columnGap', '16')),
     };
 
     // #ifdef H5
@@ -62,12 +63,6 @@ const cmpRootStyle = computed(() => {
     return style;
 });
 
-const cmpIconStyle = computed(() => {
-    return {
-        marginRight: utils.formatPx(getDefaultData('columnGap', '16')),
-    } as CSSProperties;
-});
-
 const cmpInputStyle = computed(() => {
     const shape = getDefaultData('shape', 'circle');
     const iconSize = getDefaultData('iconSize', 36);
@@ -162,7 +157,7 @@ const getDefaultData = <T,>(key: PropsKeyType, defaultValue: T): T => {
 
 <template>
     <view class="ste-radio-root" :style="[cmpRootStyle]" @click="click">
-        <view class="icon" :style="[cmpIconStyle]">
+        <view class="icon">
             <slot name="icon" :slotProps="cmpSlotProps">
                 <view class="input-icon" :style="[cmpInputStyle]">
                     <ste-icon v-if="cmpChecked" :size="cmpIconProps.size" code="&#xe67a;" :color="cmpIconProps.color" bold></ste-icon>

package/components/ste-radio-group/ste-radio-group.vue

@@ -28,7 +28,8 @@ function updateValue(value: string) {
 
 <style lang="scss" scoped>
 .ste-radio-group-root {
-    display: grid;
+    display: flex;
+    column-gap: 16rpx;
     row-gap: 16rpx;
 }
 </style>

package/components/ste-skeleton/ATTRIBUTES.md

@@ -0,0 +1,7 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `loading` | 是否显示骨架图 | `boolean` | `true` | - | - |
+| `type` | 骨架图类型 | `string` | `text` | `text`：文本<br/>`image`：图片<br/>`circle`：圆形<br/>`button`：按钮 | - |
+
+

package/components/ste-skeleton/README.md

@@ -6,6 +6,19 @@
 
 ### 代码演示
 
+JavaScript后面的演示代码中涉及到的变量和方法都使用本`javascript`代码
+
+```javascript
+import { ref, onMounted } from 'vue';
+const loading = ref(true);
+
+onMounted(() => {
+    setTimeout(() => {
+        loading.value = false;
+    }, 3000);
+});
+```
+
 #### 骨架类型
 
 通过`type`属性，设置骨架图类型
@@ -17,7 +30,7 @@
 ```html
 <template>
     <!-- 显示骨架图 -->
-    <ste-skeleton loading>
+    <ste-skeleton :loading="loading">
         <ste-text>床前明月光，疑是地上霜。</ste-text>
     </ste-skeleton>
 
@@ -28,6 +41,30 @@
 </template>
 ```
 
+##### 图片骨架
+
+适用于矩形图片的骨架展示：
+
+```html
+<template>
+    <ste-skeleton :loading="loading" type="image">
+        <ste-image src="https://image.whzb.com/chain/StellarUI/图片.jpg" width="120" height="120" />
+    </ste-skeleton>
+</template>
+```
+
+##### 圆形头像骨架
+
+适用于圆形头像或图标的骨架展示：
+
+```html
+<template>
+    <ste-skeleton :loading="loading" type="circle">
+        <ste-image src="https://image.whzb.com/chain/StellarUI/图片.jpg" width="120" height="120" radius="50" />
+    </ste-skeleton>
+</template>
+```
+
 ---$
 
 ### API

package/components/ste-skeleton/ste-skeleton.vue

@@ -3,11 +3,10 @@
         class="ste-skeleton"
         :class="[
             {
-                'is-loading': loading,
+                'ste-skeleton--loading': loading,
             },
             `ste-skeleton--${type}`,
         ]"
-        ref="skeletonRef"
     >
         <template v-if="loading">
             <ste-icon v-if="type == 'image'" :size="20" code="&#xe693;"></ste-icon>
@@ -20,89 +19,72 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch, type PropType } from 'vue';
 import propsData from './props';
-
 const componentName = `ste-skeleton`;
 
 defineOptions({
     name: componentName,
 });
 const props = defineProps(propsData);
-
-// 组件引用
-let skeletonRef: any = ref(null);
-
-// 动画实例
-let animation: null = null;
-
-// 开始动画
-// function start() {
-//     if (!props.loading) return;
-
-//     animation = createAnimation(skeletonRef.value, {
-//         duration: 2000,
-//         loop: -1,
-//         alternate: true,
-//     })
-//         .opacity('0.3', '1')
-//         .play();
-// }
-
-// // 停止动画
-// function stop() {
-//     if (animation != null) {
-//         animation!.stop();
-//         animation!.reset();
-//     }
-// }
-
-// onMounted(() => {
-//     watch(
-//         computed(() => props.loading),
-//         (val: boolean) => {
-//             if (val) {
-//                 start();
-//             } else {
-//                 stop();
-//             }
-//         },
-//         {
-//             immediate: true,
-//         }
-//     );
-// });
 </script>
 
 <style lang="scss" scoped>
 .ste-skeleton {
-    &.is-loading {
-        @apply bg-surface-100 rounded-md;
+    &.ste-skeleton--loading {
+        background-color: #fafafb;
+        border-radius: 8rpx;
 
         &.ste-skeleton--text {
-            height: 16px;
-            width: 150px;
-            border-radius: 4px;
+            height: 32rpx;
+            width: 300rpx;
+            border-radius: 8rpx;
         }
 
         &.ste-skeleton--image {
-            @apply flex flex-row items-center justify-center;
-            width: 60px;
-            height: 60px;
-            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: row;
+            width: 120rpx;
+            height: 120rpx;
+            border-radius: 16rpx;
         }
 
         &.ste-skeleton--circle {
-            @apply rounded-full;
-            width: 60px;
-            height: 60px;
+            border-radius: 50%;
+            width: 120rpx;
+            height: 120rpx;
         }
 
         &.ste-skeleton--button {
-            @apply rounded-lg;
-            height: 32px;
-            width: 88px;
+            border-radius: 16rpx;
+            height: 64rpx;
+            width: 176rpx;
         }
     }
 }
+
+/* 定义骨架屏闪烁动画 */
+@keyframes skeleton-blink {
+    0% {
+        opacity: 0.3;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+/* 骨架屏基础样式与动画绑定 */
+.ste-skeleton--loading {
+    /* 对应 duration: 2000ms */
+    animation-duration: 2s;
+    /* 对应 loop: -1 (无限循环) */
+    animation-iteration-count: infinite;
+    /* 对应 alternate: true (交替方向) */
+    animation-direction: alternate;
+    /* 动画名称 */
+    animation-name: skeleton-blink;
+    /* 保证动画平滑过渡 */
+    animation-timing-function: ease-in-out;
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stellar-ui-plus",
-    "version": "1.24.27",
+    "version": "1.25.0",
     "description": "",
     "author": "",
     "license": "MIT",