@everchron/ec-shards 7.5.6 → 7.5.8

package/package.json

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

package/src/components/jumper-page/jumper-page.vue

@@ -8,7 +8,7 @@
             {{ currentPage }}
           </div>
           <div class="total-pages">of {{ lastPage }}</div>
-          <span v-if="isTranscriptMissingPages" style="color:tomato" title="This transcript has missing page gaps">*</span>
+          <span v-if="isTranscriptMissingPages" class="page-missing-gaps" title="This transcript has missing page gaps">*</span>
         </div>
         <div class="ecs-viewer-pages-pagination">
           <div class="total-pages-relative">{{ altPageNumber }}&nbsp;</div>
@@ -160,4 +160,12 @@
   color: $color-gray-8;
   margin-top: 4px;
 }
+
+.page-missing-gaps{
+  color: $color-red-7;
+  font-size: $type-scale-5-font-size;
+  margin: -6px 0 0 0px;
+  padding: 2px;
+  cursor: help;
+}
 </style>

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 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>
@@ -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/jumper-page/jumper-page.stories.js

@@ -14,3 +14,8 @@ export const jumperPageRelative = () => ({
   components: { EcsJumperPage },
   template: `<ecs-jumper-page :current-page="2" :page-count="70" :relative-page="40" :last-page="80" />`,
 });
+
+export const jumperPageRelativeWithPageMissing = () => ({
+  components: { EcsJumperPage },
+  template: `<ecs-jumper-page :current-page="2" :page-count="70" :relative-page="40" :last-page="80" isTranscriptMissingPages />`,
+});

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