refactor: use n- prefix rather than nv- prefix

2025-04-06 14:30:46 +08:00 · 2019-06-13 15:05:10 +08:00 · 2019-06-13 15:05:10 +08:00 · db5f6a387b
commit db5f6a387b
parent debb25c3d8
28 changed files with 152 additions and 113 deletions
--- a/demo/components/homeDemo.vue
+++ b/demo/components/homeDemo.vue
@ -1,17 +1,17 @@
 <template>
  <div>
    <div class="main-container">
-      <nv-home-layout>
-        <nv-with-padding
+      <n-home-layout>
+        <n-with-padding
          :padding-top="16"
          :padding-bottom="23"
        >
-          <nv-gradient-header :font-size="18">
+          <n-gradient-header :font-size="18">
            All Services
-          </nv-gradient-header>
-        </nv-with-padding>
-        <nv-masonry-group>
-          <nv-service-card
+          </n-gradient-header>
+        </n-with-padding>
+        <n-masonry-group>
+          <n-service-card
            v-for="service in services"
            :key="service.title"
            :title="service.title"
@ -19,11 +19,11 @@
            class="grid-item"
            style="width: 271.5px"
          />
-        </nv-masonry-group>
-      </nv-home-layout>
+        </n-masonry-group>
+      </n-home-layout>
    </div>
    <div class="nav-container">
-      <nv-navbar />
+      <n-navbar />
    </div>
  </div>
 </template>
--- a/demo/components/sideMenuDemo.vue
+++ b/demo/components/sideMenuDemo.vue
@ -1,49 +1,49 @@
 <template>
  <div>
    <div class="service-container">
-      <nv-service-layout>
-        <nv-with-padding
+      <n-service-layout>
+        <n-with-padding
          :padding-left="48"
          :padding-right="48"
        >
-          <nv-table>
-            <template v-slot:header>
-              <nv-tr>
-                <nv-th>ID</nv-th>
-                <nv-th>Cluster</nv-th>
-                <nv-th>Cluster Type</nv-th>
-                <nv-th>Tags</nv-th>
-                <nv-th>Network Type</nv-th>
-                <nv-th>Cluster Status</nv-th>
-                <nv-th>Nodes</nv-th>
-                <nv-th>Location</nv-th>
-                <nv-th>Version</nv-th>
-                <nv-th>Actions</nv-th>
-              </nv-tr>
-            </template>
-            <template v-slot:body>
-              <nv-tr
+          <n-table>
+            <n-thead>
+              <n-tr>
+                <n-th>ID</n-th>
+                <n-th>Cluster</n-th>
+                <n-th>Cluster Type</n-th>
+                <n-th>Tags</n-th>
+                <n-th>Network Type</n-th>
+                <n-th>Cluster Status</n-th>
+                <n-th>Nodes</n-th>
+                <n-th>Location</n-th>
+                <n-th>Version</n-th>
+                <n-th>Actions</n-th>
+              </n-tr>
+            </n-thead>
+            <n-tbody>
+              <n-tr
                v-for="i in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]"
                :key="i"
              >
-                <nv-td>1</nv-td>
-                <nv-td>Name1</nv-td>
-                <nv-td>Type1</nv-td>
-                <nv-td>bla</nv-td>
-                <nv-td>blablabla</nv-td>
-                <nv-td>Running</nv-td>
-                <nv-td>6</nv-td>
-                <nv-td>Beijing</nv-td>
-                <nv-td>1.12.6-aliyun.1</nv-td>
-                <nv-td>Manage | View Logs | Dashboard | Scale Out | More</nv-td>
-              </nv-tr>
-            </template>
-          </nv-table>
-        </nv-with-padding>
-      </nv-service-layout>
+                <n-td>1</n-td>
+                <n-td>Name1</n-td>
+                <n-td>Type1</n-td>
+                <n-td>bla</n-td>
+                <n-td>blablabla</n-td>
+                <n-td>Running</n-td>
+                <n-td>6</n-td>
+                <n-td>Beijing</n-td>
+                <n-td>1.12.6-aliyun.1</n-td>
+                <n-td>Manage | View Logs | Dashboard | Scale Out | More</n-td>
+              </n-tr>
+            </n-tbody>
+          </n-table>
+        </n-with-padding>
+      </n-service-layout>
    </div>
    <div class="nav-container">
