stellar-ui-plus 1.16.18

package/components/ste-slider/ste-slider.vue

@@ -0,0 +1,293 @@
+<script lang="ts" setup>
+import { computed, defineOptions, getCurrentInstance, type CSSProperties, type ComponentPublicInstance, onMounted, watch, onBeforeUnmount } from 'vue';
+import useColor from '../../config/color';
+let color = useColor();
+import type { UniTouchEvent, BaseEvent } from '../../types/event';
+import utils from '../../utils/utils';
+import propsData, { sliderEmits } from './props';
+import useData from './useData';
+const componentName = `ste-slider`;
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+
+const default_max = 100;
+const default_min = 0;
+
+const props = defineProps(propsData);
+const emits = defineEmits(sliderEmits);
+const instance = getCurrentInstance() as unknown as ComponentPublicInstance;
+
+let hasMarks = false;
+let isMouseDown = false;
+let isSecondSlider = false;
+
+let elRoot: UniApp.NodeInfo;
+
+let { markList, isDrag, realPercentage, realPercentage2, getRealValue, calculateStepMarks, startPosition, getPosition, startPercentage, getValueFromPercentage } = useData(props, emits, instance);
+
+const cmpRootClass = computed(() => {
+    let classStr = '';
+    if (isDrag.value) {
+        classStr += 'ste-slider-drag ';
+    }
+
+    if (props.range) {
+        classStr += 'ste-slider-range ';
+    }
+
+    if (props.disabled) {
+        classStr += 'ste-slider-disabled ';
+    }
+
+    if (props.vertical) {
+        classStr += 'ste-slider-vertical ';
+    } else {
+        classStr += 'ste-slider-horizontal ';
+    }
+    return classStr;
+});
+
+const cmpRootCssVar = computed(() => {
+    return {
+        '--progress-height': utils.addUnit(props.barHeight),
+        '--bar-size': utils.addUnit(props.buttonSize),
+        '--active-color': props.activeColor ? props.activeColor : color.getColor().steThemeColor,
+    };
+});
+
+const cmpInactiveStyle = computed(() => {
+    let style: CSSProperties = {};
+    if (!props.disabled) {
+        const bg = utils.bg2style(props.inactiveColor);
+        style = { ...style, ...bg };
+    }
+    return style;
+});
+
+const cmpActiveStyle = computed(() => {
+    let style: CSSProperties = {};
+    if (!props.disabled) {
+        const bg = utils.bg2style(props.activeColor ? props.activeColor : color.getColor().steThemeColor);
+        style = { ...style, ...bg };
+    }
+    if (props.vertical) {
+        if (props.range) {
+            style.top = realPercentage.value + '%';
+            style.height = realPercentage2.value - realPercentage.value + '%';
+        } else {
+            style.height = realPercentage.value + '%';
+        }
+    } else {
+        if (props.range) {
+            style.left = realPercentage.value + '%';
+            style.width = realPercentage2.value - realPercentage.value + '%';
+        } else {
+            style.width = realPercentage.value + '%';
+        }
+    }
+    return style;
+});
+
+onMounted(() => {
+    handleWindowResize();
+    uni.onWindowResize(handleWindowResize);
+    calculateStepMarks();
+});
+
+onBeforeUnmount(() => {
+    uni.offWindowResize(handleWindowResize);
+});
+
+watch(
+    () => props.value,
+    val => {
+        if (Array.isArray(val)) {
+            realPercentage.value = getRealValue(Number(val[0]));
+            realPercentage2.value = getRealValue(Number(val[1]));
+        } else {
+            realPercentage.value = getRealValue(Number(val));
+        }
+    },
+    { immediate: true }
+);
+
+watch(
+    () => props.marks,
+    val => {
+        hasMarks = Object.keys(val || {}).length > 0;
+    },
+    { immediate: true }
+);
+
+function handleWindowResize() {
+    utils.querySelector<false>('.ste-slider-root', instance).then(rect => {
+        elRoot = rect || {};
+    });
+}
+
+function handleClick(e: MouseEvent | BaseEvent) {
+    if (props.readonly || props.disabled || props.range) return;
+    const { top = 0, height = 0, left = 0, width = 0 } = elRoot;
+    let offsetValue;
+    if (props.vertical) {
+        let clientY = e.detail.y || e.detail.clientY;
+        offsetValue = ((clientY - top) / height) * 100;
+    } else {
+        let clientX = e.detail.x || e.detail.clientX;
+        offsetValue = ((clientX - left) / width) * 100;
+    }
+    updateWidth(offsetValue, false);
+    emits('change', props.range ? [realPercentage.value, realPercentage2.value] : getValueFromPercentage(realPercentage.value));
+}
+
+function onTouchStart(e: UniTouchEvent | MouseEvent, isSecond: Boolean = false) {
+    isSecondSlider = !!isSecond;
+
+    startPosition.value = getPosition(e);
+    startPercentage.value = isSecond ? realPercentage2.value : realPercentage.value;
+    emits('dragStart', e);
+}
+
+function onTouchMove(e: UniTouchEvent | MouseEvent) {
+    if (props.readonly || props.disabled) return;
+    let touches = getPosition(e);
+    let distance = props.vertical ? touches.clientY - startPosition.value.clientY : touches.clientX - startPosition.value.clientX;
+    let containerLength = props.vertical ? elRoot.height : elRoot.width;
+    let offsetValue = (distance / Number(containerLength)) * 100;
+    updateWidth(offsetValue, true);
+}
+function onTouchEnd(e: UniTouchEvent | MouseEvent) {
+    isDrag.value = false;
+    // this.isSecondSlider = false;
+    emits('dragEnd', e);
+    emits('change', props.range ? [realPercentage.value, realPercentage2.value] : getValueFromPercentage(realPercentage.value));
+
+    // #ifdef WEB
+    removeListenner && removeListenner();
+    // #endif
+}
+
+function updateWidth(value: number, drag: boolean) {
+    let realValue;
+    isDrag.value = drag;
+    if (drag) {
+        realValue = startPercentage.value + value;
+    } else {
+        realValue = value;
+    }
+    const changeValue = calculateValue(realValue);
+    if (isSecondSlider) {
+        realPercentage2.value = changeValue;
+    } else {
+        realPercentage.value = changeValue;
+    }
+    emits('input', props.range ? [realPercentage.value, realPercentage2.value] : realPercentage.value);
+}
+
+// 根据步长和最大最小值来计算每次的滑动
+function calculateValue(value: number) {
+    let step = hasMarks ? 1 : Number(props.step);
+    let min = Number(default_min);
+    let max = Number(default_max);
+
+    /**
+     *当范围模式下时，两个滑块不允许交替,
+     *第一个滑块的最大值就是第二个滑块的当前值，
+     * 第二个滑块的最小是就是第一个滑块的当前值
+     */
+    if (props.range) {
+        if (isSecondSlider) {
+            min = realPercentage.value;
+        } else {
+            max = realPercentage2.value;
+        }
+    }
+
+    // 计算出当前值相对于最小值的偏移量
+    const offset = value - Number(min);
+    // 根据步长计算出应该是哪个步长点
+    const targetValue = Math.round(offset / step) * step + min;
+    // 确保计算出的值不会超过最大值和低于最小值
+    return getRealValue(targetValue, max, min);
+}
+
+// #ifdef WEB
+// 适配web端没有touch事件
+function onDown(e: UniTouchEvent | MouseEvent, isSecond: Boolean = false) {
+    isMouseDown = true;
+    onTouchStart({ touches: [{ clientX: e.clientX, clientY: e.clientY }] } as unknown as UniTouchEvent, isSecond);
+    window.addEventListener('mousemove', onTouchMove);
+    window.addEventListener('mouseup', onTouchEnd);
+}
+function removeListenner() {
+    window.removeEventListener('mousemove', onTouchMove);
+    window.removeEventListener('mouseup', onTouchEnd);
+}
+
+// #endif
+</script>
+
+<template>
+    <view class="ste-slider-root" :class="cmpRootClass" :style="[cmpRootCssVar]" @click="handleClick">
+        <view class="inactive-box" :style="[cmpInactiveStyle]"></view>
+        <view class="active-box line" :style="[cmpActiveStyle]"></view>
+
+        <view
+            class="slider-bar-box"
+            :class="{ 'range-min': realPercentage == 0, 'range-max': realPercentage == 100 }"
+            @touchstart.stop="onTouchStart"
+            @touchmove.stop="onTouchMove"
+            @touchend.stop="onTouchEnd"
+            @touchcancel.stop="onTouchEnd"
+            @mousedown="onDown"
+            :style="{
+                left: vertical ? '50%' : `${realPercentage}%`,
+                top: vertical ? `${realPercentage}%` : '50%',
+            }"
+        >
+            <slot v-if="range" name="leftButton">
+                <view class="slider-bar"></view>
+            </slot>
+            <slot v-else name="button">
+                <view class="slider-bar"></view>
+            </slot>
+        </view>
+
+        <view
+            v-if="range"
+            class="slider-bar-box range"
+            :class="{ 'range-min': realPercentage2 == 0, 'range-max': realPercentage2 == 100 }"
+            @touchstart="onTouchStart($event, true)"
+            @touchmove.stop="onTouchMove($event)"
+            @touchend="onTouchEnd($event)"
+            @touchcancel="onTouchEnd($event)"
+            @mousedown="onDown($event, true)"
+            :style="{
+                left: vertical ? '50%' : `${realPercentage2}%`,
+                top: vertical ? `${realPercentage2}%` : '50%',
+                zIndex: isSecondSlider ? 10 : 8,
+            }"
+        >
+            <slot name="rightButton">
+                <view class="slider-bar"></view>
+            </slot>
+        </view>
+
+        <template v-if="showStops">
+            <template v-for="(e, i) in markList" :key="i">
+                <view class="mark-box" :style="{ left: e.left, top: e.top }">
+                    <view class="dot" />
+                    <view class="marks-label" :style="e.style">{{ e.label }}</view>
+                </view>
+            </template>
+        </template>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+@import './ste-slider.scss';
+</style>

