diff --git a/document/common/config/menu.json b/document/common/config/menu.json index d7e0c04cb2fe3118ae84f3abbab59b98020edeca..955a13430048469184df23c6af763e15615f98bd 100644 --- a/document/common/config/menu.json +++ b/document/common/config/menu.json @@ -31,6 +31,7 @@ "checkbox": "Checkbox", "checkbox-group": "CheckboxGroup", "radio": "Radio", + "checker": "Checker", "input": "Input", "textarea": "Textarea", "select": "Select", @@ -113,6 +114,7 @@ "checkbox": "Checkbox", "checkbox-group": "CheckboxGroup", "radio": "Radio", + "checker": "Checker", "input": "Input", "textarea": "Textarea", "select": "Select", diff --git a/document/components/docs/en-US/checker.md b/document/components/docs/en-US/checker.md new file mode 100644 index 0000000000000000000000000000000000000000..120322f957eb0b2faae5f3edf45eb7c4026bc2da --- /dev/null +++ b/document/components/docs/en-US/checker.md @@ -0,0 +1,182 @@ +## Checker + +Checker is more flexible selection component, you can alse customize the layout. + +### Example + +- Basic usage + + ```html + + ``` + ```js + export default { + data() { + return { + checkerValue: [], + options: [ + { + value: 1, + text: 'red' + }, + { + value: 2, + text: 'yellow' + }, + { + value: 3, + text: 'blue' + }, + { + value: 4, + text: 'green' + } + ] + } + } + } + ``` + The value of `options` is an array. The default `checkerValue` value is `''`, + If you clicked one option, the `checkerValue` will be set as the value of this option. + +- radio + + ```html + + ``` + ```js + export default { + data() { + return { + checkerValue: '', + options: [ + { + value: 0, + text: 'AAAAA' + }, + { + value: 1, + text: 'BBBBB' + } + ] + } + } + } + ``` + If the `type` is set to `'radio'`, the checker will be a radio type. + The default type is a `'checkbox'`. + +- Use slot + + You can use slot to implement custom layout. + + ```html + + + {{item.text}} + + + ``` + ```js + export default { + data() { + return { + checkerList: [], + options: [ + { + value: 0, + text: 'AAAAA' + }, + { + value: 1, + text: 'BBBBB' + } + ] + } + } + } + ``` + + +- Use min & max prop + + You can use `min` and `max` prop but the `type` must set to `'checkbox'`. + + `max` set the max number of checked items, `min` set the min number of checked items. + + + ```html + + ``` + ```js + export default { + data() { + return { + checkerList: [3], + option: [ + { + value: 1, + text: 'red' + }, + { + value: 2, + text: 'yellow' + }, + { + value: 3, + text: 'blue' + }, + { + value: 4, + text: 'green' + } + ] + } + } + } + ``` + + +### Props configuration + +| Attribute | Description | Type | Accepted Values | Default | +| - | - | - | - | - | +| options | a collection of configuration items | Array | - | - | +| type | the type of checker | String | checkbox/radio | checkbox | +| min | the min number | Number | - | 0 | +| max | the max number | Number | - | options length | + +* options sub configuration + +| Attribute | Description | Type | +| - | - | - | +| value | the value of checker item | String/Number | +| text | the text of checker item | String | + +### CubeCheckerItem Props configuration + +| Attribute | Description | Type | Accepted Values | Default | +| - | - | - | - | - | +| option | item configuration object | Object | - | - | + +* option sub configuration + +| Attribute | Description | Type | +| - | - | - | +| value | the value of checker item | String/Number | +| text | the text of checker item | String | diff --git a/document/components/docs/zh-CN/checker.md b/document/components/docs/zh-CN/checker.md new file mode 100644 index 0000000000000000000000000000000000000000..2fa8171b9f6209d473fdd13a22e56894cef68a29 --- /dev/null +++ b/document/components/docs/zh-CN/checker.md @@ -0,0 +1,184 @@ +## Checker + +Checker 是更加灵活的选择组件，可以自定义需要的布局样式。 + +### 示例 + +- 默认 + + ```html + + ``` + ```js + export default { + data() { + return { + checkerValue: [], + options: [ + { + value: 1, + text: 'red' + }, + { + value: 2, + text: 'yellow' + }, + { + value: 3, + text: 'blue' + }, + { + value: 4, + text: 'green' + } + ] + } + } + } + ``` + 如果选中了，则 `checkerValue` 的值就为 `value`。 + + 设置 `option`，当选中某一项的时候，`checkerValue` 的值就是 `'optionValue'`，当未选中的时候，`checkerValue` 的值就是 `''`。 + +- 单选 + + ```html + + ``` + ```js + export default { + data() { + return { + checkerValue: '', + options: [ + { + value: 0, + text: 'AAAAA' + }, + { + value: 1, + text: 'BBBBB' + } + ] + } + } + } + ``` + + 可通过设置 `type` ，若为 `'radio'` 则是单选，若为 `'checkbox'` 则是多选。 + +- 自定义结构 + + 可通过默认插槽插入 CubeCheckerItem 实现自定义每项的结构。 + + ```html + + + {{item.text}} + + + ``` + ```js + export default { + data() { + return { + checkerList: [], + options: [ + { + value: 0, + text: 'AAAAA' + }, + { + value: 1, + text: 'BBBBB' + } + ] + } + } + } + ``` + + +- 个数限制 + + `max` 设置最多可选个数，多选时可用。 + + `min` 设置最少可选个数，多选时可用。 + + + ```html + + ``` + ```js + export default { + data() { + return { + checkerList: [3], + option: [ + { + value: 1, + text: 'red' + }, + { + value: 2, + text: 'yellow' + }, + { + value: 3, + text: 'blue' + }, + { + value: 4, + text: 'green' + } + ] + } + } + } + ``` + + + +### Props 配置 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| - | - | - | - | - | +| options | 配置项集合 | Array | - | - | +| type | 选项类型 | String | checkbox/radio | checkbox | +| min | 最少可选个数 | Number | - | 0 | +| max | 最多可选个数 | Number | - | options 的长度 | + +* options 子配置项 + +| 参数 | 说明 | 类型 | +| - | - | - | +| value | 选项的值 | String/Number | +| text | 选项的文本 | String | + +### CubeCheckerItem Props 配置 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| - | - | - | - | - | +| option | 单个配置项 | Object | - | - | + +* option 子配置项 + +| 参数 | 说明 | 类型 | +| - | - | - | +| value | 选项的值 | String/Number | +| text | 选项的文本 | String | diff --git a/example/App.vue b/example/App.vue index b21ffc3f7f78ff348f7a3d8e8367730c4309a019..f3fdce1a6ba8f86c5fb8ab14a874608d19d1caed 100644 --- a/example/App.vue +++ b/example/App.vue @@ -66,6 +66,10 @@ path: '/checkbox-group', text: 'CheckboxGroup' }, + { + path: '/checker', + text: 'Checker' + }, { path: '/radio', text: 'Radio' diff --git a/example/pages/checker.vue b/example/pages/checker.vue new file mode 100644 index 0000000000000000000000000000000000000000..46066e1e9aa06c40922678c485d2a3512e450b09 --- /dev/null +++ b/example/pages/checker.vue @@ -0,0 +1,128 @@ + + + + + diff --git a/example/router/routes.js b/example/router/routes.js index 2dfa207ca4ec1c90fbe8800a2e2202ad7f8819b0..931cf352e3c0383e066e51c75adf8b8e1d41ab61 100644 --- a/example/router/routes.js +++ b/example/router/routes.js @@ -68,6 +68,7 @@ import Tab from '../pages/tab-bar/tab-entry.vue' import TabBasic from '../pages/tab-bar/tab-basic.vue' import TabComposite from '../pages/tab-bar/tab-composite.vue' import ScrollTab from '../pages/tab-bar/scroll-tab.vue' +import Checker from '../pages/checker.vue' const routes = [ { @@ -82,6 +83,10 @@ const routes = [ path: '/checkbox-group', component: CheckboxGroup }, + { + path: '/checker', + component: Checker + }, { path: '/radio', component: Radio diff --git a/src/common/stylus/theme/default.styl b/src/common/stylus/theme/default.styl index 6ec7dafc2dc4844f95dab47efe3b6da30f079d1f..ce1d0344834bbc698738aa511175df85182f2ac3 100644 --- a/src/common/stylus/theme/default.styl +++ b/src/common/stylus/theme/default.styl @@ -76,6 +76,14 @@ $radio-disabled-icon-bgc := $color-light-grey-ss $radio-hollow-selected-icon-color := $color-orange $radio-hollow-disabled-icon-color := $color-light-grey-ss +//checker +$checker-item-color := $color-grey +$checker-item-bdc := $color-light-grey-sss +$checker-item-bgc := $color-white +$checker-item-active-color := $color-orange +$checker-item-active-bdc := $color-orange +$checker-item-active-bgc := $color-light-orange-opacity + // dialog $dialog-color := $color-grey $dialog-bgc := $color-white diff --git a/src/components/checker/checker-item.vue b/src/components/checker/checker-item.vue new file mode 100644 index 0000000000000000000000000000000000000000..fd536c05b012ed07d886c1b365f597acd5383aca --- /dev/null +++ b/src/components/checker/checker-item.vue @@ -0,0 +1,59 @@ + + + diff --git a/src/components/checker/checker.vue b/src/components/checker/checker.vue new file mode 100644 index 0000000000000000000000000000000000000000..0e2657c60ca7f92fef79946b3471d1d451f223c3 --- /dev/null +++ b/src/components/checker/checker.vue @@ -0,0 +1,91 @@ + + diff --git a/src/index.js b/src/index.js index f40721e53c7d61deef2efbf247610e632424d3f2..a0fc76f4ee2250583fac63dc09cf05dfc4259b40 100644 --- a/src/index.js +++ b/src/index.js @@ -11,6 +11,7 @@ import { // form Checkbox, CheckboxGroup, + Checker, Radio, RadioGroup, Input, @@ -58,6 +59,7 @@ const components = [ // form Checkbox, CheckboxGroup, + Checker, Radio, RadioGroup, Input, diff --git a/src/module.js b/src/module.js index 64d153c1645393f98f25f812895d4bf506623b93..23245bf60776dc503f4be4c4bb00ef4060038731 100644 --- a/src/module.js +++ b/src/module.js @@ -11,6 +11,7 @@ import TabPanels from './modules/tab-panels' // Form import Checkbox from './modules/checkbox' import CheckboxGroup from './modules/checkbox-group' +import Checker from './modules/checker' import RadioGroup from './modules/radio-group' import Input from './modules/input' import Textarea from './modules/textarea' @@ -58,6 +59,7 @@ const StickyEle = Sticky.Ele const ScrollNavPanel = ScrollNav.Panel const Tab = TabBar.Tab const TabPanel = TabPanels.Panel +const CheckerItem = Checker.Item export { // style @@ -74,6 +76,8 @@ export { // form Checkbox, CheckboxGroup, + CheckerItem, + Checker, Radio, RadioGroup, Input, diff --git a/src/modules/checker/index.js b/src/modules/checker/index.js new file mode 100644 index 0000000000000000000000000000000000000000..e46307d8f6a6bb3b7670a41e8f248b0ae0ce3d88 --- /dev/null +++ b/src/modules/checker/index.js @@ -0,0 +1,11 @@ +import Checker from '../../components/checker/checker.vue' +import CheckerItem from '../../components/checker/checker-item.vue' + +Checker.install = function (Vue) { + Vue.component(Checker.name, Checker) + Vue.component(CheckerItem.name, CheckerItem) +} + +Checker.Item = CheckerItem + +export default Checker diff --git a/test/unit/specs/checker.spec.js b/test/unit/specs/checker.spec.js new file mode 100644 index 0000000000000000000000000000000000000000..ba1f734e94dec4cadbf6b02668a45f562387c44b --- /dev/null +++ b/test/unit/specs/checker.spec.js @@ -0,0 +1,102 @@ +import Vue from 'vue2' +import Checker from '@/modules/checker' +import createVue from '../utils/create-vue' + +describe('Checker.vue', () => { + let vm + afterEach(() => { + if (vm) { + vm.$parent.destroy() + vm = null + } + }) + it('use', () => { + Vue.use(Checker) + expect(Vue.component(Checker.name)) + .to.be.a('function') + }) + it('should render radio contents', () => { + vm = createChecker('radio') + expect(vm.$el.className) + .to.include('cube-checker') + expect(vm.$el.querySelectorAll('.cube-checker-item_active').length) + .to.equal(1) + // expect(vm.$el.querySelector('.checker').className) + // .to.include('active') + }) + it('should render radio contents', (done) => { + vm = createChecker('radio') + const p = vm.$parent + const options = p.options + expect(p.checkerList) + .to.equal(1) + vm.$nextTick(() => { + const items = vm.$el.querySelectorAll('.cube-checker-item') + expect(items.length) + .to.equal(options.length) + items[0].click() + vm.$nextTick(() => { + expect(p.checkerList) + .to.equal(0) + done() + }) + }) + }) + + it('should render checkbox contents', (done) => { + vm = createChecker('checkbox') + const p = vm.$parent + const options = p.options + expect(p.checkerList.join('')) + .to.equal('1') + vm.$nextTick(() => { + const items = vm.$el.querySelectorAll('.cube-checker-item') + expect(items.length) + .to.equal(options.length) + items[1].click() + items[2].click() + items[3].click() + vm.$nextTick(() => { + expect(p.checkerList.join('')) + .to.equal('23') + done() + }) + }) + }) +}) + +function createChecker (type) { + const vm = createVue({ + template: ` + + + `, + data: { + checkerList: type === 'radio' ? 1 : [1], + options: [ + { + value: 0, + text: 'AAAAA' + }, + { + value: 1, + text: 'BBBBB' + }, + { + value: 2, + text: 'CCCCC' + }, + { + value: 3, + text: 'DDDDD' + } + ], + type: type, + max: 2 + } + }) + return vm +}