@fewangsit/wangsvue-fats 1.0.0-alpha.34 → 1.0.0-alpha.36

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

@@ -2,190 +2,190 @@ 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;
+  /**
+   * 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[]];
+  /**
+   * 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;
+  /**
+   * 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;
+  type?: string;
+  attrs?: Record<string, any>;
+  content?: JSONContent[];
+  marks?: {
+    type: string;
     attrs?: Record<string, any>;
-    content?: JSONContent[];
-    marks?: {
-        type: string;
-        attrs?: Record<string, any>;
-        [key: string]: any;
-    }[];
-    text?: string;
     [key: string]: any;
+  }[];
+  text?: string;
+  [key: string]: any;
 };
 
 export type ImageProperties = {
-    alt?: string;
-    src: string;
-    title: string;
+  alt?: string;
+  src: string;
+  title: string;
 };
 
 export type GetMentionSuggestionResponse = {
-    status: number;
-    message: string;
-    data: MentionSuggestion[];
+  status: number;
+  message: string;
+  data: MentionSuggestion[];
 };
 
 export type MentionSuggestion = {
-    _id: string;
-    fullName: string;
-    nickName: string;
-    profilePicture: string;
+  _id: string;
+  fullName: string;
+  nickName: string;
+  profilePicture: string;
 };
 
 export type EditorState = 'editable' | 'readonly';
 
 declare class Editor extends ClassComponent<
-    EditorProps,
-    unknown,
-    EditorEmits
+  EditorProps,
+  unknown,
+  EditorEmits
 > {}
 
 export default Editor;

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

@@ -1,67 +1,67 @@
 import { DefineComponent } from 'vue';
 
 export interface FieldWrapperLocaleConfig {
-    /**
-     * The indicator for mandatory field.
-     * @default '*''
-     */
-    labelRequired?: string;
+  /**
+   * The indicator for mandatory field.
+   * @default '*''
+   */
+  labelRequired?: string;
 
-    /**
-     * The indicator for optional field.
-     * @default '(optional)''
-     */
-    labelOptional?: 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;
+  /**
+   * 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;
+  /**
+   * 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 "(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;
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * 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';
+  /**
+   * 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>;