chore: change to setup syntax

vben
1 parent 91cbe0a0
Showing 12 changed files with 191 additions and 261 deletions
.github/workflows/ftp-schedule.yml
package.json
src/components/Basic/src/BasicArrow.vue
src/components/Basic/src/BasicTitle.vue
src/components/Button/src/BasicButton.vue
src/components/Button/src/PopConfirmButton.vue
src/components/ClickOutSide/src/ClickOutSide.vue
src/components/CodeEditor/src/CodeEditor.vue
src/components/CodeEditor/src/codemirror/CodeMirror.vue
src/components/CodeEditor/src/json-preview/JsonPreview.vue
src/components/Container/src/collapse/CollapseContainer.vue
yarn.lock
@@ -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
@@ -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",
@@ -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');
+  });
-      // get component class
-      const getClass = computed(() => {
-        const { expand, up, down, inset } = props;
-        return [
-          prefixCls,
-          {
-            [`${prefixCls}--active`]: expand,
-            up,
-            inset,
-            down,
-          },
-        ];
-      });
+  const { prefixCls } = useDesign('basic-arrow');
-      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>
@@ -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';
 <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>
@@ -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));
@@ -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');
-      });
-
-      onMounted(() => {
-        emit('mounted');
-      });
+  onClickOutside(wrap, () => {
+    emit('clickOutside');
+  });
-      return { wrap };
-    },
+  onMounted(() => {
+    emit('mounted');
   });
 </script>
@@ -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);
-      }
+  const emit = defineEmits(['change', 'update:value']);
-      return { handleValueChange, getValue };
-    },
+  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>
@@ -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(
+    () => props.value,
+    async (value) => {
+      await nextTick();
+      const oldValue = editor?.getValue();
+      if (value !== oldValue) {
+        editor?.setValue(value ? value : '');
+      }
+    },
+    { flush: 'post' }
+  );
-      watch(
-        () => appStore.getDarkMode,
-        async () => {
-          setTheme();
-        },
-        {
-          immediate: true,
-        }
-      );
+  watchEffect(() => {
+    editor?.setOption('mode', props.mode);
+  });
-      function setTheme() {
-        unref(editor)?.setOption(
-          'theme',
-          appStore.getDarkMode === 'light' ? 'idea' : 'material-palenight'
-        );
-      }
+  watch(
+    () => appStore.getDarkMode,
+    async () => {
+      setTheme();
+    },
+    {
+      immediate: true,
+    }
+  );
-      function refresh() {
-        editor?.refresh();
-      }
+  function setTheme() {
+    unref(editor)?.setOption(
+      'theme',
+      appStore.getDarkMode === 'light' ? 'idea' : 'material-palenight'
+    );
+  }
-      async function init() {
-        const addonOptions = {
-          autoCloseBrackets: true,
-          autoCloseTags: true,
-          foldGutter: true,
-          gutters: ['CodeMirror-linenumbers'],
-        };
+  function refresh() {
+    editor?.refresh();
+  }
-        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());
-        });
-      }
+  async function init() {
+    const addonOptions = {
+      autoCloseBrackets: true,
+      autoCloseTags: true,
+      foldGutter: true,
+      gutters: ['CodeMirror-linenumbers'],
+    };
-      onMounted(async () => {
-        await nextTick();
-        init();
-        useWindowSizeFn(debounceRefresh);
-      });
+    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());
+    });
+  }
-      onUnmounted(() => {
-        editor = null;
-      });
+  onMounted(async () => {
+    await nextTick();
+    init();
+    useWindowSizeFn(debounceRefresh);
+  });
-      return { el };
-    },
+  onUnmounted(() => {
+    editor = null;
   });
 </script>
@@ -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>
@@ -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');
+  const show = ref(true);
-      /**
-       * @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);
-        }
-      }
+  const { prefixCls } = useDesign('collapse-container');
-      return {
-        show,
-        handleExpand,
-        prefixCls,
-      };
-    },
-  });
+  /**
+   * @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';
@@ -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"