vgapp 1.1.1 → 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

@@ -46,13 +46,13 @@ const EVENT_KEY_CLEAR           = `${NAME_KEY}.clear`;
 const EVENT_KEY_ERROR           = `${NAME_KEY}.error`;
 const EVENT_KEY_LOAD_NEXT       = `${NAME_KEY}.loadNext`;
 
-const SELECTOR_DATA_TOGGLE      = '[data-vg-toggle="select"]';
-const SELECTOR_CURRENT          = `.${CLASS_NAME_CURRENT}`;
-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 SELECTOR_DATA_TOGGLE      = '[data-vg-toggle="select"]';
+const SELECTOR_CURRENT          = `.${CLASS_NAME_CURRENT}`;
+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'];
 
 /**
  * Класс VGSelect
@@ -68,8 +68,8 @@ class VGSelect extends BaseModule {
 	constructor(element, params = {}) {
 		super(element, params);
 
-		this._params = this._getParams(element, mergeDeepObject({
-			lang: document.documentElement.lang || 'ru',
+		this._params = this._getParams(element, mergeDeepObject({
+			lang: document.documentElement.lang || 'ru',
 			// Dropdown placement behavior:
 			// - none: default CSS positioning (no JS)
 			// - auto: choose top/bottom based on available space in overflow ancestor/viewport
@@ -88,10 +88,10 @@ class VGSelect extends BaseModule {
 				perpage: 20,
 				loadMoreText: 'Загрузить ещё',
 			},
-			close: true,
-			tree: false,
-			exclude: '',
-			placeholder: '',
+			close: true,
+			tree: false,
+			exclude: 'data-filter-param',
+			placeholder: '',
 			onInit: null,
 			onShow: null,
 			onHide: null,
@@ -254,34 +254,33 @@ class VGSelect extends BaseModule {
 		parent.appendChild(frag);
 	}
 
-	static _isTreeEnabled(selector, params = {}) {
-		if (typeof params.tree === 'boolean') return params.tree;
-		if (selector?.dataset && typeof selector.dataset.tree !== 'undefined') {
-			return normalizeData(selector.dataset.tree) === true;
-		}
-
-		return false;
-	}
-
-	static _getDataAttrCopyExclusions(selector, params = {}) {
-		const rawExclude = typeof params.exclude === 'string'
-			? params.exclude
-			: (selector.dataset.exclude || '');
-		const customExcluded = rawExclude
-			.split(',')
-			.map(item => this._normalizeDataAttrKey(item))
-			.filter(Boolean);
-
-		return new Set([...DATA_ATTR_COPY_EXCLUDE_DEFAULT, ...customExcluded]);
-	}
-
-	static _normalizeDataAttrKey(value) {
-		return String(value || '')
-			.trim()
-			.replace(/^data-/, '')
-			.toLowerCase()
-			.replace(/-([a-z0-9])/g, (_, chr) => chr.toUpperCase());
-	}
+	static _isTreeEnabled(selector, params = {}) {
+		if (typeof params.tree === 'boolean') return params.tree;
+		if (selector?.dataset && typeof selector.dataset.tree !== 'undefined') {
+			return normalizeData(selector.dataset.tree) === true;
+		}
+
+		return false;
+	}
+
+	static _getDataAttrCopyExclusions(selector, params = {}) {
+		const rawExclude = typeof params.exclude === 'string'
+			? params.exclude
+			: (selector.dataset.exclude || '');
+		const customExcluded = rawExclude
+			.split(',')
+			.map(item => this._normalizeDataAttrKey(item))
+			.filter(Boolean);
+
+		return new Set([...DATA_ATTR_COPY_EXCLUDE_DEFAULT, ...customExcluded]);
+	}
+
+	static _normalizeDataAttrKey(value) {
+		return String(value || '')
+			.trim()
+			.replace(/^data-/, '')
+			.toLowerCase();
+	}
 
 	/**
 	 * Проверяет, является ли значение "пустым" (соответствует placeholder)
@@ -339,14 +338,14 @@ class VGSelect extends BaseModule {
 			container.classList.add('disabled');
 		}
 
-		const elData = Manipulator.get(selector);
-		if (!isEmptyObj(elData)) {
-			const excludeDataAttrs = this._getDataAttrCopyExclusions(selector, params);
-			Object.keys(elData).forEach(key => {
-				if (excludeDataAttrs.has(key)) return;
-				Manipulator.set(container, `data-${key}`, elData[key]);
-			});
-		}
+		const elData = Manipulator.get(selector);
+		if (!isEmptyObj(elData)) {
+			const excludeDataAttrs = this._getDataAttrCopyExclusions(selector, params);
+			Object.keys(elData).forEach(key => {
+				if (excludeDataAttrs.has(key)) return;
+				Manipulator.set(container, `data-${key}`, elData[key]);
+			});
+		}
 
 		const placeholder = selector.dataset.placeholder || '';
 		const isMultiple = selector.multiple;
@@ -401,8 +400,6 @@ class VGSelect extends BaseModule {
 		this.updateUI(selector);
 		const instance = VGSelect.getInstance(container);
 
-		console.log(instance);
-
 		let searchInput = null;
 		if (Manipulator.has(selector, 'data-search-enabled')) {
 			const search = document.createElement('div');
@@ -794,7 +791,6 @@ class VGSelect extends BaseModule {
 	static changeSelector(select, value, data = {}) {
 		const container = select.nextElementSibling;
 		const instance = container ? VGSelect.getInstance(container) : null;
-		const prevValue = select.value;
 
 		select.setAttribute('data-updating', 'true');
 		try {
@@ -804,13 +800,16 @@ class VGSelect extends BaseModule {
 				return;
 			}
 
-			const oldValue = select.value;
 			const wasSelected = opt.selected;
 			const selectedText = opt.textContent.trim();
 
-			[...select.options].forEach(o => o.selected = false);
-			opt.selected = true;
-			select.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);
 
@@ -849,9 +848,13 @@ class VGSelect extends BaseModule {
 			const selectedText = opt.textContent.trim();
 			const value = opt.value;
 
-			[...select.options].forEach(o => o.selected = false);
-			opt.selected = true;
-			select.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);