stellar-ui-plus 1.16.18

package/README.md

@@ -0,0 +1,176 @@
+<p align="center">
+    <img alt="logo" src="https://image.whzb.com/chain/StellarUI/logo.png" width="200">
+</p>
+<h1 align="center">StellarUI-Plus</h1>
+
+<p align="center">📱 一个基于vue3构建，打造的uni-app组件库</p>
+
+<p align="center">
+  🚀 <a href="https://stellar-ui.intecloud.com.cn/plus/#/">文档网站</a>&nbsp;
+
+## ✨ 特性
+
+-   🎯 多平台覆盖，支持 微信小程序、支付宝小程序、H5、App.
+-   🚀 40+ 个高质量组件，覆盖移动端主流场景.
+-   📖 提供丰富的文档和组件示例.
+-   🎨 支持修改 CSS 变量实现主题定制.
+
+## 📱 预览
+
+扫描二维码访问演示，注意：因微信审核机制限制，当前的微信小程序示例可能不是最新版本，可以 clone 代码到本地预览。
+
+<p style="display:flex;gap:24px">
+<img src="https://image.whzb.com/chain/StellarUI/%E5%BE%AE%E4%BF%A1.jpg" width="200" height="200"/>
+<img src="https://image.whzb.com/chain/StellarUI/%E6%94%AF%E4%BB%98%E5%AE%9D.png" width="200" height="200" />
+</p>
+
+## 平台支持
+
+| App | H5应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
+| :-: | :----: | :--------: | :----------: | :--------: | :--------: | :------: |
+|  √  |   √    |     √      |      √       |     ×      |     ×      |    ×     |
+
+## 安装
+
+```bash [npm]
+npm install stellar-ui-plus -S
+```
+
+## 快速上手
+
+详细说明见 [快速上手](https://stellar-ui.intecloud.com.cn/plus/#/?active=handbook-%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B)。
+
+## 优秀案例
+
+我们非常欢迎大家一起贡献优秀的 Demo 与案例，欢迎在此 [issue](https://github.com/wuhanshuzhiyun/stellar-ui-plus/issues/1) 提交案例。
+
+<table boder="0">
+	<tr>
+		<td>
+			<img width="250" src="https://image.whzb.com/chain/StellarUI/头像/邻里购.png" />
+			<p>邻里购</p>
+			<p>中百邻里购是中百旗下电商平台，主营蔬果、肉蛋、粮油、酒水、休食、家清、百货等，提供外卖、自提、包邮等商品服务，构建邻里生活服务圈。</p>
+		</td>
+		<td>
+			<img width="250" src="https://image.whzb.com/chain/StellarUI/头像/百荟.png" />
+			<p>抱抱生活</p>
+			<p align="justify">抱抱生活是数智云公司自建的本地综合生活服务线上平台。集商业服务、生活服务、政务综合服务于一体的15分钟便民生活圈服务平台。&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</p>
+		</td>
+	</tr>
+	<tr>
+		<td>
+			<img width="250" src="https://image.whzb.com/chain/StellarUI/头像/中百百货.png" />
+			<p>中百百货线上商城</p>
+			<p align="justify">中心百货大楼历经80余年的沧桑巨变，与时俱进，以新时尚、潮品牌、年轻态竭诚满足消费者购物休闲、娱乐餐饮等一站式需求，曾被国家商务部评定为“全国首批金鼎百货店”。&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</p>
+			<div>&ensp;</div>
+		</td>
+		<td>
+			<img width="250" src="https://image.whzb.com/chain/StellarUI/头像/数智云巡店助手.png" />
+			<p>数智云巡店助手</p>
+			<p>建立一套连锁超市巡店助手系统，以满足社超总部、区域经理、区域督导的巡店需求，结合门店自查统计，社超营运中心通过巡店助手系统提供的支持数据，更好，更优，服务于社超店铺经营，从而实现武汉中百便利店有限公司整体经营利润的提升。</p>
+		</td>
+	</tr>
+</table>
+
+## 周边生态
+
+| 项目                                                                                         | 描述                                                                |
+| -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
+| [StellarUI](https://github.com/wuhanshuzhiyun/stellar-ui)                                    | 一个基于vue2构建，打造的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`的核心贡献者们：
+
+<table  border="0">
+<tr>
+	<td>
+		<p>
+			<a>
+				<img  width="90" height="90" style="border-radius:50%" src="https://image.whzb.com/chain/StellarUI/头像/费玉婷.png" />
+			</a>
+		</p>
+		<p align="center">
+			<a>费玉婷</a>
+		</p>
+	</td>
+	<td>
+		<p>
+			<a target="_blank" href="https://github.com/HEXIAYUE">
+				<img  width="90" height="90" style="border-radius:50%" src="https://image.whzb.com/chain/StellarUI/头像/秦鹏飞.png" />
+			</a>
+		</p>
+		<p align="center">
+			<a target="_blank" href="https://github.com/HEXIAYUE">秦鹏飞</a>
+		</p>
+	</td>
+	<td>
+		<p>
+			<a target="_blank" href="https://github.com/zyydfaglory">
+				<img  width="90" height="90" style="border-radius:50%" src="https://image.whzb.com/chain/StellarUI/头像/张园因.png" />
+			</a>
+		</p>
+		<p align="center">
+			<a target="_blank" href="https://github.com/zyydfaglory">张园因</a>
+		</p>
+	</td>
+	<td>
+		<p>
+			<a target="_blank" href="https://github.com/woyou0712">
+				<img  width="90" height="90" style="border-radius:50%" src="https://image.whzb.com/chain/StellarUI/头像/徐亚君.png" />
+			</a>
+		</p>
+		<p align="center">
+			<a target="_blank" href="https://github.com/woyou0712">徐亚君</a>
+		</p>
+	</td>
+	<td>
+		<p>
+			<a target="_blank" href="https://github.com/fxxisme">
+				<img  width="90" height="90" style="border-radius:50%" src="https://image.whzb.com/chain/StellarUI/头像/付宇威.png" />
+			</a>
+		</p>
+		<p align="center">
+			<a target="_blank" href="https://github.com/fxxisme">付宇威</a>
+		</p>
+	</td>
+	<td>
+		<p>
+			<a>
+				<img  width="90" height="90" style="border-radius:50%" src="https://image.whzb.com/chain/StellarUI/头像/鲍思睿.png" />
+			</a>
+		</p>
+		<p align="center">
+			<a>鲍思睿</a>
+		</p>
+	</td>
+	<td>
+		<p>
+			<a>
+				<img  width="90" height="90" style="border-radius:50%" src="https://image.whzb.com/chain/StellarUI/头像/齐巍.png" />
+			</a>
+		</p>
+		<p align="center">
+			<a>齐巍</a>
+		</p>
+	</td>
+</tr>
+</table>
+
+### 贡献者们
+
+感谢以下小伙伴们为 `StellarUI-Plus` 发展做出的贡献：
+
+<a href="https://github.com/wuhanshuzhiyun/stellar-ui/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=wuhanshuzhiyun/stellar-ui" alt="contributors">
+</a>
+
+## 鸣谢
+
+-   [uni-helper](https://github.com/uni-helper) - 感谢 uni-helper 团队提供的 uni-app 工具库，让 StellarUI-Plus 能够更方便地使用。
+
+## 开源协议
+
+本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。

package/common/css/common.scss

@@ -0,0 +1,19 @@
+/* #ifdef H5 */
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+/* #endif */
+/* #ifndef H5 */
+view,
+button,
+input,
+textarea {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+/* #endif */

package/common/useProps.js

@@ -0,0 +1,9 @@
+// 用于修改组件默认值
+import steButton from '../components/ste-button/props'
+
+function useProps() {
+  return {
+    steButton,
+  }
+}
+export { useProps }

package/components/ste-animate/ATTRIBUTES.md

@@ -0,0 +1,10 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `show` | 控制动画，当值从`false`变为`true`时会触发一次动画 | `boolean` | `false` | - | - |
+| `type` | 动画类型，见下方`type`值说明 | `string` | `` | - | - |
+| `loop` | 是否循环执行。 | `boolean` | `false` | - | - |
+| `duration` | 动画时长，单位 ms | `number` | `200` | - | - |
+| `action` | 不能与 show 同时使用）触发方式，`initial`初始化执行; `click`点击执行 | `string` | `` | - | - |
+
+

package/components/ste-animate/README.md

@@ -0,0 +1,115 @@
+# Animate 动画
+
+给子元素添加动画效果
+
+---$
+
+### 代码演示
+
+#### 基础使用
+
+```html
+<ste-animate type="shakeX" loop>
+    <ste-button>shakeX-横向</ste-button>
+</ste-animate>
+<ste-animate type="shakeY" loop>
+    <ste-button>shakeY-竖向</ste-button>
+</ste-animate>
+<ste-animate type="ripple" loop>
+    <ste-button>ripple-心跳</ste-button>
+</ste-animate>
+<ste-animate type="breath" loop>
+    <ste-button>breath-呼吸灯</ste-button>
+</ste-animate>
+<ste-animate type="twinkle" loop>
+    <ste-button>twinkle-水波</ste-button>
+</ste-animate>
+<ste-animate type="flicker" loop>
+    <ste-button>flicker-擦亮</ste-button>
+</ste-animate>
+<ste-animate type="jump" loop>
+    <ste-button>jump-跳跃</ste-button>
+</ste-animate>
+<ste-animate type="float" loop>
+    <ste-button>float-漂浮</ste-button>
+</ste-animate>
+```
+
+#### 点击触发
+
+设置`action`为`click`
+
+```html
+<ste-animate type="slide-right" action="click">
+    <ste-button :stopPropagation="false">由右向左划入</ste-button>
+</ste-animate>
+<ste-animate type="slide-left" action="click">
+    <ste-button :stopPropagation="false">由左向右划入</ste-button>
+</ste-animate>
+<ste-animate type="slide-top" action="click">
+    <ste-button :stopPropagation="false">由上向下划入</ste-button>
+</ste-animate>
+<ste-animate type="slide-bottom" action="click">
+    <ste-button :stopPropagation="false">由下向上划入</ste-button>
+</ste-animate>
+```
+
+#### 属性触发
+
+可通过属性`show`来自定义触发动画执行
+
+```html
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    const show = ref(false);
+
+    function click() {
+        show.value = false;
+        setTimeout(() => {
+            show.value = true;
+        }, 50);
+    }
+</script>
+<template>
+    <view>
+        <ste-animate type="shakeY" :show="show">
+            <ste-button :stopPropagation="false">动画</ste-button>
+        </ste-animate>
+    </view>
+    <view>
+        <ste-button @click="click">触发</ste-button>
+    </view>
+</template>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### 动画类型(type)
+
+| 参数名称       | 参数说明                           |
+| -------------- | ---------------------------------- |
+| `shake`        | 抖动，建议 loop 为 true            |
+| `ripple`       | 不循环则是放大后缩小，循环则是心跳 |
+| `breath`       | 呼吸灯，建议 loop 为 true          |
+| `float`        | 漂浮，建议 loop 为 true            |
+| `slide-right`  | 由右向左划入                       |
+| `slide-left`   | 由左向右划入                       |
+| `slide-top`    | 由上至下划入                       |
+| `slide-bottom` | 由下至上划入                       |
+| `jump`         | 跳跃，建议 loop 为 true            |
+| `twinkle`      | 水波，建议 loop 为 true            |
+| `flicker`      | 擦亮按钮，建议 loop 为 true        |
+
+#### 组件插槽(Slots)
+
+| 名称      | 说明     | 支持版本 |
+| --------- | -------- | -------- |
+| `default` | 默认插槽 | -        |
+
+---$
+
+{{fuyuwei}}

package/components/ste-animate/animate.scss

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

package/components/ste-animate/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "展示组件",
+    "title": "Animate 动画",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/animate.png"
+}

package/components/ste-animate/props.ts

@@ -0,0 +1,9 @@
+const animateProps = {
+  show: { type: Boolean, default: false },
+  type: { type: String, default: '' },
+  loop: { type: Boolean, default: false },
+  duration: { type: Number, default: 300 },
+  action: { type: String, default: '' },
+}
+
+export default animateProps

package/components/ste-animate/ste-animate.easycom.json

@@ -0,0 +1,39 @@
+{
+    "name": "ste-animate",
+    "description": "动画组件",
+    "example": "<ste-animate></ste-animate>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=animate",
+    "attributes": [
+        {
+            "name": "show",
+            "description": "控制动画，当值从`false`变为`true`时会触发一次动画",
+            "type": "boolean",
+
+            "default": false
+        },
+        {
+            "name": "type",
+            "description": "动画类型，见下方`type`值说明",
+            "type": "string",
+            "default": ""
+        },
+        {
+            "name": "loop",
+            "description": "是否循环执行。",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "duration",
+            "description": "动画时长，单位 ms",
+            "type": "number",
+            "default": 200
+        },
+        {
+            "name": "action",
+            "description": "不能与 show 同时使用）触发方式，`initial`初始化执行; `click`点击执行",
+            "type": "string",
+            "default": ""
+        }
+    ]
+}