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"],
"comments": false
}

40
examples/docs/checkbox.md
View File

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

2
examples/docs/tree.md
View File

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

4
package.json
View File

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

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

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

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

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

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

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

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

@ -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);
}
};

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

@ -6,16 +6,17 @@
<span class="el-tree-node__expand-icon"
:class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }"
></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__label">{{ node.label }}</span>
</div>
<collapse-transition>
<div class="el-tree-node__children"
v-if="childrenRendered"
v-show="expanded"
transition="collapse">
v-show="expanded">
<el-tree-node v-for="child in node.children" :node="child"></el-tree-node>
</div>
</collapse-transition>
</div>
</template>
@ -33,6 +34,10 @@
}
},
components: {
CollapseTransition
},
data() {
return {
$tree: null,
@ -80,10 +85,6 @@
}
this.showCheckbox = tree.showCheckbox;
},
transitions: {
collapse: CollapseTransition
}
};
</script>

284
src/index.js
View File

@ -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
};