From 6f6d731caeb6bcd2402bd7971de1c3135612b170 Mon Sep 17 00:00:00 2001
From: Christian Kienle <christian.kienle@sap.com>
Date: Mon, 12 Aug 2019 11:00:27 +0200
Subject: [PATCH] fix: form examples

---
 src/components/Form/FormItem.vue              |  2 +-
 src/docs/content/examples/form/binding.vue    | 16 +++---
 .../content/examples/form/mixing-model.vue    | 21 +++++---
 .../content/examples/form/select-model.vue    |  3 +-
 src/docs/content/examples/form/states.vue     | 51 +++++++++++++------
 .../content/examples/identifier/sizes.vue     | 28 +++++-----
 yarn.lock                                     |  9 ----
 7 files changed, 73 insertions(+), 57 deletions(-)

diff --git a/src/components/Form/FormItem.vue b/src/components/Form/FormItem.vue
index 3b364de5..48e50ee0 100644
--- a/src/components/Form/FormItem.vue
+++ b/src/components/Form/FormItem.vue
@@ -40,7 +40,7 @@ export default {
     $formGroup: { from: "formGroup", default: null }
   },
   props: {
-    inline: { type: Boolean, default: false }
+    inline: { type: Boolean, default: null }
   },
   methods: {
     setCheck(check) {
diff --git a/src/docs/content/examples/form/binding.vue b/src/docs/content/examples/form/binding.vue
index b6dc3937..7952e43f 100644
--- a/src/docs/content/examples/form/binding.vue
+++ b/src/docs/content/examples/form/binding.vue
@@ -1,17 +1,20 @@
 <template>
   <div>
     <fd-field-set>
-      <fd-form-item label="First Name">
+      <fd-form-item>
+        <fd-form-label>First Name</fd-form-label>
         <fd-input v-model="firstName" placeholder="First Name" />
       </fd-form-item>
-      <fd-form-item label="First Name">
+      <fd-form-item>
+        <fd-form-label>First Name</fd-form-label>
         <fd-input v-model="firstName" placeholder="First Name" />
       </fd-form-item>
-      <fd-form-item label="First Name">
+      <fd-form-item>
+        <fd-form-label>First Name</fd-form-label>
         <fd-text-area v-model="firstName" placeholder="First Name" />
       </fd-form-item>
     </fd-field-set>
-    <fd-button @click="changeName">Set first name to 'Chris'</fd-button>
+    <fd-button @click="firstName = 'Max Mustermann'">Set first name to 'Max Mustermann'</fd-button>
     <br />
     <br />
     <br />
@@ -30,11 +33,6 @@ export default {
     return {
       firstName: "Chris"
     };
-  },
-  methods: {
-    changeName() {
-      this.firstName = "😇 Chris 😇";
-    }
   }
 };
 </script>
diff --git a/src/docs/content/examples/form/mixing-model.vue b/src/docs/content/examples/form/mixing-model.vue
index 30d5c3c5..6eff2a0d 100644
--- a/src/docs/content/examples/form/mixing-model.vue
+++ b/src/docs/content/examples/form/mixing-model.vue
@@ -3,19 +3,23 @@
     <fd-field-set>
       <fd-legend>Favorite Color</fd-legend>
       <fd-form-group inline>
-        <fd-form-item-radio label="Red">
+        <fd-form-item-radio>
           <fd-radio value="red" v-model="color" />
+          <td-form-label>Red</td-form-label>
         </fd-form-item-radio>
-        <fd-form-item-radio label="Green">
+        <fd-form-item-radio>
           <fd-radio value="green" v-model="color" />
+          <td-form-label>Green</td-form-label>
         </fd-form-item-radio>
-        <fd-form-item-radio label="Yellow">
+        <fd-form-item-radio>
           <fd-radio value="yellow" v-model="color" />
+          <td-form-label>Yellow</td-form-label>
         </fd-form-item-radio>
       </fd-form-group>
     </fd-field-set>
     <fd-field-set>
-      <fd-form-item label="Favorite Color">
+      <fd-form-item>
+        <fd-form-label>Favorite Color</fd-form-label>
         <fd-select v-model="color">
           <option value="red">Red</option>
           <option value="green">Green</option>
@@ -27,14 +31,17 @@
     <fd-field-set>
       <fd-legend>Favorite Dish (multiple selection)</fd-legend>
       <fd-form-group inline>
-        <fd-form-item-checkbox label="Fish">
+        <fd-form-item-checkbox>
           <fd-checkbox v-model="dish.fish" />
+          <fd-form-label>Fish</fd-form-label>
         </fd-form-item-checkbox>
-        <fd-form-item-checkbox label="Meat">
+        <fd-form-item-checkbox>
           <fd-checkbox v-model="dish.meat" />
+          <fd-form-label>Meat</fd-form-label>
         </fd-form-item-checkbox>
-        <fd-form-item-checkbox label="Noodles">
+        <fd-form-item-checkbox>
           <fd-checkbox v-model="dish.noodles" />
+          <fd-form-label>Noodles</fd-form-label>
         </fd-form-item-checkbox>
       </fd-form-group>
     </fd-field-set>
diff --git a/src/docs/content/examples/form/select-model.vue b/src/docs/content/examples/form/select-model.vue
index 1c909096..25d5f329 100644
--- a/src/docs/content/examples/form/select-model.vue
+++ b/src/docs/content/examples/form/select-model.vue
@@ -1,7 +1,8 @@
 <template>
   <div>
     <fd-field-set>
-      <fd-form-item label="Favorite Color">
+      <fd-form-item>
+        <fd-form-label>Favorite Color</fd-form-label>
         <fd-select v-model="color">
           <option disabled>no color</option>
           <option value="red">Red</option>
diff --git a/src/docs/content/examples/form/states.vue b/src/docs/content/examples/form/states.vue
index 0306678e..ea361d8b 100644
--- a/src/docs/content/examples/form/states.vue
+++ b/src/docs/content/examples/form/states.vue
@@ -1,36 +1,55 @@
 <template>
   <fd-field-set>
-    <fd-form-item label="Normal Input">
+    <fd-form-item>
+      <fd-form-label>Normal Input</fd-form-label>
       <fd-input placeholder="Field placeholder text" />
-      <fd-form-message slot="message">
-        Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
-      </fd-form-message>
+      <template #message>
+        <fd-form-message>
+          Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
+        </fd-form-message>
+      </template>
     </fd-form-item>
-    <fd-form-item label="Valid Input">
+
+    <fd-form-item>
+      <fd-form-label>Valid Input</fd-form-label>
       <fd-input state="valid" placeholder="Field placeholder text" />
     </fd-form-item>
-    <fd-form-item label="Warning Input">
+
+    <fd-form-item>
+      <fd-form-label>Warning Input</fd-form-label>
       <fd-input state="warning" placeholder="Field placeholder text" />
-      <fd-form-message slot="message" type="warning">
-        Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
-      </fd-form-message>
+      <template #message>
+        <fd-form-message type="warning">
+          Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
+        </fd-form-message>
+      </template>
     </fd-form-item>
-    <fd-form-item label="Invalid Input">
+
+    <fd-form-item>
+      <fd-form-label>Invalid Input</fd-form-label>
       <fd-input state="invalid" placeholder="Field placeholder text" />
-      <fd-form-message slot="message" type="error">
-        Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
-      </fd-form-message>
+      <template #message>
+        <fd-form-message type="error">
+          Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
+        </fd-form-message>
+      </template>
     </fd-form-item>
-    <fd-form-item label="Field Label">
+
+    <fd-form-item>
+      <fd-form-label>Field Label</fd-form-label>
       <fd-input placeholder="Field placeholder text" />
       <fd-form-message slot="message" type="help">
         Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
       </fd-form-message>
     </fd-form-item>
-    <fd-form-item label="Disabled Input">
+
+    <fd-form-item>
+      <fd-form-label>Disabled Input</fd-form-label>
       <fd-input disabled placeholder="Field placeholder text" />
     </fd-form-item>
-    <fd-form-item label="Readonly Input">
+
+    <fd-form-item>
+      <fd-form-label>Readonly Input</fd-form-label>
       <fd-input readonly placeholder="Field placeholder text" value="Readonly Content" />
     </fd-form-item>
   </fd-field-set>
diff --git a/src/docs/content/examples/identifier/sizes.vue b/src/docs/content/examples/identifier/sizes.vue
index 93eef0db..fcce83cc 100644
--- a/src/docs/content/examples/identifier/sizes.vue
+++ b/src/docs/content/examples/identifier/sizes.vue
@@ -27,22 +27,22 @@
     <fd-identifier size="xxl" circle>WW</fd-identifier>
     <br />
     <br />
-    <fd-identifier size="xxs" thumbnail url="https://placeimg.com/400/400/nature" />
-    <fd-identifier size="xs" thumbnail url="https://placeimg.com/400/400/nature" />
-    <fd-identifier size="s" thumbnail url="https://placeimg.com/400/400/nature" />
-    <fd-identifier size="m" thumbnail url="https://placeimg.com/400/400/nature" />
-    <fd-identifier size="l" thumbnail url="https://placeimg.com/400/400/nature" />
-    <fd-identifier size="xl" thumbnail url="https://placeimg.com/400/400/nature" />
-    <fd-identifier size="xxl" thumbnail url="https://placeimg.com/400/400/nature" />
+    <fd-identifier size="xxs" thumbnail :url="$withBase('images/img-small.jpeg')" />
+    <fd-identifier size="xs" thumbnail :url="$withBase('images/img-small.jpeg')" />
+    <fd-identifier size="s" thumbnail :url="$withBase('images/img-small.jpeg')" />
+    <fd-identifier size="m" thumbnail :url="$withBase('images/img-small.jpeg')" />
+    <fd-identifier size="l" thumbnail :url="$withBase('images/img-small.jpeg')" />
+    <fd-identifier size="xl" thumbnail :url="$withBase('images/img-small.jpeg')" />
+    <fd-identifier size="xxl" thumbnail :url="$withBase('images/img-small.jpeg')" />
     <br />
     <br />
-    <fd-identifier size="xxs" thumbnail circle url="https://placeimg.com/400/400/nature" />
-    <fd-identifier size="xs" thumbnail circle url="https://placeimg.com/400/400/nature" />
-    <fd-identifier size="s" thumbnail circle url="https://placeimg.com/400/400/nature" />
-    <fd-identifier size="m" thumbnail circle url="https://placeimg.com/400/400/nature" />
-    <fd-identifier size="l" thumbnail circle url="https://placeimg.com/400/400/nature" />
-    <fd-identifier size="xl" thumbnail circle url="https://placeimg.com/400/400/nature" />
-    <fd-identifier size="xxl" thumbnail circle url="https://placeimg.com/400/400/nature" />
+    <fd-identifier size="xxs" thumbnail circle :url="$withBase('images/img-small.jpeg')" />
+    <fd-identifier size="xs" thumbnail circle :url="$withBase('images/img-small.jpeg')" />
+    <fd-identifier size="s" thumbnail circle :url="$withBase('images/img-small.jpeg')" />
+    <fd-identifier size="m" thumbnail circle :url="$withBase('images/img-small.jpeg')" />
+    <fd-identifier size="l" thumbnail circle :url="$withBase('images/img-small.jpeg')" />
+    <fd-identifier size="xl" thumbnail circle :url="$withBase('images/img-small.jpeg')" />
+    <fd-identifier size="xxl" thumbnail circle :url="$withBase('images/img-small.jpeg')" />
     <br />
     <br />
     <fd-identifier transparent size="xxs" icon="money-bills" />
diff --git a/yarn.lock b/yarn.lock
index 44011872..3c0c92f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13411,15 +13411,6 @@ terser@^3.14.1:
     source-map "~0.6.1"
     source-map-support "~0.5.10"
 
-terser@^4.0.0:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.1.2.tgz#b2656c8a506f7ce805a3f300a2ff48db022fa391"
-  integrity sha512-jvNoEQSPXJdssFwqPSgWjsOrb+ELoE+ILpHPKXC83tIxOlh2U75F1KuB2luLD/3a6/7K3Vw5pDn+hvu0C4AzSw==
-  dependencies:
-    commander "^2.20.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.12"
-
 terser@^4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/terser/-/terser-4.1.3.tgz#6074fbcf3517561c3272ea885f422c7a8c32d689"