fast-element-plus 1.0.0 → 1.0.1

package/styles/components/selectV2.scss

@@ -0,0 +1,22 @@
+.fa-select-v2-dropdown__more-detail {
+	.el-select-dropdown {
+		.el-vl__wrapper {
+			.el-select-dropdown__list {
+				.el-select-dropdown__item {
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					> :first-child {
+						line-height: normal;
+					}
+					> :nth-child(2) {
+						line-height: normal;
+						margin-left: auto;
+						color: var(--el-text-color-secondary);
+						font-size: var(--el-font-size-extra-small);
+					}
+				}
+			}
+		}
+	}
+}

package/styles/components/table.scss

@@ -0,0 +1,439 @@
+.fa-table {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	transition:
+		width var(--el-transition-duration),
+		height var(--el-transition-duration);
+	.fa-table__search {
+		max-height: 100%;
+		display: flex;
+		align-items: center;
+		margin-bottom: 10px;
+		transition:
+			height var(--el-transition-duration) ease-in-out,
+			max-height var(--el-transition-duration) ease-in-out,
+			opacity var(--el-transition-duration) ease-in-out,
+			padding var(--el-transition-duration) ease-in-out,
+			margin var(--el-transition-duration) ease-in-out,
+			border var(--el-transition-duration) ease-in-out;
+		&.fa-table__search-hidden {
+			height: 0;
+			max-height: 0;
+			opacity: 0;
+			padding: 0;
+			margin: 0;
+			border-width: 0;
+			border-color: transparent;
+		}
+		.el-form {
+			width: 100%;
+			.el-form-item {
+				margin-bottom: 0;
+			}
+			// 去除全局设置Form 表单的 label 的宽度
+			.el-form-item__label {
+				width: unset !important;
+				padding: 0 6px 0 0;
+			}
+			.el-range-editor.el-input__wrapper {
+				padding: 0 10px;
+			}
+			.fa-table__search-operation {
+				display: flex;
+				align-items: center;
+				justify-content: flex-end;
+				.el-button.is-link {
+					.el-icon {
+						margin-left: 2px;
+					}
+				}
+			}
+		}
+	}
+	.fa-table__header {
+		display: flex;
+		align-items: center;
+		margin-bottom: 10px;
+	}
+	.fa-table__main {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		.fa-table__main-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 5px;
+			.fa-table__main-header-left {
+				display: inline-flex;
+				align-items: center;
+			}
+			.fa-table__main-header-right {
+				display: inline-flex;
+				align-items: center;
+				> *:not(:first-child) {
+					margin-left: 12px;
+				}
+				.fa-table__main-header-right__data-search {
+					width: 190px;
+					padding: 0 5px;
+					.el-range-input {
+						width: 45%;
+					}
+					.el-range-separator {
+						padding: 0;
+					}
+					.el-range__close-icon {
+						display: none;
+					}
+				}
+				.fa-table__main-header-right__data-search__popper {
+					.el-date-range-picker {
+						width: 610px;
+						.el-picker-panel__body-wrapper {
+							display: flex;
+							flex-direction: row;
+							.el-picker-panel__sidebar {
+								position: static;
+								overflow: visible;
+								width: 60px;
+								.el-picker-panel__shortcut {
+									width: 60px;
+									padding-left: 10px;
+								}
+							}
+							.el-picker-panel__body {
+								min-width: auto;
+								margin: 0;
+								.el-picker-panel__content {
+									.el-date-range-picker__header {
+										div {
+											font-size: 15px;
+											margin: 0;
+										}
+									}
+									.el-date-table {
+										th {
+											padding: 3px;
+										}
+										td {
+											.el-date-table-cell {
+												height: 26px;
+												padding: 0;
+											}
+										}
+									}
+								}
+								.el-date-range-picker__content {
+									padding: 6px;
+								}
+							}
+						}
+					}
+				}
+				.fa-table__main-header-right__div-search {
+					width: min-content;
+					min-width: 120px;
+					// +22为搜索图标的宽度 +22padding宽度
+					max-width: 344px;
+					position: relative;
+					.fa-table__main-header-right__div-search__hidden {
+						height: 0;
+						overflow: hidden;
+						white-space: nowrap;
+						// 原 el-input 样式，22为搜索图标的宽度，2为边框宽度
+						padding: 0 36px 0 33px;
+						font-size: var(--el-font-size-base);
+					}
+				}
+			}
+		}
+	}
+	.fa-table__main-footer {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		margin-top: 10px;
+		.fa-table__main-footer__left {
+			flex: 1;
+		}
+	}
+}
+
+.fa-table__export-excel-dialog {
+	.fa-table__export-excel-dialog__column-check {
+		.el-form-item__content {
+			display: block;
+			.el-checkbox-group {
+				display: flex;
+				flex-wrap: wrap;
+				.el-checkbox {
+					width: 10rem;
+					margin: 0;
+				}
+			}
+		}
+	}
+}
+
+.el-table {
+	flex: 1;
+	.el-table__header {
+		th {
+			color: var(--el-text-color-primary) !important;
+			background: var(--el-fill-color-light) !important;
+			.el-table__placeholder {
+				display: inline;
+			}
+		}
+		.fa-table__image-column {
+			.cell {
+				padding-right: 0;
+			}
+		}
+	}
+	// 设置 el-table 中 header 文字不换行，并省略
+	.el-table__header .el-table__cell > .cell {
+		white-space: nowrap;
+	}
+	// 解决表格数据为空时样式不居中问题(仅在element-plus中)
+	.el-table__empty-block {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		.fa-table__empty {
+			line-height: 30px;
+			.el-icon {
+				width: 100px;
+				height: auto;
+				svg {
+					width: auto;
+					height: auto;
+				}
+			}
+		}
+	}
+	.el-table__header-wrapper {
+		.fa-table__auto-width-column__cell-header {
+			display: inline-block;
+		}
+	}
+	.el-table__body-wrapper {
+		.el-table__body {
+			.fa-table__primary-row {
+				--el-table-tr-bfa-color: var(--el-color-primary-light-9);
+			}
+			.fa-table__success-row {
+				--el-table-tr-bfa-color: var(--el-color-success-light-9);
+			}
+			.fa-table__warning-row {
+				--el-table-tr-bfa-color: var(--el-color-warning-light-9);
+			}
+			.fa-table__danger-row {
+				--el-table-tr-bfa-color: var(--el-color-danger-light-9);
+			}
+			.fa-table__error-row {
+				--el-table-tr-bfa-color: var(--el-color-error-light-9);
+			}
+			.fa-table__info-row {
+				--el-table-tr-bfa-color: var(--el-color-info-light-9);
+			}
+			.el-table__row {
+				.el-table__cell {
+					// vertical-align: middle;
+					&:not(.fa-table__operation-column) {
+						.el-button.is-link {
+							--el-button-text-color: var(--el-text-color-regular);
+							--el-button-hover-link-text-color: var(--el-color-primary);
+							&:hover {
+								text-decoration: underline;
+								text-decoration-color: var(--el-button-hover-link-text-color);
+							}
+						}
+					}
+				}
+				.fa-table__index-column,
+				.fa-table__selection-column,
+				.fa-table__image-column {
+					vertical-align: middle !important;
+					.cell {
+						padding: 0;
+					}
+				}
+				.fa-table__image-column {
+					vertical-align: middle !important;
+					.cell {
+						.fa-table__image-column__button {
+							[class*="el-icon"] + span {
+								margin-left: 0;
+							}
+						}
+					}
+				}
+				.fa-table__link-column__button {
+					> span {
+						font-weight: bold;
+					}
+				}
+				.fa-table__link-column__text {
+					display: inline;
+					font-weight: bold;
+				}
+				.fa-table__operation-column {
+					vertical-align: middle !important;
+					.cell {
+						.el-dropdown {
+							vertical-align: middle;
+
+							.el-dropdown-link {
+								cursor: pointer;
+								color: var(--el-color-primary);
+								display: flex;
+								align-items: baseline;
+							}
+						}
+					}
+				}
+				.fa-table__data-delete-column::after {
+					content: "数据已删除";
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					background-color: var(--el-overlay-color);
+					color: var(--el-color-danger);
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					cursor: not-allowed;
+				}
+				.fa-table__line-height-normal-column {
+					padding: 2px 0;
+					.cell {
+						line-height: normal;
+					}
+				}
+				.fa-table__selection-column__indeterminate {
+					.cell {
+						.el-checkbox {
+							.el-checkbox__inner {
+								&::after {
+									content: none;
+								}
+								&::before {
+									background-color: var(--el-checkbox-checked-icon-color);
+									content: "";
+									display: block;
+									height: 2px;
+									left: 0;
+									position: absolute;
+									right: 0;
+									top: 5px;
+									transform: scale(0.5);
+								}
+							}
+						}
+					}
+				}
+				.fa-table__auto-width-column__cell {
+					width: fit-content;
+					white-space: nowrap;
+				}
+			}
+		}
+	}
+	.fa-image {
+		display: inline-table;
+		width: 30px;
+		height: 30px;
+		border-radius: 4px;
+	}
+}
+
+.fa-table-small {
+	.fa-table__search {
+		margin-bottom: 5px;
+		padding: 5px 10px;
+		.el-form {
+			.fa-table__search-operation {
+				margin-top: 4px;
+				.el-button + .el-button {
+					margin-left: 5px;
+				}
+			}
+		}
+	}
+	.fa-table__header {
+		margin-bottom: 5px;
+	}
+	.fa-table__main {
+		.fa-table__main-header {
+			.fa-table__main-header-right {
+				> *:not(:first-child) {
+					margin-left: 6px;
+				}
+			}
+			.fa-table__main-header-right__data-search {
+				width: 160px !important;
+			}
+			.fa-table__main-header-right__data-search__popper {
+				.el-date-range-picker {
+					width: 510px !important;
+					.el-picker-panel__body-wrapper {
+						.el-picker-panel__sidebar {
+							width: 50px !important;
+							.el-picker-panel__shortcut {
+								width: 50px !important;
+								padding-left: 6px !important;
+								font-size: 13px;
+								line-height: 26px;
+							}
+						}
+						.el-picker-panel__body {
+							.el-picker-panel__content {
+								.el-date-range-picker__header {
+									div {
+										font-size: 14px !important;
+									}
+								}
+								.el-date-table {
+									th {
+										padding: 0 !important;
+									}
+									td {
+										height: 28px;
+										padding: 2px 0;
+										.el-date-table-cell {
+											height: 24px !important;
+										}
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+			.fa-table__main-header-right__div-search {
+				min-width: 100px !important;
+				max-width: 274px !important;
+				.fa-table__main-header-right__div-search__hidden {
+					// 原 el-input 样式，20为搜索图标的宽度，2为边框宽度
+					padding: 0 30px 0 27px !important;
+					font-size: 12px !important;
+				}
+			}
+		}
+		.el-table {
+			.fa-image {
+				width: 22px;
+				height: 22px;
+				border-radius: 4px;
+			}
+		}
+	}
+}

package/styles/components/tree.scss

@@ -0,0 +1,100 @@
+.fa-tree {
+	display: flex;
+	flex-direction: column;
+	box-sizing: border-box;
+	height: 100%;
+	padding: 10px 10px 0;
+	// 折叠样式
+	&.fa-tree__fold {
+		.el-tree-node__expand-icon {
+			display: none;
+		}
+	}
+	.fa-tree__title {
+		display: flex;
+		flex-flow: row;
+		align-items: center;
+		justify-content: center;
+		> :first-child {
+			flex: 1;
+		}
+		h4 {
+			margin: 0;
+			font-size: var(--el-font-size-large);
+			font-weight: bold;
+			color: var(--el-color-info-dark-2);
+			letter-spacing: 0.5px;
+		}
+		.el-icon {
+			font-size: var(--el-font-size-extra-large);
+			cursor: pointer;
+		}
+	}
+	.fa-tree__search-input {
+		margin: 5px 0;
+	}
+	.fa-tree__scrollbar {
+		flex: 1;
+		padding-right: 10px;
+		.el-tree {
+			font-size: var(--el-font-size-base);
+			.el-tree-node__content {
+				height: 30px;
+				padding: 0 3px;
+				.el-tree-node__expand-icon {
+					padding: 3px;
+				}
+				.el-tree-node__label {
+					width: 100%;
+					display: flex;
+					flex-flow: row;
+					justify-content: space-between;
+					overflow: hidden;
+					span {
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						.el-icon {
+							font-size: var(--el-font-size-medium);
+						}
+					}
+					span:first-child {
+						flex: 1;
+					}
+					span:nth-child(2) {
+						margin-left: 10px;
+						.el-icon:nth-child(n + 2) {
+							margin-left: 5px;
+						}
+					}
+				}
+			}
+			.el-tree-node.is-current > .el-tree-node__content {
+				background-color: var(--el-color-primary);
+				color: var(--el-color-white);
+				.is-leaf {
+					color: transparent;
+				}
+			}
+		}
+	}
+}
+
+.fa-tree-small {
+	.fa-tree__title {
+		h4 {
+			font-size: var(--el-font-size-medium);
+		}
+		.el-icon {
+			font-size: var(--el-font-size-large);
+		}
+	}
+	.fa-tree__scrollbar {
+		.el-tree {
+			font-size: var(--el-font-size-extra-small);
+			.el-tree-node__content {
+				height: 26px;
+			}
+		}
+	}
+}

package/styles/components/uploadImage.scss

@@ -0,0 +1,61 @@
+.fa-upload-image {
+	width: var(--width);
+	height: var(--height);
+	display: inline-block;
+	.el-upload {
+		.el-upload-dragger {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			padding: 0;
+			width: var(--width);
+			height: calc(var(--height) - 24px);
+			.el-upload-list__item-thumbnail {
+				width: var(--width);
+				height: calc(var(--height) - 24px);
+				display: block;
+				object-fit: contain;
+			}
+			.el-upload-list__item-actions {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				left: 0;
+				top: 0;
+				cursor: default;
+				display: inline-flex;
+				justify-content: center;
+				align-items: center;
+				color: #fff;
+				opacity: 0;
+				font-size: var(--el-font-size-extra-large);
+				background-color: var(--el-overlay-color-lighter);
+				transition: opacity var(--el-transition-duration);
+				&:hover {
+					opacity: 1;
+					span {
+						display: inline-flex;
+					}
+				}
+				.el-upload-list__item-icon {
+					display: none;
+					cursor: pointer;
+					&:not(:first-child) {
+						margin-left: 1rem;
+					}
+				}
+			}
+			.el-icon--upload {
+				font-size: calc(var(--height) * 0.4);
+				margin-bottom: 0;
+			}
+			.el-upload__text {
+				line-height: 18px;
+			}
+		}
+	}
+	.el-upload__tip {
+		margin-top: 0;
+	}
+}

package/styles/components/uploadImages.scss

@@ -0,0 +1,9 @@
+.fa-upload-images {
+	&.fa-upload-images__hidden-upload {
+		.el-upload-list {
+			.el-upload {
+				display: none;
+			}
+		}
+	}
+}

package/styles/index.scss

@@ -0,0 +1,18 @@
+@use "./common/animation.scss";
+@use "./common/loading.scss";
+@use "./common/overlay.scss";
+@use "./common/common.scss";
+
+@use "./components/carNumber.scss";
+@use "./components/contextMenu.scss";
+@use "./components/dialog.scss";
+@use "./components/drawer.scss";
+@use "./components/form.scss";
+@use "./components/formItemTip.scss";
+@use "./components/image.scss";
+@use "./components/selectPage.scss";
+@use "./components/selectV2.scss";
+@use "./components/table.scss";
+@use "./components/tree.scss";
+@use "./components/uploadImage.scss";
+@use "./components/uploadImages.scss";

package/types/components.d.ts

@@ -0,0 +1,36 @@
+// For this project development
+import "@vue/runtime-core";
+
+// GlobalComponents for Volar
+declare module "@vue/runtime-core" {
+	export interface GlobalComponents {
+		FaAvatar: (typeof import("fast-element-plus"))["FaAvatar"];
+		FaButton: (typeof import("fast-element-plus"))["FaButton"];
+		FaCarNumber: (typeof import("fast-element-plus"))["FaCarNumber"];
+		FaContextMenu: (typeof import("fast-element-plus"))["FaContextMenu"];
+		FaDialog: (typeof import("fast-element-plus"))["FaDialog"];
+		FaDrawer: (typeof import("fast-element-plus"))["FaDrawer"];
+		FaForm: (typeof import("fast-element-plus"))["FaForm"];
+		FaFormItem: (typeof import("fast-element-plus"))["FaFormItem"];
+		FaFormItemTip: (typeof import("fast-element-plus"))["FaFormItemTip"];
+		FaIcon: (typeof import("fast-element-plus"))["FaIcon"];
+		FaImage: (typeof import("fast-element-plus"))["FaImage"];
+		FaLayoutGrid: (typeof import("fast-element-plus"))["FaLayoutGrid"];
+		FaLayoutGridItem: (typeof import("fast-element-plus"))["FaLayoutGridItem"];
+		FaSelect: (typeof import("fast-element-plus"))["FaSelect"];
+		FaSelectOption: (typeof import("fast-element-plus"))["FaSelectOption"];
+		FaSelectPage: (typeof import("fast-element-plus"))["FaSelectPage"];
+		FaSelectV2: (typeof import("fast-element-plus"))["FaSelectV2"];
+		FaTable: (typeof import("fast-element-plus"))["FaTable"];
+		FaTableColumn: (typeof import("fast-element-plus"))["FaTableColumn"];
+		FaTree: (typeof import("fast-element-plus"))["FaTree"];
+		FaTreeSelect: (typeof import("fast-element-plus"))["FaTreeSelect"];
+		FaUpload: (typeof import("fast-element-plus"))["FaUpload"];
+		FaUploadImage: (typeof import("fast-element-plus"))["FaUploadImage"];
+		FaUploadImages: (typeof import("fast-element-plus"))["FaUploadImages"];
+	}
+
+	// interface ComponentCustomProperties {}
+}
+
+export {};

package/types/env.d.ts

@@ -0,0 +1,17 @@
+declare global {
+	/**
+	 * 拓展 Window 对象
+	 */
+	interface Window {
+		/**
+		 * 是否存在 Loading
+		 */
+		loading: boolean;
+		/**
+		 * 是否存在遮罩层
+		 */
+		overlay: boolean;
+	}
+}
+
+export {};