@citruslime/ui 2.0.0-beta.19 → 2.0.0-beta.22

package/README.md

@@ -1,6 +1,6 @@
 # Citrus-Lime UI
 
-A Vue 3 UI library that is used across Citrus-Lime web apps.
+A Vue 3 UI library, which is used across Citrus-Lime web apps.
 
 ![version](https://img.shields.io/npm/v/@citruslime/ui/latest)
 ![version next](https://img.shields.io/npm/v/@citruslime/ui/next)

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

@@ -1154,6 +1154,7 @@ function getFormattedTimeForMinMax(date) {
   return formatted;
 }
 var clUiCalendar_vue_vue_type_style_index_0_lang = "";
+var clUiCalendar_vue_vue_type_style_index_1_scoped_true_lang = "";
 const _hoisted_1$m = ["placeholder", "disabled"];
 const _hoisted_2$l = { class: "cl-absolute cl-bg-white cl-flex cl-right-2 cl-text-grey-4 cl-top-3.5" };
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
@@ -1383,6 +1384,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
+var clUiCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-533d446d"]]);
 const calendarTypes = [
   "date",
   "datetime",
@@ -1553,7 +1555,7 @@ function getInputTypeAsCalendarType(type) {
   return calendarType;
 }
 var clUiInput_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _hoisted_1$k = { class: "cl-align-top cl-border-none cl-inline-block cl-mb-4 cl-mr-4 cl-text-left" };
+const _hoisted_1$k = { class: "cl-align-top cl-border-none cl-inline-block cl-text-left" };
 const _hoisted_2$j = { class: "cl-flex cl-justify-between" };
 const _hoisted_3$f = { class: "cl-w-full" };
 const _hoisted_4$b = {
@@ -1564,12 +1566,12 @@ const _hoisted_5$8 = {
   key: 1,
   class: "cl-bg-danger-light cl-block cl-max-h-6 cl-mb-1 cl-ml-2 cl-px-2 cl-rounded-md cl-text-center cl-text-danger-default cl-text-xs cl-uppercase"
 };
-const _hoisted_6$6 = ["type", "disabled", "min", "max", "minlength", "maxlength", "step", "placeholder", "accept", "name", "autocomplete", "onBlur", "onMousewheel"];
-const _hoisted_7$6 = { class: "cl-relative" };
-const _hoisted_8$5 = {
+const _hoisted_6$6 = ["type", "disabled", "min", "max", "minlength", "maxlength", "step", "placeholder", "accept", "name", "autocomplete", "onBlur"];
+const _hoisted_7$6 = {
   key: 2,
   class: "cl-h-[5.78rem] cl-pb-2 md:cl-h-20"
 };
+const _hoisted_8$5 = { class: "cl-relative" };
 const _hoisted_9$5 = {
   key: 0,
   class: "cl-bg-primary-lighter cl-px-2 cl-rounded-md cl-text-center cl-text-secondary-light cl-text-xs cl-w-auto cl-whitespace-pre-line"
@@ -1586,7 +1588,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     isRequired: { type: Boolean, default: false },
     customValidationFunction: { type: Function, default: void 0 },
     onInputFunction: { type: Function, default: void 0 },
-    min: { default: -1e11 },
+    min: { default: 0 },
     max: { default: 1e11 },
     step: { default: 1 },
     validateImmediately: { type: Boolean, default: false },
@@ -1679,7 +1681,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       }
       Promise.all(validationPromises).then((internalValidationResults) => {
         const messages2 = [...internalValidationResults.map((e) => e.message)];
-        let invalid = internalValidationResults.some((e) => e.valid === false) || props.externalErrors.length > 0;
+        let invalid = internalValidationResults.some((e) => e.message.length > 0 && e.valid === false) || props.externalErrors.length > 0;
         if (dateFlaggedAsOutOfRange.value) {
           messages2.push(t2("input.dateOutOfRange"));
           invalid = true;
@@ -1814,12 +1816,14 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             onClick: _cache[1] || (_cache[1] = ($event) => emitClickIfButton($event)),
             onFocus: _cache[2] || (_cache[2] = ($event) => emit("focus")),
             onBlur: withModifiers(onLostFocus, ["self"]),
-            onMousewheel: withModifiers(onMouseWheel, ["prevent"]),
-            onInput: _cache[3] || (_cache[3] = ($event) => emit("input", $event))
+            onMousewheelPassive: onMouseWheel,
+            onInput: _cache[3] || (_cache[3] = ($event) => {
+              emit("input", $event);
+              _ctx.$forceUpdate();
+            })
           }), null, 16, _hoisted_6$6)), [
             [vModelDynamic, unref(currentValue)]
-          ]) : createCommentVNode("", true),
-          unref(isInputCalendarSupportedDate)(__props.inputType) ? (openBlock(), createBlock(unref(_sfc_main$n), mergeProps({ key: 1 }, _ctx.$attrs, {
+          ]) : unref(isInputCalendarSupportedDate)(__props.inputType) ? (openBlock(), createBlock(unref(clUiCalendar), mergeProps({ key: 1 }, _ctx.$attrs, {
             ref_key: "inputElement",
             ref: inputElement,
             date: unref(currentDateValue),
@@ -1836,8 +1840,22 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             onBlur: withModifiers(onLostFocus, ["self"]),
             onValueOutOfRange: onDateOutOfRange,
             onFocus: _cache[5] || (_cache[5] = ($event) => emit("focus"))
-          }), null, 16, ["date", "class", "disabled", "type", "min", "max", "onBlur"])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_7$6, [
+          }), null, 16, ["date", "class", "disabled", "type", "min", "max", "onBlur"])) : __props.inputType === "range" && typeof unref(currentValue) === "number" ? (openBlock(), createElementBlock("div", _hoisted_7$6, [
+            createVNode(unref(clUiSlider), {
+              ref_key: "inputElement",
+              ref: inputElement,
+              value: unref(currentValue),
+              "onUpdate:value": _cache[6] || (_cache[6] = ($event) => isRef(currentValue) ? currentValue.value = $event : null),
+              min: unref(minAsNumber),
+              max: unref(maxAsNumber),
+              step: __props.step,
+              disabled: __props.disabled,
+              "show-numeric-input": false,
+              onBlur: withModifiers(onLostFocus, ["self"]),
+              onFocus: _cache[7] || (_cache[7] = ($event) => emit("focus"))
+            }, null, 8, ["value", "min", "max", "step", "disabled", "onBlur"])
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_8$5, [
             __props.inputType === "number" && !__props.disabled && __props.showArrows ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass(["cl-absolute cl-duration-300 cl-right-1 cl-transition", {
@@ -1849,7 +1867,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                 icon: "ph:caret-up-bold",
                 class: "cl-bg-link-default cl-rounded-md cl-text-sm cl-text-white hover:cl-bg-link-light hover:cl-cursor-pointer",
                 onClick: incrementNumericValue,
-                onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {
+                onMousedown: _cache[8] || (_cache[8] = withModifiers(() => {
                 }, ["prevent"]))
               })
             ], 2)) : createCommentVNode("", true),
@@ -1863,26 +1881,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                 icon: "ph:caret-down-bold",
                 class: "cl-bg-link-default cl-rounded-md cl-text-sm cl-text-white hover:cl-bg-link-light hover:cl-cursor-pointer",
                 onClick: decrementNumericValue,
-                onMousedown: _cache[7] || (_cache[7] = withModifiers(() => {
+                onMousedown: _cache[9] || (_cache[9] = withModifiers(() => {
                 }, ["prevent"]))
               })
             ], 2)) : createCommentVNode("", true)
-          ]),
-          __props.inputType === "range" && typeof unref(currentValue) === "number" ? (openBlock(), createElementBlock("div", _hoisted_8$5, [
-            createVNode(unref(clUiSlider), {
-              ref_key: "inputElement",
-              ref: inputElement,
-              value: unref(currentValue),
-              "onUpdate:value": _cache[8] || (_cache[8] = ($event) => isRef(currentValue) ? currentValue.value = $event : null),
-              min: unref(minAsNumber),
-              max: unref(maxAsNumber),
-              step: __props.step,
-              disabled: __props.disabled,
-              "show-numeric-input": false,
-              onBlur: withModifiers(onLostFocus, ["self"]),
-              onFocus: _cache[9] || (_cache[9] = ($event) => emit("focus"))
-            }, null, 8, ["value", "min", "max", "step", "disabled", "onBlur"])
-          ])) : createCommentVNode("", true)
+          ])
         ], 32),
         isValid.value && unref(validMessage) ? (openBlock(), createElementBlock("div", _hoisted_9$5, toDisplayString(unref(validMessage)), 1)) : createCommentVNode("", true),
         !isValid.value && unref(errors).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_10$5, toDisplayString(unref(errors)), 1)) : createCommentVNode("", true)
