logical CSS properties for rtl

Author: MosheL

package.json

@@ -58,7 +58,7 @@
     "sinon": "^11.1.2",
     "typescript": "^4.4.4",
     "vite": "^2.6.13",
-    "vue": "^3.2.20",
+    "vue": "^3.5.13",
     "vue-jest": "^5.0.0-0",
     "vuepress": "^2.0.0-rc.15",
     "webpack-node-externals": "^3.0.0"

src/components/VgtGlobalSearch.vue

@@ -1,17 +1,17 @@
 <template>
 <div v-if="showControlBar" class="vgt-global-search vgt-clearfix">
-  <div class="vgt-global-search__input vgt-pull-left">
+  <div class="vgt-global-search__input vgt-pull-start">
     <form @submit.prevent v-if="searchEnabled" role="search">
       <label :for="id">
         <span aria-hidden="true" class="input__icon">
-          <div class="magnifying-glass"></div>
+        <div class="magnifying-glass"></div>
         </span>
         <span class="sr-only">Search</span>
       </label>
     <input
       :id="id"
       type="text"
-      class="vgt-input vgt-pull-left"
+      class="vgt-input vgt-pull-start"
       :placeholder="globalSearchPlaceholder"
       :value="value"
       @input="updateValue($event.target.value)"

src/components/VgtHeaderRow.vue

@@ -55,24 +55,24 @@
   >
     <th
       v-if="headerRow.mode !== 'span' && !column.hidden"
-      class="vgt-row-header"
-      :class="getClasses(i, 'td')"
+    class="vgt-row-header"
+    :class="getClasses(i, 'td')"
       @click="columnCollapsable(i) ? $emit('vgtExpand', !headerRow.vgtIsExpanded) : () => {}"
     >
-      <span v-if="columnCollapsable(i)" class="triangle" :class="{ 'expand': headerRow.vgtIsExpanded }"></span>
-      <slot
+    <span v-if="columnCollapsable(i)" class="triangle" :class="{ 'expand': headerRow.vgtIsExpanded }"></span>
+    <slot
         name="table-header-row"
-        :row="headerRow"
-        :column="column"
-        :formattedRow="formattedRow(headerRow, true)"
+      :row="headerRow"
+      :column="column"
+      :formattedRow="formattedRow(headerRow, true)"
       >
-        <span v-if="!column.html">
-          {{ collectFormatted(headerRow, column, true) }}
-        </span>
-        <span v-if="column.html" v-html="collectFormatted(headerRow, column, true)">
-        </span>
-      </slot>
-    </th>
+      <span v-if="!column.html">
+        {{ collectFormatted(headerRow, column, true) }}
+      </span>
+      <span v-if="column.html" v-html="collectFormatted(headerRow, column, true)">
+      </span>
+    </slot>
+  </th>
   </template>
 </tr>
 </template>

src/components/pagination/VgtPagination.vue

@@ -32,13 +32,28 @@
         :page-text="pageText"
         :info-fn="infoFn"
         :mode="mode" />
+      <button
+        v-if="jumpFirstOrLast"
+        type="button"
+        aria-controls="vgt-table"
+        class="footer__navigation__page-btn"
+        :class="{ disabled: !firstIsPossible }"
+        @click.prevent.stop="firstPage"
+      >
+        <span
+          aria-hidden="true"
+          class="chevron start"
+        ></span>
+        <span>{{ firstText }}</span>
+      </button>
+
       <button
         type="button"
         aria-controls="vgt-table"
         class="footer__navigation__page-btn"
         :class="{ disabled: !prevIsPossible }"
         @click.prevent.stop="previousPage">
-        <span aria-hidden="true" class="chevron" v-bind:class="{ 'left': !rtl, 'right': rtl }"></span>
+        <span aria-hidden="true" class="chevron start"></span>
         <span>{{prevText}}</span>
       </button>
 
@@ -49,7 +64,22 @@
         :class="{ disabled: !nextIsPossible }"
         @click.prevent.stop="nextPage">
         <span>{{nextText}}</span>
-        <span aria-hidden="true" class="chevron" v-bind:class="{ 'right': !rtl, 'left': rtl }"></span>
+        <span aria-hidden="true" class="chevron end"></span>
+      </button>
+
+      <button
+        v-if="jumpFirstOrLast"
+        type="button"
+        aria-controls="vgt-table"
+        class="footer__navigation__page-btn"
+        :class="{ disabled: !lastIsPossible }"
+        @click.prevent.stop="lastPage"
+      >
+        <span>{{ lastText }}</span>
+        <span
+          aria-hidden="true"
+          class="chevron end"
+        ></span>
       </button>
     </div>
   </div>
