@citruslime/ui 4.1.0-beta.2 → 4.1.0-beta.4

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

@@ -4717,7 +4717,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     isGridFilter: { type: Boolean, default: false },
     openDropDownOnFocus: { type: Boolean, default: true },
     allowFiltering: { type: Boolean, default: false },
-    useListView: { type: Boolean, default: (props) => Array.isArray(props.modelValue) }
+    useListView: { type: Boolean, default: (props) => Array.isArray(props.modelValue) },
+    readonly: { type: Boolean, default: false }
   },
   emits: ["update:model-value"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -4779,30 +4780,32 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       setSearchTerm("");
     }
     function select(value) {
-      if (Array.isArray(selectResult.value)) {
-        const isInArray = selectResult.value.indexOf(value);
-        if (isInArray > -1) {
-          if (selectResult.value.length > 1 || props.canClear) {
-            selectResult.value = selectResult.value.toSpliced(isInArray, 1);
+      if (props.readonly === false && value !== null && value !== void 0) {
+        if (Array.isArray(selectResult.value)) {
+          const isInArray = selectResult.value.indexOf(value);
+          if (isInArray > -1) {
+            if (selectResult.value.length > 1 || props.canClear) {
+              selectResult.value = selectResult.value.toSpliced(isInArray, 1);
+            }
+          } else {
+            selectResult.value = [
+              ...selectResult.value,
+              value
+            ];
           }
         } else {
-          selectResult.value = [
-            ...selectResult.value,
-            value
-          ];
-        }
-      } else {
-        if (props.canClear && selectResult.value === value) {
-          selectResult.value = null;
-        } else {
-          selectResult.value = value;
+          if (props.canClear && selectResult.value === value) {
+            selectResult.value = null;
+          } else {
+            selectResult.value = value;
+          }
+          toggleSelectModalState();
         }
-        toggleSelectModalState();
       }
     }
     function moveHighlightToStart(event) {
       var _a;
-      if (selectModalVisible.value || props.useListView) {
+      if (props.readonly === false && (selectModalVisible.value || props.useListView)) {
         event.stopPropagation();
         highlightIndex.value = 0;
         (_a = selectModalRef.value) == null ? void 0 : _a.scrollTo({
@@ -4813,7 +4816,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     }
     function moveHighlightToEnd(event) {
       var _a;
-      if (selectModalVisible.value || props.useListView) {
+      if (props.readonly === false && (selectModalVisible.value || props.useListView)) {
         event.stopPropagation();
         highlightIndex.value = displayList.value.length - 1;
         (_a = selectModalRef.value) == null ? void 0 : _a.scrollTo({
@@ -4823,7 +4826,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       }
     }
     function moveHighlightBackwards(event) {
-      if (selectModalVisible.value || props.useListView) {
+      if (props.readonly === false && (selectModalVisible.value || props.useListView)) {
         event.stopPropagation();
         if (highlightIndex.value === -1) {
           moveHighlightToStart(event);
@@ -4836,7 +4839,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       }
     }
     function moveHighlightForwards(event) {
-      if (selectModalVisible.value || props.useListView) {
+      if (props.readonly === false && (selectModalVisible.value || props.useListView)) {
         event.stopPropagation();
         if (highlightIndex.value < displayList.value.length - 1) {
           highlightIndex.value++;
@@ -4861,7 +4864,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     }
     function handleEnterPress(event) {
       if (selectModalVisible.value) {
-        select(displayList.value[highlightIndex.value]);
+        select(displayList.value[highlightIndex.value] ?? null);
         setSearchTerm("");
         event.target.focus();
       } else {
@@ -4929,6 +4932,10 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     function ignoreFocusEvent() {
       ignoreFocus = true;
     }
+    function handleMouseClick(option2) {
+      select(option2);
+      highlightIndex.value = -1;
+    }
     __expose({
       focus
     });
@@ -4983,7 +4990,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                         withKeys(withModifiers(moveHighlightForwards, ["prevent"]), ["down"]),
                         withKeys(withModifiers(moveHighlightToStart, ["prevent"]), ["home"]),
                         withKeys(withModifiers(moveHighlightToEnd, ["prevent"]), ["end"]),
-                        _cache[4] || (_cache[4] = withKeys(withModifiers(($event) => disableKeyboardEventForSearching(handleEnterPress), ["stop", "prevent"]), ["space"])),
+                        _cache[4] || (_cache[4] = withKeys(($event) => disableKeyboardEventForSearching(handleEnterPress), ["space"])),
                         withKeys(withModifiers(handleEnterPress, ["stop", "prevent"]), ["enter"])
                       ],
                       onInput: _cache[0] || (_cache[0] = ($event) => setSearchTerm($event.target.value)),
@@ -5014,7 +5021,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                   "cl:absolute cl:border-t-0 cl:left-0 cl:rounded-t-none cl:top-8 cl:min-h-20 cl:max-h-56 cl:text-sm": !_ctx.isGridFilter && props.useListView === false,
                   "cl:max-h-28": props.useListView,
                   "cl:overflow-y-auto": _ctx.disabled === false,
-                  "cl:overflow-hidden": _ctx.disabled
+                  "cl:overflow-hidden": _ctx.disabled,
+                  "cl:text-grey-3": _ctx.readonly
                 }],
                 inert: _ctx.disabled,
                 onBlur: _cache[6] || (_cache[6] = ($event) => toggleSelectModalState(false)),
@@ -5034,20 +5042,21 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
               }), [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(displayList.value, (option2, index2) => {
                   return openBlock(), createElementBlock("div", { key: index2 }, [
-                    renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, { option: option2, index: index2, select, highlightIndex: highlightIndex.value, isSelected }), () => [
+                    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, {
                         id: unref(id) + "-option-" + (isSelectItem(option2) ? option2.id : index2),
                         key: index2,
                         disabled: _ctx.disabled,
                         "is-highlighted": highlightIndex.value === index2,
                         "is-selected": isSelected(option2),
-                        onSelect: ($event) => select(option2)
+                        readonly: _ctx.readonly,
+                        onSelect: ($event) => handleMouseClick(option2)
                       }, {
                         default: withCtx(() => [
                           createTextVNode(toDisplayString(isSelectItem(option2) ? option2.name : option2), 1)
                         ]),
                         _: 2
-                      }, 1032, ["id", "disabled", "is-highlighted", "is-selected", "onSelect"]))
+                      }, 1032, ["id", "disabled", "is-highlighted", "is-selected", "readonly", "onSelect"]))
                     ])
                   ]);
                 }), 128))
@@ -5073,20 +5082,23 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   props: {
     isSelected: { type: Boolean, default: false },
     isHighlighted: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false }
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false }
   },
   emits: ["select"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["cl:px-2 cl:py-0.5", _ctx.disabled ? "cl:bg-grey-1 cl:border-grey-2 cl:placeholder-grey-3" : ["cl:cursor-pointer", {
-          "cl:bg-primary-lighter cl:hover:bg-primary-default": _ctx.isSelected && _ctx.isHighlighted === false,
+        class: normalizeClass(["cl:px-2 cl:py-0.5", _ctx.disabled ? "cl:bg-grey-1 cl:border-grey-2 cl:placeholder-grey-3" : {
+          "cl:cursor-pointer": _ctx.readonly === false,
+          "cl:bg-primary-lighter": _ctx.isSelected && _ctx.isHighlighted === false,
+          "cl:hover:bg-primary-default": _ctx.readonly === false && _ctx.isSelected && _ctx.isHighlighted === false,
           "cl:bg-primary-default": _ctx.isSelected && _ctx.isHighlighted,
-          "cl:hover:bg-link-lighter": _ctx.isSelected === false && _ctx.isHighlighted === false,
+          "cl:hover:bg-link-lighter": _ctx.readonly === false && _ctx.isSelected === false && _ctx.isHighlighted === false,
           "cl:bg-link-lighter": _ctx.isSelected === false && _ctx.isHighlighted
-        }]]),
-        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.disabled ? null : emit("select"))
+        }]),
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.readonly || _ctx.disabled ? null : emit("select"))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -5340,11 +5352,11 @@ const defaultEmptyListValue = {
   name: "",
   value: ""
 };
