feat: taro-vue build

.gitignore

@@ -9,6 +9,8 @@ package-lock.json
 /src/nutui.ts
 /src/packages/nutui.vue.ts
 /src/packages/nutui.taro.vue.ts
+/.nyc_output
+/coverage
 /tsc/test
 
 

jd/copyDistToTaro.js

@@ -0,0 +1,33 @@
+const path = require('path');
+const fs = require('fs-extra');
+
+const distPath = path.resolve(__dirname, './../dist');
+
+const nutuiPath = path.resolve(
+  __dirname,
+  './../src/sites/mobile-taro/vue/node_modules/@nutui/nutui/dist'
+);
+
+//创建 dist 目录
+fs.ensureDirSync(distPath);
+
+// 创建 node_modules 下的 nutui目录
+if (
+  !fs.existsSync(
+    path.resolve(
+      __dirname,
+      './../src/sites/mobile-taro/vue/node_modules/@nutui'
+    )
+  )
+) {
+  console.error('please run yarn or npm first');
+  process.exit(-1);
+}
+
+//执行拷贝
+fs.copy(distPath, nutuiPath, err => {
+  if (err) {
+    console.err('An error occured while copying the folder.');
+  }
+  console.log('Copy completed!');
+});

package.json

@@ -44,6 +44,7 @@
     "build:gh-pages": "npm run checked && vite build --base=/nutui/",
     "build:site:oss": "npm run checked && vite build --base=/nutui/3x/",
     "build": "npm run checked && vite build --config vite.config.build.ts && npm run generate:types && npm run generate:themes",
+    "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && npm run generate:types && npm run generate:themes && npm run copytaro",
     "build:disperse": "vite build --config vite.config.build.disperse.ts",
     "serve": "vite preview",
     "upload": "yarn build:site:oss && node ./jd/upload.js",
@@ -55,7 +56,8 @@
     "generate:themes": "node jd/generate-themes.js",
     "prepare": "husky install",
     "test": "jest",
