stellar-ui-plus 1.16.18

package/components/ste-rate/ste-rate.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import utils from '../../utils/utils.js';
+import useColor from '../../config/color';
+let color = useColor();
+import propsData from './props';
+import { computed, defineOptions, type CSSProperties } from 'vue';
+
+defineOptions({
+    name: 'ste-rate',
+});
+
+const props = defineProps(propsData);
+
+const cmpListStyle = computed(() => {
+    const style: CSSProperties = {};
+    // #ifdef H5
+    if (props.disabled || props.readonly) {
+        style['cursor'] = 'not-allowed';
+    } else {
+        style['cursor'] = 'pointer';
+    }
+    // #endif
+    return style;
+});
+
+const cmpItemStyle = computed(() => {
+    let style: CSSProperties = {};
+    style['marginRight'] = utils.formatPx(props.gutter);
+    return style;
+});
+
+const cmpCount = computed(() => {
+    // 兼容浏览器和微信 对数字循环的处理不同
+    return Array.from({ length: props.count }, (_, index) => index);
+});
+
+const cmpActiveCode = computed(() => {
+    let code = getIconCode();
+    if (code) return code;
+    return props.activeCode;
+});
+
+const cmpInactiveCode = computed(() => {
+    let code = getIconCode();
+    if (code) return code;
+    return props.inactiveCode;
+});
+
+let cmpActiveColor = computed(() => {
+    return props.activeColor ? props.activeColor : color.getColor().steThemeColor;
+});
+
+// 根据iconData来算出每个分值对应的iconCode
+function getIconCode() {
+    if (!props.iconData || props.iconData.length === 0) return;
+
+    let curScroeIndex = Math.ceil(props.modelValue / props.score) - 1;
+    // 如果索引在数组范围内且对应的值不为空，直接返回该值
+    if (curScroeIndex < props.iconData.length && props.iconData[curScroeIndex] !== '') {
+        return props.iconData[curScroeIndex];
+    }
+
+    // 否则，从索引位置向左搜索最近的非空值
+    for (let i = curScroeIndex; i >= 0; i--) {
+        if (props.iconData[i] !== '') {
+            return props.iconData[i];
+        }
+    }
+    return '';
+}
+
+function onSelect(index: number) {
+    if (!props.disabled && !props.readonly) {
+        let value = (index + 1) * props.score;
+        if (props.modelValue != value) {
+            // 更新 model
+            emits('update:modelValue', value);
+            // change回调
+            emits('change', value);
+        }
+    }
+}
+
+const emits = defineEmits<{
+    (e: 'change', value: number | string): void;
+    (e: 'update:modelValue', value: number | string): void;
+}>();
+
+// 计算已评分占未评分的宽度
+function getWidth(index: number) {
+    let value = (index + 1) * props.score;
+    let diff = props.modelValue - value;
+    // 全部占据
+    if (diff >= 0) {
+        return '100%';
+    }
+    // 部分占据
+    else if (Math.abs(diff) > 0 && Math.abs(diff) < props.score) {
+        return Number((1 - Math.abs(diff) / props.score).toFixed(2)) * 100 + '%';
+    }
+    // 未占据
+    else {
+        return 0;
+    }
+}
+</script>
+
+<template>
+    <view class="ste-rate-root">
+        <view class="list" :style="[cmpListStyle]">
+            <view v-for="index in cmpCount" class="item" :key="index" :style="[cmpItemStyle]">
+                <view class="icon-box inactive" @click="onSelect(index)">
+                    <ste-icon :code="cmpInactiveCode" :color="inactiveColor" :size="size"></ste-icon>
+                </view>
+                <view class="icon-box active" @click="onSelect(index)" :style="{ width: getWidth(index) }">
+                    <ste-icon :code="cmpActiveCode" :color="disabled ? '#C8C9CC' : cmpActiveColor" :size="size"></ste-icon>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.ste-rate-root {
+    .list {
+        display: flex;
+
+        .item {
+            position: relative;
+
+            .active {
+                position: absolute;
+                overflow: hidden;
+                top: 0;
+            }
+        }
+    }
+
+    .item:last-child {
+        margin-right: 0 !important;
+    }
+}
+</style>

