@everchron/ec-shards 0.6.86 → 0.6.90

package/package.json

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

package/src/components/data-card/data-card.vue

@@ -265,7 +265,7 @@
     color: $gray-10;
   }
 
-  .ecs-mf-party{
+  .ecs-party-entry{
     margin: 0 2px 0 -5px;
   }
 

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

@@ -32,6 +32,10 @@
         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">
+    <div v-if="isShown" class="ecs-modal" :class="typeClass">
 
       <div class="ecs-modal-dialog ecs-modal-sheet">
         <div v-if="$slots.header" class="ecs-modal-header-wrap">
@@ -29,6 +29,11 @@
       show: {
         type: Boolean,
         default: false
+      },
+      type: {
+        type: String,
+        validator: v => ['default', 'drawer',].includes(v),
+        default: 'default'
       }
     },
 
@@ -38,6 +43,14 @@
       }
     },
 
+     computed: {
+      typeClass() {
+        if (this.type && this.type !== '')
+          return `ecs-modal-${this.type}`
+        return this.type
+      }
+    },
+
     methods : {
       toggleShow(){
         this.isShown = !this.isShown
@@ -59,8 +72,6 @@
 
 .ecs-modal{
   &-sheet{
-    margin: 30px auto;
-    width: 780px;
     background: #FFFFFF;
     background-clip: padding-box;
     border-radius: 4px;
@@ -74,6 +85,22 @@
   }
 }
 
+// Default modal variant
+
+.ecs-modal-default{
+  .ecs-modal-sheet{
+    margin: 30px auto;
+    width: 780px;
+  }
+}
+
+.ecs-modal-drawer{
+  .ecs-modal-sheet{
+    margin: 5px auto;
+    width: calc(100vw - 10px);
+  }
+}
+
 .ecs-modal{
   &-inner{
     display: flex;

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

@@ -13,15 +13,29 @@
   background: transparent;
   will-change: transform;
   display: flex;
-  align-items: center;
   justify-content: center;
 
+  &-default{
+    align-items: center;
+
+    .ecs-modal-dialog{
+      max-height: calc(100vh - 60px);
+    }
+  }
+
+  &-drawer{
+    align-items: flex-end;
+
+    .ecs-modal-dialog{
+      max-height: calc(60vh - 140px);
+    }
+  }
+
   &-dialog{
     position: relative;
     display: flex;
     flex-direction: column;
     margin: 0 auto;
-    max-height: calc(100vh - 60px);
     z-index: 1072;
     overflow: hidden;
     transform: translateY(0) scale(1);
@@ -57,4 +71,4 @@
   }
 }
 
-</style>
+</style>

package/src/components/party-entry/party-entry.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="ecs-mf-party"
-      :class="[party, shared ? 'shared' : '']">
+  <div class="ecs-party-entry"
+      :class="[
+                party,
+                shared ? 'shared' : '',
+                background ? 'ecs-party-entry-background' : ''
+              ]">
     <ecs-icon v-if="icon && iconPosition == 'left'" :type="iconType" :color="iconColor" :style="'margin-right:'+iconSpacing" :width="iconSize" :height="iconSize" />
     <slot></slot>
     <ecs-icon v-if="icon && iconPosition == 'right'" :type="iconType" :color="iconColor" :style="'margin-left:'+iconSpacing" :width="iconSize" :height="iconSize" />
@@ -22,6 +26,10 @@
         validator: v => ['client', 'opposing', 'joint', 'other', 'court', 'unaffiliated'].includes(v),
         required: true
       },
+      background: {
+        type: Boolean,
+        default: false
+      },
       shared: {
         type: Boolean,
         default: false
@@ -82,7 +90,7 @@
 @import "../tokens/tokens";
 @import "../mixins/svg-uri";
 
-.ecs-mf-party{
+.ecs-party-entry{
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -130,5 +138,31 @@
   &.unaffiliated{
     color: $party-other-text;
   }
+
+  &-background{
+    &.client{
+      background-color: $party-client-background;
+    }
+
+    &.opposing{
+      background-color: $party-opposition-background;
+    }
+
+    &.joint{
+      background-color: $party-joint-background;
+    }
+
+    &.other{
+      background-color: $party-other-background;
+    }
+
+    &.court{
+      background-color: $party-court-background;
+    }
+
+    &.unaffiliated{
+      background-color: $party-other-background;
+    }
+  }
 }
 </style>

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

@@ -24,6 +24,21 @@ export const regular = () => ({
               </div>`,
 });
 
+export const drawer = () => ({
+  components: { EcsModal },
+  data() {
+    return {
+      showdialog: false
+    }
+  },
+  template: `<div>
+                <button @click="showdialog = !showdialog">Open</button>
+                <ecs-modal type="drawer" :show="showdialog">
+                  <p>Modal Content Slot</p>
+                </ecs-modal>
+              </div>`,
+});
+
 export const headers = () => ({
   components: { EcsModal, EcsModalHeader, EcsSequenceMap, EcsSequenceMapButton },
   data() {
@@ -109,4 +124,4 @@ export const footer = () => ({
                   </template>
                 </ecs-modal>
               </div>`,
-});
+});

package/src/stories/modal/modal.stories.mdx

@@ -25,6 +25,14 @@ Modals are simple dialog windows that allow fully custom content. There are no s
 </ecs-modal>
 ```
 
+The modal type `drawer` is an alternative template that shows a full width modal sheet at the bottom of the screen.
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Drawer" height="800px">
+    {stories.drawer()}
+  </Story>
+</Canvas>
+
 ## Modal Headers
 
 You can add a header to a modal by utilizing the `header` slot. Headers can be of `type`: none (default), `scroll` and `tabs`.
@@ -57,4 +65,4 @@ You can add a footer to a modal by utilizing the `footer` slot.
 
 ### Modal Footer
 
-<ArgsTable of={EcsModalFooter} />
+<ArgsTable of={EcsModalFooter} />

package/src/stories/party-entry/party-entry.stories.js

@@ -33,3 +33,15 @@ export const partyEntrySides = () => ({
               <ecs-party-entry icon="document" party="unaffiliated">Unaffiliated</ecs-party-entry>
             </main>`,
 });
+
+export const partyEntryWithBackground = () => ({
+  components: { EcsPartyEntry },
+  template: `<main>
+              <ecs-party-entry background icon="document" party="opposing">Opposition</ecs-party-entry>
+              <ecs-party-entry background icon="document" party="client">Client</ecs-party-entry>
+              <ecs-party-entry background icon="document" party="joint">Joint</ecs-party-entry>
+              <ecs-party-entry background icon="document" party="other">Other</ecs-party-entry>
+              <ecs-party-entry background icon="document" party="court">Court</ecs-party-entry>
+              <ecs-party-entry background icon="document" party="unaffiliated">Unaffiliated</ecs-party-entry>
+            </main>`,
+});

package/src/stories/party-entry/party-entry.stories.mdx

@@ -56,6 +56,12 @@ Use the `party` attribute to set the party side. The following sides are availab
   </Story>
 </Canvas>
 
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Party Entry with Background" height="80px">
+    {stories.partyEntryWithBackground()}
+  </Story>
+</Canvas>
+
 ```js
 <ecs-party-entry icon="document" party="opposing">Opposition</ecs-party-entry>
 <ecs-party-entry icon="document" party="client">Client</ecs-party-entry>