@katlux/toolkit 0.1.0-beta.1 → 0.1.0-beta.2

package/dist/runtime/components/KGantt/KGantt.logic.js

@@ -0,0 +1,310 @@
+import { computed } from "vue";
+export const KGanttDefaultProps = {
+  dataProvider: {
+    type: Object,
+    required: true
+  },
+  columns: {
+    type: Array,
+    required: true
+  },
+  treeColumnIndex: {
+    type: Number,
+    default: 0
+  },
+  bulkActions: {
+    type: Array,
+    default: () => []
+  },
+  rowActions: {
+    type: Array,
+    default: () => []
+  },
+  startDate: {
+    type: [Date, String, Number],
+    default: null
+  },
+  endDate: {
+    type: [Date, String, Number],
+    default: null
+  },
+  startingPoint: {
+    type: [Date, String, Number],
+    default: null
+  },
+  endingPoint: {
+    type: [Date, String, Number],
+    default: null
+  },
+  taskMapping: {
+    type: Object,
+    default: () => ({
+      tasksField: "tasks",
+      startDate: "startDate",
+      endDate: "endDate",
+      color: "color",
+      title: "title",
+      taskTypeField: "type",
+      appearanceField: "appearance"
+    })
+  },
+  editable: {
+    type: Boolean,
+    default: false
+  },
+  snapTo: {
+    type: String,
+    default: "day"
+    // '15m', '30m', 'hour', 'day', 'week'
+  },
+  resourceTypeField: {
+    type: String,
+    default: "type"
+  },
+  taskTypeField: {
+    type: String,
+    default: "type"
+  },
+  mode: {
+    type: String,
+    default: "date"
+    // 'date' | 'numeric'
+  },
+  cellSlots: {
+    type: Object,
+    default: () => ({})
+  },
+  headerSlots: {
+    type: Object,
+    default: () => ({})
+  }
+};
+export function useKGanttLogic(props) {
+  const globalDateRange = computed(() => {
+    const now = Date.now();
+    const msInDay = 24 * 60 * 60 * 1e3;
+    const start = props.startingPoint !== null && props.startingPoint !== void 0 ? props.startingPoint : props.startDate;
+    const end = props.endingPoint !== null && props.endingPoint !== void 0 ? props.endingPoint : props.endDate;
+    return {
+      start: start !== null && start !== void 0 ? new Date(start).getTime() : now - 15 * msInDay,
+      end: end !== null && end !== void 0 ? new Date(end).getTime() : now + 45 * msInDay
+    };
+  });
+  const totalDuration = computed(() => {
+    return globalDateRange.value.end - globalDateRange.value.start;
+  });
+  const resolvedMapping = computed(() => ({
+    tasksField: "tasks",
+    startDate: "startDate",
+    endDate: "endDate",
+    color: "color",
+    title: "title",
+    taskTypeField: "type",
+    appearanceField: "appearance",
+    ...props.taskMapping || {}
+  }));
+  const getTasksForRow = (row) => {
+    const field = resolvedMapping.value.tasksField;
+    return Array.isArray(row[field]) ? row[field] : [];
+  };
+  const getTaskStyle = (task) => {
+    const m = resolvedMapping.value;
+    const taskStartVal = task[m.startDate];
+    const taskEndVal = task[m.endDate];
+    const toMs = (val) => {
+      if (val === null || val === void 0 || val === "") return NaN;
+      if (typeof val === "number") return val;
+      if (val instanceof Date) return val.getTime();
+      return new Date(val).getTime();
+    };
+    const tStart = toMs(taskStartVal);
+    const tEnd = toMs(taskEndVal);
+    if (isNaN(tStart) || isNaN(tEnd)) return { display: "none" };
+    const gStart = globalDateRange.value.start;
+    const duration = totalDuration.value;
+    if (duration <= 0) return { display: "none" };
+    let leftPct = (tStart - gStart) / duration * 100;
+    let widthPct = (tEnd - tStart) / duration * 100;
+    if (leftPct < 0) {
+      widthPct += leftPct;
+      leftPct = 0;
+    }
+    if (leftPct + widthPct > 100) {
+      widthPct = 100 - leftPct;
+    }
+    if (widthPct <= 0 || leftPct >= 100) return { display: "none" };
+    return {
+      left: `${leftPct}%`,
+      width: `calc(${widthPct}% - 1px)`,
+      "--task-color": task[m.color] || "var(--primary-color, #3b82f6)"
+    };
+  };
+  const moveTime = (delta, startingPoint, endingPoint) => {
+    const isDate = props.mode === "date";
+    if (isDate) {
+      const newStart = new Date(new Date(startingPoint).getTime() + delta).toISOString();
+      const newEnd = new Date(new Date(endingPoint).getTime() + delta).toISOString();
+      return { startingPoint: newStart, endingPoint: newEnd };
+    } else {
+      const newStart = Number(startingPoint) + delta;
+      const newEnd = Number(endingPoint) + delta;
+      return { startingPoint: newStart, endingPoint: newEnd };
+    }
+  };
+  const zoom = (factor, startingPoint, endingPoint) => {
+    const isDate = props.mode === "date";
+    const start = isDate ? new Date(startingPoint).getTime() : Number(startingPoint);
+    const end = isDate ? new Date(endingPoint).getTime() : Number(endingPoint);
+    const duration = end - start;
+    const change = duration * factor;
+    const newStart = start + change;
+    const newEnd = end - change;
+    const newDuration = newEnd - newStart;
+    const minDuration = isDate ? 1e3 : 1;
+    const maxDuration = isDate ? 10 * 365 * 24 * 60 * 60 * 1e3 : 1e6;
+    if (factor > 0 && newDuration < minDuration) return null;
+    if (factor < 0 && newDuration > maxDuration) return null;
+    if (isDate) {
+      return {
+        startingPoint: new Date(newStart).toISOString(),
+        endingPoint: newEnd > 0 ? new Date(newEnd).toISOString() : (/* @__PURE__ */ new Date(0)).toISOString()
+      };
+    } else {
+      return {
+        startingPoint: newStart,
+        endingPoint: newEnd
+      };
+    }
+  };
+  const selectedRows = props.dataProvider.selectedRows;
+  const selectAll = props.dataProvider.selectAll;
+  return {
+    globalDateRange,
+    totalDuration,
+    resolvedMapping,
+    getTasksForRow,
+    getTaskStyle,
+    moveTime,
+    zoom,
+    selectedRows,
+    selectAll
+  };
+}
+export function getGanttMarkers(start, end, mode = "date") {
+  const duration = end - start;
+  if (duration <= 0) return [];
+  const result = [];
+  if (mode === "numeric") {
+    const idealSteps = 10;
+    let stepSize = duration / idealSteps;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(stepSize)));
+    const normalized = stepSize / magnitude;
+    if (normalized < 1.5) stepSize = magnitude;
+    else if (normalized < 3) stepSize = 2 * magnitude;
+    else if (normalized < 7) stepSize = 5 * magnitude;
+    else stepSize = 10 * magnitude;
+    let current = Math.ceil(start / stepSize) * stepSize;
+    while (current < end) {
+      result.push({
+        label: current.toString(),
+        position: (current - start) / duration * 100
+      });
+      current += stepSize;
+    }
+    return result;
+  }
+  const durationDays = duration / (1e3 * 60 * 60 * 24);
+  const durationHours = duration / (1e3 * 60 * 60);
+  const durationMinutes = duration / (1e3 * 60);
+  const d = new Date(start);
+  let stepUnit = "month";
+  if (durationMinutes <= 2) {
+    stepUnit = "second";
+    d.setMilliseconds(0);
+  } else if (durationHours <= 1) {
+    stepUnit = "minute";
+    d.setSeconds(0, 0);
+  } else if (durationDays <= 1) {
+    stepUnit = "hour";
+    d.setMinutes(0, 0, 0);
+  } else if (durationDays <= 31) {
+    stepUnit = "day";
+    d.setHours(0, 0, 0, 0);
+  } else if (durationDays <= 180) {
+    stepUnit = "week";
+    d.setHours(0, 0, 0, 0);
+    d.setDate(d.getDate() - d.getDay());
+  } else {
+    stepUnit = "month";
+    d.setHours(0, 0, 0, 0);
+    d.setDate(1);
+  }
+  while (d.getTime() < end) {
+    const pct = (d.getTime() - start) / duration * 100;
+    if (pct >= 0 && pct <= 100) {
+      let label = "";
+      const options = {};
+      if (stepUnit === "second") {
+        label = d.toLocaleTimeString("en", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
+      } else if (stepUnit === "minute") {
+        label = d.toLocaleTimeString("en", { hour12: false, hour: "2-digit", minute: "2-digit" });
+      } else if (stepUnit === "hour") {
+        label = d.toLocaleTimeString("en", { hour12: false, hour: "2-digit", minute: "2-digit" });
+      } else if (stepUnit === "day" || stepUnit === "week") {
+        label = d.toLocaleDateString("en", { month: "short", day: "numeric" });
+      } else {
+        label = d.toLocaleDateString("en", { month: "short", year: "2-digit" });
+      }
+      result.push({ label, position: pct });
+    }
+    if (stepUnit === "second") d.setSeconds(d.getSeconds() + 1);
+    else if (stepUnit === "minute") d.setMinutes(d.getMinutes() + 1);
+    else if (stepUnit === "hour") d.setHours(d.getHours() + 1);
+    else if (stepUnit === "day") d.setDate(d.getDate() + 1);
+    else if (stepUnit === "week") d.setDate(d.getDate() + 7);
+    else d.setMonth(d.getMonth() + 1);
+    if (result.length > 1e3) break;
+  }
+  return result;
+}
+export function calculateGanttMinWidth(startMs, endMs, minMarkerWidth = 80, mode = "date") {
+  const markers = getGanttMarkers(startMs, endMs, mode);
+  if (markers.length <= 1) return "100%";
+  const minWidthPx = markers.length * minMarkerWidth;
+  return `${minWidthPx}px`;
+}
+export function getSnapMs(snapTo) {
+  const min = 60 * 1e3;
+  const hr = 60 * min;
+  const day = 24 * hr;
+  switch (snapTo) {
+    case "second":
+      return 1e3;
+    case "minute":
+      return min;
+    case "15m":
+      return 15 * min;
+    case "30m":
+      return 30 * min;
+    case "hour":
+      return hr;
+    case "day":
+      return day;
+    case "week":
+      return 7 * day;
+    case "none":
+      return 1e-3;
+    default:
+      return 1;
+  }
+}
+export function isTaskOverlapping(task, tasks, startDateField, endDateField) {
+  const tStart = new Date(task[startDateField]).getTime();
+  const tEnd = new Date(task[endDateField]).getTime();
+  return tasks.some((other) => {
+    if (other.id === task.id) return false;
+    const oStart = new Date(other[startDateField]).getTime();
+    const oEnd = new Date(other[endDateField]).getTime();
+    return tStart < oEnd && tEnd > oStart;
+  });
+}

