@citruslime/ui 4.0.2-beta.12 → 4.0.2-beta.13

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

@@ -367,7 +367,7 @@ const _hoisted_4$n = {
   key: 1,
   class: "cl:text-danger-dark"
 };
-const _hoisted_5$i = {
+const _hoisted_5$h = {
   key: 0,
   class: "cl:pt-1 cl:w-full"
 };
@@ -402,7 +402,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "default")
           ])
         ], 2),
-        hasErrors.value ? (openBlock(), createElementBlock("div", _hoisted_5$i, [
+        hasErrors.value ? (openBlock(), createElementBlock("div", _hoisted_5$h, [
           createElementVNode("div", _hoisted_6$b, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.errors, (error, index2) => {
               return openBlock(), createElementBlock("div", {
@@ -820,7 +820,7 @@ const _hoisted_2$E = {
 };
 const _hoisted_3$s = { class: "cl:bg-white cl:flex cl:p-2 cl:pb-1 cl:sticky cl:top-0 cl:w-full cl:z-10" };
 const _hoisted_4$m = { class: "cl:inline-block cl:w-full" };
-const _hoisted_5$h = { key: 6 };
+const _hoisted_5$g = { key: 6 };
 const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-combo-box-search",
   props: {
@@ -1008,7 +1008,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
           onCreateObject: createObject,
           onOptionHighlighted: updateSelectedObjectIndex
         }, null, 8, ["text", "selected-index"])) : createCommentVNode("", true),
-        _ctx.errorMessage === "" && _ctx.results !== null ? (openBlock(), createElementBlock("div", _hoisted_5$h, [
+        _ctx.errorMessage === "" && _ctx.results !== null ? (openBlock(), createElementBlock("div", _hoisted_5$g, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.results, (result, index2) => {
             return openBlock(), createBlock(_sfc_main$15, {
               key: index2,
@@ -1029,7 +1029,7 @@ const _hoisted_1$Q = { class: "cl:flex cl:rounded-lg" };
 const _hoisted_2$D = { class: "cl:inline-block cl:w-full" };
 const _hoisted_3$r = { class: "cl:pointer-events-none cl:relative cl:top-0.5" };
 const _hoisted_4$l = { 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" };
-const _hoisted_5$g = ["disabled"];
+const _hoisted_5$f = ["disabled"];
 const _hoisted_6$a = ["disabled"];
 const _hoisted_7$8 = { class: "cl:min-h-[16rem] cl:mx-4" };
 const _hoisted_8$7 = { class: "cl:p-2 cl:text-right cl:w-full" };
@@ -1288,7 +1288,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
               icon: "ph:caret-down-bold",
               class: "cl:ml-[4px] cl:mt-[9px]"
             })
-          ], 10, _hoisted_5$g)) : (openBlock(), createElementBlock("div", {
+          ], 10, _hoisted_5$f)) : (openBlock(), createElementBlock("div", {
             key: 1,
             class: normalizeClass(["cl:border cl:border-grey-2 cl:border-l-0 cl:float-right cl:rounded-l-none cl:rounded-lg cl:text-grey-3 cl:transition-colors cl:w-[27px]", {
               "cl:cursor-default cl:bg-off-white": _ctx.disabled,
@@ -1413,7 +1413,7 @@ const _hoisted_3$q = {
   class: "cl:leading-10 cl:text-sm cl:w-full"
 };
 const _hoisted_4$k = { class: "cl:float-left" };
-const _hoisted_5$f = { class: "cl:float-right" };
+const _hoisted_5$e = { class: "cl:float-right" };
 function _sfc_render$5(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$P, [
     _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2$C, [
@@ -1423,7 +1423,7 @@ function _sfc_render$5(_ctx, _cache) {
       createElementVNode("span", _hoisted_4$k, [
         renderSlot(_ctx.$slots, "left")
       ]),
-      createElementVNode("span", _hoisted_5$f, [
+      createElementVNode("span", _hoisted_5$e, [
         renderSlot(_ctx.$slots, "right")
       ])
     ])) : createCommentVNode("", true)
@@ -1432,13 +1432,13 @@ function _sfc_render$5(_ctx, _cache) {
 const clUiFooter = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$5]]);
 const gridDateFormatLocaleOverride = Symbol();
 const _sfc_main$11 = {};
-const _hoisted_1$O = { class: "cl:animate-pulse cl:bg-off-white cl:h-[33px] cl:px-20 cl:rounded-md" };
+const _hoisted_1$O = { class: "cl:h-[33px] cl:px-20 cl:rounded-md skeleton-loader-background" };
 function _sfc_render$4(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$O);
 }
 const clUiSkeletonButton = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$4]]);
 const _sfc_main$10 = {};
-const _hoisted_1$N = { class: "cl:animate-pulse cl:bg-off-white cl:h-8 cl:rounded-md" };
+const _hoisted_1$N = { class: "cl:h-8 cl:rounded-md skeleton-loader-background" };
 function _sfc_render$3(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$N);
 }
@@ -1462,7 +1462,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.words, (word) => {
             return openBlock(), createElementBlock("span", {
               key: word,
-              class: "cl:animate-pulse cl:bg-off-white cl:rounded-full cl:w-16"
+              class: "cl:rounded-full cl:w-16 skeleton-loader-background"
             }, [
               renderSlot(_ctx.$slots, "default", {}, () => [
                 _cache[0] || (_cache[0] = createTextVNode("   "))
@@ -1501,7 +1501,7 @@ const _hoisted_1$M = {
 const _hoisted_2$B = { key: 1 };
 const _hoisted_3$p = { class: "cl:flex cl:flex-wrap cl:gap-1 cl:lg:flex-nowrap cl:lg:gap-2 cl:md:justify-end cl:pb-2" };
 const _hoisted_4$j = { class: "cl:basis-full cl:col-span-2 cl:grow cl:lg:basis-0" };
-const _hoisted_5$e = {
+const _hoisted_5$d = {
   key: 2,
   class: "cl:flex-1 cl:lg:block cl:lg:flex-none"
 };
@@ -1582,7 +1582,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["disabled"])) : createCommentVNode("", true),
-          _ctx.options.hideViewManager === false ? (openBlock(), createElementBlock("div", _hoisted_5$e, [
+          _ctx.options.hideViewManager === false ? (openBlock(), createElementBlock("div", _hoisted_5$d, [
             renderSlot(_ctx.$slots, "view-manager")
           ])) : createCommentVNode("", true),
           unref(anyFilterableColumns)(_ctx.columns) || unref(anySortableColumns)(_ctx.options, _ctx.columns) ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
@@ -2595,7 +2595,7 @@ const _hoisted_1$J = ["colspan"];
 const _hoisted_2$y = ["colspan"];
 const _hoisted_3$n = { key: 2 };
 const _hoisted_4$h = ["colspan"];
-const _hoisted_5$d = { class: "cl:flex cl:flex-wrap cl:justify-center cl:text-center cl:text-sm cl:w-full" };
+const _hoisted_5$c = { class: "cl:flex cl:flex-wrap cl:justify-center cl:text-center cl:text-sm cl:w-full" };
 const _hoisted_6$9 = { key: 0 };
 const _hoisted_7$7 = {
   key: 1,
@@ -2756,11 +2756,12 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
           return openBlock(), createElementBlock("tr", { key: row }, [
             createElementVNode("td", {
               colspan: _ctx.columns.length,
-              class: normalizeClass(
+              class: normalizeClass([
+                "cl:h-7",
                 {
-                  "cl:border-t cl:border-off-white": row % 2 === 0
+                  "cl:bg-white/60 skeleton-loader-background": row % 2 === 0
                 }
-              )
+              ])
             }, "   ", 10, _hoisted_1$J)
           ]);
         }), 128)) : createCommentVNode("", true),
@@ -2825,7 +2826,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
           createElementVNode("td", {
             colspan: _ctx.columns.length
           }, [
-            createElementVNode("div", _hoisted_5$d, [
+            createElementVNode("div", _hoisted_5$c, [
               _ctx.$slots.noData && _ctx.request.filters.some((f) => f.filterValue !== "") === false ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
                 renderSlot(_ctx.$slots, "noData")
               ])) : (openBlock(), createElementBlock("strong", _hoisted_7$7, toDisplayString(unref(t2)("grid.noData")), 1)),
@@ -3085,7 +3086,7 @@ const _hoisted_1$H = {
 const _hoisted_2$w = { class: "cl:border cl:border-off-white cl:flex cl:items-center cl:lg:px-4 cl:lg:py-3 cl:mt-2 cl:p-2 cl:rounded-lg cl:w-full" };
 const _hoisted_3$l = { class: "cl:border cl:border-off-white cl:lg:px-4 cl:lg:py-3 cl:mt-2 cl:p-2 cl:rounded-lg" };
 const _hoisted_4$f = ["inert"];
-const _hoisted_5$c = { class: "cl:basis-full cl:bg-off-white cl:border cl:border-grey-1 cl:flex cl:flex-1 cl:items-center cl:justify-between cl:lg:basis-0 cl:lg:px-4 cl:lg:py-3 cl:mt-2 cl:p-2 cl:rounded-lg cl:shadow cl:text-sm" };
+const _hoisted_5$b = { class: "cl:basis-full cl:bg-off-white cl:border cl:border-grey-1 cl:flex cl:flex-1 cl:items-center cl:justify-between cl:lg:basis-0 cl:lg:px-4 cl:lg:py-3 cl:mt-2 cl:p-2 cl:rounded-lg cl:shadow cl:text-sm" };
 const _hoisted_6$8 = { class: "cl:flex cl:flex-wrap cl:gap-x-4 cl:gap-y-2 cl:items-center cl:justify-between cl:w-full" };
 const _hoisted_7$6 = { class: "cl:flex cl:flex-wrap cl:gap-x-4" };
 const _hoisted_8$5 = { class: "cl:flex cl:flex-col cl:lg:flex-row" };
@@ -3180,7 +3181,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
         }]),
         inert: _ctx.loading
       }, [
-        createElementVNode("div", _hoisted_5$c, [
+        createElementVNode("div", _hoisted_5$b, [
           createElementVNode("div", _hoisted_6$8, [
             createElementVNode("div", _hoisted_7$6, [
               createElementVNode("div", _hoisted_8$5, [
@@ -3967,7 +3968,7 @@ const _hoisted_1$E = { class: "cl:gap-1 cl:grid cl:grid-cols-[auto_1fr_auto_auto
 const _hoisted_2$t = ["disabled"];
 const _hoisted_3$k = { class: "cl:max-w-max" };
 const _hoisted_4$e = { class: "cl:flex cl:flex-col cl:gap-1 cl:w-full" };
-const _hoisted_5$b = ["min", "disabled", "required", "step", "max"];
+const _hoisted_5$a = ["min", "disabled", "required", "step", "max"];
 const _hoisted_6$7 = { class: "cl:bg-white cl:border cl:border-grey-2 cl:leading-none cl:rounded-full cl:text-center cl:text-xs" };
 const _hoisted_7$5 = ["disabled"];
 const _hoisted_8$4 = ["disabled", "title"];
@@ -4046,7 +4047,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                   required: _ctx.required,
                   step: 1 / Math.pow(10, _ctx.precision),
                   max: _ctx.max
-                }), null, 16, _hoisted_5$b), [
+                }), null, 16, _hoisted_5$a), [
                   [
                     vModelText,
                     value.value,
@@ -5153,7 +5154,7 @@ const _hoisted_4$d = {
   key: 3,
   class: "cl:w-full"
 };
-const _hoisted_5$a = {
+const _hoisted_5$9 = {
   key: 4,
   class: "cl:w-full"
 };
@@ -5549,7 +5550,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             ])),
             _: 1
           }, 8, ["id", "model-value", "format", "precision"])
-        ])) : _ctx.column.type === "string" || _ctx.column.type === "slot" && _ctx.column.slotType === "string" ? (openBlock(), createElementBlock("div", _hoisted_5$a, [
+        ])) : _ctx.column.type === "string" || _ctx.column.type === "slot" && _ctx.column.slotType === "string" ? (openBlock(), createElementBlock("div", _hoisted_5$9, [
           createVNode(_sfc_main$18, {
             id: `${unref(gridId)}-${_ctx.column.name}`,
             modelValue: internalTextInputValue.value,
@@ -5665,10 +5666,9 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$x = ["onClick"];
-const _hoisted_2$n = { key: 1 };
-const _hoisted_3$f = ["onClick"];
-const _hoisted_4$c = { class: "cl:font-normal cl:mr-1" };
-const _hoisted_5$9 = ["id"];
+const _hoisted_2$n = ["onClick"];
+const _hoisted_3$f = { class: "cl:font-normal cl:mr-1" };
+const _hoisted_4$c = ["id"];
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-grid-header",
   props: {
@@ -5835,21 +5835,21 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                 onClick: ($event) => unref(isSortable$1)(_ctx.options, column) && _ctx.loading === false ? setSort(column.field) : () => {
                 }
               }, [
-                _ctx.initialLoad ? (openBlock(), createBlock(unref(_sfc_main$$), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_2$n, [
+                createElementVNode("div", null, [
                   createTextVNode(toDisplayString(unref(t2)(column.caption)) + " ", 1),
                   withDirectives(createVNode(unref(Icon), {
                     class: "cl:inline-block",
                     icon: "ph:caret-up"
                   }, null, 512), [
-                    [vShow, isActiveSort(column, true)]
+                    [vShow, !_ctx.initialLoad && isActiveSort(column, true)]
                   ]),
                   withDirectives(createVNode(unref(Icon), {
                     class: "cl:inline-block",
                     icon: "ph:caret-down"
                   }, null, 512), [
-                    [vShow, isActiveSort(column, false)]
+                    [vShow, !_ctx.initialLoad && isActiveSort(column, false)]
                   ])
-                ]))
+                ])
               ], 10, _hoisted_1$x);
             }), 128))
           ], 2),
@@ -5893,7 +5893,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                   }]),
                   onClick: ($event) => _ctx.loading === false ? setSort(column.field) : void 0
                 }, [
-                  createElementVNode("span", _hoisted_4$c, toDisplayString(unref(t2)("grid.sortBy")), 1),
+                  createElementVNode("span", _hoisted_3$f, toDisplayString(unref(t2)("grid.sortBy")), 1),
                   isActiveSort(column, true) ? (openBlock(), createBlock(unref(Icon), {
                     key: 0,
                     class: "cl:cursor-pointer cl:inline-block",
@@ -5907,7 +5907,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                     class: "cl:cursor-pointer cl:inline-block",
                     icon: "ph:minus"
                   }))
-                ], 10, _hoisted_3$f)) : createCommentVNode("", true),
+                ], 10, _hoisted_2$n)) : createCommentVNode("", true),
                 createVNode(_sfc_main$F, {
                   class: "cl:col-span-4 cl:min-w-[100px]",
                   loading: _ctx.loading,
@@ -5940,7 +5940,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                   class: normalizeClass(["cl:-right-1 cl:absolute cl:cursor-ew-resize cl:h-[34px] cl:top-[calc(50%-17px)] cl:w-2 cl:z-10", {
                     "cl:right-0 cl:w-1": columnIndex === visibleColumns.value.length - 1
                   }])
-                }, null, 10, _hoisted_5$9)) : createCommentVNode("", true)
+                }, null, 10, _hoisted_4$c)) : createCommentVNode("", true)
               ], 2);
             }), 128))
           ], 2)
