@fewangsit/wangsvue-fats 1.0.0-alpha.22 → 1.0.0-alpha.24

package/components/dropdown/Dropdown.vue.d.ts

@@ -0,0 +1,274 @@
+import { Slot } from 'vue';
+import { CustomValidation } from '../form/Form.vue.d';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { BadgeProps } from '../badge/Badge.vue.d';
+import { WangsIcons } from '../icon/Icon.vue.d';
+
+export type OptionValue = string | number | boolean | Record<string, any>;
+
+export type Option = {
+    label?: string;
+    value?: OptionValue;
+    visible?: boolean;
+    icon?: WangsIcons;
+    [key: string]: any;
+};
+
+/**
+ * Configuration interface for localizing dropdown component placeholders and error messages.
+ */
+export interface DropdownLocaleConfig {
+    /**
+     * Placeholder text for the filter input field.
+     *
+     * @default undefined
+     */
+    filterPlaceholder?: string;
+
+    /**
+     * Placeholder text displayed while the dropdown is loading.
+     *
+     * @example 'Loading...'
+     * @default undefined
+     */
+    loadingPlaceholder?: string;
+
+    /**
+     * Placeholder text for the input field when no selection has been made.
+     *
+     * This text can include a placeholder `{label}` which will be replaced with the value of `props.label`.
+     *
+     * @example 'Select {label}' - If `props.label` is 'Option', the placeholder will be 'Select Option'.
+     * @example 'Select {lowercaseLabel}' - If `props.label` is 'Option', the placeholder will be 'Select option'.
+     * @default undefined
+     */
+    inputPlaceholder?: string;
+
+    /**
+     * Error message displayed when no selection has been made.
+     *
+     * This message can include placeholders:
+     * - `{label}`: Replaced with the value of `props.label`.
+     * - `{formattedLabel}`: Replaced with the value of `props.label` formatted with an appropriate article (a/an).
+     *
+     * @example
+     * // If `props.label` is 'Label', the error message will be:
+     * '{label} must be picked' - 'Label must be picked'
+     *
+     * @example
+     * // If `props.label` is 'user', the error message will be:
+     * 'You must pick {formattedLabel}' - 'You must pick a user'
+     *
+     * @default undefined
+     */
+    emptySelectionErrorMessage?: string;
+}
+
+/**
+ * Dropdown component props
+ */
+export interface DropdownProps {
+    /**
+     * Don't use modelValue with useValidator at the same time.
+     * It may lead unexpected behavior.
+     */
+    modelValue?: OptionValue;
+
+    /**
+     * If you deals with form validation on edit form action, you can set the initial value of the field.
+     */
+    initialValue?: OptionValue;
+
+    /**
+     * The input label. Tell the user what input is this.
+     */
+    label?: string;
+
+    /**
+     * List of options to display.
+     */
+    options?: Option[] | string[] | Record<string, any>;
+
+    /**
+     * Allows `null` to be treated as a valid selectable option in the dropdown.
+     *
+     * When enabled, `null` can be included in the options list and selected by the user.
+     */
+    allowNullOption?: boolean;
+
+    /**
+     * Specify the property name of option to be used as label.
+     *
+     * @default undefined - the label will be sets to the option itself.
+     */
+    optionLabel?: string;
+
+    /**
+     * Specify the property name of option to be used as value.
+     *
+     * @default undefined - the value will be sets to the option itself.
+     */
+    optionValue?: string;
+
+    /**
+     * Define the value style, whether badge or plain text
+     *
+     * @default 'plain'
+     */
+    valueType?: 'badge' | 'plain';
+
+    /**
+     * Bind the badge property to the dropdown value
+     */
+    badgeValueProps?: Omit<BadgeProps, 'label'>;
+
+    /**
+     * Set the input border style
+     *
+     * @default 'default'
+     */
+    inputBorder?: 'none' | 'default';
+
+    /**
+     * A property to uniquely identify an option.
+     */
+    dataKey?: string | undefined;
+
+    /**
+     * Determines if the field uses a validator
+     */
+    useValidator?: boolean;
+
+    /**
+     * Determines if the field is mandatory
+     */
+    mandatory?: boolean;
+
+    /**
+     * Show the text (opsional)
+     *
+     * @default true if mandatory true
+     */
+    showOptionalText?: boolean;
+
+    /**
+     * Set custom validator message.
+     * It is rarely use, this component has handled the validator message.
+     *
+     *
+     * @example: 'This field is required'
+     * @example: { empty: 'This field is required' }
+     */
+    validatorMessage?: string | CustomValidation<'empty'>;
+
+    /**
+     * Wether to format the message
+     *
+     * @default true
+     */
+    formatValidatorMessage?: boolean;
+
+    /**
+     * Set custom invalid state.
+     */
+    invalid?: 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 'dropdown'
+     */
+    fieldName?: string;
+
+    /**
+     * Default text to display when no option is selected.
+     *
+     * @default `Select ${label}`
+     */
+    placeholder?: string;
+
+    /**
+     * Whether the dropdown is in loading state.
+     * @defaultValue false
+     */
+    loading?: boolean;
+
+    /**
+     * Show icon 'info' on the right side of label.
+     * Show information to user about the field on icon hover.
+     */
+    fieldInfo?: string;
+
+    /**
+     * Set disabled state for input dropdown.
+     */
+    disabled?: boolean;
+
+    /**
+     * Whether show the Dropdown option search or not.
+     *
+     * @default true,
+     */
+    filter?: boolean;
+
+    /**
+     * The filter input Placeholder
+     *
+     * @default 'Search'
+     */
+    filterPlaceholder?: string;
+}
+
+export interface DropdownSlots {
+    'value': Slot<{ value: string; originalValue: any }>;
+    'option': Slot<{ option: Option }>;
+    'addon-left': Slot;
+    'addon-right': Slot;
+}
+
+/**
+ * Dropdown component emits
+ */
+export type DropdownEmits = {
+    /**
+     * Emits when an option selected.
+     */
+    'update:modelValue': [value: OptionValue | undefined];
+
+    /**
+     * Emits when overlay shown.
+     */
+    'show': [];
+};
+
+/**
+ * **WangsVue - Dropdown**
+ *
+ * _Dropdown also known as Select, is used to choose an item from a collection of options._
+ *
+ * --- ---
+ * ![WangsVue](https://www.wangs.id/wp-content/uploads/2023/12/cropped-Logo_Wangsid-removebg-preview-192x192.png)
+ *
+ * @group Component
+ */
+declare class Dropdown extends ClassComponent<
+    DropdownProps,
+    DropdownSlots,
+    DropdownEmits
+> {
+    /**
+     * Shows the overlay.
+     *
+     * @memberof MultiSelect
+     */
+    showOverlay(): void;
+}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Dropdown: GlobalComponentConstructor<Dropdown>;
+    }
+}
+
+export default Dropdown;

package/components/editor/CodeSnippetAdapter.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/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,35 @@
+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,49 @@
+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;
+          };
+};