@everchron/ec-shards 0.8.36 → 0.9.2

package/package.json

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

package/src/components/pagination/pagination.vue

@@ -21,11 +21,12 @@
 
       <div class="ecs-pagination-dropdown">
         <span>Page</span>
-        <div @click="showDropdown = !showDropdown" class="ecs-pagination-dropdown-button" :class="showDropdown ? `active` : ''">
-          {{ currentPage }}
+        <div @click="toggleDropdown" class="ecs-pagination-dropdown-button" :class="[dropdownShown ? 'active' : '', totalPages ? '' : 'disabled']">
+          <template v-if="currentPage">{{ currentPage }}</template>
+          <template v-else>-</template>
           
           <transition name="dropdown">
-            <div v-if="showDropdown" class="ecs-pagination-select scrollbar scrollbar-sml">
+            <div v-if="dropdownShown && totalPages" class="ecs-pagination-select scrollbar scrollbar-sml">
               <ecs-popover-list>
                 <ecs-popover-list-item
                   @click="$emit('update:page', n), hideDropdown"
@@ -38,7 +39,7 @@
             </div>
           </transition>
         </div>
-        <span class="total">of {{ totalPages }}</span>
+        <span v-if="totalPages" class="total">of {{ totalPages }}</span>
       </div>
     </div>
     <div>
@@ -72,23 +73,26 @@
       },
       currentPage: {
         type: Number,
-        required: true
       },
       totalPages: {
         type: Number,
-        required: true
       }
     },
 
     data() {
       return {
-        showDropdown: false
+        dropdownShown: false
       }
     },
 
     methods: {
+      toggleDropdown(){
+        if(this.totalPages)
+          this.dropdownShown = !this.dropdownShown
+      },
+
       hideDropdown(){
-        showDropdown = false
+        this.dropdownShown = false
       }
     }
   }
@@ -146,10 +150,11 @@
       padding: 0 8px;
       height: 32px;
       transition: .2s;
-      border-radius: 3px;
+      border-radius: 4px;
       margin: 0 6px;
       cursor: pointer;
       position: relative;
+      color: $gray-15;
 
       &:after{
         content: "";
@@ -169,6 +174,13 @@
         box-shadow: 0 1px 0 rgba($gray-2, .1) inset;
         background: rgba($gray-5, .1);
       }
+
+      &.disabled{
+        border: 1px solid $gray-3;
+        box-shadow: none;
+        cursor: not-allowed;
+        color: $gray-7;
+      }
     }
   }
 
@@ -180,7 +192,7 @@
     z-index: 1000;
     background-color: #fff;
     box-shadow: 0 0 0 1px rgba($gray-15, .08), 0 1px 3px 0 rgba($gray-15, 0.15); 
-    border-radius: 4px;
+    border-radius: 6px;
     max-height: 30vh;
     overflow: auto;
   }

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

@@ -1,17 +1,11 @@
 <template>
-  <div class="ecs-party-entry"
-      :class="[
-                party,
-                shared ? 'shared' : '',
-                background ? 'ecs-party-entry-background' : '',
-                annotationColor ? 'annotation' : ''
-              ]"
-      :style="annotationStyles">
+  <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" />
     <span>
       <slot></slot>
     </span>
     <ecs-icon v-if="icon && iconPosition == 'right'" :type="iconType" :color="iconColor" :style="'margin-left:'+iconSpacing" :width="iconSize" :height="iconSize" />
+    <div v-if="background" class="ecs-party-entry-background" />
   </div>
 </template>
 
@@ -49,10 +43,9 @@
         type: String,
         default: '30px'
       },
-      annotationColor: {
-        type: Number,
-        default: null
-      },
+      color: {
+        type: String
+      }
     },
 
     computed: {
@@ -71,84 +64,10 @@
         }
       },
 
