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

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@katlux/toolkit",
   "configKey": "katluxToolkit",
-  "version": "0.1.0-beta.49",
+  "version": "0.1.0-beta.50",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -95,8 +95,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     disabled: boolean;
     modelValue: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null;
-    searchbox: boolean;
     placeholder: string;
+    searchbox: boolean;
     teleportTo: string;
     closeOnSelect: boolean;
     multiSelect: boolean;

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

@@ -37,8 +37,11 @@ const templateProps = computed(() => ({
 function updateSearchText(val) {
   searchtext.value = val;
 }
+function updateIsOptionsOpen(val) {
+  isOptionsOpen.value = val;
+}
 </script>
 
 <template lang="pug">
-component(:is="presetComponent" v-bind="{...templateProps, ...$attrs}" @update:searchtext="updateSearchText")
+component(:is="presetComponent" v-bind="{...templateProps, ...$attrs}" @update:searchtext="updateSearchText" @update:isOptionsOpen="updateIsOptionsOpen")
 </template>

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

@@ -95,8 +95,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     disabled: boolean;
     modelValue: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null;
-    searchbox: boolean;
     placeholder: string;
+    searchbox: boolean;
     teleportTo: string;
     closeOnSelect: boolean;
     multiSelect: boolean;

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

@@ -106,7 +106,7 @@ export function useKComboboxLogic(props, emit) {
   watch(
     () => searchtext.value,
     (newText) => {
-      if (!props.dataProvider) return;
+      if (!props.dataProvider?.filter) return;
       const filter = {
         operator: EDataFilterOperator.In,
         field: { [props.labelField]: newText.trim().toLowerCase() },
@@ -120,7 +120,7 @@ export function useKComboboxLogic(props, emit) {
   });
   onMounted(() => {
     selectedItems.value = Array.isArray(props.modelValue) ? props.modelValue : props.modelValue ? [props.modelValue] : null;
-    if (props.searchbox && props.dataProvider) {
+    if (props.searchbox && props.dataProvider?.filter) {
       props.dataProvider.filter.value = null;
     }
   });

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

@@ -0,0 +1,149 @@
+import { type KCompositeInputProps } from './KCompositeInput.logic.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    selectionValue: {
+        type: (ObjectConstructor | ArrayConstructor | NumberConstructor | StringConstructor)[];
+        default: null;
+    };
+    inputValue: {
+        type: (ObjectConstructor | ArrayConstructor | NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<import("./KCompositeInput.logic.js").ICompositeItem[]>;
+        default: () => never[];
+    };
+    items: {
+        type: import("vue").PropType<any[] | import("@katlux/providers").ADataProvider>;
+        required: boolean;
+    };
+    type: {
+        type: import("vue").PropType<import("./KCompositeInput.logic.js").CompositeInputType>;
+        default: string;
+    };
+    selectionSide: {
+        type: import("vue").PropType<import("./KCompositeInput.logic.js").SelectionSide>;
+        default: string;
+    };
+    inputType: {
+        type: import("vue").PropType<KCompositeInputProps["inputType"]>;
+        default: string;
+    };
+    mask: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelField: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueField: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    inputPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    teleportTo: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: import("./KCompositeInput.logic.js").ICompositeItem[]) => any;
+    "update:selectionValue": (value: any) => any;
+    "update:inputValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    selectionValue: {
+        type: (ObjectConstructor | ArrayConstructor | NumberConstructor | StringConstructor)[];
+        default: null;
+    };
+    inputValue: {
+        type: (ObjectConstructor | ArrayConstructor | NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<import("./KCompositeInput.logic.js").ICompositeItem[]>;
+        default: () => never[];
+    };
+    items: {
+        type: import("vue").PropType<any[] | import("@katlux/providers").ADataProvider>;
+        required: boolean;
+    };
+    type: {
+        type: import("vue").PropType<import("./KCompositeInput.logic.js").CompositeInputType>;
+        default: string;
+    };
+    selectionSide: {
+        type: import("vue").PropType<import("./KCompositeInput.logic.js").SelectionSide>;
+        default: string;
+    };
+    inputType: {
+        type: import("vue").PropType<KCompositeInputProps["inputType"]>;
+        default: string;
+    };
+    mask: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelField: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueField: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    inputPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    teleportTo: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("./KCompositeInput.logic.js").ICompositeItem[]) => any) | undefined;
+    "onUpdate:selectionValue"?: ((value: any) => any) | undefined;
+    "onUpdate:inputValue"?: ((value: any) => any) | undefined;
+}>, {
+    type: import("./KCompositeInput.logic.js").CompositeInputType;
+    modelValue: import("./KCompositeInput.logic.js").ICompositeItem[];
+    inputType: "number" | "text" | "url" | "search" | "password" | "email" | "tel" | undefined;
+    selectionValue: string | number | Record<string, any> | unknown[];
+    inputValue: string | number | Record<string, any> | unknown[];
+    selectionSide: import("./KCompositeInput.logic.js").SelectionSide;
+    mask: string;
+    labelField: string;
+    valueField: string;
+    placeholder: string;
+    inputPlaceholder: string;
+    searchbox: boolean;
+    showClear: boolean;
+    teleportTo: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,65 @@
+<script setup>
+import { computed, watch, shallowRef, ref, onMounted } from "vue";
+import {
+  useKCompositeInputLogic,
+  KCompositeInputDefaultProps
+} from "./KCompositeInput.logic";
+import { usePresetComponent } from "../../composables/usePresetComponent";
+import KCompositeInputDefault from "../../presets/default/components/KCompositeInput/KCompositeInput.vue";
+import { CFlatClientDataProvider } from "@katlux/providers";
+const props = defineProps(KCompositeInputDefaultProps);
+const emit = defineEmits(["update:selectionValue", "update:inputValue", "update:modelValue"]);
+const internalDataProvider = shallowRef(null);
+function updateDataProvider(items) {
+  if (Array.isArray(items)) {
+    const provider = new CFlatClientDataProvider();
+    provider.setData(items.map((item) => {
+      if (typeof item === "string") {
+        return { [props.labelField || "label"]: item, [props.valueField || "value"]: item };
+      }
+      return item;
+    }));
+    internalDataProvider.value = provider;
+  } else {
+    internalDataProvider.value = items;
+  }
+}
+watch(() => props.items, (newItems) => {
+  updateDataProvider(newItems);
+}, { immediate: true });
+const {
+  internalSelectionValue,
+  internalInputValue,
+  selectionProps,
+  inputProps
+} = useKCompositeInputLogic(props, emit);
+const presetComponent = usePresetComponent("KCompositeInput", KCompositeInputDefault);
+const templateProps = computed(() => ({
+  ...props,
+  dataProvider: internalDataProvider.value,
+  selectionValue: internalSelectionValue.value,
+  inputValue: internalInputValue.value,
+  modelValue: props.modelValue,
+  // Determine if searchbox is needed (> 10 items)
+  searchbox: Array.isArray(props.items) ? props.items.length > 10 : true
+}));
+function updateSelection(val) {
+  internalSelectionValue.value = val;
+}
+function updateInput(val) {
+  internalInputValue.value = val;
+}
+function updateModelValue(val) {
+  emit("update:modelValue", val);
+}
+</script>
+
+<template lang="pug">
+component(
+	:is="presetComponent" 
+	v-bind="{...templateProps, ...$attrs}"
+	@update:selectionValue="updateSelection"
+	@update:inputValue="updateInput"
+	@update:modelValue="updateModelValue"
+)
+</template>

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

@@ -0,0 +1,149 @@
+import { type KCompositeInputProps } from './KCompositeInput.logic.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    selectionValue: {
+        type: (ObjectConstructor | ArrayConstructor | NumberConstructor | StringConstructor)[];
+        default: null;
+    };
+    inputValue: {
+        type: (ObjectConstructor | ArrayConstructor | NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<import("./KCompositeInput.logic.js").ICompositeItem[]>;
+        default: () => never[];
+    };
+    items: {
+        type: import("vue").PropType<any[] | import("@katlux/providers").ADataProvider>;
+        required: boolean;
+    };
+    type: {
+        type: import("vue").PropType<import("./KCompositeInput.logic.js").CompositeInputType>;
+        default: string;
+    };
+    selectionSide: {
+        type: import("vue").PropType<import("./KCompositeInput.logic.js").SelectionSide>;
+        default: string;
+    };
+    inputType: {
+        type: import("vue").PropType<KCompositeInputProps["inputType"]>;
+        default: string;
+    };
+    mask: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelField: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueField: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    inputPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    teleportTo: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: import("./KCompositeInput.logic.js").ICompositeItem[]) => any;
+    "update:selectionValue": (value: any) => any;
+    "update:inputValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    selectionValue: {
+        type: (ObjectConstructor | ArrayConstructor | NumberConstructor | StringConstructor)[];
+        default: null;
+    };
+    inputValue: {
+        type: (ObjectConstructor | ArrayConstructor | NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<import("./KCompositeInput.logic.js").ICompositeItem[]>;
+        default: () => never[];
+    };
+    items: {
+        type: import("vue").PropType<any[] | import("@katlux/providers").ADataProvider>;
+        required: boolean;
+    };
+    type: {
+        type: import("vue").PropType<import("./KCompositeInput.logic.js").CompositeInputType>;
+        default: string;
+    };
+    selectionSide: {
+        type: import("vue").PropType<import("./KCompositeInput.logic.js").SelectionSide>;
+        default: string;
+    };
+    inputType: {
+        type: import("vue").PropType<KCompositeInputProps["inputType"]>;
+        default: string;
+    };
+    mask: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelField: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueField: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    inputPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    teleportTo: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("./KCompositeInput.logic.js").ICompositeItem[]) => any) | undefined;
+    "onUpdate:selectionValue"?: ((value: any) => any) | undefined;
+    "onUpdate:inputValue"?: ((value: any) => any) | undefined;
+}>, {
+    type: import("./KCompositeInput.logic.js").CompositeInputType;
+    modelValue: import("./KCompositeInput.logic.js").ICompositeItem[];
+    inputType: "number" | "text" | "url" | "search" | "password" | "email" | "tel" | undefined;
+    selectionValue: string | number | Record<string, any> | unknown[];
+    inputValue: string | number | Record<string, any> | unknown[];
+    selectionSide: import("./KCompositeInput.logic.js").SelectionSide;
+    mask: string;
+    labelField: string;
+    valueField: string;
+    placeholder: string;
+    inputPlaceholder: string;
+    searchbox: boolean;
+    showClear: boolean;
+    teleportTo: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,116 @@
+import { type PropType } from 'vue';
+import type { ADataProvider } from '@katlux/providers';
+export type CompositeInputType = 'textbox' | 'textarea' | 'maskedtextbox' | 'combobox' | 'datepicker' | 'datetimepicker' | 'hourpicker';
+export type SelectionSide = 'left' | 'right';
+export interface ICompositeItem {
+    selection: any;
+    value: any;
+}
+export interface KCompositeInputProps {
+    selectionValue: any;
+    inputValue: any;
+    modelValue?: ICompositeItem[];
+    items: any[] | ADataProvider;
+    type?: CompositeInputType;
+    selectionSide?: SelectionSide;
+    inputType?: 'text' | 'password' | 'email' | 'url' | 'tel' | 'search' | 'number';
+    mask?: string;
+    labelField?: string;
+    valueField?: string;
+    placeholder?: string;
+    inputPlaceholder?: string;
+    searchbox?: boolean;
+    showClear?: boolean;
+    teleportTo?: string;
+}
+export interface KCompositeInputEmits {
+    (e: 'update:selectionValue', value: any): void;
+    (e: 'update:inputValue', value: any): void;
+    (e: 'update:modelValue', value: ICompositeItem[]): void;
+}
+export declare const KCompositeInputDefaultProps: {
+    selectionValue: {
+        type: (ObjectConstructor | ArrayConstructor | NumberConstructor | StringConstructor)[];
+        default: null;
+    };
+    inputValue: {
+        type: (ObjectConstructor | ArrayConstructor | NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    modelValue: {
+        type: PropType<ICompositeItem[]>;
+        default: () => never[];
+    };
+    items: {
+        type: PropType<any[] | ADataProvider>;
+        required: boolean;
+    };
+    type: {
+        type: PropType<CompositeInputType>;
+        default: string;
+    };
+    selectionSide: {
+        type: PropType<SelectionSide>;
+        default: string;
+    };
+    inputType: {
+        type: PropType<KCompositeInputProps["inputType"]>;
+        default: string;
+    };
+    mask: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelField: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueField: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    inputPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    teleportTo: {
+        type: StringConstructor;
+        default: undefined;
+    };
+};
+export declare function useKCompositeInputLogic(props: KCompositeInputProps, emit: KCompositeInputEmits): {
+    internalSelectionValue: import("vue").WritableComputedRef<any, any>;
+    internalInputValue: import("vue").WritableComputedRef<any, any>;
+    selectionProps: import("vue").ComputedRef<{
+        modelValue: any;
+        'onUpdate:modelValue': (val: any) => any;
+        items: any[] | ADataProvider;
+        labelField: string | undefined;
+        valueField: string | undefined;
+        placeholder: string | undefined;
+        searchbox: boolean | undefined;
+        closeOnSelect: boolean;
+        teleportTo: string | undefined;
+    }>;
+    inputProps: import("vue").ComputedRef<{
+        modelValue: any;
+        'onUpdate:modelValue': (val: any) => any;
+        placeholder: string;
+        type: "number" | "text" | "url" | "search" | "password" | "email" | "tel" | undefined;
+        mask: string | undefined;
+        showClear: boolean | undefined;
+    }>;
+    resolvedSelectionItem: import("vue").ComputedRef<any>;
+};

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

@@ -0,0 +1,149 @@
+import { computed, watch } from "vue";
+export const KCompositeInputDefaultProps = {
+  selectionValue: {
+    type: [String, Number, Object, Array],
+    default: null
+  },
+  inputValue: {
+    type: [String, Number, Object, Array],
+    default: ""
+  },
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  items: {
+    type: [Array, Object],
+    required: true
+  },
+  type: {
+    type: String,
+    default: "textbox"
+  },
+  selectionSide: {
+    type: String,
+    default: "left"
+  },
+  inputType: {
+    type: String,
+    default: "text"
+  },
+  mask: {
+    type: String,
+    default: ""
+  },
+  labelField: {
+    type: String,
+    default: "label"
+  },
+  valueField: {
+    type: String,
+    default: "value"
+  },
+  placeholder: {
+    type: String,
+    default: "Select..."
+  },
+  inputPlaceholder: {
+    type: String,
+    default: ""
+  },
+  searchbox: {
+    type: Boolean,
+    default: false
+  },
+  showClear: {
+    type: Boolean,
+    default: false
+  },
+  teleportTo: {
+    type: String,
+    default: void 0
+  }
+};
+export function useKCompositeInputLogic(props, emit) {
+  const getSelectionKey = (selection) => {
+    if (selection && typeof selection === "object" && props.valueField) {
+      return selection[props.valueField];
+    }
+    return selection;
+  };
+  const resolvedSelectionItem = computed(() => {
+    if (props.selectionValue === null || props.selectionValue === void 0) return null;
+    if (typeof props.selectionValue === "object") return props.selectionValue;
+    if (Array.isArray(props.items)) {
+      return props.items.find((item) => getSelectionKey(item) === props.selectionValue) || props.selectionValue;
+    }
+    return props.selectionValue;
+  });
+  const internalSelectionValue = computed({
+    get: () => resolvedSelectionItem.value,
+    set: (val) => {
+      const key = getSelectionKey(val);
+      emit("update:selectionValue", key);
+    }
+  });
+  const internalInputValue = computed({
+    get: () => props.inputValue,
+    set: (val) => {
+      emit("update:inputValue", val);
+      updateModelValue(props.selectionValue, val);
+    }
+  });
+  watch(() => props.selectionValue, (newSelection) => {
+    const newKey = getSelectionKey(newSelection);
+    if (newKey !== void 0 && newKey !== null) {
+      const existingItem = props.modelValue?.find((item) => {
+        const itemKey = getSelectionKey(item.selection);
+        return JSON.stringify(itemKey) === JSON.stringify(newKey) || itemKey === newKey;
+      });
+      if (existingItem) {
+        emit("update:inputValue", existingItem.value);
+      } else {
+        const defaultValue = props.type?.includes("picker") ? null : "";
+        emit("update:inputValue", defaultValue);
+      }
+    }
+  });
+  function updateModelValue(selection, value) {
+    const selectionKey = getSelectionKey(selection);
+    if (selectionKey === void 0 || selectionKey === null) return;
+    const currentModel = [...props.modelValue || []];
+    const index = currentModel.findIndex((item) => {
+      const itemKey = getSelectionKey(item.selection);
+      return JSON.stringify(itemKey) === JSON.stringify(selectionKey) || itemKey === selectionKey;
+    });
+    if (index !== -1) {
+      currentModel[index] = { ...currentModel[index], value };
+    } else {
+      currentModel.push({ selection, value });
+    }
+    emit("update:modelValue", currentModel);
+  }
+  const selectionProps = computed(() => ({
+    modelValue: internalSelectionValue.value,
+    "onUpdate:modelValue": (val) => internalSelectionValue.value = val,
+    items: props.items,
+    labelField: props.labelField,
+    valueField: props.valueField,
+    placeholder: props.placeholder,
+    searchbox: props.searchbox,
+    closeOnSelect: true,
+    teleportTo: props.teleportTo
+  }));
+  const inputProps = computed(() => ({
+    modelValue: props.inputValue,
+    "onUpdate:modelValue": (val) => internalInputValue.value = val,
+    placeholder: props.inputPlaceholder || "",
+    type: props.inputType,
+    mask: props.mask,
+    showClear: props.showClear
+  }));
+  return {
+    internalSelectionValue,
+    internalInputValue,
+    selectionProps,
+    inputProps,
+    resolvedSelectionItem
+  };
+}