diff --git a/.babelrc b/.babelrc index 608f00b5a..ad2e61542 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,5 @@ { - "presets": ["es2015"], + "presets": ["es2015-loose"], "plugins": ["transform-vue-jsx"], "comments": false } diff --git a/examples/docs/checkbox.md b/examples/docs/checkbox.md index d5e53e9dc..619ec4213 100644 --- a/examples/docs/checkbox.md +++ b/examples/docs/checkbox.md @@ -31,32 +31,32 @@ ### 单个勾选框，逻辑值
- {{checked | json}} + {{ checked }}
```html -{{checked | json}} +{{ checked }} ``` ### 多个勾选框，绑定到同一个数组
- - - - - + + + + +
-

{{checkList | json}}

+

{{ checkList }}

```html diff --git a/packages/tree/src/transition.js b/packages/tree/src/transition.js index 3594f581e..88efb9490 100644 --- a/packages/tree/src/transition.js +++ b/packages/tree/src/transition.js @@ -1,11 +1,11 @@ -export default { +class Transition { beforeEnter(el) { el.dataset.oldPaddingTop = el.style.paddingTop; el.dataset.oldPaddingBottom = el.style.paddingBottom; el.style.height = '0'; el.style.paddingTop = 0; el.style.paddingBottom = 0; - }, + } enter(el) { el.dataset.oldOverflow = el.style.overflow; @@ -22,13 +22,13 @@ export default { } el.style.overflow = 'hidden'; - }, + } afterEnter(el) { el.style.display = ''; el.style.height = ''; el.style.overflow = el.dataset.oldOverflow; - }, + } beforeLeave(el) { el.dataset.oldPaddingTop = el.style.paddingTop; @@ -40,7 +40,7 @@ export default { el.style.height = el.scrollHeight + 'px'; } el.style.overflow = 'hidden'; - }, + } leave(el) { if (el.scrollHeight !== 0) { @@ -50,7 +50,7 @@ export default { el.style.paddingBottom = 0; }); } - }, + } afterLeave(el) { el.style.display = el.style.height = ''; @@ -59,3 +59,22 @@ export default { el.style.paddingBottom = el.dataset.oldPaddingBottom; } }; + +export default { + functional: true, + render(h, { children }) { + const data = { + props: { + appear: true + }, + on: new Transition() + }; + + children = children.map(item => { + item.data.class = ['collapse-transition']; + return item; + }); + + return h('transition', data, children); + } +}; diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue index 739212c81..4041002f2 100644 --- a/packages/tree/src/tree-node.vue +++ b/packages/tree/src/tree-node.vue @@ -6,16 +6,17 @@ - + {{ node.label }} -
- -
+ +
+ +
+ @@ -33,6 +34,10 @@ } }, + components: { + CollapseTransition + }, + data() { return { $tree: null, @@ -80,10 +85,6 @@ } this.showCheckbox = tree.showCheckbox; - }, - - transitions: { - collapse: CollapseTransition } }; diff --git a/src/index.js b/src/index.js index 014a1e21d..2e539d2fa 100644 --- a/src/index.js +++ b/src/index.js @@ -1,104 +1,104 @@ -import Group from '../packages/group/index.js'; -import SelectDropdown from '../packages/select-dropdown/index.js'; -import Pagination from '../packages/pagination/index.js'; -import Dialog from '../packages/dialog/index.js'; -import Autocomplete from '../packages/autocomplete/index.js'; -import Dropdown from '../packages/dropdown/index.js'; -import DropdownItem from '../packages/dropdown-item/index.js'; -import Menu from '../packages/menu/index.js'; -import Submenu from '../packages/submenu/index.js'; -import MenuItem from '../packages/menu-item/index.js'; -import Input from '../packages/input/index.js'; -import InputNumber from '../packages/input-number/index.js'; -import InputGroup from '../packages/input-group/index.js'; -import Radio from '../packages/radio/index.js'; -import RadioGroup from '../packages/radio-group/index.js'; -import RadioButton from '../packages/radio-button/index.js'; +// import Group from '../packages/group/index.js'; +// import SelectDropdown from '../packages/select-dropdown/index.js'; +// import Pagination from '../packages/pagination/index.js'; +// import Dialog from '../packages/dialog/index.js'; +// import Autocomplete from '../packages/autocomplete/index.js'; +// import Dropdown from '../packages/dropdown/index.js'; +// import DropdownItem from '../packages/dropdown-item/index.js'; +// import Menu from '../packages/menu/index.js'; +// import Submenu from '../packages/submenu/index.js'; +// import MenuItem from '../packages/menu-item/index.js'; +// import Input from '../packages/input/index.js'; +// import InputNumber from '../packages/input-number/index.js'; +// import InputGroup from '../packages/input-group/index.js'; +// import Radio from '../packages/radio/index.js'; +// import RadioGroup from '../packages/radio-group/index.js'; +// import RadioButton from '../packages/radio-button/index.js'; import Checkbox from '../packages/checkbox/index.js'; import CheckboxGroup from '../packages/checkbox-group/index.js'; -import Switch from '../packages/switch/index.js'; -import Select from '../packages/select/index.js'; -import Option from '../packages/option/index.js'; -import OptionGroup from '../packages/option-group/index.js'; -import Button from '../packages/button/index.js'; -import ButtonGroup from '../packages/button-group/index.js'; -import Table from '../packages/table/index.js'; -import TableColumn from '../packages/table-column/index.js'; -import DatePicker from '../packages/date-picker/index.js'; -import TimeSelect from '../packages/time-select/index.js'; -import TimePicker from '../packages/time-picker/index.js'; -import Popover from '../packages/popover/index.js'; -import Tooltip from '../packages/tooltip/index.js'; -import MessageBox from '../packages/message-box/index.js'; -import Breadcrumb from '../packages/breadcrumb/index.js'; -import BreadcrumbItem from '../packages/breadcrumb-item/index.js'; -import Form from '../packages/form/index.js'; -import FormItem from '../packages/form-item/index.js'; -import Tabs from '../packages/tabs/index.js'; -import TabPane from '../packages/tab-pane/index.js'; -import Tag from '../packages/tag/index.js'; +// import Switch from '../packages/switch/index.js'; +// import Select from '../packages/select/index.js'; +// import Option from '../packages/option/index.js'; +// import OptionGroup from '../packages/option-group/index.js'; +// import Button from '../packages/button/index.js'; +// import ButtonGroup from '../packages/button-group/index.js'; +// import Table from '../packages/table/index.js'; +// import TableColumn from '../packages/table-column/index.js'; +// import DatePicker from '../packages/date-picker/index.js'; +// import TimeSelect from '../packages/time-select/index.js'; +// import TimePicker from '../packages/time-picker/index.js'; +// import Popover from '../packages/popover/index.js'; +// import Tooltip from '../packages/tooltip/index.js'; +// import MessageBox from '../packages/message-box/index.js'; +// import Breadcrumb from '../packages/breadcrumb/index.js'; +// import BreadcrumbItem from '../packages/breadcrumb-item/index.js'; +// import Form from '../packages/form/index.js'; +// import FormItem from '../packages/form-item/index.js'; +// import Tabs from '../packages/tabs/index.js'; +// import TabPane from '../packages/tab-pane/index.js'; +// import Tag from '../packages/tag/index.js'; import Tree from '../packages/tree/index.js'; -import Alert from '../packages/alert/index.js'; -import Notification from '../packages/notification/index.js'; -import Slider from '../packages/slider/index.js'; -import Loading from '../packages/loading/index.js'; -import Icon from '../packages/icon/index.js'; -import Row from '../packages/row/index.js'; -import Col from '../packages/col/index.js'; -import Upload from '../packages/upload/index.js'; -import Progress from '../packages/progress/index.js'; -import Spinner from '../packages/spinner/index.js'; +// import Alert from '../packages/alert/index.js'; +// import Notification from '../packages/notification/index.js'; +// import Slider from '../packages/slider/index.js'; +// import Loading from '../packages/loading/index.js'; +// import Icon from '../packages/icon/index.js'; +// import Row from '../packages/row/index.js'; +// import Col from '../packages/col/index.js'; +// import Upload from '../packages/upload/index.js'; +// import Progress from '../packages/progress/index.js'; +// import Spinner from '../packages/spinner/index.js'; const install = function(Vue) { if (install.installed) return; - Vue.component(Group.name, Group); - Vue.component(SelectDropdown.name, SelectDropdown); - Vue.component(Pagination.name, Pagination); - Vue.component(Dialog.name, Dialog); - Vue.component(Autocomplete.name, Autocomplete); - Vue.component(Dropdown.name, Dropdown); - Vue.component(DropdownItem.name, DropdownItem); - Vue.component(Menu.name, Menu); - Vue.component(Submenu.name, Submenu); - Vue.component(MenuItem.name, MenuItem); - Vue.component(Input.name, Input); - Vue.component(InputNumber.name, InputNumber); - Vue.component(InputGroup.name, InputGroup); - Vue.component(Radio.name, Radio); - Vue.component(RadioGroup.name, RadioGroup); - Vue.component(RadioButton.name, RadioButton); + // Vue.component(Group.name, Group); + // Vue.component(SelectDropdown.name, SelectDropdown); + // Vue.component(Pagination.name, Pagination); + // Vue.component(Dialog.name, Dialog); + // Vue.component(Autocomplete.name, Autocomplete); + // Vue.component(Dropdown.name, Dropdown); + // Vue.component(DropdownItem.name, DropdownItem); + // Vue.component(Menu.name, Menu); + // Vue.component(Submenu.name, Submenu); + // Vue.component(MenuItem.name, MenuItem); + // Vue.component(Input.name, Input); + // Vue.component(InputNumber.name, InputNumber); + // Vue.component(InputGroup.name, InputGroup); + // Vue.component(Radio.name, Radio); + // Vue.component(RadioGroup.name, RadioGroup); + // Vue.component(RadioButton.name, RadioButton); Vue.component(Checkbox.name, Checkbox); Vue.component(CheckboxGroup.name, CheckboxGroup); - Vue.component(Switch.name, Switch); - Vue.component(Select.name, Select); - Vue.component(Option.name, Option); - Vue.component(OptionGroup.name, OptionGroup); - Vue.component(Button.name, Button); - Vue.component(ButtonGroup.name, ButtonGroup); - Vue.component(Table.name, Table); - Vue.component(TableColumn.name, TableColumn); - Vue.component(DatePicker.name, DatePicker); - Vue.component(TimeSelect.name, TimeSelect); - Vue.component(TimePicker.name, TimePicker); - Vue.component(Popover.name, Popover); - Vue.component(Tooltip.name, Tooltip); - Vue.component(Breadcrumb.name, Breadcrumb); - Vue.component(BreadcrumbItem.name, BreadcrumbItem); - Vue.component(Form.name, Form); - Vue.component(FormItem.name, FormItem); - Vue.component(Tabs.name, Tabs); - Vue.component(TabPane.name, TabPane); - Vue.component(Tag.name, Tag); + // Vue.component(Switch.name, Switch); + // Vue.component(Select.name, Select); + // Vue.component(Option.name, Option); + // Vue.component(OptionGroup.name, OptionGroup); + // Vue.component(Button.name, Button); + // Vue.component(ButtonGroup.name, ButtonGroup); + // Vue.component(Table.name, Table); + // Vue.component(TableColumn.name, TableColumn); + // Vue.component(DatePicker.name, DatePicker); + // Vue.component(TimeSelect.name, TimeSelect); + // Vue.component(TimePicker.name, TimePicker); + // Vue.component(Popover.name, Popover); + // Vue.component(Tooltip.name, Tooltip); + // Vue.component(Breadcrumb.name, Breadcrumb); + // Vue.component(BreadcrumbItem.name, BreadcrumbItem); + // Vue.component(Form.name, Form); + // Vue.component(FormItem.name, FormItem); + // Vue.component(Tabs.name, Tabs); + // Vue.component(TabPane.name, TabPane); + // Vue.component(Tag.name, Tag); Vue.component(Tree.name, Tree); - Vue.component(Alert.name, Alert); - Vue.component(Slider.name, Slider); - Vue.component(Icon.name, Icon); - Vue.component(Row.name, Row); - Vue.component(Col.name, Col); - Vue.component(Upload.name, Upload); - Vue.component(Progress.name, Progress); - Vue.component(Spinner.name, Spinner); + // Vue.component(Alert.name, Alert); + // Vue.component(Slider.name, Slider); + // Vue.component(Icon.name, Icon); + // Vue.component(Row.name, Row); + // Vue.component(Col.name, Col); + // Vue.component(Upload.name, Upload); + // Vue.component(Progress.name, Progress); + // Vue.component(Spinner.name, Spinner); // Vue.use(Loading); @@ -115,55 +115,55 @@ if (typeof window !== 'undefined' && window.Vue) { }; module.exports = { - install, - Group, - SelectDropdown, - Pagination, - Dialog, - Autocomplete, - Dropdown, - DropdownItem, - Menu, - Submenu, - MenuItem, - Input, - InputNumber, - InputGroup, - Radio, - RadioGroup, - RadioButton, - Checkbox, - CheckboxGroup, - Switch, - Select, - Option, - OptionGroup, - Button, - ButtonGroup, - Table, - TableColumn, - DatePicker, - TimeSelect, - TimePicker, - Popover, - Tooltip, - MessageBox, - Breadcrumb, - BreadcrumbItem, - Form, - FormItem, - Tabs, - TabPane, - Tag, - Tree, - Alert, - Notification, - Slider, - Loading, - Icon, - Row, - Col, - Upload, - Progress, - Spinner + install + // Group, + // SelectDropdown, + // Pagination, + // Dialog, + // Autocomplete, + // Dropdown, + // DropdownItem, + // Menu, + // Submenu, + // MenuItem, + // Input, + // InputNumber, + // InputGroup, + // Radio, + // RadioGroup, + // RadioButton, + // Checkbox, + // CheckboxGroup, + // Switch, + // Select, + // Option, + // OptionGroup, + // Button, + // ButtonGroup, + // Table, + // TableColumn, + // DatePicker, + // TimeSelect, + // TimePicker, + // Popover, + // Tooltip, + // MessageBox, + // Breadcrumb, + // BreadcrumbItem, + // Form, + // FormItem, + // Tabs, + // TabPane, + // Tag, + // Tree, + // Alert, + // Notification, + // Slider, + // Loading, + // Icon, + // Row, + // Col, + // Upload, + // Progress, + // Spinner };