vgapp 1.2.5 → 1.3.0

package/app/modules/vgdynamictable/scss/_variables.scss

@@ -0,0 +1,130 @@
+$spacer: 1rem !default;
+$spacers: (
+		0: 0,
+		1: $spacer * .25,
+		2: $spacer * .5,
+		3: $spacer,
+		4: $spacer * 1.5,
+		5: $spacer * 3,
+) !default;
+
+$sizes-0: map-get($spacers, 0);
+$sizes-1: map-get($spacers, 1);
+$sizes-2: map-get($spacers, 2);
+$sizes-3: map-get($spacers, 3);
+$sizes-4: map-get($spacers, 4);
+$sizes-5: map-get($spacers, 5);
+
+$dynamic-table-map: (
+	wrap: (
+		border-radius: 14px,
+		box-shadow: none,
+		border-width: 1px,
+		background: transparent,
+		border-color: transparent,
+	),
+	cell: (
+		padding: $sizes-3 $sizes-4,
+		font-size: $sizes-3,
+		row-content-height: 20px,
+		border-color: transparent,
+		text-color: #1f1f1f,
+	),
+	header: (
+		font-weight: 600,
+		background: #f7f4ef,
+		text-color: #1f1f1f,
+	),
+	bordered: (
+		border-width: 1px,
+		border-color: rgba(0, 0, 0, 0.1),
+	),
+	striped: (
+		background: rgba(0, 0, 0, 0.03),
+	),
+	hover: (
+		background: rgba(0, 0, 0, 0.05),
+	),
+	table: (
+		min-width: 640px,
+	),
+	table-sm: (
+		padding: $sizes-1 $sizes-2,
+	),
+	table-md: (
+		padding: $sizes-2 $sizes-3,
+	),
+	table-lg: (
+		padding: $sizes-3 $sizes-4,
+	),
+	table-xl: (
+		padding: $sizes-4 $sizes-5,
+	),
+	pagination: (
+		padding-y: 12px,
+		padding-x: 14px,
+		gap: 12px,
+		toolbar-radius: 12px,
+		toolbar-padding-y: 8px,
+		toolbar-padding-x: 10px,
+		label-size: 13px,
+		per-page-gap: 8px,
+		pages-gap: 6px,
+		button-size: 36px,
+		button-radius: 10px,
+		button-padding: 0 10px,
+		button-font-size: 13px,
+		button-line-height: 2,
+		button-disabled-opacity: 0.45,
+		per-page-radius: 10px,
+		per-page-height: 36px,
+		per-page-padding-x: 10px,
+		jump-width: 64px,
+		jump-gap: 6px,
+		jump-button-min-width: 54px,
+		border-color: rgba(0, 0, 0, 0.08),
+		toolbar-bg: #faf8f4,
+		label-color: #5f5a52,
+		button-border: 1px solid rgba(0, 0, 0, 0.12),
+		button-border-color: rgba(0, 0, 0, 0.12),
+		button-bg: #ffffff,
+		button-text: #2e2a24,
+		button-hover-bg: #f1ece4,
+		button-hover-border: rgba(0, 0, 0, 0.2),
+		button-active-bg: #24201b,
+		button-active-text: #ffffff,
+		button-active-border: #24201b,
+		per-page-bg: #ffffff,
+		per-page-border-color: rgba(0, 0, 0, 0.12),
+		per-page-text: #2e2a24,
+	),
+	sortable: (
+		header-padding-right: 1.8rem,
+		controls-right: 0.6rem,
+		controls-gap: 0,
+		arrow-width: 14px,
+		arrow-height: 10px,
+		arrow-line-height: 0.7rem,
+		arrow-font-size: 0.55rem,
+		arrow-opacity: 0.35,
+		arrow-active-opacity: 1,
+		arrow-color: currentColor,
+		column-highlight-background: rgba(191, 153, 92, 0.14),
+	),
+	fixed: (
+		shadow-width: 14px,
+		shadow-color: rgba(0, 0, 0, 0.16),
+		cell-background: rgba(247, 244, 239, 0.92),
+	),
+	skeleton: (
+		padding: 12px 14px,
+		line-height: 10px,
+		radius: 999px,
+		duration: 1.2s,
+		row-bg: rgba(255, 255, 255, 0.5),
+		border-color: rgba(0, 0, 0, 0.04),
+		glow: rgba(255, 255, 255, 0.55),
+		gradient-1: #ebe6df,
+		gradient-2: #f5f1ea,
+	),
+);

