feat: wip

varletjs · Dec 25, 2024 · 2531eb0 · 2531eb0
1 parent 1f94525
commit 2531eb0
Show file tree

Hide file tree

Showing 11 changed files with 313 additions and 68 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/Checkbox.vue b/packages/varlet-ui/src/checkbox/Checkbox.vue
@@ -84,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()
@@ -103,7 +102,6 @@ export default defineComponent({
       validate,
       resetValidation,
       reset,
-      resetWithAnimation,
     }
 
     call(bindCheckboxGroup, checkboxProvider)
@@ -143,7 +141,6 @@ export default defineComponent({
         return
       }
 
-      withAnimation.value = true
       const maximum = checkboxGroup ? checkboxGroup.checkedCount.value >= Number(checkboxGroup.max.value) : false
 
       if (!checked.value && maximum) {
@@ -162,10 +159,6 @@ export default defineComponent({
       value.value = values.includes(checkedValue) ? checkedValue : uncheckedValue
     }
 
-    function resetWithAnimation() {
-      withAnimation.value = false
-    }
-
     // expose
     function reset() {
       value.value = props.uncheckedValue
@@ -220,7 +213,6 @@ export default defineComponent({
       action,
       isFocusing,
       isIndeterminate,
-      withAnimation,
       checked,
       errorMessage,
       checkboxGroupErrorMessage: checkboxGroup?.errorMessage,

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

diff --git a/packages/varlet-ui/src/menu-select/MenuChildren.vue b/packages/varlet-ui/src/menu-select/MenuChildren.vue
@@ -21,7 +21,7 @@
       :disabled="option.disabled"
       :highlight="highlightOptions.includes(option)"
       @key-arrow-x="handleArrowRight"
-      @mouseenter="handleTriggerMouseenter"
+      @mouseenter="handleMouseenter"
     />
 
     <template #menu v-if="options.length">
@@ -34,19 +34,19 @@
             :option="option"
             :options="option[childrenKey]"
             :highlight-options="highlightOptions"
-            :disabled="option.disabled || !show"
+            :disabled="option.disabled"
             @key-arrow-x="handleArrowLeft"
-            @trigger-mouseenter="allowChildrenClose(option)"
+            @key-arrow-right-open="allowChildrenClose(option)"
+            @mouseenter="allowChildrenClose(option)"
           />
-
           <var-menu-option
             v-else
             :label="option[labelKey]"
             :value="option[valueKey]"
             :option="option"
             :ripple="option.ripple"
-            :disabled="option.disabled || !show"
-            @keyboard-trigger="handleArrowLeft"
+            :disabled="option.disabled"
+            @key-arrow-x="handleArrowLeft"
             @mouseenter="allowChildrenClose()"
           />
         </template>
@@ -80,8 +80,9 @@ export default defineComponent({
       required: true,
     },
     highlightOptions: pickProps(menuSelectProps, 'options'),
-    onKeyboardTrigger: defineListenerProp<(trigger: 'ArrowLeft' | 'ArrowRight') => void>(),
-    onTriggerMouseenter: defineListenerProp<() => void>(),
+    onKeyArrowX: defineListenerProp<(trigger: 'ArrowLeft' | 'ArrowRight') => void>(),
+    onKeyArrowRightOpen: defineListenerProp<() => void>(),
+    onMouseenter: defineListenerProp<() => void>(),
     ...pickProps(menuSelectProps, ['options', 'valueKey', 'labelKey', 'childrenKey']),
   },
   setup(props) {
@@ -102,12 +103,13 @@ export default defineComponent({
     )
 
     async function handleArrowRight(key: 'ArrowRight' | 'ArrowLeft') {
-      call(props.onKeyboardTrigger, key)
+      call(props.onKeyArrowX, key)
 
       if (key !== 'ArrowRight') {
         return
       }
 
+      call(props.onKeyArrowRightOpen)
       menu.value?.open()
       await raf()
       focusChildElementByKey(menu.value!.$el, menuOptions.value!, 'ArrowDown')
@@ -118,7 +120,8 @@ export default defineComponent({
         return
       }
 
-      menu.value?.close()
+      allowClose()
+      close()
       trigger.value?.$el.focus()
     }
 
@@ -148,8 +151,8 @@ export default defineComponent({
       })
     }
 
-    function handleTriggerMouseenter() {
-      call(props.onTriggerMouseenter)
+    function handleMouseenter() {
+      call(props.onMouseenter)
     }
 
     return {
@@ -162,7 +165,7 @@ export default defineComponent({
       close,
       handleArrowLeft,
       handleArrowRight,
-      handleTriggerMouseenter,
+      handleMouseenter,
       allowClose,
       allowChildrenClose,
     }

diff --git a/packages/varlet-ui/src/menu-select/MenuSelect.vue b/packages/varlet-ui/src/menu-select/MenuSelect.vue
@@ -31,29 +31,27 @@
         ref="menuOptionsRef"
         :class="classes(n('menu'), formatElevation(elevation, 3), [scrollable, n('--scrollable')])"
       >
-        <template v-if="options.length">
-          <template v-for="option in options" :key="option[valueKey]">
-            <var-menu-children
-              ref="menuChildren"
-              v-if="option[childrenKey]"
-              :parent-show="show"
-              :option="option"
-              :options="option[childrenKey]"
-              :highlight-options="highlightOptions"
-              :disabled="option.disabled"
-              @trigger-mouseenter="allowChildrenClose(option)"
-            />
-
-            <var-menu-option
-              v-else
-              :label="option[labelKey]"
-              :value="option[valueKey]"
-              :option="option"
-              :ripple="option.ripple"
-              :disabled="option.disabled"
-              @mouseenter="allowChildrenClose()"
-            />
-          </template>
+        <template v-for="option in options" :key="option[valueKey]">
+          <var-menu-children
+            ref="menuChildren"
+            v-if="option[childrenKey]"
+            :parent-show="show"
+            :option="option"
+            :options="option[childrenKey]"
+            :highlight-options="highlightOptions"
+            :disabled="option.disabled"
+            @key-arrow-right-open="allowChildrenClose(option)"
+            @mouseenter="allowChildrenClose(option)"
+          />
+          <var-menu-option
+            v-else
+            :label="option[labelKey]"
+            :value="option[valueKey]"
+            :option="option"
+            :ripple="option.ripple"
+            :disabled="option.disabled"
+            @mouseenter="allowChildrenClose()"
+          />
         </template>
 
         <slot name="options" />