stellar-ui-plus 1.16.18

package/components/ste-number-keyboard/README.md

@@ -0,0 +1,192 @@
+# NumberKeyboard 数字键盘
+
+用于页面上显示价格的组件
+
+---$
+
+### 代码演示
+
+-   以下是公用scss代码
+
+```scss
+.test-input {
+    height: 66rpx;
+    line-height: 66rpx;
+    background-color: #f5f5f5;
+    padding: 0 18rpx;
+    font-size: 24rpx;
+    .placeholder {
+        color: #999;
+    }
+}
+```
+
+#### 基础用法
+
+-   属性`value`: 输入的值，支持`v-model`双向绑定
+-   属性`show`: 是否显示键盘，支持`sync`双向绑定
+
+```html
+<view class="test-input" @click="show1 = true">
+    <text v-if="value1">{{ value1 }}</text>
+    <text v-else class="placeholder">请输入</text>
+</view>
+<ste-number-keyboard v-model="value1" v-model:show="show1" />
+<script setup lang="ts">
+    import { ref } from 'vue';
+    const value1 = ref('');
+    const show1 = ref(false);
+</script>
+```
+
+#### 隐藏右侧功能键
+
+-   属性`rightKeys`: 是否显示右侧功能键，默认显示
+
+```html
+<view class="test-input" @click="show2 = true">
+    <text v-if="value2">{{ value2 }}</text>
+    <text v-else class="placeholder">请输入</text>
+</view>
+<ste-number-keyboard :rightKeys="false" v-model="value2" v-model:show="show2" />
+<script setup lang="ts">
+    import { ref } from 'vue';
+    const value2 = ref('');
+    const show2 = ref(false);
+</script>
+```
+
+#### 隐藏清除按钮,value最大长度
+
+-   属性`showClear`: 是否显示清除按钮，默认显示
+-   属性`maxlength`: 最大`value`长度，默认不限制
+
+```html
+<view class="test-input" @click="show3 = true">
+    <text v-if="value3">{{ value3 }}</text>
+    <text v-else class="placeholder">请输入</text>
+</view>
+<ste-number-keyboard :showClear="false" v-model="value3" v-model:show="show3" maxlength="6" />
+
+<script setup lang="ts">
+    import { ref } from 'vue';
+    const value3 = ref('');
+    const show3 = ref(false);
+</script>
+```
+
+#### 自定义按键
+
+-   属性`customKeys`: 自定义按键列表，建议不超过两个
+
+```html
+<view class="test-input" @click="show4 = true">
+    <text v-if="value4">{{ value4 }}</text>
+    <text v-else class="placeholder">请输入</text>
+</view>
+<ste-number-keyboard :customKeys="['00', '.']" v-model="value4" v-model:show="show4" />
+
+<script setup lang="ts">
+    import { ref } from 'vue';
+    const value4 = ref('');
+    const show4 = ref(false);
+</script>
+```
+
+#### 自定义颜色/字体大小/确定文本
+
+-   属性`textColor`: 按键文字颜色，默认#333333
+-   属性`textSize`: 按键文字大小，默认48，单位rpx
+-   属性`confirmBg`: 确定按钮背景颜色，默认#0090FF
+-   属性`confirmColor`: 确定按钮文字颜色，默认#FFFFFF
+-   属性`confirmText`: 确定按钮文字，默认"确定"
+
+```html
+<view class="test-input" @click="show5 = true">
+    <text v-if="value5">{{ value5 }}</text>
+    <text v-else class="placeholder">请输入</text>
+</view>
+<ste-number-keyboard v-model="value5" v-model:show="show5" textColor="#f00" textSize="40" confirmBg="#f00" confirmColor="#0f0" confirmText="完成" />
+
+<script setup lang="ts">
+    import { ref } from 'vue';
+    const value5 = ref('');
+    const show5 = ref(false);
+</script>
+```
+
+#### 输入前事件（自定义功能）
+
+-   属性`customKeys`中自定义一些按钮，如"返回"
+    -   需要自定义该按钮功能，可使用`beforeinput`阻止该按钮的默认功能
+-   事件`beforeinput`: 输入前事件
+    -   参数1：即将输入的按钮文本
+    -   参数2：等待执行回调函数
+    -   参数3：继续后续操作函数
+    -   参数4：阻止后续操作函数
+
+```html
+<view class="test-input" @click="show6 = true">
+    <text v-if="value6">{{ value6 }}</text>
+    <text v-else class="placeholder">请输入</text>
+</view>
+<ste-number-keyboard :customKeys="['返回']" v-model="value6" v-model:show="show6" @beforeinput="beforeinput" />
+<script setup lang="ts">
+    import { ref } from 'vue';
+    const value6 = ref('');
+    const show6 = ref(false);
+
+    function beforeinput(v, suspend, next, stop) {
+        // 等待后续操作
+        suspend();
+        // 执行自定义操作
+        if (v === '返回') {
+            // 阻止默认后续操作
+            stop();
+            this.showToast({
+                title: '点击了返回',
+                icon: 'none',
+            });
+        } else {
+            // 继续默认后续操作
+            next();
+        }
+    }
+</script>
+```
+
+#### 在文档流中展示
+
+-   属性`mode`: 键盘模式，
+    -   可选值:`popup`在弹窗中展示(默认)
+    -   可选值:`page`在文档流中展示
+
+```html
+<view class="test-input">
+    <text v-if="value7">{{ value7 }}</text>
+    <text v-else class="placeholder">请输入</text>
+</view>
+<view style="padding: 30rpx; background-color: #f5f5f5; margin-top: 12rpx">
+    <ste-number-keyboard mode="page" v-model="value7" />
+</view>
+
+<script setup lang="ts">
+    import { ref } from 'vue';
+    const value7 = ref('');
+</script>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### 组件插槽(Slot)
+
+| 插槽名  | 说明         | 插槽参数 | 支持版本 |
+| ------- | ------------ | -------- | -------- |
+| default | 弹窗标题插槽 | -        | -        |
+
+---$
+{{xuyajun}}

package/components/ste-number-keyboard/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "展示组件",
+    "title": "NumberKeyboard 数字键盘",
+    "icon": "https://image.whzb.com/chain/StellarUI/%E7%BB%84%E4%BB%B6%E5%9B%BE%E6%A0%87/numberKeyboard.png"
+}

package/components/ste-number-keyboard/props.ts

@@ -0,0 +1,35 @@
+import type { PropType } from 'vue'
+
+export interface NumberKeyboardProps {
+  mode: string
+  modelValue: string
+  maxlength: number | string
+  show: boolean
+  rightKeys: boolean
+  randomKeys: boolean
+  confirmText: string
+  confirmDisabled: boolean
+  customKeys: string[]
+  showClear: boolean
+  textColor: string
+  textSize: string | number
+  confirmBg: string
+  confirmColor: string
+}
+
+export default {
+  mode: { type: String, default: () => 'popup' },
+  modelValue: { type: String, default: () => '' },
+  maxlength: { type: [Number, String], default: () => null },
+  show: { type: Boolean, default: () => false },
+  rightKeys: { type: Boolean, default: () => true },
+  randomKeys: { type: Boolean, default: () => false },
+  confirmText: { type: String, default: () => '确定' },
+  confirmDisabled: { type: Boolean, default: () => false },
+  customKeys: { type: Array as PropType<string[]>, default: () => [] },
+  showClear: { type: Boolean, default: () => true },
+  textColor: { type: String, default: () => '#000' },
+  textSize: { type: [Number, String], default: () => 48 },
+  confirmBg: { type: String, default: () => '' },
+  confirmColor: { type: String, default: () => '#fff' },
+}

package/components/ste-number-keyboard/ste-number-keyboard.easycom.json

@@ -0,0 +1,177 @@
+{
+    "name": "ste-media-preview",
+    "description": "媒体预览",
+    "example": "<ste-media-preview />",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=media-preview",
+    "attributes": [
+        {
+            "name": "mode",
+            "description": "键盘模式",
+            "type": "string",
+            "default": "popup",
+            "values": [
+                {
+                    "name": "popup",
+                    "description": "弹出式"
+                },
+                {
+                    "name": "page",
+                    "description": "页面式"
+                }
+            ]
+        },
+        {
+            "name": "modelValue",
+            "description": "输入值，支持v-model双向绑定",
+            "type": "string"
+        },
+        {
+            "name": "maxlength",
+            "description": "value最大长度",
+            "type": "number"
+        },
+        {
+            "name": "show",
+            "description": "是否显示键盘，支持v-model:show绑定，mode='popup'时生效",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "rightKeys",
+            "description": "是否显示右侧功能键",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "randomKeys",
+            "description": "按键是否随机排列",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "confirmText",
+            "description": "右侧确定按钮文本",
+            "type": "string",
+            "default": "确定"
+        },
+        {
+            "name": "confirmDisabled",
+            "description": "右侧确认是否禁用",
+            "type": "boolean",
+            "default": false
+        },
+        {
+            "name": "customKeys",
+            "description": "自定义按键，建议数量不大于2",
+            "type": "string[]",
+            "default": []
+        },
+        {
+            "name": "showClear",
+            "description": "是否显示清空按钮",
+            "type": "boolean",
+            "default": true
+        },
+        {
+            "name": "textColor",
+            "description": "按键文字颜色",
+            "type": "string",
+            "default": "#000000"
+        },
+        {
+            "name": "textSize",
+            "description": "按键文字大小",
+            "type": "number | string",
+            "default": 48
+        },
+        {
+            "name": "confirmBg",
+            "description": "确定按钮背景颜色",
+            "type": "string",
+            "default": "#0090FF"
+        },
+        {
+            "name": "confirmColor",
+            "description": "确定按钮文字颜色",
+            "type": "string",
+            "default": "#ffffff"
+        },
+        {
+            "name": "[event]change",
+            "description": "输入值value改变时触发",
+            "type": "(value: string) => void",
+            "params": [
+                {
+                    "name": "value",
+                    "description": "输入值"
+                }
+            ]
+        },
+        {
+            "name": "[event]clear",
+            "description": "清空按钮点击事件",
+            "type": "() => void"
+        },
+        {
+            "name": "[event]backspace",
+            "description": "删除按钮点击事件",
+            "type": "() => void"
+        },
+        {
+            "name": "[event]confirm",
+            "description": "确认按钮点击事件",
+            "type": "(value:string) => void",
+            "params": [
+                {
+                    "name": "value",
+                    "description": "输入值"
+                }
+            ]
+        },
+        {
+            "name": "[event]click",
+            "description": "点击功能键(确认/删除/清除)之外的键盘触发",
+            "type": "(key:string) => void",
+            "params": [
+                {
+                    "name": "key",
+                    "description": "当前点击的按钮"
+                }
+            ]
+        },
+        {
+            "name": "[event]beforeinput",
+            "description": "输入之前触发，功能键之外的键盘点击时为输入",
+            "type": "(key: string, suspend: () => void, next: () => void, stop: () => void) => void",
+            "params": [
+                {
+                    "name": "key",
+                    "description": "当前点击的按钮"
+                },
+                {
+                    "name": "suspend",
+                    "description": "开启等待的回调函数"
+                },
+                {
+                    "name": "next",
+                    "description": "执行后续操作的回调函数"
+                },
+                {
+                    "name": "stop",
+                    "description": "阻止后续执行的回调函数"
+                }
+            ]
+        },
+        {
+            "name": "[event]open",
+            "description": "打开弹窗键盘触发",
+            "type": "() => void"
+        },
+        {
+            "name": "[event]close",
+            "description": "关闭弹窗键盘触发",
+            "type": "() => void"
+        },
+        {}
+    ]
+}

package/components/ste-number-keyboard/ste-number-keyboard.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import useData from './useData';
+import porpsData, { type NumberKeyboardProps } from './props';
+
+import KeyboardVue from './KeyboardVue.vue';
+
+const props: NumberKeyboardProps = defineProps(porpsData);
+const emits = defineEmits<{
+    (e: 'change', value: string): void;
+    (e: 'input', value: string): void;
+    (e: 'update:modelValue', value: string): void;
+    (e: 'clear'): void;
+    (e: 'backspace'): void;
+    (e: 'confirm', value: string): void;
+    (e: 'click', key: string): void;
+    (e: 'beforeinput', key: string, suspend: () => void, next: () => void, stop: () => void): void;
+    (e: 'close'): void;
+    (e: 'update:show', show: boolean): void;
+    (e: 'open'): void;
+}>();
+
+const { cmpNumbers, cmpRootStyle, dataShow, onClose, onChange, onOpen } = useData({ props, emits });
+</script>
+
+<template>
+    <view class="ste-number-keyboard-root" :style="[cmpRootStyle]">
+        <block v-if="mode === 'popup'">
+            <ste-popup v-model:show="dataShow" @close="onClose" position="bottom" :show-close="false" @open="onOpen">
+                <view style="padding: 30rpx 30rpx 60rpx 30rpx; background-color: #f5f5f5">
+                    <view class="keyboard-popup-head">
+                        <view></view>
+                        <view class="keyboard-title">
+                            <slot>数字键盘</slot>
+                        </view>
+                        <view class="keyboard-close" @click="onClose">
+                            <ste-icon code="&#xe676;" size="36" />
+                        </view>
+                    </view>
+                    <KeyboardVue
+                        :list="cmpNumbers"
+                        :confirmText="confirmText"
+                        :disabled="confirmDisabled"
+                        :showClear="showClear"
+                        :textColor="textColor"
+                        :textSize="textSize"
+                        :rightKeys="rightKeys"
+                        @change="onChange"
+                    />
+                </view>
+            </ste-popup>
+        </block>
+        <block v-else>
+            <KeyboardVue
+                :list="cmpNumbers"
+                :confirmText="confirmText"
+                :disabled="confirmDisabled"
+                :showClear="showClear"
+                :textColor="textColor"
+                :textSize="textSize"
+                :rightKeys="rightKeys"
+                @change="onChange"
+            />
+        </block>
+    </view>
+</template>
+<style lang="scss" scoped>
+.ste-number-keyboard-root {
+    .keyboard-popup-head {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: 30rpx;
+        color: #888;
+        .keyboard-close {
+            &:active {
+                background: rgba(200, 200, 200, 0.5);
+            }
+        }
+    }
+}
+</style>

package/components/ste-number-keyboard/useData.ts

@@ -0,0 +1,144 @@
+import { computed, ref, watch } from 'vue'
+import utils from '../../utils/utils'
+import useColor from '../../config/color'
+import type { NumberKeyboardProps } from './props'
+
+const color = useColor()
+export default function useData({
+  props,
+  emits,
+}: {
+  props: NumberKeyboardProps
+  emits: {
+    (e: 'change', value: string): void
+    (e: 'input', value: string): void
+    (e: 'update:modelValue', value: string): void
+    (e: 'clear'): void
+    (e: 'backspace'): void
+    (e: 'confirm', value: string): void
+    (e: 'click', key: string): void
+    (e: 'beforeinput', key: string, suspend: () => void, next: () => void, stop: () => void): void
+    (e: 'close'): void
+    (e: 'update:show', show: boolean): void
+    (e: 'open'): void
+  }
+}) {
+  const dataValue = ref('')
+  const setDataValue = (value: string) => {
+    if (value === dataValue.value)
+      return
+    if (value === null || value === undefined)
+      dataValue.value = ''
+    else if (typeof value === 'string')
+      dataValue.value = value
+    else dataValue.value = String(value)
+  }
+
+  const dataShow = ref(false)
+  const setDataShow = (value: boolean) => {
+    if (value === dataShow.value)
+      return
+    dataShow.value = value
+  }
+
+  const cmpNumbers = computed(() => {
+    let keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
+    if (props.randomKeys)
+      keys = utils.randomArray(keys)
+
+    if (Array.isArray(props.customKeys))
+      keys.push(...props.customKeys)
+
+    if (!props.rightKeys) {
+      if (!props.showClear) {
+        keys.push('backspace')
+        return
+      }
+      const d = keys.length % 3
+      if (d === 1) {
+        const end = keys.pop()
+        keys.push('clear', end || '', 'backspace')
+      }
+      else {
+        keys.push('clear', 'backspace')
+      }
+    }
+    return keys
+  })
+
+  const cmpRootStyle = computed(() => {
+    return {
+      '--ste-number-keyboard-text-color': props.textColor,
+      '--ste-number-keyboard-text-size': `var(--font-size-${props.textSize},${utils.formatPx(props.textSize)})`,
+      '--ste-number-keyboard-clear-text-size': `var(--font-size-${props.textSize},${utils.formatPx(Number(props.textSize) - 8)})`,
+      '--ste-number-keyboard-confirm-text-size': `var(--font-size-${props.textSize},${utils.formatPx(Number(props.textSize) - 3)})`,
+      '--ste-number-keyboard-confirm-bg': props.confirmBg ? props.confirmBg : color.getColor().steThemeColor,
+      '--ste-number-keyboard-confirm-bg-active': utils.Color.formatColor(props.confirmBg, 0.8),
+      '--ste-number-keyboard-confirm-color': props.confirmColor,
+    }
+  })
+
+  watch(() => props.modelValue, setDataValue, { immediate: true })
+  watch(() => props.show, setDataShow, { immediate: true })
+
+  const onClose = () => {
+    setDataShow(false)
+    emits('update:show', false)
+    emits('close')
+  }
+
+  const beforInput = async (value: string) => {
+    let next = true
+    const stop = new Promise((resolve, reject) => {
+      emits(
+        'beforeinput',
+        value,
+        () => (next = false),
+        () => resolve('next'),
+        () => reject(new Error('beforInput stop')),
+      )
+    })
+    if (!next)
+      await stop
+
+    /* eslint prefer-promise-reject-errors: "error" */
+  }
+
+  const onChange = async (value: string) => {
+    try {
+      if (value === 'confirm') {
+        emits('confirm', dataValue.value)
+        onClose()
+        return
+      }
+      switch (value) {
+        case 'backspace':
+          setDataValue(dataValue.value.slice(0, dataValue.value.length - 1))
+          emits('backspace')
+          break
+        case 'clear':
+          setDataValue('')
+          emits('clear')
+          break
+        default:
+          await beforInput(value)
+          emits('click', value)
+          if (props.maxlength && dataValue.value.length >= Number(props.maxlength))
+            return
+          dataValue.value += value
+          break
+      }
+      emits('input', dataValue.value)
+      emits('change', dataValue.value)
+      emits('update:modelValue', dataValue.value)
+    }
+    catch (e) {
+      if (e)
+        console.error(e)
+    }
+  }
+
+  const onOpen = () => emits('open')
+
+  return { cmpNumbers, cmpRootStyle, dataShow, onClose, onChange, onOpen }
+}

package/components/ste-picker/props.ts

@@ -0,0 +1,16 @@
+// pickerProps.ts
+import type { PropType } from 'vue'
+
+export default {
+  columns: { type: Array as PropType<string[][]>, default: () => [] },
+  itemHeight: { type: [String, Number] as PropType<string | number>, default: 44 },
+  visibleItemCount: { type: [String, Number], default: 5 },
+  showToolbar: { type: Boolean, default: true },
+  title: { type: String, default: '' },
+  cancelText: { type: String, default: '取消' },
+  cancelColor: { type: String, default: '#969799' },
+  confirmText: { type: String, default: '确认' },
+  confirmColor: { type: String, default: '#0090FF' },
+  defaultIndex: { type: Array as PropType<number[]>, default: () => [] },
+  rootClass: { type: String, default: '' },
+}