@katlux/toolkit 0.1.0-beta.5 → 0.1.0-beta.50

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

@@ -20,61 +20,65 @@
 				)
 </template>
 
-<script setup>
-const props = defineProps({
-  view: { type: String, required: true },
-  viewCount: { type: Number, required: true },
-  actualYear: { type: null, required: true },
-  monthSelectedDay: { type: null, required: true },
-  goToPrev: { type: Function, required: true },
-  goToNext: { type: Function, required: true },
-  getMonthName: { type: Function, required: true },
-  showingMonth: { type: Function, required: true },
-  showingYear: { type: Function, required: true },
-  getExpandedDefinedDays: { type: Function, required: true },
-  getExpandedMarkedDays: { type: Function, required: true },
-  dayClicked: { type: Function, required: true }
-});
+<script lang="ts" setup>
+import type { IMarkedDay, IDefinedDay } from '../../../../components/KCalendar/types'
+
+const props = defineProps<{
+	view: string
+	viewCount: number
+	actualYear: any
+	monthSelectedDay: any
+	goToPrev: () => void
+	goToNext: () => void
+	getMonthName: (i: number) => string
+	showingMonth: (i: number) => number
+	showingYear: (i: number) => number
+	getExpandedDefinedDays: (i: number) => IDefinedDay[]
+	getExpandedMarkedDays: (i: number) => IMarkedDay[]
+	dayClicked: (date: Date) => void
+}>()
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .KCalendar {
-  width: fit-content;
-}
-.KCalendar .view-header {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-}
-.KCalendar .view-header .prev,
-.KCalendar .view-header .next {
-  cursor: pointer;
-  transition: all 0.2s ease;
-  width: 28px;
-  height: 28px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px;
-}
-.KCalendar .view-header .prev:hover,
-.KCalendar .view-header .next:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.KCalendar .months {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--grid-gap);
-  max-width: 790px;
-  width: fit-content;
-}
-.KCalendar .months .month {
-  max-width: 250px;
-  min-width: 250px;
-}
-.KCalendar .months .month .month-name {
-  text-align: center;
+	width: fit-content;
+	.view-header {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+		.prev,
+		.next {
+			cursor: pointer;
+			transition: all 0.2s ease;
+			width: 28px;
+			height: 28px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border-radius: 4px;
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.05);
+			}
+		}
+	}
+	.months {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: var(--grid-gap);
+		max-width: 790px;
+		width: fit-content;
+		.month {
+			//flex: 0 0 calc(33.333% - (2 * var(--grid-gap)) / 3);
+			max-width: 250px;
+			min-width: 250px;
+			//max-width: calc(33% - var(--grid-gap));
+
+			.month-name {
+				text-align: center;
+			}
+		}
+	}
 }
 </style>

package/dist/runtime/presets/default/components/KCalendar/KCalendarMonth.vue

@@ -21,169 +21,197 @@
 				)
 </template>
 
