stellar-ui-plus 1.16.18

package/components/ste-signature/ste-signature.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { computed, onMounted, getCurrentInstance, defineOptions, ref } from 'vue';
+import utils from '../../utils/utils';
+import type { Stroke } from './types';
+import type { HTMLMouseEvent, UniTouchEvent } from '../../types/event.d';
+import propsData from './props';
+
+defineOptions({
+    name: 'ste-signature',
+    options: {
+        virtualHost: true,
+    },
+});
+
+const props = defineProps(propsData);
+const emits = defineEmits<{
+    (e: 'start'): void;
+    (e: 'signing'): void;
+    (e: 'end'): void;
+}>();
+
+const cmpRootStyle = computed(() => ({
+    width: utils.formatPx(props.width),
+    height: utils.formatPx(props.height),
+}));
+
+const canvasId = computed(() => utils.guid(8));
+
+const ctx = ref<UniNamespace.CanvasContext>();
+
+const strokeing = ref<Stroke[]>([]);
+const strokes = ref<Stroke[][]>([]);
+const thas = ref<globalThis.ComponentPublicInstance | null>();
+
+const initCtx = () => {
+    thas.value = getCurrentInstance()?.proxy;
+    ctx.value = uni.createCanvasContext(canvasId.value, thas.value);
+    drawStrokes();
+};
+
+const drawStrokes = () => {
+    ctx.value?.setLineCap('round');
+    ctx.value?.setLineWidth(props.lineWidth);
+    ctx.value?.setStrokeStyle(props.strokeColor);
+    ctx.value?.setLineJoin('round');
+    ctx.value?.clearRect(0, 0, 1920, 1080);
+    if (props.background !== 'none') {
+        ctx.value?.setFillStyle(props.background);
+        ctx.value?.fillRect(0, 0, 1920, 1080);
+    }
+    ctx.value?.draw();
+    if (!strokes.value.length) {
+        ctx.value?.stroke();
+        ctx.value?.draw(true);
+        return;
+    }
+    strokes.value.forEach(stroke => {
+        if (!stroke.length) return;
+        ctx.value?.beginPath();
+        ctx.value?.moveTo(stroke[0].x, stroke[0].y);
+        stroke.forEach(({ x, y }, index) => {
+            if (index == 0) return;
+            ctx.value?.lineTo(x, y);
+        });
+        ctx.value?.stroke();
+        ctx.value?.draw(true);
+    });
+};
+
+const drawStrokeing = () => {
+    const length = strokeing.value.length;
+    if (!length) return;
+    ctx.value?.beginPath();
+    const end = strokeing.value[length - 1];
+    const start = strokeing.value[length - 2] || end;
+    ctx.value?.moveTo(start.x, start.y);
+    ctx.value?.lineTo(end.x, end.y);
+    ctx.value?.stroke();
+    ctx.value?.draw(true);
+};
+
+// #ifdef H5
+const getH5MousePosition = async (e: HTMLMouseEvent) => {
+    const el = await utils.querySelector<false>(`.ste-signature-root #${canvasId.value}`, thas.value);
+    if (!el) return { x: 0, y: 0 };
+    return {
+        x: e.clientX - (el.left || 0),
+        y: e.clientY - (el.top || 0),
+    };
+};
+// #endif
+
+const onMousedown = (e: MouseEvent) => onTouchStart(e as unknown as UniTouchEvent);
+const onMousemove = (e: MouseEvent) => onTouchMove(e as unknown as UniTouchEvent);
+
+const onTouchStart = async (e: UniTouchEvent) => {
+    // #ifdef H5
+    strokeing.value = [await getH5MousePosition(e as unknown as HTMLMouseEvent)];
+    // #endif
+    // #ifdef MP
+    strokeing.value = [{ x: e.changedTouches[0]?.x || 0, y: e.changedTouches[0]?.y || 0 }];
+    // #endif
+    // #ifdef APP
+    strokeing.value = [{ x: e.touches[0]?.x || 0, y: e.touches[0]?.y || 0 }];
+    // #endif
+    drawStrokeing();
+    emits('start');
+};
+
+const onTouchMove = async (e: UniTouchEvent) => {
+    if (!strokeing.value.length) return;
+    // #ifdef H5
+    strokeing.value.push(await getH5MousePosition(e as unknown as HTMLMouseEvent));
+    // #endif
+    // #ifdef MP
+    strokeing.value.push({ x: e.changedTouches[0].x || 0, y: e.changedTouches[0].y || 0 });
+    // #endif
+    // #ifdef APP
+    strokeing.value.push({ x: e.touches[0]?.x || 0, y: e.touches[0]?.y || 0 });
+    // #endif
+    drawStrokeing();
+    emits('signing');
+};
+
+const onTouchEnd = () => {
+    strokes.value.push(strokeing.value);
+    strokeing.value = [];
+    emits('end');
+};
+
+onMounted(() => {
+    initCtx();
+});
+
+const clear = () => {
+    strokes.value = [];
+    drawStrokes();
+};
+
+const back = () => {
+    strokes.value.pop();
+    drawStrokes();
+};
+
+const save = async (callback: (res: string) => void, error?: (err: any) => void) => {
+    if (!strokes.value.length) {
+        console.warn('没有绘制签名内容');
+        if (error) error('请绘制签名');
+        return;
+    }
+    const canvas = await utils.querySelector<false>(`.ste-signature-root #${canvasId.value}`, thas.value);
+    if (!canvas) {
+        console.error('找不到canvas');
+        return;
+    }
+    uni.canvasToTempFilePath(
+        {
+            canvasId: canvasId.value,
+            width: canvas.width,
+            height: canvas.height,
+            destWidth: (canvas.width || 0) * 2, // 设置导出图片的宽度，这里设置为canvas宽度的两倍
+            destHeight: (canvas.height || 0) * 2, // 设置导出图片的高度，这里设置为canvas高度的两倍
+            fileType: props.type, // 设置导出图片的类型，如'png'、'jpg'等
+            success: res => {
+                if (callback) callback(res.tempFilePath);
+            },
+            fail: err => {
+                console.error(err);
+                if (error) error(err);
+            },
+        },
+        thas.value
+    );
+};
+
+defineExpose({ save, clear, back });
+</script>
+
+<template>
+    <view class="ste-signature-root" :style="cmpRootStyle" @mousedown="onMousedown" @mousemove="onMousemove" @mouseup="onTouchEnd" @mosueleave="onTouchEnd">
+        <canvas :id="canvasId" :canvas-id="canvasId" :style="cmpRootStyle" disable-scroll @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" />
+    </view>
+</template>

