feat: visible to open

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>
       )
     }

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">

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 = {

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() {

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: {

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.

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>) => {

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>

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>

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"

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"

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"

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)

src/components/FormDesign/src/components/VFormDesign/config/componentPropsConfig.ts

@@ -761,7 +761,7 @@ const componentAttrs: IBaseComponentProps = {
       },
     },
     {
-      name: 'tooltipVisible',
+      name: 'tooltipOpen',
       label: '始终显示Tooltip',
       component: 'Checkbox',
     },

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"

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"

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" />

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"
     >

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,
     })

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)

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>) => {

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(() => {

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%' },
 

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
 }

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)
   }
 }

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)
   }
 }

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

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 } : {}),
     },
     {

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}

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`">

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,

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 {

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 />