-
Notifications
You must be signed in to change notification settings - Fork 140
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(comp: spin): add spin component #101
Conversation
Codecov Report
@@ Coverage Diff @@
## main #101 +/- ##
==========================================
+ Coverage 94.76% 95.14% +0.37%
==========================================
Files 41 43 +2
Lines 516 556 +40
Branches 87 99 +12
==========================================
+ Hits 489 529 +40
Misses 10 10
Partials 17 17
Continue to review full report at Codecov.
|
PR 的 title 不符合规范, |
test('wrapperClassName work', async () => { | ||
const wrapper = SpinMount({ props: { wrapperClassName: 'my-spin-wrapper' } }) | ||
|
||
expect(wrapper.classes().includes('my-spin-wrapper')).toBeTruthy() |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
expect(wrapper.classes().includes('my-spin-wrapper')).toBeTruthy() | |
expect(wrapper.classes()).toContain('my-spin-wrapper') |
另外这里再补充一个 await wrapper.setProps({ wrapperClassName: '' })
的场景
@@ -0,0 +1,43 @@ | |||
<template> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.vue 文件名首字母大写
|
||
### `ix-spin` | ||
|
||
CONFIGS |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
CONFIGS | |
#### props |
|`wrapperClassName`| 组件最外包裹层class名 | `string` | `''`| `true`| | ||
| `size`| icon 和 tip大小 | `string(small \| medium \| large)` | `small`| `true`| | ||
|
||
SLOTS |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
SLOTS | |
#### slots |
|
||
CONFIGS | ||
|
||
|参数 | 说明 | 类型 | 默认值 | 是否支持全局配置| |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
|参数 | 说明 | 类型 | 默认值 | 是否支持全局配置| | |
| 参数 | 说明 | 类型 | 全局配置 | 默认值 | 备注 | |
|`spinning` | 是否显示加载遮罩层|`boolean`| `true` | `false`| | ||
| `icon`| 加载图标名称 | `string` | `loading`| `true`| | ||
| `tip`| 加载提示文字描述 | `string` | `''`| `true`| | ||
| `tipAlign`| 文字描述与加载图标的排列方式 | `string` | `vertical(vertical:文字排列在图标下方;horizontal: 文字排列在图标同水平方向的后方)`| `true`| |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| `tipAlign`| 文字描述与加载图标的排列方式 | `string` | `vertical(vertical:文字排列在图标下方;horizontal: 文字排列在图标同水平方向的后方)`| `true`| | |
| `tipAlign`| 文字描述与加载图标的排列方式 | `vertical \| horizontal ` | `vertical`| - | vertical:文字排列在图标下方;horizontal: 文字排列在图标同水平方向的后方 | |
const hasClass = props.spinning && tip.value | ||
const size = props.size ?? spinConfig.size | ||
return [ | ||
hasClass ? `ix-spin-spinner-tip-${props.tipAlign ?? spinConfig.tipAlign}` : '', | ||
hasClass && size !== 'medium' ? `ix-spin-spinner-${size}` : '', | ||
] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const hasClass = props.spinning && tip.value | |
const size = props.size ?? spinConfig.size | |
return [ | |
hasClass ? `ix-spin-spinner-tip-${props.tipAlign ?? spinConfig.tipAlign}` : '', | |
hasClass && size !== 'medium' ? `ix-spin-spinner-${size}` : '', | |
] | |
if(!props.spinning || !tip.value){ | |
return [] | |
} | |
const size = props.size ?? spinConfig.size | |
const tipAlign = props.tipAlign ?? spinConfig.tipAlign | |
return [ | |
`ix-spin-spinner-tip-${tipAlign}` , | |
size !== 'medium' ? `ix-spin-spinner-${size}` : '', | |
] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@liuzaijiang 没什么问题,层级那个你确认下是否需要修改
|
||
&-spinner { | ||
@spin-mask(); | ||
z-index: 12; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
z-index: 12
建议改为 10 整数
@liuzaijiang 感谢你的 PR, LGTM. |
fix IDuxFE#77 build: upgrade vite (IDuxFE#102) refactor(comp:all): updalte all components ts definition (IDuxFE#103) docs: update all components index.zh.md (IDuxFE#105) * docs: update gen script fix(comp: divider): dynamic slot (IDuxFE#104) fix IDuxFE#76 feat(comp: spin): add spin component (IDuxFE#101) fix IDuxFE#72 refactor(comp:core): useGlobalConfig (IDuxFE#107) fix: vite traverse filename config (IDuxFE#106) docs: update spin component demo (IDuxFE#109) fix(comp: divider): slots rerender (IDuxFE#110) refactor(comp:i18n): update useI18n to useLocale (IDuxFE#111) feat(comp: space): add component space (IDuxFE#97) fix IDuxFE#63 fix(comp:all): solot dynamic load (IDuxFE#114) fix: add engines to package.json (IDuxFE#117) yarn start error because of the low version of Node.js fix IDuxFE#116 refactor: script gen type structure (IDuxFE#118) refactor: script gen types template (IDuxFE#119) * Update the template to make it more simpler. style(scripts): add brace style eslint rule (IDuxFE#123) fix IDuxFE#122 refactor(comp:all): export type declaration from current component (IDuxFE#124) docs: contribution (IDuxFE#125) update contributing.zh and add contributing.en fix(comp: image): export type to fix vite error (IDuxFE#127) feat(cdk:forms): add useFormControl and Validtors (IDuxFE#121) * test(cdk:forms): add test fix IDuxFE#115 docs(cdk:forms): add validators docs (IDuxFE#128) re IDuxFE#115 docs: modify components' docs' type (IDuxFE#131) feat(comp: empty): add component empty (IDuxFE#132) * feat(comp:empty): update and add test fix IDuxFE#54 feat(cdk:utils): add hasOwnProperty function (IDuxFE#137) fix(comp: badge): overflowCount not work (IDuxFE#135) fix IDuxFE#134 test(comp:badge,icon): fix warning (IDuxFE#140) feat(comp: result): add result component (IDuxFE#136) fix IDuxFE#112 feat(cdk:forms): add formGroup and formArray (IDuxFE#139) * feat(cdk:forms): add test re IDuxFE#115 feat(cdk:forms): add utils (IDuxFE#141) re IDuxFE#115 refactor(cdk:forms): `modelRef` renamed to `valueRef` (IDuxFE#142) re IDuxFE#115 feat(cdk:forms): add watchValue and watchStatus (IDuxFE#143) re IDuxFE#115 refactor(cdk:forms): add dirty status and marks `valueRef` to readonly (IDuxFE#144) re IDuxFE#115 feat(cdk:forms): setValue support configuration options (IDuxFE#146) re IDuxFE#115 feat: add global types (IDuxFE#150) docs(cdk:forms): add docs and demo (IDuxFE#149) fix IDuxFE#115 refactor(cdk:forms): update typescript defintions (IDuxFE#151) * docs(cdk:forms): update docs feat(cdk: subject): add subject (IDuxFE#155) fix IDuxFE#154 feat(comp: typography): add directive typography (IDuxFE#148) * docs(comp: typography): modify docs * feat(comp: typography): add type check * feat(comp: typography): style * test(comp: typography): add test fix IDuxFE#130 feature(comp:card): 1.修改dom结构 2.补全css样式 3.重跑单测 feat(comp:card): 1.解决合并冲突 feat(comp:card): add card component
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
What is the new behavior?
Other information