stellar-ui-plus 1.16.18

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

@@ -0,0 +1,232 @@
+{
+    "name": "ste-search",
+    "description": "搜索",
+    "example": "<ste-search />",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=search",
+    "attributes": [
+        {
+            "name": "type",
+            "description": "组件类型",
+            "type": "string",
+            "values": [
+                {
+                    "name": "default",
+                    "description": "正常搜索"
+                },
+                {
+                    "name": "nav",
+                    "description": "导航栏"
+                }
+            ],
+            "default": "default"
+        },
+        {
+            "name": "modelValue",
+            "description": "当前值（支持v-model双向绑定）",
+            "type": "string",
+            "default": ""
+        },
+        {
+            "name": "placeholder",
+            "description": "占位提示符",
+            "type": "string",
+            "default": ""
+        },
+        {
+            "name": "hotWords",
+            "description": "热词列表",
+            "type": "string[]",
+            "default": "[]"
+        },
+        {
+            "name": "interval",
+            "description": "热词列表自动切换时间间隔",
+            "type": "number",
+            "default": 3000
+        },
+        {
+            "name": "autoplay",
+            "description": "热词列表是否自动切换",
+            "type": "boolean",
+            "default": "true"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用状态",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "hiddenLine",
+            "description": "是否隐藏分割线",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "hiddenBtn",
+            "description": "是否隐藏搜索按钮",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "btnText",
+            "description": "搜索按钮文字",
+            "type": "string",
+            "default": "搜索"
+        },
+        {
+            "name": "hiddenInput",
+            "description": "是否隐藏输入框",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "clearable",
+            "description": "是否可清空",
+            "type": "boolean",
+            "default": "true"
+        },
+        {
+            "name": "borderColor",
+            "description": "边框颜色",
+            "type": "string",
+            "default": "#dddddd"
+        },
+        {
+            "name": "background",
+            "description": "背景",
+            "type": "string",
+            "default": "#ffffff"
+        },
+        {
+            "name": "prefixIconColor",
+            "description": "前置图标颜色",
+            "type": "string",
+            "default": "#bbbbbb"
+        },
+        {
+            "name": "placeholderColor",
+            "description": "占位符字体颜色",
+            "type": "string",
+            "default": "#bbbbbb"
+        },
+        {
+            "name": "inputTextColor",
+            "description": "输入框文字颜色",
+            "type": "string",
+            "default": "#000000"
+        },
+        {
+            "name": "clearIconColor",
+            "description": "清除图标颜色",
+            "type": "string",
+            "default": "#bbbbbb"
+        },
+        {
+            "name": "btnTextColor",
+            "description": "搜索按钮文字颜色",
+            "type": "string",
+            "default": "#0090FF"
+        },
+        {
+            "name": "btnBackground",
+            "description": "搜索按钮背景",
+            "type": "string"
+        },
+        {
+            "name": "height",
+            "description": "高度，单位rpx",
+            "type": "number",
+            "default": 64
+        },
+        {
+            "name": "radius",
+            "description": "圆角弧度，单位rpx",
+            "type": "number",
+            "default": 32
+        },
+        {
+            "name": "focus",
+            "description": "是否聚焦(双向绑定)",
+            "type": "boolean",
+            "default": "false"
+        },
+        {
+            "name": "suggestionsList",
+            "description": "搜索建议对应的数据",
+            "type": "array",
+            "default": "[]"
+        },
+        {
+            "name": "[event]input",
+            "description": "输入事件",
+            "type": "(value: string) => void",
+            "params": [
+                {
+                    "name": "value",
+                    "description": "输入框的值"
+                }
+            ]
+        },
+        {
+            "name": "[event]focus",
+            "description": "聚焦焦点事件",
+            "type": "(value: string) => void",
+            "params": [
+                {
+                    "name": "value",
+                    "description": "输入框的值"
+                }
+            ]
+        },
+        {
+            "name": "[event]blur",
+            "description": "失去焦点事件",
+            "type": "(value: string) => void",
+            "params": [
+                {
+                    "name": "value",
+                    "description": "输入框的值"
+                }
+            ]
+        },
+        {
+            "name": "[event]search",
+            "description": "确定搜索时触发",
+            "type": "(value: string) => void",
+            "params": [
+                {
+                    "name": "value",
+                    "description": "输入框的值"
+                }
+            ]
+        },
+        {
+            "name": "[event]clear",
+            "description": "点击清除按钮后触发",
+            "type": "() => void"
+        },
+        {
+            "name": "[event]click",
+            "description": "点击事件",
+            "type": "(value: string) => void",
+            "params": [
+                {
+                    "name": "value",
+                    "description": "输入框的值"
+                }
+            ]
+        },
+        {
+            "name": "[event]selectSuggestion",
+            "description": "点击搜索建议触发",
+            "type": "(item: object) => void",
+            "params": [
+                {
+                    "name": "item",
+                    "description": "热词列表对象"
+                }
+            ]
+        }
+    ]
+}