package/components/ste-signature/types.d.ts

@@ -0,0 +1,4 @@
+export interface Stroke {
+  x: number
+  y: number
+}

package/components/ste-slider/ATTRIBUTES.md

@@ -0,0 +1,25 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `value` | 当前进度百分比，在双滑块模式下为数组格式（数组的值都是从小到大） | `number / string / array` | - | - | - |
+| `min` | 最小值 | `number / string` | `0` | - | - |
+| `max` | 最大值 | `number / string` | `100` | - | - |
+| `step` | 步长 | `number / string` | `1` | - | - |
+| `barHeight` | 进度条高度，默认单位为 rpx | `number / string` | `4` | - | - |
+| `buttonSize` | 滑块按钮大小，默认单位为 rpx | `number / string` | `20` | - | - |
+| `activeColor` | 进度条激活态颜色 | `string` | `#3c9cff` | - | - |
+| `inactiveColor` | 进度条非激活态颜色 | `string` | `#ebedf0` | - | - |
+| `range` | 是否为范围选择 | `boolean` | `false` | - | - |
+| `vertical` | 是否竖向模式 | `boolean` | `false` | - | - |
+| `disabled` | 是否禁用滑块 | `boolean` | `false` | - | - |
+| `readonly` | 是否为只读状态，只读状态下无法修改滑块的值 | `boolean` | `false` | - | - |
+| `marks` | 标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式 | `object` | - | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `change` | 进度变化且结束拖动后触发 | `percentage`：进度百分比 | - |
+| `dragStart` | 开始拖动时触发 | `e`：拖动事件 | - |
+| `dragEnd` | 结束拖动时触发 | `e`：拖动事件 | - |
+| `input` | 进度变化时实时触发 | `percentage`：进度百分比 | - |

package/components/ste-slider/README.md

