From a1d23a02d0bd83e88a0d30a3ef9b64957034e41a Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sun, 16 Dec 2018 23:03:20 +0300
Subject: [PATCH] Implemented Card Component

---
 public/demo/images/usercard.png | Bin 0 -> 8003 bytes
 src/AppMenu.vue                 |   1 +
 src/assets/styles/primevue.css  |   1 +
 src/components/card/Card.css    |  24 ++++++++++++++++++++
 src/components/card/Card.vue    |  23 +++++++++++++++++++
 src/main.js                     |   2 ++
 src/router.js                   |   5 ++++
 src/views/card/CardDemo.vue     |  39 ++++++++++++++++++++++++++++++++
 8 files changed, 95 insertions(+)
 create mode 100644 public/demo/images/usercard.png
 create mode 100644 src/components/card/Card.css
 create mode 100644 src/components/card/Card.vue
 create mode 100644 src/views/card/CardDemo.vue

diff --git a/public/demo/images/usercard.png b/public/demo/images/usercard.png
new file mode 100644
index 0000000000000000000000000000000000000000..a83e51abeff75303584bdd8e38f7157a1dbb6d1a
GIT binary patch
literal 8003
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

literal 0
HcmV?d00001

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 5f7b75b56..04569ce9c 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -48,6 +48,7 @@
             <div :class="{'submenuhide': activeMenuIndex !== 3, 'submenushow': activeMenuIndex === 3}">
                 <div>
                     <router-link to="/accordion">&#9679; Accordion</router-link>
+                    <router-link to="/card">&#9679; Card</router-link>
                     <router-link to="/panel">&#9679; Panel</router-link>
                     <router-link to="/fieldset">&#9679; Fieldset</router-link>
                     <router-link to="/flexgrid">&#9679; FlexGrid</router-link>
diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index d408856b6..4e2913686 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -1,6 +1,7 @@
 @import '../../components/common/Common.css';
 @import '../../components/accordion/Accordion.css';
 @import '../../components/button/Button.css';
+@import '../../components/card/Card.css';
 @import '../../components/checkbox/Checkbox.css';
 @import '../../components/fieldset/Fieldset.css';
 @import '../../components/inputtext/InputText.css';
diff --git a/src/components/card/Card.css b/src/components/card/Card.css
new file mode 100644
index 000000000..2c0d223d9
--- /dev/null
+++ b/src/components/card/Card.css
@@ -0,0 +1,24 @@
+.p-card-header img {
+    width: 100%;
+}
+
+.p-card-body {
+    padding: 1em;
+}
+
+.p-card-title {
+    font-size: 1.5em;
+    font-weight: bold;
+    margin-bottom: .5em;
+}
+
+.p-card-subtitle {
+    opacity: .7;
+    margin-bottom: .5em;
+    margin-top: -.25em;
+    font-weight: bold;
+}
+
+.p-card-footer {
+    padding-top: 1em;
+}
\ No newline at end of file
diff --git a/src/components/card/Card.vue b/src/components/card/Card.vue
new file mode 100644
index 000000000..7c82986bf
--- /dev/null
+++ b/src/components/card/Card.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="p-card p-component ui-card-shadow" style="width: 360px;">
+        <div class="p-card-header" v-if="$slots.header">
+            <slot name="header"></slot>
+        </div>
+        <div class="p-card-body">
+            <div class="p-card-title" v-if="$slots.title"><slot name="title"></slot></div>
+            <div class="p-card-subtitle" v-if="$slots.subtitle"><slot name="subtitle"></slot></div>
+            <div class="p-card-content">
+                <slot name="content"></slot>
+            </div>
+            <div class="p-card-footer" v-if="$slots.footer">
+                <slot name="footer"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 92a975b66..2bcca6855 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,7 @@ import router from './router';
 import Accordion from './components/accordion/Accordion';
 import AccordionTab from './components/accordion/AccordionTab';
 import Button from './components/button/Button';
+import Card from './components/card/Card';
 import Checkbox from './components/checkbox/Checkbox';
 import InputText from './components/inputtext/InputText';
 import Fieldset from './components/fieldset/Fieldset';
@@ -26,6 +27,7 @@ Vue.config.productionTip = false;
 Vue.component('p-accordion', Accordion);
 Vue.component('p-accordionTab', AccordionTab);
 Vue.component('p-button', Button);
+Vue.component('p-card', Card);
 Vue.component('p-checkbox', Checkbox);
 Vue.component('p-inputtext', InputText);
 Vue.component('p-listbox', Listbox);
diff --git a/src/router.js b/src/router.js
index 5cb0a486a..e8a1cba67 100644
--- a/src/router.js
+++ b/src/router.js
@@ -21,6 +21,11 @@ export default new Router({
         name: 'button',
         component: () => import('./views/button/ButtonDemo.vue')
     },
+    {
+        path: '/card',
+        name: 'card',
+        component: () => import('./views/card/CardDemo.vue')
+    },
     {
         path: '/checkbox',
         name: 'checkbox',
diff --git a/src/views/card/CardDemo.vue b/src/views/card/CardDemo.vue
new file mode 100644
index 000000000..ec81114db
--- /dev/null
+++ b/src/views/card/CardDemo.vue
@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Card</h1>
+                <p>Card is a flexible container component..</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <p-card style="width: 25em; margin-bottom: 2em">
+                <template slot="title">
+                    Simple Card
+                </template>
+                <template slot="content">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                    quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
+                </template>
+            </p-card>
+
+            <p-card style="width: 25em">
+                <template slot="header">
+                    <img alt="user header" src="demo/images/usercard.png">
+                </template>
+                <template slot="title">
+                    Advanced Card
+                </template>
+                <template slot="content">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                    quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
+                </template>
+                <template slot="footer">
+                    <p-button icon="pi pi-check" label="Save" class="p-button-raised" />
+                    <p-button icon="pi pi-times" label="Cancel" class="p-button-raised p-button-secondary" style="margin-left: .5em"/>
+                </template>
+            </p-card>
+        </div>
+    </div>
+</template>
\ No newline at end of file