@burh/nuxt-core 1.0.18 → 1.0.20

package/components/pages/forms/ServerSideValidation.vue

@@ -1,128 +1,128 @@
-<template>
-  <card>
-    <!-- Card header -->
-    <h3 slot="header" class="mb-0">Server side validation</h3>
-
-    <!-- Card body -->
-    <div class="row">
-      <div class="col-lg-8">
-        <p class="mb-0">
-          We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with <code>.is-invalid</code> and <code>.is-valid</code>. Note that <code>.invalid-feedback</code>
-          is also supported with these classes.
-        </p>
-      </div>
-    </div>
-    <hr>
-    <form class="needs-validation"
-          @submit.prevent="firstFormSubmit">
-      <div class="form-row">
-        <div class="col-md-4">
-          <base-input label="First name"
-                      name="First name"
-                      placeholder="First name"
-                      :error="getError('First name')"
-                      valid
-                      v-validate="'required'"
-                      v-model="model.firstName">
-          </base-input>
-        </div>
-
-        <div class="col-md-4">
-          <base-input label="Last name"
-                      name="Last name"
-                      placeholder="Last name"
-                      :error="getError('Last name')"
-                      valid
-                      v-validate="'required'"
-                      v-model="model.lastName">
-          </base-input>
-        </div>
-
-        <div class="col-md-4">
-          <base-input label="Username"
-                      name="Username"
-                      placeholder="Username"
-                      error="Username is required"
-                      valid
-                      v-validate="'required'"
-                      v-model="model.username">
-          </base-input>
-        </div>
-      </div>
-      <div class="form-row">
-        <div class="col-md-6">
-          <base-input label="City"
-                      name="City"
-                      placeholder="City"
-                      error="City is required"
-                      :valid="false"
-                      v-validate="'required'"
-                      v-model="model.city">
-          </base-input>
-        </div>
-        <div class="col-md-3">
-          <base-input label="State"
-                      name="State"
-                      placeholder="State"
-                      error="State is required"
-                      :valid="false"
-                      v-validate="'required'"
-                      v-model="model.state">
-          </base-input>
-        </div>
-        <div class="col-md-3">
-          <base-input label="Zip"
-                      name="Zip"
-                      placeholder="Zip"
-                      error="Zip is required"
-                      :valid="false"
-                      v-validate="'required'"
-                      v-model="model.zip">
-          </base-input>
-        </div>
-      </div>
-      <base-input>
-        <base-checkbox v-model="model.agree">
-          Agree to terms and conditions
-        </base-checkbox>
-      </base-input>
-      <base-button type="primary" native-type="submit">Submit form</base-button>
-    </form>
-  </card>
-</template>
-<script>
-  export default {
-    components: {},
-    data() {
-      return {
-        validated: false,
-        model: {
-          firstName: 'Mark',
-          lastName: 'Otto',
-          username: '',
-          city: '',
-          state: '',
-          zip: '',
-          agree: false
-        }
-      }
-    },
-    methods: {
-      async firstFormSubmit() {
-        try {
-          await this.$validator.validateAll()
-        } finally {
-          this.validated = true;
-        }
-      },
-      getError(name){
-        return this.errors.first(name)
-      },
-      isValid(name) {
-        return this.validated && !this.errors.has(name);
-      }
-    }
-  }
-</script>
-<style>
-</style>
+<template>
+  <card>
+    <!-- Card header -->
+    <h3 slot="header" class="mb-0">Server side validation</h3>
+
+    <!-- Card body -->
+    <div class="row">
+      <div class="col-lg-8">
+        <p class="mb-0">
+          We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with <code>.is-invalid</code> and <code>.is-valid</code>. Note that <code>.invalid-feedback</code>
+          is also supported with these classes.
+        </p>
+      </div>
+    </div>
+    <hr>
+    <form class="needs-validation"
+          @submit.prevent="firstFormSubmit">
+      <div class="form-row">
+        <div class="col-md-4">
+          <base-input label="First name"
+                      name="First name"
+                      placeholder="First name"
+                      :error="getError('First name')"
+                      valid
+                      v-validate="'required'"
+                      v-model="model.firstName">
+          </base-input>
+        </div>
+
+        <div class="col-md-4">
+          <base-input label="Last name"
+                      name="Last name"
+                      placeholder="Last name"
+                      :error="getError('Last name')"
+                      valid
+                      v-validate="'required'"
+                      v-model="model.lastName">
+          </base-input>
+        </div>
+
+        <div class="col-md-4">
+          <base-input label="Username"
+                      name="Username"
+                      placeholder="Username"
+                      error="Username is required"
+                      valid
+                      v-validate="'required'"
+                      v-model="model.username">
+          </base-input>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="col-md-6">
+          <base-input label="City"
+                      name="City"
+                      placeholder="City"
+                      error="City is required"
+                      :valid="false"
+                      v-validate="'required'"
+                      v-model="model.city">
+          </base-input>
+        </div>
+        <div class="col-md-3">
+          <base-input label="State"
+                      name="State"
+                      placeholder="State"
+                      error="State is required"
+                      :valid="false"
+                      v-validate="'required'"
+                      v-model="model.state">
+          </base-input>
+        </div>
+        <div class="col-md-3">
+          <base-input label="Zip"
+                      name="Zip"
+                      placeholder="Zip"
+                      error="Zip is required"
+                      :valid="false"
+                      v-validate="'required'"
+                      v-model="model.zip">
+          </base-input>
+        </div>
+      </div>
+      <base-input>
+        <base-checkbox v-model="model.agree">
+          Agree to terms and conditions
+        </base-checkbox>
+      </base-input>
+      <base-button type="primary" native-type="submit">Submit form</base-button>
+    </form>
+  </card>
+</template>
+<script>
+  export default {
+    components: {},
+    data() {
+      return {
+        validated: false,
+        model: {
+          firstName: 'Mark',
+          lastName: 'Otto',
+          username: '',
+          city: '',
+          state: '',
+          zip: '',
+          agree: false
+        }
+      }
+    },
+    methods: {
+      async firstFormSubmit() {
+        try {
+          await this.$validator.validateAll()
+        } finally {
+          this.validated = true;
+        }
+      },
+      getError(name){
+        return this.errors.first(name)
+      },
+      isValid(name) {
+        return this.validated && !this.errors.has(name);
+      }
+    }
+  }
+</script>
+<style>
+</style>

