@mframework/ui 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/module.d.mts

@@ -2,6 +2,9 @@ import * as nuxt_schema from 'nuxt/schema';
 
 interface MFrameworkUiOptions {
     theme?: 'light' | 'dark';
+    builder?: boolean | {
+        enabled?: boolean;
+    };
 }
 declare const _default: nuxt_schema.NuxtModule<MFrameworkUiOptions, MFrameworkUiOptions, false>;
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@mframework/ui",
   "configKey": "mframeworkUi",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0-beta.4",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -6,32 +6,54 @@ const module$1 = defineNuxtModule({
     configKey: "mframeworkUi"
   },
   defaults: {
-    theme: "light"
+    theme: "light",
+    builder: true
   },
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
-    addPlugin(resolver.resolve("./runtime/plugins/vuetify"));
+    addPlugin({
+      src: resolver.resolve("./runtime/plugins/vuetify"),
+      mode: "all"
+    });
     nuxt.options.css = nuxt.options.css || [];
-    nuxt.options.css.push(resolver.resolve("./runtime/styles/index.scss"));
+    nuxt.options.css.push(resolver.resolve("./runtime/styles/index.css"));
     const plugins = [
       "formkit",
       "fontawesome",
       "lightgallery",
       "motion",
-      "grapes"
+      "theme"
     ];
     plugins.forEach((name) => {
-      addPlugin(resolver.resolve(`./runtime/plugins/${name}`));
+      addPlugin({
+        src: resolver.resolve(`./runtime/plugins/${name}`),
+        mode: "all"
+      });
     });
+    if (options.builder) {
+      addPlugin({
+        src: resolver.resolve("./runtime/plugins/builder"),
+        mode: "client"
+      });
+    }
     addComponentsDir({
       path: resolver.resolve("./runtime/components"),
       prefix: "M"
     });
     addImportsDir(resolver.resolve("./runtime/composables"));
+    const normalizedBuilder = typeof options.builder === "boolean" ? {
+      enabled: options.builder
+    } : options.builder || {
+      enabled: true
+    };
     nuxt.options.runtimeConfig.public.mframeworkUi = {
-      ...nuxt.options.runtimeConfig.public.mframeworkUi || {},
-      ...options
+      theme: options.theme,
+      builder: normalizedBuilder
     };
+    nuxt.options.tailwindcss = nuxt.options.tailwindcss || {};
+    nuxt.options.tailwindcss.configPath = resolver.resolve(
+      "./runtime/assets/config/tailwind.config.js"
+    );
   }
 });
 

package/dist/runtime/assets/config/tailwind.conifg.js

@@ -1,11 +1,42 @@
-const { tokens } = require('../../design/tokens')
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [], // Nuxt will inject its own paths
 
-module.exports = {
   theme: {
     extend: {
-      colors: tokens.colors,
-      borderRadius: tokens.radius,
-      spacing: tokens.spacing
+      colors: {
+        primary: 'var(--m-primary)',
+        secondary: 'var(--m-secondary)',
+        accent: 'var(--m-accent)',
+        muted: 'var(--m-muted)',
+        surface: 'var(--m-surface)',
+        border: 'var(--m-border)'
+      },
+
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        heading: ['Inter', 'system-ui', 'sans-serif']
+      },
+
+      borderRadius: {
+        sm: '4px',
+        DEFAULT: '8px',
+        lg: '12px',
+        xl: '16px'
+      },
+
+      spacing: {
+        '1/2': '50%',
+        'full': '100%'
+      },
+
+      boxShadow: {
+        soft: '0 2px 8px rgba(0,0,0,0.06)',
+        medium: '0 4px 16px rgba(0,0,0,0.08)',
+        strong: '0 8px 24px rgba(0,0,0,0.12)'
+      }
     }
-  }
+  },
+
+  plugins: []
 }

package/dist/runtime/components/Gallery.vue

