stellar-ui-plus 1.16.18

package/components/ste-code-input/ste-code-input.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, defineOptions } from 'vue';
+import utils from '../../utils/utils';
+import propsData from './props';
+
+const props = defineProps(propsData);
+const inputValue = ref('');
+const isFocus = ref(props.focus);
+const componentName = `ste-code-input`;
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+
+const emits = defineEmits<{
+    (e: 'change', value: string | number): void;
+    (e: 'input', value: string | number): void;
+    (e: 'finish', value: string | number): void;
+}>();
+
+const cmpCodeLengthArray = computed(() => {
+    return new Array(Number(props.maxlength));
+});
+
+const cmpCodeArray = computed(() => {
+    return String(inputValue.value).split('');
+});
+
+const cmpRootStyle = computed(() => {
+    const style = {
+        '--font-size': `var(--font-size-${props.fontSize},${utils.formatPx(props.fontSize)})`,
+        '--font-color': props.fontColor,
+        '--line-width': utils.addUnit(props.size),
+        '--line-background-color': props.borderColor,
+    };
+    return style;
+});
+
+watch(
+    () => props.value,
+    val => {
+        // 转为字符串，超出部分截掉
+        inputValue.value = String(val).substring(0, Number(props.maxlength));
+    },
+    { immediate: true }
+);
+
+function getItemStyle(index: number) {
+    const style: { [key: string]: any } = {
+        width: utils.addUnit(props.size),
+        height: utils.addUnit(props.size),
+    };
+    // 盒子模式下，需要额外进行处理
+    if (props.mode === 'box') {
+        style.border = `2rpx solid ${props.borderColor}`;
+        style.backgroundColor = '#F5F5F5';
+        // 如果盒子间距为0的话
+        if (props.space === 0) {
+            // 给第一和最后一个盒子设置圆角
+            if (index === 0) {
+                style.borderTopLeftRadius = '3px';
+                style.borderBottomLeftRadius = '3px';
+            }
+            if (index === Number(props.maxlength) - 1) {
+                style.borderTopRightRadius = '3px';
+                style.borderBottomRightRadius = '3px';
+            }
+            // 最后一个盒子的右边框需要保留
+            if (index !== Number(props.maxlength) - 1) {
+                style.borderRight = 'none';
+            }
+        } else {
+            style.borderRadius = '10rpx';
+        }
+    }
+    if (index !== Number(props.maxlength) - 1) {
+        // 设置验证码字符之间的距离，通过margin-right设置，最后一个字符，无需右边框
+        style.marginRight = utils.addUnit(props.space);
+    } else {
+        // 最后一个盒子的有边框需要保留
+        style.marginRight = 0;
+    }
+
+    return style;
+}
+
+function inputHandler(e: any) {
+    const value = e.detail.value;
+    inputValue.value = value;
+    // 是否允许输入“.”符号
+    if (props.disabledDot) {
+        nextTick(() => {
+            inputValue.value = value.replace('.', '');
+        });
+    }
+    // 未达到maxlength之前，发送change事件，达到后发送finish事件
+    emits('change', value);
+    // 修改通过v-model双向绑定的值
+    emits('input', value);
+    // 达到用户指定输入长度时，发出完成事件
+    if (String(value).length >= Number(props.maxlength)) {
+        emits('finish', value);
+    }
+}
+</script>
+
+<template>
+    <view class="ste-code-input-root" :style="[cmpRootStyle]">
+        <view class="ste-code-input-item" :style="[getItemStyle(index)]" v-for="(item, index) in cmpCodeLengthArray" :key="index">
+            <text class="ste-code-input-item-dot" v-if="formatter && cmpCodeArray.length > index">
+                {{ formatter }}
+            </text>
+            <text class="ste-code-input-item-text" v-else>
+                {{ cmpCodeArray[index] || '' }}
+            </text>
+            <view class="ste-code-input-item-line" v-if="mode === 'line'"></view>
+            <view v-if="isFocus && cmpCodeArray.length === index" :style="{ backgroundColor: fontColor }" class="ste-code-input-item-cursor"></view>
+        </view>
+        <input
+            v-if="!readOnly"
+            type="number"
+            :focus="focus"
+            :value="inputValue"
+            :maxlength="Number(maxlength)"
+            adjustPosition
+            class="ste-code-input-input"
+            :cursor-spacing="30"
+            @input="inputHandler"
+            :style="{
+                height: size + 'rpx',
+            }"
+            @focus="isFocus = true"
+            @blur="isFocus = false"
+        />
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.ste-code-input {
+    &-root {
+        display: inline-flex;
+        flex-direction: row;
+        position: relative;
+        overflow: hidden;
+    }
+
+    &-item {
+        // display: flex;
+        // justify-content: center;
+        // align-items: center;
+        // position: relative;
+        position: relative;
+
+        &-text {
+            font-size: var(--font-size);
+            color: var(--font-color);
+
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        &-dot {
+            display: inline-flex;
+            line-height: 1;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+
+            font-size: var(--font-size);
+            color: var(--font-color);
+        }
+
+        &-line {
+            position: absolute;
+            bottom: 0;
+            height: 4rpx;
+            border-radius: 40rpx;
+            width: var(--line-width);
+            background-color: var(--line-background-color);
+        }
+
+        &-cursor {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 2rpx;
+            height: 55%;
+            animation: 0.8s code-input-cursor-flicker infinite;
+        }
+    }
+
+    &-input {
+        position: absolute;
+        left: -100vw;
+        width: 200vw;
+        top: 0;
+        opacity: 0;
+        background-color: transparent;
+        text-align: left;
+    }
+
+    @keyframes code-input-cursor-flicker {
+        0% {
+            opacity: 0;
+        }
+
+        50% {
+            opacity: 1;
+        }
+
+        100% {
+            opacity: 0;
+        }
+    }
+}
+</style>

package/components/ste-date-picker/ATTRIBUTES.md

@@ -0,0 +1,25 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `value` | 绑定值 | `string / number` | - | - | - |
+| `showToolbar` | 是否显示顶部的操作栏 | `boolean` | `true` | - | - |
+| `title` | 顶部标题 | `string` | - | - | - |
+| `mode` | 展示格式 | `string` | `all` | `all`：年月日时分秒<br/>`datetime`：年月日时分<br/>`date`：年月日<br/>`year-month`：年月<br/>`month-day`：月日<br/>`time`：时分秒<br/>`hour-minute`：时分<br/>`minute-second`：分秒 | - |
+| `maxDate` | 可选的最大时间 | `number` | `后10年` | - | - |
+| `minDate` | 可选的最小时间 | `number` | `前10年` | - | - |
+| `filter` | 选项过滤函数 | `function` | - | - | - |
+| `formatter` | 选项格式化函数 | `function` | - | - | - |
+| `itemHeight` | 各列中，单个选项的高度 | `string / number` | `36` | - | - |
+| `cancelText` | 取消按钮的文字 | `string` | `取消` | - | - |
+| `confirmText` | 确认按钮的文字 | `string` | `确认` | - | - |
+| `cancelColor` | 取消按钮的颜色 | `string` | `#909193` | - | - |
+| `confirmColor` | 确认按钮的颜色 | `string` | `` | - | - |
+| `visibleItemCount` | 每列中可见选项的数量 | `string / number` | `5` | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `confirm` | 点击确定按钮，返回当前选择的值 | - | - |
+| `change` | 当选择值变化时触发 | - | - |
+| `cancel` | 点击取消按钮 | - | - |

package/components/ste-date-picker/README.md

@@ -0,0 +1,119 @@
+# DatePicker 时间选择器
+
+年月日时分秒选择器
+
+---$
+
+### 代码演示
+
+#### 基础使用
+
+-   通过`value`属性可设置默认选中的时间(支持时间戳、字符串格式)
+-   切换后的返回值为时间戳
+-   没有值或值非法时显示当前时间
+
+```html
+<ste-date-picker :value="datetime"></ste-date-picker>
+```
+
+#### 不显示操作栏
+
+```html
+<ste-date-picker :showToolbar="false" mode="date"></ste-date-picker>
+```
+
+#### 时间类型
+
+-   默认显示年、月、日、时、分、秒(`all`)
+-   年月日时分(`datetime`)，年月日(`date`)，年月(`year-month`)，月日(`month-day`)，时分秒(`time`)，时分(`hour-minute`)，分秒(`minute-second`)
+
+```html
+<ste-date-picker mode="datetime"></ste-date-picker>
+<ste-date-picker mode="date"></ste-date-picker>
+<ste-date-picker mode="year-month"></ste-date-picker>
+<ste-date-picker mode="month-day"></ste-date-picker>
+<ste-date-picker mode="time"></ste-date-picker>
+<ste-date-picker mode="hour-minute"></ste-date-picker>
+<ste-date-picker mode="minute-second"></ste-date-picker>
+```
+
+#### 最大值 & 最小值
+
+-   通过最大值最小值可设置选择的边界（支持时间戳、字符串格式）
+-   可精确到秒
+
+```html
+<ste-date-picker :minDate="new Date(2000, 11, 1, 1, 0, 30, 0).getTime()" :maxDate="new Date(2030, 11, 1, 1, 23, 59, 30).getTime()"></ste-date-picker>
+<ste-date-picker maxDate="2030-01-01 00:00:00" minDate="2022-01-01 00:00:00"></ste-date-picker>
+```
+
+#### 过滤
+
+-   可通过`filter`属性传递一个函数来对数据进行过滤
+
+```html
+<template>
+    <ste-date-picker :filter="filter" mode="date" title="过滤"></ste-date-picker>
+</template>
+
+<script lang="ts" setup>
+    import type { CloumnType } from '@/uni_modules/stellar-ui-plus/components/ste-date-picker/types';
+    function filter(mode: CloumnType, options: any[]) {
+        if (mode === 'year') {
+            return options.filter(option => option % 5 === 0);
+        }
+        if (mode === 'month') {
+            return options.filter(option => option % 4 === 0);
+        }
+        if (mode === 'day') {
+            return options.filter(option => option % 2 === 0);
+        }
+
+        return options;
+    }
+</script>
+```
+
+#### 格式化
+
+```html
+<template>
+    <ste-date-picker :formatter="formatter" mode="date" title="格式化"></ste-date-picker>
+</template>
+<script lang="ts" setup>
+    import type { CloumnType } from '@/uni_modules/stellar-ui-plus/components/ste-date-picker/types';
+    function formatter(type: CloumnType, value: any) {
+        if (type === 'year') {
+            return `${value}年`;
+        }
+        if (type === 'month') {
+            return `${value}月`;
+        }
+        if (type === 'day') {
+            return `${value}日`;
+        }
+        return value;
+    }
+</script>
+```
+
+#### 选项高度
+
+```html
+<ste-date-picker mode="date" itemHeight="50"></ste-date-picker>
+```
+
+#### 每列可见数量
+
+```html
+<ste-date-picker mode="date" :visibleItemCount="10"></ste-date-picker>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+---$
+{{fuyuwei}}

package/components/ste-date-picker/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "表单组件",
+    "title": "DatePicker 时间选择器",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/datetime.png?1722499736018"
+}

package/components/ste-date-picker/props.ts

@@ -0,0 +1,62 @@
+import type { PropType } from 'vue'
+
+import type { CloumnType } from './types'
+
+export default {
+  showToolbar: {
+    type: Boolean,
+    default: true,
+  },
+  value: {
+    type: [String, Number],
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  mode: {
+    type: String,
+    default: 'all',
+  },
+  maxDate: {
+    type: [Number, String, Date],
+    default: new Date(new Date().getFullYear() + 10, 11, 31, 23, 59, 59).getTime(),
+  },
+  minDate: {
+    type: [Number, String, Date],
+    default: new Date(new Date().getFullYear() - 10, 0, 1).getTime(),
+  },
+  filter: {
+    type: Function as PropType<(type: CloumnType, values: string[]) => string[]> | null,
+    default: null,
+  },
+  formatter: {
+    type: Function as PropType<(type: CloumnType, value: string) => string> | null,
+    default: null,
+  },
+  itemHeight: {
+    type: [String, Number],
+    default: 43,
+  },
+  cancelText: {
+    type: String,
+    default: '取消',
+  },
+  confirmText: {
+    type: String,
+    default: '确认',
+  },
+  cancelColor: {
+    type: String,
+    default: '#969799',
+  },
+  confirmColor: {
+    type: String,
+    default: '',
+  },
+  visibleItemCount: {
+    type: [String, Number],
+    default: 5,
+  },
+}

package/components/ste-date-picker/ste-date-picker.easycom.json

@@ -0,0 +1,137 @@
+{
+    "name": "ste-date-picker",
+    "description": "此选择器用于时间日期",
+    "example": "<ste-date-picker />",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=date-picker",
+    "attributes": [
+        {
+            "name": "value",
+            "description": "绑定值",
+            "type": "string | number"
+        },
+        {
+            "name": "showToolbar",
+            "description": "是否显示顶部的操作栏",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "title",
+            "description": "顶部标题",
+            "type": "string"
+        },
+        {
+            "name": "mode",
+            "description": "展示格式",
+            "type": "string",
+            "values": [
+                {
+                    "name": "all",
+                    "description": "年月日时分秒"
+                },
+                {
+                    "name": "datetime",
+                    "description": "年月日时分"
+                },
+                {
+                    "name": "date",
+                    "description": "年月日"
+                },
+                {
+                    "name": "year-month",
+                    "description": "年月"
+                },
+                {
+                    "name": "month-day",
+                    "description": "月日"
+                },
+                {
+                    "name": "time",
+                    "description": "时分秒"
+                },
+                {
+                    "name": "hour-minute",
+                    "description": "时分"
+                },
+                {
+                    "name": "minute-second",
+                    "description": "分秒"
+                }
+            ],
+            "default": "all"
+        },
+        {
+            "name": "maxDate",
+            "description": "可选的最大时间",
+            "type": "number",
+            "default": "后10年"
+        },
+        {
+            "name": "minDate",
+            "description": "可选的最小时间",
+            "type": "number",
+            "default": "前10年"
+        },
+        {
+            "name": "filter",
+            "description": "选项过滤函数",
+            "type": "function"
+        },
+        {
+            "name": "formatter",
+            "description": "选项格式化函数",
+            "type": "function"
+        },
+        {
+            "name": "itemHeight",
+            "description": "各列中，单个选项的高度",
+            "type": "string | number",
+            "default": 36
+        },
+        {
+            "name": "cancelText",
+            "description": "取消按钮的文字",
+            "type": "string",
+            "default": "取消"
+        },
+        {
+            "name": "confirmText",
+            "description": "确认按钮的文字",
+            "type": "string",
+            "default": "确认"
+        },
+        {
+            "name": "cancelColor",
+            "description": "取消按钮的颜色",
+            "type": "string",
+            "default": "#909193"
+        },
+        {
+            "name": "confirmColor",
+            "description": "确认按钮的颜色",
+            "type": "string",
+            "default": ""
+        },
+        {
+            "name": "visibleItemCount",
+            "description": "每列中可见选项的数量",
+            "type": "string | number",
+            "default": 5
+        },
+        {
+            "name": "[event]confirm",
+            "description": "点击确定按钮，返回当前选择的值",
+            "type": "() => void"
+        },
+        {
+            "name": "[event]change",
+            "description": "当选择值变化时触发",
+            "type": "() => void"
+        },
+        {
+            "name": "[event]cancel",
+            "description": "点击取消按钮",
+            "type": "() => void"
+        }
+    ]
+}