vgapp 1.5.7 → 1.5.8

package/app/modules/vgnav/js/vgnav.js

@@ -1,8 +1,8 @@
-/**
- * Описание: адаптивная навигация VGNav с выпадающими пунктами и гамбургером.
- * Возможности: click/hover, вложенные меню, позиционирование, события и интеграция с VGSidebar.
- */
-import BaseModule from "../../base-module";
+/**
+ * Описание: адаптивная навигация VGNav с выпадающими пунктами и гамбургером.
+ * Возможности: click/hover, вложенные меню, позиционирование, события и интеграция с VGSidebar.
+ */
+import BaseModule from "../../base-module";
 import Selectors from "../../../utils/js/dom/selectors";
 import {
 	execute,
@@ -33,7 +33,7 @@ const CLASS_NAME_ACTIVE    = 'active';
 /**
  * Constants toggle
  */
-const SELECTOR_DATA_TOGGLE = '.' + CLASS_NAME + ' .dropdown > a';
+const SELECTOR_DATA_TOGGLE = '.' + CLASS_NAME + ' .dropdown > a';
 
 /**
  * Constants Events
@@ -219,43 +219,43 @@ class VGNav extends BaseModule {
 		}
 	}
 
-	show(relatedTarget) {
-		let target = relatedTarget.relatedTarget;
-
-		if (!target || isDisabled(target)) return;
-		const drop = Selectors.find(':scope > .dropdown-content', target);
-		if (!drop) return;
-
-		const showEvent = EventHandler.trigger(target, EVENT_KEY_SHOW, { relatedTarget });
-		if (showEvent.defaultPrevented) return;
-
-		if (!target.closest('.dropdown-content')) {
-			target.classList.add('first');
-		}
-
-		const link = target.firstElementChild;
+	show(relatedTarget) {
+		let target = relatedTarget.relatedTarget;
+
+		if (!target || isDisabled(target)) return;
+		const drop = Selectors.find(':scope > .dropdown-content', target);
+		if (!drop) return;
+
+		const showEvent = EventHandler.trigger(target, EVENT_KEY_SHOW, { relatedTarget });
+		if (showEvent.defaultPrevented) return;
+
+		if (!target.closest('.dropdown-content')) {
+			target.classList.add('first');
+		}
+
+		const link = target.firstElementChild;
 
 		if (link) link.setAttribute('aria-expanded', 'true');
-		drop.classList.add(CLASS_NAME_SHOW);
-		target.classList.add(CLASS_NAME_ACTIVE);
-		// Координаты Placement имеют приоритет над старой CSS-схемой top/bottom/right.
-		drop.style.bottom = 'auto';
-		drop.style.right = 'auto';
-		const openToSide = !!target.closest('.dropdown-content') || this._params.placement === 'vertical';
-
-		const $placement = new Placement({
-			reference: target,
-			drop: drop,
-			placement: openToSide ? 'right-start' : 'bottom-start',
-			fallbackPlacements: openToSide
-				? ['left-start', 'right-end', 'left-end', 'bottom-start', 'top-start']
-				: ['top-start', 'bottom-end', 'top-end'],
-			offset: openToSide ? [6, 0] : [0, 6],
-			boundary: 'clippingParents',
-			autoFlip: true,
-			overflowProtection: true,
-			clamp: true,
-			isMerge: false
+		drop.classList.add(CLASS_NAME_SHOW);
+		target.classList.add(CLASS_NAME_ACTIVE);
+		// Координаты Placement имеют приоритет над старой CSS-схемой top/bottom/right.
+		drop.style.bottom = 'auto';
+		drop.style.right = 'auto';
+		const openToSide = !!target.closest('.dropdown-content') || this._params.placement === 'vertical';
+
+		const $placement = new Placement({
+			reference: target,
+			drop: drop,
+			placement: openToSide ? 'right-start' : 'bottom-start',
+			fallbackPlacements: openToSide
+				? ['left-start', 'right-end', 'left-end', 'bottom-start', 'top-start']
+				: ['top-start', 'bottom-end', 'top-end'],
+			offset: openToSide ? [6, 0] : [0, 6],
+			boundary: 'clippingParents',
+			autoFlip: true,
+			overflowProtection: true,
+			clamp: true,
+			isMerge: false
 		});
 
 		$placement._setPlacement();
@@ -277,8 +277,8 @@ class VGNav extends BaseModule {
 		this._queueCallback(completeCallBack, drop, true, 10);
 	}
 
-	hide(relatedTarget) {
-		const _this = this;
+	hide(relatedTarget) {
+		const _this = this;
 
 		let element = relatedTarget.relatedTarget;
 
@@ -296,7 +296,7 @@ class VGNav extends BaseModule {
 				element.classList.remove('first');
 			}
 
-			[...Selectors.findAll('.dropdown-content.' + CLASS_NAME_SHOW, element)].forEach(function (el) {
+			[...Selectors.findAll('.dropdown-content.' + CLASS_NAME_SHOW, element)].forEach(function (el) {
 				el.classList.remove(CLASS_NAME_FADE);
 
 				let parent = el.closest('.dropdown');
@@ -307,14 +307,14 @@ class VGNav extends BaseModule {
 				let link = el.previousElementSibling;
 				if (link) link.setAttribute('aria-expanded', 'false');
 
-				const completeCallback = () => {
-					if (parent.classList.contains(CLASS_NAME_ACTIVE)) return;
-					el.classList.remove(CLASS_NAME_SHOW);
-					EventHandler.trigger(el, EVENT_KEY_HIDDEN, relatedTarget);
-				};
-
-				_this._queueCallback(completeCallback, el, true, 500);
-				_this._cleanupDrop(el);
+				const completeCallback = () => {
+					if (parent.classList.contains(CLASS_NAME_ACTIVE)) return;
+					el.classList.remove(CLASS_NAME_SHOW);
+					EventHandler.trigger(el, EVENT_KEY_HIDDEN, relatedTarget);
+				};
+
+				_this._queueCallback(completeCallback, el, true, 500);
+				_this._cleanupDrop(el);
 			});
 		}
 	}
@@ -342,16 +342,16 @@ class VGNav extends BaseModule {
 		}
 	}
 
-	_cleanupDrop(drop) {
-		const dropData = this._openDrops.get(drop);
-		if (dropData) {
-			this._openDrops.delete(drop);
-			// Обработчики общие для экземпляра: другие открытые уровни ещё нуждаются в них.
-			if (!this._openDrops.size) {
-				window.removeEventListener('scroll', dropData.scrollHandler, { capture: true });
-				window.removeEventListener('resize', dropData.resizeHandler);
-			}
-		}
+	_cleanupDrop(drop) {
+		const dropData = this._openDrops.get(drop);
+		if (dropData) {
+			this._openDrops.delete(drop);
+			// Обработчики общие для экземпляра: другие открытые уровни ещё нуждаются в них.
+			if (!this._openDrops.size) {
+				window.removeEventListener('scroll', dropData.scrollHandler, { capture: true });
+				window.removeEventListener('resize', dropData.resizeHandler);
+			}
+		}
 	}
 
 	_isElementInViewport(el) {

package/app/modules/vgnav/scss/_breakpoints.scss

@@ -1,8 +1,8 @@
-@use "sass:list";
-@use "sass:map";
-@use "variables" as vars;
-
-// Breakpoint viewport sizes and media queries.
+@use "sass:list";
+@use "sass:map";
+@use "variables" as vars;
+
+// Breakpoint viewport sizes and media queries.
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
 //
@@ -18,27 +18,27 @@
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
 //    md
-@function breakpoint-next($name, $breakpoints: vars.$grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
-	$n: list.index($breakpoint-names, $name);
-	@if not $n {
-		@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
-	}
-	@if $n < list.length($breakpoint-names) {
-		@return list.nth($breakpoint-names, $n + 1);
-	}
-	@return null;
+@function breakpoint-next($name, $breakpoints: vars.$grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+	$n: list.index($breakpoint-names, $name);
+	@if not $n {
+		@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+	}
+	@if $n < list.length($breakpoint-names) {
+		@return list.nth($breakpoint-names, $n + 1);
+	}
+	@return null;
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    576px
-@function breakpoint-min($name, $breakpoints: vars.$grid-breakpoints) {
-	$min: map.get($breakpoints, $name);
-	@if $min != 0 {
-		@return $min;
-	}
-	@return null;
+@function breakpoint-min($name, $breakpoints: vars.$grid-breakpoints) {
+	$min: map.get($breakpoints, $name);
+	@if $min != 0 {
+		@return $min;
+	}
+	@return null;
 }
 
 // Maximum breakpoint width.
@@ -50,12 +50,12 @@
 //
 //    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    767.98px
-@function breakpoint-max($name, $breakpoints: vars.$grid-breakpoints) {
-	$max: map.get($breakpoints, $name);
-	@if $max and $max > 0 {
-		@return $max - .02;
-	}
-	@return null;
+@function breakpoint-max($name, $breakpoints: vars.$grid-breakpoints) {
+	$max: map.get($breakpoints, $name);
+	@if $max and $max > 0 {
+		@return $max - .02;
+	}
+	@return null;
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@@ -65,16 +65,16 @@
 //    ""  (Returns a blank string)
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    "-sm"
-@function breakpoint-infix($name, $breakpoints: vars.$grid-breakpoints) {
-	@if breakpoint-min($name, $breakpoints) == null {
-		@return "";
-	}
-	@return "-#{$name}";
+@function breakpoint-infix($name, $breakpoints: vars.$grid-breakpoints) {
+	@if breakpoint-min($name, $breakpoints) == null {
+		@return "";
+	}
+	@return "-#{$name}";
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: vars.$grid-breakpoints) {
+@mixin media-breakpoint-up($name, $breakpoints: vars.$grid-breakpoints) {
 	$min: breakpoint-min($name, $breakpoints);
 	@if $min {
 		@media (min-width: $min) {
@@ -87,7 +87,7 @@
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $breakpoints: vars.$grid-breakpoints) {
+@mixin media-breakpoint-down($name, $breakpoints: vars.$grid-breakpoints) {
 	$max: breakpoint-max($name, $breakpoints);
 	@if $max {
 		@media (max-width: $max) {
@@ -100,7 +100,7 @@
 
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: vars.$grid-breakpoints) {
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: vars.$grid-breakpoints) {
 	$min: breakpoint-min($lower, $breakpoints);
 	$max: breakpoint-max($upper, $breakpoints);
 
@@ -122,7 +122,7 @@
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $breakpoints: vars.$grid-breakpoints) {
+@mixin media-breakpoint-only($name, $breakpoints: vars.$grid-breakpoints) {
 	$min: breakpoint-min($name, $breakpoints);
 	$next: breakpoint-next($name, $breakpoints);
 	$max: breakpoint-max($next, $breakpoints);
@@ -140,4 +140,4 @@
 			@content;
 		}
 	}
-}
+}

package/app/modules/vgnav/scss/_hamburger.scss

@@ -1,5 +1,5 @@
-@mixin hamburger() {
-.vg-nav-hamburger {
+@mixin hamburger() {
+.vg-nav-hamburger {
 	display: none;
 	align-items: flex-start;
 
@@ -60,6 +60,6 @@
 			}
 		}
 	}
-}
-
-}
+}
+
+}

package/app/modules/vgnav/scss/_placement.scss

@@ -1,5 +1,5 @@
-@mixin placement() {
-&.vg-nav-horizontal {
+@mixin placement() {
+&.vg-nav-horizontal {
 	.vg-nav-wrapper {
 		flex-direction: row;
 	}
@@ -23,6 +23,6 @@
 			}
 		}
 	}
-}
-
-}
+}
+
+}

package/app/modules/vgnav/scss/_toggle.scss

@@ -1,5 +1,5 @@
-@mixin toggle() {
-.toggle {
+@mixin toggle() {
+.toggle {
 	transition: var(--vg-nav-transition);
 	transform: rotate(0);
 
@@ -18,6 +18,6 @@
 			vertical-align: .255em;
 		}
 	}
-}
-
-}
+}
+
+}

package/app/modules/vgnav/scss/_variables.scss

@@ -1,9 +1,9 @@
-@use "sass:map";
-@use "../../../utils/scss" as vg;
-
-$nav-map: (
-		transition: all .2s ease-in-out,
-) !default;
+@use "sass:map";
+@use "../../../utils/scss" as vg;
+
+$nav-map: (
+		transition: all .2s ease-in-out,
+) !default;
 
 $nav-item-map: (
 		margin: 0,
@@ -11,39 +11,39 @@ $nav-item-map: (
 		font-size: 1rem,
 		font-weight: 400,
 		line-height: 1.4,
-		color: var(--vg-text-color, #212529),
+		color: var(--vg-text-color, #212529),
 		decoration: none,
 		display: inline-block,
 		border: none,
 		border-radius: 0,
 		white-space: nowrap,
-		position: relative,
-) !default;
+		position: relative,
+) !default;
 
 $nav-drop-map: (
 		z-index: 10,
-		transition: map.get($nav-map, transition),
+		transition: map.get($nav-map, transition),
 		width: 200px,
 		max-height: 650px,
-		border-color: var(--vg-border-color, #{vg.$border-color}),
+		border-color: var(--vg-border-color, #{vg.$border-color}),
 		border-radius: 0,
 		padding: 0,
-		bg: var(--vg-surface-bg, #{vg.$surface-bg}),
+		bg: var(--vg-surface-bg, #{vg.$surface-bg}),
 		overflow-y: auto,
-		overflow-x: visible,
-) !default;
+		overflow-x: visible,
+) !default;
 
 $nav-drop-mega-map: (
 		width: 100%,
 		min-height: 300px,
-		bg: var(--vg-surface-bg, #{vg.$surface-bg}),
-		border-color: var(--vg-border-color, #{vg.$border-color}),
+		bg: var(--vg-surface-bg, #{vg.$surface-bg}),
+		border-color: var(--vg-border-color, #{vg.$border-color}),
 		border-radius: 0,
 		padding: 1rem,
 		z-index: 10,
-		transition: map.get($nav-map, transition),
-		max-height: 600px,
-) !default;
+		transition: map.get($nav-map, transition),
+		max-height: 600px,
+) !default;
 
 $nav-drop-item-map: (
 		padding: .75rem 1rem,
@@ -53,16 +53,16 @@ $nav-drop-item-map: (
 		bg-hover: transparent,
 		color: inherit,
 		color-hover: inherit,
-		transition: map.get($nav-map, transition),
-) !default;
+		transition: map.get($nav-map, transition),
+) !default;
 
 $hamburger-map: (
 		height: 27px,
 		line-width: 35px,
-		line-color: var(--vg-text-emphasis-color, #333333),
+		line-color: var(--vg-text-emphasis-color, #333333),
 		line-height: 3px,
-		line-indent-top: 7px
-) !default;
+		line-indent-top: 7px
+) !default;
 
 $grid-breakpoints: (
 		xs: 576px,
@@ -71,5 +71,5 @@ $grid-breakpoints: (
 		lg: 1200px,
 		xl: 1400px,
 		xxl: 1600px,
-		xxxl: 1800px
-) !default;
+		xxxl: 1800px
+) !default;

package/app/modules/vgnav/scss/vgnav.scss

@@ -6,23 +6,23 @@
 *--------------------------------------------------------------------------
 **/
 
-@forward "variables";
-@forward "breakpoints";
-@use "sass:map";
-@use "../../../utils/scss" as vg;
-@use "breakpoints";
-@use "hamburger";
-@use "placement";
-@use "toggle";
-@use "variables" as vars;
+@forward "variables";
+@forward "breakpoints";
+@use "sass:map";
+@use "../../../utils/scss" as vg;
+@use "breakpoints";
+@use "hamburger";
+@use "placement";
+@use "toggle";
+@use "variables" as vars;
 
 .vg-nav {
-	@include vg.mix-vars('nav', vars.$nav-map);
-	@include vg.mix-vars('nav-item', vars.$nav-item-map);
-	@include vg.mix-vars('nav-drop', vars.$nav-drop-map);
-	@include vg.mix-vars('nav-drop-mega', vars.$nav-drop-mega-map);
-	@include vg.mix-vars('nav-drop-item', vars.$nav-drop-item-map);
-	@include vg.mix-vars('nav-hamburger', vars.$hamburger-map);
+	@include vg.mix-vars('nav', vars.$nav-map);
+	@include vg.mix-vars('nav-item', vars.$nav-item-map);
+	@include vg.mix-vars('nav-drop', vars.$nav-drop-map);
+	@include vg.mix-vars('nav-drop-mega', vars.$nav-drop-mega-map);
+	@include vg.mix-vars('nav-drop-item', vars.$nav-drop-item-map);
+	@include vg.mix-vars('nav-hamburger', vars.$hamburger-map);
 
 	.vg-nav-wrapper {
 		display: flex;
@@ -52,7 +52,7 @@
 		li {
 			a {
 				/** set toggle **/
-				@include toggle.toggle();
+				@include toggle.toggle();
 			}
 		}
 
@@ -74,9 +74,9 @@
 				background-color: var(--vg-nav-drop-bg);
 				overflow: visible;
 
-				&:not(.show) {
-					display: none;
-				}
+				&:not(.show) {
+					display: none;
+				}
 
 				&.fade {
 					visibility: visible;
@@ -133,32 +133,32 @@
 					}
 				}
 			}
-		}
-	}
-
-	&.vg-nav-drop-list-scroll {
-		.vg-nav-wrapper {
-			.dropdown {
-				.dropdown-content {
-					> .vg-nav-drop-list {
-						max-height: var(--vg-nav-drop-max-height);
-						overflow-y: var(--vg-nav-drop-overflow-y);
-						overflow-x: var(--vg-nav-drop-overflow-x);
-					}
-				}
-			}
-		}
-	}
-
-	/** set placement **/
-	@include placement.placement();
+		}
+	}
+
+	&.vg-nav-drop-list-scroll {
+		.vg-nav-wrapper {
+			.dropdown {
+				.dropdown-content {
+					> .vg-nav-drop-list {
+						max-height: var(--vg-nav-drop-max-height);
+						overflow-y: var(--vg-nav-drop-overflow-y);
+						overflow-x: var(--vg-nav-drop-overflow-x);
+					}
+				}
+			}
+		}
+	}
+
+	/** set placement **/
+	@include placement.placement();
 
 	/** set hamburger **/
