stellar-ui-plus 1.16.18

package/components/ste-animate/ste-animate.scss

@@ -0,0 +1,113 @@
+@import './animate.scss'; // 所有动画
+.ste-animate-root {
+    display: inline-block;
+
+    &[class*='ste-animate-'] {
+        animation-duration: 0.5s;
+        animation-timing-function: ease-out;
+        animation-fill-mode: both;
+    }
+
+    // 循环
+    &.loop {
+        animation-iteration-count: infinite !important;
+    }
+
+    // 横向抖动
+    &.ste-animate-shakeX {
+        animation-name: shakeX;
+    }
+
+    // 竖向抖动
+    &.ste-animate-shakeY {
+        animation-name: shakeY;
+    }
+
+    // 心跳
+    &.ste-animate-ripple {
+        animation-name: ripple;
+    }
+
+    // 漂浮
+    &.ste-animate-float {
+        position: relative;
+        animation-name: floatPop;
+    }
+
+    // 呼吸灯
+    &.ste-animate-breath {
+        animation-name: breath;
+        animation-duration: 2700ms;
+        animation-timing-function: ease-in-out;
+        animation-direction: alternate;
+    }
+
+    // 右侧向左侧划入
+    &.ste-animate-slide-right {
+        animation-name: slide-right;
+    }
+
+    // 右侧向左侧划入
+    &.ste-animate-slide-left {
+        animation-name: slide-left;
+    }
+
+    // 上面向下面划入
+    &.ste-animate-slide-top {
+        animation-name: slide-top;
+    }
+
+    // 下面向上面划入
+    &.ste-animate-slide-bottom {
+        animation-name: slide-bottom;
+    }
+
+    &.ste-animate-jump {
+        transform-origin: center center;
+        animation: jump 0.7s linear;
+    }
+
+    &.ste-animate-twinkle {
+        position: relative;
+
+        &::after,
+        &::before {
+            position: absolute;
+            right: 50%;
+            z-index: 1;
+            box-sizing: border-box;
+            width: 60px;
+            height: 60px;
+            margin-top: -15px;
+            margin-right: -30px;
+            content: '';
+            border: 4rpx solid rgba(255, 255, 255, 0.6);
+            border-radius: 30px;
+            transform: scale(0);
+            animation: twinkle 2s ease-out infinite;
+        }
+
+        &::after {
+            animation-delay: 0.4s;
+        }
+    }
+
+    &.ste-animate-flicker {
+        position: relative;
+        overflow: hidden;
+
+        &::after {
+            position: absolute;
+            top: -2rpx;
+            left: 0;
+            width: 200rpx;
+            height: 102%;
+            content: '';
+            background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%);
+            filter: blur(6rpx);
+            opacity: 0.73;
+            transform: skew(-20deg);
+            animation: flicker 1.5s linear infinite;
+        }
+    }
+}

package/components/ste-animate/ste-animate.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { computed, ref, type CSSProperties, nextTick, watch, defineOptions } from 'vue';
+import propsData from './props';
+
+const props = defineProps(propsData);
+
+const componentName = `ste-animate`;
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+
+const animationFlag = ref(false); // 通过此标识控制动画执行
+
+const cmpRootClass = computed(() => {
+    let classArr: string[] = [];
+    if (props.type && (props.action === 'initial' || animationFlag.value || props.loop)) {
+        classArr.push(`ste-animate-${props.type}`);
+    }
+    if (props.loop) {
+        classArr.push('loop');
+    }
+    return classArr.join(' ');
+});
+
+const cmpRootStyle = computed(() => {
+    let style: CSSProperties = {};
+    if (props.duration) {
+        style.animationDuration = `${props.duration / 1000}s`;
+    }
+    return style;
+});
+
+watch(
+    () => props.show,
+    val => {
+        if (val) {
+            animated();
+        }
+    }
+);
+
+function handleClick() {
+    if (props.action === 'click') {
+        animated();
+    }
+}
+
+function animated() {
+    animationFlag.value = false;
+    nextTick(() => {
+        animationFlag.value = true;
+    });
+}
+</script>
+
+<template>
+    <view class="ste-animate-root" :class="[cmpRootClass]" :style="[cmpRootStyle]" @click="handleClick">
+        <slot></slot>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+@import './ste-animate.scss';
+</style>

package/components/ste-badge/ATTRIBUTES.md

