@gmcb/uv-ui 0.2.27 → 0.3.1

package/docs/components/noNetwork.md

@@ -0,0 +1,116 @@
+## NoNetwork 无网络提示 <to-api/>
+
+<demo-model url="/pages/componentsC/noNetwork/noNetwork"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-no-network**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-no-network)
+
+:::
+
+该组件无需任何配置，内部自动处理所有功能和事件，有如下特点：
+- 如果没有网络，该组件会以`fixed`定位，并且以很大的`z-index`值覆盖原来的内容。一旦有网络了，会自动隐藏该组件，实现自动化
+- 在APP上，嵌入了5+接口，可以直接打开手机的设置页面，方便用户进行网络相关的设置
+
+::: warning 说明
+1. 应用有网络时，是不会触发本组件的，为了测试此功能，请关闭手机的数据连接以及WiFi即可
+2. 由于普通的组件无法覆盖原生组件，所以本组件不适用那些有`video`，`map`等原生表现的组件的页面，可以自行使用uni的`cover-view`组件修改
+:::
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+```vue
+<template>
+	<view>
+		<uv-no-network @disconnected="disconnected" @connected="connected" @retry="retry"></uv-no-network>
+		<!-- 下方是自己的业务代码 -->
+		<view class="uv-content">
+			<view class="uv-content__circle">
+				<uv-icon name="checkbox-mark" color="#fff" size="30"></uv-icon>
+			</view>
+			<text class="uv-content__normal">网络正常</text>
+		</view>
+	</view>
+</template>
+<script setup>
+function disconnected() {
+  console.log('disconnected');
+}
+function connected() {
+  console.log('connected');
+}
+function retry() {
+  console.log('retry');
+}
+
+</script>
+<style lang="scss" scoped>
+	@mixin flex($direction: row) {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: $direction;
+	}
+	.uv-content {
+		padding: 150px 60px 0;
+		@include flex(column);
+		align-items: center;
+		justify-content: center;
+		&__circle {
+			background-color: #5ac725;
+			@include flex;
+			border-radius: 100px;
+			width: 60px;
+			height: 60px;
+			align-items: center;
+			justify-content: center;
+		}
+		&__normal {
+			font-size: 30rpx;
+			color: #5ac725;
+			margin-top: 30rpx;
+		}
+	}
+</style>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### NoNetwork Props
+
+| 参数	| 说明										| 类型					| 默认值				| 可选值	|
+| :-	| :-										| :-					| :-				| :-	|
+| tips	| 没有网络时的提示语							| String				| 哎呀，网络信号丢失	| -		|
+| image	| 无网络的图片提示，可用的src地址或base64图片	| String				| -					| -		|
+
+### NoNetwork Events
+
+
+| 事件名			| 说明							| 回调参数	|
+| :-			| :-							| :-		|
+| @retry			| 用户点击页面的"重试"按钮时触发	| -			|
+| @connected		| "重试"后，有网络触发			| -			|
+| @disconnected	| "重试"后，无网络触发			| -			|
+
+<style scoped>
+h3[id=nonetwork-events] + table thead tr th:nth-child(2){
+	width: 50%;
+}
+</style>

package/docs/components/noticeBar.md

@@ -0,0 +1,131 @@
+## NoticeBar 滚动通知 <to-api/>
+
+<demo-model url="/pages/componentsC/noticeBar/noticeBar"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-notice-bar**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-notice-bar)
+
+:::
+
+该组件一般用于滚动公告等场景，灵活配置，有多种模式可供选择。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+通过`text`属性设置需要滚动的内容
+
+```vue
+<template>
+	<view>
+		<uv-notice-bar :text="text"></uv-notice-bar>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const text = ref('uv-ui众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用');
+
+</script>
+```
+
+### 竖向滚动
+
+通过 `direction` 配置为 `column` 可以竖向滚动，默认为 `row`
+
+```vue
+<template>
+	<view>
+		<uv-notice-bar :text="text" direction="column"></uv-notice-bar>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const text = ref(['uv-ui众多组件覆盖开发过程的各个需求', '组件功能丰富，多端兼容', '让您快速集成，开箱即用']);
+
+</script>
+```
+
+### 可关闭
+
+通过`mode`配置为`closable`让右侧显示关闭按钮
+
+```vue
+<template>
+	<view>
+		<uv-notice-bar :text="text" mode="closable"></uv-notice-bar>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const text = ref('uv-ui众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用');
+
+</script>
+```
+
+### 配置滚动速度和跳转
+
+- `speed`可配置横向滚动速度
+- `url`可配置跳转
+
+```vue
+<template>
+	<view>
+		<uv-notice-bar :text="text" mode="closable" speed="250" url="/pages/componentsB/tag/tag"></uv-notice-bar>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const text = ref('uv-ui众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用');
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### NoticeBar Props
+
+| 参数			| 说明																						| 类型					| 默认值		|  可选值			| 平台差异性说明 |
+|:-				|:-																							|:-						|:-			|:-					|:-					|
+| text			| 显示的内容，`direction`为`column`时要求为数组，	为`row`时要求为字符串									| Array &#124;  String	| -			| -					|
+| direction		| 通告滚动模式，`row`-横向滚动，`column`-竖向滚动													| String				| row		| row &#124; column			|-					|
+| step			| `direction = "row"`时，是否使用步进形式滚动														| Boolean				| false		| true &#124; false				|-					|
+| icon			| 左侧的音量图标，不显示`:icon="false"`或传空																		| String				| volume	| -					|
+| mode			| 通告模式，`link`-显示右箭头，`closable`-显示右侧关闭图标											| String				| -			| link &#124; closable	|-					|
+| color			| 文字颜色																					| String				| #f9ae3d	| -					|-					|
+| bgColor		| 背景颜色																					| String				| #fdf6ec	| -					|-					|
+| speed			| 水平滚动时的滚动速度，即每秒滚动多少`px(rpx)`，这有利于控制文字无论多少时，都能有一个恒定的速度		| String &#124; Number	| 80		| -					|-					|
+| fontSize		| 字体大小																					| String &#124; Number	| 14		| -					|
+| duration		| 滚动一个周期的时间长，单位`ms`																	| String &#124; Number	| 2000		| -					|-					|
+| url			| 跳转的页面路径																				| String				| -			| -					|-					|
+| linkType		| 页面跳转的类型																				| String				| navigateTo| -					|-					|
+| disableTouch	| 是否禁止用手滑动切换，仅`direction="column"生效`	| Boolean				| true		| true &#124; false				| App 2.5.5+、H5 2.5.5+、支付宝小程序、抖音小程序与飞书小程序（只在初始化时有效，不能动态变更）|
+| disableScroll <badge text="1.0.4"/>	| 是否禁止自动滚动，仅`direction="column"生效`	| Boolean				| false		| true &#124; false				|-					|
+| customStyle		| 定义需要用到的外部样式																				| Object				| -| -					|-					|
+
+### NoticeBar Events
+
+| 事件名| 说明					| 回调参数	|
+| :-	| :-					| :-		|
+| @click	| 点击通告文字触发		| index: 点击的text的索引		|
+| @close	| 点击右侧关闭图标触发	| -			|
+| @change | `direction` 为 `column` 滚动时触发| index: 索引 |

