Vue Multi Dialog

A vue multi dialog with expand and drag features.

Installation

In your project directory, run:

npm install vue-multi-dialog

Demo

Here are the demos of some features like adding a single dialog, multiple dialog, expandable dialog, draggable dialog.

Single Dialog

Multi Dialog

Expandable Dialog

Draggable Dialog

How to use

import { Dialog } from 'vue-multi-dialog';

app.use(Dialog);

import { useDialog } from 'vue-multi-dialog';

const { add: addDialog } = useDialog();

addDialog({
    title: 'Hello',
    bodyClass: '!w-[600px]',
    multiple: true,
    content: computed(() => ({
      component: SampleDialog,
      props: {},
    })),
});

Types

type DialogPlacement =
| 'bottom'
| 'top'
| 'bottom-right'
| 'bottom-left'
| 'top-right'
| 'top-left';

type DialogDirection = 'rtl' | 'lrt';

type MoveDirection = 'left' | 'right';

type DialogProps = {
  content?: MaybeRefOrGetter<ComponentType | string>;
  title?: MaybeRefOrGetter<ComponentType | string>;
  expandableLabel?: MaybeRefOrGetter<ComponentType | string>;
  expandable?: boolean;
  expandedContent?: MaybeRefOrGetter<ComponentType | string>;
  defaultExpanded?: boolean;
  footer?: MaybeRefOrGetter<ComponentType | string>;
  bodyClass?: string;
  wrapperClass?: string;
  footerClass?: string;
  multiple?: boolean;
  referenceElementRef?: any;
  placement?: DialogPlacement;
  afterClose?: () => void;
  afterOpen?: () => void;
  direction?: DialogDirection;
  onExpandedUpdate?: (value: boolean) => void;
};

type UseDialogReturnType = {
  add: (dialog: DialogConsumerProps) => string;
  selectedDialogId: Ref<string | undefined>;
};