fast-element-plus 1.0.0 → 1.0.1

package/package.json

@@ -1,28 +1,141 @@
 {
-  "name": "fast-element-plus",
-  "author": "小方",
-  "version": "1.0.0",
-  "description": "Fast 组件库.",
-  "keywords": [
-    "fast-element-plus",
-    "fast",
-    "typescript",
-    "component library",
-    "ui framework",
-    "ui",
-    "vite",
-    "vue"
-  ],
-  "license": "Apache-2.0",
-  "publishConfig": {
-    "access": "public"
-  },
-  "homepage": "https://fastdotnet.com",
-  "repository": {
-    "type": "git",
-    "url": "https://gitee.com/China-xiaoFang/fast.element.plus"
-  },
-  "bugs": {
-    "url": "https://gitee.com/China-xiaoFang/fast.element.plus/issues"
-  }
+	"name": "fast-element-plus",
+	"version": "1.0.1",
+	"description": "Fast 组件库.",
+	"type": "module",
+	"keywords": [
+		"fast-element-plus",
+		"fast",
+		"typescript",
+		"component library",
+		"ui framework",
+		"ui",
+		"vite",
+		"vue"
+	],
+	"license": "Apache-2.0",
+	"homepage": "https://fastdotnet.com",
+	"bugs": {
+		"url": "https://gitee.com/China-xiaoFang/fast.element.plus/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://gitee.com/China-xiaoFang/fast.element.plus"
+	},
+	"author": "小方",
+	"files": [
+		"./Fast.png",
+		"./LICENSE",
+		"./README.md",
+		"./README.zh.md",
+		"./dist",
+		"./es",
+		"./global.d.ts",
+		"./lib",
+		"./styles",
+		"./types"
+	],
+	"main": "lib/index.js",
+	"module": "es/index.mjs",
+	"types": "es/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./es/index.d.ts",
+			"require": "./lib/index.js",
+			"import": "./es/index.mjs"
+		},
+		"./global": {
+			"types": "./global.d.ts"
+		},
+		"./es": {
+			"types": "./es/index.d.ts",
+			"import": "./es/index.mjs"
+		},
+		"./lib": {
+			"types": "./lib/index.d.ts",
+			"require": "./lib/index.js"
+		},
+		"./es/*.mjs": {
+			"types": "./es/*.d.ts",
+			"import": "./es/*.mjs"
+		},
+		"./es/*": {
+			"types": [
+				"./es/*.d.ts",
+				"./es/*/index.d.ts"
+			],
+			"import": "./es/*.mjs"
+		},
+		"./lib/*.js": {
+			"types": "./lib/*.d.ts",
+			"require": "./lib/*.js"
+		},
+		"./lib/*": {
+			"types": [
+				"./lib/*.d.ts",
+				"./lib/*/index.d.ts"
+			],
+			"require": "./lib/*.js"
+		},
+		"./*": "./*"
+	},
+	"style": "dist/index.css",
+	"sideEffects": false,
+	"unpkg": "dist/index.iife.min.js",
+	"jsdelivr": "dist/index.iife.min.js",
+	"publishConfig": {
+		"access": "public"
+	},
+	"peerDependencies": {
+		"@element-plus/icons-vue": "^2.3",
+		"@fast-china/utils": "^1",
+		"@fast-element-plus/icons-vue": "^1.0.17",
+		"element-plus": "^2",
+		"vue": "^3.5"
+	},
+	"dependencies": {
+		"@types/lodash": "^4.17",
+		"@types/lodash-es": "^4.17",
+		"@types/sortablejs": "^1.15",
+		"@vueuse/core": "^14",
+		"decimal.js": "^10",
+		"lodash": "^4.17",
+		"lodash-es": "^4.17",
+		"lodash-unified": "^1",
+		"screenfull": "^6",
+		"sortablejs": "^1.15"
+	},
+	"devDependencies": {
+		"@element-plus/icons-vue": "^2.3",
+		"@fast-china/eslint-config": "^1",
+		"@fast-china/utils": "^1",
+		"@fast-element-plus/icons-vue": "^1.0.17",
+		"@rollup/plugin-terser": "^0.4",
+		"@types/node": "^24",
+		"@vitejs/plugin-vue": "^6",
+		"@vitejs/plugin-vue-jsx": "^5",
+		"@vue/tsconfig": "^0.8",
+		"element-plus": "^2",
+		"eslint": "^9",
+		"prettier": "^3",
+		"sass": "^1",
+		"terser": "^5",
+		"typescript": "^5",
+		"vite": "^7",
+		"vite-plugin-dts": "^4",
+		"vue": "^3.5",
+		"vue-tsc": "^3"
+	},
+	"browserslist": {
+		"production": [
+			"> 1%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	}
 }

package/styles/common/animation.scss

@@ -0,0 +1,46 @@
+/** 模拟闪烁的效果，元素先缩小后放大，然后回到原始大小。 */
+@keyframes twinkle {
+	0% {
+		transform: scale(0.8);
+	}
+	80% {
+		transform: scale(1.1);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+
+/** 创建一个加载效果，通过背景位置的变化产生动态的视觉效果。 */
+@keyframes loading {
+	0% {
+		background-position:
+			0 0,
+			0 100%,
+			100% 100%;
+	}
+	25% {
+		background-position:
+			100% 0,
+			0 100%,
+			100% 100%;
+	}
+	50% {
+		background-position:
+			100% 0,
+			0 0,
+			100% 100%;
+	}
+	75% {
+		background-position:
+			100% 0,
+			0 0,
+			0 100%;
+	}
+	100% {
+		background-position:
+			100% 100%,
+			0 0,
+			0 100%;
+	}
+}

package/styles/common/common.scss

@@ -0,0 +1,44 @@
+@use "./animation.scss";
+
+/** 复制图标样式 */
+.fa__copy-icon {
+	margin-right: 3px;
+	cursor: pointer;
+}
+
+/** 鼠标置入放大动画 */
+.fa__hover__twinkle {
+	transform-origin: center;
+	&:hover {
+		:first-child {
+			animation: twinkle var(--el-transition-duration) linear;
+		}
+	}
+}
+
+/** 鼠标置入浮动动画 */
+.fa__hover__suspension {
+	transition: all var(--el-transition-duration) ease;
+	&:hover {
+		-webkit-transform: translateY(-4px) scale(1.02);
+		-moz-transform: translateY(-4px) scale(1.02);
+		-ms-transform: translateY(-4px) scale(1.02);
+		-o-transform: translateY(-4px) scale(1.02);
+		transform: translateY(-4px) scale(1.02);
+		-webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
+		box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
+		border-radius: 6px;
+	}
+}
+
+/** 鼠标点击禁止效果 */
+.fa__click__disabled {
+	&.fa__click__disabled__cursor {
+		position: relative !important;
+		pointer-events: auto !important;
+	}
+	pointer-events: none !important;
+	&:hover {
+		cursor: not-allowed !important;
+	}
+}

package/styles/common/loading.scss

@@ -0,0 +1,29 @@
+@use "./animation.scss";
+
+.__fa-loading {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	background-color: var(--el-bfa-color);
+	z-index: 9990;
+	.__fa-loading__box {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		.__fa-loading__box-warp {
+			width: 80px;
+			height: 80px;
+			.__fa-loading__box-warp__item {
+				width: 55px;
+				aspect-ratio: 1;
+				--g1: conic-gradient(from 90deg at 3px 3px, #0000 90deg, var(--el-color-primary) 0);
+				--g2: conic-gradient(from -90deg at 22px 22px, #0000 90deg, var(--el-color-primary) 0);
+				background: var(--g1), var(--g1), var(--g1), var(--g2), var(--g2), var(--g2);
+				background-size: 25px 25px;
+				background-repeat: no-repeat;
+				animation: loading 1.2s infinite;
+			}
+		}
+	}
+}

package/styles/common/overlay.scss

@@ -0,0 +1,12 @@
+@use "./animation.scss";
+
+.__fa-overlay {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 9990;
+	pointer-events: auto;
+	cursor: not-allowed;
+}

package/styles/components/carNumber.scss

@@ -0,0 +1,44 @@
+.fa-car-number__popover {
+	margin-top: -12px;
+	// 按钮的宽度 + popover padding + 边框
+	width: calc(360px + var(--el-popover-padding) * 2 + 2px) !important;
+	.fa-car-number__popover__hide {
+		display: none !important;
+	}
+	.fa-car-number__popover__digit-letter {
+		display: flex;
+		flex-wrap: wrap;
+		.el-button {
+			width: 32px;
+			margin: 2px;
+		}
+	}
+	.fa-car-number__popover__area {
+		display: flex;
+		flex-wrap: wrap;
+		.el-button {
+			width: 32px;
+			margin: 2px;
+		}
+		.el-button:nth-child(11) {
+			margin-left: 20px;
+		}
+		.el-button:nth-child(19) {
+			margin-right: 20px;
+		}
+		.el-button:nth-child(20) {
+			margin-left: 38px;
+		}
+		.el-button:nth-child(27) {
+			margin-right: 38px;
+		}
+		.el-button:nth-child(28) {
+			margin-left: 56px;
+		}
+	}
+	.fa-car-number__popover__btn {
+		display: flex;
+		justify-content: end;
+		margin-top: 2px;
+	}
+}

package/styles/components/contextMenu.scss

@@ -0,0 +1,34 @@
+.fa-context-menu {
+	position: fixed;
+	padding: 0;
+	box-shadow: var(--el-dropdown-menu-box-shadow);
+	border: none;
+	.el-dropdown-menu {
+		.el-dropdown-menu__item {
+			font-size: var(--el-font-size-small);
+			.fa-icon {
+				margin-right: 5px;
+			}
+		}
+		.el-dropdown-menu__item:not(.is-disabled) {
+			&:hover {
+				background-color: var(--el-dropdown-menuItem-hover-fill);
+				color: var(--el-dropdown-menuItem-hover-color);
+				.fa-icon {
+					color: var(--el-dropdown-menuItem-hover-color);
+				}
+			}
+		}
+	}
+}
+
+.fa-context-menu-small {
+	.el-dropdown-menu {
+		.el-dropdown-menu__item {
+			font-size: var(--el-font-size-extra-small);
+			.fa-icon {
+				margin-right: 3px;
+			}
+		}
+	}
+}

package/styles/components/dialog.scss

@@ -0,0 +1,88 @@
+.fa-dialog {
+	--height: 90%;
+	--fa-dialog-header-height: 40px;
+	--fa-dialog-footer-height: 45px;
+	padding: 0 8px;
+	margin-bottom: 0;
+	display: flex;
+	flex-direction: column;
+	width: var(--el-dialog-width, 90%);
+	max-height: var(--height);
+	font-size: var(--el-font-size-base);
+	transition:
+		width var(--el-transition-duration),
+		height var(--el-transition-duration);
+	.el-dialog__header {
+		height: var(--fa-dialog-header-height);
+		border-bottom: 1px solid var(--el-border-color-lighter);
+		padding: 0;
+		display: flex;
+		align-items: center;
+		.fa-dialog__header-title {
+			flex: 1;
+		}
+		.fa-dialog__header-icon {
+			width: 30px;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			.el-icon {
+				width: 100%;
+				height: 100%;
+				font-size: var(--el-font-size-large);
+				color: var(--el-color-info);
+			}
+		}
+	}
+	.el-dialog__body {
+		overflow: hidden;
+		padding: 8px;
+		flex: 1;
+		display: flex;
+		flex-direction: row;
+		> .el-scrollbar {
+			height: inherit;
+			flex: 1;
+			> .el-scrollbar__wrap {
+				> .el-scrollbar__view {
+					height: 100%;
+				}
+			}
+		}
+	}
+	.el-dialog__footer {
+		height: var(--fa-dialog-footer-height);
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: right;
+		border-top: 1px solid var(--el-border-color-lighter);
+	}
+	// 撑满
+	&.fa-dialog__fill-height {
+		height: var(--height);
+	}
+	// 全屏
+	&.fa-dialog__fullscreen {
+		--el-dialog-width: 100% !important;
+		--height: 100% !important;
+		height: var(--height);
+	}
+}
+
+.fa-dialog-small {
+	--fa-dialog-header-height: 35px;
+	--fa-dialog-footer-height: 40px;
+	padding: 0 6px;
+	font-size: var(--el-font-size-extra-small);
+	.el-dialog__header {
+		.fa-dialog__header-icon {
+			width: 25px;
+			.el-icon {
+				font-size: var(--el-font-size-medium);
+			}
+		}
+	}
+}

package/styles/components/drawer.scss

@@ -0,0 +1,87 @@
+.fa-drawer {
+	--fa-drawer-header-height: 40px;
+	--fa-drawer-footer-height: 45px;
+	display: flex;
+	flex-direction: column;
+	font-size: var(--el-font-size-base);
+	transition:
+		all var(--el-transition-duration),
+		width var(--el-transition-duration);
+	.el-drawer__header {
+		height: var(--fa-drawer-header-height);
+		border-bottom: 1px solid var(--el-border-color-lighter);
+		padding: 0;
+		padding-left: 10px;
+		margin: 0;
+		display: flex;
+		align-items: center;
+		.fa-drawer__header-title {
+			flex: 1;
+		}
+		.fa-drawer__header-icon {
+			width: 30px;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			.el-icon {
+				width: 100%;
+				height: 100%;
+				font-size: var(--el-font-size-large);
+				color: var(--el-color-info);
+			}
+		}
+	}
+	.el-drawer__body {
+		overflow: hidden;
+		padding: 8px;
+		.fa-drawer__draggable {
+			height: 100%;
+			width: 5px;
+			cursor: w-resize;
+			position: absolute;
+			left: -2.5px;
+			top: 0;
+		}
+		> .el-scrollbar {
+			> .el-scrollbar__wrap {
+				> .el-scrollbar__view {
+					height: 100%;
+				}
+			}
+		}
+	}
+	.el-drawer__footer {
+		height: var(--fa-drawer-footer-height);
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: right;
+		border-top: 1px solid var(--el-border-color-lighter);
+	}
+	// 拖拽
+	&.fa-drawer__dragging {
+		// 解决拖拽宽度卡顿的问题
+		transition: width 0s !important;
+	}
+	// 全屏
+	&.fa-drawer__fullscreen {
+		width: 100% !important;
+	}
+}
+
+.fa-drawer-small {
+	--fa-drawer-header-height: 35px;
+	--fa-drawer-footer-height: 40px;
+	padding: 0 6px;
+	font-size: var(--el-font-size-extra-small);
+	.el-drawer__header {
+		.fa-drawer__header-icon {
+			width: 25px;
+			.el-icon {
+				font-size: var(--el-font-size-medium);
+			}
+		}
+	}
+}

package/styles/components/form.scss

@@ -0,0 +1,44 @@
+.fa-form {
+	// 滚动条
+	padding-right: 10px;
+	.el-form-item__label {
+		padding: 0 6px 0 0;
+	}
+}
+
+.fa-form-small {
+	.el-form-item__label {
+		padding: 0 6px 0 0;
+	}
+}
+
+.fa-form-detail {
+	.el-form-item__label {
+		color: var(--el-color-info);
+		height: 18px;
+		line-height: 18px;
+	}
+	.el-form-item__content {
+		line-height: 14px;
+		// 表单组件自动宽度100%
+		> * {
+			width: auto;
+		}
+	}
+	.el-form-item {
+		margin-bottom: 8px;
+	}
+}
+
+.fa-form-detail-small {
+	.el-form-item__label {
+		height: 16px;
+		line-height: 16px;
+	}
+	.el-form-item__content {
+		line-height: 12px;
+	}
+	.el-form-item {
+		margin-bottom: 6px;
+	}
+}

package/styles/components/formItemTip.scss

@@ -0,0 +1,7 @@
+.fa-form-item-tip {
+	display: inline-flex;
+	align-items: center;
+	.fa-form-item-tip__label {
+		margin-left: 4px;
+	}
+}

package/styles/components/image.scss

@@ -0,0 +1,19 @@
+.fa-image {
+	.el-image__inner {
+		transition: all var(--el-transition-duration);
+		cursor: pointer;
+		&:hover {
+			transform: scale(1.2);
+		}
+	}
+	.fa-image__error-image {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100%;
+		background: var(--el-fill-color-light);
+		color: var(--el-text-color-secondary);
+		font-size: 30px;
+	}
+}

package/styles/components/selectPage.scss

@@ -0,0 +1,74 @@
+.fa-select-page-dropdown {
+	.el-select-dropdown__header {
+		padding: 5px;
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+		.fa-select-page-dropdown__default-selector {
+			list-style: none;
+			padding: 0 8px 0 5px;
+			> :first-child {
+				float: left;
+			}
+			> :nth-child(2) {
+				float: right;
+				color: var(--el-text-color-secondary);
+				font-size: var(--el-font-size-extra-small);
+			}
+		}
+		.fa-select-page-dropdown__search-input {
+			width: 100%;
+		}
+	}
+	.el-scrollbar {
+		.el-select-dropdown__wrap {
+			.el-select-dropdown__list {
+				.fa-select-page-dropdown__selector__more-detail {
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					height: 42px;
+					> :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);
+					}
+				}
+			}
+		}
+	}
+	.el-select-dropdown__footer {
+		padding: 5px;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		gap: 5px;
+		.fa-select-page-dropdown__pagination {
+			height: 24px;
+			padding-right: 5px;
+		}
+	}
+}
+
+.fa-select-page-dropdown-small {
+	.el-select-dropdown__header {
+		.fa-select-page-dropdown__default-selector {
+			> :nth-child(2) {
+				font-size: calc(var(--el-font-size-extra-small) - 1px);
+			}
+		}
+	}
+	.el-scrollbar {
+		.el-select-dropdown__wrap {
+			.el-select-dropdown__list {
+				.fa-select-page-dropdown__selector__more-detail {
+					height: 34px;
+				}
+			}
+		}
+	}
+}