refactor(modal): code clean

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

@@ -4,7 +4,7 @@
   @theme-change="handleThemeChange"
   @namespace-change="handleNamespaceChange"
 >
-  <template slot-scope="{ theme, namespace }">
+  <template v-slot="{ theme, namespace }">
     <div>
       <div>theme: {{ theme }}</div>
       <div>namespace: {{ namespace }}</div>

packages/common/Modal/src/DeprecatedModal.vue

@@ -96,18 +96,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.n-modal-activator {
-  display: inline-block;
-}
-
-.n-modal-container {
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 0;
-  width: 0;
-  display: flex;
-}
-</style>

packages/common/Modal/src/Modal.vue

@@ -176,18 +176,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.n-modal-activator {
-  display: inline-block;
-}
-
-.n-modal-container {
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 0;
-  width: 0;
-  display: flex;
-}
-</style>

packages/common/Modal/src/ModalContent.vue

@@ -55,8 +55,8 @@
 
 <script>
 import NScrollbar from '../../Scrollbar'
-import NConfirm from './Confirm'
-import NForm from './Form'
+import NConfirm from './presets/Confirm'
+import NForm from './presets/Form'
 
 let mousePosition = null
 
@@ -230,7 +230,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-
-</style>

packages/common/Modal/src/Overlay.vue

@@ -18,35 +18,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.n-modal-overlay {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, .4);
-}
-
-.n-modal-content {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  overflow: visible;
-}
-
-.n-modal-overlay--transition-enter-active {
-  transition: background-color .3s cubic-bezier(0.0, 0.0, 0.2, 1);
-}
-
-.n-modal-overlay--transition-leave-active {
-  transition: background-color .3s cubic-bezier(0.0, 0.0, 0.2, 1);
-}
-
-.n-modal-overlay--transition-enter, .n-modal-overlay--transition-leave-to {
-  background-color: rgba(0, 0, 0, 0);
-}
-</style>

packages/common/Modal/src/presets/Confirm.vue

@@ -65,21 +65,19 @@
   </div>
 </template>
 <script>
-import NIcon from '../../Icon'
-import NModal from '../../Modal'
-import NButton from '../../Button'
-import iosCheckmarkCircle from '../../../icons/ios-checkmark-circle'
-import mdClose from '../../../icons/md-close'
-import iosHelpCircle from '../../../icons/ios-help-circle'
-import iosCloseCircle from '../../../icons/ios-close-circle'
-import withapp from '../../../mixins/withapp'
-import themeable from '../../../mixins/themeable'
+import NIcon from '../../../Icon'
+import NButton from '../../../Button'
+import iosCheckmarkCircle from '../../../../icons/ios-checkmark-circle'
+import mdClose from '../../../../icons/md-close'
+import iosHelpCircle from '../../../../icons/ios-help-circle'
+import iosCloseCircle from '../../../../icons/ios-close-circle'
+import withapp from '../../../../mixins/withapp'
+import themeable from '../../../../mixins/themeable'
 
 export default {
   name: 'NConfirm',
   components: {
     NIcon,
-    NModal,
     NButton,
     mdClose,
     iosHelpCircle,

packages/common/Modal/src/presets/Form.vue

@@ -54,8 +54,8 @@
 </template>
 
 <script>
-import withapp from '../../../mixins/withapp'
-import themeable from '../../../mixins/themeable'
+import withapp from '../../../../mixins/withapp'
+import themeable from '../../../../mixins/themeable'
 
 export default {
   name: 'NForm',

styles/Modal.scss

@@ -18,6 +18,45 @@
   }
 }
 
+.n-modal-container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 0;
+  width: 0;
+  display: flex;
+}
+
+.n-modal-overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, .4);
+}
+
+.n-modal-content {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow: visible;
+}
+
+.n-modal-overlay--transition-enter-active {
+  transition: background-color .3s cubic-bezier(0.0, 0.0, 0.2, 1);
+}
+
+.n-modal-overlay--transition-leave-active {
+  transition: background-color .3s cubic-bezier(0.0, 0.0, 0.2, 1);
+}
+
+.n-modal-overlay--transition-enter, .n-modal-overlay--transition-leave-to {
+  background-color: rgba(0, 0, 0, 0);
+}
+
 .n-modal-content--transition-enter-active {
   opacity: 1;
   transition: opacity .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(0.0, 0.0, 0.2, 1);