github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-27 04:54:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: components use setup (#3299)

Browse Source 
* refactor: /@/ => @/

* refactor: table demo use script setup

* refactor: change /@/ to @/
This commit is contained in:
xingyu
2023-11-20 12:27:11 +08:00
committed by GitHub
parent cb13986a17
commit bab28af986
231 changed files with 5790 additions and 6519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
.vscode/settings.json vendored
View File

@@ -104,38 +104,36 @@
"i18n-ally.displayLanguage": "zh-CN",
"i18n-ally.enabledFrameworks": ["vue", "react"],
"cSpell.words": [
"vben",
"browserslist",
"tailwindcss",
"esnext",
"antd",
"antv",
"tinymce",
"brotli",
"browserslist",
"codemirror",
"commitlint",
"cropperjs",
"echarts",
"esnext",
"esno",
"iconify",
"INTLIFY",
"lintstagedrc",
"logicflow",
"mockjs",
"nprogress",
"pinia",
"pnpm",
"qrcode",
"sider",
"pinia",
"sider",
"nprogress",
"INTLIFY",
"stylelint",
"esno",
"vitejs",
"sortablejs",
"mockjs",
"codemirror",
"iconify",
"commitlint",
"vditor",
"echarts",
"cropperjs",
"logicflow",
"vueuse",
"zxcvbn",
"lintstagedrc",
"brotli",
"stylelint",
"tailwindcss",
"sider",
"pnpm",
"antd"
"tinymce",
"unref",
"vben",
"vditor",
"vitejs",
"vueuse",
"zxcvbn"
],
"vetur.format.scriptInitialIndent": true,
"vetur.format.styleInitialIndent": true,

2
src/components/Application/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import appLogo from './src/AppLogo.vue';
import appProvider from './src/AppProvider.vue';

16
src/components/Application/src/AppDarkModeToggle.vue
View File

@@ -7,12 +7,12 @@
</template>
<script lang="ts" setup>
import { computed, unref } from 'vue';
import { SvgIcon } from '/@/components/Icon';
import { ThemeEnum } from '/@/enums/appEnum';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useDesign } from '/@/hooks/web/useDesign';
import { updateDarkTheme } from '/@/logics/theme/dark';
import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
import { SvgIcon } from '@/components/Icon';
import { ThemeEnum } from '@/enums/appEnum';
import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { useDesign } from '@/hooks/web/useDesign';
import { updateDarkTheme } from '@/logics/theme/dark';
import { updateHeaderBgColor, updateSidebarBgColor } from '@/logics/theme/updateBackground';
const { prefixCls } = useDesign('dark-switch');
const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
@@ -61,7 +61,9 @@
z-index: 1;
width: 18px;
height: 18px;
transition: transform 0.5s, background-color 0.5s;
transition:
transform 0.5s,
background-color 0.5s;
border-radius: 50%;
background-color: #fff;
will-change: transform;

8
src/components/Application/src/AppLocalePicker.vue
View File

