From ac0410b4e90e1de3cd8a6c04238d904446501537 Mon Sep 17 00:00:00 2001 From: todd Date: Fri, 3 Aug 2018 22:03:22 +0900 Subject: [PATCH 01/11] pagination (feat) added slots for first, prev, next, last, and ellipsis. Fixed #1870. --- src/components/pagination/README.md | 9 +++++++++ src/components/pagination/fixtures/pagination.html | 10 ++++++++++ src/mixins/pagination.js | 9 +++++---- 3 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/components/pagination/README.md b/src/components/pagination/README.md index 521bbde9fa7..22dff87a0a1 100755 --- a/src/components/pagination/README.md +++ b/src/components/pagination/README.md @@ -61,6 +61,15 @@ values for `total-rows` and `per-page`. | `hide-ellipsis` | never show ellipsis indicators | `hide-goto-end-buttons` | never display goto first/last buttons +| Slot | Description +|----- | ----------- +| `first-text` | The "goto first page" button text (html supported) +| `prev-text` | The "goto previous page" button text (html supported) +| `next-text` | The "goto next page" button text (html supported) +| `last-text` | The "goto last page" button text (html supported) +| `ellipsis-text` | the `...` indicator text (html supported) + + Ellipsis inidcator(s) will only be ever shown at the front and/or end of the page number buttons. For `limit` values less than or equal to `3`, the ellipsis indicator(s) will never be shown for practical display reasons. diff --git a/src/components/pagination/fixtures/pagination.html b/src/components/pagination/fixtures/pagination.html index 837c62c2b79..486a4fb96ee 100755 --- a/src/components/pagination/fixtures/pagination.html +++ b/src/components/pagination/fixtures/pagination.html @@ -29,6 +29,16 @@
Default
+

+ + + + + + + + +

