@quidgest/ui 0.12.1 → 0.13.0

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.12.1
+ * Quidgest UI v0.13.0
  * (c) 2024 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -238,6 +238,79 @@ body {
 .fade-leave-active {
 	transition: opacity 0.2s;
 }
+.q-badge {
+	$this: &;
+	display: inline-flex;
+	border-width: 1px;
+	border-color: transparent;
+	border-radius: $border-radius;
+	padding: 0.25em 0.5em;
+	line-height: 1rem;
+	font-size: 0.75rem;
+	position: relative;
+	color: var(--q-badge-text-color);
+	&__underlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border-radius: inherit;
+		background-color: var(--q-badge-color);
+		opacity: 0.1;
+	}
+	&__content {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		min-height: 1rem;
+		z-index: 1;
+	}
+	&__remove.q-btn:not(:disabled) {
+		padding: 0;
+		border-radius: 9999px;
+		color: inherit;
+		&:hover {
+			background-color: var(--q-badge-color);
+		}
+	}
+	
+	&--pill {
+		border-radius: 9999px;
+	}
+	&--bold {
+		#{$this}__underlay {
+			opacity: 1;
+		}
+	}
+	&--outlined {
+		border-color: currentColor;
+		#{$this}__underlay {
+			opacity: 0;
+		}
+	}
+	@mixin color-variant($color) {
+		&--#{$color} {
+			--q-badge-color: var(--q-theme-#{$color});
+		}
+		&--#{$color}.q-badge--tonal,
+		&--#{$color}.q-badge--outlined {
+			--q-badge-text-color: var(--q-theme-#{$color});
+		}
+		&--#{$color}.q-badge--bold {
+			--q-badge-text-color: var(--q-theme-on-#{$color});
+			.q-badge__remove.q-btn:not(:disabled):hover {
+				background-color: var(--q-badge-text-color);
+				color: var(--q-badge-color);
+			}
+		}
+	}
+	@include color-variant(primary);
+	@include color-variant(info);
+	@include color-variant(success);
+	@include color-variant(warning);
+	@include color-variant(danger);
+}
 $button-primary: var(--q-theme-primary);
 $button-primary-hover: var(--q-theme-primary-dark);
 $button-primary-shadow: var(--q-theme-primary-dark-rgb);
@@ -453,6 +526,49 @@ $button-text-on-plain: var(--q-theme-on-background);
 .q-combobox__chevron svg {
 	transition: all 0.2s;
 }
