@everchron/ec-shards 7.5.5 → 7.5.7

package/package.json

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

package/src/components/pagination/pagination.vue

@@ -8,7 +8,7 @@
         </ecs-flex-row>
         <ecs-flex-row :gap="4">
           <span>Page</span>
-          <ecs-select :value="updatedCurrentPage" @change="$emit('updatePage', Number(updatedCurrentPage))" :disabled="!totalPages" size="sml">
+          <ecs-select v-model="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 :value="updatedItemsPerPageSelected" @change="$emit('itemsPerPage', Number(updatedItemsPerPageSelected))" :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>
@@ -151,6 +151,10 @@
       itemsPerPageSelected(newVal) {
         this.updatedItemsPerPageSelected = newVal;
       },
+
+      updatedCurrentPage(newVal) {
+        this.$emit('updatePage', Number(newVal))
+      },
     }
   }
 </script>

package/src/components/select/select.vue

@@ -5,8 +5,6 @@
             @focus="$emit('focus', $event)"
             @blur="$emit('blur', $event)"
             v-bind="{ id, name, disabled, required }"
-            :id="id"
-            :name="name"
             v-model="currentValue">
       <slot></slot>
     </select>
@@ -56,8 +54,7 @@ export default {
   data() {
     return {
       hasPlaceholder: false,
-      currentValue: this.value || '',
-      setValue: this.value || ''
+      currentValue: this.value || ''
     }
   },
 
@@ -105,15 +102,14 @@ export default {
   watch: {
     value: function(newValue) {
       const select = this.$refs.select;
-
       const option = Array.from(select.options).find((option) => option.value === newValue);
+
       if (option) {
         option.selected = true
-        if (newValue !== this.currentValue) {
-          this.currentValue = newValue
-          this.$emit('input', this.currentValue)
-          this.$emit('change', { target: { value: newValue } });
-        }
+      }
+
+      if (newValue !== this.currentValue) {
+        this.currentValue = newValue
       }
     }
   }

package/src/stories/pagination/pagination.stories.js

@@ -9,8 +9,24 @@ export default {
 
 export const floatingPagination = () => ({
   components: { EcsPagination },
+  data () {
+    return {
+      currentPage: 2,
+      totalPages: 10,
+      itemsPerPageSelected: 50,
+    };
+  },
   template: `<div style="display:flex;flex-direction:column;height: 200px;justify-content: flex-end;">
-              <ecs-pagination floating :current-page="2" :total-pages="10" />
+              <ecs-pagination
+                @nextPage="currentPage++"
+                @prevPage="currentPage--"
+                @updatePage="currentPage = $event"
+                @itemsPerPage="itemsPerPageSelected = $event"
+                floating
+                :current-page="currentPage"
+                :total-pages="totalPages"
+                :items-per-page-selected="itemsPerPageSelected"
+              />
             </div>`,
 });