@everchron/ec-shards 2.1.4 → 2.1.5

package/package.json

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

package/src/components/modal/modal.vue

@@ -2,7 +2,7 @@
   <transition name="dialog-fade">
     <div v-if="isShown" class="ecs-modal" :class="[typeClass, clickthrough ? 'ecs-modal-click-through' : '']">
 
-      <div class="ecs-modal-dialog ecs-modal-sheet">
+      <div class="ecs-modal-dialog ecs-modal-sheet" :style="fixedHeightStyle">
         <div v-if="$slots.header" class="ecs-modal-header-wrap">
           <!-- @slot Slot for the modal header content. -->
           <slot name="header"></slot>
@@ -44,6 +44,10 @@
         type: Boolean,
         default: false
       },
+      /** 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
+      }
     },
 
     data () {
@@ -57,6 +61,12 @@
         if (this.type && this.type !== '')
           return `ecs-modal-${this.type}`
         return this.type
+      },
+
+      fixedHeightStyle() {
+        if (this.fixedHeight && this.fixedHeight !== '')
+          return `height:${this.fixedHeight}px`
+        return this.fixedHeight
       }
     },
 

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,12 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 2.1.5 (28 October 2022)
+
+### Features
+
+- Added `fixedHeight` prop to modal component
+
 ## Version 2.1.4 (26 October 2022)
 
 ### Features

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

@@ -128,3 +128,32 @@ export const footer = () => ({
                 </ecs-modal>
               </div>`,
 });
+
+export const modalFixedHeight = () => ({
+  components: { EcsModal, EcsModalHeader, EcsModalFooter },
+  data() {
+    return {
+      showdialog: false
+    }
+  },
+  template: `<div>
+                <button @click="showdialog = !showdialog">Open</button>
+
+                <ecs-modal :fixed-height="300" :show="showdialog">
+                  <template slot="header">
+                    <ecs-modal-header @close="showdialog = !showdialog">
+                      <h2 class="headline-2">Regular Header</h2>
+                    </ecs-modal-header>
+                  </template>
+                  <p>Modal Content Slot</p>
+                  <template slot="footer">
+                    <ecs-modal-footer>
+                      <template slot="secondary">
+                        Secondary Footer
+                      </template>
+                      Primary Footer Content
+                    </ecs-modal-footer>
+                  </template>
+                </ecs-modal>
+              </div>`,
+});