@everchron/ec-shards 5.0.40 → 5.0.42

package/package.json

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

package/src/components/data-grid/data-grid-head-cell.vue

@@ -337,6 +337,7 @@
 .first-cell-spacer{
   flex-shrink: 0;
   width: $spacing-10;
+  margin-right: -$spacing-10;
 }
 </style>
 

package/src/components/modal/modal.vue

@@ -11,9 +11,16 @@
           <slot></slot>
         </div>
         <div v-if="$slots.footer" class="ecs-modal-footer-wrap">
-          <!-- @slot Slot the modal footer content. -->
+          <!-- @slot Slot for the modal footer content. -->
           <slot name="footer"></slot>
         </div>
+        <div v-if="$slots.dialog" class="ecs-modal-inner-dialog" :style="{ 'top': innerDialogOffset + 'px' }" :class="innerDialog ? 'open' : ''">
+          <!-- @slot Slot for dialogs that should render _within_ the modal. -->
+          <slot name="dialog"></slot>
+          <transition name="fade">
+            <div v-if="innerDialog" class="ecs-modal-inner-dialog-backdrop" />
+          </transition>
+        </div>
       </div>
 
       <div class="ecs-modal-backdrop ecs-modal-sheet-backdrop" />
@@ -47,6 +54,16 @@
       /** Sets the modal height to a fixed pixel value. If not passed, the modal height will auto adapt it's height. The modal height will never exceed 90% height of viewport. */
       fixedHeight: {
         type: Number
+      },
+      /** If set, there will be a dialog backdrop rendered within the modal, blocking all interactions besides the header. */
+      innerDialog: {
+        type: Boolean,
+        default: false
+      },
+      /** Allows to adjust the top offset of the inner dialog area (e.g. for dynamic header heights). */
+      innerDialogOffset: {
+        type: Number,
+        default: 48
       }
     },
 
@@ -155,5 +172,63 @@
       pointer-events: auto;
     }
   }
+
+  .ecs-dialog{
+    position: absolute;
+    top: 0;
+    z-index: 1;
+    border-radius: 0 0 $border-radius-large $border-radius-large;
+    box-shadow: 0px 2px 20px rgba(71, 75, 96, 0.1), 0px 0px 0px 1px rgba(71, 75, 96, 0.05), 0px 1px 5px rgba(71, 75, 96, 0.2);
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-modal-inner-dialog{
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+  display: none;
+  overflow: hidden;
+
+  &:before{
+    content: "";
+    position: absolute;
+    height: 3px;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    z-index: 2;
+    background: linear-gradient(180deg, rgba(32, 33, 39, 0.12) 0%, rgba(32, 33, 39, 0) 100%);
+    transition: .3s;
+    opacity: 0;
+  }
+
+  &.open{
+    display: block;
+
+    &:before{
+      opacity: 1;
+    }
+  }
+
+  &-backdrop{
+    position: absolute;
+    inset: 0;
+    background: $color-gray-13;
+    opacity: .2;
+  }
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .4s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
 }
 </style>

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

@@ -3,6 +3,10 @@ import EcsModalHeader from '@components/modal-header/modal-header';
 import EcsModalFooter from '@components/modal-footer/modal-footer';
 import EcsSequenceMap from '@components/sequence-map/sequence-map';
 import EcsSequenceMapButton from '@components/sequence-map-button/sequence-map-button';
+import EcsDialog from '@components/dialog/dialog';
+import EcsDialogHeader from '@components/dialog-header/dialog-header';
+import EcsButtonDialog from '@components/button-dialog/button-dialog';
+
 
 export default {
   title: 'Patterns/Modal',
@@ -157,3 +161,40 @@ export const modalFixedHeight = () => ({
                 </ecs-modal>
               </div>`,
 });
+
+export const modalWithInnerDialog = () => ({
+  components: { EcsModal, EcsModalHeader, EcsModalFooter, EcsDialog, EcsButtonDialog, EcsDialogHeader },
+  data() {
+    return {
+      showDialog: false,
+      showModal: false
+    }
+  },
+  template: `<div>
+                <button @click="showModal = !showModal">Open Modal</button>
+
+                <ecs-modal :fixed-height="400" :show="showModal" :inner-dialog="showDialog">
+                  <template slot="header">
+                    <ecs-modal-header @close="showModal = !showModal">
+                      <h2 class="headline-2">Regular Header</h2>
+                    </ecs-modal-header>
+                  </template>
+                  <button @click="showDialog = true">Show Inner Dialog</button>
+                  <template slot="footer">
+                    <ecs-modal-footer>
+                      Primary Footer Content
+                    </ecs-modal-footer>
+                  </template>
+                  <template slot="dialog">
+                    <ecs-dialog show-in-place :show="showDialog">
+                      <ecs-dialog-header>Choose Attachment</ecs-dialog-header>
+                      <p>Select documents to attach to.</p>
+                      <template slot="actions">
+                        <ecs-button-dialog @click="showDialog = false">Cancel</ecs-button-dialog>
+                        <ecs-button-dialog @click="showDialog = false" type="confirm" icon="download">Confirm</ecs-button-dialog>
+                      </template>
+                    </ecs-dialog>
+                  </template>
+                </ecs-modal>
+              </div>`,
+});