@citruslime/ui 4.0.0-beta.14 → 4.0.0-beta.16

package/dist/citrus-lime-ui.es.js

@@ -1,7 +1,7 @@
 import { Icon as ee } from "@iconify/vue";
-import { defineComponent as P, ref as I, openBlock as u, createElementBlock as h, renderSlot as O, normalizeProps as ge, guardReactiveProps as be, Fragment as W, createElementVNode as b, normalizeClass as V, createVNode as q, unref as v, Transition as Ie, withCtx as U, withDirectives as oe, mergeProps as Q, vShow as fe, createBlock as L, Teleport as Cl, renderList as x, toDisplayString as z, createCommentVNode as B, computed as k, createTextVNode as re, mergeModels as me, useModel as ye, watch as le, createSlots as we, vModelDynamic as Jl, toRefs as Xl, withKeys as ne, onMounted as He, onUnmounted as Tl, withModifiers as X, nextTick as Le, useAttrs as Ze, resolveComponent as Ce, inject as il, vModelCheckbox as Et, toValue as Nl, watchEffect as At, vModelText as Sl, useCssVars as xl, toHandlers as Vt, useSlots as Mt, provide as vl, normalizeStyle as _l, isRef as It } from "vue";
+import { defineComponent as P, ref as I, openBlock as u, createElementBlock as h, renderSlot as O, normalizeProps as ge, guardReactiveProps as be, Fragment as W, createElementVNode as b, normalizeClass as V, createVNode as q, unref as v, Transition as Ie, withCtx as U, withDirectives as oe, mergeProps as Q, vShow as fe, createBlock as L, Teleport as Cl, renderList as x, toDisplayString as z, createCommentVNode as B, computed as k, createTextVNode as re, mergeModels as me, useModel as ye, watch as le, createSlots as we, vModelDynamic as Jl, toRefs as Xl, withKeys as ne, onMounted as Ge, onUnmounted as Tl, withModifiers as X, nextTick as Le, useAttrs as Ze, resolveComponent as Ce, inject as il, vModelCheckbox as Et, toValue as Nl, watchEffect as At, vModelText as Sl, useCssVars as xl, toHandlers as Vt, useSlots as Mt, provide as vl, normalizeStyle as _l, isRef as It } from "vue";
 import { generateStringId as Nt, highlightText as Rt, validateEmail as Ut, escapeStringForRegExp as zt } from "@citruslime/utils";
-import { useFocusWithin as ql, onKeyDown as hl, unrefElement as Bt, tryOnScopeDispose as Ft, onClickOutside as xe, useEventListener as Lt, useTimeoutFn as et, useMouseInElement as Pt, useMediaQuery as lt, useThrottle as jt, useElementBounding as bl, useDebounceFn as Je, useBreakpoints as Gt, breakpointsTailwind as Ht, useThrottleFn as Zt, useWindowSize as Wt, useElementSize as Rl } from "@vueuse/core";
+import { useFocusWithin as ql, onKeyDown as hl, unrefElement as Bt, tryOnScopeDispose as Ft, onClickOutside as xe, useEventListener as Lt, useTimeoutFn as et, useMouseInElement as Pt, useMediaQuery as lt, useThrottle as jt, useElementBounding as bl, useDebounceFn as Je, useBreakpoints as Ht, breakpointsTailwind as Gt, useThrottleFn as Zt, useWindowSize as Wt, useElementSize as Rl } from "@vueuse/core";
 import { useI18n as ue, createI18n as Kt } from "vue-i18n";
 import { createFocusTrap as Qt } from "focus-trap";
 import { copy as ke } from "@citruslime/vue-utils";
