vgapp 1.2.5 → 1.3.0

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

@@ -0,0 +1,193 @@
+[data-table-state] {
+	text-align: center;
+	padding: 18px 14px;
+	vertical-align: middle;
+}
+
+.vgdt-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
+	width: min(100%, 520px);
+	margin: 0 auto;
+}
+
+.vgdt-state-text {
+	font-size: 14px;
+	line-height: 1.4;
+	color: var(--vg-dynamic-table-cell-text-color);
+}
+
+.vgdt-state-illustration {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	max-width: 240px;
+	min-height: 84px;
+	margin: 0 auto;
+}
+
+.vgdt-state-illustration img {
+	display: block;
+	max-width: 100%;
+	max-height: 160px;
+	width: auto;
+	height: auto;
+}
+
+.vgdt-state-actions {
+	margin-top: 10px;
+}
+
+.vgdt-state-reset {
+	border: 1px solid currentColor;
+	background: transparent;
+	color: inherit;
+	border-radius: 999px;
+	padding: 6px 12px;
+	font-size: 13px;
+	cursor: pointer;
+}
+
+.vgdt-row-select {
+	width: 16px;
+	height: 16px;
+	cursor: pointer;
+}
+
+tbody tr[data-row-reorder="1"][data-row-reorder-mode="row"] td {
+	cursor: grab;
+}
+
+tbody tr[data-row-dragging="1"] {
+	opacity: 0.55;
+}
+
+tbody tr[data-row-drag-over="before"] {
+	box-shadow: inset 0 2px 0 #3f8cff;
+}
+
+tbody tr[data-row-drag-over="after"] {
+	box-shadow: inset 0 -2px 0 #3f8cff;
+}
+
+.vgdt-row-reorder-cell {
+	width: 32px;
+	min-width: 32px;
+	text-align: center;
+}
+
+.vgdt-row-reorder-handle {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 22px;
+	height: 22px;
+	border: 0;
+	background: transparent;
+	color: var(--vg-dynamic-table-cell-text-color);
+	cursor: grab;
+	opacity: 0.75;
+	padding: 0;
+}
+
+.vgdt-row-reorder-handle:hover {
+	opacity: 1;
+}
+
+.vgdt-row-actions {
+	display: inline-flex;
+	gap: 6px;
+}
+
+.vgdt-row-action {
+	border: 1px solid #a22929;
+	background: transparent;
+	color: #a22929;
+	border-radius: 8px;
+	padding: 5px 10px;
+	font-size: 12px;
+	cursor: pointer;
+}
+
+.vgdt-row-action:hover {
+	background: #a22929;
+	color: #fff;
+}
+
+.vgdt-pan-hint {
+	margin: 0 0 8px;
+	padding: 6px 10px;
+	font-size: 12px;
+	line-height: 1.35;
+	border: 1px dashed var(--vg-dynamic-table-cell-border-color);
+	border-radius: 10px;
+	color: var(--vg-dynamic-table-cell-text-color);
+	background: var(--vg-dynamic-table-header-background);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+}
+
+.vgdt-pan-hint[hidden] {
+	display: none !important;
+}
+
+.vgdt-pan-hint__text {
+	flex: 1 1 auto;
+	text-align: left;
+}
+
+.vgdt-pan-hint__close {
+	border: 0;
+	background: transparent;
+	color: inherit;
+	cursor: pointer;
+	line-height: 1;
+	font-size: 16px;
+	padding: 0 2px;
+	opacity: 0.8;
+}
+
+.vgdt-pan-hint__close:hover {
+	opacity: 1;
+}
+
+@media (max-width: 768px) {
+	[data-table-state] {
+		padding: 12px 10px;
+	}
+
+	.vgdt-state {
+		width: 100%;
+	}
+
+	.vgdt-state-illustration {
+		max-width: 180px;
+		min-height: 70px;
+	}
+
+	&[data-state-mode] {
+		[data-table-state] {
+			text-align: left;
+		}
+
+		.vgdt-state {
+			margin-left: 0;
+			margin-right: 0;
+			max-width: min(100%, calc(100vw - 32px));
+		}
+	}
+}
+
+@media (hover: none), (pointer: coarse), (any-pointer: coarse), (any-hover: none) {
+	.vgdt-pan-hint {
+		display: none !important;
+	}
+}
+
+

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

