Skip to content
This repository was archived by the owner on Aug 2, 2024. It is now read-only.

Commit 6f6d731

Browse files
ChristianKienleChristianKienle
committed
fix: form examples
1 parent a84e902 commit 6f6d731

File tree

7 files changed

+73
-57
lines changed

7 files changed

+73
-57
lines changed

‎src/components/Form/FormItem.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default {
4040
$formGroup: { from: "formGroup", default: null }
4141
},
4242
props: {
43-
inline: { type: Boolean, default: false }
43+
inline: { type: Boolean, default: null }
4444
},
4545
methods: {
4646
setCheck(check) {

‎src/docs/content/examples/form/binding.vue

+7-9
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
<template>
22
<div>
33
<fd-field-set>
4-
<fd-form-item label="First Name">
4+
<fd-form-item>
5+
<fd-form-label>First Name</fd-form-label>
56
<fd-input v-model="firstName" placeholder="First Name" />
67
</fd-form-item>
7-
<fd-form-item label="First Name">
8+
<fd-form-item>
9+
<fd-form-label>First Name</fd-form-label>
810
<fd-input v-model="firstName" placeholder="First Name" />
911
</fd-form-item>
10-
<fd-form-item label="First Name">
12+
<fd-form-item>
13+
<fd-form-label>First Name</fd-form-label>
1114
<fd-text-area v-model="firstName" placeholder="First Name" />
1215
</fd-form-item>
1316
</fd-field-set>
14-
<fd-button @click="changeName">Set first name to 'Chris'</fd-button>
17+
<fd-button @click="firstName = 'Max Mustermann'">Set first name to 'Max Mustermann'</fd-button>
1518
<br />
1619
<br />
1720
<br />
@@ -30,11 +33,6 @@ export default {
3033
return {
3134
firstName: "Chris"
3235
};
33-
},
34-
methods: {
35-
changeName() {
36-
this.firstName = "😇 Chris 😇";
37-
}
3836
}
3937
};
4038
</script>

‎src/docs/content/examples/form/mixing-model.vue

+14-7
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,23 @@
33
<fd-field-set>
44
<fd-legend>Favorite Color</fd-legend>
55
<fd-form-group inline>
6-
<fd-form-item-radio label="Red">
6+
<fd-form-item-radio>
77
<fd-radio value="red" v-model="color" />
8+
<td-form-label>Red</td-form-label>
89
</fd-form-item-radio>
9-
<fd-form-item-radio label="Green">
10+
<fd-form-item-radio>
1011
<fd-radio value="green" v-model="color" />
12+
<td-form-label>Green</td-form-label>
1113
</fd-form-item-radio>
12-
<fd-form-item-radio label="Yellow">
14+
<fd-form-item-radio>
1315
<fd-radio value="yellow" v-model="color" />
16+
<td-form-label>Yellow</td-form-label>
1417
</fd-form-item-radio>
1518
</fd-form-group>
1619
</fd-field-set>
1720
<fd-field-set>
18-
<fd-form-item label="Favorite Color">
21+
<fd-form-item>
22+
<fd-form-label>Favorite Color</fd-form-label>
1923
<fd-select v-model="color">
2024
<option value="red">Red</option>
2125
<option value="green">Green</option>
@@ -27,14 +31,17 @@
2731
<fd-field-set>
2832
<fd-legend>Favorite Dish (multiple selection)</fd-legend>
2933
<fd-form-group inline>
30-
<fd-form-item-checkbox label="Fish">
34+
<fd-form-item-checkbox>
3135
<fd-checkbox v-model="dish.fish" />
36+
<fd-form-label>Fish</fd-form-label>
3237
</fd-form-item-checkbox>
33-
<fd-form-item-checkbox label="Meat">
38+
<fd-form-item-checkbox>
3439
<fd-checkbox v-model="dish.meat" />
40+
<fd-form-label>Meat</fd-form-label>
3541
</fd-form-item-checkbox>
36-
<fd-form-item-checkbox label="Noodles">
42+
<fd-form-item-checkbox>
3743
<fd-checkbox v-model="dish.noodles" />
44+
<fd-form-label>Noodles</fd-form-label>
3845
</fd-form-item-checkbox>
3946
</fd-form-group>
4047
</fd-field-set>

‎src/docs/content/examples/form/select-model.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template>
22
<div>
33
<fd-field-set>
4-
<fd-form-item label="Favorite Color">
4+
<fd-form-item>
5+
<fd-form-label>Favorite Color</fd-form-label>
56
<fd-select v-model="color">
67
<option disabled>no color</option>
78
<option value="red">Red</option>

‎src/docs/content/examples/form/states.vue

+35-16
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,55 @@
11
<template>
22
<fd-field-set>
3-
<fd-form-item label="Normal Input">
3+
<fd-form-item>
4+
<fd-form-label>Normal Input</fd-form-label>
45
<fd-input placeholder="Field placeholder text" />
5-
<fd-form-message slot="message">
6-
Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
7-
</fd-form-message>
6+
<template #message>
7+
<fd-form-message>
8+
Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
9+
</fd-form-message>
10+
</template>
811
</fd-form-item>
9-
<fd-form-item label="Valid Input">
12+
13+
<fd-form-item>
14+
<fd-form-label>Valid Input</fd-form-label>
1015
<fd-input state="valid" placeholder="Field placeholder text" />
1116
</fd-form-item>
12-
<fd-form-item label="Warning Input">
17+
18+
<fd-form-item>
19+
<fd-form-label>Warning Input</fd-form-label>
1320
<fd-input state="warning" placeholder="Field placeholder text" />
14-
<fd-form-message slot="message" type="warning">
15-
Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
16-
</fd-form-message>
21+
<template #message>
22+
<fd-form-message type="warning">
23+
Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
24+
</fd-form-message>
25+
</template>
1726
</fd-form-item>
18-
<fd-form-item label="Invalid Input">
27+
28+
<fd-form-item>
29+
<fd-form-label>Invalid Input</fd-form-label>
1930
<fd-input state="invalid" placeholder="Field placeholder text" />
20-
<fd-form-message slot="message" type="error">
21-
Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
22-
</fd-form-message>
31+
<template #message>
32+
<fd-form-message type="error">
33+
Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
34+
</fd-form-message>
35+
</template>
2336
</fd-form-item>
24-
<fd-form-item label="Field Label">
37+
38+
<fd-form-item>
39+
<fd-form-label>Field Label</fd-form-label>
2540
<fd-input placeholder="Field placeholder text" />
2641
<fd-form-message slot="message" type="help">
2742
Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
2843
</fd-form-message>
2944
</fd-form-item>
30-
<fd-form-item label="Disabled Input">
45+
46+
<fd-form-item>
47+
<fd-form-label>Disabled Input</fd-form-label>
3148
<fd-input disabled placeholder="Field placeholder text" />
3249
</fd-form-item>
33-
<fd-form-item label="Readonly Input">
50+
51+
<fd-form-item>
52+
<fd-form-label>Readonly Input</fd-form-label>
3453
<fd-input readonly placeholder="Field placeholder text" value="Readonly Content" />
3554
</fd-form-item>
3655
</fd-field-set>

‎src/docs/content/examples/identifier/sizes.vue

+14-14
Original file line numberDiff line numberDiff line change
@@ -27,22 +27,22 @@
2727
<fd-identifier size="xxl" circle>WW</fd-identifier>
2828
<br />
2929
<br />
30-
<fd-identifier size="xxs" thumbnail url="https://placeimg.com/400/400/nature" />
31-
<fd-identifier size="xs" thumbnail url="https://placeimg.com/400/400/nature" />
32-
<fd-identifier size="s" thumbnail url="https://placeimg.com/400/400/nature" />
33-
<fd-identifier size="m" thumbnail url="https://placeimg.com/400/400/nature" />
34-
<fd-identifier size="l" thumbnail url="https://placeimg.com/400/400/nature" />
35-
<fd-identifier size="xl" thumbnail url="https://placeimg.com/400/400/nature" />
36-
<fd-identifier size="xxl" thumbnail url="https://placeimg.com/400/400/nature" />
30+
<fd-identifier size="xxs" thumbnail :url="$withBase('images/img-small.jpeg')" />
31+
<fd-identifier size="xs" thumbnail :url="$withBase('images/img-small.jpeg')" />
32+
<fd-identifier size="s" thumbnail :url="$withBase('images/img-small.jpeg')" />
33+
<fd-identifier size="m" thumbnail :url="$withBase('images/img-small.jpeg')" />
34+
<fd-identifier size="l" thumbnail :url="$withBase('images/img-small.jpeg')" />
35+
<fd-identifier size="xl" thumbnail :url="$withBase('images/img-small.jpeg')" />
36+
<fd-identifier size="xxl" thumbnail :url="$withBase('images/img-small.jpeg')" />
3737
<br />
3838
<br />
39-
<fd-identifier size="xxs" thumbnail circle url="https://placeimg.com/400/400/nature" />
40-
<fd-identifier size="xs" thumbnail circle url="https://placeimg.com/400/400/nature" />
41-
<fd-identifier size="s" thumbnail circle url="https://placeimg.com/400/400/nature" />
42-
<fd-identifier size="m" thumbnail circle url="https://placeimg.com/400/400/nature" />
43-
<fd-identifier size="l" thumbnail circle url="https://placeimg.com/400/400/nature" />
44-
<fd-identifier size="xl" thumbnail circle url="https://placeimg.com/400/400/nature" />
45-
<fd-identifier size="xxl" thumbnail circle url="https://placeimg.com/400/400/nature" />
39+
<fd-identifier size="xxs" thumbnail circle :url="$withBase('images/img-small.jpeg')" />
40+
<fd-identifier size="xs" thumbnail circle :url="$withBase('images/img-small.jpeg')" />
41+
<fd-identifier size="s" thumbnail circle :url="$withBase('images/img-small.jpeg')" />
42+
<fd-identifier size="m" thumbnail circle :url="$withBase('images/img-small.jpeg')" />
43+
<fd-identifier size="l" thumbnail circle :url="$withBase('images/img-small.jpeg')" />
44+
<fd-identifier size="xl" thumbnail circle :url="$withBase('images/img-small.jpeg')" />
45+
<fd-identifier size="xxl" thumbnail circle :url="$withBase('images/img-small.jpeg')" />
4646
<br />
4747
<br />
4848
<fd-identifier transparent size="xxs" icon="money-bills" />

‎yarn.lock

-9
Original file line numberDiff line numberDiff line change
@@ -13411,15 +13411,6 @@ terser@^3.14.1:
1341113411
source-map "~0.6.1"
1341213412
source-map-support "~0.5.10"
1341313413

13414-
terser@^4.0.0:
13415-
version "4.1.2"
13416-
resolved "https://registry.yarnpkg.com/terser/-/terser-4.1.2.tgz#b2656c8a506f7ce805a3f300a2ff48db022fa391"
13417-
integrity sha512-jvNoEQSPXJdssFwqPSgWjsOrb+ELoE+ILpHPKXC83tIxOlh2U75F1KuB2luLD/3a6/7K3Vw5pDn+hvu0C4AzSw==
13418-
dependencies:
13419-
commander "^2.20.0"
13420-
source-map "~0.6.1"
13421-
source-map-support "~0.5.12"
13422-
1342313414
terser@^4.1.2:
1342413415
version "4.1.3"
1342513416
resolved "https://registry.yarnpkg.com/terser/-/terser-4.1.3.tgz#6074fbcf3517561c3272ea885f422c7a8c32d689"

0 commit comments

Comments
 (0)