refactor(mono): 提取公共utils以及细节调整(changelog-needed)

affects: @ued-plus/components, @ued-plus/utils

ISSUES CLOSED: none

Author: bin-K

.eslintrc.cjs

@@ -17,7 +17,11 @@ module.exports = defineConfig({
 		},
 	},
 	// 启用的规则
-	extends: ['plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'standard'],
+	extends: [
+		'plugin:vue/vue3-recommended',
+		'plugin:@typescript-eslint/recommended',
+		'standard',
+	],
 	rules: {
 		quotes: ['error', 'single'],
 		'@typescript-eslint/ban-ts-ignore': 'off',
@@ -46,6 +50,7 @@ module.exports = defineConfig({
 			},
 		],
 		'no-tabs': 'off',
+		'no-mixed-spaces-and-tabs': 'off',
 		indent: 'off',
 		'vue/custom-event-name-casing': 'off',
 		'vue/html-indent': 'off',
@@ -56,4 +61,4 @@ module.exports = defineConfig({
 		'space-before-function-paren': 'off',
 		'comma-dangle': 'off',
 	},
-})
+})

package.json

@@ -94,5 +94,9 @@
 		"**/*.{css,less,scss}": [
 			"stylelint --fix \"**/*.{css,less}\""
 		]
+	},
+	"dependencies": {
+		"@ued-plus/components": "workspace:^",
+		"@ued-plus/utils": "workspace:^"
 	}
 }

packages/components/src/button/button.vue

@@ -18,13 +18,9 @@
 </template>
 
 <script lang="ts" setup>
-import { UedIcon } from '../icon'
-import { Loading } from '../icon/icon'
-import { computed, ComponentCustomProps, useSlots, ref, inject } from 'vue'
 import './styles/index.scss'
-
-const buttonType = inject('type', undefined)
-const buttonSize = inject('size', undefined)
+import { UedIcon, Loading } from '@ued-plus/components'
+import { computed, ComponentCustomProps, useSlots, ref, inject } from 'vue'
 
 defineOptions({ name: 'UedButton' })
 
