Beautiful Dialog Modal Component For Vue 3 - Gitart

Install & Download:

# Yarn
$ yarn add gitart-vue-dialog
# NPM
$ npm i gitart-vue-dialog

Description:

Gitart is a beautiful & customizable dialog and modal component created for Vue 3 applications.

How to use it:

1. Import the Gitart Vue Dialog component.

import { GDialog } from "gitart-vue-dialog";
// stylesheet
import "gitart-vue-dialog/dist/style.css";

2. Register the component.

export default {
  components: {
    GDialog,
  },
}

3. Create a basic dialog.

<GDialog v-model="value">
  Content
</GDialog>
<button @click="onOpen">Open Dialog</button>

// Composition API
export default {
  components: {
    GDialog,
  },
  setup() {
    const value = ref(false)
    const onOpen = () => {
      value.value = true
    }
    return {
      value,
      onOpen,
    }
  },
}

// Option API
export default {
  components: {
    GDialog,
  },
  data: () => ({
    value: false,
  }),
  methods: {
    onOpen() {
      this.value = true
    },
  },
}

4. All available component props.

background: {
  type: [Boolean, String],
  default: true,
},
borderRadius: {
  type: [Boolean, Number, String],
  default: true,
},
contentClass: {
  type: String,
  default: '',
},
/**
 * removes box-shadow for content
 */
depressed: {
  type: Boolean,
  default: false,
},
fullscreen: {
  type: Boolean,
  default: false,
},
height: {
  type: [String, Number],
  default: 'auto',
},
/**
 * enables local mode for the dialog.
 * dialog is fixed to first "position: relative;" parent
 */
local: {
  type: Boolean,
  default: false,
},
maxWidth: {
  type: [String, Number],
  default: 'none',
},
modelValue: {
  type: Boolean,
  default: false,
},
overlayBackground: {
  type: [Boolean, String],
  default: true,
},
/**
 * clicking outside content will not close modal
 */
persistent: {
  type: Boolean,
  default: false,
},
scrollable: {
  type: Boolean,
  default: false,
},
transition: {
  type: String,
  default: 'g-dialog-transition',
},
width: {
  type: [String, Number],
  default: 'auto',
},