-      <nv-navbar />
+      <n-navbar />
    </div>
  </div>
 </template>
--- a/packages/common/Card/src/main.vue
+++ b/packages/common/Card/src/main.vue
@ -1,24 +1,24 @@
 <template>
  <div
-    class="nv-card"
+    class="n-card"
    :style="style"
  >
    <!-- <div class="mask">
      <div class="intro">
        <div></div>
        <div class="ribbon">
-          <nv-icon type="md-lock" size="16" style="margin-right: 4px;"/>
+          <n-icon type="md-lock" size="16" style="margin-right: 4px;"/>
          <div>Access Required</div>
        </div>
      </div>
    </div> -->
    <div class="intro">
-      <nv-icon
+      <n-icon
        type="logo-github"
        size="32"
      />
      <div class="ribbon">
-        <nv-icon
+        <n-icon
          type="md-lock"
          size="16"
          style="margin-right: 4px;"
@ -37,7 +37,7 @@

 <script>
 export default {
-  name: 'NvCard',
+  name: 'NCard',
  props: {
    title: {
      type: String,
--- a/packages/common/ColumnGroup/src/main.vue
+++ b/packages/common/ColumnGroup/src/main.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="nv-column-group">
+  <div class="n-column-group">
    <div class="columns">
      <div
        v-for="index in cols"
@ -14,7 +14,7 @@

 <script>
 export default {
-  name: 'NvColumnGroup',
+  name: 'NColumnGroup',
  props: {
    col: {
      type: Number,
--- a/packages/common/GradientHeader/src/main.vue
+++ b/packages/common/GradientHeader/src/main.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="nv-gradient-header">
+  <div class="n-gradient-header">
    <div
      class="header"
      :style="style"
@ -13,7 +13,7 @@

 <script>
 export default {
-  name: 'NvGradientHeader',
+  name: 'NGradientHeader',
  props: {
    'fontSize': {
      type: Number,
--- a/packages/common/Icon/src/main.vue
+++ b/packages/common/Icon/src/main.vue
@ -7,7 +7,7 @@
 <script>
 const prefixCls = 'ion'
 export default {
-  name: 'NvIcon',
+  name: 'NIcon',
  props: {
    type: {
      type: String,
--- a/packages/common/Loader/src/main.vue
+++ b/packages/common/Loader/src/main.vue
@ -1,6 +1,6 @@
 <template>
-  <div class="nv-loader__mask">
-    <div class="nv-loader__loader">
+  <div class="n-loader__mask">
+    <div class="n-loader__loader">
      <svg
        viewBox="25 25 50 50"
        class="circular"
@ -17,14 +17,14 @@

 <script>
 export default {
-  name: 'NvLoader',
+  name: 'NLoader',
  props: {
  }
 }
 </script>

 <style lang="scss" scoped>
-.nv-loader__mask {
+.n-loader__mask {
  position: absolute;
  left: 0;
  right: 0;
--- a/packages/common/MasonryGroup/src/main.vue
+++ b/packages/common/MasonryGroup/src/main.vue
@ -1,7 +1,7 @@
 <template>
  <div
-    ref="nv-masonry-group"
-    class="nv-masonry-group"
+    ref="n-masonry-group"
+    class="n-masonry-group"
  >
    <slot />
  </div>
@ -11,9 +11,9 @@
 import Masonry from 'masonry-layout'

 export default {
-  name: 'NvMasonryGroup',
+  name: 'NMasonryGroup',
  mounted () {
-    const msry = new Masonry(this.$refs['nv-masonry-group'], {
+    const msry = new Masonry(this.$refs['n-masonry-group'], {
      itemSelector: '.grid-item',
      gutter: 18,
      columnWidth: 299.5
--- a/packages/common/Table/TBody/index.js
+++ b/packages/common/Table/TBody/index.js
@ -0,0 +1,7 @@
+import NTbody from './src/main.vue'
+
+NTbody.install = function (Vue) {
+  Vue.component(NTbody.name, NTbody)
+}
+
+export default NTbody
--- a/packages/common/Table/TBody/src/main.vue
+++ b/packages/common/Table/TBody/src/main.vue
@ -0,0 +1,15 @@
+<template>
+  <tbody>
+    <slot>
+      default tbody content
+    </slot>
+  </tbody>
+</template>
+
+<script>
+export default {
+  name: 'NTbody',
+  props: {
+  }
+}
+</script>
--- a/packages/common/Table/Td/index.js
+++ b/packages/common/Table/Td/index.js
@ -1,7 +1,7 @@
-import NvTh from './src/main.vue'
+import NTh from './src/main.vue'

-NvTh.install = function (Vue) {
-  Vue.component(NvTh.name, NvTh)
+NTh.install = function (Vue) {
+  Vue.component(NTh.name, NTh)
 }

-export default NvTh
+export default NTh
--- a/packages/common/Table/Td/src/main.vue
+++ b/packages/common/Table/Td/src/main.vue
@ -8,7 +8,7 @@

 <script>
 export default {
-  name: 'NvTd',
+  name: 'NTd',
  props: {
  }
 }
--- a/packages/common/Table/Th/index.js
+++ b/packages/common/Table/Th/index.js
@ -1,7 +1,7 @@
-import NvTh from './src/main.vue'
+import NTh from './src/main.vue'

-NvTh.install = function (Vue) {
-  Vue.component(NvTh.name, NvTh)
+NTh.install = function (Vue) {
+  Vue.component(NTh.name, NTh)
 }

-export default NvTh
+export default NTh
--- a/packages/common/Table/Th/src/main.vue
+++ b/packages/common/Table/Th/src/main.vue
@ -8,7 +8,7 @@

 <script>
 export default {
-  name: 'NvTh'
+  name: 'NTh'
 }
 </script>

--- a/packages/common/Table/Thead/index.js
+++ b/packages/common/Table/Thead/index.js
@ -0,0 +1,7 @@
+import NThead from './src/main.vue'
+
+NThead.install = function (Vue) {
+  Vue.component(NThead.name, NThead)
+}
+
+export default NThead
--- a/packages/common/Table/Thead/src/main.vue
+++ b/packages/common/Table/Thead/src/main.vue
@ -0,0 +1,15 @@
+<template>
+  <thead>
+    <slot>
+      default thead content
+    </slot>
+  </thead>
+</template>
+
+<script>
+export default {
+  name: 'NThead',
+  props: {
+  }
+}
+</script>
--- a/packages/common/Table/Tr/index.js
+++ b/packages/common/Table/Tr/index.js
@ -1,7 +1,7 @@
-import NvTr from './src/main.vue'
+import NTr from './src/main.vue'

-NvTr.install = function (Vue) {
-  Vue.component(NvTr.name, NvTr)
+NTr.install = function (Vue) {
+  Vue.component(NTr.name, NTr)
 }

-export default NvTr
+export default NTr
--- a/packages/common/Table/Tr/src/main.vue
+++ b/packages/common/Table/Tr/src/main.vue
@ -6,7 +6,7 @@

 <script>
 export default {
-  name: 'NvTr'
+  name: 'NTr'
 }
 </script>

--- a/packages/common/Table/index.js
+++ b/packages/common/Table/index.js
@ -1,13 +1,17 @@
-import NvTable from './src/main.vue'
-import NvTh from './Th/src/main.vue'
-import NvTr from './Tr/src/main.vue'
-import NvTd from './Td/src/main.vue'
+import NTable from './src/main.vue'
+import NTh from './Th/src/main.vue'
+import NTr from './Tr/src/main.vue'
+import NTd from './Td/src/main.vue'
+import NThead from './Thead/src/main.vue'
+import NTbody from './TBody/src/main.vue'

-NvTable.install = function (Vue) {
-  Vue.component(NvTable.name, NvTable)
-  Vue.component(NvTh.name, NvTh)
-  Vue.component(NvTr.name, NvTr)
-  Vue.component(NvTd.name, NvTd)
+NTable.install = function (Vue) {
+  Vue.component(NTable.name, NTable)
+  Vue.component(NTh.name, NTh)
+  Vue.component(NTr.name, NTr)
+  Vue.component(NTd.name, NTd)
+  Vue.component(NTbody.name, NTbody)
+  Vue.component(NThead.name, NThead)
 }

-export default NvTable
+export default NTable
--- a/packages/common/Table/src/main.vue
+++ b/packages/common/Table/src/main.vue
@ -1,23 +1,14 @@
 <template>
-  <div class="nv-table">
+  <div class="n-table">
    <table>
-      <thead>
-        <slot name="header">
-          <tr><th>header</th></tr>
-        </slot>
-      </thead>
-      <tbody>
-        <slot name="body">
-          <tr><td>body</td></tr>
-        </slot>
-      </tbody>
+      <slot>default table content</slot>
    </table>
  </div>
 </template>

 <script>
 export default {
-  name: 'NvTable'
+  name: 'NTable'
 }
 </script>

--- a/packages/common/WithMargin/src/main.vue
+++ b/packages/common/WithMargin/src/main.vue
@ -1,6 +1,6 @@
 <template>
  <div
-    class="nv-with-margin"
+    class="n-with-margin"
    :style="style"
  >
    <slot />
@ -9,7 +9,7 @@

 <script>
 export default {
-  name: 'NvWithMargin',
+  name: 'NWithMargin',
  props: {
    marginTop: {
      type: Number,
--- a/packages/common/WithPadding/src/main.vue
+++ b/packages/common/WithPadding/src/main.vue
@ -1,6 +1,6 @@
 <template>
  <div
-    class="nv-with-padding"
+    class="n-with-padding"
    :style="style"
  >
    <slot />
@ -9,7 +9,7 @@

 <script>
 export default {
-  name: 'NvWithPadding',
+  name: 'NWithPadding',
  props: {
    paddingTop: {
      type: Number,
--- a/packages/nimbus/HomeLayout/src/main.vue
+++ b/packages/nimbus/HomeLayout/src/main.vue
@ -6,7 +6,7 @@

 <script>
 export default {
-  name: 'NvHomeLayout',
+  name: 'NHomeLayout',
  props: {},
  data () {
    return {
--- a/packages/nimbus/Navbar/src/main.vue
+++ b/packages/nimbus/Navbar/src/main.vue
@ -21,7 +21,7 @@

 <script>
 export default {
-  name: 'NvNavbar',
+  name: 'NNavbar',
  props: {},
  data () {
    return {
--- a/packages/nimbus/Scaffold/src/main.vue
+++ b/packages/nimbus/Scaffold/src/main.vue
@ -4,7 +4,7 @@

 <script>
 export default {
-  name: 'NvScaffold'
+  name: 'NScaffold'
 }
 </script>

--- a/packages/nimbus/ServiceCard/src/main.vue
+++ b/packages/nimbus/ServiceCard/src/main.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="nv-service-card">
+  <div class="n-service-card">
    <div class="title">
      {{ title }}
    </div>
@ -18,7 +18,7 @@

 <script>
 export default {
-  name: 'NvServiceCard',
+  name: 'NServiceCard',
  props: {
    title: {
      type: String,
--- a/packages/nimbus/ServiceLayout/src/main.vue
+++ b/packages/nimbus/ServiceLayout/src/main.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="nv-nimbus-service-layout">
+  <div class="n-nimbus-service-layout">
    <div
      class="body"
      :class="{ 'is-collapsed': isCollapsed, active: !isCollapsed }"
@ -19,7 +19,7 @@
        <div class="header">
          <div class="content">
            <div class="icon">
-              <nv-icon
+              <n-icon
                type="md-settings"
                :size="22"
              />
@ -83,7 +83,7 @@

 <script>
 export default {
-  name: 'NvServiceLayout',
+  name: 'NServiceLayout',
  props: {},
  data () {
    return {
--- a/styles/mixins/config.scss
+++ b/styles/mixins/config.scss
@ -1,4 +1,4 @@
-$namespace: 'nv';
+$namespace: 'n';
 $element-separator: '__';
 $modifier-separator: '--';
 $state-prefix: 'is-';