@katlux/toolkit 0.1.0-beta.44 → 0.1.0-beta.46

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

@@ -5,9 +5,11 @@ type __VLS_Props = {
     _date: any;
     calendarDay: Date | string;
     format: string;
+    showClear: boolean;
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
     textboxClicked: () => void;
+    onClear?: () => void;
     dateSelected: (date: Date) => void;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {

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

@@ -1,6 +1,6 @@
 <template lang="pug">
 .KDatePicker(ref="activatorRef")
-	KMaskTextbox(v-model="maskedModel" :key="maskedModel" :mask="format" :placeholder="format" @click.stop="textboxClicked" showClear)
+	KMaskTextbox(v-model="maskedModel" :key="maskedModel" :mask="format" :placeholder="format" @click.stop="textboxClicked" :showClear="showClear" @clear="onClear")
 	KDropdown(v-model:isOpen="calendarShow" :anchorEl="activatorRef")
 		KCalendar(view="month" :viewCount="1" :day="calendarDay" :selectedDay="_date" @dayClicked="dateSelected" :definedDays="calendarDefinedDays" :markedDays="calendarMarkedDays")
 </template>
@@ -19,9 +19,11 @@ const props = defineProps<{
 	_date: any
 	calendarDay: Date | string
 	format: string
+	showClear: boolean
 	calendarDefinedDays: IDefinedDay[]
 	calendarMarkedDays: IMarkedDay[]
 	textboxClicked: () => void
+	onClear?: () => void
 	dateSelected: (date: Date) => void
 }>()
 

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

@@ -5,9 +5,11 @@ type __VLS_Props = {
     _date: any;
     calendarDay: Date | string;
     format: string;
+    showClear: boolean;
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
     textboxClicked: () => void;
+    onClear?: () => void;
     dateSelected: (date: Date) => void;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {

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

@@ -10,7 +10,9 @@ type __VLS_Props = {
     timeStep: number;
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
+    showClear: boolean;
     textboxClicked: () => void;
+    onClear?: () => void;
     dateSelected: (date: Date) => void;
     timeSelected: (time: string) => void;
 };

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

@@ -1,6 +1,6 @@
 <template lang="pug">
 .KDateTimePicker(ref="activatorRef" @click.stop="textboxClicked")
-	KMaskTextbox(v-model="maskedModel" :key="maskedModel" :mask="format" :placeholder="format" showClear)
+	KMaskTextbox(v-model="maskedModel" :key="maskedModel" :mask="format" :placeholder="format" :showClear="showClear" @clear="onClear")
 	KDropdown(v-model:isOpen="calendarShow" :anchorEl="activatorRef")
 		KGrid(direction="row" align="start" :noGap="false" wrap="nowrap").datetime-picker-grid
 			.calendar-section
@@ -28,7 +28,9 @@ const props = defineProps<{
 	timeStep: number
 	calendarDefinedDays: IDefinedDay[]
 	calendarMarkedDays: IMarkedDay[]
+	showClear: boolean
 	textboxClicked: () => void
+	onClear?: () => void
 	dateSelected: (date: Date) => void
 	timeSelected: (time: string) => void
 }>()

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

@@ -10,7 +10,9 @@ type __VLS_Props = {
     timeStep: number;
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
+    showClear: boolean;
     textboxClicked: () => void;
+    onClear?: () => void;
     dateSelected: (date: Date) => void;
     timeSelected: (time: string) => void;
 };

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

@@ -1,6 +1,6 @@
 <template lang="pug">
 Teleport(to="body")
-	.KDropdown(v-if="open" v-click-outside="clickoutside" :style="dialogStyle")
+	.KDropdown(v-if="open" v-click-outside="clickoutside" :style="dialogStyle" v-bind="$attrs")
 		KPanel.KDropdown-container(:class="{'fullWidth': fullWidth}")
 			slot
 </template>
@@ -8,6 +8,10 @@ Teleport(to="body")
 <script lang="ts" setup>
 import { computed } from 'vue'
 
+defineOptions({
+	inheritAttrs: false
+})
+
 const props = defineProps<{
 	open: boolean
 	fullWidth: boolean

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

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    modelValue: string;
+    maskedModel: string;
     isOpen: boolean;
     step: number;
     format: string;
@@ -7,13 +7,17 @@ type __VLS_Props = {
     endHour?: string;
     placeholder: string;
     disabled: boolean;
-    toggleDropdown: () => void;
+    showClear: boolean;
+    textboxClicked: () => void;
     closeDropdown: () => void;
     onTimeSelect: (time: string) => void;
+    clear: () => void;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:maskedModel": (value: string) => any;
     "update:isOpen": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:maskedModel"?: ((value: string) => any) | undefined;
     "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,14 +1,15 @@
 <template lang="pug">
-.KHourPicker(ref="activatorRef" v-click-outside="closeDropdown")
-	KTextbox(
-		:modelValue="modelValue"
+.KHourPicker(ref="activatorRef")
+	KMaskTextbox(
+		v-model:maskedValue="maskedModel"
+		:mask="format"
 		:placeholder="placeholder"
-		:disabled="disabled"
-		readonly
-		@click.stop="toggleDropdown"
+		:showClear="showClear"
+		@click.stop="textboxClicked"
+		@clear="clear"
 	)
 		template(#append)
-			KIcon(iconname="clock" clickable @click.stop="toggleDropdown")
+			KIcon(iconname="clock" clickable @click.stop="textboxClicked")
 
 	KDropdown(
 		:isOpen="isOpen" 
@@ -16,7 +17,7 @@
 		:anchorEl="activatorRef"
 	)
 		KHourSelect(
-			:modelValue="modelValue"
+			:modelValue="maskedModel"
 			:step="step"
 			:format="format"
 			:startHour="startHour"
@@ -26,12 +27,13 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 const activatorRef = ref<HTMLElement | null>(null)
 import KHourSelect from '../../../../components/KHourSelect/KHourSelect.global.vue'
+import KMaskTextbox from '../../../../components/KMaskTextbox/KMaskTextbox.global.vue'
 
-defineProps<{
-	modelValue: string
+const props = defineProps<{
+	maskedModel: string
 	isOpen: boolean
 	step: number
 	format: string
@@ -39,14 +41,22 @@ defineProps<{
 	endHour?: string
 	placeholder: string
 	disabled: boolean
-	toggleDropdown: () => void
+	showClear: boolean
+	textboxClicked: () => void
 	closeDropdown: () => void
 	onTimeSelect: (time: string) => void
+	clear: () => void
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
 	(e: 'update:isOpen', value: boolean): void
+	(e: 'update:maskedModel', value: string): void
 }>()
+
+const maskedModel = computed({
+	get: () => props.maskedModel,
+	set: (value) => emit('update:maskedModel', value)
+})
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    modelValue: string;
+    maskedModel: string;
     isOpen: boolean;
     step: number;
     format: string;
@@ -7,13 +7,17 @@ type __VLS_Props = {
     endHour?: string;
     placeholder: string;
     disabled: boolean;
-    toggleDropdown: () => void;
+    showClear: boolean;
+    textboxClicked: () => void;
     closeDropdown: () => void;
     onTimeSelect: (time: string) => void;
+    clear: () => void;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:maskedModel": (value: string) => any;
     "update:isOpen": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:maskedModel"?: ((value: string) => any) | undefined;
     "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,9 +1,10 @@
 <template lang="pug">
-.KMaskTextbox
+.KMaskTextbox(@click.stop)
 	KTextbox(
 		:modelValue="maskedValue"
 		:placeholder="placeholder"
 		:showClear="showClear"
+		:clear="handleClear"
 		:maxlength="mask.length"
 		@update:modelValue="handleUpdate"
 		@beforeinput="handleBeforeInput"
@@ -118,6 +119,10 @@ const handleBeforeInput = (event: InputEvent) => {
 const handleUpdate = (value: string) => {
 	emit('update:maskedValue', value)
 }
+
+const handleClear = () => {
+	emit('clear')
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     text: string;
-    showClearIcon: boolean;
+    showClear: boolean;
     clear: () => void;
     placeholder: string;
     type: string;

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

@@ -1,7 +1,7 @@
 <template lang="pug">
 KGrid(align="center" noGap).KTextbox
 	input(:type="props.type" v-model="text" :placeholder="placeholder")
-	KIcon(v-if="showClearIcon" @click="clear" iconname="close" width="12" height="12").closeIcon
+	KIcon(v-if="showClear" @click.stop="clear" @mousedown.stop iconname="close" width="12" height="12").closeIcon
 </template>
 
 <script lang="ts" setup>
@@ -9,7 +9,7 @@ import { computed } from 'vue'
 // Default template for KTextbox
 const props = defineProps<{
 	text: string
-	showClearIcon: boolean
+	showClear: boolean
 	clear: () => void
 	placeholder: string
 	type: string

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

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     text: string;
-    showClearIcon: boolean;
+    showClear: boolean;
     clear: () => void;
     placeholder: string;
     type: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/toolkit",
-	"version": "0.1.0-beta.44",
+	"version": "0.1.0-beta.46",
 	"description": "Core UI toolkit and utilities for the Katlux ecosystem",
 	"author": "Katlux",
 	"license": "MIT",