@everchron/ec-shards 4.2.0 → 4.3.0

package/dist/img/EU.d180ac2d.svg

@@ -0,0 +1 @@
+<svg fill="none" height="15" viewBox="0 0 20 15" width="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h20v15h-20z"/></clipPath><mask id="b" height="15" maskUnits="userSpaceOnUse" width="20" x="0" y="0"><path d="m20 0h-20v15h20z" fill="#fff"/></mask><mask id="c" height="15" maskUnits="userSpaceOnUse" width="20" x="0" y="0"><path clip-rule="evenodd" d="m0 0v15h20v-15z" fill="#fff" fill-rule="evenodd"/></mask><g clip-path="url(#a)"><g clip-rule="evenodd" fill-rule="evenodd" mask="url(#b)"><path d="m0 0v15h20v-15z" fill="#f7fcff"/><g mask="url(#c)"><path d="m0 0v15h20v-15z" fill="#3d58db"/><path d="m9.26516 3.02849.73474-.38628.7347.38628-.1403-.81814.5944-.63909h-.8214l-.3674-.804048-.36737.804048h-.82146l.59441.63909zm0 10.85551.73474-.3863.7347.3863-.1403-.8181.5944-.6391h-.8214l-.3674-.804-.36737.804h-.82146l.59441.6391zm-5.78226-5.37274.14031-.81814-.5944-.63908h.82145l.36736-.80405.36738.80405h.82145l-.59442.63908.14033.81814-.73474-.38627zm1.35153 1.77004-.14032.8181.73474-.3862.73472.3862-.14031-.8181.59441-.63909h-.82146l-.36736-.80404-.36737.80404h-.82146zm9.74357.4319-.7347.3862.1402-.8181-.5944-.63909h.8215l.3674-.80404.3674.80404h.8214l-.5944.63909.1402.8181zm-9.74357-5.6756-.14032.81814.73474-.38628.73472.38628-.14031-.81814.59441-.63909h-.82146l-.36736-.80405-.36737.80405h-.82146zm9.74357.43186-.7347.38628.1402-.81814-.5944-.63909h.8215l.3674-.80405.3674.80405h.8214l-.5944.63909.1402.81814zm-7.918 6.89424-.14033.8182.73473-.3864.73473.3864-.14032-.8182.59441-.6391h-.82145l-.36737-.804-.36737.804h-.82145zm5.4173.8182.1403-.8182-.5944-.6391h.8215l.3673-.804.3674.804h.8215l-.5945.6391.1404.8182-.7348-.3864zm-5.4173-10.25995-.14033.81814.73473-.38628.73473.38628-.14032-.81814.59441-.63909h-.82145l-.36737-.80405-.36737.80405h-.82145zm5.4173.81814.1403-.81814-.5944-.63909h.8215l.3673-.80405.3674.80405h.8215l-.5945.63909.1404.81814-.7348-.38628zm3.0627 3.87915-.1404.81812.7348-.38626.7347.38626-.1403-.81812.5943-.6391h-.8213l-.3674-.80404-.3674.80404h-.8215z" fill="#ffd018"/></g></g></g></svg>

