@applique-ui/layout
Advanced tools
Comparing version 0.0.9 to 0.0.10
@@ -5,9 +5,10 @@ 'use strict'; | ||
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } | ||
var React = require('react'); | ||
var React__default = _interopDefault(React); | ||
var uikitUtils = require('@applique-ui/uikit-utils'); | ||
function styleInject(css) { | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
function styleInject$1(css) { | ||
if (!css || typeof document === 'undefined') return | ||
@@ -28,8 +29,8 @@ | ||
styleInject(".u-layout-stack{display:flex;flex-direction:row}.u-layout-stack.u-layout-small{--u-layout-stack-margin-right:4px}.u-layout-stack.u-layout-medium{--u-layout-stack-margin-right:8px}.u-layout-stack.u-layout-large{--u-layout-stack-margin-right:16px}.u-layout-stack.u-layout-xl{--u-layout-stack-margin-right:24px}.u-layout-stack.u-layout-xxl{--u-layout-stack-margin-right:32px}.u-layout-stack.u-layout-xxxl{--u-layout-stack-margin-right:40px}.u-layout-stack.u-layout-none{--u-layout-stack-margin-right:0}.u-layout-stack>*{max-width:100%}.u-layout-stack>:not(:last-child){margin-right:var(--u-layout-stack-margin-right)}"); | ||
styleInject$1(".u-layout-stack{display:flex;flex-direction:row}.u-layout-stack.u-layout-small{--u-layout-stack-margin-right:4px}.u-layout-stack.u-layout-medium{--u-layout-stack-margin-right:8px}.u-layout-stack.u-layout-large{--u-layout-stack-margin-right:16px}.u-layout-stack.u-layout-xl{--u-layout-stack-margin-right:24px}.u-layout-stack.u-layout-xxl{--u-layout-stack-margin-right:32px}.u-layout-stack.u-layout-xxxl{--u-layout-stack-margin-right:40px}.u-layout-stack.u-layout-none{--u-layout-stack-margin-right:0}.u-layout-stack>*{max-width:100%}.u-layout-stack>:not(:last-child){margin-right:var(--u-layout-stack-margin-right)}"); | ||
const locals = {"stack":"u-layout-stack","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"}; | ||
const locals$1 = {"stack":"u-layout-stack","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"}; | ||
function classnames() { | ||
return uikitUtils.classnames.apply(null, arguments).use(locals) | ||
function classnames$1() { | ||
return uikitUtils.classnames.apply(null, arguments).use(locals$1) | ||
} | ||
@@ -56,3 +57,3 @@ | ||
function StackLayout({ type, distribution, alignment, wrap, className, children, gutter, style, space, reference, ...props }) { | ||
return (React__default.createElement("div", Object.assign({}, props, { ref: reference, className: classnames('stack', className, gutter), style: { | ||
return (React__default["default"].createElement("div", Object.assign({}, props, { ref: reference, className: classnames$1('stack', className, gutter), style: { | ||
alignItems: alignments[alignment], | ||
@@ -71,3 +72,3 @@ justifyContent: distributions[distribution], | ||
const { style } = child.props || {}; | ||
return React__default.cloneElement(child, { | ||
return React__default["default"].cloneElement(child, { | ||
style: { ...style, ...itemStyle }, | ||
@@ -85,3 +86,3 @@ }); | ||
function styleInject$1(css) { | ||
function styleInject(css) { | ||
if (!css || typeof document === 'undefined') return | ||
@@ -102,8 +103,8 @@ | ||
styleInject$1(".u-layout-row{display:flex;flex-direction:column}.u-layout-row.u-layout-small{--u-layout-row-margin-bottom:4px}.u-layout-row.u-layout-medium{--u-layout-row-margin-bottom:8px}.u-layout-row.u-layout-large{--u-layout-row-margin-bottom:16px}.u-layout-row.u-layout-xl{--u-layout-row-margin-bottom:24px}.u-layout-row.u-layout-xxl{--u-layout-row-margin-bottom:32px}.u-layout-row.u-layout-xxxl{--u-layout-row-margin-bottom:40px}.u-layout-row.u-layout-none{--u-layout-row-margin-bottom:0}.u-layout-row>*{min-width:100%}.u-layout-row>:not(:last-child){margin-bottom:var(--u-layout-row-margin-bottom)}"); | ||
styleInject(".u-layout-row{display:flex;flex-direction:column}.u-layout-row.u-layout-small{--u-layout-row-margin-bottom:4px}.u-layout-row.u-layout-medium{--u-layout-row-margin-bottom:8px}.u-layout-row.u-layout-large{--u-layout-row-margin-bottom:16px}.u-layout-row.u-layout-xl{--u-layout-row-margin-bottom:24px}.u-layout-row.u-layout-xxl{--u-layout-row-margin-bottom:32px}.u-layout-row.u-layout-xxxl{--u-layout-row-margin-bottom:40px}.u-layout-row.u-layout-none{--u-layout-row-margin-bottom:0}.u-layout-row>*{min-width:100%}.u-layout-row>:not(:last-child){margin-bottom:var(--u-layout-row-margin-bottom)}"); | ||
const locals$1 = {"row":"u-layout-row","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"}; | ||
const locals = {"row":"u-layout-row","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"}; | ||
function classnames$1() { | ||
return uikitUtils.classnames.apply(null, arguments).use(locals$1) | ||
function classnames() { | ||
return uikitUtils.classnames.apply(null, arguments).use(locals) | ||
} | ||
@@ -115,3 +116,3 @@ | ||
function RowLayout({ type, className, children, gutter, ...props }) { | ||
return (React__default.createElement("div", Object.assign({}, props, { className: classnames$1('row', className, gutter) }), children)); | ||
return (React__default["default"].createElement("div", Object.assign({}, props, { className: classnames('row', className, gutter) }), children)); | ||
} | ||
@@ -134,6 +135,6 @@ RowLayout.defaultProps = { | ||
const LayoutComponent = layouts[props.type || 'row']; | ||
return LayoutComponent ? React__default.createElement(LayoutComponent, Object.assign({}, props)) : null; | ||
return LayoutComponent ? React__default["default"].createElement(LayoutComponent, Object.assign({}, props)) : null; | ||
} | ||
exports.default = Layout; | ||
exports["default"] = Layout; | ||
exports.layouts = layouts; |
import React, { Children, isValidElement } from 'react'; | ||
import { classnames as classnames$2 } from '@applique-ui/uikit-utils'; | ||
function styleInject(css) { | ||
function styleInject$1(css) { | ||
if (!css || typeof document === 'undefined') return | ||
@@ -20,8 +20,8 @@ | ||
styleInject(".u-layout-stack{display:flex;flex-direction:row}.u-layout-stack.u-layout-small{--u-layout-stack-margin-right:4px}.u-layout-stack.u-layout-medium{--u-layout-stack-margin-right:8px}.u-layout-stack.u-layout-large{--u-layout-stack-margin-right:16px}.u-layout-stack.u-layout-xl{--u-layout-stack-margin-right:24px}.u-layout-stack.u-layout-xxl{--u-layout-stack-margin-right:32px}.u-layout-stack.u-layout-xxxl{--u-layout-stack-margin-right:40px}.u-layout-stack.u-layout-none{--u-layout-stack-margin-right:0}.u-layout-stack>*{max-width:100%}.u-layout-stack>:not(:last-child){margin-right:var(--u-layout-stack-margin-right)}"); | ||
styleInject$1(".u-layout-stack{display:flex;flex-direction:row}.u-layout-stack.u-layout-small{--u-layout-stack-margin-right:4px}.u-layout-stack.u-layout-medium{--u-layout-stack-margin-right:8px}.u-layout-stack.u-layout-large{--u-layout-stack-margin-right:16px}.u-layout-stack.u-layout-xl{--u-layout-stack-margin-right:24px}.u-layout-stack.u-layout-xxl{--u-layout-stack-margin-right:32px}.u-layout-stack.u-layout-xxxl{--u-layout-stack-margin-right:40px}.u-layout-stack.u-layout-none{--u-layout-stack-margin-right:0}.u-layout-stack>*{max-width:100%}.u-layout-stack>:not(:last-child){margin-right:var(--u-layout-stack-margin-right)}"); | ||
const locals = {"stack":"u-layout-stack","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"}; | ||
const locals$1 = {"stack":"u-layout-stack","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"}; | ||
function classnames() { | ||
return classnames$2.apply(null, arguments).use(locals) | ||
function classnames$1() { | ||
return classnames$2.apply(null, arguments).use(locals$1) | ||
} | ||
@@ -48,3 +48,3 @@ | ||
function StackLayout({ type, distribution, alignment, wrap, className, children, gutter, style, space, reference, ...props }) { | ||
return (React.createElement("div", Object.assign({}, props, { ref: reference, className: classnames('stack', className, gutter), style: { | ||
return (React.createElement("div", Object.assign({}, props, { ref: reference, className: classnames$1('stack', className, gutter), style: { | ||
alignItems: alignments[alignment], | ||
@@ -76,3 +76,3 @@ justifyContent: distributions[distribution], | ||
function styleInject$1(css) { | ||
function styleInject(css) { | ||
if (!css || typeof document === 'undefined') return | ||
@@ -93,8 +93,8 @@ | ||
styleInject$1(".u-layout-row{display:flex;flex-direction:column}.u-layout-row.u-layout-small{--u-layout-row-margin-bottom:4px}.u-layout-row.u-layout-medium{--u-layout-row-margin-bottom:8px}.u-layout-row.u-layout-large{--u-layout-row-margin-bottom:16px}.u-layout-row.u-layout-xl{--u-layout-row-margin-bottom:24px}.u-layout-row.u-layout-xxl{--u-layout-row-margin-bottom:32px}.u-layout-row.u-layout-xxxl{--u-layout-row-margin-bottom:40px}.u-layout-row.u-layout-none{--u-layout-row-margin-bottom:0}.u-layout-row>*{min-width:100%}.u-layout-row>:not(:last-child){margin-bottom:var(--u-layout-row-margin-bottom)}"); | ||
styleInject(".u-layout-row{display:flex;flex-direction:column}.u-layout-row.u-layout-small{--u-layout-row-margin-bottom:4px}.u-layout-row.u-layout-medium{--u-layout-row-margin-bottom:8px}.u-layout-row.u-layout-large{--u-layout-row-margin-bottom:16px}.u-layout-row.u-layout-xl{--u-layout-row-margin-bottom:24px}.u-layout-row.u-layout-xxl{--u-layout-row-margin-bottom:32px}.u-layout-row.u-layout-xxxl{--u-layout-row-margin-bottom:40px}.u-layout-row.u-layout-none{--u-layout-row-margin-bottom:0}.u-layout-row>*{min-width:100%}.u-layout-row>:not(:last-child){margin-bottom:var(--u-layout-row-margin-bottom)}"); | ||
const locals$1 = {"row":"u-layout-row","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"}; | ||
const locals = {"row":"u-layout-row","small":"u-layout-small","medium":"u-layout-medium","large":"u-layout-large","xl":"u-layout-xl","xxl":"u-layout-xxl","xxxl":"u-layout-xxxl","none":"u-layout-none"}; | ||
function classnames$1() { | ||
return classnames$2.apply(null, arguments).use(locals$1) | ||
function classnames() { | ||
return classnames$2.apply(null, arguments).use(locals) | ||
} | ||
@@ -106,3 +106,3 @@ | ||
function RowLayout({ type, className, children, gutter, ...props }) { | ||
return (React.createElement("div", Object.assign({}, props, { className: classnames$1('row', className, gutter) }), children)); | ||
return (React.createElement("div", Object.assign({}, props, { className: classnames('row', className, gutter) }), children)); | ||
} | ||
@@ -128,3 +128,2 @@ RowLayout.defaultProps = { | ||
export default Layout; | ||
export { layouts }; | ||
export { Layout as default, layouts }; |
{ | ||
"name": "@applique-ui/layout", | ||
"version": "0.0.9", | ||
"version": "0.0.10", | ||
"main": "dist/layout.cjs.js", | ||
@@ -5,0 +5,0 @@ "module": "dist/layout.esm.js", |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
19461
456