@everchron/ec-shards 5.0.39 → 5.0.40

package/package.json

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

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

@@ -2,6 +2,7 @@
   <div class="ecs-data-grid-cell" :style="[fixedStyles]" :class="[fixedLeft ? 'fixed-left' : '', fixedLeftLast ? 'fixed-left-last' : '', fixedRight ? 'fixed-right' : '']">
     <div v-if="fixedRight" class="shadow" :class="fixedRight ? 'left' : ''" />
     <div class="ecs-data-grid-cell-inner" :style="[widthStyles, paddingStyles]" :data-column="computedId" :data-test="computedId">
+      <div v-if="firstNonStaticCell" class="first-cell-spacer" />
       <!-- @slot Tabe cell content slot. -->
       <slot></slot>
     </div>
@@ -56,7 +57,7 @@
       padding: {
         type: String
       },
-      /* puts extra padding-left on the first non-static column in the index */
+      /** Adds extra 8px padding-left to the first non-static column in the index. */
       firstNonStaticCell: {
         type: Boolean
       }
@@ -91,7 +92,7 @@
         if (this.padding && this.padding !== '')
           return { padding: this.padding }
         else
-          return this.firstNonStaticCell ? { padding: '8px 8px 8px 16px' } : { padding: '8px' }
+          return { padding: '8px' }
       },
 
       computedId(){
@@ -179,5 +180,10 @@
 .ecs-data-grid-row.added .ecs-data-grid-cell{
   animation: highlight-to-white 8s ease forwards;
 }
+
+.first-cell-spacer{
+  flex-shrink: 0;
+  width: $spacing-10;
+}
 </style>
 

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

@@ -2,6 +2,7 @@
   <div class="ecs-data-grid-head-cell" :style="[fixedStyles]" :class="[fixedLeft ? 'fixed-left' : '', fixedLeftLast ? 'fixed-left-last' : '', fixedRight ? 'fixed-right' : '']">
     <div v-if="fixedRight" class="shadow" :class="fixedRight ? 'left' : ''" />
     <div ref="resizer" class="ecs-data-grid-head-cell-inner" :style="[widthStyles, paddingStyles, resizeStyles]" :class="resizable ? 'resizable' : ''" :data-column="computedId" :data-test="computedId">
+      <div v-if="firstNonStaticCell" class="first-cell-spacer" />
       <ecs-icon v-if="icon" :type="icon" size="20" color="#202127" :title="name" />
       <ecs-select v-else-if="select" @change="$emit('selection', $event.target.value)" type="invisible">
         <option v-for="(option, index) in select" :key="index" :selected="option.selected" :value="option.value">{{ option.name }}</option>
@@ -98,7 +99,7 @@
         type: Boolean,
         default: false
       },
-      /** Determines if the column gets extra left padding. */
+      /** Adds extra 8px padding-left to the first non-static column in the index. */
       firstNonStaticCell: {
         type: Boolean,
         default: false
@@ -136,8 +137,6 @@
           return { padding: '0 8px 0 4px' }
         else if (this.select && this.select !== '')
           return { padding: '0 8px 0 0' }
-        else if (this.firstNonStaticCell)
-          return { padding: '0 8px 0 16px' }
         else
           return { padding: '0 8px' }
       },
@@ -334,6 +333,11 @@
     background: linear-gradient(90deg, rgba($color-gray-15, .12) 0%, rgba($color-gray-15, .04) 35%, rgba($color-gray-15, 0) 100%);
   }
 }
+
+.first-cell-spacer{
+  flex-shrink: 0;
+  width: $spacing-10;
+}
 </style>
 
 <style lang="scss">

package/src/components/dialog/dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <dialog v-if="lazyLoad" ref="dialog" :class="[large ? 'ecs-dialog-large' : '']" class="ecs-dialog">
+  <dialog v-if="lazyLoad" ref="dialog" :class="'ecs-dialog-' + size" class="ecs-dialog">
     <div class="ecs-dialog-body">
       <slot></slot>
     </div>
@@ -19,11 +19,17 @@
         type: Boolean,
         default: false
       },
