vgapp 0.1.1 → 0.1.3

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

@@ -0,0 +1,216 @@
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGSELECT
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+
+@import "../../../utils/scss/functions";
+@import "../../../utils/scss/mixin";
+@import "../../../utils/scss/variables";
+@import "variables";
+
+select {
+	&.vg-select {
+		position: absolute;
+		left: 0;
+		top: 0;
+		opacity: 0;
+		z-index: -1000;
+		width: 100%;
+		height: 100%;
+		display: inline-block;
+		visibility: hidden;
+	}
+}
+
+.vg-select {
+	@include mix-vars('select-current', $select-current-map);
+	@include mix-vars('select-dropdown', $select-dropdown-map);
+	@include mix-vars('select-list', $select-list-map);
+	@include mix-vars('select-optgroup', $select-optgroup-map);
+	@include mix-vars('select-optgroup-hover', $select-optgroup-hover-map);
+	@include mix-vars('select-list-hover', $select-list-hover-map);
+	@include mix-vars('select-search', $select-search-map);
+	--vg-select-list-max-height: #{$select-list-max-height};
+	--vg-select-list-scrollbar-width: #{$select-list-scrollbar-width};
+	--vg-select-list-scrollbar-bg: #{$select-list-scrollbar-bg};
+	--vg-select-list-scrollbar-thumb: #{$select-list-scrollbar-thumb};
+	position: relative;
+
+	&-current {
+		@each $key, $value in $select-current-map {
+			#{$key}: var(--vg-select-current-#{$key})
+		}
+		box-sizing: border-box;
+		cursor: pointer;
+		outline: none;
+		position: relative;
+		z-index: var(--vg-select-current-z-index);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		&:after {
+			content: '';
+			position: absolute;
+			right: 16px;
+			top: 50%;
+			transform: translateY(-50%);
+			transition: all .4s ease-in-out;
+			background-image: url("data:image/svg+xml, " + $select-current-svg);
+			background-repeat: no-repeat;
+			width: 16px;
+			height: 16px;
+		}
+	}
+
+	&-dropdown {
+		@each $key, $value in $select-dropdown-map {
+			#{$key}: var(--vg-select-dropdown-#{$key})
+		}
+		position: absolute;
+		box-sizing: border-box;
+		opacity: 0;
+		overflow: hidden;
+		padding: 0;
+		top: 100%;
+		left: 0;
+		width: 100%;
+		height: 0;
+		pointer-events: auto;
+		transform-origin: 50% 0;
+		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;
+	}
+
+	&-list {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		display: flex;
+		flex-direction: column;
+		max-height: var(--vg-select-list-max-height);
+		overflow-y: auto;
+
+		&::-webkit-scrollbar-track {
+			-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+			background-color: var(--vg-select-list-scrollbar-bg);
+		}
+
+		&::-webkit-scrollbar
+		{
+			width: var(--vg-select-list-scrollbar-width);
+			background-color: var(--vg-select-list-scrollbar-bg);
+		}
+
+		&::-webkit-scrollbar-thumb
+		{
+			background-color: var(--vg-select-list-scrollbar-thumb);
+		}
+
+		&--option {
+			@each $key, $value in $select-list-map {
+				#{$key}: var(--vg-select-list-#{$key})
+			}
+			display: block;
+			width: 100%;
+			cursor: pointer;
+			transition: all .4s ease-in-out;
+
+			&:last-child {
+				border: none;
+			}
+
+			&:hover, &.selected {
+				@each $key, $value in $select-list-hover-map {
+					#{$key}: var(--vg-select-list-hover-#{$key})
+				}
+			}
+
+			&.disabled {
+				opacity: .6;
+				cursor: not-allowed;
+			}
+
+			&.hidden {
+				display: none !important;
+			}
+		}
+
+		&--optgroup {
+			list-style: none;
+			padding: 0;
+
+			+ .vg-select-list--optgroup {
+				border-top-width: var(--vg-select-optgroup-border-bottom-width);
+				border-top-style: var(--vg-select-optgroup-border-bottom-style);
+				border-top-color: var(--vg-select-optgroup-border-bottom-color);
+			}
+
+			> li {
+				--vg-select-list-padding-left: 16px;
+			}
+
+			&-title {
+				@each $key, $value in $select-optgroup-map {
+					#{$key}: var(--vg-select-optgroup-#{$key})
+				}
+			}
+		}
+	}
+
+	&-search {
+		input {
+			@each $key, $value in $select-search-map {
+				#{$key}: var(--vg-select-search-#{$key})
+			}
+			padding: 8px;
+			border: none;
+			outline: none;
+			width: 100%;
+		}
+	}
+
+	&.show {
+		.vg-select-current {
+			&:after {
+				transform: translateY(-50%) rotate(180deg);
+			}
+		}
+
+		.vg-select-dropdown {
+			transform: scale(1) translateY(0);
+			opacity: 1;
+			box-sizing: border-box;
+			height: auto;
+		}
+	}
+
+	&.is-invalid {
+		.vg-select-current {
+			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+			background-repeat: no-repeat;
+			background-position: right calc(1.975em + 0.1875rem) center;
+			background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+			--vg-select-current-padding-right: 55px;
+		}
+	}
+
+	&.disabled {
+		&:before {
+			content: '';
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			z-index: 500;
+		}
+
+		> .vg-select-current {
+			opacity: .75;
+		}
+	}
+}

