@everchron/ec-shards 4.2.0 → 4.4.0

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

@@ -8,7 +8,7 @@
     @click="handleClick">
 
     <ecs-icon v-if="icon" :type="icon" />
-    <ecs-icon v-if="icon && sticker" :type="`sticker-${sticker}`" class="sticker" width="16" height="16" />
+    <ecs-icon v-if="icon && sticker" :type="`sticker-${sticker}`" class="sticker" size="16" />
     <slot></slot>
     <span v-if="shortcut" class="shortcut">{{ shortcut }}</span>
     <span class="hover" />
@@ -316,10 +316,10 @@
   padding-left: 1px;
   
   .ecs-tab-button{
-    border-radius: 0 0 3px 3px;
+    border-radius: 0 0 $border-radius-small $border-radius-small;
     color: $color-gray-14;
     height: 38px;
-    padding: 0 20px;
+    padding: 0 $spacing-25;
     text-align: center;
     font-size: $type-scale-3-font-size;
     line-height: 26px;
@@ -330,6 +330,11 @@
     border-top-color: $color-gray-4;
     position: relative;
     margin-left: -1px;
+    transition: .2s background-color, .2s border-color, .2s color;
+
+    &:hover{
+      background-color: $color-gray-3;
+    }
 
     &:before{
       content: "";
@@ -338,7 +343,7 @@
       background: $color-gray-4;
       border-radius: 1px;
       position: absolute;
-      right: 0;
+      left: 0;
     }
 
     &:after{
@@ -354,18 +359,24 @@
     &.show{
       color: $color-blue-10;
       font-weight: $font-weight-medium;
+      letter-spacing: -.015em;
       background: #FFFFFF;
       border: 1px solid $color-gray-4;
       border-top-color: #FFF;
+      z-index: 1;
 
       &:after{
         transform: scale(1);
         opacity: 1;
       }
+
+      + .ecs-tab-button:before{
+        opacity: 0;
+      }
     }
 
     &.show:before,
-    &:last-child:before{
+    &:first-child:before{
       opacity: 0;
     }
   }

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

@@ -5,7 +5,7 @@
     <div v-if="state =='repairing'" class="repairing" />
     <div v-if="state =='corrupted'" class="corrupted" />
     <span v-if="state == 'loading'" class="loading">
-      <ecs-icon type="loading" width="18px" height="18px" color="#202127" />
+      <ecs-icon type="loading" size="18px" color="#202127" />
     </span>
   </div>
 </template>

package/src/components/tree-list-item/tree-list-item.vue

@@ -15,7 +15,7 @@
         :collapsed="!isVisible"
         @click="toggleCollapse" />
 
-      <ecs-icon v-if="icon" :type="icon" :color="iconColor" :width="iconSize" :height="iconSize" />
+      <ecs-icon v-if="icon" :type="icon" :color="iconColor" :size="iconSize" />
 
       <div v-if="$slots.control" class="ecs-tree-view-entry-control">
         <!-- @slot Slot for a selection control, such as a checkbox or radiobutton. -->

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,35 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 3.3.0 (12 January 2023)
+
+### Features
+
+- Added new EcsFillIcon component
+- Added `login-key` icon
+- Added EU flag icon
+- Added new `placeholder` prop support for EcsSelect component
+- Added new EcsSeparator component
+
+## Version 3.2.0 (11 January 2023)
+
+### Fixes
+
+Reverted all EcsPagination updates and moved these changes to the @next branch, until infinite scroll feature can be implemented. This means 3.2.0 can be used again as a stable release for current application development.
+
+## Version 3.1.5 (undefined)
+
+### Features
+
+- Added item range indicator to EcsPagination component
+
+### Fixes
+
+- Overwrite margins of dialog
+- Only add EcsDialog to the DOM when it's being shown
+- Fix subtle layout shift on EcsTabButton of type `sheet`. 
+- Replaced soon to be deprecated `width` and `height` props of EcsIcon with `size`. 
+
 ## Version 3.1.2 (15 December 2022)
 
 ### Fixes

package/src/stories/context-menu/context-menu.stories.js

@@ -0,0 +1,69 @@
+import EcsContextMenu from '@components/context-menu/context-menu';
+import EcsDataGrid from '@components/data-grid/data-grid';
+import EcsDataGridGroup from '@components/data-grid/data-grid-group';
+import EcsDataGridRow from '@components/data-grid/data-grid-row';
+import EcsDataGridHeadCell from '@components/data-grid/data-grid-head-cell';
+import EcsDataGridCell from '@components/data-grid/data-grid-cell';
+
+export default {
+  title: 'Action/Context Menu',
+  component: EcsContextMenu
+}
+
+export const contextMenu = () => ({
+  components: { EcsContextMenu, EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  template: `<div style="width: 100%;">
+              <ecs-data-grid :striped="false">
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="First" :width="200" />
+                  <ecs-data-grid-head-cell name="Second" :width="200" />
+                  <ecs-data-grid-head-cell name="Third" :width="200" />
+                  <ecs-data-grid-head-cell name="Fourth" :width="200" />
+                </template>
+
+                <ecs-data-grid-row v-for="index in 6" :key="index" mouse-event="contextmenu" @click="(e) => handleClick(e, index)">
+                  <ecs-data-grid-cell column="first" :width="200">Right click me</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="second" :width="200">Right click me</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third" :width="200">Right click me</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="fourth" :width="200">Right click me</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+              </ecs-data-grid>
+
+              <ecs-context-menu
+                element-id="rowMenu"
+                ref="contextMenu"
+                :options="options"
+              ></ecs-context-menu>
+            </div>`,
+  data() {
+    return {
+      options: [
+        {
+          name: 'Duplicate',
+          slug: 'duplicate',
+          icon: 'evidence'
+        },
+        {
+          name: 'Edit',
+          slug: 'edit',
+          icon: 'edit',
+          disabled: true
+        },
+        {
+          type: 'divider',
+        },
+        {
+          name: 'Delete',
+          slug: 'delete',
+          type: 'danger',
+          icon: 'delete'
+        }
+      ],
+    }
+  },
+  methods: {
+    handleClick(event, item) {
+      this.$refs.contextMenu.showMenu(event, item)
+    }
+  },
+})

package/src/stories/fill-icon/fill-icon.stories.js

@@ -0,0 +1,24 @@
+import EcsFillIcon from '@components/fill-icon/fill-icon';
+
+export default {
+  title: 'Icons/Fill Icon',
+  component: EcsFillIcon
+};
+
+export const fillIcon = () => ({
+  components: { EcsFillIcon },
+  template: `<main>
+              <ecs-fill-icon type="login-sso-azure" />
+              <ecs-fill-icon type="login-sso-okta" />
+              <ecs-fill-icon type="login-email" />
+              <ecs-fill-icon type="login-email-mfa" :width="23" />
+            </main>`,
+});
+
+export const fillIconSizes = () => ({
+  components: { EcsFillIcon },
+  template: `<main>
+              <ecs-fill-icon type="login-sso-azure" :width="40" />
+              <ecs-fill-icon type="login-sso-azure" :height="40" :width="40" />
+            </main>`,
+});

package/src/stories/flag/flag.stories.js

@@ -7,5 +7,10 @@ export default {
 
 export const flag = () => ({
   components: { EcsFlag },
-  template: `<ecs-flag code="us" />`,
+  template: `<main>
+              <ecs-flag code="us" />
+              <ecs-flag code="eu" />
+              <ecs-flag code="gb" />
+              <ecs-flag code="au" />
+            </main>`,
 });

package/src/stories/pagination/pagination.stories.js

@@ -35,18 +35,3 @@ export const tabPagination = () => ({
               </ecs-pagination>
             </div>`,
 });
-
-export const infiniteScroll = () => ({
-  components: { EcsPagination, EcsTabBar, EcsTabButton },
-  template: `<div style="display:flex;flex-direction:column;height: 200px;justify-content: flex-end;">
-              <ecs-pagination type="infinite" :current-page="2" :total-pages="10" loading>
-                <template slot="tabs">
-                  <ecs-tab-bar type="sheet">
-                    <ecs-tab-button show>Settings</ecs-tab-button>
-                    <ecs-tab-button>Calendar</ecs-tab-button>
-                    <ecs-tab-button>Versions</ecs-tab-button>
-                  </ecs-tab-bar>
-                </template>
-              </ecs-pagination>
-            </div>`,
-});

package/src/stories/select/select.stories.js

@@ -89,3 +89,19 @@ export const selectNaked = () => ({
                 </ecs-select>
               </div>`,
 });
+
+export const selectPlaceholders = () => ({
+  components: { EcsSelect },
+  template: `<div>
+                <ecs-select placeholder="Placeholder" class="mb-4">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+                <ecs-select placeholder="Placeholder" subtle>
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+              </div>`,
+});

package/src/stories/separator/separator.stories.js

@@ -0,0 +1,33 @@
+import EcsSeparator from '@components/separator/separator';
+
+export default {
+  title: 'Layout/Separator',
+  component: EcsSeparator
+};
+
+export const separator = () => ({
+  components: { EcsSeparator },
+  template: `<div>
+              <ecs-separator :margin="20" />
+              <ecs-separator type="vertical" height="24px" />
+            </div>`,
+});
+
+export const separatorStrengths = () => ({
+  components: { EcsSeparator },
+  template: `<div>
+              <ecs-separator strength="soft" :margin="20" />
+              <ecs-separator strength="medium" :margin="20" />
+              <ecs-separator strength="strong" :margin="20" />
+            </div>`,
+});
+
+export const separatorMargins = () => ({
+  components: { EcsSeparator },
+  template: `<div>
+              <ecs-separator :margin="20" />
+              <ecs-separator type="vertical" :margin="20" height="24px" />
+              <ecs-separator :margin="[20, 40]" />
+              <ecs-separator type="vertical" :margin="[8, 16, 12, 20]" height="24px" />
+            </div>`,
+});

package/dist/demo.html

@@ -1,10 +0,0 @@
-<meta charset="utf-8">
-<title>ec-shards demo</title>
-<script src="./ec-shards.umd.js"></script>
-
-<link rel="stylesheet" href="./ec-shards.css">
-
-
-<script>
-console.log(ec-shards)
-</script>