@@ -0,0 +1,183 @@
+&.table-pagination {
+	.vgdt-pagination {
+		padding: var(--vg-dynamic-table-pagination-padding-y) var(--vg-dynamic-table-pagination-padding-x);
+		border-top: 1px solid var(--vg-dynamic-table-pagination-border-color);
+	}
+
+	.vgdt-pagination--top {
+		border-top: 0;
+		border-bottom: 1px solid var(--vg-dynamic-table-pagination-border-color);
+	}
+
+	.vgdt-pagination__inner {
+		background: var(--vg-dynamic-table-pagination-toolbar-bg);
+		border-radius: var(--vg-dynamic-table-pagination-toolbar-radius);
+		padding: var(--vg-dynamic-table-pagination-toolbar-padding-y) var(--vg-dynamic-table-pagination-toolbar-padding-x);
+		gap: var(--vg-dynamic-table-pagination-gap);
+	}
+
+	.vgdt-pagination__per-page {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--vg-dynamic-table-pagination-per-page-gap);
+		color: var(--vg-dynamic-table-pagination-label-color);
+		font-size: var(--vg-dynamic-table-pagination-label-size);
+	}
+
+	.vgdt-pagination__per-page [data-per-page] {
+		min-width: 80px;
+		height: var(--vg-dynamic-table-pagination-per-page-height);
+		padding: 0 calc(var(--vg-dynamic-table-pagination-per-page-padding-x) + 18px) 0 var(--vg-dynamic-table-pagination-per-page-padding-x);
+		border-radius: var(--vg-dynamic-table-pagination-per-page-radius);
+		border: 1px solid var(--vg-dynamic-table-pagination-per-page-border-color);
+		background: var(--vg-dynamic-table-pagination-per-page-bg);
+		color: var(--vg-dynamic-table-pagination-per-page-text);
+		font: inherit;
+	}
+
+	.vgdt-pagination__per-page [data-per-page]:focus,
+	.vgdt-pagination__per-page [data-per-page]:focus-visible,
+	.vgdt-pagination__per-page [data-per-page]:active {
+		outline: none;
+		box-shadow: none;
+	}
+
+	.vgdt-pagination__per-page-control {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.vgdt-pagination__per-page-chevron {
+		position: absolute;
+		right: 10px;
+		top: 50%;
+		transform: translateY(-50%);
+		pointer-events: none;
+		opacity: .85;
+		color: var(--vg-dynamic-table-pagination-button-text);
+		transition: transform .16s ease, opacity .16s ease, color .16s ease;
+	}
+
+	.vgdt-pagination__per-page-chevron svg {
+		display: block;
+		width: 14px;
+		height: 14px;
+	}
+
+	.vgdt-pagination__per-page-chevron path {
+		fill: none;
+		stroke: currentColor;
+		stroke-width: 1.9;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+
+	.vgdt-pagination__per-page-control [data-per-page]:focus + .vgdt-pagination__per-page-chevron {
+		opacity: 1;
+	}
+
+	.vgdt-pagination__per-page-control [data-toggle="dropdown"].show + .vgdt-pagination__per-page-chevron {
+		transform: translateY(-50%) rotate(180deg);
+		opacity: 1;
+	}
+
+	.vgdt-pagination__per-page-dropdown {
+		min-width: 170px;
+	}
+
+	.vgdt-pagination__per-page-option {
+		display: block;
+		width: 100%;
+		padding: 8px 10px;
+		border: 0;
+		background: transparent;
+		color: var(--vg-dynamic-table-pagination-button-text);
+		text-align: left;
+		cursor: pointer;
+	}
+
+	.vgdt-pagination__per-page-option:hover {
+		background: var(--vg-dynamic-table-pagination-button-hover-bg);
+	}
+
+	.vgdt-pagination__pages {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--vg-dynamic-table-pagination-pages-gap);
+	}
+
+	.vgdt-pagination__jump {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--vg-dynamic-table-pagination-jump-gap);
+	}
+
+	.vgdt-pagination__jump [data-page-jump-input] {
+		width: var(--vg-dynamic-table-pagination-jump-width);
+		height: var(--vg-dynamic-table-pagination-button-size);
+		padding: 0 var(--vg-dynamic-table-pagination-per-page-padding-x);
+		border-radius: var(--vg-dynamic-table-pagination-per-page-radius);
+		border: 1px solid var(--vg-dynamic-table-pagination-per-page-border-color);
+		background: var(--vg-dynamic-table-pagination-per-page-bg);
+		color: var(--vg-dynamic-table-pagination-per-page-text);
+		font: inherit;
+	}
+
+	.vgdt-page {
+		min-width: var(--vg-dynamic-table-pagination-button-size);
+		height: var(--vg-dynamic-table-pagination-button-size);
+		padding: var(--vg-dynamic-table-pagination-button-padding);
+		border-radius: var(--vg-dynamic-table-pagination-button-radius);
+		border: var(--vg-dynamic-table-pagination-button-border);
+		background: var(--vg-dynamic-table-pagination-button-bg);
+		color: var(--vg-dynamic-table-pagination-button-text);
+		font-size: var(--vg-dynamic-table-pagination-button-font-size);
+		line-height: var(--vg-dynamic-table-pagination-button-line-height);
+		cursor: pointer;
+		transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
+	}
+
+	.vgdt-page--jump {
+		min-width: var(--vg-dynamic-table-pagination-jump-button-min-width);
+	}
+
+	.vgdt-page:hover:not(:disabled):not(.is-active) {
+		background: var(--vg-dynamic-table-pagination-button-hover-bg);
+		border-color: var(--vg-dynamic-table-pagination-button-hover-border);
+	}
+
+	.vgdt-page.is-active {
+		background: var(--vg-dynamic-table-pagination-button-active-bg);
+		color: var(--vg-dynamic-table-pagination-button-active-text);
+		border-color: var(--vg-dynamic-table-pagination-button-active-border);
+	}
+
+	.vgdt-page:disabled {
+		opacity: var(--vg-dynamic-table-pagination-button-disabled-opacity);
+		cursor: not-allowed;
+	}
+
+	.vgdt-page--ellipsis {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0;
+		min-width: var(--vg-dynamic-table-pagination-button-size);
+	}
+
+	.vgdt-ellipsis-chevron {
+		display: none;
+		font-size: 14px;
+		line-height: 1;
+	}
+
+	.vgdt-page--ellipsis:hover .vgdt-ellipsis-dots {
+		display: none;
+	}
+
+	.vgdt-page--ellipsis:hover .vgdt-ellipsis-chevron {
+		display: inline;
+	}
+}
+

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