@@ -0,0 +1,149 @@
+# Slider 滑块
+
+滑块
+
+---$
+
+### 代码演示
+
+#### 基础使用
+
+```html
+<ste-slider value="30"></ste-slider>
+```
+
+#### 滑块条高度 & 滑块大小
+
+```html
+<ste-slider barHeight="26" value="30"></ste-slider>
+<ste-slider buttonSize="50" value="30"></ste-slider>
+```
+
+#### 进度条颜色
+
+```html
+<ste-slider value="30" activeColor="#ff0000" inactiveColor="#a9ee13"></ste-slider>
+```
+
+#### 范围选择
+
+```html
+<ste-slider :value="[10, 20]" range></ste-slider>
+```
+
+#### 竖向
+
+```html
+<ste-slider vertical value="30"></ste-slider>
+```
+
+#### 禁用
+
+```html
+<ste-slider disabled value="30"></ste-slider>
+```
+
+#### 只读
+
+```html
+<ste-slider readonly value="30"></ste-slider>
+```
+
+#### 间断点
+
+当`showStops`为`true`时，会根据最大值(`max`)、最小值(`min`)、步长(`step`)来显示间断点
+
+```html
+<ste-slider showStops :step="10" value="30"></ste-slider>
+```
+
+#### 标记
+
+当同时配置了`showStops`属性和`marks`属性时，会显示自定义节点
+
+```html
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    const marks = ref({
+        10: '0°C',
+        20: '8°C',
+        37: '37°C',
+        80: {
+            style: {
+                color: '#1989FA',
+            },
+            label: '合格',
+        },
+    });
+</script>
+
+<ste-slider showStops :marks="marks" value="30"></ste-slider>
+```
+
+#### 自定义滑块
+
+```html
+<ste-slider :step="10" showStops value="30" activeColor="#ff0000">
+    <view class="c-slider-1" slot="button">
+        <view class="content">
+            <text>滑块</text>
+        </view>
+    </view>
+</ste-slider>
+<ste-slider :step="10" showStops :value="[10, 40]" range>
+    <view class="c-slider-2" slot="leftButton">
+        <view class="content">
+            <ste-icon code="&#xe673;" color="#fff"></ste-icon>
+        </view>
+    </view>
+    <view class="c-slider-2" slot="rightButton">
+        <view class="content">
+            <ste-icon code="&#xe674;" color="#fff"></ste-icon>
+        </view>
+    </view>
+</ste-slider>
+<style lang="scss">
+    .c-slider-1 {
+        .content {
+            padding: 0 16rpx;
+            background-color: #ff0000;
+            border-radius: 20rpx;
+
+            color: #ffffff;
+            font-size: 24rpx;
+
+            text {
+                white-space: nowrap;
+            }
+        }
+    }
+    .c-slider-2 {
+        .content {
+            background-color: #0090ff;
+            border-radius: 50%;
+            height: 40rpx;
+            width: 40rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+</style>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### 组件插槽(Slots)
+
+| 插槽名   | 说明                             | 插槽参数 | 支持版本 |
+| -------- | -------------------------------- | -------- | -------- |
+| `button` | 自定义滑块按钮                   | -        | -        |
+| `button` | 自定义左侧滑块按钮（范围选择下)  | -        | -        |
+| `button` | 自定义右侧滑块按钮（范围选择下） | -        | -        |
+
+---$
+{{fuyuwei}}

package/components/ste-slider/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "表单组件",
+    "title": "Slider 滑块",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/slider.png"
+}

package/components/ste-slider/props.ts

@@ -0,0 +1,32 @@
+import type { ExtractPropTypes } from 'vue'
+import type { UniTouchEvent } from '../../types/event'
+
+const sliderProps = {
+  value: { type: [Number, String, Array], default: 0 },
+  min: { type: [Number, String], default: 0 },
+  max: { type: [Number, String], default: 100 },
+  step: { type: [Number, String], default: 1 },
+  barHeight: { type: [String, Number], default: 8 },
+  buttonSize: { type: [String, Number], default: 40 },
+  activeColor: { type: String, default: '' },
+  inactiveColor: { type: String, default: '#eeeeee' },
+  range: { type: Boolean, default: false },
+  vertical: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  showStops: { type: Boolean, default: false },
+  marks: { type: Object, default: () => {} },
+}
+
+export default sliderProps
+
+export type SliderProps = ExtractPropTypes<typeof sliderProps>
+
+export const sliderEmits = {
+  input: (val: number | number[]) => typeof val === 'number' || Array.isArray(val),
+  change: (val: number | number[]) => typeof val === 'number' || Array.isArray(val),
+  dragStart: (e: UniTouchEvent | MouseEvent) => e instanceof Object,
+  dragEnd: (e: UniTouchEvent | MouseEvent) => e instanceof Object,
+}
+
+export type SliderEmits = typeof sliderEmits

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

@@ -0,0 +1,128 @@
+{
+    "name": "ste-slider",
+    "description": "滑块组件",
+    "example": "<ste-slider />",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=slider",
+    "attributes": [
+        {
+            "name": "value",
+            "description": "当前进度百分比，在双滑块模式下为数组格式（数组的值都是从小到大）",
+            "type": "number | string | array"
+        },
+        {
+            "name": "min",
+            "description": "最小值",
+            "type": "number | string",
+            "default": "0"
+        },
+        {
+            "name": "max",
+            "description": "最大值",
+            "type": "number | string",
+            "default": "100"
+        },
+        {
+            "name": "step",
+            "description": "步长",
+            "type": "number | string",
+            "default": "1"
+        },
+        {
+            "name": "barHeight",
+            "description": "进度条高度，默认单位为 rpx",
+            "type": "number | string",
+            "default": "4"
+        },
+        {
+            "name": "buttonSize",
+            "description": "滑块按钮大小，默认单位为 rpx",
+            "type": "number | string",
+            "default": "20"
+        },
+        {
+            "name": "activeColor",
+            "description": "进度条激活态颜色",
+            "type": "string",
+            "default": "#3c9cff"
+        },
+        {
+            "name": "inactiveColor",
+            "description": "进度条非激活态颜色",
+            "type": "string",
+            "default": "#ebedf0"
+        },
+        {
+            "name": "range",
+            "description": "是否为范围选择",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "vertical",
+            "description": "是否竖向模式",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用滑块",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "readonly",
+            "description": "是否为只读状态，只读状态下无法修改滑块的值",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "marks",
+            "description": "标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式",
+            "type": "object"
+        },
+        {
+            "name": "[event]change",
+            "description": "进度变化且结束拖动后触发",
+            "type": "(percentage)=>void",
+            "params": [
+                {
+                    "name": "percentage",
+                    "description": "进度百分比"
+                }
+            ]
+        },
+        {
+            "name": "[event]dragStart",
+            "description": "开始拖动时触发",
+            "type": "(e)=>void",
+            "params": [
+                {
+                    "name": "e",
+                    "description": "拖动事件"
+                }
+            ]
+        },
+        {
+            "name": "[event]dragEnd",
+            "description": "结束拖动时触发",
+            "type": "(e)=>void",
+            "params": [
+                {
+                    "name": "e",
+                    "description": "拖动事件"
+                }
+            ]
+        },
+        {
+            "name": "[event]input",
+            "description": "进度变化时实时触发",
+            "type": "(percentage)=>void",
+            "params": [
+                {
+                    "name": "percentage",
+                    "description": "进度百分比"
+                }
+            ]
+        }
+    ]
+}

package/components/ste-slider/ste-slider.scss

@@ -0,0 +1,150 @@
+.ste-slider-root {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    height: var(--progress-height);
+    border-radius: 24rpx;
+
+    &.ste-slider-disabled {
+        .active-box {
+            background-color: #cccccc;
+        }
+
+        .inactive-box {
+            background-color: #eeeeee;
+        }
+
+        .slider-bar-box {
+            .slider-bar {
+                border-color: #cccccc;
+            }
+        }
+    }
+
+    &.ste-slider-drag {
+        .active-box {
+            transition: none !important;
+        }
+        .slider-bar-box {
+            transition: none !important;
+        }
+    }
+    &.ste-slider-vertical {
+        display: inline-block;
+        margin: 0 16rpx;
+        width: var(--progress-height);
+        height: 100%;
+
+        .inactive-box {
+            height: 100%;
+            width: var(--progress-height);
+        }
+        .active-box {
+            align-items: flex-end;
+            justify-content: center;
+            width: 100%;
+            transition: height 0.3s ease;
+        }
+
+        .slider-bar-box {
+            transition: top 0.3s ease;
+            left: 50%;
+            top: 0;
+        }
+
+        .mark-box {
+            display: flex;
+            align-items: center;
+            transform: translateY(-50%);
+            .dot {
+                margin-right: 20rpx;
+            }
+        }
+    }
+    &.ste-slider-horizontal {
+        margin: 16rpx 0;
+        .mark-box {
+            transform: translateX(-50%);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            .dot {
+                margin-bottom: 20rpx;
+            }
+        }
+        .slider-bar-box {
+        }
+    }
+
+    .inactive-box {
+        width: 100%;
+        height: var(--progress-height);
+        border-radius: 24rpx;
+    }
+
+    .active-box {
+        width: 100%;
+        height: var(--progress-height);
+        border-radius: 24rpx;
+        position: absolute;
+        left: 0;
+        top: 0;
+
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        transition: width 0.3s ease;
+        z-index: 2;
+    }
+
+    .slider-bar-box {
+        cursor: grab;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 9;
+        padding: 12rpx;
+
+        transition: left 0.3s ease;
+        white-space: nowrap;
+        /* 其他样式 */
+        view {
+            white-space: nowrap;
+        }
+        text {
+            white-space: nowrap;
+        }
+        .slider-bar {
+            min-width: var(--bar-size);
+            height: var(--bar-size);
+            width: var(--bar-size);
+            border-radius: 50%;
+            background-color: #ffffff;
+            border: 2rpx solid var(--active-color);
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+
+    .mark-box {
+        position: absolute;
+        z-index: 3;
+        .dot {
+            height: var(--progress-height);
+            width: var(--progress-height);
+            border-radius: 100%;
+            background-color: #fff;
+        }
+
+        .marks-label {
+            white-space: nowrap;
+
+            font-size: 24rpx;
+        }
+    }
+}