1.1.8 - Add rounded prop

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
 

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"` |
 
 ## События
 

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: {

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": {

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;
     }