@fewangsit/wangsvue-fats 1.0.0-alpha.31 → 1.0.0-alpha.33

package/components/editor/MentionSection.vue.d.ts

@@ -0,0 +1,152 @@
+declare const _default: import('vue').DefineComponent<
+    {
+        editor: {
+            type: import('vue').PropType<
+                import('@tiptap/vue-3').NodeViewProps['editor']
+            >;
+            required: true;
+        };
+        node: {
+            type: import('vue').PropType<
+                import('@tiptap/vue-3').NodeViewProps['node']
+            >;
+            required: true;
+        };
+        decorations: {
+            type: import('vue').PropType<
+                import('@tiptap/vue-3').NodeViewProps['decorations']
+            >;
+            required: true;
+        };
+        selected: {
+            type: import('vue').PropType<
+                import('@tiptap/vue-3').NodeViewProps['selected']
+            >;
+            required: true;
+        };
+        extension: {
+            type: import('vue').PropType<
+                import('@tiptap/vue-3').NodeViewProps['extension']
+            >;
+            required: true;
+        };
+        getPos: {
+            type: import('vue').PropType<
+                import('@tiptap/vue-3').NodeViewProps['getPos']
+            >;
+            required: true;
+        };
+        updateAttributes: {
+            type: import('vue').PropType<
+                import('@tiptap/vue-3').NodeViewProps['updateAttributes']
+            >;
+            required: true;
+        };
+        deleteNode: {
+            type: import('vue').PropType<
+                import('@tiptap/vue-3').NodeViewProps['deleteNode']
+            >;
+            required: true;
+        };
+        view: {
+            type: import('vue').PropType<
+                import('@tiptap/vue-3').NodeViewProps['view']
+            >;
+            required: true;
+        };
+        innerDecorations: {
+            type: import('vue').PropType<
+                import('@tiptap/vue-3').NodeViewProps['innerDecorations']
+            >;
+            required: true;
+        };
+        HTMLAttributes: {
+            type: import('vue').PropType<
+                import('@tiptap/vue-3').NodeViewProps['HTMLAttributes']
+            >;
+            required: true;
+        };
+    },
+    {},
+    unknown,
+    {},
+    {},
+    import('vue').ComponentOptionsMixin,
+    import('vue').ComponentOptionsMixin,
+    {},
+    string,
+    import('vue').PublicProps,
+    Readonly<
+        import('vue').ExtractPropTypes<{
+            editor: {
+                type: import('vue').PropType<
+                    import('@tiptap/vue-3').NodeViewProps['editor']
+                >;
+                required: true;
+            };
+            node: {
+                type: import('vue').PropType<
+                    import('@tiptap/vue-3').NodeViewProps['node']
+                >;
+                required: true;
+            };
+            decorations: {
+                type: import('vue').PropType<
+                    import('@tiptap/vue-3').NodeViewProps['decorations']
+                >;
+                required: true;
+            };
+            selected: {
+                type: import('vue').PropType<
+                    import('@tiptap/vue-3').NodeViewProps['selected']
+                >;
+                required: true;
+            };
+            extension: {
+                type: import('vue').PropType<
+                    import('@tiptap/vue-3').NodeViewProps['extension']
+                >;
+                required: true;
+            };
+            getPos: {
+                type: import('vue').PropType<
+                    import('@tiptap/vue-3').NodeViewProps['getPos']
+                >;
+                required: true;
+            };
+            updateAttributes: {
+                type: import('vue').PropType<
+                    import('@tiptap/vue-3').NodeViewProps['updateAttributes']
+                >;
+                required: true;
+            };
+            deleteNode: {
+                type: import('vue').PropType<
+                    import('@tiptap/vue-3').NodeViewProps['deleteNode']
+                >;
+                required: true;
+            };
+            view: {
+                type: import('vue').PropType<
+                    import('@tiptap/vue-3').NodeViewProps['view']
+                >;
+                required: true;
+            };
+            innerDecorations: {
+                type: import('vue').PropType<
+                    import('@tiptap/vue-3').NodeViewProps['innerDecorations']
+                >;
+                required: true;
+            };
+            HTMLAttributes: {
+                type: import('vue').PropType<
+                    import('@tiptap/vue-3').NodeViewProps['HTMLAttributes']
+                >;
+                required: true;
+            };
+        }>
+    >,
+    {},
+    {}
+>;
+export default _default;

package/components/editor/codeSnippetExtension.d.ts

@@ -0,0 +1,3 @@
+import { Node } from '@tiptap/core';
+declare const _default: Node<any, any>;
+export default _default;

package/components/editor/mentionSectionExtension.d.ts

