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

package/dist/runtime/presets/default/components/KGantt/KGanttTimeline.vue

@@ -30,159 +30,189 @@
 			)
 </template>
 
-<script setup>
-import { computed, ref } from "vue";
-import { getSnapMs, getGanttMarkers } from "#toolkit/components/KGantt/KGantt.logic";
-const props = defineProps({
-  row: { type: null, required: false },
-  tasks: { type: Array, required: true },
-  titleField: { type: String, required: true },
-  getTaskStyle: { type: Function, required: true },
-  startMs: { type: Number, required: true },
-  endMs: { type: Number, required: true },
-  editable: { type: Boolean, required: false },
-  snapTo: { type: String, required: false },
-  resourceTypeField: { type: String, required: false },
-  resolvedMapping: { type: null, required: false },
-  activeDrag: { type: [Object, null], required: false },
-  mode: { type: String, required: false }
-});
-const emit = defineEmits(["task-dragstart", "cell-mouseenter"]);
-const wrapperRef = ref(null);
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { getSnapMs, type IGanttTask, getGanttMarkers } from '#toolkit/components/KGantt/KGantt.logic'
+
+const props = defineProps<{
+	row?: any
+	tasks: IGanttTask[]
+	titleField: string
+	getTaskStyle: (task: any) => any
+	startMs: number
+	endMs: number
+	editable?: boolean
+	snapTo?: string
+	resourceTypeField?: string
+	resolvedMapping?: any
+	// Global drag state provided from KGantt parent
+	activeDrag?: {
+		taskId: string | number
+		currentStartMs: number
+		currentEndMs: number
+		sourceRowId: string | number
+	} | null
+	mode?: 'date' | 'numeric'
+}>()
+
+const emit = defineEmits<{
+	(e: 'task-dragstart', payload: { event: MouseEvent; task: IGanttTask; rowId: any; mode: string; wrapperEl: HTMLElement | null }): void
+	(e: 'cell-mouseenter', rowId: any): void
+}>()
+
+const wrapperRef = ref<HTMLElement | null>(null)
+
 const onCellMouseEnter = () => {
-  emit("cell-mouseenter", props.row?.id);
-};
-const isDraggingThisTask = (taskId) => {
-  return props.activeDrag?.taskId === taskId;
-};
+	emit('cell-mouseenter', props.row?.id)
+}
+
+const isDraggingThisTask = (taskId: string | number): boolean => {
+	return props.activeDrag?.taskId === taskId
+}
+
+// Shows live-updated position during drag
 const displayTasks = computed(() => {
-  if (!props.activeDrag || !props.resolvedMapping) return props.tasks;
-  const drag = props.activeDrag;
-  return props.tasks.map((t) => {
-    if (t.id === drag.taskId) {
-      return {
-        ...t,
-        [props.resolvedMapping.startDate]: drag.currentStartMs,
-        [props.resolvedMapping.endDate]: drag.currentEndMs
-      };
-    }
-    return t;
-  });
-});
-const getTaskAppearance = (task) => {
-  const field = props.resolvedMapping?.appearanceField || "appearance";
-  return task[field] || "filled";
-};
-const getBarStyle = (task) => props.getTaskStyle(task);
-const gridMarkers = computed(() => getGanttMarkers(props.startMs, props.endMs, props.mode));
+	if (!props.activeDrag || !props.resolvedMapping) return props.tasks
+	const drag = props.activeDrag
+	return props.tasks.map(t => {
+		if (t.id === drag.taskId) {
+			return {
+				...t,
+				[props.resolvedMapping.startDate]: drag.currentStartMs,
+				[props.resolvedMapping.endDate]: drag.currentEndMs
+			}
+		}
+		return t
+	})
+})
+
+const getTaskAppearance = (task: any) => {
+	const field = props.resolvedMapping?.appearanceField || 'appearance'
+	return task[field] || 'filled'
+}
+
+// Use parent getTaskStyle but pass live task data
+const getBarStyle = (task: any) => props.getTaskStyle(task)
+
+const gridMarkers = computed(() => getGanttMarkers(props.startMs, props.endMs, props.mode))
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .gantt-cell {
-  width: 100%;
-  height: 100%;
-  min-height: 36px;
-  display: flex;
-  align-items: center;
-  padding: 4px 0;
+	width: 100%;
+	height: 100%;
+	min-height: 36px;
+	display: flex;
+	align-items: center;
+	padding: 4px 0;
 }
 
 .gantt-bar-wrapper {
-  position: relative;
-  width: 100%;
-  height: 28px;
-  border-radius: 4px;
-  background-color: var(--surface-ground, #f1f5f9);
+	position: relative;
+	width: 100%;
+	height: 28px;
+	border-radius: 4px;
+	background-color: var(--surface-ground, #f1f5f9);
 }
 
 .gantt-grid-line {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background: var(--border-color, #e2e8f0);
-  z-index: 0;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 1px;
+	background: var(--border-color, #e2e8f0);
+	z-index: 0;
 }
 
 .gantt-bar {
-  position: absolute;
-  top: 3px;
-  bottom: 3px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  padding: 0px;
-  white-space: nowrap;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-  z-index: 1;
-  cursor: grab;
-  user-select: none;
-  transition: filter 0.2s;
-}
-.gantt-bar--filled {
-  background-color: var(--task-color);
-}
-.gantt-bar--filled .gantt-title {
-  color: #fff;
-}
-.gantt-bar--bordered {
-  background-color: #fff;
-  border: 1px solid var(--task-color);
-}
-.gantt-bar--bordered .gantt-title {
-  color: #000;
-}
-.gantt-bar--dashed {
-  background-color: #fff;
-  border: 1px dashed var(--task-color);
-}
-.gantt-bar--dashed .gantt-title {
-  color: #000;
-}
-.gantt-bar--shaded {
-  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--task-color), transparent 80%), color-mix(in srgb, var(--task-color), transparent 80%) 8px, #fff 8px, #fff 16px);
-  border: 1px solid var(--task-color);
-}
-.gantt-bar--shaded .gantt-title {
-  color: #000;
-  background: rgba(255, 255, 255, 0.6);
-  border-radius: 2px;
-}
-.gantt-bar.is-dragging {
-  opacity: 0.8;
-  z-index: 50;
-  cursor: grabbing;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-}
-.gantt-bar:hover {
-  filter: brightness(1.1);
-  z-index: 2;
-}
-.gantt-bar .gantt-resize-handle {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 8px;
-  cursor: ew-resize;
-  z-index: 3;
-}
-.gantt-bar .gantt-resize-handle:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-.gantt-bar .gantt-resize-handle.left {
-  left: 0;
-}
-.gantt-bar .gantt-resize-handle.right {
-  right: 0;
-}
-.gantt-bar .gantt-title {
-  font-size: 0.72rem;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  user-select: none;
-  pointer-events: none;
-  padding: 0px 8px;
+	position: absolute;
+	top: 3px;
+	bottom: 3px;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	padding: 0px;
+	white-space: nowrap;
+	overflow: hidden;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+	z-index: 1;
+	cursor: grab;
+	user-select: none;
+	transition: filter 0.2s;
+
+	&--filled {
+		background-color: var(--task-color);
+		.gantt-title { color: #fff; }
+	}
+
+	&--bordered {
+		background-color: #fff;
+		border: 1px solid var(--task-color);
+		.gantt-title { color: #000; }
+	}
+
+	&--dashed {
+		background-color: #fff;
+		border: 1px dashed var(--task-color);
+		.gantt-title { color: #000; }
+	}
+
+	&--shaded {
+		background: repeating-linear-gradient(
+			45deg,
+			color-mix(in srgb, var(--task-color), transparent 80%),
+			color-mix(in srgb, var(--task-color), transparent 80%) 8px,
+			#fff 8px,
+			#fff 16px
+		);
+		border: 1px solid var(--task-color);
+		.gantt-title { 
+			color: #000; 
+			background: rgba(255, 255, 255, 0.6);
+			border-radius: 2px;
+		}
+	}
+
+	&.is-dragging {
+		opacity: 0.8;
+		z-index: 50;
+		cursor: grabbing;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+	}
+
+	&:hover {
+		filter: brightness(1.1);
+		z-index: 2;
+	}
+
+	.gantt-resize-handle {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 8px;
+		cursor: ew-resize;
+		z-index: 3;
+		
+		&:hover {
+			background: rgba(255, 255, 255, 0.3);
+		}
+		
+		&.left {
+			left: 0;
+		}
+		&.right {
+			right: 0;
+		}
+	}
+
+	.gantt-title {
+		font-size: 0.72rem;
+		font-weight: 600;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		user-select: none;
+		pointer-events: none;
+		padding: 0px 8px;
+	}
 }
 </style>

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

@@ -3,68 +3,70 @@
 	slot
 </template>
 
-<script setup>
-const props = defineProps({
-  classes: { type: String, required: true }
-});
+<script lang="ts" setup>
+const props = defineProps<{
+	classes: string
+}>()
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .KGrid {
-  display: flex;
-  gap: var(--grid-gap);
-  box-sizing: border-box;
-}
-.KGrid.direction-row {
-  flex-direction: row;
-}
-.KGrid.direction-column {
-  flex-direction: column;
-}
-.KGrid.wrap {
-  flex-wrap: wrap;
-}
-.KGrid.nowrap {
-  flex-wrap: nowrap;
-}
-.KGrid.flex-child > * {
-  flex-grow: 1;
-  width: 100%;
-}
-.KGrid.flex-align-start {
-  align-items: flex-start;
-}
-.KGrid.flex-align-center {
-  align-items: center;
-}
-.KGrid.flex-align-end {
-  align-items: flex-end;
-}
-.KGrid.flex-align-baseline {
-  align-items: baseline;
-}
-.KGrid.flex-align-stretch {
-  align-items: stretch;
-}
-.KGrid.justify-start {
-  justify-content: flex-start;
-}
-.KGrid.justify-center {
-  justify-content: center;
-}
-.KGrid.justify-end {
-  justify-content: flex-end;
-}
-.KGrid.justify-between {
-  justify-content: space-between;
-}
-.KGrid.justify-around {
-  justify-content: space-around;
-}
-.KGrid.justify-evenly {
-  justify-content: space-evenly;
-}
-.KGrid.no-gap {
-  gap: 0;
+	display: flex;
+	gap: var(--grid-gap);
+	box-sizing: border-box;
+
+	&.direction-row {
+		flex-direction: row;
+	}
+	&.direction-column {
+		flex-direction: column;
+	}
+	&.wrap {
+		flex-wrap: wrap;
+	}
+	&.nowrap {
+		flex-wrap: nowrap;
+	}
+
+	&.flex-child > * {
+		flex-grow: 1;
+		width: auto; 
+	}
+	&.flex-align-start {
+		align-items: flex-start;
+	}
+	&.flex-align-center {
+		align-items: center;
+	}
+	&.flex-align-end {
+		align-items: flex-end;
+	}
+	&.flex-align-baseline {
+		align-items: baseline;
+	}
+	&.flex-align-stretch {
+		align-items: stretch;
+	}
+	&.justify-start {
+		justify-content: flex-start;
+	}
+	&.justify-center {
+		justify-content: center;
+	}
+	&.justify-end {
+		justify-content: flex-end;
+	}
+	&.justify-between {
+		justify-content: space-between;
+	}
+	&.justify-around {
+		justify-content: space-around;
+	}
+	&.justify-evenly {
+		justify-content: space-evenly;
+	}
+	&.no-gap {
+		gap: 0;
+	}
 }
 </style>

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,22 +1,23 @@
 <template lang="pug">
-.KHourPicker
-	KTextbox(
-		:modelValue="modelValue"
+.KHourPicker(ref="activatorRef")
+	KMaskTextbox(
+		v-model:maskedValue="maskedModel"
+		:mask="format"
 		:placeholder="placeholder"
-		:disabled="disabled"
-		readonly
-		@click="toggleDropdown"
+		:showClear="showClear"
+		@click.stop="textboxClicked"
+		@clear="clear"
 	)
 		template(#append)
-			KIcon(iconname="clock" clickable @click="toggleDropdown")
+			KIcon(iconname="clock" clickable @click.stop="textboxClicked")
 
 	KDropdown(
 		:isOpen="isOpen" 
 		@update:isOpen="$emit('update:isOpen', $event)" 
-		fullWidth
+		:anchorEl="activatorRef"
 	)
 		KHourSelect(
-			:modelValue="modelValue"
+			:modelValue="maskedModel"
 			:step="step"
 			:format="format"
 			:startHour="startHour"
@@ -25,27 +26,42 @@
 		)
 </template>
 
-<script setup>
-import KHourSelect from "../../../../components/KHourSelect/KHourSelect.global.vue";
-defineProps({
-  modelValue: { type: String, required: true },
-  isOpen: { type: Boolean, required: true },
-  step: { type: Number, required: true },
-  format: { type: String, required: true },
-  startHour: { type: String, required: true },
-  endHour: { type: String, required: false },
-  placeholder: { type: String, required: true },
-  disabled: { type: Boolean, required: true },
-  toggleDropdown: { type: Function, required: true },
-  closeDropdown: { type: Function, required: true },
-  onTimeSelect: { type: Function, required: true }
-});
-defineEmits(["update:isOpen"]);
+<script lang="ts" setup>
+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'
+
+const props = defineProps<{
+	maskedModel: string
+	isOpen: boolean
+	step: number
+	format: string
+	startHour: string
+	endHour?: string
+	placeholder: string
+	disabled: boolean
+	showClear: boolean
+	textboxClicked: () => void
+	closeDropdown: () => void
+	onTimeSelect: (time: string) => void
+	clear: () => void
+}>()
+
+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 scoped>
+<style lang="scss" scoped>
 .KHourPicker {
-  position: relative;
-  width: 100%;
+	position: relative;
+	width: 100%;
 }
 </style>

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;