@citruslime/ui 2.0.0-beta.15 → 2.0.0-beta.16

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

@@ -272,8 +272,7 @@ const messages = {
       login: "Login",
       email: "Email Address",
       password: "Password",
-      validEmail: "Username is a valid email address.",
-      invalidEmail: "Username must be a valid email address."
+      validEmail: "Username is a valid email address."
     },
     slider: {
       invalidProps: "The current combination of props is invalid. Please confirm the values provided are correct."
@@ -1593,7 +1592,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-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-mb-4 cl-mr-4 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 = {
@@ -1612,6 +1611,10 @@ const _hoisted_8$5 = {
 };
 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"
+};
+const _hoisted_10$5 = {
+  key: 1,
   class: "cl-bg-danger-light cl-px-2 cl-rounded-md cl-text-center cl-text-danger-default cl-text-xs cl-w-auto cl-whitespace-pre-line"
 };
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
@@ -1634,7 +1637,10 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     group: { default: "" },
     showLabel: { type: Boolean, default: true },
     showArrows: { type: Boolean, default: true },
-    autocomplete: { default: "off" }
+    autocomplete: { default: "off" },
+    highlightWhenValid: { type: Boolean, default: false },
+    messageWhenValid: { default: "" },
+    inputSpecificClasses: { default: "" }
   },
   emits: {
     "update:modelValue": null,
@@ -1664,6 +1670,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     const maxAsString = computed(() => typeof props.max === "number" ? props.max.toString() : props.max);
     const minAsNumber = computed(() => typeof props.min === "number" ? props.min : parseFloat(props.min));
     const maxAsNumber = computed(() => typeof props.max === "number" ? props.max : parseFloat(props.max));
+    const validMessage = computed(() => props.messageWhenValid.trim() !== "" ? props.messageWhenValid : "");
+    const isValid = ref(true);
     const internalErrors = ref([]);
     const errors = computed(() => {
       var _a, _b, _c, _d;
@@ -1693,7 +1701,6 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         message: "",
         valid: true
       };
-      const customValidationSuccess = props.customValidationFunction === null || props.customValidationFunction === void 0 ? defaultSuccess : props.customValidationFunction(props.label, value);
       const validationPromises = [props.customValidationFunction === null || props.customValidationFunction === void 0 ? new Promise((resolve) => {
         resolve(defaultSuccess);
       }) : new Promise((resolve) => {
@@ -1711,7 +1718,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) || !customValidationSuccess.valid;
+        let invalid = internalValidationResults.some((e) => e.valid === false) || props.externalErrors.length > 0;
         if (dateFlaggedAsOutOfRange.value) {
           messages2.push(t2("input.dateOutOfRange"));
           invalid = true;
@@ -1723,6 +1730,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           internalErrors.value = [];
           emit("validated", true, value);
         }
+        isValid.value = !invalid;
         emit("update:modelValue", value);
       });
     }
@@ -1797,6 +1805,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       }
     });
     watch(() => props.isRequired, () => onValueChanged(props.modelValue));
