@tplc/wot 1.0.7 → 1.0.9

package/components/wd-input/wd-input.vue

@@ -1,9 +1,15 @@
 <template>
   <view :class="rootClass" :style="customStyle" @click="handleClick">
-    <view v-if="label || useLabelSlot" :class="labelClass" :style="labelStyle">
-      <view v-if="prefixIcon || usePrefixSlot" class="wd-input__prefix">
+    <view v-if="label || $slots.label" :class="labelClass" :style="labelStyle">
+      <text
+        v-if="isRequired && markerSide === 'before'"
+        class="wd-input__required wd-input__required--left"
+      >
+        *
+      </text>
+      <view v-if="prefixIcon || $slots.prefix" class="wd-input__prefix">
         <wd-icon
-          v-if="prefixIcon && !usePrefixSlot"
+          v-if="prefixIcon && !$slots.prefix"
           custom-class="wd-input__icon"
           :name="prefixIcon"
           @click="onClickPrefixIcon"
@@ -11,20 +17,21 @@
         <slot v-else name="prefix"></slot>
       </view>
       <view class="wd-input__label-inner">
-        <template v-if="label">{{ label }}</template>
-        <slot v-else name="label"></slot>
+        <text v-if="label && !$slots.label">{{ label }}</text>
+        <slot v-else-if="$slots.label" name="label"></slot>
       </view>
+      <text v-if="isRequired && markerSide === 'after'" class="wd-input__required">*</text>
     </view>
     <view class="wd-input__body">
       <view class="wd-input__value">
-        <view v-if="(prefixIcon || usePrefixSlot) && !label" class="wd-input__prefix">
+        <view v-if="(prefixIcon || $slots.prefix) && !label" class="wd-input__prefix">
           <wd-icon
-            v-if="prefixIcon"
+            v-if="prefixIcon && !$slots.prefix"
             custom-class="wd-input__icon"
             :name="prefixIcon"
             @click="onClickPrefixIcon"
           />
-          <slot name="prefix"></slot>
+          <slot v-else name="prefix"></slot>
         </view>
         <input
           :class="[
@@ -38,7 +45,7 @@
           :password="showPassword && !isPwdVisible"
           v-model="inputValue"
           :placeholder="placeholderValue"
-          :disabled="disabled"
+          :disabled="disabled || readonly"
           :maxlength="maxlength"
           :focus="focused"
           :confirm-type="confirmType"
@@ -52,13 +59,15 @@
           :hold-keyboard="holdKeyboard"
           :always-embed="alwaysEmbed"
           :placeholder-class="inputPlaceholderClass"
+          :ignoreCompositionEvent="ignoreCompositionEvent"
+          :inputmode="inputmode"
           @input="handleInput"
           @focus="handleFocus"
           @blur="handleBlur"
           @confirm="handleConfirm"
           @keyboardheightchange="handleKeyboardheightchange"
         />
-        <view v-if="readonly" class="wd-input__readonly-mask" />
+        <view v-if="props.readonly" class="wd-input__readonly-mask" />
         <view
           v-if="showClear || showPassword || suffixIcon || showWordCount || $slots.suffix"
           class="wd-input__suffix"
@@ -87,12 +96,12 @@
             /{{ maxlength }}
           </view>
           <wd-icon
-            v-if="suffixIcon"
+            v-if="suffixIcon && !$slots.suffix"
             custom-class="wd-input__icon"
             :name="suffixIcon"
             @click="onClickSuffixIcon"
           />
-          <slot name="suffix"></slot>
+          <slot v-else name="suffix"></slot>
         </view>
       </view>
       <view v-if="errorMessage" class="wd-input__error-message">{{ errorMessage }}</view>
@@ -112,19 +121,25 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, onBeforeMount, ref, watch } from 'vue'
-import { isDef, objToStyle, pause, requestAnimationFrame } from '../common/util'
+import { computed, ref, watch, useSlots, type Slots } from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { isDef, objToStyle, pause, isEqual } from '../common/util'
 import { useCell } from '../composables/useCell'
 import { FORM_KEY, type FormItemRule } from '../wd-form/types'
 import { useParent } from '../composables/useParent'
 import { useTranslate } from '../composables/useTranslate'
 import { inputProps } from './types'
 
