stellar-ui-v2 1.35.3

package/components/ste-index-list/README.md

@@ -0,0 +1,153 @@
+# IndexList 索引列表
+
+通过折叠面板收纳内容区域。
+
+---$
+
+
+### Javascript 示例数据
+```javascript
+export default{
+	data(){
+		return{
+			data: [
+				{
+					title: 'A',
+					list: ['列表A1', '列表A2', '列表A3', '列表A4', '列表A5', '列表A6', '列表A7', '列表A8'],
+				},
+				{
+					title: 'B',
+					list: ['列表B1', '列表B2', '列表B3', '列表B4', '列表B5', '列表B6', '列表B7', '列表B8'],
+				},
+				{
+					title: 'C',
+					list: ['列表C1', '列表C2', '列表C3', '列表C4', '列表C5', '列表C6', '列表C7', '列表C8'],
+				},
+				{
+					title: 'D',
+					list: ['列表D1', '列表D2', '列表D3', '列表D4', '列表D5', '列表D6', '列表D7', '列表D8'],
+				},
+				{
+					title: 'E',
+					list: ['列表E1', '列表E2', '列表E3', '列表E4', '列表E5', '列表E6', '列表E7', '列表E8'],
+				},
+				{
+					title: 'F',
+					list: ['列表F1', '列表F2', '列表F3', '列表F4', '列表F5', '列表F6', '列表F7', '列表F8'],
+				},
+				{
+					title: 'G',
+					list: ['列表G1', '列表G2', '列表G3', '列表G4', '列表G5', '列表G6', '列表G7', '列表G8'],
+				},
+			],
+		}
+	}
+}
+```
+
+
+#### 基础用法
+- 标签`ste-index-list`为外层盒子
+	- 事件`clickItem`监听点击索引分组事件
+- 标签`ste-index-item`为索引分组
+	- 属性`title`为当前索引分组标题
+	- 属性`list`为当前索引分组内容列表
+```html
+<ste-index-list  @clickItem="onClickItem">
+	<ste-index-item v-for="(item, index) in data" :key="index" :title="item.title" :list="item.list" />
+</ste-index-list>
+
+methods: {
+	onClickItem(title, text) {
+		this.showToast({
+			title: `【${title}】-【${text}】`,
+			icon: 'none',
+		});
+	},
+},
+```
+#### 自定义颜色/标题/内容
+- 标签`ste-index-list`为外层盒子
+	- 属性`inactiveColor`为索引分组标题未选中颜色
+	- 属性`activeColor`为索引分组标题选中颜色
+- 标签`ste-index-item`为索引分组
+	- 插槽`title`为当前索引分组标题
+	- 插槽`default`为当前索引分组内容列表
+```html
+<ste-index-list inactiveColor="#0f0" activeColor="#f0f">
+	<ste-index-item v-for="item in data" :key="item.title" :title="item.title">
+		<template v-slot:title>
+			<view class="custom-title" v-show="item.title">{{ item.title }}</view>
+		</template>
+		<view class="row-item" v-for="(m, i) in item.list" :key="i">
+			<ste-icon code="&#xe677;" />
+			{{ m }}
+		</view>
+	</ste-index-item>
+</ste-index-list>
+<style lang="scss" scoped>
+.custom-title {
+	height: 60rpx;
+	line-height: 60rpx;
+	padding: 0 32rpx;
+	background-color: #f00;
+	color: #fff;
+}
+.row-item {
+	height: 92rpx;
+	line-height: 92rpx;
+	padding: 0 32rpx;
+
+	& + .row-item {
+		border-top: 1px solid #ddd;
+	}
+}
+</style>
+```
+
+
+---$
+### API
+
+#### IndexList Props
+
+| 属性名			| 说明											|类型				|默认值		|可选值	| 支持版本	|
+| ---				|---											| ---				| ---		| ---	| ---		|
+| `active`			| 当前激活的索引下标，支持sync双向绑定，默认值0		| `Number`			| `0`		| -		| -			|
+| `height`			| 高度，默认值100%								| `String`/`Number`	| `"100%"`	| -		| -			|
+| `sticky`			| `title`是否粘性布局，自定义`title`插槽时不生效	| `Boolean`			| `true`	| -		| -			|
+| `inactiveColor`	| 右边锚点状态非激活时的颜色						| `String`			| `#666666`	| -		| -			|
+| `activeColor`		| 右边锚点状态激活时的颜色							| `String`			| `#0090FF`	| -		| -			|
+
+#### IndexList Events
+| 事件名			|说明																		|事件参数																							|支持版本	|
+|---					|---																		|---																									|---			|
+| `change`		| 滚动列表或点击右侧导航时触发						| `active`: 当前激活的索引															| -				|
+| `clickItem`	| 点击列表时触发（使用插槽自定义列表无效）	|  `参数1`索引区域`title`<br/>`参数2`当前点击的内容	| -				|
+
+#### IndexList Method
+| 方法名| 说明															|支持版本	|
+| ---		| ---															|---			|
+| `init`| 初始化锚点信息，在渲染完成后调用	| -				|
+
+#### IndexList Slots
+| 方法名		| 说明						|支持版本	|
+| ---				| ---						|---			|
+| `default`	| 自定义列表内容	|-					|
+
+#### IndexItem Props
+
+| 属性名		| 说明			|类型			|默认值	|可选值	| 支持版本	|
+| ---			|---			| ---			| ---		| ---		| ---			|
+| `title`	| 分组标题，这是必需的	| `String`| `""`	| -			| -				|
+| `list`	| 分组字符串列表	| `Array<String>`| `""`	| -			| -				|
+
+#### IndexItem Slots
+| 方法名		| 说明						|支持版本	|
+| ---				| ---						|---			|
+| `default`	| 自定义列表内容	|-				|
+| `title`		| 自定义标题内容	|-				|			
+
+
+---$
+{{xuyajun}}

