@gmcb/uv-ui 0.2.27 → 0.3.0

package/docs/components/divider.md

@@ -0,0 +1,88 @@
+## Divider 分割线 <to-api/>
+
+<demo-model url="/pages/componentsA/divider/divider"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-divider**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-divider)
+
+:::
+
+区隔内容的分割线，用于页面底部“没有更多”的提示等场景。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+文字内容通过`text`传入
+
+```vue
+<uv-divider text="分割线"></uv-divider>
+```
+
+### 设置虚线
+可以通过`dashed`指定虚线
+```vue
+<uv-divider text="分割线" :dashed="true"></uv-divider>
+```
+
+### 设置细线
+可以通过`hairline`指定细线
+```vue
+<uv-divider text="分割线" :hairline="true"></uv-divider>
+```
+
+### 设置以点代替文字
+可以通过`dot`指定以点代替文字
+```vue
+<uv-divider text="分割线" :dot="true"></uv-divider>
+```
+
+### 设置文本靠左靠右
+可以通过`textPosition`指定文字靠左靠右
+```vue
+<uv-divider text="靠左" textPosition="left"></uv-divider>
+<uv-divider text="靠右" textPosition="right"></uv-divider>
+```
+
+### 设置文本颜色和线条颜色
+可以通过`textColor`和`lineColor`指定文字刚线条颜色
+```vue
+<uv-divider text="分割线" textColor="#2979ff" lineColor="#ff0000"></uv-divider>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+
+### Divider Props
+
+| 参数			| 说明									| 类型					|默认值		| 可选值			|
+|:-				|:-										|:-						|:-			|:-				|
+| dashed		| 是否虚线								| Boolean				| false		| true &#124; false			|
+| hairline		| 是否细线								| Boolean				| true		| true &#124; false			|
+| dot			| 是否以点替代文字，优先于text字段起作用	| Boolean				| false		| true	&#124; false		|
+| textPosition	| 内容文本的位置							| String				| center	| center &#124; left &#124; right	|
+| text			| 文本内容								| String &#124; Number	| -			| -				|
+| textSize		| 文本大小								| String &#124; Number	| 14		| -				|
+| textColor		| 文本颜色								| String				| #909399	| -				|
+| lineColor		| 线条颜色								| String				| #dcdfe6	| -				|
+
+
+### Divider Events
+
+|事件名	|说明						|回调参数	|
+|:-		|:-							|:-			|
+| @click	| divider组件被点击时触发		| -			|

package/docs/components/downloadSetting.md

@@ -0,0 +1,54 @@
+## 下载安装方式配置
+
+如果项目通过 `uni_modules` 方式引入 uv-ui，请在 Vue 3 项目中按下面方式接入。npm 项目优先阅读 [NPM 安装方式配置](/components/npmSetting.html)。
+
+### SCSS
+
+uv-ui 依赖 SCSS。HBuilderX 项目请确认已安装 `scss/sass 编译` 插件；CLI 项目请安装：
+
+```sh
+npm i sass -D
+```
+
+### 注册插件
+
+```js
+// main.js
+import App from './App';
+import { createSSRApp } from 'vue';
+import uvUI from '@/uni_modules/uv-ui';
+
+export function createApp() {
+	const app = createSSRApp(App);
+	app.use(uvUI);
+	return { app };
+}
+```
+
+### 引入主题变量
+
+```scss
+/* uni.scss */
+@import '@/uni_modules/uv-ui/theme.scss';
+```
+
+### 引入基础样式
+
+```vue
+<!-- App.vue -->
+<style lang="scss">
+@import '@/uni_modules/uv-ui/index.scss';
+</style>
+```
+
+### easycom
+
+如果使用 `uni_modules` 安装，通常无需额外配置 easycom。若项目需要手动配置，可在 `pages.json` 中写入：
+
+```json
+{
+	"easycom": {
+		"^uv-(.*)": "@/uni_modules/uv-ui/components/uv-$1/uv-$1.vue"
+	}
+}
+```

package/docs/components/dropDown.md

@@ -0,0 +1,375 @@
+## DropDown 下拉筛选
+
+<demo-model url="/pages/componentsB/dropDown/dropDown"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-drop-down**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-drop-down)
+
+:::
+
+该组件主要提供筛选下拉筛选框，内置基础筛选功能，可以根据自己的需求自定义筛选项。
+
+兼容app-nvue，需要内置三个组件进行配合使用，uv-drop-down属于菜单项（其实还包括子组件uv-drop-down-item），uv-drop-down-popup属于筛选框。
+
+只需要做简单的约定式配置，即可使用该功能，兼容性良好，已经在多端进行了多次测试。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本用法
+
+该用法只提供选择项及配置的方式和下拉框盒子，内容需要自己定义。
+
+#### uv-drop-down
+
+- 设置 `sign` 属性，保证组件唯一性，如果一个项目用到多个该组件，就需要将每个 `sign` 设置不同，组件内部使用了uni.$on监听，不设置可能会互相影响。`uv-drop-down`和`uv-drop-down-popup`组件都需设置且值必须相等。
+- 设置 `defaultValue` 属性，默认值，如下设置[0,'0','all']，如果value等于0或'0'即代表该选项还未进行选择，即不是选中状态。
+
+#### uv-drop-down-item
+
+- 设置 `name` 属性，选择项的字段标识，在处理逻辑的时候会用到。
+- 设置 `label` 属性，展示选中或未选中的文本。
+- 设置 `value` 属性，该项的值，如果不是defaultValue中的值，即是选中状态。
+- 设置 `type` 属性，1 - 没有筛选项，表示是否选中，2 - 有多个筛选项。
+
+```vue
+<template>
+	<view style="height: 1000px;">
+		<uv-drop-down
+			ref="dropDown"
+			sign="dropDown_1" 
+			:defaultValue="[0,'0','all']" 
+		>
+			<uv-drop-down-item 
+				name="order" 
+				type="2" 
+				label="综合排序" 
+				value="all">
+			</uv-drop-down-item>
+			<uv-drop-down-item 
+				name="type" 
+				type="2" 
+				label="文档格式" 
+				value="0">
+			</uv-drop-down-item>
+			<uv-drop-down-item 
+				name="vip_type" 
+				type="1" 
+				label='VIP文档'
+				:value="0">
+			</uv-drop-down-item>
+		</uv-drop-down>
+		<uv-drop-down-popup
+			sign="dropDown_1"
+			@popupChange="change"
+		>
+			<view style="width: 750rpx;height: 300rpx;background-color: #fff;"></view>
+		</uv-drop-down-popup>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const dropDown = ref(null);
+function change(e) {
+  console.log('弹窗打开状态：', e);
+}
+
+</script>
+```
+
+### 完整示例
+
+使用内置筛选项，就需要根据约定参数，格式可以直接使用如下示例，每个参数的作用会在下方说明：
+
+```vue
+<template>
+	<view>
+		<uv-drop-down 
+			ref="dropDown"
+			sign="dropDown_1" 
+			text-active-color="#3c9cff"
+			:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}" 
+			:extra-active-icon="{name:'arrow-up-fill',color:'#3c9cff',size:'26rpx'}"
+			:defaultValue="defaultValue" 
+			:custom-style="{padding: '0 30rpx'}" 
+			@click="selectMenu"
+		>
+			<uv-drop-down-item 
+				name="order" 
+				type="2" 
+				:label="dropItem('order').label" 
+				:value="dropItem('order').value">
+			</uv-drop-down-item>
+			<uv-drop-down-item 
+				name="type" 
+				type="2" 
+				:label="dropItem('type').label" 
+				:value="dropItem('type').value">
+			</uv-drop-down-item>
+			<uv-drop-down-item 
+				name="vip_type" 
+				type="1" label='VIP文档' 
+				:value="dropItem('vip_type').value">
+			</uv-drop-down-item>
+		</uv-drop-down>
+		<uv-drop-down-popup 
+			sign="dropDown_1" 
+			:click-overlay-on-close="true"
+			:currentDropItem="currentDropItem" 
+			@clickItem="clickItem"
+			@popupChange="change"
+		></uv-drop-down-popup>
+	</view>
+</template>
+<script setup>
+import { computed, ref } from 'vue';
+
+function setValue(target, key, value) {
+  target[key] = value;
+}
+const dropDown = ref(null);
+const defaultValue = ref([0, 'all', '0']);
+const result = ref([{
+  name: 'order',
+  label: '最新发布',
+  value: 'new'
+}]);
+const activeName = ref('order');
+const order = ref({
+  label: '综合排序',
+  value: 'all',
+  activeIndex: 0,
+  color: '#333',
+  activeColor: '#2878ff',
+  child: [{
+    label: '综合排序',
+    value: 'all'
+  }, {
+    label: '最新发布',
+    value: 'new'
+  }, {
+    label: '低价优先',
+    value: 'money'
+  }]
+});
+const type = ref({
+  label: '文档格式',
+  value: 'all',
+  activeIndex: 0,
+  color: '#333',
+  activeColor: '#2878ff',
+  child: [{
+    label: '全部',
+    value: 'all'
+  }, {
+    label: 'PDF',
+    value: 'pdf'
+  }, {
+    label: 'WROD',
+    value: 'word'
+  }, {
+    label: 'PPT',
+    value: 'ppt'
+  }]
+});
+const vip_type = ref({
+  label: 'VIP文档',
+  value: 0,
+  activeIndex: 0
+});
+const filterMap = {
+  order,
+  type,
+  vip_type
+};
+const dropItem = computed(() => {
+  return name => {
+    const selected = {}; 
+    const find = result.value.find(item => item.name === name);
+    if (find) {
+      selected.label = find.label;
+      selected.value = find.value;
+    } else {
+      selected.label = filterMap[name].value.label;
+      selected.value = filterMap[name].value.value;
+    }
+    return selected;
+  };
+});
+const currentDropItem = computed(() => {
+  return filterMap[activeName.value].value;
+});
+function change(e) {
+  console.log('弹窗打开状态：', e);
+}
+function selectMenu(e) {
+  const {
+    name,
+    active,
+    type
+  } = e;
+  activeName.value = name;
+  // type 等于1 的需要特殊处理：type不等于1可以忽略
+  if (type == 1) {
+    clickItem({
+      name: 'vip_type',
+      label: 'VIP文档',
+      value: e.active ? 1 : 0
+    });
+  } else {
+    const find = result.value.find(item => item.name == activeName.value);
+    if (find) {
+      const activeItem = filterMap[activeName.value].value;
+      const findIndex = activeItem.child.findIndex(item => item.label == find.label && item.value == find.value);
+      activeItem.activeIndex = findIndex;
+    } else {
+      filterMap[activeName.value].value.activeIndex = 0;
+    }
+  }
+}
+function clickItem(e) {
+  // 下面有重新赋值，所以用let
+  let {
+    label,
+    value
+  } = e;
+  const findIndex = result.value.findIndex(item => item.name == activeName.value);
+  if (defaultValue.value.indexOf(value) > -1 && filterMap[activeName.value].value.label) {
+    label = filterMap[activeName.value].value.label;
+  }
+  // 已经存在筛选项
+  if (findIndex > -1) {
+    setValue(result.value, findIndex, {
+      name: activeName.value,
+      label,
+      value
+    });
+  } else {
+    result.value.push({
+      name: activeName.value,
+      label,
+      value
+    });
+  }
+  result.value = result.value.filter(item => defaultValue.value.indexOf(item.value) == -1);
+  uni.showModal({
+    content: `筛选的值：${JSON.stringify(result.value)}`
+  });
+}
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### DropDown Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|:-|:-|:-|:-|
+| sign | String &#124; Number | UVDROPDOWN | 组件唯一标识，需要手动传 |
+| default-value | Array | [0,'0','all'] | 默认值，表示参数value属于这里面的值，就说明是未选中即是默认展示的值。eg：上面示例中的{label: '全部',value: 'all'} 即是默认值。后续处理逻辑也可以根据是否是其中值进行过滤。 |
+| is-sticky | Boolean | true | 是否吸顶 |
+| text-size | String | 30rpx | 每项字体大小 |
+| text-color | String | #333 | 每项文本颜色 |
+| text-active-size | String | 30rpx | 每项选中状态字体大小 |
+| text-active-color | String | #3c9cff | 每项选中状态文本颜色 |
+| extra-icon | Object | {name: 'arrow-down', size: '30rpx', color: '#333'} | 每项右侧图标，暂时只支持设置默认值中的3个参数，参考 [uv-icon](https://www.uvui.cn/components/icon.html) |
+| extra-active-icon | Object | {name: 'arrow-up', size: '30rpx', color: '#3c9cff'} | 每项选中后右侧图标，暂时只支持设置默认值中的3个参数，参考 [uv-icon](https://www.uvui.cn/components/icon.html) |
+
+### DropDownItem Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|:-|:-|:-|:-|
+| name | String &#124; Number | - | 字段标识 |
+| type | String &#124; Number | - | 类型 1 没有筛选项，直接进行选中和不选中  2 有多个选项 |
+| label | String | - | 筛选的文本 |
+| value | String &#124; Number &#124; null | - | 筛选的值 |
+| is-drop | Boolean | false | 该项是否打开，可用于重置选项状态 |
+
+### DropDownPopup Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|:-|:-|:-|:-|
+| sign | String &#124; Number | UVDROPDOWN | 组件唯一标识，需要手动传，与DropDown组件必须保持一致 |
+| z-index | String &#124; Number | 999 | 弹出层的层级 |
+| opacity | String &#124; Number | 0.5 | 遮罩层的透明度 |
+| click-overlay-on-close | Boolean | true | 是否允许点击遮罩层关闭弹窗 |
+| current-drop-item | Object | - | 当前下拉筛选菜单对象 |
+| key-name | String | label | 指定从当前下拉筛选菜单对象元素中读取哪个属性作为文本展示 |
+
+### DropDown Events
+
+| 事件名 | 说明 |返回参数 |
+|:- |:-	|:- |
+| @selectMenu | 点击每项菜单回调 | { name, active, type } = e，active - 是否打开该项 |
+
+### DropDownPopup Events
+
+| 事件名 | 说明 |返回参数 |
+|:- |:-	|:- |
+| @clickItem | 点击筛选回调处理 | { label, value } = e |
+| @popupChange | 打开关闭弹窗触发 | { show }=e，true或false |
+
+### DropDown Methods
+
+| 名称 | 说明 |
+|:- |:-	|
+| init | 初始化弹窗的位置，在滚动时可以调用此方法，及时更新位置 |
+
+### DropDownPopup Methods
+
+| 名称 | 说明 |
+|:- |:-	|
+| open | 打开弹窗 |
+| close | 关闭弹窗 |
+
+### DropDownPopup Slots
+|名称 | 说明 |
+|:- |:-	|
+| default | 默认插槽，完全自定义内容，包括逻辑都需自己写 |
+
+<style scoped>
+h3[id=dropdown-props] + table thead tr th:nth-child(1),
+h3[id=dropdown-props] + table thead tr th:nth-child(2),
+h3[id=dropdown-props] + table thead tr th:nth-child(3)
+{
+	width: 18%;
+}
+h3[id=dropdownitem-props] + table thead tr th:nth-child(1),
+h3[id=dropdownitem-props] + table thead tr th:nth-child(2),
+h3[id=dropdownitem-props] + table thead tr th:nth-child(3)
+{
+	width: 18%;
+}
+h3[id=dropdownpopup-props] + table thead tr th:nth-child(1),
+h3[id=dropdownpopup-props] + table thead tr th:nth-child(2),
+h3[id=dropdownpopup-props] + table thead tr th:nth-child(3)
+{
+	width: 18%;
+}
+h3[id=dropdownpopup-slots] + table thead tr th:nth-child(2)
+{
+	width: 80%;
+}
+h3[id=dropdownpopup-methods] + table thead tr th:nth-child(2),
+h3[id=dropdown-methods] + table thead tr th:nth-child(2)
+{
+	width: 70%;
+}
+</style>

package/docs/components/empty.md

@@ -0,0 +1,99 @@
+## Empty 内容为空 <to-api/>
+
+<demo-model url="/pages/componentsD/empty/empty"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-empty**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-empty)
+
+:::
+
+该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个“没有内容”的场景，
+我们精心挑选了十几个场景的图标，方便您直接使用。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+:::tip 提示
+我们的专业设计师精心为您准备了一套精美默认图，带有图片和`Sketch`文件，您可以下载或修改后再使用：<a href="/components/resource.html" target="_blank">资源下载</a>
+:::
+
+### 基本使用
+
+- 通过`text`参数配置提示的文字内容
+- 通过`mode`(默认为`data`)参数配置要显示的图标
+
+```vue
+<uv-empty mode="car" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>
+```
+
+### 内置图标
+
+这些图标已内置，直接通过`mode`参数引用即可
+
+| 名称		| 说明					|
+|:-			|:-						|
+| car		| 购物车为空				|
+| page		| 页面不存在				|
+| search	| 没有搜索结果			|
+| address	| 没有收货地址			|
+| wifi-off		| 没有WiFi				|
+| order		| 订单为空				|
+| coupon	| 没有优惠券				|
+| favor		| 无收藏					|
+| permission| 无权限					|
+| history	| 无历史记录				|
+| news		| 无新闻列表				|
+| message	| 消息列表为空			|
+| list		| 列表为空(通用)			|
+| data		| 数据为空(默认，通用)	|
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Empty Props
+
+| 参数		| 说明									| 类型					| 默认值		|  可选值	|
+|:-			|:-										|:-						|:-			|:-			|
+| icon		| 内置图标名称，或图片路径，建议绝对路径，支持base64图片	| String				| -			| -			|
+| text		| 文字提示								| String				| -			| -			|
+| textColor	| 文字颜色								| String				| #c0c4cc	| -			|
+| textSize	| 文字大小								| String &#124; Number	| 14		| -			|
+| iconColor	| 图标的颜色								| String				| #c0c4cc	| -			|
+| iconSize	| 图标的大小								| String &#124; Number	| 90		| -			|
+| mode		| 内置的图标，见上方说明					| String				| data		| -			|
+| width		| 图标的宽度，单位px						| String &#124; Number	| 160		| -			|
+| height	| 图标的高度，单位px						| String &#124; Number	| 160		| -			|
+| show		| 是否显示组件							| Boolean				| true		| true &#124; false		|
+| marginTop	| 组件到上一个元素的间距,单位px			| String &#124; Number	| 0			| -			|
+
+
+
+### Empty Slots
+
+| 名称          | 说明            |
+|:-  |:- |
+| - |  给组件底部传入`slot`内容  |
+
+
+<style scoped>
+h3[id=内置图标] + p + table thead tr th:nth-child(2){
+	width: 70%;
+}
+h3[id=empty-slots] + table thead tr th:nth-child(2){
+	width: 70%;
+}
+</style>