1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | import Component from '@ember/component'; import layout from '../templates/components/el-col'; import {computed, get} from "@ember/object"; import {htmlSafe} from '@ember/template'; export default Component.extend({ layout, span: 24, offset: null, pull: null, push: null, xs: null, sm: null, md: null, lg: null, xl: null, gutter: null, classNames: ['el-col'], classNameBindings: ['getClassName'], attributeBindings: ['style'], style: computed('gutter', function () { if (get(this, 'gutter')) { let gutter = (get(this, 'gutter') / 2) + 'px'; return htmlSafe(`padding-left: ${gutter}; padding-right: ${gutter}`); } return htmlSafe(""); }), getClassName: computed('span', 'offset', 'pull', 'push', 'xs', 'sm', 'md', 'lg', 'xl', function () { let classList = []; ['span', 'offset', 'pull', 'push'].forEach(prop => { if (get(this, prop) || get(this, prop) === 0) { classList.push( prop !== 'span' ? `el-col-${prop}-${get(this, prop)}` : `el-col-${get(this, prop)}` ); } }); ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => { if (typeof get(this, size) === 'number') { classList.push(`el-col-${size}-${get(this, size)}`); } else if (get(this, size) && typeof get(this, size) === 'object') { let props = get(this, size); Object.keys(props).forEach(prop => { classList.push( prop !== 'span' ? `el-col-${size}-${prop}-${props[prop]}` : `el-col-${size}-${props[prop]}` ); }); } }); return classList.join(' '); }), }); |