lapikit 0.0.2 → 0.0.3

package/dist/server/modules/css.js

@@ -6,6 +6,7 @@ import path from 'path';
 import { ansi, sendConsole } from './ansi.js';
 import { minify } from './minify.js';
 import { colors } from './themes.js';
+import { devices } from './devices.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const __components = path.resolve('src/components');
@@ -24,8 +25,10 @@ export const processCSS = async (minified, normalize) => {
     if (normalize)
         styles += `${_normalize}\n`;
     const colorScheme = colors();
+    const deviceDisplay = devices();
     styles += `${colorScheme.root}\n`;
     styles += `${colorScheme.className}\n`;
+    styles += `${deviceDisplay}\n`;
     if (fs.existsSync(__components) && fs.statSync(__components).isDirectory()) {
         const tresholds = {
             _default: '',

package/dist/server/modules/devices.d.ts

@@ -0,0 +1 @@
+export declare const devices: () => string;

package/dist/server/modules/devices.js

@@ -0,0 +1,43 @@
+const breakpoints = {
+    mobileBreakpoint: 'sm',
+    tabletBreakpoint: 'md',
+    laptopBreakpoint: 'xl',
+    thresholds: {
+        none: 0, // 0px
+        xs: '28rem', //448px
+        sm: '40rem', //640px
+        md: '48rem', //768px
+        lg: '64rem', //1024px
+        xl: '80rem', //1280px
+        '2xl': '96rem', //1536px
+        '3xl': '112rem' //1792px
+    }
+};
+export const devices = () => {
+    let css = ``;
+    const list = {
+        mobile: breakpoints.mobileBreakpoint,
+        tablet: breakpoints.tabletBreakpoint,
+        laptop: breakpoints.laptopBreakpoint
+    };
+    for (const [key, value] of Object.entries(list)) {
+        const breakpointValue = breakpoints.thresholds[value];
+        const breakpointValueMax = key !== 'laptop'
+            ? breakpoints.thresholds[key === 'mobile' ? list.tablet : key == 'tablet' ? list.laptop : '']
+            : undefined;
+        css += `.device-${key}, .only-on-${key} {\n`;
+        css += `display: none;\n`;
+        css += `}\n`;
+        css += `@media screen and (min-width: ${typeof breakpointValue === 'number' ? breakpointValue + 'px' : breakpointValue}) {\n`;
+        css += `.device-${key} {\n`;
+        css += `display: inherit !important;\n`;
+        css += `}\n`;
+        css += `}\n`;
+        css += `@media screen and (min-width: ${typeof breakpointValue === 'number' ? breakpointValue + 'px' : breakpointValue}) ${breakpointValueMax ? `and (max-width: ${typeof breakpointValueMax === 'number' ? breakpointValueMax + 'px' : breakpointValueMax})` : ''}{\n`;
+        css += `.only-on-${key} {\n`;
+        css += `display: inherit !important;\n`;
+        css += `}\n`;
+        css += `}\n`;
+    }
+    return css;
+};

package/dist/server/vite.js

@@ -8,10 +8,10 @@ export async function lapikit(options = {}) {
             console.log(ansi.bold.blue('Vite plugin loaded'), options);
             const config = await importer();
             await processCSS(options.minify, options.normalize);
-            // console.log('config', config);
+            console.log('config', config);
         },
         async configureServer(server) {
-            // console.log(ansi.inverse.red('Vite server configured'), server);
+            console.log(ansi.inverse.red('Vite server configured'), server);
         }
     };
 }

package/package.json

@@ -1,6 +1,14 @@
 {
 	"name": "lapikit",
-	"version": "0.0.2",
+	"version": "0.0.3",
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Nycolaide/lapikit.git",
+		"directory": "packages/lapikit"
+	},
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -14,9 +22,6 @@
 		"test:unit": "vitest",
 		"test": "npm run test:unit -- --run"
 	},
-	"publishConfig": {
-		"access": "public"
-	},
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",