@@ -0,0 +1,56 @@
+<template>
+    <lightgallery :settings="{ speed: 500, plugins: plugins }" :onInit="onInit" :onBeforeSlide="onBeforeSlide">
+        <a data-lg-size="1406-1390" class="gallery-item"
+            data-src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1406&q=80"
+            data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@entrycube' >Diego Guzmán </a></h4> <p> Location - <a href='https://unsplash.com/s/photos/fushimi-inari-taisha-shrine-senbontorii%2C-68%E7%95%AA%E5%9C%B0-fukakusa-yabunouchicho%2C-fushimi-ward%2C-kyoto%2C-japan'>Fushimi Ward, Kyoto, Japan</a></p>">
+            <img class="img-responsive"
+                src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80" />
+        </a>
+        <a data-lg-size="1400-1400" class="gallery-item"
+            data-src="https://images.unsplash.com/photo-1544550285-f813152fb2fd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80"
+            data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@asoshiation' >Shah </a></h4><p> Location - <a href='https://unsplash.com/s/photos/shinimamiya%2C-osaka%2C-japan'>Shinimamiya, Osaka, Japan</a></p>">
+            <img class="img-responsive"
+                src="https://images.unsplash.com/photo-1544550285-f813152fb2fd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80" />
+        </a>
+        <a data-lg-size="1400-1400" class="gallery-item"
+            data-src="https://images.unsplash.com/photo-1584592740039-cddf0671f3d4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80"
+            data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@katherine_xx11' >Katherine Gu </a></h4><p> For all those years we were alone and helpless.</p>">
+            <img style="width: 200px" class="img-responsive"
+                src="https://images.unsplash.com/photo-1584592740039-cddf0671f3d4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80" />
+        </a>
+        <a class="gallery-item"
+            data-video='{"source": [{"src":"https://www.lightgalleryjs.com/videos/video1.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}'
+            data-poster=""
+            data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@katherine_xx11' >Katherine Gu </a></h4><p> For all those years we were alone and helpless.</p>">
+            <img width="200" class="img-responsive"
+                src="https://www.lightgalleryjs.com/images/demo/html5-video-poster.jpg" />
+        </a>
+    </lightgallery>
+</template>
+
+<script>
+import Lightgallery from "lightgallery/vue";
+import lgZoom from "lightgallery/plugins/zoom";
+import lgVideo from "lightgallery/plugins/video";
+export default {
+  name: "App",
+  components: {
+    Lightgallery
+  },
+  data: () => ({
+    plugins: [lgZoom, lgVideo]
+  }),
+  methods: {
+    onInit: () => {
+      console.log("lightGallery has been initialized");
+    },
+    onBeforeSlide: () => {
+      console.log("calling before slide");
+    }
+  }
+};
+</script>
+
+<style>
+@import url("https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lightgallery.css");@import url("https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-zoom.css");@import url("https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-video.css");body{margin:0}.gallery-item{margin:5px}
+</style>

package/dist/runtime/composables/useMToast.d.ts

@@ -1,5 +0,0 @@
-import 'izitoast/dist/css/iziToast.min.css';
-export declare const useMToast: () => {
-    success: (message: string, title?: string) => void;
-    error: (message: string, title?: string) => void;
-};

package/dist/runtime/composables/useMToast.js

@@ -1,11 +1,11 @@
-import iziToast from 'izitoast';
-import 'izitoast/dist/css/iziToast.min.css';
+import iziToast from "izitoast";
+import "izitoast/dist/css/iziToast.min.css";
 export const useMToast = () => {
-    const success = (message, title = 'Success') => {
-        iziToast.success({ title, message });
-    };
-    const error = (message, title = 'Error') => {
-        iziToast.error({ title, message });
-    };
-    return { success, error };
+  const success = (message, title = "Success") => {
+    iziToast.success({ title, message });
+  };
+  const error = (message, title = "Error") => {
+    iziToast.error({ title, message });
+  };
+  return { success, error };
 };

package/dist/runtime/design/tokens.d.ts

@@ -1,22 +0,0 @@
-export declare const tokens: {
-    colors: {
-        primary: string;
-        secondary: string;
-        success: string;
-        warning: string;
-        error: string;
-        surface: string;
-        background: string;
-    };
-    radius: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    spacing: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-};

package/dist/runtime/design/tokens.js

@@ -1,22 +1,22 @@
 export const tokens = {
-    colors: {
-        primary: '#4f46e5',
-        secondary: '#64748b',
-        success: '#22c55e',
-        warning: '#f59e0b',
-        error: '#ef4444',
-        surface: '#ffffff',
-        background: '#f8fafc'
-    },
-    radius: {
-        sm: '4px',
-        md: '8px',
-        lg: '12px'
-    },
-    spacing: {
-        xs: '4px',
-        sm: '8px',
-        md: '16px',
-        lg: '24px'
-    }
+  colors: {
+    primary: "#4f46e5",
+    secondary: "#64748b",
+    success: "#22c55e",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    surface: "#ffffff",
+    background: "#f8fafc"
+  },
+  radius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px"
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px"
+  }
 };

package/dist/runtime/plugins/builder.d.ts

@@ -1,3 +0,0 @@
-import 'grapesjs/dist/css/grapes.min.css';
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
-export default _default;