-      annotationBackgroundColor() {
-        switch (this.annotationColor){
-          case 1:
-            return 'rgba(249, 223, 0, 0.2)'
-          case 2:
-            return 'rgba(243, 161, 0, 0.2)'
-          case 3:
-            return 'rgba(183, 234, 128, 0.2)'
-          case 4:
-            return 'rgba(72, 228, 194, 0.2)'
-          case 5:
-            return 'rgba(72, 157, 255, 0.2)'
-          case 6:
-            return 'rgba(184, 119, 240, 0.2)'
-          case 7:
-            return 'rgba(253, 120, 253, 0.2)'
-          case 8:
-            return 'rgba(197, 148, 101, 0.2)'
-          case 9:
-            return 'rgba(133, 142, 159, 0.2)'
-          case 10:
-            return 'rgba(238, 84, 82, 0.2)'
-          case 11:
-            return 'rgba(34, 127, 211, 0.2)'
-          case 12:
-            return 'rgba(93, 175, 0, 0.2)'
-          case 13:
-            return 'rgba(164, 146, 122, 0.2)'
-          case 14:
-            return 'rgba(149, 152, 156, 0.2)'
-          case 15:
-            return 'rgba(215, 139, 33, 0.2)'
-          default:
-            return 'rgba(17, 17, 17, 0.2)'
-        }
-      },
-
-      annotationIconColor() {
-        switch (this.annotationColor){
-          case 1:
-            return '#F9DF00'
-          case 2:
-            return '#F3A100'
-          case 3:
-            return '#B7EA80'
-          case 4:
-            return '#48E4C2'
-          case 5:
-            return '#489DFF'
-          case 6:
-            return '#B877F0'
-          case 7:
-            return '#FD78FD'
-          case 8:
-            return '#C59465'
-          case 9:
-            return '#858E9F'
-          case 10:
-            return '#EE5452'
-          case 11:
-            return '#227FD3'
-          case 12:
-            return '#5DAF00'
-          case 13:
-            return '#A4927A'
-          case 14:
-            return '#95989C'
-          case 15:
-            return '#D78B21'
-          default:
-            return '#111111'
-        }
-      },
-
       iconColor() {
-        if (this.annotationColor){
-          return this.annotationIconColor
-        } else {
+        if (this.color){
+          return this.color
+        } else if(this.party) {
           switch (this.party){
             case 'client':
               return '#227FD3'
@@ -165,15 +84,8 @@
             default:
               return '#C1C2C4'
           }
-        }
-      },
-
-      annotationStyles() {
-        if (this.annotationColor){
-          return {
-            'background-color': this.annotationBackgroundColor,
-            'color': this.annotationIconColor
-          }
+        } else {
+          return '#000'
         }
       }
     }
@@ -188,16 +100,27 @@
   position: relative;
   display: inline-flex;
   align-items: center;
+  z-index: 0;
+  overflow: hidden;
 
