datatables.net-select-dt 1.6.2 → 2.0.0

package/css/select.dataTables.css

@@ -2,41 +2,72 @@ table.dataTable > tbody > tr > .selected {
   background-color: rgba(13, 110, 253, 0.9);
   color: white;
 }
+table.dataTable > tbody > tr > .dt-select {
+  text-align: center;
+  vertical-align: middle;
+}
+table.dataTable > thead > tr > .dt-select {
+  text-align: center;
+}
+table.dataTable input.dt-select-checkbox {
+  appearance: none;
+  position: relative;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 1px solid;
+  border-radius: 3px;
+  vertical-align: middle;
+  margin-top: 1px;
+  color: inherit;
+  font-size: 20px;
+  line-height: 1em;
+}
+table.dataTable input.dt-select-checkbox:checked:after {
+  display: block;
+  content: "✓";
+  margin-top: -8px;
+}
+table.dataTable input.dt-select-checkbox:indeterminate:after {
+  display: block;
+  position: absolute;
+  content: " ";
+  top: 3px;
+  left: 3px;
+  height: 4px;
+  width: 4px;
+  background-color: black;
+  border-radius: 2px;
+}
+table.dataTable > tbody > tr.selected input.dt-select-checkbox:checked {
+  border: 1px solid;
+}
 table.dataTable > tbody > tr > td.select-checkbox,
 table.dataTable > tbody > tr > th.select-checkbox {
   position: relative;
 }
