From c31f413a4f5b33f06bd9af06ac420061deea5961 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Thu, 19 Oct 2017 15:54:01 +0800
Subject: [PATCH] Layout: add xl breakpoint

---
 examples/docs/en-US/date-picker.md            |  5 +-
 examples/docs/en-US/layout.md                 | 25 +++++---
 examples/docs/en-US/select.md                 |  2 +
 examples/docs/en-US/switch.md                 | 46 ++++++-------
 examples/docs/zh-CN/date-picker.md            |  3 +-
 examples/docs/zh-CN/layout.md                 | 27 +++++---
 examples/docs/zh-CN/select.md                 |  4 +-
 examples/docs/zh-CN/switch.md                 | 46 ++++++-------
 packages/col/src/col.js                       |  5 +-
 packages/select/src/select.vue                |  5 ++
 packages/switch/src/component.vue             | 64 +++++++++----------
 packages/theme-chalk/src/col.scss             | 39 ++++++++++-
 packages/theme-chalk/src/common/var.scss      |  9 ++-
 packages/theme-chalk/src/select-dropdown.scss |  5 +-
 test/unit/specs/switch.spec.js                | 14 ++--
 types/col.d.ts                                |  7 +-
 types/switch.d.ts                             | 16 ++---
 17 files changed, 197 insertions(+), 125 deletions(-)

diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md
index 539e6b2e2..34d41908f 100644
--- a/examples/docs/en-US/date-picker.md
+++ b/examples/docs/en-US/date-picker.md
@@ -210,7 +210,7 @@ You can choose week, month or year by extending the standard date picker compone
 
 Picking a date range is supported.
 
-:::demo
+:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the `unlink-panels` attribute.
 
 ```html
 <template>
@@ -230,6 +230,7 @@ Picking a date range is supported.
       v-model="value7"
       type="daterange"
       align="right"
+      unlink-panels
       range-separator="To"
       start-placeholder="Start date"
       end-placeholder="End date"
@@ -389,7 +390,7 @@ This feature is at alpha stage. Feedback welcome.
 | default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
 | value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
 | name | same as `name` in native input | string | — | — |
-| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
+| unlink-panels | unlink two date-panels in range-picker | boolean | — | false |
 
 ### Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
diff --git a/examples/docs/en-US/layout.md b/examples/docs/en-US/layout.md
index 6d5bb7b37..34f03b255 100644
--- a/examples/docs/en-US/layout.md
+++ b/examples/docs/en-US/layout.md
@@ -309,15 +309,15 @@ Use the flex layout to make flexible alignment of columns.
 
 ### Responsive Layout
 
-Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.
+Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.
 
 ::: demo
 ```html
 <el-row :gutter="10">
-  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
-  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
 </el-row>
 
 <style>
@@ -341,12 +341,15 @@ Taking example by Bootstrap's responsive design, four breakpoints are preset: xs
 ```
 :::
 
-### Classes for Visibility
+### Utility classes for hiding elements
+
+Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:
 
 ```js
-import 'element-ui/lib/theme-chalk/display.scss';
+import 'element-ui/lib/theme-chalk/display.css';
 ```
 
+The classes are:
 - `hide-xs-only` - hide when on extra small viewports only
 - `hide-sm-only` - hide when on small viewports and down
 - `hide-sm-and-down` - hide when on small viewports and down
@@ -355,6 +358,9 @@ import 'element-ui/lib/theme-chalk/display.scss';
 - `hide-md-and-down` - hide when on medium viewports and down
 - `hide-md-and-up` - hide when on medium viewports and up
 - `hide-lg-only` - hide when on large viewports only
+- `hide-lg-and-down` - hide when on large viewports and down
+- `hide-lg-and-up` - hide when on large viewports and up
+- `hide-xl-only` - hide when on extra large viewports only
 
 ### Row Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -374,8 +380,9 @@ import 'element-ui/lib/theme-chalk/display.scss';
 | pull |  number of columns that grid moves to the left | number | — | 0 |
 | xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
 | sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
-| md | `≥992` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
-| lg | `≥1200` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
+| md | `≥992px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
+| lg | `≥1200px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
+| xl | `≥1920px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
 | tag | custom element tag | string | * | div |
 
 
diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md
index 59cc4be23..79e85c45b 100644
--- a/examples/docs/en-US/select.md
+++ b/examples/docs/en-US/select.md
@@ -530,6 +530,7 @@ Enter keywords and search data from server.
     multiple
     filterable
     remote
+    reserve-keyword
     placeholder="Please enter a keyword"
     :remote-method="remoteMethod"
     :loading="loading">
@@ -662,6 +663,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | no-match-text | displayed text when no data matches the filtering query | string | — | No matching data |
 | no-data-text | displayed text when there is no options | string | — | No data |
 | popper-class | custom class name for Select's dropdown | string | — | — |
+| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | false |
 | default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false |
 
 ### Select Events
diff --git a/examples/docs/en-US/switch.md b/examples/docs/en-US/switch.md
index 42f10f0d0..d07939640 100644
--- a/examples/docs/en-US/switch.md
+++ b/examples/docs/en-US/switch.md
@@ -27,15 +27,15 @@
 Switch is used for switching between two opposing states.
 
 ### Basic usage
-:::demo Bind `v-model` to a `Boolean` typed variable. The `true-color` and `false-color` attribute decides the background color in two states.
+:::demo Bind `v-model` to a `Boolean` typed variable. The `active-color` and `inactive-color` attribute decides the background color in two states.
 
 ```html
 <el-switch v-model="value1">
 </el-switch>
 <el-switch
   v-model="value2"
-  true-color="#13ce66"
-  false-color="#ff4949">
+  active-color="#13ce66"
+  inactive-color="#ff4949">
 </el-switch>
 
 <script>
@@ -52,21 +52,21 @@ Switch is used for switching between two opposing states.
 :::
 
 ### Text description
-:::demo You can add `true-text` and `false-text` attribute to show texts.
+:::demo You can add `active-text` and `inactive-text` attribute to show texts.
 
 ```html
 <el-switch
   v-model="value3"
-  true-text="Pay by month"
-  false-text="Pay by year">
+  active-text="Pay by month"
+  inactive-text="Pay by year">
 </el-switch>
 <el-switch
   style="display: block"
   v-model="value4"
-  true-color="#13ce66"
-  false-color="#ff4949"
-  true-text="Pay by month"
-  false-text="Pay by year">
+  active-color="#13ce66"
+  inactive-color="#ff4949"
+  active-text="Pay by month"
+  inactive-text="Pay by year">
 </el-switch>
 
 <script>
@@ -84,16 +84,16 @@ Switch is used for switching between two opposing states.
 
 ### Extended value types
 
-:::demo You can set `true-value` and `false-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
+:::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
 
 ```html
 <el-tooltip :content="'Switch value: ' + value5" placement="top">
   <el-switch
     v-model="value5"
-    true-color="#13ce66"
-    false-color="#ff4949"
-    true-value="100"
-    false-value="0">
+    active-color="#13ce66"
+    inactive-color="#ff4949"
+    active-value="100"
+    inactive-value="0">
   </el-switch>
 </el-tooltip>
 
@@ -143,14 +143,14 @@ Switch is used for switching between two opposing states.
 ----| ----| ----| ----|----
 disabled | whether Switch is disabled | boolean | — | false
 width | width of Switch | number | — | 40
-true-icon-class | class name of the icon displayed when in `on` state, overrides `true-text` | string | — | —
-false-icon-class |class name of the icon displayed when in `off` state, overrides `false-text`| string | — | —
-true-text | text displayed when in `on` state | string | — | —
-false-text | text displayed when in `off` state | string | — | —
-true-value  | switch value when in `on` state | boolean / string / number | — | true
-false-value  | switch value when in `off` state | boolean / string / number | — | false
-true-color | background color when in `on` state | string | — | #409EFF
-false-color | background color when in `off` state | string | — | #C0CCDA
+active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | —
+inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | —
+active-text | text displayed when in `on` state | string | — | —
+inactive-text | text displayed when in `off` state | string | — | —
+active-value  | switch value when in `on` state | boolean / string / number | — | true
+inactive-value  | switch value when in `off` state | boolean / string / number | — | false
+active-color | background color when in `on` state | string | — | #409EFF
+inactive-color | background color when in `off` state | string | — | #C0CCDA
 name| input name of Switch | string | — | —
 
 ### Events
diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md
index 625e5a2f1..be54964ef 100644
--- a/examples/docs/zh-CN/date-picker.md
+++ b/examples/docs/zh-CN/date-picker.md
@@ -222,7 +222,7 @@
 
 可在一个选择器中便捷地选择一个时间范围
 
-:::demo
+:::demo 在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用`unlink-panels`属性解除联动。
 ```html
 <template>
   <div class="block">
@@ -241,6 +241,7 @@
       v-model="value7"
       type="daterange"
       align="right"
+      unlink-panels
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
diff --git a/examples/docs/zh-CN/layout.md b/examples/docs/zh-CN/layout.md
index 408122b78..499d8fed9 100644
--- a/examples/docs/zh-CN/layout.md
+++ b/examples/docs/zh-CN/layout.md
@@ -308,15 +308,15 @@
 
 ### 响应式布局
 
-参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸：`xs`、`sm`、`md`和`lg`。
+参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：`xs`、`sm`、`md`、`lg` 和 `xl`。
 
 ::: demo
 ```html
 <el-row :gutter="10">
-  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
-  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
 </el-row>
 
 <style>
@@ -340,12 +340,15 @@
 ```
 :::
 
-### 基于断点的隐藏
+### 基于断点的隐藏类
+
+Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：
 
 ```js
-import 'element-ui/lib/theme-chalk/display.scss';
+import 'element-ui/lib/theme-chalk/display.css';
 ```
 
+包含的类名及其含义为：
 - `hidden-xs-only` - 当视口在 `xs` 尺寸时隐藏
 - `hidden-sm-only` - 当视口在 `sm` 尺寸时隐藏
 - `hidden-sm-and-down` - 当视口在 `sm` 及以下尺寸时隐藏
@@ -353,7 +356,10 @@ import 'element-ui/lib/theme-chalk/display.scss';
 - `hidden-md-only` - 当视口在 `md` 尺寸时隐藏
 - `hidden-md-and-down` - 当视口在 `md` 及以下尺寸时隐藏
 - `hidden-md-and-up` - 当视口在 `md` 及以上尺寸时隐藏
-- `hidden-lg-only` - 当视口在 `lg` 及以下尺寸时隐藏
+- `hidden-lg-only` - 当视口在 `lg` 尺寸时隐藏
+- `hidden-lg-and-down` - 当视口在 `lg` 及以下尺寸时隐藏
+- `hidden-lg-and-up` - 当视口在 `lg` 及以上尺寸时隐藏
+- `hidden-xl-only` - 当视口在 `xl` 尺寸时隐藏
 
 ### Row Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -373,6 +379,7 @@ import 'element-ui/lib/theme-chalk/display.scss';
 | pull |  栅格向左移动格数 | number | — | 0 |
 | xs | `<768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
 | sm | `≥768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
-| md | `≥992` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
-| lg | `≥1200` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
+| md | `≥992px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
+| lg | `≥1200px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
+| xl | `≥1920px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — |
 | tag | 自定义元素标签 | string | * | div |
diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md
index a76aa3ad7..e87951105 100644
--- a/examples/docs/zh-CN/select.md
+++ b/examples/docs/zh-CN/select.md
@@ -525,6 +525,7 @@
     multiple
     filterable
     remote
+    reserve-keyword
     placeholder="请输入关键词"
     :remote-method="remoteMethod"
     :loading="loading">
@@ -649,7 +650,7 @@
 | placeholder | 占位符 | string | — | 请选择 |
 | filterable | 是否可搜索 | boolean | — | false |
 | allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false |
-| filter-method | 自定义过滤方法 | function | — | — |
+| filter-method | 自定义搜索方法 | function | — | — |
 | remote | 是否为远程搜索 | boolean | — | false |
 | remote-method | 远程搜索方法 | function | — | — |
 | loading | 是否正在从远程获取数据 | boolean | — | false |
@@ -657,6 +658,7 @@
 | no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 |
 | no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
 | popper-class | Select 下拉框的类名 | string | — | — |
+| reserve-keyword | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false |
 | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
 
 ### Select Events
diff --git a/examples/docs/zh-CN/switch.md b/examples/docs/zh-CN/switch.md
index fb50dc497..08fbec58f 100644
--- a/examples/docs/zh-CN/switch.md
+++ b/examples/docs/zh-CN/switch.md
@@ -28,13 +28,13 @@
 
 ### 基本用法
 
-:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`true-color`属性与`false-color`属性来设置开关的背景色。
+:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`active-color`属性与`inactive-color`属性来设置开关的背景色。
 
 ```html
 <el-switch
   v-model="value2"
-  true-color="#13ce66"
-  false-color="#ff4949">
+  active-color="#13ce66"
+  inactive-color="#ff4949">
 </el-switch>
 
 <script>
@@ -52,21 +52,21 @@
 
 ### 文字描述
 
-:::demo 使用`true-text`属性与`false-text`属性来设置开关的文字描述。
+:::demo 使用`active-text`属性与`inactive-text`属性来设置开关的文字描述。
 
 ```html
 <el-switch
   v-model="value3"
-  true-text="按月付费"
-  false-text="按年付费">
+  active-text="按月付费"
+  inactive-text="按年付费">
 </el-switch>
 <el-switch
   style="display: block"
   v-model="value4"
-  true-color="#13ce66"
-  false-color="#ff4949"
-  true-text="按月付费"
-  false-text="按年付费">
+  active-color="#13ce66"
+  inactive-color="#ff4949"
+  active-text="按月付费"
+  inactive-text="按年付费">
 </el-switch>
 
 <script>
@@ -84,16 +84,16 @@
 
 ### 扩展的 value 类型
 
-:::demo 设置`true-value`和`false-value`属性，接受`Boolean`, `String`或`Number`类型的值。
+:::demo 设置`active-value`和`inactive-value`属性，接受`Boolean`, `String`或`Number`类型的值。
 
 ```html
 <el-tooltip :content="'Switch value: ' + value5" placement="top">
   <el-switch
     v-model="value5"
-    true-color="#13ce66"
-    false-color="#ff4949"
-    true-value="100"
-    false-value="0">
+    active-color="#13ce66"
+    inactive-color="#ff4949"
+    active-value="100"
+    inactive-value="0">
   </el-switch>
 </el-tooltip>
 
@@ -144,14 +144,14 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | width  | switch 的宽度（像素）    | number   | — | 40 |
-| true-icon-class  | switch 打开时所显示图标的类名，设置此项会忽略 `true-text`    | string   | — | — |
-| false-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `false-text`    | string   | — | — |
-| true-text  | switch 打开时的文字描述    | string   | — | — |
-| false-text  | switch 关闭时的文字描述    | string   | — | — |
-| true-value  | switch 打开时的值    | boolean / string / number | — | true |
-| false-value  | switch 关闭时的值    | boolean / string / number | — | false |
-| true-color  | switch 打开时的背景色    | string   | — | #409EFF |
-| false-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
+| active-icon-class  | switch 打开时所显示图标的类名，设置此项会忽略 `active-text`    | string   | — | — |
+| inactive-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `inactive-text`    | string   | — | — |
+| active-text  | switch 打开时的文字描述    | string   | — | — |
+| inactive-text  | switch 关闭时的文字描述    | string   | — | — |
+| active-value  | switch 打开时的值    | boolean / string / number | — | true |
+| inactive-value  | switch 关闭时的值    | boolean / string / number | — | false |
+| active-color  | switch 打开时的背景色    | string   | — | #409EFF |
+| inactive-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
 | name  | switch 对应的 name 属性    | string   | — | — |
 
 ### Events
diff --git a/packages/col/src/col.js b/packages/col/src/col.js
index 563002838..1aa5dc78a 100644
--- a/packages/col/src/col.js
+++ b/packages/col/src/col.js
@@ -16,7 +16,8 @@ export default {
     xs: [Number, Object],
     sm: [Number, Object],
     md: [Number, Object],
-    lg: [Number, Object]
+    lg: [Number, Object],
+    xl: [Number, Object]
   },
 
   computed: {
@@ -47,7 +48,7 @@ export default {
       }
     });
 
-    ['xs', 'sm', 'md', 'lg'].forEach(size => {
+    ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
       if (typeof this[size] === 'number') {
         classList.push(`el-col-${size}-${this[size]}`);
       } else if (typeof this[size] === 'object') {
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index ed6f48579..8596e6c7e 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -236,6 +236,7 @@
         }
       },
       defaultFirstOption: Boolean,
+      reserveKeyword: Boolean,
       valueKey: {
         type: String,
         default: 'value'
@@ -277,6 +278,10 @@
           } else {
             this.currentPlaceholder = this.cachedPlaceHolder;
           }
+          if (this.filterable && !this.reserveKeyword) {
+            this.query = '';
+            this.handleQueryChange(this.query);
+          }
         }
         this.setSelected();
         if (this.filterable && !this.multiple) {
diff --git a/packages/switch/src/component.vue b/packages/switch/src/component.vue
index 320c001be..49e396909 100644
--- a/packages/switch/src/component.vue
+++ b/packages/switch/src/component.vue
@@ -13,25 +13,25 @@
       @change="handleChange"
       ref="input"
       :name="name"
-      :true-value="trueValue"
-      :false-value="falseValue"
+      :true-value="activeValue"
+      :false-value="inactiveValue"
       :disabled="disabled"
       @keydown.enter="switchValue"
     >
     <span
       :class="['el-switch__label', 'el-switch__label--left', !checked ? 'is-active' : '']"
-      v-if="falseIconClass || falseText">
-      <i :class="[falseIconClass]" v-if="falseIconClass"></i>
-      <span v-if="!falseIconClass && falseText" :aria-hidden="checked">{{ falseText }}</span>
+      v-if="inactiveIconClass || inactiveText">
+      <i :class="[inactiveIconClass]" v-if="inactiveIconClass"></i>
+      <span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
     </span>
     <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
       <span class="el-switch__button" :style="{ transform }"></span>
     </span>
     <span
       :class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']"
-      v-if="trueIconClass || trueText">
-      <i :class="[trueIconClass]" v-if="trueIconClass"></i>
-      <span v-if="!trueIconClass && trueText" :aria-hidden="!checked">{{ trueText }}</span>
+      v-if="activeIconClass || activeText">
+      <i :class="[activeIconClass]" v-if="activeIconClass"></i>
+      <span v-if="!activeIconClass && activeText" :aria-hidden="!checked">{{ activeText }}</span>
     </span>
   </div>
 </template>
@@ -55,29 +55,29 @@
         type: Number,
         default: 0
       },
-      trueIconClass: {
+      activeIconClass: {
         type: String,
         default: ''
       },
-      falseIconClass: {
+      inactiveIconClass: {
         type: String,
         default: ''
       },
-      trueText: String,
-      falseText: String,
-      trueColor: {
+      activeText: String,
+      inactiveText: String,
+      activeColor: {
         type: String,
         default: ''
       },
-      falseColor: {
+      inactiveColor: {
         type: String,
         default: ''
       },
-      trueValue: {
+      activeValue: {
         type: [Boolean, String, Number],
         default: true
       },
-      falseValue: {
+      inactiveValue: {
         type: [Boolean, String, Number],
         default: false
       },
@@ -92,13 +92,13 @@
       };
     },
     created() {
-      if (!~[this.trueValue, this.falseValue].indexOf(this.value)) {
-        this.$emit('input', this.falseValue);
+      if (!~[this.activeValue, this.inactiveValue].indexOf(this.value)) {
+        this.$emit('input', this.inactiveValue);
       }
     },
     computed: {
       checked() {
-        return this.value === this.trueValue;
+        return this.value === this.activeValue;
       },
       transform() {
         return this.checked ? `translate3d(${ this.coreWidth - 20 }px, 0, 0)` : '';
@@ -107,15 +107,15 @@
     watch: {
       checked() {
         this.$refs.input.checked = this.checked;
-        if (this.trueColor || this.falseColor) {
+        if (this.activeColor || this.inactiveColor) {
           this.setBackgroundColor();
         }
       }
     },
     methods: {
       handleChange(event) {
-        this.$emit('input', !this.checked ? this.trueValue : this.falseValue);
-        this.$emit('change', !this.checked ? this.trueValue : this.falseValue);
+        this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
+        this.$emit('change', !this.checked ? this.activeValue : this.inactiveValue);
         this.$nextTick(() => {
           // set input's checked property
           // in case parent refuses to change component's value
@@ -123,7 +123,7 @@
         });
       },
       setBackgroundColor() {
-        let newColor = this.checked ? this.trueColor : this.falseColor;
+        let newColor = this.checked ? this.activeColor : this.inactiveColor;
         this.$refs.core.style.borderColor = newColor;
         this.$refs.core.style.backgroundColor = newColor;
       },
@@ -133,14 +133,14 @@
       getMigratingConfig() {
         return {
           props: {
-            'on-color': 'on-color is renamed to true-color.',
-            'off-color': 'off-color is renamed to false-color.',
-            'on-text': 'on-text is renamed to true-text.',
-            'off-text': 'off-text is renamed to false-text.',
-            'on-value': 'on-value is renamed to true-value.',
-            'off-value': 'off-value is renamed to false-value.',
-            'on-icon-class': 'on-icon-class is renamed to true-icon-class.',
-            'off-icon-class': 'off-icon-class is renamed to false-icon-class.'
+            'on-color': 'on-color is renamed to active-color.',
+            'off-color': 'off-color is renamed to inactive-color.',
+            'on-text': 'on-text is renamed to active-text.',
+            'off-text': 'off-text is renamed to inactive-text.',
+            'on-value': 'on-value is renamed to active-value.',
+            'off-value': 'off-value is renamed to inactive-value.',
+            'on-icon-class': 'on-icon-class is renamed to active-icon-class.',
+            'off-icon-class': 'off-icon-class is renamed to inactive-icon-class.'
           }
         };
       }
@@ -148,7 +148,7 @@
     mounted() {
       /* istanbul ignore if */
       this.coreWidth = this.width || 40;
-      if (this.trueColor || this.falseColor) {
+      if (this.activeColor || this.inactiveColor) {
         this.setBackgroundColor();
       }
       this.$refs.input.checked = this.checked;
diff --git a/packages/theme-chalk/src/col.scss b/packages/theme-chalk/src/col.scss
index 045709f73..7136bd78c 100644
--- a/packages/theme-chalk/src/col.scss
+++ b/packages/theme-chalk/src/col.scss
@@ -6,7 +6,7 @@
   box-sizing: border-box;
 }
 
-[class*="-0"] {
+.el-col-0 {
   display: none;
 }
 
@@ -31,6 +31,9 @@
 }
 
 @include res(xs) {
+  .el-col-xs-0 {
+    display: none;
+  }
   @for $i from 1 through 24 {
     .el-col-xs-#{$i} {
       width: (1 / 24 * $i * 100) * 1%;
@@ -53,6 +56,9 @@
 }
 
 @include res(sm) {
+  .el-col-sm-0 {
+    display: none;
+  }
   @for $i from 1 through 24 {
     .el-col-sm-#{$i} {
       width: (1 / 24 * $i * 100) * 1%;
@@ -75,6 +81,9 @@
 }
 
 @include res(md) {
+  .el-col-md-0 {
+    display: none;
+  }
   @for $i from 1 through 24 {
     .el-col-md-#{$i} {
       width: (1 / 24 * $i * 100) * 1%;
@@ -97,6 +106,9 @@
 }
 
 @include res(lg) {
+  .el-col-lg-0 {
+    display: none;
+  }
   @for $i from 1 through 24 {
     .el-col-lg-#{$i} {
       width: (1 / 24 * $i * 100) * 1%;
@@ -116,4 +128,29 @@
       left: (1 / 24 * $i * 100) * 1%;
     }
   }
+}
+
+@include res(xl) {
+  .el-col-xl-0 {
+    display: none;
+  }
+  @for $i from 1 through 24 {
+    .el-col-xl-#{$i} {
+      width: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-xl-offset-#{$i} {
+      margin-left: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-xl-pull-#{$i} {
+      position: relative;
+      right: (1 / 24 * $i * 100) * 1%;
+    }
+
+    .el-col-xl-push-#{$i} {
+      position: relative;
+      left: (1 / 24 * $i * 100) * 1%;
+    }
+  }
 }
\ No newline at end of file
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 4f87fe02e..df2d5d2c5 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -679,12 +679,14 @@ $--main-padding: 20px;
 $--sm: 768px !default;
 $--md: 992px !default;;
 $--lg: 1200px !default;;
+$--xl: 1920px !default;;
 
 $--breakpoints: (
   'xs' : (max-width: $--sm),
   'sm' : (min-width: $--sm),
   'md' : (min-width: $--md),
-  'lg' : (min-width: $--lg)
+  'lg' : (min-width: $--lg),
+  'xl' : (min-width: $--xl)
 );
 
 $--breakpoints-spec: (
@@ -695,5 +697,8 @@ $--breakpoints-spec: (
   'md-and-up' : (min-width: $--md),
   'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg } - 1)",
   'md-and-down': (max-width: $--lg - 1),
-  'lg-only' : (min-width: $--lg),
+  'lg-and-up' : (min-width: $--lg),
+  'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl } - 1)",
+  'lg-and-down': (max-width: $--xl - 1),
+  'xl-only' : (min-width: $--xl),
 );
diff --git a/packages/theme-chalk/src/select-dropdown.scss b/packages/theme-chalk/src/select-dropdown.scss
index b4e79f1fa..26ddef29a 100644
--- a/packages/theme-chalk/src/select-dropdown.scss
+++ b/packages/theme-chalk/src/select-dropdown.scss
@@ -24,8 +24,9 @@
         position: absolute;
         right: 20px;
         font-family: 'element-icons';
-        content: "\E608";
-        font-size: 11px;
+        content: "\E611";
+        font-size: 12px;
+        font-weight: bold;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
       }
diff --git a/test/unit/specs/switch.spec.js b/test/unit/specs/switch.spec.js
index c21a084f6..fe700e98e 100644
--- a/test/unit/specs/switch.spec.js
+++ b/test/unit/specs/switch.spec.js
@@ -10,10 +10,10 @@ describe('Switch', () => {
 
   it('create', () => {
     vm = createTest(Switch, {
-      trueText: 'on',
-      falseText: 'off',
-      trueColor: '#0f0',
-      falseColor: '#f00',
+      activeText: 'on',
+      inactiveText: 'off',
+      activeColor: '#0f0',
+      inactiveColor: '#f00',
       width: 100
     });
 
@@ -25,8 +25,8 @@ describe('Switch', () => {
 
   it('switch with icons', () => {
     vm = createTest(Switch, {
-      trueIconClass: 'el-icon-check',
-      falseIconClass: 'el-icon-close'
+      activeIconClass: 'el-icon-check',
+      inactiveIconClass: 'el-icon-close'
     });
 
     const icon = vm.$el.querySelector('.el-switch__label--left').querySelector('i');
@@ -125,7 +125,7 @@ describe('Switch', () => {
     vm = createVue({
       template: `
         <div>