-	@include hamburger.hamburger();
+	@include hamburger.hamburger();
 
 	&:not(.vg-nav-expand) {
-		@each $breakpoint in map.keys(vars.$grid-breakpoints) {
-			@include breakpoints.media-breakpoint-down($breakpoint, vars.$grid-breakpoints) {
+		@each $breakpoint in map.keys(vars.$grid-breakpoints) {
+			@include breakpoints.media-breakpoint-down($breakpoint, vars.$grid-breakpoints) {
 				&.vg-nav-#{$breakpoint} {
 					.vg-nav-hamburger {
 						display: flex;

package/app/modules/vgnestable/README.md

@@ -69,18 +69,18 @@ const nestable = VGNestable.getOrCreateInstance("#myNestable", {
 Значения по умолчанию:
 
 ```js
-{
-  disabled: false,
-  disabledattribute: "data-disabled",
-  listselector: ".vg-nestable-list",
+{
+  disabled: false,
+  disabledattribute: "data-disabled",
+  listselector: ".vg-nestable-list",
   itemselector: ".vg-nestable-item",
   handleselector: ".vg-nestable-handle",
   idattribute: "data-id",
   childlistclass: "vg-nestable-list",
   handleicon: "",
-  indent: 18,
+  indent: 18,
   maxdepth: 6,
-  hoverthreshold: 0.25,
+  hoverthreshold: 0.25,
   neighborchangethreshold: 0,
   showplaceholder: true,
   group: "",
@@ -119,49 +119,49 @@ const nestable = VGNestable.getOrCreateInstance("#myNestable", {
 }
 ```
 
-### Пояснение параметров
-
-- `disabled`: полностью отключает изменение дерева мышью, touch и клавиатурой. Также читается из `data-disabled="true"` корневого элемента.
-- `disabledattribute`: атрибут блокировки отдельных элементов и вложенных списков (`data-disabled` по умолчанию).
-- `listselector`: селектор корневого/вложенных списков.
+### Пояснение параметров
+
+- `disabled`: полностью отключает изменение дерева мышью, touch и клавиатурой. Также читается из `data-disabled="true"` корневого элемента.
+- `disabledattribute`: атрибут блокировки отдельных элементов и вложенных списков (`data-disabled` по умолчанию).
+- `listselector`: селектор корневого/вложенных списков.
 - `itemselector`: селектор sortable-элемента.
 - `handleselector`: селектор зоны, за которую можно начинать drag.
 - `idattribute`: атрибут, из которого берется `id` в `serialize()`.
 - `childlistclass`: классы для автосозданного дочернего списка.
 - `handleicon`: HTML/SVG иконки хэндла (проходит SVG-санитизацию).
-- `indent`: ширина одного горизонтального шага вложенности. Каждый следующий шаг вправо переносит элемент ещё на один доступный уровень под предыдущий элемент.
+- `indent`: ширина одного горизонтального шага вложенности. Каждый следующий шаг вправо переносит элемент ещё на один доступный уровень под предыдущий элемент.
 - `maxdepth`: максимальная глубина дерева.
-- `hoverthreshold`: половина высоты центральной зоны (0.05..0.45), используемой для вложения; выше и ниже неё находятся зоны `before/after`.
+- `hoverthreshold`: половина высоты центральной зоны (0.05..0.45), используемой для вложения; выше и ниже неё находятся зоны `before/after`.
 - `neighborchangethreshold`: порог в процентах (0..49), альтернативная логика смены позиции по краям элемента.
 - `showplaceholder`: показывать/скрывать placeholder во время drag.
 - `group`: имя группы списков для межспискового dnd.
 - `connect`: включить связь списков внутри группы.
-- `accept(item, sourceInstance, targetInstance)`: функция-фильтр разрешения дропа в target.
-
-### Блокировка перетаскивания
-
-Заблокировать всё дерево, в том числе запретить перенос в него из связанного списка:
-
-```html
-<div class="vg-nestable" data-vg-toggle="nestable" data-disabled="true">
-  <ol class="vg-nestable-list">...</ol>
-</div>
-```
-
-Заблокировать только конкретный элемент. Другие элементы по-прежнему могут вставляться до/после него, поэтому его индекс в результате может измениться:
-
-```html
-<li class="vg-nestable-item" data-id="2" data-disabled="true">...</li>
-```
-
-Заблокировать внутреннюю группу. Её элементы нельзя переносить отдельно или добавлять в эту группу, но родительскую ветку можно перемещать целиком:
-
-```html
-<li class="vg-nestable-item" data-id="1">
-  <div class="vg-nestable-inner">...</div>
-  <ol class="vg-nestable-list" data-disabled="true">...</ol>
-</li>
-```
+- `accept(item, sourceInstance, targetInstance)`: функция-фильтр разрешения дропа в target.
+
+### Блокировка перетаскивания
+
+Заблокировать всё дерево, в том числе запретить перенос в него из связанного списка:
+
+```html
+<div class="vg-nestable" data-vg-toggle="nestable" data-disabled="true">
+  <ol class="vg-nestable-list">...</ol>
+</div>
+```
+
+Заблокировать только конкретный элемент. Другие элементы по-прежнему могут вставляться до/после него, поэтому его индекс в результате может измениться:
+
+```html
+<li class="vg-nestable-item" data-id="2" data-disabled="true">...</li>
+```
+
+Заблокировать внутреннюю группу. Её элементы нельзя переносить отдельно или добавлять в эту группу, но родительскую ветку можно перемещать целиком:
+
+```html
+<li class="vg-nestable-item" data-id="1">
+  <div class="vg-nestable-inner">...</div>
+  <ol class="vg-nestable-list" data-disabled="true">...</ol>
+</li>
+```
 
 #### `collapse`