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

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

@@ -0,0 +1,22 @@
+export interface KLoaderProps {
+    loading?: boolean;
+    overlay?: boolean;
+    size?: 'small' | 'medium' | 'large';
+}
+export declare const KLoaderDefaultProps: {
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
+};
+export declare function useKLoaderLogic(props: KLoaderProps): {
+    loaderClasses: any;
+};

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

@@ -0,0 +1,24 @@
+export const KLoaderDefaultProps = {
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  overlay: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: "medium"
+  }
+};
+export function useKLoaderLogic(props) {
+  const loaderClasses = computed(() => [
+    { "is-overlay": props.overlay },
+    { "is-loading": props.loading },
+    `is-${props.size || "medium"}`
+  ]);
+  return {
+    loaderClasses
+  };
+}

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

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

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

@@ -0,0 +1,25 @@
+<script setup>
+import { useKMaskTextboxLogic, KMaskTextboxDefaultProps } from "./KMaskTextbox.logic";
+import { usePresetComponent } from "../../composables/usePresetComponent";
+import { computed } from "vue";
+import KMaskTextboxDefault from "../../presets/default/components/KMaskTextbox/KMaskTextbox.vue";
+const props = defineProps(KMaskTextboxDefaultProps);
+const emit = defineEmits(["update:modelValue"]);
+const { maskedValue, handleClear, placeholder, showClear } = useKMaskTextboxLogic(props, emit);
+const presetComponent = usePresetComponent("KMaskTextbox", KMaskTextboxDefault);
+const templateProps = computed(() => ({
+  maskedValue: maskedValue.value,
+  placeholder: placeholder.value,
+  showClear: showClear.value,
+  mask: props.mask
+}));
+</script>
+
+<template lang="pug">
+component(
+	:is="presetComponent" 
+	v-bind="templateProps" 
+	@update:maskedValue="maskedValue = $event"
+	@clear="handleClear"
+)
+</template>

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

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

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

@@ -0,0 +1,66 @@
+export interface KMaskTextboxProps {
+    modelValue?: string;
+    placeholder?: string;
+    showClear?: boolean;
+    mask: string;
+}
+export interface KMaskTextboxEmits {
+    (e: 'update:modelValue', value: string): void;
+}
+export declare const KMaskTextboxDefaultProps: {
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mask: {
+        type: StringConstructor;
+        required: boolean;
+    };
+};
+/**
+ * Pattern definition for mask characters
+ */
+interface MaskPatternDef {
+    pattern: RegExp;
+    length: number;
+    validate?: (value: string) => boolean;
+    convert?: (value: string) => string;
+}
+/**
+ * Get the mask pattern definition at a given position
+ * Supports both single-char (9, A, a, L, *) and multi-char (DD, MM, YYYY, HH, mm, ss) patterns
+ */
+declare function getMaskPatternDef(mask: string, position: number): MaskPatternDef | null;
+/**
+ * Apply mask to raw input value with case conversion
+ * Does NOT validate - just formats the input
+ */
+export declare function applyMask(rawValue: string, mask: string): string;
+/**
+ * Extract raw value from masked value
+ * Removes all literal characters, keeps only user input
+ */
+export declare function extractRawValue(maskedValue: string, mask: string): string;
+/**
+ * Handle input event - apply mask to new value
+ * Strictly enforces mask length - prevents input beyond mask pattern
+ */
+export declare function handleMaskInput(newValue: string, mask: string, currentValue: string): string;
+export declare function useKMaskTextboxLogic(props: KMaskTextboxProps, emit: KMaskTextboxEmits): {
+    maskedValue: import("vue").WritableComputedRef<string, string>;
+    handleClear: () => void;
+    placeholder: import("vue").ComputedRef<string>;
+    showClear: import("vue").ComputedRef<boolean>;
+};
+/**
+ * Export getMaskPatternDef for use in templates
+ */
+export { getMaskPatternDef };

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

