vuetify-tailwind-utility-bridge
Version:
A Tailwind CSS plugin to bring Vuetify utility classes for autocomplete and migration use cases.
84 lines (83 loc) • 3.57 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.vuetifyPlugin = void 0;
const plugin_1 = __importDefault(require("tailwindcss/plugin"));
const vuetifyUtilities_1 = require("./generated/vuetifyUtilities");
exports.vuetifyPlugin = plugin_1.default.withOptions((options = {}) => {
return function ({ addUtilities }) {
// 既存のユーティリティ生成
vuetifyUtilities_1.vuetifyUtilities.forEach((util) => {
const props = util.props;
const className = props.class || util.key;
const property = props.property;
const values = props.values;
// typographyユーティリティの場合は特別扱い
if (util.key === 'typography' &&
typeof values === 'object' &&
values !== null) {
Object.entries(values).forEach(([k, v]) => {
if (typeof v === 'object' && v !== null) {
// font-familyが配列の場合はカンマ区切りに変換
const style = {};
Object.entries(v).forEach(([prop, val]) => {
if (Array.isArray(val)) {
style[prop] = val.join(', ');
}
else {
style[prop] = String(val);
}
});
addUtilities({
[`.${className}-${k}`]: style,
});
}
});
return;
}
if (className && property && values) {
const propList = property.split(' ');
if (typeof values === 'object' && values !== null) {
Object.entries(values).forEach(([k, v]) => {
const style = {};
propList.forEach((p) => {
style[p] = String(v);
});
if (k === 'null') {
addUtilities({
[`.${className}`]: style,
});
}
else {
addUtilities({
[`.${className}-${k}`]: style,
});
}
});
}
else if (typeof values === 'string') {
values.split(' ').forEach((val) => {
const style = {};
propList.forEach((p) => {
style[p] = val;
});
addUtilities({
[`.${className}-${val}`]: style,
});
});
}
}
});
// Vuetify Theme.colors からユーティリティ生成
if (options.theme?.colors) {
const colorUtils = {};
Object.entries(options.theme.colors).forEach(([key, value]) => {
colorUtils[`.text-${key}`] = { color: String(value) };
colorUtils[`.bg-${key}`] = { backgroundColor: String(value) };
});
addUtilities(colorUtils);
}
};
});