ソースを参照

fix: 优化add命令

guoxiaoxiao8 5 年 前
コミット
c8fcb8b4d4
5 ファイル変更229 行追加99 行削除
  1. 10 74
      jd/createComponentMode.js
  2. 111 0
      jd/demo.js
  3. 21 5
      src/config.js
  4. 22 9
      src/packages/input/demo.vue
  5. 65 11
      src/packages/input/index.vue

+ 10 - 74
jd/createComponentMode.js

@@ -2,32 +2,22 @@
 
 const inquirer = require('inquirer');
 // import {  ROOT_PACKAGE_PATH } from '../util/dic';
-//const conf = require(ROOT_PACKAGE_PATH('src/config.json'));
-//import {a} from "./a.js"
-// import  {nav}  from '../src/config.js';
-// import { from } from 'core-js/fn/array';
+
 const path = require('path');
 const fs = require('fs');
 const config =require("../src/config");
+const demoModel=require("./demo")
 const nav=config.nav;
-// const copy = require('copy');
-//const createPkgDeclare = require('./createPkgDeclare');
-// const t = require('@babel/types');
-// const { parse } = require('@babel/parser');
-// const { default: traverse } = require('@babel/traverse');
-// const { default: generate } = require('@babel/generator');
-console.log("module.exports = "+JSON.stringify(config, null, 2)+";")
 
 var newCpt = {
-  version: '1.0.0',
+  version: '3.0.0',
   name: '',
   type: '',
   cName: '',
   desc: '',
   sort: '',
-  show: false,
-  author: '',
-  star: undefined
+  show: true,
+  author: ''
 };
 function init() {
   inquirer
@@ -158,7 +148,7 @@ function createIndexJs() {
     // }
     // fs.writeFile(filePath,  content, (err) => {
     //     if (err) throw err;
-    resolve(`生成index.js文件成功`);
+   resolve(`生成index.js文件成功`);
     // });
   });
 }