-  .icon{
-    flex-shrink: 0;
+  &-colored{
+    .icon,
+    > span{
+      filter: brightness(.55) contrast(1.5);
+    }
   }
 
-  &.annotation{
-    > span,
-    .icon{
-      filter: brightness(65%);
-    }
+  &-background{
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: currentColor;
+    opacity: .1;
+    filter: saturate(2);
+  }
+
+  .icon{
+    flex-shrink: 0;
   }
 
   &:after{
@@ -216,10 +139,6 @@
     opacity: 1;
   }
 
-  &:not(.ecs-party-entry-background){
-    background: transparent !important;
-  }
-
   &.client{
     color: $party-client-text;
   }
@@ -243,31 +162,5 @@
   &.unaffiliated{
     color: $party-other-text;
   }
-
-  &-background{
-    &.client{
-      background-color: $party-client-background;
-    }
-
-    &.opposing{
-      background-color: $party-opposition-background;
-    }
-
-    &.joint{
-      background-color: $party-joint-background;
-    }
-
-    &.other{
-      background-color: $party-other-background;
-    }
-
-    &.court{
-      background-color: $party-court-background;
-    }
-
-    &.unaffiliated{
-      background-color: $party-other-background;
-    }
-  }
 }
 </style>

package/src/components/swatches-picker/swatches-picker.vue

@@ -2,12 +2,12 @@
 <template>
   <div class="ecs-swatches" :class="sizeClass">
     <div
-      v-for="item in swatches" :key="item.color"
-      @click="selectedColor = item.color"
+      v-for="item in swatches" :key="item.id"
+      @click="selectedColor = item.hex"
       :title="item.title"
       class="ecs-swatches-color"
-      :style="{backgroundColor: item.color, color: item.color}"
-      :class="selectedColor == item.color ? 'active' : ''">
+      :style="{backgroundColor: item.hex, color: item.hex}"
+      :class="selectedColor == item.hex ? 'active' : ''">
     </div>
   </div>
 </template>
@@ -23,30 +23,17 @@
       },
       /** Sets the selected color value. Must be a HEX value that exists in the swatches (data) list. */
       selected: {
-        type: String,
-        validator: v => ['#F9DF00', '#F3A100', '#B7EA80', '#48E4C2', '#489DFF', '#B877F0', '#FD78FD', '#858E9F', '#227FD3', '#C59465', '#5DAF00', '#A4927A', '#95989C', '#D78B21', '#EE5452', 'null', null].includes(v)
+        type: String
+      },
+      /** The available color swatches the user can choose from. Array structure: contains Objects with `id`, `title`, `hex`. */
+      swatches: {
+        type: Array,
+        required: true
       }
     },
 
     data () {
       return {
-        swatches: [
-          { title: 'Yellow',    color: '#F9DF00' },
-          { title: 'Orange',    color: '#F3A100' },
-          { title: 'Lime',      color: '#B7EA80' },
-          { title: 'Cyan',      color: '#48E4C2' },
-          { title: 'Sky Blue',  color: '#489DFF' },
-          { title: 'Indigo',    color: '#B877F0' },
-          { title: 'Pink',      color: '#FD78FD' },
-          { title: 'Brown',     color: '#C59465' },
-          { title: 'Gray',      color: '#858E9F' },
-          { title: 'Red',       color: '#EE5452' },
-          { title: 'Dark Blue', color: '#227FD3' },
-          { title: 'Green',     color: '#5DAF00' },
-          { title: 'Brass',     color: '#A4927A' },
-          { title: 'Silver',    color: '#95989C' },
-          { title: 'Gold',      color: '#D78B21' }
-        ],
         selectedColor: this.selected,
         selectedTitle: ''
       }
@@ -62,29 +49,22 @@
 
     methods: {
       emitSelected(){
-        /** Returns the selected color value and title as Object.
-        this.$emit('input', {
-          color: this.selectedColor,
-          title: this.selectedTitle
-        })
-        */
+        /** Returns the selected color value as HEX. */
         this.$emit('input', this.selectedColor)
       }
     },
 
-    /*
-    mounted () {
-      if (this.selected)
-        this.selectedTitle = this.swatches[this.swatches.findIndex(x => x.color === this.selectedColor)].title
-        this.emitSelected()
-    },
-    */
-
     watch: {
       selectedColor(){
-        this.selectedTitle = this.swatches[this.swatches.findIndex(x => x.color === this.selectedColor)].title
+        this.selectedTitle = this.swatches[this.swatches.findIndex(x => x.hex === this.selectedColor)].title
         this.emitSelected()
       }
+    },
+
+    mounted () {
+      if (this.selected)
+        this.selectedTitle = this.swatches[this.swatches.findIndex(x => x.hex === this.selectedColor)].title
+        this.emitSelected()
     }
   }
 </script>

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