@@ -0,0 +1,3 @@
+import { Node } from '@tiptap/core';
+declare const _default: Node<any, any>;
+export default _default;

package/components/editor/suggestion.d.ts

@@ -0,0 +1,2 @@
+declare const suggestion: () => any;
+export default suggestion;

package/components/fieldwrapper/FieldWrapper.vue.d.ts

@@ -0,0 +1,69 @@
+import { DefineComponent } from 'vue';
+
+export interface FieldWrapperLocaleConfig {
+    /**
+     * The indicator for mandatory field.
+     * @default '*''
+     */
+    labelRequired?: string;
+
+    /**
+     * The indicator for optional field.
+     * @default '(optional)''
+     */
+    labelOptional?: string;
+}
+
+/**
+ * Props for the FieldWrapper component.
+ */
+export interface FieldWrapperProps {
+    /**
+     * The label text to display for the field.
+     * @default undefined
+     */
+    label?: string;
+
+    /**
+     * Indicates whether the field is mandatory (required).
+     * If `true`, this may trigger the display of a required indicator.
+     * @default false
+     */
+    mandatory?: boolean;
+
+    /**
+     * When `true`, displays an "(optional)" text next to the label if the field is not mandatory.
+     */
+    showOptionalText?: boolean;
+
+    /**
+     * When `true`, displays an asterisk (`*`) next to the label if the field is mandatory.
+     * @default false
+     */
+    showAsterisk?: boolean;
+
+    /**
+     * Additional information or description for the field.
+     * Can be used to display tooltips or inline helper text.
+     * @default undefined
+     */
+    info?: string;
+
+    /**
+     * Custom CSS class to apply to the label element.
+     * Useful for styling the label specifically.
+     * @default undefined
+     */
+    labelClass?: string;
+
+    /**
+     * Position of the tooltip, if one is displayed.
+     * Accepted values are `'top'`, `'right'`, `'bottom'`, and `'left'`.
+     * @default undefined
+     */
+    tooltipPos?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+declare const FieldWrapper: DefineComponent<FieldWrapperProps>;
+
+export default FieldWrapper;

package/components/fileupload/FileUpload.vue.d.ts

@@ -0,0 +1,169 @@
+import {
+    FileUploadErrorEvent,
+    FileUploadUploadEvent,
+} from 'primevue/fileupload';
+import { CustomValidation } from '../form/Form.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export type InputErrorCodes = 'FILE_SIZE_TOO_LARGE';
+
+/**
+ * Defines valid properties in FileUpload component.
+ */
+export type FileUploadProps = {
+    /**
+     * Pattern to restrict the allowed file types such as 'image/*'.
+     */
+    accept?: string | undefined;
+    /**
+     * Disables the upload functionality.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Maximum file size allowed in bytes.
+     */
+    maxFileSize?: number | undefined;
+
+    /**
+     * V-model for the file upload component.
+     * Be careful while using this props since the validation can't work while using this.
+     * You must do manual validation when choosing the file to be set on the component.
+     */
+    modelValue?: File | File[];
+
+    /**
+     * Props to determine whether file upload support multiple files or not
+     *
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Message of the invalid fize size.
+     * - Use {0} to get the file's name
+     * - Use {1} to get the max file size
+     * - Use {2} to get the accepted file types from props.accept
+     * - Use {2.1} to get the accepted file types from props.fileExtensions
+     * @defaultValue {0}: Invalid file size, file size should be smaller than {1}.
+     */
+    invalidFileSizeMessage?: string | undefined;
+    /**
+     * Message of the invalid fize type.
+     * - Use {0} to get the file's name
+     * - Use {1} to get the max file size
+     * - Use {2} to get the accepted file types
+     * - Use {2.1} to get the accepted file types from props.fileExtensions
+     * @defaultValue '{0}: Invalid file type, allowed file types: {2}'
+     */
+    invalidFileTypeMessage?: string | undefined;
+    /**
+     * Label of the file upload.
+     * @defaultValue 'Upload File'
+     */
+    label?: string | undefined;
+    /**
+     * Whether to use an upload button.
+     * @defaultValue true
+     */
+    withUpload?: boolean | undefined;
+    /**
+     * Label of the upload button.
+     * @defaultValue 'Upload'.
+     */
+    uploadLabel?: string | undefined;
+    /**
+     * Placeholder of the file upload.
+     * @defaultValue 'Select File'
+     */
+    placeholder?: string | undefined;
+    /**
+     * File extensions to display the accepted extensions.
+     */
+    fileExtensions?: string | undefined;
+    /**
+     * The note about the requirements of file for being uploaded.
+     *
+     * Placed at the bottom right of input.
+     */
+    fileRequirements?: string | undefined;
+    /**
+     * The function to be called after the upload button is clicked. (Must be used when withUpload is true)
+     */
+    uploadFunction?: (files: File[]) => Promise<void>;
+    /**
+     * Whether the input should be validated with vee-validator or not.
+     * If you use this component within form input, you need to set this props as true.
+     */
+    useValidator?: boolean;
+    /**
+     * This prop is required if you use this component in a form input.
+     * Specify the unique field name, match with your needs for API request.
+     *
+     * @default 'fileUpload'
+     */
+    fieldName?: string;
+    /**
+     * Whether this input field is required or not.
+     */
+    mandatory?: boolean;
+    /**
+     * Whether show toast error message on invalid file input
+     *
+     * @default true;
+     */
+    useErrorToast?: boolean;
+    /**
+     * Set custom validator message.
+     * Will be show if invalid="true"
+     */
+    validatorMessage?: string | CustomValidation;
+    /**
+     * Classes for validator message in input field.
+     */
+    validatorMessageClass?: string;
+};
+
+export type FileUploadEmits = {
+    /**
+     * Callback to invoke when there is a file selected.
+     */
+    'select': [event: File | File[]];
+    /**
+     * Callback to invoke when model changed.
+     */
+    'update:modelValue': [event: File | File[]];
+    /**
+     * Callback to invoke when file upload is complete.
+     */
+    'upload': [event: FileUploadUploadEvent];
+    /**
+     * Callback to invoke if file upload fails.
+     */
+    'error': [event: FileUploadErrorEvent | InputErrorCodes];
+};
+
+/**
+ * **WangsVue - FileUpload**
+ *
+ * _FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations._
+ *
+ * [Live Demo](https://fewangsit.github.io/wangsvue/button)
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ *
+ */
+declare class FileUpload extends ClassComponent<
+    FileUploadProps,
+    null,
+    FileUploadEmits
+> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        FileUpload: GlobalComponentConstructor<FileUpload>;
+    }
+}
+
+export default FileUpload;