package/dist/runtime/components/KGrid/KGrid.global.d.vue.ts

@@ -0,0 +1,60 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    direction: {
+        type: PropType<"row" | "column">;
+        default: string;
+    };
+    wrap: {
+        type: PropType<"wrap" | "nowrap">;
+        default: string;
+    };
+    flexChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    align: {
+        type: PropType<"start" | "center" | "end" | "stretch" | "baseline">;
+        default: string;
+    };
+    justify: {
+        type: PropType<"start" | "center" | "end" | "space-between" | "around" | "evenly">;
+        default: string;
+    };
+    noGap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    direction: {
+        type: PropType<"row" | "column">;
+        default: string;
+    };
+    wrap: {
+        type: PropType<"wrap" | "nowrap">;
+        default: string;
+    };
+    flexChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    align: {
+        type: PropType<"start" | "center" | "end" | "stretch" | "baseline">;
+        default: string;
+    };
+    justify: {
+        type: PropType<"start" | "center" | "end" | "space-between" | "around" | "evenly">;
+        default: string;
+    };
+    noGap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    wrap: any;
+    direction: any;
+    flexChild: boolean;
+    align: any;
+    justify: any;
+    noGap: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KGrid/KGrid.global.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { useKGridLogic, KGridDefaultProps } from "./KGrid.logic";
+import { usePresetComponent } from "../../composables/usePresetComponent";
+import { computed } from "vue";
+import KGridDefault from "../../presets/default/components/KGrid/KGrid.vue";
+const props = defineProps(KGridDefaultProps);
+const { classes } = useKGridLogic(props);
+const presetComponent = usePresetComponent("KGrid", KGridDefault);
+const templateProps = computed(() => ({
+  classes: classes.value
+}));
+</script>
+
+<template lang="pug">
+component(:is="presetComponent" v-bind="templateProps")
+	template(v-for="(_, slot) in $slots" #[slot]="scope")
+		slot(:name="slot" v-bind="scope")
+</template>

package/dist/runtime/components/KGrid/KGrid.global.vue.d.ts

@@ -0,0 +1,60 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    direction: {
+        type: PropType<"row" | "column">;
+        default: string;
+    };
+    wrap: {
+        type: PropType<"wrap" | "nowrap">;
+        default: string;
+    };
+    flexChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    align: {
+        type: PropType<"start" | "center" | "end" | "stretch" | "baseline">;
+        default: string;
+    };
+    justify: {
+        type: PropType<"start" | "center" | "end" | "space-between" | "around" | "evenly">;
+        default: string;
+    };
+    noGap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    direction: {
+        type: PropType<"row" | "column">;
+        default: string;
+    };
+    wrap: {
+        type: PropType<"wrap" | "nowrap">;
+        default: string;
+    };
+    flexChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    align: {
+        type: PropType<"start" | "center" | "end" | "stretch" | "baseline">;
+        default: string;
+    };
+    justify: {
+        type: PropType<"start" | "center" | "end" | "space-between" | "around" | "evenly">;
+        default: string;
+    };
+    noGap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    wrap: any;
+    direction: any;
+    flexChild: boolean;
+    align: any;
+    justify: any;
+    noGap: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KGrid/KGrid.logic.d.ts

@@ -0,0 +1,37 @@
+export interface KGridProps {
+    direction?: 'row' | 'column';
+    wrap?: 'wrap' | 'nowrap';
+    flexChild?: boolean;
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'space-between' | 'around' | 'evenly';
+    noGap?: boolean;
+}
+export declare const KGridDefaultProps: {
+    direction: {
+        type: PropType<"row" | "column">;
+        default: string;
+    };
+    wrap: {
+        type: PropType<"wrap" | "nowrap">;
+        default: string;
+    };
+    flexChild: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    align: {
+        type: PropType<"start" | "center" | "end" | "stretch" | "baseline">;
+        default: string;
+    };
+    justify: {
+        type: PropType<"start" | "center" | "end" | "space-between" | "around" | "evenly">;
+        default: string;
+    };
+    noGap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export declare function useKGridLogic(props: KGridProps): {
+    classes: import("vue").ComputedRef<string>;
+};

package/dist/runtime/components/KGrid/KGrid.logic.js

@@ -0,0 +1,53 @@
+import { computed } from "vue";
+export const KGridDefaultProps = {
+  direction: {
+    type: String,
+    default: "row"
+  },
+  wrap: {
+    type: String,
+    default: "wrap"
+  },
+  flexChild: {
+    type: Boolean,
+    default: false
+  },
+  align: {
+    type: String,
+    default: "start"
+  },
+  justify: {
+    type: String,
+    default: "start"
+  },
+  noGap: {
+    type: Boolean,
+    default: false
+  }
+};
+export function useKGridLogic(props) {
+  const classes = computed(() => {
+    const classesList = [];
+    if (props.direction == "row") classesList.push("direction-row");
+    if (props.direction == "column") classesList.push("direction-column");
+    if (props.wrap == "wrap") classesList.push("wrap");
+    if (props.wrap == "nowrap") classesList.push("nowrap");
+    if (props.flexChild) classesList.push("flex-child");
+    if (props.align == "start") classesList.push("flex-align-start");
+    if (props.align == "center") classesList.push("flex-align-center");
+    if (props.align == "end") classesList.push("flex-align-end");
+    if (props.align == "baseline") classesList.push("flex-align-baseline");
+    if (props.align == "stretch") classesList.push("flex-align-stretch");
+    if (props.justify === "start") classesList.push("justify-start");
+    if (props.justify === "center") classesList.push("justify-center");
+    if (props.justify === "end") classesList.push("justify-end");
+    if (props.justify === "space-between") classesList.push("justify-between");
+    if (props.justify === "around") classesList.push("justify-around");
+    if (props.justify === "evenly") classesList.push("justify-evenly");
+    if (props.noGap) classesList.push("no-gap");
+    return classesList.join(" ");
+  });
+  return {
+    classes
+  };
+}

package/dist/runtime/components/KHourPicker/KHourPicker.global.d.vue.ts

@@ -0,0 +1,73 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+    startHour: {
+        type: StringConstructor;
+        default: string;
+    };
+    endHour: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+    startHour: {
+        type: StringConstructor;
+        default: string;
+    };
+    endHour: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    modelValue: string;
+    placeholder: string;
+    format: string;
+    step: number;
+    startHour: string;
+    endHour: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KHourPicker/KHourPicker.global.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { computed } from "vue";
+import { useKHourPickerLogic, KHourPickerDefaultProps } from "./KHourPicker.logic";
+import { usePresetComponent } from "../../composables/usePresetComponent";
+import KHourPickerDefault from "../../presets/default/components/KHourPicker/KHourPicker.vue";
+const props = defineProps(KHourPickerDefaultProps);
+const emit = defineEmits(["update:modelValue"]);
+const {
+  isOpen,
+  inputValue,
+  toggleDropdown,
+  closeDropdown,
+  onTimeSelect
+} = useKHourPickerLogic(props, emit);
+const presetComponent = usePresetComponent("KHourPicker", KHourPickerDefault);
+const templateProps = computed(() => ({
+  modelValue: inputValue.value,
+  isOpen: isOpen.value,
+  step: props.step,
+  format: props.format,
+  startHour: props.startHour,
+  endHour: props.endHour,
+  placeholder: props.placeholder,
+  disabled: props.disabled,
+  toggleDropdown,
+  closeDropdown,
+  onTimeSelect
+}));
+const handleUpdateIsOpen = (val) => {
+  isOpen.value = val;
+};
+</script>
+
+<template lang="pug">
+component(
+	:is="presetComponent" 
+	v-bind="templateProps"
+	@update:isOpen="handleUpdateIsOpen"
+)
+</template>