vite-unocss-kviewui
Version:
基于unocss[https://github.com/unocss/unocss]引擎的kviewui vite插件
272 lines (262 loc) • 14.1 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('unocss/vite'), require('kviewui-color/main')) :
typeof define === 'function' && define.amd ? define(['exports', 'unocss/vite', 'kviewui-color/main'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["vite-unocss-kviewui"] = {}, global.Unocss, global.main));
})(this, (function (exports, Unocss, main) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var Unocss__default = /*#__PURE__*/_interopDefaultLegacy(Unocss);
// 定义margin基础样式推导公示函数
const mt = function (d, baseUnit) { return { 'margin-top': `${parseInt(d) * baseUnit}rpx` }; };
const mb = function (d, baseUnit) { return { 'margin-bottom': `${parseInt(d) * baseUnit}rpx` }; };
const ml = function (d, baseUnit) { return { 'margin-left': `${parseInt(d) * baseUnit}rpx` }; };
const mr = function (d, baseUnit) { return { 'margin-right': `${parseInt(d) * baseUnit}rpx` }; };
// 定义padding基础样式推导公示函数
const pt = function (d, baseUnit) { return { 'padding-top': `${parseInt(d) * baseUnit}rpx` }; };
const pb = function (d, baseUnit) { return { 'padding-bottom': `${parseInt(d) * baseUnit}rpx` }; };
const pl = function (d, baseUnit) { return { 'padding-left': `${parseInt(d) * baseUnit}rpx` }; };
const pr = function (d, baseUnit) { return { 'padding-right': `${parseInt(d) * baseUnit}rpx` }; };
var baseUnit = 1;
var baseLineHeight = 1.4;
/**
* @description 基于unocss[https://github.com/unocss/unocss]引擎的kviewui vite插件
* @author kviewui
* @url
*/
const getPresetColors = main.kviewUIColor.getPresetColors();
const kViewUI = () => {
return Unocss__default["default"]({
// presets: [],
rules: [
/**
* 自动样式推导
*/
// margin
[/^m-(\d+)$/, ([, d]) => (Object.assign(mt(d, baseUnit), mr(d, baseUnit), mb(d, baseUnit), ml(d, baseUnit)))],
[/^mt-(\d+)$/, ([, d]) => (mt(d, baseUnit))],
[/^mb-(\d+)$/, ([, d]) => (mb(d, baseUnit))],
[/^ml-(\d+)$/, ([, d]) => (ml(d, baseUnit))],
[/^mr-(\d+)$/, ([, d]) => (mr(d, baseUnit))],
[/^mx-(\d+)$/, ([, d]) => (Object.assign(ml(d, baseUnit), mr(d, baseUnit)))],
[/^my-(\d+)$/, ([, d]) => (Object.assign(mt(d), mb(d)))],
// padding
[/^p-(\d+)$/, ([, d]) => (Object.assign(pt(d), pr(d), pb(d), pl(d)))],
[/^pt-(\d+)$/, ([, d]) => (pt(d))],
[/^pb-(\d+)$/, ([, d]) => (pb(d))],
[/^pl-(\d+)$/, ([, d]) => (pl(d))],
[/^pr-(\d+)$/, ([, d]) => (pr(d))],
[/^px-(\d+)$/, ([, d]) => (Object.assign(pl(d), pr(d)))],
[/^py-(\d+)$/, ([, d]) => (Object.assign(pt(d), pb(d)))],
// 字体大小
[/^text-(.*)$/, ([, s], { theme }) => {
if (theme.fonts.size[s])
return { 'font-size': `${theme.fonts.size[s]}rpx`, 'line-height': `${theme.fonts.size[s] * baseLineHeight}rpx` };
}],
/**
* 调色板
*
* 亮色模式
*/
// 品牌色
[/^(.*)-(.*)-(.*)$/, ([, prefix, type, c], { theme }) => {
if (theme.colors.light[type]) {
const colorVal = theme.colors.light[type][c];
if (prefix === 'color' && colorVal)
return { color: `${colorVal}` };
if (prefix === 'bg' && colorVal)
return { 'background-color': `${colorVal}` };
}
}],
// 中性色
[/^(.*)-neutral-(.*)$/, ([, prefix, c], { theme }) => {
if (c.indexOf('-') > -1) {
const _b = c.split('-')[0];
const _a = c.split('-')[1];
if (theme.colors.light.neutral[_b])
if (prefix === 'color')
return { color: `${theme.colors.light.neutral[_b][_a]}` };
if (prefix === 'bg')
return { 'background-color': `${theme.colors.light.neutral[_b][_a]}` };
}
}],
/**
* 调色板
*
* 暗色模式
*/
// 品牌色
[/^(.*)-(.*)-(.*)$/, ([, prefix, type, c], { theme }) => {
if (theme.colors.dark[type] && c.indexOf(':dark') > -1) {
const colorVal = theme.colors.dark[type][c.split(':')[0]];
if (prefix === 'color' && colorVal)
return { color: `${colorVal}` };
if (prefix === 'bg' && colorVal)
return { 'background-color': `${colorVal}` };
}
}],
// 中性色
[/^(.*)-neutral-(.*):dark$/, ([, prefix, c], { theme }) => {
if (c.indexOf('-') > -1) {
const _b = c.split('-')[0];
const _a = c.split('-')[1];
if (theme.colors.dark.neutral[_b])
if (prefix === 'color')
return { color: `${theme.colors.dark.neutral[_b][_a]}` };
if (prefix === 'bg')
return { 'background-color': `${theme.colors.dark.neutral[_b][_a]}` };
}
else {
if (theme.colors.dark.neutral[c])
if (prefix === 'color')
return { color: `${theme.colors.dark.neutral[c]}` };
if (prefix === 'bg')
return { 'background-color': `${theme.colors.dark.neutral[c]}` };
}
}],
/**
* 功能色
*
*/
[/^(.*)-(.*)-(.*)$/, ([, prefix, type, c], { theme }) => {
const infoType = theme.colors.info[type];
if (infoType) {
if (prefix === 'color')
return { color: `${infoType[c]}` };
if (prefix === 'bg')
return { 'background-color': `${infoType[c]}` };
}
}],
],
// 默认主题
theme: {
// 字号
fonts: {
size: {
'xs': '24',
'sm': '26',
'base': '28',
'lg': '32',
'xl': '40',
'2xl': '48',
'3xl': '72',
'4xl': '96',
'5xl': '112'
}
},
/**
* 调色板
*/
colors: {
// 亮色
light: {
// 品牌色
brand: {
// 主色
primary: getPresetColors['blue']['light'][5],
1: getPresetColors['blue']['light'][1],
2: getPresetColors['blue']['light'][2],
3: getPresetColors['blue']['light'][3],
4: getPresetColors['blue']['light'][4],
5: getPresetColors['blue']['light'][5],
6: getPresetColors['blue']['light'][6],
7: getPresetColors['blue']['light'][7]
},
// 中性色
neutral: {
// 线条色
line: getPresetColors['gray']['light'][3],
// 填充色
fill: {
normal: getPresetColors['gray']['light'][2],
1: getPresetColors['gray']['light'][1],
2: getPresetColors['gray']['light'][2],
3: getPresetColors['gray']['light'][3],
4: getPresetColors['gray']['light'][4],
8: getPresetColors['gray']['light'][8]
}
},
},
// 暗色
dark: {
// 品牌色
brand: {
// 主色
primary: getPresetColors['green']['dark'][6],
1: getPresetColors['green']['dark'][1],
2: getPresetColors['green']['dark'][2],
3: getPresetColors['green']['dark'][3],
4: getPresetColors['green']['dark'][4],
5: getPresetColors['green']['dark'][5],
6: getPresetColors['green']['dark'][6],
7: getPresetColors['green']['dark'][7]
},
// 中性色
neutral: {
// 线条色
line: getPresetColors['gray']['dark'][3],
// 填充色
fill: {
normal: getPresetColors['gray']['dark'][2],
1: getPresetColors['gray']['dark'][1],
2: getPresetColors['gray']['dark'][2],
3: getPresetColors['gray']['dark'][3],
4: getPresetColors['gray']['dark'][4],
8: getPresetColors['gray']['dark'][8]
}
}
},
/**
* 功能色
*/
info: {
// 成功色 Success
success: {
normal: getPresetColors['green']['light'][5],
1: getPresetColors['green']['light'][1],
2: getPresetColors['green']['light'][2],
3: getPresetColors['green']['light'][3],
4: getPresetColors['green']['light'][4],
5: getPresetColors['green']['light'][5],
6: getPresetColors['green']['light'][6],
7: getPresetColors['green']['light'][7]
},
// 警告色 Warning
warning: {
normal: getPresetColors['orangered']['light'][5],
1: getPresetColors['orangered']['light'][1],
2: getPresetColors['orangered']['light'][2],
3: getPresetColors['orangered']['light'][3],
4: getPresetColors['orangered']['light'][4],
5: getPresetColors['orangered']['light'][5],
6: getPresetColors['orangered']['light'][6],
7: getPresetColors['orangered']['light'][7]
},
// 错误色 Error
error: {
normal: getPresetColors['red']['light'][5],
1: getPresetColors['red']['light'][1],
2: getPresetColors['red']['light'][2],
3: getPresetColors['red']['light'][3],
4: getPresetColors['red']['light'][4],
5: getPresetColors['red']['light'][5],
6: getPresetColors['red']['light'][6],
7: getPresetColors['red']['light'][7]
},
// 链接色 Link
link: {
normal: getPresetColors['blue']['light'][5],
1: getPresetColors['blue']['light'][1],
2: getPresetColors['blue']['light'][2],
3: getPresetColors['blue']['light'][3],
4: getPresetColors['blue']['light'][4],
5: getPresetColors['blue']['light'][5],
6: getPresetColors['blue']['light'][6],
7: getPresetColors['blue']['light'][7]
}
}
},
}
});
};
exports.kViewUI = kViewUI;
Object.defineProperty(exports, '__esModule', { value: true });
}));