package/app/modules/vgsidebar/js/vgsidebar.js

@@ -12,7 +12,7 @@ import Overflow from "../../../utils/js/components/overflow";
 const NAME = 'sidebar';
 const NAME_KEY = 'vg.sidebar';
 const CLASS_NAME_SHOW = 'show';
-const SELECTOR_DATA_TOGGLE= '[data-vg-toggle="sidebar"]'
+const SELECTOR_DATA_TOGGLE= '[data-vg-toggle="sidebar"]';
 
 const EVENT_KEY_HIDE   = `${NAME_KEY}.hide`;
 const EVENT_KEY_HIDDEN = `${NAME_KEY}.hidden`;
@@ -31,6 +31,12 @@ class VGSidebar extends BaseModule {
 			backdrop: true,
 			overflow: true,
 			keyboard: true,
+			animation: {
+				enable: false,
+				in: 'animate__rollIn',
+				out: 'animate__rollOut',
+				delay: 800,
+			},
 			ajax: {
 				route: '',
 				target: '',
@@ -40,6 +46,9 @@ class VGSidebar extends BaseModule {
 
 		this._addEventListeners();
 		this._dismissElement();
+
+		this._params.animation.delay = !this._params.animation.enable ? 0 : this._params.animation.delay;
+		this._animation(this._element, VGSidebar.NAME_KEY, this._params.animation);
 	}
 
 	static get NAME() {
@@ -58,9 +67,10 @@ class VGSidebar extends BaseModule {
 		const _this = this;
 		if (isDisabled(_this._element)) return;
 
-		this._route();
+		_this._params = _this._getParams(relatedTarget, _this._params);
+		_this._route();
 
-		const showEvent = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget })
+		const showEvent = EventHandler.trigger(_this._element, EVENT_KEY_SHOW, { relatedTarget })
 		if (showEvent.defaultPrevented) return;
 
 		if (_this._params.backdrop) {
@@ -78,9 +88,9 @@ class VGSidebar extends BaseModule {
 				_this.hide();
 			});
 
-			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
+			EventHandler.trigger(_this._element, EVENT_KEY_SHOWN, { relatedTarget });
 		}
-		this._queueCallback(completeCallBack, this._element, true, 50)
+		_this._queueCallback(completeCallBack, _this._element, true, 50)
 	}
 
 	hide() {
@@ -102,11 +112,13 @@ class VGSidebar extends BaseModule {
 			Overflow.destroy();
 		}
 
-		_this._element.setAttribute('aria-expanded', false);
-		_this._element.classList.remove(CLASS_NAME_SHOW);
+		setTimeout(() => {
+			_this._element.setAttribute('aria-expanded', false);
+			_this._element.classList.remove(CLASS_NAME_SHOW);
 
-		const completeCallback = () => EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
-		this._queueCallback(completeCallback, this._element, true);
+			const completeCallback = () => EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
+			this._queueCallback(completeCallback, this._element, true);
+		}, this._params.animation.delay);
 	}
 
 	dispose() {

package/app/modules/vgsidebar/scss/vgsidebar.css

@@ -0,0 +1,86 @@
+@charset "UTF-8";
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGSidebar
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+.vg-sidebar {
+  --vg-sidebar-horizontal-width: 400px ;
+  --vg-sidebar-horizontal-height: 100vh ;
+  --vg-sidebar-vertical-width: 100vw ;
+  --vg-sidebar-vertical-height: 30vh ;
+  --vg-sidebar-bg-color: #fff ;
+  --vg-sidebar-color: #000000 ;
+  --vg-sidebar-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;
+  --vg-sidebar-header-height: 60px ;
+  --vg-sidebar-footer-height: 70px ;
+  --vg-sidebar-padding: 1rem ;
+  --vg-sidebar-border: 1px solid rgba(0, 0, 0, 0.2) ;
+  --vg-sidebar-z-index: 1040 ;
+  --vg-sidebar-transition: all 0.5s ease-in-out ;
+  position: fixed;
+  width: auto;
+  height: auto;
+  transition: var(--vg-sidebar-transition);
+  z-index: var(--vg-sidebar-z-index);
+  background: var(--vg-sidebar-bg-color);
+  color: var(--vg-sidebar-color);
+  box-shadow: var(--vg-sidebar-box-shadow);
+}
+.vg-sidebar.left, .vg-sidebar.right {
+  width: var(--vg-sidebar-horizontal-width);
+  height: var(--vg-sidebar-horizontal-height);
+  top: 0;
+}
+.vg-sidebar.left {
+  left: -105%;
+}
+.vg-sidebar.left.show {
+  left: 0;
+}
+.vg-sidebar.right {
+  right: -105%;
+}
+.vg-sidebar.right.show {
+  right: 0;
+}
+.vg-sidebar.top, .vg-sidebar.bottom {
+  height: var(--vg-sidebar-vertical-height);
+  width: var(--vg-sidebar-vertical-width);
+  left: 0;
+}
+.vg-sidebar.top {
+  top: -105%;
+}
+.vg-sidebar.top.show {
+  top: 0;
+}
+.vg-sidebar.bottom {
+  bottom: -105%;
+}
+.vg-sidebar.bottom.show {
+  bottom: 0;
+}
+.vg-sidebar-header {
+  height: var(--vg-sidebar-header-height);
+  z-index: 10;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--vg-sidebar-padding);
+  border-bottom: var(--vg-sidebar-border);
+}
+.vg-sidebar-body {
+  height: calc(100% - var(--vg-sidebar-header-height) - var(--vg-sidebar-footer-height));
+  overflow-y: auto;
+  padding: var(--vg-sidebar-padding);
+}
+.vg-sidebar-footer {
+  height: var(--vg-sidebar-footer-height);
+  padding: var(--vg-sidebar-padding);
+  border-top: var(--vg-sidebar-border);
+}
+
+/*# sourceMappingURL=vgsidebar.css.map */

