@katlux/toolkit 0.1.0-beta.20 → 0.1.0-beta.22

package/dist/module.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const kit = require('@nuxt/kit');
+const node_fs = require('node:fs');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 const module$1 = kit.defineNuxtModule({
@@ -13,7 +14,10 @@ const module$1 = kit.defineNuxtModule({
     const runtimePath = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimePath);
     nuxt.options.build.transpile.push("@katlux/toolkit");
-    nuxt.options.css.push(resolve("./runtime/presets/default/assets/scss/index.scss"));
+    const scssPath = resolve("./runtime/presets/default/assets/scss/index.scss");
+    const cssPath = resolve("./runtime/presets/default/assets/scss/index.css");
+    const finalCssPath = node_fs.existsSync(scssPath) ? scssPath : cssPath;
+    nuxt.options.css.push(finalCssPath);
     nuxt.hook("vite:extendConfig", (config) => {
       const server = config.server || (config.server = {});
       const fs = server.fs || (server.fs = {});
@@ -21,10 +25,10 @@ const module$1 = kit.defineNuxtModule({
       if (!allow.includes(runtimePath)) {
         allow.push(runtimePath);
       }
-      config.ssr = config.ssr || {};
-      config.ssr.noExternal = config.ssr.noExternal || [];
-      if (Array.isArray(config.ssr.noExternal) && !config.ssr.noExternal.includes("@katlux/toolkit")) {
-        config.ssr.noExternal.push("@katlux/toolkit");
+      const ssr = config.ssr || (config.ssr = {});
+      const noExternal = ssr.noExternal || (ssr.noExternal = []);
+      if (Array.isArray(noExternal) && !noExternal.includes("@katlux/toolkit")) {
+        noExternal.push("@katlux/toolkit");
       }
     });
     kit.addComponentsDir({

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@katlux/toolkit",
   "configKey": "katluxToolkit",
-  "version": "0.1.0-beta.20",
+  "version": "0.1.0-beta.22",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,4 +1,5 @@
 import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addPlugin } from '@nuxt/kit';
+import { existsSync } from 'node:fs';
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -10,7 +11,10 @@ const module$1 = defineNuxtModule({
     const runtimePath = resolve("./runtime");
     nuxt.options.build.transpile.push(runtimePath);
     nuxt.options.build.transpile.push("@katlux/toolkit");
-    nuxt.options.css.push(resolve("./runtime/presets/default/assets/scss/index.scss"));
+    const scssPath = resolve("./runtime/presets/default/assets/scss/index.scss");
+    const cssPath = resolve("./runtime/presets/default/assets/scss/index.css");
+    const finalCssPath = existsSync(scssPath) ? scssPath : cssPath;
+    nuxt.options.css.push(finalCssPath);
     nuxt.hook("vite:extendConfig", (config) => {
       const server = config.server || (config.server = {});
       const fs = server.fs || (server.fs = {});
@@ -18,10 +22,10 @@ const module$1 = defineNuxtModule({
       if (!allow.includes(runtimePath)) {
         allow.push(runtimePath);
       }
-      config.ssr = config.ssr || {};
-      config.ssr.noExternal = config.ssr.noExternal || [];
-      if (Array.isArray(config.ssr.noExternal) && !config.ssr.noExternal.includes("@katlux/toolkit")) {
-        config.ssr.noExternal.push("@katlux/toolkit");
+      const ssr = config.ssr || (config.ssr = {});
+      const noExternal = ssr.noExternal || (ssr.noExternal = []);
+      if (Array.isArray(noExternal) && !noExternal.includes("@katlux/toolkit")) {
+        noExternal.push("@katlux/toolkit");
       }
     });
     addComponentsDir({

package/dist/runtime/presets/default/assets/scss/css-variables.scss

@@ -0,0 +1,216 @@
+// Default Template - CSS Custom Properties
+// These are the base styles that apply when no specific template is selected
+// or when data-template="default" is set
+
+:root,
+[data-template="default"] {
+	// Primary Colors
+	--primary-100: #e0f2f7;
+	--primary-300: #a7d9ed;
+	--primary-500: #2196f3;
+	--primary-700: #1976d2;
+	--primary-900: #0d47a1;
+
+	// Accent Colors
+	--accent-100: #e8f5e9;
+	--accent-300: #c8e6c9;
+	--accent-500: #4caf50;
+	--accent-700: #388e3c;
+	--accent-900: #1b5e20;
+
+	// Neutral Colors
+	--neutral-50: #fafafa;
+	--neutral-100: #f5f5f5;
+	--neutral-200: #eeeeee;
+	--neutral-300: #e0e0e0;
+	--neutral-400: #bdbdbd;
+	--neutral-500: #9e9e9e;
+	--neutral-600: #757575;
+	--neutral-700: #616161;
+	--neutral-800: #424242;
+	--neutral-900: #212121;
+
+	// Semantic Colors
+	--success-color: var(--accent-500);
+	--success-color-light: var(--accent-100);
+	--warning-color: #ffc107;
+	--warning-color-light: #fff3e0;
+	--error-color: #f44336;
+	--error-color-light: #fbe9e7;
+	--info-color: var(--primary-500);
+	--info-color-light: var(--primary-100);
+
+	// Font Colors
+	--font-color-primary: var(--neutral-800);
+	--font-color-secondary: var(--neutral-600);
+	--font-color-heading: var(--neutral-900);
+	--font-color-light: var(--neutral-50);
+
+	// Background Colors
+	--background-color: var(--neutral-50);
+	--background-color-light: var(--neutral-50);
+	--background-color-medium: var(--neutral-400);
+	--background-color-dark: var(--neutral-800);
+
+	// Border Colors
+	--border-color-light: var(--neutral-200);
+	--border-color-medium: var(--neutral-400);
+	--border-color-dark: var(--neutral-600);
+
+	// Spacing
+	--gap-sm: 10px;
+	--gap-md: 20px;
+	--gap-lg: 30px;
+	--gap-xl: 40px;
+
+	// Border Radius
+	--border-radius-sm: 4px;
+	--border-radius-md: 8px;
+	--border-radius-lg: 16px;
+	--border-radius-xl: 32px;
+	--border-radius-full: 9999px;
+
+	// 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);
+
+	// Typography
+	--font-size-xs: 10px;
+	--font-size-sm: 12px;
+	--font-size-md: 14px;
+	--font-size-lg: 16px;
+	--font-size-xl: 18px;
+	--font-weight-normal: 400;
+	--font-weight-medium: 500;
+	--font-weight-semibold: 600;
+	--font-weight-bold: 700;
+	--font-family: Roboto, sans-serif;
+
+	// 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-sm);
+	--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 Colors - Default
+	--button-bg-default: var(--neutral-900);
+	--button-text-default: var(--font-color-light);
+	--button-hover-bg-default: var(--neutral-700);
+
+	// Button Colors - Primary
+	--button-bg-primary: var(--primary-500);
+	--button-text-primary: var(--font-color-light);
+	--button-hover-bg-primary: var(--primary-700);
+
+	// Button Colors - Success
+	--button-bg-success: var(--success-color);
+	--button-text-success: var(--font-color-light);
+	--button-hover-bg-success: var(--accent-700);
+
+	// Button Colors - Warning
+	--button-bg-warning: var(--warning-color);
+	--button-text-warning: var(--neutral-900);
+	--button-hover-bg-warning: #e6ac00;
+
+	// Button Colors - Danger/Error
+	--button-bg-danger: var(--error-color);
+	--button-text-danger: var(--font-color-light);
+	--button-hover-bg-danger: #d32f2f;
+
+	// Button Colors - Info
+	--button-bg-info: var(--info-color);
+	--button-text-info: var(--font-color-light);
+	--button-hover-bg-info: var(--primary-300);
+
+	// Button Colors - Light
+	--button-bg-light: var(--neutral-50);
+	--button-text-light: var(--neutral-900);
+	--button-hover-bg-light: var(--neutral-200);
+
+	// Button Colors - Dark
+	--button-bg-dark: var(--neutral-900);
+	--button-text-dark: var(--font-color-light);
+	--button-hover-bg-dark: var(--neutral-700);
+
+	// 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(33, 150, 243, 0.2);
+
+	// Table
+	--table-header-bg: var(--neutral-100);
+	--table-header-color: var(--neutral-700);
+	--table-border-color: var(--neutral-300);
+	--table-row-hover: var(--neutral-100);
+	--table-row-selected: #e3f2fd;
+
+	// Checkbox
+	--checkbox-bg: var(--neutral-50);
+	--checkbox-checked-bg: var(--primary-500);
+	--checkbox-border-color: var(--border-color-medium);
+
+	// Missing Box Variables
+	--box-border-radius: var(--border-radius-md);
+	--box-border: 1px solid var(--border-color-medium);
+	--box-shadow: var(--shadow-md);
+	--box-padding: var(--gap-md);
+
+	// Missing Layout Variables
+	--grid-gap: var(--gap-md);
+	--component-gap: var(--gap-sm);
+	--layover: var(--neutral-600);
+	--modal-overlay-bg: rgba(0, 0, 0, 0.5);
+
+	// Layout Variables
+	--layout-header-height: 60px;
+	--layout-header-bg: var(--background-color);
+	--layout-sidebar-width: 200px;
+	--layout-sidebar-bg: var(--background-color);
+	--layout-content-bg: var(--background-color-light);
+
+	// Missing Icon Variables
+	--icon-color-light: var(--neutral-200);
+	--icon-color-medium: var(--neutral-400);
+	--icon-color-dark: var(--neutral-600);
+
+	// Missing Input Variables
+	--input-border: 1px solid var(--border-color-medium);
+	--input-button-bg: var(--neutral-300);
+	--input-button-hover-bg: var(--neutral-400);
+	--input-button-font-color: var(--font-color-primary);
+	--input-focus-border-color: var(--primary-500);
+
+	// Button Hover Specifics
+	--button-hover-bg-danger: #d32f2f;
+	--button-hover-bg-info: var(--primary-300);
+	--button-hover-bg-light: var(--neutral-200);
+	--button-hover-bg-primary: var(--primary-700);
+	--button-hover-bg-success: var(--accent-700);
+	--button-hover-bg-warning: #e6ac00;
+	--button-hover-bg-dark: var(--neutral-700);
+
+	--button-text-danger: var(--font-color-light);
+	--button-text-primary: var(--font-color-light);
+	--button-text-success: var(--font-color-light);
+	--button-text-warning: var(--neutral-900);
+	--button-text-info: var(--font-color-light);
+	--button-text-light: var(--neutral-900);
+	--button-text-dark: var(--font-color-light);
+
+	--button-hover-text-danger: var(--button-text-danger);
+	--button-hover-text-primary: var(--button-text-primary);
+	--button-hover-text-success: var(--button-text-success);
+	--button-hover-text-warning: var(--button-text-warning);
+	--button-hover-text-info: var(--button-text-info);
+	--button-hover-text-light: var(--button-text-light);
+	--button-hover-text-dark: var(--button-text-dark);
+}

package/dist/runtime/presets/default/assets/scss/docs.scss

@@ -0,0 +1,52 @@
+// Documentation Styles using Existing Template Variables
+.content {
+	h2 {
+		margin-top: 2rem;
+		border-bottom: 1px solid var(--border-color-light);
+		padding-bottom: 0.5rem;
+		color: var(--font-color-heading);
+	}
+
+	pre {
+		background: var(--neutral-100);
+		color: var(--font-color-primary);
+		padding: 1rem;
+		border-radius: var(--border-radius-md);
+		overflow-x: auto;
+		margin: 0;
+		font-family: var(--font-family-mono, monospace);
+
+		code {
+			background: transparent;
+			padding: 0;
+			color: inherit;
+		}
+	}
+
+	.note {
+		background: var(--info-color-light);
+		border-left: 4px solid var(--info-color);
+		padding: 1rem;
+		margin-top: 2rem;
+		border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
+		color: var(--font-color-primary);
+
+		p {
+			margin: 0;
+		}
+	}
+
+	.important {
+		background: var(--warning-color-light);
+		border-left: 4px solid var(--warning-color);
+		padding: 1rem;
+		margin: 1rem 0;
+		border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
+		color: var(--font-color-primary);
+
+		p {
+			margin: 0;
+		}
+	}
+
+}

package/dist/runtime/presets/default/assets/scss/index.scss

@@ -0,0 +1,4 @@
+@use "reset";
+@use "css-variables";
+@use "docs";
+@forward "mixins";

package/dist/runtime/presets/default/assets/scss/mixins.scss

@@ -0,0 +1,94 @@
+//mixins
+
+//shadow
+//border
+//flex
+
+// Shadow Mixin
+@mixin shadow($elevation: 1, $shadow-color: rgba(0, 0, 0, 0.12)) {
+	@if $elevation ==1 {
+		box-shadow: 0 1px 3px $shadow-color, 0 1px 2px rgba(0, 0, 0, 0.24);
+	}
+
+	@else if $elevation ==2 {
+		box-shadow: 0 3px 6px $shadow-color, 0 3px 6px rgba(0, 0, 0, 0.23);
+	}
+
+	@else if $elevation ==3 {
+		box-shadow: 0 10px 20px $shadow-color, 0 6px 6px rgba(0, 0, 0, 0.23);
+	}
+
+	@else {
+		box-shadow: 0 1px 3px $shadow-color, 0 1px 2px rgba(0, 0, 0, 0.24);
+	}
+}
+
+// Border Mixin
+@mixin border($width: 1px, $style: solid, $color: var(--border-color-medium), $radius: 0) {
+	border: $width $style $color;
+	border-radius: $radius;
+}
+
+// Flex Mixin
+@mixin flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {
+	display: flex;
+	flex-direction: $direction;
+	justify-content: $justify;
+	align-items: $align;
+	flex-wrap: $wrap;
+}
+
+@mixin loading-animation($size: 50px, $color: dark) {
+	display: inline-block;
+	width: $size;
+	height: $size;
+	border-radius: 50%;
+	position: relative;
+	animation: rotate 1s linear infinite;
+
+	&::before {
+		content: "";
+		box-sizing: border-box;
+		position: absolute;
+		inset: 0px;
+		border-radius: 50%;
+
+		@if $color ==dark {
+			border: 1px solid var(--neutral-800);
+		}
+
+		@if $color ==light {
+			border: 1px solid var(--neutral-50);
+		}
+
+		animation: prixClipFix 2s linear infinite;
+	}
+
+	@keyframes rotate {
+		100% {
+			transform: rotate(360deg)
+		}
+	}
+
+	@keyframes prixClipFix {
+		0% {
+			clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
+		}
+
+		25% {
+			clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
+		}
+
+		50% {
+			clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
+		}
+
+		75% {
+			clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
+		}
+
+		100% {
+			clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
+		}
+	}
+}

package/dist/runtime/presets/default/assets/scss/reset.scss

@@ -0,0 +1,16 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin: 0;
+	padding: 0;
+}
+
+ul,
+li {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}

package/dist/runtime/presets/default/components/KAccordion/KAccordion.vue

@@ -4,6 +4,9 @@
 		slot
 </template>
 
-<script setup>
-
+<script lang="ts" setup>
+// Default template for KAccordion
 </script>
+
+<style lang="scss" scoped>
+</style>

package/dist/runtime/presets/default/components/KAccordion/KAccordionItem.vue

@@ -7,44 +7,47 @@
 		slot
 </template>
 
-<script setup>
-const props = defineProps({
-  title: { type: String, required: true },
-  isOpen: { type: Boolean, required: true },
-  toggleAccordion: { type: Function, required: true }
-});
+<script lang="ts" setup>
+const props = defineProps<{
+	title: string
+	isOpen: boolean
+	toggleAccordion: () => void
+}>()
 </script>
 
-<style scoped>
-.accordion-item__header {
-  padding: var(--component-gap);
-  background-color: var(--background-color-medium);
-  cursor: pointer;
-  border-radius: var(--box-border-radius);
-}
-.isOpen .accordion-item__header {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.accordion-item__title {
-  flex-grow: 1;
-}
-.accordion-item__chevron {
-  transform: rotate(90deg);
-  transition: transform 0.3s ease-in-out;
-}
-.accordion-item__chevron.open {
-  transform: rotate(270deg);
-}
-.accordion-item__content {
-  display: none;
-  padding-top: var(--box-padding);
-  padding-bottom: var(--box-padding);
-}
-.accordion-item__content.open {
-  border-bottom: var(--box-border);
-}
-.isOpen .accordion-item__content {
-  display: block;
+<style lang="scss" scoped>
+.accordion-item {
+	&__header {
+		padding: var(--component-gap);
+		background-color: var(--background-color-medium);
+		cursor: pointer;
+		border-radius: var(--box-border-radius);
+
+		.isOpen & {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+	}
+	&__title {
+		flex-grow: 1;
+	}
+	&__chevron {
+		transform: rotate(90deg);
+		transition: transform 0.3s ease-in-out;
+		&.open {
+			transform: rotate(270deg);
+		}
+	}
+	&__content {
+		display: none;
+		padding-top: var(--box-padding);
+		padding-bottom: var(--box-padding);
+		&.open {
+			border-bottom: var(--box-border);
+		}
+		.isOpen & {
+			display: block;
+		}
+	}
 }
 </style>

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

@@ -8,31 +8,38 @@
 	.info Selected {{props.selectedRows.length}} items
 </template>
 
-<script setup>
-import { computed } from "vue";
-import { CFlatClientDataProvider } from "@katlux/providers";
-const props = defineProps({
-  bulkActions: { type: Array, required: true },
-  selectedRows: { type: Array, required: true },
-  selectAll: { type: Boolean, required: true },
-  selected: { type: null, required: true },
-  dp: { type: Object, required: true },
-  doAction: { type: Function, required: true }
-});
-const emit = defineEmits(["update:selected"]);
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CFlatClientDataProvider } from '@katlux/providers'
+import type { IKDatatableAction } from '@katlux/providers'
+
+const props = defineProps<{
+	bulkActions: IKDatatableAction[]
+	selectedRows: any[]
+	selectAll: boolean
+	selected: any
+	dp: CFlatClientDataProvider
+	doAction: (action: any) => void
+}>()
+
+const emit = defineEmits<{
+	(e: 'update:selected', value: any): void
+}>()
+
 const internalSelected = computed({
-  get: () => props.selected,
-  set: (val) => emit("update:selected", val)
-});
+	get: () => props.selected,
+	set: (val) => emit('update:selected', val)
+})
+
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .k-bulk-actions {
-  display: flex;
-  gap: 10px;
-}
-.k-bulk-actions .info {
-  display: flex;
-  align-items: center;
+	display: flex;
+	gap: 10px;
+	.info {
+		display: flex;
+		align-items: center;
+	}
 }
 </style>