@@ -19,12 +19,12 @@
</template>
<script lang="ts" setup>
import type { LocaleType } from '/#/config';
import type { DropMenu } from '/@/components/Dropdown';
import type { DropMenu } from '@/components/Dropdown';
import { ref, watchEffect, unref, computed } from 'vue';
import { Dropdown } from '/@/components/Dropdown';
import { Dropdown } from '@/components/Dropdown';
import Icon from '@/components/Icon/Icon.vue';
import { useLocale } from '/@/locales/useLocale';
import { localeList } from '/@/settings/localeSetting';
import { useLocale } from '@/locales/useLocale';
import { localeList } from '@/settings/localeSetting';
const props = defineProps({
/**

12
src/components/Application/src/AppLogo.vue
View File

@@ -12,12 +12,12 @@
</template>
<script lang="ts" setup>
import { computed, unref } from 'vue';
import { useGlobSetting } from '/@/hooks/setting';
import { useGo } from '/@/hooks/web/usePage';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useDesign } from '/@/hooks/web/useDesign';
import { PageEnum } from '/@/enums/pageEnum';
import { useUserStore } from '/@/store/modules/user';
import { useGlobSetting } from '@/hooks/setting';
import { useGo } from '@/hooks/web/usePage';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { useDesign } from '@/hooks/web/useDesign';
import { PageEnum } from '@/enums/pageEnum';
import { useUserStore } from '@/store/modules/user';
const props = defineProps({
/**

8
src/components/Application/src/AppProvider.vue
View File

@@ -1,10 +1,10 @@
<script lang="ts">
import { defineComponent, toRefs, ref, unref } from 'vue';
import { createAppProviderContext } from './useAppContext';
import { createBreakpointListen } from '/@/hooks/event/useBreakpoint';
import { prefixCls } from '/@/settings/designSetting';
import { useAppStore } from '/@/store/modules/app';
import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
import { createBreakpointListen } from '@/hooks/event/useBreakpoint';
import { prefixCls } from '@/settings/designSetting';
import { useAppStore } from '@/store/modules/app';
import { MenuModeEnum, MenuTypeEnum } from '@/enums/menuEnum';
const props = {
/**

2
src/components/Application/src/search/AppSearch.vue
View File

@@ -3,7 +3,7 @@
import { Tooltip } from 'ant-design-vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import AppSearchModal from './AppSearchModal.vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useI18n } from '@/hooks/web/useI18n';
export default defineComponent({
name: 'AppSearch',

8
src/components/Application/src/search/AppSearchFooter.vue
View File

@@ -12,8 +12,8 @@
<script lang="ts" setup>
import AppSearchKeyItem from './AppSearchKeyItem.vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '@/hooks/web/useDesign';
import { useI18n } from '@/hooks/web/useI18n';
const { prefixCls } = useDesign('app-search-footer');
const { t } = useI18n();
@@ -44,7 +44,9 @@
padding-bottom: 2px;
border-radius: 2px;
background-color: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
box-shadow:
inset 0 -2px 0 0 #cdcde6,
inset 0 0 1px 1px #fff,
0 1px 2px 1px rgb(30 35 90 / 40%);
&:nth-child(2),

8
src/components/Application/src/search/AppSearchModal.vue
View File

@@ -63,12 +63,12 @@
import AppSearchFooter from './AppSearchFooter.vue';
import Icon from '@/components/Icon/Icon.vue';
// @ts-ignore
import vClickOutside from '/@/directives/clickOutside';
import { useDesign } from '/@/hooks/web/useDesign';
import vClickOutside from '@/directives/clickOutside';
import { useDesign } from '@/hooks/web/useDesign';
import { useRefs } from '@vben/hooks';
import { useMenuSearch } from './useMenuSearch';
import { useI18n } from '/@/hooks/web/useI18n';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { useI18n } from '@/hooks/web/useI18n';
import { useAppInject } from '@/hooks/web/useAppInject';
const props = defineProps({
visible: { type: Boolean },

10
src/components/Application/src/search/useMenuSearch.ts
View File

@@ -1,13 +1,13 @@
import { type Menu } from '/@/router/types';
import { type Menu } from '@/router/types';
import { type AnyFunction } from '@vben/types';
import { ref, onBeforeMount, unref, Ref, nextTick } from 'vue';
import { getMenus } from '/@/router/menus';
import { getMenus } from '@/router/menus';
import { cloneDeep } from 'lodash-es';
import { filter, forEach } from '/@/utils/helper/treeHelper';
import { useGo } from '/@/hooks/web/usePage';
import { filter, forEach } from '@/utils/helper/treeHelper';
import { useGo } from '@/hooks/web/usePage';
import { useScrollTo } from '@vben/hooks';
import { onKeyStroke, useDebounceFn } from '@vueuse/core';
import { useI18n } from '/@/hooks/web/useI18n';
import { useI18n } from '@/hooks/web/useI18n';
export interface SearchResult {
name: string;

2
src/components/Application/src/useAppContext.ts
View File

@@ -1,5 +1,5 @@
import { InjectionKey, Ref } from 'vue';
import { createContext, useContext } from '/@/hooks/core/useContext';
import { createContext, useContext } from '@/hooks/core/useContext';
export interface AppProviderContextProps {
prefixCls: Ref<string>;

2
src/components/Authority/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import authority from './src/Authority.vue';
export const Authority = withInstall(authority);

6
src/components/Authority/src/Authority.vue
View File

@@ -4,9 +4,9 @@
<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
import { RoleEnum } from '/@/enums/roleEnum';
import { usePermission } from '/@/hooks/web/usePermission';
import { getSlot } from '/@/utils/helper/tsxHelper';
import { RoleEnum } from '@/enums/roleEnum';
import { usePermission } from '@/hooks/web/usePermission';
import { getSlot } from '@/utils/helper/tsxHelper';
export default defineComponent({
name: 'Authority',

2
src/components/Basic/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import basicArrow from './src/BasicArrow.vue';
import basicTitle from './src/BasicTitle.vue';
import basicHelp from './src/BasicHelp.vue';

2
src/components/Basic/src/BasicArrow.vue
View File

@@ -10,7 +10,7 @@
<script lang="ts" setup>
import { computed } from 'vue';
import Icon from '@/components/Icon/Icon.vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '@/hooks/web/useDesign';
const props = defineProps({
/**

8
src/components/Basic/src/BasicHelp.vue
View File

@@ -3,10 +3,10 @@
import { defineComponent, computed, unref } from 'vue';
import { Tooltip } from 'ant-design-vue';
import { InfoCircleOutlined } from '@ant-design/icons-vue';
import { getPopupContainer } from '/@/utils';
import { isString, isArray } from '/@/utils/is';
import { getSlot } from '/@/utils/helper/tsxHelper';
import { useDesign } from '/@/hooks/web/useDesign';
import { getPopupContainer } from '@/utils';
import { isString, isArray } from '@/utils/is';
import { getSlot } from '@/utils/helper/tsxHelper';
import { useDesign } from '@/hooks/web/useDesign';
const props = {
/**

2
src/components/Basic/src/BasicTitle.vue
View File

@@ -8,7 +8,7 @@
import type { PropType } from 'vue';
import { useSlots, computed } from 'vue';
import BasicHelp from './BasicHelp.vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '@/hooks/web/useDesign';
const props = defineProps({
/**

2
src/components/Button/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import type { ExtractPropTypes } from 'vue';
import button from './src/BasicButton.vue';
import popConfirmButton from './src/PopConfirmButton.vue';

4
src/components/Button/src/PopConfirmButton.vue
View File

@@ -2,10 +2,10 @@
import { computed, defineComponent, h, unref } from 'vue';
import BasicButton from './BasicButton.vue';
import { Popconfirm } from 'ant-design-vue';
import { extendSlots } from '/@/utils/helper/tsxHelper';
import { extendSlots } from '@/utils/helper/tsxHelper';
import { omit } from 'lodash-es';
import { useAttrs } from '@vben/hooks';
import { useI18n } from '/@/hooks/web/useI18n';
import { useI18n } from '@/hooks/web/useI18n';
const props = {
/**

2
src/components/CardList/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import cardList from './src/CardList.vue';
export const CardList = withInstall(cardList);

24
src/components/CardList/src/CardList.vue
View File

@@ -10,22 +10,23 @@
:pagination="paginationProp"
>
<template #header>
<div class="flex justify-end space-x-2"
><slot name="header"></slot>
<div class="flex justify-end space-x-2">
<slot name="header"> </slot>
<Tooltip>
<template #title>
<div class="w-50">每行显示数量</div
><Slider
<div class="w-50">每行显示数量</div>
<Slider
id="slider"
v-bind="sliderProp"
v-model:value="grid"
@change="sliderChange"
/></template>
<Button><TableOutlined /></Button>
/>
</template>
<a-button><TableOutlined /></a-button>
</Tooltip>
<Tooltip @click="fetch">
<template #title>刷新</template>
<Button><RedoOutlined /></Button>
<a-button><RedoOutlined /></a-button>
</Tooltip>
</div>
</template>
@@ -83,11 +84,10 @@
TableOutlined,
} from '@ant-design/icons-vue';
import { List, Card, Image, Typography, Tooltip, Slider, Avatar } from 'ant-design-vue';
import { Dropdown } from '/@/components/Dropdown';
import { BasicForm, useForm } from '/@/components/Form';
import { propTypes } from '/@/utils/propTypes';
import { Button } from '/@/components/Button';
import { isFunction } from '/@/utils/is';
import { Dropdown } from '@/components/Dropdown';
import { BasicForm, useForm } from '@/components/Form';
import { propTypes } from '@/utils/propTypes';
import { isFunction } from '@/utils/is';
import { useSlider, grid } from './data';
const ListItem = List.Item;

2
src/components/ClickOutSide/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import clickOutSide from './src/ClickOutSide.vue';
export const ClickOutSide = withInstall(clickOutSide);

2
src/components/CodeEditor/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import codeEditor from './src/CodeEditor.vue';
import jsonPreview from './src/json-preview/JsonPreview.vue';

2
src/components/CodeEditor/src/CodeEditor.vue
View File

@@ -12,7 +12,7 @@
<script lang="ts" setup>
import { computed } from 'vue';
import CodeMirrorEditor from './codemirror/CodeMirror.vue';
import { isString } from '/@/utils/is';
import { isString } from '@/utils/is';
import { MODE } from './typing';
const props = defineProps({

2
src/components/CodeEditor/src/codemirror/CodeMirror.vue
View File

@@ -20,7 +20,7 @@
import type { Nullable } from '@vben/types';
import { useWindowSizeFn } from '@vben/hooks';
import { useDebounceFn } from '@vueuse/core';
import { useAppStore } from '/@/store/modules/app';
import { useAppStore } from '@/store/modules/app';
import CodeMirror from 'codemirror';
import { MODE } from './../typing';
// css

2
src/components/Container/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import collapseContainer from './src/collapse/CollapseContainer.vue';
import scrollContainer from './src/ScrollContainer.vue';

53
src/components/Container/src/ScrollContainer.vue
View File

@@ -9,31 +9,36 @@
</Scrollbar>
</template>
<script lang="ts">
import { defineComponent, ref, unref, nextTick } from 'vue';
import { Scrollbar, ScrollbarType } from '/@/components/Scrollbar';
<script lang="ts" setup>
import { ref, unref, nextTick } from 'vue';
import { Scrollbar, ScrollbarType } from '@/components/Scrollbar';
import { useScrollTo } from '@vben/hooks';
import { type Nullable } from '@vben/types';
export default defineComponent({
name: 'ScrollContainer',
components: { Scrollbar },
props: {
scrollHeight: { type: Number },
defineOptions({ name: 'ScrollContainer' });
defineProps({
scrollHeight: {
type: Number,
},
setup() {
});
const scrollbarRef = ref<Nullable<ScrollbarType>>(null);
function getScrollWrap() {
const scrollbar = unref(scrollbarRef);
if (!scrollbar) {
return null;
}
return scrollbar.wrap;
}
/**
* Scroll to the specified position
*/
function scrollTo(to: number, duration = 500) {
const scrollbar = unref(scrollbarRef);
if (!scrollbar) {
return;
}
const wrap = unref(getScrollWrap());
nextTick(() => {
const wrap = unref(scrollbar.wrap);
if (!wrap) {
return;
}
@@ -46,24 +51,12 @@
});
}
function getScrollWrap() {
const scrollbar = unref(scrollbarRef);
if (!scrollbar) {
return null;
}
return scrollbar.wrap;
}
/**
* Scroll to the bottom
*/
function scrollBottom() {
const scrollbar = unref(scrollbarRef);
if (!scrollbar) {
return;
}
const wrap = unref(getScrollWrap());
nextTick(() => {
const wrap = unref(scrollbar.wrap) as any;
if (!wrap) {
return;
}
@@ -76,13 +69,9 @@
});
}
return {
scrollbarRef,
defineExpose({
scrollTo,
scrollBottom,
getScrollWrap,
};
},
});
</script>
<style lang="less">

6
src/components/Container/src/collapse/CollapseContainer.vue
View File

@@ -3,10 +3,10 @@
import { isNil } from 'lodash-es';
import { Skeleton } from 'ant-design-vue';
import { useTimeoutFn } from '@vben/hooks';
import { CollapseTransition } from '/@/components/Transition';
import { CollapseTransition } from '@/components/Transition';
import CollapseHeader from './CollapseHeader.vue';
import { triggerWindowResize } from '/@/utils/event';
import { useDesign } from '/@/hooks/web/useDesign';
import { triggerWindowResize } from '@/utils/event';
import { useDesign } from '@/hooks/web/useDesign';
const collapseContainerProps = {
title: { type: String, default: '' },

4
src/components/Container/src/collapse/CollapseHeader.vue
View File

@@ -1,7 +1,7 @@
<script lang="tsx">
import { defineComponent, computed, unref, type ExtractPropTypes, PropType } from 'vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { BasicArrow, BasicTitle } from '/@/components/Basic';
import { useDesign } from '@/hooks/web/useDesign';
import { BasicArrow, BasicTitle } from '@/components/Basic';
const collapseHeaderProps = {
prefixCls: String,

2
src/components/ContextMenu/src/createContextMenu.ts
View File

@@ -1,5 +1,5 @@
import contextMenuVue from './ContextMenu.vue';
import { isClient } from '/@/utils/is';
import { isClient } from '@/utils/is';
import { CreateContextOptions, ContextMenuProps } from './typing';
import { createVNode, render } from 'vue';

2
src/components/CountDown/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import countButton from './src/CountButton.vue';
import countdownInput from './src/CountdownInput.vue';

27
src/components/CountDown/src/CountButton.vue
View File

@@ -3,31 +3,27 @@
{{ getButtonText }}
</Button>
</template>
<script lang="ts">
import { defineComponent, ref, watchEffect, computed, unref } from 'vue';
<script lang="ts" setup>
import { ref, watchEffect, computed, unref } from 'vue';
import { Button } from 'ant-design-vue';
import { useCountdown } from './useCountdown';
import { isFunction } from '/@/utils/is';
import { useI18n } from '/@/hooks/web/useI18n';
import { isFunction } from '@/utils/is';
import { useI18n } from '@/hooks/web/useI18n';
const props = {
defineOptions({ name: 'CountButton' });
const props = defineProps({
value: { type: [Object, Number, String, Array] },
count: { type: Number, default: 60 },
beforeStartFunc: {
type: Function as PropType<() => Promise<boolean>>,
default: null,
},
};
});
export default defineComponent({
name: 'CountButton',
components: { Button },
props,
setup(props) {
const loading = ref(false);
const { currentCount, isStart, start, reset } = useCountdown(props.count);
const { t } = useI18n();
const loading = ref(false);
const { currentCount, isStart, start, reset } = useCountdown(props.count);
const getButtonText = computed(() => {
return !unref(isStart)
@@ -56,7 +52,4 @@
start();
}
}
return { handleStart, currentCount, loading, getButtonText, isStart };
},
});
</script>

26
src/components/CountDown/src/CountdownInput.vue
View File

@@ -8,34 +8,26 @@
</template>
</a-input>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
<script lang="ts" setup>
import { PropType } from 'vue';
import CountButton from './CountButton.vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
import { useDesign } from '@/hooks/web/useDesign';
import { useRuleFormItem } from '@/hooks/component/useFormItem';
const props = {
defineOptions({ name: 'CountDownInput', inheritAttrs: false });
const props = defineProps({
value: { type: String },
size: { type: String, validator: (v) => ['default', 'large', 'small'].includes(v) },
size: { type: String, validator: (v: string) => ['default', 'large', 'small'].includes(v) },
count: { type: Number, default: 60 },
sendCodeApi: {
type: Function as PropType<() => Promise<boolean>>,
default: null,
},
};
});
export default defineComponent({
name: 'CountDownInput',
components: { CountButton },
inheritAttrs: false,
props,
setup(props) {
const { prefixCls } = useDesign('countdown-input');
const [state] = useRuleFormItem(props);
return { prefixCls, state };
},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-countdown-input';

2
src/components/CountTo/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import countTo from './src/CountTo.vue';
export const CountTo = withInstall(countTo);

23
src/components/CountTo/src/CountTo.vue
View File

@@ -3,12 +3,14 @@
{{ value }}
</span>
</template>
<script lang="ts">
import { defineComponent, ref, computed, watchEffect, unref, onMounted, watch } from 'vue';
<script lang="ts" setup>
import { ref, computed, watchEffect, unref, onMounted, watch } from 'vue';
import { useTransition, TransitionPresets } from '@vueuse/core';
import { isNumber } from '/@/utils/is';
import { isNumber } from '@/utils/is';
const props = {
defineOptions({ name: 'CountTo' });
const props = defineProps({
startVal: { type: Number, default: 0 },
endVal: { type: Number, default: 2021 },
duration: { type: Number, default: 1500 },
@@ -36,13 +38,10 @@
* Digital animation
*/
transition: { type: String, default: 'linear' },
};
});
const emit = defineEmits(['onStarted', 'onFinished']);
export default defineComponent({
name: 'CountTo',
props,
emits: ['onStarted', 'onFinished'],
setup(props, { emit }) {
const source = ref(props.startVal);
const disabled = ref(false);
let outputValue = useTransition(source);
@@ -104,7 +103,5 @@
return prefix + x1 + x2 + suffix;
}
return { value, start, reset };
},
});
defineExpose({ reset });
</script>

2
src/components/Cropper/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import cropperImage from './src/Cropper.vue';
import avatarCropper from './src/CropperAvatar.vue';

26
src/components/Cropper/src/Cropper.vue
View File

@@ -10,13 +10,14 @@
/>
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { CSSProperties } from 'vue';
import { defineComponent, onMounted, ref, unref, computed, onUnmounted } from 'vue';
import { onMounted, ref, unref, computed, onUnmounted } from 'vue';
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';
import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '@/hooks/web/useDesign';
import { useDebounceFn } from '@vueuse/shared';
import { useAttrs } from '@vben/hooks';
type Options = Cropper.Options;
@@ -43,7 +44,9 @@
rotatable: true,
};
const props = {
defineOptions({ name: 'CropperImage' });
const props = defineProps({
src: { type: String, required: true },
alt: { type: String },
circled: { type: Boolean, default: false },
@@ -55,13 +58,12 @@
},
imageStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
options: { type: Object as PropType<Options>, default: () => ({}) },
};
});
const emit = defineEmits(['cropend', 'ready', 'cropendError']);
const attrs = useAttrs();
export default defineComponent({
name: 'CropperImage',
props,
emits: ['cropend', 'ready', 'cropendError'],
setup(props, { attrs, emit }) {
const imgElRef = ref<ElRef<HTMLImageElement>>();
const cropper = ref<Nullable<Cropper>>();
const isReady = ref(false);
@@ -169,10 +171,6 @@
context.fill();
return canvas;
}
return { getClass, imgElRef, getWrapperStyle, getImageStyle, isReady, croppered };
},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-cropper-image';

56
src/components/Cropper/src/CropperAvatar.vue
View File

@@ -1,6 +1,6 @@
<template>
<div :class="getClass" :style="getStyle">
<div :class="`${prefixCls}-image-wrapper`" :style="getImageWrapperStyle" @click="openModal">
<div :class="`${prefixCls}-image-wrapper`" :style="getImageWrapperStyle" @click="openModal()">
<div :class="`${prefixCls}-image-mask`" :style="getImageWrapperStyle">
<Icon
icon="ant-design:cloud-upload-outlined"
@@ -29,26 +29,19 @@
/>
</div>
</template>
<script lang="ts">
import {
defineComponent,
computed,
CSSProperties,
unref,
ref,
watchEffect,
watch,
PropType,
} from 'vue';
<script lang="ts" setup>
import { computed, CSSProperties, unref, ref, watchEffect, watch, PropType } from 'vue';
import CropperModal from './CropperModal.vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useModal } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import type { ButtonProps } from '/@/components/Button';
import { useDesign } from '@/hooks/web/useDesign';
import { useModal } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { useI18n } from '@/hooks/web/useI18n';
import type { ButtonProps } from '@/components/Button';
import Icon from '@/components/Icon/Icon.vue';
const props = {
defineOptions({ name: 'CropperAvatar' });
const props = defineProps({
width: { type: [String, Number], default: '200px' },
value: { type: String },
showBtn: { type: Boolean, default: true },
@@ -59,14 +52,10 @@
},
size: { type: Number, default: 5 },
};
});
const emit = defineEmits(['update:value', 'change']);
export default defineComponent({
name: 'CropperAvatar',
components: { CropperModal, Icon },
props,
emits: ['update:value', 'change'],
setup(props, { emit, expose }) {
const sourceValue = ref(props.value || '');
const { prefixCls } = useDesign('cropper-avatar');
const [register, { openModal, closeModal }] = useModal();
@@ -102,22 +91,7 @@
createMessage.success(t('component.cropper.uploadSuccess'));
}
expose({ openModal: openModal.bind(null, true), closeModal });
return {
t,
prefixCls,
register,
openModal: openModal as any,
getIconWidth,
sourceValue,
getClass,
getImageWrapperStyle,
getStyle,
handleUploadSuccess,
};
},
});
defineExpose({ openModal: openModal.bind(null, true), closeModal });
</script>
<style lang="less" scoped>

47
src/components/Cropper/src/CropperModal.vue
View File

@@ -110,35 +110,33 @@
</div>
</BasicModal>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { CropendResult, Cropper } from './typing';
import { defineComponent, ref, PropType } from 'vue';
import { ref, PropType } from 'vue';
import CropperImage from './Cropper.vue';
import { Space, Upload, Avatar, Tooltip } from 'ant-design-vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { dataURLtoBlob } from '/@/utils/file/base64Conver';
import { isFunction } from '/@/utils/is';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '@/hooks/web/useDesign';
import { BasicModal, useModalInner } from '@/components/Modal';
import { dataURLtoBlob } from '@/utils/file/base64Conver';
import { isFunction } from '@/utils/is';
import { useI18n } from '@/hooks/web/useI18n';
type apiFunParams = { file: Blob; name: string; filename: string };
const props = {
defineOptions({ name: 'CropperModal' });
const props = defineProps({
circled: { type: Boolean, default: true },
uploadApi: {
type: Function as PropType<(params: apiFunParams) => Promise<any>>,
},
src: { type: String },
size: { type: Number },
};
});
const emit = defineEmits(['uploadSuccess', 'uploadError', 'register']);
export default defineComponent({
name: 'CropperModal',
components: { BasicModal, Space, CropperImage, Upload, Avatar, Tooltip },
props,
emits: ['uploadSuccess', 'uploadError', 'register'],
setup(props, { emit }) {
let filename = '';
const src = ref(props.src || '');
const previewSource = ref('');
@@ -199,21 +197,6 @@
}
}
}
return {
t,
prefixCls,
src,
register,
previewSource,
handleBeforeUpload,
handleCropend,
handleReady,
handlerToolbar,
handleOk,
};
},
});
</script>
<style lang="less">
@@ -252,7 +235,9 @@
transparent 75%,
rgb(0 0 0 / 25%) 0
);
background-position: 0 0, 12px 12px;
background-position:
0 0,
12px 12px;
background-size: 24px 24px;
}