+    watch(() => props.externalErrors, () => updateAndValidateValue(currentValue.value));
     return (_ctx, _cache) => {
       const _component_icon = resolveComponent("icon");
       return openBlock(), createElementBlock("div", _hoisted_1$k, [
@@ -1821,13 +1830,15 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             },
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(currentValue) ? currentValue.value = $event : null)
           }, _ctx.$attrs, {
-            class: ["cl-block cl-border cl-duration-300 cl-h-fit cl-mb-1 cl-transition cl-w-full focus:cl-outline-none", {
+            class: ["cl-block cl-border cl-duration-300 cl-h-full cl-mb-1 cl-transition cl-w-full focus:cl-outline-none", {
               "hover:!cl-border-grey-3": __props.disabled === false && !unref(isInputButton)(__props.inputType),
               "!cl-cursor-default": __props.disabled,
-              "!cl-border-danger-default": unref(errors).length > 0,
-              "cl-border-grey-0 focus:cl-border-blue-light": unref(errors).length === 0 && !unref(isInputButton)(__props.inputType),
+              "!cl-border-danger-default": !isValid.value,
+              "!cl-border-primary-default": isValid.value && __props.highlightWhenValid,
+              "cl-border-grey-0 focus:cl-border-blue-light": isValid.value && !unref(isInputButton)(__props.inputType),
               "!cl-p-2": __props.inputType === "checkbox" || __props.inputType === "radio",
-              "cl-p-3 cl-rounded-lg": !unref(isInputButton)(__props.inputType)
+              "cl-p-3 cl-rounded-lg": !unref(isInputButton)(__props.inputType),
+              [`${__props.inputSpecificClasses}`]: __props.inputSpecificClasses !== ""
             }],
             style: getStyle(),
             type: __props.inputType,
@@ -1858,7 +1869,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             "onUpdate:date": _cache[4] || (_cache[4] = ($event) => isRef(currentDateValue) ? currentDateValue.value = $event : null),
             class: ["cl-block cl-duration-300 cl-h-fit cl-mb-1 cl-rounded-lg cl-text-sm cl-transition cl-w-full focus:cl-outline-none", {
               "hover:cl-border-grey-3": !__props.disabled,
-              "!cl-border-danger-default": unref(errors).length > 0
+              "!cl-border-danger-default": !isValid.value,
+              "!cl-border-primary-default": isValid.value && __props.highlightWhenValid
             }],
             disabled: __props.disabled,
             type: unref(getInputTypeAsCalendarType)(__props.inputType),
@@ -1917,12 +1929,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             }, null, 8, ["value", "min", "max", "step", "disabled", "onBlur"])
           ])) : createCommentVNode("", true)
         ], 32),
-        unref(errors).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_9$5, toDisplayString(unref(errors)), 1)) : createCommentVNode("", true)
+        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)
       ]);
     };
   }
 });
-var ClUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-2ef7d690"]]);
+var ClUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-3848d1cc"]]);
 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" };
@@ -2939,8 +2952,8 @@ const _hoisted_7$5 = ["onClick"];
 const _hoisted_8$4 = ["innerHTML"];
 const _hoisted_9$4 = /* @__PURE__ */ createElementVNode("option", { value: void 0 }, null, -1);
 const _hoisted_10$4 = ["selected"];
-const _hoisted_11$4 = ["selected"];
-const _hoisted_12$4 = {
+const _hoisted_11$3 = ["selected"];
+const _hoisted_12$3 = {
   key: 1,
   class: "cl-flex cl-w-full"
 };
@@ -3121,7 +3134,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           createElementVNode("option", {
             value: "false",
             selected: unref(currentFilter) === "false"
-          }, toDisplayString(unref(t2)("grid.false")), 9, _hoisted_11$4)
+          }, toDisplayString(unref(t2)("grid.false")), 9, _hoisted_11$3)
         ], 32)) : __props.column.type === "date" || __props.column.type === "datetime" || (__props.column.slotType === "date" || __props.column.slotType === "datetime") && typeof __props.column.field !== "undefined" ? (openBlock(), createBlock(ClUiInput, {
           key: 2,
           "model-value": unref(currentDateFilter),
@@ -3148,7 +3161,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           "input-type": "text",
           onInput: _cache[5] || (_cache[5] = ($event) => unref(debounce)(setFilter, [$event.target]))
         }, null, 8, ["modelValue"])) : createCommentVNode("", true)
-      ], 2)) : (openBlock(), createElementBlock("div", _hoisted_12$4, " \xA0 "));
+      ], 2)) : (openBlock(), createElementBlock("div", _hoisted_12$3, " \xA0 "));
     };
   }
 });
@@ -3165,12 +3178,12 @@ const _hoisted_7$4 = { class: "cl-text-grey-3 cl-w-full lg:cl-mr-2 lg:cl-w-auto"
 const _hoisted_8$3 = { class: "cl-flex cl-flex-wrap cl-text-sm mb:cl-flex-nowrap" };
 const _hoisted_9$3 = { class: "cl-pr-2" };
 const _hoisted_10$3 = ["onClick"];
-const _hoisted_11$3 = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-text-sm cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" };
-const _hoisted_12$3 = { class: "cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-mb-0 lg:cl-mr-2 lg:cl-w-auto" };
-const _hoisted_13$2 = ["onClick"];
-const _hoisted_14$2 = { class: "cl-mb-2 cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" };
-const _hoisted_15$2 = { class: "cl-block cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-inline-block lg:cl-mb-0 lg:cl-mr-1 lg:cl-w-auto" };
-const _hoisted_16$2 = { class: "cl-block lg:cl-inline-block" };
+const _hoisted_11$2 = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-text-sm cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" };
+const _hoisted_12$2 = { class: "cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-mb-0 lg:cl-mr-2 lg:cl-w-auto" };
+const _hoisted_13$1 = ["onClick"];
+const _hoisted_14$1 = { class: "cl-mb-2 cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" };
+const _hoisted_15$1 = { class: "cl-block cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-inline-block lg:cl-mb-0 lg:cl-mr-1 lg:cl-w-auto" };
+const _hoisted_16$1 = { class: "cl-block lg:cl-inline-block" };
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   props: {
     request: null,
@@ -3302,8 +3315,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               ])
             ])
           ]),
