tailwind-system
Version:
Inspired by [Styled System](https://styled-system.com), tailwind-system allow you add props to your components which are then converted to [Tailwind](https://tailwindcss.com) utility classes. It can be used with Vue or React.
605 lines (542 loc) • 16.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "propsToClasses", {
enumerable: true,
get: function get() {
return _propsToClasses["default"];
}
});
Object.defineProperty(exports, "vuePropTypes", {
enumerable: true,
get: function get() {
return _vuePropTypes.propTypes;
}
});
Object.defineProperty(exports, "vueMapProps", {
enumerable: true,
get: function get() {
return _vuePropTypes.mapProps;
}
});
Object.defineProperty(exports, "reactPropTypes", {
enumerable: true,
get: function get() {
return _reactPropTypes.propTypes;
}
});
Object.defineProperty(exports, "reactMapProps", {
enumerable: true,
get: function get() {
return _reactPropTypes.mapProps;
}
});
var _propsToClasses = _interopRequireDefault(require("./propsToClasses"));
var _vuePropTypes = require("./vue/vuePropTypes");
var _reactPropTypes = require("./react/reactPropTypes");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
var dashCase = function dashCase(str) {
return str.replace(/[A-Z]/g, function (m) {
return '-' + m.toLowerCase();
});
};
/*
// Small (sm)
@media (min-width: 640px) {}
// Medium (md)
@media (min-width: 768px) { }
// Large (lg)
@media (min-width: 1024px) { }
// Extra Large (xl)
@media (min-width: 1280px) { }
*/
var getBreakPointsDefault = function getBreakPointsDefault(values) {
return ['', 'sm', 'md', 'lg', 'xl'];
};
var objectToClassNames = function objectToClassNames(_ref) {
var value = _ref.value,
key = _ref.key,
mapKeys = _ref.mapKeys;
var breakpoints = Object.keys(value);
var names = breakpoints.reduce(function (acc, breakpoint) {
var val = value[breakpoint];
return [].concat(_toConsumableArray(acc), [toClassName({
value: val,
key: key,
breakpoint: breakpoint,
mapKeys: mapKeys
})]);
}, []);
return names.join(' ');
};
var arrayToClassNames = function arrayToClassNames(_ref2) {
var value = _ref2.value,
key = _ref2.key,
mapKeys = _ref2.mapKeys,
getBreakPoints = _ref2.getBreakPoints;
var classNameBreakpoints = getBreakPoints ? getBreakPoints(value) : getBreakPointsDefault(value);
var names = value.reduce(function (acc, val, index) {
var breakpoint = classNameBreakpoints[index];
return [].concat(_toConsumableArray(acc), [toClassName({
value: val,
key: key,
breakpoint: breakpoint,
mapKeys: mapKeys
})]);
}, []);
return names.join(' ');
};
/**
*
* @param value
* @param key
* @param mapKeys
* @param breakpoint
* @returns {string|null}
*/
var toClassName = function toClassName(_ref3) {
var value = _ref3.value,
key = _ref3.key,
mapKeys = _ref3.mapKeys,
_ref3$breakpoint = _ref3.breakpoint,
breakpoint = _ref3$breakpoint === void 0 ? '' : _ref3$breakpoint;
var classNameKey = dashCase(key);
var name = mapKeys && mapKeys[classNameKey] !== undefined ? mapKeys[classNameKey] : classNameKey;
var breakpointPrefix = breakpoint ? breakpoint + ':' : '';
if (typeof value === 'boolean') {
return value ? "".concat(breakpointPrefix).concat(name) : null;
} else if (value === '') {
//assume is true
return "".concat(breakpointPrefix).concat(name);
} else {
var prefix = name === '' ? '' : "".concat(name, "-");
if (parseInt(value) < 0) {
return "".concat(breakpointPrefix, "-").concat(prefix).concat(Math.abs(value));
}
return "".concat(breakpointPrefix).concat(prefix).concat(value);
}
};
/***
*
* @param props
* @param mapKeys
* @returns {*[]}
*/
var reduceClassNames = function reduceClassNames(_ref4) {
var props = _ref4.props,
mapKeys = _ref4.mapKeys,
getBreakPoints = _ref4.getBreakPoints;
var propsKeys = Object.keys(props);
return Object.keys(props).filter(function (name) {
return propsKeys.find(function (key) {
return key === name;
});
}).reduce(function (acc, key) {
var value = props[key];
if (value !== undefined) {
var className = toClassName({
value: value,
key: key,
mapKeys: mapKeys
});
if (Array.isArray(value)) {
// css classname exists for breakpoint
className = arrayToClassNames({
value: value,
key: key,
mapKeys: mapKeys,
getBreakPoints: getBreakPoints
});
} else if (_typeof(value) === 'object') {
className = objectToClassNames({
value: value,
key: key,
mapKeys: mapKeys
});
}
if (className) {
return [].concat(_toConsumableArray(acc), [className]);
}
}
return acc;
}, []);
};
var classesToString = function classesToString(arr) {
return arr.filter(function (arr) {
return arr.length > 0;
}).join(' ');
};
/**
*
const mapKeys = {
'text-align': 'text',
display: ''
}
const classNameProps = propTypes.box
const classNames = propsToClasses(props, classNameProps, { mapKeys })
const classNames = computed( () => propsToClasses(props, classNameProps, { mapKeys }))
*
* @param data
* @param props
* @param options
* @returns {string|*}
*/
var propsToClasses = function propsToClasses(props, classNameProps) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var mapKeys = options.mapKeys,
getBreakPoints = options.getBreakPoints;
var classProps = {};
Object.keys(classNameProps).forEach(function (key) {
classProps[key] = props[key];
});
return classesToString(reduceClassNames({
props: classProps,
mapKeys: mapKeys,
getBreakPoints: getBreakPoints
}));
};
var _default = propsToClasses;
exports["default"] = _default;
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.propTypes = exports.mapProps = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var propType = _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].bool, _propTypes["default"].string, _propTypes["default"].array, _propTypes["default"].object]); //https://tailwindcss.com/docs/padding
var space = {
m: propType,
mt: propType,
mr: propType,
mb: propType,
ml: propType,
mx: propType,
my: propType,
p: propType,
pt: propType,
pr: propType,
pb: propType,
pl: propType,
px: propType,
py: propType,
spaceX: propType,
spaceY: propType
}; //https://tailwindcss.com/docs/width
var sizing = {
w: propType,
minW: propType,
maxW: propType,
h: propType,
minH: propType,
maxH: propType
}; //https://tailwindcss.com/docs/display
var layout = {
container: propType,
box: propType,
display: propType,
block: propType,
hidden: propType,
inlineBlock: propType,
inline: propType,
flex: propType,
inlineFlex: propType,
grid: propType,
inlineGrid: propType,
"float": propType,
clear: propType,
object: propType,
flexGrow: propType,
flexShrink: propType,
absolute: propType,
relative: propType,
fixed: propType,
overflow: propType,
overflowX: propType,
overflowY: propType,
scrolling: propType,
//https://tailwindcss.com/docs/position
position: propType,
inset: propType,
top: propType,
right: propType,
bottom: propType,
left: propType,
visible: propType,
invisible: propType,
//https://tailwindcss.com/docs/z-index
z: propType,
textAlign: propType
};
var border = {
rounded: propType,
border: propType,
borderColor: propType,
borderOpacity: propType,
borderStyle: propType
};
var borderMap = {
'border-color': 'border',
'border-style': 'border'
};
var backgrounds = {
bg: propType,
border: propType
};
var opacity = {
opacity: propType
};
var transition = {
transition: propType,
duration: propType,
ease: propType,
delay: propType,
animate: propType
}; //https://tailwindcss.com/docs/font-size
//https://tailwindcss.com/docs/text-align
var typography = {
align: propType,
color: propType,
opacity: propType,
size: propType,
weight: propType,
normal: propType,
medium: propType,
bold: propType,
whitespace: propType,
truncate: propType,
uppercase: propType,
leading: propType
};
var typographyMap = {
opacity: 'text-opacity',
color: 'text',
align: 'text',
size: 'text',
weight: 'font',
normal: 'font-bold',
medium: 'font-bold',
bold: 'font-bold'
};
var flexbox = {
direction: propType,
wrap: propType,
grow: propType,
shrink: propType,
justify: propType,
items: propType
};
var grid = {
cols: propType,
rows: propType,
gap: propType,
gapX: propType,
gapY: propType,
gridFlow: propType,
autoCols: propType,
autoRows: propType
};
var cursor = {
cursor: propType
};
var box = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, space), opacity), transition), backgrounds), sizing), layout), cursor), border);
var mapProps = {
typographyMap: typographyMap,
borderMap: borderMap
};
exports.mapProps = mapProps;
var propTypes = {
box: box,
space: space,
backgrounds: backgrounds,
sizing: sizing,
typography: typography,
layout: layout,
flexbox: flexbox,
grid: grid
};
exports.propTypes = propTypes;
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.propTypes = exports.mapProps = void 0;
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
//https://tailwindcss.com/docs/padding
var propType = [Number, String, Boolean, Object, Array]; //https://tailwindcss.com/docs/padding
var space = {
m: propType,
mt: propType,
mr: propType,
mb: propType,
ml: propType,
mx: propType,
my: propType,
p: propType,
pt: propType,
pr: propType,
pb: propType,
pl: propType,
px: propType,
py: propType,
spaceX: propType,
spaceY: propType
}; //https://tailwindcss.com/docs/width
var sizing = {
w: propType,
minW: propType,
maxW: propType,
h: propType,
minH: propType,
maxH: propType
}; //https://tailwindcss.com/docs/display
var layout = {
container: propType,
box: propType,
display: propType,
block: propType,
hidden: propType,
inlineBlock: propType,
inline: propType,
flex: propType,
inlineFlex: propType,
grid: propType,
inlineGrid: propType,
"float": propType,
clear: propType,
object: propType,
flexGrow: propType,
flexShrink: propType,
absolute: propType,
relative: propType,
fixed: propType,
overflow: propType,
overflowX: propType,
overflowY: propType,
scrolling: propType,
//https://tailwindcss.com/docs/position
position: propType,
inset: propType,
top: propType,
right: propType,
bottom: propType,
left: propType,
visible: propType,
invisible: propType,
//https://tailwindcss.com/docs/z-index
z: propType,
textAlign: propType
};
var border = {
rounded: propType,
border: propType,
borderColor: propType,
borderOpacity: propType,
borderStyle: propType
};
var borderMap = {
'border-radius': 'rounded',
'border-color': 'border',
'border-style': 'border'
};
var backgrounds = {
bg: propType,
border: propType
};
var opacity = {
opacity: propType
};
var transition = {
transition: propType,
duration: propType,
ease: propType,
delay: propType,
animate: propType
}; //https://tailwindcss.com/docs/font-size
//https://tailwindcss.com/docs/text-align
var typography = {
align: propType,
color: propType,
opacity: propType,
size: propType,
weight: propType,
normal: propType,
medium: propType,
bold: propType,
whitespace: propType,
truncate: propType,
uppercase: propType,
leading: propType
};
var typographyMap = {
opacity: 'text-opacity',
color: 'text',
align: 'text',
size: 'text',
weight: 'font',
regular: 'font-regular',
normal: 'font-normal',
medium: 'font-medium',
bold: 'font-bold'
};
var flexbox = {
direction: propType,
wrap: propType,
grow: propType,
shrink: propType,
justify: propType,
items: propType
};
var grid = {
cols: propType,
rows: propType,
gap: propType,
gapX: propType,
gapY: propType,
gridFlow: propType,
autoCols: propType,
autoRows: propType
};
var cursor = {
cursor: propType
};
var box = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, space), opacity), transition), backgrounds), sizing), layout), cursor), border);
var boxMap = _objectSpread(_objectSpread({}, borderMap), {}, {
'text-align': 'text',
display: ''
});
var mapProps = {
boxMap: boxMap,
typographyMap: typographyMap,
borderMap: borderMap
};
exports.mapProps = mapProps;
var propTypes = {
box: box,
space: space,
backgrounds: backgrounds,
sizing: sizing,
typography: typography,
layout: layout,
flexbox: flexbox,
grid: grid
};
exports.propTypes = propTypes;