@everchron/ec-shards 7.3.13 → 7.3.14

package/package.json

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

package/src/components/dialog/dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <dialog v-if="lazyLoad" ref="dialog" :class="'ecs-dialog-' + size" class="ecs-dialog">
+  <dialog v-if="lazyLoad" ref="dialog" :class="'ecs-dialog-' + size" class="ecs-dialog" @keydown.enter="handleEnterKey">
     <div class="ecs-dialog-body scrollbar scrollbar-sml">
       <slot></slot>
     </div>
@@ -19,11 +19,6 @@
         type: Boolean,
         default: false
       },
-      /** 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,
@@ -49,6 +44,20 @@
         this.isShown = !this.isShown
         /** Emitted when the dialog show state changes. */
         this.$emit('toggled', this.id, this.isShown)
+      },
+
+      handleEnterKey(event) {
+        // If the user presses enter, we want to trigger the last button (always confirm) in the footer.
+        if (event.key === 'Enter') {
+          const buttons = this.$el.querySelectorAll('.ecs-dialog-footer button')
+          const lastButton = buttons[buttons.length - 1]
+          const activeElement = document.activeElement
+
+          if (activeElement.tagName !== 'BUTTON' || !activeElement.closest('.ecs-dialog-footer')) {
+            event.preventDefault()
+            lastButton.click()
+          }
+        }
       }
     },
 
@@ -59,12 +68,9 @@
         if (this.isShown) {
           this.lazyLoad = true
           this.$nextTick(() => {
-            if (this.showInPlace)
-              this.$refs.dialog.show()
-            else
-              this.$refs.dialog.showModal()
-
+            this.$refs.dialog.showModal()
             document.addEventListener('keyup', this.keyUpHandler)
+            this.$refs.dialog.focus()
           })
         } else {
           this.$refs.dialog.close()
@@ -102,7 +108,7 @@
 @import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
 
-.ecs-dialog{
+.ecs-dialog {
   display: flex;
   flex-direction: column;
   margin: auto;
@@ -118,109 +124,109 @@
   border-radius: $border-radius-large;
   width: 100%;
 
-  &:not([open]){
+  &:not([open]) {
     display: none;
   }
 
-  &[open]{
+  &[open] {
     animation: show-dialog .3s cubic-bezier(0.595, -0.275, 0.330, 1.280) normal;
 
-    &::backdrop{
+    &::backdrop {
       animation: show-backdrop .2s cubic-bezier(0.595, -0.275, 0.330, 1.280) normal;
     }
   }
 
-  &::backdrop{
+  &::backdrop {
     position: fixed;
     inset: 0;
-    background: rgba(49,52,57, .5);
+    background: rgba(49, 52, 57, .5);
   }
 
-  &-md{
+  &-md {
     max-width: 380px;
   }
 
-  &-lg{
+  &-lg {
     max-width: 540px;
 
-    .ecs-dialog-body{
+    .ecs-dialog-body {
       text-align: left;
     }
   }
 
-  &-body{
+  &-body {
     padding: 25px 20px 10px;
     text-align: center;
     overflow: auto;
 
-    p{
+    p {
       margin: 0 0 20px 0;
       font-size: $type-scale-3-font-size;
       line-height: 1.4em;
       color: rgba($color-gray-13, .7);
 
-      &.long{
+      &.long {
         text-align: left;
         color: rgba($color-gray-13, .85);
         margin: 18px 0;
       }
 
-      &.left{
+      &.left {
         text-align: left;
       }
 
-      a{
+      a {
         color: $color-blue-8;
         text-decoration: none;
 
-        &:hover{
+        &:hover {
           color: $color-blue-9;
         }
       }
     }
 
-    .mono{
+    .mono {
       color: $color-gray-12;
       font-family: $font-family-monospace;
       font-size: $type-scale-3-font-size;
     }
 
-    .ecs-alert{
+    .ecs-alert {
       margin: 0 -10px;
     }
   }
 
-  &-footer{
+  &-footer {
     display: flex;
     justify-content: space-between;
     box-shadow: 0 -1px 0 rgba(#000, .1);
     height: 54px;
 
-    > *{
+    >* {
       flex: 1;
 
-      &:first-child{
+      &:first-child {
         border-right: 1px solid rgba(#000, .13);
       }
 
-      &:last-child{
+      &:last-child {
         border-right: none;
       }
     }
 
-    &-stacked{
+    &-stacked {
       height: auto;
       flex-direction: column;
 
-      > *{
+      >* {
         border-right: none;
         border-bottom: 1px solid rgba(#000, .13);
 
-        &:first-child{
+        &:first-child {
           border-right: none;
         }
 
-        &:last-child{
+        &:last-child {
           border-bottom: none;
         }
       }
@@ -229,21 +235,23 @@
 }
 
 @keyframes show-dialog {
-  from{
+  from {
     transform: translateY(-20px) scale(.98);
     opacity: 0;
   }
-  to{
+
+  to {
     transform: translateY(0) scale(1);
     opacity: 1;
   }
 }
 
 @keyframes show-backdrop {
-  from{
+  from {
     opacity: 0;
   }
-  to{
+
+  to {
     opacity: 1;
   }
 }

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,21 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 7.3.14 (19 July 2023)
+
+### Features
+
+- Added Icons for: empty-table-template, document-extract-ai, sparkle-ai, dialog sparkle
+
+### Fixes
+
+- Also emit click on meta element in EcsTreeListItem
+- Fixed EcsDialog button focusing behavior
+- Fixed EcsDialog Enter key confirm behavior
+- Removed EcsEmojiPicker until it's ready for production (hasn't been used yet)
+- Correctly pass down name and id to EcsSelect's select element
+
+
 ## Version 7.3.0 (14 June 2023)
 
 ### Features

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

@@ -14,14 +14,24 @@ export const dialogPrompt = () => ({
       showdialog: false
     }
   },
+  methods: {
+    cancel() {
+      this.showdialog = false;
+      console.log('cancel');
+    },
+    confirm() {
+      this.showdialog = false;
+      console.log('confirm');
+    }
+  },
   template: `<div>
                 <button @click="showdialog = true">Open</button>
-                <ecs-dialog @cancel="showdialog = false" :show="showdialog">
+                <ecs-dialog @cancel="cancel" :show="showdialog">
                   <ecs-dialog-header icon="document">Send Documents</ecs-dialog-header>
                   <p>Are you sure you want to delete the selected documents?</p>
                   <template slot="actions">
-                    <ecs-button-dialog @click="showdialog = false">Cancel</ecs-button-dialog>
-                    <ecs-button-dialog type="confirm" icon="download">Confirm</ecs-button-dialog>
+                    <ecs-button-dialog @click="cancel">Cancel</ecs-button-dialog>
+                    <ecs-button-dialog @click="confirm" type="confirm" icon="download">Confirm</ecs-button-dialog>
                   </template>
                 </ecs-dialog>
               </div>`
@@ -68,23 +78,3 @@ export const dialogSizes = () => ({
                 </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 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 = !showdialog">Cancel</ecs-button-dialog>
-                    <ecs-button-dialog type="confirm" icon="download">Confirm</ecs-button-dialog>
-                  </template>
-                </ecs-dialog>
-              </div>`
-});