refactor(comp:*): update motion mixin

.eslintrc.js

@@ -182,5 +182,10 @@ module.exports = {
       },
     ],
   },
-  ignorePatterns: ['dist', 'packages/site/src/router.ts', 'packages/site/src/sideNav.ts'],
+  ignorePatterns: [
+    'dist',
+    'packages/site/src/router.ts',
+    'packages/site/src/sideNav.ts',
+    'packages/site/src/components/global/themeConfig.ts',
+  ],
 }

.gitignore

@@ -17,13 +17,15 @@ pnpm-lock.yaml
 /packages/site/public/icon-svg
 /packages/site/src/router.ts
 /packages/site/src/sideNav.ts
+/packages/site/src/styles/themes/index.less
 /packages/site/components.d.ts
 
 # old site files
 /public/icon-svg
 /site/docs/router.ts
 /site/docs/sideNav.ts
 
+
 /site/docs/public
 /site/docs/src
 /site/docs/index.html

.prettierignore

@@ -16,3 +16,4 @@ packages/components/icon/src/definitions.ts
 packages/site/components.d.ts
 packages/site/src/router.ts
 packages/site/src/sideNav.ts
+packages/site/src/components/global/themeConfig.ts

packages/components/_private/mask/src/Mask.tsx

@@ -23,9 +23,8 @@ export default defineComponent({
       if (!mask) {
         return null
       }
-
       return (
-        <Transition appear name={transitionName}>
+        <Transition appear name={transitionName ?? `${common.prefixCls}-fade`}>
           <div v-show={visible} class={mergedPrefixCls.value} style={{ zIndex }}></div>
         </Transition>
       )

packages/components/_private/mask/src/types.ts

@@ -9,18 +9,9 @@ import type { ExtractInnerPropTypes, ExtractPublicPropTypes } from '@idux/cdk/ut
 import type { DefineComponent, HTMLAttributes } from 'vue'
 
 export const maskProps = {
-  mask: {
-    type: Boolean,
-    default: true,
-  },
-  transitionName: {
-    type: String,
-    default: 'ix-fade',
-  },
-  visible: {
-    type: Boolean,
-    default: true,
-  },
+  mask: { type: Boolean, default: true },
+  transitionName: String,
+  visible: { type: Boolean, default: true },
   zIndex: Number,
 } as const
 

packages/components/date-picker/src/DatePicker.tsx

@@ -57,6 +57,7 @@ export default defineComponent({
     const context = {
       props,
       slots,
+      common,
       locale,
       config,
       mergedPrefixCls,

packages/components/date-picker/src/DateRangePicker.tsx

@@ -56,6 +56,7 @@ export default defineComponent({
     const context = {
       props,
       slots,
+      common,
       locale,
       config,
       mergedPrefixCls,

packages/components/date-picker/src/composables/useOverlayProps.ts

@@ -13,13 +13,13 @@ import { type ComputedRef, computed } from 'vue'
 const defaultOffset: [number, number] = [0, 8]
 export function useOverlayProps(context: DatePickerContext | DateRangePickerContext): ComputedRef<ɵOverlayProps> {
   return computed(() => {
-    const { props, config, accessor, mergedPrefixCls, overlayOpened, setOverlayOpened, onAfterLeave } = context
+    const { props, common, config, accessor, mergedPrefixCls, overlayOpened, setOverlayOpened, onAfterLeave } = context
     return {
       clickOutside: true,
       disabled: accessor.disabled || props.readonly,
       offset: defaultOffset,
       placement: 'bottomStart',
-      transitionName: 'ix-fade',
+      transitionName: `${common.prefixCls}-fade`,
       target: props.overlayContainer ?? config.overlayContainer ?? `${mergedPrefixCls.value}-overlay-container`,
       trigger: 'manual',
       visible: overlayOpened.value,

packages/components/date-picker/src/token.ts

@@ -16,13 +16,14 @@ import type { OverlayStateContext } from './composables/useOverlayState'
 import type { PickerStateContext } from './composables/usePickerState'
 import type { PickerRangeControlContext } from './composables/useRangeControl'
 import type { DatePickerProps, DateRangePickerProps } from './types'
-import type { DateConfig, DatePickerConfig } from '@idux/components/config'
+import type { CommonConfig, DateConfig, DatePickerConfig } from '@idux/components/config'
 import type { Locale } from '@idux/components/locales'
 import type { ComputedRef, InjectionKey, Ref, Slots, VNodeTypes } from 'vue'
 
 export interface DatePickerContext extends OverlayStateContext, FormatContext, PickerStateContext<DatePickerProps> {
   props: DatePickerProps
   slots: Slots
+  common: CommonConfig
   locale: Locale
   config: DatePickerConfig
   mergedPrefixCls: ComputedRef<string>
@@ -39,6 +40,7 @@ export interface DateRangePickerContext
     PickerStateContext<DateRangePickerProps> {
   props: DateRangePickerProps
   slots: Slots
+  common: CommonConfig
   locale: Locale
   config: DatePickerConfig
   mergedPrefixCls: ComputedRef<string>

packages/components/drawer/__tests__/drawer.spec.ts

@@ -102,13 +102,13 @@ describe('Drawer', () => {
     const wrapper = DrawerMount({ props: { closeOnEsc: false, 'onUpdate:visible': onUpdateVisible } })
     const drawerWrapper = wrapper.getComponent(DrawerWrapper)
 
-    await drawerWrapper.find('.ix-drawer-wrapper').trigger('keydown', { code: 'Escape' })
+    await drawerWrapper.trigger('keydown', { code: 'Escape' })
 
     expect(drawerWrapper.find('.ix-drawer').isVisible()).toBe(true)
 
     await wrapper.setProps({ closeOnEsc: true })
 
-    await drawerWrapper.find('.ix-drawer-wrapper').trigger('keydown', { code: 'Escape' })
+    await drawerWrapper.trigger('keydown', { code: 'Escape' })
 
     expect(onUpdateVisible).toBeCalledWith(false)
   })
@@ -223,12 +223,12 @@ describe('Drawer', () => {
     const wrapper = DrawerMount({ props: { maskClosable: false, 'onUpdate:visible': onUpdateVisible } })
     const drawerWrapper = wrapper.getComponent(DrawerWrapper)
 
-    await drawerWrapper.find('.ix-drawer-wrapper').trigger('click')
+    await drawerWrapper.trigger('click')
 
     expect(drawerWrapper.find('.ix-drawer').isVisible()).toBe(true)
 
     await wrapper.setProps({ maskClosable: true })
-    await drawerWrapper.find('.ix-drawer-wrapper').trigger('click')
+    await drawerWrapper.trigger('click')
 
     expect(onUpdateVisible).toBeCalledWith(false)
   })
@@ -250,11 +250,11 @@ describe('Drawer', () => {
     const wrapper = DrawerMount({ props: { placement: 'start' } })
     const drawerWrapper = wrapper.getComponent(DrawerWrapper)
 
-    expect(drawerWrapper.find('.ix-drawer-wrapper').classes()).toContain('ix-drawer-start')
+    expect(drawerWrapper.classes()).toContain('ix-drawer-start')
 
     await wrapper.setProps({ placement: 'top' })
 
-    expect(drawerWrapper.find('.ix-drawer-wrapper').classes()).toContain('ix-drawer-top')
+    expect(drawerWrapper.classes()).toContain('ix-drawer-top')
   })
 
   test('target work', async () => {
@@ -292,13 +292,13 @@ describe('Drawer', () => {
     const wrapper = DrawerMount({ props: { wrapperClassName } })
     const drawerWrapper = wrapper.getComponent(DrawerWrapper)
 
-    expect(drawerWrapper.find('.ix-drawer-wrapper').classes()).toContain(wrapperClassName)
+    expect(drawerWrapper.classes()).toContain(wrapperClassName)
 
     wrapperClassName = 'test-container2'
 
     await wrapper.setProps({ wrapperClassName })
 
-    expect(drawerWrapper.find('.ix-drawer-wrapper').classes()).toContain(wrapperClassName)
+    expect(drawerWrapper.classes()).toContain(wrapperClassName)
   })
 
   test('zIndex work', async () => {

packages/components/drawer/src/DrawerWrapper.tsx

@@ -41,8 +41,18 @@ const defaultDistance = 160
 export default defineComponent({
   inheritAttrs: false,
   setup(_, { attrs }) {
-    const { props, slots, common, config, mergedPrefixCls, visible, animatedVisible, level, levelAction } =
-      inject(drawerToken)!
+    const {
+      props,
+      slots,
+      common,
+      config,
+      mergedPrefixCls,
+      visible,
+      animatedVisible,
+      mergedVisible,
+      level,
+      levelAction,
+    } = inject(drawerToken)!
     const { close } = inject(DRAWER_TOKEN)!
     const { closable, closeIcon, closeOnEsc, mask, maskClosable, zIndex } = useConfig(props, config)
 
@@ -125,48 +135,47 @@ export default defineComponent({
       const prefixCls = mergedPrefixCls.value
 
       return (
-        <Transition
-          name={transitionName.value}
-          appear
-          onEnter={onEnter}
-          onAfterEnter={onAfterEnter}
-          onAfterLeave={onAfterLeave}
+        <div
+          v-show={mergedVisible.value}
+          ref={wrapperRef}
+          class={wrapperClasses.value}
+          style={wrapperStyle.value}
+          tabindex={-1}
+          onClick={onWrapperClick}
+          onKeydown={onWrapperKeydown}
         >
-          <div
-            v-show={visible.value}
-            ref={wrapperRef}
-            class={wrapperClasses.value}
-            style={wrapperStyle.value}
-            tabindex={-1}
-            onClick={onWrapperClick}
-            onKeydown={onWrapperKeydown}
+          <Transition
+            name={props.animatable ? transitionName.value : undefined}
+            appear
+            onEnter={onEnter}
+            onAfterEnter={onAfterEnter}
+            onAfterLeave={onAfterLeave}
           >
-            <Transition name={transitionName.value}>
-              <div
-                role="document"
-                class={prefixCls}
-                style={contentStyle.value}
-                onMousedown={onContentMousedown}
-                onMouseup={onContentMouseup}
-                {...attrs}
-              >
-                <div ref={sentinelStartRef} tabindex={0} class={`${prefixCls}-sentinel`} aria-hidden={true}></div>
-                <div class={`${prefixCls}-content`}>
-                  <ɵHeader
-                    v-slots={slots}
-                    closable={closable.value}
-                    closeIcon={closeIcon.value}
-                    header={props.header}
-                    onClose={close}
-                  />
-                  <div class={`${prefixCls}-body`}>{slots.default?.()}</div>
-                  <ɵFooter v-slots={slots} class={`${prefixCls}-footer`} footer={props.footer}></ɵFooter>
-                </div>
-                <div ref={sentinelEndRef} tabindex={0} class={`${prefixCls}-sentinel`} aria-hidden={true}></div>
+            <div
+              v-show={visible.value}
+              role="document"
+              class={prefixCls}
+              style={contentStyle.value}
+              onMousedown={onContentMousedown}
+              onMouseup={onContentMouseup}
+              {...attrs}
+            >
+              <div ref={sentinelStartRef} tabindex={0} class={`${prefixCls}-sentinel`} aria-hidden={true}></div>
+              <div class={`${prefixCls}-content`}>
+                <ɵHeader
+                  v-slots={slots}
+                  closable={closable.value}
+                  closeIcon={closeIcon.value}
+                  header={props.header}
+                  onClose={close}
+                />
+                <div class={`${prefixCls}-body`}>{slots.default?.()}</div>
+                <ɵFooter v-slots={slots} class={`${prefixCls}-footer`} footer={props.footer}></ɵFooter>
               </div>
-            </Transition>
-          </div>
-        </Transition>
+              <div ref={sentinelEndRef} tabindex={0} class={`${prefixCls}-sentinel`} aria-hidden={true}></div>
+            </div>
+          </Transition>
+        </div>
       )
     }
   },

packages/components/drawer/src/types.ts

@@ -33,6 +33,10 @@ export const drawerProps = {
     type: Boolean,
     default: undefined,
   },
+  animatable: {
+    type: Boolean,
+    default: true,
+  },
   closable: {
     type: Boolean,
     default: undefined,

packages/components/form/style/status.less

@@ -134,21 +134,20 @@
     }
 
     // time/date-picker
-    .@{idux-prefix}-time-picker, 
+    .@{idux-prefix}-time-picker,
     .@{idux-prefix}-time-range-picker,
-    .@{idux-prefix}-date-picker, 
+    .@{idux-prefix}-date-picker,
     .@{idux-prefix}-date-range-picker {
       &.@{idux-prefix}-trigger:not(.@{idux-prefix}-trigger-disabled),
-      &.@{idux-prefix}-trigger:hover:not(.@{idux-prefix}-trigger-disabled):not(.@{idux-prefix}-trigger-borderless){
+      &.@{idux-prefix}-trigger:hover:not(.@{idux-prefix}-trigger-disabled):not(.@{idux-prefix}-trigger-borderless) {
         border-color: @form-item-invalid-color;
       }
 
-      &.@{idux-prefix}-trigger-focused{
+      &.@{idux-prefix}-trigger-focused {
         border-color: @form-item-invalid-color;
         box-shadow: @form-item-invalid-box-shadow;
       }
     }
-
   }
 
   // === Validating ===

packages/components/menu/style/menu.less

@@ -111,7 +111,6 @@
     background-color: @menu-background-color;
     border-radius: @menu-overlay-border-radius;
     box-shadow: @menu-overlay-box-shadow;
-    transition: background-color @transition-duration-slow, width @transition-duration-slow;
 
     .@{menu-prefix} .@{menu-prefix}-item::after {
       border-right: 0;

packages/components/popover/src/Popover.tsx

@@ -23,11 +23,7 @@ export default defineComponent({
     const common = useGlobalConfig('common')
     const mergedPrefixCls = computed(() => `${common.prefixCls}-popover`)
     const config = useGlobalConfig('popover')
-    const { overlayRef, updatePopper, overlayProps, visible, setVisible } = ɵUseTooltipOverlay(
-      props,
-      config,
-      mergedPrefixCls,
-    )
+    const { overlayRef, updatePopper, overlayProps, setVisible } = ɵUseTooltipOverlay(props, config, mergedPrefixCls)
 
     expose({ updatePopper })
 
@@ -40,7 +36,6 @@ export default defineComponent({
           ref={overlayRef}
           class={prefixCls}
           {...overlayProps.value}
-          visible={visible.value}
           v-slots={{
             default: slots.default,
             content: () => renderContent(props, slots, closeIcon, setVisible, prefixCls),