package/app/modules/vgdynamictable/scss/vgdynamictable.scss

@@ -0,0 +1,267 @@
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGDynamicTable
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+
+@import "../../../utils/scss/functions";
+@import "../../../utils/scss/mixin";
+@import "../../../utils/scss/variables";
+@import "variables";
+
+.vg-dynamic-table {
+	@include mix-vars('dynamic-table', $dynamic-table-map);
+	background: var(--vg-dynamic-table-wrap-background);
+	border-radius: var(--vg-dynamic-table-wrap-border-radius);
+	box-shadow: var(--vg-dynamic-table-wrap-box-shadow);
+	overflow: visible;
+	border: var(--vg-dynamic-table-wrap-border-width) solid var(--vg-dynamic-table-wrap-border-color);
+
+	.vgdt-table-viewport {
+		overflow-x: auto;
+		overflow-y: visible;
+		border-radius: var(--vg-dynamic-table-wrap-border-radius);
+		scrollbar-width: thin;
+		scrollbar-color: var(--vg-dynamic-table-cell-border-color) transparent;
+
+		&::-webkit-scrollbar {
+			height: 10px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--vg-dynamic-table-cell-border-color);
+			border-radius: 999px;
+			border: 2px solid transparent;
+			background-clip: padding-box;
+		}
+
+		&::-webkit-scrollbar-thumb:hover {
+			background: var(--vg-dynamic-table-header-text-color);
+			background-clip: padding-box;
+		}
+
+		&.vgdt-pan-enabled {
+			touch-action: pan-x pan-y;
+		}
+
+		&.is-panning {
+			cursor: grabbing;
+			user-select: none;
+		}
+	}
+
+	@import "pagination";
+	@import "sortable";
+	@import "table";
+	@import "skeleton";
+	@import "actions";
+
+	&.table-striped {
+		tbody {
+			tr:nth-of-type(odd) {
+				background-color: var(--vg-dynamic-table-striped-background);
+			}
+
+			tr[data-virtual-spacer="1"] {
+				background-color: transparent;
+			}
+		}
+
+		tbody tr:nth-of-type(odd) td[data-fixed-side][data-fixed-overlap="1"] {
+			background: var(--vg-dynamic-table-striped-background);
+		}
+	}
+
+	tbody tr[data-virtual-spacer="1"] > td {
+		padding: 0;
+		border: 0;
+		height: 0;
+		background: transparent;
+		line-height: 0;
+		pointer-events: none;
+	}
+
+	&.table-bordered {
+		border: var(--vg-dynamic-table-bordered-border-width) solid var(--vg-dynamic-table-bordered-border-color);
+		border-collapse: separate;
+		border-spacing: 0;
+
+		th,
+		td {
+			border-top: var(--vg-dynamic-table-bordered-border-width) solid var(--vg-dynamic-table-bordered-border-color);
+			border-left: var(--vg-dynamic-table-bordered-border-width) solid var(--vg-dynamic-table-bordered-border-color);
+		}
+
+		tr:first-child {
+			th {
+				border-top: 0;
+			}
+		}
+
+		tr {
+			th:first-child,
+			td:first-child {
+				border-left: 0;
+			}
+		}
+	}
+
+	&.table-hover {
+		tbody {
+			tr:hover {
+				background-color: var(--vg-dynamic-table-hover-background);
+			}
+
+			tr:hover td[data-fixed-side] {
+				background: var(--vg-dynamic-table-hover-background);
+			}
+		}
+	}
+
+	&.table-sm {
+		th,
+		td {
+			padding: var(--vg-dynamic-table-table-sm-padding);
+		}
+	}
+
+	&.table-md {
+		th,
+		td {
+			padding: var(--vg-dynamic-table-table-md-padding);
+		}
+	}
+
+	&.table-lg {
+		th,
+		td {
+			padding: var(--vg-dynamic-table-table-lg-padding);
+		}
+	}
+
+	&.table-xl {
+		th,
+		td {
+			padding: var(--vg-dynamic-table-table-xl-padding);
+		}
+	}
+
+	&.table-sticky-head {
+		overflow: visible;
+
+		.vgdt-table-viewport > table {
+			thead th {
+				position: sticky;
+				top: var(--vgdt-sticky-top, 0px);
+				z-index: 3;
+				background: var(--vg-dynamic-table-header-background);
+				box-shadow: 0 1px 0 var(--vg-dynamic-table-cell-border-color);
+			}
+
+			thead th[data-fixed-side] {
+				z-index: 6;
+			}
+
+			thead th[data-sorted-column="1"] {
+				background: var(--vg-dynamic-table-sortable-column-highlight-background);
+			}
+
+		}
+
+		.vgdt-table-viewport.table-sticky-scroll {
+			max-height: var(--vgdt-sticky-max-height, 0px);
+			overflow: auto;
+		}
+	}
+
+	&.table-sticky-clone {
+		overflow: visible;
+
+		.vgdt-sticky-clone {
+			position: sticky;
+			top: var(--vgdt-sticky-top, 0px);
+			z-index: 4;
+			overflow: hidden;
+			margin-bottom: 0;
+			border-top-left-radius: var(--vg-dynamic-table-wrap-border-radius);
+			border-top-right-radius: var(--vg-dynamic-table-wrap-border-radius);
+			background: var(--vg-dynamic-table-header-background);
+			box-shadow: 0 1px 0 var(--vg-dynamic-table-cell-border-color);
+		}
+
+		.vgdt-sticky-clone__table {
+			border-collapse: separate;
+			border-spacing: 0;
+			margin: 0;
+			min-width: var(--vg-dynamic-table-table-min-width);
+			will-change: transform;
+		}
+
+		.vgdt-sticky-clone th,
+		.vgdt-sticky-clone td {
+			text-align: left;
+			padding: var(--vg-dynamic-table-cell-padding);
+			border-bottom: 1px solid var(--vg-dynamic-table-cell-border-color);
+			font-size: var(--vg-dynamic-table-cell-font-size);
+			line-height: var(--vg-dynamic-table-cell-row-content-height);
+			color: var(--vg-dynamic-table-header-text-color);
+			background: var(--vg-dynamic-table-header-background);
+			font-weight: var(--vg-dynamic-table-header-font-weight);
+		}
+
+		.vgdt-sticky-clone th[data-sorted-column="1"] {
+			background: var(--vg-dynamic-table-sortable-column-highlight-background);
+		}
+
+		.vgdt-sticky-clone th[data-fixed-side] {
+			position: relative;
+			z-index: 6;
+			will-change: transform;
+		}
+
+		.vgdt-sticky-clone th[data-fixed-edge="right"][data-fixed-shadow="1"]::after,
+		.vgdt-sticky-clone th[data-fixed-edge="left"][data-fixed-shadow="1"]::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			bottom: -1px;
+			width: var(--vg-dynamic-table-fixed-shadow-width);
+			pointer-events: none;
+		}
+
+		.vgdt-sticky-clone th[data-fixed-edge="right"][data-fixed-shadow="1"]::after {
+			right: calc(-1 * var(--vg-dynamic-table-fixed-shadow-width));
+			background: linear-gradient(to right, var(--vg-dynamic-table-fixed-shadow-color), transparent);
+		}
+
+		.vgdt-sticky-clone th[data-fixed-edge="left"][data-fixed-shadow="1"]::before {
+			left: calc(-1 * var(--vg-dynamic-table-fixed-shadow-width));
+			background: linear-gradient(to left, var(--vg-dynamic-table-fixed-shadow-color), transparent);
+		}
+
+		.vgdt-sticky-clone thead tr:first-child th:first-child {
+			border-top-left-radius: var(--vg-dynamic-table-wrap-border-radius);
+		}
+
+		.vgdt-sticky-clone thead tr:first-child th:last-child {
+			border-top-right-radius: var(--vg-dynamic-table-wrap-border-radius);
+		}
+
+		.vgdt-table-viewport.table-sticky-scroll {
+			max-height: var(--vgdt-sticky-max-height, 0px);
+			overflow: auto;
+		}
+
+		.vgdt-table-viewport > table {
+			margin-top: calc(-1 * var(--vgdt-sticky-clone-height, 0px));
+		}
+	}
+
+}
+

