From 59905a895e64666091c23239431ba0b50533e02c Mon Sep 17 00:00:00 2001
From: Elsio Sanchez <45974454+elsiosanchez@users.noreply.github.com>
Date: Wed, 30 Jun 2021 18:58:57 -0400
Subject: [PATCH] Add Carousel Component (#956)

Co-authored-by: elsiosanchez <elsiossanches@gmail.com>
---
 src/components/ADempiere/Carousel/index.vue | 68 +++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 src/components/ADempiere/Carousel/index.vue

diff --git a/src/components/ADempiere/Carousel/index.vue b/src/components/ADempiere/Carousel/index.vue
new file mode 100644
index 00000000..3cf41478
--- /dev/null
+++ b/src/components/ADempiere/Carousel/index.vue
@@ -0,0 +1,68 @@
+<!--
+ ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+ Contributor(s): Elsio Sanchez elsiosanches@gmail.com www.erpya.com
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <el-carousel :ref="stepReference" arrow="never" :autoplay="false" :initial-index="indicator" style="height: 100%;">
+    <el-carousel-item v-for="(item, key) in steps" :key="key">
+      <el-card class="box-card" style="height: 100%;">
+        <div slot="header" class="clearfix">
+          <p style="margin: 0px;text-align: center;">
+            <b>
+              {{ item.name }}
+            </b>
+          </p>
+          <p style="margin: 0px;text-align: center;">
+            {{ item.description }}
+          </p>
+        </div>
+        <div class="text item" style="height: 95%;">
+          <slot />
+        </div>
+      </el-card>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<script>
+export default {
+  name: 'Carousel',
+  props: {
+    stepReference: {
+      type: String,
+      default: 'carousel'
+    },
+    steps: {
+      type: Array,
+      default: () => []
+    },
+    indicator: {
+      type: Number,
+      default: 0
+    }
+  },
+  watch: {
+    indicator(value) {
+      this.$refs[this.stepReference].activeIndex = value
+    }
+  }
+}
+</script>
+
+<style>
+.el-carousel__container {
+  position: relative;
+  height: 100%;
+}
+</style>