@katlux/preset-modern 0.1.0-beta.0

package/src/runtime/components/KCheckbox/KCheckbox.vue

@@ -0,0 +1,136 @@
+<template lang="pug">
+label.KCheckbox.modern-checkbox
+	input(type="checkbox" v-model="formattedModel" :value="checkboxValue" :disabled="isDisabled")
+	.checkbox-box
+		.checkbox-checkmark
+			KIcon.icon(iconname="check")
+	.checkbox-label
+		slot
+</template>
+
+<script lang="ts" setup>
+// Modern template for KCheckbox
+const props = defineProps<{
+	model: any
+	checkboxValue: any
+	isDisabled: boolean
+}>()
+
+const emit = defineEmits<{
+	(e: 'update:model', value: any): void
+}>()
+
+const formattedModel = computed({
+	get: () => props.model,
+	set: (value) => emit('update:model', value)
+})
+</script>
+
+<style lang="scss" scoped>
+.KCheckbox.modern-checkbox {
+	display: flex;
+	align-items: center;
+	gap: var(--gap-sm);
+	cursor: pointer;
+	user-select: none;
+	transition: all var(--transition-fast);
+
+	&:hover {
+		.checkbox-box {
+			border-color: var(--primary-500);
+			box-shadow: var(--input-focus-shadow);
+		}
+	}
+	
+	input {
+		display: none;
+	}
+	
+	.checkbox-box {
+		position: relative;
+		width: 22px;
+		height: 22px;
+		border: 2px solid var(--neutral-400);
+		border-radius: var(--border-radius-sm);
+		background: var(--background-color);
+		transition: all var(--transition-bounce);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+
+		&::before {
+			content: '';
+			position: absolute;
+			inset: 0;
+			border-radius: 4px;
+			background: var(--checkbox-checked-bg);
+			opacity: 0;
+			transform: scale(0.8);
+			transition: all var(--transition-bounce);
+		}
+	}
+	
+	.checkbox-checkmark {
+		position: relative;
+		z-index: 1;
+		
+		.icon {
+			display: none;
+			color: white;
+			font-size: 14px;
+			animation: checkmark-pop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+		}
+	}
+
+	.checkbox-label {
+		font-size: 15px;
+		color: var(--font-color-primary);
+		line-height: 1.5;
+	}
+	
+	// Checked state
+	input:checked + .checkbox-box {
+		border-color: var(--primary-500);
+		
+		&::before {
+			opacity: 1;
+			transform: scale(1);
+		}
+		
+		.checkbox-checkmark .icon {
+			display: block;
+		}
+	}
+
+	// Disabled state
+	input:disabled + .checkbox-box {
+		background-color: var(--neutral-200);
+		border-color: var(--neutral-300);
+		cursor: not-allowed;
+		
+		&::before {
+			background: var(--neutral-400);
+		}
+	}
+
+	input:disabled ~ .checkbox-label {
+		color: var(--neutral-400);
+		cursor: not-allowed;
+	}
+}
+
+@keyframes checkmark-pop {
+	0% {
+		transform: scale(0);
+		opacity: 0;
+	}
+	50% {
+		transform: scale(1.2);
+	}
+	100% {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+</style>

package/src/runtime/components/KDatatable/KDatatable.vue

@@ -0,0 +1,216 @@
+<template lang="pug">
+.k-datatable.modern-datatable(:style="{ '--page-size': dataProvider?.pageSize?.value || 10 }")
+	.header(v-if="bulkActions && bulkActions.length > 0 && selectedRows.length > 0")
+		.selected-count {{ selectedRows.length }} items selected
+		KBulkActions.bulk-actions(:bulkActions="bulkActions" :selectedRows="selectedRows" :selectAll="selectAll")
+	
+	.k-datatable-wrapper
+		.loading-overlay(v-if="dataProvider.loading.value")
+			.spinner
+		
+		table
+			thead
+				tr
+					th.check-cell(v-if="bulkActions && bulkActions.length > 0")
+						KCheckbox(v-model="selectAll")
+					th(v-for="field in visibleFields || dataProvider.fields" :key="field" :data-field="field" :style="getColumnStyle(field)")
+						component(v-if="getHeaderSlot(field)" :is="getHeaderSlot(field)" :field="field")
+						span(v-else) {{ columnHeaders?.[field] ?? field }}
+					th.actions-cell(v-if="rowActions && rowActions.length > 0") Actions
+			
+			tbody
+				tr(v-for="(row, index) in dataProvider.pageData.value" :key="index" :class="{ 'selected': selectedRows.includes(row) }")
+					td.check-cell(v-if="bulkActions && bulkActions.length > 0")
+						KCheckbox(:value="row" v-model="selectedRows")
+					td(v-for="visibleField in visibleFields || dataProvider.fields" :key="visibleField" :data-field="visibleField" :style="getColumnStyle(visibleField)")
+						component(v-if="getCellSlot(visibleField)" :is="getCellSlot(visibleField)" :row="row" :field="visibleField" :value="row[visibleField]")
+						span(v-else) {{ row[visibleField] }}
+					td.actions-cell(v-if="rowActions && rowActions.length > 0")
+						.action-buttons
+							KButton.action-btn(
+								v-for="rowAction in rowActions" 
+								:key="rowAction.label" 
+								:type="rowAction.type || 'secondary'"
+								size="small" 
+								@click="rowAction.action(row)"
+							) {{ rowAction.label }}
+
+	.footer
+		KPagination.pagination(:dataProvider="dataProvider")
+</template>
+
+<script setup lang="ts">
+import { ADataProvider } from '@katlux/providers'
+import type { IKDatatableAction } from '@katlux/providers'
+
+// Define models using Vue 3.5 defineModel
+const selectedRows = defineModel<any[]>('selectedRows', { default: [] })
+const selectAll = defineModel<boolean>('selectAll', { default: false })
+
+const props = defineProps<{
+	dataProvider: ADataProvider
+	visibleFields: Array<string> | null
+	rowActions: Array<IKDatatableAction>
+	bulkActions: Array<IKDatatableAction>
+	cellSlots?: Record<string, any>
+	headerSlots?: Record<string, any>
+	columnHeaders?: Record<string, string>
+	columnWidths?: Record<string, string>
+}>()
+
+const getCellSlot = (fieldName: string) => {
+	const slotName = 'cell-' + fieldName
+	return props.cellSlots?.[slotName]
+}
+
+const getHeaderSlot = (fieldName: string) => {
+	const slotName = 'header-' + fieldName
+	return props.headerSlots?.[slotName] || props.cellSlots?.[slotName]
+}
+
+const getColumnStyle = (field: string) => {
+	const w = props.columnWidths?.[field]
+	if (!w) return undefined
+	return { width: w, whiteSpace: 'nowrap' as const }
+}
+</script>
+
+<style lang="scss" scoped>
+.modern-datatable {
+	--page-height: 50px;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: var(--gap-md);
+	font-family: var(--font-family);
+
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--gap-sm) var(--gap-lg);
+		background: var(--table-header-bg);
+		border-radius: var(--button-border-radius);
+		border: 1px solid var(--table-border-color);
+
+		.selected-count {
+			font-weight: var(--font-weight-semibold);
+			color: var(--font-color-secondary);
+		}
+	}
+
+	.k-datatable-wrapper {
+		position: relative;
+		border-radius: var(--border-radius-lg);
+		box-shadow: var(--shadow-md);
+		background: var(--background-color);
+		overflow: hidden;
+		border: 1px solid var(--table-border-color);
+
+		.loading-overlay {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: rgba(255, 255, 255, 0.7);
+			backdrop-filter: blur(2px);
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			z-index: 10;
+		}
+	}
+
+	table {
+		width: 100%;
+		border-collapse: separate;
+		border-spacing: 0;
+
+		thead {
+			background: var(--table-header-bg);
+			
+			th {
+				padding: var(--gap-md);
+				font-weight: var(--font-weight-semibold);
+				text-align: left;
+				color: var(--table-header-color);
+				font-size: var(--font-size-sm);
+				letter-spacing: 0.05em;
+				text-transform: uppercase;
+				border-bottom: 1px solid var(--table-border-color);
+				white-space: nowrap;
+
+				&.check-cell {
+					width: 48px;
+					text-align: center;
+				}
+
+				&.actions-cell {
+					text-align: right;
+				}
+			}
+		}
+
+		tbody {
+			tr {
+				transition: all var(--transition-fast);
+
+				td {
+					padding: var(--gap-md);
+					border-bottom: 1px solid var(--neutral-100);
+					color: var(--font-color-primary);
+					font-size: var(--font-size-md);
+
+					&.check-cell {
+						text-align: center;
+					}
+
+					&.actions-cell {
+						text-align: right;
+					}
+				}
+
+				&:last-child td {
+					border-bottom: none;
+				}
+
+				&:hover {
+					background-color: var(--table-row-hover);
+				}
+
+				&.selected {
+					background-color: var(--table-row-selected);
+					
+					td {
+						border-bottom-color: #dbeafe;
+					}
+				}
+			}
+		}
+	}
+
+	.action-buttons {
+		display: flex;
+		gap: var(--gap-sm);
+		justify-content: flex-end;
+	}
+
+	.footer {
+		padding: 4px 0;
+	}
+}
+
+.spinner {
+	width: 40px;
+	height: 40px;
+	border: 3px solid var(--neutral-200);
+	border-radius: 50%;
+	border-top-color: var(--primary-500);
+	animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+	to { transform: rotate(360deg); }
+}
+</style>

