canrd-outside / order-erp-front · Commits

Commit 8fa6015b1afb7bd6a1890cdf696b3f2986929b61

Authored by vben
1 parent 91cbe0a0

chore: change to setup syntax

Inline Side-by-side
Showing 12 changed files with 191 additions and 261 deletions
.github/workflows/ftp-schedule.yml
  View file @8fa6015
... ... @@ -26,22 +26,20 @@ jobs:
26 26 with:
27 27 node-version: '16.x'
28 28  
29   - # - name: Get yarn cache
30   - # id: yarn-cache
31   - # run: echo "::set-output name=dir::$(yarn cache dir)"
32   -
33   - # - name: Cache dependencies
34   - # uses: actions/cache@v2
35   - # with:
36   - # path: ${{ steps.yarn-cache.outputs.dir }}
37   - # key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
38   - # restore-keys: |
39   - # ${{ runner.os }}-yarn-
  29 + - name: Get yarn cache
  30 + id: yarn-cache
  31 + run: echo "::set-output name=dir::$(yarn cache dir)"
  32 +
  33 + - name: Cache dependencies
  34 + uses: actions/cache@v2
  35 + with:
  36 + path: ${{ steps.yarn-cache.outputs.dir }}
  37 + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
  38 + restore-keys: |
  39 + ${{ runner.os }}-yarn-
40 40  
41 41 - name: Build
42 42 run: |
43   - yarn cache clean
44   - rm -rf ./node_modules yarn.lock
45 43 yarn install
46 44 yarn run build
47 45  
... ...
package.json
  View file @8fa6015
... ... @@ -122,7 +122,7 @@
122 122 "ts-jest": "^27.0.4",
123 123 "ts-node": "^10.2.0",
124 124 "typescript": "4.3.5",
125   - "vite": "2.5.0-beta.2",
  125 + "vite": "2.5.0",
126 126 "vite-plugin-compression": "^0.3.3",
127 127 "vite-plugin-html": "^2.0.7",
128 128 "vite-plugin-imagemin": "^0.4.3",
... ...
src/components/Basic/src/BasicArrow.vue
  View file @8fa6015
... ... @@ -7,12 +7,12 @@
7 7 <Icon icon="ion:chevron-forward" :style="$attrs.iconStyle" />
8 8 </span>
9 9 </template>
10   -<script lang="ts">
11   - import { defineComponent, computed } from 'vue';
  10 +<script lang="ts" setup>
  11 + import { computed } from 'vue';
