npm - @everchron/ec-shards - Versions diffs - 6.2.0 → 6.2.2 - Mend

@everchron/ec-shards 6.2.0 → 6.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/ec-shards.common.js +135 -108
package/dist/ec-shards.common.js.map +1 -1
package/dist/ec-shards.css +1 -1
package/dist/ec-shards.umd.js +135 -108
package/dist/ec-shards.umd.js.map +1 -1
package/dist/ec-shards.umd.min.js +1 -1
package/dist/ec-shards.umd.min.js.map +1 -1
package/dist/img/dialog-command.92772a1d.svg +1 -0
package/package.json +1 -1
package/src/assets/images/dialog-icons/dialog-command.svg +1 -0
package/src/components/directory-entry/directory-entry.vue +21 -4
package/src/components/state-icon/state-icon.vue +48 -33
package/src/stories/Changelog.stories.mdx +14 -0
package/src/stories/directory-entry/directory-entry.stories.js +9 -0
package/src/stories/state-icon/state-icon.stories.js +9 -0

package/dist/img/dialog-command.92772a1d.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><g fill="#FFF" transform="translate(13 13)"><path fill-opacity=".3" d="M7.6916556,-1.21758623e-15 L26.3083444,3.10752092e-16 C28.9829006,-1.80555915e-16 29.9527593,0.278476833 30.9305371,0.801398111 C31.9083149,1.32431939 32.6756806,2.09168511 33.1986019,3.06946289 C33.7215232,4.04724067 34,5.01709938 34,7.6916556 L34,26.3083444 C34,28.9829006 33.7215232,29.9527593 33.1986019,30.9305371 C32.6756806,31.9083149 31.9083149,32.6756806 30.9305371,33.1986019 C29.9527593,33.7215232 28.9829006,34 26.3083444,34 L7.6916556,34 C5.01709938,34 4.04724067,33.7215232 3.06946289,33.1986019 C2.09168511,32.6756806 1.32431939,31.9083149 0.801398111,30.9305371 C0.278476833,29.9527593 6.4726736e-16,28.9829006 -1.1140022e-15,26.3083444 L2.07168062e-16,7.6916556 C-1.2037061e-16,5.01709938 0.278476833,4.04724067 0.801398111,3.06946289 C1.32431939,2.09168511 2.09168511,1.32431939 3.06946289,0.801398111 C4.04724067,0.278476833 5.01709938,7.07452665e-16 7.6916556,-1.21758623e-15 Z"/><path d="M20,23 L14,23 L14,24.5 C14,26.9852813 11.9852814,29 9.5,29 C7.01471862,29 5,26.9852813 5,24.5 C5,22.0147187 7.01471862,20 9.5,20 L11,20 L11,14 L9.5,14 C7.01471862,14 5,11.9852814 5,9.5 C5,7.01471862 7.01471862,5 9.5,5 C11.9852814,5 14,7.01471862 14,9.5 L14,11 L20,11 L20,9.5 C20,7.01471862 22.0147187,5 24.5,5 C26.9852813,5 29,7.01471862 29,9.5 C29,11.9852814 26.9852813,14 24.5,14 L14,14 L14,20 L20,20 L20,18.5 C20,17.671573 20.671573,17 21.5,17 C22.3284271,17 23,17.671573 23,18.5 L23,20 L24.5,20 C26.9852813,20 29,22.0147187 29,24.5 C29,26.9852813 26.9852813,29 24.5,29 C22.0147187,29 20,26.9852813 20,24.5 L20,23 Z M11,11 L11,9.5 C11,8.67157287 10.3284271,8 9.5,8 C8.67157287,8 8,8.67157287 8,9.5 C8,10.3284271 8.67157287,11 9.5,11 L11,11 Z M11,23 L9.5,23 C8.67157287,23 8,23.6715729 8,24.5 C8,25.3284271 8.67157287,26 9.5,26 C10.3284271,26 11,25.3284271 11,24.5 L11,23 Z M23,11 L24.5,11 C25.3284271,11 26,10.3284271 26,9.5 C26,8.67157287 25.3284271,8 24.5,8 C23.6715729,8 23,8.67157287 23,9.5 L23,11 Z M23,23 L23,24.5 C23,25.3284271 23.6715729,26 24.5,26 C25.3284271,26 26,25.3284271 26,24.5 C26,23.6715729 25.3284271,23 24.5,23 L23,23 Z"/></g></svg>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "6.2.0",
+  "version": "6.2.2",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/assets/images/dialog-icons/dialog-command.svg ADDED Viewed

