tailwindcss-3d
Version:
Add 3D transforms to your TailwindCSS project
107 lines (106 loc) • 6.12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Bounce", {
enumerable: true,
get: function() {
return Bounce;
}
});
var _call_super = require("@swc/helpers/_/_call_super");
var _class_call_check = require("@swc/helpers/_/_class_call_check");
var _define_property = require("@swc/helpers/_/_define_property");
var _inherits = require("@swc/helpers/_/_inherits");
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _lodash = require("lodash");
var _defaultTheme = /*#__PURE__*/ _interop_require_default._(require("tailwindcss/defaultTheme"));
var _base = require("./base");
var _transform = require("../css-utilities/transform");
var _translate = require("../css-utilities/translate");
var _cssvalue = require("../utils/css-value");
var _generateguard = require("../utils/generate-guard");
var _lodashtransformers = require("../utils/lodash-transformers");
var Bounce = /*#__PURE__*/ function(Base) {
"use strict";
_inherits._(Bounce, Base);
function Bounce() {
_class_call_check._(this, Bounce);
var _this;
_this = _call_super._(this, Bounce, arguments), _define_property._(_this, "isProcessablePrimitive", (0, _generateguard.generateGuard)(_lodash.isString, _lodash.isUndefined)), _define_property._(_this, "isProcessableValue", (0, _generateguard.generateGuard)([
_lodash.isArray,
function(maybe) {
return maybe.length === 2;
},
function(maybe) {
return (0, _lodash.every)((0, _lodash.values)(maybe), _this.isProcessablePrimitive);
}
])), _define_property._(_this, "isProcessableValues", (0, _generateguard.generateGuard)([
_lodash.isPlainObject,
function(maybe) {
return (0, _lodash.every)((0, _lodash.keys)(maybe), _lodash.isString);
},
function(maybe) {
return (0, _lodash.every)((0, _lodash.values)(maybe), _this.isProcessableValue);
}
])), _define_property._(_this, "normaliseValues", function(values) {
return _this.isProcessableValues(values) ? (0, _lodash.chain)(values).mapKeys(function(_value, modifier) {
return (0, _cssvalue.normaliseNumberValue)(modifier);
}).mapValues(function(param) {
var _param = _sliced_to_array._(param, 2), duration = _param[0], distance = _param[1];
return [
(0, _cssvalue.normaliseTimeValue)(duration),
(0, _cssvalue.normaliseLengthPercentageValue)(distance)
];
}).pickBy(function(value, modifier) {
var _value = _sliced_to_array._(value, 2), duration = _value[0], distance = _value[1];
return (0, _lodash.isString)(modifier) && modifier !== '' && modifier !== 'px' && (0, _lodash.isString)(duration) && (0, _lodash.isString)(distance);
}).value() : {};
}), _define_property._(_this, "defaultTheme", _this.normaliseValues((0, _lodash.chain)(_defaultTheme.default.spacing).transform((0, _lodashtransformers.addDurationWithGravity)(), {}).mapValues(function(param) {
var distance = param.value, duration = param.duration;
return [
duration,
distance
];
}).value())), _define_property._(_this, "keyframes", function(param) {
var theme = param.theme;
var values = _this.normaliseValues(theme('bounce'));
var translateDeclarations = function(axis, value) {
var translateProperty = "translate".concat(axis.toUpperCase());
if (!_this.legacy) {
return {
translate: _translate.Translate.normaliseFunctionValues(_define_property._({}, translateProperty, value))
};
}
var transformValue = _transform.Transform.normaliseLegacyFunctionValues(_define_property._({}, translateProperty, value));
return {
'--webkit-transform': transformValue,
transform: transformValue
};
};
return (0, _lodash.chain)(values).transform((0, _lodashtransformers.axesModifier)(), {}).transform((0, _lodashtransformers.nameModifier)('bounce'), {}).transform((0, _lodashtransformers.signModifier)(), {}).mapValues(function(param) {
var _param_value = _sliced_to_array._(param.value, 2), _duration = _param_value[0], distance = _param_value[1], axis = param.axis, sign = param.sign;
return {
'0%, 100%': _object_spread_props._(_object_spread._({}, translateDeclarations(axis, "".concat(sign).concat(distance))), {
animationTimingFunction: 'cubic-bezier(0.5, 0, 1, 1)'
}),
'50%': _object_spread_props._(_object_spread._({}, translateDeclarations(axis, '0')), {
animationTimingFunction: 'cubic-bezier(0, 0, 0.5, 1)'
})
};
}).value();
}), _define_property._(_this, "animation", function(param) {
var theme = param.theme;
var values = _this.normaliseValues(theme('bounce'));
return (0, _lodash.chain)(values).transform((0, _lodashtransformers.axesModifier)(), {}).transform((0, _lodashtransformers.nameModifier)('bounce'), {}).transform((0, _lodashtransformers.signModifier)(), {}).mapValues(function(param, modifier) {
var _param_value = _sliced_to_array._(param.value, 1), duration = _param_value[0];
return "".concat(modifier, " ").concat(duration, " infinite");
}).value();
});
return _this;
}
return Bounce;
}(_base.Base);