@quidgest/ui 0.17.8 → 0.17.9

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.17.8
+ * Quidgest UI v0.17.9
  * (c) 2026 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -2197,6 +2197,114 @@ $q-carousel-height-md: 300px;
 @media (min-width: $breakpoint-xxl) {
   @include generate-cols('-xxl');
 }
+
+.q-spacer {
+  flex: 1 1 0;
+}
+$q-spacers: (
+  0: 0,
+  1: $space-base * 0.25,
+  2: $space-base * 0.5,
+  3: $space-base,
+  4: $space-base * 1.5,
+  5: $space-base * 3
+) !default;
+$q-breakpoints: (
+  sm: $breakpoint-sm,
+  md: $breakpoint-md,
+  lg: $breakpoint-lg,
+  xl: $breakpoint-xl,
+  xxl: $breakpoint-xxl
+) !default;
+$q-spacing-sides: (
+  null: '',
+  
+  t: 't',
+  
+  b: 'b',
+  
+  l: 'l',
+  
+  r: 'r',
+  
+  x: 'x',
+  
+  y: 'y' 
+) !default;
+@mixin q-media-up($breakpoint) {
+  $value: map.get($q-breakpoints, $breakpoint);
+  @if $value {
+    @media (min-width: $value) {
+      @content;
+    }
+  } @else {
+    @warn "Breakpoint `#{$breakpoint}` not found in $q-breakpoints.";
+  }
+}
+@mixin q-emit-spacing($property, $side, $value) {
+  @if not $side {
+    #{$property}: $value;
+  } @else if $side == t {
+    #{$property}-top: $value;
+  } @else if $side == b {
+    #{$property}-bottom: $value;
+  } @else if $side == l {
+    #{$property}-left: $value;
+  } @else if $side == r {
+    #{$property}-right: $value;
+  } @else if $side == x {
+    #{$property}-left: $value;
+    #{$property}-right: $value;
+  } @else if $side == y {
+    #{$property}-top: $value;
+    #{$property}-bottom: $value;
+  } @else {
+    @warn "Unknown side `#{$side}` used for spacing generation.";
+  }
+}
+@mixin q-generate-responsive-spacing($property, $short) {
+  
+  @each $size, $length in $q-spacers {
+    @each $sideKey, $sideSuffix in $q-spacing-sides {
+      .q-#{$short}#{$sideSuffix}-#{$size} {
+        @include q-emit-spacing($property, $sideKey, $length);
+      }
+    }
+  }
+  
+  @each $breakpoint, $bpValue in $q-breakpoints {
+    @include q-media-up($breakpoint) {
+      @each $size, $length in $q-spacers {
+        @each $sideKey, $sideSuffix in $q-spacing-sides {
+          .q-#{$short}#{$sideSuffix}-#{$breakpoint}-#{$size} {
+            @include q-emit-spacing($property, $sideKey, $length);
+          }
+        }
+      }
+    }
+  }
+}
+@mixin q-generate-margin-auto() {
+  
+  @each $sideKey, $sideSuffix in $q-spacing-sides {
+    .q-m#{$sideSuffix}-auto {
+      @include q-emit-spacing(margin, $sideKey, auto);
+    }
+  }
+  
+  @each $breakpoint, $bpValue in $q-breakpoints {
+    @include q-media-up($breakpoint) {
+      @each $sideKey, $sideSuffix in $q-spacing-sides {
+        .q-m#{$sideSuffix}-#{$breakpoint}-auto {
+          @include q-emit-spacing(margin, $sideKey, auto);
+        }
+      }
+    }
+  }
+}
+@include q-generate-responsive-spacing(margin, m);
+@include q-generate-responsive-spacing(padding, p);
+@include q-generate-margin-auto;
 .q-group-box {
   $this: &;
   display: inline-block;
@@ -2569,6 +2677,62 @@ $q-line-loader-color: var(--q-line-loader-color);
     background-color: var(--q-theme-primary);
   }
 }