package/components/ste-slider/type.d.ts

@@ -0,0 +1,4 @@
+export interface Position {
+  clientX: number
+  clientY: number
+}

package/components/ste-slider/useData.ts

@@ -0,0 +1,79 @@
+import type { ComponentPublicInstance, SetupContext } from 'vue'
+import { ref } from 'vue'
+import type { UniTouchEvent } from '../../types/event'
+import type { SliderEmits, SliderProps } from './props'
+import type { Position } from './type'
+
+export default function useData(props: SliderProps, _emits: SetupContext<SliderEmits>['emit'], _instance: ComponentPublicInstance) {
+  const realPercentage = ref(0)
+  const realPercentage2 = ref(0)
+
+  const isDrag = ref(false)
+  const startPosition = ref<Position>({ clientX: 0, clientY: 0 })
+  const startPercentage = ref(0)
+
+  const markList = ref<Obj[]>([])
+
+  function getValueFromPercentage(percentage: number) {
+    const value = Number(props.min) + ((Number(props.max) - Number(props.min)) * percentage) / 100
+    return Math.round(value / Number(props.step)) * Number(props.step)
+  }
+
+  // 根据传入的最大最小值来计算传入的值是否在范围内，并给出范围内的值
+  function getRealValue(value = 0, max = props.max, min = props.min) {
+    return Math.max(Math.min(value, Number(max)), Number(min))
+  }
+
+  function calculateStepMarks() {
+    if (!props.showStops)
+      return
+    markList.value = []
+    const min = Number(props.min)
+    const max = Number(props.max)
+
+    const marksKeys = Object.keys(props.marks || {})
+    if (marksKeys.length > 0) {
+      marksKeys.forEach((e) => {
+        markList.value.push({
+          left: props.vertical ? '0' : `${e}%`,
+          top: props.vertical ? `${e}%` : '0',
+          style: props.marks[e].style,
+          label: typeof props.marks[e] === 'string' ? props.marks[e] : props.marks[e].label,
+        })
+      })
+    }
+    else {
+      for (let i = min; i <= max; i += Number(props.step)) {
+        // 根据自定义的 marks 对象判断是否需要显示该标记点
+        if (i === min || i === max)
+          continue // 跳过第一个和最后一个标记点
+
+        const percentage = ((i - min) / (max - min)) * 100
+        markList.value.push({
+          left: props.vertical ? '0' : `${percentage}%`,
+          top: props.vertical ? `${percentage}%` : '0',
+        })
+      }
+    }
+  }
+
+  // 为了保持web端和移动端事件参数数据结构一致
+  function getPosition(e: UniTouchEvent | MouseEvent) {
+    if ('touches' in e)
+      return e.touches[0]
+    else return { clientX: e.clientX, clientY: e.clientY }
+  }
+
+  return {
+    isDrag,
+    realPercentage,
+    realPercentage2,
+    startPosition,
+    startPercentage,
+    markList,
+    getRealValue,
+    calculateStepMarks,
+    getPosition,
+    getValueFromPercentage,
+  }
+}

