vgapp 1.1.2 → 1.1.3

package/app/modules/vgnestable/scss/_variables.scss

@@ -1,60 +1,60 @@
-$nestable-map: (
-	list-transition: "background-color .15s ease, outline-color .15s ease",
-	list-drop-target-bg: rgba(13, 110, 253, .06),
-	list-drop-target-outline: 1px dashed rgba(13, 110, 253, .45),
-	list-drop-target-outline-offset: 2px,
-	list-drop-denied-bg: rgba(220, 53, 69, .06),
-	list-drop-denied-outline: 1px dashed rgba(220, 53, 69, .5),
-	list-drop-denied-outline-offset: 2px,
-	list-nested-margin-top: .35rem,
-	list-nested-padding-left: 1.25rem,
-	list-nested-border-left: 1px dashed rgba(0, 0, 0, .12),
-
-	item-margin: .35rem 0,
-	item-transition: opacity .15s ease,
-	item-dragging-opacity: .85,
-	item-ghost-opacity: .3,
-
-	inner-gap: .5rem,
-	inner-min-height: 40px,
-	inner-padding: .45rem .65rem,
-	inner-border: 1px solid rgba(0, 0, 0, .12),
-	inner-bg: #fff,
-	inner-border-radius: .45rem,
-
-	handle-size: 1.85rem,
-	handle-border: 1px solid rgba(0, 0, 0, .12),
-	handle-bg: rgba(0, 0, 0, .03),
-	handle-border-radius: .35rem,
-	handle-cursor: grab,
-	handle-active-cursor: grabbing,
-
-	toggle-size: 1.85rem,
-	toggle-border: 1px solid rgba(0, 0, 0, .12),
-	toggle-bg: rgba(0, 0, 0, .03),
-	toggle-border-radius: .35rem,
-	toggle-color: rgba(0, 0, 0, .65),
-	toggle-font-weight: 700,
-	toggle-line-height: 1,
-	toggle-hover-bg: rgba(0, 0, 0, .07),
-	toggle-svg-size: 16px,
-	toggle-svg-transition: transform .2s ease,
-	toggle-svg-closed-transform: rotate(0deg),
-	toggle-svg-open-transform: rotate(180deg),
-
-	handle-icon-min-width: .9rem,
-	handle-icon-color: rgba(0, 0, 0, .45),
-	handle-icon-font-weight: 700,
-	handle-icon-line-height: 1,
-	handle-icon-letter-spacing: .06em,
-
-	placeholder-border: 1px dashed rgba(13, 110, 253, .7),
-	placeholder-bg: rgba(13, 110, 253, .08),
-	placeholder-border-radius: .45rem,
-	placeholder-margin: .35rem 0,
-	placeholder-min-height: 40px,
-
-	drag-element-opacity: .92,
-	drag-element-transform: rotate(.5deg),
-	drag-element-shadow: 0 8px 22px rgba(0, 0, 0, .18)
-);
+$nestable-map: (
+	list-transition: "background-color .15s ease, outline-color .15s ease",
+	list-drop-target-bg: rgba(13, 110, 253, .06),
+	list-drop-target-outline: 1px dashed rgba(13, 110, 253, .45),
+	list-drop-target-outline-offset: 2px,
+	list-drop-denied-bg: rgba(220, 53, 69, .06),
+	list-drop-denied-outline: 1px dashed rgba(220, 53, 69, .5),
+	list-drop-denied-outline-offset: 2px,
+	list-nested-margin-top: .35rem,
+	list-nested-padding-left: 1.25rem,
+	list-nested-border-left: 1px dashed rgba(0, 0, 0, .12),
+
+	item-margin: .35rem 0,
+	item-transition: opacity .15s ease,
+	item-dragging-opacity: .85,
+	item-ghost-opacity: .3,
+
+	inner-gap: .5rem,
+	inner-min-height: 40px,
+	inner-padding: .45rem .65rem,
+	inner-border: 1px solid rgba(0, 0, 0, .12),
+	inner-bg: #fff,
+	inner-border-radius: .45rem,
+
+	handle-size: 1.85rem,
+	handle-border: 1px solid rgba(0, 0, 0, .12),
+	handle-bg: rgba(0, 0, 0, .03),
+	handle-border-radius: .35rem,
+	handle-cursor: grab,
+	handle-active-cursor: grabbing,
+
+	toggle-size: 1.85rem,
+	toggle-border: 1px solid rgba(0, 0, 0, .12),
+	toggle-bg: rgba(0, 0, 0, .03),
+	toggle-border-radius: .35rem,
+	toggle-color: rgba(0, 0, 0, .65),
+	toggle-font-weight: 700,
+	toggle-line-height: 1,
+	toggle-hover-bg: rgba(0, 0, 0, .07),
+	toggle-svg-size: 16px,
+	toggle-svg-transition: transform .2s ease,
+	toggle-svg-closed-transform: rotate(0deg),
+	toggle-svg-open-transform: rotate(180deg),
+
+	handle-icon-min-width: .9rem,
+	handle-icon-color: rgba(0, 0, 0, .45),
+	handle-icon-font-weight: 700,
+	handle-icon-line-height: 1,
+	handle-icon-letter-spacing: .06em,
+
+	placeholder-border: 1px dashed rgba(13, 110, 253, .7),
+	placeholder-bg: rgba(13, 110, 253, .08),
+	placeholder-border-radius: .45rem,
+	placeholder-margin: .35rem 0,
+	placeholder-min-height: 40px,
+
+	drag-element-opacity: .92,
+	drag-element-transform: rotate(.5deg),
+	drag-element-shadow: 0 8px 22px rgba(0, 0, 0, .18)
+);

