Tidying up

Author: jamesdordoy

documentation/views/Install.vue

@@ -7,16 +7,19 @@
  </div>
 </template>
 
-<script>
+<script lang="ts">
 
  import InstallMarkdown from '../markdown/install.md';
+ import { Component, Vue } from 'vue-property-decorator';
  import CorrectTextStyling from '../mixins/CorrectTextStyling';
  
- export default {
+ @Component({
  name: 'Component-Install',
  mixins: [CorrectTextStyling],
  components: {
  InstallMarkdown
  },
- }
+ })
+
+ export default class Install extends Vue {}
 </script>

src/components/DataTable.vue

@@ -112,6 +112,9 @@ import DataTableCell from './DataTableCell';
 import UrlFilters from '../mixins/UrlFilters';
 import MergeClasses from "../mixins/MergeClasses";
 import DataTableFilters from './DataTableFilters';
+import ThemeValidator from "@/validators/data-table-theme";
+import OrderDirValidator from "@/validators/data-table-order-dir";
+import FrameworkValidator from "@/validators/data-table-framework";
 
 export default {
  created() {
@@ -382,32 +385,17 @@ export default {
  orderDir: {
  type: String,
  default: "asc",
- validator: function (value) {
- return [
- 'asc',
- 'desc'
- ].indexOf(value) !== -1;
- }
+ validator: OrderDirValidator
  },
  framework: {
  type: String,
  default: "bootstrap",
- validator: function (value) {
- return [
- 'bootstrap',
- 'tailwind',
- ].indexOf(value) !== -1;
- }
+ validator: FrameworkValidator
  },
  theme: {
  type: String,
  default: "light",
- validator: function (value) {
- return [
- 'light',
- 'dark'
- ].indexOf(value) !== -1;
- }
+ validator: ThemeValidator,
  },
  classes: {
  type: Object,

src/components/DataTableFilters.vue

@@ -23,6 +23,9 @@
 </template>
 
 <script>
+
+import FrameworkValidator from "@/validators/data-table-framework";
+
 export default {
  props: {
  tableData: {
@@ -42,12 +45,7 @@ export default {
  framework: {
  type: String,
  default: "bootstrap",
- validator: function (value) {
- return [
- 'bootstrap',
- 'tailwind',
- ].indexOf(value) !== -1;
- }
+ validator: FrameworkValidator,
  },
  },
  computed: {

src/mixins/UrlFilters.js

@@ -72,4 +72,4 @@ export default {
  window.history.pushState(newFilters, 'Title', url + "?" + parameters);
  },
  }
-}
+}

src/plugin.ts

@@ -1,6 +1,6 @@
 import DataTable from "./components/DataTable.vue";
-import DataTableCell from "./components/DataTableCell.vue";
 import { TailablePagination } from 'tailable-pagination';
+import DataTableCell from "./components/DataTableCell.vue";
 
 export default {
  install(Vue) {
@@ -10,4 +10,4 @@ export default {
  },
 };
 
-export { DataTable, DataTableCell };
+export { DataTable, DataTableCell };

src/shims-vue.d.ts

@@ -1,4 +1,4 @@
 declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
-}
+}

src/validators/data-table-framework.ts

@@ -0,0 +1,6 @@
+export default (value) => {
+ return [
+ 'bootstrap',
+ 'tailwind',
+ ].indexOf(value) !== -1;
+};

src/validators/data-table-order-dir.ts

@@ -0,0 +1,6 @@
+export default (value) => {
+ return [
+ 'asc',
+ 'desc',
+ ].indexOf(value) !== -1;
+};

src/validators/data-table-theme.ts

@@ -0,0 +1,6 @@
+export default (value) => {
+ return [
+ 'light',
+ 'dark',
+ ].indexOf(value) !== -1;
+};