Repository: IduxFE/components
Pull request #194 (2021-02-05 12:51:52)

fix(comp: typography): fix typography
## PR Checklist

Please check if your PR fulfills the following requirements:

- [x] The commit message follows [our guidelines](https://github.com/IduxFE/components/blob/main/docs/contributing.zh.md#commit)
- [x] Tests for the changes have been added/updated or not needed
- [x] Docs and demo have been added/updated or not needed

## PR Type

What kind of change does this PR introduce?

- [x] Bugfix
- [ ] Feature
- [ ] Component style update
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Application (the showcase website) / infrastructure changes
- [ ] Other... Please describe:

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->

## What is the new behavior?

## Other information


codecov[bot]: # [Codecov](https://codecov.io/gh/IduxFE/components/pull/194?src=pr&el=h1) Report
> Merging [#194](https://codecov.io/gh/IduxFE/components/pull/194?src=pr&el=desc) (7077618) into [main](https://codecov.io/gh/IduxFE/components/commit/d93ddcad3acf10704302b2ef77a654974b7d3d30?el=desc) (d93ddca) will **decrease** coverage by `0.23%`.
> The diff coverage is `80.76%`.

[![Impacted file tree graph](https://codecov.io/gh/IduxFE/components/pull/194/graphs/tree.svg?width=650&height=150&src=pr&token=PGAUXP06V3)](https://codecov.io/gh/IduxFE/components/pull/194?src=pr&el=tree)

```diff
@@            Coverage Diff             @@
##             main     #194      +/-   ##
==========================================
- Coverage   94.84%   94.61%   -0.24%     
==========================================
  Files          86       86              
  Lines        1784     1800      +16     
  Branches      305      312       +7     
==========================================
+ Hits         1692     1703      +11     
- Misses         53       55       +2     
- Partials       39       42       +3     
```


| [Impacted Files](https://codecov.io/gh/IduxFE/components/pull/194?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [packages/components/typography/src/typography.ts](https://codecov.io/gh/IduxFE/components/pull/194/diff?src=pr&el=tree#diff-cGFja2FnZXMvY29tcG9uZW50cy90eXBvZ3JhcGh5L3NyYy90eXBvZ3JhcGh5LnRz) | `85.29% <80.76%> (-14.71%)` | :arrow_down: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/IduxFE/components/pull/194?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/IduxFE/components/pull/194?src=pr&el=footer). Last update [d93ddca...7077618](https://codecov.io/gh/IduxFE/components/pull/194?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/packages/components/typography/src/typography.ts b/packages/components/typography/src/typography.ts
index fa013cad..dbb94f86 100644
--- a/packages/components/typography/src/typography.ts
+++ b/packages/components/typography/src/typography.ts
@@ -1,22 +1,48 @@
 import type { Directive } from 'vue'
 import type { TypographyConfig, TypographyOptions } from './types'
 
-import { isNil, isString } from '@idux/cdk/utils'
+import { isNonNil, isObject } from '@idux/cdk/utils'
 import { Logger } from '@idux/components/core/logger'
 
-const typography: Directive<HTMLElement, TypographyConfig> = (el, binding) => {
-  const classNames: string[] = [...Array.from(el.classList), 'ix-typography']
-  const { value } = binding
-  const options: TypographyOptions = isString(value) || isNil(value) ? { type: value } : value
-
-  const { type, disabled } = options
-  if (isLegality(type)) {
-    classNames.push(`ix-typography-${type}`)
-  }
-  if (disabled) {
-    classNames.push('ix-typography-disabled')
-  }
-  el.className = classNames.join(' ')
+const typography: Directive<HTMLElement, TypographyConfig> = {
+  created(el, binding) {
+    const classNames: string[] = [el.className, 'ix-typography']
+    const { value } = binding
+    const options: TypographyOptions = isObject(value) ? value : { type: value }
+    const { type, disabled } = options
+    if (isLegality(type)) {
+      classNames.push(`ix-typography-${type}`)
+    }
+    if (disabled) {
+      classNames.push('ix-typography-disabled')
+    }
+    el.className = classNames.join(' ')
+  },
+  updated(el, binding) {
+    const classNames = new Set([...Array.from(el.classList), 'ix-typography'])
+    const { oldValue, value } = binding
+
+    const { type: oldType, disabled: oldDisabled }: TypographyOptions = isObject(oldValue)
+      ? oldValue
+      : { type: oldValue ?? undefined }
+
+    if (isLegality(oldType)) {
+      classNames.delete(`ix-typography-${oldType}`)
+    }
+    if (isNonNil(oldDisabled)) {
+      classNames.delete('ix-typography-disabled')
+    }
+
+    const { type, disabled }: TypographyOptions = isObject(value) ? value : { type: value }
+    if (isLegality(type)) {
+      classNames.add(`ix-typography-${type}`)
+    }
+    if (disabled) {
+      classNames.add('ix-typography-disabled')
+    }
+
+    el.className = Array.from(classNames).join(' ')
+  },
 }
 
 export default typography


Test patch:
diff --git a/packages/components/typography/__tests__/__snapshots__/typography.spec.ts.snap b/packages/components/typography/__tests__/__snapshots__/typography.spec.ts.snap
index 0d368f70..b3875ec3 100644
--- a/packages/components/typography/__tests__/__snapshots__/typography.spec.ts.snap
+++ b/packages/components/typography/__tests__/__snapshots__/typography.spec.ts.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`typography.ts render work 1`] = `"<article class=\\"ix-typography\\"><h1 class=\\"ix-typography\\">Title</h1><p class=\\"ix-typography\\"> In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. </p><div class=\\"ix-typography\\"><ul><li><a href=\\"/docs/spec/proximity\\">Principles</a></li><li><a href=\\"/docs/pattern/navigation\\">Patterns</a></li><li><a href=\\"/docs/resource/download\\">Resource Download</a></li></ul></div><p class=\\"ix-typography\\"> Press <span class=\\"ix-typography\\"><kbd>Esc</kbd></span> to exist... </p></article>"`;
+exports[`typography.ts render work 1`] = `"<article class=\\" ix-typography\\"><h1 class=\\" ix-typography\\">Title</h1><p class=\\" ix-typography\\"> In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. </p><div class=\\" ix-typography\\"><ul><li><a href=\\"/docs/spec/proximity\\">Principles</a></li><li><a href=\\"/docs/pattern/navigation\\">Patterns</a></li><li><a href=\\"/docs/resource/download\\">Resource Download</a></li></ul></div><p class=\\" ix-typography\\"> Press <span class=\\" ix-typography\\"><kbd>Esc</kbd></span> to exist... </p></article>"`;
diff --git a/packages/components/typography/__tests__/typography.spec.ts b/packages/components/typography/__tests__/typography.spec.ts
index 4f4ea30b..d912e3f6 100644
--- a/packages/components/typography/__tests__/typography.spec.ts
+++ b/packages/components/typography/__tests__/typography.spec.ts
@@ -112,5 +112,16 @@ describe('typography.ts', () => {
 
     await wrapper.setProps({ type: 'success' })
     expect(wrapper.classes()).toEqual(['custom-paragraph', 'ix-typography', 'ix-typography-success'])
+
+    await wrapper.setProps({ type: { type: 'success', disabled: true } })
+    expect(wrapper.classes()).toEqual([
+      'custom-paragraph',
+      'ix-typography',
+      'ix-typography-success',
+      'ix-typography-disabled',
+    ])
+
+    await wrapper.setProps({ type: undefined })
+    expect(wrapper.classes()).toEqual(['custom-paragraph', 'ix-typography'])
   })
 })