@amaui/style
Version:
CSS in JS styling solution
200 lines (199 loc) • 8.01 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const copy_1 = __importDefault(require("@amaui/utils/copy"));
const element_1 = __importDefault(require("@amaui/utils/element"));
const isEnvironment_1 = __importDefault(require("@amaui/utils/isEnvironment"));
const merge_1 = __importDefault(require("@amaui/utils/merge"));
const try_1 = __importDefault(require("@amaui/utils/try"));
const subscription_1 = __importDefault(require("@amaui/subscription"));
const meta_1 = __importDefault(require("@amaui/meta"));
const AmauiStyleRenderer_1 = __importDefault(require("./AmauiStyleRenderer"));
const utils_1 = require("./utils");
const optionsDefault = {
mode: 'regular',
rule: {
sort: true,
prefix: true,
rtl: false,
},
minify: true,
optimize: false,
classNamePrefix: ''
};
class AmauiStyle {
constructor(options = (0, copy_1.default)(optionsDefault)) {
this.options = options;
this.mode = 'regular';
this.subscriptions = {
className: {
pre: new subscription_1.default(),
name: new subscription_1.default(),
post: new subscription_1.default(),
},
keyframes: {
pre: new subscription_1.default(),
name: new subscription_1.default(),
post: new subscription_1.default(),
},
rule: {
pre: new subscription_1.default(),
unit: new subscription_1.default(),
value: new subscription_1.default(),
prefix: new subscription_1.default(),
rtl: new subscription_1.default(),
add: new subscription_1.default(),
update: new subscription_1.default(),
update_props: new subscription_1.default(),
remove: new subscription_1.default(),
post: new subscription_1.default(),
},
rules: {
sort: new subscription_1.default(),
},
sheet: {
add: new subscription_1.default(),
update: new subscription_1.default(),
update_props: new subscription_1.default(),
remove: new subscription_1.default(),
},
sheet_manager: {
add: new subscription_1.default(),
update: new subscription_1.default(),
update_props: new subscription_1.default(),
remove: new subscription_1.default(),
},
};
this.values = {
css: '',
};
this.refs = {};
this.sheets = [];
this.sheet_managers = [];
this.options = (0, merge_1.default)(options, optionsDefault, { copy: true });
this.init();
}
get response() {
this.values.css = ``;
this.sheets.forEach(sheet => {
const css = sheet.css;
if (css) {
this.values.css += css;
}
});
if (this.values.css)
this.values.css = `\n${this.values.css}\n`;
if (this.options.minify)
this.values.css = (0, utils_1.minify)(this.values.css);
return this.values;
}
get css() {
return this.response.css;
}
get plugins() {
const amauiStyle = this;
return {
// Add plugins
set add(value_) {
const value = ((0, utils_1.is)('array', value_) ? value_ : [value_]);
value
.filter(item => (((0, utils_1.is)('object', item) &&
((0, utils_1.is)('function', item.method) &&
!meta_1.default.get(item.method, amauiStyle, 'plugin'))) ||
((0, utils_1.is)('function', item) &&
!meta_1.default.get(item, amauiStyle, 'plugin'))))
.forEach(item => {
try {
const method = (0, utils_1.is)('function', item) ? item : item.method;
const args = (0, utils_1.is)('object', item) ? item.arguments : [];
const response = method(amauiStyle, ...args);
meta_1.default.add(method, response, amauiStyle, 'plugin');
}
catch (error) {
console.error('AmauiStyle use: ', error);
}
});
},
// Remove plugins
set remove(value_) {
const value = ((0, utils_1.is)('array', value_) ? value_ : [value_]);
value
.filter(item => (((0, utils_1.is)('object', item) &&
((0, utils_1.is)('function', item.method) &&
!meta_1.default.get(item.method, amauiStyle, 'plugin'))) ||
((0, utils_1.is)('function', item) &&
!meta_1.default.get(item, amauiStyle, 'plugin'))))
.forEach(item => {
try {
const method = (0, utils_1.is)('function', item) ? item : item.method;
const response = meta_1.default.get(method, amauiStyle, 'plugin');
if ((0, utils_1.is)('function', response === null || response === void 0 ? void 0 : response.remove))
response.remove();
}
catch (error) {
console.error('AmauiStyle remove plugin: ', error);
}
});
}
};
}
init() {
// Options
this.element = this.options.element || this.element;
this.mode = this.options.mode || 'regular';
this.renderer = this.options.renderer || new AmauiStyleRenderer_1.default();
if (this.id === undefined)
this.id = (0, utils_1.getID)();
if ((0, isEnvironment_1.default)('browser')) {
if (!this.element)
this.element = window.document.body;
// AmauiStyle in element
this.element.setAttribute('data-amaui-style', 'true');
this.element['amaui-style'] = true;
this.element.amaui_style = this;
// Ltr
const style = (0, try_1.default)(() => window.getComputedStyle(this.element));
this.direction = (style === null || style === void 0 ? void 0 : style.direction) || (0, try_1.default)(() => window.getComputedStyle(document.documentElement).direction) || 'ltr';
this.options.rule.rtl = this.direction === 'rtl';
}
}
static get(value, index = 0) {
const themes = this.all(value);
return themes[index === -1 ? themes.length - 1 : index];
}
static first(value) {
return this.get(value);
}
static last(value) {
return this.get(value, -1);
}
static nearest(value) {
var _a;
return (_a = (0, element_1.default)(value).nearest(this.attributes.map(item => `[${item}]`))) === null || _a === void 0 ? void 0 : _a.amaui_style;
}
static furthest(value) {
var _a;
return (_a = (0, element_1.default)(value).furthest(this.attributes.map(item => `[${item}]`))) === null || _a === void 0 ? void 0 : _a.amaui_style;
}
static all(value) {
const elements = [
value,
...(0, element_1.default)(value).parents(this.attributes.map(item => `[${item}]`)),
];
return elements
.filter(Boolean)
.map((item) => item.amaui_style)
.filter(Boolean) || [];
}
}
AmauiStyle.counter = {
className: 0,
keyframesName: 0
};
AmauiStyle.attributes = [
'data-amaui-style',
'amaui-style'
];
exports.default = AmauiStyle;