Skip to content
This repository was archived by the owner on Nov 30, 2020. It is now read-only.

Commit 001a0dd

Browse files
tychenjiajuntychenjiajun
authored
feat(text-field): optimize instantiation process (#490)
* chore(package): update @babel/core to version 7.4.0 * chore(package): update @babel/plugin-proposal-object-rest-spread to version 7.4.0 * chore(package): update @babel/preset-env to version 7.4.1 * feat(text-field-icon): add icon prop fix(text-field-character-counter): avoid props being overwrite unexpectedly fix(text-field): lint docs(text-field): simplify * fix(text-field): make props like outlined, fullWidth more reactive; add provide/inject for better instantiation * feat: use instances created by parent Following component will use instance created by parent, if their parent is `m-text-field`: `m-floating-label`, `m-line-ripple`, `m-notched-outline` and `m-text-field-icon` * fix(text-field): helper text doesn't instantiate correctly feat(text-field): add helper line component BREAKING CHANGE: now helper text and character counter should be placed in the helper line component * test(text-field): update snapshots and lint files * feat(text-field): add slot characterCounter for textarea update docs * test(text-field): update snapshots
1 parent 79b577e commit 001a0dd

File tree

13 files changed

+494
-407
lines changed

13 files changed

+494
-407
lines changed

‎components/floating-label/FloatingLabel.vue‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
<template>
2-
<span
3-
v-if="$parent.$options._componentTag === 'm-select'"
4-
:class="classes"
5-
class="mdc-floating-label"
6-
v-bind="$attrs"
7-
>
8-
<slot />
9-
</span>
102
<label
11-
v-else
123
:class="classes"
134
class="mdc-floating-label"
145
v-bind="$attrs"
6+
@_init="onParentInit"
157
>
168
<slot />
179
</label>
@@ -24,6 +16,7 @@ import { baseComponentMixin, themeClassMixin } from '../base'
2416
2517
export default {
2618
mixins: [baseComponentMixin, themeClassMixin],
19+
inject: ['getLabel'],
2720
props: {
2821
floatAbove: {
2922
type: Boolean,
@@ -48,10 +41,23 @@ export default {
4841
}
4942
},
5043
mounted () {
51-
this.mdcFloatingLabel = MDCFloatingLabel.attachTo(this.$el)
44+
if (!(this.getLabel instanceof Function)) { // can not be init by parent
45+
this.mdcFloatingLabel = MDCFloatingLabel.attachTo(this.$el)
46+
}
5247
},
5348
beforeDestroy () {
54-
this.mdcFloatingLabel.destroy()
49+
if (this.mdcFloatingLabel instanceof MDCFloatingLabel) {
50+
this.mdcFloatingLabel.destroy()
51+
}
52+
},
53+
methods: {
54+
onParentInit () {
55+
const label = this.getLabel()
56+
if (label instanceof MDCFloatingLabel) {
57+
if (this.mdcFloatingLabel instanceof MDCFloatingLabel) this.mdcFloatingLabel.destroy()
58+
this.mdcFloatingLabel = label
59+
}
60+
}
5561
}
5662
}
5763
</script>

‎components/line-ripple/LineRipple.vue‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="mdc-line-ripple" />
2+
<div class="mdc-line-ripple" @_init="onParentInit"/>
33
</template>
44

55
<script>
@@ -9,6 +9,7 @@ import { baseComponentMixin, themeClassMixin } from '../base'
99
1010
export default {
1111
mixins: [baseComponentMixin, themeClassMixin],
12+
inject: ['getLineRipple'],
1213
props: {
1314
activate: {
1415
type: Boolean,
@@ -25,26 +26,35 @@ export default {
2526
}
2627
},
2728
watch: {
28-
activate () {
29-
if (this.activate) this.mdcLineRipple.activate()
30-
else this.mdcLineRipple.deactivate()
29+
activate (val) {
30+
val ? this.mdcLineRipple.activate() : this.mdcLineRipple.deactivate()
3131
},
3232
rippleCenter () {
3333
this.setRippleCenter(this.rippleCenter)
3434
}
3535
},
3636
mounted () {
37-
this.mdcLineRipple = MDCLineRipple.attachTo(this.$el)
38-
if (this.rippleCenter) this.setRippleCenter(this.rippleCenter)
37+
if (!(this.getLineRipple instanceof Function)) { // can not be init by parent
38+
this.mdcLineRipple = MDCLineRipple.attachTo(this.$el)
39+
if (this.rippleCenter) this.setRippleCenter(this.rippleCenter)
40+
}
3941
},
4042
beforeDestroy () {
41-
if (typeof this.mdcLineRipple !== 'undefined') {
43+
if (this.mdcLineRipple instanceof MDCLineRipple) {
4244
this.mdcLineRipple.destroy()
4345
}
4446
},
4547
methods: {
4648
setRippleCenter (xCoordinate) {
4749
this.mdcLineRipple.setRippleCenter(xCoordinate)
50+
},
51+
onParentInit () {
52+
const lineRipple = this.getLineRipple()
53+
if (lineRipple instanceof MDCLineRipple) {
54+
if (this.mdcLineRipple instanceof MDCLineRipple) this.mdcLineRipple.destroy()
55+
this.mdcLineRipple = lineRipple
56+
if (this.rippleCenter) this.setRippleCenter(this.rippleCenter)
57+
}
4858
}
4959
}
5060
}

‎components/notched-outline/NotchedOutline.vue‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="mdc-notched-outline">
2+
<div class="mdc-notched-outline" @_init="onParentInit">
33
<div class="mdc-notched-outline__leading" />
44
<div class="mdc-notched-outline__notch">
55
<slot />
@@ -13,18 +13,30 @@ import { baseComponentMixin, themeClassMixin } from '../base'
1313
1414
export default {
1515
mixins: [baseComponentMixin, themeClassMixin],
16+
inject: ['getOutline'],
1617
data () {
1718
return {
1819
mdcNotchedOutline: undefined
1920
}
2021
},
2122
mounted () {
22-
this.mdcNotchedOutline = MDCNotchedOutline.attachTo(this.$el)
23+
if (!(this.getOutline instanceof Function)) { // can not be init by parent
24+
this.mdcNotchedOutline = MDCNotchedOutline.attachTo(this.$el)
25+
}
2326
},
2427
beforeDestroy () {
25-
if (typeof this.mdcNotchedOutline !== 'undefined') {
28+
if (this.mdcNotchedOutline instanceof MDCNotchedOutline) {
2629
this.mdcNotchedOutline.destroy()
2730
}
31+
},
32+
methods: {
33+
onParentInit () {
34+
const outline = this.getOutline()
35+
if (outline instanceof MDCNotchedOutline) {
36+
if (this.mdcNotchedOutline instanceof MDCNotchedOutline) this.mdcNotchedOutline.destroy()
37+
this.mdcNotchedOutline = outline
38+
}
39+
}
2840
}
2941
}
3042
</script>

‎components/text-field/README.md‎

Lines changed: 163 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,123 @@
11
## Text-field
22

3-
### Markup
3+
### Basic Usage
44

55
```html
6-
<m-text-field v-model="text" id="textfield">
7-
<m-floating-label for="textfield">Textfield label</m-floating-label>
6+
<m-text-field v-model="text" id="my-text-field">
7+
<m-floating-label for="my-text-field">Hint text</m-floating-label>
88
<m-line-ripple slot="bottomLine"/>
99
</m-text-field>
10-
<m-text-field
11-
outlined
12-
id="outlined">
13-
<m-floating-label for="outlined">Outlined</m-floating-label>
14-
<m-notched-outline />
10+
```
11+
12+
### Full Width
13+
14+
```html
15+
<m-text-field v-model="text" id="my-text-field" full-width aria-label="Full-Width Text Field">
16+
</m-text-field>
17+
```
18+
19+
### Textarea
20+
21+
```html
22+
<m-text-field v-model="text" id="my-text-field" textarea>
23+
<m-floating-label for="my-text-field">Textarea label</m-floating-label>
24+
</m-text-field>
25+
```
26+
27+
### Outlined
28+
29+
```html
30+
<m-text-field v-model="text" id="my-text-field" outlined>
31+
<m-floating-label for="my-text-field">Textarea label</m-floating-label>
32+
</m-text-field>
33+
```
34+
35+
### Disabled
36+
37+
```html
38+
<m-text-field v-model="text" id="my-text-field" disabled>
39+
<m-floating-label for="my-text-field">Hint text</m-floating-label>
40+
<m-line-ripple slot="bottomLine"/>
41+
</m-text-field>
42+
```
43+
44+
### Text Field without label
45+
46+
#### Filled
47+
48+
```html
49+
<m-text-field v-model="text" id="my-text-field" aria-label="Label">
50+
<m-line-ripple slot="bottomLine"/>
51+
</m-text-field>
52+
```
53+
54+
#### Outlined
55+
56+
```html
57+
<m-text-field v-model="text" id="my-text-field" aria-label="Label" outlined>
58+
<m-line-ripple slot="bottomLine"/>
59+
</m-text-field>
60+
```
61+
62+
#### Textarea
63+
64+
```html
65+
<m-text-field v-model="text" id="my-text-field" aria-label="Label" textarea>
66+
<m-line-ripple slot="bottomLine"/>
67+
</m-text-field>
68+
```
69+
70+
### Text Field with Helper Text
71+
72+
```html
73+
<m-text-field v-model="text" id="my-text-field">
74+
<m-floating-label for="my-text-field">Hint text</m-floating-label>
75+
<m-line-ripple slot="bottomLine"/>
1576
</m-text-field>
16-
<m-text-field v-model="pw" id="passwordfield" type="password" required minlength="8" aria-controls="pw-validation">
17-
<m-floating-label for="passwordfield">Password</m-floating-label>
77+
<m-text-field-helper-line>
78+
<m-text-field-helper-text>helper text</m-text-field-helper-text>
79+
</m-text-field-helper-line>
80+
```
81+
82+
### Text Field with Character Counter
83+
84+
```html
85+
<m-text-field v-model="text" id="my-text-field" maxlength="10">
86+
<m-floating-label for="my-text-field">Hint text</m-floating-label>
1887
<m-line-ripple slot="bottomLine"/>
1988
</m-text-field>
20-
<m-text-field-helper-text id="pw-validation">
21-
Password must be at least 8 characters long.
22-
</m-text-field-helper-text>
23-
24-
<m-text-field
25-
outlined
26-
id="outlined">
27-
<m-floating-label for="outlined">Outlined</m-floating-label>
28-
<m-notched-outline />
89+
<m-text-field-helper-line>
90+
<m-text-field-character-counter></m-text-field-character-counter>
91+
</m-text-field-helper-line>
92+
```
93+
94+
### Multi-line Text Field (Textarea) with Character Counter
95+
96+
```html
97+
<m-text-field v-model="text" id="my-text-field" maxlength="140">
98+
<m-text-field-character-counter slot="characterCounter"></m-text-field-character-counter>
99+
<m-floating-label for="my-text-field">Hint text</m-floating-label>
100+
<m-line-ripple slot="bottomLine"/>
101+
</m-text-field>
102+
```
103+
104+
### Text Field with Leading and Trailing Icons
105+
106+
```html
107+
<m-text-field v-model="text" id="my-text-field">
108+
<m-text-field-icon icon="favorite" slot="leadingIcon" />
109+
<m-floating-label for="my-text-field">Hint text</m-floating-label>
110+
<m-line-ripple slot="bottomLine"/>
111+
<m-text-field-icon icon="favorite" slot="trailingIcon" />
112+
</m-text-field>
113+
```
114+
115+
### Pre-filled
116+
117+
```html
118+
<m-text-field v-model="text" id="my-text-field">
119+
<m-floating-label for="my-text-field" float-above>Hint text</m-floating-label>
120+
<m-line-ripple slot="bottomLine"/>
29121
</m-text-field>
30122
```
31123

@@ -43,42 +135,79 @@ data() {
43135

44136
| Prop | Type | Default | Description |
45137
|------|------|---------|-------------|
46-
| value | String | '' | textfield value |
47-
| disabled | Boolean | false | whether the textfield should be disabled |
48-
| upgraded | Boolean | false | whether the textfield should be upgraded when it already has a value (FOUC) |
49-
| fullWidth | Boolean | false | expand the textfield to max width |
50-
| box | Boolean | false | draws a box around the textfield |
51-
| outlined | Boolean | false | draws an outer line around input field (NotchedOutline component also needed)|
52-
| dense | Boolean | false | whether the textfield should be dense |
53-
| focused | Boolean | false | whether the textfield should be in focus |
54-
| textarea | Boolean | false | whether the textfield should be a textarea |
138+
| value | String | '' | text field value |
139+
| disabled | Boolean | false | whether the text field should be disabled |
140+
| fullWidth | Boolean | false | Styles the text field as a full width text field. |
141+
| outlined | Boolean | false | Styles the text field as an outlined text field. |
142+
| dense | Boolean | false | Styles the text field as a dense text field, will be removed in an upcoming release |
143+
| focused | Boolean | false | Styles the text field as a text field in focus. |
144+
| textarea | Boolean | false | Indicates the text field is a <textarea>. |
145+
| useNativeValidation | Boolean | true | Sets whether to check native HTML validity state (true, default) or custom validity state when updating styles (false). |
146+
| valid | Boolean | true | Sets custom validity and updates styles accordingly. Note that native validation will still be honored subsequently unless useNativeValidation is also false. |
55147

56148
### Slots
57149

58150
| Slot | Description |
59151
|------|-------------|
60-
| default | textfield label |
152+
| default | text field label |
61153
| leadingIcon | icon component |
62154
| trailingIcon | icon component |
63155
| bottomLine | line-ripple component |
156+
| characterCounter | character counter component, only available in textarea |
64157

65158
Non prop attributes and events are mapped to the inner input element.
66159

67-
## TextfieldHelperText
160+
## Text Field Helper Text
161+
162+
> NOTE: Place this inside `<m-text-filed-helper-line>` which is an immediate sibling of `<m-text-field>`.
68163
69164
### Props
70165

71166
| Prop | Type | Default | Description |
72167
|------|------|---------|-------------|
73-
| persistent | Boolean | false | whether the helpertext should be persistent |
74-
| validationMsg | Boolean | false | whether the text should be used as validation message |
168+
| persistent | Boolean | false | Makes the helper text permanently visible. |
169+
| validationMsg | Boolean | false | Indicates the helper text is a validation message. |
75170

76171
### Slots
77172

78173
| Slot | Description |
79174
|------|-------------|
80-
| default | helpertext text |
175+
| default | helper text text |
176+
177+
## Text Field Icon
178+
179+
Icons describe the type of input a text field requires. They can also be interaction targets.
180+
181+
To use other icon library
182+
183+
```html
184+
<m-text-field-icon class="some-other-icon-library-class"></m-text-field-icon>
185+
```
186+
187+
### Props
188+
189+
| Prop | Type | Default | Description |
190+
|------|------|---------|-------------|
191+
| clickable | Boolean | true | whether this is a clickable icon |
192+
| icon | String | '' | material icon name |
193+
194+
### Slots
195+
196+
| Slot | Description |
197+
|------|-------------|
198+
| default | icon name if you are using other icon library than 'material-icons' |
199+
200+
## Text Field Character Counter
201+
202+
Character counter is used if there is a character limit. It displays the ratio of characters used and the total character limit.
203+
204+
### Props
205+
206+
| Prop | Type | Default | Description |
207+
|------|------|---------|-------------|
208+
| currentLength | Number | 0 | characters used |
209+
| maxLength | Number | 0 | total character limit |
81210

82211
### Reference
83212

84-
- https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield
213+
- https://github.com/material-components/material-components-web/tree/master/packages/mdc-text field

0 commit comments

Comments
 (0)