@everchron/ec-shards 0.6.45 → 0.6.49

package/package.json

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

package/src/components/form-group/form-group.vue

@@ -62,23 +62,14 @@
       color: darken($blue-10, 10%);
     }
   }
-}
-
-.ecs-form-check-group .ecs-form-text{
-  margin-top: 0;
-}
 
-.ecs-form-group.error{
-  .ecs-form-text{
+  &.error{
     color: $red-9;
   }
+}
 
-  .ecs-form-control,
-  .ecs-form-control:focus,
-  .ecs-form-select{
-    box-shadow: none;
-    border-color: $red-9;
-  }
+.ecs-form-check-group .ecs-form-text{
+  margin-top: 0;
 }
 
 .label{
@@ -92,9 +83,6 @@ label{
   font-size: 14px;
   line-height: 1.6em;
   margin-bottom: $form-text-margin-bottom;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 
   > a{
@@ -115,3 +103,20 @@ label{
   }
 }
 </style>
+
+<style lang="scss">
+@import "../tokens/tokens";
+
+.ecs-form-group.error{
+  .ecs-form-text{
+    color: $red-9;
+  }
+
+  .ecs-form-control,
+  .ecs-form-control:focus,
+  .ecs-form-select{
+    box-shadow: none;
+    border-color: $red-9;
+  }
+}
+</style>

package/src/components/input/input.vue

@@ -14,7 +14,8 @@
     :class="[
       sizeClass,
       formatClass,
-      subtle ? `ecs-form-control-subtle` : null
+      subtle ? 'ecs-form-control-subtle' : null,
+      error ? 'ecs-form-control-error' : null
     ]"
     v-bind="$attrs"
     :min="min"
@@ -34,7 +35,8 @@
       sizeClass,
       formatClass,
       cssClass,
-      subtle ? `ecs-form-control-subtle` : null
+      subtle ? 'ecs-form-control-subtle' : null,
+      error ? 'ecs-form-control-error' : null
     ]"
     v-bind="$attrs"
     :ref="refr"
@@ -89,6 +91,10 @@
         type: Boolean,
         default: false
       },
+      error: {
+        type: Boolean,
+        default: false
+      },
       cssClass: String,
       refr: String,
       min: Number
@@ -177,6 +183,12 @@
     font-family: $mono;
   }
 
+  &-error,
+  &-error:focus{
+    box-shadow: none;
+    border-color: $red-9;
+  }
+
   &::placeholder {
     color: $gray-8;
     opacity: 1;

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

@@ -1,8 +1,9 @@
 <template>
   <div class="ecs-mf-party"
       :class="[party, shared ? 'shared' : '']">
-    <ecs-icon v-if="icon" :type="iconType" :color="iconColor" :style="'margin-right:'+iconSpacing" />
+    <ecs-icon v-if="icon && iconPosition == 'left'" :type="iconType" :color="iconColor" :style="'margin-right:'+iconSpacing" :width="iconSize" :height="iconSize" />
     <slot></slot>
+    <ecs-icon v-if="icon && iconPosition == 'right'" :type="iconType" :color="iconColor" :style="'margin-left:'+iconSpacing" :width="iconSize" :height="iconSize" />
   </div>
 </template>
 
@@ -28,7 +29,15 @@
       iconSpacing: {
         type: String,
         default: '5px'
-      }
+      },
+      iconPosition: {
+        type: String,
+        default: 'left'
+      },
+      iconSize: {
+        type: String,
+        default: '30px'
+      },
     },
 
     computed: {
@@ -75,8 +84,8 @@
 
 .ecs-mf-party{
   position: relative;
-  line-height: 30px;
   display: inline-flex;
+  align-items: center;
 
   .icon{
     flex-shrink: 0;
@@ -88,7 +97,7 @@
     position: absolute;
     content: "";
     left: 16px;
-    top: 15px;
+    top: 16px;
     background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11"><g fill="none" fill-rule="evenodd"><circle cx="5.5" cy="5.5" r="5.5" fill="#FFFFFF"/><path fill="#5A80F4" fill-rule="nonzero" d="M5.5,9 C7.43299662,9 9,7.43299662 9,5.5 C9,3.56700338 7.43299662,2 5.5,2 C3.56700338,2 2,3.56700338 2,5.5 C2,7.43299662 3.56700338,9 5.5,9 Z M5.5,10 C3.01471863,10 1,7.98528137 1,5.5 C1,3.01471863 3.01471863,1 5.5,1 C7.98528137,1 10,3.01471863 10,5.5 C10,7.98528137 7.98528137,10 5.5,10 Z"/><circle cx="5.531" cy="5.4" r="1.277" stroke="#5E83F5"/><path stroke="#5E83F5" d="M3.62307692,9.04615385 L3.62307692,8.6 C3.62307692,7.53846154 4.48461538,6.69230769 5.53076923,6.69230769 C6.57692308,6.69230769 7.43846154,7.55384615 7.43846154,8.6 L7.43846154,9.04615385"/></g></svg>');
     opacity: 0;
     transition: .3s;

package/src/components/quicklink/quicklink.vue

@@ -7,14 +7,14 @@
     </label>
 
     <div v-else-if="type === 'favorability'" class="ecs-form-check" @click="$emit('click', $event)">
-      <ecs-rating-favorability :type="favorabilityType" rating="Good" :label="false" />
+      <ecs-rating-favorability :type="favorabilityType" rating="Good" :label="false" :disabled="disabled" />
       <label class="ml-3">
         <span class="static-label">{{label}}</span>
       </label>
       <small v-if="count" class="filter-count">{{count}}</small>
     </div>
 
-    <ecs-checkbox v-else @input="$emit('input', $event)" :value="value" :value-false="valueFalse" :value-true="valueTrue">
+    <ecs-checkbox v-else @input="$emit('input', $event)" :value="value" :value-false="valueFalse" :value-true="valueTrue" :disabled="disabled">
       <template v-if="type === 'rating'">
         <ecs-rating-star-read :rating="rating" />
       </template>
@@ -81,7 +81,8 @@
         default: null,
         required: false,
         type: [Date, Number, String, Boolean]
-      }
+      },
+      disabled: Boolean
     },
 
     computed: {

package/src/stories/input/input.stories.js

@@ -43,4 +43,4 @@ export const inputFormat = () => ({
   template: `<div>
               <ecs-input placeholder="Enter some ID" format="id" />
             </div>`,
-});
+});

package/src/stories/party-entry/party-entry.stories.js

@@ -13,7 +13,7 @@ export const partyEntry = () => ({
 export const partyEntryTypes = () => ({
   components: { EcsPartyEntry },
   template: `<main>
-              <ecs-party-entry icon="document" party="opposing">Document</ecs-party-entry>
+              <ecs-party-entry icon="document" party="opposing" icon-size="24">Document</ecs-party-entry>
               <ecs-party-entry icon="sequence" party="opposing">Sequence</ecs-party-entry>
               <ecs-party-entry icon="folder" party="opposing">Folder</ecs-party-entry>
               <ecs-party-entry icon="pacer" party="opposing">Pacer</ecs-party-entry>