diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c0ca8a4 --- /dev/null +++ b/.gitignore @@ -0,0 +1,8 @@ +.project +.hbuilderx +.mini-ide +.idea +unpackage +.DS_Store + +node_modules \ No newline at end of file diff --git a/App.vue b/App.vue index 8c2b732..d714685 100644 --- a/App.vue +++ b/App.vue @@ -1,17 +1,23 @@ - diff --git a/api/index.js b/api/index.js new file mode 100644 index 0000000..5764708 --- /dev/null +++ b/api/index.js @@ -0,0 +1,13 @@ +const files = require.context("./modules", false, /\.js$/), + api = {}; + +files.keys().forEach((key) => { + const last = key.indexOf(".js"), + name = key.slice(2, last); + + api[name] = files(key).default; +}); + +export default { + ...api, +}; diff --git a/api/modules/user.js b/api/modules/user.js new file mode 100644 index 0000000..c7b78f6 --- /dev/null +++ b/api/modules/user.js @@ -0,0 +1,14 @@ +import { + request +} from "@/utils/request"; + +export default { + // 登录 + login(data) { + return request({ + url: "/admin/auth/login", + method: "POST", + data, + }); + }, +}; \ No newline at end of file diff --git a/components/myTable/index.vue b/components/myTable/index.vue new file mode 100644 index 0000000..e724777 --- /dev/null +++ b/components/myTable/index.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/env.js b/env.js new file mode 100644 index 0000000..59a451c --- /dev/null +++ b/env.js @@ -0,0 +1,4 @@ +export default { + host: "https://saasdemo.byin.vip", + NETWORK_TIME_OUT: 15000, +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..265bdbe --- /dev/null +++ b/package.json @@ -0,0 +1,12 @@ +{ + "devDependencies": { + "autoprefixer": "^10.4.8", + "postcss": "^8.4.14", + "postcss-rem-to-responsive-pixel": "^5.1.3", + "tailwindcss": "^3.1.7", + "weapp-tailwindcss-webpack-plugin": "^1.6.10" + }, + "dependencies": { + "js-md5": "^0.8.3" + } +} diff --git a/pages.json b/pages.json index 869105d..1204b32 100644 --- a/pages.json +++ b/pages.json @@ -1,10 +1,59 @@ { - "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages + "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } + }, + { + "path": "pages/login/index", + "style": { + "navigationBarTitleText": "登录" + } + } + ], + "subPackages": [ + { + "root": "store", + "pages": [ + { + "path": "index/index", + "style": { + "navigationBarTitleText": "商城首页", + "enablePullDownRefresh": false, + "mp-alipay": { + "transparentTitle": "always", + "titlePenetrate": "YES", + "gestureBack": "YES" + } + } + }, + { + "path": "goods/index", + "style": { + "navigationBarTitleText": "商品管理", + "enablePullDownRefresh": false, + "mp-alipay": { + "transparentTitle": "always", + "titlePenetrate": "YES", + "gestureBack": "YES" + } + } + }, + { + "path": "order/index", + "style": { + "navigationBarTitleText": "订单管理", + "enablePullDownRefresh": false, + "mp-alipay": { + "transparentTitle": "always", + "titlePenetrate": "YES", + "gestureBack": "YES" + } + } + } + ] } ], "globalStyle": { @@ -14,4 +63,4 @@ "backgroundColor": "#F8F8F8" }, "uniIdRouter": {} -} +} \ No newline at end of file diff --git a/pages/index/index.vue b/pages/index/index.vue index ec0ec26..510e7ce 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -1,52 +1,45 @@ - diff --git a/pages/login/index.vue b/pages/login/index.vue new file mode 100644 index 0000000..b8b39df --- /dev/null +++ b/pages/login/index.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/store/goods/index.vue b/store/goods/index.vue new file mode 100644 index 0000000..8dcc06b --- /dev/null +++ b/store/goods/index.vue @@ -0,0 +1,11 @@ + + + + + diff --git a/store/index/index.vue b/store/index/index.vue new file mode 100644 index 0000000..7deed65 --- /dev/null +++ b/store/index/index.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/store/order/index.vue b/store/order/index.vue new file mode 100644 index 0000000..8dcc06b --- /dev/null +++ b/store/order/index.vue @@ -0,0 +1,11 @@ + + + + + diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..c71b058 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,15 @@ +const path = require("path"); +const resolve = (p) => { + return path.resolve(__dirname, p); +}; +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./index.html", "./**/*.vue"].map(resolve), + theme: { + extend: {}, + }, + plugins: [], + corePlugins: { + preflight: false, + }, +}; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..06b4bf7 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,8 @@ +// tsconfig.json +{ + "compilerOptions": { + "types": [ + "wot-design-uni/global.d.ts" + ] + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/changelog.md b/uni_modules/wot-design-uni/changelog.md new file mode 100644 index 0000000..b74d786 --- /dev/null +++ b/uni_modules/wot-design-uni/changelog.md @@ -0,0 +1,777 @@ +## 0.2.3(2023-12-27) +## 0.2版本正式发布,支持Form自定义表单校验 +> 请注意Input组件有破坏性更新 +### [0.2.3](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.2...v0.2.3) (2023-12-27) + + +### ✏️ Documentation | 文档 + +* ✏️ 修复动态表单演示页面标题错误的问题 ([7c65359](https://github.com/Moonofweisheng/wot-design-uni/commit/7c65359c88614ae53c4800d0946d8e09ef547a26)) + +# 更新日志 + + +### [0.2.3](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.2...v0.2.3) (2023-12-27) + + +### ✏️ Documentation | 文档 + +* ✏️ 修复动态表单演示页面标题错误的问题 ([7c65359](https://github.com/Moonofweisheng/wot-design-uni/commit/7c65359c88614ae53c4800d0946d8e09ef547a26)) + +### [0.2.2](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.1...v0.2.2) (2023-12-26) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 移除 Swiper 的list中不必填的属性 ([672f680](https://github.com/Moonofweisheng/wot-design-uni/commit/672f680051009edd23a67d4e32722839f519d9ba)) + + +### ✏️ Documentation | 文档 + +* ✏️ 修复 Textarea 文档示例错误的问题 ([7da3a4c](https://github.com/Moonofweisheng/wot-design-uni/commit/7da3a4cdfe35f87193f57139de0819130424d6ea)) +* ✏️ 优化 Form 相关组件的文档介绍 ([6a0a7a7](https://github.com/Moonofweisheng/wot-design-uni/commit/6a0a7a730fcd8904609f8a48339e1079baf3e9be)) + +### [0.2.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.0...v0.2.1) (2023-12-25) + + +### ✏️ Documentation | 文档 + +* ✏️ PassowrdInput 密码输入框组件增加文档标题 ([cccc4cc](https://github.com/Moonofweisheng/wot-design-uni/commit/cccc4cc0d4952f594e5387bad32a7248009ebd9e)) + +## [0.2.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.70...v0.2.0) (2023-12-24) + + +### ✨ Features | 新功能 + +* ✨ 新增 Form 表单组件 ([c8086d6](https://github.com/Moonofweisheng/wot-design-uni/commit/c8086d624c01bfbae3b9dfc324d33d6bfe46e041)) +* ✨ 新增 PasswordInput 密码输入框 ([b8c68f9](https://github.com/Moonofweisheng/wot-design-uni/commit/b8c68f92f7ddbf3ae2a58bf36593a0cd0340f225)) +* ✨ 新增 textarea 文本域组件 ([ed56bcd](https://github.com/Moonofweisheng/wot-design-uni/commit/ed56bcdb0337c198e8834182d47d1cd83513091d)) +* ✨ 增加父子组件 Provide/Inject 的hooks ([eb971d4](https://github.com/Moonofweisheng/wot-design-uni/commit/eb971d4e86733b0337de0c63f26b373424a842f0)) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Input 组件在支付宝平台存在一个默认padding的问题 ([921c906](https://github.com/Moonofweisheng/wot-design-uni/commit/921c90606e05ea1b29cdee39cde7858907b2cd4d)) + + +### ✏️ Documentation | 文档 + +* ✏️ 调整主题定制相关文档 ([2d5b1af](https://github.com/Moonofweisheng/wot-design-uni/commit/2d5b1af2787d33ec24eb6e6ab9db6ff941d80c2b)) +* ✏️ 增加 textarea 文本域组件功能的迁移说明 ([61ebc7d](https://github.com/Moonofweisheng/wot-design-uni/commit/61ebc7db1e1db3e8634a87c24fae0869f4b6f17b)) +* ✏️ PasswordInput 密码输入框文档增加版本介绍 ([56ccf60](https://github.com/Moonofweisheng/wot-design-uni/commit/56ccf6005e502237e1ff45b5b52e852b402a10c9)) + +### [0.1.70](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.69...v0.1.70) (2023-12-23) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 picker 的列value为0时回显异常的问题 ([2ba93c3](https://github.com/Moonofweisheng/wot-design-uni/commit/2ba93c328c54c41b6e1e9ead946e9c46e278ebb9)), closes [#155](https://github.com/Moonofweisheng/wot-design-uni/issues/155) + +### [0.1.69](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.68...v0.1.69) (2023-12-13) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Notify 使用文档错误的问题 ([3fe6423](https://github.com/Moonofweisheng/wot-design-uni/commit/3fe6423c9c6727eaa3655029bf862b9be182b70b)), closes [#148](https://github.com/Moonofweisheng/wot-design-uni/issues/148) + +### [0.1.68](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.67...v0.1.68) (2023-12-07) + + +### ✏️ Documentation | 文档 + +* ✏️ 增加 Gap 组件的文档 ([9e3a8c1](https://github.com/Moonofweisheng/wot-design-uni/commit/9e3a8c1506f9ef93f9f0155ac948c8bc4d215ea8)) + +### [0.1.67](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.66...v0.1.67) (2023-12-06) + + +### ✨ Features | 新功能 + +* ✨ 新增 Gap 间隔槽组件 ([#147](https://github.com/Moonofweisheng/wot-design-uni/issues/147)) ([fa7cd16](https://github.com/Moonofweisheng/wot-design-uni/commit/fa7cd163810cbcd63fc2a99a6a92ccd8a803b2f1)) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复Picker组件v-model数据不更新的问题 ([e60f475](https://github.com/Moonofweisheng/wot-design-uni/commit/e60f47538130625a8c8f93e3a6795b7e71588002)), closes [#146](https://github.com/Moonofweisheng/wot-design-uni/issues/146) + +### [0.1.66](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.65...v0.1.66) (2023-12-01) + + +### ✨ Features | 新功能 + +* ✨ Tag 组件type增加属性值default ([#143](https://github.com/Moonofweisheng/wot-design-uni/issues/143)) ([48f0e4b](https://github.com/Moonofweisheng/wot-design-uni/commit/48f0e4b3c484755a0da4eb11fa814c6b52be74b1)) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 ActionSheet 组件设置custom-class无效的问题 ([1e5bcf7](https://github.com/Moonofweisheng/wot-design-uni/commit/1e5bcf7d0a8be66b80de81a0359d3fb429fdf52d)) + +### [0.1.65](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.64...v0.1.65) (2023-11-29) + + +### ✨ Features | 新功能 + +* ✨ 新增 NumberKeyboard 数字键盘组件 ([#139](https://github.com/Moonofweisheng/wot-design-uni/issues/139)) ([7bb4455](https://github.com/Moonofweisheng/wot-design-uni/commit/7bb4455c6d9eca179ba174b8ad0da6ae8a09defc)) +* Tag新增类型标签添加slot ([7977dbb](https://github.com/Moonofweisheng/wot-design-uni/commit/7977dbbe3565eb06b700f2c55a31803647760fa9)) + + +### ✏️ Documentation | 文档 + +* ✏️ 新增关于 Tag 组件的add插槽的介绍 ([537fa5e](https://github.com/Moonofweisheng/wot-design-uni/commit/537fa5ebf8dcdc14ee12fc1f1e5a5f829653a14a)) + +### [0.1.64](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.63...v0.1.64) (2023-11-25) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复DateTimePicker标题展示和模式为区间时before-confirm参数错误的问题 ([7bcd12b](https://github.com/Moonofweisheng/wot-design-uni/commit/7bcd12ba633224dd42b160f0b43fadc99ac76707)) + +### [0.1.63](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.62...v0.1.63) (2023-11-23) + + +### ✨ Features | 新功能 + +* ✨ CountDown 倒计时组件支持custom-class和custom-style ([dd60d6d](https://github.com/Moonofweisheng/wot-design-uni/commit/dd60d6df855cc49eba36beb7bcfb9eeb96ed0c82)) +* ✨ Search 搜索组件支持自动聚焦和清空后自动聚焦 ([2e3ab63](https://github.com/Moonofweisheng/wot-design-uni/commit/2e3ab63d3dad582c44d9d9f8d2b57e21ee22f380)) + + +### ✏️ Documentation | 文档 + +* ✏️ 修复文档中config-provider等页面的错误 ([f71e641](https://github.com/Moonofweisheng/wot-design-uni/commit/f71e6412e770f2043e4cb9a35950a68aacf0e542)) + +### [0.1.62](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.61...v0.1.62) (2023-11-22) + + +### ✨ Features | 新功能 + +* ✨ Badge 徽标组件支持控制是否显示0值 ([65cfb2c](https://github.com/Moonofweisheng/wot-design-uni/commit/65cfb2ca15c29783f6de48de0bda4ddc3d43664a)) +* ✨ Upload 上传组件支持h5端获取文件后缀名 ([59fe70c](https://github.com/Moonofweisheng/wot-design-uni/commit/59fe70c0d0c55c7ecca26902b41599be94e34fe3)) + + +### ✏️ Documentation | 文档 + +* ✏️ 优化 Upload 文档中关于云存储内容的样式 ([607ce05](https://github.com/Moonofweisheng/wot-design-uni/commit/607ce05100ffef9c5c98b503e580a718551f5552)) + +### [0.1.61](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.60...v0.1.61) (2023-11-20) + + +### ✏️ Documentation | 文档 + +* ✏️ 修复 Tag 标签组件文档错乱的问题 ([502203b](https://github.com/Moonofweisheng/wot-design-uni/commit/502203bebf08d7e6851b8dd2f94768f6c620da26)) +* ✏️ ImgCropper 组件演示页面增加微信小程序隐私协议弹框 ([3af9246](https://github.com/Moonofweisheng/wot-design-uni/commit/3af9246d1f1876ba3c83f6829a9716ad37ae5829)) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Calendar 日历组件存在未定义属性导致警告的问题 ([d0d3152](https://github.com/Moonofweisheng/wot-design-uni/commit/d0d3152a5ca1a3e06135b12f4565211258619d1f)) +* 🐛 修复 CountDown 倒计时组件文档手动控制示例错误的问题 ([3c373fb](https://github.com/Moonofweisheng/wot-design-uni/commit/3c373fbf3af02c8a73ddd3a4063f9408ec4f33ff)) +* 🐛 修复 SelectPicker 组件loading状态仍可以滚动的问题 ([c5a1bff](https://github.com/Moonofweisheng/wot-design-uni/commit/c5a1bfff576aad8a6f03288a6a12a8ed24f776f2)) + + +### ✨ Features | 新功能 + +* ✨ Upload 上传组件支持上传至云存储 ([523a6be](https://github.com/Moonofweisheng/wot-design-uni/commit/523a6be40b065c4cc28cfe81fdcb200142d9a455)) + +### [0.1.60](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.59...v0.1.60) (2023-11-20) + + +### ✏️ Documentation | 文档 + +* ✏️ 修复 CountDown 倒计时组件默认slot用法的介绍错误的问题 ([2fbb88f](https://github.com/Moonofweisheng/wot-design-uni/commit/2fbb88fcd9fe21de09637d48149278d9aef5e1d9)) + +### [0.1.59](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.58...v0.1.59) (2023-11-19) + +### [0.1.58](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.57...v0.1.58) (2023-11-19) + + +### ✨ Features | 新功能 + +* ✨ 新增 CountDown 倒计时组件 ([a805d04](https://github.com/Moonofweisheng/wot-design-uni/commit/a805d04827600525c08fbc1848cb3a524b48e81a)) +* ✨ CountDown 倒计时组件支持小程序 ([22f249a](https://github.com/Moonofweisheng/wot-design-uni/commit/22f249ae5bdedea1ecebfe31350c7b5a1e394f2e)) + +### [0.1.57](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.56...v0.1.57) (2023-11-17) + + +### ✨ Features | 新功能 + +* ✨ 新增 Fab 悬浮动作按钮组件 ([3c526fe](https://github.com/Moonofweisheng/wot-design-uni/commit/3c526feb102ccf17da0678a6e1c004bb82d57f0f)) + + +### ✏️ Documentation | 文档 + +* ✏️ 修复 Cell 组件点击反馈的介绍错误的问题 ([9096d81](https://github.com/Moonofweisheng/wot-design-uni/commit/9096d81f514348d6103f33590387d0406b217198)) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Table 表格组件数字英文换行失效的问题 ([47ac339](https://github.com/Moonofweisheng/wot-design-uni/commit/47ac3390cb58d250129a9db6ade8d90f980855a1)) + +### [0.1.56](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.55...v0.1.56) (2023-11-12) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Tabbar 标签栏组件 bordered 属性无效的问题 ([69c2656](https://github.com/Moonofweisheng/wot-design-uni/commit/69c265638c6fc36a1479a37c052a572da333006f)) + +### [0.1.55](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.54...v0.1.55) (2023-11-12) + + +### 🐛 Bug Fixes | Bug 修复 + +* 修正README.md 中[贡献指南]链接错误,跳转失败的问题。 ([071de88](https://github.com/Moonofweisheng/wot-design-uni/commit/071de88f98fa90492032193606941fbcdfe9283d)) + + +### ✨ Features | 新功能 + +* ✨ Swiper 轮播图组件增加imageMode属性支持自定义图片裁剪缩放模式 ([4205c01](https://github.com/Moonofweisheng/wot-design-uni/commit/4205c0149d3224e318ef21563e96f0a843ad13bc)) + +### [0.1.54](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.53...v0.1.54) (2023-11-10) + + +### 🐛 Bug Fixes | Bug 修复 + +* 修正ColPicker多列选择器v-model类型提示使用Record[]实际上的数据是单维数组的问题 ([c490ac6](https://github.com/Moonofweisheng/wot-design-uni/commit/c490ac607e6f9eb7207b90943b83ce1696a30fd4)) + +### [0.1.53](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.52...v0.1.53) (2023-11-09) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Input 输入框组件包含无用显示内容的问题 ([13a3106](https://github.com/Moonofweisheng/wot-design-uni/commit/13a3106055d66083d640912bfff67f2e08781f03)) + +### [0.1.52](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.51...v0.1.52) (2023-11-09) + + +### ✨ Features | 新功能 + +* ✨ Input绑定值为null时的警告从error改为warn ([70f1407](https://github.com/Moonofweisheng/wot-design-uni/commit/70f1407eec057668da0117c9861b523ab667da70)) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Badge 徽标组件暗黑模式下边框颜色未兼容的问题 ([c0a0b5a](https://github.com/Moonofweisheng/wot-design-uni/commit/c0a0b5aaea238f144978a3a9b2ab6db202dfdc21)), closes [#115](https://github.com/Moonofweisheng/wot-design-uni/issues/115) + +### [0.1.51](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.50...v0.1.51) (2023-11-06) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复引入错误依赖的问题 ([15bc876](https://github.com/Moonofweisheng/wot-design-uni/commit/15bc876a3026319c88ce4b757593243f9869ce39)) + +### [0.1.50](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.49...v0.1.50) (2023-11-06) + + +### ✨ Features | 新功能 + +* ✨ SidebarItem、TabbarItem、GridItem组件增加徽标自定义属性badge-props ([7143098](https://github.com/Moonofweisheng/wot-design-uni/commit/71430989bff81a137fc5199eeeefe0a4da3ce31d)) + +### [0.1.49](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.48...v0.1.49) (2023-11-05) + + +### ✨ Features | 新功能 + +* ✨ 新增 Sidebar 侧边栏组件 ([#113](https://github.com/Moonofweisheng/wot-design-uni/issues/113)) ([d189378](https://github.com/Moonofweisheng/wot-design-uni/commit/d189378a02aeb36c275218358849a187e88ce687)) + +### [0.1.48](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.47...v0.1.48) (2023-11-04) + + +### ✨ Features | 新功能 + +* ✨ Input 输入框增加支持微信小程序原生属性always-embed ([57d00ec](https://github.com/Moonofweisheng/wot-design-uni/commit/57d00ececd9849a2d21f59fc863b6ad8933419d8)) + +### [0.1.47](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.46...v0.1.47) (2023-11-02) + + +### ✏️ Documentation | 文档 + +* ✏️ 修复 Image 图片组件演示demo样式不友好的问题 ([cbdab19](https://github.com/Moonofweisheng/wot-design-uni/commit/cbdab1959efff642a60a351ffd6454dcd173b9a4)) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Input 组件为textarea类型时show-confirm-bar不生效的问题 ([eebec8a](https://github.com/Moonofweisheng/wot-design-uni/commit/eebec8a74fa9399bfd305cadb1a9b6a526e88568)) +* 🐛 img 预览demo布局错位 ([0397809](https://github.com/Moonofweisheng/wot-design-uni/commit/0397809d81010e109c238eefea56c82bd06a50cb)) + + +### ✨ Features | 新功能 + +* ✨ 图片添加圆角大小设置 ([98edaed](https://github.com/Moonofweisheng/wot-design-uni/commit/98edaed6cb1c81b9ed6e05561814aaa51b31b2b3)) +* ✨ Badge 徽标组件增加customStyle自定义样式 ([d194106](https://github.com/Moonofweisheng/wot-design-uni/commit/d194106f07fb46f6a979967ba327dee1b41ca70e)) + +### [0.1.46](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.45...v0.1.46) (2023-11-02) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Tabs 组件在微信小程序端有概率不绘制下划线的问题 ([d70ec65](https://github.com/Moonofweisheng/wot-design-uni/commit/d70ec65998d1ca1fbdbd3b4ef1af4a292a597f55)) + +### [0.1.45](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.44...v0.1.45) (2023-11-01) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Switch 开关组件自定义大小无效的问题 ([15ffa1f](https://github.com/Moonofweisheng/wot-design-uni/commit/15ffa1f9172d3c11722c71ca370c1016e25f2b41)) + +### [0.1.44](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.43...v0.1.44) (2023-11-01) + + +### ✨ Features | 新功能 + +* ✨ 使用 useQueue hook替换clickOut实现关闭多个气泡等组件的功能 ([3a24999](https://github.com/Moonofweisheng/wot-design-uni/commit/3a24999c1e28414b12806cad3c3bc6f7a445593f)) + + +### ✏️ Documentation | 文档 + +* ✏️ 优化演示项目首页样式 ([e98f30e](https://github.com/Moonofweisheng/wot-design-uni/commit/e98f30e0125e287d2bc5cdbcfff69a35cb7436d8)) + +### [0.1.43](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.42...v0.1.43) (2023-10-31) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Tooltip 文字提示组件微信端关闭按钮样式错误的问题 ([ec1b949](https://github.com/Moonofweisheng/wot-design-uni/commit/ec1b9490b9517d0e4ebe4a5130a418a684b1a589)) + +### [0.1.42](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.41...v0.1.42) (2023-10-31) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Popover、Tooltip 组件展开过程中无法遮盖图片的问题 ([db009c1](https://github.com/Moonofweisheng/wot-design-uni/commit/db009c1229413f7ecc446e3e3a1db4d7678268b3)) + +### [0.1.41](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.40...v0.1.41) (2023-10-31) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Popover、Tooltip 组件展开切换动画不流畅的问题 ([c765b08](https://github.com/Moonofweisheng/wot-design-uni/commit/c765b085a6018433bb95fd7647c091393e2e6e7c)), closes [#101](https://github.com/Moonofweisheng/wot-design-uni/issues/101) + +### [0.1.40](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.39...v0.1.40) (2023-10-30) + + +### ✏️ Documentation | 文档 + +* ✏️ 移除文档中 Search 组件未支持的插槽 ([325e140](https://github.com/Moonofweisheng/wot-design-uni/commit/325e14046de38eb7c4e792a64a290c9997af5cba)) + +### [0.1.39](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.38...v0.1.39) (2023-10-29) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 DateTimePicker 日期选择器组件双向绑定错误的问题 ([1b13873](https://github.com/Moonofweisheng/wot-design-uni/commit/1b13873cef4b7c760698abce7dca500cd548c660)) + + +### ✨ Features | 新功能 + +* ✨ 新增 Table 表格组件 ([#98](https://github.com/Moonofweisheng/wot-design-uni/issues/98)) ([c8395f8](https://github.com/Moonofweisheng/wot-design-uni/commit/c8395f8a7e1ad041b003672081b715a7c755adc1)) +* ✨ Collpase 折叠面板组件增加分割线 ([adc6633](https://github.com/Moonofweisheng/wot-design-uni/commit/adc6633ad80b74e801a48a50917c9a2d378de9e0)), closes [#97](https://github.com/Moonofweisheng/wot-design-uni/issues/97) + +### [0.1.38](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.37...v0.1.38) (2023-10-25) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Upload 组件showLimitNum属性名拼写错误的问题 ([301cbff](https://github.com/Moonofweisheng/wot-design-uni/commit/301cbff20facf60b5645108972f22c8c14235f87)) + +### [0.1.37](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.36...v0.1.37) (2023-10-25) + + +### ✏️ Documentation | 文档 + +* ✏️ 修复Tabbar组件类型警告的问题并优化文档相关链接 ([28c3cef](https://github.com/Moonofweisheng/wot-design-uni/commit/28c3cefdfc24f3f6f2669de5f93456a0db281f72)) +* ✏️ issues 模板更新 ([e34c5cd](https://github.com/Moonofweisheng/wot-design-uni/commit/e34c5cded1c850d22165c544a3c6a351701479ec)) + +### [0.1.36](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.35...v0.1.36) (2023-10-21) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Tabs 指定name时双向绑定值仍为index的问题 ([756cad8](https://github.com/Moonofweisheng/wot-design-uni/commit/756cad8d6fcaefb0bf73f1cd2b9f4a24f5827b37)), closes [#91](https://github.com/Moonofweisheng/wot-design-uni/issues/91) + +### [0.1.35](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.34...v0.1.35) (2023-10-21) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Tabs 组件通过name匹配时抛出异常的问题 ([b36fb1f](https://github.com/Moonofweisheng/wot-design-uni/commit/b36fb1f9def0aa99c521ffc20c6cae8074b56838)), closes [#91](https://github.com/Moonofweisheng/wot-design-uni/issues/91) + +### [0.1.34](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.33...v0.1.34) (2023-10-18) + + +### ✨ Features | 新功能 + +* ✨ SelectPicker 单复选选择器增加 scroll-into-view 属性支持定位到选中值 ([00b27c1](https://github.com/Moonofweisheng/wot-design-uni/commit/00b27c187438426471dab2ea15bc39d627773ab2)), closes [#68](https://github.com/Moonofweisheng/wot-design-uni/issues/68) + +### [0.1.33](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.32...v0.1.33) (2023-10-17) + + +### ✨ Features | 新功能 + +* ✨ 新增 Navbar 导航栏组件 ([#86](https://github.com/Moonofweisheng/wot-design-uni/issues/86)) ([5f66f71](https://github.com/Moonofweisheng/wot-design-uni/commit/5f66f713fae9e693fda4a472bc3e0767a1a6d3e8)) + +### [0.1.32](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.31...v0.1.32) (2023-10-16) + + +### ✨ Features | 新功能 + +* ✨ Tabs 组件调整为受控组件 ([b2a70bc](https://github.com/Moonofweisheng/wot-design-uni/commit/b2a70bc8f32800119924b29283db760af8a3ddb1)), closes [#82](https://github.com/Moonofweisheng/wot-design-uni/issues/82) + +### [0.1.31](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.30...v0.1.31) (2023-10-16) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复wd-popup组件的click-modal方法错误调用的问题 ([224e3e5](https://github.com/Moonofweisheng/wot-design-uni/commit/224e3e53f912a236e8e24f8afef64fa09f6a89aa)) + + +### ✏️ Documentation | 文档 + +* ✏️ 更新文档中关于组件数量的介绍 ([4fa7355](https://github.com/Moonofweisheng/wot-design-uni/commit/4fa7355e69a8bb32d1c9924cfc717caaf3345ee5)) +* ✏️ 增加 Overlay 遮罩层组件的文档 ([3bca4b6](https://github.com/Moonofweisheng/wot-design-uni/commit/3bca4b65c2bc7cd7f90e8b9513c619799f9a438b)) + +### [0.1.30](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.29...v0.1.30) (2023-10-14) + + +### ✨ Features | 新功能 + +* ✨ 新增 Overlay 遮罩层组件 ([41b2c4f](https://github.com/Moonofweisheng/wot-design-uni/commit/41b2c4f3677dcce9c3e18875b7a1ec32d02b3d6a)) +* ✨ Popup 弹出层组件增加 lock-scroll 属性 ([a6987e6](https://github.com/Moonofweisheng/wot-design-uni/commit/a6987e65da2f121d4e95c1b5cb271ed8f9a06e58)) + +### [0.1.29](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.28...v0.1.29) (2023-10-13) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Tabbar 标签栏组件固定底部时不设置placeholder情况下仍占据相应空间的问题 ([b58f9df](https://github.com/Moonofweisheng/wot-design-uni/commit/b58f9dfc8230e9427f2af658c8315c5b022b232c)) + +### [0.1.28](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.27...v0.1.28) (2023-10-12) + + +### ✏️ Documentation | 文档 + +* ✏️ 文档样式优化 ([f21ecb9](https://github.com/Moonofweisheng/wot-design-uni/commit/f21ecb9dfbfbf0afe49a760d24ebdc08e4799717)) + +### [0.1.27](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.26...v0.1.27) (2023-10-12) + + +### ⚡ Performance Improvements | 性能优化 + +* ⚡ Segmented 分段器组件兼容支付宝小程序 ([3fd57a6](https://github.com/Moonofweisheng/wot-design-uni/commit/3fd57a600b537b945a8224bb97344baa9b0929e0)) + + +### ✏️ Documentation | 文档 + +* ✏️ 调整文档中图片的CDN地址 ([f704568](https://github.com/Moonofweisheng/wot-design-uni/commit/f704568f0299acbd3cc2d88934bfa1641b6cc792)) +* ✏️ 修复文档中根节点错写为根结点的问题 ([6da4145](https://github.com/Moonofweisheng/wot-design-uni/commit/6da414503ceb8b6de680b10332af45dbbbe7229d)) + + +### ✨ Features | 新功能 + +* ✨ 新增 Tabbar 标签栏组件 ([aa0bf19](https://github.com/Moonofweisheng/wot-design-uni/commit/aa0bf194865e381af41f7afa18e46105e0c812a9)) +* ✨ Icon 组件新增图标并支持第三方iconfont ([bc241ac](https://github.com/Moonofweisheng/wot-design-uni/commit/bc241acfc103309f196f4c04e08288526a056073)) + +### [0.1.26](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.25...v0.1.26) (2023-10-10) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Slider 滑块组件双向滑动时右边滑块百分比计算错误的问题 ([92db0f2](https://github.com/Moonofweisheng/wot-design-uni/commit/92db0f2c7fb60b04e1562c55f6296b1b2b456144)) + +### [0.1.25](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.24...v0.1.25) (2023-10-10) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Silder 滑块组件双向滑动时自定义最大值小于100无法滚动到最大值的问题 ([a70afa4](https://github.com/Moonofweisheng/wot-design-uni/commit/a70afa43239bc233ee0250e26227dbacd5c7021b)), closes [#69](https://github.com/Moonofweisheng/wot-design-uni/issues/69) + +### [0.1.24](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.23...v0.1.24) (2023-10-10) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 优化 Badge 徽标组件超出max的显示并修复分段器组件错误依赖的问题 ([a48adc8](https://github.com/Moonofweisheng/wot-design-uni/commit/a48adc8395ab167bb88a7a647420b467d7e4c46d)) + +### [0.1.23](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.22...v0.1.23) (2023-09-28) + + +### ✨ Features | 新功能 + +* ✨ 增加 segmented 分段器组件 ([00f52c8](https://github.com/Moonofweisheng/wot-design-uni/commit/00f52c89e0aebc86f70aa8a7391ce1f17412333d)) + +### [0.1.22](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.21...v0.1.22) (2023-09-25) + + +### ✨ Features | 新功能 + +* ✨ 新增 Swiper 轮播图组件 ([cf9fe98](https://github.com/Moonofweisheng/wot-design-uni/commit/cf9fe9807efe863e786bc56eedf506647ac143d2)) + +### [0.1.21](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.20...v0.1.21) (2023-09-22) + +### [0.1.20](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.19...v0.1.20) (2023-09-20) + + +### ✏️ Documentation | 文档 + +* ✏️ 恢复展示 Circle 组件的演示Demo ([c2cba05](https://github.com/Moonofweisheng/wot-design-uni/commit/c2cba056578593172998f03592652ab63ed23aef)) +* ✏️ 文档演示项目 Circle 页面文件调整为大写 ([fff8de8](https://github.com/Moonofweisheng/wot-design-uni/commit/fff8de8f8d5f829c5b054d863905a7bb116f45f4)) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Circle 组件重复创建canvas导致警告的问题 ([6917201](https://github.com/Moonofweisheng/wot-design-uni/commit/69172016ba840458dd40755050929a8231fd4cd5)) +* 🐛 修复 Skeleton 骨架屏组件编译到APP端异常的问题([#52](https://github.com/Moonofweisheng/wot-design-uni/issues/52)) ([7a9a31b](https://github.com/Moonofweisheng/wot-design-uni/commit/7a9a31bd5db76419408a114fbed02c108b972049)) +* 🐛 修复 Tag 组件编译到微信小程序平台样式错误的问题([#53](https://github.com/Moonofweisheng/wot-design-uni/issues/53)) ([6aec241](https://github.com/Moonofweisheng/wot-design-uni/commit/6aec2414a384c68e7b4b09f57d028173be942f7b)) + +### [0.1.19](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.18...v0.1.19) (2023-09-20) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Cell、Grid 组件跳转方法在编译到H5端失效的问题([#49](https://github.com/Moonofweisheng/wot-design-uni/issues/49)) ([51425b1](https://github.com/Moonofweisheng/wot-design-uni/commit/51425b107a8b262bf9c1f0c7ee41bb8d56a12837)) + + +### ✨ Features | 新功能 + +* ✨ 新增 Circle 环形进度条组件,支持进度渐变动画 ([7c38a6f](https://github.com/Moonofweisheng/wot-design-uni/commit/7c38a6f03e76d91d82a80d2a4cdd875acfb7290b)) + +### [0.1.18](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.17...v0.1.18) (2023-09-19) + + +### ✏️ Documentation | 文档 + +* ✏️ README中增加展示 star-history ([e7cd794](https://github.com/Moonofweisheng/wot-design-uni/commit/e7cd794201435ae8109b562daf70def74ab4ac98)) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 PickerView 组件选中框被遮盖的问题([#46](https://github.com/Moonofweisheng/wot-design-uni/issues/46)) ([a60440b](https://github.com/Moonofweisheng/wot-design-uni/commit/a60440b8c52723e4c194b103e9b1b236a7cb29fe)) + +### [0.1.17](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.16...v0.1.17) (2023-09-19) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复 Slider 滑块组件最大值和最小值不生效的问题([#43](https://github.com/Moonofweisheng/wot-design-uni/issues/43)) ([0fa7f46](https://github.com/Moonofweisheng/wot-design-uni/commit/0fa7f46718e918007491a3d9494292a003924243)) + +### [0.1.16](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.15...v0.1.16) (2023-09-18) + + +### ✨ Features | 新功能 + +* ✨ 新增 WaterMark 水印组件 ([70d8c25](https://github.com/Moonofweisheng/wot-design-uni/commit/70d8c2546135fce1709edb0e1ba0c3b66c1e9e2e)) + +### [0.1.15](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.14...v0.1.15) (2023-09-18) + + +### ✏️ Documentation | 文档 + +* ✏️ 优化DateTimePicker组件关于time类型选择器绑定值格式的介绍 ([9e958c7](https://github.com/Moonofweisheng/wot-design-uni/commit/9e958c73f1d09ee0e02097e3ca8eeabfcc1bc59b)) + +### [0.1.14](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.13...v0.1.14) (2023-09-14) + + +### ✏️ Documentation | 文档 + +* ✏️ 增加QQ群沟通渠道 ([80efad9](https://github.com/Moonofweisheng/wot-design-uni/commit/80efad950613d65e7e65d305ad6efe7cd0e201d8)) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复SelectPicker 单复选选择器单选可搜索状态搜索报错的问题([#38](https://github.com/Moonofweisheng/wot-design-uni/issues/38)) ([01cf01d](https://github.com/Moonofweisheng/wot-design-uni/commit/01cf01d46fbc4ac35f0c09e3db6f6d18b2d3455e)) + +### [0.1.13](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.12...v0.1.13) (2023-09-12) + + +### ✨ Features | 新功能 + +* ✨ Tabs组件增加animated属性支持切换动画 ([2572ea4](https://github.com/Moonofweisheng/wot-design-uni/commit/2572ea4c31f834bb9c8776322c24148ca2bda4e2)) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复Popover组件content属性必填警告的问题 ([4d8f8e6](https://github.com/Moonofweisheng/wot-design-uni/commit/4d8f8e640742b0588b91b0a5b82a062b976f8306)) + +### [0.1.12](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.11...v0.1.12) (2023-09-12) + + +### ✏️ Documentation | 文档 + +* ✏️ 修复文档中定制主题和反馈组件404的问题 ([c0302ad](https://github.com/Moonofweisheng/wot-design-uni/commit/c0302ada89ea15039ef516f4a425b5e18512c2d5)) +* ✏️ 修复Button组件文档中loading属性重复的问题 ([b26da5a](https://github.com/Moonofweisheng/wot-design-uni/commit/b26da5aba7d698adc75c3e1d143660a698ce5de8)) + +### [0.1.11](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.10...v0.1.11) (2023-09-08) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复文档中部分页面存在死链问题 ([b3e5cbe](https://github.com/Moonofweisheng/wot-design-uni/commit/b3e5cbef1116d9a356f7c9c18dffc1caec20ea22)) + +### [0.1.10](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.9...v0.1.10) (2023-09-08) + + +### ✏️ Documentation | 文档 + +* ✏️ 将驼峰命名的文档文件改为短横线命名便于爬虫爬取及搜索 ([497e991](https://github.com/Moonofweisheng/wot-design-uni/commit/497e991903559c9d62dcb1b00842ee377d70b445)) +* ✏️ 优化icon组件文档的体验,支持点击图标复制使用示例 ([ce0526b](https://github.com/Moonofweisheng/wot-design-uni/commit/ce0526b99dcd203d3f1081a8fd6a0551da88b9b8)) + +### [0.1.9](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.8...v0.1.9) (2023-09-08) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复npm包未配置主入口导致在使用Hbx创建的项目中通过npm安装编译警告的问题 ([fa95a0d](https://github.com/Moonofweisheng/wot-design-uni/commit/fa95a0d19b6e13157154405ddaa2525545bd9f7e)) + +### [0.1.8](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.7...v0.1.8) (2023-09-07) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复ActionSheet等组件在H5端隐藏导航栏或在tabbar页面高度计算错误的问题 ([39201cb](https://github.com/Moonofweisheng/wot-design-uni/commit/39201cbeddde1c7ea883ad331c0607bced755475)) +* 🐛 修复pmpm安装时ts导入类型信息在H5平台报错的问题 ([237c03c](https://github.com/Moonofweisheng/wot-design-uni/commit/237c03c6ae8d041c565ca6bb984765be4418f9e1)) + +### [0.1.7](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.6...v0.1.7) (2023-09-06) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复tabs组件change事件执行两次的问题 ([819059a](https://github.com/Moonofweisheng/wot-design-uni/commit/819059abe19fcf8f9646703fcc7a472b6ae62d4e)) + +### [0.1.6](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.5...v0.1.6) (2023-09-06) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复Input组件内置变量showClear和showWordCount定义为props的问题 ([8021a35](https://github.com/Moonofweisheng/wot-design-uni/commit/8021a35ac9d05d549909531ff4f1c7325127833e)) +* 🐛 修复pnpm安装时运行到h5平台Ref导入报错的问题 ([39c68bf](https://github.com/Moonofweisheng/wot-design-uni/commit/39c68bf57720c1a12b99412c96e46b341cf536b5)) + +### [0.1.5](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.4...v0.1.5) (2023-09-05) + + +### ✏️ Documentation | 文档 + +* ✏️ 增加Stickty和Tabs组件关于H5端自定义导航栏的offset-top的处理方案 ([8a03c4d](https://github.com/Moonofweisheng/wot-design-uni/commit/8a03c4da64296e88a7b3aff5efed4ac04cd039b6)) + +### [0.1.4](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.3...v0.1.4) (2023-09-05) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复CollapseItem组件在微信小程序中展开/收起时指向图标未跟随转动的问题 ([7d0eeae](https://github.com/Moonofweisheng/wot-design-uni/commit/7d0eeae92f2f7b7664a23f7d548187ed8075d5b0)) + +### [0.1.3](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.2...v0.1.3) (2023-09-03) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复通过npm安装时配置自动导入Notify、Toast、Message组件无法打开的问题 ([f45b739](https://github.com/Moonofweisheng/wot-design-uni/commit/f45b73907227c25d9c2fd7b7f0018cc2ab5c47d1)) + +### [0.1.2](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.1...v0.1.2) (2023-09-03) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复部分js引入路径问题 ([67cdfae](https://github.com/Moonofweisheng/wot-design-uni/commit/67cdfaebf9478e286758b2ef851e1a44dc8565a6)) + +### [0.1.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.0...v0.1.1) (2023-09-02) + +## [0.1.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.14...v0.1.0) (2023-09-02) + + +### ✏️ Documentation | 文档 + +* ✏️ ConfigProvider组件演示页面增加手动切换暗黑模式 ([e5f55c7](https://github.com/Moonofweisheng/wot-design-uni/commit/e5f55c72fc1ed6e603f22e501d6cff9d8212a976)) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复Grid组件不展示border的问题 ([819bbbc](https://github.com/Moonofweisheng/wot-design-uni/commit/819bbbca6ab1c999096936da5e9d2dd664e480ce)) +* 🐛 修复MessageBox组件取消按钮不展示的问题 ([d8563d8](https://github.com/Moonofweisheng/wot-design-uni/commit/d8563d833d75b27d0c497c6c945fae8c00ef8dc7)) + +### [0.0.14](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.13...v0.0.14) (2023-09-02) + + +### ✨ Features | 新功能 + +* ✨ 优化缺省状态组件StautsTip,增加支持自定义url和图片大小 ([f463d32](https://github.com/Moonofweisheng/wot-design-uni/commit/f463d3258a954e64352df36004d34b0f12be9a8f)) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复util中addUnit无法处理有单位的字符串的问题 ([8967540](https://github.com/Moonofweisheng/wot-design-uni/commit/8967540ad0f3f0ad7426ee79571cfc4dee6c4d0c)) + + +### ✏️ Documentation | 文档 + +* ✏️ 完善和修复文档中不详细不正确的内容 ([d1b118e](https://github.com/Moonofweisheng/wot-design-uni/commit/d1b118ea78a797499f465269d3a838c0770d993a)) + +### [0.0.13](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.12...v0.0.13) (2023-09-01) + + +### ✏️ Documentation | 文档 + +* ✏️ 官网地址迁移至阿里云oss ([a98868a](https://github.com/Moonofweisheng/wot-design-uni/commit/a98868ae6213c7d7002e5a88893aabe1d0f5d11b)) + +### [0.0.12](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.11...v0.0.12) (2023-08-30) + +### [0.0.11](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.10...v0.0.11) (2023-08-30) + + +### ✨ Features | 新功能 + +* ✨ util工具类提供更好的类型提示 ([4fed439](https://github.com/Moonofweisheng/wot-design-uni/commit/4fed43926f49be6a86ebab54bb36a1a086df4ac6)) + +### [0.0.10](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.9...v0.0.10) (2023-08-27) + + +### ✨ Features | 新功能 + +* ✨ 新增Notify组件、演示demo、文档 ([#9](https://github.com/Moonofweisheng/wot-design-uni/issues/9)) ([996fc39](https://github.com/Moonofweisheng/wot-design-uni/commit/996fc39d708699214faf2e54224b8d38a8a706f7)) +* ✨ 新增Skeleton组件、演示demo、文档 ([#12](https://github.com/Moonofweisheng/wot-design-uni/issues/12)) ([a49e22c](https://github.com/Moonofweisheng/wot-design-uni/commit/a49e22c370163ec3c93bbeb360cc89b3b3c0abc0)) + +### [0.0.9](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.8...v0.0.9) (2023-08-25) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复Cell 单格组件 is-link 不触发 click ([ece5568](https://github.com/Moonofweisheng/wot-design-uni/commit/ece5568ecc03fd8470c2c02120b94c1ee27d55e7)) + +### [0.0.8](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.7...v0.0.8) (2023-08-24) + + +### ✨ Features | 新功能 + +* ✨ 演示项目新增用户隐私保护指引的处理 ([4dd7efe](https://github.com/Moonofweisheng/wot-design-uni/commit/4dd7efe4049c4c815ea1bc57a7fd1819055f10bc)) +* ✨ ActionSheet组件调整为使用v-model设置显示与隐藏 ([aa92332](https://github.com/Moonofweisheng/wot-design-uni/commit/aa92332f3913be000d1aef36a8aed7f34b736ad6)) + +### [0.0.7](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.6...v0.0.7) (2023-08-23) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复部分组件某些属性必填警告的问题 ([1b866c0](https://github.com/Moonofweisheng/wot-design-uni/commit/1b866c062eb7a4ab894d5b2ecd7b7b3fd50ef864)) + +### [0.0.6](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.5...v0.0.6) (2023-08-22) + +### [0.0.5](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.4...v0.0.5) (2023-08-22) + +### [0.0.4](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.3...v0.0.4) (2023-08-21) + + +### ✨ Features | 新功能 + +* ✨ Picker组件优化性能 ([24dd43f](https://github.com/Moonofweisheng/wot-design-uni/commit/24dd43f3a05b7b4ce6bb897219a215f8198e64ac)) + +### [0.0.3](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.2...v0.0.3) (2023-08-18) + +### [0.0.2](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.1...v0.0.2) (2023-08-18) + + +### 🐛 Bug Fixes | Bug 修复 + +* 🐛 修复CheckBoxGroup组件的disabled属性作用在子组件上失效的问题 ([1bab820](https://github.com/Moonofweisheng/wot-design-uni/commit/1bab820c0335c89e099c597caa47af16bb998d83)) + +### 0.0.1 (2023-08-16) + + +### ✨ Features | 新功能 + +* ✨ 适配暗黑模式 ([f5946a4](https://github.com/Moonofweisheng/wot-design-uni/commit/f5946a4b7134fed161bc123d66485e7bc91cdc68)) +* ✨ 新增 50+ 组件 diff --git a/uni_modules/wot-design-uni/components/common/abstracts/_config.scss b/uni_modules/wot-design-uni/components/common/abstracts/_config.scss new file mode 100644 index 0000000..fe65cb4 --- /dev/null +++ b/uni_modules/wot-design-uni/components/common/abstracts/_config.scss @@ -0,0 +1,7 @@ +/** + * SCSS 配置项:命名空间以及BEM + */ +$namespace: 'wd'; +$elementSeparator: '__'; +$modifierSeparator: '--'; +$state-prefix: 'is-'; \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/common/abstracts/_function.scss b/uni_modules/wot-design-uni/components/common/abstracts/_function.scss new file mode 100644 index 0000000..c1fd39e --- /dev/null +++ b/uni_modules/wot-design-uni/components/common/abstracts/_function.scss @@ -0,0 +1,80 @@ +/** + * 辅助函数 + */ +@import 'config'; +$default-theme: #4d80f0 !default; // 正常色 + +/* 转换成字符串 */ +@function selectorToString($selector) { + $selector: inspect($selector); + $selector: str-slice($selector, 2, -2); + + @return $selector; +} + +/* 判断是否存在 Modifier */ +@function containsModifier($selector) { + $selector: selectorToString($selector); + + @if str-index($selector, $modifierSeparator) { + @return true; + } @else { + @return false; + } +} + +/* 判断是否存在伪类 */ +@function containsPseudo($selector) { + $selector: selectorToString($selector); + + @if str-index($selector, ':') { + @return true; + } @else { + @return false; + } +} + + +/** + * 主题色切换 + * @params $theme-color 主题色 + * @params $type 变暗’dark‘ 变亮 'light' + * @params $mix-color 自己设置的混色 + */ + @function themeColor($theme-color, $type: "", $mix-color: "") { + @if $default-theme != #4d80f0 { + @if $type == "dark" { + @return darken($theme-color, 10%); + } @else if $type == "light" { + @return lighten($theme-color, 10%); + } @else { + @return $theme-color; + } + } @else { + @return $mix-color; + } +} + +/** + * 颜色结果切换, 如果开启线性渐变色 使用渐变色,如果没有开启,那么使用主题色 + * @params $open-linear 是否开启线性渐变色 + * @params $deg 渐变色角度 + * @params $theme-color 当前配色 + * @params [Array] $set 主题色明暗设置,与 $color-list 数量对应 + * @params [Array] $color-list 渐变色顺序, $color-list 和 $per-list 数量相同 + * @params [Array] $per-list 渐变色比例 + */ +@function resultColor($open-linear, $deg, $theme-color, $set, $color-list, $per-list) { + // 开启渐变 + @if $open-linear { + $len: length($color-list); + $arg: $deg; + @for $i from 1 through $len { + $arg: $arg + "," + themeColor($theme-color, nth($set, $i), nth($color-list, $i)) + " " + nth($per-list, $i); + } + @return linear-gradient(unquote($arg)); + } @else { + // 不开启渐变 直接使用色值 + @return $theme-color; + } +} diff --git a/uni_modules/wot-design-uni/components/common/abstracts/_mixin.scss b/uni_modules/wot-design-uni/components/common/abstracts/_mixin.scss new file mode 100644 index 0000000..733eb73 --- /dev/null +++ b/uni_modules/wot-design-uni/components/common/abstracts/_mixin.scss @@ -0,0 +1,312 @@ +/** + * 混合宏 + */ +@import "config"; +@import "function"; + +/** + * BEM,定义块(b) + */ +@mixin b($block) { + $B: $namespace + "-" + $block !global; + + .#{$B} { + @content; + } +} + +/* 定义元素(e),对于伪类,会自动将 e 嵌套在 伪类 底下 */ +@mixin e($element...) { + $selector: &; + $selectors: ""; + + @if containsPseudo($selector) { + @each $item in $element { + $selectors: #{$selectors + "." + $B + $elementSeparator + $item + ","}; + } + @at-root { + #{$selector} { + #{$selectors} { + @content; + } + } + } + } @else { + @each $item in $element { + $selectors: #{$selectors + $selector + $elementSeparator + $item + ","}; + } + @at-root { + #{$selectors} { + @content; + } + } + } +} + + +/* 此方法用于生成穿透样式 */ +/** + * BEM,定义块(b) + */ + @mixin bdeep($block) { + $B: $namespace + "-" + $block !global; + + .#{$B}{ + @content; + } + } +/* 此方法用于生成穿透样式 */ + +/* 定义元素(e),对于伪类,会自动将 e 嵌套在 伪类 底下 */ +@mixin edeep($element...) { + $selector: &; + $selectors: ""; + + @if containsPseudo($selector) { + @each $item in $element { + $selectors: #{$selectors + "." + $B + $elementSeparator + $item + ","}; + } + @at-root { + #{$selector} { + :deep(#{$selectors}) { + @content; + } + } + } + } @else { + @each $item in $element { + $selectors: #{$selectors + $selector + $elementSeparator + $item + ","}; + } + @at-root { + :deep(#{$selectors}) { + @content; + } + } + } +} + + +/* 定义状态(m) */ +@mixin m($modifier...) { + $selectors: ""; + @each $item in $modifier { + $selectors: #{$selectors + & + $modifierSeparator + $item + ","}; + } + + @at-root { + #{$selectors} { + @content; + } + } +} +/* 对于需要需要嵌套在 m 底下的 e,调用这个混合宏,一般在切换整个组件的状态,如切换颜色的时候 */ +@mixin me($element...) { + $selector: &; + $selectors: ""; + + @if containsModifier($selector) { + @each $item in $element { + $selectors: #{$selectors + "." + $B + $elementSeparator + $item + ","}; + } + @at-root { + #{$selector} { + #{$selectors} { + @content; + } + } + } + } @else { + @each $item in $element { + $selectors: #{$selectors + $selector + $elementSeparator + $item + ","}; + } + @at-root { + #{$selectors} { + @content; + } + } + } +} + +/* 状态,生成 is-$state 类名 */ +@mixin when($states...) { + @at-root { + @each $state in $states { + &.#{$state-prefix + $state} { + @content; + } + } + } +} + +/** + * 常用混合宏 + */ + +/* 单行超出隐藏 */ +@mixin lineEllipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* 多行超出隐藏 */ +@mixin multiEllipsis($lineNumber: 3) { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: $lineNumber; + overflow: hidden; +} + +/* 清除浮动 */ +@mixin clearFloat { + &::after { + display: block; + content: ""; + height: 0; + clear: both; + overflow: hidden; + visibility: hidden; + } +} + +/* 0.5px 边框 */ +@mixin halfPixelBorder($direction: "bottom", $left: 0, $color: $-color-border-light) { + &::after { + position: absolute; + display: block; + content: ""; + @if ($left == 0) { + width: 100%; + } @else { + width: calc(100% - #{$left}); + } + height: 1px; + left: $left; + @if ($direction == "bottom") { + bottom: 0; + } @else { + top: 0; + } + transform: scaleY(0.5); + background: $color; + } +} +@mixin buttonClear { + outline: none; + -webkit-appearance: none; + -webkit-tap-highlight-color: transparent; + background: transparent; +} + +/** + * 三角形实现尖角样式,适用于背景透明情况 + * @param $size 三角形高,底边为 $size * 2 + * @param $bg 三角形背景颜色 + */ +@mixin triangleArrow($size, $bg) { + @include e(arrow) { + position: absolute; + width: 0; + height: 0; + } + + @include e(arrow-down) { + border-left: $size solid transparent; + border-right: $size solid transparent; + border-top: $size solid $bg; + transform: translateX(-50%); + bottom: calc(-1 * $size) + } + @include e(arrow-up) { + border-left: $size solid transparent; + border-right: $size solid transparent; + border-bottom: $size solid $bg; + transform: translateX(-50%); + top: calc(-1 * $size) + } + @include e(arrow-left) { + border-top: $size solid transparent; + border-bottom: $size solid transparent; + border-right: $size solid $bg; + transform: translateY(-50%); + left: calc(-1 * $size) + } + @include e(arrow-right) { + border-top: $size solid transparent; + border-bottom: $size solid transparent; + border-left: $size solid $bg; + transform: translateY(-50%); + right: calc(-1 * $size) + } +} + +/** + * 正方形实现尖角样式,适用于背景不透明情况 + * @param $size 正方形边长 + * @param $bg 正方形背景颜色 + * @param $z-index z-index属性值,不得大于外部包裹器 + * @param $box-shadow 阴影 +*/ +@mixin squareArrow($size, $bg, $z-index, $box-shadow) { + @include e(arrow) { + position: absolute; + width: $size; + height: $size; + z-index: $z-index; + } + + @include e(arrow-down) { + transform: translateX(-50%); + bottom: 0; + + &:after { + content: ""; + width: $size; + height: $size; + background-color: $bg; + position: absolute; + bottom: calc(-1 * $size / 2); + transform: rotateZ(45deg); + box-shadow: $box-shadow; + } + } + @include e(arrow-up) { + transform: translateX(-50%); + &:after { + content: ""; + width: $size; + height: $size; + background-color: $bg; + position: absolute; + top: calc(-1 * $size / 2); + transform: rotateZ(45deg); + box-shadow: $box-shadow; + } + } + @include e(arrow-left) { + transform: translateY(-50%); + &:after { + content: ""; + width: $size; + height: $size; + background-color: $bg; + position: absolute; + left: calc(-1 * $size / 2); + transform: rotateZ(45deg); + box-shadow: $box-shadow; + } + } + @include e(arrow-right) { + transform: translateY(-50%); + &:after { + content: ""; + width: $size; + height: $size; + background-color: $bg; + position: absolute; + right: calc(-1 * $size / 2); + transform: rotateZ(45deg); + box-shadow: $box-shadow; + } + } +} diff --git a/uni_modules/wot-design-uni/components/common/abstracts/variable.scss b/uni_modules/wot-design-uni/components/common/abstracts/variable.scss new file mode 100644 index 0000000..d45a767 --- /dev/null +++ b/uni_modules/wot-design-uni/components/common/abstracts/variable.scss @@ -0,0 +1,911 @@ +@import './function'; +$open-linear: true !default; + +/** + * UI规范基础变量 + */ +/*----------------------------------------- Theme color. start ----------------------------------------*/ +/* 主题颜色 */ +$-color-theme: var(--wot-color-theme, $default-theme) !default; // 品牌色 +$-color-white: var(--wot-color-white, rgb(255, 255, 255)) !default; // 用于mix的白色 +$-color-black: var(--wot-color-black, rgb(0, 0, 0)) !default; // 用于mix的黑色 + +/* 辅助色 */ +$-color-success: var(--wot-color-success, #34d19d) !default; // 成功色 +$-color-warning: var(--wot-color-warning, #f0883a) !default; // 警告色 +$-color-danger: var(--wot-color-danger, #fa4350) !default; // 危险出错色 +$-color-purple: var(--wot-color-purple, #8268de) !default; // 紫色 +$-color-yellow: var(--wot-color-yellow, #f0cd1d) !default; // 黄色 +$-color-blue: var(--wot-color-blue, #2bb3ed) !default; // 蓝色 +$-color-info: var(--wot-color-info, #909399) !default; + +$-color-gray-1: var(--wot-color-gray-1, #f7f8fa) !default; +$-color-gray-2: var(--wot-color-gray-2, #f2f3f5) !default; +$-color-gray-3: var(--wot-color-gray-3, #ebedf0) !default; +$-color-gray-4: var(--wot-color-gray-4, #dcdee0) !default; +$-color-gray-5: var(--wot-color-gray-5, #c8c9cc) !default; +$-color-gray-6: var(--wot-color-gray-6, #969799) !default; +$-color-gray-7: var(--wot-color-gray-7, #646566) !default; +$-color-gray-8: var(--wot-color-gray-8, #323233) !default; + +$-font-gray-1: var(--wot-font-gray-1, rgba(0, 0, 0, 0.9)); +$-font-gray-2: var(--wot-font-gray-2, rgba(0, 0, 0, 0.6)); +$-font-gray-3: var(--wot-font-gray-3, rgba(0, 0, 0, 0.4)); +$-font-gray-4: var(--wot-font-gray-4, rgba(0, 0, 0, 0.26)); + +$-font-white-1: var(--wot-font-white-1, rgba(255, 255, 255, 1)); +$-font-white-2: var(--wot-font-white-2, rgba(255, 255, 255, 0.55)); +$-font-white-3: var(--wot-font-white-3, rgba(255, 255, 255, 0.35)); +$-font-white-4: var(--wot-font-white-4, rgba(255, 255, 255, 0.22)); + + + +/* 文字颜色(默认浅色背景下 */ +$-color-title: var(--wot-color-title, $-color-black) !default; // 模块标题/重要正文 000 +$-color-content: var(--wot-color-content, #262626) !default; // 普通正文 262626 +$-color-secondary: var(--wot-color-secondary, #595959) !default; // 次要信息,注释/补充/正文 595959 +$-color-aid: var(--wot-color-aid, #8c8c8c) !default; // 辅助文字字号,弱化信息,引导性/不可点文字 8c8c8c +$-color-tip: var(--wot-color-tip, #bfbfbf) !default; // 失效、默认提示文字 bfbfbf +$-color-border: var(--wot-color-border, #d9d9d9) !default; // 控件边框线 d9d9d9 +$-color-border-light: var(--wot-color-border-light, #e8e8e8) !default; // 分割线颜色 e8e8e8 +$-color-bg: var(--wot-color-bg, #f5f5f5) !default; // 背景色、禁用填充色 f5f5f5 +$-color-table-bg: var(--wot-color-table-bg, #fafafa) !default; // 表头填充 fafafa + +/* 暗黑模式 */ +$-dark-background: var(--wot-dark-background, #131313) !default; +$-dark-background2: var(--wot-dark-background2, #1b1b1b) !default; +$-dark-background3: var(--wot-dark-background3, #141414) !default; +$-dark-background4: var(--wot-dark-background4, #323233) !default; +$-dark-background5: var(--wot-dark-background5, #646566) !default; +$-dark-background6: var(--wot-dark-background6, #380e08) !default; +$-dark-background7: var(--wot-dark-background7, #707070) !default; +$-dark-color: var(--wot-dark-color, $-color-white) !default; +$-dark-color2: var(--wot-dark-color2, #f2270c) !default; +$-dark-color3: var(--wot-dark-color3, rgba(232, 230, 227, 0.8)) !default; +$-dark-color-gray: var(--wot-dark-color-gray, $-color-secondary) !default; +$-dark-border-color: var(--wot-dark-border-color, #3a3a3c) !default; + +/* 文字颜色-深背景 */ +$-color-title-indark: var(--wot-color-title-indark, $-color-white) !default; // 模块标题/重要正文 fff +$-color-text-indark: var(--wot-color-text-indark, #d9d9d9) !default; // 普通正文 d9d9d9 +$-color-secondary-indark: var(--wot-color-secondary-indark, #a6a6a6) !default; // 次要信息,注释/补充/正文 a6a6a6 +$-color-aid-indark: var(--wot-color-aid-indark, #737373) !default; // 次级按钮边框线 737373 +$-color-tip-indark: var(--wot-color-tip-indark, #404040) !default; // 失效、默认提示文字 404040 +$-color-border-indark: var(--wot-color-border-indark, #262626) !default; // 控件边框线 262626 +$-color-border-light-indark: var(--wot-color-border-light-indark, #171717) !default; // 分割线颜色 171717 +$-color-bg-indark: var(--wot-color-bg-indark, #0a0a0a) !default; // 背景色、禁用填充色 0a0a0a +$-color-table-bg-indark: var(--wot-color-table-bg-indark, #fafafa) !default; // 表头填充 fafafa + +/* 透明度 */ +$-color-inlight-title-mask: var(--wot-color-inlight-title-mask, #000000) !default; // 模块标题/重要正文 000 +/* 图形颜色 */ +$-color-icon: var(--wot-color-icon, #d9d9d9) !default; // icon颜色 +$-color-icon-active: var(--wot-color-icon-active, #eee) !default; // icon颜色hover +$-color-icon-disabled: var(--wot-color-icon-disabled, #a7a7a7) !default; // icon颜色disabled +/* overlay */ +$-overlay-bg: rgba(0, 0, 0, 0.65) !default; +$-overlay-bg-dark: rgba(0, 0, 0, 0.75) !default; + + +/*----------------------------------------- Theme color. end -------------------------------------------*/ + +/*-------------------------------- Theme color application size. start --------------------------------*/ + +/* 文字字号 */ +$-fs-big: var(--wot-fs-big, 24px) !default; // 大型标题 +$-fs-important: var(--wot-fs-important, 19px) !default; // 重要数据 +$-fs-title: var(--wot-fs-title, 16px) !default; // 标题字号/重要正文字号 +$-fs-content: var(--wot-fs-content, 14px) !default; // 普通正文 +$-fs-secondary: var(--wot-fs-secondary, 12px) !default; // 次要信息,注释/补充/正文 +$-fs-aid: var(--wot-fs-aid, 10px) !default; // 辅助文字字号,弱化信息,引导性/不可点文字 + +/* 文字字重 */ +$-fw-medium: var(--wot-fw-medium, 500) !default; // PingFangSC-Medium +$-fw-semibold: var(--wot-fw-semibold, 600) !default; // PingFangSC-Semibold + +/* 尺寸 */ +$-size-side-padding: var(--wot-size-side-padding, 15px) !default; // 屏幕两边留白 + +/*-------------------------------- Theme color application size. end --------------------------------*/ + +/* action-sheet */ +$-action-sheet-weight: var(--wot-action-sheet-weight, 500) !default; // 面板字重 +$-action-sheet-radius: var(--wot-action-sheet-radius, 16px) !default; // 面板圆角大小 +$-action-sheet-action-height: var(--wot-action-sheet-action-height, 48px) !default; // 单条菜单高度 +$-action-sheet-color: var(--wot-action-sheet-color, rgba(0, 0, 0, 0.85)) !default; // 选项名称颜色 +$-action-sheet-fs: var(--wot-action-sheet-fs, $-fs-title) !default; // 选项名称字号 +$-action-sheet-active-color: var(--wot-action-sheet-active-color, $-color-bg) !default; // 点击高亮颜色 +$-action-sheet-subname-fs: var(--wot-action-sheet-subname-fs, $-fs-secondary) !default; // 描述信息字号 +$-action-sheet-subname-color: var(--wot-action-sheet-subname-color, rgba(0, 0, 0, 0.45)) !default; // 描述信息颜色 +$-action-sheet-disabled-color: var(--wot-action-sheet-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用颜色 +$-action-sheet-bg: var(--wot-action-sheet-bg, $-color-white) !default; // 菜单容器颜色(取消按钮上方的颜色) +$-action-sheet-title-height: var(--wot-action-sheet-title-height, 64px) !default; // 标题高度 +$-action-sheet-title-fs: var(--wot-action-sheet-title-fs, $-fs-title) !default; // 标题字号 +$-action-sheet-close-fs: var(--wot-action-sheet-close-fs, $-fs-title) !default; // 关闭按钮大小 +$-action-sheet-close-color: var(--wot-action-sheet-close-color, rgba(0, 0, 0, 0.65)) !default; // 关闭按钮颜色 +$-action-sheet-close-top: var(--wot-action-sheet-close-top, 25px) !default; // 关闭按钮距离标题顶部距离 +$-action-sheet-close-right: var(--wot-action-sheet-close-right, 15px) !default; // 关闭按钮距离标题右侧距离 +$-action-sheet-cancel-color: var(--wot-action-sheet-cancel-color, #131415) !default; // 取消按钮颜色 +$-action-sheet-cancel-height: var(--wot-action-sheet-cancel-height, 44px) !default; // 取消按钮高度 +$-action-sheet-cancel-bg: var(--wot-action-sheet-cancel-bg, rgba(240, 240, 240, 1)) !default; // 取消按钮背景色 +$-action-sheet-cancel-radius: var(--wot-action-sheet-cancel-radius, 22px) !default; // 取消按钮圆角大小 +$-action-sheet-panel-padding: var(--wot-action-sheet-panel-padding, 12px 0 11px) !default; // 自定义面板内边距大小 +$-action-sheet-panel-img-fs: var(--wot-action-sheet-panel-img-fs, 40px) !default; // 自定义面板图片大小 +$-action-sheet-panel-img-radius: var(--wot-action-sheet-panel-img-radius, 4px) !default; // 自定义面板图片圆角大小 + +/* badge */ +$-badge-bg: var(--wot-badge-bg, $-color-danger) !default; // 背景填充颜色 +$-badge-color: var(--wot-badge-color, #fff) !default; // 文字颜色 +$-badge-fs: var(--wot-badge-fs, 12px) !default; // 文字字号 +$-badge-padding: var(--wot-badge-padding, 0 5px) !default; // padding +$-badge-height: var(--wot-badge-height, 16px) !default; // 高度 +$-badge-primary: var(--wot-badge-primary, $-color-theme) !default; +$-badge-success: var(--wot-badge-success, $-color-success) !default; +$-badge-warning: var(--wot-badge-warning, $-color-warning) !default; +$-badge-danger: var(--wot-badge-danger, $-color-danger) !default; +$-badge-info: var(--wot-badge-info, $-color-info) !default; +$-badge-dot-size: var(--wot-badge-dot-size, 6px) !default; // dot 类型大小 +$-badge-border: var(--wot-badge-border, 2px solid $-badge-color) !default; // 边框样式 + +/* button */ +$-button-small-height: var(--wot-button-small-height, 28px) !default; // 小型按钮高度 +$-button-small-padding: var(--wot-button-small-padding, 0 11px) !default; // 小型按钮padding +$-button-small-fs: var(--wot-button-small-fs, $-fs-secondary) !default; // 小型按钮字号 +$-button-small-radius: var(--wot-button-small-radius, 2px) !default; // 小型按钮圆角大小 +$-button-small-loading: var(--wot-button-small-loading, 14px) !default; // 小型按钮loading图标大小 + +$-button-medium-height: var(--wot-button-medium-height, 36px) !default; // 中型按钮高度 +$-button-medium-padding: var(--wot-button-medium-padding, 0 15px) !default; // 中型按钮padding +$-button-medium-fs: var(--wot-button-medium-fs, $-fs-content) !default; // 中型按钮字号 +$-button-medium-radius: var(--wot-button-medium-radius, 4px) !default; // 中型按钮圆角大小 +$-button-medium-loading: var(--wot-button-medium-loading, 18px) !default; // 中型按钮loading图标大小 +$-button-medium-box-shadow-size: var(--wot-button-medium-box-shadow-size, 0px 2px 4px 0px) !default; // 中尺寸阴影尺寸 + +$-button-large-height: var(--wot-button-large-height, 44px) !default; // 大型按钮高度 +$-button-large-padding: var(--wot-button-large-padding, 0 36px) !default; // 大型按钮padding +$-button-large-fs: var(--wot-button-large-fs, $-fs-title) !default; // 大型按钮字号 +$-button-large-radius: var(--wot-button-large-radius, 8px) !default; // 大型按钮圆角大小 +$-button-large-loading: var(--wot-button-large-loading, 24px) !default; // 大小按钮loading图标大小 +$-button-large-box-shadow-size: var(--wot-button-large-box-shadow-size, 0px 4px 8px 0px) !default; // 大尺寸阴影尺寸 + +$-button-icon-fs: var(--wot-button-icon-fs, 18px) !default; // 带图标的按钮的图标大小 +$-button-icon-size: var(--wot-button-icon-size, 40px) !default; // icon 类型按钮尺寸 +$-button-icon-color: var(--wot-button-icon-color, rgba(0, 0, 0, 0.65)) !default; // icon 类型按钮颜色 +$-button-icon-active-color: var(--wot-button-icon-active-color, $-color-icon-active) !default; // icon 类型按钮点击态颜色 +$-button-icon-disabled-color: var(--wot-button-icon-disabled-color, $-color-icon-disabled) !default; // icon 类型按钮禁用颜色 + +$-button-normal-bg: var(--wot-button-normal-bg, $-color-white) !default; // 默认按钮禁用背景色 +$-button-normal-color: var(--wot-button-normal-color, $-color-title) !default; // 文字颜色 +$-button-normal-active-color: var(--wot-button-normal-active-color, $-color-black) !default; // 文字点击态颜色 +$-button-normal-active-bg: var(--wot-button-normal-active-bg, $-color-bg) !default; // 默认按钮点击态背景色 +$-button-normal-border-active-color: var(--wot-button-normal-border-active-color, rgba(0, 0, 0, 0.45)) !default; // 默认按钮点击态边框色 +$-button-normal-disabled-color: var(--wot-button-normal-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 默认按钮禁用文字色 +$-button-normal-disabled-bg: var(--wot-button-normal-disabled-bg, $-color-white) !default; // 默认按钮禁用背景色 +$-button-normal-border-disabled-color: var(--wot-button-normal-border-disabled-color, $-color-bg) !default; // 默认按钮禁用边框色 +$-button-border-color: var(--wot-button-border-color, #595959) !default; // 默认按钮边框色 + +$-button-primary-color: var(--wot-button-primary-color, $-color-theme) !default; // 主要按钮颜色 +$-button-primary-bg-color: var(--wot-button-primary-bg-color, resultColor($open-linear, 315deg, $-color-theme, "dark""light", #4f7cf8 #668df8, 0% 100%)) !default; // 主要按钮背景颜色 +$-button-primary-active-color: var(--wot-button-primary-active-color, resultColor($open-linear, 315deg, #2c69ed, "dark""light", #416bdf #4e79ee, 0% 100%)) !default; // 主要按钮点击态颜色 +$-button-primary-plain-active-bg-color: var(--wot-button-primary-plain-active-bg-color, #eff4fe) !default; // 主要按钮点击态颜色 +$-button-primary-disabled-color: var(--wot-button-primary-disabled-color, resultColor($open-linear, 315deg, rgba($-color-theme, 0.6), "dark""light", #8FADFF #9FB8FE, 0% 100%)) !default; // 主要按钮禁用颜色 +$-button-primary-plain-disabled-color: var(--wot-button-primary-plain-disabled-color, themeColor($-color-theme, "light", #9DB9F6)) !default; // 主要按钮点击态文字颜色 +$-button-primary-box-shadow-color: var(--wot-button-primary-box-shadow-color, rgba($-color-theme, 0.25)) !default; // 主要按钮阴影颜色 + +$-button-success-color: var(--wot-button-success-color, $-color-success) !default; // 成功按钮颜色 +$-button-success-active-color: var(--wot-button-success-active-color, #2bab81) !default; // 成功按钮点击态颜色 +$-button-success-disabled-color: var(--wot-button-success-disabled-color, #89e4c6) !default; // 成功按钮禁用颜色 +$-button-success-box-shadow-color: var(--wot-button-success-box-shadow-color, rgba($-color-success, 0.25)) !default; // 主要按钮阴影颜色 + +$-button-info-bg-color: var(--wot-button-info-bg-color, #F0F0F0) !default; // 信息按钮背景颜色 +$-button-info-color: var(--wot-button-info-color, $-color-title) !default; // 信息按钮颜色 +$-button-info-active-bg-color: var(--wot-button-info-active-bg-color, #E1E1E1) !default; // 信息按钮背景颜色 +$-button-info-active-color: var(--wot-button-info-active-color, rgba(0, 0, 0, 0.85)) !default; // 信息按钮点击态颜色 +$-button-info-disabled-bg-color: var(--wot-button-info-disabled-bg-color, #F0F0F0) !default; // 信息按钮禁用颜色 +$-button-info-disabled-color: var(--wot-button-info-disabled-color, rgba(0, 0, 0, 0.09)) !default; // 信息按钮禁用颜色 + +$-button-info-plain-border-color: var(--wot-button-info-plain-border-color, rgba(0, 0, 0, 0.45)) !default; // 信息按钮禁用颜色 +$-button-info-plain-bg-color: var(--wot-button-info-plain-bg-color, $-color-white) !default; // 信息按钮禁用颜色 +$-button-info-plain-disabled-bg-color: var(--wot-button-info-plain-disabled-bg-color, #F0F0F0) !default; // 信息按钮禁用颜色 +$-button-info-plain-active-color: var(--wot-button-info-plain-active-color, rgba(0, 0, 0, 0.45)) !default; // 信息按钮点击态颜色 +$-button-info-plain-active-bg-color: var(--wot-button-info-plain-active-bg-color, #F0F0F0) !default; // 信息按钮禁用颜色 +$-button-info-plain-normal-color: var(--wot-button-info-plain-normal-color, rgba(0, 0, 0, 0.85)) !default; // 信息幽灵按钮默认颜色 + +$-button-warning-color: var(--wot-button-warning-color, $-color-warning) !default; // 警告按钮颜色 +$-button-warning-active-color: var(--wot-button-warning-active-color, #c57030) !default; // 警告按钮点击颜色 +$-button-warning-disabled-color: var(--wot-button-warning-disabled-color, #f6ba8d) !default; // 警告按钮禁用颜色 +$-button-warning-box-shadow-color: var(--wot-button-warning-box-shadow-color, rgba($-color-warning, 0.25)) !default; // 主要按钮阴影颜色 + +$-button-error-color: var(--wot-button-error-color, $-color-danger) !default; // 错误按钮颜色 +$-button-error-active-color: var(--wot-button-error-active-color, #cd3742) !default; // 错误按钮点击颜色 +$-button-error-disabled-color: var(--wot-button-error-disabled-color, #fc929a) !default; // 错误按钮禁用颜色 +$-button-error-box-shadow-color: var(--wot-button-error-box-shadow-color, rgba($-color-danger, 0.25)) !default; // 主要按钮阴影颜色 + +$-button-suck-height: var(--wot-button-suck-height, 50px) !default; // suck 类型按钮高度 +$-button-suck-active-color: var(--wot-button-suck-active-color, $-button-primary-plain-active-bg-color) !default; // 错误按钮禁用颜色 + +/* cell */ +$-cell-padding: var(--wot-cell-padding, $-size-side-padding) !default; // cell 左右padding距离 +$-cell-line-height: var(--wot-cell-line-height, 24px) !default; // 行高 + +$-cell-group-title-fs: var(--wot-cell-group-title-fs, $-fs-title) !default; // 组标题字号 +$-cell-group-padding: var(--wot-cell-group-padding, 13px $-cell-padding) !default; // 组padding +$-cell-group-title-color: var(--wot-cell-group-title-color, rgba(0, 0, 0, 0.85)) !default; // 组标题文字颜色 +$-cell-group-value-fs: var(--wot-cell-group-value-fs, $-fs-content) !default; // 组值字号 +$-cell-group-value-color: var(--wot-cell-group-value-color, $-color-content) !default; // 组值文字颜色 + +$-cell-wrapper-padding: var(--wot-cell-wrapper-padding, 10px) !default; // cell 容器padding +$-cell-wrapper-padding-large: var(--wot-cell-wrapper-padding-large, 12px) !default; // large类型cell容器padding + +$-cell-wrapper-padding-with-label: var(--wot-cell-wrapper-padding-with-label, 16px) !default; // cell 容器上下padding(有label情况下) +$-cell-icon-right: var(--wot-cell-icon-right, 4px) !default; // 图标距离右边缘 +$-cell-icon-size: var(--wot-cell-icon-size, 16px) !default; // 图标大小 +$-cell-title-fs: var(--wot-cell-title-fs, 14px) !default; // 标题字号 +$-cell-title-color: var(--wot-cell-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题文字颜色 +$-cell-label-fs: var(--wot-cell-label-fs, 12px) !default; // 描述信息字号 +$-cell-label-color: var(--wot-cell-label-color, rgba(0, 0, 0, 0.45)) !default; // 描述信息文字颜色 +$-cell-value-fs: var(--wot-cell-value-fs, 14px) !default; // 右侧内容字号 +$-cell-value-color: var(--wot-cell-value-color, rgba(0, 0, 0, 0.85)) !default; // 右侧内容文字颜色 +$-cell-arrow-size: var(--wot-cell-arrow-size, 18px) !default; // 右箭头大小 +$-cell-arrow-color: var(--wot-cell-arrow-color, rgba(0, 0, 0, 0.25)) !default; // 右箭头颜色 +$-cell-tap-bg: var(--wot-cell-tap-bg, rgba(0, 0, 0, 0.06)) !default; // 点击态背景色 + +$-cell-title-fs-large: var(--wot-cell-title-fs-large, 16px) !default; // 大尺寸标题字号 +$-cell-label-fs-large: var(--wot-cell-label-fs-large, 14px) !default; // 描述信息字号 +$-cell-icon-size-large: var(--wot-cell-icon-size-large, 18px) !default; // 图标大小 + +$-cell-required-color: var(--wot-cell-required-color, $-color-danger) !default; // 要求必填*颜色 +$-cell-required-size: var(--wot-cell-required-size, 18px) !default; // 必填*字号 +$-cell-vertical-top: var(--wot-cell-vertical-top, 16px) !default; // 表单类型-上下结构的间距 + +/* calendar */ +$-calendar-fs: var(--wot-calendar-fs, 16px) !default; +$-calendar-panel-padding: var(--wot-calendar-panel-padding, 0 12px) !default; +$-calendar-panel-title-fs: var(--wot-calendar-panel-title-fs, 14px) !default; +$-calendar-panel-title-color: var(--wot-calendar-panel-title-color, rgba(0, 0, 0, 0.85)) !default; +$-calendar-week-color: var(--wot-calendar-week-color, rgba(0, 0, 0, 0.85)) !default; +$-calendar-week-height: var(--wot-calendar-week-height, 36px) !default; +$-calendar-week-fs: var(--wot-calendar-week-fs, 12px) !default; +$-calendar-day-fs: var(--wot-calendar-day-fs, 16px) !default; +$-calendar-day-color: var(--wot-calendar-day-color, rgba(0, 0, 0, 0.85)) !default; +$-calendar-day-fw: var(--wot-calendar-day-fw, 500) !default; +$-calendar-day-height: var(--wot-calendar-day-height, 64px) !default; +$-calendar-month-width: var(--wot-calendar-month-width, 50px) !default; +$-calendar-active-color: var(--wot-calendar-active-color, $-color-theme) !default; +$-calendar-disabled-color: var(--wot-calendar-disabled-color, rgba(0, 0, 0, 0.25)) !default; +$-calendar-range-color: var(--wot-calendar-range-color, rgba(#4d80f0, 0.09)) !default; +$-calendar-active-border: var(--wot-calendar-active-border, 8px) !default; +$-calendar-info-fs: var(--wot-calendar-info-fs, 10px) !default; + +/* checkbox */ +$-checkbox-margin: var(--wot-checkbox-margin, 10px) !default; // 多个复选框距离 +$-checkbox-bg: var(--wot-checkbox-bg, $-color-white) !default; // 多个复选框距离 +$-checkbox-label-margin: var(--wot-checkbox-label-margin, 9px) !default; // 右侧文字与左侧图标距离 +$-checkbox-size: var(--wot-checkbox-size, 16px) !default; // 左侧图标尺寸 +$-checkbox-icon-size: var(--wot-checkbox-icon-size, 14px) !default; // 左侧图标尺寸 +$-checkbox-border-color: var(--wot-checkbox-border-color, #dcdcdc) !default; // 左侧图标边框颜色 +$-checkbox-check-color: var(--wot-checkbox-check-color, $-color-white) !default; // 左侧图标边框颜色 +$-checkbox-label-fs: var(--wot-checkbox-label-fs, 14px) !default; // 右侧文字字号 +$-checkbox-label-color: var(--wot-checkbox-label-color, rgba(0, 0, 0, 0.85)) !default; // 右侧文字颜色 +$-checkbox-checked-color: var(--wot-checkbox-checked-color, $-color-theme) !default; // 选中颜色 + +$-checkbox-disabled-color: var(--wot-checkbox-disabled-color, rgba(0, 0, 0, 0.04)) !default; // 禁用背景颜色 +$-checkbox-disabled-label-color: var(--wot-checkbox-disabled-label-color, rgba(0, 0, 0, 0.25)) !default; // 禁用文字颜色 +$-checkbox-disabled-check-color: var(--wot-checkbox-disabled-check-color, rgba(0, 0, 0, 0.15)) !default; // 禁用图标颜色 +$-checkbox-disabled-check-bg: var(--wot-checkbox-disabled-check-bg, rgba(0, 0, 0, 0.15)) !default; // 禁用边框背景颜色 +$-checkbox-square-radius: var(--wot-checkbox-square-radius, 4px) !default; // 方型圆角大小 + +$-checkbox-large-size: var(--wot-checkbox-large-size, 18px) !default; // 左侧图标尺寸 +$-checkbox-large-label-fs: var(--wot-checkbox-large-label-fs, 16px) !default; // 右侧文字字号 + +$-checkbox-button-height: var(--wot-checkbox-button-height, 32px) !default; // 按钮模式复选框高 +$-checkbox-button-min-width: var(--wot-checkbox-button-min-width, 78px) !default; // 按钮模式最小宽 +$-checkbox-button-radius: var(--wot-checkbox-button-radius, 16px) !default; // 按钮圆角大小 +$-checkbox-button-bg: var(--wot-checkbox-button-bg, rgba(0, 0, 0, 0.04)) !default; // 按钮模式背景颜色 +$-checkbox-button-font-size: var(--wot-checkbox-button-font-size, 14px) !default; // 按钮模式字号 +$-checkbox-button-border: var(--wot-checkbox-button-border, #f5f5f5) !default; // 按钮边框颜色 +$-checkbox-button-disabled-border: var(--wot-checkbox-button-disabled-border, rgba(0, 0, 0, 0.15)) !default; // 按钮禁用边框颜色 + +/* collapse */ +$-collapse-side-padding: var(--wot-collapse-side-padding, $-size-side-padding) !default; // 左右间距 +$-collapse-body-padding: var(--wot-collapse-body-padding, 14px 25px) !default; // body padding +$-collapse-header-padding: var(--wot-collapse-header-padding, 13px $-size-side-padding) !default; // 头部padding +$-collapse-title-color: var(--wot-collapse-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题颜色 +$-collapse-title-fs: var(--wot-collapse-title-fs, 16px) !default; // 标题字号 +$-collapse-arrow-size: var(--wot-collapse-arrow-size, 18px) !default; // 箭头大小 +$-collapse-arrow-color: var(--wot-collapse-arrow-color, #d8d8d8) !default; // 箭头颜色 +$-collapse-body-fs: var(--wot-collapse-body-fs, 14px) !default; // 内容字号 +$-collapse-body-color: var(--wot-collapse-body-color, rgba(0, 0, 0, 0.65)) !default; // 内容颜色 +$-collapse-disabled-color: var(--wot-collapse-disabled-color, rgba(0, 0, 0, 0.15)) !default; // 禁用颜色 +$-collapse-retract-fs: var(--wot-collapse-retract-fs, 14px) !default; // 更多 字号 +$-collapse-more-color: var(--wot-collapse-more-color, $-color-theme) !default; // 更多 颜色 + +/* divider */ +$-divider-padding: var(--wot-divider-padding, 0 $-size-side-padding) !default; // 两边间距 +$-divider-color: var(--wot-divider-color, rgba(0, 0, 0, 0.45)) !default; // 字体颜色 +$-divider-line-color: var(--wot-divider-line-color, rgba(0, 0, 0, 0.15)) !default; // 线条颜色 +$-divider-fs: var(--wot-divider-fs, 14px) !default; // 字体大小 + +/* drop-menu */ +$-drop-menu-height: var(--wot-drop-menu-height, 48px) !default; // 展示选中项的高度 +$-drop-menu-color: var(--wot-drop-menu-color, $-color-content) !default; // 展示选中项的颜色 +$-drop-menu-fs: var(--wot-drop-menu-fs, $-fs-content) !default; // 展示选中项的字号 +$-drop-menu-side-padding: var(--wot-drop-menu-side-padding, $-size-side-padding) !default; // 两边留白间距 +$-drop-menu-disabled-color: var(--wot-drop-menu-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用颜色 +$-drop-menu-item-height: var(--wot-drop-menu-item-height, 48px) !default; // 选项高度 +$-drop-menu-item-color: var(--wot-drop-menu-item-color, $-color-content) !default; // 选项颜色 +$-drop-menu-item-fs: var(--wot-drop-menu-item-fs, $-fs-content) !default; // 选项字号 +$-drop-menu-item-color-active: var(--wot-drop-menu-item-color-active, $-color-theme) !default; // 选中颜色 +$-drop-menu-item-color-tip: var(--wot-drop-menu-item-color-tip, rgba(0, 0, 0, 0.45)) !default; // 提示文字颜色 +$-drop-menu-item-fs-tip: var(--wot-drop-menu-item-fs-tip, $-fs-secondary) !default; // 提示文字字号 +$-drop-menu-option-check-size: var(--wot-drop-menu-option-check-size, 20px) !default; // check 图标大小 +$-drop-menu-line-color: var(--wot-drop-menu-line-color, resultColor($open-linear, 315deg, $-color-theme, "dark""light", rgba(81, 124, 240, 1) rgba(118, 158, 245, 1), 0% 100%)) !default; // 下划线颜色 +$-drop-menu-line-height: var(--wot-drop-menu-line-height, 3px) !default; // 下划线高度 + +/* input-number */ +$-input-number-color: var(--wot-input-number-color, #262626) !default; // 文字颜色 +$-input-number-border-color: var(--wot-input-number-border-color, #e8e8e8) !default; // 边框颜色 +$-input-number-disabled-color: var(--wot-input-number-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用颜色 +$-input-number-height: var(--wot-input-number-height, 24px) !default; // 加减号按钮高度 +$-input-number-btn-width: var(--wot-input-number-btn-width, 26px) !default; // 加减号按钮宽度 +$-input-number-input-width: var(--wot-input-number-input-width, 36px) !default; // 输入框宽度 +$-input-number-radius: var(--wot-input-number-radius, 4px) !default; // 加减号按钮圆角大小 +$-input-number-fs: var(--wot-input-number-fs, 12px) !default; // 输入框字号 +$-input-number-icon-size: var(--wot-input-number-icon-size, 14px) !default; // 加减号图标大小 +$-input-number-icon-color: var(--wot-input-number-icon-color, rgba(0, 0, 0, 0.65)) !default; // icon颜色 + +/* input */ +$-input-padding: var(--wot-input-padding, $-size-side-padding) !default; // input 左右padding距离 +$-input-border-color: var(--wot-input-border-color, #dadada) !default; // 无label边框颜色 +$-input-not-empty-border-color: var(--wot-input-not-empty-border-color, #262626) !default; // 输入框有值时 无label边框颜色 +$-input-fs: var(--wot-input-fs, $-cell-title-fs) !default; // 字号 +$-input-fs-large: var(--wot-input-fs-large, $-cell-title-fs-large) !default; // 大尺寸字号 +$-input-icon-margin: var(--wot-input-icon-margin, 8px) !default; // 图标距离 +$-input-color: var(--wot-input-color, #262626) !default; // 文字颜色 +$-input-placeholder-color: var(--wot-input-placeholder-color, #bfbfbf) !default; // 占位符颜色 +$-input-disabled-color: var(--wot-input-disabled-color, #d9d9d9) !default; // 输入框禁用颜色 +$-input-error-color: var(--wot-input-error-color, $-color-danger) !default; // 输入框错误颜色 +$-input-icon-color: var(--wot-input-icon-color, #bfbfbf) !default; // 图标颜色 +$-input-clear-color: var(--wot-input-clear-color, #585858) !default; // 关闭按钮颜色 +$-input-count-color: var(--wot-input-count-color, #bfbfbf) !default; // 计数文字颜色 +$-input-count-current-color: var(--wot-input-count-current-color, #262626) !default; // 当前长度颜色 +$-input-bg: var(--wot-input-bg, $-color-white) !default; // 默认背景颜色 + +$-input-cell-bg: var(--wot-input-cell-bg, $-color-white) !default; // cell 类型背景色 +$-input-cell-border-color: var(--wot-input-cell-border-color, $-color-border-light) !default; // cell 类型边框颜色 +$-input-cell-padding: var(--wot-input-cell-padding, 10px) !default; // cell 容器padding +$-input-cell-padding-large: var(--wot-input-cell-padding-large, 12px) !default; // large类型cell容器padding +$-input-cell-height: var(--wot-input-cell-height, 24px) !default; // cell 高度 +$-input-cell-label-width: var(--wot-input-cell-label-width, 33%) !default; // cell 下 label 的宽度 +$-input-inner-height: var(--wot-input-inner-height, 34px) !default; // 非cell和textarea下的高度 +$-input-inner-height-no-border: var(--wot-input-inner-height-no-border, 24px) !default; // 无边框下的高度 +$-input-count-fs: var(--wot-input-count-fs, 14px) !default; // 计数字号 +$-input-count-fs-large: var(--wot-input-count-fs-large, 14px) !default; // 大尺寸计数字号 +$-input-icon-size: var(--wot-input-icon-size, 16px) !default; // 图标大小 +$-input-icon-size-large: var(--wot-input-icon-size-large, 18px) !default; // 大尺寸图标大小 + +/* textarea */ +$-textarea-padding: var(--wot-textarea-padding, $-size-side-padding) !default; // textarea 左右padding距离 +$-textarea-border-color: var(--wot-textarea-border-color, #dadada) !default; // 无label边框颜色 +$-textarea-not-empty-border-color: var(--wot-textarea-not-empty-border-color, #262626) !default; // 输入框有值时 无label边框颜色 +$-textarea-fs: var(--wot-textarea-fs, $-cell-title-fs) !default; // 字号 +$-textarea-fs-large: var(--wot-textarea-fs-large, $-cell-title-fs-large) !default; // 大尺寸字号 +$-textarea-icon-margin: var(--wot-textarea-icon-margin, 8px) !default; // 图标距离 +$-textarea-color: var(--wot-textarea-color, #262626) !default; // 文字颜色 +$-textarea-icon-color: var(--wot-textarea-icon-color, #bfbfbf) !default; // 图标颜色 +$-textarea-clear-color: var(--wot-textarea-clear-color, #585858) !default; // 关闭按钮颜色 +$-textarea-count-color: var(--wot-textarea-count-color, #bfbfbf) !default; // 计数文字颜色 +$-textarea-count-current-color: var(--wot-textarea-count-current-color, #262626) !default; // 当前长度颜色 +$-textarea-bg: var(--wot-textarea-bg, $-color-white) !default; // 默认背景颜色 + +$-textarea-cell-border-color: var(--wot-textarea-cell-border-color, $-color-border-light) !default; // cell 类型边框颜色 +$-textarea-cell-padding: var(--wot-textarea-cell-padding, 10px) !default; // cell 容器padding +$-textarea-cell-padding-large: var(--wot-textarea-cell-padding-large, 12px) !default; // large类型cell容器padding +$-textarea-cell-height: var(--wot-textarea-cell-height, 24px) !default; // cell 高度 +$-textarea-count-fs: var(--wot-textarea-count-fs, 14px) !default; // 计数字号 +$-textarea-count-fs-large: var(--wot-textarea-count-fs-large, 14px) !default; // 大尺寸计数字号 +$-textarea-icon-size: var(--wot-textarea-icon-size, 16px) !default; // 图标大小 +$-textarea-icon-size-large: var(--wot-textarea-icon-size-large, 18px) !default; // 大尺寸图标大小 + +/* loadmore */ +$-loadmore-height: var(--wot-loadmore-height, 48px) !default; // 高度 +$-loadmore-color: var(--wot-loadmore-color, rgba(0, 0, 0, 0.45)) !default; // 颜色 +$-loadmore-fs: var(--wot-loadmore-fs, 14px) !default; // 字号 +$-loadmore-error-color: var(--wot-loadmore-error-color, $-color-theme) !default; // 点击重试颜色 + +/* message-box */ +$-message-box-width: var(--wot-message-box-width, 300px) !default; // 宽度 +$-message-box-bg: var(--wot-message-box-bg, $-color-white) !default; // 默认背景颜色 +$-message-box-radius: var(--wot-message-box-radius, 16px) !default; // 圆角大小 +$-message-box-padding: var(--wot-message-box-padding, 25px 24px 0) !default; // 主体内容padding +$-message-box-title-fs: var(--wot-message-box-title-fs, 16px) !default; // 标题字号 +$-message-box-title-color: var(--wot-message-box-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题颜色 +$-message-box-content-fs: var(--wot-message-box-content-fs, 14px) !default; // 内容字号 +$-message-box-content-color: var(--wot-message-box-content-color, #666666) !default; // 内容颜色 +$-message-box-content-max-height: var(--wot-message-box-content-max-height, 264px) !default; // 内容最大高度 +$-message-box-content-scrollbar-width: var(--wot-message-box-content-scrollbar-width, 4px) !default; // 内容滚动条宽度 +$-message-box-content-scrollbar-color: var(--wot-message-box-content-scrollbar-color, rgba(0, 0, 0, 0.1)) !default; // 内容滚动条颜色 +$-message-box-input-error-color: var(--wot-message-box-input-error-color, $-input-error-color) !default; // 输入框错误颜色 + +/* notice-bar */ +$-notice-bar-fs: var(--wot-notice-bar-fs, 12px) !default; // 字号 +$-notice-bar-line-height: var(--wot-notice-bar-line-height, 18px) !default; // 行高 +$-notice-bar-border-radius: var(--wot-notice-bar-border-radius, 8px) !default; // 圆角 +$-notice-bar-padding: var(--wot-notice-bar-padding, 9px 20px 9px 15px) !default; // 非换行下的padding +$-notice-bar-warning-bg: var(--wot-notice-bar-warning-bg, #fff6c8) !default; // 背景色 +$-notice-bar-info-bg: var(--wot-notice-bar-info-bg, #f4f9ff) !default; // 背景色 +$-notice-bar-danger-bg: var(--wot-notice-bar-danger-bg, #feeced) !default; // 背景色 +$-notice-bar-warning-color: var(--wot-notice-bar-warning-color, $-color-warning) !default; // 文字和图标颜色 +$-notice-bar-info-color: var(--wot-notice-bar-info-color, $-color-theme) !default; // 文字和图标颜色 +$-notice-bar-danger-color: var(--wot-notice-bar-danger-color, $-color-danger) !default; // 文字和图标颜色 +$-notice-bar-prefix-size: var(--wot-notice-bar-prefix-size, 18px) !default; // 图标大小 +$-notice-bar-close-bg: var(--wot-notice-bar-close-bg, rgba(0, 0, 0, 0.15)) !default; // 右侧关闭按钮背景颜色 +$-notice-bar-close-size: var(--wot-notice-bar-close-size, 18px) !default; // 右侧关闭按钮背景颜色 +$-notice-bar-close-color: var(--wot-notice-bar-close-color, $-color-white) !default; // 右侧关闭按钮颜色 +$-notice-bar-close-size: var(--wot-notice-bar-close-size, 10px) !default; // 关闭按钮大小 +$-notice-bar-wrap-padding: var(--wot-notice-bar-wrap-padding, 14px $-size-side-padding) !default; // 换行下的padding + +/* pagination */ +$-pagination-content-padding: var(--wot-pagination-content-padding, 10px 15px) !default; +$-pagination-message-padding: var(--wot-pagination-message-padding, 1px 0 16px 0) !default; +$-pagination-message-fs: var(--wot-pagination-message-fs, 12px) !default; +$-pagination-message-color: var(--wot-pagination-message-color, rgba(0, 0, 0, 0.69)) !default; +$-pagination-nav-border: var(--wot-pagination-nav-border, 1px solid rgba(0, 0, 0, 0.45)) !default; +$-pagination-nav-border-radius: var(--wot-pagination-nav-border-radius, 16px) !default; +$-pagination-nav-fs: var(--wot-pagination-nav-fs, 12px) !default; +$-pagination-nav-width: var(--wot-pagination-nav-width, 60px) !default; +$-pagination-nav-color: var(--wot-pagination-nav-color, rgba(0, 0, 0, 0.85)) !default; +$-pagination-nav-content-fs: var(--wot-pagination-nav-content-fs, 12px) !default; +$-pagination-nav-sepatator-padding: var(--wot-pagination-nav-sepatator-padding, 0 4px) !default; +$-pagination-nav-current-color: var(--wot-pagination-nav-current-color, $-color-theme) !default; + +/* picker */ +$-picker-toolbar-height: var(--wot-picker-toolbar-height, 54px) !default; // toolbar 操作条的高度 +$-picker-action-height: var(--wot-picker-action-height, 16px) !default; // toolbar 操作条的高度 +$-picker-toolbar-finish-color: var(--wot-picker-toolbar-finish-color, $-color-theme) !default; // toolbar 操作条完成按钮的颜色 +$-picker-toolbar-cancel-color: var(--wot-picker-toolbar-cancel-color, #666666) !default; // toolbar 操作条的边框颜色 +$-picker-toolbar-fs: var(--wot-picker-toolbar-fs, $-fs-title) !default; // toolbar 操作条的字号 +$-picker-toolbar-title-color: var(--wot-picker-toolbar-title-color, rgba(0, 0, 0, 0.85)) !default; // toolbar 操作台的标题颜色 +$-picker-column-fs: var(--wot-picker-column-fs, 16px) !default; // 选择器选项的字号 +$-picker-bg: var(--wot-picker-bg, $-color-white) !default; // 选择器选项的字号 +$-picker-column-active-fs: var(--wot-picker-column-active-fs, 18px) !default; // 选择器选项被选中的字号 +$-picker-column-color: var(--wot-picker-column-color, rgba(0, 0, 0, 0.85)) !default; // 选择器选项的颜色 +$-picker-column-height: var(--wot-picker-column-height, 210px) !default; // 列高 滚筒外部的高度 +$-picker-column-item-height: var(--wot-picker-column-item-height, 35px) !default; // 列高 滚筒外部的高度 +$-picker-column-select-bg: var(--wot-picker-column-select-bg, #f5f5f5) !default; +$-picker-loading-button-color: var(--wot-picker-loading-button-color, rgba(0, 0, 0, 0.25)) !default; // loading 背景颜色 +$-picker-column-padding: var(--wot-picker-column-padding, 0 $-size-side-padding) !default; // 选项内间距 + +$-picker-column-disabled-color: var(--wot-picker-column-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 选择器选项禁用的颜色 +$-picker-mask: var(--wot-picker-mask, linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.25)), ) linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.25)) !default; // 上下阴影 +$-picker-loading-bg: var(--wot-picker-loading-bg, rgba($-color-white, 0.8)) !default; // loading 背景颜色 +$-picker-region-separator-color: var(--wot-picker-region-separator-color, rgba(0, 0, 0, 0.65)) !default; // 区域选择文字颜色 +$-picker-cell-arrow-size-large: var(--wot-picker-cell-arrow-size-large, $-cell-icon-size) !default; // cell 类型的大尺寸 右侧icon尺寸 + +$-picker-region-color: var(--wot-picker-region-color, rgba(0, 0, 0, 0.45)) !default; // 区域选择文字颜色 +$-picker-region-bg-active-color: var(--wot-picker-region-bg-active-color, resultColor($open-linear, 315deg, $-color-theme, "dark""light""light", rgba(79, 124, 248, 1) rgba(102, 141, 248, 1) rgba(102, 141, 248, 1), 0% 100% 100%)) !default; // 区域选择激活选中背景颜色 + +$-picker-region-fs: var(--wot-picker-region-fs, 14px) !default; // 区域选择文字字号 + +/* col-picker */ +$-col-picker-selected-height: var(--wot-col-picker-selected-height, 44px) !default; // 弹框顶部值高度 +$-col-picker-selected-padding: var(--wot-col-picker-selected-padding, 0 16px) !default; // 弹框顶部值左右间距 +$-col-picker-selected-fs: var(--wot-col-picker-selected-fs, 14px) !default; // 弹框顶部值字号 +$-col-picker-selected-color: var(--wot-col-picker-selected-color, rgba(0, 0, 0, 0.85)) !default; // 弹框顶部值文字颜色 +$-col-picker-selected-fw: var(--wot-col-picker-selected-fw, 700) !default; // 弹框顶部值高亮字重 +$-col-picker-line-width: var(--wot-col-picker-line-width, 16px) !default; // 弹框顶部值高亮线条宽度 +$-col-picker-line-height: var(--wot-col-picker-line-height, 3px) !default; // 弹框顶部值高亮线条高度 +$-col-picker-line-color: var(--wot-col-picker-line-color, linear-gradient(315deg, rgba(81, 124, 240, 1), rgba(118, 158, 245, 1))) !default; // 弹框顶部值高亮线条颜色 +$-col-picker-line-box-shadow: var(--wot-col-picker-line-box-shadow, 0px 1px 2px 0px rgba(1, 87, 255, 0.2)) !default; // 弹框顶部值高亮线条阴影 +$-col-picker-list-height: var(--wot-col-picker-list-height, 53vh) !default; // 弹框列表高度 +$-col-picker-list-padding-bottom: var(--wot-col-picker-list-padding-bottom, 30px) !default; // 弹框列表底部间距 +$-col-picker-list-color: var(--wot-col-picker-list-color, rgba(0, 0, 0, 0.85)) !default; // 弹框列表文字颜色 +$-col-picker-list-color-disabled: var(--wot-col-picker-list-color-disabled, rgba(0, 0, 0, 0.15)) !default; // 弹框列表文字禁用颜色 +$-col-picker-list-color-tip: var(--wot-col-picker-list-color-tip, rgba(0, 0, 0, 0.45)) !default; // 弹框列表提示文字颜色 +$-col-picker-list-fs: var(--wot-col-picker-list-fs, 14px) !default; // 弹框列表文字字号 +$-col-picker-list-fs-tip: var(--wot-col-picker-list-fs-tip, 12px) !default; // 弹框列表提示文字字号 +$-col-picker-list-item-padding: var(--wot-col-picker-list-item-padding, 12px 15px) !default; // 弹框列表选项间距 +$-col-picker-list-checked-icon-size: var(--wot-col-picker-list-checked-icon-size, 18px) !default; // 弹框列表选中箭头大小 +$-col-picker-list-color-checked: var(--wot-col-picker-list-color-checked, $-color-theme) !default; // 弹框列表选中选项颜色 + +/* popup */ +$-popup-close-size: var(--wot-popup-close-size, 24px) !default; // 关闭按钮尺寸 +$-popup-close-color: var(--wot-popup-close-color, #666) !default; // 关闭按钮颜色 + +/* progress */ +$-progress-padding: var(--wot-progress-padding, 9px 0 8px) !default; // 进度条内边距 +$-progress-bg: var(--wot-progress-bg, rgba(229, 229, 229, 1)) !default; // 进度条底色 +$-progress-danger-color: var(--wot-progress-danger-color, $-color-danger) !default; // 进度条danger颜色 +$-progress-success-color: var(--wot-progress-success-color, $-color-success) !default; // 进度条success进度条颜色 +$-progress-color: var(--wot-progress-color, resultColor($open-linear, 315deg, $-color-theme, "dark""light", #517CF0 #769EF5, 0% 100%)) !default; // 进度条渐变色 +$-progress-linear-success-color: var(--wot-progress-linear-success-color, resultColor($open-linear, 315deg, $-color-theme, "dark""light", #20B080 #2BD69D, 0% 100%)) !default; // success进度条渐变色 +$-progress-linear-danger-color: var(--wot-progress-linear-danger-color, resultColor($open-linear, 315deg, $-color-theme, "dark""light", #E04350 #FF5964, 0% 100%)) !default; // danger进度条渐变色 +$-progress-height: var(--wot-progress-height, 3px) !default; // 进度条高度 +$-progress-label-color: var(--wot-progress-label-color, #333) !default; // 文字颜色 +$-progress-label-fs: var(--wot-progress-label-fs, 14px) !default; // 文字字号 +$-progress-icon-fs: var(--wot-progress-icon-fs, 18px) !default; // 图标字号 + +/* radio */ +$-radio-margin: var(--wot-radio-margin, $-checkbox-margin) !default; // 多个单选框距离 +$-radio-label-margin: var(--wot-radio-label-margin, $-checkbox-label-margin) !default; // 右侧文字与左侧图标距离 +$-radio-size: var(--wot-radio-size, 16px) !default; // 左侧图标尺寸 +$-radio-bg: var(--wot-radio-bg, $-checkbox-bg) !default; // 左侧图标尺寸 +$-radio-label-fs: var(--wot-radio-label-fs, $-checkbox-label-fs) !default; // 右侧文字字号 +$-radio-label-color: var(--wot-radio-label-color, $-checkbox-label-color) !default; // 右侧文字颜色 +$-radio-checked-color: var(--wot-radio-checked-color, $-checkbox-checked-color) !default; // 选中颜色 +$-radio-disabled-color: var(--wot-radio-disabled-color, $-checkbox-disabled-color) !default; // 禁用颜色 +$-radio-disabled-label-color: var(--wot-radio-disabled-label-color, $-checkbox-disabled-label-color) !default; // 禁用文字颜色 + +$-radio-large-size: var(--wot-radio-large-size, $-checkbox-large-size) !default; // 左侧图标尺寸 +$-radio-large-label-fs: var(--wot-radio-large-label-fs, $-checkbox-large-label-fs) !default; // 右侧文字字号 + +$-radio-button-height: var(--wot-radio-button-height, $-checkbox-button-height) !default; // 按钮模式复选框高 +$-radio-button-min-width: var(--wot-radio-button-min-width, 60px) !default; // 按钮模式最小宽 +$-radio-button-max-width: var(--wot-radio-button-max-width, 144px) !default; // 按钮模式最大宽 +$-radio-button-radius: var(--wot-radio-button-radius, $-checkbox-button-radius) !default; // 按钮圆角大小 +$-radio-button-bg: var(--wot-radio-button-bg, $-checkbox-button-bg) !default; // 按钮模式背景颜色 +$-radio-button-fs: var(--wot-radio-button-fs, $-checkbox-button-font-size) !default; // 按钮模式字号 +$-radio-button-border: var(--wot-radio-button-border, $-checkbox-button-border) !default; // 按钮边框颜色 +$-radio-button-disabled-border: var(--wot-radio-button-disabled-border, $-checkbox-button-disabled-border) !default; // 按钮禁用边框颜色 + +$-radio-dot-size: var(--wot-radio-dot-size, 8px) !default; // 单选dot模式圆点尺寸 +$-radio-dot-large-size: var(--wot-radio-dot-large-size, 10px) !default; // 单选dot模式大尺寸圆点尺寸 +$-radio-dot-checked-bg: var(--wot-radio-dot-checked-bg, $-color-theme) !default; // 单选dot模式选中背景色 +$-radio-dot-checked-border-color: var(--wot-radio-dot-checked-border-color, $-color-theme) !default; // 单选dot模式选中边框色 +$-radio-dot-border-color: var(--wot-radio-dot-border-color, #dcdcdc) !default; // 单选dot模式边框色 +$-radio-dot-disabled-border: var(--wot-radio-dot-disabled-border, #d9d9d9) !default; // 单选dot模式禁用边框颜色 +$-radio-dot-disabled-bg: var(--wot-radio-dot-disabled-bg, #d9d9d9) !default; // 单选dot模式禁用背景颜色 + +/* search */ +$-search-side-padding: var(--wot-search-side-padding, $-size-side-padding) !default; // 左右间距 +$-search-padding: var(--wot-search-padding, 10px 0 10px $-search-side-padding) !default; // 不包含取消按钮的间距 +$-search-input-radius: var(--wot-search-input-radius, 15px) !default; // 输入框圆角大小 +$-search-input-bg: var(--wot-search-input-bg, $-color-bg) !default; // 输入框背景色 +$-search-input-height: var(--wot-search-input-height, 30px) !default; // 输入框高度 +$-search-input-padding: var(--wot-search-input-padding, 0 32px 0 42px) !default; // 输入框间距 +$-search-input-fs: var(--wot-search-input-fs, $-fs-content) !default; // 输入框字号 +$-search-input-color: var(--wot-search-input-color, #262626) !default; // 输入框文字颜色 +$-search-icon-color: var(--wot-search-icon-color, $-color-icon) !default; // 图标颜色 +$-search-placeholder-color: var(--wot-search-placeholder-color, #bfbfbf) !default; // placeholder 颜色 +$-search-cancel-padding: var(--wot-search-cancel-padding, 0 $-search-side-padding 0 10px) !default; // 取消按钮间距 +$-search-cancel-fs: var(--wot-search-cancel-fs, $-fs-title) !default; // 取消按钮字号 +$-search-cancel-color: var(--wot-search-cancel-color, rgba(0, 0, 0, 0.65)) !default; // 取消按钮颜色 +$-search-light-bg: var(--wot-search-light-bg, $-color-bg) !default; // light 类型的容器背景色 + +/* slider */ +$-slider-fs: var(--wot-slider-fs, $-fs-content) !default; // 字体大小 +$-slider-handle-radius: var(--wot-slider-handle-radius, 12px) !default; // 滑块半径 +$-slider-handle-bg: var(--wot-slider-handle-bg, resultColor($open-linear, 139deg, $-color-theme, "dark""light", #FFFFFF #F7F7F7, 0% 100%)) !default; // 滑块背景 +$-slider-axie-height: var(--wot-slider-axie-height, 3px) !default; // 滑轴高度 +$-slider-color: var(--wot-slider-color, #333) !default; // 字体颜色 +$-slider-axie-bg: var(--wot-slider-axie-bg, #E5E5E5) !default; // 滑轴的默认背景色 +$-slider-line-color: var(--wot-slider-line-color, resultColor($open-linear, 315deg, $-color-theme, "dark""light", #517CF0 #769EF5, 0% 100%)) !default; // 进度条颜色 +$-slider-disabled-color: var(--wot-slider-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用状态下字体颜色 + +/* sort-button */ +$-sort-button-fs: var(--wot-sort-button-fs, $-fs-content) !default; // 字号 +$-sort-button-color: var(--wot-sort-button-color, $-color-content) !default; // 颜色 +$-sort-button-height: var(--wot-sort-button-height, 48px) !default; // 高度 +$-sort-button-line-height: var(--wot-sort-button-line-height, 3px) !default; // 下划线高度 +$-sort-button-line-color: var(--wot-sort-button-line-color, resultColor($open-linear, 315deg, $-color-theme, "dark""light", rgba(81, 124, 240, 1) rgba(118, 158, 245, 1), 0% 100%)) !default; // 下划线颜色 + +/* steps */ +$-steps-icon-size: var(--wot-steps-icon-size, 22px) !default; // 图标尺寸 +$-steps-inactive-color: var(--wot-steps-inactive-color, rgba(0, 0, 0, 0.25)) !default; // 等待状态文字颜色 +$-steps-finished-color: var(--wot-steps-finished-color, $-color-theme) !default; // 完成文字颜色 +$-steps-icon-text-fs: var(--wot-steps-icon-text-fs, $-fs-content) !default; // 数字图标文字字号 +$-steps-error-color: var(--wot-steps-error-color, $-color-danger) !default; // 异常颜色 +$-steps-title-fs: var(--wot-steps-title-fs, $-fs-content) !default; // 标题字号 +$-steps-title-fw: var(--wot-steps-title-fw, $-fw-medium) !default; // 标题字重 +$-steps-label-fs: var(--wot-steps-label-fs, $-fs-secondary) !default; // 描述信息字号 +$-steps-description-color: var(--wot-steps-description-color, rgba(0, 0, 0, 0.45)) !default; // 描述信息颜色 +$-steps-is-icon-width: var(--wot-steps-is-icon-width, 30px) !default; // 自定义图标的宽度,给左右留白 +$-steps-line-color: var(--wot-steps-line-color, rgba(0, 0, 0, 0.15)) !default; // 线条颜色 +$-steps-dot-size: var(--wot-steps-dot-size, 7px) !default; // 点状大小 +$-steps-dot-active-size: var(--wot-steps-dot-active-size, 9px) !default; // 点状高亮大小 + +/* switch */ +$-switch-size: var(--wot-switch-size, 28px) !default; // switch大小 +$-switch-width: var(--wot-switch-width, calc(1.8em + 4px)) !default; // 宽度 +$-switch-height: var(--wot-switch-height, calc(1em + 4px)) !default; // 高度 +$-switch-circle-size: var(--wot-switch-circle-size, 1em) !default; // 圆点大小 +$-switch-border-color: var(--wot-switch-border-color, #e5e5e5) !default; // 边框颜色选中状态背景颜色 +$-switch-active-color: var(--wot-switch-active-color, resultColor($open-linear, 315deg, $-color-theme, "light""dark", #4f7cf8 #668df8, 0% 100%)) !default; // 选中状态背景 +$-switch-active-shadow-color: var(--wot-switch-active-shadow-color, rgba(0, 83, 162, 0.5)) !default; // 选中状态shadow颜色 +$-switch-inactive-color: var(--wot-switch-inactive-color, resultColor($open-linear, 315deg, #dadada, "light""dark""dark", #f2f2f2 #dadada #668df8, 0% 100% 100%)) !default; // 非选中背景颜色 +$-switch-inactive-shadow-color: var(--wot-switch-inactive-shadow-color, rgba(155, 155, 155, 0.5)) !default; // 非选中状态shadow颜色 + + +/* tabs */ +$-tabs-nav-arrow-fs: var(--wot-tabs-nav-arrow-fs, 18px) !default; // 全部Icon字号 +$-tabs-nav-arrow-open-fs: var(--wot-tabs-nav-arrow-open-fs, 14px) !default; // 展开Icon字号 +$-tabs-nav-width: var(--wot-tabs-nav-width, 100vw) !default; // tabs 头部切换宽度 +$-tabs-nav-height: var(--wot-tabs-nav-height, 42px) !default; // 头部切换高度 +$-tabs-nav-fs: var(--wot-tabs-nav-fs, $-fs-content) !default; // 头部切换文字大小 +$-tabs-nav-color: var(--wot-tabs-nav-color, rgba(0, 0, 0, 0.85)) !default; // 头部切换文字颜色 +$-tabs-nav-bg: var(--wot-tabs-nav-bg, $-color-white) !default; // 背景颜色 +$-tabs-nav-active-color: var(--wot-tabs-nav-active-color, $-color-theme) !default; // 头部高亮颜色 +$-tabs-nav-disabled-color: var(--wot-tabs-nav-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 头部禁用颜色 +$-tabs-nav-line-height: var(--wot-tabs-nav-line-height, 3px) !default; // 高亮边框高度 +$-tabs-nav-line-bg-color: var(--wot-tabs-nav-line-bg-color, resultColor($open-linear, 315deg, $-color-theme, "dark""light", rgba(81, 124, 240, 1) rgba(118, 158, 245, 1), 0% 100%)) !default; // 底部条颜色 +$-tabs-nav-map-fs: var(--wot-tabs-nav-map-fs, $-fs-content) !default; // map 类型按钮字号 +$-tabs-nav-map-color: var(--wot-tabs-nav-map-color, rgba(0, 0, 0, 0.85)) !default; // map 类型按钮文字颜色 +$-tabs-nav-map-arrow-color: var(--wot-tabs-nav-map-arrow-color, rgba(0, 0, 0, 0.65)) !default; // map 类型箭头颜色 +$-tabs-nav-map-btn-before-bg: var(--wot-tabs-nav-map-btn-before-bg, linear-gradient(270deg, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 0) 100%)) !default; // 左侧map遮罩阴影 +$-tabs-nav-map-button-back-color: var(--wot-tabs-nav-map-button-back-color, rgba(0, 0, 0, 0.04)) !default; // map 类型按钮边框颜色 +$-tabs-nav-map-button-radius: var(--wot-tabs-nav-map-button-radius, 16px) !default; // map 类型按钮圆角大小 +$-tabs-nav-map-modal-bg: var(--wot-tabs-nav-map-modal-bg, $-overlay-bg) !default; // map 类型蒙层背景色 + +/* tag */ +$-tag-fs: var(--wot-tag-fs, $-fs-secondary) !default; // 字号 +$-tag-color: var(--wot-tag-color, $-color-white) !default; // 字体颜色 +$-tag-small-fs: var(--wot-tag-small-fs, $-fs-aid) !default; // 小尺寸字号 +$-tag-info-color: var(--wot-tag-info-color, #585858) !default; // info 颜色 +$-tag-primary-color: var(--wot-tag-primary-color, $-color-theme) !default; // 主颜色 +$-tag-danger-color: var(--wot-tag-danger-color, rgba(250, 67, 80, 1)) !default; // danger 颜色 +$-tag-warning-color: var(--wot-tag-warning-color, rgba(255, 144, 0, 1)) !default; // warning 颜色 +$-tag-success-color: var(--wot-tag-success-color, rgba(51, 187, 68, 1)) !default; // success 颜色 +$-tag-info-bg: var(--wot-tag-info-bg, resultColor($open-linear, 49deg, $-color-black, "dark""light", #808080 #999999, 0% 100%)) !default; // info 背景颜色 +$-tag-primary-bg: var(--wot-tag-primary-bg, resultColor($open-linear, 49deg, $-color-theme, "dark""light", rgba(81, 124, 240, 1) rgba(118, 158, 245, 1), 0% 100%)) !default; // 主背景颜色 +$-tag-danger-bg: var(--wot-tag-danger-bg, resultColor($open-linear, 44deg, $-color-danger, "dark""light", rgba(230, 62, 70, 1) rgba(255, 64, 73, 1), 0% 100%)) !default; // danger 背景颜色 +$-tag-warning-bg: var(--wot-tag-warning-bg, resultColor($open-linear, 45deg, $-color-warning, "dark""light", rgba(230, 113, 55, 1) rgba(255, 151, 76, 1), 0% 100%)) !default; // warning 背景颜色 +$-tag-success-bg: var(--wot-tag-success-bg, resultColor($open-linear, 45deg, $-color-success, "dark""light", rgba(32, 176, 128, 1) rgba(43, 214, 157, 1), 0% 100%)) !default; // success 背景颜色 +$-tag-round-color: var(--wot-tag-round-color, rgba(102, 102, 102, 1)) !default; // round 字体颜色 +$-tag-round-border-color: var(--wot-tag-round-border-color, rgba(225, 225, 225, 1)) !default; // round 边框颜色 +$-tag-round-radius: var(--wot-tag-round-radius, 12px) !default; // round 圆角大小 +$-tag-mark-radius: var(--wot-tag-mark-radius, 6px 2px 6px 2px) !default; // mark 圆角大小 +$-tag-close-size: var(--wot-tag-close-size, 14px) !default; // 关闭按钮字号 +$-tag-close-color: var(--wot-tag-close-color, $-tag-info-color) !default; // 关闭按钮颜色 +$-tag-close-active-color: var(--wot-tag-close-active-color, rgba(0, 0, 0, 0.45)) !default; // 关闭按钮 active 颜色 + +/* toast */ +$-toast-padding: var(--wot-toast-padding, 16px 24px) !default; // padding +$-toast-max-width: var(--wot-toast-max-width, 300px) !default; // 最大宽度 +$-toast-radius: var(--wot-toast-radius, 8px) !default; // 圆角大小 +$-toast-bg: var(--wot-toast-bg, $-overlay-bg) !default; // 背景色 +$-toast-fs: var(--wot-toast-fs, $-fs-content) !default; // 字号 +$-toast-with-icon-min-width: var(--wot-toast-with-icon-min-width, 150px) !default; // 有图标的情况下最小宽度 +$-toast-icon-size: var(--wot-toast-icon-size, 39px) !default; // 图标大小 +$-toast-loading-padding: var(--wot-toast-loading-padding, 10px) !default; // loading 下的padding +$-toast-box-shadow: var(--wot-toast-box-shadow, 0px 6px 16px 0px rgba(0, 0, 0, 0.08)) !default; // 外部阴影 + +/* tooltip */ +$-tooltip-bg: var(--wot-tooltip-bg, rgba(38, 39, 40, 0.8)) !default; // 背景色 +$-tooltip-color: var(--wot-tooltip-color, $-color-white) !default; // 文字颜色 +$-tooltip-radius: var(--wot-tooltip-radius, 8px) !default; // 圆角大小 +$-tooltip-arrow-size: var(--wot-tooltip-arrow-size, 9px) !default; // 箭头大小 +$-tooltip-fs: var(--wot-tooltip-fs, $-fs-content) !default; // 字号 +$-tooltip-blur: var(--wot-tooltip-blur, 10px) !default; // 背景高斯模糊效果 +$-tooltip-padding: var(--wot-tooltip-padding, 9px 20px) !default; // 间距 +$-tooltip-close-size: var(--wot-tooltip-close-size, 6px) !default; // 背景高斯模糊效果 +$-tooltip-z-index: var(--wot-tooltip-z-index, 500) !default; +$-tooltip-line-height: var(--wot-tooltip-line-height, 18px) !default; // 行高 + +/* popover */ +$-popover-bg: var(--wot-popover-bg, $-color-white) !default; // 背景色 +$-popover-color: var(--wot-popover-color, rgba(0, 0, 0, 0.85)) !default; // 文字颜色 +$-popover-box-shadow: var(--wot-popover-box-shadow, 0px 2px 10px 0px rgba(0, 0, 0, 0.1)) !default; // 阴影颜色 +$-popover-arrow-box-shadow: var(--wot-popover-arrow-box-shadow, 0px 2px 10px 0px rgba(0, 0, 0, 0.2)) !default; // 阴影颜色 +$-popover-border-color: var(--wot-popover-border-color, rgba(0, 0, 0, 0.09)) !default; // 阴影颜色 +$-popover-radius: var(--wot-popover-radius, 4px) !default; // 圆角大小 +$-popover-arrow-size: var(--wot-popover-arrow-size, 6px) !default; // 箭头大小 +$-popover-fs: var(--wot-popover-fs, $-fs-content) !default; // 字号 +$-popover-padding: var(--wot-popover-padding, 15px) !default; // 间距 +$-popover-line-height: var(--wot-popover-line-height, 18px) !default; // 行高 +$-popover-z-index: var(--wot-popover-z-index, $-tooltip-z-index) !default; + +/* grid-item */ +$-grid-item-fs: var(--wot-grid-item-fs, 12px) !default; // 字号 +$-grid-item-bg: var(--wot-grid-item-bg, $-color-white) !default; // 字号 +$-grid-item-padding: var(--wot-grid-item-padding, 14px 0px) !default; // 内容的 padding +$-grid-item-border-color: var(--wot-grid-item-border-color, $-color-border-light) !default; // 边框颜色 + +/* statustip */ +$-statustip-fs: var(--wot-statustip-fs, $-fs-content) !default; // 字号 +$-statustip-color: var(--wot-statustip-color, rgba(0, 0, 0, 0.45)) !default; // 文字颜色 +$-statustip-line-height: var(--wot-statustip-line-height, 16px) !default; // 文字行高 +$-statustip-padding: var(--wot-statustip-padding, 5px 10px) !default; // 间距 + +/* card */ +$-card-bg: var(--wot-card-bg, $-color-white) !default; // 背景色 +$-card-fs: var(--wot-card-fs, $-fs-content) !default; // 卡片字号 +$-card-padding: var(--wot-card-padding, 0 $-size-side-padding) !default; // 内边距 +$-card-footer-padding: var(--wot-card-footer-padding, 12px 0 16px) !default; // 底部内边距 +$-card-shadow-color: var(--wot-card-shadow-color, 0px 4px 8px 0px rgba(0, 0, 0, 0.02)) !default; // 阴影 +$-card-radius: var(--wot-card-radius, 8px) !default; // 圆角大小 +$-card-line-height: var(--wot-card-line-height, 1.1) !default; // 行高 +$-card-margin: var(--wot-card-margin, 0 $-size-side-padding) !default; // 外边距 +$-card-title-color: var(--wot-card-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题颜色 +$-card-title-fs: var(--wot-card-title-fs, $-fs-title) !default; // 矩形卡片标题字号 +$-card-content-border-color: var(--wot-card-content-border-color, rgba(0, 0, 0, 0.09)) !default; // 内容边框 +$-card-rectangle-title-padding: var(--wot-card-rectangle-title-padding, 15px 15px 12px) !default; // 矩形卡片头部内边距 +$-card-rectangle-content-padding: var(--wot-card-rectangle-content-padding, 16px 0) !default; // 矩形卡片内容内边距 +$-card-rectangle-footer-padding: var(--wot-card-rectangle-footer-padding, 12px 0) !default; // 矩形卡片底部内边距 +$-card-content-color: var(--wot-card-content-color, rgba(0, 0, 0, 0.45)) !default; // 文本内容颜色 +$-card-content-line-height: var(--wot-card-content-line-height, 1.428) !default; // 文本内容行高 +$-card-content-margin: var(--wot-card-content-margin, 13px 0 12px) !default; // 内容外边距 +$-card-content-rectangle-margin: var(--wot-card-content-rectangle-margin, 14px 0 12px) !default; // 矩形卡片内容外边距 + +/* upload */ +$-upload-size: var(--wot-upload-size, 80px) !default; // upload的外边框默认尺寸 +$-upload-evoke-icon-size: var(--wot-upload-evoke-icon-size, 32px) !default; // 唤起项的图标大小 +$-upload-evoke-bg: var(--wot-upload-evoke-bg, rgba(0, 0, 0, 0.04)) !default; // 唤起项的背景色 +$-upload-evoke-color: var(--wot-upload-evoke-color, rgba(0, 0, 0, 0.25)) !default; // 唤起项的图标颜色 +$-upload-evoke-disabled-color: var(--wot-upload-evoke-disabled-color, rgba(0, 0, 0, 0.09)) !default; // 唤起项禁用颜色 +$-upload-close-icon-size: var(--wot-upload-close-icon-size, 16px) !default; // 移除按钮尺寸 +$-upload-close-icon-color: var(--wot-upload-close-icon-color, rgba(0, 0, 0, 0.65)) !default; // 移除按钮颜色 +$-upload-progress-fs: var(--wot-upload-progress-fs, 14px) !default; // 进度文字字号 +$-upload-preview-name-fs: var(--wot-upload-preview-name-fs, 12px) !default; // 预览图片名字号 +$-upload-preview-icon-size: var(--wot-upload-preview-icon-size, 24px) !default; // 预览内部图标尺寸 +$-upload-preview-name-bg: var(--wot-upload-preview-name-bg, rgba(0, 0, 0, 0.6)) !default; // 预览文件名背景色 +$-upload-preview-name-height: var(--wot-upload-preview-name-height, 22px) !default; // 预览文件名背景高度 + +/* curtain */ +$-curtain-content-radius: var(--wot-curtain-content-radius, 24px) !default; // 内容圆角 +$-curtain-content-close-color: var(--wot-curtain-content-close-color, $-color-white) !default; // 关闭按钮颜色 +$-curtain-content-close-fs: var(--wot-curtain-content-close-fs, $-fs-big) !default; // 关闭按钮大小 + +// Notify +$-notify-text-color: var(--wot-notify-text-color, $-color-white) !default; +$-notify-padding: var(--wot-notify-padding, 8px 16px) !default; +$-notify-font-size: var(--wot-notify-font-size, $-fs-content) !default; +$-notify-line-height: var(--wot-notify-line-height, 20px) !default; +$-notify-primary-background: var(--wot-notify-primary-background, $-color-theme) !default; +$-notify-success-background: var(--wot-notify-success-background, $-color-success) !default; +$-notify-danger-background: var(--wot-notify-danger-background, $-color-danger) !default; +$-notify-warning-background: var(--wot-notify-warning-background, $-color-warning) !default; + +// Skeleton +$-skeleton-background-color: var(--wot-skeleton-background-color, #eee) !default; +$-skeleton-animation-gradient: var(--wot-skeleton-animation-gradient, rgba(0, 0, 0, 0.04)) !default; +$-skeleton-animation-flashed: var(--wot-skeleton-animation-flashed, rgba(230, 230, 230, 0.3)) !default; +$-skeleton-text-height-default: var(--wot-skeleton-text-height-default, 16px) !default; +$-skeleton-rect-height-default: var(--wot-skeleton-rect-height-default, 16px) !default; +$-skeleton-circle-height-default: var(--wot-skeleton-circle-height-default, 48px) !default; +$-skeleton-row-margin-bottom: var(--wot-skeleton-row-margin-bottom, 16px) !default; +$-skeleton-border-radius-text: var(--wot-skeleton-border-radius-text, 2px) !default; +$-skeleton-border-radius-rect: var(--wot-skeleton-border-radius-rect, 4px) !default; +$-skeleton-border-radius-circle: var(--wot-skeleton-border-radius-circle, 50%) !default; + +// circle +$-circle-text-color: var(--wot-circle-text-color, $-color-content) !default; // circle文字颜色 + +// swiper +$-swiper-radius: var(--wot-swiper-radius, 8px); +$-swiper-item-padding: var(--wot-swiper-item-padding, 0); + + +// swiper-nav +// dot & dots-bar +$-swiper-nav-dot-color: var(--wot-swiper-nav-dot-color, $-font-white-2) !default; +$-swiper-nav-dot-active-color: var(--wot-swiper-nav-dot-active-color, $-font-white-1) !default; +$-swiper-nav-dot-size: var(--wot-swiper-nav-dot-size, 12rpx) !default; +$-swiper-nav-dots-bar-active-width: var(--wot-swiper-nav-dots-bar-active-width, 40rpx) !default; +// fraction +$-swiper-nav-fraction-color: var(--wot-swiper-nav-fraction-color, $-font-white-1) !default; +$-swiper-nav-fraction-bg-color: var(--wot-swiper-nav-fraction-bg-color, $-font-gray-3) !default; +$-swiper-nav-fraction-height: var(--wot-swiper-nav-fraction-height, 48rpx) !default; +$-swiper-nav-fraction-font-size: var(--wot-swiper-nav-fraction-font-size, 24rpx) !default; +// button +$-swiper-nav-btn-color: var(--wot-swiper-nav-btn-color, $-font-white-1) !default; +$-swiper-nav-btn-bg-color: var(--wot-swiper-nav-btn-bg-color, $-font-gray-3) !default; +$-swiper-nav-btn-size: var(--wot-swiper-nav-btn-size, 48rpx) !default; + + +// segmented +$-segmented-padding: var(--wot-segmented-padding, 4px) !default; // 分段器padding +$-segmented-item-bg-color: var(--wot-segmented-item-bg-color, #eeeeee) !default; +$-segmented-item-color: var(--wot-segmented-item-color, rgba(0, 0, 0, 0.85)) !default; // 标题文字颜色 +$-segmented-item-acitve-bg: var(--wot-segmented-item-acitve-bg, #FFFFFF) !default; // 标题文字颜色 +$-segmented-item-disabled-color: var(--wot-segmented-item-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 标题文字禁用颜色 + +// tabbar +$-tabbar-height: var(--wot-tabbar-height, 50px) !default; +$-tabbar-box-shadow: var(--wot-tabbar-box-shadow, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08)) !default; // round类型tabbar阴影 + +// tabbar-item +$-tabbar-item-title-font-size: var(--wot-tabbar-item-title-font-size, 10px) !default; // tabbar选项文字大小 +$-tabbar-item-title-line-height: var(--wot-tabbar-item-title-line-height, initial) !default; // tabbar选项标题文字行高 +$-tabbar-inactive-color: var(--wot-tabbar-inactive-color, $-color-title) !default; // 标题文字和图标颜色 +$-tabbar-active-color: var(--wot-tabbar-active-color, $-color-theme) !default; // 选中文字和图标颜色 + + +// navbar +$-navbar-height: var(--wot-navbar-height, 44px) !default; // navbar高度 +$-navbar-color: var(--wot-navbar-color, $-font-gray-1) !default; // navbar字体颜色 +$-navbar-background: var(--wot-navbar-background, $-color-white) !default; // navbar背景颜色 +$-navbar-arrow-size: var(--wot-navbar-arrow-size, 24px) !default; // navbar左箭头图标大小 +$-navbar-desc-font-size: var(--wot-navbar-desc-font-size, 16px); // navbar 左箭头字体大小 +$-navbar-desc-font-color: var(--wot-navbar-desc-font-color, $-font-gray-1) !default; // navbar左右两侧字体颜色 +$-navbar-title-font-size: var(--wot-navbar-title-font-size, 18px); // navbar title字体大小 +$-navbar-title-font-weight: var(--wot-navbar-title-font-weight, 600); // navbar title字重 +$-navbar-disabled-opacity: var(--wot-navbar-disabled-opacity, 0.6) !default; // navbar左右两侧字体禁用 +$-navbar-hover-color :var(--wot-navbar-hover-color, #eee) !default; // navbar hover样式 + +// navbar capsule +$-navbar-capsule-border-color: var(--wot-navbar-capsule-border-color, #e7e7e7) !default; +$-navbar-capsule-border-radius: var(--wot-navbar-capsule-border-radius, 16px) !default; +$-navbar-capsule-width: var(--wot-navbar-capsule-width, 88px) !default; +$-navbar-capsule-height: var(--wot-navbar-capsule-height, 32px) !default; + +// table +$-table-color: var(--wot-table-color, $-font-gray-1) !default; // 表格字体颜色 +$-table-bg: var(--wot-table-bg, #FFFFFF) !default; // 表格背景颜色 +$-table-stripe-bg: var(--wot-table-stripe-bg, #f3f3f3) !default; // 表格背景颜色 +$-table-border-color: var(--wot-table-border-color, #ececec) !default; // 表格边框颜色 +$-table-font-size: var(--wot-table-font-size, 13px) !default; // 表格字体大小 + +// sidebar +$-sidebar-bg: var(--wot-sidebar-bg, $-color-gray-1) !default; // 侧边栏背景色 +$-sidebar-width: var(--wot-sidebar-width, 104px) !default; // 侧边栏宽度 +$-sidebar-height: var(--wot-sidebar-height, 100%) !default; // 侧边栏高度 + +// sidebar-item +$-sidebar-color: var(--wd-sidebar-color, $-font-gray-1) !default; +$-sidebar-item-height: var(--wd-sidebar-item-height, 56px) !default; +$-sidebar-item-line-height: var(--wd-sidebar-item-line-height, 24px) !default; +$-sidebar-disabled-color: var(--wd-side-bar-disabled-color, $-font-gray-4) !default; +$-sidebar-active-color: var(--wd-sidebar-active-color, $-color-theme) !default; // 激活项字体颜色 +$-sidebar-active-bg: var(--wot-sidebar-active-bg, $-color-white) !default; // 激活项背景颜色 +$-sidebar-hover-bg: var(--wot-sidebar-hover-bg, $-color-gray-2) !default; // 激活项点击背景颜色 +$-sidebar-border-radius: var(--wd-sidebar-border-radius, 8px) !default; +$-sidebar-font-size: var(--wd-sidebar-font-size, 16px) !default; +$-sidebar-icon-size: var(--wd-sidebar-icon-size, 20px) !default; +$-sidebar-active-border-width: var(--wd-sidebar-active-border-width, 4px) !default; +$-sidebar-active-border-height: var(--wd-sidebar-active-border-height, 16px) !default; + +// fab +$-fab-trigger-height: var(--wd-fab-trigger-height, 56px) !default; +$-fab-trigger-width: var(--wd-fab-trigger-width, 56px) !default; +$-fab-actions-padding: var(--wd-actions-padding, 12px) !default; +$-fab-top: var(--wd-fab-top, 16px) !default; +$-fab-left: var(--wd-fab-left, 16px) !default; +$-fab-right: var(--wd-fab-right, 16px) !default; +$-fab-bottom: var(--wd-fab-bottom, 16px) !default; + + +// count-down +$-count-down-text-color: var(--wd-count-down-text-color, $-color-gray-8) !default; +$-count-down-font-size: var(--wd-count-down-font-size, $-fs-content) !default; +$-count-down-line-height: var(--wd-count-down-line-height, 20px) !default; + +// keyboard +$-number-keyboard-key-height: var(--wd-number-keyboard-key-height, 48px) !default; +$-number-keyboard-key-font-size: var(--wd-number-keyboard-key-font-size, 28px) !default; +$-number-keyboard-key-background: var(--wd-number-keyboard-key-background, $-color-white) !default; +$-number-keyboard-key-border-radius: var(--wot-number-keyboard-key-border-radius, 8px) !default; +$-number-keyboard-delete-font-size: var(--wot-number-keyboard-delete-font-size, 16px) !default; +$-number-keyboard-key-active-color: var(--wot-number-keyboard-key-active-color, $-color-gray-3) !default; +$-number-keyboard-button-text-color: var(--wot-number-keyboard-button-text-color, $-color-white) !default; +$-number-keyboard-button-background: var(--wot-number-keyboard--button-background, $-color-theme) !default; +$-number-keyboard-button-active-opacity: var(--wot-number-keyboard-button-active-opacity, 0.6) !default; +$-number-keyboard-background: var(--wot-number-keyboard-background, $-color-gray-2) !default; +$-number-keyboard-title-height: var(--wot-number-keyboard-title-height, 34px) !default; +$-number-keyboard-title-color: var(--wot-number-keyboard-title-color, $-color-gray-7) !default; +$-number-keyboard-title-font-size: var(--wot-number-keyboard-title-font-size, 16px) !default; +$-number-keyboard-close-padding: var(--wot-number-keyboard-title-font-size, 0 16px) !default; +$-number-keyboard-close-color: var(--wot-number-keyboard-close-color, $-color-theme) !default; +$-number-keyboard-close-font-size: var(--wot-number-keyboard-close-font-size, 14px) !default; + +// passwod-input +$-password-input-height: var(--wd-password-input-height, 50px); +$-password-input-margin: var(--wd-password-input-margin, 16px); +$-password-input-font-size: var(--wd-password-input-margin, 20px); +$-password-input-radius: var(--wd-password-input-radius, 6px); +$-password-input-background: var(--wd-password-input-background, #fff); +$-password-input-info-color: var(--wd-password-input-info-color, $-color-info); +$-password-input-info-font-size: var(--wd-password-input-info-font-size, $-fs-content); +$-password-input-border-color: var(--wd-password-border-color, #ebedf0); +$-password-input-error-info-color: var(--wd-password-input-error-info-color, $-color-danger); +$-password-input-dot-size: var(--wd-password-input-dot-size, 10px); +$-password-input-dot-color: var(--wd-password-input-dot-color, $-color-gray-8); +$-password-input-text-color: var(--wd-password-input-text-color, $-color-gray-8); +$-password-input-cursor-color: var(--wd-password-input-cursor-color, $-color-gray-8); +$-password-input-cursor-width: var(--wd-password-input-cursor-width, 1px); +$-password-input-cursor-height: var(--wd-password-input-cursor-height, 40%); +$-password-input-cursor-duration: var(--wd-password-input-cursor-duration, 1s); + +// form-item +$-form-item-error-message-color: var(--wot-form-item-error-message-color, $-color-danger) !default; +$-form-item-error-message-font-size: var(--wot-form-item-error-message-font-size, $-fs-secondary) !default; +$-form-item-error-message-line-height: var(--wot-form-item-error-message-line-height, 24px) !default; \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/common/base64.ts b/uni_modules/wot-design-uni/components/common/base64.ts new file mode 100644 index 0000000..3fc8a54 --- /dev/null +++ b/uni_modules/wot-design-uni/components/common/base64.ts @@ -0,0 +1,29 @@ +const _b64chars = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'] +const _mkUriSafe = (src) => src.replace(/[+/]/g, (m0) => (m0 === '+' ? '-' : '_')).replace(/=+$/m, '') +const fromUint8Array = (src, rfc4648 = false) => { + let b64 = '' + for (let i = 0, l = src.length; i < l; i += 3) { + const [a0, a1, a2] = [src[i], src[i + 1], src[i + 2]] + const ord = (a0 << 16) | (a1 << 8) | a2 + b64 += _b64chars[ord >>> 18] + b64 += _b64chars[(ord >>> 12) & 63] + b64 += typeof a1 !== 'undefined' ? _b64chars[(ord >>> 6) & 63] : '=' + b64 += typeof a2 !== 'undefined' ? _b64chars[ord & 63] : '=' + } + return rfc4648 ? _mkUriSafe(b64) : b64 +} +const _btoa = + typeof btoa === 'function' + ? (s) => btoa(s) + : (s) => { + if (s.charCodeAt() > 255) { + throw new RangeError('The string contains invalid characters.') + } + return fromUint8Array(Uint8Array.from(s, (c: any) => c.charCodeAt(0))) + } +const utob = (src) => unescape(encodeURIComponent(src)) + +export default function encode(src, rfc4648 = false) { + const b64 = _btoa(utob(src)) + return rfc4648 ? _mkUriSafe(b64) : b64 +} diff --git a/uni_modules/wot-design-uni/components/common/clickoutside.ts b/uni_modules/wot-design-uni/components/common/clickoutside.ts new file mode 100644 index 0000000..27e70e1 --- /dev/null +++ b/uni_modules/wot-design-uni/components/common/clickoutside.ts @@ -0,0 +1,34 @@ +/* + * @Author: weisheng + * @Date: 2023-07-02 22:51:06 + * @LastEditTime: 2023-07-13 10:07:17 + * @LastEditors: weisheng + * @Description: + * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\common\clickoutside.ts + * 记得注释 + */ +let queue: any[] = [] + +export function pushToQueue(comp) { + queue.push(comp) +} + +export function removeFromQueue(comp) { + queue = queue.filter((item) => { + return item.$.uid !== comp.$.uid + }) +} + +export function closeOther(comp) { + queue.forEach((item) => { + if (item.$.uid !== comp.$.uid) { + item.$.exposed.close() + } + }) +} + +export function closeOutside() { + queue.forEach((item) => { + item.$.exposed.close() + }) +} diff --git a/uni_modules/wot-design-uni/components/common/dayjs.ts b/uni_modules/wot-design-uni/components/common/dayjs.ts new file mode 100644 index 0000000..1f89706 --- /dev/null +++ b/uni_modules/wot-design-uni/components/common/dayjs.ts @@ -0,0 +1,146 @@ +/* eslint-disable */ +class Dayjs { + utc: boolean + date: Date + timeZone: number + timeZoneString: any + mYear: any + mMonth: any + mDay: any + mWeek: any + mHour: any + mMinute: any + mSecond: any + constructor(dateStr) { + this.utc = false + const parsedDate = this.parseConfig(dateStr) + this.date = new Date(parsedDate) + this.timeZone = this.date.getTimezoneOffset() / 60 + this.timeZoneString = this.padNumber(String(-1 * this.timeZone).replace(/^(.)?(\d)/, '$10$200'), 5, '+') + this.mYear = this.date.getFullYear() + this.mMonth = this.date.getMonth() + this.mDay = this.date.getDate() + this.mWeek = this.date.getDay() + this.mHour = this.date.getHours() + this.mMinute = this.date.getMinutes() + this.mSecond = this.date.getSeconds() + } + + parseConfig(dateStr) { + if (!dateStr) return new Date() + if (dateStr instanceof Date) return dateStr + if (/^(\d){8}$/.test(dateStr)) { + this.utc = true + return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}` + } + return dateStr + } + + padNumber(num, length, padChar) { + return !num || num.length >= length ? num : `${Array(length + 1 - num.length).join(padChar)}${num}` + } + + year() { + return this.mYear + } + + month() { + return this.mMonth + } + + unix() { + const timeZoneOffset = this.utc ? 60 * this.timeZone * 60 * 1000 : 0 + return Math.floor((this.date.getTime() + timeZoneOffset) / 1000) + } + + toString() { + return this.date.toUTCString() + } + + startOf(unit) { + switch (unit) { + case 'year': + return new Dayjs(new Date(this.year(), 0, 1)) + case 'month': + return new Dayjs(new Date(this.year(), this.month(), 1)) + default: + return this + } + } + + add(amount, unit) { + let interval + switch (unit) { + case 'm': + case 'minutes': + interval = 60 + break + case 'h': + case 'hours': + interval = 60 * 60 + break + case 'd': + case 'days': + interval = 24 * 60 * 60 + break + case 'w': + case 'weeks': + interval = 7 * 24 * 60 * 60 + break + default: + interval = 1 + } + const newUnixTime = this.unix() + amount * interval + return new Dayjs(1000 * newUnixTime) + } + + subtract(amount, unit) { + return this.add(-1 * amount, unit) + } + + format(formatStr = 'YYYY-MM-DDTHH:mm:ssZ') { + const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] + return formatStr.replace(/Y{2,4}|M{1,2}|D{1,2}|d{1,4}|H{1,2}|m{1,2}|s{1,2}|Z{1,2}/g, (match) => { + switch (match) { + case 'YY': + return String(this.mYear).slice(-2) + case 'YYYY': + return String(this.mYear) + case 'M': + return String(this.mMonth + 1) + case 'MM': + return this.padNumber(String(this.mMonth + 1), 2, '0') + case 'D': + return String(this.mDay) + case 'DD': + return this.padNumber(String(this.mDay), 2, '0') + case 'd': + return String(this.mWeek) + case 'dddd': + return weekdays[this.mWeek] + case 'H': + return String(this.mHour) + case 'HH': + return this.padNumber(String(this.mHour), 2, '0') + case 'm': + return String(this.mMinute) + case 'mm': + return this.padNumber(String(this.mMinute), 2, '0') + case 's': + return String(this.mSecond) + case 'ss': + return this.padNumber(String(this.mSecond), 2, '0') + case 'Z': + return `${this.timeZoneString.slice(0, -2)}:00` + case 'ZZ': + return this.timeZoneString + default: + return match + } + }) + } +} + +export function dayjs(dateStr?: string | number | Date) { + return new Dayjs(dateStr) +} diff --git a/uni_modules/wot-design-uni/components/common/lodash/debounce.ts b/uni_modules/wot-design-uni/components/common/lodash/debounce.ts new file mode 100644 index 0000000..3ed5213 --- /dev/null +++ b/uni_modules/wot-design-uni/components/common/lodash/debounce.ts @@ -0,0 +1,206 @@ +import isObject from './isObject' +import root from './internal/root' + +/** + * Creates a debounced function that delays invoking `func` until after `wait` + * milliseconds have elapsed since the last time the debounced function was + * invoked, or until the next browser frame is drawn. The debounced function + * comes with a `cancel` method to cancel delayed `func` invocations and a + * `flush` method to immediately invoke them. Provide `options` to indicate + * whether `func` should be invoked on the leading and/or trailing edge of the + * `wait` timeout. The `func` is invoked with the last arguments provided to the + * debounced function. Subsequent calls to the debounced function return the + * result of the last `func` invocation. + * + * **Note:** If `leading` and `trailing` options are `true`, `func` is + * invoked on the trailing edge of the timeout only if the debounced function + * is invoked more than once during the `wait` timeout. + * + * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred + * until the next tick, similar to `setTimeout` with a timeout of `0`. + * + * If `wait` is omitted in an environment with `requestAnimationFrame`, `func` + * invocation will be deferred until the next frame is drawn (typically about + * 16ms). + * + * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/) + * for details over the differences between `debounce` and `throttle`. + * + * @since 0.1.0 + * @category Function + * @param {Function} func The function to debounce. + * @param {number} [wait=0] + * The number of milliseconds to delay; if omitted, `requestAnimationFrame` is + * used (if available). + * @param {Object} [options={}] The options object. + * @param {boolean} [options.leading=false] + * Specify invoking on the leading edge of the timeout. + * @param {number} [options.maxWait] + * The maximum time `func` is allowed to be delayed before it's invoked. + * @param {boolean} [options.trailing=true] + * Specify invoking on the trailing edge of the timeout. + * @returns {Function} Returns the new debounced function. + * @example + * + * // Avoid costly calculations while the window size is in flux. + * jQuery(window).on('resize', debounce(calculateLayout, 150)) + * + * // Invoke `sendMail` when clicked, debouncing subsequent calls. + * jQuery(element).on('click', debounce(sendMail, 300, { + * 'leading': true, + * 'trailing': false + * })) + * + * // Ensure `batchLog` is invoked once after 1 second of debounced calls. + * const debounced = debounce(batchLog, 250, { 'maxWait': 1000 }) + * const source = new EventSource('/stream') + * jQuery(source).on('message', debounced) + * + * // Cancel the trailing debounced invocation. + * jQuery(window).on('popstate', debounced.cancel) + * + * // Check for pending invocations. + * const status = debounced.pending() ? "Pending..." : "Ready" + */ +function debounce(func, wait, options?) { + let lastArgs, lastThis, maxWait, result, timerId, lastCallTime + + let lastInvokeTime = 0 + let leading = false + let maxing = false + let trailing = true + + // Bypass `requestAnimationFrame` by explicitly setting `wait=0`. + const useRAF = !wait && wait !== 0 && typeof root.requestAnimationFrame === 'function' + + if (typeof func !== 'function') { + throw new TypeError('Expected a function') + } + wait = +wait || 0 + if (isObject(options)) { + leading = !!options.leading + maxing = 'maxWait' in options + maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait + trailing = 'trailing' in options ? !!options.trailing : trailing + } + + function invokeFunc(time) { + const args = lastArgs + const thisArg = lastThis + + lastArgs = lastThis = undefined + lastInvokeTime = time + result = func.apply(thisArg, args) + return result + } + + function startTimer(pendingFunc, wait) { + if (useRAF) { + root.cancelAnimationFrame(timerId) + return root.requestAnimationFrame(pendingFunc) + } + return setTimeout(pendingFunc, wait) + } + + function cancelTimer(id) { + if (useRAF) { + return root.cancelAnimationFrame(id) + } + clearTimeout(id) + } + + function leadingEdge(time) { + // Reset any `maxWait` timer. + lastInvokeTime = time + // Start the timer for the trailing edge. + timerId = startTimer(timerExpired, wait) + // Invoke the leading edge. + return leading ? invokeFunc(time) : result + } + + function remainingWait(time) { + const timeSinceLastCall = time - lastCallTime + const timeSinceLastInvoke = time - lastInvokeTime + const timeWaiting = wait - timeSinceLastCall + + return maxing ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting + } + + function shouldInvoke(time) { + const timeSinceLastCall = time - lastCallTime + const timeSinceLastInvoke = time - lastInvokeTime + + // Either this is the first call, activity has stopped and we're at the + // trailing edge, the system time has gone backwards and we're treating + // it as the trailing edge, or we've hit the `maxWait` limit. + return lastCallTime === undefined || timeSinceLastCall >= wait || timeSinceLastCall < 0 || (maxing && timeSinceLastInvoke >= maxWait) + } + + function timerExpired() { + const time = Date.now() + if (shouldInvoke(time)) { + return trailingEdge(time) + } + // Restart the timer. + timerId = startTimer(timerExpired, remainingWait(time)) + } + + function trailingEdge(time) { + timerId = undefined + + // Only invoke if we have `lastArgs` which means `func` has been + // debounced at least once. + if (trailing && lastArgs) { + return invokeFunc(time) + } + lastArgs = lastThis = undefined + return result + } + + function cancel() { + if (timerId !== undefined) { + cancelTimer(timerId) + } + lastInvokeTime = 0 + lastArgs = lastCallTime = lastThis = timerId = undefined + } + + function flush() { + return timerId === undefined ? result : trailingEdge(Date.now()) + } + + function pending() { + return timerId !== undefined + } + + function debounced(this: any, ...args) { + const time = Date.now() + const isInvoking = shouldInvoke(time) + + lastArgs = args + lastThis = this + lastCallTime = time + + if (isInvoking) { + if (timerId === undefined) { + return leadingEdge(lastCallTime) + } + if (maxing) { + // Handle invocations in a tight loop. + timerId = startTimer(timerExpired, wait) + return invokeFunc(lastCallTime) + } + } + if (timerId === undefined) { + timerId = startTimer(timerExpired, wait) + } + return result + } + + debounced.cancel = cancel + debounced.flush = flush + debounced.pending = pending + return debounced +} + +export default debounce diff --git a/uni_modules/wot-design-uni/components/common/lodash/internal/freeGlobal.ts b/uni_modules/wot-design-uni/components/common/lodash/internal/freeGlobal.ts new file mode 100644 index 0000000..59519fe --- /dev/null +++ b/uni_modules/wot-design-uni/components/common/lodash/internal/freeGlobal.ts @@ -0,0 +1,4 @@ +/** Detect free variable `global` from Node.js. */ +const freeGlobal = typeof global === 'object' && global !== null && global.Object === Object && global + +export default freeGlobal diff --git a/uni_modules/wot-design-uni/components/common/lodash/internal/root.ts b/uni_modules/wot-design-uni/components/common/lodash/internal/root.ts new file mode 100644 index 0000000..70cb56d --- /dev/null +++ b/uni_modules/wot-design-uni/components/common/lodash/internal/root.ts @@ -0,0 +1,23 @@ +/* + * @Author: weisheng + * @Date: 2023-09-01 21:42:32 + * @LastEditTime: 2023-09-03 11:43:06 + * @LastEditors: weisheng + * @Description: + * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\common\lodash\internal\root.ts + * 记得注释 + */ +import freeGlobal from './freeGlobal' + +/** Detect free variable `globalThis` */ +// eslint-disable-next-line eqeqeq +const freeGlobalThis = typeof globalThis === 'object' && globalThis !== null && globalThis.Object == Object && globalThis + +/** Detect free variable `self`. */ +const freeSelf = typeof self === 'object' && self !== null && self.Object === Object && self + +/** Used as a reference to the global object. */ +// eslint-disable-next-line no-new-func +const root = freeGlobalThis || freeGlobal || freeSelf || Function('return this')() + +export default root diff --git a/uni_modules/wot-design-uni/components/common/lodash/isObject.ts b/uni_modules/wot-design-uni/components/common/lodash/isObject.ts new file mode 100644 index 0000000..e9e81bf --- /dev/null +++ b/uni_modules/wot-design-uni/components/common/lodash/isObject.ts @@ -0,0 +1,29 @@ +/** + * Checks if `value` is the + * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types) + * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`) + * + * @since 0.1.0 + * @category Lang + * @param {*} value The value to check. + * @returns {boolean} Returns `true` if `value` is an object, else `false`. + * @example + * + * isObject({}) + * // => true + * + * isObject([1, 2, 3]) + * // => true + * + * isObject(Function) + * // => true + * + * isObject(null) + * // => false + */ +function isObject(value) { + const type = typeof value + return value != null && (type === 'object' || type === 'function') +} + +export default isObject diff --git a/uni_modules/wot-design-uni/components/common/util.ts b/uni_modules/wot-design-uni/components/common/util.ts new file mode 100644 index 0000000..cb97861 --- /dev/null +++ b/uni_modules/wot-design-uni/components/common/util.ts @@ -0,0 +1,555 @@ +/* eslint-disable no-prototype-builtins */ +import debounce from './lodash/debounce' + +/** + * 生成uuid + * @returns string + */ +export function uuid() { + return s4() + s4() + s4() + s4() + s4() + s4() + s4() + s4() +} + +function s4() { + return Math.floor((1 + Math.random()) * 0x10000) + .toString(16) + .substring(1) +} + +/** + * @description 对num自动填充px + * @param {Number} num + * @return {string} num+px + */ +export function addUnit(num: number | string) { + return Number.isNaN(Number(num)) ? num : `${num}px` +} + +/** + * @description 判断target是否对象 + * @param value + * @return {boolean} + */ +export function isObj(value: any): value is object { + return Object.prototype.toString.call(value) === '[object Object]' || typeof value === 'object' +} + +/** + * 获取目标原始类型 + * @param target 任意类型 + * @returns {string} type 数据类型 + */ +export function getType(target: unknown): string { + // 得到原生类型 + const typeStr = Object.prototype.toString.call(target) + // 拿到类型值 + const match = typeStr.match(/\[object (\w+)\]/) + const type = match && match.length ? match[1].toLowerCase() : '' + // 类型值转小写并返回 + return type +} + +/** + * @description 默认的外部格式化函数 - picker 组件 + * @param items - 要格式化的数据项数组或单个数据项 + * @param kv - 配置对象,包含 labelKey 作为键值 + * @returns 格式化后的字符串 + */ +export const defaultDisplayFormat = function (items: any[] | Record, kv?: { labelKey?: string }): string { + const labelKey: string = kv?.labelKey || 'value' + + if (Array.isArray(items)) { + return items.map((item) => item[labelKey]).join(', ') + } else { + return items[labelKey] + } +} + +/** + * @description 默认函数占位符 - pickerView组件 + * @param value 值 + * @return value + */ +export const defaultFunction = (value: T): T => value + +/** + * @description 检查值是否不为空 + * @param value 值 + * @return {Boolean} 是否不为空 + */ +export const isDef = (value: T): value is NonNullable => value !== undefined && value !== null + +export { debounce } + +/** + * @description 防止数字小于零 + * @param {number} num + * @param {string} label 标签 + */ +export const checkNumRange = (num: number, label: string = 'value'): void => { + if (num < 0) { + throw new Error(`${label} shouldn't be less than zero`) + } +} + +/** + * @description 防止 pixel 无意义 + * @param {number} num + * @param {string} label 标签 + */ +export const checkPixelRange = (num: number, label: string = 'value'): void => { + if (num <= 0) { + throw new Error(`${label} should be greater than zero`) + } +} + +/** + * 将 RGB 值转换为十六进制颜色代码。 + * @param {number} r - 红色分量 (0-255)。 + * @param {number} g - 绿色分量 (0-255)。 + * @param {number} b - 蓝色分量 (0-255)。 + * @returns {string} 十六进制颜色代码 (#RRGGBB)。 + */ +export function rgbToHex(r: number, g: number, b: number): string { + // 将 RGB 分量组合成一个十六进制数。 + const hex = ((r << 16) | (g << 8) | b).toString(16) + + // 使用零填充十六进制数,确保它有 6 位数字(RGB 范围)。 + const paddedHex = '#' + '0'.repeat(Math.max(0, 6 - hex.length)) + hex + + return paddedHex +} + +/** + * 将十六进制颜色代码转换为 RGB 颜色数组。 + * @param hex 十六进制颜色代码(例如:'#RRGGBB') + * @returns 包含红、绿、蓝三个颜色分量的数组 + */ +function hexToRgb(hex: string): number[] { + const rgb: number[] = [] + + // 从第一个字符开始,每两个字符代表一个颜色分量 + for (let i = 1; i < 7; i += 2) { + // 将两个字符的十六进制转换为十进制,并添加到 rgb 数组中 + rgb.push(parseInt('0x' + hex.slice(i, i + 2), 16)) + } + + return rgb +} + +/** + * 计算渐变色的中间变量数组。 + * @param {string} startColor 开始颜色 + * @param {string} endColor 结束颜色 + * @param {number} step 获取渲染位置,默认为中间位置 + * @returns {string[]} 渐变色中间颜色变量数组 + */ +export const gradient = (startColor: string, endColor: string, step: number = 2): string[] => { + // 将hex转换为rgb + const sColor: number[] = hexToRgb(startColor) + const eColor: number[] = hexToRgb(endColor) + + // 计算R\G\B每一步的差值 + const rStep: number = (eColor[0] - sColor[0]) / step + const gStep: number = (eColor[1] - sColor[1]) / step + const bStep: number = (eColor[2] - sColor[2]) / step + + const gradientColorArr: string[] = [] + for (let i = 0; i < step; i++) { + // 计算每一步的hex值 + gradientColorArr.push( + rgbToHex(parseInt(String(rStep * i + sColor[0])), parseInt(String(gStep * i + sColor[1])), parseInt(String(bStep * i + sColor[2]))) + ) + } + return gradientColorArr +} + +/** + * 确保数值不超出指定范围。 + * @param {number} num 要限制范围的数值 + * @param {number} min 最小范围 + * @param {number} max 最大范围 + * @returns {number} 在指定范围内的数值 + */ +export const range = (num: number, min: number, max: number): number => { + // 使用 Math.min 和 Math.max 保证 num 不会超出指定范围 + return Math.min(Math.max(num, min), max) +} + +/** + * 比较两个值是否相等。 + * @param {any} value1 第一个值 + * @param {any} value2 第二个值 + * @returns {boolean} 如果值相等则为 true,否则为 false + */ +export const isEqual = (value1: any, value2: any): boolean => { + // 使用严格相等运算符比较值是否相等 + if (value1 === value2) { + return true + } + + // 如果其中一个值不是数组,则认为值不相等 + if (!Array.isArray(value1) || !Array.isArray(value2)) { + return false + } + + // 如果数组长度不相等,则认为值不相等 + if (value1.length !== value2.length) { + return false + } + + // 逐个比较数组元素是否相等 + for (let i = 0; i < value1.length; ++i) { + if (value1[i] !== value2[i]) { + return false + } + } + + // 所有比较均通过,则认为值相等 + return true +} + +/** + * 在数字前补零,使其达到指定长度。 + * @param {number | string} number 要补零的数字 + * @param {number} length 目标长度,默认为 2 + * @returns {string} 补零后的结果 + */ +export const padZero = (number: number | string, length: number = 2): string => { + // 将输入转换为字符串 + let numStr: string = number.toString() + + // 在数字前补零,直到达到指定长度 + while (numStr.length < length) { + numStr = '0' + numStr + } + + return numStr +} + +/** @description 全局变量id */ +export const context = { + id: 1000 +} + +/** + * 获取节点信息 + * @param selector 节点 #id,.class + * @param all 是否返回所有 selector 对应的节点 + * @param scope 作用域(支付宝小程序无效) + * @returns + */ +export function getRect(selector: string, all: boolean = false, scope?: any) { + return new Promise((resolve) => { + let query: UniNamespace.SelectorQuery | null = null + if (scope) { + query = uni.createSelectorQuery().in(scope) + } else { + query = uni.createSelectorQuery() + } + query[all ? 'selectAll' : 'select'](selector) + .boundingClientRect((rect) => { + if (all && Array.isArray(rect) && rect.length) { + resolve(rect) + } + if (!all && rect) { + resolve(rect) + } + }) + .exec() + }) +} + +/** + * 将驼峰命名转换为短横线命名。 + * @param {string} word 待转换的词条 + * @returns {string} 转换后的结果 + */ +export function kebabCase(word: string): string { + // 使用正则表达式匹配所有大写字母,并在前面加上短横线,然后转换为小写 + const newWord: string = word + .replace(/[A-Z]/g, function (match) { + return '-' + match + }) + .toLowerCase() + + return newWord +} + +/** + * 检查给定值是否为数组。 + * @param {any} value 要检查的值 + * @returns {boolean} 如果是数组则返回 true,否则返回 false + */ +export function isArray(value: any): value is Array { + // 如果 Array.isArray 函数可用,直接使用该函数检查 + if (typeof Array.isArray === 'function') { + return Array.isArray(value) + } + // 否则,使用对象原型的 toString 方法进行检查 + return Object.prototype.toString.call(value) === '[object Array]' +} + +/** + * 检查给定值是否为函数。 + * @param {any} value 要检查的值 + * @returns {boolean} 如果是函数则返回 true,否则返回 false + */ +// eslint-disable-next-line @typescript-eslint/ban-types +export function isFunction(value: any): value is T { + return getType(value) === 'function' +} + +/** + * 检查给定值是否为字符串。 + * @param {unknown} value 要检查的值 + * @returns {value is string} 如果是字符串则返回 true,否则返回 false + */ +export function isString(value: unknown): value is string { + return getType(value) === 'string' +} + +/** + * 否是数值 + * @param {*} value + */ +export function isNumber(value: any): value is number { + return getType(value) === 'number' +} + +/** + * 检查给定值是否为 Promise 对象。 + * @param {unknown} value 要检查的值 + * @returns {value is Promise} 如果是 Promise 对象则返回 true,否则返回 false + */ +export function isPromise(value: unknown): value is Promise { + // 先将 value 断言为 object 类型 + if (isObj(value)) { + // 然后进一步检查 value 是否具有 then 和 catch 方法,并且它们是函数类型 + return isFunction((value as Promise).then) && isFunction((value as Promise).catch) + } + return false // 如果 value 不是对象类型,则肯定不是 Promise +} + +/** + * 检查给定的值是否为布尔类型 + * @param value 要检查的值 + * @returns 如果值为布尔类型,则返回true,否则返回false + */ +export function isBoolean(value: any): value is boolean { + return typeof value === 'boolean' +} + +/** + * 检查给定的值是否为奇数 + * @param value 要检查的值 + * @returns + */ +export function isOdd(value: number): boolean { + if (typeof value !== 'number') { + throw new Error('输入必须为数字') + } + + // 使用取模运算符来判断是否为奇数 + // 如果 number 除以 2 的余数为 1,就是奇数 + // 否则是偶数 + return value % 2 === 1 +} + +/** + * 是否为base64图片 + * @param {string} url + * @return + */ +export function isBase64Image(url: string) { + // 使用正则表达式检查URL是否以"data:image"开头,这是Base64图片的常见前缀 + return /^data:image\/(png|jpg|jpeg|gif|bmp);base64,/.test(url) +} + +/** + * 将外部传入的样式格式化为可读的 CSS 样式。 + * @param {object | object[]} styles 外部传入的样式对象或数组 + * @returns {string} 格式化后的 CSS 样式字符串 + */ +export function objToStyle(styles: object | object[]): string { + // 如果 styles 是数组类型 + if (isArray(styles)) { + // 使用过滤函数去除空值和 null 值的元素 + // 对每个非空元素递归调用 objToStyle,然后通过分号连接 + return styles + .filter(function (item) { + return item != null && item !== '' + }) + .map(function (item) { + return objToStyle(item) + }) + .join(';') + } + + if (isString(styles)) { + return styles + } + + // 如果 styles 是对象类型 + if (isObj(styles)) { + // 使用 Object.keys 获取所有属性名 + // 使用过滤函数去除值为 null 或空字符串的属性 + // 对每个属性名和属性值进行格式化,通过分号连接 + return Object.keys(styles) + .filter(function (key) { + return styles[key] != null && styles[key] !== '' + }) + .map(function (key) { + // 使用 kebabCase 函数将属性名转换为 kebab-case 格式 + // 将属性名和属性值格式化为 CSS 样式的键值对 + return [kebabCase(key), styles[key]].join(':') + }) + .join(';') + } + // 如果 styles 不是对象也不是数组,则直接返回 + return '' +} + +export const requestAnimationFrame = (cb = () => void 0) => { + return new Promise((resolve, reject) => { + const timer = setInterval(() => { + clearInterval(timer) + resolve(true) + cb() + }, 1000 / 30) + }) +} + +/** + * 深拷贝函数,用于将对象进行完整复制。 + * @param obj 要深拷贝的对象 + * @param cache 用于缓存已复制的对象,防止循环引用 + * @returns 深拷贝后的对象副本 + */ +export function deepClone(obj: T, cache: Map = new Map()): T { + // 如果对象为 null 或者不是对象类型,则直接返回该对象 + if (obj === null || typeof obj !== 'object') { + return obj + } + + // 处理特殊对象类型:日期、正则表达式、错误对象 + if (obj instanceof Date) { + return new Date(obj.getTime()) as any + } + if (obj instanceof RegExp) { + return new RegExp(obj.source, obj.flags) as any + } + if (obj instanceof Error) { + const errorCopy = new Error(obj.message) as any + errorCopy.stack = obj.stack + return errorCopy + } + + // 检查缓存中是否已存在该对象的复制 + if (cache.has(obj)) { + return cache.get(obj) + } + + // 根据原始对象的类型创建对应的空对象或数组 + const copy: any = Array.isArray(obj) ? [] : {} + + // 将当前对象添加到缓存中 + cache.set(obj, copy) + + // 递归地深拷贝对象的每个属性 + for (const key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) { + copy[key] = deepClone(obj[key], cache) + } + } + + return copy as T +} + +/** + * 深度合并两个对象。 + * @param target 目标对象,将合并的结果存放在此对象中 + * @param source 源对象,要合并到目标对象的对象 + * @returns 合并后的目标对象 + */ +export function deepMerge>(target: T, source: Record): T { + // 深拷贝目标对象,避免修改原始对象 + target = deepClone(target) + + // 检查目标和源是否都是对象类型 + if (typeof target !== 'object' || typeof source !== 'object') { + throw new Error('Both target and source must be objects.') + } + + // 遍历源对象的属性 + for (const prop in source) { + if (!source.hasOwnProperty(prop)) + continue + // 使用类型断言,告诉 TypeScript 这是有效的属性 + ;(target as Record)[prop] = source[prop] + } + + return target +} + +/** + * 构建带参数的URL + * @param baseUrl 基础URL + * @param params 参数对象,键值对表示要添加到URL的参数 + * @returns 返回带有参数的URL + */ +export function buildUrlWithParams(baseUrl: string, params: Record) { + // 将参数对象转换为查询字符串 + const queryString = Object.entries(params) + .map(([key, value]) => `${key}=${encodeURIComponent(value)}`) + .join('&') + + // 检查基础URL是否已包含查询字符串,并选择适当的分隔符 + const separator = baseUrl.includes('?') ? '&' : '?' + + // 返回带有参数的URL + return `${baseUrl}${separator}${queryString}` +} + +// eslint-disable-next-line @typescript-eslint/ban-types +export function throttle(func: Function, wait: number): Function { + let timeout: NodeJS.Timeout | null + let previous = 0 + + const throttled = function (this: any, ...args: any[]) { + const now = Date.now() + const remaining = wait - (now - previous) + + if (remaining <= 0) { + if (timeout) { + clearTimeout(timeout) + timeout = null + } + previous = now + func.apply(this, args) + } else if (!timeout) { + timeout = setTimeout(() => { + previous = Date.now() + timeout = null + func.apply(this, args) + }, remaining) + } + } + + return throttled +} + +/** + * 根据属性路径获取对象中的属性值 + * @param obj 目标对象 + * @param path 属性路径,可以是字符串或字符串数组 + * @returns 属性值,如果属性不存在或中间的属性为 null 或 undefined,则返回 undefined + */ +export const getPropByPath = (obj: any, path: string): any => { + const keys: string[] = path.split('.') + + try { + return keys.reduce((acc: any, key: string) => (acc !== undefined && acc !== null ? acc[key] : undefined), obj) + } catch (error) { + return undefined + } +} diff --git a/uni_modules/wot-design-uni/components/composables/useCell.ts b/uni_modules/wot-design-uni/components/composables/useCell.ts new file mode 100644 index 0000000..99fcac2 --- /dev/null +++ b/uni_modules/wot-design-uni/components/composables/useCell.ts @@ -0,0 +1,45 @@ +import { getCurrentInstance, inject, onMounted, onBeforeMount, ref, watch } from 'vue' + +export function useCell() { + const border = ref(false) // 是否展示边框 + const cellGroup: any = inject('cell-group', null) || {} + const cellList: any = inject('cell-list', null) || ref([]) + const { proxy } = getCurrentInstance() as any + + watch( + () => cellGroup.border, + (newVal) => { + setIndexAndStatus(Boolean(newVal), proxy.$.uid) + }, + { + deep: true, + immediate: true + } + ) + + onBeforeMount(() => { + cellList.value = [...cellList.value.concat([{ uid: proxy.$.uid }])] + setIndexAndStatus(cellGroup.border, proxy.$.uid) + }) + + /** + * @description 从cellGroup获取此组件的索引 + * @return {Number} 此组件的索引 + */ + function getIndex(uuid: string) { + if (!cellList || !cellList.value) return + return cellList.value.findIndex((cell) => { + return cell.uid === uuid + }) + } + + /** + * @description 为所有索引非0的组件设置刘海线,此方法由cellGroup调用 + */ + function setIndexAndStatus(isBorder: boolean, uuid: string) { + const index = getIndex(uuid) + border.value = isBorder && index + } + + return { border, cellGroup, cellList, setIndexAndStatus, getIndex } +} diff --git a/uni_modules/wot-design-uni/components/composables/useChildren.ts b/uni_modules/wot-design-uni/components/composables/useChildren.ts new file mode 100644 index 0000000..7daf054 --- /dev/null +++ b/uni_modules/wot-design-uni/components/composables/useChildren.ts @@ -0,0 +1,113 @@ +import { + VNode, + provide, + reactive, + InjectionKey, + getCurrentInstance, + VNodeNormalizedChildren, + ComponentPublicInstance, + ComponentInternalInstance +} from 'vue' + +// 小程序端不支持从vue导出的isVNode方法,参考uni-mp-vue的实现 +function isVNode(value: any): value is VNode { + return value ? value.__v_isVNode === true : false +} + +export function flattenVNodes(children: VNodeNormalizedChildren) { + const result: VNode[] = [] + + const traverse = (children: VNodeNormalizedChildren) => { + if (Array.isArray(children)) { + children.forEach((child) => { + if (isVNode(child)) { + result.push(child) + + if (child.component?.subTree) { + result.push(child.component.subTree) + traverse(child.component.subTree.children) + } + + if (child.children) { + traverse(child.children) + } + } + }) + } + } + + traverse(children) + + return result +} + +const findVNodeIndex = (vnodes: VNode[], vnode: VNode) => { + const index = vnodes.indexOf(vnode) + if (index === -1) { + return vnodes.findIndex((item) => vnode.key !== undefined && vnode.key !== null && item.type === vnode.type && item.key === vnode.key) + } + return index +} + +// sort children instances by vnodes order +export function sortChildren( + parent: ComponentInternalInstance, + publicChildren: ComponentPublicInstance[], + internalChildren: ComponentInternalInstance[] +) { + const vnodes = parent && parent.subTree && parent.subTree.children ? flattenVNodes(parent.subTree.children) : [] + + internalChildren.sort((a, b) => findVNodeIndex(vnodes, a.vnode) - findVNodeIndex(vnodes, b.vnode)) + + const orderedPublicChildren = internalChildren.map((item) => item.proxy!) + + publicChildren.sort((a, b) => { + const indexA = orderedPublicChildren.indexOf(a) + const indexB = orderedPublicChildren.indexOf(b) + return indexA - indexB + }) +} + +export function useChildren< + // eslint-disable-next-line + Child extends ComponentPublicInstance = ComponentPublicInstance<{}, any>, + ProvideValue = never +>(key: InjectionKey) { + const publicChildren: Child[] = reactive([]) + const internalChildren: ComponentInternalInstance[] = reactive([]) + const parent = getCurrentInstance()! + + const linkChildren = (value?: ProvideValue) => { + const link = (child: ComponentInternalInstance) => { + if (child.proxy) { + internalChildren.push(child) + publicChildren.push(child.proxy as Child) + sortChildren(parent, publicChildren, internalChildren) + } + } + + const unlink = (child: ComponentInternalInstance) => { + const index = internalChildren.indexOf(child) + publicChildren.splice(index, 1) + internalChildren.splice(index, 1) + } + + provide( + key, + Object.assign( + { + link, + unlink, + children: publicChildren, + internalChildren + }, + value + ) + ) + } + + return { + children: publicChildren, + linkChildren + } +} diff --git a/uni_modules/wot-design-uni/components/composables/useCountDown.ts b/uni_modules/wot-design-uni/components/composables/useCountDown.ts new file mode 100644 index 0000000..65c7eb6 --- /dev/null +++ b/uni_modules/wot-design-uni/components/composables/useCountDown.ts @@ -0,0 +1,159 @@ +import { ref, computed, onBeforeUnmount } from 'vue' +import { isDef } from '../common/util' + +// 定义倒计时时间的数据结构 +export type CurrentTime = { + days: number + hours: number + total: number + minutes: number + seconds: number + milliseconds: number +} + +// 定义倒计时的配置项 +export type UseCountDownOptions = { + time: number // 倒计时总时间,单位为毫秒 + millisecond?: boolean // 是否开启毫秒级倒计时,默认为 false + onChange?: (current: CurrentTime) => void // 倒计时每次变化时的回调函数 + onFinish?: () => void // 倒计时结束时的回调函数 +} + +// 定义常量 +const SECOND = 1000 +const MINUTE = 60 * SECOND +const HOUR = 60 * MINUTE +const DAY = 24 * HOUR + +// 将时间转换为倒计时数据结构 +function parseTime(time: number): CurrentTime { + const days = Math.floor(time / DAY) + const hours = Math.floor((time % DAY) / HOUR) + const minutes = Math.floor((time % HOUR) / MINUTE) + const seconds = Math.floor((time % MINUTE) / SECOND) + const milliseconds = Math.floor(time % SECOND) + + return { + total: time, + days, + hours, + minutes, + seconds, + milliseconds + } +} + +// 判断两个时间是否在同一秒内 +function isSameSecond(time1: number, time2: number): boolean { + return Math.floor(time1 / 1000) === Math.floor(time2 / 1000) +} + +// 判断当前环境是否为 H5 +const isH5 = process.env.UNI_PLATFORM === 'h5' + +// 封装 requestAnimationFrame 和 setTimeout +function raf(fn: FrameRequestCallback): number { + return isH5 ? requestAnimationFrame(fn) : setTimeout(fn, 33) +} + +function cancelRaf(id: number) { + if (isH5) { + cancelAnimationFrame(id) + } else { + clearTimeout(id) + } +} + +// 定义 useCountDown 函数 +export function useCountDown(options: UseCountDownOptions) { + let timer: number | null = null // 定时器 + let endTime: number // 结束时间 + let counting: boolean // 是否计时中 + + const remain = ref(options.time) // 剩余时间 + const current = computed(() => parseTime(remain.value)) // 当前倒计时数据 + + // 暂停倒计时 + const pause = () => { + counting = false + cancelRaf(timer!) + } + + // 获取当前剩余时间 + const getCurrentRemain = () => Math.max(endTime - Date.now(), 0) + + // 设置剩余时间 + const setRemain = (value: number) => { + remain.value = value + isDef(options.onChange) && options.onChange(current.value) + + if (value === 0) { + pause() + isDef(options.onFinish) && options.onFinish() + } + } + + // 每毫秒更新一次倒计时 + const microTick = () => { + timer = raf(() => { + if (counting) { + setRemain(getCurrentRemain()) + + if (remain.value > 0) { + microTick() + } + } + }) + } + + // 每秒更新一次倒计时 + const macroTick = () => { + timer = raf(() => { + if (counting) { + const remainRemain = getCurrentRemain() + + if (!isSameSecond(remainRemain, remain.value) || remainRemain === 0) { + setRemain(remainRemain) + } + + if (remain.value > 0) { + macroTick() + } + } + }) + } + + // 根据配置项选择更新方式 + const tick = () => { + if (options.millisecond) { + microTick() + } else { + macroTick() + } + } + + // 开始倒计时 + const start = () => { + if (!counting) { + endTime = Date.now() + remain.value + counting = true + tick() + } + } + + // 重置倒计时 + const reset = (totalTime: number = options.time) => { + pause() + remain.value = totalTime + } + + // 在组件卸载前暂停倒计时 + onBeforeUnmount(pause) + + return { + start, + pause, + reset, + current + } +} diff --git a/uni_modules/wot-design-uni/components/composables/useLockScroll.ts b/uni_modules/wot-design-uni/components/composables/useLockScroll.ts new file mode 100644 index 0000000..ae1c002 --- /dev/null +++ b/uni_modules/wot-design-uni/components/composables/useLockScroll.ts @@ -0,0 +1,32 @@ +import { ref, watch } from 'vue' + +function useLockScroll(shouldLock: () => boolean) { + const scrollLockCount = ref(0) + + const lock = () => { + if (scrollLockCount.value === 0) { + document.getElementsByTagName('body')[0].style.overflow = 'hidden' + } + scrollLockCount.value++ + } + + const unlock = () => { + if (scrollLockCount.value > 0) { + scrollLockCount.value-- + if (scrollLockCount.value === 0) { + document.getElementsByTagName('body')[0].style.overflow = '' + } + } + } + + watch(shouldLock, (value) => { + value ? lock() : unlock() + }) + + return { + lock, + unlock + } +} + +export default useLockScroll diff --git a/uni_modules/wot-design-uni/components/composables/useParent.ts b/uni_modules/wot-design-uni/components/composables/useParent.ts new file mode 100644 index 0000000..eb1c05e --- /dev/null +++ b/uni_modules/wot-design-uni/components/composables/useParent.ts @@ -0,0 +1,32 @@ +import { ref, inject, computed, onUnmounted, InjectionKey, getCurrentInstance, ComponentPublicInstance, ComponentInternalInstance } from 'vue' + +type ParentProvide = T & { + link(child: ComponentInternalInstance): void + unlink(child: ComponentInternalInstance): void + children: ComponentPublicInstance[] + internalChildren: ComponentInternalInstance[] +} + +export function useParent(key: InjectionKey>) { + const parent = inject(key, null) + + if (parent) { + const instance = getCurrentInstance()! + const { link, unlink, internalChildren } = parent + + link(instance) + onUnmounted(() => unlink(instance)) + + const index = computed(() => internalChildren.indexOf(instance)) + + return { + parent, + index + } + } + + return { + parent: null, + index: ref(-1) + } +} diff --git a/uni_modules/wot-design-uni/components/composables/usePopover.ts b/uni_modules/wot-design-uni/components/composables/usePopover.ts new file mode 100644 index 0000000..22ed092 --- /dev/null +++ b/uni_modules/wot-design-uni/components/composables/usePopover.ts @@ -0,0 +1,168 @@ +import { getCurrentInstance, ref } from 'vue' +import { getRect } from '../common/util' + +export function usePopover() { + const { proxy } = getCurrentInstance() as any + const popStyle = ref('') + const arrowStyle = ref('') + const showStyle = ref('') + const arrowClass = ref('') + const popWidth = ref(0) + const popHeight = ref(0) + const left = ref(0) + const bottom = ref(0) + const width = ref(0) + const height = ref(0) + const top = ref(0) + + function noop() {} + + function init( + placement: + | 'top' + | 'top-start' + | 'top-end' + | 'bottom' + | 'bottom-start' + | 'bottom-end' + | 'left' + | 'left-start' + | 'left-end' + | 'right' + | 'right-start' + | 'right-end', + visibleArrow: boolean, + selector: string + ) { + // 初始化 class + if (visibleArrow) { + const arrowClassArr = [ + `wd-${selector}__arrow`, + placement === 'bottom' || placement === 'bottom-start' || placement === 'bottom-end' ? `wd-${selector}__arrow-up` : '', + placement === 'left' || placement === 'left-start' || placement === 'left-end' ? `wd-${selector}__arrow-right` : '', + placement === 'right' || placement === 'right-start' || placement === 'right-end' ? `wd-${selector}__arrow-left` : '', + placement === 'top' || placement === 'top-start' || placement === 'top-end' ? `wd-${selector}__arrow-down` : '' + ] + arrowClass.value = arrowClassArr.join(' ') + } + + // 初始化数据获取 + getRect('#target', false, proxy).then((rect: any) => { + if (!rect) return + left.value = rect.left + bottom.value = rect.bottom + width.value = rect.width + height.value = rect.height + top.value = rect.top + }) + // 用透明度可在初始化时获取到pop尺寸 + getRect('#pos', false, proxy).then((rect: any) => { + if (!rect) return + popWidth.value = rect.width + popHeight.value = rect.height + }) + } + + function checkType(value) { + return Object.prototype.toString.call(value).slice(8, -1) + } + + function control( + placement: + | 'top' + | 'top-start' + | 'top-end' + | 'bottom' + | 'bottom-start' + | 'bottom-end' + | 'left' + | 'left-start' + | 'left-end' + | 'right' + | 'right-start' + | 'right-end', + offset: number + ) { + // arrow size + const arrowSize = 9 + // 上下位(纵轴)对应的距离左边的距离 + const verticalX = width.value / 2 + // 上下位(纵轴)对应的距离底部的距离 + const verticalY = arrowSize + height.value + 5 + // 左右位(横轴)对应的距离左边的距离 + const horizontalX = width.value + arrowSize + 5 + // 左右位(横轴)对应的距离底部的距离 + const horizontalY = height.value / 2 + + const offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset + const offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset + + const placements = new Map([ + // 上 + ['top', [`left: ${verticalX}px; bottom: ${verticalY}px; transform: translateX(-50%);`, 'left: 50%;']], + [ + 'top-start', + [ + `left: ${offsetX}px; bottom: ${verticalY}px;`, + `left: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px;` + ] + ], + [ + 'top-end', + [ + `right: ${offsetX}px; bottom: ${verticalY}px;`, + `right: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px; transform: translateX(50%);` + ] + ], + // 下 + ['bottom', [`left: ${verticalX}px; top: ${verticalY}px; transform: translateX(-50%);`, 'left: 50%;']], + [ + 'bottom-start', + [`left: ${offsetX}px; top: ${verticalY}px;`, `left: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px;`] + ], + [ + 'bottom-end', + [ + `right: ${offsetX}px; top: ${verticalY}px;`, + `right: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px; transform: translateX(50%);` + ] + ], + // 左 + ['left', [`right: ${horizontalX}px; top: ${horizontalY}px; transform: translateY(-50%);`, 'top: 50%']], + [ + 'left-start', + [ + `right: ${horizontalX}px; top: ${offsetY}px;`, + `top: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px;` + ] + ], + [ + 'left-end', + [ + `right: ${horizontalX}px; bottom: ${offsetY}px;`, + `bottom: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px; transform: translateY(50%);` + ] + ], + // 右 + ['right', [`left: ${horizontalX}px; top: ${horizontalY}px; transform: translateY(-50%);`, 'top: 50%']], + [ + 'right-start', + [ + `left: ${horizontalX}px; top: ${offsetY}px;`, + `top: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px;` + ] + ], + [ + 'right-end', + [ + `left: ${horizontalX}px; bottom: ${offsetY}px;`, + `bottom: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px; transform: translateY(50%);` + ] + ] + ]) + popStyle.value = placements.get(placement)![0] + arrowStyle.value = placements.get(placement)![1] + } + + return { popStyle, arrowStyle, showStyle, arrowClass, init, control, noop, checkType } +} diff --git a/uni_modules/wot-design-uni/components/composables/useQueue.ts b/uni_modules/wot-design-uni/components/composables/useQueue.ts new file mode 100644 index 0000000..80021b3 --- /dev/null +++ b/uni_modules/wot-design-uni/components/composables/useQueue.ts @@ -0,0 +1,52 @@ +import { type Ref, provide, ref } from 'vue' + +export const queueKey = '__QUEUE_KEY__' + +export interface Queue { + queue: Ref + pushToQueue: (comp: any) => void + removeFromQueue: (comp: any) => void + closeOther: (comp: any) => void + closeOutside: () => void +} + +export function useQueue() { + const queue = ref([]) + + function pushToQueue(comp: any) { + queue.value.push(comp) + } + + function removeFromQueue(comp: any) { + queue.value = queue.value.filter((item) => { + return item.$.uid !== comp.$.uid + }) + } + + function closeOther(comp: any) { + queue.value.forEach((item) => { + if (item.$.uid !== comp.$.uid) { + item.$.exposed.close() + } + }) + } + + function closeOutside() { + queue.value.forEach((item) => { + item.$.exposed.close() + }) + } + + provide(queueKey, { + queue, + pushToQueue, + removeFromQueue, + closeOther, + closeOutside + }) + + return { + closeOther, + closeOutside + } +} diff --git a/uni_modules/wot-design-uni/components/composables/useTouch.ts b/uni_modules/wot-design-uni/components/composables/useTouch.ts new file mode 100644 index 0000000..76393f9 --- /dev/null +++ b/uni_modules/wot-design-uni/components/composables/useTouch.ts @@ -0,0 +1,43 @@ +import { ref } from 'vue' + +export function useTouch() { + const direction = ref('') + const deltaX = ref(0) + const deltaY = ref(0) + const offsetX = ref(0) + const offsetY = ref(0) + const startX = ref(0) + const startY = ref(0) + + function touchStart(event) { + const touch = event.touches[0] + direction.value = '' + deltaX.value = 0 + deltaY.value = 0 + offsetX.value = 0 + offsetY.value = 0 + startX.value = touch.clientX + startY.value = touch.clientY + } + + function touchMove(event) { + const touch = event.touches[0] + deltaX.value = touch.clientX - startX.value + deltaY.value = touch.clientY - startY.value + offsetX.value = Math.abs(deltaX.value) + offsetY.value = Math.abs(deltaY.value) + direction.value = offsetX.value > offsetY.value ? 'horizontal' : offsetX.value < offsetY.value ? 'vertical' : '' + } + + return { + touchStart, + touchMove, + direction, + deltaX, + deltaY, + offsetX, + offsetY, + startX, + startY + } +} diff --git a/uni_modules/wot-design-uni/components/wd-action-sheet/index.scss b/uni_modules/wot-design-uni/components/wd-action-sheet/index.scss new file mode 100644 index 0000000..ec06fe8 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-action-sheet/index.scss @@ -0,0 +1,194 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(action-sheet) { + 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; + } + } +} + +:deep(.wd-action-sheet__popup){ + border-radius: $-action-sheet-radius $-action-sheet-radius 0 0; +} + +@include b(action-sheet) { + background-color: $-color-white; + padding-bottom: 1px; + + @include edeep(popup) { + border-radius: $-action-sheet-radius $-action-sheet-radius 0 0; + } + + @include e(actions) { + padding: 8px 0; + max-height: 50vh; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + } + + @include e(action) { + position: relative; + display: block; + width: 100%; + height: $-action-sheet-action-height; + line-height: $-action-sheet-action-height; + color: $-action-sheet-color; + font-size: $-action-sheet-fs; + text-align: center; + border: none; + background: $-action-sheet-bg; + outline: none; + + &:after { + display: none; + } + + &:active { + background: $-action-sheet-active-color; + } + + @include m(disabled) { + color: $-action-sheet-disabled-color; + } + + @include m(loading) { + display: flex; + align-items: center; + justify-content: center; + line-height: initial; + } + } + + @include e(name) { + display: inline-block; + } + + @include e(subname) { + display: inline-block; + margin-left: 4px; + font-size: $-action-sheet-subname-fs; + color: $-action-sheet-subname-color; + } + + @include e(cancel) { + display: block; + width: calc(100% - 48px); + line-height: $-action-sheet-cancel-height; + padding: 0; + color: $-action-sheet-cancel-color; + font-size: $-action-sheet-fs; + text-align: center; + border-radius: $-action-sheet-cancel-radius; + border: none; + background: $-action-sheet-cancel-bg; + outline: none; + margin: 0 auto 24px; + font-weight: $-action-sheet-weight; + + &:active { + background: $-action-sheet-active-color; + } + + &:after { + display: none; + } + } + + @include e(header) { + color: $-action-sheet-color; + position: relative; + height: $-action-sheet-title-height; + line-height: $-action-sheet-title-height; + text-align: center; + font-size: $-action-sheet-title-fs; + font-weight: $-action-sheet-weight; + } + + @include edeep(close) { + position: absolute; + top: $-action-sheet-close-top; + right: $-action-sheet-close-right; + color: $-action-sheet-close-color; + font-size: $-action-sheet-close-fs; + transform: rotate(-45deg); + line-height: 1.1; + } + + @include e(panels) { + height: 84px; + overflow-y: hidden; + + &:first-of-type { + margin-top: 20px; + } + + &:last-of-type { + margin-bottom: 12px; + } + } + + @include e(panels-content) { + display: flex; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + + @include e(panel) { + width: 88px; + flex: 0 0 auto; + display: inline-block; + padding: $-action-sheet-panel-padding; + } + + @include e(panel-img) { + display: block; + width: $-action-sheet-panel-img-fs; + height: $-action-sheet-panel-img-fs; + margin: 0 auto; + margin-bottom: 7px; + border-radius: $-action-sheet-panel-img-radius; + } + + @include e(panel-title) { + font-size: $-action-sheet-subname-fs; + line-height: 1.2; + text-align: center; + color: $-action-sheet-color; + @include lineEllipsis; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue b/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue new file mode 100644 index 0000000..8cf3f1b --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue @@ -0,0 +1,197 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-badge/index.scss b/uni_modules/wot-design-uni/components/wd-badge/index.scss new file mode 100644 index 0000000..a098e74 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-badge/index.scss @@ -0,0 +1,60 @@ +@import './../common/abstracts/_mixin.scss'; +@import './../common/abstracts/variable.scss'; + +.wot-theme-dark { + @include b(badge) { + @include e(content) { + border-color: $-dark-background2; + } + } +} + + +@include b(badge) { + position: relative; + vertical-align: middle; + display: inline-block; + + @include e(content) { + display: inline-block; + height: $-badge-height; + line-height: $-badge-height; + padding: $-badge-padding; + background-color: $-badge-bg; + border-radius: calc($-badge-height / 2 + 2px); + color: $-badge-color; + font-size: $-badge-fs; + text-align: center; + white-space: nowrap; + border: $-badge-border; + font-weight: 500; + + @include when(fixed) { + position: absolute; + transform: translateY(-50%) translateX(50%); + } + + @include when(dot) { + height: $-badge-dot-size; + width: $-badge-dot-size; + padding: 0; + border-radius: 50%; + } + + @each $type in (primary, success, warning, info, danger) { + @include m($type) { + @if $type == primary { + background-color: $-badge-primary; + } @else if $type == success { + background-color: $-badge-success; + } @else if $type == warning { + background-color: $-badge-warning; + } @else if $type == info { + background-color: $-badge-info; + } @else { + background-color: $-badge-danger; + } + } + } + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue b/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue new file mode 100644 index 0000000..a0a2896 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue @@ -0,0 +1,93 @@ + + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-button/index.scss b/uni_modules/wot-design-uni/components/wd-button/index.scss new file mode 100644 index 0000000..975084f --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-button/index.scss @@ -0,0 +1,521 @@ +@import './../common/abstracts/_mixin.scss'; +@import './../common/abstracts/variable.scss'; + +@mixin button-type-style($color, $normal, $active, $disabled, $disabledcolor) { + background: $normal; + color: $color; + font-weight: $-fw-medium; + + &::after { + border-color: $normal; + } + &.wd-button--active { + background: $active; + } + @include when(disabled) { + &.wd-button--active { + background: $disabled; + color: $disabledcolor; + } + + background: $disabled; + color: $disabledcolor; + + &::after { + border-color: $disabled; + } + } + @include when(loading) { + &, + &.wd-button--active { + color: $color; + background: $normal; + } + &::after { + border-color: $normal; + } + } + @include when(suck) { + border-radius: 0; + } +} + +@mixin button-plain-style($color, $normal, $active, $disabled) { + color: $color; + background: transparent; + + &::after { + border-color: $normal; + } + &.wd-button--active { + color: $active; + background: transparent; + + &::after { + border-color: $active; + } + } + @include when(disabled) { + color: $disabled; + background: transparent; + + &::after { + border-color: $disabled; + } + &.wd-button--active { + background: transparent; + + &::after { + border-color: $disabled; + } + } + } + @include when(loading) { + &, + &.wd-button--active { + color: $color; + background: transparent; + + &::after { + border-color: $normal; + } + } + } +} + +.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) { + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; + outline: none; + -webkit-appearance: none; + outline: none; + background: transparent; + box-sizing: border-box; + border: none; + color: $-button-normal-color; + transition: all 0.2s; + user-select: none; + font-weight: normal; + + &::after { + display: none; + } + &.wd-button--active { + color: $-button-normal-active-color; + background: $-button-normal-active-bg; + + &::after { + border-color: $-button-normal-border-active-color; + } + } + @include when(disabled) { + color: $-button-normal-disabled-color; + background: $-button-normal-disabled-bg; + + &::after { + border-color: $-button-normal-border-disabled-color; + } + &.wd-button--active { + color: $-button-normal-disabled-color; + background: $-button-normal-disabled-bg; + + &::after { + border-color: $-button-normal-border-disabled-color; + } + } + } + + @include e(loading) { + margin-right: 5px; + animation: wd-rotate 0.8s linear infinite; + animation-duration: 2s; + } + @include e(loading-svg) { + width: 100%; + height: 100%; + background-size: cover; + background-repeat: no-repeat; + } + @include when(loading) { + &.wd-button--active { + color: $-button-normal-color; + background: transparent; + + &::after { + border-color: $-button-border-color; + } + } + } + + @include when(primary) { + @include button-type-style( + $-color-white, + $-button-primary-bg-color, + $-button-primary-active-color, + $-button-primary-disabled-color, + $-color-white + ); + } + @include when(success) { + @include button-type-style($-color-white, $-button-success-color, $-button-success-active-color, $-button-success-disabled-color, $-color-white); + } + @include when(info) { + @include button-type-style( + $-button-info-color, + $-button-info-bg-color, + $-button-info-active-bg-color, + $-button-info-disabled-bg-color, + $-button-info-disabled-color + ); + } + @include when(warning) { + @include button-type-style($-color-white, $-button-warning-color, $-button-warning-active-color, $-button-warning-disabled-color, $-color-white); + } + @include when(error) { + @include button-type-style($-color-white, $-button-error-color, $-button-error-active-color, $-button-error-disabled-color, $-color-white); + } + + @include when(small) { + height: $-button-small-height; + padding: $-button-small-padding; + border-radius: $-button-small-radius; + font-size: $-button-small-fs; + font-weight: normal; + + @include when(round) { + border-radius: calc($-button-small-height / 2); + + &::after { + border-radius: $-button-small-height; + } + } + + .wd-button__loading { + width: $-button-small-loading; + height: $-button-small-loading; + } + } + + @include when(medium) { + height: $-button-medium-height; + padding: $-button-medium-padding; + border-radius: $-button-medium-radius; + font-size: $-button-medium-fs; + + &::after { + border-radius: calc($-button-medium-radius * 2); + } + @include when(primary) { + box-shadow: $-button-medium-box-shadow-size $-button-primary-box-shadow-color; + } + + @include when(success) { + box-shadow: $-button-medium-box-shadow-size $-button-success-box-shadow-color; + } + + @include when(warning) { + box-shadow: $-button-medium-box-shadow-size $-button-warning-box-shadow-color; + } + + @include when(error) { + box-shadow: $-button-medium-box-shadow-size $-button-error-box-shadow-color; + } + + @include when(plain) { + box-shadow: none; + } + + @include when(round) { + min-width: 118px; + border-radius: calc($-button-medium-height / 2); + + &::after { + border-radius: $-button-medium-height; + } + @include when(icon) { + min-width: 0; + border-radius: 50%; + } + + @include when(text) { + min-width: 0; + border-radius: 0; + } + } + + .wd-button__loading { + width: $-button-medium-loading; + height: $-button-medium-loading; + } + } + @include when(large) { + height: $-button-large-height; + padding: $-button-large-padding; + border-radius: $-button-large-radius; + font-size: $-button-large-fs; + + &::after { + border-radius: calc($-button-large-radius * 2); + } + &:not(.is-plain) { + @include when(primary) { + box-shadow: $-button-large-box-shadow-size $-button-primary-box-shadow-color; + } + + @include when(success) { + box-shadow: $-button-large-box-shadow-size $-button-success-box-shadow-color; + } + + @include when(warning) { + box-shadow: $-button-large-box-shadow-size $-button-warning-box-shadow-color; + } + + @include when(error) { + box-shadow: $-button-large-box-shadow-size $-button-error-box-shadow-color; + } + } + + @include when(round) { + border-radius: calc($-button-large-height / 2); + + &::after { + border-radius: $-button-large-height; + } + @include when(icon) { + border-radius: 50%; + } + @include when(text) { + border-radius: 0; + } + } + .wd-button__loading { + width: $-button-large-loading; + height: $-button-large-loading; + } + } + + @include when(text) { + color: $-button-primary-color; + padding: 4px 0; + + &::after { + display: none; + } + &.wd-button--active { + color: $-button-primary-active-color; + background: transparent; + } + @include when(disabled) { + color: $-button-normal-disabled-color; + background: transparent; + } + } + + @include when(plain) { + background: $-color-white; + + &::after { + position: absolute; + display: block; + content: ''; + width: 200%; + height: 200%; + left: 0; + top: 0; + border: 1px solid $-button-border-color; + box-sizing: border-box; + transform: scale(0.5); + transform-origin: left top; + } + @include when(primary) { + @include button-plain-style($-button-primary-color, $-button-primary-color, $-button-primary-active-color, $-button-primary-disabled-color); + &.wd-button--active { + background-color: $-button-primary-plain-active-bg-color; + } + @include when(disabled) { + &.wd-button--active { + background-color: $-button-primary-plain-active-bg-color; + } + opacity: 1; + background-color: $-button-primary-plain-active-bg-color; + color: $-button-primary-plain-disabled-color; + } + } + @include when(success) { + @include button-plain-style($-button-success-color, $-button-success-color, $-button-success-active-color, $-button-success-disabled-color); + } + @include when(info) { + @include button-plain-style($-button-info-plain-normal-color, $-button-info-bg-color, $-button-info-active-color, $-button-info-disabled-color); + &::after { + border-color: $-button-info-plain-border-color; + } + &.wd-button--active { + background-color: $-button-info-plain-active-bg-color; + + &::after { + border-color: $-button-info-plain-active-color; + } + } + @include when(disabled) { + &, + &.wd-button--active { + background-color: $-button-info-plain-disabled-bg-color; + + &::after { + border-color: $-button-info-plain-disabled-bg-color; + } + } + } + @include when(loading) { + &::after, + &.wd-button--active::after { + border-color: $-button-info-plain-border-color; + } + } + } + @include when(warning) { + @include button-plain-style($-button-warning-color, $-button-warning-color, $-button-warning-active-color, $-button-warning-disabled-color); + } + @include when(error) { + @include button-plain-style($-button-error-color, $-button-error-color, $-button-error-active-color, $-button-error-disabled-color); + } + @include when(suck) { + &.wd-button--active { + background: $-button-suck-active-color; + } + @include when(disabled) { + background: $-color-white; + } + } + } + + @include when(suck) { + display: flex; + font-size: $-button-large-fs; + height: $-button-suck-height; + border-radius: 0; + + &::after { + display: none; + } + } + + @include when(block) { + display: flex; + } + + @include when(icon) { + width: $-button-icon-size; + height: $-button-icon-size; + padding: 0; + border-radius: 50%; + font-size: 0; + color: $-button-icon-color; + + &::after { + display: none; + } + &.wd-button--active { + background: $-button-icon-active-color; + } + :deep(.wd-button__icon){ + margin-right: 0; + } + @include when(disabled) { + color: $-button-icon-disabled-color; + background: transparent; + + &.wd-button--active { + background: transparent; + } + } + } + + @include edeep(icon) { + display: block; + margin-right: 6px; + font-size: $-button-icon-fs; + vertical-align: middle; + } + + @include e(text) { + user-select: none; + white-space: nowrap; + } +} +// 微信2.8.0以上版本加了较高层级的默认样式,需要重置掉 +.wd-button { + min-height: auto; + width: auto; +} +@keyframes wd-rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-button/wd-button.vue b/uni_modules/wot-design-uni/components/wd-button/wd-button.vue new file mode 100644 index 0000000..bab8eee --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-button/wd-button.vue @@ -0,0 +1,190 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-calendar-view/index.scss b/uni_modules/wot-design-uni/components/wd-calendar-view/index.scss new file mode 100644 index 0000000..abec32d --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-calendar-view/index.scss @@ -0,0 +1,9 @@ +/* + * @Author: weisheng + * @Date: 2023-06-12 10:04:19 + * @LastEditTime: 2023-07-15 16:16:34 + * @LastEditors: weisheng + * @Description: + * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-calendar-view\index.scss + * 记得注释 + */ diff --git a/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss b/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss new file mode 100644 index 0000000..3ed3d98 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss @@ -0,0 +1,151 @@ +@import '../../common/abstracts/variable'; +@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 e(title) { + display: flex; + align-items: center; + justify-content: center; + height: 45px; + font-size: $-calendar-panel-title-fs; + color: $-calendar-panel-title-color; + } + + @include e(days) { + display: flex; + flex-wrap: wrap; + font-size: $-calendar-day-fs; + color: $-calendar-day-color; + } + + @include e(day) { + position: relative; + width: 14.285%; + height: $-calendar-day-height; + line-height: $-calendar-day-height; + text-align: center; + + @include when(disabled) { + .wd-month__day-text { + color: $-calendar-disabled-color; + } + } + + @include when(current) { + color: $-calendar-active-color; + } + + @include when(selected) { + .wd-month__day-container { + border-radius: $-calendar-active-border; + background: $-calendar-active-color; + color: #fff; + } + } + + @include when(middle) { + .wd-month__day-container { + background: $-calendar-range-color; + } + } + + @include when(start) { + &::after { + position: absolute; + content: ''; + height: $-calendar-day-height; + top: 0; + right: 0; + left: 50%; + background: $-calendar-range-color; + z-index: 1; + } + + &.is-without-end::after { + display: none; + } + + .wd-month__day-container { + background: $-calendar-active-color; + color: #fff; + border-radius: $-calendar-active-border; + } + } + + @include when(end) { + &::after { + position: absolute; + content: ''; + height: $-calendar-day-height; + top: 0; + left: 0; + right: 50%; + background: $-calendar-range-color; + z-index: 1; + } + + .wd-month__day-container { + background: $-calendar-active-color; + color: #fff; + border-radius: $-calendar-active-border; + } + } + + @include when(same) { + .wd-month__day-container { + background: $-calendar-active-color; + color: #fff; + border-radius: $-calendar-active-border; + } + } + } + + @include e(day-container) { + position: relative; + z-index: 2; + } + + @include e(day-text) { + font-weight: $-calendar-day-fw; + } + + @include e(day-top) { + position: absolute; + top: 10px; + left: 0; + right: 0; + line-height: 1.1; + font-size: $-calendar-info-fs; + text-align: center; + } + + @include e(day-bottom) { + position: absolute; + bottom: 10px; + left: 0; + right: 0; + line-height: 1.1; + font-size: $-calendar-info-fs; + text-align: center; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue b/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue new file mode 100644 index 0000000..1e9d724 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue @@ -0,0 +1,378 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/index.scss b/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/index.scss new file mode 100644 index 0000000..f8b9fe5 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/index.scss @@ -0,0 +1,89 @@ +@import '../../common/abstracts/variable'; +@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) { + font-size: $-calendar-fs; + + @include e(title) { + padding: 5px 0; + text-align: center; + font-size: $-calendar-panel-title-fs; + color: $-calendar-panel-title-color; + padding: $-calendar-panel-padding; + } + + @include e(weeks) { + display: flex; + height: $-calendar-week-height; + line-height: $-calendar-week-height; + box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02); + color: $-calendar-week-color; + font-size: $-calendar-week-fs; + padding: $-calendar-panel-padding; + } + + @include e(week) { + flex: 1; + text-align: center; + } + + @include e(container) { + padding: $-calendar-panel-padding; + box-sizing: border-box; + } + + @include e(time) { + display: flex; + box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.02); + } + + @include e(time-label) { + position: relative; + flex: 1; + font-size: $-picker-column-fs; + text-align: center; + line-height: 125px; + color: $-picker-column-color; + + &::after { + position: absolute; + content: ''; + height: 35px; + top: 50%; + left: 0; + right: 0; + transform: translateY(-50%); + background: $-picker-column-select-bg; + z-index: 0; + } + } + + @include e(time-text) { + position: relative; + z-index: 1; + } + + @include e(time-picker) { + flex: 3; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue b/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue new file mode 100644 index 0000000..b171f01 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue @@ -0,0 +1,353 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/type.ts b/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/type.ts new file mode 100644 index 0000000..4bcef4f --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/type.ts @@ -0,0 +1,7 @@ +/** + * 月份信息 + */ +export interface MonthInfo { + date: number + height: number +} diff --git a/uni_modules/wot-design-uni/components/wd-calendar-view/utils.ts b/uni_modules/wot-design-uni/components/wd-calendar-view/utils.ts new file mode 100644 index 0000000..5c4e4e0 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-calendar-view/utils.ts @@ -0,0 +1,424 @@ +import { getType, padZero } from '../common/util' + +const weeks: string[] = ['日', '一', '二', '三', '四', '五', '六'] + +/** + * 比较两个时间的日期是否相等 + * @param {timestamp} date1 + * @param {timestamp} date2 + */ +export function compareDate(date1, date2) { + date1 = new Date(date1) + date2 = new Date(date2) + + const year1 = date1.getFullYear() + const year2 = date2.getFullYear() + const month1 = date1.getMonth() + const month2 = date2.getMonth() + const day1 = date1.getDate() + const day2 = date2.getDate() + + if (year1 === year2) { + if (month1 === month2) { + return day1 === day2 ? 0 : day1 > day2 ? 1 : -1 + } + return month1 === month2 ? 0 : month1 > month2 ? 1 : -1 + } + + return year1 > year2 ? 1 : -1 +} + +/** + * 判断是否是范围选择 + * @param {string} type + */ +export function isRange(type) { + return type.indexOf('range') > -1 +} + +/** + * 比较两个日期的月份是否相等 + * @param {timestamp} date1 + * @param {timestamp} date2 + */ +export function compareMonth(date1, date2) { + date1 = new Date(date1) + date2 = new Date(date2) + + const year1 = date1.getFullYear() + const year2 = date2.getFullYear() + const month1 = date1.getMonth() + const month2 = date2.getMonth() + + if (year1 === year2) { + return month1 === month2 ? 0 : month1 > month2 ? 1 : -1 + } + + return year1 > year2 ? 1 : -1 +} + +/** + * 比较两个日期的年份是否一致 + * @param {timestamp} date1 + * @param {timestamp} date2 + */ +export function compareYear(date1, date2) { + date1 = new Date(date1) + date2 = new Date(date2) + + const year1 = date1.getFullYear() + const year2 = date2.getFullYear() + + return year1 === year2 ? 0 : year1 > year2 ? 1 : -1 +} + +/** + * 获取一个月的最后一天 + * @param {number} year + * @param {number} month + */ +export function getMonthEndDay(year, month) { + return 32 - new Date(year, month - 1, 32).getDate() +} + +/** + * 格式化年月 + * @param {timestamp} date + */ +export function formatMonthTitle(date) { + date = new Date(date) + + const year = date.getFullYear() + const month = date.getMonth() + 1 + + return year + '年' + month + '月' +} + +/** + * 根据下标获取星期 + * @param {number} index + */ +export function getWeekLabel(index) { + if (index >= 7) { + index = index % 7 + } + + return weeks[index] +} + +/** + * 获取一个月第一天的样式 + * @param {number} index + * @param {timestamp} date + * @param {number} firstDayOfWeek + */ +export function getFirstDayStyle(index: number, date: number, firstDayOfWeek: number) { + if (firstDayOfWeek >= 7) { + firstDayOfWeek = firstDayOfWeek % 7 + } + + if (index !== 0) return '' + + const offset = (7 + new Date(date).getDay() - firstDayOfWeek) % 7 + + return 'margin-left: ' + (100 / 7) * offset + '%' +} + +/** + * 格式化年份 + * @param {timestamp} date + */ +export function formatYearTitle(date: number) { + const year = new Date(date).getFullYear() + + return year + '年' +} + +/** + * 根据最小日期和最大日期获取这之间总共有几个月份 + * @param {timestamp} minDate + * @param {timestamp} maxDate + */ +export function getMonths(minDate, maxDate) { + const months: number[] = [] + const month = new Date(minDate) + month.setDate(1) + + while (compareMonth(month, maxDate) < 1) { + months.push(month.getTime()) + month.setMonth(month.getMonth() + 1) + } + + return months +} + +/** + * 根据最小日期和最大日期获取这之间总共有几年 + * @param {timestamp} minDate + * @param {timestamp} maxDate + */ +export function getYears(minDate: number, maxDate: number) { + const years: number[] = [] + const year = new Date(minDate) + year.setMonth(0) + year.setDate(1) + + while (compareYear(year, maxDate) < 1) { + years.push(year.getTime()) + year.setFullYear(year.getFullYear() + 1) + } + + return years +} + +/** + * 获取一个日期所在周的第一天和最后一天 + * @param {timestamp} date + */ +export function getWeekRange(date, firstDayOfWeek) { + if (firstDayOfWeek >= 7) { + firstDayOfWeek = firstDayOfWeek % 7 + } + + date = new Date(date) + date.setHours(0, 0, 0, 0) + const year = date.getFullYear() + const month = date.getMonth() + const day = date.getDate() + const week = date.getDay() + + const weekStart = new Date(year, month, day - ((7 + week - firstDayOfWeek) % 7)) + const weekEnd = new Date(year, month, day + 6 - ((7 + week - firstDayOfWeek) % 7)) + + return [weekStart.getTime(), weekEnd.getTime()] +} + +/** + * 获取日期偏移量 + * @param {timestamp} date1 + * @param {timestamp} date2 + */ +export function getDayOffset(date1, date2) { + return (date1 - date2) / (24 * 60 * 60 * 1000) + 1 +} + +/** + * 获取偏移日期 + * @param {timestamp} date + * @param {number} offset + */ +export function getDayByOffset(date, offset) { + date = new Date(date) + date.setDate(date.getDate() + offset) + + return date.getTime() +} + +/** + * 获取月份偏移量 + * @param {timestamp} date1 + * @param {timestamp} date2 + */ +export function getMonthOffset(date1, date2) { + date1 = new Date(date1) + date2 = new Date(date2) + + const year1 = date1.getFullYear() + const year2 = date2.getFullYear() + let month1 = date1.getMonth() + const month2 = date2.getMonth() + + month1 = (year1 - year2) * 12 + month1 + + return month1 - month2 + 1 +} + +/** + * 获取偏移月份 + * @param {timestamp} date + * @param {number} offset + */ +export function getMonthByOffset(date, offset) { + date = new Date(date) + date.setMonth(date.getMonth() + offset) + + return date.getTime() +} + +/** + * 获取默认时间,格式化为数组 + * @param {array|string|null} defaultTime + */ +export function getDefaultTime(defaultTime) { + if (getType(defaultTime) === 'array') { + const startTime = (defaultTime[0] || '00:00:00').split(':').map((item) => { + return parseInt(item) + }) + const endTime = (defaultTime[1] || '00:00:00').split(':').map((item) => { + return parseInt(item) + }) + return [startTime, endTime] + } else { + const time = (defaultTime || '00:00:00').split(':').map((item) => { + return parseInt(item) + }) + + return [time, time] + } +} + +/** + * 根据默认时间获取日期 + * @param {timestamp} date + * @param {array} defaultTime + */ +export function getDateByDefaultTime(date, defaultTime) { + date = new Date(date) + date.setHours(defaultTime[0]) + date.setMinutes(defaultTime[1]) + date.setSeconds(defaultTime[2]) + + return date.getTime() +} + +/** + * 获取经过 iteratee 格式化后的长度为 n 的数组 + * @param {number} n + * @param {function} iteratee + */ +const times = (n, iteratee) => { + let index = -1 + const result = Array(n < 0 ? 0 : n) + while (++index < n) { + result[index] = iteratee(index) + } + return result +} + +/** + * 获取时分秒 + * @param {timestamp}} date + */ +const getTime = (date) => { + date = new Date(date) + return [date.getHours(), date.getMinutes(), date.getSeconds()] +} + +/** + * 根据最小最大日期获取时间数据,用于填入picker + * @param {*} param0 + */ +export function getTimeData({ date, minDate, maxDate, isHideSecond, filter } = {} as any) { + const compareMin = compareDate(date, minDate) + const compareMax = compareDate(date, maxDate) + + let minHour = 0 + let maxHour = 23 + let minMinute = 0 + let maxMinute = 59 + let minSecond = 0 + let maxSecond = 59 + + if (compareMin === 0) { + const minTime = getTime(minDate) + const currentTime = getTime(date) + + minHour = minTime[0] + if (minTime[0] === currentTime[0]) { + minMinute = minTime[1] + + if (minTime[1] === currentTime[1]) { + minSecond = minTime[2] + } + } + } + + if (compareMax === 0) { + const maxTime = getTime(maxDate) + const currentTime = getTime(date) + + maxHour = maxTime[0] + if (maxTime[0] === currentTime[0]) { + maxMinute = maxTime[1] + + if (maxTime[1] === currentTime[1]) { + maxSecond = maxTime[2] + } + } + } + + let columns: any[] = [] + let hours = times(24, (index) => { + return { + label: `${padZero(index)}时`, + value: index, + disabled: index < minHour || index > maxHour + } + }) + let minutes = times(60, (index) => { + return { + label: `${padZero(index)}分`, + value: index, + disabled: index < minMinute || index > maxMinute + } + }) + let seconds + if (filter && getType(filter) === 'function') { + hours = filter({ + type: 'hour', + values: hours + }) + minutes = filter({ + type: 'minute', + values: minutes + }) + } + + if (!isHideSecond) { + seconds = times(60, (index) => { + return { + label: `${padZero(index)}秒`, + value: index, + disabled: index < minSecond || index > maxSecond + } + }) + if (filter && getType(filter) === 'function') { + seconds = filter({ + type: 'second', + values: seconds + }) + } + } + + columns = isHideSecond ? [hours, minutes] : [hours, minutes, seconds] + + return columns +} + +/** + * 获取当前是第几周 + * @param {timestamp} date + */ +export function getWeekNumber(date) { + date = new Date(date) + date.setHours(0, 0, 0, 0) + // Thursday in current week decides the year. + date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7)) + // January 4 is always in week 1. + const week = new Date(date.getFullYear(), 0, 4) + // Adjust to Thursday in week 1 and count number of weeks from date to week 1. + // Rounding should be fine for Daylight Saving Time. Its shift should never be more than 12 hours. + return 1 + Math.round(((date.getTime() - week.getTime()) / 86400000 - 3 + ((week.getDay() + 6) % 7)) / 7) +} + +export function getItemClass(monthType, value, type) { + const classList = ['is-' + monthType] + + if (type.indexOf('range') > -1) { + if (!value || !value[1]) { + classList.push('is-without-end') + } + } + + return classList.join(' ') +} diff --git a/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue b/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue new file mode 100644 index 0000000..c0b036f --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue @@ -0,0 +1,155 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-calendar-view/year/index.scss b/uni_modules/wot-design-uni/components/wd-calendar-view/year/index.scss new file mode 100644 index 0000000..81b83f0 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-calendar-view/year/index.scss @@ -0,0 +1,149 @@ +@import '../../common/abstracts/variable'; +@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 e(title) { + display: flex; + align-items: center; + justify-content: center; + height: 45px; + font-size: $-calendar-panel-title-fs; + color: $-calendar-panel-title-color; + } + + @include e(months) { + display: flex; + flex-wrap: wrap; + font-size: $-calendar-day-fs; + color: $-calendar-day-color; + } + + @include e(month) { + position: relative; + width: 25%; + height: $-calendar-day-height; + line-height: $-calendar-day-height; + text-align: center; + + @include when(disabled) { + .wd-year__month-text { + color: $-calendar-disabled-color; + } + } + + @include when(current) { + color: $-calendar-active-color; + } + + @include when(selected) { + color: #fff; + + .wd-year__month-text { + border-radius: $-calendar-active-border; + background: $-calendar-active-color; + } + } + + @include when(middle) { + background: $-calendar-range-color; + } + + @include when(start) { + color: #fff; + + &::after { + position: absolute; + top: 0; + right: 0; + left: 50%; + bottom: 0; + content: ''; + background: $-calendar-range-color; + } + + .wd-year__month-text { + background: $-calendar-active-color; + border-radius: $-calendar-active-border; + } + + &.is-without-end::after { + display: none; + } + } + + @include when(end) { + color: #fff; + + &::after { + position: absolute; + top: 0; + left: 0; + right: 50%; + bottom: 0; + content: ''; + background: $-calendar-range-color; + } + + .wd-year__month-text { + background: $-calendar-active-color; + border-radius: $-calendar-active-border; + } + } + + @include when(same) { + color: #fff; + + .wd-year__month-text { + background: $-calendar-active-color; + border-radius: $-calendar-active-border; + } + } + } + + @include e(month-text) { + width: $-calendar-month-width; + margin: 0 auto; + text-align: center; + } + + @include e(month-top) { + position: absolute; + top: 10px; + left: 0; + right: 0; + line-height: 1.1; + font-size: $-calendar-info-fs; + text-align: center; + } + + @include e(month-bottom) { + position: absolute; + bottom: 10px; + left: 0; + right: 0; + line-height: 1.1; + font-size: $-calendar-info-fs; + text-align: center; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue b/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue new file mode 100644 index 0000000..316e3e8 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue @@ -0,0 +1,204 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/index.scss b/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/index.scss new file mode 100644 index 0000000..920778a --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/index.scss @@ -0,0 +1,24 @@ +@import '../../common/abstracts/variable'; +@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) { + font-size: $-calendar-fs; + padding: $-calendar-panel-padding; + + @include e(title) { + padding: 5px 0; + text-align: center; + font-size: $-calendar-panel-title-fs; + color: $-calendar-panel-title-color; + box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02); + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/type.ts b/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/type.ts new file mode 100644 index 0000000..c41e3ec --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/type.ts @@ -0,0 +1,7 @@ +/** + * 月份信息 + */ +export interface YearInfo { + date: number + height: number +} diff --git a/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue b/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue new file mode 100644 index 0000000..17f1c01 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue @@ -0,0 +1,166 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-calendar/index.scss b/uni_modules/wot-design-uni/components/wd-calendar/index.scss new file mode 100644 index 0000000..4c1ab10 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-calendar/index.scss @@ -0,0 +1,241 @@ +@import '../common/abstracts/variable'; +@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 when(border) { + .wd-calendar__cell { + @include halfPixelBorder('top', $-cell-padding); + } + } + + @include e(cell) { + position: relative; + display: flex; + padding: $-cell-wrapper-padding $-cell-padding; + align-items: flex-start; + background-color: $-color-white; + text-decoration: none; + color: $-cell-title-color; + font-size: $-cell-title-fs; + overflow: hidden; + line-height: $-cell-line-height; + } + + @include e(cell) { + @include when(disabled) { + .wd-calendar__value { + color: $-input-disabled-color; + } + } + + @include when(align-right) { + .wd-calendar__value { + text-align: right; + } + } + + @include when(error) { + .wd-calendar__value { + color: $-input-error-color; + } + + :deep(.wd-calendar__arrow) { + color: $-input-error-color; + } + } + + @include when(large) { + font-size: $-cell-title-fs-large; + + :deep(.wd-calendar__arrow) { + font-size: $-cell-icon-size-large; + } + } + + @include when(center) { + align-items: center; + + :deep(.wd-calendar__arrow) { + margin-top: 0; + } + } + } + + @include e(error-message){ + color: $-form-item-error-message-color; + font-size: $-form-item-error-message-font-size; + line-height: $-form-item-error-message-line-height; + text-align: left; + vertical-align: middle; + } + + @include e(label) { + position: relative; + width: $-input-cell-label-width; + margin-right: $-cell-padding; + color: $-cell-title-color; + box-sizing: border-box; + + @include when(required) { + padding-left: 12px; + + &::after { + position: absolute; + left: 0; + top: 2px; + content: '*'; + font-size: $-cell-required-size; + line-height: 1.1; + color: $-cell-required-color; + } + } + } + + @include e(value-wraper) { + display: flex; + } + + @include e(value) { + flex: 1; + margin-right: 10px; + color: $-cell-value-color; + + @include when(ellipsis) { + @include lineEllipsis; + } + + @include m(placeholder) { + color: $-input-placeholder-color; + } + } + + @include e(body) { + flex: 1; + } + + @include edeep(arrow) { + display: block; + font-size: $-cell-icon-size; + color: $-cell-arrow-color; + line-height: $-cell-line-height; + } + + @include e(header) { + position: relative; + overflow: hidden; + } + + @include e(title) { + color: $-action-sheet-color; + height: $-action-sheet-title-height; + line-height: $-action-sheet-title-height; + text-align: center; + font-size: $-action-sheet-title-fs; + font-weight: $-action-sheet-weight; + } + + @include edeep(close) { + position: absolute; + top: $-action-sheet-close-top; + right: $-action-sheet-close-right; + color: $-action-sheet-close-color; + font-size: $-action-sheet-close-fs; + transform: rotate(-45deg); + line-height: 1.1; + } + + @include e(tabs) { + width: 222px; + margin: 10px auto 12px; + } + + @include e(shortcuts) { + padding: 20px 0; + text-align: center; + } + + @include edeep(tag) { + margin-right: 8px; + } + + @include e(view) { + @include when(show-confirm) { + height: 394px; + + @include when(range) { + height: 384px; + } + } + } + + @include e(range-label) { + display: flex; + justify-content: center; + align-items: center; + font-size: 14px; + + @include when(monthrange) { + padding-bottom: 10px; + box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02); + } + } + + @include e(range-label-item) { + flex: 1; + color: rgba(0, 0, 0, 0.85); + + @include when(placeholder) { + color: rgba(0, 0, 0, 0.25); + } + } + + @include e(range-sperator) { + margin: 0 24px; + color: rgba(0, 0, 0, 0.25); + } + + @include e(confirm) { + padding: 12px 25px 14px; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue b/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue new file mode 100644 index 0000000..c3414f1 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue @@ -0,0 +1,503 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-card/index.scss b/uni_modules/wot-design-uni/components/wd-card/index.scss new file mode 100644 index 0000000..ee6562c --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-card/index.scss @@ -0,0 +1,71 @@ +@import "../common/abstracts/variable.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) { + padding: $-card-padding; + background-color: $-card-bg; + line-height: $-card-line-height; + margin: $-card-margin; + border-radius: $-card-radius; + box-shadow: $-card-shadow-color; + font-size: $-card-fs; + margin-bottom: 12px; + + @include when(rectangle) { + margin-left: 0; + margin-right: 0; + border-radius: 0; + box-shadow: none; + + .wd-card__title-content { + font-size: $-card-fs; + } + .wd-card__content { + position: relative; + padding: $-card-rectangle-content-padding; + + @include halfPixelBorder('top', 0, $-card-content-border-color); + } + .wd-card__footer { + position: relative; + padding: $-card-rectangle-footer-padding; + + @include halfPixelBorder('top', 0, $-card-content-border-color); + } + } + @include e(title-content) { + padding: 16px 0; + color: $-card-title-color; + font-size: $-card-title-fs; + } + @include e(content) { + color: $-card-content-color; + line-height: $-card-content-line-height; + } + @include e(footer) { + padding: $-card-footer-padding; + text-align: right; + } +} diff --git a/uni_modules/wot-design-uni/components/wd-card/wd-card.vue b/uni_modules/wot-design-uni/components/wd-card/wd-card.vue new file mode 100644 index 0000000..16b33c1 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-card/wd-card.vue @@ -0,0 +1,50 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-cell-group/index.scss b/uni_modules/wot-design-uni/components/wd-cell-group/index.scss new file mode 100644 index 0000000..983f8ff --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-cell-group/index.scss @@ -0,0 +1,56 @@ +@import '../common/abstracts/variable.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) { + background-color: $-color-white; + + @include when(border) { + .wd-cell-group__title { + @include halfPixelBorder; + } + } + @include e(title) { + position: relative; + display: flex; + justify-content: space-between; + padding: $-cell-group-padding; + background: $-color-white; + font-size: $-cell-group-title-fs; + color: $-cell-group-title-color; + font-weight: $-fw-medium; + line-height: 1.43; + } + @include e(right) { + color: $-cell-group-value-color; + font-size: $-cell-group-value-fs; + } + @include e(body) { + background: $-color-white; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-cell-group/wd-cell-group.vue b/uni_modules/wot-design-uni/components/wd-cell-group/wd-cell-group.vue new file mode 100644 index 0000000..1658b57 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-cell-group/wd-cell-group.vue @@ -0,0 +1,56 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-cell/index.scss b/uni_modules/wot-design-uni/components/wd-cell/index.scss new file mode 100644 index 0000000..b155287 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-cell/index.scss @@ -0,0 +1,188 @@ +@import '../common/abstracts/variable.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) { + position: relative; + padding-left: $-cell-padding; + background-color: $-color-white; + text-decoration: none; + color: $-cell-title-color; + line-height: $-cell-line-height; + -webkit-tap-highlight-color: transparent; + + @include when(border) { + .wd-cell__wrapper { + @include halfPixelBorder('top'); + } + } + + @include e(wrapper) { + position: relative; + display: flex; + padding: $-cell-wrapper-padding $-cell-padding $-cell-wrapper-padding 0; + justify-content: space-between; + align-items: flex-start; + + @include when(vertical) { + display: block; + + .wd-cell__right { + margin-top: $-cell-vertical-top; + } + + .wd-cell__value { + text-align: left; + } + + .wd-cell__left { + margin-right: 0; + } + } + + @include when(label) { + padding: $-cell-wrapper-padding-with-label $-cell-padding $-cell-wrapper-padding-with-label 0; + } + } + + @include e(left) { + position: relative; + flex: 1; + display: flex; + font-size: $-cell-title-fs; + box-sizing: border-box; + margin-right: $-cell-padding; + + @include when(required) { + padding-left: 12px; + + &::after { + position: absolute; + content: '*'; + top: 0; + left: 0; + font-size: $-cell-required-size; + color: $-cell-required-color; + } + } + } + + @include e(right) { + position: relative; + flex: 1; + } + + @include e(title) { + flex: 1; + width: 100%; + font-size: $-cell-title-fs; + } + + @include e(label) { + margin-top: 2px; + font-size: $-cell-label-fs; + color: $-cell-label-color; + @include lineEllipsis; + } + + @include edeep(icon) { + display: block; + position: relative; + margin-right: $-cell-icon-right; + font-size: $-cell-icon-size; + height: $-cell-line-height; + line-height: $-cell-line-height; + } + + @include e(body){ + display: flex; + } + + @include e(value) { + position: relative; + flex: 1; + font-size: $-cell-value-fs; + color: $-cell-value-color; + text-align: right; + vertical-align: middle; + } + + @include edeep(arrow-right) { + display: block; + margin-left: 8px; + width: $-cell-arrow-size; + font-size: $-cell-arrow-size; + color: $-cell-arrow-color; + height: $-cell-line-height; + line-height: $-cell-line-height; + } + + @include e(error-message){ + color: $-form-item-error-message-color; + font-size: $-form-item-error-message-font-size; + line-height: $-form-item-error-message-line-height; + text-align: left; + vertical-align: middle; + } + + @include when(link) { + -webkit-tap-highlight-color: $-cell-tap-bg; + } + + @include when(hover) { + background-color: $-cell-tap-bg; + } + + @include when(large) { + .wd-cell__title { + font-size: $-cell-title-fs-large; + } + + .wd-cell__wrapper { + padding-top: $-cell-wrapper-padding-large; + padding-bottom: $-cell-wrapper-padding-large; + } + + .wd-cell__label { + font-size: $-cell-label-fs-large; + } + + :deep(.wd-cell__icon) { + font-size: $-cell-icon-size-large; + } + } + + @include when(center) { + .wd-cell__wrapper { + align-items: center; + } + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue b/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue new file mode 100644 index 0000000..e3748f2 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue @@ -0,0 +1,157 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-checkbox-group/index.scss b/uni_modules/wot-design-uni/components/wd-checkbox-group/index.scss new file mode 100644 index 0000000..09d22aa --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-checkbox-group/index.scss @@ -0,0 +1,20 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +.wot-theme-dark { + @include b(checkbox-group) { + background-color: $-dark-background2; + } +} +@include b(checkbox-group) { + background-color: $-checkbox-bg; + + // 上下20px 左右15px 内部间隔12px + @include when(button) { + width: 100%; + padding: 8px 3px 20px 15px; + box-sizing: border-box; + overflow: hidden; + height: auto; + } +} diff --git a/uni_modules/wot-design-uni/components/wd-checkbox-group/wd-checkbox-group.vue b/uni_modules/wot-design-uni/components/wd-checkbox-group/wd-checkbox-group.vue new file mode 100644 index 0000000..ec47fa9 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-checkbox-group/wd-checkbox-group.vue @@ -0,0 +1,187 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-checkbox/index.scss b/uni_modules/wot-design-uni/components/wd-checkbox/index.scss new file mode 100644 index 0000000..53b017f --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-checkbox/index.scss @@ -0,0 +1,292 @@ +@import "./../common/abstracts/_mixin.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) { + display: block; + margin-bottom: $-checkbox-margin; + font-size: 0; + -webkit-tap-highlight-color: transparent; + line-height: 1.2; + + @include when(last-child) { + margin-bottom: 0; + } + + @include e(shape) { + position: relative; + display: inline-block; + width: $-checkbox-size; + height: $-checkbox-size; + border: 2px solid $-checkbox-border-color; + border-radius: 50%; + color: $-checkbox-check-color; + background: $-checkbox-bg; + vertical-align: middle; + transition: background 0.2s; + box-sizing: border-box; + + @include when(square) { + border-radius: $-checkbox-square-radius; + } + } + + @include e(input) { + position: absolute; + width: 0; + height: 0; + margin: 0; + opacity: 0; + } + + @include edeep(btn-check) { + display: inline-block; + font-size: $-checkbox-icon-size; + margin-right: 4px; + height: $-checkbox-icon-size; + width: $-checkbox-icon-size; + vertical-align: middle; + } + + @include e(txt) { + display: inline-block; + vertical-align: middle; + line-height: 20px; + @include lineEllipsis; + } + + @include e(label) { + position: relative; + display: inline-block; + margin-left: $-checkbox-label-margin; + vertical-align: middle; + font-size: $-checkbox-label-fs; + color: $-checkbox-label-color; + } + + @include edeep(check) { + color: $-checkbox-check-color; + font-size: $-checkbox-icon-size; + opacity: 0; + transition: opacity 0.2s; + } + + @include when(checked) { + .wd-checkbox__shape { + color: $-checkbox-checked-color; + background: currentColor; + border-color: currentColor; + } + + :deep(.wd-checkbox__check) { + opacity: 1; + position: absolute; + left: 0; + top: -1px; + transform: translateX(-4.5%); + } + } + + @include when(button) { + display: inline-block; + margin-bottom: 0; + margin-right: $-checkbox-margin; + vertical-align: top; + font-size: $-checkbox-button-font-size; + + @include when(last-child) { + margin-right: 0; + } + + .wd-checkbox__shape { + width: 0; + height: 0; + overflow: hidden; + opacity: 0; + border: none; + } + + .wd-checkbox__label { + display: inline-flex; + flex-direction: row; + justify-content: center; + align-items: center; + min-width: $-checkbox-button-min-width; + height: $-checkbox-button-height; + font-size: $-checkbox-button-font-size; + margin-left: 0; + padding: 5px 15px; + border: 1px solid $-checkbox-button-border; + background-color: $-checkbox-button-bg; + border-radius: $-checkbox-button-radius; + transition: color 0.2s, border 0.2s; + box-sizing: border-box; + } + + @include when(checked) { + .wd-checkbox__label { + color: $-checkbox-checked-color; + background-color: $-checkbox-bg; + border-color: $-checkbox-checked-color; + border-color: currentColor; + } + } + } + + @include when(inline) { + display: inline-block; + margin-bottom: 0; + margin-right: $-checkbox-margin; + + @include when(last-child) { + margin-right: 0; + } + } + + @include when(disabled) { + .wd-checkbox__shape { + border-color: $-checkbox-border-color; + background: $-checkbox-disabled-check-bg; + } + + .wd-checkbox__label { + color: $-checkbox-disabled-label-color; + } + + @include when(checked) { + .wd-checkbox__shape { + color: $-checkbox-disabled-check-color; + } + + .wd-checkbox__label { + color: $-checkbox-disabled-label-color; + } + } + + @include when(button) { + .wd-checkbox__label { + background: $-checkbox-disabled-color; + border-color: $-checkbox-button-border; + color: $-checkbox-disabled-label-color; + } + + @include when(checked) { + .wd-checkbox__label { + border-color: $-checkbox-button-disabled-border; + } + } + } + } + + // 以下内容用于解决父子组件样式隔离的问题 —— START + @include when(cell-box) { + padding: 13px 15px; + margin: 0; + + @include when(large) { + padding: 14px 15px; + } + } + + @include when(button-box) { + display: inline-flex; + width: 33.3333%; + padding: 12px 12px 0 0; + box-sizing: border-box; + + .wd-checkbox__label { + width: 100%; + } + + &:last-child::after { + content: ""; + display: table; + clear: both; + } + } + + @include when(large) { + .wd-checkbox__shape { + width: $-checkbox-large-size; + height: $-checkbox-large-size; + font-size: $-checkbox-large-size; + } + + .wd-checkbox__label { + font-size: $-checkbox-large-label-fs; + } + + :deep(.wd-checkbox__check) { + top: 0; + left: 1px; + } + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-checkbox/wd-checkbox.vue b/uni_modules/wot-design-uni/components/wd-checkbox/wd-checkbox.vue new file mode 100644 index 0000000..efabd6f --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-checkbox/wd-checkbox.vue @@ -0,0 +1,249 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-circle/index.scss b/uni_modules/wot-design-uni/components/wd-circle/index.scss new file mode 100644 index 0000000..dc7d13e --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-circle/index.scss @@ -0,0 +1,18 @@ +@import "../common/abstracts/variable.scss"; +@import "../common/abstracts/_mixin.scss"; + +@include b(circle) { + position: relative; + display: inline-block; + text-align: center; + + @include e(text) { + position: absolute; + z-index: 1; + top: 50%; + left: 0; + width: 100%; + transform: translateY(-50%); + color: $-circle-text-color; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-circle/wd-circle.vue b/uni_modules/wot-design-uni/components/wd-circle/wd-circle.vue new file mode 100644 index 0000000..59b7675 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-circle/wd-circle.vue @@ -0,0 +1,343 @@ + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-col-picker/index.scss b/uni_modules/wot-design-uni/components/wd-col-picker/index.scss new file mode 100644 index 0000000..1b6a5ac --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-col-picker/index.scss @@ -0,0 +1,228 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.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 when(border) { + .wd-col-picker__cell { + @include halfPixelBorder('top', $-cell-padding); + } + } + @include e(cell) { + position: relative; + display: flex; + padding: $-cell-wrapper-padding $-cell-padding; + align-items: flex-start; + background-color: $-color-white; + text-decoration: none; + color: $-cell-title-color; + font-size: $-cell-title-fs; + overflow: hidden; + line-height: $-cell-line-height; + } + @include e(cell) { + @include when(disabled) { + .wd-col-picker__value { + color: $-input-disabled-color; + } + } + @include when(align-right) { + .wd-col-picker__value { + text-align: right; + } + } + @include when(error) { + .wd-col-picker__value { + color: $-input-error-color; + } + :deep(.wd-col-picker__arrow) { + color: $-input-error-color; + } + } + @include when(large) { + font-size: $-cell-title-fs-large; + + :deep(.wd-col-picker__arrow) { + font-size: $-cell-icon-size-large; + } + } + } + @include e(error-message){ + color: $-form-item-error-message-color; + font-size: $-form-item-error-message-font-size; + line-height: $-form-item-error-message-line-height; + text-align: left; + vertical-align: middle; + } + @include e(label) { + position: relative; + width: $-input-cell-label-width; + margin-right: $-cell-padding; + color: $-cell-title-color; + box-sizing: border-box; + + @include when(required) { + padding-left: 12px; + + &::after { + position: absolute; + left: 0; + top: 2px; + content: '*'; + font-size: $-cell-required-size; + line-height: 1.1; + color: $-cell-required-color; + } + } + } + @include e(value-wraper) { + display: flex; + } + @include e(value) { + flex: 1; + margin-right: 10px; + color: $-cell-value-color; + + @include when(ellipsis) { + @include lineEllipsis; + } + @include m(placeholder) { + color: $-input-placeholder-color; + } + } + @include e(body) { + flex: 1; + } + @include edeep(arrow) { + display: block; + font-size: $-cell-icon-size; + color: $-cell-arrow-color; + line-height: $-cell-line-height; + } + @include e(selected) { + height: $-col-picker-selected-height; + font-size: $-col-picker-selected-fs; + color: $-col-picker-selected-color; + overflow: hidden; + } + @include e(selected-container){ + position: relative; + display: flex; + user-select: none; + } + @include e(selected-item) { + flex: 0 0 auto; + height: $-col-picker-selected-height; + line-height: $-col-picker-selected-height; + padding: $-col-picker-selected-padding; + + @include when(selected) { + font-weight: $-col-picker-selected-fw; + } + } + @include e(selected-line) { + position: absolute; + bottom: 5px; + width: $-col-picker-line-width; + left: 0; + height: $-col-picker-line-height; + background: $-col-picker-line-color; + z-index: 1; + border-radius: calc($-col-picker-line-height / 2); + box-shadow: $-col-picker-line-box-shadow; + } + @include e(list-container){ + position: relative; + } + @include e(list) { + height: $-col-picker-list-height; + padding-bottom: $-col-picker-list-padding-bottom; + box-sizing: border-box; + overflow: auto; + color: $-col-picker-list-color; + font-size: $-col-picker-list-fs; + -webkit-overflow-scrolling: touch; + } + @include e(list-item) { + display: flex; + padding: $-col-picker-list-item-padding; + align-items: flex-start; + + @include when(selected) { + color: $-col-picker-list-color-checked; + + :deep(.wd-col-picker__checked) { + opacity: 1; + } + } + @include when(disabled) { + color: $-col-picker-list-color-disabled; + } + } + @include e(list-item-label) { + line-height: 1.285; + } + @include e(list-item-tip) { + margin-top: 2px; + font-size: $-col-picker-list-fs-tip; + color: $-col-picker-list-color-tip; + } + @include edeep(checked) { + display: block; + margin-left: 4px; + font-size: $-col-picker-list-checked-icon-size; + color: $-col-picker-list-color-checked; + opacity: 0; + } + @include e(loading) { + display: flex; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + align-items: center; + justify-content: center; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue b/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue new file mode 100644 index 0000000..2a2bbc8 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue @@ -0,0 +1,551 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-col/index.scss b/uni_modules/wot-design-uni/components/wd-col/index.scss new file mode 100644 index 0000000..160b919 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-col/index.scss @@ -0,0 +1,19 @@ +@import '../common/abstracts/variable'; +@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; +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-col/wd-col.vue b/uni_modules/wot-design-uni/components/wd-col/wd-col.vue new file mode 100644 index 0000000..ea8f0ed --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-col/wd-col.vue @@ -0,0 +1,78 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss b/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss new file mode 100644 index 0000000..542f9a3 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss @@ -0,0 +1,83 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(collapse-item) { + @include halfPixelBorder('top', 0, $-dark-border-color); + + + @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) { + position: relative; + @include halfPixelBorder('top'); + + + @include e(header) { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding: $-collapse-header-padding; + overflow: hidden; + user-select: none; + } + + @include e(title) { + color: $-collapse-title-color; + font-weight: $-fw-medium; + font-size: $-collapse-title-fs; + } + + @include edeep(arrow) { + display: block; + font-size: $-collapse-arrow-size; + color: $-collapse-arrow-color; + transition: transform 0.3s; + + @include when(retract) { + transform: rotate(-180deg); + } + } + + @include e(wrapper) { + position: relative; + transition: height 0.3s ease-in-out; + overflow: hidden; + will-change: height; + } + + @include e(body) { + color: $-collapse-body-color; + font-size: $-collapse-body-fs; + padding: $-collapse-body-padding; + line-height: 1.43; + } + + @include when(disabled) { + .wd-collapse-item__title { + color: $-collapse-disabled-color; + } + .wd-collapse-item__arrow { + color: $-collapse-disabled-color; + } + } +} diff --git a/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue b/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue new file mode 100644 index 0000000..28f3722 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue @@ -0,0 +1,189 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-collapse/index.scss b/uni_modules/wot-design-uni/components/wd-collapse/index.scss new file mode 100644 index 0000000..552dc97 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-collapse/index.scss @@ -0,0 +1,55 @@ +@import "../common/abstracts/variable"; +@import "../common/abstracts/mixin"; + +.wot-theme-dark { + @include b(collapse) { + background: $-dark-background2; + + @include e(content) { + color: $-dark-color3; + } + } +} + +@include b(collapse) { + background: $-color-white; + + @include when(viewmore) { + padding: $-collapse-side-padding; + } + @include e(content) { + font-size: $-collapse-body-fs; + color: $-collapse-body-color; + + @include when(retract) { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + font-size: $-collapse-retract-fs; + } + } + @include e(more) { + display: inline-block; + font-size: $-collapse-retract-fs; + margin-top: 8px; + color: $-collapse-more-color; + user-select: none; + } + @include e(more-txt) { + display: inline-block; + vertical-align: middle; + margin-right: 4px; + } + @include e(arrow) { + display: inline-block; + vertical-align: middle; + transition: transform 0.1s; + font-size: $-collapse-arrow-size; + height: $-collapse-arrow-size; + line-height: $-collapse-arrow-size; + + @include when(retract) { + transform: rotate(-180deg); + } + } +} diff --git a/uni_modules/wot-design-uni/components/wd-collapse/types.ts b/uni_modules/wot-design-uni/components/wd-collapse/types.ts new file mode 100644 index 0000000..0e1d4dd --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-collapse/types.ts @@ -0,0 +1,7 @@ +/** + * 折叠面板子项 + */ +export interface CollapseItem { + name: string + expanded: boolean +} diff --git a/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue b/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue new file mode 100644 index 0000000..1abb923 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue @@ -0,0 +1,194 @@ + + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-config-provider/wd-config-provider.vue b/uni_modules/wot-design-uni/components/wd-config-provider/wd-config-provider.vue new file mode 100644 index 0000000..fd19ce0 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-config-provider/wd-config-provider.vue @@ -0,0 +1,89 @@ + + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-count-down/index.scss b/uni_modules/wot-design-uni/components/wd-count-down/index.scss new file mode 100644 index 0000000..c9b93f1 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-count-down/index.scss @@ -0,0 +1,15 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(count-down) { + color: $-dark-color; + } +} + + +@include b(count-down) { + color: $-count-down-text-color; + font-size: $-count-down-font-size; + line-height: $-count-down-line-height; +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-count-down/utils.ts b/uni_modules/wot-design-uni/components/wd-count-down/utils.ts new file mode 100644 index 0000000..e92ae39 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-count-down/utils.ts @@ -0,0 +1,56 @@ +import { padZero } from '../common/util' + +export type TimeData = { + days: number + hours: number + minutes: number + seconds: number + milliseconds: number +} + +export function parseFormat(format: string, timeData: TimeData): string { + const { days } = timeData + let { hours, minutes, seconds, milliseconds } = timeData + + if (format.includes('DD')) { + format = format.replace('DD', padZero(days)) + } else { + hours += days * 24 + } + + if (format.includes('HH')) { + format = format.replace('HH', padZero(hours)) + } else { + minutes += hours * 60 + } + + if (format.includes('mm')) { + format = format.replace('mm', padZero(minutes)) + } else { + seconds += minutes * 60 + } + + if (format.includes('ss')) { + format = format.replace('ss', padZero(seconds)) + } else { + milliseconds += seconds * 1000 + } + + if (format.includes('S')) { + const ms = padZero(milliseconds, 3) + + if (format.includes('SSS')) { + format = format.replace('SSS', ms) + } else if (format.includes('SS')) { + format = format.replace('SS', ms.slice(0, 2)) + } else { + format = format.replace('S', ms.charAt(0)) + } + } + + return format +} + +export function isSameSecond(time1: number, time2: number): boolean { + return Math.floor(time1 / 1000) === Math.floor(time2 / 1000) +} diff --git a/uni_modules/wot-design-uni/components/wd-count-down/wd-count-down.vue b/uni_modules/wot-design-uni/components/wd-count-down/wd-count-down.vue new file mode 100644 index 0000000..9bfa290 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-count-down/wd-count-down.vue @@ -0,0 +1,76 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-curtain/index.scss b/uni_modules/wot-design-uni/components/wd-curtain/index.scss new file mode 100644 index 0000000..83269ab --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-curtain/index.scss @@ -0,0 +1,80 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +:deep(.wd-curtain){ + display: inline-block; + border-radius: $-curtain-content-radius; + overflow-y: visible; + background: transparent; + font-size: 0; +} +@include bdeep(curtain) { + + @include e(content) { + position: relative; + display: inline-block; + background: transparent; + border-radius: $-curtain-content-radius; + } + @include e(content-link) { + display: block; + border-radius: $-curtain-content-radius; + } + @include e(content-img) { + display: block; + width: auto; + height: auto; + border-radius: $-curtain-content-radius; + } + @include edeep(content-close) { + position: absolute; + margin: 0; + padding: 6px; + top: 10px; + right: 10px; + color: $-curtain-content-close-color; + -webkit-tap-highlight-color: transparent; + &.top { + margin: 0 0 0 -18px; + top: -62px; + right: unset; + left: 50%; + bottom: unset; + } + &.top-left { + margin: 0; + top: -62px; + right: unset; + left: -6px; + bottom: unset; + } + &.top-right { + margin: 0; + top: -62px; + right: -6px; + left: unset; + bottom: unset; + } + &.bottom { + margin: 0 0 0 -18px; + top: unset; + right: unset; + left: 50%; + bottom: -62px; + } + &.bottom-left { + margin: 0; + top: unset; + right: unset; + left: -6px; + bottom: -62px; + } + &.bottom-right { + margin: 0; + top: unset; + right: -6px; + left: unset; + bottom: -62px; + } + } +} diff --git a/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue b/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue new file mode 100644 index 0000000..b0c4909 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue @@ -0,0 +1,178 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-datetime-picker-view/index.scss b/uni_modules/wot-design-uni/components/wd-datetime-picker-view/index.scss new file mode 100644 index 0000000..e69de29 diff --git a/uni_modules/wot-design-uni/components/wd-datetime-picker-view/type.ts b/uni_modules/wot-design-uni/components/wd-datetime-picker-view/type.ts new file mode 100644 index 0000000..2025efd --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-datetime-picker-view/type.ts @@ -0,0 +1,24 @@ +export type DateTimeType = 'date' | 'year-month' | 'time' | 'datetime' + +/** + * @description 根据传入的值和类型,获取当前的选项数组,便于传入 pickerView + * @param value + * @param type picker类型 + * @return {Array} pickerValue + */ +export function getPickerValue(value, type) { + const values: number[] = [] + const date = new Date(value) + if (type === 'time') { + const pair = value.split(':') + values.push(parseInt(pair[0]), parseInt(pair[1])) + } else { + values.push(date.getFullYear(), date.getMonth() + 1) + if (type === 'date') { + values.push(date.getDate()) + } else if (type === 'datetime') { + values.push(date.getDate(), date.getHours(), date.getMinutes()) + } + } + return values +} diff --git a/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue b/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue new file mode 100644 index 0000000..7d064bb --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue @@ -0,0 +1,562 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-datetime-picker/index.scss b/uni_modules/wot-design-uni/components/wd-datetime-picker/index.scss new file mode 100644 index 0000000..319564b --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-datetime-picker/index.scss @@ -0,0 +1,241 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +.wot-theme-dark { + @include b(picker) { + @include e(cell) { + background-color: $-dark-background2; + color: $-dark-color; + } + + @include e(label) { + color: $-dark-color; + } + @include e(value) { + color: $-dark-color; + } + + @include e(placeholder) { + color: $-dark-color-gray; + } + + + @include when(border) { + .wd-picker__cell { + @include halfPixelBorder('top', $-cell-padding, $-dark-border-color); + } + } + + :deep(.wd-picker__arrow){ + color: $-dark-color; + } + + @include e(action) { + @include m(cancel) { + color: $-dark-color; + } + } + + @include e(region) { + color: $-dark-color; + + @include when(active) { + background: $-picker-region-bg-active-color; + color: $-dark-color; + } + } + + } +} + +@include b(picker) { + @include edeep(popup) { + border-radius: 16px 16px 0px 0px; + } + + @include e(wraper) { + padding-bottom: var(--window-bottom); + } + + @include when(border) { + .wd-picker__cell { + @include halfPixelBorder("top", $-cell-padding); + } + } + @include when(large) { + .wd-picker__cell { + font-size: $-cell-title-fs-large; + } + :deep(.wd-picker__arrow) { + font-size: $-cell-icon-size-large; + } + } + @include when(error) { + .wd-picker__value, + .wd-picker__placeholder { + color: $-input-error-color; + } + + :deep(.wd-picker__arrow){ + color: $-input-error-color; + } + } + @include when(align-right) { + .wd-picker__value { + text-align: right; + } + } + @include e(cell) { + position: relative; + display: flex; + padding: $-cell-wrapper-padding $-cell-padding; + align-items: flex-start; + background-color: $-color-white; + text-decoration: none; + color: $-cell-title-color; + font-size: $-cell-title-fs; + overflow: hidden; + line-height: $-cell-line-height; + + @include when(disabled) { + .wd-picker__value { + color: $-input-disabled-color; + } + } + } + + @include when(disabled) { + .wd-picker__value { + color: $-picker-column-disabled-color; + } + } + + @include e(error-message){ + color: $-form-item-error-message-color; + font-size: $-form-item-error-message-font-size; + line-height: $-form-item-error-message-line-height; + text-align: left; + vertical-align: middle; + } + + @include e(label) { + position: relative; + width: $-input-cell-label-width; + margin-right: $-cell-padding; + color: $-cell-title-color; + box-sizing: border-box; + + @include when(required) { + padding-left: 12px; + + &::after { + position: absolute; + left: 0; + top: 2px; + content: "*"; + font-size: $-cell-required-size; + line-height: 1.1; + color: $-cell-required-color; + } + } + } + + @include e(value-wraper) { + display: flex; + } + + @include e(value) { + flex: 1; + margin-right: 10px; + color: $-cell-value-color; + + @include when(ellipsis) { + @include lineEllipsis; + } + } + + @include e(body) { + flex: 1; + } + + @include e(placeholder) { + color: $-input-placeholder-color; + } + + @include edeep(arrow) { + display: block; + font-size: $-cell-icon-size; + color: $-cell-arrow-color; + line-height: $-cell-line-height; + } + + @include e(toolbar) { + position: relative; + display: flex; + font-size: $-picker-toolbar-fs; + height: $-picker-toolbar-height; + line-height: $-picker-action-height; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + } + + @include e(action) { + display: block; + border: none; + outline: none; + font-size: $-picker-toolbar-fs; + color: $-picker-toolbar-finish-color; + background: transparent; + padding: 24px 15px 14px 15px; + + @include m(cancel) { + color: $-picker-toolbar-cancel-color; + } + + @include when(loading) { + color: $-picker-loading-button-color; + } + } + @include e(title) { + display: block; + float: 1; + color: $-picker-toolbar-title-color; + } + + @include e(region-tabs) { + display: flex; + } + + @include e(region) { + width: 50%; + display: inline-block; + color: $-picker-region-color; + text-align: center; + padding: 14px 0; + font-size: $-picker-region-fs; + line-height: 16px; + transition: all 0.15s ease-out; + + @include when(active) { + background: $-picker-region-bg-active-color; + color: $-color-white; + } + } + + @include e(region-time) { + font-size: 16px; + margin-top: 2px; + } + + @include e(hidden) { + visibility: hidden; + overflow: hidden; + height: 0; + } + + @include e(show) { + visibility: visible; + height: auto; + } +} diff --git a/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue b/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue new file mode 100644 index 0000000..b4acb10 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue @@ -0,0 +1,849 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-divider/index.scss b/uni_modules/wot-design-uni/components/wd-divider/index.scss new file mode 100644 index 0000000..3bb29c9 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-divider/index.scss @@ -0,0 +1,32 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(divider) { + color: $-dark-color3; + + @include e(line) { + background: $-dark-color-gray; + } + } +} + +@include b(divider) { + position: relative; + display: flex; + padding: $-divider-padding; + align-items: center; + color: $-divider-color; + font-size: $-divider-fs; + + @include e(line) { + display: block; + flex: 1; + height: 1px; + transform: scaleY(0.5); + background: $-divider-line-color; + } + @include e(content) { + padding: 0 12px; + } +} diff --git a/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue b/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue new file mode 100644 index 0000000..4e066e7 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue @@ -0,0 +1,35 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-drop-menu-item/index.scss b/uni_modules/wot-design-uni/components/wd-drop-menu-item/index.scss new file mode 100644 index 0000000..13546eb --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-drop-menu-item/index.scss @@ -0,0 +1,66 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(drop-item) { + color: $-dark-color; + + @include e(tip) { + color: $-dark-color3; + } + } +} + +@include b(drop-item) { + position: fixed; + right: 0; + left: 0; + overflow: hidden; + font-size: $-drop-menu-item-fs; + color: $-drop-menu-item-color; + width: 100%; + z-index: 101; + + .wd-drop-item__popup { + position: absolute; + max-height: 80%; + } + + @include e(option) { + display: flex; + height: $-drop-menu-item-height; + line-height: $-drop-menu-item-height; + padding: 0 $-drop-menu-side-padding; + justify-content: space-between; + align-items: center; + transition: color .2s; + + @include when(active) { + color: $-drop-menu-item-color-active; + } + } + + @include e(title){ + display: block; + } + + @include e(tip) { + display: inline-block; + color: $-drop-menu-item-color-tip; + font-size: $-drop-menu-item-fs-tip; + margin-left: 2px; + } + + @include edeep(icon){ + display: block; + font-size: $-drop-menu-option-check-size; + } + + @include e(modal) { + position: fixed; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.7); + height: 100%; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue b/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue new file mode 100644 index 0000000..2b50771 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue @@ -0,0 +1,244 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-drop-menu/index.scss b/uni_modules/wot-design-uni/components/wd-drop-menu/index.scss new file mode 100644 index 0000000..f099665 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-drop-menu/index.scss @@ -0,0 +1,88 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(drop-menu) { + color: $-dark-color; + @include e(list) { + background-color: $-dark-background2; + } + + @include e(item) { + @include when(disabled) { + color: $-dark-color-gray; + } + } + } +} + +@include b(drop-menu) { + box-sizing: border-box; + color: $-drop-menu-color; + font-size: $-drop-menu-fs; + position: relative; + + @include e(list) { + display: flex; + text-align: center; + background-color: #fff; + } + @include e(item) { + flex: 1; + min-width: 0; + height: $-drop-menu-height; + line-height: $-drop-menu-height; + text-align: center; + + @include when(active) { + font-weight: $-fw-medium; + + .wd-drop-menu__item-title::after { + opacity: 1; + } + :deep(.wd-drop-menu__arrow) { + transform: scale(0.6) rotate(-180deg); + transform-origin: center center; + } + } + @include when(disabled) { + color: $-drop-menu-disabled-color; + } + } + + @include e(item-title) { + position: relative; + display: inline-block; + max-width: 100%; + padding: 0 $-drop-menu-side-padding; + box-sizing: border-box; + + &::after { + position: absolute; + content: ''; + width: 19px; + height: $-drop-menu-line-height; + bottom: 6px; + left: 50%; + transform: translate(-50%, 0); + background: $-drop-menu-line-color; + border-radius: $-drop-menu-line-height; + transition: opacity .15s; + opacity: 0; + } + } + + @include e(item-title-text) { + position: relative; + @include lineEllipsis; + } + + @include edeep(arrow) { + position: absolute; + display: inline-block; + top: 0; + right: -4px; + transition: transform 0.3s; + transform: scale(0.6); + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue b/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue new file mode 100644 index 0000000..8ab6b35 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue @@ -0,0 +1,176 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-fab/index.scss b/uni_modules/wot-design-uni/components/wd-fab/index.scss new file mode 100644 index 0000000..0c8e801 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-fab/index.scss @@ -0,0 +1,154 @@ +@import "../common/abstracts/variable"; +@import "../common/abstracts/mixin"; + +.wot-theme-dark { + @include b(fab) {} +} + +@include b(fab) { + position: fixed; + z-index: 99; + + + @include edeep(trigger) { + min-width: auto !important; + box-sizing: border-box; + width: $-fab-trigger-width !important; + height: $-fab-trigger-height !important; + border-radius: calc($-fab-trigger-height / 2) !important; + } + + :deep() { + @include e(actions) { + position: absolute; + z-index: 0; + display: flex; + justify-content: center; + align-items: center; + padding: $-fab-actions-padding 0; + + @include m(left, right) { + height: 100%; + top: 0; + padding: 0 $-fab-actions-padding; + } + + @include m(left) { + flex-direction: row-reverse; + right: 100%; + } + + @include m(right) { + flex-direction: row; + left: 100%; + } + + @include m(top, bottom) { + width: 100%; + left: 0; + } + + @include m(top) { + flex-direction: column-reverse; + bottom: 100%; + } + + @include m(bottom) { + flex-direction: column; + top: 100%; + } + } + + // 动画 + @include e(transition-enter-active, transition-leave-active) { + transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; + } + + + @include e(transition-enter) { + @include m(top) { + opacity: 0; + transform: translateY(40px); + } + + @include m(bottom) { + opacity: 0; + transform: translateY(-40px); + } + + @include m(left) { + opacity: 0; + transform: translateX(40px); + } + + @include m(right) { + opacity: 0; + transform: translateX(-40px); + } + } + + @include e(transition-leave-to) { + @include m(top) { + opacity: 0; + transform: translateY(40px); + } + + @include m(bottom) { + opacity: 0; + transform: translateY(-40px); + } + + @include m(left) { + opacity: 0; + transform: translateX(40px); + } + + @include m(right) { + opacity: 0; + transform: translateX(-40px); + } + } + + + } + + @include edeep(icon) { + font-size: 20px; + } + + @include m(left-top) { + top: $-fab-top; + left: $-fab-left; + /* #ifdef H5 */ + top: calc($-fab-top + var(--window-top)); + left: calc($-fab-left + var(--window-left)); + /* #endif */ + } + + @include m(right-top) { + top: $-fab-top; + right: $-fab-right; + /* #ifdef H5 */ + top: calc($-fab-top + var(--window-top)); + right: calc($-fab-right + var(--window-right)); + /* #endif */ + } + + @include m(left-bottom) { + bottom: $-fab-bottom; + left: $-fab-left; + /* #ifdef H5 */ + bottom: calc($-fab-bottom + var(--window-bottom)); + left: calc($-fab-left + var(--window-left)); + /* #endif */ + } + + @include m(right-bottom) { + bottom: $-fab-bottom; + right: $-fab-right; + /* #ifdef H5 */ + bottom: calc($-fab-bottom + var(--window-bottom)); + right: calc($-fab-right + var(--window-right)); + /* #endif */ + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue b/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue new file mode 100644 index 0000000..5076996 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue @@ -0,0 +1,156 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-form-item/index.scss b/uni_modules/wot-design-uni/components/wd-form-item/index.scss new file mode 100644 index 0000000..f2dc8f8 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-form-item/index.scss @@ -0,0 +1,18 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(form-item) { + } +} + + +@include bdeep(form-item) { + @include e(error-message){ + color: $-form-item-error-message-color; + font-size: $-form-item-error-message-font-size; + line-height: $-form-item-error-message-line-height; + text-align: left; + vertical-align: middle; + } +} diff --git a/uni_modules/wot-design-uni/components/wd-form-item/wd-form-item.vue b/uni_modules/wot-design-uni/components/wd-form-item/wd-form-item.vue new file mode 100644 index 0000000..aa6145d --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-form-item/wd-form-item.vue @@ -0,0 +1,82 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-form/index.scss b/uni_modules/wot-design-uni/components/wd-form/index.scss new file mode 100644 index 0000000..44acaeb --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-form/index.scss @@ -0,0 +1,10 @@ +@import "../common/abstracts/variable"; +@import "../common/abstracts/mixin"; + +.wot-theme-dark { + @include b(form) { + } +} + +@include b(form) { +} diff --git a/uni_modules/wot-design-uni/components/wd-form/types.ts b/uni_modules/wot-design-uni/components/wd-form/types.ts new file mode 100644 index 0000000..81fd4bb --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-form/types.ts @@ -0,0 +1,38 @@ +/* + * @Author: weisheng + * @Date: 2023-12-14 11:21:58 + * @LastEditTime: 2023-12-23 16:20:20 + * @LastEditors: weisheng + * @Description: + * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-form\types.ts + * 记得注释 + */ +import { type InjectionKey } from 'vue' + +export type FormProvide = { + model: Record + rules?: FormRules + border?: boolean + errorMessages?: Record +} + +export const FORM_KEY: InjectionKey = Symbol('wd-form') + +export type FormRules = { + [key: string]: FormItemRule[] +} + +export type ErrorMessage = { + prop: string + message: string +} + +export interface FormItemRule { + [key: string]: any + required: boolean + message: string + pattern?: RegExp + validator?: (value: any, rule: FormItemRuleWithoutValidator) => boolean | Promise | Promise | Promise | Promise +} + +export type FormItemRuleWithoutValidator = Omit diff --git a/uni_modules/wot-design-uni/components/wd-form/wd-form.vue b/uni_modules/wot-design-uni/components/wd-form/wd-form.vue new file mode 100644 index 0000000..b58f511 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-form/wd-form.vue @@ -0,0 +1,174 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-gap/index.scss b/uni_modules/wot-design-uni/components/wd-gap/index.scss new file mode 100644 index 0000000..3a44d47 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-gap/index.scss @@ -0,0 +1,9 @@ +@import "../common/abstracts/variable"; +@import "../common/abstracts/mixin"; + +@include b(gap) { + @include m(safe) { + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-gap/wd-gap.vue b/uni_modules/wot-design-uni/components/wd-gap/wd-gap.vue new file mode 100644 index 0000000..0cad2bf --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-gap/wd-gap.vue @@ -0,0 +1,51 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-grid-item/index.scss b/uni_modules/wot-design-uni/components/wd-grid-item/index.scss new file mode 100644 index 0000000..c63ed83 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-grid-item/index.scss @@ -0,0 +1,140 @@ +@import "../common/abstracts/variable"; +@import "../common/abstracts/mixin"; + +.wot-theme-dark { + @include b(grid-item) { + + @include when(border) { + &::before { + background-color: $-dark-border-color; + } + &::after { + background-color: $-dark-border-color; + } + } + + // 第一行元素 + @include when(first) { + &::after { + background-color: $-dark-border-color; + } + } + + + @include e(content) { + background-color: $-dark-background2; + } + } +} + +@include b(grid-item) { + height: 100%; + font-size: $-grid-item-fs; + box-sizing: border-box; + + position: relative; + float: left; + + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + overflow: hidden; + + @include when(border) { + &::before { + content: ""; + position: absolute; + width: 100%; + height: 1px; + transform: scaleY(0.5); + background-color: $-grid-item-border-color; + top: 0; + left: 0; + z-index: 1; + } + &::after { + content: ""; + position: absolute; + width: 1px; + transform: scaleX(0.5); + height: 100%; + background-color: $-grid-item-border-color; + bottom: 0; + right: 0; + } + } + + // 第一行元素 + @include when(first) { + &::after { + content: ""; + position: absolute; + width: 1px; + transform: scaleX(0.5); + height: 100%; + background-color: $-grid-item-border-color; + bottom: 0; + right: 0; + } + } + + // 每行右侧的元素 + @include when(right) { + &::after { + display: none; + } + } + + @include when(last) { + &::after { + display: none; + } + } + @include e(wrapper) { + display: inline-block; + margin: 0 auto; + } + + @include e(content) { + height: 100%; + padding: $-grid-item-padding; + background-color: $-grid-item-bg; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + + @include when(square) { + box-sizing: border-box; + position: absolute; + top: 0; + right: 0; + left: 0; + padding: 0; + height: 100%; + } + + @include when(round) { + &::after { + content: " "; + position: absolute; + top: 0; + left: 0; + width: 200%; + height: 200%; + border: 1px solid $-grid-item-border-color; + transform-origin: top left; + transform: scale(0.5); + box-sizing: border-box; + } + } + } + + @include e(text) { + margin-top: 8px; + font-size: $-grid-item-fs; + line-height: $-grid-item-fs; + @include lineEllipsis; + } +} diff --git a/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue b/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue new file mode 100644 index 0000000..d8fda54 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue @@ -0,0 +1,190 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-grid/index.scss b/uni_modules/wot-design-uni/components/wd-grid/index.scss new file mode 100644 index 0000000..f69b2a2 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-grid/index.scss @@ -0,0 +1,14 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; +.wot-theme-dark { + @include b(grid) { + background-color: $-dark-background2; + } +} + +@include b(grid) { + position: relative; + box-sizing: border-box; + overflow: hidden; + height: auto; +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-grid/wd-grid.vue b/uni_modules/wot-design-uni/components/wd-grid/wd-grid.vue new file mode 100644 index 0000000..04a78a4 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-grid/wd-grid.vue @@ -0,0 +1,128 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-icon/index.scss b/uni_modules/wot-design-uni/components/wd-icon/index.scss new file mode 100644 index 0000000..1c1730f --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-icon/index.scss @@ -0,0 +1,1226 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +@font-face { + font-family: 'wd-icons'; + src: url('//at.alicdn.com/t/c/font_4245058_s5cpwl25n7o.woff2?t=1696817709651') format('woff2'), + url('//at.alicdn.com/t/c/font_4245058_s5cpwl25n7o.woff?t=1696817709651') format('woff'), + url('//at.alicdn.com/t/c/font_4245058_s5cpwl25n7o.ttf?t=1696817709651') format('truetype'); + font-weight: normal; + font-style: normal; +} + +/* #ifdef APP-PLUS */ +@font-face { + font-family: 'wd-icons'; + src: + url('./wd-icons.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +/* #endif */ + +@include b(icon) { + display: inline-block; + font-family: 'wd-icons' !important; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + @include m(image) { + width: 1em; + height: 1em; + } + + @include e(image) { + width: 100%; + height: 100%; + } +} + + + +.wd-icon-usergroup-clear:before { + content: "\e739"; +} + +.wd-icon-user-circle:before { + content: "\e73a"; +} + +.wd-icon-user-talk:before { + content: "\e73b"; +} + +.wd-icon-user-clear:before { + content: "\e73c"; +} + +.wd-icon-user:before { + content: "\e73d"; +} + +.wd-icon-usergroup-add:before { + content: "\e73e"; +} + +.wd-icon-usergroup:before { + content: "\e73f"; +} + +.wd-icon-user-add:before { + content: "\e740"; +} + +.wd-icon-user-avatar:before { + content: "\e741"; +} + +.wd-icon-pointing-hand:before { + content: "\e742"; +} + +.wd-icon-cursor:before { + content: "\e743"; +} + +.wd-icon-fullsreen:before { + content: "\e72c"; +} + +.wd-icon-cloud-download:before { + content: "\e72d"; +} + +.wd-icon-chevron-down-rectangle:before { + content: "\e72e"; +} + +.wd-icon-edit:before { + content: "\e72f"; +} + +.wd-icon-fullscreen-exit:before { + content: "\e730"; +} + +.wd-icon-circle1:before { + content: "\e731"; +} + +.wd-icon-close-normal:before { + content: "\e732"; +} + +.wd-icon-browse:before { + content: "\e733"; +} + +.wd-icon-browse-off:before { + content: "\e734"; +} + +.wd-icon-chevron-up-rectangle:before { + content: "\e735"; +} + +.wd-icon-add-rectangle:before { + content: "\e736"; +} + +.wd-icon-add1:before { + content: "\e737"; +} + +.wd-icon-add-circle1:before { + content: "\e738"; +} + +.wd-icon-download1:before { + content: "\e71c"; +} + +.wd-icon-link:before { + content: "\e71d"; +} + +.wd-icon-edit-1:before { + content: "\e71e"; +} + +.wd-icon-jump:before { + content: "\e71f"; +} + +.wd-icon-chevron-down-circle:before { + content: "\e720"; +} + +.wd-icon-delete1:before { + content: "\e721"; +} + +.wd-icon-filter-clear:before { + content: "\e722"; +} + +.wd-icon-check-rectangle-filled:before { + content: "\e723"; +} + +.wd-icon-minus-circle-filled:before { + content: "\e724"; +} + +.wd-icon-play:before { + content: "\e725"; +} + +.wd-icon-pause-circle-filled:before { + content: "\e726"; +} + +.wd-icon-filter1:before { + content: "\e727"; +} + +.wd-icon-move:before { + content: "\e728"; +} + +.wd-icon-login:before { + content: "\e729"; +} + +.wd-icon-minus-circle:before { + content: "\e72a"; +} + +.wd-icon-close-circle:before { + content: "\e72b"; +} + +.wd-icon-logout:before { + content: "\e70b"; +} + +.wd-icon-search1:before { + content: "\e70c"; +} + +.wd-icon-pause-circle:before { + content: "\e70d"; +} + +.wd-icon-play-circle:before { + content: "\e70e"; +} + +.wd-icon-more1:before { + content: "\e70f"; +} + +.wd-icon-minus-rectangle:before { + content: "\e710"; +} + +.wd-icon-stop:before { + content: "\e711"; +} + +.wd-icon-scan1:before { + content: "\e712"; +} + +.wd-icon-close-rectangle:before { + content: "\e713"; +} + +.wd-icon-rollback:before { + content: "\e714"; +} + +.wd-icon-a-order-adjustmentcolumn:before { + content: "\e715"; +} + +.wd-icon-pause:before { + content: "\e716"; +} + +.wd-icon-ellipsis:before { + content: "\e717"; +} + +.wd-icon-cloud-upload:before { + content: "\e718"; +} + +.wd-icon-stop-circle-filled:before { + content: "\e719"; +} + +.wd-icon-clear:before { + content: "\e71a"; +} + +.wd-icon-remove:before { + content: "\e71b"; +} + +.wd-icon-zoom-out:before { + content: "\e6fb"; +} + +.wd-icon-thumb-down:before { + content: "\e6fc"; +} + +.wd-icon-setting1:before { + content: "\e6fd"; +} + +.wd-icon-save:before { + content: "\e6fe"; +} + +.wd-icon-unfold-more:before { + content: "\e6ff"; +} + +.wd-icon-zoom-in:before { + content: "\e700"; +} + +.wd-icon-thumb-up:before { + content: "\e701"; +} + +.wd-icon-unfold-less:before { + content: "\e702"; +} + +.wd-icon-play-circle-filled:before { + content: "\e703"; +} + +.wd-icon-poweroff:before { + content: "\e704"; +} + +.wd-icon-share:before { + content: "\e705"; +} + +.wd-icon-refresh1:before { + content: "\e706"; +} + +.wd-icon-link-unlink:before { + content: "\e707"; +} + +.wd-icon-upload:before { + content: "\e708"; +} + +.wd-icon-rectangle:before { + content: "\e709"; +} + +.wd-icon-stop-circle:before { + content: "\e70a"; +} + +.wd-icon-backtop-rectangle:before { + content: "\e6ea"; +} + +.wd-icon-caret-down:before { + content: "\e6eb"; +} + +.wd-icon-arrow-left1:before { + content: "\e6ec"; +} + +.wd-icon-help-circle:before { + content: "\e6ed"; +} + +.wd-icon-help-circle-filled:before { + content: "\e6ee"; +} + +.wd-icon-time-filled:before { + content: "\e6ef"; +} + +.wd-icon-close-circle-filled:before { + content: "\e6f0"; +} + +.wd-icon-info-circle:before { + content: "\e6f1"; +} + +.wd-icon-info-circle-filled:before { + content: "\e6f2"; +} + +.wd-icon-check1:before { + content: "\e6f3"; +} + +.wd-icon-help:before { + content: "\e6f4"; +} + +.wd-icon-error:before { + content: "\e6f5"; +} + +.wd-icon-check-circle:before { + content: "\e6f6"; +} + +.wd-icon-error-circle-filled:before { + content: "\e6f7"; +} + +.wd-icon-error-circle:before { + content: "\e6f8"; +} + +.wd-icon-check-rectangle:before { + content: "\e6f9"; +} + +.wd-icon-check-circle-filled:before { + content: "\e6fa"; +} + +.wd-icon-chevron-up:before { + content: "\e6da"; +} + +.wd-icon-chevron-up-circle:before { + content: "\e6db"; +} + +.wd-icon-chevron-right:before { + content: "\e6dc"; +} + +.wd-icon-arrow-down-rectangle:before { + content: "\e6dd"; +} + +.wd-icon-caret-up-small:before { + content: "\e6de"; +} + +.wd-icon-chevron-right-rectangle:before { + content: "\e6df"; +} + +.wd-icon-caret-right-small:before { + content: "\e6e0"; +} + +.wd-icon-arrow-right1:before { + content: "\e6e1"; +} + +.wd-icon-backtop:before { + content: "\e6e2"; +} + +.wd-icon-arrow-up1:before { + content: "\e6e3"; +} + +.wd-icon-caret-up:before { + content: "\e6e4"; +} + +.wd-icon-backward:before { + content: "\e6e5"; +} + +.wd-icon-arrow-down1:before { + content: "\e6e6"; +} + +.wd-icon-chevron-left:before { + content: "\e6e7"; +} + +.wd-icon-caret-right:before { + content: "\e6e8"; +} + +.wd-icon-caret-left:before { + content: "\e6e9"; +} + +.wd-icon-page-last:before { + content: "\e6c9"; +} + +.wd-icon-next:before { + content: "\e6ca"; +} + +.wd-icon-swap:before { + content: "\e6cb"; +} + +.wd-icon-round:before { + content: "\e6cc"; +} + +.wd-icon-previous:before { + content: "\e6cd"; +} + +.wd-icon-enter:before { + content: "\e6ce"; +} + +.wd-icon-chevron-down:before { + content: "\e6cf"; +} + +.wd-icon-caret-down-small:before { + content: "\e6d0"; +} + +.wd-icon-swap-right:before { + content: "\e6d1"; +} + +.wd-icon-chevron-left-circle:before { + content: "\e6d2"; +} + +.wd-icon-caret-left-small:before { + content: "\e6d3"; +} + +.wd-icon-chevron-right-circle:before { + content: "\e6d4"; +} + +.wd-icon-a-chevron-leftdouble:before { + content: "\e6d5"; +} + +.wd-icon-chevron-left-rectangle:before { + content: "\e6d6"; +} + +.wd-icon-a-chevron-rightdouble:before { + content: "\e6d7"; +} + +.wd-icon-page-first:before { + content: "\e6d8"; +} + +.wd-icon-forward:before { + content: "\e6d9"; +} + +.wd-icon-view-column:before { + content: "\e6b9"; +} + +.wd-icon-view-module:before { + content: "\e6ba"; +} + +.wd-icon-format-vertical-align-right:before { + content: "\e6bb"; +} + +.wd-icon-view-list:before { + content: "\e6bc"; +} + +.wd-icon-order-descending:before { + content: "\e6bd"; +} + +.wd-icon-format-horizontal-align-bottom:before { + content: "\e6be"; +} + +.wd-icon-queue:before { + content: "\e6bf"; +} + +.wd-icon-menu-fold:before { + content: "\e6c0"; +} + +.wd-icon-menu-unfold:before { + content: "\e6c1"; +} + +.wd-icon-format-horizontal-align-top:before { + content: "\e6c2"; +} + +.wd-icon-a-rootlist:before { + content: "\e6c3"; +} + +.wd-icon-order-ascending:before { + content: "\e6c4"; +} + +.wd-icon-format-vertical-align-left:before { + content: "\e6c5"; +} + +.wd-icon-format-horizontal-align-center:before { + content: "\e6c6"; +} + +.wd-icon-format-vertical-align-center:before { + content: "\e6c7"; +} + +.wd-icon-swap-left:before { + content: "\e6c8"; +} + +.wd-icon-flag:before { + content: "\e6aa"; +} + +.wd-icon-code:before { + content: "\e6ab"; +} + +.wd-icon-cart:before { + content: "\e6ac"; +} + +.wd-icon-attach:before { + content: "\e6ad"; +} + +.wd-icon-chart:before { + content: "\e6ae"; +} + +.wd-icon-creditcard:before { + content: "\e6af"; +} + +.wd-icon-calendar:before { + content: "\e6b0"; +} + +.wd-icon-app:before { + content: "\e6b1"; +} + +.wd-icon-books:before { + content: "\e6b2"; +} + +.wd-icon-barcode:before { + content: "\e6b3"; +} + +.wd-icon-chart-pie:before { + content: "\e6b4"; +} + +.wd-icon-chart-bar:before { + content: "\e6b5"; +} + +.wd-icon-chart-bubble:before { + content: "\e6b6"; +} + +.wd-icon-bulletpoint:before { + content: "\e6b7"; +} + +.wd-icon-bianjiliebiao:before { + content: "\e6b8"; +} + +.wd-icon-image:before { + content: "\e69a"; +} + +.wd-icon-laptop:before { + content: "\e69b"; +} + +.wd-icon-hourglass:before { + content: "\e69c"; +} + +.wd-icon-call:before { + content: "\e69d"; +} + +.wd-icon-mobile-vibrate:before { + content: "\e69e"; +} + +.wd-icon-mail:before { + content: "\e69f"; +} + +.wd-icon-notification-filled:before { + content: "\e6a0"; +} + +.wd-icon-desktop:before { + content: "\e6a1"; +} + +.wd-icon-history:before { + content: "\e6a2"; +} + +.wd-icon-discount-filled:before { + content: "\e6a3"; +} + +.wd-icon-dashboard:before { + content: "\e6a4"; +} + +.wd-icon-discount:before { + content: "\e6a5"; +} + +.wd-icon-heart-filled:before { + content: "\e6a6"; +} + +.wd-icon-chat1:before { + content: "\e6a7"; +} + +.wd-icon-a-controlplatform:before { + content: "\e6a8"; +} + +.wd-icon-gift:before { + content: "\e6a9"; +} + +.wd-icon-photo:before { + content: "\e692"; +} + +.wd-icon-play-circle-stroke:before { + content: "\e693"; +} + +.wd-icon-notification:before { + content: "\e694"; +} + +.wd-icon-cloud:before { + content: "\e695"; +} + +.wd-icon-gender-female:before { + content: "\e696"; +} + +.wd-icon-fork:before { + content: "\e697"; +} + +.wd-icon-layers:before { + content: "\e698"; +} + +.wd-icon-lock-off:before { + content: "\e699"; +} + +.wd-icon-location:before { + content: "\e68a"; +} + +.wd-icon-mobile:before { + content: "\e68b"; +} + +.wd-icon-qrcode:before { + content: "\e68c"; +} + +.wd-icon-home1:before { + content: "\e68d"; +} + +.wd-icon-time:before { + content: "\e68e"; +} + +.wd-icon-heart:before { + content: "\e68f"; +} + +.wd-icon-lock-on:before { + content: "\e690"; +} + +.wd-icon-print:before { + content: "\e691"; +} + +.wd-icon-slash:before { + content: "\e67a"; +} + +.wd-icon-usb:before { + content: "\e67b"; +} + +.wd-icon-tools:before { + content: "\e67c"; +} + +.wd-icon-wifi:before { + content: "\e67d"; +} + +.wd-icon-star-filled:before { + content: "\e67e"; +} + +.wd-icon-server:before { + content: "\e67f"; +} + +.wd-icon-sound:before { + content: "\e680"; +} + +.wd-icon-a-precisemonitor:before { + content: "\e681"; +} + +.wd-icon-service:before { + content: "\e682"; +} + +.wd-icon-tips:before { + content: "\e683"; +} + +.wd-icon-pin:before { + content: "\e684"; +} + +.wd-icon-secured:before { + content: "\e685"; +} + +.wd-icon-star:before { + content: "\e686"; +} + +.wd-icon-gender-male:before { + content: "\e687"; +} + +.wd-icon-shop:before { + content: "\e688"; +} + +.wd-icon-money-circle:before { + content: "\e689"; +} + +.wd-icon-file-word:before { + content: "\e66a"; +} + +.wd-icon-file-unknown:before { + content: "\e66b"; +} + +.wd-icon-folder-open:before { + content: "\e66c"; +} + +.wd-icon-file-pdf:before { + content: "\e66d"; +} + +.wd-icon-folder:before { + content: "\e66e"; +} + +.wd-icon-folder-add:before { + content: "\e66f"; +} + +.wd-icon-file:before { + content: "\e670"; +} + +.wd-icon-file-image:before { + content: "\e671"; +} + +.wd-icon-file-powerpoint:before { + content: "\e672"; +} + +.wd-icon-file-add:before { + content: "\e673"; +} + +.wd-icon-file-icon:before { + content: "\e674"; +} + +.wd-icon-file-paste:before { + content: "\e675"; +} + +.wd-icon-file-excel:before { + content: "\e676"; +} + +.wd-icon-file-copy:before { + content: "\e677"; +} + +.wd-icon-video1:before { + content: "\e678"; +} + +.wd-icon-wallet:before { + content: "\e679"; +} + +.wd-icon-ie:before { + content: "\e65d"; +} + +.wd-icon-logo-codepen:before { + content: "\e65e"; +} + +.wd-icon-github-filled:before { + content: "\e65f"; +} + +.wd-icon-ie-filled:before { + content: "\e660"; +} + +.wd-icon-apple:before { + content: "\e661"; +} + +.wd-icon-windows-filled:before { + content: "\e662"; +} + +.wd-icon-internet:before { + content: "\e663"; +} + +.wd-icon-github:before { + content: "\e664"; +} + +.wd-icon-windows:before { + content: "\e665"; +} + +.wd-icon-apple-filled:before { + content: "\e666"; +} + +.wd-icon-chrome-filled:before { + content: "\e667"; +} + +.wd-icon-chrome:before { + content: "\e668"; +} + +.wd-icon-android:before { + content: "\e669"; +} + +.wd-icon-edit-outline:before { + content: "\e64a"; +} + +.wd-icon-detection:before { + content: "\e64b"; +} + +.wd-icon-check-outline:before { + content: "\e64c"; +} + +.wd-icon-close:before { + content: "\e64d"; +} + +.wd-icon-check:before { + content: "\e64e"; +} + +.wd-icon-arrow-left:before { + content: "\e64f"; +} + +.wd-icon-computer:before { + content: "\e650"; +} + +.wd-icon-clock:before { + content: "\e651"; +} + +.wd-icon-check-bold:before { + content: "\e652"; +} + +.wd-icon-bags:before { + content: "\e653"; +} + +.wd-icon-arrow-down:before { + content: "\e654"; +} + +.wd-icon-arrow-right:before { + content: "\e655"; +} + +.wd-icon-circle:before { + content: "\e656"; +} + +.wd-icon-arrow-thin-down:before { + content: "\e657"; +} + +.wd-icon-camera:before { + content: "\e658"; +} + +.wd-icon-close-bold:before { + content: "\e659"; +} + +.wd-icon-add-circle:before { + content: "\e65a"; +} + +.wd-icon-arrow-thin-up:before { + content: "\e65b"; +} + +.wd-icon-add:before { + content: "\e65c"; +} + +.wd-icon-keyboard-delete:before { + content: "\e634"; +} + +.wd-icon-transfer:before { + content: "\e635"; +} + +.wd-icon-eye-close:before { + content: "\e61f"; +} + +.wd-icon-delete:before { + content: "\e61e"; +} + +.wd-icon-download:before { + content: "\e636"; +} + +.wd-icon-picture:before { + content: "\e637"; +} + +.wd-icon-refresh:before { + content: "\e638"; +} + +.wd-icon-read:before { + content: "\e639"; +} + +.wd-icon-note:before { + content: "\e63a"; +} + +.wd-icon-phone:before { + content: "\e63b"; +} + +.wd-icon-lenovo:before { + content: "\e63c"; +} + +.wd-icon-home:before { + content: "\e63d"; +} + +.wd-icon-search:before { + content: "\e63e"; +} + +.wd-icon-fill-camera:before { + content: "\e63f"; +} + +.wd-icon-fill-arrow-down:before { + content: "\e640"; +} + +.wd-icon-arrow-up:before { + content: "\e61d"; +} + +.wd-icon-delete-thin:before { + content: "\e641"; +} + +.wd-icon-filter:before { + content: "\e642"; +} + +.wd-icon-evaluation:before { + content: "\e643"; +} + +.wd-icon-close-outline:before { + content: "\e644"; +} + +.wd-icon-dong:before { + content: "\e645"; +} + +.wd-icon-error-fill:before { + content: "\e646"; +} + +.wd-icon-chat:before { + content: "\e647"; +} + +.wd-icon-decrease:before { + content: "\e648"; +} + +.wd-icon-copy:before { + content: "\e649"; +} + +.wd-icon-setting:before { + content: "\e621"; +} + +.wd-icon-subscribe:before { + content: "\e622"; +} + +.wd-icon-jdm:before { + content: "\e620"; +} + +.wd-icon-spool:before { + content: "\e623"; +} + +.wd-icon-warning:before { + content: "\e624"; +} + +.wd-icon-wifi-error:before { + content: "\e625"; +} + +.wd-icon-star-on:before { + content: "\e626"; +} + +.wd-icon-rotate:before { + content: "\e627"; +} + +.wd-icon-translate-bold:before { + content: "\e628"; +} + +.wd-icon-keyboard-collapse:before { + content: "\e629"; +} + +.wd-icon-keywords:before { + content: "\e62a"; +} + +.wd-icon-scan:before { + content: "\e62b"; +} + +.wd-icon-view:before { + content: "\e62c"; +} + +.wd-icon-phone-compute:before { + content: "\e62d"; +} + +.wd-icon-video:before { + content: "\e62e"; +} + +.wd-icon-thin-arrow-left:before { + content: "\e62f"; +} + +.wd-icon-goods:before { + content: "\e630"; +} + +.wd-icon-list:before { + content: "\e631"; +} + +.wd-icon-warn-bold:before { + content: "\e632"; +} + +.wd-icon-more:before { + content: "\e633"; +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-icon/wd-icon.vue b/uni_modules/wot-design-uni/components/wd-icon/wd-icon.vue new file mode 100644 index 0000000..8b81b63 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-icon/wd-icon.vue @@ -0,0 +1,71 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-icon/wd-icons.ttf b/uni_modules/wot-design-uni/components/wd-icon/wd-icons.ttf new file mode 100644 index 0000000..7abffe1 Binary files /dev/null and b/uni_modules/wot-design-uni/components/wd-icon/wd-icons.ttf differ diff --git a/uni_modules/wot-design-uni/components/wd-img-cropper/index.scss b/uni_modules/wot-design-uni/components/wd-img-cropper/index.scss new file mode 100644 index 0000000..36be968 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-img-cropper/index.scss @@ -0,0 +1,199 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +@include b(img-cropper) { + background: rgba(0, 0, 0, 1); + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 1; + // 裁剪框包裹器 + @include e(wrapper) { + position: relative; + background: rgba(0, 0, 0, 0.45); + } + @include e(cut) { + z-index: 9; + position: absolute; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + pointer-events: none; + + .wd-img-cropper__cut--top, + .wd-img-cropper__cut--bottom, + .wd-img-cropper__cut--left, + .wd-img-cropper__cut--right { + // 拖动中背景蒙层为0 拖动结束为0.85 + background-color: rgba(0, 0, 0, 0.85); + transition: background 0.2s; + @include when(hightlight) { + background-color: rgba(0, 0, 0, 0); + } + } + .wd-img-cropper__cut--bottom, + .wd-img-cropper__cut--right { + flex: auto; + } + @include m(middle) { + display: flex; + } + @include m(body) { + // 若需要变化窗体大小,支持控制窗体的大小来控制下方所有对应的展示 + background-color: transparent; + position: relative; + // 节选框的窗体最外部边缘线 + &::before { + content: ""; + border: 1px solid #fff; + width: calc(200% - 1px); + height: calc(200% - 1px); + position: absolute; + transform: scale(0.5) translate(-1px, -1px); + top: -50%; + left: -50%; + } + + // 结算框对角尺寸 + $border-size: 2px; + // 节选框的四个角 + .is-left-top, + .is-left-bottom, + .is-right-top, + .is-right-bottom { + &::before { + content: ""; + position: absolute; + width: $border-size; + height: 20px; + background-color: #fff; + } + &::after { + content: ""; + position: absolute; + width: 20px; + height: $border-size; + background-color: #fff; + } + } + .is-left-top { + &::before, + &::after { + left: -$border-size; + top: -$border-size; + } + } + .is-left-bottom { + &::before, + &::after { + left: -$border-size; + bottom: -$border-size; + } + } + .is-right-top { + &::before, + &::after { + right: -$border-size; + top: -$border-size; + } + } + .is-right-bottom { + &::before, + &::after { + right: -$border-size; + bottom: -$border-size; + } + } + + // 内部网格线 + .is-gridlines-x, + .is-gridlines-y { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + display: flex; + } + .is-gridlines-x { + justify-content: center; + &::before { + content: ""; + display: inline-block; + width: 66.66%; + height: 200%; + border: 1px solid #fff; + border-top: none; + border-bottom: none; + transform: scale(0.5) translate(0, -50%); + } + } + // 内部网格线 - y轴 + .is-gridlines-y { + align-items: center; + &::after { + content: ""; + flex-shrink: 0; + display: inline-block; + width: 200%; + height: 66.66%; + border: 1px solid #fff; + border-left: none; + border-right: none; + transform: scale(0.5) translate(-50%, 0); + } + } + } + } + @include e(img) { + z-index: 2; + top: 0; + left: 0; + position: absolute; + border: none; + width: 100%; + backface-visibility: hidden; + transform-origin: center; + } + @include e(canvas) { + position: fixed; + background: white; + width: 150px; + height: 150px; + z-index: 10; + top: -200%; + pointer-events: none; + } + @include e(footer) { + position: fixed; + z-index: 10; + bottom: 10px; + width: 100%; + height: 15vh; + text-align: center; + @include m(button) { + position: relative; + text-align: left; + margin: 0 20px; + padding-top: 4vh; + // line-height: 32px; + box-sizing: border-box; + .is-cancel { + display: inline-block; + color: #fff; + font-size: 16px; + } + .is-confirm { + position: absolute; + right: 0; + // height: 32px; + width: 56px; + border-radius: 16px; + font-size: 16px; + } + } + } +} diff --git a/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue b/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue new file mode 100644 index 0000000..df0730e --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue @@ -0,0 +1,670 @@ + + + + + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-img/index.scss b/uni_modules/wot-design-uni/components/wd-img/index.scss new file mode 100644 index 0000000..90cada3 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-img/index.scss @@ -0,0 +1,18 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +@include b(img) { + position: relative; + display: inline-block; + + image { + display: block; + width: 100%; + height: 100%; + box-sizing: border-box; + } + @include when(round) { + overflow: hidden; + border-radius: 50%; + } +} diff --git a/uni_modules/wot-design-uni/components/wd-img/wd-img.vue b/uni_modules/wot-design-uni/components/wd-img/wd-img.vue new file mode 100644 index 0000000..f9bf9c1 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-img/wd-img.vue @@ -0,0 +1,85 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-input-number/index.scss b/uni_modules/wot-design-uni/components/wd-input-number/index.scss new file mode 100644 index 0000000..32879c2 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-input-number/index.scss @@ -0,0 +1,132 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +.wot-theme-dark { + @include b(input-number) { + @include e(action) { + color: $-dark-color; + @include when(disabled) { + color: $-dark-color-gray; + } + } + + @include e(input) { + color: $-dark-color; + } + + @include when(disabled) { + .wd-input-number__input { + color: $-dark-color-gray; + } + .wd-input-number__sub, + .wd-input-number__add { + color: $-dark-color-gray; + } + } + } +} + +@include b(input-number) { + display: inline-block; + user-select: none; + line-height: 1.15; + + @include e(action) { + position: relative; + display: inline-block; + width: $-input-number-btn-width; + height: $-input-number-height; + vertical-align: middle; + color: $-input-number-icon-color; + -webkit-tap-highlight-color: transparent; + box-sizing: border-box; + + // 左右加减号的边框 + &::after { + position: absolute; + content: ""; + width: calc(200% - 2px); + height: calc(200% - 2px); + left: 0; + top: 0; + border: 1px solid $-input-number-border-color; + border-top-left-radius: calc($-input-number-radius * 2); + border-bottom-left-radius: calc($-input-number-radius * 2); + transform: scale(0.5); + transform-origin: left top; + } + &:last-child::after { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: calc($-input-number-radius * 2); + border-bottom-right-radius: calc($-input-number-radius * 2); + } + @include when(disabled) { + color: $-input-number-disabled-color; + } + } + + @include e(inner) { + position: relative; + display: inline-block; + vertical-align: middle; + } + + @include e(input) { + position: relative; + display: block; + width: $-input-number-input-width; + height: $-input-number-height; + padding: 0 2px; + box-sizing: border-box; + z-index: 1; + background: transparent; + border: none; + outline: none; + text-align: center; + color: $-input-number-color; + font-size: $-input-number-fs; + -webkit-appearance: none; + -webkit-tap-highlight-color: transparent; + } + + @include e(input-border) { + position: absolute; + width: 100%; + height: calc(200% - 2px); + left: 0; + top: 0; + border-top: 1px solid $-input-number-border-color; + border-bottom: 1px solid $-input-number-border-color; + transform: scaleY(0.5); + transform-origin: left top; + z-index: 0; + } + + @include edeep(action-icon) { + position: absolute; + display: inline-block; + font-size: $-input-number-icon-size; + width: $-input-number-icon-size; + height: $-input-number-icon-size; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + + @include when(disabled) { + .wd-input-number__input { + color: $-input-number-disabled-color; + z-index: inherit; + } + .wd-input-number__sub, + .wd-input-number__add { + color: $-input-number-disabled-color; + } + } + @include when(without-input) { + .wd-input-number__action:last-child::after { + border-left: none; + } + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-input-number/wd-input-number.vue b/uni_modules/wot-design-uni/components/wd-input-number/wd-input-number.vue new file mode 100644 index 0000000..961b07a --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-input-number/wd-input-number.vue @@ -0,0 +1,234 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-input/index.scss b/uni_modules/wot-design-uni/components/wd-input/index.scss new file mode 100644 index 0000000..fa12a18 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-input/index.scss @@ -0,0 +1,332 @@ +@import "../common/abstracts/variable"; +@import "../common/abstracts/mixin"; + +.wot-theme-dark { + @include b(input) { + background: $-dark-background2; + + &::after { + background: $-dark-color-gray; + } + + @include when(not-empty) { + &:not(.is-disabled) { + &::after { + background-color: $-dark-color; + } + } + } + + + @include e(inner) { + color: $-dark-color; + + &::-webkit-input-placeholder { + color: $-dark-color3; + } + } + + @include e(placeholder) { + color: $-dark-color3; + } + + @include e(count) { + color: $-dark-color3; + background: transparent; + } + + @include e(count-current) { + color: $-dark-color; + } + + :deep(.wd-input__icon), + :deep(.wd-input__clear) { + color: $-dark-color; + background: transparent; + } + + @include when(cell) { + background-color: $-dark-background2; + + @include when(border) { + @include halfPixelBorder("top", $-input-cell-padding, $-dark-border-color); + } + } + + @include when(disabled) { + + .wd-input__inner { + color: $-dark-color-gray; + background: transparent; + } + } + + + @include e(label) { + color: $-dark-color; + } + } +} + +@include b(input) { + position: relative; + -webkit-tap-highlight-color: transparent; + text-align: left; + background: $-input-bg; + + &::after { + position: absolute; + content: ""; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: $-input-border-color; + transform: scaleY(0.5); + transition: background-color 0.2s ease-in-out; + } + + @include when(not-empty) { + &:not(.is-disabled) { + &::after { + background-color: $-input-not-empty-border-color; + } + } + } + + @include e(label) { + position: relative; + width: $-input-cell-label-width; + color: $-cell-title-color; + margin-right: $-cell-padding; + box-sizing: border-box; + font-size: $-input-fs; + flex-shrink: 0; + + @include when(required) { + padding-left: 12px; + + &::after { + position: absolute; + left: 0; + top: 2px; + content: "*"; + font-size: $-cell-required-size; + line-height: 1.1; + color: $-cell-required-color; + } + } + } + + @include e(label-inner) { + display: inline-block; + font-size: $-input-fs; + line-height: $-cell-line-height; + } + + @include e(body) { + flex: 1; + } + + @include e(value) { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + } + + + @include e(prefix) { + margin-right: $-input-icon-margin; + font-size: $-input-fs; + + :deep(.wd-input__icon), + :deep(.wd-input__clear) { + margin-left: 0; + } + } + + @include e(suffix) { + flex-shrink: 0; + margin-left: $-input-icon-margin; + line-height: initial; + } + + @include e(error-message){ + color: $-form-item-error-message-color; + font-size: $-form-item-error-message-font-size; + line-height: $-form-item-error-message-line-height; + text-align: left; + vertical-align: middle; + } + + @include when(disabled) { + + .wd-input__inner { + color: $-input-disabled-color; + background: transparent; + } + } + + @include when(error) { + + .wd-input__inner { + color: $-input-error-color; + background: transparent; + } + } + + @include when(no-border) { + &::after { + display: none; + } + + .wd-input__inner { + height: $-input-inner-height-no-border; + padding-top: 0; + padding-bottom: 0; + } + } + + @include when(cell) { + display: flex; + align-items: flex-start; + padding: $-input-cell-padding $-input-padding; + background-color: $-input-cell-bg; + + &.is-error::after { + background: $-input-cell-border-color; + } + + :deep(.wd-input__icon), + :deep(.wd-input__clear) { + height: $-input-cell-height; + line-height: $-input-cell-height; + } + + .wd-input__prefix { + display: inline-block; + margin-right: $-cell-icon-right; + } + + .wd-input__inner { + height: $-input-cell-height; + } + + &.wd-input::after { + display: none; + } + + + @include when(center) { + align-items: center; + } + + @include when(border) { + @include halfPixelBorder("top", $-input-cell-padding); + } + } + + @include when(large) { + padding: $-input-cell-padding-large; + + .wd-input__prefix { + font-size: $-input-fs-large; + } + + .wd-input__label-inner { + font-size: $-input-fs-large; + } + + .wd-input__inner { + font-size: $-input-fs-large; + } + + + .wd-input__count { + font-size: $-input-count-fs-large; + } + + :deep(.wd-input__icon), + :deep(.wd-input__clear) { + font-size: $-input-icon-size-large; + } + + } + + + @include e(inner) { + flex: 1; + height: $-input-inner-height; + font-size: $-input-fs; + color: $-input-color; + outline: none; + border: none; + padding: 0; + box-sizing: border-box; + + &::-webkit-input-placeholder { + color: $-input-placeholder-color; + } + + @include when(align-right) { + text-align: right; + } + } + + @include e(readonly-mask) { + position: absolute; + top: 0; + left: 0; + z-index: 2; + width: 100%; + height: 100%; + } + + + @include edeep(icon) { + margin-left: $-input-icon-margin; + font-size: $-input-icon-size; + color: $-input-icon-color; + vertical-align: middle; + background: $-input-bg; + } + + @include edeep(clear) { + margin-left: $-input-icon-margin; + font-size: $-input-icon-size; + color: $-input-clear-color; + vertical-align: middle; + background: $-input-bg; + } + + @include e(count) { + margin-left: 15px; + font-size: $-input-count-fs; + color: $-input-count-color; + vertical-align: middle; + background: $-input-bg; + } + + @include e(count-current) { + color: $-input-count-current-color; + + @include when(error) { + color: $-input-error-color; + } + } + + + @include e(placeholder) { + color: $-input-placeholder-color; + + &.is-error { + color: $-input-error-color; + } + } + + .wd-input__count, + .wd-input__count-current { + display: inline-flex; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-input/wd-input.vue b/uni_modules/wot-design-uni/components/wd-input/wd-input.vue new file mode 100644 index 0000000..86d03ba --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-input/wd-input.vue @@ -0,0 +1,347 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-loading/index.scss b/uni_modules/wot-design-uni/components/wd-loading/index.scss new file mode 100644 index 0000000..32885eb --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-loading/index.scss @@ -0,0 +1,35 @@ +@import "../common/abstracts/_mixin.scss"; +@import "../common/abstracts/variable.scss"; + +@include b(loading) { + font-size: 0; + line-height: 0; + vertical-align: middle; + display: inline-block; + + @include e(body) { + width: 100%; + height: 100%; + animation: wd-rotate 0.8s linear infinite; + animation-duration: 2s; + + } + @include e(svg) { + width: 100%; + height: 100%; + background-size: cover; + background-repeat: no-repeat; + } +} + +@keyframes wd-rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + + diff --git a/uni_modules/wot-design-uni/components/wd-loading/type.ts b/uni_modules/wot-design-uni/components/wd-loading/type.ts new file mode 100644 index 0000000..45347a2 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-loading/type.ts @@ -0,0 +1,2 @@ +// 'circle-outline' | 'circle-ring' 废弃 +export type LoadingType = 'outline' | 'ring' | 'circle-outline' | 'circle-ring' // 提示信息加载状态类型 diff --git a/uni_modules/wot-design-uni/components/wd-loading/wd-loading.vue b/uni_modules/wot-design-uni/components/wd-loading/wd-loading.vue new file mode 100644 index 0000000..6ebb0b9 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-loading/wd-loading.vue @@ -0,0 +1,122 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-loadmore/index.scss b/uni_modules/wot-design-uni/components/wd-loadmore/index.scss new file mode 100644 index 0000000..ebae2d8 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-loadmore/index.scss @@ -0,0 +1,36 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; +.wot-theme-dark { + @include b(loadmore) { + color: $-dark-color; + } +} + +@include b(loadmore) { + width: 100%; + height: $-loadmore-height; + line-height: $-loadmore-height; + text-align: center; + color: $-loadmore-color; + + @include edeep(loading) { + display: inline-block; + margin-right: 8px; + vertical-align: middle; + } + @include e(text) { + display: inline-block; + font-size: $-loadmore-fs; + vertical-align: middle; + + @include when(light) { + margin: 0 6px; + color: $-loadmore-error-color; + } + } + @include edeep(refresh) { + display: inline-block; + color: $-loadmore-error-color; + vertical-align: middle; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-loadmore/wd-loadmore.vue b/uni_modules/wot-design-uni/components/wd-loadmore/wd-loadmore.vue new file mode 100644 index 0000000..58a04f0 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-loadmore/wd-loadmore.vue @@ -0,0 +1,89 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-message-box/index.scss b/uni_modules/wot-design-uni/components/wd-message-box/index.scss new file mode 100644 index 0000000..46ba651 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-message-box/index.scss @@ -0,0 +1,122 @@ +@import "../common/abstracts/variable.scss"; +@import "../common/abstracts/_mixin.scss"; + +.wot-theme-dark { + @include bdeep(message-box) { + @include e(body) { + background-color: $-dark-background2; + } + + @include e(title) { + color: $-dark-color; + } + + @include e(content) { + color: $-dark-color3; + + &::-webkit-scrollbar-thumb { + background: $-dark-border-color; + } + } + } +} + +:deep(.wd-message-box){ + border-radius: $-message-box-radius; + overflow: hidden; +} + +@include bdeep(message-box) { + border-radius: $-message-box-radius; + overflow: hidden; + + @include e(container) { + width: $-message-box-width; + box-sizing: border-box; + } + + @include e(body) { + background-color: $-message-box-bg; + padding: $-message-box-padding; + + @include when(no-title) { + padding: 25px 24px 0px; + } + } + + @include e(title) { + text-align: center; + font-size: $-message-box-title-fs; + color: $-message-box-title-color; + line-height: 20px; + font-weight: 500; + padding-top: 5px; + padding-bottom: 10px; + } + + @include e(content) { + max-height: $-message-box-content-max-height; + color: $-message-box-content-color; + font-size: $-message-box-content-fs; + text-align: center; + overflow: auto; + word-break: break-all; + line-height: 20px; + + &::-webkit-scrollbar { + width: $-message-box-content-scrollbar-width; + } + + &::-webkit-scrollbar-thumb { + width: $-message-box-content-scrollbar-width; + background: $-message-box-content-scrollbar-color; + border-radius: calc($-message-box-content-scrollbar-width / 2); + } + } + + @include e(input-error) { + min-height: 18px; + margin-top: 2px; + color: $-message-box-input-error-color; + text-align: left; + + @include when(hidden) { + visibility: hidden; + } + } + + @include e(actions) { + padding: 24px; + } + + @include e(flex) { + display: flex; + } + + @include e(block) { + display: block; + } + + @include e(cancel) { + margin-right: 16px; + } +} + +.zoomIn-enter-active, +.zoomIn-leave-active { + opacity: 1; + transform: translate3d(-50%, -50%, 0) scale(1); + transition: all .2s; +} + +.zoomIn-enter { + opacity: 0; + transform: translate3d(-50%, -50%, 0) scale(0.7); + transition: all .2s ease-out; +} + +.zoomIn-leave-to { + opacity: 0; + transform: translate3d(-50%, -50%, 0) scale(0.9); + transition: all .2s ease-out; +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-message-box/index.ts b/uni_modules/wot-design-uni/components/wd-message-box/index.ts new file mode 100644 index 0000000..fbfae0b --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-message-box/index.ts @@ -0,0 +1,92 @@ +/* + * @Author: weisheng + * @Date: 2022-12-14 17:33:21 + * @LastEditTime: 2023-09-07 00:29:51 + * @LastEditors: weisheng + * @Description: + * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-message-box\index.ts + * 记得注释 + */ +import { provide, ref } from 'vue' +import type { Message, MessageOptions, MessageResult, MessageType } from './types' +import { deepMerge } from '../common/util' + +/** + * useMessage 用到的key + * + * @internal + */ +export const messageDefaultOptionKey = '__MESSAGE_OPTION__' + +// 默认模板 +export const defaultOptions: MessageOptions = { + title: '', + showCancelButton: false, + show: false, + closeOnClickModal: true, + confirmButtonText: '确定', + cancelButtonText: '取消', + msg: '', + type: 'alert', + inputType: 'text', + inputValue: '', + inputPlaceholder: '请输入', + inputValidate: null, + showErr: false, + zIndex: 99, + lazyRender: true, + inputError: '' +} + +export function useMessage(selector: string = ''): Message { + const messageOption = ref(defaultOptions) // Message选项 + const messageOptionKey = selector ? messageDefaultOptionKey + selector : messageDefaultOptionKey + provide(messageOptionKey, messageOption) + + const createMethod = (type: MessageType) => { + // 优先级:options->toastOptions->defaultOptions + return (options: MessageOptions | string) => { + const messageOptions = deepMerge({ type: type }, typeof options === 'string' ? { title: options } : options) as MessageOptions + if (messageOptions.type === 'confirm' || messageOptions.type === 'prompt') { + messageOptions.showCancelButton = true + } else { + messageOptions.showCancelButton = false + } + return show(messageOptions) + } + } + + const show = (option: MessageOptions | string) => { + // 返回一个promise + return new Promise((resolve, reject) => { + const options = deepMerge(defaultOptions, typeof option === 'string' ? { title: option } : option) as MessageOptions + messageOption.value = deepMerge(options, { + show: true, + onConfirm: (res: MessageResult) => { + resolve(res) + }, + onCancel: (res: MessageResult) => { + reject(res) + } + }) as MessageOptions + }) + } + + // 打开Alert 弹框 + const alert = createMethod('alert') + // 打开Confirm 弹框 + const confirm = createMethod('confirm') + // 打开Prompt 弹框 + const prompt = createMethod('prompt') + + const close = () => { + messageOption.value = { ...defaultOptions } + } + return { + show, + alert, + confirm, + prompt, + close + } +} diff --git a/uni_modules/wot-design-uni/components/wd-message-box/types.ts b/uni_modules/wot-design-uni/components/wd-message-box/types.ts new file mode 100644 index 0000000..ea7e230 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-message-box/types.ts @@ -0,0 +1,88 @@ +export type MessageType = 'alert' | 'confirm' | 'prompt' + +export type MessageOptions = { + /** + * 标题 + */ + title?: string + /** + * 是否展示取消按钮 + */ + showCancelButton?: boolean + + show?: boolean + /** + * 是否支持点击蒙层进行关闭,点击蒙层回调传入的action为'modal' + */ + closeOnClickModal?: boolean + /** + * 确定按钮文案 + */ + confirmButtonText?: string + /** + * 取消按钮文案 + */ + cancelButtonText?: string + /** + * 消息文案 + */ + msg?: string + /** + * 弹框类型 + */ + type?: MessageType + /** + * 当type为prompt时,输入框类型 + */ + inputType?: string + /** + * 当type为prompt时,输入框初始值 + */ + inputValue?: string | number + /** + * 当type为prompt时,输入框placeholder + */ + inputPlaceholder?: string + /** + * 当type为prompt时,输入框正则校验,点击确定按钮时进行校验 + */ + inputPattern?: RegExp + /** + * 当type为prompt时,输入框校验函数,点击确定按钮时进行校验 + */ + // eslint-disable-next-line @typescript-eslint/ban-types + inputValidate?: Function | null + /** + * 当type为prompt时,输入框检验不通过时的错误提示文案 + */ + inputError?: string + showErr?: boolean + /** + * 弹窗层级 + */ + zIndex?: number + /** + * 弹层内容懒渲染,触发展示时才渲染内容 + */ + lazyRender?: boolean +} + +export type ActionType = 'confirm' | 'cancel' | 'modal' + +export interface MessageResult { + action: ActionType + value?: string | number +} + +export interface Message { + // 打开Message + show(toastOptions: MessageOptions | string): Promise + // 打开Alert 弹框 + alert(toastOptions: MessageOptions | string): Promise + // 打开Confirm 弹框 + confirm(toastOptions: MessageOptions | string): Promise + // 打开Prompt 弹框 + prompt(toastOptions: MessageOptions | string): Promise + // 关闭Message + close(): void +} diff --git a/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue b/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue new file mode 100644 index 0000000..a9acc67 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue @@ -0,0 +1,291 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-navbar-capsule/index.scss b/uni_modules/wot-design-uni/components/wd-navbar-capsule/index.scss new file mode 100644 index 0000000..2fc79cd --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-navbar-capsule/index.scss @@ -0,0 +1,65 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +.wot-theme-dark { + @include b(navbar-capsule) { + &::before { + border: 2rpx solid $-dark-border-color; + } + + &::after { + background: $-dark-border-color; + } + + :deep(.wd-navbar-capsule__icon) { + color: $-dark-color; + } + } +} + + +@include b(navbar-capsule) { + position: relative; + box-sizing: border-box; + width: $-navbar-capsule-width; + height: $-navbar-capsule-height; + display: flex; + align-items: center; + justify-content: center; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 200%; + height: 200%; + transform: scale(0.5); + transform-origin: 0 0; + box-sizing: border-box; + border-radius: calc($-navbar-capsule-border-radius * 2); + border: 2rpx solid $-navbar-capsule-border-color; + } + + &::after { + content: ''; + display: block; + position: absolute; + left: 50%; + top: 50%; + transform: translateY(-50%); + width: 1px; + height: 36rpx; + background: $-navbar-capsule-border-color; + } + + &:empty { + display: none; + } + + @include edeep(icon) { + flex: 1; + position: relative; + color: $-navbar-desc-font-color; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-navbar-capsule/wd-navbar-capsule.vue b/uni_modules/wot-design-uni/components/wd-navbar-capsule/wd-navbar-capsule.vue new file mode 100644 index 0000000..36e0069 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-navbar-capsule/wd-navbar-capsule.vue @@ -0,0 +1,31 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-navbar/index.scss b/uni_modules/wot-design-uni/components/wd-navbar/index.scss new file mode 100644 index 0000000..0d646ff --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-navbar/index.scss @@ -0,0 +1,104 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +.wot-theme-dark { + @include b(navbar) { + background-color: $-dark-background; + + @include e(title) { + color: $-dark-color; + } + + @include e(text) { + color: $-dark-color; + @include m(hover){ + background-color: $-dark-background3; + } + } + + :deep(.wd-navbar__arrow) { + color: $-dark-color; + } + } +} + + +@include b(navbar) { + position: relative; + text-align: center; + user-select: none; + height: $-navbar-height; + line-height: $-navbar-height; + background-color: $-navbar-background; + box-sizing: content-box; + + @include e(content) { + position: relative; + height: 100%; + width: 100%; + } + + @include e(title) { + max-width: 60%; + height: 100%; + margin: 0 auto; + color: $-navbar-color; + font-weight: $-navbar-title-font-weight; + font-size: $-navbar-title-font-size; + @include lineEllipsis(); + } + + @include e(text) { + display: inline-block; + vertical-align: middle; + color: $-navbar-desc-font-color; + } + + @include e(left, right, capsule) { + position: absolute; + top: 0; + bottom: 0; + font-size: $-navbar-desc-font-size; + display: flex; + align-items: center; + padding: 0 12px; + + @include when(disabled) { + opacity: $-navbar-disabled-opacity; + } + } + + @include e(left, capsule) { + left: 0; + } + + @include e(left) { + @include m(hover){ + background-color: $-navbar-hover-color; + } + } + + @include e(right) { + right: 0; + @include m(hover){ + background-color: $-navbar-hover-color; + } + } + + @include edeep(arrow) { + font-size: $-navbar-arrow-size; + color: $-navbar-color; + } + + @include when(fixed) { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 500; + } + + @include when(border) { + @include halfPixelBorder('bottom'); + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-navbar/wd-navbar.vue b/uni_modules/wot-design-uni/components/wd-navbar/wd-navbar.vue new file mode 100644 index 0000000..c44d419 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-navbar/wd-navbar.vue @@ -0,0 +1,160 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-notice-bar/index.scss b/uni_modules/wot-design-uni/components/wd-notice-bar/index.scss new file mode 100644 index 0000000..80494bc --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-notice-bar/index.scss @@ -0,0 +1,93 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +@include b(notice-bar) { + display: flex; + padding: $-notice-bar-padding; + align-items: center; + font-size: $-notice-bar-fs; + border-radius: $-notice-bar-border-radius; + position: relative; + box-sizing: border-box; + @include when(warning) { + background: $-notice-bar-warning-bg; + color: $-notice-bar-warning-color; + } + @include when(info) { + background: $-notice-bar-info-bg; + color: $-notice-bar-info-color; + } + @include when(danger) { + background: $-notice-bar-danger-bg; + color: $-notice-bar-danger-color; + } + @include edeep(prefix) { + padding-right: 4px; + width: $-notice-bar-prefix-size; + height: $-notice-bar-prefix-size; + line-height: $-notice-bar-prefix-size; + } + + + + @include edeep(suffix) { + text-align: center; + width: $-notice-bar-close-size; + height: $-notice-bar-close-size; + line-height: $-notice-bar-close-size; + display: inline-block; + background-color: $-notice-bar-close-bg; + color: $-notice-bar-close-color; + padding: 0; + border-radius: 0px 8px 0px 4px; + position: absolute; + right: 0; + top: 0; + } + @include e(wrap) { + position: relative; + flex: 1; + height: $-notice-bar-line-height; + overflow: hidden; + line-height: $-notice-bar-line-height; + } + @include e(content) { + position: absolute; + white-space: nowrap; + + @include m(play) { + animation: notice-bar-play linear both; + } + @include m(play-infinite) { + animation: notice-bar-play-infinite linear infinite both; + } + } + @include m(ellipse) { + .wd-notice-bar__content { + position: static; + @include lineEllipsis; + } + } + @include m(wrap) { + + .wd-notice-bar__wrap { + height: auto; + } + .wd-notice-bar__content { + position: static; + white-space: normal; + } + } +} + +@keyframes notice-bar-play { + 100% { + transform: translate3d(-100%, 0, 0); + } +} + +@keyframes notice-bar-play-infinite { + 100% { + transform: translate3d(-100%, 0, 0); + } +} diff --git a/uni_modules/wot-design-uni/components/wd-notice-bar/wd-notice-bar.vue b/uni_modules/wot-design-uni/components/wd-notice-bar/wd-notice-bar.vue new file mode 100644 index 0000000..a17da03 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-notice-bar/wd-notice-bar.vue @@ -0,0 +1,144 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-notify/index.scss b/uni_modules/wot-design-uni/components/wd-notify/index.scss new file mode 100644 index 0000000..5df8f4d --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-notify/index.scss @@ -0,0 +1,34 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +@include b(notify) { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + padding: $-notify-padding; + font-size: $-notify-font-size; + line-height: $-notify-line-height; + color: $-notify-text-color; + + // allow newline character + white-space: pre-wrap; + text-align: center; + word-wrap: break-word; + + @include m(primary) { + background: $-notify-primary-background; + } + + @include m(success) { + background: $-notify-success-background; + } + + @include m(danger) { + background: $-notify-danger-background; + } + + @include m(warning) { + background: $-notify-warning-background; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-notify/index.ts b/uni_modules/wot-design-uni/components/wd-notify/index.ts new file mode 100644 index 0000000..86bdcde --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-notify/index.ts @@ -0,0 +1,56 @@ +import { provide, reactive } from 'vue' +import type { NotifyProps } from './type' +import { deepMerge, isString } from '../common/util' + +let timer: ReturnType +let currentOptions = getDefaultOptions() +const notifyDefaultOptionKey = '__NOTIFY_OPTION__' +export const setNotifyDefaultOptions = (options: NotifyProps) => { + currentOptions = deepMerge(currentOptions, options) as NotifyProps +} +export const resetNotifyDefaultOptions = () => { + currentOptions = getDefaultOptions() +} +export const useNotify = (selector: string = '') => { + const notifyOption = reactive(currentOptions) + const showNotify = (option: NotifyProps | string) => { + const options = deepMerge(currentOptions, isString(option) ? { message: option } : option) as NotifyProps + + Object.assign(notifyOption, options, { visible: true }) + if (notifyOption.duration && notifyOption.duration > 0) { + timer && clearTimeout(timer) + timer = setTimeout(() => closeNotify(), options.duration) + } + } + const closeNotify = () => { + timer && clearTimeout(timer) + notifyOption.visible = false + } + + // provide + provide(getNotifyOptionKey(selector), notifyOption) + + return { + showNotify, + closeNotify + } +} +export const getNotifyOptionKey = (selector: string) => { + return selector ? `${notifyDefaultOptionKey}${selector}` : notifyDefaultOptionKey +} + +function getDefaultOptions(): NotifyProps { + return { + type: 'danger', + color: undefined, + zIndex: 99, + message: '', + duration: 3000, + position: 'top', + safeHeight: undefined, + background: undefined, + onClick: undefined, + onClosed: undefined, + onOpened: undefined + } +} diff --git a/uni_modules/wot-design-uni/components/wd-notify/type.ts b/uni_modules/wot-design-uni/components/wd-notify/type.ts new file mode 100644 index 0000000..84db4e5 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-notify/type.ts @@ -0,0 +1,91 @@ +import type { PropType, ExtractPropTypes } from 'vue' + +export type NotifyMessage = string | number +export type NotifyType = 'primary' | 'success' | 'danger' | 'warning' +export type NotifyPosition = 'top' | 'bottom' +export type NotifyProps = Omit>, 'selector'> & { + onClick?: (event: MouseEvent) => void + onClosed?: () => void + onOpened?: () => void +} +export type NotifyThemeVars = { + notifyPadding?: string + notifyFontSize?: string + notifyTextColor?: string + notifyLineHeight?: number | string + notifyDangerBackground?: string + notifyPrimaryBackground?: string + notifySuccessBackground?: string + notifyWarningBackground?: string +} +export const notifyProps = { + /** + * 类型,可选值为 primary success danger warning + */ + type: { + type: String as PropType, + default: 'danger' + }, + /** + * 字体颜色 + */ + color: { + type: String, + default: '' + }, + /** + * 将组件的 z-index 层级设置为一个固定值 + */ + zIndex: { + type: Number, + default: 99 + }, + /** + * 显示 + */ + visible: { + type: Boolean, + default: false + }, + /** + * 展示文案,支持通过\n换行 + */ + message: { + type: [Number, String] as PropType, + default: '' + }, + /** + * 指定唯一标识 + */ + selector: { + type: String, + default: '' + }, + /** + * 展示时长(ms),值为 0 时,notify 不会消失 + */ + duration: { + type: Number, + default: 3000 + }, + /** + * 弹出位置,可选值为 top bottom + */ + position: { + type: String as PropType, + default: 'top' + }, + /** + * 顶部安全高度( + */ + safeHeight: { + type: Number + }, + /** + * 背景颜色 + */ + background: { + type: String, + default: '' + } +} diff --git a/uni_modules/wot-design-uni/components/wd-notify/wd-notify.vue b/uni_modules/wot-design-uni/components/wd-notify/wd-notify.vue new file mode 100644 index 0000000..f74d479 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-notify/wd-notify.vue @@ -0,0 +1,78 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-number-keyboard/index.scss b/uni_modules/wot-design-uni/components/wd-number-keyboard/index.scss new file mode 100644 index 0000000..51ad061 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-number-keyboard/index.scss @@ -0,0 +1,72 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +.wot-theme-dark { + @include b(number-keyboard) { + } +} + +@include b(number-keyboard) { + width: 100%; + background: $-number-keyboard-background; + user-select: none; + + @include m(with-title) { + border-radius: 20px 20px 0 0; + } + + @include e(header) { + position: relative; + display: flex; + align-items: center; + justify-content: center; + box-sizing: content-box; + height: $-number-keyboard-title-height; + padding-top: 6px; + color: $-number-keyboard-title-color; + font-size: $-number-keyboard-title-font-size; + } + + @include e(title) { + display: inline-block; + font-weight: normal; + + &-left { + position: absolute; + left: 0; + } + } + + @include e(body) { + display: flex; + padding: 6px 0 0 6px; + } + + @include e(keys) { + display: flex; + flex: 3; + flex-wrap: wrap; + } + + @include e(close) { + position: absolute; + display: flex; + align-items: center; + right: 0; + height: 100%; + padding: $-number-keyboard-close-padding; + color: $-number-keyboard-close-color; + font-size: $-number-keyboard-close-font-size; + background-color: transparent; + border: none; + @include m(hover){ + opacity: 0.6; + } + } + + @include e(sidebar) { + display: flex; + flex: 1; + flex-direction: column; + } +} diff --git a/uni_modules/wot-design-uni/components/wd-number-keyboard/key/index.scss b/uni_modules/wot-design-uni/components/wd-number-keyboard/key/index.scss new file mode 100644 index 0000000..0bdef55 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-number-keyboard/key/index.scss @@ -0,0 +1,63 @@ +@import "./../../common/abstracts/_mixin.scss"; +@import "./../../common/abstracts/variable.scss"; + +.wot-theme-dark { + @include b(key) {} +} + +.wd-key-wrapper { + position: relative; + flex: 1; + flex-basis: 33%; + box-sizing: border-box; + padding: 0 6px 6px 0; + + @include m(wider){ + flex-basis: 66%; + } +} + +@include b(key) { + display: flex; + align-items: center; + justify-content: center; + height: $-number-keyboard-key-height; + font-size: $-number-keyboard-key-font-size; + line-height: 1.5; + background: $-number-keyboard-key-background; + border-radius: $-number-keyboard-key-border-radius; + &:active{ + background-color: $-number-keyboard-key-active-color; + } + + @include m(large) { + position: absolute; + top: 0; + right: 6px; + bottom: 6px; + left: 0; + height: auto; + } + + @include m(delete,close) { + font-size: $-number-keyboard-delete-font-size; + } + + @include m(active) { + background-color: $-number-keyboard-key-active-color; + } + + @include m(close) { + color: $-number-keyboard-button-text-color; + background: $-number-keyboard-button-background; + + &:active{ + background: $-number-keyboard-button-background; + opacity: $-number-keyboard-button-active-opacity; + } + } + + @include edeep(loading-icon) { + color: $-number-keyboard-button-text-color; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-number-keyboard/key/index.vue b/uni_modules/wot-design-uni/components/wd-number-keyboard/key/index.vue new file mode 100644 index 0000000..dc16c84 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-number-keyboard/key/index.vue @@ -0,0 +1,87 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-number-keyboard/wd-number-keyboard.vue b/uni_modules/wot-design-uni/components/wd-number-keyboard/wd-number-keyboard.vue new file mode 100644 index 0000000..54cf0b9 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-number-keyboard/wd-number-keyboard.vue @@ -0,0 +1,206 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-overlay/index.scss b/uni_modules/wot-design-uni/components/wd-overlay/index.scss new file mode 100644 index 0000000..6786cb9 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-overlay/index.scss @@ -0,0 +1,17 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +.wot-theme-dark { + @include b(overlay) { + background: $-overlay-bg-dark; + } +} + +@include bdeep(overlay) { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + background: $-overlay-bg; +} diff --git a/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue b/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue new file mode 100644 index 0000000..974d481 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue @@ -0,0 +1,59 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-pagination/index.scss b/uni_modules/wot-design-uni/components/wd-pagination/index.scss new file mode 100644 index 0000000..7f9cfb1 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-pagination/index.scss @@ -0,0 +1,52 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +.wot-theme-dark { + @include b(pager) { + background-color: $-dark-background; + @include e(message) { + color: $-dark-color3; + } + } +} + +@include b(pager) { + user-select: none; + background-color: #fff; + @include e(content) { + display: flex; + justify-content: flex-start; + align-items: center; + padding: $-pagination-content-padding; + } + @include e(message) { + text-align: center; + color:$-pagination-message-color; + font-size: $-pagination-message-fs; + padding: $-pagination-message-padding; + } + @include edeep(nav) { + min-width: $-pagination-nav-width; + @include m(active){ + color: rgba(0,0,0,0.65) + } + @include m(disabled){ + color: rgba(0,0,0,0.15) + } + } + @include e(size){ + flex: 1; + text-align: center; + font-size: $-pagination-nav-content-fs; + } + @include e(separator){ + padding: $-pagination-nav-sepatator-padding; + } + @include edeep(left){ + transform: rotate(180deg) translateY(1px); + display: inline-block; + } + @include e(current){ + color: $-pagination-nav-current-color; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-pagination/wd-pagination.vue b/uni_modules/wot-design-uni/components/wd-pagination/wd-pagination.vue new file mode 100644 index 0000000..8948b21 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-pagination/wd-pagination.vue @@ -0,0 +1,132 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-password-input/index.scss b/uni_modules/wot-design-uni/components/wd-password-input/index.scss new file mode 100644 index 0000000..347bb00 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-password-input/index.scss @@ -0,0 +1,124 @@ +@import "../common/abstracts/variable"; +@import "../common/abstracts/mixin"; + +.wot-theme-dark { + @include b(password-input) { + @include e(item) { + color: $-dark-color; + background: $-dark-background2; + + @include when(border) { + border-color: $-dark-border-color; + } + } + + @include e(mask) { + background-color: $-dark-color; + } + + @include e(cursor) { + background-color: $-dark-color; + } + + @include e(info) { + color: $-dark-color; + + @include when(border) { + color: $-dark-color2; + } + } + } +} + +@include b(password-input) { + position: relative; + margin: 0 $-password-input-margin; + user-select: none; + + @include e(security) { + display: flex; + width: 100%; + height: $-password-input-height; + cursor: pointer; + } + + @include e(item) { + position: relative; + display: flex; + flex: 1; + align-items: center; + justify-content: center; + height: 100%; + color: $-password-input-text-color; + font-size: $-password-input-font-size; + line-height: 1.2; + background: $-password-input-background; + + @include when(border) { + border: 1px solid $-password-input-border-color; + + &:not(:last-child) { + border-right: none; + } + + &:first-child { + border-top-left-radius: $-password-input-radius; + border-bottom-left-radius: $-password-input-radius; + } + + &:last-child { + border-top-right-radius: $-password-input-radius; + border-bottom-right-radius: $-password-input-radius; + } + } + } + + @include e(mask) { + position: absolute; + top: 50%; + left: 50%; + width: $-password-input-dot-size; + height: $-password-input-dot-size; + background: $-password-input-dot-color; + border-radius: 100%; + transform: translate(-50%, -50%); + visibility: hidden; + } + + @include e(cursor) { + position: absolute; + top: 50%; + left: 50%; + width: $-password-input-cursor-width; + height: $-password-input-cursor-height; + background: $-password-input-cursor-color; + transform: translate(-50%, -50%); + animation: $-password-input-cursor-duration cursor-flicker infinite; + } + + @include e(info) { + margin-top: $-password-input-margin; + font-size: $-password-input-info-font-size; + text-align: center; + color: $-password-input-info-color; + + @include when(error) { + color: $-password-input-error-info-color; + } + + } +} + +@keyframes cursor-flicker { + from { + opacity: 0; + } + + 50% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-password-input/wd-password-input.vue b/uni_modules/wot-design-uni/components/wd-password-input/wd-password-input.vue new file mode 100644 index 0000000..47b3da0 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-password-input/wd-password-input.vue @@ -0,0 +1,66 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-picker-view/index.scss b/uni_modules/wot-design-uni/components/wd-picker-view/index.scss new file mode 100644 index 0000000..83d4aaf --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-picker-view/index.scss @@ -0,0 +1,92 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +.wot-theme-dark { + @include b(picker-view) { + @include e(columns) { + background: $-dark-background2; + } + + :deep(.wd-picker-view__roller) { + background: $-dark-background4; + } + } + + @include b(picker-view-column) { + color: $-dark-color; + + @include e(item) { + @include m(disabled) { + color: $-dark-color-gray; + } + } + } +} + + +@include b(picker-view) { + position: relative; + padding: 10px 0; + + @include e(columns) { + position: relative; + display: flex; + background: $-picker-bg; + overflow: hidden; + align-items: center; + } + + @include edeep(mask) { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: $-picker-mask; + background-position: top, bottom; + background-repeat: no-repeat; + z-index: 2; + pointer-events: none; + filter: blur(4px); + } + + @include e(loading) { + position: absolute; + display: flex; + top: 0; + right: 0; + bottom: 0; + left: 0; + align-items: center; + justify-content: center; + z-index: 3; + background: $-picker-loading-bg; + } + + @include edeep(roller) { + background: rgba(245, 245, 245, 1); + z-index: 0; + + &::before, + &::after { + display: none; + } + } +} + +@include b(picker-view-column) { + flex: 1; + font-size: $-picker-column-fs; + color: $-picker-column-color; + text-align: center; + transition-timing-function: cubic-bezier(0.28, 0.8, 0.63, 1); + + @include e(item) { + padding: $-picker-column-padding; + @include lineEllipsis; + + @include m(disabled) { + color: $-picker-column-disabled-color; + } + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-picker-view/type.ts b/uni_modules/wot-design-uni/components/wd-picker-view/type.ts new file mode 100644 index 0000000..b9d39fa --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-picker-view/type.ts @@ -0,0 +1,81 @@ +/* + * @Author: weisheng + * @Date: 2023-08-21 13:03:42 + * @LastEditTime: 2023-08-21 17:24:57 + * @LastEditors: weisheng + * @Description: + * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-picker-view\type.ts + * 记得注释 + */ + +import { getType } from '../common/util' + +export type ColumnItem = { + value?: string | number | boolean + label?: string + disabled?: boolean +} + +/** + * @description 为props的value为array类型时提供format + * @param {Array} array 列数组 + * @param {string} valueKey valueKey + * @param {string} labelKey labelKey + */ +export function formatArray(array: Array>, valueKey: string, labelKey: string) { + let tempArray: Array> = array instanceof Array ? array : [array] + // 检测第一层的type + const firstLevelTypeList = new Set(array.map(getType)) + /** + * 存在三种类型的合法数据 + * 1.数组是一维元素,所有元素都是原始值 + * 2.数组是一维元素,所有元素都是object + * 3.数组是二维元素,二维元素可以是任意内容 + */ + if (firstLevelTypeList.size !== 1 && firstLevelTypeList.has('object')) { + // 原始值和引用类型不用混用 + throw Error('The columns are correct') + } + /** + * 数组的所有一维子元素都不是array,说明是它是一个一维数组 + * 所以需要把一维的转成二维,这样方便统一处理 + */ + if (!(array[0] instanceof Array)) { + tempArray = [tempArray as Array] + } + // 经过上述处理,都已经变成了二维数组,再把每一项二维元素包装成object + const result: Array> = (tempArray as Array>).map((col) => { + return col.map((row) => { + const isObj = getType(row) + /* 针对原始值,包装成{valueKey,labelKey} */ + if (isObj !== 'object') { + return { + [valueKey]: row, + [labelKey]: row + } + } + /** + * 针对已经是object的,修补成{valueKey,labelKey} + * 如果没有labelKey,用valueKey代替 + * 如果没有valueKey,用labelKey代替 + * valueKey,labelKey都没有,直接抛错 + */ + // eslint-disable-next-line no-prototype-builtins + if (!row.hasOwnProperty(valueKey) && !row.hasOwnProperty(labelKey)) { + // eslint-disable-next-line prettier/prettier + throw Error('Can\'t find valueKey and labelKey in columns') + } + // eslint-disable-next-line no-prototype-builtins + if (!row.hasOwnProperty(labelKey)) { + row[labelKey] = row[valueKey] + } + // eslint-disable-next-line no-prototype-builtins + if (!row.hasOwnProperty(valueKey)) { + row[valueKey] = row[labelKey] + } + return row as ColumnItem + }) + }) + + return result +} diff --git a/uni_modules/wot-design-uni/components/wd-picker-view/wd-picker-view.vue b/uni_modules/wot-design-uni/components/wd-picker-view/wd-picker-view.vue new file mode 100644 index 0000000..542b827 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-picker-view/wd-picker-view.vue @@ -0,0 +1,409 @@ + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-picker/index.scss b/uni_modules/wot-design-uni/components/wd-picker/index.scss new file mode 100644 index 0000000..d98f386 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-picker/index.scss @@ -0,0 +1,215 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + + +.wot-theme-dark { + @include b(picker) { + @include when(border) { + .wd-picker__cell { + @include halfPixelBorder('top', $-cell-padding, $-dark-border-color); + } + } + + + @include e(label) { + color: $-dark-color; + } + @include e(value) { + color: $-dark-color; + } + + @include e(placeholder) { + color: $-dark-color-gray; + } + + :deep(.wd-picker__arrow){ + color: $-dark-color; + } + + @include e(cell) { + background-color: $-dark-background2; + color: $-dark-color; + @include when(disabled) { + .wd-picker__value { + color: $-dark-color3; + } + .wd-picker__placeholder { + color: $-dark-color-gray; + } + } + } + + @include when(disabled) { + .wd-picker__value { + color: $-dark-color3; + } + + .wd-picker__placeholder { + color: $-dark-color-gray; + } + } + + @include e(action) { + @include m(cancel) { + color: $-dark-color; + } + @include when(loading) { + color: $-dark-color3; + } + } + } +} + + +@include b(picker) { + @include edeep(popup) { + border-radius: 16px 16px 0px 0px; + } + + @include when(border) { + .wd-picker__cell { + @include halfPixelBorder('top', $-cell-padding); + } + } + @include when(large) { + .wd-picker__cell { + font-size: $-cell-title-fs-large; + } + :deep(.wd-picker__arrow) { + font-size: $-cell-icon-size-large; + } + } + @include when(error) { + .wd-picker__value, + :deep(.wd-picker__arrow) { + color: $-input-error-color; + } + } + @include when(align-right) { + .wd-picker__value { + text-align: right; + } + } + @include e(cell) { + position: relative; + display: flex; + padding: $-cell-wrapper-padding $-cell-padding; + align-items: flex-start; + background-color: $-color-white; + text-decoration: none; + color: $-cell-title-color; + font-size: $-cell-title-fs; + overflow: hidden; + line-height: $-cell-line-height; + + @include when(disabled) { + .wd-picker__value { + color: $-input-disabled-color; + } + } + } + + @include when(disabled) { + .wd-picker__value { + color: $-picker-column-disabled-color; + } + } + + @include e(error-message){ + color: $-form-item-error-message-color; + font-size: $-form-item-error-message-font-size; + line-height: $-form-item-error-message-line-height; + text-align: left; + vertical-align: middle; + } + + @include e(label) { + position: relative; + width: $-input-cell-label-width; + margin-right: $-cell-padding; + color: $-cell-title-color; + box-sizing: border-box; + + @include when(required) { + padding-left: 12px; + + &::after { + position: absolute; + left: 0; + top: 2px; + content: '*'; + font-size: $-cell-required-size; + line-height: 1.1; + color: $-cell-required-color; + } + } + } + + @include e(value-wraper) { + display: flex; + } + + @include e(value) { + flex: 1; + margin-right: 10px; + color: $-cell-value-color; + + @include when(ellipsis) { + @include lineEllipsis; + } + } + + @include e(body) { + flex: 1; + } + + @include e(placeholder) { + color: $-input-placeholder-color; + } + + @include edeep(arrow) { + display: block; + font-size: $-cell-icon-size; + color: $-cell-arrow-color; + line-height: $-cell-line-height; + } + + @include e(wraper) { + padding-bottom: var(--window-bottom); + } + + @include e(toolbar) { + position: relative; + display: flex; + font-size: $-picker-toolbar-fs; + height: $-picker-toolbar-height; + line-height: $-picker-action-height; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + } + + @include e(action) { + display: block; + border: none; + outline: none; + font-size: $-picker-toolbar-fs; + color: $-picker-toolbar-finish-color; + background: transparent; + padding: 24px 15px 14px 15px; + + @include m(cancel) { + color: $-picker-toolbar-cancel-color; + } + + @include when(loading) { + color: $-picker-loading-button-color; + } + } + @include e(title) { + display: block; + padding-top: 10px; + color: $-picker-toolbar-title-color; + font-weight: $-action-sheet-weight; + } +} diff --git a/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue b/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue new file mode 100644 index 0000000..cb9fef3 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue @@ -0,0 +1,490 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-popover/index.scss b/uni_modules/wot-design-uni/components/wd-popover/index.scss new file mode 100644 index 0000000..6d6e1f7 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-popover/index.scss @@ -0,0 +1,116 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +.wot-theme-dark { + @include b(popover) { + + @include e(pos) { + background: rgb(75, 76, 77); + color: $-dark-color; + box-shadow: 0px 2px 10px 0px rgba(75, 76, 77, 0.1); + } + + @include e(menu) { + background: rgb(75, 76, 77); + } + + @include e(inner) { + background-color: rgb(75, 76, 77); + } + + @include e(menu-inner) { + + @include halfPixelBorder("top", 0, $-dark-border-color); + } + + @include squareArrow($-popover-arrow-size, rgb(75, 76, 77), $-popover-z-index - 1, $-popover-arrow-box-shadow); + + } +} + +@include b(popover) { + position: relative; + display: inline-block; + + @include edeep(icon) { + vertical-align: middle; + font-size: 18px; + margin-right: 5px; + } + + @include e(menu-inner) { + position: relative; + padding: $-popover-padding 0; + display: flex; + align-items: center; + + @include halfPixelBorder("top", 0, $-popover-border-color); + + &:first-child::after { + display: none; + } + } + + @include e(menu) { + display: inline-block; + padding: 0 $-popover-padding; + white-space: nowrap; + z-index: $-popover-z-index; + position: relative; + background: $-popover-bg; + border-radius: $-popover-radius; + } + + @include edeep(pos) { + position: absolute; + box-sizing: border-box; + background-clip: padding-box; + text-align: center; + min-height: 36px; + z-index: $-popover-z-index; + line-height: $-popover-line-height; + font-size: $-popover-fs; + border-radius: $-popover-radius; + transition: opacity 0.2s; + background: $-popover-bg; + box-shadow: $-popover-box-shadow; + color: $-popover-color; + } + + // @include edeep(transition) { + // position: relative; + // z-index: $-popover-z-index; + // } + + @include e(hidden) { + left: -100vw; + visibility: hidden; + } + + @include e(container) { + position: relative; + line-height: $-tooltip-line-height; + font-size: $-tooltip-fs; + } + + @include e(inner) { + position: relative; + white-space: nowrap; + padding: $-popover-padding; + line-height: $-popover-line-height; + z-index: $-popover-z-index; + background-color: $-popover-bg; + border-radius: $-popover-radius; + } + + @include edeep(close-icon) { + font-size: 12px; + position: absolute; + right: -8px; + top: -10px; + transform: scale(0.5); + padding: 10px; + } + + @include squareArrow($-popover-arrow-size, $-popover-bg, $-popover-z-index - 1, $-popover-arrow-box-shadow); +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-popover/wd-popover.vue b/uni_modules/wot-design-uni/components/wd-popover/wd-popover.vue new file mode 100644 index 0000000..3cc0020 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-popover/wd-popover.vue @@ -0,0 +1,202 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-popup/index.scss b/uni_modules/wot-design-uni/components/wd-popup/index.scss new file mode 100644 index 0000000..72f7229 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-popup/index.scss @@ -0,0 +1,112 @@ +@import './../common/abstracts/_mixin.scss'; +@import './../common/abstracts/variable.scss'; +@import '../wd-overlay/index.scss'; + +.wot-theme-dark { + @include b(popup) { + background: $-dark-background2; + + @include e(close) { + color: $-dark-color; + } + } +} + +@include b(popup) { + position: fixed; + max-height: 100%; + overflow-y: auto; + background: #fff; + + @include edeep(close) { + position: absolute; + top: 10px; + right: 10px; + color: $-popup-close-color; + font-size: $-popup-close-size; + transform: rotate(-45deg); + } + + @include m(center) { + left: 50%; + top: 50%; + transform: translate3d(-50%, -50%, 0); + } + + @include m(left) { + top: 0; + bottom: 0; + left: 0; + } + + @include m(right) { + top: 0; + right: 0; + bottom: 0; + } + + @include m(top) { + top: 0; + left: 0; + right: 0; + } + + @include m(bottom) { + right: 0; + bottom: 0; + left: 0; + } +} + +.wd-center-enter-active, +.wd-center-leave-active { + transition-property: opacity; +} + +.wd-center-enter, +.wd-center-leave-to { + opacity: 0; +} + +.wd-top-enter-active, +.wd-top-leave-active, +.wd-bottom-enter-active, +.wd-bottom-leave-active, +.wd-left-enter-active, +.wd-left-leave-active, +.wd-right-enter-active, +.wd-right-enter-active { + transition-property: transform; +} + +.wd-top-enter, +.wd-top-leave-to { + transform: translate3d(0, -100%, 0); +} + +.wd-bottom-enter, +.wd-bottom-leave-to { + transform: translate3d(0, 100%, 0); +} + +.wd-left-enter, +.wd-left-leave-to { + transform: translate3d(-100%, 0, 0); +} + +.wd-right-enter, +.wd-right-leave-to { + transform: translate3d(100%, 0, 0); +} + +.wd-zoom-in-enter-active, +.wd-zoom-in-leave-active { + transition-property: opacity, transform; + transform-origin: center center; +} + +.wd-zoom-in-enter, +.wd-zoom-in-leave-to { + opacity: 0; + transform: translate3d(-50%, -50%, 0) scale(0.7); +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-popup/type.ts b/uni_modules/wot-design-uni/components/wd-popup/type.ts new file mode 100644 index 0000000..2291597 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-popup/type.ts @@ -0,0 +1 @@ +export type PopupType = 'center' | 'top' | 'right' | 'bottom' | 'left' diff --git a/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue b/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue new file mode 100644 index 0000000..9736b4a --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue @@ -0,0 +1,246 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-progress/index.scss b/uni_modules/wot-design-uni/components/wd-progress/index.scss new file mode 100644 index 0000000..1229227 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-progress/index.scss @@ -0,0 +1,62 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +.wot-theme-dark { + @include b(progress) { + @include e(label) { + color: $-dark-color3; + } + } +} + +@include b(progress) { + width: 100%; + height: $-progress-height; + display: flex; + align-items: center; + padding: $-progress-padding; + + @include e(outer) { + display: block; + position: relative; + flex: 1; + height: $-progress-height; + border-radius: calc($-progress-height / 2); + background: $-progress-bg; + } + @include e(inner) { + display: block; + position: absolute; + top: 0; + left: 0; + height: 100%; + border-radius: calc($-progress-height / 2); + background: $-progress-color; + transition-property: width; + transition-timing-function: linear; + font-size: $-progress-icon-fs; + + @include when(danger) { + background: $-progress-linear-danger-color; + } + @include when(success) { + background: $-progress-linear-success-color; + } + } + @include edeep(label) { + width: 30px; + margin-left: 9px; + color: $-progress-label-color; + font-size: $-progress-label-fs; + } + @include edeep(icon) { + font-size: $-progress-icon-fs; + + @include when(danger) { + color: $-progress-danger-color; + } + @include when(success) { + color: $-progress-success-color; + } + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue b/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue new file mode 100644 index 0000000..92b974a --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue @@ -0,0 +1,207 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-radio-group/index.scss b/uni_modules/wot-design-uni/components/wd-radio-group/index.scss new file mode 100644 index 0000000..b21629c --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-radio-group/index.scss @@ -0,0 +1,23 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +.wot-theme-dark { + @include b(radio-group) { + background-color: $-dark-background2; + } +} + +@include b(radio-group) { + background-color: $-radio-bg; + font-size: 0; + + // 上下20px 左右15px 内部间隔12px + @include when(button) { + width: 100%; + height: 100%; + padding: 8px 3px 20px 15px; + box-sizing: border-box; + overflow: hidden; + height: auto; + } +} diff --git a/uni_modules/wot-design-uni/components/wd-radio-group/wd-radio-group.vue b/uni_modules/wot-design-uni/components/wd-radio-group/wd-radio-group.vue new file mode 100644 index 0000000..dbad6bc --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-radio-group/wd-radio-group.vue @@ -0,0 +1,119 @@ + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-radio/index.scss b/uni_modules/wot-design-uni/components/wd-radio/index.scss new file mode 100644 index 0000000..32ae110 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-radio/index.scss @@ -0,0 +1,299 @@ +@import "./../common/abstracts/_mixin.scss"; +@import "./../common/abstracts/variable.scss"; + +.wot-theme-dark { + @include b(radio) { + @include e(shape) { + background: transparent; + } + @include e(label) { + color: $-dark-color; + } + @include when(button) { + .wd-radio__label { + background-color: $-dark-background; + } + @include when(checked) { + .wd-radio__label { + background-color: $-dark-background2; + } + } + } + + @include when(dot) { + .wd-radio__shape { + + &::before { + background-color: $-radio-dot-checked-bg; + } + } + @include when(checked) { + .wd-radio__shape { + background-color: transparent; + } + } + } + + @include when(disabled) { + .wd-radio__label { + color: $-dark-color-gray; + } + @include when(checked) { + .wd-radio__label { + color: $-dark-color-gray; + } + } + + @include when(button) { + .wd-radio__label { + border-color: #c8c9cc; + background: #3a3a3c; + color: $-dark-color-gray; + } + @include when(checked) { + .wd-radio__label { + border-color: #c8c9cc; + background: #3a3a3c; + color: #c8c9cc; + } + } + } + + @include when(dot) { + .wd-radio__shape { + border-color: #c8c9cc; + background: #3a3a3c; + &::before { + background-color: #c8c9cc; + } + } + } + } + } +} + +@include b(radio) { + display: flex; + margin-top: $-radio-margin; + justify-content: space-between; + align-items: center; + text-align: center; + line-height: 1.2; + + @include when(first) { + margin-top: 0; + } + @include e(shape) { + position: relative; + display: inline-block; + width: $-radio-size; + height: $-radio-size; + font-size: $-radio-size; + color: transparent; + display: none; + background: $-radio-bg; + vertical-align: middle; + transition: background 0.2s; + } + @include e(input) { + position: absolute; + width: 0; + height: 0; + margin: 0; + opacity: 0; + } + @include e(label) { + display: inline-block; + vertical-align: top; + font-size: $-radio-label-fs; + color: $-radio-label-color; + line-height: 20px; + } + @include when(checked) { + .wd-radio__shape { + color: $-radio-checked-color; + border-color: currentColor; + display: inline-block; + } + .wd-radio__check { + color: $-radio-checked-color; + opacity: 1; + } + } + + @include when(dot) { + .wd-radio__shape { + border: 2px solid $-radio-dot-border-color; + border-radius: 50%; + position: relative; + display: inline-block; + box-sizing: border-box; + transition: none; + + &::before { + content: ""; + position: absolute; + width: $-radio-dot-size; + height: $-radio-dot-size; + left: 2px; + top: 2px; + border-radius: 50%; + background-color: #fff; + transform: scale(0); + transition: transform .2s ease-in; + } + } + @include when(checked) { + .wd-radio__shape { + background-color: $-radio-dot-checked-bg; + border-color: $-radio-dot-checked-border-color; + &::before { + transform: scale(1); + } + } + } + } + + @include when(button) { + display: inline-block; + margin-top: 0; + margin-right: 10px; + + .wd-radio__shape { + display: none; + } + .wd-radio__label { + height: $-radio-button-height; + min-width: $-radio-button-min-width; + max-width: $-radio-button-max-width; + padding: 5px 15px; + margin-right: 0; + border-radius: $-radio-button-radius; + background-color: $-radio-button-bg; + font-size: $-radio-button-fs; + box-sizing: border-box; + border: 1px solid $-radio-button-border; + transition: all 0.2s; + @include lineEllipsis; + } + @include when(checked) { + .wd-radio__label { + color: $-radio-checked-color; + border-color: currentColor; + background-color: $-radio-bg; + } + } + } + + @include when(inline) { + display: inline-block; + margin-top: 0; + margin-right: $-radio-margin; + + @include when(first) { + margin-left: 0; + } + .wd-radio__shape { + display: block; + margin-right: 4px; + float: left; + &::after { + content: ""; + display: table; + clear: both; + } + } + + @include when(dot) { + .wd-radio__shape { + margin-top: 2px; + } + @include when(large) { + .wd-radio__shape { + margin-top: 0; + } + } + } + } + + @include when(disabled) { + .wd-radio__label { + color: $-radio-disabled-label-color; + } + @include when(checked) { + .wd-radio__shape { + color: $-radio-disabled-label-color; + } + .wd-radio__check { + color: $-radio-disabled-label-color; + } + .wd-radio__label { + color: $-radio-disabled-label-color; + } + } + + @include when(button) { + .wd-radio__label { + border-color: $-radio-disabled-color; + background: $-radio-disabled-color; + border-color: $-radio-button-border; + color: $-radio-disabled-label-color; + } + @include when(checked) { + .wd-radio__label { + border-color: $-radio-button-disabled-border; + background: $-radio-disabled-color; + } + } + } + + @include when(dot) { + .wd-radio__shape { + background: $-radio-dot-disabled-bg; + border-color: $-radio-dot-disabled-border; + } + } + } + + // 以下内容用于解决父子组件样式隔离的问题 —— START + @include when(cell-radio) { + padding: 13px 15px; + margin: 0; + + @include when(large) { + padding: 14px 15px; + } + } + + @include when(button-radio) { + display: inline-flex; + width: 33.3333%; + padding: 12px 12px 0px 0px; + box-sizing: border-box; + + .wd-radio__label { + width: 100%; + max-width: inherit; + } + } + @include when(large) { + .wd-radio__shape { + width: $-radio-large-size; + height: $-radio-large-size; + font-size: $-radio-large-size; + } + .wd-radio__label { + font-size: $-radio-large-label-fs; + } + + @include when(dot) { + .wd-radio__shape { + &::before { + width: $-radio-dot-large-size; + height: $-radio-dot-large-size; + } + } + } + } + // 以下内容用于解决父子组件样式隔离的问题 —— END +} diff --git a/uni_modules/wot-design-uni/components/wd-radio/wd-radio.vue b/uni_modules/wot-design-uni/components/wd-radio/wd-radio.vue new file mode 100644 index 0000000..abe948c --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-radio/wd-radio.vue @@ -0,0 +1,164 @@ + + + + diff --git a/uni_modules/wot-design-uni/components/wd-rate/index.scss b/uni_modules/wot-design-uni/components/wd-rate/index.scss new file mode 100644 index 0000000..c40fb18 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-rate/index.scss @@ -0,0 +1,24 @@ +@import './../common/abstracts/_mixin.scss'; +@import './../common/abstracts/variable.scss'; + +@include b(rate) { + display: inline-block; + vertical-align: middle; + line-height: 1; + + @include e(item) { + position: relative; + display: inline-block; + } + @include e(item-star) { + display: inline-block; + vertical-align: top; + + @include m(active) { + position: absolute; + left: 0; + top: 0; + overflow: hidden; + } + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-rate/wd-rate.vue b/uni_modules/wot-design-uni/components/wd-rate/wd-rate.vue new file mode 100644 index 0000000..540e5c0 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-rate/wd-rate.vue @@ -0,0 +1,154 @@ + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-resize/index.scss b/uni_modules/wot-design-uni/components/wd-resize/index.scss new file mode 100644 index 0000000..cb0a039 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-resize/index.scss @@ -0,0 +1,27 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +@include b(resize) { + + @include e(container) { + position: absolute; + min-width: 1px; + min-height: 1px; + } + + @include e(wrapper) { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -9999; + overflow: hidden; + visibility: hidden; + + @include m(placeholder) { + transition: 0s; + animation: none; + } + } +} diff --git a/uni_modules/wot-design-uni/components/wd-resize/wd-resize.vue b/uni_modules/wot-design-uni/components/wd-resize/wd-resize.vue new file mode 100644 index 0000000..46fbbd2 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-resize/wd-resize.vue @@ -0,0 +1,163 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-row/index.scss b/uni_modules/wot-design-uni/components/wd-row/index.scss new file mode 100644 index 0000000..26ffdbd --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-row/index.scss @@ -0,0 +1,10 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +@include b(row) { + &::after { + display: table; + clear: both; + content: ""; + } +} diff --git a/uni_modules/wot-design-uni/components/wd-row/wd-row.vue b/uni_modules/wot-design-uni/components/wd-row/wd-row.vue new file mode 100644 index 0000000..98a5eae --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-row/wd-row.vue @@ -0,0 +1,67 @@ + + + + diff --git a/uni_modules/wot-design-uni/components/wd-search/index.scss b/uni_modules/wot-design-uni/components/wd-search/index.scss new file mode 100644 index 0000000..627d202 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-search/index.scss @@ -0,0 +1,151 @@ +@import '../common/abstracts/_mixin.scss'; +@import '../common/abstracts/variable.scss'; + +.wot-theme-dark { + @include b(search) { + background: $-dark-background4; + + @include e(block) { + background-color: $-dark-background; + } + + @include e(input) { + color: $-dark-color; + } + + @include e(cover) { + background-color: $-dark-background; + } + + @include e(search-icon) { + color: $-dark-color; + } + @include e(search-left-icon) { + color: $-dark-color; + } + @include e(clear) { + color: $-dark-color; + } + @include e(cancel) { + color: $-dark-color; + } + + @include when(light) { + background: $-dark-background4; + + .wd-search__block { + background: $-dark-background7; + } + + .wd-search__cover { + background: $-dark-background7; + } + } + } +} + +@include b(search) { + display: flex; + padding: $-search-padding; + align-items: center; + background: #fff; + + @include e(block) { + flex: 1; + background-color: $-search-input-bg; + border-radius: $-search-input-radius; + display: flex; + flex-direction: row; + align-items: center; + position: relative; + } + @include e(field) { + flex: 1; + display: flex; + flex-direction: row; + align-items: center; + position: relative; + } + @include e(input) { + flex: 1; + height: $-search-input-height; + box-sizing: border-box; + padding: $-search-input-padding; + border: none; + background: transparent; + font-size: $-search-input-fs; + -webkit-appearance: none; + outline: none; + color: $-search-input-color; + z-index: 0; + + @include lineEllipsis; + + &::-webkit-search-cancel-button { + -webkit-appearance: none; + } + } + @include e(cover) { + width: 100%; + height: $-search-input-height; + background-color: $-search-input-bg; + line-height: $-search-input-height; + font-size: $-search-input-fs; + border-radius: $-search-input-radius; + flex-direction: row; + justify-content: center; + align-items: center; + } + @include edeep(search-icon) { + margin-right: 8px; + color: $-search-icon-color; + font-size: $-search-input-fs; + height: $-search-input-height; + } + @include edeep(search-left-icon) { + position: absolute; + display: inline-block; + height: $-search-input-height; + line-height: $-search-input-height; + top: 50%; + left: 16px; + transform: translateY(-50%); + color: $-search-icon-color; + font-size: $-search-input-fs; + } + @include e(placeholder-txt) { + color: $-search-placeholder-color; + font-size: $-search-input-fs; + } + @include edeep(clear) { + position: absolute; + right: 0; + padding: 6px 9px 6px 7px; + color: $-search-cancel-color; + } + @include edeep(clear-icon) { + vertical-align: middle; + } + @include e(cancel) { + padding: $-search-cancel-padding; + height: $-search-input-height; + line-height: $-search-input-height; + font-size: $-search-cancel-fs; + color: $-search-cancel-color; + -webkit-tap-highlight-color: transparent; + } + @include when(light) { + background: $-search-light-bg; + + .wd-search__block { + background: #fff; + } + + .wd-search__cover { + background: #fff; + } + } + @include when(without-cancel) { + padding-right: $-search-side-padding; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-search/wd-search.vue b/uni_modules/wot-design-uni/components/wd-search/wd-search.vue new file mode 100644 index 0000000..3c7dc78 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-search/wd-search.vue @@ -0,0 +1,243 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-segmented/index.scss b/uni_modules/wot-design-uni/components/wd-segmented/index.scss new file mode 100644 index 0000000..f79061e --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-segmented/index.scss @@ -0,0 +1,101 @@ +@import './../common/abstracts/_mixin.scss'; +@import './../common/abstracts/variable.scss'; + +.wot-theme-dark { + @include b(segmented) { + background: $-dark-background2; + + @include e(item) { + color: $-dark-color3; + + @include when(active) { + color: $-dark-color; + + @include when(disabled) { + color: $-dark-color3; + } + } + + @include when(disabled) { + color: $-dark-color-gray; + } + + @include m(active) { + background-color: $-color-theme; + + @include when(disabled) { + opacity: 0.6; + } + } + } + + } +} + +@include b(segmented) { + position: relative; + display: flex; + align-items: stretch; + justify-items: flex-start; + width: 100%; + background-color: $-segmented-item-bg-color; + padding: $-segmented-padding; + border-radius: 4px; + box-sizing: border-box; + + + @include e(item) { + position: relative; + text-align: center; + border-radius: 4px; + flex: 1; + min-width: 0; + z-index: 1; + min-height: 28px; + line-height: 28px; + padding: 0 12px; + font-size: 14px; + color: $-segmented-item-color; + font-weight: 400; + + @include when(active) { + font-weight: 550; + } + + @include when(large) { + min-height: 32px; + line-height: 32px; + padding: 0 12px; + font-size: 16px; + } + + + @include when(small) { + min-height: 24px; + line-height: 24px; + padding: 0 7px; + font-size: 12px; + } + + @include when(disabled) { + cursor: no-drop; + color: $-segmented-item-disabled-color; + } + + @include m(active) { + background-color: $-segmented-item-acitve-bg; + border-radius: 4px; + height: calc(100% - $-segmented-padding * 2); + @include when(disabled) { + opacity: 0.8; + } + } + } + + @include e(item-label) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-segmented/wd-segmented.vue b/uni_modules/wot-design-uni/components/wd-segmented/wd-segmented.vue new file mode 100644 index 0000000..7ef6c40 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-segmented/wd-segmented.vue @@ -0,0 +1,177 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-select-picker/index.scss b/uni_modules/wot-design-uni/components/wd-select-picker/index.scss new file mode 100644 index 0000000..a9d0ce2 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-select-picker/index.scss @@ -0,0 +1,253 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(select-picker) { + @include when(border) { + .wd-select-picker__cell { + @include halfPixelBorder('top', $-cell-padding, $-dark-border-color); + } + } + + @include e(cell) { + background-color: $-dark-background2; + color: $-dark-color; + @include when(disabled) { + .wd-select-picker__value { + color: $-dark-color3; + } + } + } + + @include e(label) { + color: $-dark-color; + } + @include e(value) { + color: $-dark-color; + @include m(placeholder) { + color: $-dark-color-gray; + } + } + + :deep(.wd-select-picker__arrow), + :deep(.wd-select-picker__close) { + color: $-dark-color; + } + + } + +} + +@include b(select-picker) { + @include when(border) { + .wd-select-picker__cell { + @include halfPixelBorder('top', $-cell-padding); + } + } + @include e(cell) { + position: relative; + display: flex; + padding: $-cell-wrapper-padding $-cell-padding; + align-items: flex-start; + background-color: $-color-white; + text-decoration: none; + color: $-cell-title-color; + font-size: $-cell-title-fs; + overflow: hidden; + line-height: $-cell-line-height; + } + @include e(cell) { + @include when(disabled) { + .wd-select-picker__value { + color: $-input-disabled-color; + } + } + @include when(align-right) { + .wd-select-picker__value { + text-align: right; + } + } + @include when(error) { + .wd-select-picker__value { + color: $-input-error-color; + } + :deep(.wd-select-picker__arrow) { + color: $-input-error-color; + } + } + @include when(large) { + font-size: $-cell-title-fs-large; + + :deep(.wd-select-picker__arrow ){ + font-size: $-cell-icon-size-large; + } + } + } + @include e(error-message){ + color: $-form-item-error-message-color; + font-size: $-form-item-error-message-font-size; + line-height: $-form-item-error-message-line-height; + text-align: left; + vertical-align: middle; + } + @include e(label) { + position: relative; + width: $-input-cell-label-width; + color: $-cell-title-color; + margin-right: $-cell-padding; + box-sizing: border-box; + + @include when(required) { + padding-left: 12px; + + &::after { + position: absolute; + left: 0; + top: 2px; + content: '*'; + font-size: $-cell-required-size; + line-height: 1.1; + color: $-cell-required-color; + } + } + } + @include e(value-wraper) { + display: flex; + } + @include e(value) { + flex: 1; + margin-right: 10px; + color: $-cell-value-color; + + @include when(ellipsis) { + @include lineEllipsis; + } + @include m(placeholder) { + color: $-input-placeholder-color; + } + } + @include e(body) { + flex: 1; + } + @include edeep(arrow) { + display: block; + font-size: $-cell-icon-size; + color: $-cell-arrow-color; + line-height: $-cell-line-height; + } + @include e(selected) { + height: $-col-picker-selected-height; + font-size: $-col-picker-selected-fs; + color: $-col-picker-selected-color; + overflow: hidden; + } + @include e(selected-container){ + position: relative; + display: flex; + user-select: none; + } + @include e(selected-item) { + flex: 0 0 auto; + height: $-col-picker-selected-height; + line-height: $-col-picker-selected-height; + padding: $-col-picker-selected-padding; + + @include when(selected) { + font-weight: $-col-picker-selected-fw; + } + } + @include e(selected-line) { + position: absolute; + bottom: 5px; + width: $-col-picker-line-width; + left: 0; + height: $-col-picker-line-height; + background: $-col-picker-line-color; + z-index: 1; + border-radius: calc($-col-picker-line-height / 2); + box-shadow: $-col-picker-line-box-shadow; + } + @include e(list-container){ + position: relative; + } + @include e(list) { + height: $-col-picker-list-height; + padding-bottom: $-col-picker-list-padding-bottom; + box-sizing: border-box; + overflow: auto; + color: $-col-picker-list-color; + font-size: $-col-picker-list-fs; + -webkit-overflow-scrolling: touch; + } + @include e(list-item) { + display: flex; + padding: $-col-picker-list-item-padding; + align-items: flex-start; + + @include when(selected) { + color: $-col-picker-list-color-checked; + + .wd-select-picker__checked { + opacity: 1; + } + } + @include when(disabled) { + color: $-col-picker-list-color-disabled; + } + } + @include e(list-item-label) { + line-height: 1.285; + } + @include e(list-item-tip) { + margin-top: 2px; + font-size: $-col-picker-list-fs-tip; + color: $-col-picker-list-color-tip; + } + @include e(checked) { + display: block; + margin-left: 4px; + font-size: $-col-picker-list-checked-icon-size; + color: $-col-picker-list-color-checked; + opacity: 0; + } + @include e(loading) { + position: absolute; + display: flex; + top: 0; + right: 0; + bottom: 0; + left: 0; + align-items: center; + justify-content: center; + z-index: 3; + background: $-picker-loading-bg; + } + // selectPiceker多出的样式 + @include edeep(header) { + height: 72px; + line-height: 72px; + } + @include e(wrapper) { + padding: 0 10px; + position: relative; + max-height: 356px; + box-sizing: border-box; + overflow: auto; + + @include when(filterable) { + height: 314px; + max-height: 314px; + } + + @include when(loading) { + overflow: hidden; + } + } + @include e(text-active) { + color: $-color-theme; + } + + @include e(footer) { + padding: 24px 15px; + } +} diff --git a/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue b/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue new file mode 100644 index 0000000..becbb39 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue @@ -0,0 +1,492 @@ + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-sidebar-item/index.scss b/uni_modules/wot-design-uni/components/wd-sidebar-item/index.scss new file mode 100644 index 0000000..a192ed8 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-sidebar-item/index.scss @@ -0,0 +1,107 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(sidebar-item) { + background: $-dark-background2; + color: $-dark-color; + + &:active { + background-color: $-dark-background4; + } + + @include m(active) { + background: $-dark-background; + color: $-sidebar-active-color; + } + + @include m(disabled) { + color: $-dark-color-gray; + + &:active { + background-color: $-dark-background2;; + } + } + } + +} + +@include b(sidebar-item) { + display: flex; + align-items: center; + justify-content: center; + position: relative; + padding: 32rpx; + font-size: $-sidebar-font-size; + color: $-sidebar-color; + background: $-sidebar-bg; + min-height: $-sidebar-item-height; + box-sizing: border-box; + white-space: wrap; + line-height: $-sidebar-item-line-height; + + &:active { + background-color: $-sidebar-hover-bg; + } + + @include m(active) { + font-weight: 600; + background: $-sidebar-active-bg; + color: $-sidebar-active-color; + + &::before { + position: absolute; + top: 50%; + left: 0; + width: $-sidebar-active-border-width; + height: $-sidebar-active-border-height; + background: $-sidebar-active-color; + transform: translateY(-50%); + content: ''; + border-radius: $-sidebar-active-border-width; + } + + &:active { + background-color: transparent; + } + } + + @include m(prefix) { + border-bottom-right-radius: $-sidebar-border-radius; + } + + @include m(suffix) { + border-top-right-radius: $-sidebar-border-radius; + } + + + @include m(disabled) { + color: $-sidebar-disabled-color; + cursor: not-allowed; + + &:active { + background-color: $-sidebar-bg; + } + } + + @include edeep(badge) { + z-index: 2; + } + + @include edeep(icon) { + font-size: $-sidebar-icon-size; + margin-right: 2px; + } + + // @include e(line) { + // width: 6rpx; + // height: 28rpx; + // position: absolute; + // left: 0; + // top: 50%; + // transform: translateY(-50%); + // background: $-sidebar-active-color; + // border-radius: 8rpx; + // } + +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-sidebar-item/wd-sidebar-item.vue b/uni_modules/wot-design-uni/components/wd-sidebar-item/wd-sidebar-item.vue new file mode 100644 index 0000000..d993803 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-sidebar-item/wd-sidebar-item.vue @@ -0,0 +1,144 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-sidebar/index.scss b/uni_modules/wot-design-uni/components/wd-sidebar/index.scss new file mode 100644 index 0000000..2e268fa --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-sidebar/index.scss @@ -0,0 +1,25 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(sidebar) { + background: $-dark-background; + @include e(padding){ + background: $-dark-background2; + } + } +} + +@include b(sidebar) { + display: flex; + flex-direction: column; + overflow-y: auto; + width: $-sidebar-width; + height: $-sidebar-height; + background: $-color-white; + + @include e(padding){ + flex: 1 1 auto; + background: $-sidebar-bg; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-sidebar/wd-sidebar.vue b/uni_modules/wot-design-uni/components/wd-sidebar/wd-sidebar.vue new file mode 100644 index 0000000..5073ef6 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-sidebar/wd-sidebar.vue @@ -0,0 +1,89 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-skeleton/index.scss b/uni_modules/wot-design-uni/components/wd-skeleton/index.scss new file mode 100644 index 0000000..6c0f25c --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-skeleton/index.scss @@ -0,0 +1,96 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(skeleton) { + @include e(col) { + background-color: $-dark-background4; + } + } +} +@include b(skeleton) { + box-sizing: border-box; + + @include e(row) { + justify-content: space-between; + margin-bottom: $-skeleton-row-margin-bottom; + display: flex; + align-items: center; + + &:only-child, + &:last-child { + margin-bottom: 0; + } + } + @include e(col) { + border-radius: $-skeleton-border-radius-text; + background-color: $-skeleton-background-color; + display: flex; + align-items: center; + justify-content: center; + + &:first-child:last-child, + &:last-child { + margin-right: 0; + } + } + @include m(type) { + &-text { + width: 100%; + height: $-skeleton-text-height-default; + border-radius: $-skeleton-border-radius-text; + } + + &-rect { + width: 100%; + height: $-skeleton-rect-height-default; + border-radius: $-skeleton-border-radius-rect; + } + + &-circle { + flex-shrink: 0; + width: $-skeleton-circle-height-default; + height: $-skeleton-circle-height-default; + border-radius: $-skeleton-border-radius-circle; + } + } + @include m(animation) { + &-gradient { + position: relative; + overflow-x: hidden; + + &::after { + content: ' '; + position: absolute; + animation: wd-skeleton-gradient 1.5s linear 2s infinite; + background: linear-gradient(90deg, rgba(255, 255, 255, 0), $-skeleton-animation-gradient, rgba(255, 255, 255, 0)); + inset: 0; + } + } + + &-flashed { + animation: wd-skeleton-flashed 2s linear 2s infinite; + } + } + + @keyframes wd-skeleton-gradient { + 0% { + transform: translateX(-100%) skewX(-15deg); + } + 100% { + transform: translateX(100%) skewX(-15deg); + } + } + @keyframes wd-skeleton-flashed { + 0% { + opacity: 1; + } + 50% { + opacity: 0.3; + background-color: $-skeleton-animation-flashed; + } + 100% { + opacity: 1; + } + } +} diff --git a/uni_modules/wot-design-uni/components/wd-skeleton/index.ts b/uni_modules/wot-design-uni/components/wd-skeleton/index.ts new file mode 100644 index 0000000..43e0049 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-skeleton/index.ts @@ -0,0 +1 @@ +export type { SkeletonThemeVars } from './types' diff --git a/uni_modules/wot-design-uni/components/wd-skeleton/types.ts b/uni_modules/wot-design-uni/components/wd-skeleton/types.ts new file mode 100644 index 0000000..97575ed --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-skeleton/types.ts @@ -0,0 +1,76 @@ +import type { PropType, CSSProperties } from 'vue' + +type SkeletonTheme = 'text' | 'avatar' | 'paragraph' | 'image' +type SkeletonAnimation = 'gradient' | 'flashed' +export type SkeletonRowColObj = { + type?: 'rect' | 'circle' | 'text' + size?: string | number + width?: string | number + height?: string | number + margin?: string | number + background?: string + marginLeft?: string | number + marginRight?: string | number + borderRadius?: string | number + backgroundColor?: string +} +export type SkeletonRowCol = Array> +export type SkeletonThemeVars = { + notifyPadding?: string + notifyFontSize?: string + notifyTextColor?: string + notifyLineHeight?: number | string + notifyDangerBackground?: string + notifyPrimaryBackground?: string + notifySuccessBackground?: string + notifyWarningBackground?: string +} +export const skeletonProps = { + /** + * 骨架图风格,有基础、头像组合等两大类 + */ + theme: { + type: String as PropType, + default: 'text' + }, + /** + * 用于设置行列数量、宽度高度、间距等。 + * @example + * 【示例一】,`[1, 1, 2]` 表示输出三行骨架图,第一行一列,第二行一列,第三行两列。 + * 【示例二】,`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。 + * 【示例三】,`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列,且自定义宽度、高度和间距 + */ + rowCol: { + type: Array as PropType, + default() { + return [] + } + }, + /** + * 是否为加载状态,如果是则显示骨架图,如果不是则显示加载完成的内容 + * @default true + */ + loading: { + type: Boolean, + default: true + }, + /** + * 动画效果,有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画 + */ + animation: { + type: String as PropType, + default: '' + }, + // 自定义类名 + customClass: { + type: [String, Array, Object], + default: '' + }, + // 自定义样式 + customStyle: { + type: Object as PropType, + default() { + return {} + } + } +} diff --git a/uni_modules/wot-design-uni/components/wd-skeleton/wd-skeleton.vue b/uni_modules/wot-design-uni/components/wd-skeleton/wd-skeleton.vue new file mode 100644 index 0000000..6df53f1 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-skeleton/wd-skeleton.vue @@ -0,0 +1,105 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-slider/index.scss b/uni_modules/wot-design-uni/components/wd-slider/index.scss new file mode 100644 index 0000000..72d6cfd --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-slider/index.scss @@ -0,0 +1,92 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(slider) { + @include e(label-min, label-max) { + color: $-dark-color; + } + + @include e(label) { + color: $-dark-color; + background-color: rgba($color: $-dark-background2, $alpha: 0.5); + } + + @include m(disabled) { + @include me(label-min, label-max) { + color: $-dark-color-gray; + } + } + } +} + + +@include b(slider) { + display: flex; + flex-flow: row nowrap; + align-items: center; + height: calc($-slider-handle-radius * 3); + + @include e(label-min, label-max) { + font-size: $-slider-fs; + color: $-slider-color; + } + @include e(label) { + text-align: center; + width: calc($-slider-handle-radius * 2); + line-height: calc($-slider-handle-radius * 2); + font-size: $-slider-fs; + line-height: 1.2; + color: $-slider-color; + background-color: rgba($color: #fff, $alpha: 0.5); + border-radius: 100%; + position: absolute; + bottom: calc($-slider-handle-radius * 2 + 8px); + } + @include e(bar-wrapper) { + flex: 1; + position: relative; + border-radius: calc($-slider-axie-height / 2); + background-color: #e5e5e5; + margin: calc($-slider-handle-radius - $-slider-axie-height / 2) 0; + } + @include e(bar) { + position: relative; + border-radius: inherit; + height: $-slider-axie-height; + background: $-slider-line-color; + } + @include e(button-wrapper) { + width: calc($-slider-handle-radius * 2); + position: absolute; + right: 0; + top: 0; + transform: translate3d(-50%, -50%, 0); + } + @include e(has-label) { + padding-top: calc($-slider-fs * 1.2 + 8px); + } + @include e(button) { + height: calc($-slider-handle-radius * 2); + width: calc($-slider-handle-radius * 2); + background: $-slider-handle-bg; + border-radius: 100%; + border: 1px solid $-slider-axie-bg; + box-sizing: border-box; + box-shadow: 0 2px 4px 0 rgba($color: #9b9b9b, $alpha: 0.5); + } + @include e(label-min) { + margin-right: $-slider-handle-radius + 11px; + } + @include e(label-max) { + margin-left: $-slider-handle-radius + 11px; + } + @include m(disabled) { + @include me(bar) { + opacity: 0.25; + } + @include me(label-min, label-max) { + color: $-slider-disabled-color; + } + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue b/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue new file mode 100644 index 0000000..df381c3 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue @@ -0,0 +1,373 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-sort-button/index.scss b/uni_modules/wot-design-uni/components/wd-sort-button/index.scss new file mode 100644 index 0000000..bbc9af2 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-sort-button/index.scss @@ -0,0 +1,89 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(sort-button) { + @include e(wrapper) { + color: $-dark-color; + } + } + +} + +@include b(sort-button) { + display: inline-block; + height: $-sort-button-height; + line-height: $-sort-button-height; + + @include m(line) { + .wd-sort-button__left { + &::after { + position: absolute; + content: ''; + width: 19px; + height: 3px; + bottom: 6px; + left: 50%; + transform: translate(-50%, 0); + background: $-sort-button-line-color; + border-radius: calc($-sort-button-line-height / 2); + transition: opacity .15s; + opacity: 0; + } + + &.is-active::after { + opacity: 1; + } + } + } + + @include e(wrapper) { + font-size: $-sort-button-fs; + color: $-sort-button-color; + word-break: break-all; + white-space: nowrap; + } + + @include e(left) { + position: relative; + display: inline-block; + vertical-align: middle; + + @include when(active) { + font-weight: $-fw-medium; + + .wd-sort-button__right { + justify-content: center; + } + + } + } + + @include e(right) { + display: inline-block; + min-width: 14px; + margin-left: 2px; + vertical-align: middle; + line-height: 1.1; + + @include when(active) { + + :deep(.wd-sort-button__icon-up), + :deep(.wd-sort-button__icon-down) { + transform: scale(calc((10 / 14))); + } + } + } + + @include edeep(icon-up) { + display: block !important; + line-height: 1.1; + transform: scale(calc((10 / 14))) translate(0, 7px); + } + + @include edeep(icon-down) { + display: block !important; + line-height: 1.1; + transform: scale(calc((10 / 14))) translate(0, -7px); + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-sort-button/wd-sort-button.vue b/uni_modules/wot-design-uni/components/wd-sort-button/wd-sort-button.vue new file mode 100644 index 0000000..a6aa3bb --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-sort-button/wd-sort-button.vue @@ -0,0 +1,82 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-status-tip/index.scss b/uni_modules/wot-design-uni/components/wd-status-tip/index.scss new file mode 100644 index 0000000..e69ead2 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-status-tip/index.scss @@ -0,0 +1,38 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + background-color: $-dark-background2; + @include b(status-tip) { + @include e(text) { + color: $-dark-color3; + } + } +} + +@include b(status-tip) { + padding: $-statustip-padding; + width: 100%; + margin: 0 auto; + color: $-statustip-color; + font-size: $-statustip-fs; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + + @include e(image) { + margin: 0 auto; + display: block; + width: 160px; + height: 160px; + } + @include e(text) { + margin: 20px auto 0; + font-size: $-statustip-fs; + line-height: $-statustip-line-height; + color: $-statustip-color; + text-align: center; + word-break: break-all; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue b/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue new file mode 100644 index 0000000..ee62686 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue @@ -0,0 +1,105 @@ + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-step/index.scss b/uni_modules/wot-design-uni/components/wd-step/index.scss new file mode 100644 index 0000000..5feb063 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-step/index.scss @@ -0,0 +1,235 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(step) { + @include e(icon) { + background: $-dark-background2; + } + + @include e(content){ + color: $-dark-color3; + } + + @include e(line) { + background: $-dark-color-gray; + } + + @include e(dot) { + background: $-dark-color-gray; + } + + @include e(description) { + color: $-dark-color3; + } + + @include when(wait) { + .wd-step__description { + color: $-dark-color-gray; + } + } + + :deep(.wd-step__icon-outer),:deep(.wd-step__icon-inner){ + color: $-dark-color3; + border-color: $-dark-color-gray; + } + } +} + + +@include b(step) { + position: relative; + display: inline-block; + vertical-align: top; + + @include e(header) { + position: relative; + font-size: 0; + + @include when(dot) { + .wd-step__line { + margin-top: -1px; + } + } + } + @include e(icon) { + display: inline-block; + position: relative; + width: $-steps-icon-size; + height: $-steps-icon-size; + background: #fff; + z-index: 1; + + @include when(icon) { + width: $-steps-is-icon-width; + text-align: center; + } + @include when(dot) { + width: $-steps-dot-size; + height: $-steps-dot-size; + border: 1px solid transparent; + margin-left: -1px; + border-radius: 50%; + background: transparent; + } + } + @include edeep(icon-inner) { + font-size: $-steps-icon-size; + color: $-steps-inactive-color; + } + @include e(icon-outer) { + width: calc($-steps-icon-size - 2px); + height: calc($-steps-icon-size - 2px); + border: 1px solid $-steps-inactive-color; + color: $-steps-inactive-color; + text-align: center; + line-height: calc($-steps-icon-size - 2px); + border-radius: 50%; + font-size: $-steps-icon-text-fs; + } + @include e(line) { + position: absolute; + width: 100%; + height: 1px; + background: $-steps-line-color; + transform: scaleY(0.5); + top: 50%; + left: 0; + } + @include e(dot) { + position: relative; + display: block; + width: 100%; + height: 100%; + border-radius: 50%; + background: $-steps-line-color; + } + @include e(content){ + margin-top: 7px; + color: $-steps-inactive-color; + font-size: $-steps-label-fs; + } + @include e(title) { + font-weight: $-steps-title-fw; + line-height: 1.43; + + @include when(description) { + font-size: $-steps-title-fs; + } + } + @include e(description) { + margin-top: 5px; + padding: 0 2px; + color: $-steps-description-color; + } + @include when(wait) { + .wd-step__description { + color: $-steps-inactive-color; + } + } + @include when(finished) { + :deep(.wd-step__icon-inner) { + color: $-steps-finished-color; + } + .wd-step__icon-outer { + color: $-steps-finished-color; + border-color: $-steps-finished-color; + } + .wd-step__title { + color: $-steps-finished-color; + } + .wd-step__dot { + background: $-steps-finished-color; + } + } + @include when(process) { + .wd-step__icon.is-icon { + :deep(.wd-step__icon-inner) { + color: $-steps-finished-color; + } + } + .wd-step__icon-outer { + color: #fff; + background: $-steps-finished-color; + border-color: $-steps-finished-color; + } + .wd-step__title { + color: $-steps-finished-color; + } + .wd-step__icon { + border-color: $-steps-finished-color; + + &.is-dot { + &::after { + position: absolute; + content: ''; + width: $-steps-dot-size + 10px; + height: $-steps-dot-size + 10px; + left: -5px; + top: -5px; + border-radius: 50%; + background: $-steps-finished-color; + opacity: 0.2; + } + } + } + .wd-step__dot { + background: $-steps-finished-color; + } + } + @include when(error) { + :deep(.wd-step__icon-inner), .wd-step__title { + color: $-steps-error-color; + } + .wd-step__icon-outer { + color: $-steps-error-color; + border-color: $-steps-error-color; + } + .wd-step__dot { + background: $-steps-error-color; + } + } + @include when(center) { + text-align: center; + + .wd-step__line { + left: 50%; + right: -50%; + } + } + @include when(vertical) { + display: block; + + .wd-step__header { + position: absolute; + left: 0; + top: 0; + height: 100%; + + &.is-dot { + top: 6px; + + .wd-step__line { + margin-left: -1px; + margin-top: 0; + } + } + } + .wd-step__content { + margin-left: 30px; + margin-top: 0; + padding-bottom: 20px; + } + .wd-step__line { + top: 0; + left: 50%; + width: 1px; + height: 100%; + transform: scaleX(0.5); + } + .wd-step__icon.is-dot { + margin-left: 0; + margin-top: -1px; + } + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-step/wd-step.vue b/uni_modules/wot-design-uni/components/wd-step/wd-step.vue new file mode 100644 index 0000000..1a2898a --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-step/wd-step.vue @@ -0,0 +1,156 @@ + + + + diff --git a/uni_modules/wot-design-uni/components/wd-steps/index.scss b/uni_modules/wot-design-uni/components/wd-steps/index.scss new file mode 100644 index 0000000..e436a2d --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-steps/index.scss @@ -0,0 +1,10 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +@include b(steps) { + font-size: 0; + + @include when(vertical) { + display: block; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-steps/wd-steps.vue b/uni_modules/wot-design-uni/components/wd-steps/wd-steps.vue new file mode 100644 index 0000000..6526cce --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-steps/wd-steps.vue @@ -0,0 +1,92 @@ + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-sticky-box/index.scss b/uni_modules/wot-design-uni/components/wd-sticky-box/index.scss new file mode 100644 index 0000000..9456c8b --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-sticky-box/index.scss @@ -0,0 +1,6 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +@include b(sticky-box) { + position: relative; +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-sticky-box/wd-sticky-box.vue b/uni_modules/wot-design-uni/components/wd-sticky-box/wd-sticky-box.vue new file mode 100644 index 0000000..683a9d8 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-sticky-box/wd-sticky-box.vue @@ -0,0 +1,141 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-sticky/index.scss b/uni_modules/wot-design-uni/components/wd-sticky/index.scss new file mode 100644 index 0000000..36392a0 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-sticky/index.scss @@ -0,0 +1,9 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +@include b(sticky) { + display: inline-block; + @include e(container) { + display: inline-block; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-sticky/wd-sticky.vue b/uni_modules/wot-design-uni/components/wd-sticky/wd-sticky.vue new file mode 100644 index 0000000..4a74aa9 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-sticky/wd-sticky.vue @@ -0,0 +1,202 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-swipe-action/index.scss b/uni_modules/wot-design-uni/components/wd-swipe-action/index.scss new file mode 100644 index 0000000..5310e70 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-swipe-action/index.scss @@ -0,0 +1,22 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +@include b(swipe-action) { + position: relative; + overflow: hidden; + @include e(left) { + left: 0; + transform: translate3d(-100%, 0, 0); + } + @include e(right) { + right: 0; + transform: translate3d(100%, 0, 0); + } +} + +.wd-swipe-action__left, +.wd-swipe-action__right { + position: absolute; + top: 0; + height: 100%; +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-swipe-action/wd-swipe-action.vue b/uni_modules/wot-design-uni/components/wd-swipe-action/wd-swipe-action.vue new file mode 100644 index 0000000..3c6cb33 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-swipe-action/wd-swipe-action.vue @@ -0,0 +1,310 @@ + + + + diff --git a/uni_modules/wot-design-uni/components/wd-swiper-nav/index.scss b/uni_modules/wot-design-uni/components/wd-swiper-nav/index.scss new file mode 100644 index 0000000..f7207ca --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-swiper-nav/index.scss @@ -0,0 +1,159 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +@include b(swiper-nav) { + + @include e(btn) { + @include m(prev, next) { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: $-swiper-nav-btn-size; + height: $-swiper-nav-btn-size; + border-radius: 50%; + background: $-swiper-nav-btn-bg-color; + + &::after { + position: absolute; + left: 50%; + top: 50%; + display: block; + content: ''; + width: 12rpx; + height: 12rpx; + border-color: $-swiper-nav-btn-color; + border-style: solid; + } + } + + @include m(prev) { + left: 30rpx; + + &::after { + margin-left: 4rpx; + border-width: 2rpx 0 0 2rpx; + transform: translate(-50%, -50%) rotateZ(-45deg); + } + } + + @include m(next) { + right: 30rpx; + + &::after { + margin-left: -4rpx; + border-width: 2rpx 2rpx 0 0; + transform: translate(-50%, -50%) rotateZ(45deg); + } + } + } + + @include m(dots, dots-bar) { + display: flex; + flex-direction: row; + } + + @include m(fraction) { + padding: 0 16rpx; + height: $-swiper-nav-fraction-height; + line-height: $-swiper-nav-fraction-height; + border-radius: calc($-swiper-nav-fraction-height / 2); + background: $-swiper-nav-fraction-bg-color; + color: $-swiper-nav-fraction-color; + font-size: $-swiper-nav-fraction-font-size; + } + + + @include e(item) { + @include m(dots, dots-bar) { + width: $-swiper-nav-dot-size; + height: $-swiper-nav-dot-size; + background: $-swiper-nav-dot-color; + border-radius: 50%; + margin: 0 10rpx; + transition: all 0.4s ease-in; + + @include when(vertical) { + margin: 10rpx 0; + } + + @include when(active) { + background-color: $-swiper-nav-dot-active-color; + } + } + + @include m(dots-bar) { + + @include when(vertical) { + @include when(active) { + width: $-swiper-nav-dot-size; + height: $-swiper-nav-dots-bar-active-width; + } + } + + @include when(active) { + width: $-swiper-nav-dots-bar-active-width; + border-radius: calc($-swiper-nav-dot-size / 2); + background-color: $-swiper-nav-dot-active-color; + } + } + + } + + + @include m(left) { + position: absolute; + left: 24rpx; + top: 50%; + transform: translateY(-50%); + } + + @include m(right) { + position: absolute; + right: 24rpx; + top: 50%; + transform: translateY(-50%); + } + + @include m(top-left) { + position: absolute; + top: 24rpx; + left: 24rpx; + } + + @include m(top) { + position: absolute; + left: 50%; + top: 24rpx; + transform: translateX(-50%); + } + + @include m(top-right) { + position: absolute; + top: 24rpx; + right: 24rpx; + } + + @include m(bottom-left) { + position: absolute; + left: 24rpx; + bottom: 24rpx; + } + + @include m(bottom) { + position: absolute; + left: 50%; + bottom: 24rpx; + transform: translateX(-50%); + } + + @include m(bottom-right) { + position: absolute; + right: 24rpx; + bottom: 24rpx; + } + + @include m(vertical) { + flex-direction: column; + } + +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-swiper-nav/type.ts b/uni_modules/wot-design-uni/components/wd-swiper-nav/type.ts new file mode 100644 index 0000000..fae0cd7 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-swiper-nav/type.ts @@ -0,0 +1,4 @@ +/** + * 指示器类型,点状(dots)、点条状(dots-bar)、分式(fraction)等 + */ +export type SwiperIndicatorType = 'dots' | 'dots-bar' | 'fraction' diff --git a/uni_modules/wot-design-uni/components/wd-swiper-nav/wd-swiper-nav.vue b/uni_modules/wot-design-uni/components/wd-swiper-nav/wd-swiper-nav.vue new file mode 100644 index 0000000..3a807af --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-swiper-nav/wd-swiper-nav.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-swiper/index.scss b/uni_modules/wot-design-uni/components/wd-swiper/index.scss new file mode 100644 index 0000000..76fd34d --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-swiper/index.scss @@ -0,0 +1,23 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +@include b(swiper) { + position: relative; + @include e(track){ + border-radius: $-swiper-radius; + overflow: hidden; + transform: translateY(0); + } + + @include e(item){ + display: flex; + align-items: center; + box-sizing: border-box; + padding: $-swiper-item-padding; + } + + @include e(image){ + width: 100%; + transition: all 0.3s ease; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-swiper/type.ts b/uni_modules/wot-design-uni/components/wd-swiper/type.ts new file mode 100644 index 0000000..cd8c4ce --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-swiper/type.ts @@ -0,0 +1,59 @@ +import type { SwiperIndicatorType } from '../wd-swiper-nav/type' + +/** + * 轮播滑动方向 + */ +export type DirectionType = 'horizontal' | 'vertical' + +/** + * 切换动画 + */ +export type EasingType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' + +/** + * 指示器位置 + */ +export type IndicatorPositionType = 'left' | 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'right' + +export interface SwiperList { + [key: string]: any + value: string +} + +export interface SwiperIndicatorProps { + /** + * 当前轮播在哪一项(下标) + * @default 0 + */ + current?: number + /** + * 轮播滑动方向,包括横向滑动和纵向滑动两个方向 + * @default horizontal + */ + direction?: DirectionType + /** + * 小于这个数字不会显示导航器 + * @default 2 + */ + minShowNum?: number + /** + * 页码信息展示位置 + * @default bottom + */ + indicatorPosition?: IndicatorPositionType + /** + * 是否显示两侧的控制按钮 + * @default false + */ + showControls?: boolean + /** + * 总共的项数 + * @default 0 + */ + total?: number + /** + * 导航器类型,点状(dots)、点条状(dots-bar)、分式(fraction)等 + * @default dots + */ + type?: SwiperIndicatorType +} diff --git a/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue b/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue new file mode 100644 index 0000000..1235046 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue @@ -0,0 +1,336 @@ + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-switch/index.scss b/uni_modules/wot-design-uni/components/wd-switch/index.scss new file mode 100644 index 0000000..6facd99 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-switch/index.scss @@ -0,0 +1,58 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +@include b(switch) { + display: inline-block; + position: relative; + width: $-switch-width; + height: $-switch-height; + border-radius: $-switch-circle-size; + background: $-switch-inactive-color; + font-size: $-switch-size; + transition: all .3s; + + @include e(checkbox) { + position: absolute; + width: 0; + height: 0; + opacity: 0; + margin: 0; + } + @include e(circle) { + box-sizing: border-box; + position: absolute; + display: inline-block; + width: $-switch-circle-size; + height: $-switch-circle-size; + top: 2px; + left: 2px; + background: #fff; + border-radius: 50%; + transition: left .3s ease-out; + box-shadow: 0 2px 4px 0 $-switch-inactive-shadow-color; + + &::after { + position: absolute; + content: ''; + width: calc(200% - 2px); + height: calc(200% - 2px); + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0.5); + border: 1px solid $-switch-border-color; + border-radius: 50%; + } + } + @include when(checked) { + background: $-switch-active-color; + border-color: $-switch-active-color; + + .wd-switch__circle { + left: calc($-switch-width - $-switch-circle-size - 2px); + box-shadow: 0 2px 4px 0 $-switch-active-shadow-color + } + } + @include when(disabled) { + opacity: 0.5; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-switch/wd-switch.vue b/uni_modules/wot-design-uni/components/wd-switch/wd-switch.vue new file mode 100644 index 0000000..52ae160 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-switch/wd-switch.vue @@ -0,0 +1,101 @@ + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-tab/index.scss b/uni_modules/wot-design-uni/components/wd-tab/index.scss new file mode 100644 index 0000000..04ade60 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-tab/index.scss @@ -0,0 +1,9 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + + +@include b(tab) { + width: 100%; + flex-shrink: 0; + box-sizing: border-box; +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue b/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue new file mode 100644 index 0000000..e28b2a9 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue @@ -0,0 +1,128 @@ + + + + diff --git a/uni_modules/wot-design-uni/components/wd-tabbar-item/index.scss b/uni_modules/wot-design-uni/components/wd-tabbar-item/index.scss new file mode 100644 index 0000000..132bf16 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-tabbar-item/index.scss @@ -0,0 +1,51 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(tabbar-item) { + @include e(body) { + :deep(){ + @include when(inactive) { + color: $-dark-color-gray; + } + } + } + } +} + + +@include b(tabbar-item) { + flex: 1; + text-align: center; + text-decoration: none; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + + @include e(body) { + display: flex; + align-items: center; + flex-direction: column; + line-height: 1; + padding: 0; + position: relative; + + :deep(){ + @include when(active) { + color: $-tabbar-active-color; + } + + @include when(inactive) { + color: $-tabbar-inactive-color; + } + } + } + + + @include e(body-title) { + font-size: $-tabbar-item-title-font-size; + line-height: $-tabbar-item-title-line-height; + } + +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-tabbar-item/types.ts b/uni_modules/wot-design-uni/components/wd-tabbar-item/types.ts new file mode 100644 index 0000000..ad1114b --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-tabbar-item/types.ts @@ -0,0 +1,7 @@ +/** + * 折叠面板子项 + */ +export interface TabbarItem { + // 唯一标识 + name: string +} diff --git a/uni_modules/wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue b/uni_modules/wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue new file mode 100644 index 0000000..3ea3596 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue @@ -0,0 +1,158 @@ + + + + diff --git a/uni_modules/wot-design-uni/components/wd-tabbar/index.scss b/uni_modules/wot-design-uni/components/wd-tabbar/index.scss new file mode 100644 index 0000000..878cf20 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-tabbar/index.scss @@ -0,0 +1,44 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(tabbar) { + background: $-dark-background; + } +} + + +@include b(tabbar) { + display: flex; + align-items: center; + flex-wrap: nowrap; + position: relative; + background: $-color-white; + height: $-tabbar-height; + + @include m(round) { + margin-left: 32rpx; + margin-right: 32rpx; + border-radius: 999px; + box-shadow: $-tabbar-box-shadow; + } + + @include m(default) { + @include when(border) { + @include halfPixelBorder('top'); + } + } + + @include when(fixed) { + position: fixed; + left: 0; + bottom: 0; + right: 0; + z-index: 500; + + @include when(safe) { + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + } + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-tabbar/wd-tabbar.vue b/uni_modules/wot-design-uni/components/wd-tabbar/wd-tabbar.vue new file mode 100644 index 0000000..53124a3 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-tabbar/wd-tabbar.vue @@ -0,0 +1,157 @@ + + + + diff --git a/uni_modules/wot-design-uni/components/wd-table-col/index.scss b/uni_modules/wot-design-uni/components/wd-table-col/index.scss new file mode 100644 index 0000000..d1d1f35 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-table-col/index.scss @@ -0,0 +1,46 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +@import '../wd-table/index'; + +.wot-theme-dark { + @include b(table-col) { + @include when(shadow) { + &::after { + background: linear-gradient(270deg, rgba(17, 17, 17, 0.2) 0%, rgba(0, 0, 0, 0) 100%); + } + } + } +} + + +@include b(table-col) { + .wd-table__cell { + width: 100%; + } + + @include m(fixed) { + position: sticky; + z-index: 1; + left: 0; + } + + @include when(shadow) { + &::after { + content: ' '; + position: absolute; + height: 100%; + right: -30rpx; + top: 0; + width: 30rpx; + height: 100%; + background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%); + } + } + + .wd-table__cell:last-child { + @include when(border) { + border-bottom: none; + } + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-table-col/types.ts b/uni_modules/wot-design-uni/components/wd-table-col/types.ts new file mode 100644 index 0000000..6538657 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-table-col/types.ts @@ -0,0 +1,20 @@ +type AlignType = 'left' | 'center' | 'right' // 列的对齐方式 + +export type SortDirection = 0 | 1 | -1 // 列的排序方向 + +export interface TableColumn { + // 列对应字段 + prop: string + // 列对应字段标题 + label: string + // 列宽度 + width: string + // 是否开启列排序 + sortable?: boolean + // 列的对齐方式,可选值left,center,right + align?: AlignType + // 列的排序方向 + sortDirection: SortDirection + // 是否i固定列 + fixed?: boolean +} diff --git a/uni_modules/wot-design-uni/components/wd-table-col/wd-table-col.vue b/uni_modules/wot-design-uni/components/wd-table-col/wd-table-col.vue new file mode 100644 index 0000000..8244714 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-table-col/wd-table-col.vue @@ -0,0 +1,185 @@ + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-table/index.scss b/uni_modules/wot-design-uni/components/wd-table/index.scss new file mode 100644 index 0000000..ff7d957 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-table/index.scss @@ -0,0 +1,137 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +.wot-theme-dark { + @include b(table) { + background: $-dark-background; + + @include when(border) { + border: 1px solid $-dark-border-color; + } + + @include e(cell) { + color: $-dark-color; + background: $-dark-background2; + + @include when(stripe) { + background: $-dark-background4; + } + + @include when(border) { + border-right: 1px solid $-dark-border-color; + border-bottom: 1px solid $-dark-border-color; + } + + @include when(shadow) { + &::after { + background: linear-gradient(270deg, rgba(17, 17, 17, 0.2) 0%, rgba(0, 0, 0, 0) 100%); + } + } + } + } +} + + + +@include b(table) { + position: relative; + width: 100%; + overflow: auto; + background: $-table-bg; + + @include when(border) { + border: 1px solid $-table-border-color; + } + + + :deep() { + .wd-table-col:last-child { + .wd-table__cell { + @include when(border) { + border-right: none; + } + } + } + } + + @include e(header) { + width: 100%; + height: 50px; + position: sticky; + top: 0; + z-index: 2; + display: flex; + overflow-x: auto; + white-space: nowrap; + } + + @include e(body) { + width: 100%; + box-sizing: border-box; + } + + @include e(content) { + display: flex; + } + + @include e(cell) { + display: flex; + align-items: center; + box-sizing: border-box; + background: $-table-bg; + width: 100px; + min-height: 50px; + padding: 8px 10px; + font-size: $-table-font-size; + color: $-table-color; + --wot-sort-button-height: 30px; + + @include when(border) { + border-right: 1px solid $-table-border-color; + border-bottom: 1px solid $-table-border-color; + } + + @include when(stripe) { + background: $-table-stripe-bg; + } + + @include when(fixed) { + position: sticky; + z-index: 1; + left: 0; + } + + @include when(shadow) { + &::after { + content: ' '; + position: absolute; + height: 100%; + right: -30rpx; + top: 0; + width: 30rpx; + height: 100%; + background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%); + } + } + + @include when(left) { + justify-content: flex-start; + } + + @include when(center) { + justify-content: center; + } + + @include when(right) { + justify-content: flex-end; + } + } + + + @include e(value) { + @include when(ellipsis) { + word-break: break-all; + @include multiEllipsis(2); + } + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-table/wd-table.vue b/uni_modules/wot-design-uni/components/wd-table/wd-table.vue new file mode 100644 index 0000000..18df332 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-table/wd-table.vue @@ -0,0 +1,384 @@ + + + + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-tabs/index.scss b/uni_modules/wot-design-uni/components/wd-tabs/index.scss new file mode 100644 index 0000000..0498cd3 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-tabs/index.scss @@ -0,0 +1,279 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + + +.wot-theme-dark { + @include b(tabs) { + background: $-dark-background2; + + @include e(nav) { + background: $-dark-background2; + } + + @include e(nav-item) { + color: $-dark-color3; + + @include when(active) { + font-weight: 600; + color: $-dark-color; + } + + @include when(disabled) { + color: $-dark-color-gray; + } + + } + + @include e(map-nav-btn) { + background-color: $-dark-background4; + color: $-dark-color3; + + @include when(active) { + color: $-dark-color; + border: 1px solid $-tabs-nav-active-color; + background-color: $-dark-background; + } + + @include when(disabled) { + color: $-dark-color-gray; + border-color: #f4f4f4; + } + } + + @include e(map-btn) { + background: $-dark-background2; + color: $-dark-color3; + } + + @include e(map-header) { + background: $-dark-background2; + color: $-dark-color; + + &::after { + background: $-dark-background4; + } + } + + @include e(map-body) { + background: $-dark-background2; + } + + } +} + +@include b(tabs) { + position: relative; + background: #fff; + width: 100%; + + @include e(nav) { + left: 0; + right: 0; + height: $-tabs-nav-height; + background-color: #fff; + width: 100%; + position: relative; + + @include m(wrap) { + height: 100%; + overflow: hidden; + } + + @include m(sticky) { + width: 100vw; + } + } + + @include e(nav-container) { + position: relative; + display: flex; + user-select: none; + } + + @include e(nav-item) { + flex: 1; + min-width: 0; + text-align: center; + height: $-tabs-nav-height; + line-height: $-tabs-nav-height; + font-size: $-tabs-nav-fs; + color: $-tabs-nav-color; + transition: color .3s; + + @include when(active) { + font-weight: 600; + } + + @include when(disabled) { + color: $-tabs-nav-disabled-color; + } + } + + @include e(line) { + position: absolute; + bottom: 4px; + left: 0; + height: $-tabs-nav-line-height; + background: $-tabs-nav-line-bg-color; + z-index: 1; + border-radius: 1.5px; + } + + @include e(container) { + overflow: hidden; + } + + @include e(body) { + position: relative; + width: 100%; + height: 100%; + + @include when(animated) { + display: flex; + transition-property: left; + } + } + + @include e(map) { + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 1; + } + + @include e(map-btn) { + position: absolute; + right: 0; + top: 0; + width: $-tabs-nav-height; + height: $-tabs-nav-height; + line-height: $-tabs-nav-height; + text-align: center; + color: $-tabs-nav-map-arrow-color; + z-index: 1; + background: $-tabs-nav-bg; + -webkit-tap-highlight-color: transparent; + + &::before { + position: absolute; + content: ''; + top: 0; + left: -24px; + width: 24px; + height: $-tabs-nav-height - 1; + background: $-tabs-nav-map-btn-before-bg; + } + } + + @include e(map-arrow) { + display: block; + transition: transform .3s; + + @include when(open) { + transform: rotate(180deg); + } + } + + @include e(map-header) { + position: relative; + padding-left: 17px; + height: $-tabs-nav-height; + line-height: $-tabs-nav-height; + font-size: $-tabs-nav-map-fs; + color: $-tabs-nav-map-color; + transition: opacity .3s; + background: #fff; + opacity: 0; + + @include halfPixelBorder; + + &::after { + z-index: 3; + } + } + + @include e(map-body) { + display: flex; + flex-wrap: wrap; + padding: 20px 15px 10px; + background: #fff; + transition: transform .3s; + transform: scaleY(0); + transform-origin: center top; + + @include when(open) { + transform: scaleY(1); + } + } + + @include e(map-nav-item) { + flex-basis: 33%; + + &:nth-child(3n + 2) { + text-align: center; + } + + &:nth-child(3n + 3) { + text-align: right; + } + } + + @include e(map-nav-btn) { + @include buttonClear; + @include lineEllipsis; + display: inline-block; + width: 107px; + height: 32px; + line-height: 32px; + background-color: $-tabs-nav-map-button-back-color; + border-color: transparent; + margin-bottom: 10px; + border-radius: $-tabs-nav-map-button-radius; + color: $-tabs-nav-map-color; + font-size: $-tabs-nav-map-fs; + text-align: center; + transition: color .3s, border-color .3s; + + @include when(active) { + color: $-tabs-nav-active-color; + border: 1px solid $-tabs-nav-active-color; + background-color: $-tabs-nav-bg + } + + @include when(disabled) { + color: $-tabs-nav-disabled-color; + border-color: #f4f4f4; + } + } + + @include e(mask) { + position: absolute; + top: $-tabs-nav-height; + left: 0; + right: 0; + bottom: 0; + background: $-tabs-nav-map-modal-bg; + opacity: 0; + transition: opacity .3s; + } + + @include when(slide) { + .wd-tabs__nav-item { + flex: 0 0 auto; + padding: 0 17px; + } + } + + @include when(map) { + .wd-tabs__nav--wrap { + padding-right: 40px; + } + } +} + +@media screen and (max-width: 330px) { + .wd-tabs__map-nav-btn { + width: 90px; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue b/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue new file mode 100644 index 0000000..f1fd302 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue @@ -0,0 +1,493 @@ + + + + diff --git a/uni_modules/wot-design-uni/components/wd-tag/index.scss b/uni_modules/wot-design-uni/components/wd-tag/index.scss new file mode 100644 index 0000000..f2b092f --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-tag/index.scss @@ -0,0 +1,114 @@ +@import '../common/abstracts/variable'; +@import '../common/abstracts/mixin'; + +@mixin tag-type-style ($normalColor, $normalBg) { + background: $normalBg; + + @include when(plain) { + background: transparent; + color: $normalColor; + border: 1px solid $normalColor; + padding: 0 4px; + } + @include when(round) { + line-height: 1.2; + font-size: $-tag-fs; + padding: 4px 11px; + background: transparent; + color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-color); + border: 1px solid if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color); + border-radius: $-tag-round-radius; + } + @include when(mark) { + padding: 1px 6px; + border-radius: $-tag-mark-radius; + + @include when(plain) { + padding: 0 6px; + } + } + @include when(active) { + color: $-tag-primary-color; + border-color: $-tag-primary-color; + } +} +@include b(tag) { + font-size: $-tag-small-fs; + display: inline-block; + color: $-tag-color; + padding: 0 3px; + border-radius: 2px; + transition: opacity .3s; + vertical-align: middle; + + @include when(default) { + @include tag-type-style($-tag-info-color, $-tag-info-bg); + } + @include when(primary) { + @include tag-type-style($-tag-primary-color, $-tag-primary-bg); + } + @include when(danger) { + @include tag-type-style($-tag-danger-color, $-tag-danger-bg); + } + @include when(warning) { + @include tag-type-style($-tag-warning-color, $-tag-warning-bg); + } + @include when(success) { + @include tag-type-style($-tag-success-color, $-tag-success-bg); + } + @include when(icon) { + font-size: $-tag-fs; + line-height: 1.2; + padding: 2px 5px; + } + @include when(dynamic) { + box-sizing: border-box; + width: 88px; + transition: .3s; + + &:active { + color: $-tag-primary-color; + border-color: $-tag-primary-color; + } + } + @include when(dynamic-input) { + border-color: $-tag-primary-color; + } + @include edeep(icon) { + display: inline-block; + margin-right: 4px; + font-size: $-tag-fs; + line-height: 1.2; + vertical-align: baseline; + } + @include e(text) { + display: inline-block; + vertical-align: text-top; + } + @include e(add-text) { + width: 60px; + height: 14px; + min-height: 14px; + display: inline-block; + font-size: $-tag-fs; + vertical-align: middle; + padding: 0; + } + @include edeep(close) { + display: inline-block; + margin-left: 24px; + margin-right: -4px; + font-size: $-tag-close-size; + height: 14px; + line-height: 1.1; + vertical-align: text-bottom; + color: $-tag-close-color; + + &:active { + color: $-tag-close-active-color; + } + } + @include edeep(add) { + vertical-align: bottom; + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-tag/wd-tag.vue b/uni_modules/wot-design-uni/components/wd-tag/wd-tag.vue new file mode 100644 index 0000000..688a3f1 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-tag/wd-tag.vue @@ -0,0 +1,167 @@ + + + + + diff --git a/uni_modules/wot-design-uni/components/wd-textarea/index.scss b/uni_modules/wot-design-uni/components/wd-textarea/index.scss new file mode 100644 index 0000000..8ca116e --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-textarea/index.scss @@ -0,0 +1,350 @@ +@import "../common/abstracts/variable"; +@import "../common/abstracts/mixin"; + +.wot-theme-dark { + @include b(textarea) { + background: $-dark-background2; + + &::after { + background: $-dark-color-gray; + } + + @include when(not-empty) { + &:not(.is-disabled) { + &::after { + background-color: $-dark-color; + } + } + } + + @include e(value) { + background: $-dark-background2; + } + + @include e(inner) { + color: $-dark-color; + + &::-webkit-input-placeholder { + color: $-dark-color3; + } + } + + @include e(placeholder) { + color: $-dark-color3; + } + + @include e(count) { + color: $-dark-color3; + background: transparent; + } + + @include e(count-current) { + color: $-dark-color; + } + + :deep(.wd-textarea__icon) { + color: $-dark-color; + background: transparent; + } + + @include when(cell) { + background-color: $-dark-background2; + + @include when(border) { + @include halfPixelBorder("top", $-textarea-cell-padding, $-dark-border-color); + } + } + + @include when(disabled) { + + .wd-textarea__inner { + color: $-dark-color-gray; + background: transparent; + } + } + + + @include e(label) { + color: $-dark-color; + } + } +} + +@include b(textarea) { + position: relative; + -webkit-tap-highlight-color: transparent; + text-align: left; + background: $-textarea-bg; + padding: $-textarea-cell-padding $-textarea-padding; + + &::after { + position: absolute; + display: none; + content: ""; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: $-textarea-border-color; + transform: scaleY(0.5); + transition: background-color 0.2s ease-in-out; + } + + + + @include e(label) { + position: relative; + width: $-input-cell-label-width; + color: $-cell-title-color; + margin-right: $-cell-padding; + box-sizing: border-box; + font-size: $-textarea-fs; + flex-shrink: 0; + + @include when(required) { + padding-left: 12px; + + &::after { + position: absolute; + left: 0; + top: 2px; + content: "*"; + font-size: $-cell-required-size; + line-height: 1.1; + color: $-cell-required-color; + } + } + } + + @include e(label-inner) { + display: inline-block; + line-height: $-cell-line-height; + font-size: $-textarea-fs; + } + + @include e(prefix) { + margin-right: $-textarea-icon-margin; + font-size: $-textarea-fs; + + :deep(.wd-textarea__icon) { + margin-left: 0; + } + } + + @include e(suffix) { + flex-shrink: 0; + margin-left: $-textarea-icon-margin; + line-height: initial; + } + + @include e(value) { + position: relative; + padding: 0; + font-size: 0; + background: $-textarea-bg; + + @include when(show-limit) { + padding-bottom: 36px; + } + } + + + @include e(inner) { + padding: 0; + width: 100%; + font-size: $-textarea-fs; + line-height: $-cell-line-height; + color: $-textarea-color; + outline: none; + box-sizing: border-box; + border: none; + word-break: break-word; + + &::-webkit-input-placeholder { + color: $-input-placeholder-color; + } + + @include when(suffix) { + padding-right: calc($-textarea-icon-size + 8px); + } + } + + @include e(suffix) { + position: absolute; + right: 0; + top: 0; + bottom: 0; + } + + @include edeep(icon) { + margin-left: $-textarea-icon-margin; + font-size: $-textarea-icon-size; + color: $-textarea-icon-color; + background: $-textarea-bg; + vertical-align: middle; + line-height: $-cell-line-height; + } + + @include edeep(clear) { + margin-left: $-textarea-icon-margin; + font-size: $-textarea-icon-size; + color: $-textarea-clear-color; + vertical-align: middle; + background: $-textarea-bg; + line-height: $-cell-line-height; + } + + + @include e(count) { + position: absolute; + bottom: 8px; + right: 0; + font-size: $-textarea-count-fs; + color: $-textarea-count-color; + background: $-textarea-bg; + line-height: 20px; + display: inline-flex; + } + + @include e(count-current) { + color: $-textarea-count-current-color; + + @include when(error) { + color: $-input-error-color; + } + } + + @include e(placeholder) { + color: $-input-placeholder-color; + + &.is-error { + color: $-input-error-color; + } + } + + + @include e(readonly-mask) { + position: absolute; + top: 0; + left: 0; + z-index: 2; + width: 100%; + height: 100%; + } + + @include e(error-message){ + color: $-form-item-error-message-color; + font-size: $-form-item-error-message-font-size; + line-height: $-form-item-error-message-line-height; + text-align: left; + vertical-align: middle; + } + + @include when(not-empty) { + &:not(.is-disabled) { + &::after { + background-color: $-textarea-not-empty-border-color; + } + } + } + + @include when(disabled) { + + .wd-textarea__inner { + color: $-input-disabled-color; + background: transparent; + } + } + + @include when(error) { + + .wd-textarea__inner { + color: $-input-error-color; + background: transparent; + } + } + + @include when(no-border) { + &::after { + display: none; + } + } + + @include when(auto-height) { + &:not(.is-cell) { + padding: 5px 0; + } + + &::after { + display: block; + } + } + + @include when(cell) { + display: flex; + + &.is-error::after { + background: $-textarea-cell-border-color; + } + + .wd-textarea__value { + flex: 1; + } + + :deep(.wd-textarea__icon) { + height: $-textarea-cell-height; + line-height: $-textarea-cell-height; + } + + .wd-textarea__prefix { + display: inline-block; + margin-right: $-cell-icon-right; + } + + &.wd-textarea::after { + display: none; + } + + + .wd-textarea__inner { + padding-right: 24px; + } + + .wd-textarea__suffix { + right: 0; + } + + @include when(center) { + align-items: center; + } + + @include when(border) { + @include halfPixelBorder("top", $-textarea-cell-padding); + } + } + + @include when(large) { + padding: $-textarea-cell-padding-large; + + .wd-textarea__prefix { + font-size: $-textarea-fs-large; + } + + .wd-textarea__label-inner { + font-size: $-textarea-fs-large; + } + + .wd-textarea__inner { + font-size: $-textarea-fs-large; + } + + .wd-textarea__count { + font-size: $-textarea-count-fs-large; + } + + :deep(.wd-textarea__icon), + :deep(.wd-textarea__clear) { + font-size: $-textarea-icon-size-large; + } + } +} \ No newline at end of file diff --git a/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue b/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue new file mode 100644 index 0000000..ca326a7 --- /dev/null +++ b/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue @@ -0,0 +1,339 @@ +