refactor(base-cancel-mark): rename to base suffix

demo/debugComponents/suffixDebug/basic.demo.vue

@@ -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

demo/init.js

@@ -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 },

demo/menuOptions.js

@@ -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',
+            name: 'SuffixDebug',
-            path: `/${instance.lang}/${instance.theme}` + '/n-cancel-mark-debug'
+            path: `/${instance.lang}/${instance.theme}` + '/n-base-suffix-debug'
           },
           {
             name: 'PopoverDebug',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.7.9",
+  "version": "0.7.10",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",

src/Input/src/Input.vue

@@ -105,10 +105,10 @@
       <div
         class="n-input__suffix"
       >
-        <div class="n-input__cancel-mark">
+        <div class="n-input-clear">
-          <n-cancel-mark
+          <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)

src/_base/CancelMark/index.js

@@ -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

src/_base/Picker/src/main.vue

@@ -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 : '&nbsp;' }}</span>
         </div>
-        <n-base-cancel-mark
+        <n-base-suffix
-          ref="cancelMark"
+          ref="suffix"
           class="n-base-picker__mark"
           :arrow="showArrow"
           :theme="theme"
@@ -125,8 +125,8 @@
           @blur="handlePatternInputBlur"
           @input="handlePatternInputInput"
         >
-        <n-base-cancel-mark
+        <n-base-suffix
-          ref="cancelMark"
+          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: {

src/_base/Suffix/index.js

@@ -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

src/_base/Suffix/src/CancelIcon.vue

@@ -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>

src/_base/Suffix/src/main.vue

@@ -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-base-suffix-arrow--active': active,
-            'n-cancel-mark-arrow--disabled': disabled
+            '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,

styles/BaseSuffix.scss

@@ -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-left: 1px solid map-get($--base-suffix-arrow-color, 'default');
-        border-bottom: 1px solid map-get($map: $--base-cancel-mark-arrow-color, $key: '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-left: 1px solid map-get($--base-suffix-arrow-color, 'active');
-          border-bottom: 1px solid map-get($map: $--base-cancel-mark-arrow-color, $key: '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-left: 1px solid map-get($--base-suffix-arrow-color, 'error-active');
-            border-bottom: 1px solid map-get($map: $--base-cancel-mark-arrow-color, $key: 'error-active');
+            border-bottom: 1px solid map-get($--base-suffix-arrow-color, 'error-active');
           }
         }
       }

styles/Input.scss

@@ -133,7 +133,7 @@
         justify-content: flex-start;
         left: 12px;
       }
-      @include e(cancel-mark) {
+      @include b(input-clear) {
         display: flex;
         margin-right: 4px;
       }

styles/themes/dark/components/BaseSuffix.scss

@@ -1,12 +1,12 @@
-@mixin setup-dark-base-cancel-mark {
+@mixin setup-dark-base-suffix {
-  $--base-cancel-mark-cross-color: (
+  $--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

styles/themes/dark/index.scss

@@ -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;

styles/themes/light/components/BaseSuffix.scss

@@ -1,10 +1,10 @@
-@mixin setup-light-base-cancel-mark {
+@mixin setup-light-base-suffix {
-  $--base-cancel-mark-cross-color: (
+  $--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;

styles/themes/light/index.scss

@@ -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;