feat(menu-select): support cascade mode (#1840)

varletjs · Dec 29, 2024 · f68f840 · f68f840
1 parent cf8f7bf
commit f68f840
Show file tree

Hide file tree

Showing 46 changed files with 1,195 additions and 175 deletions.
diff --git a/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue b/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue
@@ -102,17 +102,11 @@ export default defineComponent({
       checkboxes.forEach(({ sync }) => sync(props.modelValue))
     }
 
-    function resetWithAnimation() {
-      checkboxes.forEach((checkbox) => checkbox.resetWithAnimation())
-    }
-
     // expose
     function checkAll() {
       const checkedValues: any[] = checkboxes.map(({ checkedValue }) => checkedValue.value)
       const changedModelValue: any[] = uniq(checkedValues)
 
-      resetWithAnimation()
-
       call(props['onUpdate:modelValue'], changedModelValue)
 
       return changedModelValue
@@ -125,8 +119,6 @@ export default defineComponent({
         .map(({ checkedValue }) => checkedValue.value)
       const changedModelValue: any[] = uniq(checkedValues)
 
-      resetWithAnimation()
-
       call(props['onUpdate:modelValue'], changedModelValue)
 
       return changedModelValue

diff --git a/packages/varlet-ui/src/checkbox-group/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/checkbox-group/__tests__/__snapshots__/index.spec.js.snap
@@ -123,7 +123,7 @@ exports[`test checkbox group label is function 2`] = `
     <div class="var-checkbox__wrap">
       <div class="var-checkbox">
         <div class="var-checkbox__action var-checkbox--checked" tabindex="0">
-          <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon var-checkbox--with-animation" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
+          <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
           <!--v-if-->
           <div class="var-hover-overlay"></div>
         </div>
@@ -172,7 +172,7 @@ exports[`test checkbox group label is function 3`] = `
     <div class="var-checkbox__wrap">
       <div class="var-checkbox">
         <div class="var-checkbox__action var-checkbox--checked" tabindex="0">
-          <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon var-checkbox--with-animation" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
+          <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
           <!--v-if-->
           <div class="var-hover-overlay"></div>
         </div>
@@ -185,7 +185,7 @@ exports[`test checkbox group label is function 3`] = `
     <div class="var-checkbox__wrap">
       <div class="var-checkbox">
         <div class="var-checkbox__action var-checkbox--checked" tabindex="0">
-          <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon var-checkbox--with-animation" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
+          <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
           <!--v-if-->
           <div class="var-hover-overlay"></div>
         </div>
@@ -221,7 +221,7 @@ exports[`test checkbox group label is function 4`] = `
     <div class="var-checkbox__wrap">
       <div class="var-checkbox">
         <div class="var-checkbox__action var-checkbox--checked" tabindex="0">
-          <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon var-checkbox--with-animation" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
+          <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
           <!--v-if-->
           <div class="var-hover-overlay"></div>
         </div>
@@ -235,7 +235,7 @@ exports[`test checkbox group label is function 4`] = `
       <div class="var-checkbox">
         <div class="var-checkbox__action var-checkbox--unchecked" tabindex="0">
           <!--v-if-->
-          <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon var-checkbox--with-animation" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
+          <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
           <div class="var-hover-overlay"></div>
         </div>
         <div class="var-checkbox__text"><span>2-false</span></div>
@@ -441,7 +441,7 @@ exports[`test checkbox group validation 2`] = `
     <div class="var-checkbox__wrap">
       <div class="var-checkbox">
         <div class="var-checkbox__action var-checkbox--checked" tabindex="0">
-          <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon var-checkbox--with-animation" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
+          <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
           <!--v-if-->
           <div class="var-hover-overlay"></div>
         </div>
@@ -567,7 +567,7 @@ exports[`test checkbox validation 2`] = `
 "<div class="var-checkbox__wrap">
   <div class="var-checkbox">
     <div class="var-checkbox__action var-checkbox--checked" tabindex="0">
-      <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon var-checkbox--with-animation" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
+      <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
       <!--v-if-->
       <div class="var-hover-overlay"></div>
     </div>
@@ -610,7 +610,7 @@ exports[`validation with zod > checkbox 2`] = `
 "<div class="var-checkbox__wrap">
   <div class="var-checkbox">
     <div class="var-checkbox__action var-checkbox--checked" tabindex="0">
-      <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon var-checkbox--with-animation" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
+      <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
       <!--v-if-->
       <div class="var-hover-overlay"></div>
     </div>
@@ -677,7 +677,7 @@ exports[`validation with zod > checkbox group 2`] = `
     <div class="var-checkbox__wrap">
       <div class="var-checkbox">
         <div class="var-checkbox__action var-checkbox--checked" tabindex="0">
-          <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon var-checkbox--with-animation" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
+          <!--v-if--><i class="var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon" style="transition-duration: 0ms;" var-checkbox-cover=""></i>
           <!--v-if-->
           <div class="var-hover-overlay"></div>
         </div>

diff --git a/packages/varlet-ui/src/checkbox-group/__tests__/index.spec.js b/packages/varlet-ui/src/checkbox-group/__tests__/index.spec.js
@@ -72,7 +72,7 @@ test('test checkbox onClick & onChange', async () => {
 
   await wrapper.find('.var-checkbox').trigger('click')
   expect(onClick).toHaveBeenCalledTimes(1)
-  expect(onChange).lastCalledWith(true)
+  expect(onChange).lastCalledWith(true, false)
 
   wrapper.unmount()
 })
@@ -146,16 +146,20 @@ test('test checkbox readonly', async () => {
   wrapper.unmount()
 })
 
-test('test checkbox indeterminate', () => {
+test('test checkbox indeterminate', async () => {
+  const onChange = vi.fn()
   const wrapper = mount(VarCheckbox, {
     props: {
       modelValue: false,
       indeterminate: true,
+      onChange,
     },
   })
 
   expect(wrapper.html()).toMatchSnapshot()
 
+  await wrapper.find('.var-checkbox').trigger('click')
+  expect(onChange).lastCalledWith(false, false)
   wrapper.unmount()
 })
 

diff --git a/packages/varlet-ui/src/checkbox/Checkbox.vue b/packages/varlet-ui/src/checkbox/Checkbox.vue
@@ -19,28 +19,13 @@
         @blur="isFocusing = false"
       >
         <slot name="indeterminate-icon" v-if="isIndeterminate">
-          <var-icon
-            :class="classes(n('icon'), [withAnimation, n('--with-animation')])"
-            name="minus-box"
-            :size="iconSize"
-            var-checkbox-cover
-          />
+          <var-icon :class="n('icon')" name="minus-box" :size="iconSize" var-checkbox-cover />
         </slot>
         <slot name="checked-icon" v-if="checked && !isIndeterminate">
-          <var-icon
-            :class="classes(n('icon'), [withAnimation, n('--with-animation')])"
-            name="checkbox-marked"
-            :size="iconSize"
-            var-checkbox-cover
-          />
+          <var-icon :class="n('icon')" name="checkbox-marked" :size="iconSize" var-checkbox-cover />
         </slot>
         <slot name="unchecked-icon" v-if="!checked && !isIndeterminate">
-          <var-icon
-            :class="classes(n('icon'), [withAnimation, n('--with-animation')])"
-            name="checkbox-blank-outline"
-            :size="iconSize"
-            var-checkbox-cover
-          />
+          <var-icon :class="n('icon')" name="checkbox-blank-outline" :size="iconSize" var-checkbox-cover />
         </slot>
         <var-hover-overlay
           :hovering="!disabled && !formDisabled && hovering"
@@ -99,7 +84,6 @@ export default defineComponent({
     const isIndeterminate = useVModel(props, 'indeterminate')
     const checked = computed(() => value.value === props.checkedValue)
     const checkedValue = computed(() => props.checkedValue)
-    const withAnimation = ref(false)
     const { checkboxGroup, bindCheckboxGroup } = useCheckboxGroup()
     const { hovering, handleHovering } = useHoverOverlay()
     const { form, bindForm } = useForm()
@@ -118,7 +102,6 @@ export default defineComponent({
       validate,
       resetValidation,
       reset,
-      resetWithAnimation,
     }
 
     call(bindCheckboxGroup, checkboxProvider)
@@ -138,9 +121,7 @@ export default defineComponent({
       const { checkedValue, onChange } = props
 
       value.value = changedValue
-      isIndeterminate.value = false
-
-      call(onChange, value.value)
+      call(onChange, value.value, isIndeterminate.value)
       validateWithTrigger('onChange')
       changedValue === checkedValue ? checkboxGroup?.onChecked(checkedValue) : checkboxGroup?.onUnchecked(checkedValue)
     }
@@ -158,7 +139,13 @@ export default defineComponent({
         return
       }
 
-      withAnimation.value = true
+      if (isIndeterminate.value === true) {
+        isIndeterminate.value = false
+        call(props.onChange, value.value, isIndeterminate.value)
+        validateWithTrigger('onChange')
+        return
+      }
+
       const maximum = checkboxGroup ? checkboxGroup.checkedCount.value >= Number(checkboxGroup.max.value) : false
 
       if (!checked.value && maximum) {
@@ -177,10 +164,6 @@ export default defineComponent({
       value.value = values.includes(checkedValue) ? checkedValue : uncheckedValue
     }
 
-    function resetWithAnimation() {
-      withAnimation.value = false
-    }
-
     // expose
     function reset() {
       value.value = props.uncheckedValue
@@ -235,7 +218,6 @@ export default defineComponent({
       action,
       isFocusing,
       isIndeterminate,
-      withAnimation,
       checked,
       errorMessage,
       checkboxGroupErrorMessage: checkboxGroup?.errorMessage,

diff --git a/packages/varlet-ui/src/checkbox/checkbox.less b/packages/varlet-ui/src/checkbox/checkbox.less
@@ -8,23 +8,6 @@
   --checkbox-icon-size: 24px;
 }
 
-@keyframes var-vibrate-animation {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  50% {
-    opacity: 0.8;
-    transform: scale(0.8);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 .var-checkbox {
   display: flex;
   align-items: center;
@@ -58,10 +41,6 @@
     color: var(--checkbox-text-color);
   }
 
-  &--with-animation {
-    animation: var-vibrate-animation 0.25s;
-  }
-
   &--checked {
     color: var(--checkbox-checked-color);
   }

diff --git a/packages/varlet-ui/src/checkbox/docs/en-US.md b/packages/varlet-ui/src/checkbox/docs/en-US.md
@@ -21,7 +21,7 @@
 | Event | Description | Arguments |
 | --- | --- | --- |
 | `click` | Triggered on Click | `e: Event` |
-| `change` | Triggered on change | `value: any` |
+| `change` | Triggered on change | `value: any, indeterminate: boolean` |
 
 ### Slots
 

diff --git a/packages/varlet-ui/src/checkbox/docs/zh-CN.md b/packages/varlet-ui/src/checkbox/docs/zh-CN.md
@@ -21,7 +21,7 @@
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
 | `click` | 点击时触发 | `e: Event` |
-| `change` | 状态变更时触发 | `value: any` |
+| `change` | 状态变更时触发 | `value: any, indeterminate: boolean` |
 
 ### 插槽
 

diff --git a/packages/varlet-ui/src/checkbox/props.ts b/packages/varlet-ui/src/checkbox/props.ts
@@ -32,7 +32,7 @@ export const props = {
   },
   rules: [Array, Function, Object] as PropType<any>,
   onClick: defineListenerProp<(e: Event) => void>(),
-  onChange: defineListenerProp<(value: any) => void>(),
+  onChange: defineListenerProp<(value: any, indeterminate: boolean) => void>(),
   'onUpdate:modelValue': defineListenerProp<(value: any) => void>(),
   'onUpdate:indeterminate': defineListenerProp<(value: boolean) => void>(),
 }
diff --git a/packages/varlet-ui/src/checkbox/provide.ts b/packages/varlet-ui/src/checkbox/provide.ts
@@ -7,7 +7,6 @@ export interface CheckboxProvider extends Validation {
   checkedValue: ComputedRef
   checked: ComputedRef<boolean>
   sync(values: Array<any>): void
-  resetWithAnimation(): void
 }
 
 export function useCheckboxGroup() {