@fewangsit/wangsvue-gsts 1.0.0-alpha.1

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

@@ -0,0 +1,92 @@
+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/Editor.vue.d.ts

@@ -0,0 +1,191 @@
+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/editor/EditorButton.vue.d.ts

@@ -0,0 +1,15 @@
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<{
+    classButton?: string[];
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<{
+    classButton?: string[];
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -0,0 +1,35 @@
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<{
+    items: {
+        id: string;
+        label: string;
+        nickName: string;
+        profilePicture: string;
+    }[];
+    command: (arg: {
+        id: string;
+        label: string;
+    }) => void;
+}>, {
+    onKeyDown: (event: KeyboardEvent) => boolean;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<{
+    items: {
+        id: string;
+        label: string;
+        nickName: string;
+        profilePicture: string;
+    }[];
+    command: (arg: {
+        id: string;
+        label: string;
+    }) => void;
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -0,0 +1,92 @@
+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,153 @@
+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;
+  /**
+   * 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 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;