package/dist/img/login-email-mfa.33936706.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 23 20" width="23" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m1 3h14v14h-14z"/></clipPath><rect fill="#a1a6b0" height="16" rx="6" width="16" y="2"/><g clip-path="url(#a)" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m10.1875 9.63542v1.67708c0 .3481.1383.6819.3844.9281.2462.2461.58.3844.9281.3844h.4375c.3481 0 .6819-.1383.9281-.3844.2461-.2462.3844-.58.3844-.9281v-2.1875c0-1.16032-.4609-2.27312-1.2814-3.09359s-1.9333-1.28141-3.0936-1.28141h-1.75c-1.16032 0-2.27312.46094-3.09359 1.28141s-1.28141 1.93327-1.28141 3.09359v1.75c0 1.1603.46094 2.2731 1.28141 3.0936s1.93327 1.2814 3.09359 1.2814h3.2083"/><path d="m8.36458 7.8125h-.72916c-1.00677 0-1.82292.81615-1.82292 1.82292v.72918c0 1.0068.81615 1.8229 1.82292 1.8229h.72916c1.00677 0 1.82292-.8161 1.82292-1.8229v-.72918c0-1.00677-.81615-1.82292-1.82292-1.82292z"/></g><rect fill="#0eba65" height="8" rx="2" width="12" x="11"/><path d="m15 9.5h-2c-1.933 0-3.5-1.567-3.5-3.5v-3l1.5 1v2c0 1.10457.8954 2 2 2h2z" fill="#a1a6b0"/><g stroke="#fff" stroke-linecap="round" stroke-linejoin="round"><path d="m14.7089 5.48572c.8435 0 1.5273-.71634 1.5273-1.6 0-.88365-.6838-1.6-1.5273-1.6s-1.5273.71635-1.5273 1.6c0 .88366.6838 1.6 1.5273 1.6z"/><path d="m20.8181 3.88571h-4.5818"/><path d="m20.8181 5.48571v-1.6"/><path d="m18.5273 5.48571v-1.6"/></g></svg>

package/dist/img/login-email.4b81db3a.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 16 20" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m1 3h14v14h-14z"/></clipPath><rect fill="#a1a6b0" height="16" rx="6" width="16" y="2"/><g clip-path="url(#a)" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m10.1875 9.63542v1.67708c0 .3481.1383.6819.3844.9281.2462.2461.58.3844.9281.3844h.4375c.3481 0 .6819-.1383.9281-.3844.2461-.2462.3844-.58.3844-.9281v-2.1875c0-1.16032-.4609-2.27312-1.2814-3.09359s-1.9333-1.28141-3.0936-1.28141h-1.75c-1.16032 0-2.27312.46094-3.09359 1.28141s-1.28141 1.93327-1.28141 3.09359v1.75c0 1.1603.46094 2.2731 1.28141 3.0936s1.93327 1.2814 3.09359 1.2814h3.2083"/><path d="m8.36458 7.8125h-.72916c-1.00677 0-1.82292.81615-1.82292 1.82292v.72918c0 1.0068.81615 1.8229 1.82292 1.8229h.72916c1.00677 0 1.82292-.8161 1.82292-1.8229v-.72918c0-1.00677-.81615-1.82292-1.82292-1.82292z"/></g></svg>

package/dist/img/login-sso-azure.a49f3fe4.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 15 20" width="15" xmlns="http://www.w3.org/2000/svg"><path d="m7 2.5h-7v7h7z" fill="#f25022"/><path d="m7 10.5h-7v7h7z" fill="#00a4ef"/><path d="m15 2.5h-7v7h7z" fill="#7fba00"/><path d="m15 10.5h-7v7h7z" fill="#ffb900"/></svg>

package/dist/img/login-sso-okta.55de1bbd.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 16 20" width="16" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="10" r="6" stroke="#357bbb" stroke-width="4"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",
@@ -24,7 +24,9 @@
     "*.js",
     "*.svg"
   ],
-  "dependencies": {},
+  "dependencies": {
+    "v-click-outside": "^2.1.3"
+  },
   "peerDependencies": {
     "vue": "2.x.x"
   },

