refactor(holloutable): use inline css

packages/base/Loading/src/main.vue

@@ -9,7 +9,8 @@
     >
       <circle
         :style="{
-          strokeWidth
+          strokeWidth,
+          stroke
         }"
         class="n-base-loading-circular-path"
         cx="50"
@@ -32,6 +33,10 @@ export default {
     strokeWidth: {
       type: Number,
       default: null
+    },
+    stroke: {
+      type: String,
+      default: null
     }
   },
   mounted () {

packages/common/Button/src/main.vue

@@ -31,16 +31,14 @@
       >
         <n-spin
           v-if="loading"
-          :class="{
+          :stroke="simulateHollowOut ? ascendantBackgroundColor : null"
-            'simulate-hollow-out-stroke': simulateHollowOut
-          }"
           :size="null"
           :stroke-width="4"
         />
         <n-icon
           v-else
-          :class="{
+          :style="{
-            'simulate-hollow-out-fill': simulateHollowOut
+            fill: simulateHollowOut ? ascendantBackgroundColor : null
           }"
           class="n-icon-slot"
         >
@@ -53,10 +51,9 @@
     <div
       v-if="!circle && $slots.default"
       class="n-button__content"
-      :class="{
+      :style="{
-        'simulate-hollow-out-text': simulateHollowOut
+        color: simulateHollowOut ? ascendantBackgroundColor : null
       }"
-      :style="style"
     >
       <slot />
     </div>
@@ -77,16 +74,14 @@
       >
         <n-spin
           v-if="loading"
-          :class="{
+          :stroke="simulateHollowOut ? ascendantBackgroundColor : null"
-            'simulate-hollow-out-stroke': simulateHollowOut
-          }"
           :stroke-width="4"
         />
         <n-icon
           v-else
           class="n-icon-slot"
-          :class="{
+          :style="{
-            'simulate-hollow-out-fill': simulateHollowOut
+            fill: simulateHollowOut ? ascendantBackgroundColor : null
           }"
         >
           <slot