2
src/components/Description/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import description from './src/Description.vue';
export * from './src/typing';

14
src/components/Description/src/Description.vue
View File

@@ -1,7 +1,7 @@
<script lang="tsx">
import type { DescriptionProps, DescInstance, DescItem } from './typing';
import type { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
import type { CollapseContainerOptions } from '/@/components/Container/index';
import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
import type { CollapseContainerOptions } from '@/components/Container';
import {
type CSSProperties,
type PropType,
@@ -13,10 +13,10 @@
} from 'vue';
import { get } from 'lodash-es';
import { Descriptions } from 'ant-design-vue';
import { CollapseContainer } from '/@/components/Container/index';
import { useDesign } from '/@/hooks/web/useDesign';
import { isFunction } from '/@/utils/is';
import { getSlot } from '/@/utils/helper/tsxHelper';
import { CollapseContainer } from '@/components/Container';
import { useDesign } from '@/hooks/web/useDesign';
import { isFunction } from '@/utils/is';
import { getSlot } from '@/utils/helper/tsxHelper';
import { useAttrs } from '@vben/hooks';
const props = {
@@ -24,7 +24,7 @@
title: { type: String, default: '' },
size: {
type: String,
validator: (v) => ['small', 'default', 'middle', undefined].includes(v),
validator: (v: string) => ['small', 'default', 'middle', undefined].includes(v),
default: 'small',
},
bordered: { type: Boolean, default: true },

4
src/components/Description/src/typing.ts
View File

@@ -1,6 +1,6 @@
import type { VNode, CSSProperties } from 'vue';
import type { CollapseContainerOptions } from '/@/components/Container/index';
import type { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
import type { CollapseContainerOptions } from '@/components/Container';
import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
export interface DescItem {
labelMinWidth?: number;

2
src/components/Description/src/useDescription.ts
View File

@@ -1,6 +1,6 @@
import type { DescriptionProps, DescInstance, UseDescReturnType } from './typing';
import { ref, getCurrentInstance, unref } from 'vue';
import { isProdMode } from '/@/utils/env';
import { isProdMode } from '@/utils/env';
export function useDescription(props?: Partial<DescriptionProps>): UseDescReturnType {
if (!getCurrentInstance()) {

2
src/components/Drawer/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import basicDrawer from './src/BasicDrawer.vue';
export const BasicDrawer = withInstall(basicDrawer);

56
src/components/Drawer/src/BasicDrawer.vue
View File

@@ -2,7 +2,7 @@
<Drawer v-bind="getBindValues" :class="prefixCls" @close="onClose">
<template #title v-if="!$slots.title">
<DrawerHeader
:title="getMergeProps.title"
:title="mergeProps.title"
:isDetail="isDetail"
:showDetailBack="showDetailBack"
@close="onClose"
@@ -30,36 +30,27 @@
</DrawerFooter>
</Drawer>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { DrawerInstance, DrawerProps } from './typing';
import type { CSSProperties } from 'vue';
import {
defineComponent,
ref,
computed,
watch,
unref,
nextTick,
toRaw,
getCurrentInstance,
} from 'vue';
import { ref, computed, watch, unref, nextTick, toRaw, getCurrentInstance } from 'vue';
import { Drawer } from 'ant-design-vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { isFunction, isNumber } from '/@/utils/is';
import { deepMerge } from '/@/utils';
import { useI18n } from '@/hooks/web/useI18n';
import { isFunction, isNumber } from '@/utils/is';
import { deepMerge } from '@/utils';
import DrawerFooter from './components/DrawerFooter.vue';
import DrawerHeader from './components/DrawerHeader.vue';
import { ScrollContainer } from '/@/components/Container';
import { ScrollContainer } from '@/components/Container';
import { basicProps } from './props';
import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '@/hooks/web/useDesign';
import { useAttrs } from '@vben/hooks';
export default defineComponent({
components: { Drawer, ScrollContainer, DrawerFooter, DrawerHeader },
inheritAttrs: false,
props: basicProps,
emits: ['open-change', 'ok', 'close', 'register'],
setup(props, { emit }) {
defineOptions({ inheritAttrs: false });
const props = defineProps(basicProps);
const emit = defineEmits(['open-change', 'ok', 'close', 'register']);
const openRef = ref(false);
const attrs = useAttrs();
const propsRef = ref<Partial<DrawerProps | null>>(null);
@@ -114,9 +105,7 @@
const getFooterHeight = computed(() => {
const { footerHeight, showFooter } = unref(getProps);
if (showFooter && footerHeight) {
return isNumber(footerHeight)
? `${footerHeight}px`
: `${footerHeight.replace('px', '')}px`;
return isNumber(footerHeight) ? `${footerHeight}px` : `${footerHeight.replace('px', '')}px`;
}
return `0px`;
});
@@ -176,20 +165,7 @@
emit('ok');
}
return {
onClose,
t,
prefixCls,
getMergeProps: getMergeProps as any,
getScrollContentStyle,
getProps: getProps as any,
getLoading,
getBindValues,
getFooterHeight,
handleOk,
};
},
});
const mergeProps = getMergeProps as any;
</script>
<style lang="less">
@header-height: 60px;

23
src/components/Drawer/src/components/DrawerFooter.vue
View File

@@ -24,24 +24,24 @@
</template>
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { CSSProperties } from 'vue';
import { defineComponent, computed } from 'vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { computed } from 'vue';
import { useDesign } from '@/hooks/web/useDesign';
import { footerProps } from '../props';
export default defineComponent({
name: 'BasicDrawerFooter',
props: {
defineOptions({ name: 'BasicDrawerFooter' });
const props = defineProps({
...footerProps,
height: {
type: String,
default: '60px',
},
},
emits: ['ok', 'close'],
setup(props, { emit }) {
});
const emit = defineEmits(['ok', 'close']);
const { prefixCls } = useDesign('basic-drawer-footer');
const getStyle = computed((): CSSProperties => {
@@ -59,9 +59,6 @@
function handleClose() {
emit('close');
}
return { handleOk, prefixCls, handleClose, getStyle };
},
});
</script>
<style lang="less">

27
src/components/Drawer/src/components/DrawerHeader.vue
View File

@@ -17,34 +17,27 @@
</span>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTitle } from '/@/components/Basic';
<script lang="ts" setup>
import { BasicTitle } from '@/components/Basic';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import { useDesign } from '@/hooks/web/useDesign';
import { propTypes } from '@/utils/propTypes';
import { useDesign } from '/@/hooks/web/useDesign';
defineOptions({ name: 'BasicDrawerHeader' });
import { propTypes } from '/@/utils/propTypes';
export default defineComponent({
name: 'BasicDrawerHeader',
components: { BasicTitle, ArrowLeftOutlined },
props: {
defineProps({
isDetail: propTypes.bool,
showDetailBack: propTypes.bool,
title: propTypes.string,
},
emits: ['close'],
setup(_, { emit }) {
});
const emit = defineEmits(['close']);
const { prefixCls } = useDesign('basic-drawer-header');
function handleClose() {
emit('close');
}
return { prefixCls, handleClose };
},
});
</script>
<style lang="less">

2
src/components/Drawer/src/props.ts
View File

@@ -1,6 +1,6 @@
import type { PropType } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useI18n } from '@/hooks/web/useI18n';
const { t } = useI18n();

2
src/components/Drawer/src/typing.ts
View File

@@ -1,6 +1,6 @@
import type { ButtonProps } from 'ant-design-vue/lib/button/buttonTypes';
import type { CSSProperties, VNodeChild, ComputedRef } from 'vue';
import type { ScrollContainerOptions } from '/@/components/Container/index';
import type { ScrollContainerOptions } from '@/components/Container';
export interface DrawerInstance {
setDrawerProps: (props: Partial<DrawerProps>) => void;

6
src/components/Drawer/src/useDrawer.ts
View File

@@ -15,11 +15,11 @@ import {
toRaw,
computed,
} from 'vue';
import { isProdMode } from '/@/utils/env';
import { isFunction } from '/@/utils/is';
import { isProdMode } from '@/utils/env';
import { isFunction } from '@/utils/is';
import { tryOnUnmounted } from '@vueuse/core';
import { isEqual } from 'lodash-es';
import { error } from '/@/utils/log';
import { error } from '@/utils/log';
const dataTransferRef = reactive<any>({});

2
src/components/Dropdown/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import dropdown from './src/Dropdown.vue';
export * from './src/typing';

2
src/components/Excel/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import impExcel from './src/ImportExcel.vue';
import expExcelModal from './src/ExportExcelModal.vue';

26
src/components/Excel/src/ExportExcelModal.vue
View File

@@ -13,13 +13,12 @@
/>
</BasicModal>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { ExportModalResult } from './typing';
import { defineComponent } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, FormSchema, useForm } from '@/components/Form';
import { useI18n } from '/@/hooks/web/useI18n';
import { useI18n } from '@/hooks/web/useI18n';
const { t } = useI18n();
@@ -62,10 +61,9 @@
},
},
];
export default defineComponent({
components: { BasicModal, BasicForm },
emits: ['success', 'register'],
setup(_, { emit }) {
const emit = defineEmits(['success', 'register']);
const [registerForm, { validate }] = useForm();
const [registerModal, { closeModal }] = useModalInner();
@@ -78,14 +76,4 @@
});
closeModal();
};
return {
schemas,
handleOk,
registerForm,
registerModal,
t,
};
},
});
</script>

