From 0ae461f3743ca7a430beb5f83c619ddc96015d18 Mon Sep 17 00:00:00 2001 From: xiaoyatong <84436086+xiaoyatong@users.noreply.github.com> Date: Wed, 9 Aug 2023 22:05:30 +0800 Subject: [PATCH] Next theme (#1298) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(Address): 修复Address组件通过点击CloseIcon和Overlay关闭后，无法再次打开的问题 (#1233) * fix(button): 渐变色导致边框出现重叠 (#1250) * chore(release): v2.0.6 * feat: uploader 添加上传的响应数据 (#1251) * feat: formitem label 支持 reactnode (#1254) * chore: 优化 any 类型 (#1222) * docs(SearchBar): 补充 onClear 属性说明 (#1256) * chore(release): v2.0.7 * feat: 增加了space组件 (#1259) * refactor: tabs 去除 console (#1261) Remove console log * chore(script): 简化开发环境启动逻辑 (#1264) * chore(scriptt): 简化开发环境启动逻辑 * chore(script): 调整 taro demo 生成逻辑 * chore(release): v2.0.8 * fix: space 版本号修改为 2.0 (#1265) * chore(config): 优化 taro demo 环境配置文件 (#1266) * docs: cascader 文档更新 (#1270) * feat(notify): 支持函数调用的展开和关闭 (#1271) * docs: 升级文档更新 (#1274) * docs: tag 文档和 demo 同步 (#1275) * docs: tag 文档和 demo 同步 * docs: tag 文档和 demo 同步 * chore(release): v2.0.9 * feat: 日历组件支持在 footer 部分的children自定义，增加demo 日历+datepicker的交互demo * docs: 补充文档 * fix: elevator 计算索引出现 -1，导致组件运行报错 (#1276) * fix: review * feat: loading 组件 (#1204) * feat: loading功能实现,目前由于taro环境在windows10下无法启动,所以只测试了h5版本的代码 * fix:修正eslint的一些错误 * fix: 修正测试用例用的问题, 坑: 使用npm run add后生成的模板,tsx里面会有引入scss,但是实际上并不能 引入这个文件,否则执行测试就报错 * fix: eslint格式规范修正 * fix: 排列方式的设置统一改成和其他组件一样, direction=horizontal|vertical * fix: 去掉一些可以用主题和样式来配置的属性,修正了对taro的支持 * fix: 根据规范,修改代码 * fix: 修正一个导出类型的路径bug * feat: 日历支持footer的children定义，增加日历+datepicker的demo (#1277) * feat: 日历组件支持在 footer 部分的children自定义，增加demo 日历+datepicker的交互demo * docs: 补充文档 * fix: review * fix: loading 组件导出 props 类型 (#1278) * feat: 修改名字，废弃-0 * chore(release): v2.0.10 * feat: 修订名称。 * docs: numberkeyboard 的 type 属性类型更新 (#1284) * feat: 新增 tour 引导组件 (#1279) * docs: step 组件的 description 属性示例改为节点的实现方式 (#1289) * docs: divider 组件的 styles 属性示例改为 style (#1290) * fix: numberkeyboard 设置标题后，完成按钮应该触发 onConfirm 事件 (#1285) * docs: numberkeyboard 的 type 属性类型更新 * fix: numberkeyboard 设置标题后，完成按钮应该触发 onConfirm 事件 * fix: input 组件点击清除图标无法清空内容 (#1292) * docs: 调整 image tao 文档中引入包名 (#1295) * fix: uploader taro-h5 上传状态样式错乱 (#1293) * fix: uploader h5/taro 增加校验 (#1297) * fix: 修改migrate文档 * fix: 调整文档 * fix: 修改v1升级到v2的兼容文档 * fix: 提交h5的uploader样式错乱的问题 * fix: 提交uploader校验判断 * fix: h5下多选上传时 uid 重复的问题 (#1269) Co-authored-by: liuqh * feat: 通用字号。 * feat: 通用+button，button的样式展示逻辑做了修订。 * docs: button * feat: button 增加 rightIcon ，增加仅有icon的样式处理。 --------- Co-authored-by: Tralafalgar Wang <578895238@qq.com> Co-authored-by: oasis-cloud Co-authored-by: 逍遥 <49544090+SunLxy@users.noreply.github.com> Co-authored-by: junjun666 <35680677+junjun666@users.noreply.github.com> Co-authored-by: ivan-My <252511374@qq.com> Co-authored-by: vapao Co-authored-by: Eiinu Co-authored-by: mike8625 Co-authored-by: Liuqh233 <528851597@qq.com> Co-authored-by: liuqh --- CHANGELOG.md | 45 ++ migrate-from-v1.md | 7 +- package.json | 20 +- scripts/format-table-markdown.js | 1 - scripts/taro/generate-taro-pages.js | 47 +-- src/config.json | 35 +- src/locales/base.ts | 5 + src/locales/en-US.ts | 5 + src/locales/id-ID.ts | 5 + src/locales/tr-TR.ts | 5 + src/locales/zh-CN.ts | 5 + src/locales/zh-TW.ts | 5 + src/locales/zh-UG.ts | 5 + src/packages/actionsheet/actionsheet.scss | 10 +- .../address/__test__/address.spec.tsx | 59 ++- src/packages/address/address.scss | 2 +- src/packages/address/address.taro.tsx | 58 ++- src/packages/address/address.tsx | 57 ++- src/packages/address/demo.taro.tsx | 42 +- src/packages/address/demo.tsx | 51 ++- src/packages/address/doc.en-US.md | 28 +- src/packages/address/doc.md | 125 +++++- src/packages/address/doc.taro.md | 126 +++++- src/packages/address/doc.zh-TW.md | 28 +- src/packages/audio/audio.scss | 4 +- src/packages/audio/audio.tsx | 38 +- src/packages/audio/demo.scss | 2 +- src/packages/audio/doc.en-US.md | 6 +- src/packages/audio/doc.md | 6 +- src/packages/avatar/avatar.taro.tsx | 6 +- src/packages/avatar/avatar.tsx | 6 +- src/packages/avatar/demo.taro.tsx | 2 +- src/packages/avatar/demo.tsx | 2 +- src/packages/avatar/doc.en-US.md | 2 +- src/packages/avatar/doc.md | 2 +- src/packages/avatar/doc.taro.md | 2 +- src/packages/backtop/backtop.scss | 2 +- src/packages/backtop/backtop.taro.tsx | 5 +- src/packages/backtop/backtop.tsx | 5 +- src/packages/backtop/doc.en-US.md | 2 +- src/packages/backtop/doc.md | 2 +- src/packages/backtop/doc.taro.md | 2 +- src/packages/badge/doc.en-US.md | 4 +- src/packages/badge/doc.md | 4 +- src/packages/badge/doc.taro.md | 4 +- src/packages/badge/doc.zh-TW.md | 4 +- src/packages/barrage/barrage.scss | 4 +- src/packages/button/button.scss | 107 +++-- src/packages/button/button.taro.tsx | 27 +- src/packages/button/button.tsx | 28 +- src/packages/button/demo.taro.tsx | 92 +++-- src/packages/button/demo.tsx | 92 +++-- src/packages/button/doc.en-US.md | 89 ++-- src/packages/button/doc.md | 89 ++-- src/packages/button/doc.taro.md | 91 ++-- src/packages/button/doc.zh-TW.md | 89 ++-- src/packages/calendar/calendar.scss | 9 +- src/packages/calendar/calendar.taro.tsx | 2 + src/packages/calendar/calendar.tsx | 2 + src/packages/calendar/demo.scss | 70 +++- src/packages/calendar/demo.taro.tsx | 141 ++++++- src/packages/calendar/demo.tsx | 154 +++++-- src/packages/calendar/doc.en-US.md | 136 +++++- src/packages/calendar/doc.md | 137 ++++++- src/packages/calendar/doc.taro.md | 139 ++++++- src/packages/calendar/doc.zh-TW.md | 137 ++++++- .../calendaritem/calendaritem.taro.tsx | 2 + src/packages/calendaritem/calendaritem.tsx | 5 +- src/packages/card/card.scss | 4 +- src/packages/cascader/doc.en-US.md | 4 +- src/packages/cascader/doc.md | 8 +- src/packages/cascader/doc.taro.md | 10 +- src/packages/cascader/doc.zh-TW.md | 8 +- src/packages/cell/doc.en-US.md | 10 +- src/packages/cell/doc.md | 10 +- src/packages/cell/doc.taro.md | 10 +- src/packages/cell/doc.zh-TW.md | 10 +- src/packages/checkbox/checkbox.scss | 2 +- src/packages/circleprogress/demo.taro.tsx | 6 +- src/packages/circleprogress/demo.tsx | 6 +- src/packages/circleprogress/doc.en-US.md | 4 +- src/packages/circleprogress/doc.md | 4 +- src/packages/circleprogress/doc.taro.md | 4 +- src/packages/circleprogress/doc.zh-TW.md | 4 +- src/packages/col/col.taro.tsx | 3 +- src/packages/col/col.tsx | 3 +- src/packages/collapse/doc.en-US.md | 6 +- src/packages/collapse/doc.md | 6 +- src/packages/collapse/doc.taro.md | 6 +- src/packages/collapse/doc.zh-TW.md | 6 +- src/packages/collapseitem/collapseitem.scss | 2 +- .../__test__/configprovider.spec.tsx | 2 +- src/packages/configprovider/doc.en-US.md | 28 +- src/packages/configprovider/doc.md | 28 +- src/packages/configprovider/doc.taro.md | 28 +- src/packages/configprovider/doc.zh-TW.md | 28 +- src/packages/configprovider/types.ts | 5 + src/packages/dialog/config.ts | 3 +- src/packages/dialog/dialog.scss | 4 +- src/packages/dialog/dialog.taro.tsx | 5 +- src/packages/dialog/dialog.tsx | 5 +- src/packages/divider/doc.en-US.md | 4 +- src/packages/divider/doc.md | 2 +- src/packages/divider/doc.taro.md | 4 +- src/packages/divider/doc.zh-TW.md | 2 +- src/packages/elevator/elevator.taro.tsx | 2 +- src/packages/elevator/elevator.tsx | 2 +- src/packages/form/doc.en-US.md | 1 + src/packages/form/doc.md | 1 + src/packages/form/doc.taro.md | 1 + src/packages/form/doc.zh-TW.md | 1 + src/packages/formitem/types.ts | 4 +- src/packages/grid/doc.en-US.md | 2 +- src/packages/grid/doc.md | 2 +- src/packages/grid/doc.taro.md | 2 +- src/packages/grid/doc.zh-TW.md | 2 +- src/packages/image/doc.taro.md | 24 +- src/packages/indicator/demo.scss | 2 +- src/packages/indicator/doc.en-US.md | 2 +- src/packages/indicator/doc.md | 2 +- src/packages/indicator/doc.taro.md | 2 +- src/packages/indicator/doc.zh-TW.md | 2 +- .../infiniteloading/infiniteloading.scss | 2 +- src/packages/input/demo.taro.tsx | 14 +- src/packages/input/demo.tsx | 14 +- src/packages/input/doc.en-US.md | 2 +- src/packages/input/doc.md | 2 +- src/packages/input/doc.taro.md | 2 +- src/packages/input/doc.zh-TW.md | 2 +- src/packages/input/input.tsx | 4 +- src/packages/inputnumber/demo.scss | 6 +- src/packages/inputnumber/doc.en-US.md | 2 +- src/packages/inputnumber/doc.md | 2 +- src/packages/inputnumber/doc.taro.md | 2 +- src/packages/inputnumber/doc.zh-TW.md | 2 +- src/packages/layout/demo.scss | 2 +- .../loading/__test__/loading.spec.tsx | 32 ++ src/packages/loading/demo.taro.tsx | 94 +++++ src/packages/loading/demo.tsx | 92 +++++ src/packages/loading/doc.en-US.md | 224 ++++++++++ src/packages/loading/doc.md | 224 ++++++++++ src/packages/loading/doc.taro.md | 224 ++++++++++ src/packages/loading/doc.zh-TW.md | 224 ++++++++++ src/packages/loading/index.taro.ts | 4 + src/packages/loading/index.ts | 4 + src/packages/loading/loading.scss | 34 ++ src/packages/loading/loading.taro.tsx | 64 +++ src/packages/loading/loading.tsx | 64 +++ src/packages/menu/doc.en-US.md | 2 +- src/packages/menu/doc.md | 2 +- src/packages/menu/doc.taro.md | 2 +- src/packages/menu/doc.zh-TW.md | 2 +- src/packages/menuitem/menuitem.scss | 2 +- src/packages/navbar/doc.en-US.md | 4 +- src/packages/navbar/doc.md | 4 +- src/packages/navbar/doc.taro.md | 4 +- src/packages/navbar/doc.zh-TW.md | 4 +- src/packages/notify/demo.taro.tsx | 43 +- src/packages/notify/doc.en-US.md | 2 +- src/packages/notify/doc.md | 2 +- src/packages/notify/doc.taro.md | 42 +- src/packages/notify/doc.zh-TW.md | 2 +- src/packages/notify/index.taro.ts | 1 + src/packages/notify/notify.taro.tsx | 52 ++- src/packages/numberkeyboard/doc.en-US.md | 2 +- src/packages/numberkeyboard/doc.md | 2 +- src/packages/numberkeyboard/doc.taro.md | 2 +- src/packages/numberkeyboard/doc.zh-TW.md | 2 +- .../numberkeyboard/numberkeyboard.scss | 2 +- .../numberkeyboard/numberkeyboard.taro.tsx | 2 +- .../numberkeyboard/numberkeyboard.tsx | 2 +- src/packages/pagination/doc.en-US.md | 8 +- src/packages/pagination/doc.md | 8 +- src/packages/pagination/doc.taro.md | 8 +- src/packages/pagination/doc.zh-TW.md | 8 +- src/packages/picker/picker.scss | 2 +- src/packages/picker/pickerpanel.taro.tsx | 10 +- src/packages/picker/pickerpanel.tsx | 8 +- src/packages/popover/doc.en-US.md | 5 +- src/packages/popover/doc.md | 5 +- src/packages/popover/doc.taro.md | 4 +- src/packages/popover/popover.taro.tsx | 47 ++- src/packages/popover/popover.tsx | 49 ++- src/packages/price/price.scss | 2 +- src/packages/pulltorefresh/demo.taro.tsx | 4 +- src/packages/pulltorefresh/demo.tsx | 4 +- src/packages/radio/doc.en-US.md | 4 +- src/packages/radio/doc.md | 4 +- src/packages/radio/doc.taro.md | 4 +- src/packages/radio/doc.zh-TW.md | 4 +- src/packages/radio/radio.scss | 6 +- src/packages/range/range.scss | 4 +- src/packages/range/range.taro.tsx | 16 +- src/packages/range/range.tsx | 21 +- src/packages/rate/doc.en-US.md | 2 +- src/packages/rate/doc.md | 2 +- src/packages/rate/doc.taro.md | 2 +- src/packages/rate/doc.zh-TW.md | 2 +- src/packages/rate/rate.taro.tsx | 2 +- src/packages/rate/rate.tsx | 2 +- src/packages/row/row.taro.tsx | 5 +- src/packages/row/row.tsx | 5 +- src/packages/searchbar/demo.taro.tsx | 6 +- src/packages/searchbar/demo.tsx | 6 +- src/packages/searchbar/doc.en-US.md | 10 +- src/packages/searchbar/doc.md | 10 +- src/packages/searchbar/doc.taro.md | 9 +- src/packages/searchbar/searchbar.scss | 2 +- src/packages/searchbar/searchbar.taro.tsx | 35 +- src/packages/searchbar/searchbar.tsx | 37 +- src/packages/shortpassword/shortpassword.scss | 14 +- src/packages/sidenavbar/doc.en-US.md | 4 +- src/packages/sidenavbar/doc.md | 4 +- src/packages/sidenavbar/doc.taro.md | 4 +- src/packages/sidenavbar/doc.zh-TW.md | 4 +- src/packages/sidenavbar/sidenavbar.scss | 4 +- src/packages/signature/doc.en-US.md | 4 +- src/packages/signature/doc.md | 4 +- src/packages/signature/doc.taro.md | 4 +- src/packages/signature/doc.zh-TW.md | 4 +- src/packages/skeleton/skeleton.scss | 6 +- .../__snapshots__/space.spec.tsx.snap | 64 +++ src/packages/space/__test__/space.spec.tsx | 70 ++++ src/packages/space/demo.taro.tsx | 120 ++++++ src/packages/space/demo.tsx | 114 +++++ src/packages/space/doc.en-US.md | 129 ++++++ src/packages/space/doc.md | 128 ++++++ src/packages/space/doc.taro.md | 128 ++++++ src/packages/space/doc.zh-TW.md | 128 ++++++ src/packages/space/index.taro.ts | 3 + src/packages/space/index.ts | 3 + src/packages/space/space.scss | 73 ++++ src/packages/space/space.taro.tsx | 54 +++ src/packages/space/space.tsx | 54 +++ src/packages/step/step.scss | 2 +- src/packages/steps/demo.scss | 2 +- src/packages/steps/demo.tsx | 14 +- src/packages/steps/doc.en-US.md | 10 +- src/packages/steps/doc.md | 10 +- src/packages/steps/doc.taro.md | 10 +- src/packages/steps/doc.zh-TW.md | 10 +- src/packages/swipe/doc.en-US.md | 8 +- src/packages/swipe/doc.md | 8 +- src/packages/swipe/doc.taro.md | 8 +- src/packages/swipe/swipe.taro.tsx | 32 +- src/packages/swipe/swipe.tsx | 37 +- src/packages/switch/switch.scss | 2 +- src/packages/switch/switch.taro.tsx | 8 +- src/packages/switch/switch.tsx | 8 +- src/packages/tabbar/doc.en-US.md | 4 +- src/packages/tabbar/doc.md | 4 +- src/packages/tabbar/doc.taro.md | 4 +- src/packages/tabbar/doc.zh-TW.md | 4 +- src/packages/tabbaritem/tabbaritem.taro.tsx | 2 + src/packages/tabbaritem/tabbaritem.tsx | 2 + src/packages/table/table.scss | 6 +- src/packages/tabs/doc.en-US.md | 4 +- src/packages/tabs/doc.md | 4 +- src/packages/tabs/doc.taro.md | 4 +- src/packages/tabs/doc.zh-TW.md | 4 +- src/packages/tabs/tabs.scss | 2 +- src/packages/tabs/tabs.taro.tsx | 1 - src/packages/tag/doc.en-US.md | 73 +--- src/packages/tag/doc.md | 128 +----- src/packages/tag/doc.taro.md | 127 +----- src/packages/tag/tag.taro.tsx | 7 +- src/packages/tag/tag.tsx | 7 +- src/packages/textarea/doc.en-US.md | 8 +- src/packages/textarea/doc.md | 8 +- src/packages/textarea/doc.taro.md | 4 +- src/packages/textarea/doc.zh-TW.md | 4 +- src/packages/textarea/textarea.tsx | 19 +- src/packages/timeselect/doc.en-US.md | 8 +- src/packages/timeselect/doc.md | 8 +- src/packages/timeselect/doc.taro.md | 8 +- src/packages/timeselect/doc.zh-TW.md | 8 +- src/packages/timeselect/timeselect.scss | 6 +- src/packages/toast/toast.scss | 4 +- src/packages/tour/__test__/tour.spec.tsx | 154 +++++++ src/packages/tour/demo.scss | 62 +++ src/packages/tour/demo.taro.tsx | 308 ++++++++++++++ src/packages/tour/demo.tsx | 304 ++++++++++++++ src/packages/tour/doc.en-US.md | 386 +++++++++++++++++ src/packages/tour/doc.md | 386 +++++++++++++++++ src/packages/tour/doc.taro.md | 386 +++++++++++++++++ src/packages/tour/index.taro.ts | 5 + src/packages/tour/index.ts | 5 + src/packages/tour/tour.scss | 78 ++++ src/packages/tour/tour.taro.tsx | 268 ++++++++++++ src/packages/tour/tour.tsx | 262 ++++++++++++ src/packages/uploader/uploader.scss | 5 +- src/packages/uploader/uploader.taro.tsx | 7 +- src/packages/uploader/uploader.tsx | 5 + src/packages/virtuallist/virtuallist.scss | 4 +- src/sites/mobile-taro/config/dev.js | 35 +- src/sites/mobile-taro/config/index.js | 32 -- src/sites/mobile-taro/src/app.config.ts | 204 ++++----- .../src/pages/layout/flex/index.scss | 2 +- .../theme/components/theme-setting/helpers.ts | 2 +- src/styles/theme-dark.scss | 81 ++-- src/styles/theme-default.scss | 83 ++-- src/styles/theme-jmapp.scss | 80 ++-- src/styles/variables-jmapp.scss | 222 +++++----- src/styles/variables.scss | 388 ++++++++++-------- src/utils/typings.ts | 1 + src/utils/use-custom-event.ts | 26 ++ src/utils/use-taro-rect.ts | 25 ++ src/utils/use-touch.ts | 8 +- 308 files changed, 8411 insertions(+), 1934 deletions(-) create mode 100644 src/packages/loading/__test__/loading.spec.tsx create mode 100644 src/packages/loading/demo.taro.tsx create mode 100644 src/packages/loading/demo.tsx create mode 100644 src/packages/loading/doc.en-US.md create mode 100644 src/packages/loading/doc.md create mode 100644 src/packages/loading/doc.taro.md create mode 100644 src/packages/loading/doc.zh-TW.md create mode 100644 src/packages/loading/index.taro.ts create mode 100644 src/packages/loading/index.ts create mode 100644 src/packages/loading/loading.scss create mode 100644 src/packages/loading/loading.taro.tsx create mode 100644 src/packages/loading/loading.tsx create mode 100644 src/packages/space/__test__/__snapshots__/space.spec.tsx.snap create mode 100644 src/packages/space/__test__/space.spec.tsx create mode 100644 src/packages/space/demo.taro.tsx create mode 100644 src/packages/space/demo.tsx create mode 100644 src/packages/space/doc.en-US.md create mode 100644 src/packages/space/doc.md create mode 100644 src/packages/space/doc.taro.md create mode 100644 src/packages/space/doc.zh-TW.md create mode 100644 src/packages/space/index.taro.ts create mode 100644 src/packages/space/index.ts create mode 100644 src/packages/space/space.scss create mode 100644 src/packages/space/space.taro.tsx create mode 100644 src/packages/space/space.tsx create mode 100644 src/packages/tour/__test__/tour.spec.tsx create mode 100644 src/packages/tour/demo.scss create mode 100644 src/packages/tour/demo.taro.tsx create mode 100644 src/packages/tour/demo.tsx create mode 100644 src/packages/tour/doc.en-US.md create mode 100644 src/packages/tour/doc.md create mode 100644 src/packages/tour/doc.taro.md create mode 100644 src/packages/tour/index.taro.ts create mode 100644 src/packages/tour/index.ts create mode 100644 src/packages/tour/tour.scss create mode 100644 src/packages/tour/tour.taro.tsx create mode 100644 src/packages/tour/tour.tsx create mode 100644 src/utils/use-custom-event.ts create mode 100644 src/utils/use-taro-rect.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 82f0b0885b..669c29aa6e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,48 @@ +# v2.0.10 +`2023-08-04` + +* :sparkles: feat: loading 组件 (#1204) @mike8625 +* :sparkles: feat: 日历支持footer的children定义，增加日历+datepicker的demo (#1277) @xiaoyatong +* :bug: fix: elevator 计算索引出现 -1，导致组件运行报错 (#1276) @oasis-cloud +* :bug: fix: loading 组件导出 props 类型 (#1278) @oasis-cloud + + +# v2.0.9 +`2023-08-02` + +* :sparkles: feat(notify): 支持函数调用的展开和关闭 (#1271) @oasis-cloud +* :bug: fix: space 版本号修改为 2.0 (#1265) @oasis-cloud +* 🔨 chore(config): 优化 taro demo 环境配置文件 (#1266) @oasis-cloud +* 📖 docs: cascader 文档更新 (#1270) @vapao +* 📖 docs: tag 文档和 demo 同步 (#1275) @oasis-cloud +* 📖 docs: 升级文档更新 (#1274) @oasis-cloud + + +# v2.0.8 +`2023-07-28` + +* :sparkles: feat: 增加了space组件 (#1259) @ivan-My +* 🛠 refactor: tabs 去除 console (#1261) @vapao +* 🔨 chore(script): 简化开发环境启动逻辑 (#1264) @Eiinu + + + +# v2.0.7 +`2023-07-26` + +* :sparkles: feat: formitem label 支持 reactnode (#1254) @oasis-cloud +* :sparkles: feat: uploader 添加上传的响应数据 (#1251) @逍遥 +* 🔨 chore: 优化 any 类型 (#1222) @junjun666 +* 📖 docs(SearchBar): 补充 onClear 属性说明 (#1256) @Tralafalgar Wang + + +# v2.0.6 +`2023-07-21` + +* :bug: fix(Address): 修复Address组件通过点击CloseIcon和Overlay关闭后，无法再次打开的问题 (#1233) @Tralafalgar Wang +* :bug: fix(button): 渐变色导致边框出现重叠 (#1250) @oasis-cloud + + # v2.0.5 `2023-07-19` diff --git a/migrate-from-v1.md b/migrate-from-v1.md index 22e7438812..6c363f2a47 100644 --- a/migrate-from-v1.md +++ b/migrate-from-v1.md @@ -16,10 +16,13 @@ npm install @nutui/nutui-react-taro 3. 处理不兼容更新 从 NutUI React 1.x 到 NutUI React 2.x 存在一些不兼容更新，需要仔细阅读不兼容更新内容，并依次处理。 + +你可以手动对照下面的列表逐条检查代码进行修改，另外，我们也提供了一个 codemod cli 工具 @nutui/nutui-react-codemod 以帮助你快速升级到 v2 版本。在运行 codemod cli 前，请先提交你的本地代码修改。 + ## 兼容更新 1. 组件样式处理 -新增了按需引入 css 文件的支持。可通过 babel-import-plugin 插件实现： +新增了按需引入 css 文件的支持，同时保留了按需引入 scss 文件的能力。可通过 babel-import-plugin 插件实现按需引入 css： H5配置如下： ```json @@ -50,7 +53,7 @@ plugins: [ style: 'css', camel2DashComponentName: false, }, - "nutui-react", + "nutui-react-taro", ] ] ``` diff --git a/package.json b/package.json index bd25b9eefe..6b86e308bb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "@nutui/nutui-react-taro", - "version": "2.0.5", + "name": "@nutui/nutui-react", + "version": "2.0.10", "style": "dist/style.css", "main": "dist/nutui.react.umd.js", "module": "dist/esm/nutui-react.es.js", @@ -44,13 +44,13 @@ "registry": "https://registry.npmjs.org/" }, "scripts": { - "add": "node scripts/create-component-mode.js", + "add": "node scripts/create-component-mode.js && npm run prepare", "generate:file": "node scripts/generate-nutui.js", "generate:themes": "node scripts/generate-themes.js", "generate:themes-dev": "node scripts/generate-themes-dev.js", "checked": "npm run generate:file && tsc --project ./tsconfig.h5.json", - "dev": "npm run checked && vite --open --force", - "dev:jmapp": "npm run checked && VITE_APP_PROJECT_ID=jmapp vite --open --force", + "dev": "vite --open --force", + "dev:jmapp": "VITE_APP_PROJECT_ID=jmapp vite --open --force", "dev:theme": "npm run generate:themes-dev && npm run checked && vite --force --config vite.config.theme.ts", "replace:scss": "node scripts/replace-scss-alias.js", "build:loader-style": "node scripts/generate-loader-style.js", @@ -67,15 +67,15 @@ "lint": "eslint ./src/packages", "lint:fix": "eslint --fix ./src/packages", "publish:beta": "npm publish --tag beta", - "prepare": "husky install", + "prepare": "husky install && npm run generate:file && npm run generate:file:taro && npm run generate:file:taro:pages", "test": "jest", "generate:file:taro": "node scripts/taro/generate-nutui-taro.js", "checked:taro": "npm run generate:file:taro && tsc --project ./tsconfig.taro.json", "generate:file:taro:pages": "node scripts/taro/generate-taro-pages.js", - "dev:taro:weapp": "npm run checked:taro && npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run dev:weapp", - "dev:taro:jd": "npm run checked:taro && npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run dev:jd", - "dev:taro:h5": "npm run checked:taro && npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run dev:h5", - "dev:taro:weapp:jmapp": "npm run checked:taro && VITE_APP_PROJECT_ID=jmapp npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run dev:weapp:jmapp", + "dev:taro:weapp": "cd ./src/sites/mobile-taro && npm run dev:weapp", + "dev:taro:jd": "cd ./src/sites/mobile-taro && npm run dev:jd", + "dev:taro:h5": "cd ./src/sites/mobile-taro && npm run dev:h5", + "dev:taro:weapp:jmapp": "cd ./src/sites/mobile-taro && npm run dev:weapp:jmapp", "build:taro": "npm run checked:taro && node scripts/create-theme-typings.js && vite build --config vite.config.build.taro.ts && npm run build:taro:es && npm run build:css && npm run build:loader-style && npm run build:component:css && npm run build:locales && TARO=1 node scripts/add-comments-to-dts.js", "build:taro:es": "vite build --config vite.config.build.disperse.taro.ts", "build:taro:jmapp": "npm run checked:taro && VITE_APP_PROJECT_ID=jmapp node scripts/create-theme-typings.js && vite build --config vite.config.build.taro.ts && npm run build:taro:es && VITE_APP_PROJECT_ID=jmapp npm run build:css && VITE_APP_PROJECT_ID=jmapp npm run build:loader-style && VITE_APP_PROJECT_ID=jmapp npm run build:component:css && npm run build:locales && TARO=1 node scripts/add-comments-to-dts.js", diff --git a/scripts/format-table-markdown.js b/scripts/format-table-markdown.js index b1a7855a25..639b0345ef 100644 --- a/scripts/format-table-markdown.js +++ b/scripts/format-table-markdown.js @@ -11,7 +11,6 @@ function convertMdTables(inputFile, outputFile) { // 在 HTML 中查找表格，并将其转换为数组 const tables = html.match(//g) - // 将数组中的每个表格转换为对象 const tableObjects = tables.map((table) => { const rows = table.match(//g) diff --git a/scripts/taro/generate-taro-pages.js b/scripts/taro/generate-taro-pages.js index 207b61424d..c7cb5c372b 100644 --- a/scripts/taro/generate-taro-pages.js +++ b/scripts/taro/generate-taro-pages.js @@ -39,37 +39,22 @@ const createIndexConfig = (enName, package) => { resolve(`生成index.config.ts文件成功`) }) - // 拷贝demo - const fileDemoPath = path.resolve(dirPath, `index.tsx`) - let demoPath = `src/packages/${nameLc}/demo.taro.tsx` - fse.readFile(demoPath, (err, data) => { - if (!err) { - let fileString = data.toString() - const lines = fileString.split('\n') - const reg = - /import{1,}[\w\s\S]+(\'@\/packages\/nutui\.react\.taro\'){1,}/g - let fileStrArr = fileString.match(reg) - fileStrArr = fileStrArr[0].split('import') - // let importScssStr = '' - // for (let i = 0, lens = fileStrArr.length; i < lens; i++) { - // if (fileStrArr[i].indexOf('@/packages/nutui.react.taro') != -1) { - // let str = fileStrArr[i] - // str = str.substring(str.indexOf('{') + 1, str.indexOf('}')) - // let strs = str.split(',') - // strs.forEach((namestr) => { - // namestr = namestr.trim() - // namestr && - // (importScssStr += `import '@/packages/${namestr.toLowerCase()}/${namestr.toLowerCase()}.scss';\n`) - // }) - // } - // } - // lines.splice(1, 0, importScssStr) - fileString = lines.join('\n') - fsExtra.outputFile(fileDemoPath, fileString, 'utf8', (error) => { - if (error) console.log('Error', error) - // console.log(`文件写入成功`) - }) - } + // 生成 demo + const demoContent = `import Demo from '@/packages/${nameLc}/demo.taro'; +export default Demo;` + const demoDirPath = path.join( + __dirname, + `../../src/sites/mobile-taro/src/${enName}/pages/${nameLc}` + ) + const demoFilePath = path.join(demoDirPath, `index.tsx`) + if (!fs.existsSync(demoDirPath)) { + fs.mkdirSync(demoDirPath, { recursive: true }, (err) => { + console.log('mkdir error', err) + }) + } + fs.writeFile(demoFilePath, demoContent, (err) => { + if (err) { throw err } + resolve(`生成 index.tsx 文件成功`) }) } }) diff --git a/src/config.json b/src/config.json index 37a30e655b..d46ff514e0 100644 --- a/src/config.json +++ b/src/config.json @@ -212,6 +212,17 @@ "exportEmpty": true, "author": "yushuang24" }, + { + "version": "2.0.0", + "name": "Space", + "type": "component", + "cName": "间距", + "desc": "元素之间的间距，保持相同的宽度", + "sort": 8, + "show": true, + "taro": true, + "author": "ivan" + }, { "version": "2.0.0", "name": "Sticky", @@ -709,6 +720,17 @@ "taro": true, "author": "swag~jun" }, + { + "version": "2.0.0", + "name": "Loading", + "type": "component", + "cName": "加载中", + "desc": "加载图标，用于显示正在加载中的状态", + "sort": 15, + "show": true, + "taro": true, + "author": "mike8625" + }, { "version": "2.0.0", "name": "NoticeBar", @@ -1036,6 +1058,17 @@ "taro": true, "author": "lzz" }, + { + "version": "2.0.0", + "name": "Tour", + "type": "component", + "cName": "引导", + "desc": "用于引导用户了解产品功能的气泡组件。自 4.0 版本开始提供该组件。", + "sort": 24, + "show": true, + "taro": true, + "author": "swag~jun" + }, { "version": "2.0.0", "name": "Video", @@ -1135,4 +1168,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/src/locales/base.ts b/src/locales/base.ts index d4dbb3b93e..928595adf0 100644 --- a/src/locales/base.ts +++ b/src/locales/base.ts @@ -126,6 +126,11 @@ export interface BaseLang { refreshingText: string completeText: string } + tour: { + prevStepText: string + completeText: string + nextStepText: string + } watermark: { errorCanvasTips: string } diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts index 1b922fc521..f07ffe0a15 100644 --- a/src/locales/en-US.ts +++ b/src/locales/en-US.ts @@ -125,6 +125,11 @@ const enUS: BaseLang = { refreshingText: 'Loading...', completeText: 'Refresh successful', }, + tour: { + prevStepText: 'Previous', + completeText: 'Finish', + nextStepText: 'Next step', + }, watermark: { errorCanvasTips: 'Canvas is not supported in the current environment', }, diff --git a/src/locales/id-ID.ts b/src/locales/id-ID.ts index cdb2d9628c..9a629d9f8e 100644 --- a/src/locales/id-ID.ts +++ b/src/locales/id-ID.ts @@ -126,6 +126,11 @@ const idID: BaseLang = { refreshingText: 'Memuat...', completeText: 'Penyegaran berhasil', }, + tour: { + prevStepText: 'Sebelumnya', + completeText: 'Menyelesaikan', + nextStepText: 'Langkah berikutnya', + }, watermark: { errorCanvasTips: 'Canvas is not supported in the current environment', }, diff --git a/src/locales/tr-TR.ts b/src/locales/tr-TR.ts index 1d475bb3b0..78f97d4428 100644 --- a/src/locales/tr-TR.ts +++ b/src/locales/tr-TR.ts @@ -134,6 +134,11 @@ const trTR: BaseLang = { refreshingText: 'Yükleniyor...', completeText: 'Yenileme başarılı', }, + tour: { + prevStepText: 'Sonraki adım', + completeText: 'Sona ermek', + nextStepText: 'Sonraki adım', + }, watermark: { errorCanvasTips: 'Geçerli ortam Canvası desteklemiyor', }, diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index 414a0a9309..1e6c45458f 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -126,6 +126,11 @@ const zhCN: BaseLang = { refreshingText: '加载中...', completeText: '刷新成功', }, + tour: { + prevStepText: '上一步', + completeText: '完成', + nextStepText: '下一步', + }, watermark: { errorCanvasTips: '当前环境不支持Canvas', }, diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts index 647ac83ddf..083648a6d4 100644 --- a/src/locales/zh-TW.ts +++ b/src/locales/zh-TW.ts @@ -124,6 +124,11 @@ const zhTW: BaseLang = { refreshingText: '加載中...', completeText: '刷新成功', }, + tour: { + prevStepText: '上一步', + completeText: '完成', + nextStepText: '下一步', + }, watermark: { errorCanvasTips: '當前環境不支持Canvas', }, diff --git a/src/locales/zh-UG.ts b/src/locales/zh-UG.ts index b1f51def6c..0e7cb7c54d 100644 --- a/src/locales/zh-UG.ts +++ b/src/locales/zh-UG.ts @@ -124,6 +124,11 @@ const zhUG: BaseLang = { refreshingText: 'يېڭىلىنىۋاتىدۇ...', completeText: 'تامام', }, + tour: { + prevStepText: 'ئالدىنقى', + completeText: 'تامام', + nextStepText: 'كېيىنكى قەدەم', + }, watermark: { errorCanvasTips: 'Canvas نى قوللىمايدۇ', }, diff --git a/src/packages/actionsheet/actionsheet.scss b/src/packages/actionsheet/actionsheet.scss index 0ace0cbb75..a8c8f432c2 100644 --- a/src/packages/actionsheet/actionsheet.scss +++ b/src/packages/actionsheet/actionsheet.scss @@ -13,7 +13,7 @@ &__description { padding: 10px; display: block; - font-size: $font-text; + font-size: $font-size; color: $color-text; margin-inline-start: 0px; } @@ -31,14 +31,14 @@ padding: 10px; text-align: $actionsheet-item-text-align; line-height: $actionsheet-item-line-height; - font-size: $font-text; + font-size: $font-size; color: $actionsheet-item-color; - background-color: $color-card-background; + background-color: $color-background-overlay; cursor: pointer; &-description { display: block; - font-size: $font-help; + font-size: $font-size-small; color: $color-text; } @@ -47,7 +47,7 @@ } &.disabled { - color: $color-disabled !important; + color: $color-text-disable !important; cursor: not-allowed; } } diff --git a/src/packages/address/__test__/address.spec.tsx b/src/packages/address/__test__/address.spec.tsx index 421097f771..ce0f5b8982 100644 --- a/src/packages/address/__test__/address.spec.tsx +++ b/src/packages/address/__test__/address.spec.tsx @@ -1,5 +1,5 @@ -import React from 'react' -import { fireEvent, render } from '@testing-library/react' +import React, { useRef } from 'react' +import { fireEvent, render, waitFor } from '@testing-library/react' import '@testing-library/jest-dom' import { Address } from '../address' @@ -179,3 +179,58 @@ test('Address: exist defaultIcon & selectIcon', async () => { fireEvent.click(items[1]) expect(items[1].innerHTML).toContain('
456
') }) + +function sleep(delay = 0): Promise { + return new Promise((resolve) => { + setTimeout(resolve, delay) + }) +} + +describe('Address', () => { + interface WrapperProps { + visible: boolean + } + + const Wrapper: React.FC = ({ visible }) => { + const ref = useRef() + return ( +
+ + +
+
+ ) + } + + it('should handle open and close methods', async () => { + const screen = render() + + fireEvent.click(screen.getByText('Open')) + await waitFor( + async () => { + await sleep(1000) + const title = screen.container.querySelector('.nut-popup-title') + expect(title?.innerHTML).toBe('选择地址') + }, + { + timeout: 2000, + } + ) + + fireEvent.click(screen.getByText('Close')) + await waitFor( + async () => { + await sleep(1000) + expect(screen.container.querySelector('.nut-popup-title')).toBe(null) + }, + { + timeout: 2000, + } + ) + }) +}) diff --git a/src/packages/address/address.scss b/src/packages/address/address.scss index eccb456e61..67fc4a377e 100644 --- a/src/packages/address/address.scss +++ b/src/packages/address/address.scss @@ -18,7 +18,7 @@ display: flex; align-items: center; margin-bottom: 20px; - font-size: $font-help; + font-size: $font-size-small; line-height: 14px; color: $color-title; diff --git a/src/packages/address/address.taro.tsx b/src/packages/address/address.taro.tsx index cf83736279..2d95a01741 100644 --- a/src/packages/address/address.taro.tsx +++ b/src/packages/address/address.taro.tsx @@ -1,4 +1,9 @@ -import React, { FunctionComponent, useEffect, useState } from 'react' +import React, { + ForwardRefRenderFunction, + useImperativeHandle, + forwardRef, + useState, +} from 'react' import { Left } from '@nutui/icons-react-taro' import Popup from '@/packages/popup/index.taro' import { ExistRender } from './existRender.taro' @@ -12,9 +17,16 @@ import { CascaderValue, } from '@/packages/cascader/index.taro' import { ComponentDefaults } from '@/utils/typings' +import { usePropsValue } from '@/utils/use-props-value' + +type AddressRef = { + open: () => void + close: () => void +} export interface AddressProps extends CascaderProps { visible: boolean + defaultVisible: boolean value?: CascaderValue defaultValue?: CascaderValue type: string @@ -34,7 +46,6 @@ export interface AddressProps extends CascaderProps { const defaultProps = { ...ComponentDefaults, - visible: false, defaultValue: [], type: 'custom', options: [], @@ -49,18 +60,20 @@ const defaultProps = { backIcon: null, } as unknown as AddressProps -export const Address: FunctionComponent< +const InternalAddress: ForwardRefRenderFunction< + AddressRef, Partial & Omit< React.HTMLAttributes, 'onChange' | 'defaultValue' | 'onLoad' | 'title' | 'onClick' > -> = (props) => { +> = (props, ref) => { const { locale } = useConfig() const { style, className, visible, + defaultVisible, defaultValue, children, type, @@ -79,7 +92,6 @@ export const Address: FunctionComponent< onExistSelect, onClose, onSwitch, - ...rest } = { ...defaultProps, @@ -88,14 +100,27 @@ export const Address: FunctionComponent< const classPrefix = 'nut-address' const [currentType, setCurrentType] = useState(type) - const [showPopup, setShowPopup] = useState(visible) + const [innerVisible, setInnerVisible] = usePropsValue({ + value: visible, + defaultValue: defaultVisible, + finalValue: defaultVisible, + }) - const handClose = () => { - setShowPopup(false) + useImperativeHandle(ref, () => { + return { + open() { + setInnerVisible(true) + }, + close() { + setInnerVisible(false) + }, + } + }) + + const handleClose = () => { + setInnerVisible(false) + onClose && onClose() } - useEffect(() => { - setShowPopup(visible) - }, [visible]) const renderLeftOnCustomSwitch = () => { return ( @@ -115,7 +140,7 @@ export const Address: FunctionComponent< const selectedExistItem = (data: AddressList) => { onExistSelect && onExistSelect(data) - handClose() + handleClose() } // 切换地址选择模式 @@ -131,7 +156,7 @@ export const Address: FunctionComponent< <> {currentType === 'custom' || currentType === 'custom2' ? ( { onChange?.(val, params) }} /> ) : (
void + close: () => void +} export interface AddressProps extends CascaderProps { visible: boolean + defaultVisible: boolean value?: CascaderValue defaultValue?: CascaderValue type: string @@ -34,7 +46,6 @@ export interface AddressProps extends CascaderProps { const defaultProps = { ...ComponentDefaults, - visible: false, defaultValue: [], type: 'custom', options: [], @@ -49,16 +60,18 @@ const defaultProps = { backIcon: null, } as unknown as AddressProps -export const Address: FunctionComponent< +export const InternalAddress: ForwardRefRenderFunction< + AddressRef, Partial & Omit< React.HTMLAttributes, 'onChange' | 'defaultValue' | 'onLoad' | 'title' > -> = (props) => { +> = (props, ref) => { const { locale } = useConfig() const { visible, + defaultVisible, defaultValue, children, type, @@ -86,14 +99,27 @@ export const Address: FunctionComponent< } const classPrefix = 'nut-address' const [currentType, setCurrentType] = useState(type) - const [showPopup, setShowPopup] = useState(visible) + const [innerVisible, setInnerVisible] = usePropsValue({ + value: visible, + defaultValue: defaultVisible, + finalValue: defaultVisible, + }) - const handClose = () => { - setShowPopup(false) + useImperativeHandle(ref, () => { + return { + open() { + setInnerVisible(true) + }, + close() { + setInnerVisible(false) + }, + } + }) + + const handleClose = () => { + setInnerVisible(false) + onClose && onClose() } - useEffect(() => { - setShowPopup(visible) - }, [visible]) const renderLeftOnCustomSwitch = () => { return ( @@ -113,7 +139,7 @@ export const Address: FunctionComponent< const selectedExistItem = (data: AddressList) => { onExistSelect && onExistSelect(data) - handClose() + handleClose() } // 切换地址选择模式 @@ -129,7 +155,7 @@ export const Address: FunctionComponent< <> {currentType === 'custom' || currentType === 'custom2' ? ( { onChange?.(val, params) }} /> ) : (
{ + const addressRef = useRef(null) + const [translated] = useTranslate({ 'zh-CN': { basic: '基础用法', @@ -45,6 +47,7 @@ const AddressDemo = () => { change: '自定义地址与已有地址切换', delivery: '配送', other: '选择其他地址', + uncontrolled: '非受控方式', }, 'zh-TW': { basic: '基础用法', @@ -57,6 +60,7 @@ const AddressDemo = () => { change: '自定義地址與已有地址切換', delivery: '配送', other: '選擇其他地址', + uncontrolled: '非受控方式', }, 'en-US': { basic: 'Basic Usage', @@ -69,6 +73,7 @@ const AddressDemo = () => { change: 'Custom Or Exist', delivery: 'Delivery', other: 'Choose Other Address', + uncontrolled: 'Uncontrolled', }, }) @@ -224,6 +229,7 @@ const AddressDemo = () => { four: translated.title, five: translated.title, six: translated.title, + seven: translated.title, }) const [showPopup, setShowPopup] = useState({ @@ -353,7 +359,14 @@ const AddressDemo = () => { const showAddress = (tag: string) => { setShowPopup({ ...showPopup, - [tag]: !(showPopup as any)[tag], + [tag]: true, + }) + } + + const closeAddress = (tag: string) => { + setShowPopup({ + ...showPopup, + [tag]: false, }) } @@ -452,6 +465,12 @@ const AddressDemo = () => { description={text.four} onClick={() => showAddress('other')} /> +

{translated.uncontrolled}

+ addressRef.current?.open()} + />
{ onChange={(value, params) => { change1(value, params, 'one') }} + onClose={() => closeAddress('normal')} />
{ onChange={(value, params) => { change1(value, params, 'six') }} + onClose={() => closeAddress('select')} />
{ onChange={(value, params) => { change1(value, params, 'five') }} - // onClose={close5} + onClose={() => closeAddress('normal2')} />
{ existList={existList2} onExistSelect={selectedTwo} title={translated.delivery} + onClose={() => closeAddress('exist')} />
{ onExistSelect={selectedThree} defaultIcon={icon.defaultIcon} selectIcon={icon.selectIcon} - // closeIcon={icon.closeIcon} + onClose={() => closeAddress('customImg')} />
{ onChange={(value, params) => { change1(value, params, 'four') }} + onClose={() => closeAddress('other')} + /> + +
{ + change1(value, params, 'one') + }} + onClose={() => addressRef.current?.close()} />
diff --git a/src/packages/address/demo.tsx b/src/packages/address/demo.tsx index e256c0dd87..67c497b428 100644 --- a/src/packages/address/demo.tsx +++ b/src/packages/address/demo.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useState, useRef } from 'react' import { Heart1, HeartFill, Left, Close } from '@nutui/icons-react' import { useTranslate } from '../../sites/assets/locale' import { Address } from './address' @@ -33,6 +33,8 @@ interface T { } const AddressDemo = () => { + const addressRef = useRef(null) + const [translated] = useTranslate({ 'zh-CN': { basic: '基础用法', @@ -45,6 +47,7 @@ const AddressDemo = () => { change: '自定义地址与已有地址切换', delivery: '配送', other: '选择其他地址', + uncontrolled: '非受控方式', }, 'zh-TW': { basic: '基础用法', @@ -57,6 +60,7 @@ const AddressDemo = () => { change: '自定義地址與已有地址切換', delivery: '配送', other: '選擇其他地址', + uncontrolled: '非受控方式', }, 'en-US': { basic: 'Basic Usage', @@ -69,6 +73,7 @@ const AddressDemo = () => { change: 'Custom Or Exist', delivery: 'Delivery', other: 'Choose Other Address', + uncontrolled: 'Uncontrolled', }, }) @@ -225,6 +230,7 @@ const AddressDemo = () => { four: translated.title, five: translated.title, six: translated.title, + seven: translated.title, }) const [showPopup, setShowPopup] = useState({ @@ -354,7 +360,14 @@ const AddressDemo = () => { const showAddress = (tag: string) => { setShowPopup({ ...showPopup, - [tag]: !(showPopup as any)[tag], + [tag]: true, + }) + } + + const closeAddress = (tag: string) => { + setShowPopup({ + ...showPopup, + [tag]: false, }) } @@ -452,6 +465,12 @@ const AddressDemo = () => { description={text.four} onClick={() => showAddress('other')} /> +

{translated.uncontrolled}

+ addressRef.current?.open()} + />
{ onChange={(value, params) => { change1(value, params, 'one') }} + onClose={() => closeAddress('normal')} />
{ onChange={(value, params) => { change1(value, params, 'six') }} + onClose={() => closeAddress('select')} /> - {/*
{ - change1(value, params, 'five') - }} - // onClose={close5} - /> */} -
closeAddress('exist')} />
{ onExistSelect={selectedThree} defaultIcon={icon.defaultIcon} selectIcon={icon.selectIcon} - // closeIcon={icon.closeIcon} + onClose={() => closeAddress('customImg')} />
{ onChange={(value, params) => { change1(value, params, 'four') }} + onClose={() => closeAddress('other')} + /> + +
{ + change1(value, params, 'one') + }} + onClose={() => addressRef.current?.close()} />
diff --git a/src/packages/address/doc.en-US.md b/src/packages/address/doc.en-US.md index 35f6108008..b7197db0e4 100644 --- a/src/packages/address/doc.en-US.md +++ b/src/packages/address/doc.en-US.md @@ -89,7 +89,7 @@ const App = () => { return ( <> - setVisible(true)} /> + setVisible(true)} />
{ onChange={(value, params) => { setText(value) }} + onClose={() => setVisible(false)} /> ); @@ -120,7 +121,7 @@ const App = () => { const [text, setText] = useState('Choose Address') const [visible, setVisible] = useState(false) const [value2] = useState(['FuJian', 'FuZhou', 'TaiJiang']) - const [optionsDemo2] = useState([ + const [optionsDemo2] = useState([ { value1: 'ZheJiang', text1: 'ZheJiang', @@ -186,7 +187,7 @@ const App = () => { return ( <> - setVisible(true)} /> + setVisible(true)} />
{ onChange={(value, params) => { setText(value) }} + onClose={() => setVisible(false)} /> ); @@ -271,13 +273,14 @@ const App = () => { return ( <> - setVisible(true)} /> + setVisible(true)} />
setVisible(false)} /> ); @@ -353,7 +356,7 @@ const App = () => { return ( <> - setCustomImg(true)} /> + setVisible(true)} />
{ onExistSelect={selectedThree} defaultIcon={icon.defaultIcon} selectIcon={icon.selectIcon} + onClose={() => setVisible(false)} /> ); @@ -458,7 +462,7 @@ const App = () => { return ( <> - setOther(true)} /> + setVisible(true)} />
{ onChange={(value, params) => { setText(value) }} + onClose={() => setVisible(false)} /> ); @@ -490,6 +495,7 @@ export default App; | Property | Description | Type | Default | | --- | --- | --- | --- | | visible | Whether to open address | `boolean` | `-` | +| defaultVisible | Initial open/close state of the address selection | `boolean` | - | | type | Choose type: exist/custom | `string` | `custom` | | existList | Exist address list data | `Array` | `[]` | | defaultIcon | Exist address default icon | `ReactNode` | `-` | @@ -499,5 +505,15 @@ export default App; | custom | Whether to change custom address | `boolean` \| `string` | `true` | | onExistSelect | Emitted when to selected exist address | `(data: AddressList) => void` | `-` | | onSwitch | Click to select another address or custom address to select the upper left corner of the return button triggered | `(data: { type: string }) => void` | `-` | +| onClose | Fired when the component is closed | `-` | `-` | + +### Ref + +You can get the Address instance and call instance methods through ref. + +| Method | Description | Parameter | +| ----- | ----- | -- | +| open | Open address selection | `-` | +| close | Close address selection | `-` | More properties in Cascader. \ No newline at end of file diff --git a/src/packages/address/doc.md b/src/packages/address/doc.md index 275bd10258..5e17ad91ce 100644 --- a/src/packages/address/doc.md +++ b/src/packages/address/doc.md @@ -89,7 +89,7 @@ const App = () => { return ( <> - setVisible(true)} /> + setVisible(true)} />
{ onChange={(value, params) => { setText(value) }} + onClose={() => setVisible(false)} /> ); @@ -120,7 +121,7 @@ const App = () => { const [text, setText] = useState('请选择地址') const [visible, setVisible] = useState(false) const [value2] = useState(['福建', '福州', '台江区']) - const [optionsDemo2] = useState([ + const [optionsDemo2] = useState([ { value1: '浙江', text1: '浙江', @@ -186,7 +187,7 @@ const App = () => { return ( <> - setVisible(true)} /> + setVisible(true)} />
{ onChange={(value, params) => { setText(value) }} + onClose={() => setVisible(false)} /> ); @@ -265,13 +267,14 @@ const App = () => { return ( <> - setVisible(true)} /> + setVisible(true)} />
setVisible(false)} /> ); @@ -347,7 +350,7 @@ const App = () => { return ( <> - setCustomImg(true)} /> + setVisible(true)} />
{ onExistSelect={selectedThree} defaultIcon={icon.defaultIcon} selectIcon={icon.selectIcon} + onClose={() => setVisible(false)} /> ); @@ -452,7 +456,7 @@ const App = () => { return ( <> - setOther(true)} /> + setVisible(true)} />
{ onChange={(value, params) => { setText(value) }} + onClose={() => setVisible(false)} /> ); @@ -477,6 +482,103 @@ export default App; ::: +### 非受控模式 + +:::demo + +```tsx +import React, { useState, useRef } from "react"; +import { Address, Cell } from '@nutui/nutui-react'; + +const App = () => { + const addressRef = useRef(null) + const [text, setText] = useState('请选择地址') + + const [optionsDemo] = useState([ + { + value1: '浙江', + text1: '浙江', + items: [ + { + value1: '杭州', + text1: '杭州', + disabled: true, + items: [ + { value1: '西湖区', text1: '西湖区', disabled: true }, + { value1: '余杭区', text1: '余杭区' }, + ], + }, + { + value1: '温州', + text1: '温州', + items: [ + { value1: '鹿城区', text1: '鹿城区' }, + { value1: '瓯海区', text1: '瓯海区' }, + ], + }, + ], + }, + { + value1: '湖南', + text1: '湖南', + disabled: true, + items: [ + { + value1: '长沙', + text1: '长沙', + disabled: true, + items: [ + { value1: '西湖区', text1: '西湖区' }, + { value1: '余杭区', text1: '余杭区' }, + ], + }, + { + value1: '温州', + text1: '温州', + items: [ + { value1: '鹿城区', text1: '鹿城区' }, + { value1: '瓯海区', text1: '瓯海区' }, + ], + }, + ], + }, + { + value1: '福建', + text1: '福建', + items: [ + { + value1: '福州', + text1: '福州', + items: [ + { value1: '鼓楼区', text1: '鼓楼区' }, + { value1: '台江区', text1: '台江区' }, + ], + }, + ], + }, + ]) + + return ( + <> + addressRef.current?.open()} /> +
{ + setText(value) + }} + onClose={() => addressRef.current?.close()} + /> + + ); +}; +export default App; +``` + +::: + ## Address ### Props @@ -484,6 +586,7 @@ export default App; | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | visible | 是否打开地址选择 | `boolean` | `-` | +| defaultVisible | 初始地址选择打开/关闭状态 | `boolean` | `-` | | type | 地址选择类型 exist/custom | `string` | `custom` | | existList | 已存在地址列表，每个地址对象中，必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress（字段解释见下） | `Array` | `[]` | | defaultIcon | 已有地址列表默认图标，type='exist' 时生效 | `ReactNode` | `-` | @@ -493,5 +596,15 @@ export default App; | custom | 是否可以切换自定义地址选择，type='exist' 时生效 | `boolean` \| `string` | `true` | | onExistSelect | 选择已有地址列表时触发 | `(data: AddressList) => void` | `-` | | onSwitch | 点击'选择其他地址'或自定义地址选择左上角返回按钮触发 | `(data: { type: string }) => void` | `-` | +| onClose | 关闭弹框时触发 | `-` | `-` | + +### Ref + +通过 ref 可以获取到 Address 实例并调用实例方法。 + +| 方法名 | 说明 | 参数 | +| ----- | ----- | -- | +| open | 打开地址选择 | `-` | +| close | 关闭地址选择 | `-` | 更多参数可参考 `Cascader` 组件。 \ No newline at end of file diff --git a/src/packages/address/doc.taro.md b/src/packages/address/doc.taro.md index 62d07e213c..50b227c460 100644 --- a/src/packages/address/doc.taro.md +++ b/src/packages/address/doc.taro.md @@ -89,7 +89,7 @@ const App = () => { return ( <> - setVisible(true)} /> + setVisible(true)} />
{ onChange={(value, params) => { setText(value) }} + onClose={() => setVisible(false)} /> ); @@ -186,7 +187,7 @@ const App = () => { return ( <> - setVisible(true)} /> + setVisible(true)} />
{ onChange={(value, params) => { setText(value) }} + onClose={() => setVisible(false)} /> ); @@ -265,13 +267,14 @@ const App = () => { return ( <> - setVisible(true)} /> + setVisible(true)} />
setVisible(false)} /> ); @@ -299,6 +302,7 @@ const App = () => { closeIcon: , backIcon: , }) + const [visible, setVisible] = useState(false) const [existList, setExistAddress] = useState([ { @@ -346,7 +350,7 @@ const App = () => { return ( <> - setCustomImg(true)} /> + setVisible(true)} />
{ onExistSelect={selectedThree} defaultIcon={icon.defaultIcon} selectIcon={icon.selectIcon} + onClose={() => setVisible(false)} /> ); @@ -418,7 +423,6 @@ const App = () => { }, ]) - const [optionsDemo5] = useState([ { value: '北京', text: '北京', id: 1, pidd: null }, { value: '朝阳区', text: '朝阳区', id: 11, pidd: 1 }, @@ -449,9 +453,10 @@ const App = () => { console.log('点击了自定义地址左上角的返回按钮') } } + return ( <> - setOther(true)} /> + setVisible(true)} />
{ onChange={(value, params) => { setText(value) }} + onClose={() => setVisible(false)} /> ); }; export default App; - ``` +::: + +### 非受控模式 + +:::demo + +```tsx +import React, { useState, useRef } from "react"; +import { Address, Cell } from '@nutui/nutui-react'; + +const App = () => { + const addressRef = useRef(null) + const [text, setText] = useState('请选择地址') + const [optionsDemo] = useState([ + { + value1: '浙江', + text1: '浙江', + items: [ + { + value1: '杭州', + text1: '杭州', + disabled: true, + items: [ + { value1: '西湖区', text1: '西湖区', disabled: true }, + { value1: '余杭区', text1: '余杭区' }, + ], + }, + { + value1: '温州', + text1: '温州', + items: [ + { value1: '鹿城区', text1: '鹿城区' }, + { value1: '瓯海区', text1: '瓯海区' }, + ], + }, + ], + }, + { + value1: '湖南', + text1: '湖南', + disabled: true, + items: [ + { + value1: '长沙', + text1: '长沙', + disabled: true, + items: [ + { value1: '西湖区', text1: '西湖区' }, + { value1: '余杭区', text1: '余杭区' }, + ], + }, + { + value1: '温州', + text1: '温州', + items: [ + { value1: '鹿城区', text1: '鹿城区' }, + { value1: '瓯海区', text1: '瓯海区' }, + ], + }, + ], + }, + { + value1: '福建', + text1: '福建', + items: [ + { + value1: '福州', + text1: '福州', + items: [ + { value1: '鼓楼区', text1: '鼓楼区' }, + { value1: '台江区', text1: '台江区' }, + ], + }, + ], + }, + ]) + + return ( + <> + addressRef.current?.open()} /> +
{ + setText(value) + }} + onClose={() => addressRef.current?.close()} + /> + + ); +}; +export default App; +``` ::: ## Address @@ -483,6 +583,7 @@ export default App; | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | visible | 是否打开地址选择 | `boolean` | `-` | +| defaultVisible | 初始地址选择打开/关闭状态 | `boolean` | `-` | | type | 地址选择类型 exist/custom | `string` | `custom` | | existList | 已存在地址列表，每个地址对象中，必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress（字段解释见下） | `Array` | `[]` | | defaultIcon | 已有地址列表默认图标，type='exist' 时生效 | `ReactNode` | `-` | @@ -492,6 +593,15 @@ export default App; | custom | 是否可以切换自定义地址选择，type='exist' 时生效 | `boolean` \| `string` | `true` | | onExistSelect | 选择已有地址列表时触发 | `(data: AddressList) => void` | `-` | | onSwitch | 点击'选择其他地址'或自定义地址选择左上角返回按钮触发 | `(data: { type: string }) => void` | `-` | -0%) !default` | +| onClose | 关闭弹框时触发 | `-` | `-` | + +### Ref + +通过 ref 可以获取到 Address 实例并调用实例方法。 + +| 方法名 | 说明 | 参数 | +| ----- | ----- | -- | +| open | 打开地址选择 | `-` | +| close | 关闭地址选择 | `-` | 更多参数可参考 `Cascader` 组件。 \ No newline at end of file diff --git a/src/packages/address/doc.zh-TW.md b/src/packages/address/doc.zh-TW.md index 183b151b46..d2982be7f8 100644 --- a/src/packages/address/doc.zh-TW.md +++ b/src/packages/address/doc.zh-TW.md @@ -89,7 +89,7 @@ const App = () => { return ( <> - setVisible(true)} /> + setVisible(true)} />
{ onChange={(value, params) => { setText(value) }} + onClose={() => setVisible(false)} /> ); @@ -120,7 +121,7 @@ const App = () => { const [text, setText] = useState('請選擇地址') const [visible, setVisible] = useState(false) const [value2] = useState(['福建', '福州', '臺江區']) - const [optionsDemo2] = useState([ + const [optionsDemo2] = useState([ { value1: '浙江', text1: '浙江', @@ -186,7 +187,7 @@ const App = () => { return ( <> - setVisible(true)} /> + setVisible(true)} />
{ onChange={(value, params) => { setText(value) }} + onClose={() => setVisible(false)} /> ); @@ -265,13 +267,14 @@ const App = () => { return ( <> - setVisible(true)} /> + setVisible(true)} />
setVisible(false)} /> ); @@ -347,7 +350,7 @@ const App = () => { return ( <> - setCustomImg(true)} /> + setVisible(true)} />
{ onExistSelect={selectedThree} defaultIcon={icon.defaultIcon} selectIcon={icon.selectIcon} + onClose={() => setVisible(false)} /> ); @@ -452,7 +456,7 @@ const App = () => { return ( <> - setOther(true)} /> + setVisible(true)} />
{ onChange={(value, params) => { setText(value) }} + onClose={() => setVisible(false)} /> ); @@ -484,6 +489,7 @@ export default App; | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | visible | 是否打開地址選擇 | `boolean` | `-` | +| defaultVisible | 初始地址選擇打開/關閉狀態 | `boolean` | - | | type | 地址選擇類型 exist/custom | `string` | `custom` | | existList | 已存在地址列錶，每個地址對象中，必傳值provinceName、cityName、countyName、townName、addressDetail、selectedAddress（字段解釋見下） | `Array` | `[]` | | defaultIcon | 已有地址列錶默認圖標，type='exist' 時生效 | `ReactNode` | `-` | @@ -493,5 +499,15 @@ export default App; | custom | 是否可以切換自定義地址選擇，type='exist' 時生效 | `boolean` \| `string` | `true` | | onExistSelect | 選擇已有地址列錶時觸發 | `(data: AddressList) => void` | `-` | | onSwitch | 點擊'選擇其他地址'或自定義地址選擇左上角返回按鈕觸發 | `(data: { type: string }) => void` | `-` | +| onClose | 關閉彈框時觸發 | `-` | `-` | + +### Ref + +透過 ref 可以獲取到 Address 實例並調用實例方法。 + +| 方法名 | 說明 | 參數 | +| ---- | ---- | ---- | +| open | 打開地址選擇 | `-` | +| close | 關閉地址選擇 | `-` | 更多參數可參考 `Cascader` 組件。 \ No newline at end of file diff --git a/src/packages/audio/audio.scss b/src/packages/audio/audio.scss index 5833e78ad3..3579997b76 100644 --- a/src/packages/audio/audio.scss +++ b/src/packages/audio/audio.scss @@ -14,7 +14,7 @@ height: 30px; background: $white; border-radius: 50%; - box-shadow: 0 0 8px $color-disabled; + box-shadow: 0 0 8px $color-text-disable; .nut-icon-am-rotate { transform: rotate((360)); @@ -33,7 +33,7 @@ content: ''; height: 2px; width: 30px; - background: $color-disabled; + background: $color-text-disable; transform: rotate(45deg); transform-origin: 8px -18px; } diff --git a/src/packages/audio/audio.tsx b/src/packages/audio/audio.tsx index 76e8eec712..18ab16f126 100644 --- a/src/packages/audio/audio.tsx +++ b/src/packages/audio/audio.tsx @@ -1,10 +1,5 @@ -import React, { - useState, - useEffect, - useRef, - FunctionComponent, - ReactEventHandler, -} from 'react' +import React, { useState, useEffect, useRef, FunctionComponent } from 'react' +import type { SyntheticEvent } from 'react' import { Service } from '@nutui/icons-react' import classNames from 'classnames' import Range from '@/packages/range' @@ -22,11 +17,10 @@ export interface AudioProps extends BasicComponent { type: string onBack: (e: HTMLAudioElement) => void onForward: (e: HTMLAudioElement) => void - onPause: ((e: HTMLAudioElement) => void) & ReactEventHandler - onEnd: (e: HTMLAudioElement) => void + onPause: (e: SyntheticEvent) => void + onEnd: (e: SyntheticEvent) => void onMute: (e: HTMLAudioElement) => void - onCanPlay: ((e: HTMLAudioElement) => void) & - ReactEventHandler + onCanPlay: (e: SyntheticEvent) => void } const defaultProps = { @@ -39,10 +33,10 @@ const defaultProps = { type: 'progress', onBack: (e: HTMLAudioElement) => {}, // type 为 progress时生效 onForward: (e: HTMLAudioElement) => {}, // type 为 progress时生效 - onPause: (e) => {}, - onEnd: (e: HTMLAudioElement) => {}, + onPause: (e: SyntheticEvent) => {}, + onEnd: (e: SyntheticEvent) => {}, onMute: (e: HTMLAudioElement) => {}, - onCanPlay: (e: HTMLAudioElement) => {}, + onCanPlay: (e: SyntheticEvent) => {}, } as AudioProps export const Audio: FunctionComponent< Partial & React.HTMLAttributes @@ -88,7 +82,7 @@ export const Audio: FunctionComponent< }) const classPrefix = 'nut-audio' const warn = console.warn - const handleEnded = (e: any) => { + const handleEnded = (e: SyntheticEvent) => { if (props.loop) { warn(locale.audio.tips || 'onPlayEnd事件在loop=false时才会触发') } else { @@ -153,7 +147,7 @@ export const Audio: FunctionComponent< props.onMute && props.onMute(AudioRef.current) } } - const handlePause = (e: HTMLAudioElement) => { + const handlePause = (e: SyntheticEvent) => { setPlaying(false) props.onPause && props.onPause(e) } @@ -257,7 +251,7 @@ export const Audio: FunctionComponent< } } - const handleCanplay = (e: any) => { + const handleCanplay = (e: SyntheticEvent) => { setIsCanPlay(true) if (props.autoPlay && !playing) { AudioRef && AudioRef.current && AudioRef.current.play() @@ -267,8 +261,8 @@ export const Audio: FunctionComponent< props.onCanPlay && props.onCanPlay(e) } } - const onTimeupdate = (e: any) => { - const time = parseInt(e.target.currentTime) + const onTimeupdate = (e: SyntheticEvent) => { + const time = parseInt(String((e.target as HTMLAudioElement).currentTime)) const formated = formatSeconds(`${time}`) statusRef.current.currentDuration = formated setPercent((time / statusRef.current.second) * 100) @@ -286,10 +280,8 @@ export const Audio: FunctionComponent< muted={muted} preload={preload} loop={loop} - onPause={(e: any) => handlePause(e)} - onEnded={(e: React.SyntheticEvent) => - handleEnded(e) - } + onPause={(e) => handlePause(e)} + onEnded={(e) => handleEnded(e)} onCanPlay={(e) => handleCanplay(e)} onTimeUpdate={(e) => onTimeupdate(e)} > diff --git a/src/packages/audio/demo.scss b/src/packages/audio/demo.scss index 640f64893a..5eb2fa6d81 100644 --- a/src/packages/audio/demo.scss +++ b/src/packages/audio/demo.scss @@ -5,7 +5,7 @@ width: 100px; height: auto; padding: 8px; - border: 1px solid $color-divider; + border: 1px solid $color-border; border-radius: 18px; } } diff --git a/src/packages/audio/doc.en-US.md b/src/packages/audio/doc.en-US.md index d6895a0ec4..3800640c30 100644 --- a/src/packages/audio/doc.en-US.md +++ b/src/packages/audio/doc.en-US.md @@ -156,7 +156,7 @@ export default App; | type | Display form, optional value：controls、panel、progress、icon、none | `string` | `progress` | | onBack | Voice will be retreated, type = progress takes effect | `(event：HTMLAudioElement) => void` | `-` | | onForward | Voice fast -moving back, type = progress | `(event：HTMLAudioElement) => void` | `-` | -| onPause | Suspension | `(event：HTMLAudioElement) => void` | `-` | -| onEnd | The voice playback is complete, loop=false takes effect | `(event：HTMLAudioElement) => void` | `-` | +| onPause | Suspension | `(event：SyntheticEvent) => void` | `-` | +| onEnd | The voice playback is complete, loop=false takes effect | `(event：SyntheticEvent) => void` | `-` | | onMute | Mute | `(event：HTMLAudioElement) => void` | `-` | -| onCanPlay | Can be triggered when the media can be played | `(event：HTMLAudioElement) => void` | `-` | \ No newline at end of file +| onCanPlay | Can be triggered when the media can be played | `(event：SyntheticEvent) => void` | `-` | \ No newline at end of file diff --git a/src/packages/audio/doc.md b/src/packages/audio/doc.md index 904b5832bc..5499c919e6 100644 --- a/src/packages/audio/doc.md +++ b/src/packages/audio/doc.md @@ -156,7 +156,7 @@ export default App; | type | 展示形式，可选值：controls 控制面板 progress 进度条 icon 图标 none 自定义 | `string` | `progress` | | onBack | 语音快退回调，type = progress 时生效 | `(event：HTMLAudioElement) => void` | `-` | | onForward | 语音快进回调，type = progress 时生效 | `(event：HTMLAudioElement) => void` | `-` | -| onPause | 暂停回调 | `(event：HTMLAudioElement) => void` | `-` | -| onEnd | 语音播放完成，loop = false 时生效 | `(event：HTMLAudioElement) => void` | `-` | +| onPause | 暂停回调 | `(event：SyntheticEvent) => void` | `-` | +| onEnd | 语音播放完成，loop = false 时生效 | `(event：SyntheticEvent) => void` | `-` | | onMute | 静音回调 | `(event：HTMLAudioElement) => void` | `-` | -| onCanPlay | 可以播放媒体时触发 | `(event：HTMLAudioElement) => void` | `-` | \ No newline at end of file +| onCanPlay | 可以播放媒体时触发 | `(event：SyntheticEvent) => void` | `-` | \ No newline at end of file diff --git a/src/packages/avatar/avatar.taro.tsx b/src/packages/avatar/avatar.taro.tsx index 16ed04f0f7..d9feb4a5b0 100644 --- a/src/packages/avatar/avatar.taro.tsx +++ b/src/packages/avatar/avatar.taro.tsx @@ -4,8 +4,8 @@ import React, { useRef, FunctionComponent, useContext, - MouseEventHandler, } from 'react' +import type { MouseEvent } from 'react' import classNames from 'classnames' import { My } from '@nutui/icons-react-taro' import Image from '@/packages/image/index.taro' @@ -22,7 +22,7 @@ export interface AvatarProps extends BasicComponent { fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' src: string alt: string - onClick: (e: MouseEvent) => void + onClick: (e: MouseEvent) => void onError: () => void } @@ -135,7 +135,7 @@ export const Avatar: FunctionComponent< } } - const clickAvatar: MouseEventHandler = (e: any) => { + const clickAvatar = (e: MouseEvent) => { onClick && onClick(e) } diff --git a/src/packages/avatar/avatar.tsx b/src/packages/avatar/avatar.tsx index 37f0d54933..9cc3583884 100644 --- a/src/packages/avatar/avatar.tsx +++ b/src/packages/avatar/avatar.tsx @@ -4,8 +4,8 @@ import React, { useRef, FunctionComponent, useContext, - MouseEventHandler, } from 'react' +import type { MouseEvent } from 'react' import classNames from 'classnames' import { My } from '@nutui/icons-react' import { AvatarContext } from '@/packages/avatargroup/context' @@ -22,7 +22,7 @@ export interface AvatarProps extends BasicComponent { color: string src: string alt: string - onClick: (e: MouseEvent) => void + onClick: (e: MouseEvent) => void onError: () => void } @@ -134,7 +134,7 @@ export const Avatar: FunctionComponent< } } - const clickAvatar: MouseEventHandler = (e: any) => { + const clickAvatar = (e: MouseEvent) => { onClick && onClick(e) } diff --git a/src/packages/avatar/demo.taro.tsx b/src/packages/avatar/demo.taro.tsx index 2796c52606..30e7c622d6 100644 --- a/src/packages/avatar/demo.taro.tsx +++ b/src/packages/avatar/demo.taro.tsx @@ -96,7 +96,7 @@ const AvatarDemo = () => { } /> diff --git a/src/packages/avatar/demo.tsx b/src/packages/avatar/demo.tsx index 950bde7fb4..93fcfce3d6 100644 --- a/src/packages/avatar/demo.tsx +++ b/src/packages/avatar/demo.tsx @@ -92,7 +92,7 @@ const AvatarDemo = () => { } /> diff --git a/src/packages/avatar/doc.en-US.md b/src/packages/avatar/doc.en-US.md index 952374a031..368872019d 100644 --- a/src/packages/avatar/doc.en-US.md +++ b/src/packages/avatar/doc.en-US.md @@ -251,7 +251,7 @@ export default App; | src | The address of the image for an image avatar or image element | `string` | `-` | | alt | This attribute defines the alternative text describing the image | `string` | `-` | | icon | Custom icon type for an icon avatar | `ReactNode` | `-` | -| onClick | Emitted when cell is clicked | `(e: MouseEvent) => void` | `-` | +| onClick | Emitted when cell is clicked | `(e: MouseEvent) => void` | `-` | | onError | Handler when img load error | `() => void` | `-` | ## Avatar.Group diff --git a/src/packages/avatar/doc.md b/src/packages/avatar/doc.md index aff09ff1f2..cbbe5c055b 100644 --- a/src/packages/avatar/doc.md +++ b/src/packages/avatar/doc.md @@ -254,7 +254,7 @@ export default App; | src | 设置图片类型头像的地址 | `string` | `-` | | alt | 设置图片类型头像无法显示时的替代文本 | `string` | `-` | | icon | 设置 Icon 类型头像图标 | `ReactNode` | `-` | -| onClick | 点击头像触发事件 | `(e: MouseEvent) => void` | `-` | +| onClick | 点击头像触发事件 | `(e: MouseEvent) => void` | `-` | | onError | 图片加载失败的事件 | `() => void` | `-` | ## Avatar.Group diff --git a/src/packages/avatar/doc.taro.md b/src/packages/avatar/doc.taro.md index c9ec6702f7..9876bbd4d6 100644 --- a/src/packages/avatar/doc.taro.md +++ b/src/packages/avatar/doc.taro.md @@ -251,7 +251,7 @@ export default App; | src | 设置图片类型头像的地址 | `string` | `-` | | alt | 设置图片类型头像无法显示时的替代文本 | `string` | `-` | | icon | 设置 Icon 类型头像图标 | `ReactNode` | `-` | -| onClick | 点击头像触发事件 | `(e: MouseEvent) => void` | `-` | +| onClick | 点击头像触发事件 | `(e: MouseEvent) => void` | `-` | | onError | 图片加载失败的事件 | `() => void` | `-` | ## Avatar.Group diff --git a/src/packages/backtop/backtop.scss b/src/packages/backtop/backtop.scss index 53649988a6..32ab9787cb 100644 --- a/src/packages/backtop/backtop.scss +++ b/src/packages/backtop/backtop.scss @@ -5,7 +5,7 @@ &.show { width: 40px; height: 40px; - background: $color-card-background; + background: $color-background-overlay; color: $color-title; border: 1px solid $backtop-border-color; border-radius: 50%; diff --git a/src/packages/backtop/backtop.taro.tsx b/src/packages/backtop/backtop.taro.tsx index 46148e946a..524df8ebec 100644 --- a/src/packages/backtop/backtop.taro.tsx +++ b/src/packages/backtop/backtop.taro.tsx @@ -1,4 +1,5 @@ import React, { FunctionComponent, useState } from 'react' +import type { MouseEvent } from 'react' import { usePageScroll, pageScrollTo } from '@tarojs/taro' import { Top } from '@nutui/icons-react-taro' import classNames from 'classnames' @@ -8,7 +9,7 @@ export interface BackTopProps extends BasicComponent { threshold: number zIndex: number duration: number - onClick?: (event: MouseEvent) => void + onClick?: (event: MouseEvent) => void } const defaultProps = { @@ -37,7 +38,7 @@ export const BackTop: FunctionComponent< }) // 返回顶部点击事件 - const goTop = (e: any) => { + const goTop = (e: MouseEvent) => { onClick && onClick(e) pageScrollTo({ scrollTop: 0, diff --git a/src/packages/backtop/backtop.tsx b/src/packages/backtop/backtop.tsx index 731a4a5e90..08fc33bb6b 100644 --- a/src/packages/backtop/backtop.tsx +++ b/src/packages/backtop/backtop.tsx @@ -1,4 +1,5 @@ import React, { FunctionComponent, useEffect, useState, useRef } from 'react' +import type { MouseEvent } from 'react' import { Top } from '@nutui/icons-react' import classNames from 'classnames' import { BasicComponent, ComponentDefaults } from '@/utils/typings' @@ -10,7 +11,7 @@ export interface BackTopProps extends BasicComponent { threshold: number zIndex: number duration: number - onClick?: (event: MouseEvent) => void + onClick?: (event: MouseEvent) => void } const defaultProps = { @@ -120,7 +121,7 @@ export const BackTop: FunctionComponent< scrollEl.current?.removeEventListener('resize', scrollListener, false) } // 返回顶部点击事件 - const goTop = (e: any) => { + const goTop = (e: MouseEvent) => { onClick && onClick(e) const otime = +new Date() startTime = otime diff --git a/src/packages/backtop/doc.en-US.md b/src/packages/backtop/doc.en-US.md index a13cc9dde4..c2387c8d81 100644 --- a/src/packages/backtop/doc.en-US.md +++ b/src/packages/backtop/doc.en-US.md @@ -152,7 +152,7 @@ export default App; | threshold | How high to scroll the page vertically | `number` | `200` | | zIndex | Set the component z-index | `number` | `10` | | duration | Set animation duration | `number` | `1000` | -| onClick | Emitted when component is clicked | `(event: MouseEvent) => void` | `-` | +| onClick | Emitted when component is clicked | `(event: MouseEvent) => void` | `-` | ## Theming diff --git a/src/packages/backtop/doc.md b/src/packages/backtop/doc.md index 59c2343ffa..89ab14fdce 100644 --- a/src/packages/backtop/doc.md +++ b/src/packages/backtop/doc.md @@ -152,7 +152,7 @@ export default App; | threshold | 页面垂直滚动多高后出现 | `number` | `200` | | zIndex | 设置组件页面层级 | `number` | `10` | | duration | 设置动画持续时间，为 0 时表示无动画 | `number` | `1000` | -| onClick | 按钮点击时触发事件 | `(event: MouseEvent) => void` | `-` | +| onClick | 按钮点击时触发事件 | `(event: MouseEvent) => void` | `-` | ## 主题定制 diff --git a/src/packages/backtop/doc.taro.md b/src/packages/backtop/doc.taro.md index 65225cae17..837cd164b2 100644 --- a/src/packages/backtop/doc.taro.md +++ b/src/packages/backtop/doc.taro.md @@ -128,7 +128,7 @@ export default App; | threshold | 页面垂直滚动多高后出现 | `number` | `200` | | zIndex | 设置组件页面层级 | `number` | `10` | | duration | 设置动画持续时间，为 0 时表示无动画 | `number` | `1000` | -| onClick | 按钮点击时触发事件 | `(event: MouseEvent) => void` | `-` | +| onClick | 按钮点击时触发事件 | `(event: MouseEvent) => void` | `-` | ## 主题定制 diff --git a/src/packages/badge/doc.en-US.md b/src/packages/badge/doc.en-US.md index bd98050549..6b9e531173 100644 --- a/src/packages/badge/doc.en-US.md +++ b/src/packages/badge/doc.en-US.md @@ -262,9 +262,9 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | -| \--nutui-badge-background-color | badge background color | `linear-gradient(135deg, $color-primary 0%, $color-primary-end 100%))` | +| \--nutui-badge-background-color | badge background color | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%))` | | \--nutui-badge-color | badge content color | `#fff` | -| \--nutui-badge-font-size | badge content font size | `$font-help` | +| \--nutui-badge-font-size | badge content font size | `$font-size-small` | | \--nutui-badge-border | badge border | `0px solid $color-primary-text` | | \--nutui-badge-border-radius | badge border-radius | `14px` | | \--nutui-badge-padding | badge padding value | `0 5px` | diff --git a/src/packages/badge/doc.md b/src/packages/badge/doc.md index 2b7d752dcb..4748ebd6af 100644 --- a/src/packages/badge/doc.md +++ b/src/packages/badge/doc.md @@ -262,9 +262,9 @@ export default App; | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-badge-background-color | badge 背景色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-end 100%))` | +| \--nutui-badge-background-color | badge 背景色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%))` | | \--nutui-badge-color | badge 内容色值 | `#fff` | -| \--nutui-badge-font-size | badge 内容字号 | `$font-help` | +| \--nutui-badge-font-size | badge 内容字号 | `$font-size-small` | | \--nutui-badge-border | badge 边框 | `0px solid $color-primary-text` | | \--nutui-badge-border-radius | badge 边框圆角 | `14px` | | \--nutui-badge-padding | badge 的padding值 | `0 5px` | diff --git a/src/packages/badge/doc.taro.md b/src/packages/badge/doc.taro.md index 51277b4705..25f11b96fe 100644 --- a/src/packages/badge/doc.taro.md +++ b/src/packages/badge/doc.taro.md @@ -262,9 +262,9 @@ export default App; | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-badge-background-color | badge 背景色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-end 100%))` | +| \--nutui-badge-background-color | badge 背景色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%))` | | \--nutui-badge-color | badge 内容色值 | `#fff` | -| \--nutui-badge-font-size | badge 内容字号 | `$font-help` | +| \--nutui-badge-font-size | badge 内容字号 | `$font-size-small` | | \--nutui-badge-border | badge 边框 | `0px solid $color-primary-text` | | \--nutui-badge-border-radius | badge 边框圆角 | `14px` | | \--nutui-badge-padding | badge 的padding值 | `0 5px` | diff --git a/src/packages/badge/doc.zh-TW.md b/src/packages/badge/doc.zh-TW.md index c5200b312d..8019680db3 100644 --- a/src/packages/badge/doc.zh-TW.md +++ b/src/packages/badge/doc.zh-TW.md @@ -262,9 +262,9 @@ export default App; | 名稱 | 說明 | 默認值 | | --- | --- | --- | -| \--nutui-badge-background-color | badge 背景色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-end 100%))` | +| \--nutui-badge-background-color | badge 背景色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%))` | | \--nutui-badge-color | badge 內容色值 | `#fff` | -| \--nutui-badge-font-size | badge 內容字號 | `$font-help` | +| \--nutui-badge-font-size | badge 內容字號 | `$font-size-small` | | \--nutui-badge-border | badge 邊框 | `0px solid $color-primary-text` | | \--nutui-badge-border-radius | badge 邊框圓角 | `14px` | | \--nutui-badge-padding | badge 的padding值 | `0 5px` | diff --git a/src/packages/barrage/barrage.scss b/src/packages/barrage/barrage.scss index 6f525e38ae..6646079b2c 100644 --- a/src/packages/barrage/barrage.scss +++ b/src/packages/barrage/barrage.scss @@ -22,8 +22,8 @@ transform: translateX(100%); background: linear-gradient( to right, - var(--nutui-black-2), - rgba(0, 0, 0, 0) + var(--nutui-black-3), + var(--nutui-black-1) ); box-sizing: border-box; diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss index 7a18c7cc75..2f30b7ac8a 100644 --- a/src/packages/button/button.scss +++ b/src/packages/button/button.scss @@ -6,7 +6,6 @@ margin: 0; padding: 0; height: $button-default-height; - line-height: $button-default-line-height; font-size: $button-default-font-size; font-weight: $button-default-font-weight; text-align: center; @@ -17,11 +16,14 @@ touch-action: manipulation; color: $button-default-color; - background: $button-default-bg-color; - border: $button-border-width solid $button-default-border-color; + background: $button-default-background-color; - .nut-button-text { - margin-left: $button-text-icon-margin-left; + &-text { + margin-left: $button-text-icon-margin; + + &.right { + margin-right: $button-text-icon-margin; + } } &::before { @@ -47,9 +49,7 @@ opacity: 0.1; } - &__warp { - height: 100%; - width: 100%; + &-warp { display: flex; align-items: center; justify-content: center; @@ -66,12 +66,12 @@ &--solid { color: $button-primary-color; background: $button-primary-background-color; - border: $button-border-width solid transparent; + background-origin: border-box; } &.nut-button--outline { color: $button-primary-border-color; - border-color: $button-primary-border-color; + border: $button-border-width solid $button-primary-border-color; background: transparent; } @@ -80,16 +80,44 @@ border-color: transparent; } + &.nut-button--icononly { + width: $button-default-height; + padding: 0; + } + + &--normal { + padding: $button-normal-padding; + } + + &--large { + width: 100%; + height: $button-large-height; + font-size: $button-large-font-size; + } + + &--small { + height: $button-small-height; + padding: $button-small-padding; + font-size: $button-small-font-size; + font-weight: $button-small-font-weight; + } + + &--mini { + height: $button-mini-height; + padding: $button-mini-padding; + font-size: $button-mini-font-size; + font-weight: $button-mini-font-weight; + } + + &--default { + padding: $button-default-padding; + border: $button-border-width solid $button-default-border-color; + } + &--primary { color: $button-primary-color; background: $button-primary-background-color; - border: $button-border-width solid transparent; - - &.nut-button--outline { - color: $button-primary-border-color; - border-color: $button-primary-border-color; - background: transparent; - } + background-origin: border-box; &.nut-button--none { color: $button-primary-border-color; @@ -99,7 +127,7 @@ &--info { color: $button-info-color; background: $button-info-background-color; - border: $button-border-width solid transparent; + background-origin: border-box; &.nut-button--outline { color: $button-info-border-color; @@ -115,7 +143,7 @@ &--success { color: $button-success-color; background: $button-success-background-color; - border: $button-border-width solid transparent; + background-origin: border-box; &.nut-button--outline { color: $button-success-border-color; @@ -131,7 +159,7 @@ &--danger { color: $button-danger-color; background: $button-danger-background-color; - border: $button-border-width solid transparent; + background-origin: border-box; &.nut-button--outline { color: $button-danger-border-color; @@ -147,7 +175,7 @@ &--warning { color: $button-warning-color; background: $button-warning-background-color; - border: $button-border-width solid transparent; + background-origin: border-box; &.nut-button--outline { color: $button-warning-border-color; @@ -160,43 +188,6 @@ } } - &--large { - width: 100%; - height: $button-large-height; - line-height: $button-large-line-height; - - .text { - margin-left: $button-text-icon-large-margin-left; - } - } - - &--normal { - padding: $button-default-padding; - font-size: $button-default-font-size; - } - - &--small { - height: $button-small-height; - line-height: $button-small-line-height; - padding: $button-small-padding; - font-size: $button-small-font-size; - - .text { - margin-left: $button-text-icon-small-margin-left; - } - } - - &--mini { - height: $button-mini-height; - line-height: $button-mini-line-height; - padding: $button-mini-padding; - font-size: $button-mini-font-size; - - .text { - margin-left: $button-text-icon-mini-margin-left; - } - } - &--block { display: block; width: 100%; diff --git a/src/packages/button/button.taro.tsx b/src/packages/button/button.taro.tsx index 69300d1b25..7f20789639 100644 --- a/src/packages/button/button.taro.tsx +++ b/src/packages/button/button.taro.tsx @@ -1,4 +1,5 @@ import React, { CSSProperties, useCallback } from 'react' +import type { MouseEvent } from 'react' import classNames from 'classnames' import { ButtonProps as MiniProgramButtonProps } from '@tarojs/components' import { Loading } from '@nutui/icons-react-taro' @@ -33,7 +34,8 @@ export interface ButtonProps loading: boolean disabled: boolean icon: React.ReactNode - onClick: (e: MouseEvent) => void + rightIcon: React.ReactNode + onClick: (e: MouseEvent) => void } const prefixCls = 'nut-button' @@ -44,12 +46,13 @@ const defaultProps = { type: 'default', size: 'normal', shape: 'round', - fill: 'solid', + fill: 'outline', loading: false, disabled: false, block: false, icon: null, - onClick: (e: MouseEvent) => {}, + rightIcon: null, + onClick: (e: MouseEvent) => {}, } as ButtonProps export const Button = React.forwardRef>( (props, ref) => { @@ -63,10 +66,11 @@ export const Button = React.forwardRef>( size, block, icon, + rightIcon, children, - onClick, className, style, + onClick, ...rest } = { ...defaultProps, @@ -75,7 +79,7 @@ export const Button = React.forwardRef>( const getStyle = useCallback(() => { const style: CSSProperties = {} if (props.color) { - if (fill && fill === 'outline') { + if (props.fill && props.fill === 'outline') { style.color = color style.background = '#fff' if (!color?.includes('gradient')) { @@ -89,7 +93,7 @@ export const Button = React.forwardRef>( return style }, [color]) - const handleClick = (e: any) => { + const handleClick = (e: MouseEvent) => { if (!loading && !disabled && onClick) { onClick(e) } @@ -109,7 +113,9 @@ export const Button = React.forwardRef>( prefixCls, className, props.type ? `${prefixCls}--${type}` : null, + props.fill ? '' : `${prefixCls}--${type}`, props.fill ? `${prefixCls}--${fill}` : null, + children ? '' : `${prefixCls}--icononly`, { [`${prefixCls}--${size}`]: size, [`${prefixCls}--${shape}`]: shape, @@ -121,14 +127,19 @@ export const Button = React.forwardRef>( style={{ ...getStyle(), ...style }} onClick={(e) => handleClick(e)} > -
+
{loading && } {!loading && icon ? icon : null} {children && ( -
+
{children}
)} + {rightIcon || null}
) diff --git a/src/packages/button/button.tsx b/src/packages/button/button.tsx index 2ed633809b..b48a42592d 100644 --- a/src/packages/button/button.tsx +++ b/src/packages/button/button.tsx @@ -1,4 +1,5 @@ import React, { CSSProperties, useCallback } from 'react' +import type { MouseEvent } from 'react' import classNames from 'classnames' import { Loading } from '@nutui/icons-react' import { BasicComponent, ComponentDefaults } from '@/utils/typings' @@ -24,9 +25,10 @@ export interface ButtonProps extends BasicComponent { loading: boolean disabled: boolean icon: React.ReactNode + rightIcon: React.ReactNode id: string nativeType: 'submit' | 'reset' | 'button' - onClick: (e: MouseEvent) => void + onClick: (e: MouseEvent) => void } const prefixCls = 'nut-button' @@ -37,13 +39,14 @@ const defaultProps = { type: 'default', size: 'normal', shape: 'round', - fill: 'solid', + fill: 'outline', loading: false, disabled: false, block: false, icon: null, + rightIcon: null, nativeType: 'button', - onClick: (e: MouseEvent) => {}, + onClick: (e: MouseEvent) => {}, } as ButtonProps export const Button = React.forwardRef>( (props, ref) => { @@ -57,11 +60,12 @@ export const Button = React.forwardRef>( size, block, icon, + rightIcon, children, - onClick, className, style, nativeType, + onClick, ...rest } = { ...defaultProps, @@ -70,7 +74,7 @@ export const Button = React.forwardRef>( const getStyle = useCallback(() => { const style: CSSProperties = {} if (props.color) { - if (fill && fill === 'outline') { + if (props.fill && props.fill === 'outline') { style.color = color style.background = '#fff' if (!color?.includes('gradient')) { @@ -84,14 +88,13 @@ export const Button = React.forwardRef>( return style }, [color]) - const handleClick = (e: any) => { + const handleClick = (e: MouseEvent) => { if (!loading && !disabled && onClick) { onClick(e) } } return ( - // eslint-disable-next-line react/button-has-type ) diff --git a/src/packages/button/demo.taro.tsx b/src/packages/button/demo.taro.tsx index 1be2d725a8..755fbf04a7 100644 --- a/src/packages/button/demo.taro.tsx +++ b/src/packages/button/demo.taro.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' import Taro from '@tarojs/taro' -import { Star, StarFill } from '@nutui/icons-react-taro' +import { Star, Plus } from '@nutui/icons-react-taro' import { useTranslate } from '@/sites/assets/locale/taro' import Header from '@/sites/components/header' import { Button, Cell } from '@/packages/nutui.react.taro' @@ -52,7 +52,7 @@ const ButtonDemo = () => { d04fcbda: '加载中', '0aaad622': '图标按钮', '0aaad620': '按钮尺寸', - '60a53514': '收藏', + '60a53514': '操作按钮', b8a453e3: '大号按钮', '248be9e1': '普通按钮', ea3d02f2: '小型按钮', @@ -78,7 +78,7 @@ const ButtonDemo = () => { d04fcbda: '載入中', '0aaad622': '图标按钮', '0aaad620': '按鈕尺寸', - '60a53514': '收藏', + '60a53514': '操作按钮', b8a453e3: '大號按鈕', '248be9e1': '普通按鈕', ea3d02f2: '小型按鈕', @@ -104,7 +104,7 @@ const ButtonDemo = () => { d04fcbda: 'Loading', '0aaad622': 'Icon Button', '0aaad620': 'Button size', - '60a53514': 'Favorite', + '60a53514': 'Operation Button', b8a453e3: 'Large button', '248be9e1': 'Normal Button', ea3d02f2: 'Mini Button', @@ -170,6 +170,62 @@ const ButtonDemo = () => { None +

{translated['0aaad622']}

+ + + + + + +

{translated['7db1a8b2']}

-

{translated['0aaad622']}

- - - - -

{translated['0aaad620']}

+

{translated['0aaad622']}

+ + + + + + +

{translated['7db1a8b2']}

-

{translated['0aaad622']}

- - - - -

{translated['0aaad620']}

+ + + + ); @@ -261,7 +297,7 @@ export default App; | block | block element | `boolean` | `false` | | icon | icon | `ReactNode` | `-` | | loading | loading status | `boolean` | `false` | -| onClick | Triggered when the button is clicked | `onClick: (e: MouseEvent) => void` | `false` | +| onClick | Triggered when the button is clicked | `(e: MouseEvent) => void` | `-` | ## Theming @@ -271,33 +307,26 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | -| \--nutui-button-border-radius | Rounded corners of the button | `25px` | +| \--nutui-button-border-radius | Rounded corners of the button | `24px` | | \--nutui-button-border-width | Button border width | `1px` | -| \--nutui-button-default-bg-color | The background color of the button whose type is default | `$white` | -| \--nutui-button-default-border-color | The border color of the button whose type is default | `$color-text` | +| \--nutui-button-normal-padding | The padding of the button whose size is normal | `0px 20px` | +| \--nutui-button-default-height | The height of the button whose type is default | `38px` | | \--nutui-button-default-color | The text color of the button whose type is default |`$color-title` | +| \--nutui-button-default-background-color | The background color of the button whose type is default | `$white` | +| \--nutui-button-default-border-color | The border color of the button whose type is default | `$color-text` | | \--nutui-button-default-padding | padding of buttons with type default | `0 18px` | -| \--nutui-button-mini-padding | Padding for buttons with size mini | `0 12px` | -| \--nutui-button-mini-height | The height of the button whose size is mini | `24px` | -| \--nutui-button-small-padding | Padding for small buttons | `0 12px` | -| \--nutui-button-small-height | The height of the button whose size is small | `28px` | -| \--nutui-button-default-height | The height of the button whose type is default | `38px` | +| \--nutui-button-default-font-size | The font size of the button whose type is default | `$font-size` | +| \--nutui-button-default-font-weight |The font weight of the button whose type is default | `$font-weight-bold` | | \--nutui-button-large-height | The height of the button whose size is large | `48px` | -| \--nutui-button-large-line-height | The line height of the button whose size is large | `46px` | -| \--nutui-button-small-line-height | The line height of the button whose size is small | `26px` | -| \--nutui-button-block-height | The height of the block's button | `48px` | -| \--nutui-button-block-line-height | The line height of the block's button | `46px` | -| \--nutui-button-default-line-height | The line height of the button whose type is default | `36px` | -| \--nutui-button-default-font-size | The font size of the button whose type is default | `$font-text` | | \--nutui-button-large-font-size | The font size of buttons whose size is large | `$button-default-font-size` | -| \--nutui-button-small-font-size | The font size of the button whose size is small | `$font-help` | -| \--nutui-button-mini-font-size | The font size of the button whose size is mini | `$font-help` | -| \--nutui-button-mini-line-height | The line height of the button whose size is mini | `1.2` | -| \--nutui-button-text-icon-margin-left | left margin of text with icon button | `5px` | -| \--nutui-button-text-icon-large-margin-left | size is the left margin of the text of the large button | `10px` | -| \--nutui-button-text-icon-small-margin-left | size is the left margin of the small button text | `2px` | -| \--nutui-button-text-icon-mini-margin-left | size is the left margin of the text of the mini button | `1px` | -| \--nutui-button-disabled-opacity | opacity of button in disabled state | `0.68` | +| \--nutui-button-small-padding | Padding for small buttons | `0 12px` | +| \--nutui-button-small-height | The height of the button whose size is small | `28px` | +| \--nutui-button-small-font-size | The font size of the button whose size is small | `$font-size-small` | +| \--nutui-button-small-font-weight | The font weight of the button whose size is small | `$font-weight` | +| \--nutui-button-mini-padding | Padding for buttons with size mini | `0 12px` | +| \--nutui-button-mini-height | The height of the button whose size is mini | `24px` | +| \--nutui-button-mini-font-size | The font size of the button whose size is mini | `$font-size-small` | +| \--nutui-button-mini-font-weight | The font weight of the button whose size is mini | `$font-weight` | | \--nutui-button-primary-color | type is the text color of the primary button | `$white` | | \--nutui-button-primary-border-color | Type is the border color of the primary button | `$color-primary` | | \--nutui-button-info-color | Type is info button text color | `$white` | @@ -308,4 +337,6 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-button-danger-border-color | type is the border color of danger button | `rgba(250, 44, 25, 1)` | | \--nutui-button-danger-background-color | type is the background color of the danger button | `rgba(250, 44, 25, 1)` | | \--nutui-button-warning-color | Type is warning button text color | `$white` | -| \--nutui-button-warning-border-color | type is warning button border color | `rgba(255, 158, 13, 1)` | \ No newline at end of file +| \--nutui-button-warning-border-color | type is warning button border color | `rgba(255, 158, 13, 1)` | +| \--nutui-button-text-icon-margin | left margin of text with icon button | `4px` | +| \--nutui-button-disabled-opacity | opacity of button in disabled state | `0.68` | \ No newline at end of file diff --git a/src/packages/button/doc.md b/src/packages/button/doc.md index 8da251309c..b1d6aeced7 100644 --- a/src/packages/button/doc.md +++ b/src/packages/button/doc.md @@ -150,20 +150,56 @@ export default App; ```tsx import React from "react"; import { Button } from '@nutui/nutui-react'; +import { Star, Plus } from '@nutui/icons-react' const App = () => { return ( <> - + + + + ); @@ -261,7 +297,7 @@ export default App; | block | 是否为块级元素 | `boolean` | `false` | | icon | 按钮图标 | `ReactNode` | `-` | | loading | 按钮loading状态 | `boolean` | `false` | -| onClick | 点击按钮时触发 | `onClick: (e: MouseEvent) => void` | `false` | +| onClick | 点击按钮时触发 | `(e: MouseEvent) => void` | `-` | ## 主题定制 @@ -271,33 +307,26 @@ export default App; | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-button-border-radius | 按钮的圆角设置 | `25px` | +| \--nutui-button-border-radius | 按钮的圆角设置 | `24px` | | \--nutui-button-border-width | 按钮的边框宽度 | `1px` | -| \--nutui-button-default-bg-color | type 为 default 的按钮的背景色 | `$white` | -| \--nutui-button-default-border-color | type 为 default 的按钮的边框色 | `$color-text` | +| \--nutui-button-normal-padding | size normal时的padding值 | `0px 20px` | +| \--nutui-button-default-height | type 为 default 的按钮的高度 | `38px` | | \--nutui-button-default-color | type 为 default 的按钮的文本色 | `$color-title` | +| \--nutui-button-default-background-color | type 为 default 的按钮的背景色 | `$white` | +| \--nutui-button-default-border-color | type 为 default 的按钮的边框色 | `$color-text` | | \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 18px` | -| \--nutui-button-mini-padding | size 为 mini 的按钮的内边距 | `0 12px` | -| \--nutui-button-mini-height | size 为 mini 的按钮的高度 | `24px` | +| \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size` | +| \--nutui-button-default-font-weight | type 为 default 的按钮的字重 | `$font-weight-bold` | +| \--nutui-button-large-height | size 为 large 的按钮的高度 | `48px` | +| \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$font-size-xl` | | \--nutui-button-small-padding | size 为 small 的按钮的内边距 | `0 12px` | | \--nutui-button-small-height | size 为 small 的按钮的高度 | `28px` | -| \--nutui-button-default-height | type 为 default 的按钮的高度 | `38px` | -| \--nutui-button-large-height | size 为 large 的按钮的高度 | `48px` | -| \--nutui-button-large-line-height | size 为 large 的按钮的行高 | `46px` | -| \--nutui-button-small-line-height | size 为 small 的按钮的行高 | `26px` | -| \--nutui-button-block-height | block 的按钮的高度 | `48px` | -| \--nutui-button-block-line-height | block 的按钮的行高 | `46px` | -| \--nutui-button-default-line-height | type 为 default 的按钮的行高 | `36px` | -| \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-text` | -| \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$button-default-font-size` | -| \--nutui-button-small-font-size | size 为 small 的按钮的字号 | `$font-help` | -| \--nutui-button-mini-font-size | size 为 mini 的按钮的字号 | `$font-help` | -| \--nutui-button-mini-line-height | size 为 mini 的按钮的行高 | `1.2` | -| \--nutui-button-text-icon-margin-left | 带 icon按钮的文本的左边距 | `5px` | -| \--nutui-button-text-icon-large-margin-left | size 为 large 按钮的文本的左边距 | `10px` | -| \--nutui-button-text-icon-small-margin-left | size 为 small 按钮的文本的左边距 | `2px` | -| \--nutui-button-text-icon-mini-margin-left | size 为 mini 按钮的文本的左边距 | `1px` | -| \--nutui-button-disabled-opacity | disabled 状态下按钮的透明度 | `0.68` | +| \--nutui-button-small-font-size | size 为 small 的按钮的字号 | `$font-size-small` | +| \--nutui-button-small-font-weight | type 为 small 的按钮的字重 | `$font-weight` | +| \--nutui-button-mini-padding | size 为 mini 的按钮的内边距 | `0 12px` | +| \--nutui-button-mini-height | size 为 mini 的按钮的高度 | `24px` | +| \--nutui-button-mini-font-size | size 为 mini 的按钮的字号 | `$font-size-small` | +| \--nutui-button-mini-font-weight | type 为 mini 的按钮的字重 | `$font-weight` | | \--nutui-button-primary-color | type 为 primary 按钮的文本颜色 | `$white` | | \--nutui-button-primary-border-color | type 为 primary 按钮的边框颜色 | `$color-primary` | | \--nutui-button-info-color | type 为 info 按钮的文本颜色 | `$white` | @@ -308,4 +337,6 @@ export default App; | \--nutui-button-danger-border-color | type 为 danger 按钮的边框颜色 | `rgba(250, 44, 25, 1)` | | \--nutui-button-danger-background-color | type 为 danger 按钮的背景颜色 | `rgba(250, 44, 25, 1)` | | \--nutui-button-warning-color | type 为 warning 按钮的文本颜色 | `$white` | -| \--nutui-button-warning-border-color | type 为 warning 按钮的边框颜色 | `rgba(255, 158, 13, 1)` | \ No newline at end of file +| \--nutui-button-warning-border-color | type 为 warning 按钮的边框颜色 | `rgba(255, 158, 13, 1)` | +| \--nutui-button-text-icon-margin | 带 icon按钮的文本的左边距 | `4px` | +| \--nutui-button-disabled-opacity | disabled 状态下按钮的透明度 | `0.68` | \ No newline at end of file diff --git a/src/packages/button/doc.taro.md b/src/packages/button/doc.taro.md index 94ac509bb4..059db62985 100644 --- a/src/packages/button/doc.taro.md +++ b/src/packages/button/doc.taro.md @@ -169,22 +169,58 @@ export default App; :::demo ```tsx -import React from "react"; +import React from "react"; import { Button } from '@nutui/nutui-react-taro'; +import { Star, Plus } from '@nutui/icons-react-taro' const App = () => { return ( <> - + + + + ); @@ -282,7 +318,7 @@ export default App; | block | 是否为块级元素 | `boolean` | `false` | | icon | 按钮图标 | `ReactNode` | `-` | | loading | 按钮loading状态 | `boolean` | `false` | -| onClick | 点击按钮时触发 | `onClick: (e: MouseEvent) => void` | `false` | +| onClick | 点击按钮时触发 | `(e: MouseEvent) => void` | `-` | ### 支持小程序API能力 @@ -296,33 +332,26 @@ export default App; | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-button-border-radius | 按钮的圆角设置 | `25px` | +| \--nutui-button-border-radius | 按钮的圆角设置 | `24px` | | \--nutui-button-border-width | 按钮的边框宽度 | `1px` | -| \--nutui-button-default-bg-color | type 为 default 的按钮的背景色 | `$white` | +| \--nutui-button-normal-padding | size normal时的padding值 | `0px 20px` | +| \--nutui-button-default-height | type 为 default 的按钮的高度 | `38px` | +| \--nutui-button-default-color | type 为 default 的按钮的文本色 | `$color-title` | +| \--nutui-button-default-background-color | type 为 default 的按钮的背景色 | `$white` | | \--nutui-button-default-border-color | type 为 default 的按钮的边框色 | `$color-text` | -| \--nutui-button-default-color | type 为 default 的按钮的文本色 |`$color-title` | | \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 18px` | -| \--nutui-button-mini-padding | size 为 mini 的按钮的内边距 | `0 12px` | -| \--nutui-button-mini-height | size 为 mini 的按钮的高度 | `24px` | +| \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size` | +| \--nutui-button-default-font-weight | type 为 default 的按钮的字重 | `$font-weight-bold` | +| \--nutui-button-large-height | size 为 large 的按钮的高度 | `48px` | +| \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$font-size-xl` | | \--nutui-button-small-padding | size 为 small 的按钮的内边距 | `0 12px` | | \--nutui-button-small-height | size 为 small 的按钮的高度 | `28px` | -| \--nutui-button-default-height | type 为 default 的按钮的高度 | `38px` | -| \--nutui-button-large-height | size 为 large 的按钮的高度 | `48px` | -| \--nutui-button-large-line-height | size 为 large 的按钮的行高 | `46px` | -| \--nutui-button-small-line-height | size 为 small 的按钮的行高 | `26px` | -| \--nutui-button-block-height | block 的按钮的高度 | `48px` | -| \--nutui-button-block-line-height | block 的按钮的行高 | `46px` | -| \--nutui-button-default-line-height | type 为 default 的按钮的行高 | `36px` | -| \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-text` | -| \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$button-default-font-size` | -| \--nutui-button-small-font-size | size 为 small 的按钮的字号 | `$font-help` | -| \--nutui-button-mini-font-size | size 为 mini 的按钮的字号 | `$font-help` | -| \--nutui-button-mini-line-height | size 为 mini 的按钮的行高 | `1.2` | -| \--nutui-button-text-icon-margin-left | 带 icon按钮的文本的左边距 | `5px` | -| \--nutui-button-text-icon-large-margin-left | size 为 large 按钮的文本的左边距 | `10px` | -| \--nutui-button-text-icon-small-margin-left | size 为 small 按钮的文本的左边距 | `2px` | -| \--nutui-button-text-icon-mini-margin-left | size 为 mini 按钮的文本的左边距 | `1px` | -| \--nutui-button-disabled-opacity | disabled 状态下按钮的透明度 | `0.68` | +| \--nutui-button-small-font-size | size 为 small 的按钮的字号 | `$font-size-small` | +| \--nutui-button-small-font-weight | type 为 small 的按钮的字重 | `$font-weight` | +| \--nutui-button-mini-padding | size 为 mini 的按钮的内边距 | `0 12px` | +| \--nutui-button-mini-height | size 为 mini 的按钮的高度 | `24px` | +| \--nutui-button-mini-font-size | size 为 mini 的按钮的字号 | `$font-size-small` | +| \--nutui-button-mini-font-weight | type 为 mini 的按钮的字重 | `$font-weight` | | \--nutui-button-primary-color | type 为 primary 按钮的文本颜色 | `$white` | | \--nutui-button-primary-border-color | type 为 primary 按钮的边框颜色 | `$color-primary` | | \--nutui-button-info-color | type 为 info 按钮的文本颜色 | `$white` | @@ -333,4 +362,6 @@ export default App; | \--nutui-button-danger-border-color | type 为 danger 按钮的边框颜色 | `rgba(250, 44, 25, 1)` | | \--nutui-button-danger-background-color | type 为 danger 按钮的背景颜色 | `rgba(250, 44, 25, 1)` | | \--nutui-button-warning-color | type 为 warning 按钮的文本颜色 | `$white` | -| \--nutui-button-warning-border-color | type 为 warning 按钮的边框颜色 | `rgba(255, 158, 13, 1)` | \ No newline at end of file +| \--nutui-button-warning-border-color | type 为 warning 按钮的边框颜色 | `rgba(255, 158, 13, 1)` | +| \--nutui-button-text-icon-margin | 带 icon按钮的文本的左边距 | `4px` | +| \--nutui-button-disabled-opacity | disabled 状态下按钮的透明度 | `0.68` | \ No newline at end of file diff --git a/src/packages/button/doc.zh-TW.md b/src/packages/button/doc.zh-TW.md index c8dfd149e9..36bb13e31d 100644 --- a/src/packages/button/doc.zh-TW.md +++ b/src/packages/button/doc.zh-TW.md @@ -150,20 +150,56 @@ export default App; ```tsx import React from "react"; import { Button } from '@nutui/nutui-react'; +import { Star, Plus } from '@nutui/icons-react' const App = () => { return ( <> - + + + + ); @@ -261,7 +297,7 @@ export default App; | block | 是否為塊級元素 | `boolean` | `false` | | icon | 按鈕圖標 | `ReactNode` | `-` | | loading | 按鈕loading狀態 | `boolean` | `false` | -| onClick | 點擊按鈕時觸發 | `onClick: (e: MouseEvent) => void` | `false` | +| onClick | 點擊按鈕時觸發 | `(e: MouseEvent) => void` | `-` | ## 主題定制 @@ -271,33 +307,26 @@ export default App; | 名稱 | 說明 | 默認值 | | --- | --- | --- | -| \--nutui-button-border-radius | 按鈕的圓角設置 | `25px` | +| \--nutui-button-border-radius | 按鈕的圓角設置 | `24px` | | \--nutui-button-border-width | 按鈕的邊框寬度 | `1px` | -| \--nutui-button-default-bg-color | type 為 default 的按鈕的背景色 | `$white` | +| \--nutui-button-normal-padding | size normal時的padding值 | `0px 20px` | +| \--nutui-button-default-height | type 為 default 的按鈕的高度 | `38px` | +| \--nutui-button-default-color | type 為 default 的按鈕的文本色 | `$color-title` | +| \--nutui-button-default-background-color | type 為 default 的按鈕的背景色 | `$white` | | \--nutui-button-default-border-color | type 為 default 的按鈕的邊框色 | `$color-text` | -| \--nutui-button-default-color | type 為 default 的按鈕的文本色 |`$color-title` | | \--nutui-button-default-padding | type 為 default 的按鈕的內邊距 | `0 18px` | -| \--nutui-button-mini-padding | size 為 mini 的按鈕的內邊距 | `0 12px` | -| \--nutui-button-mini-height | size 為 mini 的按鈕的高度 | `24px` | +| \--nutui-button-default-font-size | type 為 default 的按鈕的字號 | `$font-size` | +| \--nutui-button-default-font-weight | type 為 default 的按鈕的字重 | `$font-weight-bold` | +| \--nutui-button-large-height | size 為 large 的按鈕的高度 | `48px` | +| \--nutui-button-large-font-size | size 為 large 的按鈕的字號 | `$font-size-xl` | | \--nutui-button-small-padding | size 為 small 的按鈕的內邊距 | `0 12px` | | \--nutui-button-small-height | size 為 small 的按鈕的高度 | `28px` | -| \--nutui-button-default-height | type 為 default 的按鈕的高度 | `38px` | -| \--nutui-button-large-height | size 為 large 的按鈕的高度 | `48px` | -| \--nutui-button-large-line-height | size 為 large 的按鈕的行高 | `46px` | -| \--nutui-button-small-line-height | size 為 small 的按鈕的行高 | `26px` | -| \--nutui-button-block-height | block 的按鈕的高度 | `48px` | -| \--nutui-button-block-line-height | block 的按鈕的行高 | `46px` | -| \--nutui-button-default-line-height | type 為 default 的按鈕的行高 | `36px` | -| \--nutui-button-default-font-size | type 為 default 的按鈕的字號 | `$font-text` | -| \--nutui-button-large-font-size | size 為 large 的按鈕的字號 | `$button-default-font-size` | -| \--nutui-button-small-font-size | size 為 small 的按鈕的字號 | `$font-help` | -| \--nutui-button-mini-font-size | size 為 mini 的按鈕的字號 | `$font-help` | -| \--nutui-button-mini-line-height | size 為 mini 的按鈕的行高 | `1.2` | -| \--nutui-button-text-icon-margin-left | 帶 icon按鈕的文本的左邊距 | `5px` | -| \--nutui-button-text-icon-large-margin-left | size 為 large 按鈕的文本的左邊距 | `10px` | -| \--nutui-button-text-icon-small-margin-left | size 為 small 按鈕的文本的左邊距 | `2px` | -| \--nutui-button-text-icon-mini-margin-left | size 為 mini 按鈕的文本的左邊距 | `1px` | -| \--nutui-button-disabled-opacity | disabled 狀態下按鈕的透明度 | `0.68` | +| \--nutui-button-small-font-size | size 為 small 的按鈕的字號 | `$font-size-small` | +| \--nutui-button-small-font-weight | type 為 small 的按鈕的字重 | `$font-weight` | +| \--nutui-button-mini-padding | size 為 mini 的按鈕的內邊距 | `0 12px` | +| \--nutui-button-mini-height | size 為 mini 的按鈕的高度 | `24px` | +| \--nutui-button-mini-font-size | size 為 mini 的按鈕的字號 | `$font-size-small` | +| \--nutui-button-mini-font-weight | type 為 mini 的按鈕的字重 | `$font-weight` | | \--nutui-button-primary-color | type 為 primary 按鈕的文本顏色 | `$white` | | \--nutui-button-primary-border-color | type 為 primary 按鈕的邊框顏色 | `$color-primary` | | \--nutui-button-info-color | type 為 info 按鈕的文本顏色 | `$white` | @@ -308,4 +337,6 @@ export default App; | \--nutui-button-danger-border-color | type 為 danger 按鈕的邊框顏色 | `rgba(250, 44, 25, 1)` | | \--nutui-button-danger-background-color | type 為 danger 按鈕的背景顏色 | `rgba(250, 44, 25, 1)` | | \--nutui-button-warning-color | type 為 warning 按鈕的文本顏色 | `$white` | -| \--nutui-button-warning-border-color | type 為 warning 按鈕的邊框顏色 | `rgba(255, 158, 13, 1)` | \ No newline at end of file +| \--nutui-button-warning-border-color | type 為 warning 按鈕的邊框顏色 | `rgba(255, 158, 13, 1)` | +| \--nutui-button-text-icon-margin | 帶 icon按鈕的文本的左邊距 | `4px` | +| \--nutui-button-disabled-opacity | disabled 狀態下按鈕的透明度 | `0.68` | \ No newline at end of file diff --git a/src/packages/calendar/calendar.scss b/src/packages/calendar/calendar.scss index e624add6b1..f79f94436c 100644 --- a/src/packages/calendar/calendar.scss +++ b/src/packages/calendar/calendar.scss @@ -94,7 +94,7 @@ top: -50px; left: 0; right: 0; - font-size: $font-help; + font-size: $font-size-small; color: $color-text; } } @@ -183,7 +183,7 @@ } &-disabled { - color: $color-disabled !important; + color: $color-text-disable !important; .nut-calendar-day-info-curr { display: none; @@ -192,7 +192,7 @@ &-choose-disabled { background-color: $calendar-choose-disable-background-color; - color: $color-disabled !important; + color: $color-text-disable !important; .nut-calendar-day-info-curr { display: none; @@ -208,13 +208,12 @@ // 底部导航 &-footer { display: flex; - height: 62px; width: 100%; + flex-direction: column; background-color: $white; .calendar-confirm-btn { height: 44px; - width: 100%; margin: 10px 18px; border-radius: 22px; background: $button-primary-background-color; diff --git a/src/packages/calendar/calendar.taro.tsx b/src/packages/calendar/calendar.taro.tsx index 99e7bafec6..e7a8583a32 100644 --- a/src/packages/calendar/calendar.taro.tsx +++ b/src/packages/calendar/calendar.taro.tsx @@ -75,6 +75,7 @@ export const Calendar = React.forwardRef< const { style, className, + children, popup, visible, type, @@ -138,6 +139,7 @@ export const Calendar = React.forwardRef< ref={calendarRef} style={style} className={className} + children={children} type={type} autoBackfill={autoBackfill} popup={popup} diff --git a/src/packages/calendar/calendar.tsx b/src/packages/calendar/calendar.tsx index 70f7f3f1f7..8ee08fca5c 100644 --- a/src/packages/calendar/calendar.tsx +++ b/src/packages/calendar/calendar.tsx @@ -75,6 +75,7 @@ export const Calendar = React.forwardRef< const { style, className, + children, popup, visible, type, @@ -138,6 +139,7 @@ export const Calendar = React.forwardRef< ref={calendarRef} style={style} className={className} + children={children} type={type} autoBackfill={autoBackfill} popup={popup} diff --git a/src/packages/calendar/demo.scss b/src/packages/calendar/demo.scss index 2ea8eeda6f..1663960a6a 100644 --- a/src/packages/calendar/demo.scss +++ b/src/packages/calendar/demo.scss @@ -1,25 +1,59 @@ -.wrapper { - display: flex; - padding: 0 40px; -} +.nut-calendar { + .nut-calendar-btns { + height: 40px; + display: flex; + align-items: center; + justify-content: space-evenly; + padding: 0 20px; + } + + .nut-calendar-date { + background-color: #f9f9f9; + font-size: 12px; + + &.disabled { + color: $disable-color; + } + } + + .wrapper { + display: flex; + padding: 0 40px; + } -.d_div { - margin: 0px 5px; + .d_div { + margin: 0px 5px; - .d_btn { - background: #fa3f19; - color: #fff; + .d_btn { + background: #fa3f19; + color: #fff; + font-size: 12px; + padding: 2px 8px; + border-radius: 4px; + display: inline-block; + height: 20px; + } + } + + .info { + display: block; font-size: 12px; - padding: 2px 8px; - border-radius: 4px; - display: inline-block; - height: 20px; + line-height: 16px; + color: #999; } } -.info { - display: block; - font-size: 12px; - line-height: 16px; - color: #999; +.nut-cell__description { + .desc-box { + display: flex; + } + + .desc { + padding: 10px; + background-color: #f9f9f9; + } + + .desc1 { + padding: 10px; + } } diff --git a/src/packages/calendar/demo.taro.tsx b/src/packages/calendar/demo.taro.tsx index bc44605dd2..64262a8af9 100644 --- a/src/packages/calendar/demo.taro.tsx +++ b/src/packages/calendar/demo.taro.tsx @@ -1,7 +1,7 @@ import React, { useState, useRef } from 'react' import Taro from '@tarojs/taro' import { useTranslate } from '@/sites/assets/locale/taro' -import { Cell, Calendar } from '@/packages/nutui.react.taro' +import { Cell, Calendar, DatePicker } from '@/packages/nutui.react.taro' import Header from '@/sites/components/header' import { Utils } from '@/utils/date' import '@/packages/calendar/demo.scss' @@ -16,12 +16,15 @@ interface T { b840c88f: string a74a1fd4: string '8dab2f66': string + '8dab2f67': string + '8dab2f68': string cfbdc781: string c3a3a1d2: string e51e4582: string '7db1a8b2': string '7db1a8b3': string '7db1a8b4': string + '7db1a8b5': string a52bef0c: string d04fcbda: string '0aaad620': string @@ -39,12 +42,15 @@ const CalendarDemo = () => { b840c88f: '请选择', a74a1fd4: '选择日期区间', '8dab2f66': '至', + '8dab2f67': '请选择起始时间', + '8dab2f68': '请选择截止时间', cfbdc781: '快捷选择', c3a3a1d2: '选择日期', e51e4582: '平铺展示', '7db1a8b2': '选择多个日期', '7db1a8b3': '选择周', '7db1a8b4': '日期不可选', + '7db1a8b5': '日期区间', a52bef0c: '已选择', d04fcbda: '自定义日历', '0aaad620': '自定义按钮', @@ -59,12 +65,15 @@ const CalendarDemo = () => { b840c88f: '請選擇', a74a1fd4: '選擇日期區間', '8dab2f66': '至', + '8dab2f67': '请选择起始时间', + '8dab2f68': '请选择截止时间', cfbdc781: '快捷選擇', c3a3a1d2: '選擇日期', e51e4582: '平鋪展示', '7db1a8b2': '選擇多個日期', '7db1a8b3': '選擇周', '7db1a8b4': '日期不可選', + '7db1a8b5': '日期区间', a52bef0c: '已選擇', d04fcbda: '自定義日曆', '0aaad620': '自定義按鈕', @@ -79,12 +88,15 @@ const CalendarDemo = () => { b840c88f: 'please choose', a74a1fd4: 'Select date range', '8dab2f66': 'to', + '8dab2f67': 'Select start Time', + '8dab2f68': 'Select end time', cfbdc781: 'quick selection', c3a3a1d2: 'select date', e51e4582: 'Tiled display', '7db1a8b2': 'select multiple dates', '7db1a8b3': 'select week', '7db1a8b4': 'disable date', + '7db1a8b5': 'date range', a52bef0c: 'chosen', d04fcbda: 'custom calendar', '0aaad620': 'custom button', @@ -98,11 +110,11 @@ const CalendarDemo = () => { const currDay = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}` const [date, setDate] = useState(currDay) const [date1, setDate1] = useState(['2023-01-23', '2023-11-26']) - const [date2, setDate2] = useState('2023-05-08') const [date3, setDate3] = useState('') const [date4, setDate4] = useState([]) const [date40, setDate40] = useState([]) const [date41, setDate41] = useState([]) + const [date42, setDate42] = useState([]) const [date5, setDate5] = useState(['2023-03-23', '2023-11-26']) const [date6, setDate6] = useState(['2023-06-12', '2023-06-16']) const [date7, setDate7] = useState(['2023-07-10', '2023-07-19']) @@ -114,6 +126,7 @@ const CalendarDemo = () => { const [isVisible4, setIsVisible4] = useState(false) const [isVisible40, setIsVisible40] = useState(false) const [isVisible41, setIsVisible41] = useState(false) + const [isVisible42, setIsVisible42] = useState(false) const [isVisible5, setIsVisible5] = useState(false) const [isVisible6, setIsVisible6] = useState(false) const [isVisible7, setIsVisible7] = useState(false) @@ -140,14 +153,15 @@ const CalendarDemo = () => { const openSwitch41 = () => { setIsVisible41(true) } + const openSwitch42 = () => { + setIsVisible42(true) + } const openSwitch5 = () => { setIsVisible5(true) } - const openSwitch6 = () => { setIsVisible6(true) } - const openSwitch7 = () => { setIsVisible7(true) } @@ -172,6 +186,9 @@ const CalendarDemo = () => { const closeSwitch41 = () => { setIsVisible41(false) } + const closeSwitch42 = () => { + setIsVisible42(false) + } const closeSwitch5 = () => { setIsVisible5(false) } @@ -192,12 +209,6 @@ const CalendarDemo = () => { const setChooseValue1 = (param: string) => { setDate1([...[param[0][3], param[1][3]]]) } - - const setChooseValue2 = (param: string) => { - setDate2(param[3]) - console.log(param[3]) - } - const setChooseValue3 = (param: string) => { setDate3(param[3]) } @@ -209,18 +220,22 @@ const CalendarDemo = () => { setDate4([...dateArr]) } const setChooseValue40 = (chooseData: any) => { - console.log('setChooseValue40', [...[chooseData[0][3], chooseData[1][3]]]) const dateArr = [...[chooseData[0][3], chooseData[1][3]]] setDate40([...dateArr]) } const setChooseValue41 = (chooseData: any) => { + const dateArr = [...[chooseData[0][3], chooseData[1][3]]] + setDate41([...dateArr]) + } + + const setChooseValue42 = (chooseData: any) => { console.log( - 'setChooseValue41', + 'setChooseValue42', [...[chooseData[0][3], chooseData[1][3]]], chooseData ) const dateArr = [...[chooseData[0][3], chooseData[1][3]]] - setDate41([...dateArr]) + setDate42([...dateArr]) } const setChooseValue5 = (param: string) => { setDate5([...[param[0][3], param[1][3]]]) @@ -272,10 +287,14 @@ const CalendarDemo = () => { } } const disableDate = (date: Day) => { - return date.day === 25 + return date.day === 25 || date.day === 20 || date.day === 22 + } + const padZero = (d: number | string) => { + return d <= 9 ? `0${d}` : d } + const renderDay = (date: Day) => { - return <>{date.day <= 9 ? `0${date.day}` : date.day} + return <>{padZero(date.day)} } const renderDayTop = (date: Day) => { let currDate = '' @@ -314,6 +333,30 @@ const CalendarDemo = () => {
) } + + const [show1, setShow1] = useState(false) + const [dpAbled, setDatePickerAbled] = useState([false, false]) + const [desc1, setDesc1] = useState('10:00:00') + const [desc2, setDesc2] = useState('20:00:00') + const desc = useRef(0) + const confirm1 = (values: (string | number)[], options: any[]) => { + if (desc.current === 1) { + setDesc1( + options.map((option) => padZero(parseInt(option.text))).join(':') + ) + } else { + setDesc2( + options.map((option) => padZero(parseInt(option.text))).join(':') + ) + } + } + const showDatePicker = (e: any, index: number) => { + if (dpAbled[index - 1]) { + e.stopPropagation() + setShow1(true) + desc.current = index + } + } return ( <>
@@ -410,6 +453,74 @@ const CalendarDemo = () => { onClose={closeSwitch41} onConfirm={setChooseValue41} /> + + +
+ {date42 && date42.length + ? `${date42[0]} ${desc1}` + : translated['8dab2f67']} +
+
-
+
+ {date42 && date42.length + ? `${date42[1]} ${desc2}` + : translated['8dab2f68']} +
+
+ } + /> + { + let d = [false, false] + if (date.length > 1) { + d = [true, true] + } else if (date.length > 0) { + d = [true, false] + } + setDatePickerAbled(d) + }} + onClose={closeSwitch42} + onConfirm={setChooseValue42} + > +
+
{ + showDatePicker(e, 1) + }} + > + 开始时间：{desc1} +
+ - +
{ + showDatePicker(e, 2) + }} + > + 结束时间：{desc2} +
+
+ setShow1(false)} + onConfirm={(options, values) => confirm1(values, options)} + /> + +

{translated.cfbdc781}

{ b840c88f: '请选择', a74a1fd4: '选择日期区间', '8dab2f66': '至', + '8dab2f67': '请选择起始时间', + '8dab2f68': '请选择截止时间', cfbdc781: '快捷选择', c3a3a1d2: '选择日期', e51e4582: '平铺展示', '7db1a8b2': '选择多个日期', '7db1a8b3': '选择周', '7db1a8b4': '日期不可选', + '7db1a8b5': '日期区间', a52bef0c: '已选择', d04fcbda: '自定义日历', '0aaad620': '自定义按钮', @@ -60,12 +66,15 @@ const CalendarDemo = () => { b840c88f: '請選擇', a74a1fd4: '選擇日期區間', '8dab2f66': '至', + '8dab2f67': '请选择起始时间', + '8dab2f68': '请选择截止时间', cfbdc781: '快捷選擇', c3a3a1d2: '選擇日期', e51e4582: '平鋪展示', '7db1a8b2': '選擇多個日期', '7db1a8b3': '選擇周', '7db1a8b4': '日期不可選', + '7db1a8b5': '日期区间', a52bef0c: '已選擇', d04fcbda: '自定義日曆', '0aaad620': '自定義按鈕', @@ -80,12 +89,15 @@ const CalendarDemo = () => { b840c88f: 'please choose', a74a1fd4: 'Select date range', '8dab2f66': 'to', + '8dab2f67': 'Select start Time', + '8dab2f68': 'Select end time', cfbdc781: 'quick selection', c3a3a1d2: 'select date', e51e4582: 'Tiled display', '7db1a8b2': 'select multiple dates', '7db1a8b3': 'select week', '7db1a8b4': 'disable date', + '7db1a8b5': 'date range', a52bef0c: 'chosen', d04fcbda: 'custom calendar', '0aaad620': 'custom button', @@ -99,11 +111,11 @@ const CalendarDemo = () => { const currDay = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}` const [date, setDate] = useState(currDay) const [date1, setDate1] = useState(['2023-01-23', '2023-11-26']) - const [date2, setDate2] = useState('2023-05-08') const [date3, setDate3] = useState('') const [date4, setDate4] = useState([]) const [date40, setDate40] = useState([]) const [date41, setDate41] = useState([]) + const [date42, setDate42] = useState([]) const [date5, setDate5] = useState(['2023-03-23', '2023-11-26']) const [date6, setDate6] = useState(['2023-06-12', '2023-06-16']) const [date7, setDate7] = useState(['2023-07-10', '2023-07-19']) @@ -115,6 +127,7 @@ const CalendarDemo = () => { const [isVisible4, setIsVisible4] = useState(false) const [isVisible40, setIsVisible40] = useState(false) const [isVisible41, setIsVisible41] = useState(false) + const [isVisible42, setIsVisible42] = useState(false) const [isVisible5, setIsVisible5] = useState(false) const [isVisible6, setIsVisible6] = useState(false) const [isVisible7, setIsVisible7] = useState(false) @@ -132,31 +145,27 @@ const CalendarDemo = () => { const openSwitch3 = () => { setIsVisible3(true) } - const openSwitch4 = () => { setIsVisible4(true) } - const openSwitch40 = () => { setIsVisible40(true) } - const openSwitch41 = () => { setIsVisible41(true) } - + const openSwitch42 = () => { + setIsVisible42(true) + } const openSwitch5 = () => { setIsVisible5(true) } - const openSwitch6 = () => { setIsVisible6(true) } - const openSwitch7 = () => { setIsVisible7(true) } - const closeSwitch = () => { setIsVisible(false) } @@ -172,15 +181,15 @@ const CalendarDemo = () => { const closeSwitch4 = () => { setIsVisible4(false) } - const closeSwitch40 = () => { setIsVisible40(false) } - const closeSwitch41 = () => { setIsVisible41(false) } - + const closeSwitch42 = () => { + setIsVisible42(false) + } const closeSwitch5 = () => { setIsVisible5(false) } @@ -201,43 +210,35 @@ const CalendarDemo = () => { const setChooseValue1 = (param: string) => { setDate1([...[param[0][3], param[1][3]]]) } - - const setChooseValue2 = (param: string) => { - setDate2(param[3]) - console.log('setChooseValue2', param[3]) - } - const setChooseValue3 = (param: string) => { setDate3(param[3]) - console.log('setChooseValue3', param[3]) } const setChooseValue4 = (chooseData: any) => { const dateArr = chooseData.map((item: any) => { return item[3] }) - console.log('setChooseValue4', [...dateArr], chooseData) setDate4([...dateArr]) } - const setChooseValue40 = (chooseData: any) => { - console.log('setChooseValue40', [...[chooseData[0][3], chooseData[1][3]]]) const dateArr = [...[chooseData[0][3], chooseData[1][3]]] setDate40([...dateArr]) } - const setChooseValue41 = (chooseData: any) => { + const dateArr = [...[chooseData[0][3], chooseData[1][3]]] + setDate41([...dateArr]) + } + + const setChooseValue42 = (chooseData: any) => { console.log( - 'setChooseValue41', + 'setChooseValue42', [...[chooseData[0][3], chooseData[1][3]]], chooseData ) const dateArr = [...[chooseData[0][3], chooseData[1][3]]] - setDate41([...dateArr]) + setDate42([...dateArr]) } - const setChooseValue5 = (param: string) => { - console.log('set value 5', [...[param[0][3], param[1][3]]]) setDate5([...[param[0][3], param[1][3]]]) } @@ -252,7 +253,6 @@ const CalendarDemo = () => { const setChooseValue8 = (param: string) => { setDate8([...[param[0][3], param[1][3]]]) } - const select = (param: string) => { console.log(param) } @@ -287,13 +287,15 @@ const CalendarDemo = () => { calendarRef.current.scrollToDate(`${yearMonth}-01`) } } - const disableDate = (date: Day) => { - return date.day === 25 + return date.day === 25 || date.day === 20 || date.day === 22 + } + const padZero = (d: number | string) => { + return d <= 9 ? `0${d}` : d } const renderDay = (date: Day) => { - return <>{date.day <= 9 ? `0${date.day}` : date.day} + return <>{padZero(date.day)} } const renderDayTop = (date: Day) => { let currDate = '' @@ -333,6 +335,29 @@ const CalendarDemo = () => { ) } + const [show1, setShow1] = useState(false) + const [dpAbled, setDatePickerAbled] = useState([false, false]) + const [desc1, setDesc1] = useState('10:00:00') + const [desc2, setDesc2] = useState('20:00:00') + const desc = useRef(0) + const confirm1 = (values: (string | number)[], options: any[]) => { + if (desc.current === 1) { + setDesc1( + options.map((option) => padZero(parseInt(option.text))).join(':') + ) + } else { + setDesc2( + options.map((option) => padZero(parseInt(option.text))).join(':') + ) + } + } + const showDatePicker = (e: any, index: number) => { + if (dpAbled[index - 1]) { + e.stopPropagation() + setShow1(true) + desc.current = index + } + } return ( <>
@@ -433,6 +458,73 @@ const CalendarDemo = () => { onConfirm={setChooseValue41} /> + +
+ {date42 && date42.length + ? `${date42[0]} ${desc1}` + : translated['8dab2f67']} +
+
-
+
+ {date42 && date42.length + ? `${date42[1]} ${desc2}` + : translated['8dab2f68']} +
+
+ } + /> + { + let d = [false, false] + if (date.length > 1) { + d = [true, true] + } else if (date.length > 0) { + d = [true, false] + } + setDatePickerAbled(d) + }} + onClose={closeSwitch42} + onConfirm={setChooseValue42} + > +
+
{ + showDatePicker(e, 1) + }} + > + 开始时间：{desc1} +
+ - +
{ + showDatePicker(e, 2) + }} + > + 结束时间：{desc2} +
+
+ setShow1(false)} + onConfirm={(options, values) => confirm1(values, options)} + /> + +

{translated.cfbdc781}

{ return ( <> - + { + const openSwitch42 = () => { + setIsVisible42(true) + } + const [date42, setDate42] = useState([]) + const [isVisible42, setIsVisible42] = useState(false) + const disableDate = (date: Day) => { + return date.day === 25 || date.day === 20 || date.day === 22 + } + const [show1, setShow1] = useState(false) + const [dpAbled, setDatePickerAbled] = useState([false, false]) + const [desc1, setDesc1] = useState('10:00:00') + const [desc2, setDesc2] = useState('20:00:00') + const desc = useRef(0) + const padZero = (d: number | string) => { + return d <= 9 ? `0${d}` : d + } + const setChooseValue42 = (chooseData: any) => { + const dateArr = [...[chooseData[0][3], chooseData[1][3]]] + setDate42([...dateArr]) + } + const confirm1 = (values: (string | number)[], options: any[]) => { + if (desc.current === 1) { + setDesc1( + options.map((option) => padZero(parseInt(option.text))).join(':') + ) + } else { + setDesc2( + options.map((option) => padZero(parseInt(option.text))).join(':') + ) + } + } + const showDatePicker = (e: any, index: number) => { + if (dpAbled[index - 1]) { + e.stopPropagation() + setShow1(true) + desc.current = index + } + } + + return ( + <> + +
+ {date42 && date42.length + ? `${date42[0]} ${desc1}` + : 'Select start Time'} +
+
-
+
+ {date42 && date42.length + ? `${date42[1]} ${desc2}` + : 'Select end time'} +
+ + } + /> + { + let d = [false, false] + if (date.length > 1) { + d = [true, true] + } else if (date.length > 0) { + d = [true, false] + } + setDatePickerAbled(d) + }} + onClose={closeSwitch42} + onConfirm={setChooseValue42} + > +
+
{ + showDatePicker(e, 1) + }} + > + Start Time: {desc1} +
+ - +
{ + showDatePicker(e, 2) + }} + > + End Time: {desc2} +
+
+ setShow1(false)} + onConfirm={(options, values) => confirm1(values, options)} + /> + + + ); +}; +export default App; + +``` +::: + ### quick selection :::demo @@ -538,6 +663,7 @@ export default App; ::: + ## Calendar ### Props @@ -597,12 +723,12 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-calendar-choose-background-color | calendar choose background color | `rgba(#fa2c19, 0.09)` | | \--nutui-calendar-choose-color | calendar choose color | `$color-primary` | | \--nutui-calendar-choose-disable-background-color | calendar choose but disable background color | `rgba(191, 191, 191, 0.09)` | -| \--nutui-calendar-choose-disable-color | calendar choose but disable color | `$color-disabled` | +| \--nutui-calendar-choose-disable-color | calendar choose but disable color | `$color-text-disable` | | \--nutui-calendar-disable-color | calendar disable color | `#d1d0d0` | -| \--nutui-calendar-base-font-size | calendar base font size | `$font-card-title` | -| \--nutui-calendar-title-font-size | calendar title font size | `$font-title` | +| \--nutui-calendar-base-font-size | calendar base font size | `$font-size-large` | +| \--nutui-calendar-title-font-size | calendar title font size | `$font-size-xl` | | \--nutui-calendar-title-font-weight | calendar title font weight | `500` | -| \--nutui-calendar-sub-title-font-size | calendar sub title font size | `$font-text` | +| \--nutui-calendar-sub-title-font-size | calendar sub title font size | `$font-size` | | \--nutui-calendar-day67-color | calendar day67 color | `$color-primary` | | \--nutui-calendar-header-height | calendar header height | `24px` | | \--nutui-calendar-day-width | calendar day width | `14.28%` | diff --git a/src/packages/calendar/doc.md b/src/packages/calendar/doc.md index a2392d30ac..cf922b3323 100644 --- a/src/packages/calendar/doc.md +++ b/src/packages/calendar/doc.md @@ -174,7 +174,7 @@ const App = () => { return ( <> - + { export default App; ``` - ::: ### 日期不可选 @@ -224,7 +223,7 @@ const App = () => { return ( <> - + { + const openSwitch42 = () => { + setIsVisible42(true) + } + const [date42, setDate42] = useState([]) + const [isVisible42, setIsVisible42] = useState(false) + const disableDate = (date: Day) => { + return date.day === 25 || date.day === 20 || date.day === 22 + } + const [show1, setShow1] = useState(false) + const [dpAbled, setDatePickerAbled] = useState([false, false]) + const [desc1, setDesc1] = useState('10:00:00') + const [desc2, setDesc2] = useState('20:00:00') + const desc = useRef(0) + const padZero = (d: number | string) => { + return d <= 9 ? `0${d}` : d + } + const setChooseValue42 = (chooseData: any) => { + const dateArr = [...[chooseData[0][3], chooseData[1][3]]] + setDate42([...dateArr]) + } + const confirm1 = (values: (string | number)[], options: any[]) => { + if (desc.current === 1) { + setDesc1( + options.map((option) => padZero(parseInt(option.text))).join(':') + ) + } else { + setDesc2( + options.map((option) => padZero(parseInt(option.text))).join(':') + ) + } + } + const showDatePicker = (e: any, index: number) => { + if (dpAbled[index - 1]) { + e.stopPropagation() + setShow1(true) + desc.current = index + } + } + + return ( + <> + +
+ {date42 && date42.length + ? `${date42[0]} ${desc1}` + : '请选择起始时间'} +
+
-
+
+ {date42 && date42.length + ? `${date42[1]} ${desc2}` + : '请选择截止时间'} +
+ + } + /> + { + let d = [false, false] + if (date.length > 1) { + d = [true, true] + } else if (date.length > 0) { + d = [true, false] + } + setDatePickerAbled(d) + }} + onClose={closeSwitch42} + onConfirm={setChooseValue42} + > +
+
{ + showDatePicker(e, 1) + }} + > + 开始时间：{desc1} +
+ - +
{ + showDatePicker(e, 2) + }} + > + 结束时间：{desc2} +
+
+ setShow1(false)} + onConfirm={(options, values) => confirm1(values, options)} + /> + + + ); +}; +export default App; + +``` +::: + + ### 快捷选择 :::demo @@ -594,12 +717,12 @@ export default App; | \--nutui-calendar-choose-background-color | 日历选中时区间内元素的背景色，区别区间两头元素的背景色 | `rgba(#fa2c19, 0.09)` | | \--nutui-calendar-choose-color | 日历选中元素的字色 | `$color-primary` | | \--nutui-calendar-choose-disable-background-color | 日历不可选元素的选中时的背景色 | `rgba(191, 191, 191, 0.09)` | -| \--nutui-calendar-choose-disable-color | 日历不可选元素的选中时的字色 | `$color-disabled` | +| \--nutui-calendar-choose-disable-color | 日历不可选元素的选中时的字色 | `$color-text-disable` | | \--nutui-calendar-disable-color | 日历不可选元素的字色 | `#d1d0d0` | -| \--nutui-calendar-base-font-size | 日历字号 | `$font-card-title` | -| \--nutui-calendar-title-font-size | 日历标题字号 | `$font-title` | +| \--nutui-calendar-base-font-size | 日历字号 | `$font-size-large` | +| \--nutui-calendar-title-font-size | 日历标题字号 | `$font-size-xl` | | \--nutui-calendar-title-font-weight | 日历标题字重 | `500` | -| \--nutui-calendar-sub-title-font-size | 日历副标题字号 | `$font-text` | +| \--nutui-calendar-sub-title-font-size | 日历副标题字号 | `$font-size` | | \--nutui-calendar-day67-color | 日历周末字色 | `$color-primary` | | \--nutui-calendar-header-height | 日历自定义部分高度 | `24px` | | \--nutui-calendar-day-width | 日历元素宽度 | `14.28%` | diff --git a/src/packages/calendar/doc.taro.md b/src/packages/calendar/doc.taro.md index 2ad7d79cad..a1b9f5d80f 100644 --- a/src/packages/calendar/doc.taro.md +++ b/src/packages/calendar/doc.taro.md @@ -174,7 +174,7 @@ const App = () => { return ( <> - + { return ( <> - + { + const openSwitch42 = () => { + setIsVisible42(true) + } + const [date42, setDate42] = useState([]) + const [isVisible42, setIsVisible42] = useState(false) + const disableDate = (date: Day) => { + return date.day === 25 || date.day === 20 || date.day === 22 + } + + const [show1, setShow1] = useState(false) + const [dpAbled, setDatePickerAbled] = useState([false, false]) + const [desc1, setDesc1] = useState('10:00:00') + const [desc2, setDesc2] = useState('20:00:00') + const desc = useRef(0) + const padZero = (d: number | string) => { + return d <= 9 ? `0${d}` : d + } + const setChooseValue42 = (chooseData: any) => { + const dateArr = [...[chooseData[0][3], chooseData[1][3]]] + setDate42([...dateArr]) + } + const confirm1 = (values: (string | number)[], options: any[]) => { + if (desc.current === 1) { + setDesc1( + options.map((option) => padZero(parseInt(option.text))).join(':') + ) + } else { + setDesc2( + options.map((option) => padZero(parseInt(option.text))).join(':') + ) + } + } + const showDatePicker = (e: any, index: number) => { + if (dpAbled[index - 1]) { + e.stopPropagation() + setShow1(true) + desc.current = index + } + } + + + + return ( + <> + +
+ {date42 && date42.length + ? `${date42[0]} ${desc1}` + : '请选择起始时间'} +
+
-
+
+ {date42 && date42.length + ? `${date42[1]} ${desc2}` + : '请选择截止时间'} +
+ + } + /> + { + let d = [false, false] + if (date.length > 1) { + d = [true, true] + } else if (date.length > 0) { + d = [true, false] + } + setDatePickerAbled(d) + }} + onClose={closeSwitch42} + onConfirm={setChooseValue42} + > +
+
{ + showDatePicker(e, 1) + }} + > + 开始时间：{desc1} +
+ - +
{ + showDatePicker(e, 2) + }} + > + 结束时间：{desc2} +
+
+ setShow1(false)} + onConfirm={(options, values) => confirm1(values, options)} + /> + + + ); +}; +export default App; + +``` +::: + ### 快捷选择 :::demo @@ -595,12 +722,12 @@ export default App; | \--nutui-calendar-choose-background-color | 日历选中时区间内元素的背景色，区别区间两头元素的背景色 | `rgba(#fa2c19, 0.09)` | | \--nutui-calendar-choose-color | 日历选中元素的字色 | `$color-primary` | | \--nutui-calendar-choose-disable-background-color | 日历不可选元素的选中时的背景色 | `rgba(191, 191, 191, 0.09)` | -| \--nutui-calendar-choose-disable-color | 日历不可选元素的选中时的字色 | `$color-disabled` | +| \--nutui-calendar-choose-disable-color | 日历不可选元素的选中时的字色 | `$color-text-disable` | | \--nutui-calendar-disable-color | 日历不可选元素的字色 | `#d1d0d0` | -| \--nutui-calendar-base-font-size | 日历字号 | `$font-card-title` | -| \--nutui-calendar-title-font-size | 日历标题字号 | `$font-title` | +| \--nutui-calendar-base-font-size | 日历字号 | `$font-size-large` | +| \--nutui-calendar-title-font-size | 日历标题字号 | `$font-size-xl` | | \--nutui-calendar-title-font-weight | 日历标题字重 | `500` | -| \--nutui-calendar-sub-title-font-size | 日历副标题字号 | `$font-text` | +| \--nutui-calendar-sub-title-font-size | 日历副标题字号 | `$font-size` | | \--nutui-calendar-day67-color | 日历周末字色 | `$color-primary` | | \--nutui-calendar-header-height | 日历自定义部分高度 | `24px` | | \--nutui-calendar-day-width | 日历元素宽度 | `14.28%` | diff --git a/src/packages/calendar/doc.zh-TW.md b/src/packages/calendar/doc.zh-TW.md index 40b8b5deeb..5fd9b60685 100644 --- a/src/packages/calendar/doc.zh-TW.md +++ b/src/packages/calendar/doc.zh-TW.md @@ -174,7 +174,7 @@ const App = () => { return ( <> - + { return ( <> - + { + const openSwitch42 = () => { + setIsVisible42(true) + } + const [date42, setDate42] = useState([]) + const [isVisible42, setIsVisible42] = useState(false) + const disableDate = (date: Day) => { + return date.day === 25 || date.day === 20 || date.day === 22 + } + const [show1, setShow1] = useState(false) + const [dpAbled, setDatePickerAbled] = useState([false, false]) + const [desc1, setDesc1] = useState('10:00:00') + const [desc2, setDesc2] = useState('20:00:00') + const desc = useRef(0) + const padZero = (d: number | string) => { + return d <= 9 ? `0${d}` : d + } + const setChooseValue42 = (chooseData: any) => { + const dateArr = [...[chooseData[0][3], chooseData[1][3]]] + setDate42([...dateArr]) + } + const confirm1 = (values: (string | number)[], options: any[]) => { + if (desc.current === 1) { + setDesc1( + options.map((option) => padZero(parseInt(option.text))).join(':') + ) + } else { + setDesc2( + options.map((option) => padZero(parseInt(option.text))).join(':') + ) + } + } + const showDatePicker = (e: any, index: number) => { + if (dpAbled[index - 1]) { + e.stopPropagation() + setShow1(true) + desc.current = index + } + } + + return ( + <> + +
+ {date42 && date42.length + ? `${date42[0]} ${desc1}` + : '請選擇起始時間'} +
+
-
+
+ {date42 && date42.length + ? `${date42[1]} ${desc2}` + : '請選擇截止時間'} +
+ + } + /> + { + let d = [false, false] + if (date.length > 1) { + d = [true, true] + } else if (date.length > 0) { + d = [true, false] + } + setDatePickerAbled(d) + }} + onClose={closeSwitch42} + onConfirm={setChooseValue42} + > +
+
{ + showDatePicker(e, 1) + }} + > + 開始時間：{desc1} +
+ - +
{ + showDatePicker(e, 2) + }} + > + 結束時間：{desc2} +
+
+ setShow1(false)} + onConfirm={(options, values) => confirm1(values, options)} + /> + + + ); +}; +export default App; + +``` +::: + ### 快捷選擇 :::demo @@ -535,6 +659,7 @@ export default App; ::: + ## Calendar ### Props @@ -594,12 +719,12 @@ export default App; | \--nutui-calendar-choose-background-color | 日歴選中時區間內元素的背景色，區別區間兩頭元素的背景色 | `rgba(#fa2c19, 0.09)` | | \--nutui-calendar-choose-color | 日歴選中元素的字色 | `$color-primary` | | \--nutui-calendar-choose-disable-background-color | 日歴不可選元素的選中時的背景色 | `rgba(191, 191, 191, 0.09)` | -| \--nutui-calendar-choose-disable-color | 日歴不可選元素的選中時的字色 | `$color-disabled` | +| \--nutui-calendar-choose-disable-color | 日歴不可選元素的選中時的字色 | `$color-text-disable` | | \--nutui-calendar-disable-color | 日歴不可選元素的字色 | `#d1d0d0` | -| \--nutui-calendar-base-font-size | 日歴字號 | `$font-card-title` | -| \--nutui-calendar-title-font-size | 日歴標題字號 | `$font-title` | +| \--nutui-calendar-base-font-size | 日歴字號 | `$font-size-large` | +| \--nutui-calendar-title-font-size | 日歴標題字號 | `$font-size-xl` | | \--nutui-calendar-title-font-weight | 日歴標題字重 | `500` | -| \--nutui-calendar-sub-title-font-size | 日歴副標題字號 | `$font-text` | +| \--nutui-calendar-sub-title-font-size | 日歴副標題字號 | `$font-size` | | \--nutui-calendar-day67-color | 日歴周末字色 | `$color-primary` | | \--nutui-calendar-header-height | 日歴自定義部分高度 | `24px` | | \--nutui-calendar-day-width | 日歴元素寬度 | `14.28%` | diff --git a/src/packages/calendaritem/calendaritem.taro.tsx b/src/packages/calendaritem/calendaritem.taro.tsx index 7a46a7fdeb..219ff83398 100644 --- a/src/packages/calendaritem/calendaritem.taro.tsx +++ b/src/packages/calendaritem/calendaritem.taro.tsx @@ -95,6 +95,7 @@ export const CalendarItem = React.forwardRef< const { style, className, + children, popup, type, autoBackfill, @@ -856,6 +857,7 @@ export const CalendarItem = React.forwardRef< const renderFooter = () => { return (
+ {children}
{confirmText || locale.confirm}
diff --git a/src/packages/calendaritem/calendaritem.tsx b/src/packages/calendaritem/calendaritem.tsx index 4efc0273e8..7030d1ede5 100644 --- a/src/packages/calendaritem/calendaritem.tsx +++ b/src/packages/calendaritem/calendaritem.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect, useRef, ReactNode } from 'react' +import type { UIEvent } from 'react' import classNames from 'classnames' import { PopupProps } from '@/packages/popup/index' import { ComponentDefaults } from '@/utils/typings' @@ -92,6 +93,7 @@ export const CalendarItem = React.forwardRef< const { style, className, + children, popup, type, autoBackfill, @@ -511,7 +513,7 @@ export const CalendarItem = React.forwardRef< }) } - const monthsViewScroll = (e: any) => { + const monthsViewScroll = (e: UIEvent) => { if (monthsData.length <= 1) { return } @@ -852,6 +854,7 @@ export const CalendarItem = React.forwardRef< const renderFooter = () => { return (
+ {children}
{confirmText || locale.confirm}
diff --git a/src/packages/card/card.scss b/src/packages/card/card.scss index b7494c2e63..b1769463f6 100644 --- a/src/packages/card/card.scss +++ b/src/packages/card/card.scss @@ -5,7 +5,7 @@ .nut-card { width: 100%; display: flex; - background-color: $color-card-background; + background-color: $color-background-overlay; .nut-card__left { width: 120px; @@ -73,7 +73,7 @@ .nut-tag { padding: 0 2px; margin-right: 5px; - font-size: $font-size-0; + font-size: $font-size-xs; } } diff --git a/src/packages/cascader/doc.en-US.md b/src/packages/cascader/doc.en-US.md index 347a218390..01202b8738 100644 --- a/src/packages/cascader/doc.en-US.md +++ b/src/packages/cascader/doc.en-US.md @@ -601,7 +601,7 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default Value | | --- | --- | --- | -| \--nutui-cascader-font-size | cascader font size | `$font-text` | +| \--nutui-cascader-font-size | cascader font size | `$font-size` | | \--nutui-cascader-line-height | cascader line height | `22px` | | \--nutui-cascader-pane-height | cascader pane height | `342px` | | \--nutui-cascader-tabs-item-padding | cascader tabs item padding | `0 10px` | @@ -610,5 +610,5 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-cascader-item-margin | cascader item margin | `0px` | | \--nutui-cascader-item-border-bottom | cascader item border bottom | `0px solid #ddd` | | \--nutui-cascader-item-color | cascader item color | `$color-title` | -| \--nutui-cascader-item-font-size | cascader item font size | `$font-text` | +| \--nutui-cascader-item-font-size | cascader item font size | `$font-size` | | \--nutui-cascader-item-active-color | cascader item active color | `$color-primary` | \ No newline at end of file diff --git a/src/packages/cascader/doc.md b/src/packages/cascader/doc.md index 8ca48fad8a..ec6a49b959 100644 --- a/src/packages/cascader/doc.md +++ b/src/packages/cascader/doc.md @@ -583,7 +583,7 @@ export default App; | activeColor | 选中激活颜色 | `string` | `-` | | activeIcon | 标记选中的Icon | `string` | `ReactNode` | | lazy | 是否开启动态加载 | `boolean` | `false` | -| optionKey | 自定义`options`结构中，包含 textKey、valueKey、childrenKey | `object` | `-` | +| optionKey | 自定义`options`中的关键字，valueKey、textKey、childrenKey | `object` | `{valueKey: 'value', textKey: 'text', childrenKey: 'children'}` | | format | 当options为可转换为树形结构的扁平结构时，配置转换规则 | `object` | `-` | | title | 标题 | `string` | `-` | | closeIconPosition | 取消按钮位置，继承 Popup 组件 | `string` | `top-right` | @@ -601,7 +601,7 @@ export default App; | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-cascader-font-size | 级联总字号 | `$font-text` | +| \--nutui-cascader-font-size | 级联总字号 | `$font-size` | | \--nutui-cascader-line-height | 行高 | `22px` | | \--nutui-cascader-pane-height | 级联面板高度 | `342px` | | \--nutui-cascader-tabs-item-padding | 级联tabs的标题部分的padding 值 | `0 10px` | @@ -610,5 +610,5 @@ export default App; | \--nutui-cascader-item-margin | 级联数据每一条的margin值 | `0px` | | \--nutui-cascader-item-border-bottom | 级联数据每一条的底部边框 | `0px solid #ddd` | | \--nutui-cascader-item-color | 级联数据每一条的色值 | `$color-title` | -| \--nutui-cascader-item-font-size | 级联数据每一条的字号 | `$font-text` | -| \--nutui-cascader-item-active-color | 级联数据每一条的选中色值 | `$color-primary` | \ No newline at end of file +| \--nutui-cascader-item-font-size | 级联数据每一条的字号 | `$font-size` | +| \--nutui-cascader-item-active-color | 级联数据每一条的选中色值 | `$color-primary` | diff --git a/src/packages/cascader/doc.taro.md b/src/packages/cascader/doc.taro.md index 70b6b2eab4..a9c8d57239 100644 --- a/src/packages/cascader/doc.taro.md +++ b/src/packages/cascader/doc.taro.md @@ -583,9 +583,7 @@ export default App; | activeColor | 选中激活颜色 | `string` | `-` | | activeIcon | 标记选中的Icon | `string` | `ReactNode` | | lazy | 是否开启动态加载 | `boolean` | `false` | -| valueKey | 自定义`options`结构中`value`的字段 | `string` | `-` | -| textKey | 自定义`options`结构中`text`的字段 | `string` | `-` | -| childrenKey | 自定义`options`结构中`children`的字段 | `string` | `-` | +| optionKey | 自定义`options`中的关键字，valueKey、textKey、childrenKey | `object` | `{valueKey: 'value', textKey: 'text', childrenKey: 'children'}` | | format | 当options为可转换为树形结构的扁平结构时，配置转换规则 | `Object` | `-` | | title | 标题 | `string` | `-` | | closeIconPosition | 取消按钮位置，继承 Popup 组件 | `string` | `top-right` | @@ -603,7 +601,7 @@ export default App; | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-cascader-font-size | 级联总字号 | `$font-text` | +| \--nutui-cascader-font-size | 级联总字号 | `$font-size` | | \--nutui-cascader-line-height | 行高 | `22px` | | \--nutui-cascader-pane-height | 级联面板高度 | `342px` | | \--nutui-cascader-tabs-item-padding | 级联tabs的标题部分的padding 值 | `0 10px` | @@ -612,5 +610,5 @@ export default App; | \--nutui-cascader-item-margin | 级联数据每一条的margin值 | `0px` | | \--nutui-cascader-item-border-bottom | 级联数据每一条的底部边框 | `0px solid #ddd` | | \--nutui-cascader-item-color | 级联数据每一条的色值 | `$color-title` | -| \--nutui-cascader-item-font-size | 级联数据每一条的字号 | `$font-text` | -| \--nutui-cascader-item-active-color | 级联数据每一条的选中色值 | `$color-primary` | \ No newline at end of file +| \--nutui-cascader-item-font-size | 级联数据每一条的字号 | `$font-size` | +| \--nutui-cascader-item-active-color | 级联数据每一条的选中色值 | `$color-primary` | diff --git a/src/packages/cascader/doc.zh-TW.md b/src/packages/cascader/doc.zh-TW.md index 393adc41e7..fa40561a18 100644 --- a/src/packages/cascader/doc.zh-TW.md +++ b/src/packages/cascader/doc.zh-TW.md @@ -583,7 +583,7 @@ export default App; | activeColor | 選中啟動態顏色 | `string` | `-` | | activeIcon | 標記選中的Icon | `string` | `ReactNode` | | lazy | 是否開啟動態加載 | `boolean` | `false` | -| optionKey | 自定义`options`结构中，包含 textKey、valueKey、childrenKey | `object` | `-` | +| optionKey | 自定義`options`中的關鍵字，valueKey、textKey、childrenKey | `object` | `{valueKey: 'value', textKey: 'text', childrenKey: 'children'}` | | format | 當options為可轉換為樹形結構的扁平結構時，配置轉換規則 | `object` | `-` | | title | 標題 | `string` | `-` | | closeIconPosition | 取消按鈕位置，繼承 Popup 組件 | `string` | `top-right` | @@ -601,7 +601,7 @@ export default App; | 名稱 | 说明 | 默認值 | | --- | --- | --- | -| \--nutui-cascader-font-size | 級聯總字號 | `$font-text` | +| \--nutui-cascader-font-size | 級聯總字號 | `$font-size` | | \--nutui-cascader-line-height | 行高 | `22px` | | \--nutui-cascader-pane-height | 級聯面闆高度 | `342px` | | \--nutui-cascader-tabs-item-padding | 級聯tabs的標題部分的padding 值 | `0 10px` | @@ -610,5 +610,5 @@ export default App; | \--nutui-cascader-item-margin | 級聯數據每一條的margin值 | `0px` | | \--nutui-cascader-item-border-bottom | 級聯數據每一條的底部邊框 | `0px solid #ddd` | | \--nutui-cascader-item-color | 級聯數據每一條的色值 | `$color-title` | -| \--nutui-cascader-item-font-size | 級聯數據每一條的字號 | `$font-text` | -| \--nutui-cascader-item-active-color | 級聯數據每一條的選中色值 | `$color-primary` | \ No newline at end of file +| \--nutui-cascader-item-font-size | 級聯數據每一條的字號 | `$font-size` | +| \--nutui-cascader-item-active-color | 級聯數據每一條的選中色值 | `$color-primary` | diff --git a/src/packages/cell/doc.en-US.md b/src/packages/cell/doc.en-US.md index c6d7a13d0e..580cfe5767 100644 --- a/src/packages/cell/doc.en-US.md +++ b/src/packages/cell/doc.en-US.md @@ -246,11 +246,11 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | | \--nutui-cell-title-color | The cell title the font color | `$color-title` | -| \--nutui-cell-title-font-size | The cell title the font size | `$font-text` | +| \--nutui-cell-title-font-size | The cell title the font size | `$font-size` | | \--nutui-cell-description-color | The cell describes the font color | `$color-text` | -| \--nutui-cell-description-font-size | The cell describes the font size | `$font-help` | +| \--nutui-cell-description-font-size | The cell describes the font size | `$font-size-small` | | \--nutui-cell-extra-color | The right side of the cell describes the font color | `$color-text` | -| \--nutui-cell-extra-font-size | The right side of the cell describes the font size | `$font-text` | +| \--nutui-cell-extra-font-size | The right side of the cell describes the font size | `$font-size` | | \--nutui-cell-border-radius | The rounded corner size of the cell | `6px` | | \--nutui-cell-padding | Inside margins of cells | `13px 16px` | | \--nutui-cell-line-height | The row height of the cell | `20px` | @@ -261,10 +261,10 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-cell-box-shadow | The shadow of the cell | `0px 1px 7px 0px rgba(237, 238, 241, 1)` | | \--nutui-cell-group-title-padding | The padding of the title of the cell group | `0 10px` | | \--nutui-cell-group-title-color | The title font color of the cell group | `#909ca4` | -| \--nutui-cell-group-title-font-size | The title font size of the cell group | `$font-text` | +| \--nutui-cell-group-title-font-size | The title font size of the cell group | `$font-size` | | \--nutui-cell-group-title-line-height | The title row height of the cell group | `20px` | | \--nutui-cell-group-description-padding | The description padding for cell groups | `0 10px` | | \--nutui-cell-group-description-color | The description color of the cell group | `#909ca4` | -| \--nutui-cell-group-description-font-size | The description font size of the cell group | `$font-help` | +| \--nutui-cell-group-description-font-size | The description font size of the cell group | `$font-size-small` | | \--nutui-cell-group-description-line-height | The description row height of cell group | `16px` | | \--nutui-cell-group-background-color | The background color of the cell group | `$white` | \ No newline at end of file diff --git a/src/packages/cell/doc.md b/src/packages/cell/doc.md index 0393a792d8..98b0646d6f 100644 --- a/src/packages/cell/doc.md +++ b/src/packages/cell/doc.md @@ -245,11 +245,11 @@ export default App; | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-cell-title-color | 单元格标题字体颜色 | `$color-title` | -| \--nutui-cell-title-font-size | 单元格标题字体大小 | `$font-text` | +| \--nutui-cell-title-font-size | 单元格标题字体大小 | `$font-size` | | \--nutui-cell-description-color | 单元格描述字体颜色 | `$color-text` | -| \--nutui-cell-description-font-size | 单元格描述字体大小 | `$font-help` | +| \--nutui-cell-description-font-size | 单元格描述字体大小 | `$font-size-small` | | \--nutui-cell-extra-color | 单元格右侧描述字体颜色 | `$color-text` | -| \--nutui-cell-extra-font-size | 单元格右侧描述字体大小 | `$font-text` | +| \--nutui-cell-extra-font-size | 单元格右侧描述字体大小 | `$font-size` | | \--nutui-cell-border-radius | 单元格圆角大小 | `6px` | | \--nutui-cell-padding | 单元格内边距 | `13px 16px` | | \--nutui-cell-line-height | 单元格行高 | `20px` | @@ -260,10 +260,10 @@ export default App; | \--nutui-cell-box-shadow | 单元格阴影 | `0px 1px 7px 0px rgba(237, 238, 241, 1)` | | \--nutui-cell-group-title-padding | 单元格分组的标题内边距 | `0 10px` | | \--nutui-cell-group-title-color | 单元格分组的标题字体颜色 | `#909ca4` | -| \--nutui-cell-group-title-font-size | 单元格分组的标题字体大小 | `$font-text` | +| \--nutui-cell-group-title-font-size | 单元格分组的标题字体大小 | `$font-size` | | \--nutui-cell-group-title-line-height | 单元格分组的标题行高 | `20px` | | \--nutui-cell-group-description-padding | 单元格分组的描述内边距 | `0 10px` | | \--nutui-cell-group-description-color | 单元格分组的描述颜色 | `#909ca4` | -| \--nutui-cell-group-description-font-size | 单元格分组的描述字体大小 | `$font-help` | +| \--nutui-cell-group-description-font-size | 单元格分组的描述字体大小 | `$font-size-small` | | \--nutui-cell-group-description-line-height | 单元格分组的描述行高 | `16px` | | \--nutui-cell-group-background-color | 单元格分组的背景颜色 | `$white` | \ No newline at end of file diff --git a/src/packages/cell/doc.taro.md b/src/packages/cell/doc.taro.md index 3e5f21ad1b..4933863cbe 100644 --- a/src/packages/cell/doc.taro.md +++ b/src/packages/cell/doc.taro.md @@ -245,11 +245,11 @@ export default App | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-cell-title-color | 单元格标题字体颜色 | `$color-title` | -| \--nutui-cell-title-font-size | 单元格标题字体大小 | `$font-text` | +| \--nutui-cell-title-font-size | 单元格标题字体大小 | `$font-size` | | \--nutui-cell-description-color | 单元格描述字体颜色 | `$color-text` | -| \--nutui-cell-description-font-size | 单元格描述字体大小 | `$font-help` | +| \--nutui-cell-description-font-size | 单元格描述字体大小 | `$font-size-small` | | \--nutui-cell-extra-color | 单元格右侧描述字体颜色 | `$color-text` | -| \--nutui-cell-extra-font-size | 单元格右侧描述字体大小 | `$font-text` | +| \--nutui-cell-extra-font-size | 单元格右侧描述字体大小 | `$font-size` | | \--nutui-cell-border-radius | 单元格圆角大小 | `6px` | | \--nutui-cell-padding | 单元格内边距 | `13px 16px` | | \--nutui-cell-line-height | 单元格行高 | `20px` | @@ -260,10 +260,10 @@ export default App | \--nutui-cell-box-shadow | 单元格阴影 | `0px 1px 7px 0px rgba(237, 238, 241, 1)` | | \--nutui-cell-group-title-padding | 单元格分组的标题内边距 | `0 10px` | | \--nutui-cell-group-title-color | 单元格分组的标题字体颜色 | `#909ca4` | -| \--nutui-cell-group-title-font-size | 单元格分组的标题字体大小 | `$font-text` | +| \--nutui-cell-group-title-font-size | 单元格分组的标题字体大小 | `$font-size` | | \--nutui-cell-group-title-line-height | 单元格分组的标题行高 | `20px` | | \--nutui-cell-group-description-padding | 单元格分组的描述内边距 | `0 10px` | | \--nutui-cell-group-description-color | 单元格分组的描述颜色 | `#909ca4` | -| \--nutui-cell-group-description-font-size | 单元格分组的描述字体大小 | `$font-help` | +| \--nutui-cell-group-description-font-size | 单元格分组的描述字体大小 | `$font-size-small` | | \--nutui-cell-group-description-line-height | 单元格分组的描述行高 | `16px` | | \--nutui-cell-group-background-color | 单元格分组的背景颜色 | `$white` | \ No newline at end of file diff --git a/src/packages/cell/doc.zh-TW.md b/src/packages/cell/doc.zh-TW.md index d3faaa49c8..9afae4abc6 100644 --- a/src/packages/cell/doc.zh-TW.md +++ b/src/packages/cell/doc.zh-TW.md @@ -218,11 +218,11 @@ export default App; | 名稱 | 說明 | 默認值 | | --- | --- | --- | | \--nutui-cell-title-color | 單元格標題字體顏色 | `$color-title` | -| \--nutui-cell-title-font-size | 單元格標題字體大小 | `$font-text` | +| \--nutui-cell-title-font-size | 單元格標題字體大小 | `$font-size` | | \--nutui-cell-description-color | 單元格描述字體顏色 | `$color-text` | -| \--nutui-cell-description-font-size | 單元格描述字體大小 | `$font-help` | +| \--nutui-cell-description-font-size | 單元格描述字體大小 | `$font-size-small` | | \--nutui-cell-extra-color | 單元格右側描述字體顏色 | `$color-text` | -| \--nutui-cell-extra-font-size | 單元格右側描述字體大小 | `$font-text` | +| \--nutui-cell-extra-font-size | 單元格右側描述字體大小 | `$font-size` | | \--nutui-cell-border-radius | 單元格圓角大小 | `6px` | | \--nutui-cell-padding | 單元格內邊距 | `13px 16px` | | \--nutui-cell-line-height | 單元格行高 | `20px` | @@ -233,10 +233,10 @@ export default App; | \--nutui-cell-box-shadow | 單元格陰影 | `0px 1px 7px 0px rgba(237, 238, 241, 1)` | | \--nutui-cell-group-title-padding | 單元格分組的標題內邊距 | `0 10px` | | \--nutui-cell-group-title-color | 單元格分組的標題字體顏色 | `#909ca4` | -| \--nutui-cell-group-title-font-size | 單元格分組的標題字體大小 | `$font-text` | +| \--nutui-cell-group-title-font-size | 單元格分組的標題字體大小 | `$font-size` | | \--nutui-cell-group-title-line-height | 單元格分組的標題行高 | `20px` | | \--nutui-cell-group-description-padding | 單元格分組的描述內邊距 | `0 10px` | | \--nutui-cell-group-description-color | 單元格分組的描述顏色 | `#909ca4` | -| \--nutui-cell-group-description-font-size | 單元格分組的描述字體大小 | `$font-help` | +| \--nutui-cell-group-description-font-size | 單元格分組的描述字體大小 | `$font-size-small` | | \--nutui-cell-group-description-line-height | 單元格分組的描述行高 | `16px` | | \--nutui-cell-group-background-color | 單元格分組的背景顏色 | `$white` | \ No newline at end of file diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss index 37482ce7b0..328bb16e7a 100644 --- a/src/packages/checkbox/checkbox.scss +++ b/src/packages/checkbox/checkbox.scss @@ -41,7 +41,7 @@ } &__icon--disable { - color: $color-disabled; + color: $color-text-disable; font-size: $checkbox-icon-font-size; } } diff --git a/src/packages/circleprogress/demo.taro.tsx b/src/packages/circleprogress/demo.taro.tsx index 1b0b2c69df..be9daefc9b 100644 --- a/src/packages/circleprogress/demo.taro.tsx +++ b/src/packages/circleprogress/demo.taro.tsx @@ -70,8 +70,8 @@ const CircleProgressDemo = () => { } const gradientColor = { - '0%': 'var(--nutui-color-primary-start)', - '100%': 'var(--nutui-color-primary-end)', + '0%': 'var(--nutui-color-primary-stop-1)', + '100%': 'var(--nutui-color-primary-stop-2)', } return ( @@ -114,7 +114,7 @@ const CircleProgressDemo = () => {
3000
-
+
步
diff --git a/src/packages/circleprogress/demo.tsx b/src/packages/circleprogress/demo.tsx index 1398ca7145..5085bbf8ad 100644 --- a/src/packages/circleprogress/demo.tsx +++ b/src/packages/circleprogress/demo.tsx @@ -70,8 +70,8 @@ const CircleProgressDemo = () => { } const gradientColor = { - '0%': 'var(--nutui-color-primary-start)', - '100%': 'var(--nutui-color-primary-end)', + '0%': 'var(--nutui-color-primary-stop-1)', + '100%': 'var(--nutui-color-primary-stop-2)', } return ( @@ -110,7 +110,7 @@ const CircleProgressDemo = () => {
3000
-
+
步
diff --git a/src/packages/circleprogress/doc.en-US.md b/src/packages/circleprogress/doc.en-US.md index ac8aeacccf..f39de1ca09 100644 --- a/src/packages/circleprogress/doc.en-US.md +++ b/src/packages/circleprogress/doc.en-US.md @@ -120,7 +120,7 @@ const App = () => { <>
3000
-
步
+
步
 @@ -209,4 +209,4 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-circleprogress-primary-color | The color of the filled part of the circular progress bar | `$color-primary` | | \--nutui-circleprogress-path-color | The color of the circular progress bar track | `#e5e9f2` | | \--nutui-circleprogress-text-color | The color of the track content area of ​​the circular progress bar | `$color-title` | -| \--nutui-circleprogress-text-size | The size of the track content area of ​​the circular progress bar | `$font-card-title` | \ No newline at end of file +| \--nutui-circleprogress-text-size | The size of the track content area of ​​the circular progress bar | `$font-size-large` | \ No newline at end of file diff --git a/src/packages/circleprogress/doc.md b/src/packages/circleprogress/doc.md index 9783058f67..fa99920497 100644 --- a/src/packages/circleprogress/doc.md +++ b/src/packages/circleprogress/doc.md @@ -120,7 +120,7 @@ const App = () => { <>
3000
-
步
+
步
 @@ -202,4 +202,4 @@ export default App; | \--nutui-circleprogress-primary-color | 环形进度条填充部分的颜色 | `$color-primary` | | \--nutui-circleprogress-path-color | 环形进度条轨道的颜色 | `#e5e9f2` | | \--nutui-circleprogress-text-color | 环形进度条轨道内容区的颜色 | `$color-title` | -| \--nutui-circleprogress-text-size | 环形进度条轨道内容区的大小 | `$font-card-title` | \ No newline at end of file +| \--nutui-circleprogress-text-size | 环形进度条轨道内容区的大小 | `$font-size-large` | \ No newline at end of file diff --git a/src/packages/circleprogress/doc.taro.md b/src/packages/circleprogress/doc.taro.md index 7672bb9159..f403f43043 100644 --- a/src/packages/circleprogress/doc.taro.md +++ b/src/packages/circleprogress/doc.taro.md @@ -119,7 +119,7 @@ const App = () => { <>
3000
-
+
步
@@ -202,4 +202,4 @@ export default App; | \--nutui-circleprogress-primary-color | 环形进度条填充部分的颜色 | `$color-primary` | | \--nutui-circleprogress-path-color | 环形进度条轨道的颜色 | `#e5e9f2` | | \--nutui-circleprogress-text-color | 环形进度条轨道内容区的颜色 | `$color-title` | -| \--nutui-circleprogress-text-size | 环形进度条轨道内容区的大小 | `$font-card-title` | \ No newline at end of file +| \--nutui-circleprogress-text-size | 环形进度条轨道内容区的大小 | `$font-size-large` | \ No newline at end of file diff --git a/src/packages/circleprogress/doc.zh-TW.md b/src/packages/circleprogress/doc.zh-TW.md index 40985d7efb..4f791e916b 100644 --- a/src/packages/circleprogress/doc.zh-TW.md +++ b/src/packages/circleprogress/doc.zh-TW.md @@ -120,7 +120,7 @@ const App = () => { <>
3000
-
步
+
步
 @@ -202,4 +202,4 @@ export default App; | \--nutui-circleprogress-primary-color | 環形進度條填充部分的顏色 | `$color-primary` | | \--nutui-circleprogress-path-color | 環形進度條軌道的顏色 | `#e5e9f2` | | \--nutui-circleprogress-text-color | 環形進度條軌道內容區的顏色 | `$color-title` | -| \--nutui-circleprogress-text-size | 環形進度條軌道內容區的大小 | `$font-card-title` | \ No newline at end of file +| \--nutui-circleprogress-text-size | 環形進度條軌道內容區的大小 | `$font-size-large` | \ No newline at end of file diff --git a/src/packages/col/col.taro.tsx b/src/packages/col/col.taro.tsx index 724e060ea3..742af33db8 100644 --- a/src/packages/col/col.taro.tsx +++ b/src/packages/col/col.taro.tsx @@ -5,6 +5,7 @@ import React, { CSSProperties, useContext, } from 'react' +import type { MouseEvent } from 'react' import classNames from 'classnames' import { DataContext } from '@/packages/row/UserContext' import { BasicComponent, ComponentDefaults } from '@/utils/typings' @@ -15,7 +16,7 @@ export interface ColProps extends BasicComponent { span: string | number offset: string | number gutter: string | number - onClick: (e: any, type: ColEventType) => void + onClick: (e: MouseEvent, type: ColEventType) => void } const defaultProps = { diff --git a/src/packages/col/col.tsx b/src/packages/col/col.tsx index 2559a5c062..a141d96970 100644 --- a/src/packages/col/col.tsx +++ b/src/packages/col/col.tsx @@ -5,6 +5,7 @@ import React, { CSSProperties, useContext, } from 'react' +import type { MouseEvent } from 'react' import classNames from 'classnames' import { DataContext } from '@/packages/row/UserContext' import { BasicComponent, ComponentDefaults } from '@/utils/typings' @@ -14,7 +15,7 @@ export interface ColProps extends BasicComponent { span: string | number offset: string | number gutter: string | number - onClick: (e: any, type: ColEventType) => void + onClick: (e: MouseEvent, type: ColEventType) => void } const defaultProps = { ...ComponentDefaults, diff --git a/src/packages/collapse/doc.en-US.md b/src/packages/collapse/doc.en-US.md index 1368ca498d..214142336e 100644 --- a/src/packages/collapse/doc.en-US.md +++ b/src/packages/collapse/doc.en-US.md @@ -325,13 +325,13 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | | \--nutui-collapse-item-padding | padding | `13px 36px 13px 26px` | -| \--nutui-collapse-item-font-size | fontSize | `$font-text` | +| \--nutui-collapse-item-font-size | fontSize | `$font-size` | | \--nutui-collapse-item-line-height | lineHeight | `24px` | | \--nutui-collapse-item-color | font color | `#666666` | -| \--nutui-collapse-item-disabled-color | disabled color | `$color-disabled` | +| \--nutui-collapse-item-disabled-color | disabled color | `$color-text-disable` | | \--nutui-collapse-item-extra-color | Extra font color | `#666666` | | \--nutui-collapse-wrapper-content-background-color | background | `$white` | | \--nutui-collapse-wrapper-content-color | content font color | `#666666` | -| \--nutui-collapse-wrapper-content-font-size | content fontSize | `$font-text` | +| \--nutui-collapse-wrapper-content-font-size | content fontSize | `$font-size` | | \--nutui-collapse-wrapper-content-line-height | content lineHeight | `1.5` | | \--nutui-collapse-wrapper-content-padding | content padding | `12px 26px` | \ No newline at end of file diff --git a/src/packages/collapse/doc.md b/src/packages/collapse/doc.md index bce45b8f72..350e0d2d52 100644 --- a/src/packages/collapse/doc.md +++ b/src/packages/collapse/doc.md @@ -326,13 +326,13 @@ const App = () => { | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-collapse-item-padding | 内边距 | `13px 36px 13px 26px` | -| \--nutui-collapse-item-font-size | 字体大小 | `$font-text` | +| \--nutui-collapse-item-font-size | 字体大小 | `$font-size` | | \--nutui-collapse-item-line-height | 行高 | `24px` | | \--nutui-collapse-item-color | 字体颜色 | `#666666` | -| \--nutui-collapse-item-disabled-color | 禁用颜色 | `$color-disabled` | +| \--nutui-collapse-item-disabled-color | 禁用颜色 | `$color-text-disable` | | \--nutui-collapse-item-extra-color | Extra 字体颜色 | `#666666` | | \--nutui-collapse-wrapper-content-background-color | 背景颜色 | `$white` | | \--nutui-collapse-wrapper-content-color | 内容字体颜色 | `#666666` | -| \--nutui-collapse-wrapper-content-font-size | 内容字体大小 | `$font-text` | +| \--nutui-collapse-wrapper-content-font-size | 内容字体大小 | `$font-size` | | \--nutui-collapse-wrapper-content-line-height | 内容行高 | `1.5` | | \--nutui-collapse-wrapper-content-padding | 内容内边距 | `12px 26px` | \ No newline at end of file diff --git a/src/packages/collapse/doc.taro.md b/src/packages/collapse/doc.taro.md index 5ae77b2362..3b514fa0bc 100644 --- a/src/packages/collapse/doc.taro.md +++ b/src/packages/collapse/doc.taro.md @@ -325,13 +325,13 @@ const App = () => { | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-collapse-item-padding | 内边距 | `13px 36px 13px 26px` | -| \--nutui-collapse-item-font-size | 字体大小 | `$font-text` | +| \--nutui-collapse-item-font-size | 字体大小 | `$font-size` | | \--nutui-collapse-item-line-height | 行高 | `24px` | | \--nutui-collapse-item-color | 字体颜色 | `#666666` | -| \--nutui-collapse-item-disabled-color | 禁用颜色 | `$color-disabled` | +| \--nutui-collapse-item-disabled-color | 禁用颜色 | `$color-text-disable` | | \--nutui-collapse-item-extra-color | Extra 字体颜色 | `#666666` | | \--nutui-collapse-wrapper-content-background-color | 背景颜色 | `$white` | | \--nutui-collapse-wrapper-content-color | 内容字体颜色 | `#666666` | -| \--nutui-collapse-wrapper-content-font-size | 内容字体大小 | `$font-text` | +| \--nutui-collapse-wrapper-content-font-size | 内容字体大小 | `$font-size` | | \--nutui-collapse-wrapper-content-line-height | 内容行高 | `1.5` | | \--nutui-collapse-wrapper-content-padding | 内容内边距 | `12px 26px` | \ No newline at end of file diff --git a/src/packages/collapse/doc.zh-TW.md b/src/packages/collapse/doc.zh-TW.md index 100f1d4982..5c054a39ac 100644 --- a/src/packages/collapse/doc.zh-TW.md +++ b/src/packages/collapse/doc.zh-TW.md @@ -326,13 +326,13 @@ const App = () => { | 名稱 | 說明 | 默認值 | | --- | --- | --- | | \--nutui-collapse-item-padding | 內邊距 | `13px 36px 13px 26px` | -| \--nutui-collapse-item-font-size | 字體大小 | `$font-text` | +| \--nutui-collapse-item-font-size | 字體大小 | `$font-size` | | \--nutui-collapse-item-line-height | 行高 | `24px` | | \--nutui-collapse-item-color | 字體顏色 | `#666666` | -| \--nutui-collapse-item-disabled-color | 禁用顏色 | `$color-disabled` | +| \--nutui-collapse-item-disabled-color | 禁用顏色 | `$color-text-disable` | | \--nutui-collapse-item-extra-color | Extra 字體顏色 | `#666666` | | \--nutui-collapse-wrapper-content-background-color | 背景顏色 | `$white` | | \--nutui-collapse-wrapper-content-color | 內容字體顏色 | `#666666` | -| \--nutui-collapse-wrapper-content-font-size | 內容字體大小 | `$font-text` | +| \--nutui-collapse-wrapper-content-font-size | 內容字體大小 | `$font-size` | | \--nutui-collapse-wrapper-content-line-height | 內容行高 | `1.5` | | \--nutui-collapse-wrapper-content-padding | 內容內邊距 | `12px 26px` | \ No newline at end of file diff --git a/src/packages/collapseitem/collapseitem.scss b/src/packages/collapseitem/collapseitem.scss index eeff5a9e9a..7216c542c2 100644 --- a/src/packages/collapseitem/collapseitem.scss +++ b/src/packages/collapseitem/collapseitem.scss @@ -7,7 +7,7 @@ padding: $collapse-item-padding; font-size: $collapse-item-font-size; line-height: $collapse-item-line-height; - background-color: $color-card-background; + background-color: $color-background-overlay; box-sizing: border-box; &::after { diff --git a/src/packages/configprovider/__test__/configprovider.spec.tsx b/src/packages/configprovider/__test__/configprovider.spec.tsx index 4b7d90abf2..0d50e1077c 100644 --- a/src/packages/configprovider/__test__/configprovider.spec.tsx +++ b/src/packages/configprovider/__test__/configprovider.spec.tsx @@ -79,7 +79,7 @@ describe('configprovider', () => { expect(ele).toHaveTextContent('Save') expect(ele).toHaveClass('nut-configprovider bb') expect(ele).toHaveStyle( - '--nutui-color-primary: green; --nutui-color-primary-start: green; --nutui-color-primary-end: green; margin: 8px;' + '--nutui-color-primary: green; --nutui-color-primary-stop-1: green; --nutui-color-primary-stop-2: green; margin: 8px;' ) }) }) diff --git a/src/packages/configprovider/doc.en-US.md b/src/packages/configprovider/doc.en-US.md index 89e6c39bbc..d0cc8e0997 100644 --- a/src/packages/configprovider/doc.en-US.md +++ b/src/packages/configprovider/doc.en-US.md @@ -26,8 +26,8 @@ You can override these CSS variables directly in your code, and the styling of t /* After you add this style, the Primary Button turns green */ :root { --nutui-color-primary: green; - --nutui-color-primary-start: green; - --nutui-color-primary-end: green; + --nutui-color-primary-stop-1: green; + --nutui-color-primary-stop-2: green; } ``` @@ -83,30 +83,30 @@ NutUI-React supports the following CSS variables: :root, page { --nutui-color-primary: #fa2c19; - --nutui-color-primary-start: #ff404f; - --nutui-color-primary-end: #fa2c19; + --nutui-color-primary-stop-1: #ff404f; + --nutui-color-primary-stop-2: #fa2c19; --nutui-brand-link-color: #396acc; --nutui-brand-text-color: #ffffff; // The main content is colored, common words, general title content, detailed text browsing, general button text and chart guidance - --nutui-gray-6: #1a1a1a; + --nutui-gray-7: #1a1a1a; // Secondary text color, used for secondary headings, attribute indications, non-primary information guidance, etc. - --nutui-black-9: #757575; + --nutui-black-10: #757575; // Non-operable content color for preset content, invalid content, special non-clickable buttons, component border lines, etc. - --nutui-gray-5: #bfbfbf; + --nutui-gray-6: #bfbfbf; // The base color of the page, used for the bottom of the card-style page, is always placed at the bottom of the page. - --nutui-gray-4: #f4f4f4; + --nutui-gray-5: #f4f4f4; // The background color is embedded in the card, which is used for information wrapping inside the card, and the perception is weak. - --nutui-gray-3: #f8f8f8; + --nutui-gray-4: #f8f8f8; // Card background color - --nutui-black-2: #ffffff; + --nutui-black-3: #ffffff; // Page global mask, used for pop-up layers, pop-ups, full-page masks that new features lead to appear - --nutui-gray-2: rgba(0, 0, 0, 0.7); + --nutui-gray-3: rgba(0, 0, 0, 0.7); // Local masks for non-full-page masking - --nutui-gray-1: rgba(0, 0, 0, 0.4); + --nutui-gray-2: rgba(0, 0, 0, 0.4); // Spacer/fault-tolerant lines for structure or information segmentation - --nutui-black-1: rgba(0, 0, 0, 0.08); + --nutui-black-2: rgba(0, 0, 0, 0.08); // Image fault tolerance mask - --nutui-gray-0: rgba(0, 0, 0, 0.02); + --nutui-gray-1: rgba(0, 0, 0, 0.02); } ``` diff --git a/src/packages/configprovider/doc.md b/src/packages/configprovider/doc.md index fdb56375c6..d58ba41ece 100644 --- a/src/packages/configprovider/doc.md +++ b/src/packages/configprovider/doc.md @@ -26,8 +26,8 @@ NutUI-React 可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/W /* 添加这段样式后，Primary Button 会变成绿色 */ :root { --nutui-color-primary: green; - --nutui-color-primary-start: green; - --nutui-color-primary-end: green; + --nutui-color-primary-stop-1: green; + --nutui-color-primary-stop-2: green; } ``` @@ -83,30 +83,30 @@ NutUI-React 支持的 CSS 变量如下： :root, page { --nutui-color-primary: #fa2c19; - --nutui-color-primary-start: #ff404f; - --nutui-color-primary-end: #fa2c19; + --nutui-color-primary-stop-1: #ff404f; + --nutui-color-primary-stop-2: #fa2c19; --nutui-brand-link-color: #396acc; --nutui-brand-text-color: #ffffff; // 主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。 - --nutui-gray-6: #1a1a1a; + --nutui-gray-7: #1a1a1a; // 次要文字色，用于次级标题、属性标示、非主要信息引导等。 - --nutui-black-9: #757575; + --nutui-black-10: #757575; // 不可操作内容色，用于预置内容、无效内容、特殊不可点击按钮、组件边框线等。 - --nutui-gray-5: #bfbfbf; + --nutui-gray-6: #bfbfbf; // 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。 - --nutui-gray-4: #f4f4f4; + --nutui-gray-5: #f4f4f4; // 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。 - --nutui-gray-3: #f8f8f8; + --nutui-gray-4: #f8f8f8; // 卡片背景色 - --nutui-black-2: #ffffff; + --nutui-black-3: #ffffff; // 页面全局蒙层，用于弹出层、弹窗、新功能引导出现的整页遮罩 - --nutui-gray-2: rgba(0, 0, 0, 0.7); + --nutui-gray-3: rgba(0, 0, 0, 0.7); // 局部蒙层，用于非整页遮罩 - --nutui-gray-1: rgba(0, 0, 0, 0.4); + --nutui-gray-2: rgba(0, 0, 0, 0.4); // 间隔线/容错线，用于结构或信息分割 - --nutui-black-1: rgba(0, 0, 0, 0.08); + --nutui-black-2: rgba(0, 0, 0, 0.08); // 图片容错蒙层 - --nutui-gray-0: rgba(0, 0, 0, 0.02); + --nutui-gray-1: rgba(0, 0, 0, 0.02); } ``` diff --git a/src/packages/configprovider/doc.taro.md b/src/packages/configprovider/doc.taro.md index 5d4f52dee5..bfb66f1137 100644 --- a/src/packages/configprovider/doc.taro.md +++ b/src/packages/configprovider/doc.taro.md @@ -26,8 +26,8 @@ NutUI-React 可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/W /* 添加这段样式后，Primary Button 会变成绿色 */ :root { --nutui-color-primary: green; - --nutui-color-primary-start: green; - --nutui-color-primary-end: green; + --nutui-color-primary-stop-1: green; + --nutui-color-primary-stop-2: green; } ``` @@ -83,30 +83,30 @@ NutUI-React 支持的 CSS 变量如下： :root, page { --nutui-color-primary: #fa2c19; - --nutui-color-primary-start: #ff404f; - --nutui-color-primary-end: #fa2c19; + --nutui-color-primary-stop-1: #ff404f; + --nutui-color-primary-stop-2: #fa2c19; --nutui-brand-link-color: #396acc; --nutui-brand-text-color: #ffffff; // 主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。 - --nutui-gray-6: #1a1a1a; + --nutui-gray-7: #1a1a1a; // 次要文字色，用于次级标题、属性标示、非主要信息引导等。 - --nutui-black-9: #757575; + --nutui-black-10: #757575; // 不可操作内容色，用于预置内容、无效内容、特殊不可点击按钮、组件边框线等。 - --nutui-gray-5: #bfbfbf; + --nutui-gray-6: #bfbfbf; // 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。 - --nutui-gray-4: #f4f4f4; + --nutui-gray-5: #f4f4f4; // 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。 - --nutui-gray-3: #f8f8f8; + --nutui-gray-4: #f8f8f8; // 卡片背景色 - --nutui-black-2: #ffffff; + --nutui-black-3: #ffffff; // 页面全局蒙层，用于弹出层、弹窗、新功能引导出现的整页遮罩 - --nutui-gray-2: rgba(0, 0, 0, 0.7); + --nutui-gray-3: rgba(0, 0, 0, 0.7); // 局部蒙层，用于非整页遮罩 - --nutui-gray-1: rgba(0, 0, 0, 0.4); + --nutui-gray-2: rgba(0, 0, 0, 0.4); // 间隔线/容错线，用于结构或信息分割 - --nutui-black-1: rgba(0, 0, 0, 0.08); + --nutui-black-2: rgba(0, 0, 0, 0.08); // 图片容错蒙层 - --nutui-gray-0: rgba(0, 0, 0, 0.02); + --nutui-gray-1: rgba(0, 0, 0, 0.02); } ``` diff --git a/src/packages/configprovider/doc.zh-TW.md b/src/packages/configprovider/doc.zh-TW.md index ab435cf431..788087e57c 100644 --- a/src/packages/configprovider/doc.zh-TW.md +++ b/src/packages/configprovider/doc.zh-TW.md @@ -26,8 +26,8 @@ NutUI-React 可以通過 \[CSS 變數\]（https://developer.mozilla.org/zh-CN/do /* 添加這段樣式后，Primary Button 會變成綠色 */ :root { --nutui-color-primary: green; - --nutui-color-primary-start: green; - --nutui-color-primary-end: green; + --nutui-color-primary-stop-1: green; + --nutui-color-primary-stop-2: green; } ``` @@ -83,30 +83,30 @@ NutUI-React 支援的 CSS 變數如下： :root, page { --nutui-color-primary: #fa2c19; - --nutui-color-primary-start: #ff404f; - --nutui-color-primary-end: #fa2c19; + --nutui-color-primary-stop-1: #ff404f; + --nutui-color-primary-stop-2: #fa2c19; --nutui-brand-link-color: #396acc; --nutui-brand-text-color: #ffffff; // 主要內容用色，常用語常規標題內容、細文流覽、常規按鈕文字以及圖表引導。 - --nutui-gray-6: #1a1a1a; + --nutui-gray-7: #1a1a1a; // 次要文字色，用於次級標題、屬性標示、非主要信息引導等。 - --nutui-black-9: #757575; + --nutui-black-10: #757575; // 不可操作內容色，用於預置內容、無效內容、特殊不可點擊按鈕、元件邊框線等。 - --nutui-gray-5: #bfbfbf; + --nutui-gray-6: #bfbfbf; // 頁面基底色，用於卡片式頁面的兜底，永遠置於頁面最底層。 - --nutui-gray-4: #f4f4f4; + --nutui-gray-5: #f4f4f4; // 卡片內嵌背景色，用於卡片內部的資訊包裹，感知較弱。 - --nutui-gray-3: #f8f8f8; + --nutui-gray-4: #f8f8f8; // 卡片背景色。 - --nutui-black-2: #ffffff; + --nutui-black-3: #ffffff; // 頁面全域蒙層，用於彈出層、彈窗、新功能引導出現的整頁遮罩。 - --nutui-gray-2: rgba(0, 0, 0, 0.7); + --nutui-gray-3: rgba(0, 0, 0, 0.7); // 局部蒙層，用於非整頁遮罩。 - --nutui-gray-1: rgba(0, 0, 0, 0.4); + --nutui-gray-2: rgba(0, 0, 0, 0.4); // 間隔線/容錯線，用於結構或資訊分割。 - --nutui-black-1: rgba(0, 0, 0, 0.08); + --nutui-black-2: rgba(0, 0, 0, 0.08); // 圖片容錯蒙層。 - --nutui-gray-0: rgba(0, 0, 0, 0.02); + --nutui-gray-1: rgba(0, 0, 0, 0.02); } ``` diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts index dcfde611ea..6c779659cf 100644 --- a/src/packages/configprovider/types.ts +++ b/src/packages/configprovider/types.ts @@ -747,3 +747,8 @@ export type NutCSSVariables = | 'nutuiRowContentHeight' | 'nutuiRowContentLineHeight' | 'nutuiColDefaultMarginBottom' + | 'nutuiSpaceGap' + | 'nutuiLoadingIconColor' + | 'nutuiLoadingIconSize' + | 'nutuiLoadingTextColor' + | 'nutuiLoadingTextSize' diff --git a/src/packages/dialog/config.ts b/src/packages/dialog/config.ts index 225239f75f..01b3d24fd8 100644 --- a/src/packages/dialog/config.ts +++ b/src/packages/dialog/config.ts @@ -1,4 +1,5 @@ import { ReactNode, ForwardRefExoticComponent, PropsWithChildren } from 'react' +import type { MouseEvent } from 'react' export type DialogConfigType = { prefixCls?: string @@ -22,7 +23,7 @@ export interface BasicDialogProps { beforeClose?: () => boolean beforeCancel?: () => boolean onClose?: () => void - onConfirm?: (e?: MouseEvent) => Promise<() => void> | void + onConfirm?: (e?: MouseEvent) => Promise<() => void> | void onCancel?: () => void onClick?: () => void } diff --git a/src/packages/dialog/dialog.scss b/src/packages/dialog/dialog.scss index 096963e4ee..48a7709af8 100644 --- a/src/packages/dialog/dialog.scss +++ b/src/packages/dialog/dialog.scss @@ -30,7 +30,7 @@ &__header { display: block; text-align: center; - font-size: $font-card-title; + font-size: $font-size-large; color: $color-title; @include oneline-ellipsis(); } @@ -42,7 +42,7 @@ margin: $dialog-content-margin; max-height: $dialog-content-max-height; line-height: $dialog-content-line-height; - font-size: $font-help; + font-size: $font-size-small; color: $color-text; word-wrap: break-word; word-break: break-all; diff --git a/src/packages/dialog/dialog.taro.tsx b/src/packages/dialog/dialog.taro.tsx index 212c605d6e..610c89a9cf 100644 --- a/src/packages/dialog/dialog.taro.tsx +++ b/src/packages/dialog/dialog.taro.tsx @@ -1,4 +1,5 @@ import React, { forwardRef } from 'react' +import type { MouseEvent } from 'react' import classNames from 'classnames' import { View } from '@tarojs/components' import Button from '@/packages/button/index.taro' @@ -53,7 +54,7 @@ export const BaseDialog = forwardRef( const renderFooter = () => { if (footer === null) return '' - const handleCancel = (e: MouseEvent) => { + const handleCancel = (e: MouseEvent) => { e.stopPropagation() if (!beforeCancel?.()) return if (!beforeClose?.()) return @@ -61,7 +62,7 @@ export const BaseDialog = forwardRef( onCancel?.() } - const handleOk = (e: MouseEvent) => { + const handleOk = (e: MouseEvent) => { e.stopPropagation() onClose?.() onConfirm?.(e) diff --git a/src/packages/dialog/dialog.tsx b/src/packages/dialog/dialog.tsx index 464a151ae6..502ddb32e8 100644 --- a/src/packages/dialog/dialog.tsx +++ b/src/packages/dialog/dialog.tsx @@ -1,4 +1,5 @@ import React, { ForwardRefRenderFunction, forwardRef } from 'react' +import type { MouseEvent } from 'react' import classNames from 'classnames' import Button from '@/packages/button' import confirm from './confirm' @@ -53,7 +54,7 @@ const BaseDialog: ForwardRefRenderFunction> = ( const renderFooter = () => { if (footer === null) return '' - const handleCancel = (e: MouseEvent) => { + const handleCancel = (e: MouseEvent) => { e.stopPropagation() if (!beforeCancel?.()) return if (!beforeClose?.()) return @@ -61,7 +62,7 @@ const BaseDialog: ForwardRefRenderFunction> = ( onCancel?.() } - const handleOk = (e: MouseEvent) => { + const handleOk = (e: MouseEvent) => { e.stopPropagation() onClose?.() onConfirm?.(e) diff --git a/src/packages/divider/doc.en-US.md b/src/packages/divider/doc.en-US.md index 52f1add964..e8eaa1de94 100644 --- a/src/packages/divider/doc.en-US.md +++ b/src/packages/divider/doc.en-US.md @@ -112,7 +112,7 @@ import { Divider } from '@nutui/nutui-react'; const App = () => { return ( <> - Text + Text ); }; @@ -165,7 +165,7 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | | \--nutui-divider-margin | The margin value of the overall content of the dividing line | `16px 0` | -| \--nutui-divider-text-font-size | The font-size of the overall content of the dividing line | `$font-text` | +| \--nutui-divider-text-font-size | The font-size of the overall content of the dividing line | `$font-size` | | \--nutui-divider-text-color | The color of the overall content of the dividing line | `$color-title` | | \--nutui-divider-line-height | The row height of the dividing line | `2px` | | \--nutui-divider-before-margin-right | The margin-right value of the left dividing line | `16px` | diff --git a/src/packages/divider/doc.md b/src/packages/divider/doc.md index 98ab13b35a..72bc1e544b 100644 --- a/src/packages/divider/doc.md +++ b/src/packages/divider/doc.md @@ -165,7 +165,7 @@ export default App; | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-divider-margin | 分割线整体内容的margin值 | `16px 0` | -| \--nutui-divider-text-font-size | 分割线整体内容的font-size大小 | `$font-text` | +| \--nutui-divider-text-font-size | 分割线整体内容的font-size大小 | `$font-size` | | \--nutui-divider-text-color | 分割线整体内容的颜色 | `$color-title` | | \--nutui-divider-line-height | 分割线的行高 | `2px` | | \--nutui-divider-before-margin-right | 左边分割线的margin-right值 | `16px` | diff --git a/src/packages/divider/doc.taro.md b/src/packages/divider/doc.taro.md index 9b9fd7fc4a..9413e301ef 100644 --- a/src/packages/divider/doc.taro.md +++ b/src/packages/divider/doc.taro.md @@ -112,7 +112,7 @@ import { Divider } from '@nutui/nutui-react-taro'; const App = () => { return ( <> - 文本 + 文本 ); }; @@ -165,7 +165,7 @@ export default App; | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-divider-margin | 分割线整体内容的margin值 | `16px 0` | -| \--nutui-divider-text-font-size | 分割线整体内容的font-size大小 | `$font-text` | +| \--nutui-divider-text-font-size | 分割线整体内容的font-size大小 | `$font-size` | | \--nutui-divider-text-color | 分割线整体内容的颜色 | `$color-title` | | \--nutui-divider-line-height | 分割线的行高 | `2px` | | \--nutui-divider-before-margin-right | 左边分割线的margin-right值 | `16px` | diff --git a/src/packages/divider/doc.zh-TW.md b/src/packages/divider/doc.zh-TW.md index b400e844c4..81788268a9 100644 --- a/src/packages/divider/doc.zh-TW.md +++ b/src/packages/divider/doc.zh-TW.md @@ -165,7 +165,7 @@ export default App; | 名稱 | 說明 | 默認值 | | --- | --- | --- | | \--nutui-divider-margin | 分割線整體內容的margin值 | `16px 0` | -| \--nutui-divider-text-font-size | 分割線整體內容的font-size大小 | `$font-text` | +| \--nutui-divider-text-font-size | 分割線整體內容的font-size大小 | `$font-size` | | \--nutui-divider-text-color | 分割線整體內容的顏色 | `$color-title` | | \--nutui-divider-line-height | 分割線的行高 | `2px` | | \--nutui-divider-before-margin-right | 左邊分割線的margin-right值 | `16px` | diff --git a/src/packages/elevator/elevator.taro.tsx b/src/packages/elevator/elevator.taro.tsx index 12899d8764..a5e55a17bd 100644 --- a/src/packages/elevator/elevator.taro.tsx +++ b/src/packages/elevator/elevator.taro.tsx @@ -127,7 +127,7 @@ export const Elevator: FunctionComponent< } if (index > state.current.listHeight.length - 2) { - cacheIndex = state.current.listHeight.length - 2 + cacheIndex = Math.max(0, state.current.listHeight.length - 2) } setCodeIndex(cacheIndex) diff --git a/src/packages/elevator/elevator.tsx b/src/packages/elevator/elevator.tsx index 9a8ea4b17d..8befea555b 100644 --- a/src/packages/elevator/elevator.tsx +++ b/src/packages/elevator/elevator.tsx @@ -119,7 +119,7 @@ export const Elevator: FunctionComponent< } if (index > state.current.listHeight.length - 2) { - cacheIndex = state.current.listHeight.length - 2 + cacheIndex = Math.max(0, state.current.listHeight.length - 2) } setCodeIndex(cacheIndex) diff --git a/src/packages/form/doc.en-US.md b/src/packages/form/doc.en-US.md index a9d3e6a3bd..c7b9a86ee9 100644 --- a/src/packages/form/doc.en-US.md +++ b/src/packages/form/doc.en-US.md @@ -452,6 +452,7 @@ export default App; | --- | --- | --- | --- | | required | The red star of the required form item label, only used to control the style | `boolean` | `false` | | name | In the case of using the form validation function, this attribute is required | `string` | `-` | +| label | Label name | `ReactNode` | `-` | | errorMessageAlign | Error text alignment | `center` \| `right` \| `left` | `left` | | initialValue | set the default value of child elements | `any` | `-` | | trigger | Set the timing to collect field value changes | `string` | `-` | diff --git a/src/packages/form/doc.md b/src/packages/form/doc.md index ea5ea2e8c5..8127316fce 100644 --- a/src/packages/form/doc.md +++ b/src/packages/form/doc.md @@ -445,6 +445,7 @@ export default App; | --- | --- | --- | --- | | required | 必填表单项 label 的红色星标,仅用于控制样式 | `boolean` | `false` | | name | 在使用表单校验功能的情况下，该属性是必填的 | `string` | `-` | +| label | 标签名 | `ReactNode` | `-` | | errorMessageAlign | 错误提示文案对齐方式 | `center` \| `right` \| `left` | `left` | | initialValue | 设置子元素默认值 | `any` | `-` | | trigger | 设置收集字段值变更的时机 | `string` | `-` | diff --git a/src/packages/form/doc.taro.md b/src/packages/form/doc.taro.md index 0ac024ab01..a4a38ad10f 100644 --- a/src/packages/form/doc.taro.md +++ b/src/packages/form/doc.taro.md @@ -451,6 +451,7 @@ export default App; | --- | --- | --- | --- | | required | 必填表单项 label 的红色星标,仅用于控制样式 | `boolean` | `false` | | name | 在使用表单校验功能的情况下，该属性是必填的 | `string` | `-` | +| label | 标签名 | `ReactNode` | `-` | | errorMessageAlign | 错误提示文案对齐方式 | `center` \| `right` \| `left` | `left` | | initialValue | 设置子元素默认值 | `any` | `-` | | trigger | 设置收集字段值变更的时机 | `string` | `-` | diff --git a/src/packages/form/doc.zh-TW.md b/src/packages/form/doc.zh-TW.md index 5eeff26f3f..f9526d1593 100644 --- a/src/packages/form/doc.zh-TW.md +++ b/src/packages/form/doc.zh-TW.md @@ -432,6 +432,7 @@ export default App; | footer | 錶單底部區域，一般放置確認和重置按鈕 | `ReactNode` | `null` | | initialValues | 錶單初始值 | `any` | `-` | | name | 錶單名稱 | `any` | `-` | +| label | 标签名 | `ReactNode` | `-` | | labelPosition | 錶單項 label 的位置 | `top` \| `left` \| `right` | `right` | | starPosition | 必填錶單項 label 的紅色星標位置 | `left` \| `right` | `left` | | onFinish | 校驗成功後觸發 | `(values: any) => void` | `-` | diff --git a/src/packages/formitem/types.ts b/src/packages/formitem/types.ts index c21f76ad79..91dfd429ff 100644 --- a/src/packages/formitem/types.ts +++ b/src/packages/formitem/types.ts @@ -1,3 +1,5 @@ +import { ReactNode } from 'react' + export interface FormItemRuleWithoutValidator { [key: string]: any regex?: RegExp @@ -19,7 +21,7 @@ export interface BaseFormField { /** * label 标签的文本 */ - label: string + label: ReactNode /** * 校验规则，设置字段的校验逻辑 */ diff --git a/src/packages/grid/doc.en-US.md b/src/packages/grid/doc.en-US.md index 8346cd968c..f8025e5c58 100644 --- a/src/packages/grid/doc.en-US.md +++ b/src/packages/grid/doc.en-US.md @@ -290,4 +290,4 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-grid-item-content-bg-color | background | `$white` | | \--nutui-grid-item-text-margin | margin | `8px` | | \--nutui-grid-item-text-color | text color | `$color-title` | -| \--nutui-grid-item-text-font-size | text font size | `$font-help` | \ No newline at end of file +| \--nutui-grid-item-text-font-size | text font size | `$font-size-small` | \ No newline at end of file diff --git a/src/packages/grid/doc.md b/src/packages/grid/doc.md index 2dd2ade4ca..777deb5171 100644 --- a/src/packages/grid/doc.md +++ b/src/packages/grid/doc.md @@ -288,4 +288,4 @@ export default App | \--nutui-grid-item-content-bg-color | 背景 | `$white` | | \--nutui-grid-item-text-margin | 外边距 | `8px` | | \--nutui-grid-item-text-color | 文字颜色 | `$color-title` | -| \--nutui-grid-item-text-font-size | 文字字体大小 | `$font-help` | \ No newline at end of file +| \--nutui-grid-item-text-font-size | 文字字体大小 | `$font-size-small` | \ No newline at end of file diff --git a/src/packages/grid/doc.taro.md b/src/packages/grid/doc.taro.md index c341d5b605..68d6f5f00c 100644 --- a/src/packages/grid/doc.taro.md +++ b/src/packages/grid/doc.taro.md @@ -295,4 +295,4 @@ export default App | \--nutui-grid-item-content-bg-color | 背景 | `$white` | | \--nutui-grid-item-text-margin | 外边距 | `8px` | | \--nutui-grid-item-text-color | 文字颜色 | `$color-title` | -| \--nutui-grid-item-text-font-size | 文字字体大小 | `$font-help` | \ No newline at end of file +| \--nutui-grid-item-text-font-size | 文字字体大小 | `$font-size-small` | \ No newline at end of file diff --git a/src/packages/grid/doc.zh-TW.md b/src/packages/grid/doc.zh-TW.md index e4fb4595da..a566a67024 100644 --- a/src/packages/grid/doc.zh-TW.md +++ b/src/packages/grid/doc.zh-TW.md @@ -288,4 +288,4 @@ export default App | \--nutui-grid-item-content-bg-color | 背景 | `$white` | | \--nutui-grid-item-text-margin | 外邊距 | `8px` | | \--nutui-grid-item-text-color | 文字顏色 | `$color-title` | -| \--nutui-grid-item-text-font-size | 文字字體大小 | `$font-help` | \ No newline at end of file +| \--nutui-grid-item-text-font-size | 文字字體大小 | `$font-size-small` | \ No newline at end of file diff --git a/src/packages/image/doc.taro.md b/src/packages/image/doc.taro.md index c235dd7554..fa9773a59a 100644 --- a/src/packages/image/doc.taro.md +++ b/src/packages/image/doc.taro.md @@ -7,7 +7,7 @@ ## 安装 ```tsx -import { Image } from '@nutui/nutui-react'; +import { Image } from '@nutui/nutui-react-taro'; ``` ## 代码演示 @@ -20,7 +20,7 @@ import { Image } from '@nutui/nutui-react'; ```tsx import React from "react"; -import { Image } from '@nutui/nutui-react'; +import { Image } from '@nutui/nutui-react-taro'; const App = () => { const src = @@ -42,7 +42,7 @@ export default App; ```tsx import React from "react"; -import { Image } from '@nutui/nutui-react'; +import { Image } from '@nutui/nutui-react-taro'; const App = () => { const src = @@ -84,8 +84,8 @@ export default App; ```tsx import React from "react"; -import { Image } from '@nutui/nutui-react'; -import { Loading } from '@nutui/icons-react'; +import { Image } from '@nutui/nutui-react-taro'; +import { Loading } from '@nutui/icons-react-taro'; const App = () => { const src = @@ -115,8 +115,8 @@ export default App; ```tsx import React from "react"; -import { Image } from '@nutui/nutui-react'; -import { CircleClose } from '@nutui/icons-react'; +import { Image } from '@nutui/nutui-react-taro'; +import { CircleClose } from '@nutui/icons-react-taro'; const App = () => { return <> @@ -140,8 +140,8 @@ export default App; ```tsx import React from "react"; -import { Cell, Col, Image } from '@nutui/nutui-react'; -import { CircleClose } from '@nutui/icons-react'; +import { Cell, Col, Image } from '@nutui/nutui-react-taro'; +import { CircleClose } from '@nutui/icons-react-taro'; const App = () => { return <> @@ -173,8 +173,8 @@ export default App; ```tsx import React from "react"; -import { Cell, Col, Image } from '@nutui/nutui-react'; -import { CircleClose } from '@nutui/icons-react'; +import { Cell, Col, Image } from '@nutui/nutui-react-taro'; +import { CircleClose } from '@nutui/icons-react-taro'; const App = () => { return <> @@ -211,7 +211,7 @@ export default App; ```tsx import React from 'react' -import { Image } from '@nutui/nutui-react' +import { Image } from '@nutui/nutui-react-taro' import { ScrollView } from '@tarojs/components' const App = () => { diff --git a/src/packages/indicator/demo.scss b/src/packages/indicator/demo.scss index 591f35c3c3..3a3369bbe7 100644 --- a/src/packages/indicator/demo.scss +++ b/src/packages/indicator/demo.scss @@ -13,7 +13,7 @@ width: 14px; height: 14px; text-align: center; - font-size: $font-size-0; + font-size: $font-size-xs; line-height: 14px; color: $white; vertical-align: middle; diff --git a/src/packages/indicator/doc.en-US.md b/src/packages/indicator/doc.en-US.md index c46bf97744..5a520f568e 100644 --- a/src/packages/indicator/doc.en-US.md +++ b/src/packages/indicator/doc.en-US.md @@ -131,7 +131,7 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default Value | | --- | --- | --- | | \--nutui-indicator-color | indicator active color | `$color-primary` | -| \--nutui-indicator-dot-color | indicator default color | `$color-disabled` | +| \--nutui-indicator-dot-color | indicator default color | `$color-text-disable` | | \--nutui-indicator-dot-size | indicator dot size | `5px` | | \--nutui-indicator-dot-active-size | indicator dot active size | `15px` | | \--nutui-indicator-border-size | indicator active border size | `3px` | diff --git a/src/packages/indicator/doc.md b/src/packages/indicator/doc.md index dadb95f8a1..ce57a8dcdc 100644 --- a/src/packages/indicator/doc.md +++ b/src/packages/indicator/doc.md @@ -131,7 +131,7 @@ export default App; | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-indicator-color | 指示器焦点时色值 | `$color-primary` | -| \--nutui-indicator-dot-color | 指示器默认色值 | `$color-disabled` | +| \--nutui-indicator-dot-color | 指示器默认色值 | `$color-text-disable` | | \--nutui-indicator-dot-size | 指示器尺寸 | `5px` | | \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `15px` | | \--nutui-indicator-border-size | 指示器焦点时的border值 | `3px` | diff --git a/src/packages/indicator/doc.taro.md b/src/packages/indicator/doc.taro.md index c764d5546a..a51a6171cc 100644 --- a/src/packages/indicator/doc.taro.md +++ b/src/packages/indicator/doc.taro.md @@ -131,7 +131,7 @@ export default App; | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-indicator-color | 指示器焦点时色值 | `$color-primary` | -| \--nutui-indicator-dot-color | 指示器默认色值 | `$color-disabled` | +| \--nutui-indicator-dot-color | 指示器默认色值 | `$color-text-disable` | | \--nutui-indicator-dot-size | 指示器尺寸 | `5px` | | \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `15px` | | \--nutui-indicator-border-size | 指示器焦点时的border值 | `3px` | diff --git a/src/packages/indicator/doc.zh-TW.md b/src/packages/indicator/doc.zh-TW.md index 32352191eb..5e3a3f1bab 100644 --- a/src/packages/indicator/doc.zh-TW.md +++ b/src/packages/indicator/doc.zh-TW.md @@ -131,7 +131,7 @@ export default App; | 名稱 | 說明 | 默認值 | | --- | --- | --- | | \--nutui-indicator-color | 指示器焦點時色值 | `$color-primary` | -| \--nutui-indicator-dot-color | 指示器默認色值 | `$color-disabled` | +| \--nutui-indicator-dot-color | 指示器默認色值 | `$color-text-disable` | | \--nutui-indicator-dot-size | 指示器尺寸 | `5px` | | \--nutui-indicator-dot-active-size | 指示器焦點時尺寸 | `15px` | | \--nutui-indicator-border-size | 指示器焦點時的border值 | `3px` | diff --git a/src/packages/infiniteloading/infiniteloading.scss b/src/packages/infiniteloading/infiniteloading.scss index ba02debd34..ae12672e68 100644 --- a/src/packages/infiniteloading/infiniteloading.scss +++ b/src/packages/infiniteloading/infiniteloading.scss @@ -31,7 +31,7 @@ justify-content: center; width: 100%; padding-top: 6px; - font-size: $font-help; + font-size: $font-size-small; color: $infiniteloading-bottom-color; text-align: center; diff --git a/src/packages/input/demo.taro.tsx b/src/packages/input/demo.taro.tsx index 393ad62da1..ee502649a4 100644 --- a/src/packages/input/demo.taro.tsx +++ b/src/packages/input/demo.taro.tsx @@ -117,7 +117,7 @@ const InputDemo = () => { style={{ display: 'flex', alignItems: 'center', - background: 'var(--nutui-gray-0)', + background: 'var(--nutui-gray-1)', padding: '0 10px', }} > @@ -128,7 +128,7 @@ const InputDemo = () => { />
{currentLength} / 20
@@ -138,7 +138,7 @@ const InputDemo = () => { style={{ display: 'flex', alignItems: 'center', - background: 'var(--nutui-gray-0)', + background: 'var(--nutui-gray-1)', padding: '0 10px', }} > @@ -150,9 +150,9 @@ const InputDemo = () => { } > {inputType === 'text' ? ( - + ) : ( - + )}
@@ -176,11 +176,11 @@ const InputDemo = () => { style={{ display: 'flex', alignItems: 'center', - background: 'var(--nutui-gray-0)', + background: 'var(--nutui-gray-1)', padding: '0 10px', }} > - +
{ style={{ display: 'flex', alignItems: 'center', - background: 'var(--nutui-gray-0)', + background: 'var(--nutui-gray-1)', padding: '0 10px', }} > @@ -133,7 +133,7 @@ const InputDemo = () => { />
{currentLength} / 20
@@ -143,7 +143,7 @@ const InputDemo = () => { style={{ display: 'flex', alignItems: 'center', - background: 'var(--nutui-gray-0)', + background: 'var(--nutui-gray-1)', padding: '0 10px', }} > @@ -155,9 +155,9 @@ const InputDemo = () => { } > {inputType === 'text' ? ( - + ) : ( - + )}
@@ -181,11 +181,11 @@ const InputDemo = () => { style={{ display: 'flex', alignItems: 'center', - background: 'var(--nutui-gray-0)', + background: 'var(--nutui-gray-1)', padding: '0 10px', }} > - +
+ +
+ +
+ 加载中 +
+ + + ) +} + +export default LoadingDemo diff --git a/src/packages/loading/demo.tsx b/src/packages/loading/demo.tsx new file mode 100644 index 0000000000..e9cab671a1 --- /dev/null +++ b/src/packages/loading/demo.tsx @@ -0,0 +1,92 @@ +import React, { useState } from 'react' +import { Category } from '@nutui/icons-react' +import { Loading } from './loading' +import Cell from '../cell' +import Button from '../button' +import Overlay from '../overlay' +import ConfigProvider from '../configprovider' + +const LoadingDemo = () => { + const [visible, setVisible] = useState(false) + + const WrapperStyle = { + display: 'flex', + height: '100%', + alignItems: 'center', + justifyContent: 'center', + } + + function showOverlay() { + setVisible(true) + setTimeout(() => { + setVisible(false) + }, 2000) + } + + return ( + <> +
+

基础用法

+ + + + +

自定义颜色

+ + + + + + + + +

自定义大小

+ + + + + + + + +

带文字

+ + 加载中 + +

带文字(竖向排列)

+ + 加载中 + +

自定义文字颜色和大小

+ + + 加载中 + + + 加载中 + + +

自定义图标

+ + } + /> + +

与遮罩层结合

+ + + +
+ +
+ 加载中 +
+ + + ) +} + +export default LoadingDemo diff --git a/src/packages/loading/doc.en-US.md b/src/packages/loading/doc.en-US.md new file mode 100644 index 0000000000..f615b6a512 --- /dev/null +++ b/src/packages/loading/doc.en-US.md @@ -0,0 +1,224 @@ +# Loading + +### Intro + +A loading icon, Used to show the loading state + +### Install + +```tsx +import { Loading } from '@nutui/nutui-react'; +``` + +## Demo + +### Basic Usage + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + ); +}; +export default App; +``` + +::: + +### Custom color + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell, ConfigProvider } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + + + + + ); +}; +export default App; +``` + +::: + +### Custom size + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell, ConfigProvider } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + + + + + ); +}; +export default App; +``` + +::: + +### With text + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react'; + +const App = () => { + return ( + + loading + + ); +}; +export default App; +``` + +::: + +### With text(direction="vertical") + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react'; + +const App = () => { + return ( + + loading + + ); +}; +export default App; +``` + +::: + +### Custom text color and size + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell, ConfigProvider } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + 加载中 + + + 加载中 + + + ); +}; +export default App; +``` + +::: + +### Custom icon + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react'; +import { Category } from '@nutui/icons-react' + +const App = () => { + return ( + + }/> + + ); +}; +export default App; +``` + +::: + +### With overlay + +:::demo + +```jsx +import React, { useState } from 'react' +import { Loading, Cell, Button, Overlay } from '@nutui/nutui-react'; + +const App = () => { + + const [visible, setVisible] = useState(false) + + const WrapperStyle = { + display: 'flex', + height: '100%', + alignItems: 'center', + justifyContent: 'center' + } + + function showOverlay() { + setVisible(true); + setTimeout(() => { + setVisible(false); + }, 2000) + } + + return ( + <> + + + + +
+ loading +
+ + + ); +}; +export default App; +``` + +::: + +## API + +### Props + +| Name | Description | type | default | +|--------------|----------------------------------|--------|------------------| +| type | loading icon type | circular \| spinner | `circular` | +| direction | direction of icon and text | horizontal \| vertical | `horizontal` | +| icon | custom loading icon | JSX.Element | `-` diff --git a/src/packages/loading/doc.md b/src/packages/loading/doc.md new file mode 100644 index 0000000000..6d129dceb7 --- /dev/null +++ b/src/packages/loading/doc.md @@ -0,0 +1,224 @@ +# Loading 加载中 + +### 介绍 + +加载图标，用于显示正在加载中的状态 + +### 安装 + +```tsx +import { Loading } from '@nutui/nutui-react'; +``` + +## 代码演示 + +### 基础用法 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + ); +}; +export default App; +``` + +::: + +### 自定义颜色 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell, ConfigProvider } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + + + + + ); +}; +export default App; +``` + +::: + +### 自定义大小 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell, ConfigProvider } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + + + + + ); +}; +export default App; +``` + +::: + +### 带文字 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react'; + +const App = () => { + return ( + + 加载中 + + ); +}; +export default App; +``` + +::: + +### 带文字(竖向排列) + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react'; + +const App = () => { + return ( + + 加载中 + + ); +}; +export default App; +``` + +::: + +### 自定义文字颜色和大小 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell, ConfigProvider } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + 加载中 + + + 加载中 + + + ); +}; +export default App; +``` + +::: + +### 自定义图标 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react'; +import { Category } from '@nutui/icons-react' + +const App = () => { + return ( + + }/> + + ); +}; +export default App; +``` + +::: + +### 与遮罩层结合 + +:::demo + +```jsx +import React, { useState } from 'react' +import { Loading, Cell, Button, Overlay } from '@nutui/nutui-react'; + +const App = () => { + + const [visible, setVisible] = useState(false) + + const WrapperStyle = { + display: 'flex', + height: '100%', + alignItems: 'center', + justifyContent: 'center' + } + + function showOverlay() { + setVisible(true); + setTimeout(()=>{ + setVisible(false); + }, 2000) + } + + return ( + <> + + + + +
+ 加载中 +
+ + + ); +}; +export default App; +``` + +::: + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | +|--------------|----------------------------------|--------|------------------| +| type | loading图标的样式 | circular \| spinner | `circular` | +| direction | loading图标和文字的排列方式 | horizontal \| vertical | `horizontal` | +| icon | 自定义loading的图标 | JSX.Element | `-` diff --git a/src/packages/loading/doc.taro.md b/src/packages/loading/doc.taro.md new file mode 100644 index 0000000000..6b4704fa69 --- /dev/null +++ b/src/packages/loading/doc.taro.md @@ -0,0 +1,224 @@ +# Loading 加载中 + +### 介绍 + +加载图标，用于显示正在加载中的状态 + +### 安装 + +```tsx +import { Loading } from '@nutui/nutui-react-taro'; +``` + +## 代码演示 + +### 基础用法 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react-taro'; + +const App = () => { + return ( + + + + + ); +}; +export default App; +``` + +::: + +### 自定义颜色 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell, ConfigProvider } from '@nutui/nutui-react-taro'; + +const App = () => { + return ( + + + + + + + + + ); +}; +export default App; +``` + +::: + +### 自定义大小 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell, ConfigProvider } from '@nutui/nutui-react-taro'; + +const App = () => { + return ( + + + + + + + + + ); +}; +export default App; +``` + +::: + +### 带文字 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react-taro'; + +const App = () => { + return ( + + 加载中 + + ); +}; +export default App; +``` + +::: + +### 带文字(竖向排列) + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react-taro'; + +const App = () => { + return ( + + 加载中 + + ); +}; +export default App; +``` + +::: + +### 自定义文字颜色和大小 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell, ConfigProvider } from '@nutui/nutui-react-taro'; + +const App = () => { + return ( + + + 加载中 + + + 加载中 + + + ); +}; +export default App; +``` + +::: + +### 自定义图标 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react-taro'; +import { Category } from '@nutui/icons-react' + +const App = () => { + return ( + + }/> + + ); +}; +export default App; +``` + +::: + +### 与遮罩层结合 + +:::demo + +```jsx +import React, { useState } from 'react' +import { Loading, Cell, Button, Overlay } from '@nutui/nutui-react-taro'; + +const App = () => { + + const [visible, setVisible] = useState(false) + + const WrapperStyle = { + display: 'flex', + height: '100%', + alignItems: 'center', + justifyContent: 'center' + } + + function showOverlay() { + setVisible(true); + setTimeout(()=>{ + setVisible(false); + }, 2000) + } + + return ( + <> + + + + +
+ 加载中 +
+ + + ); +}; +export default App; +``` + +::: + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | +|--------------|----------------------------------|--------|------------------| +| type | loading图标的样式 | circular \| spinner | `circular` | +| direction | loading图标和文字的排列方式 | horizontal \| vertical | `horizontal` | +| icon | 自定义loading的图标 | JSX.Element | `-` diff --git a/src/packages/loading/doc.zh-TW.md b/src/packages/loading/doc.zh-TW.md new file mode 100644 index 0000000000..3948738726 --- /dev/null +++ b/src/packages/loading/doc.zh-TW.md @@ -0,0 +1,224 @@ +# Loading 加載中 + +### 介紹 + +加載圖標，用於顯示正在加載中的狀態 + +### 安裝 + +```tsx +import { Loading } from '@nutui/nutui-react'; +``` + +## 代碼演示 + +### 基礎用法 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + ); +}; +export default App; +``` + +::: + +### 自定義顏色 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell, ConfigProvider } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + + + + + ); +}; +export default App; +``` + +::: + +### 自定義大小 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell, ConfigProvider } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + + + + + ); +}; +export default App; +``` + +::: + +### 帶文字 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react'; + +const App = () => { + return ( + + 加載中 + + ); +}; +export default App; +``` + +::: + +### 帶文字(豎向排列) + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react'; + +const App = () => { + return ( + + 加載中 + + ); +}; +export default App; +``` + +::: + +### 自定義文字顏色和大小 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell, ConfigProvider } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + 加载中 + + + 加载中 + + + ); +}; +export default App; +``` + +::: + +### 自定義圖標 + +:::demo + +```jsx +import React from "react"; +import { Loading, Cell } from '@nutui/nutui-react'; +import { Category } from '@nutui/icons-react' + +const App = () => { + return ( + + }/> + + ); +}; +export default App; +``` + +::: + +### 與遮罩層結合 + +:::demo + +```jsx +import React, { useState } from 'react' +import { Loading, Cell, Button, Overlay } from '@nutui/nutui-react'; + +const App = () => { + + const [visible, setVisible] = useState(false) + + const WrapperStyle = { + display: 'flex', + height: '100%', + alignItems: 'center', + justifyContent: 'center' + } + + function showOverlay() { + setVisible(true); + setTimeout(()=>{ + setVisible(false); + }, 2000) + } + + return ( + <> + + + + +
+ 加載中 +
+ + + ); +}; +export default App; +``` + +::: + +## API + +### Props + +| 參數 | 說明 | 類型 | 默認值 | +|--------------|----------------------------------|--------|------------------| +| type | loading圖標的樣式 | circular \| spinner | `circular` | +| direction | loading圖標和文字的排列方式 | horizontal \| vertical | `horizontal` | +| icon | 自定義loading的圖標 | JSX.Element | `-` diff --git a/src/packages/loading/index.taro.ts b/src/packages/loading/index.taro.ts new file mode 100644 index 0000000000..01d49f91dc --- /dev/null +++ b/src/packages/loading/index.taro.ts @@ -0,0 +1,4 @@ +import { Loading } from './loading.taro' + +export type { LoadingProps, LoadingType, DirectionType } from './loading.taro' +export default Loading diff --git a/src/packages/loading/index.ts b/src/packages/loading/index.ts new file mode 100644 index 0000000000..65d01505b3 --- /dev/null +++ b/src/packages/loading/index.ts @@ -0,0 +1,4 @@ +import { Loading } from './loading' + +export type { LoadingProps, LoadingType, DirectionType } from './loading' +export default Loading diff --git a/src/packages/loading/loading.scss b/src/packages/loading/loading.scss new file mode 100644 index 0000000000..140a717d46 --- /dev/null +++ b/src/packages/loading/loading.scss @@ -0,0 +1,34 @@ +.nut-loading { + display: inline-flex; + flex-direction: row; + align-items: center; + justify-content: center; + &.nut-loading-vertical { + flex-direction: column; + } + .nut-loading-icon-box { + display: inline-block; + font-size: 0; + line-height: 0; + animation: nut-loading-rotation 1s infinite linear; + .nut-loading-icon { + color: $loading-icon-color; + width: $loading-icon-size; + height: $loading-icon-size; + font-size: $loading-icon-size; + } + } + .nut-loading-text { + padding: 4px; + color: $loading-text-color; + font-size: $loading-text-size; + } +} +@keyframes nut-loading-rotation { + 0% { + -webkit-transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + } +} diff --git a/src/packages/loading/loading.taro.tsx b/src/packages/loading/loading.taro.tsx new file mode 100644 index 0000000000..58cc38ffc9 --- /dev/null +++ b/src/packages/loading/loading.taro.tsx @@ -0,0 +1,64 @@ +import React, { FunctionComponent, ReactNode } from 'react' +import classNames from 'classnames' +import { + Loading as IconLoading, + Loading1 as IconLoading1, +} from '@nutui/icons-react-taro' +import { BasicComponent, ComponentDefaults } from '@/utils/typings' + +export type LoadingType = 'spinner' | 'circular' +export type DirectionType = 'horizontal' | 'vertical' + +export interface LoadingProps extends BasicComponent { + // loading的类型 + type: LoadingType + // loading图标和文字的排列方式 + direction: DirectionType + // 自定义图标 + icon?: ReactNode +} + +// 方便以后扩展设置为键值对形式 +const loadingMap = { + circular: IconLoading1, + spinner: IconLoading, +} + +const defaultProps = { + ...ComponentDefaults, + // 对比一下,个人感觉还是Loading1比较好看一些,所以用它作为了默认的loading图标 + type: 'circular', + direction: 'horizontal', +} as LoadingProps +export const Loading: FunctionComponent< + Partial & React.HTMLAttributes +> = (props) => { + const { className, style, children, direction, icon, ...rest } = { + ...defaultProps, + ...props, + } + + // 样式class前缀 + const classPrefix = 'nut-loading' + + const CurLoadingIcon = loadingMap[rest.type] || IconLoading1 + + return ( +
+
+ {icon || } +
+ {children ?
{children}
: ''} +
+ ) +} + +Loading.defaultProps = defaultProps +Loading.displayName = 'NutLoading' diff --git a/src/packages/loading/loading.tsx b/src/packages/loading/loading.tsx new file mode 100644 index 0000000000..1c27531c8c --- /dev/null +++ b/src/packages/loading/loading.tsx @@ -0,0 +1,64 @@ +import React, { FunctionComponent, ReactNode } from 'react' +import classNames from 'classnames' +import { + Loading as IconLoading, + Loading1 as IconLoading1, +} from '@nutui/icons-react' +import { BasicComponent, ComponentDefaults } from '@/utils/typings' + +export type LoadingType = 'spinner' | 'circular' +export type DirectionType = 'horizontal' | 'vertical' + +export interface LoadingProps extends BasicComponent { + // loading的类型 + type: LoadingType + // loading图标和文字的排列方式 + direction: DirectionType + // 自定义图标 + icon?: ReactNode +} + +// 方便以后扩展设置为键值对形式 +const loadingMap = { + circular: IconLoading1, + spinner: IconLoading, +} + +const defaultProps = { + ...ComponentDefaults, + // 对比一下,个人感觉还是Loading1比较好看一些,所以用它作为了默认的loading图标 + type: 'circular', + direction: 'horizontal', +} as LoadingProps +export const Loading: FunctionComponent< + Partial & React.HTMLAttributes +> = (props) => { + const { className, style, children, direction, icon, ...rest } = { + ...defaultProps, + ...props, + } + + // 样式class前缀 + const classPrefix = 'nut-loading' + + const CurLoadingIcon = loadingMap[rest.type] || IconLoading1 + + return ( +
+
+ {icon || } +
+ {children ?
{children}
: ''} +
+ ) +} + +Loading.defaultProps = defaultProps +Loading.displayName = 'NutLoading' diff --git a/src/packages/menu/doc.en-US.md b/src/packages/menu/doc.en-US.md index ab462386dc..c0d45b6ba8 100644 --- a/src/packages/menu/doc.en-US.md +++ b/src/packages/menu/doc.en-US.md @@ -318,7 +318,7 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | | \--nutui-menu-bar-line-height | The height of the menu title bar | `48px` | -| \--nutui-menu-item-font-size | The font size of the title | `$font-text` | +| \--nutui-menu-item-font-size | The font size of the title | `$font-size` | | \--nutui-menu-item-text-color | Title color | `$color-title` | | \--nutui-menu-item-active-text-color | Open state color | `$color-primary` | | \--nutui-menu-bar-opened-z-index | z-index of opened state | `2001` | diff --git a/src/packages/menu/doc.md b/src/packages/menu/doc.md index 2904e36a14..b5d14bd77e 100644 --- a/src/packages/menu/doc.md +++ b/src/packages/menu/doc.md @@ -307,7 +307,7 @@ export default App | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-menu-bar-line-height | menu标题栏的行高 | `48px` | -| \--nutui-menu-item-font-size | 标题的字号 | `$font-text` | +| \--nutui-menu-item-font-size | 标题的字号 | `$font-size` | | \--nutui-menu-item-text-color | 标题的颜色 | `$color-title` | | \--nutui-menu-item-active-text-color | 打开状态的颜色 | `$color-primary` | | \--nutui-menu-bar-opened-z-index | 打开状态的 z-index | `2001` | diff --git a/src/packages/menu/doc.taro.md b/src/packages/menu/doc.taro.md index 0757aa5995..a9cc9bbcb3 100644 --- a/src/packages/menu/doc.taro.md +++ b/src/packages/menu/doc.taro.md @@ -308,7 +308,7 @@ export default App | --- | --- | --- | | \--nutui-menu-bar-line-height | menu标题栏的行高 | `48px` | | \--nutui-menu-placeholder-top | 透明遮罩层的 top 值 | `-48px` | -| \--nutui-menu-item-font-size | 标题的字号 | `$font-text` | +| \--nutui-menu-item-font-size | 标题的字号 | `$font-size` | | \--nutui-menu-item-text-color | 标题的颜色 | `$color-title` | | \--nutui-menu-item-active-text-color | 打开状态的颜色 | `$color-primary` | | \--nutui-menu-bar-opened-z-index | 打开状态的 z-index | `2001` | diff --git a/src/packages/menu/doc.zh-TW.md b/src/packages/menu/doc.zh-TW.md index eb415fcbd8..9837f09a41 100644 --- a/src/packages/menu/doc.zh-TW.md +++ b/src/packages/menu/doc.zh-TW.md @@ -307,7 +307,7 @@ export default App | 名稱 | 說明 | 默認值 | | --- | --- | --- | | \--nutui-menu-bar-line-height | menu標題欄的行高 | `48px` | -| \--nutui-menu-item-font-size | 標題的字號 | `$font-text` | +| \--nutui-menu-item-font-size | 標題的字號 | `$font-size` | | \--nutui-menu-item-text-color | 標題的顏色 | `$color-title` | | \--nutui-menu-item-active-text-color | 打開狀態的顏色 | `$color-primary` | | \--nutui-menu-bar-opened-z-index | 打開狀態的 z-index | `2001` | diff --git a/src/packages/menuitem/menuitem.scss b/src/packages/menuitem/menuitem.scss index 2013ecd02e..cf87cd7b38 100644 --- a/src/packages/menuitem/menuitem.scss +++ b/src/packages/menuitem/menuitem.scss @@ -17,7 +17,7 @@ .nut-menu-item__option { color: $color-title; - font-size: $font-text; + font-size: $font-size; padding-top: $menu-item-option-padding-top; padding-bottom: $menu-item-option-padding-bottom; display: flex; diff --git a/src/packages/navbar/doc.en-US.md b/src/packages/navbar/doc.en-US.md index f5e533aa2f..7adff9a678 100644 --- a/src/packages/navbar/doc.en-US.md +++ b/src/packages/navbar/doc.en-US.md @@ -182,7 +182,7 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-navbar-background | The navbar's background color | `$white` | | \--nutui-navbar-box-shadow | Shadow of navbar | `0px 1px 7px 0px rgba(237, 238, 241, 1)` | | \--nutui-navbar-color | navbar font color | `$color-text` | -| \--nutui-navbar-font-size | navbar font size | `$font-text` | -| \--nutui-navbar-title-font-size | The font size of the navbar's title | `$font-text` | +| \--nutui-navbar-font-size | navbar font size | `$font-size` | +| \--nutui-navbar-title-font-size | The font size of the navbar's title | `$font-size` | | \--nutui-navbar-title-font-weight | The font weight of the navbar's title | `0` | | \--nutui-navbar-title-font-color | The font color of the navbar's title | `$color-title` | \ No newline at end of file diff --git a/src/packages/navbar/doc.md b/src/packages/navbar/doc.md index 14b43b6338..fa00fab892 100644 --- a/src/packages/navbar/doc.md +++ b/src/packages/navbar/doc.md @@ -182,7 +182,7 @@ export default App; | \--nutui-navbar-background | 头部导航的背景颜色 | `$white` | | \--nutui-navbar-box-shadow | 头部导航的阴影 | `0px 1px 7px 0px rgba(237, 238, 241, 1)` | | \--nutui-navbar-color | 头部导航的字体颜色 | `$color-text` | -| \--nutui-navbar-font-size | 头部导航的字体大小 | `$font-text` | -| \--nutui-navbar-title-font-size | 头部导航标题的字体大小 | `$font-text` | +| \--nutui-navbar-font-size | 头部导航的字体大小 | `$font-size` | +| \--nutui-navbar-title-font-size | 头部导航标题的字体大小 | `$font-size` | | \--nutui-navbar-title-font-weight | 头部导航标题的字体粗细 | `0` | | \--nutui-navbar-title-font-color | 头部导航标题的字体颜色 | `$color-title` | \ No newline at end of file diff --git a/src/packages/navbar/doc.taro.md b/src/packages/navbar/doc.taro.md index 045db9eea8..c0a39e939e 100644 --- a/src/packages/navbar/doc.taro.md +++ b/src/packages/navbar/doc.taro.md @@ -186,7 +186,7 @@ export default App; | \--nutui-navbar-background | 头部导航的背景颜色 | `$white` | | \--nutui-navbar-box-shadow | 头部导航的阴影 | `0px 1px 7px 0px rgba(237, 238, 241, 1)` | | \--nutui-navbar-color | 头部导航的字体颜色 | `$color-text` | -| \--nutui-navbar-font-size | 头部导航的字体大小 | `$font-text` | -| \--nutui-navbar-title-font-size | 头部导航标题的字体大小 | `$font-text` | +| \--nutui-navbar-font-size | 头部导航的字体大小 | `$font-size` | +| \--nutui-navbar-title-font-size | 头部导航标题的字体大小 | `$font-size` | | \--nutui-navbar-title-font-weight | 头部导航标题的字体粗细 | `0` | | \--nutui-navbar-title-font-color | 头部导航标题的字体颜色 | `$color-title` | \ No newline at end of file diff --git a/src/packages/navbar/doc.zh-TW.md b/src/packages/navbar/doc.zh-TW.md index 58181f883d..58afe9a802 100644 --- a/src/packages/navbar/doc.zh-TW.md +++ b/src/packages/navbar/doc.zh-TW.md @@ -182,7 +182,7 @@ export default App; | \--nutui-navbar-background | 頭部導航的背景顏色 | `$white` | | \--nutui-navbar-box-shadow | 頭部導航的陰影 | `0px 1px 7px 0px rgba(237, 238, 241, 1)` | | \--nutui-navbar-color | 頭部導航的字體顏色 | `$color-text` | -| \--nutui-navbar-font-size | 頭部導航的字體大小 | `$font-text` | -| \--nutui-navbar-title-font-size | 頭部導航標題的字體大小 | `$font-text` | +| \--nutui-navbar-font-size | 頭部導航的字體大小 | `$font-size` | +| \--nutui-navbar-title-font-size | 頭部導航標題的字體大小 | `$font-size` | | \--nutui-navbar-title-font-weight | 頭部導航標題的字體粗細 | `0` | | \--nutui-navbar-title-font-color | 頭部導航標題的字體顏色 | `$color-title` | \ No newline at end of file diff --git a/src/packages/notify/demo.taro.tsx b/src/packages/notify/demo.taro.tsx index 60455129ac..88c2d75996 100644 --- a/src/packages/notify/demo.taro.tsx +++ b/src/packages/notify/demo.taro.tsx @@ -3,20 +3,13 @@ import Taro from '@tarojs/taro' import { useTranslate } from '@/sites/assets/locale/taro' import { Notify, Cell } from '@/packages/nutui.react.taro' import Header from '@/sites/components/header' +import { NotifyPosition, NotifyType } from '@/packages/notify/notify.taro' -interface T { - basic: string - numbers: string - autoHeight: string - readOnly: string - readOnlyState: string - disabled: string - disabledState: string -} const NotifyDemo = () => { const [translated] = useTranslate({ 'zh-CN': { basic: '基础用法', + func: '函数调用', t1: '通知类型', t2: '自定义样式', t3: '自定义时长为5秒', @@ -30,6 +23,7 @@ const NotifyDemo = () => { }, 'en-US': { basic: 'Basic Usage', + func: 'function call', t1: 'Notify Type', t2: 'Custom Style', t3: 'Custom Duration 5s', @@ -64,7 +58,6 @@ const NotifyDemo = () => { }) SetStates(change) } - return ( <>
@@ -74,9 +67,9 @@ const NotifyDemo = () => { > { SetShowNotify(false) }} @@ -89,37 +82,47 @@ const NotifyDemo = () => {

{translated.basic}

{ + onClick={() => { changeNotify(translated.basic) SetShowNotify(true) }} /> +

{translated.func}

+ + {translated.func} + + { + Notify.open('test') + }} + />

{translated.t1}

{ + onClick={() => { changeNotify(translated.primaryNotify, 'primary') SetShowNotify(true) }} /> { + onClick={() => { changeNotify(translated.successNotify, 'success') SetShowNotify(true) }} /> { + onClick={() => { changeNotify(translated.errorNotify, 'danger') SetShowNotify(true) }} /> { + onClick={() => { changeNotify(translated.warningNotify, 'warning') SetShowNotify(true) }} @@ -141,21 +144,21 @@ const NotifyDemo = () => { { + onClick={() => { SetCustomShow(true) }} />

{translated.t3}

{ + onClick={() => { changeNotify(translated.t3, 'base', 5000) SetShowNotify(true) }} /> { + onClick={() => { changeNotify(translated.cusPostion, 'base', 2000, 'bottom') SetShowNotify(true) }} diff --git a/src/packages/notify/doc.en-US.md b/src/packages/notify/doc.en-US.md index 8cd2982db8..3b80214d7c 100644 --- a/src/packages/notify/doc.en-US.md +++ b/src/packages/notify/doc.en-US.md @@ -197,7 +197,7 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-notify-font-size | The font size of notify | `14px` | | \--nutui-notify-line-height | The row height of notify | `auto` | | \--nutui-notify-text-color | The text color of notify | `$white` | -| \--nutui-notify-base-background-color | The background color of notify | `linear-gradient(135deg, $color-primary 0%, $color-primary-end 100%)` | +| \--nutui-notify-base-background-color | The background color of notify | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%)` | | \--nutui-notify-primary-background-color | The main notify background color | `linear-gradient(315deg,rgba(73, 143, 242, 1) 0%,rgba(73, 101, 242,1) 100%)` | | \--nutui-notify-success-background-color | Background color of successful notify | `linear-gradient(135deg,rgba(38, 191, 38, 1) 0%,rgba(39, 197, 48, 1) 45%,rgba(40, 207, 63, 1) 83%,rgba(41, 212, 70, 1) 100%)` | | \--nutui-notify-danger-background-color | Danger notify background color | `rgba(250, 50, 25, 1)` | diff --git a/src/packages/notify/doc.md b/src/packages/notify/doc.md index 73e7271e1e..c4d6f74663 100644 --- a/src/packages/notify/doc.md +++ b/src/packages/notify/doc.md @@ -196,7 +196,7 @@ export default App | \--nutui-notify-font-size | 消息通知的字体大小 | `14px` | | \--nutui-notify-line-height | 消息通知的行高 | `auto` | | \--nutui-notify-text-color | 消息通知的文本颜色 | `$white` | -| \--nutui-notify-base-background-color | 消息通知的背景颜色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-end 100%)` | +| \--nutui-notify-base-background-color | 消息通知的背景颜色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%)` | | \--nutui-notify-primary-background-color | 主要通知的背景颜色 | `linear-gradient(315deg,rgba(73, 143, 242, 1) 0%,rgba(73, 101, 242,1) 100%)` | | \--nutui-notify-success-background-color | 成功通知的背景颜色 | `linear-gradient(135deg,rgba(38, 191, 38, 1) 0%,rgba(39, 197, 48, 1) 45%,rgba(40, 207, 63, 1) 83%,rgba(41, 212, 70, 1) 100%)` | | \--nutui-notify-danger-background-color | 危险通知的背景颜色 | `rgba(250, 50, 25, 1)` | diff --git a/src/packages/notify/doc.taro.md b/src/packages/notify/doc.taro.md index 4a0d9acbc8..5f15a7c09d 100644 --- a/src/packages/notify/doc.taro.md +++ b/src/packages/notify/doc.taro.md @@ -57,6 +57,46 @@ export default App ::: +### 函数调用 +```tsx +import React, {useState} from "react"; +import { Notify, Cell } from '@nutui/nutui-react-taro'; + +const App = () => { + const [showNotify, SetShowNotify] = useState(false) + const [states, SetStates] = useState({ + message: '', + type: 'danger', + }) + const changeNotify = (message: string, type?: string) => { + const change = Object.assign(states, {message,type}) + SetStates(change) + } + return ( + <> + { + SetShowNotify(false) + }} + onClick={() => { + console.log('click') + }} + >{states.message} + { + Notify.open('test') + }} + /> + + ) +} +export default App +``` + ### 通知类型 :::demo @@ -233,7 +273,7 @@ export default App | \--nutui-notify-font-size | 消息通知的字体大小 | `14px` | | \--nutui-notify-line-height | 消息通知的行高 | `auto` | | \--nutui-notify-text-color | 消息通知的文本颜色 | `$white` | -| \--nutui-notify-base-background-color | 消息通知的背景颜色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-end 100%)` | +| \--nutui-notify-base-background-color | 消息通知的背景颜色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%)` | | \--nutui-notify-primary-background-color | 主要通知的背景颜色 | `linear-gradient(315deg,rgba(73, 143, 242, 1) 0%,rgba(73, 101, 242,1) 100%)` | | \--nutui-notify-success-background-color | 成功通知的背景颜色 | `linear-gradient(135deg,rgba(38, 191, 38, 1) 0%,rgba(39, 197, 48, 1) 45%,rgba(40, 207, 63, 1) 83%,rgba(41, 212, 70, 1) 100%)` | | \--nutui-notify-danger-background-color | 危险通知的背景颜色 | `rgba(250, 50, 25, 1)` | diff --git a/src/packages/notify/doc.zh-TW.md b/src/packages/notify/doc.zh-TW.md index 5971461072..2ed94cd50e 100644 --- a/src/packages/notify/doc.zh-TW.md +++ b/src/packages/notify/doc.zh-TW.md @@ -196,7 +196,7 @@ export default App | \--nutui-notify-font-size | 消息通知的字體大小 | `14px` | | \--nutui-notify-line-height | 消息通知的行高 | `auto` | | \--nutui-notify-text-color | 消息通知的文本顏色 | `$white` | -| \--nutui-notify-base-background-color | 消息通知的背景顏色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-end 100%)` | +| \--nutui-notify-base-background-color | 消息通知的背景顏色 | `linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%)` | | \--nutui-notify-primary-background-color | 主要通知的背景顏色 | `linear-gradient(315deg,rgba(73, 143, 242, 1) 0%,rgba(73, 101, 242,1) 100%)` | | \--nutui-notify-success-background-color | 成功通知的背景顏色 | `linear-gradient(135deg,rgba(38, 191, 38, 1) 0%,rgba(39, 197, 48, 1) 45%,rgba(40, 207, 63, 1) 83%,rgba(41, 212, 70, 1) 100%)` | | \--nutui-notify-danger-background-color | 危險通知的背景顏色 | `rgba(250, 50, 25, 1)` | diff --git a/src/packages/notify/index.taro.ts b/src/packages/notify/index.taro.ts index e792cd53dc..10ce0e26a3 100644 --- a/src/packages/notify/index.taro.ts +++ b/src/packages/notify/index.taro.ts @@ -1,4 +1,5 @@ import { Notify } from './notify.taro' export type { NotifyProps } from './notify.taro' + export default Notify diff --git a/src/packages/notify/notify.taro.tsx b/src/packages/notify/notify.taro.tsx index bca019754f..dce0a398ba 100644 --- a/src/packages/notify/notify.taro.tsx +++ b/src/packages/notify/notify.taro.tsx @@ -1,13 +1,21 @@ -import React, { FunctionComponent, useState, useEffect } from 'react' +import React, { useState, useEffect, FunctionComponent } from 'react' import classNames from 'classnames' import { CSSTransition } from 'react-transition-group' import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { + customEvents, + useCustomEvent, + useCustomEventsPath, +} from '@/utils/use-custom-event' + +export type NotifyPosition = 'top' | 'bottom' +export type NotifyType = 'primary' | 'success' | 'danger' | 'waring' export interface NotifyProps extends BasicComponent { id?: string duration: number - type: string - position: string + type: NotifyType + position: NotifyPosition visible: boolean onClose: () => void onClick: () => void @@ -22,13 +30,14 @@ const defaultProps = { visible: false, onClose: () => {}, onClick: () => {}, -} as unknown as NotifyProps +} as NotifyProps const classPrefix = 'nut-notify' -export const Notify: FunctionComponent< - Partial & React.HTMLAttributes -> = (props) => { +export const Notify: FunctionComponent> & { + open: typeof open + close: typeof close +} = (props: Partial) => { const { id, children, @@ -40,14 +49,16 @@ export const Notify: FunctionComponent< duration, onClose, onClick, - ...rest } = { ...defaultProps, ...props } + useCustomEvent(id as string, (status: boolean) => { + status ? show() : hide() + }) + let timer: number | null - const [showNotify, SetShow] = useState(false) + const [showNotify, setShowNotify] = useState(false) useEffect(() => { if (visible) { - SetShow(true) show() } else { hide() @@ -59,6 +70,7 @@ export const Notify: FunctionComponent< } const show = () => { + setShowNotify(true) clearTimer() if (duration) { timer = window.setTimeout(() => { @@ -73,11 +85,7 @@ export const Notify: FunctionComponent< } } const hide = () => { - SetShow(false) - if (id) { - const element = document.getElementById(id) - element && element.parentNode && element.parentNode.removeChild(element) - } + setShowNotify(false) onClose() } @@ -110,5 +118,19 @@ export const Notify: FunctionComponent< ) } +export function open(selector: string) { + // eslint-disable-next-line react-hooks/rules-of-hooks + const path = useCustomEventsPath(selector) + customEvents.trigger(path, true) +} + +export function close(selector: string) { + // eslint-disable-next-line react-hooks/rules-of-hooks + const path = useCustomEventsPath(selector) + customEvents.trigger(path, false) +} + Notify.defaultProps = defaultProps Notify.displayName = 'NutNotify' +Notify.open = open +Notify.close = close diff --git a/src/packages/numberkeyboard/doc.en-US.md b/src/packages/numberkeyboard/doc.en-US.md index e5c1e03ae5..bdd3eedd95 100644 --- a/src/packages/numberkeyboard/doc.en-US.md +++ b/src/packages/numberkeyboard/doc.en-US.md @@ -253,7 +253,7 @@ export default App; | --- | --- | --- | --- | | visible | Whether to show keyboard | `boolean` | `false` | | title | Keyboard title | `ReactNode` | `-` | -| type | Keyboard type, default/rightColumn | `string` | `default` | +| type | Keyboard type, default/rightColumn | `'default' \| 'rightColumn'` | `default` | | random | Whether to shuffle the order of keys | `boolean` | `false` | | custom | Content of bottom left key, Array form supports adding up to two | `string[]` | `-` | | confirmText | Custom done button text,Such as "pay", "next", "submit" | `string` | `done` | diff --git a/src/packages/numberkeyboard/doc.md b/src/packages/numberkeyboard/doc.md index e665e3095b..1c2cbe4f78 100644 --- a/src/packages/numberkeyboard/doc.md +++ b/src/packages/numberkeyboard/doc.md @@ -253,7 +253,7 @@ export default App; | --- | --- | --- | --- | | visible | 是否显示键盘 | `boolean` | `false` | | title | 键盘标题 | `ReactNode` | `-` | -| type | 键盘模式, default：默认样式 rightColumn：带右侧栏 | `string` | `default` | +| type | 键盘模式, default：默认样式 rightColumn：带右侧栏 | `'default' \| 'rightColumn'` | `default` | | random | 随机数 | `boolean` | `false` | | custom | 自定义键盘额外的键, 数组形式最多支持添加 2 个, 超出默认取前 2 项 | `string[]` | `-` | | confirmText | 自定义完成按钮文字，如"支付"，"下一步"，"提交"等 | `string` | `完成` | diff --git a/src/packages/numberkeyboard/doc.taro.md b/src/packages/numberkeyboard/doc.taro.md index 70c601c545..981fdfced3 100644 --- a/src/packages/numberkeyboard/doc.taro.md +++ b/src/packages/numberkeyboard/doc.taro.md @@ -253,7 +253,7 @@ export default App; | --- | --- | --- | --- | | visible | 是否显示键盘 | `boolean` | `false` | | title | 键盘标题 | `ReactNode` | `-` | -| type | 键盘模式, default：默认样式 rightColumn：带右侧栏 | `string` | `default` | +| type | 键盘模式, default：默认样式 rightColumn：带右侧栏 | `'default' \| 'rightColumn'` | `default` | | random | 随机数 | `boolean` | `false` | | custom | 自定义键盘额外的键, 数组形式最多支持添加 2 个, 超出默认取前 2 项 | `string[]` | `-` | | confirmText | 自定义完成按钮文字，如"支付"，"下一步"，"提交"等 | `string` | `完成` | diff --git a/src/packages/numberkeyboard/doc.zh-TW.md b/src/packages/numberkeyboard/doc.zh-TW.md index 4d14554ccf..ce392d5a35 100644 --- a/src/packages/numberkeyboard/doc.zh-TW.md +++ b/src/packages/numberkeyboard/doc.zh-TW.md @@ -253,7 +253,7 @@ export default App; | --- | --- | --- | --- | | visible | 是否顯示鍵盤 | `boolean` | `false` | | title | 鍵盤標題 | `ReactNode` | `-` | -| type | 鍵盤模式, default：默認樣式 rightColumn：帶右側欄 | `string` | `default` | +| type | 鍵盤模式, default：默認樣式 rightColumn：帶右側欄 | `'default' \| 'rightColumn'` | `default` | | random | 隨機數 | `boolean` | `false` | | custom | 自定義鍵盤額外的鍵, 數組形式最多支持添加 2 個, 超出默認取前 2 項 | `string[]` | `-` | | confirmText | 自定義完成按鈕文字，如"支付"，"下一步"，"提交"等 | `string` | `完成` | diff --git a/src/packages/numberkeyboard/numberkeyboard.scss b/src/packages/numberkeyboard/numberkeyboard.scss index 0a693a8ef0..38a7bf391f 100644 --- a/src/packages/numberkeyboard/numberkeyboard.scss +++ b/src/packages/numberkeyboard/numberkeyboard.scss @@ -52,7 +52,7 @@ flex-basis: 33%; box-sizing: border-box; padding: 0 6px 6px 0; - background-color: $color-card-background-wrapper; + background-color: $color-background-sunken; .key { display: flex; diff --git a/src/packages/numberkeyboard/numberkeyboard.taro.tsx b/src/packages/numberkeyboard/numberkeyboard.taro.tsx index 89175a0d44..752db2e8df 100644 --- a/src/packages/numberkeyboard/numberkeyboard.taro.tsx +++ b/src/packages/numberkeyboard/numberkeyboard.taro.tsx @@ -151,7 +151,7 @@ export const NumberKeyboard: FunctionComponent< {type === 'default' && ( {locale.done} diff --git a/src/packages/numberkeyboard/numberkeyboard.tsx b/src/packages/numberkeyboard/numberkeyboard.tsx index 0d5b1e1132..77fc80d6ac 100644 --- a/src/packages/numberkeyboard/numberkeyboard.tsx +++ b/src/packages/numberkeyboard/numberkeyboard.tsx @@ -155,7 +155,7 @@ export const NumberKeyboard: FunctionComponent< {type === 'default' && ( {locale.done} diff --git a/src/packages/pagination/doc.en-US.md b/src/packages/pagination/doc.en-US.md index 05686cf9ed..3ab78b11ec 100644 --- a/src/packages/pagination/doc.en-US.md +++ b/src/packages/pagination/doc.en-US.md @@ -196,10 +196,10 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | | \--nutui-pagination-color | font color | `$color-primary` | -| \--nutui-pagination-font-size | font size | `$font-text` | -| \--nutui-pagination-item-border-color | border color | `$color-divider` | -| \--nutui-pagination-disable-color | disable color | `$color-disabled` | -| \--nutui-pagination-disable-background-color | disable background color | `$color-disabled` | +| \--nutui-pagination-font-size | font size | `$font-size` | +| \--nutui-pagination-item-border-color | border color | `$color-border` | +| \--nutui-pagination-disable-color | disable color | `$color-text-disable` | +| \--nutui-pagination-disable-background-color | disable background color | `$color-text-disable` | | \--nutui-pagination-item-border-width | border width | `1px` | | \--nutui-pagination-item-border-radius | border radius | `2px` | | \--nutui-pagination-prev-next-padding | padding | `0 11px` | \ No newline at end of file diff --git a/src/packages/pagination/doc.md b/src/packages/pagination/doc.md index a5f66822e9..644e1c99de 100644 --- a/src/packages/pagination/doc.md +++ b/src/packages/pagination/doc.md @@ -196,10 +196,10 @@ export default App; | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-pagination-color | 页码字色 | `$color-primary` | -| \--nutui-pagination-font-size | 页码字号 | `$font-text` | -| \--nutui-pagination-item-border-color | 边框颜色 | `$color-divider` | -| \--nutui-pagination-disable-color | 不可用色 | `$color-disabled` | -| \--nutui-pagination-disable-background-color | 不可用背景色 | `$color-disabled` | +| \--nutui-pagination-font-size | 页码字号 | `$font-size` | +| \--nutui-pagination-item-border-color | 边框颜色 | `$color-border` | +| \--nutui-pagination-disable-color | 不可用色 | `$color-text-disable` | +| \--nutui-pagination-disable-background-color | 不可用背景色 | `$color-text-disable` | | \--nutui-pagination-item-border-width | 边框宽度 | `1px` | | \--nutui-pagination-item-border-radius | 边框圆角 | `2px` | | \--nutui-pagination-prev-next-padding | padding 值 | `0 11px` | \ No newline at end of file diff --git a/src/packages/pagination/doc.taro.md b/src/packages/pagination/doc.taro.md index c42276d937..6cc06c8336 100644 --- a/src/packages/pagination/doc.taro.md +++ b/src/packages/pagination/doc.taro.md @@ -195,10 +195,10 @@ export default App; | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-pagination-color | 页码字色 | `$color-primary` | -| \--nutui-pagination-font-size | 页码字号 | `$font-text` | -| \--nutui-pagination-item-border-color | 边框颜色 | `$color-divider` | -| \--nutui-pagination-disable-color | 不可用色 | `$color-disabled` | -| \--nutui-pagination-disable-background-color | 不可用背景色 | `$color-disabled` | +| \--nutui-pagination-font-size | 页码字号 | `$font-size` | +| \--nutui-pagination-item-border-color | 边框颜色 | `$color-border` | +| \--nutui-pagination-disable-color | 不可用色 | `$color-text-disable` | +| \--nutui-pagination-disable-background-color | 不可用背景色 | `$color-text-disable` | | \--nutui-pagination-item-border-width | 边框宽度 | `1px` | | \--nutui-pagination-item-border-radius | 边框圆角 | `2px` | | \--nutui-pagination-prev-next-padding | padding 值 | `0 11px` | \ No newline at end of file diff --git a/src/packages/pagination/doc.zh-TW.md b/src/packages/pagination/doc.zh-TW.md index ddd30a6f01..96ee19dd3b 100644 --- a/src/packages/pagination/doc.zh-TW.md +++ b/src/packages/pagination/doc.zh-TW.md @@ -196,10 +196,10 @@ export default App; | 名稱 | 說明 | 默認值 | | --- | --- | --- | | \--nutui-pagination-color | 頁碼字色 | `$color-primary` | -| \--nutui-pagination-font-size | 頁碼字號 | `$font-text` | -| \--nutui-pagination-item-border-color | 邊框顏色 | `$color-divider` | -| \--nutui-pagination-disable-color | 不可用色 | `$color-disabled` | -| \--nutui-pagination-disable-background-color | 不可用背景色 | `$color-disabled` | +| \--nutui-pagination-font-size | 頁碼字號 | `$font-size` | +| \--nutui-pagination-item-border-color | 邊框顏色 | `$color-border` | +| \--nutui-pagination-disable-color | 不可用色 | `$color-text-disable` | +| \--nutui-pagination-disable-background-color | 不可用背景色 | `$color-text-disable` | | \--nutui-pagination-item-border-width | 邊框寬度 | `1px` | | \--nutui-pagination-item-border-radius | 邊框圓角 | `2px` | | \--nutui-pagination-prev-next-padding | padding 值 | `0 11px` | \ No newline at end of file diff --git a/src/packages/picker/picker.scss b/src/packages/picker/picker.scss index ef2d2a1628..595a30915c 100644 --- a/src/packages/picker/picker.scss +++ b/src/packages/picker/picker.scss @@ -1,7 +1,7 @@ @import '../popup/popup.scss'; .nut-picker { - background-color: $color-card-background; + background-color: $color-background-overlay; width: 100%; &__control { diff --git a/src/packages/picker/pickerpanel.taro.tsx b/src/packages/picker/pickerpanel.taro.tsx index 66bfb89b04..3bfc954ace 100644 --- a/src/packages/picker/pickerpanel.taro.tsx +++ b/src/packages/picker/pickerpanel.taro.tsx @@ -123,15 +123,15 @@ const InternalPickerPanel: ForwardRefRenderFunction< } // 开始滚动 - const touchStart = (event: React.TouchEvent) => { - touch.start(event as any) + const touchStart = (event: React.TouchEvent) => { + touch.start(event) setStartY(touch.deltaY) setStartTime(Date.now()) transformY.current = scrollDistance } - const touchMove = (event: React.TouchEvent) => { - touch.move(event as any) + const touchMove = (event: React.TouchEvent) => { + touch.move(event) if ((touch as any).isVertical) { moving.current = true preventDefault(event, true) @@ -140,7 +140,7 @@ const InternalPickerPanel: ForwardRefRenderFunction< setMove(move) } - const touchEnd = (event: React.TouchEvent) => { + const touchEnd = () => { if (!moving.current) return const move = touch.deltaY - startY const moveTime = Date.now() - startTime diff --git a/src/packages/picker/pickerpanel.tsx b/src/packages/picker/pickerpanel.tsx index 166e8c6b25..8b3f61a891 100644 --- a/src/packages/picker/pickerpanel.tsx +++ b/src/packages/picker/pickerpanel.tsx @@ -118,15 +118,15 @@ const InternalPickerPanel: ForwardRefRenderFunction< } // 开始滚动 - const touchStart = (event: React.TouchEvent) => { - touch.start(event as any) + const touchStart = (event: React.TouchEvent) => { + touch.start(event) setStartY(touch.deltaY) setStartTime(Date.now()) transformY.current = scrollDistance } - const touchMove = (event: React.TouchEvent) => { - touch.move(event as any) + const touchMove = (event: React.TouchEvent) => { + touch.move(event) if ((touch as any).isVertical) { moving.current = true preventDefault(event, true) diff --git a/src/packages/popover/doc.en-US.md b/src/packages/popover/doc.en-US.md index b5a2834ecd..52fa8df44a 100644 --- a/src/packages/popover/doc.en-US.md +++ b/src/packages/popover/doc.en-US.md @@ -498,6 +498,7 @@ export default App | visible | whether to show | `boolean` | `false` | | location | The pop-up position, the specific parameter values ​​inside can refer to the above position customization example | `string` | `bottom` | | offset | the offset of the occurrence position | `string[]` \| `number[]` | `[0, 12]` | +| arrowOffset | the offset of the arrow | `number` | `0` | | showArrow | whether to show small arrows | `boolean` | `true` | | closeOnActionClick | Whether to close when clicking action | `boolean` | `true` | | closeOnOutsideClick | Whether to close when clicking outside | `boolean` | `true` | @@ -534,6 +535,6 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-popover-primary-text-color | Text color of options area | `$color-title` | | \--nutui-popover-content-background-color | The background color of the options area | `$white` | | \--nutui-popover-border-color| Arrow colors for top, bottom, left and right | `$white` | -| \--nutui-popover-divider-color | The bottom border color of the options area | `$color-divider` | -| \--nutui-popover-disable-color | Option Disabled Colors | `$color-disabled` | +| \--nutui-popover-divider-color | The bottom border color of the options area | `$color-border` | +| \--nutui-popover-disable-color | Option Disabled Colors | `$color-text-disable` | | \--nutui-popover-menu-item-padding | The padding value of each item in the option area menu | `8px` | \ No newline at end of file diff --git a/src/packages/popover/doc.md b/src/packages/popover/doc.md index 1860a91ee2..78bc12e516 100644 --- a/src/packages/popover/doc.md +++ b/src/packages/popover/doc.md @@ -503,6 +503,7 @@ export default App | visible | 是否展示气泡弹出层 | `boolean` | `false` | | location | 弹出位置，里面具体的参数值可以参考上面的位置自定义例子 | `string` | `bottom` | | offset | 出现位置的偏移量 | `string[]` \| `number[]` | `[0, 12]` | +| arrowOffset | 小箭头的偏移量 | `number` | `0` | | showArrow | 是否显示小箭头 | `boolean` | `true` | | closeOnActionClick | 是否在点击选项后关闭 | `boolean` | `true` | | closeOnOutsideClick | 是否在点击外部元素后关闭菜单 | `boolean` | `true` | @@ -541,6 +542,6 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一 | \--nutui-popover-primary-text-color | 选项区的文字颜色 | `$color-title` | | \--nutui-popover-content-background-color | 选项区的背景颜色 | `$white` | | \--nutui-popover-border-color | top、bottom、left 和 right 的箭头颜色| `$white` | -| \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-divider` | -| \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-disabled` | +| \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-border` | +| \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-text-disable` | | \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` | diff --git a/src/packages/popover/doc.taro.md b/src/packages/popover/doc.taro.md index bf622cb57c..60f87851c6 100644 --- a/src/packages/popover/doc.taro.md +++ b/src/packages/popover/doc.taro.md @@ -545,6 +545,6 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一 | \--nutui-popover-disable-color | 选项禁用的颜色 | `rgba(154, 155, 157, 1)` | | \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` | | \--nutui-popover-border-color | top、bottom、left 和 right 的箭头颜色 | `$white` | -| \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-divider` | -| \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-disabled` | +| \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-border` | +| \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-text-disable` | | \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` | diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx index c7f321af5e..620e711fac 100644 --- a/src/packages/popover/popover.taro.tsx +++ b/src/packages/popover/popover.taro.tsx @@ -39,6 +39,7 @@ export interface PopoverProps extends PopupProps { location: PopoverLocation | string visible: boolean offset: string[] | number[] + arrowOffset: number targetId: string showArrow: boolean closeOnOutsideClick: boolean @@ -56,6 +57,7 @@ const defaultProps = { location: 'bottom', visible: false, offset: [0, 12], + arrowOffset: 0, targetId: '', className: '', showArrow: true, @@ -83,6 +85,7 @@ export const Popover: FunctionComponent< closeOnActionClick, className, showArrow, + arrowOffset, style, onClick, onOpen, @@ -94,8 +97,8 @@ export const Popover: FunctionComponent< ...props, } - const popoverRef = useRef(null) - const popoverContentRef = useRef(null) + const popoverRef = useRef(null) + const popoverContentRef = useRef(null) const [showPopup, setShowPopup] = useState(false) const [elWidth, setElWidth] = useState(0) @@ -252,6 +255,40 @@ export const Popover: FunctionComponent< return styles } + const popoverArrowStyle = () => { + const styles: CSSProperties = {} + const direction = location.split('-')[0] + const skew = location.split('-')[1] + const base = 16 + + if (props.arrowOffset !== 0) { + if (['bottom', 'top'].includes(direction)) { + if (!skew) { + styles.left = `calc(50% + ${arrowOffset}px)` + } + if (skew === 'start') { + styles.left = `${base + arrowOffset}px` + } + if (skew === 'end') { + styles.right = `${base - arrowOffset}px` + } + } + + if (['left', 'right'].includes(direction)) { + if (!skew) { + styles.top = `calc(50% - ${arrowOffset}px)` + } + if (skew === 'start') { + styles.top = `${base - arrowOffset}px` + } + if (skew === 'end') { + styles.bottom = `${base + arrowOffset}px` + } + } + } + return styles + } + const handleSelect = (item: List, index: number) => { if (!item.disabled) { onSelect && onSelect(item, index) @@ -289,7 +326,9 @@ export const Popover: FunctionComponent< {...rest} >
- {showArrow &&
} + {showArrow && ( +
+ )} {Array.isArray(children) ? children[1] : ''} {list.map((item, index) => { return ( @@ -311,7 +350,7 @@ export const Popover: FunctionComponent< })}
- {showPopup && ( + {showPopup && closeOnOutsideClick && (
(null) - const popoverContentRef = useRef(null) + const popoverRef = useRef(null) + const popoverContentRef = useRef(null) const [showPopup, setShowPopup] = useState(false) const [elWidth, setElWidth] = useState(0) const [elHeight, setElHeight] = useState(0) @@ -127,7 +130,7 @@ export const Popover: FunctionComponent< props.onClick && props.onClick() onClose && onClose() }, - targetSet, + targetSet as Element[], 'touchstart', true, visible, @@ -135,7 +138,7 @@ export const Popover: FunctionComponent< ) const getContentWidth = () => { - let rect = getRect(popoverRef.current) + let rect = getRect(popoverRef.current as Element) const scrollDis = document.documentElement.scrollTop || window.scrollY if (targetId) { setTimeout(() => { @@ -234,6 +237,40 @@ export const Popover: FunctionComponent< return styles } + const popoverArrowStyle = () => { + const styles: CSSProperties = {} + const direction = location.split('-')[0] + const skew = location.split('-')[1] + const base = 16 + + if (props.arrowOffset !== 0) { + if (['bottom', 'top'].includes(direction)) { + if (!skew) { + styles.left = `calc(50% + ${arrowOffset}px)` + } + if (skew === 'start') { + styles.left = `${base + arrowOffset}px` + } + if (skew === 'end') { + styles.right = `${base - arrowOffset}px` + } + } + + if (['left', 'right'].includes(direction)) { + if (!skew) { + styles.top = `calc(50% - ${arrowOffset}px)` + } + if (skew === 'start') { + styles.top = `${base - arrowOffset}px` + } + if (skew === 'end') { + styles.bottom = `${base + arrowOffset}px` + } + } + } + return styles + } + const handleSelect = (item: List, index: number) => { if (!item.disabled) { onSelect && onSelect(item, index) @@ -271,7 +308,9 @@ export const Popover: FunctionComponent< {...rest} >
- {showArrow &&
} + {showArrow && ( +
+ )} {Array.isArray(children) ? children[1] : ''} {list.map((item, index) => { return ( diff --git a/src/packages/price/price.scss b/src/packages/price/price.scss index e8349c8369..464569dcf9 100644 --- a/src/packages/price/price.scss +++ b/src/packages/price/price.scss @@ -1,5 +1,5 @@ .nut-price { - font-size: $font-card-title; + font-size: $font-size-large; display: inline; color: $color-primary; diff --git a/src/packages/pulltorefresh/demo.taro.tsx b/src/packages/pulltorefresh/demo.taro.tsx index 72cc869a9b..3b938b08a2 100644 --- a/src/packages/pulltorefresh/demo.taro.tsx +++ b/src/packages/pulltorefresh/demo.taro.tsx @@ -30,8 +30,8 @@ const PullToRefreshDemo = () => {

{translated.basic}

new Promise((resolve) => { diff --git a/src/packages/pulltorefresh/demo.tsx b/src/packages/pulltorefresh/demo.tsx index 978a3f599e..53da06eb24 100644 --- a/src/packages/pulltorefresh/demo.tsx +++ b/src/packages/pulltorefresh/demo.tsx @@ -22,8 +22,8 @@ const PullToRefreshDemo = () => {

{translated.basic}

new Promise((resolve) => { diff --git a/src/packages/radio/doc.en-US.md b/src/packages/radio/doc.en-US.md index 38d45a7c5f..edf0f80ef1 100644 --- a/src/packages/radio/doc.en-US.md +++ b/src/packages/radio/doc.en-US.md @@ -282,9 +282,9 @@ The component provides the following CSS Variables, which can be used for custom | \--nutui-radio-button-active-border-color | shape is the border color of the button | `$color-primary` | | \--nutui-radio-button-active-background | shape is the background color of the button | `$color-primary-light-bg-color` | -| \--nutui-radio-button-disabled-active-background | Selected and disabled background color in button mode | `$color-disabled` | +| \--nutui-radio-button-disabled-active-background | Selected and disabled background color in button mode | `$color-text-disable` | | \--nutui-radio-button-disabled-active-color | The font color that is selected and disabled in button mode | `$white` | -| \--nutui-radio-button-disabled-active-border-color | Selected and disabled border color in button mode | `$color-disabled` | +| \--nutui-radio-button-disabled-active-border-color | Selected and disabled border color in button mode | `$color-text-disable` | | \--nutui-radiogroup-radio-margin | Margin of each radio in Group mode | `0 20px 5px 0` | | \--nutui-radiogroup-radio-label-margin | Label margin in each radio in Group mode | `0 5px 0 5px` | diff --git a/src/packages/radio/doc.md b/src/packages/radio/doc.md index 321a3a8a5d..5cb00a5671 100644 --- a/src/packages/radio/doc.md +++ b/src/packages/radio/doc.md @@ -284,9 +284,9 @@ export default RadioGroupOptions; | \--nutui-radio-button-active-border-color | 选中时，shape为button的边框颜色 | `$color-primary` | | \--nutui-radio-button-active-background | 选中时，shape为button的背景色 | `$color-primary-light-bg-color` | -| \--nutui-radio-button-disabled-active-background | button模式下选中且禁用的背景色 | `$color-disabled` | +| \--nutui-radio-button-disabled-active-background | button模式下选中且禁用的背景色 | `$color-text-disable` | | \--nutui-radio-button-disabled-active-color | button模式下选中且禁用的字体色 | `$white` | -| \--nutui-radio-button-disabled-active-border-color | button模式下选中且禁用的边框色 | `$color-disabled` | +| \--nutui-radio-button-disabled-active-border-color | button模式下选中且禁用的边框色 | `$color-text-disable` | | \--nutui-radiogroup-radio-margin | Group模式下每个 radio 的外边距 | `0 20px 5px 0` | | \--nutui-radiogroup-radio-label-margin | Group模式下每个 radio 中的 label 外边距 | `0 5px 0 5px` | diff --git a/src/packages/radio/doc.taro.md b/src/packages/radio/doc.taro.md index bfe0d4a115..573bcb4489 100644 --- a/src/packages/radio/doc.taro.md +++ b/src/packages/radio/doc.taro.md @@ -284,9 +284,9 @@ export default RadioGroupOptions; | \--nutui-radio-button-active-border-color | 选中时，shape为button的边框颜色 | `$color-primary` | | \--nutui-radio-button-active-background | 选中时，shape为button的背景色 | `$color-primary-light-bg-color` | -| \--nutui-radio-button-disabled-active-background | button模式下选中且禁用的背景色 | `$color-disabled` | +| \--nutui-radio-button-disabled-active-background | button模式下选中且禁用的背景色 | `$color-text-disable` | | \--nutui-radio-button-disabled-active-color | button模式下选中且禁用的字体色 | `$white` | -| \--nutui-radio-button-disabled-active-border-color | button模式下选中且禁用的边框色 | `$color-disabled` | +| \--nutui-radio-button-disabled-active-border-color | button模式下选中且禁用的边框色 | `$color-text-disable` | | \--nutui-radiogroup-radio-margin | Group模式下每个 radio 的外边距 | `0 20px 5px 0` | | \--nutui-radiogroup-radio-label-margin | Group模式下每个 radio 中的 label 外边距 | `0 5px 0 5px` | diff --git a/src/packages/radio/doc.zh-TW.md b/src/packages/radio/doc.zh-TW.md index 74541cd193..2847ca3186 100644 --- a/src/packages/radio/doc.zh-TW.md +++ b/src/packages/radio/doc.zh-TW.md @@ -285,9 +285,9 @@ export default RadioGroupOptions; | \--nutui-radio-button-active-border-color | 選中時，shape為button的邊框顏色 | `$color-primary` | | \--nutui-radio-button-active-background | 選中時，shape為button的背景色 | `$color-primary-light-bg-color` | -| \--nutui-radio-button-disabled-active-background | button模式下選中且禁用的背景色 | `$color-disabled` | +| \--nutui-radio-button-disabled-active-background | button模式下選中且禁用的背景色 | `$color-text-disable` | | \--nutui-radio-button-disabled-active-color | button模式下選中且禁用的字體色 | `$white` | -| \--nutui-radio-button-disabled-active-border-color | button模式下選中且禁用的邊框色 | `$color-disabled` | +| \--nutui-radio-button-disabled-active-border-color | button模式下選中且禁用的邊框色 | `$color-text-disable` | | \--nutui-radiogroup-radio-margin | Group模式下每個 radio 的外邊距 | `0 20px 5px 0` | | \--nutui-radiogroup-radio-label-margin | Group模式下每個 radio 中的 label 外邊距 | `0 5px 0 5px` | diff --git a/src/packages/radio/radio.scss b/src/packages/radio/radio.scss index e9e3285327..61a3dc7a19 100644 --- a/src/packages/radio/radio.scss +++ b/src/packages/radio/radio.scss @@ -35,7 +35,7 @@ } &--disabled { - color: $color-disabled; + color: $color-text-disable; border: 1px solid $radio-button-background; } } @@ -52,7 +52,7 @@ color: $radio-label-color; &--disabled { - color: $color-disabled; + color: $color-text-disable; } } @@ -69,7 +69,7 @@ } &--disable { - color: $color-disabled; + color: $color-text-disable; } } } diff --git a/src/packages/range/range.scss b/src/packages/range/range.scss index 176a55b2c2..01cd4df0cc 100644 --- a/src/packages/range/range.scss +++ b/src/packages/range/range.scss @@ -7,7 +7,7 @@ .min, .max { - font-size: $font-help; + font-size: $font-size-small; color: $range-color; user-select: none; } @@ -157,7 +157,7 @@ align-items: center; justify-content: center; user-select: none; - font-size: $font-help; + font-size: $font-size-small; color: $range-color; transform: translate3d(0, -100%, 0); } diff --git a/src/packages/range/range.taro.tsx b/src/packages/range/range.taro.tsx index cf4220b5b7..5338f85f66 100644 --- a/src/packages/range/range.taro.tsx +++ b/src/packages/range/range.taro.tsx @@ -261,7 +261,7 @@ export const Range: FunctionComponent< setDragStatus('start') } - const onTouchMove = async (event: TouchEvent) => { + const onTouchMove = async (event: any) => { if (disabled || !root.current) { return } @@ -295,7 +295,7 @@ export const Range: FunctionComponent< updateValue(newValue) } - const onTouchEnd = (event: TouchEvent) => { + const onTouchEnd = () => { if (disabled) { return } @@ -373,9 +373,9 @@ export const Range: FunctionComponent< } onTouchStart(e) }} - onTouchMove={(e: any) => onTouchMove(e)} - onTouchEnd={(e: any) => onTouchEnd(e)} - onTouchCancel={(e: any) => onTouchEnd(e)} + onTouchMove={(e) => onTouchMove(e)} + onTouchEnd={onTouchEnd} + onTouchCancel={onTouchEnd} onClick={(e) => e.stopPropagation()} > {renderButton(index)} @@ -387,9 +387,9 @@ export const Range: FunctionComponent< catchMove className="nut-range-button-wrapper" onTouchStart={(e) => onTouchStart(e)} - onTouchMove={(e: any) => onTouchMove(e)} - onTouchEnd={(e: any) => onTouchEnd(e)} - onTouchCancel={(e: any) => onTouchEnd(e)} + onTouchMove={(e) => onTouchMove(e)} + onTouchEnd={onTouchEnd} + onTouchCancel={onTouchEnd} onClick={(e) => e.stopPropagation()} > {renderButton()} diff --git a/src/packages/range/range.tsx b/src/packages/range/range.tsx index fa5dd7932e..73f61c3058 100644 --- a/src/packages/range/range.tsx +++ b/src/packages/range/range.tsx @@ -6,6 +6,7 @@ import React, { useCallback, ReactNode, } from 'react' +import type { TouchEvent } from 'react' import classNames from 'classnames' import { useTouch } from '@/utils/use-touch' import { getRect } from '@/utils/use-client-rect' @@ -245,7 +246,7 @@ export const Range: FunctionComponent< } } - const onTouchStart = (event: any) => { + const onTouchStart = (event: TouchEvent) => { if (disabled) { return } @@ -260,7 +261,7 @@ export const Range: FunctionComponent< setDragStatus('start') } - const onTouchMove = (event: TouchEvent) => { + const onTouchMove = (event: TouchEvent) => { event.stopPropagation() if (disabled || !root.current) { return @@ -295,7 +296,7 @@ export const Range: FunctionComponent< updateValue(newValue) } - const onTouchEnd = (event: TouchEvent) => { + const onTouchEnd = () => { if (disabled) { return } @@ -366,16 +367,16 @@ export const Range: FunctionComponent< index === 0 ? 'nut-range-button-wrapper-left' : '' } ${index === 1 ? 'nut-range-button-wrapper-right' : ''}`} - onTouchStart={(e: any) => { + onTouchStart={(e) => { if (typeof index === 'number') { // 实时更新当前拖动的按钮索引 setButtonIndex(index) } onTouchStart(e) }} - onTouchMove={(e: any) => onTouchMove(e)} - onTouchEnd={(e: any) => onTouchEnd(e)} - onTouchCancel={(e: any) => onTouchEnd(e)} + onTouchMove={(e) => onTouchMove(e)} + onTouchEnd={onTouchEnd} + onTouchCancel={onTouchEnd} onClick={(e) => e.stopPropagation()} > {renderButton(index)} @@ -386,9 +387,9 @@ export const Range: FunctionComponent<
onTouchStart(e)} - onTouchMove={(e: any) => onTouchMove(e)} - onTouchEnd={(e: any) => onTouchEnd(e)} - onTouchCancel={(e: any) => onTouchEnd(e)} + onTouchMove={(e) => onTouchMove(e)} + onTouchEnd={onTouchEnd} + onTouchCancel={onTouchEnd} onClick={(e) => e.stopPropagation()} > {renderButton()} diff --git a/src/packages/rate/doc.en-US.md b/src/packages/rate/doc.en-US.md index 5032604fda..14eb31bad0 100644 --- a/src/packages/rate/doc.en-US.md +++ b/src/packages/rate/doc.en-US.md @@ -238,4 +238,4 @@ The component provides the following CSS variables, which can be used to customi | --- | --- | --- | | \--nutui-rate-item-margin | rate item margin | `14px` | | \--nutui-rate-icon-color | checked icon color | `$color-primary` | -| \--nutui-rate-icon-void-color | unchecked icon color | `$color-disabled` | \ No newline at end of file +| \--nutui-rate-icon-void-color | unchecked icon color | `$color-text-disable` | \ No newline at end of file diff --git a/src/packages/rate/doc.md b/src/packages/rate/doc.md index adda736fa2..20ada21ece 100644 --- a/src/packages/rate/doc.md +++ b/src/packages/rate/doc.md @@ -242,4 +242,4 @@ export default App; | --- | --- | --- | | \--nutui-rate-item-margin | 间距 | `14px` | | \--nutui-rate-icon-color | icon 激活颜色 | `$color-primary` | -| \--nutui-rate-icon-void-color | icon 未激活颜色 | `$color-disabled` | \ No newline at end of file +| \--nutui-rate-icon-void-color | icon 未激活颜色 | `$color-text-disable` | \ No newline at end of file diff --git a/src/packages/rate/doc.taro.md b/src/packages/rate/doc.taro.md index 7475c71ade..95de72cd99 100644 --- a/src/packages/rate/doc.taro.md +++ b/src/packages/rate/doc.taro.md @@ -238,4 +238,4 @@ export default App; | --- | --- | --- | | \--nutui-rate-item-margin | 间距 | `14px` | | \--nutui-rate-icon-color | icon 激活颜色 | `$color-primary` | -| \--nutui-rate-icon-void-color | icon 未激活颜色 | `$color-disabled` | \ No newline at end of file +| \--nutui-rate-icon-void-color | icon 未激活颜色 | `$color-text-disable` | \ No newline at end of file diff --git a/src/packages/rate/doc.zh-TW.md b/src/packages/rate/doc.zh-TW.md index bf30f1860b..0dbd66c3cc 100644 --- a/src/packages/rate/doc.zh-TW.md +++ b/src/packages/rate/doc.zh-TW.md @@ -238,4 +238,4 @@ export default App; | --- | --- | --- | | \--nutui-rate-item-margin | 間距 | `14px` | | \--nutui-rate-icon-color | icon 激活顏色 | `$color-primary` | -| \--nutui-rate-icon-void-color | icon 未激活顏色 | `$color-disabled` | \ No newline at end of file +| \--nutui-rate-icon-void-color | icon 未激活顏色 | `$color-text-disable` | \ No newline at end of file diff --git a/src/packages/rate/rate.taro.tsx b/src/packages/rate/rate.taro.tsx index 9b36823b7b..e758efe7cf 100644 --- a/src/packages/rate/rate.taro.tsx +++ b/src/packages/rate/rate.taro.tsx @@ -95,7 +95,7 @@ export const Rate: FunctionComponent> = (props) => { setScore(value) } - const onHalfClick = (event: any, n: number) => { + const onHalfClick = (event: React.MouseEvent, n: number) => { event.preventDefault() event.stopPropagation() const value = Math.max(min, n - 0.5) diff --git a/src/packages/rate/rate.tsx b/src/packages/rate/rate.tsx index 48f3ae6d3a..a49727276f 100644 --- a/src/packages/rate/rate.tsx +++ b/src/packages/rate/rate.tsx @@ -95,7 +95,7 @@ export const Rate: FunctionComponent> = (props) => { setScore(value) } - const onHalfClick = (event: any, n: number) => { + const onHalfClick = (event: React.MouseEvent, n: number) => { event.preventDefault() event.stopPropagation() const value = Math.max(min, n - 0.5) diff --git a/src/packages/row/row.taro.tsx b/src/packages/row/row.taro.tsx index ec7168ca9e..8f24846e96 100644 --- a/src/packages/row/row.taro.tsx +++ b/src/packages/row/row.taro.tsx @@ -1,4 +1,5 @@ import React, { FunctionComponent } from 'react' +import type { MouseEvent } from 'react' import classNames from 'classnames' import { DataContext } from './UserContext' import { BasicComponent, ComponentDefaults } from '@/utils/typings' @@ -11,7 +12,7 @@ export interface RowProps extends BasicComponent { align: string wrap: string gutter: string | number - onClick: (e: any, type: RowEventType) => void + onClick: (e: MouseEvent, type: RowEventType) => void } const classPrefix = 'nut-row' @@ -66,7 +67,7 @@ export const Row: FunctionComponent< { className: classNames(getClasses(), className), style, - onClick: (e: any) => { + onClick: (e: MouseEvent) => { onClick && onClick(e, 'row') }, }, diff --git a/src/packages/row/row.tsx b/src/packages/row/row.tsx index 9d868e6e7f..e708586b2c 100644 --- a/src/packages/row/row.tsx +++ b/src/packages/row/row.tsx @@ -1,4 +1,5 @@ import React, { FunctionComponent } from 'react' +import type { MouseEvent } from 'react' import classNames from 'classnames' import { DataContext } from './UserContext' import { BasicComponent, ComponentDefaults } from '@/utils/typings' @@ -11,7 +12,7 @@ export interface RowProps extends BasicComponent { align: string wrap: string gutter: string | number - onClick: (e: any, type: RowEventType) => void + onClick: (e: MouseEvent, type: RowEventType) => void } const classPrefix = 'nut-row' @@ -65,7 +66,7 @@ export const Row: FunctionComponent< { className: classNames(getClasses(), className), style, - onClick: (e: any) => { + onClick: (e: MouseEvent) => { onClick && onClick(e, 'row') }, }, diff --git a/src/packages/searchbar/demo.taro.tsx b/src/packages/searchbar/demo.taro.tsx index b849f60bfd..fbf7dd38f8 100644 --- a/src/packages/searchbar/demo.taro.tsx +++ b/src/packages/searchbar/demo.taro.tsx @@ -81,7 +81,7 @@ const SearchBarDemo = () => { const [lightTheme, setLightTheme] = useState(false) const [value, setValue] = useState('') - const change = (val: string, e: Event) => { + const change = (val: string, e: React.ChangeEvent) => { setValue(val) } @@ -153,7 +153,9 @@ const SearchBarDemo = () => { />

{translated.title6}

change(val, e)} + onChange={(val: string, e: React.ChangeEvent) => + change(val, e) + } maxLength={10} />
{ const [lightTheme, setLightTheme] = useState(false) const [value, setValue] = useState('') - const change = (val: string, e: Event) => { + const change = (val: string, e: React.ChangeEvent) => { setValue(val) } return ( @@ -136,7 +136,9 @@ const SearchBarDemo = () => { />

{translated.title6}

change(val, e)} + onChange={(val: string, e: React.ChangeEvent) => + change(val, e) + } maxLength={10} />
void` | `-` | -| onFocus | triggered when focusing | `(value: string, event: Event) => void` | `-` | -| onBlur | triggered when out of focus | `(value: string, event: Event) => void` | `-` | -| onClear | triggered when clicking clear | `(event: Event) => void` | `-` | +| onChange | triggered when entering content | `(value: string, event: ChangeEvent) => void` | `-` | +| onFocus | triggered when focusing | `(value: string, event: FocusEvent) => void` | `-` | +| onBlur | triggered when out of focus | `(value: string, event: FocusEvent) => void` | `-` | +| onClear | triggered when clicking clear | `(event: MouseEvent) => void` | `-` | | onSearch | trigger when confirming search | `(val: string) => void` | `-` | -| onInputClick | triggered when clicking the input area | `(event: Event) => void` | `-` | +| onInputClick | triggered when clicking the input area | `(event: MouseEvent) => void` | `-` | ## Theming diff --git a/src/packages/searchbar/doc.md b/src/packages/searchbar/doc.md index ccf18ce283..c21ece5ab1 100644 --- a/src/packages/searchbar/doc.md +++ b/src/packages/searchbar/doc.md @@ -218,12 +218,12 @@ export default App; | right | 搜搜框右侧区域 | `ReactNode` | `-` | | leftIn | 输入框内左侧区域 | `ReactNode` | `` | | rightIn | 输入框内右侧区域 | `ReactNode` | `-` | -| onChange | 输入内容时触发 | `(value: string, event: Event) => void` | `-` | -| onFocus | 聚焦时触发 | `(value: string, event: Event) => void` | `-` | -| onBlur | 失焦时触发 | `(value: string, event: Event) => void` | `-` | -| onClear | 点击清空时触发 | `(event: Event) => void` | `-` | +| onChange | 输入内容时触发 | `(value: string, event: ChangeEvent) => void` | `-` | +| onFocus | 聚焦时触发 | `(value: string, event: FocusEvent) => void` | `-` | +| onBlur | 失焦时触发 | `(value: string, event: FocusEvent) => void` | `-` | +| onClear | 点击清空时触发 | `(event: MouseEvent) => void` | `-` | | onSearch | 确定搜索时触发 | `(val: string) => void` | `-` | -| onInputClick | 点击输入区域时触发 | `(event: Event) => void` | `-` | +| onInputClick | 点击输入区域时触发 | `(event: MouseEvent) => void` | `-` | ## 主题定制 diff --git a/src/packages/searchbar/doc.taro.md b/src/packages/searchbar/doc.taro.md index 1564bf38a8..4adfb988e6 100644 --- a/src/packages/searchbar/doc.taro.md +++ b/src/packages/searchbar/doc.taro.md @@ -217,11 +217,12 @@ export default App; | right | 搜搜框右侧区域 | `ReactNode` | `-` | | leftIn | 输入框内左侧区域 | `ReactNode` | `` | | rightIn | 输入框内右侧区域 | `ReactNode` | `-` | -| onChange | 输入内容时触发 | `(value: string, event: Event) => void` | `-` | -| onFocus | 聚焦时触发 | `(value: string, event: Event) => void` | `-` | -| onBlur | 失焦时触发 | `(value: string, event: Event) => void` | `-` | +| onChange | 输入内容时触发 | `(value: string, event: ChangeEvent) => void` | `-` | +| onFocus | 聚焦时触发 | `(value: string, event: FocusEvent) => void` | `-` | +| onBlur | 失焦时触发 | `(value: string, event: FocusEvent) => void` | `-` | +| onClear | 点击清空时触发 | `(event: MouseEvent) => void` | `-` | | onSearch | 确定搜索时触发 | `(val: string) => void` | `-` | -| onInputClick | 点击输入区域时触发 | `(event: Event) => void` | `-` | +| onInputClick | 点击输入区域时触发 | `(event: MouseEvent) => void` | `-` | ## 主题定制 diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss index 1b3ac2c36a..7374f597b0 100644 --- a/src/packages/searchbar/searchbar.scss +++ b/src/packages/searchbar/searchbar.scss @@ -45,7 +45,7 @@ width: 100%; padding: $searchbar-input-padding; border-radius: 0; - font-size: $font-help; + font-size: $font-size-small; color: $searchbar-input-text-color; caret-color: $searchbar-input-curror-color; background: transparent; diff --git a/src/packages/searchbar/searchbar.taro.tsx b/src/packages/searchbar/searchbar.taro.tsx index 35d0624734..29221e9baf 100644 --- a/src/packages/searchbar/searchbar.taro.tsx +++ b/src/packages/searchbar/searchbar.taro.tsx @@ -1,4 +1,5 @@ import React, { FunctionComponent, useEffect, useRef, useState } from 'react' +import type { ChangeEvent, FocusEvent, MouseEvent } from 'react' import { CircleClose, Search } from '@nutui/icons-react-taro' import { useConfig } from '@/packages/configprovider/configprovider.taro' import { BasicComponent, ComponentDefaults } from '@/utils/typings' @@ -27,15 +28,15 @@ export interface SearchBarProps extends BasicComponent { /** 确定搜索时触发 */ onSearch?: (val: string) => void /** 输入框内容变化时触发 */ - onChange?: (value: string, event: Event) => void + onChange?: (value: string, event: ChangeEvent) => void /** 输入框获得焦点时触发 */ - onFocus?: (value: string, event: Event) => void + onFocus?: (value: string, event: FocusEvent) => void /** 输入框失去焦点时触发 */ - onBlur?: (value: string, event: Event) => void + onBlur?: (value: string, event: FocusEvent) => void /** 点击清除按钮后触发 */ - onClear?: (event: Event) => void + onClear?: (event: MouseEvent) => void /** 点击输入区域时触发 */ - onInputClick?: (event: Event) => void + onInputClick?: (event: MouseEvent) => void } const defaultProps = { @@ -93,20 +94,20 @@ export const SearchBar: FunctionComponent< const searchSelf: HTMLInputElement | null = searchRef.current searchSelf && searchSelf.focus() } - const change = (event: Event) => { - const { value } = event.target as any + const change = (event: ChangeEvent) => { + const { value } = event.target onChange && onChange?.(value, event) setValue(value) value === '' && forceFocus() } - const focus = (event: Event) => { - const { value } = event.target as any + const focus = (event: FocusEvent) => { + const { value } = event.target onFocus && onFocus?.(value, event) } - const blur = (event: Event) => { + const blur = (event: FocusEvent) => { const searchSelf: HTMLInputElement | null = searchRef.current searchSelf && searchSelf.blur() - const { value } = event.target as any + const { value } = event.target onBlur && onBlur?.(value, event) } useEffect(() => { @@ -129,14 +130,14 @@ export const SearchBar: FunctionComponent< readOnly={readOnly} maxLength={maxLength} onKeyPress={onKeypress} - onChange={(e: any) => change(e)} - onFocus={(e: any) => focus(e)} - onBlur={(e: any) => blur(e)} - onClick={(e: any) => clickInput(e)} + onChange={(e) => change(e)} + onFocus={(e) => focus(e)} + onBlur={(e) => blur(e)} + onClick={(e) => clickInput(e)} /> ) } - const clickInput = (e: Event) => { + const clickInput = (e: MouseEvent) => { onInputClick && onInputClick(e) } @@ -178,7 +179,7 @@ export const SearchBar: FunctionComponent< ) } - const clearaVal = (event: Event) => { + const clearaVal = (event: MouseEvent) => { if (disabled || readOnly) { return } diff --git a/src/packages/searchbar/searchbar.tsx b/src/packages/searchbar/searchbar.tsx index 898791364a..71a422b699 100644 --- a/src/packages/searchbar/searchbar.tsx +++ b/src/packages/searchbar/searchbar.tsx @@ -1,4 +1,5 @@ import React, { FunctionComponent, useEffect, useRef, useState } from 'react' +import type { ChangeEvent, FocusEvent, MouseEvent } from 'react' import { CircleClose, Search } from '@nutui/icons-react' import { useConfig } from '@/packages/configprovider' import { BasicComponent, ComponentDefaults } from '@/utils/typings' @@ -27,15 +28,15 @@ export interface SearchBarProps extends BasicComponent { /** 确定搜索时触发 */ onSearch?: (val: string) => void /** 输入框内容变化时触发 */ - onChange?: (value: string, event: Event) => void + onChange?: (value: string, event: ChangeEvent) => void /** 输入框获得焦点时触发 */ - onFocus?: (value: string, event: Event) => void + onFocus?: (value: string, event: FocusEvent) => void /** 输入框失去焦点时触发 */ - onBlur?: (value: string, event: Event) => void + onBlur?: (value: string, event: FocusEvent) => void /** 点击清除按钮后触发 */ - onClear?: (event: Event) => void + onClear?: (event: MouseEvent) => void /** 点击输入区域时触发 */ - onInputClick?: (event: Event) => void + onInputClick?: (event: MouseEvent) => void } const defaultProps = { @@ -93,19 +94,19 @@ export const SearchBar: FunctionComponent< const searchSelf: HTMLInputElement | null = searchRef.current searchSelf && searchSelf.focus() } - const change = (event: Event) => { - const { value } = event.target as any + const change = (event: ChangeEvent) => { + const { value } = event.target onChange && onChange?.(value, event) setValue(value) } - const focus = (event: Event) => { - const { value } = event.target as any + const focus = (event: FocusEvent) => { + const { value } = event.target onFocus && onFocus?.(value, event) } - const blur = (event: Event) => { + const blur = (event: FocusEvent) => { const searchSelf: HTMLInputElement | null = searchRef.current searchSelf && searchSelf.blur() - const { value } = event.target as any + const { value } = event.target onBlur && onBlur?.(value, event) } useEffect(() => { @@ -128,14 +129,14 @@ export const SearchBar: FunctionComponent< readOnly={readOnly} maxLength={maxLength} onKeyDown={onKeydown} - onChange={(e: any) => change(e)} - onFocus={(e: any) => focus(e)} - onBlur={(e: any) => blur(e)} - onClick={(e: any) => clickInput(e)} + onChange={(e) => change(e)} + onFocus={(e) => focus(e)} + onBlur={(e) => blur(e)} + onClick={(e) => clickInput(e)} /> ) } - const clickInput = (e: Event) => { + const clickInput = (e: MouseEvent) => { onInputClick && onInputClick(e) } @@ -170,14 +171,14 @@ export const SearchBar: FunctionComponent< return (
clearaVal(e)} + onClick={(e) => clearaVal(e)} >
) } - const clearaVal = (event: Event) => { + const clearaVal = (event: MouseEvent) => { if (disabled || readOnly) { return } diff --git a/src/packages/shortpassword/shortpassword.scss b/src/packages/shortpassword/shortpassword.scss index 919e8f0dce..2be76383d1 100644 --- a/src/packages/shortpassword/shortpassword.scss +++ b/src/packages/shortpassword/shortpassword.scss @@ -3,7 +3,7 @@ .nut-shortpassword { &__title { line-height: 1; - font-size: $font-card-title; + font-size: $font-size-large; color: $color-title; } @@ -11,7 +11,7 @@ margin-top: 12px; margin-bottom: 24px; line-height: 1; - font-size: $font-help; + font-size: $font-size-small; color: $color-text; } @@ -76,13 +76,13 @@ &__error { line-height: 1; - font-size: $font-size-0; + font-size: $font-size-xs; color: $shortpassword-error; } &__forget { line-height: 1; - font-size: $font-help; + font-size: $font-size-small; color: $shortpassword-forget; display: flex; align-items: center; @@ -100,7 +100,7 @@ border-radius: 15px; padding: 8px 38px; line-height: 1; - font-size: $font-text; + font-size: $font-size; color: $color-primary; } @@ -108,12 +108,12 @@ background: linear-gradient( 135deg, $color-primary 0%, - $color-primary-end 100% + $color-primary-stop-2 100% ); border-radius: 15px; padding: 8px 38px; line-height: 1; - font-size: $font-text; + font-size: $font-size; color: $color-primary-text; } } diff --git a/src/packages/sidenavbar/doc.en-US.md b/src/packages/sidenavbar/doc.en-US.md index 75b936a15c..9af9ff6f27 100644 --- a/src/packages/sidenavbar/doc.en-US.md +++ b/src/packages/sidenavbar/doc.en-US.md @@ -180,7 +180,7 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-sidenavbar-title-background | The background color of the title | `$color-background` | | \--nutui-sidenavbar-title-color | The font color of the title | `$color-title` | | \--nutui-sidenavbar-sub-title-padding | Padding of subtitle | `10px 8px 10px 35px` | -| \--nutui-sidenavbar-sub-title-background | Subtitle background color | `$color-card-background-wrapper` | +| \--nutui-sidenavbar-sub-title-background | Subtitle background color | `$color-background-sunken` | | \--nutui-sidenavbar-sub-title-color | Subtitle font color | `$color-title` | -| \--nutui-sidenavbar-sub-list-background | option list background color | `$color-card-background-wrapper` | +| \--nutui-sidenavbar-sub-list-background | option list background color | `$color-background-sunken` | | \--nutui-sidenavbar-sub-list-color | option list font color | `$color-title` | \ No newline at end of file diff --git a/src/packages/sidenavbar/doc.md b/src/packages/sidenavbar/doc.md index 28b0f7e4f5..ca679ff6a8 100644 --- a/src/packages/sidenavbar/doc.md +++ b/src/packages/sidenavbar/doc.md @@ -177,7 +177,7 @@ export default App; | \--nutui-sidenavbar-title-background | 标题的背景色 | `$color-background` | | \--nutui-sidenavbar-title-color | 标题的字体颜色 | `$color-title` | | \--nutui-sidenavbar-sub-title-padding | 子标题的内边距 | `10px 8px 10px 35px` | -| \--nutui-sidenavbar-sub-title-background | 子标题背景色 | `$color-card-background-wrapper` | +| \--nutui-sidenavbar-sub-title-background | 子标题背景色 | `$color-background-sunken` | | \--nutui-sidenavbar-sub-title-color | 子标题字体颜色 | `$color-title` | -| \--nutui-sidenavbar-sub-list-background | 选项列表背景色 | `$color-card-background-wrapper` | +| \--nutui-sidenavbar-sub-list-background | 选项列表背景色 | `$color-background-sunken` | | \--nutui-sidenavbar-sub-list-color | 选项列表字体颜色 | `$color-title` | \ No newline at end of file diff --git a/src/packages/sidenavbar/doc.taro.md b/src/packages/sidenavbar/doc.taro.md index a5d66f4236..66eb94f794 100644 --- a/src/packages/sidenavbar/doc.taro.md +++ b/src/packages/sidenavbar/doc.taro.md @@ -177,7 +177,7 @@ export default App; | \--nutui-sidenavbar-title-background | 标题的背景色 | `$color-background` | | \--nutui-sidenavbar-title-color | 标题的字体颜色 | `$color-title` | | \--nutui-sidenavbar-sub-title-padding | 子标题的内边距 | `10px 8px 10px 35px` | -| \--nutui-sidenavbar-sub-title-background | 子标题背景色 | `$color-card-background-wrapper` | +| \--nutui-sidenavbar-sub-title-background | 子标题背景色 | `$color-background-sunken` | | \--nutui-sidenavbar-sub-title-color | 子标题字体颜色 | `$color-title` | -| \--nutui-sidenavbar-sub-list-background | 选项列表背景色 | `$color-card-background-wrapper` | +| \--nutui-sidenavbar-sub-list-background | 选项列表背景色 | `$color-background-sunken` | | \--nutui-sidenavbar-sub-list-color | 选项列表字体颜色 | `$color-title` | \ No newline at end of file diff --git a/src/packages/sidenavbar/doc.zh-TW.md b/src/packages/sidenavbar/doc.zh-TW.md index 55c1f67a53..377894c9b6 100644 --- a/src/packages/sidenavbar/doc.zh-TW.md +++ b/src/packages/sidenavbar/doc.zh-TW.md @@ -177,7 +177,7 @@ export default App; | \--nutui-sidenavbar-title-background | 標題的背景色 | `$color-background` | | \--nutui-sidenavbar-title-color | 標題的字體顏色 | `$color-title` | | \--nutui-sidenavbar-sub-title-padding | 子標題的內邊距 | `10px 8px 10px 35px` | -| \--nutui-sidenavbar-sub-title-background | 子標題背景色 | `$color-card-background-wrapper` | +| \--nutui-sidenavbar-sub-title-background | 子標題背景色 | `$color-background-sunken` | | \--nutui-sidenavbar-sub-title-color | 子標題字體顏色 | `$color-title` | -| \--nutui-sidenavbar-sub-list-background | 選項列表背景色 | `$color-card-background-wrapper` | +| \--nutui-sidenavbar-sub-list-background | 選項列表背景色 | `$color-background-sunken` | | \--nutui-sidenavbar-sub-list-color | 選項列表字體顏色 | `$color-title` | \ No newline at end of file diff --git a/src/packages/sidenavbar/sidenavbar.scss b/src/packages/sidenavbar/sidenavbar.scss index 4694bf4ea9..064ae57cec 100644 --- a/src/packages/sidenavbar/sidenavbar.scss +++ b/src/packages/sidenavbar/sidenavbar.scss @@ -18,13 +18,13 @@ } .arrow-down { - border-top: 4px solid $color-help; + border-top: 4px solid $color-text-help; border-left: 4px solid transparent; border-right: 4px solid transparent; } .arrow-up { - border-bottom: 4px solid $color-help; + border-bottom: 4px solid $color-text-help; border-left: 4px solid transparent; border-right: 4px solid transparent; } diff --git a/src/packages/signature/doc.en-US.md b/src/packages/signature/doc.en-US.md index ad81168449..31bf3534ca 100644 --- a/src/packages/signature/doc.en-US.md +++ b/src/packages/signature/doc.en-US.md @@ -116,7 +116,7 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | | \--nutui-signature-border-height | Signature area height | `10rem` | -| \--nutui-signature-border-color | Signature border color | `$color-divider` | +| \--nutui-signature-border-color | Signature border color | `$color-border` | | \--nutui-signature-border-width | Signature border width | `1px` | | \--nutui-signature-background-color | Signature background color | `$white` | -| \--nutui-signature-font-size | Signature text size | `$font-text` | \ No newline at end of file +| \--nutui-signature-font-size | Signature text size | `$font-size` | \ No newline at end of file diff --git a/src/packages/signature/doc.md b/src/packages/signature/doc.md index 524395f5e8..38d55632d3 100644 --- a/src/packages/signature/doc.md +++ b/src/packages/signature/doc.md @@ -116,7 +116,7 @@ export default App; | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-signature-border-height | 签名区域高度 | `10rem` | -| \--nutui-signature-border-color | 签名边框颜色 | `$color-divider` | +| \--nutui-signature-border-color | 签名边框颜色 | `$color-border` | | \--nutui-signature-border-width | 签名边框宽度 | `1px` | | \--nutui-signature-background-color | 签名背景颜色 | `$white` | -| \--nutui-signature-font-size | 签名文字字号 | `$font-text` | \ No newline at end of file +| \--nutui-signature-font-size | 签名文字字号 | `$font-size` | \ No newline at end of file diff --git a/src/packages/signature/doc.taro.md b/src/packages/signature/doc.taro.md index 9d50df2c09..ae0be5c794 100644 --- a/src/packages/signature/doc.taro.md +++ b/src/packages/signature/doc.taro.md @@ -116,8 +116,8 @@ export default App; | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-signature-border-height | 签名区域高度 | `10rem` | -| \--nutui-signature-border-color | 签名边框颜色 | `$color-divider` | +| \--nutui-signature-border-color | 签名边框颜色 | `$color-border` | | \--nutui-signature-border-width | 签名边框宽度 | `1px` | | \--nutui-signature-background-color | 签名背景颜色 | `$white` | -| \--nutui-signature-font-size | 签名文字字号 | `$font-text` | +| \--nutui-signature-font-size | 签名文字字号 | `$font-size` | diff --git a/src/packages/signature/doc.zh-TW.md b/src/packages/signature/doc.zh-TW.md index 31f746b4be..dbb62776d3 100644 --- a/src/packages/signature/doc.zh-TW.md +++ b/src/packages/signature/doc.zh-TW.md @@ -116,7 +116,7 @@ export default App; | 名稱 | 說明 | 默認值 | | --- | --- | --- | | \--nutui-signature-border-height | 簽名區域高度 | `10rem` | -| \--nutui-signature-border-color | 簽名邊框顏色 | `$color-divider` | +| \--nutui-signature-border-color | 簽名邊框顏色 | `$color-border` | | \--nutui-signature-border-width | 簽名邊框寬度 | `1px` | | \--nutui-signature-background-color | 簽名背景顏色 | `$white` | -| \--nutui-signature-font-size | 簽名文字字號 | `$font-text` | \ No newline at end of file +| \--nutui-signature-font-size | 簽名文字字號 | `$font-size` | \ No newline at end of file diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss index 2e5f58b461..f9e3bebe8c 100644 --- a/src/packages/skeleton/skeleton.scss +++ b/src/packages/skeleton/skeleton.scss @@ -49,9 +49,9 @@ z-index: 1; background: linear-gradient( 90deg, - var(--nutui-white-0), - var(--nutui-white-7) 50%, - var(--nutui-white-0) 80% + var(--nutui-white-1), + var(--nutui-white-8) 50%, + var(--nutui-white-1) 80% ); background-repeat: no-repeat; animation: nut-skeleton 2s ease-in-out 0s infinite; diff --git a/src/packages/space/__test__/__snapshots__/space.spec.tsx.snap b/src/packages/space/__test__/__snapshots__/space.spec.tsx.snap new file mode 100644 index 0000000000..620a2af994 --- /dev/null +++ b/src/packages/space/__test__/__snapshots__/space.spec.tsx.snap @@ -0,0 +1,64 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should match snapshot 1`] = ` +
+
+
+ +
+
+ +
+
+ +
+
+
+`; diff --git a/src/packages/space/__test__/space.spec.tsx b/src/packages/space/__test__/space.spec.tsx new file mode 100644 index 0000000000..082f181520 --- /dev/null +++ b/src/packages/space/__test__/space.spec.tsx @@ -0,0 +1,70 @@ +import * as React from 'react' +import { render } from '@testing-library/react' +import '@testing-library/jest-dom' + +import { Space } from '../space' +import Button from '@/packages/button' + +const prefixCls = 'nut-space' + +test('should match snapshot', () => { + const { container } = render( + + + + + + ) + expect(container).toMatchSnapshot() +}) + +test('render with props direction', () => { + const { container } = render( + + + + + + ) + const nutSpace = container.getElementsByClassName('nut-space')[0] + expect(nutSpace).toHaveClass(`${prefixCls}-vertical`) +}) + +test('render with props align', () => { + const { container } = render( + + + + + + ) + const nutSpace = container.getElementsByClassName('nut-space')[0] + expect(nutSpace).toHaveClass(`${prefixCls}-align-end`) +}) + +test('render with props justify', () => { + const { container } = render( + + + + + + ) + const nutSpace = container.getElementsByClassName('nut-space')[0] + expect(nutSpace).toHaveClass(`${prefixCls}-justify-center`) +}) + +test('render with props wrap', () => { + const { container } = render( + + + + + + + + + ) + const nutSpace = container.getElementsByClassName('nut-space')[0] + expect(nutSpace).toHaveClass(`${prefixCls}-wrap`) +}) diff --git a/src/packages/space/demo.taro.tsx b/src/packages/space/demo.taro.tsx new file mode 100644 index 0000000000..84175b2c0f --- /dev/null +++ b/src/packages/space/demo.taro.tsx @@ -0,0 +1,120 @@ +import React from 'react' +import Taro from '@tarojs/taro' +import { + Space, + Button, + Cell, + ConfigProvider, +} from '@/packages/nutui.react.taro' +import { useTranslate } from '@/sites/assets/locale/taro' +import Header from '@/sites/components/header' + +interface Button { + button1: string + button2: string + button3: string + button4: string + button5: string + button6: string +} +interface T extends Button { + basic: string + wrap: string + direction: string + spaceGap: string +} + +const SpaceDemo = () => { + const [translated] = useTranslate({ + 'zh-CN': { + basic: '基本用法', + wrap: '换行', + direction: '垂直', + spaceGap: '间距大小', + button1: '按钮1', + button2: '按钮2', + button3: '按钮3', + button4: '按钮4', + button5: '按钮5', + button6: '按钮6', + }, + 'zh-TW': { + basic: '基本用法', + wrap: '換行', + direction: '垂直', + spaceGap: '間距大小', + button1: '按钮1', + button2: '按钮2', + button3: '按钮3', + button4: '按钮4', + button5: '按钮5', + button6: '按钮6', + }, + 'en-US': { + basic: 'Basic Usage', + wrap: 'wrap', + direction: 'Direction', + spaceGap: 'SpaceGap', + button1: 'button1', + button2: 'button2', + button3: 'button3', + button4: 'button4', + button5: 'button5', + button6: 'button6', + }, + }) + + return ( + <> +
+
+

{translated.basic}

+ + + + + + + + +

{translated.wrap}

+ + + + + + + + + + + +

{translated.direction}

+ + + + + + + + +

{translated.spaceGap}

+ + + + + + + + + +
+ + ) +} + +export default SpaceDemo diff --git a/src/packages/space/demo.tsx b/src/packages/space/demo.tsx new file mode 100644 index 0000000000..3aa7dd1b98 --- /dev/null +++ b/src/packages/space/demo.tsx @@ -0,0 +1,114 @@ +import React from 'react' +import { Space } from './space' +import Button from '@/packages/button' +import Cell from '@/packages/cell' +import ConfigProvider from '@/packages/configprovider' +import { useTranslate } from '@/sites/assets/locale' + +interface Button { + button1: string + button2: string + button3: string + button4: string + button5: string + button6: string +} +interface T extends Button { + basic: string + wrap: string + direction: string + spaceGap: string +} +const SpaceDemo = () => { + const [translated] = useTranslate({ + 'zh-CN': { + basic: '基本用法', + wrap: '换行', + direction: '垂直', + spaceGap: '间距大小', + button1: '按钮1', + button2: '按钮2', + button3: '按钮3', + button4: '按钮4', + button5: '按钮5', + button6: '按钮6', + }, + 'zh-TW': { + basic: '基本用法', + wrap: '換行', + direction: '垂直', + spaceGap: '間距大小', + button1: '按钮1', + button2: '按钮2', + button3: '按钮3', + button4: '按钮4', + button5: '按钮5', + button6: '按钮6', + }, + 'en-US': { + basic: 'Basic Usage', + wrap: 'wrap', + direction: 'Direction', + spaceGap: 'SpaceGap', + button1: 'button1', + button2: 'button2', + button3: 'button3', + button4: 'button4', + button5: 'button5', + button6: 'button6', + }, + }) + + return ( + <> +
+

{translated.basic}

+ + + + + + + + +

{translated.wrap}

+ + + + + + + + + + + +

{translated.direction}

+ + + + + + + + +

{translated.spaceGap}

+ + + + + + + + + +
+ + ) +} + +export default SpaceDemo diff --git a/src/packages/space/doc.en-US.md b/src/packages/space/doc.en-US.md new file mode 100644 index 0000000000..018ec9f003 --- /dev/null +++ b/src/packages/space/doc.en-US.md @@ -0,0 +1,129 @@ +# Space + +## Intro + +Maintain the same width in the arrangement of elements. + +## Install + +```tsx +import { Space } from '@nutui/nutui-react'; +``` + +## Code + +### Basic Usage + +:::demo + +```tsx + +import React from 'react'; +import { Space, Button } from '@nutui/nutui-react'; + + const App = () => { + return ( + + + + + + ); +}; +export default App; + +``` + +### Wrap + +:::demo + +```tsx +import React from 'react'; +import { Space, Button } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + + + + + ); +}; +export default App; + +``` + +### Direction + +:::demo + +```tsx +import React from 'react'; +import { Space, Button } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + + ); +}; +export default App; + +``` + +### Gap + +:::demo + +```tsx +import React from 'react'; +import { Space, Button,ConfigProvider } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + + + + ); +}; +export default App; + +``` + +## API + +### Props + +| Property | Description | Type | Default | +| --- |------------------------------|--------------------------------------------------------------------|------------------------------------------------------------------| +| direction | space direction | `vertical \| horizontal` | `horizontal` | +| align | space align | `start \| end \|center \| baseline` | `-` | +| justify | space justify | `start \| end \| center \| between \| around \| evenly \| stretch` | `-` | +| wrap | space wrap，Only valid when horizontal | `boolean / false` | `-` | + +## Theming + +### CSS Variables + +The component provides the following CSS variables, which can be used to customize styles. Please refer +to [ConfigProvider component](#/en-US/component/configprovider). + +| Name | Description | Default | +| --- | --- |--------------| +| \--nutui-space-gap | `8px` | spacing size | \ No newline at end of file diff --git a/src/packages/space/doc.md b/src/packages/space/doc.md new file mode 100644 index 0000000000..e14300c44c --- /dev/null +++ b/src/packages/space/doc.md @@ -0,0 +1,128 @@ +# Space 间距 + +### 介绍 + +元素排列中保持相同的宽度。 + +### 安装 + +```tsx +import { Space } from '@nutui/nutui-react'; +``` + +## 代码演示 + +### 基础用法 + +:::demo + +```tsx + +import React from 'react'; +import { Space, Button } from '@nutui/nutui-react'; + + const App = () => { + return ( + + + + + + ); +}; +export default App; + +``` + +### 换行 + +:::demo + +```tsx +import React from 'react'; +import { Space, Button } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + + + + + ); +}; +export default App; + +``` + +### 垂直 + +:::demo + +```tsx +import React from 'react'; +import { Space, Button } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + + ); +}; +export default App; + +``` + +### 间距大小 + +:::demo + +```tsx +import React from 'react'; +import { Space, Button,ConfigProvider } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + + + + ); +}; +export default App; + +``` + +## API + +### Props + +| 属性 | 说明 | 类型 | 默认值 | +| --- |--------------------------|---------------------------------------------------------------------|--------------------------------| +| direction | 间距方向 | ` vertical \| horizontal` | horizontal | +| align | 交叉轴对齐方式 | `start \| end \|center \| baseline` | `-` | +| justify | 主轴对齐方式 | `start \| end \| center \| between \| around \| evenly \| stretch` | `-` | +| wrap | 是否自动换行，仅在 horizontal 时有效 | `boolean / false` | `-` | + +## 主题定制 + +### 样式变量 + +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/components/config-provider)。 + +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| \--nutui-space-gap | `8px` | 间距大小 | \ No newline at end of file diff --git a/src/packages/space/doc.taro.md b/src/packages/space/doc.taro.md new file mode 100644 index 0000000000..2aea5e1149 --- /dev/null +++ b/src/packages/space/doc.taro.md @@ -0,0 +1,128 @@ +# Space组件 + +### 介绍 + +元素排列中保持相同的宽度。 + +### 安装 + +```tsx +import { Space } from '@nutui/nutui-react-taro'; +``` + +## 代码演示 + +### 基础用法 + +:::demo + +```tsx + +import React from 'react'; +import { Space, Button } from '@nutui/nutui-react-taro'; + + const App = () => { + return ( + + + + + + ); +}; +export default App; + +``` + +### 换行 + +:::demo + +```tsx +import React from 'react'; +import { Space, Button } from '@nutui/nutui-react-taro'; + +const App = () => { + return ( + + + + + + + + + ); +}; +export default App; + +``` + +### 垂直 + +:::demo + +```tsx +import React from 'react'; +import { Space, Button } from '@nutui/nutui-react-taro'; + +const App = () => { + return ( + + + + + + ); +}; +export default App; + +``` + +### 间距大小 + +:::demo + +```tsx +import React from 'react'; +import { Space, Button,ConfigProvider } from '@nutui/nutui-react-taro'; + +const App = () => { + return ( + + + + + + + + ); +}; +export default App; + +``` + +## API + +### Props + +| 属性 | 描述 | 类型 | 默认值 | +| --- | --- | --- | --- | +| direction | 间距方向 | `'vertical'｜ 'horizontal'` | `'horizontal'` | +| align | 交叉轴对齐方式 | `'start'｜'end'｜'center'｜'baseline'` | `-` | +| justify | 主轴对齐方式 | `'start' ｜ 'end' ｜ 'center' ｜ 'between' ｜ 'around' ｜ 'evenly' ｜ 'stretch'` | `-` | +| wrap | 是否自动换行，仅在 horizontal 时有效 | `boolean / false` | `-` | + +## 主题定制 + +### 样式变量 + +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/components/config-provider)。 + +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| \--nutui-space-gap | `8px` | 间距大小 | \ No newline at end of file diff --git a/src/packages/space/doc.zh-TW.md b/src/packages/space/doc.zh-TW.md new file mode 100644 index 0000000000..e5f7de0f1c --- /dev/null +++ b/src/packages/space/doc.zh-TW.md @@ -0,0 +1,128 @@ +# Space 間距 + +### 介紹 + +元素排列中保持相同的寬度。 + +### 安裝 + +```tsx +import { Space } from '@nutui/nutui-react'; +``` + +## 代碼演示 + +### 基礎用法 + +:::demo + +```tsx + +import React from 'react'; +import { Space, Button } from '@nutui/nutui-react'; + + const App = () => { + return ( + + + + + + ); +}; +export default App; + +``` + +### 換行 + +:::demo + +```tsx +import React from 'react'; +import { Space, Button } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + + + + + ); +}; +export default App; + +``` + +### 垂直 + +:::demo + +```tsx +import React from 'react'; +import { Space, Button } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + + ); +}; +export default App; + +``` + +### 間距大小 + +:::demo + +```tsx +import React from 'react'; +import { Space, Button,ConfigProvider } from '@nutui/nutui-react'; + +const App = () => { + return ( + + + + + + + + ); +}; +export default App; + +``` + +## API + +### Props + +| 屬性 | 說明 | 類型 | 默認值 | +| --- | --- | --- | --- | +| direction | 間距方嚮 | `'vertical'｜ 'horizontal'` | `'horizontal'` | +| align | 交叉軸對齊方式 | `'start'｜'end'｜'center'｜'baseline'` | `-` | +| justify | 主軸對齊方式 | `'start' ｜ 'end' ｜ 'center' ｜ 'between' ｜ 'around' ｜ 'evenly' ｜ 'stretch'` | `-` | +| wrap | 是否自動換行，僅在 horizontal 時有效 | `boolean / false` | `-` | + +## 主題定制 + +### 樣式變量 + +組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。 + +| 名稱 | 默認值 | 說明 | +| --- | --- | --- | +| \--nutui-space-gap | `8px` | 间距大小 | \ No newline at end of file diff --git a/src/packages/space/index.taro.ts b/src/packages/space/index.taro.ts new file mode 100644 index 0000000000..dbc8bc29e4 --- /dev/null +++ b/src/packages/space/index.taro.ts @@ -0,0 +1,3 @@ +import { Space } from './space.taro' + +export default Space diff --git a/src/packages/space/index.ts b/src/packages/space/index.ts new file mode 100644 index 0000000000..69188b0df5 --- /dev/null +++ b/src/packages/space/index.ts @@ -0,0 +1,3 @@ +import { Space } from './space' + +export default Space diff --git a/src/packages/space/space.scss b/src/packages/space/space.scss new file mode 100644 index 0000000000..c5769f5b6e --- /dev/null +++ b/src/packages/space/space.scss @@ -0,0 +1,73 @@ +.nut-space { + display: flex; + + &-item { + flex: none; + } + + &-vertical { + flex-direction: column; + > .nut-space-item { + margin-bottom: $space-gap; + &:last-child { + margin-bottom: 0; + } + } + } + + &-horizontal { + flex-direction: row; + > .nut-space-item { + margin-right: $space-gap; + &:last-child { + margin-right: 0; + } + } + &.nut-space-wrap { + flex-wrap: wrap; + margin-bottom: calc(#{$space-gap} * -1); + > .nut-space-item { + padding-bottom: $space-gap; + } + } + } + + &-align { + &-center { + align-items: center; + } + &-start { + align-items: flex-start; + } + &-end { + align-items: flex-end; + } + &-baseline { + align-items: baseline; + } + } + + &-justify { + &-center { + justify-content: center; + } + &-start { + justify-content: flex-start; + } + &-end { + justify-content: flex-end; + } + &-between { + justify-content: space-between; + } + &-around { + justify-content: space-around; + } + &-evenly { + justify-content: space-evenly; + } + &-stretch { + justify-content: stretch; + } + } +} diff --git a/src/packages/space/space.taro.tsx b/src/packages/space/space.taro.tsx new file mode 100644 index 0000000000..e683df41ee --- /dev/null +++ b/src/packages/space/space.taro.tsx @@ -0,0 +1,54 @@ +import React, { FunctionComponent } from 'react' +import classNames from 'classnames' +import { BasicComponent } from '@/utils/typings' + +const prefixCls = 'nut-space' + +export interface SpaceProps extends BasicComponent { + direction: 'horizontal' | 'vertical' + align: 'start' | 'end' | 'center' | 'baseline' + justify: + | 'start' + | 'end' + | 'center' + | 'between' + | 'around' + | 'evenly' + | 'stretch' + wrap: boolean +} +const defaultProps = { + direction: 'horizontal', +} as SpaceProps + +export const Space: FunctionComponent< + Partial & React.HTMLAttributes +> = (props) => { + const { className, style, children, wrap, align, direction, justify } = { + ...defaultProps, + ...props, + } + const cls = classNames( + className, + prefixCls, + wrap && `${prefixCls}-wrap`, + direction && `${prefixCls}-${direction}`, + align && `${prefixCls}-align-${align}`, + justify && `${prefixCls}-justify-${justify}` + ) + return ( +
+ {React.Children.map(children, (child) => { + return ( + child !== null && + child !== undefined && ( +
{child}
+ ) + ) + })} +
+ ) +} + +Space.defaultProps = defaultProps +Space.displayName = 'NutSpace' diff --git a/src/packages/space/space.tsx b/src/packages/space/space.tsx new file mode 100644 index 0000000000..e683df41ee --- /dev/null +++ b/src/packages/space/space.tsx @@ -0,0 +1,54 @@ +import React, { FunctionComponent } from 'react' +import classNames from 'classnames' +import { BasicComponent } from '@/utils/typings' + +const prefixCls = 'nut-space' + +export interface SpaceProps extends BasicComponent { + direction: 'horizontal' | 'vertical' + align: 'start' | 'end' | 'center' | 'baseline' + justify: + | 'start' + | 'end' + | 'center' + | 'between' + | 'around' + | 'evenly' + | 'stretch' + wrap: boolean +} +const defaultProps = { + direction: 'horizontal', +} as SpaceProps + +export const Space: FunctionComponent< + Partial & React.HTMLAttributes +> = (props) => { + const { className, style, children, wrap, align, direction, justify } = { + ...defaultProps, + ...props, + } + const cls = classNames( + className, + prefixCls, + wrap && `${prefixCls}-wrap`, + direction && `${prefixCls}-${direction}`, + align && `${prefixCls}-align-${align}`, + justify && `${prefixCls}-justify-${justify}` + ) + return ( +
+ {React.Children.map(children, (child) => { + return ( + child !== null && + child !== undefined && ( +
{child}
+ ) + ) + })} +
+ ) +} + +Space.defaultProps = defaultProps +Space.displayName = 'NutSpace' diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss index a1497f0c04..e0b0cbb17e 100644 --- a/src/packages/step/step.scss +++ b/src/packages/step/step.scss @@ -175,7 +175,7 @@ margin-top: -7px; width: 14px; height: 14px; - background-color: $color-primary-end; + background-color: $color-primary-stop-2; border-radius: 50%; opacity: 0.23; } diff --git a/src/packages/steps/demo.scss b/src/packages/steps/demo.scss index e212c045d0..1820ce46e5 100644 --- a/src/packages/steps/demo.scss +++ b/src/packages/steps/demo.scss @@ -10,7 +10,7 @@ .steps-wrapper { width: 100%; padding: 15px 0; - background-color: $color-card-background; + background-color: $color-background-overlay; .steps-button { text-align: center; diff --git a/src/packages/steps/demo.tsx b/src/packages/steps/demo.tsx index 953d83a794..2d39cb3178 100644 --- a/src/packages/steps/demo.tsx +++ b/src/packages/steps/demo.tsx @@ -56,18 +56,18 @@ const customTheme2 = { const customTheme3 = { nutuiStepsDotHeadMargin: '0 0 12px 0', - nutuiBrandColorEnd: 'var(--nutui-gray-0)', + nutuiBrandColorEnd: 'var(--nutui-gray-1)', nutuiStepsDotIconBorder: '0', nutuiStepsBaseIconWidth: '6px', nutuiStepsBaseIconHeight: '6px', - nutuiStepsBaseLineBackground: `var(--nutui-gray-3)`, - nutuiStepsFinishIconBgColor: 'var(--nutui-gray-6)', - nutuiStepsFinishIconColor: 'var(--nutui-gray-6)', - nutuiStepsProcessIconBgColor: 'var(--nutui-gray-0)', - nutuiStepsWaitIconBgColor: 'var(--nutui-gray-3)', + nutuiStepsBaseLineBackground: `var(--nutui-gray-4)`, + nutuiStepsFinishIconBgColor: 'var(--nutui-gray-7)', + nutuiStepsFinishIconColor: 'var(--nutui-gray-7)', + nutuiStepsProcessIconBgColor: 'var(--nutui-gray-1)', + nutuiStepsWaitIconBgColor: 'var(--nutui-gray-4)', nutuiStepsBaseLineWidth: '45px', nutuiStepsBaseLineHeight: '1px', - nutuiStepsFinishLineBackground: `var(--nutui-gray-6)`, + nutuiStepsFinishLineBackground: `var(--nutui-gray-7)`, } const StepsDemo = () => { diff --git a/src/packages/steps/doc.en-US.md b/src/packages/steps/doc.en-US.md index 244a5119d0..96bedbdf8b 100644 --- a/src/packages/steps/doc.en-US.md +++ b/src/packages/steps/doc.en-US.md @@ -474,12 +474,10 @@ const App = () => { ( - <> -

The receiving address is：

-

Jingdong building, yard 18, Kechuang 11th Street, Beijing Economic and Technological

- - )} + description={<> +

The receiving address is：

+

Jingdong building, yard 18, Kechuang 11th Street, Beijing Economic and Technological

+ } > 3 diff --git a/src/packages/steps/doc.md b/src/packages/steps/doc.md index e9600b9edc..5879da02e9 100644 --- a/src/packages/steps/doc.md +++ b/src/packages/steps/doc.md @@ -475,12 +475,10 @@ const App = () => { ( - <> -

收货地址为：

-

北京市经济技术开发区科创十一街18号院京东大厦

- - )} + description={<> +

收货地址为：

+

北京市经济技术开发区科创十一街18号院京东大厦

+ } > 3 diff --git a/src/packages/steps/doc.taro.md b/src/packages/steps/doc.taro.md index 998c35757b..ecd73cd3d9 100644 --- a/src/packages/steps/doc.taro.md +++ b/src/packages/steps/doc.taro.md @@ -474,12 +474,10 @@ const App = () => { ( - <> -

收货地址为：

-

北京市经济技术开发区科创十一街18号院京东大厦

- - )} + renderContent={<> +

收货地址为：

+

北京市经济技术开发区科创十一街18号院京东大厦

+ } > 3 diff --git a/src/packages/steps/doc.zh-TW.md b/src/packages/steps/doc.zh-TW.md index 9a4aaf51a5..f15083de16 100644 --- a/src/packages/steps/doc.zh-TW.md +++ b/src/packages/steps/doc.zh-TW.md @@ -475,12 +475,10 @@ const App = () => { ( - <> -

收貨地址為：

-

北京市經濟技術開發區科創十一街18號院京東大廈

- - )} + description={<> +

收貨地址為：

+

北京市經濟技術開發區科創十一街18號院京東大廈

+ } > 3 diff --git a/src/packages/swipe/doc.en-US.md b/src/packages/swipe/doc.en-US.md index 2c63a969cc..5097644155 100644 --- a/src/packages/swipe/doc.en-US.md +++ b/src/packages/swipe/doc.en-US.md @@ -273,10 +273,10 @@ export default App; | disabled | disable sliding | `boolean` | `false` | | onOpen | open the cell sidebar | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | `-`| | onClose | collapse the cell sidebar | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | `-`| -| onActionClick | triggered when clicking on the left or right | `(event: Event, position: 'left' \|'right') => void` | `-`| -| onTouchStart | onTouchStart | `(event: Event) => void` | `-`| -| onTouchMove | onTouchMove | `(event: Event) => void` | `-`| -| onTouchEnd | onTouchEnd | `(event: Event) => void` | `-`| +| onActionClick | triggered when clicking on the left or right | `(event: MouseEvent, position: 'left' \|'right') => void` | `-`| +| onTouchStart | onTouchStart | `(event: TouchEvent) => void` | `-`| +| onTouchMove | onTouchMove | `(event: TouchEvent) => void` | `-`| +| onTouchEnd | onTouchEnd | `(event: TouchEvent) => void` | `-`| ### Ref diff --git a/src/packages/swipe/doc.md b/src/packages/swipe/doc.md index ff83194136..1eb8c7b7c0 100644 --- a/src/packages/swipe/doc.md +++ b/src/packages/swipe/doc.md @@ -271,10 +271,10 @@ export default App; | disabled | 是否禁用滑动 | `boolean` | `false` | | onOpen | 打开单元格侧边栏 | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | `-` | | onClose | 收起单元格侧边栏 | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | `-` | -| onActionClick | 点击左侧或者右侧时触发 | `(event: Event, position: 'left' \| 'right') => void` | `-` | -| onTouchStart | onTouchStart | `(event: Event) => void` | `-` | -| onTouchMove | onTouchMove | `(event: Event) => void` | `-` | -| onTouchEnd | onTouchEnd | `(event: Event) => void` | `-` | +| onActionClick | 点击左侧或者右侧时触发 | `(event: MouseEvent, position: 'left' \| 'right') => void` | `-` | +| onTouchStart | onTouchStart | `(event: TouchEvent) => void` | `-` | +| onTouchMove | onTouchMove | `(event: TouchEvent) => void` | `-` | +| onTouchEnd | onTouchEnd | `(event: TouchEvent) => void` | `-` | ### Ref diff --git a/src/packages/swipe/doc.taro.md b/src/packages/swipe/doc.taro.md index 748b177e46..96b90ef9aa 100644 --- a/src/packages/swipe/doc.taro.md +++ b/src/packages/swipe/doc.taro.md @@ -279,10 +279,10 @@ export default App; | disabled | 是否禁用滑动 | `boolean` | `false` | | onOpen | 打开单元格侧边栏 | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | `-` | | onClose | 收起单元格侧边栏 | `(name, position): { name: string \| number, position: 'left' \| 'right' } => void` | `-` | -| onActionClick | 点击左侧或者右侧时触发 | `(event: Event, position: 'left' \|'right') => void` | `-` | -| onTouchStart | onTouchStart | `(event: Event) => void` | `-` | -| onTouchMove | onTouchMove | `(event: Event) => void` | `-` | -| onTouchEnd | onTouchEnd | `(event: Event) => void` | `-` | +| onActionClick | 点击左侧或者右侧时触发 | `(event: MouseEvent, position: 'left' \|'right') => void` | `-` | +| onTouchStart | onTouchStart | `(event: TouchEvent) => void` | `-` | +| onTouchMove | onTouchMove | `(event: TouchEvent) => void` | `-` | +| onTouchEnd | onTouchEnd | `(event: TouchEvent) => void` | `-` | ### Ref diff --git a/src/packages/swipe/swipe.taro.tsx b/src/packages/swipe/swipe.taro.tsx index 3b67181b37..bb2c5d994c 100644 --- a/src/packages/swipe/swipe.taro.tsx +++ b/src/packages/swipe/swipe.taro.tsx @@ -2,10 +2,10 @@ import React, { useRef, forwardRef, useState, - TouchEvent, useImperativeHandle, useEffect, } from 'react' +import type { TouchEvent, MouseEvent } from 'react' import classNames from 'classnames' import { nextTick, useReady } from '@tarojs/taro' import { useTouch } from '@/utils/use-touch' @@ -57,10 +57,13 @@ export interface SwipeProps extends BasicComponent { position: SwipeSide }) => void /** 点击时触发 */ - onActionClick?: (event: Event, position: SwipeSide) => void - onTouchStart?: (event: Event) => void - onTouchEnd?: (event: Event) => void - onTouchMove?: (event: Event) => void + onActionClick?: ( + event: MouseEvent, + position: SwipeSide + ) => void + onTouchStart?: (event: TouchEvent) => void + onTouchEnd?: (event: TouchEvent) => void + onTouchMove?: (event: TouchEvent) => void } const defaultProps = { ...ComponentDefaults, @@ -115,7 +118,7 @@ export const Swipe = forwardRef< const rightWidth = actionWidth.right - const onTouchStart = async (event: Event) => { + const onTouchStart = async (event: TouchEvent) => { if (leftWrapper.current) { const leftRect = await getRectByTaro(leftWrapper.current) setActionWidth((v) => ({ ...v, left: leftRect.width })) @@ -131,7 +134,7 @@ export const Swipe = forwardRef< } } - const onTouchMove = (event: Event) => { + const onTouchMove = (event: TouchEvent) => { if (props.disabled) { return } @@ -156,7 +159,7 @@ export const Swipe = forwardRef< } } - const onTouchEnd = (event: Event) => { + const onTouchEnd = (event: TouchEvent) => { if (state.dragging) { setState((v) => ({ ...v, dragging: false })) toggle(state.offset > 0 ? 'left' : 'right') @@ -215,7 +218,7 @@ export const Swipe = forwardRef< id="left" ref={side === 'left' ? leftWrapper : rightWrapper} className={`${classPrefix}__${side}`} - onClick={(e: any) => handleOperate(e, side)} + onClick={(e) => handleOperate(e, side)} > {props[`${side}Action`]}
@@ -223,7 +226,10 @@ export const Swipe = forwardRef< } return null } - const handleOperate = (event: Event, position: SwipeSide) => { + const handleOperate = ( + event: MouseEvent, + position: SwipeSide + ) => { event.stopPropagation() if (props.beforeClose) { props.beforeClose(position) @@ -262,9 +268,9 @@ export const Swipe = forwardRef<
onTouchStart(e)} - onTouchMove={(e: any) => onTouchMove(e)} - onTouchEnd={(e: any) => onTouchEnd(e)} + onTouchStart={(e) => onTouchStart(e)} + onTouchMove={(e) => onTouchMove(e)} + onTouchEnd={(e) => onTouchEnd(e)} style={style} >
diff --git a/src/packages/swipe/swipe.tsx b/src/packages/swipe/swipe.tsx index 900b061fb8..6936b98f95 100644 --- a/src/packages/swipe/swipe.tsx +++ b/src/packages/swipe/swipe.tsx @@ -2,11 +2,11 @@ import React, { useRef, forwardRef, useState, - TouchEvent, useCallback, useImperativeHandle, useEffect, } from 'react' +import type { TouchEvent, MouseEvent } from 'react' import classNames from 'classnames' import { useTouch } from '@/utils/use-touch' import { getRect } from '@/utils/use-client-rect' @@ -50,10 +50,14 @@ export interface SwipeProps extends BasicComponent { name: string | number position: SwipeSide }) => void - onActionClick?: (event: Event, position: SwipeSide) => void - onTouchStart?: (event: Event) => void - onTouchEnd?: (event: Event) => void - onTouchMove?: (event: Event) => void + /** 点击时触发 */ + onActionClick?: ( + event: MouseEvent, + position: SwipeSide + ) => void + onTouchStart?: (event: TouchEvent) => void + onTouchEnd?: (event: TouchEvent) => void + onTouchMove?: (event: TouchEvent) => void } const defaultProps = { name: '', @@ -67,7 +71,8 @@ export const Swipe = forwardRef< > >((props, instanceRef) => { const classPrefix = 'nut-swipe' - const touch: any = useTouch() + const touch = useTouch() + const { children, className, style } = { ...defaultProps, ...props } const root: any = useRef() const opened = useRef(false) @@ -88,7 +93,8 @@ export const Swipe = forwardRef< } const leftWidth = actionWidth.left const rightWidth = actionWidth.right - const onTouchStart = (event: Event) => { + + const onTouchStart = (event: TouchEvent) => { if (!props.disabled) { startOffset.current = state.offset touch.start(event) @@ -96,7 +102,7 @@ export const Swipe = forwardRef< } } - const onTouchMove = (event: Event) => { + const onTouchMove = (event: TouchEvent) => { if (props.disabled) { return } @@ -122,7 +128,7 @@ export const Swipe = forwardRef< } } - const onTouchEnd = (event: Event) => { + const onTouchEnd = (event: TouchEvent) => { if (state.dragging) { setState((v) => ({ ...v, dragging: false })) toggle(state.offset > 0 ? 'left' : 'right') @@ -202,7 +208,7 @@ export const Swipe = forwardRef<
handleOperate(e, side)} + onClick={(e) => handleOperate(e, side)} > {props[`${side}Action`]}
@@ -210,7 +216,10 @@ export const Swipe = forwardRef< } return null } - const handleOperate = (event: Event, position: SwipeSide) => { + const handleOperate = ( + event: MouseEvent, + position: SwipeSide + ) => { event.stopPropagation() if (props.beforeClose) { props.beforeClose(position) @@ -248,9 +257,9 @@ export const Swipe = forwardRef<
onTouchStart(e)} - onTouchMove={(e: any) => onTouchMove(e)} - onTouchEnd={(e: any) => onTouchEnd(e)} + onTouchStart={(e) => onTouchStart(e)} + onTouchMove={(e) => onTouchMove(e)} + onTouchEnd={(e) => onTouchEnd(e)} style={style} >
diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss index bff9c39ee5..9a8466e49f 100644 --- a/src/packages/switch/switch.scss +++ b/src/packages/switch/switch.scss @@ -29,7 +29,7 @@ &__label { color: $color-primary-text; - font-size: $font-help; + font-size: $font-size-small; &.open { transform: translateX(-16px); diff --git a/src/packages/switch/switch.taro.tsx b/src/packages/switch/switch.taro.tsx index 1634b499f3..042d746917 100644 --- a/src/packages/switch/switch.taro.tsx +++ b/src/packages/switch/switch.taro.tsx @@ -27,6 +27,7 @@ export const Switch: FunctionComponent> = (props) => { className, style, onChange, + ...rest } = { ...defaultProps, ...props, @@ -50,7 +51,12 @@ export const Switch: FunctionComponent> = (props) => { setValue(!value) } return ( -
onClick(e)} style={style}> +
onClick(e)} + style={style} + {...rest} + >
{!value &&
} {activeText && ( diff --git a/src/packages/switch/switch.tsx b/src/packages/switch/switch.tsx index 1634b499f3..042d746917 100644 --- a/src/packages/switch/switch.tsx +++ b/src/packages/switch/switch.tsx @@ -27,6 +27,7 @@ export const Switch: FunctionComponent> = (props) => { className, style, onChange, + ...rest } = { ...defaultProps, ...props, @@ -50,7 +51,12 @@ export const Switch: FunctionComponent> = (props) => { setValue(!value) } return ( -
onClick(e)} style={style}> +
onClick(e)} + style={style} + {...rest} + >
{!value &&
} {activeText && ( diff --git a/src/packages/tabbar/doc.en-US.md b/src/packages/tabbar/doc.en-US.md index c0a5ad8b17..991d4bf978 100644 --- a/src/packages/tabbar/doc.en-US.md +++ b/src/packages/tabbar/doc.en-US.md @@ -291,7 +291,7 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-tabbar-border-top | borderTop | `1px solid #eee` | | \--nutui-tabbar-border-bottom | borderBottom | `1px solid #eee` | | \--nutui-tabbar-box-shadow | boxShadow | `none` | -| \--nutui-tabbar-text-font-size | title fontSize | `$font-size-0` | -| \--nutui-tabbar-text-large-font-size | title fontSize when icon is null | `$font-card-title` | +| \--nutui-tabbar-text-font-size | title fontSize | `$font-size-xs` | +| \--nutui-tabbar-text-large-font-size | title fontSize when icon is null | `$font-size-large` | | \--nutui-tabbar-text-line-height | title lineHeight | `initial` | | \--nutui-tabbar-text-margin-top | title marginTop | `3px` | \ No newline at end of file diff --git a/src/packages/tabbar/doc.md b/src/packages/tabbar/doc.md index 020a123d95..026caa84f8 100644 --- a/src/packages/tabbar/doc.md +++ b/src/packages/tabbar/doc.md @@ -280,7 +280,7 @@ export default App; | \--nutui-tabbar-border-top | 上边框 | `1px solid #eee` | | \--nutui-tabbar-border-bottom | 下边框 | `1px solid #eee` | | \--nutui-tabbar-box-shadow | 阴影 | `none` | -| \--nutui-tabbar-text-font-size | 标题字体大小 | `$font-size-0` | -| \--nutui-tabbar-text-large-font-size | 无图标时标题字体大小 | `$font-card-title` | +| \--nutui-tabbar-text-font-size | 标题字体大小 | `$font-size-xs` | +| \--nutui-tabbar-text-large-font-size | 无图标时标题字体大小 | `$font-size-large` | | \--nutui-tabbar-text-line-height | 字体行高 | `initial` | | \--nutui-tabbar-text-margin-top | 标题上外边距 | `3px` | \ No newline at end of file diff --git a/src/packages/tabbar/doc.taro.md b/src/packages/tabbar/doc.taro.md index 4f5175a305..74f9c28501 100644 --- a/src/packages/tabbar/doc.taro.md +++ b/src/packages/tabbar/doc.taro.md @@ -229,7 +229,7 @@ export default App; | \--nutui-tabbar-border-top | 上边框 | `1px solid #eee` | | \--nutui-tabbar-border-bottom | 下边框 | `1px solid #eee` | | \--nutui-tabbar-box-shadow | 阴影 | `none` | -| \--nutui-tabbar-text-font-size | 标题字体大小 | `$font-size-0` | -| \--nutui-tabbar-text-large-font-size | 无图标时标题字体大小 | `$font-card-title` | +| \--nutui-tabbar-text-font-size | 标题字体大小 | `$font-size-xs` | +| \--nutui-tabbar-text-large-font-size | 无图标时标题字体大小 | `$font-size-large` | | \--nutui-tabbar-text-line-height | 字体行高 | `initial` | | \--nutui-tabbar-text-margin-top | 标题上外边距 | `3px` | \ No newline at end of file diff --git a/src/packages/tabbar/doc.zh-TW.md b/src/packages/tabbar/doc.zh-TW.md index 6ded1f5a2e..5b58f5f8e0 100644 --- a/src/packages/tabbar/doc.zh-TW.md +++ b/src/packages/tabbar/doc.zh-TW.md @@ -280,7 +280,7 @@ export default App; | \--nutui-tabbar-border-top | 上邊框 | `1px solid #eee` | | \--nutui-tabbar-border-bottom | 下邊框 | `1px solid #eee` | | \--nutui-tabbar-box-shadow | 陰影 | `none` | -| \--nutui-tabbar-text-font-size | 標題字體大小 | `$font-size-0` | -| \--nutui-tabbar-text-large-font-size | 無圖標時標題字體大小 | `$font-card-title` | +| \--nutui-tabbar-text-font-size | 標題字體大小 | `$font-size-xs` | +| \--nutui-tabbar-text-large-font-size | 無圖標時標題字體大小 | `$font-size-large` | | \--nutui-tabbar-text-line-height | 字體行高 | `initial` | | \--nutui-tabbar-text-margin-top | 標題上外邊距 | `3px` | \ No newline at end of file diff --git a/src/packages/tabbaritem/tabbaritem.taro.tsx b/src/packages/tabbaritem/tabbaritem.taro.tsx index 4a47b26569..31228a4a51 100644 --- a/src/packages/tabbaritem/tabbaritem.taro.tsx +++ b/src/packages/tabbaritem/tabbaritem.taro.tsx @@ -49,6 +49,7 @@ export const TabbarItem: FunctionComponent> = ( top, right, handleClick, + ...rest } = { ...defaultProps, ...props, @@ -79,6 +80,7 @@ export const TabbarItem: FunctionComponent> = ( ...style, }} onClick={() => handleClick(index)} + {...rest} > {icon ? ( <> diff --git a/src/packages/tabbaritem/tabbaritem.tsx b/src/packages/tabbaritem/tabbaritem.tsx index 503d091fa6..dc31026494 100644 --- a/src/packages/tabbaritem/tabbaritem.tsx +++ b/src/packages/tabbaritem/tabbaritem.tsx @@ -49,6 +49,7 @@ export const TabbarItem: FunctionComponent> = ( top, right, handleClick, + ...rest } = { ...defaultProps, ...props, @@ -79,6 +80,7 @@ export const TabbarItem: FunctionComponent> = ( ...style, }} onClick={() => handleClick(index)} + {...rest} > {icon ? ( <> diff --git a/src/packages/table/table.scss b/src/packages/table/table.scss index c01cc4546f..8fff30d6c6 100644 --- a/src/packages/table/table.scss +++ b/src/packages/table/table.scss @@ -2,7 +2,7 @@ display: flex; width: 100%; flex-direction: column; - font-size: $font-text; + font-size: $font-size; color: $color-title; &__main { @@ -11,7 +11,7 @@ border-collapse: collapse; overflow-x: hidden; color: $color-title; - background-color: $color-card-background; + background-color: $color-background-overlay; &--striped { .nut-table__main__head { @@ -85,7 +85,7 @@ &__summary { color: $color-title; - background-color: $color-card-background; + background-color: $color-background-overlay; display: flex; align-items: center; justify-content: center; diff --git a/src/packages/tabs/doc.en-US.md b/src/packages/tabs/doc.en-US.md index 8868a1d5f2..9d7bb290f1 100644 --- a/src/packages/tabs/doc.en-US.md +++ b/src/packages/tabs/doc.en-US.md @@ -580,7 +580,7 @@ The component provides the following CSS variables, which can be used to customi | --- | --- | --- | | \--nutui-tabs-titles-background-color | Tab title background color | `$color-background` | | \--nutui-tabs-titles-border-radius | Tab title border rounded | `0` | -| \--nutui-tabs-titles-item-font-size | Tab title font size | `$font-text` | +| \--nutui-tabs-titles-item-font-size | Tab title font size | `$font-size` | | \--nutui-tabs-title-gap | Tab title margin | `0px` | | \--nutui-tabs-titles-item-active-font-weight | Tab selected titles font weight | `600` | | \--nutui-tabs-horizontal-tab-line-color | Horizontal line color | `linear-gradient(90deg, $color-primary 0%, rgba(#fa2c19, 0.15) 100%)` | @@ -589,7 +589,7 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-tabs-horizontal-tab-line-opacity | Opacity of horizontal tabs | `1` | | \--nutui-tabs-horizontal-titles-height | height of titles in horizontal direction | `46px` | | \--nutui-tabs-horizontal-titles-item-min-width | Minimum width of horizontal titles | `50px` | -| \--nutui-tabs-horizontal-titles-item-active-background-color | Background color of active tab titles in horizontal direction | `$color-card-background` | +| \--nutui-tabs-horizontal-titles-item-active-background-color | Background color of active tab titles in horizontal direction | `$color-background-overlay` | | \--nutui-tabs-horizontal-titles-item-active-line-width | Horizontal active tab line width | `40px` | | \--nutui-tabs-horizontal-titles-item-active-line-height | Height of active tabs line in horizontal direction | `3px` | | \--nutui-tabs-vertical-tab-line-color | vertical line color | `linear-gradient(180deg, $color-primary 0%, rgba(#fa2c19, 0.15) 100%)` | diff --git a/src/packages/tabs/doc.md b/src/packages/tabs/doc.md index 65ba8d8e22..960526e054 100644 --- a/src/packages/tabs/doc.md +++ b/src/packages/tabs/doc.md @@ -580,7 +580,7 @@ export default App; | --- | --- | --- | | \--nutui-tabs-titles-background-color | Tab 标题的背景色 | `$color-background` | | \--nutui-tabs-titles-border-radius | Tab 标题的边框圆角 | `0` | -| \--nutui-tabs-titles-item-font-size | Tab 标题的字号 | `$font-text` | +| \--nutui-tabs-titles-item-font-size | Tab 标题的字号 | `$font-size` | | \--nutui-tabs-title-gap | Tab 标题的左右 margin | `0px` | | \--nutui-tabs-titles-item-active-font-weight | Tab 选中标题的字重 | `600` | | \--nutui-tabs-horizontal-tab-line-color | 水平方向线条颜色 | `linear-gradient(90deg, $color-primary 0%, rgba(#fa2c19, 0.15) 100%)` | @@ -589,7 +589,7 @@ export default App; | \--nutui-tabs-horizontal-tab-line-opacity | 水平方向线的透明度 | `1` | | \--nutui-tabs-horizontal-titles-height | 水平方向标题的高度 | `46px` | | \--nutui-tabs-horizontal-titles-item-min-width | 水平方向标题的最小宽度 | `50px` | -| \--nutui-tabs-horizontal-titles-item-active-background-color | 水平方向激活选项卡标题的背景色 | `$color-card-background` | +| \--nutui-tabs-horizontal-titles-item-active-background-color | 水平方向激活选项卡标题的背景色 | `$color-background-overlay` | | \--nutui-tabs-horizontal-titles-item-active-line-width | 水平方向激活选项卡线条的宽度 | `40px` | | \--nutui-tabs-horizontal-titles-item-active-line-height | 水平方向激活选项卡线条的高度 | `3px` | | \--nutui-tabs-vertical-tab-line-color | 垂直方向线条颜色 | `linear-gradient(180deg, $color-primary 0%, rgba(#fa2c19, 0.15) 100%)` | diff --git a/src/packages/tabs/doc.taro.md b/src/packages/tabs/doc.taro.md index 3bb85c89a8..a7fc577c5a 100644 --- a/src/packages/tabs/doc.taro.md +++ b/src/packages/tabs/doc.taro.md @@ -580,7 +580,7 @@ export default App; | --- | --- | --- | | \--nutui-tabs-titles-background-color | Tab 标题的背景色 | `$color-background` | | \--nutui-tabs-titles-border-radius | Tab 标题的边框圆角 | `0` | -| \--nutui-tabs-titles-item-font-size | Tab 标题的字号 | `$font-text` | +| \--nutui-tabs-titles-item-font-size | Tab 标题的字号 | `$font-size` | | \--nutui-tabs-title-gap | Tab 标题的左右 margin | `0px` | | \--nutui-tabs-titles-item-active-font-weight | Tab 选中标题的字重 | `600` | | \--nutui-tabs-horizontal-tab-line-color | 水平方向线条颜色 | `linear-gradient(90deg, $color-primary 0%, rgba(#fa2c19, 0.15) 100%)` | @@ -589,7 +589,7 @@ export default App; | \--nutui-tabs-horizontal-tab-line-opacity | 水平方向线的透明度 | `1` | | \--nutui-tabs-horizontal-titles-height | 水平方向标题的高度 | `46px` | | \--nutui-tabs-horizontal-titles-item-min-width | 水平方向标题的最小宽度 | `50px` | -| \--nutui-tabs-horizontal-titles-item-active-background-color | 水平方向激活选项卡标题的背景色 | `$color-card-background` | +| \--nutui-tabs-horizontal-titles-item-active-background-color | 水平方向激活选项卡标题的背景色 | `$color-background-overlay` | | \--nutui-tabs-horizontal-titles-item-active-line-width | 水平方向激活选项卡线条的宽度 | `40px` | | \--nutui-tabs-horizontal-titles-item-active-line-height | 水平方向激活选项卡线条的高度 | `3px` | | \--nutui-tabs-vertical-tab-line-color | 垂直方向线条颜色 | `linear-gradient(180deg, $color-primary 0%, rgba(#fa2c19, 0.15) 100%)` | diff --git a/src/packages/tabs/doc.zh-TW.md b/src/packages/tabs/doc.zh-TW.md index d5e7764250..9ede6204be 100644 --- a/src/packages/tabs/doc.zh-TW.md +++ b/src/packages/tabs/doc.zh-TW.md @@ -580,7 +580,7 @@ export default App; | --- | --- | --- | | \--nutui-tabs-titles-background-color | Tab 標題的背景色 | `$color-background` | | \--nutui-tabs-titles-border-radius | Tab 標題的邊框圓角 | `0` | -| \--nutui-tabs-titles-item-font-size | Tab 標題的字號 | `$font-text` | +| \--nutui-tabs-titles-item-font-size | Tab 標題的字號 | `$font-size` | | \--nutui-tabs-title-gap | Tab 標題的左右 margin | `0px` | | \--nutui-tabs-titles-item-active-font-weight | Tab 選中標題的字重 | `600` | | \--nutui-tabs-horizontal-tab-line-color | 水平方嚮線條顏色 | `linear-gradient(90deg, $color-primary 0%, rgba(#fa2c19, 0.15) 100%)` | @@ -589,7 +589,7 @@ export default App; | \--nutui-tabs-horizontal-tab-line-opacity | 水平方嚮線的透明度 | `1` | | \--nutui-tabs-horizontal-titles-height | 水平方嚮標題的高度 | `46px` | | \--nutui-tabs-horizontal-titles-item-min-width | 水平方嚮標題的最小寬度 | `50px` | -| \--nutui-tabs-horizontal-titles-item-active-background-color | 水平方嚮激活選項卡標題的背景色 | `$color-card-background` | +| \--nutui-tabs-horizontal-titles-item-active-background-color | 水平方嚮激活選項卡標題的背景色 | `$color-background-overlay` | | \--nutui-tabs-horizontal-titles-item-active-line-width | 水平方嚮激活選項卡線條的寬度 | `40px` | | \--nutui-tabs-horizontal-titles-item-active-line-height | 水平方嚮激活選項卡線條的高度 | `3px` | | \--nutui-tabs-vertical-tab-line-color | 垂直方嚮線條顏色 | `linear-gradient(180deg, $color-primary 0%, rgba(#fa2c19, 0.15) 100%)` | diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss index 6c9d8b709d..82a85d0077 100644 --- a/src/packages/tabs/tabs.scss +++ b/src/packages/tabs/tabs.scss @@ -123,7 +123,7 @@ } .nut-tabs__titles-item--disabled { - color: $color-disabled; + color: $color-text-disable; } .nut-tabs--horizontal { diff --git a/src/packages/tabs/tabs.taro.tsx b/src/packages/tabs/tabs.taro.tsx index 7ad4f44c6a..33a811a452 100644 --- a/src/packages/tabs/tabs.taro.tsx +++ b/src/packages/tabs/tabs.taro.tsx @@ -185,7 +185,6 @@ export const Tabs: FunctionComponent> & { animate() } const scrollIntoView = () => { - console.log(name, props) if (!name) return raf(() => { diff --git a/src/packages/tag/doc.en-US.md b/src/packages/tag/doc.en-US.md index 5cc3afc590..18f6eab0ce 100644 --- a/src/packages/tag/doc.en-US.md +++ b/src/packages/tag/doc.en-US.md @@ -25,8 +25,8 @@ const App = () => { return ( <> Label - Label Label + Label Label Label @@ -37,18 +37,28 @@ export default App; ::: -### Hollow style +### style :::demo ```tsx import React from "react"; +import { CircleClose } from '@nutui/icons-react'; import { Tag } from '@nutui/nutui-react'; const App = () => { return ( <> Label + Label + Label + alert('Tag closed')} + type='primary'>Label + } + onClose={() => alert('Tag closed')} + type='primary'>Label ) } @@ -57,65 +67,6 @@ export default App; ::: -### Rounded style - -:::demo - -```tsx -import React from "react"; -import { Tag } from '@nutui/nutui-react'; - -const App = () => { - return ( - <> - Label - - ) -} -export default App; -``` - -::: - -### Label style - -:::demo - -```tsx -import React from "react"; -import { Tag } from '@nutui/nutui-react'; - -const App = () => { - return ( - <> - Label - - ) -} -export default App; -``` - -::: - -### Can close label - -:::demo - -```tsx -import React from "react"; -import { Tag } from '@nutui/nutui-react'; - -const App = () => { - return ( - <> - alert('Tag closed')} type="primary">标签 - - ) -} -export default App; -``` - -::: ### Custom color diff --git a/src/packages/tag/doc.md b/src/packages/tag/doc.md index 649dec7301..6c13dc12df 100644 --- a/src/packages/tag/doc.md +++ b/src/packages/tag/doc.md @@ -25,8 +25,8 @@ const App = () => { return ( <> 标签 - 标签 标签 + 标签 标签 标签 @@ -37,82 +37,32 @@ export default App; ::: -### 空心样式 +### 样式风格 :::demo ```tsx -import React from "react"; -import { Tag } from '@nutui/nutui-react'; +import React from 'react' +import { CircleClose } from '@nutui/icons-react' +import { Tag } from '@nutui/nutui-react' const App = () => { return ( <> 标签 + 标签 + 标签 + alert('Tag closed')} + type='primary'>标签 + } + onClose={() => alert('Tag closed')} + type='primary'>标签 ) } -export default App; -``` - -::: - -### 圆角样式 - -:::demo - -```tsx -import React from "react"; -import { Tag } from '@nutui/nutui-react'; - -const App = () => { - return ( - <> - 标签 - - ) -} -export default App; -``` - -::: - -### 标记样式 - -:::demo - -```tsx -import React from "react"; -import { Tag } from '@nutui/nutui-react'; - -const App = () => { - return ( - <> - 标签 - - ) -} -export default App; -``` - -::: - -### 可关闭标签 - -:::demo - -```tsx -import React from "react"; -import { Tag } from '@nutui/nutui-react'; - -const App = () => { - return ( - <> - alert('Tag closed')} type="primary">标签 - - ) -} -export default App; +export default App ``` ::: @@ -139,52 +89,6 @@ export default App; ::: -### 点击事件 - -:::demo - -```tsx -import React from "react"; -import { Tag } from '@nutui/nutui-react'; - -const App = () => { - return ( - <> - alert('Tag clicked')}>标签 - - ) -} -export default App; -``` - -::: - -### 展示控制 - -:::demo - -```tsx -import React, {useState} from "react"; -import { Tag,Button } from '@nutui/nutui-react'; - -const App = () => { - const [isShow,setIsShow] = useState(true) // 是否展示Tag组件 - return ( - <> - { - isShow? ( - alert('Tag clicked')}>标签 - ):null - } - - - ) - -} -export default App; -``` - -::: ## Tag @@ -200,7 +104,7 @@ export default App; | mark | 是否为标记样式 | `boolean` | `false` | | closeable | 是否为可关闭标签 | `boolean` | `false` | | closeIcon | 关闭按钮 | `ReactNode` | `null` | -| onClick | 点击事件 | `(e: MouseEvent) => void` | `-` | +| onClick | 点击事件 | `(e: MouseEvent) => void` | `-` | | onClose | 关闭事件 | `(e?: any) => void` | `-` | ## 主题定制 diff --git a/src/packages/tag/doc.taro.md b/src/packages/tag/doc.taro.md index eeac887d98..86374b5b55 100644 --- a/src/packages/tag/doc.taro.md +++ b/src/packages/tag/doc.taro.md @@ -24,8 +24,8 @@ const App = () => { return ( <> 标签 - 标签 标签 + 标签 标签 标签 @@ -36,82 +36,33 @@ export default App; ::: -### 空心样式 - -:::demo - -```tsx -import React from "react"; -import { Tag } from '@nutui/nutui-react-taro'; - -const App = () => { - return ( - <> - 标签 - - ) -} -export default App; -``` - -::: -### 圆角样式 +### 样式风格 :::demo ```tsx -import React from "react"; -import { Tag } from '@nutui/nutui-react-taro'; +import React from 'react' +import { CircleClose } from '@nutui/icons-react-taro' +import { Tag } from '@nutui/nutui-react' const App = () => { return ( <> - 标签 - - ) -} -export default App; -``` - -::: - -### 标记样式 - -:::demo - -```tsx -import React from "react"; -import { Tag } from '@nutui/nutui-react-taro'; - -const App = () => { - return ( - <> - 标签 - - ) -} -export default App; -``` - -::: - -### 可关闭标签 - -:::demo - -```tsx -import React from "react"; -import { Tag } from '@nutui/nutui-react-taro'; - -const App = () => { - return ( - <> - alert('Tag closed')} type="primary">标签 + 标签 + 标签 + 标签 + alert('Tag closed')} + type='primary'>标签 + } + onClose={() => alert('Tag closed')} + type='primary'>标签 ) } -export default App; +export default App ``` ::: @@ -138,52 +89,6 @@ export default App; ::: -### 点击事件 - -:::demo - -```tsx -import React from "react"; -import { Tag } from '@nutui/nutui-react-taro'; - -const App = () => { - return ( - <> - alert('Tag clicked')}>标签 - - ) -} -export default App; -``` - -::: - -### 展示控制 - -:::demo - -```tsx -import React, {useState} from "react"; -import { Tag,Button } from '@nutui/nutui-react-taro'; - -const App = () => { - const [isShow,setIsShow] = useState(true) // 是否展示Tag组件 - return ( - <> - { - isShow? ( - alert('Tag clicked')}>标签 - ):null - } - - - ) - -} -export default App; -``` - -::: ## Tag diff --git a/src/packages/tag/tag.taro.tsx b/src/packages/tag/tag.taro.tsx index d054442e4c..3f09dcc557 100644 --- a/src/packages/tag/tag.taro.tsx +++ b/src/packages/tag/tag.taro.tsx @@ -5,6 +5,7 @@ import React, { useState, ReactNode, } from 'react' +import type { MouseEvent } from 'react' import { Close } from '@nutui/icons-react-taro' import classNames from 'classnames' @@ -26,7 +27,7 @@ export interface TagProps extends BasicComponent { mark: boolean closeable: boolean closeIcon: ReactNode - onClick: (e: MouseEvent) => void + onClick: (e: MouseEvent) => void onClose: (e?: any) => void } @@ -41,7 +42,7 @@ const defaultProps = { closeable: false, closeIcon: null, onClose: (e: any) => {}, - onClick: (e: MouseEvent) => {}, + onClick: (e: MouseEvent) => {}, } as TagProps export const Tag: FunctionComponent> = (props) => { const { @@ -80,7 +81,7 @@ export const Tag: FunctionComponent> = (props) => { setTagClass(classes()) }, [type, background, color, plain, round, mark, closeable, className]) - const handleClick = (e: any) => { + const handleClick = (e: MouseEvent) => { onClick && onClick(e) } // 综合考虑 color、background、plain 组合使用时的效果 diff --git a/src/packages/tag/tag.tsx b/src/packages/tag/tag.tsx index 9c418b0389..0c55b8268d 100644 --- a/src/packages/tag/tag.tsx +++ b/src/packages/tag/tag.tsx @@ -5,6 +5,7 @@ import React, { useState, ReactNode, } from 'react' +import type { MouseEvent } from 'react' import { Close } from '@nutui/icons-react' import classNames from 'classnames' @@ -27,7 +28,7 @@ export interface TagProps extends BasicComponent { mark: boolean closeable: boolean closeIcon: ReactNode - onClick: (e: MouseEvent) => void + onClick: (e: MouseEvent) => void onClose: (e?: any) => void } @@ -42,7 +43,7 @@ const defaultProps = { closeable: false, closeIcon: null, onClose: (e: any) => {}, - onClick: (e: MouseEvent) => {}, + onClick: (e: MouseEvent) => {}, } as TagProps export const Tag: FunctionComponent> = (props) => { const { @@ -81,7 +82,7 @@ export const Tag: FunctionComponent> = (props) => { setTagClass(classes()) }, [type, background, color, plain, round, mark, closeable, className]) - const handleClick = (e: any) => { + const handleClick = (e: MouseEvent) => { onClick && onClick(e) } // 综合考虑 color、background、plain 组合使用时的效果 diff --git a/src/packages/textarea/doc.en-US.md b/src/packages/textarea/doc.en-US.md index 1125e91f86..8057044992 100644 --- a/src/packages/textarea/doc.en-US.md +++ b/src/packages/textarea/doc.en-US.md @@ -179,8 +179,8 @@ export default App | readOnly | read only attribute | `boolean` | `false` | | disabled | disable attribute | `boolean` | `false` | | onChange | Triggered when the value of the input box changes | `(value) => void` | `-` | -| onFocus | Triggered when focusing | `(event) => void` | `-` | -| onBlur | Triggered when out of focus | `(event) => void` | `-` | +| onFocus | Triggered when focusing | `(event: FocusEvent) => void` | `-` | +| onBlur | Triggered when out of focus | `(event: FocusEvent) => void` | `-` | ## Theming @@ -190,9 +190,9 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | -| \--nutui-textarea-font | fontSize | `$font-text` | +| \--nutui-textarea-font | fontSize | `$font-size` | | \--nutui-textarea-padding | padding | `10px 25px`| | \--nutui-textarea-limit-color | limit color | `$color-text` | | \--nutui-textarea-text-color | text color | `$color-title` | | \--nutui-textarea-text-curror-color | caret color | `$color-title`| -| \--nutui-textarea-disabled-color | disabled color | `$color-disabled` | +| \--nutui-textarea-disabled-color | disabled color | `$color-text-disable` | diff --git a/src/packages/textarea/doc.md b/src/packages/textarea/doc.md index 43027d1a7b..000b2c43b3 100644 --- a/src/packages/textarea/doc.md +++ b/src/packages/textarea/doc.md @@ -179,8 +179,8 @@ export default App | readOnly | 只读属性 | `boolean` | `false` | | disabled | 禁用属性 | `boolean` | `false` | | onChange | 输入内容时触发 | `(value) => void` | `-` | -| onFocus | 聚焦时触发 | `(event) => void` | `-` | -| onBlur | 失焦时触发 | `(event) => void` | `-` | +| onFocus | 聚焦时触发 | `(event: FocusEvent) => void` | `-` | +| onBlur | 失焦时触发 | `(event: FocusEvent) => void` | `-` | ## 主题定制 @@ -190,9 +190,9 @@ export default App | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-textarea-font | 字体大小 | `$font-text` | +| \--nutui-textarea-font | 字体大小 | `$font-size` | | \--nutui-textarea-padding | 内边距 | `10px 25px` | | \--nutui-textarea-limit-color | 字数统计颜色 | `$color-text` | | \--nutui-textarea-text-color | 文本颜色 | `$color-title` | | \--nutui-textarea-text-curror-color | 光标颜色 | `$color-title` | -| \--nutui-textarea-disabled-color | 禁用颜色 | `$color-disabled` | \ No newline at end of file +| \--nutui-textarea-disabled-color | 禁用颜色 | `$color-text-disable` | \ No newline at end of file diff --git a/src/packages/textarea/doc.taro.md b/src/packages/textarea/doc.taro.md index 0d0169aceb..9d1a3afeba 100644 --- a/src/packages/textarea/doc.taro.md +++ b/src/packages/textarea/doc.taro.md @@ -190,9 +190,9 @@ export default App | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-textarea-font | 字体大小 | `$font-text` | +| \--nutui-textarea-font | 字体大小 | `$font-size` | | \--nutui-textarea-padding | 内边距 | `10px 25px` | | \--nutui-textarea-limit-color | 字数统计颜色 | `$color-text` | | \--nutui-textarea-text-color | 文本颜色 | `$color-title` | | \--nutui-textarea-text-curror-color | 光标颜色 | `$color-title` | -| \--nutui-textarea-disabled-color | 禁用颜色 | `$color-disabled` | \ No newline at end of file +| \--nutui-textarea-disabled-color | 禁用颜色 | `$color-text-disable` | \ No newline at end of file diff --git a/src/packages/textarea/doc.zh-TW.md b/src/packages/textarea/doc.zh-TW.md index 9ecce7cb71..073c564e1b 100644 --- a/src/packages/textarea/doc.zh-TW.md +++ b/src/packages/textarea/doc.zh-TW.md @@ -190,9 +190,9 @@ export default App | 名稱 | 說明 | 默認值 | | --- | --- | --- | -| \--nutui-textarea-font | 字體大小 | `$font-text` | +| \--nutui-textarea-font | 字體大小 | `$font-size` | | \--nutui-textarea-padding | 內邊距 | `10px 25px` | | \--nutui-textarea-limit-color | 字數統計顏色 | `$color-text` | | \--nutui-textarea-text-color | 文本顏色 | `$color-title` | | \--nutui-textarea-text-curror-color | 光標顏色 | `$color-title` | -| \--nutui-textarea-disabled-color | 禁用顏色 | `$color-disabled` | \ No newline at end of file +| \--nutui-textarea-disabled-color | 禁用顏色 | `$color-text-disable` | \ No newline at end of file diff --git a/src/packages/textarea/textarea.tsx b/src/packages/textarea/textarea.tsx index 1f8fcfc7e4..025f8bbc23 100644 --- a/src/packages/textarea/textarea.tsx +++ b/src/packages/textarea/textarea.tsx @@ -1,4 +1,5 @@ import React, { FunctionComponent, useEffect, useRef } from 'react' +import type { ChangeEvent, FocusEvent } from 'react' import classNames from 'classnames' import { useConfig } from '@/packages/configprovider' import { BasicComponent, ComponentDefaults } from '@/utils/typings' @@ -15,8 +16,8 @@ export interface TextAreaProps extends BasicComponent { disabled: boolean autoSize: boolean onChange: (value: string) => void - onBlur: (event: Event) => void - onFocus: (event: Event) => void + onBlur: (event: FocusEvent) => void + onFocus: (event: FocusEvent) => void } const defaultProps = { ...ComponentDefaults, @@ -90,19 +91,19 @@ export const TextArea: FunctionComponent< } } - const handleChange = (event: Event) => { - const text = event.target as HTMLTextAreaElement + const handleChange = (event: ChangeEvent) => { + const text = event.target const value = compositionRef.current ? text.value : format(text.value) setInputValue(value) } - const handleFocus = (event: Event) => { + const handleFocus = (event: FocusEvent) => { if (disabled) return if (readOnly) return onFocus && onFocus(event) } - const handleBlur = (event: Event) => { + const handleBlur = (event: FocusEvent) => { if (disabled) return if (readOnly) return onBlur && onBlur(event) @@ -121,9 +122,9 @@ export const TextArea: FunctionComponent< disabled={disabled} readOnly={readOnly} value={inputValue} - onChange={(e: any) => handleChange(e)} - onBlur={(e: any) => handleBlur(e)} - onFocus={(e: any) => handleFocus(e)} + onChange={(e) => handleChange(e)} + onBlur={(e) => handleBlur(e)} + onFocus={(e) => handleFocus(e)} onCompositionEnd={() => { compositionRef.current = false }} diff --git a/src/packages/timeselect/doc.en-US.md b/src/packages/timeselect/doc.en-US.md index 1cd1cf8fd4..8c4b9bda77 100644 --- a/src/packages/timeselect/doc.en-US.md +++ b/src/packages/timeselect/doc.en-US.md @@ -329,14 +329,14 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-timeselect-title-height | title height | `50px` | | \--nutui-timeselect-title-line-height | title lineHeight | `50px` | | \--nutui-timeselect-title-color | title color | `$color-title` | -| \--nutui-timeselect-title-font-size | title fontSize | `$font-text` | -| \--nutui-timeselect-title-background | title background | `$color-card-background` | +| \--nutui-timeselect-title-font-size | title fontSize | `$font-size` | +| \--nutui-timeselect-title-background | title background | `$color-background-overlay` | | \--nutui-timeselect-date-width | date width | `140px` | | \--nutui-timeselect-date-height | date height | `40px` | | \--nutui-timeselect-date-line-height | date lineHeight | `40px` | | \--nutui-timeselect-date-color | date color | `$color-text` | | \--nutui-timeselect-date-active-color | date active color | `$color-title` | -| \--nutui-timeselect-date-font-size | date fontSize | `$font-text` | +| \--nutui-timeselect-date-font-size | date fontSize | `$font-size` | | \--nutui-timeselect-time-width | time width | `100px` | | \--nutui-timeselect-time-height | time height | `50px` | | \--nutui-timeselect-time-line-height | time lineHeight | `50px` | @@ -345,4 +345,4 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-timeselect-time-color | time color | `$color-title` | | \--nutui-timeselect-time-active-color | time active color | `$color-primary` | | \--nutui-timeselect-time-background | time background | `$color-background` | -| \--nutui-timeselect-time-active-background | time active background | `$color-card-background-wrapper` | \ No newline at end of file +| \--nutui-timeselect-time-active-background | time active background | `$color-background-sunken` | \ No newline at end of file diff --git a/src/packages/timeselect/doc.md b/src/packages/timeselect/doc.md index f7b00480dd..8c01b4771b 100644 --- a/src/packages/timeselect/doc.md +++ b/src/packages/timeselect/doc.md @@ -329,14 +329,14 @@ export default Demo | \--nutui-timeselect-title-height | title 高度 | `50px` | | \--nutui-timeselect-title-line-height | title 行高 | `50px` | | \--nutui-timeselect-title-color | title 字体颜色 | `$color-title` | -| \--nutui-timeselect-title-font-size | title 字体大小 | `$font-text` | -| \--nutui-timeselect-title-background | title 背景 | `$color-card-background` | +| \--nutui-timeselect-title-font-size | title 字体大小 | `$font-size` | +| \--nutui-timeselect-title-background | title 背景 | `$color-background-overlay` | | \--nutui-timeselect-date-width | date 宽度 | `140px` | | \--nutui-timeselect-date-height | date 高度 | `40px` | | \--nutui-timeselect-date-line-height | date 行高 | `40px` | | \--nutui-timeselect-date-color | date 字体颜色 | `$color-text` | | \--nutui-timeselect-date-active-color | date 激活字体颜色 | `$color-title` | -| \--nutui-timeselect-date-font-size | date 字体大小 | `$font-text` | +| \--nutui-timeselect-date-font-size | date 字体大小 | `$font-size` | | \--nutui-timeselect-time-width | time 宽度 | `100px` | | \--nutui-timeselect-time-height | time 高度 | `50px` | | \--nutui-timeselect-time-line-height | time 行高 | `50px` | @@ -345,4 +345,4 @@ export default Demo | \--nutui-timeselect-time-color | time 字体颜色 | `$color-title` | | \--nutui-timeselect-time-active-color | time 激活字体颜色 | `$color-primary` | | \--nutui-timeselect-time-background | time 背景 | `$color-background` | -| \--nutui-timeselect-time-active-background | time 激活背景 | `$color-card-background-wrapper` | \ No newline at end of file +| \--nutui-timeselect-time-active-background | time 激活背景 | `$color-background-sunken` | \ No newline at end of file diff --git a/src/packages/timeselect/doc.taro.md b/src/packages/timeselect/doc.taro.md index 1180299406..3d85e6a628 100644 --- a/src/packages/timeselect/doc.taro.md +++ b/src/packages/timeselect/doc.taro.md @@ -329,14 +329,14 @@ export default Demo | \--nutui-timeselect-title-height | title 高度 | `50px` | | \--nutui-timeselect-title-line-height | title 行高 | `50px` | | \--nutui-timeselect-title-color | title 字体颜色 | `$color-title` | -| \--nutui-timeselect-title-font-size | title 字体大小 | `$font-text` | -| \--nutui-timeselect-title-background | title 背景 | `$color-card-background` | +| \--nutui-timeselect-title-font-size | title 字体大小 | `$font-size` | +| \--nutui-timeselect-title-background | title 背景 | `$color-background-overlay` | | \--nutui-timeselect-date-width | date 宽度 | `140px` | | \--nutui-timeselect-date-height | date 高度 | `40px` | | \--nutui-timeselect-date-line-height | date 行高 | `40px` | | \--nutui-timeselect-date-color | date 字体颜色 | `$color-text` | | \--nutui-timeselect-date-active-color | date 激活字体颜色 | `$color-title` | -| \--nutui-timeselect-date-font-size | date 字体大小 | `$font-text` | +| \--nutui-timeselect-date-font-size | date 字体大小 | `$font-size` | | \--nutui-timeselect-time-width | time 宽度 | `100px` | | \--nutui-timeselect-time-height | time 高度 | `50px` | | \--nutui-timeselect-time-line-height | time 行高 | `50px` | @@ -345,4 +345,4 @@ export default Demo | \--nutui-timeselect-time-color | time 字体颜色 | `$color-title` | | \--nutui-timeselect-time-active-color | time 激活字体颜色 | `$color-primary` | | \--nutui-timeselect-time-background | time 背景 | `$color-background` | -| \--nutui-timeselect-time-active-background | time 激活背景 | `$color-card-background-wrapper` | \ No newline at end of file +| \--nutui-timeselect-time-active-background | time 激活背景 | `$color-background-sunken` | \ No newline at end of file diff --git a/src/packages/timeselect/doc.zh-TW.md b/src/packages/timeselect/doc.zh-TW.md index 85b29ebfac..b5c44abb75 100644 --- a/src/packages/timeselect/doc.zh-TW.md +++ b/src/packages/timeselect/doc.zh-TW.md @@ -329,14 +329,14 @@ export default Demo | \--nutui-timeselect-title-height | title 高度 | `50px` | | \--nutui-timeselect-title-line-height | title 行高 | `50px` | | \--nutui-timeselect-title-color | title 字體顏色 | `$color-title` | -| \--nutui-timeselect-title-font-size | title 字體大小 | `$font-text` | -| \--nutui-timeselect-title-background | title 背景 | `$color-card-background` | +| \--nutui-timeselect-title-font-size | title 字體大小 | `$font-size` | +| \--nutui-timeselect-title-background | title 背景 | `$color-background-overlay` | | \--nutui-timeselect-date-width | date 寬度 | `140px` | | \--nutui-timeselect-date-height | date 高度 | `40px` | | \--nutui-timeselect-date-line-height | date 行高 | `40px` | | \--nutui-timeselect-date-color | date 字體顏色 | `$color-text` | | \--nutui-timeselect-date-active-color | date 激活字體顏色 | `$color-title` | -| \--nutui-timeselect-date-font-size | date 字體大小 | `$font-text` | +| \--nutui-timeselect-date-font-size | date 字體大小 | `$font-size` | | \--nutui-timeselect-time-width | time 寬度 | `100px` | | \--nutui-timeselect-time-height | time 高度 | `50px` | | \--nutui-timeselect-time-line-height | time 行高 | `50px` | @@ -345,4 +345,4 @@ export default Demo | \--nutui-timeselect-time-color | time 字體顏色 | `$color-title` | | \--nutui-timeselect-time-active-color | time 激活字體顏色 | `$color-primary` | | \--nutui-timeselect-time-background | time 背景 | `$color-background` | -| \--nutui-timeselect-time-active-background | time 激活背景 | `$color-card-background-wrapper` | \ No newline at end of file +| \--nutui-timeselect-time-active-background | time 激活背景 | `$color-background-sunken` | \ No newline at end of file diff --git a/src/packages/timeselect/timeselect.scss b/src/packages/timeselect/timeselect.scss index 09f740aee8..7edaa6f69d 100644 --- a/src/packages/timeselect/timeselect.scss +++ b/src/packages/timeselect/timeselect.scss @@ -2,7 +2,7 @@ @import '../timedetail/timedetail.scss'; .nut-timeselect { - background-color: $color-card-background; + background-color: $color-background-overlay; display: flex; flex-direction: column; height: 100%; @@ -27,7 +27,7 @@ min-width: $timeselect-date-width; height: 100%; overflow: auto; - background: $color-card-background-wrapper; + background: $color-background-sunken; } } @@ -39,7 +39,7 @@ font-size: $timeselect-date-font-size; &.active { - background: $color-card-background; + background: $color-background-overlay; color: $timeselect-date-active-color; font-weight: 700; } diff --git a/src/packages/toast/toast.scss b/src/packages/toast/toast.scss index def5d61913..8200f13317 100644 --- a/src/packages/toast/toast.scss +++ b/src/packages/toast/toast.scss @@ -24,13 +24,13 @@ &-small { .nut-toast__inner { - font-size: $font-help; + font-size: $font-size-small; } } &-large { .nut-toast__inner { - font-size: $font-card-title; + font-size: $font-size-large; } } diff --git a/src/packages/tour/__test__/tour.spec.tsx b/src/packages/tour/__test__/tour.spec.tsx new file mode 100644 index 0000000000..210dbde5dd --- /dev/null +++ b/src/packages/tour/__test__/tour.spec.tsx @@ -0,0 +1,154 @@ +import * as React from 'react' +import { render, fireEvent, waitFor } from '@testing-library/react' +import '@testing-library/jest-dom' + +import { Tour } from '../tour' + +const steps = [ + { + content: '70+ 高质量组件，覆盖移动端主流场景', + target: 'target', + }, +] + +const steps2 = [ + { + content: '支持一套代码同时开发多端小程序+H5', + target: 'target2', + popoverOffset: [40, 12], + arrowOffset: -36, + }, +] + +const steps3 = [ + { + content: '70+ 高质量组件，覆盖移动端主流场景', + target: 'target3', + }, +] + +const steps4 = [ + { + content: '70+ 高质量组件，覆盖移动端主流场景', + target: 'target4', + }, + { + content: '支持一套代码同时开发多端小程序+H5', + target: 'target5', + }, + { + content: '基于京东APP 10.0 视觉规范', + target: 'target6', + location: 'top-end', + }, + { + content: '支持定制主题，内置 700+ 个主题变量', + target: 'target7', + location: 'top-end', + }, +] + +test('base render', () => { + const root = document.createElement('div') + root.id = 'target' + const { container } = render( + + ) + expect(container.querySelector('.nut-popover')).toBeTruthy() + expect( + container.querySelector('.nut-popover-content--bottom-end') + ).toBeTruthy() +}) + +test('custom style', () => { + const root = document.createElement('div') + root.id = 'target' + const { container } = render( + + ) + const tourComponent = container.querySelectorAll('.nut-tour')[0] + expect(tourComponent).toHaveStyle({ + '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', + }) +}) + +test('custom offset', () => { + const root = document.createElement('div') + root.id = 'target2' + const { container } = render( + + ) + const tourArrow = container.querySelectorAll('.nut-popover-arrow')[0] + expect(tourArrow).toHaveStyle({ right: '52px' }) +}) + +test('slot render', () => { + const root = document.createElement('div') + root.id = 'target3' + const { container } = render( + +
+
nutui 4.x 即将发布，敬请期待
+
+ + ) + const tourArrow = container.querySelectorAll('.nut-popover-content-group')[0] + expect(tourArrow).toHaveTextContent('nutui 4.x 即将发布，敬请期待') +}) + +test('steps render', async () => { + const root = document.createElement('div') + root.id = 'target4' + const root1 = document.createElement('div') + root1.id = 'target5' + const { container } = render( + + ) + const btn = container.querySelectorAll( + '.nut-tour-content-bottom-operate-btn' + )[0] + expect(btn).toBeTruthy() + fireEvent.click(btn) + + await waitFor(() => { + const btn2 = container.querySelectorAll( + '.nut-tour-content-bottom-operate-btn' + ) + expect(btn2.length).toBe(2) + }) +}) diff --git a/src/packages/tour/demo.scss b/src/packages/tour/demo.scss new file mode 100644 index 0000000000..f42e9e2cc0 --- /dev/null +++ b/src/packages/tour/demo.scss @@ -0,0 +1,62 @@ +.nut-custom-tour { + .nut-popover-content { + width: auto !important; + } +} +.nut-customword-tour { + .nut-tour-content-inner { + width: max-content; + } +} +.index-header { + display: flex; + align-items: center; + height: 117px; + > img { + width: 67px; + height: 67px; + margin-right: 18px; + flex-shrink: 0; + } + .info { + display: flex; + flex-direction: column; + h1 { + margin: 0; + height: 48px; + font-size: 34px; + color: rgba(51, 51, 51, 1); + } + p { + height: 18px; + font-size: 12px; + color: rgba(154, 155, 157, 1); + } + } +} +.nut-customstyle-tour { + .nut-tour-mask { + border-radius: 50%; + } +} +.tour-demo-img { + img { + width: 20px; + height: 20px; + margin-right: 10px; + } +} +.tour-demo-custom-content { + padding: 8px; + display: flex; + width: max-content; + align-items: center; + .nut-divider { + border-color: #fff; + } +} +.tour-demo { + .nut-tabbar-item_icon-box_nav-word { + font-size: 14px; + } +} diff --git a/src/packages/tour/demo.taro.tsx b/src/packages/tour/demo.taro.tsx new file mode 100644 index 0000000000..424dab7c4a --- /dev/null +++ b/src/packages/tour/demo.taro.tsx @@ -0,0 +1,308 @@ +import React, { useState } from 'react' +import Taro from '@tarojs/taro' +import { useTranslate } from '@/sites/assets/locale/taro' +import { + Cell, + Switch, + Divider, + Tabbar, + Tour, +} from '@/packages/nutui.react.taro' +import Header from '@/sites/components/header' +import '@/packages/tour/demo.scss' + +interface T { + title1: string + title2: string + title3: string + title4: string + title5: string + clickTry: string + stepContent1: string + stepContent2: string + stepContent3: string + stepContent4: string + customContent: string + btnContent: string + tabTitle1: string + tabTitle2: string + tabTitle3: string + tabTitle4: string +} +const TourDemo = () => { + const [translated] = useTranslate({ + 'zh-CN': { + title1: '基础用法', + title2: '自定义样式', + title3: '设置偏移量', + title4: '自定义内容', + title5: '步骤引导', + clickTry: '点击试试', + stepContent1: '70+ 高质量组件，覆盖移动端主流场景', + stepContent2: '支持一套代码同时开发多端小程序+H5', + stepContent3: '基于京东APP 10.0 视觉规范', + stepContent4: '支持定制主题，内置 700+ 个主题变量', + customContent: 'nutui-react 2.x 已经发布', + btnContent: '知道了', + tabTitle1: '首页', + tabTitle2: '分类', + tabTitle3: '购物车', + tabTitle4: '我的', + }, + 'en-US': { + title1: 'Basic Usage', + title2: 'Custom Style', + title3: 'Custom Offset', + title4: 'Custom Content', + title5: 'Steps', + clickTry: 'click to try', + stepContent1: '70+ high-quality components', + stepContent2: 'Support a set of codes to develop', + stepContent3: 'Based on JD APP 10.0', + stepContent4: 'Support custom theme, built-in 700+ theme variables', + customContent: 'nutui-react 2.x is already released', + btnContent: 'knew', + tabTitle1: 'page', + tabTitle2: 'sort', + tabTitle3: 'cart', + tabTitle4: 'mine', + }, + }) + + const [showTour, setShowTour] = useState(false) + const [showTour1, setShowTour1] = useState(false) + const [showTour2, setShowTour2] = useState(false) + const [showTour3, setShowTour3] = useState(false) + const [showTour4, setShowTour4] = useState(false) + const steps = [ + { + content: translated.stepContent1, + target: 'target', + }, + ] + + const steps1 = [ + { + content: translated.stepContent1, + target: 'target1', + }, + ] + + const steps2 = [ + { + content: translated.stepContent2, + target: 'target2', + popoverOffset: [40, 12], + arrowOffset: -36, + }, + ] + + const steps3 = [ + { + target: 'target3', + }, + ] + + const steps4 = [ + { + content: translated.stepContent1, + target: 'target4', + }, + { + content: translated.stepContent2, + target: 'target5', + }, + { + content: translated.stepContent3, + target: 'target6', + location: 'top-end', + }, + { + content: translated.stepContent4, + target: 'target7', + location: 'top-end', + }, + ] + + const closeTour = () => { + setShowTour(false) + } + + const closeTour1 = () => { + setShowTour1(false) + } + + const closeTour2 = () => { + setShowTour2(false) + } + + const closeTour3 = () => { + setShowTour3(false) + } + + const closeTour4 = () => { + setShowTour4(false) + } + + return ( + <> +
+
+

{translated.title1}

+ { + setShowTour(true) + }} + /> + } + /> + + +

{translated.title2}

+ { + setShowTour1(true) + }} + /> + } + /> + + +

{translated.title3}

+ { + setShowTour2(true) + }} + extra={ +
+ + + +
+ } + /> + + +

{translated.title4}

+ { + setShowTour3(true) + }} + /> + } + /> + +
+
{translated.customContent}
+ +
{ + setShowTour3(false) + }} + > + {translated.btnContent} +
+
+ + +

{translated.title5}

+ { + setShowTour4(true) + }} + /> + + + + + + + +
+ + ) +} + +export default TourDemo diff --git a/src/packages/tour/demo.tsx b/src/packages/tour/demo.tsx new file mode 100644 index 0000000000..2c1c2ec8df --- /dev/null +++ b/src/packages/tour/demo.tsx @@ -0,0 +1,304 @@ +import React, { useState } from 'react' +import { useTranslate } from '../../sites/assets/locale' +import Cell from '@/packages/cell' +import Switch from '@/packages/switch' +import Divider from '@/packages/divider' +import Tabbar from '@/packages/tabbar' +import { Tour } from './tour' + +import './demo.scss' + +interface T { + title1: string + title2: string + title3: string + title4: string + title5: string + clickTry: string + stepContent1: string + stepContent2: string + stepContent3: string + stepContent4: string + customContent: string + btnContent: string + tabTitle1: string + tabTitle2: string + tabTitle3: string + tabTitle4: string +} +const TourDemo = () => { + const [translated] = useTranslate({ + 'zh-CN': { + title1: '基础用法', + title2: '自定义样式', + title3: '设置偏移量', + title4: '自定义内容', + title5: '步骤引导', + clickTry: '点击试试', + stepContent1: '70+ 高质量组件，覆盖移动端主流场景', + stepContent2: '支持一套代码同时开发多端小程序+H5', + stepContent3: '基于京东APP 10.0 视觉规范', + stepContent4: '支持定制主题，内置 700+ 个主题变量', + customContent: 'nutui-react 2.x 已经发布', + btnContent: '知道了', + tabTitle1: '首页', + tabTitle2: '分类', + tabTitle3: '购物车', + tabTitle4: '我的', + }, + 'en-US': { + title1: 'Basic Usage', + title2: 'Custom Style', + title3: 'Custom Offset', + title4: 'Custom Content', + title5: 'Steps', + clickTry: 'click to try', + stepContent1: '70+ high-quality components', + stepContent2: 'Support a set of codes to develop', + stepContent3: 'Based on JD APP 10.0', + stepContent4: 'Support custom theme, built-in 700+ theme variables', + customContent: 'nutui-react 2.x is already released', + btnContent: 'knew', + tabTitle1: 'page', + tabTitle2: 'sort', + tabTitle3: 'cart', + tabTitle4: 'mine', + }, + }) + + const [showTour, setShowTour] = useState(false) + const [showTour1, setShowTour1] = useState(false) + const [showTour2, setShowTour2] = useState(false) + const [showTour3, setShowTour3] = useState(false) + const [showTour4, setShowTour4] = useState(true) + const steps = [ + { + content: translated.stepContent1, + target: 'target', + }, + ] + + const steps1 = [ + { + content: translated.stepContent1, + target: 'target1', + }, + ] + + const steps2 = [ + { + content: translated.stepContent2, + target: 'target2', + popoverOffset: [40, 12], + arrowOffset: -36, + }, + ] + + const steps3 = [ + { + target: 'target3', + }, + ] + + const steps4 = [ + { + content: translated.stepContent1, + target: 'target4', + }, + { + content: translated.stepContent2, + target: 'target5', + }, + { + content: translated.stepContent3, + target: 'target6', + location: 'top-end', + }, + { + content: translated.stepContent4, + target: 'target7', + location: 'top-end', + }, + ] + + const closeTour = () => { + setShowTour(false) + } + + const closeTour1 = () => { + setShowTour1(false) + } + + const closeTour2 = () => { + setShowTour2(false) + } + + const closeTour3 = () => { + setShowTour3(false) + } + + const closeTour4 = () => { + setShowTour4(false) + } + + return ( + <> +
+

{translated.title1}

+ { + setShowTour(true) + }} + /> + } + /> + + +

{translated.title2}

+ { + setShowTour1(true) + }} + /> + } + /> + + +

{translated.title3}

+ { + setShowTour2(true) + }} + extra={ +
+ + + +
+ } + /> + + +

{translated.title4}

+ { + setShowTour3(true) + }} + /> + } + /> + +
+
{translated.customContent}
+ +
{ + setShowTour3(false) + }} + > + {translated.btnContent} +
+
+ + +

{translated.title5}

+ { + setShowTour4(true) + }} + /> + + + + + + + +
+ + ) +} + +export default TourDemo diff --git a/src/packages/tour/doc.en-US.md b/src/packages/tour/doc.en-US.md new file mode 100644 index 0000000000..43985ef45a --- /dev/null +++ b/src/packages/tour/doc.en-US.md @@ -0,0 +1,386 @@ +# Tour + +### Intro + +A bubble component used to guide the user through the product's capabilities. + +## Install + +```tsx +import { Tour } from '@nutui/nutui-react'; +``` + +## Demo +### Basic Usage + +:::demo + +```tsx +import React, { useState } from "react"; +import { Cell, Switch, Tour } from '@nutui/nutui-react'; + +const App = () => { + const [showTour, setShowTour] = useState(false) + + const closeTour = () => { + setShowTour(false) + } + + const steps = [ + { + content: '70+ high-quality components', + target: 'target', + }, + ] + + return ( + <> + { + setShowTour(true) + }} + /> + } + /> + + + ) +} +export default App; +``` + +::: + +### Custom Style + +:::demo + +```tsx +import React, { useState } from "react"; +import { Cell, Switch, Tour } from '@nutui/nutui-react'; + +const App = () => { + const [showTour, setShowTour] = useState(false) + + const closeTour = () => { + setShowTour(false) + } + + const steps = [ + { + content: '70+ high-quality components', + target: 'target', + }, + ] + + return ( + <> + { + setShowTour(true) + }} + /> + } + /> + + + ) +} +export default App; +``` + +::: + +### Custom Offset + +:::demo + +```tsx +import React, { useState } from "react"; +import { Cell, Switch, Tour } from '@nutui/nutui-react'; + +const App = () => { + const [showTour, setShowTour] = useState(false) + + const closeTour = () => { + setShowTour(false) + } + + const steps = [ + { + content: 'Support a set of codes to develop', + target: 'target', + popoverOffset: [40, 12], + arrowOffset: -36, + }, + ] + + return ( + <> + + + + +
+ } + /> + + + ) +} +export default App; +``` + +::: + +### Custom Content + +:::demo + +```tsx +import React, { useState } from "react"; +import { Cell, Switch, Tour, Divider } from '@nutui/nutui-react'; + +const App = () => { + const [showTour, setShowTour] = useState(false) + + const closeTour = () => { + setShowTour(false) + } + + const steps = [ + { + target: 'target', + }, + ] + + return ( + <> + { + setShowTour3(true) + }} + /> + } + /> + +
+
nutui-react 2.x is already released
+ +
{ + setShowTour(false) + }} + > + knew +
+
+ + + ) +} +export default App; +``` + +::: + +### Steps + +:::demo + +```tsx +import React, { useState } from "react"; +import { Cell, Tour, Tabbar } from '@nutui/nutui-react'; + +const App = () => { + const [showTour, setShowTour] = useState(false) + + const closeTour = () => { + setShowTour(false) + } + + const steps = [ + { + content: '70+ high-quality components', + target: 'target4', + }, + { + content: 'Support a set of codes to develop', + target: 'target5', + }, + { + content: 'Based on JD APP 10.0', + target: 'target6', + location: 'top-end', + }, + { + content: 'Support custom theme, built-in 700+ theme variables', + target: 'target7', + location: 'top-end', + }, + ] + + return ( + <> + { + setShowTour(true) + }} + /> + + + + + + + + + ) +} +export default App; +``` + +::: + + +## Tour + +### Props + + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| visible | Whether to display the boot eject layer | `boolean` | `false` | +| type | Tour type | `step` \| `tile` | `step` | +| list | Boot Step Content | `ListOptions[]` | `-` | +| offset | The offset of the hollow mask relative to the target element | `number[]` | `[8, 10]` | +| location | Location of popover[location ](https://nutui.jd.com/h5/react/2x/#/zh-CN/component/popover) | `string` | `bottom` | +| next | Next step text | `ReactNode` | `''` | +| prev | Next step text | `ReactNode` | `''` | +| complete | Complete text | `ReactNode` | `''` | +| mask | Whether to display cutout mask | `boolean` | `true` | +| maskWidth | Width of hollow mask | `number` \| `string` | `''` | +| maskHeight | Hollow mask height | `number` \| `string` | `''` | +| closeOnOverlayClick | Whether to close when clicking overlay,[closeOnClickOverlay](https://nutui.jd.com/h5/react/2x/#/zh-CN/component/popover) | `boolean` | `true` | +| showPrev | Whether to show prev button | `boolean` | `true` | +| title | Whether to show title bar | `ReactNode` | `''` | +| onClose | Emit when popover close | `(e: MouseEvent) => void` | `-` | +| onChange | Emit when step change | `(value: number) => void` | `-` | + +### ListOptions + + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| target | target dom | `Element` \| `string` | `-` | +| content | popover content | `string` | `-` | +| location | Location of popover | `string` | `-` | +| popoverOffset | Offset of popopver | `number[]` | `-` | +| arrowOffset | Offset of arrow | `number` | `-` | + +## Theming + +### CSS Variables + +The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider). + +| Name | Description | Default | +| --- | --- | --- | +| \--nutui-tour-mask-border-radius | The border-radius value of the mask layer | `10px` | +| \--nutui-tour-content-min-width | The min-width value of the content area | `200px` | +| \--nutui-tour-content-padding | The padding value of the content area | `10px 12px` | +| \--nutui-tour-content-inner-margin | The margin value inside the content area | `10px 0px` | +| \--nutui-tour-content-inner-font-size | The font-size value inside the content area | `14px` | +| \--nutui-tour-content-bottom-margin-top | margin-top value at the bottom of the content area | `10px` | +| \--nutui-tour-content-bottom-btn-margin-left | The margin-left value of the button at the bottom of the content area | `4px` | +| \--nutui-tour-content-bottom-btn-padding | The padding value of the button at the bottom of the content area | `2px 4px` | +| \--nutui-tour-content-bottom-btn-font-size | The font-size value of the button at the bottom of the content area | `12px` | +| \--nutui-tour-content-bottom-btn-border-radius | The border-radius value of the button at the bottom of the content area | `4px` | + + + + + diff --git a/src/packages/tour/doc.md b/src/packages/tour/doc.md new file mode 100644 index 0000000000..a373f0ba91 --- /dev/null +++ b/src/packages/tour/doc.md @@ -0,0 +1,386 @@ +# Tour 引导 + +### 介绍 + +用于引导用户了解产品功能的气泡组件。 + +## 安装 + +```tsx +import { Tour } from '@nutui/nutui-react'; +``` + +## 代码演示 +### 基础用法 + +:::demo + +```tsx +import React, { useState } from "react"; +import { Cell, Switch, Tour } from '@nutui/nutui-react'; + +const App = () => { + const [showTour, setShowTour] = useState(false) + + const closeTour = () => { + setShowTour(false) + } + + const steps = [ + { + content: '70+ 高质量组件，覆盖移动端主流场景', + target: 'target', + }, + ] + + return ( + <> + { + setShowTour(true) + }} + /> + } + /> + + + ) +} +export default App; +``` + +::: + +### 自定义样式 + +:::demo + +```tsx +import React, { useState } from "react"; +import { Cell, Switch, Tour } from '@nutui/nutui-react'; + +const App = () => { + const [showTour, setShowTour] = useState(false) + + const closeTour = () => { + setShowTour(false) + } + + const steps = [ + { + content: '70+ 高质量组件，覆盖移动端主流场景', + target: 'target', + }, + ] + + return ( + <> + { + setShowTour(true) + }} + /> + } + /> + + + ) +} +export default App; +``` + +::: + +### 设置偏移量 + +:::demo + +```tsx +import React, { useState } from "react"; +import { Cell, Switch, Tour } from '@nutui/nutui-react'; + +const App = () => { + const [showTour, setShowTour] = useState(false) + + const closeTour = () => { + setShowTour(false) + } + + const steps = [ + { + content: '支持一套代码同时开发多端小程序+H5', + target: 'target', + popoverOffset: [40, 12], + arrowOffset: -36, + }, + ] + + return ( + <> + + + + +
+ } + /> + + + ) +} +export default App; +``` + +::: + +### 自定义内容 + +:::demo + +```tsx +import React, { useState } from "react"; +import { Cell, Switch, Tour, Divider } from '@nutui/nutui-react'; + +const App = () => { + const [showTour, setShowTour] = useState(false) + + const closeTour = () => { + setShowTour(false) + } + + const steps = [ + { + target: 'target', + }, + ] + + return ( + <> + { + setShowTour3(true) + }} + /> + } + /> + +
+
nutui-react 2.x 已经发布
+ +
{ + setShowTour(false) + }} + > + 知道了 +
+
+ + + ) +} +export default App; +``` + +::: + +### 步骤引导 + +:::demo + +```tsx +import React, { useState } from "react"; +import { Cell, Tour, Tabbar } from '@nutui/nutui-react'; + +const App = () => { + const [showTour, setShowTour] = useState(false) + + const closeTour = () => { + setShowTour(false) + } + + const steps = [ + { + content: '70+ 高质量组件，覆盖移动端主流场景', + target: 'target4', + }, + { + content: '支持一套代码同时开发多端小程序+H5', + target: 'target5', + }, + { + content: '基于京东APP 10.0 视觉规范', + target: 'target6', + location: 'top-end', + }, + { + content: '支持定制主题，内置 700+ 个主题变量', + target: 'target7', + location: 'top-end', + }, + ] + + return ( + <> + { + setShowTour(true) + }} + /> + + + + + + + + + ) +} +export default App; +``` + +::: + + +## Tour + +### Props + + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| visible | 是否展示引导弹出层 | `boolean` | `false` | +| type | 引导类型 | `step` \| `tile` | `step` | +| list | 引导步骤内容 | `ListOptions[]` | `-` | +| offset | 镂空遮罩相对于目标元素的偏移量 | `number[]` | `[8, 10]` | +| location | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/h5/react/2x/#/zh-CN/component/popover) | `string` | `bottom` | +| next | 下一步按钮文案 | `ReactNode` | `''` | +| prev | 上一步按钮文案 | `ReactNode` | `''` | +| complete | 完成按钮文案 | `ReactNode` | `''` | +| mask | 是否显示镂空遮罩 | `boolean` | `true` | +| maskWidth | 镂空遮罩层宽度 | `number` \| `string` | `''` | +| maskHeight | 镂空遮罩层高度 | `number` \| `string` | `''` | +| closeOnOverlayClick | 是否在点击镂空遮罩层后关闭,同 Popopver 的[closeOnClickOverlay 属性](https://nutui.jd.com/h5/react/2x/#/zh-CN/component/popover) | `boolean` | `true` | +| showPrev | 是否展示上一步按钮 | `boolean` | `true` | +| title | 是否展示标题栏 | `ReactNode` | `''` | +| onClose | 气泡层关闭时触发 | `(e: MouseEvent) => void` | `-` | +| onChange | 切换步骤时触发 | `(value: number) => void` | `-` | + +### ListOptions + + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| target | 目标对象 | `Element` \| `string` | `-` | +| content | 气泡层内容 | `string` | `-` | +| location | 弹出层位置 | `string` | `-` | +| popoverOffset | 气泡层偏移量 | `number[]` | `-` | +| arrowOffset | 小箭头的偏移量 | `number` | `-` | + +## 主题定制 + +### 样式变量 + +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。 + +| 名称 | 说明 | 默认值 | +| --- | --- | --- | +| \--nutui-tour-mask-border-radius | 遮罩层的border-radius值 | `10px` | +| \--nutui-tour-content-min-width | 内容区的min-width值 | `200px` | +| \--nutui-tour-content-padding | 内容区的padding值 | `10px 12px` | +| \--nutui-tour-content-inner-margin | 内容区内部的margin值 | `10px 0px` | +| \--nutui-tour-content-inner-font-size | 内容区内部的font-size值 | `14px` | +| \--nutui-tour-content-bottom-margin-top | 内容区底部的margin-top值 | `10px` | +| \--nutui-tour-content-bottom-btn-margin-left | 内容区底部按钮的margin-left值 | `4px` | +| \--nutui-tour-content-bottom-btn-padding | 内容区底部按钮的padding值 | `2px 4px` | +| \--nutui-tour-content-bottom-btn-font-size | 内容区底部按钮的font-size值 | `12px` | +| \--nutui-tour-content-bottom-btn-border-radius | 内容区底部按钮的border-radius值 | `4px` | + + + + + diff --git a/src/packages/tour/doc.taro.md b/src/packages/tour/doc.taro.md new file mode 100644 index 0000000000..a421b10430 --- /dev/null +++ b/src/packages/tour/doc.taro.md @@ -0,0 +1,386 @@ +# Tour 引导 + +### 介绍 + +用于引导用户了解产品功能的气泡组件。 + +## 安装 + +```tsx +import { Tour } from '@nutui/nutui-react-taro'; +``` + +## 代码演示 +### 基础用法 + +:::demo + +```tsx +import React, { useState } from "react"; +import { Cell, Switch, Tour } from '@nutui/nutui-react-taro'; + +const App = () => { + const [showTour, setShowTour] = useState(false) + + const closeTour = () => { + setShowTour(false) + } + + const steps = [ + { + content: '70+ 高质量组件，覆盖移动端主流场景', + target: 'target', + }, + ] + + return ( + <> + { + setShowTour(true) + }} + /> + } + /> + + + ) +} +export default App; +``` + +::: + +### 自定义样式 + +:::demo + +```tsx +import React, { useState } from "react"; +import { Cell, Switch, Tour } from '@nutui/nutui-react-taro'; + +const App = () => { + const [showTour, setShowTour] = useState(false) + + const closeTour = () => { + setShowTour(false) + } + + const steps = [ + { + content: '70+ 高质量组件，覆盖移动端主流场景', + target: 'target', + }, + ] + + return ( + <> + { + setShowTour(true) + }} + /> + } + /> + + + ) +} +export default App; +``` + +::: + +### 设置偏移量 + +:::demo + +```tsx +import React, { useState } from "react"; +import { Cell, Switch, Tour } from '@nutui/nutui-react-taro'; + +const App = () => { + const [showTour, setShowTour] = useState(false) + + const closeTour = () => { + setShowTour(false) + } + + const steps = [ + { + content: '支持一套代码同时开发多端小程序+H5', + target: 'target', + popoverOffset: [40, 12], + arrowOffset: -36, + }, + ] + + return ( + <> + + + + +
+ } + /> + + + ) +} +export default App; +``` + +::: + +### 自定义内容 + +:::demo + +```tsx +import React, { useState } from "react"; +import { Cell, Switch, Tour, Divider } from '@nutui/nutui-react-taro'; + +const App = () => { + const [showTour, setShowTour] = useState(false) + + const closeTour = () => { + setShowTour(false) + } + + const steps = [ + { + target: 'target', + }, + ] + + return ( + <> + { + setShowTour3(true) + }} + /> + } + /> + +
+
nutui 4.x 即将发布，敬请期待
+ +
{ + setShowTour(false) + }} + > + 知道了 +
+
+ + + ) +} +export default App; +``` + +::: + +### 步骤引导 + +:::demo + +```tsx +import React, { useState } from "react"; +import { Cell, Tour, Tabbar } from '@nutui/nutui-react-taro'; + +const App = () => { + const [showTour, setShowTour] = useState(false) + + const closeTour = () => { + setShowTour(false) + } + + const steps = [ + { + content: '70+ 高质量组件，覆盖移动端主流场景', + target: 'target4', + }, + { + content: '支持一套代码同时开发多端小程序+H5', + target: 'target5', + }, + { + content: '基于京东APP 10.0 视觉规范', + target: 'target6', + location: 'top-end', + }, + { + content: '支持定制主题，内置 700+ 个主题变量', + target: 'target7', + location: 'top-end', + }, + ] + + return ( + <> + { + setShowTour(true) + }} + /> + + + + + + + + + ) +} +export default App; +``` + +::: + + +## Tour + +### Props + + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| visible | 是否展示引导弹出层 | `boolean` | `false` | +| type | 引导类型 | `step` \| `tile` | `step` | +| list | 引导步骤内容 | `ListOptions[]` | `-` | +| offset | 镂空遮罩相对于目标元素的偏移量 | `number[]` | `[8, 10]` | +| location | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/h5/react/2x/#/zh-CN/component/popover) | `string` | `bottom` | +| next | 下一步按钮文案 | `ReactNode` | `''` | +| prev | 上一步按钮文案 | `ReactNode` | `''` | +| complete | 完成按钮文案 | `ReactNode` | `''` | +| mask | 是否显示镂空遮罩 | `boolean` | `true` | +| maskWidth | 镂空遮罩层宽度 | `number` \| `string` | `''` | +| maskHeight | 镂空遮罩层高度 | `number` \| `string` | `''` | +| closeOnOverlayClick | 是否在点击镂空遮罩层后关闭,同 Popopver 的[closeOnClickOverlay 属性](https://nutui.jd.com/h5/react/2x/#/zh-CN/component/popover) | `boolean` | `true` | +| showPrev | 是否展示上一步按钮 | `boolean` | `true` | +| title | 是否展示标题栏 | `ReactNode` | `''` | +| onClose | 气泡层关闭时触发 | `(e: MouseEvent) => void` | `-` | +| onChange | 切换步骤时触发 | `(value: number) => void` | `-` | + +### ListOptions + + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| target | 目标对象 | `Element` \| `string` | `-` | +| content | 气泡层内容 | `string` | `-` | +| location | 弹出层位置 | `string` | `-` | +| popoverOffset | 气泡层偏移量 | `number[]` | `-` | +| arrowOffset | 小箭头的偏移量 | `number` | `-` | + +## 主题定制 + +### 样式变量 + +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。 + +| 名称 | 说明 | 默认值 | +| --- | --- | --- | +| \--nutui-tour-mask-border-radius | 遮罩层的border-radius值 | `10px` | +| \--nutui-tour-content-min-width | 内容区的min-width值 | `200px` | +| \--nutui-tour-content-padding | 内容区的padding值 | `10px 12px` | +| \--nutui-tour-content-inner-margin | 内容区内部的margin值 | `10px 0px` | +| \--nutui-tour-content-inner-font-size | 内容区内部的font-size值 | `14px` | +| \--nutui-tour-content-bottom-margin-top | 内容区底部的margin-top值 | `10px` | +| \--nutui-tour-content-bottom-btn-margin-left | 内容区底部按钮的margin-left值 | `4px` | +| \--nutui-tour-content-bottom-btn-padding | 内容区底部按钮的padding值 | `2px 4px` | +| \--nutui-tour-content-bottom-btn-font-size | 内容区底部按钮的font-size值 | `12px` | +| \--nutui-tour-content-bottom-btn-border-radius | 内容区底部按钮的border-radius值 | `4px` | + + + + + diff --git a/src/packages/tour/index.taro.ts b/src/packages/tour/index.taro.ts new file mode 100644 index 0000000000..23c4fccbe4 --- /dev/null +++ b/src/packages/tour/index.taro.ts @@ -0,0 +1,5 @@ +import { Tour } from './tour.taro' + +export type { ListOptions, TourType, TourProps } from './tour.taro' + +export default Tour diff --git a/src/packages/tour/index.ts b/src/packages/tour/index.ts new file mode 100644 index 0000000000..4927f6746a --- /dev/null +++ b/src/packages/tour/index.ts @@ -0,0 +1,5 @@ +import { Tour } from './tour' + +export type { ListOptions, TourType, TourProps } from './tour' + +export default Tour diff --git a/src/packages/tour/tour.scss b/src/packages/tour/tour.scss new file mode 100644 index 0000000000..fdc83a5e80 --- /dev/null +++ b/src/packages/tour/tour.scss @@ -0,0 +1,78 @@ +.nut-tour { + &-mask { + position: fixed; + box-shadow: 0px 0px 0px 150vh rgba(0, 0, 0, 0.5); + border-radius: $tour-mask-border-radius; + z-index: 999; + &-none { + box-shadow: none; + } + + &-hidden { + opacity: 0; + } + } + + &-content { + display: block; + padding: $tour-content-padding; + min-width: $tour-content-min-width; + box-sizing: content-box; + + &-top { + display: block; + text-align: right; + + &-close { + --nut-icon-width: 10px; + --nut-icon-height: 10px; + } + } + + &-inner { + margin: $tour-content-inner-margin; + font-size: $tour-content-inner-font-size; + white-space: nowrap; + } + + &-bottom { + margin-top: $tour-content-bottom-margin-top; + display: flex; + justify-content: space-between; + &-operate { + display: flex; + justify-content: flex-end; + &-btn { + display: inline-block; + border: 1px solid $disable-color; + margin-left: $tour-content-bottom-btn-margin-left; + padding: $tour-content-bottom-btn-padding; + font-size: $tour-content-bottom-btn-font-size; + border-radius: $tour-content-bottom-btn-border-radius; + color: $text-color; + &.active { + color: #fff; + border: 0; + background: $primary-color; + } + } + } + } + + &-tile { + .nut-tour-content-inner { + margin: 0; + } + } + } + + &-masked { + position: fixed; + width: 100vh; + height: 100vh; + z-index: 1000; + top: 0; + left: 0; + background: transparent; + } +} diff --git a/src/packages/tour/tour.taro.tsx b/src/packages/tour/tour.taro.tsx new file mode 100644 index 0000000000..8833617a98 --- /dev/null +++ b/src/packages/tour/tour.taro.tsx @@ -0,0 +1,268 @@ +import React, { useState, useEffect, ReactNode, FunctionComponent } from 'react' +import type { MouseEvent } from 'react' +import { Close } from '@nutui/icons-react-taro' +import classNames from 'classnames' +import Popover, { PopoverLocation } from '@/packages/popover/index.taro' +import { getTaroRectById } from '@/utils/use-taro-rect' +import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { useConfig } from '@/packages/configprovider' + +export interface ListOptions { + target: Element | string + content?: string + location?: string + popoverOffset?: number[] + arrowOffset?: number +} + +export type TourType = 'step' | 'tile' + +export interface TourProps extends BasicComponent { + visible: boolean + type: TourType + location: PopoverLocation | string + mask: boolean + maskWidth: number | string + maskHeight: number | string + offset: number[] + list: ListOptions[] + title: ReactNode + next: ReactNode + prev: ReactNode + complete: ReactNode + showPrev: boolean + closeOnOverlayClick: boolean + onClose: (e: MouseEvent) => void + onChange: (value: number) => void +} +const defaultProps = { + ...ComponentDefaults, + visible: false, + type: 'step', + location: 'bottom', + mask: true, + maskWidth: '', + maskHeight: '', + offset: [8, 10], + title: '', + next: '', + prev: '', + complete: '', + showPrev: true, + closeOnOverlayClick: true, +} as TourProps + +const classPrefix = 'nut-tour' +export const Tour: FunctionComponent< + Partial & + Omit, 'title' | 'onChange'> +> = (props) => { + const { locale } = useConfig() + const { + children, + className, + title, + closeOnOverlayClick, + showPrev, + list, + type, + location, + visible, + mask, + maskWidth, + maskHeight, + offset, + next, + prev, + complete, + onClose, + onChange, + ...rest + } = { + ...defaultProps, + ...props, + } + + const [showTour, setShowTour] = useState(false) + const [showPopup, setShowPopup] = useState(false) + const [active, setActive] = useState(0) + + const [maskRect, setMaskRect] = useState({ + top: 0, + left: 0, + right: 0, + bottom: 0, + width: 0, + height: 0, + }) + + const classes = classNames(className, classPrefix) + + useEffect(() => { + if (visible) { + getRootPosition() + } + setActive(0) + setShowTour(visible) + setShowPopup(visible) + }, [visible]) + + useEffect(() => { + if (visible) { + setShowPopup(true) + getRootPosition() + } + }, [active]) + + const getRootPosition = () => { + getTaroRectById(list[active].target as string).then((rect: any) => { + console.log('rect', rect) + setMaskRect({ + top: rect.top, + left: rect.left, + right: rect.right, + bottom: rect.bottom, + width: rect.width, + height: rect.height, + }) + }) + } + + const maskStyle = () => { + const { width, height, left, top } = maskRect + const center = [left + width / 2, top + height / 2] // 中心点 【横，纵】 + const w = Number(maskWidth || width) + const h = Number(maskHeight || height) + const styles = { + width: `${w + +offset[1] * 2}px`, + height: `${h + +offset[0] * 2}px`, + top: `${center[1] - h / 2 - +offset[0]}px`, + left: `${center[0] - w / 2 - +offset[1]}px`, + } + return styles + } + + const maskClose = (e: MouseEvent) => { + setShowTour(false) + setShowPopup(false) + + onClose && onClose(e) + } + + const handleClickMask = (e: MouseEvent) => { + closeOnOverlayClick && maskClose(e) + } + + const changeStep = (type: string) => { + if (type === 'next') { + setActive(active + 1) + onChange && onChange(active + 1) + } else { + setActive(active - 1) + onChange && onChange(active - 1) + } + setShowPopup(false) + } + + return ( +
+
+ {list.map((item, index) => { + return ( +
+ {index === active && ( + <> + {showTour && ( +
+ )} + + <> + <> + {children || ( + <> + {type === 'step' && ( +
+ {title && ( +
+
maskClose(e)}> + +
+
+ )} +
+ {item.content} +
+
+
+ {active + 1}/{list.length} +
+
+ {active !== 0 && showPrev && ( +
changeStep('prev')} + > + {prev || locale.tour.prevStepText} +
+ )} + {list.length - 1 === active && ( +
maskClose(e)} + > + {complete || locale.tour.completeText} +
+ )} + {list.length - 1 !== active && ( +
changeStep('next')} + > + {next || locale.tour.nextStepText} +
+ )} +
+
+
+ )} + {type === 'tile' && ( +
+
+ {item.content} +
+
+ )} + + )} + + + + )} +
+ ) + })} +
+ ) +} + +Tour.defaultProps = defaultProps +Tour.displayName = 'NutTour' diff --git a/src/packages/tour/tour.tsx b/src/packages/tour/tour.tsx new file mode 100644 index 0000000000..77a286d6b8 --- /dev/null +++ b/src/packages/tour/tour.tsx @@ -0,0 +1,262 @@ +import React, { useState, useEffect, ReactNode, FunctionComponent } from 'react' +import type { MouseEvent } from 'react' +import { Close } from '@nutui/icons-react' +import classNames from 'classnames' +import Popover from '@/packages/popover' +import { PopoverLocation } from '@/packages/popover/popover' +import { getRect } from '@/utils/use-client-rect' +import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { useConfig } from '@/packages/configprovider' + +export interface ListOptions { + target: Element | string + content?: string + location?: string + popoverOffset?: number[] + arrowOffset?: number +} + +export type TourType = 'step' | 'tile' + +export interface TourProps extends BasicComponent { + visible: boolean + type: TourType + location: PopoverLocation | string + mask: boolean + maskWidth: number | string + maskHeight: number | string + offset: number[] + list: ListOptions[] + title: ReactNode + next: ReactNode + prev: ReactNode + complete: ReactNode + showPrev: boolean + closeOnOverlayClick: boolean + onClose: (e: MouseEvent) => void + onChange: (value: number) => void +} +const defaultProps = { + ...ComponentDefaults, + visible: false, + type: 'step', + location: 'bottom', + mask: true, + maskWidth: '', + maskHeight: '', + offset: [8, 10], + title: '', + next: '', + prev: '', + complete: '', + showPrev: true, + closeOnOverlayClick: true, +} as TourProps + +const classPrefix = 'nut-tour' +export const Tour: FunctionComponent< + Partial & + Omit, 'title' | 'onChange'> +> = (props) => { + const { locale } = useConfig() + const { + children, + className, + title, + closeOnOverlayClick, + showPrev, + list, + type, + location, + visible, + mask, + maskWidth, + maskHeight, + offset, + next, + prev, + complete, + onClose, + onChange, + ...rest + } = { + ...defaultProps, + ...props, + } + + const [showTour, setShowTour] = useState(false) + const [showPopup, setShowPopup] = useState(false) + const [active, setActive] = useState(0) + + const [maskRect, setMaskRect] = useState({ + top: 0, + left: 0, + right: 0, + bottom: 0, + width: 0, + height: 0, + }) + + const classes = classNames(className, classPrefix) + + useEffect(() => { + if (visible) { + getRootPosition() + } + setActive(0) + setShowTour(visible) + setShowPopup(visible) + }, [visible]) + + useEffect(() => { + if (visible) { + setShowPopup(true) + getRootPosition() + } + }, [active]) + + const getRootPosition = () => { + const el: any = document.querySelector(`#${list[active].target}`) + const rect = getRect(el) + setMaskRect(rect) + } + + const maskStyle = () => { + const { width, height, left, top } = maskRect + const center = [left + width / 2, top + height / 2] // 中心点 【横，纵】 + const w = Number(maskWidth || width) + const h = Number(maskHeight || height) + const styles = { + width: `${w + +offset[1] * 2}px`, + height: `${h + +offset[0] * 2}px`, + top: `${center[1] - h / 2 - +offset[0]}px`, + left: `${center[0] - w / 2 - +offset[1]}px`, + } + return styles + } + + const maskClose = (e: MouseEvent) => { + setShowTour(false) + setShowPopup(false) + + onClose && onClose(e) + } + + const handleClickMask = (e: MouseEvent) => { + closeOnOverlayClick && maskClose(e) + } + + const changeStep = (type: string) => { + if (type === 'next') { + setActive(active + 1) + onChange && onChange(active + 1) + } else { + setActive(active - 1) + onChange && onChange(active - 1) + } + setShowPopup(false) + } + + return ( +
+
+ {list.map((item, index) => { + return ( +
+ {index === active && ( + <> + {showTour && ( +
+ )} + + {/* placeholder don't delete <> */} + <> + <> + {children || ( + <> + {type === 'step' && ( +
+ {title && ( +
+
maskClose(e)}> + +
+
+ )} +
+ {item.content} +
+
+
+ {active + 1}/{list.length} +
+
+ {active !== 0 && showPrev && ( +
changeStep('prev')} + > + {prev || locale.tour.prevStepText} +
+ )} + {list.length - 1 === active && ( +
maskClose(e)} + > + {complete || locale.tour.completeText} +
+ )} + {list.length - 1 !== active && ( +
changeStep('next')} + > + {next || locale.tour.nextStepText} +
+ )} +
+
+
+ )} + {type === 'tile' && ( +
+
+ {item.content} +
+
+ )} + + )} + + + + )} +
+ ) + })} +
+ ) +} + +Tour.defaultProps = defaultProps +Tour.displayName = 'NutTour' diff --git a/src/packages/uploader/uploader.scss b/src/packages/uploader/uploader.scss index 2edb379cbf..297d6e25d9 100644 --- a/src/packages/uploader/uploader.scss +++ b/src/packages/uploader/uploader.scss @@ -92,7 +92,7 @@ } &__msg { - color: $color-help; + color: $color-text-help; font-size: 12px; } } @@ -112,7 +112,7 @@ display: flex; align-items: center; justify-content: space-between; - background-color: $color-card-background-wrapper; + background-color: $color-background-sunken; border-radius: 4px; .nut-progress { @@ -161,6 +161,7 @@ &__c { width: 100%; height: 100%; + position: initial; border-radius: 6px; } diff --git a/src/packages/uploader/uploader.taro.tsx b/src/packages/uploader/uploader.taro.tsx index b8f33f8880..2905ec5e7b 100644 --- a/src/packages/uploader/uploader.taro.tsx +++ b/src/packages/uploader/uploader.taro.tsx @@ -167,7 +167,7 @@ export class FileItem { message = '准备中..' - uid: string = new Date().getTime().toString() + uid: string = Date.now().toString() name?: string @@ -370,6 +370,7 @@ const InternalUploader: ForwardRefRenderFunction< if (item.uid === fileItem.uid) { item.status = 'success' item.message = locale.uploader.success + item.responseText = responseText } }) return [...fileList] @@ -391,6 +392,7 @@ const InternalUploader: ForwardRefRenderFunction< if (item.uid === fileItem.uid) { item.status = 'error' item.message = locale.uploader.error + item.responseText = responseText } }) return [...fileList] @@ -437,7 +439,7 @@ const InternalUploader: ForwardRefRenderFunction< fileItem.name = filepath fileItem.status = 'ready' fileItem.type = fileType - + fileItem.uid = `${fileItem.uid}_${index}` if (autoUpload) { fileItem.message = locale.uploader.readyUpload } else { @@ -536,6 +538,7 @@ const InternalUploader: ForwardRefRenderFunction< )} {fileList.length !== 0 && + Array.isArray(fileList) && fileList.map((item: any, index: number) => { return (
{ return (
{ + return /[\\/]node_modules[\\/]/.test(module.resource) + }, + priority: 10, + }, + // taro: { + // name: 'taro', + // test: (module) => { + // if (/@tarojs[\\/][a-z]+/.test(module.context)) { + // console.log(module.context) + // } + // return /@tarojs[\\/][a-z]+/.test(module.context) + // }, + // priority: 100, + // }, + }, + }) + }, + }, h5: {}, } diff --git a/src/sites/mobile-taro/config/index.js b/src/sites/mobile-taro/config/index.js index 4b12a288cc..0e271313f5 100644 --- a/src/sites/mobile-taro/config/index.js +++ b/src/sites/mobile-taro/config/index.js @@ -43,38 +43,6 @@ const config = { }, framework: 'react', mini: { - webpackChain(chain, webpack) { - chain.optimization.splitChunks({ - chunks: 'all', - maxInitialRequests: Infinity, - minSize: 0, - cacheGroups: { - common: { - name: 'common', - minChunks: 2, - priority: 1, - }, - vendors: { - name: 'vendors', - minChunks: 2, - test: (module) => { - return /[\\/]node_modules[\\/]/.test(module.resource) - }, - priority: 10, - }, - // taro: { - // name: 'taro', - // test: (module) => { - // if (/@tarojs[\\/][a-z]+/.test(module.context)) { - // console.log(module.context) - // } - // return /@tarojs[\\/][a-z]+/.test(module.context) - // }, - // priority: 100, - // }, - }, - }) - }, postcss: { pxtransform: { enable: true, diff --git a/src/sites/mobile-taro/src/app.config.ts b/src/sites/mobile-taro/src/app.config.ts index 114ef42b7b..7aabe2ca33 100644 --- a/src/sites/mobile-taro/src/app.config.ts +++ b/src/sites/mobile-taro/src/app.config.ts @@ -1,122 +1,126 @@ + const subPackages = [ { - root: 'base', - pages: [ - 'pages/button/index', - 'pages/cell/index', - 'pages/configprovider/index', - 'pages/icon/index', - 'pages/image/index', - 'pages/overlay/index', - ], + "root": "base", + "pages": [ + "pages/button/index", + "pages/cell/index", + "pages/configprovider/index", + "pages/icon/index", + "pages/image/index", + "pages/overlay/index" + ] }, { - root: 'layout', - pages: [ - 'pages/divider/index', - 'pages/grid/index', - 'pages/layout/index', - 'pages/sticky/index', - ], + "root": "layout", + "pages": [ + "pages/divider/index", + "pages/grid/index", + "pages/layout/index", + "pages/space/index", + "pages/sticky/index" + ] }, { - root: 'nav', - pages: [ - 'pages/backtop/index', - 'pages/elevator/index', - 'pages/fixednav/index', - 'pages/navbar/index', - 'pages/sidenavbar/index', - 'pages/tabbar/index', - 'pages/tabs/index', - ], + "root": "nav", + "pages": [ + "pages/backtop/index", + "pages/elevator/index", + "pages/fixednav/index", + "pages/navbar/index", + "pages/sidenavbar/index", + "pages/tabbar/index", + "pages/tabs/index" + ] }, { - root: 'dentry', - pages: [ - 'pages/address/index', - 'pages/calendar/index', - 'pages/cascader/index', - 'pages/checkbox/index', - 'pages/datepicker/index', - 'pages/form/index', - 'pages/input/index', - 'pages/inputnumber/index', - 'pages/menu/index', - 'pages/numberkeyboard/index', - 'pages/picker/index', - 'pages/radio/index', - 'pages/range/index', - 'pages/rate/index', - 'pages/searchbar/index', - 'pages/shortpassword/index', - 'pages/signature/index', - 'pages/switch/index', - 'pages/textarea/index', - 'pages/uploader/index', - ], + "root": "dentry", + "pages": [ + "pages/address/index", + "pages/calendar/index", + "pages/cascader/index", + "pages/checkbox/index", + "pages/datepicker/index", + "pages/form/index", + "pages/input/index", + "pages/inputnumber/index", + "pages/menu/index", + "pages/numberkeyboard/index", + "pages/picker/index", + "pages/radio/index", + "pages/range/index", + "pages/rate/index", + "pages/searchbar/index", + "pages/shortpassword/index", + "pages/signature/index", + "pages/switch/index", + "pages/textarea/index", + "pages/uploader/index" + ] }, { - root: 'feedback', - pages: [ - 'pages/actionsheet/index', - 'pages/badge/index', - 'pages/dialog/index', - 'pages/drag/index', - 'pages/empty/index', - 'pages/infiniteloading/index', - 'pages/noticebar/index', - 'pages/notify/index', - 'pages/popover/index', - 'pages/popup/index', - 'pages/pulltorefresh/index', - 'pages/skeleton/index', - 'pages/swipe/index', - 'pages/toast/index', - ], + "root": "feedback", + "pages": [ + "pages/actionsheet/index", + "pages/badge/index", + "pages/dialog/index", + "pages/drag/index", + "pages/empty/index", + "pages/infiniteloading/index", + "pages/noticebar/index", + "pages/notify/index", + "pages/popover/index", + "pages/popup/index", + "pages/pulltorefresh/index", + "pages/skeleton/index", + "pages/swipe/index", + "pages/toast/index", + 'pages/loading/index' + ] }, { - root: 'exhibition', - pages: [ - 'pages/animate/index', - 'pages/animatingnumbers/index', - 'pages/avatar/index', - 'pages/circleprogress/index', - 'pages/collapse/index', - 'pages/countdown/index', - 'pages/ellipsis/index', - 'pages/imagepreview/index', - 'pages/indicator/index', - 'pages/pagination/index', - 'pages/price/index', - 'pages/progress/index', - 'pages/steps/index', - 'pages/swiper/index', - 'pages/table/index', - 'pages/tag/index', - 'pages/video/index', - 'pages/virtuallist/index', - ], + "root": "exhibition", + "pages": [ + "pages/animate/index", + "pages/animatingnumbers/index", + "pages/avatar/index", + "pages/circleprogress/index", + "pages/collapse/index", + "pages/countdown/index", + "pages/ellipsis/index", + "pages/imagepreview/index", + "pages/indicator/index", + "pages/pagination/index", + "pages/price/index", + "pages/progress/index", + "pages/steps/index", + "pages/swiper/index", + "pages/table/index", + "pages/tag/index", + "pages/tour/index", + "pages/video/index", + "pages/virtuallist/index" + ] }, { - root: 'business', - pages: [ - 'pages/barrage/index', - 'pages/card/index', - 'pages/timeselect/index', - 'pages/trendarrow/index', - 'pages/watermark/index', - ], - }, -] + "root": "business", + "pages": [ + "pages/barrage/index", + "pages/card/index", + "pages/timeselect/index", + "pages/trendarrow/index", + "pages/watermark/index" + ] + } +]; -export default defineAppConfig({ +export default defineAppConfig ({ pages: ['pages/index/index'], subPackages, window: { backgroundTextStyle: 'light', navigationBarBackgroundColor: '#fff', navigationBarTitleText: 'NutUI-React', - navigationBarTextStyle: 'black', - }, + navigationBarTextStyle: 'black' + } }) diff --git a/src/sites/taro-ui-to-nutui-demo/src/pages/layout/flex/index.scss b/src/sites/taro-ui-to-nutui-demo/src/pages/layout/flex/index.scss index 0474c7789d..c77f0e594d 100644 --- a/src/sites/taro-ui-to-nutui-demo/src/pages/layout/flex/index.scss +++ b/src/sites/taro-ui-to-nutui-demo/src/pages/layout/flex/index.scss @@ -7,7 +7,7 @@ .at-col { padding: $spacing-v-md $spacing-h-md; color: $color-white; - font-size: $font-text; + font-size: $font-size; text-align: center; &:nth-child(odd) { diff --git a/src/sites/theme/components/theme-setting/helpers.ts b/src/sites/theme/components/theme-setting/helpers.ts index ed0eb84bca..ac2d0b0249 100644 --- a/src/sites/theme/components/theme-setting/helpers.ts +++ b/src/sites/theme/components/theme-setting/helpers.ts @@ -144,7 +144,7 @@ const loadScript = async (url: string) => const zhKeyDesc = { '$color-primary': '全局主题色', - '$color-primary-end': '全局主题色结束颜色（主题色渐变，例如 Button）', + '$color-primary-stop-2': '全局主题色结束颜色（主题色渐变，例如 Button）', } as any type Obj = { diff --git a/src/styles/theme-dark.scss b/src/styles/theme-dark.scss index c9669713ef..02d1d60fce 100644 --- a/src/styles/theme-dark.scss +++ b/src/styles/theme-dark.scss @@ -11,73 +11,74 @@ page { --nutui-brand-9: #f26e61; // 梯度9 --nutui-brand-10: #e5928a; // 梯度10 - --nutui-brand-100: #f54958; // 梯度100 + --nutui-brand-stop-1: #f54958; // 梯度100 + --nutui-brand-stop-2: #fa3725; // 渐变色止 + --nutui-brand-101: rgba(250, 44, 25, 0.5); // 梯度101 --nutui-color-primary: var(--nutui-brand-6); - --nutui-color-primary-start: var(--nutui-brand-100); - --nutui-color-primary-end: var(--nutui-brand-6); + --nutui-color-primary-stop-1: var(--nutui-brand-stop-1); + --nutui-color-primary-stop-2: var(--nutui-brand-stop-2); --nutui-color-primary-press: var(--nutui-brand-7); - --nutui-color-primary-disabled: var(--nutui-brand-3); + --nutui-color-primary-disable: var(--nutui-brand-3); --nutui-color-primary-text: #ffffff; --nutui-color-primary-light: var(--nutui-brand-1); - --nutui-color-primary-light-text: var(--nutui-color-primary); --nutui-color-primary-light-press: var(--nutui-brand-2); - --nutui-color-primary-light-press-text: var(--nutui-color-primary-press); - --nutui-color-primary-link: #040608; + --nutui-color-text-link: #040608; // 背景色 // 卡片背景色 - --nutui-gray-0: #1f1f1f; + --nutui-gray-1: #1f1f1f; // 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。 - --nutui-gray-1: #141414; + --nutui-gray-2: #141414; // 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。 - --nutui-gray-2: #0a0a0a; + --nutui-gray-3: #0a0a0a; // 文字色 // 四级文字色，不可操作内容色，用于预置内容、无效内容、特殊不可点击按钮、组件边框线等。 - --nutui-gray-3: #666666; + --nutui-gray-4: #666666; // 三级文字色（次要） - --nutui-gray-4: #818181; + --nutui-gray-5: #818181; // 二级文字色（常规），用于次级标题、属性标示、非主要信息引导等。 - --nutui-gray-5: #999999; + --nutui-gray-6: #999999; // 一级文字色（重要）主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。 - --nutui-gray-6: #cccccc; + --nutui-gray-7: #cccccc; + --nutui-black-1: rgba(255, 255, 255, 0); // 蒙层色 // 容错蒙层 - --nutui-black-1: rgba(255, 255, 255, 0.2); + --nutui-black-2: rgba(255, 255, 255, 0.2); // 线条色 // 间隔线/容错线，用于结构或信息分割 - --nutui-black-2: rgba(255, 255, 255, 0.06); - // --nutui-black-3: rgba(0, 0, 0, 0.1); - // --nutui-black-4: rgba(0, 0, 0, 0.2); - // --nutui-black-5: rgba(0, 0, 0, 0.3); - // --nutui-black-6: rgba(0, 0, 0, 0.4); - // --nutui-black-7: rgba(0, 0, 0, 0.5); - // --nutui-black-8: rgba(0, 0, 0, 0.6); + --nutui-black-3: rgba(255, 255, 255, 0.06); + // --nutui-black-4: rgba(0, 0, 0, 0.1); + // --nutui-black-5: rgba(0, 0, 0, 0.2); + // --nutui-black-6: rgba(0, 0, 0, 0.3); + // --nutui-black-7: rgba(0, 0, 0, 0.4); + // --nutui-black-8: rgba(0, 0, 0, 0.5); + // --nutui-black-9: rgba(0, 0, 0, 0.6); // 蒙层色 // 全局蒙层，用于弹出层、弹窗、新功能引导出现的整页遮罩 - --nutui-black-9: rgba(0, 0, 0, 0.7); - // --nutui-black-10: rgba(0, 0, 0, 0.8); - // --nutui-black-11: rgba(0, 0, 0, 0.9); - // --nutui-black-12: rgba(0, 0, 0, 1); + --nutui-black-10: rgba(0, 0, 0, 0.7); + // --nutui-black-11: rgba(0, 0, 0, 0.8); + // --nutui-black-12: rgba(0, 0, 0, 0.9); + // --nutui-black-13: rgba(0, 0, 0, 1); - --nutui-white-0: rgba(31, 31, 31, 0); - // --nutui-white-1: rgba(255, 255, 255, 0.02); - // --nutui-white-2: rgba(255, 255, 255, 0.06); - // --nutui-white-3: rgba(255, 255, 255, 0.1); - // --nutui-white-4: rgba(255, 255, 255, 0.2); - // --nutui-white-5: rgba(255, 255, 255, 0.3); - // --nutui-white-6: rgba(255, 255, 255, 0.4); - --nutui-white-7: rgba(31, 31, 31, 0.5); - // --nutui-white-8: rgba(255, 255, 255, 0.6); - // --nutui-white-9: rgba(255, 255, 255, 0.7); - // --nutui-white-10: rgba(255, 255, 255, 0.8); - // --nutui-white-11: rgba(255, 255, 255, 0.9); - // --nutui-white-12: rgba(255, 255, 255, 1); + --nutui-white-1: rgba(31, 31, 31, 0); + // --nutui-white-2: rgba(255, 255, 255, 0.02); + // --nutui-white-3: rgba(255, 255, 255, 0.06); + // --nutui-white-4: rgba(255, 255, 255, 0.1); + // --nutui-white-5: rgba(255, 255, 255, 0.2); + // --nutui-white-6: rgba(255, 255, 255, 0.3); + // --nutui-white-7: rgba(255, 255, 255, 0.4); + --nutui-white-8: rgba(31, 31, 31, 0.5); + // --nutui-white-9: rgba(255, 255, 255, 0.6); + // --nutui-white-10: rgba(255, 255, 255, 0.7); + // --nutui-white-11: rgba(255, 255, 255, 0.8); + // --nutui-white-12: rgba(255, 255, 255, 0.9); + // --nutui-white-13: rgba(255, 255, 255, 1); --nutui-color-info: #1988fa; - --nutui-color-disabled: var(--nutui-gray-3); + --nutui-color-text-disable: var(--nutui-gray-4); // 字体 --nutui-font-size-1: 10px; diff --git a/src/styles/theme-default.scss b/src/styles/theme-default.scss index 3a1e38167c..507620ce80 100644 --- a/src/styles/theme-default.scss +++ b/src/styles/theme-default.scss @@ -11,72 +11,74 @@ page { --nutui-brand-9: #780d03; // 梯度9 --nutui-brand-10: #4d0004; // 梯度10 - --nutui-brand-100: #f53d4c; // 梯度100 --nutui-brand-101: rgba(250, 44, 25, 0.5); // 梯度101 + --nutui-brand-stop-1: #f53d4d; // 渐变色起 + --nutui-brand-stop-2: #fa2c19; // 渐变色止 --nutui-color-primary: var(--nutui-brand-6); - --nutui-color-primary-start: var(--nutui-brand-100); - --nutui-color-primary-end: var(--nutui-brand-6); + --nutui-color-primary-stop-1: var(--nutui-brand-stop-1); + --nutui-color-primary-stop-2: var(--nutui-brand-stop-2); --nutui-color-primary-press: var(--nutui-brand-7); - --nutui-color-primary-disabled: var(--nutui-brand-3); + --nutui-color-primary-disable: var(--nutui-brand-3); --nutui-color-primary-text: #ffffff; --nutui-color-primary-light: var(--nutui-brand-1); - --nutui-color-primary-light-text: var(--nutui-color-primary); --nutui-color-primary-light-press: var(--nutui-brand-2); - --nutui-color-primary-light-press-text: var(--nutui-color-primary-press); - --nutui-color-primary-link: #396acc; + + --nutui-color-text-link: #396acc; + // 背景色 // 卡片背景色 - --nutui-gray-0: #ffffff; + --nutui-gray-1: #ffffff; // 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。 - --nutui-gray-1: #f8f8f8; + --nutui-gray-2: #f8f8f8; // 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。 - --nutui-gray-2: #f6f6f6; + --nutui-gray-3: #f6f6f6; // 文字色 // 四级文字色，不可操作内容色，用于预置内容、无效内容、特殊不可点击按钮、组件边框线等。 - --nutui-gray-3: #bfbfbf; + --nutui-gray-4: #bfbfbf; // 三级文字色（次要） - --nutui-gray-4: #8c8c8c; + --nutui-gray-5: #8c8c8c; // 二级文字色（常规），用于次级标题、属性标示、非主要信息引导等。 - --nutui-gray-5: #595959; + --nutui-gray-6: #595959; // 一级文字色（重要）主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。 - --nutui-gray-6: #1a1a1a; + --nutui-gray-7: #1a1a1a; + --nutui-black-1: rgba(0, 0, 0, 0); // 蒙层色 // 容错蒙层 - --nutui-black-1: rgba(0, 0, 0, 0.02); + --nutui-black-2: rgba(0, 0, 0, 0.02); // 线条色 // 间隔线/容错线，用于结构或信息分割 - --nutui-black-2: rgba(0, 0, 0, 0.06); - --nutui-black-3: rgba(0, 0, 0, 0.1); - --nutui-black-4: rgba(0, 0, 0, 0.2); - --nutui-black-5: rgba(0, 0, 0, 0.3); - --nutui-black-6: rgba(0, 0, 0, 0.4); - --nutui-black-7: rgba(0, 0, 0, 0.5); - --nutui-black-8: rgba(0, 0, 0, 0.6); + --nutui-black-3: rgba(0, 0, 0, 0.06); + --nutui-black-4: rgba(0, 0, 0, 0.1); + --nutui-black-5: rgba(0, 0, 0, 0.2); + --nutui-black-6: rgba(0, 0, 0, 0.3); + --nutui-black-7: rgba(0, 0, 0, 0.4); + --nutui-black-8: rgba(0, 0, 0, 0.5); + --nutui-black-9: rgba(0, 0, 0, 0.6); // 蒙层色 // 全局蒙层，用于弹出层、弹窗、新功能引导出现的整页遮罩 - --nutui-black-9: rgba(0, 0, 0, 0.7); - --nutui-black-10: rgba(0, 0, 0, 0.8); - --nutui-black-11: rgba(0, 0, 0, 0.9); - --nutui-black-12: rgba(0, 0, 0, 1); + --nutui-black-10: rgba(0, 0, 0, 0.7); + --nutui-black-11: rgba(0, 0, 0, 0.8); + --nutui-black-12: rgba(0, 0, 0, 0.9); + --nutui-black-13: rgba(0, 0, 0, 1); - --nutui-white-0: rgba(255, 255, 255, 0); - --nutui-white-1: rgba(255, 255, 255, 0.02); - --nutui-white-2: rgba(255, 255, 255, 0.06); - --nutui-white-3: rgba(255, 255, 255, 0.1); - --nutui-white-4: rgba(255, 255, 255, 0.2); - --nutui-white-5: rgba(255, 255, 255, 0.3); - --nutui-white-6: rgba(255, 255, 255, 0.4); - --nutui-white-7: rgba(255, 255, 255, 0.5); - --nutui-white-8: rgba(255, 255, 255, 0.6); - --nutui-white-9: rgba(255, 255, 255, 0.7); - --nutui-white-10: rgba(255, 255, 255, 0.8); - --nutui-white-11: rgba(255, 255, 255, 0.9); - --nutui-white-12: rgba(255, 255, 255, 1); + --nutui-white-1: rgba(255, 255, 255, 0); + --nutui-white-2: rgba(255, 255, 255, 0.02); + --nutui-white-3: rgba(255, 255, 255, 0.06); + --nutui-white-4: rgba(255, 255, 255, 0.1); + --nutui-white-5: rgba(255, 255, 255, 0.2); + --nutui-white-6: rgba(255, 255, 255, 0.3); + --nutui-white-7: rgba(255, 255, 255, 0.4); + --nutui-white-8: rgba(255, 255, 255, 0.5); + --nutui-white-9: rgba(255, 255, 255, 0.6); + --nutui-white-10: rgba(255, 255, 255, 0.7); + --nutui-white-11: rgba(255, 255, 255, 0.8); + --nutui-white-12: rgba(255, 255, 255, 0.9); + --nutui-white-13: rgba(255, 255, 255, 1); --nutui-color-info: #1988fa; - --nutui-color-disabled: var(--nutui-gray-3); + --nutui-color-text-disable: var(--nutui-gray-4); // 字体 --nutui-font-size-1: 10px; @@ -91,6 +93,7 @@ page { --nutui-font-size-10: 28px; // 字重 --nutui-font-weight: 400; + --nutui-font-weight-bold: 500; // 行高 --nutui-line-height-base: 1.5; } diff --git a/src/styles/theme-jmapp.scss b/src/styles/theme-jmapp.scss index 90d3e02435..a5c1030c34 100644 --- a/src/styles/theme-jmapp.scss +++ b/src/styles/theme-jmapp.scss @@ -13,32 +13,31 @@ page { --nutui-brand-11: #1b3663; // 梯度11 --nutui-brand-12: #162d54; // 梯度12 - --nutui-brand-100: var(--nutui-brand-7); // 梯度100 --nutui-brand-101: var(--nutui-brand-8); // 梯度101 + --nutui-brand-stop-1: var(--nutui-brand-7); // 渐变色起 + --nutui-brand-stop-2: var(--nutui-brand-7); // 渐变色止 --nutui-color-primary: var(--nutui-brand-8); - --nutui-color-primary-start: var(--nutui-brand-8); - --nutui-color-primary-end: var(--nutui-brand-8); + --nutui-color-primary-stop-1: var(--nutui-brand-stop-1); + --nutui-color-primary-stop-2: var(--nutui-brand-stop-2); --nutui-color-primary-press: var(--nutui-brand-9); - --nutui-color-primary-disabled: var(--nutui-brand-3); + --nutui-color-primary-disable: var(--nutui-brand-3); --nutui-color-primary-text: #ffffff; --nutui-color-primary-light: var(--nutui-brand-1); - --nutui-color-primary-light-text: var(--nutui-color-primary); --nutui-color-primary-light-press: var(--nutui-brand-2); - --nutui-color-primary-light-press-text: var(--nutui-color-primary-press); - --nutui-color-primary-link: var(--nutui-brand-8); + --nutui-color-text-link: var(--nutui-brand-8); // 卡片背景色 - --nutui-gray-0: #ffffff; + --nutui-gray-1: #ffffff; // 通用背景色、轮廓描边色 - --nutui-gray-1: #f4f4f4; + --nutui-gray-2: #f4f4f4; // 轮廓描边色（适中） - --nutui-gray-2: #e8e8e8; + --nutui-gray-3: #e8e8e8; // 轮廓描边色（深） - --nutui-gray-3: #dddddd; - --nutui-gray-4: #c7c7c7; - --nutui-gray-5: #b1b1b1; - --nutui-gray-6: #9b9b9b; + --nutui-gray-4: #dddddd; + --nutui-gray-5: #c7c7c7; + --nutui-gray-6: #b1b1b1; + --nutui-gray-7: #9b9b9b; --nutui-gray-7: #868686; --nutui-gray-8: #727272; --nutui-gray-9: #5e5e5e; @@ -46,40 +45,41 @@ page { --nutui-gray-11: #373737; --nutui-gray-12: #2e2e2e; - --nutui-black-1: rgba(0, 0, 0, 0.02); - --nutui-black-2: rgba(0, 0, 0, 0.06); - --nutui-black-3: rgba(0, 0, 0, 0.1); - --nutui-black-4: rgba(0, 0, 0, 0.2); + --nutui-black-1: rgba(0, 0, 0, 0); + --nutui-black-2: rgba(0, 0, 0, 0.02); + --nutui-black-3: rgba(0, 0, 0, 0.06); + --nutui-black-4: rgba(0, 0, 0, 0.1); + --nutui-black-5: rgba(0, 0, 0, 0.2); // 四级文本色，禁用文本色，用于表达禁用状态，占位符等需弱化呈现的文本 - --nutui-black-5: rgba(0, 0, 0, 0.3); - --nutui-black-6: rgba(0, 0, 0, 0.4); + --nutui-black-6: rgba(0, 0, 0, 0.3); + --nutui-black-7: rgba(0, 0, 0, 0.4); // 三级文本色，描述文本色，用于对正文级标题做注释说明 - --nutui-black-7: rgba(0, 0, 0, 0.5); + --nutui-black-8: rgba(0, 0, 0, 0.5); // 全局蒙层，用于弹出层、弹窗、新功能引导出现的整页遮罩 - --nutui-black-8: rgba(0, 0, 0, 0.6); + --nutui-black-9: rgba(0, 0, 0, 0.6); // 二级文本色，正文文本色，用于次级标题，属性标示、非主要信息引导等 - --nutui-black-9: rgba(0, 0, 0, 0.7); - --nutui-black-10: rgba(0, 0, 0, 0.8); + --nutui-black-10: rgba(0, 0, 0, 0.7); + --nutui-black-11: rgba(0, 0, 0, 0.8); // 一级文字色，标题文本色，主要内容用色，常用语常规标题内容等 - --nutui-black-11: rgba(0, 0, 0, 0.9); - --nutui-black-12: rgba(0, 0, 0, 1); + --nutui-black-12: rgba(0, 0, 0, 0.9); + --nutui-black-13: rgba(0, 0, 0, 1); - --nutui-white-0: rgba(255, 255, 255, 0); - --nutui-white-1: rgba(255, 255, 255, 0.02); - --nutui-white-2: rgba(255, 255, 255, 0.06); - --nutui-white-3: rgba(255, 255, 255, 0.1); - --nutui-white-4: rgba(255, 255, 255, 0.2); - --nutui-white-5: rgba(255, 255, 255, 0.3); - --nutui-white-6: rgba(255, 255, 255, 0.4); - --nutui-white-7: rgba(255, 255, 255, 0.5); - --nutui-white-8: rgba(255, 255, 255, 0.6); - --nutui-white-9: rgba(255, 255, 255, 0.7); - --nutui-white-10: rgba(255, 255, 255, 0.8); - --nutui-white-11: rgba(255, 255, 255, 0.9); - --nutui-white-12: rgba(255, 255, 255, 1); + --nutui-white-1: rgba(255, 255, 255, 0); + --nutui-white-2: rgba(255, 255, 255, 0.02); + --nutui-white-3: rgba(255, 255, 255, 0.06); + --nutui-white-4: rgba(255, 255, 255, 0.1); + --nutui-white-5: rgba(255, 255, 255, 0.2); + --nutui-white-6: rgba(255, 255, 255, 0.3); + --nutui-white-7: rgba(255, 255, 255, 0.4); + --nutui-white-8: rgba(255, 255, 255, 0.5); + --nutui-white-9: rgba(255, 255, 255, 0.6); + --nutui-white-10: rgba(255, 255, 255, 0.7); + --nutui-white-11: rgba(255, 255, 255, 0.8); + --nutui-white-12: rgba(255, 255, 255, 0.9); + --nutui-white-13: rgba(255, 255, 255, 1); --nutui-color-info: #1988fa; - --nutui-color-disabled: var(--nutui-black-5); + --nutui-color-text-disable: var(--nutui-black-6); // 字体 --nutui-font-size-1: 10px; --nutui-font-size-2: 12px; diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss index d844eeefbd..72b8790643 100644 --- a/src/styles/variables-jmapp.scss +++ b/src/styles/variables-jmapp.scss @@ -1,57 +1,72 @@ // ---------------------------------------------------- // 主色调 $color-primary: var(--nutui-color-primary) !default; -$color-primary-start: var(--nutui-color-primary-start) !default; -$color-primary-end: var(--nutui-color-primary-end) !default; +$color-primary-stop-1: var(--nutui-color-primary-stop-1) !default; +$color-primary-stop-2: var(--nutui-color-primary-stop-2) !default; $color-primary-press: var(--nutui-color-primary-press) !default; -$color-primary-disabled: var(--nutui-color-primary-disabled) !default; -$color-primary-text: var(--nutui-color-primary-text) !default; +$color-primary-disable: var(--nutui-color-primary-disable) !default; $color-primary-light: var(--nutui-color-primary-light) !default; -$color-primary-light-text: var(--nutui-color-primarylight-text) !default; $color-primary-light-press: var(--nutui-color-primary-light-press) !default; -$color-primary-light-press-text: var( - --nutui-color-primary-light-press-text -) !default; -$color-primary-link: var(--nutui-color-primary-link) !default; -$color-info: var(--nutui-color-info) !default; +// 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。 +$color-background: var(--nutui-gray-3) !default; +// 卡片背景色 +$color-background-overlay: var(--nutui-gray-1) !default; +// 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。 +$color-background-sunken: var(--nutui-gray-2) !default; + // 标题重要字 // 主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。 $color-title: var(--nutui-gray-11) !default; // 常规: 次要文字色，用于次级标题、属性标示、非主要信息引导等。 $color-text: var(--nutui-gray-9) !default; // 辅助色，暂无用到。todo -$color-help: var(--nutui-gray-7) !default; +$color-text-help: var(--nutui-gray-7) !default; // 特殊禁用色 -$color-disabled: var(--nutui-color-disabled) !default; -$white: var(--nutui-gray-0) !default; -$black: $color-title !default; - -$disable-bg-color: $white !default; -$required-color: $color-primary !default; +$color-text-disable: var(--nutui-color-text-disable) !default; -// 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。 -$color-background: var(--nutui-gray-1) !default; -// 卡片背景色 -$color-card-background: var(--nutui-gray-0) !default; -// 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。 -$color-card-background-wrapper: var(--nutui-gray-0) !default; -// 背景禁用色 -$color-background-disabled: var(--nutui-color-disabled) !default; - -// ---------------------------------------------------- // 蒙层颜色 // 页面全局蒙层 -$color-mask: var(--nutui-black-9) !default; +$color-mask: var(--nutui-black-10) !default; // 容错蒙层 -$color-part-mask: var(--nutui-black-1) !default; +$color-mask-part: var(--nutui-black-2) !default; // 分割信息的颜色 -$color-divider: var(--nutui-black-2) !default; +$color-border: var(--nutui-black-3) !default; +$color-border-disable: var(--nutui-black-3) !default; // ---- Font Family ---- $font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif !default; +// Font +$font-size-xs: var(--nutui-font-size-1, 10px) !default; +$font-size-small: var(--nutui-font-size-2, 12px) !default; +$font-size: var(--nutui-font-size-3, 14px) !default; +$font-size-large: var(--nutui-font-size-4, 16px) !default; +$font-size-xl: var(--nutui-font-size-5, 18px) !default; +$font-size-xxl: var(--nutui-font-size-6, 20px) !default; +$font-size-xxxl: var(--nutui-font-size-8, 24px) !default; +$font-size-xxxxl: var(--nutui-font-size-10, 28px) !default; + +$font-weight: var(--nutui-font-weight, 400) !default; +$font-weight-bold: var(--nutui-font-weight-bold, 500) !default; + +$line-height-base: var(--nutui-line-height-base, 1.5) !default; + +// todo +// 与品牌色一起使用，默认为白色，不区分暗黑与明亮模式。 +$color-primary-text: var(--nutui-color-primary-text) !default; +$color-info: var(--nutui-color-info) !default; +// 链接色 todo +$color-text-link: var(--nutui-color-text-link) !default; + +$white: var(--nutui-gray-1) !default; +$black: $color-title !default; + +// todo +$disable-bg-color: $white !default; +$required-color: $color-primary !default; + // --- z-index ---- $mask-z-index: 1000; $mask-content-z-index: 1200; @@ -60,21 +75,8 @@ $mask-content-z-index: 1200; $animation-duration: 0.25s !default; $animation-timing-fun: cubic-bezier(0.55, 0.085, 0.68, 0.53) !default; -// Font -$font-title: var(--nutui-font-size-5, 18px) !default; -$font-text: var(--nutui-font-size-3, 14px) !default; -$font-help: var(--nutui-font-size-2, 12px) !default; -$font-size-0: var(--nutui-font-size-1, 10px) !default; -$font-card-title: var(--nutui-font-size-4, 16px) !default; - -$font-weight: var(--nutui-font-weight, 400) !default; -$font-weight-bold: var(--nutui-font-weight-bold, 500) !default; - -$line-height-base: var(--nutui-line-height-base, 1.5) !default; - // padding $padding-xs: var(--nutui-padding-xs, 12px) !default; - // button（✅） $button-border-radius: var(--nutui-button-border-radius, 6px) !default; $button-border-width: var(--nutui-button-border-width, 1px) !default; @@ -84,7 +86,7 @@ $button-default-bg-color: var( ) !default; $button-default-border-color: var( --nutui-button-default-border-color, - $color-help + $color-text-help ) !default; $button-default-color: var(--nutui-button-default-color, $color-text) !default; $button-plain-color: var(--nutui-button-plain-color, $color-text) !default; @@ -109,7 +111,7 @@ $button-default-line-height: var( $button-block-line-height: var(--nutui-button-block-line-height, 46px) !default; $button-default-font-size: var( --nutui-button-default-font-size, - $font-text + $font-size ) !default; $button-large-font-size: var( --nutui-button-large-font-size, @@ -117,14 +119,14 @@ $button-large-font-size: var( ) !default; $button-small-font-size: var( --nutui-button-small-font-size, - $font-help + $font-size-small ) !default; -$button-mini-font-size: var(--nutui-button-mini-font-size, $font-help) !default; -$button-mini-line-height: var(--nutui-button-mini-line-height, 1.2) !default; -$button-text-icon-margin-left: var( - --nutui-button-text-icon-margin-left, - 5px +$button-mini-font-size: var( + --nutui-button-mini-font-size, + $font-size-small ) !default; +$button-mini-line-height: var(--nutui-button-mini-line-height, 1.2) !default; +$button-text-icon-margin: var(--nutui-button-text-icon-margin, 5px) !default; $button-text-icon-large-margin-left: var( --nutui-button-text-icon-large-margin-left, 10px @@ -190,17 +192,17 @@ $button-warning-background-color: #f07800; // cell（✅） $cell-title-color: var(--nutui-cell-title-color, #262626) !default; -$cell-title-font-size: var(--nutui-cell-title-font-size, $font-text) !default; +$cell-title-font-size: var(--nutui-cell-title-font-size, $font-size) !default; $cell-description-font-size: var( --nutui-cell-description-font-size, - $font-help + $font-size-small ) !default; -$cell-description-font: var(--nutui-cell-extra-font-size, $font-text) !default; +$cell-description-font: var(--nutui-cell-extra-font-size, $font-size) !default; $cell-description-color: var( --nutui-cell-extra-color, - $color-disabled + $color-text-disable ) !default; -$cell-extra-font-size: var(--nutui-cell-extra-font-size, $font-text) !default; +$cell-extra-font-size: var(--nutui-cell-extra-font-size, $font-size) !default; $cell-extra-color: var(--nutui-cell-extra-color, $color-text) !default; $cell-subtitle-color: var(--nutui-cell-description-color, $color-text) !default; $cell-border-radius: var(--nutui-cell-border-radius, 4px) !default; @@ -218,11 +220,11 @@ $cell-default-icon-margin: var( ) !default; $cell-large-title-font: var( --nutui-cell-large-title-font, - $font-card-title + $font-size-large ) !default; $cell-large-title-description-font: var( --nutui-cell-large-title-description-font, - $font-text + $font-size ) !default; $cell-large-padding: var(--nutui-cell-large-padding, 16px 16px) !default; $cell-background-color: var( @@ -242,7 +244,7 @@ $cell-group-title-padding: var( $cell-group-title-color: var(--nutui-cell-group-title-color, #262626) !default; $cell-group-title-font-size: var( --nutui-cell-group-title-font-size, - $font-text + $font-size ) !default; $cell-group-title-line-height: var( --nutui-cell-group-title-line-height, @@ -258,7 +260,7 @@ $cell-group-description-color: var( ) !default; $cell-group-description-font-size: var( --nutui-cell-group-description-font-size, - $font-help + $font-size-small ) !default; $cell-group-description-line-height: var( --nutui-cell-group-description-line-height, @@ -273,7 +275,7 @@ $cell-group-background-color: var( $divider-margin: var(--nutui-divider-margin, 16px 0) !default; $divider-text-font-size: var( --nutui-divider-text-font-size, - $font-text + $font-size ) !default; $divider-text-color: var(--nutui-divider-text-color, #f0f0f0) !default; $divider-line-height: var(--nutui-divider-line-height, 2px) !default; @@ -317,11 +319,11 @@ $uploader-background-disabled: var( ) !default; $uploader-picture-color: var( --nutui-uploader-picture-color, - $color-help + $color-text-help ) !default; $uploader-picture-disabled: var( --nutui-uploader-picture-disabled, - $color-disabled + $color-text-disable ) !default; $uploader-picture-icon-margin-bottom: var( --nutui-uploader-picture-icon-margin-bottom, @@ -419,12 +421,12 @@ $input-border-bottom-width: var( 0px ) !default; $input-disabled-color: var(--nutui-input-disabled-color, #c8c9cc) !default; -$input-font-size: var(--nutui-input-font-size, $font-text) !default; +$input-font-size: var(--nutui-input-font-size, $font-size) !default; $input-padding: var(--nutui-input-padding, 10px 25px) !default; // textarea（✅） -$textarea-font: var(--nutui-textarea-font, $font-text) !default; +$textarea-font: var(--nutui-textarea-font, $font-size) !default; $textarea-padding: var(--nutui-textarea-padding, 10px 25px) !default; $textarea-limit-color: var(--nutui-textarea-limit-color, $color-text) !default; $textarea-text-color: var(--nutui-textarea-text-color, $color-title) !default; @@ -438,7 +440,7 @@ $textarea-text-line-height: var( ) !default; $textarea-disabled-color: var( --nutui-textarea-disabled-color, - $color-disabled + $color-text-disable ) !default; // inputnumber（✅） @@ -461,7 +463,7 @@ $inputnumber-icon-color: var( ) !default; $inputnumber-icon-void-color: var( --nutui-inputnumber-icon-void-color, - $color-disabled + $color-text-disable ) !default; $inputnumber-icon-disabled-color: var( --nutui-inputnumber-icon-disabled-color, @@ -722,11 +724,11 @@ $calendar-choose-disable-background-color: var( ) !default; $calendar-base-font-size: var( --nutui-calendar-base-font-size, - $font-card-title + $font-size-large ) !default; $calendar-title-font-size: var( --nutui-calendar-title-font-size, - $font-title + $font-size-xl ) !default; $calendar-title-font-weight: var( --nutui-calendar-title-font-weight, @@ -734,7 +736,7 @@ $calendar-title-font-weight: var( ) !default; $calendar-sub-title-font-size: var( --nutui-calendar-sub-title-font-size, - $font-text + $font-size ) !default; $calendar-header-height: var(--nutui-calendar-header-height, 24px) !default; $calendar-day-width: var(--nutui-calendar-day-width, 14.28%) !default; @@ -777,7 +779,7 @@ $notify-height: var(--nutui-notify-height, 44px) !default; $notify-line-height: var(--nutui-notify-line-height, auto) !default; $notify-base-background-color: var( --nutui-notify-base-background-color, - linear-gradient(135deg, $color-primary 0%, $color-primary-end 100%) + linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%) ) !default; $notify-primary-background-color: var( --nutui-notify-primary-background-color, @@ -807,7 +809,7 @@ $rate-item-margin: var(--nutui-rate-item-margin, 14px) !default; $rate-icon-color: var(--nutui-rate-icon-color, $color-primary) !default; $rate-icon-inactive-color: var( --nutui-rate-icon-inactive-color, - $color-disabled + $color-text-disable ) !default; // tabbar（✅） @@ -825,11 +827,11 @@ $tabbar-border-bottom: var( $tabbar-box-shadow: var(--nutui-tabbar-box-shadow, none) !default; $tabbar-text-font-size: var( --nutui-tabbar-text-font-size, - $font-size-0 + $font-size-xs ) !default; $tabbar-text-large-font-size: var( --nutui-tabbar-text-large-font-size, - $font-card-title + $font-size-large ) !default; $tabbar-text-line-height: var(--nutui-tabbar-text-line-height, 20px) !default; $tabbar-height: var(--nutui-tabbar-height, 50px) !default; @@ -872,7 +874,7 @@ $swiper-indicator-item-background-color: var( $address-tab-line-background: linear-gradient( 90deg, $color-primary 0%, - $color-primary-end 100% + $color-primary-stop-2 100% ) !default; //steps（✅） @@ -1068,7 +1070,7 @@ $checkbox-label-font-size: var(--nutui-checkbox-label-font-size, 14px) !default; $checkbox-icon-font-size: var(--nutui-checkbox-icon-font-size, 18px) !default; $checkbox-icon-disable-color2: var( --nutui-checkbox-icon-disable-color2, - $color-help + $color-text-help ) !default; //radio（✅） @@ -1098,7 +1100,7 @@ $radio-button-active-background: var( ) !default; $radio-button-disabled-active-background: var( --nutui-radio-button-disabled-active-background, - $color-disabled + $color-text-disable ) !default; $radio-button-disabled-active-color: var( --nutui-radio-button-disabled-active-color, @@ -1106,7 +1108,7 @@ $radio-button-disabled-active-color: var( ) !default; $radio-button-disabled-active-border-color: var( --nutui-radio-button-disabled-active-border-color, - $color-disabled + $color-text-disable ) !default; $radiogroup-radio-margin: var( --nutui-radiogroup-radio-margin, @@ -1120,7 +1122,7 @@ $radiogroup-radio-label-margin: var( // signature（✅） $signature-border-color: var( --nutui-signature-border-color, - $color-divider + $color-border ) !default; $signature-border-width: var(--nutui-signature-border-width, 1px) !default; $signature-height: var(--nutui-signature-height, 10rem) !default; @@ -1128,7 +1130,7 @@ $signature-background-color: var( --nutui-signature-background-color, $white ) !default; -$signature-font-size: var(--nutui-signature-font-size, $font-text) !default; +$signature-font-size: var(--nutui-signature-font-size, $font-size) !default; //fixednav（✅） $fixednav-bg-color: var(--nutui-fixednav-bg-color, #fff) !default; @@ -1136,8 +1138,8 @@ $fixednav-color: var(--nutui-fixednav-color, #000) !default; $fixednav-index: var(--nutui-fixednav-index, 201) !default; $fixednav-btn-bg: linear-gradient( 135deg, - $color-primary-start 0%, - $color-primary-end 100% + $color-primary-stop-1 0%, + $color-primary-stop-2 100% ) !default; $fixednav-item-active-color: var( --nutui-fixednav-item-active-color, @@ -1184,11 +1186,11 @@ $timeselect-title-color: var( ) !default; $timeselect-title-font-size: var( --nutui-timeselect-title-font-size, - $font-text + $font-size ) !default; $timeselect-title-background: var( --nutui-timeselect-title-background, - $color-card-background + $color-background-overlay ) !default; $timeselect-date-width: var(--nutui-timeselect-date-width, 140px) !default; @@ -1207,7 +1209,7 @@ $timeselect-date-active-color: var( ) !default; $timeselect-date-font-size: var( --nutui-timeselect-date-font-size, - $font-text + $font-size ) !default; $timeselect-time-width: var(--nutui-timeselect-time-width, 100px) !default; @@ -1235,7 +1237,7 @@ $timeselect-time-background: var( ) !default; $timeselect-time-active-background: var( --nutui-timeselect-time-active-background, - $color-card-background-wrapper + $color-background-sunken ) !default; //tag（✅） @@ -1277,10 +1279,10 @@ $tag-warning-background-color: var( //badge（✅） $badge-background-color: var( --nutui-badge-background-color, - linear-gradient(135deg, $color-primary 0%, $color-primary-end 100%) + linear-gradient(135deg, $color-primary 0%, $color-primary-stop-2 100%) ) !default; $badge-color: var(--nutui-badge-color, #fff) !default; -$badge-font-size: var(--nutui-badge-font-size, $font-help) !default; +$badge-font-size: var(--nutui-badge-font-size, $font-size-small) !default; $badge-default-background-color: var( --nutui-badge-default-background-color, rgba(255, 255, 255, 1) @@ -1304,7 +1306,7 @@ $badge-dot-padding: var(--nutui-badge-dot-padding, 0px) !default; //popover（✅） $popover-border-radius: var(--nutui-popover-border-radius, 8px) !default; -$popover-font-size: var(--nutui-popover-font-size, $font-text) !default; +$popover-font-size: var(--nutui-popover-font-size, $font-size) !default; $popover-border-color: var(--nutui-popover-border-color, $white) !default; $popover-content-background-color: var( --nutui-popover-content-background-color, @@ -1316,11 +1318,11 @@ $popover-primary-text-color: var( ) !default; $popover-disable-color: var( --nutui-popover-disable-color, - $color-disabled + $color-text-disable ) !default; $popover-divider-color: var( --nutui-popover-divider-color, - $color-divider + $color-border ) !default; $popover-menu-item-padding: var( --nutui-popover-menu-item-padding, @@ -1357,7 +1359,7 @@ $progress-text-border-radius: var( //pagination（✅） $pagination-color: var(--nutui-pagination-color, $color-primary) !default; -$pagination-font-size: var(--nutui-pagination-font-size, $font-text) !default; +$pagination-font-size: var(--nutui-pagination-font-size, $font-size) !default; $pagination-item-border-color: var( --nutui-pagination-item-border-color, #e4e7eb @@ -1365,11 +1367,11 @@ $pagination-item-border-color: var( $pagination-active-background-color: linear-gradient( 135deg, $color-primary 0%, - $color-primary-end 100% + $color-primary-stop-2 100% ) !default; $pagination-disable-color: var( --nutui-pagination-disable-color, - $color-disabled + $color-text-disable ) !default; $pagination-disable-background-color: var( --nutui-pagination-disable-background-color, @@ -1401,7 +1403,7 @@ $tabs-titles-border-radius: var(--nutui-tabs-titles-border-radius, 0) !default; $nut-tabs-title-gap: var(--nutui-tabs-title-gap, 0) !default; $tabs-titles-item-font-size: var( --nutui-tabs-titles-item-font-size, - $font-text + $font-size ) !default; $tabs-titles-item-color: var( @@ -1442,7 +1444,7 @@ $tabs-horizontal-titles-item-min-width: var( ) !default; $tabs-horizontal-titles-item-active-background-color: var( --nutui-tabs-horizontal-titles-item-active-background-color, - $color-card-background + $color-background-overlay ) !default; $tabs-horizontal-titles-item-active-line-width: var( --nutui-tabs-horizontal-titles-item-active-line-width, @@ -1477,7 +1479,7 @@ $tabs-vertical-titles-width: var( $indicator-color: var(--nutui-indicator-color, $color-primary) !default; $indicator-dot-color: var( --nutui-indicator-dot-color, - $color-disabled + $color-text-disable ) !default; $indicator-dot-size: var(--nutui-indicator-dot-size, 5px) !default; $indicator-dot-active-size: var( @@ -1494,7 +1496,7 @@ $indicator-dot-vertical-margin: var( // menu（✅） $menu-bar-line-height: var(--nutui-menu-bar-line-height, 48px) !default; $menu-placeholder-top: var(--nutui-menu-placeholder-top, -48px) !default; -$menu-item-font-size: var(--nutui-menu-item-font-size, $font-text) !default; +$menu-item-font-size: var(--nutui-menu-item-font-size, $font-size) !default; $menu-item-text-color: var(--nutui-menu-item-text-color, $color-title) !default; $menu-item-active-text-color: var( --nutui-menu-item-active-text-color, @@ -1567,7 +1569,7 @@ $collapse-item-disabled-color: var( ) !default; $collapse-item-font-size: var( --nutui-collapse-item-font-size, - $font-text + $font-size ) !default; $collapse-item-line-height: var( --nutui-collapse-item-line-height, @@ -1587,7 +1589,7 @@ $collapse-wrapper-content-color: var( ) !default; $collapse-wrapper-content-font-size: var( --nutui-collapse-wrapper-content-font-size, - $font-text + $font-size ) !default; $collapse-wrapper-content-line-height: var( --nutui-collapse-wrapper-content-line-height, @@ -1673,7 +1675,7 @@ $empty-description-padding: var( 0 40px ) !default; // cascader（✅） -$cascader-font-size: var(--nutui-cascader-font-size, $font-text) !default; +$cascader-font-size: var(--nutui-cascader-font-size, $font-size) !default; $cascader-line-height: var(--nutui-cascader-line-height, 22px) !default; $cascader-title-padding: var( --nutui-cascader-title-padding, @@ -1700,7 +1702,7 @@ $cascader-bar-padding: var( ) !default; $cascader-bar-font-size: var( --nutui-cascader-bar-font-size, - $font-title + $font-size-xl ) !default; $cascader-bar-line-height: var(--nutui-cascader-bar-line-height, 20px) !default; $cascader-bar-color: var(--nutui-cascader-bar-color, $color-title) !default; @@ -1714,7 +1716,7 @@ $cascader-item-border-bottom: var( $cascader-item-color: var(--nutui-cascader-item-color, $color-title) !default; $cascader-item-font-size: var( --nutui-cascader-item-font-size, - $font-text + $font-size ) !default; $cascader-item-active-color: var( --nutui-cascader-item-active-color, @@ -1787,7 +1789,7 @@ $sku-item-disable-line: var( $sku-opetate-bg-default: linear-gradient( 90deg, $color-primary, - $color-primary-end 100% + $color-primary-stop-2 100% ) !default; $sku-item-active-bg: var( --nutui-sku-item-active-bg, @@ -1852,7 +1854,7 @@ $sku-product-img-border-radius: var( // card（✅） $card-left-border-radius: var(--nutui-card-left-border-radius, 2px) !default; -$color-card-background: var( +$color-background-overlay: var( --nutui-card-background-color, $color-background ) !default; @@ -1872,7 +1874,7 @@ $grid-item-text-color: var(--nutui-grid-item-text-color, $color-title) !default; $grid-item-icon-color: var(--nutui-grid-item-icon-color, $color-title) !default; $grid-item-text-font-size: var( --nutui-grid-item-text-font-size, - $font-help + $font-size-small ) !default; // table（✅） @@ -1895,10 +1897,10 @@ $navbar-box-shadow: var( 0px 1px 7px 0px rgba(237, 238, 241, 1) ) !default; $navbar-color: var(--nutui-navbar-color, $color-title) !default; -$navbar-font-size: var(--nutui-navbar-font-size, $font-text) !default; +$navbar-font-size: var(--nutui-navbar-font-size, $font-size) !default; $navbar-title-font-size: var( --nutui-navbar-title-font-size, - $font-text + $font-size ) !default; $navbar-title-font-weight: var(--nutui-navbar-title-font-weight, 0) !default; $navbar-title-font-color: var( @@ -1932,7 +1934,7 @@ $sidenavbar-sub-title-padding: var( ) !default; $sidenavbar-sub-title-background: var( --nutui-sidenavbar-sub-title-background, - $color-card-background-wrapper + $color-background-sunken ) !default; $sidenavbar-sub-title-color: var( --nutui-sidenavbar-sub-title-color, @@ -2200,7 +2202,7 @@ $circleprogress-text-color: var( ) !default; $circleprogress-text-size: var( --nutui-circleprogress-text-size, - $font-card-title + $font-size-large ) !default; // Comment（✅ todo：react版本该组件暂无，将变量先迁过来） diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 1c1988ebf8..9676f6eef2 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,59 +1,72 @@ // ---------------------------------------------------- // 主色调 $color-primary: var(--nutui-color-primary) !default; -$color-primary-start: var(--nutui-color-primary-start) !default; -$color-primary-end: var(--nutui-color-primary-end) !default; +$color-primary-stop-1: var(--nutui-color-primary-stop-1) !default; +$color-primary-stop-2: var(--nutui-color-primary-stop-2) !default; $color-primary-press: var(--nutui-color-primary-press) !default; -$color-primary-disabled: var(--nutui-color-primary-disabled) !default; -$color-primary-text: var(--nutui-color-primary-text) !default; +$color-primary-disable: var(--nutui-color-primary-disable) !default; $color-primary-light: var(--nutui-color-primary-light) !default; -$color-primary-light-text: var(--nutui-color-primarylight-text) !default; $color-primary-light-press: var(--nutui-color-primary-light-press) !default; -$color-primary-light-press-text: var( - --nutui-color-primary-light-press-text -) !default; -$color-primary-link: var(--nutui-color-primary-link) !default; -$color-info: var(--nutui-color-info) !default; +// 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。 +$color-background: var(--nutui-gray-3) !default; +// 卡片背景色 +$color-background-overlay: var(--nutui-gray-1) !default; +// 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。 +$color-background-sunken: var(--nutui-gray-2) !default; // 标题重要字 // 主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。 -$color-title: var(--nutui-gray-6) !default; +$color-title: var(--nutui-gray-7) !default; // 常规: 次要文字色，用于次级标题、属性标示、非主要信息引导等。 -$color-text: var(--nutui-gray-5) !default; +$color-text: var(--nutui-gray-6) !default; // 辅助色，暂无用到。todo -$color-help: var(--nutui-gray-4) !default; +$color-text-help: var(--nutui-gray-5) !default; // 特殊禁用色 -$color-disabled: var(--nutui-color-disabled) !default; +$color-text-disable: var(--nutui-color-text-disable) !default; -$white: var(--nutui-gray-0) !default; -$black: $color-title !default; - -$disable-bg-color: $white !default; -$required-color: $color-primary !default; - -// 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。 -$color-background: var(--nutui-gray-2) !default; -// 卡片背景色 -$color-card-background: var(--nutui-gray-0) !default; -// 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。 -$color-card-background-wrapper: var(--nutui-gray-1) !default; -// 背景禁用色 -$color-background-disabled: var(--nutui-color-disabled) !default; - -// ---------------------------------------------------- // 蒙层颜色 // 页面全局蒙层 -$color-mask: var(--nutui-black-9) !default; +$color-mask: var(--nutui-black-10) !default; // 容错蒙层 -$color-part-mask: var(--nutui-black-1) !default; +$color-mask-part: var(--nutui-black-2) !default; // 分割信息的颜色 -$color-divider: var(--nutui-black-2) !default; +$color-border: var(--nutui-black-3) !default; +$color-border-disable: var(--nutui-gray-4) !default; // ---- Font Family ---- $font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif !default; +// Font +$font-size-xs: var(--nutui-font-size-1, 10px) !default; +$font-size-small: var(--nutui-font-size-2, 12px) !default; +$font-size: var(--nutui-font-size-3, 14px) !default; +$font-size-large: var(--nutui-font-size-4, 16px) !default; +$font-size-xl: var(--nutui-font-size-5, 18px) !default; +$font-size-xxl: var(--nutui-font-size-6, 20px) !default; +$font-size-xxxl: var(--nutui-font-size-8, 24px) !default; +$font-size-xxxxl: var(--nutui-font-size-10, 28px) !default; + +$font-weight: var(--nutui-font-weight, 400) !default; +$font-weight-bold: var(--nutui-font-weight-bold, 500) !default; + +$line-height-base: var(--nutui-line-height-base, 1.5) !default; + +// todo +// 与品牌色一起使用，默认为白色，不区分暗黑与明亮模式。 +$color-primary-text: var(--nutui-color-primary-text) !default; +$color-info: var(--nutui-color-info) !default; +// 链接色 todo +$color-text-link: var(--nutui-color-text-link) !default; + +$white: var(--nutui-gray-1) !default; +$black: $color-title !default; + +// todo +$disable-bg-color: $white !default; +$required-color: $color-primary !default; + // --- z-index ---- $mask-z-index: 1000; $mask-content-z-index: 1200; @@ -62,18 +75,6 @@ $mask-content-z-index: 1200; $animation-duration: 0.25s !default; $animation-timing-fun: cubic-bezier(0.55, 0.085, 0.68, 0.53) !default; -// Font -$font-title: var(--nutui-font-size-5, 18px) !default; -$font-text: var(--nutui-font-size-3, 14px) !default; -$font-help: var(--nutui-font-size-2, 12px) !default; -$font-size-0: var(--nutui-font-size-1, 10px) !default; -$font-card-title: var(--nutui-font-size-4, 16px) !default; - -$font-weight: var(--nutui-font-weight, 400) !default; -$font-weight-bold: var(--nutui-font-weight-bold, 500) !default; - -$line-height-base: var(--nutui-line-height-base, 1.5) !default; - // padding $padding-xs: var(--nutui-padding-xs, 12px) !default; @@ -81,30 +82,56 @@ $padding-xs: var(--nutui-padding-xs, 12px) !default; $button-border-radius: var(--nutui-button-border-radius, 24px) !default; $button-border-width: var(--nutui-button-border-width, 1px) !default; +$button-normal-padding: var(--nutui-button-normal-padding, 0px 20px) !default; + $button-default-height: var(--nutui-button-default-height, 40px) !default; -$button-default-line-height: var( - --nutui-button-default-line-height, - 38px -) !default; -$button-default-bg-color: var( - --nutui-button-default-bg-color, +$button-default-color: var(--nutui-button-default-color, $color-title) !default; +$button-default-background-color: var( + --nutui-button-default-background-color, transparent ) !default; $button-default-border-color: var( --nutui-button-default-border-color, - $color-help + $color-text-help ) !default; -$button-default-color: var(--nutui-button-default-color, $color-title) !default; -$button-default-padding: var(--nutui-button-default-padding, 0 20px) !default; +$button-default-padding: var(--nutui-button-default-padding, 0px 19px) !default; $button-default-font-size: var( --nutui-button-default-font-size, - $font-text + $font-size ) !default; $button-default-font-weight: var( --nutui-button-default-font-weight, $font-weight-bold ) !default; +$button-large-height: var(--nutui-button-large-height, 48px) !default; +$button-large-font-size: var( + --nutui-button-large-font-size, + $font-size-xl +) !default; + +$button-small-font-size: var( + --nutui-button-small-font-size, + $font-size +) !default; +$button-small-padding: var(--nutui-button-small-padding, 0px 16px) !default; +$button-small-height: var(--nutui-button-small-height, 32px) !default; +$button-small-font-weight: var( + --nutui-button-small-font-weight, + $font-weight +) !default; + +$button-mini-padding: var(--nutui-button-mini-padding, 5px 12px) !default; +$button-mini-height: var(--nutui-button-mini-height, 24px) !default; +$button-mini-font-size: var( + --nutui-button-mini-font-size, + $font-size-small +) !default; +$button-mini-font-weight: var( + --nutui-button-mini-font-weight, + $font-weight +) !default; + $button-primary-color: var( --nutui-button-primary-color, $color-primary-text @@ -115,8 +142,8 @@ $button-primary-border-color: var( ) !default; $button-primary-background-color: linear-gradient( 135deg, - $color-primary-start 0%, - $color-primary-end 100% + $color-primary-stop-1 0%, + $color-primary-stop-2 100% ) !default; $button-info-color: var( @@ -133,47 +160,6 @@ $button-info-background-color: linear-gradient( rgba(73, 101, 242, 1) 100% ) !default; -$button-small-font-size: var( - --nutui-button-small-font-size, - $font-help -) !default; -$button-small-padding: var(--nutui-button-small-padding, 0 12px) !default; -$button-small-height: var(--nutui-button-small-height, 28px) !default; -$button-small-line-height: var(--nutui-button-small-line-height, 26px) !default; - -$button-mini-padding: var(--nutui-button-mini-padding, 0 12px) !default; -$button-mini-height: var(--nutui-button-mini-height, 24px) !default; -$button-mini-font-size: var(--nutui-button-mini-font-size, $font-help) !default; -$button-mini-line-height: var(--nutui-button-mini-line-height, 1.2) !default; - -$button-large-height: var(--nutui-button-large-height, 48px) !default; -$button-large-line-height: var(--nutui-button-large-line-height, 46px) !default; -$button-large-font-size: var( - --nutui-button-large-font-size, - $button-default-font-size -) !default; - -$button-block-height: var(--nutui-button-block-height, 48px) !default; -$button-block-line-height: var(--nutui-button-block-line-height, 46px) !default; - -$button-text-icon-margin-left: var( - --nutui-button-text-icon-margin-left, - 5px -) !default; -$button-text-icon-large-margin-left: var( - --nutui-button-text-icon-large-margin-left, - 10px -) !default; -$button-text-icon-small-margin-left: var( - --nutui-button-text-icon-small-margin-left, - 2px -) !default; -$button-text-icon-mini-margin-left: var( - --nutui-button-text-icon-mini-margin-left, - 1px -) !default; -$button-disabled-opacity: var(--nutui-button-disabled-opacity, 0.68) !default; - $button-success-color: var( --nutui-button-success-color, $color-primary-text @@ -189,6 +175,7 @@ $button-success-background-color: linear-gradient( rgba(40, 207, 63, 1) 83%, rgba(41, 212, 70, 1) 100% ) !default; + $button-danger-color: var( --nutui-button-danger-color, $color-primary-text @@ -201,6 +188,7 @@ $button-danger-background-color: var( --nutui-button-danger-background-color, rgba(250, 44, 25, 1) ) !default; + $button-warning-color: var( --nutui-button-warning-color, $color-primary-text @@ -217,18 +205,21 @@ $button-warning-background-color: linear-gradient( rgba(255, 190, 13, 1) 100% ) !default; +$button-text-icon-margin: var(--nutui-button-text-icon-margin, 4px) !default; +$button-disabled-opacity: var(--nutui-button-disabled-opacity, 0.68) !default; + // cell（✅） $cell-title-color: var(--nutui-cell-title-color, $color-title) !default; -$cell-title-font-size: var(--nutui-cell-title-font-size, $font-text) !default; +$cell-title-font-size: var(--nutui-cell-title-font-size, $font-size) !default; $cell-description-font-size: var( --nutui-cell-description-font-size, - $font-help + $font-size-small ) !default; $cell-description-color: var( --nutui-cell-description-color, $color-text ) !default; -$cell-extra-font-size: var(--nutui-cell-extra-font-size, $font-text) !default; +$cell-extra-font-size: var(--nutui-cell-extra-font-size, $font-size) !default; $cell-extra-color: var(--nutui-cell-extra-color, $color-text) !default; $cell-border-radius: var(--nutui-cell-border-radius, 6px) !default; $cell-padding: var(--nutui-cell-padding, 13px 16px) !default; @@ -237,11 +228,11 @@ $cell-divider-right: var(--nutui-cell-divider-right, 16px) !default; $cell-divider-left: var(--nutui-cell-divider-left, 16px) !default; $cell-divider-border-bottom: var( --nutui-cell-divider-border-bottom, - 2px solid $color-divider + 2px solid $color-border ) !default; $cell-background-color: var( --nutui-cell-background-color, - $color-card-background + $color-background-overlay ) !default; $cell-box-shadow: var( --nutui-cell-box-shadow, @@ -256,7 +247,7 @@ $cell-group-title-padding: var( $cell-group-title-color: var(--nutui-cell-group-title-color, #909ca4) !default; $cell-group-title-font-size: var( --nutui-cell-group-title-font-size, - $font-text + $font-size ) !default; $cell-group-title-line-height: var( --nutui-cell-group-title-line-height, @@ -272,7 +263,7 @@ $cell-group-description-color: var( ) !default; $cell-group-description-font-size: var( --nutui-cell-group-description-font-size, - $font-help + $font-size-small ) !default; $cell-group-description-line-height: var( --nutui-cell-group-description-line-height, @@ -287,7 +278,7 @@ $cell-group-background-color: var( $divider-margin: var(--nutui-divider-margin, 16px 0) !default; $divider-text-font-size: var( --nutui-divider-text-font-size, - $font-text + $font-size ) !default; $divider-text-color: var(--nutui-divider-text-color, $color-text) !default; $divider-line-height: var(--nutui-divider-line-height, 2px) !default; @@ -331,11 +322,11 @@ $uploader-background-disabled: var( ) !default; $uploader-picture-color: var( --nutui-uploader-picture-color, - $color-help + $color-text-help ) !default; $uploader-picture-disabled: var( --nutui-uploader-picture-disabled, - $color-disabled + $color-text-disable ) !default; $uploader-picture-icon-margin-bottom: var( --nutui-uploader-picture-icon-margin-bottom, @@ -421,7 +412,7 @@ $picker-item-text-font-size: var( ) !default; $picker-item-active-line-border: var( --nutui-picker-item-active-line-border, - 1px solid $color-divider + 1px solid $color-border ) !default; $picker-mask-bg-img: var( --picker-mask-bg-img, @@ -430,21 +421,21 @@ $picker-mask-bg-img: var( ) !default; //input（✅） -$input-border-bottom: var(--nutui-input-border-bottom, $color-divider) !default; +$input-border-bottom: var(--nutui-input-border-bottom, $color-border) !default; $input-border-bottom-width: var( --nutui-input-border-bottom-width, 0px ) !default; $input-disabled-color: var( --nutui-input-disabled-color, - $color-disabled + $color-text-disable ) !default; -$input-font-size: var(--nutui-input-font-size, $font-text) !default; +$input-font-size: var(--nutui-input-font-size, $font-size) !default; $input-padding: var(--nutui-input-padding, 10px 25px) !default; // textarea（✅） -$textarea-font: var(--nutui-textarea-font, $font-text) !default; +$textarea-font: var(--nutui-textarea-font, $font-size) !default; $textarea-padding: var(--nutui-textarea-padding, 10px 25px) !default; $textarea-limit-color: var(--nutui-textarea-limit-color, $color-text) !default; $textarea-text-color: var(--nutui-textarea-text-color, $color-title) !default; @@ -458,7 +449,7 @@ $textarea-text-line-height: var( ) !default; $textarea-disabled-color: var( --nutui-textarea-disabled-color, - $color-disabled + $color-text-disable ) !default; // inputnumber（✅） @@ -481,11 +472,11 @@ $inputnumber-icon-color: var( ) !default; $inputnumber-icon-void-color: var( --nutui-inputnumber-icon-void-color, - $color-disabled + $color-text-disable ) !default; $inputnumber-icon-disabled-color: var( --nutui-inputnumber-icon-disabled-color, - $color-disabled + $color-text-disable ) !default; $inputnumber-icon-size: var(--nutui-inputnumber-icon-size, 20px) !default; $inputnumber-input-font-size: var( @@ -524,7 +515,7 @@ $inputnumber-display: var(--nutui-inputnumber-display, flex) !default; // actionsheet（✅） $actionsheet-border-color: var( --nutui-actionsheet-border-color, - $color-divider + $color-border ) !default; $actionsheet-item-text-align: var( --nutui-actionsheet-item-text-align, @@ -557,7 +548,10 @@ $shortpassword-border-color: var( $color-background ) !default; $shortpassword-error: var(--nutui-shortpassword-error, $color-primary) !default; -$shortpassword-forget: var(--nutui-shortpassword-forget, $color-help) !default; +$shortpassword-forget: var( + --nutui-shortpassword-forget, + $color-text-help +) !default; //numberkeyboard（✅） $numberkeyboard-width: var(--nutui-numberkeyboard-width, 100%) !default; @@ -657,7 +651,7 @@ $price-integer-big-size: var(--nutui-price-integer-big-size, 24px) !default; $price-decimal-big-size: var(--nutui-price-decimal-big-size, 18px) !default; //normal price（✅） -$price-line-color: var(--nutui-price-line-color, $color-divider) !default; +$price-line-color: var(--nutui-price-line-color, $color-border) !default; $price-line-font-size: var(--nutui-price-line-font-size, 12px) !default; $price-symbol-medium-size: var(--nutui-price-symbol-medium-size, 14px) !default; $price-integer-medium-size: var( @@ -724,6 +718,39 @@ $toast-inner-border-radius: var( $toast-inner-top: var(--nutui-toast-inner-top, 50%) !default; $toast-inner-text-align: var(--nutui-toast-inner-text-align, 'center') !default; +//tour（✅） +$tour-mask-border-radius: var(--nutui-tour-mask-border-radius, 10px) !default; +$tour-content-min-width: var(--nutui-tour-content-min-width, 200px) !default; +$tour-content-padding: var(--nutui-tour-content-padding, 10px 12px) !default; +$tour-content-inner-margin: var( + --nutui-tour-content-inner-margin, + 10px 0px +) !default; +$tour-content-inner-font-size: var( + --nutui-tour-content-inner-font-size, + 14px +) !default; +$tour-content-bottom-margin-top: var( + --nutui-tour-content-bottom-margin-top, + 10px +) !default; +$tour-content-bottom-btn-margin-left: var( + --nutui-tour-content-bottom-btn-margin-left, + 4px +) !default; +$tour-content-bottom-btn-padding: var( + --nutui-tour-content-bottom-btn-padding, + 2px 4px +) !default; +$tour-content-bottom-btn-font-size: var( + --nutui-tour-content-bottom-btn-font-size, + 12px +) !default; +$tour-content-bottom-btn-border-radius: var( + --nutui-tour-content-bottom-btn-border-radius, + 4px +) !default; + //backtop（✅） $backtop-border-color: var(--nutui-backtop-border-color, #e0e0e0) !default; @@ -738,11 +765,11 @@ $calendar-choose-disable-background-color: var( ) !default; $calendar-base-font-size: var( --nutui-calendar-base-font-size, - $font-card-title + $font-size-large ) !default; $calendar-title-font-size: var( --nutui-calendar-title-font-size, - $font-title + $font-size-xl ) !default; $calendar-title-font-weight: var( --nutui-calendar-title-font-weight, @@ -750,7 +777,7 @@ $calendar-title-font-weight: var( ) !default; $calendar-sub-title-font-size: var( --nutui-calendar-sub-title-font-size, - $font-text + $font-size ) !default; $calendar-header-height: var(--nutui-calendar-header-height, 24px) !default; $calendar-day-width: var(--nutui-calendar-day-width, 14.28%) !default; @@ -765,7 +792,7 @@ $calendar-day-active-border-radius: var( $overlay-bg-color: var(--nutui-overlay-bg-color, $color-mask) !default; $overlay-content-bg-color: var( --nutui-overlay-content-bg-color, - $color-card-background + $color-background-overlay ) !default; $overlay-content-color: var( --nutui-overlay-content-color, @@ -793,7 +820,7 @@ $notify-height: var(--nutui-notify-height, 44px) !default; $notify-line-height: var(--nutui-notify-line-height, auto) !default; $notify-base-background-color: var( --nutui-notify-base-background-color, - linear-gradient(135deg, $color-primary-start 0%, $color-primary-end 100%) + linear-gradient(135deg, $color-primary-stop-1 0%, $color-primary-stop-2 100%) ) !default; $notify-primary-background-color: var( --nutui-notify-primary-background-color, @@ -823,7 +850,7 @@ $rate-item-margin: var(--nutui-rate-item-margin, 14px) !default; $rate-icon-color: var(--nutui-rate-icon-color, $color-primary) !default; $rate-icon-inactive-color: var( --nutui-rate-icon-inactive-color, - $color-disabled + $color-text-disable ) !default; // tabbar（✅） @@ -841,11 +868,11 @@ $tabbar-border-bottom: var( $tabbar-box-shadow: var(--nutui-tabbar-box-shadow, none) !default; $tabbar-text-font-size: var( --nutui-tabbar-text-font-size, - $font-size-0 + $font-size-xs ) !default; $tabbar-text-large-font-size: var( --nutui-tabbar-text-large-font-size, - $font-card-title + $font-size-large ) !default; $tabbar-text-line-height: var(--nutui-tabbar-text-line-height, 20px) !default; $tabbar-height: var(--nutui-tabbar-height, 50px) !default; @@ -854,7 +881,7 @@ $tabbar-text-margin-top: var(--nutui-tabbar-text-margin-top, 3px) !default; //infiniteloading（✅） $infiniteloading-bottom-color: var( --nutui-infiniteloading-bottom-color, - $color-help + $color-text-help ) !default; //range（✅） @@ -887,8 +914,8 @@ $swiper-indicator-item-background-color: var( //address $address-tab-line-background: linear-gradient( 90deg, - $color-primary-start 0%, - $color-primary-end 100% + $color-primary-stop-1 0%, + $color-primary-stop-2 100% ) !default; //steps（✅） @@ -910,7 +937,7 @@ $steps-base-line-width: var(--nutui-steps-base-line-width, 100%) !default; $steps-base-line-height: var(--nutui-steps-base-line-height, 1px) !default; $steps-base-line-background: var( --nutui-steps-base-line-background, - $color-help + $color-text-help ) !default; $steps-base-title-font-size: var( --nutui-steps-base-title-font-size, @@ -934,7 +961,7 @@ $steps-base-content-color: var( ) !default; $steps-wait-icon-bg-color: var( --nutui-steps-wait-icon-bg-color, - $color-help + $color-text-help ) !default; $steps-wait-icon-color: var(--nutui-steps-wait-icon-color, $white) !default; $steps-wait-title-color: var( @@ -1075,7 +1102,7 @@ $checkbox-label-font-size: var(--nutui-checkbox-label-font-size, 14px) !default; $checkbox-icon-font-size: var(--nutui-checkbox-icon-font-size, 18px) !default; $checkbox-icon-disable-color2: var( --nutui-checkbox-icon-disable-color2, - $color-help + $color-text-help ) !default; //radio（✅） @@ -1106,7 +1133,7 @@ $radio-button-active-background: var( ) !default; $radio-button-disabled-active-background: var( --nutui-radio-button-disabled-active-background, - $color-disabled + $color-text-disable ) !default; $radio-button-disabled-active-color: var( --nutui-radio-button-disabled-active-color, @@ -1114,7 +1141,7 @@ $radio-button-disabled-active-color: var( ) !default; $radio-button-disabled-active-border-color: var( --nutui-radio-button-disabled-active-border-color, - $color-disabled + $color-text-disable ) !default; $radiogroup-radio-margin: var( --nutui-radiogroup-radio-margin, @@ -1128,7 +1155,7 @@ $radiogroup-radio-label-margin: var( // signature（✅） $signature-border-color: var( --nutui-signature-border-color, - $color-divider + $color-border ) !default; $signature-border-width: var(--nutui-signature-border-width, 1px) !default; $signature-height: var(--nutui-signature-height, 10rem) !default; @@ -1136,7 +1163,7 @@ $signature-background-color: var( --nutui-signature-background-color, $white ) !default; -$signature-font-size: var(--nutui-signature-font-size, $font-text) !default; +$signature-font-size: var(--nutui-signature-font-size, $font-size) !default; //fixednav（✅） $fixednav-bg-color: var(--nutui-fixednav-bg-color, #fff) !default; @@ -1144,8 +1171,8 @@ $fixednav-color: var(--nutui-fixednav-color, #000) !default; $fixednav-index: var(--nutui-fixednav-index, 201) !default; $fixednav-btn-bg: linear-gradient( 135deg, - $color-primary-start 0%, - $color-primary-end 100% + $color-primary-stop-1 0%, + $color-primary-stop-2 100% ) !default; $fixednav-item-active-color: var( --nutui-fixednav-item-active-color, @@ -1192,11 +1219,11 @@ $timeselect-title-color: var( ) !default; $timeselect-title-font-size: var( --nutui-timeselect-title-font-size, - $font-text + $font-size ) !default; $timeselect-title-background: var( --nutui-timeselect-title-background, - $color-card-background + $color-background-overlay ) !default; $timeselect-date-width: var(--nutui-timeselect-date-width, 140px) !default; @@ -1215,7 +1242,7 @@ $timeselect-date-active-color: var( ) !default; $timeselect-date-font-size: var( --nutui-timeselect-date-font-size, - $font-text + $font-size ) !default; $timeselect-time-width: var(--nutui-timeselect-time-width, 100px) !default; @@ -1243,7 +1270,7 @@ $timeselect-time-background: var( ) !default; $timeselect-time-active-background: var( --nutui-timeselect-time-active-background, - $color-card-background-wrapper + $color-background-sunken ) !default; //tag（✅） @@ -1285,10 +1312,10 @@ $tag-warning-background-color: var( //badge（✅） $badge-background-color: var( --nutui-badge-background-color, - linear-gradient(135deg, $color-primary-start 0%, $color-primary-end 100%) + linear-gradient(135deg, $color-primary-stop-1 0%, $color-primary-stop-2 100%) ) !default; $badge-color: var(--nutui-badge-color, #fff) !default; -$badge-font-size: var(--nutui-badge-font-size, $font-help) !default; +$badge-font-size: var(--nutui-badge-font-size, $font-size-small) !default; $badge-border: var( --nutui-badge-border, 0px solid $color-primary-text @@ -1305,7 +1332,7 @@ $badge-dot-width: var(--nutui-badge-dot-width, 7px) !default; //popover（✅） $popover-border-radius: var(--nutui-popover-border-radius, 8px) !default; -$popover-font-size: var(--nutui-popover-font-size, $font-text) !default; +$popover-font-size: var(--nutui-popover-font-size, $font-size) !default; $popover-border-color: var(--nutui-popover-border-color, $white) !default; $popover-content-background-color: var( --nutui-popover-content-background-color, @@ -1317,11 +1344,11 @@ $popover-primary-text-color: var( ) !default; $popover-disable-color: var( --nutui-popover-disable-color, - $color-disabled + $color-text-disable ) !default; $popover-divider-color: var( --nutui-popover-divider-color, - $color-divider + $color-border ) !default; $popover-menu-item-padding: var( --nutui-popover-menu-item-padding, @@ -1332,7 +1359,7 @@ $popover-menu-item-padding: var( $progress-height: var(--nutui-progress-height, 10px) !default; $progress-color: var( --nutui-progress-color, - linear-gradient(135deg, $color-primary-start 0%, $color-primary-end 100%) + linear-gradient(135deg, $color-primary-stop-1 0%, $color-primary-stop-2 100%) ) !default; $progress-background: var(--nutui-progress-background, #f3f3f3) !default; $progress-border-radius: var(--nutui-progress-border-radius, 12px) !default; @@ -1361,19 +1388,19 @@ $progress-text-border-radius: var( //pagination（✅） $pagination-color: var(--nutui-pagination-color, $color-primary) !default; -$pagination-font-size: var(--nutui-pagination-font-size, $font-text) !default; +$pagination-font-size: var(--nutui-pagination-font-size, $font-size) !default; $pagination-item-border-color: var( --nutui-pagination-item-border-color, - $color-divider + $color-border ) !default; $pagination-active-background-color: linear-gradient( 135deg, - $color-primary-start 0%, - $color-primary-end 100% + $color-primary-stop-1 0%, + $color-primary-stop-2 100% ) !default; $pagination-disable-color: var( --nutui-pagination-disable-color, - $color-disabled + $color-text-disable ) !default; $pagination-disable-background-color: var( --nutui-pagination-disable-background-color, @@ -1401,7 +1428,7 @@ $tabs-titles-border-radius: var(--nutui-tabs-titles-border-radius, 0) !default; $nut-tabs-title-gap: var(--nutui-tabs-title-gap, 0) !default; $tabs-titles-item-font-size: var( --nutui-tabs-titles-item-font-size, - $font-text + $font-size ) !default; $tabs-titles-item-active-font-weight: var( --nutui-tabs-titles-item-active-font-weight, @@ -1409,7 +1436,7 @@ $tabs-titles-item-active-font-weight: var( ) !default; $tabs-horizontal-tab-line-color: var( --nutui-tabs-horizontal-tab-line-color, - linear-gradient(90deg, $color-primary-start 0%, $color-primary-light 100%) + linear-gradient(90deg, $color-primary-stop-1 0%, $color-primary-light 100%) ) !default; $tabs-horizontal-tab-line-bottom: var( --nutui-tabs-horizontal-line-bottom, @@ -1433,7 +1460,7 @@ $tabs-horizontal-titles-item-min-width: var( ) !default; $tabs-horizontal-titles-item-active-background-color: var( --nutui-tabs-horizontal-titles-item-active-background-color, - $color-card-background + $color-background-overlay ) !default; $tabs-horizontal-titles-item-active-line-width: var( --nutui-tabs-horizontal-titles-item-active-line-width, @@ -1445,7 +1472,7 @@ $tabs-horizontal-titles-item-active-line-height: var( ) !default; $tabs-vertical-tab-line-color: var( --nutui-tabs-vertical-tab-line-color, - linear-gradient(180deg, $color-primary-start 0%, $color-primary-light 100%) + linear-gradient(180deg, $color-primary-stop-1 0%, $color-primary-light 100%) ) !default; $tabs-vertical-titles-item-height: var( --nutui-tabs-vertical-titles-item-height, @@ -1468,7 +1495,7 @@ $tabs-vertical-titles-width: var( $indicator-color: var(--nutui-indicator-color, $color-primary) !default; $indicator-dot-color: var( --nutui-indicator-dot-color, - $color-disabled + $color-text-disable ) !default; $indicator-dot-size: var(--nutui-indicator-dot-size, 5px) !default; $indicator-dot-active-size: var( @@ -1485,7 +1512,7 @@ $indicator-dot-vertical-margin: var( // menu（✅） $menu-bar-line-height: var(--nutui-menu-bar-line-height, 48px) !default; $menu-placeholder-top: var(--nutui-menu-placeholder-top, -48px) !default; -$menu-item-font-size: var(--nutui-menu-item-font-size, $font-text) !default; +$menu-item-font-size: var(--nutui-menu-item-font-size, $font-size) !default; $menu-item-text-color: var(--nutui-menu-item-text-color, $color-title) !default; $menu-item-active-text-color: var( --nutui-menu-item-active-text-color, @@ -1554,11 +1581,11 @@ $collapse-item-padding: var( $collapse-item-color: var(--nutui-collapse-item-color, $color-title) !default; $collapse-item-disabled-color: var( --nutui-collapse-item-disabled-color, - $color-disabled + $color-text-disable ) !default; $collapse-item-font-size: var( --nutui-collapse-item-font-size, - $font-text + $font-size ) !default; $collapse-item-line-height: var( --nutui-collapse-item-line-height, @@ -1578,7 +1605,7 @@ $collapse-wrapper-content-color: var( ) !default; $collapse-wrapper-content-font-size: var( --nutui-collapse-wrapper-content-font-size, - $font-text + $font-size ) !default; $collapse-wrapper-content-line-height: var( --nutui-collapse-wrapper-content-line-height, @@ -1620,7 +1647,7 @@ $searchbar-input-height: var(--nutui-searchbar-input-height, 32px) !default; $searchbar-input-padding: var(--nutui-searchbar-input-padding, 0 5px) !default; $searchbar-input-background: var( --nutui-searchbar-input-background, - $color-card-background + $color-background-overlay ) !default; $searchbar-input-text-color: var( --nutui-searchbar-input-text-color, @@ -1654,7 +1681,7 @@ $empty-description-margin-top: var( ) !default; $empty-description-color: var( --nutui-empty-description-color, - $color-help + $color-text-help ) !default; $empty-description-font-size: var( --nutui-empty-description-font-size, @@ -1669,7 +1696,7 @@ $empty-description-padding: var( 0 40px ) !default; // cascader（✅） -$cascader-font-size: var(--nutui-cascader-font-size, $font-text) !default; +$cascader-font-size: var(--nutui-cascader-font-size, $font-size) !default; $cascader-line-height: var(--nutui-cascader-line-height, 22px) !default; $cascader-pane-height: var(--nutui-cascader-pane-height, 342px) !default; $cascader-pane-paddingTop: var(--nutui-cascader-pane-paddingTop, 10px) !default; @@ -1687,7 +1714,7 @@ $cascader-bar-padding: var( ) !default; $cascader-bar-font-size: var( --nutui-cascader-bar-font-size, - $font-title + $font-size-xl ) !default; $cascader-bar-line-height: var(--nutui-cascader-bar-line-height, 20px) !default; $cascader-bar-color: var(--nutui-cascader-bar-color, $color-title) !default; @@ -1701,7 +1728,7 @@ $cascader-item-border-bottom: var( $cascader-item-color: var(--nutui-cascader-item-color, $color-title) !default; $cascader-item-font-size: var( --nutui-cascader-item-font-size, - $font-text + $font-size ) !default; $cascader-item-active-color: var( --nutui-cascader-item-active-color, @@ -1764,13 +1791,13 @@ $skeleton-line-border-radius: var( // card（✅） $card-left-border-radius: var(--nutui-card-left-border-radius, 2px) !default; -$color-card-background: var( +$color-background-overlay: var( --nutui-card-background-color, $color-background ) !default; // grid（✅） -$grid-border-color: var(--nutui-grid-border-color, $color-divider) !default; +$grid-border-color: var(--nutui-grid-border-color, $color-border) !default; $grid-item-content-padding: var( --nutui-grid-item-content-padding, 16px 8px @@ -1783,7 +1810,7 @@ $grid-item-text-margin: var(--nutui-grid-item-text-margin, 8px) !default; $grid-item-text-color: var(--nutui-grid-item-text-color, $color-title) !default; $grid-item-text-font-size: var( --nutui-grid-item-text-font-size, - $font-help + $font-size-small ) !default; // table（✅） @@ -1806,10 +1833,10 @@ $navbar-box-shadow: var( 0px 1px 7px 0px rgba(237, 238, 241, 1) ) !default; $navbar-color: var(--nutui-navbar-color, $color-text) !default; -$navbar-font-size: var(--nutui-navbar-font-size, $font-text) !default; +$navbar-font-size: var(--nutui-navbar-font-size, $font-size) !default; $navbar-title-font-size: var( --nutui-navbar-title-font-size, - $font-text + $font-size ) !default; $navbar-title-font-weight: var(--nutui-navbar-title-font-weight, 0) !default; $navbar-title-font-color: var( @@ -1842,7 +1869,7 @@ $sidenavbar-sub-title-padding: var( ) !default; $sidenavbar-sub-title-background: var( --nutui-sidenavbar-sub-title-background, - $color-card-background-wrapper + $color-background-sunken ) !default; $sidenavbar-sub-title-color: var( --nutui-sidenavbar-sub-title-color, @@ -1925,7 +1952,7 @@ $elevator-list-item-code-border-bottom: var( ) !default; $elevator-list-item-code-border-bottom-color: var( --nutui-elevator-list-item-code-border-bottom-color, - $color-divider + $color-border ) !default; $elevator-list-item-code-current-box-shadow: 0 3px 3px 1px rgba(240, 240, 240, 1) !default; @@ -2076,7 +2103,7 @@ $circleprogress-text-color: var( ) !default; $circleprogress-text-size: var( --nutui-circleprogress-text-size, - $font-card-title + $font-size-large ) !default; // Ellipsis @@ -2119,3 +2146,12 @@ $col-default-margin-bottom: var( // TrendArrow $trendarrow-font-size: var(--nutui-trendarrow-font-size, 14px) !default; $trendarrow-icon-margin: var(--nutui-trendarrow-icon-margin, 4px) !default; + +// Space +$space-gap: var(--nutui-space-gap, 8px) !default; + +// loading +$loading-icon-color: var(--nutui-loading-icon-color, #9ea9af) !default; +$loading-icon-size: var(--nutui-loading-icon-size, 32px) !default; +$loading-text-color: var(--nutui-loading-text-color, #9ea9af) !default; +$loading-text-size: var(--nutui-loading-text-size, 14px) !default; diff --git a/src/utils/typings.ts b/src/utils/typings.ts index 9eea7ac58d..a995f67e65 100644 --- a/src/utils/typings.ts +++ b/src/utils/typings.ts @@ -4,6 +4,7 @@ export interface BasicComponent { className?: string style?: CSSProperties children?: ReactNode + id?: string } export const ComponentDefaults = { diff --git a/src/utils/use-custom-event.ts b/src/utils/use-custom-event.ts new file mode 100644 index 0000000000..4c503720b6 --- /dev/null +++ b/src/utils/use-custom-event.ts @@ -0,0 +1,26 @@ +import { useEffect } from 'react' +import { Events, getCurrentInstance } from '@tarojs/taro' + +export const customEvents = new Events() + +export function useCustomEventsPath(selector: string) { + const path = getCurrentInstance().router?.path + return path ? `${path}__${selector}` : selector +} + +export function useCustomEvent(selector: string, cb: any) { + const path = useCustomEventsPath(selector) + useEffect(() => { + customEvents.on(path, cb) + return () => { + customEvents.off(path) + } + }, []) + const trigger = (args: T) => { + customEvents.trigger(path, args) + } + const off = () => { + customEvents.off(path) + } + return [trigger, off] +} diff --git a/src/utils/use-taro-rect.ts b/src/utils/use-taro-rect.ts new file mode 100644 index 0000000000..2d2ccf7bc0 --- /dev/null +++ b/src/utils/use-taro-rect.ts @@ -0,0 +1,25 @@ +import Taro from '@tarojs/taro' + +export const getTaroRectById = (id: string) => { + return new Promise((resolve, reject) => { + if (Taro.getEnv() === Taro.ENV_TYPE.WEB) { + const t = document ? document.querySelector(`#${id}`) : '' + if (t) { + resolve(t?.getBoundingClientRect()) + } + reject() + } else { + const query = Taro.createSelectorQuery() + query + .select(`#${id}`) + .boundingClientRect() + .exec(function (rect: any) { + if (rect[0]) { + resolve(rect[0]) + } else { + reject() + } + }) + } + }) +} diff --git a/src/utils/use-touch.ts b/src/utils/use-touch.ts index fb34de5f43..6b501282cf 100644 --- a/src/utils/use-touch.ts +++ b/src/utils/use-touch.ts @@ -36,13 +36,13 @@ export function useTouch() { SetDirection('') } - const start = ((event: TouchEvent) => { + const start = (event: React.TouchEvent) => { reset() SetStartX(event.touches[0].clientX) SetStartY(event.touches[0].clientY) - }) as EventListener + } - const move = ((event: TouchEvent) => { + const move = (event: React.TouchEvent) => { const touch = event.touches[0] const dX = touch.clientX - startX const dY = touch.clientY - startY @@ -55,7 +55,7 @@ export function useTouch() { if (!direction) { SetDirection(getDirection(offsetX, offsetY)) } - }) as EventListener + } return { move,