-          createElementVNode("ul", _hoisted_11$3, [
-            createElementVNode("li", _hoisted_12$3, toDisplayString(unref(t2)("grid.pageSize")), 1),
+          createElementVNode("ul", _hoisted_11$2, [
+            createElementVNode("li", _hoisted_12$2, toDisplayString(unref(t2)("grid.pageSize")), 1),
             (openBlock(), createElementBlock(Fragment, null, renderList(pageSizes, (size, index) => {
               return createElementVNode("li", {
                 key: index,
@@ -3312,12 +3325,12 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                   "cl-text-grey-6": __props.request.pageSize !== size
                 }]),
                 onClick: ($event) => setPageSize(size)
-              }, toDisplayString(unref(n)(size, unref(NumberFormat).INTEGER)), 11, _hoisted_13$2);
+              }, toDisplayString(unref(n)(size, unref(NumberFormat).INTEGER)), 11, _hoisted_13$1);
             }), 64))
           ]),
-          createElementVNode("ul", _hoisted_14$2, [
-            createElementVNode("li", _hoisted_15$2, toDisplayString(unref(t2)("grid.totalRecords")), 1),
-            createElementVNode("li", _hoisted_16$2, toDisplayString(unref(n)(__props.data.totalRecords, unref(NumberFormat).INTEGER)), 1)
+          createElementVNode("ul", _hoisted_14$1, [
+            createElementVNode("li", _hoisted_15$1, toDisplayString(unref(t2)("grid.totalRecords")), 1),
+            createElementVNode("li", _hoisted_16$1, toDisplayString(unref(n)(__props.data.totalRecords, unref(NumberFormat).INTEGER)), 1)
           ])
         ])
       ])) : createCommentVNode("", true);
@@ -3334,8 +3347,8 @@ const _hoisted_7$3 = { class: "cl-py-2 cl-w-1/4" };
 const _hoisted_8$2 = { class: "cl-py-2 cl-w-1/5" };
 const _hoisted_9$2 = { class: "cl-flex-1 cl-py-2" };
 const _hoisted_10$2 = { class: "cl-py-2 cl-w-1/4" };
-const _hoisted_11$2 = { class: "cl-py-2 cl-text-off-white cl-w-1/5" };
-const _hoisted_12$2 = { key: 1 };
+const _hoisted_11$1 = { class: "cl-py-2 cl-text-off-white cl-w-1/5" };
+const _hoisted_12$1 = { key: 1 };
 const __default__ = {
   inheritAttrs: false
 };
@@ -3408,7 +3421,7 @@ function setup(__props, { emit }) {
                           onClick: ($event) => updateColumnVisibility($event.target, column)
                         }, null, 8, ["model-value", "onClick"])
                       ]),
-                      createElementVNode("div", _hoisted_11$2, [
+                      createElementVNode("div", _hoisted_11$1, [
                         column.visible === void 0 || column.visible === true ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                           index !== 0 ? (openBlock(), createBlock(_component_icon, {
                             key: 0,
@@ -3422,7 +3435,7 @@ function setup(__props, { emit }) {
                             icon: "ph:arrow-right",
                             onClick: ($event) => changeColumnOrder(index, "up")
                           }, null, 8, ["onClick"])) : createCommentVNode("", true)
-                        ], 64)) : (openBlock(), createElementBlock("em", _hoisted_12$2, toDisplayString(unref(t2)("grid.hidden")), 1))
+                        ], 64)) : (openBlock(), createElementBlock("em", _hoisted_12$1, toDisplayString(unref(t2)("grid.hidden")), 1))
                       ])
                     ]);
                   }), 128))
