Skip to content

Commit

Permalink
refactor(input): using control-class prop replace input-class prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@qmhc
qmhc committed Jun 19, 2023
1 parent d0cc62c commit 8aba1ee
Show file tree
Hide file tree
Showing 12 changed files with 175 additions and 141 deletions.
14 changes: 11 additions & 3 deletions components/input/input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
useNameHelper,
useProps
} from '@vexip-ui/config'
import { debounce, isNull, noop, throttle, toNumber } from '@vexip-ui/utils'
import { debounce, isNull, noop, throttle, toNumber, warnOnce } from '@vexip-ui/utils'
import { inputProps } from './props'

import type { InputType } from './symbol'
Expand Down Expand Up @@ -73,7 +73,8 @@ export default defineComponent({
autocomplete: false,
readonly: false,
disabled: () => disabled.value,
inputClass: '',
inputClass: null,
controlClass: null,
debounce: false,
delay: null,
maxLength: 0,
Expand All @@ -89,6 +90,13 @@ export default defineComponent({
sync: false
})

if (!isNull(props.inputClass)) {
warnOnce(
"[vexip-ui:Input] 'input-class' prop has been deprecated, please " +
"use 'control-class' prop to replace it"
)
}

const initValue = toNotNullString(props.value)

const nh = useNameHelper('input')
Expand Down Expand Up @@ -479,7 +487,7 @@ export default defineComponent({
{hasPrefix.value && renderPrefix()}
<input
ref={inputControl}
class={[nh.be('control'), props.inputClass]}
class={[nh.be('control'), props.inputClass, props.controlClass]}
type={inputType.value}
value={formattedValue.value}
autofocus={props.autofocus}
Expand Down
1 change: 1 addition & 0 deletions components/input/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export const inputProps = buildProps({
readonly: booleanProp,
disabled: booleanProp,
inputClass: classProp,
controlClass: classProp,
debounce: booleanProp,
delay: Number,
maxLength: Number,
Expand Down
13 changes: 11 additions & 2 deletions components/number-input/number-input.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<input
ref="input"
type="text"
:class="[nh.be('control'), inputClass]"
:class="[nh.be('control'), props.inputClass, props.controlClass]"
:value="inputValue"
:autofocus="props.autofocus"
:autocomplete="props.autocomplete ? 'on' : 'off'"
Expand Down Expand Up @@ -102,7 +102,8 @@ import {
plus,
throttle,
toFixed,
toNumber
toNumber,
warnOnce
} from '@vexip-ui/utils'
import { numberInputProps } from './props'
Expand Down Expand Up @@ -163,6 +164,7 @@ export default defineComponent({
altStep: 0.1,
disabled: () => disabled.value,
inputClass: null,
controlClass: null,
debounce: false,
delay: null,
clearable: false,
Expand All @@ -175,6 +177,13 @@ export default defineComponent({
emptyType: 'NaN'
})
if (!isNull(props.inputClass)) {
warnOnce(
"[vexip-ui:NumberInput] 'input-class' prop has been deprecated, please " +
"use 'control-class' prop to replace it"
)
}
const nh = useNameHelper('number-input')
const focused = ref(false)
const currentValue = ref<string | number>(props.value)
Expand Down
1 change: 1 addition & 0 deletions components/number-input/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export const numberInputProps = buildProps({
altStep: Number,
disabled: booleanProp,
inputClass: classProp,
controlClass: classProp,
debounce: booleanProp,
delay: Number,
clearable: booleanProp,
Expand Down
10 changes: 9 additions & 1 deletion components/textarea/props.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import { booleanProp, buildProps, eventProp, localeProp, stateProp } from '@vexip-ui/config'
import {
booleanProp,
buildProps,
classProp,
eventProp,
localeProp,
stateProp
} from '@vexip-ui/config'

import type { ExtractPropTypes, PropType } from 'vue'
import type { IconEffect } from '@/components/icon'
Expand All @@ -24,6 +31,7 @@ export const textareaProps = buildProps({
loadingLock: booleanProp,
loadingEffect: String as PropType<IconEffect>,
sync: booleanProp,
controlClass: classProp,
onFocus: eventProp<(event: FocusEvent) => void>(),
onBlur: eventProp<(event: FocusEvent) => void>(),
onInput: eventProp<(value: string) => void>(),
Expand Down
5 changes: 3 additions & 2 deletions components/textarea/textarea.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div :id="idFor" :class="className" @click="textarea?.focus()">
<textarea
ref="textarea"
:class="nh.be('control')"
:class="[nh.be('control'), props.controlClass]"
:value="currentValue"
:rows="props.rows"
:autofocus="props.autofocus"
Expand Down Expand Up @@ -90,7 +90,8 @@ export default defineComponent({
loadingIcon: null,
loadingLock: false,
loadingEffect: null,
sync: false
sync: false,
controlClass: null
})
const nh = useNameHelper('textarea')
Expand Down
69 changes: 35 additions & 34 deletions docs/en-US/component/input.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,40 +110,41 @@ Add the `transparent` prop to remove the original style, and then you can wrap t

### Input Props

| Name | Type | Description | Default | Since |
| -------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------- | -------- |
| type | `'text' \| 'password' \| 'date' \| 'datetime' \| 'time'` | The type of input, where the time-related type is the native type | `'text'` | - |
| size | `'small' \| 'default' \| 'large'` | The size of input | `'default'` | - |
| state | `'default' \| 'success' \| 'error' \| 'warning'` | The state of input | `'default'` | - |
| prefix | `Record<string, any>` | Prefix icon, invalid when using prefix slot | `null` | - |
| prefix-color | `string` | The color of the prefix content, affects the prefix slot | `''` | - |
| suffix | `Record<string, any>` | Suffix icon, invalid when using suffix slot | `null` | - |
| suffix-color | `string` | The color of the suffix content, which affects the suffix slot | `''` | - |
| formatter | `(value: string \| number) => string \| number` | Set the method to format the value of the input after each value change | `null` | - |
| accessor | `(value: string) => any` | Set the method for reading the input value when the event is called back | `null` | - |
| value | `string \| number` | Set the value of the input, can use `v-model` two-way binding | `''` | - |
| placeholder | `string` | Set the placeholder for the input | `''` | - |
| autofocus | `boolean` | Set the autofocus of the input field | `false` | - |
| spellcheck | `boolean` | Set spellcheck for input fields | `false` | - |
| autocomplete | `boolean` | Set autocomplete for input fields | `false` | - |
| readonly | `boolean` | Set the read-only property of the input | `false` | - |
| disabled | `boolean` | Det whether to disable the input | `false` | - |
| input-class | `ClassType` | Set the class name of the input `<input>` element | `''` | - |
| debounce | `boolean` | Enable debounce for `input` event, by default is throttle, not reactive prop | `false` | - |
| delay | `number` | Set `input` event throttle or debounce delay, the default throttle is `16` ms, and debounce is `100` ms, not reactive prop | `false` | `2.1.25` |
| clearable | `boolean` | Set whether the value can be cleared | `false` | - |
| max-length | `number` | Set the maximum length of the input content, when the value is `0`, there is no limit | `0` | - |
| before | `string` | Set the front content of the input | `''` | - |
| after | `string` | Set the content after the input | `''` | - |
| plain-password | `boolean` | Set whether to show the button to toggle show plain password | `false` | - |
| clearable | `boolean` | Set whether the value can be cleared | `false` | - |
| loading | `boolean` | Set whether is loading | `false` | `2.0.0` |
| loading-icon | `Record<string, any>` | Set the loading icon | `Spinner` | `2.0.0` |
| loading-lock | `boolean` | Set whether to be read-only when loading | `false` | `2.0.0` |
| loading-effect | `string` | Set the effect animation for the loading icon | `false` | `2.1.0` |
| transparent | `boolean` | Set whether to be transparent | `false` | `2.0.2` |
| sync | `boolean` | Set whether enable sync input mode | `false` | `2.0.6` |
| locale | `LocaleConfig['input']` | Set the locale config | `null` | `2.1.0` |
| Name | Type | Description | Default | Since |
| --------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------- | -------- |
| type | `'text' \| 'password' \| 'date' \| 'datetime' \| 'time'` | The type of input, where the time-related type is the native type | `'text'` | - |
| size | `'small' \| 'default' \| 'large'` | The size of input | `'default'` | - |
| state | `'default' \| 'success' \| 'error' \| 'warning'` | The state of input | `'default'` | - |
| prefix | `Record<string, any>` | Prefix icon, invalid when using prefix slot | `null` | - |
| prefix-color | `string` | The color of the prefix content, affects the prefix slot | `''` | - |
| suffix | `Record<string, any>` | Suffix icon, invalid when using suffix slot | `null` | - |
| suffix-color | `string` | The color of the suffix content, which affects the suffix slot | `''` | - |
| formatter | `(value: string \| number) => string \| number` | Set the method to format the value of the input after each value change | `null` | - |
| accessor | `(value: string) => any` | Set the method for reading the input value when the event is called back | `null` | - |
| value | `string \| number` | Set the value of the input, can use `v-model` two-way binding | `''` | - |
| placeholder | `string` | Set the placeholder for the input | `''` | - |
| autofocus | `boolean` | Set the autofocus of the input field | `false` | - |
| spellcheck | `boolean` | Set spellcheck for input fields | `false` | - |
| autocomplete | `boolean` | Set autocomplete for input fields | `false` | - |
| readonly | `boolean` | Set the read-only property of the input | `false` | - |
| disabled | `boolean` | Det whether to disable the input | `false` | - |
| ~~input-class~~ | `ClassType` | Set the class name of the input `<input>` element | `null` | - |
| control-class | `ClassType` | Set the class name of the control element | `null` | `2.1.25` |
| debounce | `boolean` | Enable debounce for `input` event, by default is throttle, not reactive prop | `false` | - |
| delay | `number` | Set `input` event throttle or debounce delay, the default throttle is `16` ms, and debounce is `100` ms, not reactive prop | `false` | `2.1.25` |
| clearable | `boolean` | Set whether the value can be cleared | `false` | - |
| max-length | `number` | Set the maximum length of the input content, when the value is `0`, there is no limit | `0` | - |
| before | `string` | Set the front content of the input | `''` | - |
| after | `string` | Set the content after the input | `''` | - |
| plain-password | `boolean` | Set whether to show the button to toggle show plain password | `false` | - |
| clearable | `boolean` | Set whether the value can be cleared | `false` | - |
| loading | `boolean` | Set whether is loading | `false` | `2.0.0` |
| loading-icon | `Record<string, any>` | Set the loading icon | `Spinner` | `2.0.0` |
| loading-lock | `boolean` | Set whether to be read-only when loading | `false` | `2.0.0` |
| loading-effect | `string` | Set the effect animation for the loading icon | `false` | `2.1.0` |
| transparent | `boolean` | Set whether to be transparent | `false` | `2.0.2` |
| sync | `boolean` | Set whether enable sync input mode | `false` | `2.0.6` |
| locale | `LocaleConfig['input']` | Set the locale config | `null` | `2.1.0` |

### Input Events

Expand Down
Loading

0 comments on commit 8aba1ee

Please sign in to comment.