@@ -1890,7 +1893,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ClUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-438103cc"]]);
+var ClUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-007f3e50"]]);
 const _hoisted_1$j = { class: "cl-align-items-center cl-bg-black cl-bg-opacity-40 cl-bottom-0 cl-fixed cl-flex cl-h-screen cl-justify-center cl-left-0 cl-right-0 cl-top-0 cl-w-full cl-z-40" };
 const _hoisted_2$i = ["onKeypress"];
 const _hoisted_3$e = { class: "cl-overflow-y-auto cl-p-2 cl-w-full" };
@@ -1957,10 +1960,10 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                       "cl-bg-primary-default cl-text-white": __props.headerColour === "primary"
                     }])
                   }, [
-                    renderSlot(_ctx.$slots, "title", normalizeProps(guardReactiveProps({ close })))
+                    renderSlot(_ctx.$slots, "title")
                   ], 2),
                   createElementVNode("div", _hoisted_3$e, [
-                    renderSlot(_ctx.$slots, "default")
+                    renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ close })))
                   ]),
                   renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({ close })))
                 ], 16)
@@ -3030,7 +3033,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       const _component_icon = resolveComponent("icon");
       return __props.column.filterable === void 0 || __props.column.filterable === true ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: normalizeClass(["cl-border-grey-2 cl-flex cl-rounded cl-w-full", {
+        class: normalizeClass(["cl-border-grey-2 cl-flex cl-h-[2.6rem] cl-rounded cl-w-full", {
           "cl-border-b cl-p-5": __props.column.type === "slot" && (__props.column.slotType === void 0 || __props.column.field === void 0),
           "cl-border": __props.column.type !== "slot" || __props.column.slotType !== void 0 && __props.column.field !== void 0
         }])
@@ -3157,7 +3160,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const currentPage = ref(props.request.pageNumber);
     const totalPages = computed(() => {
       var _a, _b;
-      return props.data !== null ? Math.ceil((_b = (_a = props.data) == null ? void 0 : _a.totalRecords) != null ? _b : 0 / props.request.pageSize) : 1;
+      return props.data !== null ? Math.ceil(((_b = (_a = props.data) == null ? void 0 : _a.totalRecords) != null ? _b : 0) / props.request.pageSize) : 1;
     });
     const pageNumbers = computed(() => {
       const calculatedPageNumbers = Array.from(Array(totalPages.value + 1).keys());
@@ -3197,7 +3200,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           createVNode(ClUiInput, {
             modelValue: currentPage.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => currentPage.value = $event),
-            class: "!cl-inline-block !cl-ml-2 !cl-mt-2 !cl-text-sm !cl-w-max",
+            class: "cl-ml-1 cl-mt-0.5 cl-text-sm",
             "input-type": "number",
             label: "Page",
             "show-label": false,
@@ -3291,7 +3294,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$a = { class: "cl-fixed cl-flex cl-h-full cl-justify-end cl-right-0 cl-shadow-lg cl-top-0 cl-z-40" };
+const _hoisted_1$a = { class: "cl-fixed cl-flex cl-h-full cl-justify-end cl-right-0 cl-shadow-lg cl-top-0 cl-z-50" };
 const _hoisted_2$9 = { class: "cl-bg-secondary-default cl-h-full cl-overflow-y-auto cl-px-10 cl-py-20 cl-relative cl-text-grey-2 cl-w-80" };
 const _hoisted_3$7 = { class: "cl-mb-4 cl-text-2xl cl-text-off-white" };
 const _hoisted_4$5 = { class: "cl-border-grey-3 cl-border-t cl-flex cl-flex-wrap cl-text-sm cl-w-full" };
@@ -4135,18 +4138,18 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                   modelModifiers: { trim: true },
                   class: "!cl-border-2 !cl-mb-1 cl-w-full",
                   "input-type": "email",
-                  "highlight-when-valid": true,
-                  label: "Username",
+                  "highlight-when-valid": username.value !== void 0 && username.value !== "",
+                  label: unref(t2)("login.username"),
                   "show-label": false,
                   "placeholder-text": unref(t2)("login.email"),
                   autocomplete: "username",
                   "validate-immediately": true,
                   "custom-validation-function": emptyIsInvalidValidation,
                   "input-specific-classes": "!cl-pl-9",
-                  "message-when-valid": unref(t2)("login.validEmail"),
+                  "message-when-valid": username.value ? unref(t2)("login.validEmail") : "",
                   onInput: clearErrors,
                   onValidated: onUsernameValidated
-                }, null, 8, ["modelValue", "placeholder-text", "message-when-valid"])
+                }, null, 8, ["modelValue", "highlight-when-valid", "label", "placeholder-text", "message-when-valid"])
               ])
             ]),
             createElementVNode("div", _hoisted_8, [
@@ -4177,14 +4180,16 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                   "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => password.value = $event),
                   class: "!cl-border-2 cl-w-full",
                   "input-type": passwordFieldType.value,
-                  "highlight-when-valid": true,
+                  "highlight-when-valid": password.value !== void 0 && password.value !== "",
+                  label: unref(t2)("login.password"),
+                  "show-label": false,
                   "placeholder-text": unref(t2)("login.password"),
                   autocomplete: "current-password",
                   "validate-immediately": true,
                   "input-specific-classes": "!cl-pl-9 !cl-pr-9",
                   "custom-validation-function": emptyIsInvalidValidation,
                   onInput: clearErrors
-                }, null, 8, ["modelValue", "input-type", "placeholder-text"])
+                }, null, 8, ["modelValue", "input-type", "highlight-when-valid", "label", "placeholder-text"])
               ])
             ]),
             createElementVNode("div", {