@nanoporetech-digital/components-vue 8.7.1 → 8.8.0

package/dist/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@nanoporetech-digital/components-vue",
-  "version": "8.7.0",
+  "version": "8.7.2",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -1419,7 +1419,7 @@
               "required": false,
               "value": {
                 "kind": "expression",
-                "type": "\"false\" | \"true\""
+                "type": "boolean"
               }
             },
             {
@@ -4938,6 +4938,167 @@
             }
           ]
         },
+        {
+          "name": "NanoInputOtp",
+          "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-input-otp",
+          "description": "A component for entering one-time passwords (OTP) with multiple input fields.",
+          "source": {
+            "module": "@nanoporetech-digital/components/src/components/input-otp/input-otp.d.ts",
+            "symbol": "InputOtp"
+          },
+          "attributes": [
+            {
+              "name": "allow-invalid",
+              "description": "If `true`, allows the input to be completely filled with invalid values.\nBy default, if any input box contains an invalid value, the entire input group\nis marked as invalid.\nDefault is `false`.",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "If `true`, the user cannot interact with the input.",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "inputmode",
+              "description": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n\nFor numbers (type=\"number\"): \"numeric\"\nFor text (type=\"text\"): \"text\"",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\""
+              }
+            },
+            {
+              "name": "length",
+              "description": "The number of input boxes to display.",
+              "required": false,
+              "default": "6",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              }
+            },
+            {
+              "name": "pattern",
+              "description": "A regex pattern string for allowed characters. Defaults based on type.\n\nFor numbers (`type=\"number\"`): `\"[\\p{N}]\"`\nFor text (`type=\"text\"`): `\"[\\p{L}\\p{N}]\"`",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "readonly",
+              "description": "If `true`, the user cannot modify the value.",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "show-validity",
+              "description": "If `true`, shows a validity icon when all input boxes are filled.\nA check icon is shown if all values are valid, and an X icon is shown if any value is invalid.\nThis does not affect the `invalid` or `valid` states of the input group.\nDefault is `false`.",
+              "required": false,
+              "default": "false",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "type",
+              "description": "The type of input allowed in the input boxes.",
+              "required": false,
+              "default": "'number'",
+              "value": {
+                "kind": "expression",
+                "type": "\"number\" | \"text\""
+              }
+            },
+            {
+              "name": "value",
+              "description": "The value of the input group.",
+              "required": false,
+              "default": "''",
+              "value": {
+                "kind": "expression",
+                "type": "number | string"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "The default slot for the input description."
+            },
+            {
+              "name": "validity-icon",
+              "description": "A slot for a custom validity icon. If not provided, a default icon will be used."
+            }
+          ],
+          "events": [
+            {
+              "name": "nanoBlur",
+              "description": "Emitted when the input group loses focus.",
+              "arguments": [
+                {
+                  "name": "detail",
+                  "type": "FocusEvent"
+                }
+              ]
+            },
+            {
+              "name": "nanoChange",
+              "description": "The `nanoChange` event is fired when the user modifies the input's value.\nUnlike the `nanoInput` event, the `nanoChange` event is only fired when changes\nare committed, not as the user types.\n\nThe `nanoChange` event fires when the `<nano-input-otp>` component loses\nfocus after its value has changed.\n\nThis event will not emit when programmatically setting the `value` property.",
+              "arguments": [
+                {
+                  "name": "detail",
+                  "type": "InputOtpChangeEventDetail"
+                }
+              ]
+            },
+            {
+              "name": "nanoComplete",
+              "description": "Emitted when all input boxes have been filled with valid values.",
+              "arguments": [
+                {
+                  "name": "detail",
+                  "type": "InputOtpCompleteEventDetail"
+                }
+              ]
+            },
+            {
+              "name": "nanoFocus",
+              "description": "Emitted when the input group has focus.",
+              "arguments": [
+                {
+                  "name": "detail",
+                  "type": "FocusEvent"
+                }
+              ]
+            },
+            {
+              "name": "nanoInput",
+              "description": "The `nanoInput` event is fired each time the user modifies the input's value.\nUnlike the `nanoChange` event, the `nanoInput` event is fired for each alteration\nto the input's value. This typically happens for each keystroke as the user types.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`.",
+              "arguments": [
+                {
+                  "name": "detail",
+                  "type": "InputOtpInputEventDetail"
+                }
+              ]
+            }
+          ]
+        },
         {
           "name": "NanoIntersectionObserve",
           "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-intersection-observe",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components-vue",
-  "version": "8.7.1",
+  "version": "8.8.0",
   "sideEffects": false,
   "description": "Vue 3 wrapper for Nano Components",
   "repository": {
@@ -49,8 +49,8 @@
     "vue-tsc": "^2.1.6"
   },
   "dependencies": {
-    "@nanoporetech-digital/style": "8.7.1",
-    "@nanoporetech-digital/components": "8.7.1"
+    "@nanoporetech-digital/components": "8.8.0",
+    "@nanoporetech-digital/style": "8.8.0"
   },
   "gitHead": "cff1d0168dbe2193c1dc1a814ed1cb97b30cfc25",
   "vetur": {