-const defaultSelectAllListValue = {
+const defaultSelectAllListValue = computed(() => ({
   id: -2,
   name: i18n.global.t("grid.selectAll"),
   value: ""
-};
+}));
 const booleanListEntries = computed(() => [
   defaultEmptyListValue,
   {
@@ -5405,7 +5417,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     const listEntriesAsSelectItems = computed(() => {
       var _a;
       return [
-        props.column.listMode === "multi" ? defaultSelectAllListValue : defaultEmptyListValue,
+        props.column.listMode === "multi" ? defaultSelectAllListValue.value : defaultEmptyListValue,
         ...((_a = props.column.listEntries) == null ? void 0 : _a.map((x, i) => ({
           id: i,
           name: t2(x.translationKey),
@@ -5422,12 +5434,12 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         const filters = (_a = props.filter) == null ? void 0 : _a.filter((f) => f.filterOperation === FilterOperation.OR_EQUAL).map((f) => f.filterValue);
         const filteredListEntries = listEntriesAsSelectItems.value.filter((x) => filters == null ? void 0 : filters.includes(x.value));
         if (filteredListEntries.length === ((_b = props.column.listEntries) == null ? void 0 : _b.length)) {
-          filteredListEntries.push(defaultSelectAllListValue);
+          filteredListEntries.push(defaultSelectAllListValue.value);
         }
         return filteredListEntries;
       }
     });
-    const selectAllCurrentlyHighlighted = computed(() => Array.isArray(currentFilterValueAsSelectItems.value) && currentFilterValueAsSelectItems.value.some((x) => x.id === defaultSelectAllListValue.id));
+    const selectAllCurrentlyHighlighted = computed(() => Array.isArray(currentFilterValueAsSelectItems.value) && currentFilterValueAsSelectItems.value.some((x) => x.id === defaultSelectAllListValue.value.id));
     const selectedListEntryId = ref(defaultEmptyListValue.id);
     function updateListColumnSelectItems(value) {
       if (value && !Array.isArray(value)) {
@@ -5620,9 +5632,9 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     const currentDateRangeFilterValue = computed(() => currentFilterValue.value === "" ? null : currentFilterValue.value);
     const filterable = computed(() => isFilterable(props.column));
     function setOrEqualFilters(value) {
-      const selectAllCurrentlySelected = value.some((x) => x.id === defaultSelectAllListValue.id);
+      const selectAllCurrentlySelected = value.some((x) => x.id === defaultSelectAllListValue.value.id);
       if (value.length === 0 || selectAllCurrentlySelected === false && selectAllCurrentlyHighlighted.value) {
-        setOrEqualFiltersImpl([defaultSelectAllListValue.value]);
+        setOrEqualFiltersImpl([defaultSelectAllListValue.value.value]);
       } else if (selectAllCurrentlySelected && selectAllCurrentlyHighlighted.value === false) {
         setOrEqualFiltersImpl(listEntriesAsSelectItems.value.map((x) => x.value));
       } else {
@@ -5833,7 +5845,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           placeholder: selectAllCurrentlyHighlighted.value ? unref(t2)("grid.allEntriesSelected") : void 0,
           class: "cl:bg-white cl:font-normal! cl:max-h-52! cl:min-h-0! cl:placeholder:text-xs cl:rounded-lg! cl:text-xs",
           "is-grid-filter": true,
-          inert: _ctx.loading,
+          readonly: _ctx.loading,
           "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => updateListColumnSelectItems($event))
         }, {
           default: withCtx(({ select, option: option2, index: index2, highlightIndex, isSelected }) => [
@@ -5853,7 +5865,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             }, 1032, ["is-highlighted", "is-selected", "class", "onSelect"])
           ]),
           _: 1
-        }, 8, ["id", "list", "model-value", "can-clear", "placeholder", "inert"])) : createCommentVNode("", true),
+        }, 8, ["id", "list", "model-value", "can-clear", "placeholder", "readonly"])) : createCommentVNode("", true),
         !isDateRangeColumn.value ? (openBlock(), createBlock(_sfc_main$H, {
           key: 6,
           filter: currentFilter.value,
@@ -5868,7 +5880,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const clUiGridFilterInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-4bb0f963"]]);
+const clUiGridFilterInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-316a739a"]]);
 const _hoisted_1$y = { key: 1 };
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-grid-filter",
@@ -8777,11 +8789,11 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     function getStyleForColumn(name) {
       return columnStyles.value[name] ?? "";
     }
-    function shouldSetBlankColumn() {
+    const shouldSetBlankColumn = computed(() => {
       const columnWithNoWidthSet = visibleColumns.value.every((x) => x.width !== void 0 || x.customWidth !== void 0);
       const columnWidthDoesNotExceedGridWidth = visibleColumns.value.reduce((acc, x) => acc + (x.customWidth ?? x.width ?? 0), 0) < getGridWidth();
       return columnWithNoWidthSet && columnWidthDoesNotExceedGridWidth;
-    }
+    });
     const currentRequest = computed({
       get: () => props.request,
       set: (value) => emit("update:request", value)
@@ -8883,6 +8895,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       setColumnStyles();
     }
     watch(() => props.options.groupByField, resetGrouping, { immediate: true });
+    watch(() => props.columns, setColumnStyles, { deep: true });
     const gridSearchRef = ref();
     __expose({
       focusMegaSearch: () => {
@@ -8964,7 +8977,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                   span: 1
                 }, null, 4);
               }), 128)),
-              shouldSetBlankColumn() ? (openBlock(), createElementBlock("col", _hoisted_4$a)) : createCommentVNode("", true)
+              shouldSetBlankColumn.value ? (openBlock(), createElementBlock("col", _hoisted_4$a)) : createCommentVNode("", true)
             ], 2),
             createVNode(_sfc_main$E, {
               request: headerRequest.value,