@katlux/toolkit 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-toolkit/src/module";
+export { default } from "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-toolkit/src/module";

package/dist/module.d.mts

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

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@katlux/toolkit",
+  "configKey": "katluxToolkit",
+  "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/toolkit": "/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-toolkit"
+  },
+  "transformOptions": {
+    "babel": {
+      "plugins": []
+    }
+  }
+})
+
+/** @type {import("/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-toolkit/src/module")} */
+const _module = await jiti.import("/home/cagatay/Desktop/projects/KatluxShowcase/packages/katlux-toolkit/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/toolkit",
-	"version": "0.1.0-beta.0",
+	"version": "0.1.0-beta.1",
 	"description": "Core UI toolkit and utilities for the Katlux ecosystem",
 	"author": "Katlux",
 	"license": "MIT",
@@ -38,5 +38,8 @@
 		"@nuxt/kit": "^3.20.1",
 		"pug": "^3.0.0",
 		"sass": "^1.80.0"
-	}
+	},
+	"files": [
+		"dist"
+	]
 }

package/ARCHITECTURE.md

@@ -1,70 +0,0 @@
-# Template System Architecture Decision
-
-## Problem
-
-The current implementation has templates hardcoded in `.global.vue` files with `v-if` switching. The external template files in `~/templates/modern/` are not actually being used - they're just imported for styles.
-
-## Solution: Component-Based Template System
-
-Instead of hardcoded templates, we'll create separate template components that can be dynamically loaded.
-
-### New Structure
-
-```
-KButton/
-├── KButton.global.vue          # Main component (uses logic + loads template)
-├── KButton.logic.ts            # Business logic
-├── KButtonDefault.vue          # Default template component
-└── templates/default/           # Default styles
-    └── KButton.scss
-
-templates/modern/
-└── KButton/
-    ├── KButtonModern.vue       # Modern template component  
-    └── KButton.scss            # Modern styles
-```
-
-### How It Works
-
-1. **KButton.global.vue** - Main component that:
-   - Uses the logic composable
-   - Dynamically loads the appropriate template component
-   - Passes props/slots to the template component
-
-2. **KButtonDefault.vue** - Default template component:
-   - Pure presentation
-   - Receives props from main component
-   - Uses default styles
-
-3. **KButtonModern.vue** - Modern template component:
-   - Pure presentation
-   - Receives same props
-   - Uses modern styles
-   - Can add new features (like icon slot)
-
-### Benefits
-
-- ✅ External templates are actually used
-- ✅ True dynamic loading
-- ✅ Easy to add new templates
-- ✅ Clean separation of concerns
-- ✅ Templates can be in user's project
-- ✅ No bundling of unused templates
-
-### Implementation
-
-The main component will use dynamic component loading:
-
-```vue
-<component 
-  :is="templateComponent" 
-  v-bind="$props" 
-  v-bind="logicState"
->
-  <template v-for="(_, slot) in $slots" #[slot]="scope">
-    <slot :name="slot" v-bind="scope" />
-  </template>
-</component>
-```
-
-This way, the template files in `~/templates/modern/` will be the actual source of truth!

package/PRESET_NAMING.md

@@ -1,63 +0,0 @@
-# Template Naming Convention
-
-## File Structure
-
-Template files are organized by template name in folders, with component files using just the component name:
-
-```
-templates/{templateName}/components/{ComponentName}/{ComponentName}.vue
-```
-
-### Examples
-
-| Template Name (config) | File Path |
-|------------------------|-----------|
-| `modern` | `templates/modern/components/KButton/KButton.vue` |
-| `dark` | `templates/dark/components/KButton/KButton.vue` |
-| `minimal` | `templates/minimal/components/KButton/KButton.vue` |
-| `my-custom-theme` | `templates/my-custom-theme/components/KButton/KButton.vue` |
-| `dark-mode` | `templates/dark-mode/components/KButton/KButton.vue` |
-| `glassmorphic` | `templates/glassmorphic/components/KButton/KButton.vue` |
-
-**Note**: The template name is in the folder path, and components are organized in a `components/` subfolder!
-
-### Complete Structure Example
-
-For a template named `my-custom-theme`:
-
-```
-templates/my-custom-theme/
-├── assets/ (shared styles/svgs)
-└── components/
-    └── KButton/
-        └── KButton.vue
-```
-
-The component file is simply `KButton.vue` - the template name comes from the folder!
-
-### Configuration
-
-In `app.config.ts`:
-
-```typescript
-export default defineAppConfig({
-  katluxToolkit: {
-    activeTemplate: 'my-custom-theme', // Will load from templates/my-custom-theme/components/
-  },
-})
-```
-
-### How It Works
-
-1. **Template name from config**: `'my-custom-theme'`
-2. **Resolve component**: The system dynamically imports the component from `~/templates/my-custom-theme/components/KButton/KButton.vue`
-
-### No Hardcoding!
-
-The component loader is fully parametric. You can create any template name you want:
-
-- `activeTemplate: 'glassmorphic'` → loads `templates/glassmorphic/components/KButton/KButton.vue`
-- `activeTemplate: 'retro'` → loads `templates/retro/components/KButton/KButton.vue`
-- `activeTemplate: 'neon'` → loads `templates/neon/components/KButton/KButton.vue`
-
-Just create the corresponding component file and it will work automatically!

