chore: change to setup syntax

2025-01-23 09:40:22 +08:00 · 2021-08-16 23:43:09 +08:00 · 2021-08-16 23:43:09 +08:00 · 8fa6015b1a
commit 8fa6015b1a
parent 91cbe0a03b
12 changed files with 200 additions and 270 deletions
--- a/.github/workflows/ftp-schedule.yml
+++ b/.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: 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: 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

--- a/package.json
+++ b/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",
--- a/src/components/Basic/src/BasicArrow.vue
+++ b/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,31 +29,22 @@
     * Cancel padding/margin for inline
     */
    inset: { type: Boolean },
-  };
+  });

-  export default defineComponent({
-    name: 'BasicArrow',
-    components: { Icon },
-    props,
-    setup(props) {
-      const { prefixCls } = useDesign('basic-arrow');
+  const { prefixCls } = useDesign('basic-arrow');

-      // get component class
-      const getClass = computed(() => {
-        const { expand, up, down, inset } = props;
-        return [
-          prefixCls,
-          {
-            [`${prefixCls}--active`]: expand,
-            up,
-            inset,
-            down,
-          },
-        ];
-      });
-
-      return { getClass };
-    },
+  // get component class
+  const getClass = computed(() => {
+    const { expand, up, down, inset } = props;
+    return [
+      prefixCls,
+      {
+        [`${prefixCls}--active`]: expand,
+        up,
+        inset,
+        down,
+      },
+    ];
  });
 </script>
 <style lang="less" scoped>
--- a/src/components/Basic/src/BasicTitle.vue
+++ b/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 getClass = computed(() => [
-        prefixCls,
-        { [`${prefixCls}-show-span`]: props.span && slots.default },
-        { [`${prefixCls}-normal`]: props.normal },
-      ]);
-
-      return { prefixCls, getClass };
-    },
  });
+
+  const { prefixCls } = useDesign('basic-title');
+  const slots = useSlots();
+  const getClass = computed(() => [
+    prefixCls,
+    { [`${prefixCls}-show-span`]: props.span && slots.default },
+    { [`${prefixCls}-normal`]: props.normal },
+  ]);
 </script>
 <style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-basic-title';
--- a/src/components/Button/src/BasicButton.vue
+++ b/src/components/Button/src/BasicButton.vue
@ -1,41 +1,39 @@
 <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) {
-      // get component class
-      const attrs = useAttrs({ excludeDefaultKeys: false });
-      const getButtonClass = computed(() => {
-        const { color, disabled } = props;
-        return [
-          {
-            [`ant-btn-${color}`]: !!color,
-            [`is-disabled`]: disabled,
-          },
-        ];
-      });
-
-      // get inherit binding value
-      const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
-
-      return { getBindValue, getButtonClass };
-    },
+  const props = defineProps(buttonProps);
+  // get component class
+  const attrs = useAttrs({ excludeDefaultKeys: false });
+  const getButtonClass = computed(() => {
+    const { color, disabled } = props;
+    return [
+      {
+        [`ant-btn-${color}`]: !!color,
+        [`is-disabled`]: disabled,
+      },
+    ];
  });
+
+  // get inherit binding value
+  const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
 </script>
--- a/src/components/Button/src/PopConfirmButton.vue
+++ b/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));

--- a/src/components/ClickOutSide/src/ClickOutSide.vue
+++ b/src/components/ClickOutSide/src/ClickOutSide.vue
@ -3,24 +3,17 @@
    <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 wrap = ref<ElRef>(null);
+  const emit = defineEmits(['mounted', 'clickOutside']);
+  const wrap = ref<ElRef>(null);

-      onClickOutside(wrap, () => {
-        emit('clickOutside');
-      });
+  onClickOutside(wrap, () => {
+    emit('clickOutside');
+  });

-      onMounted(() => {
-        emit('mounted');
-      });
-
-      return { wrap };
-    },
+  onMounted(() => {
+    emit('mounted');
  });
 </script>
--- a/src/components/CodeEditor/src/CodeEditor.vue
+++ b/src/components/CodeEditor/src/CodeEditor.vue
@ -8,45 +8,39 @@
    />
  </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 },
-  };
-
-  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) {
-          return value as string;
-        }
-        return isString(value)
-          ? JSON.stringify(JSON.parse(value), null, 2)
-          : JSON.stringify(value, null, 2);
-      });
-
-      function handleValueChange(v) {
-        emit('update:value', v);
-        emit('change', v);
-      }
-
-      return { handleValueChange, getValue };
-    },
  });
+
+  const emit = defineEmits(['change', 'update:value']);
+
+  const getValue = computed(() => {
+    const { value, mode } = props;
+    if (mode !== MODE.JSON) {
+      return value as string;
+    }
+    return isString(value)
+      ? JSON.stringify(JSON.parse(value), null, 2)
+      : JSON.stringify(value, null, 2);
+  });
+
+  function handleValueChange(v) {
+    emit('update:value', v);
+    emit('change', v);
+  }
 </script>
