@wot-ui/ui 1.0.0 → 2.0.0-alpha.3

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

@@ -0,0 +1,237 @@
+<template>
+  <view :class="rootClass" :style="customStyle" @click="handleClick">
+    <view v-if="prefixIcon || $slots.prefix" class="wd-input__prefix">
+      <wd-icon v-if="prefixIcon && !$slots.prefix" custom-class="wd-input__icon" :name="prefixIcon" @click="onClickPrefixIcon" />
+      <slot v-else name="prefix"></slot>
+    </view>
+    <input
+      :class="[
+        'wd-input__inner',
+        prefixIcon ? 'wd-input__inner--prefix' : '',
+        showWordCount ? 'wd-input__inner--count' : '',
+        alignRight ? 'is-align-right' : '',
+        customInputClass
+      ]"
+      :type="type"
+      :password="showPassword && !isPwdVisible"
+      v-model="inputValue"
+      :placeholder="placeholderValue"
+      :disabled="disabled || readonly"
+      :maxlength="maxlength"
+      :focus="focused"
+      :confirm-type="confirmType"
+      :confirm-hold="confirmHold"
+      :cursor="cursor"
+      :cursor-spacing="cursorSpacing"
+      :placeholder-style="placeholderStyle"
+      :selection-start="selectionStart"
+      :selection-end="selectionEnd"
+      :adjust-position="adjustPosition"
+      :hold-keyboard="holdKeyboard"
+      :always-embed="alwaysEmbed"
+      :placeholder-class="inputPlaceholderClass"
+      :ignoreCompositionEvent="ignoreCompositionEvent"
+      :inputmode="inputmode"
+      :enable-native="enableNative"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @confirm="handleConfirm"
+      @keyboardheightchange="handleKeyboardheightchange"
+    />
+    <view v-if="props.readonly" class="wd-input__readonly-mask" />
+    <view v-if="showClear || showPassword || suffixIcon || showWordCount || $slots.suffix" class="wd-input__suffix">
+      <wd-icon v-if="showClear" custom-class="wd-input__clear" name="close-circle" @click="handleClear" />
+      <wd-icon v-if="showPassword" custom-class="wd-input__icon" :name="isPwdVisible ? 'eye' : 'eye-invisible'" @click="togglePwdVisible" />
+      <view v-if="showWordCount" class="wd-input__count">{{ currentLength }}/{{ maxlength }}</view>
+      <wd-icon v-if="suffixIcon && !$slots.suffix" custom-class="wd-input__icon" :name="suffixIcon" @click="onClickSuffixIcon" />
+      <slot v-else name="suffix"></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-input',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { isDef, pause, isEqual } from '../../common/util'
+import { useParent } from '../../composables/useParent'
+import { useTranslate } from '../../composables/useTranslate'
+import { inputProps } from './types'
+import { FORM_ITEM_VALIDATE_KEY } from '../wd-form-item/types'
+
+const props = defineProps(inputProps)
+const emit = defineEmits([
+  'update:modelValue',
+  'clear',
+  'blur',
+  'focus',
+  'input',
+  'keyboardheightchange',
+  'confirm',
+  'clicksuffixicon',
+  'clickprefixicon',
+  'click'
+])
+const { translate } = useTranslate('input')
+const { parent: formItemValidate } = useParent(FORM_ITEM_VALIDATE_KEY)
+
+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>(getInitValue()) // 输入框的值
+
+watch(
+  () => props.focus,
+  (newValue) => {
+    focused.value = newValue
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    inputValue.value = isDef(newValue) ? String(newValue) : ''
+  }
+)
+
+const placeholderValue = computed(() => {
+  return isDef(props.placeholder) ? props.placeholder : translate('placeholder')
+})
+
+/**
+ * 展示清空按钮
+ */
+const showClear = computed(() => {
+  const { disabled, readonly, clearable, clearTrigger } = props
+  if (clearable && !readonly && !disabled && inputValue.value && (clearTrigger === 'always' || (props.clearTrigger === 'focus' && focusing.value))) {
+    return true
+  } else {
+    return false
+  }
+})
+
+/**
+ * 展示字数统计
+ */
+const showWordCount = computed(() => {
+  const { disabled, readonly, maxlength, showWordLimit } = props
+  return Boolean(!disabled && !readonly && isDef(maxlength) && maxlength > -1 && showWordLimit)
+})
+
+// 当前输入框文字长度
+const currentLength = computed(() => {
+  /**
+   * 使用Array.from处理多码元字符以获取正确的长度
+   * @link https://github.com/Moonofweisheng/wot-design-uni/issues/933
+   */
+  return Array.from(String(formatValue(props.modelValue))).length
+})
+
+const rootClass = computed(() => {
+  return `wd-input ${props.error ? 'is-error' : ''} ${props.disabled ? 'is-disabled' : ''}  ${isCompact.value ? 'is-compact' : ''} ${
+    props.customClass
+  }`
+})
+
+const inputPlaceholderClass = computed(() => {
+  return `wd-input__placeholder  ${props.placeholderClass}`
+})
+
+const isCompact = computed(() => {
+  return isDef(props.compact) ? props.compact : isDef(formItemValidate.value)
+})
+
+// 状态初始化
+function getInitValue() {
+  const formatted = formatValue(props.modelValue)
+  if (!isValueEqual(formatted, props.modelValue)) {
+    emit('update:modelValue', formatted)
+  }
+  return formatted
+}
+
+function formatValue(value: string | number) {
+  const { maxlength } = props
+  if (isDef(maxlength) && maxlength !== -1 && String(value).length > maxlength) {
+    return value.toString().slice(0, maxlength)
+  }
+  return value
+}
+
+function togglePwdVisible() {
+  isPwdVisible.value = !isPwdVisible.value
+}
+async function handleClear() {
+  focusing.value = false
+  inputValue.value = ''
+  if (props.focusWhenClear) {
+    clearing.value = true
+    focused.value = false
+  }
+  await pause()
+  if (props.focusWhenClear) {
+    focused.value = true
+    focusing.value = true
+  }
+  emit('update:modelValue', inputValue.value)
+  emit('clear')
+}
+async function handleBlur() {
+  // 等待150毫秒，clear执行完毕
+  await pause(150)
+  if (clearing.value) {
+    clearing.value = false
+    return
+  }
+  focusing.value = false
+  emit('blur', {
+    value: inputValue.value
+  })
+  await formItemValidate.value?.validateByTrigger('blur')
+}
+function handleFocus({ detail }: any) {
+  focusing.value = true
+  emit('focus', detail)
+}
+function handleInput({ detail }: any) {
+  emit('update:modelValue', inputValue.value)
+  emit('input', detail)
+}
+function handleKeyboardheightchange({ detail }: any) {
+  emit('keyboardheightchange', detail)
+}
+function handleConfirm({ detail }: any) {
+  emit('confirm', detail)
+}
+function onClickSuffixIcon() {
+  emit('clicksuffixicon')
+}
+function onClickPrefixIcon() {
+  emit('clickprefixicon')
+}
+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">
+@use './index.scss';
+</style>

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

