chore: change to setup syntax

.github/workflows/ftp-schedule.yml

@@ -26,22 +26,20 @@ jobs:
         with:
           node-version: '16.x'
 
-      # - name: Get yarn cache
-      #   id: yarn-cache
-      #   run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      # - name: Cache dependencies
-      #   uses: actions/cache@v2
-      #   with:
-      #     path: ${{ steps.yarn-cache.outputs.dir }}
-      #     key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-      #     restore-keys: |
-      #       ${{ runner.os }}-yarn-
+      - name: Get yarn cache
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
       - name: Build
         run: |
-          yarn cache clean
-          rm -rf ./node_modules yarn.lock
           yarn install
           yarn run build
 

package.json

@@ -122,7 +122,7 @@
     "ts-jest": "^27.0.4",
     "ts-node": "^10.2.0",
     "typescript": "4.3.5",
-    "vite": "2.5.0-beta.2",
+    "vite": "2.5.0",
     "vite-plugin-compression": "^0.3.3",
     "vite-plugin-html": "^2.0.7",
     "vite-plugin-imagemin": "^0.4.3",

src/components/Basic/src/BasicArrow.vue

@@ -7,12 +7,12 @@
     <Icon icon="ion:chevron-forward" :style="$attrs.iconStyle" />
   </span>
 </template>
-<script lang="ts">
-  import { defineComponent, computed } from 'vue';
+<script lang="ts" setup>
+  import { computed } from 'vue';
   import { Icon } from '/@/components/Icon';
   import { useDesign } from '/@/hooks/web/useDesign';
 
-  const props = {
+  const props = defineProps({
     /**
      * Arrow expand state
      */
@@ -29,13 +29,8 @@
      * Cancel padding/margin for inline
      */
     inset: { type: Boolean },
-  };
+  });
 
-  export default defineComponent({
-    name: 'BasicArrow',
-    components: { Icon },
-    props,
-    setup(props) {
   const { prefixCls } = useDesign('basic-arrow');
 
   // get component class
@@ -51,10 +46,6 @@
       },
     ];
   });
-
-      return { getClass };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-basic-arrow';

src/components/Basic/src/BasicTitle.vue

@@ -4,13 +4,13 @@
     <BasicHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage" />
   </span>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { PropType } from 'vue';
-  import { defineComponent, computed } from 'vue';
+  import { useSlots, computed } from 'vue';
   import BasicHelp from './BasicHelp.vue';
   import { useDesign } from '/@/hooks/web/useDesign';
 
-  const props = {
+  const props = defineProps({
     /**
      * Help text list or string
      * @default: ''
@@ -29,24 +29,15 @@
      * @default: false
      */
     normal: { type: Boolean },
-  };
+  });
 