24
src/components/Excel/src/ImportExcel.vue
View File

@@ -12,16 +12,15 @@
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
<script lang="ts" setup>
import { ref, unref } from 'vue';
import * as XLSX from 'xlsx';
import { dateUtil } from '/@/utils/dateUtil';
import { dateUtil } from '@/utils/dateUtil';
import type { ExcelData } from './typing';
export default defineComponent({
name: 'ImportExcel',
props: {
defineOptions({ name: 'ImportExcel' });
const props = defineProps({
// 日期时间格式。如果不提供或者提供空值，将返回原始Date对象
dateFormat: {
type: String,
@@ -37,9 +36,10 @@
type: Boolean,
default: false,
},
},
emits: ['success', 'error', 'cancel'],
setup(props, { emit }) {
});
const emit = defineEmits(['success', 'error', 'cancel']);
const inputRef = ref<HTMLInputElement | null>(null);
const loadingRef = ref<Boolean>(false);
const cancelRef = ref<Boolean>(true);
@@ -218,8 +218,4 @@
window.addEventListener('focus', handleFocusChange);
}
}
return { handleUpload, handleInputClick, inputRef };
},
});
</script>

2
src/components/FlowChart/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import flowChart from './src/FlowChart.vue';
export const FlowChart = withInstall(flowChart);

33
src/components/FlowChart/src/FlowChart.vue
View File

@@ -7,27 +7,26 @@
</BasicModal>
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { Ref } from 'vue';
import type { Definition } from '@logicflow/core';
import { defineComponent, ref, onMounted, unref, nextTick, computed, watch } from 'vue';
import { ref, onMounted, unref, nextTick, computed, watch } from 'vue';
import FlowChartToolbar from './FlowChartToolbar.vue';
import LogicFlow from '@logicflow/core';
import { Snapshot, BpmnElement, Menu, DndPanel, SelectionSelect } from '@logicflow/extension';
import { useDesign } from '/@/hooks/web/useDesign';
import { useAppStore } from '/@/store/modules/app';
import { useDesign } from '@/hooks/web/useDesign';
import { useAppStore } from '@/store/modules/app';
import { createFlowChartContext } from './useFlowContext';
import { toLogicFlowData } from './adpterForTurbo';
import { useModal, BasicModal } from '/@/components/Modal';
import { JsonPreview } from '/@/components/CodeEditor';
import { useModal, BasicModal } from '@/components/Modal';
import { JsonPreview } from '@/components/CodeEditor';
import { configDefaultDndPanel } from './config';
import '@logicflow/core/dist/style/index.css';
import '@logicflow/extension/lib/style/index.css';
export default defineComponent({
name: 'FlowChart',
components: { BasicModal, FlowChartToolbar, JsonPreview },
props: {
defineOptions({ name: 'FlowChart' });
const props = defineProps({
flowOptions: {
type: Object as PropType<Definition>,
default: () => ({}),
@@ -45,8 +44,8 @@
patternItems: {
type: Array,
},
},
setup(props) {
});
const lfElRef = ref(null);
const graphData = ref({});
@@ -145,14 +144,4 @@
}
onMounted(init);
return {
register,
prefixCls,
lfElRef,
handlePreview,
graphData,
};
},
});
</script>

23
src/components/FlowChart/src/FlowChartToolbar.vue
View File

