Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option to not wrap MqLayout content in a <div> #36

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Option to not wrap MqLayout content in a <div> #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,13 +111,16 @@ In addition to `$mq` property this plugin provide a wrapper component to facilit
<span> Display on sm and lg </span>
</mq-layout>
```
**Props**
mq => required : String | Array
#### Props
|Prop|Type|Required|Default|Description|
|---|---|---|---|---|
|mq|String, Array|true| |Breakpoint name|
|create-container|Boolean|false|false|Allow to wrap the slot in a `div` container|

*Important*: note that you can append a `+` modifier at the end of the string to specify that the conditional rendering happens for all greater breakpoints.

## SSR Support
v1.0+ now supports SSR. You can customize the `defaultBreakpoint` which let you set the breakpoint used by the server-side-rendering
v1.0+ now supports SSR. You can customize the `defaultBreakpoint` which let you set the breakpoint used by the server-side-rendering

## Browser Support
This plugin relies on matchMedia API to detect screensize change. So for older browsers and IE, you should polyfill this out:
Expand Down
22 changes: 17 additions & 5 deletions dist/vue-mq.cjs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,25 @@ function _defineProperty(obj, key, value) {
}

function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

return arr2;
} else {
return Array.from(arr);
}
}

function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}

function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}

function convertBreakpointsToMediaQueries(breakpoints) {
var keys = Object.keys(breakpoints);
var values = keys.map(function (key) {
Expand Down Expand Up @@ -83,13 +93,15 @@ function isArray(arg) {
}

// USAGE
// mq-layout(mq="lg")
// p I’m lg
var component = {
props: {
mq: {
required: true,
type: [String, Array]
},
createContainer: {
type: Boolean,
default: false
}
},
computed: {
Expand All @@ -104,7 +116,7 @@ var component = {
},
render: function render(h, props) {
var shouldRenderChildren = this.activeBreakpoints.includes(this.$mq);
return shouldRenderChildren ? h('div', this.$slots.default) : h();
return shouldRenderChildren ? this.createContainer ? h('div', this.$slots.default) : this.$slots.default : h();
}
};

Expand Down
22 changes: 17 additions & 5 deletions dist/vue-mq.es.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,25 @@ function _defineProperty(obj, key, value) {
}

function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

return arr2;
} else {
return Array.from(arr);
}
}

function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}

function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}

function convertBreakpointsToMediaQueries(breakpoints) {
var keys = Object.keys(breakpoints);
var values = keys.map(function (key) {
Expand Down Expand Up @@ -79,13 +89,15 @@ function isArray(arg) {
}

// USAGE
// mq-layout(mq="lg")
// p I’m lg
var component = {
props: {
mq: {
required: true,
type: [String, Array]
},
createContainer: {
type: Boolean,
default: false
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the default remain true since this could break some CSS? I agree that default should've been false all along, but I wonder if the new option has to lean towards precedence.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keep it true, for this pull request. so we do not break something for anyone.
this option is needed anyway. regardless of default-setting.

}
},
computed: {
Expand All @@ -100,7 +112,7 @@ var component = {
},
render: function render(h, props) {
var shouldRenderChildren = this.activeBreakpoints.includes(this.$mq);
return shouldRenderChildren ? h('div', this.$slots.default) : h();
return shouldRenderChildren ? this.createContainer ? h('div', this.$slots.default) : this.$slots.default : h();
}
};

Expand Down
Loading