@@ -49,14 +49,16 @@ export const partyEntryWithBackground = () => ({
 export const partyEntryAnnotations = () => ({
   components: { EcsPartyEntry },
   template: `<main>
-              <ecs-party-entry background icon="marker" :annotation-color="1">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="2">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="3">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="4">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="5">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="6">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="7">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="8">Annotation</ecs-party-entry>
-              <ecs-party-entry background icon="marker" :annotation-color="9">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#F9DF00">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#F3A100">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#B7EA80">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#48E4C2">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#489DFF">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#B877F0">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#FD78FD">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#858E9F">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" color="#EE5452">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker">No Color Defined</ecs-party-entry>
+              <ecs-party-entry icon="marker" color="#EE5452">Annotation</ecs-party-entry>
             </main>`,
 });

package/src/stories/swatches-picker/swatches-picker.stories.js

@@ -9,13 +9,90 @@ export const SwatchesPicker = () => ({
   components: { EcsSwatchesPicker },
   data() {
     return {
-      selectedColor: ''
+      selectedColor: '',
+      swatchesData: [
+        {
+          "id": 1,
+          "title": "Yellow",
+          "hex": "#F9DF00"
+        },
+        {
+          "id": 2,
+          "title": "Orange",
+          "hex": "#F3A100"
+        },
+        {
+          "id": 3,
+          "title": "Lime",
+          "hex": "#B7EA80"
+        },
+        {
+          "id": 4,
+          "title": "Cyan",
+          "hex": "#48E4C2"
+        },
+        {
+          "id": 5,
+          "title": "Blue",
+          "hex": "#489DFF"
+        },
+        {
+          "id": 6,
+          "title": "Indigo",
+          "hex": "#B877F0"
+        },
+        {
+          "id": 7,
+          "title": "Pink",
+          "hex": "#FD78FD"
+        },
+        {
+          "id": 8,
+          "title": "Brown",
+          "hex": "#C59465"
+        },
+        {
+          "id": 9,
+          "title": "Grey",
+          "hex": "#858E9F"
+        },
+        {
+          "id": 10,
+          "title": "Red",
+          "hex": "#EE5452"
+        },
+        {
+          "id": 11,
+          "title": "Dark Blue",
+          "hex": "#227FD3"
+        },
+        {
+          "id": 12,
+          "title": "Green",
+          "hex": "#5DAF00"
+        },
+        {
+          "id": 13,
+          "title": "Brass",
+          "hex": "#A4927A"
+        },
+        {
+          "id": 14,
+          "title": "Silver",
+          "hex": "#95989C"
+        },
+        {
+          "id": 15,
+          "title": "Gold",
+          "hex": "#D78B21"
+        }
+      ]
     }
   },
   template: `<div>
-              <ecs-swatches-picker v-model="selectedColor" selected="#F9DF00" />
+              <ecs-swatches-picker v-model="selectedColor" selected="#F9DF00" :swatches="swatchesData" />
               <hr style="border: none; border-bottom: 1px solid #DADEE6; margin: 20px 0">
-              Selected: {{ selectedColor.title }}, {{ selectedColor.color }}
+              Selected: {{ selectedColor }}
             </div>`,
 });
 
@@ -23,12 +100,89 @@ export const SwatchesPickerSizes = () => ({
   components: { EcsSwatchesPicker },
   data() {
     return {
-      selectedColor: ''
+      selectedColor: '',
+      swatchesData: [
+        {
+          "id": 1,
+          "title": "Yellow",
+          "hex": "#F9DF00"
+        },
+        {
+          "id": 2,
+          "title": "Orange",
+          "hex": "#F3A100"
+        },
+        {
+          "id": 3,
+          "title": "Lime",
+          "hex": "#B7EA80"
+        },
+        {
+          "id": 4,
+          "title": "Cyan",
+          "hex": "#48E4C2"
+        },
+        {
+          "id": 5,
+          "title": "Blue",
+          "hex": "#489DFF"
+        },
+        {
+          "id": 6,
+          "title": "Indigo",
+          "hex": "#B877F0"
+        },
+        {
+          "id": 7,
+          "title": "Pink",
+          "hex": "#FD78FD"
+        },
+        {
+          "id": 8,
+          "title": "Brown",
+          "hex": "#C59465"
+        },
+        {
+          "id": 9,
+          "title": "Grey",
+          "hex": "#858E9F"
+        },
+        {
+          "id": 10,
+          "title": "Red",
+          "hex": "#EE5452"
+        },
+        {
+          "id": 11,
+          "title": "Dark Blue",
+          "hex": "#227FD3"
+        },
+        {
+          "id": 12,
+          "title": "Green",
+          "hex": "#5DAF00"
+        },
+        {
+          "id": 13,
+          "title": "Brass",
+          "hex": "#A4927A"
+        },
+        {
+          "id": 14,
+          "title": "Silver",
+          "hex": "#95989C"
+        },
+        {
+          "id": 15,
+          "title": "Gold",
+          "hex": "#D78B21"
+        }
+      ]
     }
   },
   template: `<div>
-              <ecs-swatches-picker v-model="selectedColor" size="sml" selected="#F9DF00" />
-              <ecs-swatches-picker v-model="selectedColor" size="md" selected="#F9DF00" />
-              <ecs-swatches-picker v-model="selectedColor" size="lg" selected="#F9DF00" />
+              <ecs-swatches-picker v-model="selectedColor" size="sml" :swatches="swatchesData" selected="#D78B21" />
+              <ecs-swatches-picker v-model="selectedColor" size="md" :swatches="swatchesData" selected="#F9DF00" />
+              <ecs-swatches-picker v-model="selectedColor" size="lg" :swatches="swatchesData" selected="#F9DF00" />
             </div>`,
 });