@@ -0,0 +1,60 @@
+.skeleton-row td {
+	padding: var(--vg-dynamic-table-skeleton-padding);
+	background: var(--vg-dynamic-table-skeleton-row-bg);
+	border-bottom-color: var(--vg-dynamic-table-skeleton-border-color);
+	height: var(--vgdt-skeleton-row-height, auto);
+}
+
+.skeleton-cell {
+	display: flex;
+	align-items: center;
+	min-height: var(--vg-dynamic-table-cell-row-content-height);
+	width: 100%;
+}
+
+.skeleton-line {
+	width: 100%;
+	height: var(--vg-dynamic-table-skeleton-line-height);
+	border-radius: var(--vg-dynamic-table-skeleton-radius);
+	position: relative;
+	overflow: hidden;
+	background: linear-gradient(
+					90deg,
+					var(--vg-dynamic-table-skeleton-gradient-1) 25%,
+					var(--vg-dynamic-table-skeleton-gradient-2) 50%,
+					var(--vg-dynamic-table-skeleton-gradient-1) 75%
+	);
+	background-size: 160% 100%;
+	animation: skeleton-shimmer var(--vg-dynamic-table-skeleton-duration) ease-in-out infinite;
+	animation-delay: var(--skeleton-delay, 0s);
+}
+
+.skeleton-line::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(
+		110deg,
+		transparent 0%,
+		var(--vg-dynamic-table-skeleton-glow) 45%,
+		transparent 100%
+	);
+	transform: translateX(-120%);
+	animation: skeleton-glow calc(var(--vg-dynamic-table-skeleton-duration) * 1.15) linear infinite;
+	animation-delay: var(--skeleton-delay, 0s);
+}
+
+@keyframes skeleton-shimmer {
+	0% {
+		background-position: 160% 0;
+	}
+	100% {
+		background-position: -160% 0;
+	}
+}
+
+@keyframes skeleton-glow {
+	100% {
+		transform: translateX(120%);
+	}
+}

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

@@ -0,0 +1,63 @@
+&.table-sortable {
+	&[data-sort-hide-unsorted-arrows="1"] {
+		th[data-sortable="1"]:not([data-sort-direction]) {
+			.vgdt-sort-controls {
+				display: none;
+			}
+		}
+	}
+
+	th[data-sortable="1"] {
+		position: relative;
+		cursor: pointer;
+
+		.vgdt-sort-label {
+			display: inline-flex;
+			align-items: center;
+		}
+
+		.vgdt-sort-controls {
+			display: flex;
+			flex-direction: column;
+			margin-left: var(--vg-dynamic-table-sortable-controls-right);
+			gap: var(--vg-dynamic-table-sortable-controls-gap);
+
+			&[hidden] {
+				display: none !important;
+			}
+		}
+
+		.vgdt-sort-arrow {
+			border: 0;
+			padding: 0;
+			width: var(--vg-dynamic-table-sortable-arrow-width);
+			height: var(--vg-dynamic-table-sortable-arrow-height);
+			line-height: var(--vg-dynamic-table-sortable-arrow-line-height);
+			background: transparent;
+			cursor: pointer;
+			opacity: var(--vg-dynamic-table-sortable-arrow-opacity);
+			font-size: var(--vg-dynamic-table-sortable-arrow-font-size);
+			color: var(--vg-dynamic-table-sortable-arrow-color);
+		}
+
+		.vgdt-sort-arrow[aria-pressed="true"] {
+			opacity: var(--vg-dynamic-table-sortable-arrow-active-opacity);
+		}
+	}
+
+	th[data-sorted-column="1"],
+	td[data-sorted-column="1"] {
+		background: var(--vg-dynamic-table-sortable-column-highlight-background);
+	}
+
+	&.table-sticky-head {
+		th[data-sortable="1"] {
+			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);
+		}
+	}
+}
+

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

