@nuxtwind/components
Version:
Component Library for Nuxt 3 using TailwindCSS
94 lines (93 loc) • 4.3 kB
JavaScript
import buttonDefaults from "../defaults/button.js";
import badgeDefaults from "../defaults/badge.js";
import appbarDefaults from "../defaults/appbar.js";
import carouselDefaults from "../defaults/carousel.js";
import checkboxDefaults from "../defaults/checkbox.js";
import checkboxgroupDefaults from "../defaults/checkboxgroup.js";
import drawerDefaults from "../defaults/drawer.js";
import progressDefaults from "../defaults/progress.js";
import selectDefaults from "../defaults/select.js";
import skeletonDefaults from "../defaults/skeleton.js";
import sliderDefaults from "../defaults/slider.js";
import textareaDefaults from "../defaults/textarea.js";
import textfieldDefaults from "../defaults/textfield.js";
import toastDefaults from "../defaults/toast.js";
import tooltipDefaults from "../defaults/tooltip.js";
import { useRuntimeConfig } from "#app";
const booleanOnlyProps = {
button: /* @__PURE__ */ new Set(["disabled", "icon", "loading", "dense"]),
badge: /* @__PURE__ */ new Set(["top", "bottom", "right", "left"]),
appbar: /* @__PURE__ */ new Set(["fixed", "absolute", "sticky", "bottom", "extension", "shrinkOnScroll", "elevateOnScroll", "navigationIcon"]),
carousel: /* @__PURE__ */ new Set(["autoPlay", "disableAutoPlayOnHover", "hideNavigation", "hidePagination"]),
checkbox: /* @__PURE__ */ new Set(["radio", "disabled", "loading"]),
checkboxgroup: /* @__PURE__ */ new Set(["multiple", "noRadio", "loading", "disabled", "notZero"]),
drawer: /* @__PURE__ */ new Set(["absolute", "fixed", "overlay", "disableOverflow", "noMobile", "right", "permanent"]),
progress: /* @__PURE__ */ new Set(["loading"]),
select: /* @__PURE__ */ new Set(["search", "markOnFocus", "showAllOnFocus", "disabled", "loading", "clearable"]),
skeleton: /* @__PURE__ */ new Set(["loading", "autoDetectRootTag"]),
slider: /* @__PURE__ */ new Set(["disabled"]),
// No boolean-only props for slider
textarea: /* @__PURE__ */ new Set(["disabled", "loading", "counter"]),
textfield: /* @__PURE__ */ new Set(["disabled", "loading", "clearable"]),
toast: /* @__PURE__ */ new Set(["autoClose"]),
tooltip: /* @__PURE__ */ new Set(["top", "bottom", "left", "right", "interactive"])
// Future components can be added here
};
function deepMerge(target, source, componentName) {
const result = { ...target };
const booleanOnlySet = booleanOnlyProps[componentName];
for (const key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
const sourceValue = source[key];
const targetValue = result[key];
if (sourceValue === void 0) {
continue;
}
if (typeof sourceValue === "boolean") {
if (booleanOnlySet.has(key)) {
result[key] = sourceValue;
} else {
if (sourceValue === false) {
result[key] = "";
} else {
result[key] = targetValue;
}
}
} else if (sourceValue !== null && typeof sourceValue === "object" && !Array.isArray(sourceValue) && targetValue !== null && typeof targetValue === "object" && !Array.isArray(targetValue)) {
result[key] = deepMerge(targetValue, sourceValue, componentName);
} else {
result[key] = sourceValue;
}
}
}
return result;
}
const defaultsRegistry = {
button: buttonDefaults,
badge: badgeDefaults,
appbar: appbarDefaults,
carousel: carouselDefaults,
checkbox: checkboxDefaults,
checkboxgroup: checkboxgroupDefaults,
drawer: drawerDefaults,
progress: progressDefaults,
select: selectDefaults,
skeleton: skeletonDefaults,
slider: sliderDefaults,
textarea: textareaDefaults,
textfield: textfieldDefaults,
toast: toastDefaults,
tooltip: tooltipDefaults
// Future components can be added here
};
export default function useComponentConfig(componentName, props) {
const defaults = defaultsRegistry[componentName];
if (!defaults) {
throw new Error(`No defaults found for component: ${componentName}`);
}
const runtimeConfig = useRuntimeConfig();
const userConfig = runtimeConfig.public.nuxtwind || {};
const componentUserConfig = userConfig[componentName] || {};
const mergedWithUserConfig = deepMerge(defaults, componentUserConfig, componentName);
return deepMerge(mergedWithUserConfig, props || {}, componentName);
}