package/PRESET_SYSTEM.md

@@ -1,204 +0,0 @@
-# KatluxToolkit Templating System - Usage Guide
-
-This guide shows you how to use the KatluxToolkit templating system to customize component appearance while keeping their logic intact.
-
-## Quick Start
-
-### 1. Current State
-
-The following components now support templating:
-- **KButton** - Buttons with various types and sizes
-- **KCheckbox** - Checkboxes with custom styling
-- **KTextbox** - Text input fields with clear button
-- **KTextarea** - Multi-line text areas
-
-### 2. Available Templates
-
-- **default** - The original KButton design
-- **modern** - A new template with gradients, shadows, and smooth animations
-
-### 3. How to Switch Templates
-
-To use a custom template, update your `app.config.ts`:
-
-```typescript
-export default defineAppConfig({
-  katluxToolkit: {
-    activeTemplate: 'modern', // Change from 'default' to 'modern'
-  },
-})
-```
-
-### 4. Restart Your Dev Server
-
-After changing the template, restart your Nuxt dev server:
-
-```bash
-npm run dev
-```
-
-All KButton components in your app will now use the modern template!
-
-## Template Structure
-
-Templates are located in the `~/templates/{templateName}/` directory with component-specific folders:
-
-```
-templates/
-└── modern/
-    ├── KButton/
-    │   ├── KButton.pug
-    │   └── KButton.scss
-    ├── KCheckbox/
-    │   ├── KCheckbox.pug
-    │   └── KCheckbox.scss
-    ├── KTextbox/
-    │   ├── KTextbox.pug
-    │   └── KTextbox.scss
-    └── KTextarea/
-        ├── KTextarea.pug
-        └── KTextarea.scss
-```
-
-## Creating Your Own Template
-
-### Step 1: Create Template Directory
-
-```bash
-mkdir -p templates/my-custom-theme
-```
-
-### Step 2: Create Component Template Files
-
-Each component gets its own folder with a `.vue` file.
-Since we use Vue 3.5+, we can use `defineModel` to simplify the code significantly.
-
-Create `templates/my-custom-theme/KButton/KButton.vue`:
-
-```vue
-<template lang="pug">
-// Your custom markedown structure
-button.KButton.my-custom(:class="buttonClasses" @click="onClick")
-  slot
-</template>
-
-<script lang="ts" setup>
-// Use defineModel for two-way binding if needed, or simple props
-const props = defineProps<{
-  buttonClasses: any
-  onClick: (e: MouseEvent) => void
-  // ... other props
-}>()
-</script>
-
-<style lang="scss" scoped>
-.KButton.my-custom {
-  // Your custom styles here
-  background-color: #your-color;
-  border-radius: 8px;
-  padding: 10px 20px;
-}
-</style>
-```
-
-For **KTextarea**, it's even simpler:
-
-```vue
-<template lang="pug">
-textarea.my-textarea(v-model="text" :placeholder="placeholder" :rows="rows")
-</template>
-
-<script lang="ts" setup>
-// Automatically handles props and emits for v-model
-const text = defineModel<string>('text')
-
-defineProps<{
-  placeholder: string
-  rows: number
-}>()
-</script>
-```
-
-### Step 3: Activate Your Template
-
-Update `app.config.ts`:
-
-```typescript
-export default defineAppConfig({
-  katluxToolkit: {
-    activeTemplate: 'my-custom-theme',
-  },
-})
-```
-
-## Important Rules for Custom Templates
-
-1.  **Each component must have its own folder**
-    *   For KButton: `templates/{templateName}/KButton/`
-    *   File inside: `KButton.vue`
-
-2.  **Template files must match component names exactly**
-    *   `KButton.vue`, `KTextarea.vue`
-    *   Case-sensitive!
-
-3.  **Templates are standard Vue SFCs**
-    *   You can use `<script setup>`, `<template>`, and `<style scoped>`.
-    *   We recommend using `defineModel` for clean code.
-
-4.  **Templates must use the same props/slots as default**
-    *   Check the global component or default template to see available props.
-
-## Modern Template Features
-
-The modern template includes:
-
-- **Gradient backgrounds** for all button types
-- **Smooth hover animations** with lift effect
-- **Enhanced shadows** for depth
-- **Icon slot support** for adding icons to buttons
-- **Custom loading spinner** with animation
-
-### Using the Modern Template with Icons
-
-```vue
-<KButton type="primary">
-  <template #icon>
-    <Icon name="mdi:check" />
-  </template>
-  Click Me
-</KButton>
-```
-
-## Switching Between Templates at Runtime
-
-You can switch templates programmatically:
-
-```typescript
-const appConfig = useAppConfig()
-appConfig.katluxToolkit.activeTemplate = 'modern'
-```
-
-Note: You may need to refresh the page for changes to take effect.
-
-## Troubleshooting
-
-### Template not loading?
-
-1. Check that template files exist in `templates/{templateName}/`
-2. Verify file names match exactly (case-sensitive)
-3. Restart your dev server
-4. Check browser console for errors
-
-### Styles not applying?
-
-1. Make sure SCSS syntax is correct
-2. Check that you're using the correct class names
-3. Verify SCSS variables are available (from KatluxToolkit)
-
-## Next Steps
-
-More components will be made templateable soon! The same pattern will apply to:
-- KCheckbox
-- KTextbox
-- KDatatable, KBulkActions, KDataIterator, KPagination
-- And more...

