datatables.net-vue3 1.0.1 → 2.1.0

package/Readme.md

@@ -15,8 +15,13 @@ In your Vue component you can then:
 
 ```js
 import DataTable from 'datatables.net-vue3'
+import DataTablesLib from 'datatables.net';
+
+DataTable.use(DataTablesLib);
 ```
 
+Note how both the DataTables core and DataTables Vue component must both be imported. This is so the extensions for DataTables can also be imported in this scope and used (see below). This behaviour is **new in v2** of this component and is required for compatibility with DataTables 1.13 and newer.
+
 Which makes a `DataTable` component available. It provides the following parameters:
 
 * `columns` - Define the columns array used for [DataTables initialisation](https://datatables.net/reference/option/#datatables%20-%20columns)
@@ -46,13 +51,14 @@ The `DataTable` component provides a single slot that can be used to define the
 
 ## Extensions
 
-DataTables provides [a wide range of extensions](https://datatables.net/extensions/index) that singificantly expands its abilities. Extensions can be imported from npm and then registered with DataTables through it's `use()` method - e.g.:
+DataTables provides [a wide range of extensions](https://datatables.net/extensions/index) that significantly expands its abilities. Extensions can be imported from npm as modules directly in the script where you wish to make use of them in your DataTable, and then assign the resulting DataTables library to the DataTables Vue3 component - e.g.:
 
 ```js
 import DataTable from 'datatables.net-vue3'
-import Select from 'datatables.net-select';
+import DataTablesLib from 'datatables.net';
+import 'datatables.net-select';
 
-DataTable.use(Select);
+DataTable.use(DataTablesLib);
 ```
 
 
@@ -67,9 +73,31 @@ npm install datatables.net-bs5
 npm install datatables.net-select-bs5
 ```
 
+Your JS import would then be:
+
+```js
+import DataTable from 'datatables.net-vue3'
+import DataTablesLib from 'datatables.net-bs5';
+import 'datatables.net-select-bs5';
+
+DataTable.use(DataTablesLib);
+```
+
 And in your Vue application's CSS (assuming your are using Vite or some other builder which can resolve the `style` property for npm packages):
 
 ```css
 @import 'datatables.net-dt';
 @import 'datatables.net-select-dt';
 ```
+
+
+## Development
+
+Clone this repo and then in your terminal:
+
+```
+npm install
+npm run dev
+```
+
+You will then be able to access various examples in your browser by clicking the link shown in your terminal.

package/dist/datatables.net-vue3.d.ts

@@ -0,0 +1,83 @@
+import { AllowedComponentProps } from 'vue';
+import type { Api } from 'datatables.net';
+import { ComponentCustomProps } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import type { Config } from 'datatables.net';
+import type { ConfigColumns } from 'datatables.net';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { Plugin as Plugin_2 } from 'vue';
+import { PropType } from 'vue';
+import { Ref } from 'vue';
+import { VNodeProps } from 'vue';
+
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare const _default: InstallableComponent;
+export default _default;
+
+declare const _default_2: __VLS_WithTemplateSlots<DefineComponent<__VLS_TypePropsToRuntimeProps<{
+/**
+* Load data for the table's content from an Ajax source
+*/
+ajax?: Config['ajax'];
+/**
+* Set column specific initialisation properties.
+*/
+columns?: ConfigColumns[] | undefined;
+/**
+* Data to use as the display data for the table.
+*/
+data?: any;
+/**
+* DataTables options
+*/
+options?: Config | undefined;
+}>, {
+/**
+* DataTable instance
+*/
+dt: Ref<Api<any> | undefined>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, string[], string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+/**
+* Load data for the table's content from an Ajax source
+*/
+ajax?: Config['ajax'];
+/**
+* Set column specific initialisation properties.
+*/
+columns?: ConfigColumns[] | undefined;
+/**
+* Data to use as the display data for the table.
+*/
+data?: any;
+/**
+* DataTables options
+*/
+options?: Config | undefined;
+}>>> & {
+[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {}>, {
+    default: (_: {}) => any;
+}>;
+
+export declare type InstallableComponent = typeof _default_2 & {
+    install: Exclude<Plugin_2['install'], undefined>;
+};
+
+export { }

package/dist/datatables.net-vue3.js

@@ -0,0 +1 @@
+"use strict";const r=require("vue"),v=["childRow","column-sizing","column-visibility","destroy","draw","error","init","length","order","page","preDraw","preInit","preXhr","processing","requestChild","search","stateLoadParams","stateLoaded","stateSaveParams","xhr","autoFill","preAutoFill","buttons-action","buttons-processing","column-reorder","key","key-blur","key-focus","key-refocus","key-return-submit","responsive-display","responsive-resize","rowgroup-datasrc","pre-row-reorder","row-reorder","row-reordered","dtsb-inserted","deselect","select","select-blur","selectItems","selectStyle","user-select","stateRestore-change"];let d;const w={name:"Datatables.netVue",inheritAttrs:!1,use(o){d=o}},g=r.defineComponent({...w,props:{ajax:null,columns:null,data:null,options:null},emits:v,setup(o,{expose:u}){const s=o,c=r.ref(null),a=r.ref(),b=r.ref([]);r.watch(()=>s.data,e=>{var l,i,p,m;let t=(l=a.value)==null?void 0:l.data().toArray();for(let n of e)t!=null&&t.includes(n)||(i=a.value)==null||i.row.add(n);if(typeof t<"u")for(let n of t)e.includes(n)||(p=a.value)==null||p.row((k,y)=>y===n).remove();(m=a.value)==null||m.rows().invalidate().draw(!1),f(e)},{deep:!0}),r.onMounted(()=>{const e=r.getCurrentInstance();let t=s.options||{};if(s.data&&(t.data=s.data,f(t.data)),s.columns&&(t.columns=s.columns),s.ajax&&(t.ajax=s.ajax),!d)throw new Error("DataTables library not set. See https://datatables.net/tn/19 for details.");a.value=new d(r.unref(c),t);for(let l of v)a.value&&e&&a.value.on(l,i=>{e.emit(l,{event:i,dt:a})})}),r.onBeforeUnmount(()=>{var e;(e=a.value)==null||e.destroy(!0)});function f(e){b.value=e.value?e.value.slice():e.slice()}return u({dt:a}),(e,t)=>t[0]||(r.setBlockTracking(-1),t[0]=r.createElementVNode("div",{class:"datatable"},[r.createElementVNode("table",r.mergeProps({ref_key:"table",ref:c},e.$attrs,{style:{width:"100%"}}),[r.renderSlot(e.$slots,"default")],16)]),r.setBlockTracking(1),t[0])}}),h=(()=>{const o=g;return o.install=u=>{u.component("Datatables.netVue",o)},o})();module.exports=h;

package/dist/datatables.net-vue3.mjs

@@ -0,0 +1,119 @@
+import { defineComponent as h, ref as u, watch as k, onMounted as x, getCurrentInstance as D, unref as _, onBeforeUnmount as j, setBlockTracking as v, createElementVNode as b, mergeProps as S, renderSlot as A } from "vue";
+const y = [
+  "childRow",
+  "column-sizing",
+  "column-visibility",
+  "destroy",
+  "draw",
+  "error",
+  "init",
+  "length",
+  "order",
+  "page",
+  "preDraw",
+  "preInit",
+  "preXhr",
+  "processing",
+  "requestChild",
+  "search",
+  "stateLoadParams",
+  "stateLoaded",
+  "stateSaveParams",
+  "xhr",
+  "autoFill",
+  "preAutoFill",
+  "buttons-action",
+  "buttons-processing",
+  "column-reorder",
+  "key",
+  "key-blur",
+  "key-focus",
+  "key-refocus",
+  "key-return-submit",
+  "responsive-display",
+  "responsive-resize",
+  "rowgroup-datasrc",
+  "pre-row-reorder",
+  "row-reorder",
+  "row-reordered",
+  "dtsb-inserted",
+  "deselect",
+  "select",
+  "select-blur",
+  "selectItems",
+  "selectStyle",
+  "user-select",
+  "stateRestore-change"
+];
+let d;
+const C = {
+  name: "Datatables.netVue",
+  inheritAttrs: !1,
+  use(s) {
+    d = s;
+  }
+}, E = /* @__PURE__ */ h({
+  ...C,
+  props: {
+    ajax: null,
+    columns: null,
+    data: null,
+    options: null
+  },
+  emits: y,
+  setup(s, { expose: i }) {
+    const r = s, c = u(null), a = u(), w = u([]);
+    k(
+      () => r.data,
+      (e) => {
+        var o, n, p, m;
+        let t = (o = a.value) == null ? void 0 : o.data().toArray();
+        for (let l of e)
+          t != null && t.includes(l) || (n = a.value) == null || n.row.add(l);
+        if (typeof t < "u")
+          for (let l of t)
+            e.includes(l) || (p = a.value) == null || p.row((I, g) => g === l).remove();
+        (m = a.value) == null || m.rows().invalidate().draw(!1), f(e);
+      },
+      {
+        deep: !0
+      }
+    ), x(() => {
+      const e = D();
+      let t = r.options || {};
+      if (r.data && (t.data = r.data, f(t.data)), r.columns && (t.columns = r.columns), r.ajax && (t.ajax = r.ajax), !d)
+        throw new Error(
+          "DataTables library not set. See https://datatables.net/tn/19 for details."
+        );
+      a.value = new d(_(c), t);
+      for (let o of y)
+        a.value && e && a.value.on(o, (n) => {
+          e.emit(o, { event: n, dt: a });
+        });
+    }), j(() => {
+      var e;
+      (e = a.value) == null || e.destroy(!0);
+    });
+    function f(e) {
+      w.value = e.value ? e.value.slice() : e.slice();
+    }
+    return i({
+      dt: a
+    }), (e, t) => t[0] || (v(-1), t[0] = b("div", { class: "datatable" }, [
+      b("table", S({
+        ref_key: "table",
+        ref: c
+      }, e.$attrs, { style: { width: "100%" } }), [
+        A(e.$slots, "default")
+      ], 16)
+    ]), v(1), t[0]);
+  }
+}), P = /* @__PURE__ */ (() => {
+  const s = E;
+  return s.install = (i) => {
+    i.component("Datatables.netVue", s);
+  }, s;
+})();
+export {
+  P as default
+};

package/dist/datatables.net-vue3.umd.js

@@ -0,0 +1 @@
+(function(e,o){typeof exports=="object"&&typeof module<"u"?module.exports=o(require("vue")):typeof define=="function"&&define.amd?define(["vue"],o):(e=typeof globalThis<"u"?globalThis:e||self,e.datatables=e.datatables||{},e.datatables["net-vue3"]=o(e.Vue))})(this,function(e){"use strict";const o=["childRow","column-sizing","column-visibility","destroy","draw","error","init","length","order","page","preDraw","preInit","preXhr","processing","requestChild","search","stateLoadParams","stateLoaded","stateSaveParams","xhr","autoFill","preAutoFill","buttons-action","buttons-processing","column-reorder","key","key-blur","key-focus","key-refocus","key-return-submit","responsive-display","responsive-resize","rowgroup-datasrc","pre-row-reorder","row-reorder","row-reordered","dtsb-inserted","deselect","select","select-blur","selectItems","selectStyle","user-select","stateRestore-change"];let u;const y={name:"Datatables.netVue",inheritAttrs:!1,use(n){u=n}},h=e.defineComponent({...y,props:{ajax:null,columns:null,data:null,options:null},emits:o,setup(n,{expose:c}){const r=n,f=e.ref(null),s=e.ref(),w=e.ref([]);e.watch(()=>r.data,t=>{var l,d,m,b;let a=(l=s.value)==null?void 0:l.data().toArray();for(let i of t)a!=null&&a.includes(i)||(d=s.value)==null||d.row.add(i);if(typeof a<"u")for(let i of a)t.includes(i)||(m=s.value)==null||m.row((x,k)=>k===i).remove();(b=s.value)==null||b.rows().invalidate().draw(!1),p(t)},{deep:!0}),e.onMounted(()=>{const t=e.getCurrentInstance();let a=r.options||{};if(r.data&&(a.data=r.data,p(a.data)),r.columns&&(a.columns=r.columns),r.ajax&&(a.ajax=r.ajax),!u)throw new Error("DataTables library not set. See https://datatables.net/tn/19 for details.");s.value=new u(e.unref(f),a);for(let l of o)s.value&&t&&s.value.on(l,d=>{t.emit(l,{event:d,dt:s})})}),e.onBeforeUnmount(()=>{var t;(t=s.value)==null||t.destroy(!0)});function p(t){w.value=t.value?t.value.slice():t.slice()}return c({dt:s}),(t,a)=>a[0]||(e.setBlockTracking(-1),a[0]=e.createElementVNode("div",{class:"datatable"},[e.createElementVNode("table",e.mergeProps({ref_key:"table",ref:f},t.$attrs,{style:{width:"100%"}}),[e.renderSlot(t.$slots,"default")],16)]),e.setBlockTracking(1),a[0])}});return(()=>{const n=h;return n.install=c=>{c.component("Datatables.netVue",n)},n})()});

package/package.json

@@ -1,59 +1,37 @@
 {
   "name": "datatables.net-vue3",
-  "version": "1.0.1",
+  "version": "2.1.0",
   "description": "Vue3 component for DataTables",
-  "main": "dist/datatables.net-vue.ssr.js",
+  "main": "datatables.net-vue3.umd.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",
+  "module": "dist/datatables.net-vue3.mjs",
+  "require": "dist/datatables.net-vue3.js",
+  "unpkg": "dist/datatables.net-vue3.umd.js",
+  "types": "dist/datatables.net-vue3.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"
+    "dev": "vite --host",
+    "build": "cross-env NODE_ENV=production vite build && npm run build-types",
+    "build-types": "vue-tsc --emitDeclarationOnly -p ./tsconfig.types.json && api-extractor run && rimraf ./temp"
   },
   "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",
+    "@microsoft/api-extractor": "^7.33.7",
     "@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",
+    "@vitejs/plugin-vue": "^4.0.0",
     "cross-env": "^7.0.3",
-    "minimist": "^1.2.5",
-    "postcss": "^8.2.10",
+    "datatables.net-select-dt": "^1.5.0",
     "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"
+    "typescript": "^4.8.4",
+    "vue": "^3.2.45",
+    "vue-tsc": "^1.0.16"
   },
   "peerDependencies": {
+    "datatables.net": "^1.13.1",
+    "jquery": "^3.6.0",
     "vue": "^3.0.5"
   },
   "engines": {
@@ -66,5 +44,8 @@
   "author": {
     "name": "SpryMedia Ltd",
     "url": "http://datatables.net"
+  },
+  "dependencies": {
+    "datatables.net-responsive-dt": "^2.4.0"
   }
 }

package/src/datatables.net-vue.vue

@@ -1,123 +1,145 @@
 <script lang="ts">
+  export let DataTablesLib: any
 
-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;
+  export default {
+    name: 'Datatables.netVue',
+    inheritAttrs: false,
+    use(lib: any) {
+      DataTablesLib = lib;
     }
+  }
+</script>
 
-    if (this.ajax) {
-      options.ajax = this.ajax;
-    }
+<script lang="ts" setup>
+// imports
+import { ref, unref, watch, onMounted, onBeforeUnmount, getCurrentInstance} from 'vue';
+import type { Api, Config, ConfigColumns } from 'datatables.net';
+import dtEvents from './dtEvents';
+
+// props
+const props = defineProps<{
+	/**
+	 * Load data for the table's content from an Ajax source
+	 */
+	ajax?: Config['ajax'];
+	/**
+	 * Set column specific initialisation properties.
+	 */
+	columns?: ConfigColumns[];
+	/**
+	 * Data to use as the display data for the table.
+	 */
+	data?: any;
+	/**
+	 * DataTables options
+	 */
+	options?: Config;
+}>();
+
+// emits
+defineEmits(dtEvents);
+
+// setup
+const table = ref<HTMLTableElement | null>(null);
+
+// data
+const dt = ref<Api<any>>();
+const oldData = ref<any[]>([]);
+
+// computed
+
+// watch
+watch(
+	() => props.data,
+	(newVal) => {
+		let known = dt.value?.data().toArray();
+
+		// Find any new rows
+		for (let n of newVal) {
+			if (!known?.includes(n)) {
+				dt.value?.row.add(n);
+			}
+		}
+
+		// Remove any old rows
+		if (typeof known !== 'undefined') {
+			for (let k of known) {
+				if (!newVal.includes(k)) {
+					dt.value?.row((_idx: any, d: any) => d === k).remove();
+				}
+			}
+		}
+
+		// Data in other rows might have changes, so we need to invalidate the rows
+		dt.value?.rows().invalidate().draw(false);
+
+		saveOld(newVal);
+	},
+	{
+		deep: true,
+	}
+);
+
+// lifecycle
+onMounted(() => {
+	const inst = getCurrentInstance();
+	let options: any = props.options || {};
+
+	if (props.data) {
+		options.data = props.data;
+		saveOld(options.data);
+	}
+
+	if (props.columns) {
+		options.columns = props.columns;
+	}
+
+	if (props.ajax) {
+		options.ajax = props.ajax;
+	}
+
+	if (!DataTablesLib) {
+		throw new Error(
+			'DataTables library not set. See https://datatables.net/tn/19 for details.'
+		);
+	}
+
+	// Create the DataTable!
+	dt.value = new DataTablesLib(unref(table), options);
+
+	// Re-export all DataTables events by listening for them using DataTable's
+	// `on` method and then emit them to our Vue component
+	for (let eName of dtEvents) {
+		if (dt.value && inst) {
+			dt.value.on(eName, (event) => {
+				inst.emit(eName, { event: event, dt: dt });
+			});
+		}
+	}
+});
 
-    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
-    }
-  }
+onBeforeUnmount(() => {
+	dt.value?.destroy(true);
 });
 
-// Expose a static method that can be used to add extensions
-Comp.use = function(lib: any) {
-  lib(window, jQuery);
+// methods
+function saveOld(d: any) {
+	oldData.value = d.value ? d.value.slice() : d.slice();
 }
 
-export default Comp;
+// expose
+defineExpose({
+	/**
+	 * DataTable instance
+	 */
+	dt,
+});
 
 </script>
 
 <template>
   <div class="datatable" v-once>
-    <table :class="class">
+    <table ref="table" v-bind="$attrs" style="width:100%">
       <slot></slot>
     </table>
   </div>