tailwindcss-3d/css-animations/spin.js

Add 3D transforms to your TailwindCSS project

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Spin", {
    enumerable: true,
    get: function() {
        return Spin;
    }
});
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 _lodash = require("lodash");
var _defaultTheme = /*#__PURE__*/ _interop_require_default._(require("tailwindcss/defaultTheme"));
var _base = require("./base");
var _transform = require("../css-utilities/transform");
var _cssvalue = require("../utils/css-value");
var _generateguard = require("../utils/generate-guard");
var _lodashtransformers = require("../utils/lodash-transformers");
var Spin = /*#__PURE__*/ function(Base) {
    "use strict";
    _inherits._(Spin, Base);
    function Spin() {
        _class_call_check._(this, Spin);
        var _this;
        _this = _call_super._(this, Spin, arguments), _define_property._(_this, "isProcessableValue", (0, _generateguard.generateGuard)(_lodash.isString, _lodash.isUndefined)), _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(_duration, modifier) {
                return (0, _cssvalue.normaliseNumberValue)(modifier);
            }).mapValues(function(duration) {
                return (0, _cssvalue.normaliseTimeValue)(duration);
            }).pickBy(function(duration, modifier) {
                return (0, _lodash.isString)(modifier) && modifier !== '' && (0, _lodash.isString)(duration);
            }).value() : {};
        }), _define_property._(_this, "defaultTheme", _this.normaliseValues((0, _lodash.mapValues)(_defaultTheme.default.spacing, function(_spacing, modifier) {
            return "".concat(modifier, "s");
        }))), _define_property._(_this, "xyKeyframes", function() {
            var rotateDeclarations = function(axis, value) {
                var rotateProperty = "rotate".concat(axis.toUpperCase());
                var transformValue = _this.legacy ? _transform.Transform.normaliseLegacyFunctionValues(_define_property._({}, rotateProperty, value)) : _transform.Transform.normaliseFunctionValues(_define_property._({}, rotateProperty, value));
                return {
                    '--webkit-transform': transformValue,
                    transform: transformValue
                };
            };
            return (0, _lodash.chain)({
                '1': ''
            }).transform((0, _lodashtransformers.axesModifier)([
                'x',
                'y'
            ]), {}).transform((0, _lodashtransformers.nameModifier)('spin'), {}).transform((0, _lodashtransformers.signModifier)(), {}).mapValues(function(param) {
                var axis = param.axis, sign = param.sign;
                return {
                    from: _object_spread._({}, rotateDeclarations(axis, '0deg')),
                    to: _object_spread._({}, rotateDeclarations(axis, "".concat(sign, "360deg")))
                };
            }).value();
        }), _define_property._(_this, "zKeyframes", function() {
            var rotateDeclarations = function(value) {
                if (!_this.legacy) {
                    return {
                        rotate: value
                    };
                }
                var transformValue = _transform.Transform.normaliseLegacyFunctionValues({
                    rotateZ: value
                });
                return {
                    '--webkit-transform': transformValue,
                    transform: transformValue
                };
            };
            return (0, _lodash.chain)({
                '1': ''
            }).transform((0, _lodashtransformers.axesModifier)('z'), {}).transform((0, _lodashtransformers.nameModifier)('spin'), {}).transform((0, _lodashtransformers.signModifier)(), {}).mapValues(function(param) {
                var sign = param.sign;
                return {
                    from: _object_spread._({}, rotateDeclarations('0deg')),
                    to: _object_spread._({}, rotateDeclarations("".concat(sign, "360deg")))
                };
            }).value();
        }), _define_property._(_this, "keyframes", function() {
            return _object_spread._({}, _this.xyKeyframes(), _this.zKeyframes());
        }), _define_property._(_this, "animation", function(param) {
            var theme = param.theme;
            var values = _this.normaliseValues(theme('spin'));
            return (0, _lodash.chain)(values).transform((0, _lodashtransformers.axesModifier)(), {}).transform((0, _lodashtransformers.nameModifier)('spin'), {}).transform((0, _lodashtransformers.signModifier)(), {}).mapValues(function(param) {
                var value = param.value, axis = param.axis, name = param.name, sign = param.sign;
                return "".concat(sign).concat(name, "-").concat(axis, " ").concat(value, " linear infinite");
            }).value();
        });
        return _this;
    }
    return Spin;
}(_base.Base);