feat(popconfirm): add popconfirm component

README.md

@@ -76,7 +76,7 @@ Vue.use(naiveUi)
 |Tag|😍|||
 |Divider|🚧|||
 |Statistic|🚧|||
-|PopConfirm|🚧|||
+|Popconfirm|🚧|||
 |Anchor|🚧|||
 |BackTop|😍|||
 |Progress|😍|||

demo/components/popConfirmDemo/index.vue

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

demo/components/popconfirmDemo/basicUsage.demo.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="n-doc-section">
+    <div class="n-doc-section__header">
+      Basic Usage
+    </div>
+    <div
+      class="n-doc-section__view"
+      style="flex-wrap: nowrap;"
+    >
+      <!--EXAMPLE_START-->
+      <n-popconfirm
+        positive-text="ok"
+        negative-text="not ok"
+      >
+        <template v-slot:activator>
+          <n-button>Quit</n-button>
+        </template>
+        Are you sure to quit this game?
+      </n-popconfirm>
+      <!--EXAMPLE_END-->
+    </div>
+    <n-doc-source-block>
+      <!--SOURCE-->
+    </n-doc-source-block>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+    }
+  }
+}
+</script>

demo/components/popconfirmDemo/customAction.demo.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="n-doc-section">
+    <div class="n-doc-section__header">
+      Custom Action
+    </div>
+    <div
+      class="n-doc-section__view"
+      style="flex-wrap: nowrap;"
+    >
+      <!--EXAMPLE_START-->
+      <n-popconfirm ref="popconfirm">
+        <template v-slot:activator>
+          <n-button>Quit</n-button>
+        </template>
+        Are you sure to quit this game?
+        <template v-slot:action>
+          <n-button
+            size="tiny"
+            @click="handleOopsClick"
+          >
+            oops!
+          </n-button>
+        </template>
+      </n-popconfirm>
+      <!--EXAMPLE_END-->
+    </div>
+    <n-doc-source-block>
+      <!--SOURCE-->
+    </n-doc-source-block>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleOopsClick () {
+      this.$NMessage.info('oops!')
+      this.$refs.popconfirm.close()
+    }
+  }
+}
+</script>

demo/components/popconfirmDemo/customIcon.demo.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="n-doc-section">
+    <div class="n-doc-section__header">
+      Custom Icon
+    </div>
+    <div
+      class="n-doc-section__view"
+      style="flex-wrap: nowrap;"
+    >
+      <!--EXAMPLE_START-->
+      <n-popconfirm
+        positive-text="ok"
+        negative-text="not ok"
+      >
+        <template v-slot:icon>
+          <n-icon
+            type="md-hand"
+            color="red"
+          />
+        </template>
+        <template v-slot:activator>
+          <n-button>Quit</n-button>
+        </template>
+        Are you sure to quit this game?
+      </n-popconfirm>
+      <!--EXAMPLE_END-->
+    </div>
+    <n-doc-source-block>
+      <!--SOURCE-->
+    </n-doc-source-block>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+    }
+  }
+}
+</script>

demo/components/popconfirmDemo/event.demo.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="n-doc-section">
+    <div class="n-doc-section__header">
+      Event
+    </div>
+    <div
+      class="n-doc-section__view"
+      style="flex-wrap: nowrap;"
+    >
+      <!--EXAMPLE_START-->
+      <n-popconfirm
+        @positive-click="handlePositiveClick"
+        @negative-click="handleNegativeClick"
+      >
+        <template v-slot:activator>
+          <n-button>Quit</n-button>
+        </template>
+        Are you sure to quit this game?
+      </n-popconfirm>
+      <!--EXAMPLE_END-->
+    </div>
+    <n-doc-source-block>
+      <!--SOURCE-->
+    </n-doc-source-block>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    handlePositiveClick () {
+      this.$NMessage.info('positive click')
+    },
+    handleNegativeClick () {
+      this.$NMessage.info('negative click')
+    }
+  }
+}
+</script>

demo/components/popconfirmDemo/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    ref="doc"
+    class="n-doc"
+  >
+    <div class="n-doc-header">
+      <n-gradient-text :font-size="20">
+        Popconfirm / n-popconfirm
+      </n-gradient-text>
+    </div>
+    <div class="n-doc-body">
+      <basic-usage />
+      <no-icon />
+      <event />
+      <custom-action />
+      <custom-icon />
+    </div>
+  </div>
+</template>
+
+<script>
+import basicUsage from './basicUsage.demo.vue'
+import event from './event.demo.vue'
+import customAction from './customAction.demo.vue'
+import noIcon from './noIcon.demo.vue'
+import customIcon from './customIcon.demo.vue'
+
+export default {
+  components: {
+    basicUsage,
+    event,
+    customAction,
+    noIcon,
+    customIcon
+  },
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+  }
+}
+</script>

