refactor(button): script setup

jdf2e · Dec 7, 2023 · 3f958fb · 3f958fb
1 parent 658fd09
commit 3f958fb
Show file tree

Hide file tree

Showing 16 changed files with 276 additions and 210 deletions.
diff --git a/scripts/generate-nutui-taro-vue.cjs b/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) {

diff --git a/scripts/generate-nutui.cjs b/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) {

diff --git a/scripts/generate-types-taro.cjs b/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;
-  }
+    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_defualt: WithInstall<typeof _default>;\nexport default _nut_defualt;\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);
+        }
       }
     }
   });

diff --git a/scripts/generate-types.cjs b/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;
-  }
+    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_defualt: WithInstall<typeof _default>;\nexport default _nut_defualt;\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);
+        }
       }
     }
   });

diff --git a/src/config.json b/src/config.json
@@ -80,6 +80,7 @@
           "cName": "按钮",
           "type": "component",
           "show": true,
+          "setup": true,
           "desc": "按钮用于触发一个操作，如提交表单。",
           "author": "richard1015"
         },

diff --git a/src/packages/__VUE/button/index.taro.ts b/src/packages/__VUE/button/index.taro.ts
@@ -0,0 +1,11 @@
+import Button from './index.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Button);
+
+export type { ButtonType, ButtonSize, ButtonShape, ButtonFormType } from './types';
+
+export type ButtonInstance = ComponentPublicInstance & InstanceType<typeof Button>;
+
+export { Button, Button as default };
diff --git a/src/packages/__VUE/button/index.taro.vue b/src/packages/__VUE/button/index.taro.vue
@@ -16,98 +16,94 @@
   </button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { PropType, CSSProperties, toRefs, computed } from 'vue';
-import { createComponent } from '@/packages/utils/create';
 import { Loading } from '@nutui/icons-vue-taro';
 import Taro from '@tarojs/taro';
-import { ButtonShape, ButtonType, ButtonSize, ButtonFormType } from './type';
-const { componentName, create } = createComponent('button');
-export default create({
-  components: { Loading },
-  props: {
-    color: String,
-    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
-    }
+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'
   },
-  emits: ['click'],
-  setup(props, { emit }) {
-    const { type, size, shape, disabled, loading, color, plain, block } = toRefs(props);
+  size: {
+    type: String as PropType<ButtonSize>,
+    default: 'normal'
+  },
+  block: {
+    type: Boolean,
+    default: false
+  }
+});
 
-    const handleClick = (event: MouseEvent) => {
-      if (!loading.value && !disabled.value) {
-        emit('click', event);
-      }
-    };
+const emit = defineEmits(['click']);
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      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 { type, size, shape, disabled, loading, color, plain, block } = toRefs(props);
 
-    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;
-        }
-      }
+const handleClick = (event: MouseEvent) => {
+  if (!loading.value && !disabled.value) {
+    emit('click', event);
+  }
+};
 
-      return style;
-    });
+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
+  };
+});
 
-    return {
-      handleClick,
-      classes,
-      getStyle,
-      Taro
-    };
+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>
diff --git a/src/packages/__VUE/button/index.ts b/src/packages/__VUE/button/index.ts
@@ -0,0 +1,11 @@
+import Button from './index.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Button);
+
+export type { ButtonType, ButtonSize, ButtonShape, ButtonFormType } from './types';
+
+export type ButtonInstance = ComponentPublicInstance & InstanceType<typeof Button>;
+
+export { Button, Button as default };