doc: spellcheck

Author: setaman

.editorconfig

@@ -4,4 +4,4 @@ indent_size = 2
 end_of_line = lf
 trim_trailing_whitespace = true
 insert_final_newline = true
-max_line_length = 100
+max_line_length = 120

README.md

@@ -17,7 +17,7 @@ install the library via npm
 ```
 npm i -S vue-ellipse-progress
 ```
-The library is provided as a Vuejs plugin. So just initialize it in your ``main.js``
+The library is provided as a Vue.js plugin. So just initialize it in your ``main.js``
 ```js
 import VueEllipseProgress from 'vue-ellipse-progress';
 
@@ -294,7 +294,7 @@ forces no data state. The component provide an no data state for the case that y
 
 - ### `angle`
 
-is any Number. Defines the statring point of the progress cirlce line 
+is any Number. Defines the starting point of the progress circle line 
 
 <br>
 
@@ -331,10 +331,10 @@ This code ...
 ```html
 <vue-ellipse-progress ....>
 
-        <span slot="legend-value">/200</span>
-        <p slot="legend-caption">TASKS DONE</p>
+    <span slot="legend-value">/200</span>
+    <p slot="legend-caption">TASKS DONE</p>
 
-      </vue-ellipse-progress>
+</vue-ellipse-progress>
 ```
 ... produces following result. The slots are marked corresponding:
 

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <div class="ep-test-card" :style="{maxHeight: size + 2000 + 'px'}">
+    <!--<div class="ep-test-card" :style="{maxHeight: size + 2000 + 'px'}">
       <div>
         <label for="progress">
           Progress
@@ -40,6 +40,7 @@
                             :size="Number(size)"
                             :thickness="10"
                             :empty_thickness="5"
+                            line="round"
                             :line_mode="{mode: 'in', offset: 10}"
                             :legend="true"
                             :legend_value="progress"
@@ -68,7 +69,7 @@
                             :animation="{type: 'loop', duration: 1000}"
                             font_size="4rem">
         <span slot="legend_value">/200</span>
-        <p slot="legend_capture">GOOD JOB</p>
+        <p slot="legend-caption">GOOD JOB</p>
       </vue-ellipse-progress>
       <vue-ellipse-progress :progress="parseFloat(tasksDonePercent)"
                             :color="color"
@@ -84,7 +85,35 @@
                             :animation="{type: 'bounce', duration: 1000}"
                             font_size="2rem">
         <span slot="legend_value">/200</span>
-        <p style="margin-bottom: 0" slot="legend_capture">GOOD JOB</p>
+        <p style="margin-bottom: 0" slot="legend-caption">GOOD JOB</p>
+      </vue-ellipse-progress>
+    </div>-->
+    <div class="ep-test-card" style="background-color: white; padding: 10%" :style="{maxHeight: size + 2000 + 'px'}">
+      <vue-ellipse-progress :progress="parseFloat(progress)" :size="size"
+                            :thickness="15"
+                            :empty_thickness="15"
+                            font_size="6rem"
+                            font_color="black"
+                            :color="color"
+                            :line_mode="{mode: 'normal', offset: 10}"
+      >
+        <span slot="legend-value" style="color: black">legend value</span>
+        <p style="color: black" slot="legend-caption">legend Caption</p>
+      </vue-ellipse-progress>
+      <vue-ellipse-progress :progress="parseFloat(tasksDonePercent)"
+                            :color="color"
+                            :size="size"
+                            :thickness="21"
+                            angle=""
+                            :loading="loading"
+                            :empty_thickness="20"
+                            :line_mode="{mode: 'normal', offset: 10}"
+                            :legend_value="tasks_done"
+                            font_color="black"
+                            :animation="{type: 'bounce', duration: 1000}"
+                            font_size="6rem">
+        <span style="color: black; display: inline-block; border: 2px red solid" slot="legend-value">/200</span>
+        <p  style="margin-bottom: 0; border: 2px blue solid; color: black; font-size: 3rem" slot="legend-caption">TASKS DONE</p>
       </vue-ellipse-progress>
     </div>
   </div>
@@ -97,9 +126,9 @@ export default {
   data: () => ({
     loading: false,
     noData: false,
-    progress: 45.5,
-    tasks_done: 125,
-    size: 250,
+    progress: 100,
+    tasks_done: 180,
+    size: 550,
     color: {
       gradient: {
         radial: false,
@@ -111,7 +140,7 @@ export default {
             opacity: '1',
           },
           {
-            color: '#6849ff',
+            color: '#572883',
             offset: '100',
             opacity: '1',
           },

src/components/EllipseProgressContainer.vue

@@ -17,9 +17,9 @@
 
       <div class="ep-legend--container" :style="{maxWidth: `${size}px`}">
         <span v-show="!loading" v-if="legend && dataIsAvailable" class="ep-legend--value" :style="{fontSize: font_size, color: font_color}">{{legendValue}}
-          <slot name="legend_value"></slot>
+          <slot name="legend-value"></slot>
         </span>
-        <slot name="legend_capture"></slot>
+        <slot name="legend-caption"></slot>
       </div>
     </div>
   </div>