@katlux/preset-modern 0.1.0-beta.0 → 0.1.0-beta.1

package/dist/module.d.cts

@@ -0,0 +1,2 @@
+export * from "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-preset-modern/src/module";
+export { default } from "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-preset-modern/src/module";

package/dist/module.d.mts

@@ -0,0 +1,2 @@
+export * from "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-preset-modern/src/module";
+export { default } from "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-preset-modern/src/module";

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@katlux/preset-modern",
+  "configKey": "katluxTemplateModern",
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,18 @@
+import { createJiti } from "file:///home/cagatay/Desktop/projects/KatluxShowcase/node_modules/jiti/lib/jiti.mjs";
+
+const jiti = createJiti(import.meta.url, {
+  "interopDefault": true,
+  "alias": {
+    "@katlux/preset-modern": "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-preset-modern"
+  },
+  "transformOptions": {
+    "babel": {
+      "plugins": []
+    }
+  }
+})
+
+/** @type {import("/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-preset-modern/src/module")} */
+const _module = await jiti.import("/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-preset-modern/src/module.ts");
+
+export default _module?.default ?? _module;

package/dist/types.d.mts

@@ -0,0 +1,13 @@
+import type { ModuleHooks, ModuleRuntimeHooks, ModuleRuntimeConfig, ModulePublicRuntimeConfig } from './module.mjs'
+
+declare module '#app' {
+  interface RuntimeNuxtHooks extends ModuleRuntimeHooks {}
+}
+
+declare module '@nuxt/schema' {
+  interface NuxtHooks extends ModuleHooks {}
+  interface RuntimeConfig extends ModuleRuntimeConfig {}
+  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
+}
+
+export * from "./module.mjs"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/preset-modern",
-	"version": "0.1.0-beta.0",
+	"version": "0.1.0-beta.1",
 	"description": "Modern default design preset and styling variables for Katlux components",
 	"author": "Katlux",
 	"license": "MIT",
@@ -21,5 +21,8 @@
 	"dependencies": {
 		"@katlux/toolkit": "*",
 		"@nuxt/kit": "^3.20.1"
-	}
+	},
+	"files": [
+		"dist"
+	]
 }

package/build.config.ts

@@ -1,3 +0,0 @@
-export default {
-	failOnWarn: false
-}

package/src/module.ts

@@ -1,48 +0,0 @@
-import { defineNuxtModule, addComponentsDir, createResolver, installModule } from '@nuxt/kit'
-import { createRequire } from 'node:module'
-
-export default defineNuxtModule({
-	meta: {
-		name: '@katlux/preset-modern',
-		configKey: 'katluxTemplateModern'
-	},
-	async setup(options, nuxt) {
-		const { resolve } = createResolver(import.meta.url)
-		const _require = createRequire(import.meta.url)
-
-		// 0. Auto-install the base toolkit dependency!
-		await installModule('@katlux/toolkit')
-
-		// 1. Auto-import components
-		addComponentsDir({
-			path: resolve('./runtime/components'),
-			pathPrefix: false,
-			extensions: ['vue'],
-			global: true
-		})
-
-		// 2. Inject SCSS variables globally via Vite
-		nuxt.options.vite.css = nuxt.options.vite.css || {}
-		nuxt.options.vite.css.preprocessorOptions = nuxt.options.vite.css.preprocessorOptions || {}
-		nuxt.options.vite.css.preprocessorOptions.scss = nuxt.options.vite.css.preprocessorOptions.scss || {}
-
-		const currentAdditionalData = nuxt.options.vite.css.preprocessorOptions.scss.additionalData || ''
-
-		// Resolve toolkit SCSS: find package root via package.json (exposed in exports)
-		const toolkitPkgJson = _require.resolve('@katlux/toolkit/package.json')
-		const toolkitPkgDir = toolkitPkgJson.replace(/[\\/]package\.json$/, '')
-
-		const toolkitScssPath = nuxt.options.dev
-			? `${toolkitPkgDir}/src/runtime/presets/default/assets/scss/index.scss`
-			: `${toolkitPkgDir}/dist/runtime/presets/default/assets/scss/index.css`
-
-		const presetScssPath = nuxt.options.dev
-			? resolve('./runtime/assets/scss/index.scss')
-			: resolve('../dist/runtime/assets/scss/index.css')
-
-		const toolkitScss = `@use "${toolkitScssPath}" as *;`
-		const presetScssImport = `@use "${presetScssPath}" as *;`
-
-		nuxt.options.vite.css.preprocessorOptions.scss.additionalData = `${toolkitScss}\n${presetScssImport}\n${currentAdditionalData}`
-	}
-})

package/src/runtime/assets/scss/css-variables.scss