package/components/ste-read-more/ATTRIBUTES.md

@@ -0,0 +1,16 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `showHeight` | 需要折叠的高度 | `string / number` | `400` | - | - |
+| `toggle` | 展开后是否显示收起按钮 | `boolean` | `false` | - | - |
+| `closeText` | '展开阅读'的文本 | `string` | `展开阅读全文` | - | - |
+| `openText` | '收起'的文本 | `string` | `收起` | - | - |
+| `fontSize` | 字体大小 | `string / number` | `28` | - | - |
+| `color` | 文本颜色 | `string` | `#666666` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `open` | 展开时触发 | - | - |
+| `click` | 收起时触发 | - | - |

package/components/ste-read-more/README.md

@@ -0,0 +1,93 @@
+# ReadMore 展开更多
+
+---$
+
+### 代码演示
+
+#### 基础使用
+
+```html
+<view>
+    <ste-read-more>{{ moreStr }}</ste-read-more>
+</view>
+<script lang="ts" setup>
+    const moreStr = ref(
+        '浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。 忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。凝绝不通声暂歇。悄无言，唯见江心秋月白。 沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故'
+    );
+</script>
+```
+
+#### 收起后展示按钮
+
+```html
+<view>
+    <ste-read-more toggle>{{ moreStr }}</ste-read-more>
+</view>
+<script lang="ts" setup>
+    const moreStr = ref(
+        '浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。 忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。凝绝不通声暂歇。悄无言，唯见江心秋月白。 沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故'
+    );
+</script>
+```
+
+#### 提示文字
+
+```html
+<view>
+    <ste-read-more toggle openText="收起吧" closeText="展开吧" color="#f1f" fontSize="32">{{ moreStr }}</ste-read-more>
+</view>
+<script lang="ts" setup>
+    const moreStr = ref(
+        '浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。 忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。凝绝不通声暂歇。悄无言，唯见江心秋月白。 沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故'
+    );
+</script>
+```
+
+#### 异步初始化
+
+有时候需要展示的内容是从后端获取的，组件内部的`mounted`生命周期初始化时，请求尚未回来，会导致 内容的高度在初始化有误差。可以在请求完毕渲染后(指的是this.$nextTick)，通过`ref`调用组件的`init`方法，重新初始化
+
+```html
+<view>
+    <ste-read-more ref="steReadMore">{{ moreStr }}</ste-read-more>
+</view>
+<script lang="ts" setup>
+    import { ref, nextTick } from 'vue';
+    import type { RefReadMore } from '@/uni_modules/stellar-ui-plus/types/refComponents';
+
+    const moreStr = ref(
+        '浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。 忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。凝绝不通声暂歇。悄无言，唯见江心秋月白。 沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故'
+    );
+    const moreStr3 = ref('');
+
+    const readMoreRef = ref<RefReadMore>();
+
+    setTimeout(() => {
+        moreStr3.value = moreStr.value;
+        nextTick(() => {
+            readMoreRef.value?.init();
+        });
+    }, 1500);
+</script>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### Slots
+
+| 插槽名    | 说明           | 插槽参数 | 支持版本 |
+| --------- | -------------- | -------- | -------- |
+| `default` | 单选框文本内容 | -        | -        |
+
+#### Methods
+
+| 方法名 | 说明                                                       | 方法参数 | 支持版本 |
+| ------ | ---------------------------------------------------------- | -------- | -------- |
+| `init` | 重新初始化组件内部高度计算过程，如果是异步获取内容需要用到 | -        | -        |
+
+---$
+{{fuyuwei}}

package/components/ste-read-more/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "展示组件",
+    "title": "Readmore 阅读更多",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/section.png"
+}

package/components/ste-read-more/props.ts

@@ -0,0 +1,9 @@
+export default {
+  showHeight: { type: [String, Number], default: 400 },
+  // 展开后是否显示收起按钮
+  toggle: { type: Boolean, default: false },
+  closeText: { type: String, default: '展开阅读全文' },
+  openText: { type: String, default: '收起' },
+  fontSize: { type: [String, Number], default: 28 },
+  color: { type: String, default: '#666666' },
+}

package/components/ste-read-more/ste-read-more.easycom.json

@@ -0,0 +1,54 @@
+{
+    "name": "ste-read-more",
+    "description": "阅读更多",
+    "example": "<ste-read-more>文本文本文本文本文本文本文本文本文本</ste-read-more>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=read-more",
+    "attributes": [
+        {
+            "name": "showHeight",
+            "description": "需要折叠的高度",
+            "type": "string | number",
+            "default": 400
+        },
+        {
+            "name": "toggle",
+            "description": "展开后是否显示收起按钮",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "closeText",
+            "description": "'展开阅读'的文本",
+            "type": "string",
+            "default": "展开阅读全文"
+        },
+        {
+            "name": "openText",
+            "description": "'收起'的文本",
+            "type": "string",
+            "default": "收起"
+        },
+        {
+            "name": "fontSize",
+            "description": "字体大小",
+            "type": "string | number",
+            "default": "28"
+        },
+        {
+            "name": "color",
+            "description": "文本颜色",
+            "type": "string",
+            "default": "#666666"
+        },
+        {
+            "name": "[event]open",
+            "description": "展开时触发",
+            "type": "() => void"
+        },
+        {
+            "name": "[event]click",
+            "description": "收起时触发",
+            "type": "() => void"
+        }
+    ]
+}

package/components/ste-read-more/ste-read-more.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref, onMounted, getCurrentInstance, type CSSProperties, defineOptions } from 'vue';
+import propsData from './props';
+import utils from '../../utils/utils';
+
+const componentName = `ste-read-more`;
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+const props = defineProps(propsData);
+const instance = getCurrentInstance() as unknown as ComponentPublicInstance;
+
+const emits = defineEmits<{
+    (e: 'open'): void;
+    (e: 'close'): void;
+}>();
+
+const open = ref(false);
+const showToggle = ref(false);
+
+const cmpContentStyle = computed(() => {
+    let style: CSSProperties = {};
+    if (showToggle.value) {
+        style.height = open.value ? 'auto' : utils.addUnit(props.showHeight);
+    }
+    return style;
+});
+
+const cmpActionStyle = computed(() => ({
+    color: props.color,
+    fontSize: `var(--font-size-${props.fontSize},${utils.formatPx(props.fontSize)})`,
+    background: open.value ? '' : 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 80%)',
+}));
+
+const cmpShowAction = computed(() => {
+    let show = true;
+    if (!showToggle.value) {
+        show = false;
+    }
+
+    if (open.value && !props.toggle) {
+        show = false;
+    }
+
+    return show;
+});
+
+function init() {
+    utils.sleep(200).then(() => {
+        utils.querySelector<false>('.content', instance).then(rect => {
+            showToggle.value = parseInt(String(rect.height)) > parseInt(utils.formatPx(props.showHeight).toString());
+        });
+    });
+}
+
+function handleToggleStatus() {
+    if (!open.value) {
+        emits('open');
+    } else {
+        emits('close');
+    }
+    open.value = !open.value;
+}
+
+onMounted(() => {
+    init();
+});
+
+defineExpose({ init });
+</script>
+
+<template>
+    <view class="ste-read-more-root">
+        <view class="content-box" :style="[cmpContentStyle]">
+            <view class="content">
+                <slot></slot>
+            </view>
+        </view>
+        <view class="action-box" :style="[cmpActionStyle]" v-if="cmpShowAction">
+            <view @click="handleToggleStatus">{{ open ? openText : closeText }}</view>
+            <ste-icon :code="open ? '&#xe678;' : '&#xe676;'" size="28" marginBottom="3"></ste-icon>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.ste-read-more-root {
+    .content-box {
+        overflow: hidden;
+    }
+
+    .action-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        position: relative;
+        padding-top: 200rpx;
+        margin-top: -200rpx;
+        // margin-bottom: 20rpx;
+    }
+}
+</style>

package/components/ste-rich-text/ATTRIBUTES.md

@@ -0,0 +1,8 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `text` | 富文本值 | `string` | `` | - | - |
+| `space` | 显示连续空格 | `string` | `nbsp` | `ensp`：中文字符空格一半大小<br/>`emsp`：中文字符空格大小<br/>`nbsp`：根据字体设置的空格大小 | - |
+| `userSelect` | 文本是否可选 | `boolean` | `false` | - | - |
+
+

package/components/ste-rich-text/README.md

@@ -0,0 +1,26 @@
+# RichText 富文本
+
+富文本，增加文本换行功能，解决两张图片中间有空隙的问题。
+
+---$
+
+#### 一张图片
+
+```html
+<ste-rich-text :text="node1"></ste-rich-text>
+```
+
+#### 两张图片
+
+```html
+<ste-rich-text :text="node2"></ste-rich-text>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+---$
+{{xuyajun}}