@@ -172,7 +167,6 @@ export default {
   },
   data () {
     return {
-      style: {},
       enterPressed: false,
       rippling: false,
       rippleTimer: null

packages/common/Radio/src/RadioButton.vue

@@ -3,8 +3,7 @@
     class="n-radio-button"
     :class="{
       'n-radio-button--disabled': disabled,
-      'n-radio-button--checked': checked,
+      'n-radio-button--checked': checked
-      'simulate-hollow-out-text': shouldSimulateHollowOutText
     }"
     :tabindex="disabled ? -1 : 0"
     @keyup.enter="handleKeyUpEnter"
@@ -42,9 +41,9 @@ export default {
     }
   },
   computed: {
-    shouldSimulateHollowOutText () {
+    // shouldSimulateHollowOutText () {
-      return this.checked && (this.NRadioGroup.synthesizedTheme === 'dark')
+    //   return this.checked && (this.NRadioGroup.synthesizedTheme === 'dark')
-    },
+    // },
     checked () {
       if (this.NRadioGroup) {
         return this.NRadioGroup.value === this.value

packages/common/Slider/src/main.vue

@@ -23,14 +23,17 @@
         <div
           v-for="mark in computedMarks"
           :key="mark.label"
-          class="n-slider-dot simulate-hollow-out-background"
+          class="n-slider-dot"
-          :style="mark.style"
+          :style="{
+            backgroundColor: ascendantBackgroundColor,
+            ...mark.style
+          }"
         />
       </div>
     </div>
     <div
       ref="firstHandle"
-      class="n-slider-handle simulate-hollow-out-background"
+      class="n-slider-handle"
       tabindex="0"
       :style="firstHandleStyle"
       @mousedown="handleFirstHandleMouseDown"
@@ -40,7 +43,7 @@
     <div
       v-if="range"
       ref="secondHandle"
-      class="n-slider-handle simulate-hollow-out-background"
+      class="n-slider-handle"
       tabindex="0"
       :style="secondHandleStyle"
       @mousedown="handleSecondHandleMouseDown"
@@ -221,12 +224,14 @@ export default {
     },
     firstHandleStyle () {
       return {
+        backgroundColor: this.ascendantBackgroundColor,
         left: ((this.firstHandleValue - this.min) / (this.max - this.min) * 100) + '%',
         zIndex: this.firstHandleActive ? 1 : 0
       }
     },
     secondHandleStyle () {
       return {
+        backgroundColor: this.ascendantBackgroundColor,
         left: ((this.secondHandleValue - this.min) / (this.max - this.min) * 100) + '%',
         zIndex: this.secondHandleActive ? 1 : 0
       }

packages/common/Spin/src/main.vue

@@ -5,12 +5,13 @@
   >
     <transition name="n-spin--transition">
       <n-base-loading
+        v-if="spinning"
         :class="{
           [`n-spin--${size}-size`]: true
         }"
+        :stroke="stroke"
         :stroke-width="strokeWidth"
         :theme="synthesizedTheme"
-        v-if="spinning"
         class="n-spin"
       />
     </transition>
@@ -24,12 +25,13 @@
     </div>
   </div>
   <n-base-loading
+    v-else
     :class="{
       [`n-spin--${size}-size`]: size
     }"
+    :stroke="stroke"
     :stroke-width="strokeWidth"
     :theme="synthesizedTheme"
-    v-else
     class="n-spin"
   />
 </template>
@@ -46,6 +48,10 @@ export default {
   },
   mixins: [withapp, themeable],
   props: {
+    stroke: {
+      type: String,
+      default: null
+    },
     size: {
       type: [String, Number],
       default: 'medium'

packages/common/Steps/src/Step.vue

@@ -13,20 +13,22 @@
         >
           <n-icon
             v-if="synthesizedStatus === 'finish'"
-            type="md-checkmark"
+          >
-          />
+            <md-checkmark />
+          </n-icon>
           <n-icon
             v-else-if="synthesizedStatus === 'error'"
-            type="md-close"
+          >
-          />
+            <md-close />
+          </n-icon>
         </div>
       </transition>
       <transition name="n-step-indicator--transition">
         <div
           v-if="!(synthesizedStatus === 'finish' || synthesizedStatus === 'error')"
           class="n-step-indicator__index"
-          :class="{
+          :style="{
-            'simulate-hollow-out-text': synthesizedStatus === 'process'
+            color: synthesizedStatus === 'process' ? ascendantBackgroundColor : null
           }"
         >
           {{ index }}
@@ -53,6 +55,8 @@
 <script>
 import NIcon from '../../Icon'
 import hollowoutable from '../../../mixins/hollowoutable'
+import mdClose from '../../../icons/md-close'
+import mdCheckmark from '../../../icons/md-checkmark'
 
 export default {
   name: 'NStep',
@@ -62,7 +66,9 @@ export default {
     }
   },
   components: {
-    NIcon
+    NIcon,
+    mdCheckmark,
+    mdClose
   },
   mixins: [hollowoutable],
   props: {

packages/common/Timeline/src/TimelineItem.vue

@@ -7,7 +7,12 @@
   >
     <div class="n-timeline-item-timeline">
       <div class="n-timeline-item-timeline__line" />
-      <div class="n-timeline-item-timeline__circle simulate-hollow-out-background" />
+      <div
+        class="n-timeline-item-timeline__circle"
+        :style="{
+          backgroundColor: ascendantBackgroundColor
+        }"
+      />
     </div>
     <div class="n-timeline-item-content">
       <div

packages/mixins/hollowoutable.js

@@ -1,4 +1,4 @@
-import HollowOutStyleManager from '../utils/HollowOutStyleManager'
+// import HollowOutStyleManager from '../utils/HollowOutStyleManager'
 
 export default {
   watch: {
@@ -11,8 +11,7 @@ export default {
   },
   data () {
     return {
-      ascendantBackgroundColor: null,
+      ascendantBackgroundColor: null
-      CSSNode: null
     }
   },
   methods: {
@@ -38,17 +37,17 @@ export default {
           break
         }
       }
-      HollowOutStyleManager.registerComponent(this.hollowOutBackgroundColorId, this.ascendantBackgroundColor)
+      // HollowOutStyleManager.registerComponent(this.hollowOutBackgroundColorId, this.ascendantBackgroundColor)
     }
   },
   mounted () {
-    this.hollowOutBackgroundColorId = 'x' + Math.random().toString(16).slice(9)
+    // this.hollowOutBackgroundColorId = 'x' + Math.random().toString(16).slice(9)
-    this.$el.setAttribute('n-hollowoutable-id', this.hollowOutBackgroundColorId)
+    // this.$el.setAttribute('n-hollowoutable-id', this.hollowOutBackgroundColorId)
     if (this.avoidHollowOut) return
     this.updateHollowOutStyle()
   },
   beforeDestroy () {
-    const id = this.hollowOutBackgroundColorId
+    // const id = this.hollowOutBackgroundColorId
-    HollowOutStyleManager.unregisterComponent(id, 1000)
+    // HollowOutStyleManager.unregisterComponent(id, 1000)
   }
 }

packages/utils/HollowOutStyleManager.js

@@ -1,51 +0,0 @@
-class HollowOutStyleManager {
-  constructor () {
-    this.idStyleMap = new Map()
-    this.CSSNode = document.createElement('style')
-    this.CSSNode.type = 'text/css'
-  }
-  styleForComponent (id, backgroundColor) {
-    if (!backgroundColor) return ''
-    return `[n-hollowoutable-id=${id}] .simulate-hollow-out-text {
-  color: ${backgroundColor}!important;
-}
-[n-hollowoutable-id=${id}] .simulate-hollow-out-background {
-  background-color: ${backgroundColor}!important;
-}
-[n-hollowoutable-id=${id}] .simulate-hollow-out-stroke circle {
-  stroke: ${backgroundColor}!important;
-}
-[n-hollowoutable-id=${id}] .simulate-hollow-out-fill path {
-  fill: ${backgroundColor}!important;
-}
-`
-  }
-  get styleLiteral () {
-    let style = ''
-    this.idStyleMap.forEach((value) => {
-      style += value
-    })
-    // console.log('styleLiteral', style)
-    return style
-  }
-  updateCSSNode () {
-    this.CSSNode.innerHTML = this.styleLiteral
-    const headEl = document.querySelector('head')
-    if (!headEl.contains(this.CSSNode)) {
-      headEl.appendChild(this.CSSNode)
-    }
-  }
-  registerComponent (id, backgroundColor) {
-    // console.log('registerComponent', id, backgroundColor)
-    this.idStyleMap.set(id, this.styleForComponent(id, backgroundColor))
-    this.updateCSSNode()
-  }
-  unregisterComponent (id, delay) {
-    this.idStyleMap.delete(id)
-    window.setTimeout(() => {
-      this.updateCSSNode()
-    }, delay)
-  }
-}
-
-export default new HollowOutStyleManager()

styles/Radio.scss

@@ -141,7 +141,7 @@
         cursor: pointer;
         &:hover {
           @include e(border-mask) {
-            box-shadow: inset 0 0 0 $--radio-border-mask-width map-get($--radio-button-border-color, 'hover');
+            box-shadow: map-get($--radio-button-box-shadow, 'hover');
             transition: box-shadow .3s $default-cubic-bezier;
           }
           @include not-m(checked) {
@@ -150,7 +150,7 @@
         }
         &:focus:not(:active) {
           @include e(border-mask) {
-            box-shadow: inset 0 0 0 1px map-get($--radio-button-label-color, 'active'), 0 0 0 2px change-color(map-get($--radio-button-label-color, 'active'), $alpha: .3);
+            box-shadow: map-get($--radio-button-box-shadow, 'focus')
           }
         }
       }

styles/Slider.scss

@@ -101,7 +101,7 @@
       top: 50%;
       right: 0;
       @include b(slider-dot) {
-        transition: box-shadow .3s $default-cubic-bezier;
+        transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
         position: absolute;
         transform: translateX(-50%) translateY(-50%);
         height: $--slider-dot-size;

styles/Steps.scss

@@ -17,9 +17,12 @@
     @include b(step-indicator) {
       background-color: map-get($--steps-step-background-color, $status);
       box-shadow: 0 0 0 1px map-get($--steps-step-border-color, $status);
-      @include e(icon, index) {
+      @include e(index) {
         color: map-get($--steps-step-indicator-color, $status);
       }
+      @include e(icon) {
+        fill: map-get($--steps-step-indicator-color, $status);
+      }
     }
   }
 }
@@ -95,7 +98,7 @@
       @include e(icon) {
         @include fade-in-transition-ease-in-out(step-indicator, .3s);
         transition: color .3s $default-cubic-bezier;
-        color: rgba(255,255,255,0.3);
+        fill: rgba(255,255,255,0.3);
         width: 16px;
         height: 16px;
         font-size: 16px;

styles/themes/dark/components/Radio.scss

@@ -22,9 +22,13 @@
   ) !global;
   $--radio-button-label-color: (
     'default': $--n-secondary-text-color,
-    'active': $--n-primary-color,
+    'active': black,
     'hover': $--n-primary-color
   ) !global;
   $--radio-disabled-opacity: .4 !global;
   $--radio-border-mask-width: 1px !global;
+  $--radio-button-box-shadow: (
+    'focus': (inset 0 0 0 1px $--n-primary-color, 0 0 0 2px change-color($--n-primary-color, $alpha: .3)),
+    'hover': inset 0 0 0 $--radio-border-mask-width $--n-primary-color
+  ) !global;
 }

styles/themes/light/components/Radio.scss

@@ -27,4 +27,8 @@
   ) !global;
   $--radio-disabled-opacity: .4 !global;
   $--radio-border-mask-width: 0px !global;
+  $--radio-button-box-shadow: (
+    'focus': (inset 0 0 0 1px $--n-primary-color, 0 0 0 2px change-color($--n-primary-color, $alpha: .3)),
+    'hover': inset 0 0 0 $--radio-border-mask-width $--n-primary-color
+  ) !global;
 }