package/components/ste-step/props.ts

@@ -0,0 +1,10 @@
+import type { PropType } from 'vue'
+
+const stepProps = {
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  icon: { type: String, default: '' },
+  status: { type: String as PropType<string | undefined>, default: undefined },
+}
+
+export default stepProps

package/components/ste-step/ste-step.scss

@@ -0,0 +1,104 @@
+.ste-step-row {
+    display: block;
+}
+
+.ste-step-column {
+    display: flex;
+
+    .ste-step-line {
+        height: calc(4rpx + 100%) !important;
+        width: 2rpx !important;
+    }
+
+    .ste-step-content {
+        padding-left: 6% !important;
+        text-align: left !important;
+    }
+}
+.ste-step {
+    flex: 1;
+    font-size: 0;
+    text-align: center;
+
+    .head-is-dot {
+        top: 12rpx;
+        margin-bottom: 0 !important;
+        margin-top: 14rpx !important;
+
+        .ste-step-line {
+            top: 14rpx !important;
+            left: auto !important;
+            right: auto !important;
+        }
+
+        .ste-step-icon {
+            box-sizing: content-box;
+            height: 16rpx !important;
+            width: 16rpx !important;
+            line-height: 16rpx !important;
+            background-color: var(---dot-color);
+            border-radius: 50%;
+        }
+    }
+    .ste-step-head {
+        border-color: var(---color);
+        color: var(---num-color);
+        display: flex;
+        justify-content: center;
+        margin-bottom: 22rpx;
+        position: relative;
+
+        .ste-step-line {
+            background: var(---line-color);
+            display: inline-block;
+            position: absolute;
+            height: 2rpx;
+            left: 50%;
+            right: -50%;
+            top: 20rpx;
+        }
+        .ste-step-icon.is-icon {
+            border-radius: 50%;
+            border-style: solid;
+            border-width: 2rpx;
+            border-color: var(---color);
+            background-color: #ffffff;
+        }
+        .ste-step-icon.is-text {
+            border-radius: 50%;
+            border-style: solid;
+            border-width: 2rpx;
+            background-color: var(---bg-color);
+        }
+        .ste-step-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            font-size: var(--font-size-24, 24rpx);
+            height: 40rpx;
+            line-height: 40rpx;
+            width: 40rpx;
+        }
+        .ste-step-icon-inner {
+            align-items: center;
+            display: flex;
+            justify-content: center;
+        }
+    }
+    .ste-step-content {
+        display: inline-block;
+        text-align: center;
+        .ste-step-title {
+            font-size: var(--font-size-32, 32rpx);
+            color: var(---color);
+            line-height: 44rpx;
+        }
+        .ste-step-desc {
+            line-height: 44rpx;
+            font-size: var(--font-size-28, 28rpx);
+            color: var(---desc-color);
+            margin-top: 8rpx;
+        }
+    }
+}

