From c5df315f44acb569a476d3690d97c5277b07d5e3 Mon Sep 17 00:00:00 2001
From: Vladimir Banduristov <hello@webzlodimir.ru>
Date: Mon, 8 Feb 2021 10:09:56 +0300
Subject: [PATCH] 1.1.8 - Add rounded prop

---
 README.MD                         |  1 +
 README_RU.MD                      |  1 +
 dev/dev.vue                       | 20 ++++++++++++++++++--
 package.json                      |  2 +-
 src/components/VueBottomSheet.vue | 13 +++++++++----
 5 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/README.MD b/README.MD
index 2abb597..1332ce1 100644
--- a/README.MD
+++ b/README.MD
@@ -69,6 +69,7 @@ Vue.use(VueBottomSheet);
 | max-width  | String  | Set max-width of component card  | `max-width="640px"` |
 | max-height  | String  | Set max-height of component card  | `max-height="90%"` |
 | effect  | String  | Set effect for component card  | `effect="fx-fadein-scale"` |
+| rounded  | Boolean  | Round the top two corners of the sheet  | `:rounded="false"` |
 
 ## Events
 
diff --git a/README_RU.MD b/README_RU.MD
index d744a05..f284223 100644
--- a/README_RU.MD
+++ b/README_RU.MD
@@ -68,6 +68,7 @@ Vue.use(VueBottomSheet);
 | max-width  | String  | Устанавливает максимальную ширину карточки компонента  | `max-width="640px"` |
 | max-height  | String  | Устанавливает максимальную высоту карточки компонента  | `max-height="90%"` |
 | effect  | String  | Устанавливает эффект появление карточки компонента  | `effect="fx-fadein-scale"` |
+| rounded  | Boolean  | Включает скругление 2 верхних углов компонента  | `:rounded="false"` |
 
 ## События
 
diff --git a/dev/dev.vue b/dev/dev.vue
index fe5a422..a05fbeb 100644
--- a/dev/dev.vue
+++ b/dev/dev.vue
@@ -5,7 +5,9 @@
         Vue Bottom Sheet
       </h1>
       <p>
-        A nice clean and touch-friendly bottom sheet component based on <a target="_blank" href="https://vuejs.org/">Vue.js</a> and <a target="_blank" href="https://hammerjs.github.io/">Hammer.js</a>
+        A nice clean and touch-friendly bottom sheet component based on
+        <a target="_blank" href="https://vuejs.org/">Vue.js</a> and
+        <a target="_blank" href="https://hammerjs.github.io/">Hammer.js</a>
       </p>
       <h3 class="mb-3">Settings</h3>
 
@@ -35,6 +37,18 @@
               >Click outside card to close</label
             >
           </div>
+          <div class="form-check form-switch mb-3">
+            <input
+              class="form-check-input"
+              type="checkbox"
+              id="roundedCheckChecked"
+              v-model="rounded"
+              checked
+            />
+            <label class="form-check-label" for="roundedCheckChecked"
+              >Rounded top corners</label
+            >
+          </div>
           <div class="form-group mb-3">
             <label for="maxWidthInput" class="form-label">Max width:</label>
             <input
@@ -84,6 +98,7 @@
         :overlay="overlay"
         :click-to-close="clickToClose"
         :effect="effect"
+        :rounded="rounded"
         ref="myBottomSheet"
       >
         <div class="sheet-content">
@@ -122,7 +137,8 @@ export default {
       maxWidth: "640px",
       maxHeight: "90%",
       clickToClose: true,
-      effect: "fx-default"
+      effect: "fx-default",
+      rounded: true
     };
   },
   components: {
diff --git a/package.json b/package.json
index cd6fa47..a3e99f1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@webzlodimir/vue-bottom-sheet",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "",
   "main": "dist/vue-bottom-sheet.js",
   "scripts": {
diff --git a/src/components/VueBottomSheet.vue b/src/components/VueBottomSheet.vue
index f589e48..659e7a0 100644
--- a/src/components/VueBottomSheet.vue
+++ b/src/components/VueBottomSheet.vue
@@ -12,7 +12,7 @@
     <div v-if="overlay" class="bottom-sheet__backdrop"></div>
     <div
       :style="{ bottom: cardP, maxWidth: maxWidth, maxHeight: maxHeight }"
-      :class="[{ stripe: stripe }, effect]"
+      :class="[{ stripe: stripe, square: !rounded }, effect]"
       ref="bottomSheetCard"
       class="bottom-sheet__card"
     >
@@ -71,6 +71,10 @@ export default {
     effect: {
       type: String,
       default: "fx-default"
+    },
+    rounded: {
+      type: Boolean,
+      default: true
     }
   },
   mounted() {
@@ -116,9 +120,6 @@ export default {
               this.opened = false;
               this.cardP = `-${this.cardH + this.stripe}px`;
               document.querySelector("body").style.overflow = "";
-              if (evt.isFinal) {
-                console.log("closed");
-              }
               this.mc.off("panend");
               this.$emit("closed");
             }
@@ -195,6 +196,10 @@ export default {
     z-index: 9999;
     margin: 0 auto;
 
+    &.square {
+      border-radius: 0;
+    }
+
     &.stripe {
       padding-bottom: 20px;
     }