docs(*): unified code style

DaoCloud · Sep 21, 2018 · 180dbb5 · 180dbb5
1 parent 460bcfb
commit 180dbb5
Show file tree

Hide file tree

Showing 42 changed files with 238 additions and 264 deletions.
diff --git a/Readme.md b/Readme.md
@@ -29,7 +29,7 @@ Using npm:
 npm install dao-style --save
 ```
 
-Using a script tag for global use:
+Using html tag:
 
 ```html
 <script type="text/javascript" src="dao-style.min.js"></script>

diff --git a/examples/plugins/codemirror/index.js b/examples/plugins/codemirror/index.js
@@ -3,6 +3,7 @@ import VueCodemirror from 'vue-codemirror';
 /* eslint-disable */
 import 'codemirror/mode/vue/vue';
 import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/css/css';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/monokai.css';
 

diff --git a/examples/plugins/i18n/en.js b/examples/plugins/i18n/en.js
@@ -47,11 +47,16 @@ export default {
   method_name: 'Method Name',
   event_name: 'Event Name',
   slot_name: 'Slot Name',
-  show_more: 'Show More',
+  show_more: 'Load More...',
   index: {
     desc: 'A high quality UI Toolkit built on Vue.js.',
     cr: 'Build and Maintained Open‑Source by {company}',
   },
+  installationPage: {
+    use_npm: 'Using npm',
+    use_html: 'Using HTML tag',
+    usage: 'Usage',
+  },
   status: {
     component: 'Component',
     available: 'Available',

diff --git a/examples/plugins/i18n/zh.js b/examples/plugins/i18n/zh.js
@@ -27,7 +27,7 @@ export default {
   steps: 'Steps 步骤条',
   svg: 'Svg 图标',
   'editable-list': 'Editable List 可编辑列表',
-  switch: 'Switch 开光',
+  switch: 'Switch 开关',
   tab: 'Tab 标签页',
   table: 'Table 表格',
   tooltip: 'Tooltip 提示',
@@ -47,11 +47,16 @@ export default {
   method_name: '方法名',
   event_name: '事件名',
   slot_name: '插槽名',
-  show_more: '查看更多',
+  show_more: '加载更多...',
   index: {
     desc: '基于 Vue.js 构建的高质量 UI 工具包',
     cr: '由 {company} 打造和维护',
   },
+  installationPage: {
+    use_npm: '使用 npm 安装',
+    use_html: '使用 HTML 标签引入',
+    usage: '使用',
+  },
   status: {
     component: '组件',
     available: '可用',

diff --git a/examples/view/components/code-block/index.vue b/examples/view/components/code-block/index.vue
@@ -44,6 +44,9 @@ export default {
         case 'javascript':
           o.mode = 'text/javascript';
           break;
+        case 'scss':
+          o.mode = 'text/css';
+          break;
         default:
           o.mode = 'text/x-vue';
           break;
@@ -66,7 +69,7 @@ export default {
 .code-block{
   .CodeMirror{
     height: auto;
-    padding: 10px 20px;
+    padding: 6px 20px;
   }
   .CodeMirror-line {
     font-family: SF Mono,Monaco,Inconsolata,Fira Mono,Droid Sans Mono,Source Code Pro,monospace !important;

diff --git a/examples/view/components/docs-section/index.vue b/examples/view/components/docs-section/index.vue
@@ -28,6 +28,7 @@ export default {
   }
   &>.content{
     padding: 20px 0;
+    overflow: auto;
   }
 }
 </style>
diff --git a/examples/view/components/docs-table/index.vue b/examples/view/components/docs-table/index.vue
@@ -14,26 +14,26 @@
     <tbody >
       <tr v-for="(row, index) in rows" :key="index">
         <td>
-          <span class="name">
+          <div class="name">
             {{row.name}}
-          </span>
+          </div>
         </td>
         <td v-if="showType">
-          <span class="type">
+          <div class="type">
             {{getTypes(row.type)}}
-          </span>
+          </div>
         </td>
         <td v-if="showOptions">
-          <span v-if="row.options">
-            {{row.options.join('、')}}
-          </span>
-          <span v-else>-</span>
+          <div v-dao-tooltip.ellipsis="row.options.join('、')" v-if="row.options" class="option"><!-- 
+         -->{{row.options.join('、')}}<!-- 
+      --></div>
+          <div v-else>-</div>
         </td>
         <td v-if="showDefault">
-          <span v-if="row.options">
+          <div v-if="row.options">
             {{row.default}}
-          </span>
-          <span v-else>-</span>
+          </div>
+          <div v-else>-</div>
         </td>
         <td v-if="showParameter">
           {{row.parameter}}
@@ -42,11 +42,13 @@
           {{row.return}}
         </td>
         <td>
-          <span v-if="row.desc">
-            <md-reader :source="row.desc">
-            </md-reader>
-          </span>
-          <span v-else>-</span>
+          <div class="desc">
+            <template v-if="row.desc">
+              <md-reader :source="row.desc">
+              </md-reader>
+            </template>
+            <template v-else>-</template>
+          </div>
         </td>
       </tr>
     </tbody>
@@ -137,5 +139,10 @@ export default {
   .type{
     color: $blue;
   }
+  .option{
+    width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 </style>
diff --git a/examples/view/demos/button/demo-1.vue b/examples/view/demos/button/demo-1.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <button class="dao-btn">default</button>
-    <button class="dao-btn blue" @click="handleClick">blue</button>
+    <button class="dao-btn" @click="onClick">default</button>
+    <button class="dao-btn blue">blue</button>
     <button class="dao-btn red">red</button>
     <button class="dao-btn ghost">ghost</button>
     <button class="dao-btn btn-sm blue">small</button>
@@ -13,9 +13,9 @@
 <script>
   export default {
     methods: {
-      handleClick() {
-        alert(1);
+      onClick() {
+        this.$daoAlert('hi', 'daostyle').show();
       },
     },
   };
-</script>
+</script>
diff --git a/examples/view/demos/button/demo-2.vue b/examples/view/demos/button/demo-2.vue
@@ -7,4 +7,4 @@
     <button class="dao-btn mini grey" :disabled="true">disabled</button>
     <button class="dao-btn mini blue" :disabled="true">disabled</button>
   </div>
-</template>
+</template>
diff --git a/examples/view/demos/button/demo-3.vue b/examples/view/demos/button/demo-3.vue
@@ -7,4 +7,4 @@
     <button class="dao-btn btn-sm mini grey">mini-grey</button>
     <button class="dao-btn btn-sm mini blue">mini-blue</button>
   </div>
-</template>
+</template>
diff --git a/examples/view/demos/button/demo-4.vue b/examples/view/demos/button/demo-4.vue
@@ -7,4 +7,4 @@
     <button class="dao-btn btn-sm mini grey" :disabled="true">disabled</button>
     <button class="dao-btn btn-sm mini grey" :disabled="true">disabled</button>
   </div>
-</template>
+</template>
diff --git a/examples/view/demos/button/demo-5.vue b/examples/view/demos/button/demo-5.vue
@@ -21,4 +21,4 @@
       <svg class="icon"><use xlink:href="#icon_caret-down"></use></svg>
     </button>
   </div>
-</template>
+</template>
diff --git a/examples/view/demos/button/demo-6.vue b/examples/view/demos/button/demo-6.vue
@@ -31,4 +31,4 @@
       </button>
     </span>
   </div>
-</template>
+</template>
diff --git a/examples/view/demos/checkbox/demo-1.vue b/examples/view/demos/checkbox/demo-1.vue
@@ -1,36 +1,24 @@
 <template>
-  <div>
-    <div class="dao-checkbox-group">
-      <div class="dao-checkbox">
-        <label>
-          <input type="checkbox" checked>
-          option 1
-        </label>
-      </div>
-      <div class="dao-checkbox">
-        <label>
-          <input type="checkbox">
-          option 2
-        </label>
-      </div>
-      <div class="dao-checkbox disabled">
-        <label>
-          <input type="checkbox" checked disabled>
-          disable option
-        </label>
-      </div>
-      <div class="dao-checkbox disabled">
-        <label>
-          <input type="checkbox" disabled>
-          disable option
-        </label>
-      </div>
+  <div class="dao-checkbox-group">
+    <div class="dao-checkbox">
+      <label>
+        <input type="checkbox" checked>option 1
+      </label>
+    </div>
+    <div class="dao-checkbox">
+      <label>
+        <input type="checkbox">option 2
+      </label>
+    </div>
+    <div class="dao-checkbox disabled">
+      <label>
+        <input type="checkbox" checked disabled>disable option
+      </label>
+    </div>
+    <div class="dao-checkbox disabled">
+      <label>
+        <input type="checkbox" disabled>disable option
+      </label>
     </div>
   </div>
-</template>
-
-<script>
-export default {
-  name: 'Demo1',
-}
-</script>
+</template>
diff --git a/examples/view/demos/checkbox/demo-2.vue b/examples/view/demos/checkbox/demo-2.vue
@@ -1,35 +1,24 @@
 <template>
-  <div>
-    <div class="dao-checkbox-group checkbox-inline">
-      <div class="dao-checkbox">
-        <label>
-          <input type="checkbox" checked>
-          option 1
-        </label>
-      </div>
-      <div class="dao-checkbox">
-        <label>
-          <input type="checkbox">
-          option 2
-        </label>
-      </div>
-      <div class="dao-checkbox disabled">
-        <label>
-          <input type="checkbox" checked disabled>
-          disable option
-        </label>
-      </div>
-      <div class="dao-checkbox disabled">
-        <label>
-          <input type="checkbox" disabled>
-          disable option
-        </label>
-      </div>
+  <div class="dao-checkbox-group checkbox-inline">
+    <div class="dao-checkbox">
+      <label>
+        <input type="checkbox" checked>option 1
+      </label>
+    </div>
+    <div class="dao-checkbox">
+      <label>
+        <input type="checkbox">option 2
+      </label>
+    </div>
+    <div class="dao-checkbox disabled">
+      <label>
+        <input type="checkbox" checked disabled>disable option
+      </label>
+    </div>
+    <div class="dao-checkbox disabled">
+      <label>
+        <input type="checkbox" disabled> disable option
+      </label>
     </div>
   </div>
-</template>
-<script>
-export default {
-  name: 'Demo2',
-};
-</script>
+</template>
diff --git a/examples/view/demos/color/demo-1.vue b/examples/view/demos/color/demo-1.vue
@@ -10,7 +10,6 @@
 
 <style lang="scss" scoped>
 @import 'daoColor';
-
 .color-demo {
   width: 15px;
   height: 15px;
@@ -31,5 +30,4 @@
 .generate-green-level-3 {
   background-color: generate-color($green, -3);
 }
-</style>
-
+</style>
diff --git a/examples/view/demos/editable-list/demo-1.vue b/examples/view/demos/editable-list/demo-1.vue
@@ -1,7 +1,12 @@
 <template>
   <div>
     <dao-editable-list @add="onAdd" @remove="onRemove">
-      <li slot="list" v-for="(d, i) in data" @click="onClick(i)" :class="{active: index === i}">
+      <li
+        slot="list"
+        v-for="(d, i) in data"
+        @click="onClick(i)"
+        :class="{active: index === i}"
+        :key="i">
         {{d.key}}
       </li>
       <div slot="content">
@@ -46,4 +51,4 @@
       },
     },
   };
-</script>
+</script>
diff --git a/examples/view/demos/numeric-badge/demo-1.vue b/examples/view/demos/numeric-badge/demo-1.vue
@@ -5,4 +5,4 @@
     <dao-numeric-badge>1</dao-numeric-badge>
     <dao-numeric-badge>123</dao-numeric-badge>
   </div>
-</template>
+</template>
diff --git a/examples/view/demos/numeric-badge/demo-2.vue b/examples/view/demos/numeric-badge/demo-2.vue
@@ -15,4 +15,4 @@
       };
     },
   };
-</script>
+</script>
diff --git a/examples/view/demos/progress/demo-1.vue b/examples/view/demos/progress/demo-1.vue
@@ -13,4 +13,4 @@
     <span>错误</span>
     <dao-progress type="error"></dao-progress>
   </div>
-</template>
+</template>
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,4 +15,4 @@ @@
           };
         },
       };
-    </script>
+    </script>