package/components/ste-step/ste-step.vue

@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import { computed, nextTick, ref, watch, defineOptions } from 'vue';
+import { useInject } from '../../utils/mixin';
+import { type StepsProps, STEPS_KEY } from '../ste-steps/props';
+import propsData from './props';
+import type { Obj } from '../../types';
+import useColor from '../../config/color';
+let color = useColor();
+
+const componentName = `ste-step`;
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+
+const props = defineProps(propsData);
+
+const Parent = useInject<{ props: Required<StepsProps>; onClickStep: (index: number) => void }>(STEPS_KEY);
+const parent = Parent.parent;
+const parentProps = Parent.parent?.props as StepsProps;
+
+const childrenLen = ref(0);
+const stepIndex = ref(0);
+
+const cmpDirection = computed(() => parentProps.direction);
+const cmpDot = computed(() => parentProps.dot);
+
+watch(
+    () => parent?.internalChildren,
+    val => {
+        stepIndex.value = val?.length || 0;
+        nextTick(() => {
+            childrenLen.value = val?.length || 0;
+        });
+    },
+    {
+        immediate: true,
+    }
+);
+
+const cmpStatusObj = computed(() => {
+    let obj = {} as Obj;
+    let status = '';
+    // status不是默认配置 优先级最高
+    if (props.status) {
+        status = props.status;
+    } else {
+        status = parentProps.active >= stepIndex.value ? 'finished' : 'process';
+    }
+    obj.textColor = parentProps.active + 1 >= stepIndex.value ? color.getColor().steThemeColor : '#cccccc';
+    if (status == 'finished') {
+        obj.color = color.getColor().steThemeColor;
+        obj.icon = '&#xe67a;';
+    }
+    if (status == 'process') {
+        obj.color = obj.textColor;
+        obj.icon = '';
+    }
+    if (status == 'error') {
+        obj.color = color.getColor().steThemeColor;
+        obj.icon = '&#xe67b;';
+        obj.textColor = color.getColor().steThemeColor;
+    }
+    obj.icon = props.icon ? props.icon : obj.icon;
+    obj.bgColor = parentProps.active + 1 == stepIndex.value ? color.getColor().steThemeColor : '#ffffff';
+    obj.numColor = parentProps.active + 1 >= stepIndex.value ? '#ffffff' : '#cccccc';
+    obj.descColor = parentProps.active + 1 >= stepIndex.value ? '#999999' : '#cccccc';
+    obj.lineColor = parentProps.active >= stepIndex.value ? color.getColor().steThemeColor : '#EEEEEE';
+    obj.dotColor = parentProps.active + 1 >= stepIndex.value ? color.getColor().steThemeColor : '#DDDDDD';
+    return obj;
+});
+
+const cmpRootStyle = computed(() => ({
+    '---color': cmpStatusObj.value.textColor,
+    '---bg-color': cmpStatusObj.value.bgColor,
+    '---num-color': cmpStatusObj.value.numColor,
+    '---desc-color': cmpStatusObj.value.descColor,
+    '---line-color': cmpStatusObj.value.lineColor,
+    '---dot-color': cmpStatusObj.value.dotColor,
+}));
+
+function clickStep() {
+    parent?.onClickStep(stepIndex.value);
+}
+</script>
+
+<template>
+    <view class="ste-step" :class="[`ste-step-${cmpDirection}`]" :style="[cmpRootStyle]">
+        <view class="ste-step-head" :class="cmpDot ? 'head-is-dot' : ''">
+            <view class="ste-step-line" v-if="stepIndex < childrenLen"></view>
+            <view class="ste-step-icon" :class="[!cmpDot ? ($slots.icon || icon ? '' : cmpStatusObj.icon ? 'is-icon' : 'is-text') : 'is-dot']" @click="clickStep">
+                <template v-if="$slots.icon">
+                    <slot name="icon"></slot>
+                </template>
+                <template v-else-if="cmpDot"></template>
+                <template v-else-if="cmpStatusObj.icon">
+                    <ste-icon class="ste-step-icon-inner" :code="cmpStatusObj.icon" :size="icon ? 40 : 20" :color="cmpStatusObj.color"></ste-icon>
+                </template>
+                <template v-else>
+                    <view class="ste-step-inner">{{ stepIndex }}</view>
+                </template>
+            </view>
+        </view>
+        <view class="ste-step-content" :class="[`ste-step-content-${parentProps.direction}`]">
+            <view class="ste-step-title" @click="clickStep">
+                <span v-if="!$slots.title">
+                    {{ title ? title : `第${stepIndex}步` }}
+                </span>
+                <slot name="title"></slot>
+            </view>
+            <view class="ste-step-desc" v-if="description || $slots.description">
+                <span v-if="!$slots.description" v-html="description"></span>
+                <slot name="description"></slot>
+            </view>
+        </view>
+    </view>
+</template>
+<style lang="scss" scoped>
+@import './ste-step.scss';
+</style>

