mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: remove base/icon

Browse Source
This commit is contained in:
07akioni 2020-11-06 17:22:47 +08:00
parent 2cab8b2efa
commit 84f9a0ff34
10 changed files with 70 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/_base/icon/index.js
View File

@ -1,3 +0,0 @@
import Icon from './src/Icon.vue'
export default Icon

54
src/_base/icon/src/Icon.vue
View File

@ -1,54 +0,0 @@
<template>
<svg
v-if="type === 'more'"
class="n-base-icon n-base-icon--more"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="M255.8 218c-21 0-38 17-38 38s17 38 38 38 38-17 38-38-17-38-38-38zM102 218c-21 0-38 17-38 38s17 38 38 38 38-17 38-38-17-38-38-38zM410 218c-21 0-38 17-38 38s17 38 38 38 38-17 38-38-17-38-38-38z" />
</svg>
<svg
v-else-if="type === 'fastForward' || type === 'fastBackward' || type === 'fast-forward' || type === 'fast-backward'"
class="n-base-icon"
:style="{
transform: styleTransform
}"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<g>
<path d="m220.1,256l-127.1,-127c-9.4,-9.4 -9.4,-24.6 0,-33.9s24.6,-9.3 34,0l144,143.9c9.1,9.1 9.3,23.7 0.7,33.1l-144.6,144.9c-4.7,4.7 -10.9,7 -17,7s-12.3,-2.3 -17,-7c-9.4,-9.4 -9.4,-24.6 0,-33.9l127,-127.1z" />
<path d="m368.1,256l-127.1,-127c-9.4,-9.4 -9.4,-24.6 0,-33.9s24.6,-9.3 34,0l144,143.9c9.1,9.1 9.3,23.7 0.7,33.1l-144.6,144.9c-4.7,4.7 -10.9,7 -17,7s-12.3,-2.3 -17,-7c-9.4,-9.4 -9.4,-24.6 0,-33.9l127,-127.1z" />
</g>
</svg>
<svg
v-else-if="type === 'forward' || type === 'backward'"
class="n-base-icon"
:style="{
transform: styleTransform
}"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z" />
</svg>
</template>
<script>
export default {
name: 'NBaseIcon',
props: {
type: {
type: String,
default: null
}
},
computed: {
styleTransform () {
const type = this.type
if (type === 'backward' || type === 'fast-backward') return 'rotate(180deg)'
return null
}
}
}
</script>

12
src/date-picker/src/panel/commonCalendarMixin.js
View File

