stellar-ui-plus 1.16.18

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

@@ -0,0 +1,282 @@
+{
+    "name": "ste-input",
+    "description": "输入框组件。",
+    "example": "<ste-input />",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=input",
+    "attributes": [
+        {
+            "name": "value",
+            "description": "初始内容，支持双向绑定",
+            "type": "number | string"
+        },
+        {
+            "name": "type",
+            "description": "输入框类型",
+            "type": "string",
+            "values": [
+                {
+                    "name": "text",
+                    "description": "纯文本输入"
+                },
+                {
+                    "name": "textarea",
+                    "description": "文本域"
+                },
+                {
+                    "name": "tel",
+                    "description": "电话输入"
+                },
+                {
+                    "name": "number",
+                    "description": "数字输入"
+                },
+                {
+                    "name": "idcard",
+                    "description": "身份证输入键盘"
+                },
+                {
+                    "name": "digit",
+                    "description": "小数点的数字键盘"
+                },
+                {
+                    "name": "password",
+                    "description": "密码类型"
+                },
+                {
+                    "name": "nickname",
+                    "description": "昵称输入(微信小程序)"
+                },
+                {
+                    "name": "numberpad",
+                    "description": "仅支付宝小程序"
+                },
+                {
+                    "name": "digitpad",
+                    "description": "仅支付宝小程序"
+                },
+                {
+                    "name": "idcardpad",
+                    "description": "仅支付宝小程序"
+                }
+            ]
+        },
+        {
+            "name": "placeholder",
+            "description": "占位符",
+            "type": "string"
+        },
+        {
+            "name": "placeholderStyle",
+            "description": "指定placeholder的样式",
+            "type": "string | object"
+        },
+        {
+            "name": "placeholderClass",
+            "description": "指定placeholder的类",
+            "type": "string"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "clearable",
+            "description": "是否有清空按钮",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "maxlength",
+            "description": "最大长度",
+            "type": "number"
+        },
+        {
+            "name": "showWordLimit",
+            "description": "是否显示字数统计",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "confirmType",
+            "description": "设置右下角按钮的文字",
+            "type": "string",
+            "values": [
+                {
+                    "name": "send",
+                    "description": "右下角按钮为'发送'"
+                },
+                {
+                    "name": "search",
+                    "description": "右下角按钮为'搜索'"
+                },
+                {
+                    "name": "next",
+                    "description": "右下角按钮为'下一个'"
+                },
+                {
+                    "name": "go",
+                    "description": "右下角按钮为'前往'"
+                },
+                {
+                    "name": "done",
+                    "description": "右下角按钮为'完成'"
+                }
+            ]
+        },
+        {
+            "name": "focus",
+            "description": "是否聚焦，支持双向绑定",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "inputAlign",
+            "description": "对齐方式",
+            "type": "string",
+            "values": [
+                {
+                    "name": "left",
+                    "description": "向左对齐"
+                },
+                {
+                    "name": "center",
+                    "description": "居中对齐"
+                },
+                {
+                    "name": "right",
+                    "description": "向右对齐"
+                }
+            ]
+        },
+        {
+            "name": "fontSize",
+            "description": "输入框字体大小，单位rpx",
+            "type": "number | string"
+        },
+        {
+            "name": "fontColor",
+            "description": "输入框字体颜色",
+            "type": "string"
+        },
+        {
+            "name": "readonly",
+            "description": "是否只读，与禁用不同，只读不会置灰",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "shape",
+            "description": "输入框形状",
+            "type": "string",
+            "values": [
+                {
+                    "name": "square",
+                    "description": "方形"
+                },
+                {
+                    "name": "circle",
+                    "description": "圆形"
+                },
+                {
+                    "name": "line",
+                    "description": "线形"
+                }
+            ]
+        },
+        {
+            "name": "border",
+            "description": "是否有边框",
+            "type": "boolean",
+            "default": "true"
+        },
+        {
+            "name": "borderColor",
+            "description": "边框颜色",
+            "type": "string"
+        },
+        {
+            "name": "background",
+            "description": "输入框背景色",
+            "type": "string"
+        },
+        {
+            "name": "rootClass",
+            "description": "自定义输入框类名",
+            "type": "string"
+        },
+        {
+            "name": "cursorSpacing",
+            "description": "指定光标与键盘的距离",
+            "type": "number"
+        },
+        {
+            "name": "allowSpace",
+            "description": "是否允许输入空格",
+            "type": "boolean",
+            "default": "true"
+        },
+        {
+            "name": "cursor",
+            "description": "指定focus时光标的位置",
+            "type": "number",
+            "default": "0"
+        },
+        {
+            "name": "password",
+            "description": "是否是密码类型,H5和App写此属性时，type失效",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "[event]blur",
+            "description": "输入框失去焦点事件",
+            "type": "(value: string | number) => void",
+            "params": [
+                {
+                    "name": "value",
+                    "description": "输入框的值"
+                }
+            ]
+        },
+        {
+            "name": "[event]focus",
+            "description": "聚焦事件",
+            "type": "(value: string | number) => void",
+            "params": [
+                {
+                    "name": "value",
+                    "description": "输入框的值"
+                }
+            ]
+        },
+        {
+            "name": "[event]confirm",
+            "description": "输入框输入键盘右下角点击事件",
+            "type": "(value: string | number) => void",
+            "params": [
+                {
+                    "name": "value",
+                    "description": "输入框的值"
+                }
+            ]
+        },
+        {
+            "name": "[event]clear",
+            "description": "清除输入框事件",
+            "type": "() => void"
+        },
+        {
+            "name": "[event]input",
+            "description": "输入事件",
+            "type": "(value: string | number) => void",
+            "params": [
+                {
+                    "name": "value",
+                    "description": "输入框的值"
+                }
+            ]
+        }
+    ]
+}

