@fewangsit/wangsvue-fats 1.0.0-alpha.0

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

@@ -0,0 +1,192 @@
+import { EditorEvents } from '@tiptap/vue-3';
+
+import { ClassComponent } from '../ts-helpers';
+
+export interface EditorProps {
+  /**
+   * Model Value For Editor Content
+   */
+  modelValue?: JSONContent;
+  /**
+   * Model Value For Editor Content
+   */
+  initialValue?: JSONContent;
+  /**
+   * Specify the input placeholder.
+   */
+  placeholder?: string;
+  /**
+   * Determine Editor State Readonly / Editable.
+   * @default 'editable'
+   */
+  editorState?: EditorState;
+  /**
+   * Change Editor Border Content.
+   * @default false
+   */
+  borderLess?: boolean;
+  /**
+   * The input label. Tell the user what input is this.
+   */
+  label?: string;
+  /**
+   * Wether 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 'editorInput'
+   */
+  fieldName?: string;
+  /**
+   * Specify classes for label.
+   */
+  labelClass?: string;
+  /**
+   * Show information to user about the field.
+   */
+  fieldInfo?: string;
+  /**
+   * Classes for validator message in input field.
+   */
+  validatorMessageClass?: string;
+  /**
+   * Set custom validator message.
+   * Will be show if invalid="true"
+   */
+  validatorMessage?: string | { empty: string };
+  /**
+   * Wether this input field is required or not.
+   */
+  mandatory?: boolean;
+  /**
+   * Invalid input state.
+   */
+  invalid?: boolean;
+  /**
+   * Showing Optional value text on Label.
+   * @default true
+   */
+  showOptionalText?: boolean;
+  /**
+   * Determine for image upload from local machine if value is true, no need to use postImageLocal emitter
+   * @default false
+   */
+  isImageUploadBase64?: boolean;
+  /**
+   * Fetch function for mention this will get triger if putting @ in editor
+   */
+  fetchMentionSuggestionFunction?: () => Promise<
+    GetMentionSuggestionResponse | undefined
+  >;
+  /**
+   * Getting all mentioned list
+   */
+  mentionedList?: string[];
+  /**
+   * Add custom class tailwind for editor wrapper/container
+   * and preferred for using "!" bang! for your tailwind class just to make sure it apply
+   */
+  editorWrapperClass?: string;
+  /**
+   * Add custom class tailwind for editor toolbar wrapper/container
+   * and preferred for using "!" bang! for your tailwind class just to make sure it apply
+   */
+  toolbarWrapperClass?: string;
+  /**
+   * Add custom class tailwind for editor content wrapper/container
+   * and preferred for using "!" bang! for your tailwind class just to make sure it apply
+   */
+  contentWrapperClass?: string;
+}
+
+export type EditorEmits = {
+  /**
+   * Event emitted when the model value is updated
+   */
+  'update:modelValue': [value: JSONContent];
+  /**
+   * Event emitted when try to upload image from local machine,
+   * and need to send file image to server first using value.image params and then
+   * get back image url that already get hosted.
+   * to set the image url back to editor to be show up simply using value.setImageCb from params
+   */
+  'postImageLocal': [value: PostImage];
+  /**
+   * Event emitted when button in floating menu named :(unset image) is clicked,
+   * but this only get triger if selected image get set by postImageLocal function
+   */
+  'deleteImageLocal': [value: ImageProperties];
+  /**
+   * Event emitted when the editor is blurred
+   */
+  'blur': [value: EditorEvents['blur']];
+  /**
+   * Event emitted when the editor is focused
+   */
+  'focus': [value: EditorEvents['focus']];
+  /**
+   * Emited Everytime mentioned user in editor change
+   */
+  'update:mentionedList': [value: string[]];
+};
+
+export type PostImage = {
+  /**
+   * This Is Image File that should be send to server
+   */
+  image: File;
+  /**
+   * Set Image Cb Is Callback For setting back image url that get send back
+   *  from server through response
+   */
+  setImageCb: (imageUrl: string) => void;
+};
+
+/**
+ * Editor Content Meta Data
+ */
+export type JSONContent = {
+  type?: string;
+  attrs?: Record<string, any>;
+  content?: JSONContent[];
+  marks?: {
+    type: string;
+    attrs?: Record<string, any>;
+    [key: string]: any;
+  }[];
+  text?: string;
+  [key: string]: any;
+};
+
+export type ImageProperties = {
+  alt?: string;
+  src: string;
+  title: string;
+};
+
+export type GetMentionSuggestionResponse = {
+  status: number;
+  message: string;
+  data: MentionSuggestion[];
+};
+
+export type MentionSuggestion = {
+  _id: string;
+  fullName: string;
+  nickName: string;
+  profilePicture: string;
+};
+
+export type EditorState = 'editable' | 'readonly';
+
+declare class Editor extends ClassComponent<
+  EditorProps,
+  unknown,
+  EditorEmits
+> {}
+
+export default Editor;

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

