update field

vuejs/client/input.css

@@ -159,6 +159,11 @@ body {
 }
 
 /* INPUT */
+
+.field-container {
+  @apply relative w-full px-3 md:px-4 pt-2 md:pt-3 pb-0.5 md:pb-1;
+}
+
 .input-header-container {
   @apply z-20;
 }
@@ -180,7 +185,11 @@ body {
 }
 
 .input-error-msg {
-  @apply text-red-500 dark:text-red-300 text-[0.75rem] font-semibold mb-0 mt-0.5;
+  @apply text-red-500 text-[0.75rem] font-semibold mb-0 mt-0.5;
+}
+
+.valid.input-error-msg {
+  @apply pointer-events-none -z-10 opacity-0;
 }
 
 .checkbox-container {

vuejs/client/src/components/Forms/Error/Field.vue

@@ -1,5 +1,4 @@
 <script setup>
-
 /** 
   @name Forms/Error/Field.vue
   @description This component is used to display a feedback message to user when a field is invalid.
@@ -14,30 +13,30 @@
 */
 
 const props = defineProps({
-    isValid: {
-        type: Boolean,
-        required: false,
-    },
-    isValue : {
-        type: Boolean,
-        required: false,
-    }
-})
+  isValid: {
+    type: Boolean,
+    required: false,
+  },
+  isValue: {
+    type: Boolean,
+    required: false,
+  },
+});
 </script>
 
 <template>
-        <p
-      :aria-hidden="props.isValid ? 'true' : 'false'"
-      role="alert"
-      :class="[props.isValid ? 'hidden' : '']"
-      class="input-error-msg"
-    >
+  <p
+    :aria-hidden="props.isValid ? 'true' : 'false'"
+    role="alert"
+    :class="[props.isValid ? 'valid' : '']"
+    class="input-error-msg"
+  >
     {{
-        props.isValid
-          ? $t("inp_input_valid")
-          : !props.isValue
-            ? $t("inp_input_error_required")
-            : $t("inp_input_error")
-      }}
-    </p>
-</template>
+      props.isValid
+        ? $t("inp_input_valid")
+        : !props.isValue
+        ? $t("inp_input_error_required")
+        : $t("inp_input_error")
+    }}
+  </p>
+</template>

vuejs/client/src/components/Forms/Field/Checkbox.vue

@@ -134,7 +134,7 @@ onMounted(() => {
 
 <template>
   <Container
-    :containerClass="`relative w-full p-2 md:p-3 ${props.containerClass}`"
+    :containerClass="`field-container ${props.containerClass}`"
     :columns="props.columns"
   >
     <Header

vuejs/client/src/components/Forms/Field/Datepicker.vue

@@ -635,7 +635,7 @@ function setIndex(calendarEl, tabindex) {
 <template>
   <Container
     v-if="props.inpType === 'datepicker'"
-    :containerClass="`w-full p-2 md:p-3 ${props.containerClass}`"
+    :containerClass="`field-container ${props.containerClass}`"
     :columns="props.columns"
   >
     <Header

vuejs/client/src/components/Forms/Field/Input.vue

@@ -184,7 +184,7 @@ onMounted(() => {
 
 <template>
   <Container
-    :containerClass="`w-full p-2 md:p-3 ${props.containerClass}`"
+    :containerClass="`field-container ${props.containerClass}`"
     :columns="props.columns"
   >
     <Header

vuejs/client/src/components/Forms/Field/Select.vue

@@ -282,7 +282,7 @@ const emits = defineEmits(["inp"]);
 
 <template>
   <Container
-    :containerClass="`w-full p-2 md:p-3 ${props.containerClass}`"
+    :containerClass="`field-container ${props.containerClass}`"
     :columns="props.columns"
   >
     <Header

vuejs/client/src/components/Icons/Box.vue

@@ -11,21 +11,29 @@
 */
 
 const props = defineProps({
-    iconClass : {
-        type: String,
-        required: false,
-        default : "default-svg"
-    },
-    iconColor : {
-        type: String,
-        required: false,
-        default: "info",
-    }
-})
+  iconClass: {
+    type: String,
+    required: false,
+    default: "default-svg",
+  },
+  iconColor: {
+    type: String,
+    required: false,
+    default: "info",
+  },
+});
 </script>
 <template>
-<svg   role="img"
-    aria-hidden="true" :class="[props.iconClass, props.iconColor]"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-  <path d="M12.378 1.602a.75.75 0 0 0-.756 0L3 6.632l9 5.25 9-5.25-8.622-5.03ZM21.75 7.93l-9 5.25v9l8.628-5.032a.75.75 0 0 0 .372-.648V7.93ZM11.25 22.18v-9l-9-5.25v8.57a.75.75 0 0 0 .372.648l8.628 5.033Z" />
-</svg>
+  <svg
+    role="img"
+    aria-hidden="true"
+    :class="[props.iconClass, props.iconColor, 'dark:brightness-[125%]']"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path
+      d="M12.378 1.602a.75.75 0 0 0-.756 0L3 6.632l9 5.25 9-5.25-8.622-5.03ZM21.75 7.93l-9 5.25v9l8.628-5.032a.75.75 0 0 0 .372-.648V7.93ZM11.25 22.18v-9l-9-5.25v8.57a.75.75 0 0 0 .372.648l8.628 5.033Z"
+    />
+  </svg>
 </template>

vuejs/test.py

@@ -32,6 +32,9 @@ def set_advanced():
                 loop_id += 1
                 # add zindex for container
                 value["containerClass"] = f"z-{total_settings - loop_id}"
+                # regex by pattern
+                value["pattern"] = value.get("regex", "")
+
                 # set id base on template name
                 value["id"] = f"{value["id"]}-{template_name}"
                 # set inpType based on type define for each settings