@@ -652,7 +652,7 @@ const Mo = {
 }), Bo = ["onKeyup"], Fo = {
   key: 0,
   class: "cl-absolute cl-bg-off-white cl-flex cl-h-full cl-items-center cl-justify-center cl-top-0 cl-w-full cl-z-20"
-}, Lo = { class: "cl-bg-white cl-flex cl-p-2 cl-pb-1 cl-sticky cl-top-0 cl-w-full cl-z-10" }, Po = { class: "cl-inline-block cl-w-full" }, jo = { key: 6 }, Go = /* @__PURE__ */ P({
+}, Lo = { class: "cl-bg-white cl-flex cl-p-2 cl-pb-1 cl-sticky cl-top-0 cl-w-full cl-z-10" }, Po = { class: "cl-inline-block cl-w-full" }, jo = { key: 6 }, Ho = /* @__PURE__ */ P({
   __name: "cl-ui-combo-box-search",
   props: {
     loading: { type: Boolean, default: !1 },
@@ -716,7 +716,7 @@ const Mo = {
         return (Y = (A = r.value) == null ? void 0 : A.querySelector("input")) == null ? void 0 : Y.focus();
       }));
     }
-    return le(() => l.results, () => S()), le(() => l.errorMessage, () => S()), le(() => l.isVisible, () => _()), He(() => {
+    return le(() => l.results, () => S()), le(() => l.errorMessage, () => S()), le(() => l.isVisible, () => _()), Ge(() => {
       var A;
       return (A = r.value) == null ? void 0 : A.addEventListener("keydown", N);
     }), Tl(() => {
@@ -804,7 +804,7 @@ const Mo = {
       ], 42, Bo)) : B("", !0);
     };
   }
-}), Ho = { class: "cl-flex cl-rounded-lg" }, Zo = { class: "cl-inline-block cl-w-full" }, Wo = { class: "cl-pointer-events-none cl-relative cl-top-0.5" }, Ko = { class: "cl-absolute cl-flex cl-float-right cl-font-semibold cl-mt-[5px] cl-right-2 cl-text-danger-default cl-text-sm cl-z-10" }, Qo = ["disabled"], Yo = ["disabled"], Jo = { class: "cl-min-h-[16rem] cl-mx-4" }, Xo = { class: "cl-p-2 cl-text-right cl-w-full" }, xo = /* @__PURE__ */ P({
+}), Go = { class: "cl-flex cl-rounded-lg" }, Zo = { class: "cl-inline-block cl-w-full" }, Wo = { class: "cl-pointer-events-none cl-relative cl-top-0.5" }, Ko = { class: "cl-absolute cl-flex cl-float-right cl-font-semibold cl-mt-[5px] cl-right-2 cl-text-danger-default cl-text-sm cl-z-10" }, Qo = ["disabled"], Yo = ["disabled"], Jo = { class: "cl-min-h-[16rem] cl-mx-4" }, Xo = { class: "cl-p-2 cl-text-right cl-w-full" }, xo = /* @__PURE__ */ P({
   inheritAttrs: !1,
   __name: "cl-ui-combo-box",
   props: {
@@ -874,7 +874,7 @@ const Mo = {
         parentId: 0
       }, n("create-parent-object", N.value);
     }
-    function G() {
+    function H() {
       var $, m;
       ($ = e.objectCreatedResponse) != null && $.error ? Ul({
         message: s("comboBox.createFailed", {
@@ -883,7 +883,7 @@ const Mo = {
         }),
         colour: "danger",
         duration: 1e4
-      }) : (m = e.objectCreatedResponse) != null && m.id && H();
+      }) : (m = e.objectCreatedResponse) != null && m.id && G();
     }
     function C() {
       var $;
@@ -892,7 +892,7 @@ const Mo = {
         name: e.parentObjectCreatedResponse.name ?? ""
       });
     }
-    function H() {
+    function G() {
       var m, M, F, pe, de;
       Ul({
         message: s("comboBox.createSuccessful", {
@@ -918,7 +918,7 @@ const Mo = {
       let $ = !0;
       f.value === "" && ($ = !1), e.objectParentType !== "" && w.value === null && ($ = !1), E.value = $;
     }
-    le(() => e.objectCreatedResponse, () => G()), le(() => e.parentObjectCreatedResponse, () => C()), le(() => f.value, () => he()), le(() => w.value, () => he());
+    le(() => e.objectCreatedResponse, () => H()), le(() => e.parentObjectCreatedResponse, () => C()), le(() => f.value, () => he()), le(() => w.value, () => he());
     const Oe = I();
     xe(Oe, () => {
       c.value && j(!1);
@@ -942,7 +942,7 @@ const Mo = {
         ref_key: "outsideRef",
         ref: Oe
       }, i, { class: "cl-relative" }), [
-        b("div", Ho, [
+        b("div", Go, [
           b("div", Zo, [
             q(ze, {
               id: v(d),
@@ -1010,7 +1010,7 @@ const Mo = {
             re(z(v(s)("comboBox.createTitle", { object: $.objectType })), 1)
           ]),
           trigger: U(({ open: F }) => [
-            oe(q(Go, {
+            oe(q(Ho, {
               "can-create-new-object": $.canCreateNewObject,
               "can-clear-selected-object": $.canClearSelectedObject,
               loading: $.loading,
@@ -1570,10 +1570,10 @@ function ml(o, t) {
 }
 function Me(o, t, l) {
   if (pl(t)) {
-    const e = Ge(dl, l);
+    const e = He(dl, l);
     return t.replace(/\{0\}/g, Pl(o, e) ?? "");
   } else {
-    const e = Ge(El(t), l);
+    const e = He(El(t), l);
     let n = Pl(o, e) ?? "";
     if (t === "currency-without-symbol") {
       const a = el(e);
@@ -1593,7 +1593,7 @@ function nt(o, t, l) {
     return Ll(o, El(t), l);
 }
 function Ol(o, t) {
-  return pl(o) ? Ge(dl, t) : Ge(El(o), t);
+  return pl(o) ? He(dl, t) : He(El(o), t);
 }
 function Aa(o, t, l) {
   const e = el(l);
@@ -1619,7 +1619,7 @@ function Va(o, t) {
 function Ll(o, t, l) {
   if (!o)
     return NaN;
-  const e = Ge(t, l), n = el(e);
+  const e = He(t, l), n = el(e);
   if (n === null)
     return NaN;
   const a = [
@@ -1659,7 +1659,7 @@ function el(o) {
     return console.error(t), null;
   }
 }
-function Ge(o, t) {
+function He(o, t) {
   const l = Nl(t == null ? void 0 : t.locale) || v(Oa), e = Ea(l), n = ke(Nl(t == null ? void 0 : t.additionalOptions) ?? {});
   let a = "decimal";
   switch (o) {
@@ -1688,7 +1688,7 @@ function Ma(o) {
   return !pl(o) && o !== "currency-without-symbol";
 }
 function Ia(o, t) {
-  const l = Ge(dl, t), e = el(l);
+  const l = He(dl, t), e = el(l);
   if (e === null)
     return o;
   const n = Ne(e, 10000.11111, "group");
@@ -1936,7 +1936,7 @@ const Fa = {
       ])) : B("", !0);
     };
   }
-}), Ga = /* @__PURE__ */ P({
+}), Ha = /* @__PURE__ */ P({
   __name: "cl-ui-grid-cell",
   props: {
     data: {},
@@ -2016,7 +2016,7 @@ const Fa = {
       }, 1032, ["column", "data", "time-zone", "search-value", "row-index"]))
     ], 2));
   }
-}), Ha = /* @__PURE__ */ P({
+}), Ga = /* @__PURE__ */ P({
   __name: "cl-ui-grid-row",
   props: {
     data: {},
@@ -2030,7 +2030,7 @@ const Fa = {
   emits: ["cell-focus", "cell-edit", "cell-undo"],
   setup(o) {
     return (t, l) => (u(), h("tr", null, [
-      (u(!0), h(W, null, x(t.columns, (e, n) => (u(), L(Ga, {
+      (u(!0), h(W, null, x(t.columns, (e, n) => (u(), L(Ha, {
         key: n,
         data: t.data,
         column: e,
@@ -2141,7 +2141,7 @@ const Fa = {
           }, "   ", 10, Za)
         ]))), 128)) : B("", !0),
         f.data && ((N = f.data.results) != null && N.length) && !f.initialLoad ? (u(), h(W, { key: 1 }, [
-          (u(!0), h(W, null, x(f.data.results, (E, S) => (u(), L(Ha, {
+          (u(!0), h(W, null, x(f.data.results, (E, S) => (u(), L(Ga, {
             key: S,
             data: E,
             options: f.options,
@@ -2242,8 +2242,8 @@ const Fa = {
       s.value ? (N.value = Ia(j.value, {
         locale: e.locale
       }), E.value = !1, (K.value || e.selectOnFocus || n.value === 0) && setTimeout(() => {
-        var G, C;
-        (C = g.value) == null || C.setSelectionRange(0, ((G = N.value) == null ? void 0 : G.length) ?? 0);
+        var H, C;
+        (C = g.value) == null || C.setSelectionRange(0, ((H = N.value) == null ? void 0 : H.length) ?? 0);
       }), K.value = !1, a("focus")) : (E.value && A(j.value, !0), N.value = void 0, E.value = !1, a("blur"));
     });
     const p = k(() => ({
@@ -2259,62 +2259,62 @@ const Fa = {
     le(n, () => N.value = void 0);
     const S = k({
       get: () => N.value ? ie(N.value) : n.value,
-      set: (G) => N.value = Y(G)
+      set: (H) => N.value = Y(H)
     }), j = k({
       get: () => N.value ?? Y(n.value),
-      set(G) {
-        N.value = G, E.value = !0;
+      set(H) {
+        N.value = H, E.value = !0;
       }
     });
-    function _(G) {
-      return G = e.min === null ? G : Math.max(e.min, G), G = e.max === null ? G : Math.min(e.max, G), G;
+    function _(H) {
+      return H = e.min === null ? H : Math.max(e.min, H), H = e.max === null ? H : Math.min(e.max, H), H;
     }
-    function A(G, C) {
-      if (e.allowEmpty && G === "")
+    function A(H, C) {
+      if (e.allowEmpty && H === "")
         n.value = null;
-      else if (G !== "") {
-        let H = typeof G == "number" ? G : ie(G);
-        C && e.format === te.PERCENTAGE && !Aa(j.value, "percentSign", w.value) && (H = H / f.value), isNaN(H) === !1 && (n.value = _(Math.round(H * T.value) / T.value));
+      else if (H !== "") {
+        let G = typeof H == "number" ? H : ie(H);
+        C && e.format === te.PERCENTAGE && !Aa(j.value, "percentSign", w.value) && (G = G / f.value), isNaN(G) === !1 && (n.value = _(Math.round(G * T.value) / T.value));
       }
     }
-    function Y(G) {
-      return G === null ? "" : e.format ? Me(G, e.format, {
+    function Y(H) {
+      return H === null ? "" : e.format ? Me(H, e.format, {
         locale: e.locale,
         additionalOptions: p.value
-      }) : G.toString();
+      }) : H.toString();
     }
-    function ie(G) {
-      return e.format ? nt(G, e.format, {
+    function ie(H) {
+      return e.format ? nt(H, e.format, {
         locale: e.locale,
         additionalOptions: p.value
-      }) : +G;
+      }) : +H;
     }
-    function D(G) {
+    function D(H) {
       if (e.allowKeyboardArrowKeyInput) {
-        const C = (S.value || 0) + (G ? -1 : 1) / T.value;
+        const C = (S.value || 0) + (H ? -1 : 1) / T.value;
         A(C, !1);
       }
     }
     const K = I(!1);
     function ce() {
-      var G;
-      K.value = !0, (G = g.value) == null || G.focus();
+      var H;
+      K.value = !0, (H = g.value) == null || H.focus();
     }
     return t({
       focus: () => {
-        var G;
-        return (G = g.value) == null ? void 0 : G.focus();
+        var H;
+        return (H = g.value) == null ? void 0 : H.focus();
       },
       blur: () => {
-        var G;
-        return (G = g.value) == null ? void 0 : G.blur();
+        var H;
+        return (H = g.value) == null ? void 0 : H.blur();
       },
       select: () => ce()
-    }), (G, C) => {
-      const H = Ce("icon");
+    }), (H, C) => {
+      const G = Ce("icon");
       return u(), L(Re, {
-        "show-required-asterisk": G.required,
-        errors: G.errors
+        "show-required-asterisk": H.required,
+        errors: H.errors
       }, we({
         default: U(() => [
           b("div", {
@@ -2322,16 +2322,16 @@ const Fa = {
             ref: d,
             class: "cl-relative cl-w-full"
           }, [
-            (u(), h("input", Q(G.$attrs, {
+            (u(), h("input", Q(H.$attrs, {
               ref_key: "inputRef",
               ref: g,
               key: i.value,
               value: j.value,
               class: "[&:hover:not(:focus-within)]:cl-border-grey-3 cl-bg-white cl-border cl-border-grey-2 cl-outline-none cl-p-1 cl-px-2 cl-rounded-lg cl-transition-colors disabled:cl-bg-grey-1 disabled:cl-border-grey-2 focus-within:cl-border-link-light",
               type: "text",
-              inputmode: G.format === v(te).DECIMAL && G.precision === 0 ? "numeric" : "decimal",
-              disabled: G.disabled,
-              placeholder: G.placeholder ?? void 0,
+              inputmode: H.format === v(te).DECIMAL && H.precision === 0 ? "numeric" : "decimal",
+              disabled: H.disabled,
+              placeholder: H.placeholder ?? void 0,
               onInput: C[0] || (C[0] = (Z) => j.value = Z.target.value),
               onKeydown: [
                 C[1] || (C[1] = ne(X((Z) => {
@@ -2344,44 +2344,44 @@ const Fa = {
             oe(b("div", tn, [
               b("button", {
                 class: "cl-bg-opacity-30 cl-bg-secondary-light cl-border cl-border-grey-3 cl-px-1 cl-rounded hover:cl-bg-opacity-20",
-                disabled: G.disabled,
+                disabled: H.disabled,
                 onClick: C[4] || (C[4] = (Z) => D(!1)),
                 onKeydown: [
                   C[5] || (C[5] = ne(X((Z) => D(!0), ["stop", "prevent"]), ["down"])),
                   C[6] || (C[6] = ne(X((Z) => D(!1), ["stop", "prevent"]), ["up"]))
                 ]
               }, [
-                q(H, { icon: "ph:caret-up-bold" })
+                q(G, { icon: "ph:caret-up-bold" })
               ], 40, on),
               b("button", {
                 class: "cl-bg-opacity-30 cl-bg-secondary-light cl-border cl-border-grey-3 cl-px-1 cl-rounded hover:cl-bg-opacity-20",
-                disabled: G.disabled,
+                disabled: H.disabled,
                 onClick: C[7] || (C[7] = (Z) => D(!0)),
                 onKeydown: [
                   C[8] || (C[8] = ne(X((Z) => D(!0), ["stop", "prevent"]), ["down"])),
                   C[9] || (C[9] = ne(X((Z) => D(!1), ["stop", "prevent"]), ["up"]))
                 ]
               }, [
-                q(H, { icon: "ph:caret-down-bold" })
+                q(G, { icon: "ph:caret-down-bold" })
               ], 40, an)
             ], 512), [
-              [fe, c.value && !G.disabled]
+              [fe, c.value && !H.disabled]
             ])
           ], 512)
         ]),
         _: 2
       }, [
-        G.$slots.default ? {
+        H.$slots.default ? {
           name: "label",
           fn: U(() => [
-            O(G.$slots, "default")
+            O(H.$slots, "default")
           ]),
           key: "0"
         } : void 0,
-        G.$slots["help-text"] ? {
+        H.$slots["help-text"] ? {
           name: "helpText",
           fn: U(() => [
-            O(G.$slots, "help-text")
+            O(H.$slots, "help-text")
           ]),
           key: "1"
         } : void 0
@@ -3105,7 +3105,7 @@ const On = { class: "cl-gap-1 cl-grid cl-grid-cols-2" }, En = ["onClick"], An =
       } : void 0
     ]), 1032, ["errors", "show-required-asterisk"]));
   }
-}), Un = { class: "cl-gap-1 cl-grid cl-grid-cols-[auto_1fr_auto_auto] cl-pt-0.5 cl-w-full" }, zn = ["disabled"], Bn = { class: "cl-max-w-max" }, Fn = { class: "cl-flex cl-flex-col cl-gap-1 cl-w-full" }, Ln = ["min", "disabled", "required", "step", "max"], Pn = { class: "cl-bg-white cl-border cl-border-grey-2 cl-leading-none cl-rounded-full cl-text-center cl-text-xs" }, jn = ["disabled"], Gn = ["disabled", "title"], Hn = /* @__PURE__ */ P({
+}), Un = { class: "cl-gap-1 cl-grid cl-grid-cols-[auto_1fr_auto_auto] cl-pt-0.5 cl-w-full" }, zn = ["disabled"], Bn = { class: "cl-max-w-max" }, Fn = { class: "cl-flex cl-flex-col cl-gap-1 cl-w-full" }, Ln = ["min", "disabled", "required", "step", "max"], Pn = { class: "cl-bg-white cl-border cl-border-grey-2 cl-leading-none cl-rounded-full cl-text-center cl-text-xs" }, jn = ["disabled"], Hn = ["disabled", "title"], Gn = /* @__PURE__ */ P({
   inheritAttrs: !1,
   __name: "cl-ui-input-range",
   props: /* @__PURE__ */ me({
@@ -3206,7 +3206,7 @@ const On = { class: "cl-gap-1 cl-grid cl-grid-cols-2" }, En = ["onClick"], An =
               onClick: p[4] || (p[4] = (y) => g.value = !g.value)
             }, [
               q(w, { icon: "ph:arrows-left-right-thin" })
-            ], 8, Gn)
+            ], 8, Hn)
           ])
         ]),
         _: 2
@@ -3228,7 +3228,7 @@ const On = { class: "cl-gap-1 cl-grid cl-grid-cols-2" }, En = ["onClick"], An =
       ]), 1032, ["errors", "show-required-asterisk"]);
     };
   }
-}), Zn = /* @__PURE__ */ $e(Hn, [["__scopeId", "data-v-d2902c00"]]), gt = [
+}), Zn = /* @__PURE__ */ $e(Gn, [["__scopeId", "data-v-d2902c00"]]), gt = [
   "date",
   "datetime",
   "time"
@@ -3485,10 +3485,10 @@ const On = { class: "cl-gap-1 cl-grid cl-grid-cols-2" }, En = ["onClick"], An =
     function w(D) {
       s.value ? K(D) : (l.canClear && e.value === D ? e.value = null : e.value = D, p());
       function K(ce) {
-        var G;
+        var H;
         if (Array.isArray(e.value)) {
           const C = e.value.indexOf(ce);
-          C > -1 ? (e.value.length > 1 || l.canClear) && e.value.splice(C, 1) : (G = e.value) == null || G.push(ce);
+          C > -1 ? (e.value.length > 1 || l.canClear) && e.value.splice(C, 1) : (H = e.value) == null || H.push(ce);
         }
       }
     }
@@ -3535,8 +3535,8 @@ const On = { class: "cl-gap-1 cl-grid cl-grid-cols-2" }, En = ["onClick"], An =
       if (Array.isArray(e.value))
         return e.value.some((ce) => K(ce, D)) ?? !1;
       return K(e.value, D);
-      function K(ce, G) {
-        return E(ce) && E(G) ? ce.id === G.id : ce === G;
+      function K(ce, H) {
+        return E(ce) && E(H) ? ce.id === H.id : ce === H;
       }
     }
     function Y(D) {
@@ -3554,7 +3554,7 @@ const On = { class: "cl-gap-1 cl-grid cl-grid-cols-2" }, En = ["onClick"], An =
         (D = g.value) == null || D.focus();
       }
     }), (D, K) => {
-      const ce = Ce("icon"), G = Ce("cl-ui-select-option");
+      const ce = Ce("icon"), H = Ce("cl-ui-select-option");
       return u(), h("div", {
         ref_key: "outsideRef",
         ref: a,
@@ -3647,13 +3647,13 @@ const On = { class: "cl-gap-1 cl-grid cl-grid-cols-2" }, En = ["onClick"], An =
                   K[6] || (K[6] = ne(X((C) => w(l.list[n.value]), ["stop", "prevent"]), ["enter"]))
                 ]
               }), [
-                (u(!0), h(W, null, x(D.list, (C, H) => (u(), h("div", { key: H }, [
-                  O(D.$slots, "default", Q({ ref_for: !0 }, { option: C, index: H, select: w, highlightIndex: n.value, isSelected: A }), () => [
-                    (u(), L(G, {
-                      id: v(c) + "-option-" + (E(C) ? C.id : H),
-                      key: H,
+                (u(!0), h(W, null, x(D.list, (C, G) => (u(), h("div", { key: G }, [
+                  O(D.$slots, "default", Q({ ref_for: !0 }, { option: C, index: G, select: w, highlightIndex: n.value, isSelected: A }), () => [
+                    (u(), L(H, {
+                      id: v(c) + "-option-" + (E(C) ? C.id : G),
+                      key: G,
                       disabled: D.disabled,
-                      "is-highlighted": n.value === H,
+                      "is-highlighted": n.value === G,
                       "is-selected": A(C),
                       onSelect: (Z) => w(C)
                     }, {
@@ -3799,7 +3799,7 @@ const is = {
     "datetime"
   ],
   key: "before"
-}, Gl = [
+}, Hl = [
   us,
   {
     method: "notcontains",
@@ -3899,7 +3899,7 @@ const is = {
   setup(o, { emit: t }) {
     const l = o, e = t, { t: n } = ue(), a = k(() => {
       let c = [];
-      return l.column.type !== "slot" ? c = Gl.filter((p) => p.allowedTypes.includes(l.column.type)) : typeof l.column.slotType < "u" && typeof l.column.field < "u" && (c = Gl.filter((p) => p.allowedTypes.includes(l.column.slotType))), l.column.type === "date" || l.column.type === "datetime" || l.column.slotType === "date" || l.column.slotType === "datetime" ? c.forEach((p) => {
+      return l.column.type !== "slot" ? c = Hl.filter((p) => p.allowedTypes.includes(l.column.type)) : typeof l.column.slotType < "u" && typeof l.column.field < "u" && (c = Hl.filter((p) => p.allowedTypes.includes(l.column.slotType))), l.column.type === "date" || l.column.type === "datetime" || l.column.slotType === "date" || l.column.slotType === "datetime" ? c.forEach((p) => {
         p.description = n(`grid.${p.key}`);
       }) : c.forEach((p) => {
         p.description = n(`grid.${p.method}`);
@@ -3974,7 +3974,7 @@ const is = {
   id: -1,
   name: "",
   value: ""
-}, Hl = k(() => [
+}, Gl = k(() => [
   yt,
   {
     id: 0,
@@ -4018,7 +4018,7 @@ const is = {
     const d = k({
       get: () => l.filter,
       set: (R) => e("update:filter", R)
-    }), g = k(() => l.column.type === "date" || l.column.type === "datetime" || l.column.type === "slot" && (l.column.slotType === "date" || l.column.slotType === "datetime")), r = k(() => l.column.type === "dateRange" || l.column.type === "slot" && l.column.slotType === "dateRange"), s = k(() => l.column.type === "list" || l.column.type === "slot" && l.column.slotType === "list"), c = k(() => s.value && l.column.listType === "number"), p = k(() => l.column.type === "string" || l.column.type === "slot" && l.column.slotType === "string"), w = k(() => l.column.format === te.INTEGER ? te.DECIMAL : l.column.format ?? te.DECIMAL), y = k(() => Hl.value.find((R) => R.value === Y.value.toString()) ?? null), f = k(() => {
+    }), g = k(() => l.column.type === "date" || l.column.type === "datetime" || l.column.type === "slot" && (l.column.slotType === "date" || l.column.slotType === "datetime")), r = k(() => l.column.type === "dateRange" || l.column.type === "slot" && l.column.slotType === "dateRange"), s = k(() => l.column.type === "list" || l.column.type === "slot" && l.column.slotType === "list"), c = k(() => s.value && l.column.listType === "number"), p = k(() => l.column.type === "string" || l.column.type === "slot" && l.column.slotType === "string"), w = k(() => l.column.format === te.INTEGER ? te.DECIMAL : l.column.format ?? te.DECIMAL), y = k(() => Gl.value.find((R) => R.value === Y.value.toString()) ?? null), f = k(() => {
       var R;
       return [
         yt,
@@ -4177,7 +4177,7 @@ const is = {
         S.value = m;
       }
     }
-    function G(R, $) {
+    function H(R, $) {
       let m = (R == null ? void 0 : R.value) ?? $ ?? 0;
       if (typeof m == "string") {
         const M = l.column.format === te.INTEGER, F = (M ? te.DECIMAL : l.column.format) ?? te.DECIMAL;
@@ -4205,12 +4205,12 @@ const is = {
         return;
       m === !1 && (S.value = $);
     }
-    const H = I("");
+    const G = I("");
     function Z(R) {
-      N.value = !1, R === "Enter" && (N.value = !0, ce(null, H.value));
+      N.value = !1, R === "Enter" && (N.value = !0, ce(null, G.value));
     }
     le(() => Y.value, () => {
-      H.value = Y.value;
+      G.value = Y.value;
     }, {
       immediate: !0
     });
@@ -4232,7 +4232,7 @@ const is = {
       R.column.type === "boolean" || R.column.type === "slot" && R.column.slotType === "boolean" ? (u(), L(wl, {
         key: 0,
         id: `${v(qe)}-${R.column.name}`,
-        list: v(Hl),
+        list: v(Gl),
         disabled: R.loading,
         "is-grid-filter": !0,
         class: "!cl-min-h-0 !cl-rounded-lg cl-bg-white cl-font-normal",
@@ -4285,7 +4285,7 @@ const is = {
           readonly: R.loading,
           "show-arrows": !1,
           "allow-empty": !0,
-          "onUpdate:modelValue": $[3] || ($[3] = (m) => m !== null ? G(null, m) : ce(null, ""))
+          "onUpdate:modelValue": $[3] || ($[3] = (m) => m !== null ? H(null, m) : ce(null, ""))
         }, {
           default: U(() => $[9] || ($[9] = [
             b("span", null, null, -1)
@@ -4295,9 +4295,9 @@ const is = {
       ])) : R.column.type === "string" || R.column.type === "slot" && R.column.slotType === "string" ? (u(), h("div", bs, [
         q(ze, {
           id: `${v(qe)}-${R.column.name}`,
-          modelValue: H.value,
+          modelValue: G.value,
           "onUpdate:modelValue": [
-            $[4] || ($[4] = (m) => H.value = m),
+            $[4] || ($[4] = (m) => G.value = m),
             $[5] || ($[5] = (m) => ce(null, m))
           ],
           class: "cl-border-none cl-font-normal cl-h-[2rem] cl-px-3 cl-text-xs lg:cl-text-base readonly-filter",
@@ -4317,7 +4317,7 @@ const is = {
         class: "!cl-max-h-52 !cl-min-h-0 !cl-rounded-lg cl-bg-white cl-font-normal",
         disabled: R.loading,
         "is-grid-filter": !0,
-        "onUpdate:modelValue": $[6] || ($[6] = (m) => c.value ? G(null, m == null ? void 0 : m.value) : ce(null, m == null ? void 0 : m.value))
+        "onUpdate:modelValue": $[6] || ($[6] = (m) => c.value ? H(null, m == null ? void 0 : m.value) : ce(null, m == null ? void 0 : m.value))
       }, {
         default: U(({ select: m, option: M, index: F, highlightIndex: pe, isSelected: de }) => [
           q(kl, {
@@ -4721,7 +4721,7 @@ const is = {
       ]))
     ], 64));
   }
-}), Gs = { class: "cl-relative cl-w-full grid-wrapper lg:cl-min-h-fit" }, Hs = {
+}), Hs = { class: "cl-relative cl-w-full grid-wrapper lg:cl-min-h-fit" }, Gs = {
   key: 0,
   class: "cl-absolute cl-flex cl-items-center cl-justify-center cl-min-h-full cl-p-28 cl-pt-0 cl-w-full"
 }, Zs = { class: "cl-overflow-x-auto cl-overscroll-x-none cl-pt-1" }, Ws = /* @__PURE__ */ P({
@@ -4736,10 +4736,10 @@ const is = {
     headerDisplayTimezone: { default: null },
     dateFormatLocale: { default: null }
   },
-  emits: ["update:columns", "update:request", "data-request", "row-edit", "row-edit-cancelled", "edit-start", "edit-end", "row-select", "view-manager-visible"],
+  emits: ["update:columns", "update:request", "data-request", "row-edit", "row-edit-cancelled", "edit-start", "edit-end", "row-select", "view-manager-visible", "clear-filters-clicked"],
   setup(o, { expose: t, emit: l }) {
-    var G;
-    const e = o, n = l, { lg: a } = Gt(Ht), i = Object.keys(Mt()).some((C) => C.endsWith("BulkEdit")), d = Ze();
+    var H;
+    const e = o, n = l, { lg: a } = Ht(Gt), i = Object.keys(Mt()).some((C) => C.endsWith("BulkEdit")), d = Ze();
     vl("cl-ui-grid-id", d.id);
     const g = k(() => e.headerDisplayTimezone ?? e.timeZone), r = k(() => e.dateFormatLocale);
     vl(ul, r);
@@ -4748,9 +4748,9 @@ const is = {
       set: (C) => n("update:columns", C)
     }), c = k(() => s.value.filter((C) => C.visible ?? !0)), p = I({});
     function w() {
-      var H;
+      var G;
       const C = {};
-      (window.innerWidth >= 1024 || (H = e.options) != null && H.hideGridMobileView) && s.value.forEach((Z) => {
+      (window.innerWidth >= 1024 || (G = e.options) != null && G.hideGridMobileView) && s.value.forEach((Z) => {
         const he = Z.width ? `${Z.width}px` : "";
         C[`${Z.name}`] = `width: ${he}; min-width: ${he};`;
       }), p.value = C;
@@ -4764,7 +4764,7 @@ const is = {
     });
     function T() {
       const C = ke(f.value);
-      C.pageNumber = 1, C.filters = [], ie.value = "", f.value = C;
+      C.pageNumber = 1, C.filters = [], ie.value = "", f.value = C, n("clear-filters-clicked");
     }
     const N = Zt(() => n("data-request"), 400);
     le(f, () => {
@@ -4796,30 +4796,30 @@ const is = {
     })), Y = k({
       get() {
         const C = ke(f.value);
-        return C.filters = C.filters.filter((H) => H.filterMethod !== "andcontains" && H.filterOperation !== ae.AND_CONTAINS), C;
+        return C.filters = C.filters.filter((G) => G.filterMethod !== "andcontains" && G.filterOperation !== ae.AND_CONTAINS), C;
       },
       set(C) {
-        const H = [
+        const G = [
           ...C.filters,
           ...f.value.filters.filter((Z) => Z.filterMethod === "andcontains" || Z.filterOperation === ae.AND_CONTAINS)
         ];
         f.value = {
           ...C,
-          filters: H
+          filters: G
         };
       }
-    }), ie = I(((G = e.request.filters.find((C) => C.filterMethod === "andcontains" || C.filterOperation === ae.AND_CONTAINS)) == null ? void 0 : G.filterValue) ?? ""), D = k(() => e.columns.filter((C) => (C.type === "string" || C.type === "slot" && C.slotType === "string") && C.searchable)), K = I(!0);
+    }), ie = I(((H = e.request.filters.find((C) => C.filterMethod === "andcontains" || C.filterOperation === ae.AND_CONTAINS)) == null ? void 0 : H.filterValue) ?? ""), D = k(() => e.columns.filter((C) => (C.type === "string" || C.type === "slot" && C.slotType === "string") && C.searchable)), K = I(!0);
     le(() => e.loading, () => {
       K.value = !1;
     }, {
       once: !0
-    }), He(() => {
+    }), Ge(() => {
       window.addEventListener("resize", Je(w, 50)), w();
     }), Tl(() => window.removeEventListener("resize", Je(w, 50))), le(() => e.data, () => {
       C();
       function C() {
-        var H;
-        ((H = e.data) == null ? void 0 : H.results.length) === 0 && f.value.pageNumber > 1 && (f.value.pageNumber = e.data.totalRecords > 0 ? Math.ceil(e.data.totalRecords / f.value.pageSize) : 1);
+        var G;
+        ((G = e.data) == null ? void 0 : G.results.length) === 0 && f.value.pageNumber > 1 && (f.value.pageNumber = e.data.totalRecords > 0 ? Math.ceil(e.data.totalRecords / f.value.pageSize) : 1);
       }
     });
     const ce = I();
@@ -4828,7 +4828,7 @@ const is = {
         var C;
         return (C = ce.value) == null ? void 0 : C.focusMegaSearch();
       }
-    }), (C, H) => (u(), h("div", Gs, [
+    }), (C, G) => (u(), h("div", Hs, [
       K.value && D.value.length > 0 ? (u(), L(v(Dl), {
         key: 0,
         class: "cl-h-[39px] cl-mb-2"
@@ -4837,9 +4837,9 @@ const is = {
         ref_key: "gridSearchRef",
         ref: ce,
         "search-value": ie.value,
-        "onUpdate:searchValue": H[0] || (H[0] = (Z) => ie.value = Z),
+        "onUpdate:searchValue": G[0] || (G[0] = (Z) => ie.value = Z),
         request: f.value,
-        "onUpdate:request": H[1] || (H[1] = (Z) => f.value = Z),
+        "onUpdate:request": G[1] || (G[1] = (Z) => f.value = Z),
         columns: D.value
       }, {
         search: U((Z) => [
@@ -4849,7 +4849,7 @@ const is = {
       }, 8, ["search-value", "request", "columns"])) : B("", !0),
       q(Ie, { name: "fade" }, {
         default: U(() => [
-          C.loading && K.value === !1 ? (u(), h("div", Hs, [
+          C.loading && K.value === !1 ? (u(), h("div", Gs, [
             q(_e, { class: "after:!cl-h-20 after:!cl-w-20 cl-h-20 cl-w-20" })
           ])) : B("", !0)
         ]),
@@ -4857,9 +4857,9 @@ const is = {
       }),
       q(ka, {
         "edit-mode": S.value,
-        "onUpdate:editMode": H[4] || (H[4] = (Z) => S.value = Z),
+        "onUpdate:editMode": G[4] || (G[4] = (Z) => S.value = Z),
         "filter-panel-open": _.value,
-        "onUpdate:filterPanelOpen": H[5] || (H[5] = (Z) => _.value = Z),
+        "onUpdate:filterPanelOpen": G[5] || (G[5] = (Z) => _.value = Z),
         "can-bulk-edit": v(i) && (C.options.hideGridMobileView || v(a)),
         columns: C.columns,
         options: A.value,
@@ -4874,9 +4874,9 @@ const is = {
         "view-manager": U(() => [
           q(js, {
             columns: s.value,
-            "onUpdate:columns": H[2] || (H[2] = (Z) => s.value = Z),
+            "onUpdate:columns": G[2] || (G[2] = (Z) => s.value = Z),
             loading: C.loading,
-            onViewManagerVisible: H[3] || (H[3] = (Z) => n("view-manager-visible", Z))
+            onViewManagerVisible: G[3] || (G[3] = (Z) => n("view-manager-visible", Z))
           }, null, 8, ["columns", "loading"])
         ]),
         _: 3
@@ -4900,9 +4900,9 @@ const is = {
           ], 2),
           q(qs, {
             request: Y.value,
-            "onUpdate:request": H[6] || (H[6] = (Z) => Y.value = Z),
+            "onUpdate:request": G[6] || (G[6] = (Z) => Y.value = Z),
             "filter-panel-open": _.value,
-            "onUpdate:filterPanelOpen": H[7] || (H[7] = (Z) => _.value = Z),
+            "onUpdate:filterPanelOpen": G[7] || (G[7] = (Z) => _.value = Z),
             columns: c.value,
             options: A.value,
             loading: C.loading,
@@ -4910,7 +4910,7 @@ const is = {
             "bulk-edit-mode": v(i) && S.value && (C.options.hideGridMobileView || v(a)),
             "time-zone": C.timeZone,
             "header-display-timezone": g.value,
-            onPerformDataRequest: H[8] || (H[8] = (Z) => n("data-request"))
+            onPerformDataRequest: G[8] || (G[8] = (Z) => n("data-request"))
           }, we({ _: 2 }, [
             x(C.$slots, (Z, he) => ({
               name: he,
@@ -4930,9 +4930,9 @@ const is = {
             options: A.value,
             "edit-mode": j.value,
             onClearFilters: T,
-            onRowEdit: H[9] || (H[9] = (Z) => C.$emit("row-edit", Z)),
-            onRowEditCancelled: H[10] || (H[10] = (Z) => C.$emit("row-edit-cancelled", Z)),
-            onRowSelect: H[11] || (H[11] = (Z) => C.$emit("row-select", Z))
+            onRowEdit: G[9] || (G[9] = (Z) => C.$emit("row-edit", Z)),
+            onRowEditCancelled: G[10] || (G[10] = (Z) => C.$emit("row-edit-cancelled", Z)),
+            onRowSelect: G[11] || (G[11] = (Z) => C.$emit("row-select", Z))
           }, we({ _: 2 }, [
             x(C.$slots, (Z, he) => ({
               name: he,
@@ -4951,7 +4951,7 @@ const is = {
         "show-unsaved-changes-warning": j.value && A.value.disableUnsavedChangesWarning === !1,
         data: C.data,
         options: A.value,
-        "onUpdate:request": H[12] || (H[12] = (Z) => {
+        "onUpdate:request": G[12] || (G[12] = (Z) => {
           j.value = !1, f.value = Z;
         })
       }, null, 8, ["request", "loading", "initial-load", "show-unsaved-changes-warning", "data", "options"])) : B("", !0)
@@ -5991,7 +5991,7 @@ function Ql(o, t) {
   const l = o.target;
   return Lr(t) ? l.valueAsNumber : Ke(t) ? l.checked : l.value;
 }
-const jr = { class: "cl-flex cl-justify-between" }, Gr = { class: "cl-w-full" }, Hr = {
+const jr = { class: "cl-flex cl-justify-between" }, Hr = { class: "cl-w-full" }, Gr = {
   key: 0,
   class: "cl-block cl-left-auto cl-relative cl-text-danger-default"
 }, Zr = {
@@ -6097,7 +6097,7 @@ const jr = { class: "cl-flex cl-justify-between" }, Gr = { class: "cl-w-full" },
       let m = "";
       return e.inputType === "color" && p.value && (e.disabled ? m = "background: #999999" : m = `background: ${p.value};`), m;
     }
-    function G(m) {
+    function H(m) {
       Ke(e.inputType) ? (m.preventDefault(), n("click", m)) : e.inputType === "checkbox" && n("click", m);
     }
     function C(m) {
@@ -6109,7 +6109,7 @@ const jr = { class: "cl-flex cl-justify-between" }, Gr = { class: "cl-w-full" },
         n("input", M, a.value.valueAsNumber), n("change", m, a.value.valueAsNumber);
       }
     }
-    function H(m) {
+    function G(m) {
       if (a.value) {
         a.value.stepDown(), a.value.focus(), D(a.value.valueAsNumber, !1);
         const M = {
@@ -6139,7 +6139,7 @@ const jr = { class: "cl-flex cl-justify-between" }, Gr = { class: "cl-w-full" },
     async function $() {
       await he(), Oe();
     }
-    return He(() => {
+    return Ge(() => {
       e.validateImmediately && D(e.modelValue, !0);
     }), le(() => e.isRequired, () => D(e.modelValue, !0)), le(() => e.externalErrors, async () => {
       await K(p.value), n("update:model-value", p.value);
@@ -6166,12 +6166,12 @@ const jr = { class: "cl-flex cl-justify-between" }, Gr = { class: "cl-w-full" },
         onMouseleave: M[14] || (M[14] = (F) => Z(!1))
       }, [
         b("div", jr, [
-          b("div", Gr, [
+          b("div", Hr, [
             oe(b("label", { class: "cl-block cl-mb-1 cl-text-grey-4 cl-text-xs cl-tracking-widest" }, z(m.label), 513), [
               [fe, m.showLabel && m.label !== ""]
             ])
           ]),
-          r.value ? (u(), h("label", Hr, " * ")) : m.isRequired && m.requiredText.length ? (u(), h("label", Zr, z(m.requiredText), 1)) : B("", !0)
+          r.value ? (u(), h("label", Gr, " * ")) : m.isRequired && m.requiredText.length ? (u(), h("label", Zr, z(m.requiredText), 1)) : B("", !0)
         ]),
         m.inputType !== "range" && m.inputType !== "currency" && !v(Kl)(m.inputType) ? (u(), h("div", Wr, [
           oe(b("input", Q({
@@ -6200,7 +6200,7 @@ const jr = { class: "cl-flex cl-justify-between" }, Gr = { class: "cl-w-full" },
             placeholder: s.value,
             name: m.group,
             autocomplete: m.autocomplete,
-            onClick: M[1] || (M[1] = (F) => G(F)),
+            onClick: M[1] || (M[1] = (F) => H(F)),
             onFocus: M[2] || (M[2] = (F) => n("focus")),
             onBlur: X($, ["self"]),
             onMousewheelPassive: qe,
@@ -6227,7 +6227,7 @@ const jr = { class: "cl-flex cl-justify-between" }, Gr = { class: "cl-w-full" },
                 q(v(ee), {
                   icon: "ph:caret-down-bold",
                   class: "cl-absolute cl-bg-link-default cl-bottom-2 cl-right-1 cl-rounded-full cl-text-sm cl-text-white hover:cl-bg-link-light hover:cl-cursor-pointer",
-                  onClick: H,
+                  onClick: G,
                   onMousedown: M[5] || (M[5] = X(() => {
                   }, ["prevent"]))
                 })
@@ -6717,12 +6717,13 @@ function Pi(o, t) {
     O(o.$slots, "default")
   ]);
 }
-const ji = /* @__PURE__ */ $e(Fi, [["render", Pi]]), Gi = /* @__PURE__ */ P({
+const ji = /* @__PURE__ */ $e(Fi, [["render", Pi]]), Hi = /* @__PURE__ */ P({
   __name: "cl-ui-tab",
   props: {
     colour: { default: "default" },
     layout: { default: "horizontal" },
-    overflowHidden: { type: Boolean, default: !0 }
+    overflowHidden: { type: Boolean, default: !0 },
+    stickyHeader: { type: Boolean, default: !1 }
   },
   emits: ["tab-opened"],
   setup(o, { expose: t, emit: l }) {
@@ -6743,20 +6744,21 @@ const ji = /* @__PURE__ */ $e(Fi, [["render", Pi]]), Gi = /* @__PURE__ */ P({
     function c(p) {
       typeof p == "number" && s(p);
     }
-    return He(() => {
+    return Ge(() => {
       s(a.value[0].id);
     }), t({
       setTab: c
     }), (p, w) => (u(), h("div", {
       class: V(["cl-w-full", {
-        "cl-flex cl-flex-row cl-gap-4 xl:cl-gap-6 cl-h-full": g.value === !1
+        "cl-flex cl-flex-row cl-gap-4 xl:cl-gap-6": g.value === !1
       }])
     }, [
       b("div", {
         class: V(["cl-flex cl-flex-nowrap", [
           g.value === !1 ? "cl-items-start" : "cl-items-center cl-w-full",
           {
-            "cl-border-r cl-h-full cl-border-grey-1": g.value === !1
+            "cl-border-r cl-h-full cl-border-grey-1": g.value === !1,
+            "cl-bg-white cl-sticky cl-top-0 cl-z-[21]": p.stickyHeader
           }
         ]])
       }, [
@@ -6782,7 +6784,7 @@ const ji = /* @__PURE__ */ $e(Fi, [["render", Pi]]), Gi = /* @__PURE__ */ P({
       ])
     ], 2));
   }
-}), Hi = ["inert"], Zi = /* @__PURE__ */ P({
+}), Gi = ["inert"], Zi = /* @__PURE__ */ P({
   __name: "cl-ui-tab-header",
   props: {
     open: { type: Boolean },
@@ -6811,7 +6813,7 @@ const ji = /* @__PURE__ */ $e(Fi, [["render", Pi]]), Gi = /* @__PURE__ */ P({
       O(e.$slots, "default", {}, () => [
         re(z(e.title), 1)
       ])
-    ], 10, Hi));
+    ], 10, Gi));
   }
 }), Wi = { key: 0 }, Ki = { class: "cl-font-bold cl-mb-4" }, Qi = /* @__PURE__ */ P({
   __name: "cl-ui-tab-content",
@@ -6876,7 +6878,7 @@ const ji = /* @__PURE__ */ $e(Fi, [["render", Pi]]), Gi = /* @__PURE__ */ P({
       "dragleave",
       "drop"
     ], s = I(!1);
-    He(() => {
+    Ge(() => {
       r.forEach((y) => {
         document.body.addEventListener(y, (f) => f.preventDefault());
       });
@@ -7352,7 +7354,7 @@ const Ou = { class: "cl-flex cl-flex-nowrap cl-flex-row cl-w-full" }, Eu = { cla
     ], T, {
       flush: "post",
       deep: !0
-    }), He(T), (E, S) => {
+    }), Ge(T), (E, S) => {
       const j = Ce("icon"), _ = Ce("cl-ui-tree-list-subtree", !0);
       return u(), h("div", Ou, [
         b("div", Eu, [
@@ -7542,7 +7544,7 @@ const Ou = { class: "cl-flex cl-flex-nowrap cl-flex-row cl-w-full" }, Eu = { cla
   clUiRadioGroup: nu,
   clUiSelect: wl,
   clUiSelectOption: kl,
-  clUiTab: Gi,
+  clUiTab: Hi,
   clUiTabContent: Qi,
   clUiTabHeader: Zi,
   clUiToggle: lu,
@@ -7638,7 +7640,7 @@ export {
   nu as clUiRadioGroup,
   wl as clUiSelect,
   kl as clUiSelectOption,
-  Gi as clUiTab,
+  Hi as clUiTab,
   Qi as clUiTabContent,
   Zi as clUiTabHeader,
   lu as clUiToggle,