@katlux/toolkit 0.1.0-beta.3 → 0.1.0-beta.33

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.vue

@@ -25,27 +25,31 @@
 		)
 </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 KHourSelect from '../../../../components/KHourSelect/KHourSelect.global.vue'
+
+defineProps<{
+	modelValue: string
+	isOpen: boolean
+	step: number
+	format: string
+	startHour: string
+	endHour?: string
+	placeholder: string
+	disabled: boolean
+	toggleDropdown: () => void
+	closeDropdown: () => void
+	onTimeSelect: (time: string) => void
+}>()
+
+defineEmits<{
+	(e: 'update:isOpen', value: boolean): void
+}>()
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .KHourPicker {
-  position: relative;
-  width: 100%;
+	position: relative;
+	width: 100%;
 }
 </style>

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

@@ -9,35 +9,41 @@
 		) {{ time }}
 </template>
 
-<script setup>
-const props = defineProps({
-  timeSlots: { type: Array, required: true },
-  selectedTime: { type: String, required: true },
-  selectTime: { type: Function, required: true }
-});
+<script lang="ts" setup>
+const props = defineProps<{
+	timeSlots: string[]
+	selectedTime: string
+	selectTime: (time: string) => void
+}>()
 </script>
 
-<style scoped>
-.KHourSelect .time-list {
-  max-height: 200px;
-  overflow-y: auto;
-  border: 1px solid var(--border-color, #ccc);
-  border-radius: 4px;
-}
-.KHourSelect .time-list .time-item {
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-.KHourSelect .time-list .time-item:hover {
-  background-color: var(--hover-bg, #f0f0f0);
-}
-.KHourSelect .time-list .time-item.selected {
-  background-color: var(--primary-color, #007bff);
-  color: var(--primary-text, white);
-  font-weight: 500;
-}
-.KHourSelect .time-list .time-item:not(:last-child) {
-  border-bottom: 1px solid var(--border-light, #e0e0e0);
+<style lang="scss" scoped>
+.KHourSelect {
+	.time-list {
+		max-height: 200px;
+		overflow-y: auto;
+		border: 1px solid var(--border-color, #ccc);
+		border-radius: 4px;
+		
+		.time-item {
+			padding: 8px 12px;
+			cursor: pointer;
+			transition: background-color 0.2s;
+			
+			&:hover {
+				background-color: var(--hover-bg, #f0f0f0);
+			}
+			
+			&.selected {
+				background-color: var(--primary-color, #007bff);
+				color: var(--primary-text, white);
+				font-weight: 500;
+			}
+			
+			&:not(:last-child) {
+				border-bottom: 1px solid var(--border-light, #e0e0e0);
+			}
+		}
+	}
 }
 </style>

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

@@ -1,7 +1,7 @@
 type __VLS_Props = {
     widthPx?: string;
     heightPx?: string;
-    iconComponent: any;
+    iconComponent: string;
     rotate: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,30 +1,39 @@
 <template lang="pug">
-span.KIcon(:style="{ width: widthPx, height: heightPx }")
-	component(
-		v-if="iconComponent"
-		:is="iconComponent"
-		:style="{ transform: rotate ? `rotate(${rotate}deg)` : undefined }"
-	)
+span.KIcon(
+	v-if="iconComponent"
+	:style="iconStyle"
+	v-html="iconComponent"
+)
 </template>
 
-<script setup>
-const props = defineProps({
-  widthPx: { type: String, required: false },
-  heightPx: { type: String, required: false },
-  iconComponent: { type: null, required: true },
-  rotate: { type: [Number, String], required: true }
-});
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps<{
+	widthPx?: string
+	heightPx?: string
+	iconComponent: string
+	rotate: number | string
+}>()
+
+const iconStyle = computed(() => ({
+	width: props.widthPx,
+	height: props.heightPx,
+	transform: props.rotate ? `rotate(${props.rotate}deg)` : undefined
+}))
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .KIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 0;
-  vertical-align: middle;
-}
-.KIcon svg {
-  height: 100%;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	line-height: 0;
+	vertical-align: middle;
+	
+	:deep(svg) {
+		width: 100%;
+		height: 100%;
+	}
 }
 </style>

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

@@ -1,7 +1,7 @@
 type __VLS_Props = {
     widthPx?: string;
     heightPx?: string;
-    iconComponent: any;
+    iconComponent: string;
     rotate: number | string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;