package/components/ste-search/ste-search.vue

@@ -0,0 +1,379 @@
+<script setup lang="ts">
+import { computed, watch, defineOptions, nextTick } from 'vue';
+import type { SwiperOnChangeEvent } from '@uni-helper/uni-app-types';
+import utils from '../../utils/utils';
+import type { SearchSuggestion, Obj } from '../../types';
+import useData from './useData';
+import propsData from './props';
+
+defineOptions({
+    name: 'ste-search',
+    options: {
+        virtualHost: true,
+    },
+});
+
+const props = defineProps(propsData);
+const { dataValue, setDataValue, switchIndex, setSwitchIndex, cursorNumber, setCursorNumber, setShowSuggestionsBox, showSuggestionsBox } = useData();
+
+const cmpRootStyle = computed(() => {
+    const style: Obj = {
+        '--search-root-height': utils.formatPx(props.height),
+        '--search-root-radius': utils.formatPx(props.radius),
+        '--search-btn-text-color': props.btnTextColor,
+        '--search-placeholder-color': props.placeholderColor,
+        '--search-input-color': props.inputTextColor,
+        '--search-border-color': props.borderColor,
+        background: props.background,
+    };
+    if (!props.hiddenBtn || !props.hiddenInput) {
+        style['padding'] = `0 ${utils.formatPx(8)} 0 ${utils.formatPx(16)}`;
+    }
+    return style;
+});
+
+const cmpPlaceholder = computed(() => (props.hotWords?.length ? '' : props.placeholder));
+const cmpShowSwitch = computed(() => props.hotWords?.length && !dataValue.value);
+const cmpbtnBackground = computed(() => ({ background: props.btnBackground }));
+const cmpHiddenLine = computed(() => props.hiddenLine || props.hiddenBtn);
+
+watch(() => props.modelValue, setDataValue, { immediate: true });
+watch(
+    () => props.hotWords,
+    () => setSwitchIndex(0)
+);
+
+const emits = defineEmits<{
+    (e: 'input', value: string): void;
+    (e: 'update:modelValue', value: string): void;
+    (e: 'focus', value: string): void;
+    (e: 'update:focus', bool: boolean): void;
+    (e: 'blur', value: string): void;
+    (e: 'search', value: string): void;
+    (e: 'click', value: string): void;
+    (e: 'clear'): void;
+    (e: 'selectSuggestion', item: SearchSuggestion): void;
+}>();
+
+const onInput = () => {
+    if (props.disabled) return;
+    nextTick(() => {
+        emits('input', dataValue.value);
+        emits('update:modelValue', dataValue.value);
+    });
+};
+const onSearch = () => {
+    if (props.disabled) return;
+    let searchValue = dataValue.value;
+    if (!searchValue && props.hotWords.length) {
+        searchValue = props.hotWords[switchIndex.value];
+    }
+    emits('search', searchValue);
+};
+const onFocus = () => {
+    if (props.disabled) return;
+    emits('focus', dataValue.value);
+    emits('update:focus', true);
+    setShowSuggestionsBox(true);
+};
+const onBlur = () => {
+    if (props.disabled) return;
+    emits('blur', dataValue.value);
+    emits('update:focus', false);
+};
+const onClear = () => {
+    if (props.disabled) return;
+    setDataValue('');
+    emits('input', '');
+    emits('update:modelValue', '');
+    emits('clear');
+};
+const onSwitchChange = (e: SwiperOnChangeEvent) => {
+    setSwitchIndex(e.detail.current);
+};
+const onClick = () => {
+    if (props.disabled) return;
+    let searchValue = dataValue.value;
+    if (!searchValue && props.hotWords.length) {
+        searchValue = props.hotWords[switchIndex.value];
+    }
+    emits('click', searchValue);
+};
+
+const handleSuggestionClick = (item: SearchSuggestion) => {
+    setDataValue(item.label);
+    emits('input', item.label);
+    emits('selectSuggestion', item);
+    setShowSuggestionsBox(false);
+
+    setTimeout(() => {
+        setCursorNumber(item.label.length);
+    }, 50);
+};
+</script>
+<template>
+    <view class="ste-search-root" :class="{ disabled: props.disabled }" :style="[cmpRootStyle]" @click="onClick">
+        <view class="content">
+            <view class="icon-box">
+                <ste-icon code="&#xe695;" :color="prefixIconColor" size="44" />
+            </view>
+            <view class="input-box" v-if="!hiddenInput">
+                <ste-input
+                    rootClass="ste-search-input"
+                    placeholder-class="search-input-placeholder"
+                    :disabled="props.disabled"
+                    :placeholder="cmpPlaceholder"
+                    v-model="dataValue"
+                    @input="onInput"
+                    @confirm="onSearch"
+                    @focus="onFocus"
+                    @blur="onBlur"
+                    @clear="onClear"
+                    :focus="focus"
+                    :clearable="clearable"
+                    :fontColor="inputTextColor"
+                    background="transparent"
+                    :cursor="cursorNumber"
+                />
+                <swiper v-if="cmpShowSwitch" class="placeholder-list" :current="switchIndex" :autoplay="autoplay" :interval="interval" circular vertical @change="onSwitchChange">
+                    <swiper-item class="placeholder-item" v-for="(item, i) in hotWords" :key="i">
+                        {{ item }}
+                    </swiper-item>
+                </swiper>
+            </view>
+            <view v-if="!cmpHiddenLine" class="secrch-line" :class="{ disabled: props.disabled }" />
+            <view v-if="!hiddenBtn" class="search-button" :class="{ disabled: props.disabled }" :style="[cmpbtnBackground]" @click="onSearch">
+                {{ btnText }}
+            </view>
+        </view>
+        <view class="nav-box" v-if="type === 'nav'" />
+        <!-- 输入建议 -->
+        <view v-if="suggestionList.length > 0" class="suggestions-box" :class="showSuggestionsBox == null ? 'asdf' : showSuggestionsBox ? 'show' : 'hide'">
+            <scroll-view scroll-y class="scroll-box">
+                <view class="item" @click="handleSuggestionClick(item)" v-for="(item, key) in suggestionList" :key="key">
+                    {{ item.label }}
+                </view>
+            </scroll-view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.ste-search-root {
+    width: 100%;
+    height: var(--search-root-height);
+    background-color: #fff;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    border-radius: var(--search-root-radius);
+    border: 1rpx solid var(--search-border-color);
+    position: relative;
+
+    & {
+        box-sizing: border-box;
+    }
+
+    .content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        .icon-box {
+            width: 28rpx;
+            height: 28rpx;
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .image {
+                width: 100%;
+                height: 100%;
+            }
+
+            & + .input-box {
+                margin-left: 16rpx;
+            }
+        }
+
+        .input-box {
+            position: relative;
+            flex: 1;
+            height: 100%;
+
+            .ste-search-input {
+                height: 100%;
+                border-style: none;
+                font-size: var(--font-size-28, 28rpx);
+                color: var(--search-input-color);
+                // #ifdef MP-ALIPAY
+                background-color: rgba(0, 0, 0, 0);
+                // #endif
+
+                .content {
+                    padding: 0;
+                    height: 100%;
+                }
+            }
+
+            .search-input-placeholder {
+                color: var(--search-placeholder-color);
+                font-family:
+                    Alibaba PuHuiTi 2,
+                    Alibaba PuHuiTi 20;
+                font-weight: normal;
+            }
+
+            .placeholder-list {
+                width: 100%;
+                height: 100%;
+                pointer-events: none;
+                position: absolute;
+                top: 0;
+                left: 0;
+
+                .placeholder-item {
+                    font-size: var(--font-size-28, 28rpx);
+                    color: var(--search-placeholder-color);
+                    font-family:
+                        Alibaba PuHuiTi 2,
+                        Alibaba PuHuiTi 20;
+                    font-weight: normal;
+                    display: flex;
+                    align-items: center;
+                }
+            }
+
+            .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%);
+            }
+        }
+
+        .secrch-line {
+            margin-left: 16rpx;
+            width: 2rpx;
+            flex-shrink: 0;
+            height: 24rpx;
+            background-color: var(--search-btn-text-color);
+
+            &.disabled {
+                background: #bbbbbb;
+            }
+        }
+
+        .search-button {
+            padding: 0 16rpx;
+            height: 40rpx;
+            font-size: var(--font-size-28, 28rpx);
+            line-height: 40rpx;
+            flex-shrink: 0;
+            text-align: center;
+            font-family:
+                Alibaba PuHuiTi 2,
+                Alibaba PuHuiTi 20;
+            font-weight: normal;
+            color: var(--search-btn-text-color);
+            border-radius: 20rpx;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+
+            &.disabled {
+                color: #bbbbbb;
+            }
+        }
+    }
+
+    .nav-box {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 2;
+    }
+
+    .suggestions-box {
+        z-index: 999;
+        position: absolute;
+        left: 0;
+        top: 100%;
+        overflow-y: hidden;
+        opacity: 0;
+        max-height: 0;
+
+        margin: 20rpx 0;
+        width: 100%;
+
+        background-color: #ffffff;
+        box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
+        border-radius: 8rpx;
+        padding: 16rpx 0;
+
+        .scroll-box {
+            width: 100%;
+            max-height: calc(400rpx - 32rpx);
+        }
+
+        .item {
+            padding-left: 16rpx;
+            width: 100%;
+            height: 60rpx;
+            display: flex;
+            align-items: center;
+            font-size: var(--font-size-28, 28rpx);
+            color: #bbbbbb;
+
+            &:focus {
+                background-color: red;
+            }
+        }
+
+        &.show {
+            opacity: 1;
+            max-height: 400rpx;
+            animation: suggestions-show 0.2s ease-out;
+        }
+
+        &.hide {
+            animation: suggestions-hide 0.2s ease-out;
+        }
+    }
+
+    @keyframes suggestions-show {
+        0% {
+            opacity: 0;
+            max-height: 0;
+        }
+
+        100% {
+            opacity: 1;
+            max-height: 400rpx;
+        }
+    }
+
+    @keyframes suggestions-hide {
+        0% {
+            opacity: 1;
+            max-height: 400rpx;
+        }
+
+        100% {
+            opacity: 0;
+            max-height: 0;
+        }
+    }
+}
+</style>

