@cqmcui/cqmcui
Version:
轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
76 lines (75 loc) • 2.52 kB
JavaScript
import { c as createComponent } from "./component-81a4c1d0.js";
import { h } from "vue";
import "../locale/lang";
const { componentName, create } = createComponent("config-provider");
const _sfc_main = create({
props: {
theme: { type: String, default: "" },
themeVars: { type: Object, default: {} },
tag: { type: String, default: "div" }
},
setup(props, { slots }) {
const kebabCase = (str) => {
str = str.replace(str.charAt(0), str.charAt(0).toLocaleLowerCase());
return str.replace(/([a-z])([A-Z])/g, (_, p1, p2) => p1 + "-" + p2.toLowerCase());
};
const colorRgb = (str) => {
if (!str)
return;
var sColor = str.toLowerCase();
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = "#";
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
}
sColor = sColorNew;
}
var sColorChange = [];
for (var i = 1; i < 7; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
}
return sColorChange.join(",");
}
return null;
};
const mapThemeVarsToCSSVars = (themeVars) => {
var _a;
if (!themeVars)
return;
const cssVars = {};
const primaryColor = (_a = props == null ? void 0 : props.themeVars) == null ? void 0 : _a.primaryColor;
if (primaryColor) {
cssVars[`--cqmc-address-region-tab-line`] = `linear-gradient(90deg, ${primaryColor} 0%, rgba(${colorRgb(
primaryColor
)},0.15) 100%) `;
cssVars[`--cqmc-tabs-horizontal-tab-line-color`] = `linear-gradient(90deg, ${primaryColor} 0%, rgba(${colorRgb(
primaryColor
)},0.15)100%)`;
cssVars[`--cqmc-tabs-vertical-tab-line-color`] = `linear-gradient(180deg, ${primaryColor} 0%, rgba(${colorRgb(
primaryColor
)},0.15) 100%) `;
}
Object.keys(themeVars).forEach((key) => {
cssVars[`--cqmc-${kebabCase(key)}`] = themeVars[key];
});
return cssVars;
};
return () => {
var _a;
const defaultSlots = (_a = slots.default) == null ? void 0 : _a.call(slots);
return h(
props.tag,
{
class: `cqmc-theme-${props.theme}`,
style: mapThemeVarsToCSSVars(props.themeVars)
},
defaultSlots
);
};
}
});
export {
_sfc_main as default
};