@everchron/ec-shards 4.1.2 → 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.1.2",
+  "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-cell.vue

@@ -1,7 +1,7 @@
 <template>
   <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-test="computedId">
+    <div class="ecs-data-grid-cell-inner" :style="[widthStyles, paddingStyles]" :data-column="computedId" :data-test="computedId">
       <!-- @slot Tabe cell content slot. -->
       <slot></slot>
     </div>
@@ -60,18 +60,23 @@
 
     data () {
       return {
-        widthStyles: {
-          width: this.width + 'px',
-          minWidth: this.minWidth + 'px',
-        }
+        cellWidth:0,
+        cellFixedLeftOffset: ''
       }
     },
 
     computed: {
+      widthStyles(){
+        return {
+          width: this.cellWidth + 'px',
+          minWidth: this.minWidth + 'px',
+        }
+      },
+
       fixedStyles(){
         if(this.fixedLeft)
-          if (this.fixedLeftOffset && this.fixedLeftOffset !== '')
-            return { position: 'sticky', left: this.fixedLeftOffset + 'px', zIndex: '1' }
+          if (this.cellFixedLeftOffset && this.cellFixedLeftOffset !== '')
+            return { position: 'sticky', left: this.cellFixedLeftOffset + 'px', zIndex: '1' }
           else
             return { position: 'sticky', left: '0', zIndex: '1' }
         else if(this.fixedRight)
@@ -90,6 +95,21 @@
         return string.replace(/\W+/g, '-').toLowerCase() + '-column-cell'
       }
     },
+
+    methods: {
+      setWidth(val){
+        this.cellWidth = val
+      },
+
+      setFixedLeftOffset(val){
+        this.cellFixedLeftOffset = val
+      }
+    },
+
+    created(){
+      this.cellWidth = this.width
+      this.cellFixedLeftOffset = this.fixedLeftOffset
+    },
   }
 </script>
 

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

@@ -1,7 +1,7 @@
 <template>
   <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]" :data-test="computedId">
+    <div ref="resizer" class="ecs-data-grid-head-cell-inner" :style="[widthStyles, paddingStyles, resizeStyles]" :class="resizable ? 'resizable' : ''" :data-column="computedId" :data-test="computedId">
       <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" :value="option.value">{{ option.name }}</option>
@@ -92,6 +92,11 @@
       /** Overwrites the default padding. Should only be used when the cell contains e.g. a button which has it's own padding and thus needs to be aligned with the padding of other cells. Only pass padding shorthand values, for example: `4px 0 4px 8px`.*/
       padding: {
         type: String
+      },
+      /** Determines if the column should be resizable. */
+      resizable: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -102,15 +107,17 @@
           minWidth: this.minWidth + 'px',
         },
         newSort: this.sorting,
-        resizeWidth: null
+        resizeWidth: null,
+        initialized: false,
+        cellFixedLeftOffset: ''
       }
     },
 
     computed: {
       fixedStyles(){
         if(this.fixedLeft)
-          if (this.fixedLeftOffset && this.fixedLeftOffset !== '')
-            return { position: 'sticky', left: this.fixedLeftOffset + 'px', zIndex: '1' }
+          if (this.cellFixedLeftOffset && this.cellFixedLeftOffset !== '')
+            return { position: 'sticky', left: this.cellFixedLeftOffset + 'px', zIndex: '1' }
           else
             return { position: 'sticky', left: '0', zIndex: '1' }
         else if(this.fixedRight)
@@ -144,6 +151,11 @@
         if(this.id && this.id !== '')
           string = this.id
         return string.replace(/\W+/g, '-').toLowerCase() + '-column-head'
+      },
+
+      resizeStyles(){
+        if(this.resizable)
+          return { resize: 'horizontal', overflow: 'hidden' }
       }
     },
 
@@ -158,7 +170,74 @@
         
         /** Emitted when the sort button is clicked. Returns the new sort order for the column. */
         this.$emit('sortby', this.newSort)
+      },
+
+      setColumnCellsWidth(){
+        if(!this.initialized) {
+          this.initialized = true
+          return
+        }
+
+        const resizedEl = document.querySelector('[data-column="'+ this.computedId +'"]')
+        const currentColumnWidth = resizedEl.offsetWidth
+
+        /** Emitted when the column has been resized. Returns the new width of the column in pixels. */
+        this.$emit('resizedWidth', currentColumnWidth)
+
+        let columnCells = document.querySelectorAll('[data-column="' + this.name.toLowerCase() + '-column-cell"]')
+        columnCells.forEach(cell => {
+          cell.parentElement.__vue__.setWidth(currentColumnWidth)
+        })
+
+        if(this.fixedLeft)
+          this.setCellsFixedLeftOffset()
+      },
+
+      setCellsFixedLeftOffset(){
+        let gridColumnCells = document.querySelectorAll('.ecs-data-grid-head-cell-inner')
+        let startIndex
+
+        for(let idx = 0; idx < gridColumnCells.length; idx++){
+          if(gridColumnCells[idx].attributes['data-column'].value == this.computedId){
+            startIndex = idx
+          }
+          else if(!isNaN(startIndex) && idx > startIndex && gridColumnCells[idx].parentElement.__vue__.fixedLeft && gridColumnCells[idx].parentElement.__vue__.cellFixedLeftOffset){
+            let updatedLeft = gridColumnCells[idx - 1].offsetWidth
+            if(gridColumnCells[idx - 1].parentElement.__vue__.cellFixedLeftOffset)
+              updatedLeft += gridColumnCells[idx - 1].parentElement.__vue__.cellFixedLeftOffset
+            gridColumnCells[idx].parentElement.__vue__.setFixedLeftOffset(updatedLeft)
+            let columnCells = document.querySelectorAll('[data-column="' + gridColumnCells[idx].parentElement.__vue__.name.toLowerCase() + '-column-cell"]')
+            columnCells.forEach(cell => {
+              cell.parentElement.__vue__.setFixedLeftOffset(updatedLeft)
+            })
+          }
+        }
+      },
+
+      setFixedLeftOffset(val){
+        this.cellFixedLeftOffset = val
+      }
+    },
+
+    created(){
+      this.cellFixedLeftOffset = this.fixedLeftOffset
+      this.resizeObserver = new ResizeObserver(entries => {
+        entries.forEach(entry => {
+          this.setColumnCellsWidth()
+        })
+      })
+    },
+
+    mounted(){
+      if(this.resizable && this.resizeObserver){
+        const resizeEl = document.querySelector('[data-column="'+ this.computedId +'"]')
+        this.resizeObserver.observe(resizeEl)
       }
+    },
+
+    destroyed(){
+      if(this.resizeObserver)
+        this.resizeObserver.disconnect()
     }
   }
 </script>
@@ -179,6 +258,31 @@
     column-gap: $spacing-10;
     height: 40px;
     position: relative;
+
+    &.resizable:after{
+      content: "";
+      width: 16px;
+      height: 16px;
+      right: 0;
+      bottom: 0;
+      background: svg-uri('<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" fill="white"/><path d="M4 12L12 4" stroke="#157EFB" stroke-linecap="round"/><path d="M8 12L12 8" stroke="#157EFB" stroke-linecap="round"/></svg>');
+      position: absolute;
+      transition: .2s;
+      opacity: 0;
+      transform: scale(.2);
+      transform-origin: bottom right;
+      pointer-events: none;
+    }
+
+    &.resizable:hover:after,
+    &.resizing:after{
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    &::-webkit-resizer{
+      display: none;
+    }
   }
 
   &-text{