-          <el-switch v-model="value" :true-value="onValue" :false-value="offValue"></el-switch>
+          <el-switch v-model="value" :active-value="onValue" :inactive-value="offValue"></el-switch>
         </div>
       `,
       data() {
diff --git a/types/col.d.ts b/types/col.d.ts
index 938924835..bbdb33297 100644
--- a/types/col.d.ts
+++ b/types/col.d.ts
@@ -32,12 +32,15 @@ export declare class ElCol extends ElementUIComponent {
   /** ≥768px Responsive columns or column props object */
   sm: ResponsiveColumn
 
-  /** ≥992 Responsive columns or column props object */
+  /** ≥992px Responsive columns or column props object */
   md: ResponsiveColumn
 
-  /** ≥1200 Responsive columns or column props object */
+  /** ≥1200px Responsive columns or column props object */
   lg: ResponsiveColumn
 
+  /** ≥1920px Responsive columns or column props object */
+  xl: ResponsiveColumn
+
   /** custom element tag */
   tag: string
 }
diff --git a/types/switch.d.ts b/types/switch.d.ts
index 298f41f37..b63987bd9 100644
--- a/types/switch.d.ts
+++ b/types/switch.d.ts
@@ -12,28 +12,28 @@ export declare class ElSwitch extends ElementUIComponent {
   width: number
 
   /** Class name of the icon displayed when in on state, overrides on-text */
-  trueIconClass: string
+  activeIconClass: string
 
   /** Class name of the icon displayed when in off state, overrides off-text */
-  falseIconClass: string
+  inactiveIconClass: string
 
   /** Text displayed when in on state */
-  trueText: string
+  activeText: string
 
   /** Text displayed when in off state */
-  falseText: string
+  inactiveText: string
 
   /** Background color when in on state */
-  trueColor: string
+  activeColor: string
 
   /** Background color when in off state */
-  falseColor: string
+  inactiveColor: string
 
   /** Switch value when in on state */
-  trueValue: string | boolean | number
+  activeValue: string | boolean | number
 
   /** Switch value when in off state */
-  falseValue: string | boolean | number
+  inactiveValue: string | boolean | number
 
   /** Input name of Switch */
   name: string