package/src/assets/icons/login-key.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" d="M6.27057 9.16667C7.52203 7.29365 9.34268 5.87275 11.4636 5.11383C13.5846 4.35492 15.8934 4.29821 18.049 4.9521C20.2046 5.60599 22.0929 6.93579 23.4348 8.74512C24.7767 10.5544 25.5011 12.7474 25.5011 15C25.5011 17.2526 24.7767 19.4456 23.4348 21.2549C22.0929 23.0642 20.2046 24.394 18.049 25.0479C15.8934 25.7018 13.5846 25.6451 11.4636 24.8862C9.34268 24.1272 7.52203 22.7064 6.27057 20.8333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M6.83333 17.3333C8.122 17.3333 9.16667 16.2886 9.16667 15C9.16667 13.7113 8.122 12.6666 6.83333 12.6666C5.54467 12.6666 4.5 13.7113 4.5 15C4.5 16.2886 5.54467 17.3333 6.83333 17.3333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M16.1667 15H9.16669" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M16.1667 17.3333V15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path vector-effect="non-scaling-stroke" d="M12.6667 17.3333V15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/images/fill-icons/login-email-mfa.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 23 20" width="23" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m1 3h14v14h-14z"/></clipPath><rect fill="#a1a6b0" height="16" rx="6" width="16" y="2"/><g clip-path="url(#a)" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m10.1875 9.63542v1.67708c0 .3481.1383.6819.3844.9281.2462.2461.58.3844.9281.3844h.4375c.3481 0 .6819-.1383.9281-.3844.2461-.2462.3844-.58.3844-.9281v-2.1875c0-1.16032-.4609-2.27312-1.2814-3.09359s-1.9333-1.28141-3.0936-1.28141h-1.75c-1.16032 0-2.27312.46094-3.09359 1.28141s-1.28141 1.93327-1.28141 3.09359v1.75c0 1.1603.46094 2.2731 1.28141 3.0936s1.93327 1.2814 3.09359 1.2814h3.2083"/><path d="m8.36458 7.8125h-.72916c-1.00677 0-1.82292.81615-1.82292 1.82292v.72918c0 1.0068.81615 1.8229 1.82292 1.8229h.72916c1.00677 0 1.82292-.8161 1.82292-1.8229v-.72918c0-1.00677-.81615-1.82292-1.82292-1.82292z"/></g><rect fill="#0eba65" height="8" rx="2" width="12" x="11"/><path d="m15 9.5h-2c-1.933 0-3.5-1.567-3.5-3.5v-3l1.5 1v2c0 1.10457.8954 2 2 2h2z" fill="#a1a6b0"/><g stroke="#fff" stroke-linecap="round" stroke-linejoin="round"><path d="m14.7089 5.48572c.8435 0 1.5273-.71634 1.5273-1.6 0-.88365-.6838-1.6-1.5273-1.6s-1.5273.71635-1.5273 1.6c0 .88366.6838 1.6 1.5273 1.6z"/><path d="m20.8181 3.88571h-4.5818"/><path d="m20.8181 5.48571v-1.6"/><path d="m18.5273 5.48571v-1.6"/></g></svg>

package/src/assets/images/fill-icons/login-email.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 16 20" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m1 3h14v14h-14z"/></clipPath><rect fill="#a1a6b0" height="16" rx="6" width="16" y="2"/><g clip-path="url(#a)" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m10.1875 9.63542v1.67708c0 .3481.1383.6819.3844.9281.2462.2461.58.3844.9281.3844h.4375c.3481 0 .6819-.1383.9281-.3844.2461-.2462.3844-.58.3844-.9281v-2.1875c0-1.16032-.4609-2.27312-1.2814-3.09359s-1.9333-1.28141-3.0936-1.28141h-1.75c-1.16032 0-2.27312.46094-3.09359 1.28141s-1.28141 1.93327-1.28141 3.09359v1.75c0 1.1603.46094 2.2731 1.28141 3.0936s1.93327 1.2814 3.09359 1.2814h3.2083"/><path d="m8.36458 7.8125h-.72916c-1.00677 0-1.82292.81615-1.82292 1.82292v.72918c0 1.0068.81615 1.8229 1.82292 1.8229h.72916c1.00677 0 1.82292-.8161 1.82292-1.8229v-.72918c0-1.00677-.81615-1.82292-1.82292-1.82292z"/></g></svg>

package/src/assets/images/fill-icons/login-sso-azure.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 15 20" width="15" xmlns="http://www.w3.org/2000/svg"><path d="m7 2.5h-7v7h7z" fill="#f25022"/><path d="m7 10.5h-7v7h7z" fill="#00a4ef"/><path d="m15 2.5h-7v7h7z" fill="#7fba00"/><path d="m15 10.5h-7v7h7z" fill="#ffb900"/></svg>