package/app/modules/vgnestable/scss/vgnestable.scss

@@ -1,163 +1,163 @@
-/**
-*--------------------------------------------------------------------------
-* Module: VGNestable
-* Author: Vegas DEV
-* License: see LICENSE
-*--------------------------------------------------------------------------
-**/
-
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
-
-.vg-nestable {
-	@include mix-vars('nestable', $nestable-map);
-
-	&-list {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		transition: var(--vg-nestable-list-transition);
-
-		&.is-drop-target {
-			background: var(--vg-nestable-list-drop-target-bg);
-			outline: var(--vg-nestable-list-drop-target-outline);
-			outline-offset: var(--vg-nestable-list-drop-target-outline-offset);
-		}
-
-		&.is-drop-denied {
-			background: var(--vg-nestable-list-drop-denied-bg);
-			outline: var(--vg-nestable-list-drop-denied-outline);
-			outline-offset: var(--vg-nestable-list-drop-denied-outline-offset);
-		}
-
-		.vg-nestable-list {
-			margin-top: var(--vg-nestable-list-nested-margin-top);
-			padding-left: var(--vg-nestable-list-nested-padding-left);
-			border-left: var(--vg-nestable-list-nested-border-left);
-		}
-	}
-
-	&-item {
-		margin: var(--vg-nestable-item-margin);
-		position: relative;
-		transition: var(--vg-nestable-item-transition);
-
-		&.is-dragging {
-			opacity: var(--vg-nestable-item-dragging-opacity);
-		}
-
-		&.is-drag-ghost {
-			opacity: var(--vg-nestable-item-ghost-opacity);
-		}
-	}
-
-	&-inner {
-		display: flex;
-		align-items: center;
-		gap: var(--vg-nestable-inner-gap);
-		min-height: var(--vg-nestable-inner-min-height);
-		padding: var(--vg-nestable-inner-padding);
-		border: var(--vg-nestable-inner-border);
-		background: var(--vg-nestable-inner-bg);
-		border-radius: var(--vg-nestable-inner-border-radius);
-	}
-
-	&-handle {
-		flex: 0 0 auto;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: var(--vg-nestable-handle-size);
-		min-height: var(--vg-nestable-handle-size);
-		padding: 0;
-		border: var(--vg-nestable-handle-border);
-		background: var(--vg-nestable-handle-bg);
-		border-radius: var(--vg-nestable-handle-border-radius);
-		cursor: var(--vg-nestable-handle-cursor);
-		user-select: none;
-
-		&:active {
-			cursor: var(--vg-nestable-handle-active-cursor);
-		}
-	}
-
-	&-collapse-toggle {
-		flex: 0 0 auto;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: var(--vg-nestable-toggle-size);
-		min-height: var(--vg-nestable-toggle-size);
-		padding: 0;
-		border: var(--vg-nestable-toggle-border);
-		background: var(--vg-nestable-toggle-bg);
-		border-radius: var(--vg-nestable-toggle-border-radius);
-		cursor: pointer;
-		color: var(--vg-nestable-toggle-color);
-		font-weight: var(--vg-nestable-toggle-font-weight);
-		line-height: var(--vg-nestable-toggle-line-height);
-
-		&:hover {
-			background: var(--vg-nestable-toggle-hover-bg);
-		}
-
-		svg {
-			width: var(--vg-nestable-toggle-svg-size);
-			height: var(--vg-nestable-toggle-svg-size);
-			transition: var(--vg-nestable-toggle-svg-transition);
-			transform: var(--vg-nestable-toggle-svg-closed-transform);
-
-			path {
-				fill: currentColor;
-			}
-		}
-
-		&[aria-expanded="true"] {
-			svg {
-				transform: var(--vg-nestable-toggle-svg-open-transform);
-			}
-		}
-	}
-
-	&-handle-icon {
-		flex: 0 0 auto;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		min-width: var(--vg-nestable-handle-icon-min-width);
-		color: var(--vg-nestable-handle-icon-color);
-		font-weight: var(--vg-nestable-handle-icon-font-weight);
-		line-height: var(--vg-nestable-handle-icon-line-height);
-		letter-spacing: var(--vg-nestable-handle-icon-letter-spacing);
-	}
-
-	&-content {
-		flex: 1 1 auto;
-		min-width: 0;
-	}
-
-	&-placeholder {
-		list-style: none;
-		border: var(--vg-nestable-placeholder-border);
-		background: var(--vg-nestable-placeholder-bg);
-		border-radius: var(--vg-nestable-placeholder-border-radius);
-		margin: var(--vg-nestable-placeholder-margin);
-		min-height: var(--vg-nestable-placeholder-min-height);
-	}
-
-	&-placeholder-hidden {
-		border: 0;
-		background: transparent;
-		margin: 0;
-		min-height: 0;
-		height: 0 !important;
-	}
-
-	&-drag-element {
-		opacity: var(--vg-nestable-drag-element-opacity);
-		transform: var(--vg-nestable-drag-element-transform);
-		box-shadow: var(--vg-nestable-drag-element-shadow);
-	}
-}
+/**
+*--------------------------------------------------------------------------
+* Module: VGNestable
+* Author: Vegas DEV
+* License: see LICENSE
+*--------------------------------------------------------------------------
+**/
+
+@import "../../../utils/scss/functions";
+@import "../../../utils/scss/mixin";
+@import "../../../utils/scss/variables";
+@import "variables";
+
+.vg-nestable {
+	@include mix-vars('nestable', $nestable-map);
+
+	&-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		transition: var(--vg-nestable-list-transition);
+
+		&.is-drop-target {
+			background: var(--vg-nestable-list-drop-target-bg);
+			outline: var(--vg-nestable-list-drop-target-outline);
+			outline-offset: var(--vg-nestable-list-drop-target-outline-offset);
+		}
+
+		&.is-drop-denied {
+			background: var(--vg-nestable-list-drop-denied-bg);
+			outline: var(--vg-nestable-list-drop-denied-outline);
+			outline-offset: var(--vg-nestable-list-drop-denied-outline-offset);
+		}
+
+		.vg-nestable-list {
+			margin-top: var(--vg-nestable-list-nested-margin-top);
+			padding-left: var(--vg-nestable-list-nested-padding-left);
+			border-left: var(--vg-nestable-list-nested-border-left);
+		}
+	}
+
+	&-item {
+		margin: var(--vg-nestable-item-margin);
+		position: relative;
+		transition: var(--vg-nestable-item-transition);
+
+		&.is-dragging {
+			opacity: var(--vg-nestable-item-dragging-opacity);
+		}
+
+		&.is-drag-ghost {
+			opacity: var(--vg-nestable-item-ghost-opacity);
+		}
+	}
+
+	&-inner {
+		display: flex;
+		align-items: center;
+		gap: var(--vg-nestable-inner-gap);
+		min-height: var(--vg-nestable-inner-min-height);
+		padding: var(--vg-nestable-inner-padding);
+		border: var(--vg-nestable-inner-border);
+		background: var(--vg-nestable-inner-bg);
+		border-radius: var(--vg-nestable-inner-border-radius);
+	}
+
+	&-handle {
+		flex: 0 0 auto;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--vg-nestable-handle-size);
+		min-height: var(--vg-nestable-handle-size);
+		padding: 0;
+		border: var(--vg-nestable-handle-border);
+		background: var(--vg-nestable-handle-bg);
+		border-radius: var(--vg-nestable-handle-border-radius);
+		cursor: var(--vg-nestable-handle-cursor);
+		user-select: none;
+
+		&:active {
+			cursor: var(--vg-nestable-handle-active-cursor);
+		}
+	}
+
+	&-collapse-toggle {
+		flex: 0 0 auto;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--vg-nestable-toggle-size);
+		min-height: var(--vg-nestable-toggle-size);
+		padding: 0;
+		border: var(--vg-nestable-toggle-border);
+		background: var(--vg-nestable-toggle-bg);
+		border-radius: var(--vg-nestable-toggle-border-radius);
+		cursor: pointer;
+		color: var(--vg-nestable-toggle-color);
+		font-weight: var(--vg-nestable-toggle-font-weight);
+		line-height: var(--vg-nestable-toggle-line-height);
+
+		&:hover {
+			background: var(--vg-nestable-toggle-hover-bg);
+		}
+
+		svg {
+			width: var(--vg-nestable-toggle-svg-size);
+			height: var(--vg-nestable-toggle-svg-size);
+			transition: var(--vg-nestable-toggle-svg-transition);
+			transform: var(--vg-nestable-toggle-svg-closed-transform);
+
+			path {
+				fill: currentColor;
+			}
+		}
+
+		&[aria-expanded="true"] {
+			svg {
+				transform: var(--vg-nestable-toggle-svg-open-transform);
+			}
+		}
+	}
+
+	&-handle-icon {
+		flex: 0 0 auto;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: var(--vg-nestable-handle-icon-min-width);
+		color: var(--vg-nestable-handle-icon-color);
+		font-weight: var(--vg-nestable-handle-icon-font-weight);
+		line-height: var(--vg-nestable-handle-icon-line-height);
+		letter-spacing: var(--vg-nestable-handle-icon-letter-spacing);
+	}
+
+	&-content {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+
+	&-placeholder {
+		list-style: none;
+		border: var(--vg-nestable-placeholder-border);
+		background: var(--vg-nestable-placeholder-bg);
+		border-radius: var(--vg-nestable-placeholder-border-radius);
+		margin: var(--vg-nestable-placeholder-margin);
+		min-height: var(--vg-nestable-placeholder-min-height);
+	}
+
+	&-placeholder-hidden {
+		border: 0;
+		background: transparent;
+		margin: 0;
+		min-height: 0;
+		height: 0 !important;
+	}
+
+	&-drag-element {
+		opacity: var(--vg-nestable-drag-element-opacity);
+		transform: var(--vg-nestable-drag-element-transform);
+		box-shadow: var(--vg-nestable-drag-element-shadow);
+	}
+}