demo/components/popconfirmDemo/noIcon.demo.vue

@@ -1,17 +1,21 @@
 <template>
   <div class="n-doc-section">
     <div class="n-doc-section__header">
-      Scaffold
+      No Icon
     </div>
     <div
       class="n-doc-section__view"
       style="flex-wrap: nowrap;"
     >
       <!--EXAMPLE_START-->
-      Write some demo here
+      <n-popconfirm no-icon>
+        <template v-slot:activator>
+          <n-button>No Icon</n-button>
+        </template>
+        Are you sure to quit this game?
+      </n-popconfirm>
       <!--EXAMPLE_END-->
     </div>
-    <pre class="n-doc-section__inspect">Inspect some value here</pre>
     <n-doc-source-block>
       <!--SOURCE-->
     </n-doc-source-block>

demo/demo.vue

@@ -135,6 +135,10 @@ export default {
               name: 'Popover',
               path: '/n-popover'
             },
+            {
+              name: 'Popconfirm',
+              path: '/n-popconfirm'
+            },
             {
               name: 'Progress',
               path: '/n-progress'

demo/index.js

@@ -47,7 +47,7 @@ import tagDemo from './components/tagDemo'
 import timelineDemo from './components/timelineDemo'
 import progressDemo from './components/progressDemo'
 import dividerDemo from './components/dividerDemo'
-import popConfirmDemo from './components/popConfirmDemo'
+import popconfirmDemo from './components/popconfirmDemo'
 import anchorDemo from './components/anchorDemo'
 import demo from './demo'
 
@@ -123,7 +123,7 @@ const routes = [
       { path: '/n-back-top', component: backTopDemo },
       { path: '/n-date-picker-debug', component: datePickerDebug },
       { path: '/n-divider', component: dividerDemo },
-      { path: '/n-pop-confirm', component: popConfirmDemo },
+      { path: '/n-popconfirm', component: popconfirmDemo },
       { path: '/n-anchor', component: anchorDemo }
     ]
   },

demo/readme.js

@@ -219,7 +219,7 @@ Vue.use(naiveUi)
 <td></td>
 </tr>
 <tr>
-<td>PopConfirm</td>
+<td>Popconfirm</td>
 <td style="text-align:center;">🚧</td>
 <td style="text-align:center;"></td>
 <td></td>

index.js

@@ -45,7 +45,7 @@ import BackTop from './packages/common/BackTop'
 import Divider from './packages/common/Divider'
 import Collapse from './packages/common/Collapse'
 import Timeline from './packages/common/Timeline'
-import PopConfirm from './packages/common/PopConfirm'
+import Popconfirm from './packages/common/Popconfirm'
 import Anchor from './packages/common/Anchor'
 
 function install (Vue) {
@@ -96,7 +96,7 @@ function install (Vue) {
   Divider.install(Vue)
   Collapse.install(Vue)
   Timeline.install(Vue)
-  PopConfirm.install(Vue)
+  Popconfirm.install(Vue)
   Anchor.install(Vue)
 }
 

packages/common/Button/src/main.vue

@@ -29,6 +29,9 @@
     </div>
     <div
       class="n-button__content"
+      :class="{
+        'simulate-transparent-text': type === 'primary'
+      }"
       :style="style"
     >
       <slot />
@@ -56,12 +59,16 @@
 
 <script>
 import NIcon from '../../Icon/index'
