refactor(data-table): new sort icon & filter icon

2024-12-09 04:31:35 +08:00 · 2020-10-26 13:50:51 +08:00 · 2020-10-26 13:50:51 +08:00 · 3ce5673a35
commit 3ce5673a35
parent da86d5b388
11 changed files with 49 additions and 47 deletions
--- a/demo/documentation/components/config-provider/enUS/os-theme.demo.md
+++ b/demo/documentation/components/config-provider/enUS/os-theme.demo.md
@ -1,5 +1,5 @@
 # Use OS Theme
-Naive-ui provides `$NOs.theme` property to get the current theme of your OS.
+Naive UI provides `useOsTheme` to get the current theme of your OS.

 ```html
 <n-config-provider :theme="theme">
--- a/demo/documentation/components/data-table/enUS/filter-and-sorter.demo.md
+++ b/demo/documentation/components/data-table/enUS/filter-and-sorter.demo.md
@ -24,7 +24,7 @@ const columns = [
  {
    title: 'Age',
    key: 'age',
-    sorter: (row1, row2) => row2.age - row1.age
+    sorter: (row1, row2) => row1.age - row2.age
  },
  {
    title: 'Address',
--- a/demo/documentation/components/data-table/zhCN/filter-and-sorter.demo.md
+++ b/demo/documentation/components/data-table/zhCN/filter-and-sorter.demo.md
@ -24,7 +24,7 @@ const columns = [
  {
    title: 'Age',
    key: 'age',
-    sorter: (row1, row2) => row2.age - row1.age
+    sorter: (row1, row2) => row1.age - row2.age
  },
  {
    title: 'Address',
--- a/src/_base/icons/ArrowDown.vue
+++ b/src/_base/icons/ArrowDown.vue
@ -0,0 +1,9 @@
+<template>
+  <svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill-rule="evenodd">
+      <g fill-rule="nonzero">
+        <path d="M23.7916,15.2664 C24.0788,14.9679 24.0696,14.4931 23.7711,14.206 C23.4726,13.9188 22.9978,13.928 22.7106,14.2265 L14.7511,22.5007 L14.7511,3.74792 C14.7511,3.33371 14.4153,2.99792 14.0011,2.99792 C13.5869,2.99792 13.2511,3.33371 13.2511,3.74793 L13.2511,22.4998 L5.29259,14.2265 C5.00543,13.928 4.53064,13.9188 4.23213,14.206 C3.93361,14.4931 3.9244,14.9679 4.21157,15.2664 L13.2809,24.6944 C13.6743,25.1034 14.3289,25.1034 14.7223,24.6944 L23.7916,15.2664 Z" />
+      </g>
+    </g>
+  </svg>
+</template>
--- a/src/_base/icons/Filter.vue
+++ b/src/_base/icons/Filter.vue
@ -0,0 +1,9 @@
+<template>
+  <svg viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill-rule="evenodd">
+      <g fill-rule="nonzero">
+        <path d="M17,19 C17.5522847,19 18,19.4477153 18,20 C18,20.5522847 17.5522847,21 17,21 L11,21 C10.4477153,21 10,20.5522847 10,20 C10,19.4477153 10.4477153,19 11,19 L17,19 Z M21,13 C21.5522847,13 22,13.4477153 22,14 C22,14.5522847 21.5522847,15 21,15 L7,15 C6.44771525,15 6,14.5522847 6,14 C6,13.4477153 6.44771525,13 7,13 L21,13 Z M24,7 C24.5522847,7 25,7.44771525 25,8 C25,8.55228475 24.5522847,9 24,9 L4,9 C3.44771525,9 3,8.55228475 3,8 C3,7.44771525 3.44771525,7 4,7 L24,7 Z" />
+      </g>
+    </g>
+  </svg>
+</template>
--- a/src/_base/icons/index.js
+++ b/src/_base/icons/index.js
@ -6,3 +6,5 @@ export { default as ErrorIcon } from './Error.vue'
 export { default as WarningIcon } from './Warning.vue'
 export { default as InfoIcon } from './Info.vue'
 export { default as CloseIcon } from './Close.vue'
+export { default as FilterIcon } from './Filter.vue'
+export { default as ArrowDownIcon } from './ArrowDown'
--- a/src/data-table/src/DataTable.vue
+++ b/src/data-table/src/DataTable.vue
@ -123,7 +123,7 @@ function normalizeColumn (column) {
  })
  if (!column.key && column.type === 'selection') {
    defaultColumn.key = 'selection'
-    defaultColumn.width = 48
+    defaultColumn.width = 40
  }
  return defaultColumn
 }
--- a/src/data-table/src/HeaderButton/FilterButton.vue
+++ b/src/data-table/src/HeaderButton/FilterButton.vue
@ -37,7 +37,7 @@
 import NIcon from '../../../icon'
 import NDataTableFilterMenu from './FilterMenu.vue'
 import NPopover from '../../../popover'
-import FilterIcon from '../../../_icons/funnel.vue'
+import { FilterIcon } from '../../../_base/icons'

 function createActiveFilters (allFilters, columnKey, syntheticFilterValue) {
  const activeFilters = Object.assign({}, allFilters)
--- a/src/data-table/src/HeaderButton/SortButton.vue
+++ b/src/data-table/src/HeaderButton/SortButton.vue
@ -6,22 +6,16 @@
      'n-data-table-sort-button--desc': currentColumnActive && syntheticSortOrder === 'descend'
    }"
  >
-    <n-icon
-      class="n-data-table-sort-button__desc-icon"
-    >
-      <ios-arrow-down />
-    </n-icon>
-    <n-icon
-      class="n-data-table-sort-button__asc-icon"
-    >
-      <ios-arrow-up />
+    <n-icon>
+      <arrow-down-icon />
    </n-icon>
  </span>
 </template>

 <script>
-import iosArrowUp from '../../../_icons/ios-arrow-up.vue'
-import iosArrowDown from '../../../_icons/ios-arrow-down.vue'
+import {
+  ArrowDownIcon
+} from '../../../_base/icons'
 import NIcon from '../../../icon'

 export default {
@ -33,8 +27,7 @@ export default {
  },
  components: {
    NIcon,
-    iosArrowUp,
-    iosArrowDown
+    ArrowDownIcon
  },
  props: {
    fontSize: {
--- a/src/data-table/src/TableParts/Header.vue
+++ b/src/data-table/src/TableParts/Header.vue
@ -99,8 +99,8 @@ function isColumnFilterable (column) {
 }

 function getNextOrderOf (order) {
-  if (!order) return 'ascend'
-  else if (order === 'ascend') return 'descend'
+  if (!order) return 'descend'
+  else if (order === 'descend') return 'ascend'
  return false
 }

--- a/src/data-table/src/styles/themed-base.cssr.js
+++ b/src/data-table/src/styles/themed-base.cssr.js
@ -246,31 +246,22 @@ export default c([
              width: '14px',
              marginLeft: '4px',
              position: 'relative',
-              display: 'inline-block',
-              verticalAlign: 'middle'
+              display: 'inline-flex',
+              verticalAlign: '-0.2em',
+              color: headerButtonIconColor,
+              transition: `
+                color .3s ${cubicBezierEaseInOut},
+                transform .3s ${cubicBezierEaseInOut}
+              `
            }, [
-              cE('asc-icon', {
-                bottom: 'calc(50% - 2px)',
-                left: 0
+              cM('desc', {
+                transform: 'rotate(0)'
              }),
-              cE('desc-icon', {
-                top: 'calc(50% - 2px)',
-                left: 0
+              cM('asc', {
+                transform: 'rotate(-180deg)'
              }),
-              cM('asc', [
-                cE('asc-icon', {
-                  fill: headerButtonIconColorActive
-                })
-              ]),
-              cM('desc', [
-                cE('desc-icon', {
-                  fill: headerButtonIconColorActive
-                })
-              ]),
-              cE('asc-icon, desc-icon', {
-                transition: `fill .3s ${cubicBezierEaseInOut}`,
-                fill: headerButtonIconColor,
-                position: 'absolute'
+              cM('asc, desc', {
+                color: headerButtonIconColorActive
              })
            ]),
            cB('data-table-filter-button', {
@ -302,9 +293,8 @@ export default c([
                  backgroundColor: headerButtonColorHover
                }),
                cB('icon', {
-                  fontSize: '12px',
-                  fill: headerButtonIconColor,
-                  stroke: headerButtonIconColor
+                  fontSize: '15px',
+                  color: headerButtonIconColor
                })
              ]),
              cM('popover-visible', [
@ -317,8 +307,7 @@ export default c([
                  backgroundColor: headerButtonColorHover
                }, [
                  cB('icon', {
-                    fill: headerButtonIconColorActive,
-                    stroke: headerButtonIconColorActive
+                    color: headerButtonIconColorActive
                  })
                ])
              ])