@dt-frames/ui 2.0.24 → 3.0.1

package/es/components/table/{index.less → src/index.scss}

@@ -1,280 +1,310 @@
-@import '../form/index.less';
-@import '../modal/index.less';
-
-@table-action-icon-color: #666;
-
-.dt-form-btns {
-	.ant-form-item-control-input-content{
-		display: flex;
-		gap: 12px;
-	}
-
-	.ant-btn{
-		display: flex;
-		align-items: center;
-	}
-
-	.ant-btn.ant-btn-lg{
-		height: 34px;
-		font-size: 14px;
-	}
-}
-
-.dt-table{
-	.table-striped td {
-		background-color: #fafafa;
-	}
-
-	.ant-table-empty {
-		border-bottom: 1px solid #f0f0f0;
-		.ant-table-cell {
-			border: none;
-		}
-	}
-
-	.ant-spin-nested-loading, .ant-spin-container {
-		height: 100%;
-	}
-
-	.ant-spin-container, .ant-table-container, .ant-table {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.ant-table, .ant-table-container {
-		height: 0;
-	}
-
-	.ant-table-body {
-		flex: 1;
-	}
-
-	.dt-pagination{
-        margin: 0 !important;
-        padding: 10px;
-        border: 1px solid #f0f0f0;
-		display: flex;
-		align-items: center;
-
-		svg{
-			display: block;
-		}
-
-		&.dt-pagination-small {
-			font-size: 12px;
-		}
-    }
-
-	&-setting {
-		i{
-			font-size: 18px;
-		}
-	}
-
-	.ant-table-title {
-		padding: 8px 0 !important;
-		border: none !important;
-	}
-
-	.ant-table-thead > tr > th{
-        font-weight: bolder;
-        color: #333;
-		background: #f6f6f5;
-
-		.ant-table-resize-handle-line{
-			width: 2px;
-			margin-left: 6px;
-		}
-    }
-
-	.ant-input-number-sm, .ant-input-sm, .ant-select-sm{
-		width: 100%;
-        height: 26px;
-        font-size: 12px;
-        line-height: 26px;
-    }
-
-	.ant-pagination-options{
-		.ant-select-sm{
-			width: auto;
-			span{
-				line-height: 24px !important;
-			}
-		}
-	}
-
-	.ant-select-sm .ant-select-selector{
-		height: 26px !important;
-	}
-
-	.ant-picker-small{
-		width: 100%;
-	}
-
-	.ant-picker-small input{
-		font-size: 12px;
-		height: 24px !important;
-	}
-
-	&-header-top{
-		border-color: @primary-color;
-		color: @primary-color;
-	}
-
-	.ant-table-middle{
-		.dt-table-setting {
-			i{
-				font-size: 20px;
-			}
-		}
-	}
-
-	.primary-color-link{
-		color: @primary-color;
-		cursor: pointer;
-		&:hover{
-			text-decoration: underline;
-		}
-	}
-}
-
-.ant-table{
-    .ant-table-cell {
-        height: 46px !important;
-        line-height: 20px !important;
-        font-size: 14px !important;
-        padding: 2px 8px !important;
-
-		i{
-			font-size: 18px;
-		}
-    }
-}
-
-.ant-table-small{
-    .ant-table-cell {
-        height: 32px !important;
-        line-height: 16px !important;
-        font-size: 12px !important;
-        padding: 2px 8px !important;
-		i{
-			font-size: 16px;
-		}
-    }
-}
-
-.ant-table-middle{
-    .ant-table-cell {
-        height: 38px !important;
-        line-height: 20px !important;
-        font-size: 13px !important;
-        padding: 4px 8px !important;
-		i{
-			font-size: 16px;
-		}
-    }
-}
-
-.column-setting{
-
-	&__popover-title{
-		label{
-			font-size: 12px;
-			line-height: 30px;
-			display: flex;
-			align-items: center;
-			margin: 0 2px;
-			.ant-checkbox{
-				margin-top: -6px;
-			}
-		}
-	}
-
-	&__cloumn-list{
-		.ant-popover-inner-content{
-			padding: 0;
-		}
-		.ant-checkbox-group{
-			width: 100%;
-			min-width: 270px;
-		}
-
-		.disabled{
-			i{
-				cursor: not-allowed;
-				opacity: 0.5;
-			}
-		}
-	}
-
-	&__check-item {
-		.ant-checkbox-wrapper{
-			flex: 1;
-			font-size: 13px;
-		}
-
-		i{
-			font-size: 16px;
-			margin: 0 5px;
-			color: rgb(85, 85, 85);
-		}
-	}
-}
-
-// table中表单错误提示
-.edit-cell-rule-popover .ant-popover-inner-content{
-    padding: 4px 8px;
-    color: #ed6f6f;
-    border-radius: 2px;
-}
-
-.dt-table-action{
-	&-btn, &-dropdown{
-		font-size: 16px;
-	}
-	&-dropdown{
-		color: @primary-color;
-	}
-}
-
-.dt-action-select{
-	.ant-dropdown-menu-title-content{
-		display: flex;
-	}
-}
-
-.dt-table-action-btn, .dt-table-action-dropdown{
-    vertical-align: middle;
-	color: @table-action-icon-color;
-}
-
-.dt-table-action-btn{
-	border-right: 1px solid rgba(0,0,0,.06);
-	i{
-		color: @primary-color;
-	}
-	&:last-of-type {
-		border-right: none;
-	}
-}
-
-.ant-table i.dt-table-action-dropdown{
-	font-size: 20px;
-}
-
-.ant-table-middle i.dt-table-action-dropdown,
-.ant-table-small i.dt-table-action-dropdown {
-	font-size: 18px;
-}
-
-.dt-expand-has-collapse {
-	.dt-table-action-btn {
-		font-size: 13px;
-		width: inherit;
-		padding: 0 8px;
-		margin: 0 !important;
-		cursor: pointer;
-		color: @primary-color;
-	}
+@import '../../form/src/index.scss';
+@import '../../modal/src/index.scss';
+
+
+.dt-table{
+
+	@apply h-full;
+
+	.table-striped td {
+		background-color: #fafafa;
+	}
+
+	.ant-table-empty {
+		border-bottom: 1px solid #f0f0f0;
+		.ant-table-cell {
+			border: none;
+		}
+
+		.ant-table-placeholder td {
+			border-bottom: none !important;
+
+			.ant-table-expanded-row-fixed::after {
+				inset-inline-end: -1px !important;
+			}
+		}
+
+		.ant-table-body {
+			border-right: 1px solid #f0f0f0;
+			overflow: hidden !important;
+		}
+	}
+
+	.ant-spin-nested-loading, .ant-spin-container {
+		height: 100%;
+	}
+
+	.ant-spin-container, .ant-table-container, .ant-table {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.ant-table:not(.ant-table-empty), 
+	.ant-table:not(.ant-table-empty) .ant-table-container {
+		height: 0;		
+
+		.ant-table-body {
+			border-right: 1px solid #f0f0f0;
+			overflow: auto !important;
+
+			td:last-of-type {
+				border-right: none;
+			}
+		}
+	}
+
+	.ant-table-container {
+		border-start-start-radius: 12px !important;
+	}
+
+	.ant-table-body {
+		flex: 1;
+	}
+
+	.dt-pagination{
+        margin: 0 !important;
+        padding: 10px;
+        border: 1px solid #f0f0f0;
+		display: flex;
+		align-items: center;
+
+		svg{
+			display: block;
+		}
+
+		&.dt-pagination-small {
+			font-size: 12px;
+		}
+    }
+
+	&-setting {
+		i{
+			font-size: 18px;
+		}
+	}
+
+	.ant-table-title {
+		padding: 8px 0 !important;
+		border: none !important;
+	}
+
+	.ant-table-thead > tr > th{
+        font-weight: bolder;
+        color: #333;
+		background: #f6f6f5;
+
+		.ant-table-resize-handle-line{
+			width: 2px;
+			margin-left: 6px;
+		}
+    }
+
+	.ant-input-number-sm, .ant-input-sm, .ant-select-sm{
+		width: 100%;
+        height: 30px;
+        font-size: 13px;
+        line-height: 26px;
+    }
+
+	.ant-pagination-options{
+		.ant-select-sm{
+			width: auto;
+			span{
+				line-height: 24px !important;
+			}
+		}
+	}
+
+	.ant-select-sm .ant-select-selector{
+		height: 30px !important;
+	}
+
+	.ant-picker-small{
+		width: 100%;
+	}
+
+	.ant-picker-small input{
+		font-size: 13px;
+		height: 24px !important;
+	}
+
+	&-header-top{
+		border-color: $colorPrimary;
+		color: $colorPrimary;
+	}
+
+	.ant-table-middle{
+		.dt-table-setting {
+			i{
+				font-size: 20px;
+			}
+		}
+	}
+
+	.primary-color-link{
+		color: $colorPrimary;
+		cursor: pointer;
+		&:hover{
+			text-decoration: underline;
+		}
+	}
+}
+
+.ant-table{
+    .ant-table-cell {
+        height: 46px !important;
+        line-height: 20px !important;
+        font-size: 14px !important;
+        padding: 2px 8px !important;
+
+		i{
+			font-size: 18px;
+		}
+    }
+}
+
+.ant-table-small{
+    .ant-table-cell {
+        height: 32px !important;
+        line-height: 16px !important;
+        font-size: 13px !important;
+        padding: 2px 8px !important;
+		i{
+			font-size: 16px;
+		}
+    }
+}
+
+.ant-table-middle{
+    .ant-table-cell {
+        height: 38px !important;
+        line-height: 20px !important;
+        font-size: 13px !important;
+        padding: 4px 8px !important;
+		i{
+			font-size: 16px;
+		}
+    }
+}
+
+.column-setting{
+
+	&__popover-title{
+		label{
+			font-size: 13px;
+			line-height: 30px;
+			display: flex;
+			align-items: center;
+			margin: 0 2px;
+			.ant-checkbox-wrapper {
+				align-items: center;
+			}
+		}
+	}
+
+	&__cloumn-list{
+		.ant-popover-inner-content{
+			padding: 0;
+		}
+		.ant-checkbox-group{
+			width: 100%;
+			min-width: 270px;
+			flex-direction: column;
+		}
+
+		.disabled{
+			i{
+				cursor: not-allowed;
+				opacity: 0.5;
+			}
+		}
+	}
+
+	&__check-item {
+		.ant-checkbox-wrapper{
+			flex: 1;
+			font-size: 13px;
+		}
+
+		i{
+			font-size: 16px;
+			margin: 0 5px;
+			color: rgb(85, 85, 85);
+		}
+	}
+}
+
+// table中表单错误提示
+.edit-cell-rule-popover .ant-popover-inner-content{
+    padding: 4px 8px;
+    color: #ed6f6f;
+    border-radius: 2px;
+}
+
+.dt-table-action {
+	li > span {
+		@apply flex items-center;
+	}
+
+	&-dropdown {
+		vertical-align: middle;
+		color: $colorPrimary;
+		font-size: 18px;
+	}
+
+	&-small{
+		i {
+			font-size: 15px;
+		}
+
+		span {
+			font-size: 13px;
+		}
+	}
+
+	&-middle {
+		i {
+			font-size: 18px;
+		}
+
+		span {
+			font-size: 14px;
+		}
+	}
+
+	&-large {
+		i {
+			font-size: 20px;
+		}
+	}
+
+	.text-small {
+		font-size: 13px;
+	}
+
+	.text-middle {
+		font-size: 13px;
+	}
+
+	.text-large {
+		font-size: 14px;
+	}
+
+	&-btn {
+		border-right: 1px solid rgba(0,0,0,.06);
+		&:last-of-type {
+			border-right: none;
+		}
+	}
+}
+
+.dt-expand-has-collapse {
+	.dt-table-action-btn {
+		width: inherit;
+		padding: 0 8px;
+		margin: 0 !important;
+		cursor: pointer;
+		color: $colorPrimary;
+	}
 }