@everchron/ec-shards 7.5.1 → 7.5.3

package/package.json

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

package/src/components/data-grid/data-grid-head-cell.vue

@@ -18,7 +18,7 @@
 
       <div v-if="firstNonStaticCell" class="first-cell-spacer" />
       <ecs-icon v-if="icon" :type="icon" size="20" color="#202127" :title="name" />
-      <ecs-select v-else-if="select" @change="$emit('selection', $event.target.value)" type="invisible">
+      <ecs-select v-else-if="select" v-model="selectCellValue" @change="$emit('selection', selectCellValue)" type="invisible">
         <option v-for="(option, index) in select" :key="index" :selected="option.selected" :value="option.value">{{ option.name }}</option>
       </ecs-select>
       <div v-else class="ecs-data-grid-head-cell-text" :title="name">
@@ -103,7 +103,8 @@
       },
       /** If passed, the head cell won't render the slot in the text, but a select menu with the passed options instead. This is useful when one column should be able to switch the data that is shown in it. For example, you could have a column with a selector in the head cell which allows you to switch between ECID, Bates Range, and Trial Exhibit No. The array needs to contain objects with `value`, `name` and `selected`. */
       select: {
-        type: Array
+        type: Array,
+        validator: v => v.every(o => o.hasOwnProperty('value') && o.hasOwnProperty('name') && o.hasOwnProperty('selected'))
       },
       /** Determines if the column should be sortable. */
       sortable: {
@@ -142,7 +143,8 @@
         resizeWidth: null,
         initialized: false,
         beingResized : false,
-        cellFixedLeftOffset: ''
+        cellFixedLeftOffset: '',
+        selectCellValue: ''
       }
     },
 
@@ -286,6 +288,19 @@
       }
     },
 
+    watch: {
+      select: {
+        handler(newVal) {
+          newVal.forEach(option => {
+            if (option.selected) {
+              this.selectCellValue = option.value
+            }
+          })
+        },
+        deep: true
+      }
+    },
+
     created(){
       this.cellFixedLeftOffset = this.fixedLeftOffset
       this.resizeObserver = new ResizeObserver(entries => {
@@ -300,6 +315,13 @@
         const resizeEls = document.querySelectorAll('[data-column="'+ this.computedId +'"]')
         resizeEls.forEach(el => { this.resizeObserver.observe(el) })
       }
+
+      if(this.select && this.select !== ''){
+        this.select.forEach(option => {
+          if(option.selected)
+            this.selectCellValue = option.value
+        })
+      }
     },
 
     destroyed(){

package/src/components/pagination/pagination.vue

@@ -8,7 +8,7 @@
         </ecs-flex-row>
         <ecs-flex-row :gap="4">
           <span>Page</span>
-          <ecs-select @change="$emit('updatePage', $event.target.value)" :disabled="!totalPages" size="sml">
+          <ecs-select v-model="updatedCurrentPage" @change="$emit('updatePage', Number(updatedCurrentPage))" :disabled="!totalPages" size="sml">
             <option v-for="n in totalPages" :key="n" :value="n" :selected="n === currentPage">{{ n }}</option>
           </ecs-select>
           <span v-if="totalPages" class="total">of {{ totalPages }}</span>
@@ -36,7 +36,7 @@
 
     <ecs-flex-row v-if="showItemsPerPage && type == 'paginated'" :gap="4" class="ecs-pagination-items">
       <span>Items per page</span>
-      <ecs-select @change="$emit('itemsPerPage', $event.target.value)" :disabled="loading" size="sml">
+      <ecs-select v-model="updatedItemsPerPageSelected" @change="$emit('itemsPerPage', Number(updatedItemsPerPageSelected))" :disabled="loading" size="sml">
         <option v-for="n in itemsPerPage" :key="n" :value="n" :selected="n === itemsPerPageSelected">{{ n }}</option>
       </ecs-select>
     </ecs-flex-row>
@@ -123,6 +123,13 @@
       }
     },
 
+    data() {
+      return {
+        updatedItemsPerPageSelected: this.itemsPerPageSelected,
+        updatedCurrentPage: this.currentPage,
+      }
+    },
+
     computed: {
       hasRange() {
         if (
@@ -134,6 +141,16 @@
           this.itemRangeTotal !== '')
           return true
       }
+    },
+
+    watch: {
+      currentPage(newVal) {
+        this.updatedCurrentPage = newVal;
+      },
+      
+      itemsPerPageSelected(newVal) {
+        this.updatedItemsPerPageSelected = newVal;
+      },
     }
   }
 </script>

package/src/components/select/select.vue

@@ -48,7 +48,9 @@ export default {
     /** Sets the `name` attribute. */
     name: String,
     /** Allows to programmatically select a specific option item via it's value. */
-    value: String
+    value: {
+      type: [String, Number]
+    }
   },
 
   data() {
@@ -95,8 +97,8 @@ export default {
     onChange(event) {
       this.currentValue = event.target.value;
       this.hasPlaceholder = false
-      this.$emit('change', event)
       this.$emit('input', this.currentValue)
+      this.$emit('change', event)
     }
   },
 
@@ -109,8 +111,8 @@ export default {
         option.selected = true
         if (newValue !== this.currentValue) {
           this.currentValue = newValue
-          this.$emit('change', { target: { value: newValue } });
           this.$emit('input', this.currentValue)
+          this.$emit('change', { target: { value: newValue } });
         }
       }
     }

package/src/stories/data-grid/data-grid-head-cell.stories.js

@@ -29,9 +29,9 @@ export const headCellSelect = () => ({
   data() {
     return {
       selectOptions: [
-        { value: 'ecid', name: 'ECID' },
+        { value: 'ecid', name: 'ECID', selected: false },
         { value: 'bates', name: 'Bates Range', selected: true },
-        { value: 'trialex', name: 'Trial Exhibit'}
+        { value: 'trialex', name: 'Trial Exhibit', selected: false}
       ]
     }
   },