feat(comp: spin): add spin component #101

liuzaijiang · 2021-01-03T02:47:03Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines
Tests for the changes have been added/updated or not needed
Docs and demo have been added/updated or not needed

PR Type

What kind of change does this PR introduce?

What is the current behavior?

What is the new behavior?

Other information

codecov · 2021-01-03T02:49:20Z

Codecov Report

Merging #101 (b1a9348) into main (0e57621) will increase coverage by 0.37%.
The diff coverage is 100.00%.

@@            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

Impacted Files	Coverage Δ
packages/components/badge/src/Badge.vue	`100.00% <ø> (ø)`
packages/components/button/src/Button.vue	`100.00% <ø> (ø)`
packages/components/icon/index.ts	`100.00% <ø> (ø)`
packages/components/icon/src/Icon.vue	`97.72% <ø> (ø)`
packages/cdk/utils/typeof.ts	`100.00% <100.00%> (ø)`
packages/cdk/utils/vNode.ts	`100.00% <100.00%> (ø)`
packages/components/core/config/useGlobalConfig.ts	`100.00% <100.00%> (ø)`
packages/components/divider/src/Divider.vue	`100.00% <100.00%> (ø)`
packages/components/image/src/Image.vue	`100.00% <100.00%> (ø)`
packages/components/image/src/ImgPreview.vue	`100.00% <100.00%> (ø)`
... and 3 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0e57621...60a3dd3. Read the comment docs.

danranVm · 2021-01-03T03:10:28Z

PR 的 title 不符合规范，
commit 需要做一下合并，使用 rebase 而不是 merge 操作
另外 lint 的 CI 挂掉了，还需要在本地执行一下 npm run lint-fix 看看是哪里不对

danranVm · 2021-01-03T05:41:58Z

packages/components/spin/__tests__/spin.spec.ts

+  test('wrapperClassName work', async () => {
+    const wrapper = SpinMount({ props: { wrapperClassName: 'my-spin-wrapper' } })
+
+    expect(wrapper.classes().includes('my-spin-wrapper')).toBeTruthy()


Suggested change

expect(wrapper.classes().includes('my-spin-wrapper')).toBeTruthy()

expect(wrapper.classes()).toContain('my-spin-wrapper')

另外这里再补充一个 await wrapper.setProps({ wrapperClassName: '' }) 的场景

danranVm · 2021-01-03T05:59:48Z

packages/components/spin/demo/Basic.vue

@@ -0,0 +1,43 @@
+<template>


.vue 文件名首字母大写

danranVm · 2021-01-03T06:00:29Z

packages/components/spin/docs/index.zh.md

+
+### `ix-spin`
+
+CONFIGS


Suggested change

CONFIGS

#### props

danranVm · 2021-01-03T06:00:46Z

packages/components/spin/docs/index.zh.md

+|`wrapperClassName`| 组件最外包裹层class名 |  `string`  | `''`| `true`|
+| `size`| icon 和 tip大小 |  `string(small \| medium \| large)`  | `small`| `true`|
+
+SLOTS


Suggested change

SLOTS

#### slots

danranVm · 2021-01-03T06:01:56Z

packages/components/spin/docs/index.zh.md

+
+CONFIGS
+
+|参数 | 说明 |  类型  | 默认值 | 是否支持全局配置|


Suggested change

|参数 | 说明 | 类型 | 默认值 | 是否支持全局配置|

| 参数 | 说明 | 类型 | 全局配置 | 默认值 | 备注 |

danranVm · 2021-01-03T06:03:43Z

packages/components/spin/docs/index.zh.md

+|`spinning` | 是否显示加载遮罩层|`boolean`| `true` | `false`|
+| `icon`| 加载图标名称 | `string` | `loading`| `true`|
+| `tip`| 加载提示文字描述 |  `string`  | `''`| `true`|
+| `tipAlign`| 文字描述与加载图标的排列方式 | `string` | `vertical(vertical：文字排列在图标下方；horizontal： 文字排列在图标同水平方向的后方)`| `true`|


danranVm · 2021-01-03T06:38:03Z

packages/components/spin/src/Spin.vue

+      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}` : '',
+      ]


Suggested change

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}` : '',

]

Usualminds

@liuzaijiang 没什么问题，层级那个你确认下是否需要修改

Usualminds · 2021-01-04T07:31:05Z

packages/components/spin/style/index.less

+
+  &-spinner {
+    @spin-mask();
+    z-index: 12;


z-index: 12 建议改为 10 整数

fix #72

danranVm · 2021-01-04T09:17:43Z

@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

danranVm requested review from danranVm and Usualminds January 3, 2021 03:20

danranVm changed the title ~~Feature/components spin~~ feat(comp: spin): add spin component Jan 3, 2021

danranVm requested changes Jan 3, 2021

View reviewed changes

Usualminds reviewed Jan 4, 2021

View reviewed changes

packages/components/spin/style/index.less Outdated

&-spinner {

@spin-mask();

z-index: 12;

Copy link

Member

Usualminds Jan 4, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

z-index: 12 建议改为 10 整数

danranVm approved these changes Jan 4, 2021

View reviewed changes

Usualminds approved these changes Jan 4, 2021

View reviewed changes

danranVm approved these changes Jan 4, 2021

View reviewed changes

feat(comp: spin): add spin component

60a3dd3

fix #72

danranVm merged commit 71b4572 into IDuxFE:main Jan 4, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(comp: spin): add spin component #101

feat(comp: spin): add spin component #101

liuzaijiang commented Jan 3, 2021

codecov bot commented Jan 3, 2021 •

edited

Loading

danranVm commented Jan 3, 2021

danranVm Jan 3, 2021

danranVm Jan 3, 2021

danranVm Jan 3, 2021

danranVm Jan 3, 2021

danranVm Jan 3, 2021

danranVm Jan 3, 2021

danranVm Jan 3, 2021

Usualminds left a comment

Usualminds Jan 4, 2021

danranVm commented Jan 4, 2021

	expect(wrapper.classes().includes('my-spin-wrapper')).toBeTruthy()
	expect(wrapper.classes()).toContain('my-spin-wrapper')


		CONFIGS

		\|参数 \| 说明 \| 类型 \| 默认值 \| 是否支持全局配置\|

	\|参数 \| 说明 \| 类型 \| 默认值 \| 是否支持全局配置\|
	\| 参数 \| 说明 \| 类型 \| 全局配置 \| 默认值 \| 备注 \|

	\| `tipAlign`\| 文字描述与加载图标的排列方式 \| `string` \| `vertical(vertical：文字排列在图标下方；horizontal：文字排列在图标同水平方向的后方)`\| `true`\|
	\| `tipAlign`\| 文字描述与加载图标的排列方式 \| `vertical \\| horizontal ` \| `vertical`\| - \| vertical：文字排列在图标下方；horizontal：文字排列在图标同水平方向的后方 \|

feat(comp: spin): add spin component #101

feat(comp: spin): add spin component #101

Conversation

liuzaijiang commented Jan 3, 2021

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Other information

codecov bot commented Jan 3, 2021 • edited Loading

Codecov Report

danranVm commented Jan 3, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Usualminds left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danranVm commented Jan 4, 2021

codecov bot commented Jan 3, 2021 •

edited

Loading