vgapp 1.4.7 → 1.4.9

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

@@ -1,138 +0,0 @@
-@use "sass:map";
-@use "../../../utils/scss" as vg;
-
-$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: var(--vg-text-color, #1f1f1f),
-	),
-	header: (
-		font-weight: 600,
-		background: var(--vg-surface-muted-bg, #f7f4ef),
-		text-color: var(--vg-text-color, #1f1f1f),
-	),
-	bordered: (
-		border-width: 1px,
-		border-color: var(--vg-border-disabled-color, rgba(0, 0, 0, .1)),
-	),
-	striped: (
-		background: var(--vg-surface-subtle-bg, rgba(0, 0, 0, .03)),
-	),
-	hover: (
-		background: var(--vg-surface-subtle-hover-bg, rgba(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: var(--vg-border-disabled-color, rgba(0, 0, 0, .08)),
-		toolbar-bg: var(--vg-surface-muted-bg, #faf8f4),
-		label-color: var(--vg-text-muted-color, #5f5a52),
-		button-border: vg.$border-width vg.$border-style var(--vg-border-disabled-color, rgba(0, 0, 0, .12)),
-		button-border-color: var(--vg-border-disabled-color, rgba(0, 0, 0, .12)),
-		button-bg: var(--vg-control-bg, #ffffff),
-		button-text: var(--vg-text-color, #2e2a24),
-		button-hover-bg: var(--vg-surface-hover-bg, #f1ece4),
-		button-hover-border: var(--vg-border-color, rgba(0, 0, 0, .2)),
-		button-active-bg: var(--vg-primary-color, #24201b),
-		button-active-text: var(--vg-primary-contrast-color, #ffffff),
-		button-active-border: var(--vg-primary-color, #24201b),
-		per-page-bg: var(--vg-control-bg, #ffffff),
-		per-page-border-color: var(--vg-border-disabled-color, rgba(0, 0, 0, .12)),
-		per-page-text: var(--vg-text-color, #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: var(--vg-primary-subtle-bg, rgba(191, 153, 92, .14)),
-	),
-	fixed: (
-		shadow-width: 14px,
-		shadow-color: var(--vg-shadow-soft-color, rgba(0, 0, 0, .16)),
-		cell-background: var(--vg-surface-bg, rgba(247, 244, 239, .92)),
-	),
-	skeleton: (
-		padding: 12px 14px,
-		line-height: 10px,
-		radius: 999px,
-		duration: 1.2s,
-		row-bg: rgb(var(--vg-surface-bg-rgb, 255 255 255) / .5),
-		border-color: var(--vg-border-disabled-color, rgba(0, 0, 0, .04)),
-		glow: rgb(var(--vg-surface-bg-rgb, 255 255 255) / .55),
-		gradient-1: var(--vg-control-border-color, #ebe6df),
-		gradient-2: var(--vg-surface-muted-bg, #f5f1ea),
-	),
-	actions: (
-		drag-indicator: var(--vg-primary-color, #3f8cff),
-		danger-color: var(--vg-danger-color, #a22929),
-		danger-contrast: var(--vg-danger-contrast-color, #ffffff),
-	),
-) !default;

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

@@ -1,264 +0,0 @@
-/**
-*--------------------------------------------------------------------------
-* Модуль: VGDynamicTable
-* Автор: Vegas DEV
-* Лицензия: смотри LICENSE
-*--------------------------------------------------------------------------
-**/
-
-@forward "variables";
-@use "../../../utils/scss" as vg;
-@use "actions";
-@use "pagination";
-@use "skeleton";
-@use "sortable";
-@use "table" as table-styles;
-@use "variables" as vars;
-
-.vg-dynamic-table {
-	@include vg.mix-vars('dynamic-table', vars.$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;
-		}
-	}
-
-	@include pagination.pagination();
-	@include sortable.sortable();
-	@include table-styles.table();
-	@include skeleton.skeleton();
-	@include actions.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 {
-			overflow: visible;
-
-			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;
-			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-table-viewport.table-sticky-scroll {
-			max-height: var(--vgdt-sticky-max-height, 0px);
-			overflow: auto;
-		}
-
-		.vgdt-table-viewport > table {
-			overflow: visible;
-			margin-top: calc(-1 * var(--vgdt-sticky-clone-height, 0px));
-		}
-	}
-
-}
-