@@ -0,0 +1 @@

package/src/components/directory-entry/directory-entry.vue CHANGED Viewed

@@ -1,6 +1,7 @@
 <template>
   <div class="ecs-directory-entry">
-    <ecs-icon :type="icon" color="#A1A6B0" />
+    <ecs-icon v-if="icon" :type="icon" color="#A1A6B0" />
+    <ecs-favicon v-else-if="favicon" :website="favicon" />
     <div v-if="indicator" class="indicator" :style="`background-color:`+indicator" />
     <div class="items">
       <slot></slot>
@@ -10,21 +11,33 @@
 <script>
   import EcsIcon from '../icon/icon'
+  import EcsFavicon from '../favicon/favicon'
   export default {
     components: {
-      EcsIcon
+      EcsIcon,
+      EcsFavicon
     },
     props: {
       /** Adds an icon to the list item. The prop value must match a specific icons name. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       icon: {
-        type: String,
-        required: true
+        type: String
+      },
+      /** Adds a website favicon to the list item. The prop value must match a specific icons name. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/images/favicons). */
+      favicon: {
+        type: String
       },
       /** Adds a small badge to the directory entry icon. Used to indicate online, or status states. The value must a color value (HEX, RGB, or shards variable). */
       indicator: {
         type: String,
       }
+    },
+    mounted(){
+      if(!this.icon && !this.favicon){
+        console.warn('Icon or Favicon prop is required for ecs-directory-entry component')
+      }
     }
   }
 </script>
@@ -41,6 +54,10 @@
     margin-bottom: 0;
   }
+  .ecs-favicon{
+    margin: 5px;
+  }
   .indicator{
     position: absolute;
     top: 16px;

package/src/components/state-icon/state-icon.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <template>
-  <div class="ecs-state-icon" role="presentation" :class="[type, iconColor]" />
+  <div class="ecs-state-icon" role="presentation" :class="[type, iconColor]" :style="iconStyle" />
 </template>
 <script>
@@ -15,6 +15,20 @@ export default {
       type: String,
       validator: v => ['vibrant', 'danger', 'neutral'].includes(v),
       default: 'neutral'
+    },
+    /** The size of the icon, in pixels. */
+    size: {
+      type: Number,
+      default: 60
+    }
+  },
+  computed: {
+    iconStyle(){
+      return {
+        width: `${this.size}px`,
+        height: `${this.size}px`
+      }
     }
   }
 }
