@everchron/ec-shards 1.3.6 → 1.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "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>
@@ -76,24 +77,27 @@
       /** The current page. */
       currentPage: {
         type: Number,
-        required: true
       },
       /** The total pages of the index. */
       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
       }
     }
   }
@@ -155,6 +159,7 @@
       margin: 0 6px;
       cursor: pointer;
       position: relative;
+      color: $color-gray-15;
 
       &:after{
         content: "";
@@ -174,6 +179,13 @@
         box-shadow: 0 1px 0 rgba($color-gray-2, .1) inset;
         background: rgba($color-gray-5, .1);
       }
+
+      &.disabled{
+        border: 1px solid $color-gray-3;
+        box-shadow: none;
+        cursor: not-allowed;
+        color: $color-gray-7;
+      }
     }
   }
 

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

@@ -17,34 +17,39 @@
 
 <script>
   import EcsIcon from '../icon/icon'
-
   export default {
     components: { EcsIcon },
-
     props: {
+      /** Adds an icon to the party entry. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
       icon: {
         type: String
       },
+      /** If the party entry tag should be represented by the default party side colors, set this party prop. */
       party: {
         type: String,
         validator: v => ['client', 'opposing', 'joint', 'other', 'court', 'unaffiliated'].includes(v)
       },
+      /** Renders a subtle colored background. */
       background: {
         type: Boolean,
         default: false
       },
+      /** Adds a shared badge indicator. */
       shared: {
         type: Boolean,
         default: false
       },
+      /** Determines the spacing between icon and text. */
       iconSpacing: {
         type: String,
         default: '5px'
       },
+      /** Determines the position of the icon. */
       iconPosition: {
         type: String,
         default: 'left'
       },
+      /** Determines the size of the icon. */
       iconSize: {
         type: String,
         default: '30px'
@@ -55,7 +60,7 @@
       },
     },
 
-    computed: {
+computed: {
       iconType() {
         switch (this.icon){
           case 'sequence':
@@ -71,7 +76,7 @@
         }
       },
 
-      annotationBackgroundColor() {
+annotationBackgroundColor() {
         switch (this.annotationColor){
           case 1:
             return 'rgba(249, 223, 0, 0.2)'
@@ -183,7 +188,6 @@
 <style lang="scss" scoped>
 @import "../../tokens/build/scss/tokens.scss";
 @import "../mixins/svg-uri";
-
 .ecs-party-entry{
   position: relative;
   display: inline-flex;
@@ -219,7 +223,7 @@
   &:not(.ecs-party-entry-background){
     background: transparent !important;
   }
-
+  
   &.client{
     color: $color-party-client-content;
   }
@@ -264,7 +268,7 @@
     &.court{
       background-color: $color-party-court-background;
     }
-
+    
     &.unaffiliated{
       background-color: $color-party-other-background;
     }

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,27 +49,14 @@
 
     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()
       }
     }

package/src/stories/Changelog.stories.mdx

@@ -6,11 +6,12 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
-## Version 1.3.3 (27 August 2022)
+## Version 1.3.6 (29 August 2022)
 
-### Changes
+### Fixes
 
-- Added flexDirection prop to EcsTabs component.
+- Added flex and flexDirection prop to EcsTab component.
+- Removed flex and flexDirection props from EcsTabs component.
 
 ## Version 1.3.2 (27 August 2022)
 

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>`,
 });