fix:merge conflict

2025-01-30 12:52:43 +08:00 · 2019-07-15 18:58:46 +08:00 · 2019-07-15 18:58:46 +08:00 · 233367cfc0
commit 233367cfc0
parent edcafb5bcb 9e27b5a359
19 changed files with 659 additions and 11 deletions
--- a/demo/components/nimbusIconDemo.vue
+++ b/demo/components/nimbusIconDemo.vue
@ -0,0 +1,80 @@
+<template>
+  <div
+    ref="doc"
+    class="n-doc"
+  >
+    <div class="n-doc-header">
+      <n-gradient-text :font-size="20">
+        NimbusIcon / n-nimbus-icon
+      </n-gradient-text>
+    </div>
+    <div class="n-doc-body">
+      <div class="n-doc-section">
+        <div class="n-doc-section__header">
+          Basic Usage
+        </div>
+        <div class="n-doc-section__view">
+          <n-nimbus-icon
+            type="share"
+            color="#63e2b7"
+            size="24"
+          />
+          <n-nimbus-icon
+            type="ban"
+            size="24"
+          />
+        </div>
+        <div class="n-doc-section__source">
+          <textarea>
+/**
+ * Valid type: share, ban
+ */
+<n-nimbus-icon
+  type="share"
+  size="24"
+/>
+<n-nimbus-icon
+  type="ban"
+  size="24"
+/>
+<style lang="scss" scoped>
+.n-nimbus-icon-ban /deep/ g {
+  fill: red;
+  transition: fill .3s ease-in-out;
+}
+
+.n-nimbus-icon-ban:hover /deep/ g {
+  fill: green;
+}
+</style>
+</textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import docCodeEditorMixin from './docCodeEditorMixin'
+export default {
+  mixins: [docCodeEditorMixin],
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.n-nimbus-icon-ban /deep/ g {
+  fill: red;
+  transition: fill .3s ease-in-out;
+}
+
+.n-nimbus-icon-ban:hover /deep/ g {
+  fill: green;
+}
+</style>
--- a/demo/components/radioDemo.vue
+++ b/demo/components/radioDemo.vue
@ -0,0 +1,177 @@
+<template>
+  <div
+    ref="doc"
+    class="n-doc"
+  >
+    <div class="n-doc-header">
+      <n-gradient-text :font-size="20">
+        Radio
+      </n-gradient-text>
+    </div>
+    <div class="n-doc-body">
+      <div class="n-doc-section">
+        <div class="n-doc-section__header">
+          Single Radio
+        </div>
+        <div class="n-doc-section__view">
+          <n-radio
+            v-model="value1"
+            value="Definitely Maybe"
+          >
+            Definitely Maybe
+          </n-radio>
+          <n-radio
+            v-model="value1"
+            value="Be Here Now"
+          >
+            Be Here Now
+          </n-radio>
+          <n-radio
+            v-model="value1"
+            value="Be Here Now"
+            disabled
+          >
+            Be Here Now
+          </n-radio>
+        </div>
+        <pre class="n-doc-section__inspect">value: {{ JSON.stringify(value1) }}</pre>
+        <div class="n-doc-section__source">
+          <textarea><n-radio
+  v-model="value"
+  value="Definitely Maybe"
+>
+  Definitely Maybe
+</n-radio>
+<n-radio
+  v-model="value"
+  value="Be Here Now"
+>
+  Be Here Now
+</n-radio>
+<n-radio
+  v-model="value"
+  value="Be Here Now"
+  disabled
+>
+  Be Here Now
+</n-radio>
+
+<script>
+export default {
+  data () {
+    return {
+      value: null
+    }
+  }
+}
+</script>
+</textarea>
+        </div>
+      </div>
+      <div class="n-doc-section">
+        <div class="n-doc-section__header">
+          Radio Group
+        </div>
+        <div class="n-doc-section__view">
+          <n-radio-group v-model="value2">
+            <n-radio
+              v-for="song in songs"
+              :key="song.value"
+              :value="song.value"
+            >
+              {{ song.label }}
+            </n-radio>
+          </n-radio-group>
+        </div>
+        <pre class="n-doc-section__inspect">value: {{ JSON.stringify(value2) }}</pre>
+        <div class="n-doc-section__source">
+          <textarea v-pre><n-radio-group v-model="value">
+  <n-radio
+    v-for="song in songs"
+    :key="song.value"
+    :value="song.value"
+  >
+    {{ song.label }}
+  </n-radio>
+</n-radio-group>
+
+<script>
+export default {
+  data () {
+    return {
+      value: null,
+      songs: [
+        {
+          value: 'Rock\'n\'Roll Star',
+          label: 'Rock\'n\'Roll Star'
+        },
+        {
+          value: 'Shakermaker',
+          label: 'Shakermaker'
+        },
+        {
+          value: 'Live Forever',
+          label: 'Live Forever'
+        },
+        {
+          value: 'Up in the Sky',
+          label: 'Up in the Sky'
+        },
+        {
+          value: '...',
+          label: '...'
+        }
+      ].map(s => {
+        s.value = s.value.toLowerCase()
+        return s
+      }
+    }
+  }
+}
+</script>
+</textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import docCodeEditorMixin from './docCodeEditorMixin'
+export default {
+  mixins: [docCodeEditorMixin],
+  data () {
+    return {
+      value1: null,
+      value2: null,
+      songs: [
+        {
+          value: 'Rock\'n\'Roll Star',
+          label: 'Rock\'n\'Roll Star'
+        },
+        {
+          value: 'Shakermaker',
+          label: 'Shakermaker'
+        },
+        {
+          value: 'Live Forever',
+          label: 'Live Forever'
+        },
+        {
+          value: 'Up in the Sky',
+          label: 'Up in the Sky'
+        },
+        {
+          value: '...',
+          label: '...'
+        }
+      ].map(s => {
+        s.value = s.value.toLowerCase()
+        return s
+      })
+    }
+  },
+  methods: {
+  }
+}
+</script>
--- a/demo/components/tooltipDemo.vue
+++ b/demo/components/tooltipDemo.vue
@ -20,6 +20,7 @@
                hello tooltip
              </n-button>
            </template>
+            This is the contextual help
          </n-tooltip>
        </div>
        <div class="n-doc-section__source">
--- a/demo/demo.vue
+++ b/demo/demo.vue
@ -41,6 +41,10 @@ export default {
            {
              name: 'Nimbus Confirm Card',
              path: '/n-nimbus-confirm-card'
+            },
+            {
+              name: 'Nimbus Icon',
+              path: '/n-nimbus-icon'
            }
          ]
        },
@ -104,6 +108,10 @@ export default {
              name: 'Popover',
              path: '/n-popover'
            },
+            {
+              name: 'Radio',
+              path: '/n-radio'
+            },
            {
              name: 'Select',
              path: '/n-select'
@ -183,6 +191,14 @@ body {
      margin-bottom: 12px;
      flex-wrap: wrap;
    }
+    .n-doc-section__inspect {
+      background: #5c657eff;
+      padding: 18px;
+      border-radius: 8px;
+      display: flex;
+      margin-bottom: 12px;
+      flex-wrap: wrap;
+    }
    .n-doc-section__text-content {
      font-size: 16px;
    }
--- a/demo/index.js
+++ b/demo/index.js
@ -23,6 +23,8 @@ import popoverDemo from './components/popoverDemo'
 import alertDemo from './components/alertDemo'
 import datePickerDemo from './components/datePickerDemo'
 import inputNumberDemo from './components/inputNumberDemo'
+import nimbusIconDemo from './components/nimbusIconDemo'
+import radioDemo from './components/radioDemo'

 import notificationDemo from './components/notificationDemo'
 import nimbusConfirmCardDemo from './components/nimbusConfirmCardDemo'
@ -64,7 +66,9 @@ const routes = [
      { path: '/n-pagination', component: paginationDemo },
      { path: '/n-alert', component: alertDemo },
      { path: '/n-date-picker', component: datePickerDemo },
-      { path: '/n-input-number', component: inputNumberDemo }
+      { path: '/n-input-number', component: inputNumberDemo },
+      { path: '/n-nimbus-icon', component: nimbusIconDemo },
+      { path: '/n-radio', component: radioDemo }
    ]
  },
  {
--- a/index.js
+++ b/index.js
@ -22,6 +22,7 @@ import Popup from './packages/common/Popover'
 import Alert from './packages/common/Alert'
 import DatePicker from './packages/common/DatePicker'
 import InputNumber from './packages/common/InputNumber'
+import Radio from './packages/common/Radio'

 import ServiceCard from './packages/nimbus/ServiceCard'
 import HomeLayout from './packages/nimbus/HomeLayout'
@ -29,6 +30,7 @@ import Navbar from './packages/nimbus/Navbar'
 import ServiceLayout from './packages/nimbus/ServiceLayout'
 import NimbusFormCard from './packages/nimbus/FormCard'
 import NimbusConfirmCard from './packages/nimbus/ConfirmCard'
+import NimbusIcon from './packages/nimbus/Icon'

 function install (Vue) {
  Card.install(Vue)
@ -61,6 +63,8 @@ function install (Vue) {
  Alert.install(Vue)
  DatePicker.install(Vue)
  InputNumber.install(Vue)
+  NimbusIcon.install(Vue)
+  Radio.install(Vue)
 }

 export default {
--- a/package.json
+++ b/package.json
@ -1,6 +1,10 @@
 {
  "name": "naive-ui",
+<<<<<<< HEAD
  "version": "0.2.8",
+=======
+  "version": "0.2.12",
+>>>>>>> 658372435ab4d8e7cf8fe0c316f8c61e89ace319
  "description": "",
  "main": "index.js",
  "scripts": {
--- a/packages/common/Radio/index.js
+++ b/packages/common/Radio/index.js
@ -0,0 +1,10 @@
+/* istanbul ignore file */
+import Radio from './src/main.vue'
+import RadioGroup from './src/RadioGroup.vue'
+
+Radio.install = function (Vue) {
+  Vue.component(Radio.name, Radio)
+  Vue.component(RadioGroup.name, RadioGroup)
+}
+
+export default Radio
--- a/packages/common/Radio/src/RadioGroup.vue
+++ b/packages/common/Radio/src/RadioGroup.vue
@ -0,0 +1,36 @@
+<script>
+function mapSlot (defaultSlot, currentComponent) {
+  return defaultSlot.map(el => {
+    if (el.componentOptions.tag === 'n-radio') {
+      el.componentOptions.propsData.privateValue = currentComponent.value
+      el.componentOptions.listeners = {
+        ...el.componentOptions.listeners,
+        input: (v) => {
+          currentComponent.$emit('input', v)
+        }
+      }
+      return el
+    } else return el
+  })
+}
+
+export default {
+  name: 'NRadioGroup',
+  props: {
+    value: {
+      type: [Boolean, String, Number],
+      default: null
+    }
+  },
+  methods: {
+    handleInput (value) {
+      console.log('input')
+    }
+  },
+  render (h) {
+    return h('div', {
+      staticClass: 'n-radio-group'
+    }, mapSlot(this.$slots.default, this))
+  }
+}
+</script>
--- a/packages/common/Radio/src/main.vue
+++ b/packages/common/Radio/src/main.vue
@ -0,0 +1,57 @@
+<template>
+  <div
+    class="n-radio"
+    :class="{
+      'n-radio--disabled': disabled,
+      'n-radio--checked': checked
+    }"
+    @click="handleClick"
+  >
+    <div
+      class="n-radio__control"
+      :class="{
+        'n-radio__control--checked': checked
+      }"
+    />
+    <div class="n-radio__label">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NRadio',
+  model: {
+    prop: 'privateValue',
+    event: 'input'
+  },
+  props: {
+    value: {
+      type: [Boolean, String, Number],
+      default: null
+    },
+    privateValue: {
+      type: [Boolean, String, Number],
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    checked () {
+      return this.privateValue === this.value
+    }
+  },
+  methods: {
+    handleClick () {
+      if (this.disabled) return
+      if (this.privateValue !== this.value) {
+        this.$emit('input', this.value)
+      }
+    }
+  }
+}
+</script>
--- a/packages/nimbus/Icon/index.js
+++ b/packages/nimbus/Icon/index.js
@ -0,0 +1,8 @@
+/* istanbul ignore file */
+import NimbusIcon from './src/main.vue'
+
+NimbusIcon.install = function (Vue) {
+  Vue.component(NimbusIcon.name, NimbusIcon)
+}
+
+export default NimbusIcon
--- a/packages/nimbus/Icon/src/icons/ban.vue
+++ b/packages/nimbus/Icon/src/icons/ban.vue
@ -0,0 +1,43 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+  >
+    <title>ban</title>
+    <g
+      id="Layer_2"
+      data-name="Layer 2"
+      :fill="color"
+    >
+      <g
+        id="Layer_1-2"
+        data-name="Layer 1"
+      >
+        <g id="Page-1">
+          <g id="Pods---Form---06-30-2019-Copy-10">
+            <g id="Group-17">
+              <g id="Disabled---SVG-Icon">
+                <path
+                  id="Shape"
+                  class="cls-1"
+                  d="M50,0A50,50,0,1,0,85.36,14.64,50,50,0,0,0,50,0Zm0,89.58A39.59,39.59,0,0,1,18.19,26.44L73.56,81.81A39.41,39.41,0,0,1,50,89.58Zm31.81-16L26.44,18.19A39.59,39.59,0,0,1,81.81,73.56Z"
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'black'
+    }
+  }
+}
+</script>
--- a/packages/nimbus/Icon/src/icons/share.vue
+++ b/packages/nimbus/Icon/src/icons/share.vue
@ -0,0 +1,48 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+  >
+    <title>share</title>
+    <g
+      id="Layer_2"
+      data-name="Layer 2"
+      :fill="color"
+    >
+      <g
+        id="Layer_1-2"
+        data-name="Layer 1"
+      >
+        <g id="Symbols">
+          <g id="New-Page">
+            <g
+              id="noun_new-tab_1167424"
+              data-name="noun new-tab 1167424"
+            >
+              <path
+                id="Path"
+                class="cls-1"
+                d="M2.94,16h8.12A2.93,2.93,0,0,0,14,13.06v-5a.66.66,0,0,0-.68-.68h0a.66.66,0,0,0-.67.68v5a1.58,1.58,0,0,1-1.59,1.59H2.94a1.58,1.58,0,0,1-1.59-1.59V4.94A1.58,1.58,0,0,1,2.94,3.35h5a.66.66,0,0,0,.68-.67A.66.66,0,0,0,7.9,2h-5A2.93,2.93,0,0,0,0,4.94H0v8.12A2.93,2.93,0,0,0,2.94,16Z"
+              />
+              <path
+                class="cls-1"
+                d="M16,5V.72a.34.34,0,0,0,0-.14s0,0,0,0,0,0,0-.06,0,0,0-.07a.08.08,0,0,0,0-.05.86.86,0,0,0-.19-.19l0,0a.18.18,0,0,0-.14-.09l-.07,0-.14,0H11a.68.68,0,0,0-.69.7.69.69,0,0,0,.69.7H13.6L7.21,7.81a.69.69,0,0,0,1,1L14.6,2.4V5a.69.69,0,0,0,.7.69h0A.73.73,0,0,0,16,5Z"
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'black'
+    }
+  }
+}
+</script>
--- a/packages/nimbus/Icon/src/main.vue
+++ b/packages/nimbus/Icon/src/main.vue
@ -0,0 +1,64 @@
+<template>
+  <i
+    :class="`n-nimbus-icon n-nimbus-icon-${type}`"
+    :style="styles"
+    v-on="$listeners"
+  >
+    <share-icon
+      v-if="type==='share'"
+      :color="color"
+    />
+    <ban-icon
+      v-else-if="type==='ban'"
+      :color="color"
+    />
+    <span v-else>icon-type is invalid</span>
+  </i>
+</template>
+<script>
+import shareIcon from './icons/share'
+import banIcon from './icons/ban'
+
+export default {
+  name: 'NNimbusIcon',
+  components: {
+    shareIcon,
+    banIcon
+  },
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: [Number, String],
+      default: null
+    },
+    color: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    styles () {
+      let style = {}
+      if (this.size) {
+        style['font-size'] = `${this.size}px`
+      }
+      if (this.color) {
+        style.color = this.color
+      }
+      return style
+    }
+  }
+}
+// <style>
+// .n-nimbus-icon svg:hover g {
+//   fill:blue;
+// }
+// .n-nimbus-icon svg g {
+//   transition: fill .3s ease-in-out;
+//   fill:red;
+// }
+// </style>
+</script>
--- a/styles/NimbusIcon.scss
+++ b/styles/NimbusIcon.scss
@ -0,0 +1,11 @@
+.n-nimbus-icon {
+  height: 1em;
+  width: 1em;
+  line-height: 1em;
+  text-align: center;
+  display: inline-block;
+  position: relative;
+  svg {
+    pointer-events: none;
+  }
+}
--- a/styles/NimbusServiceLayout.scss
+++ b/styles/NimbusServiceLayout.scss
@ -110,15 +110,13 @@
        .n-nimbus-service-layout-drawer-item__icon {
          &::before {
            content: '';
-            width: 0;
-            height: 0;
+            width: 10px;
+            height: 10px;
            position: absolute;
-            border-style: solid;
-            border-color:#78CD68 transparent transparent transparent;
-            border-width: 7px;
-            transform: rotate(-45deg);
-            top: 23px;
-            left: 32px;
+            background-image:linear-gradient(47deg,rgba(120, 205, 104, 1) 0%,rgba(20, 166, 165, 1) 100%);
+            top: 20px;
+            left: 30px;
+            clip-path: polygon(100% 0, 100% 100%, 0% 100%);
          }
        }
        span {
--- a/styles/Radio.scss
+++ b/styles/Radio.scss
@ -0,0 +1,83 @@
+@import './mixins/mixins.scss';
+@import './theme/default.scss';
+
+@include b(radio) {
+  position: relative;
+  user-select: none;
+  display: inline-flex;
+  vertical-align: middle;
+  align-items: center;
+  margin-right: 18px;
+  .n-radio__control {
+    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
+    transition: box-shadow .2s $default-cubic-bezier;
+    height: 14px;
+    width: 14px;
+    border-radius: 7px;
+    margin-right: 9px;
+    position: relative;
+    &::before {
+      content: "";
+      position: absolute;
+      left: 3px;
+      top: 3px;
+      height: 8px;
+      width: 8px;
+      border-radius: 4px;
+      transform: scale(.8);
+      background-color: rgba(99, 226, 183, 1);
+      opacity: 0;
+      transition: opacity .15s $slow-out-cubic-bezier, transform .15s $slow-out-cubic-bezier;
+    }
+    &.n-radio__control--checked {
+      box-shadow: inset 0 0 0 1px rgba(99, 226, 183, 1);
+      &::before {
+        opacity: 1;
+        transform: scale(1);
+        
+        transition: opacity .15s $fast-in-cubic-bezier, transform .15s $fast-in-cubic-bezier;
+      }
+    }
+  }
+  .n-radio__label {
+    display: inline-block;
+    color: rgba(233,233,236,1);
+  }
+  &:not(.n-radio--disabled) {
+    cursor: pointer;
+    &:hover .n-radio__control {
+      box-shadow: inset 0 0 0 1px rgba(99, 226, 183, 1);
+      transition: box-shadow .2s $default-cubic-bezier;
+    }
+    &:active .n-radio__control {
+      box-shadow: inset 0 0 0 1px rgba(99, 226, 183, 1), 0px 0px 10px 1px rgba(99,226,183,0.3);
+    }
+  }
+  &.n-radio--disabled {
+    cursor: not-allowed;
+    .n-radio__control {
+      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
+      transition: box-shadow .2s $default-cubic-bezier;
+      &::before {
+        transform: scale(1.5);
+        transform-origin: center;
+        opacity: 1;
+        background-color: rgba(233,233,236,0.25);
+      }
+      &.n-radio__control--checked {
+        &::before {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+    }
+    .n-radio__label {
+      color: rgba(233,233,236,0.25);
+    }
+  }
+}
+
+@include b(radio-group) {
+  display: inline-block;
+  vertical-align: middle;
+}
--- a/styles/index.scss
+++ b/styles/index.scss
@ -20,7 +20,9 @@
@import './Alert.scss';
@import './DatePicker.scss';
@import './InputNumber.scss';
+@import './Radio.scss';

@import "./NimbusServiceLayout.scss";
@import "./Popover.scss";
-@import "./AdvancedTable.scss"
+@import "./AdvancedTable.scss";
+@import "./NimbusIcon.scss";
--- a/think.md
+++ b/think.md
@ -7,4 +7,6 @@ npm run dev
 # git problem...
 我的锅...远程分支没设定好，推得哪个自己都不知道。
 # test 时候 vue v-model 产生的效果必须在 $nextTick() 之后才会产生，虽然它声称自己是同步的...
-我的锅，忘了为啥了。确实是同步的，是我没有考虑到v-model这东西应该用什么方法测试。
+我的锅，忘了为啥了。确实是同步的，是我没有考虑到v-model这东西应该用什么方法测试。
+# Vue 的深度选择器出了问题
+a >>> b 被编译成了 a > > > b