package/docs/components/notify.md

@@ -0,0 +1,204 @@
+## Notify 消息提示 <to-api/>
+
+<demo-model url="/pages/componentsC/notify/notify"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-notify**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-notify)
+
+:::
+
+该组件一般用于页面顶部向下滑出一个提示，后自动收起的场景。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+使用`ref`调用组件`show`方法进行显示组件，更多参数参考API
+
+```vue
+<template>
+	<uv-notify ref="notify" message="Hi uv-ui" type="success"></uv-notify>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { onReady } from '@dcloudio/uni-app';
+
+const notify = ref(null);
+onReady(() => {
+  notify.value.show();
+});
+
+</script>
+```
+
+### 主题形式调用
+
+组件内置了多个主题方法：`primary` `success` `error` `warning`。可以直接用`ref`进行调用，调用参数为提示文本，如下：
+
+```vue
+<template>
+	<uv-notify ref="notify"></uv-notify>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { onReady } from '@dcloudio/uni-app';
+
+const notify = ref(null);
+onReady(() => {
+  notify.value.primary('Primary主题');
+});
+
+</script>
+```
+
+### 自定义图标
+
+通过插槽的方式自定义图标
+
+```vue
+<template>
+	<uv-notify ref="notify" :duration="10*1000" type="error" message="HI uvui">
+		<template v-slot:icon>
+			<image src="https://via.placeholder.com/50x50.png/2878ff" style="width: 30rpx;height: 30rpx;" mode="aspectFit"></image>
+		</template>
+	</uv-notify>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { onReady } from '@dcloudio/uni-app';
+
+const notify = ref(null);
+onReady(() => {
+  notify.value.show();
+});
+
+</script>
+```
+
+### 使用show方法传参
+
+组件还提供了另一种传递参数的方式，参数直接通过`show`方法传递，如下：
+
+```vue
+<template>
+	<uv-notify ref="notify"></uv-notify>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { onReady } from '@dcloudio/uni-app';
+
+const notify = ref(null);
+onReady(() => {
+  notify.value.show({
+    top: 10,
+    type: 'error',
+    color: '#000',
+    bgColor: '#e8e8e8',
+    message: 'Hi uv-ui',
+    duration: 1000 * 3,
+    fontSize: '20rpx',
+    safeAreaInsetTop: true
+  });
+});
+
+</script>
+```
+
+### 手动关闭提示
+
+该组件通过`duration`参数控制显示时间，时间到会自动关闭，当然也可以使用`close`手动关闭
+
+```vue
+<template>
+	<uv-notify ref="notify"></uv-notify>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { onReady } from '@dcloudio/uni-app';
+
+const notify = ref(null);
+onReady(() => {
+  notify.value.show({
+    top: 10,
+    type: 'error',
+    color: '#000',
+    bgColor: '#e8e8e8',
+    message: 'Hi uv-ui',
+    duration: 1000 * 3,
+    fontSize: '20rpx',
+    safeAreaInsetTop: true
+  });
+  // 显示1秒主动关闭
+  setTimeout(() => {
+    notify.value.close();
+  }, 1000);
+});
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Notify Props
+
+| 参数				| 说明									| 类型					| 默认值		| 可选值	|
+| :-				| :-									| :-					| :-		| :-	|
+| top				| 到顶部的距离							| String &#124; Number	| 0			| -		|
+| type				| 主题，`primary`，`success`，`warning`，`error`	| String				| primary	| -		|
+| color				| 字体颜色								| String				| #ffffff	| -		|
+| bgColor			| 背景颜色								| String				| -			| -		|
+| message			| 展示的文字内容							| String				| -			| -		|
+| duration			| 展示时长，为0时不消失，单位`ms`		| String &#124; Number	| 3000		| -		|
+| fontSize			| 字体大小，单位`px（rpx）`						| String &#124; Number	| 15		| -		|
+| safeAreaInsetTop	| 是否留出顶部安全距离（状态栏高度）		| Boolean				| false		| true &#124; false	|
+| customStyle | 自定义外部样式 | Object | - | - |
+
+### Show Methods Params
+
+与上面的Notify Props重复的参数作用和效果一致
+
+| 参数				| 说明									| 类型					| 默认值		| 可选值	|
+| :-				| :-									| :-					| :-		| :-	|
+| top				| 到顶部的距离							| String &#124; Number	| 0			| -		|
+| type				| 主题，`primary`，`success`，`warning`，`error`	| String				| primary	| -		|
+| color				| 字体颜色								| String				| #ffffff	| -		|
+| bgColor			| 背景颜色								| String				| -			| -		|
+| message			| 展示的文字内容							| String				| -			| -		|
+| duration			| 展示时长，为0时不消失，单位`ms`		| String &#124; Number	| 3000		| -		|
+| fontSize			| 字体大小，单位`px（rpx）`						| String &#124; Number	| 15		| -		|
+| safeAreaInsetTop	| 是否留出顶部安全距离（状态栏高度）		| Boolean				| false		| true &#124; false	|
+
+### Notify Methods
+| 事件名								| 参数		| 说明					|
+| :-								| :-					| :-		|
+| show								| 	-	| 显示并加载配置 	|
+| primary &#124; success &#124; warning &#124; error| -	| 显示当前主题消息提示 |
+| close								| 		-	| 关闭消息提示	|
+
+### Notify Slots
+
+| 参数	| 说明		|
+| :-	| :-		|
+| icon	| 通知内容	|
+
+<style scoped>
+h3[id=notify-slots] + table thead tr th:nth-child(2){
+	width: 70%;
+}
+</style>

package/docs/components/npmSetting.md

@@ -0,0 +1,64 @@
+## NPM 安装方式配置
+
+### 安装
+
+```sh
+npm install @gmcb/uv-ui
+```
+
+uv-ui 依赖 SCSS，CLI 项目请确认已安装：
+
+```sh
+npm i sass -D
+```
+
+### 注册插件
+
+```js
+// main.js
+import App from './App';
+import { createSSRApp } from 'vue';
+import uvUI from '@gmcb/uv-ui';
+
+export function createApp() {
+	const app = createSSRApp(App);
+	app.use(uvUI);
+	return { app };
+}
+```
+
+### 引入主题变量
+
+```scss
+/* uni.scss */
+@import '@gmcb/uv-ui/theme.scss';
+```
+
+### 引入基础样式
+
+```vue
+<!-- App.vue -->
+<style lang="scss">
+@import '@gmcb/uv-ui/index.scss';
+</style>
+```
+
+### easycom
+
+```json
+{
+	"easycom": {
+		"^uv-(.*)": "@gmcb/uv-ui/components/uv-$1/uv-$1.vue"
+	}
+}
+```
+
+### transpileDependencies
+
+如果 CLI 构建环境需要转译依赖，可在 `vue.config.js` 中加入：
+
+```js
+module.exports = {
+	transpileDependencies: ['@gmcb/uv-ui']
+};
+```