@@ -73,8 +103,11 @@ export default {
     customRowsPerPageDropdown: { default() { return []; } },
     paginateDropdownAllowAll: { default: true },
     mode: { default: PAGINATION_MODES.Records },
+    jumpFirstOrLast: { default: false },
 
     // text options
+    firstText: { default: "First" },
+    lastText: { default: "Last" },
     nextText: { default: 'Next' },
     prevText: { default: 'Prev' },
     rowsPerPageText: { default: 'Rows per page:' },
@@ -104,8 +137,8 @@ export default {
 
     customRowsPerPageDropdown: {
       handler() {
-        this.handlePerPage();
-      },
+      this.handlePerPage();
+    },
       deep: true,
     },
 
@@ -121,12 +154,26 @@ export default {
   computed: {
     // Number of pages
     pagesCount() {
+      // if the setting is set to 'all'
+      if(this.currentPerPage === -1) {
+        return 1;
+      }
       const quotient = Math.floor(this.total / this.currentPerPage);
       const remainder = this.total % this.currentPerPage;
 
       return remainder === 0 ? quotient : quotient + 1;
     },
 
+    // Can go to first page
+    firstIsPossible() {
+      return this.currentPage > 1;
+    },
+
+    // Can go to last page
+    lastIsPossible() {
+      return this.currentPage < Math.ceil(this.total / this.currentPerPage);
+    },
+
     // Can go to next page
     nextIsPossible() {
       return this.currentPage < this.pagesCount;
@@ -151,6 +198,24 @@ export default {
       }
     },
 
+    // Go to first page
+    firstPage() {
+      if (this.firstIsPossible) {
+        this.currentPage = 1;
+        this.prevPage = 0;
+        this.pageChanged();
+      }
+    },
+
+    // Go to last page
+    lastPage() {
+      if (this.lastIsPossible) {
+        this.currentPage = this.pagesCount;
+        this.prev = this.currentPage - 1;
+        this.pageChanged();
+      }
+    },
+
     // Go to next page
     nextPage() {
       if (this.nextIsPossible) {

src/components/pagination/VgtPaginationPageInfo.vue

@@ -70,6 +70,10 @@ export default {
       return ((this.currentPage - 1) * this.currentPerPage) + 1;
     },
     lastRecordOnPage() {
+      // if the setting is set to 'all'
+      if(this.currentPerPage === -1) {
+        return this.totalRecords;
+      }
       return Math.min(this.totalRecords, this.currentPage * this.currentPerPage);
     },
     recordInfo() {
@@ -93,7 +97,7 @@ export default {
         lastRecordOnPage: last,
         totalRecords: this.totalRecords,
         currentPage: this.currentPage,
-        totalPages: this.lastPage,
+        totalPage: this.lastPage,
       };
     },
   },

src/components/types/date.js

@@ -5,23 +5,10 @@ const date = Object.assign({}, def);
 
 date.isRight = true;
 
-/**
- * Compare the two dates and return 1 if the first date is after the second, -1 if the first date is before the second or 0 if dates are equal.
- * @param {*} x Date 1
- * @param {*} y Date 2
- * @param {Object} column Additional parameters (e.g. dateInputFormat, dateOutputFormat)
- * @returns 
- */
 date.compare = function (x, y, column) {
   function cook(d) {
     if (column && column.dateInputFormat) {
       return parse(`${d}`, `${column.dateInputFormat}`, new Date());
-    } else if (typeof d === 'string') {
-      try {
-        return Date.parse(d);
-      } catch(err) {
-        return d;
-      }
     }
     return d;
   }

src/styles/_bordered.scss

@@ -1,8 +1,10 @@
+@use "variables";
+
 .vgt-table{
   &.bordered td, &.bordered th {
-      border: 1px solid $border-color;
+      border: 1px solid variables.$border-color;
   }
   &.bordered th.vgt-row-header{
-    border-bottom: 3px solid $border-color;
+    border-bottom: 3px solid variables.$border-color;
   }
 }

src/styles/_compact.scss

@@ -23,7 +23,7 @@
       &:before {
         content: attr(data-label);
         position: relative;
-        float: left;
+        float: inline-start;
         left: 0;
         width: 40%;
         padding-left: 10px;

src/styles/_control-bar.scss

@@ -1,11 +1,14 @@
+@use "variables";
+@use 'sass:color';
+
 .vgt-global-search{
   padding: 5px 0px;
   display: flex;
   flex-wrap: nowrap;
   align-items: stretch;
-  border:  1px solid $border-color;
+  border:  1px solid variables.$border-color;
   border-bottom: 0px;
-  background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
+  background: linear-gradient(variables.$thead-bg-color-1, variables.$thead-bg-color-2);
   form {
     display: flex;
     label {
@@ -56,13 +59,13 @@
 }
 
 .vgt-selection-info-row{
-  background: $notify-bg-color;
+  background: variables.$notify-bg-color;
   padding: 5px 16px;
   font-size: 13px;
-  border-top:  1px solid $border-color;
-  border-left:  1px solid $border-color;
-  border-right:  1px solid $border-color;
-  color: lighten($notify-fg-color, 10%);
+  border-top:  1px solid variables.$border-color;
+  border-left:  1px solid variables.$border-color;
+  border-right:  1px solid variables.$border-color;
+  color:  color.adjust(variables.$notify-fg-color, $lightness: 10%);
   font-weight: bold;
   a{
     font-weight: bold;

src/styles/_input.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 
 .vgt-input, .vgt-select{
   width: 100%;
@@ -7,20 +9,20 @@
   font-size: 14px;
   font-weight: normal;
   padding: 6px 12px;
-  color: $text-color;
+  color: variables.$text-color;
   border-radius: 4px;
   box-sizing: border-box;
   background-image: none;
   background-color: #fff;
-  border: 1px solid $input-border-color;
+  border: 1px solid variables.$input-border-color;
   transition: border-color .2s cubic-bezier(.645,.045,.355,1);
   &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-    color: $text-color;
+    color: variables.$text-color;
     opacity: 0.3; /* Firefox */
   }
   &:focus{
     outline: none;
-    border-color: $link-color;
+    border-color: variables.$link-color;
   }
 }