@katlux/toolkit 0.1.0-beta.20 → 0.1.0-beta.22

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

@@ -9,58 +9,76 @@
 				KHourSelect(v-model="_time" :format="timeFormat" :step="timeStep" @update:modelValue="timeSelected")
 </template>
 
-<script setup>
-import { computed } from "vue";
-const props = defineProps({
-  maskedModel: { type: String, required: true },
-  calendarShow: { type: Boolean, required: true },
-  _date: { type: null, required: true },
-  _time: { type: String, required: true },
-  calendarDay: { type: [Date, String], required: true },
-  format: { type: String, required: true },
-  timeFormat: { type: String, required: true },
-  timeStep: { type: Number, required: true },
-  calendarDefinedDays: { type: Array, required: true },
-  calendarMarkedDays: { type: Array, required: true },
-  textboxClicked: { type: Function, required: true },
-  dateSelected: { type: Function, required: true },
-  timeSelected: { type: Function, required: true }
-});
-const emit = defineEmits(["update:maskedModel", "update:calendarShow"]);
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type {
+	IMarkedDay,
+	IDefinedDay,
+} from '../../../../components/KCalendar/types'
+
+const props = defineProps<{
+	maskedModel: string
+	calendarShow: boolean
+	_date: any
+	_time: string
+	calendarDay: Date | string
+	format: string
+	timeFormat: string
+	timeStep: number
+	calendarDefinedDays: IDefinedDay[]
+	calendarMarkedDays: IMarkedDay[]
+	textboxClicked: () => void
+	dateSelected: (date: Date) => void
+	timeSelected: (time: string) => void
+}>()
+
+const emit = defineEmits<{
+	(e: 'update:maskedModel', value: string): void
+	(e: 'update:calendarShow', value: boolean): void
+}>()
+
 const maskedModel = computed({
-  get: () => props.maskedModel,
-  set: (value) => emit("update:maskedModel", value)
-});
+	get: () => props.maskedModel,
+	set: (value) => emit('update:maskedModel', value)
+})
+
 const calendarShow = computed({
-  get: () => props.calendarShow,
-  set: (value) => emit("update:calendarShow", value)
-});
+	get: () => props.calendarShow,
+	set: (value) => emit('update:calendarShow', value)
+})
+
 const _time = computed({
-  get: () => props._time,
-  set: (value) => props.timeSelected(value)
-});
+	get: () => props._time,
+	set: (value) => props.timeSelected(value)
+})
 </script>
 
-<style scoped>
-.KDateTimePicker .datetime-picker-content {
-  display: flex;
-  gap: 16px;
-  padding: 8px;
-}
-.KDateTimePicker .datetime-picker-content .calendar-section {
-  flex: 1;
-}
-.KDateTimePicker .datetime-picker-content .time-section {
-  min-width: 120px;
-  display: flex;
-  flex-direction: column;
-}
-.KDateTimePicker .datetime-picker-content .time-section :deep(.KHourSelect) {
-  display: flex;
-  flex-direction: column;
-}
-.KDateTimePicker .datetime-picker-content .time-section :deep(.KHourSelect) .time-list {
-  max-height: 280px;
-  overflow-y: auto;
+<style lang="scss" scoped>
+.KDateTimePicker {
+	.datetime-picker-content {
+		display: flex;
+		gap: 16px;
+		padding: 8px;
+		
+		.calendar-section {
+			flex: 1;
+		}
+		
+		.time-section {
+			min-width: 120px;
+			display: flex;
+			flex-direction: column;
+			
+			:deep(.KHourSelect) {
+				display: flex;
+				flex-direction: column;
+				
+				.time-list {
+					max-height: 280px;
+					overflow-y: auto;
+				}
+			}
+		}
+	}
 }
 </style>

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

@@ -4,30 +4,35 @@
 		slot
 </template>
 
-<script setup>
-const props = defineProps({
-  open: { type: Boolean, required: true },
-  fullWidth: { type: Boolean, required: true },
-  clickoutside: { type: Function, required: true }
-});
+<script lang="ts" setup>
+const props = defineProps<{
+	open: boolean
+	fullWidth: boolean
+	clickoutside: () => void
+}>()
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .KDropdown {
-  position: relative;
-}
-.KDropdown .KPanel {
-  position: absolute;
-  max-width: 100%;
-  left: 0px;
-  top: var(--component-gap);
-  z-index: 2;
-}
-.KDropdown .KPanel.fullWidth {
-  width: unset;
-  max-width: unset;
-}
-.KDropdown .KPanel :deep .KPanel--content {
-  padding: var(--component-gap);
+	position: relative;
+	.KPanel {
+		position: absolute;
+		max-width: 100%;
+		left: 0px;
+		top: var(--component-gap);
+		
+		z-index: 2;
+		&.fullWidth {
+			//width: 100%;
+			width: unset;
+			max-width: unset;
+		}
+		:deep {
+			.KPanel--content {
+				padding: var(--component-gap);
+			}
+		}
+
+	}
 }
 </style>