@quidgest/ui 0.16.7 → 0.16.9

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.16.7
+ * Quidgest UI v0.16.9
  * (c) 2025 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -639,50 +639,60 @@ $transition-duration: 0.2s !default;
     background-color: var(--q-button-main-color);
     border-color: var(--q-button-main-color);
     color: var(--q-button-on-main-color);
-    &:hover:not(:disabled) {
-      background-color: var(--q-button-hover-color);
-      border-color: var(--q-button-hover-color);
-      color: var(--q-button-on-hover-color);
+    @media (hover: hover) {
+      &:hover:not(:disabled) {
+        background-color: var(--q-button-hover-color);
+        border-color: var(--q-button-hover-color);
+        color: var(--q-button-on-hover-color);
+      }
     }
   }
   &--tonal {
     background-color: rgb(var(--q-button-main-color-rgb) / 12%);
     border-color: transparent;
     color: var(--q-button-main-color);
-    &:hover:not(:disabled) {
-      background-color: var(--q-button-hover-color);
-      border-color: var(--q-button-hover-color);
-      color: var(--q-button-on-hover-color);
+    @media (hover: hover) {
+      &:hover:not(:disabled) {
+        background-color: var(--q-button-hover-color);
+        border-color: var(--q-button-hover-color);
+        color: var(--q-button-on-hover-color);
+      }
     }
   }
   &--outlined {
     background-color: transparent;
     border-color: var(--q-button-main-color);
     color: var(--q-button-main-color);
-    &:hover:not(:disabled) {
-      background-color: var(--q-button-hover-color);
-      color: var(--q-button-on-hover-color);
-      border-color: var(--q-button-hover-color);
+    @media (hover: hover) {
+      &:hover:not(:disabled) {
+        background-color: var(--q-button-hover-color);
+        color: var(--q-button-on-hover-color);
+        border-color: var(--q-button-hover-color);
+      }
     }
   }
   &--ghost {
     background-color: transparent;
     border-color: transparent;
     color: var(--q-button-main-color);
-    &:hover:not(:disabled) {
-      background-color: rgb(var(--q-button-hover-color-rgb) / 6%);
-      border-color: transparent;
-      color: var(--q-button-hover-color);
+    @media (hover: hover) {
+      &:hover:not(:disabled) {
+        background-color: rgb(var(--q-button-hover-color-rgb) / 6%);
+        border-color: transparent;
+        color: var(--q-button-hover-color);
+      }
     }
   }
   &--text {
     background-color: transparent;
     border-color: transparent;
     color: var(--q-button-main-color);
-    &:hover:not(:disabled) {
-      background-color: transparent;
-      border-color: transparent;
-      color: var(--q-button-hover-color);
+    @media (hover: hover) {
+      &:hover:not(:disabled) {
+        background-color: transparent;
+        border-color: transparent;
+        color: var(--q-button-hover-color);
+      }
     }
   }
   &--pill {

package/esm/components/QDateTimePicker/QDateTimePicker.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as F, mergeModels as U, useModel as g, computed as t, ref as w, createBlock as D, openBlock as O, unref as r, normalizeClass as P, createSlots as E, withCtx as n, createVNode as s, createElementVNode as N, mergeProps as y, renderSlot as Q } from "vue";
+import { defineComponent as C, mergeModels as O, useModel as F, computed as t, ref as U, createBlock as w, openBlock as D, unref as r, normalizeClass as P, createSlots as E, withCtx as n, createVNode as s, createElementVNode as N, mergeProps as y, renderSlot as Q } from "vue";
 import { DEFAULT_TEXTS as H, DEFAULT_ICONS as I } from "./types.js";
 import { QClearButton as Z } from "../__internal__/QClearButton/index.js";
 import { QField as $ } from "../QField/index.js";
@@ -9,10 +9,10 @@ import { convertDatePatternToMask as X } from "../../utils/date/date.js";
 import { isTimeOnlyFormat as j } from "../../utils/date/tokens.js";
 import { formatUsesTime as G, formatUsesSeconds as W, uses12HourFormat as J } from "../../utils/time.js";
 import { useTheme as Y } from "../../composables/theme.js";
-const ee = ["value", "placeholder", "disabled", "readonly", "required", "onInput", "onBlur", "onFocus", "onKeypress", "onKeydown", "onPaste"], pe = /* @__PURE__ */ F({
+const ee = ["value", "placeholder", "disabled", "readonly", "required", "onInput", "onBlur", "onFocus", "onKeypress", "onKeydown", "onPaste"], ce = /* @__PURE__ */ C({
   inheritAttrs: !1,
   __name: "QDateTimePicker",
-  props: /* @__PURE__ */ U({
+  props: /* @__PURE__ */ O({
     id: {},
     class: {},
     label: {},
@@ -28,6 +28,7 @@ const ee = ["value", "placeholder", "disabled", "readonly", "required", "onInput
     locale: { default: "en-US" },
     placeholder: {},
     inline: { type: Boolean },
+    closeOnSelect: { type: Boolean },
     icons: { default: () => I },
     texts: { default: () => H }
   }, {
@@ -36,12 +37,12 @@ const ee = ["value", "placeholder", "disabled", "readonly", "required", "onInput
   }),
   emits: ["update:modelValue"],
   setup(d) {
-    const e = d, m = g(d, "modelValue"), u = t({
+    const e = d, m = F(d, "modelValue"), u = t({
       get: () => m.value,
       set: (o) => m.value = o || void 0
-    }), k = t(() => i.value ? "format" : void 0), v = {
-      closeOnAutoApply: !1
-    }, b = Y(), T = t(() => b.current.value.mode === "dark"), x = t(() => G(e.format)), h = t(() => W(e.format)), i = t(() => j(e.format)), z = t(() => J(e.format)), _ = t(() => c(e.minTime)), A = t(() => c(e.maxTime)), B = t(() => i.value ? e.icons.clock : e.icons.calendar), M = t(() => ({
+    }), k = t(() => i.value ? "format" : void 0), v = t(() => ({
+      closeOnAutoApply: e.closeOnSelect
+    })), b = Y(), T = t(() => b.current.value.mode === "dark"), x = t(() => G(e.format)), h = t(() => W(e.format)), i = t(() => j(e.format)), z = t(() => J(e.format)), B = t(() => p(e.minTime)), _ = t(() => p(e.maxTime)), A = t(() => i.value ? e.icons.clock : e.icons.calendar), M = t(() => ({
       mask: X(e.format),
       tokens: {
         // Default tokens
@@ -69,9 +70,9 @@ const ee = ["value", "placeholder", "disabled", "readonly", "required", "onInput
       },
       eager: !0
       // Show static characters before the user types them
-    })), p = w();
-    R(p, M);
-    function c(o) {
+    })), c = U();
+    R(c, M);
+    function p(o) {
       if (!o) return;
       const a = o.split(":");
       return {
@@ -80,7 +81,7 @@ const ee = ["value", "placeholder", "disabled", "readonly", "required", "onInput
         seconds: a[2]
       };
     }
-    return (o, a) => (O(), D(r($), {
+    return (o, a) => (D(), w(r($), {
       id: e.id,
       class: P(e.class),
       label: e.label,
@@ -93,7 +94,7 @@ const ee = ["value", "placeholder", "disabled", "readonly", "required", "onInput
       prepend: n(() => [
         s(
           r(K),
-          y({ class: "q-date-time-picker__input-icon" }, B.value),
+          y({ class: "q-date-time-picker__input-icon" }, A.value),
           null,
           16
           /* FULL_PROPS */
@@ -104,8 +105,8 @@ const ee = ["value", "placeholder", "disabled", "readonly", "required", "onInput
           modelValue: u.value,
           "onUpdate:modelValue": a[0] || (a[0] = (l) => u.value = l),
           "model-type": k.value,
-          "min-time": _.value,
-          "max-time": A.value,
+          "min-time": B.value,
+          "max-time": _.value,
           disabled: e.disabled,
           readonly: e.readonly,
           format: e.format,
@@ -114,7 +115,7 @@ const ee = ["value", "placeholder", "disabled", "readonly", "required", "onInput
           "enable-time-picker": x.value,
           "enable-seconds": h.value,
           "time-picker": i.value,
-          config: v,
+          config: v.value,
           teleport: !e.inline,
           offset: 16,
           dark: T.value,
@@ -123,10 +124,10 @@ const ee = ["value", "placeholder", "disabled", "readonly", "required", "onInput
           clearable: "",
           "auto-apply": ""
         }, {
-          "dp-input": n(({ value: l, onInput: q, onBlur: V, onFocus: C, onKeypress: f, onPaste: S }) => [
+          "dp-input": n(({ value: l, onInput: S, onBlur: q, onFocus: V, onKeypress: f, onPaste: g }) => [
             N("input", y({
               ref_key: "inputRef",
-              ref: p,
+              ref: c,
               "data-test-id": "dp-input",
               class: "dp__input",
               type: "text",
@@ -136,12 +137,12 @@ const ee = ["value", "placeholder", "disabled", "readonly", "required", "onInput
               readonly: e.readonly,
               required: e.required
             }, o.$attrs, {
-              onInput: q,
-              onBlur: V,
-              onFocus: C,
+              onInput: S,
+              onBlur: q,
+              onFocus: V,
               onKeypress: f,
               onKeydown: f,
-              onPaste: S
+              onPaste: g
             }), null, 16, ee)
           ]),
           "clear-icon": n(({ clear: l }) => [
@@ -152,7 +153,7 @@ const ee = ["value", "placeholder", "disabled", "readonly", "required", "onInput
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["modelValue", "model-type", "min-time", "max-time", "disabled", "readonly", "format", "is24", "locale", "enable-time-picker", "enable-seconds", "time-picker", "teleport", "dark"])
+        }, 8, ["modelValue", "model-type", "min-time", "max-time", "disabled", "readonly", "format", "is24", "locale", "enable-time-picker", "enable-seconds", "time-picker", "config", "teleport", "dark"])
       ]),
       _: 2
       /* DYNAMIC */
@@ -168,5 +169,5 @@ const ee = ["value", "placeholder", "disabled", "readonly", "required", "onInput
   }
 });
 export {
-  pe as default
+  ce as default
 };

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

@@ -19,6 +19,7 @@ declare const QDateTimePicker: {
         locale?: string;
         placeholder?: string;
         inline?: boolean;
+        closeOnSelect?: boolean;
         icons?: typeof import('./types').DEFAULT_ICONS;
         texts?: typeof import('./types').DEFAULT_TEXTS;
     }> & Readonly<{
@@ -58,6 +59,7 @@ declare const QDateTimePicker: {
         locale?: string;
         placeholder?: string;
         inline?: boolean;
+        closeOnSelect?: boolean;
         icons?: typeof import('./types').DEFAULT_ICONS;
         texts?: typeof import('./types').DEFAULT_TEXTS;
     }> & Readonly<{
@@ -90,6 +92,7 @@ declare const QDateTimePicker: {
     locale?: string;
     placeholder?: string;
     inline?: boolean;
+    closeOnSelect?: boolean;
     icons?: typeof import('./types').DEFAULT_ICONS;
     texts?: typeof import('./types').DEFAULT_TEXTS;
 }> & Readonly<{

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QDateTimePicker/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAKnD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAoC,CAAA;AAGzD,OAAO,EAAE,eAAe,EAAE,CAAA;AAG1B,YAAY,EAAE,oBAAoB,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QDateTimePicker/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAKnD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAoC,CAAA;AAGzD,OAAO,EAAE,eAAe,EAAE,CAAA;AAG1B,YAAY,EAAE,oBAAoB,EAAE,CAAA"}

package/esm/components/QDateTimePicker/types.d.ts

@@ -41,6 +41,10 @@ export type QDateTimePickerProps = QFieldProps & {
      * Whether to disable teleport.
      */
     inline?: boolean;
+    /**
+     * Whether to close the popup when selecting the date.
+     */
+    closeOnSelect?: boolean;
     /**
      * Custom icon configurations.
      */

package/esm/components/QDateTimePicker/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QDateTimePicker/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG5C,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAChD;;;;;;;;;;;;;;;;;OAiBG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;CAC5B,CAAA;AAGD,eAAO,MAAM,aAAa;;;;;;;CAOM,CAAA;AAGhC,eAAO,MAAM,aAAa;;CAEQ,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QDateTimePicker/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG5C,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAChD;;;;;;;;;;;;;;;;;OAiBG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;CAC5B,CAAA;AAGD,eAAO,MAAM,aAAa;;;;;;;CAOM,CAAA;AAGhC,eAAO,MAAM,aAAa;;CAEQ,CAAA"}

package/esm/components/QDismissibleLayer/QDismissibleLayer.d.ts

@@ -5,7 +5,7 @@ declare function __VLS_template(): {
         default?(_: {}): any;
     };
     refs: {
-        layerRef: HTMLDivElement;
+        layer: HTMLDivElement;
     };
     rootEl: HTMLDivElement;
 };
@@ -23,7 +23,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {},
     "onInteract-outside"?: ((event: PointerDownOutsideEvent | FocusOutsideEvent) => any) | undefined;
     onDismiss?: ((event: KeyboardEvent | PointerDownOutsideEvent | FocusOutsideEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
-    layerRef: HTMLDivElement;
+    layer: HTMLDivElement;
 }, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"QDismissibleLayer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QDismissibleLayer/QDismissibleLayer.vue"],"names":[],"mappings":"AAKA;AAyIC,OAAO,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAyH1E,iBAAS,cAAc;WA0BT,OAAO,IAA6B;;yBAXrB,GAAG;;;;;;EAgB/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;kBAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAEpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"QDismissibleLayer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QDismissibleLayer/QDismissibleLayer.vue"],"names":[],"mappings":"AAKA;AAsKC,OAAO,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAwJ1E,iBAAS,cAAc;WA0BT,OAAO,IAA6B;;yBAXrB,GAAG;;;;;;EAgB/B;AAQD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;kBAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAEpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/esm/components/QDismissibleLayer/QDismissibleLayer.vue.js

@@ -1,46 +1,64 @@
-import { defineComponent as a, ref as c, useId as f, onMounted as m, onUnmounted as p, createElementBlock as v, openBlock as E, renderSlot as y } from "vue";
-import { onClickOutside as b } from "../../vendors/@vueuse/core/index.js";
-import { useDismissibleLayerStackItem as w } from "../../composables/useDismissibleLayerStack/index.js";
-const h = /* @__PURE__ */ a({
+import { defineComponent as p, useTemplateRef as m, useId as v, onMounted as E, onUnmounted as w, createElementBlock as h, openBlock as y, renderSlot as b } from "vue";
+import { useDismissibleLayerStackItem as _ } from "../../composables/useDismissibleLayerStack/index.js";
+const g = { ref: "layer" }, P = /* @__PURE__ */ p({
   __name: "QDismissibleLayer",
   emits: ["escape-key-down", "pointer-down-outside", "focus-outside", "interact-outside", "dismiss"],
-  setup(_, { emit: u }) {
-    const o = u, i = c(null), l = f(), e = w(l);
-    function r(n) {
-      n.key === "Escape" && (e != null && e.isTop()) && (o("escape-key-down", n), n.defaultPrevented || o("dismiss", n));
+  setup(L, { emit: c }) {
+    const o = c, u = m("layer"), l = v(), e = _(l);
+    let i = [];
+    function r(t) {
+      t.key === "Escape" && (e != null && e.isTop()) && (o("escape-key-down", t), t.defaultPrevented || o("dismiss", t));
     }
-    function d(n) {
-      if (!i.value) return;
-      const t = n.target;
-      if (!i.value.contains(t) && (e != null && e.isTop())) {
-        const s = new CustomEvent("focus-outside", {
+    function d(t) {
+      if (!u.value) return;
+      const s = t.target;
+      if (!u.value.contains(s) && (e != null && e.isTop())) {
+        const n = new CustomEvent("focus-outside", {
           bubbles: !1,
           cancelable: !0,
-          detail: { originalEvent: n }
+          detail: { originalEvent: t }
         });
-        o("focus-outside", s), o("interact-outside", s), s.defaultPrevented || o("dismiss", s);
+        o("focus-outside", n), o("interact-outside", n), n.defaultPrevented || o("dismiss", n);
       }
     }
-    return m(() => {
-      e == null || e.register(), document.addEventListener("keydown", r), document.addEventListener("focusin", d), b(i, (n) => {
-        if (!(e != null && e.isTop())) return;
-        const t = new CustomEvent("pointer-down-outside", {
+    function a(t) {
+      if (!u.value || !(e != null && e.isTop())) return;
+      const s = t.target;
+      if (!u.value.contains(s)) {
+        const n = new CustomEvent("pointer-down-outside", {
           bubbles: !1,
           cancelable: !0,
-          detail: { originalEvent: n }
+          detail: { originalEvent: t }
+        });
+        o("pointer-down-outside", n), o("interact-outside", n), n.defaultPrevented || o("dismiss", n);
+      }
+    }
+    function f() {
+      ["mousedown", "touchstart"].forEach((s) => {
+        document.addEventListener(s, a, {
+          passive: !0,
+          capture: !0
+          // Use capture phase to ensure we catch the event
+        }), i.push(() => {
+          document.removeEventListener(s, a, {
+            capture: !0
+          });
         });
-        o("pointer-down-outside", t), o("interact-outside", t), t.defaultPrevented || o("dismiss", t);
       });
-    }), p(() => {
-      e == null || e.unregister(), document.removeEventListener("keydown", r), document.removeEventListener("focusin", d);
-    }), (n, t) => (E(), v(
+    }
+    return E(() => {
+      e == null || e.register(), document.addEventListener("keydown", r), i.push(() => {
+        document.removeEventListener("keydown", r);
+      }), document.addEventListener("focusin", d), i.push(() => {
+        document.removeEventListener("focusin", d);
+      }), f();
+    }), w(() => {
+      e == null || e.unregister(), i.forEach((t) => t()), i = [];
+    }), (t, s) => (y(), h(
       "div",
-      {
-        ref_key: "layerRef",
-        ref: i
-      },
+      g,
       [
-        y(n.$slots, "default")
+        b(t.$slots, "default")
       ],
       512
       /* NEED_PATCH */
@@ -48,5 +66,5 @@ const h = /* @__PURE__ */ a({
   }
 });
 export {
-  h as default
+  P as default
 };

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

@@ -13,7 +13,7 @@ declare const QDismissibleLayer: {
         "interact-outside": (event: PointerDownOutsideEvent | FocusOutsideEvent) => any;
         dismiss: (event: KeyboardEvent | PointerDownOutsideEvent | FocusOutsideEvent) => any;
     }, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
-        layerRef: HTMLDivElement;
+        layer: HTMLDivElement;
     }, HTMLDivElement, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};

package/esm/components/QSidebar/QSidebar.vue.js

@@ -4,9 +4,9 @@ import F from "./QSidebarPanel.vue.js";
 const K = /* @__PURE__ */ P({
   __name: "QSidebar",
   props: /* @__PURE__ */ z({
+    panels: {},
     anchorWidth: { default: 50 },
     showLabels: { type: Boolean },
-    panels: {},
     position: { default: "left" }
   }, {
     modelValue: {},
@@ -22,18 +22,21 @@ const K = /* @__PURE__ */ P({
       },
       { immediate: !0 }
     );
-    const i = r(() => a.panels.find((e) => e.id === m.value)), h = r(() => !!i.value), t = b(), q = r(() => {
-      if (t.value !== void 0)
-        return h.value ? typeof t.value == "number" ? `${a.anchorWidth + t.value}px` : `calc(${a.anchorWidth}px + ${t.value})` : `${a.anchorWidth}px`;
+    const i = r(() => {
+      var e;
+      return (e = a.panels) == null ? void 0 : e.find((t) => t.id === m.value);
+    }), h = r(() => !!i.value), l = b(), q = r(() => {
+      if (l.value !== void 0)
+        return h.value ? typeof l.value == "number" ? `${a.anchorWidth + l.value}px` : `calc(${a.anchorWidth}px + ${l.value})` : `${a.anchorWidth}px`;
     }), C = r(() => {
-      var e, l, d, v, p, c, $;
+      var e, t, d, v, p, c, $;
       return [
         "q-sidebar",
         `q-sidebar--${((e = i.value) == null ? void 0 : e.initialWidth) ?? "small"}`,
         `q-sidebar--${a.position}`,
         {
           "q-sidebar--expanded": h.value,
-          [`q-sidebar--min-${(l = i.value) == null ? void 0 : l.minWidth}`]: ((d = i.value) == null ? void 0 : d.resizable) && ((v = i.value) == null ? void 0 : v.minWidth) !== void 0,
+          [`q-sidebar--min-${(t = i.value) == null ? void 0 : t.minWidth}`]: ((d = i.value) == null ? void 0 : d.resizable) && ((v = i.value) == null ? void 0 : v.minWidth) !== void 0,
           [`q-sidebar--max-${(p = i.value) == null ? void 0 : p.maxWidth}`]: ((c = i.value) == null ? void 0 : c.resizable) && (($ = i.value) == null ? void 0 : $.maxWidth) !== void 0
         }
       ];
@@ -42,10 +45,10 @@ const K = /* @__PURE__ */ P({
       u("resize:start");
     }
     function g(e) {
-      t.value = e, u("resize", e);
+      l.value = e, u("resize", e);
     }
     function B() {
-      u("resize:end", t.value);
+      u("resize:end", l.value);
     }
     function L(e) {
       u("click:item", e);
@@ -54,11 +57,11 @@ const K = /* @__PURE__ */ P({
       n.value || (m.value = void 0);
     }
     function M() {
-      var l;
-      const e = (l = i.value) == null ? void 0 : l.initialWidth;
-      typeof e == "number" ? t.value = e : t.value = void 0;
+      var t;
+      const e = (t = i.value) == null ? void 0 : t.initialWidth;
+      typeof e == "number" ? l.value = e : l.value = void 0;
     }
-    return W([() => a.anchorWidth, i], M, { immediate: !0, deep: !0 }), (e, l) => (w(), A(
+    return W([() => a.anchorWidth, i], M, { immediate: !0, deep: !0 }), (e, t) => (w(), A(
       "div",
       {
         class: I(C.value),
@@ -67,7 +70,7 @@ const K = /* @__PURE__ */ P({
       [
         k(D, {
           modelValue: n.value,
-          "onUpdate:modelValue": l[0] || (l[0] = (d) => n.value = d),
+          "onUpdate:modelValue": t[0] || (t[0] = (d) => n.value = d),
           panels: a.panels,
           "anchor-width": a.anchorWidth,
           "show-labels": a.showLabels,

package/esm/components/QSidebar/QSidebarAnchor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QSidebarAnchor.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QSidebar/QSidebarAnchor.vue"],"names":[],"mappings":"AA8BA;AA+HC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAGlD,OAAO,EAAE,QAAQ,EAAc,MAAM,KAAK,CAAA;AAE1C,KAAK,WAAW,GAAG,mBAAmB,CAAC;AAmFxC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAoFT,OAAO,IAA6B;;;UAZoC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAyD09e,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;EAxCxqf;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAwB8hf,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;kBAfvqf,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"QSidebarAnchor.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QSidebar/QSidebarAnchor.vue"],"names":[],"mappings":"AA8BA;AA+HC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAGlD,OAAO,EAAE,QAAQ,EAAc,MAAM,KAAK,CAAA;AAE1C,KAAK,WAAW,GAAG,mBAAmB,CAAC;AAmFxC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAoFT,OAAO,IAA6B;;;UAZoC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAyD48e,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;EAxC1pf;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAwBghf,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;kBAfzpf,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/esm/components/QSidebar/QSidebarAnchor.vue.js

@@ -1,28 +1,29 @@
-import { defineComponent as w, mergeModels as c, useModel as C, ref as d, watch as L, nextTick as q, createElementBlock as u, openBlock as s, normalizeStyle as f, createElementVNode as m, Fragment as I, renderList as V, createBlock as p, unref as h, withCtx as B, renderSlot as S, createCommentVNode as $, mergeProps as E } from "vue";
-import { QIcon as M } from "../QIcon/index.js";
-import { QToggle as Q } from "../QToggle/index.js";
-const T = { class: "q-sidebar__items" }, W = /* @__PURE__ */ w({
+import { defineComponent as C, mergeModels as d, useModel as L, ref as u, watch as q, nextTick as I, createElementBlock as f, openBlock as s, normalizeStyle as m, createElementVNode as p, Fragment as V, renderList as B, createBlock as h, unref as v, withCtx as S, renderSlot as $, createCommentVNode as E, mergeProps as M } from "vue";
+import { QIcon as Q } from "../QIcon/index.js";
+import { QToggle as T } from "../QToggle/index.js";
+const H = { class: "q-sidebar__items" }, Y = /* @__PURE__ */ C({
   __name: "QSidebarAnchor",
-  props: /* @__PURE__ */ c({
+  props: /* @__PURE__ */ d({
+    panels: {},
     anchorWidth: {},
-    showLabels: { type: Boolean },
-    panels: {}
+    showLabels: { type: Boolean }
   }, {
     modelValue: {},
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ c(["click:item"], ["update:modelValue"]),
-  setup(r, { emit: v }) {
-    const i = r, _ = v, o = C(r, "modelValue"), a = d({
+  emits: /* @__PURE__ */ d(["click:item"], ["update:modelValue"]),
+  setup(r, { emit: _ }) {
+    const i = r, g = _, o = L(r, "modelValue"), a = u({
       height: "0",
       transform: "translateY(0)",
       opacity: "0",
       transition: "transform 0.3s ease, height 0.3s ease, opacity 0.2s ease"
-    }), l = d([]);
-    function g(e) {
-      o.value = o.value === e ? void 0 : e, _("click:item", e);
+    }), l = u([]);
+    function b(e) {
+      o.value = o.value === e ? void 0 : e, g("click:item", e);
     }
-    function b() {
+    function k() {
+      var c;
       if (!o.value) {
         a.value = {
           ...a.value,
@@ -31,41 +32,41 @@ const T = { class: "q-sidebar__items" }, W = /* @__PURE__ */ w({
         };
         return;
       }
-      const e = i.panels.findIndex((x) => x.id === o.value);
+      const e = ((c = i.panels) == null ? void 0 : c.findIndex((w) => w.id === o.value)) ?? -1;
       if (e === -1 || !l.value[e])
         return;
       const n = l.value[e].$el || l.value[e];
       if (!n) return;
-      const k = e === l.value.length - 1 ? n.offsetHeight : n.offsetHeight - 1, y = n.offsetTop;
+      const y = e === l.value.length - 1 ? n.offsetHeight : n.offsetHeight - 1, x = n.offsetTop;
       a.value = {
         ...a.value,
-        height: `${k}px`,
-        transform: `translateY(${y}px)`,
+        height: `${y}px`,
+        transform: `translateY(${x}px)`,
         opacity: "1"
       };
     }
-    return L(o, () => q(b), { immediate: !0 }), (e, n) => (s(), u(
+    return q(o, () => I(k), { immediate: !0 }), (e, n) => (s(), f(
       "div",
       {
         class: "q-sidebar-anchor",
-        style: f({ width: i.anchorWidth + "px" })
+        style: m({ width: i.anchorWidth + "px" })
       },
       [
-        m("div", T, [
-          m(
+        p("div", H, [
+          p(
             "div",
             {
               class: "q-sidebar__indicator",
-              style: f(a.value)
+              style: m(a.value)
             },
             null,
             4
             /* STYLE */
           ),
-          (s(!0), u(
-            I,
+          (s(!0), f(
+            V,
             null,
-            V(e.panels, (t) => (s(), p(h(Q), {
+            B(e.panels, (t) => (s(), h(v(T), {
               key: t.id,
               ref_for: !0,
               ref_key: "itemRefs",
@@ -76,20 +77,20 @@ const T = { class: "q-sidebar__items" }, W = /* @__PURE__ */ w({
               title: i.showLabels ? void 0 : t.title,
               "icon-pos": "top",
               class: "q-sidebar__item",
-              onClick: () => g(t.id)
+              onClick: () => b(t.id)
             }, {
-              default: B(() => [
-                S(e.$slots, t.id, { item: t }, () => [
-                  t.icon ? (s(), p(
-                    h(M),
-                    E({
+              default: S(() => [
+                $(e.$slots, t.id, { item: t }, () => [
+                  t.icon ? (s(), h(
+                    v(Q),
+                    M({
                       key: 0,
                       ref_for: !0
                     }, t.icon),
                     null,
                     16
                     /* FULL_PROPS */
-                  )) : $("v-if", !0)
+                  )) : E("v-if", !0)
                 ])
               ]),
               _: 2
@@ -106,5 +107,5 @@ const T = { class: "q-sidebar__items" }, W = /* @__PURE__ */ w({
   }
 });
 export {
-  W as default
+  Y as default
 };

package/esm/components/QSidebar/types.d.ts

@@ -44,12 +44,12 @@ export type QSidebarPanelProps = Omit<QSidebarAnchorItemProps, 'id'> & {
  * Includes the width of the anchor section and panel configurations.
  */
 export type QSidebarAnchorProps = {
+    /** List of panels that can be anchored in the sidebar. */
+    panels?: QSidebarAnchorItemProps[];
     /** Width of the anchor section (in pixels). */
     anchorWidth?: number;
     /** Whether to display labels alongside icons in anchor items. */
     showLabels?: boolean;
-    /** List of panels that can be anchored in the sidebar. */
-    panels: QSidebarAnchorItemProps[];
 };
 /**
  * Complete set of props for the `QSidebar` component, combining anchor section props