@everchron/ec-shards 3.1.4 → 3.2.0

package/src/components/party-entry/party-entry.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="ecs-party-entry" :class="[ party, shared ? 'shared' : '', (color && background) ? 'ecs-party-entry-colored' : '']" :style="{ color: color }">
-    <ecs-icon v-if="icon && iconPosition == 'left'" :type="iconType" :color="iconColor" :style="'margin-right:'+iconSpacing" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon && iconPosition == 'left'" :type="iconType" :color="iconColor" :style="'margin-right:'+iconSpacing" :size="iconSize" />
     <span>
       <slot></slot>
     </span>
-    <ecs-icon v-if="icon && iconPosition == 'right'" :type="iconType" :color="iconColor" :style="'margin-left:'+iconSpacing" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon && iconPosition == 'right'" :type="iconType" :color="iconColor" :style="'margin-left:'+iconSpacing" :size="iconSize" />
     <div v-if="background" class="ecs-party-entry-background" />
   </div>
 </template>

package/src/components/popover-header/popover-header.vue

@@ -1,7 +1,7 @@
 <template>
   <header class="ecs-popover-header">
     <div class="ecs-popover-header-title">
-      <ecs-icon v-if="icon" :type="icon" width="36" height="36" class="icon" color="#B4B9BE" />
+      <ecs-icon v-if="icon" :type="icon" size="36" class="icon" color="#B4B9BE" />
       <h2 class="ecs-headline-2">{{title}}</h2>
     </div>
     <div v-if="hasControls" class="ecs-popover-header-actions">

package/src/components/segment/segment.vue

@@ -3,7 +3,7 @@
     <label v-for="option in options" :key="option.id" :for="option.id">
       <input type="radio" :name="name" :value="option.id" :id="option.id" :checked="value==option.id" :disabled="option.disabled" @click="$emit('click', option.id)">
       <span class="ecs-segment" :title="option.title">
-        <ecs-icon v-if="option.icon" :class="[option.icon && option.label ? 'icon-spacing' : '']" :type="option.icon" width="20" height="20" color="#2F333C" />
+        <ecs-icon v-if="option.icon" :class="[option.icon && option.label ? 'icon-spacing' : '']" :type="option.icon" size="20" color="#2F333C" />
         {{ option.label }}
       </span>
     </label>

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,25 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## 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/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/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>