stellar-ui-plus 1.16.18

package/components/ste-date-picker/ste-date-picker.vue

@@ -0,0 +1,290 @@
+<template>
+    <view class="ste-date-picker-root">
+        <ste-picker
+            :columns="columns"
+            :title="title"
+            :showToolbar="showToolbar"
+            :cancelText="cancelText"
+            :cancelColor="cancelColor"
+            :confirmText="confirmText"
+            :confirmColor="cmpConfirmColor"
+            :visibleItemCount="visibleItemCount"
+            :defaultIndex="innerDefaultIndex"
+            :itemHeight="itemHeight"
+            @change="change"
+            @cancel="cancel"
+            @confirm="confirm"
+            rootClass="ste-date-picker-view"
+            v-if="show"
+        ></ste-picker>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, nextTick, defineOptions, computed } from 'vue';
+import useColor from '../../config/color';
+let color = useColor();
+import propsData from './props';
+import type { CloumnType } from './types';
+import utils from '../../utils/utils';
+const dayjs = utils.dayjs;
+
+const componentName = 'ste-date-picker';
+defineOptions({
+    name: componentName,
+});
+
+const props = defineProps(propsData);
+
+let cmpConfirmColor = computed(() => {
+    return props.confirmColor ? props.confirmColor : color.getColor().steThemeColor;
+});
+
+const DEFAULT_DATE = dayjs(new Date(1970, 1, 1, 0, 0, 0));
+const padZero = (value: string | number) => `00${value}`.slice(-2);
+
+const times = (n: number, iteratee: (index: number) => string): string[] => {
+    let index = -1;
+    const result = Array(n < 0 ? 0 : n);
+    while (++index < n) {
+        result[index] = iteratee(index);
+    }
+    return result;
+};
+
+const emits = defineEmits<{
+    (e: 'change', changeObj: any): void;
+    (e: 'cancel'): void;
+    (e: 'confirm', value: string | number): void;
+}>();
+
+const columns = ref<string[][]>([]);
+const innerValue = ref<string | number>('');
+const innerDefaultIndex = ref<number[]>([]);
+
+const show = ref(false);
+const innerFormatter = (type: string, value: string) => value;
+
+const init = () => {
+    innerValue.value = correctValue(props.value);
+    updateColumnValue(innerValue.value);
+};
+
+const updateColumnValue = (value: string | number) => {
+    innerValue.value = value;
+    updateColumns();
+    updateIndexs();
+};
+
+const updateColumns = () => {
+    const formatter = props.formatter || innerFormatter;
+    const result = getOriginColumns().map(column => column.values.map(value => formatter(column.type, value)));
+    columns.value = result;
+    nextTick(() => {
+        show.value = true;
+    });
+};
+
+const updateIndexs = () => {
+    let value = innerValue.value;
+    let values: string[] = [];
+    const formatter = props.formatter || innerFormatter;
+
+    values.push(
+        formatter('year', `${dayjs(value).year()}` as string),
+        formatter('month', padZero(dayjs(value).month() + 1) as string),
+        formatter('day', padZero(dayjs(value).date()) as string),
+        formatter('hour', padZero(dayjs(value).hour()) as string),
+        formatter('minute', padZero(dayjs(value).minute()) as string),
+        formatter('second', padZero(dayjs(value).second()) as string)
+    );
+
+    let startFlag = 0;
+    switch (props.mode) {
+        case 'month-day':
+            startFlag = 1;
+            break;
+        case 'time':
+        case 'hour-minute':
+            startFlag = 3;
+            break;
+        case 'minute-second':
+            startFlag = 4;
+    }
+
+    const indexs = columns.value.map((column, index) => {
+        return Math.max(
+            0,
+            column.findIndex(item => item === values[index + startFlag])
+        );
+    });
+
+    innerDefaultIndex.value = indexs;
+};
+
+const getOriginColumns = () => {
+    const results = getRanges().map(({ type, range }) => {
+        let values = times(range[1] - range[0] + 1, (index: number) => {
+            let value: string = (range[0] + index).toString();
+            value = type === 'year' ? `${value}` : padZero(value);
+            return value;
+        });
+        if (props.filter) {
+            values = props.filter(type, values);
+        }
+        return { type, values };
+    });
+    return results;
+};
+
+const getRanges = () => {
+    const { maxYear, maxDate, maxMonth, maxHour, maxMinute, maxSecond } = getBoundary('max', innerValue.value);
+    const { minYear, minDate, minMonth, minHour, minMinute, minSecond } = getBoundary('min', innerValue.value);
+
+    const result: { type: CloumnType; range: [number, number] }[] = [
+        { type: 'year', range: [minYear, maxYear] },
+        { type: 'month', range: [minMonth, maxMonth] },
+        { type: 'day', range: [minDate, maxDate] },
+        { type: 'hour', range: [minHour, maxHour] },
+        { type: 'minute', range: [minMinute, maxMinute] },
+        { type: 'second', range: [minSecond, maxSecond] },
+    ];
+
+    let temp = result;
+    if (props.mode === 'datetime') temp = result.splice(0, 5);
+    if (props.mode === 'date') temp = result.splice(0, 3);
+    if (props.mode === 'year-month') temp = result.splice(0, 2);
+    if (props.mode === 'month-day') temp = result.splice(1, 2);
+    if (props.mode === 'time') temp = result.splice(3, 3);
+    if (props.mode === 'hour-minute') temp = result.splice(3, 2);
+    if (props.mode === 'minute-second') temp = result.splice(4, 2);
+    return temp;
+};
+
+const getBoundary = (type: 'min' | 'max', innerValue: string | number) => {
+    const value = dayjs(innerValue);
+
+    const boundary = type === 'min' ? dayjs(props.minDate) : dayjs(props.maxDate);
+    const year = boundary.year();
+    let month = 1;
+    let date = 1;
+    let hour = 0;
+    let minute = 0;
+
+    if (type === 'max') {
+        month = 12;
+        date = dayjs(value).daysInMonth();
+        hour = 23;
+        minute = 59;
+    }
+
+    let second = minute;
+    if (value.year() === year) {
+        month = boundary.month() + 1;
+        if (value.month() + 1 === month) {
+            date = boundary.date();
+            if (value.date() === date) {
+                hour = boundary.hour();
+                if (value.hour() === hour) {
+                    minute = boundary.minute();
+                    if (value.minute() === minute) second = boundary.second();
+                }
+            }
+        }
+    }
+
+    return {
+        [`${type}Year`]: year,
+        [`${type}Month`]: month,
+        [`${type}Date`]: date,
+        [`${type}Hour`]: hour,
+        [`${type}Minute`]: minute,
+        [`${type}Second`]: second,
+    };
+};
+
+const correctValue = (value: string | number) => {
+    let date = dayjs(value);
+    if (date.isValid()) {
+        if (date.isBefore(dayjs(props.minDate))) {
+            date = dayjs(props.minDate);
+        } else if (date.isAfter(dayjs(props.maxDate))) {
+            date = dayjs(props.maxDate);
+        }
+    } else {
+        date = dayjs();
+    }
+    return date.valueOf();
+};
+
+const change = (e: { indexs: number[]; values: string[][] }) => {
+    const { indexs, values } = e;
+    let selectValue: string | number = '';
+
+    let dateArr = [DEFAULT_DATE.year(), DEFAULT_DATE.month() + 1, DEFAULT_DATE.day(), DEFAULT_DATE.hour(), DEFAULT_DATE.minute(), DEFAULT_DATE.second()];
+
+    let startFlag = 0;
+    switch (props.mode) {
+        case 'month-day':
+            startFlag = 1;
+            break;
+        case 'time':
+        case 'hour-minute':
+            startFlag = 3;
+            break;
+        case 'minute-second':
+            startFlag = 4;
+    }
+
+    values.forEach((value, index) => {
+        switch (index + startFlag) {
+            case 0:
+                dateArr[0] = +value[indexs[index]];
+                break;
+            case 1:
+                dateArr[1] = +value[indexs[index]];
+                break;
+            case 2:
+                dateArr[2] = +value[indexs[index]];
+                break;
+            case 3:
+                dateArr[3] = +value[indexs[index]];
+                break;
+            case 4:
+                dateArr[4] = +value[indexs[index]];
+                break;
+            case 5:
+                dateArr[5] = +value[indexs[index]];
+        }
+    });
+
+    // 此月份的最大天数
+    const maxDay = dayjs(`${dateArr[0]}-${dateArr[1]}`).daysInMonth();
+    dateArr[2] = Math.min(maxDay, dateArr[2]) || 1;
+
+    selectValue = dayjs(`${dateArr[0]}/${padZero(dateArr[1])}/${padZero(dateArr[2])} ${padZero(dateArr[3])}:${padZero(dateArr[4])}:${padZero(dateArr[5])}`).valueOf();
+
+    updateColumnValue(selectValue);
+    emits('change', { value: selectValue, columnIndexs: indexs });
+};
+
+const cancel = () => {
+    emits('cancel');
+};
+
+const confirm = () => {
+    emits('confirm', innerValue.value);
+};
+
+onMounted(init);
+</script>
+
+<style scoped>
+.ste-date-picker-root {
+    width: 100%;
+}
+
+.ste-date-picker-view {
+    width: 100%;
+}
+</style>

