@burh/nuxt-core 1.0.342 → 1.0.344

package/components/argon-core/BasePagination.vue

@@ -1,172 +1,172 @@
-<template>
-    <div
-        :class="{ 'card-footer-bottom': length <= 3 }"
-        class="card-footer pt-4 d-flex justify-content-center"
-    >
-        <ul
-            class="pagination"
-            :class="[
-                size && `pagination-${size}`,
-                align && `justify-content-${align}`
-            ]"
-        >
-            <li class="page-item prev-page" :class="{ disabled: value === 1 }">
-                <a class="page-link" aria-label="Previous" @click="prevPage">
-                    <span aria-hidden="true"
-                        ><i class="fa fa-angle-left" aria-hidden="true"></i
-                    ></span>
-                </a>
-            </li>
-            <li
-                class="page-item"
-                :class="{ active: value === item }"
-                :key="item"
-                v-for="item in range(minPage, maxPage)"
-            >
-                <a class="page-link" @click="changePage(item)">{{ item }}</a>
-            </li>
-            <li
-                class="page-item next-page"
-                :class="{ disabled: value === totalPages }"
-            >
-                <a class="page-link" aria-label="Next" @click="nextPage">
-                    <span aria-hidden="true"
-                        ><i class="fa fa-angle-right" aria-hidden="true"></i
-                    ></span>
-                </a>
-            </li>
-        </ul>
-    </div>
-</template>
-<script>
-export default {
-    name: 'base-pagination',
-    props: {
-        pageCount: {
-            type: Number,
-            default: 0,
-            description:
-                'Pagination page count. This should be specified in combination with perPage'
-        },
-        perPage: {
-            type: Number,
-            default: 10,
-            description:
-                'Pagination per page. Should be specified with total or pageCount'
-        },
-        total: {
-            type: Number,
-            default: 0,
-            description:
-                'Can be specified instead of pageCount. The page count in this case will be total/perPage'
-        },
-        value: {
-            type: Number,
-            default: 1,
-            description: 'Pagination value'
-        },
-        size: {
-            type: String,
-            default: '',
-            description: 'Pagination size'
-        },
-        align: {
-            type: String,
-            default: '',
-            description: 'Pagination alignment (e.g center|start|end)'
-        },
-        length: Number
-    },
-    computed: {
-        totalPages() {
-            if (this.pageCount > 0) return this.pageCount;
-            if (this.total > 0) {
-                return Math.ceil(this.total / this.perPage);
-            }
-            return 1;
-        },
-        pagesToDisplay() {
-            if (
-                this.totalPages > 0 &&
-                this.totalPages < this.defaultPagesToDisplay
-            ) {
-                return this.totalPages;
-            }
-            return this.defaultPagesToDisplay;
-        },
-        minPage() {
-            if (this.value >= this.pagesToDisplay) {
-                const pagesToAdd = Math.floor(this.pagesToDisplay / 2);
-                const newMaxPage = pagesToAdd + this.value;
-                if (newMaxPage > this.totalPages) {
-                    return this.totalPages - this.pagesToDisplay + 1;
-                }
-                return this.value - pagesToAdd;
-            } else {
-                return 1;
-            }
-        },
-        maxPage() {
-            if (this.value >= this.pagesToDisplay) {
-                const pagesToAdd = Math.floor(this.pagesToDisplay / 2);
-                const newMaxPage = pagesToAdd + this.value;
-                if (newMaxPage < this.totalPages) {
-                    return newMaxPage;
-                } else {
-                    return this.totalPages;
-                }
-            } else {
-                return this.pagesToDisplay;
-            }
-        }
-    },
-    data() {
-        return {
-            defaultPagesToDisplay: 5
-        };
-    },
-    methods: {
-        range(min, max) {
-            let arr = [];
-            for (let i = min; i <= max; i++) {
-                arr.push(i);
-            }
-            return arr;
-        },
-        changePage(item) {
-            this.$emit('input', item);
-        },
-        nextPage() {
-            if (this.value < this.totalPages) {
-                this.$emit('input', this.value + 1);
-            }
-        },
-        prevPage() {
-            if (this.value > 1) {
-                this.$emit('input', this.value - 1);
-            }
-        }
-    },
-    watch: {
-        perPage() {
-            this.$emit('input', 1);
-        },
-        total() {
-            this.$emit('input', 1);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.pagination{
-    margin-bottom: 0rem !important;
-}
-@media (min-height: 667.59px) {
-    .card-footer-bottom {
-        bottom: 5px;
-        position: fixed;
-        width: 87%;
-    }
-}
-</style>
+<template>
+    <div
+        :class="{ 'card-footer-bottom': length <= 3 }"
+        class="card-footer pt-4 d-flex justify-content-center"
+    >
+        <ul
+            class="pagination"
+            :class="[
+                size && `pagination-${size}`,
+                align && `justify-content-${align}`
+            ]"
+        >
+            <li class="page-item prev-page" :class="{ disabled: value === 1 }">
+                <a class="page-link" aria-label="Previous" @click="prevPage">
+                    <span aria-hidden="true"
+                        ><i class="fa fa-angle-left" aria-hidden="true"></i
+                    ></span>
+                </a>
+            </li>
+            <li
+                class="page-item"
+                :class="{ active: value === item }"
+                :key="item"
+                v-for="item in range(minPage, maxPage)"
+            >
+                <a class="page-link" @click="changePage(item)">{{ item }}</a>
+            </li>
+            <li
+                class="page-item next-page"
+                :class="{ disabled: value === totalPages }"
+            >
+                <a class="page-link" aria-label="Next" @click="nextPage">
+                    <span aria-hidden="true"
+                        ><i class="fa fa-angle-right" aria-hidden="true"></i
+                    ></span>
+                </a>
+            </li>
+        </ul>
+    </div>
+</template>
+<script>
+export default {
+    name: 'base-pagination',
+    props: {
+        pageCount: {
+            type: Number,
+            default: 0,
+            description:
+                'Pagination page count. This should be specified in combination with perPage'
+        },
+        perPage: {
+            type: Number,
+            default: 10,
+            description:
+                'Pagination per page. Should be specified with total or pageCount'
+        },
+        total: {
+            type: Number,
+            default: 0,
+            description:
+                'Can be specified instead of pageCount. The page count in this case will be total/perPage'
+        },
+        value: {
+            type: Number,
+            default: 1,
+            description: 'Pagination value'
+        },
+        size: {
+            type: String,
+            default: '',
+            description: 'Pagination size'
+        },
+        align: {
+            type: String,
+            default: '',
+            description: 'Pagination alignment (e.g center|start|end)'
+        },
+        length: Number
+    },
+    computed: {
+        totalPages() {
+            if (this.pageCount > 0) return this.pageCount;
+            if (this.total > 0) {
+                return Math.ceil(this.total / this.perPage);
+            }
+            return 1;
+        },
+        pagesToDisplay() {
+            if (
+                this.totalPages > 0 &&
+                this.totalPages < this.defaultPagesToDisplay
+            ) {
+                return this.totalPages;
+            }
+            return this.defaultPagesToDisplay;
+        },
+        minPage() {
+            if (this.value >= this.pagesToDisplay) {
+                const pagesToAdd = Math.floor(this.pagesToDisplay / 2);
+                const newMaxPage = pagesToAdd + this.value;
+                if (newMaxPage > this.totalPages) {
+                    return this.totalPages - this.pagesToDisplay + 1;
+                }
+                return this.value - pagesToAdd;
+            } else {
+                return 1;
+            }
+        },
+        maxPage() {
+            if (this.value >= this.pagesToDisplay) {
+                const pagesToAdd = Math.floor(this.pagesToDisplay / 2);
+                const newMaxPage = pagesToAdd + this.value;
+                if (newMaxPage < this.totalPages) {
+                    return newMaxPage;
+                } else {
+                    return this.totalPages;
+                }
+            } else {
+                return this.pagesToDisplay;
+            }
+        }
+    },
+    data() {
+        return {
+            defaultPagesToDisplay: 5
+        };
+    },
+    methods: {
+        range(min, max) {
+            let arr = [];
+            for (let i = min; i <= max; i++) {
+                arr.push(i);
+            }
+            return arr;
+        },
+        changePage(item) {
+            this.$emit('input', item);
+        },
+        nextPage() {
+            if (this.value < this.totalPages) {
+                this.$emit('input', this.value + 1);
+            }
+        },
+        prevPage() {
+            if (this.value > 1) {
+                this.$emit('input', this.value - 1);
+            }
+        }
+    },
+    watch: {
+        perPage() {
+            this.$emit('input', 1);
+        },
+        total() {
+            this.$emit('input', 1);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.pagination{
+    margin-bottom: 0rem !important;
+}
+@media (min-height: 667.59px) {
+    .card-footer-bottom {
+        bottom: 5px;
+        position: fixed;
+        width: 87%;
+    }
+}
+</style>

package/components/argon-core/BaseProgress.vue

@@ -1,121 +1,121 @@
-<template>
-  <div class="wrapper">
-    <div :class="`progress-${type}`" v-if="showLabel">
-      <div class="progress-label">
-        <slot name="label">
-          <span>{{label}}</span>
-        </slot>
-      </div>
-      <div class="progress-percentage">
-        <slot>
-          <span>{{value}}%</span>
-        </slot>
-      </div>
-    </div>
-    <div class="progress"
-         :class="[{[`progress-${size}`]: size}, progressClasses]"
-         :style="`height: ${height}px;`">
-      <div class="progress-bar"
-           :class="computedClasses"
-           role="progressbar"
-           :aria-valuenow="value"
-           aria-valuemin="0"
-           aria-valuemax="100"
-           :style="`width: ${value}%;`">
-      </div>
-      <!-- <span v-if="star" :style="`left:${star}%;`" class="star-progress bg-secondary"><font-awesome-icon :icon="['fas', 'star']"/></span> -->
-    </div>
-  </div>
-</template>
-<script>
-  export default {
-    name: "base-progress",
-    props: {
-      star: {
-        type: Boolean,
-        default: false
-      },
-      striped: {
-        type: Boolean,
-        description: "Whether progress is striped"
-      },
-      animated: {
-        type: Boolean,
-        description:
-          "Whether progress is animated (works only with `striped` prop together)"
-      },
-      label: {
-        type: String,
-        description: "Progress label (shown on the left above progress)"
-      },
-      height: {
-        type: Number,
-        default: 3,
-        description: "Progress line height"
-      },
-      type: {
-        type: String,
-        default: "default",
-        description: "Progress type (e.g danger, primary etc)"
-      },
-      showLabel: {
-        type: Boolean,
-        default: false
-      },
-      progressClasses: {
-        type: [Array, String],
-        default: '',
-        description: 'Progress css classes'
-      },
-      size: {
-        type: String,
-        default: ''
-      },
-      value: {
-        type: Number,
-        default: 0,
-        validator: value => {
-          return value >= 0 && value <= 100;
-        },
-        description: "Progress value"
-      }
-    },
-    computed: {
-      computedClasses() {
-        return [
-          { "progress-bar-striped": this.striped },
-          { "progress-bar-animated": this.animated },
-          { [`bg-${this.type}`]: this.type }
-        ];
-      }
-    }
-  };
-</script>
-<style>
-.progress-bar::after {
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-  line-height: 29px;
-  content:'\f005';
-  width:30px;
-  height:30px;
-  border-radius: 100%;
-  background: #FDDF00 !important;
-  color: #fff;
-  align-self: flex-end;
-  position: absolute;
-  margin-left: 10px;
-}
-.progress-bar {
-  background: linear-gradient(to left, #8965e0, #5865F2);
-}
-.star-progress {
-  height: 25px;
-  width: 25px;
-  border-radius: 1000px;
-  text-align: center;
-  color: #fff;
-  line-height: 24px;
-  position: absolute;
-}
-</style>
+<template>
+  <div class="wrapper">
+    <div :class="`progress-${type}`" v-if="showLabel">
+      <div class="progress-label">
+        <slot name="label">
+          <span>{{label}}</span>
+        </slot>
+      </div>
+      <div class="progress-percentage">
+        <slot>
+          <span>{{value}}%</span>
+        </slot>
+      </div>
+    </div>
+    <div class="progress"
+         :class="[{[`progress-${size}`]: size}, progressClasses]"
+         :style="`height: ${height}px;`">
+      <div class="progress-bar"
+           :class="computedClasses"
+           role="progressbar"
+           :aria-valuenow="value"
+           aria-valuemin="0"
+           aria-valuemax="100"
+           :style="`width: ${value}%;`">
+      </div>
+      <!-- <span v-if="star" :style="`left:${star}%;`" class="star-progress bg-secondary"><font-awesome-icon :icon="['fas', 'star']"/></span> -->
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: "base-progress",
+    props: {
+      star: {
+        type: Boolean,
+        default: false
+      },
+      striped: {
+        type: Boolean,
+        description: "Whether progress is striped"
+      },
+      animated: {
+        type: Boolean,
+        description:
+          "Whether progress is animated (works only with `striped` prop together)"
+      },
+      label: {
+        type: String,
+        description: "Progress label (shown on the left above progress)"
+      },
+      height: {
+        type: Number,
+        default: 3,
+        description: "Progress line height"
+      },
+      type: {
+        type: String,
+        default: "default",
+        description: "Progress type (e.g danger, primary etc)"
+      },
+      showLabel: {
+        type: Boolean,
+        default: false
+      },
+      progressClasses: {
+        type: [Array, String],
+        default: '',
+        description: 'Progress css classes'
+      },
+      size: {
+        type: String,
+        default: ''
+      },
+      value: {
+        type: Number,
+        default: 0,
+        validator: value => {
+          return value >= 0 && value <= 100;
+        },
+        description: "Progress value"
+      }
+    },
+    computed: {
+      computedClasses() {
+        return [
+          { "progress-bar-striped": this.striped },
+          { "progress-bar-animated": this.animated },
+          { [`bg-${this.type}`]: this.type }
+        ];
+      }
+    }
+  };
+</script>
+<style>
+.progress-bar::after {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  line-height: 29px;
+  content:'\f005';
+  width:30px;
+  height:30px;
+  border-radius: 100%;
+  background: #FDDF00 !important;
+  color: #fff;
+  align-self: flex-end;
+  position: absolute;
+  margin-left: 10px;
+}
+.progress-bar {
+  background: linear-gradient(to left, #8965e0, #5865F2);
+}
+.star-progress {
+  height: 25px;
+  width: 25px;
+  border-radius: 1000px;
+  text-align: center;
+  color: #fff;
+  line-height: 24px;
+  position: absolute;
+}
+</style>