diff --git a/src/components/Application/src/search/AppSearch.vue b/src/components/Application/src/search/AppSearch.vue index 3048621a..69f64a83 100644 --- a/src/components/Application/src/search/AppSearch.vue +++ b/src/components/Application/src/search/AppSearch.vue @@ -24,7 +24,7 @@ export default defineComponent({ default: () => <SearchOutlined />, }} </Tooltip> - <AppSearchModal onClose={changeModal.bind(null, false)} visible={unref(showModal)} /> + <AppSearchModal onClose={changeModal.bind(null, false)} open={unref(showModal)} /> </div> ) } diff --git a/src/components/Application/src/search/AppSearchModal.vue b/src/components/Application/src/search/AppSearchModal.vue index dbf22af5..a6534e0f 100644 --- a/src/components/Application/src/search/AppSearchModal.vue +++ b/src/components/Application/src/search/AppSearchModal.vue @@ -11,7 +11,7 @@ import { useI18n } from '@/hooks/web/useI18n' import { useAppInject } from '@/hooks/web/useAppInject' const props = defineProps({ - visible: { type: Boolean }, + open: { type: Boolean }, }) const emit = defineEmits(['close']) @@ -38,9 +38,9 @@ const getClass = computed(() => { }) watch( - () => props.visible, - (visible: boolean) => { - visible + () => props.open, + (open: boolean) => { + open && nextTick(() => { unref(inputRef)?.focus() }) @@ -56,7 +56,7 @@ function handleClose() { <template> <Teleport to="body"> <transition name="zoom-fade" mode="out-in"> - <div v-if="visible" :class="getClass" @click.stop> + <div v-if="open" :class="getClass" @click.stop> <div v-click-outside="handleClose" :class="`${prefixCls}-content`"> <div :class="`${prefixCls}-input__wrapper`"> <a-input ref="inputRef" :class="`${prefixCls}-input`" :placeholder="t('common.searchText')" allow-clear @change="handleSearch"> diff --git a/src/components/ContextMenu/src/ContextMenu.vue b/src/components/ContextMenu/src/ContextMenu.vue index 98f0b3bd..a1f5a33a 100644 --- a/src/components/ContextMenu/src/ContextMenu.vue +++ b/src/components/ContextMenu/src/ContextMenu.vue @@ -85,8 +85,8 @@ export default defineComponent({ } function renderMenuItem(items: ContextMenuItem[]) { - const visibleItems = items.filter(item => !item.hidden) - return visibleItems.map((item) => { + const openItems = items.filter(item => !item.hidden) + return openItems.map((item) => { const { disabled, label, children, divider = false } = item const contentProps = { diff --git a/src/components/Drawer/src/BasicDrawer.vue b/src/components/Drawer/src/BasicDrawer.vue index 914787f9..1eedc458 100644 --- a/src/components/Drawer/src/BasicDrawer.vue +++ b/src/components/Drawer/src/BasicDrawer.vue @@ -16,9 +16,9 @@ import { useAttrs } from '@/hooks/core/useAttrs' defineOptions({ inheritAttrs: false }) const props = defineProps(basicProps) -const emit = defineEmits(['visible-change', 'ok', 'close', 'register']) +const emit = defineEmits(['open-change', 'ok', 'close', 'register']) -const visibleRef = ref(false) +const openRef = ref(false) const attrs = useAttrs() const propsRef = ref<Partial<Nullable<DrawerProps>>>(null) @@ -27,7 +27,7 @@ const { prefixVar, prefixCls } = useDesign('basic-drawer') const drawerInstance: DrawerInstance = { setDrawerProps, - emitVisible: undefined, + emitOpen: undefined, } const instance = getCurrentInstance() @@ -43,7 +43,7 @@ const getProps = computed((): DrawerProps => { placement: 'right', ...unref(attrs), ...unref(getMergeProps), - visible: unref(visibleRef), + open: unref(openRef), } opt.title = undefined const { isDetail, width, wrapClassName, getContainer } = opt @@ -89,20 +89,20 @@ const getLoading = computed(() => { }) watch( - () => props.visible, + () => props.open, (newVal, oldVal) => { if (newVal !== oldVal) - visibleRef.value = newVal + openRef.value = newVal }, { deep: true }, ) watch( - () => visibleRef.value, - (visible) => { + () => openRef.value, + (open) => { nextTick(() => { - emit('visible-change', visible) - instance && drawerInstance.emitVisible?.(visible, instance.uid) + emit('open-change', open) + instance && drawerInstance.emitOpen?.(open, instance.uid) }) }, ) @@ -113,18 +113,18 @@ async function onClose(e: Recordable) { emit('close', e) if (closeFunc && isFunction(closeFunc)) { const res = await closeFunc() - visibleRef.value = !res + openRef.value = !res return } - visibleRef.value = false + openRef.value = false } function setDrawerProps(props: Partial<DrawerProps>): void { // Keep the last setDrawerProps propsRef.value = deepMerge(unref(propsRef) || ({} as any), props) - if (Reflect.has(props, 'visible')) - visibleRef.value = !!props.visible + if (Reflect.has(props, 'open')) + openRef.value = !!props.open } function handleOk() { diff --git a/src/components/Drawer/src/props.ts b/src/components/Drawer/src/props.ts index 07723b81..9aba69e6 100644 --- a/src/components/Drawer/src/props.ts +++ b/src/components/Drawer/src/props.ts @@ -28,7 +28,7 @@ export const basicProps = { title: { type: String, default: '' }, loadingText: { type: String }, showDetailBack: { type: Boolean, default: true }, - visible: { type: Boolean }, + open: { type: Boolean }, loading: { type: Boolean }, maskClosable: { type: Boolean, default: true }, getContainer: { diff --git a/src/components/Drawer/src/typing.ts b/src/components/Drawer/src/typing.ts index 2afd1501..4a929ad4 100644 --- a/src/components/Drawer/src/typing.ts +++ b/src/components/Drawer/src/typing.ts @@ -4,13 +4,13 @@ import type { ScrollContainerOptions } from '@/components/Container' export interface DrawerInstance { setDrawerProps: (props: Partial<DrawerProps> | boolean) => void - emitVisible?: (visible: boolean, uid: number) => void + emitOpen?: (open: boolean, uid: number) => void } export interface ReturnMethods extends DrawerInstance { - openDrawer: <T = any>(visible?: boolean, data?: T, openOnSet?: boolean) => void + openDrawer: <T = any>(open?: boolean, data?: T, openOnSet?: boolean) => void closeDrawer: () => void - getVisible?: ComputedRef<boolean> + getOpen?: ComputedRef<boolean> } export type RegisterFn = (drawerInstance: DrawerInstance, uuid?: string) => void @@ -19,7 +19,7 @@ export interface ReturnInnerMethods extends DrawerInstance { closeDrawer: () => void changeLoading: (loading: boolean) => void changeOkLoading: (loading: boolean) => void - getVisible?: ComputedRef<boolean> + getOpen?: ComputedRef<boolean> } export type UseDrawerReturnType = [RegisterFn, ReturnMethods] @@ -73,7 +73,7 @@ export interface DrawerProps extends DrawerFooterProps { isDetail?: boolean loading?: boolean showDetailBack?: boolean - visible?: boolean + open?: boolean /** * Built-in ScrollContainer component configuration * @type ScrollContainerOptions @@ -82,7 +82,7 @@ export interface DrawerProps extends DrawerFooterProps { closeFunc?: () => Promise<any> triggerWindowResize?: boolean /** - * Whether a close (x) button is visible on top right of the Drawer dialog or not. + * Whether a close (x) button is open on top right of the Drawer dialog or not. * @default true * @type boolean */ @@ -179,7 +179,7 @@ export interface DrawerProps extends DrawerFooterProps { * @type string */ placement?: 'top' | 'right' | 'bottom' | 'left' - afterVisibleChange?: (visible?: boolean) => void + afterOpenChange?: (open?: boolean) => void keyboard?: boolean /** * Specify a callback that will be called when a user clicks mask, close button or Cancel button. diff --git a/src/components/Drawer/src/useDrawer.ts b/src/components/Drawer/src/useDrawer.ts index 10449f81..6b6adabc 100644 --- a/src/components/Drawer/src/useDrawer.ts +++ b/src/components/Drawer/src/useDrawer.ts @@ -8,7 +8,7 @@ import { error } from '@/utils/log' const dataTransferRef = reactive<any>({}) -const visibleData = reactive<{ [key: number]: boolean }>({}) +const openData = reactive<{ [key: number]: boolean }>({}) /** * @description: Applicable to separate drawer and call outside @@ -36,8 +36,8 @@ export function useDrawer(): UseDrawerReturnType { drawer.value = drawerInstance loaded.value = true - drawerInstance.emitVisible = (visible: boolean, uid: number) => { - visibleData[uid] = visible + drawerInstance.emitOpen = (open: boolean, uid: number) => { + openData[uid] = open } } @@ -54,13 +54,13 @@ export function useDrawer(): UseDrawerReturnType { getInstance()?.setDrawerProps(props) }, - getVisible: computed((): boolean => { - return visibleData[~~unref(uid)] + getOpen: computed((): boolean => { + return openData[~~unref(uid)] }), - openDrawer: <T = any>(visible = true, data?: T, openOnSet = true): void => { + openDrawer: <T = any>(open = true, data?: T, openOnSet = true): void => { getInstance()?.setDrawerProps({ - visible, + open, }) if (!data) return @@ -75,7 +75,7 @@ export function useDrawer(): UseDrawerReturnType { dataTransferRef[unref(uid)] = toRaw(data) }, closeDrawer: () => { - getInstance()?.setDrawerProps({ visible: false }) + getInstance()?.setDrawerProps({ open: false }) }, } @@ -131,12 +131,12 @@ export function useDrawerInner(callbackFn?: Fn): UseDrawerInnerReturnType { changeOkLoading: (loading = true) => { getInstance()?.setDrawerProps({ confirmLoading: loading }) }, - getVisible: computed((): boolean => { - return visibleData[~~unref(uidRef)] + getOpen: computed((): boolean => { + return openData[~~unref(uidRef)] }), closeDrawer: () => { - getInstance()?.setDrawerProps({ visible: false }) + getInstance()?.setDrawerProps({ open: false }) }, setDrawerProps: (props: Partial<DrawerProps>) => { diff --git a/src/components/Form/src/components/ApiSelect.vue b/src/components/Form/src/components/ApiSelect.vue index d6845b18..19563b74 100644 --- a/src/components/Form/src/components/ApiSelect.vue +++ b/src/components/Form/src/components/ApiSelect.vue @@ -107,8 +107,8 @@ async function fetch() { } } -async function handleFetch(visible) { - if (visible) { +async function handleFetch(open) { + if (open) { if (props.alwaysLoad) { await fetch() } @@ -129,7 +129,7 @@ function handleChange(_, ...args) { </script> <template> - <Select v-bind="$attrs" v-model:value="state" :options="getOptions" @dropdown-visible-change="handleFetch" @change="handleChange"> + <Select v-bind="$attrs" v-model:value="state" :options="getOptions" @dropdown-open-change="handleFetch" @change="handleChange"> <template v-for="item in Object.keys($slots)" #[item]="data"> <slot :name="item" v-bind="data || {}" /> </template> diff --git a/src/components/Form/src/components/FileUpload.vue b/src/components/Form/src/components/FileUpload.vue index 208c8b63..90ecd835 100644 --- a/src/components/Form/src/components/FileUpload.vue +++ b/src/components/Form/src/components/FileUpload.vue @@ -28,7 +28,7 @@ const props = defineProps({ returnUrl: propTypes.bool.def(true), // 最大上传数量 maxCount: propTypes.number.def(0), - buttonVisible: propTypes.bool.def(true), + buttonOpen: propTypes.bool.def(true), multiple: propTypes.bool.def(true), // 是否显示左右移动按钮 mover: propTypes.bool.def(true), @@ -288,7 +288,7 @@ function getFileName(path) { </div> </div> </template> - <a-button v-else-if="buttonVisible" :disabled="isMaxCount || disabled"> + <a-button v-else-if="buttonOpen" :disabled="isMaxCount || disabled"> <Icon icon="ant-design:upload-outlined" /> <span>{{ text }}</span> </a-button> diff --git a/src/components/FormDesign/src/components/VFormDesign/components/CodeModal.vue b/src/components/FormDesign/src/components/VFormDesign/components/CodeModal.vue index 2a619c9e..d3306991 100644 --- a/src/components/FormDesign/src/components/VFormDesign/components/CodeModal.vue +++ b/src/components/FormDesign/src/components/VFormDesign/components/CodeModal.vue @@ -45,13 +45,13 @@ export default defineComponent({ components: { PreviewCode, Modal }, setup() { const state = reactive({ - visible: false, + open: false, jsonData: {} as IFormConfig }) const showModal = (formConfig: IFormConfig) => { formConfig.schemas && formatRules(formConfig.schemas) - state.visible = true + state.open = true state.jsonData = formConfig } @@ -67,8 +67,8 @@ export default defineComponent({ <Modal title="代码" :footer="null" - :visible="visible" - @cancel="visible = false" + :open="open" + @cancel="open = false" wrapClassName="v-code-modal" style="top: 20px" width="850px" diff --git a/src/components/FormDesign/src/components/VFormDesign/components/ImportJsonModal.vue b/src/components/FormDesign/src/components/VFormDesign/components/ImportJsonModal.vue index 64a53e70..26b1805e 100644 --- a/src/components/FormDesign/src/components/VFormDesign/components/ImportJsonModal.vue +++ b/src/components/FormDesign/src/components/VFormDesign/components/ImportJsonModal.vue @@ -27,7 +27,7 @@ export default defineComponent({ const myEditor = ref(null) const state = reactive({ - visible: false, + open: false, json: `{ "schemas": [ { @@ -54,10 +54,10 @@ export default defineComponent({ }) const { formDesignMethods } = useFormDesignState() const handleCancel = () => { - state.visible = false + state.open = false } const showModal = () => { - state.visible = true + state.open = true } const handleImportJson = () => { // 导入JSON @@ -106,7 +106,7 @@ export default defineComponent({ <template> <Modal title="JSON数据" - :visible="visible" + :open="open" cancel-text="关闭" :destroy-on-close="true" wrap-class-name="v-code-modal" diff --git a/src/components/FormDesign/src/components/VFormDesign/components/JsonModal.vue b/src/components/FormDesign/src/components/VFormDesign/components/JsonModal.vue index 49cbc33f..7ecb7a92 100644 --- a/src/components/FormDesign/src/components/VFormDesign/components/JsonModal.vue +++ b/src/components/FormDesign/src/components/VFormDesign/components/JsonModal.vue @@ -17,10 +17,10 @@ export default defineComponent({ emits: ['cancel'], setup(_props, { emit }) { const state = reactive<{ - visible: boolean + open: boolean jsonData: IFormConfig }>({ - visible: false, // 控制json数据弹框显示 + open: false, // 控制json数据弹框显示 jsonData: {} as IFormConfig, // json数据 }) /** @@ -30,7 +30,7 @@ export default defineComponent({ const showModal = (jsonData: IFormConfig) => { formatRules(jsonData.schemas) state.jsonData = jsonData - state.visible = true + state.open = true } // 计算json数据 @@ -40,7 +40,7 @@ export default defineComponent({ // 关闭弹框 const handleCancel = () => { - state.visible = false + state.open = false emit('cancel') } @@ -53,7 +53,7 @@ export default defineComponent({ <Modal title="JSON数据" :footer="null" - :visible="visible" + :open="open" :destroy-on-close="true" wrap-class-name="v-code-modal" style="top: 20px" diff --git a/src/components/FormDesign/src/components/VFormDesign/components/PreviewCode.vue b/src/components/FormDesign/src/components/VFormDesign/components/PreviewCode.vue index 6c4014c5..9ae1c1be 100644 --- a/src/components/FormDesign/src/components/VFormDesign/components/PreviewCode.vue +++ b/src/components/FormDesign/src/components/VFormDesign/components/PreviewCode.vue @@ -22,7 +22,7 @@ export default defineComponent({ }, setup(props) { const state = reactive({ - visible: false, + open: false, }) const myEditor = ref(null) diff --git a/src/components/FormDesign/src/components/VFormDesign/config/componentPropsConfig.ts b/src/components/FormDesign/src/components/VFormDesign/config/componentPropsConfig.ts index a604926c..3befb8e0 100644 --- a/src/components/FormDesign/src/components/VFormDesign/config/componentPropsConfig.ts +++ b/src/components/FormDesign/src/components/VFormDesign/config/componentPropsConfig.ts @@ -761,7 +761,7 @@ const componentAttrs: IBaseComponentProps = { }, }, { - name: 'tooltipVisible', + name: 'tooltipOpen', label: '始终显示Tooltip', component: 'Checkbox', }, diff --git a/src/components/FormDesign/src/components/VFormPreview/index.vue b/src/components/FormDesign/src/components/VFormPreview/index.vue index 4c699e4c..1add54de 100644 --- a/src/components/FormDesign/src/components/VFormPreview/index.vue +++ b/src/components/FormDesign/src/components/VFormPreview/index.vue @@ -23,13 +23,13 @@ export default defineComponent({ const jsonModal = ref<IToolbarMethods | null>(null) const state = reactive<{ formModel: IAnyObject - visible: boolean + open: boolean formConfig: IFormConfig fApi: IVFormMethods }>({ formModel: {}, formConfig: {} as IFormConfig, - visible: false, + open: false, fApi: {} as IVFormMethods, }) @@ -41,7 +41,7 @@ export default defineComponent({ // console.log('showModal-', jsonData); formatRules(jsonData.schemas) state.formConfig = jsonData - state.visible = true + state.open = true } /** @@ -49,7 +49,7 @@ export default defineComponent({ * @return {Promise<void>} */ const handleCancel = () => { - state.visible = false + state.open = false state.formModel = {} } const handleGetData = async () => { @@ -79,7 +79,7 @@ export default defineComponent({ <template> <Modal title="预览(支持布局)" - :visible="visible" + :open="open" ok-text="获取数据" cancel-text="关闭" style="top: 20px" diff --git a/src/components/FormDesign/src/components/VFormPreview/useForm.vue b/src/components/FormDesign/src/components/VFormPreview/useForm.vue index 0c0d786f..352a9581 100644 --- a/src/components/FormDesign/src/components/VFormPreview/useForm.vue +++ b/src/components/FormDesign/src/components/VFormPreview/useForm.vue @@ -13,12 +13,12 @@ import { BasicForm, useForm } from '@/components/Form/index' const jsonModal = ref<IToolbarMethods | null>(null) const state = reactive<{ formModel: IAnyObject - visible: boolean + open: boolean formConfig: IFormConfig }>({ formModel: {}, formConfig: {} as IFormConfig, - visible: false, + open: false, }) const attrs = computed(() => { @@ -33,14 +33,14 @@ const attrs = computed(() => { */ function showModal(jsonData: IFormConfig) { state.formConfig = jsonData - state.visible = true + state.open = true } // 表单 const [registerForm, { validate }] = useForm() function handleCancel() { - state.visible = false + state.open = false } /** * 获取表单数据 @@ -57,7 +57,7 @@ defineExpose({ showModal }) <template> <Modal title="预览(不支持布局)" - :visible="state.visible" + :open="state.open" ok-text="获取数据" cancel-text="关闭" style="top: 20px" diff --git a/src/components/Icon/src/IconPicker.vue b/src/components/Icon/src/IconPicker.vue index 1a37b91b..bd3d9081 100644 --- a/src/components/Icon/src/IconPicker.vue +++ b/src/components/Icon/src/IconPicker.vue @@ -49,7 +49,7 @@ const isSvgMode = props.mode === 'svg' const icons = isSvgMode ? getSvgIcons() : getIcons() const currentSelect = ref('') -const visible = ref(false) +const open = ref(false) const currentList = ref(icons) const { t } = useI18n() @@ -109,7 +109,7 @@ function handleSearchChange(e: ChangeEvent) { <template> <AInput v-model:value="currentSelect" disabled :style="{ width }" :placeholder="t('component.icon.placeholder')" :class="prefixCls"> <template #addonAfter> - <APopover v-model="visible" placement="bottomLeft" trigger="click" :overlay-class-name="`${prefixCls}-popover`"> + <APopover v-model="open" placement="bottomLeft" trigger="click" :overlay-class-name="`${prefixCls}-popover`"> <template #title> <div class="flex justify-between"> <AInput :placeholder="t('component.icon.search')" allow-clear @change="debounceHandleSearchChange" /> diff --git a/src/components/Modal/src/BasicModal.vue b/src/components/Modal/src/BasicModal.vue index 1321115a..e8ec42f3 100644 --- a/src/components/Modal/src/BasicModal.vue +++ b/src/components/Modal/src/BasicModal.vue @@ -17,9 +17,9 @@ import { useDesign } from '@/hooks/web/useDesign' defineOptions({ name: 'BasicModal', inheritAttrs: false }) const props = defineProps(basicProps) -const emit = defineEmits(['visible-change', 'height-change', 'cancel', 'ok', 'register', 'update:visible']) +const emit = defineEmits(['open-change', 'height-change', 'cancel', 'ok', 'register', 'update:open']) const attrs = useAttrs() -const visibleRef = ref(false) +const openRef = ref(false) const propsRef = ref<Partial<ModalProps> | null>(null) const modalWrapperRef = ref<any>(null) const { prefixCls } = useDesign('basic-modal') @@ -28,7 +28,7 @@ const { prefixCls } = useDesign('basic-modal') const extHeightRef = ref(0) const modalMethods: ModalMethods = { setModalProps, - emitVisible: undefined, + emitOpen: undefined, redoModalHeight: () => { nextTick(() => { if (unref(modalWrapperRef)) { @@ -60,7 +60,7 @@ const { handleFullScreen, getWrapClassName, fullScreenRef } = useFullScreen({ const getProps = computed((): Recordable => { const opt = { ...unref(getMergeProps), - visible: unref(visibleRef), + open: unref(openRef), okButtonProps: undefined, cancelButtonProps: undefined, title: undefined, @@ -75,7 +75,7 @@ const getBindValue = computed((): Recordable => { const attr = { ...attrs, ...unref(getMergeProps), - visible: unref(visibleRef), + open: unref(openRef), } attr.wrapClassName = `${attr?.wrapClassName || ''} ${unref(getWrapClassName)}` if (unref(fullScreenRef)) @@ -91,16 +91,16 @@ const getWrapperHeight = computed(() => { }) watchEffect(() => { - visibleRef.value = !!props.visible + openRef.value = !!props.open fullScreenRef.value = !!props.defaultFullscreen }) watch( - () => unref(visibleRef), + () => unref(openRef), (v) => { - emit('visible-change', v) - emit('update:visible', v) - instance && modalMethods.emitVisible?.(v, instance.uid) + emit('open-change', v) + emit('update:open', v) + instance && modalMethods.emitOpen?.(v, instance.uid) nextTick(() => { if (props.scrollTop && v && unref(modalWrapperRef)) { ;(unref(modalWrapperRef) as any).scrollTop() @@ -120,11 +120,11 @@ async function handleCancel(e: Event) { return if (props.closeFunc && isFunction(props.closeFunc)) { const isClose: boolean = await props.closeFunc() - visibleRef.value = !isClose + openRef.value = !isClose return } - visibleRef.value = false + openRef.value = false emit('cancel', e) } @@ -134,8 +134,8 @@ async function handleCancel(e: Event) { function setModalProps(props: Partial<ModalProps>): void { // Keep the last setModalProps propsRef.value = deepMerge(unref(propsRef) || ({} as any), props) - if (Reflect.has(props, 'visible')) - visibleRef.value = !!props.visible + if (Reflect.has(props, 'open')) + openRef.value = !!props.open if (Reflect.has(props, 'defaultFullscreen')) fullScreenRef.value = !!props.defaultFullscreen @@ -193,9 +193,9 @@ function handleTitleDbClick(e) { :loading-tip="getProps.loadingTip" :min-height="getProps.minHeight" :height="getWrapperHeight" - :visible="visibleRef" + :open="openRef" :modal-footer-height="footer !== undefined && !footer ? 0 : undefined" - v-bind="omit(getProps.wrapperProps, 'visible', 'height', 'modalFooterHeight')" + v-bind="omit(getProps.wrapperProps, 'open', 'height', 'modalFooterHeight')" @ext-height="handleExtHeight" @height-change="handleHeightChange" > diff --git a/src/components/Modal/src/components/Modal.tsx b/src/components/Modal/src/components/Modal.tsx index 3f396395..aeb4844b 100644 --- a/src/components/Modal/src/components/Modal.tsx +++ b/src/components/Modal/src/components/Modal.tsx @@ -11,10 +11,10 @@ export default defineComponent({ props: basicProps, emits: ['cancel'], setup(props, { slots, emit }) { - const { visible, draggable, destroyOnClose } = toRefs(props) + const { open, draggable, destroyOnClose } = toRefs(props) const attrs = useAttrs() useModalDragMove({ - visible, + open, destroyOnClose, draggable, }) diff --git a/src/components/Modal/src/components/ModalWrapper.vue b/src/components/Modal/src/components/ModalWrapper.vue index f4b587b0..90e299a2 100644 --- a/src/components/Modal/src/components/ModalWrapper.vue +++ b/src/components/Modal/src/components/ModalWrapper.vue @@ -16,7 +16,7 @@ const props = defineProps({ minHeight: { type: Number, default: 200 }, height: { type: Number }, footerOffset: { type: Number, default: 0 }, - visible: { type: Boolean }, + open: { type: Boolean }, fullScreen: { type: Boolean }, loadingTip: { type: String }, }) @@ -89,8 +89,8 @@ async function scrollTop() { async function setModalHeight() { // 解决在弹窗关闭的时候监听还存在,导致再次打开弹窗没有高度 - // 加上这个,就必须在使用的时候传递父级的visible - if (!props.visible) + // 加上这个,就必须在使用的时候传递父级的open + if (!props.open) return const wrapperRefDom = unref(wrapperRef) if (!wrapperRefDom) diff --git a/src/components/Modal/src/hooks/useModal.ts b/src/components/Modal/src/hooks/useModal.ts index 0bd479ac..a510ccbd 100644 --- a/src/components/Modal/src/hooks/useModal.ts +++ b/src/components/Modal/src/hooks/useModal.ts @@ -8,7 +8,7 @@ import { error } from '@/utils/log' const dataTransfer = reactive<any>({}) -const visibleData = reactive<{ [key: number]: boolean }>({}) +const openData = reactive<{ [key: number]: boolean }>({}) /** * @description: Applicable to independent modal and call outside @@ -34,8 +34,8 @@ export function useModal(): UseModalReturnType { modal.value = modalMethod loaded.value = true - modalMethod.emitVisible = (visible: boolean, uid: number) => { - visibleData[uid] = visible + modalMethod.emitOpen = (open: boolean, uid: number) => { + openData[uid] = open } } @@ -52,17 +52,17 @@ export function useModal(): UseModalReturnType { getInstance()?.setModalProps(props) }, - getVisible: computed((): boolean => { - return visibleData[~~unref(uid)] + getOpen: computed((): boolean => { + return openData[~~unref(uid)] }), redoModalHeight: () => { getInstance()?.redoModalHeight?.() }, - openModal: <T = any>(visible = true, data?: T, openOnSet = true): void => { + openModal: <T = any>(open = true, data?: T, openOnSet = true): void => { getInstance()?.setModalProps({ - visible, + open, }) if (!data) @@ -79,7 +79,7 @@ export function useModal(): UseModalReturnType { }, closeModal: () => { - getInstance()?.setModalProps({ visible: false }) + getInstance()?.setModalProps({ open: false }) }, } return [register, methods] @@ -125,8 +125,8 @@ export function useModalInner(callbackFn?: Fn): UseModalInnerReturnType { changeLoading: (loading = true) => { getInstance()?.setModalProps({ loading }) }, - getVisible: computed((): boolean => { - return visibleData[~~unref(uidRef)] + getOpen: computed((): boolean => { + return openData[~~unref(uidRef)] }), changeOkLoading: (loading = true) => { @@ -134,7 +134,7 @@ export function useModalInner(callbackFn?: Fn): UseModalInnerReturnType { }, closeModal: () => { - getInstance()?.setModalProps({ visible: false }) + getInstance()?.setModalProps({ open: false }) }, setModalProps: (props: Partial<ModalProps>) => { diff --git a/src/components/Modal/src/hooks/useModalDrag.ts b/src/components/Modal/src/hooks/useModalDrag.ts index cf0898ad..8b573c71 100644 --- a/src/components/Modal/src/hooks/useModalDrag.ts +++ b/src/components/Modal/src/hooks/useModalDrag.ts @@ -5,7 +5,7 @@ import { useTimeoutFn } from '@vueuse/core' export interface UseModalDragMoveContext { draggable: Ref<boolean> destroyOnClose: Ref<boolean | undefined> | undefined - visible: Ref<boolean> + open: Ref<boolean> } export function useModalDragMove(context: UseModalDragMoveContext) { @@ -100,7 +100,7 @@ export function useModalDragMove(context: UseModalDragMoveContext) { } watchEffect(() => { - if (!unref(context.visible) || !unref(context.draggable)) + if (!unref(context.open) || !unref(context.draggable)) return useTimeoutFn(() => { diff --git a/src/components/Modal/src/props.ts b/src/components/Modal/src/props.ts index 075e039d..901a4073 100644 --- a/src/components/Modal/src/props.ts +++ b/src/components/Modal/src/props.ts @@ -6,7 +6,7 @@ import { useI18n } from '@/hooks/web/useI18n' const { t } = useI18n() export const modalProps = { - visible: { type: Boolean }, + open: { type: Boolean }, scrollTop: { type: Boolean, default: true }, height: { type: Number }, minHeight: { type: Number }, @@ -73,7 +73,7 @@ export const basicProps = Object.assign({}, modalProps, { title: { type: String }, - visible: { type: Boolean }, + open: { type: Boolean }, width: { type: [String, Number] as PropType<string | number>, default: '40%' }, diff --git a/src/components/Modal/src/typing.ts b/src/components/Modal/src/typing.ts index 3db63186..175222fd 100644 --- a/src/components/Modal/src/typing.ts +++ b/src/components/Modal/src/typing.ts @@ -6,7 +6,7 @@ import type { CSSProperties, ComputedRef, VNodeChild } from 'vue' */ export interface ModalMethods { setModalProps: (props: Partial<ModalProps>) => void - emitVisible?: (visible: boolean, uid: number) => void + emitOpen?: (open: boolean, uid: number) => void redoModalHeight?: () => void } @@ -15,7 +15,7 @@ export type RegisterFn = (modalMethods: ModalMethods, uuid?: string) => void export interface ReturnMethods extends ModalMethods { openModal: <T = any>(props?: boolean, data?: T, openOnSet?: boolean) => void closeModal: () => void - getVisible?: ComputedRef<boolean> + getOpen?: ComputedRef<boolean> } export type UseModalReturnType = [RegisterFn, ReturnMethods] @@ -24,7 +24,7 @@ export interface ReturnInnerMethods extends ModalMethods { closeModal: () => void changeLoading: (loading: boolean) => void changeOkLoading: (loading: boolean) => void - getVisible?: ComputedRef<boolean> + getOpen?: ComputedRef<boolean> redoModalHeight: () => void } @@ -41,7 +41,7 @@ export interface ModalProps { // 是否可以进行全屏 canFullscreen?: boolean defaultFullscreen?: boolean - visible?: boolean + open?: boolean // 温馨提醒信息 helpMessage: string | string[] @@ -204,7 +204,7 @@ export interface ModalWrapperProps { modalFooterHeight: number minHeight: number height: number - visible: boolean + open: boolean fullScreen: boolean useWrapper: boolean } diff --git a/src/components/Preview/src/Preview.vue b/src/components/Preview/src/Preview.vue index 7ed9af37..6c5d0e6b 100644 --- a/src/components/Preview/src/Preview.vue +++ b/src/components/Preview/src/Preview.vue @@ -15,8 +15,8 @@ interface ImageProps { preview?: | boolean | { - visible?: boolean - onVisibleChange?: (visible: boolean, prevVisible: boolean) => void + open?: boolean + onOpenChange?: (open: boolean, prevOpen: boolean) => void getContainer: string | HTMLElement | (() => HTMLElement) } } diff --git a/src/components/Preview/src/typing.ts b/src/components/Preview/src/typing.ts index 3e690e65..882e1443 100644 --- a/src/components/Preview/src/typing.ts +++ b/src/components/Preview/src/typing.ts @@ -46,8 +46,8 @@ export interface ImageProps { preview?: | boolean | { - visible?: boolean - onVisibleChange?: (visible: boolean, prevVisible: boolean) => void + open?: boolean + onOpenChange?: (open: boolean, prevOpen: boolean) => void getContainer: string | HTMLElement | (() => HTMLElement) } } diff --git a/src/components/SimpleMenu/src/components/SubMenuItem.vue b/src/components/SimpleMenu/src/components/SubMenuItem.vue index ebe2917a..829b3431 100644 --- a/src/components/SimpleMenu/src/components/SubMenuItem.vue +++ b/src/components/SimpleMenu/src/components/SubMenuItem.vue @@ -218,8 +218,8 @@ onBeforeMount(() => { }) }) -function handleVisibleChange(visible: boolean) { - state.opened = visible +function handleOpenChange(open: boolean) { + state.opened = open } // provide @@ -254,10 +254,10 @@ provide<SubMenuProvider>(`subMenu:${instance?.uid}`, { v-else placement="right" :overlay-class-name="`${prefixCls}-menu-popover`" - :visible="getIsOpend" + :open="getIsOpend" :overlay-style="getOverlayStyle" :align="{ offset: [0, 0] }" - @visible-change="handleVisibleChange" + @open-change="handleOpenChange" > <div :class="getSubClass" v-bind="getEvents(false)"> <div diff --git a/src/components/Table/src/components/editable/CellComponent.ts b/src/components/Table/src/components/editable/CellComponent.ts index 0a60f438..a03f80fe 100644 --- a/src/components/Table/src/components/editable/CellComponent.ts +++ b/src/components/Table/src/components/editable/CellComponent.ts @@ -7,13 +7,13 @@ import { componentMap } from '@/components/Table/src/componentMap' export interface ComponentProps { component: ComponentType rule: boolean - popoverVisible: boolean + popoverOpen: boolean ruleMessage: string getPopupContainer?: Fn } export const CellComponent: FunctionalComponent = ( - { component = 'Input', rule = true, ruleMessage, popoverVisible, getPopupContainer }: ComponentProps, + { component = 'Input', rule = true, ruleMessage, popoverOpen, getPopupContainer }: ComponentProps, { attrs }, ) => { const Comp = componentMap.get(component) as typeof defineComponent @@ -26,7 +26,7 @@ export const CellComponent: FunctionalComponent = ( Popover, { overlayClassName: 'edit-cell-rule-popover', - visible: !!popoverVisible, + open: !!popoverOpen, ...(getPopupContainer ? { getPopupContainer } : {}), }, { diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue index 10c84a06..1bf72ea6 100644 --- a/src/components/Table/src/components/editable/EditableCell.vue +++ b/src/components/Table/src/components/editable/EditableCell.vue @@ -42,7 +42,7 @@ export default defineComponent({ const table = useTableContext() const isEdit = ref(false) const elRef = ref() - const ruleVisible = ref(false) + const ruleOpen = ref(false) const ruleMessage = ref('') const optionsRef = ref<LabelValueOptions>([]) const currentValueRef = ref<any>(props.value) @@ -54,8 +54,8 @@ export default defineComponent({ const getComponent = computed(() => props.column?.editComponent || 'Input') const getRule = computed(() => props.column?.editRule) - const getRuleVisible = computed(() => { - return unref(ruleMessage) && unref(ruleVisible) + const getRuleOpen = computed(() => { + return unref(ruleMessage) && unref(ruleOpen) }) const getIsCheckComp = computed(() => { @@ -211,7 +211,7 @@ export default defineComponent({ if (editRule) { if (isBoolean(editRule) && !currentValue && !isNumber(currentValue)) { - ruleVisible.value = true + ruleOpen.value = true const component = unref(getComponent) ruleMessage.value = createPlaceholderMessage(component) return false @@ -220,7 +220,7 @@ export default defineComponent({ const res = await editRule(currentValue, record as Recordable) if (res) { ruleMessage.value = res - ruleVisible.value = true + ruleOpen.value = true return false } else { @@ -383,7 +383,7 @@ export default defineComponent({ getRule, onClickOutside, ruleMessage, - getRuleVisible, + getRuleOpen, getComponentProps, handleOptionsChange, getWrapperStyle, @@ -422,7 +422,7 @@ export default defineComponent({ {...this.getComponentProps} component={this.getComponent} style={this.getWrapperStyle} - popoverVisible={this.getRuleVisible} + popoverOpen={this.getRuleOpen} rule={this.getRule} ruleMessage={this.ruleMessage} class={this.getWrapperClass} diff --git a/src/components/Table/src/components/settings/ColumnSetting.vue b/src/components/Table/src/components/settings/ColumnSetting.vue index 95e1511e..74460d6f 100644 --- a/src/components/Table/src/components/settings/ColumnSetting.vue +++ b/src/components/Table/src/components/settings/ColumnSetting.vue @@ -135,7 +135,7 @@ async function init(isReset = false) { // 是否列展示全选 state.checkAll = checkList.length === columns.length inited = false - handleVisibleChange() + handleOpenChange() state.checkedList = checkList } @@ -190,7 +190,7 @@ function reset() { } // Open the pop-up window for drag and drop initialization -function handleVisibleChange() { +function handleOpenChange() { if (inited) return nextTick(() => { @@ -277,9 +277,9 @@ function setColumns(columns: BasicColumn[] | string[]) { isSetColumnsFromThis = true table.setColumns(columns) const data: ColumnChangeParam[] = unref(plainSortOptions).map((col) => { - const visible + const open = columns.findIndex((c: BasicColumn | string) => c === col.value || (typeof c !== 'string' && c.dataIndex === col.value)) !== -1 - return { dataIndex: col.value, fixed: col.fixed, visible } + return { dataIndex: col.value, fixed: col.fixed, open } }) emit('columns-change', data) @@ -307,7 +307,7 @@ function updateSortOption(column: BasicColumn) { trigger="click" :overlay-class-name="`${prefixCls}__cloumn-list`" :get-popup-container="getPopupContainer" - @visible-change="handleVisibleChange" + @open-change="handleOpenChange" > <template #title> <div :class="`${prefixCls}__popover-title`"> diff --git a/src/components/Table/src/types/column.ts b/src/components/Table/src/types/column.ts index db067d22..e6e5877e 100644 --- a/src/components/Table/src/types/column.ts +++ b/src/components/Table/src/types/column.ts @@ -22,7 +22,7 @@ export interface FilterDropdownProps { clearFilters?: () => void filters?: ColumnFilterItem[] getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement - visible?: boolean + open?: boolean } export declare type CustomRenderFunction<T> = (record: RecordProps<T>) => VNodeChild | JSX.Element @@ -74,10 +74,10 @@ export interface ColumnProps<T> { filterDropdown?: VNodeChild | JSX.Element | ((props: FilterDropdownProps) => VNodeChild | JSX.Element) /** - * Whether filterDropdown is visible + * Whether filterDropdown is open * @type boolean */ - filterDropdownVisible?: boolean + filterDropdownOpen?: boolean /** * Whether the dataSource is filtered @@ -181,10 +181,10 @@ export interface ColumnProps<T> { onFilter?: (value: any, record: T) => boolean /** - * Callback executed when filterDropdownVisible is changed, Use as a filterDropdownVisible event when using template or jsx + * Callback executed when filterDropdownOpen is changed, Use as a filterDropdownOpen event when using template or jsx * @type Function */ - onFilterDropdownVisibleChange?: (visible: boolean) => void + onFilterDropdownOpenChange?: (open: boolean) => void /** * When using columns, you can setting this property to configure the properties that support the slot, diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts index bdb8628b..c70926cc 100644 --- a/src/components/Table/src/types/table.ts +++ b/src/components/Table/src/types/table.ts @@ -455,7 +455,7 @@ export interface BasicColumn extends ColumnProps<Recordable> { export interface ColumnChangeParam { dataIndex: string fixed: boolean | 'left' | 'right' | undefined - visible: boolean + open: boolean } export interface InnerHandlers { diff --git a/src/layouts/default/sider/index.vue b/src/layouts/default/sider/index.vue index 06ef8c41..60622f2d 100644 --- a/src/layouts/default/sider/index.vue +++ b/src/layouts/default/sider/index.vue @@ -27,7 +27,7 @@ function handleClose() { :class="prefixCls" :width="getMenuWidth" :get-container="null" - :visible="!getCollapsed" + :open="!getCollapsed" @close="handleClose" > <Sider />