package/src/assets/images/fill-icons/login-sso-okta.svg

@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 16 20" width="16" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="10" r="6" stroke="#357bbb" stroke-width="4"/></svg>

package/src/assets/images/flags/EU.svg

@@ -0,0 +1 @@
+<svg fill="none" height="15" viewBox="0 0 20 15" width="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h20v15h-20z"/></clipPath><mask id="b" height="15" maskUnits="userSpaceOnUse" width="20" x="0" y="0"><path d="m20 0h-20v15h20z" fill="#fff"/></mask><mask id="c" height="15" maskUnits="userSpaceOnUse" width="20" x="0" y="0"><path clip-rule="evenodd" d="m0 0v15h20v-15z" fill="#fff" fill-rule="evenodd"/></mask><g clip-path="url(#a)"><g clip-rule="evenodd" fill-rule="evenodd" mask="url(#b)"><path d="m0 0v15h20v-15z" fill="#f7fcff"/><g mask="url(#c)"><path d="m0 0v15h20v-15z" fill="#3d58db"/><path d="m9.26516 3.02849.73474-.38628.7347.38628-.1403-.81814.5944-.63909h-.8214l-.3674-.804048-.36737.804048h-.82146l.59441.63909zm0 10.85551.73474-.3863.7347.3863-.1403-.8181.5944-.6391h-.8214l-.3674-.804-.36737.804h-.82146l.59441.6391zm-5.78226-5.37274.14031-.81814-.5944-.63908h.82145l.36736-.80405.36738.80405h.82145l-.59442.63908.14033.81814-.73474-.38627zm1.35153 1.77004-.14032.8181.73474-.3862.73472.3862-.14031-.8181.59441-.63909h-.82146l-.36736-.80404-.36737.80404h-.82146zm9.74357.4319-.7347.3862.1402-.8181-.5944-.63909h.8215l.3674-.80404.3674.80404h.8214l-.5944.63909.1402.8181zm-9.74357-5.6756-.14032.81814.73474-.38628.73472.38628-.14031-.81814.59441-.63909h-.82146l-.36736-.80405-.36737.80405h-.82146zm9.74357.43186-.7347.38628.1402-.81814-.5944-.63909h.8215l.3674-.80405.3674.80405h.8214l-.5944.63909.1402.81814zm-7.918 6.89424-.14033.8182.73473-.3864.73473.3864-.14032-.8182.59441-.6391h-.82145l-.36737-.804-.36737.804h-.82145zm5.4173.8182.1403-.8182-.5944-.6391h.8215l.3673-.804.3674.804h.8215l-.5945.6391.1404.8182-.7348-.3864zm-5.4173-10.25995-.14033.81814.73473-.38628.73473.38628-.14032-.81814.59441-.63909h-.82145l-.36737-.80405-.36737.80405h-.82145zm5.4173.81814.1403-.81814-.5944-.63909h.8215l.3673-.80405.3674.80405h.8215l-.5945.63909.1404.81814-.7348-.38628zm3.0627 3.87915-.1404.81812.7348-.38626.7347.38626-.1403-.81812.5943-.6391h-.8213l-.3674-.80404-.3674.80404h-.8215z" fill="#ffd018"/></g></g></g></svg>

package/src/components/alert/alert.vue

@@ -1,11 +1,11 @@
 <template>
   <div v-if="show" class="ecs-alert" :class="[typeClass, dismissable ? 'ecs-alert-dismissable' : '', inset ? 'ecs-alert-inset' : '']">
     <button v-if="dismissable" @click="dismiss" class="close">
-      <ecs-icon type="close" width="20" height="20" />
+      <ecs-icon type="close" size="20" />
     </button>
     <div class="ecs-alert-inner">
       <h4 v-if="headline" class="ecs-alert-headline">