-  export default defineComponent({
-    name: 'BasicTitle',
-    components: { BasicHelp },
-    props,
-    setup(props, { slots }) {
   const { prefixCls } = useDesign('basic-title');
-
+  const slots = useSlots();
   const getClass = computed(() => [
     prefixCls,
     { [`${prefixCls}-show-span`]: props.span && slots.default },
     { [`${prefixCls}-normal`]: props.normal },
   ]);
-
-      return { prefixCls, getClass };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-basic-title';

src/components/Button/src/BasicButton.vue

 <template>
   <Button v-bind="getBindValue" :class="getButtonClass" @click="onClick">
-    <template #default>
+    <template #default="data">
       <Icon :icon="preIcon" v-if="preIcon" :size="iconSize" />
-      <slot></slot>
+      <slot v-bind="data || {}"></slot>
       <Icon :icon="postIcon" v-if="postIcon" :size="iconSize" />
     </template>
   </Button>
 </template>
+
 <script lang="ts">
-  import { defineComponent, computed, unref } from 'vue';
+  export default {
+    name: 'AButton',
+    inheritAttrs: false,
+  };
+</script>
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
   import { Button } from 'ant-design-vue';
   import Icon from '/@/components/Icon/src/Icon.vue';
   import { buttonProps } from './props';
   import { useAttrs } from '/@/hooks/core/useAttrs';
 
-  export default defineComponent({
-    name: 'AButton',
-    components: { Button, Icon },
-    inheritAttrs: false,
-    props: buttonProps,
-    setup(props) {
+  const props = defineProps(buttonProps);
   // get component class
   const attrs = useAttrs({ excludeDefaultKeys: false });
   const getButtonClass = computed(() => {
@@ -34,8 +36,4 @@
 
   // get inherit binding value
   const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
-
-      return { getBindValue, getButtonClass };
-    },
-  });
 </script>

src/components/Button/src/PopConfirmButton.vue

@@ -20,7 +20,6 @@
 
   export default defineComponent({
     name: 'PopButton',
-    components: { Popconfirm, BasicButton },
     inheritAttrs: false,
     props,
     setup(props, { slots }) {
@@ -40,7 +39,7 @@
 
       return () => {
         const bindValues = omit(unref(getBindValues), 'icon');
-        const btnBind = omit(bindValues, 'title');
+        const btnBind = omit(bindValues, 'title') as Recordable;
         if (btnBind.disabled) btnBind.color = '';
         const Button = h(BasicButton, btnBind, extendSlots(slots));
 

src/components/ClickOutSide/src/ClickOutSide.vue

@@ -3,13 +3,10 @@
     <slot></slot>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, ref, onMounted } from 'vue';
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
   import { onClickOutside } from '@vueuse/core';
-  export default defineComponent({
-    name: 'ClickOutSide',
-    emits: ['mounted', 'clickOutside'],
-    setup(_, { emit }) {
+  const emit = defineEmits(['mounted', 'clickOutside']);
   const wrap = ref<ElRef>(null);
 
   onClickOutside(wrap, () => {
@@ -19,8 +16,4 @@
   onMounted(() => {
     emit('mounted');
   });
-
-      return { wrap };
-    },
-  });
 </script>

src/components/CodeEditor/src/CodeEditor.vue

@@ -8,29 +8,27 @@
     />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, computed } from 'vue';
-  import CodeMirrorEditor from './codemirror/CodeMirror.vue';
-  import { isString } from '/@/utils/is';
 
+<script lang="ts">
   const MODE = {
     JSON: 'application/json',
     html: 'htmlmixed',
     js: 'javascript',
   };
+</script>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import CodeMirrorEditor from './codemirror/CodeMirror.vue';
+  import { isString } from '/@/utils/is';
 
-  const props = {
+  const props = defineProps({
     value: { type: [Object, String] as PropType<Record<string, any> | string> },
     mode: { type: String, default: MODE.JSON },
     readonly: { type: Boolean },
-  };
+  });
+
+  const emit = defineEmits(['change', 'update:value']);
 
-  export default defineComponent({
-    name: 'CodeEditor',
-    components: { CodeMirrorEditor },
-    props,
-    emits: ['change', 'update:value'],
-    setup(props, { emit }) {
   const getValue = computed(() => {
     const { value, mode } = props;
     if (mode !== MODE.JSON) {
@@ -45,8 +43,4 @@
     emit('update:value', v);
     emit('change', v);
   }
-
-      return { handleValueChange, getValue };
-    },
-  });
 </script>

src/components/CodeEditor/src/codemirror/CodeMirror.vue

@@ -2,17 +2,8 @@
   <div class="relative !h-full w-full overflow-hidden" ref="el"> </div>
 </template>
 
-<script lang="ts">
-  import {
-    ref,
-    onMounted,
-    onUnmounted,
-    watchEffect,
-    watch,
-    defineComponent,
-    unref,
-    nextTick,
-  } from 'vue';
+<script lang="ts" setup>
+  import { ref, onMounted, onUnmounted, watchEffect, watch, unref, nextTick } from 'vue';
   import { useDebounceFn } from '@vueuse/core';
   import { useAppStore } from '/@/store/modules/app';
   import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
@@ -26,16 +17,14 @@
   import 'codemirror/mode/css/css';
   import 'codemirror/mode/htmlmixed/htmlmixed';
 
-  const props = {
+  const props = defineProps({
     mode: { type: String, default: 'application/json' },
     value: { type: String, default: '' },
     readonly: { type: Boolean, default: false },
-  };
+  });
+
+  const emit = defineEmits(['change']);
 
-  export default defineComponent({
-    props,
-    emits: ['change'],
-    setup(props, { emit }) {
   const el = ref();
   let editor: Nullable<CodeMirror.Editor>;
 
@@ -113,8 +102,4 @@
   onUnmounted(() => {
     editor = null;
   });
-
-      return { el };
-    },
-  });
 </script>

src/components/CodeEditor/src/json-preview/JsonPreview.vue

@@ -2,13 +2,11 @@
   <vue-json-pretty :path="'res'" :deep="3" :showLength="true" :data="data" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import VueJsonPretty from 'vue-json-pretty';
   import 'vue-json-pretty/lib/styles.css';
-  import { defineComponent } from 'vue';
-  export default defineComponent({
-    name: 'JsonPreview',
-    components: { VueJsonPretty },
-    props: { data: Object },
+
+  defineProps({
+    data: Object,
   });
 </script>

src/components/Container/src/collapse/CollapseContainer.vue

@@ -22,9 +22,9 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { PropType } from 'vue';
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
   // component
   import { Skeleton } from 'ant-design-vue';
   import { CollapseTransition } from '/@/components/Transition';
@@ -34,7 +34,7 @@
   import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useDesign } from '/@/hooks/web/useDesign';
 
-  const props = {
+  const props = defineProps({
     title: { type: String, default: '' },
     loading: { type: Boolean },
     /**
@@ -57,17 +57,8 @@
      * Delayed loading time
      */
     lazyTime: { type: Number, default: 0 },
-  };
+  });
 
-  export default defineComponent({
-    name: 'CollapseContainer',
-    components: {
-      Skeleton,
-      CollapseHeader,
-      CollapseTransition,
-    },
-    props,
-    setup(props) {
   const show = ref(true);
 
   const { prefixCls } = useDesign('collapse-container');
@@ -82,14 +73,6 @@
       useTimeoutFn(triggerWindowResize, 200);
     }
   }
-
-      return {
-        show,
-        handleExpand,
-        prefixCls,
-      };
-    },
-  });
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-collapse-container';

yarn.lock

@@ -11249,10 +11249,10 @@ vite-plugin-windicss@^1.2.7:
     debug "^4.3.2"
     windicss "^3.1.6"
 
-vite@2.5.0-beta.2:
-  version "2.5.0-beta.2"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.5.0-beta.2.tgz#3b71eecb17b7e62869366a91e92bd26578bb4f7f"
-  integrity sha512-PgPOlTg7w6VGDx1HCUHfDoXeQ6cWKCO2tHz3om27VLjfu/92T1kyhuJf/VM6sa+orPOkTLUZWaHI9bPQjgtLrA==
+vite@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.5.0.tgz#111ba3679432d426e44566acf480005a7914cbd6"
+  integrity sha512-Dn4B+g54PJsMG5WCc4QeFy1ygMXRdTtFrUPegqfk4+vzVQcbF/DqqmI/1bxezArzbujBJg/67QeT5wz8edfJVQ==
   dependencies:
     esbuild "^0.12.17"
     postcss "^8.3.6"