From c21474b4f1130b067c89bbee0d3de7427d3e4874 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sun, 21 Aug 2022 16:02:24 -0700 Subject: [PATCH] v6.0.0 release --- README.md | 75 ++++++++++++++++++++++---------------- doc/CHANGES.md | 6 +-- package.json | 2 +- src/dd-base-impl.ts | 2 +- src/dd-draggable.ts | 2 +- src/dd-droppable.ts | 2 +- src/dd-element.ts | 2 +- src/dd-gridstack.ts | 2 +- src/dd-manager.ts | 2 +- src/dd-resizable-handle.ts | 2 +- src/dd-resizable.ts | 2 +- src/dd-touch.ts | 2 +- src/gridstack-engine.ts | 2 +- src/gridstack-poly.js | 2 +- src/gridstack.scss | 2 +- src/gridstack.ts | 4 +- src/types.ts | 2 +- src/utils.ts | 2 +- 18 files changed, 64 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index f42e4d737..01599caf8 100644 --- a/README.md +++ b/README.md @@ -15,9 +15,9 @@ If you find this lib useful, please donate [PayPal](https://www.paypal.me/alaind [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/alaind831) [![Donate](https://img.shields.io/badge/Donate-Venmo-g.svg)](https://www.venmo.com/adumesny) -Join us on Slack: https://gridstackjs.troolee.com +Join us on Slack: https://gridstackjs.slack.com -[![Slack Status](https://gridstackjs.troolee.com/badge.svg)](https://gridstackjs.troolee.com) +[![Slack Status](https://gridstackjs.troolee.com/badge.svg)](https://gridstackjs.slack.com) **Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)* @@ -42,6 +42,7 @@ Join us on Slack: https://gridstackjs.troolee.com - [Migrating to v3](#migrating-to-v3) - [Migrating to v4](#migrating-to-v4) - [Migrating to v5](#migrating-to-v5) + - [Migrating to v6](#migrating-to-v6) - [jQuery Application](#jquery-application) - [Changes](#changes) - [The Team](#the-team) @@ -71,44 +72,21 @@ ES6 or Typescript ```js import 'gridstack/dist/gridstack.min.css'; import { GridStack } from 'gridstack'; -// THEN to get HTML5 drag&drop -import 'gridstack/dist/h5/gridstack-dd-native'; -// OR to get legacy jquery-ui drag&drop (support Mobile touch devices, h5 does not yet) -import 'gridstack/dist/jq/gridstack-dd-jqueryui'; -// OR nothing to get static grids (API driven, no user drag&drop) ``` -**Note**: `jquery` & `jquery-ui` are imported by name, so you will have to specify their location in your webpack (or equivalent) config file, -which means you can possibly bring your own version -```js - alias: { - 'jquery': 'gridstack/dist/jq/jquery.js', - 'jquery-ui': 'gridstack/dist/jq/jquery-ui.js', - 'jquery.ui': 'gridstack/dist/jq/jquery-ui.js', - 'jquery.ui.touch-punch': 'gridstack/dist/jq/jquery.ui.touch-punch.js', - }, -``` - -Alternatively (single combined file) in html +Alternatively (single combined file, notice the -all.js) in html ```html - - - - - - + ``` -**Note**: the API is the same, regardless of the plugin (or lack thereof) so you can switch at any time. The Jquery version will export $ that it bundles and currently the only one to support mobile/touch devices through `jquery.ui.touch-punch` (h5 version is planned). Read more at [migrating to v3](#migrating-to-v3) - -**Note2**: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this might break in the future). +**Note**: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this likely will break again in the future). You can use the es5 files and polyfill (larger) for older browser instead. For example: ```html - + ``` @@ -161,7 +139,7 @@ see [jsfiddle sample](https://jsfiddle.net/adumesny/jqhkry7g) as running example ## Requirements -GridStack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). v3.0.0 is a complete HTML5 re-write which removes all jquery dependency (still available for legacy apps). All you need to include now is `gridstack-h5.js` and `gridstack.min.css` (layouts are done using CSS column based %). +GridStack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). v3 is a complete HTML5 re-write removing need for jquery (still available for legacy apps). v6 is native mouse and touch event for mobile support, and no longer have jquery-ui version. All you need to include now is `gridstack-all.js` and `gridstack.min.css` (layouts are done using CSS column based %). ## Extend Library @@ -455,9 +433,44 @@ make sure to read v4 migration first! v5 does not have any breaking changes from v4, but a focus on nested grids in h5 mode: You can now drag in/out of parent into nested child, with new API parameters values. See the release notes. +## Migrating to v6 + +the API did not really change from v5, but a complete re-write of Drag&Drop to use native mouseevent (instead of HTML draggable=true which is buggy on Mac Safari, and doesn't work on mobile devices) and touchevent (mobile), and we no longer have jquery ui option (wasn't working well for nested grids, didn't want to maintain legacy lib). + +The main difference is you only need to include gridstack.js and get D&D (desktop and mobile) out of the box for the same size as h5 version. + # jQuery Application -We now have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.13.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`. +This is **old and no longer apply to v6+**. You'll need to use v5.1.1 and before + +```js +import 'gridstack/dist/gridstack.min.css'; +import { GridStack } from 'gridstack'; +import 'gridstack/dist/jq/gridstack-dd-jqueryui'; +``` +**Note**: `jquery` & `jquery-ui` are imported by name, so you will have to specify their location in your webpack (or equivalent) config file, +which means you can possibly bring your own version +```js + alias: { + 'jquery': 'gridstack/dist/jq/jquery.js', + 'jquery-ui': 'gridstack/dist/jq/jquery-ui.js', + 'jquery.ui': 'gridstack/dist/jq/jquery-ui.js', + 'jquery.ui.touch-punch': 'gridstack/dist/jq/jquery.ui.touch-punch.js', + }, +``` +Alternatively (single combined file) in html + +```html + + + + + + + +``` + +We have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.13.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`. **NOTE: in v4, v3**: we ES6 module import jquery & jquery-ui by name, so you need to specify location of those .js files, which means you might be able to bring your own version as well. See the include instructions. diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 3610779f9..3d0d38e5a 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -5,7 +5,7 @@ Change log **Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)* -- [6.0.0-beta (TBD)](#600-beta-tbd) +- [6.0.0 (2022-08-21)](#600-2022-08-21) - [5.1.1 (2022-06-16)](#511-2022-06-16) - [5.1.0 (2022-05-21)](#510-2022-05-21) - [5.0.0 (2022-01-10)](#500-2022-01-10) @@ -69,9 +69,9 @@ Change log -## 6.0.0-beta (TBD) +## 6.0.0 (2022-08-21) * converted previous HTML5 `draggable=true` based code to simple Mouse Events and Touch mobile support for drag&Drop. -* removed all jquery-ui related code, and D7D plugging as we only support native events now +* removed all jquery-ui related code, and D&D plugging as we only support native events now * `alwaysShowResizeHandle` now support `'mobile'` which is the default, making it much easier (see doc) * changed `commit()` to be `batchUpdate(false)` to make it easier to turn batch on/off. updated doc. old API remains for now diff --git a/package.json b/package.json index b33ab08a1..48edb64e8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gridstack", - "version": "6.0.0-beta", + "version": "6.0.0", "description": "TypeScript/JS lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)", "main": "./dist/gridstack.js", "types": "./dist/gridstack.d.ts", diff --git a/src/dd-base-impl.ts b/src/dd-base-impl.ts index 10cf2ebee..bdb8377ef 100644 --- a/src/dd-base-impl.ts +++ b/src/dd-base-impl.ts @@ -1,5 +1,5 @@ /** - * dd-base-impl.ts 6.0.0-beta + * dd-base-impl.ts 6.0.0 * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts index 96455c5a7..b68f79d57 100644 --- a/src/dd-draggable.ts +++ b/src/dd-draggable.ts @@ -1,5 +1,5 @@ /** - * dd-draggable.ts 6.0.0-beta + * dd-draggable.ts 6.0.0 * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-droppable.ts b/src/dd-droppable.ts index 637607248..94dc35278 100644 --- a/src/dd-droppable.ts +++ b/src/dd-droppable.ts @@ -1,5 +1,5 @@ /** - * dd-droppable.ts 6.0.0-beta + * dd-droppable.ts 6.0.0 * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-element.ts b/src/dd-element.ts index ba2b5780f..a85041f13 100644 --- a/src/dd-element.ts +++ b/src/dd-element.ts @@ -1,5 +1,5 @@ /** - * dd-elements.ts 6.0.0-beta + * dd-elements.ts 6.0.0 * Copyright (c) 2021 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-gridstack.ts b/src/dd-gridstack.ts index fb5e3f21e..f4e5622fe 100644 --- a/src/dd-gridstack.ts +++ b/src/dd-gridstack.ts @@ -1,5 +1,5 @@ /** - * dd-gridstack.ts 6.0.0-beta + * dd-gridstack.ts 6.0.0 * Copyright (c) 2021 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-manager.ts b/src/dd-manager.ts index 007a98684..37807bc07 100644 --- a/src/dd-manager.ts +++ b/src/dd-manager.ts @@ -1,5 +1,5 @@ /** - * dd-manager.ts 6.0.0-beta + * dd-manager.ts 6.0.0 * Copyright (c) 2021 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-resizable-handle.ts b/src/dd-resizable-handle.ts index 0bfe64fec..61e87ce93 100644 --- a/src/dd-resizable-handle.ts +++ b/src/dd-resizable-handle.ts @@ -1,5 +1,5 @@ /** - * dd-resizable-handle.ts 6.0.0-beta + * dd-resizable-handle.ts 6.0.0 * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-resizable.ts b/src/dd-resizable.ts index c341d0433..cd35e4f33 100644 --- a/src/dd-resizable.ts +++ b/src/dd-resizable.ts @@ -1,5 +1,5 @@ /** - * dd-resizable.ts 6.0.0-beta + * dd-resizable.ts 6.0.0 * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license */ diff --git a/src/dd-touch.ts b/src/dd-touch.ts index 5ceb044fa..9ab5f31c3 100644 --- a/src/dd-touch.ts +++ b/src/dd-touch.ts @@ -1,5 +1,5 @@ /** - * touch.ts 6.0.0-beta + * touch.ts 6.0.0 * Copyright (c) 2021 Alain Dumesny - see GridStack root license */ diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts index bdd56957f..b8fe53250 100644 --- a/src/gridstack-engine.ts +++ b/src/gridstack-engine.ts @@ -1,5 +1,5 @@ /** - * gridstack-engine.ts 6.0.0-beta + * gridstack-engine.ts 6.0.0 * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license */ diff --git a/src/gridstack-poly.js b/src/gridstack-poly.js index c8817835c..58a09ee9c 100644 --- a/src/gridstack-poly.js +++ b/src/gridstack-poly.js @@ -1,5 +1,5 @@ /** - * gridstack-poly.ts 6.0.0-beta used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4) + * gridstack-poly.ts 6.0.0 used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4) * Copyright (c) 2021 Alain Dumesny - see GridStack root license */ diff --git a/src/gridstack.scss b/src/gridstack.scss index ab0a133ca..06978179b 100644 --- a/src/gridstack.scss +++ b/src/gridstack.scss @@ -1,5 +1,5 @@ /** - * gridstack SASS styles 6.0.0-beta + * gridstack SASS styles 6.0.0 * Copyright (c) 2021 Alain Dumesny - see GridStack root license */ diff --git a/src/gridstack.ts b/src/gridstack.ts index 1f9857c76..358e79b73 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -1,5 +1,5 @@ /*! - * GridStack 6.0.0-beta + * GridStack 6.0.0 * https://gridstackjs.com/ * * Copyright (c) 2021-2022 Alain Dumesny @@ -1513,7 +1513,7 @@ export class GridStack { return this; } - static GDRev = '6.0.0-beta'; + static GDRev = '6.0.0'; /* * drag&drop empty stubs that will be implemented in dd-gridstack.ts for non static grid diff --git a/src/types.ts b/src/types.ts index 825a72093..b4c4a1224 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,5 +1,5 @@ /** - * types.ts 6.0.0-beta + * types.ts 6.0.0 * Copyright (c) 2021 Alain Dumesny - see GridStack root license */ diff --git a/src/utils.ts b/src/utils.ts index d1e1479a0..8693a7b52 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,5 +1,5 @@ /** - * utils.ts 6.0.0-beta + * utils.ts 6.0.0 * Copyright (c) 2021 Alain Dumesny - see GridStack root license */