package/components/ste-stepper/ATTRIBUTES.md

@@ -0,0 +1,33 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `v-model` | 当前输入的值 | `number` | `1` | - | - |
+| `min` | 最小值 | `number` | `0` | - | - |
+| `max` | 最大值 | `number` | `Infinity` | - | - |
+| `step` | 步长，每次加或减的值 | `number` | `1` | - | - |
+| `inputWidth` | 输入框宽度，默认单位为rpx | `number / string` | `64` | - | - |
+| `btnSize` | 按钮大小以及输入框高度，默认单位为`rpx`,`theme`为`line`时 高为宽的80% | `number / string` | `48` | - | - |
+| `precision` | 数值精度 | `number` | `0` | - | - |
+| `theme` | 样式风格 | `string` | `card` | `card`：面型<br/>`line`：线型<br/>`add`：纯加购按钮 | - |
+| `mainColor` | 主色，对`theme`为`line`时无效 | `string` | `#0090FF` | - | - |
+| `disabled` | 是否禁用步进器 | `boolean` | `false` | - | - |
+| `disablePlus` | 是否禁用增加按钮 | `boolean` | `false` | - | - |
+| `disableMinus` | 是否禁用减少按钮 | `boolean` | `false` | - | - |
+| `disableInput` | 是否禁用输入框 | `boolean` | `false` | - | - |
+| `background` | 徽标：背景 | `string` | `#ee0a24` | - | - |
+| `showDot` | 徽标：是否展示为小红点 | `boolean` | `false` | - | - |
+| `offsetX` | 徽标：根据徽标位置,设置x轴偏移量 | `number / string` | `auto` | - | - |
+| `offsetY` | 徽标：根据徽标位置,设置y轴偏移量 | `number / string` | `auto` | - | - |
+| `showZero` | 徽标：当 content 为数字 0，是否展示徽标 | `boolean` | `false` | - | - |
+| `position` | 徽标：徽标位置 | `string` | `topRight` | `topRight`：上右<br/>`topLeft`：上左<br/>`bottomLeft`：下左<br/>`bottomRight`：下右 | - |
+| `badgeMax` | 徽标：徽标最大显示值 | `number` | `99` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `change` | 当绑定值变化时触发的事件 `value`: 改变后的绑定值 | - | - |
+| `plus` | 点击增加按钮时触发（可拦截change事件） | `value`：改变后的绑定值<br/>`suspend`：等待<br/>`next`：继续<br/>`stop`：停止 | - |
+| `minus` | 点击减少按钮时触发（可拦截change事件） | `value`：改变后的绑定值<br/>`suspend`：等待<br/>`next`：继续<br/>`stop`：停止 | - |
+| `focus` | 输入框聚焦时触发 | - | - |
+| `blur` | 输入框失焦时触发 | - | - |