@gmcb/uv-ui 0.2.27 → 0.3.1

package/docs/components/cell.md

@@ -0,0 +1,185 @@
+## Cell 单元格 <to-api/>
+
+<demo-model url="/pages/componentsC/cell/cell"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-cell**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-cell)
+
+:::
+
+cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基础功能
+
+- 该组件需要搭配`cell-group`使用，并由它实现列表组的上下边框，如不需要上下边框，配置`cellGroup`的`border`参数为`false`即可
+- 通过`title`设置左侧标题，`value`设置右侧内容
+- 通过`icon`字段设置图标，或者图片链接(本地文件建议使用绝对地址)
+
+```vue
+<template>
+	<uv-cell-group>
+		<uv-cell icon="setting-fill" title="个人设置"></uv-cell>
+		<uv-cell icon="integral-fill" title="版本更新" value="已是新版本"></uv-cell>
+	</uv-cell-group>
+</template>
+```
+
+### 通过slot自定义内容
+
+- 通过插槽`title`自定义左边标题部分
+- 通过插槽`label`自定义左侧标题下面描述内容
+- 通过插槽`value`自定义右侧值
+- 通过插槽`icon`自定义左侧图标
+- 通过插槽`right-icon`自定义右侧图标
+
+```vue
+<template>
+	<uv-cell-group>
+		<uv-cell>
+			<!-- 自定义左侧标题 -->
+			<template v-slot:title>
+				<text>检查版本</text>
+			</template>
+			<!-- 自定义左侧标题下面的内容 -->
+			<template v-slot:label>
+				<text style="font-size: 28rpx;color: #999;">点击我检查新版本</text>
+			</template>
+			<!-- 自定义右侧值 -->
+			<template v-slot:value>
+				<text>已是最新版</text>
+			</template>
+			<!-- 自定义左侧图标 -->
+			<template v-slot:icon>
+				<uv-icon size="50rpx" name="search"></uv-icon>
+			</template>
+			<!-- 自定义右侧图标 -->
+			<template v-slot:right-icon>
+				<uv-icon size="30rpx" name="arrow-right"></uv-icon>
+			</template>
+		</uv-cell>
+	</uv-cell-group>
+</template>
+```
+
+### 展示右箭头
+
+设置`isLink`为`true`，将会显示右侧的箭头，可以通过`arrow-direction`控制箭头的方向：`left` `right` `up` `down`
+
+```vue
+<template>
+	<uv-cell-group>
+		<uv-cell icon="share" title="明月几时有" :isLink="true" arrow-direction="down"></uv-cell>
+		<uv-cell icon="map" title="把酒问青天" :isLink="false"></uv-cell>
+	</uv-cell-group>
+</template>
+```
+### 跳转页面
+
+设置`isLink`为`true`，单元格点击可跳转页面,传入`url`设置跳转地址
+
+```vue
+<template>
+	<uv-cell-group>
+		<uv-cell title="打开标签页" isLink url="/pages/componentsD/tag/tag"></uv-cell>
+		<uv-cell title="打开徽标页" isLink url="/pages/componentsD/badge/badge"></uv-cell>
+	</uv-cell-group>
+</template>
+```
+### 右侧内容垂直居中
+
+通过`center`属性设置一个布尔值，可将设置右侧`value`内容是否垂直居中，默认`true`
+
+```vue
+<template>
+	<uv-cell-group>
+		<uv-cell title="单元格" value="内容" label="描述信息" :center="true"></uv-cell>
+	</uv-cell-group>
+</template>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### CellGroup Props
+
+| 参数			| 说明			| 类型		| 默认值	| 可选值	|
+| :-			| :-			| :-		| :-	| :-	|
+| title			| 分组标题		| String	| -		| -		|
+| border		| 是否显示分组标题的下边框		| Boolean	| true	| true &#124; false	|
+| customStyle	| 用户自定义外部样式	| object	| -		| -		|
+
+### Cell Props
+
+| 参数			| 说明															| 类型					| 默认值			| 可选值					|
+| :-			| :-															| :-					| :-			| :-					|
+| title			| 左侧标题														| String &#124; Number	| -				| -						|
+| label			| 标题下方的描述信息												| String &#124; Number	| -				| -						|
+| value			| 右侧的内容														| String &#124; Number	| -				| -						|
+| icon			| 左侧图标名称，或者图片链接(本地文件建议使用绝对地址)				| String				| -				| -						|
+| disabled		| 是否禁用cell				| Boolean				| false			| true &#124; false					|
+| border		| 是否显示下边框				| Boolean				| true			| true &#124; false					|
+| center		| 内容是否垂直居中(主要是针对右侧的value部分)		| Boolean	| false			| true	&#124; false	|
+| url			| 点击后跳转的URL地址												| String				| -				| -						|
+| linkType		| 链接跳转的方式，内部使用的是uv-ui封装的route方法，可能会进行拦截操作	| String				| navigateTo	| -						|
+| clickable		| 是否开启点击反馈(表现为点击时加上灰色背景)| Boolean	| false	| true	&#124;	false			|
+| isLink		| 是否展示右侧箭头并开启点击反馈		| Boolean	| false			| true	&#124; false	|
+| required		| 是否显示表单状态下的必填星号(此组件可能会内嵌入input组件)	| Boolean | false | true &#124; false				|
+| rightIcon		| 右侧的图标箭头	| String				| arrow-right	| -						|
+| arrowDirection| 右侧箭头的方向，可选值为：`left` `up` `down`	| String | right	| left &#124; up &#124; down|
+| iconStyle		| 左侧图标样式		| Object &#124;	String			| -				| -						|
+| rightIconStyle| 右侧箭头图标的样式	| Object &#124;	String				| -				| -						|
+| titleStyle	| 标题的样式	| Object &#124;	String				| -				| -						|
+| size			| 单位元的大小，可选值为large	| String				| -				| large &#124; normal	|
+| stop			| 点击cell是否阻止事件传播		| Boolean	| true 			| true &#124; false					|
+| name			| 标识符，用于在`click`事件中进行返回	  | String &#124; Number  | - 			| -					|
+| cellStyle			| 自定义单元格样式，如：设置padding等样式。**如果想在isLink为true状态下不表现出点击态，可以使用此属性设置背景颜色** | Object &#124; String  | - 			| -					|
+| customStyle			| 自定义外部样式，如：设置边框等样式 | Object &#124; String  | - 			| -					|
+
+
+### Cell Slots
+
+| 名称		| 说明																	|
+| :-		| :-																	|
+| title		| 自定义左侧标题部分的内容，如需使用，请勿定义`title`参数，或赋值`null`即可	|
+| value		| 自定义右侧内容，如需使用，请勿定义`value`参数，或赋值`null`即可	|
+| icon		| 自定义左侧的图标														|
+| right-icon| 自定义右侧图标内容，需设置`arrow`为`false`才起作用						|
+| label		| 自定义标题下方的描述内容														|
+
+### Cell Events
+
+| 事件名	| 说明				| 回调参数	|
+| :-	| :-				| :-		|
+| @click	| 点击cell列表时触发	| name: `props`的`name`参数标识符  |
+
+<style scoped>
+h3[id=cell-props] + table thead tr th:nth-child(2){
+	width: 40%;
+}
+h3[id=cell-slots] + table thead tr th:nth-child(2){
+	width: 70%;
+}
+h3[id=cell-events] + table thead tr th:nth-child(2){
+	width: 40%;
+}
+h3[id=cell-events] + table thead tr th:nth-child(4){
+	width: 40%;
+}
+</style>

package/docs/components/checkbox.md

@@ -0,0 +1,281 @@
+## Checkbox 复选框 <to-api/>
+
+<demo-model url="/pages/componentsB/checkbox/checkbox"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-checkbox-group > uv-checkbox**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-checkbox)
+
+:::
+
+复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+- 该组件需要搭配`checkboxGroup`组件使用，以便用户进行操作时，获得当前复选框组的选中情况。
+- 通过`v-model`给`checkboxGroup`组件绑定一个变量，对应的`name`将会被选中。
+
+```vue
+<template>
+	<view>
+		<uv-checkbox-group v-model="checkboxValue">
+			<uv-checkbox 
+				:customStyle="{marginBottom: '8px'}" 
+				v-for="(item, index) in checkboxList" 
+				:key="index" :label="item.name" 
+				:name="item.name"
+			></uv-checkbox>
+		</uv-checkbox-group>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const checkboxValue = ref(['苹果']);
+const checkboxList = ref([{
+  name: '苹果',
+  disabled: false
+}, {
+  name: '香蕉',
+  disabled: false
+}, {
+  name: '橙子',
+  disabled: false
+}]);
+
+</script>
+```
+### 自定义形状
+
+可以通过设置`shape`为`square`或者`circle`，将复选框设置为方形或者圆形
+
+```vue
+<template>
+	<view>
+		<uv-checkbox-group 
+			v-model="checkboxValue" 
+			shape="circle">
+			<uv-checkbox 
+				:customStyle="{marginBottom: '8px'}" 
+				v-for="(item, index) in checkboxList" 
+				:key="index" :label="item.name" 
+				:name="item.name"
+			></uv-checkbox>
+		</uv-checkbox-group>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const checkboxValue = ref(['苹果']);
+const checkboxList = ref([{
+  name: '苹果',
+  disabled: false
+}, {
+  name: '香蕉',
+  disabled: false
+}, {
+  name: '橙子',
+  disabled: false
+}]);
+
+</script>
+```
+
+### 禁用checkbox
+
+设置`disabled`为`true`，即可禁用某个组件，让用户无法点击，禁用分为两种状态，一是未勾选前禁用，这时只显示一个灰色的区域。二是已勾选后
+再禁用，会有灰色的已勾选的图标，但此时依然是不可操作的。
+
+```vue
+<template>
+	<view>
+		<uv-checkbox-group 
+			v-model="checkboxValue" 
+			shape="circle">
+			<uv-checkbox 
+				:customStyle="{marginBottom: '8px'}" 
+				v-for="(item, index) in checkboxList" 
+				:key="index" :label="item.name" 
+				:name="item.name"
+				:disabled="index===0"
+			></uv-checkbox>
+		</uv-checkbox-group>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const checkboxValue = ref(['苹果']);
+const checkboxList = ref([{
+  name: '苹果',
+  disabled: false
+}, {
+  name: '香蕉',
+  disabled: false
+}, {
+  name: '橙子',
+  disabled: false
+}]);
+
+</script>
+```
+
+### 自定义颜色
+
+此处所指的颜色，为`checkbox`选中时的背景颜色，参数为`activeColor`
+
+```vue
+<template>
+	<view>
+		<uv-checkbox-group v-model="checkboxValue">
+			<uv-checkbox activeColor="red" name="apple" label="苹果"></uv-checkbox>
+		</uv-checkbox-group>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const checkboxValue = ref(['apple']);
+
+</script>
+```
+
+### 横向排列形式
+
+可以通过设置`placement`为`row`或者`column`，将复选框设置为横向排列或者竖向排列
+
+```vue
+<template>
+	<view>
+		<uv-checkbox-group v-model="checkboxValue" placement="column">
+			<uv-checkbox name="apple" label="苹果"></uv-checkbox>
+			<uv-checkbox name="banana" label="香蕉"></uv-checkbox>
+		</uv-checkbox-group>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const checkboxValue = ref(['apple']);
+
+</script>
+```
+
+### 横向两端排列形式
+
+在`placement="column"`前提下，可以通过设置`iconPlacement`为`left`或者`right`，将复选框勾选图标的对齐设置为左对齐或者右对齐。
+
+```vue
+<template>
+	<view>
+		<uv-checkbox-group 
+			v-model="checkboxValue" 
+			iconPlacement="right"
+			placement="column">
+			<uv-checkbox name="apple" label="苹果"></uv-checkbox>
+			<uv-checkbox name="banana" label="香蕉"></uv-checkbox>
+		</uv-checkbox-group>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const checkboxValue = ref(['apple']);
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### CheckboxGroup Props
+
+| 参数			| 说明													| 类型				| 默认值		| 可选值	|
+| :-			| :-													| :-				| :-		| :-	|
+| value / v-model			| 选中name的值，eg：['a','b']															| Array	| []		| -		|
+| value			| 绑定的值												| Array				| []		| -		|
+| shape			| 形状，circle-圆形，square-方形							| String			| square	| square &#124; circle|
+| disabled		| 是否禁用全部checkbox									| Boolean			| false		| true &#124; false	|
+| activeColor	| 选中状态下的颜色，如子`Checkbox`组件设置此值，将会覆盖本值	| String			| #2979ff	| -		|
+| inactiveColor	| 未选中的颜色											| String			| #c8c9cc	| -		|
+| size			| 整个组件的尺寸，默认px。**注意：该参数和iconSize应该同步设置，才能改变选框大小**									| String			| 18		| -		|
+| placement		| 布局方式，row-横向，column-纵向							| String			| row		| row &#124; column|
+| labelSize		| label的字体大小，单位 `px(rpx)`									| String &#124; Number	| 14		| -		|
+| labelColor	| label的字体颜色										| String			| #303133	| -		|
+| labelDisabled	| 是否禁止点击文本操作									| Boolean			| false		| true &#124; false	|
+| iconColor		| 图标颜色												| String			| #ffffff	| -		|
+| iconSize		| 图标的大小，单位 `px(rpx)`										| String &#124; Number	| 12		| -		|
+| iconPlacement	| 勾选图标的对齐方式，left-左边，right-右边					| String			| left		| left &#124; right	|
+| borderBottom	| 竖向配列时，是否显示下划线								| Boolean			| false		| true &#124; false	|
+| customStyle | 自定义样式，某些事件需要用到调整位置等作用 | Object | - | - |
+
+### Checkbox Props
+
+注意：`checkbox`和`checkbox-group`二者同名参数中，`checkbox`的参数优先级更高。
+
+| 参数			| 说明																	| 类型						| 默认值	| 可选值	|
+| :-			| :-																	| :-						| :-	| :-	|
+| name			| checkbox的名称															| String &#124; Number &#124; Boolean	| -		| -		|
+| shape			| 形状，square为方形，circle为圆型										| String					| square| square &#124; circle|
+| size			| 整体的大小																| String &#124; Number			| -		| -		|
+| checked		| 是否默认选中															| Boolean					| false	| true &#124; false	|
+| disabled		| 是否禁用																| String &#124; Boolean			| -		| -		|
+| activeColor	| 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值				| String					| -		| -		|
+| inactiveColor	| 未选中的颜色															| String					| -		| -		|
+| iconSize		| 图标的大小，单位px														| String &#124; Number			| -		| -		|
+| iconColor		| 图标颜色																| String					| -		| -		|
+| label			| label提示文字。如果文本较长存在文本不换行的问题，使用customStyle设置一个宽度即可，eg：`customStyle="maxWidth: 300rpx;"`	| String &#124; Number			| -		| -		|
+| labelSize		| label的字体大小，px单位													| String &#124; Number			| -		| -		|
+| labelColor	| label的颜色															| String					| -		| -		|
+| labelDisabled	| 是否禁止点击提示语选中复选框												| String &#124; Boolean			| -		| -		|
+| customStyle | 自定义样式 | Object &#124; String | - | - |
+
+### Checkbox Slots
+
+| 名称	| 说明				|
+|:-		|:-					|
+| default | 自定义`label`内容，自定义后，`labelDisabled`设置将会失效 |
+| icon	| 自定义选中图标	|
+
+### CheckboxGroup Events
+
+| 事件名	| 说明												| 回调参数											|
+| :-	| :-												| :-													|
+| @change| 任一个`checkbox`状态发生变化时触发，回调为一个对象		| detail = array( [元素为被选中的`checkbox`的`name`] )	|
+
+### Checkbox Events
+
+| 事件名	| 说明										| 回调参数							| 
+| :-	| :-										| :-								|
+| @change| 某个`checkbox`状态发生变化时触发(选中状态)		| name: 通过`props`传递的`name`参数	|
+
+<style scoped>
+h3[id=checkbox-slots] + table thead tr th:nth-child(2){
+	width: 70%;
+}
+h3[id=checkboxgroup-events] + table thead tr th:nth-child(2),
+h3[id=checkbox-events] + table thead tr th:nth-child(2) {
+	width: 40%;
+}
+h3[id=checkboxgroup-events] + table thead tr th:nth-child(3),
+h3[id=checkbox-events] + table thead tr th:nth-child(3) {
+	width: 40%;
+}
+</style>

