mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-01 13:36:55 +08:00
refactor(base-cancel-mark): rename to base suffix
This commit is contained in:
07akioni
parent
e063226ec2
commit
7033bf664e
@ -8,23 +8,23 @@
|
||||
style="flex-wrap: wrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-base-cancel-mark
|
||||
<n-base-suffix
|
||||
clearable
|
||||
:show="show"
|
||||
/>
|
||||
<n-base-cancel-mark
|
||||
<n-base-suffix
|
||||
:show="show"
|
||||
disabled
|
||||
arrow
|
||||
:active="active"
|
||||
/>
|
||||
<n-base-cancel-mark
|
||||
<n-base-suffix
|
||||
:show="show"
|
||||
:active="active"
|
||||
arrow
|
||||
clearable
|
||||
/>
|
||||
<n-base-cancel-mark
|
||||
<n-base-suffix
|
||||
:active="!active"
|
||||
:show="show"
|
||||
arrow
|
||||
@ -85,7 +85,7 @@ import routerDebug from './debugComponents/routerDebug'
|
||||
import modalDebug from './debugComponents/modalDebug'
|
||||
import datePickerDebug from './debugComponents/datePickerDebug'
|
||||
import backTopDebug from './debugComponents/backTopDebug'
|
||||
import cancelMarkDebug from './debugComponents/cancelMarkDebug'
|
||||
import suffixDebug from './debugComponents/suffixDebug'
|
||||
import cascaderDebug from './debugComponents/cascaderDebug'
|
||||
import verticalAlignDebug from './debugComponents/verticalAlignDebug'
|
||||
import iconTransitionDebug from './debugComponents/iconTransitionDebug'
|
||||
@ -195,7 +195,7 @@ const routes = [
|
||||
{ path: '/n-dropdown', component: dropdown },
|
||||
{ path: '/n-popselect', component: popselect },
|
||||
{ path: '/n-config-provider', component: configProvider },
|
||||
{ path: '/n-cancel-mark-debug', component: cancelMarkDebug },
|
||||
{ path: '/n--debug', component: suffixDebug },
|
||||
{ path: '/n-transfer', component: transfer },
|
||||
{ path: '/n-spin', component: spin },
|
||||
{ path: '/n-drawer', component: drawer },
|
||||
|
||||
@ -513,7 +513,7 @@ export default function (locale, instance) {
|
||||
// childItems: [
|
||||
// {
|
||||
// name: 'CancelMarkDebug',
|
||||
// path: `/${instance.lang}/${instance.theme}` + '/n-cancel-mark-debug'
|
||||
// path: `/${instance.lang}/${instance.theme}` + '/n-base-suffix-debug'
|
||||
// },
|
||||
// {
|
||||
// name: 'PopoverDebug',
|
||||
@ -888,8 +888,8 @@ export default function (locale, instance) {
|
||||
name: 'Debug',
|
||||
childItems: [
|
||||
{
|
||||
name: 'CancelMarkDebug',
|
||||
path: `/${instance.lang}/${instance.theme}` + '/n-cancel-mark-debug'
|
||||
name: 'SuffixDebug',
|
||||
path: `/${instance.lang}/${instance.theme}` + '/n-base-suffix-debug'
|
||||
},
|
||||
{
|
||||
name: 'PopoverDebug',
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "naive-ui",
|
||||
"version": "0.7.9",
|
||||
"version": "0.7.10",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -105,10 +105,10 @@
|
||||
<div
|
||||
class="n-input__suffix"
|
||||
>
|
||||
<div class="n-input__cancel-mark">
|
||||
<n-cancel-mark
|
||||
<div class="n-input-clear">
|
||||
<n-base-suffix
|
||||
:theme="syntheticTheme"
|
||||
:show="showCancelMark"
|
||||
:show="showClearButton"
|
||||
:clearable="clearable"
|
||||
@clear="handleClear"
|
||||
/>
|
||||
@ -121,7 +121,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NCancelMark from '../../_base/CancelMark'
|
||||
import NBaseSuffix from '../../_base/Suffix'
|
||||
import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import asformitem from '../../_mixins/asformitem'
|
||||
@ -129,7 +129,7 @@ import asformitem from '../../_mixins/asformitem'
|
||||
export default {
|
||||
name: 'NInput',
|
||||
components: {
|
||||
NCancelMark
|
||||
NBaseSuffix
|
||||
},
|
||||
mixins: [ withapp, themeable, asformitem({
|
||||
change: 'change',
|
||||
@ -236,7 +236,7 @@ export default {
|
||||
return this.placeholder
|
||||
}
|
||||
},
|
||||
showCancelMark () {
|
||||
showClearButton () {
|
||||
if (this.disabled || !this.clearable || (!this.focus && !this.hover)) return false
|
||||
if (this.pair) {
|
||||
return !!(Array.isArray(this.value) && (this.value[0] || this.value[1])) && (this.hover || this.focus)
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
/* istanbul ignore file */
|
||||
import CancelMark from './src/main.vue'
|
||||
|
||||
CancelMark.install = function (Vue) {
|
||||
Vue.component(CancelMark.name, CancelMark)
|
||||
}
|
||||
|
||||
export default CancelMark
|
||||
@ -34,7 +34,7 @@
|
||||
>
|
||||
{{ option.label }}
|
||||
</n-tag>
|
||||
<n-base-cancel-mark
|
||||
<n-base-suffix
|
||||
class="n-base-picker__mark"
|
||||
:loading="loading"
|
||||
:theme="theme"
|
||||
@ -88,8 +88,8 @@
|
||||
class="n-base-picker-input-tag__mirror"
|
||||
>{{ pattern ? pattern : ' ' }}</span>
|
||||
</div>
|
||||
<n-base-cancel-mark
|
||||
ref="cancelMark"
|
||||
<n-base-suffix
|
||||
ref="suffix"
|
||||
class="n-base-picker__mark"
|
||||
:arrow="showArrow"
|
||||
:theme="theme"
|
||||
@ -125,8 +125,8 @@
|
||||
@blur="handlePatternInputBlur"
|
||||
@input="handlePatternInputInput"
|
||||
>
|
||||
<n-base-cancel-mark
|
||||
ref="cancelMark"
|
||||
<n-base-suffix
|
||||
ref="suffix"
|
||||
class="n-base-picker__mark"
|
||||
:loading="loading"
|
||||
:theme="theme"
|
||||
@ -159,7 +159,7 @@
|
||||
>
|
||||
{{ labelPlaceholder }}
|
||||
</div>
|
||||
<n-base-cancel-mark
|
||||
<n-base-suffix
|
||||
class="n-base-picker__mark"
|
||||
:theme="theme"
|
||||
:arrow="showArrow"
|
||||
@ -176,13 +176,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NBaseCancelMark from '../../CancelMark'
|
||||
import NBaseSuffix from '../../Suffix'
|
||||
import NTag from '../../../Tag'
|
||||
|
||||
export default {
|
||||
name: 'NBasePicker',
|
||||
components: {
|
||||
NBaseCancelMark,
|
||||
NBaseSuffix,
|
||||
NTag
|
||||
},
|
||||
props: {
|
||||
|
||||
8
src/_base/Suffix/index.js
Normal file
8
src/_base/Suffix/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
/* istanbul ignore file */
|
||||
import Suffix from './src/main.vue'
|
||||
|
||||
Suffix.install = function (Vue) {
|
||||
Vue.component(Suffix.name, Suffix)
|
||||
}
|
||||
|
||||
export default Suffix
|
||||
@ -4,10 +4,10 @@
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
class="n-cancel-mark-cross__icon-svg"
|
||||
class="n-base-suffix-cross__icon-svg"
|
||||
>
|
||||
<path
|
||||
class="n-cancel-mark-cross__icon"
|
||||
class="n-base-suffix-cross__icon"
|
||||
d="M512.001 15.678C237.414 15.678 14.82 238.273 14.82 512.86S237.414 1010.04 512 1010.04s497.18-222.593 497.18-497.18S786.589 15.678 512.002 15.678z m213.211 645.937c17.798 17.803 17.798 46.657 0 64.456-17.798 17.797-46.658 17.797-64.456 0L512.001 577.315 363.241 726.07c-17.799 17.797-46.652 17.797-64.45 0-17.804-17.799-17.804-46.653 0-64.456L447.545 512.86 298.79 364.104c-17.803-17.798-17.803-46.657 0-64.455 17.799-17.798 46.652-17.798 64.45 0l148.761 148.755 148.755-148.755c17.798-17.798 46.658-17.798 64.456 0 17.798 17.798 17.798 46.657 0 64.455L576.456 512.86l148.756 148.755z m0 0"
|
||||
/>
|
||||
</svg>
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<transition name="n-cancel-mark-transition">
|
||||
<transition name="n-base-suffix-transition">
|
||||
<div
|
||||
v-if="loading || (show && (clearable || arrow))"
|
||||
class="n-cancel-mark"
|
||||
class="n-base-suffix"
|
||||
:class="{
|
||||
[`n-${theme}-theme`]: theme
|
||||
}"
|
||||
@ -11,13 +11,13 @@
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
<icon-switch-transition>
|
||||
<n-base-loading v-if="loading" :theme="theme" class="n-cancel-mark-spin" />
|
||||
<n-base-loading v-if="loading" :theme="theme" class="n-base-suffix-spin" />
|
||||
<div
|
||||
v-else-if="!arrow || (mouseHovered && clearable)"
|
||||
key="cross"
|
||||
class="n-cancel-mark-cross"
|
||||
class="n-base-suffix-cross"
|
||||
:class="{
|
||||
'n-cancel-mark-cross--arrow': arrow
|
||||
'n-base-suffix-cross--arrow': arrow
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
@ -26,10 +26,10 @@
|
||||
<div
|
||||
v-else-if="(arrow && !clearable) || (arrow && !mouseHovered)"
|
||||
key="arrow"
|
||||
class="n-cancel-mark-arrow"
|
||||
class="n-base-suffix-arrow"
|
||||
:class="{
|
||||
'n-cancel-mark-arrow--active': active,
|
||||
'n-cancel-mark-arrow--disabled': disabled
|
||||
'n-base-suffix-arrow--active': active,
|
||||
'n-base-suffix-arrow--disabled': disabled
|
||||
}"
|
||||
/>
|
||||
</icon-switch-transition>
|
||||
@ -43,7 +43,7 @@ import IconSwitchTransition from '../../../_transition/IconSwitchTransition'
|
||||
import NBaseLoading from '../../Loading'
|
||||
|
||||
export default {
|
||||
name: 'NBaseCancelMark',
|
||||
name: 'NBaseSuffix',
|
||||
components: {
|
||||
CancelIcon,
|
||||
NBaseLoading,
|
||||
@ -1,9 +1,9 @@
|
||||
@import './mixins/mixins.scss';
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(cancel-mark) {
|
||||
@include b(base-suffix) {
|
||||
@include once {
|
||||
@include fade-in-scale-up-transition(cancel-mark);
|
||||
@include fade-in-scale-up-transition(base-suffix);
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@ -11,14 +11,14 @@
|
||||
width: 12px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
@include b(cancel-mark-spin) {
|
||||
@include b(base-suffix-spin) {
|
||||
@include icon-switch-transition();
|
||||
transform: $--n-transform-debounce-scale;
|
||||
position: absolute;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
@include b(cancel-mark-cross) {
|
||||
@include b(base-suffix-cross) {
|
||||
@include once {
|
||||
@include icon-switch-transition();
|
||||
transform: $--n-transform-debounce-scale;
|
||||
@ -34,25 +34,25 @@
|
||||
@include once {
|
||||
transition: fill .3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
fill: map-get($map: $--base-cancel-mark-cross-color, $key: "default");
|
||||
fill: map-get($--base-suffix-cross-color, "default");
|
||||
}
|
||||
@include m(arrow) {
|
||||
@include e(icon) {
|
||||
fill: map-get($map: $--base-cancel-mark-cross-color, $key: "hover");
|
||||
fill: map-get($--base-suffix-cross-color, "hover");
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
@include e(icon) {
|
||||
fill: map-get($map: $--base-cancel-mark-cross-color, $key: "hover");
|
||||
fill: map-get($--base-suffix-cross-color, "hover");
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
@include e(icon) {
|
||||
fill: map-get($--base-cancel-mark-cross-color, "active");
|
||||
fill: map-get($--base-suffix-cross-color, "active");
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(cancel-mark-arrow) {
|
||||
@include b(base-suffix-arrow) {
|
||||
@include once {
|
||||
@include icon-switch-transition();
|
||||
transform: $--n-transform-debounce-scale;
|
||||
@ -78,16 +78,16 @@
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: 30% 70%;
|
||||
}
|
||||
border-left: 1px solid map-get($map: $--base-cancel-mark-arrow-color, $key: 'default');
|
||||
border-bottom: 1px solid map-get($map: $--base-cancel-mark-arrow-color, $key: 'default');
|
||||
border-left: 1px solid map-get($--base-suffix-arrow-color, 'default');
|
||||
border-bottom: 1px solid map-get($--base-suffix-arrow-color, 'default');
|
||||
}
|
||||
@include m(active) {
|
||||
&::after {
|
||||
@include once {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
border-left: 1px solid map-get($map: $--base-cancel-mark-arrow-color, $key: 'active');
|
||||
border-bottom: 1px solid map-get($map: $--base-cancel-mark-arrow-color, $key: 'active');
|
||||
border-left: 1px solid map-get($--base-suffix-arrow-color, 'active');
|
||||
border-bottom: 1px solid map-get($--base-suffix-arrow-color, 'active');
|
||||
}
|
||||
}
|
||||
@include m(disabled) {
|
||||
@ -99,28 +99,28 @@
|
||||
}
|
||||
@include as-form-item {
|
||||
@include with-status(error) {
|
||||
@include b(cancel-mark-cross) {
|
||||
@include b(base-suffix-cross) {
|
||||
@include m(arrow) {
|
||||
@include e(icon) {
|
||||
fill: map-get($map: $--base-cancel-mark-cross-color, $key: "error-hover");
|
||||
fill: map-get($--base-suffix-cross-color, "error-hover");
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
@include e(icon) {
|
||||
fill: map-get($map: $--base-cancel-mark-cross-color, $key: "error-hover");
|
||||
fill: map-get($--base-suffix-cross-color, "error-hover");
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
@include e(icon) {
|
||||
fill: map-get($--base-cancel-mark-cross-color, "error-active");
|
||||
fill: map-get($--base-suffix-cross-color, "error-active");
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(cancel-mark-arrow) {
|
||||
@include b(-arrow) {
|
||||
@include m(active) {
|
||||
&::after {
|
||||
border-left: 1px solid map-get($map: $--base-cancel-mark-arrow-color, $key: 'error-active');
|
||||
border-bottom: 1px solid map-get($map: $--base-cancel-mark-arrow-color, $key: 'error-active');
|
||||
border-left: 1px solid map-get($--base-suffix-arrow-color, 'error-active');
|
||||
border-bottom: 1px solid map-get($--base-suffix-arrow-color, 'error-active');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -133,7 +133,7 @@
|
||||
justify-content: flex-start;
|
||||
left: 12px;
|
||||
}
|
||||
@include e(cancel-mark) {
|
||||
@include b(input-clear) {
|
||||
display: flex;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
@mixin setup-dark-base-cancel-mark {
|
||||
$--base-cancel-mark-cross-color: (
|
||||
@mixin setup-dark-base-suffix {
|
||||
$--base-suffix-cross-color: (
|
||||
"default": rgba(255, 255, 255, .3),
|
||||
"hover": $--primary-6,
|
||||
"active": $--primary-5,
|
||||
"error-hover": $--error-5,
|
||||
"error-active": $--error-5
|
||||
) !global;
|
||||
$--base-cancel-mark-arrow-color: (
|
||||
$--base-suffix-arrow-color: (
|
||||
"default": rgba(255, 255, 255, .3),
|
||||
"active": $--primary-6,
|
||||
"error-active": $--error-6
|
||||
@ -5,7 +5,7 @@
|
||||
@import 'components/BaseLoading.scss';
|
||||
@import 'components/BaseSelectMenu.scss';
|
||||
@import 'components/BasePicker.scss';
|
||||
@import 'components/BaseCancelMark.scss';
|
||||
@import 'components/BaseSuffix.scss';
|
||||
@import 'components/Tag.scss';
|
||||
@import 'components/Table.scss';
|
||||
@import 'components/AdvanceTable.scss';
|
||||
@ -92,7 +92,7 @@
|
||||
@include setup-dark-button;
|
||||
@include setup-dark-base-select-menu;
|
||||
@include setup-dark-base-picker;
|
||||
@include setup-dark-base-cancel-mark;
|
||||
@include setup-dark-base-suffix;
|
||||
@include setup-dark-tag;
|
||||
@include setup-dark-table;
|
||||
@include setup-dark-data-table;
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
@mixin setup-light-base-cancel-mark {
|
||||
$--base-cancel-mark-cross-color: (
|
||||
@mixin setup-light-base-suffix {
|
||||
$--base-suffix-cross-color: (
|
||||
"default": $--n-border-color,
|
||||
"hover": $--primary-5,
|
||||
"active": $--primary-7
|
||||
) !global;
|
||||
$--base-cancel-mark-arrow-color: (
|
||||
$--base-suffix-arrow-color: (
|
||||
"default": $--n-border-color,
|
||||
"active": $--primary-6
|
||||
) !global;
|
||||
@ -5,7 +5,7 @@
|
||||
@import 'components/BaseLoading.scss';
|
||||
@import 'components/BaseSelectMenu.scss';
|
||||
@import 'components/BasePicker.scss';
|
||||
@import 'components/BaseCancelMark.scss';
|
||||
@import 'components/BaseSuffix.scss';
|
||||
@import 'components/Tag.scss';
|
||||
@import 'components/Table.scss';
|
||||
@import 'components/AdvanceTable.scss';
|
||||
@ -91,7 +91,7 @@
|
||||
@include setup-light-button;
|
||||
@include setup-light-base-select-menu;
|
||||
@include setup-light-base-picker;
|
||||
@include setup-light-base-cancel-mark;
|
||||
@include setup-light-base-suffix;
|
||||
@include setup-light-tag;
|
||||
@include setup-light-table;
|
||||
@include setup-light-data-table;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user