vgapp 1.4.4 → 1.4.6

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`