package/src/runtime/components/KMaskTextbox/KMaskTextbox.vue

@@ -0,0 +1,126 @@
+<template lang="pug">
+.KMaskTextbox
+	KTextbox(
+		:modelValue="maskedValue"
+		:placeholder="placeholder"
+		:showClear="showClear"
+		:maxlength="mask.length"
+		@update:modelValue="handleUpdate"
+		@beforeinput="handleBeforeInput"
+	)
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { getMaskPatternDef } from '@katlux/toolkit/components/KMaskTextbox/KMaskTextbox.logic'
+
+const props = defineProps<{
+	maskedValue: string
+	placeholder: string
+	showClear: boolean
+	mask: string
+}>()
+
+const emit = defineEmits<{
+	(e: 'update:maskedValue', value: string): void
+	(e: 'clear'): void
+}>()
+
+// Use beforeinput for better validation (fires before input is accepted)
+const handleBeforeInput = (event: InputEvent) => {
+	if (!event.data || event.inputType !== 'insertText') {
+		return // Allow deletions, etc.
+	}
+	
+	const char = event.data
+	if (!/[0-9]/.test(char)) {
+		return // Not a digit, let through for other patterns
+	}
+	
+	const target = event.target as HTMLInputElement
+	const cursorPos = target.selectionStart || 0
+	const currentValue = target.value
+	
+	// Find the mask pattern at cursor position
+	let maskIdx = 0
+	let valIdx = 0
+	
+	// Walk through to find where we are in the mask
+	while (valIdx < cursorPos && maskIdx < props.mask.length) {
+		const def = getMaskPatternDef(props.mask, maskIdx)
+		if (def) {
+			// Pattern - check how many chars it uses in value
+			let consumed = 0
+			while (consumed < def.length && valIdx < currentValue.length) {
+				if (def.pattern.test(currentValue[valIdx])) {
+					consumed++
+				}
+				valIdx++
+				if (valIdx >= cursorPos) break
+			}
+			maskIdx += def.length
+		} else {
+			// Literal
+			valIdx++
+			maskIdx++
+		}
+	}
+	
+	// Get pattern at current position
+	const patternType = props.mask.substring(maskIdx, maskIdx + 4)
+	const digit = parseInt(char, 10)
+	
+	// Find how many digits already entered for this specific pattern instance
+	let digitsInPattern = 0
+	let scanIdx = cursorPos
+	
+	// Count backwards to start of this pattern
+	while (scanIdx > 0 && digitsInPattern < 10) {
+		scanIdx--
+		const ch = currentValue[scanIdx]
+		if (/[0-9]/.test(ch)) {
+			digitsInPattern++
+		} else {
+			break // Hit a literal, stop
+		}
+	}
+	
+	// Validate based on pattern
+	if (patternType.startsWith('DD')) {
+		if (digitsInPattern === 0) {
+			if (digit > 3) event.preventDefault()
+		} else if (digitsInPattern === 1) {
+			const firstDigit = parseInt(currentValue[cursorPos - 1], 10)
+			if (firstDigit === 0 && digit === 0) event.preventDefault()
+			if (firstDigit === 3 && digit > 1) event.preventDefault()
+		}
+	} else if (patternType.startsWith('MM')) {
+		if (digitsInPattern === 0) {
+			if (digit > 1) event.preventDefault()
+		} else if (digitsInPattern === 1) {
+			const firstDigit = parseInt(currentValue[cursorPos - 1], 10)
+			if (firstDigit === 0 && digit === 0) event.preventDefault()
+			if (firstDigit === 1 && digit > 2) event.preventDefault()
+		}
+	} else if (patternType.startsWith('HH')) {
+		if (digitsInPattern === 0) {
+			if (digit > 2) event.preventDefault()
+		} else if (digitsInPattern === 1) {
+			const firstDigit = parseInt(currentValue[cursorPos - 1], 10)
+			if (firstDigit === 2 && digit > 3) event.preventDefault()
+		}
+	} else if (patternType.startsWith('mm') || patternType.startsWith('ss')) {
+		if (digitsInPattern === 0) {
+			if (digit > 5) event.preventDefault()
+		}
+	}
+}
+
+const handleUpdate = (value: string) => {
+	emit('update:maskedValue', value)
+}
+</script>
+
+<style lang="scss" scoped>
+// No additional styles needed - KTextbox handles everything
+</style>