-      /** Renders a wider dialog. Should be used for dialogs that contain forms with more than one input, or larger elements such as a folder picker. */
-      large: {
+      /** If set `true`, the dialog element will render where it's placed inside the DOM. This can be useful for dialogs that should not "escape" their parent elements, e.g. when a dialog is launched within a larger modal. **Note:** dialogs shown in place have no backdrop element and need to be positioned manually via CSS. */
+      showInPlace: {
         type: Boolean,
         default: false
       },
+      /** Determines the size of the dialog. */
+      size: {
+        type: String,
+        validator: v => ['sml', 'md', 'lg'].includes(v),
+        default: 'sml'
+      },
       /** When enabled, this will stack buttons inside the footer, instead of aligning them next to each other. Should be used when a dialog footer contains button with extremely long labels, or more than 2 buttons. */
       stackedFooter: {
         type: Boolean,
@@ -53,7 +59,10 @@
         if(this.isShown){
           this.lazyLoad = true
           this.$nextTick(() => {
-            this.$refs.dialog.showModal()
+            if(this.showInPlace)
+              this.$refs.dialog.show()
+            else
+              this.$refs.dialog.showModal()
           })
         } else {
           this.$refs.dialog.close()
@@ -118,7 +127,11 @@
     background: rgba(49,52,57, .5);
   }
 
-  &-large{
+  &-md{
+    max-width: 380px;
+  }
+
+  &-lg{
     max-width: 540px;
 
     .ecs-dialog-body{

package/src/stories/data-grid/data-grid-cell.stories.js

@@ -26,3 +26,12 @@ export const cellCustomPadding = () => ({
                 </ecs-data-grid-row>
               </ecs-data-grid>`,
 });
+
+export const firstCellPadding = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  template: `<ecs-data-grid>
+                <ecs-data-grid-row>
+                  <ecs-data-grid-cell column="first" :width="200" padding="8px 20px" first-non-static-cell>Cell</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+              </ecs-data-grid>`,
+});

package/src/stories/dialog/dialog.stories.js

@@ -27,16 +27,58 @@ export const dialogPrompt = () => ({
               </div>`
 });
 
-export const dialogLarge = () => ({
+export const dialogSizes = () => ({
   components: { EcsDialog, EcsDialogHeader, EcsButtonDialog },
   data() {
     return {
-      showdialog: false
+      showdialogSmall: false,
+      showdialogMedium: false,
+      showdialogLarge: false
     }
   },
   template: `<div>
+                <button @click="showdialogSmall = !showdialogSmall">Open Small</button>
+                <ecs-dialog size="sml" :show="showdialogSmall">
+                  <ecs-dialog-header>Choose Attachment</ecs-dialog-header>
+                  <p>Select documents to attach to.</p>
+                  <template slot="actions">
+                    <ecs-button-dialog @click="showdialogSmall = !showdialogSmall">Cancel</ecs-button-dialog>
+                    <ecs-button-dialog type="confirm" icon="download">Confirm</ecs-button-dialog>
+                  </template>
+                </ecs-dialog>
+
+                <button @click="showdialogMedium = !showdialogMedium">Open Medium</button>
+                <ecs-dialog size="md" :show="showdialogMedium">
+                  <ecs-dialog-header>Choose Attachment</ecs-dialog-header>
+                  <p>Select documents to attach to.</p>
+                  <template slot="actions">
+                    <ecs-button-dialog @click="showdialogMedium = !showdialogMedium">Cancel</ecs-button-dialog>
+                    <ecs-button-dialog type="confirm" icon="download">Confirm</ecs-button-dialog>
+                  </template>
+                </ecs-dialog>
+
+                <button @click="showdialogLarge = !showdialogLarge">Open Large</button>
+                <ecs-dialog size="lg" :show="showdialogLarge">
+                  <ecs-dialog-header>Choose Attachment</ecs-dialog-header>
+                  <p>Select documents to attach to.</p>
+                  <template slot="actions">
+                    <ecs-button-dialog @click="showdialogLarge = !showdialogLarge">Cancel</ecs-button-dialog>
+                    <ecs-button-dialog type="confirm" icon="download">Confirm</ecs-button-dialog>
+                  </template>
+                </ecs-dialog>
+              </div>`
+});
+
+export const dialogInPlace = () => ({
+  components: { EcsDialog, EcsDialogHeader, EcsButtonDialog },
+  data() {
+    return {
+      showdialog: false
+    }
+  },
+  template: `<div style="height:400px">
                 <button @click="showdialog = !showdialog">Open</button>
-                <ecs-dialog id="example2" large :show="showdialog">
+                <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">