diff --git a/.travis.yml b/.travis.yml index 19d2f7100..f7ee3860c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -5,6 +5,7 @@ cache: directories: - $HOME/.npm - $HOME/.yarn-cache + - node_modules before_install: - curl -o- -L https://yarnpkg.com/install.sh | bash - export PATH=$HOME/.yarn/bin:$PATH diff --git a/components.json b/components.json index ae845177e..966d4a473 100644 --- a/components.json +++ b/components.json @@ -55,5 +55,8 @@ "steps": "./packages/steps/index.js", "step": "./packages/step/index.js", "carousel": "./packages/carousel/index.js", - "carousel-item": "./packages/carousel-item/index.js" + "scrollbar": "./packages/scrollbar/index.js", + "carousel-item": "./packages/carousel-item/index.js", + "collapse": "./packages/collapse/index.js", + "collapse-item": "./packages/collapse-item/index.js" } diff --git a/examples/docs/en-US/collapse.md b/examples/docs/en-US/collapse.md new file mode 100644 index 000000000..79d1f6dae --- /dev/null +++ b/examples/docs/en-US/collapse.md @@ -0,0 +1,150 @@ + + + +## Collapse + +Use Collapse to storage content. + +### Basic usage + +可同时展开多个面板，面板之间不影响 + +:::demo +```html + + +
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+ + +
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
+
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
+ + +
简化流程：设计简洁直观的操作流程；
+
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
+
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
+ + +
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
+
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
+ + + +``` +::: + +### Accordion + +At the same time only one item can be opened. + +:::demo 通过 `accordion` 属性来设置是否以手风琴模式显示。 +```html + + +
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+ + +
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
+
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
+ + +
简化流程：设计简洁直观的操作流程；
+
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
+
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
+ + +
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
+
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
+ + + +``` +::: + +### Customize Title + +除了可以通过 `title` 属性以外，还可以通过作用域插槽来实现自定义面板的标题内容，以实现增加图标等效果。 + +:::demo +```html + + + +
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+ + +
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
+
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
+ + +
简化流程：设计简洁直观的操作流程；
+
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
+
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
+ + +
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
+
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
+ + +``` +::: + +### Collapse Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| accordion | 是否手风琴模式 | boolean | — | false | +| value | 当前激活的面板(如果是手风琴模式，绑定值类型需要为`string`，否则为`array`) | string/array | — | — | + +### Collapse Events +| 事件名称 | 说明 | 回调参数 | +|---------|---------|---------| +| change | 当前激活面板改变时触发(如果是手风琴模式，参数 `activeNames` 类型为`string`，否则为`array`) | (activeNames: array\|string) | + +### Collapse Item Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| name | 唯一标志符 | string/number | — | — | +| title | 面板标题 | string | — | — | \ No newline at end of file diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md index a7440a927..0da271087 100644 --- a/examples/docs/en-US/table.md +++ b/examples/docs/en-US/table.md @@ -1362,6 +1362,7 @@ Customize table column so it can be integrated with other components. | row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — | | context | context of Table, e.g. `_self` refers to the current context, `$parent` parent context, `$root` root context, can be overridden by `context` in `el-table-column` | Object | - | current context where Table lies | | empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | | - | No Data | +| virtual-scrollbar | Enable virtual scrollbar | Boolean | - | false | ### Table Events | Event Name | Description | Parameters | diff --git a/examples/docs/en-US/time-picker.md b/examples/docs/en-US/time-picker.md index b73cd083d..f934ce69b 100644 --- a/examples/docs/en-US/time-picker.md +++ b/examples/docs/en-US/time-picker.md @@ -161,6 +161,7 @@ Can pick an arbitrary time range. | end | end time | string | — | 18:00 | | step | time step | string | — | 00:30 | | minTime | minimum time, any time before this time will be disabled | string | — | 00:00 | +| maxTime | maximum time, any time after this time will be disabled | string | — | - | ### Time Picker Options | Attribute | Description | Type | Accepted Values | Default | diff --git a/examples/docs/zh-CN/collapse.md b/examples/docs/zh-CN/collapse.md new file mode 100644 index 000000000..0acbb2e5c --- /dev/null +++ b/examples/docs/zh-CN/collapse.md @@ -0,0 +1,150 @@ + + + +## Collapse 折叠面板 + +通过折叠面板收纳内容区域 + +### 基础用法 + +可同时展开多个面板，面板之间不影响 + +:::demo +```html + + +
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+ + +
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
+
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
+ + +
简化流程：设计简洁直观的操作流程；
+
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
+
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
+ + +
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
+
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
+ + + +``` +::: + +### 手风琴效果 + +每次只能展开一个面板 + +:::demo 通过 `accordion` 属性来设置是否以手风琴模式显示。 +```html + + +
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+ + +
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
+
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
+ + +
简化流程：设计简洁直观的操作流程；
+
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
+
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
+ + +
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
+
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
+ + + +``` +::: + +### 自定义面板标题 + +除了可以通过 `title` 属性以外，还可以通过作用域插槽来实现自定义面板的标题内容，以实现增加图标等效果。 + +:::demo +```html + + + +
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+ + +
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
+
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
+ + +
简化流程：设计简洁直观的操作流程；
+
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
+
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
+ + +
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
+
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
+ + +``` +::: + +### Collapse Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| accordion | 是否手风琴模式 | boolean | — | false | +| value | 当前激活的面板(如果是手风琴模式，绑定值类型需要为`string`，否则为`array`) | string/array | — | — | + +### Collapse Events +| 事件名称 | 说明 | 回调参数 | +|---------|---------|---------| +| change | 当前激活面板改变时触发(如果是手风琴模式，参数 `activeNames` 类型为`string`，否则为`array`) | (activeNames: array\|string) | + +### Collapse Item Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| name | 唯一标志符 | string/number | — | — | +| title | 面板标题 | string | — | — | \ No newline at end of file diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md index 5de412faa..235f5d863 100644 --- a/examples/docs/zh-CN/table.md +++ b/examples/docs/zh-CN/table.md @@ -1369,6 +1369,7 @@ | row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function(row)/String | — | — | | context | 设置上下文环境，例如设置当前上下文就是 `_self`，父级就是 `$parent`，根组件 `$root`。优先读取 column 的 context 属性。 | Object | - | Table 所处上下文 | | empty-text | 空数据时显示的文本内容，也可以通过 `slot="empty"` 设置 | String | | - | 暂无数据 | +| virtual-scrollbar | 启用虚拟滚动条 | Boolean | - | false | ### Table Events | 事件名 | 说明 | 参数 | diff --git a/examples/docs/zh-CN/time-picker.md b/examples/docs/zh-CN/time-picker.md index 2cf364f91..58f4ebd1f 100644 --- a/examples/docs/zh-CN/time-picker.md +++ b/examples/docs/zh-CN/time-picker.md @@ -168,6 +168,7 @@ | end | 结束时间 | string | — | 18:00 | | step | 间隔时间 | string | — | 00:30 | | minTime | 最小时间，小于该时间的时间段将被禁用 | string | — | 00:00 | +| maxTime | 最大时间，大于该时间的时间段将被禁用 | string | — | - | ### Time Picker Options | 参数 | 说明 | 类型 | 可选值 | 默认值 | diff --git a/examples/index.tpl b/examples/index.tpl index 5b004a04e..15454cfb0 100644 --- a/examples/index.tpl +++ b/examples/index.tpl @@ -19,5 +19,10 @@ ga('create', 'UA-84335471-1', 'auto'); ga('send', 'pageview'); + + window.addEventListener('hashchange', function () { + ga('set', 'page', window.location.href); + ga('send', 'pageview'); + }); <% } %> diff --git a/examples/nav.config.json b/examples/nav.config.json index d697bf31f..d208122ae 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -211,6 +211,10 @@ { "path": "/carousel", "title": "Carousel 走马灯" + }, + { + "path": "/collapse", + "title": "Collapse 折叠面板" } ] } @@ -429,6 +433,10 @@ { "path": "/carousel", "title": "Carousel" + }, + { + "path": "/collapse", + "title": "Collapse" } ] } diff --git a/package.json b/package.json index 05fdae9fd..7e430505f 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,8 @@ "bugs": { "url": "https://github.com/ElemeFE/element/issues" }, + "unpkg": "lib/index.js", + "style": "lib/theme-default/index.css", "dependencies": { "async-validator": "^1.6.6", "babel-helper-vue-jsx-merge-props": "^2.0.0", diff --git a/packages/collapse-item/index.js b/packages/collapse-item/index.js new file mode 100644 index 000000000..e94450044 --- /dev/null +++ b/packages/collapse-item/index.js @@ -0,0 +1,8 @@ +import ElCollapseItem from '../collapse/src/collapse-item.vue'; + +/* istanbul ignore next */ +ElCollapseItem.install = function(Vue) { + Vue.component(ElCollapseItem.name, ElCollapseItem); +}; + +export default ElCollapseItem; diff --git a/packages/collapse/_index.js b/packages/collapse/_index.js new file mode 100644 index 000000000..bdd970b27 --- /dev/null +++ b/packages/collapse/_index.js @@ -0,0 +1,13 @@ +import ElCollapse from './src/collapse'; +import ElCollapseItem from './src/collapse-item.vue'; + +/* istanbul ignore next */ +export default function install(Vue) { + Vue.component(ElCollapseItem.name, ElCollapseItem); + Vue.component(ElCollapse.name, ElCollapse); +}; + +export { + ElCollapse, + ElCollapseItem +}; diff --git a/packages/collapse/cooking.conf.js b/packages/collapse/cooking.conf.js new file mode 100644 index 000000000..db3d361de --- /dev/null +++ b/packages/collapse/cooking.conf.js @@ -0,0 +1,18 @@ +var cooking = require('cooking'); +var path = require('path'); +var config = require('../../build/config'); + +cooking.set({ + entry: { + index: path.join(__dirname, '_index.js') + }, + dist: path.join(__dirname, 'lib'), + template: false, + format: 'umd', + moduleName: 'ElCollapse', + extends: ['vue2'], + alias: config.alias, + externals: { vue: config.vue } +}); + +module.exports = cooking.resolve(); diff --git a/packages/collapse/index.js b/packages/collapse/index.js new file mode 100644 index 000000000..be490f8f2 --- /dev/null +++ b/packages/collapse/index.js @@ -0,0 +1,9 @@ +import ElCollapse from './src/collapse'; + +/* istanbul ignore next */ +ElCollapse.install = function(Vue) { + Vue.component(ElCollapse.name, ElCollapse); +}; + +export default ElCollapse; + diff --git a/packages/collapse/package.json b/packages/collapse/package.json new file mode 100644 index 000000000..af9c241eb --- /dev/null +++ b/packages/collapse/package.json @@ -0,0 +1,15 @@ +{ + "name": "element-collapse", + "version": "1.0.0", + "description": "A row component for Vue.", + "keywords": [ + "element", + "vue", + "component" + ], + "main": "./lib/index.js", + "repository": "https://github.com/ElemeFE/element/tree/master/packages/collapse", + "author": "haiping.zeng@ele.me", + "license": "MIT", + "dependencies": {} +} diff --git a/packages/collapse/src/collapse-item.vue b/packages/collapse/src/collapse-item.vue new file mode 100644 index 000000000..f7127c06a --- /dev/null +++ b/packages/collapse/src/collapse-item.vue @@ -0,0 +1,115 @@ + + diff --git a/packages/collapse/src/collapse.vue b/packages/collapse/src/collapse.vue new file mode 100644 index 000000000..13b37e8e9 --- /dev/null +++ b/packages/collapse/src/collapse.vue @@ -0,0 +1,62 @@ + + diff --git a/packages/date-picker/src/basic/time-spinner.vue b/packages/date-picker/src/basic/time-spinner.vue index d172042c0..c2152a6f3 100644 --- a/packages/date-picker/src/basic/time-spinner.vue +++ b/packages/date-picker/src/basic/time-spinner.vue @@ -1,56 +1,65 @@