+import texttransparentable from '../../../mixins/texttransparentable'
 
 export default {
   name: 'NButton',
   components: {
     NIcon
   },
+  mixins: [
+    texttransparentable
+  ],
   props: {
     disabled: {
       type: Boolean,
@@ -90,10 +97,6 @@ export default {
     iconOnRight: {
       type: Boolean,
       default: false
-    },
-    autoTextColor: {
-      type: Boolean,
-      default: false
     }
   },
   data () {
@@ -107,19 +110,6 @@ export default {
     }
   },
   mounted () {
-    if (this.autoTextColor) {
-      let cursor = this.$el
-      while (cursor.parentElement) {
-        cursor = cursor.parentElement
-        const backgroundColor = getComputedStyle(cursor).backgroundColor
-        if (backgroundColor && backgroundColor !== 'rgba(0, 0, 0, 0)') {
-          this.style = {
-            color: backgroundColor
-          }
-          break
-        }
-      }
-    }
   },
   methods: {
     handleClick (e) {

packages/common/PopConfirm/index.js

@@ -1,8 +0,0 @@
-/* istanbul ignore file */
-import Scaffold from './src/main.vue'
-
-Scaffold.install = function (Vue) {
-  Vue.component(Scaffold.name, Scaffold)
-}
-
-export default Scaffold

packages/common/PopConfirm/src/main.vue

@@ -1,9 +0,0 @@
-<template>
-  <div>example</div>
-</template>
-
-<script>
-export default {
-  name: 'NScaffold'
-}
-</script>

packages/common/Popconfirm/index.js

@@ -0,0 +1,8 @@
+/* istanbul ignore file */
+import Popconfirm from './src/main.vue'
+
+Popconfirm.install = function (Vue) {
+  Vue.component(Popconfirm.name, Popconfirm)
+}
+
+export default Popconfirm

packages/common/Popconfirm/src/main.vue

@@ -0,0 +1,97 @@
+<template>
+  <n-popover
+    ref="popover"
+    v-model="showPopconfirm"
+    class="n-popconfirm"
+    trigger="click"
+  >
+    <template v-slot:activator>
+      <slot name="activator" />
+    </template>
+    <div
+      class="n-popconfirm-content"
+      :class="{
+        'n-popconfirm-content--no-icon': noIcon
+      }"
+    >
+      <div class="n-popconfirm-content__body">
+        <slot
+          v-if="!noIcon"
+          name="icon"
+        >
+          <n-icon
+            type="md-alert"
+            color="rgba(255, 138, 0, 1)"
+          />
+        </slot>
+        <slot />
+      </div>
+      <template>
+        <div class="n-popconfirm-content__action">
+          <slot name="action">
+            <n-button
+              size="tiny"
+              round
+              @click="handleNegativeClick"
+            >
+              {{ negativeText }}
+            </n-button>
+            <n-button
+              round
+              size="tiny"
+              type="primary"
+              @click="handlePositiveClick"
+            >
+              {{ positiveText }}
+            </n-button>
+          </slot>
+        </div>
+      </template>
+    </div>
+  </n-popover>
+</template>
+
+<script>
+import NPopover from '../../Popover'
+import NButton from '../../Button'
+
+export default {
+  name: 'NPopconfirm',
+  components: {
+    NPopover,
+    NButton
+  },
+  props: {
+    positiveText: {
+      type: String,
+      default: 'Confirm'
+    },
+    negativeText: {
+      type: String,
+      default: 'Cancel'
+    },
+    noIcon: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      showPopconfirm: false
+    }
+  },
+  methods: {
+    close () {
+      this.$refs.popover.active = false
+    },
+    handlePositiveClick () {
+      this.$emit('positive-click')
+      this.close()
+    },
+    handleNegativeClick () {
+      this.$emit('negative-click')
+      this.close()
+    }
+  }
+}
+</script>

styles/PopConfirm.scss

@@ -1,6 +0,0 @@
-@import './mixins/mixins.scss';
-@import './theme/default.scss';
-
-@include b(scaffold) {
-  position: relative;
-}

styles/Popconfirm.scss

@@ -0,0 +1,31 @@
+@import './mixins/mixins.scss';
+@import './theme/default.scss';
+
+@include b(popconfirm-content) {
+  padding: 14px 16px;
+  &.n-popconfirm-content--no-icon {
+    .n-popconfirm-content__body {
+      padding-left: 0;
+    }
+  }
+  .n-popconfirm-content__body {
+    font-size: 13px;
+    white-space: nowrap;
+    padding-left: 22px;
+    position: relative;
+    .n-icon {
+      position: absolute;
+      font-size: 18px;
+      left: 0;
+      top: -1px;
+    }
+  }
+  .n-popconfirm-content__action {
+    margin-top: 14px;
+    display: flex;
+    justify-content: flex-end;
+    .n-button:not(:last-child) {
+      margin-right: 12px;
+    }
+  }
+}

styles/index.scss

@@ -35,7 +35,7 @@
 @import './Divider.scss';
 @import './Collapse.scss';
 @import './Timeline.scss';
-@import './PopConfirm.scss';
+@import './Popconfirm.scss';
 @import './Anchor.scss';
 
 @import "./NimbusServiceLayout.scss";