package/docs/components/circleProgress.md

@@ -0,0 +1,5 @@
+## CircleProgress 圆形进度条 <to-api/>
+
+:::warning 温馨提示
+暂无
+:::

package/docs/components/code.md

@@ -0,0 +1,162 @@
+## Code 验证码倒计时 <to-api/>
+
+<demo-model url="/pages/componentsB/code/code"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-code**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-code)
+
+:::
+
+考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件不提供界面显示，只提供倒计时文本，由用户将文本嵌入到具体的场景。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+通过ref获取组件对象，再执行后面的操作，见下方示例。
+
+1. 通过`seconds`设置需要倒计的秒数(默认`60`)
+2. 通过ref调用组件内部的`start`方法，开始倒计时
+3. 通过监听`change`事件(从开始到结束之间，每秒触发一次)获得提示的文字，可能值如"获取验证码|12秒后重新获取|重新获取"，可以自定义
+
+注意：用户可能在倒计时的过程中点击获取验证码的按钮，组件内部提供了通过ref获取的`canGetCode`变量，在倒计时
+过程中，该值为`false`，如果为`false`应该给予提示并不要再次向后端请求验证码，如果为`true`，则为获取验证码
+之前，或者倒计结束之后，可以再次向后端请求验证码。
+
+以下为完整示例，见如下：
+
+```vue
+<template>
+	<view class="wrap">
+		<uv-toast ref="toast"></uv-toast>
+		<uv-code :seconds="seconds" @end="end" @start="start" ref="code" @change="codeChange"></uv-code>
+		<uv-button @tap="getCode">{{tips}}</uv-button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const toast = ref(null);
+const code = ref(null);
+const tips = ref('');
+const seconds = ref(10);
+function codeChange(text) {
+  tips.value = text;
+}
+function getCode() {
+  if (code.value.canGetCode) {
+    // 模拟向后端请求验证码
+    uni.showLoading({
+      title: '正在获取验证码'
+    });
+    setTimeout(() => {
+      uni.hideLoading();
+      // 这里此提示会被start()方法中的提示覆盖
+      uni.$uv.toast('验证码已发送');
+      // 通知验证码组件内部开始倒计时
+      code.value.start();
+    }, 2000);
+  } else {
+    uni.$uv.toast('倒计时结束后再发送');
+  }
+}
+function end() {
+  uni.$uv.toast('倒计时结束');
+}
+function start() {
+  uni.$uv.toast('倒计时开始');
+}
+
+</script>
+<style lang="scss">
+	.wrap {
+		padding: 24rpx;
+	}
+</style>
+```
+::: warning 温馨提示
+使用uni上挂载的uv-ui内置方法，需要根据[扩展配置 - JS工具库](/components/setting.html)进行相应的配置，否则直接会报错！
+:::
+
+### 自定义提示语
+
+组件内部有内置的提示语，如获取验证码前的提示语为"获取验证码"，用户可以通过参数配置自定义的提示：
+- 获取前，参数为`start-text`，默认值为"获取验证码"
+- 倒计时期间，参数为`change-text`，默认为"X秒重新获取"，这里的"x"(大小写均可)，将会被倒计的秒数替代
+- 倒计时结束，参数为`end-text`，默认值为"重新获取"
+
+
+### 保持倒计时
+
+一般情况下，在H5刷新浏览器，或者各端返回再进入时，倒计时会消失，导致用户可以再次尝试获取验证码，虽然后端还会对此进行进一步的判断。  
+对于这种情况，uv-ui给出了一个`keep-running`参数(默认为`false`)，为`true`的时候，即使刷新浏览器，或者返回上一个页面，
+倒计时依然会继续(如果还在倒计时间内的话)。
+
+**注意：** 如果您的一个页面或者多个页面同时使用了多个此组件，为了防止多个组件之间，保存在本地的多个继续倒计时的变量之间互相干扰，可以配置
+各个组件的`unique-key`为一个不重复的字符串，以作区分：
+
+```vue
+/* A.vue */
+<uv-code unique-key="page-a"></uv-code>
+
+/* B.vue */
+<uv-code unique-key="page-b"></uv-code>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Code Props
+
+| 参数			| 说明											| 类型					| 默认值			|  可选值	|
+|:-				|:-												|:-						|:-				|:-			|
+| seconds		| 倒计时所需的秒数								| Number &#124; String	| 60			| -			|
+| startText		| 开始前的提示语，见上方说明						| String				| 获取验证码		| -			|
+| changeText	| 倒计时期间的提示语，必须带有字母"x"，见上方说明	| String				| X秒重新获取	| -			|
+| endText		| 倒计结束的提示语，见上方说明						| String				| 重新获取		| -			|
+| keepRunning	| 是否在H5刷新或各端返回再进入时继续倒计时			| Boolean				| false			| true &#124; false		|
+| uniqueKey		| 多个组件之间继续倒计时的区分`key`，见上方说明		| String				| -				| -			|
+
+
+### Code Methods
+
+需要通过ref获取验证码组件才能调用，见上方"基本使用"说明
+
+
+| 名称	| 说明														|
+| :-	|:-															|
+| start	| 开始倒计时													|
+| reset	| 结束当前正在进行中的倒计时，设置组件为可以重新获取验证码的状态	|
+
+
+### Code Events
+
+|事件名	|说明					|回调参数								|
+|:-		|:-						|:-										|
+| @change| 倒计时期间，每秒触发一次	| text: 当前剩余多少秒的状态，见上方说明	| 
+| @start	| 开始倒计时触发			| -										|
+| @end	| 结束倒计时触发			| -										|
+
+
+
+<style scoped>
+
+h3[id=code-methods] + p + table thead tr th:nth-child(2){
+	width: 70%;
+}
+</style>