+
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## پراپ های کامپوننت را ساده نگه دارید
+
+در حالی که ویو جی اس به خاطر ویژگی هایش از ارسال آبجکت های پیچیده جاوا اسکریپتی پشتیبانی می کند شما باید تلاش کنید تا **پراپ های کامپوننت را تا جای ممکن ساده نگه دارید**. تلاش کنید تا فقط از [داده های اولیه جاوا اسکریپت](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) که شامل (رشته ها، اعداد، بولین) و توابع می شوند، استفاده کنید. و از آبجکت های پیچیده پرهیز کنید.
+
+### چرا؟
+
+- زمانی از یک اتریبیوت به طور جداگانه برای هر پراپ استفاده می کنیم، کامپوننت ای پی آی واضح و صریحی دارد;
+- با استفاده کردن از داده های اولیه و توابع به عنوان مقادیر پراپ ها، ای پی آی های کامپوننت ما شبیه به ای پی آی های عنصر های بومی اچ تی ام ال 5 می شود;
+- با استفاده کردن از اتریبیوت ها به ازای هر پراپ، بقیه توسعه دهندگان به راحتی می توانند بفهمند که چه چیز هایی به نمونه کامپوننت ارسال شده است.
+- زمانی که آبجکت های پیچیده را ارسال می کنید، واضح نیست که چه ویژگی ها و متود هایی از آبجکت واقعا مورد استفاده کامپوننت های سفارشی قرار گرفته است. این باعث می شود ریفکتور کردن کد سخت شود و کد ها به سمت پوسیده شدن بروند.
+
+### با چه روشی؟
+
+به ازای هر اتریبیوت برای کامپوننت، از یک پراپ استفاده کنید، که مقدارشان داده اولیه یا تابع باشد:
+
+```html
+
+
+
+
+
+
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## از پراپ های کامپوننت استفاده بهینه کنید
+
+در ویو جی اس پراپ های کامپوننت، ای پی آی شما هستند. یک ای پی آی منسجم و قابل پیش بینی، استفاده از کامپوننت شما را برای بقیه توسعه دهندگان راحت می کند.
+
+پراپ های کامپوننت از طریق اتریبیوت های اچ تی ام ال ارسال می شوند. مقادیر این اتریبیوت ها می تواند رشته های ساده ویو جی اس (`:attr="value"` یا `v-bind:attr="value"`) باشد یا به طور کامل صرف نظر شود. شما باید **پراپ های کامپوننت کنترل کنید** تا بتوانید سناریو های مختلف را امکان پذیر کنید.
+
+### چرا؟
+
+کنترل کردن پراپ های کامپوننت به شما اطمینان می دهند کامپوننت شما همیشه به درستی کار کند (برنامه نویسی تدافعی). حتی اگر بقیه توسعه دهندگان، در زمانی دیگر از کامپوننت های شما به شیوه دیگری استفاده کنند که شما فکرش را از قبل نکرده بودید.
+
+### با چه روشی؟
+
+- از پیش فرض ها برای مقادیر پراپ ها استفاده کنید
+- از گزینه `type` برای [اعتبارسنجی](http://vuejs.org/v2/guide/components.html#Prop-Validation) مقادیر به منظور دریافت نوع مورد انتظار استفاده کنید.**[1\*]**
+- قبل از استفاده کردن از پراپ ها، بررسی کنید تا ببینید پراپ ها وجود داشته باشند.
+
+```html
+
+
+
+
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## `this` را به `کامپوننت` نسبت دهید
+
+در داخل فضای عنصر کامپوننت ویو جی اس، `this` به نمونه کامپوننت اشاره می کند.
+بنابراین زمانی که شما نیاز دارید در فضای دیگری ارجاع دهید، اطمینان پیدا کنید که `this` به عنوان `کامپوننت` در دسترس باشد.
+
+به عبارت دیگر: اگر میخواهید از استاندارد **ES6** استفاده کنید، چیز هایی شبیه `var self = this;` را دیگر **ننویسید**. شما با این کار، از کامپوننت های ویو به صورت ایمن استفاده می کنید.
+
+### چرا؟
+
+- با استفاده از در استاندارد ES6، نیازی نیست `this` را در یک متغیر ذخیره کنیدک
+ -در کل، زمانی که از توابع Arrow استفاده می کنیم اسکوپ لکسیکال حفظ می شود.
+- اگر شما از استاندارد ES6 استفاده **نمی کنید**، بنابراین از توابع Arrow هم استفاده نمی کنید پس شما می بایست `this` را به یک متغیر نسبت دهید. این تنها حالت استثنا می باشد.
+
+### با چه روشی؟
+
+```html
+
+
+
+
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## ساختار کامپوننت
+
+این دستورالعمل ها را دنبال کنید تا چگونگی آن را دریابید.
+
+### چرا؟
+
+- داشتن خروجی کامپوننت منجر به یک آبجکت گروه بندی شده و تمیز می شود، که باعث می شود خواندن کد آسان شود و توسعه دهندگان کد استانداردی را داشته باشند.
+- چینش properties، data، computed، watches، و methods بر اساس حروف الفبا باعث می شود پیدا کردن آن ها آسان تر شود.
+- دوباره می گوییم، گروه بندی کردن باعث می شود خوانایی کامپوننت بیشتر شود. (name; extends; props، data و computed; components; watch و methods; lifecycle methods، و غیره.);
+- Use the `name` attribute. Using [vue devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) and that attribute will make your development/testing easier;
+- از متودولوژی های نامگذاری سی اس اس استفاده کنید ، مانند [BEM](https://medium.com/tldr-tech/bem-blocks-elements-and-modifiers-6b3b0af9e3ea#.bhnomd7gw), یا [rscss](https://github.com/rstacruz/rscss) - [details?](#use-component-name-as-style-scope);
+- از ساختار فایل .vue و template-script-style استفاده کنید, همان طور که توسط Evan You خالق ویو پیشنهاد شده است.
+
+### با چه روشی؟
+
+ساختار کامپوننت:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## Component event names
+
+Vue.js provides all Vue handler functions and expressions are strictly bound to the ViewModel. Each component events should follow a good naming style that will avoid issues during the development. See the **Why** below.
+
+### چرا؟
+
+- Developers are free to use native likes event names and it can cause confusion down the line;
+- آزادی برای نام گذاری ایونت ها میتواند به مورد رو به رو منجر شود [DOM ناسازگاری الگو های](https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats);
+
+### با چه روشی؟
+
+- نام ایونت ها باید kebab-cased باشد;
+- A unique event name should be fired for unique actions in your component that will be of interest to the outside world, like: upload-success, upload-error or even dropzone-upload-success, dropzone-upload-error (if you see the need for having a scoped prefix);
+- Events should either end in verbs in the infinitive form (e.g. client-api-load) or nouns (e.g drive-upload-success) ([source](https://github.com/GoogleWebComponents/style-guide#events));
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## Avoid `this.$parent`
+
+Vue.js supports nested components which have access to their parent context. Accessing context outside your vue component violates the [FIRST](https://addyosmani.com/first/) rule of [component based development](#module-based-development). Therefore you should **avoid using `this.$parent`**.
+
+### چرا؟
+
+- A vue component, like any component, must work in isolation. If a component needs to access its parent, this rule is broken.
+- If a component needs access to its parent, it can no longer be reused in a different context.
+
+### با چه روشی؟
+
+- Pass values from the parent to the child component using attribute/properties.
+- Pass methods defined on the parent component to the child component using callbacks in attribute expressions.
+- Emit events from child components and catch it on parent component.
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## Use `this.$refs` with caution
+
+Vue.js supports components to have access to other components and basic HTML elements context via `ref` attribute. That attribute will provide an accessible way through `this.$refs` to a component or DOM element context. In most cases, the need to access **other components** context via `this.$refs` could be avoided. This is why you should be careful when using it to avoid wrong component APIs.
+
+### چرا؟
+
+- A vue component, like any component, **must work in isolation**. If a component does not support all the access needed, it was badly designed/implemented.
+- Properties and events should be sufficient to most of your components.
+
+### با چه روشی؟
+
+- Create a good component API.
+- Always focus on the component purpose out of the box.
+- Never write specific code. If you need to write specific code inside a generic component, it means its API isn't generic enough or maybe you need a new component to manage other cases.
+- Check all the props to see if something is missing. If it is, create an issue or enhance the component yourself.
+- Check all the events. In most cases developers forget that Child-Parent communication (events) is needed, that's why they only remember the Parent-Child communication (using props).
+- **Props down, events up!** Upgrade your component when requested with a good API and isolation as goals.
+- Using `this.$refs` on components should be used when props and events are exhausted and having it makes sense (see the example below).
+- Using `this.$refs` to access DOM elements (instead of doing `jQuery`, `document.getElement*`, `document.queryElement`) is just fine, when the element can't be manipulated with data bindings or for a directive.
+
+```html
+
+
+```
+
+```html
+
+
+
Basic Modal
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```html
+
+
+
+
+
+
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## از نام کامپوننت به عنوان محدوده style استفاده کنید
+
+Vue.js component elements are custom elements which can very well be used as style scope root.
+Alternatively the component name can be used as CSS class namespace.
+
+### چرا؟
+
+- Scoping styles to a component element improves predictability as its prevents styles leaking outside the component element.
+- Using the same name for the module directory, the Vue.js component and the style root makes it easy for developers to understand they belong together.
+
+### با چه روشی؟
+
+Use the component name as a namespace prefix based on BEM and OOCSS **and** use the `scoped` attribute on your style class.
+The use of `scoped` will tell your Vue compiler to add a signature on every class that your `
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## برای ای پی آی کامپوننت خود مستند بنویسید
+
+A Vue.js component instance is created by using the component element inside your application. The instance is configured through its custom attributes. For the component to be used by other developers, these custom attributes - the component's API - should be documented in a `README.md` file.
+
+### چرا؟
+
+- Documentation provides developers with a high level overview to a component, without the need to go through all its code. This makes a component more accessible and easier to use.
+- A component's API is the set of custom attributes through which its configured. Therefore these are especially of interest to other developers which only want to consume (and not develop) the component.
+- Documentation formalises the API and tells developers which functionality to keep backwards compatible when modifying the component's code.
+- `README.md` is the de facto standard filename for documentation to be read first. Code repository hosting services (Github, Bitbucket, Gitlab etc) display the contents of the the README's, directly when browsing through source directories. This applies to our module directories as well.
+
+### با چه روشی؟
+
+Add a `README.md` file to the component's module directory:
+
+```
+range-slider/
+├── range-slider.vue
+├── range-slider.less
+└── README.md
+```
+
+Within the README file, describe the functionality and the usage of the module. For a vue component its most useful to describe the custom attributes it supports as those are its API:
+
+# Range slider
+
+## قابلیت
+
+The range slider lets the user to set a numeric range by dragging a handle on a slider rail for both the start and end value.
+
+This module uses the [noUiSlider](http://refreshless.com/nouislider/) for cross browser and touch support.
+
+## نحوه استفاده
+
+`` supports the following custom component attributes:
+
+| attribute | type | description |
+| ---------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `min` | Number | number where range starts (lower limit). |
+| `max` | Number | Number where range ends (upper limit). |
+| `values` | Number[] _اختیاری_ | Array containing start and end value. E.g. `values="[10, 20]"`. Defaults to `[opts.min, opts.max]`. |
+| `step` | Number _اختیاری_ | Number to increment / decrement values by. Defaults to 1. |
+| `on-slide` | Function _اختیاری_ | Function called with `(values, HANDLE)` while a user drags the start (`HANDLE == 0`) or end (`HANDLE == 1`) handle. E.g. `on-slide={ updateInputs }`, with `component.updateInputs = (values, HANDLE) => { const value = values[HANDLE]; }`. |
+| `on-end` | Function _اختیاری_ | Function called with `(values, HANDLE)` when user stops dragging a handle. |
+
+For customising the slider appearance see the [Styling section in the noUiSlider docs](http://refreshless.com/nouislider/more/#section-styling).
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## دمو کامپوننت را اضافه کنید
+
+Add a `index.html` file with demos of the component with different configurations, showing how the component can be used.
+
+### چرا؟
+
+- A component demo proves the component works in isolation.
+- A component demo gives developers a preview before having to dig into the documentation or code.
+- Demos can illustrate all the possible configurations and variations a component can be used in.
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+## فایل های کامپوننت خود را لینت کنید
+
+Linters improve code consistency and help trace syntax errors. .vue files can be linted adding the `eslint-plugin-html` in your project. If you choose, you can start a project with ESLint enabled by default using `vue-cli`;
+
+### چرا؟
+
+- لینت کردن فایل های کامپوننت این اطمینان را می دهد همه توسعه دهندگان از یک استایل کدی مشابه استفاده کنند
+- لینت کردن فایل ها کمک می کند که ارور های سینتکسی را قبل از اینکه به مشکل بخورید پیدا کنید
+
+### با چه روشی؟
+
+To allow linters to extract the scripts from your `*.vue` files, put script inside a `
+```
+
+[↑ برگشت به فهرست مطالب](#فهرست-مطالب)
+
+---
+
+## می خواهید کمک کنید?
+
+فورک کنید و برای چیزی که فکر می کنید بهتر است بیان شود پول ریکوئست دهید یا یک [Issue](https://github.com/pablohpsilva/vuejs-component-style-guide/issues/new) بسازید.
+
+
+
+## مترجم ها
+
+- [پرتغالی برزیلی](README-PTBR.md): Pablo Henrique Silva [github:pablohpsilva](https://github.com/pablohpsilva), [twitter: @PabloHPSilva](https://twitter.com/PabloHPSilva)
+- [روسی](https://pablohpsilva.github.io/vuejs-component-style-guide/#/russian): Mikhail Kuznetcov [github:shershen08](https://github.com/shershen08), [twitter: @legkoletat](https://twitter.com/legkoletat)
+- [فارسی](README-FA.md): Alireza Arabshahi [github:AlirezaArabshahi](https://github.com/AlirezaArabshahi), [twitter: @iialireza7](https://twitter.com/iialireza7)
diff --git a/README.md b/README.md
index b6bf986..7a7ffe1 100644
--- a/README.md
+++ b/README.md
@@ -73,7 +73,7 @@ Each component name must be:
Vue component names must also be:
-* **Custom element spec compliant**: [include a hyphen](https://www.w3.org/TR/custom-elements/#concepts), don't use reserved names.
+* **Custom element spec compliant**: [include a hyphen](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name), don't use reserved names.
* **`app-` namespaced**: if very generic and otherwise 1 word, so that it can easily be reused in other projects.
### Why?
@@ -290,7 +290,7 @@ Component structure:
```html
-