papayaui 0.3.0 → 0.3.2

package/components/input/input.vue

@@ -91,7 +91,7 @@ const onInput = (e: Event) => {
   let value = (e as unknown as EventDetail<{ value: string }>).detail.value
   // 数值类型处理，整数或小数
   if (props.type === 'number') {
-    value = formatNumericTypeString(value, props.intLength, props.decimalLength)
+    value = formatNumericTypeString(value, props.intLength, props.decimalLength, props.allowNegative)
   }
   // 格式化函数处理
   if (typeof props.formatter === 'function') {

package/components/input/props.ts

@@ -22,6 +22,10 @@ const inputNumberProps = {
    * 小数位长度
    */
   decimalLength: Number,
+  /**
+   * 是否允许输入负数
+   */
+  allowNegative: Boolean,
 }
 
 export const inputProps = {

package/components/tab-pane/props.ts

@@ -16,6 +16,10 @@ export const tabPaneProps = {
    * 是否禁用标签
    */
   disabled: Boolean,
+  /**
+   * 自定义标题插槽名称
+   */
+  titleSlot: String,
 }
 
 export type TabPaneProps = ExtractPropTypes<typeof tabPaneProps>

package/components/tab-pane/tab-pane.vue

@@ -15,7 +15,7 @@ const ns = useNamespace('tab__pane')
 
 const props = defineProps(tabPaneProps)
 
-const { title, disabled } = toRefs(props)
+const { title, disabled, titleSlot } = toRefs(props)
 
 const instance = getCurrentInstance()
 const parent = getParentInstance<TabsProps, TabsExpose>(instance, 'tabs')
@@ -45,6 +45,7 @@ const init = () => {
       name,
       title,
       disabled,
+      titleSlot,
     })
   }
 }

package/components/tabs/props.ts

@@ -61,7 +61,7 @@ export const tabsEmits = {
   click: (item: any) => isObject(item),
 }
 
-export type TabItem = Required<TabPaneProps>
+export type TabItem = Required<Omit<TabPaneProps, 'titleSlot'>> & Pick<TabPaneProps, 'titleSlot'>
 export type TabItemValue = TabItem['name']
 
 export type TabsProps = ExtractPropTypes<typeof tabsProps>

package/components/tabs/tabs.vue

@@ -25,7 +25,13 @@
           ]"
           @click="onChangeTab(item, index)"
         >
-          {{ item.title }}
+          <slot
+            v-if="item.titleSlot && $slots[item.titleSlot]"
+            :name="item.titleSlot"
+            :item="item"
+            :index="index"
+          />
+          <text v-else>{{ item.title }}</text>
         </view>
         <view :class="ns.e('line')" :style="lineStyle"></view>
       </view>
@@ -81,6 +87,7 @@ const navList = computed<TabItem[]>(() => {
         title: tab[props.labelKey as keyof typeof tab] ?? '',
         name: props.valueKey ? tab[props.valueKey as keyof typeof tab] : index,
         disabled: tab['disabled' as keyof typeof tab] ?? false,
+        titleSlot: tab['titleSlot' as keyof typeof tab],
       }
     })
   }
