refactor(confirm): move presets/confirm to confirm

index.js

@@ -32,7 +32,7 @@ import NimbusConfirmCard from './packages/deprecated/ConfirmCard'
 import NimbusIcon from './packages/deprecated/Icon'
 import Scrollbar from './packages/common/Scrollbar'
 import Steps from './packages/common/Steps'
-import ConfirmModal from './packages/common/Confirm'
+import ConfirmPlugin from './packages/common/Confirm'
 import Badge from './packages/common/Badge'
 import Tag from './packages/common/Tag'
 import BackTop from './packages/common/BackTop'
@@ -60,7 +60,6 @@ import Descriptions from './packages/common/Descriptions'
 import List from './packages/common/List'
 import Menu from './packages/common/Menu'
 import Avatar from './packages/common/Avator'
-import Confirm from './packages/presets/Confirm'
 import Result from './packages/common/Result'
 import Thing from './packages/common/Thing'
 import AutoComplete from './packages/common/AutoComplete'
@@ -110,8 +109,7 @@ function install (Vue) {
   TimePicker.install(Vue)
   Scrollbar.install(Vue)
   Steps.install(Vue)
-  Confirm.install(Vue)
-  ConfirmModal.install(Vue)
+  ConfirmPlugin.install(Vue)
   Progress.install(Vue)
   Badge.install(Vue)
   Tag.install(Vue)

packages/common/Confirm/index.js

@@ -1,9 +1,12 @@
-import Confirm from './src/index.js'
+import ConfirmPlugin from './src/ConfirmPlugin.js'
+import Confirm from './src/Confirm'
 import { install } from '../../utils/installThemeAwarableProperty'
 
-Confirm.install = function (Vue) {
-  Confirm.Vue = Vue
+ConfirmPlugin.install = function (Vue) {
+  ConfirmPlugin.Vue = Vue
   install(Vue, Confirm, '$NModal')
+  Vue.component(Confirm.name, Confirm)
+  Vue.component('NNimbusConfirmCard', Confirm)
 }
 
-export default Confirm
+export default ConfirmPlugin

packages/common/Confirm/src/ConfirmEnvironment.vue

@@ -0,0 +1,77 @@
+<template>
+  <n-modal
+    v-model="active"
+    :theme="theme"
+    :activate-event="event"
+    :mask-closable="maskClosable"
+    @after-hide="handleAfterHide"
+  >
+    <n-confirm
+      :theme="theme"
+      :type="type"
+      :content="content"
+      :positive-text="positiveText"
+      :negative-text="negativeText"
+      :title="title"
+      :loading="loading"
+      @close="handleCloseClick"
+      @negative-click="handleNegativeClick"
+      @positive-click="handlePositiveClick"
+    />
+  </n-modal>
+</template>
+
+<script>
+import NModal from '../../Modal'
+import NConfirm from './Confirm'
+
+export default {
+  name: 'NConfirm',
+  components: {
+    NModal,
+    NConfirm
+  },
+  data () {
+    return {
+      theme: null,
+      maskClosable: true,
+      active: false,
+      content: null,
+      positiveText: 'Confirm',
+      negativeText: 'Cancel',
+      type: 'confirm',
+      title: null,
+      loading: false,
+      event: null,
+      onPositiveClick: () => {
+        this.active = false
+      },
+      onNegativeClick: () => {
+        this.active = false
+      },
+      onCloseClick: () => {
+        this.active = false
+      },
+      instances: null
+    }
+  },
+  methods: {
+    handleAfterHide () {
+      this.instances.delete(this)
+      this.$destroy()
+    },
+    handlePositiveClick () {
+      this.onPositiveClick(this.hide)
+    },
+    handleNegativeClick () {
+      this.onNegativeClick(this.hide)
+    },
+    handleCloseClick () {
+      this.onCloseClick(this.hide)
+    },
+    hide () {
+      this.active = false
+    }
+  }
+}
+</script>

packages/common/Confirm/src/ConfirmPlugin.js

@@ -1,4 +1,4 @@
-import Confirm from './confirm.vue'
+import ConfirmEnvironment from './ConfirmEnvironment.vue'
 
 const instances = new Set()
 
@@ -14,7 +14,7 @@ export default {
   name: 'NConfirm',
   theme: null,
   createInstance () {
-    const instance = new this.Vue(Confirm)
+    const instance = new this.Vue(ConfirmEnvironment)
     instance.$mount()
     instances.add(instance)
     instance.instances = instances

packages/common/Confirm/src/confirm.vue

@@ -1,76 +1,155 @@
 <template>
-  <n-modal
-    v-model="active"
-    :theme="theme"
-    :activate-event="event"
-    :mask-closable="maskClosable"
-    @after-hide="handleAfterHide"
+  <div
+    n-light-theme-background-color-hint="white"
+    n-dark-theme-background-color-hint="rgb(70, 75, 99)"
+    class="n-confirm"
+    :class="{
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme,
+      'n-confirm--bordered': bordered
+    }"
+    :style="synthesizedStyle"
   >
-    <n-confirm
-      :theme="theme"
-      :type="type"
-      :content="content"
-      :positive-text="positiveText"
-      :negative-text="negativeText"
-      :title="title"
-      :loading="loading"
-      @close="handleCloseClick"
-      @negative-click="handleNegativeClick"
-      @positive-click="handlePositiveClick"
-    />
-  </n-modal>
+    <div class="n-confirm-title">
+      <span class="n-confirm-title-content">
+        <n-icon
+          v-if="showIcon"
+          class="n-confirm-title-icon"
+          :class="{
+            [`n-confirm-title-icon--${type}-type`]: type
+          }"
+          size="28"
+        >
+          <slot name="icon">
+            <component :is="iconType" />
+          </slot>
+        </n-icon>
+        <slot name="header">
+          {{ title }}
+        </slot>
+      </span>
+      <n-icon
+        v-if="closable"
+        class="n-confirm-title__close-mark"
+        type="md-close"
+        size="22"
+        style="cursor:pointer;"
+        @click="handleCloseClick"
+      >
+        <md-close />
+      </n-icon>
+    </div>
+    <div class="n-confirm__content">
+      <slot name="content">
+        {{ content }}
+      </slot>
+    </div>
+    <div class="n-confirm__footer">
+      <slot name="footer">
+        <n-button
+          v-if="negativeText"
+          :theme="theme"
+          style="margin-right:12px;"
+          round
+          size="small"
+          @click="handleNegativeClick"
+        >
+          {{ negativeText }}
+        </n-button>
+        <n-button
+          :theme="theme"
+          round
+          :disabled="loading === true"
+          :loading="loading"
+          size="small"
+          type="primary"
+          auto-text-color
+          @click="handlePositiveClick"
+        >
+          {{ positiveText }}
+        </n-button>
+      </slot>
+    </div>
+  </div>
 </template>
-
 <script>
-import NModal from '../../Modal'
-import NConfirm from '../../../presets/Confirm'
+import NIcon from '../../../common/Icon'
+import NButton from '../../../common/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 asthemecontext from '../../../mixins/asthemecontext'
 
 export default {
   name: 'NConfirm',
   components: {
-    NModal,
-    NConfirm
+    NIcon,
+    NButton,
+    mdClose,
+    iosHelpCircle,
+    iosCheckmarkCircle,
+    iosCloseCircle
   },
-  data () {
-    return {
-      theme: null,
-      maskClosable: true,
-      active: false,
-      content: null,
-      positiveText: 'Confirm',
-      negativeText: 'Cancel',
-      type: 'confirm',
-      title: null,
-      loading: false,
-      event: null,
-      onPositiveClick: () => {
-        this.active = false
-      },
-      onNegativeClick: () => {
-        this.active = false
-      },
-      onCloseClick: () => {
-        this.active = false
-      },
-      instances: null
+  mixins: [withapp, themeable, asthemecontext],
+  props: {
+    type: {
+      type: String,
+      default: 'confirm'
+    },
+    title: {
+      type: String,
+      default: 'Confirm'
+    },
+    closable: {
+      type: Boolean,
+      default: true
+    },
+    negativeText: {
+      type: String,
+      default: 'Cancel'
+    },
+    positiveText: {
+      type: String,
+      default: 'Confirm'
+    },
+    content: {
+      type: String,
+      default: 'content'
+    },
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    bordered: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    iconType () {
+      const colors = {
+        error: 'ios-close-circle',
+        confirm: 'ios-help-circle',
+        success: 'ios-checkmark-circle'
+      }
+      return colors[this.type]
     }
   },
   methods: {
-    handleAfterHide () {
-      this.instances.delete(this)
-      this.$destroy()
-    },
     handlePositiveClick () {
-      this.onPositiveClick(this.hide)
+      this.$emit('positive-click')
     },
     handleNegativeClick () {
-      this.onNegativeClick(this.hide)
+      this.$emit('negative-click')
     },
     handleCloseClick () {
-      this.onCloseClick(this.hide)
-    },
-    hide () {
-      this.active = false
+      this.$emit('close')
     }
   }
 }

packages/presets/Confirm/index.js

@@ -1,9 +0,0 @@
-
-import NConfirm from './src/Confirm.vue'
-
-NConfirm.install = function (Vue) {
-  Vue.component(NConfirm.name, NConfirm)
-  Vue.component('NNimbusConfirmCard', NConfirm)
-}
-
-export default NConfirm