package/components/ste-input/ste-input.scss

@@ -0,0 +1,124 @@
+.ste-input-root {
+    box-sizing: border-box;
+
+    border-width: 1rpx;
+    border-style: solid;
+    border-color: var(--input-border-color);
+    background-color: #ffffff;
+    .content {
+        display: flex;
+        align-items: center;
+        padding: 0 24rpx;
+        .suffix-box,
+        .prefix-box {
+            display: flex;
+            flex-direction: column;
+            flex-shrink: 0;
+            flex-grow: 0;
+            flex-basis: auto;
+            align-items: stretch;
+
+            font-size: var(--input-font-size);
+        }
+        .input-box {
+            position: relative;
+            width: 100%;
+
+            .clear-icon {
+                width: 48rpx;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                position: absolute;
+                right: 8rpx;
+                top: 50%;
+                z-index: 2;
+                transform: translateY(-50%);
+            }
+
+            .ste-input-input {
+                outline: none;
+                border: none;
+                padding: 0;
+                margin: 0;
+                height: calc(var(--input-font-size) * 2.8);
+                width: 100%;
+
+                font-size: var(--input-font-size);
+                color: var(--input-font-color);
+
+                text-align: var(--input-text-align);
+
+                background-color: transparent;
+
+                // letter-spacing: 10rpx;
+
+                &.textarea {
+                    height: 160rpx;
+                }
+            }
+
+            .count-text {
+                position: absolute;
+                bottom: 0;
+                right: 0;
+                font-size: var(--font-size-24, 24rpx);
+                color: #bbbbbb;
+            }
+        }
+    }
+
+    &.ste-input-readonly {
+        cursor: not-allowed;
+        .ste-input-input {
+            cursor: not-allowed;
+        }
+    }
+    &.ste-input-disabled {
+        cursor: not-allowed;
+        .ste-input-input {
+            cursor: not-allowed;
+            color: #cccccc !important;
+        }
+    }
+
+    &.ste-input-line {
+        background-color: transparent;
+        border: none;
+        border-color: transparent;
+
+        .content {
+            padding: 0 0;
+        }
+
+        .line {
+            border-bottom: 2rpx solid var(--input-line-color);
+        }
+    }
+
+    &.ste-search-input {
+        height: 100%;
+
+        // #ifdef MP-ALIPAY
+        background-color: rgba(0, 0, 0, 0);
+        // #endif
+
+        .content {
+            padding: 0;
+            height: 100%;
+        }
+    }
+
+    &.textarea-type {
+        height: 100%;
+        .content {
+            padding: 20rpx 24rpx;
+            height: 100%;
+
+            .input-box {
+                height: 100%;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,221 @@
+<script lang="ts" setup>
+import { computed, ref, watch, nextTick, type CSSProperties, defineOptions } from 'vue';
+
+import utils from '../../utils/utils';
+import propsData, { type InputEmits } from './props';
+import type { BaseEvent } from '../../types/event';
+import type { InputType } from '@uni-helper/uni-app-types';
+const componentName = `ste-input`;
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+
+const props = defineProps(propsData);
+const emits = defineEmits<InputEmits>();
+
+const focused = ref(props.focus);
+const dataValue = ref<string>();
+const tmpDataValue = ref<string>();
+
+const cmpRootClass = computed(() => {
+    let classStr = '';
+    if (props.disabled) {
+        classStr += 'ste-input-disabled ';
+    }
+    if (props.readonly) {
+        classStr += 'ste-input-readonly ';
+    }
+
+    classStr += `ste-input-${props.shape} `;
+
+    if (props.rootClass) {
+        classStr += `${props.rootClass} `;
+    }
+
+    if (props.type == 'textarea') {
+        classStr += 'textarea-type ';
+    }
+
+    return classStr;
+});
+
+const cmpRootStyle = computed(() => {
+    let style = utils.bg2style(props.background) as CSSProperties;
+
+    switch (props.shape) {
+        case 'circle':
+            style.borderRadius = utils.addUnit(40);
+            break;
+        case 'square':
+            style.borderRadius = utils.addUnit(16);
+            break;
+        default:
+            break;
+    }
+    return style;
+});
+
+const cmpRootCssVar = computed(() => {
+    return {
+        '--input-font-size': `var(--font-size-${props.fontSize},${utils.formatPx(props.fontSize)})`,
+        '--input-font-color': props.fontColor,
+        '--input-text-align': props.inputAlign,
+        '--input-line-color': props.borderColor || '#eeeeee',
+        '--input-border-color': props.border ? props.borderColor : 'transparent',
+    };
+});
+
+const cmpShowClear = computed(() => {
+    return !props.disabled && !props.readonly && props.clearable && dataValue.value && focused.value;
+});
+
+watch(
+    () => [props.value, props.modelValue],
+    vals => {
+        const val = vals[0] || vals[1];
+        dataValue.value = val;
+        tmpDataValue.value = val;
+    },
+    {
+        immediate: true,
+    }
+);
+
+watch(
+    () => props.focus,
+    val => {
+        setTimeout(() => {
+            focused.value = val;
+        }, 50);
+    }
+);
+
+function onInput(e: Event) {
+    const baseEvent = e as unknown as BaseEvent;
+    if (!props.disabled && !props.readonly) {
+        if (!props.allowSpace) {
+            baseEvent.detail.value = baseEvent.detail.value.replace(/\s*/g, '');
+        }
+
+        if (props.maxlength > 0) {
+            baseEvent.detail.value = baseEvent.detail.value.substring(0, props.maxlength);
+        }
+
+        nextTick(() => {
+            dataValue.value = baseEvent.detail.value;
+            tmpDataValue.value = dataValue.value;
+            emits('input', dataValue.value);
+            emits('update:modelValue', dataValue.value);
+        });
+    }
+}
+
+function onClear() {
+    if (props.disabled && !props.readonly) return;
+
+    dataValue.value = '';
+    emits('input', dataValue.value);
+    emits('update:modelValue', dataValue.value);
+    emits('clear');
+}
+
+function onFocus() {
+    if (props.disabled && !props.readonly) return;
+    focused.value = true;
+    emits('update:focus', true);
+    emits('focus', dataValue.value);
+}
+
+function onBlur() {
+    setTimeout(() => {
+        emits('update:focus', false);
+        focused.value = false;
+        emits('blur');
+    }, 200);
+}
+
+function onConfirm() {
+    emits('confirm', dataValue.value);
+}
+
+function inputClick() {
+    onFocus();
+}
+</script>
+
+<template>
+    <view class="ste-input-root" :class="cmpRootClass" :style="[cmpRootStyle, cmpRootCssVar]" @click="inputClick">
+        <view class="content">
+            <view class="prefix-box">
+                <slot name="prefix"></slot>
+            </view>
+            <view class="input-box">
+                <template v-if="type == 'textarea'">
+                    <textarea
+                        class="ste-input-input textarea"
+                        :type="type"
+                        :focus="focus"
+                        v-model="dataValue"
+                        :disabled="disabled || readonly"
+                        :placeholder="placeholder"
+                        :placeholder-style="placeholderStyle"
+                        :placeholder-class="placeholderClass"
+                        :confirm-type="confirmType"
+                        :cursor-spacing="cursorSpacing"
+                        @input="onInput"
+                        @focus="onFocus"
+                        @blur="onBlur"
+                        @confirm="onConfirm"
+                    />
+                    <!-- #ifdef H5 || MP-WEIXIN || APP -->
+                    <text
+                        class="count-text"
+                        :style="{
+                            'background-color': 'transparent',
+                        }"
+                        v-if="showWordLimit && maxlength > 0"
+                    >
+                        {{ String(tmpDataValue).length }}/{{ maxlength }}
+                    </text>
+                    <!-- #endif -->
+                </template>
+                <template v-else>
+                    <input
+                        class="ste-input-input"
+                        :type="type as InputType"
+                        :focus="focused"
+                        v-model="dataValue"
+                        :disabled="disabled || readonly"
+                        :placeholder="placeholder"
+                        :placeholder-style="placeholderStyle"
+                        :placeholder-class="placeholderClass"
+                        :confirm-type="confirmType"
+                        @input="onInput"
+                        @focus="onFocus"
+                        @blur="onBlur"
+                        @confirm="onConfirm"
+                        :style="[{ width: cmpShowClear ? 'calc(100% - 48rpx)' : 'calc(100% - 8rpx)' }]"
+                        :cursor-spacing="cursorSpacing"
+                        :cursor="cursor"
+                        :password="password"
+                        @click.stop="() => {}"
+                    />
+                    <view v-if="cmpShowClear" class="clear-icon" @click="onClear">
+                        <ste-icon code="&#xe694;" color="#bbbbbb" size="34" />
+                    </view>
+                </template>
+            </view>
+            <view class="suffix-box">
+                <slot name="suffix"></slot>
+            </view>
+        </view>
+        <view class="line" v-if="shape == 'line'" />
+    </view>
+</template>
+
+<style scoped lang="scss">
+@import './ste-input.scss';
+</style>

package/components/ste-loading/ATTRIBUTES.md

@@ -0,0 +1,11 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `color` | 图标颜色 | `String` | `#999999` | - | - |
+| `textColor` | 提示文本颜色，默认和图标颜色同步 | `String` | `` | - | - |
+| `textSize` | 文本大小，单位rpx | `Number` | `28` | - | - |
+| `type` | 类型 | `Number` | `1` | `1`：逐渐减淡的颜色为主色的透明度变化 透明度以10%的差距逐渐递减<br/>`2`：动态转圈展示 | - |
+| `size` | 图标大小，单位rpx | `Number` | `60` | - | - |
+| `vertical` | 是否垂直排列图标和文字内容 | `Boolean` | `false` | - | - |
+
+