package/components/ste-rich-text/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "表单组件",
+    "title": "RichText 富文本",
+    "icon": "https://image.whzb.com/chain/StellarUI/%E7%BB%84%E4%BB%B6%E5%9B%BE%E6%A0%87/parse.png"
+}

package/components/ste-rich-text/props.ts

@@ -0,0 +1,8 @@
+import type { RichTextSpace } from '@uni-helper/uni-app-types'
+import type { PropType } from 'vue'
+
+export default {
+  text: { type: String, default: '' },
+  space: { type: String as PropType<RichTextSpace>, default: 'nbsp' },
+  userSelect: { type: Boolean, default: false },
+}

package/components/ste-rich-text/ste-rich-text.easycom.json

@@ -0,0 +1,40 @@
+{
+    "name": "ste-rich-text",
+    "description": "阅读更多",
+    "example": "<ste-rich-text>文本文本文本文本文本文本文本文本文本</ste-rich-text>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=rich-text",
+    "attributes": [
+        {
+            "name": "text",
+            "description": "富文本值",
+            "type": "string",
+            "default": ""
+        },
+        {
+            "name": "space",
+            "description": "显示连续空格",
+            "type": "string",
+            "default": "nbsp",
+            "values": [
+                {
+                    "name": "ensp",
+                    "description": "中文字符空格一半大小"
+                },
+                {
+                    "name": "emsp",
+                    "description": "中文字符空格大小"
+                },
+                {
+                    "name": "nbsp",
+                    "description": "根据字体设置的空格大小"
+                }
+            ]
+        },
+        {
+            "name": "userSelect",
+            "description": "文本是否可选",
+            "type": "boolean",
+            "default": false
+        }
+    ]
+}