+.q-obfuscation {
+  &__value {
+    display: flex;
+    align-items: center;
+    gap: $space-base;
+    font-size: inherit;
+  }
+  &__mask {
+    display: inline-flex;
+    align-items: center;
+    gap: $space-base;
+    width: 100%;
+    color: var(--q-theme-neutral);
+    user-select: none;
+    .q-icon {
+      color: inherit;
+    }
+  }
+  &__action {
+    justify-content: flex-start;
+    margin: 0;
+    padding: 0;
+    border-width: 0;
+    width: 100%;
+    min-height: 1.5em;
+    line-height: inherit;
+    color: var(--q-theme-primary);
+    &:hover,
+    &:focus-visible {
+      outline-offset: 0;
+    }
+    .q-button__content {
+      justify-content: flex-start;
+    }
+    &.q-button--labeled {
+      padding: 0;
+    }
+  }
+  &__content {
+    display: flex;
+    align-items: flex-start;
+    gap: $space-base;
+    min-width: 0;
+  }
+  &__label-action {
+    color: var(--q-theme-primary);
+    min-width: auto;
+    min-height: auto;
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+  }
+  &__icon {
+    flex-shrink: 0;
+  }
+}
 $overlay-border-width: 1px;
 $overlay-arrow-width: 11.31px;
 $overlay-arrow-height: 11.31px;
@@ -3780,111 +3944,3 @@ $q-toast-slide-distance: clamp(1rem, 3vw, 1.5rem) !default;
     max-width: 200px;
   }
 }
-
-.q-spacer {
-  flex: 1 1 0;
-}
-$q-spacers: (
-  0: 0,
-  1: $space-base * 0.25,
-  2: $space-base * 0.5,
-  3: $space-base,
-  4: $space-base * 1.5,
-  5: $space-base * 3
-) !default;
-$q-breakpoints: (
-  sm: $breakpoint-sm,
-  md: $breakpoint-md,
-  lg: $breakpoint-lg,
-  xl: $breakpoint-xl,
-  xxl: $breakpoint-xxl
-) !default;
-$q-spacing-sides: (
-  null: '',
-  
-  t: 't',
-  
-  b: 'b',
-  
-  l: 'l',
-  
-  r: 'r',
-  
-  x: 'x',
-  
-  y: 'y' 
-) !default;
-@mixin q-media-up($breakpoint) {
-  $value: map.get($q-breakpoints, $breakpoint);
-  @if $value {
-    @media (min-width: $value) {
-      @content;
-    }
-  } @else {
-    @warn "Breakpoint `#{$breakpoint}` not found in $q-breakpoints.";
-  }
-}
-@mixin q-emit-spacing($property, $side, $value) {
-  @if not $side {
-    #{$property}: $value;
-  } @else if $side == t {
-    #{$property}-top: $value;
-  } @else if $side == b {
-    #{$property}-bottom: $value;
-  } @else if $side == l {
-    #{$property}-left: $value;
-  } @else if $side == r {
-    #{$property}-right: $value;
-  } @else if $side == x {
-    #{$property}-left: $value;
-    #{$property}-right: $value;
-  } @else if $side == y {
-    #{$property}-top: $value;
-    #{$property}-bottom: $value;
-  } @else {
-    @warn "Unknown side `#{$side}` used for spacing generation.";
-  }
-}
-@mixin q-generate-responsive-spacing($property, $short) {
-  
-  @each $size, $length in $q-spacers {
-    @each $sideKey, $sideSuffix in $q-spacing-sides {
-      .q-#{$short}#{$sideSuffix}-#{$size} {
-        @include q-emit-spacing($property, $sideKey, $length);
-      }
-    }
-  }
-  
-  @each $breakpoint, $bpValue in $q-breakpoints {
-    @include q-media-up($breakpoint) {
-      @each $size, $length in $q-spacers {
-        @each $sideKey, $sideSuffix in $q-spacing-sides {
-          .q-#{$short}#{$sideSuffix}-#{$breakpoint}-#{$size} {
-            @include q-emit-spacing($property, $sideKey, $length);
-          }
-        }
-      }
-    }
-  }
-}
-@mixin q-generate-margin-auto() {
-  
-  @each $sideKey, $sideSuffix in $q-spacing-sides {
-    .q-m#{$sideSuffix}-auto {
-      @include q-emit-spacing(margin, $sideKey, auto);
-    }
-  }
-  
-  @each $breakpoint, $bpValue in $q-breakpoints {
-    @include q-media-up($breakpoint) {
-      @each $sideKey, $sideSuffix in $q-spacing-sides {
-        .q-m#{$sideSuffix}-#{$breakpoint}-auto {
-          @include q-emit-spacing(margin, $sideKey, auto);
-        }
-      }
-    }
-  }
-}
-@include q-generate-responsive-spacing(margin, m);
-@include q-generate-responsive-spacing(padding, p);
-@include q-generate-margin-auto;

