@quidgest/ui 0.16.34 → 0.16.36

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.16.34
+ * Quidgest UI v0.16.36
  * (c) 2025 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -2355,35 +2355,48 @@ $arrow-tip-radius: 0.1rem;
 $table-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 25%);
 $row-hover-bg: rgb(var(--q-theme-primary-light-rgb) / 50%);
 $row-selected-bg: rgb(var(--q-theme-primary-rgb) / 15%);
-$base-border: 1px solid rgb(0 0 0 / 10%);
+$base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
 .q-property-list {
   margin: 0;
   font-size: 0.9rem;
-  display: flex;
+  display: inline-flex;
+  width: auto;
   flex-direction: column;
   border: $base-border;
   &-panel {
     padding: 0.4rem;
     display: flex;
     flex-direction: column;
+    overflow-y: auto;
     min-height: 50px;
+    max-height: 80px;
     gap: 1rem;
   }
   &--side-panel {
     flex-direction: row;
     .q-property-list-panel {
       border-left: $base-border;
-      width: 20%;
+      width: 250px;
+      max-height: unset;
     }
   }
   &-panel__label {
     font-weight: bold;
   }
   &__table {
-    width: 100%;
     border-spacing: 0;
+    table-layout: fixed;
     margin: 0;
   }
+  &--block {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+    flex: 1;
+    .q-property-list__table {
+      width: 100%;
+    }
+  }
   &__header {
     background: $table-header-bg;
     height: 25px; 
@@ -2410,6 +2423,11 @@ $base-border: 1px solid rgb(0 0 0 / 10%);
       text-wrap: nowrap;
       opacity: 0.8;
     }
+    .q-field {
+      max-width: 100%;
+      width: 100%;
+      box-sizing: border-box;
+    }
   }
   &-field__container {
     display: flex;

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

@@ -1 +1 @@
-{"version":3,"file":"QPropertyList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QPropertyList/QPropertyList.vue"],"names":[],"mappings":"AAuDA;AA6NC,OAAO,KAAK,EAAE,kBAAkB,EAA2B,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAI9F,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAiKvD,iBAAS,cAAc;WA+HT,OAAO,IAA6B;;;UAbqC,GAAG;;;;;;;;;;YAE9D,GAAG;;;;;;EAgB9B;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;kBAUnB,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"}
+{"version":3,"file":"QPropertyList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QPropertyList/QPropertyList.vue"],"names":[],"mappings":"AAyDA;AA4NC,OAAO,KAAK,EAAE,kBAAkB,EAA2B,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAI9F,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AA8JvD,iBAAS,cAAc;WAiIT,OAAO,IAA6B;;;UAbqC,GAAG;;;;;;;;;;YAE9D,GAAG;;;;;;EAgB9B;AAwBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;kBAUnB,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/QPropertyList/QPropertyList.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as G, ref as c, computed as g, watch as Q, nextTick as S, createElementBlock as d, openBlock as i, normalizeClass as h, createElementVNode as a, createBlock as p, createCommentVNode as f, Fragment as y, renderList as _, unref as m, withCtx as k, renderSlot as C } from "vue";
-import { QPropertyListGroup as N, QPropertyListRow as O, QPropertyListPanel as V } from "./index.js";
-import { DEFAULT_TEXTS as $, DEFAULT_ICONS as D } from "./types.js";
-const U = ["id"], W = { class: "q-property-list__table" }, j = /* @__PURE__ */ G({
+import { defineComponent as A, ref as p, computed as g, watch as G, nextTick as Q, createElementBlock as u, openBlock as s, normalizeClass as h, createElementVNode as a, createBlock as f, createCommentVNode as c, Fragment as y, renderList as k, unref as m, withCtx as _, renderSlot as F } from "vue";
+import { QPropertyListGroup as W, QPropertyListRow as N, QPropertyListPanel as O } from "./index.js";
+import { DEFAULT_TEXTS as V, DEFAULT_ICONS as $ } from "./types.js";
+const D = ["id"], U = { class: "q-property-list__table" }, j = /* @__PURE__ */ A({
   __name: "QPropertyList",
   props: {
     id: {},
@@ -13,14 +13,14 @@ const U = ["id"], W = { class: "q-property-list__table" }, j = /* @__PURE__ */ G
     noPanel: { type: Boolean },
     noToggle: { type: Boolean },
     readonly: { type: Boolean },
-    icons: { default: () => D },
-    texts: { default: () => $ }
+    icons: { default: () => $ },
+    texts: { default: () => V }
   },
   emits: ["field-change", "select-field"],
-  setup(F, { emit: b }) {
-    const t = F, v = b, u = c(t.groups.map((e) => e.id)), s = c(void 0), r = c(null), x = g(() => t.groups.length ? t.groups.filter(
+  setup(C, { emit: b }) {
+    const t = C, v = b, d = p(t.groups.map((e) => e.id)), n = p(void 0), r = p(null), x = g(() => t.groups.length ? t.groups.filter(
       (e) => t.fields.some((o) => o.group === e.id)
-    ) : [{ id: "", title: "" }]), w = g(() => [
+    ) : [{ id: "", title: "" }]), P = g(() => [
       "q-property-list",
       {
         "q-property-list--side-panel": t.panelPosition === "right",
@@ -28,54 +28,52 @@ const U = ["id"], W = { class: "q-property-list__table" }, j = /* @__PURE__ */ G
       },
       t.class
     ]);
-    function P() {
-      if (!r.value) return;
-      const e = r.value.offsetWidth;
-      r.value.style.width = `${e}px`;
-    }
-    function q() {
+    function B() {
       var e;
-      (e = r.value) != null && e.contains(document.activeElement) || (s.value = void 0);
-    }
-    function B(e) {
-      return e ? t.fields.filter((o) => o.group === e) : t.fields;
+      (e = r.value) != null && e.contains(document.activeElement) || (n.value = void 0);
     }
     function L(e) {
-      const o = u.value.indexOf(e);
-      o === -1 ? u.value.push(e) : u.value.splice(o, 1);
+      return e ? t.fields.filter((o) => o.group === e) : t.fields;
     }
     function T(e) {
+      const o = d.value.indexOf(e);
+      o === -1 ? d.value.push(e) : d.value.splice(o, 1);
+    }
+    function q(e) {
       var l;
-      const o = e.group && !u.value.includes(e.group), n = ((l = s.value) == null ? void 0 : l.id) === e.id;
       return [
         {
-          "q-property-list__row--closed": o,
-          "q-property-list__row--selected": n
+          "q-property-list__row--selected": ((l = n.value) == null ? void 0 : l.id) === e.id
         }
       ];
     }
-    function E(e) {
-      s.value = e, v("select-field", s.value.id);
+    function w(e) {
+      n.value = e, v("select-field", n.value.id);
     }
-    function R(e, o) {
+    function E(e, o) {
       t.readonly || (e.props.readonly ?? !1) || v("field-change", e, o);
     }
-    return Q(
+    function R() {
+      if (!r.value) return;
+      const e = r.value.offsetWidth;
+      r.value.style.minWidth = `${e}px`;
+    }
+    return G(
       () => t.block,
       async (e) => {
         var o;
-        await S(), e ? (o = r.value) == null || o.removeAttribute("style") : P();
+        await Q(), e ? (o = r.value) == null || o.removeAttribute("style") : R();
       },
       { immediate: !0 }
-    ), (e, o) => (i(), d("div", {
+    ), (e, o) => (s(), u("div", {
       id: t.id,
       ref_key: "componentRoot",
       ref: r,
       tabindex: "0",
-      class: h(w.value),
-      onFocusout: q
+      class: h(P.value),
+      onFocusout: B
     }, [
-      a("table", W, [
+      a("table", U, [
         o[0] || (o[0] = a(
           "thead",
           { class: "q-property-list__header" },
@@ -88,44 +86,44 @@ const U = ["id"], W = { class: "q-property-list__table" }, j = /* @__PURE__ */ G
           /* HOISTED */
         )),
         a("tbody", null, [
-          (i(!0), d(
+          (s(!0), u(
             y,
             null,
-            _(x.value, (n) => (i(), d(
+            k(x.value, (l) => (s(), u(
               y,
               {
-                key: n.id
+                key: l.id
               },
               [
-                n.title ? (i(), p(m(N), {
+                l.title ? (s(), f(m(W), {
                   key: 0,
-                  "data-key": n.id,
-                  title: n.title,
+                  "data-key": l.id,
+                  title: l.title,
                   icons: t.icons,
                   "no-toggle": t.noToggle,
-                  onClick: () => L(n.id)
-                }, null, 8, ["data-key", "title", "icons", "no-toggle", "onClick"])) : f("v-if", !0),
-                (i(!0), d(
+                  onClick: () => T(l.id)
+                }, null, 8, ["data-key", "title", "icons", "no-toggle", "onClick"])) : c("v-if", !0),
+                l.id === "" || d.value.includes(l.id) ? (s(!0), u(
                   y,
-                  null,
-                  _(B(n.id), (l) => (i(), p(m(O), {
-                    key: l.id,
-                    class: h(T(l)),
-                    field: l,
-                    "model-value": l.props.modelValue,
+                  { key: 1 },
+                  k(L(l.id), (i) => (s(), f(m(N), {
+                    key: i.id,
+                    class: h(q(i)),
+                    field: i,
+                    "model-value": i.props.modelValue,
                     readonly: t.readonly,
-                    onFocus: E,
-                    onFieldChange: (A) => R(l, A)
+                    onFocus: w,
+                    onFieldChange: (S) => E(i, S)
                   }, {
-                    default: k(() => [
-                      C(e.$slots, l.id, { field: l })
+                    default: _(() => [
+                      F(e.$slots, i.id, { field: i })
                     ]),
                     _: 2
                     /* DYNAMIC */
                   }, 1032, ["class", "field", "model-value", "readonly", "onFieldChange"]))),
                   128
                   /* KEYED_FRAGMENT */
-                ))
+                )) : c("v-if", !0)
               ],
               64
               /* STABLE_FRAGMENT */
@@ -135,21 +133,21 @@ const U = ["id"], W = { class: "q-property-list__table" }, j = /* @__PURE__ */ G
           ))
         ])
       ]),
-      t.noPanel ? f("v-if", !0) : (i(), p(m(V), {
+      t.noPanel ? c("v-if", !0) : (s(), f(m(O), {
         key: 0,
-        field: s.value,
+        field: n.value,
         texts: t.texts
       }, {
-        default: k(() => [
-          s.value ? C(e.$slots, "panel", {
+        default: _(() => [
+          n.value ? F(e.$slots, "panel", {
             key: 0,
-            field: s.value
-          }) : f("v-if", !0)
+            field: n.value
+          }) : c("v-if", !0)
         ]),
         _: 3
         /* FORWARDED */
       }, 8, ["field", "texts"]))
-    ], 42, U));
+    ], 42, D));
   }
 });
 export {

package/esm/composables/useColor/index.js

@@ -1,8 +1,8 @@
 import { computed as l, unref as g } from "vue";
 import { useTheme as v } from "../theme.js";
 import { rgbToHsl as p, rgbToHex as b, rgbToVariableString as c } from "../../utils/color/conversion.js";
-import { darken as d } from "../../utils/color/manipulate.js";
-import { getContrastingColor as y } from "../../utils/color/contrast.js";
+import { getContrastingColor as d } from "../../utils/color/contrast.js";
+import { darken as y } from "../../utils/color/manipulate.js";
 import { parseColor as T } from "../../utils/color/parse.js";
 function K(o) {
   const e = l(() => g(o)), i = l(
@@ -23,7 +23,7 @@ function K(o) {
       console.error("Failed to parse color:", s);
       return;
     }
-    const f = p(r), a = y(f.l), u = d(r, 25), h = b(u);
+    const f = p(r), a = d(f.l), u = y(r, 25), h = b(u);
     return {
       mainColor: n,
       mainColorRgb: c(r),

package/esm/index.d.ts

@@ -1,8 +1,9 @@
 import { FrameworkConfig } from './framework';
 import * as templates from './templates';
 import * as components from './components';
+import * as utils from './utils';
 export declare const createFramework: (options?: FrameworkConfig) => import('vue').Plugin;
-export { templates, components };
+export { templates, components, utils };
 export * from './composables';
 //# sourceMappingURL=index.d.ts.map
 declare module '@vue/runtime-core' {

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,SAAS,MAAM,aAAa,CAAA;AACxC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAA;AAI1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,eAAe,aAAa,eAAe,yBAEvD,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA;AAChC,cAAc,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,aAAa,CAAA;AACxC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAA;AAC1C,OAAO,KAAK,KAAK,MAAM,SAAS,CAAA;AAIhC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,eAAe,aAAa,eAAe,yBAEvD,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,CAAA;AACvC,cAAc,eAAe,CAAA"}

package/esm/index.js

@@ -1,16 +1,18 @@
 import * as t from "./templates/index.js";
 import * as r from "./components/index.js";
+import * as m from "./utils/index.js";
 import { createFramework as o } from "./framework.js";
-import { provideTheme as n, useTheme as i } from "./composables/theme.js";
+import { provideTheme as n, useTheme as x } from "./composables/theme.js";
 import { useDialog as c } from "./composables/useDialog/index.js";
-import { useToast as u } from "./composables/useToast/index.js";
-const a = (e = {}) => o({ components: r, ...e });
+import { useToast as d } from "./composables/useToast/index.js";
+const s = (e = {}) => o({ components: r, ...e });
 export {
   r as components,
-  a as createFramework,
+  s as createFramework,
   n as provideTheme,
   t as templates,
   c as useDialog,
-  i as useTheme,
-  u as useToast
+  x as useTheme,
+  d as useToast,
+  m as utils
 };

package/esm/utils/color/contrast.js

@@ -1,6 +1,13 @@
-function r(t) {
-  return t > 50 ? "#000" : "#fff";
+import { rgbToHex as t } from "./conversion.js";
+import { parseColor as e } from "./parse.js";
+function g(o) {
+  return o > 50 ? "#000" : "#fff";
+}
+function l(o) {
+  const r = e(o);
+  return r.r = 255 - r.r, r.g = 255 - r.g, r.b = 255 - r.b, t(r);
 }
 export {
-  r as getContrastingColor
+  l as getComplementaryColor,
+  g as getContrastingColor
 };

package/esm/utils/color/index.d.ts

@@ -1,7 +1,7 @@
-export * from './types';
-export * from './parse';
+export * from './contrast';
 export * from './conversion';
 export * from './manipulate';
-export * from './contrast';
 export * from './merge';
+export * from './parse';
+export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/esm/utils/color/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/color/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/color/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}

package/esm/utils/color/manipulate.js

@@ -1,13 +1,21 @@
-import { rgbToHsl as r, hslToRgb as c } from "./conversion.js";
-function e(t, n) {
-  const o = r(t), l = n / 100;
-  return o.l = o.l + l * (100 - o.l), c(o);
+import { rgbToHsl as l, hslToRgb as o } from "./conversion.js";
+function i(t, r) {
+  if (r < 0 || r > 100)
+    throw new Error("Amount must be in the range [0, 100]");
+  if (r === 0)
+    return t;
+  const e = l(t), n = r / 100;
+  return e.l = e.l + n * (100 - e.l), o(e);
 }
-function f(t, n) {
-  const o = r(t), l = n / 100;
-  return o.l = o.l - l * o.l, c(o);
+function f(t, r) {
+  if (r < 0 || r > 100)
+    throw new Error("Amount must be in the range [0, 100]");
+  if (r === 0)
+    return t;
+  const e = l(t), n = r / 100;
+  return e.l = e.l - n * e.l, o(e);
 }
 export {
   f as darken,
-  e as lighten
+  i as lighten
 };

package/esm/utils/color/merge.js

@@ -0,0 +1,49 @@
+import { getComplementaryColor as y, getContrastingColor as C } from "./contrast.js";
+import { rgbToHex as p, rgbToHsl as d } from "./conversion.js";
+import { lighten as K, darken as $ } from "./manipulate.js";
+import { parseColor as f } from "./parse.js";
+function U(m, o) {
+  const n = { ...m }, l = (t, r) => {
+    const i = f(t), a = p(K(i, 85)), c = p($(i, 25)), e = r.toString().replace(/(Light|Dark)$/, "");
+    return {
+      [e]: t,
+      [`${e}Light`]: a,
+      [`${e}Dark`]: c
+    };
+  }, s = (t) => {
+    const r = f(t), i = d(r);
+    return C(i.l);
+  }, k = [
+    "primary",
+    "secondary",
+    "highlight",
+    "info",
+    "success",
+    "warning",
+    "danger",
+    "neutral"
+  ];
+  for (const t of k) {
+    const r = t, i = `${t}Light`, a = `${t}Dark`, c = `on${t.charAt(0).toUpperCase() + t.slice(1)}`, e = `on${t.charAt(0).toUpperCase() + t.slice(1)}Light`, g = `on${t.charAt(0).toUpperCase() + t.slice(1)}Dark`;
+    if (o[r]) {
+      const h = l(o[r], r);
+      Object.assign(n, h), n[c] = s(o[r]), n[e] = s(h[i]), n[g] = s(h[a]);
+    }
+    o[r] || (o[i] && (n[i] = o[i], o[e] || (n[e] = s(o[i]))), o[a] && (n[a] = o[a], o[g] || (n[g] = s(o[a])))), o[c] && (n[c] = o[c]), o[e] && (n[e] = o[e]), o[g] && (n[g] = o[g]);
+  }
+  if (o.primary && !o.highlight) {
+    const t = y(o.primary), r = l(t, "highlight");
+    Object.assign(n, r), n.onHighlight = s(t), n.onHighlightLight = s(r.highlightLight), n.onHighlightDark = s(r.highlightDark);
+  }
+  const u = ["background", "container"];
+  for (const t of u)
+    if (o[t]) {
+      n[t] = o[t];
+      const r = `on${t.charAt(0).toUpperCase() + t.slice(1)}`;
+      o[r] || (n[r] = s(o[t]));
+    }
+  return o.onBackground && (n.onBackground = o.onBackground), o.onContainer && (n.onContainer = o.onContainer), n;
+}
+export {
+  U as mergeColorSchemes
+};

package/esm/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './color';
+//# sourceMappingURL=index.d.ts.map

package/esm/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/esm/utils/index.js

@@ -0,0 +1,20 @@
+import { getComplementaryColor as e, getContrastingColor as t } from "./color/contrast.js";
+import { hslToRgb as l, hueToRgb as m, rgbToHex as a, rgbToHsl as b, rgbToVariableString as p } from "./color/conversion.js";
+import { darken as x, lighten as i } from "./color/manipulate.js";
+import { mergeColorSchemes as C } from "./color/merge.js";
+import { isValidHex as T, parseColor as h, tryParseRgb as H } from "./color/parse.js";
+export {
+  x as darken,
+  e as getComplementaryColor,
+  t as getContrastingColor,
+  l as hslToRgb,
+  m as hueToRgb,
+  T as isValidHex,
+  i as lighten,
+  C as mergeColorSchemes,
+  h as parseColor,
+  a as rgbToHex,
+  b as rgbToHsl,
+  p as rgbToVariableString,
+  H as tryParseRgb
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quidgest/ui",
   "description": "Quidgest's UI framework",
-  "version": "0.16.34",
+  "version": "0.16.36",
   "private": false,
   "type": "module",
   "author": "Quidgest",