@@ -166,49 +156,7 @@ function createIndexJs() {
 function createVue() {
   return new Promise((resolve, reject) => {
     const nameLc = newCpt.name.toLowerCase();
-    let content = `<template>
-		<view :class="classes" @click="handleClick">
-		  <view>{{ name }}</view>
-		  <view>{{ txt }}</view>
-		</view>
-	  </template>
-	  <script lang="ts">
-	  import { toRefs } from 'vue';
-	  import { createComponent } from '@/utils/create';
-	  const { componentName, create } = createComponent('temp');
-	  
-	  export default create({
-		props: {
-		  name: {
-			type: String,
-			default: ''
-		  },
-		  txt: {
-			type: String,
-			default: ''
-		  }
-		},
-		components: {},
-		emits: ['click'],
-	  
-		setup(props, { emit }) {
-		  console.log('componentName', componentName);
-	  
-		  const { name, txt } = toRefs(props);
-	  
-		  const handleClick = (event: Event) => {
-			emit('click', event);
-		  };
-	  
-		  return { name, txt, handleClick };
-		}
-	  });
-	  </script>
-	  
-	  <style lang="scss">
-	  @import 'index.scss';
-	  </style>
-	  `;
+    let content = demoModel(nameLc).vue;
     const dirPath = path.join(__dirname, `../src/packages/${nameLc}/`);
     const filePath = path.join(dirPath, `index.vue`);
     if (!fs.existsSync(dirPath)) {
@@ -224,18 +172,7 @@ function createVue() {
 function createDemo() {
   return new Promise((resolve, reject) => {
     const nameLc = newCpt.name.toLowerCase();
-    let content = `<template>
-    <div class="demo-list"></div>
-</template>
-<script>
-export default {
-    data() {
-        return {};
-    },
-    methods: {
-    }
-}
-</script>`;
+    let content = demoModel(nameLc).demo;
     const dirPath = path.join(__dirname, '../src/packages/' + nameLc);
     const filePath = path.join(dirPath, `demo.vue`);
     if (!fs.existsSync(dirPath)) {
@@ -252,7 +189,6 @@ function addToPackageJson() {
   return new Promise((resolve, reject) => {
       let sort=newCpt.sort;
       newCpt.sort=nav[sort-1].packages.length+1;
-      console.log(newCpt)
       nav[sort-1].packages.push(newCpt);
       config.nav=nav;
       // conf.packages.push(newCpt);
@@ -269,7 +205,7 @@ function addToPackageJson() {
 function createScss() {
   return new Promise((resolve, reject) => {
     const nameLc = newCpt.name.toLowerCase();
-    let content = `.nut-temp {}`;
+    let content = `.nut-${nameLc} {}`;
     const dirPath = path.join(__dirname, '../src/packages/' + nameLc);
     const filePath = path.join(dirPath, `index.scss`);
     if (!fs.existsSync(dirPath)) {
@@ -284,7 +220,7 @@ function createScss() {
 function createDoc() {
   return new Promise((resolve, reject) => {
     const nameLc = newCpt.name.toLowerCase();
-    let content = `组建使用说明文件`;
+    let content = demoModel(nameLc).doc;
     const dirPath = path.join(__dirname, '../src/packages/' + nameLc);
     const filePath = path.join(dirPath, `doc.md`);
     if (!fs.existsSync(dirPath)) {

+ 111 - 0
jd/demo.js

@@ -0,0 +1,111 @@
+var nameLc = 'test';
+var demoModel = function(nameLc) {
+  var temp = {
+    demo: `<template>
+    <div class="demo">
+      <h2>基础用法</h2>
+      <nut-cell>
+        <nut-temp name="wifi"></nut-temp>
+        <nut-temp name="mail" txt="test txt"></nut-temp>
+      </nut-cell>
+    </div>
+  </template>
+  
+  <script lang="ts">
+  import { createComponent } from '@/utils/create';
+  const { createDemo } = createComponent('${nameLc}');
+  export default createDemo({
+    props: {},
+    setup() {
+      return {};
+    }
+  });
+  </script>
+  
+  <style lang="scss" scoped>
+  .nut-temp {
+  }
+  </style>
+  `,
+    vue: `<template>
+    <view :class="classes" @click="handleClick">
+      <view>{{ name }}</view>
+      <view>{{ txt }}</view>
+    </view>
+  </template>
+  <script lang="ts">
+  import { toRefs } from 'vue';
+  import { createComponent } from '@/utils/create';
+  const { componentName, create } = createComponent('${nameLc}');
+  
+  export default create({
+    props: {
+      name: {
+        type: String,
+        default: ''
+      },
+      txt: {
+        type: String,
+        default: ''
+      }
+    },
+    components: {},
+    emits: ['click'],
+  
+    setup(props, { emit }) {
+      console.log('componentName', componentName);
+  
+      const { name, txt } = toRefs(props);
+  
+      const handleClick = (event: Event) => {
+        emit('click', event);
+      };
+  
+      return { name, txt, handleClick };
+    }
+  });
+  </script>
+  
+  <style lang="scss">
+  @import 'index.scss';
+  </style>
+  `,
+    doc: `#  ${nameLc}组件
+
+    ### 介绍
+    
+    基于 xxxxxxx
+    
+    ### 安装
+    
+    ${''}
+    
+    ## 代码演示
+    
+    ### 基础用法1
+    
+
+    
+    ## API
+    
+    ### Props
+    
+    | 参数         | 说明                             | 类型   | 默认值           |
+    |--------------|----------------------------------|--------|------------------|
+    | name         | 图标名称或图片链接               | String | -                |
+    | color        | 图标颜色                         | String | -                |
+    | size         | 图标大小,如 '20px' '2em' '2rem' | String | -                |
+    | class-prefix | 类名前缀,用于使用自定义图标     | String | 'nutui-iconfont' |
+    | tag          | HTML 标签                        | String | 'i'              |
+    
+    ### Events
+    
+    | 事件名 | 说明           | 回调参数     |
+    |--------|----------------|--------------|
+    | click  | 点击图标时触发 | event: Event |
+    `
+  };
+
+  return temp;
+};
+module.exports = demoModel;

+ 21 - 5
src/config.js

@@ -1,8 +1,17 @@
 module.exports = {
   versions: [
-    { name: '1.x', link: '/1x/' },
-    { name: '2.x', link: '/' },
-    { name: '3.x', link: '/3x/' }
+    {
+      name: '1.x',
+      link: '/1x/'
+    },
+    {
+      name: '2.x',
+      link: '/'
+    },
+    {
+      name: '3.x',
+      link: '/3x/'
+    }
   ],
   header: [
     {
@@ -26,7 +35,6 @@ module.exports = {
       path: '/resource'
     }
   ],
-
   docs: {
     name: '指南',
     packages: [
@@ -58,7 +66,6 @@ module.exports = {
       }
     ]
   },
-
   nav: [
     {
       name: '布局组件',
@@ -217,6 +224,15 @@ module.exports = {
           show: true,
           desc: '数字输入框组件',
           author: 'szg2008'
+        },
+        {
+          name: 'Input',
+          sort: 2,
+          cName: '输入框',
+          type: 'component',
+          show: true,
+          desc: '输入框组件',
+          author: 'gxx158'
         }
       ]
     },

+ 22 - 9
src/packages/input/demo.vue

@@ -1,12 +1,25 @@
 <template>
-    <div class="demo-list"></div>
+  <div class="demo">
+    <h2>基础用法</h2>
+    <nut-cell>
+      <nut-temp name="wifi"></nut-temp>
+      <nut-temp name="mail" txt="test txt"></nut-temp>
+    </nut-cell>
+  </div>
 </template>
-<script>
-export default {
-    data() {
-        return {};
-    },
-    methods: {
-    }
+
+<script lang="ts">
+import { createComponent } from '@/utils/create';
+const { createDemo } = createComponent('input');
+export default createDemo({
+  props: {},
+  setup() {
+    return {};
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.nut-temp {
 }
-</script>
+</style>

+ 65 - 11
src/packages/input/index.vue

@@ -1,23 +1,77 @@
 <template>
-  <view :class="classes" @click="handleClick">
-  
-  </view>
+  <div class="nut-input">
+    <span class="nut-require" v-if="requireShow">*</span>
+    <span class="nut-field-label" v-if="label">{{ label }}</span>
+
+    <div v-if="type === 'textarea'" class="nut-text-core">
+      <textarea @input="txtIptLength" v-model="currentValue"> </textarea>
+      <span class="nut-text-limit" v-if="limitShow"
+        ><span :class="[{ 'nut-field-over': overLmitNumber }]">{{
+          txtNum
+        }}</span
+        >/{{ maxLength }}</span
+      >
+    </div>
+    <input
+      v-else
+      :type="type"
+      :disabled="disabled"
+      :readonly="readonly"
+      :value="currentValue"
+      @input="handleInput"
+    />
+
+    <div
+      @click="handleClear"
+      class="nut-textinput-clear"
+      v-if="!disableClear"
+      v-show="currentValue && type !== 'textarea' && active"
+    >
+      <svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+        <path
+          d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm2.8 9.7c.3.3.3.8 0 1.1s-.8.3-1.1 0L8 9.1l-1.7 1.7c-.3.3-.8.3-1.1 0-.3-.3-.3-.8 0-1.1L6.9 8 5.2 6.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0L8 6.9l1.7-1.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1L9.1 8l1.7 1.7z"
+        />
+      </svg>
+    </div>
+  </div>
 </template>
 <script lang="ts">
-import { toRefs } from 'vue';
+//import { toRefs } from 'vue';
 import { createComponent } from '@/utils/create';
-const { componentName, create } = createComponent('temp');
+const { componentName, create } = createComponent('input');
 
 export default create({
   props: {
-    name: {
+    type: {
       type: String,
-      default: ''
+      default: 'text'
     },
-    txt: {
+    textAlign: {
+      type: String,
+      default: 'right'
+    },
+    limitShow: {
+      type: Boolean,
+      default: true
+    },
+    maxLength: {
       type: String,
       default: ''
-    }
+    },
+    requireShow: {
+      type: Boolean,
+      default: false
+    },
+    rows: String,
+    label: String,
+    placeholder: String,
+    readonly: Boolean,
+    disabled: Boolean,
+    autosize: {
+      type: Boolean,
+      default: false
+    },
+    value: String
   },
   components: {},
   emits: ['click'],
@@ -25,13 +79,13 @@ export default create({
   setup(props, { emit }) {
     console.log('componentName', componentName);
 
-    const { name, txt } = toRefs(props);
+    // const { name, txt } = toRefs(props);
 
     const handleClick = (event: Event) => {
       emit('click', event);
     };
 
-    return { name, txt, handleClick };
+    return { handleClick };
   }
 });
 </script>