package/app/modules/vgselect/js/vgselect.js

@@ -52,7 +52,7 @@ const SELECTOR_DROPDOWN         = `.${CLASS_NAME_DROPDOWN}`;
 const SELECTOR_SEARCH_INPUT     = `.${CLASS_NAME_SEARCH} input`;
 const SELECTOR_LIST             = `.${CLASS_NAME_LIST}`;
 const SELECTOR_LOAD_MORE_BTN    = `.${CLASS_NAME_LOAD_MORE}`;
-const DATA_ATTR_COPY_EXCLUDE_DEFAULT = ['inited', 'updating', 'exclude'];
+const DATA_ATTR_COPY_EXCLUDE_DEFAULT = ['inited', 'updating', 'exclude'];
 
 /**
  * Класс VGSelect
@@ -90,7 +90,7 @@ class VGSelect extends BaseModule {
 			},
 			close: true,
 			tree: false,
-			exclude: 'data-filter-param',
+			exclude: 'data-filter-param',
 			placeholder: '',
 			onInit: null,
 			onShow: null,
@@ -275,12 +275,12 @@ class VGSelect extends BaseModule {
 		return new Set([...DATA_ATTR_COPY_EXCLUDE_DEFAULT, ...customExcluded]);
 	}
 
-	static _normalizeDataAttrKey(value) {
-		return String(value || '')
-			.trim()
-			.replace(/^data-/, '')
-			.toLowerCase();
-	}
+	static _normalizeDataAttrKey(value) {
+		return String(value || '')
+			.trim()
+			.replace(/^data-/, '')
+			.toLowerCase();
+	}
 
 	/**
 	 * Проверяет, является ли значение "пустым" (соответствует placeholder)
@@ -788,28 +788,28 @@ class VGSelect extends BaseModule {
 	 * @param {string} value - Значение для выбора
 	 * @param {Object} [data] - Дополнительные данные
 	 */
