@katlux/toolkit 0.1.0-beta.4 → 0.1.0-beta.41

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.css

@@ -37,14 +37,44 @@ li {
   --neutral-700: #616161;
   --neutral-800: #424242;
   --neutral-900: #212121;
+  --yellow-100: #fef9c3;
+  --yellow-300: #fde047;
+  --yellow-500: #eab308;
+  --yellow-700: #a16207;
+  --yellow-900: #713f12;
+  --red-100: #fee2e2;
+  --red-300: #fca5a5;
+  --red-500: #ef4444;
+  --red-700: #b91c1c;
+  --red-900: #7f1d1d;
+  --blue-100: #dbeafe;
+  --blue-300: #93c5fd;
+  --blue-500: #3b82f6;
+  --blue-700: #1d4ed8;
+  --blue-900: #1e3a8a;
+  --pink-100: #fce7f3;
+  --pink-300: #f9a8d4;
+  --pink-500: #ec4899;
+  --pink-700: #be185d;
+  --pink-900: #831843;
+  --cyan-100: #cffafe;
+  --cyan-300: #67e8f9;
+  --cyan-500: #06b6d4;
+  --cyan-700: #0e7490;
+  --cyan-900: #164e63;
+  --green-100: #dcfce7;
+  --green-300: #86efac;
+  --green-500: #22c55e;
+  --green-700: #15803d;
+  --green-900: #14532d;
   --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);
+  --warning-color: var(--yellow-500);
+  --warning-color-light: var(--yellow-100);
+  --error-color: var(--red-500);
+  --error-color-light: var(--red-100);
+  --info-color: var(--cyan-500);
+  --info-color-light: var(--cyan-100);
   --font-color-primary: var(--neutral-800);
   --font-color-secondary: var(--neutral-600);
   --font-color-heading: var(--neutral-900);
@@ -98,19 +128,37 @@ li {
   --button-hover-bg-success: var(--accent-700);
   --button-bg-warning: var(--warning-color);
   --button-text-warning: var(--neutral-900);
-  --button-hover-bg-warning: #e6ac00;
+  --button-hover-bg-warning: var(--yellow-700);
   --button-bg-danger: var(--error-color);
   --button-text-danger: var(--font-color-light);
-  --button-hover-bg-danger: #d32f2f;
+  --button-hover-bg-danger: var(--red-700);
   --button-bg-info: var(--info-color);
   --button-text-info: var(--font-color-light);
-  --button-hover-bg-info: var(--primary-300);
+  --button-hover-bg-info: var(--cyan-700);
   --button-bg-light: var(--neutral-50);
   --button-text-light: var(--neutral-900);
   --button-hover-bg-light: var(--neutral-200);
   --button-bg-dark: var(--neutral-900);
   --button-text-dark: var(--font-color-light);
   --button-hover-bg-dark: var(--neutral-700);
+  --panel-bg-default: var(--yellow-300);
+  --panel-header-bg-default: var(--yellow-500);
+  --panel-footer-bg-default: var(--blue-100);
+  --panel-bg-primary: var(--blue-300);
+  --panel-header-bg-primary: var(--blue-500);
+  --panel-footer-bg-primary: var(--blue-100);
+  --panel-bg-success: var(--green-300);
+  --panel-header-bg-success: var(--green-500);
+  --panel-footer-bg-success: var(--green-100);
+  --panel-bg-warning: var(--yellow-300);
+  --panel-header-bg-warning: var(--yellow-500);
+  --panel-footer-bg-warning: var(--yellow-100);
+  --panel-bg-danger: var(--red-300);
+  --panel-header-bg-danger: var(--red-500);
+  --panel-footer-bg-danger: var(--red-100);
+  --panel-bg-info: var(--cyan-300);
+  --panel-header-bg-info: var(--cyan-500);
+  --panel-footer-bg-info: var(--cyan-100);
   --input-border-radius: var(--border-radius-sm);
   --input-border-color: var(--border-color-medium);
   --input-focus-border-color: var(--primary-500);
@@ -119,7 +167,7 @@ li {
   --table-header-color: var(--neutral-700);
   --table-border-color: var(--neutral-300);
   --table-row-hover: var(--neutral-100);
-  --table-row-selected: #e3f2fd;
+  --table-row-selected: var(--blue-100);
   --checkbox-bg: var(--neutral-50);
   --checkbox-checked-bg: var(--primary-500);
   --checkbox-border-color: var(--border-color-medium);
@@ -144,12 +192,12 @@ li {
   --input-button-hover-bg: var(--neutral-400);
   --input-button-font-color: var(--font-color-primary);
   --input-focus-border-color: var(--primary-500);
-  --button-hover-bg-danger: #d32f2f;
-  --button-hover-bg-info: var(--primary-300);
+  --button-hover-bg-danger: var(--red-700);
+  --button-hover-bg-info: var(--cyan-700);
   --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-warning: var(--yellow-700);
   --button-hover-bg-dark: var(--neutral-700);
   --button-text-danger: var(--font-color-light);
   --button-text-primary: var(--font-color-light);
@@ -208,4 +256,12 @@ li {
 }
 .content .important p {
   margin: 0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--layout-content-bg);
+  font-family: var(--font-family);
+  color: var(--font-color-primary);
 }

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

@@ -0,0 +1,12 @@
+@use "reset";
+@use "css-variables";
+@use "docs";
+@forward "mixins";
+
+body {
+	margin: 0;
+	padding: 0;
+	background-color: var(--layout-content-bg);
+	font-family: var(--font-family);
+	color: var(--font-color-primary);
+}

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>