@@ -6,7 +6,7 @@
<span :class="`${prefixCls}-toolbar__icon`" v-if="item.icon" @click="onControl(item)">
<Icon
:icon="item.icon"
:class="item.disabled ? 'cursor-not-allowed disabeld' : 'cursor-pointer'"
:class="item.disabled ? 'cursor-not-allowed disabled' : 'cursor-pointer'"
/>
</span>
</Tooltip>
@@ -14,24 +14,24 @@
</template>
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { ToolbarConfig } from './types';
import { defineComponent, ref, onUnmounted, unref, nextTick, watchEffect } from 'vue';
import { ref, onUnmounted, unref, nextTick, watchEffect } from 'vue';
import { Divider, Tooltip } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { useFlowChartContext } from './useFlowContext';
import { ToolbarTypeEnum } from './enum';
export default defineComponent({
name: 'FlowChartToolbar',
components: { Icon, Divider, Tooltip },
props: {
defineOptions({ name: 'FlowChartToolbar' });
defineProps({
prefixCls: String,
},
emits: ['view-data'],
setup(_, { emit }) {
});
const emit = defineEmits(['view-data']);
const toolbarItemList = ref<ToolbarConfig[]>([
{
type: ToolbarTypeEnum.ZOOM_IN,
@@ -128,9 +128,6 @@
onUnmounted(() => {
unref(logicFlow)?.off('history:change', onHistoryChange);
});
return { toolbarItemList, onControl };
},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-flow-chart-toolbar';

75
src/components/Form/src/BasicForm.vue
View File

@@ -37,39 +37,47 @@
</Row>
</Form>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { FormActionType, FormProps, FormSchemaInner as FormSchema } from './types/form';
import type { AdvanceState } from './types/hooks';
import type { Ref } from 'vue';
import { defineComponent, reactive, ref, computed, unref, onMounted, watch, nextTick } from 'vue';
import { reactive, ref, computed, unref, onMounted, watch, nextTick, useAttrs } from 'vue';
import { Form, Row, type FormProps as AntFormProps } from 'ant-design-vue';
import FormItem from './components/FormItem.vue';
import FormAction from './components/FormAction.vue';
import { dateItemType } from './helper';
import { dateUtil } from '/@/utils/dateUtil';
import { dateUtil } from '@/utils/dateUtil';
import { deepMerge } from '/@/utils';
import { deepMerge } from '@/utils';
import { useFormValues } from './hooks/useFormValues';
import useAdvanced from './hooks/useAdvanced';
import { useFormEvents } from './hooks/useFormEvents';
import { createFormContext } from './hooks/useFormContext';
import { useAutoFocus } from './hooks/useAutoFocus';
import { useModalContext } from '/@/components/Modal';
import { useModalContext } from '@/components/Modal';
import { useDebounceFn } from '@vueuse/core';
import { basicProps } from './props';
import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '@/hooks/web/useDesign';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
name: 'BasicForm',
components: { FormItem, Form, Row, FormAction },
props: basicProps,
emits: ['advanced-change', 'reset', 'submit', 'register', 'field-value-change'],
setup(props, { emit, attrs }) {
defineOptions({ name: 'BasicForm' });
const props = defineProps(basicProps);
const emit = defineEmits([
'advanced-change',
'reset',
'submit',
'register',
'field-value-change',
]);
const attrs = useAttrs();
const formModel = reactive({});
const modalFn = useModalContext();
@@ -111,19 +119,12 @@
};
});
const getBindValue = computed(
() => ({ ...attrs, ...props, ...unref(getProps) }) as AntFormProps,
);
const getBindValue = computed(() => ({ ...attrs, ...props, ...unref(getProps) }) as AntFormProps);
const getSchema = computed((): FormSchema[] => {
const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
for (const schema of schemas) {
const {
defaultValue,
component,
componentProps,
isHandleDateDefaultValue = true,
} = schema;
const { defaultValue, component, componentProps, isHandleDateDefaultValue = true } = schema;
// handle date type
if (
isHandleDateDefaultValue &&
@@ -146,9 +147,7 @@
}
}
if (unref(getProps).showAdvancedButton) {
return cloneDeep(
schemas.filter((schema) => schema.component !== 'Divider') as FormSchema[],
);
return cloneDeep(schemas.filter((schema) => schema.component !== 'Divider') as FormSchema[]);
} else {
return cloneDeep(schemas as FormSchema[]);
}
@@ -290,34 +289,14 @@
scrollToField: scrollToField,
};
const getFormActionBindProps = computed(
() => ({ ...getProps.value, ...advanceState }) as InstanceType<typeof FormAction>['$props'],
);
onMounted(() => {
initDefault();
emit('register', formActionType);
});
return {
getBindValue,
handleToggleAdvanced,
handleEnterPress,
formModel,
defaultValueRef,
advanceState,
getRow,
getProps,
formElRef,
getSchema,
formActionType: formActionType as any,
setFormModel,
getFormClass,
getFormActionBindProps: computed(
() =>
({ ...getProps.value, ...advanceState }) as InstanceType<typeof FormAction>['$props'],
),
fieldsIsAdvancedMap,
...formActionType,
};
},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-basic-form';

10
src/components/Form/src/componentMap.ts
View File

@@ -1,5 +1,5 @@
import type { Component } from 'vue';
import type { ComponentType } from './types/index';
import type { ComponentType } from './types';
/**
* Component list, register here to setting it in the form
@@ -27,10 +27,10 @@ import ApiTree from './components/ApiTree.vue';
import ApiTreeSelect from './components/ApiTreeSelect.vue';
import ApiCascader from './components/ApiCascader.vue';
import ApiTransfer from './components/ApiTransfer.vue';
import { BasicUpload, ImageUpload } from '/@/components/Upload';
import { StrengthMeter } from '/@/components/StrengthMeter';
import { IconPicker } from '/@/components/Icon';
import { CountdownInput } from '/@/components/CountDown';
import { BasicUpload, ImageUpload } from '@/components/Upload';
import { StrengthMeter } from '@/components/StrengthMeter';
import { IconPicker } from '@/components/Icon';
import { CountdownInput } from '@/components/CountDown';
const componentMap = new Map<ComponentType, Component>();

48
src/components/Form/src/components/ApiCascader.vue
View File

@@ -1,5 +1,5 @@
<template>
<a-cascader
<Cascader
v-model:value="state"
:options="options"
:load-data="loadData"
@@ -16,18 +16,18 @@
{{ t('component.form.apiSelectNotFound') }}
</span>
</template>
</a-cascader>
</Cascader>
</template>
<script lang="ts">
<script lang="ts" setup>
import { type Recordable } from '@vben/types';
import { defineComponent, PropType, ref, unref, watch, watchEffect } from 'vue';
import { PropType, ref, unref, watch, watchEffect } from 'vue';
import { Cascader } from 'ant-design-vue';
import { propTypes } from '/@/utils/propTypes';
import { isFunction } from '/@/utils/is';
import { propTypes } from '@/utils/propTypes';
import { isFunction } from '@/utils/is';
import { get, omit } from 'lodash-es';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
import { useRuleFormItem } from '@/hooks/component/useFormItem';
import { LoadingOutlined } from '@ant-design/icons-vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useI18n } from '@/hooks/web/useI18n';
interface Option {
value: string;
@@ -36,13 +36,10 @@
isLeaf?: boolean;
children?: Option[];
}
export default defineComponent({
name: 'ApiCascader',
components: {
LoadingOutlined,
[Cascader.name]: Cascader,
},
props: {
defineOptions({ name: 'ApiCascader' });
const props = defineProps({
value: {
type: Array,
},
@@ -70,9 +67,10 @@
displayRenderArray: {
type: Array,
},
},
emits: ['change', 'defaultChange'],
setup(props, { emit }) {
});
const emit = defineEmits(['change', 'defaultChange']);
const apiData = ref<any[]>([]);
const options = ref<Option[]>([]);
const loading = ref<boolean>(false);
@@ -80,7 +78,7 @@
const isFirstLoad = ref(true);
const { t } = useI18n();
// Embedded in the form, just use the hook binding to perform form verification
const [state] = useRuleFormItem(props, 'value', 'change', emitData);
const [state]: any = useRuleFormItem(props, 'value', 'change', emitData);
watch(
apiData,
@@ -185,16 +183,4 @@
}
return '';
}
return {
state,
options,
loading,
t,
handleChange,
loadData,
handleRenderDisplay,
};
},
});
</script>

42
src/components/Form/src/components/ApiRadioGroup.vue
View File

@@ -2,42 +2,36 @@
* @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
-->
<template>
<RadioGroup v-bind="attrs" v-model:value="state" button-style="solid">
<Radio.Group v-bind="attrs" v-model:value="state" button-style="solid">
<template v-for="item in getOptions" :key="`${item.value}`">
<RadioButton
<Radio.Button
v-if="props.isBtn"
:value="item.value"
:disabled="item.disabled"
@click="handleClick(item)"
>
{{ item.label }}
</RadioButton>
</Radio.Button>
<Radio v-else :value="item.value" :disabled="item.disabled" @click="handleClick(item)">
{{ item.label }}
</Radio>
</template>
</RadioGroup>
</Radio.Group>
</template>
<script lang="ts">
import { defineComponent, type PropType, ref, watchEffect, computed, unref, watch } from 'vue';
<script lang="ts" setup>
import { type PropType, ref, watchEffect, computed, unref, watch } from 'vue';
import { Radio } from 'ant-design-vue';
import { isFunction } from '/@/utils/is';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
import { isFunction } from '@/utils/is';
import { useRuleFormItem } from '@/hooks/component/useFormItem';
import { useAttrs } from '@vben/hooks';
import { propTypes } from '/@/utils/propTypes';
import { propTypes } from '@/utils/propTypes';
import { get, omit } from 'lodash-es';
import { useI18n } from '/@/hooks/web/useI18n';
type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean };
export default defineComponent({
name: 'ApiRadioGroup',
components: {
RadioGroup: Radio.Group,
RadioButton: Radio.Button,
Radio,
},
props: {
defineOptions({ name: 'ApiRadioGroup' });
const props = defineProps({
api: {
type: Function as PropType<(arg?: any | string) => Promise<OptionsItem[]>>,
default: null,
@@ -58,15 +52,15 @@
labelField: propTypes.string.def('label'),
valueField: propTypes.string.def('value'),
immediate: propTypes.bool.def(true),
},
emits: ['options-change', 'change'],
setup(props, { emit }) {
});
const emit = defineEmits(['options-change', 'change']);
const options = ref<OptionsItem[]>([]);
const loading = ref(false);
const isFirstLoad = ref(true);
const emitData = ref<any[]>([]);
const attrs = useAttrs();
const { t } = useI18n();
// Embedded in the form, just use the hook binding to perform form verification
const [state] = useRuleFormItem(props, 'value', 'change', emitData);
@@ -129,8 +123,4 @@
function handleClick(...args) {
emitData.value = args;
}
return { state, getOptions, attrs, loading, t, handleClick, props };
},
});
</script>

47
src/components/Form/src/components/ApiSelect.vue
View File

@@ -20,28 +20,22 @@
</template>
</Select>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, computed, unref, watch } from 'vue';
<script lang="ts" setup>
import { PropType, ref, computed, unref, watch } from 'vue';
import { Select } from 'ant-design-vue';
import type { SelectValue } from 'ant-design-vue/es/select';
import { isFunction } from '/@/utils/is';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
import { useAttrs } from '@vben/hooks';
import { isFunction } from '@/utils/is';
import { useRuleFormItem } from '@/hooks/component/useFormItem';
import { get, omit } from 'lodash-es';
import { LoadingOutlined } from '@ant-design/icons-vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { propTypes } from '/@/utils/propTypes';
import { useI18n } from '@/hooks/web/useI18n';
import { propTypes } from '@/utils/propTypes';
type OptionsItem = { label?: string; value?: string; disabled?: boolean; [name: string]: any };
export default defineComponent({
name: 'ApiSelect',
components: {
Select,
LoadingOutlined,
},
inheritAttrs: false,
props: {
defineOptions({ name: 'ApiSelect', inheritAttrs: false });
const props = defineProps({
value: { type: [Array, Object, String, Number] as PropType<SelectValue> },
numberToString: propTypes.bool,
api: {
@@ -60,15 +54,16 @@
type: Array<OptionsItem>,
default: [],
},
},
emits: ['options-change', 'change', 'update:value'],
setup(props, { emit }) {
const options = ref<OptionsItem[]>([]);
});
const emit = defineEmits(['options-change', 'change', 'update:value']);
const optionsRef = ref<OptionsItem[]>([]);
const loading = ref(false);
// 首次是否加载过了
const isFirstLoaded = ref(false);
const emitData = ref<OptionsItem[]>([]);
const attrs = useAttrs();
const { t } = useI18n();
// Embedded in the form, just use the hook binding to perform form verification
@@ -77,7 +72,7 @@
const getOptions = computed(() => {
const { labelField, valueField, numberToString } = props;
let data = unref(options).reduce((prev, next: any) => {
let data = unref(optionsRef).reduce((prev, next: any) => {
if (next) {
const value = get(next, valueField);
prev.push({
@@ -109,18 +104,18 @@
async function fetch() {
const api = props.api;
if (!api || !isFunction(api) || loading.value) return;
options.value = [];
optionsRef.value = [];
try {
loading.value = true;
const res = await api(props.params);
isFirstLoaded.value = true;
if (Array.isArray(res)) {
options.value = res;
optionsRef.value = res;
emitChange();
return;
}
if (props.resultField) {
options.value = get(res, props.resultField) || [];
optionsRef.value = get(res, props.resultField) || [];
}
emitChange();
} catch (error) {
@@ -149,8 +144,4 @@
function handleChange(_, ...args) {
emitData.value = args;
}
return { state, attrs, getOptions, loading, t, handleFetch, handleChange };
},
});
</script>

33
src/components/Form/src/components/ApiTransfer.vue
View File

@@ -12,19 +12,17 @@
/>
</template>
<script lang="ts">
import { computed, defineComponent, watch, ref, unref, watchEffect, PropType } from 'vue';
<script lang="ts" setup>
import { computed, watch, ref, unref, watchEffect, PropType } from 'vue';
import { Transfer } from 'ant-design-vue';
import { isFunction } from '/@/utils/is';
import { isFunction } from '@/utils/is';
import { get, omit } from 'lodash-es';
import { propTypes } from '/@/utils/propTypes';
import { useI18n } from '/@/hooks/web/useI18n';
import { propTypes } from '@/utils/propTypes';
import { TransferDirection, TransferItem } from 'ant-design-vue/lib/transfer';
export default defineComponent({
name: 'ApiTransfer',
components: { Transfer },
props: {
defineOptions({ name: 'ApiTransfer' });
const props = defineProps({
value: { type: Array as PropType<Array<string>> },
api: {
type: Function as PropType<(arg) => Promise<TransferItem[]>>,
@@ -46,19 +44,13 @@
selectedKeys: { type: Array as PropType<Array<string>> },
showSelectAll: { type: Boolean, default: false },
targetKeys: { type: Array as PropType<Array<string>> },
},
emits: ['options-change', 'change'],
setup(props, { attrs, emit }) {
});
const emit = defineEmits(['options-change', 'change']);
const _dataSource = ref<TransferItem[]>([]);
const _targetKeys = ref<string[]>([]);
const { t } = useI18n();
const getAttrs = computed(() => {
return {
...(!props.api ? { dataSource: unref(_dataSource) } : {}),
...attrs,
};
});
const getdataSource = computed(() => {
const { labelField, valueField } = props;
@@ -132,7 +124,4 @@
function emitChange() {
emit('options-change', unref(getdataSource));
}
return { getTargetKeys, getdataSource, t, getAttrs, handleChange };
},
});
</script>

34
src/components/Form/src/components/ApiTree.vue
View File

@@ -1,36 +1,37 @@
<template>
<a-tree v-bind="getAttrs" v-model:selectedKeys="state">
<Tree v-bind="getAttrs" v-model:selectedKeys="state">
<template #[item]="data" v-for="item in Object.keys($slots)">
<slot :name="item" v-bind="data || {}"></slot>
</template>
</a-tree>
</Tree>
</template>
<script lang="ts">
<script lang="ts" setup>
import { type Recordable, type AnyFunction } from '@vben/types';
import { type PropType, computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
import { type PropType, computed, watch, ref, onMounted, unref, useAttrs } from 'vue';
import { Tree, TreeProps } from 'ant-design-vue';
import { isArray, isFunction } from '/@/utils/is';
import { isArray, isFunction } from '@/utils/is';
import { get } from 'lodash-es';
import { propTypes } from '/@/utils/propTypes';
import { DataNode } from 'ant-design-vue/es/tree';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
import { useRuleFormItem } from '@/hooks/component/useFormItem';
export default defineComponent({
name: 'ApiTree',
components: { ATree: Tree },
props: {
defineOptions({ name: 'ApiTree' });
const props = defineProps({
api: { type: Function as PropType<(arg?: Recordable<any>) => Promise<Recordable<any>>> },
params: { type: Object },
immediate: { type: Boolean, default: true },
resultField: propTypes.string.def(''),
resultField: { type: String, default: '' },
afterFetch: { type: Function as PropType<AnyFunction> },
value: {
type: Array as PropType<TreeProps['selectedKeys']>,
},
},
emits: ['options-change', 'change', 'update:value'],
setup(props, { attrs, emit }) {
});
const emit = defineEmits(['options-change', 'change', 'update:value']);
const attrs = useAttrs();
const treeData = ref<DataNode[]>([]);
const isFirstLoaded = ref<Boolean>(false);
const loading = ref(false);
@@ -93,7 +94,4 @@
isFirstLoaded.value = true;
emit('options-change', treeData.value);
}
return { getAttrs, loading, state };
},
});
</script>

30
src/components/Form/src/components/ApiTreeSelect.vue
View File

@@ -1,5 +1,5 @@
<template>
<a-tree-select
<TreeSelect
v-bind="getAttrs"
@change="handleChange"
:field-names="fieldNames"
@@ -11,22 +11,21 @@
<template #suffixIcon v-if="loading">
<LoadingOutlined spin />
</template>
</a-tree-select>
</TreeSelect>
</template>
<script lang="ts">
<script lang="ts" setup>
import { type Recordable } from '@vben/types';
import { type PropType, computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
import { type PropType, computed, watch, ref, onMounted, unref, useAttrs } from 'vue';
import { TreeSelect } from 'ant-design-vue';
import { isArray, isFunction } from '/@/utils/is';
import { isArray, isFunction } from '@/utils/is';
import { get } from 'lodash-es';
import { propTypes } from '/@/utils/propTypes';
import { propTypes } from '@/utils/propTypes';
import { LoadingOutlined } from '@ant-design/icons-vue';
export default defineComponent({
name: 'ApiTreeSelect',
components: { ATreeSelect: TreeSelect, LoadingOutlined },
props: {
defineOptions({ name: 'ApiTreeSelect' });
const props = defineProps({
api: { type: Function as PropType<(arg?: Recordable<any>) => Promise<Recordable<any>>> },
params: { type: Object },
immediate: { type: Boolean, default: true },
@@ -35,9 +34,11 @@
labelField: propTypes.string.def('title'),
valueField: propTypes.string.def('value'),
childrenField: propTypes.string.def('children'),
},
emits: ['options-change', 'change', 'load-data'],
setup(props, { attrs, emit }) {
});
const emit = defineEmits(['options-change', 'change', 'load-data']);
const attrs = useAttrs();
const treeData = ref<Recordable<any>[]>([]);
const isFirstLoaded = ref<Boolean>(false);
const loading = ref(false);
@@ -106,7 +107,4 @@
isFirstLoaded.value = true;
emit('options-change', treeData.value);
}
return { getAttrs, loading, handleChange, fieldNames, onLoadData };
},
});
</script>

57
src/components/Form/src/components/FormAction.vue
View File

@@ -1,7 +1,7 @@
<template>
<a-col v-bind="actionColOpt" v-if="showActionButtonGroup">
<Col v-bind="actionColOpt" v-if="showActionButtonGroup">
<div style="width: 100%" :style="{ textAlign: actionColOpt.style.textAlign }">
<FormItem>
<Form.Item>
<slot name="resetBefore"></slot>
<Button
type="default"
@@ -35,31 +35,25 @@
<BasicArrow class="ml-1" :expand="!isAdvanced" up />
</Button>
<slot name="advanceAfter"></slot>
</FormItem>
</Form.Item>
</div>
</a-col>
</Col>
</template>
<script lang="ts">
import type { ColEx } from '../types/index';
import { defineComponent, computed, PropType } from 'vue';
<script lang="ts" setup>
import type { ColEx } from '../types';
import { computed, PropType } from 'vue';
import { Form, Col } from 'ant-design-vue';
import { Button, ButtonProps } from '/@/components/Button';
import { BasicArrow } from '/@/components/Basic';
import { Button, ButtonProps } from '@/components/Button';
import { BasicArrow } from '@/components/Basic';
import { useFormContext } from '../hooks/useFormContext';
import { useI18n } from '/@/hooks/web/useI18n';
import { propTypes } from '/@/utils/propTypes';
import { useI18n } from '@/hooks/web/useI18n';
import { propTypes } from '@/utils/propTypes';
type ButtonOptions = Partial<ButtonProps> & { text: string };
export default defineComponent({
name: 'BasicFormAction',
components: {
FormItem: Form.Item,
Button,
BasicArrow,
[Col.name]: Col,
},
props: {
defineOptions({ name: 'BasicFormAction' });
const props = defineProps({
showActionButtonGroup: propTypes.bool.def(true),
showResetButton: propTypes.bool.def(true),
showSubmitButton: propTypes.bool.def(true),
@@ -79,17 +73,17 @@
actionSpan: propTypes.number.def(6),
isAdvanced: propTypes.bool,
hideAdvanceBtn: propTypes.bool,
},
emits: ['toggle-advanced'],
setup(props, { emit }) {
});
const emit = defineEmits(['toggle-advanced']);
const { t } = useI18n();
const { resetAction, submitAction } = useFormContext();
const actionColOpt = computed(() => {
const { showAdvancedButton, actionSpan: span, actionColOptions } = props;
const actionSpan = 24 - span;
const advancedSpanObj = showAdvancedButton
? { span: actionSpan < 6 ? 24 : actionSpan }
: {};
const advancedSpanObj = showAdvancedButton ? { span: actionSpan < 6 ? 24 : actionSpan } : {};
const actionColOpt: Partial<ColEx> = {
style: { textAlign: 'right' },
span: showAdvancedButton ? 6 : 4,
@@ -120,15 +114,4 @@
function toggleAdvanced() {
emit('toggle-advanced');
}
return {
t,
actionColOpt,
getResetBtnOptions,
getSubmitBtnOptions,
toggleAdvanced,
...useFormContext(),
};
},
});
</script>

10
src/components/Form/src/components/FormItem.vue
View File

@@ -9,12 +9,12 @@
type FormSchemaInner as FormSchema,
} from '../types/form';
import type { Rule as ValidationRule } from 'ant-design-vue/lib/form/interface';
import type { TableActionType } from '/@/components/Table';
import type { TableActionType } from '@/components/Table';
import { Col, Divider, Form } from 'ant-design-vue';
import { componentMap } from '../componentMap';
import { BasicHelp } from '/@/components/Basic';
import { isBoolean, isFunction, isNull } from '/@/utils/is';
import { getSlot } from '/@/utils/helper/tsxHelper';
import { BasicHelp } from '@/components/Basic';
import { isBoolean, isFunction, isNull } from '@/utils/is';
import { getSlot } from '@/utils/helper/tsxHelper';
import {
createPlaceholderMessage,
NO_AUTO_LINK_COMPONENTS,
@@ -22,7 +22,7 @@
} from '../helper';
import { cloneDeep, upperFirst } from 'lodash-es';
import { useItemLabelWidth } from '../hooks/useLabelWidth';
import { useI18n } from '/@/hooks/web/useI18n';
import { useI18n } from '@/hooks/web/useI18n';
export default defineComponent({
name: 'BasicFormItem',

37
src/components/Form/src/components/RadioButtonGroup.vue
View File

@@ -2,31 +2,27 @@
* @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
-->
<template>
<RadioGroup v-bind="attrs" v-model:value="state" button-style="solid">
<Radio.Group v-bind="attrs" v-model:value="state" button-style="solid">
<template v-for="item in getOptions" :key="`${item.value}`">
<RadioButton :value="item.value" :disabled="item.disabled" @click="handleClick(item)">
<Radio.Button :value="item.value" :disabled="item.disabled" @click="handleClick(item)">
{{ item.label }}
</RadioButton>
</Radio.Button>
</template>
</RadioGroup>
</Radio.Group>
</template>
<script lang="ts">
import { defineComponent, PropType, computed, ref } from 'vue';
<script lang="ts" setup>
import { PropType, computed, ref } from 'vue';
import { Radio } from 'ant-design-vue';
import { isString } from '/@/utils/is';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
import { isString } from '@/utils/is';
import { useRuleFormItem } from '@/hooks/component/useFormItem';
import { useAttrs } from '@vben/hooks';
type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean };
type RadioItem = string | OptionsItem;
export default defineComponent({
name: 'RadioButtonGroup',
components: {
RadioGroup: Radio.Group,
RadioButton: Radio.Button,
},
props: {
defineOptions({ name: 'RadioButtonGroup' });
const props = defineProps({
value: {
type: [String, Number, Boolean] as PropType<string | number | boolean>,
},
@@ -34,9 +30,10 @@
type: Array as PropType<RadioItem[]>,
default: () => [],
},
},
emits: ['change'],
setup(props) {
});
// const emit = defineEmits(['change']);
const attrs = useAttrs();
const emitData = ref<any[]>([]);
// Embedded in the form, just use the hook binding to perform form verification
@@ -56,8 +53,4 @@
function handleClick(...args) {
emitData.value = args;
}
return { state, getOptions, attrs, handleClick };
},
});
</script>

8
src/components/Form/src/helper.ts
View File

@@ -1,8 +1,8 @@
import type { Rule as ValidationRule } from 'ant-design-vue/lib/form/interface';
import type { ComponentType } from './types/index';
import { useI18n } from '/@/hooks/web/useI18n';
import { dateUtil } from '/@/utils/dateUtil';
import { isNumber, isObject } from '/@/utils/is';
import type { ComponentType } from './types';
import { useI18n } from '@/hooks/web/useI18n';
import { dateUtil } from '@/utils/dateUtil';
import { isNumber, isObject } from '@/utils/is';
const { t } = useI18n();

4
src/components/Form/src/hooks/useAdvanced.ts
View File

@@ -2,8 +2,8 @@ import type { ColEx } from '../types';
import type { AdvanceState } from '../types/hooks';
import { ComputedRef, getCurrentInstance, Ref, shallowReactive, computed, unref, watch } from 'vue';
import type { FormProps, FormSchemaInner as FormSchema } from '../types/form';
import { isBoolean, isFunction, isNumber, isObject } from '/@/utils/is';
import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
import { isBoolean, isFunction, isNumber, isObject } from '@/utils/is';
import { useBreakpoint } from '@/hooks/event/useBreakpoint';
import { useDebounceFn } from '@vueuse/core';
const BASIC_COL_LEN = 24;

2
src/components/Form/src/hooks/useComponentRegister.ts
View File

@@ -1,4 +1,4 @@
import type { ComponentType } from '../types/index';
import type { ComponentType } from '../types';
import { tryOnUnmounted } from '@vueuse/core';
import { add, del } from '../componentMap';
import type { Component } from 'vue';

6
src/components/Form/src/hooks/useForm.ts
View File

@@ -7,9 +7,9 @@ import type {
import type { NamePath } from 'ant-design-vue/lib/form/interface';
import type { DynamicProps } from '/#/utils';
import { ref, onUnmounted, unref, nextTick, watch } from 'vue';
import { isProdMode } from '/@/utils/env';
import { error } from '/@/utils/log';
import { getDynamicProps } from '/@/utils';
import { isProdMode } from '@/utils/env';
import { error } from '@/utils/log';
import { getDynamicProps } from '@/utils';
export declare type ValidateFields = (nameList?: NamePath[]) => Promise<Recordable>;

2
src/components/Form/src/hooks/useFormContext.ts
View File

@@ -1,5 +1,5 @@
import type { InjectionKey } from 'vue';
import { createContext, useContext } from '/@/hooks/core/useContext';
import { createContext, useContext } from '@/hooks/core/useContext';
export interface FormContextProps {
resetAction: () => Promise<void>;

8
src/components/Form/src/hooks/useFormEvents.ts
View File

@@ -2,12 +2,12 @@ import type { ComputedRef, Ref } from 'vue';
import type { FormProps, FormSchemaInner as FormSchema, FormActionType } from '../types/form';
import type { NamePath } from 'ant-design-vue/lib/form/interface';
import { unref, toRaw, nextTick } from 'vue';
import { isArray, isFunction, isObject, isString, isDef, isNil } from '/@/utils/is';
import { deepMerge } from '/@/utils';
import { isArray, isFunction, isObject, isString, isDef, isNil } from '@/utils/is';
import { deepMerge } from '@/utils';
import { dateItemType, handleInputNumberValue, defaultValueComponents } from '../helper';
import { dateUtil } from '/@/utils/dateUtil';
import { dateUtil } from '@/utils/dateUtil';
import { cloneDeep, set, uniqBy, get } from 'lodash-es';
import { error } from '/@/utils/log';
import { error } from '@/utils/log';
interface UseFormActionContext {
emit: EmitType;

4
src/components/Form/src/hooks/useFormValues.ts
View File

@@ -1,5 +1,5 @@
import { isArray, isFunction, isEmpty, isObject, isString, isNil } from '/@/utils/is';
import { dateUtil } from '/@/utils/dateUtil';
import { isArray, isFunction, isEmpty, isObject, isString, isNil } from '@/utils/is';
import { dateUtil } from '@/utils/dateUtil';
import { unref } from 'vue';
import type { Ref, ComputedRef } from 'vue';
import type { FormProps, FormSchemaInner as FormSchema } from '../types/form';

2
src/components/Form/src/hooks/useLabelWidth.ts
View File

@@ -1,7 +1,7 @@
import type { Ref } from 'vue';
import { computed, unref } from 'vue';
import type { FormProps, FormSchemaInner as FormSchema } from '../types/form';
import { isNumber } from '/@/utils/is';
import { isNumber } from '@/utils/is';
export function useItemLabelWidth(schemaItemRef: Ref<FormSchema>, propsRef: Ref<FormProps>) {
return computed(() => {

4
src/components/Form/src/props.ts
View File

@@ -1,10 +1,10 @@
import type { FieldMapToTime, FormSchema } from './types/form';
import type { CSSProperties, PropType } from 'vue';
import type { ColEx } from './types';
import type { TableActionType } from '/@/components/Table';
import type { TableActionType } from '@/components/Table';
import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
import type { RowProps } from 'ant-design-vue/lib/grid/Row';
import { propTypes } from '/@/utils/propTypes';
import { propTypes } from '@/utils/propTypes';
export const basicProps = {
model: {

6
src/components/Form/src/types/form.ts
View File

@@ -1,9 +1,9 @@
import type { NamePath, RuleObject } from 'ant-design-vue/lib/form/interface';
import type { VNode, CSSProperties } from 'vue';
import type { ButtonProps as AntdButtonProps } from '/@/components/Button';
import type { ButtonProps as AntdButtonProps } from '@/components/Button';
import type { FormItem } from './formItem';
import type { ColEx, ComponentType } from './index';
import type { TableActionType } from '/@/components/Table/src/types/table';
import type { ColEx, ComponentType } from './';
import type { TableActionType } from '@/components/Table/src/types/table';
import type { RowProps } from 'ant-design-vue/lib/grid/Row';
export type FieldMapToTime = [string, [string, string], (string | [string, string])?][];

33
src/components/Icon/Icon.vue
View File

@@ -13,28 +13,19 @@
:style="getWrapStyle"
></span>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { PropType } from 'vue';
import {
defineComponent,
ref,
watch,
onMounted,
nextTick,
unref,
computed,
CSSProperties,
} from 'vue';
import { ref, watch, onMounted, nextTick, unref, computed, CSSProperties } from 'vue';
import SvgIcon from './src/SvgIcon.vue';
import Iconify from '@purge-icons/generated';
import { isString } from '/@/utils/is';
import { propTypes } from '/@/utils/propTypes';
import { isString } from '@/utils/is';
import { propTypes } from '@/utils/propTypes';
const SVG_END_WITH_FLAG = '|svg';
export default defineComponent({
name: 'Icon',
components: { SvgIcon },
props: {
defineOptions({ name: 'Icon' });
const props = defineProps({
// icon name
icon: propTypes.string,
// icon color
@@ -46,8 +37,8 @@
},
spin: propTypes.bool.def(false),
prefix: propTypes.string.def(''),
},
setup(props) {
});
const elRef = ref(null);
const isSvgIcon = computed(() => props.icon?.endsWith(SVG_END_WITH_FLAG));
@@ -94,10 +85,6 @@
watch(() => props.icon, update, { flush: 'post' });
onMounted(update);
return { elRef, getWrapStyle, isSvgIcon, getSvgIcon };
},
});
</script>
<style lang="less">
.app-iconify {

33
src/components/Icon/src/IconPicker.vue
View File

@@ -1,5 +1,5 @@
<template>
<a-input
<Input
readonly
:style="{ width }"
:placeholder="t('component.icon.placeholder')"
@@ -8,7 +8,7 @@
@click="triggerPopover"
>
<template #addonAfter>
<a-popover
<Popover
placement="bottomLeft"
trigger="click"
v-model="visible"
@@ -16,7 +16,7 @@
>
<template #title>
<div class="flex justify-between">
<a-input
<Input
:placeholder="t('component.icon.search')"
@change="debounceHandleSearchChange"
allowClear
@@ -36,14 +36,13 @@
@click="handleClick(icon)"
:title="icon"
>
<!-- <Icon :icon="icon" :prefix="prefix" /> -->
<SvgIcon v-if="isSvgMode" :name="icon" />
<Icon :icon="icon" v-else />
</li>
</ul>
</ScrollContainer>
<div class="flex py-2 items-center justify-center" v-if="getTotal >= pageSize">
<a-pagination
<Pagination
showLessItems
size="small"
:pageSize="pageSize"
@@ -52,8 +51,8 @@
/>
</div>
</div>
<template v-else
><div class="p-5"><a-empty /></div>
<template v-else>
<div class="p-5"><Empty /> </div>
</template>
</template>
@@ -70,30 +69,24 @@
v-else
/>
</div>
</a-popover>
</Popover>
</template>
</a-input>
</Input>
</template>
<script lang="ts" setup>
import { ref, watchEffect, watch } from 'vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { ScrollContainer } from '/@/components/Container';
import { useDesign } from '@/hooks/web/useDesign';
import { ScrollContainer } from '@/components/Container';
import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
import Icon from '../Icon.vue';
import SvgIcon from './SvgIcon.vue';
import iconsData from '../data/icons.data';
import { usePagination } from '/@/hooks/web/usePagination';
import { usePagination } from '@/hooks/web/usePagination';
import { useDebounceFn } from '@vueuse/core';
import { useI18n } from '/@/hooks/web/useI18n';
import { useI18n } from '@/hooks/web/useI18n';
import svgIcons from 'virtual:svg-icons-names';
import { copyText } from '/@/utils/copyTextToClipboard';
// 没有使用别名引入，是因为WebStorm当前版本还不能正确识别，会报unused警告
const AInput = Input;
const APopover = Popover;
const APagination = Pagination;
const AEmpty = Empty;
import { copyText } from '@/utils/copyTextToClipboard';
function getIcons() {
const prefix = iconsData.prefix;

19
src/components/Icon/src/SvgIcon.vue
View File

@@ -7,14 +7,14 @@
<use :xlink:href="symbolId" />
</svg>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { CSSProperties } from 'vue';
import { defineComponent, computed } from 'vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { computed } from 'vue';
import { useDesign } from '@/hooks/web/useDesign';
export default defineComponent({
name: 'SvgIcon',
props: {
defineOptions({ name: 'SvgIcon' });
const props = defineProps({
prefix: {
type: String,
default: 'icon',
@@ -31,8 +31,8 @@
type: Boolean,
default: false,
},
},
setup(props) {
});
const { prefixCls } = useDesign('svg-icon');
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
@@ -45,9 +45,6 @@
height: s,
};
});
return { symbolId, prefixCls, getStyle };
},
});
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-svg-icon';

14
src/components/Loading/src/Loading.vue
View File

@@ -8,15 +8,14 @@
<Spin v-bind="$attrs" :tip="tip" :size="size" :spinning="loading" />
</section>
</template>
<script lang="ts">
import { PropType, defineComponent } from 'vue';
<script lang="ts" setup>
import type { PropType } from 'vue';
import { Spin } from 'ant-design-vue';
import { SizeEnum } from '/@/enums/sizeEnum';
import { SizeEnum } from '@/enums/sizeEnum';
export default defineComponent({
name: 'Loading',
components: { Spin },
props: {
defineOptions({ name: 'Loading' });
defineProps({
tip: {
type: String as PropType<string>,
default: '',
@@ -42,7 +41,6 @@
theme: {
type: String as PropType<'dark' | 'light'>,
},
},
});
</script>
<style lang="less" scoped>

2
src/components/Loading/src/typing.ts
View File

@@ -1,4 +1,4 @@
import { SizeEnum } from '/@/enums/sizeEnum';
import { SizeEnum } from '@/enums/sizeEnum';
export interface LoadingProps {
tip: string;

2
src/components/Markdown/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import markDown from './src/Markdown.vue';
import markDownViewer from './src/MarkdownViewer.vue';

29
src/components/Markdown/src/Markdown.vue
View File

@@ -1,10 +1,9 @@
<template>
<div ref="wrapRef"></div>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { Ref } from 'vue';
import {
defineComponent,
ref,
unref,
nextTick,
@@ -12,25 +11,29 @@
watch,
onBeforeUnmount,
onDeactivated,
useAttrs,
} from 'vue';
import Vditor from 'vditor';
import 'vditor/dist/index.css';
import { useLocale } from '/@/locales/useLocale';
import { useLocale } from '@/locales/useLocale';
import { useModalContext } from '../../Modal';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { onMountedOrActivated } from '@vben/hooks';
import { getTheme } from './getTheme';
type Lang = 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' | undefined;
export default defineComponent({
inheritAttrs: false,
props: {
defineOptions({ inheritAttrs: false });
const props = defineProps({
height: { type: Number, default: 360 },
value: { type: String, default: '' },
},
emits: ['change', 'get', 'update:value'],
setup(props, { attrs, emit }) {
});
const emit = defineEmits(['change', 'get', 'update:value']);
const attrs = useAttrs();
const wrapRef = ref(null);
const vditorRef = ref(null) as Ref<Vditor | null>;
const initedRef = ref(false);
@@ -151,10 +154,4 @@
onBeforeUnmount(destroy);
onDeactivated(destroy);
return {
wrapRef,
...instance,
};
},
});
</script>

2
src/components/Markdown/src/MarkdownViewer.vue
View File

@@ -6,7 +6,7 @@
import { onBeforeUnmount, onDeactivated, Ref, ref, unref, watch } from 'vue';
import VditorPreview from 'vditor/dist/method.min';
import { onMountedOrActivated } from '@vben/hooks';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { getTheme } from './getTheme';
const props = defineProps({

53
src/components/Menu/src/BasicMenu.vue
View File

@@ -1,7 +1,7 @@
<template>
<Menu
:selectedKeys="selectedKeys"
:defaultSelectedKeys="defaultSelectedKeys"
:selectedKeys="menuState.selectedKeys"
:defaultSelectedKeys="menuState.defaultSelectedKeys"
:mode="mode"
:openKeys="getOpenKeys"
:inlineIndent="inlineIndent"
@@ -17,32 +17,29 @@
</template>
</Menu>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { MenuState } from './types';
import { computed, defineComponent, unref, reactive, watch, toRefs, ref } from 'vue';
import { computed, unref, reactive, watch, toRefs, ref } from 'vue';
import { Menu, MenuProps } from 'ant-design-vue';
import BasicSubMenuItem from './components/BasicSubMenuItem.vue';
import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
import { MenuModeEnum, MenuTypeEnum } from '@/enums/menuEnum';
import { useOpenKeys } from './useOpenKeys';
import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router';
import { isFunction } from '/@/utils/is';
import { isFunction } from '@/utils/is';
import { basicProps } from './props';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { REDIRECT_NAME } from '/@/router/constant';
import { useDesign } from '/@/hooks/web/useDesign';
import { getCurrentParentPath } from '/@/router/menus';
import { listenerRouteChange } from '/@/logics/mitt/routeChange';
import { getAllParentPath } from '/@/router/helper/menuHelper';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { REDIRECT_NAME } from '@/router/constant';
import { useDesign } from '@/hooks/web/useDesign';
import { getCurrentParentPath } from '@/router/menus';
import { listenerRouteChange } from '@/logics/mitt/routeChange';
import { getAllParentPath } from '@/router/helper/menuHelper';
defineOptions({ name: 'BasicMenu' });
const props = defineProps(basicProps);
const emit = defineEmits(['menuClick']);
export default defineComponent({
name: 'BasicMenu',
components: {
Menu,
BasicSubMenuItem,
},
props: basicProps,
emits: ['menuClick'],
setup(props, { emit }) {
const isClickGo = ref(false);
const currentActiveMenu = ref('');
@@ -135,8 +132,7 @@
return;
}
const path =
(route || unref(currentRoute)).meta?.currentActiveMenu ||
(route || unref(currentRoute)).path;
(route || unref(currentRoute)).meta?.currentActiveMenu || (route || unref(currentRoute)).path;
setOpenKeys(path);
if (unref(currentActiveMenu)) return;
if (props.isHorizontal && unref(getSplit)) {
@@ -147,17 +143,6 @@
menuState.selectedKeys = parentPaths;
}
}
return {
handleMenuClick,
getInlineCollapseOptions,
getMenuClass,
handleOpenChange,
getOpenKeys,
...toRefs(menuState),
};
},
});
</script>
<style lang="less">
@import url('./index.less');

19
src/components/Menu/src/components/BasicMenuItem.vue
View File

@@ -1,21 +1,14 @@
<template>
<MenuItem :key="item.path">
<Menu.Item :key="item.path">
<MenuItemContent v-bind="$props" :item="item" />
</MenuItem>
</Menu.Item>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { Menu } from 'ant-design-vue';
import { itemProps } from '../props';
import MenuItemContent from './MenuItemContent.vue';
export default defineComponent({
name: 'BasicMenuItem',
components: { MenuItem: Menu.Item, MenuItemContent },
props: itemProps,
setup() {
return {};
},
});
defineOptions({ name: 'BasicMenuItem' });
defineProps(itemProps);
</script>

32
src/components/Menu/src/components/BasicSubMenuItem.vue
View File

@@ -1,6 +1,6 @@
<template>
<BasicMenuItem v-if="!menuHasChildren(item) && getShowMenu" v-bind="$props" />
<SubMenu
<Menu.SubMenu
v-if="menuHasChildren(item) && getShowMenu"
:class="[theme]"
:key="`submenu-${item.path}`"
@@ -13,28 +13,19 @@
<template v-for="childrenItem in item.children || []" :key="childrenItem.path">
<BasicSubMenuItem v-bind="$props" :item="childrenItem" />
</template>
</SubMenu>
</Menu.SubMenu>
</template>
<script lang="ts">
import type { Menu as MenuType } from '/@/router/types';
import { defineComponent, computed } from 'vue';
<script lang="ts" setup>
import type { Menu as MenuType } from '@/router/types';
import { computed } from 'vue';
import { Menu } from 'ant-design-vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { itemProps } from '../props';
import BasicMenuItem from './BasicMenuItem.vue';
import MenuItemContent from './MenuItemContent.vue';
export default defineComponent({
name: 'BasicSubMenuItem',
isSubMenu: true,
components: {
BasicMenuItem,
SubMenu: Menu.SubMenu,
MenuItemContent,
},
props: itemProps,
setup(props) {
const { prefixCls } = useDesign('basic-menu-item');
defineOptions({ name: 'BasicSubMenuItem', isSubMenu: true });
const props = defineProps(itemProps);
const getShowMenu = computed(() => !props.item.meta?.hideMenu);
function menuHasChildren(menuTreeItem: MenuType): boolean {
@@ -45,11 +36,4 @@
menuTreeItem.children.length > 0
);
}
return {
prefixCls,
menuHasChildren,
getShowMenu,
};
},
});
</script>

30
src/components/Menu/src/components/MenuItemContent.vue
View File

@@ -5,33 +5,21 @@
{{ getI18nName }}
</span>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
<script lang="ts" setup>
import { computed } from 'vue';
import Icon from '@/components/Icon/Icon.vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '/@/hooks/web/useDesign';
import { useI18n } from '@/hooks/web/useI18n';
import { useDesign } from '@/hooks/web/useDesign';
import { contentProps } from '../props';
const { t } = useI18n();
defineOptions({ name: 'MenuItemContent' });
export default defineComponent({
name: 'MenuItemContent',
components: {
Icon,
},
props: contentProps,
setup(props) {
const props = defineProps(contentProps);
const { t } = useI18n();
const { prefixCls } = useDesign('basic-menu-item-content');
const getI18nName = computed(() => t(props.item?.name));
const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon));
const getImg = computed(() => props.item?.img);
return {
prefixCls,
getI18nName,
getIcon,
getImg,
};
},
});
</script>

8
src/components/Menu/src/props.ts
View File

@@ -1,9 +1,9 @@
import type { Menu } from '/@/router/types';
import type { Menu } from '@/router/types';
import type { PropType } from 'vue';
import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
import { ThemeEnum } from '/@/enums/appEnum';
import { propTypes } from '/@/utils/propTypes';
import { MenuModeEnum, MenuTypeEnum } from '@/enums/menuEnum';
import { ThemeEnum } from '@/enums/appEnum';
import { propTypes } from '@/utils/propTypes';
import type { Key } from './types';
import type { MenuTheme } from 'ant-design-vue';
import type { MenuMode } from 'ant-design-vue/lib/menu/src/interface';

6
src/components/Menu/src/useOpenKeys.ts
View File

@@ -1,11 +1,11 @@
import { MenuModeEnum } from '/@/enums/menuEnum';
import { MenuModeEnum } from '@/enums/menuEnum';
import type { Menu as MenuType } from '/@/router/types';
import type { MenuState, Key } from './types';
import { computed, Ref, toRaw, unref } from 'vue';
import { useTimeoutFn } from '@vben/hooks';
import { uniq } from 'lodash-es';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { getAllParentPath } from '/@/router/helper/menuHelper';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { getAllParentPath } from '@/router/helper/menuHelper';
export function useOpenKeys(
menuState: MenuState,

2
src/components/Modal/index.ts
View File

@@ -1,4 +1,4 @@
import { withInstall } from '/@/utils';
import { withInstall } from '@/utils';
import './src/index.less';
import basicModal from './src/BasicModal.vue';

51
src/components/Modal/src/BasicModal.vue
View File

@@ -48,11 +48,9 @@
</template>
</Modal>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { ModalProps, ModalMethods } from './typing';
import {
defineComponent,
computed,
ref,
watch,
@@ -61,26 +59,34 @@
toRef,
getCurrentInstance,
nextTick,
useAttrs,
} from 'vue';
import Modal from './components/Modal';
import ModalWrapper from './components/ModalWrapper.vue';
import ModalClose from './components/ModalClose.vue';
import ModalFooter from './components/ModalFooter.vue';
import ModalHeader from './components/ModalHeader.vue';
import { isFunction } from '/@/utils/is';
import { deepMerge } from '/@/utils';
import { isFunction } from '@/utils/is';
import { deepMerge } from '@/utils';
import { basicProps } from './props';
import { useFullScreen } from './hooks/useModalFullScreen';
import { omit } from 'lodash-es';
import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '@/hooks/web/useDesign';
export default defineComponent({
name: 'BasicModal',
components: { Modal, ModalWrapper, ModalClose, ModalFooter, ModalHeader },
inheritAttrs: false,
props: basicProps,
emits: ['open-change', 'height-change', 'cancel', 'ok', 'register', 'update:open'],
setup(props, { emit, attrs }) {
defineOptions({ name: 'BasicModal', inheritAttrs: false });
const props = defineProps(basicProps);
const emit = defineEmits([
'open-change',
'height-change',
'cancel',
'ok',
'register',
'update:open',
]);
const attrs = useAttrs();
const openRef = ref(false);
const propsRef = ref<Partial<ModalProps> | null>(null);
const modalWrapperRef = ref<any>(null);
@@ -221,23 +227,4 @@
e.stopPropagation();
handleFullScreen(e);
}
return {
handleCancel,
getBindValue,
getProps,
handleFullScreen,
fullScreenRef,
getMergeProps,
handleOk,
openRef,
omit,
modalWrapperRef,
handleExtHeight,
handleHeightChange,
handleTitleDbClick,
getWrapperHeight,
};
},
});
</script>

2
src/components/Modal/src/components/Modal.tsx
View File

@@ -3,7 +3,7 @@ import { defineComponent, toRefs, unref } from 'vue';
import { basicProps } from '../props';
import { useModalDragMove } from '../hooks/useModalDrag';
import { useAttrs } from '@vben/hooks';
import { extendSlots } from '/@/utils/helper/tsxHelper';
import { extendSlots } from '@/utils/helper/tsxHelper';
export default defineComponent({
name: 'Modal',

32
src/components/Modal/src/components/ModalClose.vue
View File

@@ -13,22 +13,22 @@
</Tooltip>
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
<script lang="ts" setup>
import { computed } from 'vue';
import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { Tooltip } from 'ant-design-vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '@/hooks/web/useDesign';
import { useI18n } from '@/hooks/web/useI18n';
export default defineComponent({
name: 'ModalClose',
components: { Tooltip, FullscreenExitOutlined, FullscreenOutlined, CloseOutlined },
props: {
defineOptions({ name: 'ModalClose' });
const props = defineProps({
canFullscreen: { type: Boolean, default: true },
fullScreen: { type: Boolean },
},
emits: ['cancel', 'fullscreen'],
setup(props, { emit }) {
});
const emit = defineEmits(['cancel', 'fullscreen']);
const { prefixCls } = useDesign('basic-modal-close');
const { t } = useI18n();
@@ -51,16 +51,6 @@
e?.preventDefault();
emit('fullscreen');
}
return {
t,
getClass,
prefixCls,
handleCancel,
handleFullScreen,
};
},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-basic-modal-close';

19
src/components/Modal/src/components/ModalFooter.vue
View File

@@ -17,16 +17,15 @@
<slot name="appendFooter"></slot>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { basicProps } from '../props';
export default defineComponent({
name: 'BasicModalFooter',
props: basicProps,
emits: ['ok', 'cancel'],
setup(_, { emit }) {
defineOptions({ name: 'BasicModalFooter' });
defineProps(basicProps);
const emit = defineEmits(['ok', 'cancel']);
function handleOk(e: Event) {
emit('ok', e);
}
@@ -34,8 +33,4 @@
function handleCancel(e: Event) {
emit('cancel', e);
}
return { handleOk, handleCancel };
},
});
</script>

13
src/components/Modal/src/components/ModalHeader.vue
View File

@@ -3,19 +3,16 @@
{{ title }}
</BasicTitle>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
import { BasicTitle } from '/@/components/Basic';
import { BasicTitle } from '@/components/Basic';
export default defineComponent({
name: 'BasicModalHeader',
components: { BasicTitle },
props: {
defineOptions({ name: 'BasicModalHeader' });
defineProps({
helpMessage: {
type: [String, Array] as PropType<string | string[]>,
},
title: { type: String },
},
});
</script>

36
src/components/Modal/src/components/ModalWrapper.vue
View File

@@ -5,26 +5,18 @@
</div>
</ScrollContainer>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { CSSProperties } from 'vue';
import {
defineComponent,
computed,
ref,
watchEffect,
unref,
watch,
onMounted,
nextTick,
onUnmounted,
} from 'vue';
import { computed, ref, watchEffect, unref, watch, onMounted, nextTick, onUnmounted } from 'vue';
import { useWindowSizeFn } from '@vben/hooks';
import { type AnyFunction } from '@vben/types';
import { ScrollContainer } from '/@/components/Container';
import { ScrollContainer } from '@/components/Container';
import { createModalContext } from '../hooks/useModalContext';
import { useMutationObserver } from '@vueuse/core';
const props = {
defineOptions({ name: 'ModalWrapper', inheritAttrs: false });
const props = defineProps({
loading: { type: Boolean },
useWrapper: { type: Boolean, default: true },
modalHeaderHeight: { type: Number, default: 57 },
@@ -35,20 +27,14 @@
open: { type: Boolean },
fullScreen: { type: Boolean },
loadingTip: { type: String },
};
});
const emit = defineEmits(['height-change', 'ext-height']);
export default defineComponent({
name: 'ModalWrapper',
components: { ScrollContainer },
inheritAttrs: false,
props,
emits: ['height-change', 'ext-height'],
setup(props, { emit }) {
const wrapperRef = ref(null);
const spinRef = ref(null);
const realHeightRef = ref(0);
const minRealHeightRef = ref(0);
const realHeight = ref(0);
let stopElResizeFn: AnyFunction = () => {};
@@ -164,7 +150,5 @@
}
}
return { wrapperRef, spinRef, spinStyle, scrollTop, setModalHeight, realHeight };
},
});
defineExpose({ scrollTop });
</script>

6
src/components/Modal/src/hooks/useModal.ts
View File

@@ -16,11 +16,11 @@ import {
toRaw,
computed,
} from 'vue';
import { isProdMode } from '/@/utils/env';
import { isFunction } from '/@/utils/is';
import { isProdMode } from '@/utils/env';
import { isFunction } from '@/utils/is';
import { isEqual } from 'lodash-es';
import { tryOnUnmounted } from '@vueuse/core';
import { error } from '/@/utils/log';
import { error } from '@/utils/log';
const dataTransfer = reactive<any>({});

Some files were not shown because too many files have changed in this diff Show More