package/components/ste-rich-text/ste-rich-text.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import utils from '../../utils/utils';
+import propsData from './props';
+
+defineProps(propsData);
+
+const replaceVerticalAlign = (text: string) => {
+    let html = text;
+    html = utils.richTextTagAddStyle(html, 'p', ['margin', 'margin-top'], ';margin-top:0');
+    html = utils.richTextTagAddStyle(html, 'p', ['margin', 'margin-bottom'], ';margin-bottom:0');
+    html = utils.richTextTagAddStyle(html, 'img', 'vertical-align', ';vertical-align:top');
+    // 解决微信小程序会忽略空白换行的问题
+    html = html.replace(/↵/g, '\n');
+    html = html.replace(/&nbsp;/g, '\n');
+    // 解决特殊转义符的问题
+    html = html.replace(/&middot;/g, '·');
+    html = html.replace(/&mdash;/g, '—');
+    return html;
+};
+</script>
+<template>
+    <view class="rich-text-root">
+        <rich-text :nodes="replaceVerticalAlign(text)" :user-select="userSelect" class="rich-text" :space="space"></rich-text>
+    </view>
+</template>
+<style scoped lang="scss">
+.rich-text-root {
+    overflow: hidden;
+    .rich-text {
+        word-break: break-all;
+    }
+}
+</style>