package/app/modules/vgsidebar/scss/vgsidebar.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["vgsidebar.scss","../../../utils/scss/mixin.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaA;ECTI;EAAA;EAAA;EAAA;EAGD;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EDQF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;;AAEA;EACC;;AAIF;EACC;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;;AAEA;EACC;;AAIF;EACC;;AAEA;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA","file":"vgsidebar.css"}

package/app/utils/js/components/alert.js

@@ -0,0 +1,8 @@
+const NAME = 'alert';
+const CLASS_NAME = `vg-${NAME}`;
+
+class Alert {
+	
+}
+
+export default Alert;

package/app/utils/js/components/animation.js

@@ -0,0 +1,53 @@
+import {isElement, mergeDeepObject} from "../functions";
+import EventHandler from "../dom/event";
+
+/**
+ * Классы для анимаций смотрим здесь
+ * https://animate.style/
+ *
+ * Работает с модулями у которых есть события show, hide, hidden
+ */
+class Animation {
+	constructor(element, key, params = {}) {
+		this._params = mergeDeepObject({
+			enable: false,
+			in: 'animate__backInUp',
+			out: 'animate__backOutUp',
+			delay: 0,
+		}, params);
+
+		this.classes = {
+			animated: 'animate__animated'
+		}
+
+		if (!this._params.enable) return;
+		if (!isElement(element)) return;
+
+		this._element = element;
+		this._name_key = key;
+
+		if (!this._element.classList.contains(this.classes.animated)) {
+			this._element.classList.add(this.classes.animated);
+		}
+
+		this._triggers();
+	}
+
+	_triggers() {
+		EventHandler.on(this._element, this._name_key + '.show', () => {
+			this._element.classList.remove(this._params.out);
+			this._element.classList.add(this._params.in);
+		});
+
+		EventHandler.on(this._element, this._name_key + '.hide', () => {
+			this._element.classList.remove(this._params.in);
+			this._element.classList.add(this._params.out);
+		});
+
+		EventHandler.on(this._element, this._name_key + '.hidden', () => {
+			this._element.classList.remove(this._params.out);
+		});
+	}
+}
+
+export default Animation;