--- a/src/components/CodeEditor/src/codemirror/CodeMirror.vue
+++ b/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,95 +17,89 @@
  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 },
-  };
+  });

-  export default defineComponent({
-    props,
-    emits: ['change'],
-    setup(props, { emit }) {
-      const el = ref();
-      let editor: Nullable<CodeMirror.Editor>;
+  const emit = defineEmits(['change']);

-      const debounceRefresh = useDebounceFn(refresh, 100);
-      const appStore = useAppStore();
+  const el = ref();
+  let editor: Nullable<CodeMirror.Editor>;

-      watch(
-        () => props.value,
-        async (value) => {
-          await nextTick();
-          const oldValue = editor?.getValue();
-          if (value !== oldValue) {
-            editor?.setValue(value ? value : '');
-          }
-        },
-        { flush: 'post' }
-      );
+  const debounceRefresh = useDebounceFn(refresh, 100);
+  const appStore = useAppStore();

-      watchEffect(() => {
-        editor?.setOption('mode', props.mode);
-      });
-
-      watch(
-        () => appStore.getDarkMode,
-        async () => {
-          setTheme();
-        },
-        {
-          immediate: true,
-        }
-      );
-
-      function setTheme() {
-        unref(editor)?.setOption(
-          'theme',
-          appStore.getDarkMode === 'light' ? 'idea' : 'material-palenight'
-        );
+  watch(
+    () => props.value,
+    async (value) => {
+      await nextTick();
+      const oldValue = editor?.getValue();
+      if (value !== oldValue) {
+        editor?.setValue(value ? value : '');
      }
-
-      function refresh() {
-        editor?.refresh();
-      }
-
-      async function init() {
-        const addonOptions = {
-          autoCloseBrackets: true,
-          autoCloseTags: true,
-          foldGutter: true,
-          gutters: ['CodeMirror-linenumbers'],
-        };
-
-        editor = CodeMirror(el.value!, {
-          value: '',
-          mode: props.mode,
-          readOnly: props.readonly,
-          tabSize: 2,
-          theme: 'material-palenight',
-          lineWrapping: true,
-          lineNumbers: true,
-          ...addonOptions,
-        });
-        editor?.setValue(props.value);
-        setTheme();
-        editor?.on('change', () => {
-          emit('change', editor?.getValue());
-        });
-      }
-
-      onMounted(async () => {
-        await nextTick();
-        init();
-        useWindowSizeFn(debounceRefresh);
-      });
-
-      onUnmounted(() => {
-        editor = null;
-      });
-
-      return { el };
    },
+    { flush: 'post' }
+  );
+
+  watchEffect(() => {
+    editor?.setOption('mode', props.mode);
+  });
+
+  watch(
+    () => appStore.getDarkMode,
+    async () => {
+      setTheme();
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  function setTheme() {
+    unref(editor)?.setOption(
+      'theme',
+      appStore.getDarkMode === 'light' ? 'idea' : 'material-palenight'
+    );
+  }
+
+  function refresh() {
+    editor?.refresh();
+  }
+
+  async function init() {
+    const addonOptions = {
+      autoCloseBrackets: true,
+      autoCloseTags: true,
+      foldGutter: true,
+      gutters: ['CodeMirror-linenumbers'],
+    };
+
+    editor = CodeMirror(el.value!, {
+      value: '',
+      mode: props.mode,
+      readOnly: props.readonly,
+      tabSize: 2,
+      theme: 'material-palenight',
+      lineWrapping: true,
+      lineNumbers: true,
+      ...addonOptions,
+    });
+    editor?.setValue(props.value);
+    setTheme();
+    editor?.on('change', () => {
+      emit('change', editor?.getValue());
+    });
+  }
+
+  onMounted(async () => {
+    await nextTick();
+    init();
+    useWindowSizeFn(debounceRefresh);
+  });
+
+  onUnmounted(() => {
+    editor = null;
  });
 </script>
--- a/src/components/CodeEditor/src/json-preview/JsonPreview.vue
+++ b/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>
--- a/src/components/Container/src/collapse/CollapseContainer.vue
+++ b/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,39 +57,22 @@
     * 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');
-
-      /**
-       * @description: Handling development events
-       */
-      function handleExpand() {
-        show.value = !show.value;
-        if (props.triggerWindowResize) {
-          // 200 milliseconds here is because the expansion has animation,
-          useTimeoutFn(triggerWindowResize, 200);
-        }
-      }
-
-      return {
-        show,
-        handleExpand,
-        prefixCls,
-      };
-    },
  });
+
+  const show = ref(true);
+
+  const { prefixCls } = useDesign('collapse-container');
+
+  /**
+   * @description: Handling development events
+   */
+  function handleExpand() {
+    show.value = !show.value;
+    if (props.triggerWindowResize) {
+      // 200 milliseconds here is because the expansion has animation,
+      useTimeoutFn(triggerWindowResize, 200);
+    }
+  }
 </script>
 <style lang="less">
  @prefix-cls: ~'@{namespace}-collapse-container';
--- a/yarn.lock
+++ b/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"