From 32449d67b8d869f7b5860c1658107214a39cf28e Mon Sep 17 00:00:00 2001
From: "Xing.Wu" <329106954@qq.com>
Date: Tue, 8 Jun 2021 13:29:56 +0800
Subject: [PATCH] feat(docs): ColorPicker code for composition (#2160)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 无星 <32910694@qq.com>
---
 website/docs/en-US/color-picker.md | 84 ++++++++++++++++++++++++++++++
 website/docs/es/color-picker.md    | 84 ++++++++++++++++++++++++++++++
 website/docs/fr-FR/color-picker.md | 84 ++++++++++++++++++++++++++++++
 website/docs/jp/color-picker.md    | 84 ++++++++++++++++++++++++++++++
 website/docs/zh-CN/color-picker.md | 84 ++++++++++++++++++++++++++++++
 5 files changed, 420 insertions(+)

diff --git a/website/docs/en-US/color-picker.md b/website/docs/en-US/color-picker.md
index 581fd71e73..30c5fe791b 100644
--- a/website/docs/en-US/color-picker.md
+++ b/website/docs/en-US/color-picker.md
@@ -25,6 +25,24 @@ ColorPicker is a color selector supporting multiple color formats.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color1 = ref('#409EFF');
+      const color2 = ref(null);
+      return {
+        color1,
+        color2,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -43,6 +61,22 @@ ColorPicker is a color selector supporting multiple color formats.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color = ref('rgba(19, 206, 102, 0.8)');
+      return {
+        color,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -81,6 +115,39 @@ ColorPicker is a color selector supporting multiple color formats.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color = ref('rgba(255, 69, 0, 0.68)');
+      const predefineColors = ref([
+        '#ff4500',
+        '#ff8c00',
+        '#ffd700',
+        '#90ee90',
+        '#00ced1',
+        '#1e90ff',
+        '#c71585',
+        'rgba(255, 69, 0, 0.68)',
+        'rgb(255, 120, 0)',
+        'hsv(51, 100, 98)',
+        'hsva(120, 40, 94, 0.5)',
+        'hsl(181, 100%, 37%)',
+        'hsla(209, 100%, 56%, 0.73)',
+        '#c7158577',
+      ]);
+      return {
+        color,
+        predefineColors,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -103,6 +170,23 @@ ColorPicker is a color selector supporting multiple color formats.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color = ref('409EFF');
+
+      return {
+        color,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/es/color-picker.md b/website/docs/es/color-picker.md
index 632cbd53aa..06ddf64a8d 100644
--- a/website/docs/es/color-picker.md
+++ b/website/docs/es/color-picker.md
@@ -25,6 +25,24 @@ ColorPicker es un selector de color que soporta varios formatos de color.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color1 = ref('#409EFF');
+      const color2 = ref(null);
+      return {
+        color1,
+        color2,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -43,6 +61,22 @@ ColorPicker es un selector de color que soporta varios formatos de color.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color = ref('rgba(19, 206, 102, 0.8)');
+      return {
+        color,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -81,6 +115,39 @@ ColorPicker es un selector de color que soporta varios formatos de color.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color = ref('rgba(255, 69, 0, 0.68)');
+      const predefineColors = ref([
+        '#ff4500',
+        '#ff8c00',
+        '#ffd700',
+        '#90ee90',
+        '#00ced1',
+        '#1e90ff',
+        '#c71585',
+        'rgba(255, 69, 0, 0.68)',
+        'rgb(255, 120, 0)',
+        'hsv(51, 100, 98)',
+        'hsva(120, 40, 94, 0.5)',
+        'hsl(181, 100%, 37%)',
+        'hsla(209, 100%, 56%, 0.73)',
+        '#c7158577',
+      ]);
+      return {
+        color,
+        predefineColors,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -102,6 +169,23 @@ ColorPicker es un selector de color que soporta varios formatos de color.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color = ref('409EFF');
+
+      return {
+        color,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/fr-FR/color-picker.md b/website/docs/fr-FR/color-picker.md
index 75753696d8..b9ac09b096 100644
--- a/website/docs/fr-FR/color-picker.md
+++ b/website/docs/fr-FR/color-picker.md
@@ -25,6 +25,24 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color1 = ref('#409EFF');
+      const color2 = ref(null);
+      return {
+        color1,
+        color2,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -43,6 +61,22 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color = ref('rgba(19, 206, 102, 0.8)');
+      return {
+        color,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -81,6 +115,39 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color = ref('rgba(255, 69, 0, 0.68)');
+      const predefineColors = ref([
+        '#ff4500',
+        '#ff8c00',
+        '#ffd700',
+        '#90ee90',
+        '#00ced1',
+        '#1e90ff',
+        '#c71585',
+        'rgba(255, 69, 0, 0.68)',
+        'rgb(255, 120, 0)',
+        'hsv(51, 100, 98)',
+        'hsva(120, 40, 94, 0.5)',
+        'hsl(181, 100%, 37%)',
+        'hsla(209, 100%, 56%, 0.73)',
+        '#c7158577',
+      ]);
+      return {
+        color,
+        predefineColors,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -102,6 +169,23 @@ ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color = ref('409EFF');
+
+      return {
+        color,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/jp/color-picker.md b/website/docs/jp/color-picker.md
index 39fe2b5b74..bb55893981 100644
--- a/website/docs/jp/color-picker.md
+++ b/website/docs/jp/color-picker.md
@@ -25,6 +25,24 @@ color-pickerは、複数のカラーフォーマットに対応したカラー
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color1 = ref('#409EFF');
+      const color2 = ref(null);
+      return {
+        color1,
+        color2,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -43,6 +61,22 @@ color-pickerは、複数のカラーフォーマットに対応したカラー
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color = ref('rgba(19, 206, 102, 0.8)');
+      return {
+        color,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -81,6 +115,39 @@ color-pickerは、複数のカラーフォーマットに対応したカラー
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color = ref('rgba(255, 69, 0, 0.68)');
+      const predefineColors = ref([
+        '#ff4500',
+        '#ff8c00',
+        '#ffd700',
+        '#90ee90',
+        '#00ced1',
+        '#1e90ff',
+        '#c71585',
+        'rgba(255, 69, 0, 0.68)',
+        'rgb(255, 120, 0)',
+        'hsv(51, 100, 98)',
+        'hsva(120, 40, 94, 0.5)',
+        'hsl(181, 100%, 37%)',
+        'hsla(209, 100%, 56%, 0.73)',
+        '#c7158577',
+      ]);
+      return {
+        color,
+        predefineColors,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -103,6 +170,23 @@ color-pickerは、複数のカラーフォーマットに対応したカラー
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color = ref('409EFF');
+
+      return {
+        color,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/zh-CN/color-picker.md b/website/docs/zh-CN/color-picker.md
index 26f22d6838..842dee5a13 100644
--- a/website/docs/zh-CN/color-picker.md
+++ b/website/docs/zh-CN/color-picker.md
@@ -25,6 +25,24 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color1 = ref('#409EFF');
+      const color2 = ref(null);
+      return {
+        color1,
+        color2,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -43,6 +61,22 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color = ref('rgba(19, 206, 102, 0.8)');
+      return {
+        color,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -81,6 +115,39 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color = ref('rgba(255, 69, 0, 0.68)');
+      const predefineColors = ref([
+        '#ff4500',
+        '#ff8c00',
+        '#ffd700',
+        '#90ee90',
+        '#00ced1',
+        '#1e90ff',
+        '#c71585',
+        'rgba(255, 69, 0, 0.68)',
+        'rgb(255, 120, 0)',
+        'hsv(51, 100, 98)',
+        'hsva(120, 40, 94, 0.5)',
+        'hsl(181, 100%, 37%)',
+        'hsla(209, 100%, 56%, 0.73)',
+        '#c7158577',
+      ]);
+      return {
+        color,
+        predefineColors,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -102,6 +169,23 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const color = ref('409EFF');
+
+      return {
+        color,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::