uview-ultra-plus 1.12.2 → 1.14.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uview-ultra-plus",
-  "version": "1.12.2",
+  "version": "1.14.0",
   "workspaces": [
     "packages/*",
     "examples/*"
@@ -20,7 +20,8 @@
     "build": "node scripts/build.js",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs",
+    "docs:serve": "vitepress preview docs",
+    "icons:build": "node packages/uview-ultra-icons/scripts/build.js",
     "watch:examples": "node scripts/build.js --watch",
     "rollup": "rollup -c rollup.config.mjs",
     "test": "echo \"No test specified\""
@@ -58,9 +59,13 @@
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
+    "case": "^1.6.3",
     "chokidar": "^5.0.0",
+    "figma-api": "^2.1.2-beta",
     "release-it": "^19.2.4",
     "rollup": "^4.59.0",
+    "svgo": "^4.0.0",
+    "svgtofont": "^6.5.1",
     "vitepress": "^1.6.4",
     "vue": "^3.5.29"
   },

package/dist/scripts/build.js

@@ -53,6 +53,51 @@ function runRollup() {
     execSync('npm run rollup', { stdio: 'inherit', cwd: projectRoot });
 }
 
+function collectIconAssets() {
+    console.log('[Build] Collecting icon assets from @uview-ultra/icons...');
+    const iconDist = path.join(projectRoot, 'packages/uview-ultra-icons/dist/uniapp');
+    const targetStatic = path.join(distPath, 'uview-ultra/static/uview-ultra');
+    const targetVendor = path.join(distPath, 'uview-ultra/vendor/icons');
+
+    if (!fs.existsSync(targetStatic)) fs.mkdirSync(targetStatic, { recursive: true });
+    if (!fs.existsSync(targetVendor)) fs.mkdirSync(targetVendor, { recursive: true });
+
+    if (fs.existsSync(iconDist)) {
+        // 1. Copy Binary Assets (TTF)
+        const fontFile = path.join(iconDist, 'upicon-custom.ttf');
+        if (fs.existsSync(fontFile)) {
+            fs.copyFileSync(fontFile, path.join(targetStatic, 'upicon-custom.ttf'));
+        }
+
+        // 2. Copy Images
+        const imgDist = path.join(iconDist, 'images');
+        if (fs.existsSync(imgDist)) {
+            const imgTarget = path.join(targetStatic, 'images');
+            if (!fs.existsSync(imgTarget)) fs.mkdirSync(imgTarget, { recursive: true });
+            execSync(`rsync -aq "${imgDist}/" "${imgTarget}/"`);
+        }
+
+        // 3. Copy Metadata for local distribution (Self-contained uni_modules)
+        const metadataFiles = ['icons-svg.js', 'icons-custom.json', 'icons-multicolor.json', 'icons-generated.js', 'icons-generated.uts'];
+        metadataFiles.forEach(file => {
+            const src = path.join(iconDist, file);
+            if (fs.existsSync(src)) {
+                fs.copyFileSync(src, path.join(targetVendor, file));
+            }
+        });
+
+        // 4. Copy SVG Chunks for dynamic loading
+        const svgsSrc = path.join(iconDist, 'svgs');
+        if (fs.existsSync(svgsSrc)) {
+            const svgsTarget = path.join(targetVendor, 'svgs');
+            if (!fs.existsSync(svgsTarget)) fs.mkdirSync(svgsTarget, { recursive: true });
+            execSync(`rsync -aq "${svgsSrc}/" "${svgsTarget}/"`);
+        }
+    } else {
+        console.warn('[Build] @uview-ultra/icons dist not found. Did you run icons:build?');
+    }
+}
+
 function patchImports() {
     console.log('[Build] Patching imports in dist...');
     require('./patch-imports.js');
@@ -70,6 +115,7 @@ function fullBuild() {
     
     runRollup();
     patchImports();
+    collectIconAssets();
     syncExamples(); // Sync from dist/uview-ultra to examples
     console.log('[Build] Successfully completed!');
 }
@@ -97,6 +143,7 @@ function watch() {
                 // Rollup (vendor) usually doesn't need to re-run unless dependencies change
                 syncSourceToDist();
                 patchImports();
+                collectIconAssets();
                 syncExamples();
                 console.log('[Watch] Sync completed. Waiting for changes...');
             } catch (e) {

package/dist/scripts/patch-imports.js

@@ -39,6 +39,18 @@ const replacements = [
             // In dist, lime-dayuts is a peer of uview-ultra
             return `./${relToDist}/lime-dayuts`;
         }
+    },
+    {
+        pattern: /import (.*) from ['"]@uview-ultra\/icons\/dist\/uniapp\/(.*)['"]/g,
+        replacement: (filePath) => {
+            return (match, p1, p2) => {
+                const target = path.join(distUViewPath, 'vendor/icons', p2);
+                const relPath = path.relative(path.dirname(filePath), target);
+                // Ensure we use ./ for adjacent files
+                const finalPath = relPath.startsWith('.') ? relPath : `./${relPath}`;
+                return `import ${p1} from '${finalPath}'`;
+            }
+        }
     }
 ];
 

package/dist/uview-ultra/components/up-icon/icon.js

@@ -1,22 +1,8 @@
-/*
- * @Author       : LQ,jry
- * @Description  :
- * @version      : 3.0
- * @Date         : 2021-08-20 16:44:21
- * @LastAuthor   : jry
- * @lastTime     : 2024-08-20 14:20:58
- * @FilePath     : /uview-ultra/libs/config/props/icon.js
- */
-import config from '../../libs/config/config.js'
-
-const {
-    color
-} = config
 export default {
     // icon组件
     icon: {
         name: '',
-        color: color['up-content-color'],
+        color: '',
         size: '16px',
         bold: false,
         index: '',
@@ -25,12 +11,12 @@ export default {
         label: '',
         labelPos: 'right',
         labelSize: '15px',
-        labelColor: color['up-content-color'],
+        labelColor: '',
         space: '3px',
         imgMode: '',
         width: '',
         height: '',
-        top: '0',
+        top: 0,
         stop: false
     }
 }

package/dist/uview-ultra/components/up-icon/icon.uts

@@ -1,19 +1,8 @@
-/*
- * @Author       : jry
- * @Description  :
- * @version      : 4.0
- * @Date         : 2024-04-22 16:44:21
- * @LastAuthor   : jry
- * @lastTime     : 2024-08-28 18:00:14
- * @FilePath     : /uview-ultra/libs/config/props/icon.js
- */
-import config from '../../libs/config/config.uts'
-
 export default {
     // icon组件
     icon: {
         name: '',
-        color: config.getString('color.up-content-color'),
+        color: '',
         size: '16px',
         bold: false,
         index: '',
@@ -22,12 +11,12 @@ export default {
         label: '',
         labelPos: 'right',
         labelSize: '15px',
-        labelColor: config.getString('color.up-content-color'),
+        labelColor: '',
         space: '3px',
         imgMode: '',
         width: '',
         height: '',
-        top: '0',
+        top: 0,
         stop: false
     }
 } as UTSJSONObject

package/dist/uview-ultra/components/up-icon/up-icon.uvue

@@ -9,13 +9,20 @@
 		    v-if="isImg"
 		    :src="name"
 		    :mode="imgMode"
-		    :style="[imgStyle, $up.addStyle(customStyle)]"
+		    :style="[imgStyle, addStyle(customStyle)]"
+		></image>
+		<image
+		    class="up-icon__img"
+		    v-else-if="isMultiColor"
+		    :src="imgSrc"
+		    :mode="imgMode"
+		    :style="[imgStyle, addStyle(customStyle)]"
 		></image>
 		<text
 		    v-else
 		    class="up-icon__icon"
 		    :class="uClasses"
-		    :style="[iconStyle, $up.addStyle(customStyle)]"
+		    :style="[iconStyle, addStyle(customStyle)]"
 		    :hover-class="hoverClass"
 		>{{icon}}</text>
 		<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
@@ -24,204 +31,236 @@
 		    class="up-icon__label"
 		    :style="{
 			color: labelColor,
-			fontSize: $up.addUnit(labelSize),
-			marginLeft: labelPos == 'right' ? $up.addUnit(space) : 0,
-			marginTop: labelPos == 'bottom' ? $up.addUnit(space) : 0,
-			marginRight: labelPos == 'left' ? $up.addUnit(space) : 0,
-			marginBottom: labelPos == 'top' ? $up.addUnit(space) : 0,
+			fontSize: addUnit(labelSize),
+			marginLeft: labelPos == 'right' ? addUnit(space) : 0,
+			marginTop: labelPos == 'bottom' ? addUnit(space) : 0,
+			marginRight: labelPos == 'left' ? addUnit(space) : 0,
+			marginBottom: labelPos == 'top' ? addUnit(space) : 0,
 		}"
 		>{{ label }}</text>
 	</view>
 </template>
 
 <script setup lang="uts">
-	import icons from './icons.uts'
+	import customIcons from '../../vendor/icons/icons-custom.json'
+	import multiColorIcons from '../../vendor/icons/icons-multicolor.json'
+	import iconsSvg from '../../vendor/icons/icons-svg.js'
+	import generatedIcons from '../../vendor/icons/icons-generated.uts'
 	import { addUnit, addStyle } from '../../libs/function/index'
 	import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI'
 	import config from '../../libs/config/config';
-	import defProps from './icon'
-	import { computed } from 'vue'
-	const { preventEvent } = useUltraUI()
-	
-	// 定义props
+
 	const props = defineProps({
-		// 图标类名
+		// 每个组件都有的父组件传递的样式，可以为字符串或者对象形式
+		customStyle: {
+			type: [UTSJSONObject, String],
+			default: () : UTSJSONObject => ({})
+		},
+		customClass: {
+			type: String,
+			default: ''
+		},
+		// 跳转的页面路径
+		url: {
+			type: String,
+			default: ''
+		},
+		// 页面跳转的类型
+		linkType: {
+			type: String,
+			default: 'navigateTo'
+		},
+		// 图标名称，见示例图标集
 		name: {
 			type: String,
-			default: () => defProps.getString('icon.name')
+			default: ''
 		},
-		// 图标颜色，可接受主题色
+		// 图标颜色,可接受主题色
 		color: {
 			type: String,
-			default: () => defProps.getString('icon.color')
+			default: ''
 		},
-		// 字体大小，单位px
+		// 图标字体大小，单位px
 		size: {
 			type: [String, Number],
-			default: () => defProps.getString('icon.size')
+			default: '16px'
 		},
 		// 是否显示粗体
 		bold: {
 			type: Boolean,
-			default: () => defProps.getBoolean('icon.bold')
+			default: false
 		},
 		// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
 		index: {
-			type: [String],
-			default: () => defProps.getString('icon.index')
+			type: [String, Number],
+			default: ''
 		},
-		// 触摸图标时的类名
+		// 图标按下去的样式类，用法同uni的view组件的hoverClass参数，详情见官网
 		hoverClass: {
 			type: String,
-			default: () => defProps.getString('icon.hoverClass')
+			default: ''
 		},
 		// 自定义扩展前缀，方便用户扩展自己的图标库
 		customPrefix: {
 			type: String,
-			default: () => defProps.getString('icon.customPrefix')
+			default: 'upicon'
 		},
-		// 图标右边或者下面的文字
+		// 图标右侧的label文字
 		label: {
-			type: [String],
-			default: () => defProps.getString('icon.label')
+			type: [String, Number],
+			default: ''
 		},
-		// label的位置，只能右边或者下边
+		// label相对于图标的位置，只能right或bottom
 		labelPos: {
 			type: String,
-			default: () => defProps.getString('icon.labelPos')
+			default: 'right'
 		},
-		// label的大小
+		// label字体大小，单位px
 		labelSize: {
 			type: [String, Number],
-			default: () => defProps.getArray('icon.labelSize')
+			default: '15px'
 		},
-		// label的颜色
+		// 图标右侧的label文字颜色
 		labelColor: {
 			type: String,
-			default: () => defProps.getString('icon.labelColor')
+			default: ''
 		},
-		// label与图标的距离
+		// label与图标的距离，单位px
 		space: {
 			type: [String, Number],
-			default: () => defProps.getArray('icon.space')
+			default: '3px'
 		},
 		// 图片的mode
 		imgMode: {
 			type: String,
-			default: () => defProps.getString('icon.imgMode')
+			default: ''
 		},
-		// 用于显示图片小图标时，图片的宽度
+		// 显示图片小图标时的宽度
 		width: {
 			type: [String, Number],
-			default: () => defProps.getArray('icon.width')
+			default: ''
 		},
-		// 用于显示图片小图标时，图片的高度
+		// 显示图片小图标时的高度
 		height: {
 			type: [String, Number],
-			default: () => defProps.getArray('icon.height')
+			default: ''
 		},
-		// 用于解决某些情况下，让图标垂直居中的用途
+		// 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途
 		top: {
 			type: [String, Number],
-			default: () => defProps.getArray('icon.top')
+			default: 0
 		},
 		// 是否阻止事件传播
 		stop: {
 			type: Boolean,
-			default: () => defProps.getBoolean('icon.stop')
-		}
+			default: false
+		},
 	})
 	
 	const emit = defineEmits(['click'])
-	
-	// 计算属性
-	const uClasses = computed(() => {
-		let classes: Array<string> = []
+
+
+	const uClasses = computed(() : string[] => {
+		let classes = [] as string[]
 		classes.push(props.customPrefix + '-' + props.name)
-		// uview-plus的自定义图标类名为up-iconfont
 		if (props.customPrefix == 'upicon') {
-			classes.push('up-iconfont')
+			classes.push('up-icon-custom')
 		} else {
-			// 不能缺少这一步，否则自定义图标会无效
 			classes.push(props.customPrefix)
 		}
-		// 主题色，通过类配置。
-		let types: Array<string>|null = config.getArray('type') as Array<string>
-		if (props.color.toString() != '' && types != null
-			&& types?.includes(props.color.toString()) as boolean
-		) classes.push('up-icon__icon--' + props.color.toString())
-		// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
-		// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
-		return classes.join(' ')
+		// 主题色，通过类配置
+		const themes = config['type'] as string[]
+		if (props.color != '' && themes.includes(props.color)) {
+			classes.push('up-icon__icon--' + props.color)
+		}
+		return classes
 	})
 	
-	const iconStyle = computed(() => {
+	const iconStyle = computed(() : UTSJSONObject => {
+		const themes = config['type'] as string[]
 		let style = {
-			fontSize: addUnit(props.size.toString()),
-			lineHeight: addUnit(props.size.toString()),
-			fontWeight: (props.bold as boolean) ? 'bold' : 'normal',
-			// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
+			fontSize: addUnit(props.size),
+			lineHeight: addUnit(props.size),
+			fontWeight: props.bold ? 'bold' : 'normal',
+			// 某些特殊情况 need to set a distance to the top to better center vertically
 			top: addUnit(props.top)
-		}
+		} as UTSJSONObject 
 		// 非主题色值时，才当作颜色值
-		let types: Array<string>|null = config.getArray('type') as Array<string>
-		if (props.color.toString() != '' && types != null && !types.includes(props.color.toString())) {
-			style['color'] = props.color.toString()
+		if (props.color != '' && !themes.includes(props.color)) {
+			style['color'] = props.color
 		}
-
+	
 		return style
 	})
 	
 	// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
-	const isImg = computed(() => {
-		return props.name.toString().indexOf('/') != -1
+	const isImg = computed(() : boolean => {
+		return props.name.indexOf('/') !== -1
 	})
 	
-	const imgStyle = computed(() => {
-		let style = {}
+	const imgStyle = computed(() : UTSJSONObject => {
+		let style = {} as UTSJSONObject
 		// 如果设置width和height属性，则优先使用，否则使用size属性
-		style['width'] = props.width != '' ? addUnit(props.width) : addUnit(props.size!!.toString())
-		style['height'] = props.height != '' ? addUnit(props.height) : addUnit(props.size!!.toString())
+		style['width'] = props.width != '' ? addUnit(props.width) : addUnit(props.size)
+		style['height'] = props.height != '' ? addUnit(props.height) : addUnit(props.size)
 		return style
 	})
 	
 	// 通过图标名，查找对应的图标
-	const icon = computed(() => {
+	const icon = computed(() : string => {
 		// 使用自定义图标的时候页面上会把name属性也展示出来，所以在这里处理一下
 		if (props.customPrefix !== "upicon") return "";
 		// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
-		if (icons['upicon-' + props.name] != null) {
-			return icons['upicon-' + props.name] as string
+		if (generatedIcons[props.name] != null) {
+			return generatedIcons[props.name] as string
 		} else {
 			return props.name.toString()
 		}
 	})
+
+	const isMultiColor = computed(() : boolean => {
+		if (iconsSvg[props.name] != null) {
+			const item = iconsSvg[props.name] as UTSJSONObject
+			if (item['multi'] == true) return true
+		}
+		const multicolorList = multiColorIcons as string[]
+		return multicolorList.includes(props.name)
+	})
+
+	const imgSrc = computed(() : string => {
+		// 使用 uni_modules 绝对路径确保在各端加载正常
+		return `/uni_modules/uview-ultra/static/uview-ultra/images/${props.name}.svg`
+	})
 	
 	// 方法
 	function clickHandler(e: UniPointerEvent) {
 		emit('click', props.index)
 		// 是否阻止事件冒泡
-		if (props.stop as boolean) {
-			preventEvent(e)
+		if (props.stop) {
+			e.stopPropagation()
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	@import "../../libs/css/components.scss";
 
 	// 变量定义
-	$up-icon-primary: $up-primary !default;
-	$up-icon-success: $up-success !default;
-	$up-icon-info: $up-info !default;
-	$up-icon-warning: $up-warning !default;
-	$up-icon-error: $up-error !default;
+	$up-icon-primary: #3c9cff !default;
+	$up-icon-success: #5ac725 !default;
+	$up-icon-info: #909193 !default;
+	$up-icon-warning: #f9ae3d !default;
+	$up-icon-error: #f56c6c !default;
 	$up-icon-label-line-height:1 !default;
 
 	.up-icon {
 		display: flex;
 		align-items: center;
 
+		@font-face {
+			font-family: 'upicon-custom';
+			src: url('../../static/uview-ultra/upicon-custom.ttf') format('truetype');
+		}
+
 		&--left {
 			flex-direction: row-reverse;
 			align-items: center;
@@ -243,8 +282,8 @@
 		}
 
 		&__icon {
-			font-family: iconfont;
 			position: relative;
+			font-family: upicon-custom;
 
 			&--primary {
 				color: $up-icon-primary;