@everchron/ec-shards 4.2.0 → 4.3.0

package/src/components/separator/separator.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="ecs-separator" :class="classes" :style="{margin: marginStyles, width: width, height: height}" />
+</template>
+
+<script>
+  export default {
+    props: {
+      /** Determines if the separator line is horinzontally or vertically shown. */
+      type: {
+        type: String,
+        default: 'horizontal',
+        validator: v => ['horizontal', 'vertical'].includes(v)
+      },
+      /** Determines the color strength of the line. */
+      strength: {
+        type: String,
+        default: 'medium',
+        validator: v => ['soft', 'medium', 'strong'].includes(v)
+      },
+      /** Determines to margin (top/bottom for horizontal, left/right for vertical). If a `Number` is passed, the margin will used for both top/bottom or left/right. If an `Array` is passed (eg. `[8, 16]`), you can set individual margins for each side (CSS shorthand syntax). */
+      margin: {
+        type: [Number, Array],
+        default: 0
+      },
+      /** Determines the width of the separator. Any valid css (px, %) value possible. */
+      width: {
+        type: String
+      },
+      /** Determines the height of the separator. Any valid css (px, %) value possible. Vertical separators typically require a pixel value height. */
+      height: {
+        type: String
+      }
+    },
+
+    computed: {
+      classes(){
+        return 'ecs-separator-' + this.type + ' ecs-separator-' + this.strength
+      },
+
+      marginStyles(){
+        if(typeof(this.margin) === 'number') {
+          if(this.type === 'horizontal')
+            return this.margin + 'px 0 ' + this.margin + 'px 0'
+          else
+            return '0 ' + this.margin + 'px 0 ' + this.margin + 'px'
+        } else if(typeof(this.margin) === 'object') {
+          const iterator = this.margin.values()
+          let margins
+          let iteration = 0
+          for (const value of iterator) {
+            if(iteration == 0)
+              margins = value + 'px '
+            else
+              margins = margins + value + 'px '
+            iteration++
+          }
+          return margins
+        }
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+@import "../../tokens/build/scss/tokens.scss";
+
+.ecs-separator{
+  border-radius: 1px;
+
+  &-soft{
+    background-color: $color-gray-2;
+  }
+
+  &-medium{
+    background-color: $color-gray-3;
+  }
+
+  &-strong{
+    background-color: $color-gray-4;
+  }
+
+  &-horizontal{
+    width: 100%;
+    height: 1px;
+  }
+
+  &-vertical{
+    height: 100%;
+    width: 1px;
+  }
+}
+</style>
+

package/src/components/sequence-map-button/sequence-map-button.vue

@@ -4,7 +4,7 @@
           :class="[active ? 'active' : '', loading ? 'loading' : '', disabled ? 'disabled' : '', completed ? 'completed' : '']">
     <span class="count">
       {{ step }}
-      <ecs-icon v-if="loading" type="loading" class="loading" width="34" height="34" />
+      <ecs-icon v-if="loading" type="loading" class="loading" size="34" />
     </span>
     <slot></slot>
     <div class="step-indicator" />

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: 'Data/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/src/components/tiptap/tiptap.vue

@@ -1,246 +0,0 @@
-<template>
-  <div class="ecs-tiptap">
-    <bubble-menu
-      class="ecs-bubble-menu"
-      :tippy-options="{ duration: 100 }"
-      :editor="editor"
-      v-if="editor"
-    >
-      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" title="Bold">
-        <ecs-icon type="format-bold" width="26px" height="26px" />
-      </button>
-      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" title="Italic">
-        <ecs-icon type="format-italic" width="26px" height="26px" />
-      </button>
-      <button @click="editor.chain().focus().toggleUnderline().run()" :class="{ 'is-active': editor.isActive('underline') }" title="Underline">
-        <ecs-icon type="format-underline" width="26px" height="26px" />
-      </button>
-      <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }" title="Link">
-        <ecs-icon type="link" width="26px" height="26px" />
-      </button>
-      <button @click="editor.chain().focus().unsetLink().run()" v-if="editor.isActive('link')" title="Remove Link">
-        <ecs-icon type="link-remove" width="26px" height="26px" />
-      </button>
-      <button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }" title="Quote">
-        <ecs-icon type="format-blockquote" width="26px" height="26px" />
-      </button>
-      <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }" title="Ordered List">
-        <ecs-icon type="format-ol" width="26px" height="26px" />
-      </button>
-      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" title="Bullet List">
-        <ecs-icon type="format-ul" width="26px" height="26px" />
-      </button>
-    </bubble-menu>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import EcsIcon from '../icon/icon'
-
-import {
-  Editor,
-  EditorContent,
-  BubbleMenu,
-  FloatingMenu,
-} from '@tiptap/vue-2'
-
-import Underline from '@tiptap/extension-underline'
-import Placeholder from '@tiptap/extension-placeholder'
-import Link from '@tiptap/extension-link'
-import Blockquote from '@tiptap/extension-blockquote'
-import OrderedList from '@tiptap/extension-ordered-list'
-import BulletList from '@tiptap/extension-bullet-list'
-import ListItem from '@tiptap/extension-list-item'
-
-import { defaultExtensions } from '@tiptap/starter-kit'
-
-export default {
-  components: {
-    EcsIcon,
-    EditorContent,
-    BubbleMenu,
-    FloatingMenu
-  },
-
-  props: {
-    placeholder: {
-      type: String,
-      default: 'Write something…'
-    }
-  },
-
-  data() {
-    return {
-      editor: null,
-    }
-  },
-
-  mounted() {
-    this.editor = new Editor({
-      extensions: [
-        ...defaultExtensions(),
-        Underline,
-        Placeholder.configure({
-          placeholder: this.placeholder,
-        }),
-        Link,
-        Blockquote,
-        OrderedList,
-        BulletList,
-        ListItem,
-      ],
-      content: ``
-    })
-  },
-
-  methods: {
-    setLink() {
-      const url = window.prompt('Enter URL')
-      this.editor.chain().focus().setLink({ href: url }).run()
-    },
-  },
-
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-
-<style lang="scss">
-@import "../../tokens/build/scss/tokens.scss";
-@import "../mixins/svg-uri";
-
-.ProseMirror{
-  font-size: $type-scale-3-font-size;
-  line-height: 1.4em;
-  padding: 10px;
-
-  > *:first-child{
-    margin-top: 0;
-  }
-
-  > *:last-child{
-    margin-bottom: 0;
-  }
-
-  p{
-    margin: 1em 0;
-  }
-
-  i{
-    font-style: italic;
-  }
-
-  u{
-    text-decoration: underline;
-  }
-
-  b, strong{
-    font-weight: 600;
-  }
-
-  ul{
-    list-style-type: disc;
-    padding-left: 16px;
-    margin: 1em 0;
-  }
-
-  ol{
-    padding-left: 16px;
-    margin: 1em 0;
-  }
-
-  ul li, ol li{
-    > *:first-child{
-      margin-top: 0;
-    }
-
-    > *:last-child{
-      margin-bottom: 0;
-    }
-  }
-
-  blockquote{
-    border-left: 3px solid rgba($color-gray-6, .4);
-    color: $color-gray-10;
-    margin: 1em 0;
-    padding-left: 16px;
-  }
-
-  a{
-    color: $color-blue-10;
-    text-decoration: none;
-    transition: .2s;
-
-    &:after{
-      opacity: .7;
-      transition: .2s;
-    }
-
-    &:hover{
-      color: darken($color-blue-10, 5%);
-
-      &:after{
-        opacity: 1;
-      }
-    }
-
-    &[href*="//"]:not([href*="everchron.com"]):after,
-    &[href*="//"]:not([href*="everchron.me"]):after,
-    &[href*="//"]:not([href*="everchron.co.uk"]):after,
-    &[href*="//"]:not([href*="everchron.com.au"]):after,
-    &[href*="//"]:not([href*="everchron.wtf"]):after{
-      content: "";
-      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path fill="#858E9E" d="M7.625,3.5 C7.524,3.5 7.434,3.459 7.366,3.395 C7.364,3.393 7.361,3.393 7.359,3.391 L6.427,2.458 L4.067,4.818 C3.823,5.061 3.427,5.061 3.183,4.818 C2.939,4.574 2.939,4.178 3.183,3.934 L5.542,1.575 L4.609,0.641 C4.607,0.639 4.607,0.636 4.605,0.634 C4.541,0.566 4.5,0.476 4.5,0.375 C4.5,0.168 4.668,0 4.875,0 L7.5,0 C7.776,0 8,0.224 8,0.5 L8,3.125 C8,3.332 7.832,3.5 7.625,3.5 Z M1,2.25 L1,6.75 C1,6.888 1.112,7 1.25,7 L5.75,7 C5.888,7 6,6.888 6,6.75 L6,4 L7,5 L7,7 C7,7.553 6.553,8 6,8 L1,8 C0.448,8 0,7.553 0,7 L0,2 C0,1.448 0.448,1 1,1 L3,1 L4,2 L1.25,2 C1.112,2 1,2.112 1,2.25 Z"/></svg>');
-      width: 8px;
-      display: inline-block;
-      height: 8px;
-      margin-left: 4px;
-    }
-  }
-}
-
-.ProseMirror p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: $color-gray-6;
-  pointer-events: none;
-  height: 0;
-}
-
-.ecs-bubble-menu {
-  display: flex;
-  align-items: center;
-  background-color: rgba($color-gray-13, .97);
-  padding: 4px;
-  border-radius: $border-radius-medium;
-
-  button {
-    border: none;
-    background: none;
-    color: #FFF;
-    opacity: 0.6;
-    transition: .2s;
-    padding: 0;
-    display: flex;
-    border-radius: $border-radius-small;
-    margin-right: 4px;
-
-    &:last-child{
-      margin-right: 0;
-    }
-
-    &:hover{
-      opacity: .8;
-      background: rgba(#000, .5);
-    }
-
-    &.is-active{
-      opacity: 1;
-      background: rgba(#000, .5);
-    }
-  }
-}
-</style>