v2 first commit

resources/assets/js/components/Cards/Card.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="card"
+       :class="[
+         {'card-lift--hover': hover},
+         {'shadow': shadow},
+         {[`shadow-${shadowSize}`]: shadowSize},
+         {[`bg-gradient-${gradient}`]: gradient},
+         {[`bg-${type}`]: type}
+       ]">
+
+    <slot name="image"></slot>
+    <div class="card-header" :class="headerClasses" v-if="$slots.header">
+      <slot name="header">
+      </slot>
+    </div>
+    <div class="card-body" :class="bodyClasses" v-if="!noBody">
+      <slot></slot>
+    </div>
+
+    <slot v-if="noBody"></slot>
+
+    <div class="card-footer" :class="footerClasses" v-if="$slots.footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: "card",
+    props: {
+      type: {
+        type: String,
+        description: "Card type"
+      },
+      gradient: {
+        type: String,
+        description: "Card background gradient type (warning,danger etc)"
+      },
+      hover: {
+        type: Boolean,
+        description: "Whether card should move on hover"
+      },
+      shadow: {
+        type: Boolean,
+        description: "Whether card has shadow"
+      },
+      shadowSize: {
+        type: String,
+        description: "Card shadow size"
+      },
+      noBody: {
+        type: Boolean,
+        default: false,
+        description: "Whether card should have wrapper body class"
+      },
+      bodyClasses: {
+        type: [String, Object, Array],
+        description: "Card body css classes"
+      },
+      headerClasses: {
+        type: [String, Object, Array],
+        description: "Card header css classes"
+      },
+      footerClasses: {
+        type: [String, Object, Array],
+        description: "Card footer css classes"
+      }
+    }
+  };
+</script>
+<style>
+</style>

resources/assets/js/components/Cards/StatsCard.vue

@@ -0,0 +1,49 @@
+<template>
+  <card class="card-stats" :show-footer-line="true">
+    <div class="row">
+
+      <div class="col">
+        <slot>
+          <h5 class="card-title text-uppercase text-muted mb-0" v-if="title">{{title}}</h5>
+          <span class="h2 font-weight-bold mb-0" v-if="subTitle">{{subTitle}}</span>
+        </slot>
+      </div>
+
+      <div class="col-auto" v-if="$slots.icon || icon">
+        <slot name="icon">
+          <div class="icon icon-shape text-white rounded-circle shadow"
+               :class="[`bg-${type}`, iconClasses]">
+            <i :class="icon"></i>
+          </div>
+        </slot>
+      </div>
+    </div>
+
+    <p class="mt-3 mb-0 text-sm">
+      <slot name="footer">
+
+      </slot>
+    </p>
+  </card>
+</template>
+<script>
+  import Card from './Card.vue';
+
+  export default {
+    name: 'stats-card',
+    components: {
+      Card
+    },
+    props: {
+      type: {
+        type: String,
+        default: 'primary'
+      },
+      icon: String,
+      title: String,
+      subTitle: String,
+      iconClasses: [String, Array]
+    }
+  };
+</script>
+<style></style>