package/build.config.ts

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

package/nuxt.config.ts

@@ -1,9 +0,0 @@
-import { defineNuxtConfig } from 'nuxt/config'
-import { fileURLToPath } from 'node:url'
-
-export default defineNuxtConfig({
-	alias: {
-		'#toolkit': fileURLToPath(new URL('./src/runtime', import.meta.url)),
-		'#toolkit/*': fileURLToPath(new URL('./src/runtime/*', import.meta.url))
-	}
-})

package/src/module.ts

@@ -1,36 +0,0 @@
-import { defineNuxtModule, addComponentsDir, addImportsDir, addPlugin, createResolver } from '@nuxt/kit'
-
-export default defineNuxtModule({
-	meta: {
-		name: '@katlux/toolkit',
-		configKey: 'katluxToolkit'
-	},
-	setup(options, nuxt) {
-		const { resolve } = createResolver(import.meta.url)
-
-		// 1. Auto-import components
-		addComponentsDir({
-			path: resolve('./runtime/components'),
-			pathPrefix: false,
-			extensions: ['vue'],
-			global: true
-		})
-
-		// 2. Auto-import composables
-		addImportsDir(resolve('./runtime/composables'))
-
-		// 3. Register plugins
-		addPlugin(resolve('./runtime/plugins/registerDirectives'))
-		addPlugin(resolve('./runtime/plugins/PresetPlugin'))
-
-		// 4. Add aliases for easier internal imports
-		nuxt.options.alias['#toolkit'] = resolve('./runtime')
-
-		// 5. Inject TypeScript compilerOptions into the generated tsconfig.json 
-		// so users don't have to manually configure 'allowArbitraryExtensions'
-		nuxt.hook('prepare:types', (options) => {
-			options.tsConfig.compilerOptions = options.tsConfig.compilerOptions || {}
-			options.tsConfig.compilerOptions.allowArbitraryExtensions = true
-		})
-	}
-})

package/src/runtime/app.config.d.ts

@@ -1,9 +0,0 @@
-export { }
-
-declare module '@nuxt/schema' {
-	interface AppConfig {
-		katluxToolkit?: {
-			activePreset?: string
-		}
-	}
-}

package/src/runtime/components/KAccordion/KAccordion.global.vue

