@gmcb/uv-ui 0.2.26 → 0.3.0

package/docs/components/color.md

@@ -0,0 +1,324 @@
+## Color 色彩
+
+<demo-model url="/pages/componentsA/color/color"></demo-model>
+
+
+uv-ui经过大量调试和研究，得出一套专有的调色板，在各个组件内部，使用统一的配色，为您的产品带来统一又鲜明的视觉效果。
+
+::: danger 注意
+uv-ui为了更好编写css，使用了scss预处理器，使用uv-ui之前，请确认您的Hbuilder X已经安装了scss预处理器，一般情况下，相信您已经安装了。如果没有安装，
+请在 Hbuilder X->工具->插件安装 中找到找到"scss/sass编译"安装即可，安装完毕如果不生效，请重启Hbuilder X。
+:::
+
+### 平台差异说明
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 主题色
+
+`primary`，`success`，`error`，`warning`，`info`是uv-ui的主题色，他们给人在视觉感受上分别对应于蓝色，绿色，红色，黄色，灰色。
+而他们又有对应的`disabled`、`dark`和`light`状态，分别表示对应的禁止，加深和变浅的对应颜色。举例uv-ui的`button`组件来说：
+1. 设置`type`参数为`primary`时，按钮显示蓝色。
+2. 按钮被按下时，使用的是`primary`的加深颜色，也即`dark`状态。
+3. 按钮设置为镂空状态(`plain`为`true`)时，背景色为`primary`的变浅颜色，也即`light`状态。
+4. 按钮处于禁止状态时，使用的是`primary`的稍浅颜色，也即`disabled`状态。
+
+### 主色
+
+蓝色作为uv-ui主色调，表示一种鲜明，积极的态度
+
+<div class="color-box">
+	<div class="color-item" style="background: #3c9cff; color:#fff;">
+		Primary<br>
+		#3c9cff
+		<div class="color-sub">
+			<div class="sub-item" style="background: #398ade; color:#fff;">
+				Dark<br>
+				#398ade
+			</div>
+			<div class="sub-item" style="background: #9acafc; color:#606266;">
+				Disabled<br>
+				#9acafc
+			</div>
+			<div class="sub-item" style="background: #ecf5ff; color:#606266;">
+				Light<br>
+				#ecf5ff
+			</div>
+		</div>
+	</div>
+</div>
+
+我们在全局样式中，通过`scss`提供了对应的颜色变量名，方便您在任何可写css的地方，调用这些变量，如下：
+
+```css
+/* 变量的定义，该部分uv-ui已全局引入，无需您编写 */
+$uv-primary: #3c9cff;
+$uv-warning: #f9ae3d;
+$uv-success: #5ac725;
+$uv-error: #f56c6c;
+$uv-info: #909399;
+
+
+/* 在您编写css的地方使用这些变量 */
+.title {
+	color: $uv-primary;
+	......
+}
+```
+
+
+### 辅助色
+
+除了主色外的场景色，需要在不同的场景中使用，如绿色代表成功，红色代表错误，黄色代表警示。
+
+<div class="color-box">
+	<div class="color-item" style="background: #f56c6c; color:#fff;">
+		Error<br>
+		#f56c6c
+		<div class="color-sub">
+			<div class="sub-item" style="background: #e45656; color:#fff;">
+				Dark<br>
+				#e45656
+			</div>
+			<div class="sub-item" style="background: #f7b2b2; color:#606266;">
+				Disabled<br>
+				#f7b2b2
+			</div>
+			<div class="sub-item" style="background: #fef0f0; color:#606266;">
+				Light<br>
+				#fef0f0
+			</div>
+		</div>
+	</div>
+	<div class="color-item" style="background: #f9ae3d; color:#fff;">
+		Warning<br>
+		#f9ae3d
+		<div class="color-sub">
+			<div class="sub-item" style="background: #f1a532; color:#fff;">
+				Dark<br>
+				#f1a532
+			</div>
+			<div class="sub-item" style="background: #f9d39b; color:#606266;">
+				Disabled<br>
+				#f9d39b
+			</div>
+			<div class="sub-item" style="background: #fdf6ec; color:#606266;">
+				Light<br>
+				#fdf6ec
+			</div>
+		</div>
+	</div>
+	<div class="color-item" style="background: #5ac725; color:#fff;">
+		Success<br>
+		#5ac725
+		<div class="color-sub">
+			<div class="sub-item" style="background: #53c21d; color:#fff;">
+				Dark<br>
+				#53c21d
+			</div>
+			<div class="sub-item" style="background: #a9e08f; color:#606266;">
+				Disabled<br>
+				#a9e08f
+			</div>
+			<div class="sub-item" style="background: #f5fff0; color:#606266;">
+				Light<br>
+				#f5fff0
+			</div>
+		</div>
+	</div>
+	<div class="color-item" style="background: #909399; color:#fff;">
+		Info<br>
+		#909399
+		<div class="color-sub">
+			<div class="sub-item" style="background: #767a82; color:#fff;">
+				Dark<br>
+				#767a82
+			</div>
+			<div class="sub-item" style="background: #c4c6c9; color:#606266;">
+				Disabled<br>
+				#c4c6c9
+			</div>
+			<div class="sub-item" style="background: #f4f4f5; color:#606266;">
+				Light<br>
+				#f4f4f5
+			</div>
+		</div>
+	</div>
+</div>
+
+我们在全局样式中，通过`scss`提供了对应的颜色变量名，方便您在任何可写css的地方，调用这些变量，如下：
+
+```css
+/* 变量的定义，该部分uv-ui已全局引入，无需您编写 */
+
+$uv-primary: #3c9cff;
+$uv-primary-dark: #398ade;
+$uv-primary-disabled: #9acafc;
+$uv-primary-light: #ecf5ff;
+
+$uv-warning: #f9ae3d;
+$uv-warning-dark: #f1a532;
+$uv-warning-disabled: #f9d39b;
+$uv-warning-light: #fdf6ec;
+
+$uv-success: #5ac725;
+$uv-success-dark: #53c21d;
+$uv-success-disabled: #a9e08f;
+$uv-success-light: #f5fff0;
+
+$uv-error: #f56c6c;
+$uv-error-dark: #e45656;
+$uv-error-disabled: #f7b2b2;
+$uv-error-light: #fef0f0;
+
+$uv-info: #909399;
+$uv-info-dark: #767a82;
+$uv-info-disabled: #c4c6c9;
+$uv-info-light: #f4f4f5;
+
+/* 在您编写css的地方使用这些变量 */
+.title {
+	color: $uv-type-info;
+	......
+}
+```
+
+### 文字颜色
+
+uv-ui中，分别提炼了4种用于文字颜色，分别是：主要文字、常规文字、次要文字、占位文字颜色。
+
+- 主要文字颜色一般用于内容的标题等，如新闻列表的标题
+- 常规文字颜色一般用于内容的主体，如新闻列表的概要
+- 次要文字颜色一般用于内容的提示部分，如新闻列表底部的时间，评论数量的提示文字
+- 占位文字颜色属于更浅的灰色，看场景选择使用
+
+<div class="color-box">
+	<div class="color-item" style="background: #303133; color:#fff;">
+		主要文字<br>
+		#303133
+		<div class="color-sub">
+			<div class="sub-item" style="background: #606266; color:#fff;">
+				常规文字<br>
+				#606266
+			</div>
+			<div class="sub-item" style="background: #909399; color:#fff;">
+				次要文字<br>
+				#909399
+			</div>
+			<div class="sub-item" style="background: #c0c4cc; color:#303133;">
+				占位文字<br>
+				#c0c4cc
+			</div>
+		</div>
+	</div>
+</div>
+
+```css
+/* 变量的定义，该部分uv-ui已全局引入，无需您编写 */
+$uv-main-color: #303133;
+$uv-content-color: #606266;
+$uv-tips-color: #909193;
+$uv-light-color: #c0c4cc;
+$uv-border-color: #dadbde;
+$uv-bg-color: #f3f4f6;
+$uv-disabled-color: #c8c9cc;
+
+/* 在您编写css的地方使用这些变量 */
+.title {
+	color: $uv-main-color;
+}
+```
+
+
+### 背景颜色
+
+uv-ui中，定义了一个背景颜色，如下：
+
+<div class="color-box">
+	<div class="color-item" style="background: #f3f4f6; color:#909399;">
+		背景颜色<br>
+		#f3f4f6
+	</div>
+</div>
+
+我们在全局样式中，通过`scss`提供了对应的颜色变量名，方便您在任何可写css的地方，调用这个变量，如下：
+
+```css
+/* 变量的定义，该部分uv-ui已全局引入，无需您编写 */
+$uv-bg-color: #f3f4f6;
+
+/* 在您编写css的地方使用这些变量 */
+.title {
+	color: $uv-bg-color;
+}
+```
+
+
+### 边框颜色
+
+uv-ui自定义了一个边框的颜色，值为`#e4e7ed`，如果想使用，如下：
+
+```css
+/* 变量的定义，该部分uv-ui已全局引入，无需您编写 */
+$uv-border-color: #e4e7ed;
+
+/* 在您编写css的地方使用这个变量 */
+.item {
+	border: 1px solid $uv-border-color;
+}
+```
+
+<style scoped>
+.color-box {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.color-item {
+	box-sizing: border-box;
+	text-align: left;
+	padding: 20px 25px;
+	border-radius: 5px;
+	flex: 0 0 31.5%;
+	position: relative;
+	height: 130px;
+	overflow: hidden;
+	margin-right: 4%;
+	margin-bottom: 35px;
+	min-width: 300px;
+}
+
+.color-item:nth-child(3n) {
+	
+}
+
+.color-sub {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	left: 0;
+	display: flex;
+	height: 50px;
+}
+
+.sub-item {
+	display: flex;
+	flex: 1;
+	align-items: center;
+	justify-content: flex-start;
+	padding: 0 10px;
+	font-size: 13px;
+}
+
+.sub-item:first-child {
+	border-radius: 0 0 0 5px;
+}
+
+.sub-item:last-child {
+	border-radius: 0 0 5px 0;
+}
+
+</style>
+

package/docs/components/common.md

@@ -0,0 +1,126 @@
+# 提示：全局使用内置样式，请按照[扩展配置-基础样式](/components/setting.html#扩展配置-基础样式)进行配置后即可正常使用
+
+## 内置样式
+
+<demo-model url="/"></demo-model>
+
+
+### 说明
+
+`uv-ui`组件功能的实现，并不依赖全局样式，内置的一些类名，只是提供一些基础且常用的样式，仅此而已。  
+
+### 文字省略
+
+`uv-line-1`,`uv-line-2`,`uv-line-3`,`uv-line-4`,`uv-line-5`五个类名在文字超出内容盒子时，分别只显示一行、两行、三行、四行、五行+省略号。
+
+```html
+<text class="uv-line-1">是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛</text>
+```
+
+### 重置按钮样式
+
+我们知道，uni-app和微信小程序的`button`按钮是自带样式的，比如边框，内边距，行高等。在某些特殊场景，我们可能会需要清除这些样式，仅仅只留下按钮文本，就像
+单纯的`view`元素一样，不带预置样式，场景：  
+在微信小程序中，我们知道`button`设置`open-type`参数为`getUserInfo`(或者分享场景)，点击按钮可以弹出让用户授权的系统弹窗，有时候我们可能需要按钮形式展现，但也有时候我们仅仅需要
+"点击登录/授权/分享"几个字，同时具备获取相应的功能，就需要清除按钮的样式了，只需要给`button`加上`uv-reset-button`类名即可。
+
+```html
+<button class="uv-reset-button">点击登录</button>
+```
+
+提示：
+1. 此种场景，不建议使用uv-ui的`uv-button`组件，使用原生的`button`即可
+2. 有时候，我们可能弹出询问用户是否想授权，可以用`uv-modal`组件，此组件有一个`confirm-button`的`slot`用于替换`确定`按钮，用户点击确定，即可授权。
+
+```html
+/* 请在微信开发工具中运行此代码 */
+<template>
+	<view>
+		<uv-modal v-model="show" content="点击确定进行授权">
+			<template v-slot:confirm-button>
+				<button open-type="getUserInfo" class="uv-reset-button" @getuserinfo="getuserinfo">确定</button>
+			</template>
+		</uv-modal>
+		<uv-button @click="show = true">打开modal</uv-button>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const show = ref(true);
+
+function getuserinfo(res) {
+	console.log(res);
+}
+</script>
+```
+
+
+### 边框
+
+uni-app，iOS和少数设备使用`1rpx`是能够得到类似`0.5px`的半像素宽度的，但是某些情况下是不兼容的，
+故uv-ui提供了一套兼容的css类名，方便用户使用。  
+`uv-border`表示给元素添加四周的边框，`uv-border-top`为上边框，`uv-border-right`为右边框，
+`uv-border-bottom`为下边框，`uv-border-left`为左边框。  
+说明：如果想调整边框与内容的距离，修改元素的内边距即可。
+
+```html
+<view class="uv-border-bottom">
+	夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外
+</view>
+```
+
+# 提示：全局使用主题变量，请按照[扩展配置-自定义主题](/components/setting.html#扩展配置-自定义主题)进行配置后即可正常使用
+
+### 文字颜色
+
+uv-ui提供了四个关于文字的颜色，具体详见文档的[Color 色彩](/components/color.html)部分，分别是：
+
+- `main-color`主要颜色，可以用于标题等需要重颜色的场景
+- `content-color`内容颜色，可以用于一般性内容的场景
+- `tips-color`提示颜色，可以用于浅颜色的提示语的场景
+- `light-color`为比`tips-color`更浅的颜色，可以和`tips-color`搭配使用
+
+举个例子：  
+我们平时看到的APP的新闻列表，标题颜色可以用`$uv-main-color`，简介部分颜色可以用`$uv-content-color`，底部的发布时间文字等可以用`$uv-tips-color`。
+
+
+uv-ui提供了四个关于文字颜色的scss变量名，具体详见文档的[Color 色彩](/components/color.html)部分，分别是：
+- `$uv-main-color`
+- `$uv-content-color`
+- `$uv-tips-color`
+- `$uv-light-color`
+
+
+```html
+<!-- 请确保在style标签声明了"lang="scss"" -->
+<style lang="scss" scoped>
+	.box {
+		color: $uv-main-color;
+	}
+
+	.count {
+		border-color: $uv-light-color;
+	}
+</style>
+```
+
+
+### 主题色
+
+uv-ui提供五个关于主题的scss颜色变量，如有需要，可合理使用。具体详见文档的[Color 色彩](/components/color.html)部分，分别是：
+
+- `$uv-primary`为蓝色，uv-ui的主色彩，代表热情，友好，积极，向上之意。
+- `$uv-warning`为黄色，代表警告之意。
+- `$uv-success`为绿色，代表成功之意。
+- `$uv-error`为红色，代表错误之意。
+- `$uv-info`为灰色，代表一般信息之意。
+
+```html
+<style lang="scss" scoped>
+	.item {
+		color: $uv-primary;
+	}
+</style>
+```

package/docs/components/countDown.md

@@ -0,0 +1,166 @@
+## CountDown 倒计时 <to-api/>
+
+<demo-model url="/pages/componentsD/countDown/countDown"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-count-down**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-count-down)
+
+:::
+
+该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间紧迫感，提示用户进行某一个行为操作。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+通过`time`参数设置倒计时间，单位为`ms`
+
+```vue
+<template>
+	<uv-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></uv-count-down>
+</template>
+```
+
+### 自定义格式
+
+通过绑定`change`回调的值，进行自定义格式
+
+```vue
+<template>
+	<uv-count-down 
+		:time="30 * 60 * 60 * 1000" 
+		format="DD:HH:mm:ss" 
+		autoStart 
+		millisecond 
+		@change="onChange">
+		<view class="time">
+			<text class="time__item">{{ timeData.days }}&nbsp;天</text>
+			<text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
+			<text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
+			<text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
+		</view>
+	</uv-count-down>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const timeData = ref({});
+function onChange(e) {
+  timeData.value = e;
+}
+
+</script>
+<style lang="scss">
+	.time {
+		// #ifndef APP-NVUE
+		display: flex;
+		// #endif
+		flex-direction: row;
+		align-items: center;
+		&__item {
+			color: red;
+			font-size: 30rpx;
+			text-align: center;
+		}
+	}
+</style>
+```
+
+### 毫秒级渲染
+
+通过配置`millisecond`来开启毫秒级倒计时
+
+```vue
+<uv-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></uv-count-down>
+```
+
+### 手动控制
+
+通过绑定`ref`进行手动控制重置、开始、暂停
+
+```vue
+<template>
+	<uv-count-down 
+		ref="countDown" 
+		:time="10* 1000" 
+		format="ss:SSS" 
+		:autoStart="false" 
+		millisecond 
+		@change="onChange">
+	</uv-count-down>
+	<button type="primary" size="small" @click="reset">重置</button>
+	<button type="primary" size="small" @click="start">开始</button>
+	<button type="primary" size="small" @click="pause">暂停</button>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const countDown = ref(null);
+const timeData = ref({});
+function start() {
+  countDown.value.start();
+}
+function pause() {
+  countDown.value.pause();
+}
+function reset() {
+  countDown.value.reset();
+}
+function onChange(e) {
+  timeData.value = e;
+}
+
+</script>
+```
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### CountDown Props
+
+| 参数			| 说明											| 类型					| 默认值		|  可选值	|
+|:-				|:-												|:-						|:-			|:-			|
+| time			| 倒计时时长，单位ms					 			| String &#124; Number	| 0			| -			|
+| format		| 时间格式，`DD` - 日，`HH` - 时，`mm` - 分，`ss` - 秒，`SSS` - 毫秒。eg：`DD:HH:mm:ss:SS`	| String				| HH:mm:ss	| -			|
+| autoStart		| 是否自动开始倒计时								| Boolean				| true		| true &#124; false		|
+| millisecond	| 是否展示毫秒倒计时								| Boolean				| false		| true &#124; false		|
+| customStyle | 自定义外部样式 | Object | - | - |
+
+### CountDown Methods
+
+需要通过`ref`获取倒计时组件才能调用
+
+| 名称	| 说明		|
+|:-		|:-			|
+| start	| 开始倒计时	|
+| pause	| 暂停倒计时	|
+| reset	| 重置倒计时	|
+
+### CountDown Events
+
+|事件名	|说明						|回调参数	|
+|:-		|:-							|:-			|
+|@change	|过程中，倒计时变化时触发		| time: 剩余的时间 |
+|@finish	|倒计时结束					|-			|
+
+<style scoped>
+h3[id=countdown-methods] + p + table thead tr th:nth-child(2){
+	width: 70%;
+}
+h3[id=countdown-events] + table thead tr th:nth-child(2){
+	width: 50%;
+}
+</style>