package/components/pages/register/FailedRegistration.vue

@@ -1,29 +1,29 @@
-<template>
-  <card gradient="danger"
-        header-classes="bg-gradient-danger"
-        body-classes="px-md-3 py-md-3"
-        class="border-0">
-    <template slot="header">
-      <h2 class="text-uppercase display-3 ls-1 text-white text-center mb-0">
-        Registration Failed
-      </h2>
-    </template>
-
-
-    <template>
-      <div class="text-center py-3">
-        <div class="py-5"> <i class="fa fa-frown-o text-white"></i> </div>
-        <h4 class="display-4 text-white pt-4">
-          An error occured in registration. Please try again later.
-        </h4>
-      </div>
-
-    </template>
-  </card>
-</template>
-
-<style scoped>
-i {
-  transform: scale(6);
-}
-</style>
+<template>
+  <card gradient="danger"
+        header-classes="bg-gradient-danger"
+        body-classes="px-md-3 py-md-3"
+        class="border-0">
+    <template slot="header">
+      <h2 class="text-uppercase display-3 ls-1 text-white text-center mb-0">
+        Registration Failed
+      </h2>
+    </template>
+
+
+    <template>
+      <div class="text-center py-3">
+        <div class="py-5"> <i class="fa fa-frown-o text-white"></i> </div>
+        <h4 class="display-4 text-white pt-4">
+          An error occured in registration. Please try again later.
+        </h4>
+      </div>
+
+    </template>
+  </card>
+</template>
+
+<style scoped>
+i {
+  transform: scale(6);
+}
+</style>

package/components/pages/register/SuccessfulRegistration.vue

@@ -1,29 +1,29 @@
-<template>
-  <card type="success"
-        header-classes="bg-success"
-        body-classes="px-md-3 py-md-3"
-        class="border-0">
-    <template slot="header">
-      <h2 class="text-uppercase display-3 ls-1 text-white text-center mb-0">
-        You are registered!
-      </h2>
-    </template>
-
-
-    <template>
-      <div class="text-center py-3">
-        <div class="py-5"> <i class="fa fa-thumbs-up text-white"></i> </div>
-        <h4 class="display-4 text-white pt-4">
-          Please check your email to confirm your account registration.
-        </h4>
-      </div>
-
-    </template>
-  </card>
-</template>
-
-<style scoped>
-i {
-  transform: scale(6);
-}
-</style>
+<template>
+  <card type="success"
+        header-classes="bg-success"
+        body-classes="px-md-3 py-md-3"
+        class="border-0">
+    <template slot="header">
+      <h2 class="text-uppercase display-3 ls-1 text-white text-center mb-0">
+        You are registered!
+      </h2>
+    </template>
+
+
+    <template>
+      <div class="text-center py-3">
+        <div class="py-5"> <i class="fa fa-thumbs-up text-white"></i> </div>
+        <h4 class="display-4 text-white pt-4">
+          Please check your email to confirm your account registration.
+        </h4>
+      </div>
+
+    </template>
+  </card>
+</template>
+
+<style scoped>
+i {
+  transform: scale(6);
+}
+</style>

