<template>
  <div id="app" :class="['vc']">
    <vc-toolbar narrow fixed tag="header" :color="appColor" application>
      <vc-toolbar-icon-left icon="mdi-image" />
      <vc-toolbar-title>{{ lang.appTitle }}</vc-toolbar-title>
      <vc-toolbar-controls-right>
        <ul :class="['app-inline-list', 'app-top-navigation', 'app-inline-block']">
          <li v-for="(link, index) in topNavigation" :key="index">
            <a :href="link.to" :title="link.hint" target="_blank">
              <vc-icon color="white">{{ link.icon }}</vc-icon>
            </a>
          </li>
        </ul>
      </vc-toolbar-controls-right>
    </vc-toolbar>
    <vc-container tag="main" :class="['app-main']" application>
      <h2 :class="['headline', 'font-grey', 'font-l-600']">{{ lang.appTitle }}</h2>
      <p>Simple image placeholder component for VueJs for quick visualization during design created by
        <a href="https://wemakesites.net" target="_blank">Martin Ivanov</a>. Easy as setting colors, text and size.</p>
      <h2 :class="fonts.title">Demos</h2>
      <vc-layout :spacing="8">
        <vc-col :span="6" sm12 xs24>
          <vc-image-placeholder width="100%" :color="color" label="auto" :background="background" />
        </vc-col>
        <vc-col :span="6" sm12 xs24>
          <vc-image-placeholder width="100%" :color="color" label="auto" :background="background" />
        </vc-col>
        <vc-col :span="6" sm12 xs24>
          <vc-image-placeholder width="100%" :color="color" label="auto" :background="background" />
        </vc-col>
        <vc-col :span="6" md12 xs24>
          <vc-image-placeholder width="100%" :color="color" label="auto" :background="background" />
        </vc-col>
        <vc-col :span="12" xs24>
          <vc-image-placeholder width="100%" :color="color" label="VueJs" :background="background" />
        </vc-col>
        <vc-col :span="12" xs24>
          <vc-image-placeholder width="100%" :color="color" label="VueJs" :background="background" />
        </vc-col>
        <vc-col :span="24">
          <vc-image-placeholder width="100%" :color="color" :label="lang.appTitle" :background="background" />
        </vc-col>
      </vc-layout>
      <h2 :class="fonts.title">Installation via NPM/Yarn</h2>
      <pre><code><span :class="fonts.grey">// npm</span>
&raquo; npm i vc-image-placeholder
<span :class="fonts.grey">// yarn</span>
&raquo; yarn add vc-image-placeholders</code></pre>
      <h2 :class="fonts.title">Installation via jsDelivr/UnPkg CDN</h2>
      <pre><code>
<span :class="fonts.grey">&lt;!-- jsdelivr cdn --&gt;</span>
&lt;script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/vc-image-placeholder"&gt;&lt;/script&gt;
<span :class="fonts.grey">&lt;!-- unpkg cdn --&gt;</span>
&lt;script src="https://unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt;
&lt;script src="https://unpkg.com/vc-ribbon/dist/lib/vc-ribbon.min.js"&gt;&lt;/script&gt;</code></pre>
      <h2 :class="fonts.title">Including to your VueJs Project</h2>
      <pre><code><span :class="fonts.grey">// import the module</span>
import VcImagePlaceholder from 'vc-image-placeholder'
<span :class="fonts.grey">// add to Vue</span>
Vue.use(VcRibbon)

<span :class="fonts.grey">// or add it to another Vue component</span>
components: {
  VcImagePlaceholder
}</code></pre>
      <h2 :class="fonts.title">Usage</h2>
      <p>Below is the default usage configuration of the component. Refer the the "Props" section to learn how
        to customize VcImagePlaceholder.</p>
      <code>
        &lt;vc-image-placeholder /&gt;
      </code>
      <h2 :class="fonts.title">Component Props</h2>
      <p>Below is a list of the properties that can be used to customize the look and feel of the image placeholders.</p>
      <vc-list>
        <vc-list-item avatar="code" v-for="(prop, index) in props" :key="index">
          <vc-list-item-primary-text>{{ prop.name }}</vc-list-item-primary-text>
          <vc-list-item-secondary-text>{{ prop.description }}</vc-list-item-secondary-text>
        </vc-list-item>
      </vc-list>
      <h2 :class="fonts.title">More Front-end Development Resources</h2>
      <vc-list>
        <vc-list-item avatar="link" icon="open_in_new" target="_blank" tag="a" :to="resource.url" v-for="(resource, index) in resources" :key="index">
          <vc-list-item-primary-text>{{ resource.title }}</vc-list-item-primary-text>
          <vc-list-item-secondary-text>{{ resource.description }}</vc-list-item-secondary-text>
        </vc-list-item>
      </vc-list>
    </vc-container>
    <vc-footer application narrow :color="appColor" align="right">
      &copy; {{ year }} <a href="https://wemakesites.net" target="_blank">Martin Ivanov</a> | <a href="https://twitter.com/vuecidity" target="_blank">@vuecidity</a> | <a href="https://vuecidity.wemakesites.net" target="_blank">Site built with Vuecidity</a>
    </vc-footer>
    <vc-social-bar size="small" :button-color="appColor" :fixed="true" :items="social"/>
  </div>
</template>
<script>
import social from './helpers/social'
import resources from './helpers/resources'
import topNavigation from './helpers/top-navigation'

export default {
  name: 'app',
  data () {
    return {
      social,
      resources,
      topNavigation,
      fonts: {
        title: ['title', 'font-grey', 'font-l-600'],
        grey: ['font-grey', 'font-grey-l-700']
      },
      props: [{
        name: 'width',
        description: 'Width of the image in pixels or percentage, default value: 300'
      }, {
        name: 'Height',
        description: 'Height of the image in pixels of percentage, default value: 150'
      }, {
        name: 'border',
        description: 'Border width in pixels, default value: 4'
      }, {
        name: 'color',
        description: 'Label color and border color, default value: #666'
      }, {
        name: 'background',
        description: 'Image background color, default value: #d4d0c8'
      }, {
        name: 'label',
        description: 'Image label, default is "width x height"'
      }, {
        name: 'font',
        description: 'CSS font string. Default value: "bold 24px Arial, Helvetica, Sans-serif"'
      }],
      lang: {
        appTitle: 'Image Placeholders for VueJs by Martin Ivanov'
      },
      appColor: 'purple',
      color: '#9b27b0',
      background: '#e1e1e1',
      year: new Date().getFullYear()
    }
  }
}
</script>
<style>
.vc-toolbar-title > div
{
  display: block;
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 90%;
  text-transform: uppercase;
}

.vc-toolbar-title > div
{
  font-size: 16px !important;
  margin-top: 3px !important;
}

.app-main
{
  padding: 64px 48px !important;
}

.app-inline-block,
.app-inline-list li
{
  display: inline-block;
  vertical-align: middle;
}

.app-top-navigation
{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-top-navigation,
.app-top-navigation li,
.app-bulletless-list,
.app-bulletless-list li
{
  padding: 0;
  margin: 0;
  list-style: none;
}

.app-top-navigation a
{
  color: #fff;
  padding: 0 8px;
  font-size: 12px;
  text-decoration: none;
  opacity: .7;
  transition: opacity .25s ease-in-out;
}

.app-top-navigation a:hover
{
  opacity: 1;
}

.vc-toolbar-title > div,
.app-top-navigation a
{
  text-transform: uppercase;
  font-weight: 500;
}
</style>