-        <ecs-icon v-if="icon" :type="icon" width="20" height="20" />
+        <ecs-icon v-if="icon" :type="icon" size="20" />
         {{ headline }}
       </h4>
       <div v-if="$slots.default" class="ecs-alert-content">

package/src/components/breadcrumb-button/breadcrumb-button.vue

@@ -7,8 +7,8 @@
               typeClass
             ]"
   >
-    <ecs-icon v-if="icon" :type="icon" width="20" height="20" />
-    <ecs-icon v-if="type == 'more'" type="more" width="20" height="20" />
+    <ecs-icon v-if="icon" :type="icon" size="20" />
+    <ecs-icon v-if="type == 'more'" type="more" size="20" />
     <span v-if="type != 'more'">
       <slot></slot>
     </span>

package/src/components/button/button.vue

@@ -13,7 +13,7 @@
       @mouseover="$emit('mouseover', $event)"
       @mouseleave="$emit('mouseleave', $event)">
 
-    <ecs-icon v-if="icon || loading" :type="iconType" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon || loading" :type="iconType" :size="iconSize" />
     <slot></slot>
   </a>
 
@@ -31,7 +31,7 @@
       @mouseover="$emit('mouseover', $event)"
       @mouseleave="$emit('mouseleave', $event)">
 
-    <ecs-icon v-if="icon || loading" :type="iconType" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon || loading" :type="iconType" :size="iconSize" />
     <slot></slot>
   </button>
 

package/src/components/button-context/button-context.vue

@@ -5,7 +5,7 @@
     :style="selectedColorText"
     @click="$emit('click', $event)">
 
-    <ecs-icon v-if="icon || loading" :type="iconType" width="20" height="20" />
+    <ecs-icon v-if="icon || loading" :type="iconType" size="20" />
     <div v-if="selectedColor" class="ecs-context-button-color" :style="selectedColorBackground" />
     <slot></slot>
   </button>

package/src/components/button-more/button-more.vue

@@ -5,7 +5,7 @@
             ]"
     @click="$emit('click', $event)">
 
-    <ecs-icon v-if="type == 'ellipsis'" type="more" width="20" height="20" color="#FFF" />
+    <ecs-icon v-if="type == 'ellipsis'" type="more" size="20" color="#FFF" />
     <slot></slot>
   </button>
 </template>

package/src/components/button-table/button-table.vue

@@ -15,7 +15,7 @@
     @mouseover="$emit('mouseover', $event)"
     @mouseleave="$emit('mouseleave', $event)">
 
-    <ecs-icon v-if="icon || loading" :type="iconType" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon || loading" :type="iconType" :size="iconSize" />
     <div v-if="label != null" class="button-label">{{ label }}</div>
     <div v-if="chevron" class="chevron" :class="active ? 'expand' : ''" />
   </button>

package/src/components/button-toolbar/button-toolbar.vue

@@ -9,10 +9,10 @@
             dropdownClass]"
             @click="$emit('click', $event)">
 
-    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
+    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
     <slot></slot>
     <span class="badge" v-if="badge" :style="{ background: badgeColor }"></span>
-    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
+    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
   </a>
 
   <button v-else class="ecs-toolbar-button"
@@ -25,10 +25,10 @@
             dropdownClass]"
             @click="$emit('click', $event)">
 
-    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
+    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
     <slot></slot>
     <span class="badge" v-if="badge" :style="{ background: badgeColor }"></span>
-    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
+    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
   </button>
 </template>
 

package/src/components/button-toolbar-icon/button-toolbar-icon.vue

@@ -8,7 +8,7 @@
     <ecs-icon :type="icon" />
     <span v-if="hasBadge" class="badge" />
     <div class="sub-icon">
-      <ecs-icon v-if="subIcon" :type="subIcon" width="14" height="14" />
+      <ecs-icon v-if="subIcon" :type="subIcon" size="14" />
     </div>
   </button>
 </template>

package/src/components/collection-control/collection-control.vue

@@ -8,7 +8,7 @@
       isVisible || nonInteractive ? '' : 'collapsed',
       nonInteractive ? '' : 'interactive',
       ]">