@@ -5965,7 +5965,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-grid-search",
   props: /* @__PURE__ */ mergeModels({
     columns: {},
-    request: {}
+    request: {},
+    loading: { type: Boolean }
   }, {
     "searchValue": { required: true },
     "searchValueModifiers": {}
@@ -6030,6 +6031,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
               ],
               class: "cl:box-border cl:font-light cl:p-2 cl:pr-9 cl:text-sm",
               type: "search",
+              inert: _ctx.loading,
               placeholder: _ctx.columns.length > 4 ? unref(t2)("grid.search") : unref(t2)("grid.searchSpecific", { columns: _ctx.columns.map((c) => unref(t2)(c.caption)).join(", ") }),
               onKeypress: _cache[2] || (_cache[2] = withKeys(($event) => performSearch(searchValue.value), ["enter"]))
             }, {
@@ -6037,7 +6039,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                 createElementVNode("span", null, null, -1)
               ])),
               _: 1
-            }, 8, ["modelValue", "placeholder"])
+            }, 8, ["modelValue", "inert", "placeholder"])
           ]),
           searchValue.value ? (openBlock(), createBlock(_component_icon, {
             key: 0,
@@ -8618,13 +8620,14 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           "onUpdate:searchValue": _cache[0] || (_cache[0] = ($event) => searchValue.value = $event),
           request: currentRequest.value,
           "onUpdate:request": _cache[1] || (_cache[1] = ($event) => currentRequest.value = $event),
+          loading: _ctx.loading,
           columns: searchableColumns.value
         }, {
           search: withCtx((scope) => [
             renderSlot(_ctx.$slots, "search", normalizeProps(guardReactiveProps(scope)))
           ]),
           _: 3
-        }, 8, ["search-value", "request", "columns"])) : createCommentVNode("", true),
+        }, 8, ["search-value", "request", "loading", "columns"])) : createCommentVNode("", true),
         createVNode(Transition, { name: "fade" }, {
           default: withCtx(() => [
             _ctx.loading && isInitialLoad.value === false ? (openBlock(), createElementBlock("div", _hoisted_2$k, [