package/app/utils/js/components/backdrop.js

@@ -3,10 +3,12 @@ import Selectors from "../dom/selectors";
 import EventHandler from "../dom/event";
 import Overflow from "./overflow";
 
-const NAME = 'backdrop'
-const CLASS_NAME = 'vg-backdrop'
-const CLASS_NAME_FADE = 'fade'
-const EVENT_MOUSEDOWN = `mousedown.vg.${NAME}`
+const NAME = 'backdrop';
+const CLASS_NAME = 'vg-backdrop';
+const CLASS_NAME_FADE = 'fade';
+const EVENT_MOUSEDOWN = `mousedown.vg.${NAME}`;
+
+let backdrop_delay = 500;
 
 class Backdrop {
 	static show(callback) {
@@ -47,7 +49,7 @@ class Backdrop {
 
 		setTimeout(() => {
 			element.remove();
-		}, 100);
+		}, backdrop_delay);
 	}
 }
 

package/app/utils/js/dom/cookie.js

@@ -0,0 +1,127 @@
+/*! js-cookie v3.0.1 | MIT */
+
+function assign (target) {
+	for (let i = 1; i < arguments.length; i++) {
+		let source = arguments[i];
+		for (let key in source) {
+			target[key] = source[key];
+		}
+	}
+	return target
+}
+
+let defaultConverter = {
+	read: function (value) {
+		if (value[0] === '"') {
+			value = value.slice(1, -1);
+		}
+		return value.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent)
+	},
+	write: function (value) {
+		return encodeURIComponent(value).replace(
+			/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,
+			decodeURIComponent
+		)
+	}
+};
+
+function init (converter, defaultAttributes) {
+	function set (key, value, attributes) {
+		if (typeof document === 'undefined') {
+			return
+		}
+
+		attributes = assign({}, defaultAttributes, attributes);
+
+		if (typeof attributes.expires === 'number') {
+			attributes.expires = new Date(Date.now() + attributes.expires * 864e5);
+		}
+		if (attributes.expires) {
+			attributes.expires = attributes.expires.toUTCString();
+		}
+
+		key = encodeURIComponent(key)
+			.replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent)
+			.replace(/[()]/g, escape);
+
+		let stringifiedAttributes = '';
+		for (let attributeName in attributes) {
+			if (!attributes[attributeName]) {
+				continue
+			}
+
+			stringifiedAttributes += '; ' + attributeName;
+
+			if (attributes[attributeName] === true) {
+				continue
+			}
+
+			// Considers RFC 6265 section 5.2:
+			// ...
+			// 3.  If the remaining unparsed-attributes contains a %x3B (";")
+			//     character:
+			// Consume the characters of the unparsed-attributes up to,
+			// not including, the first %x3B (";") character.
+			// ...
+			stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];
+		}
+
+		return (document.cookie =
+			key + '=' + converter.write(value, key) + stringifiedAttributes)
+	}
+
+	function get (key) {
+		if (typeof document === 'undefined' || (arguments.length && !key)) {
+			return
+		}
+
+		// To prevent the for loop in the first place assign an empty array
+		// in case there are no cookies at all.
+		let cookies = document.cookie ? document.cookie.split('; ') : [];
+		let jar = {};
+		for (let i = 0; i < cookies.length; i++) {
+			let parts = cookies[i].split('=');
+			let value = parts.slice(1).join('=');
+
+			try {
+				let foundKey = decodeURIComponent(parts[0]);
+				jar[foundKey] = converter.read(value, foundKey);
+
+				if (key === foundKey) {
+					break
+				}
+			} catch (e) {}
+		}
+
+		return key ? jar[key] : jar
+	}
+
+	return Object.create({
+			set: set,
+			get: get,
+			remove: function (key, attributes) {
+				set(
+					key,
+					'',
+					assign({}, attributes, {
+						expires: -1
+					})
+				);
+			},
+			withAttributes: function (attributes) {
+				return init(this.converter, assign({}, this.attributes, attributes))
+			},
+			withConverter: function (converter) {
+				return init(assign({}, this.converter, converter), this.attributes)
+			}
+		},
+		{
+			attributes: { value: Object.freeze(defaultAttributes) },
+			converter: { value: Object.freeze(converter) }
+		}
+	)
+}
+
+let api = init(defaultConverter, { path: '/' });
+
+export default api;