-	static changeSelector(select, value, data = {}) {
-		const container = select.nextElementSibling;
-		const instance = container ? VGSelect.getInstance(container) : null;
-
-		select.setAttribute('data-updating', 'true');
-		try {
-			const opt = select.querySelector(`option[value="${CSS.escape(normalizeData(value))}"]`);
+	static changeSelector(select, value, data = {}) {
+		const container = select.nextElementSibling;
+		const instance = container ? VGSelect.getInstance(container) : null;
+
+		select.setAttribute('data-updating', 'true');
+		try {
+			const opt = select.querySelector(`option[value="${CSS.escape(normalizeData(value))}"]`);
 			if (!opt) {
 				instance?._triggerEvent(EVENT_KEY_ERROR, { error: 'Option not found', value });
 				return;
 			}
 
-			const wasSelected = opt.selected;
-			const selectedText = opt.textContent.trim();
-
-			if (select.multiple) {
-				opt.selected = data?.selected === false ? false : true;
-			} else {
-				[...select.options].forEach(o => o.selected = false);
-				opt.selected = true;
-				select.value = opt.value;
-			}
+			const wasSelected = opt.selected;
+			const selectedText = opt.textContent.trim();
+
+			if (select.multiple) {
+				opt.selected = data?.selected === false ? false : true;
+			} else {
+				[...select.options].forEach(o => o.selected = false);
+				opt.selected = true;
+				select.value = opt.value;
+			}
 
 			this.updateUI(select);
 
@@ -832,9 +832,9 @@ class VGSelect extends BaseModule {
 	 * @param {number} index
 	 * @param {Object} [data]
 	 */
-	static changeSelectorByIndex(select, index, data = {}) {
-		const container = select.nextElementSibling;
-		const instance = container ? VGSelect.getInstance(container) : null;
+	static changeSelectorByIndex(select, index, data = {}) {
+		const container = select.nextElementSibling;
+		const instance = container ? VGSelect.getInstance(container) : null;
 
 		select.setAttribute('data-updating', 'true');
 		try {
@@ -844,17 +844,17 @@ class VGSelect extends BaseModule {
 				return;
 			}
 
-			const wasSelected = opt.selected;
-			const selectedText = opt.textContent.trim();
-			const value = opt.value;
-
-			if (select.multiple) {
-				opt.selected = data?.selected === false ? false : true;
-			} else {
-				[...select.options].forEach(o => o.selected = false);
-				opt.selected = true;
-				select.value = opt.value;
-			}
+			const wasSelected = opt.selected;
+			const selectedText = opt.textContent.trim();
+			const value = opt.value;
+
+			if (select.multiple) {
+				opt.selected = data?.selected === false ? false : true;
+			} else {
+				[...select.options].forEach(o => o.selected = false);
+				opt.selected = true;
+				select.value = opt.value;
+			}
 
 			this.updateUI(select);
 

package/app/modules/vgselect/scss/vgselect.scss

@@ -25,7 +25,7 @@ select {
 	}
 }
 
-.vg-select {
+.vg-select {
 	@include mix-vars('select-current', $select-current-map);
 	@include mix-vars('select-current', $select-placeholder-map);
 	@include mix-vars('select-dropdown', $select-dropdown-map);
@@ -117,7 +117,7 @@ select {
 		}
 	}
 
-	&-dropdown {
+	&-dropdown {
 		@each $key, $value in $select-dropdown-map {
 			#{$key}: var(--vg-select-dropdown-#{$key})
 		}
@@ -135,25 +135,25 @@ select {
 		transform: scale(0.75) translateY(-11px);
 		transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
 		z-index: var(--vg-select-dropdown-z-index);
-		margin-top: .25rem;
-	}
-
-	&.drop-up {
-		.vg-select-dropdown {
-			top: auto;
-			bottom: 100%;
-			margin-top: 0;
-			margin-bottom: .25rem;
-			transform-origin: 50% 100%;
-			transform: scale(0.75) translateY(11px);
-		}
-	}
-
-	&-list {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-		display: flex;
+		margin-top: .25rem;
+	}
+
+	&.drop-up {
+		.vg-select-dropdown {
+			top: auto;
+			bottom: 100%;
+			margin-top: 0;
+			margin-bottom: .25rem;
+			transform-origin: 50% 100%;
+			transform: scale(0.75) translateY(11px);
+		}
+	}
+
+	&-list {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		display: flex;
 		flex-direction: column;
 		max-height: var(--vg-select-list-max-height);
 		overflow-y: auto;
@@ -281,4 +281,4 @@ select {
 			opacity: .75;
 		}
 	}
-}
+}