@@ -0,0 +1,186 @@
+import { computed, ref } from "vue";
+export const KMaskTextboxDefaultProps = {
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  showClear: {
+    type: Boolean,
+    default: false
+  },
+  mask: {
+    type: String,
+    required: true
+  }
+};
+function getMaskPatternDef(mask, position) {
+  const remaining = mask.substring(position);
+  if (remaining.startsWith("YYYY")) {
+    return {
+      pattern: /[0-9]/,
+      length: 4
+    };
+  }
+  if (remaining.startsWith("DD")) {
+    return {
+      pattern: /[0-9]/,
+      length: 2
+    };
+  }
+  if (remaining.startsWith("MM")) {
+    return {
+      pattern: /[0-9]/,
+      length: 2
+    };
+  }
+  if (remaining.startsWith("HH")) {
+    return {
+      pattern: /[0-9]/,
+      length: 2
+    };
+  }
+  if (remaining.length >= 2 && remaining.startsWith("mm") && (position === 0 || mask[position - 1] !== "m")) {
+    return {
+      pattern: /[0-9]/,
+      length: 2
+    };
+  }
+  if (remaining.length >= 2 && remaining.startsWith("ss") && (position === 0 || mask[position - 1] !== "s")) {
+    return {
+      pattern: /[0-9]/,
+      length: 2
+    };
+  }
+  const char = mask[position];
+  switch (char) {
+    case "9":
+      return { pattern: /[0-9]/, length: 1 };
+    case "A":
+      return {
+        pattern: /[a-zA-Z]/,
+        length: 1,
+        convert: (val) => val.toUpperCase()
+      };
+    case "a":
+      return {
+        pattern: /[a-zA-Z]/,
+        length: 1,
+        convert: (val) => val.toLowerCase()
+      };
+    case "L":
+      return { pattern: /[a-zA-Z]/, length: 1 };
+    case "*":
+      return { pattern: /[0-9a-zA-Z]/, length: 1 };
+    default:
+      return null;
+  }
+}
+function isMaskPattern(mask, position) {
+  return getMaskPatternDef(mask, position) !== null;
+}
+function getPatternLength(mask, position) {
+  const def = getMaskPatternDef(mask, position);
+  return def ? def.length : 1;
+}
+export function applyMask(rawValue, mask) {
+  let result = "";
+  let valueIndex = 0;
+  let maskIndex = 0;
+  while (maskIndex < mask.length && valueIndex < rawValue.length) {
+    const patternDef = getMaskPatternDef(mask, maskIndex);
+    if (patternDef === null) {
+      result += mask[maskIndex];
+      maskIndex++;
+    } else {
+      let patternValue = "";
+      let collected = 0;
+      while (collected < patternDef.length && valueIndex < rawValue.length) {
+        const inputChar = rawValue[valueIndex];
+        if (patternDef.pattern.test(inputChar)) {
+          let charToAdd = inputChar;
+          if (patternDef.convert) {
+            charToAdd = patternDef.convert(inputChar);
+          }
+          patternValue += charToAdd;
+          collected++;
+          valueIndex++;
+        } else {
+          valueIndex++;
+        }
+      }
+      if (patternValue.length > 0) {
+        result += patternValue;
+      }
+      maskIndex += patternDef.length;
+      if (collected === 0) break;
+    }
+  }
+  while (maskIndex < mask.length && !isMaskPattern(mask, maskIndex)) {
+    result += mask[maskIndex];
+    maskIndex++;
+  }
+  return result;
+}
+export function extractRawValue(maskedValue, mask) {
+  let raw = "";
+  let maskIndex = 0;
+  let valueIndex = 0;
+  while (valueIndex < maskedValue.length && maskIndex < mask.length) {
+    const patternDef = getMaskPatternDef(mask, maskIndex);
+    if (patternDef === null) {
+      if (maskedValue[valueIndex] === mask[maskIndex]) {
+        valueIndex++;
+      }
+      maskIndex++;
+    } else {
+      for (let i = 0; i < patternDef.length && valueIndex < maskedValue.length; i++) {
+        raw += maskedValue[valueIndex];
+        valueIndex++;
+      }
+      maskIndex += patternDef.length;
+    }
+  }
+  return raw;
+}
+export function handleMaskInput(newValue, mask, currentValue) {
+  const maxMaskLength = mask.length;
+  if (newValue.length > maxMaskLength) {
+    return currentValue;
+  }
+  const raw = extractRawValue(newValue, mask);
+  const masked = applyMask(raw, mask);
+  if (masked.length > maxMaskLength) {
+    return currentValue;
+  }
+  return masked;
+}
+export function useKMaskTextboxLogic(props, emit) {
+  const internalValue = ref(props.modelValue || "");
+  if (props.modelValue) {
+    internalValue.value = applyMask(props.modelValue, props.mask);
+  }
+  const maskedValue = computed({
+    get: () => internalValue.value,
+    set: (newValue) => {
+      const masked = handleMaskInput(newValue, props.mask, internalValue.value);
+      internalValue.value = masked;
+      const raw = extractRawValue(masked, props.mask);
+      emit("update:modelValue", raw);
+    }
+  });
+  const handleClear = () => {
+    internalValue.value = "";
+    emit("update:modelValue", "");
+  };
+  return {
+    maskedValue,
+    handleClear,
+    placeholder: computed(() => props.placeholder || ""),
+    showClear: computed(() => props.showClear || false)
+  };
+}
+export { getMaskPatternDef };

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

