Merge pull request #8 from wanli-song/develop

feat(spin): light ui

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

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

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

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

demo/documentation/components/spin/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>

demo/init.js

@@ -61,7 +61,7 @@ import popselectDemo from './documentation/components/popselectDemo'
 import app from './documentation/components/app'
 import advanceTableDemos from './documentation/components/advanceTableDemos'
 import transferDemo from './documentation/components/transferDemo'
-import spinDemo from './documentation/components/spinDemo'
+import spin from './documentation/components/spin'
 import drawerDemo from './documentation/components/drawerDemo'
 import loadingBar from './documentation/components/loadingBar'
 import timeDemo from './documentation/components/timeDemo'
@@ -181,7 +181,7 @@ const routes = [
       { path: '/n-app', component: app },
       { path: '/n-cancel-mark-debug', component: cancelMarkDebug },
       { path: '/n-transfer', component: transferDemo },
-      { path: '/n-spin', component: spinDemo },
+      { path: '/n-spin', component: spin },
       { path: '/n-drawer', component: drawerDemo },
       { path: '/n-loading-bar', component: loadingBar },
       { path: '/n-time', component: timeDemo },

packages/base/Loading/src/main.vue

@@ -1,18 +1,23 @@
 <template>
-  <div class="n-base-loading">
+  <div
+    :class="{[`n-${theme}-theme`]: theme}"
+    class="n-base-loading"
+  >
     <svg
-      viewBox="25 25 50 50"
       class="n-base-loading-circular"
-    ><circle
-      cx="50"
-      cy="50"
-      r="20"
-      fill="none"
-      :style="{
-        strokeWidth
-      }"
-      class="n-base-loading-circular-path"
-    /></svg>
+      viewBox="25 25 50 50"
+    >
+      <circle
+        :style="{
+          strokeWidth
+        }"
+        class="n-base-loading-circular-path"
+        cx="50"
+        cy="50"
+        fill="none"
+        r="20"
+      />
+    </svg>
   </div>
 </template>
 
@@ -20,6 +25,10 @@
 export default {
   name: 'NBaseLoading',
   props: {
+    theme: {
+      type: String,
+      default: ''
+    },
     strokeWidth: {
       type: Number,
       default: null
@@ -30,44 +39,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.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;
-  }
-}
-
-@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
-  }
-}
-</style>

packages/common/Spin/src/main.vue

@@ -5,41 +5,46 @@
   >
     <transition name="n-spin--transition">
       <n-base-loading
-        v-if="spinning"
-        class="n-spin"
-        :stroke-width="strokeWidth"
         :class="{
           [`n-spin--${size}-size`]: true
         }"
+        :stroke-width="strokeWidth"
+        :theme="synthesizedTheme"
+        v-if="spinning"
+        class="n-spin"
       />
     </transition>
     <div
-      class="n-spin-content"
       :class="{
         'n-spin-content--spinning': spinning
       }"
+      class="n-spin-content"
     >
       <slot />
     </div>
   </div>
   <n-base-loading
-    v-else
-    class="n-spin"
-    :stroke-width="strokeWidth"
     :class="{
       [`n-spin--${size}-size`]: size
     }"
+    :stroke-width="strokeWidth"
+    :theme="synthesizedTheme"
+    v-else
+    class="n-spin"
   />
 </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],
@@ -54,8 +59,6 @@ export default {
       default: null
     }
   },
-  methods: {
-
-  }
+  methods: {}
 }
 </script>

styles/BaseLoading.scss

@@ -0,0 +1,49 @@
+@import './mixins/mixins.scss';
+@import './themes/vars.scss';
+
+
+@keyframes n-base-loading-rotate {
+  to {
+    transform: rotate(1turn)
+  }
+}
+
+@keyframes n-base-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: n-base-loading-rotate 2s linear infinite;
+      }
+      @include b(base-loading-circular-path) {
+        stroke: $--base-loading-stroke;
+        @include once {
+          transition: stroke .3s $default-cubic-bezier;
+          animation: n-base-loading-dash 1.5s ease-in-out infinite;
+          stroke-dasharray: 90,150;
+          stroke-dashoffset: 0;
+          stroke-width: 8;
+          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 "./BaseLoading.scss"

styles/themes/dark/components/BaseLoading.scss

@@ -0,0 +1,3 @@
+@mixin setup-dark-base-loading {
+  $--base-loading-stroke: $--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/BaseLoading.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-base-loading;
   @include setup-dark-button;
   @include setup-dark-base-select-menu;
   @include setup-dark-base-picker;

styles/themes/light/components/BaseLoading.scss

@@ -0,0 +1,3 @@
+@mixin setup-light-base-loading {
+  $--base-loading-stroke: $--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/BaseLoading.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-base-loading;
   @include setup-light-button;
   @include setup-light-base-select-menu;
   @include setup-light-base-picker;