@@ -0,0 +1,17 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `content` | 徽标内容 | `string / number` | - | - | - |
+| `background` | 背景 | `string` | `#ee0a24` | - | - |
+| `showDot` | 是否展示为小红点 | `boolean` | `false` | - | - |
+| `offsetX` | 根据徽标位置,设置x轴偏移量 | `string / number` | `auto` | - | - |
+| `offsetY` | 根据徽标位置,设置y轴偏移量 | `string / number` | `auto` | - | - |
+| `showZero` | 当 content 为数字 0，是否展示徽标 | `boolean` | `false` | - | - |
+| `position` | 徽标位置 | `string` | `topRight` | `topRight`：上右<br/>`topLeft`：上左<br/>`bottomLeft`：下左<br/>`bottomRight`：下右 | - |
+| `max` | 徽标最大显示值 | `number` | `99` | - | - |
+| `showBorder` | 是否显示边框 | `boolean` | `false` | - | - |
+| `borderColor` | 边框颜色 | `string` | - | - | - |
+| `zIndex` | 层级 | `number` | `2` | - | - |
+| `isInline` | display属性是否为inline-block | `boolean` | `false` | - | - |
+
+

package/components/ste-badge/README.md

@@ -0,0 +1,162 @@
+# Badge 徽标
+
+在右上角展示徽标数字或小红点。
+
+---$
+
+### 代码演示
+
+-   以下代码公共样式
+
+```css
+.avator {
+    height: 80rpx;
+    width: 80rpx;
+    border-radius: 8rpx;
+    background-color: #f2f3f5;
+}
+```
+
+#### 徽标内容
+
+通过`content`属性，设置子元素的右上角的徽标
+
+```html
+<ste-badge content="1">
+    <view class="avator"></view>
+</ste-badge>
+<ste-badge content="99+">
+    <view class="avator"></view>
+</ste-badge>
+<ste-badge content="hot">
+    <view class="avator"></view>
+</ste-badge>
+```
+
+#### 背景
+
+通过`background`属性，设置徽标内容的背景
+
+-   支持纯色、渐变色、背景图
+
+```html
+<ste-badge content="1" background="rgb(19, 183, 22)">
+    <view class="avator"></view>
+</ste-badge>
+<ste-badge content="99+" background="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">
+    <view class="avator"></view>
+</ste-badge>
+<ste-badge content="" showZero background="https://image.whzb.com/chain/StellarUI/image/fire.png">
+    <view class="avator"></view>
+</ste-badge>
+```
+
+#### 小红点
+
+通过`showDot`属性，设置是否显示小红点
+
+```html
+<ste-badge showDot>
+    <view class="avator"></view>
+</ste-badge>
+<ste-badge showDot background="rgb(19, 183, 22)">
+    <view class="avator"></view>
+</ste-badge>
+```
+
+#### 徽标位置
+
+通过`position`属性，设置徽标的位置
+
+```html
+<ste-badge content="1">
+    <view class="avator"></view>
+</ste-badge>
+<ste-badge content="1" position="topLeft">
+    <view class="avator"></view>
+</ste-badge>
+<ste-badge content="1" position="bottomLeft">
+    <view class="avator"></view>
+</ste-badge>
+<ste-badge content="1" position="bottomRight">
+    <view class="avator"></view>
+</ste-badge>
+```
+
+#### 偏移
+
+当设置了`offsetX`或`offsetY`值时，徽标会基于当前设置徽标位置(`position`)往中心点进行偏移
+
+```html
+<ste-badge content="1" :offsetX="5" :offsetY="5">
+    <view class="avator"></view>
+</ste-badge>
+<ste-badge content="1" position="topLeft" :offsetX="5" :offsetY="5">
+    <view class="avator"></view>
+</ste-badge>
+<ste-badge content="1" position="bottomLeft" :offsetX="5" :offsetY="5">
+    <view class="avator"></view>
+</ste-badge>
+<ste-badge content="1" position="bottomRight" :offsetX="5" :offsetY="5">
+    <view class="avator"></view>
+</ste-badge>
+```
+
+#### 为0时是否显示徽标
+
+当`content`为`Number`类型时并且值等于`0`时，默认不会显示，如果`showZero`为`true`，则会显示
+
+```html
+<ste-badge :content="0" showZero>
+    <view class="avator"></view>
+</ste-badge>
+```
+
+#### 最大值
+
+当`content`为`Number`类型时并且值大于`max`时，会显示`{{max}}+`，`max`默认值为`99`
+
+```html
+<ste-badge :content="100">
+    <view class="avator"></view>
+</ste-badge>
+<ste-badge :content="99">
+    <view class="avator"></view>
+</ste-badge>
+```
+
+#### 自定义内容
+
+通过`content`插槽，自定义徽标的内容
+
+```html
+<ste-badge>
+    <template #content>
+        <ste-icon code="&#xe676;" size="18"></ste-icon>
+    </template>
+    <view class="avator"></view>
+</ste-badge>
+<ste-badge>
+    <template #content>
+        <ste-icon code="&#xe67b;" size="12"></ste-icon>
+    </template>
+    <view class="avator"></view>
+</ste-badge>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### 组件插槽(Slots)
+
+| 名称    | 说明           | 支持版本 |
+| ------- | -------------- | -------- |
+| default | 默认插槽       | -        |
+| content | 自定义徽标内容 | -        |
+
+---$
+
+{{fuyuwei}}

package/components/ste-badge/config.json

@@ -0,0 +1,5 @@
+{
+  "group": "基础组件",
+  "title": "Badge 徽标",
+  "icon": "https://image.whzb.com/chain/StellarUI/组件图标/badge.png"
+}

package/components/ste-badge/props.ts

@@ -0,0 +1,17 @@
+import type { AroundPositionType } from '../../types'
+
+export default {
+  content: [String, Number],
+  background: { type: String, default: '#ee0a24' },
+  showDot: Boolean,
+  offsetX: { type: [String, Number], default: 'auto' },
+  offsetY: { type: [String, Number], default: 'auto' },
+  showZero: Boolean,
+  position: { type: String as PropType<AroundPositionType>, default: 'topRight' },
+  max: { type: Number, default: 99 },
+  showBorder: { type: Boolean, default: false },
+  borderColor: { type: String, default: '' },
+  zIndex: { type: [Number, String], default: 2 },
+  isInline: { type: Boolean, default: false },
+  rootStyle: { type: Object, default: () => {} },
+}

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

@@ -0,0 +1,96 @@
+{
+    "name": "ste-badge",
+    "description": "徽标组件",
+    "example": "<ste-badge></ste-badge>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=badge",
+    "attributes": [
+        {
+            "name": "content",
+            "description": "徽标内容",
+            "type": "string | number"
+        },
+        {
+            "name": "background",
+            "description": "背景",
+            "type": "string",
+            "default": "#ee0a24"
+        },
+        {
+            "name": "showDot",
+            "description": "是否展示为小红点",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "offsetX",
+            "description": "根据徽标位置,设置x轴偏移量",
+            "type": "string | number",
+            "default": "auto"
+        },
+        {
+            "name": "offsetY",
+            "description": "根据徽标位置,设置y轴偏移量",
+            "type": "string | number",
+            "default": "auto"
+        },
+        {
+            "name": "showZero",
+            "description": "当 content 为数字 0，是否展示徽标",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "position",
+            "description": "徽标位置",
+            "type": "string",
+            "values": [
+                {
+                    "name": "topRight",
+                    "description": "上右"
+                },
+                {
+                    "name": "topLeft",
+                    "description": "上左"
+                },
+                {
+                    "name": "bottomLeft",
+                    "description": "下左"
+                },
+                {
+                    "name": "bottomRight",
+                    "description": "下右"
+                }
+            ],
+            "default": "topRight"
+        },
+        {
+            "name": "max",
+            "description": "徽标最大显示值",
+            "type": "number",
+            "default": 99
+        },
+        {
+            "name": "showBorder",
+            "description": "是否显示边框",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "borderColor",
+            "description": "边框颜色",
+            "type": "string"
+        },
+        {
+            "name": "zIndex",
+            "description": "层级",
+            "type": "number",
+            "default": 2
+        },
+        {
+            "name": "isInline",
+            "description": "display属性是否为inline-block",
+            "type": "boolean",
+            "default": false
+        }
+    ]
+}

package/components/ste-badge/ste-badge.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { computed, defineOptions, type CSSProperties } from 'vue';
+import utils from '../../utils/utils';
+import propsData from './props';
+
+const componentName = `ste-badge`;
+
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+
+const props = defineProps(propsData);
+
+const emits = defineEmits<{
+    (e: 'click', event?: Event): void;
+}>();
+
+const cmpContentStyle = computed(() => {
+    let style = {} as CSSProperties;
+    if (props.background) {
+        style = { backgroundColor: 'transparent', ...utils.bg2style(props.background) };
+    }
+
+    const offsetX = String(props.offsetX);
+    const offsetY = String(props.offsetY);
+    if ((offsetX !== 'auto' && offsetX !== '0') || (offsetY !== 'auto' && offsetY !== '0')) {
+        style.transform = 'translate(0, 0)';
+        style[props.position === 'topLeft' || props.position === 'bottomLeft' ? 'left' : 'right'] = utils.addUnit(props[props.position.includes('Left') ? 'offsetX' : 'offsetY']);
+        style[props.position === 'topRight' || props.position === 'topLeft' ? 'top' : 'bottom'] = utils.addUnit(props[props.position.includes('Top') ? 'offsetX' : 'offsetY']);
+    }
+    if (props.showBorder) {
+        style.border = 'solid 1px ' + props.borderColor;
+    }
+    style['z-index'] = props.zIndex;
+
+    return style;
+});
+
+const cmpShowContent = computed(() => {
+    return props.showZero ? true : props.content && props.content != '0';
+});
+
+const cmpContent = computed(() => {
+    if (utils.isNumber(String(props.content)) && Number(props.content) > props.max) {
+        return `${props.max}+`;
+    } else {
+        return String(props.content);
+    }
+});
+
+const cmpIsSmall = computed(() => {
+    return (props.content && String(props.content).length == 1) || Number(props.content) < 10;
+});
+</script>
+
+<template>
+    <view class="ste-badge-root" :style="[rootStyle as any, { display: isInline ? 'inline-block' : 'block' }]">
+        <view class="ste-badge-content" :style="[cmpContentStyle]" :class="'ste-badge-' + position" v-if="showDot || cmpShowContent || $slots.content">
+            <view v-if="showDot" class="dot-box" />
+            <view v-else class="content-box" :class="{ 'no-padding': $slots.content || cmpIsSmall }">
+                <slot name="content">
+                    <view class="ste-badge-content-text">{{ cmpContent }}</view>
+                </slot>
+            </view>
+        </view>
+        <slot></slot>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+$default-size: 28rpx;
+
+.ste-badge-root {
+    position: relative;
+
+    .ste-badge-content {
+        display: inline-block;
+        position: absolute;
+        font-size: var(--font-size-24, 24rpx);
+        color: #ffffff;
+        background-color: #ee0a24;
+        border-radius: 99999rpx;
+        width: fit-content;
+        background-size: cover;
+
+        .content-box {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: $default-size;
+            max-height: $default-size;
+            min-height: $default-size;
+            width: auto;
+            min-width: $default-size;
+            overflow: hidden;
+
+            padding: 0 8rpx;
+            line-height: 0;
+
+            &.no-padding {
+                padding: 0;
+            }
+        }
+
+        .dot-box {
+            height: 12rpx;
+            width: 12rpx;
+        }
+
+        &-text {
+            font-size: var(--font-size-22, 22rpx);
+            color: #ffffff;
+            line-height: $default-size;
+            vertical-align: middle;
+            position: relative;
+            // #ifdef  H5
+            top: -0.5rpx;
+            // #endif
+            // #ifdef  MP-WEIXIN
+            // top: -0.5rpx;
+            // #endif
+            // #ifdef  MP-ALIPAY
+            // top: 0.5rpx;
+            // #endif
+        }
+    }
+
+    .ste-badge- {
+        &topRight {
+            top: 0;
+            right: 0;
+            transform: translate(50%, -50%);
+        }
+
+        &topLeft {
+            top: 0;
+            left: 0;
+            transform: translate(-50%, -50%);
+        }
+
+        &bottomLeft {
+            bottom: 0;
+            left: 0;
+            transform: translate(-50%, 50%);
+        }
+
+        &bottomRight {
+            bottom: 0;
+            right: 0;
+            transform: translate(50%, 50%);
+        }
+    }
+}
+</style>

package/components/ste-barcode/ATTRIBUTES.md

@@ -0,0 +1,14 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `content` | 条形码内容(仅支持数字和字母) | `string` | - | - | - |
+| `width` | 条形码宽度，单位`px` | `number` | - | - | - |
+| `height` | 条形码高度，单位`px` | `number` | - | - | - |
+| `background` | 背景色 | `string` | - | - | - |
+| `foreground` | 前景色(条形码画笔颜色) | `string` | - | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `loadImage` | 加载完成后返回条形码对应的图片数据 | `src`：图片数据 | - |

package/components/ste-barcode/README.md

@@ -0,0 +1,28 @@
+# Barcode 条形码
+
+能够将数字和字母转换生成条形码的组件，支持自定义配色
+
+---$
+
+### 代码演示
+
+#### 基础使用
+
+```html
+<ste-barcode content="123456abc123" />
+```
+
+#### 自定义颜色
+
+```html
+<ste-barcode content="123456abc123" foreground="#c11" background="#dad" />
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+---$
+{{fuyuwei}}

package/components/ste-barcode/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "展示组件",
+    "title": "Barcode 条形码",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/barcode.png"
+}