Skip to content

Commit

Permalink
feat: support custom form component and refactor form-details and ref…
Browse files Browse the repository at this point in the history 
…actor form styles
  • Loading branch information
@haoziqaq
haoziqaq committed Nov 5, 2022
1 parent c6d132d commit 00ec07b
Show file tree
Hide file tree
Showing 43 changed files with 958 additions and 193 deletions.
2 changes: 2 additions & 0 deletions packages/varlet-eslint-config/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ module.exports = {
es6: true,
node: true,
browser: true,
'vue/setup-compiler-macros': true,
},
rules: {
'max-classes-per-file': 'off',
Expand Down Expand Up @@ -50,6 +51,7 @@ module.exports = {
'vue/attributes-order': 'off',
'vue/require-default-prop': 'off',
'vue/require-explicit-emits': 'off',
'vue/multi-word-component-names': 'off',
'@typescript-eslint/camelcase': 'off',
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
Expand Down
4 changes: 2 additions & 2 deletions packages/varlet-eslint-config/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,6 @@
"eslint-config-airbnb-base": "^14.2.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-vue": "^7.1.0"
"eslint-plugin-vue": "^9.7.0"
}
}
}
24 changes: 20 additions & 4 deletions packages/varlet-ui/src/checkbox-group/__tests__/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,8 +176,16 @@ exports[`test checkbox group validation 1`] = `
</div>
<transition-stub>
<div class=\\"var-form-details\\">
<div class=\\"var-form-details__message\\">至少选一个</div>
<div class=\\"var-form-details__length\\"></div>
<div class=\\"var-form-details__error-message\\">
<transition-stub>
<div>至少选一个</div>
</transition-stub>
</div>
<div class=\\"var-form-details__extra-message\\">
<transition-stub>
<!--v-if-->
</transition-stub>
</div>
</div>
</transition-stub>
</div>"
Expand Down Expand Up @@ -219,8 +227,16 @@ exports[`test checkbox validation 1`] = `
</div>
<transition-stub>
<div class=\\"var-form-details\\">
<div class=\\"var-form-details__message\\">您必须勾选</div>
<div class=\\"var-form-details__length\\"></div>
<div class=\\"var-form-details__error-message\\">
<transition-stub>
<div>您必须勾选</div>
</transition-stub>
</div>
<div class=\\"var-form-details__extra-message\\">
<transition-stub>
<!--v-if-->
</transition-stub>
</div>
</div>
</transition-stub>
</div>"
Expand Down
8 changes: 4 additions & 4 deletions packages/varlet-ui/src/checkbox-group/__tests__/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,13 +190,13 @@ test('test checkbox validation', async () => {
wrapper.vm.validate()
await delay(16)

expect(wrapper.find('.var-form-details__message').text()).toBe('您必须勾选')
expect(wrapper.find('.var-form-details__error-message').text()).toBe('您必须勾选')
expect(wrapper.html()).toMatchSnapshot()

await wrapper.find('.var-checkbox').trigger('click')
await delay(16)

expect(wrapper.find('.var-form-details__message').exists()).toBeFalsy()
expect(wrapper.find('.var-form-details__error-message').exists()).toBeFalsy()
expect(wrapper.html()).toMatchSnapshot()

wrapper.vm.reset()
Expand Down Expand Up @@ -255,7 +255,7 @@ test('test checkbox group validation', async () => {

checkboxGroup.validate()
await delay(16)
expect(wrapper.find('.var-form-details__message').text()).toBe('至少选一个')
expect(wrapper.find('.var-form-details__error-message').text()).toBe('至少选一个')
expect(wrapper.html()).toMatchSnapshot()

checkboxGroup.reset()
Expand All @@ -265,7 +265,7 @@ test('test checkbox group validation', async () => {
await wrapper.find('.var-checkbox').trigger('click')
await delay(16)

expect(wrapper.find('.var-form-details__message').exists()).toBeFalsy()
expect(wrapper.find('.var-form-details__error-message').exists()).toBeFalsy()
expect(wrapper.html()).toMatchSnapshot()

wrapper.unmount()
Expand Down
6 changes: 6 additions & 0 deletions packages/varlet-ui/src/checkbox/checkbox.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,11 @@
align-items: center;
padding: var(--checkbox-action-padding);
border-radius: 50%;
transition: background-color 0.25s, color 0.25s;
}

&__text {
transition: background-color 0.25s, color 0.25s;
}

&__icon[var-checkbox-cover] {
Expand All @@ -63,6 +68,7 @@

&--disabled {
color: var(--checkbox-disabled-color);
cursor: not-allowed;
}

&--error {
Expand Down
38 changes: 33 additions & 5 deletions packages/varlet-ui/src/counter/Counter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,35 @@
<var-icon
var-counter-cover
name="minus"
:class="classes(n('decrement-button'), [!decrementButton, n('--hidden')])"
:class="
classes(
n('decrement-button'),
[!decrementButton, n('--hidden')],
[disabled || formDisabled, `${n('--text-disabled')} ${n('--not-allowed')}`]
)
"
:style="{
width: toSizeUnit(buttonSize),
height: toSizeUnit(buttonSize),
}"
v-ripple="{
disabled: !ripple || disabled || readonly || disableDecrement || !decrementButton || isMin,
disabled:
!ripple ||
disabled ||
formDisabled ||
readonly ||
formReadonly ||
disableDecrement ||
!decrementButton ||
isMin,
}"
@click="decrement"
@touchstart="pressDecrement"
@touchend="releaseDecrement"
@touchcancel="releaseDecrement"
/>
<input
:class="n('input')"
:class="classes(n('input'), [disabled || formDisabled, `${n('--text-disabled')} ${n('--not-allowed')}`])"
:style="{
width: toSizeUnit(inputWidth),
fontSize: toSizeUnit(inputTextSize),
Expand All @@ -43,13 +57,27 @@
<var-icon
var-counter-cover
name="plus"
:class="classes(n('increment-button'), [!incrementButton, n('--hidden')])"
:class="
classes(
n('increment-button'),
[!incrementButton, n('--hidden')],
[disabled || formDisabled, `${n('--text-disabled')} ${n('--not-allowed')}`]
)
"
:style="{
width: toSizeUnit(buttonSize),
height: toSizeUnit(buttonSize),
}"
v-ripple="{
disabled: !ripple || disabled || readonly || disableIncrement || !incrementButton || isMax,
disabled:
!ripple ||
disabled ||
readonly ||
formDisabled ||
formReadonly ||
disableIncrement ||
!incrementButton ||
isMax,
}"
@click="increment"
@touchstart="pressIncrement"
Expand Down
14 changes: 11 additions & 3 deletions packages/varlet-ui/src/counter/__tests__/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ exports[`test counter example 1`] = `
</div>
<div class=\\"app-type\\">禁用</div>
<div class=\\"var-counter var--box\\">
<div class=\\"var-counter__controller var-elevation--2 var-counter--disabled\\"><i class=\\"var-icon var-icon--set var-icon-minus var-counter__decrement-button\\" style=\\"transition: transform 0ms;\\" var-counter-cover=\\"\\"></i><input class=\\"var-counter__input\\" inputmode=\\"numeric\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-counter__increment-button\\" style=\\"transition: transform 0ms;\\" var-counter-cover=\\"\\"></i></div>
<div class=\\"var-counter__controller var-elevation--2 var-counter--disabled\\"><i class=\\"var-icon var-icon--set var-icon-minus var-counter__decrement-button var-counter--text-disabled var-counter--not-allowed\\" style=\\"transition: transform 0ms;\\" var-counter-cover=\\"\\"></i><input class=\\"var-counter__input var-counter--text-disabled var-counter--not-allowed\\" inputmode=\\"numeric\\" disabled=\\"\\"><i class=\\"var-icon var-icon--set var-icon-plus var-counter__increment-button var-counter--text-disabled var-counter--not-allowed\\" style=\\"transition: transform 0ms;\\" var-counter-cover=\\"\\"></i></div>
<transition-stub>
<!--v-if-->
</transition-stub>
Expand Down Expand Up @@ -72,8 +72,16 @@ exports[`test counter validation 1`] = `
<div class=\\"var-counter__controller var-elevation--2 var-counter--error\\"><i class=\\"var-icon var-icon--set var-icon-minus var-counter__decrement-button\\" style=\\"transition: transform 0ms;\\" var-counter-cover=\\"\\"></i><input class=\\"var-counter__input\\" inputmode=\\"numeric\\"><i class=\\"var-icon var-icon--set var-icon-plus var-counter__increment-button\\" style=\\"transition: transform 0ms;\\" var-counter-cover=\\"\\"></i></div>
<transition-stub>
<div class=\\"var-form-details\\">
<div class=\\"var-form-details__message\\">必须大于0</div>
<div class=\\"var-form-details__length\\"></div>
<div class=\\"var-form-details__error-message\\">
<transition-stub>
<div>必须大于0</div>
</transition-stub>
</div>
<div class=\\"var-form-details__extra-message\\">
<transition-stub>
<!--v-if-->
</transition-stub>
</div>
</div>
</transition-stub>
</div>"
Expand Down
4 changes: 2 additions & 2 deletions packages/varlet-ui/src/counter/__tests__/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,11 +161,11 @@ test('test counter validation', async () => {
await delay(16)

expect(wrapper.html()).toMatchSnapshot()
expect(wrapper.find('.var-form-details__message').text()).toBe('必须大于0')
expect(wrapper.find('.var-form-details__error-message').text()).toBe('必须大于0')

await wrapper.find('.var-counter__increment-button').trigger('click')
await delay(16)
expect(wrapper.find('.var-form-details__message').exists()).toBeFalsy()
expect(wrapper.find('.var-form-details__error-message').exists()).toBeFalsy()

counter.reset()
await delay(16)
Expand Down
19 changes: 15 additions & 4 deletions packages/varlet-ui/src/counter/counter.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@
--counter-input-font-size: 14px;
--counter-button-size: 28px;
--counter-button-icon-size: 100%;
--counter-disabled-color: var(--color-text-disabled);
--input-error-color: var(--color-danger);
--counter-disabled-color: var(--color-disabled);
--counter-disabled-text-color: var(--color-text-disabled);
--counter-error-color: var(--color-danger);
}

.var-counter {
Expand All @@ -23,7 +24,7 @@
border-radius: var(--counter-button-size);
padding: var(--counter-padding);
background: var(--counter-background);
transition: background-color 0.25s;
transition: color 0.25s, background-color 0.25s;
}

&__decrement-button[var-counter-cover] {
Expand Down Expand Up @@ -66,13 +67,23 @@

&--disabled {
background: var(--counter-disabled-color);
cursor: not-allowed;
}

&--text-disabled,
&--text-disabled[var-counter-cover] {
color: var(--counter-disabled-text-color);
}

&--not-allowed {
cursor: not-allowed !important;
}

&--hidden {
opacity: 0;
}

&--error {
background: var(--color-danger);
background: var(--counter-error-color);
}
}
25 changes: 13 additions & 12 deletions packages/varlet-ui/src/counter/docs/en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,15 +197,16 @@ const value = ref(0)
### Style Variables
Here are the CSS variables used by the component, Styles can be customized using [StyleProvider](#/en-US/style-provider)

| Variable | Default |
| --- | --- |
| `--counter-padding` | `0 4px` |
| `--counter-font-color` | `#fff` |
| `--counter-background` | `var(--color-primary)` |
| `--counter-input-width` | `28px` |
| `--counter-input-margin` | `0 4px` |
| `--counter-input-font-size` | `14px` |
| `--counter-button-size` | `28px` |
| `--counter-button-icon-size` | `100%` |
| `--counter-disabled-color` | `var(--color-text-disabled)` |
| `--input-error-color` | `var(--color-danger)` |
| Variable | Default |
|---------------------------------|------------------------------|
| `--counter-padding` | `0 4px` |
| `--counter-font-color` | `#fff` |
| `--counter-background` | `var(--color-primary)` |
| `--counter-input-width` | `28px` |
| `--counter-input-margin` | `0 4px` |
| `--counter-input-font-size` | `14px` |
| `--counter-button-size` | `28px` |
| `--counter-button-icon-size` | `100%` |
| `--counter-disabled-color` | `var(--color-disabled)` |
| `--counter-disabled-text-color` | `var(--color-text-disabled)` |
| `--counter-error-color` | `var(--color-danger)` |
25 changes: 13 additions & 12 deletions packages/varlet-ui/src/counter/docs/zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,15 +197,16 @@ const value = ref(0)
### 样式变量
以下为组件使用的 css 变量，可以使用 [StyleProvider 组件](#/zh-CN/style-provider) 进行样式定制

| 变量名 | 默认值 |
| --- | --- |
| `--counter-padding` | `0 4px` |
| `--counter-font-color` | `#fff` |
| `--counter-background` | `var(--color-primary)` |
| `--counter-input-width` | `28px` |
| `--counter-input-margin` | `0 4px` |
| `--counter-input-font-size` | `14px` |
| `--counter-button-size` | `28px` |
| `--counter-button-icon-size` | `100%` |
| `--counter-disabled-color` | `var(--color-text-disabled)` |
| `--input-error-color` | `var(--color-danger)` |
| 变量名 | 默认值 |
|---------------------------------|------------------------------|
| `--counter-padding` | `0 4px` |
| `--counter-font-color` | `#fff` |
| `--counter-background` | `var(--color-primary)` |
| `--counter-input-width` | `28px` |
| `--counter-input-margin` | `0 4px` |
| `--counter-input-font-size` | `14px` |
| `--counter-button-size` | `28px` |
| `--counter-button-icon-size` | `100%` |
| `--counter-disabled-color` | `var(--color-disabled)` |
| `--counter-disabled-text-color` | `var(--color-text-disabled)` |
| `--counter-error-color` | `var(--color-danger)` |
18 changes: 15 additions & 3 deletions packages/varlet-ui/src/form-details/FormDetails.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,20 @@
<template>
<transition :name="n()">
<div :class="n()" v-if="errorMessage || maxlengthText">
<div :class="n('message')">{{ errorMessage }}</div>
<div :class="n('length')">{{ maxlengthText }}</div>
<div :class="n()" v-if="errorMessage || extraMessage">
<div :class="n('error-message')">
<transition :name="n('message')">
<div v-if="errorMessage">
{{ errorMessage }}
</div>
</transition>
</div>
<div :class="n('extra-message')">
<transition :name="n('message')">
<div v-if="extraMessage">
{{ extraMessage }}
</div>
</transition>
</div>
</div>
</transition>
</template>
Expand Down
Empty file removed packages/varlet-ui/src/form-details/docs/en-US.md
View file
Empty file.
8 changes: 8 additions & 0 deletions packages/varlet-ui/src/form-details/docs/zh-CN.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
## API

### 属性

| 参数 | 说明 | 类型 | 默认值 |
|-----------------|---------| --- | -- |
| `error-message` | 错误信息 | _string_ | `-` |
| `extra-message` | 附加信息 | _string_ | `-` |
Loading

0 comments on commit 00ec07b

Please sign in to comment.