refactor(button): script setup

scripts/generate-nutui-taro-vue.cjs

@@ -11,14 +11,20 @@ declare module 'vue' {
 const packages = [];
 config.nav.map((item) => {
   item.packages.forEach((element) => {
-    let { name, exclude, taro } = element;
+    let { name, exclude, taro, setup } = element;
     if (taro == true) {
-      dts += `    Nut${name}: typeof import('@/packages/__VUE/${name.toLowerCase()}/index.taro.vue')['default']\n`
-      const filePath = path.join(`src/packages/__VUE/${name.toLowerCase()}/index.taro.vue`);
-      if (name !== 'Icon') {
-        importStr += `import ${name} from './__VUE/${name.toLowerCase()}/index${
-          fs.existsSync(filePath) ? '.taro' : ''
-        }.vue';\n`;
+      if (setup === true) {
+        dts += `    Nut${name}: typeof import('@/packages/__VUE/${name.toLowerCase()}/index.taro')['default']\n`
+        importStr += `import ${name} from './__VUE/${name.toLowerCase()}/index.taro';\n`;
+        importStr += `export * from './__VUE/${name.toLowerCase()}/index.taro';\n`;
+      } else {
+        dts += `    Nut${name}: typeof import('@/packages/__VUE/${name.toLowerCase()}/index.taro.vue')['default']\n`
+        const filePath = path.join(`src/packages/__VUE/${name.toLowerCase()}/index.taro.vue`);
+        if (name !== 'Icon') {
+          importStr += `import ${name} from './__VUE/${name.toLowerCase()}/index${
+            fs.existsSync(filePath) ? '.taro' : ''
+          }.vue';\n`;
+        }
       }
       importScssStr += `import './__VUE/${name.toLowerCase()}/index.scss';\n`;
       if (exclude != true) {

scripts/generate-nutui.cjs

@@ -12,14 +12,20 @@ const packages = [];
 const methods = [];
 config.nav.map((item) => {
   item.packages.forEach((element) => {
-    let { name, type, exclude } = element;
-    dts += `    Nut${name}: typeof import('./__VUE/${name.toLowerCase()}/index.vue')['default']\n`
-    if (name !== 'Icon') {
-      importStr += `import ${name} from './__VUE/${name.toLowerCase()}/index.vue';\n`;
-    }
-    if (type === 'methods') {
-      importStr += `import { show${name} } from './__VUE/${name.toLowerCase()}/index';\n`;
-      methods.push(`show${name}`);
+    let { name, type, exclude, setup } = element;
+    if (setup === true) {
+      dts += `    Nut${name}: typeof import('./__VUE/${name.toLowerCase()}/index')['default']\n`
+      importStr += `import ${name} from './__VUE/${name.toLowerCase()}/index';\n`;
+      importStr += `export * from './__VUE/${name.toLowerCase()}/index';\n`;
+    } else {
+      dts += `    Nut${name}: typeof import('./__VUE/${name.toLowerCase()}/index.vue')['default']\n`
+      if (name !== 'Icon') {
+        importStr += `import ${name} from './__VUE/${name.toLowerCase()}/index.vue';\n`;
+      }
+      if (type === 'methods') {
+        importStr += `import { show${name} } from './__VUE/${name.toLowerCase()}/index';\n`;
+        methods.push(`show${name}`);
+      }
     }
     importScssStr += `import './__VUE/${name.toLowerCase()}/index.scss';\n`;
     if (exclude != true) {

scripts/generate-types-taro.cjs

@@ -44,7 +44,13 @@ const getCompName = (name) => {
     });
   }
   const packageName = packages.find((item) => item.name.toLowerCase() === name.toLowerCase());
-  return packageName ? packageName.name : '';
+  if (packageName) {
+    if (packageName?.setup === true) {
+      return [packageName.name, true]
+    }
+    return [packageName.name, false]
+  }
+  return ''
 };
 
 const getLocale = () => {
@@ -101,16 +107,23 @@ fs.cp(sourceDir, toDir, { recursive: true }, (err) => {
     if (inputs && inputs.length) {
       let name = item.substring(0, item.lastIndexOf('/'));
       name = name.substring(name.lastIndexOf('/') + 1);
-      const componentName = getCompName(name);
-      if (componentName) {
+      const _ComponentName = getCompName(name);
+      if (_ComponentName) {
+        const [componentName, setup] = _ComponentName;
         let remain = `
 declare module 'vue' {
     interface GlobalComponents {
         Nut${componentName}: typeof _default;
     }
 }`;
-        let changeContent = content.replace(regex, `${preContent}${start} Install<${inputs[1]}>${end}${remain}`);
-        fs.writeFileSync(item, changeContent);
+        if (setup) {
+          let changeContent = content.replace('export default _default;', `declare const _nut_default: WithInstall<typeof _default>;\nexport default _nut_default;\n${remain}`);
+          changeContent = `import type { WithInstall } from '../../utils';\n` + changeContent
+          fs.writeFileSync(item, changeContent);
+        } else {
+          let changeContent = content.replace(regex, `${preContent}${start} Install<${inputs[1]}>${end}${remain}`);
+          fs.writeFileSync(item, changeContent);
+        }
       }
     }
   });

scripts/generate-types.cjs

@@ -44,7 +44,13 @@ const getCompName = (name) => {
     });
   }
   const packageName = packages.find((item) => item.name.toLowerCase() === name.toLowerCase());
-  return packageName ? packageName.name : '';
+  if (packageName) {
+    if (packageName?.setup === true) {
+      return [packageName.name, true]
+    }
+    return [packageName.name, false]
+  }
+  return ''
 };
 
 const getLocale = () => {
@@ -101,16 +107,23 @@ fs.cp(sourceDir, toDir, { recursive: true }, (err) => {
     if (inputs && inputs.length) {
       let name = item.substring(0, item.lastIndexOf('/'));
       name = name.substring(name.lastIndexOf('/') + 1);
-      const componentName = getCompName(name);
-      if (componentName) {
+      const _ComponentName = getCompName(name);
+      if (_ComponentName) {
+        const [componentName, setup] = _ComponentName;
         let remain = `
 declare module 'vue' {
     interface GlobalComponents {
         Nut${componentName}: typeof _default;
     }
 }`;
-        let changeContent = content.replace(regex, `${preContent}${start} Install<${inputs[1]}>${end}${remain}`);
-        fs.writeFileSync(item, changeContent);
+        if (setup) {
+          let changeContent = content.replace('export default _default;', `declare const _nut_default: WithInstall<typeof _default>;\nexport default _nut_default;\n${remain}`);
+          changeContent = `import type { WithInstall } from '../../utils';\n` + changeContent
+          fs.writeFileSync(item, changeContent);
+        } else {
+          let changeContent = content.replace(regex, `${preContent}${start} Install<${inputs[1]}>${end}${remain}`);
+          fs.writeFileSync(item, changeContent);
+        }
       }
     }
   });

src/config.json

@@ -86,6 +86,7 @@
           "cName": "按钮",
           "type": "component",
           "show": true,
+          "setup": true,
           "desc": "按钮用于触发一个操作，如提交表单。",
           "author": "richard1015"
         },

src/packages/__VUE/addresslist/components/GeneralShell.taro.vue

@@ -46,7 +46,7 @@ import { ref, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('address-list-general');
 import ItemContents from './ItemContents.taro.vue';
-import NutButton from '../../button/index.taro.vue';
+import NutButton from '../../button/index.taro';
 import NutSwipe from '../../swipe/index.taro.vue';
 
 export default create({

src/packages/__VUE/addresslist/components/GeneralShell.vue

@@ -46,7 +46,7 @@ import { ref, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('address-list-general');
 import ItemContents from './ItemContents.vue';
-import NutButton from '../../button/index.vue';
+import NutButton from '../../button';
 import NutSwipe from '../../swipe/index.vue';
 
 export default create({

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

@@ -41,7 +41,7 @@ import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('address-list');
 import GeneralShell from './components/GeneralShell.taro.vue';
 import { floatData } from '@/packages/utils/util';
-import NutButton from '../button/index.taro.vue';
+import NutButton from '../button/index.taro';
 import { useLocale } from '@/packages/utils/useLocale';
 
 const cN = 'NutAddressList';

src/packages/__VUE/addresslist/index.vue

@@ -41,7 +41,7 @@ import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('address-list');
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
-import NutButton from '../button/index.vue';
+import NutButton from '../button';
 import { useLocale } from '@/packages/utils/useLocale';
 
 const cN = 'NutAddressList';

src/packages/__VUE/audiooperate/index.vue

@@ -25,7 +25,7 @@
 <script lang="ts">
 import { toRefs, ref, useSlots, reactive, inject, type PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import NutButton from '../button/index.vue';
+import NutButton from '../button';
 import { useLocale } from '@/packages/utils/useLocale';
 import type { AudioOperateType } from './types';
 

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

@@ -42,7 +42,7 @@
 
 <script lang="ts">
 import { watch, ref, reactive, toRefs, computed, PropType, onMounted } from 'vue';
-import NutButton from '../button/index.taro.vue';
+import NutButton from '../button/index.taro';
 import { createComponent } from '@/packages/utils/create';
 import type {
   AvatarCropperToolbarPosition,

src/packages/__VUE/avatarcropper/index.vue

@@ -42,7 +42,7 @@
 
 <script lang="ts">
 import { watch, ref, reactive, toRefs, computed, Ref, PropType } from 'vue';
-import NutButton from '../button/index.vue';
+import NutButton from '../button';
 import { createComponent } from '@/packages/utils/create';
 import type { AvatarCropperToolbarPosition, AvatarCropperShape } from './types';
 const { create } = createComponent('avatar-cropper');

src/packages/__VUE/button/__tests__/button.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import Button from '../index.vue';
+import Button from '../';
 import { nextTick } from 'vue';
 import { StarFill } from '@nutui/icons-vue';
 test('emit click event', () => {
@@ -55,3 +55,19 @@ test('should find nut-icon class of an svg tag when using icon slot', () => {
   expect(icons.length).toEqual(1);
   expect(icons[0].element.classList).toContain('nut-icon');
 });
+test('props color & plain', async () => {
+  const wrapper = mount(Button, {
+    props: {
+      color: 'blue'
+    }
+  });
+
+  const btn = wrapper.findComponent(Button);
+  expect(btn.html()).toContain('background: blue');
+
+  wrapper.setProps({
+    plain: true
+  });
+  await nextTick();
+  expect(btn.html()).toContain('border-color: blue');
+});

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

@@ -0,0 +1,109 @@
+<template>
+  <button
+    :class="classes"
+    :style="getStyle"
+    :type="Taro.getEnv() === Taro.ENV_TYPE.WEB ? formType : undefined"
+    :formType="formType === 'button' ? undefined : formType"
+    @click="handleClick"
+  >
+    <view class="nut-button__wrap">
+      <Loading v-if="loading" class="nut-icon-loading" />
+      <slot v-if="$slots.icon && !loading" name="icon"></slot>
+      <view v-if="$slots.default" :class="{ 'nut-button__text': $slots.icon || loading }">
+        <slot></slot>
+      </view>
+    </view>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { PropType, CSSProperties, toRefs, computed } from 'vue';
+import { Loading } from '@nutui/icons-vue-taro';
+import Taro from '@tarojs/taro';
+import type { ButtonShape, ButtonType, ButtonSize, ButtonFormType } from './types';
+
+defineOptions({
+  name: 'NutButton'
+});
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: ''
+  },
+  shape: {
+    type: String as PropType<ButtonShape>,
+    default: 'round'
+  },
+  plain: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String as PropType<ButtonType>,
+    default: 'default'
+  },
+  formType: {
+    type: String as PropType<ButtonFormType>,
+    default: 'button'
+  },
+  size: {
+    type: String as PropType<ButtonSize>,
+    default: 'normal'
+  },
+  block: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['click']);
+
+const { type, size, shape, disabled, loading, color, plain, block } = toRefs(props);
+
+const handleClick = (event: MouseEvent) => {
+  if (!loading.value && !disabled.value) {
+    emit('click', event);
+  }
+};
+
+const classes = computed(() => {
+  const prefixCls = 'nut-button';
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}--${type.value}`]: type.value,
+    [`${prefixCls}--${size.value}`]: size.value,
+    [`${prefixCls}--${shape.value}`]: shape.value,
+    [`${prefixCls}--plain`]: plain.value,
+    [`${prefixCls}--block`]: block.value,
+    [`${prefixCls}--disabled`]: disabled.value,
+    [`${prefixCls}--loading`]: loading.value
+  };
+});
+
+const getStyle = computed(() => {
+  const style: CSSProperties = {};
+  if (color?.value) {
+    if (plain.value) {
+      style.color = color.value;
+      style.background = '#fff';
+      if (!color.value?.includes('gradient')) {
+        style.borderColor = color.value;
+      }
+    } else {
+      style.color = '#fff';
+      style.background = color.value;
+    }
+  }
+
+  return style;
+});
+</script>