-table.dataTable > tbody > tr > td.select-checkbox:before, table.dataTable > tbody > tr > td.select-checkbox:after,
-table.dataTable > tbody > tr > th.select-checkbox:before,
-table.dataTable > tbody > tr > th.select-checkbox:after {
+table.dataTable > tbody > tr > td.select-checkbox:before,
+table.dataTable > tbody > tr > th.select-checkbox:before {
   display: block;
   position: absolute;
-  top: 1.2em;
+  top: 50%;
   left: 50%;
   width: 12px;
   height: 12px;
   box-sizing: border-box;
-}
-table.dataTable > tbody > tr > td.select-checkbox:before,
-table.dataTable > tbody > tr > th.select-checkbox:before {
   content: " ";
   margin-top: -6px;
   margin-left: -6px;
-  border: 1px solid black;
+  border: 1px solid;
   border-radius: 3px;
 }
 table.dataTable > tbody > tr.selected > td.select-checkbox:before,
 table.dataTable > tbody > tr.selected > th.select-checkbox:before {
-  border: 1px solid white;
-}
-table.dataTable > tbody > tr.selected > td.select-checkbox:after,
-table.dataTable > tbody > tr.selected > th.select-checkbox:after {
+  border: 1px solid;
   content: "✓";
   font-size: 20px;
-  margin-top: -19px;
-  margin-left: -6px;
+  line-height: 6px;
   text-align: center;
-  text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
 }
 table.dataTable.compact > tbody > tr > td.select-checkbox:before,
 table.dataTable.compact > tbody > tr > th.select-checkbox:before {
@@ -47,14 +78,19 @@ table.dataTable.compact > tbody > tr.selected > th.select-checkbox:after {
   margin-top: -16px;
 }
 
-div.dataTables_wrapper span.select-info,
-div.dataTables_wrapper span.select-item {
+div.dt-container span.select-info,
+div.dt-container span.select-item {
   margin-left: 0.5em;
 }
 
+html.dark table.dataTable input.dt-select-checkbox:indeterminate:after,
+html[data-bs-theme=dark] table.dataTable input.dt-select-checkbox:indeterminate:after {
+  background-color: white;
+}
+
 @media screen and (max-width: 640px) {
-  div.dataTables_wrapper span.select-info,
-div.dataTables_wrapper span.select-item {
+  div.dt-container span.select-info,
+  div.dt-container span.select-item {
     margin-left: 0;
     display: block;
   }

package/css/select.dataTables.min.css

@@ -1 +1 @@
-table.dataTable>tbody>tr>.selected{background-color:rgba(13, 110, 253, 0.9);color:white}table.dataTable>tbody>tr>td.select-checkbox,table.dataTable>tbody>tr>th.select-checkbox{position:relative}table.dataTable>tbody>tr>td.select-checkbox:before,table.dataTable>tbody>tr>td.select-checkbox:after,table.dataTable>tbody>tr>th.select-checkbox:before,table.dataTable>tbody>tr>th.select-checkbox:after{display:block;position:absolute;top:1.2em;left:50%;width:12px;height:12px;box-sizing:border-box}table.dataTable>tbody>tr>td.select-checkbox:before,table.dataTable>tbody>tr>th.select-checkbox:before{content:" ";margin-top:-6px;margin-left:-6px;border:1px solid black;border-radius:3px}table.dataTable>tbody>tr.selected>td.select-checkbox:before,table.dataTable>tbody>tr.selected>th.select-checkbox:before{border:1px solid white}table.dataTable>tbody>tr.selected>td.select-checkbox:after,table.dataTable>tbody>tr.selected>th.select-checkbox:after{content:"✓";font-size:20px;margin-top:-19px;margin-left:-6px;text-align:center;text-shadow:1px 1px #b0bed9,-1px -1px #b0bed9,1px -1px #b0bed9,-1px 1px #b0bed9}table.dataTable.compact>tbody>tr>td.select-checkbox:before,table.dataTable.compact>tbody>tr>th.select-checkbox:before{margin-top:-12px}table.dataTable.compact>tbody>tr.selected>td.select-checkbox:after,table.dataTable.compact>tbody>tr.selected>th.select-checkbox:after{margin-top:-16px}div.dataTables_wrapper span.select-info,div.dataTables_wrapper span.select-item{margin-left:.5em}@media screen and (max-width: 640px){div.dataTables_wrapper span.select-info,div.dataTables_wrapper span.select-item{margin-left:0;display:block}}
+table.dataTable>tbody>tr>.selected{background-color:rgba(13, 110, 253, 0.9);color:white}table.dataTable>tbody>tr>.dt-select{text-align:center;vertical-align:middle}table.dataTable>thead>tr>.dt-select{text-align:center}table.dataTable input.dt-select-checkbox{appearance:none;position:relative;display:inline-block;width:12px;height:12px;border:1px solid;border-radius:3px;vertical-align:middle;margin-top:1px;color:inherit;font-size:20px;line-height:1em}table.dataTable input.dt-select-checkbox:checked:after{display:block;content:"✓";margin-top:-8px}table.dataTable input.dt-select-checkbox:indeterminate:after{display:block;position:absolute;content:" ";top:3px;left:3px;height:4px;width:4px;background-color:black;border-radius:2px}table.dataTable>tbody>tr.selected input.dt-select-checkbox:checked{border:1px solid}table.dataTable>tbody>tr>td.select-checkbox,table.dataTable>tbody>tr>th.select-checkbox{position:relative}table.dataTable>tbody>tr>td.select-checkbox:before,table.dataTable>tbody>tr>th.select-checkbox:before{display:block;position:absolute;top:50%;left:50%;width:12px;height:12px;box-sizing:border-box;content:" ";margin-top:-6px;margin-left:-6px;border:1px solid;border-radius:3px}table.dataTable>tbody>tr.selected>td.select-checkbox:before,table.dataTable>tbody>tr.selected>th.select-checkbox:before{border:1px solid;content:"✓";font-size:20px;line-height:6px;text-align:center}table.dataTable.compact>tbody>tr>td.select-checkbox:before,table.dataTable.compact>tbody>tr>th.select-checkbox:before{margin-top:-12px}table.dataTable.compact>tbody>tr.selected>td.select-checkbox:after,table.dataTable.compact>tbody>tr.selected>th.select-checkbox:after{margin-top:-16px}div.dt-container span.select-info,div.dt-container span.select-item{margin-left:.5em}html.dark table.dataTable input.dt-select-checkbox:indeterminate:after,html[data-bs-theme=dark] table.dataTable input.dt-select-checkbox:indeterminate:after{background-color:white}@media screen and (max-width: 640px){div.dt-container span.select-info,div.dt-container span.select-item{margin-left:0;display:block}}

package/js/select.dataTables.js

@@ -22,7 +22,7 @@
 			}
 		};
 
-		if (typeof window !== 'undefined') {
+		if (typeof window === 'undefined') {
 			module.exports = function (root, $) {
 				if ( ! root ) {
 					// CommonJS environments without a window global must pass a
@@ -47,7 +47,7 @@
 		// Browser
 		factory( jQuery, window, document );
 	}
-}(function( $, window, document, undefined ) {
+}(function( $, window, document ) {
 'use strict';
 var DataTable = $.fn.dataTable;
 

package/js/select.dataTables.min.js

@@ -1,4 +1,4 @@
 /*! DataTables styling wrapper for Select
  * © SpryMedia Ltd - datatables.net/license
  */
-!function(n){var d,o;"function"==typeof define&&define.amd?define(["jquery","datatables.net-dt","datatables.net-select"],function(e){return n(e,window,document)}):"object"==typeof exports?(d=require("jquery"),o=function(e,t){t.fn.dataTable||require("datatables.net-dt")(e,t),t.fn.dataTable.select||require("datatables.net-select")(e,t)},"undefined"!=typeof window?module.exports=function(e,t){return e=e||window,t=t||d(e),o(e,t),n(t,0,e.document)}:(o(window,d),module.exports=n(d,window,window.document))):n(jQuery,window,document)}(function(e,t,n,d){"use strict";return e.fn.dataTable});
+!function(n){var d,o;"function"==typeof define&&define.amd?define(["jquery","datatables.net-dt","datatables.net-select"],function(e){return n(e,window,document)}):"object"==typeof exports?(d=require("jquery"),o=function(e,t){t.fn.dataTable||require("datatables.net-dt")(e,t),t.fn.dataTable.select||require("datatables.net-select")(e,t)},"undefined"==typeof window?module.exports=function(e,t){return e=e||window,t=t||d(e),o(e,t),n(t,0,e.document)}:(o(window,d),module.exports=n(d,window,window.document))):n(jQuery,window,document)}(function(e,t,n){"use strict";return e.fn.dataTable});

package/js/select.dataTables.min.mjs

@@ -1,4 +1,4 @@
 /*! DataTables styling wrapper for Select
  * © SpryMedia Ltd - datatables.net/license
  */
-import $ from"jquery";import DataTable from"datatables.net-dt";import select from"datatables.net-select";export default DataTable;
+import jQuery from"jquery";import DataTable from"datatables.net-dt";import select from"datatables.net-select";let $=jQuery;export default DataTable;

package/js/select.dataTables.mjs

@@ -2,10 +2,13 @@
  * © SpryMedia Ltd - datatables.net/license
  */
 
-import $ from 'jquery';
+import jQuery from 'jquery';
 import DataTable from 'datatables.net-dt';
 import select from 'datatables.net-select';
 
+// Allow reassignment of the $ variable
+let $ = jQuery;
+
 
 
 export default DataTable;

package/package.json

@@ -4,8 +4,8 @@
     "main": "js/select.dataTables.js",
     "module": "js/select.dataTables.mjs",
     "style": "css/select.dataTables.css",
-    "types": "./types/types.d.ts",
-    "version": "1.6.2",
+    "types": "./types/select.dataTables.d.ts",
+    "version": "2.0.0",
     "files": [
         "css/**/*.css",
         "js/**/*.js",
@@ -22,8 +22,8 @@
         "sort"
     ],
     "dependencies": {
-        "datatables.net-select": ">=1.4.0",
-        "datatables.net-dt": ">=1.12.1",
+        "datatables.net-select": "2.0.0",
+        "datatables.net-dt": ">=2.0.0",
         "jquery": ">=1.7"
     },
     "moduleType": [

package/types/select.dataTables.d.ts

@@ -0,0 +1,5 @@
+
+import DataTable from 'datatables.net-select';
+
+export default DataTable;
+export * from 'datatables.net-select';

package/types/types.d.ts

@@ -1,231 +0,0 @@
-// Type definitions for DataTables Select
-//
-// Project: https://datatables.net/extensions/select/, https://datatables.net
-// Definitions by:
-//   SpryMedia
-//   Jared Szechy <https://github.com/szechyjs>
-
-/// <reference types="jquery" />
-
-import DataTables from 'datatables.net';
-
-export default DataTables;
-
-type StyleType = 'api' | 'single' | 'multi' | 'os' | 'multi+shift';
-
-declare module 'datatables.net' {
-	interface Config {
-		/*
-		 * Select extension options
-		 */
-		select?: boolean | string | ConfigSelect;
-	}
-
-	interface Api<T> {
-		select: ApiSelect<Api<T>>
-	}
-
-	interface ApiSelectorModifier {
-		/**
-		 * Pick rows / columns / cells which are selected
-		 */
-		selected?: boolean | undefined;
-	}
-
-	interface ApiRowMethods<T> {
-		/**
-		 * Select a row
-		 */
-		select(): Api<T>;
-
-		/**
-		 * Deselect a row
-		 */
-		deselect(): Api<T>;
-	}
-
-	interface ApiRowsMethods<T> {
-		/**
-		 * Select multiple rows
-		 */
-		select(): Api<T>;
-
-		/**
-		 * Deselect a row
-		 */
-		deselect(): Api<T>;
-	}
-
-	interface ApiCellMethods<T> {
-		/**
-		 * Select cell
-		 */
-		select(): Api<T>;
-
-		/**
-		 * Deselect a cell
-		 */
-		deselect(): Api<T>;
-	}
-
-	interface ApiCellsMethods<T> {
-		/**
-		 * Select multiple cells
-		 */
-		select(): Api<T>;
-
-		/**
-		 * Deselect cells
-		 */
-		deselect(): Api<T>;
-	}
-
-	interface ApiStatic {
-		/**
-		 * Select static methods
-		 */
-		select: {
-			/**
-			 * Initialise Select (for use on tables which were not in the document
-			 * when they were initialised).
-			 */
-			init: <T=any>(api: Api<T>) => void;
-
-			/**
-			 * Select version
-			 */
-			version: string;
-		}
-	}
-}
-
-interface ConfigSelect {
-	/**
-	 * Indicate if the selected items will be removed when clicking outside of the table
-	 */
-	blurable?: boolean;
-
-	/**
-	 * Set the class name that will be applied to selected items
-	 */
-	className?: string;
-
-	/**
-	 * Enable / disable the display for item selection information in the table summary
-	 */
-	info?: boolean;
-
-	/**
-	 * Set which table items to select (rows, columns or cells)
-	 */
-	items?: string;
-
-	/**
-	 * Set the element selector used for mouse event capture to select items
-	 */
-	selector?: string;
-
-	/**
-	 * Set the selection style for end user interaction with the table
-	 */
-	style?: StyleType;
-}
-
-interface ApiSelect<Api> {
-	/**
-	 * Initialise Select for a DataTable after the DataTable has been constructed.
-	 * 
-	 * @returns DataTables Api instance
-	 */
-	(): Api;
-
-	/**
-	 * Get the blurable state for the table.
-	 * 
-	 * @returns Current state - true if blurable, false otherwise. Note that if multiple tables are defined in the API's context, only the blurable state of the first table will be returned.
-	 */
-	blurable(): boolean;
-
-	/**
-	 * Set the blurable state for the table's selection options.
-	 * 
-	 * @param flag Value to set for the blurable option - true to enable, false to disable.
-	 * @returns DataTables Api instance for chaining
-	 */
-	blurable(flag): Api;
-
-	/**
-	 * Get the summary information display state for the table.
-	 * 
-	 * @returns Current state - true if information summary shown, false otherwise. Note that if multiple tables are defined in the API's context, only the information state of the first table will be returned.
-	 */
-	info(): boolean;
-
-	/**
-	 * Set the information summary display state for the table's selection options.
-	 * 
-	 * @param flag Value to set for the information summary display state - true to enable, false to disable.
-	 * @returns DataTables API instance for chaining.
-	 */
-	info(flag): Api;
-
-	/**
-	 * Get the items that will be selected by user interaction (i.e. a click on the table).
-	 * 
-	 * @returns The current item that will be selected when the user interacts with Select's event listeners - this will be the value row, column or cell.
-	 */
-	items(): string;
-
-	/**
-	 * Set the item type that will be selected by user interaction.
-	 * 
-	 * @param set Items to select - this must be one of row, column or cells.
-	 * @returns DataTables API instance for chaining.
-	 */
-	items(set: string): Api;
-
-	/**
-	 * Get the current item selector string applied to the table.
-	 * 
-	 * @returns the item selector string being used for the table.
-	 */
-	selector(): string;
-
-	/**
-	 * Set the table's item selector string. Note that any old selectors will be automatically removed if this is used as a selector to ensure that there are no memory leaks in unattached event listeners.
-	 * 
-	 * @param set jQuery selector that will select the cells that can trigger item selection.
-	 */
-	selector(set: string): Api;
-
-	/**
-	* Get the current selection style applied to the table
-	* 
-	* @returns The current selection style, this will be one of "api", "single", "multi" or "os".
-	*/
-	style(): string;
-
-	/**
-	* Set the table's selection style
-	* 
-	* @param s Selection style to set - this must be one of "api", "single", "multi" or "os".
-	* @returns DataTables API instance for chaining.
-	*/
-	style(s: StyleType): Api;
-
-	/**
-	 * Get the toggle state of Select for the given DataTable.
-	 * 
-	 * @returns true if the item can be deselected when clicked on, false if it cannot be.
-	 */
-	toggleable(): boolean;
-
-	/**
-	 * Set the toggle state of Select for the DataTable.
-	 * 
-	 * @param set true to allow item deselection, false to disallow.
-	 * @returns DataTables API instance for chaining.
-	 */
-	toggleable(set): Api;
-}
-