@@ -1,18 +0,0 @@
-<script lang="ts" setup>
-import { useKAccordionLogic, KAccordionDefaultProps, type KAccordionProps } from './KAccordion.logic'
-import { usePresetComponent } from '../../composables/usePresetComponent'
-import { computed } from 'vue'
-import KAccordionDefault from '../../presets/default/components/KAccordion/KAccordion.vue'
-
-const props = defineProps(KAccordionDefaultProps)
-
-useKAccordionLogic(props as KAccordionProps)
-
-const presetComponent = usePresetComponent('KAccordion', KAccordionDefault)
-</script>
-
-<template lang="pug">
-component(:is="presetComponent")
-	template(v-for="(_, slot) in $slots" #[slot]="scope")
-		slot(:name="slot" v-bind="scope")
-</template>

package/src/runtime/components/KAccordion/KAccordion.logic.ts

@@ -1,49 +0,0 @@
-import { ref, provide } from 'vue'
-
-export interface KAccordionProps {
-	multiOpen?: boolean
-}
-
-export const KAccordionDefaultProps = {
-	multiOpen: {
-		type: Boolean,
-	},
-}
-
-export function useKAccordionLogic(props: KAccordionProps) {
-	const openIds = ref<string[]>([])
-	const items = ref<Map<string, any>>(new Map())
-
-	function registerItem(id: string, item: any) {
-		items.value.set(id, item)
-		return () => {
-			items.value.delete(id)
-		}
-	}
-
-	function toggleItem(id: string) {
-		if (props.multiOpen) {
-			if (openIds.value.includes(id)) {
-				openIds.value = openIds.value.filter((i) => i !== id)
-			} else {
-				openIds.value.push(id)
-			}
-		} else {
-			if (openIds.value[0] === id) {
-				openIds.value = []
-			} else {
-				openIds.value = [id]
-			}
-		}
-	}
-
-	function isOpen(id: string) {
-		return openIds.value.includes(id)
-	}
-
-	provide('accordionRegister', registerItem)
-	provide('accordionToggle', toggleItem)
-	provide('accordionIsOpen', isOpen)
-
-	return {}
-}

package/src/runtime/components/KAccordion/KAccordionItem.global.vue

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-import { useKAccordionItemLogic, KAccordionItemDefaultProps, type KAccordionItemProps } from './KAccordionItem.logic'
-import { usePresetComponent } from '../../composables/usePresetComponent'
-import { computed } from 'vue'
-import KAccordionItemDefault from '../../presets/default/components/KAccordion/KAccordionItem.vue'
-
-const props = defineProps(KAccordionItemDefaultProps)
-
-const { isOpen, toggleAccordion } = useKAccordionItemLogic(props as KAccordionItemProps)
-
-const presetComponent = usePresetComponent('KAccordionItem', KAccordionItemDefault)
-
-const templateProps = computed(() => ({
-	title: props.title,
-	isOpen: isOpen.value,
-	toggleAccordion
-}))
-</script>
-
-<template lang="pug">
-component(:is="presetComponent" v-bind="templateProps")
-	template(v-for="(_, slot) in $slots" #[slot]="scope")
-		slot(:name="slot" v-bind="scope")
-</template>

package/src/runtime/components/KAccordion/KAccordionItem.logic.ts

@@ -1,72 +0,0 @@
-import { inject, ref, onMounted, computed, watch, nextTick, onUnmounted } from 'vue'
-
-export interface KAccordionItemProps {
-	title: string
-	isOpen?: boolean
-}
-
-export const KAccordionItemDefaultProps = {
-	title: {
-		type: String,
-		required: true,
-	},
-	isOpen: {
-		type: Boolean,
-	},
-}
-
-export function useKAccordionItemLogic(props: KAccordionItemProps) {
-	const register = inject<(id: string, item: any) => () => void>('accordionRegister')
-	const toggle = inject<(id: string) => void>('accordionToggle')
-	const isOpenFn = inject<(id: string) => boolean>('accordionIsOpen')
-	let unregister: (() => void) | null = null
-
-	onMounted(() => {
-		if (register) {
-			unregister = register(props.title, {})
-			if (props.isOpen && toggle) {
-				nextTick(() => {
-					if (!isOpenFn || !isOpenFn(props.title)) {
-						toggle(props.title)
-					}
-				})
-			}
-		}
-	})
-
-	onUnmounted(() => {
-		if (unregister) {
-			unregister()
-		}
-	})
-
-	watch(
-		() => props.isOpen,
-		(shouldBeOpen) => {
-			if (toggle && isOpenFn) {
-				const currentlyOpen = isOpenFn(props.title)
-				if (shouldBeOpen && !currentlyOpen) {
-					toggle(props.title)
-				} else if (!shouldBeOpen && currentlyOpen) {
-					toggle(props.title)
-				}
-			}
-		}
-	)
-
-	const isOpen = computed(() => {
-		if (!isOpenFn) return !!props.isOpen
-		return isOpenFn(props.title)
-	})
-
-	function toggleAccordion() {
-		if (toggle) {
-			toggle(props.title)
-		}
-	}
-
-	return {
-		isOpen,
-		toggleAccordion,
-	}
-}

package/src/runtime/components/KAlert/KAlert.global.vue

@@ -1,10 +0,0 @@
-<script lang="ts" setup>
-import { usePresetComponent } from '../../composables/usePresetComponent'
-import KAlertDefault from '../../presets/default/components/KAlert/KAlert.vue'
-
-const presetComponent = usePresetComponent('KAlert', KAlertDefault)
-</script>
-
-<template lang="pug">
-component(:is="presetComponent")
-</template>

package/src/runtime/components/KAlert/KAlert.logic.ts

@@ -1,3 +0,0 @@
-export interface KAlertProps { }
-export const KAlertDefaultProps = {}
-export function useKAlertLogic() { return {} }