@@ -0,0 +1,6 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    openModal: () => void;
+    closeModal: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,23 @@
+<script setup>
+import { useKModalLogic, KModalDefaultProps } from "./KModal.logic";
+import { usePresetComponent } from "../../composables/usePresetComponent";
+import { computed } from "vue";
+import KModalDefault from "../../presets/default/components/KModal/KModal.vue";
+const props = defineProps(KModalDefaultProps);
+const { opened, openModal, closeModal } = useKModalLogic(props);
+defineExpose({
+  openModal,
+  closeModal
+});
+const presetComponent = usePresetComponent("KModal", KModalDefault);
+const templateProps = computed(() => ({
+  opened: opened.value,
+  closeModal
+}));
+</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/KModal/KModal.global.vue.d.ts

@@ -0,0 +1,6 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    openModal: () => void;
+    closeModal: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,8 @@
+export interface KModalProps {
+}
+export declare const KModalDefaultProps: {};
+export declare function useKModalLogic(props: KModalProps): {
+    opened: import("vue").Ref<boolean, boolean>;
+    openModal: () => void;
+    closeModal: () => void;
+};

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

@@ -0,0 +1,16 @@
+import { ref } from "vue";
+export const KModalDefaultProps = {};
+export function useKModalLogic(props) {
+  const opened = ref(false);
+  function openModal() {
+    opened.value = true;
+  }
+  function closeModal() {
+    opened.value = false;
+  }
+  return {
+    opened,
+    openModal,
+    closeModal
+  };
+}

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