-      <ecs-icon v-if="icon" :type="icon" color="#858E9E" :width="iconSize" :height="iconSize" />
+      <ecs-icon v-if="icon" :type="icon" color="#858E9E" :size="iconSize" />
       <div class="description" v-if="label">{{ label }}</div>
       <div class="collection"
         @mouseover="toggleTooltip"

package/src/components/context-menu/context-menu.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="ecs-context-menu" :class="opened ? ' opened': ''" :id="elementId" :style="[postionStyles]" v-click-outside="onClickOutside">
+    <ul>
+      <li
+        v-for="(option, index) in options"
+        :key="index"
+        @click.stop="optionClicked(option)"
+        :class="[
+          option.type === 'divider' ? 'ecs-context-menu-divider' : 'ecs-context-menu-item',
+          option.type === 'danger' ? 'danger' : '',
+          option.disabled ? 'disabled' : ''
+        ]"
+      >
+        <ecs-icon v-if="option.icon" :type="option.icon" size="20" />
+        <span v-if="option.type != 'divider'">{{ option.name}}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import vClickOutside from "v-click-outside"
+Vue.use(vClickOutside)
+import EcsIcon from '../icon/icon'
+
+export default {
+  components: { EcsIcon },
+
+  props: {
+    /** Unique String that acts as the id for the menu. */
+    elementId: {
+      type: String,
+      required: true
+    },
+    /** Array of menu options to show. Component will use the `name` parameter as the label. Array needs to contain objects with the following structure:
+    ```{
+      name: 'Duplicate',
+      slug: 'duplicate',
+      icon: 'evidence',
+      disabled: false,
+      type: ''
+    }``` */
+    options: {
+      type: Array,
+      required: true
+    },
+    /** If passed, an icon will appear. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+    icon: {
+      type: String
+    }
+  },
+
+  data() {
+    return {
+      item: null,
+      menuWidth: null,
+      menuHeight: null,
+      opened: false,
+      left: 0,
+      top: 0
+    };
+  },
+
+  computed: {
+    postionStyles(){
+      return { left: this.left + 'px', top: this.top + 'px'}
+    }
+  },
+
+  methods: {
+    showMenu(event, item) {
+      this.item = item
+
+      let menu = document.getElementById(this.elementId)
+      if (!menu) {
+        return
+      }
+
+      if (!this.menuWidth || !this.menuHeight) {
+        menu.style.visibility = "hidden"
+        menu.style.display = "block"
+        this.menuWidth = menu.offsetWidth
+        this.menuHeight = menu.offsetHeight
+        menu.removeAttribute("style")
+      }
+
+      if (this.menuWidth + event.pageX >= window.innerWidth) {
+        this.left = event.pageX - this.menuWidth + 2
+      } else {
+        this.left = event.pageX - 2
+      }
+
+      if (this.menuHeight + event.pageY >= window.innerHeight) {
+        this.top = event.pageY - this.menuHeight + 2
+      } else {
+        this.top = event.pageY - 2
+      }
+
+      this.opened = true
+    },
+
+    hideContextMenu() {
+      const element = document.getElementById(this.elementId)
+      if (element) {
+        this.opened = false
+        /** Emitted when closing the context menu. */
+        this.$emit("menu-closed")
+      }
+    },
+
+    onClickOutside() {
+      this.hideContextMenu()
+    },
+
+    optionClicked(option) {
+      this.hideContextMenu()
+
+      /** When a menu item is clicked, the component will emit an event with a value containing the clicked item and the menu option that was clicked. Register for this event to capture the selection result. */
+      this.$emit("option-clicked", {
+        item: this.item,
+        option: option
+      })
+    },
+
+    onEscKeyRelease(event) {
+      if (event.keyCode === 27) {
+        this.hideContextMenu()
+      }
+    }
+  },
+
+  mounted() {
+    document.body.addEventListener("keyup", this.onEscKeyRelease)
+  },
+
+  beforeDestroy() {
+    document.removeEventListener("keyup", this.onEscKeyRelease)
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+@import "../mixins/svg-uri";
+
+.ecs-context-menu{
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  display: none;
+  list-style: none;
+  position: absolute;
+  z-index: 1000000;
+  border-radius: $border-radius-medium;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0px 0px 0px 1px rgba(71, 75, 96, 0.05), 0px 2px 8px rgba(71, 75, 96, 0.15);
+  backdrop-filter: blur(7px);
+  padding: $spacing-5 0;
+
+  &.opened{
+    display: block;
+  }
+
+  &-item{
+    display: flex;
+    align-items: center;
+    height: $spacing-40;
+    column-gap: $spacing-10;
+    padding: 0 $spacing-15;
+    font-size: $type-scale-3-font-size;
+    line-height: $type-scale-3-line-height;
+    color: $color-gray-15;
+    cursor: pointer;
+
+    .icon{
+      color: $color-gray-8;
+    }
+
+    &:not(.disabled){
+      &.danger:hover{
+        background: $color-red-1;
+
+        .icon{
+          color: $color-red-10;
+        }
+      }
+
+      &:hover{
+        background: $color-blue-1;
+
+        .icon{
+          color: $color-blue-10;
+        }
+      }
+    }
+
+    &.disabled{
+      cursor: not-allowed;
+      color: $color-gray-7;
+
+      .icon{
+        color: $color-gray-5;
+      }
+    }
+  }
+
+  &-divider{
+    margin: $spacing-5 0;
+    height: 1px;
+    background: $color-gray-3;
+  }
+}
+</style>

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

@@ -15,7 +15,7 @@
       <slot name="control"></slot>
     </div>
 
-    <ecs-icon v-if="icon" :type="icon" :color="iconColor" :spinning="spinning" width="26" height="26" />
+    <ecs-icon v-if="icon" :type="icon" :color="iconColor" :spinning="spinning" size="26" />
     <ecs-skeleton-loader v-if="icon && loading" type="rect" :width="26" :height="26" />
 
     <div class="ecs-data-card-inner">

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-data-grid-row" :class="state">
+  <div class="ecs-data-grid-row" :class="state" ref="grid_row">
     <div v-if="state == 'droppable'" @click="handleDropzoneClick" class="ecs-data-grid-row-drop-zone" />
 
     <!-- @slot All of the row's cells go here. There should **never** be any other child component other than EcsDataGridCell be used. -->
@@ -16,6 +16,13 @@
         type: String,
         validator: v => ['default', 'selected', 'opened', 'added', 'droppable'].includes(v),
         default: 'default'
+      },
+
+      /** Determines if listener should be added for listed mouse event. */
+      mouseEvent: {
+        type: String,
+        validator: v => ['', 'click', 'contextmenu'].includes(v),
+        default: ''
       }
     },
 