package/components/ste-index-list/ste-index-list.vue

@@ -0,0 +1,128 @@
+<template>
+	<view class="ste-index-list-root" :style="[cmpRootStyle, cmpIndexRootStyle]">
+		<scroll-view class="ste-scroll-to-root" scroll-y scroll-anchoring :scroll-top="scrollTop" @scroll="onScroll">
+			<view class="ste-scroll-to-content">
+				<slot />
+			</view>
+		</scroll-view>
+		<view class="ste-index-list">
+			<block v-for="(m, index) in cmpTitles" :key="index">
+				<view
+					v-if="m"
+					class="ste-index-item"
+					:class="{ active: index === dataActive }"
+					@click="setActive(index)"
+				>
+					{{ m }}
+				</view>
+			</block>
+		</view>
+	</view>
+</template>
+
+<script>
+import { parentMixin } from '../../utils/mixin.js';
+import mixin from '../ste-scroll-to/mixin.js';
+import useColor from '../../config/color.js';
+let color = useColor();
+/**
+ * ste-index-list 索引列表
+ * @description 索引列表
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-index-list
+ * @property {Number}					active 当前激活的索引下标，支持sync双向绑定，默认值0
+ * @property {String|Number}	height 高度，默认值100%
+ * @property {Boolean}	sticky 默认标题是否粘性布局
+ * @property {String}	inactiveColor 右边锚点状态非激活时的颜色
+ * @property {String}	activeColor 右边锚点状态激活时的颜色
+ * @event {Function}					change 滚动索引列表时触发
+ * @event {Function}					clickItem 点击原生列表时触发，参数1-当前索引区域，参数2-当前点击的内容
+ */
+export default {
+	group: '导航组件',
+	title: 'IndexList 索引列表',
+	name: 'ste-index-list',
+	mixins: [parentMixin('ste-index-list'), mixin],
+	props: {
+		sticky: {
+			type: [Boolean, null],
+			default: () => true,
+		},
+		inactiveColor: {
+			type: [String, null],
+			default: () => '#666',
+		},
+		activeColor: {
+			type: [String, null],
+			default: () => '',
+		},
+	},
+	computed: {
+		cmpIndexRootStyle() {
+			return {
+				'--ste-index-list-inactive-color': this.inactiveColor,
+				'--ste-index-list-active-color': this.activeColor ? this.activeColor : color.getColor().steThemeColor,
+			};
+		},
+		cmpTitles() {
+			const children = this.children;
+			const list = children.map((c) => c.title);
+			return list;
+		},
+	},
+	watch: {
+		children: {
+			handler(val) {
+				this.activeChange(this.dataActive);
+			},
+			immediate: true,
+		},
+	},
+	methods: {
+		activeChange(index) {
+			this.$nextTick(() => {
+				this.children.forEach((child, i) => {
+					child.setActive(index === i);
+				});
+			});
+		},
+		onClickItem(title, text) {
+			this.$emit('clickItem', title, text);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-index-list-root {
+	width: 100%;
+	height: var(--scroll-to-height);
+	position: relative;
+	.ste-scroll-to-root {
+		width: 100%;
+		height: var(--scroll-to-height);
+	}
+	.ste-index-list {
+		position: absolute;
+		right: 12rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 101;
+		background-color: #fff;
+		width: 48rpx;
+		text-align: center;
+		border-radius: 24rpx;
+		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.15);
+
+		.ste-index-item {
+			margin: 0 auto;
+			height: 44rpx;
+			line-height: 44rpx;
+			font-size: 24rpx;
+			color: var(--ste-index-list-inactive-color);
+			&.active {
+				color: var(--ste-index-list-active-color);
+			}
+		}
+	}
+}
+</style>

package/components/ste-input/README.md

@@ -0,0 +1,146 @@
+# Input 输入框
+
+---$
+
+### 代码演示
+#### 文本输入框
+- 通过`value`给输入框初始值
+- 支持通过`v-model`双向绑定
+```html
+<ste-input value="输入"/>
+```
+
+#### 密码输入框
+```html
+<ste-input type="password" />
+``` 
+
+#### 数字输入框
+```html
+<ste-input type="number" />
+``` 
+
+#### 占位符
+- 支持`placeholderStyle`给占位符指定样式
+- 支持`placeholderClass`给占位符指定类名
+> 非H5平台上需要在类名前添加`/deep/`才生效
+```html
+<ste-input placeholder="请输入" />
+<ste-input placeholder="请输入" placeholderStyle="color: #f00" />
+<ste-input placeholder="请输入" placeholderClass="my-input-holder" />
+```
+
+#### 禁用&只读
+```html
+<ste-input disabled value="禁用" />
+<ste-input readonly value="只读" />
+<ste-input disabled shape="line" value="禁用" />
+<ste-input shape="line" readonly value="只读" />
+```
+
+#### 字数统计
+- `showWordLimit`值为`true`时在右下角显示字数统计
+- 当`type`值为`textarea`并且`maxlength`大于0时才会显示
+```html
+<ste-input type="textarea" :maxlength="140" showWordLimit />
+<ste-input shape="line" type="textarea" :maxlength="140" showWordLimit />
+```
+
+#### 焦点
+通过 `focus`值来控制输入框的焦点，支持双向绑定
+```html
+<ste-input :focus.sync="focus"/>
+```
+
+#### 文本对齐方式
+```html
+<ste-input placeholder="请输入" inputAlign="center" />
+<ste-input placeholder="请输入" inputAlign="right" />
+```
+
+#### 输入框字体
+```html
+<ste-input value="字体大小" fontSize="36" />
+<ste-input value="字体颜色" fontColor="#f00" />
+```
+
+#### 输入框形状
+```html
+<ste-input shape="circle" />
+<ste-input shape="line" />
+```
+
+#### 输入框边框
+```html
+<ste-input border />
+<ste-input border borderColor="#f00" />
+```
+
+#### 背景色
+```html
+<ste-input background="linear-gradient(to right, #aaaaaa, #aaa000)" />
+<ste-input background="https://image.whzb.com/chain/StellarUI/背景1.png" />
+```
+
+#### 前后插槽
+```html
+<ste-input placeholder="请输入内容" confirmType="next" rootClass="root-my-input" shape="line">
+	<view slot="prefix" style="margin-right: 28rpx">
+		<ste-icon code="&#xe68c;" size="28" />
+		<text>文本</text>
+	</view>
+	<view slot="suffix">
+		<ste-icon code="&#xe672;" size="28" />
+	</view>
+</ste-input>
+```
+
+---$
+### API
+#### 组件属性(Props)
+
+|属性名				|说明														|类型				|默认值				|可选值																																																															|支持版本		|
+|---				|---														|---				|---				|---																																																															|---		|
+| `value`			| 初始内容，支持双向绑定										| `String/Number`	| -					| -																																																																| -			|
+| `type`			| 输入框类型													| `String`			| `text`			| text 纯文本输入<br/>textarea 文本域<br/>tel 电话输入<br/>number 数字输入<br/>idcard 身份证输入键盘<br/>digit-带小数点的数字键盘<br/>password 密码类型<br/>nickname 昵称输入(微信小程序)<br/>numberpad(支付宝小程序)<br/>digitpad(支付宝小程序)<br/>idcardpad(支付宝小程序)<br/>	| -			|
+| `placeholder`		| 占位符														| `String`			| -					| -																																																																| -			|
+| `placeholderStyle`| 指定placeholder的样式										| `String`			| -					| -																																																																| -			|
+| `placeholderClass`| 指定placeholder的类											| `String/Number`	| -					| -																																																																| -			|
+| `disabled`		| 是否禁用													| `Boolean`			| `false`			| -																																																																| -			|
+| `clearable`		| 是否可清除													| `Boolean`			| `true`			| -																																																																| -			|
+| `maxlength`		| 最大长度													| `Number`			| `-1`(不限制长度)	| -																																																																| -			|
+| `showWordLimit`	| 是否显示输入字数统计，只在type ="textarea"时有效				| `Boolean`			| `false`			| -																																																																| -			|
+| `confirmType`		| 设置右下角按钮的文字											| `String`			| `done`			| send：右下角按钮为“发送”<br/>search：右下角按钮为“搜索”<br/>next：右下角按钮为“下一个”<br/>go：右下角按钮为“前往”<br/>done：右下角按钮为“完成”																														| -			|
+| `focus`			| 获取焦点，支持双向绑定										| `Boolean`			| `false`			| -																																																																| -			|
+| `inputAlign`		| 输入框内容对齐方式（光标对齐和文本对齐一致）						| `String`			| `left`			|left(居左)<br/>right(居右)<br/>center(居中)																																																						| -			|
+| `fontSize`		| 输入框字体大小，单位rpx										| `String/Number`	| `24`				| -																																																																| -			|
+| `fontColor`		| 输入框字体颜色												| `String`			| `#000000`			| -																																																																| -			|
+| `readonly`		| 是否只读，与禁用不同，只读不会置灰								| `Boolean`			| `false`			| -																																																																| -			|
+| `shape`			| 输入框形状													| `String`			| `square`			| line 线性<br/>circle 圆形<br/>square 方形																																																						| -			|
+| `border`			| 是否有边框													| `Boolean`			| `false`			| -																																																																| -			|
+| `borderColor`		| 边框颜色													| `String`			| -					| -																																																																| -			|
+| `background`		| 输入框背景													| `String`			| -					| -																																																																| -			|
+| `rootClass`		| 自定义输入框类名												| `String`			| -					| -																																																																| -			|
+| `cursorSpacing`	| 指定光标与键盘的距离											| `Number`			| 0					| -																																																																| -			|
+| `allowSpace`		| 是否允许输入空格（为`false`时输入事件的返回值会去掉所有的空格）	| `Boolean`			| `true`			|-																																																																| -			|
+
+#### 组件事件(Events)
+
+|事件名		|说明					|	事件参数		|支持版本	|
+|---		|---					|---			|---		|
+| `blur`	| 输入框失去焦点时触发		| value：内容值	| -			|
+| `focus`	| 输入框聚焦时触发		| value：内容值	| -			|
+| `confirm`	| 点击键盘右下角按钮时触发	| value：内容值	| -			|
+| `change`	| 内容发生变化触发此事件	| value：内容值	| -			|
+| `clear`	| 点击清空内容			| -				| -			|
+| `input`	| 内容输入事件			| value：内容值	| -			|
+
+#### 组件插槽(Slots)
+
+|插槽名		|说明			|插槽参数	|支持版本	|
+|---		|---			|---		|---		|
+| `prefix`	| 输入框前置内容	| -			| -			|
+| `suffix`	| 输入框后置内容	| -			| -			|
+
+---$
+{{fuyuwei}}