eewing
270 lines
10 KiB
JavaScript
270 lines
10 KiB
JavaScript
import { cx, isEmptyObject, mergeObjects, isEqual, joinObjects, flatMergeArrays, falsyToString } from './chunk-LQJYWU4O.js';
|
|
|
|
// src/config.js
|
|
var defaultConfig = {
|
|
twMerge: true,
|
|
twMergeConfig: {}
|
|
};
|
|
|
|
// src/state.js
|
|
function createState() {
|
|
let cachedTwMerge = null;
|
|
let cachedTwMergeConfig = {};
|
|
let didTwMergeConfigChange = false;
|
|
return {
|
|
get cachedTwMerge() {
|
|
return cachedTwMerge;
|
|
},
|
|
set cachedTwMerge(value) {
|
|
cachedTwMerge = value;
|
|
},
|
|
get cachedTwMergeConfig() {
|
|
return cachedTwMergeConfig;
|
|
},
|
|
set cachedTwMergeConfig(value) {
|
|
cachedTwMergeConfig = value;
|
|
},
|
|
get didTwMergeConfigChange() {
|
|
return didTwMergeConfigChange;
|
|
},
|
|
set didTwMergeConfigChange(value) {
|
|
didTwMergeConfigChange = value;
|
|
},
|
|
reset() {
|
|
cachedTwMerge = null;
|
|
cachedTwMergeConfig = {};
|
|
didTwMergeConfigChange = false;
|
|
}
|
|
};
|
|
}
|
|
var state = createState();
|
|
|
|
// src/core.js
|
|
var getTailwindVariants = (cn) => {
|
|
const tv = (options, configProp) => {
|
|
const {
|
|
extend = null,
|
|
slots: slotProps = {},
|
|
variants: variantsProps = {},
|
|
compoundVariants: compoundVariantsProps = [],
|
|
compoundSlots = [],
|
|
defaultVariants: defaultVariantsProps = {}
|
|
} = options;
|
|
const config = { ...defaultConfig, ...configProp };
|
|
const base = extend?.base ? cx(extend.base, options?.base) : options?.base;
|
|
const variants = extend?.variants && !isEmptyObject(extend.variants) ? mergeObjects(variantsProps, extend.variants) : variantsProps;
|
|
const defaultVariants = extend?.defaultVariants && !isEmptyObject(extend.defaultVariants) ? { ...extend.defaultVariants, ...defaultVariantsProps } : defaultVariantsProps;
|
|
if (!isEmptyObject(config.twMergeConfig) && !isEqual(config.twMergeConfig, state.cachedTwMergeConfig)) {
|
|
state.didTwMergeConfigChange = true;
|
|
state.cachedTwMergeConfig = config.twMergeConfig;
|
|
}
|
|
const isExtendedSlotsEmpty = isEmptyObject(extend?.slots);
|
|
const componentSlots = !isEmptyObject(slotProps) ? {
|
|
// add "base" to the slots object
|
|
base: cx(options?.base, isExtendedSlotsEmpty && extend?.base),
|
|
...slotProps
|
|
} : {};
|
|
const slots = isExtendedSlotsEmpty ? componentSlots : joinObjects(
|
|
{ ...extend?.slots },
|
|
isEmptyObject(componentSlots) ? { base: options?.base } : componentSlots
|
|
);
|
|
const compoundVariants = isEmptyObject(extend?.compoundVariants) ? compoundVariantsProps : flatMergeArrays(extend?.compoundVariants, compoundVariantsProps);
|
|
const component = (props) => {
|
|
if (isEmptyObject(variants) && isEmptyObject(slotProps) && isExtendedSlotsEmpty) {
|
|
return cn(base, props?.class, props?.className)(config);
|
|
}
|
|
if (compoundVariants && !Array.isArray(compoundVariants)) {
|
|
throw new TypeError(
|
|
`The "compoundVariants" prop must be an array. Received: ${typeof compoundVariants}`
|
|
);
|
|
}
|
|
if (compoundSlots && !Array.isArray(compoundSlots)) {
|
|
throw new TypeError(
|
|
`The "compoundSlots" prop must be an array. Received: ${typeof compoundSlots}`
|
|
);
|
|
}
|
|
const getVariantValue = (variant, vrs = variants, _slotKey = null, slotProps2 = null) => {
|
|
const variantObj = vrs[variant];
|
|
if (!variantObj || isEmptyObject(variantObj)) {
|
|
return null;
|
|
}
|
|
const variantProp = slotProps2?.[variant] ?? props?.[variant];
|
|
if (variantProp === null) return null;
|
|
const variantKey = falsyToString(variantProp);
|
|
if (typeof variantKey === "object") {
|
|
return null;
|
|
}
|
|
const defaultVariantProp = defaultVariants?.[variant];
|
|
const key = variantKey != null ? variantKey : falsyToString(defaultVariantProp);
|
|
const value = variantObj[key || "false"];
|
|
return value;
|
|
};
|
|
const getVariantClassNames = () => {
|
|
if (!variants) return null;
|
|
const keys = Object.keys(variants);
|
|
const result = [];
|
|
for (let i = 0; i < keys.length; i++) {
|
|
const value = getVariantValue(keys[i], variants);
|
|
if (value) result.push(value);
|
|
}
|
|
return result;
|
|
};
|
|
const getVariantClassNamesBySlotKey = (slotKey, slotProps2) => {
|
|
if (!variants || typeof variants !== "object") return null;
|
|
const result = [];
|
|
for (const variant in variants) {
|
|
const variantValue = getVariantValue(variant, variants, slotKey, slotProps2);
|
|
const value = slotKey === "base" && typeof variantValue === "string" ? variantValue : variantValue && variantValue[slotKey];
|
|
if (value) result.push(value);
|
|
}
|
|
return result;
|
|
};
|
|
const propsWithoutUndefined = {};
|
|
for (const prop in props) {
|
|
const value = props[prop];
|
|
if (value !== void 0) propsWithoutUndefined[prop] = value;
|
|
}
|
|
const getCompleteProps = (key, slotProps2) => {
|
|
const initialProp = typeof props?.[key] === "object" ? {
|
|
[key]: props[key]?.initial
|
|
} : {};
|
|
return {
|
|
...defaultVariants,
|
|
...propsWithoutUndefined,
|
|
...initialProp,
|
|
...slotProps2
|
|
};
|
|
};
|
|
const getCompoundVariantsValue = (cv = [], slotProps2) => {
|
|
const result = [];
|
|
const cvLength = cv.length;
|
|
for (let i = 0; i < cvLength; i++) {
|
|
const { class: tvClass, className: tvClassName, ...compoundVariantOptions } = cv[i];
|
|
let isValid = true;
|
|
const completeProps = getCompleteProps(null, slotProps2);
|
|
for (const key in compoundVariantOptions) {
|
|
const value = compoundVariantOptions[key];
|
|
const completePropsValue = completeProps[key];
|
|
if (Array.isArray(value)) {
|
|
if (!value.includes(completePropsValue)) {
|
|
isValid = false;
|
|
break;
|
|
}
|
|
} else {
|
|
if ((value == null || value === false) && (completePropsValue == null || completePropsValue === false))
|
|
continue;
|
|
if (completePropsValue !== value) {
|
|
isValid = false;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (isValid) {
|
|
if (tvClass) result.push(tvClass);
|
|
if (tvClassName) result.push(tvClassName);
|
|
}
|
|
}
|
|
return result;
|
|
};
|
|
const getCompoundVariantClassNamesBySlot = (slotProps2) => {
|
|
const compoundClassNames = getCompoundVariantsValue(compoundVariants, slotProps2);
|
|
if (!Array.isArray(compoundClassNames)) return compoundClassNames;
|
|
const result = {};
|
|
const cnFn = cn;
|
|
for (let i = 0; i < compoundClassNames.length; i++) {
|
|
const className = compoundClassNames[i];
|
|
if (typeof className === "string") {
|
|
result.base = cnFn(result.base, className)(config);
|
|
} else if (typeof className === "object") {
|
|
for (const slot in className) {
|
|
result[slot] = cnFn(result[slot], className[slot])(config);
|
|
}
|
|
}
|
|
}
|
|
return result;
|
|
};
|
|
const getCompoundSlotClassNameBySlot = (slotProps2) => {
|
|
if (compoundSlots.length < 1) return null;
|
|
const result = {};
|
|
const completeProps = getCompleteProps(null, slotProps2);
|
|
for (let i = 0; i < compoundSlots.length; i++) {
|
|
const {
|
|
slots: slots2 = [],
|
|
class: slotClass,
|
|
className: slotClassName,
|
|
...slotVariants
|
|
} = compoundSlots[i];
|
|
if (!isEmptyObject(slotVariants)) {
|
|
let isValid = true;
|
|
for (const key in slotVariants) {
|
|
const completePropsValue = completeProps[key];
|
|
const slotVariantValue = slotVariants[key];
|
|
if (completePropsValue === void 0 || (Array.isArray(slotVariantValue) ? !slotVariantValue.includes(completePropsValue) : slotVariantValue !== completePropsValue)) {
|
|
isValid = false;
|
|
break;
|
|
}
|
|
}
|
|
if (!isValid) continue;
|
|
}
|
|
for (let j = 0; j < slots2.length; j++) {
|
|
const slotName = slots2[j];
|
|
if (!result[slotName]) result[slotName] = [];
|
|
result[slotName].push([slotClass, slotClassName]);
|
|
}
|
|
}
|
|
return result;
|
|
};
|
|
if (!isEmptyObject(slotProps) || !isExtendedSlotsEmpty) {
|
|
const slotsFns = {};
|
|
if (typeof slots === "object" && !isEmptyObject(slots)) {
|
|
const cnFn = cn;
|
|
for (const slotKey in slots) {
|
|
slotsFns[slotKey] = (slotProps2) => {
|
|
const compoundVariantClasses = getCompoundVariantClassNamesBySlot(slotProps2);
|
|
const compoundSlotClasses = getCompoundSlotClassNameBySlot(slotProps2);
|
|
return cnFn(
|
|
slots[slotKey],
|
|
getVariantClassNamesBySlotKey(slotKey, slotProps2),
|
|
compoundVariantClasses ? compoundVariantClasses[slotKey] : void 0,
|
|
compoundSlotClasses ? compoundSlotClasses[slotKey] : void 0,
|
|
slotProps2?.class,
|
|
slotProps2?.className
|
|
)(config);
|
|
};
|
|
}
|
|
}
|
|
return slotsFns;
|
|
}
|
|
return cn(
|
|
base,
|
|
getVariantClassNames(),
|
|
getCompoundVariantsValue(compoundVariants),
|
|
props?.class,
|
|
props?.className
|
|
)(config);
|
|
};
|
|
const getVariantKeys = () => {
|
|
if (!variants || typeof variants !== "object") return;
|
|
return Object.keys(variants);
|
|
};
|
|
component.variantKeys = getVariantKeys();
|
|
component.extend = extend;
|
|
component.base = base;
|
|
component.slots = slots;
|
|
component.variants = variants;
|
|
component.defaultVariants = defaultVariants;
|
|
component.compoundSlots = compoundSlots;
|
|
component.compoundVariants = compoundVariants;
|
|
return component;
|
|
};
|
|
const createTV = (configProp) => {
|
|
return (options, config) => tv(options, config ? mergeObjects(configProp, config) : configProp);
|
|
};
|
|
return {
|
|
tv,
|
|
createTV
|
|
};
|
|
};
|
|
|
|
export { defaultConfig, getTailwindVariants, state };
|