@gmcb/uv-ui 0.2.27 → 0.3.1

package/docs/components/indexList.md

@@ -0,0 +1,133 @@
+## IndexList 索引列表 <to-api/>
+
+<demo-model url="/pages/componentsD/indexList/indexList"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-index-list > uv-index-item**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-index-list)
+
+:::
+
+用于展示索引列表，右侧带索引的列表，方便快速定位到具体内容，通常用于城市/机场选择等场景。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+外层包裹一个`index-list`组件，锚点通过`index-anchor`组件传入，自定义列表内容通过`index-item`嵌套使用
+- nvue需要将`index-anchor`写在`index-item`的外部
+- 非nvue需要将`index-anchor`嵌套在`index-item`的内部
+- 可以通过`index-list`参数自定义索引字符列表
+
+案例如下：
+
+```vue
+<template>
+	<view>
+		<view style="height: 100rpx;width: 750rpx;background-color: pink;">自定义头部</view>
+		<uv-index-list :index-list="indexList" customNavHeight="100rpx">
+			<template v-slot:header>
+				<view style="height: 100rpx;width: 750rpx;background-color: #3c9cff;">头部内容</view>
+			</template>
+			<template v-for="(item, index) in itemArr">
+				<!-- #ifdef APP-NVUE -->
+				<uv-index-anchor :text="indexList[index]"></uv-index-anchor>
+				<!-- #endif -->
+				<uv-index-item>
+					<!-- #ifndef APP-NVUE -->
+					<uv-index-anchor :text="indexList[index]"></uv-index-anchor>
+					<!-- #endif -->
+					<view class="list-cell" v-for="(cell, index) in item">
+						{{cell}}
+					</view>
+				</uv-index-item>
+			</template>
+		</uv-index-list>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const indexList = ref(["A", "B", "C", "D", "E", "F", "G"]);
+const itemArr = ref([['列表A1', '列表A2', '列表A3'], ['列表B1', '列表B2', '列表B3'], ['列表C1', '列表C2', '列表C3'], ['列表D1', '列表D2', '列表D3'], ['列表E1', '列表E2', '列表E3'], ['列表F1', '列表F2', '列表F3'], ['列表G1', '列表G2', '列表G3']]);
+
+</script>
+<style lang="scss" scoped>
+	.list-cell {
+		/* #ifndef APP-PLUS */
+		display: flex;
+		box-sizing: border-box;
+		width: 100%;
+		/* #endif */
+		padding: 10px 24rpx;
+		overflow: hidden;
+		color: #323233;
+		font-size: 14px;
+		line-height: 24px;
+		background-color: #fff;
+	}
+</style>
+```
+
+### 自定义导航栏
+
+默认情况下，组件的锚点是吸附在导航栏下方的，如果您修改了导航栏，比如取消导航栏、或者自定义了导航栏，就需要指定吸顶的高度，也就是`custom-nav-height`
+的值，注意这个值的单位为`px`：
+
+- 如果自定义了导航栏，需要`custom-nav-height`设置为导航栏的高度，上面示例代码也有模拟
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### IndexList Props
+
+| 参数				| 说明							| 类型							| 默认值		|  可选值	|
+|:-					|:-								|:-								|:-			|:-			|
+| inactiveColor		| 右边锚点状态非激活时的颜色		| String						| #606266	| -			|
+| activeColor		| 右边锚点状态激活时的颜色			| String						| #5677fc	| -			|
+| indexList			| 索引字符列表，数组				| Array[string &#124; number]	| A-Z		| -			|
+| sticky			| 是否开启锚点自动吸顶			    | Boolean						| true		| false		|
+| customNavHeight	| 自定义导航栏的高度，单位默认px	    | String &#124; Number			| 0			| -			|
+
+### IndexAnchor Props
+
+| 参数			| 说明							| 类型					| 默认值				|  可选值	|
+|:-				|:-								|:-						|:-					|:-			|
+| text			| 列表锚点文本内容				| String &#124; Number	| -					| -			|
+| color			| 列表锚点文字颜色				| String				| #606266			| -			|
+| size			| 列表锚点文字大小，单位默认px		| String &#124; Number	| 14				| -			|
+| bgColor		| 列表锚点背景颜色				| String				| #dedede			| -			|
+| height		| 列表锚点高度，单位默认px			| String &#124; Number	| 32				| -			|
+
+
+### IndexList Events
+
+|事件名	|说明					|回调参数			|
+|:-		|:-						|:-					|
+| @select| 选中右边索引字符时触发	| index: 索引字符	|
+ 
+ ### IndexItem Slots
+
+| 名称		| 说明			|
+|:-			|:-				|
+| default	| 自定义列表内容	|
+
+<style scoped>
+h3[id=indexitem-slots] + table thead tr th:nth-child(2) {
+	width: 70%;
+}
+</style>

package/docs/components/input.md

@@ -0,0 +1,250 @@
+## Input 输入框 <to-api/>
+
+<demo-model url="/pages/componentsB/input/input"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-input**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-input)
+
+:::
+
+
+此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件[uv-form](/components/form.html)而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。  
+
+应该在`uv-form`中嵌套`uv-form-item`，再嵌套`uv-input`去实现。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+
+### 基本使用
+
+- 通过`type`设置输入框的类型，默认text
+- 通过`placeholder`设置输入框为空时的占位符
+- 通过`border`配置是否显示输入框的边框
+- 绑定`@change`事件
+
+```vue
+<template>
+  <uv-input placeholder="请输入内容" border="surround" v-model="value" @change="change"></uv-input>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const value = ref('');
+function change(e) {
+  console.log('change', e);
+}
+
+</script>
+```
+### 可清空字符
+
+将`clearable`设置为`true`，会在输入框后方增加一个清空按钮。
+
+```vue
+<template>
+  <uv-input placeholder="请输入内容" border="surround" clearable ></uv-input>
+</template>
+```
+
+### 下划线
+
+通过设置属性`border`为`bottom`即可变成一个下划线
+
+```vue
+<template>
+  <uv-input placeholder="请输入内容" border="bottom" ></uv-input>
+</template>
+```
+
+### 前后图标
+
+- 前后置图标可自由设置样式信息。
+
+```vue
+<template>
+	<view>
+		<uv-input
+		    placeholder="前置图标"
+		    prefixIcon="search"
+		    prefixIconStyle="font-size: 22px;color: #909399"
+		></uv-input>
+		<uv-input
+		    placeholder="后置图标"
+		    suffixIcon="map-fill"
+		    suffixIconStyle="color: #909399"
+		></uv-input>
+	</view>
+</template>
+```
+
+### 前后插槽
+
+通过设置`slot`为`prefix`或`suffix`来指定前后插槽
+
+```vue
+<template>
+	<view>
+		<uv-input placeholder="前置插槽">
+			<!-- vue3模式下必须使用v-slot:prefix -->
+			<template v-slot:prefix>
+				<uv-text
+					text="http://"
+					margin="0 3px 0 0"
+					type="tips"
+				></uv-text>
+			</template>
+		</uv-input>
+		<uv-input placeholder="后置插槽">
+			<!-- vue3模式下必须使用v-slot:suffix -->
+			<template v-slot:suffix>
+				<uv-code
+					ref="uCode"
+					@change="codeChange"
+					seconds="20"
+					changeText="X秒重新获取哈哈哈"
+				></uv-code>
+				<uv-button
+					@click="getCode"
+					:text="tips"
+					type="success"
+					size="mini"
+				></uv-button>
+			</template>
+		</uv-input>
+	</view>
+</template>
+<script setup>
+import { toast } from '@gmcb/uv-ui/libs/function/index.js';
+import { ref } from "vue";
+const tips = ref('');
+const value = ref('内容');
+const uCode = ref(null);
+function codeChange(text) {
+  tips.value = text;
+}
+function getCode() {
+  if (uCode.value?.canGetCode) {
+    // 模拟向后端请求验证码
+    uni.showLoading({
+      title: '正在获取验证码'
+    });
+    setTimeout(() => {
+      uni.hideLoading();
+      // 这里此提示会被 start() 方法中的提示覆盖
+      toast('验证码已发送');
+      // 通知验证码组件内部开始倒计时
+      uCode.value?.start();
+    }, 2000);
+  } else {
+    toast('倒计时结束后再发送');
+  }
+}
+function change(e) {
+  console.log('change', e);
+}
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Input Props
+
+
+| 参数					| 说明																																		| 类型					| 默认值				|  可选值												|
+|:-						|:-																																			|:-						|:-					|:-														|
+| value / v-model		| 输入的值																																	| Number &#124; String	| -					| -														|
+| type					| 输入框类型，见[Type Options](/components/input.html#type-options)																														| String				| text				| text &#124; number &#124; idcard &#124; digit &#124; password								|
+| disabled				| 是否禁用输入框																																| Boolean				| false				| true &#124; false												|
+| disabledColor			| 禁用状态时的背景色																															| String				| #f5f7fa			| -														|
+| clearable				| 是否显示清除控件																															| Boolean				| false				| true	&#124; false												|
+| password				| 是否密码类型																																| Boolean				| false				| true	&#124; false												|
+| maxlength				| 最大输入长度，设置为 -1 的时候不限制最大长度。（注意：maxlength都是小写）		| String &#124; Number	| -1				| -														|
+| placeholder			| 输入框为空时的占位符																														| String				| -					| -														|
+| placeholderClass		| 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/																| String				| input-placeholder	| -														|
+| placeholderStyle		| 指定placeholder的样式，字符串/对象形式，如"color: red;"																					| String &#124; Object	| color: #c0c4cc	| -														|
+| confirmType			| 设置右下角按钮的文字，兼容性详见uni-app文档																									| String				| done				|done &#124; send &#124; search &#124; next &#124; go &#124; done	|
+| confirmHold			| 点击键盘右下角按钮时是否保持键盘不收起，H5无效																									| Boolean				| false				| true	&#124; false												|
+| holdKeyboard			| focus时，点击页面的时候不收起键盘，微信小程序有效																								| Boolean				| false				| true	&#124; false												|
+| focus					| 自动获取焦点，在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点			| Boolean				| false				| true	&#124; false												|
+| autoBlur				| 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效																								| Boolean				| false				| true	&#124; false												|
+| ignoreCompositionEvent | 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件	| Boolean				| true			| true	&#124; false													|
+| cursor				| 指定focus时光标的位置																														| String &#124; Number	| -1				| -														|
+| cursorSpacing			| 输入框聚焦时底部与键盘的距离																													| String &#124; Number	| 30				| -														|
+| selectionStart		| 光标起始位置，自动聚集时有效，需与selection-end搭配使用																						| String &#124; Number	| -1				| -														|
+| selectionEnd			| 光标结束位置，自动聚集时有效，需与selection-start搭配使用																						| String &#124; Number	| -1				| -														|
+| adjustPosition		| 键盘弹起时，是否自动上推页面																													| Boolean				| true				| true	&#124; false													|
+| inputAlign			| 输入框内容对齐方式																															| String				| left				| left &#124; center &#124; right						|
+| fontSize				| 输入框字体的大小																															| String &#124; Number	| 15px				| -														|
+| color					| 输入框字体颜色																																| String				| #303133			| -														|
+| prefixIcon			| 输入框前置图标																																| String				| -					| -														|
+| prefixIconStyle		| 前置图标样式，对象或字符串																													| String &#124; Object	| -					| -														|
+| suffixIcon			| 输入框后置图标																																| String				| -					| -														|
+| suffixIconStyle		| 后置图标样式，对象或字符串																													| String &#124; Object	| -					| -														|
+| border				| 边框类型，surround-四周边框，bottom-底部边框，none-无边框																						| String				| surround			| surround &#124; bottom &#124; none									|
+| readonly				| 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会																			| Boolean				| false				| true &#124;	 false										|
+| shape					| 输入框形状，circle-圆形，square-方形																											| String				| square			| square &#124; circle												|
+| formatter			    | 输入过滤或格式化函数(如需兼容微信小程序，则只能通过`setFormatter`方法)					| Function				| null				| -														|		
+| customStyle			| 自定义外部样式 										| Object 																	| - 						| - 				| -
+
+### Type Options
+
+|属性名	|说明	|
+|:-		|:-		|
+| text | 文本输入键盘 |
+| number | 数字输入键盘，app-vue下可以输入浮点数，app-nvue和小程序平台下只能输入整数 |
+| idcard | 身份证输入键盘，微信、支付宝、百度、QQ小程序 |
+| digit | 带小数点的数字键盘，App的nvue页面、微信、支付宝、百度、头条、QQ小程序 |
+| password | 等同于设置`password`为`true`的效果 |
+
+### Input Methods
+| 方法名								| 说明					| 
+| :-| :-	|
+| setFormatter	| 为兼容微信小程序而暴露的内部方法，见上方说明	 |
+
+### Input Events
+
+|事件名	|说明					|回调参数			|版本	|
+| :- | :- | :- | :- |
+| @blur| 输入框失去焦点时触发	| value：内容值	| -		|
+| @focus| 输入框聚焦时触发	|-	| -		|
+| @confirm| 点击完成按钮时触发	| value：内容值  | -		|
+| @keyboardheightchange| 键盘高度发生变化的时候触发此事件	| -	| 微信小程序2.7.0+、App 3.1.0+	|
+| @input| 内容发生变化触发此事件	| value：内容值	| -	|
+| @clear| 点击清空内容	|  -	| -	|
+
+### Input Slots
+
+| 名称          | 说明            |
+| :-  | :- |
+| prefix | 输入框前置内容 |
+| suffix | 输入框后置内容 |
+
+<style scoped>
+h3[id=input-slots] + table thead tr th:nth-child(2),
+h3[id=input-methods] + table thead tr th:nth-child(2){
+	width: 70%;
+}
+h3[id=type-options] + table {
+	width: auto;
+}
+h3[id=type-options] + table thead tr th:nth-child(2){
+	width: 76%;
+}
+</style>

package/docs/components/install.md

@@ -0,0 +1,59 @@
+## 安装
+
+<demo-model url="/"></demo-model>
+
+::: warning 提示
+1. uv-ui 现在只推荐使用 `easycom` ，如自己引用组件，可能会出现组件找不到的问题。
+2. 除了npm下载需要 `easycom` 配置 和 `vue.config.js` 配置，其他可以不进行任何配置即可直接在页面中使用组件，建议重新运行下项目。
+3. 强烈建议了解[扩展配置](/components/setting.html)功能，如果需要使用组件库内部的API等工具，需要进行扩展配置。
+4. **如果你在安装组件之前就运行了项目，那么安装配置好后，需要重新启动项目，以微信小程序为例：关闭微信编辑器，最好是删除一次unpackage文件，然后重新运行项目，一般就可正常运行。如果不这样做，很有可能存在缓存，你怎么刷新都没用。**
+:::
+
+### **HbuilderX 方式（推荐）**
+
+#### **插件市场下载入口：[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)**
+
+如果您是使用 `Hbuilder X` 开发的用户，您可以在 `uni-app` 插件市场通过 `uni_modules` 的形式进行安装，此安装方式可以方便您后续在 `uni_modules` 对 `uv-ui` 进行一键升级，右键uni_modules目录或右键某组件，均可进行一键升级。
+
+- 在uni-app插件市场右上角选择`下载插件并导入HBuilderX`，导入到对应的项目中即可。
+
+### **NPM 方式**
+
+- 在项目根目录执行如下命令安装uv-ui（建议使用npm或yarn安装，其他方式可能安装后使用不了）：
+
+```
+npm i @gmcb/uv-ui
+```
+
+- 在项目根目录pages.json中配置easycom：
+
+```json
+// pages.json
+{
+    "easycom": {
+		"autoscan": true,
+		"custom": {
+			"^uv-(.*)": "@gmcb/uv-ui/components/uv-$1/uv-$1.vue"
+		}
+	},
+    // 其他内容
+    pages:[
+        // ...
+    ]
+}
+```
+
+**注意：**
+- 如果 Vue CLI 构建环境默认忽略 `node_modules` 中的文件，导致条件编译失效，可以通过配置 `vue.config.js` 解决：
+
+```js
+ // 在根目录创建 vue.config.js 文件，并配置如下
+ module.exports = {
+    transpileDependencies: ['@gmcb/uv-ui']
+ }
+```
+
+### **其他方式**
+
+- 在[插件市场 uv-ui](https://ext.dcloud.net.cn/plugin?id=12287)或[uv-ui的git仓库](https://gitee.com/climblee/uv-ui)，直接下载uv-ui的项目包。
+- 将uv-ui项目的uni_modules复制到自己的项目中即可，和方式一导入的方式类似。

package/docs/components/intro.md

@@ -0,0 +1,32 @@
+## 介绍
+
+`@gmcb/uv-ui` 是基于 uv-ui 的 uni-app 多端 UI 组件包。
+
+#### 来由
+
+uv-ui破釜沉舟之兼容vue3+2、nvue、app、h5、多端小程序的`uni-app`生态框架，大部分组件基于uView2.x，在经过改进后全面支持`vue3`，部分组件做了进一步的优化，支持单独导入，方便开发者选择导入需要的组件。
+
+uv-ui来源于社区，也回归到社区，正是有一群热爱`uni-app`生态的同学推着它前行，而我们也一如既往的承诺，uv-ui永久开源，永远免费。我们会在部分组件下载时配置广告抵消一部分成本，希望大家理解。
+
+关于uv-ui的取名来由，首字母`u`来自于`uni-app`首字母，`uni-app`是基于`Vue.js`，`Vue`和`View`(延伸为UI、视图之意)同音，故取名uv-ui，表达源于uni-app、vue、uView之意，同时在此也对它们表示感谢。
+
+#### 适用领域
+
+uv-ui是`uni-app`生态专用的UI框架，`uni-app` 是一个使用 `Vue.js` 开发所有前端应用的框架，开发者编写一套代码，
+可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。目前微信小程序、百度小程序、抖音小程序、支付宝小程序都经过多次测试修改，后续会持续优化。
+
+#### 关于PR
+
+> 我们非常乐意接受各位的优质PR，但在此之前我希望您了解uv-ui是一个需要兼容多个平台的（多端小程序、h5、app-nvue、 app-vue）UI框架。
+> 所以希望在您修复bug并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢！（为了方便管理，目前只接受Gitee Pull Request）
+
+#### 版权信息
+
+uv-ui遵循[MIT](https://baike.baidu.com/item/MIT/10772952)开源协议，意味着您无需支付任何费用，也无需授权，即可将uv-ui应用到您的产品中。  
+
+注意：这并不意味着您可以将uv-ui应用到非法的领域，比如涉及赌博，暴力等方面。如因此产生纠纷或法律问题，uv-ui相关方及言信科技不承担任何责任。
+
+#### 插件市场
+
+下载入口：[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+