datatables.net-vue3 1.0.0

package/dist/types/src/datatables.net-vue.vue.d.ts

@@ -0,0 +1,48 @@
+export interface IData {
+    _dt: null | any;
+    oldData: Array<any>;
+}
+declare const Comp: import("vue").DefineComponent<{
+    ajax: null;
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+    columns: {
+        type: ArrayConstructor;
+        default: null;
+    };
+    data: {
+        type: ArrayConstructor;
+        default: null;
+    };
+    options: {
+        default: {};
+    };
+}, unknown, IData, {}, {
+    dt(): any;
+    saveOld(d: any): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    ajax: null;
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+    columns: {
+        type: ArrayConstructor;
+        default: null;
+    };
+    data: {
+        type: ArrayConstructor;
+        default: null;
+    };
+    options: {
+        default: {};
+    };
+}>>, {
+    data: unknown[];
+    class: string;
+    columns: unknown[];
+    options: {};
+}>;
+export default Comp;

package/dist/types/src/entry.esm.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vue';
+import component from "./datatables.net-vue.vue";
+declare type InstallableComponent = typeof component & {
+    install: Exclude<Plugin['install'], undefined>;
+};
+declare const _default: InstallableComponent;
+export default _default;

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "datatables.net-vue3",
+  "version": "1.0.0",
+  "description": "Vue3 component for DataTables",
+  "main": "dist/datatables.net-vue.ssr.js",
+  "browser": "dist/datatables.net-vue.esm.js",
+  "module": "dist/datatables.net-vue.esm.js",
+  "unpkg": "dist/datatables.net-vue.min.js",
+  "types": "dist/types/src/entry.esm.d.ts",
+  "files": [
+    "dist/*",
+    "src/**/*.vue"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "serve": "vue-cli-service serve dev/serve.ts",
+    "prebuild": "rimraf ./dist",
+    "build": "NODE_ENV=production rollup --config build/rollup.config.js",
+    "build:ssr": "NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
+    "build:es": "NODE_ENV=production rollup --config build/rollup.config.js --format es",
+    "build:unpkg": "NODE_ENV=production rollup --config build/rollup.config.js --format iife",
+    "postbuild": "rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"
+  },
+  "dependencies": {
+    "datatables.net": "^1.12.1",
+    "jquery": "^3.6.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-typescript": "^7.14.5",
+    "@rollup/plugin-alias": "^3.1.2",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-replace": "^2.4.2",
+    "@types/jquery": "^3.5.14",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-plugin-typescript": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
+    "@vue/compiler-sfc": "^3.0.11",
+    "@zerollup/ts-transform-paths": "^1.7.18",
+    "cross-env": "^7.0.3",
+    "minimist": "^1.2.5",
+    "postcss": "^8.2.10",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.52.8",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.30.0",
+    "rollup-plugin-vue": "^6.0.0",
+    "ttypescript": "^1.5.12",
+    "typescript": "^4.0.3",
+    "vue": "^3.0.5"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.5"
+  },
+  "engines": {
+    "node": ">=12"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DataTables/Vue.git"
+  },
+  "author": {
+    "name": "SpryMedia Ltd",
+    "url": "http://datatables.net"
+  }
+}

package/src/datatables.net-vue.vue

@@ -0,0 +1,124 @@
+<script lang="ts">
+
+import { defineComponent } from 'vue';
+
+// Load in DataTables based and jQuery
+import jQuery from 'jquery';
+import * as DataTables from 'datatables.net';
+
+export interface IData {
+  _dt: null | any,
+  oldData: Array<any>
+}
+
+// Register DataTables
+(DataTables.default as any)(window, jQuery);
+
+const Comp = defineComponent({
+  name: 'DataTable',
+  expose: [
+    'dt',
+  ],
+  data(): IData {
+    return {
+      _dt: null,
+      oldData: [],
+    };
+  },
+  computed: {},
+  methods: {
+    dt() {
+      return this._dt;
+    },
+    saveOld(d: any) {
+      this.oldData = d.value
+        ? d.value.slice()
+        : d.slice();
+    }
+  },
+  mounted() {
+    // Component shown so we can initialise DataTables of the table now
+    let table = this.$el.querySelector('table');
+    let options: any = this.options;
+
+    if (this.data) {
+      options.data = this.data;
+      this.saveOld(options.data);
+    }
+
+    if (this.columns) {
+      options.columns = this.columns;
+    }
+
+    if (this.ajax) {
+      options.ajax = this.ajax;
+    }
+
+    this._dt = jQuery(table).DataTable(options);
+  },
+  beforeUnmount() {
+    this._dt.destroy(true);
+  },
+  props: {
+    ajax: null,
+    class: {
+      type: String,
+      default: '',
+    },
+    columns: {
+      type: Array,
+      default: null,
+    },
+    data: {
+      type: Array,
+      default: null,
+    },
+    options: {
+      default: {}
+    }
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        let known = this._dt.data().toArray();
+
+        // Find any new rows
+        for (let n of newVal) {
+          if (! known.includes(n)) {
+            this._dt.row.add(n);
+          }
+        }
+
+        // Remove any old rows
+        for (let k of known) {
+          if (! newVal.includes(k)) {
+            this._dt.row((_idx: any, d: any) => d === k).remove();
+          }
+        }
+
+        // Data in other rows might have changes, so we need to invalidate the rows
+        this._dt.rows().invalidate().draw(false);
+
+        this.saveOld(newVal);
+      },
+      deep: true
+    }
+  }
+});
+
+// Expose a static method that can be used to add extensions
+Comp.use = function(lib: any) {
+  lib(window, jQuery);
+}
+
+export default Comp;
+
+</script>
+
+<template>
+  <div class="datatable" v-once>
+    <table :class="class">
+      <slot></slot>
+    </table>
+  </div>
+</template>