quasar-ui-sellmate-ui-kit 3.0.3 → 3.0.4

package/src/components/SPagination.vue

@@ -1,266 +1,266 @@
-<template>
-  <div class="s-pagination row">
-    <div class="icons-container" v-if="paginationInfo.startPage !== 1">
-      <q-btn
-        flat
-        dense
-        round
-        :ripple="false"
-        unelevated
-        type="button"
-        align="center"
-        class="bg-transparent first-btn"
-        text-color="Grey_Darken-2"
-        :icon="paginationFirstIcon"
-        @click="updateModelValue('goFirst')"
-      />
-      <q-btn
-        flat
-        dense
-        round
-        :ripple="false"
-        unelevated
-        type="button"
-        align="center"
-        class="left-btn"
-        text-color="Grey_Darken-2"
-        :icon="paginationLeftIcon"
-        @click="updateModelValue('goLeft')"
-      />
-    </div>
-    <div class="pagination-container">
-      <q-btn
-        v-for="(p, i) in 10"
-        :key="i"
-        v-show="paginationInfo.startPage + i <= paginationInfo.lastPage"
-        flat
-        dense
-        rounded
-        no-wrap
-        unelevated
-        :ripple="false"
-        :label="paginationInfo.startPage + i"
-        text-color="Grey_Darken-2"
-        type="button"
-        align="center"
-        @click="updateModelValue(paginationInfo.startPage + i)"
-        class="pagination-btn"
-        :class="{
-          'pagination-active-btn': paginationInfo.startPage + i === paginationInfo.currentPage,
-        }"
-      />
-    </div>
-    <div class="icons-container" v-if="paginationInfo.lastPage - paginationInfo.startPage >= 10">
-      <q-btn
-        flat
-        dense
-        round
-        :ripple="false"
-        unelevated
-        type="button"
-        align="center"
-        class="right-btn"
-        text-color="Grey_Darken-2"
-        :icon="paginationRightIcon"
-        @click="updateModelValue('goRight')"
-      />
-      <q-btn
-        flat
-        dense
-        round
-        :ripple="false"
-        unelevated
-        type="button"
-        align="center"
-        class="last-btn"
-        text-color="Grey_Darken-2"
-        :icon="paginationLastIcon"
-        @click="updateModelValue('goLast')"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-  import { QBtn } from 'quasar';
-  import { defineComponent, ref, watch } from 'vue';
-  // eslint-disable-next-line
-  import {
-    paginationFirstIcon,
-    paginationLastIcon,
-    paginationLeftIcon,
-    paginationRightIcon,
-  } from '../assets/icons.js';
-
-  export default defineComponent({
-    name: 'SPagination',
-    components: {
-      QBtn,
-    },
-    props: {
-      modelValue: {
-        type: Number,
-        default: 1,
-      },
-      lastPage: {
-        type: Number,
-        default: 1,
-        required: true,
-      },
-    },
-    setup(props, { emit }) {
-      const paginationInfo = ref({
-        lastPage: props.lastPage,
-        currentPage: props.modelValue,
-        startPage: Math.floor((props.modelValue - 1) / 10) * 10 + 1,
-      });
-
-      function updateModelValue(val) {
-        if (val === 'goFirst') {
-          paginationInfo.value.startPage = 1;
-          paginationInfo.value.currentPage = 1;
-        } else if (val === 'goLeft' && paginationInfo.value.startPage - 10 > 0) {
-          paginationInfo.value.startPage -= 10;
-          paginationInfo.value.currentPage = paginationInfo.value.startPage + 9;
-        } else if (
-          val === 'goRight'
-          && paginationInfo.value.startPage + 10 <= paginationInfo.value.lastPage
-        ) {
-          paginationInfo.value.startPage += 10;
-          paginationInfo.value.currentPage = paginationInfo.value.startPage;
-        } else if (val === 'goLast') {
-          if (paginationInfo.value.lastPage % 10 !== 0) {
-            paginationInfo.value.startPage = Math.floor(
-              paginationInfo.value.lastPage / 10,
-            ) * 10 + 1;
-          } else {
-            paginationInfo.value.startPage = (
-              Math.floor(paginationInfo.value.lastPage / 10) - 1
-            ) * 10 + 1;
-          }
-          paginationInfo.value.currentPage = paginationInfo.value.lastPage;
-        } else {
-          paginationInfo.value.currentPage = val;
-        }
-        emit('update:modelValue', paginationInfo.value.currentPage);
-      }
-
-      watch(
-        () => props.modelValue,
-        newVal => {
-          paginationInfo.value.currentPage = newVal;
-          paginationInfo.value.startPage = Math.floor((newVal - 1) / 10) * 10 + 1;
-        },
-      );
-
-      watch(
-        () => props.lastPage,
-        newVal => {
-          paginationInfo.value.lastPage = newVal;
-        },
-      );
-
-      return {
-        paginationRightIcon,
-        paginationLeftIcon,
-        paginationLastIcon,
-        paginationFirstIcon,
-
-        paginationInfo,
-
-        updateModelValue,
-      };
-    },
-  });
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-
-  .s-pagination {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .q-btn {
-      min-height: $pagination-size;
-      height: $pagination-size;
-      margin: $pagination-margin;
-      justify-content: center;
-      &:hover {
-        &:before {
-          border: 1px solid $Blue_B_Lighten-1;
-        }
-        .q-focus-helper {
-          opacity: 0 !important;
-          &:before,
-          &:after {
-            opacity: 0 !important;
-          }
-        }
-        .q-btn__content {
-          .q-icon {
-            color: $Blue_B_Lighten-1;
-          }
-          > span {
-            color: $Blue_B_Lighten-1;
-          }
-        }
-      }
-    }
-    > .icons-container {
-      .q-btn {
-        padding: 0 !important;
-        min-width: $pagination-size;
-        width: $pagination-size;
-        &__content {
-          .q-icon {
-            font-size: $default-font;
-            width: $icon-size-sm;
-            height: $icon-size-sm;
-          }
-        }
-      }
-    }
-    .pagination-container {
-      .q-btn {
-        min-width: $pagination-size;
-        width: fit-content;
-        padding: 0;
-        &__content {
-          padding: 2px 10px;
-          > span {
-            height: $default-content-height;
-            line-height: $default-content-height;
-            font-size: $default-font;
-            font-weight: $default-font-weight;
-          }
-        }
-      }
-      .pagination-active-btn {
-        &:before {
-          background: $Blue_B_Lighten-1 !important;
-        }
-        .q-btn__content {
-          > span {
-            color: white !important;
-          }
-        }
-      }
-    }
-    .q-btn.disabled {
-      &:hover {
-        &:before {
-          border: none;
-        }
-        .q-btn__content {
-          .q-icon {
-            color: $Grey_Default;
-          }
-          > span {
-            color: $Grey_Default;
-          }
-        }
-      }
-    }
-  }
-</style>
+<template>
+  <div class="s-pagination row">
+    <div class="icons-container" v-if="paginationInfo.startPage !== 1">
+      <q-btn
+        flat
+        dense
+        round
+        :ripple="false"
+        unelevated
+        type="button"
+        align="center"
+        class="bg-transparent first-btn"
+        text-color="Grey_Darken-2"
+        :icon="paginationFirstIcon"
+        @click="updateModelValue('goFirst')"
+      />
+      <q-btn
+        flat
+        dense
+        round
+        :ripple="false"
+        unelevated
+        type="button"
+        align="center"
+        class="left-btn"
+        text-color="Grey_Darken-2"
+        :icon="paginationLeftIcon"
+        @click="updateModelValue('goLeft')"
+      />
+    </div>
+    <div class="pagination-container">
+      <q-btn
+        v-for="(p, i) in 10"
+        :key="i"
+        v-show="paginationInfo.startPage + i <= paginationInfo.lastPage"
+        flat
+        dense
+        rounded
+        no-wrap
+        unelevated
+        :ripple="false"
+        :label="paginationInfo.startPage + i"
+        text-color="Grey_Darken-2"
+        type="button"
+        align="center"
+        @click="updateModelValue(paginationInfo.startPage + i)"
+        class="pagination-btn"
+        :class="{
+          'pagination-active-btn': paginationInfo.startPage + i === paginationInfo.currentPage,
+        }"
+      />
+    </div>
+    <div class="icons-container" v-if="paginationInfo.lastPage - paginationInfo.startPage >= 10">
+      <q-btn
+        flat
+        dense
+        round
+        :ripple="false"
+        unelevated
+        type="button"
+        align="center"
+        class="right-btn"
+        text-color="Grey_Darken-2"
+        :icon="paginationRightIcon"
+        @click="updateModelValue('goRight')"
+      />
+      <q-btn
+        flat
+        dense
+        round
+        :ripple="false"
+        unelevated
+        type="button"
+        align="center"
+        class="last-btn"
+        text-color="Grey_Darken-2"
+        :icon="paginationLastIcon"
+        @click="updateModelValue('goLast')"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import { QBtn } from 'quasar';
+  import { defineComponent, ref, watch } from 'vue';
+  // eslint-disable-next-line
+  import {
+    paginationFirstIcon,
+    paginationLastIcon,
+    paginationLeftIcon,
+    paginationRightIcon,
+  } from '../assets/icons.js';
+
+  export default defineComponent({
+    name: 'SPagination',
+    components: {
+      QBtn,
+    },
+    props: {
+      modelValue: {
+        type: Number,
+        default: 1,
+      },
+      lastPage: {
+        type: Number,
+        default: 1,
+        required: true,
+      },
+    },
+    setup(props, { emit }) {
+      const paginationInfo = ref({
+        lastPage: props.lastPage,
+        currentPage: props.modelValue,
+        startPage: Math.floor((props.modelValue - 1) / 10) * 10 + 1,
+      });
+
+      function updateModelValue(val) {
+        if (val === 'goFirst') {
+          paginationInfo.value.startPage = 1;
+          paginationInfo.value.currentPage = 1;
+        } else if (val === 'goLeft' && paginationInfo.value.startPage - 10 > 0) {
+          paginationInfo.value.startPage -= 10;
+          paginationInfo.value.currentPage = paginationInfo.value.startPage + 9;
+        } else if (
+          val === 'goRight'
+          && paginationInfo.value.startPage + 10 <= paginationInfo.value.lastPage
+        ) {
+          paginationInfo.value.startPage += 10;
+          paginationInfo.value.currentPage = paginationInfo.value.startPage;
+        } else if (val === 'goLast') {
+          if (paginationInfo.value.lastPage % 10 !== 0) {
+            paginationInfo.value.startPage = Math.floor(
+              paginationInfo.value.lastPage / 10,
+            ) * 10 + 1;
+          } else {
+            paginationInfo.value.startPage = (
+              Math.floor(paginationInfo.value.lastPage / 10) - 1
+            ) * 10 + 1;
+          }
+          paginationInfo.value.currentPage = paginationInfo.value.lastPage;
+        } else {
+          paginationInfo.value.currentPage = val;
+        }
+        emit('update:modelValue', paginationInfo.value.currentPage);
+      }
+
+      watch(
+        () => props.modelValue,
+        newVal => {
+          paginationInfo.value.currentPage = newVal;
+          paginationInfo.value.startPage = Math.floor((newVal - 1) / 10) * 10 + 1;
+        },
+      );
+
+      watch(
+        () => props.lastPage,
+        newVal => {
+          paginationInfo.value.lastPage = newVal;
+        },
+      );
+
+      return {
+        paginationRightIcon,
+        paginationLeftIcon,
+        paginationLastIcon,
+        paginationFirstIcon,
+
+        paginationInfo,
+
+        updateModelValue,
+      };
+    },
+  });
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+
+  .s-pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .q-btn {
+      min-height: $pagination-size;
+      height: $pagination-size;
+      margin: $pagination-margin;
+      justify-content: center;
+      &:hover {
+        &:before {
+          border: 1px solid $Blue_B_Lighten-1;
+        }
+        .q-focus-helper {
+          opacity: 0 !important;
+          &:before,
+          &:after {
+            opacity: 0 !important;
+          }
+        }
+        .q-btn__content {
+          .q-icon {
+            color: $Blue_B_Lighten-1;
+          }
+          > span {
+            color: $Blue_B_Lighten-1;
+          }
+        }
+      }
+    }
+    > .icons-container {
+      .q-btn {
+        padding: 0 !important;
+        min-width: $pagination-size;
+        width: $pagination-size;
+        &__content {
+          .q-icon {
+            font-size: $default-font;
+            width: $icon-size-sm;
+            height: $icon-size-sm;
+          }
+        }
+      }
+    }
+    .pagination-container {
+      .q-btn {
+        min-width: $pagination-size;
+        width: fit-content;
+        padding: 0;
+        &__content {
+          padding: 2px 10px;
+          > span {
+            height: $default-content-height;
+            line-height: $default-content-height;
+            font-size: $default-font;
+            font-weight: $default-font-weight;
+          }
+        }
+      }
+      .pagination-active-btn {
+        &:before {
+          background: $Blue_B_Lighten-1 !important;
+        }
+        .q-btn__content {
+          > span {
+            color: white !important;
+          }
+        }
+      }
+    }
+    .q-btn.disabled {
+      &:hover {
+        &:before {
+          border: none;
+        }
+        .q-btn__content {
+          .q-icon {
+            color: $Grey_Default;
+          }
+          > span {
+            color: $Grey_Default;
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/components/SRadio.vue

@@ -1,78 +1,78 @@
-<template>
-  <q-radio
-    dense
-    color="positive"
-    class="s-radio"
-    :class="length >= 3 ? 'radio-margin-sm' : 'radio-margin-lg'"
-    size="12px"
-  />
-</template>
-
-<script>
-import { QRadio } from 'quasar';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'SRadio',
-  components: {
-    QRadio,
-  },
-  props: {
-    length: Number,
-  },
-});
-</script>
-
-<style lang="scss">
-@import '../css/quasar.variables.scss';
-
-.s-radio {
-  & > .q-radio__inner {
-    min-width: $default-icon-size;
-    width: $default-icon-size;
-    height: $default-icon-size;
-    color: $Grey_Default;
-    &:before {
-      opacity: 0 !important;
-    }
-    &:hover {
-      color: $positive;
-    }
-  }
-  .q-radio__label {
-    padding-left: $default-icon-margin;
-    color: $Grey_Darken-4;
-    line-height: $default-content-height;
-  }
-  &[aria-checked="true"] {
-    .q-radio__inner {
-      .q-radio__bg {
-        .q-radio__check {
-          transform: scale3d(1.2, 1.2, 1);
-        }
-      }
-    }
-  }
-}
-.disabled.s-radio {
-  opacity: 1 !important;
-  border: none;
-  background: none !important;
-  .q-radio__inner {
-    color: $Grey_Lighten-2 !important;
-    background: $Grey_Lighten-4;
-  }
-}
-.radio-margin-sm {
-  margin-right: 20px;
-  &:last-of-type {
-    margin-right: 0;
-  }
-}
-.radio-margin-lg {
-  margin-right: 40px;
-  &:last-of-type {
-    margin-right: 0;
-  }
-}
-</style>
+<template>
+  <q-radio
+    dense
+    color="positive"
+    class="s-radio"
+    :class="length >= 3 ? 'radio-margin-sm' : 'radio-margin-lg'"
+    size="12px"
+  />
+</template>
+
+<script>
+import { QRadio } from 'quasar';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'SRadio',
+  components: {
+    QRadio,
+  },
+  props: {
+    length: Number,
+  },
+});
+</script>
+
+<style lang="scss">
+@import '../css/quasar.variables.scss';
+
+.s-radio {
+  & > .q-radio__inner {
+    min-width: $default-icon-size;
+    width: $default-icon-size;
+    height: $default-icon-size;
+    color: $Grey_Default;
+    &:before {
+      opacity: 0 !important;
+    }
+    &:hover {
+      color: $positive;
+    }
+  }
+  .q-radio__label {
+    padding-left: $default-icon-margin;
+    color: $Grey_Darken-4;
+    line-height: $default-content-height;
+  }
+  &[aria-checked="true"] {
+    .q-radio__inner {
+      .q-radio__bg {
+        .q-radio__check {
+          transform: scale3d(1.2, 1.2, 1);
+        }
+      }
+    }
+  }
+}
+.disabled.s-radio {
+  opacity: 1 !important;
+  border: none;
+  background: none !important;
+  .q-radio__inner {
+    color: $Grey_Lighten-2 !important;
+    background: $Grey_Lighten-4;
+  }
+}
+.radio-margin-sm {
+  margin-right: 20px;
+  &:last-of-type {
+    margin-right: 0;
+  }
+}
+.radio-margin-lg {
+  margin-right: 40px;
+  &:last-of-type {
+    margin-right: 0;
+  }
+}
+</style>