feat(date-picker): date item click trigger area is as large as cell s…

…ize, closes #2552
tusen-ai · Mar 5, 2022 · ec95462 · ec95462
1 parent 33519a7
commit ec95462
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 0 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -13,6 +13,7 @@
 - `n-time-line-item` adds `line-type` prop, closes [#2548](https://github.com/TuSimple/naive-ui/issues/2548).
 - `n-step` adds `icon` slot, closes [#2547](https://github.com/TuSimple/naive-ui/issues/2547).
 - `n-input-number` adds `autofocus` prop, closes [#2551](https://github.com/TuSimple/naive-ui/issues/2551).
+- `n-date-picker`'s date item click trigger area is as large as cell size, closes [#2552](https://github.com/TuSimple/naive-ui/issues/2552).
 
 ## 2.26.0
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -13,6 +13,7 @@
 - `n-time-line-item` 新增 line-type 属性，关闭 [#2548](https://github.com/TuSimple/naive-ui/issues/2548)
 - `n-step` 新增 `icon` slot，关闭 [#2547](https://github.com/TuSimple/naive-ui/issues/2547)
 - `n-input-number` 新增 `autofocus` 属性，关闭 [#2551](https://github.com/TuSimple/naive-ui/issues/2551)
+- `n-date-picker` 扩大日期点击触发范围，关闭 [#2552](https://github.com/TuSimple/naive-ui/issues/2552)
 
 ## 2.26.0
 

diff --git a/src/date-picker/src/panel/date.tsx b/src/date-picker/src/panel/date.tsx
@@ -113,6 +113,7 @@ export default defineComponent({
                 ]}
                 onClick={() => this.handleDateClick(dateItem)}
               >
+                <div class={`${mergedClsPrefix}-date-panel-date__trigger`} />
                 {dateItem.dateObject.date}
                 {dateItem.isCurrentDate ? (
                   <div class={`${mergedClsPrefix}-date-panel-date__sup`} />

diff --git a/src/date-picker/src/styles/index.cssr.ts b/src/date-picker/src/styles/index.cssr.ts
@@ -311,6 +311,13 @@ export default c([
           background-color .2s var(--n-bezier),
           color .2s var(--n-bezier);
       `, [
+        cE('trigger', `
+          position: absolute;
+          left: calc(var(--n-item-size) / 2 - var(--n-item-cell-width) / 2);
+          top: calc(var(--n-item-size) / 2 - var(--n-item-cell-height) / 2);
+          width:  var(--n-item-cell-width);
+          height:  var(--n-item-cell-height);
+        `),
         cNotM('disabled', [
           cNotM('selected', [
             c('&:hover', {