+interface InputSlots extends Slots {
+  prefix?: () => any
+  suffix?: () => any
+  label?: () => any
+}
+
 const props = defineProps(inputProps)
 const emit = defineEmits([
   'update:modelValue',
   'clear',
-  'change',
   'blur',
   'focus',
   'input',
@@ -134,13 +149,14 @@ const emit = defineEmits([
   'clickprefixicon',
   'click',
 ])
+const slots = useSlots() as InputSlots
 const { translate } = useTranslate('input')
 
 const isPwdVisible = ref<boolean>(false)
 const clearing = ref<boolean>(false) // 是否正在清空操作，避免重复触发失焦
 const focused = ref<boolean>(false) // 控制聚焦
 const focusing = ref<boolean>(false) // 当前是否激活状态
-const inputValue = ref<string | number>('') // 输入框的值
+const inputValue = ref<string | number>(getInitValue()) // 输入框的值
 const cell = useCell()
 
 watch(
@@ -156,7 +172,6 @@ watch(
   (newValue) => {
     inputValue.value = isDef(newValue) ? String(newValue) : ''
   },
-  { immediate: true, deep: true },
 )
 
 const { parent: form } = useParent(FORM_KEY)
@@ -221,15 +236,15 @@ const isRequired = computed(() => {
 })
 
 const rootClass = computed(() => {
-  return `wd-input  ${props.label || props.useLabelSlot ? 'is-cell' : ''} ${props.center ? 'is-center' : ''} ${
-    cell.border.value ? 'is-border' : ''
-  } ${props.size ? 'is-' + props.size : ''} ${props.error ? 'is-error' : ''} ${props.disabled ? 'is-disabled' : ''}  ${
+  return `wd-input  ${props.label || slots.label ? 'is-cell' : ''} ${props.center ? 'is-center' : ''} ${cell.border.value ? 'is-border' : ''} ${
+    props.size ? 'is-' + props.size : ''
+  } ${props.error ? 'is-error' : ''} ${props.disabled ? 'is-disabled' : ''}  ${
     inputValue.value && String(inputValue.value).length > 0 ? 'is-not-empty' : ''
   }  ${props.noBorder ? 'is-no-border' : ''} ${props.customClass}`
 })
 
 const labelClass = computed(() => {
-  return `wd-input__label ${props.customLabelClass} ${isRequired.value ? 'is-required' : ''}`
+  return `wd-input__label ${props.customLabelClass}`
 })
 
 const inputPlaceholderClass = computed(() => {
@@ -245,14 +260,13 @@ const labelStyle = computed(() => {
     : ''
 })
 
-onBeforeMount(() => {
-  initState()
-})
-
 // 状态初始化
-function initState() {
-  inputValue.value = formatValue(inputValue.value)
-  emit('update:modelValue', inputValue.value)
+function getInitValue() {
+  const formatted = formatValue(props.modelValue)
+  if (!isValueEqual(formatted, props.modelValue)) {
+    emit('update:modelValue', formatted)
+  }
+  return formatted
 }
 
 function formatValue(value: string | number) {
@@ -266,24 +280,20 @@ function formatValue(value: string | number) {
 function togglePwdVisible() {
   isPwdVisible.value = !isPwdVisible.value
 }
-function handleClear() {
-  clearing.value = true
+async function handleClear() {
   focusing.value = false
   inputValue.value = ''
   if (props.focusWhenClear) {
+    clearing.value = true
     focused.value = false
   }
-  requestAnimationFrame(() => {
-    if (props.focusWhenClear) {
-      focused.value = true
-      focusing.value = true
-    }
-    emit('change', {
-      value: '',
-    })
-    emit('update:modelValue', inputValue.value)
-    emit('clear')
-  })
+  await pause()
+  if (props.focusWhenClear) {
+    focused.value = true
+    focusing.value = true
+  }
+  emit('update:modelValue', inputValue.value)
+  emit('clear')
 }
 async function handleBlur() {
   // 等待150毫秒，clear执行完毕
@@ -320,8 +330,14 @@ function onClickPrefixIcon() {
 function handleClick(event: MouseEvent) {
   emit('click', event)
 }
+function isValueEqual(value1: number | string, value2: number | string) {
+  return isEqual(String(value1), String(value2))
+}
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
+</style>
+<style lang="scss">
+@import './placeholder.scss';
 </style>

package/components/wd-input-number/index.scss

@@ -1,5 +1,5 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
 
 .wot-theme-dark {
   @include b(input-number) {
@@ -28,27 +28,27 @@
 
 @include b(input-number) {
   display: inline-block;
-  line-height: 1.15;
   user-select: none;
+  line-height: 1.15;
 
   @include e(action) {
     position: relative;
-    box-sizing: border-box;
     display: inline-block;
     width: $-input-number-btn-width;
     height: $-input-number-height;
-    color: $-input-number-icon-color;
     vertical-align: middle;
+    color: $-input-number-icon-color;
     -webkit-tap-highlight-color: transparent;
+    box-sizing: border-box;
 
     // 左右加减号的边框
     &::after {
       position: absolute;
-      top: 0;
-      left: 0;
+      content: "";
       width: calc(200% - 2px);
       height: calc(200% - 2px);
-      content: '';
+      left: 0;
+      top: 0;
       border: 1px solid $-input-number-border-color;
       border-top-left-radius: calc($-input-number-radius * 2);
       border-bottom-left-radius: calc($-input-number-radius * 2);
@@ -57,9 +57,9 @@
     }
     &:last-child::after {
       border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
       border-top-right-radius: calc($-input-number-radius * 2);
       border-bottom-right-radius: calc($-input-number-radius * 2);
-      border-bottom-left-radius: 0;
     }
     @include when(disabled) {
       color: $-input-number-disabled-color;
@@ -74,50 +74,50 @@
 
   @include e(input) {
     position: relative;
-    z-index: 1;
-    box-sizing: border-box;
     display: block;
     width: $-input-number-input-width;
     height: $-input-number-height;
     padding: 0 2px;
-    font-size: $-input-number-fs;
-    color: $-input-number-color;
-    text-align: center;
-    -webkit-appearance: none;
+    box-sizing: border-box;
+    z-index: 1;
     background: transparent;
     border: none;
     outline: none;
+    text-align: center;
+    color: $-input-number-color;
+    font-size: $-input-number-fs;
+    -webkit-appearance: none;
     -webkit-tap-highlight-color: transparent;
   }
 
   @include e(input-border) {
     position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
     width: 100%;
     height: calc(200% - 2px);
+    left: 0;
+    top: 0;
     border-top: 1px solid $-input-number-border-color;
     border-bottom: 1px solid $-input-number-border-color;
     transform: scaleY(0.5);
     transform-origin: left top;
+    z-index: 0;
   }
 
   @include edeep(action-icon) {
     position: absolute;
-    top: 50%;
-    left: 50%;
     display: inline-block;
+    font-size: $-input-number-icon-size;
     width: $-input-number-icon-size;
     height: $-input-number-icon-size;
-    font-size: $-input-number-icon-size;
+    left: 50%;
+    top: 50%;
     transform: translate(-50%, -50%);
   }
 
   @include when(disabled) {
     .wd-input-number__input {
-      z-index: inherit;
       color: $-input-number-disabled-color;
+      z-index: inherit;
     }
     .wd-input-number__sub,
     .wd-input-number__add {
@@ -129,12 +129,4 @@
       border-left: none;
     }
   }
-  @include when(no-border) {
-    .wd-input-number__action::after {
-      border: none !important;
-    }
-    .wd-input-number__input-border {
-      display: none;
-    }
-  }
-}
+}

package/components/wd-input-number/types.ts

@@ -1,21 +1,23 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-15 20:40:34
- * @LastEditTime: 2024-03-18 14:58:47
+ * @LastEditTime: 2025-06-21 18:23:35
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-input-number\types.ts
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-input-number/types.ts
  * 记得注释
  */
-import {
-  baseProps,
-  makeBooleanProp,
-  makeNumberProp,
-  makeNumericProp,
-  makeRequiredProp,
-  makeStringProp,
-  numericProp,
-} from '../common/props'
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeRequiredProp, makeStringProp, numericProp } from '../common/props'
+
+/**
+ * 输入框值变化前的回调函数类型定义
+ * @param value 输入框的新值
+ * @returns 返回布尔值或Promise<boolean>，用于控制是否允许值的变化
+ */
+export type InputNumberBeforeChange = (value: number | string) => boolean | Promise<boolean>
+
+export type OperationType = 'add' | 'sub'
 
 export const inputNumberProps = {
   ...baseProps,
@@ -42,7 +44,7 @@ export const inputNumberProps = {
   /**
    * 数值精度
    */
-  precision: makeNumberProp(0),
+  precision: makeNumericProp(0),
   /**
    * 是否禁用
    */
@@ -76,7 +78,33 @@ export const inputNumberProps = {
    */
   placeholder: makeStringProp(''),
   /**
-   * 是否显示边框
+   * 原生属性，键盘弹起时，是否自动上推页面
+   */
+  adjustPosition: makeBooleanProp(true),
+  /**
+   * 输入值变化前的回调函数，返回 `false` 可阻止输入，支持返回 `Promise`
+   */
+  beforeChange: Function as PropType<InputNumberBeforeChange>,
+  /**
+   * 是否开启长按加减手势
    */
-  bordered: makeBooleanProp(true),
+  longPress: makeBooleanProp(false),
+  /**
+   * 是否立即响应输入变化，false 时仅在失焦和按钮点击时更新
+   */
+  immediateChange: makeBooleanProp(true),
+  /**
+   * 是否在初始化时更新 v-model 为修正后的值
+   * true: 自动修正并更新 v-model
+   * false: 保持原始值不修正，但仍会进行显示格式化
+   */
+  updateOnInit: makeBooleanProp(true),
+  /**
+   * 输入框类型
+   * number: 数字输入
+   * digit: 整数输入
+   */
+  inputType: makeStringProp<'number' | 'digit'>('digit')
 }
+
+export type InputNumberProps = ExtractPropTypes<typeof inputNumberProps>