package/app/modules/vgrangeslider/index.js

@@ -0,0 +1,3 @@
+import VGRangeSlider from './js/vgrangeslider';
+
+export default VGRangeSlider;

package/app/modules/vgrangeslider/js/skins.js

@@ -0,0 +1,222 @@
+const SKIN_CLASS_DEFAULT = 'is-skin-default';
+const SKIN_CLASS_RULER = 'is-skin-ruler';
+const SKIN_CLASS_STATUS = 'is-skin-status';
+const SKIN_CLASS_RULER_DIM = 'is-ruler-dim-inactive';
+const STATUS_CLASS_SUCCESS = 'is-status-success';
+const STATUS_CLASS_WARNING = 'is-status-warning';
+const STATUS_CLASS_DANGER = 'is-status-danger';
+
+const STATUS_CLASSES = [
+	STATUS_CLASS_SUCCESS,
+	STATUS_CLASS_WARNING,
+	STATUS_CLASS_DANGER,
+];
+
+const resolveStatusToneByValue = (value, params, state) => {
+	const span = state.max - state.min;
+	const percent = span > 0 ? ((value - state.min) / span) * 100 : 0;
+	const warningBelow = Number(params?.status?.warningBelow);
+	const dangerBelow = Number(params?.status?.dangerBelow);
+	const warningThreshold = Number.isFinite(warningBelow) ? warningBelow : 60;
+	const dangerThreshold = Number.isFinite(dangerBelow) ? dangerBelow : 30;
+
+	if (percent < dangerThreshold) {
+		return 'danger';
+	}
+
+	if (percent < warningThreshold) {
+		return 'warning';
+	}
+
+	return 'success';
+};
+
+const resolveStatusSourceValue = (params, state, helpers) => {
+	if (!helpers.isRange) {
+		return state.from;
+	}
+
+	const by = typeof params?.status?.by === 'string'
+		? params.status.by.toLowerCase()
+		: 'to';
+
+	if (by === 'from') {
+		return state.from;
+	}
+
+	if (by === 'avg') {
+		return (state.from + state.to) / 2;
+	}
+
+	return state.to;
+};
+
+const buildRulerValues = (params, state) => {
+	if (Array.isArray(params?.ruler?.values) && params.ruler.values.length > 0) {
+		return params.ruler.values
+			.map(value => Number(value))
+			.filter(value => Number.isFinite(value))
+			.sort((a, b) => a - b);
+	}
+
+	const count = Math.max(2, Number(params?.ruler?.count) || 6);
+	const span = state.max - state.min;
+	const step = span / (count - 1);
+	const values = [];
+
+	for (let index = 0; index < count; index++) {
+		const value = index === count - 1 ? state.max : state.min + (step * index);
+		values.push(Number(value.toFixed(5)));
+	}
+
+	return values;
+};
+
+const createRulerSkin = (root, params, state, formatValue, toPositionPx) => {
+	const values = buildRulerValues(params, state);
+	const ruler = document.createElement('div');
+	ruler.className = 'vg-range-slider__ruler';
+
+	if (params?.ruler?.dimInactive === true) {
+		root.classList.add(SKIN_CLASS_RULER_DIM);
+	}
+
+	const ticks = values.map((value) => {
+		const item = document.createElement('span');
+		item.className = 'vg-range-slider__ruler-item';
+		item.style.left = `${toPositionPx(value)}px`;
+		item.dataset.value = String(value);
+
+		const mark = document.createElement('span');
+		mark.className = 'vg-range-slider__ruler-mark';
+		item.appendChild(mark);
+
+		if (params?.ruler?.labels !== false) {
+			const label = document.createElement('span');
+			label.className = 'vg-range-slider__ruler-label';
+			label.textContent = formatValue(value);
+			item.appendChild(label);
+		}
+
+		ruler.appendChild(item);
+		return item;
+	});
+
+	root.appendChild(ruler);
+
+	return {
+		type: 'ruler',
+		root: ruler,
+		ticks,
+		values,
+	};
+};
+
+const resolveStatusTone = (params, state, helpers) => {
+	const value = resolveStatusSourceValue(params, state, helpers);
+	return resolveStatusToneByValue(value, params, state);
+};
+
+const syncStatusClasses = (root, tone) => {
+	root.classList.remove(...STATUS_CLASSES);
+
+	if (tone === 'danger') {
+		root.classList.add(STATUS_CLASS_DANGER);
+		return;
+	}
+
+	if (tone === 'warning') {
+		root.classList.add(STATUS_CLASS_WARNING);
+		return;
+	}
+
+	root.classList.add(STATUS_CLASS_SUCCESS);
+};
+
+const resolveStatusLabel = (params, tone) => {
+	if (!Array.isArray(params?.labelWords) || params.labelWords.length < 3) {
+		return null;
+	}
+
+	if (tone === 'danger') {
+		return params.labelWords[0] || null;
+	}
+
+	if (tone === 'warning') {
+		return params.labelWords[1] || null;
+	}
+
+	return params.labelWords[2] || null;
+};
+
+const syncStatusLabels = (params, state, helpers) => {
+	const labelFrom = helpers?.dom?.labelFrom;
+	const labelTo = helpers?.dom?.labelTo;
+	const fromLabel = resolveStatusLabel(params, resolveStatusToneByValue(state.from, params, state));
+	const toLabel = resolveStatusLabel(params, resolveStatusToneByValue(state.to, params, state));
+
+	if (labelFrom && fromLabel) {
+		labelFrom.textContent = fromLabel;
+	}
+
+	if (labelTo && toLabel) {
+		labelTo.textContent = toLabel;
+	}
+};
+
+const applyRangeSliderSkin = (root, params, state, helpers) => {
+	root.classList.add(SKIN_CLASS_DEFAULT);
+
+	if (params.skin === 'ruler') {
+		root.classList.add(SKIN_CLASS_RULER);
+		return createRulerSkin(root, params, state, helpers.formatValue, helpers.toPositionPx);
+	}
+
+	if (params.skin === 'status') {
+		root.classList.add(SKIN_CLASS_STATUS);
+		syncStatusClasses(root, resolveStatusTone(params, state, helpers));
+
+		return {
+			type: 'status',
+			root,
+		};
+	}
+
+	if (params.skin !== 'default') {
+		return null;
+	}
+
+	return null;
+};
+
+const syncRangeSliderSkin = (skin, state, helpers) => {
+	if (!skin) {
+		return;
+	}
+
+	if (skin.type === 'status') {
+		syncStatusClasses(skin.root, resolveStatusTone(helpers.params, state, helpers));
+		syncStatusLabels(helpers.params, state, helpers);
+		return;
+	}
+
+	if (skin.type !== 'ruler') {
+		return;
+	}
+
+	const isRange = state.from !== state.to || helpers.isRange;
+
+	skin.ticks.forEach((tick, index) => {
+		const value = skin.values[index];
+		const isActive = isRange
+			? value >= state.from && value <= state.to
+			: value <= state.from;
+
+		tick.classList.toggle('is-active', isActive);
+	});
+};
+
+export {
+	applyRangeSliderSkin,
+	syncRangeSliderSkin,
+};