@katlux/preset-modern 0.1.0-alpha.74

package/dist/runtime/components/KBulkActions/KBulkActions.d.vue.ts

@@ -0,0 +1,20 @@
+import { CFlatClientDataProvider } from '@katlux/providers';
+import type { IKDatatableAction } from '@katlux/providers';
+type __VLS_Props = {
+    bulkActions: IKDatatableAction[];
+    selectedRows: any[];
+    selectAll: boolean;
+    dp: CFlatClientDataProvider;
+    doAction: (action: any) => void;
+};
+type __VLS_ModelProps = {
+    'selected'?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KBulkActions/KBulkActions.vue

@@ -0,0 +1,72 @@
+<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")
+			KTooltip(
+				:text="action.label"
+				:disabled="!(action.iconOnly || !!action.icon)"
+			)
+				KButton(
+					@click="doAction(action)" 
+					size="small" 
+					:type="action.type || 'default'"
+					:iconOnly="action.iconOnly || !!action.icon"
+					class="action-btn"
+				)
+					template(#icon v-if="action.icon")
+						KIcon(:iconname="action.icon" :width="16" :height="16")
+					template(#default v-if="!action.iconOnly && !action.icon") {{ action.label }}
+</template>
+
+<script setup>
+import { CFlatClientDataProvider } from "@katlux/providers";
+const selected = defineModel("selected", { type: null });
+defineProps({
+  bulkActions: { type: Array, required: true },
+  selectedRows: { type: Array, required: true },
+  selectAll: { type: Boolean, required: true },
+  dp: { type: Object, required: true },
+  doAction: { type: Function, required: true }
+});
+</script>
+
+<style scoped>
+.k-bulk-actions-modern {
+  display: flex;
+  align-items: center;
+}
+.k-bulk-actions-modern .actions-wrapper {
+  display: flex;
+  gap: var(--gap-sm);
+  align-items: center;
+}
+.k-bulk-actions-modern .action-btn {
+  border-radius: var(--border-radius-sm);
+  font-weight: var(--font-weight-medium);
+  transition: all var(--transition-fast);
+}
+.k-bulk-actions-modern .action-btn:hover {
+  transform: translateY(-1px);
+}
+.k-bulk-actions-modern .execute-btn {
+  border-radius: var(--border-radius-sm);
+}
+</style>

package/dist/runtime/components/KBulkActions/KBulkActions.vue.d.ts

@@ -0,0 +1,20 @@
+import { CFlatClientDataProvider } from '@katlux/providers';
+import type { IKDatatableAction } from '@katlux/providers';
+type __VLS_Props = {
+    bulkActions: IKDatatableAction[];
+    selectedRows: any[];
+    selectAll: boolean;
+    dp: CFlatClientDataProvider;
+    doAction: (action: any) => void;
+};
+type __VLS_ModelProps = {
+    'selected'?: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KButton/KButton.d.vue.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    isLink: boolean;
+    isDisabled: boolean;
+    buttonClasses: any;
+    onClick: () => void;
+    href?: string;
+    loading?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KButton/KButton.vue

@@ -0,0 +1,215 @@
+<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 setup>
+defineProps({
+  isLink: { type: Boolean, required: true },
+  isDisabled: { type: Boolean, required: true },
+  buttonClasses: { type: null, required: true },
+  onClick: { type: Function, required: true },
+  href: { type: String, required: false },
+  loading: { type: Boolean, required: false }
+});
+</script>
+
+<style 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);
+}
+.KButton.modern-button .button-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-sm);
+  position: relative;
+  z-index: 1;
+}
+.KButton.modern-button .button-icon {
+  display: flex;
+  align-items: center;
+  font-size: 1.2em;
+}
+.KButton.modern-button .button-text {
+  display: flex;
+  align-items: center;
+}
+.KButton.modern-button .button-loader {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.KButton.modern-button .button-loader .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;
+}
+.KButton.modern-button::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);
+}
+.KButton.modern-button:hover::before {
+  opacity: 1;
+}
+.KButton.modern-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+  box-shadow: none;
+}
+.KButton.modern-button.default, .KButton.modern-button.primary {
+  background: var(--button-bg-primary);
+  color: var(--button-text-primary);
+}
+.KButton.modern-button.default:hover, .KButton.modern-button.primary:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-glow-primary, var(--shadow-lg));
+}
+.KButton.modern-button.danger {
+  background: var(--button-bg-danger);
+  color: var(--button-text-danger);
+}
+.KButton.modern-button.danger:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-glow-danger, var(--shadow-lg));
+}
+.KButton.modern-button.success {
+  background: var(--button-bg-success);
+  color: var(--button-text-success);
+}
+.KButton.modern-button.success:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-glow-success, var(--shadow-lg));
+}
+.KButton.modern-button.warning {
+  background: var(--button-bg-warning);
+  color: var(--button-text-warning);
+}
+.KButton.modern-button.warning:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.KButton.modern-button.warning .spinner {
+  border-color: rgba(51, 51, 51, 0.3);
+  border-top-color: #333;
+}
+.KButton.modern-button.info {
+  background: var(--button-bg-info);
+  color: var(--button-text-info);
+}
+.KButton.modern-button.info:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.KButton.modern-button.light {
+  background: var(--button-bg-light);
+  color: var(--button-text-light);
+  border-color: var(--border-color-medium);
+}
+.KButton.modern-button.light:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.KButton.modern-button.light .spinner {
+  border-color: rgba(51, 51, 51, 0.3);
+  border-top-color: #333;
+}
+.KButton.modern-button.dark {
+  background: var(--button-bg-dark);
+  color: var(--button-text-dark);
+}
+.KButton.modern-button.dark:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+.KButton.modern-button.large {
+  font-size: var(--font-size-lg);
+  padding: var(--gap-md) var(--gap-xl);
+  border-radius: var(--border-radius-lg);
+}
+.KButton.modern-button.large .button-icon {
+  font-size: 1.3em;
+}
+.KButton.modern-button.medium {
+  font-size: var(--font-size-md);
+  padding: var(--gap-sm) var(--gap-lg);
+  border-radius: var(--button-border-radius);
+}
+.KButton.modern-button.small {
+  font-size: var(--font-size-sm);
+  padding: var(--gap-sm) var(--gap-md);
+  border-radius: var(--border-radius-sm);
+}
+.KButton.modern-button.small .button-icon {
+  font-size: 1.1em;
+}
+.KButton.modern-button.small .spinner {
+  width: 12px;
+  height: 12px;
+}
+.KButton.modern-button.icon-only {
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1/1;
+}
+.KButton.modern-button.icon-only .button-text {
+  display: none;
+}
+.KButton.modern-button.icon-only.large {
+  width: 44px;
+  height: 44px;
+}
+.KButton.modern-button.icon-only.medium {
+  width: 36px;
+  height: 36px;
+}
+.KButton.modern-button.icon-only.small {
+  width: 28px;
+  height: 28px;
+}
+.KButton.modern-button:active {
+  transform: translateY(0);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/dist/runtime/components/KButton/KButton.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    isLink: boolean;
+    isDisabled: boolean;
+    buttonClasses: any;
+    onClick: () => void;
+    href?: string;
+    loading?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KCheckbox/KCheckbox.d.vue.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    model: any;
+    checkboxValue: any;
+    isDisabled: boolean;
+    label?: string;
+    validation?: 'success' | 'warning' | 'error' | null;
+    validationText?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:model"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KCheckbox/KCheckbox.vue

@@ -0,0 +1,122 @@
+<template lang="pug">
+.KCheckbox-wrapper
+	label.KCheckbox.modern-checkbox
+		input(type="checkbox" v-model="formattedModel" :value="checkboxValue" :disabled="isDisabled")
+		.checkbox-box(:class="validation ? `is-${validation}` : ''")
+			.checkbox-checkmark
+				KIcon.icon(iconname="check")
+		.checkbox-label(v-if="$slots.label || $slots.default || label")
+			slot(name="label")
+				slot
+					| {{ label }}
+	span.validation-text(v-if="validation && ['success', 'warning', 'error'].includes(validation) && validationText" :class="`is-${validation}`") {{ validationText }}
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  model: { type: null, required: true },
+  checkboxValue: { type: null, required: true },
+  isDisabled: { type: Boolean, required: true },
+  label: { type: String, required: false },
+  validation: { type: [String, null], required: false },
+  validationText: { type: String, required: false }
+});
+const emit = defineEmits(["update:model"]);
+const formattedModel = computed({
+  get: () => props.model,
+  set: (value) => emit("update:model", value)
+});
+</script>
+
+<style scoped>
+.KCheckbox.modern-checkbox {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  cursor: pointer;
+  user-select: none;
+  transition: all var(--transition-fast);
+}
+.KCheckbox.modern-checkbox:hover .checkbox-box {
+  border-color: var(--primary-500);
+  box-shadow: var(--input-focus-shadow);
+}
+.KCheckbox.modern-checkbox input {
+  display: none;
+}
+.KCheckbox.modern-checkbox .checkbox-box {
+  position: relative;
+  width: 22px;
+  height: 22px;
+  border: 2px solid var(--neutral-400);
+  border-radius: var(--checkbox-border-radius, 4px);
+  background: var(--background-color);
+  transition: all var(--transition-bounce);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.KCheckbox.modern-checkbox .checkbox-box::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);
+}
+.KCheckbox.modern-checkbox .checkbox-checkmark {
+  position: relative;
+  z-index: 1;
+}
+.KCheckbox.modern-checkbox .checkbox-checkmark .icon {
+  display: none;
+  color: white;
+  font-size: 14px;
+  animation: checkmark-pop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+.KCheckbox.modern-checkbox .checkbox-label {
+  font-size: 15px;
+  color: var(--font-color-primary);
+  line-height: 1.5;
+}
+.KCheckbox.modern-checkbox input:checked + .checkbox-box {
+  border-color: var(--primary-500);
+}
+.KCheckbox.modern-checkbox input:checked + .checkbox-box::before {
+  opacity: 1;
+  transform: scale(1);
+}
+.KCheckbox.modern-checkbox input:checked + .checkbox-box .checkbox-checkmark .icon {
+  display: block;
+}
+.KCheckbox.modern-checkbox input:disabled + .checkbox-box {
+  background-color: var(--neutral-200);
+  border-color: var(--neutral-300);
+  cursor: not-allowed;
+}
+.KCheckbox.modern-checkbox input:disabled + .checkbox-box::before {
+  background: var(--neutral-400);
+}
+.KCheckbox.modern-checkbox 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/dist/runtime/components/KCheckbox/KCheckbox.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    model: any;
+    checkboxValue: any;
+    isDisabled: boolean;
+    label?: string;
+    validation?: 'success' | 'warning' | 'error' | null;
+    validationText?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:model"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KDatatable/KDatatable.d.vue.ts

@@ -0,0 +1,28 @@
+import { ADataProvider } from '@katlux/providers';
+import type { IKDatatableAction } from '@katlux/providers';
+type __VLS_Props = {
+    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>;
+    emptyStateText?: string;
+    emptyFilterStateText?: string;
+};
+type __VLS_ModelProps = {
+    'selectedRows'?: any[];
+    'selectAll'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selectedRows": (value: any[]) => any;
+    "update:selectAll": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selectedRows"?: ((value: any[]) => any) | undefined;
+    "onUpdate:selectAll"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;