portalis-component
Version:
Component Library for Nuxt 3 using TailwindCSS
573 lines (565 loc) • 13.1 kB
JavaScript
import { defineNuxtModule, createResolver, installModule, addComponentsDir, useLogger } from '@nuxt/kit';
// -- Unbuild CommonJS Shims --
import __cjs_url__ from 'url';
import __cjs_path__ from 'path';
import __cjs_mod__ from 'module';
const __filename = __cjs_url__.fileURLToPath(import.meta.url);
const __dirname = __cjs_path__.dirname(__filename);
const require = __cjs_mod__.createRequire(import.meta.url);
const name = "portalis-component";
const version = "0.0.31";
const plugin = require("tailwindcss/plugin");
function uniq(...items) {
return [...new Set(items.flat())];
}
function useBase(theme, onEnter, onLeave = onEnter) {
const willChange = uniq(Object.keys(onEnter), Object.keys(onLeave));
return {
"&-enter-active, &-leave-active": {
transitionDuration: theme("transitionDuration.150"),
transitionTimingFunction: theme("transitionTimingFunction.out"),
transitionProperty: willChange.join(", "),
willChange: willChange.join(", ")
},
"&-enter, &-enter-from": onEnter,
"&-leave-to": onLeave
};
}
const Animation = plugin(
function({ addComponents, theme }) {
addComponents({
".fade": useBase(theme, { opacity: 0 }),
".zoom-in": useBase(
theme,
{
opacity: 0,
transform: "scale(0.95)"
},
{
opacity: 0,
transform: "scale(1.05)"
}
),
".zoom-out": useBase(
theme,
{
opacity: 0,
transform: "scale(1.05)"
},
{
opacity: 0,
transform: "scale(0.95)"
}
),
".slide-right": useBase(
theme,
{
opacity: 0,
transform: "translateX(-1.5rem)"
},
{
opacity: 0,
transform: "translateX(1.5rem)"
}
),
".slide-left": useBase(
theme,
{
opacity: 0,
transform: "translateX(1.5rem)"
},
{
opacity: 0,
transform: "translateX(-1.5rem)"
}
),
".slide-top": useBase(
theme,
{
opacity: 0,
transform: "translateY(1.5rem)"
},
{
opacity: 0,
transform: "translateY(-1.5rem)"
}
),
".slide-bottom": useBase(
theme,
{
opacity: 0,
transform: "translateY(-1.5rem)"
},
{
opacity: 0,
transform: "translateY(1.5rem)"
}
),
".slide-up": useBase(theme, {
opacity: 0,
transform: "translateY(1.5rem)"
}),
".slide-full-right": useBase(
theme,
{
opacity: 0,
transform: "translateX(-100%)"
},
{
opacity: 0,
transform: "translateX(100%)"
}
),
".slide-full-left": useBase(
theme,
{
opacity: 0,
transform: "translateX(100%)"
},
{
opacity: 0,
transform: "translateX(-100%)"
}
),
".slide-full-top": useBase(
theme,
{
opacity: 0,
transform: "translateY(100%)"
},
{
opacity: 0,
transform: "translateY(-100%)"
}
),
".slide-full-bottom": useBase(
theme,
{
opacity: 0,
transform: "translateY(-100%)"
},
{
opacity: 0,
transform: "translateY(100%)"
}
)
});
},
{ safelist: [{ pattern: /^(slide|zoom|fade)/ }] }
);
const tailwindPresets = {
theme: {
letterSpacing: {
tighter: "-0.4px",
tight: "-0.2px",
normal: "0",
wide: "0.2px",
wider: "0.4px",
widest: "0.8px"
},
lineHeight: {
none: 1,
tightest: 1.33,
tighter: 1.42,
tight: 1.45,
normal: 1.5,
wide: "normal"
},
fontWeight: {
inherit: "inherit",
thin: 100,
extralight: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900
},
colors: {
inherit: "inherit",
transparent: "transparent",
current: "currentColor",
base: {
black: "#000000",
white: "#ffffff"
},
gray: {
0: "#FBFCFD",
5: "#F4F5F7",
10: "#E6E7EB",
15: "#D9DDE3",
20: "#CBD1D8",
25: "#BEC5CF",
30: "#AFB7C3",
35: "#A0ABB9",
40: "#939EAE",
45: "#8390A3",
50: "#728196",
55: "#647184",
60: "#5B6778",
65: "#525D6C",
70: "#495260",
75: "#414955",
80: "#383F4A",
85: "#30363F",
90: "#272C33",
95: "#1F2329",
100: "#191C21"
},
blue: {
milk: "#F5FAFF",
0: "#E5F3FF",
10: "#ADD9FF",
20: "#75C0FF",
30: "#3DA6FF",
40: "#008AFF",
50: "#0075D9",
60: "#0061B3",
70: "#004C8C",
80: "#003766",
90: "#002340",
100: "#001526"
},
green: {
milk: "#F7FDF8",
0: "#EAF9EE",
10: "#BEEDCA",
20: "#91E1A5",
30: "#65D481",
40: "#34C759",
50: "#2CA94C",
60: "#248C3E",
70: "#1D6D31",
80: "#155024",
90: "#0D3216",
100: "#081E0D"
},
lightblue: {
milk: "#F5FDFF",
0: "#E5FAFF",
10: "#ADF0FF",
20: "#75E6FF",
30: "#3DDCFF",
40: "#00D1FF",
50: "#00B2D9",
60: "#0093B3",
70: "#00738C",
80: "#005466",
90: "#003440",
100: "#001F26"
},
orange: {
milk: "#FFFBF5",
0: "#FFF5E5",
10: "#FFE0AD",
20: "#FFCA75",
30: "#FFB53D",
40: "#FF9E00",
50: "#D98600",
60: "#B36F00",
70: "#8C5700",
80: "#663F00",
90: "#402800",
100: "#261800"
},
red: {
milk: "#FEF7F7",
0: "#FCEAE9",
10: "#F6BCBB",
20: "#F08E8D",
30: "#EA605E",
40: "#E42E2C",
50: "#C22725",
60: "#9F201F",
70: "#7D1918",
80: "#5B1212",
90: "#390C0B",
100: "#220707"
},
gold: {
milk: "#FFFCF5",
0: "#FFF7E5",
10: "#FFE7AD",
20: "#FFD675",
30: "#FFC63D",
40: "#FFB400",
50: "#D99900",
60: "#B37E00",
70: "#8C6300",
80: "#664800",
90: "#402D00",
100: "#261B00"
},
yellow: {
milk: "#FFFDF5",
0: "#FFFBE5",
10: "#FFF2AD",
20: "#FFE975",
30: "#FFE13D",
40: "#FFD700",
50: "#D9B700",
60: "#B39700",
70: "#8C7600",
80: "#665600",
90: "#403600",
100: "#262000"
},
lime: {
milk: "#FBFFF5",
0: "#F6FFE5",
10: "#E1FFAD",
20: "#CDFF75",
30: "#B9FF3D",
40: "#A3FF00",
50: "#8BD900",
60: "#72B300",
70: "#598C00",
80: "#416600",
90: "#294000",
100: "#182600"
},
teal: {
milk: "#F5FDFC",
0: "#E5F9F6",
10: "#ADEDE3",
20: "#75E1D0",
30: "#3DD4BE",
40: "#00C7A9",
50: "#00A990",
60: "#008C77",
70: "#006D5D",
80: "#005044",
90: "#00322A",
100: "#001E19"
},
purple: {
milk: "#FAF5FF",
0: "#F2E5FF",
10: "#D6ADFF",
20: "#BA75FF",
30: "#9E3DFF",
40: "#8000FF",
50: "#6D00D9",
60: "#5A00B3",
70: "#46008C",
80: "#330066",
90: "#200040",
100: "#130026"
},
violet: {
milk: "#FBF5FF",
0: "#F5E5FF",
10: "#DFADFF",
20: "#C975FF",
30: "#B33DFF",
40: "#9B00FF",
50: "#8400D9",
60: "#6D00B3",
70: "#55008C",
80: "#3E0066",
90: "#270040",
100: "#170026"
},
pink: {
milk: "#FEF7FF",
0: "#FEEBFF",
10: "#FBC0FF",
20: "#F895FF",
30: "#F56AFF",
40: "#F23BFF",
50: "#CE32D9",
60: "#AA29B3",
70: "#85208C",
80: "#611866",
90: "#3D0F40",
100: "#240926"
}
},
borderRadius: {
"none": 0,
"tn": "4px",
"xs": "6px",
"sm": "7px",
"DEFAULT": "8px",
"md": "12px",
"lg": "14px",
"xl": "16px",
"2xl": "20px",
"3xl": "22px",
"full": "999999px"
},
opacity: {
0: 0,
3: 0.03,
5: 0.05,
10: 0.1,
15: 0.15,
20: 0.2,
25: 0.25,
30: 0.3,
35: 0.35,
40: 0.4,
45: 0.45,
50: 0.5,
55: 0.55,
60: 0.6,
65: 0.65,
70: 0.7,
75: 0.75,
80: 0.8,
85: 0.85,
90: 0.9,
95: 0.95,
100: 1
},
extend: {
colors: {
brand: {
DEFAULT: "#9B283D",
dark: "#691222"
},
base: {
error: "#d4351c"
},
link: {
DEFAULT: "#1d70b8",
hover: "#003078",
visited: "#4c2c92",
active: "#0b0c0c"
},
focus: {
DEFAULT: "#ffdd00"
},
other: {
dark: {
green: "#005a30",
red: "#aa2a16",
blue: "#003078",
grey: "#505a5Ff"
},
light: {
green: "#85994b",
purple: "#6f72af",
blue: "#5694ca",
grey: "#f3f2f1",
pink: "#f499be"
},
green: "#00703c",
red: "#D4351C",
yellow: "#ffdd00",
blue: "#1d70b8",
purple: "#4c2c92",
black: "#0b0c0c",
grey: "#b1b4b6",
white: "#ffffff",
pink: "#d53880",
orange: "#f47738",
brown: "#b58840",
turquoise: "#28a197"
},
miscellaneous: {
"browser-border": "#8d8c8a",
"browser-link": "#5a97f8",
"navigation-link": "#1d8feb"
}
},
textColor: {
primary: "#0b0c0c",
secondary: "#505a5f",
grey: "#383f43",
green: "#005a30",
turquoise: "#10403c",
blue: "#144e81",
purple: "#3d2375",
pink: "#80224d",
red: "#942514",
orange: "#6e3619",
yellow: "#594d00",
focus: "#0b0c0c"
},
backgroundColor: {
DEFAULT: "#ffffff",
grey: "#eeefef",
green: "#cce2d8",
turquoise: "#bfe3e0",
blue: "#d2e2f1",
purple: "#dBd5e9",
pink: "#F7d7e6",
red: "#f6d7d2",
orange: "#fCd6c3",
yellow: "#fff7bf",
extended: "#FCFBF9"
},
borderColor: {
default: "#b1b4b6",
subtle: "#e7e7e7",
input: "#0b0c0c"
}
}
}
};
function portalLog(logActive, message, type = "info") {
if (logActive || type === "error" || type === "warn") {
const logger = useLogger("portalis");
if (type === "info")
logger.info(message);
if (type === "success")
logger.success(message);
if (type === "warn")
logger.warn(message);
if (type === "error")
logger.error(message);
}
}
const module = defineNuxtModule({
meta: {
name,
version,
configKey: "portalis",
compatibility: {
nuxt: "^3.0.0"
}
},
// Default configuration options of the Nuxt module
defaults: {
prefix: "Portalis-",
global: false,
debugLog: false
},
async setup(_options, _nuxt) {
portalLog(_options.debugLog, "Setting up Portalis Module");
const resolver = createResolver(import.meta.url);
const runtimeDir = resolver.resolve("./runtime");
_nuxt.options.build.transpile.push(runtimeDir);
_nuxt.options.alias["#portalis"] = runtimeDir;
_nuxt.options.postcss.plugins = {
"postcss-lighten-darken": {},
"autoprefixer": {},
"tailwindcss/nesting": {},
"tailwindcss": {}
};
portalLog(_options.debugLog, "Installing @nuxtjs/color-mode module");
await installModule("@nuxtjs/color-mode", { classSuffix: "" });
portalLog(_options.debugLog, "Installing @nuxtjs/icon module");
await installModule("@nuxt/icon");
portalLog(_options.debugLog, "Installing @nuxtjs/tailwindcss module");
await installModule("@nuxtjs/tailwindcss", {
config: {
plugins: [Animation],
presets: [tailwindPresets]
}
});
portalLog(_options.debugLog, "Calling tailwindcss:config hook");
portalLog(_options.debugLog, "Adding components directory");
addComponentsDir({
prefix: _options.prefix,
path: resolver.resolve(runtimeDir, "components"),
global: _options.global,
extensions: ["vue"]
});
portalLog(true, "Portalis Module setup complete", "success");
}
});
export { module as default };