add theme to spin

demo/documentation/components/spinDemo/enUS/basic.md

@@ -0,0 +1,4 @@
+# Basic
+```html
+<n-spin size="small" /> <n-spin size="medium" /> <n-spin size="large" />
+```

demo/documentation/components/spinDemo/enUS/index.md

@@ -0,0 +1,5 @@
+# Divider
+```demo
+basic
+wrap
+```

demo/documentation/components/spinDemo/enUS/wrap.md

@@ -0,0 +1,54 @@
+# Wrap
+```html
+<div
+>
+  <n-spin
+    style="display:inline-block"
+    size="in-small"
+    :spinning="spinning"
+  >
+    <n-button size="small">
+      Small Spin
+    </n-button>
+  </n-spin>
+  <n-spin
+    style="display:inline-block"
+    size="in-medium"
+    :spinning="spinning"
+  >
+    <n-button size="medium">
+      Medium Spin
+    </n-button>
+  </n-spin>
+  <n-spin
+    style="display:inline-block"
+    size="in-large"
+    :spinning="spinning"
+  >
+    <n-button size="large">
+      Large Spin
+    </n-button>
+  </n-spin>
+  <n-spin
+    style="display:inline-block" 
+    :spinning="spinning"
+  >
+    <n-alert
+      title="Success Text"
+      type="success"
+    >
+      Leave it till tomorrow to unpack my case
+    </n-alert>
+  </n-spin>
+</div>
+ <pre class="n-doc-section__inspect"><n-button @click="spinning = !spinning">spin</n-button></pre>
+```
+```js
+export default {
+  data () {
+    return {
+      spinning: false
+    }
+  }
+}
+```

demo/documentation/components/spinDemo/index.vue

@@ -1,35 +0,0 @@
-<template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
-    <div class="n-doc-header">
-      <n-gradient-text :font-size="20">
-        Spin / n-spin
-      </n-gradient-text>
-    </div>
-    <div class="n-doc-body">
-      <scaffold />
-      <wrap />
-    </div>
-  </div>
-</template>
-
-<script>
-import scaffold from './scaffold.demo.vue'
-import wrap from './wrap.demo.vue'
-
-export default {
-  components: {
-    scaffold,
-    wrap
-  },
-  data () {
-    return {
-
-    }
-  },
-  methods: {
-  }
-}
-</script>

demo/documentation/components/spinDemo/scaffold.demo.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      BasicUsage
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="flex-wrap: nowrap;"
-    >
-      <!--EXAMPLE_START-->
-      <n-spin size="small" /> <n-spin size="medium" /> <n-spin size="large" />
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect">Inspect some value here</pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-    }
-  }
-}
-</script>

demo/documentation/components/spinDemo/wrap.demo.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="n-doc-section">
-    <div class="n-doc-section__header">
-      Wrap
-    </div>
-    <div
-      class="n-doc-section__view"
-      style="align-items: flex-start;"
-    >
-      <!--EXAMPLE_START-->
-      <n-spin
-        size="in-small"
-        :spinning="spinning"
-      >
-        <n-button size="small">
-          Small Spin
-        </n-button>
-      </n-spin>
-      <n-spin
-        size="in-medium"
-        :spinning="spinning"
-      >
-        <n-button size="medium">
-          Medium Spin
-        </n-button>
-      </n-spin>
-      <n-spin
-        size="in-large"
-        :spinning="spinning"
-      >
-        <n-button size="large">
-          Large Spin
-        </n-button>
-      </n-spin>
-      <n-spin :spinning="spinning">
-        <n-alert
-          title="Success Text"
-          type="success"
-        >
-          Leave it till tomorrow to unpack my case
-        </n-alert>
-      </n-spin>
-      <!--EXAMPLE_END-->
-    </div>
-    <pre class="n-doc-section__inspect"><n-button @click="spinning = !spinning">spin</n-button></pre>
-    <n-doc-source-block>
-      <!--SOURCE-->
-    </n-doc-source-block>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      spinning: false
-    }
-  }
-}
-</script>

packages/base/Loading/src/main.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="n-base-loading">
+  <div
+    class="n-base-loading"
+    :class="{[`n-${theme}-theme`]: theme}"
+  >
     <svg
       viewBox="25 25 50 50"
       class="n-base-loading-circular"
