@pantograph/pattern-vue 0.0.3 → 0.0.4

package/dist/components/Comment/types.d.ts

@@ -0,0 +1,563 @@
+import { PopoverProps, AvatarSlots, ShortcutProps, UploadBaseProps, UploadEmits, ButtonProps, KbdProps, AvatarProps, UploadProps, UploadSlots, Direction, ComboboxProps } from '@pantograph/vue';
+import { ClassValue } from 'clsx';
+import { VNode, Ref } from 'vue';
+import { GOPickerProps } from '../GOPicker';
+import { DefineComponent, EmitToProp, EmitType } from '@pantograph/utils-vue';
+export interface CommentReactionUser {
+    id: string;
+    avatar: AvatarProps;
+    name: string;
+}
+/**
+ * Interface representing a reaction item for a comment
+ */
+export interface CommentReactionItem {
+    /**
+     * The emoji character to display
+     */
+    emoji: string;
+    /**
+     * The count of reactions for this emoji
+     */
+    count: number;
+    /**
+     * Whether this reaction is active for the current user
+     */
+    active?: boolean;
+    users?: CommentReactionUser[];
+}
+/**
+ * Props for the Comment component
+ */
+export interface CommentProps {
+    /**
+     * Additional CSS classes to apply to the comment
+     */
+    class?: ClassValue;
+    /**
+     * CSS classes to apply to the header element
+     */
+    headerCls?: ClassValue;
+    /**
+     * CSS classes to apply to the actions element
+     */
+    actionsCls?: ClassValue;
+    /**
+     * CSS classes to apply to the body element
+     */
+    bodyCls?: ClassValue;
+    /**
+     * CSS classes to apply to the datetime element
+     */
+    datetimeCls?: ClassValue;
+    /**
+     * Props to pass to the upload component
+     */
+    uploadProps?: Omit<UploadProps, 'action'>;
+    /**
+     * CSS classes to apply to the content element
+     */
+    contentCls?: ClassValue;
+    /**
+     * CSS classes to apply to the author element
+     */
+    authorCls?: ClassValue;
+    /**
+     * CSS classes to apply to the replies element
+     */
+    repliesCls?: ClassValue;
+    /**
+     * CSS classes to apply to the header content element
+     */
+    headerContentCls?: ClassValue;
+    /**
+     * CSS classes to apply to the reactions element
+     */
+    reactionsCls?: ClassValue;
+    /**
+     * CSS classes to apply to the replies header element
+     */
+    repliesHeaderCls?: ClassValue;
+    /**
+     * CSS classes to apply to the replies title element
+     */
+    repliesTitleCls?: ClassValue;
+    /**
+     * CSS classes to apply to the replies content element
+     */
+    repliesContentCls?: ClassValue;
+    /**
+     * The author of the comment
+     */
+    author?: string;
+    /**
+     * URL of the author's avatar image
+     */
+    avatar?: string;
+    /**
+     * The content of the comment
+     */
+    content?: string;
+    /**
+     * The datetime of the comment
+     */
+    datetime?: string;
+    /**
+     * The number of replies to the comment
+     */
+    repliesCount?: number | string;
+    /**
+     * The title for the replies section
+     * @default 'Replies'
+     */
+    repliesTitle?: string;
+    /**
+     * Props to pass to the avatar component
+     */
+    avatarProps?: AvatarProps;
+    /**
+     * Whether the replies section is open
+     * Supports v-model binding
+     */
+    open?: boolean;
+    /**
+     * Whether to show the reaction functionality
+     * @default true
+     */
+    hasReaction?: boolean;
+    /**
+     * Whether to show the edit action
+     * @default true
+     */
+    hasEdit?: boolean;
+    /**
+     * Whether to show the delete action
+     * @default true
+     */
+    hasDelete?: boolean;
+    /**
+     * Whether to show the reply action
+     * @default true
+     */
+    hasReply?: boolean;
+    /**
+     * The reactions to display on the comment
+     */
+    reactions?: CommentReactionItem[];
+    /**
+     * Whether to show the replies section
+     */
+    showReplies?: boolean;
+    /**
+     * The ID of the current user who reacted (for highlighting active reactions)
+     */
+    currentReactorId?: string;
+    /**
+     * CSS classes to apply to the reaction users hover card
+     */
+    reactionUsersCls?: ClassValue;
+    /**
+     * The title text for reaction users hover card
+     * @default 'people reacted with'
+     */
+    reactionUsersTitle?: string;
+    dir?: Direction;
+}
+/**
+ * Base emits for the Comment component
+ */
+export interface CommentBaseEmits {
+    /**
+     * Emitted when the reaction button is clicked
+     * @param value - The HTMLElement reference for positioning the reaction picker
+     */
+    openReaction: [value: HTMLElement];
+}
+/**
+ * Emits for the Comment component
+ */
+export interface CommentEmits extends CommentBaseEmits {
+    /**
+     * Emitted when the replies section open state changes
+     * Used for v-model binding
+     * @param value - The new open state
+     */
+    'update:open': [value: boolean];
+    /**
+     * Emitted when the actions button is clicked
+     * @param value - The HTMLElement reference for positioning the actions menu
+     */
+    openActions: [value: HTMLElement];
+    /**
+     * Emitted when a reaction is selected
+     * @param value - The selected reaction item
+     */
+    reaction: [value: CommentReactionItem];
+    /**
+     * Emitted when the reply button is clicked
+     * @param callback - Callback function to handle reply state
+     */
+    reply: [callback: (value?: boolean) => void];
+}
+/**
+ * Slots for the Comment component
+ */
+export interface CommentSlots extends Omit<UploadSlots, 'default'> {
+    /**
+     * Custom content for the comment header
+     * @param data - Slot data object
+     */
+    header?: (data?: object) => never;
+    /**
+     * Custom content for the author information
+     * @param data - Slot data object
+     */
+    author?: (data?: object) => never;
+    /**
+     * Custom content for the author avatar
+     * @param data - Slot data object
+     */
+    avatar?: (data?: object) => never;
+    /**
+     * Custom content for the comment body
+     * @param data - Slot data object
+     */
+    content?: (data?: object) => never;
+    /**
+     * Custom content for the timestamp
+     * @param data - Slot data object
+     */
+    datetime?: (data?: object) => never;
+    /**
+     * Custom content for the replies header
+     * @param data - Slot data with open state
+     */
+    repliesHeader?: (data?: {
+        open: boolean;
+    }) => never;
+    /**
+     * Custom content for the replies title
+     * @param data - Slot data object
+     */
+    repliesTitle?: (data?: object) => never;
+    /**
+     * Custom content for the replies count
+     * @param data - Slot data object
+     */
+    repliesCount?: (data?: object) => never;
+    /**
+     * Custom content for the replies section
+     * @param data - Slot data object
+     */
+    replies?: (data?: object) => never;
+    /**
+     * Custom content for individual reaction items
+     * @param reaction - The reaction item data
+     */
+    reactionItem?: ({ reaction }: {
+        reaction: CommentReactionItem;
+    }) => never;
+    /**
+     * Custom trigger element for the reaction hover card
+     * Maps to ReactionHoverCardSlots['trigger']
+     */
+    reactionHoverCardTrigger?: ReactionHoverCardSlots['header'];
+    /**
+     * Custom header content for the reaction hover card
+     * Maps to ReactionHoverCardSlots['header']
+     */
+    reactionHoverCardHeader?: ReactionHoverCardSlots['header'];
+    /**
+     * Custom users list content for the reaction hover card
+     * Maps to ReactionHoverCardSlots['users']
+     */
+    reactionHoverCardUsers?: ReactionHoverCardSlots['users'];
+    /**
+     * Custom user item content for the reaction hover card
+     * Maps to ReactionHoverCardSlots['user']
+     */
+    reactionHoverCardUser?: ReactionHoverCardSlots['user'];
+    /**
+     * Custom avatar content for users in the reaction hover card
+     * Maps to ReactionHoverCardSlots['avatar']
+     */
+    reactionHoverCardAvatar?: ReactionHoverCardSlots['avatar'];
+    /**
+     * Custom fallback content for avatars in the reaction hover card
+     * Maps to ReactionHoverCardSlots['fallback']
+     */
+    reactionHoverCardFallback?: ReactionHoverCardSlots['fallback'];
+    /**
+     * Custom name content for users in the reaction hover card
+     * Maps to ReactionHoverCardSlots['name']
+     */
+    reactionHoverCardName?: ReactionHoverCardSlots['name'];
+}
+export interface CommentContext {
+    props: CommentProps;
+    emit: EmitType<CommentEmits>;
+    slots: CommentSlots;
+    fileListRef?: Ref<any>;
+    openReplies?: Ref<boolean | undefined>;
+}
+/**
+ * Props for the CommentAction component
+ */
+export interface CommentActionProps extends PopoverProps {
+    /**
+     * Whether to show the edit action
+     * @default true
+     */
+    hasEdit?: boolean;
+    /**
+     * Whether to show the delete action
+     * @default true
+     */
+    hasDelete?: boolean;
+    /**
+     * Text to display for the edit action
+     * @default 'Edit'
+     */
+    editText?: string;
+    /**
+     * Text to display for the delete action
+     * @default 'Delete'
+     */
+    deleteText?: string;
+}
+/**
+ * Emits for the CommentAction component
+ */
+export interface CommentActionEmits {
+    /**
+     * Emitted when the edit action is triggered
+     */
+    edit: [];
+    /**
+     * Emitted when the delete action is triggered
+     */
+    delete: [];
+    /**
+     * Emitted when the open state changes
+     */
+    'update:open': [value: string];
+}
+/**
+ * Props for the CommentEditor component
+ */
+export interface CommentEditorProps {
+    /**
+     * Additional CSS classes to apply to the comment editor
+     */
+    class?: ClassValue;
+    /**
+     * CSS classes to apply to the actions element
+     */
+    actionsCls?: ClassValue;
+    /**
+     * CSS classes to apply to the editor element
+     */
+    editorCls?: ClassValue;
+    /**
+     * CSS classes to apply to the footer element
+     */
+    footerCls?: ClassValue;
+    /**
+     * Whether to hide the reaction functionality
+     */
+    noReaction?: boolean;
+    /**
+     * Whether to hide the upload functionality
+     */
+    noUpload?: boolean;
+    /**
+     * Whether to hide the mention functionality
+     */
+    noMention?: boolean;
+    /**
+     * Props to pass to the upload trigger component
+     */
+    uploadTriggerProps?: UploadBaseProps;
+    /**
+     * Reference element for the mentions
+     */
+    mentionsReference?: HTMLElement | undefined;
+    /**
+     * Props to pass to the upload component
+     */
+    uploadProps: UploadProps & Partial<{
+        [K in keyof UploadEmits as EmitToProp<K>]: (...params: UploadEmits[K]) => void;
+    }>;
+    /**
+     * Maximum height of the comment editor
+     * @default 100
+     */
+    maxHeight?: string | number;
+    sendActionsCls?: ClassValue;
+    okProps?: ButtonProps & {
+        text: string;
+        hide?: boolean;
+    };
+    cancelProps?: ButtonProps & {
+        text: string;
+        hide?: boolean;
+    };
+    kbdProps?: KbdProps & {
+        text: string;
+        hide?: boolean;
+    };
+    kbdDescription?: string;
+    kbdDescriptionCls?: ClassValue;
+    dividerCls?: ClassValue;
+}
+/**
+ * Emits for the CommentEditor component
+ */
+export interface CommentEditorEmits extends CommentBaseEmits {
+    /**
+     * Emitted when the reaction picker is opened
+     */
+    openReaction: [value: HTMLElement];
+    /**
+     * Emitted when the mention picker is opened
+     */
+    openMention: [value: HTMLElement];
+    /**
+     * Emitted when the comment editor loses focus
+     */
+    blur: [value: InputEvent];
+    /**
+     * Emitted when the comment editor receives focus
+     */
+    focus: [value: InputEvent];
+    /**
+     * Emitted when the comment is submitted
+     */
+    submit: [];
+    cancel: [];
+}
+/**
+ * Props for the CommentReaction component
+ */
+export interface CommentReactionProps extends GOPickerProps {
+    /**
+     * The reference element for positioning the reaction picker
+     */
+    reference: HTMLElement;
+    /**
+     * Whether the reaction picker is open
+     */
+    open?: boolean;
+}
+/**
+ * Emits for the CommentReaction component
+ */
+export interface CommentReactionEmits {
+    /**
+     * Emitted when a reaction is selected
+     */
+    reaction: [value: string];
+    /**
+     * Emitted when the open state changes
+     */
+    'update:open': [value: string];
+}
+export interface ReactionHoverCardProps {
+    reaction: CommentReactionItem;
+    reactionUsersCls?: any;
+    reactionUsersTitle?: string;
+}
+export interface ReactionHoverCardSlots {
+    trigger?: () => VNode;
+    header?: ({ reaction }: {
+        reaction: CommentReactionItem;
+    }) => VNode;
+    users?: ({ reaction }: {
+        reaction: CommentReactionItem;
+    }) => VNode;
+    user?: ({ user }: {
+        user: CommentReactionUser;
+    }) => VNode;
+    avatar?: ({ user }: {
+        user: CommentReactionUser;
+    }) => VNode;
+    fallback?: ({ user }: {
+        user: CommentReactionUser;
+    }) => VNode;
+    name?: ({ user }: {
+        user: CommentReactionUser;
+    }) => VNode;
+}
+export interface CommentReactionItemProps {
+    reaction: CommentReactionItem;
+}
+/**
+ * Props for the CommentTrigger component
+ */
+export interface CommentTriggerProps {
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: ClassValue;
+    /**
+     * Text to display in the trigger
+     * @default 'Add a Comment or type @ to Mention...'
+     */
+    text?: string;
+    /**
+     * URL of the avatar image to display
+     */
+    src?: string;
+    /**
+     * Whether to enable the keyboard shortcut
+     * @default false
+     */
+    withShortcut?: boolean;
+    /**
+     * Whether to ignore the keyboard shortcut
+     * @default false
+     */
+    ignoreShortcut?: boolean;
+    /**
+     * Whether the trigger is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Props to pass to the avatar component
+     */
+    avatarProps?: AvatarProps;
+    /**
+     * Props to pass to the shortcut component
+     */
+    shortcutProps?: ShortcutProps;
+}
+/**
+ * Slots for the CommentTrigger component
+ */
+export interface CommentTriggerSlots extends AvatarSlots {
+    /**
+     * Slot for custom text content
+     */
+    text?: (params?: object) => never;
+}
+/**
+ * Emits for the CommentTrigger component
+ */
+export interface CommentTriggerEmits {
+    /**
+     * Emitted when the add action is triggered
+     */
+    add: [value: MouseEvent | KeyboardEvent];
+}
+declare module 'vue' {
+    interface GlobalComponents {
+        Comment: DefineComponent<CommentProps, CommentSlots, CommentEmits>;
+        CommentAction: DefineComponent<CommentActionProps>;
+        CommentReaction: DefineComponent<CommentReactionProps>;
+        CommentReactionListItem: DefineComponent<CommentReactionItemProps>;
+        CommentReactionHoverCard: DefineComponent<ReactionHoverCardProps, ReactionHoverCardSlots>;
+        CommentMention: DefineComponent<ComboboxProps>;
+        CommentEditor: DefineComponent<CommentEditorProps>;
+        CommentTrigger: DefineComponent<CommentTriggerProps, CommentTriggerSlots, CommentTriggerEmits>;
+    }
+}