package/components/ste-scroll-to/ATTRIBUTES.md

@@ -0,0 +1,11 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `active` | 当前激活的节点 | `number` | `0` | - | - |
+| `height` | 滚动区域高度 | `number / string` | `100%` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `change` | 激活节点改变时触发 | - | - |

package/components/ste-scroll-to/README.md

@@ -0,0 +1,47 @@
+# ScrollTo 滚动锚点
+
+滚动锚点，可以滚动到指定锚点。
+
+---$
+
+#### 基础用法
+
+```html
+<script setup lang="ts">
+    import { ref } from 'vue';
+
+    const active = ref(0);
+    const contents = [
+        'https://image.whzb.com/chain/StellarUI/image/banner1.png',
+        'https://image.whzb.com/chain/StellarUI/image/banner2.png',
+        'https://image.whzb.com/chain/StellarUI/image/img1.jpg',
+        'https://image.whzb.com/chain/StellarUI/image/img2.jfif',
+        'https://image.whzb.com/chain/StellarUI/image/img3.jpg',
+        'https://image.whzb.com/chain/StellarUI/image/img4.jpg',
+    ];
+</script>
+<ste-tabs :active.sync="active" sticky>
+    <ste-tab v-for="(m, i) in imgs" :key="i" :title="`标签${i + 1}`" />
+</ste-tabs>
+<ste-scroll-to v-model:active="active" height="1200">
+    <ste-scroll-to-item v-for="(m, i) in contents" :key="i">
+        <view>内容{{ i + 1 }}</view>
+        <image :src="m" mode="widthFix" style="width:100%"></image>
+    </ste-scroll-to-item>
+</ste-scroll-to>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### ScrollTo Method
+
+| 方法名 | 说明                               | 支持版本 |
+| ------ | ---------------------------------- | -------- |
+| `init` | 初始化元素信息，请在渲染完成后调用 | -        |
+
+---$
+{{xuyajun}}

package/components/ste-scroll-to/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "导航组件",
+    "title": "ScrollTo 滚动锚点",
+    "icon": "https://image.whzb.com/chain/StellarUI/%E7%BB%84%E4%BB%B6%E5%9B%BE%E6%A0%87/tabbar.png"
+}

package/components/ste-scroll-to/props.ts

@@ -0,0 +1,17 @@
+export const SCROLL_TO_KEY = Symbol('scroll-to')
+
+export interface ScrollToProps {
+  active: number
+  height: number | string
+}
+
+export default {
+  active: {
+    type: Number,
+    default: 0,
+  },
+  height: {
+    type: [Number, String],
+    default: '100%',
+  },
+}

package/components/ste-scroll-to/ste-scroll-to.easycom.json

@@ -0,0 +1,25 @@
+{
+    "name": "ste-scroll-to",
+    "description": "ScrollTo滚动锚点",
+    "example": "<ste-scroll-to><ste-scroll-to-item>节点1</ste-scroll-to-item></ste-scroll-to>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=scroll-to",
+    "attributes": [
+        {
+            "name": "active",
+            "description": "当前激活的节点",
+            "type": "number",
+            "default": 0
+        },
+        {
+            "name": "height",
+            "description": "滚动区域高度",
+            "type": "number | string",
+            "default": "100%"
+        },
+        {
+            "name": "[event]change",
+            "description": "激活节点改变时触发",
+            "type": "(index:number)=>void"
+        }
+    ]
+}