package/components/ste-search/useData.ts

@@ -0,0 +1,34 @@
+import { ref } from 'vue'
+
+export default function useData() {
+  const dataValue = ref('')
+  const setDataValue = (value: string) => {
+    dataValue.value = value
+  }
+
+  const switchIndex = ref(0)
+  const setSwitchIndex = (index: number) => {
+    switchIndex.value = index
+  }
+
+  const cursorNumber = ref(0)
+  const setCursorNumber = (num: number) => {
+    cursorNumber.value = num
+  }
+
+  const showSuggestionsBox = ref<null | boolean>(null)
+  const setShowSuggestionsBox = (value: boolean) => {
+    showSuggestionsBox.value = value
+  }
+
+  return {
+    dataValue,
+    setDataValue,
+    switchIndex,
+    setSwitchIndex,
+    cursorNumber,
+    setCursorNumber,
+    showSuggestionsBox,
+    setShowSuggestionsBox,
+  }
+}

package/components/ste-select/ATTRIBUTES.md

@@ -0,0 +1,39 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `modelValue` | 绑定的值，支持v-model双向绑定 | `number / string / Array<number / string>` | - | - | - |
+| `list` | 选项数据 | `SelectOption[] / SelectOption[][]` | `[]` | - | - |
+| `mode` | 选择模式 | `string` | `default` | `default`：默认模式<br/>`filterable`：可搜索选择器<br/>`tree`：树形选择器<br/>`date`：日期时间选择器模式：日期选择器（该模式下list属性无效）<br/>`datetime`：日期时间选择器模式：日期时间选择器（该模式下list属性无效）<br/>`time`：日期时间选择器模式：时间选择器（该模式下list属性无效）<br/>`month`：日期时间选择器模式：年月选择器（该模式下list属性无效）<br/>`minute`：日期时间选择器模式：时分选择器（该模式下list属性无效） | - |
+| `minDate` | 最小日期,mode为日期时间选择器时生效 | `number / string / Date` | - | - | - |
+| `maxDate` | 最大日期,mode为日期时间选择器时生效 | `number / string / Date` | - | - | - |
+| `dateUnit` | 选项是否显示时间单位,mode为日期时间选择器时生效 | `boolean` | - | - | - |
+| `width` | 宽度，单位rpx | `number / string` | `100%` | - | - |
+| `height` | 高度，单位rpx | `number / string` | `64` | - | - |
+| `fontSize` | 字体大小，单位rpx | `number / string` | `28` | - | - |
+| `background` | 背景 | `string` | `#fff` | - | - |
+| `maskClose` | 点击遮罩层是否关闭 | `boolean` | `true` | - | - |
+| `optionsWidth` | 选项框宽度，默认跟随width | `number / string` | `auto` | - | - |
+| `placeholder` | 占位符 | `string` | `请选择` | - | - |
+| `labelKey` | 选项标签Key | `string` | `label` | - | - |
+| `valueKey` | 选项值Key | `string` | `value` | - | - |
+| `childrenKey` | 数据列表中显示的键名（mode为tree时生效） | `string` | `children` | - | - |
+| `multiple` | 是否多选（list为一维数组时生效） | `boolean` | `false` | - | - |
+| `allowCreate` | 是否允许创建（mode为filterable时生效） | `boolean` | `false` | - | - |
+| `borderColor` | 边框颜色，若不要边框可设置为透明色 | `string` | `#ebebeb` | - | - |
+| `borderRadius` | 圆角大小，单位RPX | `number / string` | `8` | - | - |
+| `optionsPosition` | 选项框位置 | `string` | `auto` | `auto`：自动展示位置，默认<br/>`auto-start`：上下自适应，左侧对其<br/>`auto-end`：上下自适应，右侧对其<br/>`bottom`：在下方展示，左右自适应<br/>`bottom-auto`：同bottom<br/>`bottom-start`：在下方展示，左侧对其<br/>`bottom-end`：在下方展示，右侧对其<br/>`top`：在上方展示，左右自适应<br/>`top-auto`：同top<br/>`top-start`：在上方展示，左侧对其<br/>`top-end`：在上方展示，右侧对其 | - |
+| `disabled` | 禁用（所有功能失效） | `boolean` | `false` | - | - |
+| `autoFilterable` | 是否自动过滤条目（mode为filterable时生效） | `boolean` | `true` | - | `1.16.16` |
+| `loading` | 加载动画 | `boolean` | `false` | - | `1.16.16` |
+| `total` | 数据总数（list选项数量大于或等于total值时不触发上拉触底事件） | `number` | `0` | - | `1.16.16` |
+| `clearable` | 显示清楚按钮 | `boolean` | `false` | - | `1.16.17` |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `change` | 选择时触发 | `value`：选中的值或选中值列表<br/>`option`：选中的选项或选中项列表 | - |
+| `cancel` | 取消选择时触发 | - | - |
+| `confirm` | 确定选择时触发 | `value`：选中的值或选中值列表 | - |
+| `inputFilterable` | 搜索框输入数据时触发 | - | `1.16.16` |
+| `loadMore` | 上拉触底时触发 | - | `1.16.16` |