From 8fa6015b1afb7bd6a1890cdf696b3f2986929b61 Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Mon, 16 Aug 2021 23:43:09 +0800
Subject: [PATCH] chore: change to setup syntax
---
.github/workflows/ftp-schedule.yml | 24 +++++++++++-------------
package.json | 2 +-
src/components/Basic/src/BasicArrow.vue | 43 +++++++++++++++++--------------------------
src/components/Basic/src/BasicTitle.vue | 31 +++++++++++--------------------
src/components/Button/src/BasicButton.vue | 50 ++++++++++++++++++++++++--------------------------
src/components/Button/src/PopConfirmButton.vue | 3 +--
src/components/ClickOutSide/src/ClickOutSide.vue | 25 +++++++++----------------
src/components/CodeEditor/src/CodeEditor.vue | 50 ++++++++++++++++++++++----------------------------
src/components/CodeEditor/src/codemirror/CodeMirror.vue | 157 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------
src/components/CodeEditor/src/json-preview/JsonPreview.vue | 10 ++++------
src/components/Container/src/collapse/CollapseContainer.vue | 49 ++++++++++++++++---------------------------------
yarn.lock | 8 ++++----
12 files changed, 191 insertions(+), 261 deletions(-)
diff --git a/.github/workflows/ftp-schedule.yml b/.github/workflows/ftp-schedule.yml
index 10cce05..6db8dc8 100644
--- 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: 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
diff --git a/package.json b/package.json
index c83e074..4c2be57 100644
--- 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",
diff --git a/src/components/Basic/src/BasicArrow.vue b/src/components/Basic/src/BasicArrow.vue
index e1f40f3..6a4cd01 100644
--- 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');
+ });
- // 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>
diff --git a/src/components/Basic/src/BasicTitle.vue b/src/components/Basic/src/BasicTitle.vue
index 9b5b287..3b96328 100644
--- 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';
diff --git a/src/components/Button/src/BasicButton.vue b/src/components/Button/src/BasicButton.vue
index 5a5039f..e6b94c3 100644
--- 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>
diff --git a/src/components/Button/src/PopConfirmButton.vue b/src/components/Button/src/PopConfirmButton.vue
index 8576a05..903d481 100644
--- 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));
diff --git a/src/components/ClickOutSide/src/ClickOutSide.vue b/src/components/ClickOutSide/src/ClickOutSide.vue
index 8a61883..c043cc1 100644
--- 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');
- });
-
- onMounted(() => {
- emit('mounted');
- });
+ onClickOutside(wrap, () => {
+ emit('clickOutside');
+ });
- return { wrap };
- },
+ onMounted(() => {
+ emit('mounted');
});
</script>
diff --git a/src/components/CodeEditor/src/CodeEditor.vue b/src/components/CodeEditor/src/CodeEditor.vue
index aa6351e..2818e58 100644
--- 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);
- }
+ 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>
diff --git a/src/components/CodeEditor/src/codemirror/CodeMirror.vue b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
index 0d50cd1..332c1ac 100644
--- 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(
+ () => 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>
diff --git a/src/components/CodeEditor/src/json-preview/JsonPreview.vue b/src/components/CodeEditor/src/json-preview/JsonPreview.vue
index 9e3af7e..75890c3 100644
--- 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>
diff --git a/src/components/Container/src/collapse/CollapseContainer.vue b/src/components/Container/src/collapse/CollapseContainer.vue
index 069941e..4b629f2 100644
--- 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');
+ 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';
diff --git a/yarn.lock b/yarn.lock
index 49e0417..45ba154 100644
--- 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"
--
libgit2 0.23.3