@@ -3539,16 +3552,16 @@ const _hoisted_7$2 = { class: "cl-flex cl-flex-wrap cl-w-full" };
 const _hoisted_8$1 = { class: "!cl-bg-white cl-absolute cl-h-screen cl-overflow-x-auto cl-p-4 cl-text-sm cl-w-full cl-z-10" };
 const _hoisted_9$1 = { class: "cl-border-b cl-border-grey-2 cl-mb-2 cl-pb-2 cl-text-right cl-w-full" };
 const _hoisted_10$1 = { class: "cl-grid cl-grid-cols-3" };
-const _hoisted_11$1 = {
+const _hoisted_11 = {
   key: 1,
   class: "cl-ml-2"
 };
-const _hoisted_12$1 = { class: "cl-overflow-auto cl-w-full" };
-const _hoisted_13$1 = { class: "cl-min-w-full cl-table-fixed" };
-const _hoisted_14$1 = { class: "cl-hidden lg:cl-table-column-group" };
-const _hoisted_15$1 = { class: "cl-hidden lg:cl-table-header-group" };
-const _hoisted_16$1 = ["onClick"];
-const _hoisted_17$1 = { key: 1 };
+const _hoisted_12 = { class: "cl-overflow-auto cl-w-full" };
+const _hoisted_13 = { class: "cl-min-w-full cl-table-fixed" };
+const _hoisted_14 = { class: "cl-hidden lg:cl-table-column-group" };
+const _hoisted_15 = { class: "cl-hidden lg:cl-table-header-group" };
+const _hoisted_16 = ["onClick"];
+const _hoisted_17 = { key: 1 };
 const _hoisted_18 = { key: 0 };
 const _hoisted_19 = { key: 1 };
 const _hoisted_20 = ["colspan"];
@@ -3757,7 +3770,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                           icon: "ph:caret-up",
                           onClick: ($event) => setSort(column.field)
                         }, null, 8, ["onClick"]))
-                      ], 64)) : (openBlock(), createElementBlock("div", _hoisted_11$1, " \xA0 "))
+                      ], 64)) : (openBlock(), createElementBlock("div", _hoisted_11, " \xA0 "))
                     ]);
                   }), 128))
                 ], 512), [
@@ -3767,9 +3780,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               _: 1
             })
           ]),
-          createElementVNode("div", _hoisted_12$1, [
-            createElementVNode("table", _hoisted_13$1, [
-              createElementVNode("colgroup", _hoisted_14$1, [
+          createElementVNode("div", _hoisted_12, [
+            createElementVNode("table", _hoisted_13, [
+              createElementVNode("colgroup", _hoisted_14, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleColumns), (column, index) => {
                   return openBlock(), createElementBlock("col", {
                     key: index,
@@ -3778,7 +3791,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                   }, null, 4);
                 }), 128))
               ]),
-              createElementVNode("thead", _hoisted_15$1, [
+              createElementVNode("thead", _hoisted_15, [
                 createElementVNode("tr", null, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleColumns), (column, index) => {
                     var _a2;
@@ -3805,7 +3818,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         }, null, 512), [
                           [vShow, unref(currentRequest).sort !== null && unref(currentRequest).sort.sortOnColumn === column.field && unref(currentRequest).sort.sortByAscending === false]
                         ])
-                      ], 8, _hoisted_16$1)) : (openBlock(), createElementBlock("span", _hoisted_17$1, toDisplayString(column.caption), 1))
+                      ], 8, _hoisted_16)) : (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(column.caption), 1))
                     ], 4);
                   }), 128))
                 ]),
@@ -4086,7 +4099,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var clUiLogin_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$4 = { class: "cl-relative" };
 const _hoisted_2$3 = { class: "cl-h-screen cl-z-0" };
 const _hoisted_3$2 = { class: "cl-absolute cl-bg-secondary-default cl-gap-y-1 cl-grid cl-grid-cols-1 cl-left-0 cl-opacity-95 cl-p-6 cl-top-0 cl-w-full cl-z-10 lg:cl-gap-x-1 lg:cl-grid-cols-10 lg:cl-p-10" };
@@ -4097,16 +4109,9 @@ const _hoisted_5 = {
 };
 const _hoisted_6 = { class: "cl-col-span-3" };
 const _hoisted_7 = { class: "cl-inline cl-relative cl-text-grey-4" };