-<script setup>
-const props = defineProps({
-  year: { type: Number, required: true },
-  month: { type: Number, required: true },
-  weekdays: { type: Array, required: true },
-  calendarDays: { type: Array, required: true },
-  isMarked: { type: Function, required: true },
-  isSelectedDay: { type: Function, required: true },
-  getMarkedDayClass: { type: Function, required: true },
-  selectDay: { type: Function, required: true },
-  getCalendarDaysData: { type: Function, required: true }
-});
+<script lang="ts" setup>
+import type { IMarkedDay } from '../../../../components/KCalendar/types'
+
+const props = defineProps<{
+	year: number
+	month: number
+	weekdays: string[]
+	calendarDays: (number|string)[]
+	isMarked: (day: number | string) => boolean
+	isSelectedDay: (day: number) => boolean
+	getMarkedDayClass: (day: number) => string
+	selectDay: (day: number) => void
+	getCalendarDaysData: (day: number) => IMarkedDay[]
+}>()
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@use 'sass:color';
+
 .KCalendarMonth {
-  width: 100%;
-}
-.KCalendarMonth .calendar-header {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  align-items: center;
-}
-.KCalendarMonth .calendar-header .weekday {
-  text-align: center;
-}
-.KCalendarMonth .calendar-days {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-}
-.KCalendarMonth .calendar-days .day {
-  text-align: center;
-  position: relative;
-  padding: 4px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  width: 28px;
-  height: 28px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-.KCalendarMonth .calendar-days .day:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.KCalendarMonth .calendar-days .day.marked:hover {
-  opacity: 0.8;
-}
-.KCalendarMonth .calendar-days .day.empty {
-  cursor: default;
-}
-.KCalendarMonth .calendar-days .day.empty:hover {
-  background-color: transparent;
-}
-.KCalendarMonth .calendar-days .day.success {
-  color: var(--accent-700);
-  background-color: var(--accent-100);
-}
-.KCalendarMonth .calendar-days .day.success:hover {
-  background-color: var(--accent-300);
-}
-.KCalendarMonth .calendar-days .day.error {
-  color: var(--error-color);
-  background-color: var(--error-color-light);
-}
-.KCalendarMonth .calendar-days .day.warning {
-  color: var(--warning-color);
-  background-color: var(--warning-color-light);
-}
-.KCalendarMonth .calendar-days .day.warning:hover {
-  background-color: var(--warning-color-light);
-}
-.KCalendarMonth .calendar-days .day.primary {
-  color: var(--primary-700);
-  background-color: var(--primary-100);
-}
-.KCalendarMonth .calendar-days .day.primary:hover {
-  background-color: var(--primary-300);
-}
-.KCalendarMonth .calendar-days .day.secondary {
-  color: var(--font-color-primary);
-  background-color: var(--neutral-100);
-}
-.KCalendarMonth .calendar-days .day.secondary:hover {
-  background-color: var(--neutral-200);
-}
-.KCalendarMonth .calendar-days .day.dark {
-  color: var(--font-color-light);
-  background-color: var(--neutral-700);
-}
-.KCalendarMonth .calendar-days .day.dark:hover {
-  background-color: var(--neutral-500);
-}
-.KCalendarMonth .calendar-days .day.offday {
-  font-style: italic;
-  color: var(--neutral-500);
-}
-.KCalendarMonth .calendar-days .day.bold {
-  font-weight: bold;
-}
-.KCalendarMonth .calendar-days .day.underlined {
-  text-decoration: underline;
-}
-.KCalendarMonth .calendar-days .day.disabled {
-  color: var(--neutral-400);
-  pointer-events: none;
-  background: var(--neutral-100);
-  opacity: 0.6;
-}
-.KCalendarMonth .calendar-days .day.circled .day-number {
-  display: inline-block;
-  border: 2px solid var(--primary-500);
-  border-radius: 50%;
-  box-sizing: border-box;
-  background: var(--background-color-light);
-}
-.KCalendarMonth .calendar-days .day.selected {
-  background-color: var(--primary-100);
-  color: var(--primary-700);
-}
-.KCalendarMonth .calendar-days .day.selected .day-number {
-  display: inline-block;
-  border: 2px solid var(--primary-900);
-  border-radius: 50%;
-  box-sizing: border-box;
-  background: var(--background-color-light);
-  width: 23px;
-}
-.KCalendarMonth .calendar-days .day .marked-indicators-row {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  display: flex;
-  gap: 2px;
-  z-index: 2;
-  flex-direction: column;
-}
-.KCalendarMonth .calendar-days .day .marked-indicators-row .marked-indicator {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  opacity: 0.7;
-  display: inline-block;
-}
-.KCalendarMonth .calendar-days .day .marked-indicators-row .marked-indicator.primary {
-  background-color: var(--primary-500);
-}
-.KCalendarMonth .calendar-days .day .marked-indicators-row .marked-indicator.success {
-  background-color: var(--success-color);
-}
-.KCalendarMonth .calendar-days .day .marked-indicators-row .marked-indicator.warning {
-  background-color: var(--warning-color);
-}
-.KCalendarMonth .calendar-days .day .marked-indicators-row .marked-indicator.error {
-  background-color: var(--error-color);
-}
-.KCalendarMonth .calendar-days .day .marked-indicators-row .marked-indicator.secondary {
-  background-color: var(--neutral-500);
-}
-.KCalendarMonth .calendar-days .day .marked-indicators-row .marked-indicator.dark {
-  background-color: var(--neutral-100);
+	width: 100%;
+	.calendar-header {
+		width: 100%;
+		display: grid;
+		grid-template-columns: repeat(7, 1fr);
+		align-items: center;
+
+		.weekday {
+			text-align: center;
+		}
+	}
+	.calendar-days {
+		display: grid;
+		grid-template-columns: repeat(7, 1fr);
+		.day {
+			text-align: center;
+			position: relative;
+			padding: 4px;
+			border-radius: 4px;
+			cursor: pointer;
+			transition: all 0.2s ease;
+			width: 28px;
+			height: 28px;
+
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: center;
+
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.05);
+			}
+
+			&.marked {
+				&:hover {
+					opacity: 0.8;
+				}
+			}
+
+			&.empty {
+				cursor: default;
+
+				&:hover {
+					background-color: transparent;
+				}
+			}
+
+			// Type-based styling
+			&.success {
+				color: var(--accent-700);
+				background-color: var(--accent-100);
+
+				&:hover {
+					background-color: var(--accent-300);
+				}
+			}
+
+			&.error {
+				color: var(--error-color);
+				background-color: var(--error-color-light);
+			}
+
+			&.warning {
+				color: var(--warning-color);
+				background-color: var(--warning-color-light);
+
+				&:hover {
+					background-color: var(--warning-color-light);
+				}
+			}
+
+			&.primary {
+				color: var(--primary-700);
+				background-color: var(--primary-100);
+
+				&:hover {
+					background-color: var(--primary-300);
+				}
+			}
+
+			&.secondary {
+				color: var(--font-color-primary);
+				background-color: var(--neutral-100);
+
+				&:hover {
+					background-color: var(--neutral-200);
+				}
+			}
+
+			&.dark {
+				color: var(--font-color-light);
+				background-color: var(--neutral-700);
+
+				&:hover {
+					background-color: var(--neutral-500);
+				}
+			}
+
+			&.offday {
+				font-style: italic;
+				color: var(--neutral-500);
+			}
+			&.bold {
+				font-weight: bold;
+			}
+			&.underlined {
+				text-decoration: underline;
+			}
+			&.disabled {
+				color: var(--neutral-400);
+				pointer-events: none;
+				background: var(--neutral-100);
+				opacity: 0.6;
+			}
+			&.circled {
+				.day-number {
+					display: inline-block;
+					border: 2px solid var(--primary-500);
+					border-radius: 50%;
+					box-sizing: border-box;
+					background: var(--background-color-light);
+				}
+			}
+			&.selected {
+				background-color: var(--primary-100);
+				color: var(--primary-700);
+				.day-number {
+					display: inline-block;
+					border: 2px solid var(--primary-900);
+					border-radius: 50%;
+					box-sizing: border-box;
+					background: var(--background-color-light);
+					width: 23px;
+				}
+			}
+			.marked-indicators-row {
+				position: absolute;
+				top: 2px;
+				right: 2px;
+				display: flex;
+				gap: 2px;
+				z-index: 2;
+				flex-direction: column;
+				.marked-indicator {
+					width: 6px;
+					height: 6px;
+					border-radius: 50%;
+					opacity: 0.7;
+					display: inline-block;
+
+					&.primary {
+						background-color: var(--primary-500);
+					}
+					&.success {
+						background-color: var(--success-color);
+					}
+					&.warning {
+						background-color: var(--warning-color);
+					}
+					&.error {
+						background-color: var(--error-color);
+					}
+					&.secondary {
+						background-color: var(--neutral-500);
+					}
+					&.dark {
+						background-color: var(--neutral-100);
+					}
+				}
+			}
+		}
+	}
 }
 </style>

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