@@ -46,6 +42,9 @@ type ButtonProps = {
 
 const buttonProps = defineProps<ButtonProps>()
 
+const buttonType = inject('type', undefined)
+const buttonSize = inject('size', undefined)
+
 const $slots = useSlots()
 
 const buttonRef = ref()

packages/components/src/container/components/aside/index.vue

@@ -7,6 +7,7 @@
 <script lang="ts" setup>
 import '../../styles/aside.scss'
 import { computed } from 'vue'
+import { handleStringOrNumberPx } from '@ued-plus/utils'
 
 defineOptions({ name: 'UedAside' })
 
@@ -17,12 +18,8 @@ type AsideProps = {
 const asideProps = defineProps<AsideProps>()
 
 const asideStyle = computed(() => {
-	const width =
-		typeof asideProps.width === 'string'
-			? asideProps.width.split('px')[0]
-			: asideProps.width
 	return {
-		width: Number.isNaN(Number(width)) ? undefined : Number(width) + 'px',
+		width: handleStringOrNumberPx(asideProps.width),
 	}
 })
 </script>

packages/components/src/container/components/footer/index.vue

@@ -7,6 +7,7 @@
 <script lang="ts" setup>
 import '../../styles/footer.scss'
 import { computed } from 'vue'
+import { handleStringOrNumberPx } from '@ued-plus/utils'
 
 defineOptions({ name: 'UedFooter' })
 
@@ -17,12 +18,8 @@ type FooterProps = {
 const footerProps = defineProps<FooterProps>()
 
 const footerStyle = computed(() => {
-	const height =
-		typeof footerProps.height === 'string'
-			? footerProps.height.split('px')[0]
-			: footerProps.height
 	return {
-		height: Number.isNaN(Number(height)) ? undefined : Number(height) + 'px',
+		height: handleStringOrNumberPx(footerProps.height),
 	}
 })
 </script>

packages/components/src/container/components/header/index.vue

@@ -7,6 +7,7 @@
 <script lang="ts" setup>
 import '../../styles/header.scss'
 import { computed } from 'vue'
+import { handleStringOrNumberPx } from '@ued-plus/utils'
 
 defineOptions({ name: 'UedHeader' })
 
@@ -17,12 +18,8 @@ type HeaderProps = {
 const headerProps = defineProps<HeaderProps>()
 
 const headerStyle = computed(() => {
-	const height =
-		typeof headerProps.height === 'string'
-			? headerProps.height.split('px')[0]
-			: headerProps.height
 	return {
-		height: Number.isNaN(Number(height)) ? undefined : Number(height) + 'px',
+		height: handleStringOrNumberPx(headerProps.height),
 	}
 })
 </script>

packages/components/src/icon/icon.vue

@@ -5,18 +5,13 @@
 	</component>
 </template>
 <script lang="ts" setup>
-import { computed, onMounted } from 'vue'
 import './styles/index.scss'
-
+import { computed, onMounted } from 'vue'
+import { isNumber } from '@ued-plus/utils'
 import Common from './components/common/index.vue'
 
 defineOptions({ name: 'UedIcon' })
 
-onMounted(() => {
-	// 引入字体图标文件
-	import('./font/iconfont.js' as any)
-})
-
 type IconProps = {
 	name?: string
 	size?: number
@@ -33,8 +28,7 @@ const iconName = computed(() => {
 
 const iconStyle = computed(() => {
 	return {
-		fontSize:
-			typeof iconProps.size === 'number' ? iconProps.size + 'px' : undefined,
+		fontSize: isNumber(iconProps.size) ? `${iconProps.size}px` : undefined,
 		color: iconProps.color,
 	}
 })
@@ -45,13 +39,18 @@ const iconClass = computed(() => {
 	}
 })
 const badge = computed(() => {
-	return typeof iconProps.badge === 'number'
-		? iconProps.badge >= 100
+	return isNumber(iconProps.badge)
+		? iconProps.badge && iconProps.badge >= 100
 			? '99+'
 			: iconProps.badge
 		: ''
 })
 const icon = computed(() => {
 	return iconProps.name ? Common : 'i'
 })
+
+onMounted(() => {
+	// 引入字体图标文件
+	import('./font/iconfont.js' as any)
+})
 </script>

packages/components/src/layout/col.vue

@@ -7,11 +7,10 @@
 <script lang="ts" setup>
 import './styles/col.scss'
 import { computed, inject, PropType } from 'vue'
+import { isPositiveNumber } from '@ued-plus/utils'
 
 defineOptions({ name: 'UedCol' })
 
-const rowGutter = inject('row-gutter', undefined)
-
 type ColProps = {
 	span?: number
 	offset?: number
@@ -62,24 +61,22 @@ const colProps = defineProps({
 	},
 })
 
-const judgeNumber = (num: number | undefined) => {
-	return typeof num === 'number' && num > 0
-}
+const rowGutter = inject('row-gutter', undefined)
 
 const handleBootstrap = (size: number | ColProps, sizeType: string) => {
-	if (typeof size === 'number') {
+	if (typeof size === 'object') {
 		return {
-			[`ued-col-${sizeType}-${size}`]: judgeNumber(size),
-		}
-	} else if (typeof size === 'object') {
-		return {
-			[`ued-col-${sizeType}-${size.span}`]: judgeNumber(size.span),
-			[`ued-col-offset-${sizeType}-${size.offset}`]: judgeNumber(size.offset),
-			[`ued-col-offset-${sizeType}-${size.pull}`]: judgeNumber(size.pull),
-			[`ued-col-offset-${sizeType}-${size.push}`]: judgeNumber(size.push),
+			[`ued-col-${sizeType}-${size.span}`]: isPositiveNumber(size.span),
+			[`ued-col-offset-${sizeType}-${size.offset}`]: isPositiveNumber(
+				size.offset
+			),
+			[`ued-col-offset-${sizeType}-${size.pull}`]: isPositiveNumber(size.pull),
+			[`ued-col-offset-${sizeType}-${size.push}`]: isPositiveNumber(size.push),
 		}
 	}
-	return {}
+	return {
+		[`ued-col-${sizeType}-${size}`]: isPositiveNumber(size),
+	}
 }
 
 const colClass = computed(() => {
@@ -90,10 +87,10 @@ const colClass = computed(() => {
 	const xlSize = colProps.xl && handleBootstrap(colProps.xl, 'xl')
 
 	return {
-		[`ued-col-${colProps.span}`]: judgeNumber(colProps.span),
-		[`ued-col-offset-${colProps.offset}`]: judgeNumber(colProps.offset),
-		[`ued-col-pull-${colProps.pull}`]: judgeNumber(colProps.pull),
-		[`ued-col-push-${colProps.push}`]: judgeNumber(colProps.push),
+		[`ued-col-${colProps.span}`]: isPositiveNumber(colProps.span),
+		[`ued-col-offset-${colProps.offset}`]: isPositiveNumber(colProps.offset),
+		[`ued-col-pull-${colProps.pull}`]: isPositiveNumber(colProps.pull),
+		[`ued-col-push-${colProps.push}`]: isPositiveNumber(colProps.push),
 		'is-guttered': rowGutter,
 		...xsSize,
 		...smSize,

packages/components/src/layout/row.vue

@@ -7,6 +7,7 @@
 <script lang="ts" setup>
 import './styles/row.scss'
 import { computed, provide } from 'vue'
+import { isPositiveNumber } from '@ued-plus/utils'
 
 defineOptions({ name: 'UedRow' })
 
@@ -31,9 +32,7 @@ const rowProps = defineProps({
 
 provide(
 	'row-gutter',
-	typeof rowProps.gutter === 'number' && rowProps.gutter > 0
-		? Math.floor(rowProps.gutter)
-		: undefined
+	isPositiveNumber(rowProps.gutter) ? Math.floor(rowProps.gutter) : undefined
 )
 
 const rowClass = computed(() => {
@@ -44,10 +43,9 @@ const rowClass = computed(() => {
 })
 
 const rowStyle = computed(() => {
-	const marginNum =
-		typeof rowProps.gutter === 'number' && rowProps.gutter > 0
-			? `-${Math.floor(rowProps.gutter) / 2}px`
-			: undefined
+	const marginNum = isPositiveNumber(rowProps.gutter)
+		? `-${Math.floor(rowProps.gutter) / 2}px`
+		: undefined
 	return {
 		'margin-left': marginNum,
 		'margin-right': marginNum,

packages/components/src/link/link.vue

@@ -17,8 +17,6 @@ import { computed, ComponentCustomProps, PropType, useSlots } from 'vue'
 
 defineOptions({ name: 'UedLink' })
 
-const $slots = useSlots()
-
 const linkProps = defineProps({
 	type: {
 		type: String,
@@ -38,6 +36,8 @@ const linkProps = defineProps({
 	},
 })
 
+const $slots = useSlots()
+
 const linkClass = computed(() => {
 	return {
 		[`ued-link--${linkProps.type}`]: linkProps.type,