package/app/utils/js/dom/data.js

@@ -24,7 +24,7 @@ export default {
 			return
 		}
 
-		instanceMap.set(key, instance)
+		instanceMap.set(key, instance);
 	},
 
 	get(element, key) {

package/app/utils/js/dom/manipulator.js

@@ -56,7 +56,15 @@ const Manipulator = {
 		if (isElement(element) && nameAttribute) {
 			element.removeAttribute(nameAttribute);
 		}
-	}
+	},
+
+	hide(el) {
+		el.style.display = 'none';
+	},
+
+	show(el, state = 'block') {
+		el.style.display = state;
+	},
 }
 
 export {Manipulator}

package/app/utils/js/functions.js

@@ -269,9 +269,28 @@ function makeRandomString(length = 7) {
 	return result;
 }
 
+/**
+ * Транслитерация символов с латиницы на кириллицу и обратно
+ * @param text
+ * @param enToRu
+ * @returns {*}
+ */
+function transliterate(text, enToRu) {
+	let ru = "й ц у к е н г ш щ з х ъ ф ы в а п р о л д ж э я ч с м и т ь б ю".split(/ +/g);
+	let en = "q w e r t y u i o p [ ] a s d f g h j k l ; ' z x c v b n m , .".split(/ +/g);
+	let x;
+
+	for (x = 0; x < ru.length; x++) {
+		text = text.split(enToRu ? en[x] : ru[x]).join(enToRu ? ru[x] : en[x]);
+		text = text.split(enToRu ? en[x].toUpperCase() : ru[x].toUpperCase()).join(enToRu ? ru[x].toUpperCase() : en[x].toUpperCase());
+	}
+
+	return text;
+}
+
 /**
  *
  */
 const isRTL = () => document.documentElement.dir === 'rtl'
 
-export {isElement, isVisible, isDisabled, isObject, isEmptyObj, mergeDeepObject, removeElementArray, normalizeData, execute, executeAfterTransition, reflow, noop, makeRandomString, isRTL}
+export {isElement, isVisible, isDisabled, isObject, isEmptyObj, mergeDeepObject, removeElementArray, normalizeData, execute, executeAfterTransition, reflow, noop, makeRandomString, isRTL, transliterate}