@@ -7,45 +7,55 @@ label.KCheckbox
 		slot
 </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 }
-});
-const emit = defineEmits(["update:model"]);
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+// Default template for KCheckbox
+const props = defineProps<{
+	model: any
+	checkboxValue: any
+	isDisabled: boolean
+}>()
+
+const emit = defineEmits<{
+	(e: 'update:model', value: any): void
+}>()
+
 const internalModel = computed({
-  get: () => props.model,
-  set: (value) => emit("update:model", value)
-});
+	get: () => props.model,
+	set: (value) => emit('update:model', value)
+})
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .KCheckbox {
-  display: flex;
-  gap: 5px;
-  cursor: pointer;
-}
-.KCheckbox input {
-  display: none;
-}
-.KCheckbox .icon-container {
-  border: var(--input-border);
-  width: var(--box-padding);
-  height: var(--box-padding);
-  text-align: center;
-  line-height: var(--box-padding);
-  border-radius: var(--input-border-radius);
-  background-color: var(--checkbox-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.KCheckbox .icon {
-  display: none;
-}
-.KCheckbox :checked + .icon-container > .icon {
-  display: block;
+	display: flex;
+	gap: 5px;
+	cursor: pointer;
+	
+	input {
+		display: none;
+	}
+	
+	.icon-container {
+		border: var(--input-border);
+		width: var(--box-padding);
+		height: var(--box-padding);
+		text-align: center;
+		line-height: var(--box-padding);
+		border-radius: var(--input-border-radius);
+		background-color: var(--checkbox-bg);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.icon {
+		display: none;
+	}
+	
+	:checked + .icon-container > .icon {
+		display: block;
+	}
 }
 </style>

package/dist/runtime/presets/default/components/KCombobox/KCombobox.d.vue.ts

@@ -13,11 +13,14 @@ type __VLS_Props = {
     selectItem: (option: ComboboxItem) => void;
     isSelected: (option: ComboboxItem) => boolean;
     loading: boolean;
+    teleportTo?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:searchtext": (value: string) => any;
+    "update:isOptionsOpen": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:searchtext"?: ((value: string) => any) | undefined;
+    "onUpdate:isOptionsOpen"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;