mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:48:55 +08:00
style：组件对齐云舍4.1主题 (#4337)
* Select Options等组件样式对齐4.0 * 更新测试快照 * 修改部分测试用例 * feat:4.0样式修改 * 修改checkboxes hover问题 * Feat image 4.0 (#4242) * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * fix: 点状步骤条样式修改 * fix: inputTree组件对齐4.0标准 * fix: textarea组件对齐4.0标准 * fix: textarea组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: image组件样式优化 * fix: image组件样式优化 * fix: image组件样式优化 * fix: image组件样式优化 Co-authored-by: qiaoganggang <qiaoganggang@baidu.com> * fix: textarea组件对齐4.0标准 (#4149) * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * fix: 点状步骤条样式修改 * fix: inputTree组件对齐4.0标准 * fix: inputTree组件对齐4.0标准 * fix: textarea组件对齐4.0标准 * fix: textarea组件对齐4.0标准 Co-authored-by: qiaoganggang <qiaoganggang@baidu.com> * fix： inputTree 组价对齐4.0标准 (#4148) * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * fix: 点状步骤条样式修改 * fix: inputTree组件对齐4.0标准 * fix: inputTree组件对齐4.0标准 * fix: inputtree组件图标颜色修改 Co-authored-by: qiaoganggang <qiaoganggang@baidu.com> * feat： 部分组件样式问题修复 (#4154) * feat: input-text 样式 * feat: input-range 样式 * feat: table 样式 1 * feat: search-box * feat: curd icon * feat: table 空状态 * feat: input-text 多选，最大宽度设置 * feat: search-box 搜索图标颜色 * feat: crud 编辑、过滤、搜索、排序 图标样式修改 * feat: 更新快照 * feat: 更新快照 2 * feat: curd fix * feat: curd edit icon fix * feat: input-password 不可见 icon 修改 * feat: input-password snapshot update * docs:完善对话框size参数说明 * feat: Log 组件支持虚拟渲染及限制最大行数 * 修复不支持 loading 问题 * 换一下名字 Co-authored-by: liuzedong02 <liuzedong02@baidu.com> Co-authored-by: liweijian <liweijian@hkmtl.com> Co-authored-by: wuduoyi <wuduoyi@baidu.com> Co-authored-by: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> * fix：修复删除图标颜色问题 (#4245) * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * fix: 点状步骤条样式修改 * fix: inputTree组件对齐4.0标准 * fix: textarea组件对齐4.0标准 * fix: textarea组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: image组件样式优化 * fix: image组件样式优化 * fix: image组件样式优化 * fix: image组件样式优化 * fix: 修复conditionbuilder组价图标颜色问题 Co-authored-by: qiaoganggang <qiaoganggang@baidu.com> * form表单对齐云社4.0 (#4248) * feat: form增加表单项 label文本对齐方式选项 * fix: remark 支持在表单内配置 * style: form 间距对齐云社4.0 Co-authored-by: sarding <hongfuquan@baidu.com> * Fix chart radios name (#4251) * fix: Chart 单选框 修改为 ChartRadios 图表单选框 * fix: input-password 修改 可见 图标 Co-authored-by: liuzedong02 <liuzedong02@baidu.com> * feat: checkboxes内边距&nestedSelect箭头修改 (#4254) Co-authored-by: xujiahao01 <xujiahao01@baidu.com> * Feature style 4.0 cxd (#4261) * feat: 日期&折叠面板&提示样式对齐 * fix:测试用例修复 * feat: timeRange开始和结束分开&日期样式优化 * styles: 日历样式修复 Co-authored-by: hongyang03 <hongyang03@baidu.com> * 整体字体大小调整 (#4264) * feat: form增加表单项 label文本对齐方式选项 * fix: remark 支持在表单内配置 * style: form 间距对齐云社4.0 * 修改表单的字体 Co-authored-by: sarding <hongfuquan@baidu.com> * inputfile 和 drawer对齐云社4.0 (#4249) * fix: drawer 和 inputfile 关闭图标对齐云社4.0 * fix：修改 drawer的图标大小 和边框圆角 * drawer 样式调整 Co-authored-by: sarding <hongfuquan@baidu.com> * Fix style (#4265) * fix: input-password icon 高度 * fix: input-password icon 换行问题 Co-authored-by: liuzedong02 <liuzedong02@baidu.com> * fix: curd 图标垂直居中 (#4271) Co-authored-by: liuzedong02 <liuzedong02@baidu.com> * fix:修复nestedSelect无法动态调整位置及溢出问题 (#4292) Co-authored-by: xujiahao01 <xujiahao01@baidu.com> * style: 优化switch组件动效 (#4302) * style：优化date组件最小宽度 (#4303) * style：cxd主题移动端基础字号调整为16px (#4305) * marge master into style-cxd (#4306) * docs:完善对话框size参数说明 * feat: Log 组件支持虚拟渲染及限制最大行数 * 修复不支持 loading 问题 * 换一下名字 * fix: 公式编辑器 variableMode 失效 (#4252) * 提交事件支持禁用默认提示 * fix:修改执行方式 * 修改测试api * 去掉无效引用 * fix: 修复datetime移动端报错 * chore: jssdk 的 responseAdaptor 扩充参数,支持拿 response 整个对象,包括返回的 headers 和… (#4229) * chore: jssdk 的 responseAdpator 扩充参数,支持拿 response 整个对象,包括返回的 headers 和状态码信息 * chore: jssdk 的 responseAdpator 扩充参数,支持拿 response 整个对象,包括返回的 headers 和状态码信息 * docs: 切换主题文档描述不正确问题 * 优化逻辑 * 调整格式 * 处理异步 * 增加兼容逻辑 * feat: 更新实时日志组件，增加可操作按钮：停止、显示行号等 (#4250) * feat: 更新实时日志组件，增加可操作按钮：停止、显示行号等 * 日志容器针对操作按钮增加相对定位 * 改变工具栏为侧边隐藏样式 * 调整 log 操作按钮位置避免遮挡内容 * 补充翻译 * 修复 Log 行样式丢失 Co-authored-by: lvchenguang <lvchenguang@zhihu.com> Co-authored-by: wuduoyi <wuduoyi@baidu.com> * fixup (#4263) Co-authored-by: zhyc <zhyc@hzsuoyi.com> * fix #4240: 修复input-datetime组件timeConstraints属性不生效问题，修复时间选取后自动滚动位置错误 (#4253) * chore: action countDown 在actionType为ajax时，请求通过再执行倒计时操作、dialog header 传递动作属性 (#4000) * LocationPicker ak支持数据解析,可用于统一地图配置 * drawer header传递动作属性，在header中也可以提交、关闭等操作 * action countDown 在actionType为ajax时，请求通过再执行倒计时操作 * dialog header 传递动作属性 * 修一些编码规范问题 Co-authored-by: metooweb <1058776960@qq.com> Co-authored-by: wuduoyi <wuduoyi@baidu.com> * chore: 修几个单元测试报错 (#4272) * feat:toast支持取消合并state * fix: 修正ContextMenu 二次触发时遮挡问题 (#4282) * fix(ContextMenu): 增加判空处理 (#4283) * 人员选择组件支持部门、角色、岗位选择 (#4285) * 人员选择组件 * 修复ts报错 Co-authored-by: zhangxulong <zhangxulong@baidu.com> * fix:修复事件动作对禁用状态控制失效问题&更新文档示例 (#4278) * fix:修复事件动作对禁用状态控制失效问题&更新文档示例 * fix:修复事件动作对禁用状态控制失效问题 * fix:修复事件动作对禁用状态控制失效问题 * fix:动作执行时对组件查找失败的容错 (#4290) * feat:Table2支持配置单元格样式、行操作按钮 (#4268) Co-authored-by: wanglinfang <wanglinfang@baidu.com> * fix #4270: checkboxes组件checkAll属性失效问题 (#4287) * feat:事件干预支持表达式 (#4295) * fix #4258: sdk方式下toast配置不生效问题 (#4274) * feat: 添加 json-schema 渲染器 (#4269) * feat: 添加 json-schema 渲染器 * draft: 组件层添加 form 逻辑 * 补充组件form相关逻辑 * json-schema-editor 组件内部实现调整 * 添加 json-schema 渲染器 * 补充外部 value 变化更新成员的逻辑 * 补充外部 value 变化更新成员的逻辑 * 优化 json-schema 交互 * 修改 snapshot * 可能死循环 * 补充文档 * 优化逻辑 * 具备远程获取能力 * 固定值优化 * fix(custom): 完善custom自定义组件，增加属性变动更新逻辑 (#4288) * fix(custom): 完善custom自定义组件，增加属性变动更新逻辑 * fix(custom): update * fix(custom): 更新测试用例 * 类型只有一个时不显示切换按钮 * fix: Pagination 切换页码后每页显示重置问题 (#4298) Co-authored-by: liweijian <liweijian@hkmtl.com> Co-authored-by: wuduoyi <wuduoyi@baidu.com> Co-authored-by: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Co-authored-by: Allen <yupeng.fe@qq.com> Co-authored-by: pianruijie <13522335863@163.com> Co-authored-by: zhangtao07 <zhang.tao.1006@163.com> Co-authored-by: liaoxuezhi <2betop.cn@gmail.com> Co-authored-by: hsm-lv <80095014+hsm-lv@users.noreply.github.com> Co-authored-by: mr-chenguang <37072324+lcgash@users.noreply.github.com> Co-authored-by: lvchenguang <lvchenguang@zhihu.com> Co-authored-by: decarp <zhycde@gmail.com> Co-authored-by: zhyc <zhyc@hzsuoyi.com> Co-authored-by: metooweb <2947550545@qq.com> Co-authored-by: metooweb <1058776960@qq.com> Co-authored-by: 刘丹 <365533093@qq.com> Co-authored-by: 龙少 <1769057083@qq.com> Co-authored-by: zhangxulong <zhangxulong@baidu.com> Co-authored-by: wanglinfang2014 <w.l.fang@foxmail.com> Co-authored-by: wanglinfang <wanglinfang@baidu.com> * fix:transfer组件云舍样式完善 (#4310) Co-authored-by: sqzhou <zhoushengqiang01@MacBook-Pro-2.local> * merge master (#4335) * docs:完善对话框size参数说明 * feat: Log 组件支持虚拟渲染及限制最大行数 * 修复不支持 loading 问题 * 换一下名字 * fix: 公式编辑器 variableMode 失效 (#4252) * 提交事件支持禁用默认提示 * fix:修改执行方式 * 修改测试api * 去掉无效引用 * fix: 修复datetime移动端报错 * chore: jssdk 的 responseAdaptor 扩充参数,支持拿 response 整个对象,包括返回的 headers 和… (#4229) * chore: jssdk 的 responseAdpator 扩充参数,支持拿 response 整个对象,包括返回的 headers 和状态码信息 * chore: jssdk 的 responseAdpator 扩充参数,支持拿 response 整个对象,包括返回的 headers 和状态码信息 * docs: 切换主题文档描述不正确问题 * 优化逻辑 * 调整格式 * 处理异步 * 增加兼容逻辑 * feat: 更新实时日志组件，增加可操作按钮：停止、显示行号等 (#4250) * feat: 更新实时日志组件，增加可操作按钮：停止、显示行号等 * 日志容器针对操作按钮增加相对定位 * 改变工具栏为侧边隐藏样式 * 调整 log 操作按钮位置避免遮挡内容 * 补充翻译 * 修复 Log 行样式丢失 Co-authored-by: lvchenguang <lvchenguang@zhihu.com> Co-authored-by: wuduoyi <wuduoyi@baidu.com> * fixup (#4263) Co-authored-by: zhyc <zhyc@hzsuoyi.com> * fix #4240: 修复input-datetime组件timeConstraints属性不生效问题，修复时间选取后自动滚动位置错误 (#4253) * chore: action countDown 在actionType为ajax时，请求通过再执行倒计时操作、dialog header 传递动作属性 (#4000) * LocationPicker ak支持数据解析,可用于统一地图配置 * drawer header传递动作属性，在header中也可以提交、关闭等操作 * action countDown 在actionType为ajax时，请求通过再执行倒计时操作 * dialog header 传递动作属性 * 修一些编码规范问题 Co-authored-by: metooweb <1058776960@qq.com> Co-authored-by: wuduoyi <wuduoyi@baidu.com> * chore: 修几个单元测试报错 (#4272) * feat:toast支持取消合并state * fix: 修正ContextMenu 二次触发时遮挡问题 (#4282) * fix(ContextMenu): 增加判空处理 (#4283) * 人员选择组件支持部门、角色、岗位选择 (#4285) * 人员选择组件 * 修复ts报错 Co-authored-by: zhangxulong <zhangxulong@baidu.com> * fix:修复事件动作对禁用状态控制失效问题&更新文档示例 (#4278) * fix:修复事件动作对禁用状态控制失效问题&更新文档示例 * fix:修复事件动作对禁用状态控制失效问题 * fix:修复事件动作对禁用状态控制失效问题 * fix:动作执行时对组件查找失败的容错 (#4290) * feat:Table2支持配置单元格样式、行操作按钮 (#4268) Co-authored-by: wanglinfang <wanglinfang@baidu.com> * fix #4270: checkboxes组件checkAll属性失效问题 (#4287) * feat:事件干预支持表达式 (#4295) * fix #4258: sdk方式下toast配置不生效问题 (#4274) * feat: 添加 json-schema 渲染器 (#4269) * feat: 添加 json-schema 渲染器 * draft: 组件层添加 form 逻辑 * 补充组件form相关逻辑 * json-schema-editor 组件内部实现调整 * 添加 json-schema 渲染器 * 补充外部 value 变化更新成员的逻辑 * 补充外部 value 变化更新成员的逻辑 * 优化 json-schema 交互 * 修改 snapshot * 可能死循环 * 补充文档 * 优化逻辑 * 具备远程获取能力 * 固定值优化 * fix(custom): 完善custom自定义组件，增加属性变动更新逻辑 (#4288) * fix(custom): 完善custom自定义组件，增加属性变动更新逻辑 * fix(custom): update * fix(custom): 更新测试用例 * 类型只有一个时不显示切换按钮 * fix: Pagination 切换页码后每页显示重置问题 (#4298) * feat:transfer组件功能完善 (#3696) * feat:transfer组件功能完善 * update-snapshot * feat:transfer组件功能完善 * update-snapshot * feat:transfer组件功能完善 * feat:transfer组件云舍4.0功能 * feat:transfer组件云舍4.0功能 * feat:transfer组件云舍4.0功能 * feat:transfer组件云舍4.0功能 * feat:transfer组件云舍4.0功能 * feat:transfer组件云舍4.0功能 * feat:transfer组件云舍4.0功能 * feat:transfer组件云舍4.0功能 * feat:transfer组件云舍4.0功能 * feat:transfer组件云舍4.0功能 * feat:transfer组件云舍4.0功能 * update-snapshot * feat:transfer组件云舍4.0功能 * feat:transfer组件云舍4.0功能 * feat:transfer组件云舍4.0功能 * feat:transfer组件云舍4.0功能 * update-snapshot Co-authored-by: sqzhou <zhoushengqiang01@baidu.com> * feat: 表单label支持左右对齐方式 (#4311) * fix: 修复 replaceText 不支持 schemaApi 问题 (#4300) * fix: deferloadOptions 在defer模式下的处理问题 * fix: 按钮disabledOn属性失效问题 (#4324) * fix: Service组件条件轮询会多调用一次api; docs: 补充轮询相关属性示例 (#4317) * fix: 公式变量检索问题 (#4325) * fix #1536: actionType为ajax时sendOn属性未生效问题 (#4326) * fix:修复disabled失效问题 (#4329) * fix:修复disabled失效问题 * test:补充事件动作测试用例 * fix：样式问题 Co-authored-by: liweijian <liweijian@hkmtl.com> Co-authored-by: wuduoyi <wuduoyi@baidu.com> Co-authored-by: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Co-authored-by: Allen <yupeng.fe@qq.com> Co-authored-by: pianruijie <13522335863@163.com> Co-authored-by: zhangtao07 <zhang.tao.1006@163.com> Co-authored-by: liaoxuezhi <2betop.cn@gmail.com> Co-authored-by: hsm-lv <80095014+hsm-lv@users.noreply.github.com> Co-authored-by: mr-chenguang <37072324+lcgash@users.noreply.github.com> Co-authored-by: lvchenguang <lvchenguang@zhihu.com> Co-authored-by: decarp <zhycde@gmail.com> Co-authored-by: zhyc <zhyc@hzsuoyi.com> Co-authored-by: metooweb <2947550545@qq.com> Co-authored-by: metooweb <1058776960@qq.com> Co-authored-by: 刘丹 <365533093@qq.com> Co-authored-by: 龙少 <1769057083@qq.com> Co-authored-by: zhangxulong <zhangxulong@baidu.com> Co-authored-by: wanglinfang2014 <w.l.fang@foxmail.com> Co-authored-by: wanglinfang <wanglinfang@baidu.com> Co-authored-by: zhou999 <zhousq809@163.com> Co-authored-by: sqzhou <zhoushengqiang01@baidu.com> Co-authored-by: xujiahao01 <xujiahao01@baidu.com> Co-authored-by: qiaogg <43558337+qiaogg@users.noreply.github.com> Co-authored-by: qiaoganggang <qiaoganggang@baidu.com> Co-authored-by: sansiro <sansiro@sansiro.me> Co-authored-by: liuzedong02 <liuzedong02@baidu.com> Co-authored-by: liweijian <liweijian@hkmtl.com> Co-authored-by: wuduoyi <wuduoyi@baidu.com> Co-authored-by: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Co-authored-by: sarding <37691952+sarding@users.noreply.github.com> Co-authored-by: sarding <hongfuquan@baidu.com> Co-authored-by: 徐佳豪 <53201551+blue-squirrel@users.noreply.github.com> Co-authored-by: HongYang <33488114+hy993658052@users.noreply.github.com> Co-authored-by: hongyang03 <hongyang03@baidu.com> Co-authored-by: Allen <yupeng.fe@qq.com> Co-authored-by: pianruijie <13522335863@163.com> Co-authored-by: zhangtao07 <zhang.tao.1006@163.com> Co-authored-by: liaoxuezhi <2betop.cn@gmail.com> Co-authored-by: hsm-lv <80095014+hsm-lv@users.noreply.github.com> Co-authored-by: mr-chenguang <37072324+lcgash@users.noreply.github.com> Co-authored-by: lvchenguang <lvchenguang@zhihu.com> Co-authored-by: decarp <zhycde@gmail.com> Co-authored-by: zhyc <zhyc@hzsuoyi.com> Co-authored-by: metooweb <2947550545@qq.com> Co-authored-by: metooweb <1058776960@qq.com> Co-authored-by: 刘丹 <365533093@qq.com> Co-authored-by: 龙少 <1769057083@qq.com> Co-authored-by: zhangxulong <zhangxulong@baidu.com> Co-authored-by: wanglinfang2014 <w.l.fang@foxmail.com> Co-authored-by: wanglinfang <wanglinfang@baidu.com> Co-authored-by: zhou999 <zhousq809@163.com> Co-authored-by: sqzhou <zhoushengqiang01@MacBook-Pro-2.local> Co-authored-by: sqzhou <zhoushengqiang01@baidu.com>
This commit is contained in:
qinhaoyan
GitHub
parent
2e229d07b1
commit
75918c3f5d
@ -62,6 +62,7 @@ test('Renderer:crud', async () => {
|
||||
)
|
||||
);
|
||||
|
||||
await wait(300);
|
||||
await waitFor(() => {
|
||||
expect(getByText('Internet Explorer 4.0')).toBeInTheDocument();
|
||||
expect(
|
||||
|
||||
@ -80,8 +80,8 @@ exports[`Renderer:chained-select 1`] = `
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@ -106,8 +106,8 @@ exports[`Renderer:chained-select 1`] = `
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@ -132,8 +132,8 @@ exports[`Renderer:chained-select 1`] = `
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -81,8 +81,8 @@ exports[`Renderer:city 1`] = `
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@ -115,8 +115,8 @@ exports[`Renderer:city 1`] = `
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@ -149,8 +149,8 @@ exports[`Renderer:city 1`] = `
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -96,8 +96,8 @@ exports[`Renderer:condition-builder 1`] = `
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -59,19 +59,19 @@ exports[`Renderer:dateRange 1`] = `
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="cxd-DateRangePicker-input isActive"
|
||||
placeholder="选择开始时间"
|
||||
placeholder="开始时间"
|
||||
type="text"
|
||||
value="2019-06-06"
|
||||
/>
|
||||
<span
|
||||
class="cxd-DateRangePicker-input-separator"
|
||||
>
|
||||
~
|
||||
-
|
||||
</span>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="cxd-DateRangePicker-input"
|
||||
placeholder="选择结束时间"
|
||||
placeholder="结束时间"
|
||||
type="text"
|
||||
value="2019-06-26"
|
||||
/>
|
||||
@ -87,8 +87,8 @@ exports[`Renderer:dateRange 1`] = `
|
||||
class="cxd-DateRangePicker-toggler"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-clock"
|
||||
icon="clock"
|
||||
classname="icon icon-date"
|
||||
icon="date"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -75,8 +75,8 @@ exports[`Renderer:date 1`] = `
|
||||
class="cxd-DatePicker-toggler"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-clock"
|
||||
icon="clock"
|
||||
classname="icon icon-date"
|
||||
icon="date"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -75,8 +75,8 @@ exports[`Renderer:inputDate 1`] = `
|
||||
class="cxd-DatePicker-toggler"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-clock"
|
||||
icon="clock"
|
||||
classname="icon icon-date"
|
||||
icon="date"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -204,8 +204,8 @@ exports[`Renderer:repeat 1`] = `
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
|
||||
@ -65,7 +65,7 @@ exports[`Renderer: chained select 1`] = `
|
||||
class="cxd-SelectControl cxd-Form-control"
|
||||
>
|
||||
<div
|
||||
class="cxd-ResultBox cxd-TransferDropDown cxd-Form-control is-clickable"
|
||||
class="cxd-ResultBox cxd-TransferDropDown cxd-Form-control is-clickable is-group"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
@ -77,8 +77,8 @@ exports[`Renderer: chained select 1`] = `
|
||||
class="cxd-TransferDropDown-icon"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@ -226,8 +226,8 @@ exports[`Renderer:select associated 1`] = `
|
||||
class="cxd-TransferDropDown-icon"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@ -375,8 +375,8 @@ exports[`Renderer:select chained 1`] = `
|
||||
class="cxd-TransferDropDown-icon"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@ -524,8 +524,8 @@ exports[`Renderer:select group 1`] = `
|
||||
class="cxd-TransferDropDown-icon"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@ -681,8 +681,8 @@ exports[`Renderer:select menutpl 1`] = `
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@ -830,8 +830,8 @@ exports[`Renderer:select table 1`] = `
|
||||
class="cxd-TransferDropDown-icon"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@ -955,7 +955,7 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
|
||||
class="cxd-SelectControl cxd-Form-control has-popover"
|
||||
>
|
||||
<div
|
||||
class="cxd-ResultBox cxd-TransferDropDown cxd-Form-control is-active is-clickable"
|
||||
class="cxd-ResultBox cxd-TransferDropDown cxd-Form-control is-active is-clickable is-group"
|
||||
style="position: relative;"
|
||||
tabindex="-1"
|
||||
>
|
||||
@ -968,8 +968,8 @@ exports[`Renderer:select table with labelField & valueField 1`] = `
|
||||
class="cxd-TransferDropDown-icon"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
@ -1419,8 +1419,8 @@ exports[`Renderer:select tree 1`] = `
|
||||
class="cxd-TransferDropDown-icon"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
@ -1566,8 +1566,8 @@ exports[`Renderer:select virtual 1`] = `
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
|
||||
@ -78,8 +78,8 @@ exports[`Renderer:service 1`] = `
|
||||
class="cxd-Select-arrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-caret"
|
||||
icon="caret"
|
||||
classname="icon icon-right-arrow-bold"
|
||||
icon="right-arrow-bold"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -454,8 +454,9 @@ exports[`Renderer:text type is password 1`] = `
|
||||
<a
|
||||
class="cxd-TextControl-revealPassword"
|
||||
>
|
||||
<i
|
||||
class="fa fa-eye-slash"
|
||||
<icon-mock
|
||||
classname="icon icon-invisible"
|
||||
icon="invisible"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
@ -1793,16 +1794,15 @@ exports[`Renderer:text with options and multiple: first option selected 1`] = `
|
||||
<div
|
||||
class="cxd-TextControl-value"
|
||||
>
|
||||
<span
|
||||
class="cxd-TextControl-valueIcon"
|
||||
>
|
||||
×
|
||||
</span>
|
||||
<span
|
||||
class="cxd-TextControl-valueLabel"
|
||||
>
|
||||
OptionA
|
||||
</span>
|
||||
<icon-mock
|
||||
classname="cxd-TextControl-valueIcon icon icon-close"
|
||||
icon="close"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
@ -2167,16 +2167,15 @@ exports[`Renderer:text with options and multiple: options is opened again, and f
|
||||
<div
|
||||
class="cxd-TextControl-value"
|
||||
>
|
||||
<span
|
||||
class="cxd-TextControl-valueIcon"
|
||||
>
|
||||
×
|
||||
</span>
|
||||
<span
|
||||
class="cxd-TextControl-valueLabel"
|
||||
>
|
||||
OptionA
|
||||
</span>
|
||||
<icon-mock
|
||||
classname="cxd-TextControl-valueIcon icon icon-close"
|
||||
icon="close"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
@ -2357,30 +2356,28 @@ exports[`Renderer:text with options and multiple: second option selected 1`] = `
|
||||
<div
|
||||
class="cxd-TextControl-value"
|
||||
>
|
||||
<span
|
||||
class="cxd-TextControl-valueIcon"
|
||||
>
|
||||
×
|
||||
</span>
|
||||
<span
|
||||
class="cxd-TextControl-valueLabel"
|
||||
>
|
||||
OptionA
|
||||
</span>
|
||||
<icon-mock
|
||||
classname="cxd-TextControl-valueIcon icon icon-close"
|
||||
icon="close"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-TextControl-value"
|
||||
>
|
||||
<span
|
||||
class="cxd-TextControl-valueIcon"
|
||||
>
|
||||
×
|
||||
</span>
|
||||
<span
|
||||
class="cxd-TextControl-valueLabel"
|
||||
>
|
||||
OptionB
|
||||
</span>
|
||||
<icon-mock
|
||||
classname="cxd-TextControl-valueIcon icon icon-close"
|
||||
icon="close"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
|
||||
@ -134,6 +134,7 @@ test('Renderer:combo multiple', async () => {
|
||||
|
||||
const formDebug = JSON.parse(container.querySelector('pre code')!.innerHTML);
|
||||
|
||||
await wait(300);
|
||||
expect(formDebug).toEqual({
|
||||
combo: [
|
||||
{
|
||||
|
||||
@ -88,6 +88,7 @@ test('Renderer:formula', async () => {
|
||||
value: 2
|
||||
}
|
||||
});
|
||||
await wait(300);
|
||||
await waitFor(() => {
|
||||
expect(inputs[2].value).toBe('3');
|
||||
expect(inputs[3].value).toBe('4');
|
||||
|
||||
@ -49,6 +49,7 @@ test('Renderer:inputArray', async () => {
|
||||
|
||||
const formDebug = JSON.parse(document.querySelector('pre code')!.innerHTML);
|
||||
|
||||
await wait(500);
|
||||
expect(formDebug).toEqual({
|
||||
array: ['amis']
|
||||
});
|
||||
|
||||
@ -26,7 +26,7 @@ test('Renderer:inputMonth click', async () => {
|
||||
)
|
||||
);
|
||||
|
||||
const inputDate = await findByPlaceholderText('选择开始时间');
|
||||
const inputDate = await findByPlaceholderText('开始时间');
|
||||
|
||||
fireEvent.click(inputDate);
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ test('Renderer:inputYearRange click', async () => {
|
||||
)
|
||||
);
|
||||
|
||||
const inputDate = await findByPlaceholderText('选择开始时间');
|
||||
const inputDate = await findByPlaceholderText('开始时间');
|
||||
|
||||
fireEvent.click(inputDate);
|
||||
|
||||
|
||||
@ -777,6 +777,7 @@ test('Renderer:Page handleAction actionType=dialog mergeData', async () => {
|
||||
expect(container).toMatchSnapshot();
|
||||
|
||||
fireEvent.click(getByText(/确认/));
|
||||
await wait(300);
|
||||
await waitFor(() => {
|
||||
expect(container.querySelector('[role="dialog"]')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Chart 单选框
|
||||
title: ChartRadios 图表单选框
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Chart 单选框
|
||||
menuName: ChartRadios 图表单选框
|
||||
icon:
|
||||
order: 34
|
||||
---
|
||||
|
||||
@ -313,7 +313,9 @@ order: 21
|
||||
| startChunkApi | [API](../../../docs/types/api) | | startChunkApi |
|
||||
| chunkApi | [API](../../../docs/types/api) | | chunkApi |
|
||||
| finishChunkApi | [API](../../../docs/types/api) | | finishChunkApi |
|
||||
| concurrency | `number` | | 分块上传时并行个数 |
|
||||
| concurrency | `number` | | 分块上传时并行个数
|
||||
| documentation | `string` | | 文档内容
|
||||
| documentLink | `string` | | 文档链接 |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -29,6 +29,48 @@ icon:
|
||||
}
|
||||
```
|
||||
|
||||
## 加强样式
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
|
||||
"body": [
|
||||
{
|
||||
"type": "search-box",
|
||||
"name": "keywords",
|
||||
"enhance": true
|
||||
},
|
||||
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "<p>关键字：${keywords}</p><p>返回结果：${&|json}</p>"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 可清除
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
|
||||
"body": [
|
||||
{
|
||||
"type": "search-box",
|
||||
"name": "keywords",
|
||||
"clearable": true
|
||||
},
|
||||
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "<p>关键字：${keywords}</p><p>返回结果：${&|json}</p>"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## mini 版本
|
||||
|
||||
```schema
|
||||
|
||||
@ -50,6 +50,48 @@ order: 67
|
||||
]
|
||||
```
|
||||
|
||||
## 空状态展示
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=5",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"title": "表格1",
|
||||
"source": [],
|
||||
"columns": [
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Engine"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version"
|
||||
}
|
||||
],
|
||||
"placeholder": {
|
||||
"type": "container",
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "您还没有创建任何实例",
|
||||
"inline": true
|
||||
},
|
||||
{
|
||||
"type": "link",
|
||||
"body": "点击创建>",
|
||||
"href": "https://baidu.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 列配置
|
||||
|
||||
`columns`内，除了简单的配置`label`和`name`展示数据以外，还支持一些额外的配置项，可以帮助更好的展示数据。
|
||||
@ -1798,7 +1840,8 @@ popOver 的其它配置请参考 [popover](./popover)
|
||||
| source | `string` | `${items}` | 数据源, 绑定当前环境变量 |
|
||||
| affixHeader | `boolean` | `true` | 是否固定表头 |
|
||||
| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 |
|
||||
| placeholder | string | `暂无数据` | 当没数据的时候的文字提示 |
|
||||
| placeholder | `string` 或者 `SchemaTpl` | `暂无数据` | 当没数据的时候的文字提示 |
|
||||
| emptyIcon | `string` 或者 `SchemaIcon` | | 当没数据的时候的图标显示 |
|
||||
| className | `string` | `panel-default` | 外层 CSS 类名 |
|
||||
| tableClassName | `string` | `table-db table-striped` | 表格 CSS 类名 |
|
||||
| headerClassName | `string` | `Action.md-table-header` | 顶部外层 CSS 类名 |
|
||||
|
||||
@ -558,7 +558,7 @@ export const components = [
|
||||
},
|
||||
|
||||
{
|
||||
label: 'Chart 单选框',
|
||||
label: 'ChartRadios 图表单选框',
|
||||
path: '/zh-CN/components/form/chart-radios',
|
||||
component: React.lazy(() =>
|
||||
import('../../docs/zh-CN/components/form/chart-radios.md').then(
|
||||
|
||||
@ -402,10 +402,10 @@
|
||||
--Calendar-cell-bg: var(--white);
|
||||
--Calendar-cell-onActive-bg: var(--info);
|
||||
--Calendar-cell-onBetween-bg: #{rgba($info, 0.1)};
|
||||
--Calendar-cell-onDisabled-bg: var(--light);
|
||||
--Calendar-cell-onHover-bg: #{darken($white, 7%)};
|
||||
--Calendar-color: var(--text-color);
|
||||
--Calendar-fontSize: var(--fontSizeBase);
|
||||
--Calendar-cell-onDisabled-bg: #f7f7f9;
|
||||
--Calendar-cell-onHover-bg: #f7f7f9;
|
||||
--Calendar-color: #151b26;
|
||||
--Calendar-fontSize: var(--fontSizeSm);
|
||||
--Calendar-input-borderColor: var(--borderColor);
|
||||
--Calendar-input-borderRadius: var(--borderRadius);
|
||||
--Calendar-input-color: var(--info);
|
||||
@ -420,7 +420,7 @@
|
||||
var(--Calendar-input-fontSize)
|
||||
) / 2
|
||||
);
|
||||
--Calendar-shortcut-color: var(--info);
|
||||
--Calendar-shortcut-color: #151b26;
|
||||
--Calendar-shortcut-decoration: none;
|
||||
--Calendar-shortcut-onHover-color: #{darken($info, 15%)};
|
||||
--Calendar-shortcut-onHover-decoration: none;
|
||||
@ -595,8 +595,10 @@
|
||||
--DatePicker-borderColor: var(--Form-input-borderColor);
|
||||
--DatePicker-borderRadius: var(--Form-input-borderRadius);
|
||||
--DatePicker-borderWidth: var(--Form-input-borderWidth);
|
||||
--DatePicker-color: var(--Form-input-color);
|
||||
--DatePicker-fontSize: var(--Form-input-fontSize);
|
||||
--DatePicker-color: #151b26;
|
||||
--DatePicker-header-onHover-color: #{darken($info, 15%)};
|
||||
--DatePicker-arrow-color: #84868c;
|
||||
--DatePicker-fontSize: var(--fontSizeSm);
|
||||
--DatePicker-header-select-borderColor: #fff;
|
||||
--DatePicker-height: var(--Form-input-height);
|
||||
--DatePicker-iconColor: var(--icon-color);
|
||||
@ -628,8 +630,9 @@
|
||||
|
||||
--Drawer-bg: var(--background);
|
||||
--Drawer-body-padding: var(--gap-base);
|
||||
--Drawer-close-color: rgba(255, 255, 255, 0.8);
|
||||
--Drawer-close-onHover-color: rgba(255, 255, 255, 1);
|
||||
--Drawer-close-color: var(--text--muted-color);
|
||||
--Drawer-close-onHover-color: var(--text-color);
|
||||
--Drawer-close-size: #{px2rem(12px)};
|
||||
--Drawer-content-borderColor: var(--borderColor);
|
||||
--Drawer-content-borderRadius: 0;
|
||||
--Drawer-content-borderWidth: var(--borderWidth);
|
||||
@ -840,6 +843,7 @@
|
||||
--ImageControl-addBtn-onHover-bg: #{darken($white, 7.5%)};
|
||||
--ImageControl-addBtn-onHover-border: #{darken($borderColor, 10%)};
|
||||
--ImageControl-addBtn-onHover-color: var(--Button--default-color);
|
||||
--ImageControl-addBtn-upload-color: var(--Button--default-color);
|
||||
--ImageControl-progress-borderRadius: 0;
|
||||
|
||||
--FileControl-danger-color: #f33e3e;
|
||||
@ -891,8 +895,8 @@
|
||||
--InputRange-track-onActive-transition: transform var(--animation-duration)
|
||||
ease-out left;
|
||||
--InputRange-track-border-radius: #{px2rem(4px)};
|
||||
--InputRange-track-dot-width: #{px2rem(4px)};
|
||||
--InputRange-track-dot-height: #{px2rem(4px)};
|
||||
--InputRange-track-dot-width: #{px2rem(6px)};
|
||||
--InputRange-track-dot-height: #{px2rem(6px)};
|
||||
--InputRange-track-dot-bg: var(--white);
|
||||
--InputRange-track-transition: left var(--animation-duration) ease-out,
|
||||
width var(--animation-duration) ease-out;
|
||||
@ -1072,8 +1076,7 @@
|
||||
--Modal-overlay-bg: rgba(0, 0, 0, 0.6);
|
||||
--Modal-title-color: var(--text--loud-color);
|
||||
--Modal-title-fontSize: var(--fontSizeBase);
|
||||
--Modal-title-fontSize: var(--fontSizeBase);
|
||||
--Modal-title-fontWeight: 500;
|
||||
--Modal-title-fontWeight: var(--fontWeightMd);
|
||||
--Modal-title-lineHeight: var(--lineHeightBase);
|
||||
--Modal-widthBase: #{px2rem(500px)};
|
||||
--Modal-widthLg: #{px2rem(1100px)};
|
||||
@ -1205,6 +1208,7 @@
|
||||
--Portlet-borderRadius: var(--borderRadius);
|
||||
|
||||
--QuickEdit-iconColor: inherit;
|
||||
--QuickEdit-iconSize: #{px2rem(13px)};
|
||||
--QuickEdit-onFocus-borderColor: var(--info);
|
||||
--QuickEdit-onFocus-borderWidth: var(--borderWidth);
|
||||
--QuickEdit-onHover-iconColor: inherit;
|
||||
@ -1300,7 +1304,7 @@
|
||||
--Table-onModified-bg: #e8f0fe;
|
||||
--Table-onModified-borderColor: #{darken(#e8f0fe, 5%)};
|
||||
--Table-onModified-color: #4285f4;
|
||||
--Table-placeholder-height: #{px2rem(100px)};
|
||||
--Table-placeholder-height: #{px2rem(200px)};
|
||||
--Table-strip-bg: #{$Table-strip-bg};
|
||||
--Table-tbody-borderTopColor: #{lighten($borderColor, 2.5%)};
|
||||
--Table-thead-bg: #f6f8f8;
|
||||
@ -1314,6 +1318,7 @@
|
||||
--Table-tree-borderColor: var(--Table-borderColor);
|
||||
--Table-searchableForm-backgroundColor: #f6f7f8;
|
||||
--Table-searchableForm-borderRadius: #{px2rem(4px)};
|
||||
--Table-empty-icon-size: #{px2rem(74px)};
|
||||
|
||||
--TableCell--edge-paddingX: var(--gap-md);
|
||||
--TableCell--edge-paddingX-default: var(--gap-base);
|
||||
@ -1486,7 +1491,7 @@
|
||||
--Toast-paddingX: var(--gap-md);
|
||||
--Toast-paddingY: var(--gap-xs);
|
||||
--Toast-title-display: block;
|
||||
--Toast-width: #{px2rem(300px)};
|
||||
--Toast-width: #{px2rem(400px)};
|
||||
|
||||
--Tooltip--attr-bg: rgba(0, 0, 0, 0.7);
|
||||
--Tooltip--attr-borderColor: var(--borderColor);
|
||||
@ -1542,7 +1547,7 @@
|
||||
--Tree-inputHeight: calc(var(--Form-input-height) * 0.85);
|
||||
--Tree-item-onHover-bg: rgba(0, 126, 255, 0.08);
|
||||
--Tree-item-onHover-bg-pure: rgba(0, 126, 255, 0.08);
|
||||
--Tree-itemArrowWidth: #{px2rem(12px)};
|
||||
--Tree-itemArrowWidth: #{px2rem(16px)};
|
||||
--Tree-itemHeight: #{px2rem(30px)};
|
||||
--Tree-itemLabel--onChecked-color: var(--Form-selectValue-color);
|
||||
--TreeSelect-popover-bg: #fff;
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
&-icon {
|
||||
margin-right: px2rem(2px);
|
||||
min-width: var(--gap-xs);
|
||||
vertical-align: inherit !important;
|
||||
}
|
||||
|
||||
&-item {
|
||||
@ -36,7 +37,7 @@
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
transition: transform var(--animation-duration) ease;
|
||||
|
||||
|
||||
> svg {
|
||||
width: px2rem(10px);
|
||||
height: px2rem(10px);
|
||||
@ -49,7 +50,7 @@
|
||||
color: var(--Breadcrumb-item-hover-color);
|
||||
}
|
||||
|
||||
&.is-opened &-default{
|
||||
&.is-opened &-default {
|
||||
color: var(--Breadcrumb-item-hover-color);
|
||||
}
|
||||
}
|
||||
@ -70,7 +71,8 @@
|
||||
background: var(--DropDown-menu-bg);
|
||||
list-style: none;
|
||||
padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX);
|
||||
border: var(--DropDown-menu-borderWidth) solid var(--DropDown-menu-borderColor);
|
||||
border: var(--DropDown-menu-borderWidth) solid
|
||||
var(--DropDown-menu-borderColor);
|
||||
border-radius: var(--DropDown-menu-borderRadius);
|
||||
box-shadow: var(--DropDown-menu-boxShadow);
|
||||
min-width: 100%;
|
||||
@ -79,7 +81,8 @@
|
||||
}
|
||||
|
||||
&-dropdown > li {
|
||||
padding: var(--BreadcrumbDropdown-item-paddingX) var(--BreadcrumbDropdown-item-paddingY);
|
||||
padding: var(--BreadcrumbDropdown-item-paddingX)
|
||||
var(--BreadcrumbDropdown-item-paddingY);
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
padding-left: px2rem(12px);
|
||||
|
||||
@ -6,6 +6,10 @@
|
||||
> .#{$ns}Button {
|
||||
position: relative;
|
||||
flex: 0 1 auto;
|
||||
max-width: px2rem(140px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> .#{$ns}Button {
|
||||
|
||||
@ -41,6 +41,9 @@
|
||||
td.rdtActive {
|
||||
background: transparent;
|
||||
color: var(--Calendar-color);
|
||||
> span {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
td.rdtActive:hover{
|
||||
background: var(--Calendar-cell-onHover-bg);
|
||||
@ -289,6 +292,9 @@
|
||||
.rdtBetween {
|
||||
background: var(--Calendar-cell-onBetween-bg) !important;
|
||||
color: var(--Button--primary-bg);
|
||||
&::after {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
.rdtRangeStart,
|
||||
.rdtRangeStart:hover,
|
||||
@ -310,6 +316,13 @@
|
||||
.rdtRangeEnd:hover {
|
||||
background: linear-gradient(to right, var(--Calendar-cell-onBetween-bg) 0%, var(--Calendar-cell-onBetween-bg) 50%, transparent 51%, transparent 100%) !important;
|
||||
}
|
||||
|
||||
.rdtToday {
|
||||
border: none;
|
||||
.calendar-wrap {
|
||||
border: 1px solid #2468F2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-calendar-header {
|
||||
|
||||
@ -1,4 +1,17 @@
|
||||
.#{$ns}CollapseGroup {
|
||||
|
||||
.#{$ns}Collapse {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.#{$ns}Collapse:first-child {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.#{$ns}Collapse:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
.#{$ns}Collapse:not(:last-child) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
border: var(--Collapse-border);
|
||||
padding: 0;
|
||||
line-height: px2rem(20px);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
&-header {
|
||||
font-size: var(--Collapse-header-fontSize);
|
||||
@ -39,7 +41,7 @@
|
||||
width: px2rem(6px);
|
||||
height: px2rem(6px);
|
||||
top: px2rem(-2px);
|
||||
border-color: var(--text-color);
|
||||
border-color: #84868C;
|
||||
border-style: solid;
|
||||
border-width: px2rem(1px) px2rem(1px) 0 0;
|
||||
transform: rotate(45deg);
|
||||
|
||||
@ -19,8 +19,6 @@
|
||||
background-clip: padding-box;
|
||||
outline: 0;
|
||||
z-index: 2;
|
||||
border: var(--Drawer-content-borderWidth) solid
|
||||
var(--Drawer-content-borderColor);
|
||||
border-radius: var(--Drawer-content-borderRadius);
|
||||
transition: transform ease-in-out var(--animation-duration);
|
||||
}
|
||||
@ -63,8 +61,9 @@
|
||||
text-decoration: none;
|
||||
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: px2rem(2px);
|
||||
width: var(--Drawer-close-size);
|
||||
height: var(--Drawer-close-size);
|
||||
fill: var(--Drawer-close-color);
|
||||
}
|
||||
|
||||
@ -118,13 +117,6 @@
|
||||
|
||||
&.#{$ns}Drawer--noOverlay {
|
||||
pointer-events: none;
|
||||
|
||||
.#{$ns}Drawer-close svg {
|
||||
margin-top: px2rem(2px);
|
||||
width: var(--gap-md);
|
||||
height: var(--gap-md);
|
||||
fill: #99a6ad;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Drawer-resizeCtrl {
|
||||
@ -181,20 +173,13 @@
|
||||
}
|
||||
|
||||
.#{$ns}Drawer--top {
|
||||
.#{$ns}Drawer-close {
|
||||
top: 100%;
|
||||
margin-top: var(--gap-sm);
|
||||
left: var(--gap-sm);
|
||||
}
|
||||
|
||||
&.#{$ns}Drawer--noOverlay {
|
||||
.#{$ns}Drawer-close {
|
||||
top: var(--gap-base);
|
||||
right: var(--gap-base);
|
||||
left: auto;
|
||||
margin-top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.#{$ns}Drawer-close {
|
||||
top: var(--gap-base);
|
||||
right: var(--gap-base);
|
||||
left: auto;
|
||||
margin-top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.#{$ns}Drawer-content {
|
||||
@ -219,18 +204,10 @@
|
||||
|
||||
.#{$ns}Drawer--right {
|
||||
.#{$ns}Drawer-close {
|
||||
right: 100%;
|
||||
margin-right: var(--gap-sm);
|
||||
top: var(--gap-sm);
|
||||
}
|
||||
|
||||
&.#{$ns}Drawer--noOverlay {
|
||||
.#{$ns}Drawer-close {
|
||||
top: var(--gap-base);
|
||||
right: var(--gap-base);
|
||||
margin-right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
top: var(--gap-md);
|
||||
right: var(--gap-md);
|
||||
margin-right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.#{$ns}Drawer-content {
|
||||
@ -276,20 +253,13 @@
|
||||
}
|
||||
|
||||
.#{$ns}Drawer--bottom {
|
||||
.#{$ns}Drawer-close {
|
||||
bottom: 100%;
|
||||
margin-bottom: var(--gap-sm);
|
||||
left: var(--gap-sm);
|
||||
}
|
||||
|
||||
&.#{$ns}Drawer--noOverlay {
|
||||
.#{$ns}Drawer-close {
|
||||
top: var(--gap-base);
|
||||
right: var(--gap-base);
|
||||
left: auto;
|
||||
margin-bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.#{$ns}Drawer-close {
|
||||
top: var(--gap-base);
|
||||
right: var(--gap-base);
|
||||
left: auto;
|
||||
margin-bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.#{$ns}Drawer-content {
|
||||
@ -313,19 +283,12 @@
|
||||
}
|
||||
|
||||
.#{$ns}Drawer--left {
|
||||
.#{$ns}Drawer-close {
|
||||
left: 100%;
|
||||
margin-left: var(--gap-sm);
|
||||
top: var(--gap-sm);
|
||||
}
|
||||
|
||||
&.#{$ns}Drawer--noOverlay {
|
||||
.#{$ns}Drawer-close {
|
||||
left: auto;
|
||||
right: var(--gap-base);
|
||||
top: var(--gap-base);
|
||||
z-index: 10;
|
||||
}
|
||||
.#{$ns}Drawer-close {
|
||||
left: auto;
|
||||
right: var(--gap-base);
|
||||
top: var(--gap-base);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.#{$ns}Drawer-content {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.#{$ns}Icon {
|
||||
height: var(--fontSizeBase);
|
||||
height: var(--fontSizeMd);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -2,14 +2,21 @@
|
||||
color: var(--QuickEdit-iconColor);
|
||||
margin-left: var(--gap-xs);
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
vertical-align: text-bottom;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
font-size: 0;
|
||||
|
||||
&:hover {
|
||||
color: var(--QuickEdit-onHover-iconColor);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> svg {
|
||||
width: var(--QuickEdit-iconSize);
|
||||
height: var(--QuickEdit-iconSize);
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Field--quickEditable {
|
||||
|
||||
@ -45,10 +45,22 @@
|
||||
background: var(--Form-input-onDisabled-bg);
|
||||
border-color: var(--Form-input-onDisabled-borderColor);
|
||||
pointer-events: none;
|
||||
background: var(--TabsTransfer-title-bg);
|
||||
|
||||
div.#{$ns}ResultBox-value {
|
||||
background: var(--TabsTransfer-border-color);
|
||||
|
||||
.#{$ns}ResultBox-valueLabel {
|
||||
color: var(--Pagination-light-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$ns}NestedSelect {
|
||||
padding-left: var(--gap-base);
|
||||
}
|
||||
|
||||
&-singleValue {
|
||||
padding: 0 calc(var(--Form-input-paddingX) - #{px2rem(3px)});
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
@ -63,15 +75,17 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: transform var(--animation-duration) ease;
|
||||
transform: rotate(90deg);
|
||||
> svg {
|
||||
width: px2rem(10px);
|
||||
height: px2rem(10px);
|
||||
top: 0.125em;
|
||||
color: var(--default-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-opened &-pc-arrow {
|
||||
transform: rotate(180deg);
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
&-clear {
|
||||
@ -116,12 +130,13 @@
|
||||
flex-wrap: nowrap;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 2px 3px;
|
||||
margin-right: var(--gap-xs);
|
||||
margin-bottom: px2rem(2px);
|
||||
user-select: none;
|
||||
|
||||
> a {
|
||||
cursor: pointer;
|
||||
margin-left: var(--gap-xs);
|
||||
margin-left: px2rem(10px);
|
||||
color: var(--ResultBox-icon-color);
|
||||
&:hover {
|
||||
color: var(--ResultBox-icon--onHover-color);
|
||||
@ -153,7 +168,6 @@
|
||||
&-placeholder {
|
||||
color: var(--Form-input-placeholderColor);
|
||||
user-select: none;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
> input {
|
||||
@ -162,7 +176,19 @@
|
||||
}
|
||||
|
||||
&.#{$ns}TransferDropDown {
|
||||
padding: 0;
|
||||
padding: 0 var(--gap-base);
|
||||
|
||||
&.is-group {
|
||||
padding: var(--gap-xs);
|
||||
|
||||
> .#{$ns}TransferDropDown-icon {
|
||||
margin-right: var(--gap-sm);
|
||||
}
|
||||
|
||||
> .#{$ns}ResultBox-placeholder {
|
||||
padding-left: var(--gap-sm);
|
||||
}
|
||||
}
|
||||
|
||||
> .#{$ns}ResultBox-value {
|
||||
background: var(--Form-select-value-bgColor);
|
||||
|
||||
@ -10,11 +10,12 @@
|
||||
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
padding: 0 8px;
|
||||
padding-left: 8px;
|
||||
|
||||
transition: all var(--animation-duration) ease-in-out;
|
||||
border: var(--Form-input-borderWidth) solid transparent;
|
||||
border-radius: var(--Form-input-borderRadius);
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: var(--Form-input-onHover-bg);
|
||||
@ -27,13 +28,38 @@
|
||||
> input {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--SearchBox-hover-color);
|
||||
}
|
||||
|
||||
&.is-focused {
|
||||
border-color: var(--SearchBox-focus-color);
|
||||
}
|
||||
}
|
||||
|
||||
&-searchBtn {
|
||||
display: flex;
|
||||
width: var(--SearchBox-height);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&-activeBtn,
|
||||
&-cancelBtn {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&-activeBtn,
|
||||
&-searchBtn,
|
||||
&-cancelBtn {
|
||||
cursor: pointer;
|
||||
color: var(--icon-color);
|
||||
color: var(--SearchBox-search-icon-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--icon-onHover-color);
|
||||
@ -47,6 +73,19 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
background-color: var(--SearchBox-disabled-color);
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--Form-input-borderColor);
|
||||
}
|
||||
|
||||
> input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
> input {
|
||||
outline: none;
|
||||
border: none;
|
||||
@ -62,5 +101,38 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-clearable {
|
||||
display: flex;
|
||||
width: var(--SearchBox-clearable-icon-size);
|
||||
height: var(--SearchBox-clearable-icon-size);
|
||||
color: var(--SearchBox-clearable-icon-color);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--Form-input-clearBtn-color-onHover);
|
||||
}
|
||||
}
|
||||
|
||||
height: 30px;
|
||||
|
||||
&--enhance.is-active &-searchBtn {
|
||||
height: 100%;
|
||||
color: var(--SearchBox-enhonce-icon-color);
|
||||
background: var(--SearchBox-hover-color);
|
||||
}
|
||||
|
||||
&--enhance &-clearable {
|
||||
margin-right: var(--SearchBox-enhonce-clearable-gap);
|
||||
}
|
||||
|
||||
&--enhance.is-active.is-disabled &-searchBtn {
|
||||
background: var(--SearchBox-enhonce-disabled-color);
|
||||
color: var(--SearchBox-enhonce-disabled-search-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -134,6 +134,13 @@
|
||||
vertical-align: middle !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-empty-icon.icon {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: var(--Table-empty-icon-size);
|
||||
height: var(--Table-empty-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
&-searchableForm {
|
||||
@ -231,7 +238,7 @@
|
||||
background: var(--Table-bg);
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
border: var(--Table-borderWidth) solid var(--Table-borderColor);
|
||||
border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor);
|
||||
|
||||
& th,
|
||||
& td {
|
||||
@ -549,6 +556,7 @@
|
||||
cursor: move;
|
||||
> svg {
|
||||
vertical-align: middle;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -583,25 +591,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
> thead > tr > th.#{$ns}TableCell--sortable {
|
||||
padding-right: calc(
|
||||
var(--TableCell-paddingX) + var(--TableCell-sortBtn-width)
|
||||
);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> thead > tr > th.#{$ns}TableCell--searchable {
|
||||
padding-right: calc(
|
||||
var(--TableCell-paddingX) + var(--TableCell-searchBtn-width)
|
||||
);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> thead > tr > th.#{$ns}TableCell--sortable,
|
||||
> thead > tr > th.#{$ns}TableCell--searchable,
|
||||
> thead > tr > th.#{$ns}TableCell--filterable {
|
||||
padding-right: calc(
|
||||
var(--TableCell-paddingX) + var(--TableCell-filterBtn-width)
|
||||
);
|
||||
position: relative;
|
||||
> .#{$ns}TableCell--title {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&Cell-sortBtn,
|
||||
&Cell-searchBtn,
|
||||
&Cell-filterBtn {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding-left: var(--gap-sm);
|
||||
|
||||
&:hover {
|
||||
color: var(--TableCell-searchBtn--onActive-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -609,20 +616,11 @@
|
||||
cursor: pointer;
|
||||
width: var(--TableCell-sortBtn-width);
|
||||
height: var(--gap-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: calc(var(--TableCell-paddingX) - var(--TableCell-sortBtn-width) / 2);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--icon-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--icon-onHover-color);
|
||||
}
|
||||
|
||||
&--up > svg,
|
||||
&--down > svg,
|
||||
&--default > svg {
|
||||
@ -648,7 +646,7 @@
|
||||
&.is-active {
|
||||
color: var(--text--muted-color);
|
||||
&:hover {
|
||||
color: var(--text-color);
|
||||
color: var(--TableCell-searchBtn--onActive-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -662,11 +660,6 @@
|
||||
|
||||
&Cell-searchBtn {
|
||||
cursor: pointer;
|
||||
// width: var(--TableCell-searchBtn-width);
|
||||
position: absolute;
|
||||
right: var(--gap-xs);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text--muted-color);
|
||||
|
||||
svg.icon {
|
||||
@ -695,12 +688,6 @@
|
||||
&Cell-filterBtn {
|
||||
cursor: pointer;
|
||||
width: var(--TableCell-filterBtn-width);
|
||||
position: absolute;
|
||||
right: calc(
|
||||
var(--TableCell-paddingX) - var(--TableCell-filterBtn-width) / 2
|
||||
);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text--muted-color);
|
||||
|
||||
svg.icon {
|
||||
@ -708,10 +695,6 @@
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: var(--TableCell-filterBtn--onActive-color);
|
||||
}
|
||||
|
||||
@ -151,6 +151,7 @@
|
||||
|
||||
.#{$ns}Tabs-link-close-icon {
|
||||
width: var(--Tabs-close-size);
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -79,6 +79,7 @@
|
||||
opacity: var(--Toast-opacity);
|
||||
opacity: 0;
|
||||
transform: translateZ(0);
|
||||
width: px2rem(400px);
|
||||
|
||||
&.in,
|
||||
&.out {
|
||||
@ -239,6 +240,7 @@
|
||||
justify-content: center;
|
||||
padding: var(--gap-base) var(--gap-md);
|
||||
text-align: center;
|
||||
width: auto;
|
||||
|
||||
&-title {
|
||||
color: #fff;
|
||||
|
||||
@ -16,6 +16,12 @@
|
||||
// box-shadow: 0 0 px2rem(1px) var(--Checkbox-onHover-color) inset;
|
||||
}
|
||||
|
||||
&.#{$ns}Checkbox--checkbox.#{$ns}Checkbox--button {
|
||||
> i + span {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
@ -27,10 +33,10 @@
|
||||
|
||||
+ span {
|
||||
pointer-events: all;
|
||||
margin-left: var(--Checkbox-gap);
|
||||
margin-left: var(--gap-sm);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
vertical-align: baseline;
|
||||
|
||||
> a {
|
||||
// float: right;
|
||||
@ -84,7 +90,6 @@
|
||||
&:before {
|
||||
width: var(--Checkbox-inner-size);
|
||||
height: calc(var(--Checkbox-inner-size) / 2);
|
||||
background: var(--Checkbox-onDisabled-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,6 +106,20 @@
|
||||
border-radius: var(--Checkbox-borderRadius);
|
||||
margin-left: calc(var(--Checkbox-size) * -1);
|
||||
}
|
||||
|
||||
&.#{$ns}Checkbox {
|
||||
&:hover {
|
||||
& > i:before {
|
||||
background: var(--Button--primary-onHover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
& > i:before {
|
||||
background: var(--Switch-checked-onHover-bgColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--full.#{$ns}Checkbox--checkbox {
|
||||
@ -108,6 +127,30 @@
|
||||
border-color: var(--Checkbox-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
input:checked + i {
|
||||
background: var(--Button--primary-onHover-bg);
|
||||
|
||||
&:before {
|
||||
background: var(--Button--primary-onHover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
& > i:before {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
input:checked + i {
|
||||
background: var(--Switch-checked-onHover-bgColor);
|
||||
|
||||
&:before {
|
||||
background: var(--Switch-checked-onHover-bgColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked + i {
|
||||
border-color: var(--Checkbox-onHover-color);
|
||||
@ -122,7 +165,7 @@
|
||||
|
||||
&[disabled] + i {
|
||||
border-color: var(--Checkbox-onDisabled-color);
|
||||
background: var(--Checkbox-onDisabled-bg);
|
||||
background: var(--FileControl-onDisabled-bg);
|
||||
}
|
||||
|
||||
&[disabled]:checked + i {
|
||||
@ -133,7 +176,12 @@
|
||||
|
||||
&:checked[disabled] + i {
|
||||
border-color: var(--Checkbox-onDisabled-color);
|
||||
background: var(--Checkbox-onDisabled-bg);
|
||||
background: var(--FileControl-onDisabled-bg);
|
||||
|
||||
&:before {
|
||||
background: var(--FileControl-onDisabled-bg);
|
||||
border-color: var(--Checkbox-inner-onDisabled-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -212,6 +260,20 @@
|
||||
color: var(--Checkbox-onHover-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
input:checked + i {
|
||||
background: transparent;
|
||||
border-color: var(--Button--primary-onHover-bg) transparent transparent var(--Button--primary-onHover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
input:checked + i {
|
||||
background: transparent;
|
||||
border-color: var(--Switch-checked-onHover-bgColor) transparent transparent var(--Switch-checked-onHover-bgColor);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked + i {
|
||||
background: transparent;
|
||||
@ -264,12 +326,23 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&--button--checked.#{$ns}Checkbox--checkbox {
|
||||
&--button--checked.#{$ns}Checkbox--checkbox.#{$ns}Checkbox--button {
|
||||
border-color: var(--Checkbox-onHover-color);
|
||||
color: var(--Checkbox-onHover-color);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--menu-active-color);
|
||||
color: var(--menu-active-color);
|
||||
}
|
||||
&:active {
|
||||
border-color: var(--Switch-checked-onHover-bgColor);
|
||||
color: var(--Switch-checked-onHover-bgColor);
|
||||
}
|
||||
}
|
||||
&--button--disabled--unchecked.#{$ns}Checkbox--checkbox {
|
||||
background: var(--Checkbox-disabled-unchecked-bg);
|
||||
&--button--disabled--unchecked.#{$ns}Checkbox--checkbox.#{$ns}Checkbox--full {
|
||||
i {
|
||||
background: var(--FileControl-onDisabled-bg);
|
||||
}
|
||||
}
|
||||
&--radio {
|
||||
padding-left: var(--Radio-size);
|
||||
@ -317,6 +390,19 @@
|
||||
margin-top: px2rem(-2px);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.#{$ns}Checkbox--button--disabled--unchecked.#{$ns}Checkbox--full{
|
||||
background: none;
|
||||
|
||||
i {
|
||||
background: var(--FileControl-onDisabled-bg);
|
||||
border: 1px solid var(--menu-border-color);
|
||||
|
||||
&:before {
|
||||
background: var(--Checkbox-inner-onDisabled-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--sm {
|
||||
@ -381,6 +467,16 @@
|
||||
|
||||
.#{$ns}Checkbox--button {
|
||||
margin-bottom: 0;
|
||||
|
||||
&--disabled--unchecked {
|
||||
background: var(--FileControl-onDisabled-bg);
|
||||
}
|
||||
|
||||
&-checked {
|
||||
&:active {
|
||||
border-color: var(--Switch-checked-onHover-bgColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-inline .#{$ns}Checkbox {
|
||||
|
||||
@ -13,6 +13,10 @@
|
||||
min-width: var(--DateRangePicker-minWidth);
|
||||
@include input-border();
|
||||
|
||||
.#{$ns}DateRangePicker-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(.is-disabled) {
|
||||
cursor: pointer;
|
||||
|
||||
@ -20,8 +24,12 @@
|
||||
background: var(--DatePicker-onHover-bg);
|
||||
border-color: var(--DatePicker-onHover-borderColor);
|
||||
|
||||
.#{$ns}DateRangePicker-toggler {
|
||||
color: var(--DatePicker-onHover-iconColor);
|
||||
.#{$ns}DateRangePicker-clear {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.#{$ns}DateRangePicker-clear + .#{$ns}DateRangePicker-toggler {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -73,26 +81,11 @@
|
||||
&-toggler {
|
||||
@include input-clear();
|
||||
line-height: 1;
|
||||
|
||||
svg {
|
||||
polyline,
|
||||
circle {
|
||||
stroke: var(--DatePicker-iconColor);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
polyline,
|
||||
circle {
|
||||
stroke: var(--DatePicker-onHover-iconColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-clear {
|
||||
@include input-clear();
|
||||
line-height: 1;
|
||||
margin-right: var(--gap-xs);
|
||||
}
|
||||
}
|
||||
|
||||
@ -121,16 +114,24 @@
|
||||
.#{$ns}DateRangePicker-rangers {
|
||||
// margin: 0 0 var(--gap-sm);
|
||||
margin: 0;
|
||||
padding: 10px 0 0 10px;
|
||||
padding-left: px2rem(10px);
|
||||
list-style: none;
|
||||
background: #F7F7F9;
|
||||
line-height: px2rem(32px);
|
||||
}
|
||||
|
||||
.#{$ns}DateRangePicker-ranger {
|
||||
display: inline-block;
|
||||
margin-right: var(--gap-sm);
|
||||
margin-right: px2rem(32px);
|
||||
font-size: var(--fontSizeSm);
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: var(--DatePicker-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--DatePicker-header-onHover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -147,11 +148,11 @@
|
||||
|
||||
.#{$ns}DateRangeControl {
|
||||
&.is-date > .#{$ns}DateRangePicker {
|
||||
min-width: calc(var(--DateRangePicker-minWidth) + var(--fontSizeLg) * 5.5);
|
||||
min-width: calc(var(--DateRangePicker-minWidth) + var(--fontSizeLg) * 10);
|
||||
}
|
||||
|
||||
&.is-datetime > .#{$ns}DateRangePicker {
|
||||
min-width: calc(var(--DateRangePicker-minWidth) + var(--fontSizeLg) * 11);
|
||||
min-width: calc(var(--DateRangePicker-minWidth) + var(--fontSizeLg) * 10);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -26,6 +26,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}DatePicker-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include input-border();
|
||||
|
||||
&:not(.is-disabled) {
|
||||
@ -35,8 +39,12 @@
|
||||
background: var(--DatePicker-onHover-bg);
|
||||
border-color: var(--DatePicker-onHover-borderColor);
|
||||
|
||||
.#{$ns}DatePicker-toggler:before {
|
||||
color: var(--DatePicker-onHover-iconColor);
|
||||
.#{$ns}DatePicker-clear {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.#{$ns}DatePicker-clear + .#{$ns}DatePicker-toggler {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -72,26 +80,11 @@
|
||||
&-toggler {
|
||||
@include input-clear();
|
||||
line-height: 1;
|
||||
|
||||
svg {
|
||||
polyline,
|
||||
circle {
|
||||
stroke: var(--DatePicker-iconColor);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
polyline,
|
||||
circle {
|
||||
stroke: var(--DatePicker-onHover-iconColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-clear {
|
||||
@include input-clear();
|
||||
line-height: 1;
|
||||
margin-right: var(--gap-xs);
|
||||
}
|
||||
}
|
||||
|
||||
@ -112,23 +105,16 @@
|
||||
|
||||
.#{$ns}DatePicker-shortcuts {
|
||||
margin: 0;
|
||||
padding: calc(
|
||||
(
|
||||
var(--Calendar-shortcuts-height) - var(--Calendar-fontSize) *
|
||||
var(--lineHeightBase)
|
||||
) / 2
|
||||
)
|
||||
var(--gap-sm);
|
||||
padding-left: px2rem(10px);
|
||||
list-style: none;
|
||||
|
||||
& + .rdt .rdtPicker {
|
||||
padding-top: 0;
|
||||
}
|
||||
background: #F7F7F9;
|
||||
line-height: px2rem(32px);
|
||||
}
|
||||
|
||||
.#{$ns}DatePicker-shortcut {
|
||||
display: inline-block;
|
||||
margin-right: var(--gap-sm);
|
||||
margin-right: px2rem(32px);
|
||||
font-size: var(--fontSizeSm);
|
||||
|
||||
a {
|
||||
font-size: var(--Calendar-fontSize);
|
||||
@ -200,18 +186,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// override third-party styles
|
||||
.rdtTime {
|
||||
// width: #{px2rem(393px)};
|
||||
}
|
||||
|
||||
.rdtTimeWithS {
|
||||
// width: #{px2rem(472px)};
|
||||
}
|
||||
|
||||
.rdtTimeWithoutD {
|
||||
}
|
||||
|
||||
.rdt {
|
||||
user-select: none;
|
||||
font-size: var(--Calendar-fontSize);
|
||||
@ -256,6 +230,9 @@
|
||||
.rdtPickerTimeWithoutD {
|
||||
width: 100%;
|
||||
// height: #{px2rem(240px)};
|
||||
.TimeContentWrapper {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.rdtPicker {
|
||||
@ -294,14 +271,34 @@
|
||||
border-bottom-color: var(--Calendar-cell-bg);
|
||||
}
|
||||
|
||||
.rdtDisabled.rdtToday,
|
||||
.rdtOld.rdtToday,
|
||||
.rdtNew.rdtToday {
|
||||
>span {
|
||||
border-color: #E8E9EB;
|
||||
}
|
||||
}
|
||||
|
||||
td.rdtActive,
|
||||
td.rdtActive:hover {
|
||||
background: var(--Calendar-cell-onActive-bg);
|
||||
> span {
|
||||
background: var(--Calendar-cell-onActive-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.rdtActive.rdtToday {
|
||||
color: #151b26;
|
||||
> span {
|
||||
background: transparent;
|
||||
border-color: #144BCC;
|
||||
}
|
||||
}
|
||||
|
||||
td.rdtDisabled,
|
||||
td.rdtDisabled:hover {
|
||||
background: var(--Calendar-cell-onDisabled-bg);
|
||||
> span {
|
||||
background: var(--Calendar-cell-onDisabled-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -315,10 +312,6 @@
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
tbody {
|
||||
height: #{px2rem(194px)};
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border-top: 0;
|
||||
|
||||
@ -383,6 +376,21 @@
|
||||
border-bottom: 1px solid var(--Calendar-input-borderColor);
|
||||
}
|
||||
|
||||
.#{$ns}TimeFooterWrapper {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
|
||||
.#{$ns}Button {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}CalendarInput {
|
||||
outline: none;
|
||||
width: #{px2rem(56px)};
|
||||
@ -525,7 +533,7 @@
|
||||
cursor: pointer !important;
|
||||
width: var(--gap-md);
|
||||
padding: 0;
|
||||
color: #999;
|
||||
color: var(--DatePicker-arrow-color);
|
||||
font-size: var(--fontSizeXl);
|
||||
text-decoration: none;
|
||||
font-family: auto;
|
||||
@ -533,17 +541,22 @@
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
color: var(--DatePicker-color);
|
||||
}
|
||||
}
|
||||
|
||||
.rdtCenter {
|
||||
color: var(--DatePicker-color);
|
||||
}
|
||||
|
||||
.rdtSwitch {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
color: var(--DatePicker-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--link-onHover-color);
|
||||
color: var(--DatePicker-header-onHover-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -555,6 +568,7 @@
|
||||
border-bottom: 1px solid var(--Calendar-input-borderColor);
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
margin-top: -8px;
|
||||
|
||||
> * {
|
||||
display: table-cell;
|
||||
@ -570,39 +584,44 @@
|
||||
td.rdtMonth,
|
||||
td.rdtYear,
|
||||
td.rdtQuarter {
|
||||
width: px2rem(50px);
|
||||
height: px2rem(40px);
|
||||
|
||||
> span {
|
||||
height: px2rem(24px);
|
||||
display: block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.rdtBetween {
|
||||
background: transparent !important;
|
||||
|
||||
> span {
|
||||
background: var(--Calendar-cell-onBetween-bg);
|
||||
}
|
||||
background: var(--Calendar-cell-onBetween-bg);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.rdtActive {
|
||||
background: transparent !important;
|
||||
&.rdtActive,
|
||||
&.rdtActive:hover {
|
||||
background: transparent;
|
||||
|
||||
> span {
|
||||
background: var(--info);
|
||||
background: var(--info) !important;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
&.rdtDisabled {
|
||||
background: transparent !important;
|
||||
&.rdtDisabled,
|
||||
&.rdtDisabled:hover {
|
||||
background: var(--Calendar-cell-onDisabled-bg);
|
||||
color: #B8BABF;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
> span {
|
||||
background: #edf1f2;
|
||||
color: #999;
|
||||
}
|
||||
.#{$ns}DateRangePicker-start {
|
||||
.rdtPicker .rdtActive.rdtBetween {
|
||||
background: linear-gradient(to right, transparent 0%, transparent 50%, var(--Calendar-cell-onBetween-bg) 51%, var(--Calendar-cell-onBetween-bg) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.#{$ns}DateRangePicker-end {
|
||||
.rdtPicker .rdtActive.rdtBetween {
|
||||
background: linear-gradient(to right, var(--Calendar-cell-onBetween-bg) 0%, var(--Calendar-cell-onBetween-bg) 50%, transparent 51%, transparent 100%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -116,11 +116,11 @@
|
||||
}
|
||||
|
||||
&-clear {
|
||||
float: right;
|
||||
color: var(--FileControl-icon-color);
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: var(--gap-xs);
|
||||
&:hover {
|
||||
color: var(--FileControl-icon-onHover-color);
|
||||
}
|
||||
@ -203,6 +203,17 @@
|
||||
background: var(--white);
|
||||
cursor: pointer;
|
||||
|
||||
&-click {
|
||||
color: var(--Spinner-color);
|
||||
}
|
||||
|
||||
&-help {
|
||||
a {
|
||||
color: var(--FileControl-icon-color);
|
||||
font-size: var(--fontSizeSm);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--info);
|
||||
}
|
||||
|
||||
@ -71,6 +71,7 @@
|
||||
margin: var(--Form-input-marginBottom) 0 0;
|
||||
padding-left: var(--gap-base);
|
||||
font-size: var(--fontSizeSm);
|
||||
position: var(--Form-feedback-position);
|
||||
}
|
||||
|
||||
.#{$ns}Form-description {
|
||||
@ -92,6 +93,9 @@
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
.#{$ns}Form-feedback {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Grid-form > &:last-child {
|
||||
@ -293,6 +297,13 @@
|
||||
min-height: 1px;
|
||||
}
|
||||
}
|
||||
.#{$ns}Form-itemColumn--align-left {
|
||||
text-align: left;
|
||||
}
|
||||
.#{$ns}Form-itemColumn--align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--inline {
|
||||
|
||||
@ -37,6 +37,10 @@
|
||||
margin-bottom: px2rem(8px);
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: var(--ImageControl-addBtn-upload-color);
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
pointer-events: none;
|
||||
border: px2rem(1px) solid var(--ImageControl-addBtn-onDisabled-border);
|
||||
@ -67,13 +71,23 @@
|
||||
}
|
||||
|
||||
&-dropzone:focus &-addBtn {
|
||||
border-color: var(--ImageControl-addBtn-onHover-border);
|
||||
background: var(--ImageControl-addBtn-onHover-bg);
|
||||
color: var(--ImageControl-addBtn-onHover-color) !important;
|
||||
}
|
||||
|
||||
&-dropzone:hover &-addBtn {
|
||||
border-color: var(--ImageControl-addBtn-onHover-border);
|
||||
background: var(--ImageControl-addBtn-onHover-bg);
|
||||
color: var(--ImageControl-addBtn-onHover-color);
|
||||
border-color: var(--ImageControl-addBtn-onHover-border);
|
||||
&-text {
|
||||
color: var(--ImageControl-addBtn-onHover-color);
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
border: var(--borderWidth) solid var(--borderColor);
|
||||
// border: var(--borderWidth) solid var(--borderColor);
|
||||
border-radius: var(--ImageControl-addBtn-borderRadius);
|
||||
vertical-align: top;
|
||||
padding: var(--gap-xs);
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
width: px2rem(12px);
|
||||
height: px2rem(12px);
|
||||
fill: var(--Form-input-iconColor);
|
||||
color: var(--default-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,7 +39,8 @@
|
||||
|
||||
&-menu {
|
||||
width: px2rem(160px);
|
||||
height: px2rem(175px); // 高度写死，否则有可能会上下闪动
|
||||
min-height: px2rem(32px);
|
||||
max-height: px2rem(175px);
|
||||
background: var(--Form-select-menu-bg);
|
||||
color: var(--Form-select-menu-color);
|
||||
border: var(--Form-select-outer-borderWidth) solid
|
||||
@ -62,6 +64,8 @@
|
||||
> .#{$ns}NestedSelect-optionLabel {
|
||||
flex: 1;
|
||||
height: px2rem(32px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&.is-disabled {
|
||||
cursor: not-allowed;
|
||||
color: var(--text--muted-color);
|
||||
|
||||
@ -43,6 +43,19 @@
|
||||
box-shadow: var(--Form-select-onFocus-boxShadow);
|
||||
}
|
||||
|
||||
.#{$ns}PopOver.#{$ns}Select-popover {
|
||||
.#{$ns}Select-menu {
|
||||
.#{$ns}Select-option {
|
||||
height: px2rem(32px);
|
||||
line-height: px2rem(22px);
|
||||
}
|
||||
.#{$ns}Select-addBtn {
|
||||
height: px2rem(32px);
|
||||
line-height: px2rem(30px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include input-border();
|
||||
|
||||
&-valueWrap {
|
||||
@ -87,6 +100,7 @@
|
||||
&--multi {
|
||||
height: auto;
|
||||
min-height: var(--Form-selectOption-height);
|
||||
padding: var(--gap-xs) 0 var(--gap-xs) var(--gap-xs);
|
||||
|
||||
.#{$ns}Select-valueWrap {
|
||||
> input {
|
||||
@ -94,6 +108,10 @@
|
||||
width: px2rem(100px);
|
||||
margin-bottom: var(--gap-xs);
|
||||
}
|
||||
|
||||
.#{$ns}Select-placeholder {
|
||||
margin-left: var(--gap-sm);
|
||||
}
|
||||
}
|
||||
.#{$ns}Select-values + .#{$ns}Select-input {
|
||||
transform: translateY(0);
|
||||
@ -147,6 +165,11 @@
|
||||
cursor: not-allowed;
|
||||
background: var(--Form-selectValue-onDisable-bg);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: px2rem(10px);
|
||||
height: px2rem(10px);
|
||||
}
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
@ -159,6 +182,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
transform: rotate(90deg);
|
||||
|
||||
> svg {
|
||||
transition: transform var(--animation-duration);
|
||||
|
||||
@ -44,14 +44,11 @@
|
||||
max-height: px2rem(300px);
|
||||
overflow: auto;
|
||||
user-select: none;
|
||||
|
||||
&-group:not(:first-child) > &-itemLabel {
|
||||
border-top: px2rem(1px) solid var(--ListMenu-divider-color);
|
||||
}
|
||||
padding: var(--gap-xs) 0;
|
||||
|
||||
&-group > &-itemLabel {
|
||||
padding: var(--gap-xs) var(--gap-base);
|
||||
color: var(--text--muted-color);
|
||||
color: var(--FileControl-icon-color);
|
||||
}
|
||||
|
||||
&-item {
|
||||
@ -75,12 +72,15 @@
|
||||
user-select: none;
|
||||
|
||||
&.is-active {
|
||||
color: var(--Form-select-menu-onActive-color);
|
||||
background: var(--Form-select-menu-onActive-bg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--Tree-item-onHover-bg);
|
||||
|
||||
i {
|
||||
border: 1px solid var(--menu-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
@ -199,6 +199,10 @@
|
||||
pointer-events: none;
|
||||
color: var(--text--muted-color);
|
||||
}
|
||||
|
||||
.#{$ns}TreeSelection-itemLabel {
|
||||
margin-left: var(--gap-xs);
|
||||
}
|
||||
}
|
||||
|
||||
&-itemLabel {
|
||||
@ -342,4 +346,4 @@
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -197,6 +197,10 @@
|
||||
color: var(--Form-select-menu-onHover-color);
|
||||
background: var(--Form-select-menu-onHover-bg);
|
||||
}
|
||||
|
||||
.is-matched {
|
||||
color: var(--Form-select-menu-onActive-color);
|
||||
}
|
||||
}
|
||||
|
||||
&-value {
|
||||
@ -239,25 +243,29 @@
|
||||
var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
|
||||
);
|
||||
font-size: var(--Form-selectValue-fontSize);
|
||||
color: var(--Form-selectValue-color);
|
||||
background: var(--Form-selectValue-bg);
|
||||
border: px2rem(1px) solid var(--Form-selectValue-borderColor);
|
||||
background: var(--Form-select-multiple-bgColor);
|
||||
border-radius: px2rem(2px);
|
||||
margin: 2px 3px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 var(--gap-sm);
|
||||
}
|
||||
|
||||
&-valueIcon {
|
||||
&-valueIcon.icon-close {
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
|
||||
padding: 1px 5px;
|
||||
|
||||
&:hover {
|
||||
background: var(--Form-selectValue-onHover-bg);
|
||||
}
|
||||
margin-left: var(--gap-sm);
|
||||
width: px2rem(10px);
|
||||
color: var(--default-icon-color);
|
||||
}
|
||||
|
||||
&-input--multiple &-valueLabel {
|
||||
padding: 0 var(--gap-xs);
|
||||
line-height: var(--gap-xl);
|
||||
max-width: px2rem(60px);
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-counter {
|
||||
@ -274,6 +282,22 @@
|
||||
border-color: var(--Form-input-onHover-borderColor);
|
||||
}
|
||||
}
|
||||
|
||||
&-revealPassword {
|
||||
font-size: 0;
|
||||
|
||||
.icon {
|
||||
width: var(--Form-input-password-icon-size);
|
||||
height: var(--Form-input-password-icon-size);
|
||||
color: var(--Form-input-password-icon-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 特殊处理 input-password。否则 form 内联模式，icon 会换行
|
||||
input.#{$ns}TextControl-input-password {
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.#{$ns}TextControl.is-disabled {
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
width: 100%;
|
||||
line-height: var(--Form-input-lineHeight);
|
||||
outline: none;
|
||||
resize: none;
|
||||
resize: vertical;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--Form-input-placeholderColor);
|
||||
@ -35,12 +35,10 @@
|
||||
font-size: var(--fontSizeSm);
|
||||
padding: 0 5px;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #84868c;
|
||||
|
||||
&.is-empty {
|
||||
color: #666;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
color: #84868c;
|
||||
}
|
||||
|
||||
&.is-clearable {
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
&-select > .#{$ns}ChainedSelection {
|
||||
min-height: unset;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
.#{$ns}ChainedSelection-col {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
@ -276,9 +276,12 @@
|
||||
}
|
||||
|
||||
.#{$ns}TransferDropDown {
|
||||
&:hover {
|
||||
border: px2rem(1px) solid ver(--menu-active-color);
|
||||
}
|
||||
&-icon {
|
||||
transition: transform var(--animation-duration) ease-out;
|
||||
margin: 5px 5px 5px auto;
|
||||
margin: px2rem(5px) 0 px2rem(5px) auto;
|
||||
display: flex;
|
||||
color: var(--Form-select-caret-iconColor);
|
||||
&:hover {
|
||||
@ -293,7 +296,7 @@
|
||||
}
|
||||
|
||||
&.is-active &-icon {
|
||||
transform: rotate(180deg);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
.#{$ns}TransferDropDown-content {
|
||||
@ -301,6 +304,7 @@
|
||||
min-width: px2rem(400px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--gap-xs) 0;
|
||||
|
||||
&.is-mobile {
|
||||
width: 100%;
|
||||
|
||||
@ -235,11 +235,10 @@
|
||||
display: block;
|
||||
transition: transform var(--animation-duration);
|
||||
top: 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&.is-folded > svg {
|
||||
transform: rotate(0deg);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
.rdtPicker {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
width: 240px;
|
||||
padding: 4px;
|
||||
margin-top: 1px;
|
||||
z-index: 99999 !important;
|
||||
@ -31,14 +31,35 @@
|
||||
.rdtPicker table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0 12px;
|
||||
border-spacing: 0 8px;
|
||||
}
|
||||
|
||||
.rdtMonths,
|
||||
.rdtYears {
|
||||
table {
|
||||
border-spacing: 0 12px;
|
||||
}
|
||||
.headerTable {
|
||||
border-spacing: 0;
|
||||
border-bottom: 1px solid #E8E9EB;
|
||||
}
|
||||
}
|
||||
.rdtPicker td,
|
||||
.rdtPicker th {
|
||||
text-align: center;
|
||||
height: 28px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
.rdtPicker td {
|
||||
cursor: pointer;
|
||||
> span {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
height: 100%;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
.rdtPicker td.rdtDay:hover,
|
||||
.rdtPicker td.rdtHour:hover,
|
||||
@ -50,20 +71,13 @@
|
||||
}
|
||||
.rdtPicker td.rdtOld,
|
||||
.rdtPicker td.rdtNew {
|
||||
color: #999999;
|
||||
color: #B8BABF;
|
||||
}
|
||||
.rdtPicker td.rdtToday {
|
||||
position: relative;
|
||||
}
|
||||
.rdtPicker td.rdtToday:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border-left: 7px solid transparent;
|
||||
border-bottom: 7px solid #428bca;
|
||||
border-top-color: rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
> span {
|
||||
border: 1px solid #2468F2;
|
||||
}
|
||||
}
|
||||
.rdtPicker td.rdtActive,
|
||||
.rdtPicker td.rdtActive:hover {
|
||||
@ -77,18 +91,21 @@
|
||||
.rdtPicker td.rdtDisabled,
|
||||
.rdtPicker td.rdtDisabled:hover {
|
||||
background: none;
|
||||
color: #999999;
|
||||
color: #B8BABF;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.rdtPicker td span.rdtOld {
|
||||
color: #999999;
|
||||
color: #B8BABF;
|
||||
}
|
||||
.rdtPicker td span.rdtDisabled,
|
||||
.rdtPicker td span.rdtDisabled:hover {
|
||||
background: none;
|
||||
color: #999999;
|
||||
color: #B8BABF;
|
||||
cursor: not-allowed;
|
||||
> span {
|
||||
border-color: #E8E9EB;
|
||||
}
|
||||
}
|
||||
.rdtPicker th {
|
||||
border-bottom: 1px solid #f9f9f9;
|
||||
@ -100,11 +117,15 @@
|
||||
}
|
||||
.rdtPicker th.rdtSwitch {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.rdtPicker th.rdtNext,
|
||||
.rdtPicker th.rdtPrev {
|
||||
font-size: 21px;
|
||||
vertical-align: top;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.rdtPrev span,
|
||||
@ -121,7 +142,7 @@
|
||||
.rdtPicker th.rdtDisabled,
|
||||
.rdtPicker th.rdtDisabled:hover {
|
||||
background: none;
|
||||
color: #999999;
|
||||
color: #B8BABF;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.rdtPicker thead tr:first-of-type th {
|
||||
@ -150,13 +171,21 @@
|
||||
}
|
||||
|
||||
td.rdtMonth,
|
||||
td.rdtYear {
|
||||
height: 50px;
|
||||
width: 25%;
|
||||
td.rdtYear,
|
||||
td.rdtQuarter {
|
||||
height: 24px;
|
||||
width: 48px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
> span {
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
td.rdtMonth:hover,
|
||||
td.rdtYear:hover {
|
||||
td.rdtYear:hover,
|
||||
td.rdtQuarter:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
|
||||
@ -76,6 +76,13 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
|
||||
0px 1px 10px 0px rgba(8, 14, 26, 0.05), 0px 2px 4px -1px rgba(8, 14, 26, 0.04);
|
||||
|
||||
:root {
|
||||
--fontSizeXs: #{$T1};
|
||||
--fontSizeSm: #{$T2};
|
||||
--fontSizeMd: #{$T3};
|
||||
--fontSizeLg: #{$T4};
|
||||
--fontSizeXl: #{$T5};
|
||||
--fontSizeBase: var(--fontSizeSm);
|
||||
|
||||
--borderColor: #{$G8};
|
||||
--borderRadius: #{$R3};
|
||||
--body-bg: #ffffff;
|
||||
@ -118,10 +125,10 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
|
||||
--Page-title-color: #000;
|
||||
--Page-header-paddingX: var(--gap-md);
|
||||
--Page-header-paddingY: #{px2rem(10px)};
|
||||
|
||||
--Form-item-fontSize: var(--fontSizeBase);
|
||||
--Form-input-marginBottom: #{px2rem(4px)};
|
||||
--Form-item-fontColor: #{$G4};
|
||||
--Form-item-gap: var(--gap-base);
|
||||
--Form-item-gap: var(--gap-xl);
|
||||
--Form-input-bg: #{$G11};
|
||||
--Form-input-color: #{$G2};
|
||||
--Form-input-height: #{px2rem(32px)};
|
||||
@ -152,6 +159,8 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
|
||||
--Form-input-clearBtn-color: #{$G7};
|
||||
--Form-input-clearBtn-color-onHover: #{$G4};
|
||||
--Form-input-clearBtn-color-onActive: #{$G3};
|
||||
--Form-input-password-icon-size: #{px2rem(16px)};
|
||||
--Form-input-password-icon-color: #{$G5};
|
||||
|
||||
--Form-select-borderWidth: #{px2rem(1px)};
|
||||
--Form-select-borderRadius: #{$R3};
|
||||
@ -176,6 +185,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
|
||||
--Form-selectValue-color: var(--primary);
|
||||
--Form-select-value-borderColor: #{$G9};
|
||||
--Form-select-valueIcon-color: #{$G4};
|
||||
--Form-select-multiple-bgColor: #{$G10};
|
||||
|
||||
--InputGroup-select-borderWidth: #{px2rem(1px)};
|
||||
--InputGroup-select-onFocused-bg: #eaf6fe;
|
||||
@ -214,7 +224,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
|
||||
--Checkbox--sm-inner-size: #{px2rem(8px)};
|
||||
--Checkbox--sm--full-inner-size: #{px2rem(8px)};
|
||||
--Radio-size: #{px2rem(16px)};
|
||||
--Radio-inner-size: #{px2rem(10px)};
|
||||
--Radio-inner-size: #{px2rem(8px)};
|
||||
|
||||
--Switch-height: #{px2rem(20px)};
|
||||
--Switch-width: #{px2rem(44px)};
|
||||
@ -385,6 +395,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
|
||||
--Table-onChecked-onHover-bg: #f5f5f5;
|
||||
--Table-onChecked-onHover-borderColor: #eceff8;
|
||||
--Table-onChecked-onHover-color: #666;
|
||||
--Table-expandBtn-color: #{$G5};
|
||||
--TableCell-paddingX: #{px2rem(10px)};
|
||||
|
||||
--TableCell-sortBtn-width: #{px2rem(14px)};
|
||||
@ -422,7 +433,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
|
||||
--ImageControl-addBtn-bg: #fff;
|
||||
--ImageControl-addBtn-border: #dbdbdb;
|
||||
--ImageControl-addBtn-borderRadius: #{$R3};
|
||||
--ImageControl-addBtn-color: #666;
|
||||
--ImageControl-addBtn-color: #84868c;
|
||||
--ImageControl-addBtn-onHover-bg: var(--ImageControl-addBtn-bg);
|
||||
--ImageControl-addBtn-onHover-border: var(--primary);
|
||||
--ImageControl-addBtn-onHover-color: var(--primary);
|
||||
@ -448,7 +459,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
|
||||
// Modal
|
||||
--Modal-title-fontSize: #{$T3};
|
||||
--Modal-title-color: #{$W3};
|
||||
--Modal-title-fontWeight: #{$G2};
|
||||
--Modal-title-fontWeight: #{$W3};
|
||||
--Modal-overlay-bg: rgba(0, 0, 0, 0.7);
|
||||
--Modal-content-borderWidth: 0;
|
||||
--Modal-content-borderRadius: 0;
|
||||
@ -567,7 +578,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
|
||||
--Alert--warning-borderColor: transparent;
|
||||
|
||||
// Toast size
|
||||
--Toast-width: #{px2rem(300px)};
|
||||
--Toast-width: #{px2rem(400px)};
|
||||
--Toast-borderRadius: #{$R3};
|
||||
--Toast-paddingL: #{px2rem(26px)};
|
||||
--Toast-paddingX: #{px2rem(16px)};
|
||||
@ -632,7 +643,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
|
||||
--ListItem-onChecked-borderColor: #0052cc;
|
||||
--ListItem-onChecked-fieldLabel-color: #0052cc;
|
||||
|
||||
--Transfer-title-bg: var(--Table-thead-bg);
|
||||
--Transfer-title-bg: #f7f7f9;
|
||||
|
||||
--Satus-icon-width: #{px2rem(14px)};
|
||||
|
||||
@ -654,4 +665,23 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
|
||||
--ResultBox-value-bg: #{$G10};
|
||||
--ResultBox-value-clear-bg: #{$G8};
|
||||
--ResultBox-value-clear-hover-bg: #{$G9};
|
||||
|
||||
// SearchBox
|
||||
--SearchBox-hover-color: #{$B6};
|
||||
--SearchBox-focus-color: #{$B7};
|
||||
--SearchBox-search-icon-color: #{$G5};
|
||||
--SearchBox-enhonce-icon-color: #{$G11};
|
||||
--SearchBox-clearable-icon-color: #{$G7};
|
||||
--SearchBox-clearable-icon-size: #{px2rem(16px)};
|
||||
--SearchBox-height: #{px2rem(30px)};
|
||||
--SearchBox-disabled-color: #{$G10};
|
||||
--SearchBox-enhonce-disabled-color: #{$G9};
|
||||
--SearchBox-enhonce-disabled-search-color: #{$G6};
|
||||
--SearchBox-enhonce-clearable-gap: #{$R4};
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
:root {
|
||||
--fontSizeBase: var(--fontSizeLg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,6 +14,8 @@
|
||||
width: calc(var(--Switch-height) - #{px2rem(4px)});
|
||||
top: px2rem(2px);
|
||||
bottom: px2rem(2px);
|
||||
left: px2rem(2px);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
@ -29,7 +31,10 @@
|
||||
background: var(--Switch-checked-bgColor);
|
||||
|
||||
.slider::before {
|
||||
right: px2rem(2px);
|
||||
right: auto;
|
||||
left: calc(
|
||||
100% - (var(--Switch-height) - #{px2rem(4px)}) - #{px2rem(2px)}
|
||||
);
|
||||
}
|
||||
|
||||
.text {
|
||||
@ -40,6 +45,11 @@
|
||||
}
|
||||
&:active {
|
||||
background: var(--Switch-checked-onActive-bgColor);
|
||||
.slider::before {
|
||||
left: calc(
|
||||
100% - (var(--Switch-height) + #{px2rem(2px)}) - #{px2rem(2px)}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -60,6 +70,14 @@
|
||||
// height: var(--Form-input-height);
|
||||
line-height: 1.1;
|
||||
padding: px2rem(5px) px2rem(12px);
|
||||
|
||||
&.is-highlight:hover > span {
|
||||
color: var(--menu-active-color);
|
||||
}
|
||||
|
||||
svg {
|
||||
color: var(--default-icon-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -162,10 +180,9 @@
|
||||
}
|
||||
|
||||
&-result {
|
||||
|
||||
>.#{$ns}Selections {
|
||||
> .#{$ns}Selections {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-table-title {
|
||||
@ -238,7 +255,7 @@
|
||||
|
||||
.#{$ns}Drawer {
|
||||
&-content {
|
||||
border-radius: #{$R4};
|
||||
border-radius: 0;
|
||||
}
|
||||
&-header {
|
||||
border-radius: #{$R4} 0 0 0;
|
||||
|
||||
@ -391,6 +391,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
|
||||
ref: this.refFn,
|
||||
render: this.renderChild,
|
||||
rootStore: rootStore,
|
||||
disabled: disable ?? rest.disabled ?? restSchema.disabled,
|
||||
dispatchEvent: this.dispatchEvent
|
||||
};
|
||||
|
||||
|
||||
@ -788,7 +788,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||
) : null}
|
||||
|
||||
<a className={cx(`DatePicker-toggler`)}>
|
||||
<Icon icon="clock" className="icon" />
|
||||
<Icon icon={viewMode === 'time' ? 'clock' : 'date'} className="icon" />
|
||||
</a>
|
||||
|
||||
{!(useMobileUI && isMobile()) && isOpened ? (
|
||||
@ -811,7 +811,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
|
||||
<Calendar
|
||||
value={date}
|
||||
onChange={this.handleChange}
|
||||
requiredConfirm={false}
|
||||
requiredConfirm={viewMode === 'time'}
|
||||
dateFormat={dateFormat}
|
||||
inputFormat={inputFormat}
|
||||
timeFormat={timeFormat}
|
||||
|
||||
@ -445,10 +445,10 @@ export class DateRangePicker extends React.Component<
|
||||
utc = false
|
||||
) {
|
||||
newValue = [
|
||||
(utc ? moment.utc(newValue.startDate) : newValue.startDate).format(
|
||||
(utc ? moment.utc(newValue.startDate) : newValue.startDate)?.format(
|
||||
format
|
||||
),
|
||||
(utc ? moment.utc(newValue.endDate) : newValue.endDate).format(format)
|
||||
(utc ? moment.utc(newValue.endDate) : newValue.endDate)?.format(format)
|
||||
];
|
||||
|
||||
if (joinValues) {
|
||||
@ -672,9 +672,9 @@ export class DateRangePicker extends React.Component<
|
||||
}
|
||||
|
||||
confirm() {
|
||||
if (!this.state.startDate || !this.state.endDate) {
|
||||
if (!this.state.startDate && !this.state.endDate) {
|
||||
return;
|
||||
} else if (this.state.startDate.isAfter(this.state.endDate)) {
|
||||
} else if (this.state.startDate?.isAfter(this.state.endDate)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -690,7 +690,11 @@ export class DateRangePicker extends React.Component<
|
||||
this.props.utc
|
||||
)
|
||||
);
|
||||
this.close();
|
||||
if (this.state.startDate && !this.state.endDate) {
|
||||
this.setState({editState: 'end'});
|
||||
} else {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
||||
filterDate(
|
||||
@ -1143,7 +1147,7 @@ export class DateRangePicker extends React.Component<
|
||||
props.className += ' rdtBetween';
|
||||
}
|
||||
|
||||
return <td {...props}>{currentDate.date()}</td>;
|
||||
return <td {...props}><span>{currentDate.date()}</span></td>;
|
||||
}
|
||||
|
||||
renderMonth(props: any, month: number, year: number, date: any) {
|
||||
@ -1222,12 +1226,15 @@ export class DateRangePicker extends React.Component<
|
||||
} = this.props;
|
||||
const __ = this.props.translate;
|
||||
|
||||
const {startDate, endDate} = this.state;
|
||||
const {startDate, endDate, editState} = this.state;
|
||||
|
||||
// timeRange需要单独选择范围
|
||||
const isTimeRange = type === 'input-datetime-range' || viewMode === 'time';
|
||||
|
||||
return (
|
||||
<div className={`${ns}DateRangePicker-wrap`} ref={this.calendarRef}>
|
||||
{this.renderRanges(ranges)}
|
||||
<Calendar
|
||||
{(!isTimeRange || editState === 'start' && !embed) && <Calendar
|
||||
className={`${ns}DateRangePicker-start`}
|
||||
value={startDate}
|
||||
// 区分的原因是 time-range 左侧就只能选起始时间，而其它都能在左侧同时同时选择起始和结束
|
||||
@ -1253,8 +1260,8 @@ export class DateRangePicker extends React.Component<
|
||||
renderYear={this.renderYear}
|
||||
locale={locale}
|
||||
timeRangeHeader="开始时间"
|
||||
/>
|
||||
<Calendar
|
||||
/>}
|
||||
{(!isTimeRange || editState === 'end' && !embed) && <Calendar
|
||||
className={`${ns}DateRangePicker-end`}
|
||||
value={endDate}
|
||||
onChange={
|
||||
@ -1280,7 +1287,7 @@ export class DateRangePicker extends React.Component<
|
||||
renderYear={this.renderYear}
|
||||
locale={locale}
|
||||
timeRangeHeader="结束时间"
|
||||
/>
|
||||
/>}
|
||||
|
||||
{embed ? null : (
|
||||
<div key="button" className={`${ns}DateRangePicker-actions`}>
|
||||
@ -1290,8 +1297,8 @@ export class DateRangePicker extends React.Component<
|
||||
<a
|
||||
className={cx('Button', 'Button--primary', 'm-l-sm', {
|
||||
'is-disabled':
|
||||
!this.state.startDate ||
|
||||
!this.state.endDate ||
|
||||
(!this.state.startDate && isTimeRange && editState === 'start') ||
|
||||
(!this.state.endDate && isTimeRange && editState === 'end') ||
|
||||
this.state.endDate?.isBefore(this.state.startDate)
|
||||
})}
|
||||
onClick={this.confirm}
|
||||
@ -1417,7 +1424,7 @@ export class DateRangePicker extends React.Component<
|
||||
value={this.state.startInputValue || ''}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<span className={cx('DateRangePicker-input-separator')}>~</span>
|
||||
<span className={cx('DateRangePicker-input-separator')}>-</span>
|
||||
<Input
|
||||
className={cx('DateRangePicker-input', {
|
||||
isActive: this.state.editState === 'end'
|
||||
@ -1438,7 +1445,7 @@ export class DateRangePicker extends React.Component<
|
||||
) : null}
|
||||
|
||||
<a className={`${ns}DateRangePicker-toggler`}>
|
||||
<Icon icon="clock" className="icon" />
|
||||
<Icon icon={viewMode === 'time' ? 'clock' : 'date'} className="icon" />
|
||||
</a>
|
||||
|
||||
{isOpened ? (
|
||||
|
||||
@ -135,6 +135,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
|
||||
'is-clickable': onResultClick,
|
||||
'is-clearable': clearable,
|
||||
'is-mobile': mobileUI,
|
||||
'is-group': Array.isArray(result),
|
||||
[`ResultBox--border${ucFirst(borderMode)}`]: borderMode
|
||||
})}
|
||||
onClick={onResultClick}
|
||||
@ -149,11 +150,9 @@ export class ResultBox extends React.Component<ResultBoxProps> {
|
||||
<span className={cx('ResultBox-valueLabel')}>
|
||||
{itemRender(item)}
|
||||
</span>
|
||||
{!disabled ? (
|
||||
<a data-index={index} onClick={this.removeItem}>
|
||||
<Icon icon="close" className="icon" />
|
||||
</a>
|
||||
) : null}
|
||||
<a data-index={index} onClick={this.removeItem}>
|
||||
<Icon icon="close" className="icon" />
|
||||
</a>
|
||||
</div>
|
||||
))
|
||||
) : result && !Array.isArray(result) ? (
|
||||
@ -201,7 +200,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
|
||||
) : null}
|
||||
{hasDropDownArrow && !mobileUI && (
|
||||
<span className={cx('ResultBox-pc-arrow')}>
|
||||
<Icon icon="caret" className="icon" />
|
||||
<Icon icon="right-arrow-bold" className="icon" />
|
||||
</span>
|
||||
)}
|
||||
{!allowInput && mobileUI ? (
|
||||
|
||||
@ -10,6 +10,8 @@ export interface SearchBoxProps extends ThemeProps, LocaleProps {
|
||||
name?: string;
|
||||
disabled?: boolean;
|
||||
mini?: boolean;
|
||||
enhance?: boolean;
|
||||
clearable?: boolean;
|
||||
searchImediately?: boolean;
|
||||
onChange?: (text: string) => void;
|
||||
placeholder?: string;
|
||||
@ -22,13 +24,23 @@ export interface SearchBoxProps extends ThemeProps, LocaleProps {
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
export class SearchBox extends React.Component<SearchBoxProps> {
|
||||
export interface SearchBoxState {
|
||||
isFocused: boolean;
|
||||
}
|
||||
|
||||
export class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
|
||||
inputRef: React.RefObject<HTMLInputElement> = React.createRef();
|
||||
static defaultProps = {
|
||||
mini: true,
|
||||
enhance: false,
|
||||
clearable: false,
|
||||
searchImediately: true
|
||||
};
|
||||
|
||||
state = {
|
||||
isFocused: false
|
||||
};
|
||||
|
||||
lazyEmitSearch = debounce(
|
||||
() => {
|
||||
const onSearch = this.props.onSearch;
|
||||
@ -81,6 +93,13 @@ export class SearchBox extends React.Component<SearchBoxProps> {
|
||||
}
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleClear() {
|
||||
const {searchImediately, onChange} = this.props;
|
||||
onChange?.('');
|
||||
searchImediately && this.lazyEmitSearch();
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
classnames: cx,
|
||||
@ -90,17 +109,23 @@ export class SearchBox extends React.Component<SearchBoxProps> {
|
||||
disabled,
|
||||
placeholder,
|
||||
mini,
|
||||
enhance,
|
||||
clearable,
|
||||
value,
|
||||
translate: __
|
||||
} = this.props;
|
||||
|
||||
const isFocused = this.state.isFocused;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
'SearchBox',
|
||||
enhance && 'SearchBox--enhance',
|
||||
className,
|
||||
disabled ? 'is-disabled' : '',
|
||||
!mini || active ? 'is-active' : ''
|
||||
isFocused ? 'is-focused' : '',
|
||||
!mini || active ? 'is-active' : '',
|
||||
)}
|
||||
>
|
||||
<input
|
||||
@ -111,9 +136,19 @@ export class SearchBox extends React.Component<SearchBoxProps> {
|
||||
placeholder={__(placeholder || 'placeholder.enter')}
|
||||
ref={this.inputRef}
|
||||
autoComplete="off"
|
||||
onFocus={() => this.setState({ isFocused: true })}
|
||||
onBlur={() => this.setState({ isFocused: false })}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
/>
|
||||
|
||||
{
|
||||
!mini && clearable && value && !disabled ? (
|
||||
<div className={cx('SearchBox-clearable')} onClick={this.handleClear}>
|
||||
<Icon icon="input-clear" className="icon"/>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
||||
{!mini ? (
|
||||
<a className={cx('SearchBox-searchBtn')} onClick={this.handleSearch}>
|
||||
<Icon icon="search" className="icon" />
|
||||
|
||||
@ -778,7 +778,10 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
||||
})}
|
||||
onClick={this.removeItem.bind(this, index)}
|
||||
>
|
||||
×
|
||||
<Icon
|
||||
icon="close"
|
||||
className="icon"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
@ -884,7 +887,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
||||
{removable ? (
|
||||
<a data-tooltip={__('Select.clear')} data-position="left">
|
||||
<Icon
|
||||
icon="minus"
|
||||
icon="close"
|
||||
className="icon"
|
||||
onClick={(e: any) => this.handleDeleteClick(e, item)}
|
||||
/>
|
||||
@ -1181,7 +1184,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
||||
) : null}
|
||||
|
||||
<span className={cx('Select-arrow')}>
|
||||
<Icon icon="caret" className="icon" />
|
||||
<Icon icon="right-arrow-bold" className="icon" />
|
||||
</span>
|
||||
{isOpen ? this.renderOuter(options) : null}
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
import React from 'react';
|
||||
import {intersectionWith, differenceWith, includes, debounce, result} from 'lodash';
|
||||
import {
|
||||
intersectionWith,
|
||||
differenceWith,
|
||||
includes,
|
||||
debounce,
|
||||
result
|
||||
} from 'lodash';
|
||||
|
||||
import {ThemeProps, themeable} from '../theme';
|
||||
import {BaseSelectionProps, BaseSelection, ItemRenderStates} from './Selection';
|
||||
@ -21,7 +27,7 @@ import ResultTableList from './ResultTableList';
|
||||
import ResultTreeList from './ResultTreeList';
|
||||
|
||||
export type SelectMode =
|
||||
'table'
|
||||
| 'table'
|
||||
| 'group'
|
||||
| 'list'
|
||||
| 'tree'
|
||||
@ -103,13 +109,12 @@ export interface TransferState {
|
||||
inputValue: string;
|
||||
searchResult: Options | null;
|
||||
isTreeDeferLoad: boolean;
|
||||
resultSelectMode: 'list' | 'tree' | 'table'
|
||||
resultSelectMode: 'list' | 'tree' | 'table';
|
||||
}
|
||||
|
||||
export class Transfer<
|
||||
T extends TransferProps = TransferProps
|
||||
> extends React.Component<T, TransferState> {
|
||||
|
||||
static defaultProps: Pick<
|
||||
TransferProps,
|
||||
'multiple' | 'resultListModeFollowSelect' | 'selectMode'
|
||||
@ -148,14 +153,17 @@ export class Transfer<
|
||||
|
||||
// 计算结果的selectMode
|
||||
let resultSelectMode = 'list';
|
||||
if (props.selectMode === 'tree' && props.resultListModeFollowSelect && !isTreeDeferLoad) {
|
||||
if (
|
||||
props.selectMode === 'tree' &&
|
||||
props.resultListModeFollowSelect &&
|
||||
!isTreeDeferLoad
|
||||
) {
|
||||
resultSelectMode = 'tree';
|
||||
}
|
||||
|
||||
if (props.selectMode === 'table' && props.resultListModeFollowSelect) {
|
||||
resultSelectMode = 'table';
|
||||
}
|
||||
|
||||
return {
|
||||
isTreeDeferLoad,
|
||||
resultSelectMode
|
||||
@ -616,10 +624,10 @@ export class Transfer<
|
||||
const {resultSelectMode, isTreeDeferLoad} = this.state;
|
||||
const searchable = !isTreeDeferLoad && resultSearchable;
|
||||
|
||||
const placeholder = resultSearchPlaceholder || __('Transfer.selectFromLeft');
|
||||
const placeholder =
|
||||
resultSearchPlaceholder || __('Transfer.selectFromLeft');
|
||||
|
||||
return resultSelectMode === 'table'
|
||||
? (
|
||||
return resultSelectMode === 'table' ? (
|
||||
<ResultTableList
|
||||
classnames={cx}
|
||||
columns={columns!}
|
||||
@ -633,9 +641,8 @@ export class Transfer<
|
||||
searchable={searchable}
|
||||
placeholder={placeholder}
|
||||
onSearch={onResultSearch}
|
||||
/>)
|
||||
: resultSelectMode === 'tree'
|
||||
? (
|
||||
/>
|
||||
) : resultSelectMode === 'tree' ? (
|
||||
<ResultTreeList
|
||||
classnames={cx}
|
||||
options={options}
|
||||
@ -647,7 +654,7 @@ export class Transfer<
|
||||
placeholder={placeholder}
|
||||
onSearch={onResultSearch}
|
||||
/>
|
||||
): (
|
||||
) : (
|
||||
<ResultList
|
||||
className={cx('Transfer-value')}
|
||||
sortable={sortable}
|
||||
@ -662,7 +669,8 @@ export class Transfer<
|
||||
cellRender={cellRender}
|
||||
searchable={searchable}
|
||||
onSearch={onResultSearch}
|
||||
/>);
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -710,6 +718,7 @@ export class Transfer<
|
||||
<div
|
||||
className={cx(
|
||||
'Transfer-title',
|
||||
selectMode === 'table' ? 'Transfer-title--light' : '',
|
||||
tableType ? 'Transfer-table-title' : ''
|
||||
)}
|
||||
>
|
||||
@ -729,7 +738,7 @@ export class Transfer<
|
||||
{__('clear')}
|
||||
</a>
|
||||
</div>
|
||||
{this.renderResult()}
|
||||
{this.renderResult()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -115,7 +115,7 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
|
||||
>
|
||||
{!mobileUI ? (
|
||||
<span className={cx('TransferDropDown-icon')}>
|
||||
<Icon icon="caret" className="icon" />
|
||||
<Icon icon="right-arrow-bold" className="icon" />
|
||||
</span>
|
||||
) : (
|
||||
<></>
|
||||
|
||||
@ -929,7 +929,7 @@ export class TreeSelector extends React.Component<
|
||||
'is-folded': !this.isUnfolded(item)
|
||||
})}
|
||||
>
|
||||
<Icon icon="right-arrow-bold" className="icon" />
|
||||
<Icon icon="down-arrow-bold" className="icon" />
|
||||
</div>
|
||||
) : (
|
||||
<span className={cx('Tree-itemArrowPlaceholder')} />
|
||||
|
||||
@ -461,7 +461,7 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
||||
<td {...props}>
|
||||
<div className={cx('ScheduleCalendar-large-day-wrap')}>
|
||||
<div className={cx('ScheduleCalendar-large-schedule-header')}>
|
||||
{currentDate.date()}
|
||||
<span>{currentDate.date()}</span>
|
||||
</div>
|
||||
{scheduleDiv}
|
||||
{schedule.length > 3 && (
|
||||
@ -486,13 +486,15 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
|
||||
);
|
||||
return (
|
||||
<td {...props}>
|
||||
{currentDate.date()}
|
||||
{ScheduleIcon}
|
||||
<span>
|
||||
{currentDate.date()}
|
||||
{ScheduleIcon}
|
||||
</span>
|
||||
</td>
|
||||
);
|
||||
}
|
||||
}
|
||||
return <td {...props}>{currentDate.date()}</td>;
|
||||
return <td {...props}><span>{currentDate.date()}</span></td>;
|
||||
};
|
||||
|
||||
/** 时间选择器数据源 */
|
||||
|
||||
@ -121,7 +121,7 @@ export class CustomMonthsView extends React.Component<CustomMonthsViewProps> {
|
||||
|
||||
months.push(renderer(props, i, year, date && date.clone()));
|
||||
|
||||
if (months.length === 4) {
|
||||
if (months.length === 3) {
|
||||
rows.push(React.createElement('tr', {key: i}, months));
|
||||
months = [];
|
||||
}
|
||||
@ -238,7 +238,7 @@ export class CustomMonthsView extends React.Component<CustomMonthsViewProps> {
|
||||
return (
|
||||
<div className="rdtMonths">
|
||||
{showYearHead && (
|
||||
<table>
|
||||
<table className="headerTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
|
||||
@ -40,7 +40,7 @@ interface CustomTimeViewProps extends LocaleProps {
|
||||
) => void;
|
||||
onClose?: () => void;
|
||||
onConfirm?: (value: number[], types: string[]) => void;
|
||||
setDateTimeState: (state: any) => void;
|
||||
setDateTimeState: (state: any, callback?: () => void) => void;
|
||||
useMobileUI: boolean;
|
||||
showToolbar?: boolean;
|
||||
onChange: (value: moment.Moment) => void;
|
||||
@ -560,6 +560,15 @@ export class CustomTimeView extends React.Component<
|
||||
});
|
||||
};
|
||||
|
||||
selectNowTime = () => {
|
||||
this.props.setDateTimeState({
|
||||
viewDate: moment().clone(),
|
||||
selectedDate: moment().clone()
|
||||
}, () => {
|
||||
this.confirm();
|
||||
});
|
||||
};
|
||||
|
||||
confirm = () => {
|
||||
let date = (this.props.selectedDate || this.props.viewDate).clone();
|
||||
|
||||
@ -601,6 +610,8 @@ export class CustomTimeView extends React.Component<
|
||||
timeRangeHeader
|
||||
} = this.props;
|
||||
|
||||
const __ = this.props.translate;
|
||||
|
||||
const date = selectedDate || (isEndDate ? viewDate.endOf('day') : viewDate);
|
||||
const inputs: Array<React.ReactNode> = [];
|
||||
const timeConstraints = this.timeConstraints;
|
||||
@ -696,12 +707,22 @@ export class CustomTimeView extends React.Component<
|
||||
}
|
||||
});
|
||||
inputs.length && inputs.pop();
|
||||
|
||||
const quickLists = [
|
||||
<a onClick={this.selectNowTime}>{__('TimeNow')}</a>
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<div className={cx(timeRangeHeader ? 'TimeRangeHeaderWrapper' : null)}>
|
||||
{timeRangeHeader}
|
||||
</div>
|
||||
<div>{inputs}</div>
|
||||
<div className={cx('TimeContentWrapper')}>{inputs}</div>
|
||||
{this.props.requiredConfirm && <div className={cx('TimeFooterWrapper')}>
|
||||
<div className={cx('QuickWrapper')}>{quickLists}</div>
|
||||
<a className={cx('Button', 'Button--primary', 'Button--sm')} onClick={this.confirm}>
|
||||
{__('confirm')}
|
||||
</a>
|
||||
</div>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -108,7 +108,7 @@ export class CustomYearsView extends React.Component<CustomYearsViewProps> {
|
||||
|
||||
years.push(renderer(props, year, selectedDate && selectedDate.clone()));
|
||||
|
||||
if (years.length === 4) {
|
||||
if (years.length === 3) {
|
||||
rows.push(React.createElement('tr', {key: i}, years));
|
||||
years = [];
|
||||
}
|
||||
@ -186,7 +186,7 @@ export class CustomYearsView extends React.Component<CustomYearsViewProps> {
|
||||
}
|
||||
return (
|
||||
<div className="rdtYears">
|
||||
<table>
|
||||
<table className="headerTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
|
||||
@ -48,11 +48,15 @@ import TreeDownIcon from '../icons/tree-down.svg';
|
||||
import CloudUploadIcon from '../icons/cloud-upload.svg';
|
||||
import ImageIcon from '../icons/image.svg';
|
||||
import RefreshIcon from '../icons/refresh.svg';
|
||||
import DragIcon from '../icons/drag.svg';
|
||||
import EditIcon from '../icons/edit.svg';
|
||||
import DeskEmptyIcon from '../icons/desk-empty.svg';
|
||||
|
||||
import CopyIcon from '../icons/copy.svg';
|
||||
import FilterIcon from '../icons/filter.svg';
|
||||
import CaretIcon from '../icons/caret.svg';
|
||||
import RightArrowBoldIcon from '../icons/right-arrow-bold.svg';
|
||||
import DownArrowBoldIcon from '../icons/down-arrow-bold.svg';
|
||||
import ColumnFilterIcon from '../icons/column-filter.svg';
|
||||
import ZoomInIcon from '../icons/zoom-in.svg';
|
||||
import ZoomOutIcon from '../icons/zoom-out.svg';
|
||||
@ -70,6 +74,7 @@ import SortAscIcon from '../icons/sort-asc.svg';
|
||||
import SortDescIcon from '../icons/sort-desc.svg';
|
||||
import SettingIcon from '../icons/setting.svg';
|
||||
import PlusCicleIcon from '../icons/plus-cicle.svg';
|
||||
import PlusFineIcon from '../icons/plus-fine.svg';
|
||||
import EllipsisVIcon from '../icons/ellipsis-v.svg';
|
||||
import ExpandAltIcon from '../icons/expand-alt.svg';
|
||||
import CompressAltIcon from '../icons/compress-alt.svg';
|
||||
@ -90,6 +95,8 @@ import Role from '../icons/role.svg';
|
||||
import Department from '../icons/department.svg';
|
||||
import Post from '../icons/post.svg';
|
||||
import DotIcon from '../icons/dot.svg';
|
||||
import Invisible from '../icons/invisible.svg';
|
||||
import DateIcon from '../icons/date.svg';
|
||||
|
||||
// 兼容原来的用法，后续不直接试用。
|
||||
|
||||
@ -169,6 +176,7 @@ registerIcon('filter', FilterIcon);
|
||||
registerIcon('column-filter', ColumnFilterIcon);
|
||||
registerIcon('caret', CaretIcon);
|
||||
registerIcon('right-arrow-bold', RightArrowBoldIcon);
|
||||
registerIcon('down-arrow-bold', DownArrowBoldIcon);
|
||||
registerIcon('zoom-in', ZoomInIcon);
|
||||
registerIcon('zoom-out', ZoomOutIcon);
|
||||
registerIcon('question', QuestionIcon);
|
||||
@ -206,6 +214,12 @@ registerIcon('role', Role);
|
||||
registerIcon('department', Department);
|
||||
registerIcon('post', Post);
|
||||
registerIcon('dot', DotIcon);
|
||||
registerIcon('drag', DragIcon);
|
||||
registerIcon('edit', EditIcon);
|
||||
registerIcon('desk-empty', DeskEmptyIcon);
|
||||
registerIcon('invisible', Invisible);
|
||||
registerIcon('plus-fine', PlusFineIcon);
|
||||
registerIcon('date', DateIcon);
|
||||
|
||||
export function Icon({
|
||||
icon,
|
||||
|
||||
@ -1 +1 @@
|
||||
<svg width="24px" height="24px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>ic_时间</title><g id="ic_时间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle id="1-FL" stroke="#000" cx="8" cy="8" r="6.5" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/><polyline id="2-FLW" stroke="#000" points="7.87443646 5.5 7.87443646 8.53778873 5.5 9.28133409" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/></g></svg>
|
||||
<svg width="24px" height="24px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>ic_时间</title><g id="ic_时间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle id="1-FL" stroke="#84868C" cx="8" cy="8" r="6.5" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/><polyline id="2-FLW" stroke="#84868C" points="7.87443646 5.5 7.87443646 8.53778873 5.5 9.28133409" stroke-width="1px" fill="none" stroke-linecap="butt" stroke-linejoin="round"/></g></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 566 B After Width: | Height: | Size: 572 B |
9
src/icons/date.svg
Normal file
9
src/icons/date.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="13px" height="12px" viewBox="0 0 13 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(-1.338385, -2.000000)">
|
||||
<rect x="0" y="0" width="16" height="16"></rect>
|
||||
<path d="M6,2 L6,3 L10,3 L10,2 L11,2 L11,3 L14,3 L14,14 L2,14 L2,3 L5,3 L5,2 L6,2 Z M13,7 L3,7 L3,13 L13,13 L13,7 Z M5,4 L3,4 L3,6 L13,6 L13,4 L11,4 L11,5 L10,5 L10,4 L6,4 L6,5 L5,5 L5,4 Z" fill="#84868C"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 625 B |
25
src/icons/desk-empty.svg
Normal file
25
src/icons/desk-empty.svg
Normal file
@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient x1="16.4979754%" y1="38.5280437%" x2="56.2620383%" y2="63.1848064%" id="linearGradient-1">
|
||||
<stop stop-color="#DCE0EF" offset="0%"></stop>
|
||||
<stop stop-color="#DCDFEA" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="28.8931882%" y1="55.7070718%" x2="93.8984841%" y2="48.875884%" id="linearGradient-2">
|
||||
<stop stop-color="#F1F3FA" offset="0%"></stop>
|
||||
<stop stop-color="#E8EAF0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="组织台优化" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="切图画板" transform="translate(-78.000000, -416.000000)">
|
||||
<g id="暂无数据/结果备份-2" transform="translate(78.000000, 416.000000)">
|
||||
<rect id="矩形" x="0" y="0" width="100" height="100"></rect>
|
||||
<ellipse id="椭圆形" fill="url(#linearGradient-1)" fill-rule="nonzero" cx="50" cy="60.8" rx="44.4" ry="22.8"></ellipse>
|
||||
<ellipse id="path-3" fill="url(#linearGradient-2)" fill-rule="nonzero" cx="50" cy="58.4" rx="44.4" ry="22.8"></ellipse>
|
||||
<path d="M69.3433052,42.0175272 C76.247385,46.0034899 79.4224575,53.2531227 79.4002852,61.1800089 C79.3886692,65.143452 77.9808226,67.9246181 75.7170053,69.2307527 C73.4419251,70.5143678 70.3108743,70.3116918 66.8644658,68.3299702 L34.8566948,50.8677155 C27.952615,46.8817529 22.3775425,37.2208603 22.399666,29.293974 C22.4225936,21.3670878 28.0427172,18.1805696 34.946797,22.1665323 C35.836556,22.6732225 36.6925268,23.2699909 37.5259719,23.9568376 C38.2918405,15.8610546 44.5764677,12.8209136 52.201365,17.2122284 C59.8149994,21.6035432 66.0658383,31.8837238 66.775393,40.8352501 C67.5975754,41.1054849 68.4648089,41.510837 69.3433052,42.0175272 Z" id="路径" fill="#E0E3EF" fill-rule="nonzero"></path>
|
||||
<path d="M42.92,29.6824613 C42.92,29.2351107 43.2826494,28.8724613 43.73,28.8724613 C43.8912677,28.8724613 44.0488647,28.9206 44.1826072,29.0107123 L49.0426072,32.2852555 C49.2660417,32.4357999 49.4,32.6875855 49.4,32.9570045 L49.4,41.12 L48.271,40.4049536 L49.4,41.1660576 L49.4,48.288706 C49.4,48.7360567 49.0373506,49.098706 48.59,49.098706 C48.4366236,49.098706 48.2863993,49.0551595 48.1568008,48.9731317 L43.2968008,45.8970518 C43.0622016,45.748565 42.92,45.4902682 42.92,45.2126262 L42.92,29.6824613 Z" id="形状结合" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<path d="M53.9026072,44.1307123 L58.7626072,47.4052555 C58.9860417,47.5557999 59.12,47.8075855 59.12,48.0770045 L59.12,54.768706 C59.12,55.2160567 58.7573506,55.578706 58.31,55.578706 C58.1566236,55.578706 58.0063993,55.5351595 57.8768008,55.4531317 L53.0168008,52.3770518 C52.7822016,52.228565 52.64,51.9702682 52.64,51.6926262 L52.64,44.8024613 C52.64,44.3551107 53.0026494,43.9924613 53.45,43.9924613 C53.6112677,43.9924613 53.7688647,44.0406 53.9026072,44.1307123 Z" id="矩形" fill="#F7F8FB" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
10
src/icons/down-arrow-bold.svg
Normal file
10
src/icons/down-arrow-bold.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>向下</title>
|
||||
<g id="典型页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="编组">
|
||||
<rect id="矩形" opacity="0" x="0" y="0" width="16" height="16"></rect>
|
||||
<polygon id="图标-填色" fill="#84868C" points="12.233 5 7.993 9.24 3.753 5 3.04 5.713 7.99 10.663 7.993 10.66 7.996 10.663 12.946 5.713"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 600 B |
8
src/icons/drag.svg
Normal file
8
src/icons/drag.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>拖拽</title>
|
||||
<g id="拖拽" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
|
||||
<path d="M6,12 C5.44771525,12 5,12.4477152 5,13 C5,13.5522848 5.44771525,14 6,14 C6.55228475,14 7,13.5522848 7,13 C7,12.4477152 6.55228475,12 6,12 Z M6,7 C5.44771525,7 5,7.44771525 5,8 C5,8.55228475 5.44771525,9 6,9 C6.55228475,9 7,8.55228475 7,8 C7,7.44771525 6.55228475,7 6,7 Z M6,2 C5.44771525,2 5,2.4477153 5,3 C5,3.5522847 5.44771525,4 6,4 C6.55228475,4 7,3.5522847 7,3 C7,2.4477153 6.55228475,2 6,2 Z M10,12 C9.44771525,12 9,12.4477152 9,13 C9,13.5522848 9.44771525,14 10,14 C10.5522847,14 11,13.5522848 11,13 C11,12.4477152 10.5522847,12 10,12 Z M10,7 C9.44771525,7 9,7.44771525 9,8 C9,8.55228475 9.44771525,9 10,9 C10.5522847,9 11,8.55228475 11,8 C11,7.44771525 10.5522847,7 10,7 Z M10,2 C9.44771525,2 9,2.4477153 9,3 C9,3.5522847 9.44771525,4 10,4 C10.5522847,4 11,3.5522847 11,3 C11,2.4477153 10.5522847,2 10,2 Z" id="形状" fill="#151B26"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
8
src/icons/edit.svg
Normal file
8
src/icons/edit.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编辑</title>
|
||||
<g id="编辑" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
|
||||
<path d="M8.491,1.5004 L8.491,2.5004 L2.5,2.5004 L2.5,13.5004 L13.5,13.5004 L13.5,7.5324 L14.5,7.5324 L14.5,14.5004 L1.5,14.5004 L1.5,1.5004 L8.491,1.5004 Z M13.7455,1.6217 L14.4525,2.3297 L8.0885,8.6937 L7.3815,7.9867 L13.7455,1.6217 Z" id="形状结合" fill="#151B26"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 712 B |
10
src/icons/invisible.svg
Normal file
10
src/icons/invisible.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>不可见</title>
|
||||
<g id="不可见" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
|
||||
<g id="编组">
|
||||
<rect id="矩形" stroke="none" fill="currentColor" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
|
||||
<path d="M2.91972703,5.00035128 C3.15932221,5.56062137 3.48954828,6.0784548 3.89678565,6.53485922 C4.96673844,7.73914737 6.49518581,8.43995 8.14,8.43995 C9.76664693,8.43995 11.2813058,7.75315198 12.3523764,6.57033395 C12.6920742,6.19520277 12.9803798,5.7761243 13.209327,5.32420638 L13.3395085,5.04920376 L14.2544915,5.45269624 C13.9653387,6.10839593 13.572991,6.71219666 13.0936273,7.24156203 C12.7623988,7.60734835 12.3948705,7.93285848 11.9982387,8.21395897 L12.9566,9.87395 L12.0906,10.37395 L11.1412434,8.72942071 C10.3784723,9.11337429 9.54082663,9.35086388 8.66757967,9.41933209 L8.668,10.97185 L7.668,10.97185 L7.66735222,9.42343888 C6.75745885,9.35969244 5.88560233,9.11282413 5.09602954,8.70830726 L4.1485,10.34855 L3.2825,9.84855 L4.2424457,8.18636156 C3.84593988,7.9008387 3.4793171,7.57058753 3.14992355,7.19983732 C2.73988365,6.74029373 2.39560013,6.22662333 2.12776836,5.67339306 L2.00027297,5.39354872 L2.91972703,5.00035128 Z" id="形状结合"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
10
src/icons/plus-fine.svg
Normal file
10
src/icons/plus-fine.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>加</title>
|
||||
<g id="典型页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="编组">
|
||||
<rect id="矩形" fill="#f33e3e" opacity="0" x="0" y="0" width="16" height="16"></rect>
|
||||
<path d="M8.5,2 L8.5,7.5 L14,7.5 L14,8.5 L8.5,8.5 L8.5,14 L7.5,14 L7.5,8.5 L2,8.5 L2,7.5 L7.5,7.5 L7.5,2 L8.5,2 Z" id="图标-填色" fill="currentColor" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 642 B |
@ -1,9 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12" version="1.1" p-id="1463">
|
||||
<g>
|
||||
<rect id="Rectangle-path" x="4" y="5" width="1" height="4"></rect>
|
||||
<rect id="Rectangle-path" x="7" y="5" width="1" height="4"></rect>
|
||||
<path d="M0,2 L0,3 L1,3 L1,11 L1,11.5 L1,12 L11,12 L11,11.5 L11,11 L11,3 L12,3 L12,2 L0,2 Z M10,11 L2,11 L2,3 L10,3 L10,11 Z" id="Shape"></path>
|
||||
<rect id="Rectangle-path" x="4" y="0" width="4" height="1"></rect>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>删除</title>
|
||||
<g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="编组">
|
||||
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
|
||||
<path d="M14,3.499 L14,4.5 L12.497,4.5 L12.498,14.5 L3.498,14.5 L3.497,4.5 L2,4.5 L2,3.499 L14,3.499 Z M11.498,4.5 L4.497,4.5 L4.497,13.5 L11.498,13.5 L11.498,4.5 Z M6.998,7.499 L6.998,11.499 L5.998,11.499 L5.998,7.499 L6.998,7.499 Z M9.998,7.499 L9.998,11.499 L8.998,11.499 L8.998,7.499 L9.998,7.499 Z M9.999,1.5 L9.999,2.499 L5.998,2.499 L5.998,1.5 L9.999,1.5 Z" id="形状结合" fill="currentColor" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 537 B After Width: | Height: | Size: 911 B |
@ -1,6 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="上传" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<path d="M3,10 L3,12.995 L13,12.995 L13,10 L14,10 L14,14 L13,14 L13,13.995 L3,13.995 L3,14 L2,14 L2,10 L3,10 Z M8.0259,1.9998 L11.8401458,5.8148 L11.1331458,6.5218 L8.5169,3.9048 L8.51614575,10.9998 L7.51614575,10.9998 L7.5169,3.9228 L4.89114575,6.5478 L4.18414575,5.8418 L8.0259,1.9998 Z" id="图标-填色" fill="currentColor"></path>
|
||||
<title>上传</title>
|
||||
<g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="图标-填色" fill="#151B26">
|
||||
<path d="M3,10 L3,12.995 L13,12.995 L13,10 L14,10 L14,14 L13,14 L13,13.995 L3,13.995 L3,14 L2,14 L2,10 L3,10 Z M8.0259,1.9998 L11.8401458,5.8148 L11.1331458,6.5218 L8.5169,3.9048 L8.51614575,10.9998 L7.51614575,10.9998 L7.5169,3.9228 L4.89114575,6.5478 L4.18414575,5.8418 L8.0259,1.9998 Z" fill="currentColor" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 627 B After Width: | Height: | Size: 719 B |
@ -1,7 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 10" version="1.1" p-id="1463">
|
||||
<g>
|
||||
<path d="M8,1 C11,1 13.7,3.8 14.7,5 C13.7,6.2 11,9 8,9 C5,9 2.3,6.2 1.3,5 C2.3,3.8 5,1 8,1 L8,1 Z M8,0 C3.6,0 0,5 0,5 C0,5 3.6,10 8,10 C12.4,10 16,5 16,5 C16,5 12.4,0 8,0 L8,0 Z"></path>
|
||||
<path d="M8,2 C9.7,2 11,3.3 11,5 C11,6.7 9.7,8 8,8 C6.3,8 5,6.7 5,5 C5,3.3 6.3,2 8,2 L8,2 Z M8,1 C5.8,1 4,2.8 4,5 C4,7.2 5.8,9 8,9 C10.2,9 12,7.2 12,5 C12,2.8 10.2,1 8,1 L8,1 Z"></path>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>可见</title>
|
||||
<g id="可见" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
|
||||
<g id="编组">
|
||||
<rect id="矩形" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
|
||||
<path d="M7.9999,3.0001 C11.9889,3.0001 14.9999,6.8731 14.9999,8.0001 C14.9999,8.8831 11.9889,13.0001 7.9999,13.0001 C3.9609,13.0001 0.9999,8.8831 0.9999,8.0001 C0.9999,6.8731 3.9609,3.0001 7.9999,3.0001 Z M7.9999,4.0001 C4.7329,4.0001 2.2179,7.0861 2.0089,7.9731 C2.2749,8.7711 4.7189,12.0001 7.9999,12.0001 C11.2099,12.0001 13.7339,8.7311 13.9929,7.9631 C13.8069,7.1261 11.2709,4.0001 7.9999,4.0001 Z M7.975,5.879 C9.08,5.879 9.975,6.775 9.975,7.879 C9.975,8.983 9.08,9.879 7.975,9.879 C6.871,9.879 5.975,8.983 5.975,7.879 C5.975,6.775 6.871,5.879 7.975,5.879 Z M7.975,6.879 C7.424,6.879 6.975,7.327 6.975,7.879 C6.975,8.43 7.424,8.879 7.975,8.879 C8.527,8.879 8.975,8.43 8.975,7.879 C8.975,7.327 8.527,6.879 7.975,6.879 Z" id="图标"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 547 B After Width: | Height: | Size: 1.2 KiB |
@ -120,6 +120,8 @@ register('de-DE', {
|
||||
'fetchFailed': 'Fehler beim Abrufen der API',
|
||||
'File.continueAdd': 'Hinuzufügen fortsetzen',
|
||||
'File.dragDrop': 'Dateien per Drag & Drop hier ablegen',
|
||||
'File.clickUpload': 'Klicken Sie hier zum Hochladen',
|
||||
'File.helpText': 'Hilfedokumentation',
|
||||
'File.errorRetry': 'Fehler beim Hochladen der Datei, bitte versuchen Sie es erneut.',
|
||||
'File.failed': 'Fehlerhafte Dateien',
|
||||
'File.invalidType': '{{files}} entspricht nicht Typ `{{accept}}`',
|
||||
@ -185,6 +187,7 @@ register('de-DE', {
|
||||
'Checkboxes.selectAll': 'Alle auswählen/abwählen',
|
||||
'Select.checkAll': 'Alle markieren',
|
||||
'Select.clear': 'Löschen',
|
||||
'Select.upload': 'Wieder hochladen',
|
||||
'Select.clearAll': 'Alle löschen',
|
||||
'Select.createLabel': 'Neue Option',
|
||||
'Select.placeholder': 'Auswählen',
|
||||
@ -328,5 +331,6 @@ register('de-DE', {
|
||||
'JSONSchema.default': 'Default',
|
||||
'JSONSchema.description': 'Description',
|
||||
'JSONSchema.key': 'Key',
|
||||
'JSONSchema.array_items': 'Items'
|
||||
'JSONSchema.array_items': 'Items',
|
||||
'TimeNow': 'Jetzt',
|
||||
});
|
||||
|
||||
@ -119,7 +119,9 @@ register('en-US', {
|
||||
'fetchFailed': 'Fetch api failed',
|
||||
'File.continueAdd': 'Continue add',
|
||||
'File.downloadTpl': 'Download template',
|
||||
'File.dragDrop': `Drag 'n' drop some files here or click here to upload`,
|
||||
'File.dragDrop': `Drag 'n' drop some files here or`,
|
||||
'File.clickUpload': `click here to upload`,
|
||||
'File.helpText': 'Help documentation',
|
||||
'File.errorRetry': 'File upload failed, please try again',
|
||||
'File.failed': 'Failed files.',
|
||||
'File.invalidType': '{{files}} does not match type `{{accept}}`',
|
||||
@ -187,6 +189,7 @@ register('en-US', {
|
||||
'Checkboxes.selectAll': 'Select/Deselect All',
|
||||
'Select.checkAll': 'Check all',
|
||||
'Select.clear': 'Clear',
|
||||
'Select.upload': 'Re upload',
|
||||
'Select.clearAll': 'Clear all',
|
||||
'Select.createLabel': 'New option',
|
||||
'Select.placeholder': 'Select',
|
||||
@ -331,5 +334,6 @@ register('en-US', {
|
||||
'JSONSchema.default': 'Default',
|
||||
'JSONSchema.description': 'Description',
|
||||
'JSONSchema.key': 'Key',
|
||||
'JSONSchema.array_items': 'Items'
|
||||
'JSONSchema.array_items': 'Items',
|
||||
'TimeNow': 'Now',
|
||||
});
|
||||
|
||||
@ -13,8 +13,8 @@ register('zh-CN', {
|
||||
'Calendar.end': '结束',
|
||||
'Calendar.beginAndEnd': '始/终',
|
||||
'Calendar.toast': '超出日期范围',
|
||||
'Calendar.startPick': '选择开始时间',
|
||||
'Calendar.endPick': '选择结束时间',
|
||||
'Calendar.startPick': '开始时间',
|
||||
'Calendar.endPick': '结束时间',
|
||||
'Schedule': '日程',
|
||||
'Time': '时间',
|
||||
'Content': '内容',
|
||||
@ -124,7 +124,9 @@ register('zh-CN', {
|
||||
'fetchFailed': '初始化失败',
|
||||
'File.continueAdd': '继续添加',
|
||||
'File.downloadTpl': '下载模板',
|
||||
'File.dragDrop': '将文件拖到此处，或点击上传',
|
||||
'File.dragDrop': '将文件拖到此处，或',
|
||||
'File.clickUpload': '点击上传',
|
||||
'File.helpText': '帮助文档',
|
||||
'File.errorRetry': '文件上传失败请重试',
|
||||
'File.failed': '失败文件',
|
||||
'File.invalidType': '{{files}} 不符合类型的 {{accept}} 的设定，请仔细检查',
|
||||
@ -136,7 +138,7 @@ register('zh-CN', {
|
||||
'File.retry': '重试上传',
|
||||
'File.sizeLimit': '文件大小不超过 {{maxSize}} B',
|
||||
'File.start': '开始上传',
|
||||
'File.upload': '文件上传',
|
||||
'File.upload': '上传文件',
|
||||
'File.uploadFailed': '接口返回错误，请仔细检查',
|
||||
'File.uploading': '上传中...',
|
||||
'FormItem.autoUpdateloadFaild': '接口返回错误，请仔细检查',
|
||||
@ -195,6 +197,7 @@ register('zh-CN', {
|
||||
'Checkboxes.selectAll': '全选/不选',
|
||||
'Select.checkAll': '全选',
|
||||
'Select.clear': '移除',
|
||||
'Select.upload': '重新上传',
|
||||
'Select.clearAll': '移除所有',
|
||||
'Select.createLabel': '新增选项',
|
||||
'Select.placeholder': '请选择',
|
||||
@ -340,5 +343,6 @@ register('zh-CN', {
|
||||
'JSONSchema.description': '描述',
|
||||
'JSONSchema.add_prop': '添加属性',
|
||||
'JSONSchema.array_items': '成员类型',
|
||||
'Required': '必填'
|
||||
'Required': '必填',
|
||||
'TimeNow': '此刻',
|
||||
});
|
||||
|
||||
@ -219,6 +219,16 @@ export interface FileControlSchema extends FormBaseControl {
|
||||
ready: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* 说明文档内容配置
|
||||
*/
|
||||
documentation?: string;
|
||||
|
||||
/**
|
||||
* 说明文档链接配置
|
||||
*/
|
||||
documentLink?: string;
|
||||
|
||||
/**
|
||||
* 是否为拖拽上传
|
||||
*/
|
||||
@ -1271,7 +1281,9 @@ export default class FileControl extends React.Component<FileProps, FileState> {
|
||||
render,
|
||||
downloadUrl,
|
||||
templateUrl,
|
||||
drag
|
||||
drag,
|
||||
documentation,
|
||||
documentLink,
|
||||
} = this.props;
|
||||
let {files, uploading, error} = this.state;
|
||||
const nameField = this.props.nameField || 'name';
|
||||
@ -1334,7 +1346,20 @@ export default class FileControl extends React.Component<FileProps, FileState> {
|
||||
onClick={this.handleSelect}
|
||||
>
|
||||
<Icon icon="cloud-upload" className="icon" />
|
||||
<span>{__('File.dragDrop')}</span>
|
||||
<span>
|
||||
{__('File.dragDrop')}
|
||||
<span
|
||||
className={cx('FileControl-acceptTip-click')}
|
||||
>{__('File.clickUpload')}</span>
|
||||
</span>
|
||||
<div
|
||||
className={cx('FileControl-acceptTip-help', 'TplField')}>
|
||||
{documentLink ?
|
||||
<a
|
||||
href={documentLink}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>{documentation ? documentation : __('File.helpText')}</a> : null}
|
||||
</div>
|
||||
{maxSize ? (
|
||||
<div className={cx('FileControl-sizeTip')}>
|
||||
{__('File.sizeLimit', {maxSize})}
|
||||
|
||||
@ -1432,7 +1432,7 @@ export default class ImageControl extends React.Component<
|
||||
data-position="bottom"
|
||||
onClick={this.handleRetry.bind(this, key)}
|
||||
>
|
||||
<Icon icon="refresh" className="icon" />
|
||||
<Icon icon="upload" className="icon" />
|
||||
</a>
|
||||
|
||||
{!disabled ? (
|
||||
@ -1506,7 +1506,7 @@ export default class ImageControl extends React.Component<
|
||||
thumbRatio={thumbRatio}
|
||||
overlays={
|
||||
<>
|
||||
{file.info ? (
|
||||
{/* {file.info ? (
|
||||
[
|
||||
<div key="info">
|
||||
{file.info.width} x{' '}
|
||||
@ -1522,7 +1522,7 @@ export default class ImageControl extends React.Component<
|
||||
]
|
||||
) : (
|
||||
<div>...</div>
|
||||
)}
|
||||
)} */}
|
||||
|
||||
<a
|
||||
data-tooltip={__('Image.zoomIn')}
|
||||
@ -1556,6 +1556,20 @@ export default class ImageControl extends React.Component<
|
||||
/>
|
||||
</a>
|
||||
) : null}
|
||||
|
||||
{!disabled ? (
|
||||
<a
|
||||
data-tooltip={__('Select.upload')}
|
||||
data-position="bottom"
|
||||
onClick={this.handleSelect}
|
||||
>
|
||||
<Icon
|
||||
icon="upload"
|
||||
className="icon"
|
||||
/>
|
||||
</a>
|
||||
) : null}
|
||||
|
||||
{!disabled ? (
|
||||
<a
|
||||
data-tooltip={__('Select.clear')}
|
||||
@ -1572,7 +1586,7 @@ export default class ImageControl extends React.Component<
|
||||
/>
|
||||
</a>
|
||||
) : null}
|
||||
<a
|
||||
{/* <a
|
||||
data-tooltip={
|
||||
file.name ||
|
||||
getNameFromUrl(file.value || file.url)
|
||||
@ -1581,7 +1595,7 @@ export default class ImageControl extends React.Component<
|
||||
target="_blank"
|
||||
>
|
||||
<Icon icon="info" className="icon" />
|
||||
</a>
|
||||
</a> */}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
@ -1621,8 +1635,8 @@ export default class ImageControl extends React.Component<
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Icon icon="plus" className="icon" />
|
||||
<span>{__('File.upload')}</span>
|
||||
<Icon icon="plus-fine" className="icon" />
|
||||
<span className={cx('ImageControl-addBtn-text')}>{__('File.upload')}</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
@ -670,15 +670,14 @@ export default class TextControl extends React.PureComponent<
|
||||
{selectedOptions.map((item, index) =>
|
||||
multiple ? (
|
||||
<div className={cx('TextControl-value')} key={index}>
|
||||
<span
|
||||
className={cx('TextControl-valueIcon')}
|
||||
onClick={this.removeItem.bind(this, index)}
|
||||
>
|
||||
×
|
||||
</span>
|
||||
<span className={cx('TextControl-valueLabel')}>
|
||||
{`${item[labelField || 'label']}`}
|
||||
</span>
|
||||
<Icon
|
||||
icon="close"
|
||||
className={cx('TextControl-valueIcon', 'icon')}
|
||||
onClick={this.removeItem.bind(this, index)}
|
||||
/>
|
||||
</div>
|
||||
) : (inputValue && isOpen) || creatable !== false ? null : (
|
||||
<div className={cx('TextControl-value')} key={index}>
|
||||
@ -833,6 +832,7 @@ export default class TextControl extends React.PureComponent<
|
||||
step={step}
|
||||
onChange={this.handleNormalInputChange}
|
||||
value={this.valueToString(value)}
|
||||
className={cx(type === 'password' && revealPassword && 'TextControl-input-password')}
|
||||
/>
|
||||
{clearable && !disabled && value ? (
|
||||
<a onClick={this.clearValue} className={`${ns}TextControl-clear`}>
|
||||
@ -845,9 +845,9 @@ export default class TextControl extends React.PureComponent<
|
||||
className={`${ns}TextControl-revealPassword`}
|
||||
>
|
||||
{this.state.revealPassword ? (
|
||||
<i className="fa fa-eye"></i>
|
||||
<Icon icon="view" className="icon" />
|
||||
) : (
|
||||
<i className="fa fa-eye-slash"></i>
|
||||
<Icon icon="invisible" className="icon" />
|
||||
)}
|
||||
</a>
|
||||
) : null}
|
||||
|
||||
@ -249,7 +249,7 @@ export default class NestedSelectControl extends React.Component<
|
||||
);
|
||||
})
|
||||
: label}
|
||||
{!isEnd && ' > '}
|
||||
{!isEnd && '>'}
|
||||
</span>
|
||||
);
|
||||
})
|
||||
@ -688,7 +688,7 @@ export default class NestedSelectControl extends React.Component<
|
||||
|
||||
{option.children && option.children.length ? (
|
||||
<div className={cx('NestedSelect-optionArrowRight')}>
|
||||
<Icon icon="right-arrow" className="icon" />
|
||||
<Icon icon="right-arrow-bold" className="icon"/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
@ -63,6 +63,7 @@ export interface FormSchemaHorizontal {
|
||||
right?: number;
|
||||
leftFixed?: boolean | number | 'xs' | 'sm' | 'md' | 'lg';
|
||||
justify?: boolean; // 两端对齐
|
||||
labelAlign?: 'left' | 'right'; // label对齐方式
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -554,7 +554,7 @@ export const HocQuickEdit =
|
||||
className={cx('Field-quickEditBtn')}
|
||||
onClick={this.openQuickEdit}
|
||||
>
|
||||
<Icon icon="pencil" className="icon" />
|
||||
<Icon icon="edit" className="icon" />
|
||||
</span>
|
||||
{this.state.isOpened ? this.renderPopOver() : null}
|
||||
</Component>
|
||||
|
||||
@ -167,6 +167,7 @@ class Remark extends React.Component<RemarkProps> {
|
||||
|
||||
const finalIcon = tooltip?.icon ?? icon;
|
||||
const finalLabel = tooltip?.label ?? label;
|
||||
const finalShape = tooltip?.shape ?? shape;
|
||||
const parsedTip = filterContents(tooltip || content, data);
|
||||
|
||||
// 移动端使用弹框提示
|
||||
@ -179,7 +180,7 @@ class Remark extends React.Component<RemarkProps> {
|
||||
)}
|
||||
onClick={this.showModalTip(parsedTip)}
|
||||
>
|
||||
{this.renderLabel(finalIcon, finalLabel, cx, shape)}
|
||||
{this.renderLabel(finalIcon, finalLabel, cx, finalShape)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -204,7 +205,7 @@ class Remark extends React.Component<RemarkProps> {
|
||||
(tooltip && tooltip.className) || className || `Remark--warning`
|
||||
)}
|
||||
>
|
||||
{this.renderLabel(finalIcon, finalLabel, cx, shape)}
|
||||
{this.renderLabel(finalIcon, finalLabel, cx, finalShape)}
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
);
|
||||
|
||||
@ -43,6 +43,16 @@ export interface SearchBoxSchema extends BaseSchema {
|
||||
*/
|
||||
mini?: boolean;
|
||||
|
||||
/**
|
||||
* 是否为加强样式
|
||||
*/
|
||||
enhance?: boolean;
|
||||
|
||||
/**
|
||||
* 是否可清除
|
||||
*/
|
||||
clearable?: boolean;
|
||||
|
||||
/**
|
||||
* 是否立马搜索。
|
||||
*/
|
||||
@ -70,6 +80,8 @@ export class SearchBoxRenderer extends React.Component<
|
||||
static defaultProps = {
|
||||
name: 'keywords',
|
||||
mini: false,
|
||||
enhance: false,
|
||||
clearable: false,
|
||||
searchImediately: false
|
||||
};
|
||||
|
||||
@ -113,6 +125,8 @@ export class SearchBoxRenderer extends React.Component<
|
||||
name,
|
||||
onQuery: onQuery,
|
||||
mini,
|
||||
enhance,
|
||||
clearable,
|
||||
searchImediately,
|
||||
placeholder,
|
||||
onChange,
|
||||
@ -130,6 +144,8 @@ export class SearchBoxRenderer extends React.Component<
|
||||
defaultValue={onChange ? undefined : value}
|
||||
value={value}
|
||||
mini={mini}
|
||||
enhance={enhance}
|
||||
clearable={clearable}
|
||||
searchImediately={searchImediately}
|
||||
onSearch={this.handleSearch}
|
||||
onCancel={this.handleCancel}
|
||||
|
||||
@ -387,7 +387,7 @@ export default class ColumnToggler extends React.Component<
|
||||
{enableSorting && draggable && tempColumns.length > 1 ? (
|
||||
<>
|
||||
<a className={cx('ColumnToggler-menuItem-dragBar')}>
|
||||
<Icon icon="drag-bar" className={cx('icon')} />
|
||||
<Icon icon="drag" className={cx('icon')} />
|
||||
</a>
|
||||
<span className={cx('ColumnToggler-menuItem-label')}>
|
||||
<span>{column.label || '-'}</span>
|
||||
|
||||
@ -7,6 +7,9 @@ import {LocaleProps} from '../../locale';
|
||||
import {observer} from 'mobx-react';
|
||||
import {ActionSchema} from '../Action';
|
||||
import ItemActionsWrapper from './ItemActionsWrapper';
|
||||
import {SchemaTpl, SchemaIcon} from '../../Schema';
|
||||
import {generateIcon} from '../../utils/icon';
|
||||
import {Icon} from '../../components/icons';
|
||||
|
||||
export interface TableContentProps extends LocaleProps {
|
||||
className?: string;
|
||||
@ -21,7 +24,8 @@ export interface TableContentProps extends LocaleProps {
|
||||
has: Array<any>;
|
||||
}>;
|
||||
rows: Array<IRow>;
|
||||
placeholder?: string;
|
||||
placeholder?: string | SchemaTpl;
|
||||
emptyIcon?: SchemaIcon;
|
||||
render: (region: string, node: SchemaNode, props?: any) => JSX.Element;
|
||||
onMouseMove: (event: React.MouseEvent) => void;
|
||||
onScroll: (event: React.UIEvent) => void;
|
||||
@ -123,12 +127,20 @@ export class TableContent extends React.Component<TableContentProps> {
|
||||
translate,
|
||||
itemAction,
|
||||
affixRow,
|
||||
store
|
||||
store,
|
||||
emptyIcon
|
||||
} = this.props;
|
||||
|
||||
const tableClassName = cx('Table-table', this.props.tableClassName);
|
||||
const hideHeader = columns.every(column => !column.label);
|
||||
|
||||
let iconElement = null;
|
||||
if (emptyIcon) {
|
||||
iconElement = typeof emptyIcon === 'string'
|
||||
? generateIcon(cx, emptyIcon, 'Icon')
|
||||
: render('icon', emptyIcon)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
onMouseMove={onMouseMove}
|
||||
@ -168,6 +180,22 @@ export class TableContent extends React.Component<TableContentProps> {
|
||||
<tbody>
|
||||
<tr className={cx('Table-placeholder')}>
|
||||
<td colSpan={columns.length}>
|
||||
{
|
||||
iconElement ? (
|
||||
React.cloneElement(iconElement, {
|
||||
className: cx(
|
||||
iconElement?.props?.className ?? '',
|
||||
'Table-placeholder-empty-icon',
|
||||
'icon'
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<Icon
|
||||
icon="desk-empty"
|
||||
className={cx('Table-placeholder-empty-icon', 'icon')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{render(
|
||||
'placeholder',
|
||||
translate(placeholder || 'placeholder.noData')
|
||||
|
||||
@ -42,7 +42,9 @@ import {
|
||||
SchemaClassName,
|
||||
SchemaObject,
|
||||
SchemaTokenizeableString,
|
||||
SchemaType
|
||||
SchemaType,
|
||||
SchemaTpl,
|
||||
SchemaIcon
|
||||
} from '../../Schema';
|
||||
import {SchemaPopOver} from '../PopOver';
|
||||
import {SchemaQuickEdit} from '../QuickEdit';
|
||||
@ -227,7 +229,12 @@ export interface TableSchema extends BaseSchema {
|
||||
/**
|
||||
* 占位符
|
||||
*/
|
||||
placeholder?: string;
|
||||
placeholder?: string | SchemaTpl;
|
||||
|
||||
/**
|
||||
* 无数据展示 icon
|
||||
*/
|
||||
emptyIcon?: string | SchemaIcon;
|
||||
|
||||
/**
|
||||
* 是否显示底部
|
||||
@ -1884,7 +1891,7 @@ export default class Table extends React.Component<TableProps, object> {
|
||||
'is-dragDisabled': !item.draggable
|
||||
})}
|
||||
>
|
||||
{item.draggable ? <Icon icon="drag-bar" className="icon" /> : null}
|
||||
{item.draggable ? <Icon icon="drag" className="icon" /> : null}
|
||||
</td>
|
||||
);
|
||||
} else if (column.type === '__expandme') {
|
||||
@ -1928,7 +1935,7 @@ export default class Table extends React.Component<TableProps, object> {
|
||||
onDragStart={this.handleDragStart}
|
||||
className={cx('Table-dragBtn')}
|
||||
>
|
||||
<Icon icon="drag-bar" className="icon" />
|
||||
<Icon icon="drag" className="icon" />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@ -2510,7 +2517,8 @@ export default class Table extends React.Component<TableProps, object> {
|
||||
prefixRowClassNameExpr,
|
||||
prefixRowClassName,
|
||||
autoFillHeight,
|
||||
itemActions
|
||||
itemActions,
|
||||
emptyIcon
|
||||
} = this.props;
|
||||
|
||||
// 理论上来说 store.rows 应该也行啊
|
||||
@ -2533,6 +2541,7 @@ export default class Table extends React.Component<TableProps, object> {
|
||||
columnsGroup={store.columnGroup}
|
||||
rows={store.rows}
|
||||
placeholder={placeholder}
|
||||
emptyIcon={emptyIcon}
|
||||
render={render}
|
||||
onMouseMove={this.handleMouseMove}
|
||||
onScroll={this.handleOutterScroll}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user