@@ -0,0 +1,86 @@
+import { Slot } from 'vue';
+
+import { ClassComponent } from '../ts-helpers';
+
+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';
+}
+
+export interface FieldWrapperSlots {
+  'label-addon': Slot;
+}
+
+declare class FieldWrapper extends ClassComponent<
+  FieldWrapperProps,
+  FieldWrapperSlots,
+  unknown
+> {}
+
+export type FieldWrapperEmits = {
+  /**
+   * Emitted when the information (tooltip) is clicked.
+   */
+  infoClick: [];
+};
+
+export default FieldWrapper;

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

@@ -0,0 +1,170 @@
+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,217 @@
+import { AxiosResponse } from 'axios';
+import { DefineComponent, Slot } from 'vue';
+
+import {
+  DropdownProps,
+  Option,
+} from '../../components/dropdown/Dropdown.vue.d';
+
+import { ButtonSelectTreeProps } from '../buttonselecttree/ButtonSelectTree.vue.d';
+import { CalendarProps } from '../calendar/Calendar.vue.d';
+import { QueryParams } from '../datatable/DataTable.vue.d';
+import { InputRangeNumberProps } from '../inputrangenumber/InputRangeNumber.vue.d';
+import { MultiSelectProps } from '../multiselect/MultiSelect.vue.d';
+import { StringKeyOf, TypeError } from '../ts-helpers';
+
+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';
+
+type BaseSelectField<OptionsQueryParams extends QueryParams> = {
+  /**
+   * Represents a function type for fetching options based on query parameters.
+   *
+   * @template T - The type of query parameters, extending `QueryParams`. Defaults to `any`.
+   *
+   * This function can have one of the following signatures:
+   * - A synchronous function that takes query parameters and returns an array of `Option` objects.
+   * - An asynchronous function that takes query parameters and returns a `Promise` resolving to an array of `Option` objects.
+   * - An asynchronous function that takes query parameters and returns a `Promise` resolving to an `AxiosResponse` containing a `FetchOptionResponse` object.
+   *
+   * @param args - The query parameters of type `T` used to fetch the options.
+   * @returns One of the following:
+   * - An array of `Option` objects.
+   * - A `Promise` resolving to an array of `Option` objects.
+   * - A `Promise` resolving to an `AxiosResponse` containing a `FetchOptionResponse` object.
+   */
+  fetchOptionFn?(
+    args: OptionsQueryParams,
+  ): Option[] | Promise<Option[]> | Promise<AxiosResponse<FetchOptionResponse>>;
+
+  optionField?: keyof OptionsQueryParams; // @example - actionOptions
+  params?: OptionsQueryParams; // Additional QueryParams for the fetchOptionFn
+};
+
+export interface MultiSelectFilterField<OptionsQueryParams extends QueryParams>
+  extends BaseSelectField<OptionsQueryParams>,
+    MultiSelectProps {
+  type: 'multiselect';
+}
+
+export interface DropdownFilterField<OptionsQueryParams extends QueryParams>
+  extends BaseSelectField<OptionsQueryParams>,
+    DropdownProps {
+  type: 'dropdown';
+}
+
+type RangeNumberFilterField<Field extends string> =
+  | (InputRangeNumberProps & {
+      type: 'rangenumber';
+      /**
+       * Specify min and max field
+       *
+       * @example ['minAge', 'maxAge']
+       */
+      fields: [Field, Field];
+      field?: TypeError<'`field` must not be specified when using `fields` property'>;
+      tooltip?: string;
+    })
+  | (InputRangeNumberProps & {
+      type: 'rangenumber';
+      /**
+       * Specify single field for both min and max input.
+       * The value will be a number array.
+       *
+       * Prefer using this property when working with Static Filtering
+       *
+       * @example value: [1000, 5000] or equivalent to 'value.0': 1000 & 'value.1': 5000
+       */
+      field: Field;
+      fields?: TypeError<'`fields` must not be specified when using `field` property'>;
+      tooltip?: string;
+    });
+
+export interface ButtonSelectTreeFilterField<
+  Field extends string,
+  Params = QueryParams,
+> extends Omit<ButtonSelectTreeProps, 'type' | 'label' | 'fieldLabel'> {
+  type: 'group' | 'category';
+  field: Field; // 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?: Params; // Override QueryParams for the fetchTree
+}
+
+export interface CalendarFilterField extends CalendarProps {
+  type: 'calendar';
+}
+
+export type AdditionalFilterField<Field extends string = string> =
+  ButtonSelectTreeFilterField<Field>;
+
+export type BaseFilterField<Params extends QueryParams = QueryParams> = {
+  /**
+   * Filter field visibility
+   *
+   * You dont need manually filter, this component already handle it.
+   */
+  visible?: boolean;
+  /**
+   * 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: keyof Params;
+};
+
+export type FilterField<
+  Params extends QueryParams = QueryParams,
+  OptionsQueryParams extends QueryParams = QueryParams,
+> =
+  | (BaseFilterField<Params> &
+      (
+        | AdditionalFilterField<StringKeyOf<Params>>
+        | MultiSelectFilterField<OptionsQueryParams>
+        | DropdownFilterField<OptionsQueryParams>
+        | CalendarFilterField
+      ))
+  | (Omit<BaseFilterField<Params>, 'field'> &
+      RangeNumberFilterField<StringKeyOf<Params>>);
+
+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 = {
+  /**
+   * 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;