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

package/dist/runtime/components/KDatePicker/KDatePicker.global.d.vue.ts

@@ -78,11 +78,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {
     isOpen: boolean;
-    modelValue: string | Date;
     day: string | Date;
+    modelValue: string | Date;
+    showClear: boolean;
     teleportTo: string;
     format: string;
-    showClear: boolean;
     calendarDefinedDays: import("../KCalendar/types.js").IDefinedDay[];
     calendarMarkedDays: import("../KCalendar/types.js").IMarkedDay[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/KDatePicker/KDatePicker.global.vue

@@ -42,9 +42,9 @@ const handleDateSelected = (date) => {
   dateSelected(date);
 };
 watch(_date, (newDate) => {
-  const d1 = newDate instanceof Date ? newDate.getTime() : new Date(newDate).getTime();
-  const d2 = props.modelValue instanceof Date ? props.modelValue.getTime() : new Date(props.modelValue || "").getTime();
-  const d3 = props.day instanceof Date ? props.day.getTime() : new Date(props.day || "").getTime();
+  const d1 = newDate && (newDate instanceof Date || typeof newDate === "string") ? newDate instanceof Date ? newDate.getTime() : new Date(newDate).getTime() : 0;
+  const d2 = props.modelValue && (props.modelValue instanceof Date || typeof props.modelValue === "string") ? props.modelValue instanceof Date ? props.modelValue.getTime() : new Date(props.modelValue).getTime() : 0;
+  const d3 = props.day && (props.day instanceof Date || typeof props.day === "string") ? props.day instanceof Date ? props.day.getTime() : new Date(props.day).getTime() : 0;
   if (d1 !== d2 && d1 !== d3) {
     emit("update:day", newDate);
     emit("update:modelValue", newDate);

package/dist/runtime/components/KDatePicker/KDatePicker.global.vue.d.ts

@@ -78,11 +78,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {
     isOpen: boolean;
-    modelValue: string | Date;
     day: string | Date;
+    modelValue: string | Date;
+    showClear: boolean;
     teleportTo: string;
     format: string;
-    showClear: boolean;
     calendarDefinedDays: import("../KCalendar/types.js").IDefinedDay[];
     calendarMarkedDays: import("../KCalendar/types.js").IMarkedDay[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/KDatePicker/KDatePicker.logic.js

@@ -70,12 +70,9 @@ export function useKDatePickerLogic(props) {
     calendarShow.value = true;
   };
   const dateSelected = (date) => {
-    console.log("Date selected:", date);
     _date.value = date;
     const formatted = formatDate(date);
-    console.log("Formatted date:", formatted);
     maskedModel.value = formatted;
-    console.log("maskedModel.value after update:", maskedModel.value);
     calendarShow.value = false;
   };
   const formatDate = (date) => {
@@ -89,50 +86,47 @@ export function useKDatePickerLogic(props) {
     return formattedDate;
   };
   onMounted(() => {
-    if (props.modelValue) {
-      _date.value = props.modelValue;
-    } else if (props.day) {
-      _date.value = props.day;
-    }
+    syncValue(props.modelValue || props.day);
     if (props.isOpen) {
       calendarShow.value = props.isOpen;
     }
-    if (_date.value) {
-      const initialDate = _date.value instanceof Date ? _date.value : new Date(_date.value);
-      if (!isNaN(initialDate.getTime())) {
-        maskedModel.value = formatDate(initialDate);
-      }
-    }
   });
+  const syncValue = (val) => {
+    if (val === void 0 || val === null || val === "") {
+      _date.value = "";
+      maskedModel.value = "";
+      return;
+    }
+    const d = val instanceof Date ? val : new Date(val);
+    if (!isNaN(d.getTime())) {
+      _date.value = val;
+      maskedModel.value = formatDate(d);
+    } else {
+      _date.value = "";
+      maskedModel.value = "";
+    }
+  };
   watch(() => props.day, (newDay) => {
-    if (newDay) {
-      const d1 = newDay instanceof Date ? newDay.getTime() : new Date(newDay).getTime();
-      const d2 = _date.value instanceof Date ? _date.value.getTime() : new Date(_date.value).getTime();
-      if (d1 !== d2) {
-        _date.value = newDay;
-        syncMaskedModel(newDay);
+    if (newDay !== void 0) {
+      const d1 = newDay && (newDay instanceof Date || typeof newDay === "string") ? newDay instanceof Date ? newDay.getTime() : new Date(newDay).getTime() : 0;
+      const d2 = _date.value instanceof Date ? _date.value.getTime() : new Date(_date.value || "").getTime();
+      if (d1 !== d2 || !newDay && _date.value) {
+        syncValue(newDay);
       }
     }
   });
   watch(() => props.modelValue, (newVal) => {
-    if (newVal) {
-      const d1 = newVal instanceof Date ? newVal.getTime() : new Date(newVal).getTime();
-      const d2 = _date.value instanceof Date ? _date.value.getTime() : new Date(_date.value).getTime();
-      if (d1 !== d2) {
-        _date.value = newVal;
-        syncMaskedModel(newVal);
+    if (newVal !== void 0) {
+      const d1 = newVal && (newVal instanceof Date || typeof newVal === "string") ? newVal instanceof Date ? newVal.getTime() : new Date(newVal).getTime() : 0;
+      const d2 = _date.value instanceof Date ? _date.value.getTime() : new Date(_date.value || "").getTime();
+      if (d1 !== d2 || !newVal && _date.value) {
+        syncValue(newVal);
       }
     }
   });
   watch(() => props.isOpen, (newVal) => {
     calendarShow.value = !!newVal;
   });
-  const syncMaskedModel = (val) => {
-    const d = val instanceof Date ? val : new Date(val);
-    if (!isNaN(d.getTime())) {
-      maskedModel.value = formatDate(d);
-    }
-  };
   const calendarDay = computed(() => {
     const val = props.modelValue || props.day;
     if (val) {

package/dist/runtime/components/KDateTimePicker/KDateTimePicker.global.d.vue.ts

@@ -92,11 +92,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {
     isOpen: boolean;
-    modelValue: string | Date;
     day: string | Date;
+    modelValue: string | Date;
+    showClear: boolean;
     teleportTo: string;
     format: string;
-    showClear: boolean;
     calendarDefinedDays: import("../KCalendar/types.js").IDefinedDay[];
     calendarMarkedDays: import("../KCalendar/types.js").IMarkedDay[];
     timeFormat: string;

package/dist/runtime/components/KDateTimePicker/KDateTimePicker.global.vue

@@ -46,17 +46,11 @@ const updateCalendarShow = (val) => {
   calendarShow.value = val;
 };
 watch(_date, (newDate) => {
-  if (!newDate) {
-    if (props.modelValue || props.day) {
-      emit("update:modelValue", "");
-    }
-    return;
-  }
-  const d1 = newDate instanceof Date ? newDate.getTime() : new Date(newDate).getTime();
-  const d2 = props.modelValue instanceof Date ? props.modelValue.getTime() : new Date(props.modelValue || "").getTime();
-  const d3 = props.day instanceof Date ? props.day.getTime() : new Date(props.day || "").getTime();
+  const d1 = newDate && (newDate instanceof Date || typeof newDate === "string") ? newDate instanceof Date ? newDate.getTime() : new Date(newDate).getTime() : 0;
+  const d2 = props.modelValue && (props.modelValue instanceof Date || typeof props.modelValue === "string") ? props.modelValue instanceof Date ? props.modelValue.getTime() : new Date(props.modelValue).getTime() : 0;
+  const d3 = props.day && (props.day instanceof Date || typeof props.day === "string") ? props.day instanceof Date ? props.day.getTime() : new Date(props.day).getTime() : 0;
   if (d1 !== d2 && d1 !== d3) {
-    emit("update:modelValue", newDate);
+    emit("update:modelValue", newDate || "");
   }
 });
 watch(calendarShow, (newVal) => {

package/dist/runtime/components/KDateTimePicker/KDateTimePicker.global.vue.d.ts

@@ -92,11 +92,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {
     isOpen: boolean;
-    modelValue: string | Date;
     day: string | Date;
+    modelValue: string | Date;
+    showClear: boolean;
     teleportTo: string;
     format: string;
-    showClear: boolean;
     calendarDefinedDays: import("../KCalendar/types.js").IDefinedDay[];
     calendarMarkedDays: import("../KCalendar/types.js").IMarkedDay[];
     timeFormat: string;

package/dist/runtime/components/KDateTimePicker/KDateTimePicker.logic.js

@@ -131,6 +131,8 @@ export function useKDateTimePickerLogic(props) {
         const timeStr = _time.value || "00:00";
         maskedModel.value = `${dateStr} ${timeStr}`;
       }
+    } else {
+      maskedModel.value = "";
     }
   };
   const formatDate = (date) => {
@@ -158,7 +160,12 @@ export function useKDateTimePickerLogic(props) {
     }
   });
   const syncValue = (val) => {
-    if (!val) return;
+    if (val === void 0 || val === null || val === "") {
+      _date.value = "";
+      _time.value = "";
+      maskedModel.value = "";
+      return;
+    }
     if (val instanceof Date) {
       _date.value = val;
       const h = val.getHours().toString().padStart(2, "0");
@@ -178,19 +185,19 @@ export function useKDateTimePickerLogic(props) {
     updateMaskedModel();
   };
   watch(() => props.modelValue, (newVal) => {
-    if (newVal) {
-      const d1 = newVal instanceof Date ? newVal.getTime() : new Date(newVal).getTime();
-      const d2 = _date.value instanceof Date ? _date.value.getTime() : new Date(_date.value).getTime();
-      if (d1 !== d2) {
+    if (newVal !== void 0) {
+      const d1 = newVal && (newVal instanceof Date || typeof newVal === "string") ? newVal instanceof Date ? newVal.getTime() : new Date(newVal).getTime() : 0;
+      const d2 = _date.value instanceof Date ? _date.value.getTime() : new Date(_date.value || "").getTime();
+      if (d1 !== d2 || !newVal && _date.value) {
         syncValue(newVal);
       }
     }
   });
   watch(() => props.day, (newDay) => {
-    if (newDay) {
-      const d1 = newDay instanceof Date ? newDay.getTime() : new Date(newDay).getTime();
-      const d2 = _date.value instanceof Date ? _date.value.getTime() : new Date(_date.value).getTime();
-      if (d1 !== d2) {
+    if (newDay !== void 0) {
+      const d1 = newDay && (newDay instanceof Date || typeof newDay === "string") ? newDay instanceof Date ? newDay.getTime() : new Date(newDay).getTime() : 0;
+      const d2 = _date.value instanceof Date ? _date.value.getTime() : new Date(_date.value || "").getTime();
+      if (d1 !== d2 || !newDay && _date.value) {
         syncValue(newDay);
       }
     }

package/dist/runtime/components/KHourPicker/KHourPicker.global.d.vue.ts

@@ -83,8 +83,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     disabled: boolean;
     modelValue: string;
     placeholder: string;
-    format: string;
     showClear: boolean;
+    format: string;
     step: number;
     startHour: string;
     endHour: string;

package/dist/runtime/components/KHourPicker/KHourPicker.global.vue.d.ts

@@ -83,8 +83,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     disabled: boolean;
     modelValue: string;
     placeholder: string;
-    format: string;
     showClear: boolean;
+    format: string;
     step: number;
     startHour: string;
     endHour: string;

package/dist/runtime/components/KIcon/KIcon.logic.js

@@ -26,12 +26,17 @@ export function useKIconLogic(props) {
       iconMap[match[1]] = modules[path];
     }
   }
-  const widthPx = computed(
-    () => typeof props.width === "number" || typeof props.width === "string" ? `${props.width}px` : props.width
-  );
-  const heightPx = computed(
-    () => typeof props.height === "number" || typeof props.height === "string" ? `${props.height}px` : props.height ? props.height : "12px"
-  );
+  const formatSize = (val) => {
+    if (val === void 0 || val === null || val === "") return void 0;
+    if (typeof val === "number") return `${val}px`;
+    if (typeof val === "string") {
+      if (/^\d+$/.test(val)) return `${val}px`;
+      return val;
+    }
+    return val;
+  };
+  const widthPx = computed(() => formatSize(props.width));
+  const heightPx = computed(() => formatSize(props.height) || "12px");
   const iconComponent = computed(() => iconMap[props.iconname] || null);
   return {
     widthPx,

package/dist/runtime/components/KTextbox/KTextbox.logic.d.ts

@@ -12,7 +12,7 @@ export interface KTextboxEmits {
  */
 export declare function useKTextboxLogic(props: KTextboxProps, emit: KTextboxEmits): {
     text: import("vue").WritableComputedRef<string, string>;
-    showClear: import("vue").ComputedRef<boolean | undefined>;
+    showClear: import("vue").ComputedRef<boolean>;
     clear: () => void;
 };
 /**

package/dist/runtime/components/KTextbox/KTextbox.logic.js

@@ -5,7 +5,7 @@ export function useKTextboxLogic(props, emit) {
     set: (value) => emit("update:modelValue", value)
   });
   const showClear = computed(() => {
-    return props.showClear && text.value !== "";
+    return !!props.showClear && text.value !== "";
   });
   const clear = () => {
     text.value = "";

package/dist/runtime/components/KTree/KTree.global.d.vue.ts

@@ -66,8 +66,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
 }>> & Readonly<{}>, {
     disabled: boolean;
-    searchtext: string;
     labelField: string;
+    searchtext: string;
     multiSelect: boolean;
     iconField: string;
     isNodeSelected: (node: any) => boolean;

package/dist/runtime/components/KTree/KTree.global.vue.d.ts

@@ -66,8 +66,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
 }>> & Readonly<{}>, {
     disabled: boolean;
-    searchtext: string;
     labelField: string;
+    searchtext: string;
     multiSelect: boolean;
     iconField: string;
     isNodeSelected: (node: any) => boolean;

package/dist/runtime/components/KTreePicker/KTreePicker.global.d.vue.ts

@@ -106,9 +106,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     disabled: boolean;
     loading: boolean;
     modelValue: any;
-    searchbox: boolean;
-    placeholder: string;
     dataProvider: any;
+    placeholder: string;
+    searchbox: boolean;
     closeOnSelect: boolean;
     multiSelect: boolean;
     iconField: string;

package/dist/runtime/components/KTreePicker/KTreePicker.global.vue.d.ts

@@ -106,9 +106,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     disabled: boolean;
     loading: boolean;
     modelValue: any;
-    searchbox: boolean;
-    placeholder: string;
     dataProvider: any;
+    placeholder: string;
+    searchbox: boolean;
     closeOnSelect: boolean;
     multiSelect: boolean;
     iconField: string;

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

@@ -17,8 +17,10 @@ type __VLS_Props = {
 };
 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/KCombobox.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.KCombobox(ref="activatorRef" v-click-outside="closeDropdown" :class="{ disabled: disabled, open: isOptionsOpen }")
+.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(
@@ -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" :anchorEl="activatorRef" fullWidth :teleportTo="teleportTo").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"
@@ -47,12 +47,18 @@ const props = defineProps<{
 
 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)
 })
+
+const isOptionsOpenModel = computed({
+	get: () => props.isOptionsOpen,
+	set: (value) => emit('update:isOptionsOpen', value)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -74,6 +80,8 @@ const searchtextModel = computed({
 	.chevron {
 		transform: rotate(90deg);
 		transition: transform 0.3s ease-in-out;
+		flex-shrink: 0;
+		min-width: 20px;
 	}
 	&.open {
 		.chevron {

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

@@ -17,8 +17,10 @@ type __VLS_Props = {
 };
 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)

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>