# Examples

# Basic Modal

# Usage

<template>
  <div class="wrapper">
    <button class="open" @click="openModal">
      Open
    </button>
  </div>
</template>
<script>
import BasicComponent from '../src/components/BasicComponent'

export default {
  methods: {
    openModal() {
      this.$FModal.show({ component: BasicComponent })
    }
  }, 
}
</script>

# BasicComponent

<template>
  <div style="font-size: 1.5rem; padding: 1rem;">
    Aliqua qui deserunt pariatur ullamco ex dolore mollit consequat eu ut id.
    Amet elit nostrud aliqua laborum eiusmod anim reprehenderit excepteur
    laboris nisi cupidatat ipsum nulla consequat.
  </div>
</template>

# Close Button

# Usage

<template>
  <div class="wrapper">
    <button class="open" @click="openModal">
      Open
    </button>
  </div>
</template>
<script>
import CloseButtonComponent from '../src/components/CloseButtonComponent'

export default {
  methods: {
    openModal() {
      this.$FModal.show({ component: CloseButtonComponent })
    }
  }
}
</script>

# CloseButtonComponent

<template>
  <div>
    <div class="close">
      <div class="close-title">Close Button</div>
      <button @click="closeModal">×</button>
    </div>
    <div class="content">
      Aliqua qui deserunt pariatur ullamco ex dolore mollit consequat eu ut id.
      Amet elit nostrud aliqua laborum eiusmod anim reprehenderit excepteur
      laboris nisi cupidatat ipsum nulla consequat.
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    closeModal: function () {
      this.$FModal.hide();
    },
  },
};
</script>

<style scoped>
.content {
  padding: 15px 15px 15px 15px;
}
.close {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.close-title {
  margin-left: 15px;
  padding: 15px 0px;
  font-size: 2rem;
  font-weight: bold;
}

.close button {
  margin-right: 15px;
  font-size: 2.5rem;
}

* {
  font-size: 1.5rem;
}
</style>

# Centered

# Usage

<template>
  <div class="wrapper">
    <button class="open" @click="openModal">
      Open
    </button>
  </div>
</template>
<script>
import BasicComponent from '../src/components/BasicComponent'

export default {
  methods: {
    openModal() {
      this.$FModal.show(
        { 
          component: BasicComponent, 
          width: 300, 
          maxHeight: '100%', 
          placement: 'center center' 
        }
      )
    }
  }
}
</script>

# Component Props

# Usage

<template>
  <div>
    <button @click="openModal">
      Open
    </button>
  </div>
</template>
<script>
import PropsComponent from '../src/components/PropsComponent'

export default {
  methods: {
    openModal() {
      this.$FModal.show(
        { 
          component: PropsComponent 
        }, 
        { 
          text: 'Hello Props', 
          color: '#7c8', 
          contentPadding: 30 
        }
      )
    }
  }
}
</script>

# PropsComponent

<template>
  <div :style="{ color, padding: `${contentPadding}px`, fontWeight: 'bold' }">
    {{ text }}
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String
    },
    color: {
      type: String
    },
    contentPadding: {
      type: Number
    }
  }
}
</script>

<style scoped>
* {
  font-size: 1.5rem;
}
</style>

# Custom Styling

# Usage

<template>
  <div>
    <button @click="openModal">
      Open
    </button>
  </div>
</template>
<script>
import BasicComponent from '../src/components/BasicComponent'

export default {
  methods: {
    openModal() {
      this.$FModal.show(
        { 
          component: BasicComponent, 
          overlayStyles: { 
            backgroundColor: 'rgba(72, 128, 48, 0.4)'
          }, 
          contentStyles: { 
            border: '4px solid grey', 
            borderBottomLeftRadius: '25px',
            borderBottomRightRadius: '25px'
          } 
        }
      )
    }
  }
}
</script>

# BasicComponent

<template>
  <div style="font-size: 1.5rem; padding: 1rem;">
    Aliqua qui deserunt pariatur ullamco ex dolore mollit consequat eu ut id.
    Amet elit nostrud aliqua laborum eiusmod anim reprehenderit excepteur
    laboris nisi cupidatat ipsum nulla consequat.
  </div>
</template>

# Image

# Usage

<template>
  <div>
    <button @click="openModal">
      Open
    </button>
  </div>
</template>
<script>
import ImageComponent from '../src/components/ImageComponent'

export default {
  methods: {
    openModal() {
      this.$FModal.show(
        { 
          component: ImageComponent, 
        }
      )
    }
  }
}
</script>

# ImageComponent

<template>
  <div>
    <img class="image" width="100%" src="https://source.unsplash.com/800x300" @load="onLoad">
    <div v-if="!imageLoaded" class="loading-indicator" :style="{ backgroundImage: `url(${$withBase('/loading.gif')})`}"></div>
    <div class="like-button"></div>
    <div class="image-title">{{ new Date().toDateString() }}</div>
    <div class="image-description">
      Lorem, ipsum dolor sit amet
    </div>
    <div class="content">
      Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos. Unsplash.
    </div>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      imageLoaded: false
    }
  },
  methods: {
    onLoad(){
      this.imageLoaded = true
    }
  }
}
</script>
<style scoped>
.image {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.like-button {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 1px 10px;
  border-radius: 8px;
  background-color: rgba(240, 240, 240, 0.8);
  font-size: 1.2rem;
}

.loading-indicator {
  background-size: cover;
  background-position: center;
  height: 139px;
}

.image-title {
  padding: 10px 10px 5px 10px;
  font-weight: bold;
  font-size: 2rem;
}

.image-description {
  padding: 0px 10px 10px 10px;
  color: rgba(128, 128, 128, 0.8);
  font-weight: 400;
  font-size: 1.2rem;
}

.content {
  padding: 10px;
  font-size: 1.3rem;
}
</style>