admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-07 01:28:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ 适配暗黑模式

Browse Source
This commit is contained in:
xuqingkai 2023-08-15 23:33:45 +08:00
parent 2e3fd952b5
commit f5946a4b71
183 changed files with 5991 additions and 3644 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/.vitepress/theme/components/frame.vue
View File

@ -1,20 +1,11 @@
<!--
* @Author: weisheng
* @Date: 2022-12-16 18:03:21
* @LastEditTime: 2023-08-04 15:40:12
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\docs\.vitepress\theme\components\frame.vue
* 记得注释
-->
<template> <template>
<iframe v-if="href" id="demo-modal" class="iframe demo-model" scrolling="auto" frameborder="0" :src="href"></iframe> <iframe v-if="href" id="demo" class="iframe demo-model" scrolling="auto" frameborder="0" :src="href"></iframe>
</template> </template>
<script setup> <script setup lang="ts">
import { useRoute } from 'vitepress'; import { useRoute, useData } from 'vitepress';
import { computed } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
const baseUrl = process.env.NODE_ENV === 'production' ? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/` : 'http://localhost:5173/#/' const baseUrl = process.env.NODE_ENV === 'production' ? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/` : 'http://localhost:5173/demo/#/'
const route = useRoute() const route = useRoute()
const href = computed(() => { const href = computed(() => {
const path = route.path const path = route.path
@ -28,6 +19,15 @@ const href = computed(() => {
return href return href
}) })
const vitepressData = useData()
watch(() => vitepressData.isDark.value, () => {
const iFrame: any = document.getElementById('demo')
iFrame && iFrame.contentWindow.postMessage(vitepressData.isDark.value, href.value)
})
</script> </script>
<style scoped> <style scoped>
::-webkit-scrollbar { ::-webkit-scrollbar {

2
docs/component/form.md
View File

@ -17,7 +17,7 @@
html 文件代码： html 文件代码：
```html ```html
<wd-message-box id="wd-message-box" /> <wd-message-box />
<wd-toast /> <wd-toast />
<form @submit="formSubmit"> <form @submit="formSubmit">
<wd-cell-group custom-class="group" title="基础信息" border> <wd-cell-group custom-class="group" title="基础信息" border>

3
index.html
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-03-21 22:49:24 * @Date: 2023-03-21 22:49:24
* @LastEditTime: 2023-07-22 17:55:23 * @LastEditTime: 2023-08-14 22:50:20
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\index.html * @FilePath: \wot-design-uni\index.html
@ -22,6 +22,7 @@
<title></title> <title></title>
<!--preload-links--> <!--preload-links-->
<!--app-context--> <!--app-context-->
<script src="./src/static/touch-emulator.js"></script>
</head> </head>
<body> <body>
<div id="app"><!--app-html--></div> <div id="app"><!--app-html--></div>

27
src/App.vue
View File

@ -1,15 +1,37 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-03-09 19:23:03 * @Date: 2023-03-09 19:23:03
* @LastEditTime: 2023-07-22 17:56:50 * @LastEditTime: 2023-08-15 23:20:15
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\App.vue * @FilePath: \wot-design-uni\src\App.vue
* 记得注释 * 记得注释
--> -->
<script setup lang="ts"> <script setup lang="ts">
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app' import { onLaunch, onShow, onHide, onThemeChange } from '@dcloudio/uni-app'
import { useDark } from './store'
const darkMode = useDark()
onThemeChange((option) => {
darkMode.setDark(option.theme === 'dark')
})
onLaunch((ctx) => { onLaunch((ctx) => {
const systemInfo = uni.getSystemInfoSync()
darkMode.setDark(systemInfo.theme === 'dark')
// #ifdef H5
process.env.NODE_ENV === 'development' &&
window.addEventListener('message', function (event) {
if (event.source !== parent) return
// 处理收到的消息
if (typeof event.data === 'boolean') {
darkMode.setDark(event.data)
} else {
darkMode.setDark(false)
}
})
// #endif
console.log('App Launch') console.log('App Launch')
}) })
onShow(() => { onShow(() => {
@ -24,6 +46,7 @@ onHide(() => {
width: 0; width: 0;
height: 0; height: 0;
} }
page { page {
margin: 0; margin: 0;
padding: 0; padding: 0;

28
src/components/demo-block/demo-block.vue
View File

@ -1,3 +1,12 @@
<!--
* @Author: weisheng
* @Date: 2023-08-01 11:12:05
* @LastEditTime: 2023-08-15 22:13:27
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\components\demo-block\demo-block.vue
* 记得注释
-->
<template> <template>
<view :class="['demo-block', transparent ? '' : 'is-white', customClass]"> <view :class="['demo-block', transparent ? '' : 'is-white', customClass]">
<view class="demo-title">{{ title }}</view> <view class="demo-title">{{ title }}</view>
@ -8,9 +17,10 @@
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签
options: { options: {
virtualHost: true addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
} }
} }
</script> </script>
@ -46,14 +56,28 @@ function setStyle() {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.is-white {
background: $-dark-background2;
}
.demo-block { .demo-block {
color: $-dark-color3;
}
}
.demo-block {
margin-bottom: 15px;
&:not(:first-child) {
margin: 15px 0; margin: 15px 0;
}
color: #666; color: #666;
overflow: hidden; overflow: hidden;
} }
.is-white { .is-white {
background: #fff; background: #fff;
} }
.demo-title { .demo-title {
padding: 0 15px; padding: 0 15px;
margin: 10px 0; margin: 10px 0;

48
src/components/page-wraper/page-wraper.vue Normal file
View File

@ -0,0 +1,48 @@
<!--
* @Author: weisheng
* @Date: 2023-08-07 18:49:03
* @LastEditTime: 2023-08-15 23:22:19
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\components\page-wraper\page-wraper.vue
* 记得注释
-->
<template>
<wd-config-provider :theme="theme">
<view class="page-wraper">
<!-- <wd-cell title="切换暗黑" title-width="240px" center>
<wd-switch v-model="isDark" name="switchVal" />
</wd-cell> -->
<slot />
</view>
</wd-config-provider>
</template>
<script lang="ts">
export default {
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useDark } from '../../store'
const darkMode = useDark()
const isDark = ref<boolean>(false)
const theme = computed(() => {
return darkMode.isDark.value || isDark.value ? 'dark' : 'light'
})
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.page-wraper {
background: #000;
}
}
.page-wraper {
min-height: calc(100vh - var(--window-top));
}
</style>

9
src/manifest.json
View File

@ -7,6 +7,7 @@
"transformPx": false, "transformPx": false,
/* 5+App特有相关 */ /* 5+App特有相关 */
"app-plus": { "app-plus": {
"darkmode": true,
"usingComponents": true, "usingComponents": true,
"nvueStyleCompiler": "uni-app", "nvueStyleCompiler": "uni-app",
"compilerVersion": 3, "compilerVersion": 3,
@ -50,6 +51,8 @@
"quickapp": {}, "quickapp": {},
/* 小程序特有相关 */ /* 小程序特有相关 */
"mp-weixin": { "mp-weixin": {
"darkmode": true,
"themeLocation": "theme.json",
"appid": "wx18107b71aa1672e2", "appid": "wx18107b71aa1672e2",
"setting": { "setting": {
"urlCheck": false "urlCheck": false
@ -57,8 +60,14 @@
"usingComponents": true "usingComponents": true
}, },
"mp-alipay": { "mp-alipay": {
"darkmode": true,
"themeLocation": "theme.json",
"usingComponents": true "usingComponents": true
}, },
"h5": {
"darkmode": true,
"themeLocation": "theme.json"
},
"mp-baidu": { "mp-baidu": {
"usingComponents": true "usingComponents": true
}, },

25
src/pages.json
View File

@ -520,6 +520,16 @@
}, },
"navigationBarTitleText": "Collapse 折叠面板" "navigationBarTitleText": "Collapse 折叠面板"
} }
},
{
"path": "pages/configProvider/Index",
"name": "configProvider",
"style": {
"mp-alipay": {
"allowsBounceVertical": "NO"
},
"navigationBarTitleText": "ConfigProvider 全局配置"
}
} }
], ],
// "tabBar": { // "tabBar": {
@ -529,8 +539,17 @@
// "list": [ ] // "list": [ ]
// }, // },
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarBackgroundColor": "@navBgColor",
"navigationBarBackgroundColor": "#FFF", "navigationBarTextStyle": "@navTxtStyle",
"backgroundColor": "#F8F8F8" "navigationBarTitleText": "Wot Design Uni",
"backgroundColor": "@bgColor",
"backgroundTextStyle": "@bgTxtStyle",
"backgroundColorTop": "@bgColorTop",
"backgroundColorBottom": "@bgColorBottom",
"navigationStyle": "default"
// "navigationBarTextStyle": "black",
// "navigationBarBackgroundColor": "#FFF",
// "backgroundColor": "#F8F8F8"
} }
} }

2
src/pages/actionSheet/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<wd-toast /> <wd-toast />
<view> <view>
<demo-block title="基本用法"> <demo-block title="基本用法">
@ -27,6 +28,7 @@
<view style="padding: 15px 15px 150px 15px">内容</view> <view style="padding: 15px 15px 150px 15px">内容</view>
</wd-action-sheet> </wd-action-sheet>
</view> </view>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'

6
src/pages/badge/Index.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<view> <view>
<page-wraper>
<demo-block title="展示消息数量"> <demo-block title="展示消息数量">
<wd-badge custom-class="badge" :modelValue="12"> <wd-badge custom-class="badge" :modelValue="12">
<wd-button :round="false" type="info" size="small">评论</wd-button> <wd-button :round="false" type="info" size="small">评论</wd-button>
@ -22,10 +23,10 @@
</demo-block> </demo-block>
<demo-block title="可定义消息最大值"> <demo-block title="可定义消息最大值">
<wd-badge custom-class="badge" :modelValue="200" max="99"> <wd-badge custom-class="badge" :modelValue="200" :max="99">
<wd-button :round="false" type="info" size="small">评论</wd-button> <wd-button :round="false" type="info" size="small">评论</wd-button>
</wd-badge> </wd-badge>
<wd-badge custom-class="badge" :modelValue="200" max="10"> <wd-badge custom-class="badge" :modelValue="200" :max="10">
<wd-button :round="false" type="info" size="small">回复</wd-button> <wd-button :round="false" type="info" size="small">回复</wd-button>
</wd-badge> </wd-badge>
</demo-block> </demo-block>
@ -45,6 +46,7 @@
<wd-button :round="false" type="info" size="small">回复</wd-button> <wd-button :round="false" type="info" size="small">回复</wd-button>
</wd-badge> </wd-badge>
</demo-block> </demo-block>
</page-wraper>
</view> </view>
</template> </template>
<script setup lang="ts"></script> <script setup lang="ts"></script>

3
src/pages/button/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<view> <view>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-button open-type="getUserInfo" @getuserinfo="handleGetuserinfo">主要按钮</wd-button> <wd-button open-type="getUserInfo" @getuserinfo="handleGetuserinfo">主要按钮</wd-button>
@ -39,6 +40,7 @@
<wd-button type="warning" loading>加载中</wd-button> <wd-button type="warning" loading>加载中</wd-button>
<wd-button type="error" loading>加载中</wd-button> <wd-button type="error" loading>加载中</wd-button>
<wd-button type="info" loading>加载中</wd-button> <wd-button type="info" loading>加载中</wd-button>
<wd-button type="info" plain loading>加载中</wd-button>
</demo-block> </demo-block>
<demo-block title="文字按钮"> <demo-block title="文字按钮">
<wd-button type="text">按钮</wd-button> <wd-button type="text">按钮</wd-button>
@ -101,6 +103,7 @@
</view> </view>
</demo-block> </demo-block>
</view> </view>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
function handleGetuserinfo(event) { function handleGetuserinfo(event) {

13
src/pages/calendar/Index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<page-wraper>
<wd-toast /> <wd-toast />
<view style="margin: 20px 0"> <view style="margin: 20px 0">
<wd-cell-group border> <wd-cell-group border>
<wd-calendar label="单个日期选择" v-model="value1" @confirm="handleConfirm1" /> <wd-calendar label="单个日期选择" v-model="value1" @confirm="handleConfirm1" />
@ -13,7 +13,7 @@
<wd-calendar label="周范围选择" :first-day-of-week="1" type="weekrange" v-model="value8" /> <wd-calendar label="周范围选择" :first-day-of-week="1" type="weekrange" v-model="value8" />
<wd-calendar label="月范围选择" type="monthrange" v-model="value9" /> <wd-calendar label="月范围选择" type="monthrange" v-model="value9" />
<wd-calendar label="日周月切换" :first-day-of-week="1" show-type-switch v-model="value10" /> <wd-calendar label="日周月切换" :first-day-of-week="1" show-type-switch v-model="value10" />
<wd-calendar label="快捷操作" :show-confirm="false" /> <wd-calendar label="快捷操作" v-model="value10" :show-confirm="false" />
<wd-calendar label="日期格式化" type="daterange" v-model="value11" :formatter="formatter" /> <wd-calendar label="日期格式化" type="daterange" v-model="value11" :formatter="formatter" />
<wd-calendar <wd-calendar
label="快捷选项" label="快捷选项"
@ -39,11 +39,12 @@
<demo-block transparent title="自定义选择器"> <demo-block transparent title="自定义选择器">
<view style="margin: 0 15px"> <view style="margin: 0 15px">
<view style="margin-bottom: 10px">当前选中日期：{{ formatValue }}</view> <view style="margin-bottom: 10px">当前选中日期：{{ formatValue }}</view>
<wd-calendar use-default-slot @confirm="handleConfirm4"> <wd-calendar v-model="value15" use-default-slot @confirm="handleConfirm4">
<wd-button>选择日期</wd-button> <wd-button>选择日期</wd-button>
</wd-calendar> </wd-calendar>
</view> </view>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
@ -61,9 +62,11 @@ const value8 = ref<number[]>([Date.now() - 24 * 60 * 60 * 1000 * 14, Date.now()]
const value9 = ref<number[]>([Date.now() - 24 * 60 * 60 * 1000 * 33, Date.now()]) const value9 = ref<number[]>([Date.now() - 24 * 60 * 60 * 1000 * 33, Date.now()])
const value10 = ref<number>(Date.now()) const value10 = ref<number>(Date.now())
const value11 = ref<number[]>([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now()]) const value11 = ref<number[]>([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now()])
const value12 = ref<string>('') const value12 = ref<number | null>(null)
const value13 = ref<number[]>([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now()]) const value13 = ref<number[]>([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now()])
const value14 = ref<string>('') const value14 = ref<number | null>(null)
const value15 = ref<number | null>(null)
const formatValue = ref<string>('') const formatValue = ref<string>('')
const formatter = (day) => { const formatter = (day) => {
const date = new Date(day.date) const date = new Date(day.date)

17
src/pages/calendarView/Index.vue
View File

@ -1,13 +1,5 @@
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-21 15:50:41
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\calendarView\Index.vue
* 记得注释
-->
<template> <template>
<page-wraper>
<demo-block title="单个日期选择" :hor="0"> <demo-block title="单个日期选择" :hor="0">
<view style="margin: 0 15px 10px"> <view style="margin: 0 15px 10px">
<view style="margin-bottom: 10px; font-size: 13px">切换类型：</view> <view style="margin-bottom: 10px; font-size: 13px">切换类型：</view>
@ -48,15 +40,16 @@
<demo-block title="设置周起始日" :hor="0"> <demo-block title="设置周起始日" :hor="0">
<wd-calendar-view :first-day-of-week="1" v-model="value8"></wd-calendar-view> <wd-calendar-view :first-day-of-week="1" v-model="value8"></wd-calendar-view>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
const type1 = ref<string>('date') const type1 = ref<any>('date')
const type2 = ref<string>('daterange') const type2 = ref<any>('daterange')
const minDate = ref(Date.now()) const minDate = ref(Date.now())
const value1 = ref(Date.now()) const value1 = ref(Date.now())
const value2 = ref('') const value2 = ref(null)
const value3 = ref([Date.now() - 24 * 60 * 60 * 1000 * 33, Date.now()]) const value3 = ref([Date.now() - 24 * 60 * 60 * 1000 * 33, Date.now()])
const value4 = ref(Date.now()) const value4 = ref(Date.now())
const value5 = ref([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now() - 24 * 60 * 60 * 1000]) const value5 = ref([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now() - 24 * 60 * 60 * 1000])

34
src/pages/card/Index.vue
View File

@ -1,13 +1,14 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-06-13 11:47:12 * @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-21 15:51:04 * @LastEditTime: 2023-08-11 18:49:11
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\pages\card\Index.vue * @FilePath: \wot-design-uni\src\pages\card\Index.vue
* 记得注释 * 记得注释
--> -->
<template> <template>
<page-wraper>
<view> <view>
<demo-block title="基本使用" transparent> <demo-block title="基本使用" transparent>
<wd-card title="经营分析"> <wd-card title="经营分析">
@ -46,8 +47,8 @@
style="width: 40px; height: 40px; border-radius: 4px; margin-right: 12px" style="width: 40px; height: 40px; border-radius: 4px; margin-right: 12px"
/> />
<view> <view>
<view style="color: rgba(0, 0, 0, 0.85); font-size: 16px">智云好客CRM短信_催评营销</view> <view class="custom-main">智云好客CRM短信_催评营销</view>
<view style="color: rgba(0, 0, 0, 0.25); font-size: 12px">高级版-快速吸粉 | 周期一年</view> <view class="custom-sub">高级版-快速吸粉 | 周期一年</view>
</view> </view>
</view> </view>
<template #footer> <template #footer>
@ -77,8 +78,8 @@
style="width: 40px; height: 40px; border-radius: 4px; margin-right: 12px" style="width: 40px; height: 40px; border-radius: 4px; margin-right: 12px"
/> />
<view> <view>
<view style="color: rgba(0, 0, 0, 0.85); font-size: 16px">智云好客CRM短信_催评营销</view> <view class="custom-main">智云好客CRM短信_催评营销</view>
<view style="color: rgba(0, 0, 0, 0.25); font-size: 12px">高级版-快速吸粉 | 周期一年</view> <view class="custom-sub">高级版-快速吸粉 | 周期一年</view>
</view> </view>
</view> </view>
<template #footer> <template #footer>
@ -90,9 +91,23 @@
</wd-card> </wd-card>
</demo-block> </demo-block>
</view> </view>
</page-wraper>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup></script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.title-tip {
color: rgba(232, 230, 227, 0.8);
}
.custom-main {
color: $-dark-color;
}
.custom-sub {
color: $-dark-color-gray;
}
}
.content, .content,
.title { .title {
display: flex; display: flex;
@ -110,4 +125,13 @@
color: rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.25);
font-size: 12px; font-size: 12px;
} }
.custom-main {
color: rgba(0, 0, 0, 0.85);
font-size: 16px;
}
.custom-sub {
color: rgba(0, 0, 0, 0.25);
font-size: 12px;
}
</style> </style>

4
src/pages/cell/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<wd-toast /> <wd-toast />
<demo-block title="基本用法" transparent> <demo-block title="基本用法" transparent>
<wd-cell-group> <wd-cell-group>
@ -100,12 +101,13 @@
</wd-cell> </wd-cell>
</wd-cell-group> </wd-cell-group>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
import { ref } from 'vue' import { ref } from 'vue'
const rate = ref(0) const rate = ref(0)
const slider = ref('') const slider = ref(0)
const switchValue = ref('') const switchValue = ref('')
function handleRateChange({ value }) { function handleRateChange({ value }) {

2
src/pages/checkbox/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-checkbox v-model="check1">沃特</wd-checkbox> <wd-checkbox v-model="check1">沃特</wd-checkbox>
</demo-block> </demo-block>
@ -86,6 +87,7 @@
<wd-checkbox modelValue="shop">商家后台</wd-checkbox> <wd-checkbox modelValue="shop">商家后台</wd-checkbox>
</wd-checkbox-group> </wd-checkbox-group>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'

2
src/pages/colPicker/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<wd-toast /> <wd-toast />
<view style="margin: 20px 0"> <view style="margin: 20px 0">
<wd-cell-group border> <wd-cell-group border>
@ -42,6 +43,7 @@
</wd-col-picker> </wd-col-picker>
</view> </view>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'

6
src/pages/collapse/Index.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<view> <page-wraper>
<wd-toast></wd-toast> <wd-toast></wd-toast>
<demo-block title="基础用法" transparent> <demo-block title="基础用法" transparent>
<wd-collapse v-model="value1" @change="handleChange1"> <wd-collapse v-model="value1" @change="handleChange1">
<wd-collapse-item <wd-collapse-item
v-for="(item, index) in itemList" v-for="(item, index) in itemList"
:before-expend="index === 2 ? beforeExpend : ''" :before-expend="index === 2 ? beforeExpend : undefined"
:key="index" :key="index"
:title="item.title" :title="item.title"
:name="item.name" :name="item.name"
@ -54,7 +54,7 @@
</template> </template>
</wd-collapse> </wd-collapse>
</demo-block> </demo-block>
</view> </page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'

309
src/pages/configProvider/Index.vue Normal file
View File

@ -0,0 +1,309 @@
<template>
<page-wraper>
<wd-message-box />
<wd-toast />
<wd-action-sheet :show="showAction" :actions="actions" @close="closeActions" />
<wd-cell-group>
<wd-cell title="弹出菜单" clickable @click="showActions"></wd-cell>
</wd-cell-group>
<form @submit="formSubmit">
<wd-cell-group custom-class="group" title="基础信息" border>
<wd-input
label="优惠券名称"
label-width="100px"
:maxlength="20"
show-word-limit
name="couponName"
required
suffix-icon="warn-bold"
clearable
v-model="couponName"
placeholder="请输入优惠券名称"
@change="handleCouponName"
@clicksuffixicon="handleIconClick"
/>
<wd-select-picker
label="推广平台"
label-width="100px"
name="platform"
v-model="platform"
:columns="platformList"
placeholder="请选择推广平台"
@confirm="handlePlatform"
/>
<wd-picker label="优惠方式" label-width="100px" name="promotion" align-right v-model="promotion" :columns="promotionlist" />
<wd-cell title="券面额" required title-width="100px" custom-value-class="cell-left">
<view style="text-align: left">
<view class="inline-txt" style="margin-left: 0">满</view>
<wd-input
no-border
custom-style="display: inline-block; width: 70px; vertical-align: middle"
placeholder="请输入金额"
v-model="threshold"
name="threshold"
@change="handleThreshold"
/>
<view class="inline-txt">减</view>
<wd-input
no-border
custom-style="display: inline-block; width: 70px; vertical-align: middle"
placeholder="请输入金额"
v-model="price"
name="price"
@change="handlePrice"
/>
</view>
</wd-cell>
</wd-cell-group>
<wd-cell-group custom-class="group" title="时间和地址" border>
<wd-datetime-picker label="时间" label-width="100px" name="date" v-model="date" @confirm="handleDate" />
<wd-col-picker
label="地址"
label-width="100px"
name="address"
v-model="address"
:columns="area"
:column-change="areaChange"
@confirm="handleAddress"
/>
</wd-cell-group>
<wd-cell-group custom-class="group" title="其他信息" border>
<wd-input
label="活动细则"
label-width="100px"
type="textarea"
v-model="content"
:maxlength="300"
show-word-limit
placeholder="请输入活动细则信息"
clearable
name="content"
@change="handleContent"
/>
<wd-cell title="发货数量" center>
<wd-input-number v-model="count" name="count" @change="handleCount" />
</wd-cell>
<wd-cell title="这里显示的是多文字标题包含非常的文字" title-width="240px" center>
<wd-switch v-model="switchVal" name="switchVal" @change="handleSwitch" />
</wd-cell>
<wd-input
label="卡号"
label-width="100px"
name="cardId"
suffix-icon="camera"
placeholder="请输入卡号"
clearable
v-model="cardId"
@change="handleCardId"
/>
<wd-input label="手机号" label-width="100px" name="phone" placeholder="请输入手机号" clearable v-model="phone" @change="handlePhone" />
</wd-cell-group>
<view class="tip">
<wd-checkbox v-model="read" name="read" @change="handleRead" custom-label-class="label-class">
已阅读并同意
<text style="color: #4d80f0">《借款额度合同及相关授权》</text>
</wd-checkbox>
</view>
<view class="footer">
<button class="wd-button is-primary is-block is-round is-large" form-type="submit">提交</button>
</view>
</form>
</page-wraper>
</template>
<script setup lang="ts">
import { useToast, useMessage } from '@/uni_modules/wot-design-uni'
import { areaData } from '@/utils/area'
import { computed, ref } from 'vue'
const showAction = ref<boolean>(false)
const actions = ref<any[]>([])
const couponName = ref<string>('')
const couponNameErr = ref<boolean>(false)
const platform = ref<any>([])
const platformList = ref<any>([
{
value: '1',
label: '京东'
},
{
value: '2',
label: '开普勒'
},
{
value: '3',
label: '手Q'
},
{
value: '4',
label: '微信'
},
{
value: '5',
label: '1号店'
},
{
value: '6',
label: '十元街'
},
{
value: '7',
label: '京东极速版'
}
])
const promotion = ref<string>('1')
const promotionlist = ref<any[]>([
{
value: '1',
label: '满减'
},
{
value: '2',
label: '无门槛'
}
])
const threshold = ref<string>('')
const price = ref<string>('')
const date = ref<Date>(new Date())
const address = ref<any[]>([])
const count = ref<number>(1)
const area = ref<any[]>([
Object.keys(areaData[86]).map((key) => {
return {
value: key,
label: areaData[86][key]
}
})
])
const areaChange = ({ selectedItem, resolve, finish }) => {
if (areaData[selectedItem.value]) {
resolve(
Object.keys(areaData[selectedItem.value]).map((key) => {
return {
value: key,
label: areaData[selectedItem.value][key]
}
})
)
} else {
finish()
}
}
const content = ref<string>('')
const coun = ref<number>(1)
const read = ref<boolean>(false)
const switchVal = ref<boolean>(true)
const cardId = ref<string>('')
const phone = ref<string>('')
const toast = useToast()
const messageBox = useMessage()
function closeActions() {
showAction.value = false
}
function showActions() {
showAction.value = true
actions.value = [
{
name: '选项1'
},
{
name: '选项2'
},
{
name: '选项3',
subname: '描述信息'
}
]
}
function handleCouponName({ value }) {
console.log(value)
couponNameErr.value = false
}
function handlePlatform({ value }) {
console.log(value)
}
function handleThreshold({ value }) {
console.log(value)
}
function handlePrice({ value }) {
console.log(value)
}
function handleAddress({ value }) {
console.log(value)
}
function handleContent({ value }) {
console.log(value)
}
function handleCount({ value }) {
console.log(value)
}
function handleSwitch({ value }) {
console.log(value)
}
function handleRead({ value }) {
read.value = value
}
function handleCardId({ value }) {
console.log(value)
}
function handlePhone({ value }) {
console.log(value)
}
function formSubmit(event) {
console.log(event)
if (!couponName.value) {
toast.error('请填写优惠券名称')
return
}
messageBox.alert('提交成功')
}
function handleIconClick() {
toast.info('优惠券提示信息')
}
function handleDate({ value }) {
console.log(value)
}
</script>
<style lang="scss" scoped>
.wot-theme-dark {
.inline-txt {
color: $-dark-color;
}
}
.custom-value {
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
white-space: nowrap;
}
.inline-txt {
display: inline-block;
font-size: 14px;
margin: 0 8px;
color: rgba(0, 0, 0, 0.45);
vertical-align: middle;
}
:deep(.group) {
margin-top: 12px;
}
.tip {
margin: 10px 15px 21px;
color: #999;
font-size: 12px;
}
.footer {
padding: 0 25px 21px;
}
:deep(.label-class) {
color: #999 !important;
font-size: 12px !important;
}
</style>

20
src/pages/curtain/Index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view> <page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-button @click="handleClick1">关闭按钮在内部</wd-button> <wd-button @click="handleClick1">关闭按钮在内部</wd-button>
</demo-block> </demo-block>
@ -19,23 +19,23 @@
<wd-button @click="handleClick8">点击遮罩关闭</wd-button> <wd-button @click="handleClick8">点击遮罩关闭</wd-button>
</demo-block> </demo-block>
<wd-curtain :value="value1" :src="img" :to="link" @close="handleClose1" width="280"></wd-curtain> <wd-curtain :value="value1" :src="img" :to="link" @close="handleClose1" :width="280"></wd-curtain>
<wd-curtain :value="value2" :src="img" :to="link" close-position="top-left" width="200" @close="handleClose2"></wd-curtain> <wd-curtain :value="value2" :src="img" :to="link" close-position="top-left" :width="200" @close="handleClose2"></wd-curtain>
<wd-curtain :value="value3" :src="img" :to="link" close-position="top" width="200" @close="handleClose3"></wd-curtain> <wd-curtain :value="value3" :src="img" :to="link" close-position="top" :width="200" @close="handleClose3"></wd-curtain>
<wd-curtain :value="value4" :src="img" :to="link" close-position="top-right" width="240" @close="handleClose4"></wd-curtain> <wd-curtain :value="value4" :src="img" :to="link" close-position="top-right" :width="240" @close="handleClose4"></wd-curtain>
<wd-curtain :value="value5" :src="img" :to="link" close-position="bottom-left" width="240" @close="handleClose5"></wd-curtain> <wd-curtain :value="value5" :src="img" :to="link" close-position="bottom-left" :width="240" @close="handleClose5"></wd-curtain>
<wd-curtain :value="value6" :src="img" :to="link" close-position="bottom" width="240" @close="handleClose6"></wd-curtain> <wd-curtain :value="value6" :src="img" :to="link" close-position="bottom" :width="240" @close="handleClose6"></wd-curtain>
<wd-curtain :value="value7" :src="img" :to="link" close-position="bottom-right" width="240" @close="handleClose7"></wd-curtain> <wd-curtain :value="value7" :src="img" :to="link" close-position="bottom-right" :width="240" @close="handleClose7"></wd-curtain>
<wd-curtain <wd-curtain
:value="value8" :value="value8"
:src="img" :src="img"
:to="link" :to="link"
close-position="bottom-right" close-position="bottom-right"
width="240" :width="240"
@close="handleClose8" @close="handleClose8"
:close-on-click-modal="true" :close-on-click-modal="true"
></wd-curtain> ></wd-curtain>
</view> </page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'

2
src/pages/datetimePicker/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<wd-toast /> <wd-toast />
<demo-block transparent> <demo-block transparent>
<wd-cell-group border> <wd-cell-group border>
@ -30,6 +31,7 @@
<demo-block title="范围tab展示格式" transparent> <demo-block title="范围tab展示格式" transparent>
<wd-datetime-picker label="日期选择" v-model="value15" @confirm="handleConfirm15" :display-format-tab-label="displayFormatTabLabel" /> <wd-datetime-picker label="日期选择" v-model="value15" @confirm="handleConfirm15" :display-format-tab-label="displayFormatTabLabel" />
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'

2
src/pages/datetimePickerView/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<wd-toast /> <wd-toast />
<demo-block title="日期选择" transparent> <demo-block title="日期选择" transparent>
<wd-datetime-picker-view v-model="value1" @change="onChange1" /> <wd-datetime-picker-view v-model="value1" @change="onChange1" />
@ -23,6 +24,7 @@
<demo-block title="过滤选项" transparent> <demo-block title="过滤选项" transparent>
<wd-datetime-picker-view v-model="value6" :filter="filter" @change="onChange6" /> <wd-datetime-picker-view v-model="value6" :filter="filter" @change="onChange6" />
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'

4
src/pages/divider/Index.vue
View File

@ -1,19 +1,21 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-06-13 11:47:12 * @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-06-14 18:47:38 * @LastEditTime: 2023-08-07 20:19:49
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\pages\divider\Index.vue * @FilePath: \wot-design-uni\src\pages\divider\Index.vue
* 记得注释 * 记得注释
--> -->
<template> <template>
<page-wraper>
<demo-block title="基本用法" transparent> <demo-block title="基本用法" transparent>
<wd-divider>这是分割线</wd-divider> <wd-divider>这是分割线</wd-divider>
</demo-block> </demo-block>
<demo-block title="自定义颜色" transparent> <demo-block title="自定义颜色" transparent>
<wd-divider color="#4D80F0">自定义颜色</wd-divider> <wd-divider color="#4D80F0">自定义颜色</wd-divider>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup></script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

19
src/pages/dropMenu/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<view class="demo-body" @click="clickoutside"> <view class="demo-body" @click="clickoutside">
<demo-block title="基本用法" transparent> <demo-block title="基本用法" transparent>
<wd-drop-menu> <wd-drop-menu>
@ -21,7 +22,7 @@
</wd-drop-menu> </wd-drop-menu>
</demo-block> </demo-block>
<demo-block title="自定义菜单选项" transparent> <demo-block title="自定义菜单选项" transparent>
<view style="display: flex; background: #fff; text-align: center"> <view class="custom-menu">
<wd-drop-menu style="flex: 1; min-width: 0"> <wd-drop-menu style="flex: 1; min-width: 0">
<wd-drop-menu-item v-model="value4" :options="option1" @change="handleChange4" /> <wd-drop-menu-item v-model="value4" :options="option1" @change="handleChange4" />
</wd-drop-menu> </wd-drop-menu>
@ -43,6 +44,7 @@
</wd-drop-menu> </wd-drop-menu>
</demo-block> </demo-block>
</view> </view>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { clickOut } from '@/uni_modules/wot-design-uni' import { clickOut } from '@/uni_modules/wot-design-uni'
@ -60,12 +62,12 @@ const value6 = ref<number>(0)
const value7 = ref<number>(0) const value7 = ref<number>(0)
const value8 = ref<number>(0) const value8 = ref<number>(0)
const value9 = ref<number>(0) const value9 = ref<number>(0)
const option1 = ref<Record<string, any>>([ const option1 = ref<Record<string, any>[]>([
{ label: '全部商品', value: 0 }, { label: '全部商品', value: 0 },
{ label: '新款商品', value: 1, tip: '这是补充信息' }, { label: '新款商品', value: 1, tip: '这是补充信息' },
{ label: '这是比较长的筛选条件这是比较长的筛选条件', value: 2 } { label: '这是比较长的筛选条件这是比较长的筛选条件', value: 2 }
]) ])
const option2 = ref<Record<string, any>>([ const option2 = ref<Record<string, any>[]>([
{ label: '综合', value: 0 }, { label: '综合', value: 0 },
{ label: '销量', value: 1 }, { label: '销量', value: 1 },
{ label: '上架时间', value: 2 } { label: '上架时间', value: 2 }
@ -108,7 +110,18 @@ function confirm() {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.custom-menu {
background: $-dark-background2;
}
}
.demo-body { .demo-body {
height: 100vh; height: 100vh;
} }
.custom-menu {
display: flex;
background: #fff;
text-align: center;
}
</style> </style>

11
src/pages/form/Index.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<wd-message-box id="wd-message-box" /> <view>
<page-wraper>
<wd-message-box />
<wd-toast /> <wd-toast />
<form @submit="formSubmit"> <form @submit="formSubmit">
<wd-cell-group custom-class="group" title="基础信息" border> <wd-cell-group custom-class="group" title="基础信息" border>
@ -103,6 +105,8 @@
<button class="wd-button is-primary is-block is-round is-large" form-type="submit">提交</button> <button class="wd-button is-primary is-block is-round is-large" form-type="submit">提交</button>
</view> </view>
</form> </form>
</page-wraper>
</view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box' import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box'
@ -245,6 +249,11 @@ function handleDate({ value }) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.inline-txt {
color: $-dark-color3;
}
}
.inline-txt { .inline-txt {
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;

17
src/pages/grid/Index.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<wd-toast />
<view> <view>
<page-wraper>
<wd-toast />
<view class="grid">
<demo-block title="基本用法" transparent> <demo-block title="基本用法" transparent>
<wd-grid> <wd-grid>
<wd-grid-item icon="picture" text="文字" /> <wd-grid-item icon="picture" text="文字" />
@ -131,10 +133,12 @@
<demo-block title="提示信息" transparent> <demo-block title="提示信息" transparent>
<wd-grid> <wd-grid>
<wd-grid-item is-dot icon="goods" text="文字" /> <wd-grid-item is-dot icon="goods" text="文字" />
<wd-grid-item value="100" :max="99" icon="computer" text="文字" /> <wd-grid-item :value="100" :max="99" icon="computer" text="文字" />
</wd-grid> </wd-grid>
</demo-block> </demo-block>
</view> </view>
</page-wraper>
</view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
@ -149,6 +153,15 @@ function click() {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.grid {
:deep(.custom-item) {
color: #e2231a;
background: $-dark-background2;
}
}
}
:deep(.custom-item) { :deep(.custom-item) {
height: 80px !important; height: 80px !important;
color: #e2231a; color: #e2231a;

21
src/pages/icon/Index.vue
View File

@ -1,10 +1,14 @@
<template> <template>
<view>
<page-wraper>
<view class="icon-list"> <view class="icon-list">
<view v-for="(icon, index) in icons" :key="index" class="icon-item"> <view v-for="(icon, index) in icons" :key="index" class="icon-item">
<view><wd-icon :name="icon" size="22px" /></view> <view><wd-icon :name="icon" size="22px" custom-class="icon-item-class" /></view>
<view class="icon-item-name">{{ icon }}</view> <view class="icon-item-name">{{ icon }}</view>
</view> </view>
</view> </view>
</page-wraper>
</view>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
@ -75,9 +79,22 @@ const icons = ref([
]) ])
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.icon-list { .icon-list {
background: $-dark-background2;
:deep(.icon-item-class) {
color: $-dark-color;
}
}
.icon-item-name {
color: $-dark-color3;
}
}
.icon-list {
box-sizing: border-box;
display: flex; display: flex;
margin: 15px; padding: 15px;
flex-wrap: wrap; flex-wrap: wrap;
background: #fff; background: #fff;
} }

2
src/pages/img/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-img :width="100" :height="100" :src="joy" /> <wd-img :width="100" :height="100" :src="joy" />
<!-- 以组件位置为定位原点 --> <!-- 以组件位置为定位原点 -->
@ -16,6 +17,7 @@
<view class="center">{{ mode }}</view> <view class="center">{{ mode }}</view>
</view> </view>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { joy } from '../images/joy' import { joy } from '../images/joy'

20
src/pages/imgCropper/Index.vue
View File

@ -1,13 +1,5 @@
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-06-26 23:22:26
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\imgCropper\Index.vue
* 记得注释
-->
<template> <template>
<page-wraper>
<demo-block title="基本用法" style="text-align: center"> <demo-block title="基本用法" style="text-align: center">
<wd-img-cropper <wd-img-cropper
id="wd-img-cropper" id="wd-img-cropper"
@ -26,6 +18,7 @@
<view style="font-size: 14px">点击上传头像</view> <view style="font-size: 14px">点击上传头像</view>
</view> </view>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
@ -59,6 +52,15 @@ function handleCancel(event) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
:deep(.profile-img) {
border: 1px solid $-dark-border-color;
}
.img {
background-color: $-dark-background4;
}
}
.profile { .profile {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

25
src/pages/index/Index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<!--index.jxml--> <page-wraper>
<view class="page"> <view class="page">
<view class="page__hd"> <view class="page__hd">
<view class="page__title"> <view class="page__title">
@ -7,7 +7,8 @@
<view class="inline">Wot Design Uni</view> <view class="inline">Wot Design Uni</view>
</view> </view>
<view class="page__desc"> <view class="page__desc">
Wot Design Uni 是移动端 Vue 组件库 Wot Design 的 uni-app 版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建 uni-app 应用。 Wot Design Uni 是移动端 Vue 组件库 Wot Design 的 uni-app 版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建 uni-app
应用。
</view> </view>
</view> </view>
<view class="page__bd"> <view class="page__bd">
@ -31,6 +32,7 @@
</block> </block>
</view> </view>
</view> </view>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -56,6 +58,10 @@ const list = ref([
id: 'layout', id: 'layout',
name: 'Layout 布局' name: 'Layout 布局'
}, },
{
id: 'configProvider',
name: 'configProvider 全局配置'
},
{ {
id: 'popup', id: 'popup',
name: 'Popup 弹出层' name: 'Popup 弹出层'
@ -298,6 +304,21 @@ function kindToggle(id: string) {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.page__hd,
.kind-list__item {
background: $-dark-background2;
}
.title {
color: $-dark-color;
}
.page-name {
color: $-dark-color3;
}
.kind-list__img {
filter: invert(100%);
}
}
.page__hd { .page__hd {
padding: 40px 40px 30px; padding: 40px 40px 30px;
margin-bottom: 30px; margin-bottom: 30px;

17
src/pages/input/Index.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<view> <page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-input type="text" v-model="value" placeholder="请输入用户名" @change="handleChange" @blur="handleBlur" /> <wd-input type="text" v-model="value" placeholder="请输入用户名" @change="handleChange" @blur="handleBlur" />
</demo-block> </demo-block>
<demo-block title="禁用状态"> <demo-block title="禁用状态">
<wd-input type="text" v-model="value1" disabled="true" /> <wd-input type="text" v-model="value1" disabled />
</demo-block> </demo-block>
<demo-block title="只读状态"> <demo-block title="只读状态">
<wd-input type="text" v-model="value2" readonly /> <wd-input type="text" v-model="value2" readonly />
@ -22,11 +22,11 @@
<wd-input type="text" v-model="value6" prefix-icon="dong" suffix-icon="list" clearable @change="handleChange3" /> <wd-input type="text" v-model="value6" prefix-icon="dong" suffix-icon="list" clearable @change="handleChange3" />
</demo-block> </demo-block>
<demo-block title="字数限制"> <demo-block title="字数限制">
<wd-input type="text" v-model="value7" maxlength="20" show-word-limit /> <wd-input type="text" v-model="value7" :maxlength="20" show-word-limit />
</demo-block> </demo-block>
<demo-block title="取消底部边框，自定义使用"> <demo-block title="取消底部边框，自定义使用">
<wd-input v-model="value8" no-border placeholder="请输入价格" custom-style="display: inline-block; width: 70px; vertical-align: middle;" /> <wd-input v-model="value8" no-border placeholder="请输入价格" custom-style="display: inline-block; width: 70px; vertical-align: middle;" />
<text style="display: inline-block; vertical-align: middle; font-size: 14px">元</text> <text class="custom-txt" style="display: inline-block; vertical-align: middle; font-size: 14px">元</text>
</demo-block> </demo-block>
<demo-block title="textarea" transparent> <demo-block title="textarea" transparent>
<wd-input type="textarea" v-model="value9" placeholder="请填写评价" @blur="handleBlur" /> <wd-input type="textarea" v-model="value9" placeholder="请填写评价" @blur="handleBlur" />
@ -35,7 +35,7 @@
<wd-input type="textarea" v-model="value10" :maxlength="120" clearable show-word-limit /> <wd-input type="textarea" v-model="value10" :maxlength="120" clearable show-word-limit />
</demo-block> </demo-block>
<demo-block title="textarea 高度自适应"> <demo-block title="textarea 高度自适应">
<wd-input type="textarea" v-model="value11" auto-height="true" clearable></wd-input> <wd-input type="textarea" v-model="value11" auto-height clearable></wd-input>
</demo-block> </demo-block>
<demo-block title="cell 类型" transparent> <demo-block title="cell 类型" transparent>
<wd-cell-group border> <wd-cell-group border>
@ -53,7 +53,7 @@
<wd-input type="text" label="大尺寸" size="large" v-model="value19" placeholder="请输入..." /> <wd-input type="text" label="大尺寸" size="large" v-model="value19" placeholder="请输入..." />
</wd-cell-group> </wd-cell-group>
</demo-block> </demo-block>
</view> </page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
@ -96,6 +96,11 @@ function handleBlur(event) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.custom-txt {
color: $-dark-color;
}
}
.flex { .flex {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

2
src/pages/inputNumber/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-input-number v-model="value1" @change="handleChange1" /> <wd-input-number v-model="value1" @change="handleChange1" />
</demo-block> </demo-block>
@ -29,6 +30,7 @@
<demo-block title="允许空值，并设置 placeholder"> <demo-block title="允许空值，并设置 placeholder">
<wd-input-number v-model="value9" allow-null placeholder="不限" input-width="70px" @change="handleChange9" /> <wd-input-number v-model="value9" allow-null placeholder="不限" input-width="70px" @change="handleChange9" />
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'

11
src/pages/layout/Index.vue
View File

@ -1,13 +1,5 @@
<!--
* @Author: weisheng
* @Date: 2023-06-12 23:12:56
* @LastEditTime: 2023-06-12 23:21:34
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\layout\Layout.vue
* 记得注释
-->
<template> <template>
<page-wraper>
<demo-block title="基础用法"> <demo-block title="基础用法">
<wd-row> <wd-row>
<wd-col :span="24"><view class="bg-dark1">span: 24</view></wd-col> <wd-col :span="24"><view class="bg-dark1">span: 24</view></wd-col>
@ -45,6 +37,7 @@
<wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col> <wd-col :span="8"><view class="bg-dark">span: 8</view></wd-col>
</wd-row> </wd-row>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup></script>
<style lang="scss" scoped> <style lang="scss" scoped>

2
src/pages/loading/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<demo-block title="基本用法（适用于按钮加载状态和页面轻提示）"> <demo-block title="基本用法（适用于按钮加载状态和页面轻提示）">
<view class="flex"> <view class="flex">
<wd-loading custom-class="loading" /> <wd-loading custom-class="loading" />
@ -24,6 +25,7 @@
<wd-loading custom-class="loading" size="50px" /> <wd-loading custom-class="loading" size="50px" />
</view> </view>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup></script>
<style lang="scss" scoped> <style lang="scss" scoped>

14
src/pages/loadmore/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<view class="container"> <view class="container">
<view v-for="index in num" :key="index" class="list-item"> <view v-for="index in num" :key="index" class="list-item">
<image src="https://img10.360buyimg.com/jmadvertisement/jfs/t1/70325/36/14954/36690/5dcd3e3bEee5006e0/aed1ccf6d5ffc764.png" /> <image src="https://img10.360buyimg.com/jmadvertisement/jfs/t1/70325/36/14954/36690/5dcd3e3bEee5006e0/aed1ccf6d5ffc764.png" />
@ -6,12 +7,13 @@
</view> </view>
<wd-loadmore :state="state" @reload="loadmore" /> <wd-loadmore :state="state" @reload="loadmore" />
</view> </view>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app' import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { ref } from 'vue' import { ref } from 'vue'
const state = ref<string>('loading') const state = ref<any>('loading')
const num = ref<number>(0) const num = ref<number>(0)
const max = ref<number>(60) const max = ref<number>(60)
@ -37,6 +39,16 @@ function loadmore() {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.list-item {
background: $-dark-background2;
color: $-dark-color;
}
.list-item:after {
background: $-dark-border-color;
}
}
.list-item { .list-item {
position: relative; position: relative;
display: flex; display: flex;

4
src/pages/messageBox/Index.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<page-wraper>
<wd-message-box></wd-message-box> <wd-message-box></wd-message-box>
<wd-toast id="wd-toast"></wd-toast> <wd-toast></wd-toast>
<wd-message-box selector="wd-message-box-slot" use-slot> <wd-message-box selector="wd-message-box-slot" use-slot>
<wd-rate custom-class="custom-rate-class" v-model="value" /> <wd-rate custom-class="custom-rate-class" v-model="value" />
</wd-message-box> </wd-message-box>
@ -27,6 +28,7 @@
<demo-block title="使用wd-message-box组件，通过slot插入其他组件内容"> <demo-block title="使用wd-message-box组件，通过slot插入其他组件内容">
<wd-button @click="withSlot">custom</wd-button> <wd-button @click="withSlot">custom</wd-button>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box' import { useMessage } from '@/uni_modules/wot-design-uni/components/wd-message-box'

6
src/pages/noticeBar/Index.vue
View File

@ -1,14 +1,14 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-06-13 11:47:12 * @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-31 21:27:54 * @LastEditTime: 2023-08-07 20:24:04
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\pages\noticeBar\Index.vue * @FilePath: \wot-design-uni\src\pages\noticeBar\Index.vue
* 记得注释 * 记得注释
--> -->
<template> <template>
<view> <page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-notice-bar text="这是一条消息提示信息这是一条消息提示信息这是一条消息提示信息" prefix="warn-bold" /> <wd-notice-bar text="这是一条消息提示信息这是一条消息提示信息这是一条消息提示信息" prefix="warn-bold" />
</demo-block> </demo-block>
@ -57,7 +57,7 @@
background-color="#f0f9eb" background-color="#f0f9eb"
></wd-notice-bar> ></wd-notice-bar>
</demo-block> </demo-block>
</view> </page-wraper>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup></script>
<style lang="scss" scoped> <style lang="scss" scoped>

4
src/pages/pagination/Index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<view> <page-wraper>
<demo-block title="基本用法" transparent> <demo-block title="基本用法" transparent>
<wd-pagination v-model="page1" :total="total1" @change="handleChange1"></wd-pagination> <wd-pagination v-model="page1" :total="total1" @change="handleChange1"></wd-pagination>
</demo-block> </demo-block>
@ -9,7 +9,7 @@
<demo-block title="文字提示" transparent> <demo-block title="文字提示" transparent>
<wd-pagination v-model="page3" :total="total3" :page-size="pageSize3" @change="handleChange3" show-icon show-message></wd-pagination> <wd-pagination v-model="page3" :total="total3" :page-size="pageSize3" @change="handleChange3" show-icon show-message></wd-pagination>
</demo-block> </demo-block>
</view> </page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'

17
src/pages/picker/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<wd-toast /> <wd-toast />
<demo-block transparent> <demo-block transparent>
<wd-cell-group border> <wd-cell-group border>
@ -26,7 +27,7 @@
</demo-block> </demo-block>
<demo-block title="默认插槽" transparent> <demo-block title="默认插槽" transparent>
<view class="default-slot"> <view class="default-slot">
<view style="margin-bottom: 10px; color: rgba(0, 0, 0, 0.45)"> <view class="default-slot-txt">
选中值： 选中值：
<text style="color: #34d19d">{{ value8 }}</text> <text style="color: #34d19d">{{ value8 }}</text>
</view> </view>
@ -35,6 +36,7 @@
</wd-picker> </wd-picker>
</view> </view>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
@ -146,8 +148,21 @@ function handleConfirm({ value }) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.default-slot {
background: $-dark-background2;
}
.default-slot-txt {
color: $-dark-color3;
}
}
.default-slot { .default-slot {
background: #fff; background: #fff;
padding: 15px; padding: 15px;
} }
.default-slot-txt {
margin-bottom: 10px;
color: rgba(0, 0, 0, 0.45);
}
</style> </style>

2
src/pages/pickerView/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<wd-toast /> <wd-toast />
<demo-block :title="`基本用法，数值: ${value1}`" transparent> <demo-block :title="`基本用法，数值: ${value1}`" transparent>
<wd-picker-view v-model="value1" :columns="columns1" @change="(e) => onChange(1, e)" /> <wd-picker-view v-model="value1" :columns="columns1" @change="(e) => onChange(1, e)" />
@ -19,6 +20,7 @@
<demo-block :title="`多级联动，数值: [${value5}]`" transparent> <demo-block :title="`多级联动，数值: [${value5}]`" transparent>
<wd-picker-view v-model="value5" :columns="columns5" :column-change="onChangeDistrict" @change="(e) => onChange(5, e)" /> <wd-picker-view v-model="value5" :columns="columns5" :column-change="onChangeDistrict" @change="(e) => onChange(5, e)" />
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'

2
src/pages/popover/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<wd-toast /> <wd-toast />
<view @click="clickOutside" class="wrapper"> <view @click="clickOutside" class="wrapper">
@ -29,6 +30,7 @@
</view> </view>
</demo-block> </demo-block>
</view> </view>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { clickOut, useToast } from '@/uni_modules/wot-design-uni' import { clickOut, useToast } from '@/uni_modules/wot-design-uni'

23
src/pages/popup/Index.vue
View File

@ -1,5 +1,15 @@
<!--
* @Author: weisheng
* @Date: 2023-08-01 11:12:05
* @LastEditTime: 2023-08-15 11:54:31
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\popup\Index.vue
* 记得注释
-->
<template> <template>
<view> <view>
<page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-button @click="handleClick1">弹出层</wd-button> <wd-button @click="handleClick1">弹出层</wd-button>
</demo-block> </demo-block>
@ -13,12 +23,13 @@
<wd-button @click="handleClick6">关闭按钮</wd-button> <wd-button @click="handleClick6">关闭按钮</wd-button>
</demo-block> </demo-block>
<wd-popup v-model="show1" custom-style="padding: 30px 40px;" @close="handleClose1">内容</wd-popup> <wd-popup v-model="show1" custom-style="padding: 30px 40px;" @close="handleClose1"><text class="custom-txt">内容</text></wd-popup>
<wd-popup v-model="show2" position="top" custom-style="height: 200px;" @close="handleClose2"></wd-popup> <wd-popup v-model="show2" position="top" custom-style="height: 200px;" @close="handleClose2"></wd-popup>
<wd-popup v-model="show3" position="right" custom-style="width: 200px;" @close="handleClose3"></wd-popup> <wd-popup v-model="show3" position="right" custom-style="width: 200px;" @close="handleClose3"></wd-popup>
<wd-popup v-model="show4" position="bottom" custom-style="height: 200px;" @close="handleClose4"></wd-popup> <wd-popup v-model="show4" position="bottom" custom-style="height: 200px;" @close="handleClose4"></wd-popup>
<wd-popup v-model="show5" position="left" custom-style="width: 200px;" @close="handleClose5"></wd-popup> <wd-popup v-model="show5" position="left" custom-style="width: 200px;" @close="handleClose5"></wd-popup>
<wd-popup v-model="show6" position="bottom" closable custom-style="height: 200px;" @close="handleClose6"></wd-popup> <wd-popup v-model="show6" position="bottom" closable custom-style="height: 200px;" @close="handleClose6"></wd-popup>
</page-wraper>
</view> </view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -72,4 +83,14 @@ function handleClose6() {
:deep(button) { :deep(button) {
margin: 0 10px 10px 0; margin: 0 10px 10px 0;
} }
.wot-theme-dark {
.custom-txt {
color: $-dark-color;
}
}
.custom-txt {
color: black;
}
</style> </style>

2
src/pages/progress/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-progress :percentage="30" /> <wd-progress :percentage="30" />
</demo-block> </demo-block>
@ -20,6 +21,7 @@
<wd-progress :percentage="100" :color="['#00c740', '#ffb300', '#e2231a', '#0083ff']" /> <wd-progress :percentage="100" :color="['#00c740', '#ffb300', '#e2231a', '#0083ff']" />
<wd-progress :percentage="percentage" :color="colorObject" /> <wd-progress :percentage="percentage" :color="colorObject" />
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'

2
src/pages/radio/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<view> <view>
1、内容项在3项以内，且有比较重要的信息备选（如付款类型选择等）可考虑采用圆形组件。因为会跟圆形复选框容易混淆，且会造成当前表单页页面结构不统一， 1、内容项在3项以内，且有比较重要的信息备选（如付款类型选择等）可考虑采用圆形组件。因为会跟圆形复选框容易混淆，且会造成当前表单页页面结构不统一，
@ -107,6 +108,7 @@
<wd-radio :value="3">商家智能</wd-radio> <wd-radio :value="3">商家智能</wd-radio>
</wd-radio-group> </wd-radio-group>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'

4
src/pages/rate/Index.vue
View File

@ -1,13 +1,14 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-07-29 17:03:39 * @Date: 2023-07-29 17:03:39
* @LastEditTime: 2023-08-01 23:46:20 * @LastEditTime: 2023-08-07 20:28:16
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\pages\rate\Index.vue * @FilePath: \wot-design-uni\src\pages\rate\Index.vue
* 记得注释 * 记得注释
--> -->
<template> <template>
<page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-rate v-model="value1" @change="changeValue1" /> <wd-rate v-model="value1" @change="changeValue1" />
</demo-block> </demo-block>
@ -40,6 +41,7 @@
<demo-block title="修改size、space"> <demo-block title="修改size、space">
<wd-rate v-model="value7" space="10px" size="30px" /> <wd-rate v-model="value7" space="10px" size="30px" />
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'

7
src/pages/resize/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<demo-block title="基础用法"> <demo-block title="基础用法">
<wd-resize @resize="handleResize"> <wd-resize @resize="handleResize">
<view :style="`background: #4d80f0; width: ${width};height: ${height}`"></view> <view :style="`background: #4d80f0; width: ${width};height: ${height}`"></view>
@ -40,6 +41,7 @@
{{ sizeLeft }} {{ sizeLeft }}
</view> </view>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onReady } from '@dcloudio/uni-app' import { onReady } from '@dcloudio/uni-app'
@ -82,6 +84,11 @@ function handleResize(detail: Record<string, string | number>) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.tip-item {
color: $-dark-color;
}
}
.tip-item { .tip-item {
margin-top: 15px; margin-top: 15px;
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);

25
src/pages/search/Index.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<view @click="clickoutside">
<wd-toast /> <wd-toast />
<page-wraper>
<demo-block title="基本用法" transparent> <demo-block title="基本用法" transparent>
<wd-search v-model="value1" @search="search" @change="change" @cancel="cancel" @clear="clear" /> <wd-search v-model="value1" @search="search" @change="change" @cancel="cancel" @clear="clear" />
</demo-block> </demo-block>
@ -20,7 +22,7 @@
<view style="padding: 0 15px; margin: 10px 0; font-size: 13px">自定义左侧插槽</view> <view style="padding: 0 15px; margin: 10px 0; font-size: 13px">自定义左侧插槽</view>
<wd-search v-model="value3"> <wd-search v-model="value3">
<template #prefix> <template #prefix>
<wd-popover mode="menu" :content="menu" @menuclick="changeSearchType"> <wd-popover v-model="showPopover" mode="menu" :content="menu" @menuclick="changeSearchType">
<view class="search-type"> <view class="search-type">
<text>{{ searchType }}</text> <text>{{ searchType }}</text>
<wd-icon class="icon-arrow" name="fill-arrow-down"></wd-icon> <wd-icon class="icon-arrow" name="fill-arrow-down"></wd-icon>
@ -37,10 +39,17 @@
<demo-block title="设置最大长度" transparent> <demo-block title="设置最大长度" transparent>
<wd-search v-model="value2" :maxlength="4" /> <wd-search v-model="value2" :maxlength="4" />
</demo-block> </demo-block>
</page-wraper>
</view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
import { clickOut } from '@/uni_modules/wot-design-uni'
function clickoutside() {
clickOut.closeOutside()
}
const showPopover = ref<boolean>(false)
const value1 = ref<string>('') const value1 = ref<string>('')
const value2 = ref<string>('初始文案') const value2 = ref<string>('初始文案')
const value3 = ref<string>('') const value3 = ref<string>('')
@ -76,6 +85,20 @@ function changeSearchType({ item, index }) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.search-type {
color: #f5f5f5;
}
.search-type::after {
color: #f5f5f5;
}
.search-type .icon-arrow {
color: #f5f5f5;
}
}
.search-type { .search-type {
position: relative; position: relative;
height: 30px; height: 30px;

6
src/pages/selectPicker/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<wd-toast /> <wd-toast />
<view style="margin: 20px 0"> <view style="margin: 20px 0">
<wd-cell-group border> <wd-cell-group border>
@ -34,12 +35,13 @@
</wd-select-picker> </wd-select-picker>
</view> </view>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
import { ref } from 'vue' import { ref } from 'vue'
const columns1 = ref<Record<string, any>>([ const columns1 = ref<Record<string, any>[]>([
{ {
value: '101', value: '101',
label: '男装' label: '男装'
@ -89,7 +91,7 @@ const columns1 = ref<Record<string, any>>([
label: '电脑办公' label: '电脑办公'
} }
]) ])
const columns2 = ref<Record<string, any>>([ const columns2 = ref<Record<string, any>[]>([
{ {
value: '101', value: '101',
label: '男装', label: '男装',

2
src/pages/slider/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<demo-block title="基础用法"> <demo-block title="基础用法">
<wd-slider v-model="value1" /> <wd-slider v-model="value1" />
</demo-block> </demo-block>
@ -14,6 +15,7 @@
<demo-block title="双向滑块"> <demo-block title="双向滑块">
<wd-slider v-model="value6" /> <wd-slider v-model="value6" />
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'

2
src/pages/sortButton/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<demo-block title="基础用法"> <demo-block title="基础用法">
<wd-sort-button v-model="value1" title="价格" @change="handleChange1" /> <wd-sort-button v-model="value1" title="价格" @change="handleChange1" />
</demo-block> </demo-block>
@ -14,6 +15,7 @@
<demo-block title="不展示下划线（当只有一个排序按钮时，应取消展示下划线）"> <demo-block title="不展示下划线（当只有一个排序按钮时，应取消展示下划线）">
<wd-sort-button v-model="value4" title="价格" :line="false" @change="handleChange4" /> <wd-sort-button v-model="value4" title="价格" :line="false" @change="handleChange4" />
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'

2
src/pages/statusTip/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<demo-block title="搜索无结果"> <demo-block title="搜索无结果">
<wd-status-tip type="search" tip="当前搜索无结果" /> <wd-status-tip type="search" tip="当前搜索无结果" />
</demo-block> </demo-block>
@ -26,6 +27,7 @@
<demo-block title="已订阅全部消息"> <demo-block title="已订阅全部消息">
<wd-status-tip type="message" tip="已订阅全部消息" /> <wd-status-tip type="message" tip="已订阅全部消息" />
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup></script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

13
src/pages/steps/Index.vue
View File

@ -1,14 +1,5 @@
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-14 11:37:57
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\steps\Index.vue
* 记得注释
-->
<template> <template>
<view> <page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-steps :active="0"> <wd-steps :active="0">
<wd-step></wd-step> <wd-step></wd-step>
@ -61,7 +52,7 @@
<wd-step title="步骤3" /> <wd-step title="步骤3" />
</wd-steps> </wd-steps>
</demo-block> </demo-block>
</view> </page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'

21
src/pages/sticky/Index.vue
View File

@ -1,13 +1,14 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-06-13 11:47:12 * @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-05 13:29:17 * @LastEditTime: 2023-08-14 21:51:11
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\pages\sticky\Index.vue * @FilePath: \wot-design-uni\src\pages\sticky\Index.vue
* 记得注释 * 记得注释
--> -->
<template> <template>
<page-wraper>
<view style="height: 250vh"> <view style="height: 250vh">
<view class="demo-block"> <view class="demo-block">
<view class="demo-title">基本用法</view> <view class="demo-title">基本用法</view>
@ -31,7 +32,7 @@
<view class="demo-title">相对容器</view> <view class="demo-title">相对容器</view>
<view class="demo-container"> <view class="demo-container">
<wd-sticky-box> <wd-sticky-box>
<view style="height: 120px; width: 100vw; background-color: #ffffff"> <view class="custom-container">
<wd-sticky custom-style="margin-left: 220px"> <wd-sticky custom-style="margin-left: 220px">
<wd-button type="warning">相对容器</wd-button> <wd-button type="warning">相对容器</wd-button>
</wd-sticky> </wd-sticky>
@ -54,7 +55,7 @@
<view class="demo-title">相对容器+吸顶距离</view> <view class="demo-title">相对容器+吸顶距离</view>
<view class="demo-container"> <view class="demo-container">
<wd-sticky-box> <wd-sticky-box>
<view style="height: 120px; width: 100vw; background-color: #ffffff"> <view class="custom-container">
<wd-sticky :offset-top="150"> <wd-sticky :offset-top="150">
<wd-button type="warning">相对容器+吸顶距离</wd-button> <wd-button type="warning">相对容器+吸顶距离</wd-button>
</wd-sticky> </wd-sticky>
@ -63,6 +64,7 @@
</view> </view>
</view> </view>
</view> </view>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onShow } from '@dcloudio/uni-app' import { onShow } from '@dcloudio/uni-app'
@ -80,10 +82,21 @@ onShow(() => {
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.custom-container {
background: $-dark-background2;
}
}
.demo-block { .demo-block {
margin: 15px 0; padding: 15px 0;
color: #666; color: #666;
} }
.custom-container {
height: 120px;
width: 100vw;
background-color: #ffffff;
}
.is-white { .is-white {
background: #fff; background: #fff;
} }

7
src/pages/swipeAction/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<wd-toast /> <wd-toast />
<view @click.stop="clickoutside"> <view @click.stop="clickoutside">
@ -98,6 +99,7 @@
</wd-swipe-action> </wd-swipe-action>
</demo-block> </demo-block>
</view> </view>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'
@ -132,6 +134,11 @@ function handleAction(action: string) {
function noop() {} function noop() {}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wot-theme-dark {
.button-group {
background: $-dark-background2;
}
}
.action { .action {
height: 100%; height: 100%;
} }

22
src/pages/switch/Index.vue
View File

@ -1,23 +1,6 @@
<!--
* @Author: weisheng
* @Date: 2023-08-01 11:12:05
* @LastEditTime: 2023-08-02 13:14:32
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\switch\Index.vue
* 记得注释
-->
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-03 16:23:26
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\switch\Index.vue
* 记得注释
-->
<template> <template>
<wd-message-box id="wd-message-box"></wd-message-box> <page-wraper>
<wd-message-box></wd-message-box>
<view> <view>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-switch v-model="checked1" @change="handleChange1" /> <wd-switch v-model="checked1" @change="handleChange1" />
@ -42,6 +25,7 @@
<wd-switch v-model="checked7" :before-change="beforeChange" @change="handleChange5" /> <wd-switch v-model="checked7" :before-change="beforeChange" @change="handleChange5" />
</demo-block> </demo-block>
</view> </view>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useMessage } from '@/uni_modules/wot-design-uni' import { useMessage } from '@/uni_modules/wot-design-uni'

2
src/pages/tabs/Index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<page-wraper>
<wd-toast /> <wd-toast />
<demo-block title="基本用法" transparent> <demo-block title="基本用法" transparent>
<wd-tabs v-model="tab1" @change="handleChange"> <wd-tabs v-model="tab1" @change="handleChange">
@ -69,6 +70,7 @@
</block> </block>
</wd-tabs> </wd-tabs>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'

24
src/pages/tag/Index.vue
View File

@ -1,4 +1,6 @@
<template> <template>
<view>
<page-wraper>
<demo-block title="基本用法"> <demo-block title="基本用法">
<view> <view>
<wd-tag custom-class="space">标签</wd-tag> <wd-tag custom-class="space">标签</wd-tag>
@ -70,19 +72,37 @@
<demo-block title="可关闭"> <demo-block title="可关闭">
<view> <view>
<wd-tag v-for="(tag, index) in tags" :key="index" custom-class="space" round closable @click="handleClick(index)" @close="handleClose(index)"> <wd-tag
v-for="(tag, index) in tags"
:key="index"
custom-class="space"
round
closable
@click="handleClick(index)"
@close="handleClose(index)"
>
{{ tag.value }} {{ tag.value }}
</wd-tag> </wd-tag>
</view> </view>
</demo-block> </demo-block>
<demo-block title="新增标签"> <demo-block title="新增标签">
<view> <view>
<wd-tag v-for="(tag, index) in dynamicTags" :key="index" custom-class="space" round closable :data-index="index" @close="handleClose1(index)"> <wd-tag
v-for="(tag, index) in dynamicTags"
:key="index"
custom-class="space"
round
closable
:data-index="index"
@close="handleClose1(index)"
>
{{ tag }} {{ tag }}
</wd-tag> </wd-tag>
<wd-tag custom-class="space" round dynamic @confirm="handleConfirm"></wd-tag> <wd-tag custom-class="space" round dynamic @confirm="handleConfirm"></wd-tag>
</view> </view>
</demo-block> </demo-block>
</page-wraper>
</view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'

4
src/pages/toast/Index.vue
View File

@ -1,4 +1,6 @@
<template> <template>
<view>
<page-wraper>
<wd-toast /> <wd-toast />
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-button @click="showToast">toast</wd-button> <wd-button @click="showToast">toast</wd-button>
@ -18,6 +20,8 @@
<wd-button @click="showLoadingToast">Loading加载</wd-button> <wd-button @click="showLoadingToast">Loading加载</wd-button>
<wd-button @click="showLoadingToast2">ring类型loading</wd-button> <wd-button @click="showLoadingToast2">ring类型loading</wd-button>
</demo-block> </demo-block>
</page-wraper>
</view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni' import { useToast } from '@/uni_modules/wot-design-uni'

13
src/pages/tooltip/Index.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<view>
<wd-toast /> <wd-toast />
<page-wraper>
<view @click.stop="clickOutside"> <view @click.stop="clickOutside">
<demo-block title="基本用法"> <demo-block title="基本用法">
<view class="top"> <view class="top">
@ -17,7 +19,7 @@
<wd-tooltip v-model="show4" placement="right-start" content="right-start 提示文字" @change="handleChange4"> <wd-tooltip v-model="show4" placement="right-start" content="right-start 提示文字" @change="handleChange4">
<wd-button :round="false">right-start</wd-button> <wd-button :round="false">right-start</wd-button>
</wd-tooltip> </wd-tooltip>
<wd-tooltip v-model="show5" placement="right" content="right 提示文字" style="margin: 20px 0" @change="handleChange5"> <wd-tooltip v-model="show5" placement="right" content="right 提示文字" customStyle="margin: 20px 0" @change="handleChange5">
<wd-button :round="false">right</wd-button> <wd-button :round="false">right</wd-button>
</wd-tooltip> </wd-tooltip>
<wd-tooltip v-model="show6" placement="right-end" content="right-end 提示文字" @change="handleChange6"> <wd-tooltip v-model="show6" placement="right-end" content="right-end 提示文字" @change="handleChange6">
@ -31,7 +33,7 @@
<wd-icon name="setting" /> <wd-icon name="setting" />
</wd-button> </wd-button>
</wd-tooltip> </wd-tooltip>
<wd-tooltip v-model="show8" placement="left" content="left 提示文字" style="margin: 20px 0" @change="handleChange8"> <wd-tooltip v-model="show8" placement="left" content="left 提示文字" customStyle="margin: 20px 0" @change="handleChange8">
<wd-button :round="false">left</wd-button> <wd-button :round="false">left</wd-button>
</wd-tooltip> </wd-tooltip>
<wd-tooltip v-model="show9" placement="left-end" content="left-end 提示文字" @change="handleChange9"> <wd-tooltip v-model="show9" placement="left-end" content="left-end 提示文字" @change="handleChange9">
@ -72,7 +74,9 @@
</view> </view>
</demo-block> </demo-block>
<demo-block title="控制显隐"> <demo-block title="控制显隐">
<wd-button plain @click="control" size="small" class="button-control">{{ show15 ? '关闭' : '打开' }}</wd-button> <view @click.stop="control">
<wd-button plain size="small" class="button-control">{{ show15 ? '关闭' : '打开' }}</wd-button>
</view>
<view class="demo-left demo-control"> <view class="demo-left demo-control">
<wd-tooltip placement="top" content="控制显隐" v-model="show15"> <wd-tooltip placement="top" content="控制显隐" v-model="show15">
<wd-button :round="false">top</wd-button> <wd-button :round="false">top</wd-button>
@ -94,6 +98,8 @@
</view> </view>
</demo-block> </demo-block>
</view> </view>
</page-wraper>
</view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { clickOut } from '@/uni_modules/wot-design-uni' import { clickOut } from '@/uni_modules/wot-design-uni'
@ -122,6 +128,7 @@ const content = ref<string>('显示内容')
const toast = useToast() const toast = useToast()
function control() { function control() {
show15.value = !show15.value
// this.setData({ show15: !this.data.show15 }) // this.setData({ show15: !this.data.show15 })
} }
function onShow() { function onShow() {

4
src/pages/transition/Index.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<view> <view>
<page-wraper>
<demo-block title="Fade 动画"> <demo-block title="Fade 动画">
<wd-button @click="fade">fade</wd-button> <wd-button @click="fade">fade</wd-button>
<wd-button @click="fadeUp">fade-up</wd-button> <wd-button @click="fadeUp">fade-up</wd-button>
@ -33,13 +34,14 @@
leave-to-class="custom-leave-to" leave-to-class="custom-leave-to"
custom-class="block" custom-class="block"
/> />
</page-wraper>
</view> </view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
const show = ref<boolean>(false) const show = ref<boolean>(false)
const name = ref<string>('') const name = ref<any>('')
const customShow = ref<boolean>(false) const customShow = ref<boolean>(false)
function fade() { function fade() {
transition('fade') transition('fade')

31
src/pages/upload/Index.vue
View File

@ -1,14 +1,6 @@
<!--
* @Author: weisheng
* @Date: 2023-06-13 11:47:12
* @LastEditTime: 2023-07-14 12:40:09
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\pages\upload\Index.vue
* 记得注释
-->
<template> <template>
<wd-message-box id="wd-message-box"></wd-message-box> <page-wraper>
<wd-message-box></wd-message-box>
<wd-toast id="wd-toast"></wd-toast> <wd-toast id="wd-toast"></wd-toast>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-upload :file-list="fileList1" :action="action" @change="handleChange1"></wd-upload> <wd-upload :file-list="fileList1" :action="action" @change="handleChange1"></wd-upload>
@ -49,6 +41,7 @@
<demo-block title="选择文件前置处理"> <demo-block title="选择文件前置处理">
<wd-upload :file-list="fileList10" :action="action" @change="handleChange10" :before-choose="beforeChoose"></wd-upload> <wd-upload :file-list="fileList10" :action="action" @change="handleChange10" :before-choose="beforeChoose"></wd-upload>
</demo-block> </demo-block>
</page-wraper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useToast, useMessage } from '@/uni_modules/wot-design-uni' import { useToast, useMessage } from '@/uni_modules/wot-design-uni'
@ -65,15 +58,15 @@ const fileList2 = ref<any[]>([
url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg' url: 'https://img12.360buyimg.com//n0/jfs/t1/29118/6/4823/55969/5c35c16bE7c262192/c9fdecec4b419355.jpg'
} }
]) ])
const fileList3 = ref<string[]>([]) const fileList3 = ref<Record<string, any>[]>([])
const fileList4 = ref<string[]>([]) const fileList4 = ref<Record<string, any>[]>([])
const fileList5 = ref<string[]>([]) const fileList5 = ref<Record<string, any>[]>([])
const fileList6 = ref<string[]>([]) const fileList6 = ref<Record<string, any>[]>([])
const fileList7 = ref<string[]>([]) const fileList7 = ref<Record<string, any>[]>([])
const fileList8 = ref<string[]>([]) const fileList8 = ref<Record<string, any>[]>([])
const fileList9 = ref<string[]>([]) const fileList9 = ref<Record<string, any>[]>([])
const fileList10 = ref<string[]>([]) const fileList10 = ref<Record<string, any>[]>([])
const fileList11 = ref<string[]>([]) const fileList11 = ref<Record<string, any>[]>([])
const messageBox = useMessage() const messageBox = useMessage()
const toast = useToast() const toast = useToast()

90
src/static/touch-emulator.js Normal file
View File

@ -0,0 +1,90 @@
/**
* Minified by jsDelivr using Terser v5.14.1.
* Original file: /npm/@vant/touch-emulator@1.4.0/dist/index.js
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
!(function () {
if ('undefined' != typeof window) {
var e,
t = 'ontouchstart' in window
document.createTouch ||
(document.createTouch = function (e, t, o, u, c, i, r) {
return new n(t, o, { pageX: u, pageY: c, screenX: i, screenY: r, clientX: u - window.pageXOffset, clientY: c - window.pageYOffset }, 0, 0)
}),
document.createTouchList ||
(document.createTouchList = function () {
for (var e = u(), t = 0; t < arguments.length; t++) e[t] = arguments[t]
return (e.length = arguments.length), e
}),
Element.prototype.matches || (Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector),
Element.prototype.closest ||
(Element.prototype.closest = function (e) {
var t = this
do {
if (t.matches(e)) return t
t = t.parentElement || t.parentNode
} while (null !== t && 1 === t.nodeType)
return null
})
var n = function (e, t, n, o, u) {
;(o = o || 0),
(u = u || 0),
(this.identifier = t),
(this.target = e),
(this.clientX = n.clientX + o),
(this.clientY = n.clientY + u),
(this.screenX = n.screenX + o),
(this.screenY = n.screenY + u),
(this.pageX = n.pageX + o),
(this.pageY = n.pageY + u)
},
o = !1
;(s.multiTouchOffset = 75), t || new s()
}
function u() {
var e = []
return (
(e.item = function (e) {
return this[e] || null
}),
(e.identifiedTouch = function (e) {
return this[e + 1] || null
}),
e
)
}
function c(t) {
return function (n) {
var u, c, s
;('mousedown' === n.type && (o = !0), 'mouseup' === n.type && (o = !1), 'mousemove' !== n.type || o) &&
(('mousedown' === n.type || !e || (e && !e.dispatchEvent)) && (e = n.target),
null == e.closest('[data-no-touch-simulate]') &&
((u = t),
(c = n),
(s = document.createEvent('Event')).initEvent(u, !0, !0),
(s.altKey = c.altKey),
(s.ctrlKey = c.ctrlKey),
(s.metaKey = c.metaKey),
(s.shiftKey = c.shiftKey),
(s.touches = r(c)),
(s.targetTouches = r(c)),
(s.changedTouches = i(c)),
e.dispatchEvent(s)),
'mouseup' === n.type && (e = null))
}
}
function i(t) {
var o = u()
return o.push(new n(e, 1, t, 0, 0)), o
}
function r(e) {
return 'mouseup' === e.type ? u() : i(e)
}
function s() {
window.addEventListener('mousedown', c('touchstart'), !0),
window.addEventListener('mousemove', c('touchmove'), !0),
window.addEventListener('mouseup', c('touchend'), !0)
}
})()
//# sourceMappingURL=/sm/09d4343b52fa585c57a1a2c7344e01acc2c39070e2053d5939820b8f1140409d.map

15
src/store/index.ts Normal file
View File

@ -0,0 +1,15 @@
import { ref } from 'vue'
const isDark = ref<boolean>(false)
function setDark(dark: boolean) {
isDark.value = dark
process.env.NODE_ENV === 'development' && uni.setStorageSync('isDark', dark)
}
export function useDark() {
process.env.NODE_ENV === 'development'
? setDark(Boolean(uni.getStorageSync('isDark')))
: localStorage.getItem('vitepress-theme-appearance') === 'dark'
return { isDark, setDark }
}

18
src/theme.json Normal file
View File

@ -0,0 +1,18 @@
{
"dark": {
"navBgColor": "#292929",
"navTxtStyle": "white",
"bgColor": "#000",
"bgTxtStyle": "light",
"bgColorTop": "#000",
"bgColorBottom": "#000"
},
"light": {
"navBgColor": "#FFF",
"navTxtStyle": "black",
"bgColor": "#F8F8F8",
"bgTxtStyle": "dark",
"bgColorTop": "#F8F8F8",
"bgColorBottom": "#F8F8F8"
}
}

14
src/uni.scss
View File

@ -1 +1,13 @@
/* 暗黑模式 */
$-dark-background: #131313 !default;
$-dark-background2: #1b1b1b !default;
$-dark-background3: #141414 !default;
$-dark-background4: #323233 !default;
$-dark-background5: #646566 !default;
$-dark-background6: #380e08 !default;
$-dark-background7: #707070 !default;
$-dark-color: #ffffff !default;
$-dark-color2: #f2270c !default;
$-dark-color3: rgba(232, 230, 227, 0.8) !default;
$-dark-color-gray: #595959 !default;
$-dark-border-color:var(--wot-dark-border-color, #3a3a3c) !default;

16
src/uni_modules/wot-design-uni/components/common/abstracts/_mixin.scss
View File

@ -213,28 +213,28 @@
border-right: $size solid transparent; border-right: $size solid transparent;
border-top: $size solid $bg; border-top: $size solid $bg;
transform: translateX(-50%); transform: translateX(-50%);
bottom: -$size; bottom: calc(-1 * $size)
} }
@include e(arrow-up) { @include e(arrow-up) {
border-left: $size solid transparent; border-left: $size solid transparent;
border-right: $size solid transparent; border-right: $size solid transparent;
border-bottom: $size solid $bg; border-bottom: $size solid $bg;
transform: translateX(-50%); transform: translateX(-50%);
top: -$size; top: calc(-1 * $size)
} }
@include e(arrow-left) { @include e(arrow-left) {
border-top: $size solid transparent; border-top: $size solid transparent;
border-bottom: $size solid transparent; border-bottom: $size solid transparent;
border-right: $size solid $bg; border-right: $size solid $bg;
transform: translateY(-50%); transform: translateY(-50%);
left: -$size; left: calc(-1 * $size)
} }
@include e(arrow-right) { @include e(arrow-right) {
border-top: $size solid transparent; border-top: $size solid transparent;
border-bottom: $size solid transparent; border-bottom: $size solid transparent;
border-left: $size solid $bg; border-left: $size solid $bg;
transform: translateY(-50%); transform: translateY(-50%);
right: -$size; right: calc(-1 * $size)
} }
} }
@ -263,7 +263,7 @@
height: $size; height: $size;
background-color: $bg; background-color: $bg;
position: absolute; position: absolute;
bottom: - calc($size / 2); bottom: calc(-1 * $size / 2);
transform: rotateZ(45deg); transform: rotateZ(45deg);
box-shadow: $box-shadow; box-shadow: $box-shadow;
} }
@ -276,7 +276,7 @@
height: $size; height: $size;
background-color: $bg; background-color: $bg;
position: absolute; position: absolute;
top: - calc($size / 2); top: calc(-1 * $size / 2);
transform: rotateZ(45deg); transform: rotateZ(45deg);
box-shadow: $box-shadow; box-shadow: $box-shadow;
} }
@ -289,7 +289,7 @@
height: $size; height: $size;
background-color: $bg; background-color: $bg;
position: absolute; position: absolute;
left: - calc($size / 2); left: calc(-1 * $size / 2);
transform: rotateZ(45deg); transform: rotateZ(45deg);
box-shadow: $box-shadow; box-shadow: $box-shadow;
} }
@ -302,7 +302,7 @@
height: $size; height: $size;
background-color: $bg; background-color: $bg;
position: absolute; position: absolute;
right: - calc($size / 2); right: calc(-1 * $size / 2);
transform: rotateZ(45deg); transform: rotateZ(45deg);
box-shadow: $box-shadow; box-shadow: $box-shadow;
} }

1279
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
View File

File diff suppressed because it is too large Load Diff

45
src/uni_modules/wot-design-uni/components/wd-action-sheet/index.scss
View File

@ -1,19 +1,62 @@
@import '../common/abstracts/variable'; @import '../common/abstracts/variable';
@import '../common/abstracts/mixin'; @import '../common/abstracts/mixin';
.wot-theme-dark {
@include b(action-sheet) { @include b(action-sheet) {
background-color: #fff; background-color: $-dark-background2;
color: $-dark-color;
@include e(action) {
color: $-dark-color;
background: $-dark-background2;
&:active {
background: $-dark-background4;
}
}
@include e(subname) {
color: $-dark-color3;
}
@include e(cancel) {
color: $-dark-color;
background: $-dark-background4;
&:active {
background: $-dark-background5;
}
}
:deep(.wd-action-sheet__close) {
color: $-dark-color3;
}
@include e(panel-title) {
color: $-dark-color;
}
@include e(header) {
color: $-dark-color;
}
}
}
@include b(action-sheet) {
background-color: $-color-white;
padding-bottom: 1px; padding-bottom: 1px;
@include edeep(popup) { @include edeep(popup) {
border-radius: $-action-sheet-radius $-action-sheet-radius 0 0; border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
} }
@include e(actions) { @include e(actions) {
padding: 8px 0; padding: 8px 0;
max-height: 50vh; max-height: 50vh;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
@include e(action) { @include e(action) {
position: relative; position: relative;
display: block; display: block;

8
src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
View File

@ -25,7 +25,6 @@
</view> </view>
<view class="wd-action-sheet__actions" v-if="actions && actions.length"> <view class="wd-action-sheet__actions" v-if="actions && actions.length">
<button <button
jd:for="{{ actions }}"
v-for="(action, rowIndex) in actions" v-for="(action, rowIndex) in actions"
:key="rowIndex" :key="rowIndex"
:class="`wd-action-sheet__action ${action.disabled ? 'wd-action-sheet__action--disabled' : ''} ${ :class="`wd-action-sheet__action ${action.disabled ? 'wd-action-sheet__action--disabled' : ''} ${
@ -56,7 +55,9 @@
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'wd-action-sheet',
options: { options: {
addGlobalClass: true,
virtualHost: true, virtualHost: true,
styleIsolation: 'shared' styleIsolation: 'shared'
} }
@ -93,8 +94,8 @@ interface Props {
show: boolean show: boolean
actions: Array<Action> actions: Array<Action>
panels: Array<Panel> panels: Array<Panel>
title: string title?: string
cancelText: string cancelText?: string
closeOnClickAction: boolean closeOnClickAction: boolean
closeOnClickModal: boolean closeOnClickModal: boolean
duration: number duration: number
@ -112,6 +113,7 @@ const props = withDefaults(defineProps<Props>(), {
closeOnClickAction: true, closeOnClickAction: true,
closeOnClickModal: true, closeOnClickModal: true,
duration: 200, duration: 200,
zIndex: 10,
lazyRender: false, lazyRender: false,
safeAreaInsetBottom: true safeAreaInsetBottom: true
}) })

17
src/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-06-12 18:40:59 * @Date: 2023-06-12 18:40:59
* @LastEditTime: 2023-07-15 16:21:15 * @LastEditTime: 2023-08-15 15:47:51
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-badge\wd-badge.vue * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-badge\wd-badge.vue
@ -21,18 +21,19 @@
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签 name: 'wd-badge',
options: { options: {
virtualHost: true addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
} }
} }
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info' type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
interface Props { interface Props {
modelValue: number | null modelValue: number | string | null
bgColor?: string bgColor?: string
max?: number max?: number
isDot?: boolean isDot?: boolean
@ -40,13 +41,13 @@ interface Props {
type?: BadgeType type?: BadgeType
top?: number top?: number
right?: number right?: number
customClass?: string customClass: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
customClass: '', customClass: '',
modelValue: null modelValue: null
}) })
const content = ref<number | null>(null) const content = ref<number | string | null>(null)
watch( watch(
[() => props.modelValue, () => props.max, () => props.isDot], [() => props.modelValue, () => props.max, () => props.isDot],
@ -64,7 +65,7 @@ function notice() {
if (props.isDot) return if (props.isDot) return
let value = props.modelValue let value = props.modelValue
const max = props.max const max = props.max
if (value && max && !Number.isNaN(value) && !Number.isNaN(max)) { if (value && max && typeof value === 'number' && !Number.isNaN(value) && !Number.isNaN(max)) {
value = max < value ? max : value value = max < value ? max : value
} }
content.value = value content.value = value

65
src/uni_modules/wot-design-uni/components/wd-button/index.scss
View File

@ -82,6 +82,67 @@
} }
} }
} }
.wot-theme-dark {
@include b(button) {
@include when(info) {
@include button-type-style($-dark-color,
$-dark-background4,
$-dark-background5,
$-dark-background7,
$-dark-color3);
}
@include when(plain) {
@include when(info) {
@include button-plain-style($-dark-color, $-dark-background5, $-dark-color, $-dark-color-gray);
}
@include when(primary) {
&.wd-button--active {
background: transparent;
color: themeColor($-color-theme, "light", #9DB9F6);
}
@include when(disabled) {
background-color: transparent;
&.wd-button--active {
background-color: transparent;
}
}
}
}
@include when(text) {
@include when(disabled) {
color: $-dark-color-gray;
background: transparent;
}
}
@include when(icon) {
color: $-dark-color;
&.wd-button--active {
background: $-dark-background4;
}
@include when(disabled) {
color: $-dark-color-gray;
background: transparent;
&.wd-button--active {
background: transparent;
}
}
}
}
}
@include b(button) { @include b(button) {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -204,7 +265,7 @@
font-size: $-button-medium-fs; font-size: $-button-medium-fs;
&::after { &::after {
border-radius: $-button-medium-radius * 2; border-radius: calc($-button-medium-radius * 2);
} }
@include when(primary) { @include when(primary) {
box-shadow: $-button-medium-box-shadow-size $-button-primary-box-shadow-color; box-shadow: $-button-medium-box-shadow-size $-button-primary-box-shadow-color;
@ -256,7 +317,7 @@
font-size: $-button-large-fs; font-size: $-button-large-fs;
&::after { &::after {
border-radius: $-button-large-radius * 2; border-radius: calc($-button-large-radius * 2);
} }
&:not(.is-plain) { &:not(.is-plain) {
@include when(primary) { @include when(primary) {

32
src/uni_modules/wot-design-uni/components/wd-button/wd-button.vue
View File

@ -44,7 +44,9 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'wd-button',
options: { options: {
addGlobalClass: true,
virtualHost: true, virtualHost: true,
styleIsolation: 'shared' styleIsolation: 'shared'
} }
@ -65,7 +67,7 @@ const loadingIcon = (color = '#4D80F0', reverse = true) => {
reverse ? '#fff' : color reverse ? '#fff' : color
}"/><path d="M4.599 21c0 9.044 7.332 16.376 16.376 16.376 9.045 0 16.376-7.332 16.376-16.376" stroke="url(#a)" stroke-width="3.5" stroke-linecap="round"/></g></svg>` }"/><path d="M4.599 21c0 9.044 7.332 16.376 16.376 16.376 9.045 0 16.376-7.332 16.376-16.376" stroke="url(#a)" stroke-width="3.5" stroke-linecap="round"/></g></svg>`
} }
type ButtonType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' type ButtonType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'text' | 'icon'
type ButtonSize = 'small' | 'medium' | 'large' type ButtonSize = 'small' | 'medium' | 'large'
interface Props { interface Props {
@ -76,19 +78,19 @@ interface Props {
block: boolean block: boolean
type: ButtonType type: ButtonType
size: ButtonSize size: ButtonSize
icon: string icon?: string
loading: boolean loading: boolean
loadingColor: string loadingColor?: string
openType: string openType?: string
formType: string formType?: string
hoverStopPropagation: boolean hoverStopPropagation?: boolean
lang: string lang?: string
sessionFrom: string sessionFrom?: string
sendMessageTitle: string sendMessageTitle?: string
sendMessagePath: string sendMessagePath?: string
sendMessageImg: string sendMessageImg?: string
appParameter: string appParameter?: string
showMessageCard: boolean showMessageCard?: boolean
customClass: string customClass: string
customStyle: string customStyle: string
} }
@ -100,7 +102,9 @@ const props = withDefaults(defineProps<Props>(), {
loading: false, loading: false,
suck: false, suck: false,
block: false, block: false,
disabled: false disabled: false,
customClass: '',
customStyle: ''
}) })
const hoverStartTime = ref<number>(20) const hoverStartTime = ref<number>(20)

35
src/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss
View File

@ -1,6 +1,26 @@
@import '../../common/abstracts/variable'; @import '../../common/abstracts/variable';
@import '../../common/abstracts/mixin'; @import '../../common/abstracts/mixin';
.wot-theme-dark {
@include b(month) {
@include e(title) {
color: $-dark-color;
}
@include e(days) {
color: $-dark-color;
}
@include e(day) {
@include when(disabled) {
.wd-month__day-text {
color: $-dark-color-gray;
}
}
}
}
}
@include b(month) { @include b(month) {
@include e(title) { @include e(title) {
padding: 13px 0; padding: 13px 0;
@ -8,12 +28,14 @@
font-size: $-calendar-panel-title-fs; font-size: $-calendar-panel-title-fs;
color: $-calendar-panel-title-color; color: $-calendar-panel-title-color;
} }
@include e(days) { @include e(days) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-size: $-calendar-day-fs; font-size: $-calendar-day-fs;
color: $-calendar-day-color; color: $-calendar-day-color;
} }
@include e(day) { @include e(day) {
position: relative; position: relative;
width: 14.285%; width: 14.285%;
@ -26,9 +48,11 @@
color: $-calendar-disabled-color; color: $-calendar-disabled-color;
} }
} }
@include when(current) { @include when(current) {
color: $-calendar-active-color; color: $-calendar-active-color;
} }
@include when(selected) { @include when(selected) {
.wd-month__day-container { .wd-month__day-container {
border-radius: $-calendar-active-border; border-radius: $-calendar-active-border;
@ -36,11 +60,13 @@
color: #fff; color: #fff;
} }
} }
@include when(middle) { @include when(middle) {
.wd-month__day-container { .wd-month__day-container {
background: $-calendar-range-color; background: $-calendar-range-color;
} }
} }
@include when(start) { @include when(start) {
&::after { &::after {
position: absolute; position: absolute;
@ -52,15 +78,18 @@
background: $-calendar-range-color; background: $-calendar-range-color;
z-index: 1; z-index: 1;
} }
&.is-without-end::after { &.is-without-end::after {
display: none; display: none;
} }
.wd-month__day-container { .wd-month__day-container {
background: $-calendar-active-color; background: $-calendar-active-color;
color: #fff; color: #fff;
border-radius: $-calendar-active-border; border-radius: $-calendar-active-border;
} }
} }
@include when(end) { @include when(end) {
&::after { &::after {
position: absolute; position: absolute;
@ -72,12 +101,14 @@
background: $-calendar-range-color; background: $-calendar-range-color;
z-index: 1; z-index: 1;
} }
.wd-month__day-container { .wd-month__day-container {
background: $-calendar-active-color; background: $-calendar-active-color;
color: #fff; color: #fff;
border-radius: $-calendar-active-border; border-radius: $-calendar-active-border;
} }
} }
@include when(same) { @include when(same) {
.wd-month__day-container { .wd-month__day-container {
background: $-calendar-active-color; background: $-calendar-active-color;
@ -86,13 +117,16 @@
} }
} }
} }
@include e(day-container) { @include e(day-container) {
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
@include e(day-text) { @include e(day-text) {
font-weight: $-calendar-day-fw; font-weight: $-calendar-day-fw;
} }
@include e(day-top) { @include e(day-top) {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -102,6 +136,7 @@
font-size: $-calendar-info-fs; font-size: $-calendar-info-fs;
text-align: center; text-align: center;
} }
@include e(day-bottom) { @include e(day-bottom) {
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;

16
src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue
View File

@ -24,6 +24,16 @@
</view> </view>
</template> </template>
<script lang="ts">
export default {
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
import { import {
@ -48,9 +58,9 @@ interface Props {
maxDate: number maxDate: number
firstDayOfWeek: number firstDayOfWeek: number
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function formatter?: Function
maxRange: number maxRange?: number
rangePrompt: string rangePrompt?: string
allowSameDay: boolean allowSameDay: boolean
defaultTime: Array<number> defaultTime: Array<number>
} }

27
src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/index.scss
View File

@ -1,6 +1,26 @@
@import '../../common/abstracts/variable'; @import '../../common/abstracts/variable';
@import '../../common/abstracts/mixin'; @import '../../common/abstracts/mixin';
.wot-theme-dark {
@include b(month-panel) {
@include e(title) {
color: $-dark-color;
}
@include e(weeks) {
box-shadow: 0px 4px 8px 0 rgba(255, 255, 255, 0.02);
color: $-dark-color;
}
@include e(time-label) {
color: $-dark-color;
&::after{
background: $-dark-background4;
}
}
}
}
@include b(month-panel) { @include b(month-panel) {
font-size: $-calendar-fs; font-size: $-calendar-fs;
@ -11,6 +31,7 @@
color: $-calendar-panel-title-color; color: $-calendar-panel-title-color;
padding: $-calendar-panel-padding; padding: $-calendar-panel-padding;
} }
@include e(weeks) { @include e(weeks) {
display: flex; display: flex;
height: $-calendar-week-height; height: $-calendar-week-height;
@ -20,18 +41,22 @@
font-size: $-calendar-week-fs; font-size: $-calendar-week-fs;
padding: $-calendar-panel-padding; padding: $-calendar-panel-padding;
} }
@include e(week) { @include e(week) {
flex: 1; flex: 1;
text-align: center; text-align: center;
} }
@include e(container) { @include e(container) {
padding: $-calendar-panel-padding; padding: $-calendar-panel-padding;
box-sizing: border-box; box-sizing: border-box;
} }
@include e(time) { @include e(time) {
display: flex; display: flex;
box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.02); box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.02);
} }
@include e(time-label) { @include e(time-label) {
position: relative; position: relative;
flex: 1; flex: 1;
@ -52,10 +77,12 @@
z-index: 0; z-index: 0;
} }
} }
@include e(time-text) { @include e(time-text) {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@include e(time-picker) { @include e(time-picker) {
flex: 3; flex: 3;
} }

18
src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
View File

@ -51,6 +51,16 @@
</view> </view>
</template> </template>
<script lang="ts">
export default {
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue' import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
import { debounce, getType, isEqual } from '../../common/util' import { debounce, getType, isEqual } from '../../common/util'
@ -64,15 +74,15 @@ interface Props {
maxDate: number maxDate: number
firstDayOfWeek: number firstDayOfWeek: number
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function formatter?: Function
maxRange: number maxRange?: number
rangePrompt: string rangePrompt?: string
allowSameDay: boolean allowSameDay: boolean
showPanelTitle: boolean showPanelTitle: boolean
defaultTime: Array<number> defaultTime: Array<number>
panelHeight: number panelHeight: number
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
timeFilter: Function timeFilter?: Function
hideSecond: boolean hideSecond: boolean
// 是否展示picker（兼容支付宝和钉钉） // 是否展示picker（兼容支付宝和钉钉）
showPicker: boolean showPicker: boolean

16
src/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue
View File

@ -42,7 +42,13 @@
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
behaviors: ['uni://form-field'] name: 'wd-calendar-view',
behaviors: ['uni://form-field'],
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
} }
</script> </script>
@ -68,11 +74,11 @@ interface Props {
firstDayOfWeek: number firstDayOfWeek: number
// 日期格式化函数 // 日期格式化函数
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function formatter?: Function
// type 为范围选择时有效，最大日期范围 // type 为范围选择时有效，最大日期范围
maxRange: number maxRange?: number
// type 为范围选择时有效，选择超出最大日期范围时的错误提示文案 // type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
rangePrompt: string rangePrompt?: string
// type 为范围选择时有效，是否允许选择同一天 // type 为范围选择时有效，是否允许选择同一天
allowSameDay: boolean allowSameDay: boolean
// 是否展示面板标题，自动计算当前滚动的日期月份 // 是否展示面板标题，自动计算当前滚动的日期月份
@ -83,7 +89,7 @@ interface Props {
panelHeight: number panelHeight: number
// type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据 // type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
timeFilter: Function timeFilter?: Function
// type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改 // type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
hideSecond: boolean hideSecond: boolean
// 是否展示picker（兼容支付宝和钉钉） // 是否展示picker（兼容支付宝和钉钉）

35
src/uni_modules/wot-design-uni/components/wd-calendar-view/year/index.scss
View File

@ -1,6 +1,27 @@
@import '../../common/abstracts/variable'; @import '../../common/abstracts/variable';
@import '../../common/abstracts/mixin'; @import '../../common/abstracts/mixin';
.wot-theme-dark {
@include b(year) {
@include e(title) {
color: $-dark-color;
}
@include e(months) {
color: $-dark-color;
}
@include e(month) {
@include when(disabled) {
.wd-year__month-text {
color: $-dark-color-gray;
}
}
}
}
}
@include b(year) { @include b(year) {
@include e(title) { @include e(title) {
padding: 13px 0; padding: 13px 0;
@ -8,12 +29,14 @@
font-size: $-calendar-panel-title-fs; font-size: $-calendar-panel-title-fs;
color: $-calendar-panel-title-color; color: $-calendar-panel-title-color;
} }
@include e(months) { @include e(months) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-size: $-calendar-day-fs; font-size: $-calendar-day-fs;
color: $-calendar-day-color; color: $-calendar-day-color;
} }
@include e(month) { @include e(month) {
position: relative; position: relative;
width: 25%; width: 25%;
@ -26,9 +49,11 @@
color: $-calendar-disabled-color; color: $-calendar-disabled-color;
} }
} }
@include when(current) { @include when(current) {
color: $-calendar-active-color; color: $-calendar-active-color;
} }
@include when(selected) { @include when(selected) {
color: #fff; color: #fff;
@ -37,9 +62,11 @@
background: $-calendar-active-color; background: $-calendar-active-color;
} }
} }
@include when(middle) { @include when(middle) {
background: $-calendar-range-color; background: $-calendar-range-color;
} }
@include when(start) { @include when(start) {
color: #fff; color: #fff;
@ -52,14 +79,17 @@
content: ''; content: '';
background: $-calendar-range-color; background: $-calendar-range-color;
} }
.wd-year__month-text { .wd-year__month-text {
background: $-calendar-active-color; background: $-calendar-active-color;
border-radius: $-calendar-active-border; border-radius: $-calendar-active-border;
} }
&.is-without-end::after { &.is-without-end::after {
display: none; display: none;
} }
} }
@include when(end) { @include when(end) {
color: #fff; color: #fff;
@ -72,11 +102,13 @@
content: ''; content: '';
background: $-calendar-range-color; background: $-calendar-range-color;
} }
.wd-year__month-text { .wd-year__month-text {
background: $-calendar-active-color; background: $-calendar-active-color;
border-radius: $-calendar-active-border; border-radius: $-calendar-active-border;
} }
} }
@include when(same) { @include when(same) {
color: #fff; color: #fff;
@ -86,11 +118,13 @@
} }
} }
} }
@include e(month-text) { @include e(month-text) {
width: $-calendar-month-width; width: $-calendar-month-width;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
@include e(month-top) { @include e(month-top) {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -100,6 +134,7 @@
font-size: $-calendar-info-fs; font-size: $-calendar-info-fs;
text-align: center; text-align: center;
} }
@include e(month-bottom) { @include e(month-bottom) {
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;

15
src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue
View File

@ -17,6 +17,15 @@
</view> </view>
</view> </view>
</template> </template>
<script lang="ts">
export default {
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
@ -31,9 +40,9 @@ interface Props {
minDate: number minDate: number
maxDate: number maxDate: number
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function formatter?: Function
maxRange: number maxRange?: number
rangePrompt: string rangePrompt?: string
allowSameDay: boolean allowSameDay: boolean
defaultTime: Array<number> defaultTime: Array<number>
} }

9
src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/index.scss
View File

@ -1,6 +1,15 @@
@import '../../common/abstracts/variable'; @import '../../common/abstracts/variable';
@import '../../common/abstracts/mixin'; @import '../../common/abstracts/mixin';
.wot-theme-dark {
@include b(year-panel) {
@include e(title) {
color: $-dark-color;
box-shadow: 0px 4px 8px 0 rgba(255, 255,255, 0.02);
}
}
}
@include b(year-panel) { @include b(year-panel) {
font-size: $-calendar-fs; font-size: $-calendar-fs;
padding: $-calendar-panel-padding; padding: $-calendar-panel-padding;

15
src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
View File

@ -27,6 +27,15 @@
</scroll-view> </scroll-view>
</view> </view>
</template> </template>
<script lang="ts">
export default {
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, getCurrentInstance, onMounted, ref, nextTick } from 'vue' import { computed, getCurrentInstance, onMounted, ref, nextTick } from 'vue'
@ -40,9 +49,9 @@ interface Props {
minDate: number minDate: number
maxDate: number maxDate: number
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function formatter?: Function
maxRange: number maxRange?: number
rangePrompt: string rangePrompt?: string
allowSameDay: boolean allowSameDay: boolean
showPanelTitle: boolean showPanelTitle: boolean
defaultTime: Array<number> defaultTime: Array<number>

64
src/uni_modules/wot-design-uni/components/wd-calendar/index.scss
View File

@ -1,12 +1,54 @@
@import '../common/abstracts/variable'; @import '../common/abstracts/variable';
@import '../common/abstracts/mixin'; @import '../common/abstracts/mixin';
.wot-theme-dark {
@include b(calendar) {
@include e(cell) {
background-color: $-dark-background2;
color: $-dark-color;
}
@include e(value) {
color: $-dark-color;
}
@include e(title) {
color: $-dark-color;
}
:deep(.wd-calendar__arrow),
:deep(.wd-calendar__close) {
color: $-dark-color;
}
@include when(border) {
.wd-calendar__cell {
@include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
}
}
@include e(range-label-item) {
color: $-dark-color;
@include when(placeholder) {
color: $-dark-color-gray;
}
}
@include e(range-sperator) {
color: $-dark-color-gray;
}
}
}
@include b(calendar) { @include b(calendar) {
@include when(border) { @include when(border) {
.wd-calendar__cell { .wd-calendar__cell {
@include halfPixelBorder('top', $-cell-padding); @include halfPixelBorder('top', $-cell-padding);
} }
} }
@include e(cell) { @include e(cell) {
position: relative; position: relative;
display: flex; display: flex;
@ -18,25 +60,30 @@
overflow: hidden; overflow: hidden;
line-height: $-cell-ling-height; line-height: $-cell-ling-height;
} }
@include e(cell) { @include e(cell) {
@include when(disabled) { @include when(disabled) {
.wd-calendar__value { .wd-calendar__value {
color: $-input-disabled-color; color: $-input-disabled-color;
} }
} }
@include when(align-right) { @include when(align-right) {
.wd-calendar__value { .wd-calendar__value {
text-align: right; text-align: right;
} }
} }
@include when(error) { @include when(error) {
.wd-calendar__value { .wd-calendar__value {
color: $-input-error-color; color: $-input-error-color;
} }
:deep(.wd-calendar__arrow) { :deep(.wd-calendar__arrow) {
color: $-input-error-color; color: $-input-error-color;
} }
} }
@include when(large) { @include when(large) {
font-size: $-cell-title-fs-large; font-size: $-cell-title-fs-large;
@ -44,6 +91,7 @@
font-size: $-cell-icon-size-large; font-size: $-cell-icon-size-large;
} }
} }
@include when(center) { @include when(center) {
align-items: center; align-items: center;
@ -52,6 +100,7 @@
} }
} }
} }
@include e(label) { @include e(label) {
position: relative; position: relative;
width: $-input-cell-label-width; width: $-input-cell-label-width;
@ -65,7 +114,7 @@
&::after { &::after {
position: absolute; position: absolute;
left: 0; left: 0;
top: $-cell-wrapper-padding + 2px; top: calc($-cell-wrapper-padding + 2px);
content: '*'; content: '*';
font-size: $-cell-required-size; font-size: $-cell-required-size;
line-height: 1.1; line-height: 1.1;
@ -73,6 +122,7 @@
} }
} }
} }
@include e(value) { @include e(value) {
flex: 1; flex: 1;
padding: $-cell-wrapper-padding 0; padding: $-cell-wrapper-padding 0;
@ -83,10 +133,12 @@
@include when(ellipsis) { @include when(ellipsis) {
@include lineEllipsis; @include lineEllipsis;
} }
@include m(placeholder) { @include m(placeholder) {
color: $-input-placeholder-color; color: $-input-placeholder-color;
} }
} }
@include edeep(arrow) { @include edeep(arrow) {
display: block; display: block;
margin-top: $-cell-wrapper-padding; margin-top: $-cell-wrapper-padding;
@ -99,6 +151,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@include e(title) { @include e(title) {
color: $-action-sheet-color; color: $-action-sheet-color;
height: $-action-sheet-title-height; height: $-action-sheet-title-height;
@ -107,6 +160,7 @@
font-size: $-action-sheet-title-fs; font-size: $-action-sheet-title-fs;
font-weight: $-action-sheet-weight; font-weight: $-action-sheet-weight;
} }
@include edeep(close) { @include edeep(close) {
position: absolute; position: absolute;
top: $-action-sheet-close-top; top: $-action-sheet-close-top;
@ -116,17 +170,21 @@
transform: rotate(-45deg); transform: rotate(-45deg);
line-height: 1.1; line-height: 1.1;
} }
@include e(tabs) { @include e(tabs) {
width: 222px; width: 222px;
margin: 10px auto 12px; margin: 10px auto 12px;
} }
@include e(shortcuts) { @include e(shortcuts) {
padding: 20px 0; padding: 20px 0;
text-align: center; text-align: center;
} }
@include edeep(tag) { @include edeep(tag) {
margin-right: 8px; margin-right: 8px;
} }
@include e(view) { @include e(view) {
@include when(show-confirm) { @include when(show-confirm) {
height: 394px; height: 394px;
@ -136,6 +194,7 @@
} }
} }
} }
@include e(range-label) { @include e(range-label) {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -147,6 +206,7 @@
box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02); box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
} }
} }
@include e(range-label-item) { @include e(range-label-item) {
flex: 1; flex: 1;
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
@ -155,10 +215,12 @@
color: rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.25);
} }
} }
@include e(range-sperator) { @include e(range-sperator) {
margin: 0 24px; margin: 0 24px;
color: rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.25);
} }
@include e(confirm) { @include e(confirm) {
padding: 12px 25px 14px; padding: 12px 25px 14px;
} }

78
src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
View File

@ -100,8 +100,10 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'wd-calendar',
behaviors: ['uni://form-field'], behaviors: ['uni://form-field'],
options: { options: {
addGlobalClass: true,
virtualHost: true, virtualHost: true,
styleIsolation: 'shared' styleIsolation: 'shared'
} }
@ -189,48 +191,48 @@ interface Props {
customLabelClass?: string customLabelClass?: string
customValueClass?: string customValueClass?: string
modelValue: null | number | Array<number> modelValue: null | number | Array<number>
type: CalendarType type?: CalendarType
minDate: number minDate?: number
maxDate: number maxDate?: number
firstDayOfWeek: number firstDayOfWeek?: number
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
formatter: Function formatter?: Function
maxRange: number maxRange?: number
rangePrompt: string rangePrompt?: string
allowSameDay: boolean allowSameDay?: boolean
defaultTime: string | Array<string> defaultTime?: string | Array<string>
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
timeFilter: Function timeFilter?: Function
hideSecond: boolean hideSecond?: boolean
label: string label?: string
labelWidth: string labelWidth?: string
useLabelSlot: boolean useLabelSlot?: boolean
useDefaultSlot: boolean useDefaultSlot?: boolean
disabled: boolean disabled?: boolean
readonly: boolean readonly?: boolean
placeholder: string placeholder?: string
title: string title?: string
alignRight: boolean alignRight?: boolean
error: boolean error?: boolean
required: boolean required?: boolean
size: string size?: string
center: boolean center?: boolean
closeOnClickModal: boolean closeOnClickModal?: boolean
zIndex: number zIndex?: number
showConfirm: boolean showConfirm?: boolean
confirmText: string confirmText?: string
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
displayFormat: Function displayFormat?: Function
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
innerDisplayFormat: Function innerDisplayFormat?: Function
ellipsis: boolean ellipsis?: boolean
showTypeSwitch: boolean showTypeSwitch?: boolean
shortcuts: Array<Record<string, any>> shortcuts?: Array<Record<string, any>>
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
onShortcutsClick: Function onShortcutsClick?: Function
safeAreaInsetBottom: boolean safeAreaInsetBottom?: boolean
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
beforeConfirm: Function beforeConfirm?: Function
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
customClass: '', customClass: '',
@ -261,8 +263,8 @@ const props = withDefaults(defineProps<Props>(), {
}) })
const pickerShow = ref<boolean>(false) const pickerShow = ref<boolean>(false)
const calendarValue = ref<null | number | number[]>() const calendarValue = ref<null | number | number[]>(null)
const lastCalendarValue = ref<null | number | number[]>() const lastCalendarValue = ref<null | number | number[]>(null)
const panelHeight = ref<number>(338) const panelHeight = ref<number>(338)
const confirmBtnDisabled = ref<boolean>(true) const confirmBtnDisabled = ref<boolean>(true)
const showValue = ref<string>('') const showValue = ref<string>('')

22
src/uni_modules/wot-design-uni/components/wd-card/index.scss
View File

@ -1,5 +1,27 @@
@import "../common/abstracts/variable.scss"; @import "../common/abstracts/variable.scss";
@import "../common/abstracts/_mixin.scss"; @import "../common/abstracts/_mixin.scss";
.wot-theme-dark {
@include b(card) {
background-color: $-dark-background2;
@include when(rectangle) {
.wd-card__content {
@include halfPixelBorder('top', 0, $-dark-border-color);
}
.wd-card__footer {
@include halfPixelBorder('top', 0, $-dark-border-color);
}
}
@include e(title-content) {
color: $-dark-color;
}
@include e(content) {
color: $-dark-color3;
}
}
}
@include b(card) { @include b(card) {
padding: $-card-padding; padding: $-card-padding;

20
src/uni_modules/wot-design-uni/components/wd-card/wd-card.vue
View File

@ -1,12 +1,3 @@
<!--
* @Author: weisheng
* @Date: 2023-07-20 00:34:54
* @LastEditTime: 2023-07-20 12:56:29
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-card\wd-card.vue
* 记得注释
-->
<template> <template>
<view :class="['wd-card', type == 'rectangle' ? 'is-rectangle' : '', customClass]"> <view :class="['wd-card', type == 'rectangle' ? 'is-rectangle' : '', customClass]">
<view :class="['wd-card__title-content', customTitleClass]"> <view :class="['wd-card__title-content', customTitleClass]">
@ -24,6 +15,17 @@
</view> </view>
</template> </template>
<script lang="ts">
export default {
name: 'wd-card',
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup> <script lang="ts" setup>
interface Props { interface Props {
title?: string title?: string

26
src/uni_modules/wot-design-uni/components/wd-cell-group/index.scss
View File

@ -1,6 +1,32 @@
@import '../common/abstracts/variable.scss'; @import '../common/abstracts/variable.scss';
@import '../common/abstracts/_mixin.scss'; @import '../common/abstracts/_mixin.scss';
.wot-theme-dark {
@include b(cell-group) {
background-color: $-dark-background2;
@include when(border) {
.wd-cell-group__title {
@include halfPixelBorder('bottom', 0, $-dark-border-color);
}
}
@include e(title) {
background: $-dark-background2;
color: $-dark-color;
}
@include e(right) {
color: $-dark-color3;
}
@include e(body) {
background: $-dark-background2;
}
}
}
@include b(cell-group) { @include b(cell-group) {
background-color: $-color-white; background-color: $-color-white;

20
src/uni_modules/wot-design-uni/components/wd-cell-group/wd-cell-group.vue
View File

@ -1,3 +1,12 @@
<!--
* @Author: weisheng
* @Date: 2023-08-01 11:12:05
* @LastEditTime: 2023-08-15 16:12:36
* @LastEditors: weisheng
* @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-cell-group\wd-cell-group.vue
* 记得注释
-->
<template> <template>
<view :class="['wd-cell-group', border ? 'is-border' : '', customClass]"> <view :class="['wd-cell-group', border ? 'is-border' : '', customClass]">
<view v-if="title || value || useSlot" class="wd-cell-group__title"> <view v-if="title || value || useSlot" class="wd-cell-group__title">
@ -20,9 +29,11 @@
<script lang="ts"> <script lang="ts">
export default { export default {
// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，可以去掉微信小程序自定义组件多出的最外层标签 name: 'wd-cell-group',
options: { options: {
virtualHost: true addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
} }
} }
</script> </script>
@ -32,13 +43,14 @@ import { getCurrentInstance, provide, ref } from 'vue'
interface Props { interface Props {
customClass?: string customClass?: string
title: string title?: string
value: string value?: string
useSlot: boolean useSlot: boolean
border: boolean border: boolean
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
useSlot: false, useSlot: false,
border: false,
customClass: '' customClass: ''
}) })

45
src/uni_modules/wot-design-uni/components/wd-cell/index.scss
View File

@ -1,6 +1,35 @@
@import '../common/abstracts/variable.scss'; @import '../common/abstracts/variable.scss';
@import '../common/abstracts/_mixin.scss'; @import '../common/abstracts/_mixin.scss';
.wot-theme-dark {
@include b(cell) {
background-color: $-dark-background2;
color: $-dark-color;
@include e(value) {
color: $-dark-color3;
}
@include e(label) {
color: $-dark-color3;
}
@include when(hover) {
background-color: $-dark-background4;
}
@include when(border) {
.wd-cell__wrapper {
@include halfPixelBorder('top', 0, $-dark-border-color);
}
}
:deep(.wd-cell__arrow-right){
color: $-dark-color;
}
}
}
@include b(cell) { @include b(cell) {
position: relative; position: relative;
padding-left: $-cell-padding; padding-left: $-cell-padding;
@ -15,6 +44,7 @@
@include halfPixelBorder('top'); @include halfPixelBorder('top');
} }
} }
@include e(wrapper) { @include e(wrapper) {
position: relative; position: relative;
display: flex; display: flex;
@ -28,14 +58,17 @@
.wd-cell__right { .wd-cell__right {
margin-top: $-cell-vertical-top; margin-top: $-cell-vertical-top;
} }
.wd-cell__value { .wd-cell__value {
text-align: left; text-align: left;
} }
} }
@include when(label) { @include when(label) {
padding: $-cell-wrapper-padding-with-label $-cell-padding $-cell-wrapper-padding-with-label 0; padding: $-cell-wrapper-padding-with-label $-cell-padding $-cell-wrapper-padding-with-label 0;
} }
} }
@include e(left) { @include e(left) {
position: relative; position: relative;
flex: 1; flex: 1;
@ -58,23 +91,27 @@
} }
} }
} }
@include e(right) { @include e(right) {
position: relative; position: relative;
display: flex; display: flex;
flex: 1; flex: 1;
} }
@include e(title) { @include e(title) {
flex: 1; flex: 1;
width: 100%; width: 100%;
font-size: $-cell-title-fs; font-size: $-cell-title-fs;
margin-right: $-cell-padding; margin-right: $-cell-padding;
} }
@include e(label) { @include e(label) {
margin-top: 2px; margin-top: 2px;
font-size: $-cell-label-fs; font-size: $-cell-label-fs;
color: $-cell-label-color; color: $-cell-label-color;
@include lineEllipsis; @include lineEllipsis;
} }
@include edeep(icon) { @include edeep(icon) {
display: block; display: block;
position: relative; position: relative;
@ -84,6 +121,7 @@
margin-right: $-cell-icon-right; margin-right: $-cell-icon-right;
font-size: $-cell-icon-size; font-size: $-cell-icon-size;
} }
@include e(value) { @include e(value) {
position: relative; position: relative;
flex: 1; flex: 1;
@ -93,6 +131,7 @@
line-height: $-cell-value-line-height; line-height: $-cell-value-line-height;
vertical-align: top; vertical-align: top;
} }
@include edeep(arrow-right) { @include edeep(arrow-right) {
display: inline-block; display: inline-block;
margin-left: 8px; margin-left: 8px;
@ -102,25 +141,31 @@
color: $-cell-arrow-color; color: $-cell-arrow-color;
vertical-align: top; vertical-align: top;
} }
@include when(link) { @include when(link) {
-webkit-tap-highlight-color: $-cell-tap-bg; -webkit-tap-highlight-color: $-cell-tap-bg;
} }
@include when(hover) { @include when(hover) {
background-color: $-cell-tap-bg; background-color: $-cell-tap-bg;
} }
@include when(large) { @include when(large) {
.wd-cell__title { .wd-cell__title {
font-size: $-cell-title-fs-large; font-size: $-cell-title-fs-large;
} }
.wd-cell__label { .wd-cell__label {
font-size: $-cell-label-fs-large; font-size: $-cell-label-fs-large;
} }
.wd-cell__icon { .wd-cell__icon {
font-size: $-cell-icon-size-large; font-size: $-cell-icon-size-large;
width: $-cell-icon-size-large; width: $-cell-icon-size-large;
height: $-cell-icon-size-large; height: $-cell-icon-size-large;
} }
} }
@include when(center) { @include when(center) {
.wd-cell__wrapper { .wd-cell__wrapper {
align-items: center; align-items: center;

17
src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue
View File

@ -47,7 +47,9 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'wd-cell',
options: { options: {
addGlobalClass: true,
virtualHost: true, virtualHost: true,
styleIsolation: 'shared' styleIsolation: 'shared'
} }
@ -58,17 +60,16 @@ export default {
import { useCell } from '../mixins/useCell' import { useCell } from '../mixins/useCell'
interface Props { interface Props {
title: string title?: string
value: string value?: string
icon: string icon?: string
label: string label?: string
isLabel: string
isLink: boolean isLink: boolean
to: string to?: string
replace: boolean replace: boolean
clickable: boolean clickable: boolean
size: string size?: string
titleWidth: string titleWidth?: string
center: boolean center: boolean
required: boolean required: boolean
vertical: boolean vertical: boolean

5
src/uni_modules/wot-design-uni/components/wd-checkbox-group/index.scss
View File

@ -1,6 +1,11 @@
@import "./../common/abstracts/_mixin.scss"; @import "./../common/abstracts/_mixin.scss";
@import "./../common/abstracts/variable.scss"; @import "./../common/abstracts/variable.scss";
.wot-theme-dark {
@include b(checkbox-group) {
background-color: $-dark-background2;
}
}
@include b(checkbox-group) { @include b(checkbox-group) {
background-color: $-checkbox-bg; background-color: $-checkbox-bg;

21
src/uni_modules/wot-design-uni/components/wd-checkbox-group/wd-checkbox-group.vue
View File

@ -5,7 +5,13 @@
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
behaviors: ['uni://form-field'] name: 'wd-checkbox-group',
behaviors: ['uni://form-field'],
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
} }
</script> </script>
@ -17,20 +23,21 @@ type checkShape = 'circle' | 'square' | 'button'
interface Props { interface Props {
customClass?: string customClass?: string
modelValue: Array<string | number | boolean> modelValue: Array<string | number | boolean>
cell: boolean | null cell: boolean
shape: checkShape shape: checkShape
checkedColor: string checkedColor: string
disabled: boolean | null disabled: boolean
min: number min: number
max: number max: number
inline: boolean | null inline: boolean
size: string size?: string
name: string name?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
customClass: '', customClass: '',
value: () => [], modelValue: () => [],
cell: false,
shape: 'circle', shape: 'circle',
checkedColor: '#4D80F0', checkedColor: '#4D80F0',
disabled: false, disabled: false,

89
src/uni_modules/wot-design-uni/components/wd-checkbox/index.scss
View File

@ -1,6 +1,75 @@
@import "./../common/abstracts/_mixin.scss"; @import "./../common/abstracts/_mixin.scss";
@import "./../common/abstracts/variable.scss"; @import "./../common/abstracts/variable.scss";
.wot-theme-dark {
@include b(checkbox) {
@include e(shape) {
background: transparent;
border-color: $-checkbox-border-color;
color: $-checkbox-check-color;
}
@include e(label) {
color: $-dark-color;
}
@include when(disabled) {
.wd-checkbox__shape {
border-color: $-dark-color-gray;
background: $-dark-background4;
}
.wd-checkbox__label {
color: $-dark-color-gray;
}
:deep(.wd-checkbox__check) {
color: $-dark-color-gray;
}
@include when(checked) {
.wd-checkbox__shape {
color: $-dark-color-gray;
}
.wd-checkbox__label {
color: $-dark-color-gray;
}
}
@include when(button) {
.wd-checkbox__label {
border-color: #c8c9cc;
background: #3a3a3c;
color: $-dark-color-gray;
}
@include when(checked) {
.wd-checkbox__label {
border-color: #c8c9cc;
background: #3a3a3c;
color: #c8c9cc;
}
}
}
}
@include when(button) {
.wd-checkbox__label {
background-color: $-dark-background;
}
@include when(checked) {
.wd-checkbox__label {
background-color: $-dark-background2;
}
}
}
}
}
@include b(checkbox) { @include b(checkbox) {
display: block; display: block;
margin-bottom: $-checkbox-margin; margin-bottom: $-checkbox-margin;
@ -29,6 +98,7 @@
border-radius: $-checkbox-square-radius; border-radius: $-checkbox-square-radius;
} }
} }
@include e(input) { @include e(input) {
position: absolute; position: absolute;
width: 0; width: 0;
@ -36,6 +106,7 @@
margin: 0; margin: 0;
opacity: 0; opacity: 0;
} }
@include edeep(btn-check) { @include edeep(btn-check) {
display: inline-block; display: inline-block;
font-size: $-checkbox-icon-size; font-size: $-checkbox-icon-size;
@ -44,12 +115,14 @@
width: $-checkbox-icon-size; width: $-checkbox-icon-size;
vertical-align: middle; vertical-align: middle;
} }
@include e(txt) { @include e(txt) {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
line-height: 20px; line-height: 20px;
@include lineEllipsis; @include lineEllipsis;
} }
@include e(label) { @include e(label) {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -58,18 +131,21 @@
font-size: $-checkbox-label-fs; font-size: $-checkbox-label-fs;
color: $-checkbox-label-color; color: $-checkbox-label-color;
} }
@include edeep(check) { @include edeep(check) {
color: $-checkbox-check-color; color: $-checkbox-check-color;
font-size: $-checkbox-icon-size; font-size: $-checkbox-icon-size;
opacity: 0; opacity: 0;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
@include when(checked) { @include when(checked) {
.wd-checkbox__shape { .wd-checkbox__shape {
color: $-checkbox-checked-color; color: $-checkbox-checked-color;
background: currentColor; background: currentColor;
border-color: currentColor; border-color: currentColor;
} }
:deep(.wd-checkbox__check) { :deep(.wd-checkbox__check) {
opacity: 1; opacity: 1;
position: absolute; position: absolute;
@ -89,6 +165,7 @@
@include when(last-child) { @include when(last-child) {
margin-right: 0; margin-right: 0;
} }
.wd-checkbox__shape { .wd-checkbox__shape {
width: 0; width: 0;
height: 0; height: 0;
@ -96,6 +173,7 @@
opacity: 0; opacity: 0;
border: none; border: none;
} }
.wd-checkbox__label { .wd-checkbox__label {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
@ -112,6 +190,7 @@
transition: color 0.2s, border 0.2s; transition: color 0.2s, border 0.2s;
box-sizing: border-box; box-sizing: border-box;
} }
@include when(checked) { @include when(checked) {
.wd-checkbox__label { .wd-checkbox__label {
color: $-checkbox-checked-color; color: $-checkbox-checked-color;
@ -137,23 +216,28 @@
border-color: $-checkbox-border-color; border-color: $-checkbox-border-color;
background: $-checkbox-disabled-check-bg; background: $-checkbox-disabled-check-bg;
} }
.wd-checkbox__label { .wd-checkbox__label {
color: $-checkbox-disabled-label-color; color: $-checkbox-disabled-label-color;
} }
@include when(checked) { @include when(checked) {
.wd-checkbox__shape { .wd-checkbox__shape {
color: $-checkbox-disabled-check-color; color: $-checkbox-disabled-check-color;
} }
.wd-checkbox__label { .wd-checkbox__label {
color: $-checkbox-disabled-label-color; color: $-checkbox-disabled-label-color;
} }
} }
@include when(button) { @include when(button) {
.wd-checkbox__label { .wd-checkbox__label {
background: $-checkbox-disabled-color; background: $-checkbox-disabled-color;
border-color: $-checkbox-button-border; border-color: $-checkbox-button-border;
color: $-checkbox-disabled-label-color; color: $-checkbox-disabled-label-color;
} }
@include when(checked) { @include when(checked) {
.wd-checkbox__label { .wd-checkbox__label {
border-color: $-checkbox-button-disabled-border; border-color: $-checkbox-button-disabled-border;
@ -161,6 +245,7 @@
} }
} }
} }
// 以下内容用于解决父子组件样式隔离的问题 —— START // 以下内容用于解决父子组件样式隔离的问题 —— START
@include when(cell-box) { @include when(cell-box) {
padding: 13px 15px; padding: 13px 15px;
@ -170,6 +255,7 @@
padding: 14px 15px; padding: 14px 15px;
} }
} }
@include when(button-box) { @include when(button-box) {
display: inline-flex; display: inline-flex;
width: 33.3333%; width: 33.3333%;
@ -186,15 +272,18 @@
clear: both; clear: both;
} }
} }
@include when(large) { @include when(large) {
.wd-checkbox__shape { .wd-checkbox__shape {
width: $-checkbox-large-size; width: $-checkbox-large-size;
height: $-checkbox-large-size; height: $-checkbox-large-size;
font-size: $-checkbox-large-size; font-size: $-checkbox-large-size;
} }
.wd-checkbox__label { .wd-checkbox__label {
font-size: $-checkbox-large-label-fs; font-size: $-checkbox-large-label-fs;
} }
:deep(.wd-checkbox__check) { :deep(.wd-checkbox__check) {
top: 0; top: 0;
left: 1px; left: 1px;

15
src/uni_modules/wot-design-uni/components/wd-checkbox/wd-checkbox.vue
View File

@ -13,7 +13,7 @@
:class="`wd-checkbox__shape ${innerShape === 'square' ? 'is-square' : ''} ${customShapeClass}`" :class="`wd-checkbox__shape ${innerShape === 'square' ? 'is-square' : ''} ${customShapeClass}`"
:style="isChecked && !innerDisabled && innerCheckedColor ? 'color :' + innerCheckedColor : ''" :style="isChecked && !innerDisabled && innerCheckedColor ? 'color :' + innerCheckedColor : ''"
> >
<wd-icon custom-class="wd-checkbox__check" name="check-bold" size="14px" color="#ffffff" /> <wd-icon custom-class="wd-checkbox__check" name="check-bold" size="14px" />
</view> </view>
<!--shape为button时只保留wd-checkbox__label--> <!--shape为button时只保留wd-checkbox__label-->
<view <view
@ -32,8 +32,10 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'wd-checkbox',
behaviors: ['uni://form-field'], behaviors: ['uni://form-field'],
options: { options: {
addGlobalClass: true,
virtualHost: true, virtualHost: true,
styleIsolation: 'shared' styleIsolation: 'shared'
} }
@ -50,21 +52,22 @@ interface Props {
customClass?: string customClass?: string
modelValue: string | number | boolean modelValue: string | number | boolean
shape: checkShape shape: checkShape
checkedColor: string checkedColor?: string
disabled: boolean | null disabled: boolean
trueValue: string | number | boolean trueValue: string | number | boolean
falseValue: string | number | boolean falseValue: string | number | boolean
size: string size?: string
maxWidth: string maxWidth?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
customLabelClass: '', customLabelClass: '',
customShapeClass: '', customShapeClass: '',
customClass: '', customClass: '',
shape: 'circle',
trueValue: true, trueValue: true,
falseValue: false, falseValue: false,
disabled: null disabled: false
}) })
const isChecked = ref<boolean>(false) // 是否被选中 const isChecked = ref<boolean>(false) // 是否被选中

45
src/uni_modules/wot-design-uni/components/wd-col-picker/index.scss
View File

@ -1,6 +1,47 @@
@import '../common/abstracts/variable'; @import '../common/abstracts/variable';
@import '../common/abstracts/mixin'; @import '../common/abstracts/mixin';
@import '../wd-action-sheet/index.scss';
.wot-theme-dark {
@include b(col-picker) {
@include when(border) {
.wd-col-picker__cell {
@include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
}
}
@include e(cell) {
background-color: $-dark-background2;
color: $-dark-color;
@include when(disabled) {
.wd-col-picker__value {
color: $-dark-color3;
}
}
}
@include e(value) {
color: $-dark-color;
@include m(placeholder) {
color: $-dark-color-gray;
}
}
:deep(.wd-col-picker__arrow) {
color: $-dark-color;
}
@include e(list) {
color: $-dark-color;
}
@include e(selected) {
color: $-dark-color;
}
}
}
@include b(col-picker) { @include b(col-picker) {
@include when(border) { @include when(border) {
@ -60,7 +101,7 @@
&::after { &::after {
position: absolute; position: absolute;
left: 0; left: 0;
top: $-cell-wrapper-padding + 2px; top: calc($-cell-wrapper-padding + 2px);
content: '*'; content: '*';
font-size: $-cell-required-size; font-size: $-cell-required-size;
line-height: 1.1; line-height: 1.1;

23
src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
View File

@ -79,8 +79,10 @@
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'wd-col-picker',
behaviors: ['uni://form-field'], behaviors: ['uni://form-field'],
options: { options: {
addGlobalClass: true,
virtualHost: true, virtualHost: true,
styleIsolation: 'shared' styleIsolation: 'shared'
} }
@ -102,26 +104,26 @@ interface Props {
customValueClass?: string customValueClass?: string
modelValue: Array<Record<string, any>> modelValue: Array<Record<string, any>>
columns: Array<Array<Record<string, any>>> columns: Array<Array<Record<string, any>>>
label: string label?: string
labelWidth: string labelWidth: string
useLabelSlot: boolean useLabelSlot: boolean
useDefaultSlot: boolean useDefaultSlot: boolean
disabled: boolean disabled: boolean
readonly: boolean readonly: boolean
placeholder: string placeholder: string
title: string title?: string
// 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish // 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
columnChange: Function columnChange?: Function
// 外部展示格式化函数 // 外部展示格式化函数
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
displayFormat: Function displayFormat?: Function
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
beforeConfirm: Function beforeConfirm?: Function
alignRight: boolean alignRight: boolean
error: boolean error: boolean
required: boolean required: boolean
size: string size?: string
valueKey: string valueKey: string
labelKey: string labelKey: string
tipKey: string tipKey: string
@ -138,6 +140,7 @@ const props = withDefaults(defineProps<Props>(), {
customViewClass: '', customViewClass: '',
customLabelClass: '', customLabelClass: '',
customValueClass: '', customValueClass: '',
columns: () => [],
useLabelSlot: false, useLabelSlot: false,
useDefaultSlot: false, useDefaultSlot: false,
disabled: false, disabled: false,
@ -214,6 +217,8 @@ watch(
selectShowList.value = pickerColSelected.value.map((item, colIndex) => { selectShowList.value = pickerColSelected.value.map((item, colIndex) => {
return getSelectedItem(item, colIndex, newSelectedList)[props.labelKey] return getSelectedItem(item, colIndex, newSelectedList)[props.labelKey]
}) })
console.log(selectShowList.value, 'watch props.columns')
lastSelectList.value = newSelectedList lastSelectList.value = newSelectedList
if (newSelectedList.length > 0) { if (newSelectedList.length > 0) {
@ -310,7 +315,6 @@ function showPicker() {
function getSelectedItem(value, colIndex, selectList) { function getSelectedItem(value, colIndex, selectList) {
const { valueKey, labelKey } = props const { valueKey, labelKey } = props
if (selectList[colIndex]) { if (selectList[colIndex]) {
const selecteds = selectList[colIndex].filter((item) => { const selecteds = selectList[colIndex].filter((item) => {
return item[valueKey] === value return item[valueKey] === value
@ -337,13 +341,14 @@ function chooseItem(colIndex, index) {
pickerColSelected.value = newPickerColSelected pickerColSelected.value = newPickerColSelected
selectList.value = selectList.value.slice(0, colIndex + 1) selectList.value = selectList.value.slice(0, colIndex + 1)
selectShowList.value = newPickerColSelected.map((item, colIndex) => { selectShowList.value = newPickerColSelected.map((item, colIndex) => {
return getSelectedItem(item, colIndex, selectList)[props.labelKey] return getSelectedItem(item, colIndex, selectList.value)[props.labelKey]
}) })
handleColChange(colIndex, item, index) handleColChange(colIndex, item, index)
} }
function handleColChange(colIndex, item, index, callback?) { function handleColChange(colIndex, item, index, callback?) {
loading.value = true loading.value = true
const { columnChange, beforeConfirm } = props const { columnChange, beforeConfirm } = props
columnChange &&
columnChange({ columnChange({
selectedItem: item, selectedItem: item,
index: colIndex, index: colIndex,
@ -367,6 +372,8 @@ function handleColChange(colIndex, item, index, callback?) {
selectShowList.value = pickerColSelected.value.map((item, colIndex) => { selectShowList.value = pickerColSelected.value.map((item, colIndex) => {
return getSelectedItem(item, colIndex, selectList.value)[props.labelKey] return getSelectedItem(item, colIndex, selectList.value)[props.labelKey]
}) })
console.log(selectShowList.value, 'handleColChange')
callback() callback()
} }
}, },

8
src/uni_modules/wot-design-uni/components/wd-col/index.scss
View File

@ -9,7 +9,11 @@ $i: 1;
} }
@while $i <= 24 { @while $i <= 24 {
.wd-col__#{$i} { width: 100% / 24 * $i; } .wd-col__#{$i} {
.wd-col__offset-#{$i} { margin-left: 100% / 24 * $i; } width: calc(100% / 24 * $i);
}
.wd-col__offset-#{$i} {
margin-left: calc(100% / 24 * $i);
}
$i: $i + 1; $i: $i + 1;
} }

32
src/uni_modules/wot-design-uni/components/wd-col/wd-col.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-06-13 11:34:35 * @Date: 2023-06-13 11:34:35
* @LastEditTime: 2023-06-13 12:42:43 * @LastEditTime: 2023-08-15 13:06:34
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-col\wd-col.vue * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-col\wd-col.vue
@ -13,6 +13,16 @@
<slot /> <slot />
</view> </view>
</template> </template>
<script lang="ts">
export default {
name: 'wd-col',
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup> <script lang="ts" setup>
import { inject, provide, watch } from 'vue' import { inject, provide, watch } from 'vue'
@ -63,23 +73,5 @@ provide('setGutter', setGutter) // 将设置子项方法导出
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../common/abstracts/variable'; @import './index.scss';
@import '../common/abstracts/mixin';
$i: 1;
@include b(col) {
float: left;
box-sizing: border-box;
}
@while $i <= 24 {
.wd-col__#{$i} {
width: calc(100% / 24 * $i);
}
.wd-col__offset-#{$i} {
margin-left: calc(100% / 24 * $i);
}
$i: $i + 1;
}
</style> </style>

21
src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss
View File

@ -1,6 +1,27 @@
@import '../common/abstracts/variable'; @import '../common/abstracts/variable';
@import '../common/abstracts/mixin'; @import '../common/abstracts/mixin';
.wot-theme-dark {
@include b(collapse-item) {
@include e(title) {
color: $-dark-color;
}
@include e(body) {
color: $-dark-color3;
}
@include when(disabled) {
.wd-collapse-item__title {
color: $-dark-color-gray;
}
.wd-collapse-item__arrow {
color: $-dark-color-gray;
}
}
}
}
@include b(collapse-item) { @include b(collapse-item) {
@include e(header) { @include e(header) {
position: relative; position: relative;

14
src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-08-01 11:12:05 * @Date: 2023-08-01 11:12:05
* @LastEditTime: 2023-08-04 13:34:54 * @LastEditTime: 2023-08-15 16:30:17
* @LastEditors: weisheng * @LastEditors: weisheng
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-collapse-item\wd-collapse-item.vue * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-collapse-item\wd-collapse-item.vue
@ -20,6 +20,16 @@
</view> </view>
</view> </view>
</template> </template>
<script lang="ts">
export default {
name: 'wd-collapse-item',
options: {
addGlobalClass: true,
virtualHost: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, getCurrentInstance, inject, onMounted, ref, watch } from 'vue' import { computed, getCurrentInstance, inject, onMounted, ref, watch } from 'vue'
@ -30,7 +40,7 @@ const $body = '.wd-collapse-item__body'
interface Props { interface Props {
customClass?: string customClass?: string
title: string title?: string
disabled: boolean disabled: boolean
name: string name: string
// 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise // 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise

10
src/uni_modules/wot-design-uni/components/wd-collapse/index.scss
View File

@ -1,6 +1,16 @@
@import "../common/abstracts/variable"; @import "../common/abstracts/variable";
@import "../common/abstracts/mixin"; @import "../common/abstracts/mixin";
.wot-theme-dark {
@include b(collapse) {
background: $-dark-background2;
@include e(content) {
color: $-dark-color3;
}
}
}
@include b(collapse) { @include b(collapse) {
background: $-color-white; background: $-color-white;

Some files were not shown because too many files have changed in this diff Show More