@citruslime/ui 4.1.0-beta.13 → 4.1.0-beta.15

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

@@ -50,7 +50,7 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$12 = { class: "cl:absolute cl:left-5 cl:top-5" };
 const _hoisted_2$M = { class: "cl:font-semibold cl:ml-10 cl:p-4 cl:select-none cl:text-grey-5" };
-const _hoisted_3$t = { class: "cl:overflow-hidden" };
+const _hoisted_3$u = { class: "cl:overflow-hidden" };
 const _sfc_main$1g = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -91,7 +91,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "title")
           ])
         ], 2),
-        createElementVNode("div", _hoisted_3$t, [
+        createElementVNode("div", _hoisted_3$u, [
           createVNode(Transition, { name: "grow-down" }, {
             default: withCtx(() => [
               withDirectives(createElementVNode("div", mergeProps(_ctx.$attrs, { class: "cl:ml-10 cl:p-4" }), [
@@ -359,7 +359,7 @@ const cardSizes = [
 ];
 const _hoisted_1$X = { class: "cl:sm:w-auto cl:w-full" };
 const _hoisted_2$J = { class: "cl:flex cl:flex-nowrap cl:gap-2 cl:text-grey-4 cl:text-xs cl:tracking-widest" };
-const _hoisted_3$s = {
+const _hoisted_3$t = {
   key: 0,
   class: "cl:self-center"
 };
@@ -393,7 +393,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
           class: normalizeClass(["cl:flex", { "cl:flex-col": _ctx.labelPosition === "above", "cl:flex-row-reverse cl:gap-2 cl:items-center cl:justify-end": _ctx.labelPosition === "right" }])
         }, [
           createElementVNode("div", _hoisted_2$J, [
-            _ctx.$slots.label ? (openBlock(), createElementBlock("span", _hoisted_3$s, [
+            _ctx.$slots.label ? (openBlock(), createElementBlock("span", _hoisted_3$t, [
               renderSlot(_ctx.$slots, "label")
             ])) : createCommentVNode("", true),
             _ctx.showRequiredAsterisk ? (openBlock(), createElementBlock("span", _hoisted_4$n, "*")) : createCommentVNode("", true)
@@ -808,7 +808,7 @@ const _hoisted_2$F = {
   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"
 };
-const _hoisted_3$r = { 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_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$f = { key: 6 };
 const _sfc_main$14 = /* @__PURE__ */ defineComponent({
@@ -937,7 +937,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
         _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_2$F, [
           createVNode(clUiLoadingSpinner)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$r, [
+        createElementVNode("div", _hoisted_3$s, [
           createElementVNode("div", _hoisted_4$m, [
             createVNode(_sfc_main$18, {
               id: `cl-ui-combo-box-search-input-${_ctx.objectType}`,
@@ -1006,7 +1006,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$R = { class: "cl:flex cl:rounded-lg" };
 const _hoisted_2$E = { class: "cl:inline-block cl:w-full" };
-const _hoisted_3$q = { class: "cl:pointer-events-none cl:relative cl:top-0.5" };
+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$e = ["disabled"];
 const _hoisted_6$a = ["disabled"];
@@ -1233,7 +1233,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
               _: 1
             }, 8, ["id", "modelValue", "class", "placeholder", "disabled"])
           ]),
-          withDirectives(createElementVNode("div", _hoisted_3$q, [
+          withDirectives(createElementVNode("div", _hoisted_3$r, [
             createElementVNode("div", _hoisted_4$l, [
               createTextVNode(toDisplayString(unref(t2)("comboBox.required")) + " ", 1),
               createVNode(unref(Icon), {
@@ -1377,7 +1377,7 @@ const _hoisted_2$D = {
   key: 0,
   class: "cl:w-full"
 };
-const _hoisted_3$p = {
+const _hoisted_3$q = {
   key: 1,
   class: "cl:leading-10 cl:text-sm cl:w-full"
 };
@@ -1388,7 +1388,7 @@ function _sfc_render$5(_ctx, _cache) {
     _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2$D, [
       renderSlot(_ctx.$slots, "default")
     ])) : createCommentVNode("", true),
-    _ctx.$slots.left || _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_3$p, [
+    _ctx.$slots.left || _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_3$q, [
       createElementVNode("span", _hoisted_4$k, [
         renderSlot(_ctx.$slots, "left")
       ]),
@@ -1465,7 +1465,7 @@ const _hoisted_1$N = {
   class: "cl:flex cl:gap-2 cl:justify-between cl:mb-2 cl:w-full"
 };
 const _hoisted_2$C = { key: 1 };
-const _hoisted_3$o = { 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_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$c = {
   key: 2,
@@ -1506,7 +1506,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
         }, [
           createElementVNode("strong", null, toDisplayString(unref(t2)("grid.gridTools")), 1)
         ], 2),
-        createElementVNode("div", _hoisted_3$o, [
+        createElementVNode("div", _hoisted_3$p, [
           createElementVNode("div", _hoisted_4$j, [
             renderSlot(_ctx.$slots, "additional-grid-actions", normalizeProps(guardReactiveProps({
               loading: _ctx.loading,
@@ -1807,7 +1807,8 @@ const messages = {
       endDate: "End Date"
     },
     select: {
-      displayTextOverflow: "{count} options selected"
+      displayTextOverflow: "{count} options selected",
+      notFound: "Not found"
     }
   }
 };
@@ -2286,7 +2287,7 @@ const _hoisted_2$A = {
   key: 4,
   class: "cl:inline-block cl:whitespace-nowrap"
 };
-const _hoisted_3$n = {
+const _hoisted_3$o = {
   key: 5,
   class: "cl:inline-block cl:whitespace-nowrap"
 };
@@ -2396,7 +2397,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
         ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           createTextVNode(toDisplayString(formatDate(_ctx.data[_ctx.column.field], unref(DateFormat).DATETIME)), 1)
         ], 64))
-      ], 64)) : _ctx.column.type === "list" && _ctx.column.field !== void 0 && _ctx.column.listEntries !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_1$L, toDisplayString(unref(t2)(_ctx.column.listEntries.find((entry) => entry.value === _ctx.data[_ctx.column.field])?.translationKey ?? "")), 1)) : _ctx.column.type === "number" && _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_2$A, toDisplayString(formatNumberToString(_ctx.data[_ctx.column.field], unref(locale2))), 1)) : _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_3$n, [
+      ], 64)) : _ctx.column.type === "list" && _ctx.column.field !== void 0 && _ctx.column.listEntries !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_1$L, toDisplayString(unref(t2)(_ctx.column.listEntries.find((entry) => entry.value === _ctx.data[_ctx.column.field])?.translationKey ?? "")), 1)) : _ctx.column.type === "number" && _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_2$A, toDisplayString(formatNumberToString(_ctx.data[_ctx.column.field], unref(locale2))), 1)) : _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_3$o, [
         createElementVNode("span", {
           title: showUntruncatedStringValue.value ? _ctx.data[_ctx.column.field] : void 0,
           innerHTML: formatString()
@@ -2569,7 +2570,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$K = ["colspan"];
 const _hoisted_2$z = ["colspan"];
-const _hoisted_3$m = { key: 2 };
+const _hoisted_3$n = { key: 2 };
 const _hoisted_4$h = ["colspan"];
 const _hoisted_5$b = { class: "cl:flex cl:flex-wrap cl:justify-center cl:text-center cl:text-sm cl:w-full" };
 const _hoisted_6$9 = { key: 0 };
@@ -2789,7 +2790,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
               }, "   ", 8, _hoisted_2$z)
             ], 2);
           }), 128)) : createCommentVNode("", true)
-        ], 64)) : !_ctx.loading ? (openBlock(), createElementBlock("tr", _hoisted_3$m, [
+        ], 64)) : !_ctx.loading ? (openBlock(), createElementBlock("tr", _hoisted_3$n, [
           createElementVNode("td", {
             colspan: _ctx.columns.length
           }, [
@@ -2819,7 +2820,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$J = ["value", "inputmode", "disabled", "placeholder"];
 const _hoisted_2$y = { class: "cl:absolute cl:flex-col cl:flex-nowrap cl:h-full cl:hidden cl:justify-between cl:py-0.5 cl:right-1 cl:text-xs cl:top-0 cl:xl:flex" };
-const _hoisted_3$l = ["disabled"];
+const _hoisted_3$m = ["disabled"];
 const _hoisted_4$g = ["disabled"];
 const _sfc_main$U = /* @__PURE__ */ defineComponent({
   ...{
@@ -3001,7 +3002,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
                 ]
               }, [
                 createVNode(_component_icon, { icon: "ph:caret-up-bold" })
-              ], 40, _hoisted_3$l),
+              ], 40, _hoisted_3$m),
               createElementVNode("button", {
                 class: "cl:bg-secondary-light/30 cl:border cl:border-grey-3 cl:hover:bg-secondary-light/20 cl:px-1 cl:rounded",
                 disabled: _ctx.disabled,
@@ -3043,7 +3044,7 @@ const _hoisted_1$I = {
   class: "cl:flex cl:flex-col cl:lg:flex-row cl:lg:gap-2"
 };
 const _hoisted_2$x = { 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$k = { 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_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$a = { 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" };
@@ -3130,7 +3131,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             words: 2
           })
         ]),
-        createElementVNode("div", _hoisted_3$k, [
+        createElementVNode("div", _hoisted_3$l, [
           createVNode(unref(clUiSkeletonInput), { class: "cl:w-64" })
         ])
       ])) : _ctx.loading || _ctx.data?.results?.length && _ctx.request ? (openBlock(), createElementBlock("div", {
@@ -3814,7 +3815,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$F = { class: "cl:gap-1 cl:grid cl:grid-cols-[auto_1fr_auto_auto] cl:pt-0.5 cl:w-full" };
 const _hoisted_2$u = ["disabled"];
-const _hoisted_3$j = { class: "cl:max-w-max" };
+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$9 = ["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" };
@@ -3874,7 +3875,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
               class: "cl:active:bg-grey-0 cl:bg-white cl:border cl:border-grey-2 cl:disabled:bg-grey-1 cl:hover:bg-off-white cl:leading-none cl:min-w-[26px] cl:p-[5px] cl:rounded-full cl:shadow cl:text-xs cl:transition-colors",
               onClick: _cache[0] || (_cache[0] = ($event) => setValueAndFocus(_ctx.min))
             }, toDisplayString(unref(formatNumberAsDecimal)(_ctx.min, _ctx.precision)), 9, _hoisted_2$u),
-            createElementVNode("div", _hoisted_3$j, [
+            createElementVNode("div", _hoisted_3$k, [
               withDirectives(createElementVNode("div", _hoisted_4$e, [
                 withDirectives(createElementVNode("input", mergeProps({
                   ref_key: "sliderRef",
@@ -4361,7 +4362,7 @@ const _hoisted_1$C = {
   class: "cl:flex cl:gap-2 cl:p-2 cl:w-full"
 };
 const _hoisted_2$r = { class: "cl:w-full" };
-const _hoisted_3$i = { class: "cl:w-full" };
+const _hoisted_3$j = { class: "cl:w-full" };
 const _sfc_main$L = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -4559,7 +4560,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                     _: 1
                   }, 8, ["modelValue", "date-format-locale", "disabled", "time-zone", "min-date", "max-date", "popover-placement"])
                 ]),
-                createElementVNode("div", _hoisted_3$i, [
+                createElementVNode("div", _hoisted_3$j, [
                   createVNode(_sfc_main$M, {
                     id: "dateInputEnd",
                     modelValue: internalEntrySelectEndDate.value,
@@ -4625,6 +4626,10 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$B = ["value", "readonly", "placeholder", "disabled", "onKeydown"];
 const _hoisted_2$q = ["id", "tabindex", "inert", "onKeydown"];
+const _hoisted_3$i = {
+  key: 1,
+  class: "cl:p-1 cl:select-none cl:text-grey-3"
+};
 const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -4670,10 +4675,18 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       }
     });
     const searchTerm = ref("");
-    const displayList = computed(() => props.list.filter((entry) => {
-      const term = isSelectItem(entry) ? entry.name : entry;
-      return term.toString().toLowerCase().includes(searchTerm.value.trim().toLowerCase());
-    }));
+    const displayList = computed(() => {
+      const itemsToFilterBasedOnSearchTerm = props.list.filter((d) => !isSelectItem(d) || isSelectItem(d) && d.id > -1);
+      const filteredDisplayList = itemsToFilterBasedOnSearchTerm.filter((entry) => {
+        const term = isSelectItem(entry) ? entry.name : entry;
+        return term.toString().toLowerCase().includes(searchTerm.value.trim().toLowerCase());
+      });
+      const itemsToExcludeFromSearchTermFiltering = props.list.filter((d) => isSelectItem(d) && d.id < 0);
+      return [
+        ...searchTerm.value.trim() === "" ? itemsToExcludeFromSearchTermFiltering : [],
+        ...filteredDisplayList
+      ];
+    });
     const isCurrentlySearchable = computed(() => selectModalVisible.value && props.allowFiltering);
     const highlightIndex = ref(-1);
     const outsideRef = ref();
@@ -4784,14 +4797,24 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       }
     }
     function handleEnterPress(event) {
-      if (selectModalVisible.value) {
+      const isMultiSelect = Array.isArray(selectResult.value);
+      if (selectModalVisible.value && (!isMultiSelect || highlightIndex.value !== -1 && isMultiSelect)) {
         select(displayList.value[highlightIndex.value] ?? null);
         setSearchTerm("");
         event.target.focus();
+      } else if (props.allowFiltering && isMultiSelect && searchTerm.value.trim() !== "") {
+        const displayListExcludingDefaultValues = displayList.value.filter((d) => !isSelectItem(d) || isSelectItem(d) && d.id > -1);
+        if (displayListExcludingDefaultValues.length > 0) {
+          selectMultipleValues(displayListExcludingDefaultValues);
+          toggleSelectModalState(false);
+        }
       } else {
         toggleSelectModalState(true);
       }
     }
+    function selectMultipleValues(values) {
+      selectResult.value = values;
+    }
     function handleEscapePress(event) {
       toggleSelectModalState(false);
       if (props.openDropDownOnFocus) {
@@ -4856,6 +4879,9 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       select(option2);
       highlightIndex.value = -1;
     }
+    watch(searchTerm, () => {
+      highlightIndex.value = -1;
+    });
     __expose({
       focus
     });
@@ -4960,7 +4986,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                   _cache[8] || (_cache[8] = withKeys(withModifiers(($event) => select(displayList.value[highlightIndex.value]), ["stop", "prevent"]), ["enter"]))
                 ]
               }), [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(displayList.value, (option2, index2) => {
+                displayList.value.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(displayList.value, (option2, index2) => {
                   return openBlock(), createElementBlock("div", { key: index2 }, [
                     renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, { option: option2, index: index2, select: handleMouseClick, highlightIndex: highlightIndex.value, isSelected }), () => [
                       (openBlock(), createBlock(_component_cl_ui_select_option, {
@@ -4979,7 +5005,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                       }, 1032, ["id", "disabled", "is-highlighted", "is-selected", "readonly", "onSelect"]))
                     ])
                   ]);
-                }), 128))
+                }), 128)) : (openBlock(), createElementBlock("span", _hoisted_3$i, toDisplayString(unref(t2)("select.notFound")), 1))
               ], 16, _hoisted_2$q)) : createCommentVNode("", true)
             ], 2)
           ]),
@@ -6226,6 +6252,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
         ...currentRequest.value,
         filters
       };
+      gridSearchInputRef.value?.focus();
     }
     watch(() => props.columns, () => performSearch(searchValue.value));
     const debouncedSearch = useDebounceFn((valueOrCancel) => {