feat(card): hoverable prop

CHANGELOG.en-US.md

@@ -5,6 +5,7 @@
 ### Feat
 
 - `n-config-provider` prop `theme-overrides` support inheritance.
+- `card` add `hoverable` prop.
 
 ## 2.0.1
 

CHANGELOG.zh-CN.md

@@ -5,6 +5,7 @@
 ### Feat
 
 - `n-config-provider` 的 `theme-overrides` 支持继承
+- `card` 新增 `hoverable` 属性
 
 ## 2.0.1
 

src/_styles/common/dark.ts

@@ -181,6 +181,9 @@ const derived: ThemeCommonVars = {
   opacityDisabled: base.alphaDisabled,
   inputColorDisabled: overlay(base.alphaDisabledInput),
 
+  boxShadow1:
+    '0 1px 2px -2px rgba(0, 0, 0, .24), 0 3px 6px 0 rgba(0, 0, 0, .18), 0 5px 12px 4px rgba(0, 0, 0, .12)',
+
   boxShadow2:
     '0 3px 6px -4px rgba(0, 0, 0, .16), 0 6px 12px 0 rgba(0, 0, 0, .08), 0 9px 18px 8px rgba(0, 0, 0, .04)',
   boxShadow3:

src/_styles/common/light.ts

@@ -65,9 +65,7 @@ const base = {
   successHover: '#36ad6a',
   successDefault: '#18a058',
   successActive: '#0c7a43',
-  successSuppl: '#36ad6a',
-
-  boxShadow1: ''
+  successSuppl: '#36ad6a'
 }
 
 const baseBackgroundRgb = rgba(base.neutralBase)
@@ -182,6 +180,9 @@ const derived = {
   opacityDisabled: base.alphaDisabled,
   inputColorDisabled: neutral(base.alphaDisabledInput),
 
+  boxShadow1:
+    '0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04)',
+
   boxShadow2:
     '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)',
   boxShadow3:

src/card/demos/enUS/hoverable.demo.md

@@ -0,0 +1,11 @@
+# Hoverable
+
+```html
+<n-card title="Card" hoverable> Card Content </n-card>
+```
+
+```css
+.n-card {
+  max-width: 300px;
+}
+```

src/card/demos/enUS/index.demo-entry.md

@@ -8,11 +8,11 @@ Some amatuer UI designers like to apply shadow on every cards.
 basic
 size
 cover
+hoverable
 slots
 border
 segment
 closable
-
 ```
 
 ## Props
@@ -23,6 +23,7 @@ closable
 | closable | `boolean` | `false` |  |
 | content-style | `Object \| string` | `undefined` |  |
 | header-style | `Object \| string` | `undefined` |  |
+| hoverable | `boolean` | `false` |  |
 | segmented | `boolean \| { [part in 'content' \| 'footer' \| 'action']?: boolean \| 'soft' \| 'hard' }` | `false` |  |
 | size | `'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` |  |
 | title | `string` | `undefined` |  |

src/card/demos/zhCN/hoverable.demo.md

@@ -0,0 +1,11 @@
+# 可悬浮
+
+```html
+<n-card title="卡片" hoverable> 卡片内容 </n-card>
+```
+
+```css
+.n-card {
+  max-width: 300px;
+}
+```

src/card/demos/zhCN/index.demo-entry.md

@@ -8,6 +8,7 @@
 basic
 size
 cover
+hoverable
 slots
 border
 segment
@@ -22,6 +23,7 @@ closable
 | closable | `boolean` | `false` |  |
 | content-style | `Object \| string` | `undefined` |  |
 | header-style | `Object \| string` | `undefined` |  |
+| hoverable | `boolean` | `false` |  |
 | segmented | `boolean \| { [part in 'content' \| 'footer' \| 'action']?: boolean \| 'soft' \| 'hard' }` | `false` |  |
 | size | `'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` |  |
 | title | `string` | `undefined` |  |

src/card/src/Card.tsx

@@ -8,7 +8,7 @@ import {
 } from 'vue'
 import { useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
-import { createKey, keysOf } from '../../_utils'
+import { call, createKey, keysOf, MaybeArray } from '../../_utils'
 import { NBaseClose } from '../../_internal'
 import { cardLight } from '../styles'
 import type { CardTheme } from '../styles'
@@ -40,7 +40,8 @@ const cardProps = {
     type: Boolean,
     default: false as boolean
   },
-  onClose: Function as PropType<() => void>
+  hoverable: Boolean,
+  onClose: Function as PropType<MaybeArray<() => void>>
 } as const
 
 export { cardProps }
@@ -56,7 +57,7 @@ export default defineComponent({
   setup (props) {
     const handleCloseClick = (): void => {
       const { onClose } = props
-      if (onClose) onClose()
+      if (onClose) call(onClose)
     }
     const themeRef = useTheme('Card', 'Card', style, cardLight, props)
     return {
@@ -79,6 +80,7 @@ export default defineComponent({
             closeColorPressed,
             lineHeight,
             closeSize,
+            boxShadow,
             [createKey('paddingTop', size)]: paddingTop,
             [createKey('paddingBottom', size)]: paddingBottom,
             [createKey('paddingLeft', size)]: paddingLeft,
@@ -101,6 +103,7 @@ export default defineComponent({
           '--close-color-hover': closeColorHover,
           '--close-color-pressed': closeColorPressed,
           '--border-color': borderColor,
+          '--box-shadow': boxShadow,
           // size
           '--padding-top': paddingTop,
           '--padding-bottom': paddingBottom,
@@ -113,7 +116,7 @@ export default defineComponent({
     }
   },
   render () {
-    const { segmented, bordered, $slots } = this
+    const { segmented, bordered, hoverable, $slots } = this
     return (
       <div
         class={[
@@ -133,7 +136,8 @@ export default defineComponent({
               segmented === true || (segmented !== false && segmented.footer),
             'n-card--action-segmented':
               segmented === true || (segmented !== false && segmented.action),
-            'n-card--bordered': bordered
+            'n-card--bordered': bordered,
+            'n-card--hoverable': hoverable
           }
         ]}
         style={this.cssVars as any}

src/card/src/styles/index.cssr.ts

@@ -20,6 +20,7 @@ import { asModal, c, cB, cE, cM, insideModal } from '../../../_utils/cssr'
 // --close-color-pressed
 // --border-color
 // --close-size
+// --box-shadow
 export default c([
   cB('card', `
     font-size: var(--font-size);
@@ -34,8 +35,12 @@ export default c([
     transition: 
       color .3s var(--bezier),
       background-color .3s var(--bezier),
+      box-shadow .3s var(--bezier),
       border-color .3s var(--bezier);
   `, [
+    cM('hoverable', [
+      c('&:hover', 'box-shadow: var(--box-shadow);')
+    ]),
     cM('content-segmented', [
       c('>', [
         cE('content', {

src/card/styles/dark.ts

@@ -19,7 +19,8 @@ const cardDark: CardTheme = {
       fontWeightStrong,
       closeColor,
       closeColorHover,
-      closeColorPressed
+      closeColorPressed,
+      boxShadow1
     } = vars
     return {
       ...commonVariables,
@@ -38,6 +39,7 @@ const cardDark: CardTheme = {
       fontSizeMedium: fontSize,
       fontSizeLarge: fontSize,
       fontSizeHuge: fontSize,
+      boxShadow: boxShadow1,
       borderRadius
     }
   }

src/card/styles/light.ts

@@ -17,7 +17,8 @@ const self = (vars: ThemeCommonVars) => {
     closeColor,
     closeColorHover,
     closeColorPressed,
-    modalColor
+    modalColor,
+    boxShadow1
   } = vars
   return {
     ...commonVariables,
@@ -36,6 +37,7 @@ const self = (vars: ThemeCommonVars) => {
     fontSizeMedium: fontSize,
     fontSizeLarge: fontSize,
     fontSizeHuge: fontSize,
+    boxShadow: boxShadow1,
     borderRadius
   }
 }