stellar-ui-v2 1.40.0 → 1.40.2

package/README.md

@@ -10,9 +10,9 @@
 
 ## ✨ 特性
 
-- 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、H5.
-- 🚀 40+ 个高质量组件，覆盖移动端主流场景.
-- 📖 提供丰富的文档和组件示例.
+- 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、H5.
+- 🚀 40+ 个高质量组件，覆盖移动端主流场景.
+- 📖 提供丰富的文档和组件示例.
 - 🎨 支持修改 CSS 变量实现主题定制.
 
 ## 📱 预览
@@ -75,11 +75,11 @@ npm i stellar-ui-v2 -S
 
 ## 周边生态
 
-| 项目																							| 描述															|
-| ---																							| ---															|
-|[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus)							| 一个基于vue3构建，打造的uni-app组件库								|
-|[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader)					|常用于小程序需要全局引入组件的场景的包								|
-|[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper)	|旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件	|
+| 项目																							| 描述															|
+| ---																							| ---															|
+|[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus)							| 一个基于vue3构建，打造的uni-app组件库								|
+|[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader)					|常用于小程序需要全局引入组件的场景的包								|
+|[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper)	|旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件	|
 |[ste-cli](https://github.com/wuhanshuzhiyun/ste-cli)											|stellar配套的脚手架												|
 
 ## 核心团队

package/components/ste-animate/animate.scss

@@ -1,247 +1,247 @@
-// 横向抖动动画
-@keyframes shakeX {
-	0%,
-	100% {
-		transform: translateX(0);
-	}
-
-	10% {
-		transform: translateX(-9px);
-	}
-
-	20% {
-		transform: translateX(8px);
-	}
-
-	30% {
-		transform: translateX(-7px);
-	}
-
-	40% {
-		transform: translateX(6px);
-	}
-
-	50% {
-		transform: translateX(-5px);
-	}
-
-	60% {
-		transform: translateX(4px);
-	}
-
-	70% {
-		transform: translateX(-3px);
-	}
-
-	80% {
-		transform: translateX(2px);
-	}
-
-	90% {
-		transform: translateX(-1px);
-	}
-}
-
-// 竖向抖动动画
-@keyframes shakeY {
-	0%,
-	100% {
-		transform: translateY(0);
-	}
-
-	10% {
-		transform: translateY(-9px);
-	}
-
-	20% {
-		transform: translateY(8px);
-	}
-
-	30% {
-		transform: translateY(-7px);
-	}
-
-	40% {
-		transform: translateY(6px);
-	}
-
-	50% {
-		transform: translateY(-5px);
-	}
-
-	60% {
-		transform: translateY(4px);
-	}
-
-	70% {
-		transform: translateY(-3px);
-	}
-
-	80% {
-		transform: translateY(2px);
-	}
-
-	90% {
-		transform: translateY(-1px);
-	}
-}
-
-// 心跳
-@keyframes ripple {
-	0% {
-		// box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.4);
-
-		transform: scale(1);
-	}
-
-	50% {
-		// box-shadow: 0 1em 1em rgba(0, 0, 0, 0.4);
-		transform: scale(1.1);
-	}
-}
-
-// 呼吸
-@keyframes breath {
-	0% {
-		transform: scale(1);
-	}
-
-	50% {
-		transform: scale(1.1);
-	}
-
-	100% {
-		transform: scale(1);
-	}
-}
-
-// 右侧向左侧划入
-@keyframes slide-right {
-	0% {
-		opacity: 0;
-		transform: translateX(100%);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateX(0);
-	}
-}
-
-// 左侧向右侧划入
-@keyframes slide-left {
-	0% {
-		opacity: 0;
-		transform: translateX(-100%);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateX(0);
-	}
-}
-
-// 上面向下面划入
-@keyframes slide-top {
-	0% {
-		opacity: 0;
-		transform: translateY(-100%);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-// 下面向上面划入
-@keyframes slide-bottom {
-	0% {
-		opacity: 0;
-		transform: translateY(100%);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-// 漂浮 float
-@keyframes floatPop {
-	0% {
-		top: 0;
-	}
-
-	25% {
-		top: 1px;
-	}
-
-	50% {
-		top: 4px;
-	}
-
-	75% {
-		top: 1px;
-	}
-
-	100% {
-		top: 0;
-	}
-}
-
-// 跳跃
-@keyframes jump {
-	0% {
-		transform: rotate(0deg) translateY(0);
-		animation-timing-function: ease-in;
-	}
-
-	25% {
-		transform: rotate(10deg) translateY(20 * 1px);
-		animation-timing-function: ease-out;
-	}
-
-	50% {
-		transform: rotate(0deg) translateY(-10 * 1px);
-		animation-timing-function: ease-in;
-	}
-
-	75% {
-		transform: rotate(-10deg) translateY(20 * 1px);
-		animation-timing-function: ease-out;
-	}
-
-	100% {
-		transform: rotate(0deg) translateY(0);
-		animation-timing-function: ease-in;
-	}
-}
-
-// 水波
-@keyframes twinkle {
-	0% {
-		transform: scale(0);
-	}
-
-	20% {
-		opacity: 1;
-	}
-
-	50%,
-	100% {
-		opacity: 0;
-		transform: scale(1.4);
-	}
-}
-
-@keyframes flicker {
-	0% {
-		transform: translateX(-100 * 1px) skewX(-20deg);
-	}
-
-	40%,
-	100% {
-		transform: translateX(150 * 1px) skewX(-20deg);
-	}
-}
+// 横向抖动动画
+@keyframes shakeX {
+	0%,
+	100% {
+		transform: translateX(0);
+	}
+
+	10% {
+		transform: translateX(-9px);
+	}
+
+	20% {
+		transform: translateX(8px);
+	}
+
+	30% {
+		transform: translateX(-7px);
+	}
+
+	40% {
+		transform: translateX(6px);
+	}
+
+	50% {
+		transform: translateX(-5px);
+	}
+
+	60% {
+		transform: translateX(4px);
+	}
+
+	70% {
+		transform: translateX(-3px);
+	}
+
+	80% {
+		transform: translateX(2px);
+	}
+
+	90% {
+		transform: translateX(-1px);
+	}
+}
+
+// 竖向抖动动画
+@keyframes shakeY {
+	0%,
+	100% {
+		transform: translateY(0);
+	}
+
+	10% {
+		transform: translateY(-9px);
+	}
+
+	20% {
+		transform: translateY(8px);
+	}
+
+	30% {
+		transform: translateY(-7px);
+	}
+
+	40% {
+		transform: translateY(6px);
+	}
+
+	50% {
+		transform: translateY(-5px);
+	}
+
+	60% {
+		transform: translateY(4px);
+	}
+
+	70% {
+		transform: translateY(-3px);
+	}
+
+	80% {
+		transform: translateY(2px);
+	}
+
+	90% {
+		transform: translateY(-1px);
+	}
+}
+
+// 心跳
+@keyframes ripple {
+	0% {
+		// box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.4);
+
+		transform: scale(1);
+	}
+
+	50% {
+		// box-shadow: 0 1em 1em rgba(0, 0, 0, 0.4);
+		transform: scale(1.1);
+	}
+}
+
+// 呼吸
+@keyframes breath {
+	0% {
+		transform: scale(1);
+	}
+
+	50% {
+		transform: scale(1.1);
+	}
+
+	100% {
+		transform: scale(1);
+	}
+}
+
+// 右侧向左侧划入
+@keyframes slide-right {
+	0% {
+		opacity: 0;
+		transform: translateX(100%);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+// 左侧向右侧划入
+@keyframes slide-left {
+	0% {
+		opacity: 0;
+		transform: translateX(-100%);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+// 上面向下面划入
+@keyframes slide-top {
+	0% {
+		opacity: 0;
+		transform: translateY(-100%);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+// 下面向上面划入
+@keyframes slide-bottom {
+	0% {
+		opacity: 0;
+		transform: translateY(100%);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+// 漂浮 float
+@keyframes floatPop {
+	0% {
+		top: 0;
+	}
+
+	25% {
+		top: 1px;
+	}
+
+	50% {
+		top: 4px;
+	}
+
+	75% {
+		top: 1px;
+	}
+
+	100% {
+		top: 0;
+	}
+}
+
+// 跳跃
+@keyframes jump {
+	0% {
+		transform: rotate(0deg) translateY(0);
+		animation-timing-function: ease-in;
+	}
+
+	25% {
+		transform: rotate(10deg) translateY(20 * 1px);
+		animation-timing-function: ease-out;
+	}
+
+	50% {
+		transform: rotate(0deg) translateY(-10 * 1px);
+		animation-timing-function: ease-in;
+	}
+
+	75% {
+		transform: rotate(-10deg) translateY(20 * 1px);
+		animation-timing-function: ease-out;
+	}
+
+	100% {
+		transform: rotate(0deg) translateY(0);
+		animation-timing-function: ease-in;
+	}
+}
+
+// 水波
+@keyframes twinkle {
+	0% {
+		transform: scale(0);
+	}
+
+	20% {
+		opacity: 1;
+	}
+
+	50%,
+	100% {
+		opacity: 0;
+		transform: scale(1.4);
+	}
+}
+
+@keyframes flicker {
+	0% {
+		transform: translateX(-100 * 1px) skewX(-20deg);
+	}
+
+	40%,
+	100% {
+		transform: translateX(150 * 1px) skewX(-20deg);
+	}
+}

package/components/ste-coupon-list/README.md

@@ -0,0 +1,185 @@
+# CouponList 券列表
+
+此组件用于券列表展示
+
+---$
+
+### 基础用法
+
+- 属性`data`用于基础数据展示
+
+```html
+<script lang="ts" setup>
+    import { ref } from 'vue';
+
+    const data = ref({
+        title: '满11-5乐事组合【外卖】',
+        desc: '截至日期 2025.11.30',
+        image: 'https://image.whzb.com/chain/StellarUI/image/img5.jfif',
+        price: 500,
+        constraint: '满11可用',
+        footers: ['1、本券不可用于部分特惠商品、特殊商品及其他券看加使'],
+    });
+</script>
+<template>
+    <ste-coupon-list :data="data" />
+</template>
+```
+
+### 倒计时
+
+- 属性`endTime`用于设置倒计时结束时间
+
+```html
+<script lang="ts" setup>
+    import { ref } from 'vue';
+
+    const data = ref({
+        title: '满11-5乐事组合【外卖】',
+        desc: '截至日期 2025.11.30',
+        image: 'https://image.whzb.com/chain/StellarUI/image/img5.jfif',
+        price: 500,
+        constraint: '满11可用',
+        footers: ['1、本券不可用于部分特惠商品、特殊商品及其他券看加使'],
+    });
+    const endTime = computed(() => Date.now() + 60 * 60 * 1000 * 2);
+</script>
+<template>
+    <ste-coupon-list :data="data" :endTime="endTime" />
+</template>
+```
+
+### 按钮文字
+
+- 属性`buttonText`用于设置按钮文字内容
+
+```html
+<script lang="ts" setup>
+    import { ref } from 'vue';
+
+    const data = ref({
+        title: '满11-5乐事组合【外卖】',
+        desc: '截至日期 2025.11.30',
+        image: 'https://image.whzb.com/chain/StellarUI/image/img5.jfif',
+        price: 500,
+        constraint: '满11可用',
+        footers: ['1、本券不可用于部分特惠商品、特殊商品及其他券看加使'],
+    });
+</script>
+<template>
+    <ste-coupon-list :data="data" buttonText="去使用" />
+</template>
+```
+
+### 禁用按钮
+
+- 属性`buttonDisabled`禁用按钮
+
+```html
+<script lang="ts" setup>
+    import { ref } from 'vue';
+
+    const data = ref({
+        title: '满11-5乐事组合【外卖】',
+        desc: '截至日期 2025.11.30',
+        image: 'https://image.whzb.com/chain/StellarUI/image/img5.jfif',
+        price: 500,
+        constraint: '满11可用',
+        footers: ['1、本券不可用于部分特惠商品、特殊商品及其他券看加使'],
+    });
+</script>
+<template>
+    <ste-coupon-list :data="data" buttonDisabled />
+</template>
+```
+
+### 进度条
+
+- 属性`progress`用于设置进度条值，0-100
+- 属性`progressText`用于设置进度条文字内容
+
+```html
+<script lang="ts" setup>
+    import { ref } from 'vue';
+
+    const data = ref({
+        title: '满11-5乐事组合【外卖】',
+        desc: '截至日期 2025.11.30',
+        image: 'https://image.whzb.com/chain/StellarUI/image/img5.jfif',
+        price: 500,
+        constraint: '满11可用',
+        footers: ['1、本券不可用于部分特惠商品、特殊商品及其他券看加使'],
+    });
+</script>
+<template>
+    <ste-coupon-list :data="data" :progress="50" progressText="仅剩40件" />
+</template>
+```
+
+### Position插槽
+
+- 插槽`position`可以在任意位置插入内容
+
+```html
+<script lang="ts" setup>
+    import { ref } from 'vue';
+
+    const data = ref({
+        title: '满11-5乐事组合【外卖】',
+        desc: '截至日期 2025.11.30',
+        image: 'https://image.whzb.com/chain/StellarUI/image/img5.jfif',
+        price: 500,
+        constraint: '满11可用',
+        footers: ['1、本券不可用于部分特惠商品、特殊商品及其他券看加使'],
+    });
+</script>
+<template>
+    <ste-coupon-list :data="data">
+        <template #position>
+            <view class="position-slot">
+                <ste-image src="https://image.whzb.com/chain/StellarUI/售罄.png" width="130" height="92" />
+            </view>
+        </template>
+    </ste-coupon-list>
+</template>
+<style scoped>
+    .position-slot {
+        position: absolute;
+        top: 6rpx;
+        right: 6rpx;
+    }
+</style>
+```
+
+---$
+
+### API
+
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `data` | 基础数据 | `{title: string;desc?: string;image: string;price: string / number;constraint?: string;footers?: string[]}` | `{}` | - | - |
+| `endTime` | 结束时间 | `string / number / Date` | `` | - | - |
+| `residue` | 剩余数量 | `number` | `-1` | - | - |
+| `progress` | 进度条百分比 | `string` | `` | - | - |
+| `buttonText` | 按钮文字 | `string` | `购买` | - | - |
+| `buttonDisabled` | 禁用按钮 | `boolean` | `false` | - | - |
+| `backgroundColor` | 背景颜色 | `string` | `#fff` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `buttonClick` | 点击按钮时触发 | - | - |
+| `footerClick` | 点击页脚列表时触发 | - | - |
+| `countDown` | 倒计时触发 | - | - |
+
+
+#### Slot
+
+| 插槽名称   | 说明               | 支持版本 |
+| ---------- | ------------------ | -------- |
+| `position` | 在任意位置插入内容 | -        |
+
+---$
+{{xuyajun}}