github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Update checkbox and tree

pull/2/head
qingwei.li 2016-08-12 14:45:06 +08:00
parent cf16180a71
commit 37a4b374f1
10 changed files with 224 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.babelrc
View File

@ -1,5 +1,5 @@
{ {
"presets": ["es2015"], "presets": ["es2015-loose"],
"plugins": ["transform-vue-jsx"], "plugins": ["transform-vue-jsx"],
"comments": false "comments": false
} }

40
examples/docs/checkbox.md
View File

@ -31,32 +31,32 @@
### 单个勾选框，逻辑值 ### 单个勾选框，逻辑值
<div class="demo-box demo-checkbox"> <div class="demo-box demo-checkbox">
<el-checkbox class="checkbox" :value.sync="checked">{{checked | json}}</el-checkbox> <el-checkbox class="checkbox" v-model="checked">{{ checked }}</el-checkbox>
</div> </div>
```html ```html
<el-checkbox class="checkbox" :value.sync="checked">{{checked | json}}</el-checkbox> <el-checkbox class="checkbox" v-model="checked">{{ checked }}</el-checkbox>
``` ```
### 多个勾选框，绑定到同一个数组 ### 多个勾选框，绑定到同一个数组
<div class="demo-box demo-checkbox"> <div class="demo-box demo-checkbox">
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 A"></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="复选框 A"></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 B"></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="复选框 B"></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 C"></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="复选框 C"></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="禁用" disabled></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="禁用" disabled></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="选中且禁用" disabled></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="选中且禁用" disabled></el-checkbox>
</div> </div>
<p>{{checkList | json}}</p> <p>{{ checkList }}</p>
```html ```html
<template> <template>
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 A"></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="复选框 A"></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 B"></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="复选框 B"></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 C"></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="复选框 C"></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="禁用" disabled></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="禁用" disabled></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="选中且禁用" disabled></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="选中且禁用" disabled></el-checkbox>
</template> </template>
<script> <script>
@ -75,20 +75,20 @@
<div class="demo-box demo-checkbox"> <div class="demo-box demo-checkbox">
<el-checkbox <el-checkbox
class="checkbox" class="checkbox"
:value.sync="name" v-model="name"
:true-label="a" :true-label="a"
:false-label="b" :false-label="b">
> {{name}}
</el-checkbox>{{name}} </el-checkbox>
</div> </div>
```html ```html
<el-checkbox <el-checkbox
class="checkbox" class="checkbox"
:value.sync="name" v-model="name"
:true-label="a" :true-label="a"
:false-label="b" :false-label="b">
> {{name}}
</el-checkbox> </el-checkbox>
``` ```

2
examples/docs/tree.md
View File

