@everchron/ec-shards 7.5.0 → 7.5.2

package/package.json

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

package/src/components/banner/banner.vue

@@ -2,7 +2,7 @@
   <div
     v-if="show"
     class="ecs-banner"
-    :class="[type, fixed]"
+    :class="[type, { fixed: fixed }]"
     role="alert"
   >
     <slot></slot>

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