@@ -0,0 +1,233 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 操作按钮尺寸
+$input-number-action-size: var(--wot-input-number-action-size, $n-28) !default;
+// 操作按钮背景色
+$input-number-action-bg: var(--wot-input-number-action-bg, $filled-bottom) !default;
+// 操作按钮颜色
+$input-number-action-color: var(--wot-input-number-action-color, $icon-secondary) !default;
+// 操作按钮圆角
+$input-number-action-border-radius: var(--wot-input-number-action-border-radius, $radius-main) !default;
+// 圆角模式操作按钮圆角
+$input-number-action-border-radius-full: var(--wot-input-number-action-border-radius-full, $radius-radius-full) !default;
+// 操作按钮禁用颜色
+$input-number-action-disabled-color: var(--wot-input-number-action-disabled-color, $icon-disabled) !default;
+// 操作按钮分割线宽度
+$input-number-action-divider-width: var(--wot-input-number-action-divider-width, $stroke-main) !default;
+// 操作按钮分割线颜色
+$input-number-action-divider-bg: var(--wot-input-number-action-divider-bg, $filled-oppo) !default;
+// 分离模式分割线颜色
+$input-number-action-divider-split-bg: var(--wot-input-number-action-divider-split-bg, $filled-strong) !default;
+// 分离模式分割线高度
+$input-number-action-divider-split-height: var(--wot-input-number-action-divider-split-height, $n-18) !default;
+// 图标尺寸
+$input-number-icon-size: var(--wot-input-number-icon-size, $n-12) !default;
+// 图标线宽
+$input-number-icon-weight: var(--wot-input-number-icon-weight, $n-3) !default;
+// 输入框宽度
+$input-number-input-width: var(--wot-input-number-input-width, $n-36) !default;
+// 输入框高度
+$input-number-input-height: var(--wot-input-number-input-height, $n-28) !default;
+// 输入框内边距
+$input-number-input-padding: var(--wot-input-number-input-padding, $spacing-zero $padding-tight) !default;
+// 输入框背景色
+$input-number-input-bg: var(--wot-input-number-input-bg, $filled-bottom) !default;
+// 输入框文字颜色
+$input-number-input-color: var(--wot-input-number-input-color, $text-main) !default;
+// 输入框文字字号
+$input-number-font-size: var(--wot-input-number-font-size, $typography-label-size-large) !default;
+// 主题边框颜色
+$input-number-border-color: var(--wot-input-number-border-color, $border-main) !default;
+// 禁用态透明度
+$input-number-disabled-opacity: var(--wot-input-number-disabled-opacity, $opacity-disabled) !default;
+// primary 主题主按钮背景色
+$input-number-action-primary-bg: var(--wot-input-number-action-primary-bg, $primary-6) !default;
+// primary 主题主按钮颜色
+$input-number-action-primary-color: var(--wot-input-number-action-primary-color, $icon-white) !default;
+// primary 主题次按钮颜色
+$input-number-action-primary-sub-color: var(--wot-input-number-action-primary-sub-color, $primary-6) !default;
+
+
+@include b(input-number) {
+  display: flex;
+  align-items: center;
+  user-select: none;
+  line-height: 1;
+
+  @include e(action) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $input-number-action-size;
+    height: $input-number-action-size;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  @include e(action-divider) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: $input-number-action-divider-width;
+    height: 100%;
+    background: $input-number-action-divider-bg;
+  }
+
+  @include e(sub) {
+    color: $input-number-action-color;
+    background: $input-number-action-bg;
+    border-radius: $input-number-action-border-radius 0 0 $input-number-action-border-radius;
+
+    .wd-input-number__action-divider {
+      right: 0;
+    }
+
+    // 减号图标（横线）
+    &::before {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%) scaleY(0.5);
+      width: $input-number-icon-size;
+      height: $input-number-icon-weight;
+      background: currentColor;
+    }
+  }
+
+  @include e(add) {
+    color: $input-number-action-color;
+    background: $input-number-action-bg;
+    border-radius: 0 $input-number-action-border-radius $input-number-action-border-radius 0;
+
+    .wd-input-number__action-divider {
+      left: 0;
+    }
+
+    // 加号图标（横线）
+    &::before {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%) scaleY(0.5);
+      width: $input-number-icon-size;
+      height: $input-number-icon-weight;
+      background: currentColor;
+    }
+
+    // 加号图标（竖线）
+    &::after {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%) scaleX(0.5);
+      width: $input-number-icon-weight;
+      height: $input-number-icon-size;
+      background: currentColor;
+    }
+  }
+
+  @include e(inner) {
+    position: relative;
+    box-sizing: border-box;
+    height: $input-number-input-height;
+    padding: $input-number-input-padding;
+    background: $input-number-input-bg;
+  }
+
+  @include e(input) {
+    position: relative;
+    display: block;
+    width: $input-number-input-width;
+    height: 100%;
+    border: none;
+    outline: none;
+    text-align: center;
+    color: $input-number-input-color;
+    font-size: $input-number-font-size;
+    font-weight: $font-weight-medium;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  // --------------------------------------------------------------------------
+  // 主题变体
+  // --------------------------------------------------------------------------
+
+  // default / outline / outline-split 主题：禁用使用颜色
+  @include m(default, outline, outline-split) {
+    @include me(sub, add) {
+      @include when(disabled) {
+        color: $input-number-action-disabled-color;
+      }
+    }
+  }
+
+  // outline 主题：有边框描边，按钮连接
+  @include m(outline) {
+    @include me(action-divider) {
+      display: none;
+    }
+
+    @include me(action) {
+      border: 1px solid $input-number-border-color;
+    }
+
+    @include me(inner) {
+      border-top: 1px solid $input-number-border-color;
+      border-bottom: 1px solid $input-number-border-color;
+    }
+  }
+
+  // outline-split 主题：有边框，按钮分离
+  @include m(outline-split) {
+    @include me(action-divider) {
+      height: $input-number-action-divider-split-height;
+      background: $input-number-action-divider-split-bg;
+    }
+  }
+
+  // primary 主题：主色按钮
+  @include m(primary) {
+    @include me(action-divider) {
+      display: none;
+    }
+
+    @include me(sub) {
+      background: transparent;
+      color: $input-number-action-primary-sub-color;
+      border: 1px solid currentColor;
+    }
+
+    @include me(add) {
+      background: $input-number-action-primary-bg;
+      color: $input-number-action-primary-color;
+    }
+
+    // primary 主题禁用：使用透明度
+    @include me(sub, add) {
+      @include when(disabled) {
+        opacity: $input-number-disabled-opacity;
+      }
+    }
+  }
+
+  // --------------------------------------------------------------------------
+  // 状态修饰
+  // --------------------------------------------------------------------------
+
+  // 圆角模式
+  @include when(round) {
+    @include me(sub) {
+      border-radius: $input-number-action-border-radius-full 0 0 $input-number-action-border-radius-full;
+    }
+
+    @include me(add) {
+      border-radius: 0 $input-number-action-border-radius-full $input-number-action-border-radius-full 0;
+    }
+  }
+}

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

