Permalink
Browse files

fix(b-col): handle bool style prop for sm,md,lg,xl (#1042)

Fixes #1041
  • Loading branch information...
alexsasharegan committed Sep 12, 2017
1 parent 685de6a commit 3e7e17df76b4712090772c568cf5ebebca0d7274
Showing with 64 additions and 8 deletions.
  1. +13 −8 lib/components/col.js
  2. +33 −0 tests/components/col.spec.js
  3. +12 −0 tests/fixtures/col/demo.html
  4. +6 −0 tests/fixtures/col/demo.js
@@ -24,13 +24,18 @@ function strNum() {
};
}
const computeBkPtClass = memoize(function computeBkPt(type, breakpoint, val) {
export const computeBkPtClass = memoize(function computeBkPt(type, breakpoint, val) {
let className = type;
if (val === false || val === null || val === undefined) {
return undefined;
}
if (breakpoint) {
className += `-${breakpoint}`;
}
// Handle boolean style prop.
if (val === true) {
// Handling the boolean style prop when accepting [Boolean, String, Number]
// means Vue will not convert <b-col sm /> to sm: true for us.
// Since the default is false, an empty string indicates the prop's presence.
if (type === "col" && (val === "" || val === true)) {
// .col-md
return className.toLowerCase();
}
@@ -101,11 +106,11 @@ export default {
// Returns colSm, offset, offsetSm, orderMd, etc.
const keys = breakpointPropMap[type];
for (let i = 0; i < keys.length; i++) {
// Guard against falsy props like :col-sm="value"
// which are breakpoint specific flex values.
if (props[keys[i]]) {
// computeBkPt(col, colSm => Sm, value=[String, Number, Boolean])
classList.push(computeBkPtClass(type, keys[i].replace(type, ""), props[keys[i]]));
// computeBkPt(col, colSm => Sm, value=[String, Number, Boolean])
const c = computeBkPtClass(type, keys[i].replace(type, ""), props[keys[i]]);
// If a class is returned, push it onto the array.
if (c) {
classList.push(c);
}
}
}
@@ -1,4 +1,5 @@
import { loadFixture, testVM } from "../helpers";
import { computeBkPtClass } from "../../lib/components/col";
describe("col", async () => {
beforeEach(loadFixture("col"));
@@ -49,6 +50,38 @@ describe("col", async () => {
}
});
it("computeBkPtClass helper should compute boolean classes", async () => {
expect(computeBkPtClass("col", "sm", true)).toBe("col-sm");
expect(computeBkPtClass("col", "md", true)).toBe("col-md");
expect(computeBkPtClass("col", "lg", true)).toBe("col-lg");
expect(computeBkPtClass("col", "xl", true)).toBe("col-xl");
});
it("computeBkPtClass helper should compute boolean classes when given empty string", async () => {
expect(computeBkPtClass("col", "sm", "")).toBe("col-sm");
expect(computeBkPtClass("col", "md", "")).toBe("col-md");
expect(computeBkPtClass("col", "lg", "")).toBe("col-lg");
expect(computeBkPtClass("col", "xl", "")).toBe("col-xl");
});
it("computeBkPtClass helper should NOT compute boolean classes when value 'false' (return 'undefined')", async () => {
expect(computeBkPtClass("col", "sm", false)).toBe(undefined);
expect(computeBkPtClass("col", "md", false)).toBe(undefined);
expect(computeBkPtClass("col", "lg", false)).toBe(undefined);
expect(computeBkPtClass("col", "xl", false)).toBe(undefined);
});
it("should apply boolean breakpoint classes for 'sm', 'md', 'lg', 'xl' prop", async () => {
const { $refs } = window.app;
["sm", "md", "lg", "xl"].forEach((bkpt, idx) => {
// Shorthand binding <b-col sm />
expect($refs[bkpt]).toHaveClass(`col-${bkpt}`);
// Dynamically bound using object literals { sm: true }
expect($refs[`boolean-breakpoints`][idx]).toHaveClass(`col-${bkpt}`);
expect($refs[`boolean-breakpoints`][idx]).not.toHaveClass("col");
});
});
it("should apply 'tag'", async () => {
const { $refs } = window.app;
expect($refs.tag).toBeElement("section");
@@ -16,6 +16,18 @@ <h1>Hello Vue!</h1>
:key="`order-${size}`"
:order="size"
ref="order"></b-col>
<b-col v-for="breakpoint in breakpointObjs"
:key="`boolean-${breakpoint.key}`"
v-bind="breakpoint"
ref="boolean-breakpoints"></b-col>
<b-col sm
ref="sm"></b-col>
<b-col md
ref="md"></b-col>
<b-col lg
ref="lg"></b-col>
<b-col xl
ref="xl"></b-col>
<div v-for="breakpoint in breakpoints">
<b-col v-for="size in sizes"
v-bind="{[breakpoint]: size,[`offset-${breakpoint}`]: size,[`order-${breakpoint}`]: size}"
@@ -2,6 +2,12 @@ window.app = new Vue({
el: "#app",
data: {
breakpoints: ["sm", "md", "lg", "xl"],
breakpointObjs: [
{ sm: true, key: "sm" },
{ md: true, key: "md" },
{ lg: true, key: "lg" },
{ xl: true, key: "xl" }
],
sizes: Array.from({ length: 12 }).map((_, i) => i + 1)
}
});

0 comments on commit 3e7e17d

Please sign in to comment.