@@ -151,6 +158,13 @@ const updateScrollLeft = async () => {
 
 const onChangeTab = (item: TabItem, _index: number) => {
   if (item.disabled) return
+
+  // 如果值没有变化，只触发 click 事件
+  if (modelValue.value === item.name) {
+    emit('click', item)
+    return
+  }
+
   emit('update:modelValue', item.name)
   emit('change', item)
   emit('click', item)

package/core/useInputNumber/index.test.ts

@@ -0,0 +1,306 @@
+import { describe, test, expect } from 'vitest'
+import { formatNumericTypeString, minAndMax, useInputNumber } from '.'
+
+describe('formatNumericTypeString', () => {
+  test('should format basic numbers correctly', () => {
+    expect(formatNumericTypeString('123')).toBe('123')
+    expect(formatNumericTypeString('123.45')).toBe('123')
+    expect(formatNumericTypeString('abc123')).toBe('123')
+    expect(formatNumericTypeString('12.34.56', Number.MAX_SAFE_INTEGER.toString().length, 2)).toBe(
+      '12.34',
+    )
+  })
+
+  test('should format numbers with decimal length', () => {
+    expect(formatNumericTypeString('123.456', Number.MAX_SAFE_INTEGER.toString().length, 2)).toBe(
+      '123.45',
+    )
+    expect(formatNumericTypeString('123.4', Number.MAX_SAFE_INTEGER.toString().length, 2)).toBe(
+      '123.4',
+    )
+    expect(formatNumericTypeString('123', Number.MAX_SAFE_INTEGER.toString().length, 2)).toBe('123')
+    expect(
+      formatNumericTypeString('123.123456', Number.MAX_SAFE_INTEGER.toString().length, 3),
+    ).toBe('123.123')
+  })
+
+  test('should format numbers with integer length limit', () => {
+    expect(formatNumericTypeString('123456', 3)).toBe('123')
+    expect(formatNumericTypeString('12', 3)).toBe('12')
+    expect(formatNumericTypeString('1234.56', 3, 2)).toBe('123.56')
+  })
+
+  test('should remove leading dot', () => {
+    expect(formatNumericTypeString('.123')).toBe('123')
+    expect(formatNumericTypeString('.123', Number.MAX_SAFE_INTEGER.toString().length, 2)).toBe(
+      '123',
+    )
+  })
+
+  test('should handle negative numbers when allowNegative is true', () => {
+    expect(
+      formatNumericTypeString('-123', Number.MAX_SAFE_INTEGER.toString().length, 0, true),
+    ).toBe('-123')
+    expect(
+      formatNumericTypeString('-123.45', Number.MAX_SAFE_INTEGER.toString().length, 2, true),
+    ).toBe('-123.45')
+    expect(
+      formatNumericTypeString('-123.456', Number.MAX_SAFE_INTEGER.toString().length, 2, true),
+    ).toBe('-123.45')
+    expect(
+      formatNumericTypeString('-0.5', Number.MAX_SAFE_INTEGER.toString().length, 2, true),
+    ).toBe('-0.5')
+  })
+
+  test('should remove negative sign when allowNegative is false', () => {
+    expect(
+      formatNumericTypeString('-123', Number.MAX_SAFE_INTEGER.toString().length, 0, false),
+    ).toBe('123')
+    expect(
+      formatNumericTypeString('-123.45', Number.MAX_SAFE_INTEGER.toString().length, 2, false),
+    ).toBe('123.45')
+  })
+
+  test('should handle negative numbers with integer length limit', () => {
+    expect(formatNumericTypeString('-123456', 3, 0, true)).toBe('-123')
+    expect(formatNumericTypeString('-12', 3, 0, true)).toBe('-12')
+    expect(formatNumericTypeString('-1234.56', 3, 2, true)).toBe('-123.56')
+  })
+
+  test('should handle multiple negative signs correctly', () => {
+    expect(
+      formatNumericTypeString('--123', Number.MAX_SAFE_INTEGER.toString().length, 0, true),
+    ).toBe('-123')
+    expect(
+      formatNumericTypeString('-12-3', Number.MAX_SAFE_INTEGER.toString().length, 0, true),
+    ).toBe('-123')
+    expect(
+      formatNumericTypeString('1-23', Number.MAX_SAFE_INTEGER.toString().length, 0, true),
+    ).toBe('123')
+  })
+
+  test('should handle edge cases', () => {
+    expect(formatNumericTypeString('')).toBe('')
+    expect(formatNumericTypeString('0')).toBe('0')
+    expect(formatNumericTypeString('-0', Number.MAX_SAFE_INTEGER.toString().length, 0, true)).toBe(
+      '-0',
+    )
+    expect(formatNumericTypeString('abc')).toBe('')
+    expect(formatNumericTypeString('-', Number.MAX_SAFE_INTEGER.toString().length, 0, true)).toBe(
+      '-',
+    )
+  })
+})
+
+describe('minAndMax', () => {
+  test('should limit value by min', () => {
+    expect(minAndMax(5, 10)).toBe(10)
+    expect(minAndMax(10, 10)).toBe(10)
+    expect(minAndMax(15, 10)).toBe(15)
+  })
+
+  test('should limit value by max', () => {
+    expect(minAndMax(5, undefined, 10)).toBe(5)
+    expect(minAndMax(10, undefined, 10)).toBe(10)
+    expect(minAndMax(15, undefined, 10)).toBe(10)
+  })
+
+  test('should limit value by both min and max', () => {
+    expect(minAndMax(5, 10, 20)).toBe(10)
+    expect(minAndMax(15, 10, 20)).toBe(15)
+    expect(minAndMax(25, 10, 20)).toBe(20)
+  })
+
+  test('should handle negative min and max', () => {
+    expect(minAndMax(-15, -10, 10)).toBe(-10)
+    expect(minAndMax(-5, -10, 10)).toBe(-5)
+    expect(minAndMax(15, -10, 10)).toBe(10)
+    expect(minAndMax(-20, -10)).toBe(-10)
+  })
+
+  test('should return value when no limits provided', () => {
+    expect(minAndMax(5)).toBe(5)
+    expect(minAndMax(-5)).toBe(-5)
+    expect(minAndMax(0)).toBe(0)
+  })
+})
+
+describe('useInputNumber', () => {
+  test('should initialize with default values', () => {
+    const { numberVal, safeNumberVal } = useInputNumber({})
+
+    expect(numberVal.value).toBe(0)
+    expect(safeNumberVal.value).toBe(0)
+  })
+
+  test('should initialize with provided modelValue', () => {
+    const { numberVal, safeNumberVal } = useInputNumber({ modelValue: 10 })
+
+    expect(numberVal.value).toBe(10)
+    expect(safeNumberVal.value).toBe(10)
+  })
+
+  test('should initialize with string modelValue', () => {
+    const { numberVal, safeNumberVal } = useInputNumber({ modelValue: '25' })
+
+    expect(numberVal.value).toBe(25)
+    expect(safeNumberVal.value).toBe(25)
+  })
+
+  test('should handle negative modelValue', () => {
+    const { numberVal, safeNumberVal } = useInputNumber({ modelValue: -10, allowNegative: true })
+
+    expect(numberVal.value).toBe(-10)
+    expect(safeNumberVal.value).toBe(-10)
+  })
+
+  test('should add value correctly', () => {
+    const { numberVal, onAdd } = useInputNumber({ modelValue: 5, step: 2 })
+
+    expect(numberVal.value).toBe(5)
+    const newVal = onAdd()
+    expect(newVal).toBe(7)
+    expect(numberVal.value).toBe(7)
+  })
+
+  test('should reduce value correctly', () => {
+    const { numberVal, onReduce } = useInputNumber({ modelValue: 10, step: 3 })
+
+    expect(numberVal.value).toBe(10)
+    const newVal = onReduce()
+    expect(newVal).toBe(7)
+    expect(numberVal.value).toBe(7)
+  })
+
+  test('should reduce to negative value when allowNegative is true', () => {
+    const { numberVal, onReduce } = useInputNumber({
+      modelValue: 5,
+      step: 10,
+      min: -20,
+      allowNegative: true,
+    })
+
+    expect(numberVal.value).toBe(5)
+    const newVal = onReduce()
+    expect(newVal).toBe(-5)
+    expect(numberVal.value).toBe(-5)
+  })
+
+  test('should respect min limit', () => {
+    const { numberVal, onReduce } = useInputNumber({ modelValue: 5, step: 10, min: 0 })
+
+    expect(numberVal.value).toBe(5)
+    const newVal = onReduce()
+    expect(newVal).toBe(0)
+    expect(numberVal.value).toBe(0)
+  })
+
+  test('should respect max limit', () => {
+    const { numberVal, onAdd } = useInputNumber({ modelValue: 15, step: 10, max: 20 })
+
+    expect(numberVal.value).toBe(15)
+    const newVal = onAdd()
+    expect(newVal).toBe(20)
+    expect(numberVal.value).toBe(20)
+  })
+
+  test('should format decimal correctly', () => {
+    const { numberVal, onAdd } = useInputNumber({
+      modelValue: 0,
+      step: 0.1,
+      decimalLength: 2,
+      min: 0,
+    })
+
+    expect(numberVal.value).toBe(0)
+    onAdd()
+    expect(numberVal.value).toBe(0.1)
+    onAdd()
+    expect(numberVal.value).toBe(0.2)
+  })
+
+  test('should format value string correctly', () => {
+    const { getFormatVal } = useInputNumber({ intLength: 3, decimalLength: 2 })
+
+    expect(getFormatVal('123.456')).toBe('123.45')
+    expect(getFormatVal('1234.56')).toBe('123.56')
+    expect(getFormatVal('12.3')).toBe('12.3')
+  })
+
+  test('should format negative value string when allowNegative is true', () => {
+    const { getFormatVal } = useInputNumber({
+      intLength: 3,
+      decimalLength: 2,
+      allowNegative: true,
+    })
+
+    expect(getFormatVal('-123.456')).toBe('-123.45')
+    expect(getFormatVal('-1234.56')).toBe('-123.56')
+    expect(getFormatVal('-12.3')).toBe('-12.3')
+  })
+
+  test('should not format negative value string when allowNegative is false', () => {
+    const { getFormatVal } = useInputNumber({
+      intLength: 3,
+      decimalLength: 2,
+      allowNegative: false,
+    })
+
+    expect(getFormatVal('-123.456')).toBe('123.45')
+    expect(getFormatVal('-1234.56')).toBe('123.56')
+  })
+
+  test('should not update value when updateValue is false', () => {
+    const { numberVal, onAdd } = useInputNumber({ modelValue: 5, step: 2 })
+
+    expect(numberVal.value).toBe(5)
+    const newVal = onAdd(false)
+    expect(newVal).toBe(7)
+    expect(numberVal.value).toBe(5) // value should not be updated
+  })
+
+  test('should handle complex scenario with negative numbers', () => {
+    const { numberVal, onAdd, onReduce } = useInputNumber({
+      modelValue: 0,
+      step: 5,
+      min: -20,
+      max: 20,
+      allowNegative: true,
+    })
+
+    expect(numberVal.value).toBe(0)
+
+    // Add to positive
+    onAdd()
+    expect(numberVal.value).toBe(5)
+    onAdd()
+    expect(numberVal.value).toBe(10)
+    onAdd()
+    expect(numberVal.value).toBe(15)
+
+    // Try to exceed max
+    onAdd()
+    expect(numberVal.value).toBe(20)
+    onAdd()
+    expect(numberVal.value).toBe(20) // capped at max
+
+    // Reduce to negative
+    onReduce()
+    onReduce()
+    onReduce()
+    onReduce()
+    expect(numberVal.value).toBe(0)
+    onReduce()
+    expect(numberVal.value).toBe(-5)
+    onReduce()
+    expect(numberVal.value).toBe(-10)
+
+    // Try to exceed min
+    onReduce()
+    onReduce()
+    onReduce()
+    expect(numberVal.value).toBe(-20)
+    onReduce()
+    expect(numberVal.value).toBe(-20) // capped at min
+  })
+})

package/core/useInputNumber/index.ts

@@ -16,6 +16,8 @@ export interface UseInputNumberProps {
   intLength?: number
   /** 小数位长度 */
   decimalLength?: number
+  /** 是否允许输入负数 */
+  allowNegative?: boolean
 }
 
 export function useInputNumber(props: IncludeRefs<UseInputNumberProps>) {
@@ -28,6 +30,7 @@ export function useInputNumber(props: IncludeRefs<UseInputNumberProps>) {
     step: _props.step ?? 1,
     intLength: _props.intLength ?? Number.MAX_SAFE_INTEGER.toString().length,
     decimalLength: _props.decimalLength ?? 0,
+    allowNegative: _props.allowNegative ?? false,
   })
 
   const numberVal = ref<number | null>(
@@ -52,7 +55,7 @@ export function useInputNumber(props: IncludeRefs<UseInputNumberProps>) {
   )
 
   const getFormatVal = (text: InputNumberValue) => {
-    return formatNumericTypeString(text, state.intLength, state.decimalLength)
+    return formatNumericTypeString(text, state.intLength, state.decimalLength, state.allowNegative)
   }
 
   const onUpdate = (type: 'add' | 'reduce', updateValue = true) => {
@@ -96,13 +99,25 @@ export const formatNumericTypeString = (
   value: InputNumberValue,
   intLength = Number.MAX_SAFE_INTEGER.toString().length,
   decimalLength = 0,
+  allowNegative = false,
 ) => {
   // 根据整数位和小数位处理值
-  value = String(value)
+  const strValue = String(value)
+
+  // 移除所有非数字和点的字符
+  value = strValue
     .replace(/^\./, '')
-    .replace(/[^0-9.]/g, '')
+    .replace(allowNegative ? /[^0-9.-]/g : /[^0-9.]/g, '')
+    // 如果允许负数，只保留第一个负号，且只能在开头
+    .replace(allowNegative ? /(?!^)-/g : /-/g, '')
+
   const valSplit = value.split('.').slice(0, 2)
-  valSplit[0] = valSplit[0].slice(0, intLength)
+  // 处理整数部分（保留负号）
+  const intPart = valSplit[0]
+  const hasNegativeSign = intPart.startsWith('-')
+  const intDigits = intPart.replace('-', '')
+  valSplit[0] = (hasNegativeSign ? '-' : '') + intDigits.slice(0, intLength)
+
   if (typeof valSplit[1] !== 'undefined' && decimalLength) {
     valSplit[1] = valSplit[1].slice(0, decimalLength)
   } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "papayaui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "适用于uniapp的ui扩展库",
   "main": "index.ts",
   "module": "index.ts",