@@ -17,9 +20,20 @@
 </template>
 
 <script>
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
+
 export default {
   name: 'NBaseLoading',
+  mixins: [
+    withapp,
+    themeable
+  ],
   props: {
+    theme: {
+      type: String,
+      default: ''
+    },
     strokeWidth: {
       type: Number,
       default: null
@@ -32,42 +46,42 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.n-base-loading {
+// .n-base-loading {
-  line-height: 1;
+//   line-height: 1;
-}
+// }
 
-.n-base-loading-circular {
+// .n-base-loading-circular {
-  height: 100%;
+//   height: 100%;
-  width: 100%;
+//   width: 100%;
-  animation: loading-rotate 2s linear infinite;
+//   animation: loading-rotate 2s linear infinite;
-  .n-base-loading-circular-path {
+//   .n-base-loading-circular-path {
-    animation: loading-dash 1.5s ease-in-out infinite;
+//     animation: loading-dash 1.5s ease-in-out infinite;
-    stroke-dasharray: 90,150;
+//     stroke-dasharray: 90,150;
-    stroke-dashoffset: 0;
+//     stroke-dashoffset: 0;
-    stroke-width: 8;
+//     stroke-width: 8;
-    stroke: #63E2B7;
+//     stroke: #63E2B7;
-    stroke-linecap: round;
+//     stroke-linecap: round;
-  }
+//   }
-}
+// }
 
-@keyframes loading-rotate {
+// @keyframes loading-rotate {
-  to {
+//   to {
-    transform: rotate(1turn)
+//     transform: rotate(1turn)
-  }
+//   }
-}
+// }
 
-@keyframes loading-dash {
+// @keyframes loading-dash {
-  0% {
+//   0% {
-    stroke-dasharray: 1,200;
+//     stroke-dasharray: 1,200;
-    stroke-dashoffset: 0
+//     stroke-dashoffset: 0
-  }
+//   }
-  50% {
+//   50% {
-    stroke-dasharray: 90,150;
+//     stroke-dasharray: 90,150;
-    stroke-dashoffset: -40px
+//     stroke-dashoffset: -40px
-  }
+//   }
-  to {
+//   to {
-    stroke-dasharray: 90,150;
+//     stroke-dasharray: 90,150;
-    stroke-dashoffset: -120px
+//     stroke-dashoffset: -120px
-  }
+//   }
-}
+// }
 </style>

packages/common/Spin/src/main.vue

@@ -11,6 +11,7 @@
         :class="{
           [`n-spin--${size}-size`]: true
         }"
+        :theme="synthesizedTheme"
       />
     </transition>
     <div
@@ -29,17 +30,24 @@
     :class="{
       [`n-spin--${size}-size`]: size
     }"
+    :theme="synthesizedTheme"
   />
 </template>
 
 <script>
 import NBaseLoading from '../../../base/Loading'
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
 
 export default {
   name: 'NSpin',
   components: {
     NBaseLoading
   },
+  mixins: [
+    withapp,
+    themeable
+  ],
   props: {
     size: {
       type: [String, Number],

styles/Loading.scss

@@ -0,0 +1,65 @@
+@import './mixins/mixins.scss';
+@import './themes/vars.scss';
+
+
+@keyframes loading-rotate {
+  to {
+    transform: rotate(1turn)
+  }
+}
+
+@keyframes loading-dash {
+  0% {
+    stroke-dasharray: 1,200;
+    stroke-dashoffset: 0
+  }
+  50% {
+    stroke-dasharray: 90,150;
+    stroke-dashoffset: -40px
+  }
+  to {
+    stroke-dasharray: 90,150;
+    stroke-dashoffset: -120px
+  }
+}
+@include themes-mixin {
+  @include b(base-loading) {
+    @include once {
+      line-height: 1;
+    }
+    @include b(base-loading-circular) {
+      @include once {
+        height: 100%;
+        width: 100%;
+        animation: loading-rotate 2s linear infinite;
+      }
+      @include b(base-loading-circular-path) {
+        stroke: $--loading-border-color;
+        @include once {
+          animation: loading-dash 1.5s ease-in-out infinite;
+          stroke-dasharray: 90,150;
+          stroke-dashoffset: 0;
+          stroke-width: 8;
+          stroke-linecap: round;
+        }
+      }
+    }
+  }
+}
+// .n-base-loading {
+//   line-height: 1;
+// }
+
+// .n-base-loading-circular {
+//   height: 100%;
+//   width: 100%;
+//   animation: loading-rotate 2s linear infinite;
+//   .n-base-loading-circular-path {
+//     animation: loading-dash 1.5s ease-in-out infinite;
+//     stroke-dasharray: 90,150;
+//     stroke-dashoffset: 0;
+//     stroke-width: 8;
+//     stroke: #63E2B7;
+//     stroke-linecap: round;
+//   }
+// }

styles/Spin.scss

@@ -63,4 +63,4 @@
       opacity: .5;
     }
   }
-}
+}

styles/index.scss

@@ -55,4 +55,5 @@
 @import "./Popover.scss";
 @import "./AdvancedTable.scss";
 @import "./NimbusIcon.scss";
-@import "./Confirm.scss";
+@import "./Confirm.scss";
+@import "./Loading.scss"

styles/themes/dark/components/Loading.scss

@@ -0,0 +1,3 @@
+@mixin setup-dark-loading {
+  $--loading-border-color: $--n-primary-color !global;
+}

styles/themes/dark/index.scss

@@ -3,6 +3,7 @@
 @import "components/Divider.scss";
 @import "components/NimbusServiceLayout.scss";
 @import "components/Scrollbar.scss";
+@import "components/Loading.scss";
 @import "components/BaseSelectMenu.scss";
 @import "components/BasePicker.scss";
 @import "components/BaseCancelMark.scss";
@@ -50,6 +51,7 @@
   @include setup-dark-nimbus-service-layout;
   @include setup-dark-divider;
   @include setup-dark-scrollbar;
+  @include setup-dark-loading;
   @include setup-dark-button;
   @include setup-dark-base-select-menu;
   @include setup-dark-base-picker;

styles/themes/light/components/Loading.scss

@@ -0,0 +1,3 @@
+@mixin setup-light-loading {
+  $--loading-border-color: $--n-primary-color !global;
+}

styles/themes/light/index.scss

@@ -3,6 +3,7 @@
 @import "components/Divider.scss";
 @import "components/NimbusServiceLayout.scss";
 @import "components/Scrollbar.scss";
+@import "components/Loading.scss";
 @import "components/BaseSelectMenu.scss";
 @import "components/BasePicker.scss";
 @import "components/BaseCancelMark.scss";
@@ -46,6 +47,7 @@
   @include setup-light-nimbus-service-layout;
   @include setup-light-divider;
   @include setup-light-scrollbar;
+  @include setup-light-loading;
   @include setup-light-button;
   @include setup-light-base-select-menu;
   @include setup-light-base-picker;