-    "release": "standard-version -a"
+    "release": "standard-version -a",
+    "copytaro": "node jd/copyDistToTaro.js"
   },
   "standard-version": {
     "scripts": {

src/config.json

@@ -245,6 +245,7 @@
         },
         {
           "name": "Icon",
+          "taro": true,
           "sort": 3,
           "cName": "图标组件",
           "type": "component",
@@ -504,6 +505,7 @@
       "packages": [
         {
           "name": "InputNumber",
+          "taro": true,
           "sort": 1,
           "cName": "数字输入框",
           "type": "component",

src/packages/__VUE/button/index.taro.vue

@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import { PropType, CSSProperties, toRefs, computed } from 'vue';
-import { createComponent } from '../../utils/create';
+import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('button');
 
 export type ButtonType =

src/packages/__VUE/inputnumber/index.taro.vue

@@ -0,0 +1,172 @@
+<template>
+  <view :class="classes" :style="{ height: pxCheck(buttonSize) }">
+    <nut-icon
+      name="minus"
+      class="nut-inputnumber__icon"
+      :class="{ 'nut-inputnumber__icon--disabled': !reduceAllow() }"
+      :size="buttonSize"
+      @click="reduce"
+    >
+    </nut-icon>
+    <view v-if="readonly" class="nut-inputnumber__text--readonly">
+      {{ modelValue }}
+    </view>
+    <input
+      v-else
+      type="number"
+      :min="min"
+      :max="max"
+      :style="{ width: pxCheck(inputWidth) }"
+      :disabled="disabled"
+      :readonly="readonly"
+      :value="modelValue"
+      @input="change"
+      @blur="blur"
+      @focus="focus"
+    />
+    <nut-icon
+      name="plus"
+      class="nut-inputnumber__icon"
+      :class="{ 'nut-inputnumber__icon--disabled': !addAllow() }"
+      :size="buttonSize"
+      @click="add"
+    >
+    </nut-icon>
+  </view>
+</template>
+<script lang="ts">
+import { computed } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+import { pxCheck } from '@/packages/utils/pxCheck';
+const { componentName, create } = createComponent('inputnumber');
+export default create({
+  props: {
+    modelValue: {
+      type: [Number, String],
+      default: 0
+    },
+    inputWidth: {
+      type: [Number, String],
+      default: ''
+    },
+    buttonSize: {
+      type: [Number, String],
+      default: ''
+    },
+    min: {
+      type: [Number, String],
+      default: 1
+    },
+    max: {
+      type: [Number, String],
+      default: 9999
+    },
+    step: {
+      type: [Number, String],
+      default: 1
+    },
+    decimalPlaces: {
+      type: [Number, String],
+      default: 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+    'update:modelValue',
+    'change',
+    'blur',
+    'focus',
+    'reduce',
+    'add',
+    'overlimit'
+  ],
+  setup(props, { emit }) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}--disabled`]: props.disabled
+      };
+    });
+    const fixedDecimalPlaces = (v: string | number): string => {
+      return Number(v).toFixed(Number(props.decimalPlaces));
+    };
+    const change = (event: Event) => {
+      const input = event.target as HTMLInputElement;
+      emit('update:modelValue', input.value, event);
+    };
+    const emitChange = (value: string | number, event: Event) => {
+      let output_value: number | string = fixedDecimalPlaces(value);
+      emit('change', output_value, event);
+      emit('update:modelValue', output_value, event);
+    };
+    const addAllow = (value = Number(props.modelValue)): boolean => {
+      return value < Number(props.max) && !props.disabled;
+    };
+    const reduceAllow = (value = Number(props.modelValue)): boolean => {
+      return value > Number(props.min) && !props.disabled;
+    };
+    const reduce = (event: Event) => {
+      emit('reduce', event);
+      if (reduceAllow()) {
+        let output_value = Number(props.modelValue) - Number(props.step);
+        emitChange(output_value, event);
+      } else {
+        emit('overlimit', event);
+      }
+    };
+    const add = (event: Event) => {
+      emit('add', event);
+      if (addAllow()) {
+        let output_value = Number(props.modelValue) + Number(props.step);
+        emitChange(output_value, event);
+      } else {
+        emit('overlimit', event);
+      }
+    };
+    const blur = (event: Event) => {
+      if (props.disabled) return;
+      if (props.readonly) return;
+      const input = event.target as HTMLInputElement;
+      let value = +input.value;
+      if (value < Number(props.min)) {
+        value = Number(props.min);
+      } else if (value > Number(props.max)) {
+        value = Number(props.max);
+      }
+      emitChange(value, event);
+      emit('blur', event);
+    };
+    const focus = (event: Event) => {
+      if (props.disabled) return;
+      if (props.readonly) {
+        blur(event);
+        return;
+      }
+      emit('focus', event);
+    };
+    return {
+      classes,
+      change,
+      blur,
+      focus,
+      add,
+      addAllow,
+      reduce,
+      reduceAllow,
+      pxCheck
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

src/sites/mobile-taro/vue/project.config.json

@@ -1,13 +1,43 @@
 {
-  "miniprogramRoot": "./dist",
-  "projectname": "@nutui/nutui-taro-mobile",
+  "miniprogramRoot": "dist/",
+  "projectname": "%40nutui%2Fnutui-taro-mobile",
   "description": "nutui-taro-vue",
-  "appid": "touristappid",
+  "appid": "wxee296c9bffc451d9",
   "setting": {
     "urlCheck": true,
     "es6": false,
+    "enhance": false,
     "postcss": false,
-    "minified": false
+    "preloadBackgroundData": false,
+    "minified": false,
+    "newFeature": false,
+    "coverView": true,
+    "nodeModules": false,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": true,
+    "scopeDataCheck": false,
+    "uglifyFileName": false,
+    "checkInvalidKey": true,
+    "checkSiteMap": true,
+    "uploadWithSourceMap": true,
+    "compileHotReLoad": false,
+    "useMultiFrameRuntime": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "enableEngineNative": false,
+    "useIsolateContext": true,
+    "useCompilerModule": true,
+    "userConfirmedUseCompilerModuleSwitch": false,
+    "userConfirmedBundleSwitch": false,
+    "packNpmManually": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": true
   },
-  "compileType": "miniprogram"
-}
+  "compileType": "miniprogram",
+  "condition": {}
+}

src/sites/mobile-taro/vue/src/app.config.ts

@@ -1,5 +1,7 @@
 export default {
   pages: [
+    'pages/icon/index',
+    'pages/inputnumber/index',
     'pages/tabbar/index',
     'pages/navbar/index',
     'pages/overlay/index',

src/sites/mobile-taro/vue/src/pages/icon/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'Icon'
+};

src/sites/mobile-taro/vue/src/pages/icon/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="demo">
+    <h2>基础用法</h2>
+    <nut-cell>
+      <nut-icon name="dongdong"></nut-icon>
+      <nut-icon name="JD"></nut-icon>
+    </nut-cell>
+    <h2>图片链接</h2>
+    <nut-cell>
+      <nut-icon
+        size="40"
+        name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+      ></nut-icon>
+    </nut-cell>
+    <h2>图标颜色</h2>
+    <nut-cell>
+      <nut-icon name="dongdong" color="#fa2c19"></nut-icon>
+      <nut-icon name="dongdong" color="#64b578"></nut-icon>
+      <nut-icon name="JD" color="#fa2c19"></nut-icon>
+    </nut-cell>
+
+    <h2>图标大小</h2>
+    <nut-cell>
+      <nut-icon name="dongdong"></nut-icon>
+      <nut-icon name="dongdong" size="24"></nut-icon>
+      <nut-icon name="dongdong" size="16"></nut-icon>
+    </nut-cell>
+
+    <h2>基础图标</h2>
+    <nut-cell>
+      <ul>
+        <li v-for="item in icons.glyphs" :key="item.font_class">
+          <nut-icon :name="item.font_class"></nut-icon>
+          <span>{{ item.name }}</span>
+        </li>
+      </ul>
+    </nut-cell>
+  </div>
+</template>
+
+<script lang="ts">
+import icons from './../../../../../../packages/styles/font/iconfont.json';
+export default {
+  props: {},
+  setup() {
+    return { icons };
+  }
+};
+</script>
+
+<style lang="scss">
+.nut-cell {
+  > .nutui-iconfont {
+    margin-right: 10px;
+  }
+}
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  li {
+    flex: 0 0 25%;
+    max-width: 25%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    span {
+      height: 40px;
+    }
+    .nutui-iconfont {
+      margin: 16px 0 16px;
+    }
+  }
+}
+</style>

src/sites/mobile-taro/vue/src/pages/inputnumber/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'InputNumber'
+};

src/sites/mobile-taro/vue/src/pages/inputnumber/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="demo">
+    <h2>基本用法</h2>
+    <nut-cell>
+      <nut-inputnumber v-model="state.val1" />
+    </nut-cell>
+    <h2>步长设置</h2>
+    <nut-cell>
+      <nut-inputnumber v-model="state.val2" step="5" />
+    </nut-cell>
+    <h2>限制输入范围</h2>
+    <nut-cell>
+      <nut-inputnumber
+        v-model="state.val3"
+        @overlimit="overlimit"
+        min="10"
+        max="20"
+      />
+    </nut-cell>
+    <h2>禁用操作</h2>
+    <nut-cell>
+      <nut-inputnumber v-model="state.val4" disabled />
+    </nut-cell>
+    <h2>只读禁用输入框</h2>
+    <nut-cell>
+      <nut-inputnumber v-model="state.val5" readonly />
+    </nut-cell>
+    <h2>支持小数</h2>
+    <nut-cell>
+      <nut-inputnumber
+        v-model="state.val6"
+        step="0.1"
+        decimal-places="1"
+        readonly
+      />
+    </nut-cell>
+    <h2>支持异步修改</h2>
+    <nut-cell>
+      <nut-inputnumber :model-value="state.val8" @change="onChange" />
+    </nut-cell>
+    <h2>自定义按钮大小</h2>
+    <nut-cell>
+      <nut-inputnumber v-model="state.val7" button-size="30" input-width="50" />
+    </nut-cell>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  props: {},
+  setup() {
+    const state = reactive({
+      val1: 1,
+      val2: 0,
+      val3: 10,
+      val4: 0,
+      val5: 1,
+      val6: 5.5,
+      val7: 1,
+      val8: 1,
+      step: 1.1
+    });
+
+    const onChange = (value: number) => {
+      console.log('异步演示 2 秒后更改');
+      setTimeout(() => {
+        state.val8 = value;
+      }, 2000);
+    };
+
+    const overlimit = () => {
+      console.log('超出限制事件触发');
+    };
+
+    return {
+      state,
+      onChange,
+      overlimit
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/sites/mobile-taro/vue/src/pages/navbar/index.vue

@@ -72,8 +72,8 @@
 </template>
 
 <script lang="ts">
-import { reactive } from 'vue';
-export default {
+import { reactive, defineComponent } from 'vue';
+export default defineComponent({
   setup(props, { emit }) {
     const tabList = [
       {
@@ -110,34 +110,34 @@ export default {
       }
     ];
     const back = () => {
-      alert('header头部， 点击返回');
+      console.log('header头部， 点击返回');
     };
     const title = () => {
-      alert('header头部， 点击title');
+      console.log('header头部， 点击title');
     };
     const right = () => {
-      alert('header头部， 点击右侧按钮');
+      console.log('header头部， 点击右侧按钮');
     };
     const icon = () => {
-      alert('icon');
+      console.log('icon');
     };
     const send = () => {
-      alert('发送');
+      console.log('发送');
     };
     const edit = () => {
-      alert('编辑');
+      console.log('编辑');
     };
     const more = () => {
-      alert('更多');
+      console.log('更多');
     };
     const clear = () => {
-      alert('清空');
+      console.log('清空');
     };
     const list = () => {
-      alert('列表');
+      console.log('列表');
     };
     const morelist = () => {
-      alert('多个更多');
+      console.log('多个更多');
     };
     function switchTab(id: number, name: string) {
       console.log(id, name);
@@ -160,7 +160,7 @@ export default {
       })
     };
   }
-};
+});
 </script>
 
 <style lang="scss" scoped></style>

vite.config.build.taro.vue.ts

@@ -0,0 +1,44 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import config from './package.json';
+
+const banner = `/*!
+* ${config.name} v${config.version} ${new Date()}
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/`;
+
+export default defineConfig({
+  resolve: {
+    alias: [{ find: '@', replacement: path.resolve(__dirname, './src') }]
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        // example : additionalData: `@import "./src/design/styles/variables";`
+        // dont need include file extend .scss
+        additionalData: `@import "@/packages/styles/variables.scss";@import "@/sites/assets/styles/variables.scss";`
+      }
+    }
+  },
+  plugins: [vue()],
+  build: {
+    rollupOptions: {
+      // 请确保外部化那些你的库中不需要的依赖
+      external: ['vue', 'vue-router'],
+      output: {
+        banner,
+        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    },
+    lib: {
+      entry: 'src/packages/nutui.taro.vue.ts',
+      name: 'nutui',
+      formats: ['es', 'umd']
+    }
+  }
+});