@@ -23,7 +30,24 @@
       handleDropzoneClick(){
         /** Emitted when clicking (eg. dropping a bunch of other rows via lift & drop) the rows dropzone. */
         this.$emit('rowdrop')
+      },
+
+      handleRowClick(event){
+         /** Emitted when left or right clicking in the component. */
+        this.$emit("click", event)
+        event.preventDefault()
+        event.stopPropagation()
       }
+    },
+
+    mounted() {
+      if(this.mouseEvent)
+        this.$refs.grid_row.addEventListener(this.mouseEvent, this.handleRowClick)
+    },
+
+    beforeDestroy() {
+      if(this.mouseEvent)
+        this.$refs.grid_row.removeEventListener(this.mouseEvent, this.handleRowClick)
     }
   }
 </script>

package/src/components/dialog/dialog.vue

@@ -1,14 +1,14 @@
 <template>
-    <dialog ref="dialog" :class="[large ? 'ecs-dialog-large' : '']" class="ecs-dialog">
-      <div class="ecs-dialog-body">
-        <slot></slot>
-      </div>
-
-      <div v-if="$slots.actions" class="ecs-dialog-footer" :class="[stackedFooter ? 'ecs-dialog-footer-stacked' : '']">
-        <!-- @slot Slot for the dialog footer buttons. Should only contain EcsButtonDialog components. -->
-        <slot name="actions"></slot>
-      </div>
-    </dialog>
+  <dialog v-if="lazyLoad" ref="dialog" :class="[large ? 'ecs-dialog-large' : '']" class="ecs-dialog">
+    <div class="ecs-dialog-body">
+      <slot></slot>
+    </div>
+
+    <div v-if="$slots.actions" class="ecs-dialog-footer" :class="[stackedFooter ? 'ecs-dialog-footer-stacked' : '']">
+      <!-- @slot Slot for the dialog footer buttons. Should only contain EcsButtonDialog components. -->
+      <slot name="actions"></slot>
+    </div>
+  </dialog>
 </template>
 
 <script>