package/components/filtercontainer/FilterContainer.vue.d.ts

@@ -0,0 +1,181 @@
+import { DefineComponent, Slot } from 'vue';
+import { CalendarProps } from '../calendar/Calendar.vue.d';
+import { QueryParams } from '../datatable/DataTable.vue.d';
+import { DropdownProps, Option } from '../dropdown/Dropdown.vue.d';
+import { InputRangeNumberProps } from '../inputrangenumber/InputRangeNumber.vue.d';
+import { MultiSelectProps } from '../multiselect/MultiSelect.vue.d';
+import { ButtonSelectTreeProps } from '../buttonselecttree/ButtonSelectTree.vue.d';
+
+export type FilterMatchMode =
+    | 'CONTAINS'
+    | 'EQUALS'
+    | 'NOT_EQUALS'
+    | 'IN'
+    | 'LESS_THAN'
+    | 'LESS_THAN_OR_EQUAL_TO'
+    | 'GREATER_THAN'
+    | 'GREATER_THAN_OR_EQUAL_TO'
+    | 'BETWEEN'
+    | 'DATE_BETWEEN';
+
+// More specific filter field types
+export interface MultiSelectFilterField extends MultiSelectProps {
+    type: 'multiselect';
+    /**
+     * The name of the field this filter applies to.
+     *
+     * When using a static filter, it also specifies the field in the data to be used for generating unique options.
+     * For example, if filtering by a user's full name, the field could be 'user.fullName', which will extract
+     * unique full names from the table data and use them as filter options.
+     */
+    field: string;
+    optionField?: string; // @example - actionOptions
+    params?: QueryParams; // Additional QueryParams for the fetchOptionFn
+    fetchOptionFn?:
+        | ((args?: any) => Option[] | undefined) // Sync function to fetch options
+        | ((args?: any) => Promise<Option[] | undefined>); // Async function
+}
+
+export interface DropdownFilterField extends DropdownProps {
+    type: 'dropdown';
+    /**
+     * The name of the field this filter applies to.
+     *
+     * When using a static filter, it also specifies the field in the data to be used for generating unique options.
+     * For example, if filtering by a user's full name, the field could be 'user.fullName', which will extract
+     * unique full names from the table data and use them as filter options.
+     */
+    field: string;
+    optionField?: string; // @example - actionOptions
+    params?: QueryParams; // Additional QueryParams for the fetchOptionFn
+    fetchOptionFn?:
+        | ((args?: any) => Option[] | undefined) // Sync function to fetch options
+        | ((args?: any) => Promise<Option[]> | undefined); // Async function
+}
+
+export interface RangeNumberFilterField extends InputRangeNumberProps {
+    type: 'rangenumber';
+    /**
+     * Specify min and max field
+     *
+     * @example ['minAge', 'maxAge']
+     */
+    fields?: string[];
+
+    /**
+     * Specify single field for both min and max input.
+     * The value will be a number array.
+     *
+     * Prever use this property when you are working with Static Filtering
+     *
+     * @example value: [1000,5000] or equal to 'value.0': 1000 & 'value.1': 5000
+     */
+    field?: string;
+    tooltip?: string;
+}
+
+export interface ButtonSelectTreeFilterField
+    extends Omit<ButtonSelectTreeProps, 'type' | 'label' | 'fieldLabel'> {
+    type: 'group' | 'category';
+    field: string; // The name of the field this filter applies to
+    /**
+     * The field label.
+     */
+    label?: string;
+    /**
+     * The button label.
+     * @default to Select Group|Category
+     */
+    buttonLabel?: string;
+    params?: QueryParams; // Override QueryParams for the fetchTree
+}
+
+export interface CalendarFilterField extends CalendarProps {
+    type: 'calendar';
+    field: string;
+}
+
+export type AdditionalFilterField = ButtonSelectTreeFilterField;
+
+export type FilterField =
+    | AdditionalFilterField
+    | MultiSelectFilterField
+    | DropdownFilterField
+    | RangeNumberFilterField
+    | CalendarFilterField;
+
+export type FilterOptions<Opt = Record<string, boolean>> = Record<
+    keyof Opt,
+    Option[]
+>;
+
+export type LoadingFilters = Record<string, boolean>;
+
+export type FetchOptionResponse<Opt = Record<string, boolean>> = {
+    message: string;
+    data: FilterOptions<Opt>;
+};
+
+export interface FilterContainerLocaleConfig {
+    clearFieldText?: string;
+    applyText?: string;
+}
+
+export interface FilterContainerProps {
+    /**
+     * Specify the table name integrated with this filter.
+     *
+     * @default datatable - the default table name
+     */
+    tableName?: string;
+    /**
+     * Set the fields count in a row
+     *
+     * @default 4 grid columns
+     */
+    fieldsPerRow?: number;
+    fields: FilterField[];
+    /**
+     * Enable static filtering
+     */
+    static?: boolean;
+}
+
+/**
+ * Slots for FilterContainer component
+ */
+export type FilterContainerSlots = {
+    /**
+     * @deprecated Please use props.fields instead
+     */
+    default: Slot;
+
+    /**
+     * Additional template for field.
+     */
+    field: Slot<{ field: AdditionalFilterField; fieldName: string }>;
+};
+
+export type FilterContainerEmits = {
+    apply: [filter: QueryParams];
+};
+
+/**
+ * **WangsVue - FilterContainer**
+ *
+ * _FilterContainer is a component for generating a dynamic grid-based layout for any count of filter fields.
+ * It calculates the number of children in the container and sets their grid area style dynamically.
+ *
+ * The grid layout is determined by the row and column position, which are incremented based on the child count.
+ * If the child count is odd and the child is the last one (which is Buttons Action),
+ * it is placed in the 4th column._
+ *
+ * @group components
+ */
+declare const FilterContainer: DefineComponent<
+    FilterContainerProps,
+    FilterContainerEmits,
+    FilterContainerSlots
+>;
+
+export default FilterContainer;