12 12 import { Icon } from '/@/components/Icon';
13 13 import { useDesign } from '/@/hooks/web/useDesign';
14 14  
15   - const props = {
  15 + const props = defineProps({
16 16 /**
17 17 * Arrow expand state
18 18 */
... ... @@ -29,31 +29,22 @@
29 29 * Cancel padding/margin for inline
30 30 */
31 31 inset: { type: Boolean },
32   - };
33   -
34   - export default defineComponent({
35   - name: 'BasicArrow',
36   - components: { Icon },
37   - props,
38   - setup(props) {
39   - const { prefixCls } = useDesign('basic-arrow');
  32 + });
40 33  
41   - // get component class
42   - const getClass = computed(() => {
43   - const { expand, up, down, inset } = props;
44   - return [
45   - prefixCls,
46   - {
47   - [`${prefixCls}--active`]: expand,
48   - up,
49   - inset,
50   - down,
51   - },
52   - ];
53   - });
  34 + const { prefixCls } = useDesign('basic-arrow');
54 35  
55   - return { getClass };
56   - },
  36 + // get component class
  37 + const getClass = computed(() => {
  38 + const { expand, up, down, inset } = props;
  39 + return [
  40 + prefixCls,
  41 + {
  42 + [`${prefixCls}--active`]: expand,
  43 + up,
  44 + inset,
  45 + down,
  46 + },
  47 + ];
57 48 });
58 49 </script>
59 50 <style lang="less" scoped>
... ...
src/components/Basic/src/BasicTitle.vue
  View file @8fa6015
... ... @@ -4,13 +4,13 @@
4 4 <BasicHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage" />
5 5 </span>
6 6 </template>
7   -<script lang="ts">
  7 +<script lang="ts" setup>
8 8 import type { PropType } from 'vue';
9   - import { defineComponent, computed } from 'vue';
  9 + import { useSlots, computed } from 'vue';
10 10 import BasicHelp from './BasicHelp.vue';
11 11 import { useDesign } from '/@/hooks/web/useDesign';
12 12  
13   - const props = {
  13 + const props = defineProps({
14 14 /**
15 15 * Help text list or string
16 16 * @default: ''
... ... @@ -29,24 +29,15 @@
29 29 * @default: false
30 30 */
31 31 normal: { type: Boolean },
32   - };
33   -
34   - export default defineComponent({
35   - name: 'BasicTitle',
36   - components: { BasicHelp },
37   - props,
38   - setup(props, { slots }) {
39   - const { prefixCls } = useDesign('basic-title');
40   -
41   - const getClass = computed(() => [
42   - prefixCls,
43   - { [`${prefixCls}-show-span`]: props.span && slots.default },
44   - { [`${prefixCls}-normal`]: props.normal },
45   - ]);
46   -
47   - return { prefixCls, getClass };
48   - },
49 32 });
  33 +
  34 + const { prefixCls } = useDesign('basic-title');
  35 + const slots = useSlots();
  36 + const getClass = computed(() => [
  37 + prefixCls,
  38 + { [`${prefixCls}-show-span`]: props.span && slots.default },
  39 + { [`${prefixCls}-normal`]: props.normal },
  40 + ]);
50 41 </script>
51 42 <style lang="less" scoped>
52 43 @prefix-cls: ~'@{namespace}-basic-title';
... ...
src/components/Button/src/BasicButton.vue
  View file @8fa6015
1 1 <template>
2 2 <Button v-bind="getBindValue" :class="getButtonClass" @click="onClick">
3   - <template #default>
  3 + <template #default="data">
4 4 <Icon :icon="preIcon" v-if="preIcon" :size="iconSize" />
5   - <slot></slot>
  5 + <slot v-bind="data || {}"></slot>
6 6 <Icon :icon="postIcon" v-if="postIcon" :size="iconSize" />
7 7 </template>
8 8 </Button>
9 9 </template>
  10 +
10 11 <script lang="ts">
11   - import { defineComponent, computed, unref } from 'vue';
  12 + export default {
  13 + name: 'AButton',
  14 + inheritAttrs: false,
  15 + };
  16 +</script>
  17 +<script lang="ts" setup>
  18 + import { computed, unref } from 'vue';
12 19 import { Button } from 'ant-design-vue';
13 20 import Icon from '/@/components/Icon/src/Icon.vue';
14 21 import { buttonProps } from './props';
15 22 import { useAttrs } from '/@/hooks/core/useAttrs';
16 23  
17   - export default defineComponent({
18   - name: 'AButton',
19   - components: { Button, Icon },
20   - inheritAttrs: false,
21   - props: buttonProps,
22   - setup(props) {
23   - // get component class
24   - const attrs = useAttrs({ excludeDefaultKeys: false });
25   - const getButtonClass = computed(() => {
26   - const { color, disabled } = props;
27   - return [
28   - {
29   - [`ant-btn-${color}`]: !!color,
30   - [`is-disabled`]: disabled,
31   - },
32   - ];
33   - });
34   -
35   - // get inherit binding value
36   - const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
37   -
38   - return { getBindValue, getButtonClass };
39   - },
  24 + const props = defineProps(buttonProps);
  25 + // get component class
  26 + const attrs = useAttrs({ excludeDefaultKeys: false });
  27 + const getButtonClass = computed(() => {
  28 + const { color, disabled } = props;
  29 + return [
  30 + {
  31 + [`ant-btn-${color}`]: !!color,
  32 + [`is-disabled`]: disabled,
  33 + },
  34 + ];
40 35 });
  36 +
  37 + // get inherit binding value
  38 + const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
41 39 </script>
... ...
src/components/Button/src/PopConfirmButton.vue
  View file @8fa6015
... ... @@ -20,7 +20,6 @@
20 20  
21 21 export default defineComponent({
22 22 name: 'PopButton',
23   - components: { Popconfirm, BasicButton },
24 23 inheritAttrs: false,
25 24 props,
26 25 setup(props, { slots }) {
... ... @@ -40,7 +39,7 @@
40 39  
41 40 return () => {
42 41 const bindValues = omit(unref(getBindValues), 'icon');
43   - const btnBind = omit(bindValues, 'title');
  42 + const btnBind = omit(bindValues, 'title') as Recordable;
44 43 if (btnBind.disabled) btnBind.color = '';
45 44 const Button = h(BasicButton, btnBind, extendSlots(slots));
46 45  
... ...
src/components/ClickOutSide/src/ClickOutSide.vue
  View file @8fa6015
... ... @@ -3,24 +3,17 @@
3 3 <slot></slot>
4 4 </div>
5 5 </template>
6   -<script lang="ts">
7   - import { defineComponent, ref, onMounted } from 'vue';
  6 +<script lang="ts" setup>
  7 + import { ref, onMounted } from 'vue';
8 8 import { onClickOutside } from '@vueuse/core';
9   - export default defineComponent({
10   - name: 'ClickOutSide',
11   - emits: ['mounted', 'clickOutside'],
12   - setup(_, { emit }) {
13   - const wrap = ref<ElRef>(null);
  9 + const emit = defineEmits(['mounted', 'clickOutside']);
  10 + const wrap = ref<ElRef>(null);
14 11  
15   - onClickOutside(wrap, () => {
16   - emit('clickOutside');
17   - });
18   -
19   - onMounted(() => {
20   - emit('mounted');
21   - });
  12 + onClickOutside(wrap, () => {
  13 + emit('clickOutside');
  14 + });
22 15  
23   - return { wrap };
24   - },
  16 + onMounted(() => {
  17 + emit('mounted');
25 18 });
26 19 </script>
... ...
src/components/CodeEditor/src/CodeEditor.vue
  View file @8fa6015
... ... @@ -8,45 +8,39 @@
8 8 />
9 9 </div>
10 10 </template>
11   -<script lang="ts">
12   - import { defineComponent, computed } from 'vue';
13   - import CodeMirrorEditor from './codemirror/CodeMirror.vue';
14   - import { isString } from '/@/utils/is';
15 11  
  12 +<script lang="ts">
16 13 const MODE = {
17 14 JSON: 'application/json',
18 15 html: 'htmlmixed',
19 16 js: 'javascript',
20 17 };
  18 +</script>
  19 +<script lang="ts" setup>
  20 + import { computed } from 'vue';
  21 + import CodeMirrorEditor from './codemirror/CodeMirror.vue';
  22 + import { isString } from '/@/utils/is';
21 23  
22   - const props = {
  24 + const props = defineProps({
23 25 value: { type: [Object, String] as PropType<Record<string, any> | string> },
24 26 mode: { type: String, default: MODE.JSON },
25 27 readonly: { type: Boolean },
26   - };
27   -
28   - export default defineComponent({
29   - name: 'CodeEditor',
30   - components: { CodeMirrorEditor },
31   - props,
32   - emits: ['change', 'update:value'],
33   - setup(props, { emit }) {
34   - const getValue = computed(() => {
35   - const { value, mode } = props;
36   - if (mode !== MODE.JSON) {
37   - return value as string;
38   - }
39   - return isString(value)
40   - ? JSON.stringify(JSON.parse(value), null, 2)
41   - : JSON.stringify(value, null, 2);
42   - });
  28 + });
43 29  
44   - function handleValueChange(v) {
45   - emit('update:value', v);
46   - emit('change', v);
47   - }
  30 + const emit = defineEmits(['change', 'update:value']);
48 31  
49   - return { handleValueChange, getValue };
50   - },
  32 + const getValue = computed(() => {
  33 + const { value, mode } = props;
  34 + if (mode !== MODE.JSON) {
  35 + return value as string;
  36 + }
  37 + return isString(value)
  38 + ? JSON.stringify(JSON.parse(value), null, 2)
  39 + : JSON.stringify(value, null, 2);
51 40 });
  41 +
  42 + function handleValueChange(v) {
  43 + emit('update:value', v);
  44 + emit('change', v);
  45 + }
52 46 </script>
... ...
src/components/CodeEditor/src/codemirror/CodeMirror.vue
  View file @8fa6015
... ... @@ -2,17 +2,8 @@
2 2 <div class="relative !h-full w-full overflow-hidden" ref="el"> </div>
3 3 </template>
4 4  
5   -<script lang="ts">
6   - import {
7   - ref,
8   - onMounted,
9   - onUnmounted,
10   - watchEffect,
11   - watch,
12   - defineComponent,
13   - unref,
14   - nextTick,
15   - } from 'vue';
  5 +<script lang="ts" setup>
  6 + import { ref, onMounted, onUnmounted, watchEffect, watch, unref, nextTick } from 'vue';
16 7 import { useDebounceFn } from '@vueuse/core';
17 8 import { useAppStore } from '/@/store/modules/app';
18 9 import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
... ... @@ -26,95 +17,89 @@
26 17 import 'codemirror/mode/css/css';
27 18 import 'codemirror/mode/htmlmixed/htmlmixed';
28 19  
29   - const props = {
  20 + const props = defineProps({
30 21 mode: { type: String, default: 'application/json' },
31 22 value: { type: String, default: '' },
32 23 readonly: { type: Boolean, default: false },
33   - };
  24 + });
34 25  
35   - export default defineComponent({
36   - props,
37   - emits: ['change'],
38   - setup(props, { emit }) {
39   - const el = ref();
40   - let editor: Nullable<CodeMirror.Editor>;
  26 + const emit = defineEmits(['change']);
41 27  
42   - const debounceRefresh = useDebounceFn(refresh, 100);
43   - const appStore = useAppStore();
  28 + const el = ref();
  29 + let editor: Nullable<CodeMirror.Editor>;
44 30  
45   - watch(
46   - () => props.value,
47   - async (value) => {
48   - await nextTick();
49   - const oldValue = editor?.getValue();
50   - if (value !== oldValue) {
51   - editor?.setValue(value ? value : '');
52   - }
53   - },
54   - { flush: 'post' }
55   - );
  31 + const debounceRefresh = useDebounceFn(refresh, 100);
  32 + const appStore = useAppStore();
56 33  
57   - watchEffect(() => {
58   - editor?.setOption('mode', props.mode);
59   - });
  34 + watch(
  35 + () => props.value,
  36 + async (value) => {
  37 + await nextTick();
  38 + const oldValue = editor?.getValue();
  39 + if (value !== oldValue) {
  40 + editor?.setValue(value ? value : '');
  41 + }
  42 + },
  43 + { flush: 'post' }
  44 + );
60 45  
61   - watch(
62   - () => appStore.getDarkMode,
63   - async () => {
64   - setTheme();
65   - },
66   - {
67   - immediate: true,
68   - }
69   - );
  46 + watchEffect(() => {
  47 + editor?.setOption('mode', props.mode);
  48 + });
70 49  
71   - function setTheme() {
72   - unref(editor)?.setOption(
73   - 'theme',
74   - appStore.getDarkMode === 'light' ? 'idea' : 'material-palenight'
75   - );
76   - }
  50 + watch(
  51 + () => appStore.getDarkMode,
  52 + async () => {
  53 + setTheme();
  54 + },
  55 + {
  56 + immediate: true,
  57 + }
  58 + );
77 59  
78   - function refresh() {
79   - editor?.refresh();
80   - }
  60 + function setTheme() {
  61 + unref(editor)?.setOption(
  62 + 'theme',
  63 + appStore.getDarkMode === 'light' ? 'idea' : 'material-palenight'
  64 + );
  65 + }
81 66  
82   - async function init() {
83   - const addonOptions = {
84   - autoCloseBrackets: true,
85   - autoCloseTags: true,
86   - foldGutter: true,
87   - gutters: ['CodeMirror-linenumbers'],
88   - };
  67 + function refresh() {
  68 + editor?.refresh();
  69 + }
89 70  
90   - editor = CodeMirror(el.value!, {
91   - value: '',
92   - mode: props.mode,
93   - readOnly: props.readonly,
94   - tabSize: 2,
95   - theme: 'material-palenight',
96   - lineWrapping: true,
97   - lineNumbers: true,
98   - ...addonOptions,
99   - });
100   - editor?.setValue(props.value);
101   - setTheme();
102   - editor?.on('change', () => {
103   - emit('change', editor?.getValue());
104   - });
105   - }
  71 + async function init() {
  72 + const addonOptions = {
  73 + autoCloseBrackets: true,
  74 + autoCloseTags: true,
  75 + foldGutter: true,
  76 + gutters: ['CodeMirror-linenumbers'],
  77 + };
106 78  
107   - onMounted(async () => {
108   - await nextTick();
109   - init();
110   - useWindowSizeFn(debounceRefresh);
111   - });
  79 + editor = CodeMirror(el.value!, {
  80 + value: '',
  81 + mode: props.mode,
  82 + readOnly: props.readonly,
  83 + tabSize: 2,
  84 + theme: 'material-palenight',
  85 + lineWrapping: true,
  86 + lineNumbers: true,
  87 + ...addonOptions,
  88 + });
  89 + editor?.setValue(props.value);
  90 + setTheme();
  91 + editor?.on('change', () => {
  92 + emit('change', editor?.getValue());
  93 + });
  94 + }
112 95  
113   - onUnmounted(() => {
114   - editor = null;
115   - });
  96 + onMounted(async () => {
  97 + await nextTick();
  98 + init();
  99 + useWindowSizeFn(debounceRefresh);
  100 + });
116 101  
117   - return { el };
118   - },
  102 + onUnmounted(() => {
  103 + editor = null;
119 104 });
120 105 </script>
... ...
src/components/CodeEditor/src/json-preview/JsonPreview.vue
  View file @8fa6015
... ... @@ -2,13 +2,11 @@
2 2 <vue-json-pretty :path="'res'" :deep="3" :showLength="true" :data="data" />
3 3 </template>
4 4  
5   -<script lang="ts">
  5 +<script lang="ts" setup>
6 6 import VueJsonPretty from 'vue-json-pretty';
7 7 import 'vue-json-pretty/lib/styles.css';
8   - import { defineComponent } from 'vue';
9   - export default defineComponent({
10   - name: 'JsonPreview',
11   - components: { VueJsonPretty },
12   - props: { data: Object },
  8 +
  9 + defineProps({
  10 + data: Object,
13 11 });
14 12 </script>
... ...
src/components/Container/src/collapse/CollapseContainer.vue
  View file @8fa6015
... ... @@ -22,9 +22,9 @@
22 22 </div>
23 23 </div>
24 24 </template>
25   -<script lang="ts">
  25 +<script lang="ts" setup>
26 26 import type { PropType } from 'vue';
27   - import { defineComponent, ref } from 'vue';
  27 + import { ref } from 'vue';
28 28 // component
29 29 import { Skeleton } from 'ant-design-vue';
30 30 import { CollapseTransition } from '/@/components/Transition';
... ... @@ -34,7 +34,7 @@
34 34 import { useTimeoutFn } from '/@/hooks/core/useTimeout';
35 35 import { useDesign } from '/@/hooks/web/useDesign';
36 36  
37   - const props = {
  37 + const props = defineProps({
38 38 title: { type: String, default: '' },
39 39 loading: { type: Boolean },
40 40 /**
... ... @@ -57,39 +57,22 @@
57 57 * Delayed loading time
58 58 */
59 59 lazyTime: { type: Number, default: 0 },
60   - };
61   -
62   - export default defineComponent({
63   - name: 'CollapseContainer',
64   - components: {
65   - Skeleton,
66   - CollapseHeader,
67   - CollapseTransition,
68   - },
69   - props,
70   - setup(props) {
71   - const show = ref(true);
  60 + });
72 61  
73   - const { prefixCls } = useDesign('collapse-container');
  62 + const show = ref(true);
74 63  
75   - /**
76   - * @description: Handling development events
77   - */
78   - function handleExpand() {
79   - show.value = !show.value;
80   - if (props.triggerWindowResize) {
81   - // 200 milliseconds here is because the expansion has animation,
82   - useTimeoutFn(triggerWindowResize, 200);
83   - }
84   - }
  64 + const { prefixCls } = useDesign('collapse-container');
85 65  
86   - return {
87   - show,
88   - handleExpand,
89   - prefixCls,
90   - };
91   - },
92   - });
  66 + /**
  67 + * @description: Handling development events
  68 + */
  69 + function handleExpand() {
  70 + show.value = !show.value;
  71 + if (props.triggerWindowResize) {
  72 + // 200 milliseconds here is because the expansion has animation,
  73 + useTimeoutFn(triggerWindowResize, 200);
  74 + }
  75 + }
93 76 </script>
94 77 <style lang="less">
95 78 @prefix-cls: ~'@{namespace}-collapse-container';
... ...
yarn.lock
  View file @8fa6015
... ... @@ -11249,10 +11249,10 @@ vite-plugin-windicss@^1.2.7:
11249 11249 debug "^4.3.2"
11250 11250 windicss "^3.1.6"
11251 11251  
11252   -vite@2.5.0-beta.2:
11253   - version "2.5.0-beta.2"
11254   - resolved "https://registry.yarnpkg.com/vite/-/vite-2.5.0-beta.2.tgz#3b71eecb17b7e62869366a91e92bd26578bb4f7f"
11255   - integrity sha512-PgPOlTg7w6VGDx1HCUHfDoXeQ6cWKCO2tHz3om27VLjfu/92T1kyhuJf/VM6sa+orPOkTLUZWaHI9bPQjgtLrA==
  11252 +vite@2.5.0:
  11253 + version "2.5.0"
  11254 + resolved "https://registry.yarnpkg.com/vite/-/vite-2.5.0.tgz#111ba3679432d426e44566acf480005a7914cbd6"
  11255 + integrity sha512-Dn4B+g54PJsMG5WCc4QeFy1ygMXRdTtFrUPegqfk4+vzVQcbF/DqqmI/1bxezArzbujBJg/67QeT5wz8edfJVQ==
11256 11256 dependencies:
11257 11257 esbuild "^0.12.17"
11258 11258 postcss "^8.3.6"
... ...