package/components/tables/PaginatedTables/clientPaginationMixin.js

@@ -1,86 +1,86 @@
-import Fuse from 'fuse.js';
-export default {
-  computed: {
-    /***
-     * Returns a page from the searched data or the whole data. Search is performed in the watch section below
-     */
-    queriedData() {
-      let result = this.tableData;
-      if (this.searchedData.length > 0) {
-        result = this.searchedData;
-      } else {
-        if (this.searchQuery) {
-          result = []
-        }
-      }
-      return result.slice(this.from, this.to);
-    },
-    to() {
-      let highBound = this.from + this.pagination.perPage;
-      if (this.total < highBound) {
-        highBound = this.total;
-      }
-      return highBound;
-    },
-    from() {
-      return this.pagination.perPage * (this.pagination.currentPage - 1);
-    },
-    total() {
-      return this.searchedData.length > 0
-        ? this.searchedData.length
-        : this.tableData.length;
-    }
-  },
-  data() {
-    return {
-      pagination: {
-        perPage: 10,
-        currentPage: 1,
-        perPageOptions: [5, 10, 25, 50],
-        total: 0
-      },
-      searchQuery: '',
-      searchedData: [],
-      fuseSearch: null
-    }
-  },
-  methods: {
-    sortChange({ prop, order }) {
-      if (prop) {
-        this.tableData.sort((a, b) => {
-          let aVal = a[prop]
-          let bVal = b[prop]
-          if (order === 'ascending') {
-            return aVal > bVal ? 1 : -1
-          }
-          return bVal - aVal ? 1 : -1
-        })
-      } else {
-        this.tableData.sort((a, b) => {
-          return a.id - b.id
-        })
-      }
-    }
-  },
-  mounted() {
-    // Fuse search initialization.
-    this.fuseSearch = new Fuse(this.tableData, {
-      keys: ['name', 'email'],
-      threshold: 0.3
-    });
-  },
-  watch: {
-    /**
-     * Searches through the table data by a given query.
-     * NOTE: If you have a lot of data, it's recommended to do the search on the Server Side and only display the results here.
-     * @param value of the query
-     */
-    searchQuery(value) {
-      let result = this.tableData;
-      if (value !== '') {
-        result = this.fuseSearch.search(this.searchQuery);
-      }
-      this.searchedData = result;
-    }
-  }
-}
+import Fuse from 'fuse.js';
+export default {
+  computed: {
+    /***
+     * Returns a page from the searched data or the whole data. Search is performed in the watch section below
+     */
+    queriedData() {
+      let result = this.tableData;
+      if (this.searchedData.length > 0) {
+        result = this.searchedData;
+      } else {
+        if (this.searchQuery) {
+          result = []
+        }
+      }
+      return result.slice(this.from, this.to);
+    },
+    to() {
+      let highBound = this.from + this.pagination.perPage;
+      if (this.total < highBound) {
+        highBound = this.total;
+      }
+      return highBound;
+    },
+    from() {
+      return this.pagination.perPage * (this.pagination.currentPage - 1);
+    },
+    total() {
+      return this.searchedData.length > 0
+        ? this.searchedData.length
+        : this.tableData.length;
+    }
+  },
+  data() {
+    return {
+      pagination: {
+        perPage: 10,
+        currentPage: 1,
+        perPageOptions: [5, 10, 25, 50],
+        total: 0
+      },
+      searchQuery: '',
+      searchedData: [],
+      fuseSearch: null
+    }
+  },
+  methods: {
+    sortChange({ prop, order }) {
+      if (prop) {
+        this.tableData.sort((a, b) => {
+          let aVal = a[prop]
+          let bVal = b[prop]
+          if (order === 'ascending') {
+            return aVal > bVal ? 1 : -1
+          }
+          return bVal - aVal ? 1 : -1
+        })
+      } else {
+        this.tableData.sort((a, b) => {
+          return a.id - b.id
+        })
+      }
+    }
+  },
+  mounted() {
+    // Fuse search initialization.
+    this.fuseSearch = new Fuse(this.tableData, {
+      keys: ['name', 'email'],
+      threshold: 0.3
+    });
+  },
+  watch: {
+    /**
+     * Searches through the table data by a given query.
+     * NOTE: If you have a lot of data, it's recommended to do the search on the Server Side and only display the results here.
+     * @param value of the query
+     */
+    searchQuery(value) {
+      let result = this.tableData;
+      if (value !== '') {
+        result = this.fuseSearch.search(this.searchQuery);
+      }
+      this.searchedData = result;
+    }
+  }
+}