moulify 1.0.0 → 1.0.3

package/README.md

@@ -34,6 +34,25 @@ export default defineNuxtConfig({
 })
 ```
 
+You can also use a config file in the project root. Create `.moulifyrc` or `.moulifyrc.json` (JSON). Options from `nuxt.config.ts` override the file.
+
+```json
+{
+  "primaryColor": "#fafafa"
+}
+```
+
+Or in `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['moulify'],
+  moulify: {
+    primaryColor: '#fafafa',
+  },
+})
+```
+
 Use the button in any page or component:
 
 ```vue
@@ -42,6 +61,65 @@ Use the button in any page or component:
 </template>
 ```
 
+## SCSS helpers
+
+The module provides a SCSS helpers file you can import in your app.
+
+**Path** (from your project, e.g. in `nuxt.config.ts` via `vite.css.preprocessorOptions.scss.additionalData` or in any component):
+
+- When developing the module: `moulify/src/runtime/assets/scss/helpers`
+- From `node_modules`: ensure the package exposes this path or copy the file into your app’s `assets/scss`.
+
+### 1. `rem($pixels)`
+
+Converts pixels to `rem` (base 16px).
+
+```scss
+@use 'moulify/src/runtime/assets/scss/helpers' as moulify;
+
+.my-class {
+  padding: moulify.rem(16);  // 1rem
+  font-size: moulify.rem(14); // 0.875rem
+}
+```
+
+### 2. Primary color shades (50–900)
+
+The plugin sets CSS variables from your configured `primaryColor`:
+
+- `--moulify-primary` (same as 500)
+- `--moulify-primary-50` … `--moulify-primary-900`
+
+Use them anywhere:
+
+```css
+.card {
+  background: var(--moulify-primary-100);
+  border-color: var(--moulify-primary-300);
+}
+```
+
+In SCSS you can use the **`primary-shades($base-color)`** mixin to generate the same scale for a given color (e.g. for static styles or docs):
+
+```scss
+@use 'moulify/src/runtime/assets/scss/helpers' as moulify;
+
+:root {
+  @include moulify.primary-shades(#fafafa);
+}
+```
+
+And the **`primary($shade)`** function to reference a shade (default 500):
+
+```scss
+@use 'moulify/src/runtime/assets/scss/helpers' as moulify;
+
+.button {
+  background: moulify.primary(500);
+  color: moulify.primary(900);
+}
+```
+
 ## Contribution
 
 <details>

package/dist/module.d.mts

@@ -1,6 +1,8 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
+    /** Primary color used by components (e.g. button background). */
+    primaryColor?: string;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "moulify",
   "configKey": "moulify",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,13 +1,36 @@
 import { defineNuxtModule, createResolver, addComponentsDir, addPlugin } from '@nuxt/kit';
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
 
+const CONFIG_FILES = [".moulifyrc", ".moulifyrc.json"];
+const loadRcConfig = (rootDir) => {
+  for (const file of CONFIG_FILES) {
+    const path = join(rootDir, file);
+    if (existsSync(path)) {
+      try {
+        const content = readFileSync(path, "utf-8");
+        return JSON.parse(content);
+      } catch {
+      }
+    }
+  }
+  return {};
+};
 const module$1 = defineNuxtModule({
   meta: {
     name: "moulify",
     configKey: "moulify"
   },
   // Default configuration options of the Nuxt module
-  defaults: {},
-  setup(_options, _nuxt) {
+  defaults: {
+    primaryColor: "#fafafa"
+  },
+  setup(options, nuxt) {
+    const rcOptions = loadRcConfig(nuxt.options.rootDir);
+    const resolvedOptions = { ...rcOptions, ...options };
+    nuxt.options.runtimeConfig.public.moulify = {
+      primaryColor: resolvedOptions.primaryColor ?? "#fafafa"
+    };
     const resolver = createResolver(import.meta.url);
     addComponentsDir({
       path: resolver.resolve("./runtime/components")

package/dist/runtime/components/MoulifyButton.vue

@@ -1,19 +1,41 @@
 <template>
-  <button
-    class="moulify-button"
-    type="button"
-    v-bind="$attrs"
-  >
+  <button class="moulify-button" type="button" v-bind="$attrs">
     <slot />
   </button>
 </template>
 
 <script setup>
-defineOptions({
-  name: "MoulifyButton"
-});
+defineOptions({ name: "MoulifyButton" });
 </script>
 
 <style scoped>
-.moulify-button{align-items:center;background:linear-gradient(135deg,#0f172a,#1e293b);border:1px solid rgba(15,23,42,.15);border-radius:.375rem;color:#f9fafb;cursor:pointer;display:inline-flex;font-size:.875rem;font-weight:500;justify-content:center;padding:.5rem 1rem;transition:background-color .15s ease,box-shadow .15s ease,transform .05s ease}.moulify-button:hover{background:linear-gradient(135deg,#111827,#1f2937);box-shadow:0 8px 20px rgba(15,23,42,.25)}.moulify-button:active{box-shadow:0 4px 10px rgba(15,23,42,.2);transform:translateY(1px)}.moulify-button:disabled{box-shadow:none;cursor:not-allowed;opacity:.6}
+.moulify-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: px-to-rem(8) px-to-rem(16);
+  border-radius: px-to-rem(6);
+  border: px-to-rem(1) solid rgba(15, 23, 42, 0.15);
+  background: var(--moulify-primary);
+  font-size: px-to-rem(14);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
+}
+
+.moulify-button:hover {
+  background: color-mix(in srgb, var(--moulify-primary) 85%, #000);
+  box-shadow: 0 px-to-rem(8) px-to-rem(20) rgba(15, 23, 42, 0.15);
+}
+
+.moulify-button:active {
+  transform: translateY(px-to-rem(1));
+  box-shadow: 0 px-to-rem(4) px-to-rem(10) rgba(15, 23, 42, 0.1);
+}
+
+.moulify-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  box-shadow: none;
+}
 </style>

package/dist/runtime/plugin.js

@@ -1,3 +1,83 @@
-import { defineNuxtPlugin } from "#app";
+import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+const SHADE_LIGHTNESS = {
+  50: 0.98,
+  100: 0.95,
+  200: 0.9,
+  300: 0.8,
+  400: 0.7,
+  500: -1,
+  // use base
+  600: 0.55,
+  700: 0.45,
+  800: 0.35,
+  900: 0.25
+};
+const hexToRgb = (hex) => {
+  const m = hex.replace(/^#/, "").match(/^([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
+  if (!m || m[1] === void 0 || m[2] === void 0 || m[3] === void 0) {
+    return null;
+  }
+  return [parseInt(m[1], 16), parseInt(m[2], 16), parseInt(m[3], 16)];
+};
+const rgbToHsl = (r, g, b) => {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      default:
+        h = ((r - g) / d + 4) / 6;
+    }
+  }
+  return [h * 360, s * 100, l * 100];
+};
+const hslToHex = (h, s, l) => {
+  s /= 100;
+  l /= 100;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const x = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * x).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+};
+const generatePrimaryShades = (hex) => {
+  const rgb = hexToRgb(hex);
+  if (!rgb) {
+    return {};
+  }
+  const [h, s, baseL] = rgbToHsl(rgb[0], rgb[1], rgb[2]);
+  const result = {};
+  for (const shade of [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]) {
+    const targetL = SHADE_LIGHTNESS[shade];
+    const l = targetL === void 0 || targetL === -1 ? baseL : targetL * 100;
+    result[shade] = hslToHex(h, s, l);
+  }
+  return result;
+};
 export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig();
+  const moulify = config.public.moulify;
+  const primaryColor = moulify?.primaryColor ?? "red";
+  if (import.meta.client) {
+    document.documentElement.style.setProperty("--moulify-primary", primaryColor);
+    const shades = generatePrimaryShades(primaryColor);
+    for (const [shade, value] of Object.entries(shades)) {
+      document.documentElement.style.setProperty(`--moulify-primary-${shade}`, value);
+    }
+  }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "moulify",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "Nuxt module with UI components including MoulifyButton",
   "repository": {
     "type": "git",
@@ -30,17 +30,20 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
-    "dev": "npm run dev:prepare && nuxt dev playground",
+    "dev": "bun run dev:prepare && nuxt dev playground",
     "dev:build": "nuxt build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
     "test": "vitest run",
     "test:watch": "vitest watch",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
+    "dev:clean": "rm -rf dist playground/.nuxt playground/.output playground/node_modules/.vite",
+    "dev:full": "bun run dev:clean && bun run dev"
   },
   "dependencies": {
-    "@nuxt/kit": "^4.3.1"
+    "@nuxt/kit": "^4.3.1",
+    "sass": "^1.97.3"
   },
   "peerDependencies": {
     "nuxt": ">=3.0.0"
@@ -48,6 +51,7 @@
   "devDependencies": {
     "@nuxt/devtools": "^3.2.1",
     "@nuxt/eslint-config": "^1.15.1",
+    "@stylistic/eslint-plugin": "^5.8.0",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.3.1",
     "@nuxt/test-utils": "^4.0.0",