@everchron/ec-shards 7.5.2 → 7.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "7.5.2",
+  "version": "7.5.4",
   "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 v-model="updatedCurrentPage" @change="$emit('updatePage', Number(updatedCurrentPage))" :disabled="!totalPages" size="sml">
+          <ecs-select :value="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 v-model="updatedItemsPerPageSelected" @change="$emit('itemsPerPage', Number(updatedItemsPerPageSelected))" :disabled="loading" size="sml">
+      <ecs-select :value="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>

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}
       ]
     }
   },

package/dist/demo.html

@@ -1,10 +0,0 @@
-<meta charset="utf-8">
-<title>ec-shards demo</title>
-<script src="./ec-shards.umd.js"></script>
-
-<link rel="stylesheet" href="./ec-shards.css">
-
-
-<script>
-console.log(ec-shards)
-</script>