DJanoskova

<template>
  <Modal :isOpen="!!component" :title="title" @onClose="handleOutsideClick">
    <component :is="component" @onClose="handleClose" v-bind="props" />
  </Modal>
</template>

<script>
import { ModalBus } from '../eventBus'

import Modal from './common/Modal'

DJanoskova

<template>
  <transition name="fade">
    <div class="modal-backdrop"
      v-show="isOpen"
      :class="{open: isOpen}"
      @click="$emit('onClose')">

      <div class="modal-dialog" :class="{open: isOpen}" @click.stop>
        <div class="modal-title" v-if="title">{{ title }}</div>
        <div class="modal-body">

DJanoskova

<template>
  <form class="mb-4">
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2">
        Username
      </label>
      <input
        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        type="text" placeholder="Username">
    </div>

DJanoskova

<template>
  <div>
    <p class="mb-4">
      This dialog is closable from the inside of the component!
    </p>
    <div class="text-right">
      <Button @click="$emit('onClose')" color="gray">Close</Button>
    </div>
  </div>
</template>

DJanoskova

<template>
  <div :class="classes">
    <span class="block sm:inline">{{ text }}</span>
  </div>
</template>

<script>
export default {
  props: {
    type: {

DJanoskova

<template>
  <div id="app">
    <div class="content">
      <Button @click="openSuccessAlert" class="mr-2">
        Success alert
      </Button>
      <Button @click="openDangerAlert" class="mr-2">
        Danger alert
      </Button>
      <Button @click="openClosableInside" class="mr-2">

DJanoskova

<template>
  <Modal :isOpen="!!component" :title="title" @onClose="handleClose">
    <component :is="component" @onClose="handleClose" v-bind="props" />
  </Modal>
</template>

<script>
import { ModalBus } from '../eventBus'

import Modal from './common/Modal'

DJanoskova

<template>
  <div class="modal-backdrop"
    v-show="isOpen"
    :class="{open: isOpen}"
    @click="$emit('onClose')">

    <div class="modal-dialog" :class="{open: isOpen}" @click.stop>
      <div class="modal-title" v-if="title">{{ title }}</div>
      <div class="modal-body">
        <slot />

DJanoskova

import Vue from 'vue'

export const ModalBus = new Vue()

DJanoskova

import Ws from '@adonisjs/websocket-client';

import { getSocketProtocol } from '../utils/data';

export class SocketConnection {
  connect () {
    this.ws = Ws(`${getSocketProtocol()}${process.env.REACT_APP_API_URL}`)
    // .withApiToken(token)
      .connect();