feat(update layout componment and md desc cotent): update layout comp…

…onment and md desc cotent

update layout componment and md desc cotent of other edit

.storybook/preview.js

@@ -3,8 +3,12 @@ import Vue from 'vue';
 import '../src/assets/style.css';
 import '../src/assets/icon.css';
 import HButton from '../src/components/HButton.vue';
+import HRow from '../src/components/HRow.vue';
+import HCol from '../src/components/HCol.vue';
 
 Vue.component('h-button', HButton);
+Vue.component('h-row', HRow);
+Vue.component('h-col',HCol);
 
 addParameters({
   docs: {

src/components/HCol.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="classes">
+    <slot/>
+  </div>
+</template>
+<script>
+
+  import {colOfSizeArgs} from '../utils/screen';
+
+  export default {
+    data() {
+      return {}
+    },
+    name: "HCol",
+    props: {
+      sm: {
+        type: [Number, Object],
+        default: null
+      },
+      md: {
+        type: [Number, Object],
+        default: null
+      },
+      lg: {
+        type: [Number, Object],
+        default: null
+      },
+      xl: {
+        type: [Number, Object],
+        default: null
+      }
+    },
+    computed: {
+      classes() {
+        return colOfSizeArgs(this, ["sm", "md", "lg", "xl"])
+      }
+    }
+  }
+</script>

src/components/HRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" :class="classes">
+  <div :class="classes">
     <slot/>
   </div>
 </template>
@@ -11,6 +11,7 @@
     data() {
       return {}
     },
+    name: "HRow",
     props: {
       align: {
         type: String,

src/layout.stories.js

@@ -0,0 +1,8 @@
+import HRow from "./components/HRow.vue";
+import HCol from "./components/HCol.vue";
+
+export default {
+  title: 'Layout',
+  components: {HRow, HCol},
+};
+

src/layout.stories.mdx

@@ -0,0 +1,41 @@
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+import HRow from './components/HRow.vue';
+import HCol from './components/HCol.vue';
+
+![button](/public/undraw_grid_design_obmd.svg)
+
+<Meta title='Layout' components={HRow,HCol} />
+
+# Layout
+
+This is **Layout** component description
+
+<Story name='HRow' height='50px'>{{
+  components: { HRow },
+  template: '<h-row align="top" justify="start">HRow</h-row>'
+}}</Story>
+
+```
+<h-row align="top" justify="start">HRow</h-row>
+```
+
+<Story name='HCol' height='50px'>{{
+  components: { HCol },
+  template: '<h-row align="top" justify="start"><h-col :sm="8" :md="8" :lg="8" :xl="8">HCol</h-col></h-row>'
+}}</Story>
+
+```
+<h-row align="top" justify="start">
+  <h-col :sm="8" :md="8" :lg="8" :xl="8">HCol</h-col>
+</h-row>
+```
+
+
+
+## Props
+
+# HRow
+<Props of={HRow} />
+
+# HCol
+<Props of={HCol} />

src/utils/assist.js

@@ -1,5 +1,11 @@
 export const prefixCls = 'h'
 
+export function fieldType(field) {
+  const T = {}.toString.call(field);
+  return T;
+}
+
+
 export const nameMap = {
   primary: 'blue',
   success: 'green',

src/utils/screen.js

@@ -1,4 +1,4 @@
-import {prefixCls} from './assist';
+import {prefixCls, fieldType} from './assist';
 
 const alignMap = {
   top: `${prefixCls}-items-start`,
@@ -14,8 +14,46 @@ const justifyMap = {
   'space-between': `${prefixCls}-content-between`,
 };
 
+export function colOfSizeArgs(that, propsName) {
+  return colOfSizeCls(...propsName, that)
+}
+
+function colOfSizeCls() {
+  let c = 0,
+    name = null,
+    v = null,
+    t = null,
+    arr = [];
+  while (typeof (t = colSizeType(v = (arguments[arguments.length - 1][(name = arguments[c])]), name)) === "string") {
+    if (t !== "null") {
+      arr.push(`${name}:${prefixCls}-w-${v}`);
+    }
+    c++;
+    if (c === arguments.length - 1) {
+      break;
+    }
+  }
+  return arr.join(" ");
+}
+
+
+function colSizeType(col, name) {
+  const T = fieldType(col);
+  if (T === '[object Null]' && typeof col === 'object') {
+    return "null";
+  }
+  if (T === '[object Number]') {
+    return "number"
+  }
+  if (T === '[object Object]' && typeof col === 'object') {
+    return "object";
+  }
+  console.error(`This is ${name} Col Type Don't not Number or Object`);
+  return null;
+}
+
 export function screen(alignType, justifyType) {
-    return `${prefixCls}-flex ${align(alignType)} ${justify(justifyType)}`
+  return `${prefixCls}-container ${prefixCls}-flex ${align(alignType)} ${justify(justifyType)}`
 }
 
 export function align(type) {