@quidgest/ui 0.16.49 → 0.16.50

package/dist/json/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.16.49",
+  "version": "0.16.50",
   "components": [
     {
       "name": "QAccordion",
@@ -2675,16 +2675,67 @@
             "category": "Behavior"
           },
           {
-            "name": "focusTrap",
+            "name": "focusWrap",
             "type": {
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "Whether to enable focus trapping within the dialog.\nWhen enabled, focus will be constrained to elements within the dialog.",
+            "description": "Whether to enable focus wrapping within the dialog.\nWhen enabled, focus by tabbing will wrap around elements within the dialog.",
             "default": "true",
             "required": false,
             "category": "Behavior"
           },
+          {
+            "name": "initialFocus",
+            "type": {
+              "kind": "union",
+              "types": [
+                {
+                  "name": "other",
+                  "value": "null"
+                },
+                {
+                  "name": "string"
+                },
+                {
+                  "name": "object",
+                  "value": {}
+                }
+              ]
+            },
+            "description": "Element to set focus on when the focus wrap is activated.\nHas priority over focusWithinOnActivate",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "focusWithinOnActivate",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether to focus on the first focusable element within when\nactivating the focus wrap.",
+            "default": "true",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "closingFocus",
+            "type": {
+              "kind": "union",
+              "types": [
+                {
+                  "name": "string"
+                },
+                {
+                  "name": "object",
+                  "value": {}
+                }
+              ]
+            },
+            "description": "Element to set focus on when the dialog is closed.\nHas priority over returnFocusOnDeactivate.",
+            "required": false,
+            "category": "Behavior"
+          },
           {
             "name": "returnFocusOnDeactivate",
             "type": {
@@ -2857,6 +2908,11 @@
           "title": "Overflown",
           "description": "When the dialog content overflows, the header and footer remain visible while the body becomes scrollable.",
           "code": "<q-button label=\"Click me\" @click=\"modelValue = true\" />\n      <q-dialog v-model=\"modelValue\" v-bind=\"args\">\n        <template #body>\n          <div style=\"padding: 0 1rem;\">\n            <p v-for=\"i in 100\" :key=\"i\">\n              This is a long paragraph of content to demonstrate scrolling behavior within the dialog. Line {{ i }}.\n            </p>\n          </div>\n        </template>\n      </q-dialog>"
+        },
+        {
+          "title": "Focus On Close",
+          "description": "When the dialog is closed, a specific element will be focused.",
+          "code": "<q-button label=\"Click me\" @click=\"modelValue = true\" />\n\t\t\t<br /><br />\n\t\t\t<q-button id=\"focus-btn\" label=\"Focus\" />\n\t\t\t<q-dialog v-model=\"modelValue\" v-bind=\"args\" />"
         }
       ]
     },
@@ -3582,6 +3638,114 @@
         }
       ]
     },
+    {
+      "name": "QFocusWrap",
+      "description": "Causes the focus on elements within to wrap.",
+      "meta": {
+        "props": [
+          {
+            "name": "id",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "The component unique identifier.",
+            "required": false,
+            "category": "Identification"
+          },
+          {
+            "name": "active",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether to enable focus wrapping within the components contents.\nWhen enabled, focus will wrap from the last element to the first\nwhen tabbing forward and from the first element to the last\nwhen tabbing backward.",
+            "default": "true",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "initialFocus",
+            "type": {
+              "kind": "union",
+              "types": [
+                {
+                  "name": "other",
+                  "value": "null"
+                },
+                {
+                  "name": "string"
+                },
+                {
+                  "name": "object",
+                  "value": {}
+                }
+              ]
+            },
+            "description": "Element to set focus on when the focus wrap is activated.\nHas priority over focusWithinOnActivate",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "focusWithinOnActivate",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether to focus on the first focusable element within when\nactivating the focus wrap.",
+            "default": "true",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "closingFocus",
+            "type": {
+              "kind": "union",
+              "types": [
+                {
+                  "name": "other",
+                  "value": "null"
+                },
+                {
+                  "name": "string"
+                },
+                {
+                  "name": "object",
+                  "value": {}
+                }
+              ]
+            },
+            "description": "Element to set focus on when the focus wrap is deactivated.\nHas priority over returnFocusOnDeactivate.",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "returnFocusOnDeactivate",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether to return focus to the element that had focus before\nactivating the focus wrap.",
+            "required": false,
+            "category": "Behavior"
+          }
+        ],
+        "events": [],
+        "slots": [
+          {
+            "name": "default",
+            "description": ""
+          }
+        ]
+      },
+      "examples": [
+        {
+          "title": "Default",
+          "description": "The default focus wrap.",
+          "code": "<q-focus-wrap v-bind=\"args\">\n\t\t\t\t<q-button id=\"btn1\" label=\"Button 1\" />\n\t\t\t\t<q-button id=\"btn2\" label=\"Button 2\" />\n\t\t\t\t<q-button id=\"btn3\" label=\"Button 3\" />\n\t\t\t</q-focus-wrap>"
+        }
+      ]
+    },
     {
       "name": "QGroupBox",
       "description": "A container with a title that groups related content.",
@@ -4681,12 +4845,63 @@
             "category": "Behavior"
           },
           {
-            "name": "focusTrap",
+            "name": "focusWrap",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether to enable focus wrapping within the overlay.\nWhen enabled, focus by tabbing will wrap around elements within the overlay.",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "initialFocus",
+            "type": {
+              "kind": "union",
+              "types": [
+                {
+                  "name": "other",
+                  "value": "null"
+                },
+                {
+                  "name": "string"
+                },
+                {
+                  "name": "object",
+                  "value": {}
+                }
+              ]
+            },
+            "description": "Element to set focus on when the focus wrap is activated.\nHas priority over focusWithinOnActivate",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "focusWithinOnActivate",
             "type": {
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "Whether to enable focus trapping within the overlay.\nWhen enabled, focus will be constrained to elements within the overlay.",
+            "description": "Whether to focus on the first focusable element within when\nactivating the focus wrap.",
+            "default": "false",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "closingFocus",
+            "type": {
+              "kind": "union",
+              "types": [
+                {
+                  "name": "string"
+                },
+                {
+                  "name": "object",
+                  "value": {}
+                }
+              ]
+            },
+            "description": "Element to set focus on when the focus wrap is deactivated.\nHas priority over returnFocusOnDeactivate.",
             "required": false,
             "category": "Behavior"
           },

package/dist/manifest/components.json

@@ -22,6 +22,7 @@
   "QDropdownMenu",
   "QField",
   "QFileUpload",
+  "QFocusWrap",
   "QCol",
   "QContainer",
   "QRow",

package/dist/ui.css

@@ -3252,6 +3252,15 @@ body *::-webkit-scrollbar-track {
   outline: none;
 }
 
+.q-focus-wrap {
+  width: 0;
+  height: 0;
+  display: inline-block;
+}
+.q-focus-wrap:focus {
+  outline: 0;
+}
+
 .q-container {
   width: 100%;
   margin-left: auto;