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

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

@@ -1,6 +1,6 @@
 <template lang="pug">
-.KCombobox(v-click-outside="closeDropdown" :class="{ disabled: disabled, open: isOptionsOpen }")
-	KGrid(@click.stop="toggleDropdown"  align="center" justify="space-between").KCombobox__selected-content-container
+.KCombobox(ref="activatorRef" :class="{ disabled: disabled, open: isOptionsOpen }")
+	KGrid(@click.stop="toggleDropdown" align="center" justify="space-between").KCombobox__selected-content-container
 		KGrid(align="center" wrap="no-wrap").KCombobox__selected-content 
 			.KCombobox__selected-content-item(
 				v-if="getSelectedContent().length>0"
@@ -8,8 +8,8 @@
 				:key="item.value || item.id || index"
 			) {{ item[labelField] }}
 			.KCombobox__selected-content-placeholder(v-else) {{placeholder}}
-		KIcon(iconname="chevron" width="12" height="12").chevron
-	KDropdown(:isOpen="isOptionsOpen" fullWidth).KCombobox__options
+		KIcon(iconname="chevron" width="20" height="20").chevron
+	KDropdown(v-model:isOpen="isOptionsOpenModel" :anchorEl="activatorRef" fullWidth :teleportTo="teleportTo").KCombobox__options
 		slot
 			KComboboxList(
 				:searchbox="searchbox"
@@ -22,75 +22,95 @@
 			)
 </template>
 
-<script setup>
-import KComboboxList from "./KComboboxList.vue";
-const props = defineProps({
-  disabled: { type: Boolean, required: true },
-  isOptionsOpen: { type: Boolean, required: true },
-  labelField: { type: String, required: true },
-  placeholder: { type: String, required: true },
-  searchbox: { type: Boolean, required: true },
-  searchtext: { type: String, required: true },
-  filteredOptions: { type: Array, required: true },
-  getSelectedContent: { type: Function, required: true },
-  toggleDropdown: { type: Function, required: true },
-  closeDropdown: { type: Function, required: true },
-  selectItem: { type: Function, required: true },
-  isSelected: { type: Function, required: true },
-  loading: { type: Boolean, required: true }
-});
-const emit = defineEmits(["update:searchtext"]);
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+const activatorRef = ref<HTMLElement | null>(null)
+import KComboboxList from './KComboboxList.vue'
+import type { ComboboxItem } from '../../../../components/KCombobox/KCombobox.logic'
+
+const props = defineProps<{
+	disabled: boolean
+	isOptionsOpen: boolean
+	labelField: string
+	placeholder: string
+	searchbox: boolean
+	searchtext: string
+	filteredOptions: any[]
+	getSelectedContent: () => any[]
+	toggleDropdown: () => void
+	closeDropdown: () => void
+	selectItem: (option: ComboboxItem) => void
+	isSelected: (option: ComboboxItem) => boolean
+	loading: boolean
+	teleportTo?: string
+}>()
+
+const emit = defineEmits<{
+	(e: 'update:searchtext', value: string): void
+	(e: 'update:isOptionsOpen', value: boolean): void
+}>()
+
 const searchtextModel = computed({
-  get: () => props.searchtext,
-  set: (value) => emit("update:searchtext", value)
-});
+	get: () => props.searchtext,
+	set: (value) => emit('update:searchtext', value)
+})
+
+const isOptionsOpenModel = computed({
+	get: () => props.isOptionsOpen,
+	set: (value) => emit('update:isOptionsOpen', value)
+})
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .KCombobox {
-  box-sizing: border-box;
-  width: 200px;
-  border: var(--input-border);
-  border-radius: var(--input-border-radius);
-  padding: 0px var(--component-gap);
-  background-color: var(--neutral-50);
-  height: 40px;
-  position: relative;
-}
-.KCombobox__selected-content-container {
-  cursor: pointer;
-  box-sizing: border-box;
-  height: 100%;
-}
-.KCombobox .chevron {
-  transform: rotate(90deg);
-  transition: transform 0.3s ease-in-out;
-}
-.KCombobox.open .chevron {
-  transform: rotate(270deg);
-}
-.KCombobox.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.KCombobox__selected-content {
-  height: 100%;
-  max-width: calc(100% - 40px);
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  gap: var(--component-gap);
-}
-.KCombobox__selected-content-item {
-  padding: calc(var(--component-gap) / 2);
-  border: var(--input-border);
-  border-radius: var(--input-border-radius);
-  background-color: var(--input-button-bg);
-}
-.KCombobox__selected-content-item:hover {
-  background-color: var(--input-button-hover-bg);
-}
-.KCombobox__selected-content-placeholder {
-  color: var(--neutral-400);
+	box-sizing: border-box;
+	border: var(--input-border);
+	border-radius: var(--input-border-radius);
+	padding: 0px var(--component-gap);
+
+	background-color: var(--neutral-50);
+	height: 40px;
+	position: relative;
+	&__selected-content-container {
+		cursor: pointer;
+
+		box-sizing: border-box;
+		height: 100%;
+	}
+	.chevron {
+		transform: rotate(90deg);
+		transition: transform 0.3s ease-in-out;
+		flex-shrink: 0;
+		min-width: 20px;
+	}
+	&.open {
+		.chevron {
+			transform: rotate(270deg);
+		}
+	}
+	&.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	&__selected-content {
+		height: 100%;
+		max-width: calc(100% - 40px);
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+		gap: var(--component-gap);
+		&-item {
+			padding: calc(var(--component-gap) / 2);
+			border: var(--input-border);
+			border-radius: var(--input-border-radius);
+			background-color: var(--input-button-bg);
+			&:hover {
+				background-color: var(--input-button-hover-bg);
+			}
+		}
+	}
+	&__selected-content-placeholder {
+		color: var(--neutral-400);
+	}
 }
 </style>