package/components/filtercontainer/helpers/applyFilter.helper.d.ts

@@ -0,0 +1,14 @@
+import { GenericObject } from 'vee-validate';
+import { FilterField } from '../FilterContainer.vue.d';
+declare const applyFilter: (
+    values: GenericObject,
+    tableName: string,
+    emit?: (...args: any[]) => any,
+) => void;
+export declare const applyStaticFilter: (
+    values: GenericObject,
+    tableName: string,
+    fields: FilterField[],
+    emit?: (...args: any[]) => any,
+) => void;
+export default applyFilter;

package/components/filtercontainer/helpers/formatDateTimeRange.helper.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Format the time in range selection when not show time.
+ * It will adjust the end range time to 23.59.59 and the start to 00.00.00
+ *
+ * @returns {number[]} - The formatted date time range in millis. [start, end]
+ */
+export declare const formatDateTimeRange: (e: number[]) => number[];

package/components/filtercontainer/helpers/getOption.helper.d.ts

@@ -0,0 +1,12 @@
+import {
+    FilterOptions,
+    LoadingFilters,
+    MultiSelectFilterField,
+} from '../FilterContainer.vue.d';
+declare const getOptions: (
+    fn: MultiSelectFilterField['fetchOptionFn'],
+    field: string,
+    filterOption: FilterOptions,
+    loading: LoadingFilters,
+) => Promise<void>;
+export default getOptions;