package/dist/components/Comment/useComment.d.ts

@@ -0,0 +1,49 @@
+import { CommentReactionProps, CommentActionProps } from './types';
+/**
+ * Composable function for managing comment functionality
+ * @param params - Parameters including onReaction and addEmoji callbacks
+ * @returns Object containing refs, bindings, and helper functions
+ */
+export declare const useComment: (params: {
+    /**
+     * Callback function when a reaction is selected
+     */
+    onReaction: (reaction: string) => void;
+    /**
+     * Callback function to add an emoji
+     */
+    addEmoji: (emoji: string) => void;
+}) => {
+    forwardRefMention: import('vue').Ref<any, any>;
+    openMention: import('vue').Ref<boolean, boolean>;
+    handleMentionUpdateOpen: (value: boolean) => void;
+    search: import('vue').Ref<string | undefined, string | undefined>;
+    handleMentionUpdateSearch: (value: string) => void;
+    mentionsReference: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    mentionsHeaderSearch: import('vue').Ref<boolean, boolean>;
+    reactionBinding: import('vue').ComputedRef<CommentReactionProps>;
+    actionBinding: import('vue').ComputedRef<CommentActionProps>;
+    editorBinding: import('vue').ComputedRef<{
+        onOpenReaction: (reference: HTMLElement) => void;
+        onOpenMention: (reference: HTMLElement) => void;
+    }>;
+    mentionBinding: import('vue').ComputedRef<{
+        ref: (el: any) => any;
+        open: boolean;
+        'onUpdate:open': (value: boolean) => void;
+        search: string | undefined;
+        'onUpdate:search': (value: string) => void;
+        reference: HTMLElement | undefined;
+        disableOutsidePointerEvents: boolean;
+        resetSearchTermOnBlur: boolean;
+        resetHighlightedOptionAfterSelect: boolean;
+        headerSearch: boolean;
+        onPointerDownOutside: () => void;
+        onEscapeKeyDown: () => void;
+    }>;
+    openActions: (reference: HTMLElement) => void;
+    openReaction: (reference: HTMLElement, fromEditor?: boolean) => void;
+    openMentionInEditor: (clientRect?: null | (() => DOMRect | null)) => void;
+    closeMentionInEditor: () => void;
+    updateMentionQuery: (query: string) => void;
+};