@@ -0,0 +1,157 @@
+&  table {
+	width: 100%;
+	border-collapse: separate;
+	border-spacing: 0;
+	min-width: var(--vg-dynamic-table-table-min-width);
+	border-radius: var(--vg-dynamic-table-wrap-border-radius);
+	overflow: hidden;
+
+	th,
+	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-cell-text-color);
+	}
+
+	th {
+		background: var(--vg-dynamic-table-header-background);
+		font-weight: var(--vg-dynamic-table-header-font-weight);
+		color: var(--vg-dynamic-table-header-text-color);
+	}
+
+	th[data-col-reorder="1"] {
+		cursor: grab;
+		user-select: none;
+	}
+
+	th[data-col-reorder="1"][data-col-dragging="1"] {
+		cursor: grabbing;
+		opacity: 0.75;
+	}
+
+	th[data-col-reorder="1"][data-col-drag-over="1"] {
+		outline: 2px dashed var(--vg-dynamic-table-header-text-color);
+		outline-offset: -2px;
+	}
+
+	th[data-col-resize="1"] {
+		position: relative;
+	}
+
+	.vgdt-col-resize-handle {
+		position: absolute;
+		top: 0;
+		right: -2px;
+		width: 8px;
+		height: 100%;
+		cursor: col-resize;
+	}
+
+	&.is-col-resizing {
+		cursor: col-resize;
+		user-select: none;
+	}
+
+	th[data-fixed-side],
+	td[data-fixed-side] {
+		position: relative;
+		z-index: 2;
+		will-change: transform;
+	}
+
+	th[data-fixed-side] {
+		z-index: 6;
+		background: var(--vg-dynamic-table-header-background);
+	}
+
+	td[data-fixed-side] {
+		background: transparent;
+	}
+
+	td[data-fixed-side][data-fixed-overlap="1"] {
+		background: var(--vg-dynamic-table-fixed-cell-background);
+	}
+
+	tbody tr[data-expand-depth] td:first-child::before {
+		content: '';
+		display: inline-block;
+		width: calc(var(--vgdt-expand-depth, 0) * 16px);
+		height: 1px;
+		vertical-align: middle;
+	}
+
+	.vgdt-expand-toggle {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid var(--vg-dynamic-table-cell-border-color);
+		background: transparent;
+		color: inherit;
+		width: 18px;
+		height: 18px;
+		line-height: 16px;
+		font-size: 12px;
+		padding: 0;
+		cursor: pointer;
+		border-radius: 4px;
+		margin-right: 10px;
+		text-align: center;
+	}
+
+	th[data-fixed-edge],
+	td[data-fixed-edge] {
+		position: relative;
+	}
+
+	th[data-fixed-edge="right"][data-fixed-shadow="1"]::after,
+	td[data-fixed-edge="right"][data-fixed-shadow="1"]::after,
+	th[data-fixed-edge="left"][data-fixed-shadow="1"]::before,
+	td[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;
+	}
+
+	th[data-fixed-edge="right"][data-fixed-shadow="1"]::after,
+	td[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);
+	}
+
+	th[data-fixed-edge="left"][data-fixed-shadow="1"]::before,
+	td[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);
+	}
+
+	thead tr:first-child th:first-child {
+		border-top-left-radius: var(--vg-dynamic-table-wrap-border-radius);
+	}
+
+	thead tr:first-child th:last-child {
+		border-top-right-radius: var(--vg-dynamic-table-wrap-border-radius);
+	}
+
+	tbody tr:last-child td:first-child {
+		border-bottom-left-radius: var(--vg-dynamic-table-wrap-border-radius);
+	}
+
+	tbody tr:last-child td:last-child {
+		border-bottom-right-radius: var(--vg-dynamic-table-wrap-border-radius);
+	}
+
+	tfoot tr:last-child td:first-child {
+		border-bottom-left-radius: var(--vg-dynamic-table-wrap-border-radius);
+	}
+
+	tfoot tr:last-child td:last-child {
+		border-bottom-right-radius: var(--vg-dynamic-table-wrap-border-radius);
+	}
+}
+