-const _hoisted_8 = ["data-valid", "placeholder"];
-const _hoisted_9 = { class: "cl-text-grey-3 cl-text-sm" };
-const _hoisted_10 = { class: "cl-flex cl-mt-2" };
-const _hoisted_11 = { class: "cl-align-middle cl-inline-block cl-ml-2" };
-const _hoisted_12 = { class: "cl-flex cl-mt-2" };
-const _hoisted_13 = { class: "cl-align-middle cl-inline-block cl-ml-2" };
-const _hoisted_14 = { class: "cl-col-span-3" };
-const _hoisted_15 = { class: "cl-inline cl-relative cl-text-grey-4" };
-const _hoisted_16 = ["type", "data-valid", "placeholder"];
-const _hoisted_17 = { class: "cl-col-span-10 cl-emphasis-danger cl-mt-10 cl-p-3 cl-rounded-md cl-text-sm md:cl-mt-3" };
+const _hoisted_8 = { class: "cl-col-span-3" };
+const _hoisted_9 = { class: "cl-inline cl-relative cl-text-grey-4" };
+const _hoisted_10 = { class: "cl-col-span-10 cl-emphasis-danger cl-mt-10 cl-p-3 cl-rounded-md cl-text-sm md:cl-mt-3" };
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   props: {
     errors: { default: () => [] },
@@ -4121,7 +4126,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const username = ref("");
     const password = ref("");
     const passwordFieldType = ref("password");
-    const usernameValid = computed(() => /[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)/gi.test(username.value));
+    const usernameValid = ref();
     function login() {
       const authentication = {
         username: username.value,
@@ -4132,18 +4137,31 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     function clearErrors() {
       emit("update:errors", []);
     }
+    function emptyIsInvalidValidation(_, value) {
+      const state = {
+        valid: true,
+        message: ""
+      };
+      if (typeof value === "string" && value.trim() === "") {
+        state.valid = false;
+      }
+      return state;
+    }
+    function onUsernameValidated(valid, _) {
+      usernameValid.value = valid;
+    }
     return (_ctx, _cache) => {
       const _component_icon = resolveComponent("icon");
       return openBlock(), createElementBlock("div", _hoisted_1$4, [
         createElementVNode("div", _hoisted_2$3, [
-          renderSlot(_ctx.$slots, "background", {}, void 0, true)
+          renderSlot(_ctx.$slots, "background")
         ]),
         createElementVNode("form", _hoisted_3$2, [
           createElementVNode("div", _hoisted_4, [
-            renderSlot(_ctx.$slots, "logo", {}, void 0, true)
+            renderSlot(_ctx.$slots, "logo")
           ]),
           _ctx.$slots["language-switcher"] ? (openBlock(), createElementBlock("div", _hoisted_5, [
-            renderSlot(_ctx.$slots, "language-switcher", {}, void 0, true)
+            renderSlot(_ctx.$slots, "language-switcher")
           ])) : createCommentVNode("", true),
           createElementVNode("div", {
             class: normalizeClass(["cl-gap-y-4 cl-grid cl-grid-cols-1 lg:cl-gap-x-2 lg:cl-grid-cols-8", {
@@ -4154,66 +4172,39 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             createElementVNode("div", _hoisted_6, [
               createElementVNode("div", _hoisted_7, [
                 createVNode(_component_icon, {
-                  class: "cl-absolute cl-left-3 cl-top-2",
+                  class: "cl-absolute cl-left-3 cl-top-2.5",
                   icon: "ph:user",
                   size: 18
                 }),
-                withDirectives(createElementVNode("input", {
+                createVNode(ClUiInput, {
+                  modelValue: username.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => username.value = $event),
-                  class: "!cl-pb-1 !cl-pl-9 cl-w-full",
-                  type: "email",
-                  "data-valid": unref(usernameValid),
-                  placeholder: unref(t2)("login.email"),
+                  modelModifiers: { trim: true },
+                  class: "!cl-border-2 !cl-mb-1 cl-w-full",
+                  "input-type": "email",
+                  "highlight-when-valid": true,
+                  label: "Username",
+                  "show-label": false,
+                  "placeholder-text": unref(t2)("login.email"),
                   autocomplete: "username",
-                  onInput: clearErrors
-                }, null, 40, _hoisted_8), [
-                  [
-                    vModelText,
-                    username.value,
-                    void 0,
-                    { trim: true }
-                  ]
-                ])
-              ]),
-              createVNode(Transition, { name: "fade" }, {
-                default: withCtx(() => [
-                  withDirectives(createElementVNode("div", _hoisted_9, [
-                    withDirectives(createElementVNode("div", _hoisted_10, [
-                      createVNode(_component_icon, {
-                        class: "cl-mt-1 cl-text-primary-default",
-                        icon: "ph:check",
-                        size: 16
-                      }),
-                      createElementVNode("em", _hoisted_11, toDisplayString(unref(t2)("login.validEmail")), 1)
-                    ], 512), [
-                      [vShow, unref(usernameValid)]
-                    ]),
-                    withDirectives(createElementVNode("div", _hoisted_12, [
-                      createVNode(_component_icon, {
-                        class: "cl-mt-1 cl-text-danger-default",
-                        icon: "ph:x",
-                        size: 16
-                      }),
-                      createElementVNode("em", _hoisted_13, toDisplayString(unref(t2)("login.invalidEmail")), 1)
-                    ], 512), [
-                      [vShow, !unref(usernameValid)]
-                    ])
-                  ], 512), [
-                    [vShow, username.value !== ""]
-                  ])
-                ]),
-                _: 1
-              })
+                  "validate-immediately": true,
+                  "custom-validation-function": emptyIsInvalidValidation,
+                  "input-specific-classes": "!cl-pl-9",
+                  "message-when-valid": unref(t2)("login.validEmail"),
+                  onInput: clearErrors,
+                  onValidated: onUsernameValidated
+                }, null, 8, ["modelValue", "placeholder-text", "message-when-valid"])
+              ])
             ]),
-            createElementVNode("div", _hoisted_14, [
-              createElementVNode("div", _hoisted_15, [
+            createElementVNode("div", _hoisted_8, [
+              createElementVNode("div", _hoisted_9, [
                 createVNode(_component_icon, {
-                  class: "cl-absolute cl-left-3 cl-top-2",
+                  class: "cl-absolute cl-left-3 cl-top-2.5",
                   icon: "ph:lock",
                   size: 18
                 }),
                 withDirectives(createVNode(_component_icon, {
-                  class: "cl-absolute cl-cursor-pointer cl-right-3 cl-top-2",
+                  class: "cl-absolute cl-cursor-pointer cl-right-6 cl-top-2.5",
                   icon: "ph:eye",
                   size: 18,
                   onClick: _cache[1] || (_cache[1] = ($event) => passwordFieldType.value = "text")
@@ -4221,24 +4212,26 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                   [vShow, passwordFieldType.value === "password"]
                 ]),
                 withDirectives(createVNode(_component_icon, {
-                  class: "cl-absolute cl-cursor-pointer cl-right-3 cl-top-2",
+                  class: "cl-absolute cl-cursor-pointer cl-right-6 cl-top-2.5",
                   icon: "ph:eye-slash",
                   size: 18,
                   onClick: _cache[2] || (_cache[2] = ($event) => passwordFieldType.value = "password")
                 }, null, 512), [
                   [vShow, passwordFieldType.value === "text"]
                 ]),
-                withDirectives(createElementVNode("input", {
+                createVNode(ClUiInput, {
+                  modelValue: password.value,
                   "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => password.value = $event),
-                  class: "!cl-pb-1 !cl-pl-9 !cl-pr-9 cl-w-full",
-                  type: passwordFieldType.value,
-                  "data-valid": password.value !== "",
-                  placeholder: unref(t2)("login.password"),
+                  class: "!cl-border-2 cl-w-full",
+                  "input-type": passwordFieldType.value,
+                  "highlight-when-valid": true,
+                  "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, 40, _hoisted_16), [
-                  [vModelDynamic, password.value]
-                ])
+                }, null, 8, ["modelValue", "input-type", "placeholder-text"])
               ])
             ]),
             createElementVNode("div", {
@@ -4247,10 +4240,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               }])
             }, [
               createVNode(_sfc_main$p, {
-                class: "cl-w-full",
+                class: "!cl-leading-9 cl-w-full",
                 colour: "blue",
                 loading: __props.loading,
-                disabled: !unref(usernameValid) || password.value === "",
+                disabled: !usernameValid.value || password.value === "",
                 onClick: withModifiers(login, ["prevent"])
               }, {
                 default: withCtx(() => [
@@ -4264,7 +4257,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             default: withCtx(() => {
               var _a;
               return [
-                withDirectives(createElementVNode("span", _hoisted_17, [
+                withDirectives(createElementVNode("span", _hoisted_10, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(__props.errors, (error, index) => {
                     return openBlock(), createElementBlock("div", {
                       key: index,
@@ -4283,7 +4276,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var clUiLogin = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-b0617ab0"]]);
 const modalSizes = [
   "x-small",
   "small",
@@ -4476,7 +4468,7 @@ var components = /* @__PURE__ */ Object.freeze({
   isLanguageLocaleFormat,
   isLanguageArray,
   clUiLoadingSpinner: ClUiLoadingSpinner,
-  clUiLogin,
+  clUiLogin: _sfc_main$5,
   clUiModal: _sfc_main$k,
   modalSizes,
   modalColours,
@@ -4737,4 +4729,4 @@ const install = (app) => {
     app.component(name, component);
   });
 };
-export { DateFormat, FilterOperation, NumberFormat, buttonColours, buttonSizes, cardSizes, _sfc_main$v as clUiAccordion, clUiAccordionHeader, _sfc_main$u as clUiAccordionItem, _sfc_main$r as clUiApp, _sfc_main$p as clUiButton, _sfc_main$o as clUiCard, _sfc_main$g as clUiComboBox, clUiFooter, clUiGrid, clUiHeader, _sfc_main$7 as clUiHeaderMenu, ClUiInput as clUiInput, _sfc_main$6 as clUiLanguageSwitcher, ClUiLoadingSpinner as clUiLoadingSpinner, clUiLogin, _sfc_main$k as clUiModal, clUiNavigation, _sfc_main$2 as clUiNavigationGroup, _sfc_main$3 as clUiNavigationIcon, clUiNavigationItem, clUiNavigationSection, _sfc_main$s as clUiNotification, compareByProperty, copy, datetimeFormats, install as default, filterMethodTypes, generateStringId, getParamsByName, gridColumnTypes, i18n, inputTypes, isComboBoxCreateRequest, isComboBoxItem, isFilterRequest, isFilterResponse, isGridColumn, isGridColumnArray, isLanguageArray, isLanguageLocaleFormat, messages, modalColours, modalSizes, nameOf, numberFormats, setCurrentLocale, setLocaleDateTimeFormats, setLocaleMessages, setLocaleNumberFormats, showNotification, stringFormats, useDebouncer, validateEmail, validateMaxValue, validateMinValue };
+export { DateFormat, FilterOperation, NumberFormat, buttonColours, buttonSizes, cardSizes, _sfc_main$v as clUiAccordion, clUiAccordionHeader, _sfc_main$u as clUiAccordionItem, _sfc_main$r as clUiApp, _sfc_main$p as clUiButton, _sfc_main$o as clUiCard, _sfc_main$g as clUiComboBox, clUiFooter, clUiGrid, clUiHeader, _sfc_main$7 as clUiHeaderMenu, ClUiInput as clUiInput, _sfc_main$6 as clUiLanguageSwitcher, ClUiLoadingSpinner as clUiLoadingSpinner, _sfc_main$5 as clUiLogin, _sfc_main$k as clUiModal, clUiNavigation, _sfc_main$2 as clUiNavigationGroup, _sfc_main$3 as clUiNavigationIcon, clUiNavigationItem, clUiNavigationSection, _sfc_main$s as clUiNotification, compareByProperty, copy, datetimeFormats, install as default, filterMethodTypes, generateStringId, getParamsByName, gridColumnTypes, i18n, inputTypes, isComboBoxCreateRequest, isComboBoxItem, isFilterRequest, isFilterResponse, isGridColumn, isGridColumnArray, isLanguageArray, isLanguageLocaleFormat, messages, modalColours, modalSizes, nameOf, numberFormats, setCurrentLocale, setLocaleDateTimeFormats, setLocaleMessages, setLocaleNumberFormats, showNotification, stringFormats, useDebouncer, validateEmail, validateMaxValue, validateMinValue };