@everchron/ec-shards 0.6.90 → 0.6.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "0.6.90",
+  "version": "0.6.91",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/layout-index/layout-index.vue

@@ -32,10 +32,6 @@
         type: Boolean,
         default: false
       }
-    },
-
-    mounted(){
-      console.log('layout shard mounted')
     }
   }
 </script>

package/src/components/modal/modal.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="dialog-fade">
-    <div v-if="isShown" class="ecs-modal" :class="typeClass">
+    <div v-if="isShown" class="ecs-modal" :class="[typeClass, clickthroughBackdrop ? 'ecs-modal-click-through' : '']">
 
       <div class="ecs-modal-dialog ecs-modal-sheet">
         <div v-if="$slots.header" class="ecs-modal-header-wrap">
@@ -34,7 +34,11 @@
         type: String,
         validator: v => ['default', 'drawer',].includes(v),
         default: 'default'
-      }
+      },
+      clickthroughBackdrop: {
+        type: Boolean,
+        default: false
+      },
     },
 
     data () {
@@ -94,6 +98,8 @@
   }
 }
 
+// Drawer modal variant
+
 .ecs-modal-drawer{
   .ecs-modal-sheet{
     margin: 5px auto;
@@ -121,5 +127,13 @@
   &-footer-wrap{
     flex-shrink: 0;
   }
+
+  &.ecs-modal-click-through{
+    pointer-events: none;
+
+    .ecs-modal-dialog{
+      pointer-events: auto;
+    }
+  }
 }
 </style>

package/src/components/modal-base/modal-base.vue

@@ -27,7 +27,7 @@
     align-items: flex-end;
 
     .ecs-modal-dialog{
-      max-height: calc(60vh - 140px);
+      max-height: calc(65vh - 140px);
     }
   }
 

package/src/stories/modal/modal.stories.js

@@ -33,7 +33,7 @@ export const drawer = () => ({
   },
   template: `<div>
                 <button @click="showdialog = !showdialog">Open</button>
-                <ecs-modal type="drawer" :show="showdialog">
+                <ecs-modal type="drawer" :show="showdialog" clickthrough-backdrop>
                   <p>Modal Content Slot</p>
                 </ecs-modal>
               </div>`,