@@ -0,0 +1,7 @@
+import { ADataProvider } from '@katlux/providers';
+interface Props {
+    dataProvider: ADataProvider;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,45 @@
+<script setup>
+import { useKPaginationLogic, KPaginationDefaultProps } from "./KPagination.logic";
+import { usePresetComponent } from "../../composables/usePresetComponent";
+import { computed } from "vue";
+import KPaginationDefault from "../../presets/default/components/KPagination/KPagination.vue";
+import { ADataProvider } from "@katlux/providers";
+const props = defineProps({
+  dataProvider: { type: Object, required: true }
+});
+const {
+  dp,
+  totalPages,
+  getPageHref,
+  visiblePages,
+  showPrevButton,
+  showNextButton,
+  showFirstEllipsis,
+  showLastEllipsis,
+  pageClicked,
+  goToPrev,
+  goToNext,
+  goToFirst,
+  goToLast
+} = useKPaginationLogic(props);
+const presetComponent = usePresetComponent("KPagination", KPaginationDefault);
+const templateProps = computed(() => ({
+  dp,
+  totalPages: totalPages.value,
+  getPageHref,
+  visiblePages: visiblePages.value,
+  showPrevButton: showPrevButton.value,
+  showNextButton: showNextButton.value,
+  showFirstEllipsis: showFirstEllipsis.value,
+  showLastEllipsis: showLastEllipsis.value,
+  pageClicked,
+  goToPrev,
+  goToNext,
+  goToFirst,
+  goToLast
+}));
+</script>
+
+<template lang="pug">
+component(:is="presetComponent" v-bind="templateProps")
+</template>

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

@@ -0,0 +1,7 @@
+import { ADataProvider } from '@katlux/providers';
+interface Props {
+    dataProvider: ADataProvider;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,20 @@
+import { ADataProvider } from '@katlux/providers';
+export interface KPaginationProps {
+    dataProvider: ADataProvider;
+}
+export declare const KPaginationDefaultProps: {};
+export declare function useKPaginationLogic(props: KPaginationProps): {
+    dp: ADataProvider;
+    totalPages: import("vue").ComputedRef<number>;
+    getPageHref: (page: number) => string | undefined;
+    visiblePages: import("vue").ComputedRef<number[]>;
+    showPrevButton: import("vue").ComputedRef<boolean>;
+    showNextButton: import("vue").ComputedRef<boolean>;
+    showFirstEllipsis: import("vue").ComputedRef<boolean>;
+    showLastEllipsis: import("vue").ComputedRef<boolean>;
+    pageClicked: (item: number) => void;
+    goToPrev: () => void;
+    goToNext: () => void;
+    goToFirst: () => void;
+    goToLast: () => void;
+};

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

@@ -0,0 +1,73 @@
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+export const KPaginationDefaultProps = {};
+export function useKPaginationLogic(props) {
+  const dp = props.dataProvider;
+  const route = useRoute();
+  const totalPages = computed(
+    () => Math.ceil(dp.rowCount.value / dp.pageSize.value)
+  );
+  const maxVisiblePages = 10;
+  const getPageHref = (page) => {
+    if (!dp.urlPageParam.value) return void 0;
+    const query = { ...route.query, [dp.urlPageParam.value]: page.toString() };
+    const queryString = Object.entries(query).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join("&");
+    return `${route.path}?${queryString}`;
+  };
+  const visiblePages = computed(() => {
+    if (totalPages.value <= maxVisiblePages) {
+      return Array.from({ length: totalPages.value }, (_, i) => i + 1);
+    }
+    const current = dp.currentPage.value;
+    const total = totalPages.value;
+    const half = Math.floor(maxVisiblePages / 2);
+    let start = Math.max(1, current - half);
+    let end = Math.min(total, start + maxVisiblePages - 1);
+    if (end - start + 1 < maxVisiblePages) {
+      start = Math.max(1, end - maxVisiblePages + 1);
+    }
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+  });
+  const showPrevButton = computed(() => dp.currentPage.value > 1);
+  const showNextButton = computed(
+    () => dp.currentPage.value < totalPages.value
+  );
+  const showFirstEllipsis = computed(() => visiblePages.value[0] > 2);
+  const showLastEllipsis = computed(
+    () => visiblePages.value[visiblePages.value.length - 1] < totalPages.value - 1
+  );
+  const pageClicked = (item) => {
+    dp.currentPage.value = item;
+  };
+  const goToPrev = () => {
+    if (dp.currentPage.value > 1) {
+      dp.currentPage.value = dp.currentPage.value - 1;
+    }
+  };
+  const goToNext = () => {
+    if (dp.currentPage.value < totalPages.value) {
+      dp.currentPage.value = dp.currentPage.value + 1;
+    }
+  };
+  const goToFirst = () => {
+    dp.currentPage.value = 1;
+  };
+  const goToLast = () => {
+    dp.currentPage.value = totalPages.value;
+  };
+  return {
+    dp,
+    totalPages,
+    getPageHref,
+    visiblePages,
+    showPrevButton,
+    showNextButton,
+    showFirstEllipsis,
+    showLastEllipsis,
+    pageClicked,
+    goToPrev,
+    goToNext,
+    goToFirst,
+    goToLast
+  };
+}

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

@@ -0,0 +1,33 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    noGap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flexContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    noGap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flexContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    noGap: boolean;
+    flexContent: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;