stellar-ui-v2 1.35.3

package/components/ste-dropdown-menu/ste-dropdown-menu.vue

@@ -0,0 +1,405 @@
+<template>
+	<view
+		class="ste-dropdown-menu-root"
+		:class="[cmpRootClass]"
+		:style="[cmpRootStyle]"
+		@touchmove.stop.prevent="touchmove"
+		@wheel.stop.prevent
+	>
+		<view
+			class="dropdown-placeholder"
+			:style="[cmpMenuPlaceholderStyle]"
+			@click="close"
+			@touchmove.stop.prevent="touchmove"
+			@wheel.stop.prevent
+		/>
+		<view class="menu-box" @click="handleMenuClick" @touchmove.stop.prevent="touchmove" @wheel.stop.prevent>
+			<text class="title">{{ menuTitle || title }}</text>
+			<view class="menu-title-icon">
+				<ste-icon code="&#xe699;" size="16" color="#bbbbbb"></ste-icon>
+			</view>
+		</view>
+		<view
+			:class="hiddenContent ? 'dropdown-content hidden' : 'dropdown-content'"
+			:style="[cmpMenuContentStyle]"
+			@click="handleMaskClick"
+			@touchmove.stop.prevent="touchmove"
+			@wheel.stop.prevent
+		>
+			<view class="menu-item-content" @click.stop="handleMenuConentClick">
+				<slot></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+import useColor from '../../config/color.js';
+let color = useColor();
+import System from '../../utils/System.js';
+const DEFAULT_ROOT_QUERY = { height: 0, left: 0, top: 0, bottom: 0 };
+const DEFAULT_DURATION = 0.2;
+const MIN_DURATION = 0;
+const MAX_DURATION = 10;
+const addPx = (val) => {
+	if (utils.isNumber(val)) {
+		return `${val}px`;
+	} else {
+		return 0;
+	}
+};
+/**
+ * ste-dropdown-menu 下拉菜单
+ * @description 下拉菜单
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-dropdown-menu
+ * @property {String} title 菜单标题，未设置时会显示选中项的值
+ * @property {String|Array} value 下拉菜单选中的值
+ * @property {String} inactiveColor 未选中颜色 #000000
+ * @property {String} activeColor 选中色 #0090FF
+ * @property {String} direction 展开方向 默认down
+ * @value up 向上展开 {String}
+ * @value down 向下展开 {String}
+ * @property {Number} duration 展开动画执行时间 默认0.2s
+ * @property {Boolean} showMask 是否展示遮罩 默认 true
+ * @property {Boolean} isMaskClick 是否点击遮罩关闭 默认 true
+ * @property {Number} zIndex 弹窗层级z-index
+ * @property {String} type 下拉选项的形状 默认block
+ * @value round 圆形 {String}
+ * @value block 块状 {String}
+ * @property {Number} max 可选数量 默认1
+ * @event {Function} change 选项改变时触发
+ * @event {Function} open 菜单打开
+ * @event {Function} close 菜单收起
+ **/
+export default {
+	group: '导航组件',
+	title: 'DropdownMenu 下拉菜单',
+	name: 'ste-dropdown-menu',
+	options: {
+		virtualHost: true,
+	},
+	props: {
+		title: {
+			type: [String, null],
+			default: '',
+		},
+		value: {
+			type: [String, Number, Array, null],
+			default: undefined,
+		},
+		inactiveColor: {
+			type: [String, null],
+			default: '#000000',
+		},
+		activeColor: {
+			type: [String, null],
+			default: '',
+		},
+		direction: {
+			type: [String, null],
+			default: 'down',
+		},
+		duration: {
+			type: [Number, null],
+			default: 0.2,
+		},
+		showMask: {
+			type: [Boolean, null],
+			default: true,
+		},
+		isMaskClick: {
+			type: [Boolean, null],
+			default: true,
+		},
+		zIndex: {
+			type: [Number, null],
+			default: 1000,
+		},
+		type: {
+			default: [String, null],
+			default: 'block',
+		},
+		max: {
+			type: [Number, null],
+			default: 1,
+		},
+	},
+	model: {
+		prop: 'value',
+		// 派发事件名，更新父组件数据
+		event: 'input',
+	},
+	provide() {
+		return {
+			_menuComponent: { getParent: () => this },
+		};
+	},
+	data() {
+		return {
+			menuTitle: '',
+			chooseItems: [],
+			showMenu: false,
+			hiddenContent: false,
+			contentHeight: 0,
+			menuRootQuery: DEFAULT_ROOT_QUERY,
+			menuItems: [],
+		};
+	},
+	mounted() {},
+	computed: {
+		cmpRootClass() {
+			let classArr = [this.direction, this.showMenu ? 'open' : 'close', this.type];
+			return classArr.join(' ');
+		},
+		cmpRootStyle() {
+			let style = {
+				'--duration': this.cmpDuration + 's',
+				'--active-color': this.activeColor ? this.activeColor : color.getColor().steThemeColor,
+				'--inactive-color': this.inactiveColor,
+				'--menu-z-index': this.zIndex,
+			};
+			return style;
+		},
+		cmpMenuPlaceholderStyle() {
+			let style = { height: 0 };
+
+			if (this.showMenu) {
+				if (this.direction == 'down') {
+					style.height = addPx(this.menuRootQuery.top + this.menuRootQuery.height);
+				} else {
+					let windowHeight = System.getWindowInfo().windowHeight;
+					style.height = addPx(windowHeight - this.menuRootQuery.bottom + this.menuRootQuery.height);
+				}
+			}
+
+			return style;
+		},
+		cmpMenuContentStyle() {
+			let style = {
+				height: addPx(this.contentHeight),
+				background: this.showMask ? 'rgba(0, 0, 0, 0.6)' : 'rgba(0, 0, 0, 0)',
+			};
+			if (this.direction == 'down') {
+				style.top = addPx(this.menuRootQuery.top + this.menuRootQuery.height);
+			} else {
+				style.top = 0;
+			}
+			return style;
+		},
+		cmpDuration() {
+			if (!utils.isNumber(this.duration)) {
+				return DEFAULT_DURATION;
+			}
+			if (this.duration > MAX_DURATION) {
+				return MAX_DURATION;
+			}
+			if (this.duration < MIN_DURATION) {
+				return MIN_DURATION;
+			}
+			return this.duration;
+		},
+	},
+	watch: {
+		value: {
+			handler(val) {
+				if (Array.isArray(val)) {
+					this.chooseItems = val;
+				} else {
+					val ? (this.chooseItems = [val]) : '';
+				}
+				// this.loadMenuTitle();
+			},
+			immediate: true,
+		},
+	},
+	methods: {
+		updateItems() {
+			let menuItems = utils.getChildrenProps(this, 'ste-dropdown-menu-item');
+			if (menuItems.length !== this.menuItems.length) {
+				this.menuItems = menuItems;
+				this.loadMenuTitle();
+			}
+		},
+		loadMenuTitle() {
+			if (!this.title) {
+				let item =
+					this.menuItems.find((e) => {
+						return this.chooseItems.find((v) => v == e.value);
+					}) || {};
+				this.menuTitle = item.title;
+			} else {
+				this.menuTitle = this.title;
+			}
+		},
+		touchmove(e) {
+			// TODO nvue 取消冒泡
+			e.stopPropagation();
+		},
+		async getContentHeight() {
+			let windowHeight = System.getWindowInfo().windowHeight;
+			const res = await utils.querySelector('.ste-dropdown-menu-root', this);
+			this.menuRootQuery = res;
+			this.contentHeight =
+				this.direction == 'down' ? windowHeight - this.menuRootQuery.bottom : this.menuRootQuery.top;
+		},
+		async handleMenuClick() {
+			if (!this.showMenu) {
+				await this.getContentHeight();
+				this.open();
+			} else {
+				this.close();
+			}
+		},
+		open() {
+			this.showMenu = true;
+			this.hiddenContent = false;
+			this.$emit('open');
+		},
+		close() {
+			this.showMenu = false;
+			setTimeout(() => {
+				this.hiddenContent = true;
+				this.contentHeight = 0;
+				this.menuRootQuery = DEFAULT_ROOT_QUERY;
+				this.$emit('close');
+			}, this.cmpDuration * 1000);
+		},
+		choose(item) {
+			let temp = this.chooseItems;
+			let index = temp.findIndex((e) => e == item.value);
+			let max = this.max < 1 ? 1 : this.max;
+			if (index > -1) {
+				// 当选中项再次被选中时，做取消选中操作
+				temp.splice(index, 1);
+			} else {
+				if (this.chooseItems.length < max) {
+					temp.push(item.value);
+				} else {
+					temp.shift();
+					temp.push(item.value);
+				}
+			}
+
+			this.chooseItems = temp;
+			this.loadMenuTitle();
+			if (this.chooseItems.length == max) {
+				this.close();
+			}
+			this.$emit('input', this.chooseItems);
+			this.$emit('change', this.chooseItems);
+			this.$emit('item-choose', item);
+		},
+		handleMaskClick() {
+			if (this.isMaskClick) {
+				this.close();
+			}
+		},
+		handleMenuConentClick() {},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-dropdown-menu-root {
+	.menu-box {
+		padding: 20rpx 0;
+		.menu-title-icon {
+			display: inline-flex;
+			transition: all var(--duration) linear;
+		}
+		.title {
+			font-size: 28rpx;
+			margin-right: 16rpx;
+		}
+		display: flex;
+		align-items: center;
+	}
+
+	.dropdown-placeholder {
+		position: fixed;
+		z-index: 1;
+		width: 100vw;
+		top: 0;
+		left: 0;
+	}
+
+	.dropdown-content {
+		transition: opacity var(--duration) linear;
+		position: fixed;
+		z-index: 1;
+		width: 100vw;
+		left: 0;
+		overflow: hidden;
+		top: 40rpx;
+		opacity: 0;
+
+		&.hidden {
+			z-index: -1 !important;
+		}
+
+		.menu-item-content {
+			width: 100%;
+			transition: all var(--duration);
+			transition-duration: var(--duration);
+			transform: translateY(-100%);
+		}
+	}
+
+	&.round {
+		.menu-item-content {
+			padding: 24rpx;
+			background-color: #fff;
+			border-top: solid 2rpx #f9f9f9;
+
+			display: flex;
+			justify-content: space-between;
+			flex-flow: wrap;
+
+			row-gap: 20rpx;
+		}
+	}
+
+	&.open {
+		.menu-title-icon {
+			transform: rotate(180deg);
+		}
+		.dropdown-content {
+			opacity: 1;
+			z-index: var(--menu-z-index);
+
+			.menu-item-content {
+				transform: translateY(0);
+			}
+		}
+	}
+
+	&.up {
+		.menu-title-icon {
+			transform: rotate(180deg);
+		}
+		.dropdown-content {
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-end;
+
+			.menu-item-content {
+				transform: translateY(100%);
+			}
+		}
+		&.open {
+			.menu-title-icon {
+				transform: rotate(0);
+			}
+			.menu-item-content {
+				transform: translateY(0);
+			}
+
+			.dropdown-placeholder {
+				top: auto;
+				bottom: 0;
+			}
+		}
+	}
+}
+</style>

package/components/ste-dropdown-menu-item/ste-dropdown-menu-item.vue

@@ -0,0 +1,176 @@
+<template>
+	<view class="ste-dropdown-menu-item-root" :class="[cmpRootClass]" @click="handleClick">
+		<text class="text">{{ title }}</text>
+		<view class="menu-item-icon" v-if="type == 'block'">
+			<ste-icon code="&#xe67a;" size="32"></ste-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+/**
+ * ste-dropdown-menu-item 下拉菜单项
+ * @description 下拉菜单项
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-dropdown-menu
+ * @property {String} value 选中项对应的值
+ * @property {String} title 选中项对应的标题
+ * @property {Boolean} disabled 是否禁用 默认 false
+ * @property {Boolean} readonly 只读（不置灰） 默认 false
+ * @event {Function} click 选中时触发(可拦截选中)
+ **/
+export default {
+	group: '导航组件',
+	title: 'DropdownMenuItem 下拉菜单项',
+	name: 'ste-dropdown-menu-item',
+	inject: ['_menuComponent'],
+	props: {
+		value: {
+			type: [String, null],
+			default: '',
+		},
+		title: {
+			type: [String, null],
+			default: '',
+		},
+		disabled: {
+			type: [Boolean, null],
+			default: false,
+		},
+		readonly: {
+			type: [Boolean, null],
+			default: false,
+		},
+		max: {
+			type: [Number, null],
+			default: 1,
+		},
+	},
+	data() {
+		return {
+			parent: {},
+			status: false, // 是否选中状态 true: 选中，false: 未选中
+			clickTask: null,
+			type: 'block',
+		};
+	},
+	created() {
+		this.parent = this._menuComponent.getParent();
+		this.type = this.parent.type;
+	},
+	mounted() {
+		this.parent.updateItems();
+		this.loadStatus();
+		this.parent.$on('item-choose', (value) => {
+			this.loadStatus();
+		});
+	},
+	computed: {
+		cmpRootClass() {
+			let classArr = [this.parent.direction];
+			if (this.status) {
+				classArr.push('active');
+			}
+			if (this.readonly) {
+				classArr.push('readonly');
+			}
+			if (this.disabled) {
+				classArr.push('disabled');
+			}
+			classArr.push(this.type);
+			return classArr.join(' ');
+		},
+	},
+	methods: {
+		loadStatus() {
+			this.status = !!this.parent.chooseItems.find((e) => e == this.value);
+		},
+		async handleClick() {
+			if (!this.disabled && !this.readonly) {
+				if (this.clickTask) {
+					return;
+				}
+				let next = true;
+				this.clickTask = new Promise((resolve, reject) => {
+					this.$emit(
+						'click',
+						() => (next = false),
+						() => resolve(),
+						() => reject()
+					);
+				});
+				if (!next) {
+					await this.clickTask;
+				}
+				this.parent.choose({ title: this.title, value: this.value });
+				setTimeout(() => {
+					this.clickTask = null;
+				}, this.parent.cmpDuration * 1000);
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-dropdown-menu-item-root {
+	&.down {
+		border-top: solid 2rpx #f9f9f9;
+	}
+	&.up {
+		border-bottom: solid 2rpx #f9f9f9;
+	}
+	background-color: #ffffff;
+	padding: 24rpx;
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	color: var(--inactive-color);
+	.menu-item-icon {
+		display: none;
+	}
+
+	.text {
+		font-size: 28rpx;
+	}
+
+	&.disabled {
+		color: #cccccc !important;
+	}
+
+	&.active {
+		color: var(--active-color);
+		.menu-item-icon {
+			display: inline-flex;
+			align-items: center;
+		}
+	}
+
+	&.round {
+		display: inline-flex;
+		border: none;
+		padding: 14rpx 10rpx;
+		border-radius: 48rpx;
+		border: 2rpx solid var(--active-color);
+		width: 194rpx;
+		white-space: nowrap;
+
+		.text {
+			width: 100%;
+			text-align: center;
+			color: var(--active-color);
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
+
+		&.active {
+			background-color: var(--active-color);
+			.text {
+				color: #fff;
+			}
+		}
+	}
+}
+</style>

package/components/ste-icon/README.md

@@ -0,0 +1,90 @@
+# Icon 图标
+
+基于字体的图标集，包含了大多数常见场景的图标
+
+---$
+
+## 代码演示
+
+### 基础用法
+
+通过 `code` 属性来指定需要使用的图标，Stellar 组件使用[iconfont 做图标库](https://at.alicdn.com/t/c/font_4041637_pivqtx3f1mq.json?spm=a313x.manage_type_myprojects.i1.49.f7ba3a81fFvJ6W&file=font_4041637_pivqtx3f1mq.json)，
+可以直接传入对应的编码来使用
+
+```html
+<ste-icon code="&#xe653;"></ste-icon>
+```
+
+### 图标颜色
+
+通过 `color` 属性来设置图标的颜色
+
+```html
+<ste-icon code="&#xe684;" color="#1989fa" size="60" marginRight="30"></ste-icon>
+<ste-icon code="&#xe684;" color="#ee0a24" size="60"></ste-icon>
+```
+
+### 图标大小
+
+通过 `size` 属性来设置图标的尺寸大小，单位为 rpx，默认`28`
+
+```html
+<ste-icon code="&#xe671;" marginRight="30"></ste-icon>
+<ste-icon code="&#xe671;" marginRight="30" size="50"></ste-icon>
+<ste-icon code="&#xe671;" marginRight="30" size="70"></ste-icon>
+```
+
+### 图标是否粗体
+
+通过 `bold` 属性来设置图标是否粗体，默认`false`
+
+```html
+<ste-icon code="&#xe673;" marginRight="30"></ste-icon>
+<ste-icon code="&#xe673;" bold></ste-icon>
+```
+
+### 自定义图标
+
+如果需要在现有 `Icon` 的基础上使用更多图标，可以引入第三方 `iconfont` 对应的字体文件和 `CSS` 文件，之后就可以在 `Icon` 组件中直接使用。
+
+```css
+/* 引入第三方或自定义的字体图标样式 */
+@font-face {
+	font-family: 'iconfont'; /* Project id 2344394 */
+	src: url('//at.alicdn.com/t/c/font_2344394_nltp3ggc4q.woff2?t=1709779088427') format('woff2');
+}
+```
+
+```html
+<!-- 通过 class-prefix 指定类名为 font-family属性的值：如iconfont -->
+<ste-icon fontFamily="iconfont" code="&#xe6cc;" />
+```
+
+---$
+### API
+
+#### Props
+
+| 属性名		| 说明					| 类型				| 默认值		| 可选值												| 支持版本	|
+| --------------| --------------------	| ---------------	| -------	| -----------------------------------------			| --------	|
+| `code`		| 图标编码				| `String`			| 必填		| -													| -			|
+| `color`		| 图标颜色				| `String`			| -			| -													| -			|
+| `size`		| 图标大小（单位 rpx）	| `Number/String`	| `28`		| -													| -			|
+| `bold`		| 图标是否粗体			| `Boolean`			| `false`	| -													| -			|
+| `marginLeft`	| 左外边距（单位 rpx）	| `Number/String`	| `0`		| -													| -			|
+| `marginRight`	| 右外边距（单位 rpx）	| `Number/String`	| `0`		| -													| -			|
+| `marginTop`	| 上外边距（单位 rpx）	| `Number/String`	| `0`		| -													| -			|
+| `marginBottom`| 下外边距（单位 rpx）	| `Number/String`	| `0`		| -													| -			|
+| `fontFamily`	| 字体名					| `String`			| -			| -													| -			|
+| `inlineBlock`	| 容器对齐方式			| `Boolean`			| `true`	| `true`：`inline-block` <br>`false`：`inline-flex`	| `1.1.6`	|
+
+#### Events
+
+| 事件名  | 说明             | 事件参数 | 支持版本 |
+| ------- | ---------------- | -------- | -------- |
+| `click` | 图标点击回调事件 | -        | -        |
+
+---$
+{{zyy}}
+
+{{qinpengfei}}

package/components/ste-icon/iconfont.css

@@ -0,0 +1,8 @@
+/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
+@font-face {
+	font-family: 'ste-iconfont-1709689042473';
+	/* Project id 4457057 */
+	src: url('//at.alicdn.com/t/c/font_4457057_378iyzac6bn.woff2?t=1727661432800') format('woff2'),
+		url('//at.alicdn.com/t/c/font_4457057_378iyzac6bn.woff?t=1727661432800') format('woff'),
+		url('//at.alicdn.com/t/c/font_4457057_378iyzac6bn.ttf?t=1727661432800') format('truetype');
+}