@@ -0,0 +1,131 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2026-01-22 16:54:27
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-input-number/types.ts
+ * 记得注释
+ */
+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>
+
+/**
+ * 计数器主题类型
+ * - default: 无边框，简洁风格
+ * - outline: 有边框描边
+ * - outline-split: 有边框，按钮分离
+ * - primary: 圆形主色按钮
+ */
+export type InputNumberTheme = 'default' | 'outline' | 'outline-split' | 'primary'
+
+export type OperationType = 'add' | 'sub'
+
+export const inputNumberProps = {
+  ...baseProps,
+  /**
+   * 绑定值
+   */
+  modelValue: makeRequiredProp(numericProp),
+  /**
+   * 最小值
+   */
+  min: makeNumberProp(1),
+  /**
+   * 最大值
+   */
+  max: makeNumberProp(Number.MAX_SAFE_INTEGER),
+  /**
+   * 步进值
+   */
+  step: makeNumberProp(1),
+  /**
+   * 是否严格按照步进值递增或递减
+   */
+  stepStrictly: makeBooleanProp(false),
+  /**
+   * 数值精度
+   */
+  precision: makeNumericProp(0),
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否禁用输入框
+   */
+  disableInput: makeBooleanProp(false),
+  /**
+   * 是否禁用减号按钮
+   */
+  disableMinus: makeBooleanProp(false),
+  /**
+   * 是否禁用加号按钮
+   */
+  disablePlus: makeBooleanProp(false),
+  /**
+   * 是否不显示输入框
+   */
+  withoutInput: makeBooleanProp(false),
+  /**
+   * 输入框宽度
+   */
+  inputWidth: numericProp,
+  /**
+   * 是否允许为空
+   */
+  allowNull: makeBooleanProp(false),
+  /**
+   * 输入框占位符
+   */
+  placeholder: makeStringProp(''),
+  /**
+   * 原生属性，键盘弹起时，是否自动上推页面
+   */
+  adjustPosition: makeBooleanProp(true),
+  /**
+   * 输入值变化前的回调函数，返回 `false` 可阻止输入，支持返回 `Promise`
+   */
+  beforeChange: Function as PropType<InputNumberBeforeChange>,
+  /**
+   * 是否开启长按加减手势
+   */
+  longPress: makeBooleanProp(false),
+  /**
+   * 是否立即响应输入变化，false 时仅在失焦和按钮点击时更新
+   */
+  immediateChange: makeBooleanProp(true),
+  /**
+   * 是否在初始化时更新 v-model 为修正后的值
+   * true: 自动修正并更新 v-model
+   * false: 保持原始值不修正，但仍会进行显示格式化
+   */
+  updateOnInit: makeBooleanProp(true),
+  /**
+   * 输入框类型
+   * number: 数字输入
+   * digit: 整数输入
+   */
+  inputType: makeStringProp<'number' | 'digit'>('digit'),
+  /**
+   * 主题风格
+   * - default: 无边框，简洁风格
+   * - outline: 有边框描边
+   * - outline-split: 有边框，按钮分离
+   * - primary: 圆形主色按钮
+   */
+  theme: makeStringProp<InputNumberTheme>('default'),
+  /**
+   * 是否圆形按钮
+   */
+  round: Boolean
+}
+
+export type InputNumberProps = ExtractPropTypes<typeof inputNumberProps>