+.q-dialog {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	max-width: 50rem;
+	min-width: 20rem;
+	padding: $space-base;
+}
+.q-dialog__header {
+	display: flex;
+	width: 100%;
+	justify-content: space-between;
+	padding: 0.4rem $space-base;
+	&-title {
+		align-self: flex-start;
+		font-weight: $font-weight-bold;
+		padding: 0.4rem;
+		font-size: 1rem;
+	}
+}
+.q-dialog__header .q-btn {
+	align-items: baseline;
+}
+.q-dialog__body {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: $space-base 0.65rem;
+	gap: 0.4rem;
+	&-icon svg {
+		height: 5em;
+		width: 5em;
+	}
+	&-actions {
+		display: flex;
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		padding: 0.65rem;
+		padding-bottom: 0.5rem;
+	}
+}
 .q-field {
 	$this: &;
 	display: flex;

package/esm/components/QBadge/QBadge.d.ts

@@ -0,0 +1,72 @@
+import { Icon } from '../QIcon';
+
+export type QBadgeProps = {
+    /**
+     * The color of the badge.
+     * Can be chosen from utility colors like 'success' or 'danger', or specified using CSS color codes.
+     */
+    color?: string;
+    /**
+     * The visual style variant of the badge.
+     */
+    variant?: 'tonal' | 'bold' | 'outlined';
+    /**
+     * Indicates if the badge can be removed.
+     */
+    removable?: boolean;
+    /**
+     * Whether to convey a pill shape to the badge.
+     */
+    pill?: boolean;
+    /**
+     * The icons of the component.
+     */
+    icons?: Icons;
+};
+declare const DEFAULT_ICONS: Record<string, Icon>;
+type Icons = typeof DEFAULT_ICONS;
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<QBadgeProps>, {
+    text: string;
+    icons: () => Record<string, Icon>;
+    color: string;
+    variant: string;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "click:remove": () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<QBadgeProps>, {
+    text: string;
+    icons: () => Record<string, Icon>;
+    color: string;
+    variant: string;
+}>>> & {
+    "onClick:remove"?: (() => any) | undefined;
+}, {
+    variant: "bold" | "tonal" | "outlined";
+    color: string;
+    icons: Record<string, Icon>;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=QBadge.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QBadge.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QBadge/QBadge.vue"],"names":[],"mappings":"AAmBA;AAOC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAM9C,MAAM,MAAM,WAAW,GAAG;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAA;IAEvC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAKD,QAAA,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAIvC,CAAA;AAED,KAAK,KAAK,GAAG,OAAO,aAAa,CAAA;;;;;;;;;;;;;;;;;;;;qBAkJJ,GAAG;;AAjJjC,wBA2KI;AAAA,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACrE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/esm/components/QBadge/QBadge.vue.js

@@ -0,0 +1,87 @@
+import { defineComponent as g, computed as l, openBlock as a, createElementBlock as _, normalizeClass as b, normalizeStyle as C, createElementVNode as s, renderSlot as y, createBlock as q, unref as n, withCtx as k, createVNode as B, normalizeProps as h, guardReactiveProps as x, createCommentVNode as N } from "vue";
+import { QButton as z } from "../QButton/index.js";
+import { QIcon as E } from "../QIcon/index.js";
+import { parseColor as Q, rgbToHsl as S, getContrastingColor as V } from "../../utils/color.js";
+const $ = /* @__PURE__ */ s(
+  "div",
+  { class: "q-badge__underlay" },
+  null,
+  -1
+  /* HOISTED */
+), w = { class: "q-badge__content" }, I = {
+  remove: {
+    icon: "close"
+  }
+}, A = /* @__PURE__ */ g({
+  __name: "QBadge",
+  props: {
+    color: { default: "primary" },
+    variant: { default: "tonal" },
+    removable: { type: Boolean },
+    pill: { type: Boolean },
+    icons: { default: () => I }
+  },
+  emits: ["click:remove"],
+  setup(c, { emit: i }) {
+    const e = c, d = i, r = l(
+      () => ["primary", "info", "success", "warning", "danger"].includes(e.color)
+    ), m = l(() => {
+      const o = r.value ? `q-badge--${e.color}` : void 0;
+      return ["q-badge", `q-badge--${e.variant}`, o, { "q-badge--pill": e.pill }];
+    }), u = l(() => {
+      let o, t;
+      if (!r.value)
+        if (o = e.color, e.variant === "tonal")
+          t = e.color;
+        else {
+          const v = Q(o), f = S(v);
+          t = V(f.l);
+        }
+      return {
+        "--q-badge-color": o,
+        "--q-badge-text-color": t
+      };
+    });
+    function p() {
+      d("click:remove");
+    }
+    return (o, t) => (a(), _(
+      "span",
+      {
+        class: b(m.value),
+        role: "presentation",
+        style: C(u.value)
+      },
+      [
+        $,
+        s("div", w, [
+          y(o.$slots, "default"),
+          e.removable ? (a(), q(n(z), {
+            key: 0,
+            class: "q-badge__remove",
+            borderless: "",
+            tabindex: "0",
+            onClick: p
+          }, {
+            default: k(() => [
+              B(
+                n(E),
+                h(x(e.icons.remove)),
+                null,
+                16
+                /* FULL_PROPS */
+              )
+            ]),
+            _: 1
+            /* STABLE */
+          })) : N("v-if", !0)
+        ])
+      ],
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+});
+export {
+  A as default
+};

package/esm/components/QBadge/QBadge.vue2.js

@@ -0,0 +1,4 @@
+import f from "./QBadge.vue.js";
+export {
+  f as default
+};

package/esm/components/QBadge/index.d.ts

@@ -0,0 +1,119 @@
+declare const QBadge: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{
+        variant: {
+            type: import('vue').PropType<"bold" | "tonal" | "outlined">;
+            default: string;
+        };
+        color: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        removable: {
+            type: import('vue').PropType<boolean>;
+        };
+        pill: {
+            type: import('vue').PropType<boolean>;
+        };
+        icons: {
+            type: import('vue').PropType<Record<string, import('..').Icon>>;
+            default: () => Record<string, import('..').Icon>;
+        };
+    }>> & {
+        "onClick:remove"?: (() => any) | undefined;
+    }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        "click:remove": () => void;
+    }, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
+        variant: {
+            type: import('vue').PropType<"bold" | "tonal" | "outlined">;
+            default: string;
+        };
+        color: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        removable: {
+            type: import('vue').PropType<boolean>;
+        };
+        pill: {
+            type: import('vue').PropType<boolean>;
+        };
+        icons: {
+            type: import('vue').PropType<Record<string, import('..').Icon>>;
+            default: () => Record<string, import('..').Icon>;
+        };
+    }>> & {
+        "onClick:remove"?: (() => any) | undefined;
+    }, {
+        variant: "bold" | "tonal" | "outlined";
+        color: string;
+        icons: Record<string, import('..').Icon>;
+    }, true, {}, {}, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        variant: {
+            type: import('vue').PropType<"bold" | "tonal" | "outlined">;
+            default: string;
+        };
+        color: {
+            type: import('vue').PropType<string>;
+            default: string;
+        };
+        removable: {
+            type: import('vue').PropType<boolean>;
+        };
+        pill: {
+            type: import('vue').PropType<boolean>;
+        };
+        icons: {
+            type: import('vue').PropType<Record<string, import('..').Icon>>;
+            default: () => Record<string, import('..').Icon>;
+        };
+    }>> & {
+        "onClick:remove"?: (() => any) | undefined;
+    }, {}, {}, {}, {}, {
+        variant: "bold" | "tonal" | "outlined";
+        color: string;
+        icons: Record<string, import('..').Icon>;
+    }>;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    variant: {
+        type: import('vue').PropType<"bold" | "tonal" | "outlined">;
+        default: string;
+    };
+    color: {
+        type: import('vue').PropType<string>;
+        default: string;
+    };
+    removable: {
+        type: import('vue').PropType<boolean>;
+    };
+    pill: {
+        type: import('vue').PropType<boolean>;
+    };
+    icons: {
+        type: import('vue').PropType<Record<string, import('..').Icon>>;
+        default: () => Record<string, import('..').Icon>;
+    };
+}>> & {
+    "onClick:remove"?: (() => any) | undefined;
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "click:remove": () => void;
+}, string, {
+    variant: "bold" | "tonal" | "outlined";
+    color: string;
+    icons: Record<string, import('..').Icon>;
+}, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+});
+export { QBadge };
+//# sourceMappingURL=index.d.ts.map