package/dist/runtime/presets/default/components/KCombobox/KCombobox.vue.d.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;

package/dist/runtime/presets/default/components/KCombobox/KComboboxList.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .KCombobox__options-content
-	KTextbox(v-if="searchbox" v-model="searchtextModel" placeholder="Search..." showClear)
+	KTextbox(v-if="searchbox" v-model="searchtextModel" placeholder="Search..." :showClear="true")
 	.KCombobox__loading(v-if="loading")
 		.KCombobox__loading-spinner
 	ul.KCombobox__options-list(v-else)
@@ -10,73 +10,91 @@
 			@click.stop="selectItem(option)"
 		)
 			KGrid(align="center" justify="space-between" wrap="nowrap")
-				span {{ option[labelField] }}
+				span.KCombobox__options-list-item__text {{ option[labelField] }}
 				KIcon(iconname="check" width="12" height="12" :class="{'visible': isSelected(option)}")
 </template>
 
-<script setup>
-const props = defineProps({
-  searchbox: { type: Boolean, required: true },
-  searchtext: { type: String, required: true },
-  loading: { type: Boolean, required: true },
-  filteredOptions: { type: Array, required: true },
-  labelField: { type: String, required: true },
-  selectItem: { type: Function, required: true },
-  isSelected: { type: Function, required: true }
-});
-const emit = defineEmits(["update:searchtext"]);
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type { ComboboxItem } from '../../../../components/KCombobox/KCombobox.logic'
+
+const props = defineProps<{
+	searchbox: boolean
+	searchtext: string
+	loading: boolean
+	filteredOptions: any[]
+	labelField: string
+	selectItem: (option: ComboboxItem) => void
+	isSelected: (option: ComboboxItem) => boolean
+}>()
+
+const emit = defineEmits<{
+	(e: 'update:searchtext', value: string): void
+}>()
+
 const searchtextModel = computed({
-  get: () => props.searchtext,
-  set: (value) => emit("update:searchtext", value)
-});
+	get: () => props.searchtext,
+	set: (value) => emit('update:searchtext', value)
+})
 </script>
 