@ -10,7 +10,7 @@
} }
</style> </style>
<script type="text/ecmascript-6"> <script>
import Vue from 'vue'; import Vue from 'vue';
var data = [{ var data = [{

4
package.json
View File

@ -33,6 +33,7 @@
"babel-helper-vue-jsx-merge-props": "^1.0.1", "babel-helper-vue-jsx-merge-props": "^1.0.1",
"babel-plugin-syntax-jsx": "^6.8.0", "babel-plugin-syntax-jsx": "^6.8.0",
"babel-plugin-transform-vue-jsx": "^3.1.0", "babel-plugin-transform-vue-jsx": "^3.1.0",
"babel-preset-es2015-loose": "^7.0.0",
"file-save": "^0.2.0", "file-save": "^0.2.0",
"gh-pages": "^0.11.0", "gh-pages": "^0.11.0",
"highlight.js": "^9.3.0", "highlight.js": "^9.3.0",
@ -44,9 +45,8 @@
"purecss": "^0.6.0", "purecss": "^0.6.0",
"q": "^1.4.1", "q": "^1.4.1",
"uppercamelcase": "^1.1.0", "uppercamelcase": "^1.1.0",
"vue": "^2.0.0-beta.7",
"vue-loader": "^9.3.2",
"vue": "^2.0.0-beta.8", "vue": "^2.0.0-beta.8",
"vue-loader": "^9.3.2",
"vue-markdown-loader": "^0.4.0", "vue-markdown-loader": "^0.4.0",
"vue-popup": "^0.2.1", "vue-popup": "^0.2.1",
"vue-router": "^2.0.0-beta.2" "vue-router": "^2.0.0-beta.2"

1
packages/autocomplete/src/autocomplete.vue
View File

@ -91,7 +91,6 @@
this.suggestionVisible = false; this.suggestionVisible = false;
}, },
select(index) { select(index) {
debugger;
if (this.suggestions && this.suggestions[index]) { if (this.suggestions && this.suggestions[index]) {
this.$emit('input', this.suggestions[index].value); this.$emit('input', this.suggestions[index].value);
this.$nextTick(() => { this.$nextTick(() => {

1
packages/checkbox/src/checkbox-group.vue
View File

@ -12,6 +12,7 @@
required: true required: true
} }
}, },
watch: { watch: {
value(value) { value(value) {
this.dispatch('form-item', 'el.form.change', value); this.dispatch('form-item', 'el.form.change', value);

44
packages/checkbox/src/checkbox.vue
View File

@ -16,11 +16,10 @@
:false-value="falseLabel" :false-value="falseLabel"
v-model="_value" v-model="_value"
type="checkbox" type="checkbox"
@change="$emit('on-change', checked)"
@focus="focus = true" @focus="focus = true"
@blur="focus = false" @blur="focus = false"
:disabled="isLimit || disabled" :disabled="isLimit || disabled"
v-el: checkbox> ref="checkbox">
<input <input
v-else v-else
class="el-checkbox__original" class="el-checkbox__original"
@ -29,16 +28,16 @@
@focus="focus = true" @focus="focus = true"
@blur="focus = false" @blur="focus = false"
type="checkbox" type="checkbox"
@change="$emit('on-change', checked)"
:disabled="isLimit || disabled"> :disabled="isLimit || disabled">
</span> </span>
<span class="el-checkbox__label"> <span class="el-checkbox__label">
<slot></slot> <slot></slot>
<template v-if="!_slotContents">{{label}}</template> <template v-if="!$slots || !$slots.default">{{label}}</template>
</span> </span>
</label> </label>
</template> </template>
<script> <script>
import Emitter from 'main/mixins/emitter';
/** /**
* checkbox * checkbox
* @module components/basic/checkbox * @module components/basic/checkbox
@ -56,10 +55,10 @@
export default { export default {
name: 'ElCheckbox', name: 'ElCheckbox',
mixins: [Emitter],
props: { props: {
value: { value: {},
type: [Array, Boolean, String]
},
label: { label: {
type: String type: String
}, },
@ -80,9 +79,9 @@
}, },
set(newValue) { set(newValue) {
if (this.value !== undefined) { if (this.value !== undefined) {
this.value = newValue; this.$emit('input', newValue);
} else { } else {
this.$parent.value = newValue; this.$parent.$emit('input', newValue);
} }
} }
}, },
@ -106,24 +105,21 @@
}; };
}, },
events: {
['element.checkbox.disabled']() {
if (this.checked) {
return;
}
this.isLimit = true;
},
['element.checkbox.enabled']() {
this.isLimit = false;
}
},
watch: { watch: {
checked(sure) { checked(sure) {
this.$dispatch('element.checkbox', sure); this.$emit('on-change', sure);
this.dispatch('element.checkbox', sure);
} }
},
created() {
this.$on('element.checkbox.disabled', () => {
if (this.checked) return;
this.isLimit = true;
});
this.$on('element.checkbox.enabled', () => {
this.isLimit = false;
});
} }
}; };
</script> </script>

31
packages/tree/src/transition.js
View File

@ -1,11 +1,11 @@
export default { class Transition {
beforeEnter(el) { beforeEnter(el) {
el.dataset.oldPaddingTop = el.style.paddingTop; el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom; el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.style.height = '0'; el.style.height = '0';
el.style.paddingTop = 0; el.style.paddingTop = 0;
el.style.paddingBottom = 0; el.style.paddingBottom = 0;
}, }
enter(el) { enter(el) {
el.dataset.oldOverflow = el.style.overflow; el.dataset.oldOverflow = el.style.overflow;
@ -22,13 +22,13 @@ export default {
} }
el.style.overflow = 'hidden'; el.style.overflow = 'hidden';
}, }
afterEnter(el) { afterEnter(el) {
el.style.display = ''; el.style.display = '';
el.style.height = ''; el.style.height = '';
el.style.overflow = el.dataset.oldOverflow; el.style.overflow = el.dataset.oldOverflow;
}, }
beforeLeave(el) { beforeLeave(el) {
el.dataset.oldPaddingTop = el.style.paddingTop; el.dataset.oldPaddingTop = el.style.paddingTop;
@ -40,7 +40,7 @@ export default {
el.style.height = el.scrollHeight + 'px'; el.style.height = el.scrollHeight + 'px';
} }
el.style.overflow = 'hidden'; el.style.overflow = 'hidden';
}, }
leave(el) { leave(el) {
if (el.scrollHeight !== 0) { if (el.scrollHeight !== 0) {
@ -50,7 +50,7 @@ export default {
el.style.paddingBottom = 0; el.style.paddingBottom = 0;
}); });
} }
}, }
afterLeave(el) { afterLeave(el) {
el.style.display = el.style.height = ''; el.style.display = el.style.height = '';
@ -59,3 +59,22 @@ export default {
el.style.paddingBottom = el.dataset.oldPaddingBottom; 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);
}
};

15
packages/tree/src/tree-node.vue
View File

@ -6,16 +6,17 @@
<span class="el-tree-node__expand-icon" <span class="el-tree-node__expand-icon"
:class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }" :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }"
></span> ></span>
<el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" :value.sync="node.checked" :true-label="true" :false-label="false" @on-change="handleCheckChange"></el-checkbox> <el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" v-model="node.checked" :true-label="true" :false-label="false" @on-change="handleCheckChange"></el-checkbox>
<!--<span class="el-tree-node__icon {{ node.icon }} {{ node.loading ? 'el-icon-loading' : '' }}" v-if="node.icon"></span>--> <!--<span class="el-tree-node__icon {{ node.icon }} {{ node.loading ? 'el-icon-loading' : '' }}" v-if="node.icon"></span>-->
<span class="el-tree-node__label">{{ node.label }}</span> <span class="el-tree-node__label">{{ node.label }}</span>
</div> </div>
<collapse-transition>
<div class="el-tree-node__children" <div class="el-tree-node__children"
v-if="childrenRendered" v-if="childrenRendered"
v-show="expanded" v-show="expanded">
transition="collapse">
<el-tree-node v-for="child in node.children" :node="child"></el-tree-node> <el-tree-node v-for="child in node.children" :node="child"></el-tree-node>
</div> </div>
</collapse-transition>
</div> </div>
</template> </template>
@ -33,6 +34,10 @@
} }
}, },
components: {
CollapseTransition
},
data() { data() {
return { return {
$tree: null, $tree: null,
@ -80,10 +85,6 @@
} }
this.showCheckbox = tree.showCheckbox; this.showCheckbox = tree.showCheckbox;
},
transitions: {
collapse: CollapseTransition
} }
}; };
</script> </script>

284
src/index.js
View File

@ -1,104 +1,104 @@
import Group from '../packages/group/index.js'; // import Group from '../packages/group/index.js';
import SelectDropdown from '../packages/select-dropdown/index.js'; // import SelectDropdown from '../packages/select-dropdown/index.js';
import Pagination from '../packages/pagination/index.js'; // import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js'; // import Dialog from '../packages/dialog/index.js';
import Autocomplete from '../packages/autocomplete/index.js'; // import Autocomplete from '../packages/autocomplete/index.js';
import Dropdown from '../packages/dropdown/index.js'; // import Dropdown from '../packages/dropdown/index.js';
import DropdownItem from '../packages/dropdown-item/index.js'; // import DropdownItem from '../packages/dropdown-item/index.js';
import Menu from '../packages/menu/index.js'; // import Menu from '../packages/menu/index.js';
import Submenu from '../packages/submenu/index.js'; // import Submenu from '../packages/submenu/index.js';
import MenuItem from '../packages/menu-item/index.js'; // import MenuItem from '../packages/menu-item/index.js';
import Input from '../packages/input/index.js'; // import Input from '../packages/input/index.js';
import InputNumber from '../packages/input-number/index.js'; // import InputNumber from '../packages/input-number/index.js';
import InputGroup from '../packages/input-group/index.js'; // import InputGroup from '../packages/input-group/index.js';
import Radio from '../packages/radio/index.js'; // import Radio from '../packages/radio/index.js';
import RadioGroup from '../packages/radio-group/index.js'; // import RadioGroup from '../packages/radio-group/index.js';
import RadioButton from '../packages/radio-button/index.js'; // import RadioButton from '../packages/radio-button/index.js';
import Checkbox from '../packages/checkbox/index.js'; import Checkbox from '../packages/checkbox/index.js';
import CheckboxGroup from '../packages/checkbox-group/index.js'; import CheckboxGroup from '../packages/checkbox-group/index.js';
import Switch from '../packages/switch/index.js'; // import Switch from '../packages/switch/index.js';
import Select from '../packages/select/index.js'; // import Select from '../packages/select/index.js';
import Option from '../packages/option/index.js'; // import Option from '../packages/option/index.js';
import OptionGroup from '../packages/option-group/index.js'; // import OptionGroup from '../packages/option-group/index.js';
import Button from '../packages/button/index.js'; // import Button from '../packages/button/index.js';
import ButtonGroup from '../packages/button-group/index.js'; // import ButtonGroup from '../packages/button-group/index.js';
import Table from '../packages/table/index.js'; // import Table from '../packages/table/index.js';
import TableColumn from '../packages/table-column/index.js'; // import TableColumn from '../packages/table-column/index.js';
import DatePicker from '../packages/date-picker/index.js'; // import DatePicker from '../packages/date-picker/index.js';
import TimeSelect from '../packages/time-select/index.js'; // import TimeSelect from '../packages/time-select/index.js';
import TimePicker from '../packages/time-picker/index.js'; // import TimePicker from '../packages/time-picker/index.js';
import Popover from '../packages/popover/index.js'; // import Popover from '../packages/popover/index.js';
import Tooltip from '../packages/tooltip/index.js'; // import Tooltip from '../packages/tooltip/index.js';
import MessageBox from '../packages/message-box/index.js'; // import MessageBox from '../packages/message-box/index.js';
import Breadcrumb from '../packages/breadcrumb/index.js'; // import Breadcrumb from '../packages/breadcrumb/index.js';
import BreadcrumbItem from '../packages/breadcrumb-item/index.js'; // import BreadcrumbItem from '../packages/breadcrumb-item/index.js';
import Form from '../packages/form/index.js'; // import Form from '../packages/form/index.js';
import FormItem from '../packages/form-item/index.js'; // import FormItem from '../packages/form-item/index.js';
import Tabs from '../packages/tabs/index.js'; // import Tabs from '../packages/tabs/index.js';
import TabPane from '../packages/tab-pane/index.js'; // import TabPane from '../packages/tab-pane/index.js';
import Tag from '../packages/tag/index.js'; // import Tag from '../packages/tag/index.js';
import Tree from '../packages/tree/index.js'; import Tree from '../packages/tree/index.js';
import Alert from '../packages/alert/index.js'; // import Alert from '../packages/alert/index.js';
import Notification from '../packages/notification/index.js'; // import Notification from '../packages/notification/index.js';
import Slider from '../packages/slider/index.js'; // import Slider from '../packages/slider/index.js';
import Loading from '../packages/loading/index.js'; // import Loading from '../packages/loading/index.js';
import Icon from '../packages/icon/index.js'; // import Icon from '../packages/icon/index.js';
import Row from '../packages/row/index.js'; // import Row from '../packages/row/index.js';
import Col from '../packages/col/index.js'; // import Col from '../packages/col/index.js';
import Upload from '../packages/upload/index.js'; // import Upload from '../packages/upload/index.js';
import Progress from '../packages/progress/index.js'; // import Progress from '../packages/progress/index.js';
import Spinner from '../packages/spinner/index.js'; // import Spinner from '../packages/spinner/index.js';
const install = function(Vue) { const install = function(Vue) {
if (install.installed) return; if (install.installed) return;
Vue.component(Group.name, Group); // Vue.component(Group.name, Group);
Vue.component(SelectDropdown.name, SelectDropdown); // Vue.component(SelectDropdown.name, SelectDropdown);
Vue.component(Pagination.name, Pagination); // Vue.component(Pagination.name, Pagination);
Vue.component(Dialog.name, Dialog); // Vue.component(Dialog.name, Dialog);
Vue.component(Autocomplete.name, Autocomplete); // Vue.component(Autocomplete.name, Autocomplete);
Vue.component(Dropdown.name, Dropdown); // Vue.component(Dropdown.name, Dropdown);
Vue.component(DropdownItem.name, DropdownItem); // Vue.component(DropdownItem.name, DropdownItem);
Vue.component(Menu.name, Menu); // Vue.component(Menu.name, Menu);
Vue.component(Submenu.name, Submenu); // Vue.component(Submenu.name, Submenu);
Vue.component(MenuItem.name, MenuItem); // Vue.component(MenuItem.name, MenuItem);
Vue.component(Input.name, Input); // Vue.component(Input.name, Input);
Vue.component(InputNumber.name, InputNumber); // Vue.component(InputNumber.name, InputNumber);
Vue.component(InputGroup.name, InputGroup); // Vue.component(InputGroup.name, InputGroup);
Vue.component(Radio.name, Radio); // Vue.component(Radio.name, Radio);
Vue.component(RadioGroup.name, RadioGroup); // Vue.component(RadioGroup.name, RadioGroup);
Vue.component(RadioButton.name, RadioButton); // Vue.component(RadioButton.name, RadioButton);
Vue.component(Checkbox.name, Checkbox); Vue.component(Checkbox.name, Checkbox);
Vue.component(CheckboxGroup.name, CheckboxGroup); Vue.component(CheckboxGroup.name, CheckboxGroup);
Vue.component(Switch.name, Switch); // Vue.component(Switch.name, Switch);
Vue.component(Select.name, Select); // Vue.component(Select.name, Select);
Vue.component(Option.name, Option); // Vue.component(Option.name, Option);
Vue.component(OptionGroup.name, OptionGroup); // Vue.component(OptionGroup.name, OptionGroup);
Vue.component(Button.name, Button); // Vue.component(Button.name, Button);
Vue.component(ButtonGroup.name, ButtonGroup); // Vue.component(ButtonGroup.name, ButtonGroup);
Vue.component(Table.name, Table); // Vue.component(Table.name, Table);
Vue.component(TableColumn.name, TableColumn); // Vue.component(TableColumn.name, TableColumn);
Vue.component(DatePicker.name, DatePicker); // Vue.component(DatePicker.name, DatePicker);
Vue.component(TimeSelect.name, TimeSelect); // Vue.component(TimeSelect.name, TimeSelect);
Vue.component(TimePicker.name, TimePicker); // Vue.component(TimePicker.name, TimePicker);
Vue.component(Popover.name, Popover); // Vue.component(Popover.name, Popover);
Vue.component(Tooltip.name, Tooltip); // Vue.component(Tooltip.name, Tooltip);
Vue.component(Breadcrumb.name, Breadcrumb); // Vue.component(Breadcrumb.name, Breadcrumb);
Vue.component(BreadcrumbItem.name, BreadcrumbItem); // Vue.component(BreadcrumbItem.name, BreadcrumbItem);
Vue.component(Form.name, Form); // Vue.component(Form.name, Form);
Vue.component(FormItem.name, FormItem); // Vue.component(FormItem.name, FormItem);
Vue.component(Tabs.name, Tabs); // Vue.component(Tabs.name, Tabs);
Vue.component(TabPane.name, TabPane); // Vue.component(TabPane.name, TabPane);
Vue.component(Tag.name, Tag); // Vue.component(Tag.name, Tag);
Vue.component(Tree.name, Tree); Vue.component(Tree.name, Tree);
Vue.component(Alert.name, Alert); // Vue.component(Alert.name, Alert);
Vue.component(Slider.name, Slider); // Vue.component(Slider.name, Slider);
Vue.component(Icon.name, Icon); // Vue.component(Icon.name, Icon);
Vue.component(Row.name, Row); // Vue.component(Row.name, Row);
Vue.component(Col.name, Col); // Vue.component(Col.name, Col);
Vue.component(Upload.name, Upload); // Vue.component(Upload.name, Upload);
Vue.component(Progress.name, Progress); // Vue.component(Progress.name, Progress);
Vue.component(Spinner.name, Spinner); // Vue.component(Spinner.name, Spinner);
// Vue.use(Loading); // Vue.use(Loading);
@ -115,55 +115,55 @@ if (typeof window !== 'undefined' && window.Vue) {
}; };
module.exports = { module.exports = {
install, install
Group, // Group,
SelectDropdown, // SelectDropdown,
Pagination, // Pagination,
Dialog, // Dialog,
Autocomplete, // Autocomplete,
Dropdown, // Dropdown,
DropdownItem, // DropdownItem,
Menu, // Menu,
Submenu, // Submenu,
MenuItem, // MenuItem,
Input, // Input,
InputNumber, // InputNumber,
InputGroup, // InputGroup,
Radio, // Radio,
RadioGroup, // RadioGroup,
RadioButton, // RadioButton,
Checkbox, // Checkbox,
CheckboxGroup, // CheckboxGroup,
Switch, // Switch,
Select, // Select,
Option, // Option,
OptionGroup, // OptionGroup,
Button, // Button,
ButtonGroup, // ButtonGroup,
Table, // Table,
TableColumn, // TableColumn,
DatePicker, // DatePicker,
TimeSelect, // TimeSelect,
TimePicker, // TimePicker,
Popover, // Popover,
Tooltip, // Tooltip,
MessageBox, // MessageBox,
Breadcrumb, // Breadcrumb,
BreadcrumbItem, // BreadcrumbItem,
Form, // Form,
FormItem, // FormItem,
Tabs, // Tabs,
TabPane, // TabPane,
Tag, // Tag,
Tree, // Tree,
Alert, // Alert,
Notification, // Notification,
Slider, // Slider,
Loading, // Loading,
Icon, // Icon,
Row, // Row,
Col, // Col,
Upload, // Upload,
Progress, // Progress,
Spinner // Spinner
}; };