@varlet/ui 3.8.1 → 3.8.2

package/highlight/web-types.en-US.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "3.8.1",
+  "version": "3.8.2",
   "name": "VARLET",
   "contributions": {
     "html": {

package/highlight/web-types.zh-CN.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "3.8.1",
+  "version": "3.8.2",
   "name": "VARLET",
   "contributions": {
     "html": {

package/lib/varlet.cjs.js

@@ -2589,36 +2589,41 @@ function isDisplayNoneElement(element) {
   return false;
 }
 const focusableSelector = ["button", "input", "select", "textarea", "[tabindex]", "[href]"].map((s) => `${s}:not([disabled])`).join(", ");
-function focusChildElementByKey(hostElement, parentElement, key3) {
-  var _a;
+function focusChildElementByKey(referenceElement, parentElement, key3, beforeFocus) {
   const focusableElements = Array.from(parentElement.querySelectorAll(focusableSelector)).filter(
     (element) => !isDisplayNoneElement(element)
   );
   if (!focusableElements.length) {
     return;
   }
-  const isActiveHostElement = [hostElement, ...Array.from(hostElement.querySelectorAll(focusableSelector))].findIndex(
+  const isActiveInReferenceElements = [referenceElement, ...Array.from(referenceElement.querySelectorAll(focusableSelector))].findIndex(
     (el) => el === document.activeElement
   ) !== -1;
   const activeElementIndex = Array.from(focusableElements).findIndex((el) => el === document.activeElement);
   if (key3 === "ArrowDown") {
-    if (isActiveHostElement && activeElementIndex === -1 || activeElementIndex === focusableElements.length - 1) {
-      focusableElements[0].focus();
+    if (isActiveInReferenceElements && activeElementIndex === -1 || activeElementIndex === focusableElements.length - 1) {
+      focus(focusableElements[0]);
       return;
     }
     if (activeElementIndex !== -1 && activeElementIndex < focusableElements.length - 1) {
-      focusableElements[activeElementIndex + 1].focus();
+      focus(focusableElements[activeElementIndex + 1]);
       return;
     }
   }
   if (key3 === "ArrowUp") {
-    if (isActiveHostElement && activeElementIndex === -1 || activeElementIndex === 0) {
-      (_a = focusableElements[focusableElements.length - 1]) == null ? void 0 : _a.focus();
+    if (isActiveInReferenceElements && activeElementIndex === -1 || activeElementIndex === 0) {
+      focus(focusableElements[focusableElements.length - 1]);
       return;
     }
     if (activeElementIndex > 0) {
-      focusableElements[activeElementIndex - 1].focus();
+      focus(focusableElements[activeElementIndex - 1]);
+    }
+  }
+  function focus(nextActiveElement) {
+    if (beforeFocus && !beforeFocus(document.activeElement, nextActiveElement, isActiveInReferenceElements)) {
+      return;
     }
+    nextActiveElement.focus();
   }
 }
 var __async$l = (__this, __arguments, generator) => {
@@ -8052,8 +8057,31 @@ const __sfc__$1i = vue.defineComponent({
         return;
       }
       if (key3 === "ArrowDown" || key3 === "ArrowUp") {
-        focusChildElementByKey(menu.value.$el, menuOptionsRef.value, key3);
+        focusChildElementByKey(
+          menu.value.$el,
+          menuOptionsRef.value,
+          key3,
+          (activeElement, nextActiveElement, isActiveInReferenceElements) => {
+            if (isActiveInReferenceElements) {
+              return true;
+            }
+            return getActiveElementParent(activeElement) === getActiveElementParent(nextActiveElement);
+          }
+        );
+      }
+    }
+    function getActiveElementParent(activeElement) {
+      var _a, _b, _c;
+      if (activeElement.classList.contains("var-menu-option--children-trigger")) {
+        return (_a = activeElement.parentNode) == null ? void 0 : _a.parentNode;
+      }
+      if (activeElement.classList.contains("var-checkbox__action")) {
+        const optionElement = (_c = (_b = activeElement.parentNode) == null ? void 0 : _b.parentNode) == null ? void 0 : _c.parentNode;
+        if (optionElement) {
+          return getActiveElementParent(optionElement);
+        }
       }
+      return activeElement.parentNode;
     }
     function allowChildrenClose(option) {
       var _a;
@@ -31478,7 +31506,7 @@ withInstall(stdin_default$1);
 withPropsDefaultsSetter(stdin_default$1, props);
 const _WatermarkComponent = stdin_default$1;
 var stdin_default = stdin_default$1;
-const version = "3.8.1";
+const version = "3.8.2";
 function install(app) {
   stdin_default$5X.install && app.use(stdin_default$5X);
   stdin_default$5V.install && app.use(stdin_default$5V);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.8.1",
+  "version": "3.8.2",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -48,9 +48,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "3.8.1",
-    "@varlet/use": "3.8.1",
-    "@varlet/shared": "3.8.1"
+    "@varlet/icons": "3.8.2",
+    "@varlet/shared": "3.8.2",
+    "@varlet/use": "3.8.2"
   },
   "devDependencies": {
     "@types/node": "^18.7.18",
@@ -66,9 +66,9 @@
     "vue": "3.4.21",
     "vue-router": "4.2.0",
     "zod": "^3.23.8",
-    "@varlet/touch-emulator": "3.8.1",
-    "@varlet/ui": "3.8.1",
-    "@varlet/cli": "3.8.1"
+    "@varlet/cli": "3.8.2",
+    "@varlet/touch-emulator": "3.8.2",
+    "@varlet/ui": "3.8.2"
   },
   "scripts": {
     "dev": "varlet-cli dev",