-<style scoped>
-.KCombobox__options-content {
-  margin: -var(--grid-gap);
-}
-.KCombobox__options-list {
-  max-height: 500px;
-  overflow-y: auto;
-}
-.KCombobox__options-list-item {
-  cursor: pointer;
-  height: 40px;
-  padding: 10px;
-  box-sizing: border-box;
-  border-bottom: 1px solid var(--border-color-light);
-}
-.KCombobox__options-list-item:hover {
-  background-color: var(--background-color-medium);
-}
-.KCombobox__options-list-item:last-child {
-  border-bottom: none;
-}
-.KCombobox__options-list .KIcon {
-  visibility: hidden;
-}
-.KCombobox__options-list .KIcon.visible {
-  visibility: visible;
-  width: 12px;
+<style lang="scss" scoped>
+.KCombobox__options {
+	&-content {
+		margin: -var(--grid-gap);
+	}
+	&-list {
+		max-height: 500px;
+		overflow-y: auto;
+		&-item {
+			cursor: pointer;
+			height: 40px;
+			padding: 10px;
+			box-sizing: border-box;
+
+			border-bottom: 1px solid var(--border-color-light);
+			&:hover {
+				background-color: var(--background-color-medium);
+			}
+			&:last-child {
+				border-bottom: none;
+			}
+			&__text {
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;	
+			}
+		}
+
+		.KIcon {
+			visibility: hidden;
+			&.visible {
+				visibility: visible;
+				width: 12px;
+			}
+		}
+	}
 }
 
 .KCombobox__loading {
-  padding: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.KCombobox__loading-spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--border-color-light);
-  border-top-color: var(--primary-color-500);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+	padding: 10px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	&-spinner {
+		width: 20px;
+		height: 20px;
+		border: 2px solid var(--border-color-light);
+		border-top-color: var(--primary-color-500);
+		border-radius: 50%;
+		animation: spin 0.8s linear infinite;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
 }
 </style>

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

@@ -0,0 +1,27 @@
+import type { ADataProvider } from '@katlux/providers';
+type __VLS_Props = {
+    selectionValue: any;
+    inputValue: any;
+    modelValue: any[];
+    dataProvider: ADataProvider;
+    type: string;
+    selectionSide: string;
+    inputType: any;
+    mask: string;
+    labelField: string;
+    valueField: string;
+    placeholder: string;
+    inputPlaceholder: string;
+    searchbox: boolean;
+    showClear: boolean;
+    teleportTo?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:selectionValue": (value: any) => any;
+    "update:inputValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:selectionValue"?: ((value: any) => any) | undefined;
+    "onUpdate:inputValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,190 @@
+<template lang="pug">
+.KCompositeInput(:class="{'selection-right': selectionSide === 'right'}")
+	KGrid(gap="0" align="stretch")
+		//- Selection Combobox
+		.KCompositeInput-selection(:style="selectionStyle")
+			KCombobox(
+				v-model="selectionValue"
+				:dataProvider="dataProvider"
+				:labelField="labelField"
+				:valueField="valueField"
+				:placeholder="placeholder"
+				:searchbox="searchbox"
+				closeOnSelect
+				:teleportTo="teleportTo"
+			)
+		
+		//- Secondary Input
+		.KCompositeInput-main
+			template(v-if="type === 'textbox'")
+				KTextbox(
+					v-model="inputValue"
+					:type="inputType"
+					:placeholder="inputPlaceholder"
+					:showClear="showClear"
+				)
+			template(v-else-if="type === 'textarea'")
+				KTextarea(
+					v-model="inputValue"
+					:placeholder="inputPlaceholder"
+				)
+			template(v-else-if="type === 'maskedtextbox'")
+				KMaskTextbox(
+					v-model="inputValue"
+					:mask="mask"
+					:placeholder="inputPlaceholder"
+					:showClear="showClear"
+				)
+			template(v-else-if="type === 'combobox'")
+				//- For internal combobox, we assume same items for now or specific logic could be added
+				KCombobox(
+					v-model="inputValue"
+					:dataProvider="dataProvider"
+					:labelField="labelField"
+					:valueField="valueField"
+					:placeholder="inputPlaceholder"
+					:searchbox="searchbox"
+					:teleportTo="teleportTo"
+				)
+			template(v-else-if="type === 'datepicker'")
+				KDatePicker(
+					v-model="inputValue"
+					:placeholder="inputPlaceholder"
+					:showClear="showClear"
+				)
+			template(v-else-if="type === 'datetimepicker'")
+				KDateTimePicker(
+					v-model="inputValue"
+					:placeholder="inputPlaceholder"
+					:showClear="showClear"
+				)
+			template(v-else-if="type === 'hourpicker'")
+				KHourPicker(
+					v-model="inputValue"
+					:placeholder="inputPlaceholder"
+					:showClear="showClear"
+				)
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type { ADataProvider } from '@katlux/providers'
+
+const props = defineProps<{
+	selectionValue: any
+	inputValue: any
+	modelValue: any[]
+	dataProvider: ADataProvider
+	type: string
+	selectionSide: string
+	inputType: any
+	mask: string
+	labelField: string
+	valueField: string
+	placeholder: string
+	inputPlaceholder: string
+	searchbox: boolean
+	showClear: boolean
+	teleportTo?: string
+}>()
+
+const emit = defineEmits<{
+	(e: 'update:selectionValue', value: any): void
+	(e: 'update:inputValue', value: any): void
+}>()
+
+const selectionValue = computed({
+	get: () => props.selectionValue,
+	set: (val) => emit('update:selectionValue', val)
+})
+
+const inputValue = computed({
+	get: () => props.inputValue,
+	set: (val) => emit('update:inputValue', val)
+})
+
+const selectionStyle = computed(() => ({
+	width: '120px', // Default width for selection, can be made prop if needed
+	flex: '0 0 auto'
+}))
+</script>
+
+<style lang="scss" scoped>
+.KCompositeInput {
+	width: 100%;
+	
+	:deep(.KGrid) {
+		border: 1px solid var(--neutral-200);
+		border-radius: var(--radius-md);
+		overflow: hidden;
+		background: var(--neutral-50);
+		
+		&:focus-within {
+			border-color: var(--primary-500);
+			box-shadow: 0 0 0 2px var(--primary-100);
+		}
+	}
+
+	&-selection {
+		border-right: 1px solid var(--neutral-200);
+		
+		:deep(.KCombobox) {
+			.KCombobox-trigger {
+				border: none !important;
+				border-radius: 0 !important;
+				background: var(--neutral-100) !important;
+				height: 100%;
+			}
+		}
+	}
+
+	&-main {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		align-items: center;
+		
+		:deep(.KTextbox), :deep(.KTextarea), :deep(.KMaskTextbox), :deep(.KCombobox),
+		:deep(.KDatePicker), :deep(.KDateTimePicker), :deep(.KHourPicker) {
+			width: 100%;
+			border: none !important;
+			background: transparent !important;
+			box-shadow: none !important;
+
+			// Target inputs and triggers
+			input, textarea, .KCombobox-trigger {
+				border: none !important;
+				border-radius: 0 !important;
+				background: transparent !important;
+				box-shadow: none !important;
+				outline: none !important;
+				padding: 0 12px !important;
+			}
+			
+			// Ensure secondary inputs (like in MaskTextbox) are also borderless
+			:deep(.KTextbox), :deep(.KMaskTextbox) {
+				border: none !important;
+				background: transparent !important;
+				box-shadow: none !important;
+				width: 100%;
+			}
+
+			// Do NOT force height on icons, let flexbox handle it
+			.closeIcon, .KIcon {
+				margin: 0 8px !important;
+				flex-shrink: 0;
+			}
+		}
+	}
+
+	&.selection-right {
+		.KGrid {
+			flex-direction: row-reverse;
+		}
+		.KCompositeInput-selection {
+			border-right: none;
+			border-left: 1px solid var(--neutral-200);
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,27 @@
+import type { ADataProvider } from '@katlux/providers';
+type __VLS_Props = {
+    selectionValue: any;
+    inputValue: any;
+    modelValue: any[];
+    dataProvider: ADataProvider;
+    type: string;
+    selectionSide: string;
+    inputType: any;
+    mask: string;
+    labelField: string;
+    valueField: string;
+    placeholder: string;
+    inputPlaceholder: string;
+    searchbox: boolean;
+    showClear: boolean;
+    teleportTo?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:selectionValue": (value: any) => any;
+    "update:inputValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:selectionValue"?: ((value: any) => any) | undefined;
+    "onUpdate:inputValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;