@@ -25,10 +39,9 @@ export default {
 @import "../mixins/svg-uri";
 .ecs-state-icon{
-  width: 60px;
-  height: 60px;
   background: $color-gray-6;
   border-radius: 100%;
+  position: relative;
   &.vibrant{
     background: $color-blue-8;
@@ -41,111 +54,113 @@ export default {
   &:before{
     content: '';
     display: block;
-    width: 60px;
-    height: 60px;
-    position: relative;
-    left: 0;
-    top: 0;
+    position: absolute;
+    inset: 0;
+    background-size: cover;
   }
   &.archive:before{
-    background: url('../../assets/images/dialog-icons/dialog-archive.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-archive.svg');
   }
   &.annotation:before{
-    background: url('../../assets/images/dialog-icons/dialog-annotation.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-annotation.svg');
   }
   &.comment:before{
-    background: url('../../assets/images/dialog-icons/dialog-comment.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-comment.svg');
+  }
+  &.command:before{
+    background-image: url('../../assets/images/dialog-icons/dialog-command.svg');
   }
   &.document:before{
-    background: url('../../assets/images/dialog-icons/dialog-document.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-document.svg');
   }
   &.download:before{
-    background: url('../../assets/images/dialog-icons/dialog-download.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-download.svg');
   }
   &.edit:before{
-    background: url('../../assets/images/dialog-icons/dialog-edit.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-edit.svg');
   }
   &.entry-add:before{
-    background: url('../../assets/images/dialog-icons/dialog-entry-add.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-entry-add.svg');
   }
   &.error:before{
-    background: url('../../assets/images/dialog-icons/dialog-error.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-error.svg');
   }
   &.folder-add:before{
-    background: url('../../assets/images/dialog-icons/dialog-folder-add.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-folder-add.svg');
   }
   &.folder-remove:before{
-    background: url('../../assets/images/dialog-icons/dialog-folder-remove.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-folder-remove.svg');
   }
   &.organization:before{
-    background: url('../../assets/images/dialog-icons/dialog-organization.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-organization.svg');
   }
   &.security:before{
-    background: url('../../assets/images/dialog-icons/dialog-security.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-security.svg');
   }
   &.tag:before{
-    background: url('../../assets/images/dialog-icons/dialog-tag.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-tag.svg');
   }
   &.translation:before{
-    background: url('../../assets/images/dialog-icons/dialog-translation.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-translation.svg');
   }
   &.upload:before{
-    background: url('../../assets/images/dialog-icons/dialog-upload.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-upload.svg');
   }
   &.user:before{
-    background: url('../../assets/images/dialog-icons/dialog-user.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-user.svg');
   }
   &.video:before{
-    background: url('../../assets/images/dialog-icons/dialog-video.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-video.svg');
   }
   &.flag:before{
-    background: url('../../assets/images/dialog-icons/dialog-flag.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-flag.svg');
   }
   &.rate:before{
-    background: url('../../assets/images/dialog-icons/dialog-rate.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-rate.svg');
   }
   &.search:before{
-    background: url('../../assets/images/dialog-icons/dialog-search.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-search.svg');
   }
   &.merge:before{
-    background: url('../../assets/images/dialog-icons/dialog-merge.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-merge.svg');
   }
   &.sync:before{
-    background: url('../../assets/images/dialog-icons/dialog-sync.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-sync.svg');
   }
   &.link:before{
-    background: url('../../assets/images/dialog-icons/dialog-link.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-link.svg');
   }
   &.field:before{
-    background: url('../../assets/images/dialog-icons/dialog-field.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-field.svg');
   }
   &.table:before{
-    background: url('../../assets/images/dialog-icons/dialog-table.svg');
+    background-image: url('../../assets/images/dialog-icons/dialog-table.svg');
   }
 }

package/src/stories/Changelog.stories.mdx CHANGED Viewed

@@ -6,6 +6,20 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
+## Version 6.2.2 (15 May 2023)
+### Features
+- Added new EcsStateIcon component
+- Refactored EcsDialogHeader component to use new EcsStateIcon component for icons
+- Allow favicons to be used in EcsDirectoryEntry component
+### Fixes
+- Added missing command icons to EcsStateIcon component
+- Removed legacy Relativity illustration
+- Fixed the EcsDialog content overflow bug
 ## Version 6.1.3 (8 May 2023)
 ### Fixes

package/src/stories/directory-entry/directory-entry.stories.js CHANGED Viewed

@@ -28,3 +28,12 @@ export const directoryEntryIndicator = () => ({
               Active
             </ecs-directory-entry>`,
 });
+export const directoryEntryFavicon = () => ({
+  components: { EcsDirectoryEntry },
+  template: `
+              <ecs-directory-entry favicon="twitter">
+                <a href="https://twitter.com">@twitteruser</a>
+              </ecs-directory-entry>
+              `
+});

package/src/stories/state-icon/state-icon.stories.js CHANGED Viewed

@@ -19,3 +19,12 @@ export const StateIconColors = () => ({
     <ecs-state-icon type="table" icon-color="danger" />
     </main>`,
 });
+export const StateIconSize = () => ({
+  components: { EcsStateIcon },
+  template: `
+    <main>
+      <ecs-state-icon type="table" :size="30" />
+      <ecs-state-icon type="table" :size="100" />
+    </main>`,
+});