package/components/ste-date-picker/types.d.ts

@@ -0,0 +1,3 @@
+export type DatePickerModeType = 'all' | 'datetime' | 'date' | 'year-month' | 'month-day' | 'time' | 'hour-minute' | 'minute-second'
+
+export type CloumnType = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'

package/components/ste-drag/ATTRIBUTES.md

@@ -0,0 +1,13 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `attract` | 是否开启自动吸边（根据 screenWidth 进行吸边） | `boolean` | `false` | - | - |
+| `direction` | 拖拽元素的拖拽方向限制 | `string` | `all` | `all`：不限制方向<br/>`x`：横向拖拽<br/>`y`：竖向拖拽 | - |
+| `boundary` | 拖拽元素的拖拽边界 | `object` | `屏幕为边界` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `start` | 拖拽开始 | - | - |
+| `end` | 拖拽结束 | - | - |

package/components/ste-drag/README.md

@@ -0,0 +1,88 @@
+# Drag 拖拽
+
+用于拖拽的容器
+
+---$
+
+### 代码演示
+
+#### 基础使用
+
+```html
+<ste-drag>
+    <ste-button>拖拽按钮</ste-button>
+</ste-drag>
+```
+
+#### 固定方向
+
+```html
+<ste-drag direction="x">
+    <ste-button>横向固定</ste-button>
+</ste-drag>
+
+<ste-drag direction="y">
+    <ste-button>竖向固定</ste-button>
+</ste-drag>
+```
+
+#### 贴边
+
+会根据元素移动结束时到左右边界距离来进行贴边
+
+```html
+<ste-drag attract>
+    <ste-button>贴边</ste-button>
+</ste-drag>
+```
+
+#### 边界
+
+-   数据结构是 `{top: 0, right: 0, bottom: 0, left: 0}`，分别代表距离屏幕上、右、下、左的距离(单位px)
+-   可按照样例中的做法，根据屏幕大小动态边界值
+
+```html
+<template>
+    <view style="width: 300px; height: 150px; border: solid 1px red" class="boundary-box">
+        <ste-drag :boundary="boundary">
+            <ste-button>边界</ste-button>
+        </ste-drag>
+    </view>
+</template>
+<script lang="ts" setup>
+    import utils from '@/common/utils.js';
+    import { ref, onMounted } from 'vue';
+    const boundary = ref({ left: 22, bottom: 0, top: 354, right: 0 });
+    onMounted(() => {
+        const systemInfo = utils.getWindowInfo();
+        boundary.value.right = systemInfo.windowWidth - 22 - 300;
+        boundary.value.bottom = systemInfo.windowHeight - 354 - 150;
+    });
+</script>
+<style>
+    .boundary-box {
+        width: 300px;
+        height: 150px;
+        border: solid 1px red;
+
+        position: fixed;
+        left: 22px;
+        top: 354px;
+    }
+</style>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### Slots
+
+| 插槽名    | 说明     | 插槽参数 | 支持版本 |
+| --------- | -------- | -------- | -------- |
+| `default` | 拖拽内容 | -        | -        |
+
+---$
+{{fuyuwei}}

package/components/ste-drag/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "基础组件",
+    "title": "Drag 拖拽",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/drag.png?1722389562846"
+}

package/components/ste-drag/props.ts

@@ -0,0 +1,10 @@
+import type { PropType } from 'vue'
+
+type DirectionType = 'all' | 'x' | 'y'
+export const DEFAULT_BOUNDARY = { top: 0, left: 0, right: 0, bottom: 0 }
+
+export default {
+  attract: { type: Boolean, default: false },
+  direction: { type: String as PropType<DirectionType>, default: 'all' },
+  boundary: { type: Object, default: () => DEFAULT_BOUNDARY },
+}

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

@@ -0,0 +1,50 @@
+{
+    "name": "ste-drag",
+    "description": "拖拽",
+    "example": "<ste-drag><view>拖拽内容</view></ste-drag>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=drag",
+    "attributes": [
+        {
+            "name": "attract",
+            "description": "是否开启自动吸边（根据 screenWidth 进行吸边）",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "direction",
+            "description": "拖拽元素的拖拽方向限制",
+            "type": "string",
+            "values": [
+                {
+                    "name": "all",
+                    "description": "不限制方向"
+                },
+                {
+                    "name": "x",
+                    "description": "横向拖拽"
+                },
+                {
+                    "name": "y",
+                    "description": "竖向拖拽"
+                }
+            ],
+            "default": "all"
+        },
+        {
+            "name": "boundary",
+            "description": "拖拽元素的拖拽边界",
+            "type": "object",
+            "default": "屏幕为边界"
+        },
+        {
+            "name": "[event]start",
+            "description": "拖拽开始",
+            "type": "(t) => void"
+        },
+        {
+            "name": "[event]end",
+            "description": "拖拽结束",
+            "type": "() => void"
+        }
+    ]
+}

package/components/ste-drag/ste-drag.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { watch, onMounted, reactive, defineOptions, onBeforeUnmount, getCurrentInstance } from 'vue';
+import utils from '../../utils/utils';
+import propsData, { DEFAULT_BOUNDARY } from './props';
+
+const componentName = `ste-drag`;
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+
+let isMove = false;
+const props = defineProps(propsData);
+const emits = defineEmits<{
+    (e: 'start'): void;
+    (e: 'end'): void;
+}>();
+
+const SCREEN_WIDTH = utils.System.getWindowWidth();
+const SCREEN_HEIGHT = utils.System.getWindowHeight();
+const instance = getCurrentInstance() as unknown as ComponentPublicInstance;
+
+const rootID = `myDrag-${utils.guid()}`;
+const state: any = reactive({
+    elWidth: 0,
+    elHeight: 0,
+    screenWidth: SCREEN_WIDTH,
+    screenHeight: SCREEN_HEIGHT,
+    startTop: 0,
+    startLeft: 0,
+    initTop: 0,
+    initLeft: 0,
+    top: 0,
+    left: 0,
+    attractTransition: false,
+    boundary: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    } as Record<string, any>,
+});
+
+onMounted(() => {
+    getInfo();
+});
+
+onBeforeUnmount(() => {
+    // #ifndef MP || APP
+    removeListenner && removeListenner();
+    // #endif
+});
+
+watch(
+    () => props.boundary,
+    val => {
+        state.boundary = { ...DEFAULT_BOUNDARY, ...val };
+    },
+    { immediate: true, deep: true }
+);
+
+async function getInfo() {
+    const rec = await utils.querySelector<false>('#' + rootID, instance);
+    state.elWidth = rec.width;
+    state.elHeight = rec.height;
+    state.initTop = rec.top;
+    state.initLeft = rec.left;
+
+    attractFn();
+}
+
+function touchMove(e: TouchEvent | MouseEvent) {
+    e.preventDefault();
+    const touch = getMoveObj(e);
+
+    let left = touch.clientX - state.startLeft;
+    let top = touch.clientY - state.startTop;
+
+    const rightLocation = state.screenWidth - state.elWidth - state.boundary.right;
+    if (Math.abs(left + state.initLeft) > rightLocation) left = rightLocation - state.initLeft;
+    else if (left + state.initLeft <= state.boundary.left) left = state.boundary.left - state.initLeft;
+
+    if (top + state.initTop < state.boundary.top) top = state.boundary.top - state.initTop;
+    else if (top + state.initTop > state.screenHeight - state.elHeight - state.boundary.bottom) top = state.screenHeight - state.elHeight - state.boundary.bottom - state.initTop;
+
+    if (props.direction !== 'y') state.left = left;
+    if (props.direction !== 'x') state.top = top;
+}
+
+function attractFn() {
+    if (!props.attract || props.direction === 'y') return;
+    const screenCenterX = (state.screenWidth - state.boundary.right - state.boundary.left) / 2;
+    const centerX = screenCenterX - state.initLeft - state.elWidth / 2;
+
+    if (state.left < centerX) state.left = state.boundary.left - state.initLeft;
+    else state.left = state.screenWidth - state.elWidth - state.boundary.right - state.initLeft;
+    state.attractTransition = true;
+    setTimeout(() => {
+        state.attractTransition = false;
+    }, 400);
+}
+
+function touchEnd() {
+    // #ifndef MP || APP
+    removeListenner && removeListenner();
+    // #endif
+    if (isMove) {
+        emits('end');
+        isMove = false;
+    }
+    attractFn();
+}
+
+function touchStart(e: TouchEvent | MouseEvent) {
+    isMove = true;
+    emits('start');
+    const touch = getMoveObj(e);
+    state.startLeft = touch.clientX - state.left;
+    state.startTop = touch.clientY - state.top;
+    state.attractTransition = false;
+}
+
+// #ifdef WEB
+
+function mouseDown(e: MouseEvent) {
+    touchStart(e);
+    window.addEventListener('mousemove', touchMove);
+    window.addEventListener('mouseup', touchEnd);
+}
+
+function removeListenner() {
+    window.removeEventListener('mousemove', touchMove);
+    window.removeEventListener('mouseup', touchEnd);
+}
+// #endif
+
+function getMoveObj(e: TouchEvent | MouseEvent): { clientX: number; clientY: number } {
+    if ('touches' in e) {
+        // e is UniTouchEvent
+        const touch = e.touches[0];
+        return { clientX: touch.pageX, clientY: touch.pageY };
+    } else {
+        // e is HTMLMouseEvent
+        return { clientX: e.pageX, clientY: e.pageY };
+    }
+}
+</script>
+
+<template>
+    <view
+        :id="rootID"
+        class="ste-drag-root"
+        :style="{
+            transform: `translate(${`${state.left}px`}, ${`${state.top}px`})`,
+            transition: state.attractTransition ? 'all ease 0.3s' : 'none',
+        }"
+        @touchstart="touchStart"
+        @touchmove.stop.prevent="touchMove"
+        @touchend="touchEnd"
+        @mousedown="mouseDown"
+    >
+        <slot />
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.ste-drag-root {
+    display: inline-flex;
+}
+</style>

package/components/ste-dropdown-menu/ATTRIBUTES.md

@@ -0,0 +1,22 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `title` | 菜单标题，未设置时会显示选中项的值 | `string` | - | - | - |
+| `value` | 下拉菜单选中的值 | `string / array` | - | - | - |
+| `inactiveColor` | 未选中颜色 | `string` | `#000000` | - | - |
+| `activeColor` | 选中色 | `string` | `#0090FF` | - | - |
+| `direction` | 展开方向 | `string` | `down` | `up`：向上展开<br/>`down`：向下展开 | - |
+| `duration` | 展开动画执行时间 | `number` | `0.2` | - | - |
+| `showMask` | 是否展示遮罩 | `boolean` | `true` | - | - |
+| `isMaskClick` | 是否点击遮罩关闭 | `boolean` | `true` | - | - |
+| `zIndex` | 弹窗层级z-index | `number` | - | - | - |
+| `type` | 下拉选项的形状 | `string` | `block` | `round`：圆形<br/>`block`：块状 | - |
+| `max` | 可选数量 | `number` | `1` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `change` | 选项改变时触发 | `value`：选中的值 | - |
+| `open` | 菜单打开 | - | - |
+| `close` | 菜单收起 | - | - |