@ -1,4 +1,10 @@
import FocusDetector from '../../../_base/focus-detector'
import {
ArrowRight20Filled as FastForwardIcon,
ArrowLeft20Filled as FastBackwardIcon,
ChevronLeft24Filled as BackwardIcon,
ChevronRight24Filled as ForwardIcon
} from 'vicons/fluent'
import {
locale
} from '../../../_mixins'
@ -21,7 +27,11 @@ export default {
}
},
components: {
FocusDetector
FocusDetector,
FastForwardIcon,
FastBackwardIcon,
BackwardIcon,
ForwardIcon
},
props: {
theme: {

13
src/date-picker/src/panel/date.vue
View File

@ -14,13 +14,13 @@
class="n-date-panel-month__fast-prev"
@click="prevYear"
>
<n-base-icon type="fast-backward" />
<fast-backward-icon />
</div>
<div
class="n-date-panel-month__prev"
@click="prevMonth"
>
<n-base-icon type="backward" />
<backward-icon />
</div>
<div class="n-date-panel-month__month-year">
{{ calendarMonth }} {{ calendarYear }}
@ -29,13 +29,13 @@
class="n-date-panel-month__next"
@click="nextMonth"
>
<n-base-icon type="forward" />
<forward-icon />
</div>
<div
class="n-date-panel-month__fast-next"
@click="nextYear"
>
<n-base-icon type="fast-forward" />
<fast-forward-icon />
</div>
</div>
<div class="n-date-panel-weekdays">
@ -105,7 +105,7 @@
</template>
<script>
import NBaseIcon from '../../../_base/icon'
import uniCalendarMixin from './uniCalendarMixin'
import { startOfDay } from 'date-fns'
import NButton from '../../../button'
@ -117,8 +117,7 @@ const DATE_VALIDATE_FORMAT = ['YYYY-MM-DD', 'YYYY-MM-D', 'YYYY-M-D', 'YYYY-M-DD'
export default {
components: {
NButton,
NBaseIcon
NButton
},
mixins: [
uniCalendarMixin

20
src/date-picker/src/panel/daterange.vue
View File

@ -18,13 +18,13 @@
class="n-date-panel-month__fast-prev"
@click="startCalendarPrevYear"
>
<n-base-icon type="fast-backward" />
<fast-backward-icon />
</div>
<div
class="n-date-panel-month__prev"
@click="startCalendarPrevMonth"
>
<n-base-icon type="backward" />
<backward-icon />
</div>
<div class="n-date-panel-month__month-year">
{{ startCalendarMonth }} {{ startCalendarYear }}
@ -33,13 +33,13 @@
class="n-date-panel-month__next"
@click="startCalendarNextMonth"
>
<n-base-icon type="forward" />
<forward-icon />
</div>
<div
class="n-date-panel-month__fast-next"
@click="startCalendarNextYear"
>
<n-base-icon type="fast-forward" />
<fast-forward-icon />
</div>
</div>
<div class="n-date-panel-weekdays">
@ -84,13 +84,13 @@
class="n-date-panel-month__fast-prev"
@click="endCalendarPrevYear"
>
<n-base-icon type="fast-backward" />
<fast-backward-icon />
</div>
<div
class="n-date-panel-month__prev"
@click="endCalendarPrevMonth"
>
<n-base-icon type="backward" />
<backward-icon />
</div>
<div class="n-date-panel-month__month-year">
{{ endCalendarMonth }} {{ endCalendarYear }}
@ -99,13 +99,13 @@
class="n-date-panel-month__next"
@click="endCalendarNextMonth"
>
<n-base-icon type="forward" />
<forward-icon />
</div>
<div
class="n-date-panel-month__fast-next"
@click="endCalendarNextYear"
>
<n-base-icon type="fast-forward" />
<fast-forward-icon />
</div>
</div>
<div class="n-date-panel-weekdays">
@ -173,7 +173,6 @@
<script>
import NButton from '../../../button'
import NBaseIcon from '../../../_base/icon'
import dualCalendarMixin from './dualCalendarMixin'
import { startOfDay } from 'date-fns'
import { injectDualCalendarValidation } from '../validate-utils'
@ -182,8 +181,7 @@ const DATE_FORMAT = 'yyyy-MM-dd'
export default {
components: {
NButton,
NBaseIcon
NButton
},
mixins: [
dualCalendarMixin

10
src/date-picker/src/panel/datetime.vue
View File

@ -45,13 +45,13 @@
class="n-date-panel-month__fast-prev"
@click="prevYear"
>
<n-base-icon type="fast-backward" />
<fast-backward-icon />
</div>
<div
class="n-date-panel-month__prev"
@click="prevMonth"
>
<n-base-icon type="backward" />
<backward-icon />
</div>
<div class="n-date-panel-month__month-year">
{{ calendarMonth }} {{ calendarYear }}
@ -60,13 +60,13 @@
class="n-date-panel-month__next"
@click="nextMonth"
>
<n-base-icon type="forward" />
<forward-icon />
</div>
<div
class="n-date-panel-month__fast-next"
@click="nextYear"
>
<n-base-icon type="fast-forward" />
<fast-forward-icon />
</div>
</div>
<div class="n-date-panel-weekdays">
@ -136,7 +136,6 @@
</template>
<script>
import NBaseIcon from '../../../_base/icon'
import uniCalendarMixin from './uniCalendarMixin'
import { startOfSecond } from 'date-fns'
import NButton from '../../../button'
@ -151,7 +150,6 @@ const DATE_VALIDATE_FORMAT = ['YYYY-MM-DD', 'YYYY-MM-D', 'YYYY-M-D', 'YYYY-M-DD'
export default {
components: {
NButton,
NBaseIcon,
NTimePicker,
NInput
},

40
src/date-picker/src/panel/datetimerange.vue
View File

@ -40,9 +40,7 @@
@update:value="handleStartTimePickerChange"
/>
<div class="n-date-panel-input-wrapper__arrow">
<n-base-icon
type="forward"
/>
<forward-icon />
</div>
<n-input
v-model:value="endDateDisplayString"
@ -81,17 +79,13 @@
class="n-date-panel-month__fast-prev"
@click="startCalendarPrevYear"
>
<n-base-icon
type="fast-backward"
/>
<fast-backward-icon />
</div>
<div
class="n-date-panel-month__prev"
@click="startCalendarPrevMonth"
>
<n-base-icon
type="backward"
/>
<backward-icon />
</div>
<div class="n-date-panel-month__month-year">
{{ startCalendarMonth }} {{ startCalendarYear }}
@ -100,17 +94,13 @@
class="n-date-panel-month__next"
@click="startCalendarNextMonth"
>
<n-base-icon
type="forward"
/>
<forward-icon />
</div>
<div
class="n-date-panel-month__fast-next"
@click="startCalendarNextYear"
>
<n-base-icon
type="fast-forward"
/>
<fast-forward-icon />
</div>
</div>
<div class="n-date-panel-weekdays">
@ -155,17 +145,13 @@
class="n-date-panel-month__fast-prev"
@click="endCalendarPrevYear"
>
<n-base-icon
type="fast-backward"
/>
<fast-backward-icon />
</div>
<div
class="n-date-panel-month__prev"
@click="endCalendarPrevMonth"
>
<n-base-icon
type="backward"
/>
<backward-icon />
</div>
<div class="n-date-panel-month__month-year">
{{ endCalendarMonth }} {{ endCalendarYear }}
@ -174,17 +160,13 @@
class="n-date-panel-month__next"
@click="endCalendarNextMonth"
>
<n-base-icon
type="forward"
/>
<forward-icon />
</div>
<div
class="n-date-panel-month__fast-next"
@click="endCalendarNextYear"
>
<n-base-icon
type="fast-forward"
/>
<fast-forward-icon />
</div>
</div>
<div class="n-date-panel-weekdays">
@ -259,7 +241,6 @@ import NButton from '../../../button'
import NTimePicker from '../../../time-picker'
import NInput from '../../../input'
import dualCalendarMixin from './dualCalendarMixin'
import NBaseIcon from '../../../_base/icon'
import {
format,
startOfSecond,
@ -280,8 +261,7 @@ export default {
components: {
NButton,
NTimePicker,
NInput,
NBaseIcon
NInput
},
mixins: [dualCalendarMixin],
props: {

3
src/date-picker/src/styles/themed-base.cssr.js
View File

@ -200,10 +200,11 @@ export default c([
}, [
cE('prev, next, fast-prev, fast-next', {
raw: `
line-height: 0;
cursor: pointer;
width: 14px;
height: 14px;
fill: ${panelIconColor};
color: ${panelIconColor};
`
}),
cE('fast-prev, next', {

40
src/pagination/src/Pagination.vue
View File

@ -15,7 +15,7 @@
@click="backward"
>
<div class="n-pagination-item__arrow-icon">
<n-base-icon type="backward" />
<backward-icon />
</div>
</div>
<div
@ -37,24 +37,22 @@
</template>
<template
v-if="pageItem.type==='fastBackward'"
class="n-pagination-item--fast-backward"
>
<div class="n-pagination-item__more-icon">
<n-base-icon type="more" />
<more-icon />
</div>
<div class="n-pagination-item__arrow-icon">
<n-base-icon type="fast-backward" />
<fast-backward-icon />
</div>
</template>
<template
v-if="pageItem.type==='fastForward'"
class=""
>
<div class="n-pagination-item__more-icon">
<n-base-icon type="more" />
<more-icon />
</div>
<div class="n-pagination-item__arrow-icon">
<n-base-icon type="fast-forward" />
<fast-forward-icon />
</div>
</template>
</div>
@ -66,7 +64,7 @@
@click="forward"
>
<div class="n-pagination-item__arrow-icon">
<n-base-icon type="forward" />
<forward-icon />
</div>
</div>
<div
@ -97,12 +95,20 @@
import { nextTick, computed } from 'vue'
import NSelect from '../../select'
import NInput from '../../input'
import NBaseIcon from '../../_base/icon'
import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable'
import locale from '../../_mixins/locale'
import {
ArrowRight20Regular as FastForwardIcon,
ArrowLeft20Regular as FastBackwardIcon,
ChevronLeft16Regular as BackwardIcon,
ChevronRight16Regular as ForwardIcon,
More16Regular as MoreIcon
} from 'vicons/fluent'
import {
configurable,
themeable,
locale,
usecssr
} from '../../_mixins'
import { pageItems } from './utils'
import usecssr from '../../_mixins/usecssr'
import styles from './styles'
import { useCompitable } from 'vooks'
@ -111,10 +117,14 @@ export default {
components: {
NSelect,
NInput,
NBaseIcon
BackwardIcon,
ForwardIcon,
MoreIcon,
FastForwardIcon,
FastBackwardIcon
},
mixins: [
withapp,
configurable,
themeable,
usecssr(styles),
locale('Pagination')

3
src/pagination/src/styles/themed-base.cssr.js
View File

@ -125,6 +125,9 @@ export default c([
`
})
]),
cE('more-icon, arrow-icon', {
lineHeight: 0
}),
cM('active', {
background: itemColorActive,
color: itemTextColorActive,