From 5d1a591fa3018322d5779f356b2c56eb84f3c9db Mon Sep 17 00:00:00 2001
From: "Xing.Wu" <329106954@qq.com>
Date: Wed, 30 Jun 2021 15:11:46 +0800
Subject: [PATCH] feat(docs): Rate code for composition (#2364)

Co-authored-by: xing.wu <wuxing@bjca.org.cn>
---
 website/docs/en-US/rate.md | 83 +++++++++++++++++++++++++++++++++++--
 website/docs/es/rate.md    | 83 +++++++++++++++++++++++++++++++++++--
 website/docs/fr-FR/rate.md | 85 ++++++++++++++++++++++++++++++++++++--
 website/docs/jp/rate.md    | 83 +++++++++++++++++++++++++++++++++++--
 website/docs/zh-CN/rate.md | 83 +++++++++++++++++++++++++++++++++++--
 5 files changed, 401 insertions(+), 16 deletions(-)

diff --git a/website/docs/en-US/rate.md b/website/docs/en-US/rate.md
index bf4fc22382..717e30868d 100644
--- a/website/docs/en-US/rate.md
+++ b/website/docs/en-US/rate.md
@@ -30,6 +30,23 @@ Used for rating
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value1: ref(null),
+        value2: ref(null),
+        colors: ref(['#99A9BF', '#F7BA2A', '#FF9900']), // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -43,15 +60,29 @@ Used for rating
 
 
 <script>
-import { defineComponent, ref } from 'vue'
   export default {
-    setup() {
+    data() {
       return {
-        value: ref(null)
+        value: null
       }
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(null),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -77,6 +108,21 @@ Using text to indicate rating score
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(null),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -104,6 +150,22 @@ You can use different icons to distinguish different rate components.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(null),
+        iconClasses: ref(['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']) // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -131,6 +193,21 @@ Read-only Rate is for displaying rating score. Half star is supported.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(3.7),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/es/rate.md b/website/docs/es/rate.md
index 1335a9adbb..24426f769f 100644
--- a/website/docs/es/rate.md
+++ b/website/docs/es/rate.md
@@ -31,6 +31,23 @@ Usado para la calificación
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value1: ref(null),
+        value2: ref(null),
+        colors: ref(['#99A9BF', '#F7BA2A', '#FF9900']), // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -44,15 +61,29 @@ Usado para la calificación
 
 
 <script>
-import { defineComponent, ref } from 'vue'
   export default {
-    setup() {
+    data() {
       return {
-        value: ref(null)
+        value: null
       }
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(null),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -78,6 +109,21 @@ Usa texto para indicar la puntuación
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(null),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -105,6 +151,22 @@ Puede utilizar iconos para diferenciar cada componente.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(null),
+        iconClasses: ref(['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']) // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -132,6 +194,21 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(3.7),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/fr-FR/rate.md b/website/docs/fr-FR/rate.md
index a997c8ee7b..4bd5d91644 100644
--- a/website/docs/fr-FR/rate.md
+++ b/website/docs/fr-FR/rate.md
@@ -30,6 +30,23 @@ Utilisé pour donner une note sur cinq étoiles.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value1: ref(null),
+        value2: ref(null),
+        colors: ref(['#99A9BF', '#F7BA2A', '#FF9900']), // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -43,15 +60,29 @@ Utilisé pour donner une note sur cinq étoiles.
 
 
 <script>
-import { defineComponent, ref } from 'vue'
   export default {
-    setup() {
+    data() {
       return {
-        value: ref(null)
+        value: null
       }
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(null),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -78,6 +109,21 @@ Vous pouvez ajouter du texte à chaque score.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(null),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -102,9 +148,25 @@ Vous pouvez utiliser différentes icônes pour chaque
         value: null,
         iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
       }
-  }
+    }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(null),
+        iconClasses: ref(['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']), // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -132,6 +194,21 @@ Le score peut être en lecture seule. Les demi-étoiles sont supportées.
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(3.7),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/jp/rate.md b/website/docs/jp/rate.md
index 65183d5f6d..119902e899 100644
--- a/website/docs/jp/rate.md
+++ b/website/docs/jp/rate.md
@@ -30,6 +30,23 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value1: ref(null),
+        value2: ref(null),
+        colors: ref(['#99A9BF', '#F7BA2A', '#FF9900']), // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -43,15 +60,29 @@
 
 
 <script>
-import { defineComponent, ref } from 'vue'
   export default {
-    setup() {
+    data() {
       return {
-        value: ref(null)
+        value: null
       }
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(null),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -77,6 +108,21 @@ import { defineComponent, ref } from 'vue'
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(null),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -104,6 +150,22 @@ import { defineComponent, ref } from 'vue'
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(null),
+        iconClasses: ref(['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']) // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -131,6 +193,21 @@ import { defineComponent, ref } from 'vue'
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(3.7),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/zh-CN/rate.md b/website/docs/zh-CN/rate.md
index ed86377d01..6d43d0a452 100644
--- a/website/docs/zh-CN/rate.md
+++ b/website/docs/zh-CN/rate.md
@@ -29,6 +29,23 @@
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value1: ref(null),
+        value2: ref(null),
+        colors: ref(['#99A9BF', '#F7BA2A', '#FF9900']),// 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -42,15 +59,29 @@
 
 
 <script>
-import { defineComponent, ref } from 'vue'
   export default {
-    setup() {
+    data() {
       return {
-        value: ref(null)
+        value: null
       }
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(null),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -74,6 +105,21 @@ import { defineComponent, ref } from 'vue'
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(null),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -100,6 +146,22 @@ import { defineComponent, ref } from 'vue'
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(null),
+        iconClasses: ref(['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']), // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -126,6 +188,21 @@ import { defineComponent, ref } from 'vue'
     }
   }
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value: ref(3.7),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::