[7.x] Next

.docs/actions.md

@@ -1,24 +1,24 @@
 Table of contents
 
 - [Actions](#actions)
-	- [Api](#api)
-		- [Parameters](#parameters)
-		- [Icon](#icon)
-		- [Class](#class)
-		- [Title](#title)
-		- [Confirmation](#confirmation)
-	- [Ajax](#ajax)
-		- [Redrawing the data](#redrawing-the-data)
-		- [Redrawing one row](#redrawing-one-row)
-	- [Sortable](#sortable)
-		- [Sorting handler](#sorting-handler)
-	- [MultiAction](#multiaction)
-	- [Item detail](#item-detail)
-		- [Item detail form](#item-detail-form)
-		- [Item detail template variables](#item-detail-template-variables)
-		- [Item detail render condition](#item-detail-render-condition)
-	- [ActionCallback](#actioncallback)
-	- [Toolbar button](#toolbar-button)
+    - [Api](#api)
+        - [Parameters](#parameters)
+        - [Icon](#icon)
+        - [Class](#class)
+        - [Title](#title)
+        - [Confirmation](#confirmation)
+    - [Ajax](#ajax)
+        - [Redrawing the data](#redrawing-the-data)
+        - [Redrawing one row](#redrawing-one-row)
+    - [Sortable](#sortable)
+        - [Sorting handler](#sorting-handler)
+    - [MultiAction](#multiaction)
+    - [Item detail](#item-detail)
+        - [Item detail form](#item-detail-form)
+        - [Item detail template variables](#item-detail-template-variables)
+        - [Item detail render condition](#item-detail-render-condition)
+    - [ActionCallback](#actioncallback)
+    - [Toolbar button](#toolbar-button)
 
 # Actions
 
@@ -105,7 +105,7 @@ All links are by default not-ajax. Do you see the bold `ajax` class in previous
 ```php
 public function handleDelete($id)
 {
-	$this->connection->delete('ublaboo_example')
+	$this->connection->delete('example')
 		->where('id = ?', $id)
 		->execute();
 
@@ -127,7 +127,7 @@ When you are updating row data (i.e. status), you can send only one row as snipp
 ```php
 public function handleSetStatus($id, $status)
 {
-	$this->connection->update('ublaboo_example', ['status' => $satatus])
+	$this->connection->update('example', ['status' => $satatus])
 		->where('id = ?', $id)
 		->execute();
 
@@ -242,15 +242,15 @@ The name of the handler used for sorting can be changed:
 $grid->setSortableHandler('foo!');
 ```
 
-Also when you are using datagrid in component, you have to alter the name a bit:
+Also, when you are using datagrid in component, you have to alter the name a bit:
 
 ```php
 $grid->setSortableHandler('myComponent:sort!');
 ```
 
 ## MultiAction
 
-Same as there is column status with pretty dropdown menu, ublaboo datagrid comes with similar dropdown menu for actions. It is called MultiAction:
+Same as there is column status with pretty dropdown menu, the datagrid comes with similar dropdown menu for actions. It is called MultiAction:
 
 ```php
 /**
@@ -261,7 +261,7 @@ $grid->addMultiAction('multi_action', 'MultiAction')
 	->addAction('blah2', 'Blahblah2', 'blah!', ['name']);
 ```
 
-Sure you can alter multiaction class, icons, etc. Same you can change icon, class, etc of nested actions:
+Sure you can alter multiaction class, icons, etc. Same you can change icon, class, etc. of nested actions:
 
 ```php
 $grid->getAction('multi_blah')
@@ -312,7 +312,7 @@ $grid->setItemsDetailForm(function(Nette\Forms\Container $container) use ($grid,
 });
 ```
 
-DataGrid user template:
+Datagrid user template:
 
 ```latte
 {extends $originalTemplate}
@@ -361,7 +361,7 @@ $grid->addActionCallback('custom_callback', '')
 	};
 ```
 
-You treat `ActionCallback` same as `Action`, except for some arguments passed to the `DataGrid::addActionCallback` method.
+You treat `ActionCallback` same as `Action`, except for some arguments passed to the `Datagrid::addActionCallback` method.
 
 ## Toolbar button
 

.docs/assets.md

@@ -6,116 +6,103 @@ Table of contents
 
 # Assets
 
-DataGrid needs for its precise functionality some third party scripts and styles. Install all required assets with NPM.
+There are prepare JS/TS and CSS files for precise functionality. The best way is to use some frontend bundler, for example [Vite](https://vitejs.dev).
 
-**CSS (external)**
+## Installation
 
-- bootstrap
-- bootstrap datepicker
-- bootstrap select
-
-**CSS**
-
-- datagrid.css
-- datagrid-spinners.css
-
-**JS (external)**
-
-- jquery
-- nette forms
-- nette ajax / naja
-- bootstrap
-- bootstrap datepicker
-- bootstrap select
-
-**JS**
-
-- datagrid.js
-- datagrid-instant-url-refresh.js
-- datagrid-spinners.js
-
-**Icons**
-
-You will probably want to use some icon font, but that is in your command.
-On this project website we use font awesome (you can change the icon prefix by setting new value to static property `DataGrid::$iconPrefix = 'fa fa-';`).
-
-**Spinners**
-
-As you can see, there is also a `datagrid-spinners.js` script in a datagrid repository. If you include this file within you project layout, there are some actions, that will show spinner/some other animation when waiting for ajax response. Actions, that has somehow animated spinner:
-
-- Group actions
-- Pagination
-- Changing items per page
-- Toggling item detail - loading the detail for the first time
-
-## NPM
-
-```
-npm install --save ublaboo-datagrid
-```
-
-package.json:
+You need to install datagrid's assets. For example this way.
 
 ```json
 {
-	"dependencies": {
-		"bootstrap-datepicker": "^1.9",
-		"bootstrap-select": "^1.13",
-		"bootstrap": "^4.4.1",
-		"happy-inputs": "^2.0",
-		"jquery": "^3.4.1",
-		"jquery-ui-sortable": "^1.0",
-		"nette-forms": "^3.0",
-		"nette.ajax.js": "^2.3",
-		"popper.js": "^1.14.7",
-		"ublaboo-datagrid": "^6.2"
-	}
+  "dependencies": {
+    "@contributte/datagrid": "git+ssh://[email protected]:contributte/datagrid.git#next"
+  }
 }
 ```
 
-## Example html when not using NPM
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css">
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/src/happy.css">
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-datepicker.css">
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid.css">
-
-	<!-- Use this css for ajax spinners -->
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid-spinners.css">
-
-	<!-- Include this css when using FilterMultiSelect (silviomoreto.github.io/bootstrap-select) -->
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.css">
+##
 
-	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
-</head>
+## Demo
 
-<body>
-	<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/nomodule-es5-fallback.js"></script>
-	<script>
-		var happy = new Happy;
+Full example of using bundler.
 
-		happy.init();
-	</script>
-	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js"></script>
-	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.js"></script>
-	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-datepicker.js"></script>
-	<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery-ui.min.js"></script>
-	<script src="https://cdn.jsdelivr.net/npm/[email protected]/nette.ajax.js"></script>
-	<script src="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid.js"></script>
-	<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/assets/netteForms.min.js"></script>
+**package.json**
 
-	<!-- It is recommended to include this JS file with just a few bits. It refreshes URL on non ajax request -->
-	<script src="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid-instant-url-refresh.js"></script>
-
-	<!-- Use this little extension for ajax spinners -->
-	<script src="https://cdn.jsdelivr.net/npm/[email protected]/assets/datagrid-spinners.js"></script>
+```json
+{
+  "dependencies": {
+    "@contributte/datagrid": "git+ssh://[email protected]:contributte/datagrid.git#next",
+    "@fortawesome/fontawesome-free": "^6.3.0",
+    "bootstrap": "^5.3.0-alpha3",
+    "naja": "^2.5.0",
+    "nette-forms": "^3.3.1",
+    "prismjs": "^1.29.0",
+    "sortablejs": "^1.15.0",
+    "tom-select": "^2.2.2",
+    "vanillajs-datepicker": "^1.3.1"
+  },
+  "devDependencies": {
+    "@types/bootstrap-select": "^1.13.4",
+    "@types/jquery": "^3.5.16",
+    "@types/jqueryui": "^1.12.16",
+    "@types/sortablejs": "^1.15.1",
+    "@types/vanillajs-datepicker": "^1.2.1",
+    "autoprefixer": "^10.4.0",
+    "typescript": "^4.9.5",
+    "vite": "^2.6.10"
+  },
+  "scripts": {
+    "watch": "vite build --watch --mode=development",
+    "build": "vite build --mode=production"
+  }
+}
+```
 
-	<!-- Include bootstrap-select.js when using FilterMultiSelect (silviomoreto.github.io/bootstrap-select) -->
-	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.js"></script>
-</body>
-</html>
+**vite.config.js**
+
+```js
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig(({ mode }) => {
+	const DEV = mode === 'development';
+
+	return {
+		publicDir: './assets/public',
+		resolve: {
+			alias: {
+				'@': resolve(__dirname, 'assets/js'),
+				'~': resolve(__dirname, 'node_modules'),
+			},
+		},
+		base: '/dist/',
+		server: {
+			open: false,
+			hmr: false,
+		},
+		css: {
+			postcss: [
+				"autoprefixer"
+			]
+		},
+		build: {
+			manifest: true,
+			assetsDir: '',
+			outDir: './www/dist/',
+			emptyOutDir: true,
+			minify: DEV ? false : 'esbuild',
+			rollupOptions: {
+				output: {
+					manualChunks: undefined,
+					chunkFileNames: '[name].js',
+					entryFileNames: '[name].js',
+					assetFileNames: '[name].[ext]',
+				},
+				input: {
+					app: './assets/js/main.js'
+				}
+			}
+		},
+	}
+});
 ```