currentPage: {{currentPage}}
diff --git a/src/mixins/pagination.js b/src/mixins/pagination.js index 6d330185f74..f04a1491bf6 100644 --- a/src/mixins/pagination.js +++ b/src/mixins/pagination.js @@ -178,6 +178,7 @@ export default { attrs: { role: 'separator' } }, [ + this.$slots['ellipsis-text'] || h('span', { class: ['page-link'], domProps: { innerHTML: this.ellipsisText } @@ -190,11 +191,11 @@ export default { buttons.push( this.hideGotoEndButtons ? h(false) - : makeEndBtns(1, this.labelFirstPage, this.firstText) + : makeEndBtns(1, this.labelFirstPage, this.$slots['first-text'] || this.firstText) ) // Goto Previous page button - buttons.push(makeEndBtns(this.currentPage - 1, this.labelPrevPage, this.prevText, 1)) + buttons.push(makeEndBtns(this.currentPage - 1, this.labelPrevPage, this.$slots['prev-text'] || this.prevText, 1)) // First Ellipsis Bookend buttons.push(this.showFirstDots ? makeEllipsis() : h(false)) @@ -257,7 +258,7 @@ export default { makeEndBtns( this.currentPage + 1, this.labelNextPage, - this.nextText, + this.$slots['next-text'] || this.nextText, this.numberOfPages ) ) @@ -266,7 +267,7 @@ export default { buttons.push( this.hideGotoEndButtons ? h(false) - : makeEndBtns(this.numberOfPages, this.labelLastPage, this.lastText) + : makeEndBtns(this.numberOfPages, this.labelLastPage, this.$slots['last-text'] || this.lastText) ) // Assemble the paginatiom buttons From 6925f35253ef5d43529e45d45616b8b4fd964b49 Mon Sep 17 00:00:00 2001 From: todd Date: Sat, 4 Aug 2018 00:15:40 +0900 Subject: [PATCH 02/11] feat (card) support left and right image placement, added img-height and img-width props --- docs/assets/css/styles.css | 10 ++++++++++ src/components/card/README.md | 31 ++++++++++++++++++++++++++++--- src/components/card/card-img.js | 33 ++++++++++++++++++++++++++++----- src/components/card/card.js | 18 ++++++++++++------ 4 files changed, 78 insertions(+), 14 deletions(-) diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css index c8f0f320827..47d8c8ee2cb 100644 --- a/docs/assets/css/styles.css +++ b/docs/assets/css/styles.css @@ -101,3 +101,13 @@ pre.editable.live:after { min-height: 10rem; background-color: rgba(255, 0, 0, .1); } + + +.card-img-left { + border-top-left-radius: calc(0.25rem - 1px); + border-bottom-left-radius: calc(0.25rem - 1px); + } +.card-img-right { + border-top-right-radius: calc(0.25rem - 1px); + border-bottom-right-radius: calc(0.25rem - 1px); +} diff --git a/src/components/card/README.md b/src/components/card/README.md index 3d9b7f5de51..899854d16f9 100755 --- a/src/components/card/README.md +++ b/src/components/card/README.md @@ -100,6 +100,7 @@ card is changed. ```html
+

Top and Bottom

Some quick example text to build on the card and make up the bulk of the card's content.

- - + + +
+

Left and Right

+ + +

+ Add .card-img-left { + border-top-left-radius: calc(0.25rem - 1px); + border-bottom-left-radius: calc(0.25rem - 1px); + } + to your css +

+ + +

+ Add .card-img-right { + border-top-right-radius: calc(0.25rem - 1px); + border-bottom-right-radius: calc(0.25rem - 1px); + } to your css +

+ +
- ``` diff --git a/src/components/card/card-img.js b/src/components/card/card-img.js index 80422eede60..7c5a02fb258 100644 --- a/src/components/card/card-img.js +++ b/src/components/card/card-img.js @@ -1,4 +1,4 @@ -import { mergeData } from 'vue-functional-data-merge' +import {mergeData} from 'vue-functional-data-merge' export const props = { src: { @@ -18,6 +18,22 @@ export const props = { type: Boolean, default: false }, + left: { + type: Boolean, + default: false + }, + right: { + type: Boolean, + default: false + }, + height: { + type: String, + default: null + }, + width: { + type: String, + default: null + }, fluid: { type: Boolean, default: false @@ -27,11 +43,18 @@ export const props = { export default { functional: true, props, - render (h, { props, data, slots }) { + render (h, {props, data, slots}) { let staticClass = 'card-img' + if (props.left) { + staticClass += '-left' + } + if (props.right) { + staticClass += '-right' + } if (props.top) { staticClass += '-top' - } else if (props.bottom) { + } + if (props.bottom) { staticClass += '-bottom' } @@ -39,8 +62,8 @@ export default { 'img', mergeData(data, { staticClass, - class: { 'img-fluid': props.fluid }, - attrs: { src: props.src, alt: props.alt } + class: {'img-fluid': props.fluid}, + attrs: {src: props.src, alt: props.alt, height: props.height, width: props.width} }) ) } diff --git a/src/components/card/card.js b/src/components/card/card.js index 0b08d9ad381..a7872b66eda 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -40,6 +40,7 @@ export default { // The order of the conditionals matter. // We are building the component markup in order. let childNodes = [] + let staticClass = 'card' const $slots = slots() let img = props.imgSrc ? h(CardImg, { @@ -51,17 +52,18 @@ export default { }) : null - if (img) { - // Above the header placement. - if (props.imgTop || !props.imgBottom) { - childNodes.push(img) - } + if (img && props.imgTop) { + childNodes.push(img) } if (props.header || $slots.header) { childNodes.push( h(CardHeader, { props: pluckProps(headerProps, props) }, $slots.header) ) } + if (props.imgLeft) { + childNodes.push(img) + staticClass += ' flex-row' + } if (props.noBody) { childNodes.push($slots.default) } else { @@ -69,6 +71,10 @@ export default { h(CardBody, { props: pluckProps(bodyProps, props) }, $slots.default) ) } + if (props.imgRight) { + childNodes.push(img) + staticClass += ' flex-row' + } if (props.footer || $slots.footer) { childNodes.push( h(CardFooter, { props: pluckProps(footerProps, props) }, $slots.footer) @@ -82,7 +88,7 @@ export default { return h( props.tag, mergeData(data, { - staticClass: 'card', + staticClass: staticClass, class: { [`text-${props.align}`]: Boolean(props.align), [`bg-${props.bgVariant}`]: Boolean(props.bgVariant), From 38d5514b67c49cbb83dd398cac776334214fd99c Mon Sep 17 00:00:00 2001 From: todd Date: Sun, 2 Sep 2018 11:27:59 +0900 Subject: [PATCH 03/11] removed card group wrapper on left and right because it didn't look great on mobile. FWIW, left/right aren't very good for mobile anyway unless it is a very small image and text. --- src/components/card/README.md | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/card/README.md b/src/components/card/README.md index 899854d16f9..5307d31e6c7 100755 --- a/src/components/card/README.md +++ b/src/components/card/README.md @@ -119,29 +119,33 @@ card is changed.

Left and Right

- + img-left + class="mb-3">

- Add .card-img-left { - border-top-left-radius: calc(0.25rem - 1px); - border-bottom-left-radius: calc(0.25rem - 1px); - } - to your css + Add to your css:
+ + .card-img-left {
+   border-top-left-radius: calc(0.25rem - 1px);
+   border-bottom-left-radius: calc(0.25rem - 1px);
+ } +

- Add .card-img-right { - border-top-right-radius: calc(0.25rem - 1px); - border-bottom-right-radius: calc(0.25rem - 1px); - } to your css + Add to your css:
+ + .card-img-right {
+   border-top-right-radius: calc(0.25rem - 1px);
+   border-bottom-right-radius: calc(0.25rem - 1px);
+ } +

- ``` From 6e424e390003d7269ecd1cd138d11ed7b309da56 Mon Sep 17 00:00:00 2001 From: todd Date: Sun, 2 Sep 2018 11:29:45 +0900 Subject: [PATCH 04/11] fixes failing test --- src/components/card/card.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/card/card.js b/src/components/card/card.js index a7872b66eda..c611151ebe8 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -1,15 +1,15 @@ -import { mergeData } from 'vue-functional-data-merge' +import {mergeData} from 'vue-functional-data-merge' import prefixPropName from '../../utils/prefix-prop-name' import unPrefixPropName from '../../utils/unprefix-prop-name' import copyProps from '../../utils/copyProps' import pluckProps from '../../utils/pluck-props' -import { assign } from '../../utils/object' +import {assign} from '../../utils/object' import cardMixin from '../../mixins/card-mixin' -import CardBody, { props as bodyProps } from './card-body' -import CardHeader, { props as headerProps } from './card-header' -import CardFooter, { props as footerProps } from './card-footer' -import CardImg, { props as imgProps } from './card-img' +import CardBody, {props as bodyProps} from './card-body' +import CardHeader, {props as headerProps} from './card-header' +import CardFooter, {props as footerProps} from './card-footer' +import CardImg, {props as imgProps} from './card-img' const cardImgProps = copyProps(imgProps, prefixPropName.bind(null, 'img')) cardImgProps.imgSrc.required = false @@ -36,7 +36,7 @@ export const props = assign( export default { functional: true, props, - render (h, { props, data, slots, children }) { + render (h, {props, data, slots, children}) { // The order of the conditionals matter. // We are building the component markup in order. let childNodes = [] @@ -52,12 +52,12 @@ export default { }) : null - if (img && props.imgTop) { + if (img) { childNodes.push(img) } if (props.header || $slots.header) { childNodes.push( - h(CardHeader, { props: pluckProps(headerProps, props) }, $slots.header) + h(CardHeader, {props: pluckProps(headerProps, props)}, $slots.header) ) } if (props.imgLeft) { @@ -68,7 +68,7 @@ export default { childNodes.push($slots.default) } else { childNodes.push( - h(CardBody, { props: pluckProps(bodyProps, props) }, $slots.default) + h(CardBody, {props: pluckProps(bodyProps, props)}, $slots.default) ) } if (props.imgRight) { @@ -77,7 +77,7 @@ export default { } if (props.footer || $slots.footer) { childNodes.push( - h(CardFooter, { props: pluckProps(footerProps, props) }, $slots.footer) + h(CardFooter, {props: pluckProps(footerProps, props)}, $slots.footer) ) } if (img && props.imgBottom) { From f4f368f22ac075558c7f2e811f931cae2df1866b Mon Sep 17 00:00:00 2001 From: todd Date: Sun, 2 Sep 2018 11:29:58 +0900 Subject: [PATCH 05/11] removed extra line return --- docs/assets/css/styles.css | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css index 47d8c8ee2cb..d9011478f53 100644 --- a/docs/assets/css/styles.css +++ b/docs/assets/css/styles.css @@ -102,7 +102,6 @@ pre.editable.live:after { background-color: rgba(255, 0, 0, .1); } - .card-img-left { border-top-left-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); From 63afe243fd4db5a49901e92e6304af50d63eb759 Mon Sep 17 00:00:00 2001 From: todd Date: Sun, 2 Sep 2018 12:17:04 +0900 Subject: [PATCH 06/11] used flex-row-reverse on right image placement and simplified conditionals for pushing the image onto the childNodes stack. --- src/components/card/card.js | 19 +++++++------------ src/components/card/card.spec.js | 10 ++++++++++ 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/components/card/card.js b/src/components/card/card.js index c611151ebe8..0deb2bf6090 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -53,17 +53,20 @@ export default { : null if (img) { + if (props.imgLeft) { + staticClass += ' flex-row' + } + if(props.imgRight) { + staticClass += ' flex-row-reverse' + } childNodes.push(img) } + if (props.header || $slots.header) { childNodes.push( h(CardHeader, {props: pluckProps(headerProps, props)}, $slots.header) ) } - if (props.imgLeft) { - childNodes.push(img) - staticClass += ' flex-row' - } if (props.noBody) { childNodes.push($slots.default) } else { @@ -71,19 +74,11 @@ export default { h(CardBody, {props: pluckProps(bodyProps, props)}, $slots.default) ) } - if (props.imgRight) { - childNodes.push(img) - staticClass += ' flex-row' - } if (props.footer || $slots.footer) { childNodes.push( h(CardFooter, {props: pluckProps(footerProps, props)}, $slots.footer) ) } - if (img && props.imgBottom) { - // Below the footer placement. - childNodes.push(img) - } return h( props.tag, diff --git a/src/components/card/card.spec.js b/src/components/card/card.spec.js index 505ca183657..7ab7a3e802c 100755 --- a/src/components/card/card.spec.js +++ b/src/components/card/card.spec.js @@ -85,6 +85,16 @@ describe('card', async () => { }) }) + it('should add flex-row to a img-left or img-right image', async () => { + const { app } = window + const node = app.$refs['img_card'] + const childNodes = [...node.childNodes] + const imgEl = childNodes.find(el => el.tagName && el.tagName === 'IMG') + + expect(imgEl).toBeDefined() + expect(imgEl.classList).toEqual(expect.objectContaining(/^flex-row/)) + }) + it("should use the 'tag' for element tag", async () => { const { app: { $refs } } = window const $titleCard = $refs.card_group.querySelector('#title-tag-test') From d7564af364ef31829aa76181cade8491306d1358 Mon Sep 17 00:00:00 2001 From: todd Date: Sun, 2 Sep 2018 12:18:34 +0900 Subject: [PATCH 07/11] missing a space after if statement --- src/components/card/card.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/card/card.js b/src/components/card/card.js index 0deb2bf6090..8499202bcde 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -56,7 +56,7 @@ export default { if (props.imgLeft) { staticClass += ' flex-row' } - if(props.imgRight) { + if (props.imgRight) { staticClass += ' flex-row-reverse' } childNodes.push(img) From fccbe87327e4b43b5f354b48a81229e03fefeed9 Mon Sep 17 00:00:00 2001 From: todd Date: Thu, 25 Oct 2018 20:06:32 +0900 Subject: [PATCH 08/11] #1981 added start and end as alias for left and right card image placement --- src/components/card/README.md | 2 +- src/components/card/card-img.js | 23 +++++++++++++++-------- src/components/card/card.js | 26 ++++++++++++-------------- 3 files changed, 28 insertions(+), 23 deletions(-) diff --git a/src/components/card/README.md b/src/components/card/README.md index 5307d31e6c7..a99f5a6b720 100755 --- a/src/components/card/README.md +++ b/src/components/card/README.md @@ -118,7 +118,7 @@ card is changed.
-

Left and Right

+

Left and Right (or Start and End)

Date: Fri, 26 Oct 2018 10:21:38 +0900 Subject: [PATCH 09/11] #1981 fix bottom image showing on top --- src/components/card/card.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/card/card.js b/src/components/card/card.js index 5c3a21d1318..0c13011a4ab 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -52,12 +52,15 @@ export default { }) : null if (img) { - if (props.imgLeft || props.imgStart) { + if (props.imgTop) { + childNodes.push(img) + } else if (props.imgLeft || props.imgStart) { staticClass += ' flex-row' + childNodes.push(img) } else if (props.imgRight || props.imgEnd) { staticClass += ' flex-row-reverse' + childNodes.push(img) } - childNodes.push(img) } if (props.header || $slots.header) { @@ -78,6 +81,10 @@ export default { ) } + if (img && props.imgBottom) { + childNodes.push(img) + } + return h( props.tag, mergeData(data, { From 28392a90c1dfe547348a496256f242cdfc9a7cea Mon Sep 17 00:00:00 2001 From: todd Date: Fri, 26 Oct 2018 11:02:21 +0900 Subject: [PATCH 10/11] #1981 fix overlay missing --- src/components/card/card.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/card/card.js b/src/components/card/card.js index 0c13011a4ab..55b1e18d6c4 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -51,15 +51,12 @@ export default { ) }) : null - if (img) { - if (props.imgTop) { - childNodes.push(img) - } else if (props.imgLeft || props.imgStart) { + if (img && !props.imgBottom) { + childNodes.push(img) + if (props.imgLeft || props.imgStart) { staticClass += ' flex-row' - childNodes.push(img) } else if (props.imgRight || props.imgEnd) { staticClass += ' flex-row-reverse' - childNodes.push(img) } } From d7ddc344c80d6af26475b2f445a33360123acf7e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 25 Oct 2018 23:35:15 -0300 Subject: [PATCH 11/11] Just picking a better image for the overlay example --- src/components/card/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/card/README.md b/src/components/card/README.md index a99f5a6b720..2d5d93bb7aa 100755 --- a/src/components/card/README.md +++ b/src/components/card/README.md @@ -155,7 +155,7 @@ Place the image in the background of the card by setting the boolean prop `overl ```html