@@ -33,7 +33,8 @@
 
     data () {
       return {
-        isShown: this.show
+        isShown: this.show,
+        lazyLoad: false
       }
     },
 
@@ -49,10 +50,17 @@
       show(){
         this.isShown = this.show
 
-        if(this.isShown)
-          this.$refs.dialog.showModal()
-        else
+        if(this.isShown){
+          this.lazyLoad = true
+          this.$nextTick(() => {
+            this.$refs.dialog.showModal()
+          })
+        } else {
           this.$refs.dialog.close()
+          this.$nextTick(() => {
+            this.lazyLoad = false
+          })
+        }
       }
     },
 
@@ -80,8 +88,8 @@
   display: flex;
   flex-direction: column;
   margin: auto;
-  margin-bottom: auto;
-  margin-top: auto;
+  margin-bottom: auto !important;
+  margin-top: auto !important;
   border: none;
   padding: 0;
   overflow: visible;
@@ -159,36 +167,6 @@
     }
   }
 
-  &-user{
-    display: flex;
-    align-items: center;
-    margin: 20px 0 15px 0;
-    background: #FFF;
-    border-radius: $border-radius-small;
-    padding: 10px;
-    border: 1px solid rgba($color-gray-8, .2);
-    text-align: left;
-
-    span{
-      display: block;
-    }
-
-    .avatar{
-      margin-right: 12px;
-    }
-
-    .title{
-      font-size: $type-scale-4-font-size;
-      margin-bottom: 5px;
-      color: $color-gray-13;
-    }
-
-    .sub{
-      font-size: $type-scale-3-font-size;
-      color: $color-gray-8;
-    }
-  }
-
   &-footer{
     display: flex;
     justify-content: space-between;

package/src/components/document-state/document-state.vue

@@ -5,7 +5,7 @@
     <div v-if="instantView" class="instant" />
     <div v-else class="no-instant" />
     <span v-if="loading" class="loading">
-      <ecs-icon type="loading" width="18px" height="18px" color="#202127" />
+      <ecs-icon type="loading" size="18" color="#202127" />
     </span>
   </div>
 </template>

package/src/components/empty-state/empty-state.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ecs-empty-state">
-    <ecs-icon v-if="type!='loading'" :type="type" :color="iconColor" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="type!='loading'" :type="type" :color="iconColor" :size="iconSize" />
     <div v-else class="ecs-empty-state-loading" />
     <div v-if="type!='loading'" class="ecs-empty-state-message" :class="size">
       <slot></slot>

package/src/components/excerpt-snippet/excerpt-snippet.vue

@@ -3,7 +3,7 @@
     <div class="ecs-excerpt-title">
       <div class="ecs-excerpt-title-headline">
         <ecs-skeleton-loader v-if="icon && loading" type="rect" :width="20" :height="20" />
-        <ecs-icon v-if="icon && !loading" :type="icon" width="20" height="20" />
+        <ecs-icon v-if="icon && !loading" :type="icon" size="20" />
         <ecs-skeleton-loader v-if="loading" type="single" :width="20" />
         <span v-else>{{ headline }}</span>
       </div>