@quidgest/ui 0.17.7 → 0.17.9

package/dist/json/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.17.7",
+  "version": "0.17.9",
   "components": [
     {
       "name": "QAccordion",
@@ -4739,6 +4739,324 @@
         }
       ]
     },
+    {
+      "name": "QObfuscation",
+      "description": "Permission-based data obfuscation for consulta / sensitive fields. - No permission: plain \"Restricted\" (or bullets) — no action. - Can reveal: a padlock toggles the value. When revealed, either: - place scoped-slot `qObfuscationHideAction` on the field's `label.append` (QObfuscation then hides its own label/padlock), or - omit it and QObfuscation keeps its label with the hide padlock. - Set `loading` while fetching on reveal (before the value becomes visible).",
+      "meta": {
+        "props": [
+          {
+            "name": "revealed",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "",
+            "required": false
+          },
+          {
+            "name": "id",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "The component unique identifier.",
+            "required": false,
+            "category": "Identification"
+          },
+          {
+            "name": "label",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "The label of the input.",
+            "required": false,
+            "category": "Content"
+          },
+          {
+            "name": "required",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
+            "default": "false",
+            "required": false,
+            "category": "State"
+          },
+          {
+            "name": "for",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "The form field associated with the label.",
+            "required": false,
+            "category": "Accessibility"
+          },
+          {
+            "name": "labelPosition",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "right",
+                "left",
+                "center",
+                "topleft",
+                "topright"
+              ]
+            },
+            "description": "Position of the label relative to the input field.\n- 'left': Label appears to the left of the input\n- 'center': Label appears above the input, centered\n- 'right': Label appears to the right of the input\n- 'topleft': Label appears above the input, aligned to the left\n- 'topright': Label appears above the input, aligned to the right",
+            "default": "topleft",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "size",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "medium",
+                "small",
+                "large",
+                "block",
+                "xlarge",
+                "xxlarge",
+                "mini"
+              ]
+            },
+            "description": "The size category of the field.",
+            "default": "medium",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "readonly",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether the input is readonly.",
+            "required": false,
+            "category": "State"
+          },
+          {
+            "name": "disabled",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether the input is disabled.",
+            "required": false,
+            "category": "State"
+          },
+          {
+            "name": "invalid",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether the input is invalid.",
+            "required": false,
+            "category": "State"
+          },
+          {
+            "name": "revealable",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "When false, the value stays masked with no reveal control (PDF \"Obfuscation\").\nWhen true, the user can reveal and hide the slot content (PDF \"Allow data to be revealed\").",
+            "default": "false",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "loading",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "When true, shows the reveal button in a loading state while sensitive\ndata is being fetched. Forwarded to the reveal `QButton`.",
+            "default": "false",
+            "required": false,
+            "category": "State"
+          },
+          {
+            "name": "mask",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "restricted",
+                "bullets"
+              ]
+            },
+            "description": "Mask style shown while the slot content is hidden.",
+            "default": "restricted",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "bulletCount",
+            "type": {
+              "kind": "primitive",
+              "name": "number"
+            },
+            "description": "Number of bullet characters when `mask` is `bullets`.",
+            "default": "12",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "icons",
+            "type": {
+              "kind": "object",
+              "fields": {}
+            },
+            "description": "Custom icon configurations.",
+            "default": "DEFAULT_ICONS",
+            "required": false,
+            "category": "Configuration"
+          },
+          {
+            "name": "texts",
+            "type": {
+              "kind": "unknown",
+              "raw": "Partial<{ restricted: string; showData: string; hideData: string; }> | undefined"
+            },
+            "description": "Custom text configurations.",
+            "default": "DEFAULT_TEXTS",
+            "required": false,
+            "category": "Configuration"
+          }
+        ],
+        "events": [
+          {
+            "name": "hide",
+            "description": "",
+            "type": "[]"
+          },
+          {
+            "name": "update:revealed",
+            "description": "",
+            "type": "[value: boolean]"
+          },
+          {
+            "name": "reveal",
+            "description": "",
+            "type": "[]"
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": ""
+          },
+          {
+            "name": "reveal",
+            "description": ""
+          },
+          {
+            "name": "mask",
+            "description": ""
+          },
+          {
+            "name": "label.prepend",
+            "description": ""
+          },
+          {
+            "name": "label.append",
+            "description": ""
+          },
+          {
+            "name": "extras",
+            "description": ""
+          }
+        ]
+      },
+      "examples": [
+        {
+          "title": "Obfuscation",
+          "description": "Role without permission — plain Restricted, no reveal control.",
+          "code": "<QObfuscation :label=\"Field label\" :revealable=\"false\" />"
+        },
+        {
+          "title": "Obfuscation Bullets",
+          "description": "Bullet mask when obfuscation uses dots instead of Restricted.",
+          "code": "<QObfuscation :label=\"Field label\" :revealable=\"false\" :mask=\"bullets\" :bullet-count=\"12\" />"
+        },
+        {
+          "title": "Revealable Hidden",
+          "description": "Allow reveal — masked state displays only a padlock (PDF step 1).",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\">\n\t\t\t\tField value revealed\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Shown",
+          "description": "Allow reveal — value shown with an open padlock on the slotted field label.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<q-text-field :label=\"args.label\" v-model=\"value\">\n\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-text-field>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Text Field",
+          "description": "Editable text field gated behind the padlock control.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<q-text-field v-model=\"taxId\" :label=\"args.label\">\n\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-text-field>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Password Field",
+          "description": "Password field — hide control on the field label.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<q-password-field v-model=\"secret\" :label=\"args.label\">\n\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-password-field>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Text Area",
+          "description": "Multi-line notes gated behind the padlock.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<q-text-area v-model=\"notes\" :label=\"args.label\" rows=\"3\">\n\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-text-area>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Combobox",
+          "description": "Combobox with suggestions — hide control on the field label.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<q-combobox v-model=\"city\" :label=\"args.label\" :items=\"items\">\n\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-combobox>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Color Picker",
+          "description": "Color picker — hide control on the field label.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<q-color-picker v-model=\"color\" :label=\"args.label\">\n\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-color-picker>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Select",
+          "description": "Select has no `label.append` — omit the hide action so QObfuscation keeps its own label and padlock while gating the select.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\">\n\t\t\t\t<q-select v-model=\"classification\" :items=\"items\" />\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Date Time Picker",
+          "description": "Date picker has no `label.append` — QObfuscation keeps the label and padlock.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\">\n\t\t\t\t<q-date-time-picker\n\t\t\t\t\tv-model=\"dateOfBirth\"\n\t\t\t\t\tformat=\"dd/MM/yyyy\"\n\t\t\t\t\tplaceholder=\"Choose date\" />\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Checkbox",
+          "description": "Checkbox has no `label.append` — place `qObfuscationHideAction` beside the control.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<div style=\"display: inline-flex; align-items: center; gap: 0.5rem;\">\n\t\t\t\t\t<q-checkbox v-model=\"accepted\" :label=\"args.label\" />\n\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t</div>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Radio Group",
+          "description": "Radio group has no `label.append` — place `qObfuscationHideAction` beside the group.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<div style=\"display: flex; align-items: flex-start; gap: 0.5rem;\">\n\t\t\t\t\t<q-radio-group v-model=\"plan\" :label=\"args.label\">\n\t\t\t\t\t\t<q-radio-button label=\"Basic\" value=\"basic\" />\n\t\t\t\t\t\t<q-radio-button label=\"Standard\" value=\"standard\" />\n\t\t\t\t\t\t<q-radio-button label=\"Premium\" value=\"premium\" />\n\t\t\t\t\t</q-radio-group>\n\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t</div>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Field Variants",
+          "description": "Several field types together — pattern gallery.",
+          "code": "<div style=\"display: flex; flex-direction: column; gap: 1.25rem; max-width: 28rem;\">\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Tax ID\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedText\"\n\t\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t\t<q-text-field v-model=\"taxId\" label=\"Tax ID\">\n\t\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</q-text-field>\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"API secret\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedPassword\"\n\t\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t\t<q-password-field v-model=\"secret\" label=\"API secret\">\n\t\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</q-password-field>\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Private notes\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedNotes\"\n\t\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t\t<q-text-area v-model=\"notes\" label=\"Private notes\" rows=\"3\">\n\t\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</q-text-area>\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Home city\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedCity\"\n\t\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t\t<q-combobox v-model=\"city\" label=\"Home city\" :items=\"comboboxItems\">\n\t\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</q-combobox>\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Brand accent\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedColor\"\n\t\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t\t<q-color-picker v-model=\"color\" label=\"Brand accent\">\n\t\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</q-color-picker>\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Classification\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedSelect\">\n\t\t\t\t\t<q-select v-model=\"classification\" :items=\"selectItems\" />\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Date of birth\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedDate\">\n\t\t\t\t\t<q-date-time-picker\n\t\t\t\t\t\tv-model=\"dateOfBirth\"\n\t\t\t\t\t\tformat=\"dd/MM/yyyy\"\n\t\t\t\t\t\tplaceholder=\"Choose date\" />\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Terms accepted\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedCheckbox\"\n\t\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t\t<div style=\"display: inline-flex; align-items: center; gap: 0.5rem;\">\n\t\t\t\t\t\t<q-checkbox v-model=\"accepted\" label=\"Terms accepted\" />\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</div>\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Subscription plan\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedRadio\"\n\t\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t\t<div style=\"display: flex; align-items: flex-start; gap: 0.5rem;\">\n\t\t\t\t\t\t<q-radio-group v-model=\"plan\" label=\"Subscription plan\">\n\t\t\t\t\t\t\t<q-radio-button label=\"Basic\" value=\"basic\" />\n\t\t\t\t\t\t\t<q-radio-button label=\"Standard\" value=\"standard\" />\n\t\t\t\t\t\t\t<q-radio-button label=\"Premium\" value=\"premium\" />\n\t\t\t\t\t\t</q-radio-group>\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</div>\n\t\t\t\t</q-obfuscation>\n\t\t\t</div>"
+        },
+        {
+          "title": "Loading",
+          "description": "Simulated server fetch after reveal — spinner until data is ready.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\t:loading=\"loading\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\t@hide=\"onHide\">\n\t\t\t\t<template #reveal>\n\t\t\t\t\t<q-button\n\t\t\t\t\t\tvariant=\"text\"\n\t\t\t\t\t\tborderless\n\t\t\t\t\t\tblock\n\t\t\t\t\t\tclass=\"q-obfuscation__action\"\n\t\t\t\t\t\t:loading=\"loading\"\n\t\t\t\t\t\tlabel=\"Show data\"\n\t\t\t\t\t\tdata-testid=\"q-obfuscation__reveal\"\n\t\t\t\t\t\t@click=\"fetchAndReveal\">\n\t\t\t\t\t\t<q-icon icon=\"lock\" class=\"q-obfuscation__icon\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t\t{{ value }}\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Multiple Fields",
+          "description": "PDF-style consulta grid: mixed restricted vs revealable fields.",
+          "code": "<div style=\"display: grid; grid-template-columns: 10rem 1fr 10rem 1fr; gap: 0.75rem 1.5rem; max-width: 44rem; align-items: baseline;\">\n\t\t\t\t<span style=\"opacity: 0.8;\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation :revealable=\"false\" />\n\n\t\t\t\t<span style=\"opacity: 0.8;\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedA\">\n\t\t\t\t\tField value revealed\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<span style=\"opacity: 0.8;\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation :revealable=\"false\" />\n\n\t\t\t\t<span style=\"opacity: 0.8;\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation\n\t\t\t\t\t:revealable=\"true\"\n\t\t\t\t\tv-model:revealed=\"revealedB\">\n\t\t\t\t\tField value revealed\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<span style=\"opacity: 0.8;\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation :revealable=\"false\" mask=\"bullets\" />\n\n\t\t\t\t<span style=\"opacity: 0.8;\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation :revealable=\"false\" />\n\t\t\t</div>"
+        }
+      ]
+    },
     {
       "name": "QOverlay",
       "description": "A generic overlay for creating floating elements.",
@@ -6535,14 +6853,14 @@
             "type": "[value: string]"
           },
           {
-            "name": "click:item",
+            "name": "resize",
             "description": "",
-            "type": "[id: string]"
+            "type": "[width: number]"
           },
           {
-            "name": "resize",
+            "name": "click:item",
             "description": "",
-            "type": "[width: number]"
+            "type": "[id: string]"
           },
           {
             "name": "resize:start",

package/dist/manifest/components.json

@@ -39,6 +39,7 @@
   "QListItem",
   "QListItemGroup",
   "QMeter",
+  "QObfuscation",
   "QOverlay",
   "QPasswordField",
   "QPopover",