package/src/runtime/components/KPagination/KPagination.vue

@@ -0,0 +1,96 @@
+<template lang="pug">
+.k-pagination-modern(v-if="totalPages > 1")
+    ul.pagination-list
+        li
+            KButton.nav-btn(
+                :onClick="goToPrev"
+                :isDisabled="!showPrevButton"
+                :buttonClasses="['light', 'small']"
+                aria-label="Previous page"
+            ) ‹
+
+        li(v-if="showFirstEllipsis")
+            KButton.page-btn(
+                :onClick="goToFirst"
+                :buttonClasses="['light', 'small']"
+                :isLink="!!getPageHref(1)"
+                :href="getPageHref(1)"
+            ) 1
+        
+        li(v-if="showFirstEllipsis")
+            span.ellipsis ...
+
+        li(v-for="item in visiblePages" :key="item")
+            KButton.page-btn(
+                :onClick="() => pageClicked(item)"
+                :buttonClasses="[item === dp.currentPage.value ? 'primary' : 'light', 'small']"
+                :isLink="!!getPageHref(item)"
+                :href="getPageHref(item)"
+            ) {{ item }}
+
+        li(v-if="showLastEllipsis")
+            span.ellipsis ...
+
+        li(v-if="showLastEllipsis")
+            KButton.page-btn(
+                :onClick="goToLast"
+                :buttonClasses="['light', 'small']"
+                :isLink="!!getPageHref(totalPages)"
+                :href="getPageHref(totalPages)"
+            ) {{ totalPages }}
+
+        li
+            KButton.nav-btn(
+                :onClick="goToNext"
+                :isDisabled="!showNextButton"
+                :buttonClasses="['light', 'small']"
+                aria-label="Next page"
+            ) ›
+</template>
+
+<script setup lang="ts">
+// Modern Pagination Template
+defineProps<{
+    dp: any
+    totalPages: number
+    getPageHref: (page: number) => string | undefined
+    visiblePages: number[]
+    showPrevButton: boolean
+    showNextButton: boolean
+    showFirstEllipsis: boolean
+    showLastEllipsis: boolean
+    pageClicked: (item: number) => void
+    goToPrev: () => void
+    goToNext: () => void
+    goToFirst: () => void
+    goToLast: () => void
+}>()
+</script>
+
+<style lang="scss" scoped>
+.k-pagination-modern {
+    display: flex;
+    justify-content: flex-end;
+    font-family: var(--font-family);
+
+    .pagination-list {
+        display: flex;
+        gap: 4px;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        align-items: center;
+
+        li {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .ellipsis {
+        padding: 0 4px;
+        color: var(--neutral-400);
+        font-size: var(--font-size-sm);
+    }
+}
+</style>