Permalink
Browse files

feat(form-row): New functional component (#844)

* feat(form-row): New function component for forms

* Add form-row to available components

* Create demo.html

* Create demo.js

* Create form-row.spec.js

* Update meta.json
  • Loading branch information...
tmorehouse committed Aug 14, 2017
1 parent 467ec27 commit 1e0f313069e4456b3a0f5caa3116eaa277c966c8
@@ -1,6 +1,7 @@
{
"title": "Form",
"component": "bForm",
"components": ["bFormRow"],
"events": [
{
"event": "submit",
@@ -0,0 +1,22 @@
import { mergeData } from "../utils";
export const props = {
tag: {
type: String,
default: "div"
}
};
export default {
functional: true,
props,
render(h, { props, data, children }) {
return h(
props.tag,
mergeData(data, {
staticClass: "form-row"
}),
children
);
}
};
@@ -23,6 +23,7 @@ import bDropdownItemButton from "./dropdown-item-button.vue";
import bDropdownDivider from "./dropdown-divider.vue";
import bDropdownHeader from "./dropdown-header.vue";
import bForm from "./form.vue";
import bFormRow from "./form-row";
import bFormFieldset from "./form-fieldset.vue";
import bFormCheckbox from "./form-checkbox.vue";
import bFormRadio from "./form-radio.vue";
@@ -80,6 +81,7 @@ export {
bDropdownDivider,
bDropdownHeader,
bForm,
bFormRow,
bFormCheckbox,
bFormFieldset,
bFormFieldset as bFormGroup,
@@ -0,0 +1,37 @@
import { loadFixture, testVM } from "../helpers";
describe("button-group", async () => {
beforeEach(loadFixture("form-row"));
testVM();
it("default should contain base class", async () => {
const { app: { $refs } } = window;
expect($refs.default).toHaveClass("form-row");
});
it("custom should contain base class", async () => {
const { app: { $refs } } = window;
expect($refs.custom).toHaveClass("form-row");
});
it("default should have content", async () => {
const { app: { $refs } } = window;
expect($refs.default.textContent).toContain("default");
});
it("custom should have content", async () => {
const { app: { $refs } } = window;
expect($refs.custom.textContent).toContain("custom");
});
it("default should have tag div", async () => {
const { app: { $refs } } = window;
expect($refs.default).toBeElement("div");
});
it("custom should have tag p", async () => {
const { app: { $refs } } = window;
expect($refs.custom).toBeElement("p");
});
});
@@ -0,0 +1,7 @@
<div id="app">
<!-- default -->
<b-form-row ref="default">default</b-form-file>
<br>
<!-- custom tag -->
<b-form-row tag="p" ref="custom">custom</b-form-file>
</div>
@@ -0,0 +1,3 @@
window.app = new Vue({
el: '#app'
});

0 comments on commit 1e0f313

Please sign in to comment.