@@ -1,175 +0,0 @@
-// Modern Template - CSS Custom Properties
-// Vibrant gradients and modern aesthetics
-// Applied when data-template="modern" is set on the root element
-
-[data-template="modern"] {
-	// Primary Colors - Purple-blue gradient palette
-	--primary-100: #ede9fe;
-	--primary-300: #c4b5fd;
-	--primary-500: #8b5cf6;
-	--primary-700: #7c3aed;
-	--primary-900: #5b21b6;
-
-	// Accent Colors - Cyan/teal
-	--accent-100: #cffafe;
-	--accent-300: #67e8f9;
-	--accent-500: #06b6d4;
-	--accent-700: #0891b2;
-	--accent-900: #155e75;
-
-	// Neutral Colors - Slate tones
-	--neutral-50: #f8fafc;
-	--neutral-100: #f1f5f9;
-	--neutral-200: #e2e8f0;
-	--neutral-300: #cbd5e1;
-	--neutral-400: #94a3b8;
-	--neutral-500: #64748b;
-	--neutral-600: #475569;
-	--neutral-700: #334155;
-	--neutral-800: #1e293b;
-	--neutral-900: #0f172a;
-
-	// Semantic Colors
-	--success-color: #10b981;
-	--success-color-light: #ecfdf5;
-	--warning-color: #f59e0b;
-	--warning-color-light: #fffbeb;
-	--error-color: #ef4444;
-	--error-color-light: #fef2f2;
-	--info-color: #3b82f6;
-	--info-color-light: #eff6ff;
-
-	// Font Colors
-	--font-color-primary: var(--neutral-700);
-	--font-color-secondary: var(--neutral-500);
-	--font-color-heading: var(--neutral-900);
-	--font-color-light: #ffffff;
-
-	// Background Colors
-	--background-color: #ffffff;
-	--background-color-light: var(--neutral-50);
-	--background-color-medium: var(--neutral-100);
-	--background-color-dark: var(--neutral-800);
-
-	// Border Colors
-	--border-color-light: var(--neutral-200);
-	--border-color-medium: var(--neutral-300);
-	--border-color-dark: var(--neutral-500);
-
-	// Spacing
-	--gap-sm: 8px;
-	--gap-md: 16px;
-	--gap-lg: 24px;
-	--gap-xl: 32px;
-
-	// Border Radius - More rounded for modern look
-	--border-radius-sm: 8px;
-	--border-radius-md: 12px;
-	--border-radius-lg: 16px;
-	--border-radius-xl: 24px;
-	--border-radius-full: 9999px;
-
-	// Shadows - Modern elevated shadows
-	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-
-	// Glow shadows for buttons
-	--shadow-glow-primary: 0 10px 15px -3px rgba(102, 126, 234, 0.4), 0 4px 6px -2px rgba(102, 126, 234, 0.2);
-	--shadow-glow-danger: 0 10px 15px -3px rgba(245, 87, 108, 0.4), 0 4px 6px -2px rgba(245, 87, 108, 0.2);
-	--shadow-glow-success: 0 10px 15px -3px rgba(79, 172, 254, 0.4), 0 4px 6px -2px rgba(79, 172, 254, 0.2);
-
-	// Typography
-	--font-size-xs: 12px;
-	--font-size-sm: 14px;
-	--font-size-md: 16px;
-	--font-size-lg: 18px;
-	--font-size-xl: 20px;
-	--font-weight-normal: 400;
-	--font-weight-medium: 500;
-	--font-weight-semibold: 600;
-	--font-weight-bold: 700;
-	--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-	--font-family-mono: 'Fira Code', 'Roboto Mono', monospace;
-
-	// Transitions
-	--transition-fast: 0.15s ease;
-	--transition-normal: 0.3s ease;
-	--transition-slow: 0.5s ease;
-	--transition-bounce: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-	// Button-specific
-	--button-border-radius: var(--border-radius-md);
-	--button-font-size-sm: var(--font-size-sm);
-	--button-font-size-md: var(--font-size-md);
-	--button-font-size-lg: var(--font-size-lg);
-
-	// Button Gradients
-	--button-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-	--button-gradient-danger: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-	--button-gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-	--button-gradient-warning: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-	--button-gradient-info: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
-	--button-gradient-light: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
-	--button-gradient-dark: linear-gradient(135deg, #434343 0%, #000000 100%);
-
-	// Button Colors (using gradients as backgrounds)
-	--button-bg-default: var(--button-gradient-primary);
-	--button-text-default: var(--font-color-light);
-	--button-hover-bg-default: var(--button-gradient-primary);
-
-	--button-bg-primary: var(--button-gradient-primary);
-	--button-text-primary: var(--font-color-light);
-	--button-hover-bg-primary: var(--button-gradient-primary);
-
-	--button-bg-success: var(--button-gradient-success);
-	--button-text-success: var(--font-color-light);
-	--button-hover-bg-success: var(--button-gradient-success);
-
-	--button-bg-warning: var(--button-gradient-warning);
-	--button-text-warning: var(--neutral-800);
-	--button-hover-bg-warning: var(--button-gradient-warning);
-
-	--button-bg-danger: var(--button-gradient-danger);
-	--button-text-danger: var(--font-color-light);
-	--button-hover-bg-danger: var(--button-gradient-danger);
-
-	--button-bg-info: var(--button-gradient-info);
-	--button-text-info: var(--font-color-light);
-	--button-hover-bg-info: var(--button-gradient-info);
-
-	--button-bg-light: var(--button-gradient-light);
-	--button-text-light: var(--neutral-800);
-	--button-hover-bg-light: var(--button-gradient-light);
-
-	--button-bg-dark: var(--button-gradient-dark);
-	--button-text-dark: var(--font-color-light);
-	--button-hover-bg-dark: var(--button-gradient-dark);
-
-	// Input
-	--input-border-radius: var(--border-radius-sm);
-	--input-border-color: var(--border-color-medium);
-	--input-focus-border-color: var(--primary-500);
-	--input-focus-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
-
-	// Table
-	--table-header-bg: var(--neutral-100);
-	--table-header-color: var(--neutral-600);
-	--table-border-color: var(--neutral-200);
-	--table-row-hover: var(--neutral-100);
-	--table-row-selected: #eff6ff;
-
-	// Checkbox
-	--checkbox-bg: var(--background-color);
-	--checkbox-checked-bg: var(--button-gradient-primary);
-	--checkbox-border-color: var(--neutral-400);
-	--modal-overlay-bg: rgba(15, 23, 42, 0.6);
-
-	// Layout Variables
-	--layout-header-height: 70px;
-	--layout-header-bg: var(--background-color);
-	--layout-sidebar-width: 240px;
-	--layout-sidebar-bg: var(--neutral-50);
-	--layout-content-bg: #ffffff;
-}

package/src/runtime/assets/scss/index.scss

@@ -1,3 +0,0 @@
-@use "css-variables";
-// Documentation styles are globally included via default template for now
-// but using common theme variables

package/src/runtime/components/KBulkActions/KBulkActions.vue

@@ -1,72 +0,0 @@
-<template lang="pug">
-.k-bulk-actions-modern
-	.actions-wrapper
-		//- Display actions as buttons if few, or dropdown if many
-		template(v-if="bulkActions.length > 3")
-			KCombobox(
-				:dataProvider="dp" 
-				v-model="selected" 
-				labelField="label" 
-				closeOnSelect 
-				:disabled="selectedRows.length === 0" 
-				placeholder="Select Action"
-				class="action-select"
-			)
-			KButton(
-				@click="doAction(selected)" 
-				size="small" 
-				:disabled="selectedRows.length === 0 || selected == undefined"
-				class="execute-btn"
-			) Go
-			
-		template(v-else v-for="action in bulkActions" :key="action.label")
-			KButton(
-				@click="doAction(action)" 
-				size="small" 
-				variant="outline"
-				class="action-btn"
-			) {{ action.label }}
-</template>
-
-<script setup lang="ts">
-import { CFlatClientDataProvider } from '@katlux/providers'
-import type { IKDatatableAction } from '@katlux/providers'
-
-// Use defineModel for simpler two-way binding
-const selected = defineModel<any>('selected')
-
-defineProps<{
-	bulkActions: IKDatatableAction[]
-	selectedRows: any[]
-	selectAll: boolean
-	dp: CFlatClientDataProvider
-	doAction: (action: any) => void
-}>()
-</script>
-
-<style lang="scss" scoped>
-.k-bulk-actions-modern {
-	display: flex;
-	align-items: center;
-
-	.actions-wrapper {
-		display: flex;
-		gap: var(--gap-sm);
-		align-items: center;
-	}
-
-	.action-btn {
-		border-radius: var(--border-radius-sm);
-		font-weight: var(--font-weight-medium);
-		transition: all var(--transition-fast);
-		
-		&:hover {
-			transform: translateY(-1px);
-		}
-	}
-	
-	.execute-btn {
-		border-radius: var(--border-radius-sm);
-	}
-}
-</style>

package/src/runtime/components/KButton/KButton.vue

@@ -1,227 +0,0 @@
-<template lang="pug">
-NuxtLink.KButton.modern-button(v-if="isLink" :to="href" @click.prevent="onClick" :class="buttonClasses")
-	.button-content
-		.button-icon(v-if="$slots.icon")
-			slot(name="icon")
-		.button-text
-			slot
-		.button-loader(v-if="loading")
-			.spinner
-button.KButton.modern-button(v-else @click="onClick" :class="buttonClasses" :disabled="isDisabled")
-	.button-content
-		.button-icon(v-if="$slots.icon")
-			slot(name="icon")
-		.button-text
-			slot
-		.button-loader(v-if="loading")
-			.spinner
-</template>
-
-<script lang="ts" setup>
-// Modern template for KButton
-defineProps<{
-	isLink: boolean
-	isDisabled: boolean
-	buttonClasses: any
-	onClick: () => void
-	href?: string
-	loading?: boolean
-}>()
-</script>
-
-<style lang="scss" scoped>
-.KButton.modern-button {
-	border-radius: var(--button-border-radius);
-	font-weight: var(--font-weight-semibold);
-	cursor: pointer;
-	transition: all var(--transition-bounce);
-	border: 2px solid transparent;
-	position: relative;
-	overflow: hidden;
-	text-decoration: none;
-	box-shadow: var(--shadow-md);
-
-	.button-content {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: var(--gap-sm);
-		position: relative;
-		z-index: 1;
-	}
-
-	.button-icon {
-		display: flex;
-		align-items: center;
-		font-size: 1.2em;
-	}
-
-	.button-text {
-		display: flex;
-		align-items: center;
-	}
-
-	.button-loader {
-		position: absolute;
-		right: 12px;
-		top: 50%;
-		transform: translateY(-50%);
-
-		.spinner {
-			width: 16px;
-			height: 16px;
-			border: 2px solid rgba(255, 255, 255, 0.3);
-			border-top-color: white;
-			border-radius: 50%;
-			animation: spin 0.6s linear infinite;
-		}
-	}
-
-	&::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
-		opacity: 0;
-		transition: opacity var(--transition-normal);
-	}
-
-	&:hover::before {
-		opacity: 1;
-	}
-
-	&:disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-		pointer-events: none;
-		box-shadow: none;
-	}
-
-	// Color variants
-	&.default, &.primary {
-		background: var(--button-bg-primary);
-		color: var(--button-text-primary);
-
-		&:hover {
-			transform: translateY(-2px);
-			box-shadow: var(--shadow-glow-primary, var(--shadow-lg));
-		}
-	}
-
-	&.danger {
-		background: var(--button-bg-danger);
-		color: var(--button-text-danger);
-
-		&:hover {
-			transform: translateY(-2px);
-			box-shadow: var(--shadow-glow-danger, var(--shadow-lg));
-		}
-	}
-
-	&.success {
-		background: var(--button-bg-success);
-		color: var(--button-text-success);
-
-		&:hover {
-			transform: translateY(-2px);
-			box-shadow: var(--shadow-glow-success, var(--shadow-lg));
-		}
-	}
-
-	&.warning {
-		background: var(--button-bg-warning);
-		color: var(--button-text-warning);
-
-		&:hover {
-			transform: translateY(-2px);
-			box-shadow: var(--shadow-lg);
-		}
-
-		.spinner {
-			border-color: rgba(51, 51, 51, 0.3);
-			border-top-color: #333;
-		}
-	}
-
-	&.info {
-		background: var(--button-bg-info);
-		color: var(--button-text-info);
-
-		&:hover {
-			transform: translateY(-2px);
-			box-shadow: var(--shadow-lg);
-		}
-	}
-
-	&.light {
-		background: var(--button-bg-light);
-		color: var(--button-text-light);
-		border-color: var(--border-color-medium);
-
-		&:hover {
-			transform: translateY(-2px);
-			box-shadow: var(--shadow-lg);
-		}
-
-		.spinner {
-			border-color: rgba(51, 51, 51, 0.3);
-			border-top-color: #333;
-		}
-	}
-
-	&.dark {
-		background: var(--button-bg-dark);
-		color: var(--button-text-dark);
-
-		&:hover {
-			transform: translateY(-2px);
-			box-shadow: var(--shadow-lg);
-		}
-	}
-
-	// Size variants
-	&.large {
-		font-size: var(--font-size-lg);
-		padding: var(--gap-md) var(--gap-xl);
-		border-radius: var(--border-radius-lg);
-
-		.button-icon {
-			font-size: 1.3em;
-		}
-	}
-
-	&.medium {
-		font-size: var(--font-size-md);
-		padding: var(--gap-sm) var(--gap-lg);
-		border-radius: var(--button-border-radius);
-	}
-
-	&.small {
-		font-size: var(--font-size-sm);
-		padding: var(--gap-sm) var(--gap-md);
-		border-radius: var(--border-radius-sm);
-
-		.button-icon {
-			font-size: 1.1em;
-		}
-
-		.spinner {
-			width: 12px;
-			height: 12px;
-		}
-	}
-
-	&:active {
-		transform: translateY(0);
-	}
-}
-
-@keyframes spin {
-	to {
-		transform: rotate(360deg);
-	}
-}
-</style>