package/esm/components/QBadge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QBadge/index.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA6C,CAAA;AAGzD,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/esm/components/QBadge/index.js

@@ -0,0 +1,6 @@
+import o from "./QBadge.vue.js";
+import { setupPropsProxy as r } from "../../utils/setupPropsProxy.js";
+const t = r(o);
+export {
+  t as QBadge
+};

package/esm/components/QButton/QButton.vue.js

@@ -1,10 +1,9 @@
-import { defineComponent as f, computed as s, openBlock as o, createElementBlock as n, normalizeClass as v, withModifiers as y, createVNode as _, unref as g, createCommentVNode as l, createElementVNode as k, Fragment as i, createTextVNode as c, toDisplayString as r, renderSlot as q } from "vue";
-import "../QSpinnerLoader/index.js";
-import B from "../QSpinnerLoader/QSpinnerLoader.vue.js";
+import { defineComponent as m, computed as s, openBlock as o, createElementBlock as n, normalizeClass as v, withModifiers as y, createVNode as g, unref as k, createCommentVNode as l, createElementVNode as _, Fragment as i, createTextVNode as r, toDisplayString as d, renderSlot as q } from "vue";
+import { QSpinnerLoader as B } from "../QSpinnerLoader/index.js";
 const h = ["disabled"], z = {
   key: 0,
   class: "q-btn__spinner"
-}, C = { class: "q-btn__content" }, O = /* @__PURE__ */ f({
+}, C = { class: "q-btn__content" }, O = /* @__PURE__ */ m({
   __name: "QButton",
   props: {
     active: { type: Boolean },
@@ -20,12 +19,12 @@ const h = ["disabled"], z = {
     class: { default: void 0 }
   },
   emits: ["click"],
-  setup(d, { emit: b }) {
-    const e = d, p = b, a = s(() => e.disabled || e.loading);
+  setup(c, { emit: b }) {
+    const e = c, p = b, a = s(() => e.disabled || e.loading);
     function u(t) {
       a.value || p("click", t);
     }
-    const m = s(() => {
+    const f = s(() => {
       const t = e.size !== "regular" ? `q-btn--${e.size}` : void 0;
       return [
         "q-btn",
@@ -41,22 +40,22 @@ const h = ["disabled"], z = {
         e.class
       ];
     });
-    return (t, N) => (o(), n("button", {
+    return (t, S) => (o(), n("button", {
       type: "button",
-      class: v(m.value),
+      class: v(f.value),
       disabled: a.value,
       onClick: y(u, ["stop", "prevent"])
     }, [
       t.loading ? (o(), n("div", z, [
-        _(g(B), { size: 20 })
+        g(k(B), { size: 20 })
       ])) : l("v-if", !0),
-      k("span", C, [
+      _("span", C, [
         t.iconOnRight ? (o(), n(
           i,
           { key: 0 },
           [
-            c(
-              r(e.label),
+            r(
+              d(e.label),
               1
               /* TEXT */
             )
@@ -69,8 +68,8 @@ const h = ["disabled"], z = {
           i,
           { key: 1 },
           [
-            c(
-              r(e.label),
+            r(
+              d(e.label),
               1
               /* TEXT */
             )