package/esm/components/QObfuscation/QObfuscation.d.ts

@@ -0,0 +1,74 @@
+import { DEFAULT_ICONS, DEFAULT_TEXTS } from './constants';
+import { QObfuscationProps } from '.';
+import { Component } from 'vue';
+type __VLS_Props = QObfuscationProps;
+type __VLS_PublicProps = {
+    'revealed'?: boolean;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?: (props: {
+            qObfuscationHideAction: Component;
+            toggle: () => void;
+            revealed: boolean;
+            loading: boolean;
+        }) => unknown;
+        reveal?: (props: {
+            revealed: boolean;
+            toggle: () => void;
+            loading: boolean;
+        }) => unknown;
+        mask?: () => unknown;
+        'label.prepend'?: () => unknown;
+        'label.append'?: () => unknown;
+        extras?: () => unknown;
+    }> & {
+        default?: (props: {
+            qObfuscationHideAction: Component;
+            toggle: () => void;
+            revealed: boolean;
+            loading: boolean;
+        }) => unknown;
+        reveal?: (props: {
+            revealed: boolean;
+            toggle: () => void;
+            loading: boolean;
+        }) => unknown;
+        mask?: () => unknown;
+        'label.prepend'?: () => unknown;
+        'label.append'?: () => unknown;
+        extras?: () => unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:revealed": (value: boolean) => any;
+} & {
+    hide: () => any;
+    reveal: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onHide?: (() => any) | undefined;
+    onReveal?: (() => any) | undefined;
+    "onUpdate:revealed"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: import('..').QFieldSize;
+    required: boolean;
+    mask: import('./types').QObfuscationMask;
+    loading: boolean;
+    icons: typeof DEFAULT_ICONS;
+    texts: Partial<typeof DEFAULT_TEXTS>;
+    labelPosition: import('..').QLabelPosition;
+    revealable: boolean;
+    bulletCount: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=QObfuscation.vue.d.ts.map

package/esm/components/QObfuscation/QObfuscation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QObfuscation.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QObfuscation/QObfuscation.vue"],"names":[],"mappings":"AAsFA;AA+RC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAW1D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,GAAG,CAAA;AAC1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAcpC,KAAK,WAAW,GAAG,iBAAiB,CAAC;AA0LtC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAmLT,OAAO,IAA6B;;kBA9VtC,CAAC,KAAK,EAAE;YACjB,sBAAsB,EAAE,SAAS,CAAA;YACjC,MAAM,EAAE,MAAM,IAAI,CAAA;YAClB,QAAQ,EAAE,OAAO,CAAA;YACjB,OAAO,EAAE,OAAO,CAAA;SAChB,KAAK,OAAO;iBACJ,CAAC,KAAK,EAAE;YAAE,QAAQ,EAAE,OAAO,CAAC;YAAC,MAAM,EAAE,MAAM,IAAI,CAAC;YAAC,OAAO,EAAE,OAAO,CAAA;SAAE,KAAK,OAAO;eACjF,MAAM,OAAO;0BACF,MAAM,OAAO;yBACd,MAAM,OAAO;iBACrB,MAAM,OAAO;;kBAVZ,CAAC,KAAK,EAAE;YACjB,sBAAsB,EAAE,SAAS,CAAA;YACjC,MAAM,EAAE,MAAM,IAAI,CAAA;YAClB,QAAQ,EAAE,OAAO,CAAA;YACjB,OAAO,EAAE,OAAO,CAAA;SAChB,KAAK,OAAO;iBACJ,CAAC,KAAK,EAAE;YAAE,QAAQ,EAAE,OAAO,CAAC;YAAC,MAAM,EAAE,MAAM,IAAI,CAAC;YAAC,OAAO,EAAE,OAAO,CAAA;SAAE,KAAK,OAAO;eACjF,MAAM,OAAO;0BACF,MAAM,OAAO;yBACd,MAAM,OAAO;iBACrB,MAAM,OAAO;;;;EAyVvB;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;6EASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/esm/components/QObfuscation/QObfuscation.vue.js

@@ -0,0 +1,183 @@
+import { QButton as e } from "../QButton/index.js";
+import { QIcon as t } from "../QIcon/index.js";
+import { useId as n } from "../../composables/uid.js";
+import { QField as r } from "../QField/index.js";
+import { DEFAULT_ICONS as i, DEFAULT_TEXTS as a } from "./constants.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createTextVNode as p, createVNode as m, defineComponent as h, h as g, mergeModels as _, mergeProps as v, nextTick as y, normalizeClass as b, onBeforeMount as x, onBeforeUnmount as S, openBlock as C, ref as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, watch as k, withCtx as A } from "vue";
+//#region src/components/QObfuscation/QObfuscation.vue?vue&type=script&setup=true&lang.ts
+var j = ["id"], M = ["id"], N = {
+	key: 1,
+	class: "q-obfuscation__mask"
+}, P = /*@__PURE__*/ h({
+	__name: "QObfuscation",
+	props: /*@__PURE__*/ _({
+		id: {},
+		class: {},
+		label: {},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		for: {},
+		labelPosition: { default: "topleft" },
+		size: { default: "medium" },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		invalid: { type: Boolean },
+		revealable: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		mask: { default: "restricted" },
+		bulletCount: { default: 12 },
+		icons: { default: () => i },
+		texts: { default: () => a }
+	}, {
+		revealed: {
+			type: Boolean,
+			default: !1
+		},
+		revealedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ _(["reveal", "hide"], ["update:revealed"]),
+	setup(i, { emit: _ }) {
+		let P = i, F = _, I = O(i, "revealed"), L = n(), R = w(0), z = w(!1), B = s(() => ({
+			...a,
+			...P.texts
+		})), V = s(() => P.revealable && I.value && !P.loading), H = s(() => R.value > 0), U = s(() => {
+			if (!(V.value && (!z.value || H.value))) return P.label;
+		}), W = s(() => V.value && z.value && !H.value), G = s(() => P.mask === "bullets" ? "•".repeat(P.bulletCount) : B.value.restricted), K = s(() => [
+			"q-obfuscation",
+			{
+				"q-obfuscation--revealable": P.revealable,
+				"q-obfuscation--revealed": V.value,
+				"q-obfuscation--loading": P.loading
+			},
+			P.class
+		]);
+		k(V, async (e) => {
+			if (!e) {
+				z.value = !1;
+				return;
+			}
+			z.value = !1, await y(), z.value = !0;
+		}, { immediate: !0 });
+		let q = h({
+			name: "QObfuscationHideAction",
+			props: { track: {
+				type: Boolean,
+				default: !0
+			} },
+			setup(n) {
+				return n.track && (x(() => {
+					R.value++;
+				}), S(() => {
+					R.value--;
+				})), () => g(e, {
+					variant: "text",
+					borderless: !0,
+					size: "small",
+					class: "q-obfuscation__label-action",
+					disabled: P.disabled,
+					title: B.value.hideData,
+					"aria-label": B.value.hideData,
+					"aria-expanded": !0,
+					"aria-controls": L.value,
+					"data-testid": "q-obfuscation__hide",
+					onClick: J
+				}, () => g(t, {
+					...P.icons.hide,
+					class: "q-obfuscation__icon"
+				}));
+			}
+		});
+		function J() {
+			!P.revealable || P.loading || (I.value = !I.value, I.value ? F("reveal") : F("hide"));
+		}
+		return (n, i) => (C(), c(D(r), {
+			id: P.id,
+			class: b(K.value),
+			for: P.for ?? D(L),
+			label: U.value,
+			"label-position": P.labelPosition,
+			size: P.size,
+			readonly: P.readonly,
+			disabled: P.disabled,
+			required: P.required,
+			invalid: P.invalid
+		}, f({
+			"label.prepend": A(() => [T(n.$slots, "label.prepend")]),
+			"label.append": A(() => [
+				T(n.$slots, "label.append"),
+				l(" Own padlock only when the consumer did not place QObfuscationHideAction "),
+				W.value ? (C(), c(D(q), {
+					key: 0,
+					track: !1
+				})) : l("v-if", !0)
+			]),
+			control: A(() => [l(" Revealed: slot content; place QObfuscationHideAction on the field label to own it "), V.value ? (C(), u("div", {
+				key: 0,
+				id: D(L),
+				class: "q-obfuscation__content"
+			}, [T(n.$slots, "default", {
+				qObfuscationHideAction: D(q),
+				toggle: J,
+				revealed: I.value,
+				loading: P.loading
+			})], 8, j)) : (C(), u(o, { key: 1 }, [l(" Masked / loading: QObfuscation label + control surface "), d("div", {
+				id: D(L),
+				class: "q-field__control q-obfuscation__value"
+			}, [P.revealable ? T(n.$slots, "reveal", {
+				key: 0,
+				revealed: I.value,
+				toggle: J,
+				loading: P.loading
+			}, () => [m(D(e), {
+				variant: "text",
+				borderless: "",
+				block: "",
+				class: "q-obfuscation__action",
+				disabled: P.disabled,
+				loading: P.loading,
+				label: B.value.showData,
+				"aria-expanded": !1,
+				"aria-controls": D(L),
+				"data-testid": "q-obfuscation__reveal",
+				onClick: J
+			}, {
+				default: A(() => [m(D(t), v(P.icons.show, { class: "q-obfuscation__icon" }), null, 16)]),
+				_: 1
+			}, 8, [
+				"disabled",
+				"loading",
+				"label",
+				"aria-controls"
+			])]) : (C(), u("span", N, [m(D(t), v(P.icons.restricted, {
+				class: "q-obfuscation__icon",
+				"aria-hidden": "true"
+			}), null, 16), T(n.$slots, "mask", {}, () => [p(E(G.value), 1)])]))], 8, M)], 2112))]),
+			_: 2
+		}, [n.$slots.extras ? {
+			name: "extras",
+			fn: A(() => [T(n.$slots, "extras")]),
+			key: "0"
+		} : void 0]), 1032, [
+			"id",
+			"class",
+			"for",
+			"label",
+			"label-position",
+			"size",
+			"readonly",
+			"disabled",
+			"required",
+			"invalid"
+		]));
+	}
+});
+//#endregion
+export { P as default };

package/esm/components/QObfuscation/QObfuscation2.vue.js

@@ -0,0 +1,5 @@
+import e from "./QObfuscation.vue.js";
+//#region src/components/QObfuscation/QObfuscation.vue
+var t = e;
+//#endregion
+export { t as default };

package/esm/components/QObfuscation/constants.d.ts

@@ -0,0 +1,17 @@
+export declare const DEFAULT_ICONS: {
+    restricted: {
+        icon: string;
+    };
+    show: {
+        icon: string;
+    };
+    hide: {
+        icon: string;
+    };
+};
+export declare const DEFAULT_TEXTS: {
+    restricted: string;
+    showData: string;
+    hideData: string;
+};
+//# sourceMappingURL=constants.d.ts.map

package/esm/components/QObfuscation/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/QObfuscation/constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;;;;;;;CAUM,CAAA;AAEhC,eAAO,MAAM,aAAa;;;;CAIQ,CAAA"}

package/esm/components/QObfuscation/constants.js

@@ -0,0 +1,12 @@
+//#region src/components/QObfuscation/constants.ts
+var e = {
+	restricted: { icon: "lock" },
+	show: { icon: "lock" },
+	hide: { icon: "lock-open-variant" }
+}, t = {
+	restricted: "Restricted",
+	showData: "Show data",
+	hideData: "Hide data"
+};
+//#endregion
+export { e as DEFAULT_ICONS, t as DEFAULT_TEXTS };