@katlux/toolkit 0.1.0-beta.43 → 0.1.0-beta.45

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.43",
+	"version": "0.1.0-beta.45",
 	"description": "Core UI toolkit and utilities for the Katlux ecosystem",
 	"author": "Katlux",
 	"license": "MIT",